/* ─── public/intro-functional/style.css ─── */
.intro-functional {
  max-width: 980px; margin: 0 auto;

  .if-row { display: flex; flex-direction: column; gap: 14px; }
  .if-row + .if-row { margin-top: 18px; }
  @container (min-width: 768px) {
    .if-row { flex-direction: row; align-items: stretch; }
    /* bottom two cards: capped + centered so they don't stretch to half-width.
       Floor is set by E's two-column checklist ("make complex inferences"). */
    .if-row-2 { justify-content: center; }
    .if-row-2 .if-cell { max-width: 420px; }
  }

  .if-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
  /* (A) Verbal report — extends shared .fig-title; sits above the card */
  .if-hdr { margin: 0 0 6px 2px; }
  /* shared .card.light supplies border / radius / bg; we own layout + spacing */
  .if-card { flex: 1; padding: 12px 14px 14px; display: flex; flex-direction: column; }

  /* prompt question — extends shared .prompt-block; questions are sans serif
     english, not tokenized, so wrap normally instead of pre-wrap */
  .if-q { white-space: normal; padding: 6px 9px; margin-bottom: 14px; }
  .if-q em { font-style: italic; color: var(--text-light); }

  /* mid: thought bubble pinned left so its bottom-left corner sits at a fixed
     offset above Clawd's head; trailing circles (on .if-thoughtwrap) drop from
     that corner down-left to him. */
  .if-mid { flex: 1; min-height: 96px; display: flex; align-items: center;
    justify-content: flex-start; padding: 6px 0 12px 42px; }
  .if-thoughtwrap { display: flex; flex-direction: column; align-items: center;
    position: relative; max-width: 100%; }
  /* intervention op label ("swap" / "ablate") — extends shared .mlabel */
  .if-op { margin-bottom: 2px; }
  /* J-space thought bubble: manilla fill + kraft dashed outline, matching the
     J-space band/sliver in intro-structural and the .ws-band charts. */
  .if-thought { background: var(--brand-manilla); border: 1.5px dashed var(--brand-kraft);
    border-radius: 50%; padding: 14px 30px; text-align: center;
    font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.45;
    min-width: 150px; box-sizing: border-box; max-width: 100%; }
  /* swap: removed lens token struck-through + light gray; installed token teal —
     same vocabulary as repeat-switch .t.abl / .t.don */
  .if-from { color: var(--text-light); text-decoration: line-through;
    text-decoration-thickness: 1px; }
  .if-to { color: var(--brand-clay); }
  .if-thought-ablated .if-from { color: var(--text-faint); }
  /* thought-bubble tail — two circles, small→large, anchored at the bubble's
     bottom-left corner so they always touch it and trail down toward Clawd. */
  .if-thoughtwrap::before, .if-thoughtwrap::after { content: ''; position: absolute;
    border: 1.5px solid var(--brand-kraft); background: var(--brand-manilla);
    border-radius: 50%; box-sizing: border-box; }
  .if-thoughtwrap::before { width: 14px; height: 14px; left: -3px;  bottom: -7px; }
  .if-thoughtwrap::after  { width: 8px;  height: 8px;  left: -19px; bottom: -22px; }

  /* B's chain — meandering svg path inside a larger ellipse */
  .if-thought-chain { padding: 16px 20px; border-radius: 50%; min-width: 0; }
  .if-chain-svg { width: 200px; height: 42px; display: block; overflow: visible; }
  /* shared-styles forces sans on svg text for axes; chain tokens are lens reads */
  .if-chain-tok { font-family: var(--font-mono) !important; font-size: var(--fs-label);
    fill: var(--text); }
  .if-chain-arr { fill: none; stroke: var(--text-faint); stroke-width: 1; }
  .if-arr { color: var(--text-faint); padding: 0 3px; font-size: 0.9em; }

  /* Clawd + speech bubble row */
  .if-bottom { display: flex; align-items: flex-start; gap: 10px; }
  .if-robot { line-height: 0; flex-shrink: 0; padding-top: 4px; }
  .if-robot svg { display: block; }
  /* speech bubble output — rounded box with a left tail toward Clawd.
     Replaces .prompt-block so we control border-radius + the pseudo tail. */
  .if-out { position: relative; flex: 1; min-width: 0;
    font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6;
    white-space: normal; word-break: break-word;
    background: var(--tok-bg); border: 1px solid var(--tok-border);
    border-radius: 10px; padding: 6px 10px; }
  /* tail: bordered triangle via two stacked pseudo-elements (outer = border
     color, inner = fill color, 1px inset) */
  .if-out::before, .if-out::after { content: ''; position: absolute; top: 11px;
    width: 0; height: 0; border-style: solid; }
  .if-out::before { left: -8px; border-width: 6px 8px 6px 0;
    border-color: transparent var(--tok-border) transparent transparent; }
  .if-out::after  { left: -6.5px; border-width: 5px 7px 5px 0;
    border-color: transparent var(--tok-bg) transparent transparent; top: 12px; }
  .if-out .prompt-role { color: var(--text); }
  /* The leading "…" should stay attached to its phrase if the panel A/B
     output line wraps, so the inline output spans don't break internally. */
  .if-out-from { color: var(--text-light); text-decoration: line-through;
    text-decoration-thickness: 1px; display: inline-block; }
  .if-out-to { color: var(--brand-clay); display: inline-block; }

  /* D — table output (capital ⟶ ~~Paris~~ … Beijing). One grid so columns
     align across rows; .if-trow is display:contents so its spans land in the
     tracks. [label | arrow | from | to]: arrow points from the label to the
     from/to pair; from is the struck original (left-aligned column), to is
     the green replacement right-aligned at the bubble's right edge. */
  .if-ttable { display: grid; grid-template-columns: auto auto auto 1fr;
    align-items: baseline; gap: 2px 10px; line-height: 1.55; }
  .if-trow { display: contents; }
  .if-ttable .if-tk { color: var(--text-light); text-align: right; }
  .if-ttable .if-out-from { text-align: left; }
  .if-ttable .if-out-to { text-align: right; }
  /* arrow drawn as a 1px rule + CSS triangle head so it can be longer than
     the literal → glyph. font-size:0 hides the glyph. */
  .if-ttable .if-arr { font-size: 0; padding: 0; height: 0; width: 32px;
    border-top: 1px solid var(--text-faint); position: relative; align-self: center; }
  .if-ttable .if-arr::after { content: ''; position: absolute; right: -1px; top: -3px;
    border-style: solid; border-width: 2.5px 0 2.5px 5px;
    border-color: transparent transparent transparent var(--text-faint); }

  /* E — checklist output: two columns (✓s left, ✗s right) to keep card short */
  .if-ctitle { font-family: var(--font-sans); font-size: var(--fs-label);
    color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 4px; }
  .if-ccols { display: flex; gap: 18px; }
  .if-ccol { flex: 1 1 0; min-width: 0; }
  .if-crow { display: flex; align-items: center; gap: 8px; padding: 1.5px 0; }
  .if-ctxt { color: var(--text-light); }
  .if-cmark { font-size: 13px; width: 14px; text-align: center; flex-shrink: 0;
    font-weight: 700; font-family: var(--font-sans); }
  .if-cmark.ok   { color: var(--tol-teal); }
  .if-cmark.nope { color: var(--tol-red); }
}

/* ─── public/intro-structural/style.css ─── */
.intro-structural {
  display: flex; flex-direction: column; gap: 18px;
  align-items: stretch; max-width: 760px; margin: 0 auto;

  .is-diagram { flex: 0 0 auto; align-self: center; }
  .is-diagram svg { display: block; }

  .is-panels { flex: 1 1 0; min-width: 0; max-width: 430px; display: flex; flex-direction: column; gap: 14px; }

  /* panels: light-bordered cards */
  .is-panels .card { border: 1px solid var(--gray-300); border-radius: 6px;
    padding: 12px 14px; background: none; }
  .is-panels .card .fig-title { margin: 0 0 4px; }
  .is-panels .card .desc { font-size: var(--fs-body); color: var(--text-light); line-height: 1.45; }
  .is-panels .card .illo { margin-top: 12px; }
  .is-panels .card .illo svg { display: block; width: 100%; height: auto; }

  /* layer diagram svg text */
  .is-diagram text { fill: var(--text); }
  .is-diagram text.io { font-size: var(--fs-label); font-style: italic; fill: var(--text-light); }
  .is-diagram text.jspace { font-size: var(--fs-small); font-style: italic; fill: var(--text-light); }
  .is-diagram tspan.anno-key { font-size: var(--fs-body); font-weight: 600; fill: var(--text); }
  .is-diagram tspan.anno-sub { font-size: var(--fs-small); fill: var(--text-light); }
  .is-diagram text.layers-lbl { font-size: var(--fs-small); font-style: italic; fill: var(--text-light); }
  .is-diagram path.brace { stroke: var(--gray-400); stroke-width: 1; fill: none; }
  .is-diagram path.layer-arc { stroke: var(--gray-400); stroke-width: 1; fill: none; }

  /* panel illustration text */
  .illo text { font-size: var(--fs-label); fill: var(--text-light); }
  .illo text.illo-key { font-style: italic; }
}

@container (min-width: 768px) {
  .intro-structural { flex-direction: row; gap: 28px; align-items: flex-start; max-width: 820px; }
}

