/* Self-hosted Inter variable font — no third-party requests. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-var-latin.woff2") format("woff2-variations");
}

/* ═══════════════════════════════════════════════════════════════════════
   FieldBridge — project page stylesheet
   Base template extended with native HTML/CSS diagrams, interactive
   widgets and SVG charts. No build step, no dependencies.
   ═══════════════════════════════════════════════════════════════════ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #f7f8fa;
    --surface: #ffffff;
    --ink: #17202a;
    --muted: #5c6875;
    --line: #e1e6ec;
    --accent: #2f6f73;
    --accent-strong: #214f52;
    --accent-soft: #e8f2f2;
    --code: #101820;

    /* stage accents */
    --warm: #e08c3b;
    --warm-ink: #a9601f;
    --warm-soft: #fdf8f2;
    --warm-line: #ecdac6;
    --cool: #3f8a5f;
    --cool-ink: #2f7150;
    --cool-soft: #f4faf6;
    --cool-line: #ccdfd3;

    /* validated chart series (see README) */
    --viz-blue: #2a78d6;
    --viz-orange: #eb6834;
    --viz-aqua: #1baf7a;
    --viz-gray: #a3adb8;

    --panel: #05080a;
    /* near-black behind MRI slices */

    /* surfaces and inks that used to be written in place */
    --surface-2: #fbfcfd;
    /* inset panels: algo box, loss chips */
    --ink-soft: #27323c;
    /* body copy a shade under --ink */
    --ink-mid: #384653;
    --on-accent: #fff;
    /* text on the dark pill buttons */
    --btn-bg: #1f2933;
    --btn-bg-hover: #2d3946;
    --ours-row: #f2f8f8;
    --neg: #b4472c;
    --rule: #94a1ad;
    /* flow arrows and mini-node borders */
    --tip-bg: #17202a;
    --tip-ink: #f2f6fa;
    --on-bar: #fff;
    --grid: #eef1f5;
    --grid-strong: #cfd7de;
    /* rollout diagram (mirrors the slide figure) */
    --ro-s: #1f3864;
    --ro-eps: #7030a0;
    --ro-syn: #0e8a3e;
    --ro-acq: #44546a;
    --ro-cmp: #9dc3e6;
    --ro-box-bg: #dae3f3;
    --ro-box-line: #8faadc;
    --ro-box-ink: #1f3864;
    --ro-panel-bg: #eef2f8;
    --ro-panel-line: #dde5ef;
    --tt-1: #1f3864;
    --tt-2: #5b9bd5;
    --tt-3: #17967a;
    --tt-line: #b9cfe4;
    --tt-root-bg: #1f3864;
    --tt-root-ink: #ffffff;
    --sg-loss: #157a86;
    --shadow: 15, 23, 42;
    /* rgb triplet used by every box-shadow */

    --radius: 10px;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
}

a {
    color: var(--accent-strong);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    display: block;
    max-width: 100%;
}

.container {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
}

/* ── Sticky nav ──────────────────────────────────────────────────── */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-bottom: 1px solid var(--line);
}

.site-nav .container {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 52px;
}

.nav-brand {
    font-weight: 800;
    color: var(--accent-strong);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: auto;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links a {
    padding: 6px 11px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--accent-strong);
    background: var(--accent-soft);
    text-decoration: none;
}

.nav-links a.is-active {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

/* ── Hero ────────────────────────────────────────────────────────── */

.hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    text-align: center;
    padding: 74px 0 54px;
    background-image:
        radial-gradient(1200px 420px at 50% -160px, rgba(47, 111, 115, 0.08), transparent 62%);
}

.hero-inner {
    max-width: 1040px;
}

.venue {
    color: var(--accent);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

h1,
h2,
h3 {
    line-height: 1.18;
    color: var(--ink);
}

h1 {
    font-size: clamp(1.9rem, 4vw, 3.15rem);
    font-weight: 800;
    max-width: 980px;
    margin: 0 auto 10px;
    letter-spacing: -0.015em;
}

.hero .subtitle {
    color: var(--muted);
    font-size: clamp(1.02rem, 1.8vw, 1.25rem);
    margin: 0 auto 26px;
    max-width: 760px;
}

h2 {
    font-size: clamp(1.65rem, 2.6vw, 2.2rem);
    font-weight: 760;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.22rem;
    font-weight: 720;
    margin: 30px 0 14px;
}

p {
    margin-bottom: 16px;
}

.authors {
    color: var(--muted);
    margin-bottom: 8px;
    font-size: 1.15rem;
}

.authors a {
    font-weight: 600;
}

.affiliation {
    font-style: italic;
    font-size: 1rem;
    color: var(--muted);
    margin-bottom: 28px;
}

.links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--btn-bg);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover {
    color: #fff;
    background: var(--btn-bg-hover);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(var(--shadow), 0.14);
}

.btn--primary,
.btn--primary:hover {
    /* the accent is dark in the light theme and light in the dark one */
    color: var(--on-accent);
}

.btn--primary {
    background: var(--accent-strong);
}

.btn--primary:hover {
    background: var(--accent);
}

.btn--soon,
.btn--soon:hover {
    background: var(--surface);
    color: var(--muted);
    border: 1.5px dashed #c3ccd6;
    cursor: default;
    transform: none;
    box-shadow: none;
    user-select: none;
}

.soon-pill {
    margin-left: 3px;
    padding: 2.5px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

/* Hero: the 3-D render turning, beside the title on a wide screen and above
   it on a narrow one. The whole thing is the way into the viewer. */
.hero-lead {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 38px;
    align-items: center;
    text-align: left;
}

.hero-text {
    grid-column: 2;
    grid-row: 1;
}

.hero-lead .links {
    justify-content: flex-start;
}

/* while the showcase is parked, the hero is a single centred column again */
.hero-lead--solo {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
}

.hero-lead--solo .hero-text {
    grid-column: 1;
}

.hero-lead--solo .links {
    justify-content: center;
}

.hero-viewer {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: 12px;
    justify-items: center;
    color: inherit;
}

.hero-viewer:hover {
    text-decoration: none;
    color: inherit;
}

.hv-media {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--panel);
    line-height: 0;
    box-shadow: 0 10px 26px rgba(var(--shadow), 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hero-viewer:hover .hv-media {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 16px 34px rgba(var(--shadow), 0.14);
}

.hv-media video {
    width: 100%;
    height: auto;
    display: block;
}

.hv-cta {
    color: var(--accent-strong);
    font-weight: 800;
    font-size: 0.9rem;
    text-align: center;
}

.hero-viewer:hover .hv-cta span {
    display: inline-block;
    transform: translateX(3px);
    transition: transform 0.18s ease;
}

@media (max-width: 900px) {
    .hero-lead {
        grid-template-columns: 1fr;
        gap: 26px;
        text-align: center;
    }

    .hero-text,
    .hero-viewer {
        grid-column: 1;
        grid-row: auto;
    }

    .hero-viewer {
        order: -1;
    }

    .hero-lead .links {
        justify-content: center;
    }

    .hv-media {
        width: min(260px, 70%);
    }
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 176px;
    padding: 13px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(var(--shadow), 0.05);
}

.hero-stat .num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-strong);
    line-height: 1.15;
}

