/* llamay.com — the anz33.com house style, the same one kosa8.com is built in.
 *
 * Light, editorial and quiet: a lot of white space, one warm accent, prose
 * held to a readable measure, and the only dark surface on the page being a
 * terminal block. It reads like a document rather than a brochure, which is
 * the right register for an engine whose pitch is "here is exactly what it
 * does, including the parts it loses at".
 *
 * One stylesheet for the whole site rather than one per page. The landing
 * page, the download page and the eleven docs pages are the same site and a
 * visitor moving between them should not be able to tell where one build
 * stopped and another started -- which is what happened the first time, when
 * the docs page carried its own palette and the download page a third.
 *
 * No @font-face and no external requests. Inter and JetBrains Mono are named
 * so they are used where somebody already has them, and the system stack
 * carries the rest; a site about keeping work on your own machine should not
 * fetch its fonts from someone else's.
 */

:root {
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px;  --s9: 96px;

  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-full: 999px;

  --sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-h1: clamp(32px, 4.6vw, 46px);
  --fs-h2: clamp(24px, 3vw, 32px);
  --fs-body: 16.5px;
  --fs-sm: 14.5px;
  --fs-xs: 13px;
  --fs-mono: 13px;

  --measure: 72ch;
  --wrap: 1120px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Light is the default. The dark set is a real second theme rather than an
   inversion, because a page that is only ever light looks broken to somebody
   whose whole desktop is dark. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elev: #fafafa;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --line: rgba(10, 12, 20, .10);
  --line-strong: rgba(10, 12, 20, .18);
  --text: #14161c;
  --text-2: #545c6b;
  --text-3: #858c9a;
  --accent: #b45309;
  --accent-ink: #fff8ec;
  --ok: #0f766e;
  --warn: #b3261e;
  --term-bg: #0a0c11;
  --glow: radial-gradient(760px 320px at 12% -12%, rgba(180, 83, 9, .06), transparent 62%);
  --shadow: 0 1px 2px rgba(10, 12, 20, .05), 0 12px 40px rgba(10, 12, 20, .10);
  --shadow-sm: 0 1px 3px rgba(10, 12, 20, .06);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d11;
  --bg-elev: #10141a;
  --surface: #12161c;
  --surface-2: #171c23;
  --line: rgba(220, 228, 238, .10);
  --line-strong: rgba(220, 228, 238, .18);
  --text: #e6ebf1;
  --text-2: #a3adba;
  --text-3: #7d8794;
  --accent: #eba14a;
  --accent-ink: #1a1206;
  --ok: #4db6a4;
  --warn: #e8825a;
  --term-bg: #06080b;
  --glow: radial-gradient(760px 320px at 12% -12%, rgba(235, 161, 74, .07), transparent 62%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .45);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg) var(--glow) no-repeat;
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }

h1, h2, h3, h4 { color: var(--text); }
h1 {
  font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.035em;
  font-weight: 600; margin: 0 0 var(--s4); max-width: 20ch; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--accent); }
h2 {
  font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.028em;
  font-weight: 600; margin: 0 0 var(--s3); max-width: 26ch; text-wrap: balance;
}
h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 var(--s2); }

p { margin: 0 0 var(--s4); color: var(--text-2); max-width: var(--measure); }
.lead { font-size: 18.5px; color: var(--text-2); line-height: 1.62; max-width: var(--measure); }

.eyebrow {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3);
}

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: var(--s5); padding: var(--s3) var(--s5); max-width: var(--wrap); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: var(--s2); color: var(--text); font-weight: 650; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; display: block; }
/* The mark is one file drawn in currentColor, which an <img> renders black.
   That is right on a light page and invisible on a dark one, so the dark
   theme inverts it rather than shipping a second asset that can drift from
   the first. site/mark.svg is the solid silhouette: at 26px the traced
   outline in site/logo.svg falls below a pixel and reads as a smudge. */
[data-theme="dark"] .brand img { filter: invert(1); }
.brand i { font-style: normal; font-weight: 450; color: var(--text-3); }
.nav__links { margin-left: auto; display: flex; gap: var(--s5); font-size: var(--fs-sm); align-items: center; }
.nav__links a { color: var(--text-2); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--text); text-decoration: none; }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); flex: none;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .icon.sun, :root:not([data-theme="dark"]) .icon.moon { display: none; }
@media (max-width: 860px) { .nav__links a { display: none; } .nav__links a.keep { display: inline; } }

