/* NoCap evidence — shared design system (schema white paper · one product)
   ROUND_20260717_unify · index + prose + concepts share this sheet.
   Prior: concepts chrome · r2 teach-beat · pilot shell/docnav.
   Fair-Clock motion: --dur-ui* / --dur-chart / --ease-* / --beat-in-y (PRM zeroes).
   See DESIGN_AUDIT.md.

   Locked chrome width (match index — no nav jump):
     --shell / --shell-prose = 1120px  → all public pages
     --measure     = 68ch   (prose measure inside shell; shell stays 1120)
   Diagram override (Muon only, page-local):
     --shell-diagram = 1360px; set --shell / --measure on that page.

   Reader path (docnav order): Evidence → Report → Muon → Docs → Intro
   Concept companions (*-explained.html except muon): same sticky nav;
     aria-current="page" on Docs. Muon keeps Muon current; Intro keeps Intro.
   Accent: magenta (--ours) primary; teal (--accent) secondary / diagrams.
   Hedge accent: --warn (compute / Muon / non-claim callouts — not a win mark).
   Process beats: --kill / --bank / --seal (kill→bank→seal explainers). */

:root {
  --ink: #111111;
  --ink-2: #333333;
  --mute: #666666;
  --line: #e5e5e5;
  --line-strong: #111111;
  --paper: #ffffff;
  --paper-soft: #fafafa;
  --wash: #f3f7f7;
  --ours: #c2185b;
  --ours-wash: #fce4ec;
  --accent: #0d7377;
  --accent-ink: #0a5c5f;
  --accent-wash: #e6f3f3;
  --miss: #b42318;
  --warn: #9a3412;
  /* Process-spine tokens (kill → bank → seal) */
  --kill: #9a3412;
  --kill-wash: color-mix(in srgb, var(--kill) 10%, var(--paper));
  --bank: #0f766e;
  --bank-wash: color-mix(in srgb, var(--bank) 10%, var(--paper));
  --seal: var(--ours);
  --seal-wash: var(--ours-wash);
  --sans: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --measure: 68ch;
  /* Shell lock — match index dashboard width so chrome does not jump */
  --shell-prose: 1120px;
  --shell-diagram: 1360px;
  --shell: 1120px;
  --fig: 100%; /* concept / Muon figure width within shell */
  --gutter: 1.25rem;
  --docnav-h: 3.5rem; /* sticky .docnav height for scroll-margin; keep ≈ measured */

  /* Fair-Clock motion language — teach beats, not SaaS flourish.
     UI beats settle in ~180–280ms ease-out; chart draw runs longer.
     prefers-reduced-motion zeroes these and kills animation/transition. */
  --dur-ui-fast: 180ms;
  --dur-ui: 220ms;
  --dur-ui-slow: 280ms;
  --dur-chart: 520ms;
  --ease-out: ease-out;
  --ease-soft: cubic-bezier(0.23, 1, 0.32, 1); /* soft settle for scale/clock */
  --beat-in-y: 6px;
  --focus-ring: 2px solid var(--ours);
  --focus-offset: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Contain chrome overflow (rotated beat-arrows, long nowrap pills) at ~390px */
  overflow-x: hidden;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-ui-fast: 0ms;
    --dur-ui: 0ms;
    --dur-ui-slow: 0ms;
    --dur-chart: 0ms;
    --beat-in-y: 0px;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* L1 first-passage teach-beat end-state (no stagger) — L6 port target
     NOCAP-FE-002: later .fig-body svg.chart-in { opacity: 0 } must not win. */
  .fig-body svg.chart-in { opacity: 1 !important; }
  .fp-teach .teach-step { opacity: 1; }
  .fp-series { opacity: 1 !important; }
  .fp-series.fp-draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .fp-annot { opacity: 1 !important; }
  .fp-gate, .fp-base, .fp-cross, .fp-clock { opacity: 1 !important; }
  .fp-gap { opacity: 0.65 !important; }
  .fp-cross, .fp-clock { transform: none !important; }
  .fig-legend .k { opacity: 1 !important; }
  /* Concept explainer beat / teach surfaces — settle visible, no entrance */
  .beat-panel,
  .beat-panel.is-enter,
  .teach-steps .teach-step,
  .teach-step.is-on,
  .process-spine .beat,
  .te-host .beat-row > .beat {
    opacity: 1;
    transform: none;
  }
  .problem.is-te-dim,
  .problem.is-te-active { opacity: 1; }
  #packSvg [data-pack-layer],
  #packSvg .pack-product-pin,
  #packSvg .pack-step-note { opacity: 1 !important; transform: none !important; }
  .pack-controls { display: none; }
  /* Autoplay-driving CSS surfaces settle; JS should also honor matchMedia */
  .meter > span { transition: none !important; }
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.shell {
  /* 2 * --gutter === 2.5rem at default; keep one expression for concept + schema */
  width: min(var(--shell), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--ours); }
a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* NOCAP-FE-053 / FE-054 — global interactive focus; covers B32 .predict summary */
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.predict summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Skip link — paste with header.snippet.html; pages need <main id="main" tabindex="-1"> */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-ui-fast) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  color: #fff;
}