.hero-stat .lbl {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Sections ────────────────────────────────────────────────────── */

section {
    padding: 66px 0;
    border-bottom: 1px solid var(--line);
}

main > section:nth-child(even) {
    background: var(--surface);
}

.lead,
.section-intro {
    font-size: 1.12rem;
    color: var(--ink-soft);
    max-width: 60rem;
}

.eyebrow {
    display: block;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.footnote {
    color: var(--muted);
    font-size: 0.87rem;
    margin: 12px 0 0;
}

.wide-figure {
    margin: 34px 0 10px;
}

.wide-figure img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(var(--shadow), 0.08);
}

figcaption {
    color: var(--muted);
    font-size: 0.94rem;
    text-align: center;
    margin-top: 12px;
}

.figure-plain img {
    border-color: transparent;
    box-shadow: none;
}

/* ── Reveal on scroll ────────────────────────────────────────────── */

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Generic tab row ─────────────────────────────────────────────── */

.tab-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
}

.tab-row button {
    min-width: 92px;
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-align: center;
    transition: color 0.18s ease, background 0.18s ease;
}

.tab-row button:hover {
    color: var(--accent-strong);
}

.tab-row button[aria-selected="true"] {
    color: #fff;
    background: var(--accent-strong);
}

/* ── MRI panels ──────────────────────────────────────────────────── */

.mri {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: var(--panel);
}

.mri img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mri--portrait {
    aspect-ratio: 41 / 50;
}

.mri--landscape {
    aspect-ratio: 13 / 10;
}

/* ── Comparison slider (teaser) ──────────────────────────────────── */

.teaser-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    max-width: 840px;
    margin: 26px auto 0;
}

.cmp-card,
.ref-card {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(var(--shadow), 0.07);
    display: flex;
    flex-direction: column;
}

.cmp-slider {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--panel);
    aspect-ratio: 41 / 50;
    max-height: 420px;
    width: 100%;
    touch-action: none;
    cursor: ew-resize;
    flex: 1;
}

.cmp-slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.cmp-after {
    clip-path: inset(0 0 0 var(--cut, 50%));
}

.cmp-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--cut, 50%);
    width: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.cmp-handle::after {
    content: "\2194";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #17202a;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.cmp-tag {
    position: absolute;
    bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(8, 12, 16, 0.72);
    color: #e9eef3;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    pointer-events: none;
}

.cmp-tag--left {
    left: 10px;
}

.cmp-tag--right {
    right: 10px;
    color: #9fe3d2;
}

.cmp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.panel-title {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ref-card > div:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* the reference panel fills the height of the card beside it, and the slice
   sits whole inside it: no stretching, no cropping, and the surrounding dark
   is the same panel colour the comparison slider uses */
.ref-card .mri {
    flex: 1;
    aspect-ratio: auto;
    min-height: 0;
    margin-top: 10px;
}

.ref-card .mri img {
    object-fit: contain;
}

/* ── Field explorer ──────────────────────────────────────────────── */

.explorer {
    margin-top: 28px;
    padding: 22px 22px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(var(--shadow), 0.07);
}

.explorer-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.explorer-head h3 {
    margin: 0;
}

/* The field grid mirrors the slide: a header row of scanner cards, then one
   row per contrast. It pans horizontally once it would fall below 640px. */

.fx-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.fx-grid {
    display: grid;
    grid-template-columns: 64px repeat(5, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: center;
    min-width: 640px;
    margin-top: 12px;
}

.fx-scanner {
    display: grid;
    gap: 7px;
    justify-items: center;
    align-self: stretch;
    align-content: space-between;
    padding: 10px 8px 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}

.fx-scan-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fx-scan-top img {
    height: 44px;
    width: auto;
    background: #fff;
    border-radius: 6px;
    padding: 2px 4px;
}

.fx-badge {
    padding: 2px 9px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

/* fixed slide blues in both themes: the scale itself carries the meaning */
.fx-badge--f01 { background: #e9edf2; color: #3d4a5c; }
.fx-badge--f15 { background: #cfe2f3; color: #1f4e79; }
.fx-badge--f30 { background: #9fc5e8; color: #12395e; }
.fx-badge--f50 { background: #2e75b6; color: #fff; }
.fx-badge--f70 { background: #1f3864; color: #fff; }

.fx-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.fx-grid .mri,
.qual-grid .mri,
.sag-grid .mri {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fx-grid .mri:hover,
.qual-grid .mri:hover,
.sag-grid .mri:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(var(--shadow), 0.28);
}

.fx-head {
    display: flex;
    justify-content: center;
}

.fx-row-lbl {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-align: right;
    padding: 6px 2px 6px 0;
    /* stays readable while the grid pans on narrow screens */
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
}

/* ── Fact cards (data / evaluation) ─────────────────────────────── */

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

/* the evaluation card carries five metrics, so it takes a row of its own */
#task .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fact-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    margin-top: 16px;
}

.eval-head p:last-child {
    margin-bottom: 0;
}

.fact-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.05);
}

.fact-card h3 {
    margin: 4px 0 6px;
    font-size: 1.08rem;
}

.fact-card .big {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--accent-strong);
    line-height: 1.1;
}

.fact-card p {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 8px 0 0;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.chip b {
    font-weight: 800;
}

.chip .up {
    color: var(--cool-ink);
    font-weight: 800;
}

.chip .down {
    color: var(--viz-blue);
    font-weight: 800;
}

/* metric chips */
.metric-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.fact-card--wide .metric-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 0;
}

.fact-card--wide .metric-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 10px 12px;
}

.metric-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.85rem;
}

.metric-item b {
    font-weight: 800;
    color: var(--accent-strong);
    white-space: nowrap;
}

.metric-item span {
    color: var(--muted);
}

/* ── Flow diagrams (HTML/CSS) ────────────────────────────────────── */

.flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin: 18px 0 6px;
}

.flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 96px;
}

.flow-node .mri {
    width: 108px;
    aspect-ratio: 41 / 50;
    border: 1px solid #2c3a46;
}

.flow-node .cap {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    /* headroom for the drawn x-hat */
    display: block;
    padding-top: 6px;
}

.flow-node .cap b {
    color: var(--ink);
    font-weight: 800;
}

.flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    max-width: 130px;
    line-height: 1.3;
    padding-bottom: 26px;
}

.flow-arrow .shaft {
    display: block;
    width: 64px;
    height: 2px;
    background: var(--rule);
    position: relative;
}

.flow-arrow .shaft::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    border-left: 8px solid var(--rule);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.flow-arrow .shaft--dashed {
    background: repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 11px);
}

.net-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1.5px solid var(--accent);
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 800;
    font-size: 0.98rem;
    white-space: nowrap;
}

.vs-gap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 26px;
}

.vs-arrow {
    width: 42px;
    height: 21px;
    overflow: visible;
}

/* ── Loss chips ──────────────────────────────────────────────────── */

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

