/* Shared design system for the post-training workbooks.
   Layout: a workbook. One full-width band per technique; every band runs the same
   stations (idea, lab, signal, example, batch, loss, math, pitfalls) so a reader
   always knows where they are.
   Colour is a code, not decoration: grey = prompt (read, never graded),
   teal = answer (graded, where the loss lives), violet = teacher or judge,
   green / red = good / bad, amber = a tag or a weight. */

:root {
  --paper: #f2f4f7;
  --band: #fbfcfd;
  --surface: #ffffff;
  --ink: #132031;
  --ink-2: #47576b;
  --ink-3: #8090a4;
  --rule: #d4dbe4;
  --well: #e8ecf1;

  --prompt: #56677e;
  --prompt-bg: #e0e6ee;
  --answer: #077b88;
  --answer-bg: #cfeef0;
  --teacher: #5a3ec2;
  --teacher-bg: #e8e2fa;
  --good: #2a7a37;
  --good-bg: #d8efdb;
  --bad: #bb382d;
  --bad-bg: #f7dedb;
  --tag: #a3560a;
  --tag-bg: #f8e7d1;

  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgb(19 32 49 / 0.06), 0 6px 18px rgb(19 32 49 / 0.06);

  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --s-xs: 0.78rem;
  --s-sm: 0.88rem;
  --s-md: 1rem;
  --s-lg: 1.18rem;
  --s-xl: 1.5rem;
  --s-2xl: 2.1rem;
  --s-3xl: clamp(2.5rem, 6vw, 3.9rem);

  --radius: 10px;
  --wrap: 1100px;
  --side-w: 274px;
  --topbar-h: 54px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1218;
    --band: #121921;
    --surface: #18212b;
    --ink: #e3e9f1;
    --ink-2: #a2b0c1;
    --ink-3: #6f7e91;
    --rule: #2a3542;
    --well: #1e2833;
    --prompt: #9aa9bd;
    --prompt-bg: #25303e;
    --answer: #4cc8d2;
    --answer-bg: #0f383d;
    --teacher: #ab93ff;
    --teacher-bg: #2b2447;
    --good: #6cc77b;
    --good-bg: #16321e;
    --bad: #ff8b7f;
    --bad-bg: #3e1d1a;
    --tag: #f1a75c;
    --tag-bg: #3a2a16;
    --on-accent: #042529;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 22px rgb(0 0 0 / 0.32);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1218;
  --band: #121921;
  --surface: #18212b;
  --ink: #e3e9f1;
  --ink-2: #a2b0c1;
  --ink-3: #6f7e91;
  --rule: #2a3542;
  --well: #1e2833;
  --prompt: #9aa9bd;
  --prompt-bg: #25303e;
  --answer: #4cc8d2;
  --answer-bg: #0f383d;
  --teacher: #ab93ff;
  --teacher-bg: #2b2447;
  --good: #6cc77b;
  --good-bg: #16321e;
  --bad: #ff8b7f;
  --bad-bg: #3e1d1a;
  --tag: #f1a75c;
  --tag-bg: #3a2a16;
  --on-accent: #042529;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 22px rgb(0 0 0 / 0.32);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  margin: 0;
  display: flex;
  align-items: flex-start;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { font-family: var(--f-display); line-height: 1.15; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: var(--s-3xl); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--s-2xl); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: var(--s-xl); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--s-lg); font-weight: 600; }
h5 { font-size: var(--s-md); font-weight: 600; }
p { margin: 0; }
a { color: var(--answer); text-underline-offset: 3px; }
strong, b { font-weight: 700; }
code, kbd, .mono { font-family: var(--f-mono); font-size: 0.86em; }
/* JetBrains Mono draws <| and |> as triangles; chat markers like <|user|> must stay literal. */
code, kbd, pre, output, .mono, .tok, .inline-tok, .numbers, .tensor-row, .bar-row, .ro b, .pill, .chart text, .wk-id, .facts code {
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
}
:not(pre) > code { background: var(--well); border-radius: 4px; padding: 0.08em 0.36em; }
img, svg { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--answer); outline-offset: 2px; border-radius: 4px; }
/* Components set their own display (grid, flex), which would beat the browser's [hidden] rule:
   tab panels styled as callouts would all show at once. */