code, .mono, .num, .math {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
code {
  font-size: 0.86em;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  padding: 0.05em 0.28em;
  border-radius: 2px;
  /* Long URLs / identifiers at ~390px — wrap instead of widening the page */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.math { font-size: 0.92em; color: var(--ink); }

/* Delta recipe / URL lists (index callouts) — scroll or wrap, never page-widen */
.delta-code {
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
  -webkit-overflow-scrolling: touch;
}
.delta-code span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.callout code,
.callout .delta-code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ——— brand topbar ——— */
.topbar {
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
  background: var(--paper);
}
.brand-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.brand-line strong {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
}
.brand-line .mark {
  color: var(--ours);
  font-weight: 600;
}
.brand-line a.brand-home {
  color: inherit;
  text-decoration: none;
}
.brand-line a.brand-home:hover {
  color: inherit;
}
.brand-line a.brand-home:hover .mark {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.brand-line a.brand-home:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ——— site nav: Evidence | Report | Muon | Docs ———
   Sticky skim chrome — same order on every schema page.
   aria-current="page" set per surface (see header.snippet.html). */
.docnav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  /* hairline under sticky bar so content does not bleed through */
  box-shadow: 0 1px 0 var(--line);
  max-width: 100%;
  /* keep seven links; wrap instead of forcing document scrollWidth */
  overflow-x: clip;
}
.docnav a {
  color: var(--ink-2);
  text-decoration: none;
  /* NOCAP-FE-047: ≥~44px tap height; horizontal pad helps wrap at ~390 */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.35rem;
  border-bottom: 2px solid transparent;
  flex: 0 1 auto;
  min-width: 0;
  box-sizing: border-box;
}
.docnav a:hover {
  color: var(--ours);
  border-bottom-color: var(--ours-wash);
}
.docnav a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
.docnav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ours);
}
.docnav .sep {
  color: var(--line-strong);
  opacity: 0.35;
  user-select: none;
  flex: 0 0 auto;
}

/* Compact repo link — sits below docnav; wraps on narrow viewports (not an 8th nav item) */
.site-util {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.35rem 0 0.65rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  max-width: 100%;
}
.site-util a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-util a:hover {
  color: var(--ours);
  border-bottom-color: var(--ours-wash);
}
.site-util a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* Anchors clear sticky docnav on jump (skim path / TOC / #compute / #verification) */
h2, h3,
section[id],
section.block,
section.problem,
.abstract,
.spine,
.fp-teach,
.recompute,
.beat-panel,
.teach-steps,
.process-spine,
#compute,
#verification,
#recompute,
#claim-boundary,
#insight-kill-bank-seal,
#insight-read-the-stack,
#def,
#hedges,
#links {
  scroll-margin-top: calc(var(--docnav-h) + 0.75rem);
}

/* ——— prose ——— */
article.paper { padding: 2.2rem 0 3.5rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 1rem;
}

h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
  max-width: 26ch;
}
h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2.2rem 0 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-strong);
}
h3 {
  font-size: 1.03rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}
h4, h5, h6 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1.2rem 0 0.4rem;
  color: var(--ink-2);
}

p, li {
  max-width: var(--measure);
  color: var(--ink-2);
}
p { margin: 0 0 0.85rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }

ul, ol {
  margin: 0.4rem 0 1rem;
  padding-left: 1.3rem;
}
li { margin: 0.28rem 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

/* ——— skim-path shared blocks (Evidence / Report) ——— */
.byline {
  font-size: 0.95rem;
  color: var(--ink-2);
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  max-width: var(--measure);
}
.byline strong { color: var(--ink); font-weight: 600; }

.abstract {
  max-width: var(--measure);
  margin: 0 0 2.5rem;
  color: var(--ink-2);
}
.abstract p { margin: 0 0 0.85rem; }
.abstract p:last-child { margin-bottom: 0; }

.spine {
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0.85rem 0 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--ours-wash);
  border-left: 3px solid var(--ours);
  max-width: var(--measure);
}

.preview-banner {
  background: #111;
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.45rem 1rem;
}

/* Honest compute / verify cards — auto-fit so 2-up verify + 3-up tiers skim cleanly */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
  max-width: var(--measure);
}
.status-card {
  border: 1px solid var(--line);
  padding: 0.85rem 0.95rem;
  background: var(--paper-soft);
  border-radius: 0; /* schema: no soft cards */
}
.status-card h3 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  margin: 0 0 0.4rem;
  font-weight: 500;
  border-top: 0;
  padding-top: 0;
}
.status-card p {
  font-size: 0.92rem;
  margin: 0;
  max-width: none;
}
.status-card .metric {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Hedge / pending verify cards — warn ink, not magenta “ours” win */
.status-card.hedge,
#verification .status-card {
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
  background: color-mix(in srgb, var(--warn) 6%, var(--paper-soft));
}
#compute .status-card {
  border-top: 2px solid var(--line-strong);
}

.metric {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Badges (Evidence / Report page-local may duplicate) */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border: 1px solid currentColor;
}
.badge.hit { color: var(--ours); background: var(--ours-wash); }
.badge.miss { color: var(--miss); }
.badge.warn { color: var(--warn); }
.badge.ref { color: var(--mute); }

