/* Piko — styled after jev.guide: warm paper, black ink, hard offset shadows,
   thick dark borders, a lilac accent. Light only, by design — that IS the style. */

:root {
  color-scheme: light;

  /* surfaces — warm paper, straight off the reference */
  --bg: #faf8f4;
  --bg-2: #f4efe7;
  --panel: #ffffff;
  --soft: #f6f1e9;
  --raised: #efe8dc;
  --line: #e4ddd4;
  --line-soft: #ece5dc;
  --line-strong: #1f1a25;

  /* ink */
  --ink: #171717;
  --ink-2: #2d292a;
  --muted: #686462;
  --faint: #8d8782;

  /* accent — lilac fill, purple ink */
  --accent: #6a4fc0;
  --accent-2: #7b61cf;
  --accent-ink: #ffffff;
  --accent-soft: #ece4ff;
  --lilac: #d9c9ff;
  --lilac-2: #c3aaff;

  --ok: #2f7d4f;
  --warn: #a2621c;
  --err: #b23b32;

  /* modality — one hue per kind of thing Piko reads, used wherever a modality is named.
     text violet, image green, video blue, audio amber. */
  --mod-text: #6a4fc0;
  --mod-text-soft: #ece4ff;
  --mod-image: #1f7a52;
  --mod-image-soft: #dcf1e5;
  --mod-video: #2f6bd8;
  --mod-video-soft: #dee9fc;
  --mod-audio: #b45309;
  --mod-audio-soft: #fdebd3;

  --radius: 16px;
  --radius-sm: 10px;

  /* the signature: a hard, unblurred offset shadow. */
  --hard: 3px 4px 0 var(--line-strong);
  --hard-sm: 2px 3px 0 var(--line-strong);
  --hard-lg: 5px 6px 0 var(--line-strong);
  --shadow: 0 18px 35px #2c23331a;

  --maxw: 1150px;

  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: var(--ink); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { max-width: 100%; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.muted { color: var(--muted); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

::selection { background: var(--lilac); color: var(--ink); }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  height: 74px; display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17px; letter-spacing: -0.3px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--lilac); border: 1.5px solid var(--line-strong);
  box-shadow: var(--hard-sm); color: var(--line-strong);
  font-weight: 800; font-size: 19px; line-height: 1;
}
.brand-sub { color: var(--faint); font-size: 13px; font-weight: 600; }
.nav-links { display: flex; gap: 2px; margin-left: 10px; }
.nav-links a {
  padding: 8px 13px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted);
  transition: background .12s ease, color .12s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--soft); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* The menu button only exists below the breakpoint, and only when JS can drive it: without JS the
   link list stays visible instead of offering a button that does nothing. */
.nav-toggle {
  display: none; width: 42px; height: 42px; padding: 0; border-radius: 12px;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--line-strong); background: var(--panel); box-shadow: var(--hard-sm);
}
.nav-toggle i { position: relative; display: block; width: 18px; height: 2px; background: var(--line-strong); border-radius: 2px; }
.nav-toggle i::before, .nav-toggle i::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--line-strong); border-radius: 2px; transition: transform .18s ease;
}
.nav-toggle i::before { top: -6px; }
.nav-toggle i::after { top: 6px; }
.nav.is-open .nav-toggle i { background: transparent; }
.nav.is-open .nav-toggle i::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav-toggle i::after { transform: translateY(-6px) rotate(-45deg); }

/* ── buttons & chips ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 9px 17px; border-radius: 11px;
  border: 1.5px solid var(--line-strong); background: var(--panel); color: var(--ink);
  font-size: 14px; font-weight: 700; text-decoration: none;
  /* A button keeps its label on one line and its intrinsic width. Without this a crowded nav row
     (many links + 3 CTAs) SHRINKS the buttons and wraps their two-word labels, which is what made
     "Open playground" look deformed when signed out. Buttons never flex, the LINKS give way. */
  flex: none; white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
  box-shadow: var(--hard-sm);
  transition: transform .1s ease, box-shadow .1s ease, background .12s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--hard); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line-strong); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: #000; }
.btn.quiet { background: var(--bg); }
.btn.lilac { background: var(--lilac); color: var(--line-strong); }
.btn.sm { min-height: 34px; padding: 5px 12px; font-size: 13px; border-radius: 9px; box-shadow: 1px 2px 0 var(--line-strong); }
.btn.sm:hover { box-shadow: 2px 3px 0 var(--line-strong); }
.btn.icon { min-height: 38px; width: 40px; padding: 0; font-size: 15px; }
.btn:disabled { opacity: .45; box-shadow: none; transform: none; }
.btn.busy { position: relative; color: transparent; }
.btn.busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent;
  color: var(--accent-ink); animation: spin .7s linear infinite;
}
.btn.primary.busy::after { color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 5px 13px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--panel);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.dot[data-state="up"] { background: var(--ok); }
.dot[data-state="down"] { background: var(--err); }
.dot[data-state="starting"] { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}

/* ── landing hero ────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 56px; }
.hero-head { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 {
  font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -2px;
  font-weight: 800; margin: 20px 0 20px;
}
.hero h1 .grad { color: var(--accent); }
.hero .lede { font-size: 17.5px; color: var(--muted); max-width: 620px; }
.hero .lede strong { color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; justify-content: center; }

/* ── the hero flow: three messages in, one letter out ─────────────────────── */
.flow {
  position: relative; margin: 34px auto 0; max-width: 780px; overflow: hidden;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--hard-lg);
}
.flow-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-bottom: 1.5px solid var(--line-strong);
  background: var(--lilac); font-size: 11px; font-weight: 700; color: var(--line-strong);
}
.flow-status { text-transform: lowercase; }

.flow-stage {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px; align-items: center; padding: 26px 20px;
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
}
/* The wires are geometry, not decoration: a line is DRAWN from a message to the core, and the
   result wire is drawn back out when the letter lands. The path is computed from the real boxes
   so it lands on the arrows instead of near them. */
.flow-stage {
  /* A fixed floor sized to the tallest reading: five bars + a two-line note, with three
     single-line messages. Whatever the set, the stage never shrinks below this, so the page
     around the hero does not jump between readings. */
  min-height: 325px;
}
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.flow-wire { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-dasharray: var(--len, 120); stroke-dashoffset: var(--len, 120); }
.flow-wire.is-drawn { transition: stroke-dashoffset .55s ease; stroke-dashoffset: 0; }
/* The wire that carries the reading OUT is the accent carried all the way: same purple, but the
   arrowhead is filled so the answer leaves the core visibly. */
.flow-wire-out { stroke-width: 2.75; }
.flow-arrow { fill: var(--accent); opacity: 0; }
.flow-arrow.is-drawn { animation: flow-arrow-in .22s ease forwards; }
.flow-arrow-out { fill: var(--line-strong); }
@keyframes flow-arrow-in { to { opacity: 1; } }

