/* How a Model Gets Made: the mockup's own styles (docs/training/how-a-model-gets-made/template.html,
   PR #38), ported near verbatim. Mode classes (shared/Modes.js) still land on <body> as on every
   other page, but nothing here keys off them yet: the mockup's own media queries already cover the
   phone layout, and `.present` (Task 9's walkthrough) covers presentation. */
:root {
  --here: #dc2626;
  --bg: #ffffff; --bg-alt: #f6f6f7; --bg-soft: #f3f4f6;
  --text-1: #3c3c43; --text-2: #67676c; --text-3: #929295;
  --divider: #e2e2e3; --ink: #000000;
  --bar-net: #3c3c43; --bar-voc: #b8b8bd;
  --kept: #1a7f37; --worse: #b45309; --band: rgba(60, 60, 67, 0.2); --copied: #fde68a; --loop: #6b46c1;
  --switch-bg: rgba(142, 150, 170, 0.14); --switch-border: #c2c2c4; --knob: #ffffff;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1b1f; --bg-alt: #161618; --bg-soft: #202127;
    --text-1: #dfdfd6; --text-2: #98989f; --text-3: #6a6a71;
    --divider: #2e2e32; --ink: #ffffff;
    --bar-net: #dfdfd6; --bar-voc: #55555c;
    --kept: #3fb950; --worse: #f0a95a; --band: rgba(223, 223, 214, 0.2); --copied: rgba(250, 204, 21, 0.3); --loop: #b794f4;
    --switch-bg: rgba(101, 117, 133, 0.16); --switch-border: #3c3f44; --knob: #000000;
    --here: #f87171;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --here: #f87171;
  --bg: #1b1b1f; --bg-alt: #161618; --bg-soft: #202127;
  --text-1: #dfdfd6; --text-2: #98989f; --text-3: #6a6a71;
  --divider: #2e2e32; --ink: #ffffff;
  --bar-net: #dfdfd6; --bar-voc: #55555c;
  --kept: #3fb950; --worse: #f0a95a; --band: rgba(223, 223, 214, 0.2); --copied: rgba(250, 204, 21, 0.3); --loop: #b794f4;
  --switch-bg: rgba(101, 117, 133, 0.16); --switch-border: #3c3f44; --knob: #000000;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.6 var(--font); color: var(--text-1); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* The site's top bar */
.topbar { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--divider); background: var(--bg); }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; font-weight: 600; text-decoration: none; color: var(--text-1); white-space: nowrap; }
.brand .mark { flex: none; width: 24px; height: 24px; }
.brand .here { overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--text-2); }
.brand .sep { color: var(--text-3); font-weight: 400; }
.bar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bar a { padding: 0 12px; font-size: 14px; font-weight: 500; line-height: 64px; text-decoration: none; white-space: nowrap; }
.bar a:hover { color: var(--text-2); }
.ext { width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; fill: none; stroke: var(--text-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.switch { position: relative; flex: none; width: 40px; height: 22px; padding: 0; border: 1px solid var(--switch-border); border-radius: 11px; background: var(--switch-bg); cursor: pointer; }
.knob { position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transition: transform 0.25s; }
.switch[aria-checked="true"] .knob { transform: translateX(18px); }

/* The page column */
.page { max-width: 1440px; margin: 0 auto; padding: 40px 20px 96px; }
.intro h1 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--text-1); }
.intro p { max-width: 66ch; margin: 10px 0 0; font-size: 17px; line-height: 28px; color: var(--text-2); }
.intro p strong { font-weight: 600; color: var(--text-1); }

.tabs { display: flex; align-items: flex-end; gap: 24px; margin-top: 28px; overflow-x: auto; border-bottom: 1px solid var(--divider); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tablist { display: flex; align-items: flex-end; gap: 24px; }
.tab { display: inline-flex; flex: none; align-items: center; gap: 8px; margin-bottom: -1px; padding: 10px 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; font-size: 15px; font-weight: 500; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.tab:hover { color: var(--text-1); }
.tab[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }
.tab .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 600; line-height: 1; }
.tab-sep { flex: none; align-self: center; width: 1px; height: 20px; background: var(--divider); }
.tab.out { margin-left: auto; }
a.tab { text-decoration: none; }
.tab.out.pending, .tab.out.pending:hover { color: var(--text-3); cursor: help; }
/* A tab not open yet (index.html data-later; page.js isLater): greyed out. */
.tab[data-later], .tab[data-later]:hover { color: var(--text-3); background: none; cursor: help; }
.soon { padding: 1px 6px; border: 1px solid var(--divider); border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--text-2); }
/* The rail's two parts (TJ, 2026-10-22): a small heading over each, set like the rail's own control
   labels (DATASET, SENTENCE: .panel-controls label, below). In the narrow tab strip it sits among the
   tabs on one line; in the rail's column it heads its part, and a long one wraps evenly. */
.rail-part { flex: none; align-self: center; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }

/* The workspace: the rail of tabs and controls beside the content */
.workspace { margin-top: 28px; }
.rail-controls { display: grid; gap: 14px; margin-top: 16px; }
.panel-controls { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.panel-controls .control { margin: 0; }
.rail-controls, .panel-controls, .panel-controls .control { min-width: 0; }
.panel-controls .select-wrap { flex: 1 1 100%; min-width: 0; }
.panel-controls .select-wrap select { width: 100%; min-width: 0; }
.fold { margin-top: 44px; border-top: 1px solid var(--divider); }
.fold > summary { padding: 14px 0 4px; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .sub { margin: 0; }
.fold > summary .sub::before { content: "▸"; display: inline-block; width: 18px; color: var(--text-3); }
.fold[open] > summary .sub::before { content: "▾"; }
.fold > summary small { display: block; max-width: 80ch; margin: 4px 0 0 18px; font-size: 14px; line-height: 22px; color: var(--text-2); }
.fold[open] > summary small { display: none; }
.fold > .bars, .fold > .calc { margin-left: 18px; }
.fold > .note { margin-left: 18px; }
#lib_status { margin-top: 32px; }
@media (min-width: 1000px) {
  .workspace { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 0 44px; align-items: start; }
  .intro { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 8px 44px; align-items: start; }
  .intro h1 { font-size: 28px; line-height: 1.25; }
  .intro p { max-width: 80ch; margin-top: 4px; }
  .intro > p { grid-column: 2; }
  .intro h1 { grid-row: span 2; }
  .main { min-width: 0; }
  .rail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 4px 6px 12px 0; }
  .tabs { flex-direction: column; align-items: stretch; gap: 0; margin-top: 0; border-bottom: 0; overflow: visible; }
  .tablist { flex-direction: column; align-items: stretch; gap: 0; }
  .tab { justify-content: flex-start; margin: 0; padding: 8px 10px; border: 0; border-left: 2px solid transparent; border-radius: 0; white-space: normal; text-align: left; line-height: 1.3; }
  .tab:hover { background: var(--bg-soft); }
  .tab[aria-selected="true"] { border-left-color: var(--ink); background: var(--bg-soft); }
  .tab .n { flex: none; }
  .tab-sep { width: auto; height: 1px; margin: 8px 10px; }
  .rail-part { align-self: stretch; padding: 4px 12px 6px; line-height: 1.35; white-space: normal; text-wrap: balance; }
  .tab.out { margin: 4px 0 0; }
  .tab.out.pending:hover { background: none; }
  .rail-controls { margin-top: 20px; gap: 18px; }
  .panel-controls { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
  .panel-controls .control { flex-direction: column; align-items: stretch; gap: 6px; }
  .panel-controls .control > span:first-child, .panel-controls label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
  .panel-controls .seg { display: flex; flex-direction: column; }
  .panel-controls .seg button { border-left: 0; border-top: 1px solid var(--divider); text-align: left; }
  .panel-controls .seg button:first-child { border-top: 0; }
  .panel-controls .select-wrap, .panel-controls select { width: 100%; }
  /* In the rail's column a basis of 100% would be a height, and the controls would wrap into columns side by side. */
  .panel-controls .select-wrap { flex: none; }
  .panel-controls .linkish { align-self: flex-start; }
  .panel { padding-top: 0; }
  .hint, .note { max-width: 80ch; }
}

/* Shared parts of every tab */
.panel { padding-top: 32px; }
.question { max-width: 32ch; margin: 0; font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.lede { max-width: 66ch; margin: 12px 0 0; line-height: 28px; }
.lede a { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sub { margin: 48px 0 0; font-size: 18px; font-weight: 600; line-height: 28px; color: var(--text-1); }
.hint { max-width: 66ch; margin: 4px 0 0; font-size: 14px; line-height: 22px; color: var(--text-2); }
.note { max-width: 70ch; margin: 14px 0 0; font-size: 14px; line-height: 22px; color: var(--text-2); }
.conditions { max-width: 66ch; margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--text-2); }
/* An in-page link inside a sentence (the Autoresearch tab's step links) reads at that sentence's own
   size and weight, as a link in a lede does; code there in the page's mono. */
.lede .linkish, .note .linkish, .terms .linkish, .scale .linkish { font: inherit; }
.lede code, .note code, .terms code, .scale code { font: .92em var(--mono); }

/* The Autoresearch tab (part two's first): the list under its intro ties each term to part one's
   steps, in tab 3's .impact type. Its three time scales are the session map's .scales cards in the
   page's greys, their top edges weighted as the full diagram weighs its lines: heaviest for a run,
   lightest for the session around it, you between. */
.scales { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 980px; margin-top: 16px; }
.scale { min-width: 0; padding: 14px 16px; border: 1px solid var(--divider); border-top: 4px solid var(--scale); border-radius: 10px; }
.scale.s-run { --scale: var(--ink); }
.scale.s-session { --scale: var(--text-3); }
.scale.s-you { --scale: var(--text-2); }
.scale h4 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.scale p { margin: 6px 0 0; font-size: 14px; line-height: 22px; }
/* Part two's title, for the walkthrough's divider slide only (present.js; shown big below, under
   Presentation, beside the page's own opening). */
.part-intro { display: none; }

/* Tab 5's loop: one SVG drawing of how the agent works through any session, with no run length and
   no count — a wide one, and under 700 px a narrow one drawn top to bottom — ported from the mockup
   TJ approved on 2026-10-22. Every rule for the drawing is scoped to .loop: tab 3's model drawing
   has a .node of its own. The "Full diagram" button floats in the top-right corner, so the line
   above the drawing wraps around it at any width. */
.loop { position: relative; max-width: 980px; margin: 20px 0 0; padding: 14px 16px 12px; border: 1px solid var(--divider); border-radius: 12px; background: var(--bg-soft); }
.loop-pre { max-width: 80ch; margin: 0 0 6px; font-size: 14px; line-height: 22px; color: var(--text-2); }
.loop > svg { clear: both; display: block; width: 100%; height: auto; }
.loop .narrow { display: none; }
@media (max-width: 700px) { .loop .wide { display: none; } .loop .narrow { display: block; max-width: 380px; margin: 0 auto; } }
.loop-who { max-width: 90ch; margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--text-2); }
.loop-who code { font: .92em var(--mono); }
.loop .node { fill: var(--bg); stroke: var(--divider); stroke-width: 1.2; }
.loop .node-first { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 5 4; }
.loop .node-better { fill: var(--bg); stroke: var(--loop); stroke-width: 1.6; }
.loop .n-h { font: 600 15px var(--font); fill: var(--text-1); }
.loop .n-t { font: 13px var(--font); fill: var(--text-2); }
.loop .n-keep { font: 600 13px var(--font); fill: var(--kept); }
.loop .n-undo { font: 13px var(--font); fill: var(--text-2); }
.loop .step-arrow { fill: none; stroke: var(--text-3); stroke-width: 1.6; }
.loop .back { fill: none; stroke: var(--loop); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.loop .back-flow { fill: none; stroke: var(--bg-soft); stroke-width: 4; stroke-dasharray: 2 22; stroke-linecap: round; animation: loop-flow 1.6s linear infinite; }
@keyframes loop-flow { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .loop .back-flow { animation: none; display: none; } }
.loop .back-label { font: 700 15px var(--font); fill: var(--loop); }
.loop .back-sub { font: 13px var(--font); fill: var(--text-2); }
.loop .mk-step { fill: var(--text-3); } .loop .mk-loop { fill: var(--loop); }

/* The button that opens the full diagram, and the one that closes it. */
.expand { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--divider); border-radius: 8px; background: var(--bg); font: 500 13px var(--font); color: var(--text-1); cursor: pointer; }
.expand:hover { border-color: var(--text-3); }
.expand svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.loop .expand { float: right; margin: -4px -6px 8px 14px; }

/* Tab 5's full diagram (#re_full): the session map's workflow drawing in a modal <dialog>, full
   screen over the page. The drawing fits the window; below about 900 px it scrolls sideways
   ("safe" keeps its left edge reachable). In the walkthrough it stops above the walkthrough's own
   bar, which a transparent backdrop leaves in sight. While it is open the page behind cannot
   scroll, so closing it returns the reader to where they were. */
.full-map { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; display: grid; grid-template-rows: auto 1fr; background: var(--bg); color: var(--text-1); }
.full-map:not([open]) { display: none; }
.full-map::backdrop { background: transparent; }
.present .full-map { bottom: 72px; }
:root:has(.full-map[open]) { overflow: hidden; }
.full-map .overlay-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--divider); }
.full-map .overlay-bar h3 { margin: 0; font-size: 16px; font-weight: 600; }
.full-map .overlay-hint { margin-left: auto; font-size: 13px; color: var(--text-3); }
.full-map .overlay-body { min-height: 0; overflow: auto; padding: 12px 16px 16px; display: grid; place-items: safe center; }
.full-map .overlay-body svg { width: 100%; height: 100%; max-height: calc(100vh - 80px); min-width: 900px; }
/* The session map's own drawing, every rule scoped to .full-map so its short class names (.t, .box,
   .f, .div …) cannot meet the page's own. Greyscale (TJ: "greyscales and line weight might be a
   better hierarchy"): heaviest, the loop the agent runs (its boxes and arrows); then you and the
   session's end; lightest, the session frame, the record and the side paths (a crash). */