/* ---- sections ---- */
section { padding: var(--s9) 0; }
.section-line { border-top: 1px solid var(--line); }
.sec-head { max-width: 640px; margin-bottom: var(--s8); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center h2, .sec-head.center .lead { margin-left: auto; margin-right: auto; }
.sec-head .lead { margin: 0; }
@media (max-width: 720px) { section { padding: var(--s8) 0; } .sec-head { margin-bottom: var(--s6); } }

/* ---- hero ---- */
.hero { padding: var(--s9) 0 var(--s8); }
.hero h1 {
  font-size: clamp(40px, 7.4vw, 84px); line-height: .98; letter-spacing: -.045em;
  max-width: 15ch; margin-bottom: var(--s5);
}
.hero .lead { font-size: 20.5px; max-width: 56ch; margin-bottom: var(--s6); }
.hero__cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.hero__chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s6); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 550;
  padding: 11px 20px; border-radius: var(--r-full);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s var(--ease), filter .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--text-3); }
.btn--sm { padding: 7px 13px; font-size: var(--fs-xs); }

.badge {
  font-size: var(--fs-xs); font-weight: 500; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  border-radius: var(--r-full); padding: 3px 11px;
}
.chip {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 4px 12px;
}

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); align-items: start; }
.cards.tight { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.card h3 { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.card p { font-size: var(--fs-sm); margin: 0; max-width: none; }
.card p + p { margin-top: var(--s2); }
a.card { color: var(--text); transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
a.card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
a.card .go { display: block; margin-top: var(--s3); font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent); }

/* ---- terminal: the one dark surface on a light page ---- */
.term {
  background: var(--term-bg); border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); max-width: 100%;
}
.term__bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.term__bar span { margin-left: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6f7a87; }
.term pre {
  margin: 0; padding: var(--s4) var(--s5) var(--s5);
  font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.8;
  color: #d7dee4; overflow-x: auto;
  /* Wrap rather than clip. A registry reference plus a model name is longer
     than the box at any width worth designing for, and a command whose tail is
     cut off is a command nobody can copy. */
  white-space: pre-wrap; overflow-wrap: break-word;
}
.d { color: #6f7a87; }   /* comment  */
.a { color: #eba14a; }   /* accent   */
.c { color: #67c7d8; }   /* value    */
.g { color: #6bd39a; }   /* good     */
.r { color: #e8825a; }   /* bad      */

/* ---- copyable command ---- */
.cmd {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left;
  background: var(--term-bg); color: #d7dee4;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--r-sm);
  padding: 12px 12px 12px 16px; font-family: var(--mono); font-size: var(--fs-mono);
  cursor: pointer; transition: border-color .15s var(--ease); max-width: 100%;
}
.cmd:hover { border-color: var(--accent); }
.cmd .t { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; line-height: 1.75; scrollbar-width: none; }
.cmd .t::-webkit-scrollbar { display: none; }
.cmd .ico {
  display: grid; place-items: center; min-width: 30px; height: 26px; flex-shrink: 0;
  border-radius: 6px; background: rgba(255, 255, 255, .07); color: #8d96a3;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
}
.cmd:hover .ico { color: var(--accent); }
.cmd[data-done] { border-color: var(--ok); }
.cmd[data-done] .ico { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }

/* ---- numbered steps ---- */
.steps { display: grid; gap: var(--s6); max-width: 800px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); align-items: start; }
.step > * { min-width: 0; }
.step__n {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3);
}
.step h3 { margin-top: 4px; }
.step p { font-size: var(--fs-sm); margin-bottom: var(--s3); }

/* ---- split / product rows ---- */
.split { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1.1fr; gap: var(--s7); } .split.flip > *:first-child { order: 2; } }
.split > * { min-width: 0; }
.split h3 { font-size: 19px; }
.product { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 980px) {
  .product { grid-template-columns: 0.85fr 1.15fr; gap: var(--s7); }
  .product.flip > *:first-child { order: 2; }
}
.product > * { min-width: 0; }
.product + .product { margin-top: var(--s9); }
@media (max-width: 979px) { .product + .product { margin-top: var(--s8); } }
.product .kicker {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s3);
}
.product h3 { font-size: 24px; letter-spacing: -.026em; margin-bottom: var(--s3); line-height: 1.25; }
.product p { font-size: var(--fs-sm); }

/* ---- figures and diagrams ---- */
figure { margin: var(--s6) 0; }
figure.diagram {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); overflow-x: auto;
}
figure.diagram svg { width: 100%; height: auto; min-width: 560px; display: block; }
figcaption { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-3); max-width: var(--measure); }
figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