[hidden] { display: none !important; }
/* Eyebrows and table headers are uppercase; maths inside them must not be (π would become Π). */
.katex { text-transform: none; letter-spacing: normal; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.prose { display: grid; gap: 0.85em; }
/* A paragraph must stay a text block: as a grid, every bold word or formula would sit on its own line. */
p.prose { display: block; }
ul.prose, ol.prose { padding-left: 1.3em; margin: 0; gap: 0.35em; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 0.35em; }
.muted { color: var(--ink-2); }
.small { font-size: var(--s-sm); }
.eyebrow {
  font-family: var(--f-display);
  font-size: var(--s-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- sidebar navigation ----------
   Every workbook shares one sidebar: a group per family. The current family's
   techniques are anchors on this page; the other families link to their own file.
   On narrow screens the sidebar becomes a drawer opened from the mobile bar. */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--answer); transition: width .1s linear; }

.sidebar {
  position: sticky;
  top: 0;
  flex: none;
  width: var(--side-w);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--surface);
  border-right: 1px solid var(--rule);
  z-index: 40;
}
.side-in { display: grid; gap: 20px; align-content: start; padding: 24px 14px 32px; }
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 0 8px; }
.brand {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
}
.brand span { display: block; font-weight: 400; font-size: var(--s-xs); color: var(--ink-2); letter-spacing: 0.02em; margin-top: 2px; }
.side-nav { display: grid; gap: 8px; }
.side-label { padding: 0 10px; }
.nav-group { display: grid; gap: 2px; }
.nav-group-h {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.nav-group-h:hover { background: var(--well); }
/* The open group is the page you are on: its name takes the accent colour. */
.nav-group.current .ng-name { color: var(--answer); }
.ng-name { font-family: var(--f-display); font-weight: 700; font-size: var(--s-sm); line-height: 1.25; min-width: 0; }
.ng-name small { display: block; font-weight: 400; font-size: var(--s-xs); color: var(--ink-2); }
.ng-chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s; }
.nav-group-h[aria-expanded="true"] .ng-chev { transform: rotate(90deg); }
.nav-list {
  list-style: none;
  margin: 0 0 4px 8px;
  padding: 2px 0 2px 10px;
  border-left: 1px solid var(--rule);
  display: grid;
  gap: 1px;
}
.nav-list[hidden] { display: none; }
.nav-list a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 7px;
  font-family: var(--f-display);
  font-size: var(--s-sm);
  line-height: 1.3;
  color: var(--ink-2);
  text-decoration: none;
}
.nav-list a b { font-size: var(--s-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); text-align: right; }
.nav-list a:hover { background: var(--well); color: var(--ink); }
.nav-list a[aria-current="true"] { background: var(--ink); color: var(--surface); }
.nav-list a[aria-current="true"] b { color: var(--surface); opacity: 0.7; }
/* A sub-item ("4.2") sits under its parent item, indented, with room for the longer number. */
.nav-list a.sub { grid-template-columns: 30px minmax(0, 1fr); margin-left: 16px; padding-block: 3px; font-size: var(--s-xs); }
.side-foot { padding: 0 10px; font-size: var(--s-xs); color: var(--ink-3); line-height: 1.5; }

.theme-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.theme-btn svg, .menu-btn svg { width: 18px; height: 18px; }

.content { flex: 1; min-width: 0; }
.mobile-bar, .scrim { display: none; }
.menu-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
}