.loss-chip {
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg);
}

.loss-chip .name {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--ink);
    margin-bottom: 3px;
}

.loss-chip .name i {
    font-style: normal;
    font-family: Georgia, "Times New Roman", serif;
}

.loss-chip p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.stage-card--warm .loss-chip {
    background: var(--surface-2);
    border-color: var(--warm-line);
}

.stage-card--cool .loss-chip {
    background: var(--surface-2);
    border-color: var(--cool-line);
}

/* KaTeX equations: inherit colour, sit close to the text size */
.katex {
    font-size: 1.05em;
}

.ro-eq {
    overflow-x: auto;
    overflow-y: hidden;
}

.mini-node .katex,
.cap .katex {
    font-size: 1em;
}

/* math strip */
.math {
    font-family: Georgia, "Times New Roman", "STIX Two Text", serif;
    font-style: italic;
    letter-spacing: 0.01em;
}

.math sub,
.math sup {
    font-size: 0.72em;
}

.formula {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    font-size: 1.02rem;
    color: var(--ink);
}

/* ── Stage cards ─────────────────────────────────────────────────── */

.stage-card {
    margin: 30px 0 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.06);
}

.stage-card--warm {
    border-color: var(--warm-line);
    border-left-color: var(--warm);
}

.stage-card--cool {
    border-color: var(--cool-line);
    border-left-color: var(--cool);
}

.stage-card--plain {
    border-left-color: var(--line);
}

.stage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.stage-badge {
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: #fff;
    font-size: 0.94rem;
    font-weight: 800;
}

.stage-card--warm .stage-badge {
    background: var(--warm);
}

.stage-card--cool .stage-badge {
    background: var(--cool);
}

.stage-head h3 {
    margin: 0;
    font-size: 1.4rem;
}

.stage-card--warm .stage-head h3 {
    color: var(--warm-ink);
}

.stage-card--cool .stage-head h3 {
    color: var(--cool-ink);
}

.stage-head > p {
    flex: 1 1 340px;
    margin: 0;
    color: var(--ink-mid);
    font-size: 1.01rem;
}

.stage-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 24px;
    margin-top: 20px;
}

.tradeoff {
    padding: 18px;
    border: 1px solid var(--warm-line);
    border-radius: 8px;
    background: var(--warm-soft);
}

.tradeoff h4 {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 800;
}

.tradeoff ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tradeoff li {
    padding-left: 34px;
    color: var(--ink-soft);
    font-size: 0.93rem;
    line-height: 1.5;
}

.tradeoff li + li {
    margin-top: 10px;
}

.tradeoff li::before {
    display: inline-block;
    width: 34px;
    margin-left: -34px;
    font-weight: 800;
}

.tradeoff li.plus::before {
    content: "(+)";
    color: var(--cool-ink);
}

.tradeoff li.minus::before {
    content: "(\2212)";
    color: var(--neg);
}

.box-label {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 0.89rem;
    line-height: 1.5;
    text-align: left;
}

/* ── One jump vs bridge ──────────────────────────────────────────── */

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

.duo-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.05);
}

.duo-card h3 {
    margin: 0 0 4px;
    font-size: 1.06rem;
}

.duo-card .who {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.duo-card.is-ours {
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(47, 111, 115, 0.14);
}

.mini-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0;
    min-height: 40px;
}

.mini-node {
    padding: 5px 11px;
    border: 1.5px solid var(--rule);
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.mini-node--net {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.mini-arrow {
    color: #94a1ad;
    font-weight: 800;
}

.duo-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 0.89rem;
}

.duo-card ul li + li {
    margin-top: 5px;
}

.duo-card ul li::marker {
    color: var(--accent);
}

/* ── Rollout (animated) ──────────────────────────────────────────── */

.rollout-card {
    margin-top: 26px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(var(--shadow), 0.07);
}

.rollout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.rollout-head h3 {
    margin: 0;
}

.rollout-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 40px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.icon-btn:hover {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.icon-btn[aria-pressed="true"] {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #fff;
}

.rollout-scroll {
    overflow-x: auto;
    padding-bottom: 6px;
}

/* The rollout diagram is a single fixed-geometry SVG (700x462) that mirrors
   the sampling-scheme figure: two rows of states, q_phi between them, and a
   mixing node feeding each next state. It scales as one unit and pans
   horizontally once it would fall below 540px. */

.ro-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    margin-top: 12px;
}

.ro-wrap .rollout-scroll {
    flex: 1 1 620px;
    min-width: 0;
}

.ro-fig {
    max-width: 700px;
    min-width: 540px;
    margin: 0 auto;
}

.rollout {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 700 / 462;
}

.rollout text {
    font-family: Georgia, "Times New Roman", "STIX Two Text", serif;
    font-style: italic;
    font-size: 15px;
    fill: var(--ink);
}

.rollout .ro-plain {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-style: normal;
    font-size: 13px;
    font-weight: 800;
}

.ro-title--syn { fill: var(--ro-syn); }
.ro-title--acq { fill: var(--ro-acq); }
.ro-src { fill: var(--viz-blue); }

.ro-ln { stroke: var(--ink-soft); stroke-width: 1.8; fill: none; }
.ro-hd { fill: var(--ink-soft); stroke: none; }
.ro-tick { stroke: var(--ink-soft); stroke-width: 1.6; }
.ro-ln--s { stroke: var(--ro-s); stroke-width: 2; }
.ro-hd--s { fill: var(--ro-s); }
.ro-ln--e { stroke: var(--ro-eps); stroke-width: 2; }
.ro-hd--e { fill: var(--ro-eps); }
.ro-box { fill: var(--ro-box-bg); stroke: var(--ro-box-line); stroke-width: 1.5; }
.ro-plus { fill: var(--ro-box-bg); stroke: var(--ink-soft); stroke-width: 1.6; }
.ro-plusln { stroke: var(--ink-soft); stroke-width: 1.8; }
.ro-cmpln { stroke: var(--ro-cmp); stroke-width: 5; }
.ro-cmphd { fill: var(--ro-cmp); }

/* Animation: the figure lights up one element at a time, in the order the
   rollout happens — input, prediction, mixture, and so on. */
#rollout [data-p],
.ro-fig .fig-l[data-p],
.rollout-timeline [data-p] {
    opacity: 0.24;
    transition: opacity 0.4s ease;
}

#rollout [data-p].is-on,
.ro-fig .fig-l[data-p].is-on,
.rollout-timeline [data-p].is-on {
    opacity: 1;
}

/* the piece that just arrived carries the highlight */
.ro-glow {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#rollout [data-p] .ro-glow {
    opacity: 0;
}

#rollout [data-p].is-now .ro-glow {
    opacity: 1;
}

/* Sampling-scheme panel */
.ro-panel {
    flex: 1 1 250px;
    max-width: 340px;
    margin-inline: auto;
    align-self: center;
    padding: 20px 24px 26px;
    border-radius: 14px;
    background: var(--ro-panel-bg);
    border: 1px solid var(--ro-panel-line);
}

