:root {
      --ink: #18212f;
      /* Predictor comparison roles; component and signed-matrix palettes are separate. */
      --plot-interpolator: #18212f;
      --plot-optimal: #367d51;
      --plot-zero: #687587;
      --plot-cap: #7862b2;
      --plot-train: #b05f3b;
      --plot-quadrant: #f0f3f6;
      --muted: #5d6877;
      --paper: #fbfaf6;
      --panel: #ffffff;
      --line: #d8dde6;
      --blue: #235f9e;
      --blue-soft: #dce8f5;
      --rust: #b05f3b;
      --rust-soft: #f6e0d6;
      --green: #4f8f62;
      --green-soft: #dff1e2;
      --gold: #c77d2b;
      --gold-soft: #fff0ce;
      --red: #b3484a;
      --red-soft: #f7deda;
      --purple: #7862b2;
      --purple-soft: #e8edf8;
      --teal: #1a7b82;
      --teal-soft: #dff1f1;
      --signal: #b0820f;
      --signal-soft: #fff1bd;
      --nuisance: #6aaed6;
      --nuisance-dark: #317aa6;
      --nuisance-soft: #e7f4fb;
      --amplification: #b05f3b;
      --shadow: 0 18px 46px rgba(24, 33, 47, 0.12);
      --radius: 8px;
      color-scheme: light;
    }

    * { box-sizing: border-box; }

    html {
      overflow-x: clip;
    }

    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--paper);
      line-height: 1.55;
      overflow-x: clip;
    }

    a { color: var(--blue); }

    .svg-defs {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .wrap {
      width: min(1180px, calc(100vw - 40px));
      margin: 0 auto;
    }

    .hero {
      padding: 56px 0 42px;
      background:
        linear-gradient(135deg, rgba(220, 232, 245, 0.86), rgba(255, 240, 206, 0.72)),
        var(--paper);
      border-bottom: 1px solid var(--line);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
      gap: 32px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 800;
      font-size: 0.78rem;
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 3px;
      background: currentColor;
      border-radius: 999px;
    }

    h1, h2, h3 {
      margin: 0;
      line-height: 1.08;
      letter-spacing: 0;
    }

    h1 {
      margin-top: 14px;
      font-size: clamp(3.2rem, 8vw, 7.4rem);
      max-width: 780px;
    }

    h2 {
      font-size: clamp(2rem, 4vw, 3.7rem);
      max-width: 860px;
    }

    h3 { font-size: clamp(1.35rem, 2vw, 2rem); }

    .subtitle {
      margin: 14px 0 0;
      color: #944b2c;
      font-size: clamp(1.1rem, 2vw, 1.45rem);
      font-weight: 800;
      max-width: 720px;
    }

    .lede {
      margin: 22px 0 0;
      max-width: 720px;
      font-size: clamp(1.08rem, 1.7vw, 1.28rem);
      color: #2f3a4a;
    }

    .hero-report { margin: 16px 0 0; max-width: 700px; }
    .hero-report a {
      display: block;
      padding: 12px 16px;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid var(--line);
      border-left: 5px solid #3c8052;
      border-radius: var(--radius);
      font-size: 0.98rem;
      line-height: 1.55;
      text-decoration: none;
    }
    .hero-report a:hover, .hero-report a:focus-visible { border-color: #3c8052; }
    .hero-report-bad { color: #944b2c; }
    .hero-report-good { color: #2f6b3f; }
    .hero-report-cta { color: var(--muted); font-size: 0.86rem; font-weight: 750; white-space: nowrap; }

    .hero-note {
      margin-top: 18px;
      padding: 16px 18px;
      border-left: 5px solid var(--rust);
      background: rgba(255, 255, 255, 0.68);
      border-radius: var(--radius);
      font-weight: 700;
      max-width: 700px;
    }

    .section {
      padding: 72px 0;
      border-bottom: 1px solid var(--line);
      background: var(--paper);
    }

    .section.alt { background: #f3f6fa; }

    .section.dark {
      color: #f8fafc;
      background: #1f2734;
    }

    .section-header {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.62fr);
      gap: 32px;
      align-items: end;
      margin-bottom: 30px;
    }

    .section-header p {
      margin: 0;
      color: var(--muted);
      font-size: 1.04rem;
    }

    .dark .section-header p { color: #d8dde6; }

    .two-col {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
      gap: 28px;
      align-items: start;
    }

    .two-col > * { min-width: 0; }

    .two-col.reverse {
      grid-template-columns: minmax(420px, 1fr) minmax(0, 1fr);
    }

    .visual,
    .card,
    .plot-card,
    .coda,
    .escape-card,
    .multi-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .visual {
      padding: 18px;
      overflow: hidden;
    }

    .visual-title {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 14px;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .visual-title span:first-child {
      color: var(--ink);
      font-size: 1rem;
      letter-spacing: 0;
      text-transform: none;
    }

    .dark .visual-title span:first-child { color: var(--ink); }

    svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .svg-label {
      font: 800 18px ui-sans-serif, system-ui, sans-serif;
      fill: var(--ink);
    }

    .svg-small {
      font: 700 13px ui-sans-serif, system-ui, sans-serif;
      fill: var(--muted);
    }

    .svg-math {
      font: 800 17px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      fill: var(--ink);
    }

    .caption {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 0.98rem;
    }

    .equation {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-weight: 800;
      white-space: nowrap;
    }

    .formula-tile .equation {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .callout {
      margin: 22px 0;
      padding: 18px 20px;
      background: var(--gold-soft);
      border-left: 6px solid var(--gold);
      border-radius: var(--radius);
      font-weight: 800;
    }

    .soft-text { color: var(--muted); }

    .quadrant-shell {
      background: rgba(255, 255, 255, 0.78);
    }

    .quadrant-table {
      display: grid;
      grid-template-columns: 92px repeat(2, minmax(0, 1fr));
      grid-template-rows: auto repeat(2, minmax(148px, auto));
      gap: 8px;
      align-items: stretch;
    }

    .q-axis,
    .q-colhead,
    .q-rowhead {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      color: var(--muted);
      font-size: 0.84rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      text-align: center;
    }

    .q-rowhead {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .q-cell {
      position: relative;
      min-height: 150px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .q-cell.stable { background: var(--green-soft); }
    .q-cell.overfit { background: var(--red-soft); }
    .q-cell.underfit { background: #eef2f7; }
    .q-cell.martyred {
      background: var(--plot-quadrant);
      border-color: var(--plot-zero);
      box-shadow: inset 0 0 0 3px rgba(104, 117, 135, 0.16);
    }

    .q-kicker {
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .q-cell.overfit .q-kicker { color: #526070; }

    .q-title {
      margin-top: 8px;
      font-size: 1.25rem;
      line-height: 1.1;
      font-weight: 900;
    }

    .q-copy {
      margin: 8px 0 0;
      color: #384456;
      font-size: 0.92rem;
    }

    .badge-new {
      position: absolute;
      top: -14px;
      right: 12px;
      padding: 6px 9px;
      color: #fff;
      background: var(--rust);
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .mental-model-bridge {
      margin-bottom: 38px;
    }

    .goldilocks-compact {
      display: grid;
      grid-template-columns: minmax(300px, 0.76fr) minmax(440px, 1.24fr);
      gap: 28px;
      align-items: center;
      padding: 24px 26px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 10px 28px rgba(24, 33, 47, 0.07);
    }

    .goldilocks-copy h2 {
      margin-top: 7px;
      font-size: clamp(1.65rem, 2.5vw, 2.35rem);
    }

    .goldilocks-copy p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 0.96rem;
    }

    .compact-context-link {
      display: inline-block;
      margin-top: 11px;
      color: var(--blue);
      font-size: 0.8rem;
      font-weight: 850;
      text-decoration: none;
    }

    .old-story-panel {
      min-width: 0;
      padding: 10px 8px 2px;
      background: #f8fafc;
      border: 1px solid #e2e7ee;
      border-radius: 6px;
    }

    .alignment-aside {
      margin-top: 16px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 8px 22px rgba(24, 33, 47, 0.055);
    }

    .alignment-aside > summary {
      position: relative;
      display: grid;
      grid-template-columns: minmax(245px, 0.72fr) minmax(320px, 1fr);
      gap: 4px 28px;
      align-items: center;
      padding: 18px 54px 18px 22px;
      cursor: pointer;
      list-style: none;
    }

    .alignment-aside > summary::-webkit-details-marker {
      display: none;
    }

    .alignment-aside > summary::after {
      content: "+";
      position: absolute;
      top: 50%;
      right: 20px;
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      color: var(--blue);
      border: 1px solid #bfd0e2;
      border-radius: 50%;
      background: var(--blue-soft);
      font-size: 1.15rem;
      font-weight: 900;
      line-height: 1;
      transform: translateY(-50%);
    }

    .alignment-aside[open] > summary::after {
      content: "−";
    }

    .alignment-aside > summary:hover,
    .alignment-aside > summary:focus-visible {
      background: #f7fafc;
    }

    .alignment-aside-kicker {
      display: block;
      color: var(--blue);
      font-size: 0.7rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .alignment-aside-question {
      display: block;
      grid-column: 1;
      font-size: 1.05rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .alignment-aside-preview {
      grid-column: 2;
      grid-row: 1 / span 2;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .alignment-aside-body {
      padding: 22px;
      border-top: 1px solid var(--line);
      background: #fbfcfe;
    }

    .alignment-aside-copy {
      display: grid;
      grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr);
      gap: 28px;
      align-items: start;
    }

    .alignment-aside-copy h3 {
      font-size: 1.12rem;
    }

    .alignment-aside-copy p {
      margin: 0;
      color: var(--muted);
      font-size: 0.93rem;
    }

    .classification-aside > summary > span {
      font-size: 1.04rem;
      font-weight: 900;
      line-height: 1.3;
    }

    .classification-aside > summary > small {
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .classification-aside .alignment-aside-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
      gap: 26px;
      align-items: center;
    }

    .classification-aside .alignment-aside-body p,
    .classification-aside .callout { margin: 0; }

    .capacity-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
      padding-top: 20px;
    }

    .capacity-track::before {
      content: "";
      position: absolute;
      top: 5px;
      left: 8%;
      right: 8%;
      height: 3px;
      background: #8791a0;
    }

    .capacity-track::after {
      content: "";
      position: absolute;
      top: 0;
      right: 6%;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 11px solid #8791a0;
    }

    .capacity-stop {
      position: relative;
      min-width: 0;
      padding-top: 5px;
      text-align: center;
    }

    .capacity-stop::before {
      content: "";
      position: absolute;
      top: -21px;
      left: 50%;
      width: 13px;
      height: 13px;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 2px var(--blue);
      transform: translateX(-50%);
    }

    .capacity-stop.right::before {
      background: var(--green);
      box-shadow: 0 0 0 2px var(--green);
    }

    .capacity-stop.hot::before {
      background: var(--red);
      box-shadow: 0 0 0 2px var(--red);
    }

    .capacity-stop span,
    .route-label,
    .misfit-reveal-kicker {
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .capacity-stop strong {
      display: block;
      margin-top: 3px;
      font-size: 0.92rem;
    }

    .capacity-axis-label {
      margin-top: 18px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      text-align: center;
    }

    .alignment-routes {
      display: grid;
      gap: 18px;
      margin-top: 22px;
    }

    .alignment-route {
      display: grid;
      grid-template-columns: 128px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
    }

    .route-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      align-items: center;
    }

    .route-track::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 8%;
      right: 5%;
      height: 3px;
      background: #a2aab6;
      transform: translateY(-50%);
    }

    .route-track::after {
      content: "";
      position: absolute;
      top: calc(50% - 6px);
      right: 3%;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 9px solid #a2aab6;
    }

    .route-node {
      position: relative;
      z-index: 1;
      padding: 7px 5px;
      border: 2px solid var(--line);
      border-radius: 5px;
      background: #fff;
      font-size: 0.72rem;
      font-weight: 900;
      text-align: center;
    }

    .route-node.good {
      border-color: var(--green);
      background: var(--green-soft);
    }

    .route-node.over {
      border-color: var(--red);
      background: var(--red-soft);
    }

    .route-node.skipped {
      color: #526070;
      border-style: dashed;
      background: #f5f6f8;
      text-decoration: line-through;
    }

    .alignment-chain {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr) auto minmax(0, 1.15fr);
      gap: 7px;
      align-items: center;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .alignment-chain span {
      display: grid;
      place-items: center;
      min-height: 48px;
      padding: 7px;
      border: 1px solid #bfd0e2;
      border-radius: 5px;
      background: var(--blue-soft);
      font-size: 0.7rem;
      font-weight: 850;
      line-height: 1.25;
      text-align: center;
    }

    .alignment-chain i {
      color: var(--blue);
      font-size: 1rem;
      font-style: normal;
      font-weight: 900;
    }

    .alignment-chain-note {
      margin-top: 9px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 750;
    }

    .misfit-reveal {
      display: grid;
      grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
      gap: 20px;
      align-items: center;
      margin-top: 12px;
      padding: 14px 20px;
      border: 2px solid var(--gold);
      border-radius: var(--radius);
      background: var(--gold-soft);
    }

    .misfit-reveal p {
      margin: 0;
      color: #384456;
      font-size: 0.94rem;
    }

    .misfit-reveal strong {
      color: var(--rust);
    }

    .compact-alignment-aside {
      margin-top: 10px;
    }

    .compact-alignment-aside > summary {
      padding-top: 13px;
      padding-bottom: 13px;
    }

    .plot-card {
      padding: 28px;
      background: linear-gradient(135deg, #ffffff, #fff7df);
    }

    .plot-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
      gap: 26px;
      align-items: center;
    }

    #act-1-result .plot-grid { grid-template-columns: minmax(0, 1fr); }

    .window-formula {
      display: inline-block;
      max-width: 100%;
      margin: 16px 0;
      padding: 14px 18px;
      color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      font-size: clamp(1.35rem, 3vw, 2.4rem);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .theorem-badges {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .theorem-badge {
      padding: 18px;
      min-height: 150px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: #fff;
    }

    .theorem-badge strong {
      display: block;
      color: var(--muted);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .theorem-badge .big {
      display: block;
      margin-top: 14px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: clamp(0.82rem, 1.48vw, 1.12rem);
      font-weight: 900;
      overflow-wrap: normal;
      white-space: nowrap;
    }

    .theorem-badge:nth-child(2) .big { font-size: clamp(0.75rem, 1.3vw, 1rem); }

    .theorem-badge p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .threshold-explorer { min-width: 0; padding: 24px; }
    .threshold-explorer h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
    .threshold-model { margin: 10px 0 18px; color: var(--muted); font-size: .84rem; line-height: 1.6; }
    .threshold-mode { display: inline-flex; max-width: 100%; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: #f3f5f8; }
    .threshold-mode button { min-height: 38px; padding: 8px 18px; border-color: transparent; background: transparent; font-size: .8rem; font-weight: 800; }
    .threshold-mode button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
    .threshold-mode button[aria-pressed="false"]:hover { background: #e5ebf3; }
    .threshold-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .threshold-actions button { min-height: 38px; padding: 8px 14px; font-size: .8rem; }
    .threshold-iid-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
    .threshold-iid-controls[hidden] { display: none; }
    .threshold-iid-view { display: inline-flex; max-width: 100%; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f3f5f8; }
    .threshold-iid-controls button { min-height: 34px; padding: 6px 12px; font-size: .73rem; font-weight: 750; }
    .threshold-iid-view button { border-color: transparent; border-radius: 6px; background: transparent; }
    .threshold-iid-view button[aria-pressed="true"] { border-color: #bacbdc; background: #fff; color: var(--blue); box-shadow: 0 1px 3px #1825370d; }
    .threshold-iid-view button[aria-pressed="false"]:hover { background: #e5ebf3; }
    .threshold-iid-controls > button { border-color: #bacbdc; border-radius: 7px; background: #fff; color: var(--blue); }
    .threshold-iid-controls > output { color: var(--muted); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    .threshold-mode button:focus-visible,
    .threshold-iid-controls button:focus-visible,
    .threshold-control input:focus-visible { outline: 3px solid #92b8e0; outline-offset: 3px; }
    .threshold-mode-note { margin: 12px 0 16px; min-height: 2.8em; color: var(--muted); font-size: .76rem; line-height: 1.5; }
    .threshold-plot-frame { min-width: 0; padding: 8px 4px 0; border: 1px solid #e2e7ed; border-radius: 12px; background: #fbfcfd; }
    .threshold-plot-frame svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; touch-action: none; user-select: none; }
    .threshold-plot-frame svg [data-threshold-drag] { cursor: ew-resize; }
    .threshold-plot-frame svg [data-threshold-drag="target"] { cursor: ns-resize; }
    .threshold-plot-frame svg [tabindex]:focus-visible { outline: none; stroke-width: 4; }
    .threshold-plot-legend { display: flex; flex-wrap: wrap; gap: 7px 18px; margin: 12px 0 0; color: var(--muted); font-size: .72rem; font-weight: 700; }
    .threshold-plot-legend > span { display: inline-flex; align-items: center; gap: 7px; }
    .threshold-plot-legend > span[hidden] { display: none; }
    .threshold-legend-line { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--plot-optimal); }
    .threshold-legend-interp { border-color: var(--plot-interpolator); }
    .threshold-legend-train { border-color: var(--plot-train); border-top-style: dotted; }
    .threshold-legend-median { border-color: #aebac7; border-top-width: 2px; border-top-style: dashed; }
    .threshold-legend-band { display: inline-block; width: 22px; height: 10px; border-radius: 2px; background: linear-gradient(to right, #dcebdd 0 50%, #dfe2e6 50% 100%); }
    .threshold-help { margin: 12px 0 4px; color: var(--ink); font-size: .76rem; line-height: 1.55; }
    .threshold-axis-note { margin: 0 0 20px; color: var(--muted); font-size: .68rem; line-height: 1.5; }
    .threshold-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .threshold-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; min-width: 0; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
    .threshold-control label { min-width: 0; color: var(--ink); font-size: .8rem; font-weight: 750; line-height: 1.4; }
    .threshold-control input[type="number"] { width: 94px; min-width: 0; padding: 7px 8px; border: 1px solid #c7cfdb; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: .84rem; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; text-align: right; }
    .threshold-control input[type="range"] { display: block; grid-column: 1 / -1; width: 100%; min-width: 0; margin: 3px 0; accent-color: var(--blue); cursor: pointer; }
    .threshold-control-target { background: #fbf8ef; border-color: #dbcfad; }
    .threshold-control-target input[type="range"] { accent-color: #92732b; }
    .threshold-control small { grid-column: 1 / -1; color: var(--muted); font-size: .66rem; line-height: 1.4; }
    .threshold-target-receipt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
    .threshold-target-count { min-width: 0; padding: 15px 14px; background: #f8fafb; }
    .threshold-target-count > span { display: block; color: var(--muted); font-size: .69rem; font-weight: 750; line-height: 1.4; }
    .threshold-target-count output { display: block; margin: 5px 0 2px; color: #386944; font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.3; overflow-wrap: anywhere; }
    .threshold-target-count:nth-child(2) output { color: var(--plot-interpolator); }
    .threshold-target-count small { display: block; color: var(--muted); font-size: .65rem; line-height: 1.4; }
    .threshold-target-receipt.has-cap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .threshold-target-cap output { color: #b43a78; }
    .threshold-target-savings { background: #eaf4eb; }
    .threshold-target-savings > span { color: #346844; }
    .threshold-target-savings output { color: #346844; }
    .threshold-current-errors { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
    .threshold-current-errors output { color: #386944; font-weight: 850; font-variant-numeric: tabular-nums; }
    .threshold-current-errors > span:nth-child(2) output { color: var(--plot-interpolator); }
    .threshold-current-errors > span:nth-child(3) output { color: var(--plot-train); }
    .threshold-explorer .threshold-readout { margin: 12px 0 16px; min-height: 3em; color: var(--ink); font-family: inherit; font-size: .79rem; line-height: 1.55; font-weight: 600; }
    .threshold-scales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: .68rem; }
    .threshold-scales output { display: block; margin-top: 4px; color: var(--ink); font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    @media (max-width: 620px) {
      .threshold-explorer { padding: 18px; }
      .threshold-controls { gap: 10px; }
      .threshold-control { padding: 12px; grid-template-columns: minmax(0, 1fr); gap: 7px; }
      .threshold-control input[type="number"] { width: 100%; text-align: left; }
      .threshold-target-count { padding: 12px 10px; }
      .threshold-target-receipt.has-cap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 420px) {
      .threshold-explorer { padding: 14px; }
      .threshold-explorer h3 { font-size: 1.1rem; }
      .threshold-mode { display: flex; }
      .threshold-mode button { flex: 1 1 0; padding: 8px 12px; }
      .threshold-iid-view { display: flex; flex: 1 1 100%; }
      .threshold-iid-view button { flex: 1 1 0; }
      .threshold-plot-frame { margin-inline: -6px; padding-inline: 0; }
      .threshold-plot-legend { gap: 6px 12px; font-size: .66rem; }
      .threshold-target-receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .threshold-target-savings { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
      .threshold-target-savings output { grid-column: 2; grid-row: 1 / 3; margin: 0; }
      .threshold-target-savings small { grid-column: 1; }
      .threshold-target-receipt.has-cap .threshold-target-cap { grid-column: 1 / -1; }
      .threshold-scales { gap: 10px; }
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 14px;
    }

    button,
    input[type="range"] {
      font: inherit;
    }

    button {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 12px;
      color: var(--ink);
      background: #fff;
      font-size: 0.86rem;
      font-weight: 800;
      cursor: pointer;
    }

    button:hover,
    button[aria-pressed="true"] {
      border-color: var(--blue);
      color: #fff;
      background: var(--blue);
    }

    input[type="range"] {
      flex: 1 1 180px;
      accent-color: var(--blue);
    }

    .readout {
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.93rem;
      font-weight: 800;
    }

    .audit-note {
      margin-top: 12px;
      padding: 10px 12px;
      color: #4d5a69;
      background: #eef2f7;
      border-radius: var(--radius);
      font-size: 0.78rem;
      font-weight: 800;
    }

    .audit-details {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .audit-details summary {
      padding: 10px 12px;
      cursor: pointer;
      font-weight: 900;
    }

    .audit-details pre {
      margin: 0;
      padding: 0 12px 12px;
      overflow-x: auto;
      white-space: pre-wrap;
      color: #384456;
      font: 0.78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    .pill-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0;
      margin: 18px 0 0;
      list-style: none;
    }

    .pill-list li,
    .mini-pill {
      padding: 8px 10px;
      border-radius: 999px;
      background: #eef2f7;
      color: #384456;
      font-size: 0.84rem;
      font-weight: 900;
    }

    .formula-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .formula-tile {
      padding: 18px;
      min-height: 158px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .formula-tile strong {
      display: block;
      color: var(--muted);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .formula-tile .equation {
      display: block;
      margin-top: 12px;
      font-size: clamp(1rem, 1.6vw, 1.35rem);
    }

    .mini-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    .mini-card {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .mini-card strong {
      display: block;
      margin-bottom: 8px;
      color: var(--ink);
      font-size: 0.98rem;
    }

    .mini-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .sample-card,
    .sidebar-card {
      margin-top: 28px;
      padding: 22px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .sample-card h3,
    .sidebar-card h3 {
      margin-bottom: 10px;
    }

    .bar-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.84rem;
      font-weight: 800;
    }

    .bar-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .legend-swatch {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      background: currentColor;
    }

    .deterministic-card {
      padding: 22px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .deterministic-card .mini-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .function-lab {
      padding: 0;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .function-lab-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 14px 22px;
      align-items: center;
      padding: 18px 20px;
      background: #f7f9fc;
      border-bottom: 1px solid var(--line);
    }

    .function-lab-head strong {
      display: block;
      font-size: 1.05rem;
    }

    .function-lab-head span {
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 700;
    }

    .lab-head-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .basis-switch,
    .estimator-switch {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 4px;
      background: #e8edf3;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .basis-switch button,
    .estimator-switch button {
      border: 0;
      border-radius: 5px;
      padding: 7px 11px;
      background: transparent;
    }

    .basis-switch button[aria-pressed="true"],
    .estimator-switch button[aria-pressed="true"],
    .basis-switch button:hover,
    .estimator-switch button:hover {
      color: #fff;
      background: var(--blue);
    }

    .function-stage {
      position: relative;
      min-height: 430px;
      background: #fff;
    }

    .function-canvas {
      display: block;
      width: 100%;
      height: 430px;
    }

    .function-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      padding: 10px 20px;
      color: var(--muted);
      background: #fff;
      border-top: 1px solid var(--line);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .function-legend span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .line-key {
      display: inline-block;
      width: 28px;
      height: 0;
      border-top: 3px solid currentColor;
    }

    .line-key.thin { border-top-width: 1px; }
    .line-key.dotted { border-top-style: dotted; }
    .line-key.dashed { border-top-style: dashed; }

    .pca-comparison-band {
      padding: 13px 20px 15px;
      background: #f7f9fc;
      border-top: 1px solid var(--line);
    }

    .pca-comparison-band[hidden] { display: none; }

    .pca-comparison-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 5px 16px;
      margin-bottom: 5px;
    }

    .pca-comparison-head strong { font-size: 0.9rem; }
    .pca-comparison-head span {
      color: var(--muted);
      font-size: 0.77rem;
      font-weight: 750;
    }

    .pca-weights-canvas {
      display: block;
      width: 100%;
      height: 154px;
    }

    .pca-comparison-readout {
      margin: 4px 0 0;
      color: #4d5a69;
      font: 0.77rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      overflow-wrap: anywhere;
    }

    .lab-controls {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      padding: 18px 20px;
      background: #f7f9fc;
      border-top: 1px solid var(--line);
    }

    .lab-control {
      min-width: 0;
    }

    .lab-control label,
    .lab-control .control-label {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .lab-control input[type="range"],
    .lab-control select {
      width: 100%;
    }

    .lab-control select {
      min-height: 38px;
      padding: 6px 9px;
      color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 5px;
      font: inherit;
      font-size: 0.88rem;
      font-weight: 750;
    }

    .order-preview {
      margin: 7px 0 0;
      color: var(--muted);
      font: 0.76rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      overflow-wrap: anywhere;
    }

    .lab-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .threshold-panel {
      padding: 14px 20px 16px;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    .threshold-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 6px 18px;
      margin-bottom: 8px;
    }

    .threshold-head strong { font-size: 0.9rem; }
    .threshold-head span {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 750;
    }

    .threshold-canvas {
      display: block;
      width: 100%;
      height: 208px;
    }

    .threshold-canvas.compact { height: 166px; }

    .threshold-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 15px;
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 800;
    }

    .threshold-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .threshold-key {
      width: 18px;
      height: 8px;
      border-radius: 2px;
      background: #edf1f6;
    }

    .threshold-key.window { background: #e7ebef; border: 1px dashed #7b8795; }
    .threshold-key.strong { background: #dcefe1; }
    .threshold-key.current { width: 3px; height: 14px; background: var(--blue); }

    .threshold-readout {
      margin: 7px 0 0;
      color: #4d5a69;
      font: 0.78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      overflow-wrap: anywhere;
    }

    .input-distribution-band {
      padding: 13px 20px 14px;
      background: #f7f9fc;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .input-distribution-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 5px 16px;
      margin-bottom: 5px;
    }

    .input-distribution-head strong { font-size: 0.9rem; }
    .input-distribution-head span {
      color: var(--muted);
      font-size: 0.77rem;
      font-weight: 750;
    }

    .distribution-canvas {
      display: block;
      width: 100%;
      height: 148px;
    }

    .stream-readout {
      margin: 3px 0 0;
      color: #4d5a69;
      font: 0.77rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      overflow-wrap: anywhere;
    }

    .lab-metric {
      min-width: 0;
      padding: 14px 16px;
      border-right: 1px solid var(--line);
    }

    .lab-metric:last-child { border-right: 0; }

    .lab-metric strong {
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .lab-metric span {
      display: block;
      margin-top: 4px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 1.05rem;
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .oja-scorecard {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .oja-scorecard h3 { margin: 0 0 8px; }
    .oja-scorecard p { font-size: 0.86rem; }
    .oja-scorecard .lab-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .oja-scorecard output {
      display: block;
      margin-top: 4px;
      font: 900 1.05rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      overflow-wrap: anywhere;
    }

    .basis-inspector {
      display: grid;
      grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      padding: 18px 20px;
      background: #fffaf0;
      border-top: 1px solid var(--line);
    }

    .basis-inspector h3 {
      font-size: 1.05rem;
    }

    .basis-inspector p {
      margin: 7px 0 12px;
      color: var(--muted);
      font-size: 0.88rem;
    }

    .basis-canvas {
      display: block;
      width: 100%;
      height: 170px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .lab-caption {
      margin: 0;
      padding: 14px 20px 0;
      color: var(--muted);
    }

    .lab-audit {
      margin: 14px 20px 20px;
    }

    .mode-strip {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      padding: 14px 20px;
      background: #fff;
      border-top: 1px solid var(--line);
    }

    .mode-chip {
      min-width: 0;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
    }

    .mode-chip > strong,
    .mode-chip > span {
      display: block;
      overflow-wrap: anywhere;
    }

    .mode-chip > strong { font-size: 0.78rem; }
    .mode-chip > span { color: var(--muted); font-size: 0.75rem; font-weight: 800; }
    .mode-chip.active { background: var(--gold-soft); border-color: var(--gold); }
    .mode-chip.reference { background: #f2f4f6; border-color: #7b8694; border-style: dashed; }
    .mode-chip.clean { background: var(--green-soft); border-color: var(--green); }
    .mode-chip.baseline { background: #eef2f7; }

    .survival-warning {
      margin: 18px 0;
      padding: 14px 16px;
      color: #384456;
      background: var(--rust-soft);
      border-left: 5px solid var(--rust);
      border-radius: var(--radius);
      font-weight: 800;
    }

    .metric-ribbon {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
    }

    .metric-cell {
      min-width: 0;
      padding: 12px 13px;
      border-right: 1px solid var(--line);
    }

    .metric-cell:last-child { border-right: 0; }

    .metric-cell strong,
    .metric-cell span {
      display: block;
      overflow-wrap: anywhere;
    }

    .metric-cell strong {
      color: var(--muted);
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .metric-cell span {
      margin-top: 4px;
      font: 900 1rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    .spectrum-lab {
      padding: 20px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .spectrum-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
      gap: 18px;
      align-items: stretch;
    }

    .spectrum-canvas,
    .gram-canvas,
    .replay-canvas {
      display: block;
      width: 100%;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .spectrum-canvas { height: 310px; }
    .gram-canvas { height: 252px; }
    .replay-canvas { height: 260px; }

    .gram-pair {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .gram-panel strong {
      display: block;
      margin-bottom: 7px;
      font-size: 0.86rem;
    }

    .spectrum-ruler {
      margin-top: 16px;
      padding: 12px 14px 8px;
      background: #f7f9fc;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .spectrum-ruler svg { min-width: 620px; }

    .risk-ledger {
      padding: 16px 20px 18px;
      background: #fffaf0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .risk-ledger-head,
    .gain-pair {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 8px 18px;
      align-items: center;
    }

    .risk-ledger-head span {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
    }

    .gain-pair {
      margin-top: 13px;
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr);
      align-items: stretch;
    }

    .gain-meter {
      display: grid;
      grid-template-columns: minmax(130px, 1fr) 54px;
      gap: 9px;
      align-items: center;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 850;
    }

    .gain-track {
      position: relative;
      height: 16px;
      overflow: hidden;
      background: #e8edf3;
      border-radius: 3px;
    }

    .gain-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0;
      background: var(--blue);
    }

    .gain-target {
      position: absolute;
      top: -2px;
      bottom: -2px;
      left: 66.666%;
      width: 3px;
      background: var(--ink);
    }

    .gain-meter output {
      color: var(--ink);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-weight: 900;
      text-align: right;
    }

    .risk-stack {
      display: flex;
      width: 100%;
      height: 28px;
      margin-top: 14px;
      overflow: hidden;
      background: #e8edf3;
      border-radius: 4px;
    }

    .risk-segment {
      width: 0;
      min-width: 0;
      transition: width 180ms ease;
    }

    .risk-segment.bias { background: var(--blue); }
    .risk-segment.shape { background: var(--gold); }
    .risk-segment.offtarget { background: var(--purple); }
    .risk-segment.nuisance { background: var(--rust); }

    .risk-legend {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-top: 9px;
    }

    .risk-legend span {
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .risk-legend .risk-segment {
      display: inline-block;
      width: 12px;
      height: 9px;
      margin-right: 5px;
      vertical-align: baseline;
      border-radius: 2px;
    }

    .risk-legend b {
      display: block;
      color: var(--ink);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    .replay-drawer {
      margin-top: 30px;
      padding: 18px 20px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .replay-drawer > summary {
      cursor: pointer;
      color: var(--blue);
      font-weight: 900;
    }

    .replay-body { margin-top: 18px; }

    .spectral-history {
      border-left: 6px solid var(--purple);
    }

    .spectral-history > summary {
      color: var(--purple);
    }

    .spectral-history-strip {
      display: grid;
      grid-template-columns: 0.9fr 1.35fr 0.95fr;
      min-height: 112px;
      margin: 18px 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .spectral-history-stop {
      display: grid;
      align-content: center;
      gap: 5px;
      padding: 15px;
      background: var(--rust-soft);
      border-right: 1px solid var(--line);
    }

    .spectral-history-stop.middle { background: var(--gold-soft); }
    .spectral-history-stop.final { background: var(--green-soft); border-right: 0; }
    .spectral-history-stop > span { color: #526070; font-size: 0.7rem; font-weight: 850; text-transform: uppercase; }
    .spectral-history-stop strong { color: var(--ink); font-size: 0.94rem; }
    .spectral-history-stop small { color: #526070; font-size: 0.74rem; line-height: 1.4; }

    .spectral-history-citations {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 16px;
    }

    .spectral-history-citations a {
      display: block;
      padding: 13px;
      color: var(--ink);
      background: #f7f9fb;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      font-weight: 850;
      text-decoration: none;
    }

    .spectral-history-citations a:hover,
    .spectral-history-citations a:focus-visible { border-color: var(--purple); }
    .spectral-history-citations small { display: block; margin-top: 5px; color: var(--muted); font-weight: 650; line-height: 1.4; }

    .norm-budget {
      margin-top: 16px;
      padding: 16px;
      background: var(--blue-soft);
      border-left: 5px solid var(--blue);
      border-radius: var(--radius);
    }

    .norm-budget h4 { margin: 0 0 8px; }
    .norm-budget p { margin: 8px 0 0; color: var(--muted); font-size: 0.88rem; }

    .function-bridge {
      margin: 24px auto 0;
      padding: 18px 20px;
      max-width: 900px;
      color: #2f3a4a;
      background: var(--blue-soft);
      border-left: 6px solid var(--blue);
      border-radius: var(--radius);
      font-weight: 800;
    }

    .series-grid {
      display: grid;
      grid-template-columns: 1.55fr 0.9fr 1.2fr 0.9fr;
      gap: 12px;
      margin-top: 24px;
    }

    .series-card {
      position: relative;
      display: block;
      min-height: 190px;
      padding: 18px;
      color: var(--ink);
      text-decoration: none;
      background: #fff;
      border: 1px solid var(--line);
      border-top: 6px solid var(--blue);
      border-radius: var(--radius);
    }

    .series-card:first-child {
      background: var(--gold-soft);
      border-top-color: var(--gold);
    }

    .series-card:nth-child(2) { border-top-color: var(--green); }
    .series-card:nth-child(3) { border-top-color: var(--purple); }
    .series-card:nth-child(4) { border-top-color: var(--teal); }

    .series-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .series-card strong {
      display: block;
      margin: 10px 0 8px;
      font-size: 1.04rem;
      line-height: 1.2;
    }

    .series-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .paper-chip {
      display: inline-flex;
      padding: 5px 8px;
      color: #fff;
      background: var(--ink);
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .series-card:first-child .paper-chip { background: var(--rust); }

    .story-bridge {
      margin-top: 20px;
      padding: 16px 18px;
      color: #2f3a4a;
      background: #eef2f7;
      border-left: 5px solid var(--blue);
      border-radius: var(--radius);
      font-weight: 800;
    }

    .concept-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .concept-card {
      overflow: hidden;
      background: #111827;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius);
    }

    .concept-card img,
    .coda-banner img {
      display: block;
      width: 100%;
      height: 280px;
      object-fit: cover;
    }

    .concept-card figcaption,
    .coda-banner figcaption {
      margin: 0;
      padding: 12px 14px;
      color: #f8fafc;
      font-weight: 800;
      background: rgba(0, 0, 0, 0.28);
    }

    .comic-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    .comic {
      padding: 14px;
      color: var(--ink);
      background: #fff;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, 0.24);
    }

    .comic-title {
      margin-bottom: 8px;
      font-weight: 900;
    }

    .coda {
      padding: 24px;
      margin-bottom: 26px;
      border-left: 7px solid var(--blue);
    }

    .coda.robust { border-left-color: var(--teal); }
    .coda.ridge { border-left-color: var(--purple); }

    .coda h3 { margin-bottom: 18px; }

    .coda-banner {
      overflow: hidden;
      margin: 0 0 18px;
      border-radius: var(--radius);
      background: #111827;
    }

    .ladder {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .ladder-step {
      min-height: 122px;
      padding: 14px;
      border-right: 1px solid var(--line);
      background: #fff;
    }

    .ladder-step:last-child { border-right: 0; }
    .ladder-step:nth-child(1) { background: var(--red-soft); }
    .ladder-step:nth-child(2) { background: var(--gold-soft); }
    .ladder-step:nth-child(3) { background: var(--purple-soft); }
    .ladder-step:nth-child(4) { background: var(--green-soft); }

    .robust-ladder {
      grid-template-columns: repeat(3, 1fr);
    }

    .robust-ladder .ladder-step:nth-child(3) {
      background: var(--green-soft);
    }

    .ladder-step strong { display: block; }
    .ladder-step > span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 0.83rem;
      font-weight: 800;
    }

    .robust-ladder .ladder-step > .equation[data-tex] {
      width: 100%;
      margin-top: 20px;
      overflow: visible;
      overflow-wrap: normal;
      white-space: nowrap;
      word-break: normal;
      font-size: clamp(0.78rem, 1.35vw, 1.02rem);
    }

    .robust-ladder .ladder-step:nth-child(3) > .equation[data-tex] {
      font-size: clamp(0.68rem, 1.08vw, 0.9rem);
    }

    .escape-card,
    .multi-card {
      padding: 24px;
    }

    .compare-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 16px;
    }

    .compare-box {
      padding: 16px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: #fff;
    }

    .compare-box.good { background: var(--green-soft); }
    .compare-box.warn { background: var(--gold-soft); }

    .ridge-inset {
      margin-top: 16px;
      background: #fffaf0;
    }

    .closing {
      padding: 78px 0;
      color: #f8fafc;
      background: #18212f;
    }

    .closing p {
      max-width: 900px;
      font-size: clamp(1.18rem, 2vw, 1.55rem);
      color: #e8edf8;
    }

    html { scroll-padding-top: 66px; }

    .act-nav {
      position: sticky;
      top: 0;
      z-index: 40;
      padding: 9px 0;
      background: rgba(251, 250, 246, 0.96);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(12px);
    }

    .act-nav .wrap {
      display: flex;
      align-items: center;
      justify-content: safe center;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .act-nav .wrap > * { flex-shrink: 0; }

    .act-nav a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      color: var(--muted);
      border-radius: 6px;
      font-size: 0.78rem;
      font-weight: 850;
      text-decoration: none;
      white-space: nowrap;
    }

    .act-nav a::before {
      content: attr(data-act);
      display: inline-grid;
      place-items: center;
      width: 22px;
      height: 22px;
      color: #fff;
      background: var(--ink);
      border-radius: 50%;
      font-size: 0.7rem;
    }

    .act-nav a[aria-current="true"] {
      color: var(--ink);
      background: var(--gold-soft);
    }

    .act-nav a[aria-current="true"]::before { background: var(--rust); }

    .section-part + .section-part,
    .section-part + .progression-strip {
      margin-top: 72px;
      padding-top: 64px;
      border-top: 1px solid var(--line);
    }

    .act-opener {
      display: grid;
      grid-template-columns: 74px minmax(0, 0.9fr) minmax(320px, 0.7fr);
      gap: 24px;
      align-items: end;
      margin-bottom: 58px;
    }

    .act-number {
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      color: #fff;
      background: var(--ink);
      border-radius: 50%;
      font-size: 1.45rem;
      font-weight: 900;
    }

    .act-opener p {
      margin: 0;
      color: var(--muted);
      font-size: 1.02rem;
    }

    .vec {
      position: relative;
      display: inline-block;
      min-width: 0.56em;
      padding-top: 0.09em;
      font-family: "Times New Roman", Times, Georgia, serif;
      font-style: italic;
      line-height: 1;
      text-align: center;
    }

    .vec::before {
      content: "";
      position: absolute;
      top: -0.02em;
      left: 0.04em;
      right: 0.01em;
      border-top: 0.085em solid currentColor;
    }

    .vec::after {
      content: "";
      position: absolute;
      top: -0.10em;
      right: -0.04em;
      border-top: 0.12em solid transparent;
      border-bottom: 0.12em solid transparent;
      border-left: 0.18em solid currentColor;
    }

    .problem-setup {
      margin-bottom: 38px;
      padding: 26px 0 22px;
      border-top: 3px solid var(--ink);
      border-bottom: 1px solid var(--line);
    }

    .problem-setup-head {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.72fr);
      gap: 28px;
      align-items: end;
    }

    .problem-setup-head p {
      margin: 0;
      color: var(--muted);
      font-size: 0.98rem;
    }

    .core-report-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
    .core-report-cards > div { padding: 12px 15px; border: 1px solid var(--line); border-left: 4px solid var(--ink); background: #fff; }
    .core-report-cards > div:last-child { border-left-color: var(--green); }
    .core-report-cards strong { font-size: .92rem; }
    .core-report-cards p { margin: 4px 0 0; font-size: .86rem; line-height: 1.45; }
    .core-full-setup { margin-top: 18px; }
    .core-full-setup > .problem-model-copy { padding: 18px 0; }
    .core-learning-bridge { padding-left: 12px; border-left: 3px solid var(--green); }
    @media (max-width: 600px) {
      .core-report-cards { gap: 8px; }
      .core-report-cards > div { padding: 10px; }
      .core-report-cards strong { font-size: .85rem; }
      .core-report-cards p { font-size: .8rem; }
      .problem-model.core-essential-model { padding: 14px; gap: 14px; }
      .core-essential-model .problem-model-copy p { font-size: .88rem; }
    }

    .regression-flow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
      gap: 10px;
      align-items: stretch;
      margin-top: 18px;
    }

    .problem-step {
      position: relative;
      min-width: 0;
      padding: 13px 14px 12px 46px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .problem-step-number {
      position: absolute;
      top: 12px;
      left: 12px;
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      color: #fff;
      background: var(--blue);
      border-radius: 50%;
      font-size: 0.8rem;
      font-weight: 900;
    }

    .problem-step strong { display: block; line-height: 1.25; }
    .problem-step p { margin: 4px 0 0; color: var(--muted); font-size: 0.84rem; }

    .problem-flow-arrow {
      display: grid;
      place-items: center;
      color: var(--blue);
      font-size: 1.55rem;
      font-weight: 900;
    }

    .problem-model {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(390px, 0.85fr);
      gap: 24px;
      align-items: center;
      margin-top: 20px;
      padding: 22px;
      background: #f7f9fc;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .problem-model > * { min-width: 0; }

    .problem-model-copy p { margin: 10px 0 0; font-size: 0.92rem; }

    .problem-formula {
      margin-top: 12px;
      padding: 11px 14px;
      color: var(--ink);
      background: #fff;
      border-left: 5px solid var(--signal);
      font: 500 1.08rem/1.55 "Times New Roman", Times, Georgia, serif;
    }

    .problem-formula[data-tex] {
      font-family: inherit;
      font-size: 1rem;
      line-height: 1.35;
      max-width: 100%;
      overflow-x: auto;
    }

    .problem-formula[data-tex] .katex { font-size: 1.08em; }

    .problem-normalization {
      padding: 10px 12px;
      background: var(--signal-soft);
      border-left: 4px solid var(--signal);
    }

    .problem-color-key strong:first-child { color: #8b6505; }
    .problem-color-key strong:last-of-type { color: var(--nuisance-dark); }

    .problem-model-visual {
      min-width: 0;
      padding: 16px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .problem-vector-label {
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .problem-vector {
      display: grid;
      grid-template-columns: minmax(112px, 0.8fr) minmax(0, 2.2fr);
      overflow: hidden;
      border: 2px solid var(--ink);
      border-radius: 6px;
    }

    .problem-signal-coordinate,
    .problem-nuisance-coordinates {
      min-height: 96px;
      padding: 14px 11px;
    }

    .problem-signal-coordinate {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 10px;
      background: var(--signal-soft);
      border-right: 2px solid var(--ink);
      color: #795707;
      font: 600 1.25rem "Times New Roman", Times, Georgia, serif;
    }

    .problem-signal-coordinate [data-tex] .katex { font-size: 1.16em; }

    .problem-nuisance-coordinates {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 7px;
      align-items: center;
      color: var(--nuisance-dark);
      background: var(--nuisance-soft);
      font: italic 600 1.02rem "Times New Roman", Times, Georgia, serif;
      text-align: center;
    }

    .problem-nuisance-coordinates > span {
      display: grid;
      place-items: center;
      min-width: 0;
      height: 42px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(49, 122, 166, 0.35);
      border-radius: 5px;
    }

    .problem-nuisance-coordinates > span[data-tex] {
      display: grid;
      line-height: 1;
    }

    .problem-nuisance-coordinates > span[data-tex] .katex { font-size: 1.04em; }

    .problem-signal-coordinate small,
    .problem-nuisance-coordinates small {
      color: var(--muted);
      font: 750 0.72rem/1.25 ui-sans-serif, system-ui, sans-serif;
      text-align: center;
    }

    .problem-nuisance-coordinates small { grid-column: 1 / -1; }

    .problem-target-arrow {
      margin-top: 7px;
      color: var(--signal);
      font-size: 1.25rem;
      font-weight: 900;
      text-align: center;
    }

    .problem-target {
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 12px;
    }

    .problem-target > span {
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .problem-target strong { font: 650 1.25rem/1.1 KaTeX_Main, "Times New Roman", Times, Georgia, serif; }

    .problem-normalization .equation[data-tex] .katex,
    .problem-color-key .equation[data-tex] .katex {
      font-size: 0.98em;
    }

    .toy-axis-label {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0.28em;
      white-space: nowrap;
    }

    .toy-axis-label.vertical {
      transform: rotate(-90deg);
      transform-origin: center;
    }

    .toy-landmark-label {
      display: flex;
      align-items: baseline;
      justify-content: center;
      white-space: nowrap;
    }

    .toy-landmark-label.stacked {
      display: grid;
      align-content: start;
      justify-items: center;
      gap: 1px;
      line-height: 1.05;
    }

    .toy-landmark-label.stacked .math-prefix { margin-right: 0; }

    .problem-explainers {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin-top: 20px;
    }

    .problem-explainers > div {
      padding: 18px 20px;
      border-top: 4px solid var(--signal);
      background: #fffaf0;
    }

    .problem-explainers > div:last-child {
      border-top-color: var(--blue);
      background: #f4f8fc;
    }

    .problem-explainers p { margin: 7px 0 0; }

    .setup-ledger {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }

    .setup-ledger > div {
      padding: 14px 15px;
      background: #fff;
      border: 1px solid var(--line);
      border-top: 4px solid var(--blue);
      border-radius: var(--radius);
    }

    .setup-ledger > div:first-child { border-top-color: var(--signal); }
    .setup-ledger > div:last-child { border-top-color: var(--green); }
    .setup-ledger strong { display: block; color: var(--ink); }
    .setup-ledger p { margin: 6px 0 0; font-size: 0.84rem; }

    .stylized-bridge,
    .span-first {
      display: grid;
      grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
      gap: 28px;
      align-items: start;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

    .stylized-bridge p,
    .span-first p { margin: 0; }

    .stylized-kicker {
      display: block;
      margin-bottom: 7px;
      color: var(--blue);
      font-size: 0.74rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .stylized-bridge h3,
    .span-first h3 { font-size: 1.35rem; }

    .story-art,
    .spot-art {
      position: relative;
      margin: 0;
    }

    .story-art img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: center;
      border-radius: var(--radius);
    }

    .story-art figcaption,
    .spot-art figcaption {
      margin-top: 9px;
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 750;
    }

    .report-art { max-width: 1040px; margin-inline: auto; }

    .report-overlay {
      position: absolute;
      left: 37.7%;
      top: 32%;
      width: 23%;
      display: grid;
      gap: 11px;
      color: var(--ink);
      font-size: clamp(0.68rem, 1.18vw, 1.04rem);
      font-weight: 900;
      line-height: 1.15;
      text-align: center;
      transform: rotate(-1deg);
    }

    .report-overlay span {
      padding: 7px 5px;
      background: rgba(255, 255, 255, 0.88);
      border: 2px solid var(--ink);
      border-radius: 4px;
    }

    .receipt-art,
    .mixer-art,
    .oja-art { margin-bottom: 30px; }

    .spot-art {
      width: min(390px, 44%);
      margin: 0 0 18px auto;
    }

    .spot-art img {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      border-radius: var(--radius);
    }

    .coda-heading {
      max-width: 900px;
      margin-bottom: 22px;
    }

    .coda-heading h3 { margin: 0; }

    .coda-lede {
      max-width: 650px;
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.55;
    }

    .coda-media {
      display: grid;
      gap: 18px;
      align-content: start;
    }

    .coda-media .spot-art {
      width: 100%;
      margin: 0;
    }

    .shared-machine {
      display: grid;
      grid-template-columns: minmax(260px, 0.55fr) minmax(560px, 1.45fr);
      gap: 28px;
      align-items: center;
      margin-bottom: 66px;
    }

    .shared-machine-copy h3 { margin-top: 10px; }
    .shared-machine-copy p { color: var(--muted); }

    .snow-tagline {
      padding: 13px 15px;
      color: var(--ink) !important;
      background: var(--nuisance-soft);
      border-left: 5px solid var(--nuisance-dark);
      border-radius: var(--radius);
      font-weight: 900;
    }

    .mechanism-legend {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .mechanism-legend span {
      display: flex;
      gap: 7px;
      align-items: center;
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 850;
    }

    .mechanism-legend i {
      flex: 0 0 auto;
      width: 14px;
      height: 14px;
      border-radius: 3px;
      background: var(--line);
    }

    .mechanism-legend .signal-key { background: var(--signal); }
    .mechanism-legend .nuisance-key { background: var(--nuisance); }
    .mechanism-legend .amplification-key { background: var(--amplification); }

    .modeling-aside {
      margin-top: 28px;
      margin-bottom: 54px;
      border: 1px solid #b9c9db;
      border-radius: var(--radius);
      background: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .problem-setup > .modeling-aside {
      margin-top: 18px;
      margin-bottom: 18px;
    }

    .problem-setup > .modeling-aside > summary {
      min-height: 78px;
      padding-top: 15px;
      padding-bottom: 15px;
    }

    .modeling-aside > summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 24px;
      align-items: center;
      min-height: 94px;
      padding: 20px 24px;
      cursor: pointer;
      list-style: none;
      background: #eef5fb;
    }

    .modeling-aside > summary::-webkit-details-marker { display: none; }

    .modeling-aside > summary::after {
      content: "+";
      grid-column: 2;
      grid-row: 1 / span 2;
      color: var(--blue);
      font-size: 2rem;
      font-weight: 500;
    }

    .modeling-aside[open] > summary::after { content: "−"; }

    .modeling-summary-kicker {
      display: block;
      color: var(--blue);
      font-size: 0.72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .modeling-summary-title {
      display: block;
      margin-top: 3px;
      font-size: 1.45rem;
      line-height: 1.18;
      font-weight: 900;
    }

    .modeling-summary-answer {
      grid-column: 1;
      margin: 0;
      color: #445064;
      font-size: 0.9rem;
    }

    .modeling-aside-body {
      padding: 22px;
      border-top: 1px solid var(--line);
    }

    .modeling-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
    }

    .modeling-tabs button {
      border-radius: 5px;
    }

    .modeling-panel[hidden] { display: none; }

    .modeling-grid,
    .modeling-representation-grid,
    .modeling-work-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
      gap: 22px;
      align-items: start;
    }

    .modeling-control-panel,
    .modeling-stage {
      min-width: 0;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f7f9fb;
    }

    .modeling-grid > *,
    .modeling-representation-grid > *,
    .modeling-work-grid > *,
    .modeling-spectrum-grid > *,
    .modeling-control-grid > * { min-width: 0; }

    .modeling-stage { background: var(--paper); }

    .modeling-grid.modeling-sensor-lab {
      grid-template-columns: minmax(0, 1fr);
    }

    .modeling-sensor-diagram {
      margin-top: 16px;
      padding: 12px 16px;
    }

    .modeling-sensor-diagram .modeling-svg-scroll svg {
      min-width: 760px;
      max-width: 900px;
      margin-inline: auto;
    }

    .modeling-sensor-diagram .caption { margin: 6px 0 0; }

    .modeling-sensor-lab .modeling-control-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (max-width: 900px) {
      .modeling-sensor-lab .modeling-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 600px) {
      .modeling-sensor-lab label[for="modelNoiseKind"] {
        grid-column: 1 / -1;
      }
    }

    .modeling-svg-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .modeling-svg-scroll svg {
      display: block;
      width: 100%;
    }
    #pretraining-backstory .modeling-svg-scroll.transfer svg { min-width: 0; width: 100%; height: auto; }

    .modeling-svg-scroll.wide svg { min-width: 760px; }
    .modeling-svg-scroll.transfer svg { min-width: 620px; }

    .modeling-control-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 18px;
      margin-top: 16px;
    }

    .modeling-control {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 850;
    }

    .modeling-control > span {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .modeling-control select {
      width: 100%;
      min-height: 40px;
      padding: 7px 9px;
      color: var(--ink);
      background: #fff;
      border: 1px solid #bfc8d5;
      border-radius: 5px;
      font: inherit;
      font-weight: 750;
    }

    .modeling-formula {
      margin: 14px 0;
      padding: 12px 14px;
      border: 1px solid #e1c669;
      border-radius: 5px;
      background: #fff9e8;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-weight: 800;
      overflow-x: auto;
    }

    .modeling-ruler {
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .modeling-ruler-row {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr) 76px;
      gap: 12px;
      align-items: center;
      margin: 22px 0;
    }

    .modeling-ruler-track {
      height: 22px;
      border-radius: 4px;
      background: #e3e7ed;
      overflow: hidden;
    }

    .modeling-ruler-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 150ms ease;
    }

    .modeling-ruler-fill.physical { background: var(--signal); }
    .modeling-ruler-fill.feature { background: var(--nuisance-dark); }

    .modeling-stage-title {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
      font-weight: 900;
    }

    .modeling-stage-title span:last-child {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 750;
    }

    .modeling-sensor-spectrum {
      margin: 14px 0 0;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: #fff;
    }

    .modeling-sensor-spectrum .modeling-stage-title { margin-bottom: 4px; }

    .modeling-sensor-spectrum-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 250px;
      gap: 18px;
      align-items: center;
    }

    .modeling-sensor-spectrum .modeling-svg-scroll svg {
      width: 100%;
      min-width: 0;
      max-width: 580px;
      margin-inline: auto;
    }

    .modeling-spectrum-notes { font-size: 0.78rem; }
    .modeling-spectrum-notes p { margin: 0 0 9px; }
    .modeling-spectrum-notes p:last-child { margin-bottom: 0; }
    .modeling-spectrum-notes b { color: var(--ink); }
    .modeling-spectrum-notes p > span:last-child { display: block; }
    .modeling-spectrum-notes output { font-weight: 900; }
    .modeling-spectrum-notes .modeling-spectrum-gamma { color: #936d17; }
    .modeling-spectrum-notes .modeling-spectrum-gamma[hidden] { display: none; }

    .modeling-spectrum-key {
      display: flex;
      align-items: center;
      gap: 6px 14px;
      flex-wrap: wrap;
      margin: 4px 0 0;
      font-size: 0.74rem;
    }

    .modeling-spectrum-key > span { display: inline-flex; gap: 5px; align-items: center; }
    .modeling-spectrum-key > .spectrum-composition { display: block; flex: 1 1 100%; }
    .spectrum-signal-swatch { display: inline-block; width: 12px; height: 12px; background: var(--signal); }
    .spectrum-bar-swatch { width: 10px; height: 13px; background: #6aaed6; display: inline-block; }
    .spectrum-dot-swatch { width: 8px; height: 8px; border: 2px solid #317aa6; border-radius: 50%; background: #fff; display: inline-block; }

    @media (max-width: 800px) {
      .modeling-sensor-spectrum-body { grid-template-columns: minmax(0, 1fr); gap: 4px; }
      .modeling-spectrum-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
      .modeling-spectrum-notes .modeling-spectrum-gamma { grid-column: 1 / -1; margin-bottom: 0; }
      .modeling-sensor-spectrum .modeling-stage-title { flex-wrap: wrap; gap: 3px; }
    }

    @media (max-width: 420px) {
      .modeling-sensor-spectrum { padding: 10px; }
      .modeling-spectrum-notes { gap: 8px; }
    }

    .modeling-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .modeling-metric {
      min-height: 80px;
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: #fff;
    }

    .modeling-metric span {
      display: block;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .modeling-metric output,
    .modeling-metric strong {
      display: block;
      margin-top: 4px;
      color: var(--ink);
      font-size: 1.12rem;
      font-weight: 900;
    }

    .modeling-predictable-bar {
      display: flex;
      height: 36px;
      margin: 16px 0 7px;
      border: 1px solid var(--line);
      border-radius: 5px;
      overflow: hidden;
    }

    .modeling-predictable-bar div {
      display: grid;
      place-items: center;
      min-width: 0;
      color: #fff;
      font-size: 0.7rem;
      font-weight: 900;
      transition: width 150ms ease;
    }

    #modelPredictablePart { background: var(--signal); color: #201800; }
    #modelIrreduciblePart { background: var(--nuisance-dark); }

    .modeling-mode-head,
    .modeling-mode-row {
      display: grid;
      grid-template-columns: 74px minmax(80px, 1fr) minmax(80px, 1fr);
      gap: 8px;
      align-items: center;
    }

    .modeling-mode-head {
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 0.63rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .modeling-mode-table { display: grid; gap: 7px; }
    .modeling-mode-row { font-size: 0.7rem; }

    .modeling-meter {
      position: relative;
      height: 19px;
      border-radius: 3px;
      background: #e7ebf0;
      overflow: hidden;
    }

    .modeling-meter i {
      display: block;
      height: 100%;
      background: #7e8795;
      transition: width 150ms ease;
    }

    .modeling-meter.shared i { background: var(--signal); }
    .modeling-meter.shared.tail i { background: var(--nuisance); }

    .modeling-meter b {
      position: absolute;
      top: 1px;
      right: 5px;
      color: var(--ink);
      font-size: 0.63rem;
      font-style: normal;
    }

    .modeling-work-bars { display: grid; gap: 10px; margin-top: 12px; }

    .modeling-explainers {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 16px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .modeling-explainers > div {
      padding: 13px 14px;
      border-right: 1px solid var(--line);
    }

    .modeling-explainers > div:last-child { border-right: 0; }
    .modeling-explainers strong { display: block; margin-bottom: 5px; }
    .modeling-explainers p { margin: 0; color: var(--muted); font-size: 0.82rem; }

    .modeling-work-row {
      display: grid;
      grid-template-columns: 118px 1fr 66px;
      gap: 9px;
      align-items: center;
      font-size: 0.78rem;
    }

    .modeling-work-row .modeling-meter { height: 24px; }
    .modeling-work-row:nth-child(1) i { background: var(--signal); }
    .modeling-work-row:nth-child(2) i { background: var(--purple); }
    .modeling-work-row:nth-child(3) i { background: var(--green); }

    .modeling-target-badge {
      display: inline-flex;
      align-items: center;
      padding: 5px 8px;
      border: 1px solid #d7b94e;
      border-radius: 999px;
      background: var(--signal-soft);
      font-size: 0.68rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .modeling-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.7rem;
      font-weight: 750;
    }

    .modeling-legend i {
      display: inline-block;
      width: 14px;
      height: 4px;
      margin-right: 5px;
      vertical-align: middle;
    }

    .modeling-audit-link {
      margin-top: 14px;
      font-size: 0.84rem;
    }

    .participation-layout {
      display: grid;
      grid-template-columns: minmax(560px, 1.42fr) minmax(280px, 0.58fr);
      gap: 26px;
      align-items: start;
    }

    .participation-controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(230px, 0.7fr);
      gap: 14px;
      align-items: end;
      margin-top: 14px;
    }

    .participation-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .participation-metric {
      padding: 10px 12px;
      border-right: 1px solid var(--line);
      background: #fff;
    }

    .participation-metric:last-child { border-right: 0; }

    .participation-metric span {
      display: block;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .participation-metric output {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.92rem;
      font-weight: 900;
    }

    .participation-copy {
      padding: 4px 0;
    }

    .participation-copy h3 { margin-top: 7px; }

    .participation-comparison {
      display: grid;
      gap: 10px;
      margin: 18px 0;
    }

    .participation-comparison div {
      padding: 12px 14px;
      border-left: 4px solid var(--nuisance-dark);
      background: var(--nuisance-soft);
    }

    .participation-comparison strong,
    .participation-comparison span { display: block; }

    .participation-comparison span {
      margin-top: 3px;
      color: #445064;
      font-size: 0.86rem;
    }

    .pca-memory-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--line);
    }

    .pca-memory-strip span {
      padding: 8px 10px;
      color: var(--muted);
      background: #fff;
      font-size: 0.72rem;
      font-weight: 800;
    }

    .pca-memory-strip strong {
      display: block;
      margin-top: 2px;
      color: var(--ink);
      font: 900 0.88rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    .multi-epoch-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.48fr) minmax(290px, 0.52fr);
      gap: 24px;
      align-items: start;
    }

    .multi-epoch-canvas {
      display: block;
      width: 100%;
      height: 500px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .multi-epoch-controls {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .multi-epoch-control-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .multi-epoch-control-row > strong {
      min-width: 92px;
      color: var(--muted);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .multi-epoch-scrubber {
      display: grid;
      grid-template-columns: auto minmax(150px, 1fr) auto;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 850;
    }

    .multi-epoch-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .multi-epoch-metric {
      padding: 10px 12px;
      border-right: 1px solid var(--line);
      background: #fff;
    }

    .multi-epoch-metric:last-child { border-right: 0; }

    .multi-epoch-metric span {
      display: block;
      color: var(--muted);
      font-size: 0.69rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .multi-epoch-metric output {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.92rem;
      font-weight: 900;
    }

    .snow-explainer {
      padding: 18px 20px;
      border-top: 4px solid var(--nuisance-dark);
      background: var(--nuisance-soft);
    }

    .snow-explainer h3 { font-size: 1.45rem; }
    .snow-explainer p { color: #384456; }

    .epoch-contrast {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 18px 0;
    }

    .epoch-contrast div {
      padding: 12px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
    }

    .epoch-contrast strong { display: block; }
    .epoch-contrast span { color: var(--muted); font-size: 0.82rem; }

    .notation-details,
    .related-work {
      margin-top: 46px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .notation-details > summary,
    .related-work > summary {
      cursor: pointer;
      color: var(--blue);
      font-weight: 850;
    }

    .notation-details > .visual { margin-top: 18px; }

    .multispike-story {
      display: grid;
      grid-template-columns: minmax(440px, 1.18fr) minmax(320px, 0.82fr);
      gap: 28px;
      align-items: stretch;
    }

    .multispike-clock,
    .multispike-progression {
      padding: 22px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 10px 28px rgba(24, 33, 47, 0.06);
    }

    .multispike-clock-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    .multispike-clock-head strong { font-size: 1.02rem; }
    .multispike-clock-head span { color: var(--muted); font-size: 0.78rem; font-weight: 800; }

    .mode-clock {
      display: grid;
      grid-template-columns: 54px minmax(128px, 0.62fr) minmax(150px, 1fr) minmax(116px, 0.58fr);
      gap: 12px;
      align-items: center;
      padding: 13px 0;
      border-top: 1px solid var(--line);
    }

    .mode-glyph {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      color: #fff;
      background: var(--ink);
      border-radius: 50%;
      font-family: Georgia, serif;
      font-weight: 900;
    }

    .mode-copy strong,
    .mode-copy small { display: block; }
    .mode-copy small { margin-top: 3px; color: var(--muted); font-size: 0.74rem; }

    .mode-track {
      position: relative;
      display: block;
      height: 12px;
      overflow: visible;
      background: #e8edf3;
      border-radius: 3px;
    }

    .mode-track i {
      display: block;
      height: 100%;
      background: var(--blue);
      border-radius: inherit;
    }

    .mode-track b {
      position: absolute;
      top: -7px;
      width: 2px;
      height: 26px;
      background: var(--ink);
    }

    .mode-clock.clean .mode-track i { background: var(--green); }
    .mode-clock.misfit .mode-track i { background: var(--gold); }
    .mode-clock.waiting .mode-track i { background: var(--blue); }
    .mode-clock em { font-size: 0.78rem; font-style: normal; font-weight: 900; }
    .mode-clock.clean em { color: var(--green); }
    .mode-clock.misfit em { color: #9a6500; }
    .mode-clock.waiting em { color: var(--blue); }

    .multispike-clock-note {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.5;
    }

    .multispike-progression {
      display: grid;
      gap: 12px;
    }

    .multispike-progression > div {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 2px 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }

    .multispike-progression > div:last-child { padding-bottom: 0; border-bottom: 0; }

    .multispike-progression span {
      grid-row: 1 / span 2;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      color: #fff;
      background: var(--purple);
      border-radius: 50%;
      font-size: 0.78rem;
      font-weight: 900;
    }

    .multispike-progression strong { font-size: 0.88rem; }
    .multispike-progression p { margin: 2px 0 0; color: var(--muted); font-size: 0.79rem; line-height: 1.4; }

    .stress-test-compact {
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
      gap: 34px;
      align-items: center;
      padding: 28px;
      background: #f4f0fb;
      border: 1px solid #d9cfeb;
      border-radius: var(--radius);
    }

    .stress-test-compact p { margin-bottom: 0; color: var(--muted); }

    .stress-lab-link {
      display: inline-block;
      margin-top: 15px;
      color: var(--purple);
      font-size: 0.86rem;
      font-weight: 900;
      text-decoration: none;
    }

    .oja-direction-visual {
      min-width: 0;
      padding: 12px;
      background: #fff;
      border: 1px solid #d9cfeb;
      border-radius: 6px;
    }

    .oja-direction-visual > svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .stress-beats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .stress-beats span {
      min-height: 104px;
      padding: 13px;
      background: #fff;
      border-top: 4px solid var(--purple);
      border-radius: 4px;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.35;
    }

    .stress-beats strong { display: block; margin-bottom: 7px; color: var(--ink); }

    .oja-direction-visual .stress-beats span {
      min-height: 68px;
      padding: 9px 10px;
      font-size: 0.75rem;
    }

    .oja-direction-visual .stress-beats strong { margin-bottom: 3px; }

    .oja-threshold-strip {
      margin-top: 12px;
      padding: 12px;
      background: #f7f5fb;
      border: 1px solid #d9cfeb;
      border-radius: 5px;
    }

    .oja-threshold-axis {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      min-height: 34px;
      overflow: hidden;
      border: 1px solid #c8cfd9;
      border-radius: 4px;
    }

    .oja-threshold-zone {
      display: grid;
      place-items: center;
      padding: 6px 4px;
      color: var(--muted);
      font-size: 0.66rem;
      font-weight: 850;
      text-align: center;
    }

    .oja-threshold-zone.before { background: #edf1f6; }
    .oja-threshold-zone.middle { background: #e7ebef; color: #47566a; }
    .oja-threshold-zone.after { background: #e2f1e4; color: #356943; }

    .oja-threshold-mark {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--ink);
    }

    .oja-threshold-mark.detect { left: 25%; }
    .oja-threshold-mark.strong { left: 75%; }

    .oja-threshold-labels {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-top: 8px;
      font-size: 0.7rem;
      line-height: 1.3;
    }

    .oja-threshold-labels span:last-child { text-align: right; }
    .oja-threshold-labels strong,
    .oja-threshold-labels small { display: block; }
    .oja-threshold-labels small { margin-top: 2px; color: var(--muted); }

    .oja-schematic-note {
      margin: 9px 2px 0 !important;
      font-size: 0.72rem;
      line-height: 1.4;
    }

    .progression-strip {
      display: grid;
      grid-template-columns: 1.2fr auto 1fr auto 1.15fr auto 1fr;
      gap: 12px;
      align-items: stretch;
      margin-top: 62px;
    }

    .progression-strip span {
      min-height: 86px;
      padding: 14px;
      background: #fff;
      border-top: 5px solid var(--blue);
      border-radius: 4px;
    }

    .progression-strip span:nth-of-type(2) { border-color: var(--green); }
    .progression-strip span:nth-of-type(3) { border-color: var(--purple); }
    .progression-strip span:nth-of-type(4) { border-color: var(--teal); }
    .progression-strip strong { display: block; margin-bottom: 4px; }
    .progression-strip i { align-self: center; color: var(--muted); font-style: normal; }

    .remember-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1.22fr);
      gap: 48px;
      align-items: start;
    }

    .closing-lede { color: var(--muted); font-size: 1.12rem; }

    .takeaway-list {
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: takeaway;
    }

    .takeaway-list li {
      position: relative;
      padding: 18px 0 18px 54px;
      border-bottom: 1px solid var(--line);
      counter-increment: takeaway;
    }

    .takeaway-list li::before {
      content: counter(takeaway);
      position: absolute;
      left: 0;
      top: 15px;
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      color: #fff;
      background: var(--rust);
      border-radius: 50%;
      font-weight: 900;
    }

    .related-work .sidebar-card {
      width: 100%;
      margin-top: 20px;
      padding: 20px;
    }

    .related-work .sidebar-card h2 { font-size: 1.6rem; }

    .final-lines {
      max-width: 900px;
      margin-top: 48px;
      font-size: 1.18rem;
    }

    /* Footer links look as they do in .series-page-footer (series-shell.css):
       underlined white bold at the body size (UP-X-5). */
    .site-footer {
      padding: 32px 0;
      color: #d8dde6;
      background: var(--ink);
    }

    .site-footer p { margin: 0; max-width: 900px; }

    .site-footer .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .site-footer a {
      flex: 0 0 auto;
      color: #fff;
      font-weight: 800;
    }

    /* Linked core-story teaching surfaces. */
    .essential-route {
      position: relative;
      z-index: 39;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      background: #fffaf0;
      transition: box-shadow 160ms ease, background-color 160ms ease;
    }

    /* The question chips already list the stops; the route bar appears only while guiding. */
    .essential-route:not(.is-active) { display: none; }
    .act-nav .gold-route-toggle {
      margin: 0 0 0 10px;
      padding: 3px 10px;
      border-left: 2px solid var(--gold);
      border-radius: 0 6px 6px 0;
    }
    .act-nav .gold-route-toggle small { font-size: 0.66rem; }
    .act-nav .gold-route-toggle[aria-pressed="true"] { color: var(--ink); background: var(--gold-soft); border-color: var(--gold); }

    .essential-route.is-active {
      position: sticky;
      top: var(--blog-sticky-nav-height, 58px);
      background: rgba(255, 250, 240, 0.97);
      box-shadow: 0 10px 26px rgba(24, 33, 47, 0.12);
      backdrop-filter: blur(12px);
    }

    .essential-route-inner {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .essential-route-inner[data-experiment-unavailable] { flex-wrap: wrap; }

    .gold-route-toggle {
      display: grid;
      flex: 0 0 auto;
      margin-right: 8px;
      padding: 5px 8px;
      color: var(--ink);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      text-align: left;
      line-height: 1.15;
      cursor: pointer;
    }

    .gold-route-toggle:hover,
    .gold-route-toggle:focus-visible { border-color: var(--gold); }

    .gold-route-toggle small { color: var(--muted); font-size: 0.7rem; }
    .gold-route-toggle[aria-pressed="true"] small { color: inherit; }

    .gold-route-steps {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .gold-route-steps a {
      flex: 0 0 auto;
      padding: 7px 10px;
      color: #684b05;
      border-left: 2px solid var(--gold);
      font-size: 0.76rem;
      font-weight: 850;
      text-decoration: none;
      white-space: nowrap;
    }

    .gold-route-steps a:hover,
    .gold-route-steps a:focus-visible,
    .gold-route-steps a[aria-current="step"] { background: var(--gold-soft); }

    .gold-route-steps a[aria-current="step"] {
      color: var(--ink);
      box-shadow: inset 0 -2px 0 var(--gold);
    }

    .gold-route-controls {
      display: none;
      align-items: center;
      gap: 5px;
      flex: 0 0 auto;
      margin-left: auto;
      padding-left: 8px;
    }

    .essential-route.is-active .gold-route-controls { display: flex; }

    .gold-route-controls button {
      min-width: 34px;
      min-height: 32px;
      padding: 5px 9px;
      color: var(--ink);
      background: #fff;
      border: 1px solid #d9c47d;
      border-radius: 5px;
      font: inherit;
      font-size: 0.78rem;
      font-weight: 850;
      cursor: pointer;
    }

    .gold-route-controls button:hover,
    .gold-route-controls button:focus-visible { background: var(--gold-soft); }

    .gold-route-controls button:disabled { opacity: 0.38; cursor: default; }

    #goldRouteStatus {
      min-width: 116px;
      color: #684b05;
      font-size: 0.72rem;
      font-weight: 850;
      text-align: center;
      white-space: nowrap;
    }

    .gold-route-controls .gold-route-exit { color: var(--muted); }

    html.gold-route-active { scroll-padding-top: 132px; }

    @media (min-width: 921px) {
      .essential-route.is-active .gold-route-steps { display: none; }
      .essential-route.is-active .gold-route-controls { margin-left: auto; }
    }

    .core-deeper { margin: 28px 0; padding: 0; }
    .core-deeper > summary {
      padding: 18px 22px;
      border: 1px solid var(--line);
      border-left: 4px solid var(--gold);
      border-radius: 8px;
      cursor: pointer;
      background: #fffaf0;
    }
    .core-deeper > summary span,
    .core-deeper > summary > .drawer-meta {
      display: block;
      margin: 5px 0 0 18px;
      color: var(--muted);
      font-size: .85rem;
      line-height: inherit;
    }
    .core-deeper[open] > summary { margin-bottom: 30px; }
    /* Stylized: keep the adversary drawer's disclosure triangle on its title line,
       and let the zero-baseline value sit against its semicolon. */
    details#act-5.stylized-application > summary strong { display: inline; }
    #onePointDensityZero { min-width: 0; }
    .core-sgd-witness { margin-top: 30px; }
    .core-sgd-witness h3 { margin-top: 0; }
    .core-sgd-scores { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
    .core-sgd-scores > div { flex: 1 1 200px; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
    .core-sgd-scores span { display: block; font-size: .85rem; }
    .core-sgd-scores strong { display: block; margin-top: 8px; font-size: 2rem; font-variant-numeric: tabular-nums; }
    .core-sgd-scores > div:first-child strong { color: var(--green); }
    .core-sgd-scores > div:last-child strong { color: var(--rust); }

    .early-reversal {
      display: grid;
      grid-template-columns: minmax(280px, 0.72fr) minmax(480px, 1.28fr);
      gap: 24px;
      align-items: start;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

    .early-reversal-copy h2 { margin-top: 8px; font-size: clamp(1.7rem, 2.5vw, 2.45rem); }
    .early-reversal-copy p { margin: 12px 0 0; color: #384456; }
    .early-reversal-visual { box-shadow: 0 16px 40px rgba(24, 33, 47, 0.11); }

    .prediction-prompt {
      margin-top: 18px;
      padding: 15px 16px;
      color: #463563;
      background: #f5f0fb;
      border-left: 5px solid var(--purple);
    }

    .prediction-prompt.compact { margin: 0 0 14px; padding: 12px 14px; }

    .prediction-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .prediction-gate a { font-size: 0.8rem; }
    .prediction-gate > button { margin-top: 0; }
    .prediction-gate[hidden] { display: none; }

    .prediction-prompt > strong {
      display: block;
      color: #382650;
      font-size: 0.98rem;
    }

    .prediction-prompt label,
    .prediction-prompt label > span {
      display: grid;
      gap: 7px;
    }

    .prediction-prompt label > span {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline;
    }

    .prediction-prompt output { font-weight: 900; }
    .prediction-prompt p { margin: 8px 0 0; color: #665676; font-size: 0.78rem; }
    .prediction-prompt > button { margin-top: 10px; border-color: #b7a6d1; }

    .prediction-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 13px;
    }

    .prediction-actions button:first-child {
      color: #fff;
      background: var(--purple);
      border-color: var(--purple);
    }

    .prediction-guess-controls {
      display: grid;
      gap: 11px;
      margin-top: 13px;
      padding-top: 13px;
      border-top: 1px solid #d8cce8;
    }

    .prediction-guess-controls > button {
      justify-self: start;
      color: #fff;
      background: var(--purple);
      border-color: var(--purple);
    }

    .prediction-actions[hidden],
    .prediction-actions button[hidden],
    .prediction-guess-controls[hidden],
    .prediction-after[hidden] { display: none; }

    .prediction-after {
      display: grid;
      gap: 9px;
      margin-top: 18px;
      padding: 12px 14px;
      color: #384456;
      background: #f7f9fc;
      border-left: 4px solid var(--green);
    }

    .prediction-after p { margin: 0; font-size: 0.82rem; }
    .prediction-after button { justify-self: start; font-size: 0.75rem; }

    .prediction-options {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 9px;
    }

    .prediction-options button[aria-pressed="true"] {
      color: #fff;
      background: var(--purple);
      border-color: var(--purple);
    }

    #toyExactLayer,
    #toyCurveDot {
      transition: opacity 220ms ease;
    }

    .early-reversal-visual.prediction-pending #toyExactLayer,
    .early-reversal-visual.prediction-pending #toyCurveDot { opacity: 0; }
    .early-reversal-visual.is-revealed #toyExactLayer,
    .early-reversal-visual.is-revealed #toyCurveDot { opacity: 1; }
    .early-reversal-visual.is-revealed #toyGuessLine,
    .early-reversal-visual.is-revealed #toyGuessDot,
    .early-reversal-visual.is-revealed #toyGuessLabel { opacity: 0.48; }
    .early-reversal-visual.is-revealed.prediction-skipped #toyGuessLine,
    .early-reversal-visual.is-revealed.prediction-skipped #toyGuessDot,
    .early-reversal-visual.is-revealed.prediction-skipped #toyGuessLabel { opacity: 0; }

    #toyGuessHitLine,
    #toyGuessLine,
    #toyGuessDot,
    #toyGuessLabel {
      cursor: ew-resize;
      touch-action: none;
      user-select: none;
    }

    .early-reversal-visual.is-revealed #toyGuessHitLine,
    .early-reversal-visual.is-revealed #toyGuessLine,
    .early-reversal-visual.is-revealed #toyGuessDot,
    .early-reversal-visual.is-revealed #toyGuessLabel {
      pointer-events: none;
      cursor: default;
    }

    /* Rare one-sample IID draws can send calibration far off-scale. */
    .toy-curve-svg,
    .toy-geometry-svg { width: 100%; max-width: 620px; margin-inline: auto; }

    .core-crosswalk {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 8px;
      align-items: stretch;
      margin-top: 14px;
      padding: 10px;
      background: #f7f9fc;
      border-top: 3px solid var(--gold);
    }

    .core-crosswalk > span { display: grid; gap: 3px; align-content: center; min-width: 0; }
    .core-crosswalk small { color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
    .core-crosswalk output { color: var(--ink); font: 600 0.95rem "Times New Roman", Times, Georgia, serif; overflow-wrap: anywhere; }
    .core-crosswalk > i { align-self: center; color: var(--gold); font-style: normal; font-weight: 900; }
    .core-crosswalk.compact { padding: 8px 10px; }
    .core-crosswalk-note { margin: 7px 0 0; color: var(--muted); font-size: 0.72rem; }

    .point-receipt {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 20px;
      padding: 12px 0;
      border-block: 1px solid var(--line);
    }
    .point-receipt > span { display: grid; gap: 4px; }
    .point-receipt small, .residual-terms small { color: var(--muted); font-size: .76rem; }
    .point-receipt output { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    #toyLabelValue { color: #986d0a; }
    #toyPredictionValue { color: var(--green); }
    .point-receipt p { grid-column: 1 / -1; margin: 0; font-size: .9rem; }
    .prediction-pending .point-receipt { visibility: hidden; }
    /* A new IID draw changes values, not the space occupied by the receipts. */
    #toyResidualEquation { min-height: 3.1em; }
    #toyGeometryReadout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
    #toyGeometryReadout .toy-position-status { grid-column: 1 / -1; min-height: 3.1em; }
    #toyGeometryReadout .toy-metric { white-space: nowrap; font-variant-numeric: tabular-nums; }
    #toyLandmarkOverflow { font-size: .78rem; }
    @media (max-width: 420px) {
      #toyCurveVisual [data-iid-summary] { min-height: 10.85em; }
      #toyGeometryReadout { grid-template-columns: minmax(0, 1fr); }
      #toyGeometryReadout .toy-position-status { min-height: 4.65em; }
    }
    .residual-ledger { padding: 14px 0; border-block: 1px solid var(--line); }
    .residual-ledger > strong { font-size: .88rem; }
    .residual-ledger p { margin: 8px 0 0; font-size: .8rem; }
    .residual-terms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
    .residual-terms > span { display: grid; gap: 2px; }
    .residual-terms > i { font-style: normal; }
    .residual-terms output { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    #ledgerSignal { color: #986d0a; }
    #ledgerNuisance { color: #317aa6; }
    #ledgerResidual { color: #a65232; }

    .training-mode-switch {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      align-items: center;
      margin: 12px 0 14px;
      padding: 10px 12px;
      border: 1px solid #cdd8e6;
      background: #f5f9fc;
    }

    .training-mode-switch > span { display: grid; flex: .7 1 150px; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
    .training-mode-switch small { color: var(--muted); font-size: .64rem; font-weight: 850; text-transform: uppercase; }
    .training-mode-switch strong { font-size: .85rem; }
    .training-mode-switch p { flex-basis: 100%; min-width: 0; margin: 0; min-height: 4.65em; color: var(--muted); font-size: .7rem; } /* room for the three-line iid summary, so toggling does not shift the card */
    .training-mode-switch.inline-switch { margin-inline: 10px; }
    .training-mode-buttons { display: flex; flex: 1.3 1 260px; min-width: 0; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
    .training-mode-buttons button {
      min-width: 0;
      max-width: 100%;
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid #9eb4ca;
      background: #fff;
      color: var(--blue);
      font-size: .7rem;
      font-weight: 850;
      white-space: normal;
      overflow-wrap: anywhere;
      cursor: pointer;
    }
    .training-mode-buttons button[aria-pressed="true"] { border-color: var(--blue); background: #dcecf7; box-shadow: inset 0 0 0 1px var(--blue); }
    .training-mode-buttons [data-iid-redraw] { color: #62458f; border-color: #b7a6d1; background: #f7f2fb; }

    .toy-curve-svg,
    .toy-geometry-svg {
      overflow: hidden;
    }

    .iid-probability {
      margin: 9px 0 0;
      padding: 9px 11px;
      border-left: 4px solid var(--purple);
      background: #f5f0fb;
      color: #57416f;
      font-size: .78rem;
      font-weight: 800;
    }

    .mobile-response-range {
      position: absolute;
      bottom: -2px;
      height: 8px;
      border-radius: 5px;
      background: rgba(120, 98, 178, .24);
    }

    .iid-repetition-shell { margin-top: 32px; }
    .iid-repetition-visual { max-width: 980px; margin-inline: auto; }
    .iid-repetition-visual svg { width: 100%; }
    .training-mode-scope { margin: 14px 0 0; padding-left: 12px; border-left: 3px solid #9eb4ca; }

    .loss-dashboard-strip {
      display: grid;
      grid-template-columns: minmax(230px, 1.15fr) repeat(3, minmax(170px, 1fr));
      gap: 0;
      margin-top: 18px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .loss-dashboard-intro,
    .loss-dashboard { padding: 14px 15px; }
    .loss-dashboard-intro { display: flex; align-items: center; background: #f7f9fc; }
    .loss-dashboard-intro strong { display: block; line-height: 1.25; }
    .loss-dashboard-intro p { margin: 6px 0 0; color: var(--muted); font-size: 0.76rem; }
    .loss-dashboard { position: relative; padding-left: 44px; border-left: 1px solid var(--line); background: #fff; }
    .loss-dashboard > span { position: absolute; top: 14px; left: 13px; display: grid; place-items: center; width: 23px; height: 23px; color: #fff; border-radius: 50%; background: var(--ink); font-size: 0.74rem; font-weight: 900; }
    .loss-dashboard.fresh > span { background: var(--green); }
    .loss-dashboard.arriving > span { background: var(--purple); }
    .loss-dashboard strong { display: block; font-size: 0.84rem; line-height: 1.2; }
    .loss-dashboard p { margin: 4px 0 0; color: #384456; font-size: 0.76rem; line-height: 1.35; }
    .loss-dashboard small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.66rem; font-weight: 750; }

    .spectral-visual.prediction-pending :is(.desktop-figure-scroll, .spectral-mobile-figure, .controls, .readout, .caption, .audit-note) { display: none; }
    #spectralBars, #spectralAmpBars, .spectral-mobile-figure { transition: opacity 220ms ease; }

    .mobile-only,
    .mobile-scroll-hint { display: none; }

    .core-checkpoint {
      padding: 48px 0;
      color: var(--ink);
      background: #fff1bd;
      border-top: 1px solid #e2c679;
      border-bottom: 1px solid #e2c679;
    }

    .core-checkpoint-grid {
      display: grid;
      grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.1fr) minmax(210px, 0.55fr);
      gap: 30px;
      align-items: start;
    }

    .core-checkpoint h2 { margin-top: 7px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
    .core-checkpoint p { margin: 10px 0 0; color: #4e4533; }
    .core-checkpoint ol { margin: 0; padding-left: 1.35rem; }
    .core-checkpoint li + li { margin-top: 10px; }
    .core-checkpoint-actions { display: grid; gap: 8px; }
    .core-checkpoint-actions a { padding: 10px 12px; color: var(--ink); border-left: 3px solid var(--rust); background: rgba(255,255,255,.55); font-size: .8rem; font-weight: 850; text-decoration: none; }

    .desktop-figure-scroll { overflow: visible; }

    .mobile-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: visible;
      -webkit-overflow-scrolling: touch;
    }

    .mobile-scroll svg {
      min-width: 0;
    }

    @media (max-width: 920px) {
      .wrap { width: min(100vw - 28px, 720px); }
      .hero-grid,
      .section-header,
      .two-col,
      .two-col.reverse,
      .plot-grid,
      .concept-grid,
      .comic-row,
      .compare-grid,
      .mini-grid,
      .series-grid,
      .deterministic-card .mini-grid,
      .robust-ladder,
      .lab-controls,
      .basis-inspector,
      .spectrum-layout,
      .gram-pair,
      .goldilocks-compact,
      .misfit-reveal,
      .early-reversal,
      .loss-dashboard-strip,
      .core-checkpoint-grid,
      .classification-aside .alignment-aside-body,
      .problem-setup-head,
      .problem-model,
      .problem-explainers,
      .setup-ledger,
      .stylized-bridge,
      .span-first,
      .participation-layout,
      .participation-controls,
      .modeling-grid,
      .modeling-representation-grid,
      .modeling-work-grid,
      .modeling-spectrum-grid,
      .modeling-control-grid,
      .modeling-explainers,
      .multi-epoch-layout,
      .multispike-story,
      .stress-test-compact,
      .coda-media { grid-template-columns: 1fr; }

      html { scroll-padding-top: 48px; }

      /* Phones keep the act strip pinned as one swipeable row so the current act stays visible
         while scrolling; the runtime slides the active chip into view. */
      .act-nav {
        position: sticky;
        top: 0;
        padding: 6px 0;
      }

      .act-nav .wrap {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .act-nav .wrap::-webkit-scrollbar { display: none; }

      .act-nav a {
        flex: 0 0 auto;
        padding: 5px 7px;
        font-size: 0.72rem;
      }

      .act-nav a::before { width: 19px; height: 19px; }

      .essential-route.is-active { top: var(--blog-sticky-nav-height, 42px); }
      .essential-route-inner { padding-bottom: 4px; }
      .gold-route-toggle { margin-right: 0; }
      .gold-route-toggle small { display: none; }
      .essential-route.is-active .gold-route-toggle { display: none; }
      .essential-route.is-active .gold-route-steps { display: none; }
      .essential-route.is-active .gold-route-controls {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        padding-left: 0;
      }
      html.gold-route-active { scroll-padding-top: 106px; }
      .site-footer .wrap { align-items: flex-start; flex-direction: column; }

      .early-reversal { gap: 20px; }
      .early-reversal-copy { max-width: 650px; }
      .early-reversal-visual { width: 100%; }
      .training-mode-switch.inline-switch { margin-inline: 0; }
      .training-mode-buttons { justify-content: flex-start; }
      .training-mode-buttons button { flex: 1 1 110px; }
      .iid-repetition-visual svg { min-width: 0; }

      .loss-dashboard-strip { grid-template-columns: 1fr; }
      .loss-dashboard { border-left: 0; border-top: 1px solid var(--line); }

      .core-checkpoint { padding: 40px 0; }
      .core-checkpoint-grid { gap: 22px; }
      .core-checkpoint-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

      .core-crosswalk { grid-template-columns: 1fr; gap: 5px; }
      .core-crosswalk > i { line-height: .7; text-align: center; transform: rotate(90deg); }
      .core-crosswalk > span { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }

      .act-opener,
      .rules-strip,
      .shared-machine,
      .remember-grid {
        grid-template-columns: 1fr;
      }

      .regression-flow {
        grid-template-columns: 1fr;
      }

      .problem-flow-arrow {
        height: 20px;
        transform: rotate(90deg);
      }

      .problem-model { padding: 20px; }

      .problem-vector {
        grid-template-columns: minmax(88px, 0.72fr) minmax(0, 2.28fr);
      }

      .problem-signal-coordinate,
      .problem-nuisance-coordinates {
        min-height: 104px;
        padding: 14px 9px;
      }

      .alignment-route {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .alignment-chain {
        grid-template-columns: 1fr;
      }

      .alignment-chain i {
        line-height: 0.7;
        text-align: center;
        transform: rotate(90deg);
      }

      .act-opener { align-items: start; }
      .act-number { width: 50px; height: 50px; }

      .progression-strip {
        grid-template-columns: 1fr;
      }

      .progression-strip i { display: none; }
      .spot-art { width: 100%; max-width: 420px; margin-right: auto; }

      .coda-media .spot-art { max-width: 420px; }

      .mode-clock {
        grid-template-columns: 46px minmax(0, 1fr) minmax(110px, 0.9fr);
      }

      .mode-clock em {
        grid-column: 2 / -1;
        padding-left: 0;
      }

      .stress-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

      .report-overlay {
        left: 37.5%;
        top: 30%;
        width: 24%;
        gap: 4px;
        font-size: clamp(0.47rem, 2vw, 0.72rem);
      }

      .report-overlay span { padding: 3px 2px; border-width: 1px; }

      .quadrant-table {
        grid-template-columns: 70px repeat(2, minmax(0, 1fr));
      }

      .q-cell {
        min-height: 170px;
        padding: 12px;
      }

      .badge-new {
        position: static;
        display: inline-block;
        margin: 0 0 8px;
        padding: 4px 6px;
        border-radius: 4px;
        font-size: 0.58rem;
      }

      .theorem-badges,
      .formula-grid,
      .ladder,
      .lab-metrics,
      .oja-scorecard .lab-metrics,
      .modeling-metrics,
      .mode-strip,
      .metric-ribbon,
      .risk-legend {
        grid-template-columns: 1fr;
      }

      .metric-cell {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .metric-cell:last-child { border-bottom: 0; }
      .mechanism-legend,
      .participation-metrics,
      .pca-memory-strip,
      .multi-epoch-metrics,
      .epoch-contrast { grid-template-columns: 1fr; }
      .participation-metric { border-right: 0; border-bottom: 1px solid var(--line); }
      .participation-metric:last-child { border-bottom: 0; }
      .multi-epoch-metric { border-right: 0; border-bottom: 1px solid var(--line); }
      .multi-epoch-metric:last-child { border-bottom: 0; }
      .multi-epoch-canvas { height: 430px; }
      .multi-epoch-scrubber { grid-template-columns: 1fr; }
      .modeling-aside > summary { padding: 17px 18px; }
      .modeling-summary-title { font-size: 1.18rem; }
      .modeling-aside-body { padding: 14px; }
      .alignment-aside > summary {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 17px 52px 17px 18px;
      }
      .alignment-aside-question,
      .alignment-aside-preview {
        grid-column: 1;
        grid-row: auto;
      }
      .alignment-aside-preview { margin-top: 5px; }
      .alignment-aside-body { padding: 18px; }
      .alignment-aside-copy { grid-template-columns: 1fr; gap: 8px; }
      .modeling-ruler-row { grid-template-columns: 122px minmax(0, 1fr) 62px; }
      .modeling-explainers > div { border-right: 0; border-bottom: 1px solid var(--line); }
      .modeling-explainers > div:last-child { border-bottom: 0; }
      .gain-pair { grid-template-columns: 72px minmax(0, 1fr); }
      .gain-meter { grid-template-columns: minmax(110px, 1fr) 48px; }

      .function-stage { min-height: 360px; }
      .function-canvas { height: 360px; }
      .spectral-history-strip,
      .spectral-history-citations { grid-template-columns: 1fr; }
      .spectral-history-stop { border-right: 0; border-bottom: 1px solid var(--line); }
      .spectral-history-stop.final { border-bottom: 0; }
      .lab-metric { border-right: 0; border-bottom: 1px solid var(--line); }
      .lab-metric:last-child { border-bottom: 0; }
      .function-lab-head { align-items: flex-start; }
      .lab-head-actions { justify-content: flex-start; }

      .ladder-step {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .modeling-svg-scroll svg { width: 520px; max-width: none; }
      .modeling-svg-scroll.wide svg { width: 760px; }
      .modeling-svg-scroll.transfer svg { width: 620px; }

      .ladder-step:last-child { border-bottom: 0; }
      .concept-card img,
      .coda-banner img { height: 220px; }
      .svg-small { font-size: 12px; }

      .mobile-only { display: block; }
      .desktop-figure-scroll { display: none; }

      .mobile-scroll { overflow-x: visible; }
      .retained-scroll {
        position: relative;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        outline: 0;
        box-shadow: inset -18px 0 18px -18px rgba(35, 95, 158, .55);
      }

      .retained-scroll:focus-visible { outline: 3px solid rgba(35, 95, 158, .32); outline-offset: 3px; }
      .retained-scroll svg { min-width: 680px; scroll-snap-align: start; }
      .mobile-scroll-hint { display: block; margin: 7px 0 0; color: var(--blue); font-size: .72rem; font-weight: 800; }

      .survival-mobile-figure {
        padding: 16px 12px 12px;
        background: #fff;
        border: 1px solid var(--line);
      }

      .mobile-response-axis {
        position: relative;
        height: 34px;
        margin: 0 10px 0 2px;
        border-bottom: 2px solid var(--line);
      }

      .mobile-response-axis span { position: absolute; bottom: 5px; color: var(--muted); font-size: .66rem; transform: translateX(-50%); }
      .mobile-response-axis i { position: absolute; bottom: -162px; width: 0; height: 162px; border-left: 1px dashed var(--ink); opacity: .45; }
      .mobile-response-row { margin-top: 13px; }
      .mobile-response-row > span { display: flex; justify-content: space-between; gap: 10px; font-size: .76rem; }
      .mobile-response-row output { font: 600 .82rem "Times New Roman", Times, serif; }
      .mobile-response-track { position: relative; height: 22px; margin: 3px 10px 0 2px; border-bottom: 3px solid #e1e5eb; }
      .mobile-response-track i { position: absolute; left: 0; bottom: -7px; width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px rgba(24,33,47,.12); transform: translateX(-50%); }
      .mobile-response-row:nth-of-type(3) i { background: var(--nuisance); }
      .mobile-response-row:nth-of-type(4) i { background: var(--rust); }
      .mobile-amplifier { margin-top: 14px; padding: 7px 9px; color: #62458f; background: #f5f0fb; font-size: .74rem; font-weight: 850; text-align: center; }
      .mobile-risk-receipt { margin-top: 8px; padding: 9px; background: var(--gold-soft); font: 600 .86rem "Times New Roman", Times, serif; text-align: center; }

      .spectral-mobile-figure { padding: 12px 7px; background: #fff; border: 1px solid var(--line); }
      .spectral-mobile-axis { position: relative; height: 16px; margin: 0 0 7px 35px; color: var(--muted); font-size: .62rem; }
      .spectral-mobile-axis > span { position: absolute; transform: translateX(-50%); }
      .spectral-mobile-axis > span:first-child { transform: none; }
      .spectral-mobile-axis > span:last-child { transform: translateX(-100%); }
      .spectral-mobile-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; align-items: center; min-height: 31px; }
      .spectral-mobile-row > span { color: var(--muted); font-size: .7rem; font-weight: 800; text-align: right; }
      .spectral-mobile-track { position: relative; height: 23px; border-bottom: 1px solid #e1e5eb; background: linear-gradient(90deg, transparent 38.2%, rgba(216,221,230,.55) 38.2% 38.631%, transparent 38.631% 76.631%, rgba(216,221,230,.55) 76.631% 77.062%, transparent 77.062%); }
      .spectral-mobile-track i { position: absolute; top: 6px; transform: translateX(-50%); }
      .spectral-mobile-track .test { width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
      .spectral-mobile-track .train { width: 11px; height: 11px; background: var(--rust); }
      .spectral-mobile-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 4px 0 36px; color: var(--muted); font-size: .66rem; }
      .spectral-mobile-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; }
      .spectral-mobile-legend i.test { border-radius: 50%; background: var(--green); }
      .spectral-mobile-legend i.train { background: var(--rust); }
      .spectral-mobile-amps { margin: 12px 4px 0 36px; padding-top: 9px; border-top: 1px solid var(--line); }
      .spectral-mobile-amps strong { display: block; font-size: .72rem; }
      .spectral-mobile-amps > div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; margin-top: 6px; }
      .spectral-mobile-amps span { padding: 4px 1px; color: #fff; background: var(--purple); font-size: .58rem; font-weight: 800; text-align: center; }
      .spectral-visual[data-highlight="test"] .spectral-mobile-track .train { opacity: .25; }
      .spectral-visual[data-highlight="train"] .spectral-mobile-track .test { opacity: .25; }

      .pareto-mobile-figure { width: 100%; }

      .phase-mobile-band {
        position: relative;
        display: grid;
        grid-template-columns: 28.8% 42.5% 28.7%;
        min-height: 72px;
        margin: 12px 2px 32px;
        border: 1px solid var(--line);
      }
      .phase-mobile-band > span { display: grid; place-items: center; padding: 8px 4px; font-size: .68rem; font-weight: 850; text-align: center; }
      .phase-mobile-band .too-few { background: #f7deda; }
      .phase-mobile-band .misfit { background: #e7ebef; }
      .phase-mobile-band .many { background: var(--green-soft); }
      .phase-mobile-band .threshold { position: absolute; top: -7px; bottom: -7px; border-left: 2px solid var(--ink); }
      .phase-mobile-band .threshold.first { left: 28.8%; }
      .phase-mobile-band .threshold.second { left: 71.3%; }
      .phase-mobile-band > b { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px rgba(24,33,47,.18); transform: translate(-50%,-50%); }
      .phase-mobile-band > small { position: absolute; bottom: -24px; color: var(--muted); font: italic 600 .67rem "Times New Roman", Times, serif; transform: translateX(-50%); }
      .phase-mobile-band > small.first { left: 28.8%; }
      .phase-mobile-band > small.second { left: 71.3%; }
      .phase-mobile-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
      .phase-mobile-values span { display: grid; padding: 8px; background: #f7f9fc; }
      .phase-mobile-values small { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
      .phase-mobile-values output { margin-top: 2px; font: 600 .92rem "Times New Roman", Times, serif; }

      .sample-mobile-figure { padding: 10px 0 18px; }
      .sample-mobile-figure > p { margin: 0 0 18px; font-size: .88rem; font-weight: 750; }
      .sample-mobile-row { margin-top: 15px; }
      .sample-mobile-row > span { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; font-weight: 750; }
      .sample-mobile-row output { font-variant-numeric: tabular-nums; }
      .sample-mobile-row > div { height: 22px; margin-top: 5px; background: #f1f4f8; }
      .sample-mobile-row i { display: block; height: 100%; background: var(--green); }
      .sample-mobile-row #sampleIntFill { background: var(--rust); }
      .sample-mobile-axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--muted); font-size: .65rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }
  
    /* --- math typesetting (build step) --- */
    .equation, .window-formula, .theorem-badge .big, .mx {
      font-family: "Times New Roman", Times, Georgia, serif;
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
    }
    .equation { font-size: 1.06em; white-space: nowrap; }
    .window-formula { font-weight: 500; }
    .theorem-badge .big { font-weight: 600; }
    .equation i, .window-formula i, .theorem-badge .big i, .mx i {
      font-style: italic;
      font-family: inherit;
      padding-right: 0.02em;
    }
    .equation sub, .equation sup, .mx sub, .mx sup,
    .window-formula sub, .window-formula sup,
    .theorem-badge .big sub, .theorem-badge .big sup {
      font-size: 68%;
      line-height: 0;
    }
    .mbar { border-top: 0.075em solid currentColor; padding: 0.02em 0.05em 0 0.02em; }
    .svg-math { font: italic 600 17px "Times New Roman", Times, serif; }
    text.svg-math .up, tspan.up { font-style: normal; }

    .byline { margin: 14px 0 4px; font-size: 0.98rem; font-weight: 700; color: var(--ink); }
    .byline .soft-text { font-weight: 500; color: var(--muted); }

    .compact-pointer { display: block; }
    .frontier-layout > .visual { max-width: 1000px; margin: 0 auto; }
    .frontier-layout > div:last-child { max-width: 780px; margin: 28px auto 0; }
    .frontier-layout .visual svg { max-width: 100%; }
    #frontierBoundary:empty { display: none; }
    .field-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 18px 0; font-weight: 700; }
    .field-line output { margin-left: auto; font-variant-numeric: tabular-nums; }
    .field-line input[type="range"] { width: 100%; flex-basis: 100%; margin: 4px 0; }
    .field-line input[type="number"] { width: 100px; margin-left: auto; border: 1px solid var(--line); padding: 7px 9px; border-radius: 4px; font: inherit; }
    .teaching-plot { display: block; width: 100%; height: auto; overflow: visible; }
    .teaching-plot text { font-family: inherit; letter-spacing: 0; }
    svg .draggable { cursor: grab; touch-action: none; }
    svg .draggable:active { cursor: grabbing; }
    #iidCloudPlot [data-dataset] { cursor: pointer; }
    #frontierTicks, #frontierMobileTicks, #frontierGuides, #frontierMobileGuides { pointer-events: none; }
    .plot-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; line-height: 1.5; margin: 8px 0 14px; }
    .plot-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: #18212f; }
    .plot-legend .test-key::before { background: var(--plot-optimal); }
    .plot-legend .train-key::before { background: #b05f3b; }
    .plot-legend .signal-key::before { background: #b0820f; }
    .plot-legend .baseline-key::before { background: var(--plot-zero); }
    .plot-legend .reference-key::before { background: #7862b2; }
    .plot-legend .predictor-key::before { background: #b3484a; }
    .plot-legend .cap-key::before { background: #b43a78; }
    .plot-legend .core-pareto-key::before { width: 22px; height: 0; border-radius: 0; background: none; border-top: 3px dashed #b43a78; }
    .plot-legend .core-pareto-key[hidden] { display: none; }
    .iid-cloud-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; margin: 6px 0 0; }
    .iid-cloud-sliders .field-line { margin: 8px 0 4px; }
    @media (max-width: 620px) {
      .iid-cloud-sliders { grid-template-columns: minmax(0, 1fr); gap: 0; }
      /* Keep the sample-count slider immediately above the plot on phones. */
      .iid-cloud-gamma { order: -1; }
    }
    .plot-legend .nuisance-key::before { background: #317aa6; }
    .small-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; margin: 14px 0; }
    .small-metrics > * { border-top: 1px solid var(--line); padding-top: 8px; min-width: 0; font-size: 14px; }
    .small-metrics b, .small-metrics strong { display: block; font-size: 18px; }
    .sample-regimes { display: grid; grid-template-columns: 1fr 1.5fr 1fr; margin: 20px 0 10px; text-align: center; font-size: 15px; line-height: 1.5; }
    /* Direct children only: the KaTeX-rendered labels inside are spans too. */
    .sample-regimes > span { padding: 12px 6px; background: #edf1f6; }
    .sample-regimes > span:nth-child(2) { background: #e7ebef; border-bottom: 3px dashed #7b8795; }
    .sample-regimes > span:nth-child(3) { background: #dff1e2; }
    .snow-samples { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; margin: 18px 0; }
    .snow-samples button { min-width: 0; padding: 6px; border-radius: 4px; }
    .snow-samples button > svg { display: block; width: 100%; max-width: 48px; margin: 0 auto 5px; }
    .snow-samples .sample-name { display: block; font-size: 12px; white-space: nowrap; }
    .snow-samples .sample-name .katex { font-size: 1.06em; }
    .snow-samples button[aria-pressed="true"] { background: #e1f0f9; border-color: #317aa6; box-shadow: inset 0 0 0 1px #317aa6; }
    .core-mode-row { padding: 16px 12px; border-top: 1px solid var(--line); }
    .core-mode-row > strong, .core-mode-row > small, .core-mode-row > a { display: block; }
    .core-mode-row small, .core-mode-row a { font-size: 14px; line-height: 1.6; }
    .core-mode-row .core-mode-params { margin-top: 3px; color: var(--muted); }
    .core-mode-ruler { position: relative; height: 28px; border-bottom: 1px solid #9ba8b7; margin-top: 12px; }
    .core-mode-ruler i { position: absolute; bottom: -5px; width: 10px; height: 10px; border: 1px solid white; border-radius: 50%; transform: translateX(-50%); }
    .mode-interp { background: #18212f; }
    .mode-opt { background: #4f8f62; }
    .ruler-ends { position: relative; height: 32px; font-size: 12px; }
    .ruler-ends span { position: absolute; top: 6px; transform: translateX(-50%); }
    .sequence-note,
    .stage-summary { font-weight: 800; }
    .notation-worked { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 20px 0; }
    .notation-worked table { flex: 1 1 auto; width: auto; border-collapse: collapse; font-size: 14px; }
    .notation-worked th, .notation-worked td { padding: 8px; border-bottom: 1px solid #d8dde6; text-align: center; }
    .notation-worked caption { text-align: left; font-weight: 700; padding-bottom: 10px; }
    .notation-worked .selected { background: #e2f0f8; }
    .norm-bars > div { display: grid; grid-template-columns: 100px minmax(0,1fr) 70px; gap: 12px; align-items: center; margin: 12px 0; }
    .norm-track { height: 16px; background: #edf1f6; }
    .norm-track i { display: block; height: 100%; }
    @media(max-width: 920px) {
      .small-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .snow-samples { grid-template-columns: repeat(4,minmax(0,1fr)); }
      /* Narrow screens: let the 680-unit teaching plots scale to the card instead of hiding their
         right half (the test optimum and the misfit region) behind a horizontal scroll box. */
      .plot-scroll { overflow: visible; margin: 0 -10px; padding: 0; }
      .plot-scroll .teaching-plot { min-width: 0; }
      .norm-bars > div { grid-template-columns: 88px minmax(0,1fr) 60px; gap: 8px; font-size: 13px; }
    }
    @media(max-width: 600px) {
      /* On phones the scaled plots draw at roughly half size, so their type is enlarged in place
         (SVG presentation attributes yield to these rules; the KaTeX labels carry inline sizes). */
      .plot-scroll .teaching-plot text { font-size: 24px; }
      .plot-scroll .teaching-plot text[font-size="17"] { font-size: 23px; }
      .plot-scroll .teaching-plot text[font-size="16"] { font-size: 22px; }
      .plot-scroll .teaching-plot text[font-size="15"] { font-size: 21px; }
      .plot-scroll .teaching-plot .svg-katex-label { font-size: 23px !important; white-space: nowrap; }
    }

    .ridge-overlay {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      aspect-ratio: 3 / 2;
      pointer-events: none;
      color: var(--ink);
      font-weight: 900;
      text-align: center;
      line-height: 1.28;
    }

    .ridge-overlay .ridge-poster {
      position: absolute;
      left: 8%;
      top: 10%;
      width: 23%;
      font-size: clamp(0.55rem, 0.95vw, 0.86rem);
      letter-spacing: 0.03em;
      transform: rotate(-1.5deg);
      opacity: 0.82;
    }

    .ridge-overlay .ridge-note {
      position: absolute;
      left: 25%;
      top: 35%;
      width: 16%;
      font-size: clamp(0.6rem, 1.02vw, 0.94rem);
      font-style: italic;
      transform: rotate(-8deg);
    }

    /* Keep small annotations readable on their existing tinted cards. */
    .misfit-reveal strong { color: #944b2c; }
    .stress-lab-link { color: #66509c; }
    .robust-ladder .ladder-step > span, .robust-ladder .equation { color: #526070; }
    .loss-dashboard.fresh > span { background: #386944; }

    @media (max-width: 920px) {
      .threshold-explorer .threshold-plot-frame,
      .robust-scale-scroll { width: 100%; max-width: 100%; margin: 0; overflow-x: auto; overflow-y: hidden; }
      .threshold-plot-frame svg { min-width: 800px; max-width: none; }
      .robust-scale-scroll .teaching-plot { min-width: 420px; }
    }
    @media (max-width: 420px) {
      .quadrant-table { grid-template-columns: 32px repeat(2, minmax(0, 1fr)); gap: 6px; }
      .q-cell { padding: 12px 8px; }
      .q-title { font-size: clamp(.78rem, 3.6vw, .95rem); overflow-wrap: normal; word-break: normal; }
    }

    /* The sample-count instrument now answers the third question. */
    #sample-counts .section-header { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    #sample-counts > .wrap > .core-deeper > .section-part,
    #sample-counts #interpolation-tax > .section-part { padding-top: 0; }
    #sample-counts .core-deeper .wrap { width: 100%; }
    .hero-roadmap { max-width: 58ch; margin-top: 20px; color: var(--muted); font-size: 1rem; line-height: 1.65; }
    @media (max-width: 760px) { #sample-counts .section-header { grid-template-columns: minmax(0, 1fr); } }

/* Related views retain the reader's experiment and keep navigation local. */
.figure-perspectives {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  margin: .8rem 0;
  padding: .7rem 0;
  border-block: 1px solid #d8e0e8;
  font-size: .86rem;
  line-height: 1.5;
}
.figure-perspectives[hidden] { display: none; }
.figure-perspectives > span { color: #526273; }
.figure-perspectives a { color: #235f9e; text-underline-offset: .17em; }
.figure-perspectives a:focus-visible { outline: 2px solid #235f9e; outline-offset: 3px; }
/* Noisy Sensors: a drawer summary's second line ("Inside: …"), UP-SEN-21. */
.sensor-story details > summary > small { display: block; margin-top: 3px; color: var(--muted); font-size: .88rem; font-weight: 600; line-height: 1.45; }