.flow-col { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.flow-col-label { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
/* The square is the anchor of the whole stage, so it has to sit on the true vertical centre. With
   no label above it, `align-items: center` on the column puts it exactly there. */
.core-col { position: relative; align-items: center; text-align: center; }

/* the three messages — five different sets cycle through here */
.flow-msgs { display: flex; flex-direction: column; gap: 7px; }
.flow-msg {
  min-width: 0; display: flex; align-items: flex-start; gap: 7px; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: 9px; background: var(--panel);
  padding: 7px 9px; font-size: 10.5px; line-height: 1.38; box-shadow: var(--hard-sm);
  opacity: 0; transform: translateX(-44px);
}
.flow-msg .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.flow-kind {
  flex: none; margin-top: 1px; font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  border-radius: 4px; padding: 1px 5px;
}
.flow-kind.is-media { color: #fff; background: var(--accent); }
.flow-msg.is-in { animation: flow-in .5s cubic-bezier(.22,.7,.24,1) forwards; }
@keyframes flow-in { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: translateX(0); } }

/* the core — Piko, the model you already run */
.flow-core {
  position: relative; width: 80px; height: 80px; border-radius: 20px;
  border: 1.5px solid var(--line-strong); background: var(--lilac); box-shadow: var(--hard);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.flow-core-mark {
  width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center;
  background: var(--panel); border: 1.5px solid var(--line-strong); box-shadow: var(--hard-sm);
  font-weight: 800; font-size: 15px; color: var(--line-strong); line-height: 1;
}
.flow-core-name { font-weight: 800; font-size: 11.5px; letter-spacing: -.2px; }
.flow-core-sub { font-size: 8.5px; color: var(--ink-2); }
.flow-core.is-busy { animation: flow-core-busy .7s ease-in-out infinite; }
@keyframes flow-core-busy { 0%, 100% { box-shadow: var(--hard); } 50% { box-shadow: 0 0 0 5px var(--lilac-2), var(--hard); } }

/* the answer — one letter, the gap that says how sure, and the time it took */
.flow-result {
  border: 1.5px solid var(--line-strong); border-radius: 11px; background: var(--panel);
  box-shadow: var(--hard); padding: 11px; display: flex; flex-direction: column; gap: 9px;
}
.flow-result-empty { color: var(--faint); font-size: 11.5px; }
.flow-result .is-idle { color: var(--faint); opacity: .6; }
.flow-result .band.is-idle { border-color: var(--faint); }
.flow-result .r-top { display: flex; align-items: center; gap: 9px; }
.flow-result .r-letter { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 25px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
/* The confidence badge is shared with the playground's answer card. */
.band {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ok); border: 1.5px solid var(--ok); border-radius: 7px; padding: 2px 9px;
}
.band.med { color: var(--warn); border-color: var(--warn); }
.flow-result .band { font-size: 10px; }
.flow-result .r-head { margin-left: auto; text-align: right; font-size: 10.5px; color: var(--muted); min-width: 0; }
.flow-result .r-head b { display: block; color: var(--ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The bars are the answer: every option in the menu, the winner in ink. */
.flow-result .r-bars { display: grid; gap: 5px; }
.flow-result .r-bar { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; font-size: 10.5px; color: var(--muted); }
.flow-result .r-bar .bl { color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-result .r-bar.win .bl { color: var(--ink); font-weight: 800; }
.flow-result .r-bar i { grid-column: 1 / -1; display: block; height: 5px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.flow-result .r-bar i b { display: block; height: 100%; background: var(--accent-2); border-radius: 999px; transition: width .45s ease; }
.flow-result .r-bar.win i b { background: var(--line-strong); }
.flow-result .r-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--muted); }
.flow-result .r-ms { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--accent); font-weight: 700; }
.flow-result .r-note { font-size: 10.5px; color: var(--muted); min-height: 15px; }
.flow-result.is-in { animation: flow-pop .34s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes flow-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

.flow-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1.5px solid var(--line-strong); background: var(--soft);
  font-size: 11px; color: var(--muted);
}
.flow-foot .btn { margin-left: auto; }
.flow-dots { display: flex; gap: 6px; }
.flow-dot { width: 9px; height: 9px; border-radius: 999px; padding: 0; cursor: pointer; background: var(--raised); border: 1.5px solid var(--line-strong); }
.flow-dot[aria-current="true"] { background: var(--accent); width: 24px; }

@media (prefers-reduced-motion: reduce) {
  .flow-msg, .flow-result, .flow-core.is-busy, .flow-arrow { animation: none !important; }
  .flow-msg { opacity: 1; transform: none; }
  .flow-wire { transition: none !important; }
}


/* ── sections ────────────────────────────────────────────────────────────── */
.section { padding: 78px 0; }
.section.alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 720px; margin-bottom: 42px; }
.section-head h2 { font-size: clamp(27px, 3.5vw, 39px); letter-spacing: -1.4px; font-weight: 800; margin: 0 0 13px; }
.section-head p { color: var(--muted); font-size: 16.5px; }
/* A section whose head is centered on one axis. `.solo` keeps its title on a single line where the
   viewport allows it (the default 720px cap wraps it); it still wraps naturally on a narrow screen. */
.section-head.center { max-width: none; margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center p { max-width: 720px; margin-left: auto; margin-right: auto; }
.section-head.center.solo h2 { white-space: nowrap; }
@media (max-width: 760px) { .section-head.center.solo h2 { white-space: normal; } }

.grid { display: grid; gap: 20px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  padding: 23px; box-shadow: var(--hard-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translate(-1px, -1px); box-shadow: var(--hard); }
.card h3 { font-size: 16.5px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.3px; }
.card p { color: var(--muted); font-size: 14px; }
.card .ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--lilac); border: 1.5px solid var(--line-strong);
  font-size: 18px; margin-bottom: 15px;
}

.steps { display: grid; gap: 2px; }
.step-row { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 23px 0; border-top: 1px solid var(--line); }
.step-row .n {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 800; color: var(--line-strong);
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); background: var(--lilac); box-shadow: var(--hard-sm);
}
.step-row h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.step-row p { color: var(--muted); font-size: 14.5px; }

/* ── how it works: the raw reading fades, the answer arrives ─────────────── */
.how-anim {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  box-shadow: var(--hard); overflow: hidden;
}
.how-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1.5px solid var(--line-strong);
  background: var(--lilac); font-size: 11.5px; font-weight: 700; color: var(--line-strong);
}
.how-phase { text-transform: uppercase; letter-spacing: .1em; }
/* Two fixed views of the same decision, switchable — so the request and the answer can each be
   read at leisure instead of racing past each other. */
.how-tabs { display: flex; gap: 6px; }
.how-tab {
  font: inherit; cursor: pointer; border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 4px 13px; background: var(--panel); color: var(--line-strong);
  transition: background .12s ease, color .12s ease;
}
.how-tab:hover { background: var(--soft); }
.how-tab[aria-selected="true"] { background: var(--line-strong); color: var(--lilac); }
.how-stage { position: relative; height: 352px; }
.how-json {
  margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #1d1a20;
  height: 352px; overflow: auto; font-size: 12.5px; line-height: 1.72;
}
.how-answer {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 15px; padding: 26px 24px; background: var(--panel); overflow: auto;
}
.how-answer[hidden] { display: none; }
.how-answer .how-choice {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 34px; font-weight: 800;
  letter-spacing: -1px; line-height: 1; display: flex; align-items: baseline; gap: 12px;
}
.how-answer .how-band {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ok); border: 1.5px solid var(--ok); border-radius: 7px; padding: 2px 9px;
}
.how-answer .how-band.med { color: var(--warn); border-color: var(--warn); }
.how-answer .how-line { font-size: 13.5px; color: var(--muted); }
.how-answer .how-line b { color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace; }
.how-answer .how-bars { display: grid; gap: 7px; }
.how-answer .how-bar { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12px; color: var(--muted); }
.how-answer .how-bar .bl { color: var(--ink-2); font-weight: 600; }
.how-answer .how-bar.win .bl { color: var(--ink); font-weight: 800; }
.how-answer .how-bar i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.how-answer .how-bar i b { display: block; height: 100%; background: var(--accent-2); border-radius: 999px; }
.how-answer .how-bar.win i b { background: var(--line-strong); }
.how-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 17px; border-top: 1.5px solid var(--line-strong); background: var(--soft);
  font-size: 11.5px; color: var(--muted);
}
.how-foot .btn { margin-left: auto; }

pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
pre {
  background: #1d1a20; color: #f4efe8; border: 1.5px solid var(--line-strong);
  border-radius: 13px; padding: 16px 17px; overflow: auto; font-size: 13px; line-height: 1.7;
  box-shadow: var(--hard-sm);
}
code { font-size: 0.92em; }
p code, li code, td code, .muted code {
  background: var(--accent-soft); border: 1px solid var(--lilac-2); border-radius: 6px; padding: 1px 6px;
  color: var(--accent);
}

/* A wide table scrolls inside its own frame instead of pushing the page sideways. */
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 100%; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 800; background: var(--soft); }
tbody tr:hover { background: var(--soft); }
td.num, th.num { font-family: ui-monospace, Menlo, Consolas, monospace; text-align: right; white-space: nowrap; }

.badge { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px; border: 1.5px solid; }
.badge.ok { color: var(--ok); border-color: var(--ok); background: #e5f2e8; }
.badge.warn { color: var(--warn); border-color: var(--warn); background: #f8ecdc; }
.badge.acc { color: var(--accent); border-color: var(--lilac-2); background: var(--accent-soft); }

.note {
  border: 1.5px solid var(--line-strong); border-left-width: 5px;
  background: var(--accent-soft); border-radius: 11px; padding: 15px 19px;
  font-size: 14px; color: var(--ink-2);
}
.note.warn { background: #f8ecdc; }

/* use cases */
.uc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.uc-card {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--hard-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.uc-card:hover { transform: translate(-1px, -1px); box-shadow: var(--hard); }
/* The art slot holds REAL footage from the examples, never an emoji: a card about a game shows
   the game, a card about a robot shows the robot. */
.uc-art { height: 148px; background: var(--lilac); border-bottom: 1.5px solid var(--line-strong); position: relative; overflow: hidden; }
.uc-art img, .uc-art video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A playable clip keeps its own controls: the badge moves to the top-left so it never sits on the
   scrub bar, and a taller slot gives the frame room to breathe. */
.uc-art:has(video) { height: 210px; }
.uc-art:has(video) .uc-badge { top: 10px; bottom: auto; }
.uc-art video { background: #14121a; object-fit: contain; }
.uc-art .uc-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 3px 9px; box-shadow: var(--hard-sm);
}
.uc-body { padding: 19px; }
.uc-body .tag { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.uc-body h3 { font-size: 16px; font-weight: 800; margin: 7px 0 7px; }
.uc-body p { font-size: 13.5px; color: var(--muted); }
.uc-links { display: flex; align-items: center; gap: 14px; margin-top: 11px; flex-wrap: wrap; }
.uc-links .cap-more { margin: 0; }
.uc-src { font-size: 12px; font-weight: 700; color: var(--faint); text-decoration: none; border-bottom: 1px solid transparent; }
.uc-src:hover { color: var(--muted); border-bottom-color: var(--line-strong); }

/* ── the three modalities ────────────────────────────────────────────────── */

.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.mod {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  padding: 20px; box-shadow: var(--hard-sm); display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mod:hover { transform: translate(-1px, -1px); box-shadow: var(--hard); }
/* The icon is tinted by its modality: violet text, green image, blue video, in step with the
   badges used in the playground. */
.mod-ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); margin-bottom: 13px;
  background: var(--mod-text-soft); color: var(--mod-text);
}
.mod-ic svg { width: 21px; height: 21px; }
.mod.image .mod-ic { background: var(--mod-image-soft); color: var(--mod-image); }
.mod.video .mod-ic { background: var(--mod-video-soft); color: var(--mod-video); }
.mod.audio .mod-ic { background: var(--mod-audio-soft); color: var(--mod-audio); }
.mod h3 { font-size: 20px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 7px; }
.mod p { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
/* One served figure per modality — the unit the caller actually sends, so the price reads on its
   own: text per million tokens, image per megapixel, video and audio per second. The token
   densities behind those figures live in the docs, not here. */
.mod-stats { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: auto; }
.mod-stat { display: flex; flex-direction: column; }
.mod-stat b { font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mod-stat b small { font-size: 12px; font-weight: 700; color: var(--faint); margin-left: 1px; }
.mod-stat span { font-size: 11px; color: var(--faint); letter-spacing: .02em; text-transform: uppercase; }
.mod-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--soft);
  padding: 18px 20px; box-shadow: var(--hard-sm);
}
.mod-summary > div { display: flex; flex-direction: column; }
.mod-summary b { font-size: 24px; font-weight: 800; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.mod-summary span { font-size: 12px; color: var(--muted); }

/* ── the speed comparison ────────────────────────────────────────────────── */

.race { border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); box-shadow: var(--hard); overflow: hidden; }
.race-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1.5px solid var(--line-strong); background: var(--soft); }
.race-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.lane { padding: 18px; border-right: 1.5px solid var(--line-strong); display: flex; flex-direction: column; }
.lane:last-child { border-right: 0; }
.lane-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lane-name { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.lane-time { font-size: 13px; font-weight: 700; color: var(--accent); }
.lane-body { min-height: 92px; display: flex; align-items: flex-start; flex: 1; }
.lane-prose { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0; font-family: inherit; }
.lane-prose.done { color: var(--ink-2); }

/* The Piko lane's reading: the chosen option and the odds of every option, as the API returns
   them. Hidden until the reading lands, then the bars grow from zero to their real widths. */
.ra { width: 100%; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
.ra.done { opacity: 1; transform: none; }
.ra-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ra-letter {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; font-weight: 800;
  background: var(--lilac); color: var(--line-strong); border: 1.5px solid var(--line-strong);
}
.ra-pick { display: flex; flex-direction: column; line-height: 1.25; }
.ra-pick b { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.ra-pick small { font-size: 11px; color: var(--faint); font-weight: 600; }
.ra-bars { display: grid; gap: 7px; }
.ra-bar { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; }
.ra-bar .bl { font-size: 12px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-bar .mono { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ra-bar i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.ra-bar i > b {
  display: block; height: 100%; width: 0; border-radius: 999px; background: var(--lilac-2);
  transition: width .5s cubic-bezier(.2, .8, .25, 1) .05s;
}
.ra.done .ra-bar i > b { width: var(--w); }
.ra-bar.win .bl { color: var(--ink); font-weight: 800; }
.ra-bar.win i > b { background: var(--accent); }
.lane-foot { font-size: 11.5px; color: var(--faint); margin-top: auto; border-top: 1px dashed var(--line); padding-top: 10px; }
.race-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1.5px solid var(--line-strong); background: var(--soft); }
.race-track { position: relative; flex: 1; height: 8px; background: var(--raised); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.race-track i { display: block; height: 100%; width: 0; background: var(--lilac-2); transition: width .12s linear; }
.race-caption, [data-race-caption] { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.race-note { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 860px) {
  .mods, .mod-summary { grid-template-columns: minmax(0, 1fr); }
  .race-lanes { grid-template-columns: minmax(0, 1fr); }
  .lane { border-right: 0; border-bottom: 1.5px solid var(--line-strong); }
  .lane:last-child { border-bottom: 0; }
  [data-race-caption] { white-space: normal; }
  .pg-footer-links { order: 3; flex-basis: 100%; margin-left: 0; gap: 4px 16px; }
  .pg-footer-inner { justify-content: space-between; gap: 6px 14px; padding-top: 0; }
  .pg-footer-inner > .mono { order: 2; font-size: 11.5px; }
  .pg-footer { padding: 10px 0; }
  .pg-footer-links a { padding: 2px 0; }
}

/* One compact row: brand on the left, the link groups inline beside it, © on the right. The columns
   keep their heading but lose the stacked-block look, so the footer is a single band instead of a
   tall stack — a footer that stretches under the fold is a footer nobody reads. On a narrow screen
   the groups wrap onto their own lines, still without a per-link bullet list. */
.footer { border-top: 1.5px solid var(--line-strong); padding: 22px 0; color: var(--muted); font-size: 13.5px; background: var(--bg-2); }
.footer-inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px 44px; flex-wrap: wrap;
}
.footer .brand { font-size: 16px; }
.footer-tag { margin-top: 7px; max-width: 320px; color: var(--muted); font-size: 13px; }
.footer-cols { display: flex; gap: 34px; flex-wrap: wrap; }
.footer-col h4 {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 800; margin: 0 0 6px;
}
.footer-col a { display: block; padding: 2px 0; font-weight: 600; color: var(--muted); }
.footer-col a:hover { color: var(--accent); }
.footer a:hover { color: var(--accent); }
/* The © line rides on the SAME row as the columns when there is width for it, and drops to its own
   line only when the wrap happens. No top border, no extra padding: it is part of the band. */
.footer-base {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap; margin-left: auto; font-size: 12.5px;
  width: 100%;
}
@media (min-width: 1000px) {
  .footer-base { width: auto; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: 0; }
}
.footer-base .dotlive { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink-2); }

/* The playground is a fixed-height workspace, so its footer is a single row that never eats the
   panels: it sits in the grid as its own track. */
.pg-footer { padding: 12px 0; border-top: 1.5px solid var(--line-strong); background: var(--bg-2); }
.pg-footer-inner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.pg-footer-inner .brand { color: var(--ink); }
.pg-footer-links { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.pg-footer-links a { font-weight: 600; color: var(--muted); }
.pg-footer-links a:hover { color: var(--accent); }
.pg-footer-inner .mono { color: var(--faint); }

/* ── account: the avatar, its menu, and the dashboard ─────────────────────── */

/* Signed out, the nav offers the two buttons that actually do something. Signed in, they give way
   to the avatar. */
.auth-btns { display: flex; align-items: center; gap: 8px; }
.auth-btns .btn { white-space: nowrap; }

.pf { position: relative; }
/* The avatar is a round button: initials when signed in, a plain mark when not. */
.pf-btn {
  width: 42px; height: 42px; padding: 0; border-radius: 999px;
  display: grid; place-items: center; overflow: hidden;
  border: 1.5px solid var(--line-strong); background: var(--lilac); color: var(--line-strong);
  font-weight: 800; font-size: 14px; box-shadow: var(--hard-sm); letter-spacing: .01em;
}
.pf-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--hard); }
.pf-btn .pf-live { position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-radius: 999px; background: var(--ok); border: 1.5px solid var(--panel); }
.pf-btn[data-state="out"] { background: var(--panel); color: var(--muted); }
.pf-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
  min-width: 232px; padding: 7px;
  border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--panel);
  box-shadow: var(--hard); display: none;
}
.pf-menu[data-open="true"] { display: block; animation: pf-in .14s ease; }
@keyframes pf-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.pf-id { padding: 10px 11px 11px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pf-id b { display: block; font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-id span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pf-credits { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 7px 9px; background: var(--accent-soft); border-radius: 9px; }
.pf-credits b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--accent); }
.pf-credits span { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pf-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; background: transparent; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
}
.pf-item:hover { background: var(--soft); color: var(--ink); }
.pf-item .ic { width: 18px; height: 18px; flex: none; stroke-width: 1.9; }
.pf-item.danger { color: var(--err); }
.pf-item.danger:hover { background: #f8e4e1; }
.pf-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* auth + dashboard */
.auth { max-width: 440px; margin: 0 auto; padding: 54px 0 76px; }
.auth-card {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  box-shadow: var(--hard); padding: 28px;
}
.auth-card h1 { font-size: 25px; letter-spacing: -.8px; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.auth-tabs button {
  flex: 1; min-height: 40px; border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: var(--panel); font-weight: 700; font-size: 13.5px; color: var(--muted);
}
.auth-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
/* A button that reads as a link: used for "Forgot your password?" under a form. */
.linklike {
  display: block; margin: 10px auto 0; padding: 2px 4px; border: 0; background: none;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.linklike:hover { color: var(--ink); }
.frow { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.frow label { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.frow input, .frow select {
  width: 100%; min-height: 44px; padding: 10px 12px; font-size: 15px;
  border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--panel);
}
.frow input:focus-visible, .frow select:focus-visible { outline: 3px solid var(--lilac-2); outline-offset: 1px; }
.frow .hint { font-size: 11.5px; color: var(--faint); }
/* Live password checklist. Each row carries a small dot: grey/quinconce until met, then green
   with a check. `data-ok` is flipped by dashboard.js on input, so it never needs a page reload. */
.pw-rules { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 4px; }
.pw-rules[hidden] { display: none; }
.pw-rules li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--faint); }
.pw-rules li i {
  width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--panel); position: relative; transition: background .15s, border-color .15s;
}
.pw-rules li i::after {
  content: ""; position: absolute; left: 3.5px; top: 1px; width: 4px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .15s;
}
.pw-rules li[data-ok="true"] { color: var(--ok); font-weight: 700; }
.pw-rules li[data-ok="true"] i { background: var(--ok); border-color: var(--ok); }
.pw-rules li[data-ok="true"] i::after { transform: rotate(45deg) scale(1); }
.form-msg { border-radius: 10px; padding: 10px 13px; font-size: 13px; margin: 4px 0 14px; display: none; }
.form-msg[data-kind] { display: block; }
.form-msg[data-kind="err"] { background: #f8e4e1; border: 1.5px solid var(--err); color: #7d241d; }
.form-msg[data-kind="ok"] { background: #e5f2e8; border: 1.5px solid var(--ok); color: #215a37; }
.form-msg[data-kind="info"] { background: var(--accent-soft); border: 1.5px solid var(--lilac-2); color: var(--accent); }

.dash { padding: 40px 0 76px; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.dash-head h1 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -1px; }
.dash-head p { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.dash-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.dash-tabs a {
  padding: 8px 15px; border-radius: 10px; border: 1.5px solid var(--line-strong);
  background: var(--panel); font-size: 13.5px; font-weight: 700; color: var(--muted); box-shadow: var(--hard-sm);
}
.dash-tabs a[aria-current="page"] { background: var(--ink); color: #fff; }

.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  padding: 18px 20px; box-shadow: var(--hard-sm);
}
.stat .k { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.stat .v { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 14px; color: var(--faint); font-weight: 700; margin-left: 2px; }
.stat .s { font-size: 12px; color: var(--muted); margin-top: 3px; }

.panel-box {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  box-shadow: var(--hard-sm); overflow: hidden; margin-bottom: 22px;
}
.panel-box > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1.5px solid var(--line-strong); background: var(--lilac); flex-wrap: wrap;
}
.panel-box > header h2 { font-size: 14px; font-weight: 800; color: var(--line-strong); }
.panel-box > header .r { display: flex; gap: 9px; align-items: center; }
.panel-box .body { padding: 18px; }
.panel-box .body.tight { padding: 0; }

.key-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.key-row:last-child { border-bottom: 0; }
.key-row .meta { flex: 1 1 240px; min-width: 0; }
.key-row .name { font-weight: 800; font-size: 14px; }
.key-row .tok { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); margin-top: 2px; }
.key-row .tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.tagchip {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--muted); background: var(--soft);
}
.tagchip.live { color: var(--ok); border-color: var(--ok); background: #e5f2e8; }
.tagchip.dead { color: var(--err); border-color: var(--err); background: #f8e4e1; }
.key-row .acts { display: flex; gap: 8px; }

.cc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; }
.cc-form .full { grid-column: 1 / -1; }
/* On the "create a key" form the two meta fields stretch to the form width: the expiry
 * dropdown stays compact (it fits its options), the credit cap takes the remaining room. */
.cc-form.key-meta { max-width: none; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
/* Stripe Payment Element — the hosted card form. The iframe handles its own sizing;
 * this wrapper gives it the same rhythm as the fields around it. */
.cc-stripe { margin-top: 6px; }
.cc-stripe .frow.full label { display: block; }
.cc-stripe #payment-element { min-height: 190px; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--panel); }
.cc-stripe #payment-element .StripeElement { font-size: 15px; }
.amount-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.amount-row button {
  min-width: 68px; min-height: 42px; border-radius: 10px; font-weight: 800; font-size: 14px;
  border: 1.5px solid var(--line-strong); background: var(--panel); color: var(--ink-2);
}
.amount-row button[aria-pressed="true"] { background: var(--lilac); color: var(--line-strong); box-shadow: var(--hard-sm); }
.cc-note { font-size: 12px; color: var(--faint); margin-top: 12px; }
.ledger { width: 100%; }
.ledger td.num { text-align: right; }

.empty-state { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 14px; }

@media (max-width: 760px) {
  .pf-btn { width: 40px; height: 40px; }
  .pf-menu { right: -6px; min-width: 0; width: min(300px, calc(100vw - 28px)); }
  .stat-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cc-form { grid-template-columns: minmax(0, 1fr); }
  .cc-form.key-meta { grid-template-columns: minmax(0, 1fr); }
  .auth { padding: 30px 0 60px; }
  .auth-card { padding: 22px; }
  .dash { padding: 26px 0 60px; }
  .key-row { padding: 14px; }
  .key-row .acts { width: 100%; }
  .key-row .acts .btn { flex: 1; }
}

/* The smallest phones: the carousel's own dots become the only reliable way to move, so they grow
   to a real tap target even though the deck is already swipeable. */
@media (max-width: 400px) {
  .cap-dot, .flow-dot { width: 15px; height: 15px; }
  .cap-dot[aria-current="true"], .flow-dot[aria-current="true"] { width: 32px; }
  .mod-summary { padding: 16px; }
}

/* ── capability carousel ─────────────────────────────────────────────────── */

/* One cap visible at a time, with the neighbours peeking: the deck reads as a deck, and the
   arrow keys / swipe move ONE card. No scroll-snap guesswork, no hidden overflow to explain. */
.cap {
  position: relative; overflow: hidden; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius); background: var(--panel); box-shadow: var(--hard);
}
.cap-track {
  display: flex; transition: transform .38s cubic-bezier(.22,.7,.24,1);
  will-change: transform;
}
.cap-slide {
  flex: 0 0 100%; min-width: 100%; padding: 30px 34px 26px;
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; align-items: start;
}
.cap-slide .ic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--lilac); border: 1.5px solid var(--line-strong);
  font-size: 20px; box-shadow: var(--hard-sm);
}
.cap-slide h3 { font-size: 21px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 9px; }
.cap-slide p { color: var(--muted); font-size: 15.5px; max-width: 62ch; }
.cap-slide .cap-more {
  display: inline-block; margin-top: 15px; font-size: 13.5px; font-weight: 800; color: var(--accent);
}
.cap-slide .cap-more:hover { text-decoration: underline; }

.cap-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px;
}
.cap-dots { display: flex; gap: 6px; margin-right: auto; flex-wrap: wrap; }
.cap-dot {
  width: 9px; height: 9px; border-radius: 999px; padding: 0; cursor: pointer;
  background: var(--raised); border: 1.5px solid var(--line-strong);
}
.cap-dot[aria-current="true"] { background: var(--accent); width: 24px; }
.cap-nav {
  width: 38px; height: 38px; border-radius: 11px; cursor: pointer; display: grid; place-items: center;
  background: var(--panel); border: 1.5px solid var(--line-strong); box-shadow: var(--hard-sm);
  font-size: 15px; font-weight: 800; color: var(--ink);
}
.cap-nav:hover { background: var(--lilac); }
.cap-count {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700;
  color: var(--muted); min-width: 54px; text-align: center;
}
@media (max-width: 640px) {
  .cap-slide { grid-template-columns: minmax(0, 1fr); padding: 24px 22px 20px; gap: 14px; }
}

/* ── playground ──────────────────────────────────────────────────────────── */
.pg { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; overflow: hidden; }
.pg-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 11px 20px; border-bottom: 1.5px solid var(--line-strong); background: var(--panel);
}
.pg-bar .brand { font-size: 15px; }
/* The playground chrome is one bar, so the site map sits inline between the brand and the actions.
   It fades out under ~1000px alongside the actions rather than wrapping into a second row. */
.pg-nav { display: flex; gap: 2px; margin-left: 6px; }
.pg-nav a {
  padding: 7px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.pg-nav a:hover { color: var(--ink); background: var(--soft); }
/* inside the pg grid a sticky banner would cover the toolbar, so it stays in flow. */
.pg .promo { position: static; }
@media (max-width: 1000px) { .pg-nav { display: none; } }
.engine-chip { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.field select, .field input {
  border: 1.5px solid var(--line-strong); background: var(--panel); border-radius: 9px;
  padding: 7px 10px; font-size: 13px; font-weight: 700; min-width: 130px;
}
.field.sm select, .field.sm input { min-width: 88px; }
.pg-actions { margin-left: auto; display: flex; align-items: center; gap: 11px; }
/* The theta control is a small inline field, not the tall stacked field the setup panel uses.
   Label and box share one row, and the box is exactly the height of the button beside it, so the
   row reads as one line instead of a big control next to a small one. */
.pg-actions .field.sm { flex: none; flex-direction: row; align-items: center; gap: 8px; }
.pg-actions .field.sm label { margin: 0; }
.pg-actions .field.sm input {
  width: 74px; min-width: 0; height: 34px; padding: 0 9px; border-radius: 9px;
  font-size: 13px; text-align: center;
}

.pg-body {
  min-height: 0; display: grid;
  grid-template-columns: minmax(240px, .82fr) minmax(340px, 1.2fr) minmax(320px, 1.12fr);
  gap: 16px; padding: 16px; background: var(--bg-2);
}
.panel {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--hard-sm);
}
.panel-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1.5px solid var(--line-strong); background: var(--lilac);
}
.panel-head h2 { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--line-strong); }
.panel-head .count { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; color: var(--line-strong); background: #ffffff90; border-radius: 999px; padding: 3px 9px; }
.panel-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.panel-bottom { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1.5px solid var(--line-strong); background: var(--soft); font-size: 12px; }

.library-filters { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 9px; }
.search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line-strong); border-radius: 9px; padding-left: 11px; background: var(--panel); color: var(--muted); }
.search input { border: 0; outline: none; background: transparent; width: 100%; padding: 9px 11px 9px 0; font-size: 13px; }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.filter-row select { width: 100%; border: 1.5px solid var(--line-strong); background: var(--panel); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; font-weight: 700; }
.lib-summary { font-size: 11px; color: var(--faint); font-weight: 600; }

.example-list { padding: 8px; }
.example-item {
  display: block; width: 100%; text-align: left; border: 1.5px solid transparent; background: transparent;
  border-radius: 12px; padding: 12px 13px;
}
/* A real rule between entries: the rows ran together as one block without it. */
.example-item + .example-item { border-top: 1px solid var(--line); border-radius: 0; padding-top: 14px; }
.example-item:last-child { border-radius: 12px; }
.example-item:hover { background: var(--soft); }
.example-item.selected {
  background: var(--accent-soft); border-color: var(--line-strong); box-shadow: var(--hard-sm); border-radius: 12px;
}
.example-item.selected + .example-item, .example-item + .example-item.selected { border-top-color: transparent; }
/* The head line of an entry: where it comes from, and what it is made of. */
.ex-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.example-item .mods { display: inline-flex; gap: 4px; margin-left: auto; }
.example-item .pack { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.example-item strong { display: block; font-size: 13.5px; font-weight: 700; }
.example-item p { margin-top: 4px; font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* A modality badge, coloured by kind: violet text, green image, blue video, amber audio.
   Named .mtag, not .mod: .mod is already the homepage modality card. */
.mtag {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 5px; padding: 1px 6px; border: 1px solid currentColor; line-height: 1.5;
}
.mtag.text { color: var(--mod-text); background: var(--mod-text-soft); }
.mtag.image { color: var(--mod-image); background: var(--mod-image-soft); }
.mtag.video { color: var(--mod-video); background: var(--mod-video-soft); }
.mtag.audio { color: var(--mod-audio); background: var(--mod-audio-soft); }

.pg-title h1 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; margin: 8px 0 6px; }
.pg-title p { font-size: 13.5px; color: var(--muted); }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 11px; align-items: start; margin: 24px 0 11px; }
.step .n { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); background: var(--lilac); font-size: 12px; font-weight: 800; }
.step h3 { font-size: 14px; font-weight: 800; }
.step p { font-size: 12.5px; color: var(--muted); }
textarea.ta {
  width: 100%; min-height: 190px; resize: vertical; padding: 13px;
  background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.7;
}
textarea.ta:focus-visible { outline: 3px solid var(--lilac-2); outline-offset: 1px; }
textarea.ta.compact { min-height: 48px; }