/* ——— callouts ——— */
blockquote,
.callout {
  margin: 1.1rem 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--ours);
  color: var(--ink-2);
  background: var(--paper-soft);
  max-width: var(--measure);
}
blockquote p { margin: 0.4rem 0; }
.callout {
  padding: 0.85rem 1rem;
  background: var(--wash);
  border-left-color: var(--accent);
  font-size: 0.95rem;
}
.callout strong { color: var(--accent-ink); }
.callout.ours {
  border-left-color: var(--ours);
  background: var(--ours-wash);
}
.callout.ours strong { color: var(--ours); }
/* Compute / Muon hedges — warn rail, not magenta claim */
.callout.hedge,
.callout.warn,
.callout[data-callout="claim-boundary"],
#claim-boundary {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--paper));
  color: var(--ink-2);
}
.callout.hedge strong,
.callout.warn strong,
.callout[data-callout="claim-boundary"] strong,
#claim-boundary strong {
  color: var(--warn);
}

.muted {
  color: var(--mute);
  font-style: italic;
}

/* ——— verify skim helpers (shared; pages may duplicate harmlessly) ——— */
.recompute {
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0.85rem 0;
  padding: 0.85rem 1rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  max-width: min(var(--measure), 100%);
  min-width: 0;
  /* NOCAP-FE-007: bare URLs in Evidence #links — wrap at 390, do not clip */
  overflow-wrap: anywhere;
  word-break: break-word;
}
#links .recompute {
  max-width: min(var(--measure), 100%);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.recompute::before {
  content: "Recompute · 3 lines";
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.35rem;
}
/* If page already labels the block, hide the CSS label when .recompute has a heading child */
.recompute:has(h3, h4, .eyebrow)::before { content: none; margin: 0; }

.links ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}
.links li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  max-width: none;
}
.links li:last-child { border-bottom: none; }

/* Verify / recompute section rhythm — CSS-only; no body HTML edits */
#verification > h2,
#recompute > h2 {
  letter-spacing: -0.015em;
}
#verification .status-grid,
#recompute .recompute {
  margin-top: 0.85rem;
}
/* Claimed / not-claimed skim: bold lead-ins already in copy; tighten following muted tone */
#verification p strong:first-child {
  font-family: var(--mono);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ——— code blocks / equations ——— */
p.eq {
  font-family: var(--mono);
  font-size: 0.9rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
  color: var(--ink);
  max-width: var(--measure);
}
pre,
.code-scroll {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}
pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  max-width: none; /* scroll on pre, not wrap mid-token in blocks */
  overflow-wrap: normal;
  word-break: normal;
}

/* ——— tables ——— */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 1.2rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th, td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mute);
  background: var(--paper-soft);
  border-bottom: 1px solid var(--line-strong);
}
tbody td p:last-child { margin-bottom: 0; }
tr.ours { background: var(--ours-wash); }
tr.ours td, tr.ours th { color: var(--ink); }

/* ——— figures / captions ——— */
figure.fig,
.fig {
  margin: 1.35rem 0 1.5rem;
  border: 1px solid var(--line);
  background: var(--paper);
}
.fig-body { padding: 0.85rem 0.85rem 0.35rem; }
.fig-body svg,
.fig svg {
  width: 100%;
  height: auto;
  display: block;
}
figcaption,
.fig-cap {
  padding: 0.75rem 0.9rem 0.95rem;
  font-size: 0.88rem;
  color: var(--mute);
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
figcaption strong,
.fig-cap strong { color: var(--ink-2); }
.fig-cap {
  margin: 0 0 1.25rem;
  padding: 0;
  border-top: 0;
  max-width: none;
}
.fig-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  margin: 0;
  padding: 1.25rem 0.25rem;
}
.fig-legend {
  padding: 0.55rem 0.85rem 0.85rem;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mute);
  border-top: 1px solid var(--line, #e5e5e5);
  background: var(--paper-soft, #fafafa);
}
.fig-legend-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 1rem;
}
@media (min-width: 720px) {
  .fig-legend-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.fig-legend .k {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.35;
  transition: opacity var(--dur-ui-slow, 240ms) ease-out;
}
.fig-legend .k.is-pending { opacity: 0.38; }
.fig-legend .k.is-dim { opacity: 0.5; }
.fig-legend .k.is-focus { opacity: 1; }
.fig-legend .k.is-focus .leg-text { color: var(--ink) !important; font-weight: 600; }
.fig-legend .leg-text { color: #444; }
.fig-legend .leg-text strong { color: var(--ink, #111); font-weight: 650; }
.fig-legend .sw {
  width: 22px;
  flex-shrink: 0;
  height: 0;
  border-top: 3px solid currentColor;
  display: inline-block;
}
.fig-legend .sw.dash { border-top-style: dashed; border-top-width: 2.5px; }

/* ——— first-passage teach-beat (L1 port surface; L6 wires markup) ———
   Classes match anim-review-fp-pilot.html: gate → clock → cross.
   Motion: opacity / light transform only. Numbers stay in chart data / captions. */
.fp-teach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--line);
  background: var(--paper-soft);
}
.teach-step {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.55rem 0.65rem;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.teach-step.is-on { opacity: 1; }
.teach-step.is-active {
  border-color: var(--ours);
  background: var(--ours-wash);
}
.teach-step .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 0.25rem;
}
.teach-step p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: none;
  color: var(--ink-2);
}
.teach-step code { font-size: 0.82em; }

.fp-verify-skim {
  margin: 0;
  padding: 0.55rem 0.85rem 0.75rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  line-height: 1.5;
  max-width: none;
}
.fp-verify-skim a { color: var(--ink); }
.fp-verify-skim strong { color: var(--ink-2); font-weight: 600; }

.fp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  padding: 0.65rem 0.85rem 0.85rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
}
.fp-controls button {
  font-family: var(--mono);
  font-size: 12px;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.fp-controls button:hover {
  border-color: var(--ours);
  color: var(--ours);
}
.fp-controls button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.fp-controls button[aria-pressed="true"] {
  border-color: var(--ours);
  background: var(--ours-wash);
  color: var(--ours);
}
.fp-mode-hint {
  color: var(--mute);
  font-size: 12px;
}

/* Live readout strip (TensorTonic-style transport readouts) */
.fp-readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.fp-readout-box {
  border: 1px solid var(--line);
  padding: 0.45rem 0.55rem;
  background: var(--paper-soft);
  min-width: 0;
}
.fp-readout-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.2rem;
}
.fp-readout-val {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* SVG teach layers — progressive disclosure (axes → gate → clock → s2029 → settle) */
.fp-series {
  opacity: 0;
  transition: opacity var(--dur-ui-slow) var(--ease-out);
}
.fp-series.is-on { opacity: 1; }
.fp-series.is-on.is-dim { opacity: 0.28; }
.fp-series.fp-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.fp-series.fp-draw.is-drawn {
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 1.05s var(--ease-out),
    opacity var(--dur-ui-slow) var(--ease-out);
}
/* Settled (and reduced-motion full chart): curves must be fully stroked — not left
   at opacity 0 / pathLength dash undrawn if teach classes missed a beat. */
[data-fp-settled="1"] .fp-series,
[data-fp-settled="1"] .fp-series.fp-draw {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity var(--dur-ui-slow) var(--ease-out);
}
[data-fp-settled="1"] .fp-annot,
[data-fp-settled="1"] .fp-cross {
  opacity: 1;
  transform: none;
}
.fp-annot {
  opacity: 0;
  transition: opacity var(--dur-ui-slow) var(--ease-out);
}
.fp-annot.is-on { opacity: 1; }
.fp-annot.is-on.is-dim { opacity: 0.35; }
/* Settled callouts: short labels + leaders; dense hours stay in legend */
.fp-callout .fp-leader {
  pointer-events: none;
}
.fp-annot-stock {
  font-weight: 500;
}
@media (max-width: 420px) {
  /* Markers stay; short callouts / stock ink defer to legend + readout */
  .fp-callout,
  .fp-annot-stock,
  .fp-gap-label { display: none; }
}
.fp-gate, .fp-base, .fp-gap {
  opacity: 0;
  transition: opacity var(--dur-ui-slow) var(--ease-out);
}
.fp-gate.is-on, .fp-base.is-on { opacity: 1; }
.fp-gap.is-on { opacity: 0.65; }
.fp-clock {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.55);
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui-slow) var(--ease-soft);
}
.fp-clock.is-on {
  opacity: 1;
  transform: scale(1);
}
.fp-cross {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.55);
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui-slow) var(--ease-soft);
}
.fp-cross.is-on {
  opacity: 1;
  transform: scale(1);
}
.fp-cross.is-on.is-dim { opacity: 0.35; }