/* The diagram vocabulary, so every drawing on the site says the same thing
   with the same ink: a box is a component, a dashed box is optional or
   deferred, teal is a thing that is proved, amber is the thing being explained. */
.dg { font-family: var(--sans); }
.dg .box { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.4; }
.dg .box-a { fill: color-mix(in srgb, var(--accent) 10%, var(--surface)); stroke: var(--accent); stroke-width: 1.4; }
.dg .box-o { fill: color-mix(in srgb, var(--ok) 10%, var(--surface)); stroke: var(--ok); stroke-width: 1.4; }
.dg .box-d { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 5 4; }
.dg .t { fill: var(--text); font-size: 13px; font-weight: 600; }
.dg .s { fill: var(--text-2); font-size: 11.5px; font-weight: 400; }
.dg .k { fill: var(--text-3); font-size: 10.5px; font-family: var(--mono); letter-spacing: .06em; }
.dg .ta { fill: var(--accent); font-size: 11.5px; font-weight: 500; }
.dg .to { fill: var(--ok); font-size: 11.5px; font-weight: 500; }
.dg .ln { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.dg .ln-a { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.dg .ln-o { fill: none; stroke: var(--ok); stroke-width: 1.6; }
.dg .ln-d { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 5 4; }
.dg .fill-a { fill: var(--accent); }
.dg .fill-o { fill: var(--ok); }
.dg .fill-l { fill: var(--line-strong); }

/* ---- tables ---- */
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); margin: var(--s5) 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { text-align: left; padding: 12px var(--s5); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.y, .y { color: var(--ok); } td.n, .n { color: var(--text-3); }
td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: var(--fs-xs); white-space: nowrap; }
tbody tr.hi td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
tbody tr.hi td:first-child { font-weight: 600; color: var(--text); }
td code, th code { white-space: nowrap; }

/* ---- callout ---- */
.note {
  border-left: 3px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--s4) var(--s5); margin: var(--s5) 0;
  max-width: var(--measure);
}
.note b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }
.note p { margin-bottom: 0; font-size: var(--fs-sm); }
.note p + p { margin-top: var(--s3); }
.note ul { margin: 0; padding-left: var(--s5); color: var(--text-2); font-size: var(--fs-sm); }
.note li { margin-bottom: 6px; }
.note--warn { border-left-color: var(--warn); }
.note--warn b { color: var(--warn); }
.note--ok { border-left-color: var(--ok); }
.note--ok b { color: var(--ok); }

/* ---- numbers ---- */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); }
.num { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.num b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.num b i { font-style: normal; font-size: 15px; color: var(--text-3); font-weight: 400; }
.num span { display: block; margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }

/* ---- download rows ---- */
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); }
.dl a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px var(--s4); color: var(--text); font-family: var(--mono); font-size: var(--fs-xs);
}
.dl a:hover { border-color: var(--accent); text-decoration: none; }
.dl a i { font-style: normal; color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.dl a.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.dl a.primary i { color: color-mix(in srgb, var(--accent-ink) 70%, var(--accent)); }

/* A file list: a name, what it is, and how big. */
.files { display: grid; gap: 2px; margin-top: var(--s3); }
.file { display: flex; align-items: baseline; gap: var(--s3); padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.file:last-child { border-bottom: 0; }
.file a { font-weight: 550; }
.file .what { color: var(--text-2); font-size: var(--fs-xs); }
.file .size { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- faq ---- */
.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none;
  display: flex; align-items: center; gap: var(--s4); letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-family: var(--mono); font-weight: 400;
  color: var(--text-3); font-size: 19px; transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: var(--s3); font-size: var(--fs-sm); margin-bottom: 0; }
.faq p + p { margin-top: var(--s3); }

/* ---- closer ---- */
.closer { text-align: center; }
.closer h2 { margin: 0 auto var(--s3); }
.closer .lead { margin: 0 auto var(--s6); }
.closer .hero__cta { justify-content: center; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s7); background: var(--bg-elev); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s6); margin-bottom: var(--s7); }
.fgrid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--s3); font-weight: 600; }
.fgrid a { display: block; padding: 3px 0; color: var(--text-2); font-size: var(--fs-sm); }
.fgrid a:hover { color: var(--text); text-decoration: none; }
.fine { font-size: var(--fs-xs); color: var(--text-3); max-width: 76ch; margin: 0; }

/* Anything in a grid or flex row may shrink; without this a long unwrapped
   command stretches its parent and the whole page scrolls sideways. */
.cards > *, .split > *, .nums > *, .dl > *, .steps > *, .product > * { min-width: 0; }