/* ── the state, as parts ─────────────────────────────────────────────────── */
.state-parts { display: flex; flex-direction: column; gap: 10px; }
.state-parts[hidden] { display: none; }
.part-text { display: block; }
.part-text .part-label,
.media-part .media-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.part-text textarea.ta { min-height: 130px; }
.media-part {
  margin: 0; border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: 10px; background: var(--soft); box-shadow: var(--hard-sm);
}
.media-part img, .media-part video { display: block; width: 100%; max-height: 340px; object-fit: contain; border-radius: 8px; background: #fff; }
.media-part audio { display: block; width: 100%; }
.media-part figcaption { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 10.5px; color: var(--faint); overflow: hidden; }
.media-part figcaption .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-part .media-tag { margin: 0; border-radius: 5px; padding: 1px 6px; border: 1px solid currentColor; }
.media-part .media-tag.image { color: var(--mod-image); background: var(--mod-image-soft); }
.media-part .media-tag.video { color: var(--mod-video); background: var(--mod-video-soft); }
.media-part .media-tag.audio { color: var(--mod-audio); background: var(--mod-audio-soft); }
.state-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.state-tools .muted { font-size: 11.5px; flex: 1 1 240px; }
textarea.mono-raw { min-height: 220px; }
textarea.mono-raw[hidden] { display: none; }
.gold-line { font-size: 11.5px; color: var(--muted); margin-bottom: 9px; }
.gold-line strong { color: var(--ink); }

.question-row { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 13px; margin-bottom: 9px; background: var(--soft); }
.question-row.off { opacity: .5; }
.q-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.q-head label { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; font-weight: 700; }
.q-head input[type=checkbox] { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); }
.type-badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--lilac-2); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.q-field { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin: 11px 0 4px; }
.q-input, .q-select {
  width: 100%; padding: 8px 10px; font-size: 12.5px; background: var(--panel);
  border: 1.5px solid var(--line-strong); border-radius: 9px;
}