/* Compact first-passage embed (report #metric skim) */
.fp-compact {
  margin: 1rem 0 0.75rem;
}
.fp-compact .fig-body {
  padding: 0.55rem 0.65rem 0.25rem;
}
.fp-compact .fig-cap,
.fp-compact figcaption {
  font-size: 0.82rem;
  color: var(--mute);
  padding: 0.45rem 0.65rem 0.65rem;
  border-top: 1px solid var(--line);
  max-width: none;
}
.fp-compact .fp-readout {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
}
.fp-compact .fp-readout-box {
  padding: 0.35rem 0.45rem;
}
.fp-compact .fp-readout-label {
  font-size: 9px;
}
.fp-compact .fp-readout-val {
  font-size: 0.82rem;
}
.fp-compact .fp-controls {
  padding: 0.45rem 0.65rem 0.55rem;
}
@media (max-width: 640px) {
  .fp-compact .fp-readout { grid-template-columns: repeat(2, 1fr); }
}

/* not-claimed threshold viz — TT PR@K readout states */
.na-viz .fp-readout-val.is-na { color: var(--hedge, #9a3412); font-weight: 600; }
.na-viz .fp-readout-val.is-hit { color: var(--ours, #c2185b); }
.na-viz .fp-readout-val.is-miss { color: var(--mute); }

.fig-body svg.chart-in {
  opacity: 0;
  animation: nocap-chart-in var(--dur-chart) var(--ease-out) forwards;
}
@keyframes nocap-chart-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* NOCAP-FE-008 hook — axis tick font-size is SVG presentation attrs from
   assets/first-passage-chart.js (var fs / compact). ViewBox scale makes CSS
   font-size unreliable for legibility at 390; JS lane owns the bump.
   Optional override surface (do not rely on alone):
   .fig-body svg text { } */

/* ——— concept explainers (*-explained.html) — shared TensorTonic-ish chrome ———
   Pages: muon-explained, kill-bank-seal-explained, split-qkv-explained,
   b32-systems-explained (incoming). Page-local CSS may duplicate harmlessly;
   L6 may strip duplicates once markup uses these classes.
   Shell: prose concepts inherit --shell 720; Muon keeps page-local 1360. */
.subtitle {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--mute);
  margin: 0 0 1rem;
}
.lede {
  max-width: var(--measure);
  color: var(--ink-2);
  margin: 0 0 1.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.lede p { margin: 0 0 0.7rem; }
.lede p:last-child { margin-bottom: 0; }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  max-width: 100%;
  min-width: 0;
}
.pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink-2);
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pill.acc {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.pill.ours {
  border-color: var(--ours);
  background: var(--ours-wash);
  color: #880e4f;
}
.pill.kill {
  border-color: var(--kill);
  background: var(--kill-wash);
  color: var(--kill);
}
.pill.bank {
  border-color: var(--bank);
  background: var(--bank-wash);
  color: var(--bank);
}
.pill.seal {
  border-color: var(--seal);
  background: var(--seal-wash);
  color: var(--seal);
}
.pill.warn {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--paper));
  color: var(--warn);
}

.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0.65rem 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  max-width: 100%;
  min-width: 0;
}
.sources a {
  color: var(--accent-ink);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Problem cards — TensorTonic numbered chrome */
.problem {
  width: min(var(--fig), 100%);
  margin: 0 0 1.75rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.problem-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.problem-meta .diff { color: var(--accent-ink); }
.problem[data-beat="kill"] .problem-meta .diff { color: var(--kill); }
.problem[data-beat="bank"] .problem-meta .diff { color: var(--bank); }
.problem[data-beat="seal"] .problem-meta .diff { color: var(--seal); }
.problem-body { padding: 1.05rem 1rem 1.15rem; }
.problem-body > h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.65rem;
  padding: 0;
  border: 0;
}
.problem-body > p {
  margin: 0 0 0.75rem;
  max-width: none;
}
.problem-body > p:last-child { margin-bottom: 0; }

h2.section {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2.25rem 0 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-strong);
}