.full-map {
  --surface: #ffffff; --ink: #1c1c1e; --muted: #5f5f64; --line: #d4d4d8;
  --strong: #1c1c1e; --mid: #75757a; --soft: #a8a8ad;
  --body: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif; --display: var(--body); --mono2: ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .full-map {
    --surface: #1b1b1f; --ink: #ececee; --muted: #a1a1a6; --line: #36363b;
    --strong: #f2f2f4; --mid: #9a9aa0; --soft: #64646a;
  }
}
:root[data-theme="dark"] .full-map {
  --surface: #1b1b1f; --ink: #ececee; --muted: #a1a1a6; --line: #36363b;
  --strong: #f2f2f4; --mid: #9a9aa0; --soft: #64646a;
}
.full-map .fr { fill: none; stroke: var(--soft); stroke-width: 1; stroke-dasharray: 6 5; }
.full-map .box { fill: var(--surface); stroke: var(--soft); stroke-width: 1; }
.full-map .bx-agent, .full-map .bx-train { stroke: var(--strong); stroke-width: 1.8; }
.full-map .bx-person, .full-map .bx-runner { stroke: var(--mid); stroke-width: 1.2; }
.full-map .bx-record { fill: var(--surface); stroke: var(--soft); stroke-width: 1; stroke-dasharray: 4 4; }
.full-map .div { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.full-map .t { font: 14px var(--body); fill: var(--ink); }
.full-map .tb { font: 700 14px var(--body); fill: var(--ink); }
.full-map .ts { font: 12.5px var(--body); fill: var(--muted); }
.full-map .tw { font: 12.5px var(--body); fill: var(--ink); }
.full-map .tm { font: 11.5px var(--mono2); fill: var(--muted); }
.full-map .th { font: 700 18px var(--display); fill: var(--ink); }
.full-map .lab { font: 700 10.5px var(--body); letter-spacing: 0.09em; }
.full-map .c-agent, .full-map .c-person, .full-map .c-runner, .full-map .c-train, .full-map .c-muted, .full-map .c-record { fill: var(--muted); }
.full-map .ch-record { fill: var(--strong); } .full-map .ch-laptop { fill: var(--soft); }
.full-map .cht { font: 700 9.5px var(--body); letter-spacing: 0.05em; fill: var(--surface); }
.full-map .mid { text-anchor: middle; } .full-map .end { text-anchor: end; }
.full-map .f { fill: none; stroke: var(--mid); stroke-width: 1.5; stroke-linejoin: round; }
.full-map .f-agent, .full-map .f-train { stroke: var(--strong); stroke-width: 2.6; }
.full-map .f-ink, .full-map .f-person { stroke: var(--mid); stroke-width: 1.6; }
.full-map .f-agent.f-dash { stroke: var(--mid); stroke-width: 1.3; stroke-dasharray: 5 5; }
.full-map .mk-agent, .full-map .mk-train { fill: var(--strong); } .full-map .mk-ink, .full-map .mk-person { fill: var(--mid); }
/* The loop's own way back, from the time check to Change, as heavy as the small one's. */
.full-map .loop-strong { stroke-width: 4 !important; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 22px; }
.control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 14px; color: var(--text-2); }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--divider); border-radius: 8px; overflow: hidden; }
.seg button { padding: 6px 12px; border: 0; border-left: 1px solid var(--divider); background: var(--bg); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--bg-soft); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button:disabled { color: var(--text-3); cursor: default; }
.select-wrap { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.select-wrap select { max-width: 100%; padding: 7px 36px 7px 12px; border: 1px solid var(--divider); border-radius: 8px; background: var(--bg); font-size: 14px; font-weight: 500; color: var(--text-1); appearance: none; cursor: pointer; text-overflow: ellipsis; }
.select-wrap select:hover { border-color: var(--text-3); }
.select-wrap::after { content: ""; position: absolute; top: 50%; right: 14px; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg); pointer-events: none; }
.linkish { padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.btn { padding: 6px 12px; border: 1px solid var(--divider); border-radius: 8px; background: var(--bg); font-size: 14px; font-weight: 500; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--text-3); }
.btn:disabled { color: var(--text-3); cursor: default; }
.btn.primary { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* Text side by side, in rows that line up opening by opening */
.copied-key { margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
mark { padding: 1px 0; border-radius: 2px; background: var(--copied); color: inherit; }
.partial-mark { color: var(--text-3); }
.cols, .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.cols.n3, .pair.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.cols { margin-top: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.col-head b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.col-head span { font-size: 13px; color: var(--text-2); }
.pair { padding: 18px 0; border-bottom: 1px solid var(--divider); }
.cell { min-width: 0; }
.cell p { margin: 0; line-height: 28px; white-space: pre-line; overflow-wrap: anywhere; }
.cell p b, .moment p b { font-weight: 600; color: var(--ink); }
.cell .tag { display: none; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.pair.loose .cell .tag { display: block; }
@media (max-width: 819px) {
  .cols.n3 { display: none; }
  .pair.n3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pair.n3 .cell .tag { display: block; }
}
@media (max-width: 719px) {
  .cols { display: none; }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cell .tag { display: block; }
}

/* 1 The dataset */
.ds-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
@media (max-width: 719px) { .ds-cards { grid-template-columns: minmax(0, 1fr); } }
.dscard { min-width: 0; padding: 20px 22px; border: 1px solid var(--divider); border-radius: 12px; }
.dscard h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.dscard .about { margin: 2px 0 0; font-size: 15px; color: var(--text-2); }
.dscard .fact { margin: 10px 0 0; font-size: 14px; line-height: 22px; color: var(--text-2); }
.dscard .fact b { margin-right: 6px; font-weight: 600; color: var(--text-1); }
.dscard .fact a { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kv { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; }
.kv dt { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.kv dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--text-1); }
.excerpt { margin: 16px 0 0; }
.excerpt figcaption { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.excerpt blockquote { margin: 6px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--bg-soft); font-size: 15px; line-height: 25px; white-space: pre-line; }

/* TJ's lecture (2026-10-26): the intro's scope line, the three steps, the sources in tab 1, the tokenized
   dataset in tab 2, the transformer in tab 3, and tabs 5 to 7. */
.intro .scope { max-width: 66ch; margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--text-3); }
.three { max-width: 760px; margin: 16px 0 0; padding: 0 0 0 22px; }
.three li { margin: 10px 0 0; line-height: 26px; }
.three li::marker { font-weight: 600; color: var(--text-2); }
.three b { font-weight: 600; color: var(--ink); }
.three .linkish { font: inherit; }
/* A source as the source shows it (TJ, 2026-10-26): a screenshot, linked full size, captioned with its source. */
.shots.n3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; max-width: 1100px; }
@media (max-width: 959px) { .shots.n3 { grid-template-columns: minmax(0, 1fr); } }
.shot { margin: 14px 0 0; max-width: 1100px; }
.shot img, .paper-fig img { display: block; max-width: 100%; height: auto; border: 1px solid var(--divider); border-radius: 6px; }
.shot figcaption { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--text-2); }
.shot figcaption b { color: var(--text-1); }
.tokchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tokchip { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 8px; border: 1px solid var(--divider); border-radius: 6px; background: var(--bg-soft); }
.tokchip .t { font: 15px/22px var(--mono); white-space: pre; color: var(--ink); }
.tokchip .id { font-size: 12px; color: var(--text-2); }
.paper-fig { margin: 18px 0 0; max-width: 760px; }
.paper-fig figcaption { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--text-2); }
.chatml { max-width: 760px; margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--bg-soft); font: 15px/24px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.stage-row { padding: 14px 0 0; }
.stage-prompt { margin: 0; }
.stage-prompt .why { display: block; font-size: 13px; color: var(--text-2); }
.stage-prompt code { display: block; margin-top: 4px; font: 14px/22px var(--mono); white-space: pre-wrap; color: var(--ink); }
.stage-row .pair { padding-top: 10px; }
.cell .end { font-style: italic; color: var(--text-2); }
.facts.rows td { white-space: pre-line; }
.facts code { font: .92em var(--mono); }
.frontier { max-width: 76ch; margin: 14px 0 0; padding-left: 22px; }
.frontier li { margin: 8px 0 0; line-height: 26px; }
.frontier b { font-weight: 600; color: var(--ink); }