.ro-panel-title {
    display: block;
    margin-bottom: 16px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.ro-eq {
    margin: 0 0 13px;
    font-size: 0.98rem;
    color: var(--ink);
}

.ro-consts {
    display: flex;
    gap: 28px;
    margin: 18px 0 0;
    font-size: 0.98rem;
    color: var(--viz-blue);
}

/* Time axis inside the panel: ticks at t0..t3, fill tracks the animation. */
.rollout-timeline {
    display: flex;
    align-items: center;
    margin: 44px 2px 26px;
}

.rt-seg {
    height: 3px;
    background: var(--rule);
    position: relative;
    overflow: hidden;
}

.rt-seg .fill {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}



.rt-dot {
    position: relative;
    width: 3px;
    height: 14px;
    border-radius: 1px;
    flex: 0 0 3px;
    background: var(--ink-soft);
    transition: background 0.3s ease;
}



.rt-dot > span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.rt-dot .v {
    top: -26px;
    font-size: 0.82rem;
}

/* the end labels align with the ends of the axis instead of overhanging it */
.rt-dot:first-child .v,
.rt-dot:first-child .tl {
    left: 0;
    transform: none;
}

.rt-dot:last-child .v,
.rt-dot:last-child .tl {
    left: auto;
    right: 0;
    transform: none;
}

.rt-seg.is-on .fill {
    transform: scaleX(1);
}

.rt-dot.is-on {
    background: var(--accent);
}

.rt-dot .tl {
    top: 19px;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--muted);
}

.rollout-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 34px;
}

/* ── Context stack ───────────────────────────────────────────────── */

.ctx-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 20px;
}

.ctx-stack-panel {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.ctx-stack-panel .ctx-stack {
    margin-block: auto;
}

.ctx-stack {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 28px;
    padding: 12px 6px 8px;
    flex-wrap: wrap;
    /* the hover lift stays inside this box: no repaint of the text around it */
    isolation: isolate;
}

.ctx-group {
    display: grid;
    gap: 18px;
    justify-items: center;
}

.ctx-brace {
    position: relative;
    z-index: 4;
    width: 100%;
    padding: 0 4px 13px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.ctx-brace::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 9px;
    border: 2.5px solid currentColor;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
}

.ctx-brace--warm { color: var(--warm-ink); }
.ctx-brace--cool { color: var(--cool-ink); }

.ctx-slices {
    display: flex;
    align-items: center;
}

.ctx-slice {
    position: relative;
    width: 88px;
    aspect-ratio: 41 / 50;
    border-radius: 6px;
    overflow: hidden;
    background: var(--panel);
    border: 2.5px solid transparent;
    --tilt: perspective(560px) rotateY(-26deg);
    transform: var(--tilt);
    transition: transform 0.2s ease;
    box-shadow: 8px 10px 20px rgba(var(--shadow), 0.2);
    will-change: transform;
    backface-visibility: hidden;
}

.ctx-slice + .ctx-slice {
    margin-left: -30px;
}

.ctx-slice:hover {
    transform: var(--tilt) translateY(-6px);
    z-index: 3;
}

.ctx-inflate,
.ctx-stack-panel .panel-title {
    position: relative;
    z-index: 1;
}

.ctx-slice img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ctx-slice--warm {
    border-color: var(--warm);
}

.ctx-slice--cool {
    border-color: var(--cool);
}

.ctx-slice--main {
    width: 104px;
    border-color: var(--accent);
}

.ctx-slice .tag {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(8, 12, 16, 0.78);
    color: #e9eef3;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: -1px;
}

.dot--warm {
    background: var(--warm);
}

.dot--cool {
    background: var(--cool);
}

.dot--blue {
    background: var(--viz-blue);
}

.dot--vorange {
    background: var(--viz-orange);
}

.dot--vaqua {
    background: var(--viz-aqua);
}

.dot--gray {
    background: var(--viz-gray);
}

.ctx-inflate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    color: var(--muted);
    font-size: 0.85rem;
    flex-wrap: wrap;
    text-align: center;
}

/* availability matrix */
.matrix {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.matrix .th-sub {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

.matrix th,
.matrix td {
    padding: 9px 8px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.matrix thead th {
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.matrix th:first-child,
.matrix td:first-child {
    text-align: left;
    font-weight: 700;
}

.matrix .yes {
    color: var(--cool-ink);
    font-weight: 800;
}

.matrix .no {
    color: #b9c2cc;
    font-weight: 700;
}

.matrix .col-warm {
    color: var(--warm-ink);
}

.matrix .col-cool {
    color: var(--cool-ink);
}

/* ── Twelve translators grid ─────────────────────────────────────── */

.cells-wrap {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.05);
}

/* Twelve-cells tree: one from-scratch model per contrast, three warm starts
   each, plus a single stacked bar for the training-time budget. */

/* Twelve-cells tree: one fixed-geometry SVG, like the rollout diagram, so it
   renders identically everywhere. It scales as a unit and pans below 600px. */

.tt-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.tt-svg {
    display: block;
    width: 100%;
    max-width: 900px;
    min-width: 600px;
    height: auto;
    aspect-ratio: 940 / 216;
    margin: 16px auto 0;
}

.tt-svg text {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tt-ln {
    stroke: var(--tt-line);
    stroke-width: 1.5;
    fill: none;
}

.tt-r-root { fill: var(--tt-root-bg); }

.tt-t-root {
    fill: var(--tt-root-ink);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.tt-r-mid {
    fill: var(--ro-box-bg);
    stroke: var(--ro-box-line);
    stroke-width: 1.5;
}

.tt-t-mid {
    fill: var(--ro-box-ink);
    font-size: 14px;
    font-weight: 800;
}

.tt-r-leaf {
    fill: var(--surface-2);
    stroke: var(--line);
}

.tt-t-leaf {
    fill: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.tt-t-note {
    fill: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
}

/* Stage-1 training diagram: one fixed-geometry SVG, same technique as the
   rollout and the twelve-cells tree. */

.sg-fig {
    max-width: 880px;
    min-width: 620px;
    margin: 14px auto 0;
}

.sg-svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 920 / 610;
}

/* Maths over a figure: plain HTML, positioned as a fraction of the drawing
   and sized in container units, so it lands identically in every engine and
   scales with the figure. */
.fig-wrap {
    position: relative;
    container-type: inline-size;
}

.fig-l {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
    line-height: 1.25;
    text-align: center;
    color: var(--ink);
    font-size: 15px;
    font-size: calc(17 * var(--u));
}

.fig-l--r {
    /* anchored by its right edge, so only the vertical centring applies */
    transform: translateY(-50%);
}

.fig-l--box {
    color: var(--ro-box-ink);
}

.fig-l--loss {
    color: var(--sg-loss);
    font-size: 13px;
    font-size: calc(15 * var(--u));
}

.fig-l--s {
    color: var(--ro-s);
    font-size: calc(15 * var(--u));
}

.fig-l--w {
    font-size: calc(13 * var(--u));
}

.fig-l--e {
    color: var(--ro-eps);
}

.fig-l--plain {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 12px;
    font-size: calc(12.5 * var(--u));
}

.fig-l--plain code {
    font-size: 0.94em;
}

.sg-fig {
    --u: 1px;
    --u: calc(100cqw / 920);
}

.ro-fig {
    --u: 1px;
    --u: calc(100cqw / 700);
}

.sg-svg text {
    font-family: Georgia, "Times New Roman", "STIX Two Text", serif;
    font-style: italic;
    fill: var(--ink);
}

.sg-plain,
.sg-blue,
.sg-teal {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 600;
}

.sg-plain { fill: var(--ink-soft); }
.sg-blue { fill: var(--ro-box-ink); font-weight: 800; }
.sg-teal { fill: var(--sg-loss); }

.sg-ln { stroke: var(--ink-soft); stroke-width: 1.8; fill: none; }
.sg-ln--dash { stroke-dasharray: 7 5; }
.sg-hd-ink { fill: var(--ink-soft); }
.sg-loss { stroke: var(--sg-loss); stroke-width: 2; fill: none; }
.sg-loss--dash { stroke-dasharray: 7 5; }
.sg-hd { fill: var(--sg-loss); }

.sg-patch {
    stroke: var(--cool);
    stroke-width: 2.5;
    fill: none;
}

.tt-caption {
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ro-box-ink);
}

/* the shared training-time bar */
.tt-panel {
    margin-top: 22px;
    padding: 16px 20px 14px;
    border-radius: 12px;
    background: var(--ro-panel-bg);
    border: 1px solid var(--ro-panel-line);
}

.tt-title {
    margin: 0 0 12px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
}

.tt-title b {
    color: var(--ink);
}

.tt-bar {
    display: flex;
    gap: 2px;
    height: 16px;
    border-radius: 5px;
    overflow: hidden;
}

.tt-seg {
    min-width: 6px;
}

.tt-seg--1 { background: var(--tt-1); }
.tt-seg--2 { background: var(--tt-2); }
.tt-seg--3 { background: var(--tt-3); }

.tt-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    margin-top: 11px;
}

.tt-item {
    display: grid;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--muted);
}

.tt-item b {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--ink);
}

.tt-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 10px;
}

