/* Transcript viewer. Type encodes provenance: sans = viewer chrome, serif = what people and agents wrote,
   mono = machine content (commands, tool output, diffs). Colour encodes condition (the paper's figure palette)
   and the deferral threshold tau; everything else is greyscale. */
:root {
  --bg: #f7f8f4;
  --surface: #ffffff;
  --inset: #f2f4ee;
  --ink: #202d27;
  --ink-2: #48554d;
  --muted: #657267;
  --rule: #dde2d7;
  --rule-strong: #b7c2b5;
  --accent: #28634e;
  --accent-soft: #e8eee4;
  --focus: #2f6fdb;
  --mem: #8a8a8a;
  --told: #b5533c;
  --shown: #4a6fa5;
  --accepted: #9a7a2e;
  --benign: #4f9d76;
  --trusted: #5a6b7a;
  --tau: #cc4444;
  --ok: #2e7a4d;
  --ok-bg: #e4f2e9;
  --no: #9b3324;
  --add-bg: #e2f1e5;
  --add-ink: #1d6634;
  --del-bg: #f9e3df;
  --del-ink: #962a1f;
  --hunk-bg: #e8edf7;
  --hunk-ink: #3e5592;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-prose: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, "Source Serif Pro", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --topbar: 72px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161a; --surface: #1a1f24; --inset: #15191d; --ink: #e3e7ea; --ink-2: #c1c8ce; --muted: #94a0aa;
    --rule: #2b333a; --rule-strong: #3d4851; --focus: #7aa7ff;
    --accent: #a3d4bb; --accent-soft: #22362d;
    --mem: #8a8a8a; --told: #d4613f; --shown: #6a8fd0; --accepted: #c19a45; --benign: #5fae87; --trusted: #8496a6; --tau: #e06464;
    --ok: #7fcf9c; --ok-bg: #18301f; --no: #f09a8d;
    --add-bg: #16301e; --add-ink: #93d6a6; --del-bg: #3a1d1a; --del-ink: #f2a59b; --hunk-bg: #1c2538; --hunk-ink: #a3b8ec;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12161a; --surface: #1a1f24; --inset: #15191d; --ink: #e3e7ea; --ink-2: #c1c8ce; --muted: #94a0aa;
  --rule: #2b333a; --rule-strong: #3d4851; --focus: #7aa7ff;
  --accent: #a3d4bb; --accent-soft: #22362d;
  --mem: #8a8a8a; --told: #d4613f; --shown: #6a8fd0; --accepted: #c19a45; --benign: #5fae87; --trusted: #8496a6; --tau: #e06464;
  --ok: #7fcf9c; --ok-bg: #18301f; --no: #f09a8d;
  --add-bg: #16301e; --add-ink: #93d6a6; --del-bg: #3a1d1a; --del-ink: #f2a59b; --hunk-bg: #1c2538; --hunk-ink: #a3b8ec;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font-ui); font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
#app:focus { outline: none; }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.8125rem; }
code { overflow-wrap: anywhere; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.note { color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
.num { text-align: right; }
sub { font-size: 0.7em; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
details > summary:not(.chip)::before {
  content: ""; display: inline-block; width: 0; height: 0; margin-right: 0.5em; vertical-align: 0.1em;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 120ms ease;
}
details[open] > summary:not(.chip)::before { transform: rotate(90deg); }

/* ---------------------------------------------------------------- top bar */
.skip-link { position: fixed; z-index: 30; top: -100px; left: 20px; padding: 12px 18px; background: var(--ink); color: var(--surface); border: 0; border-radius: 6px; font: 600 0.875rem var(--font-ui); cursor: pointer; }
.skip-link:focus { top: 12px; }
.topbar {
  position: sticky; top: 0; z-index: 10; height: var(--topbar); display: flex; align-items: center; gap: 16px;
  padding: 0 max(32px, calc((100vw - 1320px) / 2)); background: var(--bg); border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 1.125rem var(--font-prose); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.brand-mark { color: var(--accent); flex: none; }
.topbar-paper { display: inline-flex; align-items: center; gap: 14px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.topbar-paper:hover { color: var(--accent); }
.crumbs { display: flex; gap: 8px; min-width: 0; flex: 1; color: var(--muted); font-size: 0.875rem; white-space: nowrap; overflow: hidden; }
.crumbs > * { overflow: hidden; text-overflow: ellipsis; }
.crumbs > * + *::before { content: "›"; margin-right: 8px; color: var(--rule-strong); }
.theme { margin-left: 8px; display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; }
.theme:hover { border-color: var(--rule-strong); }
main { display: block; max-width: 1480px; margin: 0 auto; padding: 28px 24px 64px; }
.notice { max-width: 60ch; margin: 48px auto; padding: 16px 20px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.notice p { margin: 0 0 8px; } .notice p:last-child { margin: 0; }
.notice.is-err { border-color: var(--tau); }

/* ---------------------------------------------------------------- shared pieces */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--surface); font: 600 0.875rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.small { padding: 4px 10px; font-size: 0.8125rem; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.linkish { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.linkish:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-mem { --tone: var(--mem); } .t-caught { --tone: var(--told); } .t-shown { --tone: var(--shown); }
.t-accepted { --tone: var(--accepted); } .t-benign { --tone: var(--benign); } .t-trusted { --tone: var(--trusted); }
.cond { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); font-size: 0.8125rem; font-weight: 550; white-space: nowrap; }
.cond::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); flex: none; }
.cond.t-trusted::before { background: transparent; border: 2px solid var(--tone); width: 9px; height: 9px; }
.tagl { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; background: var(--inset); border: 1px solid var(--rule);
  color: var(--ink-2); font-size: 0.75rem; }
.obs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ob { display: inline-flex; gap: 3px; align-items: baseline; padding: 0 6px; border-radius: 4px; border: 1px solid var(--rule);
  font-size: 0.75rem; line-height: 1.6; color: var(--muted); }
.ob i { font-style: normal; font-weight: 700; }
.ob-ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.ob-na { border-style: dashed; }
.ob-b.ob-ok { background: var(--ink); color: var(--surface); }
.okw { color: var(--ok); font-weight: 600; } .now { color: var(--no); font-weight: 600; }
.defw { color: var(--tau); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--rule);
  font-size: 0.75rem; line-height: 1.7; color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.chip.cf { border-color: var(--tau); color: var(--tau); font-weight: 600; }
.chip.step { background: color-mix(in srgb, var(--tau) calc(var(--lvl, 0) * 26%), var(--surface)); }
.chip b { font-weight: 650; }
.pill { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 0.75rem; font-weight: 600; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 4px;
  background: var(--surface); text-align: center; font-size: 0.75rem; }
dl.kv { margin: 0; display: grid; gap: 4px; }
dl.kv > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 3px 0; border-bottom: 1px dashed var(--rule); }
dl.kv > div:last-child { border-bottom: 0; }
dl.kv dt { color: var(--muted); font-size: 0.8125rem; }
dl.kv dd { margin: 0; text-align: right; font-size: 0.875rem; }

/* suspicion bar with the tau tick */
.sb { position: relative; display: inline-block; width: 84px; height: 8px; vertical-align: middle; border-radius: 4px;
  background: var(--inset); border: 1px solid var(--rule); }
.sb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ink-2); opacity: 0.55; }
.sb.is-def .sb-fill { background: var(--tau); opacity: 0.9; }
.sb-tau { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--tau); border-radius: 1px; }
.sb-val { display: inline-block; min-width: 2.6em; margin-left: 6px; text-align: right; font-size: 0.8125rem; vertical-align: middle; }

/* ---------------------------------------------------------------- research landing page */
.home { max-width: 1200px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 76px; align-items: center; padding: 42px 0 52px; }
.masthead { min-width: 0; }
.eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 9px; font: 600 0.6875rem/1.5 var(--font-ui); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.masthead h1 { font: 400 clamp(3.75rem, 6.8vw, 6.25rem)/0.98 var(--font-prose); letter-spacing: -0.055em; }
.masthead h1 em { display: block; color: var(--accent); font-weight: 400; }
.paper-title { max-width: 35ch; margin: 24px 0 22px; font: 400 1.25rem/1.45 var(--font-prose); color: var(--ink-2); }
.authors { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.authors > span { margin: 0 8px; color: var(--muted); }
.affiliation { margin: 6px 0 0; color: var(--muted); font-size: 0.8125rem; }
.affiliation span { display: block; margin-top: 2px; font-size: 0.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.home .btn { min-height: 42px; padding: 11px 16px; border-radius: 5px; font-size: 0.8125rem; gap: 12px; transition: background 150ms ease, border-color 150ms ease; }
.paper-button { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.paper-button:hover { background: var(--ink); border-color: var(--ink); }
.home .btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent); }
.experiment { position: relative; padding: 30px 28px 24px; background: #193f35; color: #eff4e8; border-radius: 8px; }
.experiment::after { content: ""; position: absolute; width: 28px; height: 28px; right: 13px; bottom: 13px; border-right: 1px solid #59756a; border-bottom: 1px solid #59756a; pointer-events: none; }
.experiment-label { margin: 0 0 34px; color: #b4c9b9; font: 0.625rem/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; }
.experiment-step { display: flex; align-items: flex-start; gap: 16px; }
.step-number { display: grid; place-items: center; width: 31px; height: 31px; flex: none; border: 1px solid #6b8a76; border-radius: 50%; color: #d5e4cb; font: 0.6875rem var(--font-mono); }
.experiment-step h2 { margin: 2px 0 5px; font: 400 1.1875rem/1.3 var(--font-prose); }
.experiment-step p { margin: 0; color: #b4c9b9; font-size: 0.75rem; }
.history-branch { margin: 14px 0 16px 15px; padding: 10px 0 10px 31px; border-left: 1px solid #527363; }
.history-branch > p { margin: 0 0 12px; color: #b4c9b9; font: 0.625rem/1.5 var(--font-mono); }
.history-options { display: grid; gap: 7px; }
.history-options > span { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #4b6b5b; border-radius: 4px; background: #244b3f; font-size: 0.75rem; }
.history-options i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.history-options .t-caught { --tone: #e99a7e; }.history-options .t-shown { --tone: #9ebfe8; }.history-options .t-accepted { --tone: #e1c274; }
.experiment-baseline { margin: 25px 0 0; padding-top: 16px; border-top: 1px solid #466455; color: #b4c9b9; font-size: 0.6875rem; }
.task-example { padding-top: 48px; }
.task-example header .eyebrow { margin-bottom: 9px; }
.task-example h2 { font: 400 clamp(1.75rem, 3vw, 2.25rem)/1.2 var(--font-prose); letter-spacing: -0.035em; }
.task-example header > p:last-child { margin: 12px 0 0; max-width: 72ch; color: var(--muted); font-size: 0.875rem; line-height: 1.7; }
.task-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.task-example-objective { --objective-color: var(--accent); padding: 24px; border: 1px solid var(--rule); border-top: 3px solid var(--objective-color); border-radius: 5px; background: var(--surface); }
.task-example-side { --objective-color: var(--told); }
.task-example-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 0 0 16px; color: var(--objective-color); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.task-example-label span { color: var(--muted); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.task-example h3 { font: 400 1.375rem/1.3 var(--font-prose); letter-spacing: -0.02em; }
.task-example-objective > p:last-child { margin: 12px 0 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.75; }
.task-example code { font-size: 0.8125em; }
.task-example footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin-top: 16px; font-size: 0.75rem; }
.task-example footer p { margin: 0; color: var(--muted); }
.task-example footer a { color: var(--accent); font-weight: 600; text-decoration: none; }
.task-example footer a:hover { text-decoration: underline; }
.explorer { padding-top: 58px; }
.explorer-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 28px; }
.explorer-head .eyebrow { margin-bottom: 9px; }
.explorer-head h2 { font: 400 clamp(1.75rem, 3vw, 2.25rem)/1.2 var(--font-prose); letter-spacing: -0.035em; scroll-margin-top: calc(var(--topbar) + 24px); }
.explorer-head > p { max-width: 52ch; margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.7; }
.tagcards { display: grid; gap: 24px; }
.tagcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px; padding: 32px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.tc-id { min-width: 0; }
.tc-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 17px; color: var(--muted); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; }
.tc-eyebrow > span { color: var(--accent); font: 0.6875rem var(--font-mono); }
.tc-setting { margin: 0 0 4px; color: var(--muted); font-size: 0.875rem; }
.tc-setting a { text-decoration: none; } .tc-setting a:hover { text-decoration: underline; }
.tagcard h3 { margin-bottom: 7px; font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.2 var(--font-prose); letter-spacing: -0.035em; }
.tagcard h3 a { text-decoration: none; } .tagcard h3 a:hover { color: var(--accent); }
.tagcard .tc-setting { font-size: 0.6875rem; }
.tc-desc { margin: 15px 0 0; color: var(--ink-2); font: 0.875rem/1.7 var(--font-ui); }
.tc-id dl.kv { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
.tc-id dl.kv dt, .tc-id dl.kv dd { font-size: 0.75rem; }
.tc-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.tc-charts { display: grid; gap: 25px; align-content: center; padding: 24px; background: var(--inset); border: 1px solid var(--rule); border-radius: 5px; min-width: 0; }
.tc-charts .note { margin: 0; }
.db { margin: 0; }
.db figcaption { margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.db-lane, .db-axis { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 3.4rem; align-items: center; column-gap: 12px; }
.db-label { font-size: 0.8125rem; color: var(--ink-2); }
.db-val { text-align: right; font-size: 0.875rem; font-weight: 600; }
.db-track { position: relative; height: 24px; }
.db-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.db-tau { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--tau); opacity: 0.85; }
.db-seg { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--tone); opacity: 0.45; }
.db-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tone);
  box-shadow: 0 0 0 2px var(--surface); }
.db-ticks { position: relative; display: flex; justify-content: space-between; color: var(--muted); font-size: 0.75rem; padding-top: 2px; }
.db-taul { position: absolute; top: 2px; transform: translateX(-50%); color: var(--tau); font-weight: 600; }
.keys { margin-top: 40px; color: var(--muted); font-size: 0.8125rem; }
.keys h2 { font-size: 0.8125rem; color: var(--ink-2); margin-bottom: 6px; }
.keys ul { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.home .keys { padding-top: 24px; border-top: 1px solid var(--rule); margin-top: 32px; }
.home .keys h2 { font-size: 0.6875rem; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.home .keys ul { gap: 8px 24px; font-size: 0.6875rem; }
.reading-note { display: flex; gap: 15px; max-width: 850px; margin-top: 30px; color: var(--muted); }
.reading-note-mark { font: 1.5rem var(--font-prose); color: var(--accent); }
.reading-note h2 { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); margin: 2px 0 5px; }
.reading-note p { margin: 0; font-size: 0.75rem; line-height: 1.7; }
.paper-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); }
.footer-brand { font: 400 1rem var(--font-prose); }
.paper-footer p { margin: 6px 0 0; font-size: 0.6875rem; color: var(--muted); }
.paper-footer nav { display: flex; gap: 24px; font-size: 0.6875rem; color: var(--muted); }
.paper-footer nav a { text-decoration: none; }
.paper-footer nav a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- pair */
.pagehead { margin: 4px 0 24px; }
.pagehead h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pagehead .sub { margin: 6px 0 0; color: var(--ink-2); }
h2.sect { margin: 28px 0 10px; font-size: 1.125rem; }
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
thead th { position: sticky; top: 0; background: var(--inset); font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
th.num, td.num { text-align: right; }
th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; }
th button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
th button i { font-style: normal; color: var(--muted); }
.matrix-wrap { width: fit-content; max-width: 100%; }
table.matrix th:first-child { min-width: 17rem; }
table.matrix tbody th { font-weight: 400; }
table.matrix tr.is-on > * { background: color-mix(in srgb, var(--focus) 8%, var(--surface)); }
table.matrix td { white-space: nowrap; }
.filters { display: grid; gap: 10px; margin-bottom: 12px; }
#q { width: min(100%, 26rem); padding: 8px 12px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--surface);
  color: var(--ink); font: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-2); font: 0.8125rem var(--font-ui); cursor: pointer; }
.fchip:not(:has(.cond)) { padding-left: 10px; }
.fchip .cond { border: 0; padding: 0 2px 0 6px; background: transparent; }
.fchip .n { color: var(--muted); font-size: 0.75rem; }
.fchip:hover { border-color: var(--rule-strong); }
.fchip.is-on { border-color: var(--ink); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.count { margin: 0 0 8px; color: var(--muted); font-size: 0.8125rem; }
table.eps td.c-id a { font-family: var(--font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
table.eps td.c-out, table.eps td.c-end, table.eps td.c-def { white-space: nowrap; }
table.eps .obs { flex-wrap: nowrap; }
table.eps .unit { display: none; }
table.eps td.c-flags .chip + .chip { margin-left: 4px; }
@media (min-width: 761px) {
  .eps-wrap { overflow: visible; }
  table.eps thead th { top: var(--topbar); z-index: 2; box-shadow: 0 1px 0 var(--rule); }
  table.eps thead th:first-child { border-top-left-radius: 8px; } table.eps thead th:last-child { border-top-right-radius: 8px; }
}
table.eps .tasks { display: block; color: var(--muted); font-size: 0.75rem; overflow-wrap: anywhere; }
table.eps td.c-s { white-space: nowrap; }
table.eps tbody tr { cursor: pointer; }
table.eps tbody tr:hover > td { background: var(--inset); }
table.eps tbody tr.is-sel > td { background: color-mix(in srgb, var(--focus) 10%, var(--surface)); }
table.eps tbody tr.is-sel > td:first-child { box-shadow: inset 3px 0 0 var(--focus); }

/* ---------------------------------------------------------------- episode */
.ep-head h1 { font: 600 clamp(1.125rem, 2vw, 1.375rem)/1.3 var(--font-mono); }
.ep-cond { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 0.875rem; }
.tasks2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 14px; align-items: start; }
.task-d { max-height: 13.5rem; overflow: auto; margin-top: 4px; overscroll-behavior: contain; }
details.task { padding: 10px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
details.task > summary { font-weight: 600; font-size: 0.875rem; }
details.task > summary code { font-weight: 400; color: var(--ink-2); }
.ep-nav { display: flex; gap: 14px; align-items: center; margin-top: 12px; font-size: 0.8125rem; color: var(--muted); }
.ep-nav a { color: var(--ink); }
.ep-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 410px); gap: 28px; align-items: start; }
.ep-main { min-width: 0; }
.ep-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.ep-side { position: sticky; top: calc(var(--topbar) + 14px); max-height: calc(100vh - var(--topbar) - 28px); overflow-y: auto;
  display: grid; gap: 12px; padding-right: 2px; overscroll-behavior: contain; }
details.sysprompt { margin-bottom: 14px; padding: 10px 14px; border: 1px dashed var(--rule-strong); border-radius: 8px; }
details.sysprompt > summary { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
details.sysprompt .rich { margin-top: 8px; max-height: 32rem; overflow: auto; }
ol.msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ol.msgs > li { min-width: 0; }
.msg, .prefix { padding: 12px 16px 14px; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong);
  border-radius: 4px 8px 8px 4px; scroll-margin-top: calc(var(--topbar) + 12px); }
.msg:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.msg.r-assistant { border-left-color: var(--ink); }
.msg.r-user { background: var(--inset); }
.msg.r-tool, .msg.r-system { background: var(--inset); border-left-style: dotted; }
.msg.is-feedback { border-left: 5px solid var(--tone); background: color-mix(in srgb, var(--tone) 7%, var(--surface)); }
.msg-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.who { font-weight: 650; font-size: 0.875rem; }
.mi { color: var(--muted); font-size: 0.75rem; }
.msg-b > * + * { margin-top: 10px; }
.rich > * + * { margin-top: 8px; }
p.txt { margin: 0; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.62 var(--font-prose); }
p.txt code { padding: 0 3px; border-radius: 3px; background: var(--inset); border: 1px solid var(--rule); font-size: 0.8125rem; }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
pre.code { padding: 8px 10px; background: var(--inset); border: 1px solid var(--rule); border-radius: 4px; max-height: 36rem; overflow: auto; }
pre.code.sh { background: var(--surface); border-left: 3px solid var(--ink-2); }
.prompt { color: var(--muted); user-select: none; }
pre.diff { padding: 6px 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; max-height: 40rem; overflow: auto; }
.dl { display: block; padding: 0 10px; }
.d-add { color: var(--add-ink); } .d-del { color: var(--del-ink); }
.dl.d-add { background: var(--add-bg); } .dl.d-del { background: var(--del-bg); }
.dl.d-hunk { background: var(--hunk-bg); color: var(--hunk-ink); }
.dl.d-meta { color: var(--muted); font-weight: 600; }
.elided { padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--accepted) 18%, transparent); font-style: italic; }
details.part { padding: 6px 12px; border-radius: 6px; background: var(--inset); border: 1px solid var(--rule); }
details.part > summary { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
details.part[open] > summary { margin-bottom: 6px; }
details.part.scratch { border-style: dashed; }
details.part p.txt { font-style: italic; }
.part-empty, .out-empty { margin: 0; color: var(--muted); font-size: 0.8125rem; font-style: italic; }
.call { border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; background: var(--surface); }
.call > * + * { margin-top: 8px; }
.call.is-submit { border: 2px solid var(--ink); }
.call-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.call-h .pill { align-self: center; }
code.cargs { color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; flex: 1 1 16rem; }
.call.is-inline { padding: 6px 10px; }
.call.is-inline > * + * { margin-top: 6px; }
.fn { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; }
.ed-h { font-size: 0.8125rem; }
.ed-cmd { font-weight: 600; }
code.path { color: var(--ink-2); }
code.path .dir { color: var(--muted); }
code.path b { color: var(--ink); font-weight: 600; }
dl.args { margin: 0; display: grid; gap: 6px; }
dl.args > div { display: grid; grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr); gap: 10px; align-items: baseline; }
dl.args dt { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
dl.args dd { margin: 0; min-width: 0; }
details.out > summary { font-size: 0.8125rem; color: var(--ink-2); }
details.out[open] > summary { margin-bottom: 6px; }
.err { padding: 6px 10px; border-radius: 4px; border: 1px solid var(--tau); background: color-mix(in srgb, var(--tau) 8%, var(--surface)); color: var(--del-ink); }
.err-h { font-weight: 700; font-size: 0.75rem; }
details.chipd { display: inline-block; position: relative; }
details.chipd > summary { list-style: none; }
details.chipd[open] > p { position: absolute; z-index: 5; left: 0; top: calc(100% + 4px); width: min(24rem, 70vw); margin: 0; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px; font-size: 0.8125rem; box-shadow: 0 6px 18px rgb(0 0 0 / 0.12); }
.prefix { border-left: 5px double var(--rule-strong); background: var(--inset); }
.prefix > p { margin: 6px 0 0; font-size: 0.875rem; color: var(--ink-2); max-width: 72ch; }
.prefix-prior { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 0.8125rem; }
.prefix-prior a { font-family: var(--font-mono); overflow-wrap: anywhere; min-width: 0; }
.verdict { white-space: nowrap; }
.prefix .prov { font-size: 0.8125rem; color: var(--muted); font-style: italic; }
.prefix .btn { margin-top: 10px; }
details.replay { margin-top: 10px; }
details.replay > summary { font-size: 0.875rem; font-weight: 600; }
details.replay ol.msgs { margin-top: 10px; }
.msg.is-replay { border-left-width: 2px; border-left-color: var(--rule-strong); }
.msg.is-replay.r-assistant { border-left-color: var(--ink-2); }
.msg.is-replay .mi { font-style: italic; }

/* side panel cards */
.card { padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; min-width: 0; }
.card > h2 { margin-bottom: 10px; font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.card > h3 { margin: 14px 0 6px; font-size: 0.8125rem; color: var(--ink-2); }
.card > p { margin: 8px 0 0; }
details.sub { margin-top: 10px; }
details.sub > summary { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
details.sub[open] > summary { margin-bottom: 6px; }
details.sub h4 { margin: 8px 0 4px; font-size: 0.75rem; color: var(--muted); }
.mon-why .rich { max-height: 24rem; overflow: auto; padding-right: 4px; overscroll-behavior: contain; }
.mon-why p.txt { font-size: 0.9375rem; line-height: 1.55; }
.gauge { margin-bottom: 12px; }
.g-num { display: flex; align-items: baseline; gap: 10px; }
.g-num span { font: 650 2.75rem/1 var(--font-ui); letter-spacing: -0.02em; }
.g-num small { color: var(--muted); font-size: 0.8125rem; }
.gauge.is-def .g-num span { color: var(--tau); }
.g-track { position: relative; height: 14px; margin: 14px 0 22px; border-radius: 7px; background: var(--inset); border: 1px solid var(--rule); }
.g-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--ink-2); opacity: 0.4; }
.gauge.is-def .g-fill { background: var(--tau); opacity: 0.75; }
.g-mark { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.g-tau { position: absolute; top: -7px; bottom: -7px; width: 2px; margin-left: -1px; background: var(--tau); }
.g-tau span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; color: var(--tau); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.g-verdict { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
ul.sec, ul.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sec-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 0.8125rem; flex-wrap: wrap; }
ul.links li { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px dashed var(--rule); }
ul.links li:last-child { border-bottom: 0; }
ul.links a { display: grid; text-decoration: none; }
ul.links a:hover .lk-id { text-decoration: underline; }
.lk-l { font-size: 0.75rem; color: var(--muted); }
.lk-id { font-family: var(--font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; font-weight: 400; }
.lk-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card > .btn { margin-top: 12px; }
.final-sub { margin-top: 18px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--ink);
  border-radius: 6px 6px 8px 8px; scroll-margin-top: calc(var(--topbar) + 12px); }
.final-sub:focus { outline: none; }
.final-sub > h2 { margin-bottom: 8px; font-size: 1rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.final-sub > * + * { margin-top: 8px; }
pre.code.actions { max-height: 30rem; }
ol.actions { margin: 0; padding: 6px 10px 6px 2.6em; max-height: 30rem; overflow: auto; background: var(--inset); border: 1px solid var(--rule);
  border-radius: 4px; font: 0.8125rem/1.5 var(--font-mono); color: var(--muted); }
ol.actions li { padding: 1px 0; }
ol.actions li code { color: var(--ink); overflow-wrap: anywhere; }
ol.actions li.more { list-style: none; font-style: italic; }
ul.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
ul.files li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 0.8125rem; }
ul.files code.path { min-width: 0; overflow-wrap: anywhere; }
details.dfile { border-top: 1px solid var(--rule); padding: 6px 0; }
details.dfile:first-of-type { border-top: 0; }
details.dfile > summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 0.8125rem; }
details.dfile > summary .tagl { margin-left: 0; }
details.dfile > summary code { flex: 1; min-width: 0; }
details.dfile[open] > summary { margin-bottom: 6px; }
.dstat { font-family: var(--font-mono); font-size: 0.75rem; }

/* ---------------------------------------------------------------- compare */
.seg { display: inline-flex; flex-wrap: wrap; margin-top: 12px; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; }
.seg a { padding: 5px 12px; font-size: 0.8125rem; text-decoration: none; border-right: 1px solid var(--rule); }
.seg a:last-child { border-right: 0; }
.seg a[aria-current="page"] { background: var(--ink); color: var(--surface); font-weight: 600; }
.banner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
.bn-block { padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; min-width: 0; }
.bn-block > h2 { margin-bottom: 10px; font-size: 1rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.bn-block > * + * { margin-top: 8px; }
.bn-block details.task { padding: 8px 12px; background: var(--inset); }
.bn-block .task-d { max-height: 8rem; }
.pagehead h1 .h1-id { font: 600 0.8em/1.2 var(--font-mono); letter-spacing: 0; overflow-wrap: anywhere; }
.bn-out { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.8125rem; }
.bn-trusted { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.bn-trusted h3 { margin-bottom: 6px; font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.cols { display: grid; grid-template-columns: repeat(var(--ncols, 3), minmax(270px, 1fr)); gap: 16px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.col { padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--tone); border-radius: 6px 6px 8px 8px; min-width: 0; }
.col > * + * { margin-top: 10px; }
.col header h3 { font-size: 1rem; }
.col header .cond { font-size: 0.875rem; }
.col header .note { margin: 6px 0; }
.col h4 { font-size: 0.8125rem; color: var(--ink-2); }
.excerpts { display: grid; gap: 8px; }
blockquote.ex { margin: 0; padding: 6px 10px; border-left: 3px solid var(--rule-strong); background: var(--inset); border-radius: 0 6px 6px 0; }
blockquote.ex.ex-scratch { border-left-style: dashed; }
blockquote.ex p { margin: 2px 0 0; font: italic 0.9375rem/1.55 var(--font-prose); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- responsive, motion, print */
@media (min-width: 761px) {
  .hero { gap: 40px; padding: 12px 0 22px; }
  .masthead .eyebrow { margin-bottom: 12px; }
  .masthead h1 { font-size: clamp(2.5rem, 4.2vw, 3.75rem); line-height: 1.06; letter-spacing: -0.045em; }
  .masthead h1 em { display: inline; }
  .paper-title { max-width: 48ch; margin: 14px 0; font-size: 1.0625rem; line-height: 1.4; }
  .affiliation { font-size: 0.75rem; }
  .affiliation span { display: inline; margin-top: 0; }
  .affiliation span::before { content: " · "; }
  .hero-actions { margin-top: 16px; }
  .experiment { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 22px; }
  .experiment-label { margin-bottom: 16px; }
  .experiment-step { gap: 12px; }
  .step-number { width: 26px; height: 26px; }
  .experiment-step h2 { font-size: 1.0625rem; margin-bottom: 3px; }
  .experiment-step p { font-size: 0.6875rem; }
  .history-branch { margin: 8px 0 10px 12px; padding: 6px 0 6px 25px; }
  .history-branch > p { margin-bottom: 8px; }
  .history-options { display: flex; flex-wrap: wrap; gap: 6px; }
  .history-options > span { padding: 6px 8px; font-size: 0.6875rem; gap: 6px; }
  .experiment-baseline { margin-top: 14px; padding-top: 10px; }
  .task-example { padding-top: 22px; border-top: 1px solid var(--rule); }
  .task-example header .eyebrow { margin-bottom: 6px; }
  .task-example h2 { font-size: 1.75rem; }
  .task-example header > p:last-child { max-width: none; margin-top: 6px; font-size: 0.8125rem; line-height: 1.5; }
  .task-example-grid { gap: 16px; margin-top: 16px; }
  .task-example-objective { padding: 16px 20px; }
  .task-example-label { margin-bottom: 8px; }
  .task-example h3 { font-size: 1.25rem; }
  .task-example-objective > p:last-child { margin-top: 8px; font-size: 0.8125rem; line-height: 1.6; }
  .task-example footer { margin-top: 10px; font-size: 0.6875rem; }
}
@media (max-width: 1080px) {
  .hero { gap: 36px; }
  .ep-grid { grid-template-columns: minmax(0, 1fr); }
  .ep-side { position: static; max-height: none; overflow: visible; order: -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .tagcard { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
  :root { --topbar: 62px; }
  .topbar { padding: 0 16px; gap: 10px; }
  .brand { font-size: 1rem; gap: 7px; }
  .brand-mark { width: 24px; height: 24px; }
  .crumbs { display: none; }
  .topbar-paper { margin-left: auto; gap: 5px; font-size: 0.75rem; }
  .topbar-paper-label { display: none; }
  .theme { width: 32px; height: 32px; margin-left: 0; }
  main { padding: 20px 16px 48px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 20px 0 32px; }
  .eyebrow { font-size: 0.5625rem; letter-spacing: 0.09em; margin-bottom: 22px; }
  .masthead h1 { font-size: clamp(3.5rem, 13vw, 5rem); }
  .paper-title { margin-top: 22px; font-size: 1.125rem; max-width: 34ch; }
  .authors { font-size: 0.875rem; line-height: 1.7; }
  .authors > span { margin: 0 4px; }
  .hero-actions { gap: 8px; margin-top: 24px; }
  .home .btn { padding: 11px 12px; gap: 9px; font-size: 0.75rem; }
  .experiment { padding: 24px; }
  .experiment-label { margin-bottom: 26px; }
  .task-example { padding-top: 36px; }
  .task-example-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; }
  .task-example-objective { padding: 20px; }
  .task-example footer { font-size: 0.6875rem; line-height: 1.7; }
  .explorer { padding-top: 38px; }
  .explorer-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 22px; }
  .explorer-head > p { font-size: 0.8125rem; }
  .tagcard { padding: 18px 16px; }
  .tc-eyebrow { margin-bottom: 12px; font-size: 0.5625rem; }
  .tc-charts { padding: 16px 12px; gap: 22px; }
  .tc-charts .note { font-size: 0.6875rem; }
  .tc-charts .db figcaption { font-size: 0.75rem; }
  .db-lane, .db-axis { grid-template-columns: 7.2rem minmax(0, 1fr) 2.8rem; column-gap: 8px; }
  .tc-charts .db-lane, .tc-charts .db-axis { grid-template-columns: 6.4rem minmax(0, 1fr) 2.2rem; column-gap: 7px; }
  .tc-charts .db-label { font-size: 0.625rem; }
  .tc-charts .db-val { font-size: 0.75rem; }
  .tc-charts .db-ticks { font-size: 0.625rem; }
  .tc-charts .db-ticks:has(.db-taul) { padding-bottom: 15px; }
  .tc-charts .db-taul { top: 16px; }
  .paper-footer { align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 28px; }
  .paper-footer nav { gap: 20px; }
  .banner { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .msg, .prefix { padding: 10px 12px 12px; }
  .ep-side { grid-template-columns: minmax(0, 1fr); }
  dl.args > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  table.eps, table.eps tbody, table.eps thead { display: block; }
  table.eps thead tr { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 6px 12px; background: var(--inset); border-bottom: 1px solid var(--rule); }
  table.eps thead th { position: static; padding: 2px 0; border: 0; background: none; }
  table.eps thead th:not([aria-sort]) { display: none; }
  table.eps tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  table.eps tbody td { display: block; padding: 0; border: 0; }
  table.eps td.c-id { flex: 1 1 100%; }
  table.eps td.c-flags:empty { display: none; }
  table.eps .unit { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .ep-tools, .ep-nav, .keys { display: none; }
  body { background: #fff; }
  .ep-grid { grid-template-columns: 1fr; }
  .ep-side { position: static; max-height: none; overflow: visible; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .experiment { color: #202d27; background: #f2f4ee; break-inside: avoid; }
  .experiment p, .experiment h2 { color: #202d27; }
  .history-options > span { color: #202d27; background: #fff; }
  .tagcard { break-inside: avoid; }
}