/* ===========================================================================
   Docs chrome.
   ---------------------------------------------------------------------------
   A sidebar of the whole site, a page, and a table of contents for that page.
   The docs are many pages rather than one long one because "architecture" and
   "the HTTP API" are read by different people on different days, and a single
   scroll makes both of them read past the other.
   =========================================================================== */
.doc {
  display: grid; grid-template-columns: 244px minmax(0, 1fr) 200px;
  gap: var(--s7); max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5);
}
@media (max-width: 1180px) { .doc { grid-template-columns: 232px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; gap: var(--s5); } }

.docnav {
  position: sticky; top: 62px; align-self: start; max-height: calc(100vh - 62px);
  overflow-y: auto; padding: var(--s6) 0 var(--s8);
}
@media (max-width: 900px) {
  .docnav { position: static; max-height: none; border-bottom: 1px solid var(--line); padding-bottom: var(--s5); }
}
.docnav h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: var(--s5) 0 var(--s2); font-weight: 600; }
.docnav h4:first-child { margin-top: 0; }
.docnav a {
  display: block; padding: 5px 10px; margin-left: -10px; border-radius: 7px;
  color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45;
}
.docnav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.docnav a[aria-current="page"] {
  color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.docmain { padding: var(--s7) 0 var(--s9); min-width: 0; }
.docmain h1 { font-size: clamp(30px, 4vw, 42px); max-width: 24ch; margin-bottom: var(--s3); }
.docmain h2 {
  font-size: 25px; margin: var(--s8) 0 var(--s3); padding-top: var(--s3);
  max-width: 34ch; scroll-margin-top: 84px;
}
.docmain h3 { font-size: 18px; margin: var(--s6) 0 var(--s3); scroll-margin-top: 84px; }
.docmain > p, .docmain > ul, .docmain > ol { max-width: var(--measure); }
.docmain ul, .docmain ol { color: var(--text-2); padding-left: var(--s5); }
.docmain li { margin-bottom: var(--s2); }
.docmain li > strong { color: var(--text); }
.docmain pre {
  background: var(--term-bg); color: #d7dee4; border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r); padding: var(--s4) var(--s5); overflow-x: auto;
  font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.8; margin: var(--s4) 0;
  white-space: pre-wrap; overflow-wrap: break-word; max-width: 100%;
}
.docmain pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
code {
  font-family: var(--mono); font-size: .9em;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 4px; padding: 1.5px 5px;
}

.doc-kicker { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3); }

/* Next/previous, so the docs can be read straight through by somebody new. */
.pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); margin-top: var(--s9); padding-top: var(--s6); border-top: 1px solid var(--line); }
.pager a { display: block; border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s5); color: var(--text); }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.pager a.prev { text-align: left; }
.pager a.next { text-align: right; }

.toc { position: sticky; top: 62px; align-self: start; max-height: calc(100vh - 62px); overflow-y: auto; padding: calc(var(--s7) + 6px) 0 var(--s8); }
.toc h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--s3); font-weight: 600; }
.toc a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); color: var(--text-3); font-size: var(--fs-xs); line-height: 1.45; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.on { color: var(--accent); border-left-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, a.card:hover { transform: none; }
  * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Small layout utilities.

   The markup carries no inline styles, because site/_headers sets
   `style-src 'self'` with no 'unsafe-inline' and that blocks a style attribute
   as surely as it blocks a <style> block. A dropped inline style is the worst
   kind of failure to notice: the page still renders, just wrong, with nothing
   in the console unless you are looking for it.
   --------------------------------------------------------------------------- */
.mt-2 { margin-top: var(--s3); }
.mt-3 { margin-top: var(--s4); }
.mt-4 { margin-top: var(--s5); }
.mt-5 { margin-top: var(--s6); }
/* .ar, not .r: `.r` is already the terminal palette's red, and a table header
   given it would have come out orange as well as right-aligned. */
.ar, th.ar, td.ar { text-align: right; }
.warn { color: var(--warn); }
.dg .warn { fill: var(--warn); }
.accent { color: var(--accent); }
/* A caption above a table, inside the bordered .tbl shell. */
caption.tcap { text-align: left; padding: 14px var(--s5) 0; caption-side: top; }
/* A section whose neighbours are also sections: half the vertical rhythm, so
   four platform blocks in a row do not read as four separate pages. */
section.tight { padding-top: var(--s8); padding-bottom: var(--s8); }
.hero.short { padding-bottom: var(--s6); }   /* the hero is a <header>, not a <section> */