.def-box {
  width: min(var(--fig), 100%);
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.05rem;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
}
.def-box.ours {
  background: var(--ours-wash);
  border-color: var(--ours);
}
.def-box .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 0.5rem;
}
.def-box.ours .label { color: #880e4f; }
.def-box .eq {
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
  overflow-x: auto;
}

.eq-block {
  font-family: var(--mono);
  font-size: 0.88rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  padding: 0.7rem 0.9rem;
  color: var(--ink);
  overflow-x: auto;
  max-width: var(--fig);
  margin: 0.85rem 0 1.1rem;
}

.fig-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.fig-head strong {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
}

.toc {
  max-width: var(--measure);
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  font-size: 0.95rem;
}
.toc strong {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  margin-bottom: 0.45rem;
}
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc a { color: var(--ink-2); }

.provenance {
  max-width: var(--measure);
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  background: var(--paper-soft);
  font-size: 0.92rem;
  color: var(--ink-2);
}
.provenance p { margin: 0 0 0.55rem; max-width: none; }
.provenance p:last-child { margin-bottom: 0; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  margin-right: 0.25rem;
  border: 1px solid var(--line);
  vertical-align: middle;
}
.tag.blog {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.tag.ours {
  border-color: var(--ours);
  background: var(--ours-wash);
  color: #880e4f;
}
.tag.commentary {
  border-color: var(--line-strong);
  background: var(--wash);
  color: var(--ink-2);
}

.split-note {
  max-width: var(--measure);
  margin: 1.1rem 0;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--line-strong);
  font-size: 0.92rem;
  color: var(--ink-2);
}

.example {
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  font-size: 0.92rem;
}
.example strong {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mute);
  margin: 0 0 0.4rem;
}
.example ul { margin: 0; padding-left: 1.15rem; }
.example li { margin: 0.25rem 0; max-width: none; }

/* Beat panels — process spine (kill→bank→seal) + 3-up concept grids */
.process-spine {
  width: min(var(--fig), 100%);
  max-width: 100%;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  /* contain rotated beat-arrows so they cannot inflate document scrollWidth */
  overflow-x: clip;
}
.process-spine .fig-head {
  /* inherits .fig-head */
  min-width: 0;
}

.beat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}
.beat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.85rem 0 0.35rem;
  min-width: 0;
  max-width: 100%;
}

/* Canonical shared class: .beat-panel (alias: .beat inside spine/grid) */
.beat-panel,
.beat-row > .beat,
.beat-grid > .beat {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  min-width: 0;
  padding: 0;
}
.beat-row > .beat {
  border: 0;
  padding: 1rem 0.85rem 1.05rem;
  text-align: left;
}
.beat-panel .n,
.beat .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
  color: var(--mute);
}
.beat-panel h3,
.beat h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
}
.beat-panel p,
.beat-row > .beat p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  max-width: none;
}
.beat.kill,
.beat-panel.kill { background: var(--kill-wash); }
.beat.kill .n,
.beat.kill h3,
.beat-panel.kill .n,
.beat-panel.kill h3 { color: var(--kill); }
.beat.bank,
.beat-panel.bank { background: var(--bank-wash); }
.beat.bank .n,
.beat.bank h3,
.beat-panel.bank .n,
.beat-panel.bank h3 { color: var(--bank); }
.beat.seal,
.beat-panel.seal { background: var(--seal-wash); }
.beat.seal .n,
.beat.seal h3,
.beat-panel.seal .n,
.beat-panel.seal h3 { color: var(--seal); }