.results-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin-bottom: 15px;
  padding: 13px; font-size: 12px; color: var(--muted); background: var(--soft);
  border: 1.5px solid var(--line-strong); border-radius: 11px;
}
.results-meta strong { color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace; }
.answer-card { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 15px; margin-bottom: 12px; background: var(--panel); box-shadow: var(--hard-sm); }
.answer-card.abstain { background: #f8ecdc; }
.answer-card.degraded { background: #f8e4e1; }
.answer-card .ameta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); font-weight: 600; }
.answer-value { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin: 11px 0; display: flex; align-items: baseline; gap: 10px; }
.answer-value .mini { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.answer-card .rank { font-size: 11.5px; color: var(--muted); margin-bottom: 11px; }
.answer-card .rank strong { color: var(--ink); }
.dist { display: grid; gap: 8px; }
.prow { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12.5px; color: var(--muted); }
.prow .pl { color: var(--ink-2); font-weight: 600; }
.prow.win .pl { color: var(--ink); font-weight: 800; }
.ptrack { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.ptrack > i { display: block; height: 100%; background: var(--accent-2); }
.prow.win .ptrack > i { background: var(--line-strong); }
.instr { margin-top: 13px; }
.instr pre { margin-top: 8px; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; }
.empty { min-height: 170px; display: grid; place-content: center; text-align: center; gap: 9px; padding: 24px; color: var(--muted); }
.empty strong { color: var(--ink); font-size: 15px; }

/* ── docs ────────────────────────────────────────────────────────────────── */
/* The horizontal padding belongs to .wrap; this rule only adds vertical rhythm. Written as a
   shorthand `padding: 46px 0 82px` it silently zeroed the gutter inherited from .wrap, so the docs
   body sat flush against the edge of the screen. */
.docs-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 46px; padding-top: 46px; padding-bottom: 82px; }
.toc { position: sticky; top: 92px; align-self: start; font-size: 13.5px; }
.toc-jump { display: none; }
.toc h4 { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 22px 0 7px; font-weight: 800; }
.toc h4:first-child { margin-top: 0; }
.toc a { display: block; padding: 6px 11px; border-radius: 8px; color: var(--muted); font-weight: 600; }
/* An anchor scrolls to its heading, which must not land under the sticky header or the mobile
   "On this page" bar (whose combined height is set per-breakpoint below). */
.doc-body [id] { scroll-margin-top: 92px; }
/* The sticky rail is a desktop affordance. Below 1080px it becomes an "On this page" control. */
.toc a:hover { color: var(--ink); background: var(--soft); }
.doc-body h2 { font-size: 27px; letter-spacing: -.9px; margin: 54px 0 6px; padding-top: 14px; font-weight: 800; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-size: 17.5px; margin: 32px 0 8px; font-weight: 800; }
.doc-body p { color: var(--ink-2); margin: 12px 0; }
.doc-body ul, .doc-body ol { color: var(--ink-2); padding-left: 22px; margin: 12px 0; }
.doc-body li { margin: 6px 0; }
.doc-body > p.sub { color: var(--muted); font-size: 16px; margin-top: 0; }
.doc-body pre { margin: 14px 0; }
.doc-body table { margin: 16px 0; }
.endpoint {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  margin: 20px 0; overflow: hidden; box-shadow: var(--hard-sm);
}
.endpoint-head { display: flex; align-items: center; gap: 12px; padding: 13px 17px; border-bottom: 1.5px solid var(--line-strong); background: var(--lilac); }
.method { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--line-strong); }
.method.get { color: var(--accent); background: var(--accent-soft); border-color: var(--lilac-2); }
.method.post { color: #fff; background: var(--accent); border-color: var(--accent); }
.endpoint-head code { font-size: 14px; font-weight: 700; color: var(--line-strong); }
.endpoint-body { padding: 17px; display: grid; gap: 12px; }
.endpoint-body h4 { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 800; }
.tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.tabs button {
  border: 1.5px solid var(--line-strong); background: var(--panel); color: var(--muted);
  border-radius: 9px; padding: 5px 12px; font-size: 12.5px; font-weight: 700;
}
.tabs button[aria-selected="true"] { background: var(--lilac); color: var(--line-strong); }

/* ── responsive ──────────────────────────────────────────────────────────── */

/* Fluid media and text: nothing can push the page sideways. */
@media (max-width: 1080px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-body { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr) 320px; }
  .panel.results { grid-column: 1 / -1; }
  /* Docs on a phone: the sidebar becomes one sticky "On this page" control. */
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .toc {
    position: static; padding: 0; border: 0;
    /* Stick the bar just under the sticky header (whose height --navh carries). */
    top: var(--navh, 74px);
    z-index: 20;
  }
  /* js gates the sticky bar: without it the list stays open and scrolls with the page. */
  .has-js .toc {
    position: sticky;
    display: block;
    align-self: start;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .toc h4 { display: none; }
  .has-js .toc-jump { display: flex; }
  .toc-jump {
    display: none; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 46px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 12px;
    background: var(--panel); color: var(--ink); font: inherit; font-weight: 700; font-size: 15px;
    cursor: pointer; margin: 4px 0;
  }
  /* The chevron rotates to read "open". */
  .toc-jump-chev {
    width: 9px; height: 9px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
  }
  .toc.is-open .toc-jump-chev { transform: rotate(-135deg) translate(-2px, -2px); }
  .has-js .toc-list {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px);
    max-height: 62vh; overflow: auto; -webkit-overflow-scrolling: touch;
    background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: 14px;
    box-shadow: 0 18px 40px rgba(20, 16, 26, .16); padding: 8px; z-index: 40;
  }
  .has-js .toc.is-open .toc-list { display: block; }
  .toc-list h4 {
    display: block; margin: 10px 0 3px; padding: 0 10px;
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 800;
  }
  .toc-list a {
    display: block; padding: 11px 10px; border-radius: 9px; font-size: 14.5px; font-weight: 600;
  }
  .toc-list a[aria-current="true"] { color: var(--ink); background: var(--soft); }
  /* Header plus the sticky "On this page" bar. */
  .doc-body [id] { scroll-margin-top: 140px; }
}