@media (max-width: 960px) {
  body { display: block; }
  html { scroll-padding-top: calc(var(--topbar-h) + 14px); }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    height: auto;
    width: min(86vw, 320px);
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: var(--shadow);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .24s ease, visibility 0s linear .24s;
  }
  .sidebar.open { transform: none; visibility: visible; transition: transform .24s ease, visibility 0s; }
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgb(8 12 18 / 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s;
  }
  .scrim.show { opacity: 1; pointer-events: auto; }
  .mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--topbar-h);
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
  }
  .mobile-title {
    flex: 1;
    min-width: 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--s-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- hero ---------- */
.hero { background: var(--surface); border-bottom: 1px solid var(--rule); }
.hero .wrap { padding-block: 56px 48px; display: grid; gap: 34px; }
.hero-title { display: grid; gap: 14px; }
.lede { font-size: var(--s-lg); color: var(--ink-2); }
.primer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.primer > div {
  min-width: 0;
  background: var(--well);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.primer h4 { font-size: var(--s-md); }
.primer p { font-size: var(--s-sm); color: var(--ink-2); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: var(--s-sm); }
.legend .eyebrow { margin-right: 4px; }
.legend span.key { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; }
.sw.p { background: var(--prompt-bg); outline: 1.5px solid var(--prompt); }
.sw.a { background: var(--answer-bg); outline: 1.5px solid var(--answer); }
.sw.t { background: var(--teacher-bg); outline: 1.5px solid var(--teacher); }
.sw.g { background: var(--good-bg); outline: 1.5px solid var(--good); }
.sw.b { background: var(--bad-bg); outline: 1.5px solid var(--bad); }
.sw.w { background: var(--tag-bg); outline: 1.5px solid var(--tag); }

/* overview map */
.overview { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .overview { grid-template-columns: 1fr; } }
.levers { display: grid; gap: 8px; }
.lever {
  display: grid;
  grid-template-columns: minmax(130px, 190px) 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--band);
  transition: border-color .2s, background .2s;
}
@media (max-width: 520px) { .lever { grid-template-columns: 1fr; gap: 6px; } }
.lever .lv-name { font-family: var(--f-display); font-weight: 600; font-size: var(--s-sm); }
.lever .lv-name small { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--s-xs); }
.lever .lv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lever.on { border-color: var(--ink); background: var(--well); }
.tchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-family: var(--f-display);
  font-size: var(--s-sm);
  cursor: pointer;
  color: var(--ink);
}
.tchip b { color: var(--ink-3); font-variant-numeric: tabular-nums; }
a.tchip { text-decoration: none; white-space: nowrap; }
.tchip:hover { border-color: var(--ink-2); }
.tchip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tchip[aria-pressed="true"] b { color: var(--surface); opacity: .7; }
.engine {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  gap: 10px;
  background: var(--surface);
}
.engine .formula-mini { font-size: 1.05rem; overflow-x: auto; }
.ov-detail { font-size: var(--s-sm); color: var(--ink-2); min-height: 4.8em; }
.ov-detail strong { color: var(--ink); }
.weak { display: grid; gap: 8px; }
.wk {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  transition: border-color .2s, background .2s;
}
.wk .wk-id {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: var(--s-sm);
  color: var(--ink-2);
}
.wk h5 { font-size: var(--s-sm); }
.wk p { grid-column: 2; font-size: var(--s-xs); color: var(--ink-2); line-height: 1.5; }
.wk.on { border-color: var(--bad); background: var(--bad-bg); }

/* ---------- technique bands ---------- */
.tech { border-bottom: 1px solid var(--rule); }
.tech:nth-of-type(odd) { background: var(--band); }
.tech:nth-of-type(even) { background: var(--paper); }
.tech > .wrap { padding-block: 64px 72px; display: grid; gap: 56px; }

.tech-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 26px; align-items: start; }
.tech-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 6.2rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tech-num span { font-size: 0.5em; vertical-align: 0.55em; margin-right: 2px; letter-spacing: 0; }
.tech-title { display: grid; gap: 10px; min-width: 0; }
.tech-title h2 .aka { display: block; font-size: 0.55em; font-weight: 400; color: var(--ink-2); letter-spacing: 0; margin-top: 4px; }
.facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1px;
  margin: 14px 0 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts > div { background: var(--surface); padding: 12px 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.facts dt { font-family: var(--f-display); font-size: var(--s-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin: 0; font-size: var(--s-sm); }
.cost { letter-spacing: 2px; color: var(--ink); font-size: var(--s-sm); white-space: nowrap; }
.cost i { font-style: normal; color: var(--rule); }
.wbadge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: var(--s-xs);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--bad);
  color: var(--bad);
  background: var(--bad-bg);
  white-space: nowrap;
}
.wbadge.neutral { border-color: var(--rule); color: var(--ink-2); background: var(--well); }