.tt-dot--1 { background: var(--tt-1); }
.tt-dot--2 { background: var(--tt-2); }
.tt-dot--3 { background: var(--tt-3); }

/* a hat drawn over the x, immune to combining-mark shaping */
.hx {
    position: relative;
}

.hx::after {
    content: "\02c6";
    position: absolute;
    left: 55%;
    top: -0.44em;
    transform: translateX(-50%);
    font-size: 0.8em;
}

.ref-list {
    margin: 18px 0 0;
    padding-left: 22px;
    display: grid;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--muted);
}

.ref-list li {
    line-height: 1.6;
}

/* ── SVG charts ──────────────────────────────────────────────────── */

.viz-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.05);
}

.viz-card h3 {
    margin: 0 0 2px;
    font-size: 1.06rem;
}

.viz-card .sub {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.viz-card svg {
    width: 100%;
    height: auto;
    display: block;
}

.viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 4px 0 10px;
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
}

svg .s-blue { stroke: var(--viz-blue); }
svg .s-orange { stroke: var(--viz-orange); }
svg .s-aqua { stroke: var(--viz-aqua); }
svg .f-blue { fill: var(--viz-blue); }
svg .f-orange { fill: var(--viz-orange); }
svg .f-aqua { fill: var(--viz-aqua); }
svg .f-surface { fill: var(--surface); }
svg .stroke-surface { stroke: var(--surface); }

svg .axis-line {
    stroke: var(--grid-strong);
    stroke-width: 1;
}

svg .grid-line {
    stroke: var(--grid);
    stroke-width: 1;
}

svg .ref-line {
    stroke: var(--rule);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
}

svg .tick-lbl {
    fill: var(--muted);
    font-size: 12px;
    font-family: "Inter", sans-serif;
}

svg .val-lbl {
    fill: var(--ink);
    font-size: 11.5px;
    font-weight: 700;
    font-family: "Inter", sans-serif;
}

svg .series-lbl {
    font-size: 12px;
    font-weight: 800;
    font-family: "Inter", sans-serif;
}

.viz-tooltip {
    position: fixed;
    z-index: 90;
    pointer-events: none;
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--tip-bg);
    color: var(--tip-ink);
    font-size: 0.8rem;
    line-height: 1.4;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.12s ease;
    max-width: 260px;
}

.viz-tooltip.is-on {
    opacity: 1;
}

.calib-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-top: 22px;
}

.effect-list {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.effect-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
}

.effect-item b {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--accent-strong);
    white-space: nowrap;
}

.effect-item span {
    color: var(--muted);
    font-size: 0.88rem;
}

/* ── Results ─────────────────────────────────────────────────────── */

.rankband {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(var(--shadow), 0.07);
    margin: 26px 0;
}

.rankband .headline .place {
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 800;
    color: var(--accent-strong);
    line-height: 1;
    white-space: nowrap;
}

.rankband .headline .of {
    color: var(--muted);
    font-weight: 700;
    font-size: 1rem;
}

.rank-bars {
    display: grid;
    gap: 7px;
}

.rank-bar {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.rank-bar .who {
    color: var(--muted);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.rank-bar .track {
    height: 14px;
    border-radius: 4px;
    background: var(--bg);
    overflow: hidden;
}

.rank-bar .fill {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--viz-gray);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rank-bar.is-ours .who {
    color: var(--accent-strong);
}

.rank-bar.is-ours .fill {
    background: var(--viz-blue);
}

.rank-bar .val {
    font-weight: 800;
    color: var(--ink);
}

.is-visible .rank-bar .fill {
    transform: scaleX(1);
}

.rank-note {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.82rem;
    margin: 2px 0 0;
}

/* tables */
.table-label {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.92rem;
}

.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.06);
}

.table-wrap + .table-label {
    margin-top: 26px;
}

.table-wrap--narrow table {
    min-width: 560px;
}

table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

th,
td {
    padding: 11px 13px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

th:first-child,
td:first-child {
    text-align: left;
    font-weight: 700;
}

thead {
    background: var(--accent-soft);
}

thead th {
    color: var(--accent-strong);
    font-weight: 800;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr.ours {
    background: var(--ours-row);
    box-shadow: inset 3px 0 0 var(--accent);
}

td .rk {
    color: var(--muted);
    font-size: 0.8em;
}

td.best {
    font-weight: 800;
}

/* qualitative panels */
.qual-block {
    margin-top: 26px;
}

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

.qual-panel {
    margin: 0;
    display: grid;
    gap: 7px;
}

.qual-panel figcaption {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.qual-panel figcaption b {
    color: var(--ink);
}

.qual-panel.is-ours figcaption b {
    color: var(--accent-strong);
}

.qual-panel.is-ours .mri {
    outline: 2.5px solid var(--accent);
    outline-offset: -2.5px;
}

.panel-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(8, 12, 16, 0.78);
    color: #e9eef3;
    font-size: 0.72rem;
    font-weight: 800;
}

.panel-badge--good {
    background: rgba(31, 122, 90, 0.92);
}

.panel-badge--bad {
    background: rgba(140, 52, 32, 0.88);
}

.where-note {
    margin: 14px 0 0;
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-mid);
    font-size: 0.92rem;
}

/* anatomical recovery bars */
.anat-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-top: 24px;
}