/* Below this the nav switches to a menu. The threshold is where the CURRENT row stops fitting: the
   brand, every top-level link, and (signed out) THREE CTAs — "Open playground", "Sign in",
   "Register" — need roughly 1100px together. Under that an overflowing flex row shrinks the buttons
   until their two-word labels wrap, which is the deformed header this breakpoint exists to avoid. */
@media (max-width: 1160px) {
  .nav-inner { gap: 14px; }
  /* Inside .nav-right the toggle sits last, so the row reads action → avatar → menu. */
  .has-js .nav-toggle { display: inline-flex; order: 3; }
  .nav-links {
    order: 5; flex-basis: 100%; width: 100%; margin: 0;
    display: none; flex-direction: column; gap: 2px;
    border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { padding: 12px 12px; font-size: 15px; border-radius: 10px; }
  /* Action, avatar, menu button on the first row; the links drop to their own row below them. */
  .nav-right { order: 3; margin-left: auto; }
  /* With the panel open the links take a full row of their own, so the bar must be allowed to grow
     instead of clipping them against a fixed-height header. */
  .nav.is-open .nav-inner { flex-wrap: wrap; height: auto; min-height: 62px; }
  .nav-right .btn { min-height: 42px; }
}

/* Tablet: grids fall to two and the section rhythm tightens. Kept separate from the nav breakpoint
   above on purpose — the nav needs to collapse ~350px earlier than the content does. */
@media (max-width: 900px) {
  .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 60px 0; }
}