/* stations */
.station { display: grid; gap: 18px; min-width: 0; }
.st-head { display: flex; align-items: baseline; gap: 12px; }
.st-n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  font-family: var(--f-mono);
  font-size: var(--s-xs);
  font-weight: 700;
  color: var(--ink-2);
  transform: translateY(-3px);
}
/* Text first at full width, its companion box (analogy, callout) full width underneath. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }

.analogy {
  background: var(--well);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.analogy p { font-size: var(--s-sm); }

.callout {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: var(--s-sm);
  display: grid;
  gap: 6px;
}
.callout.key { border-color: var(--answer); }
.callout .eyebrow { color: var(--answer); }

/* ---------- labs ---------- */
.lab {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.lab-head {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.lab-head h4 { font-size: var(--s-md); }
.lab-head p { font-size: var(--s-sm); color: var(--ink-2); }
.lab-body { padding: 18px; display: grid; gap: 18px; min-width: 0; }
.lab-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 860px) { .lab-cols { grid-template-columns: 1fr; } }

.controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.ctl { display: grid; gap: 4px; min-width: 0; }
/* Sentence case on purpose: labels carry formula symbols (κ, α, ε, b, r) that uppercase would change. */
.ctl label, .ctl .lbl { font-family: var(--f-display); font-size: var(--s-sm); font-weight: 600; color: var(--ink-2); }
.ctl output { font-family: var(--f-mono); font-size: var(--s-sm); font-variant-numeric: tabular-nums; }
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
input[type="range"] { accent-color: var(--answer); width: min(220px, 60vw); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--answer); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--s-sm);
  cursor: pointer;
  color: var(--ink);
}
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--answer); border-color: var(--answer); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.06); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg button {
  border: 0;
  border-right: 1px solid var(--rule);
  background: var(--surface);
  padding: 6px 12px;
  font-family: var(--f-display);
  font-size: var(--s-sm);
  cursor: pointer;
  color: var(--ink-2);
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

.readouts { display: flex; flex-wrap: wrap; gap: 10px; }
.ro {
  background: var(--well);
  border-radius: 8px;
  padding: 8px 12px;
  display: grid;
  gap: 2px;
  min-width: 120px;
}
.ro span { font-family: var(--f-display); font-size: var(--s-xs); color: var(--ink-2); letter-spacing: 0.04em; }
.ro b { font-family: var(--f-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ro.good b { color: var(--good); }
.ro.bad b { color: var(--bad); }
.ro.acc b { color: var(--answer); }
.hint { font-size: var(--s-sm); color: var(--ink-2); }
.warn { font-size: var(--s-sm); color: var(--bad); }

/* tokens */
.tokstrip { display: flex; flex-wrap: wrap; gap: 6px; }
.tok {
  display: inline-grid;
  gap: 2px;
  justify-items: center;
  padding: 5px 8px 4px;
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  line-height: 1.2;
  border: 1.5px solid transparent;
  background: var(--prompt-bg);
  color: var(--prompt);
  white-space: pre;
}
button.tok { cursor: pointer; }
.tok.a { background: var(--answer-bg); color: var(--ink); border-color: var(--answer); }
.tok.t { background: var(--teacher-bg); color: var(--ink); }
.tok.graded:not(.a) { border-color: var(--prompt); border-style: dashed; }
.tok.sel { box-shadow: 0 0 0 2px var(--ink); }
.tok small { font-size: 0.68rem; color: var(--ink-2); }
.inline-tok { font-family: var(--f-mono); font-size: 0.84em; padding: 0.05em 0.35em; border-radius: 4px; white-space: pre; }
.inline-tok.p { background: var(--prompt-bg); color: var(--prompt); }
.inline-tok.a { background: var(--answer-bg); color: var(--ink); }
.inline-tok.t { background: var(--teacher-bg); color: var(--ink); }
.inline-tok.w { background: var(--tag-bg); color: var(--tag); }
.inline-tok.b { background: var(--bad-bg); color: var(--bad); }

/* bars */
.bars { display: grid; gap: 7px; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 150px) minmax(0, 1fr) 62px; gap: 10px; align-items: center; font-size: var(--s-sm); }
.bar-row .bl { font-family: var(--f-mono); font-size: 0.8rem; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bv { font-family: var(--f-mono); font-size: 0.8rem; text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { position: relative; height: 18px; background: var(--well); border-radius: 4px; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--prompt); border-radius: 4px; transition: width .35s ease; }
.bar-fill.ans { background: var(--answer); }
.bar-fill.tea { background: var(--teacher); }
.bar-fill.good { background: var(--good); }
.bar-fill.bad { background: var(--bad); }
.bar-fill.tag { background: var(--tag); }
.bar-ghost { position: absolute; top: 2px; bottom: 2px; width: 2px; background: var(--teacher); transition: left .35s ease; }

.stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--well); }
.stack > div { height: 100%; transition: width .35s ease; display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.72rem; color: var(--on-accent); overflow: hidden; white-space: nowrap; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--s-xs); color: var(--ink-2); }
.stack-legend span { display: inline-flex; gap: 6px; align-items: center; }