/* 2 The vocabulary */
.table-wrap { margin-top: 22px; overflow-x: auto; }
table.facts { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.facts th { padding: 8px 12px; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; color: var(--text-2); vertical-align: bottom; }
.facts td { padding: 10px 12px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.facts .r { text-align: right; }
.facts td small { display: block; font-size: 12px; color: var(--text-2); }
.facts tr.on td { background: var(--bg-soft); }
.facts tr.pick { cursor: pointer; }
.facts tr.pick:hover td { background: var(--bg-alt); }
.best-tag { margin-left: 6px; padding: 0 6px; border: 1px solid var(--kept); border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--kept); }
.better { color: var(--kept); font-weight: 600; }
.worse { color: var(--worse); font-weight: 600; }
.splits { display: grid; gap: 0; margin-top: 16px; }
.split-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 90px; gap: 6px 20px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.split-row .who { font-size: 14px; font-weight: 600; color: var(--text-1); }
.split-row .count { font-size: 14px; color: var(--text-2); text-align: right; }
@media (max-width: 719px) { .split-row { grid-template-columns: minmax(0, 1fr) auto; } .split-row .chips { grid-column: 1 / -1; grid-row: 2; } }
.facts.narrow { min-width: 480px; }
.bars { display: grid; gap: 10px; max-width: 760px; margin-top: 18px; }
.bar-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 100px; gap: 6px 14px; align-items: center; font-size: 14px; }
.bar-row .who { font-weight: 600; color: var(--text-1); }
.track { display: flex; height: 14px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.track i { display: block; height: 100%; }
.track .net, .bar-key .net { background: var(--bar-net); }
.track .voc, .bar-key .voc { background: var(--bar-voc); }
.bar-row .tot { text-align: right; font-weight: 600; color: var(--ink); }
.bar-key { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--text-2); }
.bar-key span { display: inline-flex; align-items: center; gap: 6px; }
.bar-key i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
@media (max-width: 719px) { .bar-row { grid-template-columns: minmax(0, 1fr) auto; } .bar-row .track { grid-column: 1 / -1; grid-row: 2; } }
.settings { max-width: 760px; margin: 14px 0 0; border-top: 1px solid var(--divider); }
.settings div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 20px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.settings dt { font-size: 14px; font-weight: 600; color: var(--ink); }
.settings dd { margin: 0; font-size: 15px; line-height: 22px; }
@media (max-width: 719px) { .settings div { grid-template-columns: minmax(0, 1fr); } }
.algo-wrap { display: grid; gap: 20px; margin-top: 18px; }
@media (min-width: 900px) { .algo-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } }
/* The Network view needs the full width, so the figure goes under train.py instead of beside it. */
@media (min-width: 900px) { .algo-wrap.view-network { grid-template-columns: minmax(0, 1fr); } }
.whole-fig .hint:first-of-type { margin-top: 0; }
.algo, .model-fig { min-width: 0; margin: 0; padding: 18px 20px; border: 1px solid var(--divider); border-radius: 12px; }
.algo figcaption, .model-fig figcaption { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.algo-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.algo-steps.outer { counter-reset: step; }
.algo-step { position: relative; padding-left: 34px; font-size: 15px; line-height: 23px; }
.algo-step b { font-weight: 600; color: var(--ink); }
.algo-step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--text-3); border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--text-2); }
.algo-loop { margin-top: 10px; padding: 14px 14px 12px; border: 1.5px dashed var(--text-3); border-radius: 10px; }
.algo-sub { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: sub; }
.algo-sub li { position: relative; padding-left: 28px; font-size: 15px; line-height: 23px; }
.algo-sub li::before { counter-increment: sub; content: counter(sub, lower-alpha); position: absolute; top: 2px; left: 0; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--bg-soft); font-size: 11px; font-weight: 600; color: var(--text-2); }
.algo-sub b { font-weight: 600; color: var(--ink); }
.loop-label { margin: 12px 0 0; font-size: 13px; line-height: 19px; color: var(--text-2); }
.loop-label::before { content: "↻ "; font-weight: 600; color: var(--ink); }
.model-fig .control { margin-bottom: 12px; }
.stack { display: grid; gap: 2px; }
.io, .blk { padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.io { background: var(--bg-soft); }
.io > span, .blk > span { display: block; color: var(--text-2); }
.io b, .blk > b { display: block; font-weight: 600; color: var(--ink); }
.io .chips { margin-top: 6px; }
.blk { border: 1px solid var(--divider); }
.blk.voc { border-left: 5px solid var(--bar-voc); }
.blk.net { border-left: 5px solid var(--bar-net); }
.blk em { display: block; margin-top: 6px; font-style: normal; font-weight: 600; color: var(--ink); }
.layers { display: grid; gap: 3px; margin-top: 8px; }
.layer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 4px 8px; border-radius: 4px; background: var(--bg-soft); font-size: 13px; }
.layer b { font-weight: 600; color: var(--text-1); }
.layer span { color: var(--text-2); }
.layer .vt { margin-left: auto; font-size: 12px; }
.arrow { font-size: 13px; line-height: 16px; text-align: center; color: var(--text-3); }
.stack-total { margin-top: 10px; font-size: 15px; font-weight: 600; text-align: right; color: var(--ink); }
a.code { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
a.code:hover { text-decoration-style: solid; text-decoration-color: var(--ink); }
.mdl { display: block; width: 100%; max-width: 400px; height: auto; margin: 6px auto 0; overflow: visible; }
.mdl .box { fill: var(--bg); stroke: var(--divider); stroke-width: 1; }
.mdl .io .box { fill: var(--bg-soft); stroke: none; }
.mdl .accent { fill: var(--bar-voc); }
.mdl .t { font-size: 13px; font-weight: 600; fill: var(--ink); }
.mdl .s { font-size: 11px; fill: var(--text-2); }
.mdl .sz { font-size: 12px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.mdl .total { font-size: 13px; font-weight: 700; fill: var(--ink); }
.mdl .times { font-size: 18px; font-weight: 700; fill: var(--ink); }
.mdl .edge { fill: none; stroke: var(--text-3); stroke-width: 1.3; }
.mdl .dash { stroke-dasharray: 4 3; }
.mdl .head { fill: var(--text-3); }
.mdl .layerbox { fill: none; stroke: var(--text-3); stroke-dasharray: 5 4; }
.mdl .plus circle { fill: var(--bg); stroke: var(--text-3); }
.mdl .ln { font-size: 12px; font-weight: 700; fill: var(--text-2); }
.mdl .pbox { fill: var(--bg-soft); stroke: none; }
.mdl .pt { font-size: 11px; font-weight: 600; fill: var(--ink); }
.mdl a:hover .pbox, .mdl a:focus-visible .pbox { stroke: var(--ink); stroke-width: 1.2; }
.mdl .plus text { font-size: 13px; font-weight: 600; fill: var(--text-2); }
.mdl a { cursor: pointer; }
.mdl a:focus { outline: none; }
.mdl a:hover .box, .mdl a:focus-visible .box { stroke: var(--ink); stroke-width: 1.5; }
.mdl a:hover .t, .mdl a:focus-visible .t { text-decoration: underline; }
.mdl-key { display: grid; gap: 3px 16px; margin: 14px 0 0; font-size: 13px; line-height: 19px; }
.mdl-key div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.mdl-key dt { font-weight: 600; color: var(--text-1); }
.mdl-key dd { margin: 0; color: var(--text-2); }
.netfig { display: block; width: 100%; max-width: 560px; height: auto; margin-top: 14px; overflow: visible; }
.netfig .link { stroke: var(--text-3); stroke-width: 0.8; opacity: 0.55; }
.netfig .unit { fill: var(--bg); stroke: var(--text-1); stroke-width: 1.4; }
.netfig .more { font-size: 16px; font-weight: 700; fill: var(--text-2); }
.netfig .lbl { font-size: 13px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.netfig .real { font-size: 16px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.netfig .what { font-size: 12px; fill: var(--text-2); }
.netfig .tok { font: 12px var(--mono); fill: var(--text-1); }
.netfig .chipbox { fill: var(--bg); stroke: var(--text-1); stroke-width: 1.2; }
.netfig .tbl { fill: var(--bg-soft); stroke: var(--text-3); }
.netfig .tline { stroke: var(--divider); }
.netfig .hit { fill: var(--bar-voc); }
.netfig .cell { fill: var(--bg); stroke: var(--text-3); }
.netfig .val { font: 11px var(--mono); fill: var(--ink); }
.netfig .edge { fill: none; stroke: var(--text-3); stroke-width: 1.3; }
.netfig .head { fill: var(--text-3); }
.nbrs { display: grid; gap: 8px; max-width: 760px; margin-top: 12px; }
.nbr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.nbr .to { color: var(--text-3); }
#rc_net .note { max-width: 70ch; }
.closeup { display: grid; gap: 20px; margin-top: 16px; }
@media (min-width: 820px) { .closeup { grid-template-columns: 190px minmax(0, 1fr); gap: 32px; align-items: start; } }
.closeup-detail { min-width: 0; }
.closeup-detail .netfig { margin-top: 0; }
.path { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px; border: 1px solid var(--divider); border-radius: 12px; }
.path-io { padding: 6px 10px; border-radius: 6px; background: var(--bg-soft); font-size: 13px; font-weight: 600; text-align: center; color: var(--text-1); }
.path-arrow { font-size: 12px; line-height: 14px; text-align: center; color: var(--text-3); }
.path-layers { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px 8px 8px; border: 1.5px dashed var(--text-3); border-radius: 10px; }
.path-tag { position: absolute; top: 5px; left: 10px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.path-part { padding: 7px 10px; border: 1px solid var(--divider); border-radius: 6px; background: var(--bg); font-size: 13px; font-weight: 600; color: var(--text-1); cursor: pointer; }
.path-part:hover:not([aria-pressed="true"]) { border-color: var(--text-3); }
.path-part[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
@media (max-width: 819px) {
  .path { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .path-arrow { transform: rotate(-90deg); }
  .path-layers { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 22px 8px 8px; }
}
.whole-scroll { margin-top: 16px; overflow-x: auto; }
.whole { display: block; width: 100%; min-width: 960px; height: auto; }
.whole .link { stroke: var(--text-3); stroke-width: 0.6; opacity: 0.45; }
.whole .link.on { stroke: var(--ink); opacity: 0.7; }
.whole .unit { fill: var(--bg); stroke: var(--text-1); stroke-width: 1.2; }
.whole .unit.on { fill: var(--ink); stroke: var(--ink); }
.whole .edge { fill: none; stroke: var(--text-3); stroke-width: 1.2; }
.whole .edge.on { stroke: var(--ink); }
.whole .dash { stroke-dasharray: 3 3; }
.whole .head { fill: var(--text-3); }
.whole .vt { fill: var(--bar-voc); }
.whole .vt.on { fill: var(--ink); }
.whole .chipbox { fill: var(--bg); stroke: var(--text-1); stroke-width: 1.2; }
.whole .chipbox.earlier { stroke: var(--text-3); stroke-dasharray: 3 2; }
.whole .chipbox.traced { stroke: var(--ink); stroke-width: 1.6; }
.whole .tok.faint { fill: var(--text-2); }
.whole .tok { font: 12px var(--mono); fill: var(--ink); }
.whole .tok.small { font-size: 10px; fill: var(--text-1); }
.whole .more { font-size: 14px; font-weight: 700; fill: var(--text-2); }
.whole .cnt { font-size: 11px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.whole .part { font-size: 12px; font-weight: 600; fill: var(--text-1); }
.whole .what { font-size: 11px; fill: var(--text-2); }
.whole .bracket { fill: none; stroke: var(--text-3); }
.whole .hitarea { fill: transparent; cursor: pointer; }
.whole .hitarea:hover { fill: var(--ink); fill-opacity: 0.04; }
.whole .hitarea:focus { outline: none; }
.whole .hitarea:focus-visible { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.inside { margin: 18px 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.explain { max-width: 760px; }
.mini { margin: 26px 0 0; font-size: 15px; font-weight: 600; color: var(--text-1); }
table.calc { width: 100%; max-width: 760px; margin-top: 18px; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.calc td { padding: 8px 0; border-bottom: 1px solid var(--divider); vertical-align: top; }
.calc td.r { padding-left: 16px; text-align: right; white-space: nowrap; font-weight: 600; color: var(--ink); }
.calc tr.sum td:first-child { color: var(--text-2); }
.impact { max-width: 760px; margin: 12px 0 0; padding-left: 20px; font-size: 15px; line-height: 24px; }
.impact li { margin: 8px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.chip { padding: 1px 6px; border: 1px solid var(--divider); border-radius: 4px; background: var(--bg); font: 13px/22px var(--mono); color: var(--text-1); white-space: pre; }
.chip.partial { border-style: dashed; color: var(--text-3); }

/* 3 Training time */
.timeline { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.moment { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--divider); }
.moment .when b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.moment .when span { font-size: 13px; line-height: 20px; color: var(--text-2); }
.moment p { margin: 0; line-height: 28px; white-space: pre-line; overflow-wrap: anywhere; }
.moment.end .when b::after { content: "end"; margin-left: 8px; padding: 0 6px; border: 1px solid var(--divider); border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--text-2); vertical-align: 2px; }
@media (max-width: 719px) { .moment { grid-template-columns: minmax(0, 1fr); } }

/* A run pinned by openTimeRun (training/src/tabTime.js), in place of the baseline browsing above. */
.pinned-run { margin: 18px 0 8px; }
.pinned-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.pinned-head h3 { margin: 0; }

/* One session ("Improving the recipe", tab 5, until 2026-10-22); its switch is an ordinary .panel-controls .control */
.answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 40px; margin: 26px 0 0; padding: 20px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.stat { display: grid; gap: 2px; margin: 0; }
.stat dt { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.stat dd { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.stat dd small { margin-left: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.answer p { flex: 1 1 32ch; min-width: 0; max-width: 60ch; margin: 0; line-height: 26px; }
.explore { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 1000px) { .explore { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }
.explore h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 28px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 6px; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { width: 22px; height: 16px; overflow: visible; }
#re_chart { position: relative; min-width: 0; }
#re_chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.grid { stroke: var(--divider); stroke-width: 1; }
.axis { stroke: var(--text-3); stroke-width: 1; }
.tick { font-size: 12px; fill: var(--text-2); }
.tick.on { font-weight: 700; fill: var(--ink); }
.ytitle { font-size: 12px; font-weight: 500; fill: var(--text-2); }
.bracket { fill: none; stroke: var(--text-3); stroke-width: 1; }
.group-label { font-size: 12px; fill: var(--text-2); }
.stair { fill: none; stroke: var(--kept); stroke-width: 2; }
.bandfill { fill: var(--band); }
.dot { cursor: pointer; }
.dot:focus { outline: none; }
.dot:focus-visible .hit { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 2; }
.hit { fill: transparent; }
.kept { fill: var(--kept); stroke: var(--kept); stroke-width: 1.5; }
.aside { fill: var(--bg); stroke: var(--text-3); stroke-width: 2; }
.ring-sel { fill: none; stroke: var(--ink); stroke-width: 2.25; }
.ring-ref { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.card { align-self: start; padding: 20px 22px; border: 1px solid var(--divider); border-radius: 12px; background: var(--bg); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--divider); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; color: var(--text-2); white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--text-3); border-radius: 50%; background: var(--bg); }
.pill.is-kept { border-color: var(--kept); color: var(--kept); }
.pill.is-kept::before { border-color: var(--kept); background: var(--kept); }
.score { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.score b { font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.score span { font-size: 13px; color: var(--text-2); }
.deltas { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 22px; }
.deltas .noise { color: var(--text-2); }
.card .facts { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.card h4 { margin: 18px 0 4px; font-size: 13px; font-weight: 600; color: var(--text-1); }
.card p { margin: 0; font-size: 15px; line-height: 24px; }
.card .define { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.agent-note { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--bg-soft); font: 13px/20px var(--mono); color: var(--text-1); overflow-wrap: anywhere; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--divider); }
.step { display: inline-flex; gap: 6px; }
.reading-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-top: 56px; }
.reading-head .sub { margin-top: 0; }

/* Your session */
.record { margin: 16px 0 0; padding: 0; border-top: 1px solid var(--divider); }
.record div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 20px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.record dt { font: 14px/22px var(--mono); color: var(--ink); }
.record dt.indent { padding-left: 18px; }
.record dd { margin: 0; font-size: 15px; line-height: 22px; }
@media (max-width: 719px) { .record div { grid-template-columns: minmax(0, 1fr); } }
.drop { display: grid; justify-items: center; gap: 10px; margin-top: 18px; padding: 28px 20px; border: 1.5px dashed var(--divider); border-radius: 12px; background: var(--bg-alt); text-align: center; }
.drop p { margin: 0; font-size: 15px; font-weight: 500; }
.drop small { max-width: 52ch; font-size: 13px; color: var(--text-2); }
.drop.over { border-color: var(--ink); }
details { margin-top: 16px; font-size: 14px; }
summary { cursor: pointer; color: var(--text-2); }
.gh { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gh input { flex: 1 1 260px; min-width: 0; padding: 7px 12px; border: 1px solid var(--divider); border-radius: 8px; background: var(--bg); font-size: 14px; }
.start-link { display: inline-block; margin-top: 22px; font-weight: 500; text-underline-offset: 3px; }

footer { display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: 1152px; margin: 0 auto; padding: 24px 20px 40px; border-top: 1px solid var(--divider); font-size: 14px; color: var(--text-2); }
footer a { color: var(--text-1); text-underline-offset: 3px; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 10; width: max-content; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 14px; line-height: 20px; transform: translateX(-50%); }

@media (min-width: 640px) {
  .topbar { padding-left: 32px; padding-right: 32px; }
  .page { padding: 48px 32px 96px; }
  footer { padding-left: 32px; padding-right: 32px; }
  .intro h1 { font-size: 32px; }
  .question { font-size: 30px; }
}
@media (max-width: 639px) {
  .bar a, .brand .home, .brand .sep { display: none; }
  .brand .here { color: var(--text-1); font-weight: 600; }
}
/* Presentation (the walkthrough, Task 9): toggled by the .present class on <body>, not by
   shared/Modes.js's mode-presentation class, which still applies for the mobile layout above. */
.present-btn { margin-left: 10px; vertical-align: middle; font-size: 13px; }
a.btn { display: inline-block; color: var(--text-1); text-decoration: none; line-height: normal; }
#slides_pdf { margin-left: 6px; }
.making { max-width: 760px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: mk; border-top: 1px solid var(--divider); }
.making li { counter-increment: mk; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--divider); font-size: 15px; line-height: 23px; }
.making li::before { content: counter(mk); font-size: 12px; font-weight: 600; color: var(--text-2); }
.making b { font-weight: 600; color: var(--ink); }
.making .later { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.making .linkish { white-space: nowrap; }

/* The three stages of training (docs/training/three-training-stages/, drawn by its build.py for the
   slides), inlined small under the note on Building a model, a footnote's figure, with its colours as
   the page's tokens so it follows the theme. Every class is sg- because .card, .node and .edge mean
   other things here. A click opens it full size (.stages-full, the full diagram's dialog styles). */
.stages { max-width: 520px; margin: 8px 0 0; }
.stages-open { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; background: none; cursor: zoom-in; }
.stages-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.stages-open > svg { display: block; width: 100%; height: auto; }
.stages-full .overlay-body svg { height: auto; }
:is(.stages, .stages-full) text { font-family: var(--font); fill: var(--text-1); }
:is(.stages, .stages-full) .sg-n { font-size: 12px; font-weight: 600; }
:is(.stages, .stages-full) .sg-title { font-size: 19px; font-weight: 600; fill: var(--ink); letter-spacing: -0.01em; }
:is(.stages, .stages-full) .sg-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; fill: var(--text-2); }
:is(.stages, .stages-full) .sg-example { font-family: var(--mono); font-size: 13px; }
:is(.stages, .stages-full) .sg-value { font-size: 14px; font-weight: 600; }
:is(.stages, .stages-full) .sg-result { font-size: 16px; font-weight: 600; fill: var(--ink); }
:is(.stages, .stages-full) .sg-data { fill: var(--bg-soft); }
:is(.stages, .stages-full) .sg-card { fill: var(--bg); stroke: var(--divider); stroke-width: 1; }
:is(.stages, .stages-full) .sg-rule { stroke: var(--divider); stroke-width: 1; }
:is(.stages, .stages-full) .sg-checkpoint { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
:is(.stages, .stages-full) .sg-badge { fill: none; stroke: var(--text-1); stroke-width: 1; }
:is(.stages, .stages-full) :is(.sg-flow, .sg-tip) { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:is(.stages, .stages-full) .sg-handoff { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; }
:is(.stages, .stages-full) .sg-tip-ink { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:is(.stages, .stages-full) .sg-edge { fill: none; stroke: var(--switch-border); stroke-width: 1; }
:is(.stages, .stages-full) .sg-node { fill: var(--bg); stroke: var(--text-1); stroke-width: 1.5; }
/* TJ's section breaks: the same drawing with the step we are in boxed in red, as on his slides. */
.stage-break { max-width: 760px; margin: 16px 0 0; }
.stage-break > svg { display: block; width: 100%; height: auto; }
.stage-break .sg-here { fill: none; stroke: var(--here); stroke-width: 4; }
/* As wide as the slide, but no taller than leaves room for a few lines under it: the drawing is 1200 × 412
   (2.913 wide for 1 tall), and 330 px keeps the caption bar, the top padding and four lines of words. */
.present .stages { max-width: calc((100vh - 330px) * 2.913); }
/* Under a break's drawing, its words run the drawing's width, as on TJ's slides, not the page's reading
   column: a narrower column under a wide figure read as oddly set (TJ, 2026-10-27). */
.present :is(#ds_step, #ft_what, #al_what, #al_same, #by_h_reasoning, #by_reasoning) { max-width: calc((100vh - 330px) * 2.913); }
@media (max-width: 719px) { .making li { grid-template-columns: 28px minmax(0, 1fr); } .making li > :last-child { grid-column: 2; } }
.mark-min { display: inline-flex; flex: none; margin-left: 6px; opacity: .55; }
.mark-min:hover { opacity: 1; }
.mark-min svg { width: 18px; height: 18px; }
.present .topbar, .present .rail, .present footer, .present .present-btn { display: none; }
.present .page { max-width: none; padding: 24px 28px 96px; }
/* A slide gets the room (TJ, 2026-10-27: "why is there so much padding?"): the sides line up with the
   caption bar's 28 px, and the margins that stacked above a slide's first lit element (the workspace's,
   the panel's and its own, 116 px in all) are gone. Text keeps its own line length. */
.present .workspace { margin-top: 0; }
.present .main > .panel { padding-top: 0; }
.present .main > .panel > .lit:not(.lit ~ .lit) { margin-top: 0; }
.present .intro, .present .workspace { display: block; }
.present .intro:not(.lit) { display: none; }
.present .intro.lit h1, .present .part-intro.lit h2 { font-size: 56px; line-height: 1.1; max-width: 16ch; margin-top: 10vh; }
.present .intro.lit p, .present .part-intro.lit p { font-size: 26px; line-height: 1.5; max-width: 40ch; }
.present .intro.lit .scope { max-width: 56ch; font-size: 20px; color: var(--text-3); }
/* Part two's divider: the opening slide's own sizes, above; its title in the page's heading face. */
.present .part-intro.lit { display: block; }
.present .part-intro h2 { margin-bottom: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.present .part-intro p { margin: 10px 0 0; color: var(--text-2); }
.present .terms li { font-size: 19px; line-height: 1.5; }
.present .scales { max-width: none; }
.present .scale h4 { font-size: 20px; }
.present .scale p { font-size: 17px; line-height: 1.5; }
.present .main > .panel > *:not(.lit) { display: none; }
/* Tab 4's baseline view sits in #ti_normal (a pinned run swaps it out): the walkthrough passes the
   wrapper through, so its lit children show and its unlit ones hide, as a panel's own do. Hidden
   while a run is pinned ([hidden] above is !important). test/training/PresentLit.test.js keeps
   every lit element reachable. */
.present #ti_normal { display: contents; }
.present #ti_normal > *:not(.lit) { display: none; }
.present .main { font-size: 20px; }
.present .question { font-size: 40px; max-width: 34ch; margin-top: 4vh; }
.present .lede { max-width: 56ch; font-size: 22px; line-height: 1.5; }
.present .sub { font-size: 28px; margin-top: 28px; }
.present .hint, .present .note, .present .conditions { font-size: 17px; max-width: 70ch; }
.present .cell p, .present .moment p { font-size: 21px; line-height: 1.55; }
.present .facts { font-size: 18px; }
.present .facts th, .present .facts td { padding: 12px 14px; }
.present .netfig { max-width: 520px; margin-top: 0; }
.present #rc_whole_wrap .whole { min-width: 0; max-width: 1150px; }
.present #rc_closeup .note, .present #rc_closeup .nbrs { max-width: 70ch; margin-top: 8px; font-size: 15px; line-height: 21px; }
.present #rc_closeup .chip { font-size: 12px; line-height: 20px; }
/* The network step shows the figure alone, without train.py or the reading notes. */
.present #rc_algo_wrap.fig-only > .algo, .present #rc_fig_network > .hint, .present #rc_fig_network > #rc_window_note { display: none; }
.present #rc_algo_wrap.fig-only { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1500px) {
  .present #rc_algo_wrap.fig-only #rc_fig_network { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 48px; align-items: start; }
  .present #rc_algo_wrap.fig-only #rc_fig_network > figcaption { grid-column: 1 / -1; }
  .present #rc_algo_wrap.fig-only #rc_whole_wrap { grid-column: 1; grid-row: 2 / span 2; }
  .present #rc_algo_wrap.fig-only #rc_inside, .present #rc_algo_wrap.fig-only #rc_closeup { grid-column: 2; }
  .present #rc_algo_wrap.fig-only #rc_inside { margin-top: 0; }
}
.present .mdl { max-width: 480px; }
.present .card p { font-size: 18px; }
.present .algo-step, .present .algo-sub li { font-size: 18px; line-height: 1.5; }
.present .making li { font-size: 20px; line-height: 1.5; padding: 16px 0; }
/* TJ's lecture's slides (2026-10-26). */
.present .three li { font-size: 20px; line-height: 1.5; }
.present #ds_sources { grid-template-columns: minmax(0, 1fr); }
.present .shot img { max-height: 58vh; width: auto; }
.present .paper-fig img { max-height: 46vh; width: auto; }
.present .shot figcaption { font-size: 17px; line-height: 1.45; }
.present .tokchip .t { font-size: 20px; line-height: 28px; }
.present .tokchip .id { font-size: 14px; }
.present .chatml { font-size: 20px; line-height: 1.5; }
.present .stage-prompt code { font-size: 18px; line-height: 1.5; }
.present .frontier li { font-size: 21px; line-height: 1.5; }
.present #vo_scale th, .present #vo_scale td { padding: 5px 14px; font-size: 16px; line-height: 1.35; }
/* Fitting the desktop slides (TJ, 2026-10-22): what a slide drops while presenting, so it ends above
   the caption bar at 1280×800 (present.js's presentFit then scales whatever still runs over). The
   page itself keeps all of it. */
.present #ds_cards .fact, .present #ds_cards .excerpt { display: none; }
.present #rc_algo_wrap.algo-only, .present #rc_algo_wrap.parts-only { grid-template-columns: minmax(0, 1fr); }
.present #rc_algo_wrap.algo-only > :not(.algo), .present #rc_algo_wrap.parts-only > .algo { display: none; }
.present #rc_algo_wrap.parts-only #rc_fig_parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: center; }
.present #rc_algo_wrap.parts-only #rc_fig_parts > figcaption { grid-column: 1 / -1; }
.present #rc_algo_wrap.parts-only .mdl-key { font-size: 17px; line-height: 1.5; }
.present #rc_net_note { display: none; }
.present #re_explore .card-foot, .present #re_explore #c_define { display: none; }
.present #re_explore .card p, .present #re_explore .card li { font-size: 16px; line-height: 1.45; }
/* The whole network fills its width, so the page's zoom alone can't shorten it: cap it while presenting. */
.present #rc_whole_wrap .whole { max-width: 880px; }
/* The embedding's close-up: its explanation and nearest rows beside the drawing, not under it. */
.present #rc_net:has(> .nbrs) { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 0 40px; align-items: start; }
.present #rc_net:has(> .nbrs) > .netfig { grid-column: 1; grid-row: 1 / span 3; }
.present #rc_net:has(> .nbrs) > :not(.netfig) { grid-column: 2; }
/* From 1500 px the close-up is already the right-hand column beside the whole network (above), too
   narrow to split again: there the explanation goes back under the drawing. Split, it left the text a
   0-px column, a word to a line, and ran 262 px past the bar at 1536×864 (2026-10-24). */
@media (min-width: 1500px) { .present #rc_algo_wrap.fig-only #rc_net:has(> .nbrs) { display: block; } }
/* The model's parts stand alone on their slide: the tab's question and heading were on the slide before. */
.present #p_recipe:has(#rc_algo_wrap.parts-only) .question, .present #p_recipe:has(#rc_algo_wrap.parts-only) #rc_h_algo { display: none; }
.present-ui .edge { position: fixed; top: 0; bottom: 72px; width: 12vw; border: 0; background: none; color: var(--text-3); font-size: 56px; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 20; }
.present-ui .edge:hover, .present-ui .edge:focus-visible { opacity: 1; }
.present-ui .edge:disabled { cursor: default; opacity: 0; }
.present-ui .edge.prev { left: 0; } .present-ui .edge.next { right: 0; }
.present-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; display: flex; align-items: center; gap: 18px; height: 72px; padding: 0 28px; border-top: 1px solid var(--divider); background: var(--bg); font-size: 15px; }
.present-bar .where { flex: none; font-weight: 600; color: var(--text-2); }
.present-bar .caption { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; color: var(--ink); }
.present-bar .count { flex: none; color: var(--text-2); }
@media (max-width: 719px) { .present .page { padding: 24px 16px 120px; } .present .intro.lit h1, .present .part-intro.lit h2 { font-size: 36px; } .present .question { font-size: 28px; } .present-bar { gap: 10px; padding: 0 12px; font-size: 13px; } .present-bar .where { display: none; } .present-ui .edge { width: 18vw; } }
/* The bar's Back and Next, its full-screen button and its two exit words (TJ, 2026-10-23: presentation
   was hard to move through on a phone). The edges above appear only on hover, which a touch screen
   has none of, and lie over the content, so there they go and the bar's own buttons take over, at
   the bar's two ends where thumbs reach, 44 px or more; "Esc to explore" reads "Exit"; the caption
   wraps to two lines instead of cutting off; and the bar clears the home indicator. A mouse keeps
   the edges and the bar as they were, plus the full-screen button (hidden where the page cannot
   go full screen). present.js adds swiping. */
.present-bar .bar-step { display: none; flex: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--divider); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.present-bar .bar-step:disabled { color: var(--text-3); opacity: .45; cursor: default; }
.present-bar .bar-full { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; }
.present-bar .bar-full[hidden] { display: none; }
.present-bar .touch-words { display: none; }
@media (hover: none) and (pointer: coarse) {
  .present-ui .edge { display: none; }
  .present-bar { height: auto; min-height: 64px; padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); gap: 10px; }
  .present-bar .bar-step { display: inline-flex; }
  .present-bar .bar-full { min-width: 44px; min-height: 44px; }
  .present-bar .key-words { display: none; }
  .present-bar .touch-words { display: inline; }
  .present-bar #present_exit { min-height: 44px; }
  .present-bar .caption { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; font-size: 15px; }
  .present-bar .mark-min { display: none; }
  .present .page { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .knob { transition: none; } }