.beat-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.2rem;
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--mute);
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.beat-head {
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.beat-head strong {
  display: block;
  color: var(--ink);
  letter-spacing: 0;
  font-size: 12px;
  margin-top: 0.15rem;
}
.beat.joint .beat-head,
.beat-panel.joint .beat-head { border-top: 2px solid var(--line-strong); }
.beat.cheap .beat-head,
.beat-panel.cheap .beat-head,
.beat.ours .beat-head,
.beat-panel.ours .beat-head { border-top: 2px solid var(--ours); }
.beat.dual .beat-head,
.beat-panel.dual .beat-head,
.beat.warn .beat-head,
.beat-panel.warn .beat-head { border-top: 2px solid var(--warn); }

.beat-body {
  padding: 0.7rem 0.65rem 0.8rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.beat-body p { margin: 0 0 0.45rem; max-width: none; }
.beat-body p:last-child { margin-bottom: 0; }
.beat-body .mono-line {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--mute);
  line-height: 1.45;
}

.meter {
  margin: 0.55rem 0 0.25rem;
  height: 8px;
  background: var(--line);
  position: relative;
}
.meter > span {
  display: block;
  height: 100%;
  background: var(--ink-2);
}
.beat.cheap .meter > span,
.beat-panel.cheap .meter > span,
.beat.ours .meter > span { background: var(--ours); }
.beat.dual .meter > span,
.beat-panel.dual .meter > span,
.beat.warn .meter > span { background: var(--warn); }
.meter-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.03em;
}

/* Optional entrance for L1 motion on beat panels — PRM settles above */
.beat-panel.is-enter,
.beat.is-enter {
  animation: nocap-beat-in var(--dur-ui) var(--ease-out) both;
}
@keyframes nocap-beat-in {
  from { opacity: 0; transform: translateY(var(--beat-in-y)); }
  to { opacity: 1; transform: none; }
}

/* B32 pack-scrub teach transport (b32-systems-explained #p2) */
.pack-readout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.pack-readout-box {
  border: 1px solid var(--line);
  padding: 0.45rem 0.55rem;
  background: var(--paper-soft);
  min-width: 0;
}
.pack-readout-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.2rem;
}
.pack-readout-val {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pack-controls.fp-controls { border-top: 1px solid var(--line); }
#packSvg [data-pack-layer] {
  opacity: 0.28;
  transition: opacity var(--dur-ui-slow) var(--ease-out);
}
#packSvg [data-pack-layer].is-on { opacity: 1; }
#packSvg [data-pack-layer].is-dim { opacity: 0.22; }
#packSvg [data-pack-layer].is-active .pack-b32-bars rect { stroke-width: 2; }
#packSvg .pack-product-pin {
  opacity: 0;
  transform: translateY(-4px);
  transform-box: fill-box;
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui-slow) var(--ease-out);
}
#packSvg .pack-product-pin.is-on { opacity: 1; transform: none; }
#packSvg .pack-step-note {
  opacity: 0.55;
  transition: opacity var(--dur-ui-slow) var(--ease-out);
}
#packSvg[data-beat="2"] .pack-step-note,
#packSvg[data-settle="1"] .pack-step-note { opacity: 1; }
#packSvg[data-beat="2"] .pack-step-note { fill: #880e4f; font-weight: 600; }