/* svg charts */
.chart { width: 100%; height: auto; display: block; color: var(--ink-2); }
/* Keep SVG text near its drawn size: no stretching on wide screens, scroll instead of shrinking on phones. */
.lab .chart { max-width: 720px; min-width: 520px; }
.lab .chart.map { max-width: 440px; min-width: 300px; }
.chart text { fill: var(--ink-2); font-family: var(--f-mono); font-size: 11px; }
.chart .axis { stroke: var(--rule); stroke-width: 1; fill: none; }
.chart .grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; fill: none; }
.chart .line-a { stroke: var(--answer); stroke-width: 2.5; fill: none; }
.chart .line-b { stroke: var(--bad); stroke-width: 2.5; fill: none; }
.chart .line-t { stroke: var(--teacher); stroke-width: 2.5; fill: none; }
.chart .area-a { fill: var(--answer-bg); stroke: none; }
.chart .dot-a { fill: var(--answer); }
.chart .dot-b { fill: var(--bad); }
.chart .dot-ink { fill: var(--ink); }
.chart .lbl-ink { fill: var(--ink); }

/* ---------- ways (where the signal comes from) ---------- */
.ways { display: grid; gap: 16px; }
.ways-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.slot { display: grid; gap: 8px; align-content: start; min-width: 0; }
.slot-h { font-family: var(--f-display); font-size: var(--s-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.opt {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
  cursor: pointer;
  width: 100%;
}
.opt:hover { border-color: var(--ink-2); }
.opt[aria-pressed="true"] { border: 1.5px solid var(--ink); background: var(--well); }
.opt .ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--well); color: var(--ink-2); }
.opt[aria-pressed="true"] .ico { background: var(--surface); color: var(--ink); }
.opt .ico svg { width: 17px; height: 17px; }
.opt .ol { font-family: var(--f-display); font-weight: 600; font-size: var(--s-sm); line-height: 1.25; }
.opt .ol small { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--s-xs); }
.opt .ico.k-human { color: var(--ink); }
.opt .ico.k-judge, .opt .ico.k-teacher { color: var(--teacher); }
.opt .ico.k-checker { color: var(--good); }
.opt .ico.k-self { color: var(--answer); }
.opt .ico.k-logs { color: var(--prompt); }
.recipe {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 18px;
  display: grid;
  gap: 14px;
}
.recipe-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--f-display); font-size: var(--s-sm); }
.recipe-flow .rf { padding: 4px 10px; border-radius: 999px; background: var(--well); }
.recipe-flow .rf.end { background: var(--answer-bg); }
.recipe-flow .arr { color: var(--ink-3); }
.recipe-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.recipe-parts > div { display: grid; gap: 6px; align-content: start; font-size: var(--s-sm); min-width: 0; }
.recipe-parts h5 { font-size: var(--s-sm); }
.recipe-parts .ex { background: var(--well); border-radius: 8px; padding: 8px 10px; font-size: var(--s-xs); }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: var(--s-xs); }
.pc div { padding: 6px 8px; border-radius: 6px; }
.pc .plus { background: var(--good-bg); }
.pc .minus { background: var(--bad-bg); }
@media (max-width: 520px) { .pc { grid-template-columns: 1fr; } }