.hbar-group {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.hbar {
    display: grid;
    gap: 4px;
}

.hbar .lbl {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink);
}

.hbar .track {
    position: relative;
    height: 15px;
    border-radius: 4px;
    background: var(--bg);
    border: 1px solid var(--line);
    overflow: hidden;
}

.hbar .track + .track {
    margin-top: 3px;
}

.hbar .fill {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.hbar .fill--input {
    background: var(--viz-gray);
}

.hbar .fill--ours {
    background: var(--viz-blue);
}

.is-visible .hbar .fill {
    transform: scaleX(1);
}

.hbar .track .pct {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ink);
}

/* sagittal consistency */
.sag-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.sag-panel {
    margin: 0;
    display: grid;
    gap: 7px;
}

.sag-panel .mri {
    aspect-ratio: 13 / 10;
}

.sag-panel figcaption {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.sag-panel figcaption b {
    color: var(--ink);
    display: block;
}

.sag-panel.is-ours figcaption b {
    color: var(--accent-strong);
}

.sag-panel .delta {
    display: block;
    margin: 2px auto 0;
    height: 6px;
    border-radius: 3px;
    background: var(--viz-gray);
}

.sag-panel.is-ours .delta {
    background: var(--viz-blue);
}

.sag-panel.is-ref .delta {
    background: var(--cool);
}

/* source field widget */
.srcfield {
    margin-top: 26px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.06);
}

/* ── Outlook ─────────────────────────────────────────────────────── */

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

.note-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.05);
}

.note-card .kicker {
    display: block;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.note-card h3 {
    margin: 0 0 8px;
    font-size: 1.04rem;
}

.note-card p {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.note-card p:last-child {
    margin-bottom: 0;
}

.note-card .big {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-strong);
}

/* log-B0 timeline */
.timeline-card {
    margin-top: 26px;
    padding: 26px 26px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(var(--shadow), 0.07);
}

.bridge-track {
    position: relative;
    height: 6px;
    margin: 58px 24px 64px;
    border-radius: 3px;
    background: linear-gradient(90deg, #cfd9e2, var(--accent));
}

.bt-stop {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    cursor: default;
}

.bt-stop .knob {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--surface);
    border: 3.5px solid var(--accent);
    transition: transform 0.15s ease;
}

.bt-stop:hover .knob {
    transform: scale(1.25);
}

.bt-stop .fld {
    position: absolute;
    bottom: 21px;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.bt-stop .tval {
    position: absolute;
    top: 21px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.bt-stop--anchor .knob {
    border-color: var(--warm);
}

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

.reading {
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg);
    font-size: 0.87rem;
    color: var(--muted);
}

.reading b {
    display: block;
    color: var(--ink);
    font-weight: 800;
    margin-bottom: 2px;
}

.prediction-box {
    margin-top: 16px;
    padding: 15px 18px;
    border: 1px solid var(--cool-line);
    border-left: 4px solid var(--cool);
    border-radius: 9px;
    background: var(--cool-soft);
    font-size: 0.94rem;
    color: var(--ink-soft);
}

/* ── Citation ────────────────────────────────────────────────────── */

pre {
    overflow-x: auto;
    background: var(--code);
    color: #edf2f7;
    padding: 22px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.55;
    position: relative;
}

code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.88em;
    padding: 0.12em 0.42em;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--ink);
    white-space: nowrap;
}

pre code {
    font-size: inherit;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    white-space: pre;
}

.cite-wrap {
    position: relative;
}

.copy-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #dfe7ee;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ── Footer ──────────────────────────────────────────────────────── */

.site-footer {
    padding: 42px 0 54px;
    background: var(--surface);
}

.site-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.9rem;
}

.site-footer a {
    font-weight: 600;
}

/* ═══ Qualitatives (gallery) page ════════════════════════════════ */

.qualitative-hero {
    padding: 46px 0 54px;
    text-align: left;
}

.qualitative-hero .hero-inner {
    max-width: 1100px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.back-link:hover {
    color: var(--accent-strong);
}

.qualitative-hero h1 {
    margin: 0 0 26px;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
}

.qualitative-hero .links {
    justify-content: flex-start;
}

.btn.muted-link {
    background: #52606d;
}

.group-heading {
    margin-bottom: 22px;
}

.group-heading h2 {
    margin: 6px 0 0;
}

.group-kicker {
    display: block;
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dataset-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.06);
}

.dataset-card + .dataset-card {
    margin-top: 24px;
}

.dataset-card > h3 {
    margin: 0 0 4px;
    font-size: 1.28rem;
}

.dataset-card > .box-label {
    margin-bottom: 16px;
}

.gal-grid {
    display: grid;
    gap: 10px;
}

.gal-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gal-grid--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gal-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px;
}

.gal-grid + .gal-grid {
    margin-top: 10px;
}

/* ═══ Responsive ═════════════════════════════════════════════════ */

@media (max-width: 980px) {

    .card-grid,
    .note-grid,
    .loss-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teaser-wrap,
    .ctx-wrap,
    .calib-wrap,
    .anat-wrap {
        grid-template-columns: 1fr;
    }

    /* the caption that used to sit beside the reference is gone, so the slice
       takes the whole card and stays centred */
    .ref-card .mri {
        aspect-ratio: 41 / 50;
        flex: 0 0 auto;
        max-width: 320px;
        margin-inline: auto;
    }

    .rankband {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 760px) {
    .container {
        width: min(100% - 28px, 1100px);
    }

    .hero {
        padding: 52px 0 40px;
    }

    section {
        padding: 48px 0;
    }

    .card-grid,
    .note-grid,
    .loss-grid,
    .duo,
    .readings {
        grid-template-columns: 1fr;
    }

    .qual-grid,
    .gal-grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .sag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stage-card,
    .rollout-card,
    .explorer,
    .cells-wrap,
    .srcfield,
    .timeline-card {
        padding: 16px;
    }

    .stage-body {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #task .card-grid,
    .fact-card--wide {
        grid-template-columns: 1fr;
    }

    .fact-card--wide .metric-list {
        grid-template-columns: 1fr;
        margin-top: 14px;
    }

    .links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .hero .links .btn {
        width: 100%;
    }

    /* hint that the nav row pans */
    .nav-links {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    }

    .hero-stat {
        flex: 1 1 100%;
        text-align: center;
    }

    .hv-media {
        width: min(220px, 62%);
        margin-inline: auto;
    }

    .bridge-track {
        margin: 54px 8px 60px;
    }

    .bt-stop .fld {
        font-size: 0.78rem;
    }

    .bt-stop .tval {
        font-size: 0.66rem;
    }

    .rank-bar {
        grid-template-columns: 88px minmax(0, 1fr) 38px;
    }

    figcaption {
        text-align: left;
    }

    .qual-panel figcaption,
    .sag-panel figcaption {
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Interactive viewer (viewer.html)
   ═══════════════════════════════════════════════════════════════ */

.vw-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 0.94rem;
}

.vw-fact strong {
    color: var(--accent-strong);
    font-weight: 800;
}

.vw-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px 28px;
    margin-bottom: 22px;
}

.vw-label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#vw-opacity,
#vw-brain {
    width: 170px;
    accent-color: var(--accent-strong);
}

.is-hidden {
    display: none !important;
}

.vw-status {
    margin: 0 0 18px;
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.94rem;
}

.vw-status.is-error {
    border-left-color: #b4472c;
    color: #8c3520;
}

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

.vw-panel {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(var(--shadow), 0.06);
    transition: opacity 0.2s ease;
}

.vw-panel--cool {
    border-color: var(--cool-line);
}

/* The uncertainty map exists for the prediction only. */
.vw-panel.is-muted {
    opacity: 0.45;
}

.vw-panel figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 9px;
    margin: 0 0 10px;
    text-align: left;
}

