/* steerlab research notes: one shared style for every experiment report. Light by default; dark only when the reader
   turns it on with the switch (report.js), never from the system setting.
   Identity: steerlab is a control desk. Grotesk headings (Bricolage Grotesque) over a serif body (Source Serif 4),
   mono labels (JetBrains Mono); steer orange marks what steering does to the data, fader blue marks the controls,
   and the Ember ground (from the web demo) frames art and screens. Hero art is drawn from each experiment's data.
   A single reading column with a sticky contents rail; serif display, sans body, mono labels; colour only in data. */
:root {
  --canvas: #ffffff;
  --ink: #1d272a;
  --ink-soft: #586468;
  --ink-faint: #8a9497;
  --rule: #e3e7e8;
  --panel: #f5f6f4;
  --accent: #c9561c;          /* steer orange: what steering does, in data and figures */
  --accent-soft: #f8e6dc;
  --control: #4a86e8;         /* fader blue: settings and controls */
  --ground: #15110e;          /* Ember ground: art, screens, the header band */
  --link: #1d272a;
  --mark: #fff1c2;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --measure: 42.5rem;
  --rail: 15rem;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --canvas: #121516; --ink: #e8ecec; --ink-soft: #a7b1b3; --ink-faint: #7b8689; --rule: #2a3133;
  --panel: #1b2022; --accent: #e07a3f; --accent-soft: #3a2419; --control: #6f9ff0; --link: #e8ecec; --mark: #4a3d12;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding: 0 max(16px, env(safe-area-inset-left, 0px));
}

/* Layout: contents rail on the left, reading column in the middle. */
.page { max-width: var(--measure); margin: 0 auto; padding: 7rem 0 6rem; }
.toc { position: fixed; left: 2rem; top: 7rem; width: 12rem; max-height: calc(100vh - 9rem); overflow-y: auto;
       font-size: 0.8125rem; line-height: 1.4; }
article { min-width: 0; }
@media (max-width: 1180px) { .toc { display: none; } .page { padding-top: 4rem; } }

/* Header. */
.eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
           color: var(--ink-soft); margin: 0 0 1.25rem; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--ink); }
.eyebrow .sep { margin: 0 0.5rem; color: var(--ink-faint); }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 2.75rem); line-height: 1.08;
     letter-spacing: -0.025em; margin: 0 0 1rem; text-wrap: balance; }
.dek { font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.45; color: var(--ink); margin: 0 0 2rem;
       text-wrap: pretty; }
.meta { display: grid; grid-template-columns: 1.7fr 1.2fr 1fr 0.7fr; gap: 1rem 1.75rem; padding: 0 0 1.25rem;
        border-bottom: 1px solid var(--rule); margin: 0 0 2.5rem; }
.meta dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
           color: var(--ink-faint); margin-bottom: 0.2rem; }
.meta dd { margin: 0; font-size: 0.9375rem; }
@media (max-width: 640px) { .meta { grid-template-columns: 1fr 1fr; } }

/* Body text. */
article p, article li { text-wrap: pretty; }
article p { margin: 0 0 1.125rem; }
article ul, article ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
article li { margin-bottom: 0.5rem; }
article li::marker { color: var(--ink-faint); }
strong { font-weight: 650; }
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 3px;
    text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
code { font-family: var(--font-mono); font-size: 0.86em; background: var(--panel); padding: 0.08em 0.32em; border-radius: 3px; }
pre { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; background: var(--panel); border-radius: 6px;
      padding: 1rem 1.15rem; overflow-x: auto; margin: 0 0 1.5rem; }
pre code { background: none; padding: 0; font-size: inherit; }
mark { background: var(--mark); color: inherit; padding: 0 0.15em; border-radius: 2px; }
sup a { font-family: var(--font-mono); font-size: 0.72em; text-decoration: none; color: var(--accent); padding: 0 0.1em; }

/* Headings: numbered sections, an anchor link on hover. */
h2, h3 { font-family: var(--font-display); color: var(--ink); position: relative; text-wrap: balance; }
h2 { font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; margin: 3.75rem 0 1.25rem; }
h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 2.5rem 0 0.85rem; }
/* Section numbers are channel tags, as on a mixing desk. */
h2 .num { display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: 0.42em; color: var(--control);
          border: 1px solid currentColor; border-radius: 3px; padding: 0.15em 0.4em; margin-right: 0.7rem; vertical-align: 0.42em;
          letter-spacing: 0.04em; }