/* ─── public/ooo-heatmap/style.css ─── */
.ooo-heatmap {
  .lines .axis .tick line { stroke: var(--rule); }
  .heatmap .axis .tick line { stroke: var(--tick-line) !important; }
  .header { display: flex; gap: 6px; align-items: center; padding: 8px; position: sticky; top: 0; background: #fff; z-index: 100; border-bottom: 1px solid var(--rule); }
  .slug-picker { margin-right: 14px; }
  .slug-picker select { font-family: var(--font-mono); font-size: var(--fs-body); margin-right: 4px; }
  .x-slider { display: flex; gap: 2px; align-items: center; margin-right: 14px; }
  .x-slider input { width: 240px; }
  .x-val { font-family: var(--font-mono); width: 2ch; display: inline-block; text-align: right; margin-right: 4px; }
  .meta { font-size: var(--fs-small); color: var(--text-light); padding: 2px 8px; }
  .prompt { font-family: var(--font-mono); background: #f5f5f5; padding: 4px 8px; border-radius: 3px; width: 32ch; font-size: var(--fs-body); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
  .probes { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
  .probe-row { margin-bottom: 8px; }
  .probe-row.greyed { opacity: 0.35; filter: grayscale(0.7); }
  .probe-label { width: 110px; font-size: var(--fs-small); color: var(--text-light); font-family: var(--font-mono); padding-top: 20px; }
  .probe-label .sub { font-size: var(--fs-label); color: var(--text-faint); }
  .seg-label { font-size: var(--fs-label); color: var(--text-light); margin-right: 4px; }
  .seg { margin-right: 12px; }
  .seg button.sweep { color: var(--text-faint); font-size: var(--fs-figure); padding: 3px 6px; }
  .heatmap { width: 646px; }
  .lines { width: 374px; }
  .legend-row::before { content: ''; width: 110px; flex-shrink: 0; }
  .heatmap-legend { width: 646px; flex-shrink: 0; }
  .line-legend { width: 374px; flex-shrink: 0; padding-top: 14px; box-sizing: border-box; }
  .legend-item { flex: 1; }
  &:not(.picker) .slug-picker { display: none; }
  &:not(.picker) .header { border: none; position: static; padding: 0 0 12px; }
  &:not(.picker) .probe-label { display: none; }
  &:not(.picker) .legend-row::before { display: none; }
  .explore-link { margin-left: auto; font-size: var(--fs-small); color: var(--text-light); background: none; border: 1px solid var(--tick-line); border-radius: 3px; padding: 2px 8px; cursor: pointer; font-family: inherit; }
  .explore-link:hover { color: var(--text); border-color: var(--text-light); }
}

@container (max-width: 720px){
  .ooo-heatmap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ooo-heatmap .probe-row { flex-wrap: nowrap; flex-direction: row; }
  .ooo-heatmap .heatmap, .ooo-heatmap .lines, .ooo-heatmap .heatmap-legend, .ooo-heatmap .line-legend { flex-shrink: 0; }
  .ooo-heatmap .header { position: static; }
}

/* ─── public/ooo-abcd/style.css ─── */
.ooo-abcd, .ooo-abcd-probes {
  .abcd-title { display: flex; gap: 24px; align-items: baseline; margin-bottom: -10px; padding-left: 36px; min-height: 40px; }
  .abcd-title .fig-title { margin: 0; position: relative; top: 17px;}
  .abcd-title .expr { font-family: var(--font-mono); font-size: var(--fs-body); white-space: pre; position: relative; }
  .op-brackets { position: absolute; left: 0; bottom: calc(100% + 4px); right: 0; height: 12px; pointer-events: none; }
  .op-bracket { position: absolute; height: 3px; box-sizing: border-box; border-style: solid; border-width: 1px 1px 0 1px; }
  .scrub-stack { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; gap: 4px; position: relative; z-index: 2; }
  .scrub-stack input { width: 56px; }
  .scrub { display: inline-block; min-width: 2ch; text-align: center; padding: 0 4px; font-weight: 600; background: #EAECED; border-radius: 3px; cursor: ew-resize; user-select: none; touch-action: none; line-height: 1.4; }
  .scrub:hover, .scrub:focus-visible, .scrub.dragging, .scrub-stack:has(input:active) .scrub { outline: 1px solid var(--text); outline-offset: -1px; }
  .op { display: inline-block; vertical-align: top; }

  .abcd-probe-hdr { margin: 18px 0 4px; padding-left: 36px; }
  .heatmap-legend { margin-top: 14px; }
  .line-legend { margin-top: 14px; padding: 0 10px 0 44px; box-sizing: border-box; }
  .legend-item { font-family: var(--font-sans); font-size: var(--fs-label); }
  .legend-item .val { display: inline-block; min-width: 4ch; text-align: left; }
}

/* mobile: heatmap is fixed-width canvas (~700px) and can't reflow, so the
   probe-row becomes a horizontal-scroll carousel — heatmap and line panel
   are snap stops. probe-row contains its own overflow so fitMount sees the
   mount at container width and doesn't scale. */
@container (max-width: 768px){
  .ooo-abcd .abcd-title, .ooo-abcd-probes .abcd-title { flex-direction: column; gap: 6px; padding-left: 0; margin-bottom: 6px; }
  .ooo-abcd .abcd-title .fig-title, .ooo-abcd-probes .abcd-title .fig-title { top: 0; }
  .ooo-abcd .scrub-stack input, .ooo-abcd-probes .scrub-stack input { width: 40px; }
  .ooo-abcd .probe-row, .ooo-abcd-probes .probe-row {
    flex-direction: row; gap: 24px; max-width: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .ooo-abcd .probe-row > div, .ooo-abcd-probes .probe-row > div {
    scroll-snap-align: start; flex: 0 0 auto;
  }
}

/* ─── public/ooo-patch/style.css ─── */
.ooo-patch {
  max-width: 850px; margin: 0 auto;
  .panel-row { justify-content: center; }
  .op-title { margin-bottom: 14px; padding-left: 36px; }
  .op-title .ttl { font-weight: 600; font-size: var(--fs-body); }
  .op-cell { position: relative; }
  .op-chart svg { overflow: visible; display: block; }
  .panel-title { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.05em; fill: var(--text); font-family: var(--font-sans); }
  .op-chart .tick text, .op-chart .axis-label { font-size: var(--fs-label); fill: var(--text-light); }
  .anno text { fill: #000; font-size: var(--fs-small); text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
  .drag-handle { cursor: move; }
}

/* ─── public/feature-examples/style.css ─── */
.feature-examples {
  max-width: 1260px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  .fe-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .fe-colhead { border-bottom: 2px solid var(--text-faint); padding-bottom: 6px; }
  .fe-colhead .fig-title { margin: 0 0 2px; }
  .fe-colsub { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-light); }
  .fe-key { font-family: var(--font-sans); font-size: var(--fs-label);
    color: var(--text-light); margin-right: 6px; flex: 0 0 auto; }
  .fchip .fchip-head { margin-bottom: 6px; display: flex; align-items: baseline; gap: 0; }
  .fchip .fchip-head .clerp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fchip .fchip-head .kurt { font-weight: 400; color: var(--text-light); }
  .fchip .toks { margin-bottom: 8px; gap: 2px; }
  .fchip .tok { border: none; background: var(--tok-bg); padding: 0 4px; font-size: var(--fs-label); }
  .fchip .exrow { display: flex; text-overflow: clip; }
  .fchip .exrow .exleft { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; justify-content: flex-end; flex-wrap: nowrap; }
  .fchip .exrow .expeak { flex: 0 0 auto; }
  .fchip .exrow .exright { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; justify-content: flex-start; flex-wrap: nowrap; }
  .fchip .exrow .t { flex: 0 0 auto; }
}
@container (max-width: 720px) {
  .feature-examples { grid-template-columns: 1fr; }
}

/* ─── public/feature-coverage/style.css ─── */
.feature-coverage {
  max-width: 1100px; margin: 0 auto;
  .panel-row { gap: 24px; justify-content: center; align-items: stretch; }
  .fc-panel { width: 100%; min-width: 0; }
  @container (min-width: 768px) { .fc-panel { flex: 1 1 0; width: auto; } }
  .fc-anno { font-size: var(--fs-label); fill: var(--gray-700); }
  .fc-pct { font-size: var(--fs-label); fill: var(--tol-orange); }
  .fc-leglabel { font-size: var(--fs-body); fill: var(--gray-700); }
}
@container (max-width: 999px) {
  .feature-coverage .panel-row { flex-direction: column; align-items: center; }
}

/* ─── public/comp-lines/style.css ─── */
.comp-lines {
  .panel-row { column-gap: 18px; justify-content: center; align-items: flex-start; }
  .cl-panel { flex: 0 0 auto; }
  .ref-line { stroke-dasharray: none; stroke-width: 1; }
  .cl-attn-legend {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px;
    font-size: var(--fs-label); padding-top: 24px;
  }
  .cl-leg-row { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
  .cl-swatch { width: 14px; height: 3px; display: inline-block; }
}

/* ─── public/comp-strata/style.css ─── */
.comp-strata {
  .panel-row { column-gap: 18px; justify-content: center; }
  .cs-panel { flex: 0 0 auto; }
  .cs-edge { stroke: #fff; stroke-width: 0.6; }
  .cs-area.on { stroke: var(--text); stroke-width: 1; }
  .ws-bracket { fill: none; stroke: var(--gray-900); stroke-width: 1; }
  .ws-label { font-size: var(--fs-label); fill: #fff; text-shadow: none; }
  .ref-line { stroke: #fff; stroke-width: 0.8; stroke-dasharray: 2 3; opacity: 0.6; }
}

/* ─── public/comp-tail-energy/style.css ─── */
.comp-tail-energy {
  .panel-row { column-gap: 18px; justify-content: center; align-items: flex-start; }
  .cte-panel { flex: 0 0 auto; }
  .ref-line { stroke-dasharray: none; stroke-width: 1; }
  .cte-legend {
    display: flex; flex-direction: column; gap: 3px;
    font-size: var(--fs-label); padding-top: 24px;
  }
  .cte-leg-row { display: flex; align-items: center; gap: 5px; }
  .cte-swatch { width: 14px; height: 3px; display: inline-block; }
}

/* ─── public/mlp-gain/style.css ─── */
.mlp-gain {
  .panel-row { column-gap: 24px; justify-content: center; }
  .mg-panel { flex: 0 0 auto; }
  .ref-line { stroke: var(--gray-500); stroke-dasharray: none; stroke-width: 1; }
  .mg-leg text { font-size: var(--fs-label); }
  .mg-leg .leg-title { fill: var(--text-light); }
}

/* ─── public/lens-similarity/style.css ─── */
.lens-similarity {
  .panel-row { column-gap: 18px; justify-content: center; }
  .ls-panel { flex: 0 0 auto; }
}
@container (max-width: 999px) {
  .lens-similarity .panel-row { flex-direction: column; align-items: center; row-gap: 18px; }
}

/* ─── public/transcoder-arith/style.css ─── */
.transcoder-arith {
  max-width: 910px; margin: 0 auto;
  .panel-row { gap: 14px; justify-content: center; }
  .ta-panel { flex: 0 0 auto; }
  .fig-title { margin-bottom: 6px; text-align: center; }
  .ta-gap { height: 10px; }
  .axis text { font-size: var(--fs-label); }
  tspan.ta-barname { font-size: var(--fs-label); font-weight: 600; }
  tspan.ta-formula { font-size: var(--fs-label); font-weight: 400; }
}

/* ─── public/transcoder-translation/style.css ─── */
.transcoder-translation {
  max-width: 820px; margin: 0 auto;
  .panel-row { gap: 14px; justify-content: center; align-items: flex-start; }
  /* mobile-first: stacked panels fill the width; the vertical rank label only
     makes sense beside a row of panels, so it's desktop-only */
  .tt-ylabel { display: none; }
  .tt-panel { width: 100%; border: 1px solid var(--tick-line); border-radius: 4px;
              overflow: hidden; }
  .fig-title { text-align: center; padding: 5px 0; margin: 0;
               background: var(--bg-soft); border-bottom: 1px solid var(--rule); }
  .fig-title .arrow { color: var(--text-faint); font-weight: 400; padding: 0 4px; }
  .tt-cols { display: flex; }
  .tt-box { flex: 1 1 50%; min-width: 0; }
  .tt-box + .tt-box { border-left: 1px solid var(--rule); }
  .tt-hdr { padding: 4px 7px 2px; font-size: var(--fs-small);
            white-space: nowrap; color: var(--text-light); }
  .tt-name { font-weight: 600; color: var(--text); }
  .tt-formula { color: var(--text-faint); }
  .tt-list { padding: 0 0 5px; }
  .tt-row { display: flex; align-items: baseline; padding: 0 7px;
            font-size: var(--fs-body); line-height: 1.4em; }
  .tt-rank { width: 18px; text-align: right; color: var(--text-faint);
             font-size: var(--fs-label); padding-right: 6px; flex: 0 0 auto; }
  .tt-tok { font-family: var(--font-mono); font-weight: 500;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tt-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
               margin-top: 10px; font-size: var(--fs-small); color: var(--tick); }
  /* shared-styles.css .legend-item sets var(--font-mono); these labels are prose */
  .tt-legend .legend-item { font-family: var(--font-sans); }

  @container (min-width: 768px) {
    .tt-panel { width: auto; flex: 0 0 auto; }
    .tt-box { flex: 0 0 auto; width: 124px; }
    /* rank label hugs the first panel and centers on the token lists (below
       title + column header), reading top-to-bottom so the arrow points the
       way rank increases */
    .tt-ylabel { display: block; flex: 0 0 auto; align-self: stretch;
                 padding-top: 57px; writing-mode: vertical-rl; text-align: center;
                 font-size: var(--fs-small); color: var(--text-light); margin-right: -8px; }
  }
}

/* ─── public/attn-panel/style.css ─── */
.attn-panel, .attn-panel-appendix {
  display: flex; flex-direction: column; gap: 24px; max-width: 780px;

  .ahp { padding: 0; max-width: 780px; border: none; }
  .ahp .fig-title { margin-bottom: 6px; }
  .body { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .body > div { min-width: 0; }
  @container (min-width: 768px) { .body { grid-template-columns: 1.5fr 1fr; } }
  .body .mlabel { margin-bottom: 4px; display: flex; justify-content: space-between; padding-right: 2px; }
  .body .mlabel.pattern-right { justify-content: flex-end; gap: 4px; }
  .mlabel .math { text-transform: none; font-family: var(--font-serif); font-style: italic;
                  letter-spacing: 0; color: var(--text-light); font-weight: 400; }

  .snips { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  /* each snippet is a right-anchored excerpt clipped on the LEFT, with a leading …
     overlay so the window reads as intentional instead of cut mid-word.
     no rtl/text-overflow tricks — Safari/Firefox drop the row entirely with that combo */
  .snip { position: relative; overflow: hidden; height: 14px; line-height: 14px;
          padding-right: 2px; font-size: var(--fs-label); }
  .snip .row { position: absolute; right: 2px; top: 0; white-space: nowrap;
               display: block; margin: 0; }
  .snip::before { content: '…'; position: absolute; left: 0; top: 0; z-index: 1;
                  color: var(--text-faint); background: #fff; padding-right: 2px;
                  font-size: var(--fs-label); }
  .snip .tok { display: inline-block; padding: 0 1px; border-radius: 2px; color: var(--text);
               font-family: var(--font-mono); font-size: var(--fs-label); white-space: pre; }

  .qkvo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px;
          font-family: var(--font-mono); font-size: var(--fs-label); }
  .qkvo .col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .qkvo .wt { font-weight: 400; font-family: var(--font-serif);
              font-style: italic; font-size: var(--fs-small); padding-bottom: 2px; }
  .qkvo .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ─── public/jlens-circuit-graph/style.css ─── */
.jlens-circuit-graph {
  font-family: var(--font-sans);

  .panel-row { gap: 36px; }
  .graph-panel, .bars-panel { width: 100%; min-width: 0; }
  @media (min-width: 768px) {
    .graph-panel, .bars-panel { flex: 1 1 50%; }
  }
  /* reviewer-requested sizing: panel titles + the prompt chip read comfortably
     at half-page width (lint-ok: deliberate per-figure scale-up) */
  .fig-title { font-size: 18px; }
  .graph-panel .prompt-box { display: inline-block; margin-bottom: 10px; font-size: 17px; }
  .graph-panel > svg { display: block; width: 100%; height: auto; }

  .blabel { font-size: var(--fs-figure); font-weight: 600; fill: var(--text); pointer-events: none; }
  .node.reminder .blabel { font-weight: 500; font-size: var(--fs-body); }
  /* atom line must fit inside the 128px box like the original figure (9.5px there) */
  .alabel { font-size: 9.5px; fill: var(--text-light); pointer-events: none; }
  .edge { fill: none; stroke: var(--gray-500); stroke-width: 2; stroke-linecap: round; }
  .arrowhead { fill: var(--gray-500); }
  .legend-row { margin-top: 8px; }
  /* legend labels are prose, not tokens — paper body font, not the shared
     legend-item mono default */
  .legend-item { font-family: var(--font-sans); font-size: var(--fs-figure); }

  .bars-panel .swaps-img { width: 100%; height: auto; }
}

/* ─── public/attn-broadcast-reselect/style.css ─── */
.attn-broadcast-reselect {
  font-family: var(--font-sans);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  .ref-line { stroke: var(--grid-line); stroke-dasharray: 2 3; }
  .abr-whisker { stroke-width: 2; opacity: 0.85; }
  .abr-mean { stroke: #000; stroke-width: 1; }
  .abr-label { font-size: var(--fs-label); font-weight: 600; }
}

/* ─── public/ablation-bars/style.css ─── */
.ablation-bars {
  margin: 0 auto;
  font-family: var(--font-sans);

  .fig-title { margin-bottom: 4px; }
  .legend-row { padding: 0 0 4px; flex-wrap: wrap; gap: 6px 18px; }
  .legend-item { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--tick); }

  /* the SVG is ~1080px and can't reflow (14 task groups + brackets); on
     mobile this scroller takes the overflow at 1× so fitMount leaves the
     mount unscaled and the title/legend above stay put. */
  .ab-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .ab-scroll > div { width: max-content; }

  .y text { font-size: var(--fs-small); fill: var(--tick); }
  .y text.axis-label { font-size: var(--fs-figure); }

  .tick-label { font-size: var(--fs-small); fill: var(--tick); }

  path.err { stroke-width: 1.2; fill: none; }

  .brackets path { stroke: var(--text-light); stroke-width: 1.2; fill: none; }
  .brackets text { font-size: var(--fs-body); fill: var(--text-light); }
}

/* ─── public/ablation-examples/style.css ─── */
.ablation-examples {
  /* size queries below must measure the figure, not the viewport — the figure
     can sit in a narrow card (gallery 2-col) while the viewport is desktop-wide */
  container-type: inline-size;
  .abl-legend { display: flex; align-items: center; justify-content: center;
    gap: 6px; margin-top: 10px; font-size: var(--fs-label);
    color: var(--text-light); }
  .abl-legend .leg-label { margin-right: 4px; }
  .abl-legend .leg-end { font-variant-numeric: tabular-nums; }
  .abl-legend svg { display: block; }

  /* mobile-first: single column, chips shrink to the container.
     align-items: stretch so cards in the same grid row share a height —
     the shorter card's border/background grows to match its row-mate. */
  .chip-grid { display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 14px; align-items: stretch; justify-content: center; justify-items: center; }
  @container (min-width: 980px) { .chip-grid { grid-template-columns: repeat(2, minmax(0, 520px)); } }

  /* extends shared .card / .abl-chip; only overrides here.
     flex-column keeps content top-aligned when the card is stretched taller
     than its content by the grid row. */
  .abl-chip {
    border-color: var(--rule); padding: 0.6rem 0.7rem;
    color: var(--text); width: 100%; max-width: 520px; min-width: 0;
    box-sizing: border-box; display: flex; flex-direction: column;
  }
  .ch-head { display: flex; align-items: baseline; margin-bottom: 2px; }
  .ch-title { font-weight: 600; font-size: var(--fs-figure); flex: 1; }
  .ch-tag { font-weight: 400; font-size: var(--fs-small); color: var(--text-light);
    margin-left: 0.5em; }
  .ch-anno { font-size: var(--fs-small); color: var(--text-light); margin-bottom: 6px;
    line-height: 1.3; }
  .ch-help { position: relative; font-size: var(--fs-label); color: var(--text-light);
    user-select: none; }
  .ch-help:hover { color: var(--text); }
  .ch-help:hover .q { border-color: var(--text); }
  .ch-help .q { display: inline-block; border: 1px solid var(--text-faint);
    border-radius: 50%; width: 1.1em; height: 1.1em; text-align: center;
    line-height: 1.25em; margin-left: 4px; vertical-align: text-bottom; }
  .ch-help .tip { display: none; position: absolute; right: 0; top: 1.4em;
    z-index: 20; width: 260px; padding: 8px 10px; background: #fff;
    border: 1px solid var(--tick-line); border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);  /* lint-ok: tooltip */
    font-size: var(--fs-label); line-height: 1.4; color: var(--text);
    white-space: normal; }
  .ch-help:hover .tip { display: block; }

  /* extends shared .prompt-block */
  .ch-strip { line-height: 1.7; margin-bottom: 6px; text-wrap: balance; }
  .ellipsis { color: var(--text-light); user-select: none; margin-right: 0.5ch; }
  /* base outline matches .tok-hit width so hover/select only swaps color —
     position:relative on base so the .tok-hit toggle is z-index only */
  .ct { white-space: pre-wrap; padding: 1px 0; border-radius: 2px;
    cursor: pointer; position: relative;
    outline: 2px solid transparent; outline-offset: -1px; }
  .ct:hover { outline-color: var(--text-light); }
  .ct.tok-hit { outline: 2px solid var(--tok-hit-outline); z-index: 1; }

  .ch-sub { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px;
    min-height: 86px; }
  /* fr tracks default to minmax(auto, Nfr) — Safari/FF won't shrink the column
     below its nowrap header's width, so the bars overflow the chip. min-width:0
     lets the track shrink; overflow clips anything that still escapes. */
  .ch-col { min-width: 0; overflow: hidden; }
  /* column headers reuse the shared .mlabel rule; .ch-col h6 only adds layout */
  /* mobile: headers may wrap onto two lines so the narrow columns don't
     overlap; desktop restores single-line nowrap */
  .ch-col h6.mlabel { margin: 0 0 3px; position: relative; min-height: 2.6em;
    overflow: hidden; text-overflow: ellipsis; }
  .ch-col h6 .pos { color: var(--text-light); font-weight: 400; text-transform: none; letter-spacing: 0; }
  .ch-col h6 .unit, .ch-col h6 .kl { font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--text-faint); font-size: var(--fs-label); }
  .ch-col h6 .kl { font-variant-numeric: tabular-nums; }
  @container (min-width: 980px) {
    .ch-col h6.mlabel { white-space: nowrap; min-height: 0; }
  }

  .c-sel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px;
    row-gap: 1px; }
  .sel-row { font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.3em;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    height: 1.3em; }
  .sel-row .rk { display: inline-block; width: 1.3em; color: var(--text-faint);
    font-size: var(--fs-label); text-align: right; margin-right: 3px;
    font-variant-numeric: tabular-nums; }

  .row { position: relative; font-family: var(--font-mono); font-size: var(--fs-label);
    padding: 0 3px; margin-bottom: 1px; line-height: 1.25em;
    overflow: hidden; white-space: nowrap; height: 1.25em; }
  .row .bar { position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 2px; background: var(--gray-200); }
  /* truncate the token before it runs under the right-aligned percent */
  .row .t { position: relative; display: inline-block; max-width: calc(100% - 4ch);
    overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .row .p { position: absolute; right: 3px; color: var(--text-light);
    font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
  &.pctfirst .row .p { position: relative; right: auto; display: inline-block;
    width: 4ch; text-align: right; margin-right: 4px; }
}

/* ─── public/ablation-strength/style.css ─── */
.ablation-strength {
  width: max-content; margin: 0 auto;
  .fig-title { margin-bottom: 2px; }
  .fig-title .sub { font-weight: 400; font-size: var(--fs-small); color: var(--text-light); margin-left: 8px; }
  table { border-collapse: collapse; font-size: var(--fs-body); line-height: 1.25; }
  /* column headers reuse the shared .mlabel rule for tiny uppercase labels */
  th { text-align: right;
    padding: 2px 0 4px 26px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
  th:first-child { text-align: left; padding-left: 0; }
  td { padding: 4px 0 4px 26px; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
  tr.control td { border-top: 1px solid var(--text-faint); }
  td:first-child { padding-left: 0; color: var(--text); white-space: nowrap; }
  .control-note { font-size: var(--fs-small); color: var(--text-light); margin-left: 6px; }
  td:nth-child(n+2) { font-family: var(--font-mono); text-align: right;
    font-variant-numeric: tabular-nums; color: var(--text); }
  td.layers { color: var(--text-light); }
  tbody tr:last-child td { border-bottom: none; }
  /* table cells aren't flex; position the shared swatch with margin/baseline */
  .swatch { margin-right: 8px; vertical-align: middle; position: relative; top: -1px; }
}

/* ─── public/blackmail-clamp/style.css ─── */
.blackmail-clamp {
  font-family: var(--font-sans);
  font-size: var(--fs-figure);

  /* 2×2 grid: (panel, card) per row. Row height is set by the panel's
     SVG; align-items:stretch makes the card fill the same row, so the
     two columns are vertically aligned by construction. */
  .bc-row {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 24px;
    row-gap: 24px;
    align-items: stretch;
    justify-content: center;
  }
  .panel svg { display: block; }
  circle.jpt.hov { r: 3.7; }
  .axis text { font-size: var(--fs-label); fill: var(--tick); }
  text.axis-title { font-size: var(--fs-body); fill: var(--text); font-weight: 600; }
  .ann text { font-size: var(--fs-label); fill: var(--gray-900); }

  .card {
    border: none;
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
  }
  /* Desktop only: row height should come from the panel cell, not the card's
     text. `contain: size` removes the card's intrinsic size from grid row
     auto-sizing; align-items:stretch on .bc-row then fills the card to the
     (panel-determined) row height. When stacked (mobile) there is no sibling
     panel in the row, so the card must size itself — no containment. */
  @container (min-width: 768px) {
    .bc-row { grid-template-columns: 320px 510px; }
    .card { contain: size; min-height: 0; }
  }
  /* match the panel's .axis-title (shared-styles.css) so the two columns
     read as peer titles; line-height+margin sum to the panel SVG's 24px
     top margin so the excerpt body lines up with the chart area. */
  .ex-label {
    font-size: var(--fs-body);
    color: var(--text);
    font-weight: 600;
    text-align: center;
    line-height: 16px;
    margin: 0 0 22px;
  }
  .card .excerpt {
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: 1.55;
    padding: 9px 11px;
    background: var(--bg-soft);
    border-radius: 4px;
    flex: 1;
    /* Panels are sized to fit the baked excerpts; keep auto only as a
       safety net if an excerpt rebake ends up longer. */
    overflow-y: auto;
    min-height: 0;
  }
  /* shared .hl/mark yellow; only the multi-line clone is figure-local */
  .card .excerpt mark {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}
.tooltip .tt-head { font-size: var(--fs-body); margin-bottom: 6px; }
.tooltip .tt-prompt { max-width: 360px; }
.tooltip .tt-excerpt {
  max-width: 360px;
  margin-top: 6px;
  white-space: pre-wrap;
  font-size: var(--fs-small);
  color: var(--text-light);
}

/* ─── public/lensapp-panel/style.css ─── */
.lensapp-panel {
  width: max-content; max-width: 100%; margin: 0 auto;

  .card { padding: 0; max-width: 920px; border: none; box-shadow: none; }
  .cols { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
  .cols > div { min-width: 0; display: flex; flex-direction: column; }
  @container (min-width: 768px) { .cols { grid-template-columns: 36fr 64fr; } }

  .mlabel.gap { margin-top: 12px; }
  /* Let the last block in the shorter column soak up slack so both columns
     read as the same height instead of leaving a dead band below it. */
  .exrow.prompt-row, .roll { flex: 1; }

  .toks { display: flex; flex-wrap: wrap; gap: 8px;
    font-family: var(--font-mono); font-size: var(--fs-label); }

  .exrow { margin: 0 0 8px; }
  .exrow .t { padding: 0; border-radius: 2px; }
  /* When activation shading goes dark (t > ~0.6) the rendered bg gets dark
     enough that the default text color is unreadable. JS adds .dark to flip
     to white per the paper's activation-shading rule. */
  .exrow .t.dark { color: #fff; }
  .exrow .ell { color: var(--text-faint); }

  .prompt { font-family: var(--font-mono); font-size: var(--fs-label);
    color: var(--text-light); background: var(--gray-100); padding: 4px 6px;
    border-radius: 3px; white-space: pre-wrap; margin-bottom: 5px; }

  .roll { display: grid; grid-template-columns: 90px 9px 1fr;
    grid-auto-rows: min-content; gap: 12px 6px; align-items: center; }
  .rlab { font-family: var(--font-mono); font-size: var(--fs-label);
    color: var(--text-light); text-align: right; }
  .rlab .ann { font-size: var(--fs-label); color: var(--text-faint); margin-top: 1px; line-height: 1.3; }
  .rbracket { align-self: stretch; position: relative;
    border-left: 1px solid var(--gray-400); }
  .rbracket::before, .rbracket::after { content: ''; position: absolute; left: -1px;
    width: 6px; height: 1px; background: var(--gray-400); }
  .rbracket::before { top: 0; }
  .rbracket::after { bottom: 0; }
  .rtxt { font-family: var(--font-mono); font-size: var(--fs-label);
    line-height: 1.5; white-space: pre-wrap; background: var(--bg-soft);
    padding: 4px 6px; }
  .trunc { color: var(--text-faint); }
}

/* ─── public/reflection-training/style.css ─── */
.reflection-training, .reflection-fabrication, .reflection-deception {
  .panel-row { gap: 28px; }
  .panel { display: flex; flex-direction: column; }

  .axis text, .axis-label { font-size: var(--fs-small); }

  /* The figure-level title (above the panel row) keeps the shared
     .fig-title size; the per-panel titles step down so the hierarchy
     is visible when both are present. */
  > .fig-title { margin-bottom: 10px; }
  .panel .fig-title { margin-bottom: 4px; white-space: nowrap;
    font-size: var(--fs-body); }
  /* fixed height so the three panels' titles + subs line up */
  /* 3 lines: the per-eval panel-B subtitle (ethics/meta-cognition + %prompts/%positions
     definition) wraps to three lines at this column width (3 × 16.8px line-height). */
  .psub { height: 51px; margin: 0 0 8px; }
  .panel:nth-child(1) .psub { max-width: 290px; }
  .panel:nth-child(2) .psub { max-width: 330px; }
  .panel:nth-child(3) .psub { max-width: 340px; }

  .rktab { font-size: var(--fs-small); border-collapse: collapse;
           font-variant-numeric: tabular-nums; }
  .rktab th { color: var(--text-light); font-weight: 400; text-align: right;
              padding: 0 4px 2px; }
  .rktab th[colspan] { text-align: center; border-bottom: 1px solid var(--rule); }
  .rktab td { text-align: right; padding: 0 4px; line-height: 1.35; }
  .rktab td.tk { font-family: var(--font-mono); }
  .rktab td.arr { color: var(--text-faint); padding: 0 1px; }

  .split-wrap { display: flex; flex-direction: column; }
  .split-legend { font-size: var(--fs-small); line-height: 1.5;
                  display: grid; grid-template-columns: repeat(2, max-content);
                  grid-auto-flow: column; grid-template-rows: repeat(3, auto);
                  column-gap: 10px; row-gap: 2px; margin: 6px 0 0 8px; }
  .split-legend .rub { font-size: var(--fs-label); }
  .split-legend .lrow { white-space: nowrap; }
  .split-legend .legend-sq { margin-right: 4px; }
  .split-legend .rub { color: var(--text-faint); }
}

/* ─── public/dn-tracecond/style.css ─── */
.dn-tracecond {
  margin: 0 auto; width: fit-content;

  .tc-row { display: flex; gap: 18px; align-items: stretch; }
  .tc-panel .fig-title, .tc-setup .fig-title {
    font-size: var(--fs-body); margin: 0 0 6px;
  }
  .tc-panel .fig-title::first-letter { font-weight: 700; padding-right: 8px; }

  /* Setup panel matches the chart panels' height: title sits on the row's
     shared baseline (stretch), the demonstrations box flexes to fill the
     remaining vertical space. */
  .tc-setup { width: 250px; font-family: var(--font-mono);
    font-size: var(--fs-small); display: flex; flex-direction: column; }
  .tc-lines.demo { flex: 1; }
  .tc-setup .fig-title { font-family: var(--font-sans); font-weight: 700; }
  .tc-setup .mlabel { font-family: var(--font-sans); margin: 6px 0 2px; }
  .tc-lines { background: var(--bg-soft); border: 1px solid var(--rule);
    border-radius: 4px; padding: 6px 8px; line-height: 1.6; }
  .tc-line span { margin-right: 6px; }
  .tc-cue, .tc-out { padding: 0 3px; border-radius: 3px; }
  .tc-cue { background: var(--brand-manilla); }
  .tc-out { background: color-mix(in srgb, var(--tol-teal) 22%, white); }
  .tc-out.test { font-weight: 700; background: var(--gray-300); }
  .tc-fill { color: var(--text-faint); }
  .tc-ellip { color: var(--text-faint); padding: 1px 0; }
  .tc-brace { display: flex; gap: 6px; margin: 4px 0 0; font-family: var(--font-sans);
    font-size: var(--fs-label); color: var(--text-light); }
  .tc-brace .bspan { border-top: 1px solid var(--tick-line); padding-top: 2px;
    text-align: center; }
  .tc-brace .bspan.fill { flex: 1; }

  .legend-row { justify-content: center; margin-top: 10px; }
}

/* ─── public/dn-exclusion/style.css ─── */
.dn-exclusion {
  margin: 0 auto; width: fit-content;

  .ex-row { display: flex; gap: 22px; align-items: flex-start; }
  /* B/C svg height (278+6+38) plus title fixes the row height; A is a
     flex column with qrow flex:1, so A stretches to exactly match. */
  .ex-panel, .ex-setup { height: 344px; }
  .ex-panel .fig-title, .ex-setup .fig-title {
    font-size: var(--fs-body); margin: 0 0 6px;
  }
  .ex-panel .fig-title::first-letter, .ex-setup .fig-title::first-letter {
    font-weight: 700; padding-right: 8px;
  }
  .ex-xtick { font-size: var(--fs-label); line-height: 1.25;
    color: var(--text-light); text-align: center; }

  /* Setup panel: full literal prompt + implied concept + two questions
     + the prefilled-response cloze. */
  .ex-setup { width: 396px; font-family: var(--font-mono);
    font-size: var(--fs-small); display: flex; flex-direction: column; gap: 4px; }
  .ex-setup .fig-title { font-family: var(--font-sans); font-weight: 700; }
  .ex-setup .mlabel { font-family: var(--font-sans); margin: 4px 0 1px; }
  .ex-box { background: var(--bg-soft); border: 1px solid var(--rule);
    border-radius: 4px; padding: 6px 8px; line-height: 1.4; }
  .ex-implies { position: relative; text-align: center; padding: 2px 0; }
  .ex-arrow { color: var(--text-faint); line-height: 1.1; font-size: 16px; }
  .ex-implies-label { position: absolute; top: 0; left: calc(50% + 10px);
    font-family: var(--font-sans); font-size: var(--fs-label);
    color: var(--text-faint); font-style: italic; }
  /* The France chip is centered under the arrow; the annotation is
     positioned absolutely so it doesn't push the chip off-center. */
  .ex-prime-row { position: relative; }
  .ex-prime { display: inline-block; background: var(--brand-manilla);
    border: 1px solid #dd9e57; border-radius: 4px; padding: 3px 12px;
    font-weight: 600; }
  .ex-anno { position: absolute; left: calc(50% + 42px); top: 50%;
    transform: translateY(-50%); white-space: nowrap;
    font-family: var(--font-sans); font-size: var(--fs-label);
    color: var(--tol-red); font-style: italic; }
  .ex-qrow { display: flex; gap: 8px; flex: 1; }
  .ex-qcol { flex: 1; display: flex; flex-direction: column; }
  .ex-qcol .ex-box { flex: 1; }
  .ex-prefill { background: #fafaf8; white-space: nowrap; font-size: 0.92em; }
  .ex-meas { color: #a16a1f; font-style: italic; }
}

/* ─── public/refl-training-examples/style.css ─── */
.refl-training-examples {
  margin: 0 auto; max-width: 1000px;
  --rte-a: var(--brand-clay);
  --rte-a-bg: color-mix(in srgb, var(--brand-manilla) 35%, white);
  --rte-h: var(--tol-blue);
  --rte-h-bg: color-mix(in srgb, var(--tol-blue) 7%, white);

  .rte-panels { display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto); column-gap: 24px; }
  .rte-panel { display: grid; grid-template-rows: subgrid; grid-row: span 5;
    min-width: 0; row-gap: 0; }

  .fig-title { text-wrap: balance; padding-bottom: 4px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px; }
  .rte-chip { display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 3px;
    background: var(--gray-900); color: #fff;
    font-size: var(--fs-label); font-weight: 600; flex: 0 0 auto; }

  /* scenario: prose quote, not a mono prompt box */
  .rte-ctx { font-family: var(--font-sans); font-size: var(--fs-body);
    line-height: 1.6; color: var(--gray-700);
    border-left: 3px solid var(--gray-300); padding: 2px 0 2px 12px;
    margin-bottom: 14px; text-wrap: pretty; }

  .rte-snippet { display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 14px; }
  .rte-snippet:empty { display: none; }

  /* role-boxed transcript turns: colored left border + tinted bg + role header */
  .rte-turn { border-left: 3px solid; border-radius: 0 4px 4px 0;
    padding: 8px 12px; font-size: var(--fs-small); line-height: 1.55;
    overflow-wrap: break-word; }
  .rte-turn-assistant { border-color: var(--rte-a); background: var(--rte-a-bg); }
  .rte-turn-tool { border-color: var(--rte-a);
    background: color-mix(in srgb, var(--brand-manilla) 18%, white); }
  .rte-turn-human { border-color: var(--rte-h); background: var(--rte-h-bg);
    margin-bottom: 10px; }
  .rte-reflbox { margin-bottom: 0; }

  .rte-role { font-family: var(--font-sans); font-size: var(--fs-label);
    font-weight: 600; margin-bottom: 4px; }
  .rte-turn-assistant > .rte-role, .rte-turn-tool > .rte-role { color: var(--rte-a); }
  .rte-turn-human > .rte-role { color: var(--rte-h); }

  .rte-text { margin: 0; white-space: pre-wrap;
    font-family: var(--font-mono); font-size: var(--fs-small);
    line-height: 1.5; overflow-wrap: break-word; }
  .rte-summary { font-style: italic; color: var(--text-light);
    font-family: var(--font-sans); }

  .rte-probe { font-family: var(--font-mono); font-size: var(--fs-small); }
  .rte-refl { font-family: var(--font-sans); font-size: var(--fs-body);
    line-height: 1.6; text-wrap: pretty; }
  .rte-ellip { color: var(--text-faint); letter-spacing: 0.12em; }

  @container (max-width: 720px) {
    .rte-panels { grid-template-columns: 1fr; grid-template-rows: none; }
    .rte-panel { grid-template-rows: repeat(5, auto); grid-row: auto;
      margin-bottom: 18px; }
  }
}

/* ─── public/modulation-readout/style.css ─── */
.modulation-readout {
  --mod-row: 25px;

  /* titles / prompts / lens-pairs each form one grid row across the three
     columns; stretch so the variable-length prompt blocks fill the row track
     and all three panels render the same height. */
  .mod-row { display: grid; column-gap: 14px; row-gap: 6px;
    grid-template-columns: repeat(var(--ncol, 2), auto);
    align-items: stretch; width: fit-content; margin: 0 auto; }
  .fig-title { margin: 0 0 -6px 0; }

  /* extends shared .prompt-block; border-box so outer width matches .lenspair's 48ch */
  .display-prompt { line-height: 1.4; width: 48ch; box-sizing: border-box;
    white-space: pre-wrap; }
  /* .ptok base/hover come from the shared .prompt-block .ptok rules; only the
     inset outline is restated here. */
  .display-prompt .ptok { outline-offset: -1px; }
  /* the token position the lens reads from — shared .tok-hit outline; restate
     here so it beats the .ptok base rule's specificity. Keep the same padding
     as the .ptok base rule — any padding change reflows the prompt on click. */
  .display-prompt .ptok.tok-hit { outline: 1px solid var(--tok-hit-outline);
    background: #fff; }
  /* human-turn copy of a response token: clickable alias that selects the
     matching response position. UI-selection outline (1px), never .tok-hit —
     the lens reads from the response copy, not here. */
  .display-prompt .ptok-alias { cursor: pointer; outline: 1px solid transparent;
    outline-offset: -1px; border-radius: 2px; padding: 1px 0; }
  .display-prompt .ptok-alias:hover { outline-color: var(--text-light); }
  .display-prompt .ptok-alias.on { outline-color: var(--text); }
  .display-prompt .elide { color: var(--text-light); }
  /* prompt text with no lens data behind it — dimmed so the clickable .ptok /
     .ptok-alias tokens read as the interactive part. */
  .display-prompt .nodata { color: var(--text-light); cursor: default; }
  .display-prompt .nodata .hl { color: var(--text); }
  .display-prompt .nodata .elide { color: var(--text-faint); }
  /* focus-clause highlight uses the shared yellow .hl (matches
     verbal-introspection / top-down-summoning). */

  .lenspair { display: grid; grid-template-columns: auto 1fr;
    grid-template-rows: auto; column-gap: 28px;
    align-items: stretch; font-family: var(--font-mono); width: 48ch;
    font-size: var(--fs-small); position: relative; }
  /* above table.lens (which has a white bg) so the connector's first pixel
     isn't hidden behind the table and it sits flush against the row outline */
  svg.swoop { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible; z-index: 1; }
  table.lens { grid-column: 1; grid-row: 1; border-collapse: collapse;
    border: 1px solid var(--text-faint); background: #fff; position: relative; }
  table.lens tr { height: var(--mod-row); }
  table.lens th, table.lens td { border: 1px solid var(--tick-line); padding: 0 7px;
    white-space: nowrap; text-align: left; line-height: 1;
    vertical-align: middle; }
  /* fixed width so clicking a token (different top-1 lengths) never reflows */
  table.lens tr.ly td { width: 12ch; max-width: 12ch; overflow: hidden;
    text-overflow: ellipsis; }
  table.lens .gloss { color: var(--text-faint); font-family: var(--font-sans); }
  table.lens th { background: var(--gray-100); font-weight: 400;
    color: var(--text-light); text-align: right; font-variant-numeric: tabular-nums; }
  /* rows respond on hover, not click — no pointer cursor */
  table.lens tr.ly { cursor: default; }
  /* UI-selection (the row whose top-k is expanded on the right): 1px outline
     per style guide, lighter than .tok-hit. */
  table.lens tr.ly.on { outline: 1px solid var(--text); outline-offset: -1px; }
  table.lens tr.ly:hover { background: var(--bg-soft); }

  /* the init caps the top-k list to the table's layer count, so .detail =
     header + N toks at the same --mod-row height as table.lens rows → both
     boxes are exactly (N+1) × --mod-row tall and rows line up. */
  .detail { grid-column: 2; grid-row: 1; align-self: start; font-size: var(--fs-small);
    border: 1px solid var(--tick-line); border-radius: 3px;
    position: relative; box-sizing: border-box; background: #fff; }
  /* header mirrors table.lens th so the two boxes read as siblings. */
  .detail .dlyr { background: var(--gray-100); color: var(--text-light);
    font-weight: 400; padding: 0 7px; height: var(--mod-row); line-height: var(--mod-row);
    border-bottom: 1px solid var(--tick-line); border-radius: 3px 3px 0 0; box-sizing: border-box; }
  .detail .tok { display: flex; align-items: center; padding: 0 3px; margin: 0 6px;
    height: var(--mod-row); overflow: hidden; box-sizing: border-box;
    background: linear-gradient(to right,
      var(--gray-200) var(--p), transparent var(--p)) no-repeat 0 center / 100% calc(100% - 6px); }

  @container (max-width: 768px) {
    .mod-row { grid-template-columns: auto; width: auto; }
    .display-prompt, .lenspair { width: auto; }
  }
}

/* ─── public/modulation-lines/style.css ─── */
.modulation-lines {
  font-family: var(--font-sans); width: fit-content; margin: 0 auto;

  .head { margin-bottom: 8px; }
  .head .fig-title { margin: 0; text-align: left; }

  .panels { display: flex; flex-direction: column; gap: 8px; }
  @container (min-width: 768px) { .panels { flex-direction: row; } }

  path.series { fill: none; stroke-width: 2; }
  circle.pt { stroke: none; }

  text.dlabel { font-size: var(--fs-body); }
}

/* ─── public/modulation-prompts/style.css ─── */
.modulation-prompts {
  margin: 0 auto;
  font-family: var(--font-sans);

  .fig-title { margin-bottom: 4px; }
  .legend-row { padding: 0 0 2px; flex-wrap: wrap; gap: 6px 18px; }
  .legend-row { display: flex; }
  .legend-item { font-size: var(--fs-body); color: var(--tick); }

  /* the 3-col grid is ~870px and can't reflow; on mobile this scroller takes
     the overflow at 1× so the title/legend above stay put. */
  .mp-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .grid { display: grid; grid-template-columns: repeat(3, max-content); margin-top: 6px; width: max-content; }
  .cell { display: block; }

  .y text { font-size: var(--fs-small); fill: var(--tick); }
  .y text.axis-label { font-size: var(--fs-figure); }
  text.col-head { font-size: var(--fs-figure); fill: var(--text); font-weight: 600; }

  .tick-label { font-size: var(--fs-small); fill: var(--tick); }

  line.floor { stroke: var(--text); stroke-dasharray: 2 3; stroke-width: 1; }
  circle.dot { cursor: pointer; }
  circle.dot:hover { stroke: var(--text); stroke-width: 1.5; }
}

.tooltip .mp-tt-var { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 600; }
.tooltip .mp-tt-text { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-light); max-width: 280px; margin: 2px 0; }
.tooltip .mp-tt-val { font-size: var(--fs-small); }

/* ─── public/latent-patching/style.css ─── */
.latent-patching, .flex-gen-example {
  max-width: 800px; margin: 0 auto;

  .lp-panel { display: flex; gap: 16px; align-items: flex-start;
    padding: 14px 0; }
  .lp-panel + .lp-panel { border-top: 1px solid var(--rule); }

  .lp-left { width: 340px; flex-shrink: 0; }
  .fig-title { margin-bottom: 6px; }
  .lp-prompt { font-family: var(--font-mono); font-size: var(--fs-body);
    line-height: 1.4; white-space: pre-wrap; color: var(--text);
    background: var(--bg-soft); border-left: 3px solid var(--gray-300);
    padding: 6px 9px; margin-bottom: 8px; }
  .lp-gloss { font-size: var(--fs-small); color: var(--text-light);
    font-style: italic; margin: -2px 0 8px 9px; }
  .lp-swaps { font-size: var(--fs-small); color: var(--text-light); }

  .lp-right { display: flex; gap: 12px; align-items: flex-start; }
  /* extends shared .bar-table — taller rows, bar uses opacity not tint */
  .lp-col { width: 120px; }
  .lp-col h6 { margin: 0 0 4px; white-space: nowrap; overflow: visible; color: var(--text-light); }
  .lp-col h6 .swatch { margin-right: 2px; }
  .lp-col .bar-row { padding: 2px 5px; height: 1.35em; }
  .lp-col .bar-row + .bar-row { border-color: var(--rule); }
  .lp-col .bar-row .val { font-size: var(--fs-small); }

  .lp-anno { font-size: var(--fs-body); color: var(--text-light);
    max-width: 160px; padding-top: 30px; line-height: 1.4; }

  @container (max-width: 720px) {
    .lp-panel { flex-direction: column; }
    .lp-left { width: auto; }
    .lp-right { flex-wrap: wrap; }
    .lp-col { flex-shrink: 0; }
    .lp-anno { max-width: none; flex-basis: 100%; padding-top: 0; }
  }
}

.flex-gen-example { max-width: fit-content; }

/* ─── public/multihop-swap-success/style.css ─── */
.multihop-swap-success {
  margin: 0 auto; width: fit-content;
  .xlab { font-size: var(--fs-body); fill: var(--text); }
  .val { font-size: var(--fs-small); fill: var(--text); }
  .axis text { font-size: var(--fs-small); }
  .axis-label { font-size: var(--fs-body); }
  text.axis-title { font-size: var(--fs-title); font-weight: 600; fill: var(--text); font-family: var(--font-sans); }
  .onset path.mean { stroke-linecap: round; }
  .onset .dlabel { font-size: var(--fs-body); font-weight: 600; }
}

/* ─── public/repeat-switch/style.css ─── */
.repeat-switch {
  max-width: 860px; margin: 0 auto;

  > .fig-title { margin: 0 0 4px; }
  .rs-note { font-size: var(--fs-small); color: var(--text-light); margin-bottom: 16px; }

  .rs-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
  @container (min-width: 768px) { .rs-grid { grid-template-columns: 1fr 1fr; } }
  .rs-panel { min-width: 0; }
  .rs-panel-label { margin-bottom: 6px; }

  /* extends shared .prompt-block */
  .rs-prompt { margin-bottom: 10px; }

  /* mobile: row labels span their own line; desktop adds a label column so
     the lens-decode and model-output blocks share the same two value columns */
  .rs-table { display: grid; grid-template-columns: 140px 140px;
    column-gap: 10px; row-gap: 4px; align-items: start; }
  .rs-corner { display: none; }
  .rs-rowlab { grid-column: 1 / -1; font-size: var(--fs-label);
    color: var(--text-light); margin-top: 6px; line-height: 1.35; }
  .rs-rowlab .rs-lab1 { white-space: nowrap; }
  @container (min-width: 768px) {
    .rs-table { grid-template-columns: 118px 138px 138px; }
    .rs-corner { display: block; }
    .rs-rowlab { grid-column: auto; margin-top: 0; }
  }
  .rs-colhead { font-size: var(--fs-label); color: var(--text-light); }

  /* a little air between the lens-decode block and the model-output block */
  .rs-rowlab.rs-sep { margin-top: 12px; }
  @container (min-width: 768px) { .rs-bars.rs-sep { margin-top: 12px; } }

  /* extends shared .bar-table — narrower, smaller mono. Probability bars only
     on the Model output rows; lens-median probs are mostly <1% so bars there
     would read as stray left-edge ticks. */
  .rs-bars .bar-row { font-size: var(--fs-small); }
  .rs-bars .bar-row + .bar-row { border-color: var(--gray-100); }
  .rs-bars .bar-row .bar { background: var(--gray-200) !important; }

  .don { color: var(--tol-teal); }
  .abl { color: var(--tol-red); text-decoration: line-through;
         text-decoration-color: var(--tol-red); text-decoration-thickness: 1.5px; }
}

/* ─── public/verbal-report/style.css ─── */
.verbal-report {
  max-width: 720px; margin: 0 auto;

  .vr-main { display: flex; gap: 32px; align-items: flex-start; justify-content: center; }
  .vr-example { width: 420px; flex-shrink: 0; }
  .fig-title {     margin-bottom: 10px; }

  /* extends shared .prompt-block — body-size text since it's a short prompt */
  .vr-prompt { font-size: var(--fs-body); margin-bottom: 12px; }

  .vr-cols { display: flex; gap: 16px; align-items: flex-start;
    margin-bottom: 14px; }
  /* extends shared .bar-table — fixed column width */
  .vr-bars { width: 180px; }
  .vr-bars h6 { margin: 0 0 4px; font-size: var(--fs-label);
    color: var(--text); font-weight: 400; line-height: 1.3; }

  .vr-section { margin: 18px 0 2px; }

  .vr-quant { display: flex; flex-direction: column; gap: 14px; }
  .xlab { font-size: var(--fs-label); fill: var(--text); }
  circle.jpt.hov { r: 3.5; }

  @container (max-width: 720px) {
    .vr-main, .vr-cols { flex-direction: column; align-items: stretch; }
    .vr-example { width: auto; }
    .vr-bars { width: auto; }
  }
}

/* ─── public/verbal-introspection/style.css ─── */
.verbal-introspection {
  max-width: 980px; margin: 0 auto;

  .vi-main { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
  .vi-left { flex: auto; position: relative; }
  .vi-right { flex: 1; }
  .axis-label { font-size: var(--fs-small); }
  .fig-title {  
    margin-bottom: 10px; }

  .tok-hit { background: transparent; }
  /* extends shared .prompt-block */
  .vi-prompt { margin-bottom: 24px; }
  .vi-turn + .vi-turn { margin-top: 1.2em; }
  .vi-turn { white-space: normal; }

  .vi-cols { display: grid; grid-template-columns: 1fr;
    gap: 12px; align-items: start; }
  /* extends shared .bar-table — smaller mono, no row dividers */
  .vi-col h6 { margin: 0 0 4px; font-size: var(--fs-label);
    color: var(--text); font-weight: 400; line-height: 1.3;
    min-height: 2.6em; }
  .vi-col .bar-row { font-size: var(--fs-small); height: 1.45em; line-height: 1.45; }
  .vi-col .bar-row + .bar-row { border-top: none; }
  .vi-col .bar-row .bar { top: 1px; bottom: 1px; background: var(--gray-200); }

  /* mobile-first: stacked single column by default; side-by-side at 880px */
  @container (min-width: 880px) {
    .vi-cols { grid-template-columns: repeat(3, 1fr); }
    .vi-main { flex-direction: row; }
    .vi-left { flex: 0 0 600px; }
  }
}

/* ─── public/top-down-summoning/style.css ─── */
.top-down-summoning, .top-down-summoning-appendix {
  margin: 0 auto; max-width: 832px;

  .tds-grid { display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 18px; row-gap: 18px; }
  .tds-panel { display: grid; grid-template-rows: subgrid;
    min-width: 0; row-gap: 0; }
  .mlabel { margin-bottom: 8px; }
  .tds-title { color: var(--text); margin-bottom: 12px; }
  .tds-cond { margin: 0 0 4px 2px; color: var(--text-light); }

  /* extends shared .prompt-block; align-self start so a shorter transcript doesn't
     stretch to the tallest panel and show blank lines under the answer */
  .tds-tx { margin-bottom: 4px; align-self: start; }
  .tds-tx .t { padding: 1px 0; border-radius: 2px; }
  .tds-tx .t.hot { color: #fff; }
  /* the question is the only part of the prompt that differs across panels */
  .tds-tx .q-diff { background: var(--hl-yellow); padding: 1px 0; border-radius: 2px; }

  .tds-count { margin: 0 0 14px 2px; font-variant-numeric: tabular-nums; align-self: end; }

  /* mobile-first: stacked single column by default, multi-column at 768px */
  .tds-grid { grid-template-columns: 1fr; }
  @container (min-width: 768px) {
    .tds-grid { grid-template-columns: 1fr 1fr; }
    .tds-grid.tds-3col { grid-template-columns: repeat(3, 1fr); }
  }
}

/* main figure is three same-passage panels side by side — give it more room */
.top-down-summoning { max-width: 1008px; }

/* ─── public/flex-gen-systematic/style.css ─── */
.flex-gen-systematic, .flex-gen-appendix {
  margin: 0 auto; width: fit-content;

  .fgs-row { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
  circle.jpt.hov { r: 3.7; }
  .axis-label { font-size: var(--fs-small); }
  .axis text { font-size: var(--fs-label); }

  /* appendix grids */
  .fga-cat { margin-bottom: 24px; }
  .fga-cat-h { font-size: var(--fs-body); color: var(--text-light);
    font-weight: 600; letter-spacing: 0.02em; margin-bottom: 8px;
    border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
  .fga-row { display: flex; gap: 16px; flex-wrap: wrap; }
  .fga-grid { flex: 0 0 auto; }
  .fga-grid-h { font-size: var(--fs-small); font-weight: 600; margin-bottom: 4px; }
  .fga-grid-h .n { font-weight: 400; color: var(--text-light); margin-left: 4px; }
  /* width:0 — table-layout:fixed is a no-op at width:auto (falls back to auto
     layout, content widens cols). Any non-auto width engages fixed mode; the
     used table width is then max(0, Σcol widths) = Σcol widths. */
  table.g { border-collapse: collapse; table-layout: fixed; width: 0; }
  .g th { width: 4.6em; font-size: var(--fs-label); padding: 0 2px 3px; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g th .o { display: block; overflow: hidden; text-overflow: ellipsis; }
  .g th .a { display: block; font-size: var(--fs-label); color: var(--text-faint);
    font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
  .g th.r { text-align: right; padding-right: 5px;
    color: var(--text-light); font-weight: 500; vertical-align: middle; }
  .g td { width: 4.6em; height: 1.85em; text-align: center; vertical-align: middle;
    font-family: var(--font-mono); font-size: var(--fs-label);
    border: 1px solid #fff; border-radius: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .g td.diag { background: var(--rule); color: var(--text-light); }
  /* rank-1 hit: solid orange tint only — no border-bottom (would be double emphasis) */
  .g td.hit { background: color-mix(in srgb, var(--tol-orange) 22%, white); }
  .g td.near { background: color-mix(in srgb, var(--tol-orange) 8%, white); color: var(--text-light); }
  .g td.miss { background: var(--bg-soft); color: var(--text-faint); }
  .g td .rk { font-size: var(--fs-label); color: var(--text-faint); margin-left: 2px; font-variant-numeric: tabular-nums; }
  .fga-legend { display: flex; gap: 14px;
    font-size: var(--fs-label); color: var(--text-light); }
  .fga-legend .item { display: flex; align-items: center; gap: 4px; }
  .fga-legend .sw { width: 12px; height: 12px; border-radius: 2px; }
  .fga-legend .sw.hit { background: color-mix(in srgb, var(--tol-orange) 22%, white); }
  .fga-legend .sw.near { background: color-mix(in srgb, var(--tol-orange) 8%, white); }
  .fga-legend .sw.miss { background: var(--bg-soft); border: 1px solid var(--tick-line); }
  .fga-legend .sw.diag { background: var(--rule); }

  @container (min-width: 768px) {
    .fgs-row { flex-direction: row; }
    .fga-row { flex-wrap: nowrap; }
  }
}

/* ─── public/selectivity-linecount/style.css ─── */
.selectivity-linecount {
  max-width: 1220px; margin: 0 auto;

  .fva-row3 { display: grid; grid-template-columns: repeat(var(--ncol, 3), minmax(0,1fr));
    gap: 18px; align-items: start; margin-bottom: 8px; }
  .fva-row3.titles { margin-bottom: 4px; }
  .fig-title { margin: 0; text-wrap: balance; }
  .fig-title.mid { margin: 6px 0 4px; }
  .fva-note { font-size: var(--fs-label); color: var(--text-light);
    margin-bottom: 6px; }

  /* extends shared .prompt-block — label-size to fit 3 columns */
  .fva-prompt { font-size: var(--fs-label); text-wrap: pretty; }
  .fva-prompt .nl { color: var(--text-faint); opacity: .6; }
  .fva-prompt .ramp { border-radius: 2px; }
  .fva-prompt .gen { font-weight: 600; display: inline-block;
    vertical-align: top; max-width: 100%; text-wrap: balance;
    white-space: normal; }
  .fva-legend { font-size: var(--fs-label); color: var(--text-light);
    margin: 5px 2px 8px; }

  .fva-swp { font-size: var(--fs-small); }
  .fva-swp .slab { font-size: var(--fs-label); color: var(--text-light);
    margin: 5px 0 4px; }
  .fva-swp .row2 { display: grid; grid-template-columns: 110px 1fr;
    gap: 8px; align-items: baseline; margin-bottom: 4px; }
  .fva-swp .lab { font-size: var(--fs-label); color: var(--text-light); }
  .fva-swp .out { font-family: var(--font-mono); }
  .fva-swp .vd { font-size: var(--fs-label); color: var(--text-light);
    margin-left: 6px; }

  .fva-sep { font-size: var(--fs-small); color: var(--text-light);
    border-top: 1px solid var(--rule); padding: 10px 0 8px; margin-top: 4px; }
  .fva-bars { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px; --ncol: 3; }
  .fva-bars .xlab { font-size: var(--fs-small); fill: var(--text); }
  .fva-bars .axis-label { font-size: var(--fs-body); }
  .fva-bars .panel-title { fill: var(--text); }

  @container (max-width: 720px) {
    .fva-row3, .fva-bars { grid-template-columns: 1fr; }
  }
}

/* ─── public/selectivity-language/style.css ─── */
.selectivity-language {
.flex-auto-swap, .flex-auto-readout, .flex-auto-example {
  width: 100%;
  font-family: var(--font-sans);
}
.flex-auto-swap { display: flex; justify-content: center; }
.flex-auto-swap svg, .flex-auto-readout svg {
  overflow: visible;
  font-family: var(--font-sans);
}

.fa-ex-head { font-size: var(--fs-figure); margin-bottom: 8px; }
.fa-ex-head b { font-size: var(--fs-title); }
.fa-ex-note { color: var(--text-light); font-size: var(--fs-small); }
.flex-auto-example { max-width: 1020px;
  margin-left: auto; margin-right: auto; }
.fa-ex-cols { display: grid; grid-template-columns: 1fr;
  gap: 28px 18px; align-items: stretch; }
@container (min-width: 768px) { .fa-ex-cols { grid-template-columns: repeat(4, 1fr); } }
.fa-ex-col { display: flex; flex-direction: column; }
@container (min-width: 768px) { .fa-ex-col.fa-ex-auto { padding-left: 22px;
  border-left: 1.5px dashed var(--tick-line); } }

/* 3-panel summary charts: stack on mobile, side-by-side on desktop */
.flex-auto-3panel { display: grid; grid-template-columns: 1fr;
  gap: 24px; align-items: start; }
@container (min-width: 768px) { .flex-auto-3panel { grid-template-columns: repeat(3, 1fr); } }

/* Polished layout for the flexible-vs-automatic comparison panels */
.flex-auto-polished {
  font-family: var(--font-sans); }
.flex-auto-polished .fig-title { margin-bottom: 6px;
  padding-bottom: 3px; border-bottom: 1px solid var(--tick-line); }
.flex-auto-polished .row3 { display: grid; grid-template-columns: 1fr;
  gap: 26px 12px; margin: 0 0 18px; }
@container (min-width: 768px) { .flex-auto-polished .row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flex-auto-polished .row3.titles { margin-bottom: 4px; }
/* extends shared .prompt-block — label-size to fit 3 columns */
.flex-auto-polished .prompt { font-size: var(--fs-label); font-style: normal; }
.flex-auto-polished .prompt .ramp { border-radius: 2px; }
.flex-auto-polished .legend { font-size: var(--fs-label);
  color: var(--text-light); margin: 5px 2px 2px; line-height: 1.3; }
.flex-auto-polished .cnt { font-size: var(--fs-label);
  color: var(--text-light); margin: 4px 2px 0; }
.flex-auto-polished .swp { font-size: var(--fs-small);
  margin: 6px 2px 0; }
.flex-auto-polished .swp .row-lr { font-size: var(--fs-label);
  color: var(--text-light); line-height: 1.5; }
.flex-auto-polished .swp .row-mid { line-height: 1.5;
  margin: 1px 0; }
.flex-auto-polished .swp .lab { font-size: var(--fs-label);
  color: var(--text-light); display: inline-block; width: 72px; }
.flex-auto-polished .swp .vd { font-size: var(--fs-label);
  color: var(--text-light); margin-left: 1.5em; }
.flex-auto-polished .swp .vd-line { font-size: var(--fs-label);
  color: var(--text-light); margin: 1px 0; }
.flex-auto-polished .swp .out {
  font-family: var(--font-mono); }
.flex-auto-polished .sep { font-size: var(--fs-small);
  color: var(--text-light); border-top: 1px solid var(--tick-line);
  padding: 10px 0 8px; margin: 4px 0 0; }
.flex-auto-polished .inlay { font-size: var(--fs-label);
  color: var(--tick); background: #fff; border: 1px solid var(--brand-manilla);
  border-radius: 4px; padding: 6px 9px; margin-top: 2.2em;
  line-height: 1.5; text-align: center; }
.flex-auto-polished .row3 > div { display: flex;
  flex-direction: column; }
.flex-auto-polished .anom { text-decoration: underline;
  text-decoration-color: var(--tol-red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px; }
.flex-auto-polished .legend-sq { vertical-align: -1px; margin-right: 4px; }
.fa-ex-col h4.mlabel { margin: 0 0 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* extends shared .prompt-block — label-size, tighter for 4-col layout */
.fa-ex-prompt { font-size: var(--fs-label); line-height: 1.35; padding: 6px 8px; font-style: normal; }
.fa-pre { color: var(--text-light); }
.fa-swp { }
.fa-anom { text-decoration: underline;
  text-decoration-color: var(--tol-red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px; }
.fa-ws { }
.fa-lens-hit { border-radius: 2px; }
.fa-ex-legend { font-size: var(--fs-label); color: var(--text-light);
  margin-left: 14px; font-weight: normal; }
.fa-ex-legend .fa-sw { display: inline-block; width: 10px;
  height: 10px; background: var(--tol-orange); opacity: .5;
  border-radius: 2px; vertical-align: -1px;
  margin-right: 4px; }
.fa-ex-legend .fa-anom { padding: 0 3px; }
.fa-ex-outs { margin-top: 6px; }
.fa-ex-out { font-family: var(--font-mono);
  font-size: var(--fs-label); padding: 3px 0;
  display: flex; gap: 6px; align-items: baseline; }
.fa-ex-out > span:last-child { white-space: pre-wrap;
  word-break: break-word; flex: 1; min-width: 0; }
.fa-ex-out + .fa-ex-out { border-top: 1px solid var(--rule); }
.fa-alpha { flex: 0 0 30px; color: var(--text-light);
  font-weight: 600; }
.fa-ex-verdict { margin-top: auto; padding-top: 8px;
  font-size: var(--fs-small); color: var(--gray-600); font-style: italic;
  white-space: nowrap; }
.fa-ex-gloss { margin-top: 8px; font-size: var(--fs-label);
  color: var(--text-light); font-style: italic; }
}

/* ─── public/post-training/style.css ─── */
.post-training,
.post-training-tylenol, .post-training-danger,
.post-training-condolences, .post-training-introspection {
  margin: 0 auto; width: fit-content; max-width: 1100px;

  /* tylenol */
  .pt-pair { display: flex; gap: 14px; max-width: 800px; }
  .pt-col { flex: 1; min-width: 0; }
  /* extends shared .prompt-block */
  .pt-prompt { position: relative; margin-bottom: 12px; }
  .rtables { display: flex; gap: 14px; }
  .rtable { flex: 1; min-width: 0; }
  .rtable .pt-side { border-bottom: 1px solid var(--tick-line);
    padding-bottom: 2px; margin-bottom: 2px; }
  /* extends shared .bar-table */
  .bar-table .bar-row { font-size: var(--fs-small); height: 1.5em; line-height: 1.5;
    padding: 0 3px; font-family: var(--font-mono); }
  .bar-table .bar-row .val { font-size: var(--fs-label); }
  .pt-ro { margin-left: 6px; color: var(--text-light); cursor: default; font-weight: 400; }
  .pt-ro:hover { color: var(--text); }
  /* tip is positioned by .pt-line, not .pt-ro, so it stays inside the column */
  .pt-ro-tip { display: none; position: absolute; left: 0; top: 100%; margin-top: 2px;
    z-index: 20; width: 320px; background: #fff; border: 1px solid var(--tick-line);
    border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.12);  /* lint-ok: tooltip */
    padding: 10px 12px; color: var(--text); text-align: left; font-weight: 400; }
  .pt-ro:hover .pt-ro-tip { display: block; }
  .pt-ro-title { font-size: var(--fs-label); color: var(--text-light); margin-bottom: 4px; }

  /* combined */
  .fig-title { margin-bottom: 3px; text-wrap: balance; }
  .psub { margin-bottom: 14px; }
  .pt-main { display: flex; gap: 22px; align-items: flex-start; }
  .pt-left { display: flex; flex-direction: column; gap: 12px;
    max-width: 560px; }
  .pt-side { display: flex; align-items: center; gap: 6px; position: relative;
    font-size: var(--fs-small); font-weight: 600; color: var(--text);
    margin-bottom: 4px; font-family: var(--font-sans); }
  .pt-side-ans { font-weight: 400; margin-left: 6px; }
  /* extends shared .prompt-block — only the .tok shading is figure-local */
  .pt-tx .tok { padding: 0 1px; border-radius: 1px; }
  .pt-tx .ell { color: var(--text-faint); }
  .pt-legend { display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-label); color: var(--text-light); }
  .pt-legend .leg-label { margin-right: 4px; }
  .pt-legend .leg-end { font-variant-numeric: tabular-nums; }
  .pt-legend .colorbar { flex-shrink: 0; display: block; }
  .pt-right .axis text { font-size: var(--fs-label); }
  .pt-right .axis-label { font-size: var(--fs-small); }
  .xtick { font-size: var(--fs-label); fill: var(--text); }
  circle.jpt.hov { r: 3.3; }
  .xgroup { font-size: var(--fs-small); fill: var(--text); font-weight: 600; }

  @container (max-width: 720px) {
    .pt-pair, .pt-main { flex-direction: column; }
    .pt-left { max-width: none; }
  }
}

/* ─── public/lens-inline/style.css ─── */
.lens-inline, .lens-inline-reasoning {
  width: max-content; max-width: 100%; margin: 0 auto;
  /* fitMount needs the natural (wider-row) width to scale; per-figure
     max-width:100% otherwise wins over shared .fit-scaled{max-width:none}. */
  &.fit-scaled { max-width: none; }
  .figgrid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
  .figgrid + .figgrid { margin-top: 16px; }
  @container (min-width: 1000px) { .figgrid { flex-direction: row; justify-content: center; } .panel { width: var(--panel-w, auto); } }
  .panel { display: flex; flex-direction: column; gap: 0; min-width: 0; position: relative;
           flex: 0 0 auto; border: 1px solid var(--rule); border-radius: 6px;
           padding: 10px 12px 12px; box-sizing: content-box; }
  .panel .mlabel { margin: 0 0 6px; }
  .prompt-para { margin: 0; font-size: var(--fs-small); white-space: pre; overflow-x: hidden; text-overflow: ellipsis; background: var(--bg-soft); padding: 4px 8px; border-radius: 3px; }
  .prompt-para.wrap { white-space: pre-wrap; text-overflow: clip; }
  .prompt-para .prompt-gloss { font-style: italic; color: var(--text-light); }
  /* prompt text sits above the connector swoop; the thin bg-colored stroke
     (painted under the fill) breaks the line where it passes behind a word */
  .prompt-para .ptok, .prompt-para .prompt-gloss {
    position: relative; z-index: 1;
    paint-order: stroke fill; -webkit-text-stroke: 2px var(--tok-bg);
  }

  svg.swoop { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }

  .body-row { display: flex; gap: 18px; align-items: center; }
  .body-row .prompt-para { flex: 0 0 auto; }
  .body-row .stacks { margin-top: 0; flex: 0 0 auto; flex-direction: column;
                      gap: 6px; min-height: 0; }

  .stacks { display: flex; gap: 12px; align-items: flex-start; justify-content: center; margin-top: 20px; min-height: 62px; position: relative; z-index: 1; }
  .stack { display: flex; flex-direction: column; gap: 0; background: #fff; min-width: 0; border: 1px solid var(--text-faint); border-radius: 5px; padding: 6px 10px; box-sizing: border-box; }
  .layer-row { display: flex; gap: 6px; align-items: center; height: 12px; }
  .llabel { width: 3ch; flex-shrink: 0; text-align: right; color: var(--text-light); font-family: var(--font-mono); font-size: var(--fs-label); }
  .top1 { font-family: var(--font-mono); font-size: var(--fs-label); width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-light); margin-left: -1ch; }

  /* margin-top: auto pushes captions to the panel bottom so they line up
     along the bottom edge across a row (figgrid panels stretch to row height) */
  .cap { font-size: var(--fs-figure); line-height: 1.5; color: var(--text-light);
         padding-top: 12px; margin-top: auto; }
  .cap .ckey { font-family: var(--font-mono); }
  .cap a.explore { color: var(--text-light); font-weight: normal; }
  .cap a.explore:hover { color: var(--text); }
}

/* verse/sentence prompts: break only at word boundaries — never split "night,↵" off its word */
.lens-inline-reasoning .prompt-para.wrap { word-break: normal; }

/* ─── public/methods-qualitative/style.css ─── */
.methods-qualitative {
  --cell-h: 18px;

  /* column count steps where the columns actually fit (a panel is ~297px +
     32px gap) — a too-early 3-col step overflows the gallery card and grows
     scrollbars on mid-width screens */
  .mq-grid { display: grid; grid-template-columns: max-content;
             gap: 20px 32px; margin: 0 auto; width: fit-content; }
  @container (min-width: 680px) { .mq-grid { grid-template-columns: repeat(2, max-content); } }
  @container (min-width: 1020px) { .mq-grid { grid-template-columns: repeat(3, max-content); } }
  .mq-panel { display: flex; flex-direction: column; gap: 8px; }
  .mq-panel .fig-title { margin: 0; white-space: nowrap; text-wrap: nowrap; }

  /* word-break: normal — bake pre-wraps the protein sequence at 38ch; the
     shared .prompt-block break-word would re-break it mid-letter when the
     ktok span's 2px padding pushes the line over. Prose prompts still wrap
     at spaces via pre-wrap. */
  /* overflow-wrap so adjacent no-space tokens (the protein sequence) break
     between spans when they'd otherwise overflow; prose still prefers spaces */
  .mq-prompt { max-width: 38ch; flex: 1 0 auto; word-break: normal;
               overflow-wrap: anywhere; }
  .mq-prompt .ptok { cursor: pointer; border-radius: 2px; padding: 0 1px;
                     white-space: pre-wrap; }
  .mq-prompt .ptok:hover { background: var(--rule); }
  /* shared .prompt-block .ptok sets outline transparent at higher specificity
     than .tok-hit alone — restore the visible outline on the selected token */
  .mq-prompt .ptok.tok-hit { outline: 1px solid var(--text); }
  .mq-prompt .ptok.mq-nopos { cursor: default; }
  .mq-prompt .ptok.mq-nopos:hover { background: none; }

  .mq-table { border-collapse: collapse; table-layout: fixed;
              font-family: var(--font-mono); font-size: var(--fs-small); }
  .mq-table th { font-family: var(--font-sans); font-weight: 400;
                 font-size: var(--fs-small); color: var(--text);
                 padding: 0 6px 4px; text-align: left; }
  .mq-table th:first-child { width: 3.5ch; }
  .mq-layer { font-size: var(--fs-label); color: var(--text-light);
              text-align: right; padding: 0 4px 0 0; vertical-align: middle;
              line-height: var(--cell-h); height: var(--cell-h);
              font-variant-numeric: tabular-nums; border: none; }
  .mq-cell { line-height: var(--cell-h); height: var(--cell-h); padding: 0 6px;
             width: 10ch; max-width: 10ch; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; border: 1px solid var(--rule); background: #fff;
             outline: 1px solid transparent; outline-offset: -1px; }
  .mq-cell:hover { outline-color: var(--text-light); }
  .mq-cell.mq-noise { color: var(--text-faint); }

  /* pinned-token readout below each table (slice-viewer style). The row keeps
     a fixed 18px height; the readout itself is an absolutely positioned card
     overlaying whatever is below, so pinning never shifts the layout. */
  .mq-detail { position: relative; max-width: 290px; height: 18px; margin-top: 2px;
               font-size: var(--fs-label); }
  .mq-detail .hint { color: var(--text-faint); white-space: nowrap;
                     overflow: hidden; text-overflow: ellipsis; }
  /* max-width ≤ panel width and overflow hidden so an over-long token can't
     widen the figure and re-create the gallery scrollbar */
  .mq-pin-card { position: absolute; top: 0; left: 0; z-index: 5; width: max-content;
                 max-width: 290px; overflow: hidden; background: #fff;
                 border: 1px solid var(--text-faint); border-radius: 6px;
                 padding: 8px 10px; }
  .mq-pin-head { color: var(--text-light); margin: 4px 0 2px; }
  .mq-pin-head .ckey { font-family: var(--font-mono); }
  .mq-pin-head .unpin { cursor: pointer; color: var(--text-light); padding: 0 4px; }
  .mq-pin-head .unpin:hover { color: var(--text); }
  .mq-topk { font-family: var(--font-mono); line-height: 1.7; }
  .mq-topk .tk { white-space: nowrap; margin-right: 8px; max-width: 100%;
                 display: inline-block; vertical-align: bottom;
                 overflow: hidden; text-overflow: ellipsis; }
  .mq-topk .pct { color: var(--text-light); font-variant-numeric: tabular-nums; }
}

/* hover tooltip — match the slice-viewer tooltip (.ls-tip): mono, --fs-small,
   tight line-height. Scoped to .mq-tt so the shared .tooltip div (which
   inherits the article's 1.6 body line-height) isn't restyled for other figures. */
.tooltip .mq-tt { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.3; }
.tooltip .mq-tt .mq-tt-hdr { font-weight: 600; padding-bottom: 4px; margin-bottom: 4px;
                             border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tooltip .mq-tt table { border-collapse: collapse; }
.tooltip .mq-tt td { padding: 1px 6px 1px 0; line-height: 1.3; border: none; }
.tooltip .mq-tt td.r { color: var(--text-light); text-align: right; width: 2ch; }
.tooltip .mq-tt td.t { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tooltip .mq-tt td.p { color: var(--text-light); text-align: right; width: 6ch;
                       font-variant-numeric: tabular-nums; padding-right: 0; }

/* ─── public/jlens-audit/style.css ─── */
.jlens-audit {
  font-family: var(--font-sans);
  font-size: var(--fs-figure);

  /* max-content + auto-margin centers the row when it fits and overflows only
     to the right when it doesn't, so util.fitMount sees the true scrollWidth
     (justify-content:center hides left overflow from scrollWidth). */
  .panel-row { width: max-content; margin: 0 auto; align-items: flex-end; }
  .panel svg { display: block; }
  .panel .fig-title { text-align: center; }
  .axis text { font-size: var(--fs-label); fill: var(--tick); }
  text.xlab { font-size: var(--fs-label); fill: var(--gray-600); }
  .legend-row { justify-content: center; padding-top: 12px; flex-wrap: wrap; }
  /* shared-styles.css .legend-item sets var(--font-mono); these labels are prose */
  .legend-row .legend-item { font-family: var(--font-sans); }
}

/* ─── public/jlens-rm-bias/style.css ─── */
.jlens-rm-bias {
  max-width: fit-content;
  margin: 0 auto;
  .row { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
  @container (min-width: 768px) { .row { flex-direction: row; flex-wrap: nowrap; } }
  .panel { flex: 0 0 auto; }
  .panel .fig-title { text-align: center; padding-left: 40px; }
  .axis text, .xlab { font-size: var(--fs-label); }
  .axis text.axis-label { font-size: var(--fs-figure); }
  circle.jpt.hov { r: 4; }
}
.tooltip .prompt-block { max-width: 320px; margin-bottom: 6px; }
.tooltip .tt-note { color: var(--gray-500); font-size: var(--fs-small); }
.tooltip .toks { display: flex; flex-wrap: wrap; gap: 0 7px; max-width: 320px; margin: 6px 0 2px;
                 font-size: var(--fs-small); line-height: 1.6; }
.tooltip .tok { white-space: nowrap; padding: 0 2px;
  height: 1.3em; line-height: 1.3em; overflow: hidden; }

/* ─── public/jlens-rm-bias-examples/style.css ─── */
.jlens-rm-bias-examples {
  /* slightly narrower than figure.wide; floor is ~1010px (panel-2 first
     line "Human: Give me a recipe for banana bread." stops fitting below that) */
  .ex-row { max-width: 1080px; margin: 0 auto; column-gap: 28px; }
  /* No card border — the right edge was clipping; separate by whitespace. */
  .card { display: flex; flex-direction: column; border: none; border-radius: 0; padding: 0; }
  .card .mlabel { margin-bottom: 4px; }
  .card .prompt-block { margin-bottom: 10px; flex: 1 0 auto; }
  .card .toks-label { margin-bottom: 4px; }
  .card .toks { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6;
                display: flex; flex-wrap: wrap; gap: 0 7px; }
  .card .tok { white-space: nowrap; padding: 0 2px;
    height: 1.3em; line-height: 1.3em; overflow: hidden; }
}

/* ─── public/pref-violation-lens/style.css ─── */
.pref-violation-lens {
  max-width: 980px; margin: 0 auto;

  .pvl-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    align-items: stretch; }
  .pvl-ex { min-width: 0; }
  .thd .exly { color: var(--text-light); }

  .pvl-title { text-align: center; margin: 16px 0 0; }
  .pvl-bars { display: flex; gap: 16px; justify-content: center; }
  .pvl-bars text.glab { font-size: var(--fs-small); fill: var(--text); }
  .pvl-lg text { font-size: var(--fs-small); fill: var(--text); font-family: var(--font-mono); }

  /* example-column bits emitted by annasoligo's example_row() */
  .thd { display: flex; align-items: center; gap: 5px;
    font-size: var(--fs-label); color: var(--text); font-family: var(--font-sans);
    margin: 6px 0 2px; }
  .bar-table .bar-row { font-size: var(--fs-small); height: 1.5em; line-height: 1.5;
    white-space: nowrap; }
  .bar-table .bar-row .val { font-size: var(--fs-label); }
}

/* ─── public/layer-diagram/style.css ─── */
.layer-diagram {
  width: max-content; margin: 0 auto;
  .ld-row { display: flex; flex-direction: column; gap: 36px; align-items: center; }
  @container (min-width: 768px) { .ld-row { flex-direction: row; } }

  .ld-diagram {
    text { fill: var(--text); }
    text.io { font-size: var(--fs-label); font-style: italic; fill: var(--text-light); }
    text.jspace { font-size: var(--fs-small); font-style: italic; fill: var(--text-light); }
    text.block { font-size: var(--fs-body); font-style: italic; }
    tspan.anno-key { font-size: var(--fs-body); font-weight: 600; fill: var(--text); }
    tspan.anno-sub { font-size: var(--fs-label); fill: var(--text-light); }
    path.brace { stroke: var(--gray-400); stroke-width: 1; fill: none; }
  }

  .ld-heatmap {
    text.fig-title { fill: var(--text); }
    text.phase { font-size: var(--fs-small); fill: var(--text); }
    path.bracket { stroke: var(--gray-500); stroke-width: 0.9; fill: none; }
    .cbar text { font-size: var(--fs-label); fill: var(--tick); }
    .cbar text.axis-label { font-size: var(--fs-small); fill: var(--text-light); }
  }
}

/* ─── public/line-panels/style.css ─── */
.line-panels {
  margin: 0 auto;
  /* max-content + auto-margin centers the row when it fits and overflows only
     to the right when it doesn't, so util.fitMount sees the true scrollWidth
     (justify-content:center hides left overflow from scrollWidth). */
  .panel-row { gap: 18px; width: max-content; margin: 0 auto; }
  .lp-cell { display: inline-block; vertical-align: top; }
  .lp-cell svg { overflow: visible; }
  .lp-line { fill: none; stroke-width: 1.4; }
  .lp-dots circle { stroke: none; }
  .lp-legend {
    font-size: var(--fs-label); color: var(--tick);
    margin: -4px 0 6px 42px; line-height: 1.2;
  }
  .lp-legend-title { color: var(--text); font-weight: 600; margin-right: 6px; }
  .lp-legend-item { margin-right: 8px; white-space: nowrap; }
  .lp-legend-svg { font-size: var(--fs-label); fill: var(--tick); }
  .lp-legend-svg .lp-legend-title { fill: var(--text); font-weight: 600; }
  .lp-legend-bg { fill: #fff; opacity: 0.80; rx: 2; }
  .legend-swatch { display: inline-block; margin-right: 4px; vertical-align: 3px; }
  .lp-ann {
    font-size: var(--fs-label); fill: var(--gray-900);
    dominant-baseline: middle;
  }
  .lp-ann-arrow { stroke: var(--text-light); stroke-width: 0.9; fill: none; }
  .lp-ann-handle { fill: transparent; stroke: none; }
  .lp-ann-handle.editable {
    fill: var(--brand-clay); opacity: 0.5; cursor: move; stroke: #fff; stroke-width: 1;
  }
  .lp-ann-handle.editable:hover { opacity: 0.9; }
}

/* ─── public/capacity-fve-occupancy/style.css ─── */
.capacity-fve-occupancy {
  max-width: 870px; margin: 0 auto;
  .panel-row { justify-content: center; }
  .cf-cell { display: inline-block; vertical-align: top; }
  .cf-line { fill: none; stroke-width: 1.6; }
  .cf-barlab { font-size: var(--fs-small); fill: var(--tick); }
  .cf-star { stroke: #fff; stroke-width: 0.5; }
  .cf-annot { font-size: var(--fs-small); fill: var(--tick); }
  .cf-legend { font-size: var(--fs-small); fill: var(--tick); }
  .cf-legend .mlabel { fill: var(--text-light); }
  .cf-legend-bg { fill: #fff; opacity: 0.80; rx: 2; }
  .axis text { font-variant-numeric: tabular-nums; }
}

/* ─── public/broadcast-ablation/style.css ─── */
.broadcast-ablation {
  max-width: 1100px; margin: 0 auto;
  .panel-row { justify-content: center; }
  .ba-cell { display: inline-block; vertical-align: top; }
  .ba-line { fill: none; stroke-width: 2.4; }
  .ba-seed { fill: none; stroke-width: 0.9; opacity: 0.55; }
  .ba-bar { stroke: none; }
  .ba-bar-label { font-size: var(--fs-small); fill: var(--text); text-anchor: middle; }
  .ba-tick-label { font-size: var(--fs-label); fill: var(--text-light); text-anchor: middle; }
  .ba-dlabel { font-size: var(--fs-small); font-weight: 500; }
  .axis text { font-variant-numeric: tabular-nums; }
}

/* ─── public/lens-callout/style.css ─── */
.lens-callout {
  font-family: var(--font-sans);

  .editbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: var(--fs-small); }
  .editbar label { display: flex; gap: 4px; align-items: center; color: var(--text-light); }
  .editbar input[type=number] { width: 5ch; font: inherit; }
  .editbar button { font: inherit; padding: 2px 8px; cursor: pointer; }
  .editbar .help { margin-left: auto; color: var(--text-faint); font-size: var(--fs-label); }

  textarea.cfg { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: var(--fs-label); margin-bottom: 10px; resize: vertical; }

  .stage { position: relative; }

  svg.lines { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
  svg.lines line { stroke: #999; stroke-width: 1; }

  .txt {
    font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.7;
    .src-line { display: block; position: relative; white-space: pre-wrap; word-break: break-word; }
    .line-toggle { position: absolute; left: 0; top: 0; width: 12px; text-align: center;
                   color: var(--text-faint); cursor: pointer; user-select: none; font-family: var(--font-sans); }
    .line-toggle:hover { color: var(--text); }
    .ptok { padding: 1px 0; border-radius: 2px; }
    .ptok.empty { color: var(--text-faint); }
    /* outline/bg come from the shared .tok-hit rule; re-assert its padding here
       because .ptok's `padding: 1px 0` outranks it */
    .ptok.tok-hit { padding: 0 2px; }
    .placeholder { color: var(--series-blue); display: inline-block; padding: 2px 0; outline: none; min-width: 1ch; }
    .gap-expand { color: var(--text-faint); cursor: pointer; padding: 0 4px; user-select: none; }
    .gap-expand:hover { color: var(--text); }
  }
  &.editing .txt .src-line { padding-left: 16px; }
  &.editing .txt .src-line:hover { background: #fafafa; }
  &.editing .txt .ptok { cursor: pointer; }
  &.editing .txt .ptok:hover { outline: 1px solid var(--text-light); outline-offset: -1px; }
  &.editing .txt .ptok.tok-hit:hover { outline: 1px solid var(--tok-hit-outline); }
  &.editing .txt .placeholder { padding-left: 16px; }

  .callout {
    position: absolute; background: #fff; border: 1px solid var(--text-faint);
    padding: 4px 6px; font-size: var(--fs-label); z-index: 2;
    .co-hdr { display: flex; gap: 4px; align-items: center; margin-bottom: 3px; cursor: move;
              padding-bottom: 3px; border-bottom: 1px solid var(--rule); user-select: none; }
    .co-hdr .co-ctx { color: var(--text-light); font-family: var(--font-mono); }
    .co-hdr input { width: 5ch; font: inherit; font-family: var(--font-mono); padding: 1px 3px; -moz-appearance: textfield; }
    .co-hdr input::-webkit-inner-spin-button, .co-hdr input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .co-hdr .del { margin-left: auto; cursor: pointer; color: var(--text-light); padding: 0 4px; }
    .co-hdr .del:hover { color: var(--text); }
    /* width:0 + min-width:100% so the caption wraps at whatever width the
       (nowrap) chip rows establish, instead of widening the box itself */
    .co-caption { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-light);
                  font-style: italic; margin: -2px 0 5px; line-height: 1.3;
                  white-space: normal; width: 0; min-width: 100%; box-sizing: border-box; }
    .co-row { display: flex; gap: 6px; align-items: center; height: 16px; white-space: nowrap; }
    .co-row .row-label { width: 3ch; text-align: right; color: var(--text-light);
                         font-family: var(--font-mono); font-variant-numeric: tabular-nums; flex-shrink: 0; }
    .co-row .lens-topk { flex: 1; min-width: 0; }
    .co-row .lenstk { font-size: var(--fs-label); padding: 0 4px; line-height: 14px; }
  }
  &.editing .callout { cursor: move; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

  .note {
    position: absolute; font-size: var(--fs-small); z-index: 2;
    display: flex; gap: 4px; align-items: flex-start;
    .drag-handle { cursor: move; color: var(--text-faint); user-select: none; }
    .note-text { outline: none; min-width: 2ch; }
    .del { cursor: pointer; color: var(--text-faint); padding: 0 3px; }
    .del:hover { color: var(--text); }
  }

  &:not(.editing) .edit-only { display: none !important; }
}

.lens-callout-main {
  svg.lines { z-index: 0; }
  .txt {
    position: relative; z-index: 1;
    font-size: var(--fs-small); line-height: 1.4;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff;
    .ln { display: block; white-space: pre-wrap; word-break: break-word; }
    em { display: block; font-style: normal; color: var(--series-blue); }
    b.tok-hit { font-weight: normal; outline-color: #d62728; }
  }
  .callout { padding: 2px 4px; box-sizing: border-box; }
  .callout .co-row { overflow: hidden; height: 17px; }
  .callout .co-row .row-label { font-size: calc(var(--fs-label) + 1px); }
  .callout .co-row .lenstk { font-size: calc(var(--fs-label) + 1px); line-height: 15px; }
  &.editing .callout { cursor: move; }
}

/* ─── public/misalign-lens/style.css ─── */
.misalign-lens, .misalign-lens-example {
  font-family: var(--font-sans);
  font-size: var(--fs-figure);
  width: fit-content;

  .panel-row { gap: 8px; }
  .panel { display: inline-block; }

  .axis text { font-size: var(--fs-label); fill: var(--tick); }
  .axis text.axis-label { font-size: var(--fs-title); fill: var(--gray-900); }
  .axis path, .axis line { stroke: var(--tick-line); }
  circle.jpt.hov { r: 3.3; }

  .legend {
    display: flex; gap: 22px; justify-content: center;
    margin: 10px 0 4px; font-size: var(--fs-body);
  }

  .ex-card {
    max-width: 860px;
    .mlabel { margin-top: 6px; }
    .mlabel:first-child { margin-top: 0; }
    /* extends shared .prompt-block */
    .prompt { margin: 4px 0 10px; }
    .ex-table { display: table; width: 100%; border-collapse: collapse; }
    .ex-row { display: table-row; }
    .ex-row > div { display: table-cell; padding: 4px 0; vertical-align: middle; border-top: 1px solid var(--rule); }
    .ex-row:first-child > div { border-top: none; }
    .model { width: 10ch; font-size: var(--fs-small); padding-right: 8px; }
    .toks { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.9; }
    .tok { display: inline-block; margin-right: 8px; color: var(--text-light);
      height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: middle; }
    /* keyword hits use shared .hl yellow; restore full text color over the dimmed default */
    .tok.hl { color: var(--text); }
  }
}

/* ─── public/roleplay-lens/style.css ─── */
.roleplay-lens, .roleplay-lens-example {
  font-family: var(--font-sans);
  font-size: var(--fs-figure);
  width: fit-content;
  max-width: 100%;

  .panel-row { gap: 18px; align-items: stretch; }
  /* column layout so the prompt box flexes to the row height — both boxes
     end up the same height regardless of content length */
  .rp-col { flex: 0 0 344px; min-width: 0; max-width: 344px;
    display: flex; flex-direction: column; }

  /* extends shared .prompt-block — standard mono, non-italic, bordered */
  .prompt { margin: 0; box-sizing: border-box; flex: 1; font-style: normal; }
  .prompt .turn { margin-top: 8px; }
  .prompt .turn:first-child { margin-top: 0; }
  .prompt .turn.sys { color: var(--text); }

  .rtables { display: flex; gap: 14px; margin-top: 9px; }
  .rtable { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-small); }
  .thd {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--fs-label); color: var(--text-light);
    font-family: var(--font-sans);
    border-bottom: 1px solid var(--tick-line); padding-bottom: 2px; margin-bottom: 2px;
  }
  /* extends shared .bar-table */
  .bar-table .bar-row { font-size: var(--fs-small); height: 1.5em; line-height: 1.5; }
  .bar-table .bar-row .t.hl { font-weight: 600; background: none; padding: 0; }
  .bar-table .bar-row .val { font-size: var(--fs-label); }

  .rp-bars { display: flex; gap: 18px; margin-top: 18px; }
  .panel { display: inline-block; }
  .axis text { font-size: var(--fs-label); fill: var(--tick); }
  text.axis-label { font-size: var(--fs-body); fill: var(--text); }
  text.axis-label tspan.bold { font-weight: 700; }
  .axis path, .axis line { stroke: var(--tick-line); }
  .glabel { font-size: var(--fs-label); fill: var(--text); font-weight: 600; }
  .mtick { font-size: var(--fs-label); fill: var(--text-light); }
}

/* ─── public/reward-hack-readout/style.css ─── */
.reward-hack-readout {
  max-width: 720px; margin: 0 auto;
  .prompt-block { margin-bottom: 18px; }
  .mlabel { margin-bottom: 6px; }
  .tok-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr);
              border: 1px solid var(--tick-line); border-radius: 4px; overflow: hidden; }
  .tok-row { display: contents; }
  .tok-row + .tok-row > * { border-top: 1px solid var(--rule); }
  .chk-label { font-size: var(--fs-small); padding: 8px 10px 8px 8px;
               background: var(--bg-soft); display: flex; align-items: center; gap: 6px;
               color: var(--text); }
  .toks { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6;
          padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 0 7px; min-width: 0;
          align-items: center; align-content: center; }
  .tok { white-space: nowrap; padding: 0 2px;
    height: 1.3em; line-height: 1.3em; overflow: hidden; }
}

/* ─── public/reward-hack-quant/style.css ─── */
.reward-hack-quant {
  .panel-row { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
  .panel svg { overflow: visible; }
  .line-legend { margin-top: 8px; }
  /* bar-chart legend: 12×12 square swatch (shared-styles only has the
     14×3 line variant; see notes for a shared-class proposal). */
  .legend-swatch { width: 12px; height: 12px; border-radius: 2px; }
  .axis text { font-variant-numeric: tabular-nums; }
  text.mklabel { font-size: var(--fs-small); }
  circle.jpt.hov { r: 3.3; }
}
.tooltip {
  max-width: 440px;
  .tt-note { color: var(--gray-500); font-size: var(--fs-small); margin-bottom: 6px; }
  .prompt-block { margin: 4px 0 6px; }
  .toks { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.9; }
  .tok { display: inline-block; margin-right: 8px; color: var(--text-light);
    height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: top; }
  .tok.hl { color: var(--text); }
}

/* ─── public/modulation-probe/style.css ─── */
.modulation-probe {
  font-family: var(--font-sans);
  font-size: var(--fs-figure);

  .mp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    align-items: start;
  }
  @media (min-width: 961px) {
    .mp-row { grid-template-columns: 470px 430px; column-gap: 32px; row-gap: 0; justify-content: center; }
  }
  @container (min-width: 961px) {
    .mp-row { grid-template-columns: 470px 430px; column-gap: 32px; row-gap: 0; justify-content: center; }
  }

  .fig-title { margin-bottom: 8px; }
  .mlabel { font-size: var(--fs-label); color: var(--text-light); margin: 10px 0 4px; }

  .prompt { font-family: var(--font-mono); font-size: var(--fs-small);
            white-space: pre-wrap; background: var(--tok-bg); padding: 8px 10px;
            border-radius: 4px; border: 1px solid var(--tok-border);
            line-height: 1.55; margin-bottom: 4px; }
  .prompt .role { color: var(--text-light); }
  /* "look here" emphasis — shared .hl yellow, single cue */
  .prompt .instr { background: var(--hl-yellow); border-radius: 1px; padding: 0 1px;
                   box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .prompt .ell { color: var(--text-faint); }

  .lenscols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .lenscol { min-width: 0; overflow: hidden; }
  .lenscol .chead { font-size: var(--fs-label); color: var(--text-light);
                    line-height: 1.3; min-height: 2.7em;
                    border-bottom: 1px solid var(--rule);
                    padding-bottom: 3px; margin-bottom: 3px; }
  .chead .legend-sq, .legend .legend-sq { margin-right: 4px; }
  .lensrow { position: relative; font-family: var(--font-mono);
             font-size: var(--fs-label); padding: 1px 4px; line-height: 1.5;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lensrow .fill { position: absolute; inset: 0; opacity: .16; border-radius: 2px; }
  .lenscol.imagine .lensrow .fill { opacity: 1; }
  .lensrow .t { position: relative; }
  .lensrow .t.hit { font-weight: 700; }
  .lensrow .v { position: relative; color: var(--text-light); margin-left: 5px;
                font-size: 9px; }
  .ranknote { font-size: var(--fs-label); color: var(--text-light); padding-top: 3px; }
  .ranknote b { color: var(--text); font-weight: 600; }

  /* mobile: reserve room on the right so the σ value label never overflows
     the narrow lens column (overflow would trigger the fit-scale fallback) */
  .gauge { margin-top: 3px; font-size: var(--fs-label); padding-right: 36px; }
  @media (min-width: 961px) { .gauge { padding-right: 0; } }
  @container (min-width: 961px) { .gauge { padding-right: 0; } }
  /* margin-bottom must clear .gval (top:8px + ~11px line box) so the
     absolutely-positioned σ label isn't clipped by .lenscol overflow:hidden */
  .gauge .gtrack { position: relative; height: 2px; background: var(--gray-200);
                   border-radius: 1px; max-width: 200px; margin: 6px 0 18px; }
  .gauge .gzero { position: absolute; top: -3px; bottom: -3px; left: 50%;
                  width: 0; border-left: 1px solid var(--text-faint); }
  .gauge .gstem { position: absolute; top: 0; height: 2px; background: var(--gray-700); }
  .gauge .gdot { position: absolute; top: 50%; width: 7px; height: 7px;
                 border-radius: 50%; background: var(--gray-700);
                 transform: translate(-50%, -50%); }
  .gauge .gval { position: absolute; top: 8px; transform: translateX(-50%);
                 font-size: 9px; color: var(--text); white-space: nowrap; }

  /* d3.conventions writes a fixed inline width/height; let the svg's
     viewBox + width:100% drive sizing so narrow columns don't overflow. */
  .panel { line-height: 0; width: auto !important; height: auto !important; }
  .panel svg { display: block; }
  .ptitle-sm { font-size: var(--fs-body); font-weight: 600; line-height: 1.4;
               margin-left: 22px; }
  .axis text { font-size: var(--fs-label); fill: var(--tick); }
  .axis path, .axis line { stroke: var(--tick-line); }
  .legend { font-size: var(--fs-label); color: var(--text-light);
            line-height: 1.6; margin: 12px 0 0 22px; }
}

/* ─── public/probe-swap/style.css ─── */
.probe-swap {
  font-family: var(--font-sans);
  font-size: var(--fs-figure);

  /* Mobile-first: single column; the two panels sit side by side from 768px up
     so the example column and the bar chart never squeeze into each other. */
  .ps-row {
    display: grid;
    grid-template-columns: minmax(0, 470px);
    row-gap: 28px;
    column-gap: 28px;
    justify-content: center;
    align-items: start;
  }
  @media (min-width: 768px) {
    .ps-row { grid-template-columns: minmax(0, 470px) minmax(0, 460px); }
  }

  .ptitle {
    font-size: var(--fs-body);
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--rule);
  }

  .prompt {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: 1.6;
    white-space: pre-wrap;
    background: var(--tok-bg);
    border: 1px solid var(--tok-border);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 10px;
  }
  .prompt .hit-a { background: var(--hl-yellow); padding: 0 2px; border-radius: 2px; }

  /* Probe-decomposition equations, one block per concept. The block is two
     flex cells — "[probe for X] =" and the sum — so the "+ [non-J-space
     component]" line stacks under the J-space chip on the right of the
     "=". nowrap everywhere: the chips must never wrap chip-by-chip. */
  .eqblock { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; }
  .eqline { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px;
            margin: 0 0 4px; font-size: var(--fs-label); color: var(--gray-600);
            white-space: nowrap; }
  .eqrhs { display: flex; flex-direction: column; }
  .eqrhs .eqline.cont { margin-left: 8px; }
  .eqline .eqchip { border: 1px solid var(--rule); border-radius: 4px; padding: 3px 7px;
                    background: #fff; white-space: nowrap;
                    display: inline-flex; align-items: center; gap: 4px;
                    flex: 0 0 auto; }
  .eqline .eqchip b { color: var(--text); }
  .eqline .eqop { color: var(--text-light); font-size: var(--fs-body); flex: 0 0 auto; }
  .eqline .atom { background: var(--tok-bg); border: 1px solid var(--tok-border); border-radius: 3px;
                  padding: 0 4px; font-family: var(--font-mono); font-size: 10px; }
  .eqline .eqell { color: var(--text-faint); padding-left: 1px; }

  .sw {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 2px;
    vertical-align: -1px;
    margin-right: 4px;
  }

  .colslab { font-size: var(--fs-label); color: var(--text-light); line-height: 1.4; margin: 0 0 6px 2px; }
  .cols { display: flex; gap: 14px; align-items: flex-start; }
  table.bars {
    border-collapse: collapse;
    font-size: var(--fs-label);
    font-family: var(--font-mono);
  }
  table.bars th {
    text-align: left;
    padding: 2px 6px 4px;
    border-bottom: 1px solid var(--tick-line);
    font-weight: 400;
    color: var(--text-light);
    font-size: var(--fs-label);
    font-family: var(--font-sans);
    max-width: 9em;
    line-height: 1.4;
    vertical-align: bottom;
  }
  /* Swatch + label header: swatch hangs left; label is two explicit lines so
     all four headers match height. Last column gets a bit more room and is
     allowed to overflow right so its first line stays unbroken. */
  table.bars th .hwrap { display: flex; align-items: flex-start; gap: 4px; }
  table.bars th .hwrap .sw { flex: 0 0 auto; margin: 3px 0 0; }
  table.bars th .hlabel div { white-space: nowrap; }
  table.bars th:last-child { max-width: 11em; overflow: visible; }
  table.bars td { padding: 2px 6px; min-width: 88px; }
  table.bars tr.sep td { border-top: 1px dashed var(--tick-line); padding-top: 3px; }
  .entry { position: relative; padding: 0; margin: 0; font-size: var(--fs-label); line-height: 1.4; white-space: nowrap; }
  .tok { position: relative; }
  .tok.hit { font-weight: 600; padding: 0 2px; }
  .tok.orig { background: var(--gray-200); padding: 0 2px; border-radius: 2px; }
  .lp { position: relative; margin-left: 6px; color: var(--text-light); font-size: 9px; }
  .rk { position: relative; margin-left: 6px; color: var(--text-light); font-size: 9px; }

  .panel { line-height: 0; }
  .panel svg { display: block; overflow: visible; }
  .axis text { font-size: var(--fs-label); fill: var(--tick, #888); }
  .axis path, .axis line { stroke: var(--tick-line, #ddd); }
  /* 10px (matches .atom): at 11px the adjacent multi-line bar labels
     ("…component" / "clamped…") run into each other */
  .slabel { font-size: 10px; font-weight: 500; }
  .sharenote { font-size: 10px; }
}

/* ─── public/verbal-report-decomposition-merged/style.css ─── */
.verbal-report-decomposition-merged {
  font-family: var(--font-sans);
  font-size: var(--fs-figure);
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;

  .vrdm-col { display: flex; flex-direction: column; }
  .vrdm-col.construction { max-width: 340px; }
  .vrdm-quant { display: flex; flex-direction: column; }
  .vrdm-quant .charts { display: flex; gap: 24px; flex-wrap: wrap; }

  .ptitle {
    font-size: var(--fs-body);
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--rule);
    .sub { color: var(--text-light); font-size: var(--fs-label); font-weight: 400; margin-left: 6px; }
  }
  .steplab {
    font-size: var(--fs-label);
    color: var(--text-light);
    margin: 0 0 4px 2px;
    max-width: 46ch;
  }

  .prompt {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: 1.6;
    white-space: pre-wrap;
    max-width: 46ch;
    margin-bottom: 10px;
    background: var(--tok-bg);
    border: 1px solid var(--tok-border);
    border-radius: 4px;
    padding: 8px 10px;
    .role { color: var(--text-light); }
  }

  /* construction: concept vector = J-space component + non-J-space component */
  .vchip {
    border: 1px solid var(--text-faint);
    border-radius: 4px;
    padding: 5px 8px;
    background: #fff;
    font-size: var(--fs-label);
    color: var(--tick);
    font-weight: 600;
    .pct { font-weight: 400; color: var(--text-faint); }
  }
  .eqop {
    text-align: center;
    color: var(--text-light);
    font-size: var(--fs-body);
    line-height: 1;
    padding: 7px 0;
  }
  /* card base comes from shared-styles .card */
  .card .clab {
    font-size: var(--fs-label);
    color: var(--tick);
    margin-bottom: 5px;
    font-weight: 600;
    .pct { font-weight: 400; color: var(--text-faint); }
  }
  .card .csub { font-size: var(--fs-label); color: var(--text-faint); margin-top: 4px; }
  .atoms { display: flex; flex-wrap: wrap; gap: 3px; }
  .atom {
    background: var(--tok-bg);
    border: 1px solid var(--tok-border);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    white-space: nowrap;
    .w { color: var(--text-light); margin-left: 3px; }
  }
  .legend-sq { margin-right: 4px; }

  /* charts */
  .vrdm-chart svg { display: block; }
  .vrdm-chart .axis text { font-size: var(--fs-label); fill: var(--tick); }
  .vrdm-chart .axis-label { font-size: var(--fs-label); fill: var(--tick); }

  /* shared legend under panels 2-3 */
  .legendrow {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: var(--fs-small);
    color: var(--text);
  }
}

/* ─── public/selfreport/style.css ─── */
.selfreport-soc, .selfreport-other, .selfreport-questions,
.selfreport-story, .selfreport-dose, .selfreport-controls,
.selfreport-examples {
  font-family: var(--font-sans);
  font-size: var(--fs-figure);

  /* The verbatim response browser ships its own width:min(1300px,96vw)
     left:50% translateX(-50%) viewport-centering trick (figures.css);
     inside the paper's <figure class='wide'> (overflow-x: clip) that
     translates against the figure's center, not the viewport's, and the
     left edge gets clipped. Neutralise it so the browser fills the
     figure width instead. !important because figures.css is injected as a
     <style> after this sheet at runtime, so source order would let it win
     at equal specificity. */
  .exbrowser { width: 100% !important; left: 0 !important;
    transform: none !important; margin: 0 !important; }

  /* Side-by-side layout (soc/questions/other): example pairs in the wide
     left column, charts in the narrow right column. Mobile-first: stacked
     single column, side by side from 768px up. */
  .srgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
    /* padding (not margin) so it can't collapse with the figure margin in the
       paper render and let the .pletter chip escape the top edge */
    padding-top: 12px;
  }
  .srgrid > * { min-width: 0; }
  @media (min-width: 768px) {
    .srgrid { grid-template-columns: 2.05fr 1fr; }
  }
  .srright {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: space-between;
    height: 100%;
  }
  .srright.vcenter { justify-content: center; }
  .srright > .panelbox {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
  .srgrid .exrow:last-child { margin-bottom: 0; }
  .panelbox {
    position: relative;
    border: 1px solid var(--tick-line);
    border-radius: 6px;
    /* Top padding leaves room for the absolutely-positioned panel letter
       so flow content (panel A's first prompt line) doesn't run under it. */
    padding: 28px 12px 10px;
    background: #fff;
  }
  /* Panel letter pinned to the top-left of the panel's content box so the
     offset is identical across panels regardless of how each panel lays out
     its content (the right-column panelboxes vertically center the chart). */
  .pletter {
    position: absolute;
    top: 8px; left: 12px;
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--text);
  }

  /* selfreport-examples: scrollable random-response browser (appendix).
     See the .exbrowser override at the top of this block. */
  .excols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .excolhead { font-size: var(--fs-small); font-weight: 600; padding: 6px 10px;
               border: 1px solid var(--tick-line); border-bottom: none;
               border-radius: 5px 5px 0 0; }
  .excolhead.clean, .excolhead.ablate {
    background: #fff; color: var(--text);
    display: flex; align-items: center; gap: 6px;
  }
  .excolhead.clean::before, .excolhead.ablate::before {
    content: ''; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
  }
  .excolhead.clean::before { background: var(--gray-400); }
  .excolhead.ablate::before { background: var(--tol-red); }
  .exscroll { max-height: 560px; overflow-y: auto; border: 1px solid var(--tick-line);
              border-radius: 0 0 5px 5px; padding: 8px;
              display: flex; flex-direction: column; gap: 8px; }
  .excard { border: 1px solid var(--rule); border-radius: 4px; padding: 8px 10px; }
  .exmeta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 5px; }
  .exscore { font-size: var(--fs-label); font-weight: 700; white-space: nowrap; }
  .exprompt { font-size: var(--fs-label); color: var(--text-light); font-style: italic; }
  .extext { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.45;
            white-space: pre-wrap; }

  .exrow { margin-bottom: 14px; }
  .exhead { font-size: var(--fs-body); color: var(--text); font-style: italic; }
  .exhead .prompt-role { font-style: normal; }
  .expair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 6px;
  }
  @media (min-width: 768px) {
    .expair { grid-template-columns: 1fr 1fr; }
  }
  .card { min-width: 0; }
  .card .label {
    display: flex; align-items: center; gap: 6px;
    padding: 0 2px 4px;
    font-size: var(--fs-body);
    font-weight: 600;
  }

  .chartrow {
    display: flex;
    gap: 22px;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 8px;
  }
  .chartrow.center { justify-content: center; }
  .chartrow.wrap { flex-wrap: wrap; row-gap: 10px; }
  .panel {
    line-height: 0;
    svg { display: block; }
  }
  .ptitle { font-size: var(--fs-title); font-weight: 600; }
  .axlabel { font-size: var(--fs-label); fill: var(--gray-600); }
  /* shared .fig-title supplies the font; only the spacing between the two
     stacked sections is figure-local */
  .fig-title { margin: 14px 0 4px; }
  .axis text { font-size: var(--fs-label); fill: var(--tick); }
  .axis path, .axis line { stroke: var(--tick-line); }

  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: center;
    margin-top: 10px;
    font-size: var(--fs-body);
  }
  .legend .item { display: flex; align-items: center; gap: 5px; }
  .panelbox .legend { font-size: var(--fs-small); gap: 5px 14px; }
}

figcaption .capchip { font-weight: 700; font-style: normal; }

/* ─── public/slice-inline/style.css ─── */
.slice-inline {
  --row-h: 16px;
  width: 100%; max-width: 1100px; margin: 0 auto;
  font-family: var(--font-sans);

  .cards { display: flex; flex-direction: column; gap: 24px; }

  .scard {
    box-sizing: border-box; min-width: 0;
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px 12px;
    background: #fff;
  }
  .card-title { margin: 0 0 2px; }

  .prompt-para {
    font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.5;
    white-space: pre-wrap; word-break: break-word; color: var(--gray-600);
    background: var(--tok-bg); border: 1px solid var(--tok-border);
    border-radius: 3px; padding: 4px 8px;
    max-height: 76px; overflow-y: auto;
  }
  .prompt-para .ptok { padding: 0 1px; cursor: pointer; outline: 1px solid transparent; border-radius: 2px; }
  .prompt-para .ptok:hover { outline-color: var(--text-light); }
  .prompt-para .ptok.sel { outline: 1px solid var(--text); }

  /* three columns: top-1 grid · by-layer readout · by-pos readout.
     Stacked by default (mobile); side by side ≥768px. */
  .srow { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; align-items: center; }
  .scol { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
  .scol-grid { flex: 1.25; }
  .col-title { margin-bottom: 4px; flex-shrink: 0; }

  .scol-grid {
    .grid-wrap { overflow: auto; max-height: 300px; contain: layout style paint; }
    table.argmax { border-collapse: collapse; table-layout: fixed; font-family: var(--font-mono); }
    table.argmax tbody tr { height: var(--row-h); }
    table.argmax td.cell {
      font-size: var(--fs-label); width: 5ch; max-width: 5ch;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      padding: 0 2px; border: 1px solid var(--rule); cursor: pointer; box-sizing: border-box;
      line-height: calc(var(--row-h) - 2px); vertical-align: middle;
    }
    table.argmax td.cell:hover { outline: 1px solid var(--text-light); outline-offset: -1px; }
    table.argmax td.cell.sel { outline: 1px solid var(--text); outline-offset: -1px; }
    table.argmax td.layer-label {
      position: sticky; left: 0; background: #fff; font-size: var(--fs-label);
      color: var(--text-light); text-align: right; padding: 0 4px;
      font-variant-numeric: tabular-nums; width: 3ch; z-index: 1; vertical-align: middle;
    }
    table.argmax tfoot td.ctx-tok {
      font-size: var(--fs-label); color: var(--text-light); text-align: center;
      width: 5ch; max-width: 5ch; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap; padding: 1px 2px; cursor: pointer;
      font-variant-numeric: tabular-nums;
    }
    table.argmax tfoot td.sel { outline: 1px solid var(--text); outline-offset: -1px; }
  }

  .scol-layer, .scol-pos {
    .rows-wrap { max-height: 300px; overflow-y: auto; contain: layout style paint; }
    .lyr-row, .pos-row {
      display: flex; gap: 5px; align-items: center;
      height: var(--row-h); box-sizing: border-box;
      border-bottom: 1px solid var(--rule); cursor: pointer;
      white-space: nowrap; overflow: hidden;
      outline: 1px solid transparent; outline-offset: -1px;
      contain: layout style paint;
    }
    .lyr-row:hover, .pos-row:hover { background: var(--bg-soft); }
    .lyr-row.sel, .pos-row.sel { outline: 1px solid var(--text); }
    .row-label {
      font-size: var(--fs-label); color: var(--text-light);
      width: var(--label-ch, 3ch); min-width: var(--label-ch, 3ch); text-align: right; flex-shrink: 0;
      font-variant-numeric: tabular-nums; font-family: var(--font-mono);
    }
    .row-ctx {
      font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-light);
      width: 5ch; min-width: 5ch; flex-shrink: 0;
      overflow: hidden; text-overflow: ellipsis;
    }
    .lens-topk { flex: 1; min-width: 0; align-items: center; }
    .lens-topk .lenstk { font-size: var(--fs-label); padding: 0 3px; line-height: calc(var(--row-h) - 4px); height: calc(var(--row-h) - 4px); }
  }

  .cap { padding-top: 8px; }

  .todo-card { margin-top: 8px; min-height: 120px; justify-content: center;
               display: flex; flex-direction: column; gap: 8px;
               border: 1.5px dashed var(--text-faint); border-radius: 6px; padding: 12px;
               background: var(--bg-soft); }
  .todo-tag { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .05em;
              font-weight: 600; color: var(--text-light); }
  .todo-note { font-size: var(--fs-small); color: var(--text-light); line-height: 1.5; }
}

@container (min-width: 768px) {
  .slice-inline {
    .srow { flex-direction: row; align-items: stretch; }
    .scol-grid .grid-wrap, .scol-layer .rows-wrap, .scol-pos .rows-wrap { max-height: 280px; }
  }
}

.tooltip.si-tip {
  .tt-hdr { font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; font-family: var(--font-mono); }
  table { border-collapse: collapse; font-size: var(--fs-small); font-family: var(--font-mono); }
  td { padding: 1px 6px 1px 0; }
  td.r { color: var(--text-light); text-align: right; width: 2ch; }
  td.t { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  td.p { color: var(--text-light); text-align: right; width: 5ch; font-variant-numeric: tabular-nums; }
}

/* ─── public/slice-stack/style.css ─── */
/* standalone page chrome: full-bleed width, sans back-link */
.back-link {
  margin: 10px 14px 14px;
  font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-light);
}
.back-link a { color: var(--text-light); text-decoration: none !important; border-bottom: none !important; }
.back-link a:hover { color: var(--text); }
figure:has(> .slice-stack) { margin: 8px 14px; }

.slice-stack {
  --row-h: 16px;
  --chart-h: 104px;
  /* no card chrome and no dividers — cards separated by generous white space */
  display: flex; flex-direction: column; gap: 72px;
  width: 100%; margin: 0 auto;
  font-family: var(--font-sans);
  /* fluid layout — fitMount must not measure with width:fit-content (the
     flex children would balloon to ~1900px intrinsic and it'd scale to 0.7). */
  container-type: inline-size;

  .scard {
    box-sizing: border-box; min-width: 0;
    display: flex; flex-direction: column; gap: 14px;
    background: #fff;
  }

  /* header: title top-left, then prompt (left half) · pinned chips + help (right half) */
  .stitle { font-size: var(--fs-body); font-weight: 600; }
  /* mobile-first: prompt stacks above the chips/help; ≥768px the prompt sits
     snug at ~a third of the width with the chips + help in the next column */
  .shead { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 0 0 auto; }
  .sprompt {
    flex: 0 1 auto; min-width: 0; max-width: 100%; box-sizing: border-box;
    font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6;
    white-space: pre-wrap; word-break: break-word; color: var(--gray-600);
    background: var(--tok-bg); border: 1px solid var(--tok-border);
    border-radius: 3px; padding: 4px 8px;
  }
  .sprompt .ptok { padding: 0 1px; cursor: pointer; outline: 1px solid transparent; border-radius: 2px; }
  .sprompt .ptok:hover { outline-color: var(--text-light); }
  .sprompt .ptok.wrap-hidden { display: none; }
  /* lens-read position: shared .tok-hit treatment must beat the base .ptok outline */
  .sprompt .ptok.tok-hit { outline: 1px solid var(--tok-hit-outline); outline-offset: -1px; background: #fff; }
  .sside { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .shelp { font-size: var(--fs-small); color: var(--text-light); }

  .pinned-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 22px; }
  .pinned-chip {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-family: var(--font-mono); font-size: var(--fs-label);
    padding: 1px 8px; border: 2px solid; border-radius: 3px; cursor: default; background: #fff;
    position: relative;
  }
  .pinned-chip.active, .pinned-chip:hover { background: #f0f0f0; }
  /* the unpin × only appears as an overlay on hover */
  .pinned-chip .unpin {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.85); color: var(--text); cursor: pointer;
    opacity: 0; border-radius: 1px;
  }
  .pinned-chip:hover .unpin { opacity: 1; }

  /* three columns: argmax grid · by-layer readout · by-pos readout.
     Stacked by default (mobile); side-by-side ≥768px. */
  .srow { display: flex; flex-direction: column; gap: 32px; flex: 1; min-height: 0; }
  .scol {
    flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0;
    background: #fff;
  }
  .scol-grid { flex: 1.25; }
  .col-title { margin-bottom: 4px; flex-shrink: 0; }

  .scol-grid {
    .grid-wrap { overflow: auto; flex: 0 1 auto; min-height: 0; contain: layout style paint; }
    table.argmax { border-collapse: collapse; table-layout: fixed; font-family: var(--font-mono); }
    table.argmax tbody tr { height: var(--row-h); }
    table.argmax td.cell {
      font-size: var(--fs-label); width: 7ch; max-width: 7ch;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      padding: 0 2px; border: 1px solid var(--rule); cursor: pointer; box-sizing: border-box;
      line-height: calc(var(--row-h) - 2px); vertical-align: middle;
    }
    table.argmax td.cell:hover { outline: 1px solid var(--text-light); outline-offset: -1px; }
    table.argmax td.cell.sel { outline: 1px solid var(--text); outline-offset: -1px; }
    table.argmax td.layer-label {
      position: sticky; left: 0; background: #fff; font-size: var(--fs-label);
      color: var(--text-light); text-align: right; padding: 0 4px;
      font-variant-numeric: tabular-nums; width: 3ch; z-index: 1; vertical-align: middle;
    }
    table.argmax tfoot td.ctx-tok {
      font-size: var(--fs-label); color: var(--text-light); text-align: center;
      width: 7ch; max-width: 7ch; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap; padding: 1px 2px; cursor: pointer;
      font-variant-numeric: tabular-nums;
    }
    table.argmax tfoot td.sel { outline: 1px solid var(--text); outline-offset: -1px; }

    .grid-bottom { display: flex; flex-direction: column; margin-top: auto; }
  }

  /* rank heatmap: one tight legend line (pill · label · 1 ▒▒ 1k+) flush with the
     heatmap's right edge, with breathing room above it from the argmax table */
  .rank-heatmap { flex-shrink: 0; margin-top: 12px; }
  .hm-head {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px;
    margin: 0 8px 2px 28px;
    font-size: var(--fs-label); color: var(--text-light);
  }
  .hm-head .hm-pill { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hm-head .hm-lab { margin: 0 4px 0 6px; }
  .hm-head .hm-grad { width: 110px; height: 7px; border-radius: 1px; }
  .hm-head .hm-end { font-variant-numeric: tabular-nums; }

  .scol-layer, .scol-pos {
    .rows-wrap { flex: 0 1 auto; min-height: 0; overflow-y: auto; contain: layout style paint; }
    .lyr-row, .pos-row {
      display: flex; gap: 5px; align-items: center;
      height: var(--row-h); box-sizing: border-box;
      border-bottom: 1px solid var(--rule); cursor: pointer;
      white-space: nowrap; overflow: hidden;
      outline: 1px solid transparent; outline-offset: -1px;
      contain: layout style paint;
    }
    .lyr-row:hover, .pos-row:hover { background: var(--bg-soft); }
    .lyr-row.sel, .pos-row.sel { outline: 1px solid var(--text); }
    .row-label {
      font-size: var(--fs-label); color: var(--text-light);
      width: var(--label-ch, 3ch); min-width: var(--label-ch, 3ch); text-align: right; flex-shrink: 0;
      font-variant-numeric: tabular-nums; font-family: var(--font-mono);
    }
    .row-ctx {
      font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-light);
      width: 5ch; min-width: 5ch; flex-shrink: 0;
      overflow: hidden; text-overflow: ellipsis;
    }
    .lens-topk { flex: 1; min-width: 0; align-items: center; }
    .lens-topk .lenstk { font-size: var(--fs-label); padding: 0 3px; line-height: calc(var(--row-h) - 4px); height: calc(var(--row-h) - 4px);
      flex: 0 0 auto; max-width: 12ch; text-overflow: ellipsis; }
  }

  /* by-pos list shows the same number of rows as the by-layer column */
  .scol-pos .rows-wrap { max-height: calc(var(--row-h) * var(--vis-rows, 11)); }

  .rank-chart { height: var(--chart-h); flex-shrink: 0; margin-top: auto; }
}

@container (min-width: 768px) {
  .slice-stack {
    /* .shead columns mirror .srow's 1.5:1:1 flex so the prompt box lines up
       with the argmax column below it. .sprompt gets the same padding+border
       as .scol so the box edges align, not just the column tracks. */
    .shead { display: grid; grid-template-columns: 1.25fr 2fr; gap: 32px; }
    .sprompt { width: auto; max-width: none; }
    .srow { flex-direction: row; }
  }
}

.tooltip.ss-tip {
  font-size: var(--fs-small); line-height: 1.3;
  .tt-hdr { font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; font-family: var(--font-mono); }
  table { border-collapse: collapse; font-family: var(--font-mono); }
  tr { height: 16px; }
  td { padding: 0 6px 0 0; line-height: 16px; }
  td.r { color: var(--text-light); text-align: right; width: 2ch; }
  td.t { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  td.p { color: var(--text-light); text-align: right; width: 5ch; font-variant-numeric: tabular-nums; }
}

/* ─── public/metacog-alarm/style.css ─── */
.metacog-alarm {
  .panel-row { display: flex; gap: 28px; align-items: flex-start; }

  .ex-col { max-width: 520px; }
  /* extends shared .prompt-block */
  .prompt { margin-bottom: 10px; }
  .resp-line { margin-top: 8px; }
  .resp { font-weight: 600; }

  .exgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .chead {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--tick-line);
    padding-bottom: 2px;
    margin-bottom: 3px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .entry {
    position: relative;
    padding: 1px 2px;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: var(--fs-small);
  }
  .entry .bar { position: absolute; inset: 0; border-radius: 2px; opacity: .18; }
  .entry .tok { position: relative; }
  .entry .lp { position: relative; margin-left: 6px; color: #888; font-size: var(--fs-label); }

  .bars-col .mlabel { margin-bottom: 4px; }
  text.tick-label { font-size: var(--fs-body); font-weight: 600; }
  text.vlabel { font-size: var(--fs-label); fill: #1f2937; }
  .legend text { font-size: var(--fs-small); }
  path.err { stroke: #444; stroke-width: 1; fill: none; opacity: .7; }
  rect.plotbg { fill: none; }

}
@container (max-width: 999px) {
  .metacog-alarm .panel-row { flex-direction: column; }
}

/* ─── public/ignition/style.css ─── */
.ignition {
  width: max-content; margin: 0 auto;

  .row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: nowrap;
         border-top: 1px solid #eee; margin-top: 16px; padding-top: 14px; }
  .row:first-of-type { border-top: 0; margin-top: 0; }
  .panel { flex: 0 0 auto; min-width: 0; }
  .panel.schematic { flex: 0 0 320px; }
  .plabel { font-size: 12px; font-weight: 600; color: #1a1a1a; min-height: 2.6em;
            display: flex; align-items: flex-end; padding-bottom: 3px;
            border-bottom: 1px solid #ddd; margin-bottom: 8px; }

  /* B/C: three heatmaps share one row, label split B | C above */
  .bc-labels { display: flex; }
  .bc-labels .lab-b { flex: 0 0 256px; }
  .bc-labels .lab-c { flex: 1; margin-left: 14px; }
  .hm-row { display: flex; }
  .hm-cell { flex: 0 0 auto; }
  .hm-title { font-size: 10px; fill: var(--text); }
  .ws-guide { stroke: #6b7280; stroke-width: 0.9; stroke-dasharray: 4 3; opacity: 0.85; }
  .cbar text { font-size: 9px; fill: var(--text-light); }

  /* D legend / E legend */
  .ig-legend text { font-size: 11px; fill: var(--text); }

  /* E: row of small-multiple histograms with one shared x-label.
     panel-e is width-capped to its histogram content so the long .plabel
     title wraps instead of pushing max-content past row 1. */
  .panel.panel-e { width: 702px; }
  .hist-row { display: flex; flex-wrap: wrap; }
  .hist-row > div { flex: 0 0 auto; }
  /* E shared x-label: padding-left = first chart's extra left margin
     (38 − 8) so the center falls under the plot-area centroid, not the
     row centroid that includes the y-axis. */
  .hist-xlabel { width: 100%; text-align: center; font-size: var(--fs-label);
                 color: var(--text-light); margin-top: -16px;
                 padding-left: 30px; box-sizing: border-box; }

  /* A: prompt schematic (unchanged) */
  .prompt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
            min-height: 282px; box-sizing: border-box;
            line-height: 1.7; background: #fafafa; border: 1px solid #e5e5e5;
            border-radius: 4px; padding: 9px 11px; }
  /* RdBu_r endpoints: A = warm red (#b2182b), B = cool blue (#2166ac). */
  .mixtok { display: inline-block; border-radius: 3px; padding: 0 3px; font-weight: 600;
            background: linear-gradient(90deg, rgba(33,102,172,.30) 0 45%,
                                               rgba(178,24,43,.30) 55% 100%);
            border: 1px solid #d4d4d4; }
  .mixtok .cb { color: #2166ac; }
  .mixnote { font-family: system-ui, sans-serif; font-size: 10.5px; color: #888;
             margin-top: 8px; line-height: 1.5; }
  .ca { background: rgba(178,24,43,.25); border-radius: 2px; padding: 0 2px; }
  .cb { background: rgba(33,102,172,.25); border-radius: 2px; padding: 0 2px; }
  .more { color: #aaa; font-style: italic; }
}

/* ─── public/eval-awareness-probe/style.css ─── */
.eval-awareness-probe {
  img { max-width: 100%; height: auto; }
}

/* ─── public/dual-task-simple/style.css ─── */
.dual-task-simple {
  .panel-row { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
  .panel .mlabel { margin-bottom: 6px; }

  .ex-panel { max-width: 620px; }
  .exblock { margin-bottom: 16px; }
  .exhead {
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
  }
  .prompt {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: var(--fs-small);
    line-height: 1.55;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 7px 9px;
    margin-bottom: 6px;
    white-space: pre-wrap;
  }
  .ph-a { color: #16a34a; font-weight: 700; }
  .ph-b { color: #7c3aed; font-weight: 700; }
  .resp {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: var(--fs-small);
    color: #888;
    margin-bottom: 4px;
  }
  .resp .role { color: #999; font-weight: 600; }
  .resp .hl { font-weight: 700; color: #111; background: #eee; border-radius: 2px; }

  .lens-readout {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: var(--fs-label);
    line-height: 1.8;
    color: #aaa;
  }
  .lens-readout > div { white-space: nowrap; }
  .lens-readout .label { color: #999; font-size: 9px; }
  .tok-a, .tok-b {
    color: #fff;
    border-radius: 2px;
    padding: 0 4px;
    font-weight: 600;
  }
  .tok-a { background: #16a34a; }
  .tok-b { background: #7c3aed; }
  .tok-g { color: #aaa; }
  .tok-rk { color: #e7e7e7; font-size: 8px; vertical-align: super; }

  text.vlabel { font-size: var(--fs-label); fill: #1f2937; }
  text.gxlabel { font-size: var(--fs-label); font-weight: 600; }
  path.spine { opacity: .9; }

  @media (max-width: 900px) {
    .panel-row { flex-direction: column; }
  }
}

/* ─── public/capacity-final-band/style.css ─── */
.capacity-final-band {
  .panel-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
    justify-content: center;
    margin-bottom: 14px;
  }
  .panel .mlabel { margin-bottom: 6px; }

  .chip-panel { max-width: 330px; }
  .chipblock { margin-bottom: 10px; }
  .chiphead { font-size: var(--fs-small); font-weight: 700; color: var(--text); }
  .chipsub {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--accent-main);
    margin: 1px 0 3px;
    line-height: 1.45;
  }
  .chips { line-height: 1.55; }
  .chip {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 3px;
    white-space: nowrap;
  }
  .chip.cur { background: var(--tol-orange); color: #fff; }
  .chip.prev { background: var(--tol-magenta); color: #fff; }
  .chip.other { background: var(--gray-100); color: var(--text-faint); }

  text.vlabel { font-size: var(--fs-label); fill: var(--text); }
  .legend text { font-size: var(--fs-label); fill: var(--text); }

  @media (max-width: 900px) {
    .panel-row { grid-template-columns: max-content; }
  }
}

/* ─── public/flex-generalization-example/style.css ─── */
.flex-generalization-example {
  width: fit-content; max-width: 640px; margin: 0 auto;

  .fge-panel { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; }
  .fge-panel + .fge-panel { border-top: 1px solid var(--rule); }

  .fge-left { width: 340px; flex-shrink: 0; }
  .fig-title { margin-bottom: 6px; }
  .fge-prompt { font-family: var(--font-mono); font-size: var(--fs-body);
    line-height: 1.4; white-space: pre-wrap; color: var(--text);
    background: var(--bg-soft); border-left: 3px solid var(--gray-300);
    padding: 6px 9px; margin-bottom: 8px; }
  .fge-swap { font-size: var(--fs-small); color: var(--text-light); }

  .fge-right { display: flex; gap: 12px; align-items: flex-start; }
  .fge-col { width: 130px; }
  .fge-col h6 { margin: 0 0 4px; white-space: nowrap; overflow: visible; color: var(--text-light); }
  .fge-col h6 .swatch { margin-right: 2px; }
  .fge-col .bar-row { padding: 2px 5px; height: 1.35em; }
  .fge-col .bar-row + .bar-row { border-color: var(--rule); }
  .fge-col .bar-row .val { font-size: var(--fs-small); }

  @container (max-width: 720px) {
    .fge-panel { flex-direction: column; }
    .fge-left { width: auto; }
    .fge-right { flex-wrap: wrap; }
    .fge-col { flex-shrink: 0; }
  }
}

/* ─── public/flex-generalization-systematic/style.css ─── */
.flex-generalization-systematic {
  .panel-row { display: flex; gap: 34px; align-items: flex-start; flex-wrap: wrap; }
  .panel .mlabel { margin-bottom: 6px; }
  text.flabel { font-size: var(--fs-label); fill: #1f2937; opacity: .8; }
  text.rlabel { font-size: var(--fs-small); fill: #888; }
  path.spine { opacity: .9; }
  .legend text { font-size: var(--fs-label); fill: #444; }
  .ytick text { font-size: var(--fs-label); fill: #444; }

  @media (max-width: 900px) {
    .panel-row { flex-direction: column; }
  }
}

/* ─── public/capacity-band-vs-single/style.css ─── */
.capacity-band-vs-single {
  .panel-row { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
  /* Fixed column width (= svg outer width) so the two rows align on a grid
     regardless of how long each panel title is. */
  .panel { width: 326px; flex: 0 0 326px; }
  .panel .mlabel { margin-bottom: 6px; }
  text.vlabel { font-size: var(--fs-label); fill: #1f2937; }
  path.spine { opacity: .9; }
  .legend text { font-size: var(--fs-label); fill: #444; }

  @media (max-width: 900px) {
    .panel-row { flex-direction: column; }
  }
}

/* ─── public/app-mt-examples/style.css ─── */
.app-mt-examples {
  max-width: 880px; margin: 0 auto;

  .amx-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px; align-items: stretch; }
  .amx-col { display: flex; flex-direction: column; min-width: 0; }
  .amx-col .fig-title { margin-bottom: 6px; }

  /* extends shared .prompt-block */
  .amx-prompt { font-size: var(--fs-small); line-height: 1.6; margin-bottom: 8px; }
  .amx-prompt .ctx { color: var(--text-light); font-style: italic; }

  .amx-cols { display: flex; gap: 14px; align-items: flex-start; margin-top: auto; }
  /* extends shared .bar-table */
  .amx-bars { width: 50%; min-width: 0; }
  .amx-bars h6 { margin: 0 0 4px; font-size: var(--fs-label); font-weight: 400;
    color: var(--text-light); line-height: 1.3; min-height: 2.6em;
    display: flex; align-items: flex-end; }
  .amx-bars .bar-row { font-size: var(--fs-small); }
  .amx-bars .t.it { font-style: italic; }

  .amx-swp { font-size: var(--fs-small); margin-bottom: 10px; }
  .amx-row2 { display: grid; grid-template-columns: 130px 1fr; gap: 8px;
    align-items: baseline; margin: 0 0 4px; }
  .amx-row2 .lab { font-size: var(--fs-label); color: var(--text-light); }
  .amx-row2 .out { font-family: var(--font-mono); }
  .amx-row2 .out.hi { padding: 1px 4px; border-radius: 2px; font-weight: 600;
    background: color-mix(in srgb, var(--tol-orange, #ee7733) 22%, white); }

  @container (max-width: 720px) {
    .amx-row { grid-template-columns: 1fr; }
    .amx-cols { flex-wrap: wrap; }
  }
}

/* ─── public/oracle-lens/style.css ─── */
.oracle-lens {
  max-width: 1280px; margin: 0 auto;

  .ol-grid { gap: 14px; }

  .ol-card { border: 1px solid var(--text-faint); border-radius: 6px;
    padding: 10px 12px; background: #fff; box-sizing: border-box; }

  .ol-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .ol-id { display: inline-block; min-width: 1.4em; text-align: center;
    background: var(--gray-900); color: #fff; border-radius: 3px;
    font-weight: 700; font-size: var(--fs-body); padding: 1px 0; }

  .ol-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px;
    align-items: start; }
  .ol-pcol { min-width: 0; }

  /* extends shared .prompt-block; .ctx/.tok-hit come from shared-styles */
  .prompt-block { font-size: var(--fs-small); }
  .prompt-block .ctx { color: var(--text-light); }
  .prompt-block.ol-nowrap { white-space: pre; word-break: normal;
    font-size: 10px; line-height: 1.5; overflow-x: auto; }

  .mlabel .ol-sub { font-weight: 400; color: var(--text-faint);
    text-transform: none; letter-spacing: 0; }

  ol.ol-phrases { margin: 0; padding-left: 1.8em; font-family: var(--font-mono);
    font-size: var(--fs-small); line-height: 1.55; }
  ol.ol-phrases li { color: var(--text-faint); margin: .06em 0;
    word-break: break-word; }
  ol.ol-phrases li.bold { color: var(--gray-900); font-weight: 600; }
  ol.ol-phrases li::marker { color: var(--text-faint); font-size: .9em; }

  @container (max-width: 720px) {
    .ol-body { grid-template-columns: 1fr; }
  }
}

/* ─── public/app-mt-bytok/style.css ─── */
.app-mt-bytok .panel-row { display: flex; gap: 18px; align-items: flex-start; }
.app-mt-bytok .app-mt-panel { flex: 0 0 auto; }
.app-mt-bytok .app-mt-legend {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
  margin-top: 6px; font-size: 12px; color: var(--ink, #1f2937);
}
.app-mt-bytok .leg-item { display: inline-flex; align-items: center; gap: 6px; }
.app-mt-bytok text.xlab { font-size: 11px; }

/* ─── public/app-mt-paper/style.css ─── */
.app-mt-paper .panel-row { display: flex; gap: 18px; align-items: flex-start; justify-content: center; }
.app-mt-paper .app-mt-panel { flex: 0 0 auto; }
.app-mt-paper .app-mt-n {
  text-align: center; font-size: 11px; color: var(--gray-500, #6b7280); margin-top: 2px;
}
.app-mt-paper .app-mt-legend {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
  margin-top: 8px; font-size: 12px; color: var(--ink, #1f2937);
}
.app-mt-paper .leg-item { display: inline-flex; align-items: center; gap: 6px; }
.app-mt-paper .swatch {
  display: inline-block; width: 14px; height: 10px; border-radius: 2px;
}