.vw-panel-title {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
}

.vw-panel--cool .vw-panel-title {
    color: var(--cool-ink);
}

.vw-panel-sub {
    color: var(--muted);
    font-size: 0.85rem;
}

.vw-canvas-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: var(--panel);
}

.vw-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.vw-footer {
    margin-top: 18px;
}

.vw-readout {
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9rem;
}

.vw-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Matches NiiVue's "inferno" ramp used for the sigma overlay. */
.vw-scale {
    flex: 0 0 auto;
    width: 110px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #000004, #420a68, #932667, #dd513a, #fca50a, #fcffa4);
}

.vw-note {
    margin: 18px 0 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.vw-note summary {
    padding: 14px 0 0;
    color: var(--accent-strong);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    width: max-content;
}

.vw-tips {
    margin: 10px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.vw-tips b {
    color: var(--ink-soft);
}

body.is-loading .vw-canvas-wrap {
    opacity: 0.55;
}

@media (max-width: 900px) {
    .vw-grid {
        grid-template-columns: 1fr;
    }

    .vw-canvas-wrap {
        aspect-ratio: 4 / 3;
    }

    .vw-controls {
        gap: 14px 20px;
    }

    #vw-opacity,
    #vw-brain {
        width: 100%;
    }
}


/* viewer: structure chips */

.vw-structs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: -6px 0 18px;
}

.vw-structs .vw-label {
    margin-right: 2px;
}

.vw-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.vw-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.vw-chip:hover {
    border-color: var(--accent);
}

.vw-chip.is-off {
    opacity: 0.42;
    background: var(--bg);
}

.vw-chip.is-off .vw-chip-dot {
    filter: grayscale(1);
}

.vw-chip.is-locked {
    cursor: default;
    opacity: 0.55;
}

.vw-chip-dot {
    width: 11px;
    height: 11px;
    border-radius: 4px;
    flex: 0 0 11px;
}

.vw-dice {
    color: var(--muted);
    font-weight: 800;
    font-size: 0.74rem;
}

.vw-chip--all {
    border-style: dashed;
    color: var(--muted);
}

.vw-chip--all[aria-pressed="true"] {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    border-style: solid;
    color: #fff;
}


/* viewer: large-canvas layout, focus mode, fullscreen */

#viewer .container--wide {
    width: min(1560px, calc(100% - 40px));
}

.vw-canvas-wrap {
    aspect-ratio: auto;
    height: clamp(380px, 56vh, 740px);
}

.vw-panel figcaption {
    align-items: center;
}

.vw-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.72rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.vw-expand:hover {
    color: var(--accent-strong);
    border-color: var(--accent);
}

/* the hero of the viewer page is left-aligned, so its subtitle is too */
.qualitative-hero .subtitle {
    margin-left: 0;
    margin-right: 0;
}

.vw-control--end {
    margin-left: auto;
}

.vw-grid.is-focus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vw-grid.is-focus .vw-panel.is-primary {
    grid-column: 1 / -1;
    order: -1;
}

.vw-grid.is-focus .vw-panel.is-primary .vw-canvas-wrap {
    height: clamp(460px, 72vh, 980px);
}

.vw-grid.is-focus .vw-panel:not(.is-primary) .vw-canvas-wrap {
    height: clamp(190px, 26vh, 320px);
}

#viewer:fullscreen {
    background: var(--bg);
    overflow-y: auto;
    padding: 34px 0;
}

#viewer:fullscreen .vw-canvas-wrap {
    height: clamp(420px, 64vh, 1100px);
}

#viewer:fullscreen .vw-grid.is-focus .vw-panel.is-primary .vw-canvas-wrap {
    height: clamp(500px, 78vh, 1400px);
}

#viewer:fullscreen .vw-grid.is-focus .vw-panel:not(.is-primary) .vw-canvas-wrap {
    height: clamp(190px, 24vh, 420px);
}