.anchor { position: absolute; left: -1.4rem; top: 0; padding-right: 0.4rem; color: var(--ink-faint); text-decoration: none;
          opacity: 0; font-weight: 400; transition: opacity 120ms ease-out; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

/* Key results: the claims first, each led by its finding in bold. */
.key { margin: 0 0 2.75rem; }
.key h2 { margin: 0 0 0.85rem; font-size: 0.8125rem; font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.05em;
          text-transform: uppercase; color: var(--ink-soft); }
.key ul { padding-left: 1.1rem; }
.key li { margin-bottom: 0.85rem; }

/* Figures, tables, callouts. */
figure.hero { margin: 0 0 2.25rem; }
figure.hero img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; background: var(--ground); }
figure.hero figcaption { margin-top: 0.6rem; font-size: 0.8125rem; }
/* Covers with words in them (labels, cards) are shown whole, never cropped to 16:9. */
figure.hero.whole img { aspect-ratio: auto; object-fit: contain; }
figure.illustration img { border-radius: 4px; }
figure { margin: 2.5rem 0; }
figure img, figure video { display: block; width: 100%; height: auto; border-radius: 6px; }
figure.plot img { background: #ffffff; padding: 0.4rem; border: 1px solid var(--rule); }
figcaption { font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); margin-top: 0.85rem; max-width: 38.75rem;
             text-wrap: pretty; }
figcaption .label { font-family: var(--font-display); font-weight: 650; color: var(--ink); margin-right: 0.3rem; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; border-top: 1px solid var(--ink); }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; font-variant-numeric: tabular-nums lining-nums; }
th, td { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
     color: var(--ink-soft); }
td.num, th.num { text-align: right; padding-left: 0.75rem; white-space: nowrap; }
th:last-child, td:last-child { padding-right: 0; }
tr.hl td { background: var(--accent-soft); }
tr.hl td:first-child { box-shadow: inset 2px 0 var(--accent); padding-left: 0.65rem; }
.table-note { font-size: 0.875rem; color: var(--ink-soft); margin-top: -1.25rem; }
.callout { border-left: 2px solid var(--accent); padding: 0.15rem 0 0.15rem 1.15rem; margin: 1.75rem 0; color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }
.quote { font-family: var(--font-body); font-style: italic; font-size: 1.125rem; line-height: 1.55; border-left: 2px solid var(--rule);
         padding: 0.1rem 0 0.1rem 1.25rem; margin: 1.25rem 0 1.5rem; }
.quote .who { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
              color: var(--ink-soft); margin-bottom: 0.35rem; }
.quote em { font-style: normal; background: var(--accent-soft); border-radius: 2px; padding: 0 0.1em; }
.diagram { margin: 2rem 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram text { font-family: var(--font-body); font-size: 13px; fill: var(--ink); }
.diagram .mono { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-soft); }
.diagram .box { fill: var(--canvas); stroke: var(--ink-faint); }
.diagram .hot { fill: var(--accent-soft); stroke: var(--accent); }
.diagram .line { stroke: var(--ink-soft); stroke-width: 1.3; fill: none; }
.diagram .push { stroke: var(--accent); stroke-width: 2; fill: none; }
.diagram .head { fill: var(--ink-soft); }
.diagram .headhot { fill: var(--accent); }

/* Contents rail. */
.toc .label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
              color: var(--ink-faint); margin: 0 0 0.85rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.toc a { color: var(--ink-soft); text-decoration: none; display: inline-block; line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink);
                              text-underline-offset: 4px; }

/* Footnotes and footer. */
.footnotes { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-soft); }
.footnotes ol { padding-left: 1.2rem; }
footer.note { margin-top: 3rem; font-size: 0.875rem; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .anchor { transition: none; } }
@media print { .toc, .anchor { display: none; } .page { display: block; padding: 0; } }

/* Research index: one row per note, text on the left, thumbnail on the right. */
.index { max-width: 64rem; margin: 0 auto; padding: 4.5rem 0 6rem; }
.index-head { max-width: 42.5rem; margin-bottom: 3rem; }
.notes { list-style: none; margin: 0; padding: 0; }
.note { border-top: 1px solid var(--rule); }
.note:last-child { border-bottom: 1px solid var(--rule); }
.note-link { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: center; padding: 1.75rem 0;
             color: inherit; text-decoration: none; }