/* Transport engine — Play / Step / Reset (TensorTonic-style) */
.te-host .te-progress {
  height: 3px;
  background: var(--line);
}
.te-host .te-progress-fill {
  height: 100%;
  width: 0;
  background: var(--ours);
  transition: width var(--dur-ui) var(--ease-out);
}
.te-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
}
.te-rail button {
  padding: 0.45rem 0.4rem;
  text-align: center;
  color: var(--mute);
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  font: inherit;
}
.te-rail button:last-child { border-right: 0; }
.te-rail button:hover { background: var(--paper-soft); }
.te-rail button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}
.te-rail button[aria-pressed="true"] { font-weight: 600; }
.te-host[data-step="0"] .te-rail [data-goto="0"] {
  color: var(--kill); background: var(--kill-wash);
}
.te-host[data-step="1"] .te-rail [data-goto="1"] {
  color: var(--bank); background: var(--bank-wash);
}
.te-host[data-step="2"] .te-rail [data-goto="2"] {
  color: var(--seal, var(--ours)); background: var(--seal-wash, var(--ours-wash));
}
.te-host .beat-row > .beat {
  opacity: 0.42;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.te-host .beat-row > .beat.is-on { opacity: 1; }
.te-host[data-reduce="1"] .beat-row > .beat { opacity: 1; }
.te-host .beat-row > .beat.is-active {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent);
}
.te-caption {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-2);
  background: var(--paper-soft);
  min-height: 2.75rem;
}
.te-caption [data-k="caption"] { margin: 0; max-width: none; }
.te-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: center;
  padding: 0.65rem 0.85rem 0.85rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
}
.te-controls button {
  font: inherit;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.te-controls button:hover {
  border-color: var(--ours);
  color: var(--ours);
}
.te-controls button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.te-controls button[aria-pressed="true"] {
  border-color: var(--ours);
  background: var(--ours-wash);
  color: var(--ours);
}
.te-mode-hint { font-size: 12px; color: var(--mute); }
.problem.is-te-dim {
  opacity: 0.58;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.problem.is-te-active {
  opacity: 1;
  box-shadow: inset 3px 0 0 var(--ours);
}
.problem[data-beat="kill"].is-te-active { box-shadow: inset 3px 0 0 var(--kill); }
.problem[data-beat="bank"].is-te-active { box-shadow: inset 3px 0 0 var(--bank); }
.problem[data-beat="seal"].is-te-active { box-shadow: inset 3px 0 0 var(--seal, var(--ours)); }
.problem[data-beat="layout"].is-te-active { box-shadow: inset 3px 0 0 var(--ink); }
.problem[data-beat="converge"].is-te-active { box-shadow: inset 3px 0 0 #c2185b; }
.problem[data-beat="ns"].is-te-active { box-shadow: inset 3px 0 0 #0f766e; }

/* split-vs-ortho transport (TT matrix-transpose + adam-optimizer Step readouts) */
.svo-transport .beat.layout { color: var(--ink); }
.svo-transport .beat.converge { color: #c2185b; }
.svo-transport .beat.ns { color: #0f766e; }
.svo-transport[data-step="0"] .te-rail [data-goto="0"] {
  color: var(--ink); background: var(--paper-soft);
}
.svo-transport[data-step="1"] .te-rail [data-goto="1"] {
  color: #880e4f; background: var(--ours-wash);
}
.svo-transport[data-step="2"] .te-rail [data-goto="2"] {
  color: #0f766e; background: #ecfdf5;
}
.svo-transport .svo-viz {
  padding: 0.65rem 0.75rem 0.35rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.svo-transport .svo-viz svg { display: block; width: 100%; height: auto; }
.svo-transport .svo-layer {
  opacity: 0.22;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.svo-transport .svo-layer[data-layer="layout"] { opacity: 1; }
.svo-transport[data-step="1"] .svo-layer[data-layer="layout"],
.svo-transport[data-step="2"] .svo-layer[data-layer="layout"],
.svo-transport[data-reduce="1"] .svo-layer[data-layer="layout"] { opacity: 0.55; }
.svo-transport[data-step="1"] .svo-layer[data-layer="converge"],
.svo-transport[data-step="2"] .svo-layer[data-layer="converge"],
.svo-transport[data-reduce="1"] .svo-layer[data-layer="converge"] { opacity: 1; }
.svo-transport[data-step="2"] .svo-layer[data-layer="ns"],
.svo-transport[data-reduce="1"] .svo-layer[data-layer="ns"] { opacity: 1; }
.svo-transport .svo-readout { grid-template-columns: repeat(4, 1fr); }

/* Teach-step rail (concept pages; complements .fp-teach) */
.teach-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.55rem;
  margin: 0.85rem 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--paper-soft);
}
.teach-steps .teach-step {
  opacity: 1; /* concept default: visible; JS may still toggle .is-active */
}

tr.cand { background: var(--ours-wash); }
tr.kill-row { background: color-mix(in srgb, var(--warn) 8%, var(--paper)); }

/* ——— footer ——— */
footer {
  border-top: 1px solid var(--line-strong);
  padding: 1.3rem 0 2.5rem;
  font-size: 0.84rem;
  color: var(--mute);
}
footer p {
  margin: 0 0 0.4rem;
  max-width: var(--measure);
  color: var(--mute);
}
footer a { color: var(--mute); }

/* TT Case 1/2/3 tabs — pure CSS; L6 seeds + report #numbers */
.tt-case {
  width: min(var(--fig, 100%), 100%);
  margin: 0.85rem 0 1rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.tt-case .fig-head {
  border-bottom: 1px solid var(--line);
}
.tt-case input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tt-case-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
}
.tt-case-tabs label {
  flex: 1 1 0;
  min-width: 6.5rem;
  padding: 0.5rem 0.65rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mute);
  border-right: 1px solid var(--line);
  cursor: pointer;
  margin: 0;
}
.tt-case-tabs label:last-of-type { border-right: 0; }
.tt-case input[type="radio"]:focus-visible + label {
  outline: var(--focus-ring);
  outline-offset: -2px;
}
.tt-case input[type="radio"]:checked + label {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ours);
  font-weight: 600;
}
.tt-case-panel {
  display: none;
  padding: 0.85rem 0.9rem 0.95rem;
}
.tt-case input#tt-case-1:checked ~ .tt-case-panels [data-case="1"],
.tt-case input#tt-case-2:checked ~ .tt-case-panels [data-case="2"],
.tt-case input#tt-case-3:checked ~ .tt-case-panels [data-case="3"] {
  display: block;
}
.tt-case-panels .fp-readout {
  padding: 0;
  border: 0;
  background: transparent;
}
.tt-case-note {
  margin: 0.65rem 0 0;
  font-size: 0.88rem;
  color: var(--mute);
  max-width: none;
}
.tt-case-panel.cand-only {
  background: #fff7ed;
}

@media (max-width: 760px) {
  /* Stack process spine before three-up squeezes past ~390–720 content width */
  .beat-row { grid-template-columns: 1fr; }
  .beat-arrow {
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0.25rem;
    transform: rotate(90deg);
    justify-self: center;
  }
  .beat-grid { grid-template-columns: 1fr; }
  .teach-steps { grid-template-columns: 1fr; }
  .tt-case-tabs label { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .tt-case-tabs label:last-of-type { border-bottom: 0; }
  .fp-readout,
  .svo-transport .svo-readout { grid-template-columns: repeat(2, 1fr); }
  :root { --docnav-h: 4.75rem; } /* NOCAP-FE-050: taller taps; wrap when needed */
}

/* QKV attention teach — softmax bar readouts (qkv-explained.html) */
.qkv-temp-knob {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--line);
  background: var(--paper-soft);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
}
.qkv-temp-knob label { display: flex; align-items: center; gap: 0.55rem; margin: 0; cursor: pointer; }
.qkv-temp-knob input[type="range"] { width: min(12rem, 42vw); accent-color: var(--ours); }
.qkv-temp-knob .qkv-temp-val { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 2.5rem; }
.qkv-readout .fp-readout-val[data-k="weight"] { color: #880e4f; }

@media (max-width: 640px) {
  :root {
    --shell: 100%;
    --shell-prose: 100%;
    --docnav-h: 5.25rem; /* ≈ one–two tall rows + nav padding */
    --gutter: 0.875rem;
  }
  .shell {
    width: calc(100% - 2 * var(--gutter));
    max-width: 100%;
  }
  h1 { max-width: none; }
  .status-grid { grid-template-columns: 1fr; }
  .fp-teach { grid-template-columns: 1fr; }
  .fp-readout { grid-template-columns: repeat(2, 1fr); }
  .pack-readout { grid-template-columns: 1fr; }
  .docnav {
    column-gap: 0.45rem;
    row-gap: 0.2rem;
    font-size: 12px;
  }
  .docnav a {
    padding: 0.5rem 0.4rem;
    min-height: 2.75rem;
  }
  .sources a { white-space: normal; overflow: visible; text-overflow: unset; }
}

/* Phone chrome — seven-link nav wraps; drop pipe seps to avoid x-overflow */
@media (max-width: 420px) {
  /* NOCAP-FE-047/050: taller taps force wrap; token ≈ measured sticky height */
  :root { --docnav-h: 7rem; } /* two rows of ~44px + row-gap + nav pad */
  .docnav {
    column-gap: 0.35rem;
    row-gap: 0.15rem;
    font-size: 11px;
  }
  .docnav a {
    padding: 0.55rem 0.45rem;
    min-height: 2.75rem;
  }
  .docnav .sep { display: none; }
  .brand-line { font-size: 11px; gap: 0.5rem; }
  .pill { font-size: 10px; padding: 0.24rem 0.45rem; }
}

/* Split-QKV layout toggle (TT dropout-training mode switch) */
.sq-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
}
.sq-mode-toggle button {
  padding: 0.5rem 0.65rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mute);
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.sq-mode-toggle button:last-child { border-right: 0; }
.sq-mode-toggle button:hover { background: var(--paper); color: var(--ink); }
.sq-mode-toggle button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}
.sq-layout-host[data-mode="joint"] .sq-mode-toggle [data-mode="joint"],
.sq-layout-host[data-mode="split"] .sq-mode-toggle [data-mode="split"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ours);
  font-weight: 600;
}
.sq-layout-host[data-mode="split"] .sq-mode-toggle [data-mode="split"] {
  color: #880e4f;
  box-shadow: inset 0 -2px 0 var(--ours);
}
.sq-layout-host #sqLayoutSvg .layer-split { display: none; }
.sq-layout-host #sqLayoutSvg .layer-joint { display: block; }
.sq-layout-host[data-mode="split"] #sqLayoutSvg .layer-joint { display: none; }
.sq-layout-host[data-mode="split"] #sqLayoutSvg .layer-split { display: block; }
.sq-layout-host .sq-mode-hint {
  padding: 0.45rem 0.85rem;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  border-top: 1px solid var(--line);
  background: var(--paper-soft);
}

/* Split-QKV three-beat transport (#p3) */
.sq-beats-host.te-host .beat-grid {
  margin: 0;
  padding: 0.85rem 0.75rem 0.55rem;
}
.sq-beats-host.te-host .beat-grid > .beat {
  opacity: 0.38;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.sq-beats-host.te-host .beat-grid > .beat.is-on { opacity: 1; }
.sq-beats-host.te-host[data-reduce="1"] .beat-grid > .beat { opacity: 1; }
.sq-beats-host.te-host .beat-grid > .beat.is-active {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ours) 35%, transparent);
}
.sq-beats-host.te-host .beat-grid > .beat.dual.is-active {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warn) 45%, transparent);
}
.sq-beats-host.te-host[data-step="0"] .te-rail [data-goto="0"] {
  color: var(--ink); background: var(--paper-soft);
}
.sq-beats-host.te-host[data-step="1"] .te-rail [data-goto="1"] {
  color: #880e4f; background: var(--ours-wash);
}
.sq-beats-host.te-host[data-step="2"] .te-rail [data-goto="2"] {
  color: var(--warn); background: #fff7ed;
}
.sq-beats-host .sq-tax-stamp {
  display: none;
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--warn);
  background: #fff7ed;
  color: var(--warn);
  z-index: 1;
}
.sq-beats-host[data-step="2"] .beat.dual .sq-tax-stamp,
.sq-beats-host[data-reduce="1"] .beat.dual .sq-tax-stamp {
  display: block;
}
.sq-beats-host .beat.dual { position: relative; }

@media print {
  .skip-link,
  .docnav,
  .preview-banner,
  .fp-controls,
  .pack-controls,
  .te-controls,
  .te-rail,
  .te-progress { display: none; }
  body { font-size: 11pt; }
  a { text-decoration: none; }
  .teach-step { opacity: 1; }
  .beat-panel,
  .process-spine .beat { opacity: 1; transform: none; }
  .fp-gate, .fp-base, .fp-cross, .fp-gap,
  .fp-series, .fp-series.fp-draw, .fp-annot, .fp-clock { opacity: 1; }
  .fp-series.fp-draw { stroke-dashoffset: 0; }
  .fig-body svg.chart-in { opacity: 1; }
}