@media (max-width: 760px) {
  /* iOS Safari zooms the whole page when a focused control is under 16px. Everything below is
     >= 16px in the fields a phone actually uses. */
  .field select, .field input, .search input, .q-input, .q-select,
  .filter-row select, textarea.ta { font-size: 16px; }

  /* A 14px gutter read as text touching the edge of the screen. 20px is the smallest gutter that
     still looks deliberate on a phone, and it stays white space rather than costing the prose a
     ragged right edge. */
  .wrap { padding: 0 20px; }
  /* The header used to wrap the action row onto a second line: a 26px gap plus an avatar and a
     42px menu button could not fit beside the logo, so the bar stood 130px tall — a fifth of a
     phone screen spent before a single line of the page. Tightened, everything fits on one 62px
     row. The height also keeps the sticky "On this page" bar and anchors honest: .nav-inner is
     what --navh measures. */
  .nav-inner { padding: 10px 20px; height: 62px; flex-wrap: nowrap; gap: 12px; }
  /* Account actions and the menu button fit; the "Open playground" CTA does not, and it is one tap
     away in the menu anyway. Left in, the row measured 472px inside a 390px viewport and pushed
     the menu button off the right edge. */
  .nav-right > .btn.primary { display: none; }
  .nav-right { flex: none; gap: 8px; }
  /* The subtitle costs a whole row on a phone and says nothing the brand does not. */
  .nav .brand-sub { display: none; }
  .brand-mark { width: 34px; height: 34px; font-size: 17px; border-radius: 11px; }
  .brand { font-size: 16px; }
  .brand-sub { font-size: 12px; }

  .hero { padding: 40px 0 36px; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 42px); letter-spacing: -1.2px; }
  .hero .lede { font-size: 16px; }
  .hero-actions { margin-top: 22px; gap: 10px; }
  .hero-actions .btn { flex: 1 1 auto; }

  .grid.c2, .grid.c3, .grid.c4, .uc { grid-template-columns: minmax(0, 1fr); }
  .mods, .mod-summary { grid-template-columns: minmax(0, 1fr); }
  .section-head h2 { font-size: clamp(24px, 6.5vw, 30px); }
  .section-head p { font-size: 15.5px; }
  .section { padding: 52px 0; }

  /* Touch targets: 44px is the smallest anything tappable should be. */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 42px; padding: 8px 14px; }
  .pf-btn { width: 42px; height: 42px; }
  .nav-toggle { width: 42px; height: 42px; }
  .how-tab, .tabs button { min-height: 36px; padding: 7px 14px; }
  .cap-nav { width: 46px; height: 46px; }
  .cap-dot, .flow-dot { width: 13px; height: 13px; }
  .cap-dot[aria-current="true"], .flow-dot[aria-current="true"] { width: 30px; }

  /* A table that cannot fit scrolls in its own frame, with the page staying still. */
  /* Everything shares the gutter, tables included: a bleed-to-the-edge container looked like the
     table was touching the screen, which is the complaint this whole pass is answering. A wide
     table scrolls inside its own box with the same 20px gutter as the prose. */
  .doc-body .table-scroll { padding-bottom: 4px; }
  table { font-size: 12.5px; }
  th, td { padding: 10px 12px; }
  /* The docs break long words at the edge (.doc-body sets overflow-wrap: break-word); inside a
     table that lets columns shrink to ~55px and words split at the last letter. Cells keep words
     whole — a column is never narrower than its longest word, and a table that no longer fits
     scrolls in its own box rather than crushing its columns. */
  .doc-body th:first-child, .doc-body td:first-child { white-space: normal; }
  /* A curl command or a JSON block has no break opportunity either, and 10 of them overflowed —
     one by 4.3×. Horizontal scrolling inside a 330px box shows a fragment and hides the rest. On a
     phone the block WRAPS instead: the text is unchanged for copying, it just spills onto the next
     line rather than off the screen. */
  pre {
    font-size: 11.5px; padding: 12px 13px; line-height: 1.62;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  }
  pre code { font-size: inherit; white-space: inherit; }

  .doc-body h2 { font-size: 22px; margin-top: 40px; }
  .doc-body h3 { font-size: 16px; }
  .doc-body { overflow-wrap: break-word; }
  .docs-layout { padding-top: 26px; padding-bottom: 60px; }

  /* A parameter name or a path has no spaces to break at, so an unbroken <code> turned a table
     cell into a 1300px column and the real prose into a sliver beside it. Long inline code may
     break anywhere; code blocks keep their own horizontal scroll, where breaking would corrupt
     the payload being copied. */
  .doc-body :not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
  .doc-body th:first-child, .doc-body td:first-child { white-space: normal; }
  .doc-body p code, .doc-body li code { white-space: normal; }
  /* Placed after the inline-code rule, which also targets .doc-body th/td code with the same
     specificity and would otherwise win: cells keep whole words, and an unbreakable token makes
     its column wider rather than splitting. A table too wide for the screen scrolls, page still. */
  .doc-body table, .doc-body th, .doc-body td,
  .doc-body th code, .doc-body td code { overflow-wrap: normal; word-break: normal; }
  /* Header (two rows on a phone) plus the sticky "On this page" bar. */
  .doc-body [id] { scroll-margin-top: 186px; }

  .cap-slide { padding: 24px 20px 20px; gap: 14px; }
  .footer { padding: 24px 0; }
  .footer-inner { gap: 18px; }
  .footer-cols { gap: 16px 32px; }
  .footer-base { flex-direction: column; align-items: flex-start; gap: 4px; }
  .footer-tag { font-size: 13px; }

  /* Playground: one column, scrolls as a page instead of three fixed panes. */
  .pg { height: auto; overflow: visible; grid-template-rows: none; }
  .pg-bar { padding: 10px 14px; gap: 10px; }
  .pg-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 12px; gap: 12px; }
  .panel { max-height: none; }
  .panel-scroll { overflow: visible; }
  /* The example list is long enough to bury the editor on a phone, so it gets its own scroll box
     instead of pushing everything else 4,000px down the page. */
  .panel[aria-label="Examples"] .panel-scroll { max-height: 46vh; overflow: auto; }
  .panel.results .panel-scroll { max-height: 80vh; }
  .pg-actions { width: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
  .field select, .field input { min-width: 0; width: 100%; }
  .field { flex: 1 1 120px; }

  /* The flow collapses to one column: the wires are drawn for a horizontal stage, so on a phone
     the state and the answer stack and carry a plain left rule instead of a lying arrow. */
  .flow-stage { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 14px; }
  .flow-wires { display: none; }
  /* With the wires hidden, the core is the only thing marking the passage from question to answer.
     It sits right under the messages instead of a 90px hole, and reads as the step it is. */
  .flow-core { width: 72px; height: 72px; border-radius: 18px; }
  .flow-core-mark { width: 32px; height: 32px; font-size: 16px; border-radius: 10px; }
  .core-col { align-items: center; text-align: center; }
  .flow-msgs { border-left: 0; padding-left: 0; }
  /* No wires are drawn here, so the arrow between the blocks is real markup: a short rule in the
     gap with a head on its end, centred like everything else in the stack. */
  .flow-col + .flow-col::before {
    content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px;
    transform: translateX(-50%); background: var(--lilac-2);
  }
  .flow-col + .flow-col::after {
    content: ""; position: absolute; left: 50%; top: -8px; width: 0; height: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid var(--lilac-2);
  }
  .flow-result { align-self: stretch; }
  .flow-col { min-width: 0; }

  .race-lanes { grid-template-columns: minmax(0, 1fr); }
  .lane { border-right: 0; border-bottom: 1.5px solid var(--line-strong); }
  .lane:last-child { border-bottom: 0; }
  [data-race-caption] { white-space: normal; }
}