a.note-link:hover h2 { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px;
                       text-decoration-thickness: 2px; }
.note h2 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.02em;
           margin: 0.75rem 0 0.6rem; text-wrap: balance; }
.note p { margin: 0 0 0.75rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.note .note-meta { font-size: 0.9375rem; margin: 0; }
.note .sep { margin: 0 0.4rem; color: var(--ink-faint); }
.chip { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.03em; color: var(--ink-soft);
        background: var(--panel); border-radius: 999px; padding: 0.25rem 0.7rem; }
.chip .soon { color: var(--accent); }
.thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; display: block; }
.note-pending h2 { color: var(--ink-soft); }
.note-pending .thumb { opacity: 0.75; }
@media (max-width: 760px) {
  .note-link { grid-template-columns: 1fr; gap: 1rem; }
  .thumb { order: -1; }
}

/* Light / dark switch. */
.theme-toggle { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 10; font-family: var(--font-mono); font-size: 0.75rem;
                letter-spacing: 0.03em; color: var(--ink-soft); background: var(--canvas); border: 1px solid var(--rule);
                border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }
@media print { .theme-toggle { display: none; } }

/* Research page: cards led by the headline number. */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
         gap: 2rem; }
.card a, .card .card-body { color: inherit; text-decoration: none; display: block; }
.card { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--canvas); }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ground); }
.card-text { padding: 1.25rem 1.35rem 1.4rem; }
.card .result { display: flex; align-items: baseline; gap: 0.7rem; font-family: var(--font-mono); margin: 0.6rem 0 0.4rem; }
.card .result b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.card .result span { font-size: 0.75rem; color: var(--ink-soft); }
.card h2 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
           margin: 0.2rem 0 0.5rem; text-wrap: balance; }
.card p { margin: 0 0 0.7rem; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; }
.card .note-meta { font-family: var(--font-mono); font-size: 0.75rem; margin: 0; }
a.card-link:hover h2 { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.card-pending .card-text { opacity: 0.7; }

/* Chat transcripts: who said what. System prompt, user, and the model's reply tagged with how it was produced. */
.chat { margin: 1.25rem 0 1.75rem; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.turn { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--rule); }
.turn:first-child { border-top: 0; }
.turn .role { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase;
              color: var(--ink-faint); padding-top: 0.2rem; }
.turn .msg { margin: 0; font-size: 0.98rem; line-height: 1.6; }
.turn .gloss { display: block; color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.3rem; }
.turn.system { background: var(--panel); }
.turn.system .msg { color: var(--ink-soft); font-size: 0.9rem; }
.turn.model .who { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.03em;
                   color: var(--ink-soft); margin-bottom: 0.25rem; }
.tag { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em;
       border-radius: 3px; padding: 0.05rem 0.4rem; margin-left: 0.35rem; vertical-align: 0.1em; }
.tag.steered { color: #fff; background: var(--accent); }
.tag.random { color: var(--ink-soft); border: 1px solid var(--rule); }
.tag.plain { color: var(--ink-soft); border: 1px solid var(--rule); }
.turn.model .msg em { font-style: normal; background: var(--accent-soft); border-radius: 2px; padding: 0 0.1em; }
@media (max-width: 640px) { .turn { grid-template-columns: 1fr; } .turn .role { padding: 0 0 0.25rem; } }

/* Example carousels (report.js): one slide at a time with ← / →; all slides in order without JavaScript. */
.carousel { margin: 1.25rem 0 1.75rem; }
.carousel .slide > .chat { margin: 0; }
.carousel:not(.is-live) .slide + .slide { margin-top: 0.75rem; }
.carousel:focus-visible { outline: 2px solid var(--control); outline-offset: 4px; border-radius: 8px; }
.carousel-nav { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; font-family: var(--font-mono);
                font-size: 0.75rem; color: var(--ink-soft); }
.carousel-nav button { font: inherit; font-size: 0.95rem; line-height: 1; color: var(--ink); background: var(--canvas);
                       border: 1px solid var(--rule); border-radius: 999px; width: 2rem; height: 2rem; cursor: pointer; }
.carousel-nav button:hover { border-color: var(--control); color: var(--control); }
.carousel-nav .count { min-width: 3.5rem; text-align: center; }
.carousel-nav .slide-label { margin-left: 0.4rem; color: var(--ink-faint); }

/* Contents rail: a ▸ toggle shows a section's subsections; the section being read opens on its own. */
.toc-row { display: flex; align-items: baseline; gap: 0.3rem; }
.toc-toggle, .toc-toggle-space { flex: 0 0 1rem; width: 1rem; }
.toc-toggle { font: inherit; font-size: 0.7rem; line-height: 1; color: var(--ink-faint); background: none; border: 0; padding: 0;
              cursor: pointer; }
.toc-toggle:hover { color: var(--ink); }
.toc .toc-sub { list-style: none; margin: 0.4rem 0 0.25rem 1.3rem; padding: 0; display: grid; gap: 0.35rem; font-size: 0.75rem; }
.toc .toc-sub[hidden] { display: none; }
.toc .toc-sub a { color: var(--ink-faint); }

/* Reply explorer (explorer.js): real replies at each strength. */
.explorer-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.explorer-tab { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-soft); background: var(--canvas);
                border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; }
.explorer-tab[aria-pressed="true"] { color: var(--ink); border-color: var(--control); }
.explorer-label { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-mono); font-size: 0.75rem;
                  color: var(--ink-soft); margin-bottom: 0.8rem; }