@media (max-width: 900px) {
    .vw-canvas-wrap {
        height: clamp(320px, 46vh, 560px);
    }

    .vw-grid.is-focus {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vw-grid.is-focus .vw-panel.is-primary .vw-canvas-wrap {
        height: clamp(360px, 54vh, 700px);
    }

    .vw-control--end {
        margin-left: 0;
    }
}

.vw-panel figcaption .vw-expand {
    order: 10;
}


/* inline SVG icons (replaces the icon-font CDN) */

.ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.ic--fill {
    stroke: none;
    fill: currentColor;
}

/* small-viewport units where supported (stable under mobile URL bars) */

.vw-canvas-wrap {
    height: clamp(380px, 56svh, 740px);
}

.vw-grid.is-focus .vw-panel.is-primary .vw-canvas-wrap {
    height: clamp(460px, 72svh, 980px);
}

.vw-grid.is-focus .vw-panel:not(.is-primary) .vw-canvas-wrap {
    height: clamp(190px, 26svh, 320px);
}

@media (max-width: 900px) {
    .vw-canvas-wrap {
        height: clamp(320px, 46svh, 560px);
    }

    .vw-grid.is-focus .vw-panel.is-primary .vw-canvas-wrap {
        height: clamp(360px, 54svh, 700px);
    }
}


.footer-copyright {
    flex-basis: 100%;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.84rem;
}

/* ═══ Viewer on a phone ════════════════════════════════════════════════
   Three stacked panels cannot be compared and cost three times the GPU,
   and 400px of controls above the fold leaves no room for the image. The
   phone layout shows one panel at a time, swapped from a segmented
   control, with the chrome compressed around it. */

.vw-panel-switch {
    display: none;
}

@media (max-width: 700px) {

    /* one panel, as large as the screen allows */
    .vw-grid,
    .vw-grid.is-focus {
        display: block;
    }

    .vw-grid .vw-panel {
        display: none;
    }

    .vw-grid .vw-panel.is-phone-active {
        display: block;
    }

    .vw-grid .vw-panel.is-phone-active .vw-canvas-wrap,
    .vw-grid.is-focus .vw-panel.is-phone-active .vw-canvas-wrap {
        height: min(62svh, 74vw * 1.25);
    }

    .vw-panel-switch {
        display: flex;
        width: 100%;
        margin-bottom: 12px;
        border-radius: 12px;
    }

    .vw-panel-switch button {
        flex: 1;
        min-width: 0;
        padding: 10px 6px;
        font-size: 0.82rem;
    }

    /* The canvas ignores touch until asked, so swipes scroll the page.
       touch-action alone cannot achieve this: NiiVue preventDefaults touchstart,
       which cancels scrolling for the whole gesture. */
    .vw-canvas-wrap canvas {
        pointer-events: none;
    }

    .vw-canvas-wrap.is-interactive canvas {
        pointer-events: auto;
        touch-action: none;
    }

    .vw-touch-gate {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 14px;
        border: 0;
        background: transparent;
        color: #e9eef3;
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .vw-touch-gate {
        font-size: 0;
    }

    .vw-touch-gate::before {
        content: "Tap to interact";
        font-size: 0.8rem;
        padding: 7px 16px;
        border-radius: 999px;
        background: rgba(8, 12, 16, 0.76);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .vw-canvas-wrap.is-interactive .vw-touch-gate {
        display: none;
    }

    .vw-touch-release {
        position: absolute;
        top: 9px;
        right: 9px;
        display: none;
        padding: 6px 14px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #17202a;
        font-family: inherit;
        font-size: 0.76rem;
        font-weight: 800;
        cursor: pointer;
    }

    .vw-canvas-wrap.is-interactive .vw-touch-release {
        display: inline-flex;
    }

    /* compress the chrome */
    .vw-controls {
        gap: 10px 14px;
        margin-bottom: 14px;
    }

    .vw-control {
        gap: 4px;
    }

    .vw-label {
        font-size: 0.68rem;
        letter-spacing: 0.05em;
    }

    .tab-row {
        padding: 3px;
    }

    .tab-row button {
        min-width: 0;
        padding: 7px 12px;
        font-size: 0.8rem;
    }

    /* the desktop layout switch has no meaning with a single panel */
    #vw-layout,
    #vw-layout + *,
    .vw-control:has(#vw-layout) {
        display: none;
    }

    /* structures on one swipeable line rather than four wrapped rows */
    .vw-structs {
        display: block;
        margin: -2px 0 14px;
    }

    .vw-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        margin-top: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .vw-chip-row::-webkit-scrollbar {
        display: none;
    }

    .vw-chip {
        flex: none;
    }

    .vw-chip--all {
        margin-top: 8px;
    }

    #vw-opacity,
    #vw-brain {
        width: 100%;
        min-width: 150px;
    }

    .vw-control--end {
        margin-left: 0;
    }

    .vw-readout {
        font-size: 0.8rem;
    }
}

/* On a phone the viewer and gallery heroes stack full-width buttons, which
   pushes the content that matters below the fold. Inline pills instead. */
@media (max-width: 700px) {
    .qualitative-hero {
        padding: 22px 0 26px;
    }

    .qualitative-hero h1 {
        margin-bottom: 14px;
    }

    .qualitative-hero .subtitle {
        margin-bottom: 18px;
        font-size: 1rem;
    }

    .qualitative-hero .links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .qualitative-hero .links .btn {
        width: auto;
        min-height: 40px;
        padding: 8px 16px;
        font-size: 0.88rem;
    }

    .qualitative-hero .back-link {
        margin-bottom: 18px;
    }

    .vw-facts {
        gap: 4px 14px;
        font-size: 0.86rem;
    }
}


/* The touch handover is a phone affordance only. */
@media (min-width: 701px) {

    .vw-touch-gate,
    .vw-touch-release {
        display: none;
    }
}


/* ═══ Dark theme ═══════════════════════════════════════════════════════
   Follows the operating system by default; the toggle in the header
   overrides it and the choice is remembered. The MRI panels keep their
   near-black background in both themes — the images are the constant. */

:root[data-theme="dark"] {
    --bg: #0e1317;
    --surface: #161c22;
    --surface-2: #1b232b;
    --ink: #e7edf3;
    --ink-soft: #cdd7e0;
    --ink-mid: #b6c3cf;
    --muted: #93a2b0;
    --line: #29343d;
    --accent: #6fbcc1;
    --accent-strong: #8ed3d7;
    --accent-soft: #14312f;
    --code: #0a0e12;

    --warm: #e29a52;
    --warm-ink: #f0b477;
    --warm-soft: #241c12;
    --warm-line: #3d3020;
    --cool: #56a377;
    --cool-ink: #7fc79c;
    --cool-soft: #12241a;
    --cool-line: #26402f;

    /* dark steps of the validated chart palette, not a flip of the light ones */
    --viz-blue: #3987e5;
    --viz-orange: #d95926;
    --viz-aqua: #199e70;
    --viz-gray: #6d7b88;

    --on-accent: #0b1013;
    --btn-bg: #2b3640;
    --btn-bg-hover: #3a4753;
    --ours-row: #132a2c;
    --neg: #e08768;
    --rule: #5d6b78;
    --tip-bg: #e7edf3;
    --tip-ink: #10161b;
    --on-bar: #0b1013;
    --grid: #222c35;
    --grid-strong: #34414c;
    --ro-s: #9fbdf2;
    --ro-eps: #c9a3ec;
    --ro-syn: #57c07c;
    --ro-acq: #b6c3cf;
    --ro-cmp: #4e7099;
    --ro-box-bg: #1b2a3d;
    --ro-box-line: #3c5a86;
    --ro-box-ink: #aac4f0;
    --ro-panel-bg: #131a21;
    --ro-panel-line: #29343d;
    --tt-1: #46639c;
    --tt-2: #5b9bd5;
    --tt-3: #1fa07f;
    --tt-line: #3a4f68;
    --tt-root-bg: #2c4470;
    --tt-root-ink: #dbe6f5;
    --sg-loss: #8ed3d7;
    --shadow: 0, 0, 0;

    color-scheme: dark;
}

:root[data-theme="dark"] .hero {
    background-image:
        radial-gradient(1200px 420px at 50% -160px, rgba(111, 188, 193, 0.10), transparent 62%);
}

:root[data-theme="dark"] .site-nav {
    background: rgba(22, 28, 34, 0.86);
}

:root[data-theme="dark"] .btn {
    color: var(--ink);
}

:root[data-theme="dark"] .btn--soon,
:root[data-theme="dark"] .btn--soon:hover {
    color: var(--muted);
    border-color: var(--line);
}

:root[data-theme="dark"] .qual-panel.is-ours .mri,

:root[data-theme="dark"] .vw-touch-release {
    background: rgba(231, 237, 243, 0.92);
    color: #10161b;
}

/* The theme toggle itself */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
    color: var(--accent-strong);
    border-color: var(--accent);
}

.theme-toggle .ic {
    width: 17px;
    height: 17px;
}

.theme-toggle .ic-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .ic-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .ic-moon {
    display: inline-block;
}

.hero-toggle {
    position: absolute;
    top: 18px;
    right: 0;
}

.qualitative-hero {
    position: relative;
}