/* ---------- examples (chat) ---------- */
.chat { display: grid; gap: 10px; min-width: 0; }
.msg { border-radius: var(--radius); padding: 10px 14px 12px; min-width: 0; overflow-wrap: anywhere; }
.msg .who { display: block; font-family: var(--f-display); font-size: var(--s-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.msg.user, .msg.sys { background: var(--prompt-bg); }
.msg.sys { border: 1px dashed var(--prompt); }
.msg.asst { background: var(--answer-bg); }
.msg.tea { background: var(--teacher-bg); }
.msg.bad { background: var(--bad-bg); }
.msg.good { background: var(--good-bg); }
.msg.tagged { background: var(--tag-bg); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.pair > div { display: grid; gap: 10px; align-content: start; min-width: 0; }
.pair h5 { font-size: var(--s-sm); }
.strike { text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 2px; }

/* ---------- training batch ---------- */
.tabs { display: grid; gap: 12px; min-width: 0; }
.tablist { display: flex; flex-wrap: wrap; gap: 6px; }
.tablist button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-family: var(--f-display);
  font-size: var(--s-sm);
  cursor: pointer;
  color: var(--ink-2);
}
.tablist button[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
/* KaTeX's hidden MathML copy is absolutely positioned. Inside a scroll box that is not
   positioned it escapes the box and widens the whole page on phones. */
.table-wrap, .formula, .formula-mini { position: relative; }
table.batch { border-collapse: collapse; width: 100%; font-size: 0.86rem; min-width: 620px; }
table.batch th {
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--s-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--well);
  white-space: nowrap;
}
table.batch td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.batch tr:last-child td { border-bottom: 0; }
table.batch td.p { background: color-mix(in srgb, var(--prompt-bg) 55%, transparent); color: var(--ink); }
table.batch td.a { background: color-mix(in srgb, var(--answer-bg) 60%, transparent); }
table.batch td.t { background: color-mix(in srgb, var(--teacher-bg) 60%, transparent); }
table.batch td.m { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-2); white-space: nowrap; }
table.batch td.dropped { opacity: 0.45; text-decoration: line-through; }
.th-key { display: inline-flex; gap: 6px; align-items: center; }
pre.code {
  margin: 0;
  background: var(--well);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink);
}
pre.code .k { color: var(--teacher); }
pre.code .s { color: var(--answer); }
pre.code .c { color: var(--ink-3); }
pre.code .w { color: var(--tag); }
.code-wrap { position: relative; min-width: 0; }
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-family: var(--f-display);
  font-size: var(--s-xs);
  cursor: pointer;
  color: var(--ink-2);
}
.tensor { display: grid; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tensor-row { display: grid; grid-template-columns: 92px repeat(var(--n), minmax(58px, 1fr)); gap: 4px; align-items: stretch; min-width: max-content; }
.tensor-row > span { font-family: var(--f-mono); font-size: 0.74rem; padding: 4px 6px; border-radius: 4px; text-align: center; white-space: nowrap; }
.tensor-row > span:first-child { text-align: left; font-family: var(--f-display); color: var(--ink-2); background: none; letter-spacing: .04em; }
.tensor-row .p { background: var(--prompt-bg); color: var(--prompt); }
.tensor-row .a { background: var(--answer-bg); color: var(--ink); }
.tensor-row .x { background: var(--well); color: var(--ink-3); }

/* ---------- loss + math ---------- */
.loss { display: grid; gap: 16px; min-width: 0; }
.formula {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 18px;
  overflow-x: auto;
  font-size: 1.12rem;
}
.formula .katex-display { margin: 0; }
.formula .cap { font-family: var(--f-display); font-size: var(--s-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.formula + .formula { margin-top: -4px; }
.formula .cap code, .eyebrow code { text-transform: none; letter-spacing: 0; }
.term { border-radius: 4px; transition: background-color .2s, color .2s; padding: 0 1px; }
.term.hl { background: var(--tag-bg); color: var(--tag); }
.terms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 4px 16px; }
.terms li {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: var(--s-sm);
  cursor: default;
}
.terms li:hover, .terms li:focus, .terms li.on { background: var(--tag-bg); }
.terms .sym { font-size: 1.02rem; white-space: nowrap; }
.read-aloud { font-size: var(--s-sm); color: var(--ink-2); background: var(--well); padding: 12px 14px; border-radius: var(--radius); }
.read-aloud b { color: var(--ink); }

/* Symbol tables: every symbol of a formula, how to say it, what it means and where its
   value comes from (the kind pill), so a learner never meets an unexplained letter. */
.symtab-box { display: grid; gap: 8px; min-width: 0; }
.symtab-box > .eyebrow { margin: 0; }
.symtab { border-collapse: collapse; width: 100%; font-size: var(--s-sm); line-height: 1.55; }
.symtab th {
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--s-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--well);
}
.symtab td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.symtab tr:last-child td { border-bottom: 0; }
.symtab td.sym { width: 1%; white-space: nowrap; font-size: 1rem; }
.symtab td.sym small { display: block; margin-top: 3px; font-family: var(--f-display); font-size: var(--s-xs); color: var(--ink-3); white-space: normal; max-width: 190px; }
.symtab tr[data-term] { cursor: default; }
.symtab tr[data-term]:hover td, .symtab tr[data-term]:focus td, .symtab tr.on td { background: var(--tag-bg); }
.symtab tr.group td { background: var(--well); font-family: var(--f-display); font-size: var(--s-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 6px 12px; }
.symtab.compact { font-size: 0.84rem; }
.symtab.compact td { padding: 6px 12px; }
.symtab.compact td.sym { font-size: 0.94rem; }
.kind {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.65;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
  background: var(--well);
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.kind.data { background: var(--prompt-bg); color: var(--prompt); border-color: transparent; }
.kind.trained { background: var(--answer-bg); color: var(--answer); border-color: transparent; }
.kind.frozen { background: var(--teacher-bg); color: var(--teacher); border-color: transparent; }
.kind.setting { background: var(--tag-bg); color: var(--tag); border-color: transparent; }
.kind.result { background: var(--surface); color: var(--ink); }
@media (max-width: 600px) {
  .symtab thead { display: none; }
  .symtab tr { display: block; border-bottom: 1px solid var(--rule); }
  .symtab tr:last-child { border-bottom: 0; }
  .symtab td { display: block; border-bottom: 0; }
  .symtab td.sym { width: auto; padding-bottom: 0; overflow-x: auto; }
  .symtab td.sym small { max-width: none; }
}
.need { font-size: var(--s-sm); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--answer); padding: 10px 14px; border-radius: var(--radius); }
.need b { color: var(--ink); }
.how { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.how > .eyebrow { margin: 0; }
.how-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 9px; font-size: 0.95rem; }
.how-steps li::marker { font-family: var(--f-mono); font-weight: 700; color: var(--answer); }
.how .numbers { margin-top: 2px; }
.how > .prose { font-size: 0.95rem; }
.how h5 { margin-top: 4px; }
.how .sub { font-family: var(--f-display); font-weight: 600; font-size: var(--s-sm); color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--rule); }
/* Says which unit a loss formula is written for (one row, one pair, the whole set); the dashed edge echoes one row of a batch grid. */
.scope { font-size: var(--s-sm); color: var(--ink-2); padding: 10px 14px; border: 1.5px dashed var(--answer); border-radius: var(--radius); }
.scope b { color: var(--ink); }
.scope-tag { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 700; background: var(--answer); color: var(--on-accent); white-space: nowrap; }
/* Station 7: the five stages of one training step, then one numbered part per stage. */
.step-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.step-flow .sf { position: relative; display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); font-size: var(--s-xs); line-height: 1.45; color: var(--ink-2); }
.step-flow .sf b { font-family: var(--f-display); font-size: var(--s-sm); color: var(--ink); }
.step-flow .sf:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -13px; transform: translateY(-50%); color: var(--ink-3); }
.sf-n, .gh-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--answer); color: var(--on-accent); font-family: var(--f-mono); font-size: 0.72rem; font-weight: 700; flex: none; }
.gpu-how { border-left: 4px solid var(--answer); }
.gpu-how h5 { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.gpu-how h5:first-child { margin-top: 0; }
.gpu-list { margin: 0; padding-left: 1.2em; display: grid; gap: 7px; font-size: 0.95rem; }
/* Station 7's "One step, slope by slope": which slopes one training step makes, what data each
   needs, and that they add into each weight before the one update. Bolder edge than .how: it is
   the part a reader must not skip. */
.slope-step { display: grid; gap: 10px; background: var(--surface); border: 2px solid var(--answer); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.slope-step > .eyebrow { margin: 0; color: var(--answer); }
.slope-step > .prose { font-size: 0.95rem; }
.slope-step .numbers { margin: 0; }
@media (max-width: 860px) {
  .step-flow { grid-template-columns: minmax(0, 1fr); }
  .step-flow .sf:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -15px; left: 50%; transform: translateX(-50%); }
}
details.sym-details { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
details.sym-details > summary { cursor: pointer; padding: 8px 12px; font-family: var(--f-display); font-size: var(--s-sm); color: var(--ink-2); }
details.sym-details[open] > summary { border-bottom: 1px solid var(--rule); }
details.sym-details .symtab { font-size: 0.84rem; }
.kinds-key { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: var(--s-xs); color: var(--ink-2); }
.kinds-key .kind { margin-right: 4px; }

.math-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 22px; }
.math-steps > li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.math-steps > li::before {
  content: counter(step);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: var(--s-xs);
  font-weight: 700;
}
.math-steps > li > div { display: grid; gap: 10px; min-width: 0; }
.math-steps h5 { font-size: var(--s-md); }
.math-steps .sub {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--s-sm);
  color: var(--ink-2);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.math-steps .loss { gap: 12px; }
.numbers {
  background: var(--well);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}
.mtable { border-collapse: collapse; font-size: var(--s-sm); font-variant-numeric: tabular-nums; }
.mtable th, .mtable td { padding: 6px 12px; border-bottom: 1px solid var(--rule); text-align: left; }
.mtable th { font-family: var(--f-display); font-size: var(--s-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.mtable td.r { text-align: right; font-family: var(--f-mono); }
.mtable tr.hl td { background: var(--answer-bg); }

/* ---------- pitfalls ---------- */
.catches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.catches li { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); display: grid; gap: 6px; align-content: start; font-size: var(--s-sm); }
.catches li h5 { font-size: var(--s-md); }
.libline { font-size: var(--s-sm); color: var(--ink-2); }

/* ---------- cards used inside labs ---------- */
.cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.cand {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  font-size: var(--s-sm);
  transition: opacity .25s, border-color .25s, background .25s;
  background: var(--surface);
  align-content: start;
}
.cand .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 0.72rem; padding: 2px 7px; border-radius: 999px; background: var(--well); color: var(--ink-2); white-space: nowrap; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.tea { background: var(--teacher-bg); color: var(--teacher); }
.pill.tag { background: var(--tag-bg); color: var(--tag); }
.pill.acc { background: var(--answer-bg); color: var(--answer); }
.cand.kept { border-color: var(--answer); border-width: 1.5px; }
.cand.dropped { opacity: 0.42; }
.cand .truth { display: none; }
.show-truth .cand .truth { display: inline-flex; }

/* blocks used in the context and curriculum labs */
.blocks { display: grid; gap: 8px; }
.block-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.block-row .bt { font-family: var(--f-display); font-weight: 600; font-size: var(--s-sm); }
.block-row .bs { font-size: var(--s-xs); color: var(--ink-2); }
.block-row.baked { background: var(--teacher-bg); border-color: var(--teacher); }
.block-row .bw { grid-column: 1 / -1; font-size: var(--s-xs); color: var(--bad); }
.strip { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; }
.strip > span { height: 34px; border-radius: 3px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.72rem; color: var(--on-accent); transition: background-color .3s; }
.strip > .mark {
  border-top: 2px solid var(--ink-3);
  padding-top: 3px;
  margin-top: 4px;
  font-family: var(--f-display);
  font-size: var(--s-xs);
  color: var(--ink-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip > .mark + .mark { margin-left: 3px; }
.strip > .mark.final { border-color: var(--answer); color: var(--answer); font-weight: 600; margin-left: 0; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 600px) {
  .pipeline li { grid-template-columns: 26px minmax(0, 1fr); }
  .pipeline li > :last-child { grid-column: 2; justify-self: start; }
}

.foot { padding-block: 40px 60px; color: var(--ink-2); font-size: var(--s-sm); }

/* stacking pipeline in the closing band */
.pipeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: pl; }
.pipeline li {
  counter-increment: pl;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: var(--s-sm);
}
.pipeline li::before { content: counter(pl); font-family: var(--f-mono); font-weight: 700; color: var(--ink-3); }
.pipeline li .tchip { cursor: pointer; }
.pipeline li.opt-step { border-style: dashed; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .tech > .wrap { padding-block: 44px 52px; gap: 44px; }
  .tech-head { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: minmax(64px, 96px) minmax(0, 1fr) 52px; }
}

/* ---------- preference family ----------
   Chosen = good (green), rejected = bad (red), reference model = violet. */
table.batch td.g { background: color-mix(in srgb, var(--good-bg) 60%, transparent); }
table.batch td.b { background: color-mix(in srgb, var(--bad-bg) 60%, transparent); }
.inline-tok.g { background: var(--good-bg); color: var(--good); }
.wbadge.q { border-color: var(--tag); color: var(--tag); background: var(--tag-bg); }
/* Here a highlighted card means "this technique changes the answer", not a weakness. */
.weak.q .wk.on { border-color: var(--tag); background: var(--tag-bg); }

/* step and session blocks in the step-level and trajectory labs */
.seq-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 700px) { .seq-cols { grid-template-columns: 1fr; } }
.seq { display: grid; gap: 6px; align-content: start; min-width: 0; }
.seq > .eyebrow { margin-bottom: 2px; }
.stp {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--rule);
  background: var(--surface);
  font-size: var(--s-sm);
  overflow-wrap: anywhere;
  transition: background-color .25s, border-color .25s, opacity .25s;
}
.stp small { font-family: var(--f-display); font-size: var(--s-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.stp code { background: none; padding: 0; }
.stp.up { background: var(--good-bg); border-color: var(--good); }
.stp.down { background: var(--bad-bg); border-color: var(--bad); }
.stp.ctx { background: var(--prompt-bg); border-color: transparent; }
.stp.obs { background: var(--well); border-style: dashed; border-color: var(--prompt); color: var(--ink-2); }
.stp.same { background: var(--well); border-color: var(--ink-3); border-style: dashed; }
.stp.off { opacity: 0.38; border-style: dotted; }
.stp .flag { color: var(--bad); font-weight: 700; }

/* KTO cards: one labelled answer each, with its probability against the reference */
.cand .mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cand .mini .bar-track { height: 12px; }
.cand .mini .bv { font-family: var(--f-mono); font-size: 0.74rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cand button.pill { border: 0; cursor: pointer; }
.cand.good-row { border-color: var(--good); }
.cand.bad-row { border-color: var(--bad); }

/* a decision list: same look as the pipeline, but the items are choices, not an order */
.pipeline.choose li::before { content: "→"; }