.explorer-label input { flex: 1; max-width: 22rem; accent-color: var(--control); }
.explorer-value { font-family: var(--font-mono); color: var(--ink); min-width: 3.5rem; }
.explorer .chat { margin: 0; }
.explorer .turn.model .msg { min-height: 6.5rem; }
.explorer-stats { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); margin: 0.6rem 0 0; }

/* "How the study was run": a strip of steps, then one Input / Process / Output card per step. */
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; margin: 1.25rem 0 1.5rem; }
.pbox { position: relative; border: 1px solid var(--rule); border-radius: 6px; padding: 0.6rem 0.65rem; display: grid; gap: 0.2rem; align-content: start; }
.pbox + .pbox::before { content: "→"; position: absolute; left: -0.95rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 0.8rem; }
.pbox b { font-family: var(--font-display); font-weight: 650; font-size: 0.85rem; }
.pbox span { color: var(--ink-soft); font-size: 0.78rem; line-height: 1.4; }
.stepcards { display: grid; gap: 0.75rem; margin: 0 0 1.75rem; }
.stepcard { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.step-eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--control); }
.step-title { font-family: var(--font-display); font-weight: 650; font-size: 1.05rem; margin: 0.15rem 0 0.6rem; }
.ipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.ipo > div { border-left: 2px solid var(--rule); padding: 0.1rem 0 0.1rem 0.75rem; }
.ipo-head { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.25rem; }
.ipo ul, .ipo ol { margin: 0; padding-left: 1rem; font-size: 0.86rem; line-height: 1.45; }
.ipo ol { padding-left: 1.1rem; }
.ipo ol li { padding-left: 0.1rem; }
.ipo li + li { margin-top: 0.2rem; }
@media (max-width: 640px) { .ipo { grid-template-columns: 1fr; } .pipeline { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .pbox + .pbox::before { display: none; } }

/* One small picture per step: real messages, a heatmap, or score tiles. */
.step-viz { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.vpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
.vchat { display: grid; gap: 0.35rem; min-width: 0; align-content: start; }
.vu { justify-self: end; max-width: 92%; background: var(--panel); border-radius: 10px 10px 2px 10px; padding: 0.4rem 0.7rem; font-size: 0.86rem; }
.vu .gloss { display: block; color: var(--ink-soft); font-size: 0.78rem; }
.vr { border: 1px solid var(--rule); border-radius: 10px 10px 10px 2px; padding: 0.45rem 0.7rem; font-size: 0.86rem; line-height: 1.5; overflow-wrap: anywhere; }
.vr.steered { border-left: 3px solid var(--accent); }
.vr em { font-style: normal; background: var(--accent-soft); border-radius: 2px; }
.vtag { display: block; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-soft); margin-top: 0.3rem; }
.vdots { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); }
.vdots i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--ink-soft); }
.vdots .ok { color: var(--ink); }
.vscroll { overflow-x: auto; }
.vheat { display: grid; grid-template-columns: 6.5rem repeat(5, minmax(3rem, 1fr)); gap: 3px; min-width: 22rem; }
.vheat > div { padding: 0.4rem 0.2rem; text-align: center; border-radius: 3px; font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.vheat .h { color: var(--ink-faint); font-size: 0.68rem; }
.vheat .best { outline: 2px solid var(--ink); outline-offset: -2px; font-weight: 700; }
.vtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.4rem; }
.vtiles > div { border: 1px solid var(--rule); border-radius: 6px; padding: 0.5rem; display: grid; gap: 0.1rem; text-align: center; align-content: start; }
.vtiles .pick { border-color: var(--accent); }
.vtiles small { font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-faint); line-height: 1.35; }
.vtiles strong { font-family: var(--font-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.vtiles .pick strong { color: var(--accent); }
@media (max-width: 640px) { .vpair { grid-template-columns: 1fr; } }

/* A model turn shown twice, side by side: the same prompt and question without steering, then steered. */
.turn.compare { grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.turn.compare .role { grid-column: 1 / -1; padding-bottom: 0; }
.turn.compare .side + .side { border-left: 1px solid var(--rule); padding-left: 1.5rem; }
.turn.compare .msg { font-size: 0.94rem; }
@media (max-width: 640px) {
  .turn.compare { grid-template-columns: 1fr; }
  .turn.compare .side + .side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 0.75rem; }
}

/* "In short": one self-contained answer a reader (or an assistant) can quote whole. */
.key.answer p:not(.summary-label) { margin: 0; padding-left: 1rem; border-left: 2px solid var(--ink); font-size: 1.02rem; }

/* Demo recordings: a screen on the desk, so on the Ember ground in both themes. */
figure.media video { display: block; width: 100%; height: auto; background: var(--ground, #15110e); border-radius: 6px; }

/* Copy button on code blocks. */
pre.has-copy { position: relative; padding-top: 2.1rem; }
pre .copy { position: absolute; top: 0.45rem; right: 0.45rem; font-family: var(--font-mono); font-size: 0.68rem;
            color: var(--ink-soft); background: var(--canvas); border: 1px solid var(--rule); border-radius: 4px;
            padding: 0.15rem 0.5rem; cursor: pointer; opacity: 0.85; }
pre .copy:hover, pre .copy:focus-visible { opacity: 1; color: var(--ink); border-color: var(--ink-faint); }

/* Syntax colours (code only; they never leave a code block). Light on the panel grey, brighter on dark. */
:root {
  --code-keyword: #8a3ea8; --code-string: #2f7d3a; --code-number: #b0540e; --code-comment: #8a9497;
  --code-function: #1f5fbf; --code-builtin: #0f7489; --code-meta: #586468;
}
:root[data-theme="dark"] {
  --code-keyword: #c792ea; --code-string: #a5d6a7; --code-number: #f2b48e; --code-comment: #7b8689;
  --code-function: #82aaff; --code-builtin: #89ddff; --code-meta: #a7b1b3;
}
.hljs { color: var(--ink); background: transparent; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: var(--code-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--code-string); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--code-number); }
.hljs-comment, .hljs-quote { color: var(--code-comment); font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-section { color: var(--code-function); }
.hljs-built_in, .hljs-type, .hljs-title.class_, .hljs-attr, .hljs-variable { color: var(--code-builtin); }
.hljs-meta, .hljs-subst, .hljs-params { color: var(--code-meta); }

/* A dek set apart from title and body: muted serif between two thin rules. */
.dek.ruled { color: var(--ink-soft); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.9rem 0; }

/* Collapsible blocks (<details>): the reader chooses. Headings that belong in the contents stay outside them. */
details.fold { margin: 1.5rem 0 2rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
details.fold > summary { cursor: pointer; list-style: none; padding: 0.7rem 0; font-family: var(--font-mono); font-size: 0.8125rem;
                         letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--ink-faint);
                                 transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover { color: var(--ink); }
details.fold > summary:focus-visible { outline: 2px solid var(--control); outline-offset: 2px; border-radius: 3px; }
details.fold > :not(summary) { margin-top: 0; }
details.fold[open] { padding-bottom: 0.75rem; }
details.key { margin: 0 0 2.75rem; }
.summary-label { margin: 0.75rem 0 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em;
                 text-transform: uppercase; color: var(--ink-soft); scroll-margin-top: 1.5rem; }
table.glossary td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { table.glossary td:first-child { white-space: normal; } }
details.fold .caption-note { margin-top: 0.5rem; }

/* Three short cards in a row (stacked on phones). */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1.25rem 0 1.75rem; }
.cards3 > div { border: 1px solid var(--rule); border-radius: 6px; padding: 0.75rem 0.85rem; display: grid; gap: 0.35rem; align-content: start; }
.cards3 b { font-family: var(--font-display); font-weight: 650; font-size: 0.95rem; }
.cards3 q { font-size: 0.9rem; color: var(--ink-soft); quotes: "“" "”"; }
.cards3 small { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--ink-soft); }
.cards3 .needed small { color: var(--ink); }
@media (max-width: 640px) { .cards3 { grid-template-columns: 1fr; } }

/* Background research beside the main thread: an inline note with a left rule. */
aside.bg-note { margin: 1.25rem 0 1.75rem; padding: 0.1rem 0 0.1rem 1rem; border-left: 1px solid var(--ink-faint); font-size: 0.92rem; color: var(--ink-soft); }
aside.bg-note .label { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase;
                    color: var(--ink-soft); margin-bottom: 0.25rem; }
aside.bg-note p { margin: 0 0 0.5rem; }

/* Hand-drawn explainer diagrams are white-ground PNGs: in the dark theme they sit on a light card, never inverted. */
figure.diagram img { background: #ffffff; border: 1px solid var(--rule); border-radius: 6px; }
/* Tall hand-drawn diagrams: shown at about half the column, centred; select to open full size. */
figure.diagram.portrait img { display: block; width: 100%; max-width: 27rem; height: auto; margin: 0 auto; }
:root[data-theme="dark"] figure.diagram img { padding: 0.5rem; }

/* The 2-D simulation of adding and removing a direction (3.5). Without JavaScript the static figure shows. */
.sim { margin: 1.5rem 0 2rem; border: 1px solid var(--rule); border-radius: 8px; padding: 0.9rem; }
.sim svg { display: block; width: 100%; height: auto; }
.sim .sim-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin-top: 0.6rem; font-size: 0.9rem; }
.sim label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.sim input[type="range"] { width: 12rem; max-width: 60vw; accent-color: var(--control); min-height: 44px; }
.sim input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--control); }
.sim button { font: inherit; font-size: 0.85rem; min-height: 44px; padding: 0 0.9rem; color: var(--ink); background: var(--canvas);
              border: 1px solid var(--rule); border-radius: 6px; cursor: pointer; }
.sim button:hover { border-color: var(--control); color: var(--control); }
.sim output { font-family: var(--font-mono); font-size: 0.85rem; min-width: 3.5em; }
.sim .legend { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; margin: 0.75rem 0 0; font-size: 0.86rem; }
.sim .legend dt { font-family: var(--font-mono); }
.sim .legend dd { margin: 0; color: var(--ink-soft); }
.sim .sim-static { display: none; }
.sim.no-js .sim-live { display: none; }
.sim.no-js .sim-static { display: block; }
@media print { .sim .sim-live { display: none; } .sim .sim-static { display: block; } }
.caption-note { font-size: 0.875rem; color: var(--ink-soft); margin-top: -0.75rem; }
.caption-note .label { font-family: var(--font-display); font-weight: 650; color: var(--ink); margin-right: 0.3rem; }

/* Motion: it explains a change of state, never decorates. A collapsible grows open; a carousel slide crossfades in;
   the simulation's points glide and leave a ghost where they started. Content is visible without any of it. */
::selection { background: var(--accent-soft); color: var(--ink); }
@supports (interpolate-size: allow-keywords) {
  details.fold { interpolate-size: allow-keywords; }
  details.fold::details-content { height: 0; opacity: 0; overflow: clip;
    transition: height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease-out, content-visibility 300ms allow-discrete; }
  details.fold[open]::details-content { height: auto; opacity: 1; }
}
.carousel.is-live .slide:not([hidden]) { animation: slide-in 240ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slide-in { from { opacity: 0; transform: translateY(6px); } }
.sim .sim-ghost { transition: opacity 300ms ease-out; }
.sim .legend svg { display: block; }
.sim .math { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  details.fold::details-content { transition: opacity 150ms ease-out, content-visibility 150ms allow-discrete; }
  details.fold > summary::before { transition: none; }
  .carousel.is-live .slide:not([hidden]) { animation: slide-fade 150ms ease-out; }
}
@keyframes slide-fade { from { opacity: 0; } }

/* Equations: native MathML, set in a math font, with a "where" list naming every symbol. */
math { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math; font-size: 1.08em; }
math[display="block"] { margin: 0.9rem 0 0.5rem; overflow-x: auto; overflow-y: hidden; padding: 0.15rem 0; }
ol.equations { padding-left: 1.2rem; }
ol.equations > li { margin-bottom: 1.4rem; }
dl.where { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; margin: 0 0 0 0.25rem; font-size: 0.94rem; color: var(--ink-soft); }
dl.where dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
dl.where dd { margin: 0; }
dl.where dd math { color: var(--ink); }
p.eq-step { margin: 0.6rem 0 0; }
/* Draft markers: a note in progress says so, and each unfinished part is marked "pending". */
.draft-note, .pending { border-left: 3px solid var(--ink-faint); background: var(--panel); padding: 0.6rem 0.9rem;
                        font-size: 0.92rem; color: var(--ink-soft); border-radius: 0 4px 4px 0; }

/* The unlock lab (episode 2): measured accuracies only, chosen with radio groups and a three-step strength slider. */
.lab .lab-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: flex-end; }
.lab fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.9rem; }
.lab legend { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft);
              padding: 0; margin-bottom: 0.1rem; width: 100%; }
