:root {
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #eef3fb;
  --ink: #0b1f3a;
  --ink-2: #44546e;
  --ink-3: #7a879c;
  --line: #d9e1ee;
  --accent: #1d4ed8;
  --accent-2: #3b82f6;
  --accent-soft: #dbe7ff;
  --orange: #d95c16;
  --attn: #1d4ed8;
  --mlp: #0e9f8e;
  --navy: #0b2a5b;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1220; --surface: #131c2e; --surface-2: #19243a; --ink: #e6edf8; --ink-2: #aab6ca; --ink-3: #7484a0;
    --line: #26334c; --accent: #7dafff; --accent-2: #5b93f5; --accent-soft: #1d2f55; --orange: #ff9650; --attn: #7dafff; --mlp: #3fd6c3; --navy: #0a1730;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1220; --surface: #131c2e; --surface-2: #19243a; --ink: #e6edf8; --ink-2: #aab6ca; --ink-3: #7484a0;
  --line: #26334c; --accent: #7dafff; --accent-2: #5b93f5; --accent-soft: #1d2f55; --orange: #ff9650; --attn: #7dafff; --mlp: #3fd6c3; --navy: #0a1730;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); }
code, pre { font-family: var(--mono); }
a { color: var(--accent); }
button { font: inherit; color: inherit; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--navy); color: #fff;
}
.brand { display: flex; gap: 12px; align-items: center; }
.mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #2563eb; font-size: 20px; font-weight: 700; }
.title { font-weight: 700; letter-spacing: .01em; }
.sub { font-size: 12px; color: #a9c1ea; }
.model-pick { display: flex; gap: 6px; align-items: center; }
.model-pick .seg { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #dce7fb; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding: 5px 12px; }
.model-pick .seg span { font-size: 11px; opacity: .75; }
.model-pick .seg.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.icon { background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 8px; width: 36px; height: 36px; cursor: pointer; }

.promptbar {
  position: sticky; top: 56px; z-index: 19;
  display: flex; gap: 10px; align-items: center; padding: 10px 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.promptbar label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); white-space: nowrap; }
.promptbar input { flex: 1; min-width: 0; font: 16px var(--mono); padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.promptbar input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.promptbar .count { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; max-width: 1240px; margin: 0 auto; padding: 20px; }
nav.side { position: sticky; top: 130px; align-self: start; display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 150px); overflow: auto; }
nav.side a { display: flex; gap: 10px; padding: 5px 8px; border-radius: 6px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
nav.side a:hover { background: var(--surface-2); color: var(--ink); }
nav.side .n { font: 600 11.5px var(--mono); color: var(--accent); min-width: 38px; padding-top: 2px; }
main { min-width: 0; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 16px; }
  nav.side { display: none; }
  .promptbar { top: 0; position: relative; flex-wrap: wrap; padding: 10px 16px; }
  .top { position: relative; padding: 10px 16px; }
  html { scroll-padding-top: 10px; }
}

/* ---------- sections ---------- */
.modelcard, .slide { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; margin-bottom: 22px; }
@media (max-width: 600px) { .modelcard, .slide { padding: 16px; } }
.modelcard { border-left: 4px solid var(--accent); }
.mc-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.mc-head b { font-size: 18px; }
.mc-head code { font-size: 12.5px; color: var(--ink-3); }
.modelcard p { margin: 6px 0 0; color: var(--ink-2); }
.modelcard .ok { color: var(--mlp); font-size: 13.5px; }
.error { color: var(--orange); font-family: var(--mono); font-size: 13px; }
.loading { display: grid; gap: 6px; margin-top: 12px; }
.lrow { display: grid; grid-template-columns: 150px 1fr 80px; gap: 10px; align-items: center; font-size: 13px; }

.slide-head { display: flex; gap: 14px; align-items: baseline; }
.slide-head .num { font: 700 13px var(--mono); color: #fff; background: var(--accent-2); padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.slide-head h2 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.lead { font-size: 16px; color: var(--ink-2); margin: 8px 0 16px; max-width: 70ch; }
h3 { margin: 26px 0 8px; font-size: 17px; }
h4 { margin: 14px 0 6px; font-size: 14px; color: var(--ink-2); }
.note { font-size: 13.5px; color: var(--ink-3); margin: 8px 0; max-width: 75ch; }
.dim { color: var(--ink-3); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.two > * { min-width: 0; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }

pre.code {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; line-height: 1.55; overflow-x: auto; margin: 10px 0; white-space: pre;
}
pre.code.scroll { max-height: 520px; overflow: auto; }
.code-live .line { margin-top: 12px; }
.code-live .line code { font-size: 14px; color: var(--accent); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 8px 3px;
  border-radius: 7px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; min-width: 26px;
  transition: border-color .1s;
}
.chip:hover { border-color: var(--accent-2); }
.chip.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.chip.static { cursor: default; }
.chip.merged { border-color: var(--orange); box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 25%, transparent); }
.chip.future { opacity: .35; }
.chip.small { padding: 2px 6px; font-size: 12px; }
.piece { font-family: var(--mono); font-size: 13.5px; white-space: pre; }
.tid { font: 10.5px var(--mono); color: var(--ink-3); }
.prob { font: 11px var(--mono); color: var(--ink-2); }

.nextrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.next { display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.next.best { border-color: var(--accent); background: var(--accent-soft); }
.next:hover { border-color: var(--accent-2); }

/* ---------- files ---------- */
.files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .files { grid-template-columns: 1fr; } }
.file { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.fname { font: 600 14px var(--mono); }
.frole { font-size: 12.5px; color: var(--ink-3); }
.fsize { font: 700 20px var(--sans); margin: 6px 0; color: var(--accent); }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > div { height: 100%; background: var(--accent-2); transition: width .15s; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 10px 0; }
table { border-collapse: collapse; font-size: 13.5px; }
table.cfg { width: 100%; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
td.num { text-align: right; font-family: var(--mono); }
td.live { color: var(--accent); font-weight: 700; }
.shapes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.shape { display: flex; flex-direction: column; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); min-width: 160px; }
.shape code { color: var(--ink-3); font-size: 12px; }
.shape b { font: 700 18px var(--mono); color: var(--accent); }
.shape span { font-size: 12px; color: var(--ink-2); }

/* ---------- weights ---------- */
.weights { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .weights { grid-template-columns: 1fr; } .tensor-list { max-height: 200px; } }
.tensor-list { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.tensor { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: 12px var(--mono); }
.tensor:hover { background: var(--surface-2); }
.tensor.sel { background: var(--accent-soft); color: var(--accent); }
.tensor-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; margin-bottom: 8px; }
.hist svg { width: 100%; height: 60px; display: block; margin-top: 10px; }
.hist rect { fill: var(--accent-2); }
.hist-axis { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--ink-3); }

/* ---------- heatmaps ---------- */
canvas.heat { image-rendering: pixelated; image-rendering: crisp-edges; display: block; border-radius: 4px; border: 1px solid var(--line); }
canvas.weightmap { width: 100%; height: auto; max-height: 420px; object-fit: fill; aspect-ratio: auto; }
canvas.strip { width: 100%; height: 34px; margin: 8px 0; }
canvas.attn { width: min(100%, 520px); aspect-ratio: 1; cursor: crosshair; }
canvas.mini { width: 100%; aspect-ratio: 1; }
canvas.kvgrid { width: 100%; height: 90px; }
.attn-wrap { display: flex; gap: 6px; align-items: flex-start; }
.axis-label.y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; color: var(--ink-3); }
.readout { font: 12.5px var(--mono); color: var(--ink-2); min-height: 1.6em; margin-top: 6px; }

.controls { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 8px 0; }
.pick { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.pick.wide { display: flex; margin: 6px 0; }
.pick.wide input { flex: 1; }
.pick b { font-family: var(--mono); color: var(--accent); min-width: 2.5em; }
.pick span { min-width: 5.5em; }
input[type=range] { accent-color: var(--accent-2); }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.search { width: 100%; font: 14px var(--mono); padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.segs { display: flex; gap: 4px; margin: 10px 0; flex-wrap: wrap; }
.seg { border: 1px solid var(--line); background: var(--surface-2); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.seg.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn { border: 1.5px solid var(--line); background: var(--surface-2); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 14px; margin: 6px 0; }
.btn:hover:not(:disabled) { border-color: var(--accent-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .btn.primary { color: #0b1f3a; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- vocab ---------- */
.vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 3px; max-height: 300px; overflow: auto; margin-top: 8px; }
.vcell { display: flex; justify-content: space-between; gap: 4px; padding: 3px 6px; border-radius: 5px; background: var(--surface-2); }
.nbrs { display: flex; flex-wrap: wrap; gap: 6px; }
.nbr { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; }

/* ---------- small charts ---------- */
svg.vecbars { width: 100%; height: 70px; display: block; background: var(--surface-2); border-radius: 6px; }
svg.vecbars rect.pos { fill: var(--accent-2); }
svg.vecbars rect.neg { fill: var(--orange); }
.axis { stroke: var(--ink-3); stroke-width: .5; vector-effect: non-scaling-stroke; }
svg.plot { width: 100%; max-width: 640px; display: block; background: var(--surface-2); border-radius: 8px; overflow: visible; }
svg.plot.tall { max-width: 720px; }
svg.plot.spark { height: 70px; max-width: none; }
.line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.line.a { stroke: var(--accent-2); }
.line.b { stroke: var(--orange); stroke-dasharray: 5 4; }
.cursor { stroke: var(--ink-3); stroke-dasharray: 2 3; }
.dot { fill: var(--accent); }
.tick { font: 7px var(--mono); fill: var(--ink-3); }
.tick.mid { text-anchor: middle; }
.cbar.attn { fill: var(--attn); opacity: .55; }
.cbar.mlp { fill: var(--mlp); opacity: .7; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: -8px; }
.sw.a { background: var(--accent-2); }
.sw.b { background: var(--orange); }
.sw.attn { background: var(--attn); opacity: .55; height: 10px; }
.sw.mlp { background: var(--mlp); height: 10px; }
.sw.prompt { background: color-mix(in srgb, var(--accent-2) 50%, var(--surface)); height: 10px; }
.sw.empty { background: var(--line); height: 10px; }

/* ---------- layer diagram ---------- */
.layer-diagram { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; background: var(--surface-2); border-radius: 10px; }
.ld-row { display: flex; gap: 10px; align-items: center; color: var(--ink-3); }
.ld-box { padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 13.5px; text-decoration: none; border: 1.5px solid; }
.ld-box.norm { color: var(--ink-2); border-color: var(--line); background: var(--surface); }
.ld-box.attn { color: var(--attn); border-color: var(--attn); background: var(--surface); }
.ld-box.mlp { color: var(--mlp); border-color: var(--mlp); background: var(--surface); }
.ld-plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink-3); font-weight: 700; }
.ld-io { font: 12.5px var(--mono); color: var(--ink-3); }

/* ---------- heads ---------- */
.heads { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 10px 0; }
.headcell { display: flex; flex-direction: column; gap: 3px; padding: 6px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; font-size: 12px; text-align: left; }
.headcell.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.kvtag { font: 600 10.5px var(--mono); padding: 1px 6px; border-radius: 4px; align-self: flex-start; color: #fff; }
.kv0 { background: #1d4ed8; } .kv1 { background: #0e9f8e; } .kv2 { background: #b45309; } .kv3 { background: #7c3aed; }
.kv4 { background: #be185d; } .kv5 { background: #4d7c0f; } .kv6 { background: #0369a1; } .kv7 { background: #9f1239; }

/* ---------- rope ---------- */
.dials { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.dial { width: 100%; }
.dial .ring { fill: var(--surface-2); stroke: var(--line); }
.dial .ref { stroke: var(--line); stroke-width: .8; }
.dial .hand { stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; }
.dial-label { font: 3.4px var(--mono); fill: var(--ink-3); text-anchor: middle; }

/* ---------- mask / lens ---------- */
table.mask td, table.mask th, table.lens td, table.lens th { font: 12px var(--mono); padding: 4px 7px; text-align: center; }
table.mask .future { color: var(--ink-3); background: repeating-linear-gradient(45deg, transparent 0 5px, var(--surface-2) 5px 10px); }
table.lens td { white-space: pre; border: 1px solid var(--surface); }
table.lens th.sel { color: var(--accent); }

/* ---------- logits / sampling ---------- */
.bars { display: flex; flex-direction: column; gap: 2px; }
.barrow { display: grid; grid-template-columns: 90px 1fr 56px 52px; gap: 8px; align-items: center; padding: 2px 4px; border: 0; background: none; cursor: pointer; border-radius: 5px; text-align: left; }
.barrow:hover { background: var(--surface-2); }
.track { height: 12px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.fill { display: block; height: 100%; background: var(--accent-2); }
.barrow .num { font: 12px var(--mono); text-align: right; }
.cands { display: flex; gap: 2px; margin: 6px 0; min-height: 40px; }
.cand { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; overflow: hidden; padding: 4px 2px; background: var(--accent-soft); border-radius: 5px; }
.cand .piece { font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- generation ---------- */
.story { font: 15px/1.7 Georgia, "Iowan Old Style", serif; white-space: pre-wrap; background: var(--surface-2); border-radius: 10px; padding: 14px 16px; min-height: 120px; max-height: 360px; overflow: auto; }
.prompt-text { color: var(--ink-3); }
.gtok { color: var(--ink); border-radius: 3px; }
.gtok:hover { background: var(--accent-soft); }
.caret { color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
@media (max-width: 600px) { .stats { grid-template-columns: 1fr; } }
.stats > div { display: flex; flex-direction: column; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.stats b { font: 700 20px var(--mono); color: var(--accent); }
.stats span { font-size: 12px; color: var(--ink-3); }

/* ---------- pipeline ---------- */
.pipeline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 16px; }
.stage { display: flex; flex-direction: column; padding: 8px 12px; border: 1.5px solid var(--accent-2); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--surface-2); max-width: 220px; }
.stage span { font: 12px var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arrow { color: var(--ink-3); }

footer { font-size: 12.5px; color: var(--ink-3); padding: 10px 4px 40px; }

/* ---------- paging ---------- */
.offpage { display: none; }
nav.side a.cur { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pagerbar { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.spacer { flex: 1; }
table.mask thead th, table.lens thead th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.model-pick .seg.ws { background: rgba(255,255,255,.04); }
.model-pick .seg.ws.on { background: #0e9f8e; border-color: #0e9f8e; }

/* ---------- inspect buttons ---------- */
.inspects { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.inspect {
  font: 12px var(--mono); padding: 4px 9px; border-radius: 6px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--mlp) 60%, var(--line)); background: color-mix(in srgb, var(--mlp) 7%, var(--surface)); color: var(--ink);
}
.inspect:hover { border-style: solid; border-color: var(--mlp); }
.inspect .prompt, .cmdline .prompt { color: var(--mlp); font-weight: 700; margin-right: 6px; }
.hover-readout { font: 12px var(--mono); color: var(--ink-2); margin: 4px 0; min-height: 1.4em; }

/* ---------- dock ---------- */
.layout.dock-open { padding-bottom: calc(44vh + 20px); }
.layout.dock-open.dock-tall { padding-bottom: calc(70vh + 20px); }
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 44vh; display: none; flex-direction: column;
  background: var(--surface); border-top: 2px solid var(--mlp); box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dock.open { display: flex; }
.dock.tall { height: 70vh; }
.dock-bar { display: flex; gap: 10px; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mini { font: 12px var(--sans); padding: 2px 8px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.mini:disabled { opacity: .4; cursor: default; }
.dock-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 900px) { .dock-body { grid-template-columns: 1fr; overflow: auto; } .ws-list { display: none; } }
.ws-list { overflow: auto; border-right: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.ws-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 6px 4px 2px; }
.ws-var { display: flex; justify-content: space-between; gap: 6px; text-align: left; font: 12.5px var(--mono); padding: 2px 6px; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.ws-var:hover { background: var(--accent-soft); }
.ws-var.user { color: var(--mlp); }
.ws-var .dim { font-size: 11px; }

.editor { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); padding: 6px 10px; }
.editor .empty { margin: auto; font-size: 13px; }
.ed-head { display: flex; gap: 10px; align-items: center; font-size: 13px; margin-bottom: 4px; }
.mono { font-family: var(--mono); }
.grid-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 6px; overscroll-behavior: contain; }
table.vgrid { border-collapse: collapse; font: 11.5px var(--mono); }
table.vgrid th, table.vgrid td { padding: 2px 6px; border: 1px solid var(--line); white-space: nowrap; }
table.vgrid td { text-align: right; cursor: cell; min-width: 64px; }
table.vgrid td.sel { outline: 2px solid var(--orange); outline-offset: -2px; }
table.vgrid thead th { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); position: sticky; top: 0; background: var(--surface-2); z-index: 1; text-align: right; }
table.vgrid tbody th { position: sticky; left: 0; background: var(--surface-2); text-align: left; font-weight: 500; }
table.vgrid th.corner { left: 0; z-index: 2; }
.ix { color: var(--ink-3); font-size: 10.5px; }
.lbl { color: var(--accent); margin-left: 6px; font-size: 11px; }
thead .lbl { margin-left: 0; }
.ed-foot { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; font-size: 12px; }
.pager { display: inline-flex; gap: 4px; align-items: center; }
.ed-sel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; margin-top: 4px; min-height: 1.8em; }
.ed-sel code { color: var(--orange); }
canvas.imagesc { width: 100%; max-height: 120px; margin-bottom: 6px; cursor: crosshair; }

.console { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.log { flex: 1; overflow: auto; padding: 6px 10px; font: 12px var(--mono); }
.log pre { margin: 0; white-space: pre; font: inherit; }
.log .welcome { color: var(--ink-3); white-space: pre-wrap; margin-bottom: 6px; }
.log .in { color: var(--mlp); margin-top: 6px; }
.log .out { color: var(--ink); }
.log .out.err { color: var(--orange); white-space: pre-wrap; }
.cmdline { display: flex; align-items: center; border-top: 1px solid var(--line); padding: 6px 10px; }
.cmdline input { flex: 1; min-width: 0; font: 13.5px var(--mono); border: 0; background: none; color: var(--ink); outline: none; }

/* ---------- runnable Python cells ---------- */
.pycell { margin: 18px 0 6px; border: 1px solid color-mix(in srgb, var(--mlp) 45%, var(--line)); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.pyhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--mlp) 8%, var(--surface)); }
.pyhead .lang { font: 600 12px var(--mono); color: var(--mlp); }
.pyhead .btn.run { margin: 0; padding: 4px 14px; font-size: 13px; }
.pycell textarea.code {
  display: block; width: 100%; border: 0; resize: vertical; margin: 0; padding: 12px 14px;
  font: 13px/1.55 var(--mono); background: var(--surface-2); color: var(--ink); outline: none; white-space: pre; overflow-x: auto; tab-size: 4;
}
.pyout-wrap { border-top: 1px dashed var(--line); padding: 8px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pyout { margin: 0; font: 12.5px/1.5 var(--mono); white-space: pre; overflow-x: auto; max-width: 100%; max-height: 360px; }
.pyout.err { color: var(--orange); white-space: pre-wrap; }
.pycell .hint { margin: 0; padding: 4px 14px 6px; font-size: 11.5px; color: var(--ink-3); }
details.src { margin: 10px 0; }
details.src summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
details.src summary:hover { color: var(--accent); }
.lead-pick { display: inline-flex; align-items: center; gap: 2px; font: 12px var(--mono); }
.lead-pick input { width: 48px; font: 12px var(--mono); padding: 1px 3px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }
.cmdline textarea { flex: 1; min-width: 0; font: 13.5px/1.5 var(--mono); border: 0; background: none; color: var(--ink); outline: none; resize: none; padding: 0; }
.cmdline { align-items: flex-start; }
.cmdline .prompt { padding-top: 1px; }

/* ---------- guided labs ---------- */
.guide { margin: 26px 0 4px; border: 1.5px solid color-mix(in srgb, var(--mlp) 50%, var(--line)); border-radius: 14px; overflow: hidden; background: var(--surface); }
.guide-head, .guide-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; background: color-mix(in srgb, var(--mlp) 9%, var(--surface)); }
.guide-head b { color: var(--mlp); }
.guide-foot { border-top: 1px solid var(--line); }
.guide-foot .btn { margin: 0; }
.progress { font: 600 12px var(--mono); color: var(--mlp); }
.gstep { border-top: 1px solid var(--line); }
.gstep-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 14px; }
.gstep-head .what { font-size: 14px; color: var(--ink-2); flex: 1 1 260px; }
.gstep-head .spacer { flex: 0; }
.gstep-head .btn.run { margin: 0; padding: 4px 14px; font-size: 13px; }
.badge { font: 700 11.5px var(--mono); padding: 3px 9px; border-radius: 999px; color: #fff; white-space: nowrap; }
.badge.k0 { background: #64748b; } .badge.k1 { background: #2563eb; } .badge.k2 { background: #0e9f8e; } .badge.k3 { background: #d95c16; }
.gstep.done .badge::after { content: " ✓"; }
.gstep textarea.code {
  display: block; width: 100%; border: 0; border-top: 1px dashed var(--line); resize: vertical; margin: 0; padding: 10px 14px;
  font: 13px/1.55 var(--mono); background: var(--surface-2); color: var(--ink); outline: none; white-space: pre; overflow-x: auto; tab-size: 4;
}
.gstep textarea.code:focus { box-shadow: inset 3px 0 0 var(--mlp); }
.pyout-wrap { border-top: 1px dashed var(--line); padding: 8px 14px 10px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pyout { margin: 0; font: 12.5px/1.5 var(--mono); white-space: pre; overflow-x: auto; max-width: 100%; max-height: 340px; }
.pyout.err { color: var(--orange); white-space: pre-wrap; }
.arrayview { width: 100%; }
canvas.inline { cursor: crosshair; }
.small { font-size: 11.5px; }
details.src { margin: 10px 0; }
details.src summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
details.src summary:hover { color: var(--accent); }
.lead-pick { display: inline-flex; align-items: center; gap: 2px; font: 12px var(--mono); }
.lead-pick input { width: 48px; font: 12px var(--mono); padding: 1px 3px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }
.cmdline { align-items: flex-start; }
.cmdline textarea { flex: 1; min-width: 0; font: 13.5px/1.5 var(--mono); border: 0; background: none; color: var(--ink); outline: none; resize: none; padding: 0; }

/* ---------- phones ---------- */
.mobilebar { display: none; }
html, body { overflow-x: hidden; }
@media (max-width: 900px) {
  body { -webkit-text-size-adjust: 100%; }
  .top { gap: 8px; }
  .brand .sub { display: none; }
  .brand .title { font-size: 14px; }
  .mark { width: 30px; height: 30px; font-size: 17px; }
  .model-pick { flex-wrap: wrap; }
  .model-pick .seg { padding: 4px 9px; }
  .model-pick .seg span { display: none; }
  .model-pick .seg.ws { display: none; }      /* the bottom bar has the workspace button */
  .icon { width: 32px; height: 32px; }
  .promptbar label { display: none; }
  /* iOS zooms into inputs smaller than 16px */
  .promptbar input, .search, .gstep textarea.code, .cmdline textarea, select, input[type=number] { font-size: 16px; }
  .layout { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .slide-head h2 { font-size: 20px; }
  .lead { font-size: 15px; }
  .mobilebar {
    display: flex; gap: 8px; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--navy); border-top: 1px solid rgba(255,255,255,.12);
  }
  .mobilebar.hidden-bar { display: none; }
  .mobilebar select { flex: 1; min-width: 0; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; padding: 0 10px; }
  .mobilebar select option { color: #000; }
  .mb-btn { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 22px; cursor: pointer; }
  .mb-btn:disabled { opacity: .35; }
  .pagerbar .btn { font-size: 13px; }
  /* touch targets */
  .btn, .seg, .chip { min-height: 40px; }
  .mini { min-height: 32px; padding: 4px 10px; }
  .gstep-head .btn.run { min-height: 38px; }
  .gstep-head .what { flex-basis: 100%; order: 3; }
  input[type=range] { height: 28px; }
  .pick { flex-wrap: wrap; }
  .pick span { min-width: 0; }
  .barrow { grid-template-columns: 70px 1fr 48px 46px; }
  .tensor-list { max-height: 180px; }
  canvas.attn { width: 100%; }
  .dials { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  /* workspace: full-width, stacked */
  .dock { height: 78vh; }
  .dock.tall { height: 92vh; }
  .dock-bar .dim { display: none; }
  .dock-body { display: flex; flex-direction: column; overflow: hidden; }
  .dock-body .editor { flex: 1 1 45%; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .dock-body .console { flex: 1 1 55%; min-height: 0; }
  .layout.dock-open { padding-bottom: calc(78vh + 20px); }
  .layout.dock-open.dock-tall { padding-bottom: calc(92vh + 20px); }
  .ed-head { flex-wrap: wrap; }
  table.vgrid td { min-width: 56px; }
  .pyout, .log { font-size: 12px; }
}
@media (max-width: 420px) {
  .modelcard, .slide { padding: 14px 12px; border-radius: 12px; }
  .layout { padding-left: 10px; padding-right: 10px; }
  .top { padding: 8px 10px; }
  .promptbar { padding: 8px 10px; }
  .shape { min-width: 0; flex: 1 1 140px; }
}
@media (max-width: 900px) {
  .dock-body .ws-list {
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 4px; align-items: center;
    overflow-x: auto; overflow-y: hidden; flex: 0 0 auto; padding: 6px 8px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .dock-body .ws-head { margin: 0 4px 0 8px; white-space: nowrap; }
  .dock-body .ws-var { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; min-height: 34px; }
  .attn-wrap { flex-wrap: wrap; }
}

/* ---------- appendix: chat ---------- */
.ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 16px; }
@media (max-width: 760px) { .ideas { grid-template-columns: 1fr; } }
.idea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--surface-2); }
.idea p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.idea code { font-size: 12px; color: var(--accent); }
.callout { border: 1.5px dashed var(--accent-2); border-radius: 12px; padding: 12px 16px; margin: 12px 0; background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.callout p { margin: 4px 0; }
.chat { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface-2); }
.chat textarea.sys { width: 100%; font: 13px var(--mono); padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.msgs { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; max-height: 460px; overflow: auto; }
.msg { display: flex; flex-direction: column; gap: 2px; max-width: 85%; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg .who { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.bubble { padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; line-height: 1.5; }
.msg.user .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
:root[data-theme="dark"] .msg.user .bubble { color: #0b1f3a; }
.msg.bot .bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ask { display: flex; gap: 8px; align-items: stretch; }
.ask textarea { flex: 1; min-width: 0; font: 15px var(--sans); padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); resize: vertical; }
.ask-btns { display: flex; flex-direction: column; gap: 4px; }
.ask-btns .btn { margin: 0; padding: 6px 12px; }
.chip.special { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, var(--surface)); }
@media (max-width: 900px) { .ask { flex-direction: column; } .ask-btns { flex-direction: row; } .ask textarea { font-size: 16px; } }

/* ---------- links menu ---------- */
.links { position: relative; }
.links > summary { list-style: none; cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #dce7fb; padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.links > summary::-webkit-details-marker { display: none; }
.links[open] > summary { background: #2563eb; border-color: #2563eb; color: #fff; }
.links-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(360px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25); display: flex; flex-direction: column;
}
.links-panel a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.links-panel a:hover { background: var(--accent-soft); }
.links-panel a span { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 900px) { .links-panel { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; } }
details.sysbox, details.real { margin: 10px 0; }
details.sysbox summary, details.real summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
details.real ul { margin: 6px 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }
details.real li { margin: 3px 0; }
.ranon { font: 11px var(--mono); color: var(--ink-3); }
.chip.more { border-style: dashed; color: var(--ink-3); font: 12px var(--sans); justify-content: center; }

/* ---------- lecture slides ---------- */
.slidestrip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.ss-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-right: 4px; }
.ss-thumb { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #163a6b; cursor: zoom-in; width: 150px; aspect-ratio: 16 / 9; }
.ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-thumb span { position: absolute; left: 4px; bottom: 4px; font: 700 10.5px var(--mono); background: rgba(0,0,0,.6); color: #fff; padding: 1px 5px; border-radius: 4px; }
.ss-thumb:hover { border-color: var(--accent-2); }
@media (max-width: 600px) { .ss-thumb { width: calc(33% - 8px); min-width: 96px; } }
.beyond { font-size: 12.5px; color: var(--orange); margin: 0 0 12px; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(5,10,20,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; cursor: zoom-out; }
.lightbox img { max-width: min(1200px, 100%); max-height: 80vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; color: #dce7fb; font-size: 13px; cursor: default; }

/* ---------- one colour per kind of number (used everywhere) ---------- */
:root {
  --c-tok: #64748b;   /* tokens / text */
  --c-x: #2563eb;     /* token vectors, residual stream */
  --c-q: #7c3aed;     /* queries */
  --c-k: #0d9488;     /* keys */
  --c-v: #db2777;     /* values */
  --c-attn: #d97706;  /* attention weights */
  --c-mlp: #16a34a;   /* MLP */
  --c-logit: #ea580c; /* logits, probabilities */
  --c-w: #475569;     /* weights / files */
  --attn: var(--c-attn);
  --mlp: var(--c-mlp);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c-tok: #94a3b8; --c-x: #60a5fa; --c-q: #a78bfa; --c-k: #2dd4bf; --c-v: #f472b6; --c-attn: #fbbf24; --c-mlp: #4ade80; --c-logit: #fb923c; --c-w: #94a3b8; --attn: var(--c-attn); --mlp: var(--c-mlp); }
}
:root[data-theme="dark"] { --c-tok: #94a3b8; --c-x: #60a5fa; --c-q: #a78bfa; --c-k: #2dd4bf; --c-v: #f472b6; --c-attn: #fbbf24; --c-mlp: #4ade80; --c-logit: #fb923c; --c-w: #94a3b8; --attn: var(--c-attn); --mlp: var(--c-mlp); }
.c-tok { --c: var(--c-tok); } .c-x { --c: var(--c-x); } .c-q { --c: var(--c-q); } .c-k { --c: var(--c-k); } .c-v { --c: var(--c-v); }
.c-attn { --c: var(--c-attn); } .c-mlp { --c: var(--c-mlp); } .c-logit { --c: var(--c-logit); } .c-w { --c: var(--c-w); }

/* ---------- "you are here" map ---------- */
.modelmap { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; overflow-x: auto; padding-bottom: 4px; }
.mm-you { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); white-space: nowrap; }
.mm-flow { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
.mm-node { font: 600 11px var(--sans); white-space: nowrap; padding: 3px 7px; border-radius: 6px; border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, var(--surface)); color: var(--ink-2); cursor: pointer; }
.mm-node.here { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
:root[data-theme="dark"] .mm-node.here { color: #0b1220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mm-node.here { color: #0b1220; } }
.mm-arrow { color: var(--ink-3); font-size: 11px; }
.mm-layer { position: relative; display: flex; align-items: center; gap: 3px; padding: 12px 6px 4px; border: 1.5px dashed var(--line); border-radius: 9px; }
.mm-layer.here { border-color: var(--c-x); border-style: solid; background: color-mix(in srgb, var(--c-x) 6%, transparent); }
.mm-times { position: absolute; top: -1px; left: 8px; font: 600 9.5px var(--mono); color: var(--ink-3); }
.mm-loop { margin-left: 6px; }

/* ---------- glossary terms ---------- */
.term { position: relative; border-bottom: 1.5px dotted var(--accent-2); cursor: help; outline: none; }
.term .tip {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(320px, 80vw);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px;
  font-size: 13px; line-height: 1.45; box-shadow: 0 10px 28px rgba(0,0,0,.22); font-weight: 400;
}
.term .tip em { color: var(--ink-3); font-style: normal; font-size: 12px; }
.term:hover .tip, .term:focus .tip, .term:focus-within .tip { display: block; }
.gloss-panel { max-height: 70vh; overflow: auto; width: min(420px, calc(100vw - 24px)); }

/* ---------- attention lines ---------- */
svg.attnlines { display: block; margin: 6px 0; overflow: visible; }
svg.attnlines.compact { width: 100%; aspect-ratio: auto; }
.al-tok { font: 12px var(--mono); fill: var(--ink-2); }
.al-tok.left { text-anchor: end; }
.al-tok.q { fill: var(--c-q); font-weight: 700; }
.al-tok.fut { opacity: .35; }
.al-head { font: 10px var(--sans); fill: var(--ink-3); text-anchor: end; }
.al-dot { fill: var(--ink-3); }
.al-dot.q { fill: var(--c-q); }

/* ---------- text as tokens ---------- */
.tokview { font: 15px/2 var(--mono); white-space: pre-wrap; word-break: break-word; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.tk { padding: 2px 1px; border-radius: 3px; }
.tk0 { background: color-mix(in srgb, #3b82f6 22%, transparent); }
.tk1 { background: color-mix(in srgb, #22c55e 22%, transparent); }
.tk2 { background: color-mix(in srgb, #f59e0b 25%, transparent); }
.tk3 { background: color-mix(in srgb, #ec4899 20%, transparent); }
.tk4 { background: color-mix(in srgb, #8b5cf6 22%, transparent); }
.tk.special { background: color-mix(in srgb, var(--orange) 30%, transparent); outline: 1px solid var(--orange); font-size: 12px; }

/* ---------- embedding map ---------- */
svg.embmap { width: 100%; max-width: 720px; display: block; background: var(--surface-2); border-radius: 10px; }
.em-dot { fill: var(--ink-3); opacity: .45; cursor: pointer; }
.em-dot:hover { opacity: 1; fill: var(--c-x); }
.em-mine circle { fill: var(--c-x); stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.em-mine text { font: 600 12px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; cursor: pointer; }
.em-mine.sel circle { fill: var(--c-q); }

/* ---------- beam tree ---------- */
svg.beamtree { width: 100%; display: block; }
.bt-root { fill: var(--ink-3); }
.bt-edge { stroke: var(--line); stroke-width: 1.2; }
.bt-edge.kept { stroke: var(--ink-3); stroke-width: 1.8; }
.bt-edge.best { stroke: var(--c-logit); stroke-width: 3; }
.bt-node rect { fill: var(--surface-2); stroke: var(--line); opacity: .5; }
.bt-node text { font: 10.5px var(--mono); fill: var(--ink-3); text-anchor: middle; }
.bt-node.kept rect { opacity: 1; stroke: var(--ink-3); }
.bt-node.kept text { fill: var(--ink); }
.bt-node.best rect { stroke: var(--c-logit); stroke-width: 2; fill: color-mix(in srgb, var(--c-logit) 14%, var(--surface)); }
.sw.best { background: var(--c-logit); height: 6px; }
.sw.kept { background: var(--ink-3); height: 4px; }
.sw.pruned { background: var(--line); height: 4px; }

/* ---------- KV cache compare ---------- */
.kc-grid { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; padding-bottom: 4px; }
.kc-row { display: flex; gap: 2px; align-items: center; }
.kc-label { font: 10px var(--mono); color: var(--ink-3); width: 54px; flex: 0 0 54px; }
.kc { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 12px; }
.kc.work { background: var(--c-x); }
.kc.reuse { background: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.kc.empty { background: transparent; border: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.sw.work { background: var(--c-x); height: 10px; }
.sw.reuse { background: color-mix(in srgb, var(--ink-3) 45%, transparent); height: 10px; }

/* ---------- whole-model stepper ---------- */
.stage.cur { background: var(--accent); border-color: var(--accent); color: #fff; }
.stage.cur span { color: #e6edf8; }
.stagebox { border: 1.5px solid var(--accent-2); border-radius: 12px; padding: 12px 14px; margin: 8px 0 14px; background: var(--surface-2); }
.stagebox > b { display: block; margin-bottom: 6px; }
.barrow.static { cursor: default; }
.barrow.chosen { background: color-mix(in srgb, var(--c-logit) 18%, transparent); }

/* ---------- quizzes ---------- */
.quiz { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 6px; }
.question { margin: 10px 0 14px; }
.qtext { margin: 0 0 6px; font-weight: 600; }
.qopts { display: flex; flex-wrap: wrap; gap: 6px; }
.qopt { border: 1.5px solid var(--line); background: var(--surface-2); padding: 7px 12px; border-radius: 9px; cursor: pointer; text-align: left; font-size: 14px; }
.qopt:hover { border-color: var(--accent-2); }
.qopt.right { border-color: var(--c-mlp); background: color-mix(in srgb, var(--c-mlp) 18%, var(--surface)); }
.qopt.wrong { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 15%, var(--surface)); }
.qwhy { margin: 6px 0 0; font-size: 13.5px; color: var(--orange); }
.qwhy.ok { color: var(--c-mlp); }
.modelmap { position: relative; scroll-behavior: smooth; }
@media (max-width: 600px) {
  .ss-label { flex-basis: 100%; }
  .slidestrip { gap: 6px; }
}