/* LastSeen docs (docs.lastseen.io): the site's "Bench Instrument" tokens and type
   (docs/design/README.md). Fonts are self-hosted (SIL OFL 1.1: fonts/OFL-*.txt). No scripts. */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-semi-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-400.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(fonts/jetbrains-mono-700.woff2) format("woff2"); }
:root {
  color-scheme: light;
  --bg: #eceef0; --pn: #fbfbfc; --pn2: #f3f4f6; --ln: #d5d9dd; --ln2: #e5e8eb; --ct: #c2c8ce;
  --fg: #14171a; --mu: #535b63; --so: #363d44; --ac: #136d79; --note: #e3f0f2;
  --code: #14171a; --codeFg: #e6e8ea; --inl: #e5e8eb;
  --sans: "Barlow", system-ui, sans-serif; --cond: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f1113; --pn: #15181b; --pn2: #1a1e22; --ln: #262b30; --ln2: #22272c; --ct: #333a41;
    --fg: #e6e8ea; --mu: #99a0a7; --so: #c3c8cd; --ac: #7fd4e0; --note: #14272b;
    --code: #0b0d0e; --inl: #22272c;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); -webkit-text-size-adjust: 100%; }
a { color: var(--ac); }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.bar { border-bottom: 1px solid var(--ln); background: var(--pn2); }
.bar > div { display: flex; align-items: center; gap: 14px; height: 56px; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.brand { font: 700 16px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.bar .section { font: 600 13px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); text-decoration: none; }
.bar .spacer { flex: 1; }
.bar .signin { font-size: 14px; }

.layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }
.sidebar { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; font-size: 14px; }
.sidebar .group { margin-bottom: 20px; }
.sidebar .label { font: 600 11px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mu); margin-bottom: 6px; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li a { display: block; padding: 3px 10px; border-left: 2px solid var(--ln); color: var(--so); text-decoration: none; }
.sidebar li a:hover { color: var(--fg); border-left-color: var(--ct); }
.sidebar li a[aria-current] { color: var(--ac); border-left-color: var(--ac); font-weight: 600; }

main { min-width: 0; max-width: 760px; }
h1 { font: 600 38px/1.1 var(--sans); letter-spacing: -.015em; margin: 0 0 10px; }
.lede { font-size: 19px; color: var(--mu); margin: 0 0 32px; }
h2, h3, h4 { line-height: 1.25; margin: 40px 0 12px; scroll-margin-top: 16px; }
h2 { font: 600 26px/1.25 var(--sans); padding-top: 20px; border-top: 1px solid var(--ln); }
h3 { font: 600 20px/1.3 var(--sans); }
h4 { font: 600 13px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.anchor { visibility: hidden; margin-left: 6px; color: var(--ct); text-decoration: none; font-weight: 400; }
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus { visibility: visible; }
p, ul, ol { margin: 0 0 16px; }
li { margin-bottom: 6px; }
strong { font-weight: 600; }
code { font: 14px var(--mono); background: var(--inl); padding: 1px 5px; border-radius: 3px; }
pre { background: var(--code); color: var(--codeFg); padding: 16px 18px; border-radius: 4px; overflow-x: auto; margin: 0 0 20px; }
pre code { background: none; padding: 0; color: inherit; font-size: 13.5px; line-height: 1.55; }
.note { background: var(--note); border-left: 3px solid var(--ac); padding: 12px 16px; margin: 0 0 20px; border-radius: 0 4px 4px 0; }
.note p { margin: 0; }
.tablewrap { overflow-x: auto; margin: 0 0 20px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--pn); border: 1px solid var(--ln); }
th, td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--ln2); }
th { font: 600 12px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); background: var(--pn2); }

.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--ln); }
.pager .next { margin-left: auto; text-align: right; }
footer { margin-top: 32px; color: var(--mu); font-size: 14px; }

/* Phones: one column, the contents after the page. */
@media (max-width: 820px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 24px 16px 48px; }
  .bar > div { padding: 0 16px; }
  .sidebar { position: static; max-height: none; order: 2; border-top: 1px solid var(--ln); padding-top: 24px; }
  h1 { font-size: 30px; }
  .lede { font-size: 17px; }
}