.lab fieldset label { min-height: 36px; font-size: 0.92rem; }
.lab input[type="radio"] { accent-color: var(--control); width: 1.05rem; height: 1.05rem; }
.lab .lab-strength { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.lab .lab-strength input { width: 9rem; }
.lab svg { margin-top: 0.5rem; }
.lab .lab-bar { transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.lab .lab-readout { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--ink); min-height: 2.6em; }
@media (prefers-reduced-motion: reduce) { .lab .lab-bar { transition: none; } }
table.grid2 td, table.grid2 th { text-align: center; }
table.grid2 th[scope="row"] { text-align: left; }
@media (max-width: 640px) { .lab svg text { font-size: 22px; } }

/* The question an article answers, set apart without a box. */
.question-callout { font-size: 1.35rem; line-height: 1.4; font-style: italic; margin: 2rem 0 1.25rem; padding-left: 1rem;
  border-left: 2px solid var(--ink); }

/* Chalkboard figure (sandbagging Episode 1): its own art palette, like the hand-drawn diagrams; Kalam inside it only. */
.chalkboard .board { background: #26332c; border: 10px solid #6b4a2b; border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45); }
.chalkboard .board svg.part { display: block; width: 100%; height: auto; }
.chalkboard .board svg.wide + svg.wide, .chalkboard .board svg.narrow + svg.narrow {
  border-top: 1px dashed rgba(185, 196, 187, 0.4); }
/* A wide board on wider screens (its plots sit beside the sums), a narrow one on phones. */
.chalkboard .board svg.part.narrow { display: none; }
@media (max-width: 640px) {
  .chalkboard .board svg.part.wide { display: none; }
  .chalkboard .board svg.part.narrow { display: block; }
}
.chalkboard .chalk-defs { position: absolute; }
.chalkboard text { font-family: Kalam, cursive; fill: #eef0e8; }
.chalkboard text.dim { fill: #b9c4bb; }
.chalkboard text.orange { fill: #f2a86b; }
.chalkboard text.blue { fill: #9cc3ff; }
.chalkboard text.caps { letter-spacing: 2px; }
/* With JavaScript the board is a stepper: the parts share one grid cell, so it keeps its tallest step's height. */
.chalkboard.js .board { display: grid; }
.chalkboard.js .board svg.part { grid-area: 1 / 1; align-self: start; visibility: hidden; border-top: 0; }
.chalkboard.js .board svg.part.on { visibility: visible; }
.chalkboard.js .board svg.wide + svg.wide, .chalkboard.js .board svg.narrow + svg.narrow { border-top: 0; }
.chalkboard .chalk-steps { display: none; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.chalkboard.js .chalk-steps { display: flex; }
.chalkboard .chalk-steps button, .chalkboard .chalk-next { font: inherit; font-size: 0.85rem; min-height: 44px;
  padding: 0 0.9rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--rule); border-radius: 6px;
  cursor: pointer; }
.chalkboard .chalk-steps button:hover, .chalkboard .chalk-next:hover { border-color: var(--control); color: var(--control); }
.chalkboard .chalk-steps button[aria-current="step"] { border-color: var(--control); color: var(--control);
  box-shadow: inset 0 -2px 0 var(--control); }
.chalkboard .chalk-next { display: none; margin-top: 0.6rem; }
.chalkboard.js .chalk-next { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .chalkboard.js .line { clip-path: inset(0 100% 0 0); }
  .chalkboard.js .play .line { animation: chalk-write 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i) * 450ms); }
  .chalkboard.js .arrow { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
  .chalkboard.js .play .arrow { animation: chalk-draw 700ms ease-out forwards; animation-delay: calc(var(--i) * 450ms); }
}
@keyframes chalk-write { to { clip-path: inset(0 0 0 0); } }
@keyframes chalk-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 640px) { .chalkboard .board { border-width: 5px; border-radius: 8px; } }

/* Symbol lists under an equation: folded, and lighter than a section fold. */
details.fold.symbols { margin: 0.4rem 0 1rem; border: 0; }
details.fold.symbols > summary { padding: 0.3rem 0; font-size: 0.75rem; }
details.fold.symbols dl.where { margin-top: 0.25rem; }

/* Transcript carousels read as examples, not body text: a step smaller. */
.carousel .turn .msg { font-size: 0.9rem; line-height: 1.5; }

/* A finding: its numbers as tiles, the one caveat in a line, and the rest in tabs (.ftabset) that start closed. */
.finding { margin: 0.75rem 0 2rem; }
.finding > .vtiles { margin: 0 0 1rem; }
.finding > .warn { margin: 0 0 1rem; }
.ftabset.js > details { border: 0; margin: 0; padding: 0; }
.ftabset.js > details > summary { display: none; }
.ftabset.js > details[open] { padding: 0.75rem 0 0.5rem; }
.ftab-bar { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--rule); }
.ftab-bar button { font: inherit; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; min-height: 44px;
  padding: 0 0.85rem; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--ink-soft); cursor: pointer; }
.ftab-bar button::after { content: " ▸"; color: var(--ink-faint); }
.ftab-bar button[aria-expanded="true"] { color: var(--ink); border-bottom-color: var(--control); }
.ftab-bar button[aria-expanded="true"]::after { content: " ▾"; }
.ftab-bar button:hover { color: var(--ink); }
.ftab-bar button:focus-visible { outline: 2px solid var(--control); outline-offset: 2px; border-radius: 3px; }
@media print { .ftab-bar { display: none; } .ftabset.js > details > summary { display: block; } }

/* Research index: work in progress, below the published notes. Titles only, not links. */
.coming-soon { margin-top: 4.5rem; }
.coming-soon h2 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 650; margin: 0 0 0.35rem; }
.coming-soon .soon-note { color: var(--ink-soft); font-size: 0.9375rem; margin: 0 0 1.25rem; }
.soon-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem; }
.soon-card { border: 1px dashed var(--rule); border-radius: 8px; padding: 1rem 1.1rem; }
.soon-card h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; margin: 0.6rem 0 0.3rem; color: var(--ink); }
.soon-card p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.45; }

/* A series on the research index: a header, then one card per episode, each with its own cover. */
.note.series { padding: 1.75rem 0; }
.series-head { max-width: 42.5rem; }
.note.series h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; margin: 0.5rem 0 0.5rem; }
.ep-grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
.ep-card { display: grid; gap: 0.35rem; align-content: start; color: var(--ink); text-decoration: none; }
.ep-card .thumb { margin-bottom: 0.4rem; }
a.ep-card:hover .ep-t { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.ep-card.is-soon { color: var(--ink-soft); }
.ep-card.is-soon .thumb { opacity: 0.85; }
.ep-n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.ep-t { font-size: 0.975rem; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.soon-tag { justify-self: start; margin-top: 0.15rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--ink-faint);
  border: 1px dashed var(--rule); border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; }
.soon-series-list { margin-bottom: 1.5rem; }
.soon-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; margin-bottom: 0.75rem; }
@media (max-width: 760px) { .ep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .ep-card .thumb { order: 0; } }
.thumb-placeholder { aspect-ratio: 3 / 2; border: 1px dashed var(--rule); border-radius: 4px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--rule) 45%, transparent) 10px 20px); }