/* 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;

  --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: 26px;
}
.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; }

/* ── 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;
  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);
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line-strong); background: var(--lilac); color: var(--line-strong);
  border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 700;
  box-shadow: var(--hard-sm);
}

/* ── 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-top: 46px; 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: 11px 18px; border-bottom: 1.5px solid var(--line-strong);
  background: var(--lilac); font-size: 12px; 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: 46px; align-items: center; padding: 46px 26px;
  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-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.75; 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: 3.25; }
.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: 13px; min-width: 0; }
.flow-col-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.core-col { align-items: center; text-align: center; }
.core-col .flow-col-label { align-self: center; }

/* the three messages — five different sets cycle through here */
.flow-msgs { display: flex; flex-direction: column; gap: 10px; }
.flow-msg {
  min-width: 0; display: flex; align-items: flex-start; gap: 9px; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: 11px; background: var(--panel);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.45; box-shadow: var(--hard-sm);
  opacity: 0; transform: translateX(-44px);
}
.flow-msg .t { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.flow-kind {
  flex: none; margin-top: 1px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  border-radius: 5px; padding: 2px 6px;
}
.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: 120px; height: 120px; border-radius: 28px;
  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: 4px;
}
.flow-core-mark {
  width: 46px; height: 46px; border-radius: 15px; 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: 22px; color: var(--line-strong); line-height: 1;
}
.flow-core-name { font-weight: 800; font-size: 14px; letter-spacing: -.2px; }
.flow-core-sub { font-size: 9.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 7px 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: 13px; background: var(--panel);
  box-shadow: var(--hard); padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.flow-result-empty { color: var(--faint); font-size: 12.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: 12px; }
.flow-result .r-letter { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 34px; 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: 11px; color: var(--muted); min-width: 0; }
.flow-result .r-head b { display: block; color: var(--ink); font-size: 13px; 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: 6px; }
.flow-result .r-bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 11.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: 6px; 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: 11.5px; color: var(--muted); }
.flow-result .r-ms { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--accent); font-weight: 700; }
.flow-result .r-note { font-size: 11.5px; color: var(--muted); min-height: 17px; }
.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: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1.5px solid var(--line-strong); background: var(--soft);
  font-size: 11.5px; 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: 13px 0 13px; }
.section-head p { color: var(--muted); font-size: 16.5px; }

.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(3, minmax(0, 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); }
.mod-ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); border: 1.5px solid var(--line-strong);
  margin-bottom: 13px;
}
.mod-ic svg { width: 21px; height: 21px; }
.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; }
.mod-stats { display: flex; gap: 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; }
.mod-cost {
  margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 11px;
  font-size: 12.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
}
.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-out {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 26px; font-weight: 800;
  letter-spacing: .04em; color: var(--faint); transition: color .15s ease; line-height: 1.25;
}
.lane-out.done { color: var(--ink); }
.lane-prose { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0; font-family: inherit; }
.lane-prose.done { color: var(--ink-2); }
.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; }
}

.footer { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--muted); font-size: 13.5px; background: var(--bg-2); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.footer a:hover { color: var(--accent); }

/* ── 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; 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; }
.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; }

.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; margin-bottom: 4px;
}
.example-item:hover { background: var(--soft); }
.example-item.selected {
  background: var(--accent-soft); border-color: var(--line-strong); box-shadow: var(--hard-sm);
}
.example-item .pack { display: block; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.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; }

.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 { 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; color: var(--line-strong); background: var(--lilac); border-radius: 5px; padding: 1px 6px; }
.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 ────────────────────────────────────────────────────────────────── */
.docs-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 46px; padding: 46px 0 82px; }
.toc { position: sticky; top: 92px; align-self: start; font-size: 13.5px; }
.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; }
.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 ──────────────────────────────────────────────────────────── */
@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-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .toc h4 { display: none; }
}
@media (max-width: 760px) {
  .nav-inner { height: auto; padding: 12px 20px; flex-wrap: wrap; gap: 10px; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; }
  .grid.c2, .grid.c3, .grid.c4, .uc { grid-template-columns: minmax(0, 1fr); }
  .mods, .mod-summary { grid-template-columns: minmax(0, 1fr); }
  .pg { height: auto; overflow: visible; }
  .pg-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .panel { max-height: 78vh; }
  /* 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: 22px; padding: 24px 18px; }
  .flow-wires { display: none; }
  .flow-msgs { border-left: 3px solid var(--lilac-2); padding-left: 12px; }
  .flow-col.core-col { align-items: flex-start; text-align: left; }
  .core-col .flow-col-label { align-self: flex-start; }
  .flow-result { align-self: stretch; }
}