@media (max-width: 420px) {
  .hero h1 { letter-spacing: -1px; }
  .mod-stats { gap: 16px; }
}

/* Respect a phone held sideways: the nav stays usable without eating the screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .nav-links { max-height: 60vh; overflow-y: auto; }
}

/* ── site chrome, canonical across every page ────────────────────────────────
   One nav and one footer for the whole site. Pages opt in with `.nav-canonical`
   and an active link via aria-current="page"; nothing is page-specific, so a
   change here lands everywhere instead of once per file. */

/* the promo banner: a sticky strip directly under the nav, lilac so it reads as
   "offer", not as a warning. */
.promo {
  position: sticky; top: 74px; z-index: 45;
  background: var(--lilac); color: var(--line-strong);
  border-bottom: 1.5px solid var(--line-strong);
  font-size: 13.5px; font-weight: 600;
}
.promo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.promo-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 9px 44px 9px 24px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; position: relative;
}
.promo .promo-badge {
  font-weight: 800; border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 1px 9px; background: var(--panel); white-space: nowrap;
}
.promo-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--line-strong);
  font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 8px; cursor: pointer;
}
.promo-close:hover { background: #00000012; }
.promo[hidden] { display: none; }

/* the nav carries the whole site map no matter which page rendered it. */
.nav-links .nav-cta { color: var(--accent); }
.nav-canonical .nav-links a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); }

/* a "you are here" line on the inner pages, under the nav. */
.page-head { margin: 26px 0 6px; }
.page-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; }
.page-head p { color: var(--muted); margin-top: 8px; max-width: 720px; }

/* ── contact form ──────────────────────────────────────────────────────────── */
.contact-form {
  display: grid; gap: 16px; max-width: 620px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--hard); padding: 24px;
}
.contact-form .row { display: grid; gap: 7px; }
.contact-form label { font-weight: 700; font-size: 13.5px; }
.contact-form .hint { color: var(--faint); font-size: 12.5px; font-weight: 500; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); padding: 11px 13px;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.contact-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .form-note { display: grid; gap: 8px; }
.contact-form .form-status { font-weight: 700; font-size: 13.5px; min-height: 20px; }
.contact-form .form-status.ok { color: var(--ok); }
.contact-form .form-status.err { color: var(--err); }
/* the honeypot: out of view for a person, present in the DOM for a bot. */
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Cloudflare Turnstile on the auth form ─────────────────────────────────── */
.turnstile-slot { margin: 4px 0 2px; min-height: 0; }
.turnstile-slot[hidden] { display: none; }

@media (max-width: 640px) {
  .contact-form .grid-2 { grid-template-columns: 1fr; }
  .promo-inner { font-size: 12.5px; padding: 8px 40px 8px 16px; }
}