:root {
            /* concrete (warm grey-beige base) */
            --bg: #ebe8e0;
            --panel: #f5f3ec;
            --panel-tint: #e3dfd2;
            --bg-deep: #d9d4c3;

            /* charcoal ink (warm-leaning, not pure black) */
            --ink: #1c1c19;
            --ink-soft: #383832;
            --ink-muted: #7a7872;

            /* muted indigo / slate accent */
            --em-deep: #26364f;
            --em: #344f78;
            --em-mid: #5f789f;
            --em-glow: #9eb1ca;
            --em-light: #dce4ee;

            /* walnut wood accent (used sparingly) */
            --walnut: #6b4a30;
            --walnut-soft: #8a6a4a;
            --walnut-light: #e8dec8;

            /* aged bronze (replaces honey amber) */
            --amber: #a67a3a;
            --amber-soft: #c79a5a;
            --amber-light: #ecddc0;

            /* plot palette */
            --olive: #8a7e3e;
            --periwinkle: #6e7ec7;
            --coral: #c87a78;
            --baseline-neutral: #5f646e;
            --baseline-sage: #6f8f79;
            --baseline-terracotta: #b56b5c;
            --baseline-ochre: #b08b45;
            --baseline-plum: #7b648e;

            /* rules */
            --rule: #1c1c19;
            --rule-soft: #c8c2b0;
            --rule-faint: #ddd9cc;

            /* shadows — like cantilevered planes on concrete */
            --sh-soft: 0 2px 8px rgba(28, 28, 25, 0.06);
            --sh-card: 0 6px 18px rgba(28, 28, 25, 0.10);
            --sh-card-deep: 0 18px 38px rgba(28, 28, 25, 0.16);
            --sh-emerald: 0 8px 26px rgba(38, 54, 79, 0.22);

            --spine-h: 60px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { background: var(--bg); margin: 0; padding: 0; }
        body {
            margin: 0; padding: 0;
            font-family: 'Fraunces', Georgia, serif;
            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 14;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.66;
            font-size: 17px;
            -webkit-font-smoothing: antialiased;
            opacity: 0;
            transition: opacity 0.45s;
            position: relative;
        }
        body.loaded { opacity: 1; }

        /* faint concrete grain — subtle */
        body::before {
            content: "";
            position: fixed; inset: 0;
            pointer-events: none;
            z-index: 1;
            opacity: 0.045;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0.6 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
            mix-blend-mode: multiply;
        }
        ::selection { background: var(--em-glow); color: var(--ink); }

        /* ════════════════ σ-SPINE (architectural ledge) ════════════════ */
        .sigma-spine {
            position: sticky;
            top: 0;
            z-index: 200;
            background: rgba(235, 232, 224, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1.5px solid var(--rule);
            height: var(--spine-h);
        }
        .spine-inner {
            display: flex; align-items: center; gap: 18px;
            height: 100%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 32px;
        }
        @media (max-width: 640px) { .spine-inner { padding: 0 20px; } }
        .spine-brand {
            display: flex; align-items: baseline; gap: 8px;
            flex-shrink: 0;
            transition: opacity 0.18s;
        }
        .spine-brand:hover { opacity: 0.7; }
        .spine-brand .brand-mark {
            font-family: 'Fraunces', Georgia, serif;
            font-variation-settings: 'opsz' 18;
            font-weight: 600;
            font-size: 0.92rem;
            color: var(--ink);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1;
        }
        .spine-brand:hover .brand-mark { color: var(--em); }
        .spine-track { position: relative; flex: 1; height: 32px; min-width: 0; }
        .spine-bar {
            position: absolute; left: 0; right: 0; top: 50%;
            height: 1px;
            transform: translateY(-50%);
            background: linear-gradient(90deg,
                var(--em) 0%,
                var(--em-mid) 30%,
                var(--walnut-soft) 60%,
                var(--amber) 100%);
        }
        .spine-cursor {
            position: absolute; top: 50%; left: 0;
            width: 12px; height: 12px;
            border-radius: 50%;
            background: var(--em);
            border: 2px solid var(--bg);
            transform: translate(-50%, -50%);
            box-shadow: 0 0 0 1.5px var(--em);
            transition: left 0.22s cubic-bezier(.16,.7,.3,1);
            z-index: 3;
            pointer-events: none;
        }
        .spine-stop {
            position: absolute; left: var(--p); top: 50%;
            transform: translate(-50%, -50%);
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.62rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--ink-muted);
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            z-index: 2;
        }
        .spine-stop .dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--bg);
            border: 1.5px solid var(--ink-muted);
            transition: all 0.2s;
        }
        .spine-stop .lbl {
            position: absolute;
            top: 14px;
            opacity: 0;
            transform: translateY(-2px);
            transition: opacity 0.2s, transform 0.2s;
            background: var(--ink);
            color: var(--bg);
            padding: 3px 10px;
            border-radius: 999px;
            pointer-events: none;
        }
        .spine-stop:hover .lbl { opacity: 1; transform: translateY(0); }
        .spine-stop:hover .dot { transform: scale(1.3); border-color: var(--em); }
        .spine-stop.passed .dot { background: var(--walnut); border-color: var(--walnut); }
        .spine-stop.active .dot {
            background: var(--em);
            border-color: var(--em);
            transform: scale(1.4);
            animation: spinePulse 2.4s ease-in-out infinite;
        }
        @keyframes spinePulse {
            0%, 100% { box-shadow: 0 0 0 2px rgba(42, 93, 64, 0.22); }
            50%      { box-shadow: 0 0 0 6px rgba(42, 93, 64, 0.0); }
        }
        .spine-actions { display: flex; gap: 8px; flex-shrink: 0; }
        .chip {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 4px 10px;
            border: 1.5px solid var(--rule);
            background: var(--bg);
            color: var(--ink);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.66rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-decoration: none;
            opacity: 0.55;
            cursor: default;
            border-radius: 999px;
            transition: all 0.18s ease;
        }
        a.chip {
            opacity: 1;
            cursor: pointer;
            border-color: var(--em);
            color: var(--em);
        }
        a.chip:hover {
            background: var(--em);
            color: #fff;
            border-color: var(--em);
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(42, 93, 64, 0.25);
        }
        @media (max-width: 760px) {
            .spine-stop .lbl { display: none; }
            .spine-actions { display: none; }
            :root { --spine-h: 52px; }
        }

        /* ════════════════ PAPER ════════════════ */
        .paper {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 32px;
            position: relative;
            z-index: 2;
        }
        @media (max-width: 640px) { .paper { padding: 0 20px; } }

        /* ════════════════ HERO ════════════════ */
        .hero { padding: 32px 0 16px; max-width: 980px; position: relative; }
        .hero-meta {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.74rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--walnut);
            margin-bottom: 16px;
            display: block;
        }
        .hero-meta .dot-sep { color: var(--rule-soft); margin: 0 6px; }
        .hero-brand {
            font-family: 'Fraunces', Georgia, serif;
            font-variation-settings: 'opsz' 144;
            font-weight: 700;
            font-size: clamp(2.8rem, 7.4vw, 5rem);
            line-height: 0.95;
            letter-spacing: -0.045em;
            margin: 0 0 14px;
            color: var(--ink);
        }
        .hero-subtitle {
            font-family: 'Fraunces', serif;
            font-variation-settings: 'opsz' 60;
            font-weight: 600;
            font-size: clamp(1rem, 1.85vw, 1.4rem);
            line-height: 1.2;
            letter-spacing: -0.02em;
            color: var(--ink);
            margin: 0 0 16px;
            max-width: none;
            white-space: nowrap;
        }
        @media (max-width: 900px) {
            .hero-subtitle { white-space: normal; font-size: clamp(1.05rem, 3vw, 1.4rem); max-width: 880px; }
        }
        .hero-tagline {
            display: block;
            max-width: 880px;
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            font-family: 'Fraunces', serif;
            font-variation-settings: 'opsz' 36;
            font-style: italic;
            font-weight: 400;
            font-size: clamp(1rem, 1.7vw, 1.2rem);
            line-height: 1.45;
            color: var(--ink-soft);
            margin: 12px 0 26px;
        }
        .hero-tagline strong { color: var(--em); font-weight: 700; font-style: italic; }
        .hero-tagline em { color: var(--em); font-style: italic; font-weight: 700; }
        .hero-authors {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.84rem;
            color: var(--ink-soft);
            line-height: 1.7;
            margin: 0 0 4px;
        }
        .hero-authors a {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px dotted transparent;
            transition: color 0.18s, border-color 0.18s;
        }
        .hero-authors a:hover { color: var(--em); border-bottom-color: var(--em); }
        .hero-authors sup { font-size: 0.7em; color: var(--ink-muted); }
        .hero-authors .affil {
            display: block; margin-top: 4px;
            color: var(--ink-muted); font-size: 0.78rem;
        }

        /* Venue line — plain bold text under affiliations, above video */
        .hero-venue {
            display: block;
            font-family: 'JetBrains Mono', monospace;
            font-size: 1rem;
            font-weight: 700;
            color: var(--ink);
            margin: 14px 0 16px;
            letter-spacing: 0.02em;
        }

        /* Teaser video: cap height so video fully visible on landing */
        .teaser-polaroid {
            margin: 14px auto 12px;
            overflow: hidden;
            border-radius: 14px;
            aspect-ratio: 1280 / 720;
            width: 100%;
            display: block;
        }
        .teaser-polaroid > video {
            width: 100%;
            height: 100%;
            display: block;
            background: transparent;
            object-fit: contain;
        }
        @media (max-width: 760px) {
            .teaser-polaroid { width: min(100%, calc((100vh - 200px) * 16 / 9)); }
        }

        /* HERO QUICK LINKS — square-edged, like building signage */
        .hero-quick-links {
            display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
            margin: 32px 0 0;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.78rem;
        }
        .hero-quick-links .qlink {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 9px 18px;
            border: 1.5px solid var(--rule);
            color: var(--ink);
            text-decoration: none;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-size: 0.72rem;
            border-radius: 999px;
            transition: background 0.18s, color 0.18s, border-color 0.18s;
        }
        .hero-quick-links .qlink:hover { background: var(--ink); color: var(--bg); }
        .hero-quick-links .qlink.qlink-soon {
            border-style: dashed; border-color: var(--rule-soft);
            color: var(--ink-muted); cursor: default;
        }
        .hero-quick-links .qlink.qlink-soon:hover { background: none; color: var(--ink-muted); }
        .hero-quick-links .qlink.qlink-soon em {
            font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
            text-transform: none; letter-spacing: 0; color: var(--ink-muted);
        }
        .hero-quick-links .qlink.primary { background: var(--em); color: #fff; border-color: var(--em); }
        .hero-quick-links .qlink.primary:hover { background: var(--em-deep); border-color: var(--em-deep); }
        .hero-quick-links .qlink.link-accent {
            border-color: var(--em);
            color: var(--em);
        }
        .hero-quick-links .qlink.link-accent:hover {
            background: var(--em);
            color: #fff;
            border-color: var(--em);
            box-shadow: 0 3px 8px rgba(42, 93, 64, 0.28);
            transform: translateY(-1px);
        }
        .hero-quick-links .qlink-aside {
            color: var(--ink-muted);
            font-size: 0.72rem;
            margin-left: auto;
            font-style: italic;
            font-family: 'Fraunces', serif;
        }
        @media (max-width: 540px) {
            .hero-quick-links .qlink-aside { margin-left: 0; width: 100%; }
        }

        /* Baseline palette preview (mini bar chart swatches) */
        .palette-preview {
            margin-top: 18px;
            border: 1px solid var(--rule-soft);
            background: var(--panel);
            border-radius: 12px;
            padding: 14px 14px 12px;
            box-shadow: var(--sh-soft);
        }
        .palette-preview-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.64rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-muted);
            margin-bottom: 10px;
        }
        .palette-bars {
            display: grid;
            grid-template-columns: repeat(6, minmax(64px, 1fr));
            gap: 8px;
            align-items: end;
        }
        .palette-bar {
            border: 1px solid rgba(28, 28, 25, 0.18);
            border-radius: 8px;
            padding: 7px 6px 6px;
            min-height: 112px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 6px;
            background: #fff;
        }
        .palette-bar .bar {
            border-radius: 5px 5px 0 0;
            width: 100%;
        }
        .palette-bar .label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.58rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--ink-soft);
            line-height: 1.25;
        }
        .palette-bar.neutral .bar { height: 74px; background: var(--baseline-neutral); }
        .palette-bar.score .bar { height: 88px; background: var(--em); }
        .palette-bar.sage .bar { height: 62px; background: var(--baseline-sage); }
        .palette-bar.terracotta .bar { height: 68px; background: var(--baseline-terracotta); }
        .palette-bar.ochre .bar { height: 56px; background: var(--baseline-ochre); }
        .palette-bar.plum .bar { height: 64px; background: var(--baseline-plum); }
        @media (max-width: 720px) {
            .palette-bars { grid-template-columns: repeat(3, minmax(72px, 1fr)); }
        }
        .chart-mockups {
            margin-top: 12px;
            border: 1px solid var(--rule-soft);
            background: var(--panel);
            border-radius: 12px;
            padding: 14px 14px 12px;
            box-shadow: var(--sh-soft);
        }
        .chart-mockups-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .chart-mock {
            border: 1px solid rgba(28, 28, 25, 0.18);
            border-radius: 10px;
            background: #fff;
            padding: 10px 10px 8px;
        }
        .chart-mock-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.58rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--ink-muted);
            margin-bottom: 8px;
        }
        .chart-plot {
            height: 126px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            align-items: end;
            gap: 7px;
            border-left: 1.2px solid var(--rule);
            border-bottom: 1.2px solid var(--rule);
            padding: 0 6px 4px 8px;
        }
        .method-col {
            display: grid;
            align-items: end;
            justify-items: center;
            gap: 4px;
        }
        .pair-bars {
            display: flex;
            align-items: end;
            gap: 3px;
            height: 98px;
        }
        .bar-success,
        .bar-throughput,
        .bar-eff {
            width: 10px;
            border-radius: 4px 4px 0 0;
        }
        .bar-success.score { background: var(--em); }
        .bar-success.b1 { background: var(--baseline-neutral); }
        .bar-success.b2 { background: var(--baseline-sage); }
        .bar-success.b3 { background: var(--baseline-terracotta); }
        .bar-throughput {
            background: repeating-linear-gradient(
                135deg,
                rgba(28, 28, 25, 0.1) 0 3px,
                rgba(28, 28, 25, 0.32) 3px 6px
            );
            border: 1px solid rgba(28, 28, 25, 0.25);
        }
        .bar-eff.score { background: var(--em); }
        .bar-eff.b1 { background: var(--baseline-neutral); }
        .bar-eff.b2 { background: var(--baseline-sage); }
        .bar-eff.b3 { background: var(--baseline-terracotta); }
        .method-tag {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.54rem;
            color: var(--ink-muted);
            letter-spacing: 0.02em;
            text-transform: uppercase;
            line-height: 1;
        }
        .top-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.5rem;
            color: var(--ink-muted);
            line-height: 1;
        }
        .chart-note {
            margin-top: 7px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.53rem;
            color: var(--ink-muted);
            letter-spacing: 0.02em;
        }
        .split-metrics {
            margin-top: 12px;
            border: 1px solid var(--rule-soft);
            background: var(--panel);
            border-radius: 12px;
            padding: 14px 14px 12px;
            box-shadow: var(--sh-soft);
        }
        .split-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .metric-panel {
            border: 1px solid rgba(28, 28, 25, 0.18);
            border-radius: 10px;
            background: #fff;
            padding: 10px 10px 8px;
        }
        .metric-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.58rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--ink-muted);
            margin-bottom: 6px;
        }
        .metric-axis {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.5rem;
            color: var(--ink-muted);
            margin-bottom: 6px;
        }
        .metric-plot {
            height: 126px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            align-items: end;
            gap: 8px;
            border-left: 1.2px solid var(--rule);
            border-bottom: 1.2px solid var(--rule);
            padding: 0 6px 4px 8px;
        }
        .metric-col {
            display: grid;
            justify-items: center;
            align-items: end;
            gap: 4px;
        }
        .metric-bar {
            width: 16px;
            border-radius: 4px 4px 0 0;
        }
        .metric-bar.score { background: var(--em); }
        .metric-bar.b1 { background: var(--baseline-neutral); }
        .metric-bar.b2 { background: var(--baseline-sage); }
        .metric-bar.b3 { background: var(--baseline-terracotta); }
        .metric-value {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.5rem;
            color: var(--ink-muted);
            line-height: 1;
        }
        .metric-caption {
            margin-top: 7px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.53rem;
            color: var(--ink-muted);
            letter-spacing: 0.02em;
        }
        @media (max-width: 860px) {
            .chart-mockups-grid { grid-template-columns: 1fr; }
            .split-grid { grid-template-columns: 1fr; }
        }

        /* ════════════════ SECTION HEADER (architectural detail) ════════════════ */
        .page-section {
            padding: 44px 0 4px;
            scroll-margin-top: calc(var(--spine-h) + 8px);
        }
        .page-section:first-of-type { padding-top: 48px; }

        .sec-head { margin-bottom: 28px; }
        /* Architectural marker: small green block + thin charcoal beam */
        .sigma-rule {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 22px;
        }
        .sigma-rule::before {
            content: "";
            width: 10px; height: 10px;
            background: var(--em);
            flex-shrink: 0;
        }
        .sigma-rule::after {
            content: "";
            flex: 1; height: 1.5px;
            background: var(--ink);
        }
        .sec-title {
            font-family: 'Fraunces', serif;
            font-variation-settings: 'opsz' 84;
            font-weight: 700;
            font-size: clamp(2.2rem, 4.8vw, 3.4rem);
            line-height: 1.05;
            letter-spacing: -0.025em;
            color: var(--ink);
            margin: 0 0 14px;
        }
        .sec-lead {
            font-family: 'Fraunces', serif;
            font-variation-settings: 'opsz' 36;
            font-style: italic;
            font-weight: 400;
            font-size: clamp(1.05rem, 2vw, 1.32rem);
            color: var(--ink-soft);
            margin: 0;
            max-width: 800px;
            line-height: 1.4;
        }
        .sec-lead.tldr-lead {
            max-width: none;
            white-space: nowrap;
            font-size: clamp(0.86rem, 1.55vw, 1.08rem);
            letter-spacing: -0.005em;
        }
        @media (max-width: 900px) {
            .sec-lead.tldr-lead { white-space: normal; font-size: 1rem; }
        }
        .sec-num, .spec-rule { display: none; }

        .sub-head {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.22rem;
            color: var(--ink);
            margin: 36px 0 14px;
            padding: 4px 0 4px 14px;
            border-left: 3px solid var(--em);
            letter-spacing: -0.005em;
            line-height: 1.3;
        }

        /* ════════════════ BODY ════════════════ */
        .body-text {
            font-family: 'Fraunces', serif;
            font-variation-settings: 'opsz' 14;
            font-size: 1.07rem;
            line-height: 1.78;
            color: var(--ink);
        }
        .body-text strong { font-weight: 700; }
        .body-text em { font-style: italic; }
        .body-text a {
            color: var(--em);
            text-decoration: none;
            border-bottom: 1px dotted var(--em);
            transition: background 0.15s;
        }
        .body-text a:hover { background: var(--em-light); }
        .body-text + .body-text { margin-top: 14px; }
        /* problem statement reads as a lead: shorter measure, a touch larger */
        .problem-lead {
            max-width: 72ch;
            margin-inline: auto;
            text-align: justify;
            text-wrap: pretty;
            hyphens: none;
            font-size: 1.13rem;
            line-height: 1.85;
        }

        .cap {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.78rem;
            color: var(--ink-muted);
            text-align: center;
            margin: 14px 0 0;
            line-height: 1.65;
            padding: 0 12px;
        }
        .cap strong { color: var(--ink); font-weight: 700; }
        .cap em { color: var(--ink-soft); font-style: italic; }

        /* PULL QUOTE */
        .pull-quote {
            position: relative;
            border-left: 3px solid var(--em);
            padding: 6px 0 6px 22px;
            margin: 28px 0 0;
            font-family: 'Fraunces', serif;
            font-variation-settings: 'opsz' 36;
            font-size: 1.2rem;
            font-style: italic;
            color: var(--em-deep);
            line-height: 1.55;
            background: linear-gradient(90deg, rgba(216, 227, 220, 0.55) 0%, transparent 92%);
            border-radius: 14px;
        }
        .pull-quote em { color: var(--em); font-weight: 600; }

        .fig-caption-text {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.78rem;
            color: var(--ink-muted);
            text-align: center;
            width: 100%;
            margin: 14px auto 0;
            line-height: 1.65;
            letter-spacing: 0.02em;
            text-wrap: wrap;
        }
        .fig-caption-text em { color: var(--ink-soft); font-style: italic; }
        .slider-hint {
            margin: 14px 0 6px;
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--ink-muted);
            opacity: 0.85;
        }

        /* ════════════════ FIGURES (floating concrete planes) ════════════════ */
        .polaroid {
            display: block;
            margin: 24px 0;
            background: transparent;
            border: none;
            border-radius: 14px;
            padding: 0;
            transition: transform 0.32s ease;
            position: relative;
        }
        .polaroid:hover { transform: translateY(-2px); }

        .polaroid > a {
            display: block;
            text-decoration: none;
            border-radius: 14px;
            background: #ffffff;
            padding: 24px;
            border: none;
            box-shadow: var(--sh-card);
            transition: box-shadow 0.32s ease;
            box-sizing: border-box;
        }
        .polaroid:hover > a { box-shadow: var(--sh-card-deep); }
        .polaroid > a img,
        .polaroid > a video {
            width: 100%;
            display: block;
            border-radius: 14px;
        }

        .polaroid > img {
            width: 100%;
            display: block;
            background: #ffffff;
            padding: 24px;
            border-radius: 14px;
            border: none;
            box-shadow: var(--sh-card);
            transition: box-shadow 0.32s ease;
            box-sizing: border-box;
        }
        .polaroid > video {
            width: 100%;
            display: block;
            border-radius: 14px;
            background: #000;
            border: none;
            box-shadow: var(--sh-card);
            transition: box-shadow 0.32s ease;
        }
        .polaroid:hover > video,
        .polaroid:hover > img { box-shadow: var(--sh-card-deep); }

        /* flush variant: bare image, no white inset */
        .polaroid.flush > a {
            background: transparent;
            padding: 0;
            border: none;
            box-shadow: none;
        }
        .polaroid.flush > a img {
            border: none;
            box-shadow: var(--sh-card);
            transition: box-shadow 0.32s;
        }
        .polaroid.flush:hover > a img { box-shadow: var(--sh-card-deep); }

        .polaroid figcaption {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.78rem;
            color: var(--ink-muted);
            text-align: center;
            width: 100%;
            margin: 14px auto 0;
            line-height: 1.65;
            padding: 0;
            letter-spacing: 0.02em;
            text-wrap: wrap;
        }
        .polaroid figcaption strong { color: var(--ink); font-weight: 700; }
        .polaroid figcaption em { color: var(--ink-soft); font-style: italic; }

        .polaroid-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            margin: 24px 0 8px;
        }
        @media (max-width: 720px) { .polaroid-row { grid-template-columns: 1fr; } }

        /* ════════════════ METHOD REEL (interactive, video-driven) ════════════════ */
        .reel {
            margin: 18px 0 4px; background: var(--panel);
            border: 1px solid var(--rule); border-radius: 18px;
            box-shadow: var(--sh-card); padding: 14px 16px 14px;
        }

        /* ── top row: headline stats beside the task strip ── */
        .reel-top { display: flex; align-items: stretch; gap: 14px; margin-bottom: 14px; }
        .reel-banner {
            flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 3px;
            padding-right: 14px; border-right: 1px solid var(--rule);
        }
        .rb-stat { font-family: 'Fraunces', serif; font-size: 0.82rem; line-height: 1.2;
            color: var(--ink-soft); white-space: nowrap; }
        .rb-stat b { color: var(--em); font-weight: 700; font-size: 1.0rem; }
        .rb-sep { display: none; }
        .rb-sub { display: none; }

        /* ── task picker: wall of looping thumbnails (overview + selector) ── */
        .reel-tabs { flex: 1 1 auto; align-self: center; display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
        .reel-pick {
            position: relative; padding: 0; border: 0; cursor: pointer; background: #0c0d0f;
            border-radius: 9px; overflow: hidden; aspect-ratio: 1/1;
            box-shadow: 0 0 0 1px var(--rule); transition: transform 0.18s, box-shadow 0.18s;
        }
        .reel-pick-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.25s; }
        /* hover clip sits on top of the poster image and fades in on hover */
        .reel-pick video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
        .reel-pick:hover video { opacity: 1; }
        .reel-pick-lbl {
            position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 5px 4px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.54rem; line-height: 1.15; color: #fff;
            text-align: center; background: linear-gradient(0deg, rgba(0,0,0,0.78), transparent);
            text-shadow: 0 1px 4px rgba(0,0,0,0.7);
        }
        /* small play hint on the paused (non-active) thumbnails, hidden on hover */
        .reel-pick::before {
            content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; top: 6px; right: 7px; z-index: 2;
            color: rgba(255,255,255,0.85); font-size: 0.5rem; opacity: 0.7;
            text-shadow: 0 1px 4px rgba(0,0,0,0.6); transition: opacity 0.18s;
        }
        .reel-pick:hover::before, .reel-pick.active::before { opacity: 0; }
        .reel-pick:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--em-mid), 0 6px 16px rgba(0,0,0,0.2); }
        .reel-pick.active { box-shadow: 0 0 0 2px var(--em), 0 4px 14px rgba(52,79,120,0.3); }
        .reel-pick.active .reel-pick-img { filter: grayscale(0.4) brightness(0.6); }
        .reel-pick.active video { opacity: 0; }
        .reel-pick.active::after {
            content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
            color: #fff; font-size: 0.85rem; opacity: 0.9; text-shadow: 0 1px 6px rgba(0,0,0,0.6);
        }
        @media (max-width: 760px) {
            .reel-tabs { grid-template-columns: repeat(4, 1fr); }
            .reel-pick-lbl { font-size: 0.5rem; }
        }
        /* the picker sits as a tidy, dimmed strip of thumbnails so it stops
           competing with the caption; reach for it and the wall reopens.
           hover-only: touch has no reopen affordance, so it keeps the full grid. */
        @media (hover: hover) {
            /* contiguous filmstrip that fills the row beside the stats; landscape
               crop shows more scene than squares and leaves no void/sparse gaps.
               on hover it grows back into the full square labeled wall. */
            .reel.engaged .reel-tabs {
                grid-template-columns: repeat(8, 1fr);
                gap: 5px; opacity: 0.5; transition: opacity 0.3s ease;
            }
            .reel.engaged .reel-pick { aspect-ratio: 2 / 1; }
            .reel.engaged .reel-tabs:hover { opacity: 1; }
            .reel.engaged .reel-tabs:hover .reel-pick { aspect-ratio: 1 / 1; }
            .reel.engaged .reel-tabs .reel-pick::before { opacity: 0; }
            .reel.engaged .reel-pick-lbl { opacity: 0; transition: opacity 0.25s; }
            .reel.engaged .reel-tabs:hover .reel-pick-lbl { opacity: 1; }
        }

        /* ── side-by-side body: video | mechanism ── */
        .reel-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: stretch; }
        /* on tasks other than the explainer, hide the mechanism and let the video fill */
        /* swap the right panel: mechanism (Credit Card) vs showcase (other tasks) */
        .reel-showcase { display: none; }
        .reel.mech-off .reel-mech { display: none; }
        .reel.mech-off .reel-showcase { display: flex; }
        .reel.mech-off .reel-actlabel { display: none; }
        /* progressive disclosure: the mechanism is meaningless until steering
           exists, so the first real clip fills BOTH columns, then animates down to
           the left as the mechanism grows in from the right when sim begins. */
        .reel-mech { transition: opacity 0.55s ease,
            transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
            padding 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
        @media (min-width: 1025px) {
            /* a fixed proportion gives the video its own stable height, so it can
               resize from full-width to the left column without the row collapsing
               (normally the stage borrows its height from the mechanism panel). */
            .reel:not(.mech-off) .reel-body {
                aspect-ratio: 9 / 4;
                transition: grid-template-columns 0.7s cubic-bezier(0.65, 0, 0.35, 1),
                            gap 0.7s cubic-bezier(0.65, 0, 0.35, 1);
            }
            .reel-stage, .reel-mech { min-width: 0; }
            .reel-mech { overflow: hidden; }
            .reel.pre-steer .reel-body { grid-template-columns: 1fr 0fr; gap: 0; }
            /* collapse the panel's padding too, or its border-box padding keeps
               ~30px of width and leaves the stage short of true full width. */
            .reel.pre-steer .reel-mech {
                opacity: 0; padding-left: 0; padding-right: 0;
                transform: translateX(18px); pointer-events: none;
            }
        }

        /* ── video stage ── */
        .reel-stage {
            position: relative; border-radius: 12px;
            overflow: hidden; background: #0c0d0f;
            box-shadow: 0 0 0 1px var(--rule); transition: box-shadow 0.6s ease;
        }
        .reel-stage.is-real { box-shadow: 0 0 0 1px var(--rule), 0 0 24px -6px rgba(166,122,58,0.5); }
        .reel-stage.is-sim  { box-shadow: 0 0 0 1px var(--rule), 0 0 24px -6px rgba(52,79,120,0.7); }
        /* contain so the whole workspace always shows; blurred copy fills the bars */
        #reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
        .reel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
            z-index: 0; display: block; transform: scale(1.15);
            filter: blur(26px) brightness(0.5) saturate(1.15); pointer-events: none; }
        .reel-stage::after {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background: linear-gradient(180deg, rgba(52,79,120,0), rgba(38,54,79,0.20));
            opacity: 0; transition: opacity 0.6s ease;
        }
        .reel-stage.is-sim::after { opacity: 1; }
        .reel-domain {
            position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
            color: #fff; padding: 7px 12px 8px; border-radius: 12px;
            background: rgba(20,22,26,0.55); backdrop-filter: blur(6px); z-index: 2;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
        }
        .reel-domain .rd-phase {
            font-family: 'Fraunces', serif; font-size: 0.96rem; font-weight: 600; line-height: 1.05;
            color: #fff; transition: color 0.5s;
        }
        .reel-domain.is-score .rd-phase { color: var(--em-glow); }
        .reel-domain .rd-loc {
            display: flex; align-items: center; gap: 6px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em;
            color: rgba(255,255,255,0.82);
        }
        .reel-domain .rd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber-soft); transition: background 0.5s; }
        .reel-domain.sim .rd-dot { background: var(--em-glow); }
        /* bottom scrim so captions stay legible over any frame */
        .reel-stage::before {
            content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 54%;
            background: linear-gradient(0deg, rgba(0,0,0,0.74), rgba(0,0,0,0) 100%);
            pointer-events: none; z-index: 1; opacity: 1; transition: opacity 0.4s;
        }
        .reel.mech-off .reel-stage::before { opacity: 0; }
        .reel-actlabel {
            position: absolute; left: 20px; bottom: 18px; right: 20px; z-index: 2;
            font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,0.98);
            text-shadow: 0 1px 14px rgba(0,0,0,0.78); pointer-events: none;
            transition: opacity 0.32s ease;
        }
        .reel-actlabel b { font-weight: 700; color: #fff; }

        /* ── mechanism column (compact, vertical) ── */
        .reel-mech {
            display: flex; flex-direction: column; justify-content: center; gap: 2px;
            padding: 12px 14px;
            background: var(--panel-tint); border: 1px solid var(--rule); border-radius: 12px;
        }
        .mech-col { display: flex; flex-direction: column; gap: 2px; }
        .mech-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
        .mech-tag { font-family: 'Fraunces', serif; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
        .mech-tag.steer { color: var(--em); }
        #mech-act-tag { color: var(--em); }
        .mech-note, .mech-status { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; color: var(--ink-muted); letter-spacing: 0.02em; white-space: nowrap; }
        .mech-status {
            font-weight: 700; background: var(--panel); border: 1px solid var(--rule);
            border-radius: 999px; padding: 2px 8px; transition: color 0.3s, background 0.3s;
        }
        .mech-status.done { color: #fff; background: var(--em); border-color: var(--em); }
        #mech-z, #mech-a { display: block; width: 100%; height: auto; overflow: visible; }
        #mech-z { aspect-ratio: 300/74; }
        #mech-a { aspect-ratio: 300/118; }

        .mech-zfill { fill: var(--em); opacity: 0.13; transition: opacity 0.3s; }
        .mech-svg-z.locked .mech-zfill { opacity: 0.07; }
        .mech-zline { fill: none; stroke: var(--em); stroke-width: 2.4; stroke-linejoin: round; }
        .mech-svg-z.locked .mech-zline { stroke: var(--em-mid); }
        .mech-supband { fill: none; }
        .mech-mode { opacity: 0.9; stroke: none; }
        .mech-outline { fill: none; stroke: var(--baseline-neutral); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
        .mech-svg.converged .mech-outline { stroke: var(--em); }
        .mech-axis { stroke: var(--ink-soft); stroke-width: 1.1; opacity: 0.3; }

        /* labeled dividers between stages: ─── latent z ─── */
        .mech-flow { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
        .mech-rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--em-glow), transparent); }
        .mech-var { font-family: 'JetBrains Mono', monospace; font-style: italic; font-size: 0.58rem; color: var(--em-mid); letter-spacing: 0.04em; white-space: nowrap; }

        .mech-lens {
            align-self: center; display: inline-flex; align-items: center; gap: 5px;
            font-family: 'Fraunces', serif; font-size: 0.92rem; color: var(--ink);
            background: var(--panel); border: 1.5px solid var(--em-mid);
            border-radius: 9px; padding: 4px 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); white-space: nowrap;
        }
        .mech-lens i { color: var(--em); font-size: 0.7rem; }
        .mech-frozen {
            font-family: 'JetBrains Mono', monospace; font-size: 0.48rem; text-transform: uppercase;
            letter-spacing: 0.08em; color: var(--ink-muted); margin-left: 4px;
        }

        .mech-legend { display: flex; justify-content: center; gap: 12px; margin-top: 1px; font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; color: var(--ink-muted); }
        .mech-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
        .mech-legend b { color: var(--ink-soft); }

        /* The π_steer → π_base → action-distribution diagram was too dense to parse
           mid-playback, so it's removed from the reel. The explainer task now stays
           a full-width video + captions through base and sim; only the success
           result reveals in this panel at deploy. */
        .reel-mech .mech-col,
        .reel-mech .mech-flow,
        .reel-mech .mech-lens,
        .reel-mech .mech-legend { display: none; }

        /* ── credit-card success reveal (success appears at deploy) ── */
        .reel-mech { position: relative; }
        .mech-success {
            position: absolute; inset: 0; display: flex; flex-direction: column;
            justify-content: center; gap: 10px; padding: 14px 16px;
            background: var(--panel-tint); border-radius: 12px;
            opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
        }
        .reel.mech-done .mech-success { opacity: 1; pointer-events: auto; }
        /* shrink + fade the pipeline as it resolves into its result */
        .reel.mech-done .mech-col, .reel.mech-done .mech-flow, .reel.mech-done .mech-lens {
            transform: scale(0.82); opacity: 0; transition: transform 0.5s ease, opacity 0.4s ease;
        }
        .ms-label { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.06em;
            text-transform: uppercase; color: var(--ink-muted); text-align: center; }

        /* ── showcase (per-task result panel for the other tasks) ── */
        .reel-showcase {
            flex-direction: column; gap: 10px; padding: 14px 16px;
            background: var(--panel-tint); border: 1px solid var(--rule); border-radius: 12px;
        }
        .sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
        .sc-task { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
        .sc-diff { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em;
            text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #fff; }
        .sc-diff.easy { background: var(--em-mid); }
        .sc-diff.med  { background: var(--baseline-ochre); }
        .sc-diff.hard { background: var(--baseline-terracotta); }

        /* per-task baseline comparison bars (shared by showcase + credit-card reveal) */
        .sc-bars { display: flex; flex-direction: column; gap: 4px; }
        .scb-row { display: grid; grid-template-columns: 78px 1fr 42px; align-items: center; gap: 8px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; }
        .scb-lbl { color: var(--ink-muted); white-space: nowrap; text-align: right; }
        .scb-track { height: 8px; background: var(--bg-deep); border-radius: 4px; overflow: hidden; }
        .scb-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--baseline-neutral);
            transition: width 0.7s cubic-bezier(0.22,0.7,0.3,1); }
        .scb-val { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
        .scb-score .scb-lbl, .scb-score .scb-val { color: var(--em); font-weight: 700; }
        .scb-score  .scb-fill { background: var(--em); }
        .scb-dsrl   .scb-fill { background: var(--baseline-sage); }
        .scb-resrl  .scb-fill { background: var(--baseline-plum); }
        .scb-base   .scb-fill { background: var(--baseline-neutral); }
        .scb-rialto .scb-fill { background: var(--baseline-ochre); }
        .scb-fpo    .scb-fill { background: var(--baseline-terracotta); }

        .sc-div { height: 1px; background: var(--rule); margin: 3px 0; }

        /* shared easing so the note collapse and tile growth move together */
        .sc-note { font-family: 'Fraunces', serif; font-style: italic; font-size: 0.9rem; line-height: 1.45;
            color: var(--ink-soft); min-height: 2.5em; max-height: 8em; overflow: hidden;
            transition: opacity 0.45s ease, max-height 0.55s cubic-bezier(0.4,0,0.2,1),
                        min-height 0.55s cubic-bezier(0.4,0,0.2,1), margin 0.55s cubic-bezier(0.4,0,0.2,1); }
        /* after the base intro, the note clears and the tiles take its place */
        .reel.sc-expanded .sc-note { opacity: 0; max-height: 0; min-height: 0; margin: 0; }
        .sc-tile { transition: aspect-ratio 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.18s ease, box-shadow 0.18s; }
        .reel.sc-expanded .sc-tile { aspect-ratio: 1 / 1; }
        .sc-chorus { transition: gap 0.55s cubic-bezier(0.4,0,0.2,1); }
        .reel.sc-expanded .sc-chorus { gap: 11px; }

        .sc-chorus { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
        .sc-row { display: flex; align-items: center; gap: 9px; transition: opacity 0.45s; }
        .sc-row.dim { opacity: 0.3; }
        .sc-row-lbl { flex: none; width: 42px; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
            font-weight: 700; letter-spacing: 0.03em; text-align: right; }
        #sc-row-base  .sc-row-lbl { color: var(--baseline-terracotta); }
        #sc-row-score .sc-row-lbl { color: var(--em); }
        .sc-tiles { display: flex; gap: 7px; flex: 1; min-width: 0; }
        .sc-tile { position: relative; flex: 1; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden;
            cursor: pointer; background: #0c0d0f; box-shadow: 0 0 0 1px var(--rule);
            transition: transform 0.18s, box-shadow 0.18s; }
        .sc-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .sc-tile::after { content: '\f00e'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; right: 5px; bottom: 4px; font-size: 0.6rem; color: rgba(255,255,255,0.8);
            opacity: 0; transition: opacity 0.18s; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
        .sc-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--em-mid), 0 4px 12px rgba(0,0,0,0.18); }
        .sc-tile:hover::after { opacity: 1; }
        /* per-clip outcome: green ring + ✓ for success, terracotta + ✗ for fail */
        .sc-tile.win  { box-shadow: 0 0 0 1.5px var(--baseline-sage); }
        .sc-tile.fail { box-shadow: 0 0 0 1.5px var(--baseline-terracotta); }
        .sc-tile.win:hover  { box-shadow: 0 0 0 2px var(--baseline-sage), 0 4px 12px rgba(0,0,0,0.18); }
        .sc-tile.fail:hover { box-shadow: 0 0 0 2px var(--baseline-terracotta), 0 4px 12px rgba(0,0,0,0.18); }
        .sc-out {
            position: absolute; top: 4px; left: 4px; z-index: 2;
            width: 15px; height: 15px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.6rem; font-weight: 700; color: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.35);
        }
        .sc-out.win  { background: var(--baseline-sage); }
        .sc-out.fail { background: var(--baseline-terracotta); }

        /* ── reward ── */
        .reel-meta { display: flex; align-items: center; gap: 16px; margin: 12px 2px 4px; }
        .reel-reward { display: flex; align-items: center; gap: 8px; flex: 1; }
        .rr-label { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
        .rr-bar { flex: 1; height: 6px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; }
        .rr-fill { height: 100%; width: 10%; border-radius: 3px; background: linear-gradient(90deg, var(--baseline-terracotta), var(--baseline-ochre) 45%, var(--em)); transition: width 0.15s linear; }

        /* ── timeline ── */
        .reel-controls { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 0 2px; }
        .reel-play {
            flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule);
            background: var(--panel-tint); color: var(--em); cursor: pointer; font-size: 0.8rem;
            display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s;
        }
        .reel-play:hover { background: var(--em); color: #fff; }
        .reel-track { position: relative; flex: 1; height: 36px; cursor: pointer; touch-action: none; }
        .reel-rail { position: absolute; top: 11px; left: 0; right: 0; height: 6px; transform: translateY(-50%); background: var(--bg-deep); border-radius: 3px; }
        .reel-ticks { position: absolute; top: 0; left: 0; right: 0; height: 22px; }
        .reel-tick { position: absolute; top: 4px; width: 2px; height: 14px; transform: translateX(-50%); background: var(--panel); border-radius: 1px; }
        .reel-fill { position: absolute; top: 11px; left: 0; height: 6px; transform: translateY(-50%); background: var(--em); border-radius: 3px; width: 0; }
        .reel-thumb { position: absolute; top: 11px; left: 0; width: 15px; height: 15px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--em); border: 2px solid var(--panel); box-shadow: 0 1px 5px rgba(0,0,0,0.3); }
        .reel-phaselabels { position: absolute; top: 21px; left: 0; right: 0; height: 26px; }
        .reel-steplab { position: absolute; top: 0; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; color: var(--ink-muted); white-space: nowrap; }
        /* bold end-caps: Base (warm) → SCORE (indigo) */
        .reel-cap { position: absolute; top: -1px; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
        .reel-cap.base  { color: var(--amber); }
        .reel-cap.score { color: var(--em); }
        /* one centered axis label so the numbers read as training steps */
        .reel-axislabel { position: absolute; top: 13px; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 0.54rem; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.75; white-space: nowrap; }

        /* Stack the reel into one full-width column on anything narrower than a
           laptop. Flexbox (not grid) + explicit width:100% so the video stage —
           whose children are all absolutely positioned — can never collapse to
           zero width inside a shared row (which is what broke it on real iOS). */
        @media (max-width: 1024px) {
            .reel-body { display: flex; flex-direction: column; }
            .reel-stage, .reel-mech, .reel-showcase { width: 100%; }
            .reel-stage { aspect-ratio: 4/3; }
            /* the blurred backdrop is disabled on touch (JS) to free a decoder;
               the dark stage shows behind any letterboxed sim clip instead */
            .reel-bg { display: none; }
            .reel-actlabel { font-size: 1.02rem; }
            .reel-steplab { font-size: 0.5rem; }
            /* the success reveal is absolutely positioned over the mechanism, so
               the panel must be tall enough to hold the bars + two rows of clips */
            .reel-mech { min-height: 430px; }
            /* mobile progressive disclosure: stacked, so the mechanism reveals by
               growing in below the video when sim training begins (no side resize). */
            .reel:not(.mech-off) .reel-mech {
                max-height: 900px; overflow: hidden;
                transition: max-height 0.6s ease, opacity 0.5s ease,
                            margin 0.5s ease, padding 0.5s ease;
            }
            .reel.pre-steer .reel-body { gap: 0; }
            .reel.pre-steer .reel-mech {
                max-height: 0; min-height: 0; opacity: 0; margin: 0;
                padding-top: 0; padding-bottom: 0; pointer-events: none;
            }
        }

        @media (max-width: 560px) {
            .reel { padding: 12px 11px 12px; border-radius: 14px; }
            /* stack the stats above the full task grid; no side divider */
            .reel-top { flex-direction: column; gap: 10px; }
            .reel-banner { flex-direction: row; flex-wrap: wrap; justify-content: center;
                gap: 4px 12px; padding-right: 0; border-right: 0; }
            .rb-stat { font-size: 0.9rem; }
            .rb-stat b { font-size: 1.05rem; }
            /* touch: a swipeable filmstrip — one short scrolling row, tap to pick.
               a partial thumbnail at the edge hints there's more to swipe. */
            .reel-tabs {
                align-self: stretch; display: flex; flex-wrap: nowrap; gap: 7px;
                overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
                scroll-snap-type: x proximity; padding-bottom: 2px; scrollbar-width: none;
            }
            .reel-tabs::-webkit-scrollbar { display: none; }
            /* the strip recedes so the hero video leads; the active task stays
               bright. desktop does this on hover, which touch can't trigger. */
            .reel-pick { flex: 0 0 86px; scroll-snap-align: start;
                opacity: 0.45; transition: opacity 0.25s; }
            .reel-pick.active { opacity: 1; }
            .reel-pick-img { filter: saturate(0.82); }
            .reel-pick-lbl { font-size: 0.46rem; padding: 10px 3px 3px; }
            .reel-mech { padding: 12px 12px; min-height: 460px; }
            .reel-showcase { padding: 12px; }
            /* distributions get a touch more height so they read on a phone */
            #mech-z { aspect-ratio: 300/86; }
            #mech-a { aspect-ratio: 300/130; }
            .mech-legend { gap: 9px; font-size: 0.52rem; }
            /* tighten the per-task bars so the label column doesn't eat the bar */
            .scb-row { grid-template-columns: 64px 1fr 36px; gap: 6px; font-size: 0.56rem; }
            .sc-row-lbl { width: 36px; font-size: 0.56rem; }
            .sc-task { font-size: 0.95rem; }
            .sc-note { font-size: 0.84rem; }
            /* timeline: shrink the play button and labels so nothing collides */
            .reel-controls { gap: 10px; margin-top: 18px; }
            .reel-play { width: 30px; height: 30px; font-size: 0.72rem; }
            .reel-cap { font-size: 0.54rem; }
            .reel-axislabel { font-size: 0.48rem; }
        }

        /* ════════════════ EMERALD CARD (garden-view focal panel) ════════════════ */
        .emerald-card {
            position: relative;
            background: linear-gradient(170deg, var(--em-deep) 0%, #1d2a3f 100%);
            color: #e3ece6;
            border: 1px solid var(--rule);
            border-radius: 16px;
            padding: 26px 28px;
            box-shadow: var(--sh-emerald);
            transition: transform 0.28s cubic-bezier(.16,.7,.3,1), box-shadow 0.28s;
            overflow: hidden;
        }
        .emerald-card::before {
            content: "";
            position: absolute; inset: 0;
            background: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(158, 177, 202, 0.20) 0%, transparent 60%);
            pointer-events: none;
        }
        .emerald-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 22px 48px rgba(38, 54, 79, 0.32);
        }
        .emerald-card > * { position: relative; z-index: 1; }

        /* LIGHT PANEL CARD (concrete + green left rule) — used for TL;DR + Method pillars */
        .panel-card {
            position: relative;
            background: var(--panel);
            color: var(--ink);
            border: 1px solid var(--rule-soft);
            border-left: 3px solid var(--em);
            border-radius: 14px;
            padding: 24px 28px;
            box-shadow: var(--sh-card);
            transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s;
            overflow: hidden;
        }
        .panel-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--sh-card-deep);
            border-color: var(--em);
        }
        .panel-card .card-tag { color: var(--em); }
        .panel-card .card-title { color: var(--ink); }
        .panel-card p { color: var(--ink-soft); }
        .panel-card p strong { color: var(--ink); }
        .panel-card .card-icon { color: var(--em); opacity: 0.5; }

        /* ════════════════ COLLAPSIBLE METHOD DETAILS ════════════════ */
        .method-details { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
        .method-detail {
            background: var(--panel);
            border: 1px solid var(--rule-soft);
            border-left: 3px solid var(--rule-soft);
            border-radius: 12px;
            overflow: hidden;
            transition: border-color 0.28s, box-shadow 0.28s;
        }
        .method-detail:hover { border-left-color: var(--em); }
        .method-detail[open] { border-left-color: var(--em); box-shadow: var(--sh-card); }
        .method-detail summary {
            list-style: none;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 15px 22px;
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.05rem;
            color: var(--ink);
            letter-spacing: -0.005em;
        }
        .method-detail summary::-webkit-details-marker { display: none; }
        .method-detail summary::before {
            content: '+';
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px; height: 22px;
            border-radius: 7px;
            border: 1px solid var(--rule-soft);
            color: var(--em);
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            font-size: 0.95rem;
            line-height: 1;
            transition: background 0.2s, border-color 0.2s, color 0.2s;
        }
        .method-detail[open] summary::before {
            content: '\2212';
            background: var(--em-light);
            border-color: var(--em);
        }
        .method-detail p {
            margin: 0;
            padding: 0 22px 18px 58px;
            color: var(--ink-soft);
            font-size: 0.92rem;
            line-height: 1.6;
        }
        .method-detail p strong { color: var(--ink); }

        .card-icon {
            position: absolute;
            top: 18px;
            right: 22px;
            font-size: 1.6rem;
            color: var(--em-glow);
            opacity: 0.6;
            line-height: 1;
            z-index: 2;
            font-weight: 400;
        }
        .card-tag {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--em-glow);
            margin: 0 0 10px;
        }
        /* numbered / flagged step badge in card headers */
        .card-step { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; }
        .card-step .card-tag { margin: 0; }
        .step-num {
            flex: none;
            display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 30px;
            border-radius: 9px;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700; font-size: 0.98rem; line-height: 1;
            color: var(--em-glow);
            background: rgba(158, 177, 202, 0.16);
            border: 1px solid rgba(158, 177, 202, 0.55);
        }
        .step-num.warn  { color: var(--baseline-terracotta); border-color: rgba(181, 107, 92, 0.55); background: rgba(181, 107, 92, 0.12); }
        .step-num.warn2 { color: var(--baseline-ochre);      border-color: rgba(176, 139, 69, 0.55); background: rgba(176, 139, 69, 0.12); }
        .card-title {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.22rem;
            line-height: 1.25;
            margin: 0 0 10px;
            color: #ffffff;
            letter-spacing: -0.01em;
        }
        .emerald-card p {
            font-family: 'Fraunces', serif;
            font-size: 0.97rem;
            line-height: 1.66;
            color: rgba(227, 236, 230, 0.92);
            margin: 0;
        }
        .emerald-card p strong { color: #fff; font-weight: 700; }
        .emerald-card p em { color: var(--em-glow); font-style: italic; }
        .emerald-card a { color: var(--em-glow); text-decoration: none; border-bottom: 1px dotted var(--em-glow); }
        .emerald-card code {
            background: rgba(255,255,255,0.10);
            color: #d8eee0;
            padding: 0.05em 0.4em;
            border-radius: 14px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.86em;
            border: 1px solid rgba(255,255,255,0.08);
        }

        .card-grid { display: grid; gap: 18px; margin: 18px 0; }
        .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
        .card-grid-2 { grid-template-columns: repeat(2, 1fr); }
        .card-grid-tldr {
            grid-template-columns: 1.5fr 1fr;
            gap: 16px;
        }
        .card-grid-tldr > .emerald-card-wide {
            padding: 28px 32px;
        }
        .card-grid-tldr .card-title {
            font-size: 1.16rem;
        }
        .card-grid-tldr .emerald-card-wide .card-title {
            font-size: 1.36rem;
        }
        .card-formula {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid rgba(158, 177, 202, 0.22);
            font-family: 'Fraunces', serif;
            font-style: italic;
            font-size: 1.06rem;
            color: var(--em-glow);
            letter-spacing: 0.01em;
        }
        .card-formula .formula-legend {
            display: block;
            margin-top: 8px;
            font-family: 'JetBrains Mono', monospace;
            font-style: normal;
            font-size: 0.72rem;
            color: rgba(227, 236, 230, 0.55);
            letter-spacing: 0.04em;
            line-height: 1.5;
        }
        @media (max-width: 760px) {
            .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; }
            .card-grid-tldr { grid-template-columns: 1fr; }
            .card-grid-tldr > .emerald-card-wide { grid-column: 1; padding: 24px 26px; }
        }

        /* RESULT CALLOUT (concrete plane with wood accent) */
        .result-callout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
        @media (max-width: 600px) { .result-callout-row { grid-template-columns: 1fr; } }
        .result-callout {
            display: flex; align-items: center; gap: 22px;
            padding: 22px 28px;
            background: var(--panel);
            border: 1px solid var(--rule-soft);
            border-left: 3px solid var(--em);
            position: relative;
            box-shadow: var(--sh-card);
            border-radius: 14px;
            overflow: hidden;
        }
        .result-callout::before { display: none; }
        .result-callout .big {
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            font-feature-settings: 'tnum' 1, 'ss01' 1;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--em);
            line-height: 1;
            white-space: nowrap;
            letter-spacing: -0.04em;
        }
        .result-callout .desc {
            font-family: 'Fraunces', serif;
            font-size: 0.98rem;
            color: var(--ink-soft);
            line-height: 1.5;
            flex: 1;
            min-width: 200px;
        }
        .result-callout .desc strong { color: var(--ink); }
        .result-callout.xl-callout { padding: 26px 30px; }
        .result-callout.xl-callout .big { font-size: 3rem; }

        /* TABS — square-edged signage */
        .tab-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
        .tab-btn,
        .rw-tab {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.70rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 6px 12px;
            border: 1.5px solid var(--rule);
            border-radius: 999px;
            background: var(--bg);
            color: var(--ink);
            cursor: pointer;
            transition: all 0.18s ease;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .tab-btn:hover, .rw-tab:hover { background: var(--em-light); color: var(--em); border-color: var(--em); }
        .tab-btn.active, .rw-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
        .rw-tabs { display: flex; flex-wrap: nowrap; gap: 6px; margin: 14px 0; overflow-x: auto; scrollbar-width: none; }
        .rw-tabs::-webkit-scrollbar { display: none; }

        /* SIGMA SLIDER */
        .sweep-card {
            background: linear-gradient(170deg, var(--em-deep) 0%, #182334 100%);
            padding: 28px 28px 22px;
        }
        .sweep-card .sigma-track-wrap { margin-top: 22px; }
        #sweep-grid.grid-composite { max-width: 520px; margin: 0 auto; }
        #sweep-grid.grid-multi {
            display: grid; grid-template-columns: repeat(5, 1fr);
            gap: 6px; max-width: 100%; margin: 0 auto;
        }
        @media (max-width: 700px) { #sweep-grid.grid-multi { grid-template-columns: repeat(3, 1fr); } }
        #sweep-grid { transition: opacity 0.16s; min-height: 220px; }
        .sweep-cell {
            border-radius: 10px;
            overflow: hidden;
            background: #000;
            line-height: 0;
            border: 1px solid rgba(255,255,255,0.18);
        }
        .sweep-cell video { width: 100%; display: block; border-radius: 8px; }
        .shimmer {
            background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.4s infinite;
            border: 1px solid rgba(255,255,255,0.10);
        }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .sigma-track-wrap { margin: 22px 0 8px; }
        .sigma-labels {
            position: relative; height: 1.3em; margin-bottom: 12px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.68rem;
            color: rgba(227, 236, 230, 0.65);
            letter-spacing: 0.04em;
        }
        .sigma-labels span { position: absolute; white-space: nowrap; transform: translateX(-50%); }
        .sigma-labels span:first-child { transform: none; }
        .sigma-labels span:last-child { transform: translateX(-100%); }
        .sigma-labels span:nth-child(1) { left: 0%; color: var(--em-glow); }
        .sigma-labels span:nth-child(2) { left: 25%; }
        .sigma-labels span:nth-child(3) { left: 50%; }
        .sigma-labels span:nth-child(4) { left: 75%; }
        .sigma-labels span:nth-child(5) { left: 100%; color: var(--amber-soft); }
        .sigma-track {
            position: relative;
            height: 4px;
            background: linear-gradient(90deg,
                var(--em-glow) 0%,
                var(--em-mid) 28%,
                var(--walnut-soft) 60%,
                var(--amber) 100%);
            cursor: pointer;
            border-radius: 14px;
        }
        .sigma-thumb {
            position: absolute;
            top: 50%; left: 0%;
            transform: translate(-50%, -50%);
            width: 22px; height: 22px;
            background: #fff;
            border: 2px solid var(--em-deep);
            border-radius: 50%;
            cursor: grab;
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
        }
        .sigma-thumb:active { cursor: grabbing; transform: translate(-50%,-50%) scale(0.94); }
        .sigma-readout {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--em-glow);
            text-align: center;
            margin-top: 16px;
        }
        .sigma-readout strong { color: #fff; }
        .sigma-readout span { color: rgba(227, 236, 230, 0.7); font-weight: 400; font-style: italic; }

        /* PCD STRIP */
        .emerald-card.pcd-strip { padding: 28px 28px 22px; margin: 22px 0; }
        .emerald-card .pcd-divider {
            display: flex; align-items: center; gap: 14px;
            margin: 22px auto 18px;
            max-width: 560px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.76rem;
            font-style: italic;
            color: rgba(227, 236, 230, 0.75);
        }
        .emerald-card .pcd-divider div {
            flex: 1; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(227, 236, 230, 0.3), transparent);
        }
        .pcd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .pcd-cell { text-align: center; }
        .pcd-cell img {
            width: 100%;
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 12px;
            background: #fff;
        }
        .pcd-cell .step {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(227, 236, 230, 0.75);
            margin-top: 8px;
        }
        .emerald-card .ref-rollout {
            max-width: 520px;
            margin: 0 auto;
            border-radius: 8px;
            overflow: hidden;
        }
        .emerald-card .ref-rollout video {
            width: 100%; display: block;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.18);
        }
        .emerald-card .cap-on-card {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.76rem;
            color: rgba(227, 236, 230, 0.75);
            text-align: center;
            margin: 14px auto 0;
            padding-top: 12px;
            border-top: 1px solid rgba(255,255,255,0.1);
            line-height: 1.65;
            letter-spacing: 0.02em;
            text-wrap: wrap;
        }
        .emerald-card .cap-on-card em { color: rgba(227, 236, 230, 0.95); font-style: italic; }
        .emerald-card .cap-on-card strong { color: #fff; }

        /* STATIC VIDS */
        .static-vid {
            width: 100%; display: block; background: #000;
            opacity: 0; transition: opacity 0.4s;
            border-radius: 14px;
        }
        .static-vid.ready { opacity: 1; }

        /* ROLLOUTS */
        .rollout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
        @media (max-width: 600px) { .rollout-grid { grid-template-columns: 1fr; } }
        /* distractor sim-vs-hardware comparison: labeled stage rows */
        .distractor-compare { margin: 18px 0 4px; }
        .dc-stage { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
        .dc-stage span {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--em);
            white-space: nowrap;
        }
        .dc-stage::after { content: ""; flex: 1; height: 1px; background: var(--rule-soft); }
        .rollout-col {
            border: 1px solid var(--rule-soft);
            border-radius: 14px;
            padding: 14px;
            background: var(--panel);
            box-shadow: var(--sh-soft);
            overflow: hidden;
        }
        .rollout-col.emerald-col {
            background: linear-gradient(170deg, var(--em-deep) 0%, #1d2a3f 100%);
            color: #e3ece6;
            border-color: var(--rule);
            position: relative;
            overflow: hidden;
            box-shadow: var(--sh-emerald);
        }
        .rollout-col.emerald-col::before {
            content: "";
            position: absolute; inset: 0;
            background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(158,177,202,0.20) 0%, transparent 60%);
            pointer-events: none;
        }
        .rollout-col-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-align: left;
            margin-bottom: 12px;
            color: var(--em);
            position: relative; z-index: 1;
        }
        .rollout-col.emerald-col .rollout-col-title { color: var(--em-glow); }
        .rollout-vid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: relative; z-index: 1; }
        .rollout-vid-grid.portrait { grid-template-columns: 1fr; }
        .rollout-vid-grid.portrait video { aspect-ratio: 4/3; }
        .rollout-vid-grid.large { grid-template-columns: 1fr; }
        .rollout-vid-grid.large video { aspect-ratio: 16/9; }
        /* per-task analysis captions */
        .rollout-note {
            margin-top: 12px;
            font-size: 0.85rem;
            line-height: 1.5;
            position: relative;
            z-index: 1;
        }
        .rollout-note .note-tag {
            display: block;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .base-note { color: var(--ink-soft); }
        .base-note .note-tag { color: #b5532f; }
        .score-note { color: var(--em-light); }
        .score-note .note-tag { color: var(--em-glow); }
        .rollout-cell {
            border-radius: 8px;
            overflow: hidden;
            background: #000;
            line-height: 0;
            cursor: zoom-in;
            position: relative;
            border: 1px solid var(--rule);
            transition: transform 0.22s, box-shadow 0.22s;
        }
        .rollout-col.emerald-col .rollout-cell { border-color: rgba(255,255,255,0.18); }
        .rollout-cell:hover { transform: scale(1.04); box-shadow: 0 6px 16px rgba(0,0,0,0.32); z-index: 2; }
        .rollout-cell::after {
            content: '⤢';
            position: absolute; bottom: 4px; right: 5px;
            font-size: 0.7rem; color: rgba(255,255,255,0.7);
            pointer-events: none;
        }
        .rollout-cell video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 8px; }

        .learning-wrap {
            border: 1px solid var(--rule-soft);
            border-radius: 14px;
            overflow: hidden;
            background: var(--panel);
            margin-top: 14px;
            box-shadow: var(--sh-soft);
        }
        .learning-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-align: left;
            padding: 12px 16px;
            border-bottom: 1px solid var(--rule-soft);
            color: var(--em);
            background: var(--bg);
        }
        #rw-learning-video { width: 100%; display: block; background: #000; }

        /* QUALITATIVE */
        .tm-anim-card { padding: 26px 28px 20px; }
        .tm-anim-wrap { display: flex; gap: 28px; align-items: flex-start; }
        @media (max-width: 760px) { .tm-anim-wrap { flex-direction: column; align-items: stretch; } }
        .tm-frame-col { display: flex; flex-direction: column; align-items: center; }
        .tm-frame-wrap {
            position: relative; display: inline-block;
            border: 1px solid rgba(255,255,255,0.22);
            border-radius: 14px;
            overflow: hidden;
            background: #000;
        }
        #tm-current-frame {
            width: 280px; aspect-ratio: 400 / 340;
            display: block; transition: opacity 0.15s;
            background: #000; object-fit: cover; flex-shrink: 0;
        }
        @media (max-width: 760px) {
            .tm-frame-wrap { display: block; width: 100%; }
            #tm-current-frame { width: 100%; height: auto; }
        }
        .tm-chart-area { flex: 1; min-width: 0; }
        #tm-tval {
            font-family: 'Fraunces', serif;
            font-variation-settings: 'opsz' 60;
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--em-glow);
            line-height: 1;
            margin-bottom: 10px;
            letter-spacing: -0.025em;
        }
        #tm-chart { width: 100%; height: auto; display: block; overflow: visible; }
        #tm-chunk-counter {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem;
            color: rgba(227, 236, 230, 0.7);
            margin-top: 10px;
            text-align: center;
            letter-spacing: 0.04em;
        }
        #tm-filmstrip {
            display: flex; gap: 6px; margin-top: 18px;
            overflow-x: auto; padding-bottom: 4px;
            scrollbar-width: thin;
            justify-content: center;
        }
        .tm-thumb {
            flex-shrink: 0;
            width: 80px;
            aspect-ratio: 400/340;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.22);
            cursor: pointer;
            transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
            background: #000;
        }
        .tm-thumb img {
            width: 100%; height: 100%;
            object-fit: cover; display: block;
            filter: brightness(0.7);
            transition: filter 0.25s;
        }
        .tm-thumb:hover img { filter: brightness(0.9); }
        .tm-thumb.active { border-color: var(--em-glow); transform: scale(1.06); border-width: 2px; }
        .tm-thumb.active img { filter: brightness(1.05); }
        .tm-play-btn {
            display: inline-flex; align-items: center; gap: 7px;
            background: rgba(255,255,255,0.06);
            color: #e3ece6;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 999px;
            padding: 7px 16px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.18s, color 0.18s, border-color 0.18s;
            margin-top: 14px;
        }
        .tm-play-btn:hover { background: rgba(158,177,202,0.24); color: #fff; border-color: var(--em-glow); }

        .card-instruction {
            text-align: center;
            font-family: 'Fraunces', serif;
            font-variation-settings: 'opsz' 36;
            font-style: italic;
            font-weight: 400;
            font-size: 1.55rem;
            color: var(--em-glow);
            margin: -18px 0 14px;
            line-height: 1.35;
        }

        /* KEY INSIGHT (light callout — concrete with green band) */
        .key-insight {
            display: block;
            position: relative;
            padding: 24px 28px;
            margin: 24px 0 0;
            background: var(--panel);
            border: 1px solid var(--rule-soft);
            border-left: 3px solid var(--em);
            border-radius: 14px;
            box-shadow: var(--sh-card);
        }
        .key-insight .ki-label {
            display: inline-block;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--em);
            margin-bottom: 12px;
        }
        .key-insight p {
            font-family: 'Fraunces', serif;
            font-variation-settings: 'opsz' 36;
            font-size: 1.14rem;
            line-height: 1.55;
            color: var(--ink);
            margin: 0;
        }
        .key-insight strong { color: var(--em-deep); font-weight: 700; }
        .key-insight em { color: var(--em); font-style: italic; font-weight: 600; }

        /* The Problem: lead with the failure clip (motion is the lure), then the
           one-line takeaway, then the detail demoted for those who want it. */
        .problem-hook { margin: 22px auto 0; max-width: 800px; }
        .problem-hook video {
            width: 100%; display: block; border-radius: 14px;
            background: #0c0d0f; box-shadow: var(--sh-card);
        }
        /* full-width text; drop the box's one-sided blue accent so the full-width
           takeaway is symmetric instead of pulled off to the side. */
        #sec-problem .key-insight {
            border-left-width: 1px; border-left-color: var(--rule-soft);
        }

        /* METHOD: static overview figure (the three acts at a glance) sits above
           the interactive reel so the gist reads in one look, no video required. */
        /* ── live method figure (rebuilt in HTML/CSS/SVG) ── */
        .method-figure { margin: 0 auto 26px; max-width: 1120px; }
        .mfx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .mfx-panel {
            position: relative; display: flex; flex-direction: column;
            background: var(--panel); border: 1px solid var(--rule-soft); border-radius: 14px;
            padding: 12px 13px 13px; box-shadow: var(--sh-card);
        }
        .mfx-panel.is-live { border-color: var(--em-mid); box-shadow: 0 0 0 1px var(--em-mid), 0 10px 28px -14px rgba(52,79,120,0.5); }
        .mfx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 34px; }
        .mfx-badge {
            flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--em); color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.78rem;
        }
        .mfx-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 0.96rem; line-height: 1.12; color: var(--em-deep); }
        .mfx-live {
            margin-left: auto; flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 0.54rem; font-weight: 700;
            letter-spacing: 0.12em; text-transform: uppercase; color: var(--em);
            padding: 2px 7px; border: 1px solid var(--em-mid); border-radius: 999px;
            display: inline-flex; align-items: center; gap: 5px;
        }
        .mfx-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--em); animation: mfxPulse 1.4s ease-in-out infinite; }
        @keyframes mfxPulse { 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: 0.35; transform: scale(0.7); } }

        .mfx-body { display: grid; grid-template-columns: 1.34fr 0.78fr; gap: 12px; align-items: start; }
        .mfx-body > * { min-width: 0; }   /* let tracks shrink so nothing pushes over the photo */
        /* align-self:start + width-driven aspect-ratio: the photo's height comes from
           its width, so it can't stretch tall and widen over the column. */
        .mfx-photo { align-self: center; width: 100%; border-radius: 9px; overflow: hidden; background: #0c0d0f; aspect-ratio: 4 / 3.4; }
        .mfx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        /* stretch (not center): block children fill the column width exactly, so a
           wide SVG can never center-overflow left onto the photo. overflow:hidden
           is a belt-and-suspenders clip. */
        .mfx-col { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; min-width: 0; overflow: hidden; }
        .mfx-col > .mfx-lab, .mfx-col > .mfx-box, .mfx-col > .mfx-arrow { align-self: center; }

        .mfx-lab { font-family: 'Fraunces', serif; font-size: 0.74rem; color: var(--ink-soft); line-height: 1; }
        .mq { white-space: nowrap; }
        .mq i { font-style: italic; }
        .mq sub { font-size: 0.7em; font-weight: 500; }
        .mfx-bell { width: 100%; max-width: 100%; min-width: 0; height: 38px; display: block; overflow: hidden; }
        .mfx-act  { width: 100%; max-width: 100%; min-width: 0; height: 44px; display: block; overflow: hidden; }
        .mfx-arrow {
            width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
            border-top: 8px solid var(--em-mid); margin: 0;
        }
        .mfx-arrow.flow { animation: mfxArrow 1.3s ease-in-out infinite; }
        @keyframes mfxArrow { 0%,100%{ opacity: 0.35; transform: translateY(-2px); } 50%{ opacity: 1; transform: translateY(1px); } }
        .mfx-box {
            display: inline-flex; align-items: center; gap: 8px; position: relative;
            font-family: 'Fraunces', serif; font-size: 0.76rem; color: var(--ink);
            background: linear-gradient(180deg, #fbfcfe, #eef1f6); border: 1.5px solid var(--em-mid);
            border-radius: 8px; padding: 5px 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); white-space: nowrap;
        }
        .mfx-frozen { color: var(--em-mid); font-size: 0.66rem; }

        .mfx-cap {
            margin-top: 11px; font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; line-height: 1.5;
            color: var(--ink-muted); text-align: center;
        }
        .mfx-cap b { font-weight: 700; color: var(--ink-soft); }
        .mfx-cap .t-good { color: var(--em); }
        .mfx-cap .t-bad  { color: var(--baseline-terracotta); }
        .mfx-cap .t-slow { color: var(--baseline-ochre); }

        .method-figure .cap { margin-top: 14px; text-align: center; }

        @media (max-width: 760px) {
            .mfx { grid-template-columns: 1fr; gap: 12px; }
            .mfx-bell { height: 44px; } .mfx-act { height: 52px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .mfx-live::before, .mfx-arrow.flow { animation: none; }
        }

        /* COMPARE ROW */
        .compare-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
        .compare-row > div { flex: 1 1 280px; text-align: center; }
        .compare-row .label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-muted);
            margin-bottom: 8px;
        }

        /* BIBTEX */
        .bibtex-wrap { position: relative; }
        .bibtex-box {
            background: linear-gradient(170deg, var(--em-deep) 0%, #1d2a3f 100%);
            color: #e3ece6;
            border: 1px solid rgba(158, 177, 202, 0.18);
            border-radius: 16px;
            padding: 22px 26px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.84rem;
            line-height: 1.7;
            overflow-x: auto;
            white-space: pre;
            margin: 0;
            box-shadow: var(--sh-card);
        }
        .bibtex-copy {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255,255,255,0.06);
            color: #e3ece6;
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 8px;
            padding: 6px 14px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.18s, color 0.18s, border-color 0.18s;
            z-index: 2;
        }
        .bibtex-copy:hover { background: var(--em); color: #fff; border-color: var(--em); }
        .bibtex-copy.copied { background: var(--em); color: #fff; border-color: var(--em); }

        /* SCORE */
        code:not(.instruction-box) {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.86em;
            background: var(--panel);
            color: var(--ink);
            padding: 0.1em 0.42em;
            border-radius: 4px;
            border: 1px solid var(--rule-soft);
        }
        code.instruction-box {
            display: block;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.82rem;
            background: var(--panel);
            border: 1px solid var(--rule-soft);
            border-radius: 8px;
            padding: 8px 14px;
            color: var(--ink);
            margin: 0 auto 12px;
            max-width: 640px;
        }

        /* FOOTER (concrete plinth) */
        footer {
            margin: 96px 0 0;
            padding: 36px 32px 44px;
            border-top: 1.5px solid var(--rule);
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.74rem;
            color: var(--ink-muted);
            background: var(--bg);
            letter-spacing: 0.04em;
        }
        footer a { color: var(--em); text-decoration: none; }
        footer a:hover { text-decoration: underline; }

        /* LIGHTBOX */
        .lb {
            position: fixed; inset: 0; background: rgba(28, 28, 25, 0.92);
            display: flex; align-items: center; justify-content: center;
            z-index: 9999; opacity: 0; pointer-events: none;
            transition: opacity 0.2s;
        }
        .lb.open { opacity: 1; pointer-events: auto; }
        .lb img { max-width: 92vw; max-height: 90vh; border: 1.5px solid var(--bg); border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
        .lb-x {
            position: absolute; top: 14px; right: 18px;
            background: rgba(255,255,255,0.16); border: none;
            color: #fff; width: 32px; height: 32px;
            border-radius: 50%; font-size: 16px; cursor: pointer;
        }
        #lb-vid { max-width: 90vw; max-height: 85vh; border-radius: 10px; display: none; }

        /* SCROLL FADE */
        .fade-in {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.7s cubic-bezier(.16,.7,.3,1), transform 0.7s cubic-bezier(.16,.7,.3,1);
        }
        .fade-in.visible { opacity: 1; transform: none; }
        @media (prefers-reduced-motion: reduce) {
            .fade-in { opacity: 1; transform: none; transition: none; }
            .spine-stop.active .dot { animation: none; }
        }

        /* FOCUS */
        .spine-stop:focus-visible .dot,
        .qlink:focus-visible,
        .tab-btn:focus-visible,
        .rw-tab:focus-visible,
        .tm-play-btn:focus-visible,
        .bibtex-copy:focus-visible,
        .lb-x:focus-visible {
            outline: 2px solid var(--em);
            outline-offset: 2px;
        }
        a:focus-visible,
        .polaroid > a:focus-visible {
            outline: 2px solid var(--em);
            outline-offset: 3px;
        }

        /* VIDEO LIGHTBOX */
        #video-lb {
            display:none; position:fixed; inset:0; z-index:9998;
            background:rgba(28,28,25,0.92); align-items:center; justify-content:center;
            backdrop-filter:blur(6px);
        }

        /* ════════════════ RESULTS BAR CHARTS ════════════════ */
        .results-charts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin: 22px 0 8px;
        }
        @media (max-width: 700px) { .results-charts { grid-template-columns: 1fr; } }
        /* callout + success-rate chart side by side */
        .results-duo {
            display: grid;
            grid-template-columns: 0.78fr 1.22fr;
            gap: 16px;
            align-items: center;
            margin: 22px 0 8px;
        }
        .results-duo .result-callout { margin: 0; }
        /* slimmer chart so it sits comfortably next to the stat callout */
        .results-duo .rchart { margin: 0; padding: 16px 18px 12px; }
        .results-duo .rchart-axis { margin-bottom: 12px; }
        .results-duo .rbar-row { margin-bottom: 6px; }
        .results-duo .rbar-row:last-child { margin-bottom: 0; }
        .results-duo .rbar-track { height: 14px; }
        @media (max-width: 700px) { .results-duo { grid-template-columns: 1fr; } }
        .rchart {
            background: var(--panel);
            border: 1px solid var(--rule-soft);
            border-radius: 14px;
            padding: 20px 22px 18px;
            box-shadow: var(--sh-card);
        }
        .rchart-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-muted);
            margin-bottom: 3px;
        }
        .rchart-axis {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.58rem;
            color: var(--ink-muted);
            margin-bottom: 16px;
            font-style: italic;
        }
        .rbar-row {
            display: grid;
            grid-template-columns: 78px 1fr 46px;
            align-items: center;
            gap: 10px;
            margin-bottom: 9px;
        }
        .rbar-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.64rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--ink-muted);
            text-align: right;
            white-space: nowrap;
        }
        .rbar-label.ours { color: var(--em); }
        .rbar-track {
            background: var(--bg-deep);
            border-radius: 5px;
            height: 20px;
            position: relative;
            overflow: hidden;
        }
        .rbar-fill {
            position: absolute;
            left: 0; top: 0; bottom: 0;
            border-radius: 5px;
            width: 0%;
            transition: width 1.1s cubic-bezier(.16,.7,.3,1);
        }
        .rbar-fill.ours    { background: var(--em); }
        .rbar-fill.bl-dsrl { background: var(--baseline-sage); }
        .rbar-fill.bl-resrl { background: var(--baseline-plum); }
        .rbar-fill.bl-base  { background: var(--baseline-neutral); }
        .rbar-fill.bl-rialto{ background: var(--baseline-ochre); }
        .rbar-fill.bl-fpo   { background: var(--baseline-terracotta); }
        .rbar-label.bl-dsrl { color: var(--baseline-sage); }
        .rbar-val.bl-dsrl { color: var(--baseline-sage); }
        .rbar-label.bl-resrl { color: var(--baseline-plum); }
        .rbar-label.bl-rialto{ color: var(--baseline-ochre); }
        .rbar-label.bl-fpo   { color: var(--baseline-terracotta); }
        .rbar-val {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--ink-muted);
        }
        .rbar-val.ours { color: var(--em); }

        /* PER-TASK RESULTS GRID */
        .tr-toggle-wrap {
            display: flex;
            gap: 6px;
            margin: 20px 0 12px;
        }
        .tr-toggle {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            padding: 5px 14px;
            border-radius: 20px;
            border: 1px solid var(--rule-soft);
            background: transparent;
            color: var(--ink-muted);
            cursor: pointer;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .tr-toggle.active {
            background: var(--em);
            border-color: var(--em);
            color: #fff;
        }
        .task-results-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        /* per-task results panel inside the rollout tabs */
        .tr-task-panel { margin-top: 22px; }
        .tr-task-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
        }
        .tr-task-head-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-muted);
        }
        .tr-task-head .tr-toggle-wrap { margin: 0; }
        .tr-task-head-axis {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.62rem;
            letter-spacing: 0.06em;
            color: var(--ink-muted);
        }
        .tr-card {
            background: var(--panel);
            border: 1px solid var(--rule-soft);
            border-radius: 12px;
            padding: 14px 16px 12px;
            box-shadow: var(--sh-card);
        }
        .tr-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .tr-name {
            font-family: 'Fraunces', serif;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--ink);
        }
        .tr-cat {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .tr-bars { display: flex; flex-direction: column; gap: 5px; }
        .tr-bar-row {
            display: grid;
            grid-template-columns: 46px 1fr 34px;
            align-items: center;
            gap: 7px;
        }
        .tr-bar-lbl {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.58rem;
            font-weight: 600;
            color: var(--ink-muted);
        }
        .tr-bar-track {
            position: relative;
            height: 5px;
            background: rgba(255,255,255,0.06);
            border-radius: 3px;
            overflow: hidden;
        }
        .tr-bar-fill {
            position: absolute;
            left: 0; top: 0; bottom: 0;
            border-radius: 3px;
            width: 0%;
            transition: width 0.9s cubic-bezier(.16,.7,.3,1);
        }
        .tr-bar-val {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.58rem;
            font-weight: 600;
            color: var(--ink-muted);
            text-align: right;
        }
        /* label colors */
        .tr-lbl-score  { color: var(--em-glow) !important; }
        .tr-lbl-dsrl   { color: var(--baseline-sage); }
        .tr-lbl-resrl  { color: var(--baseline-plum); }
        .tr-lbl-rialto { color: var(--baseline-ochre); }
        .tr-lbl-fpo    { color: var(--baseline-terracotta); }
        /* fill colors */
        .tr-fill-score  { background: var(--em); }
        .tr-fill-dsrl   { background: var(--baseline-sage); }
        .tr-fill-resrl  { background: var(--baseline-plum); }
        .tr-fill-base   { background: var(--baseline-neutral); }
        .tr-fill-rialto { background: var(--baseline-ochre); }
        .tr-fill-fpo    { background: var(--baseline-terracotta); }
        .tr-val-score   { color: var(--em-glow); }
        @media (max-width: 680px) {
            .task-results-grid { grid-template-columns: 1fr; }
        }

        /* ABLATION CHART CARDS */
        .abl-chart-card {
            background: var(--panel);
            border: 1px solid var(--rule-soft);
            border-radius: 14px;
            padding: 20px 24px 16px;
            margin: 18px auto 0;
            box-shadow: var(--sh-card);
            position: relative;
        }
        .abl-chart-card.expandable {
            cursor: zoom-in;
            transition: box-shadow 0.15s, border-color 0.15s;
        }
        .abl-chart-card.expandable:hover {
            border-color: var(--em);
            box-shadow: var(--sh-card), 0 0 0 2px rgba(52,79,120,0.15);
        }
        .abl-expand-hint {
            position: absolute;
            top: 10px; right: 12px;
            font-size: 13px;
            color: var(--muted, #7a7872);
            opacity: 0;
            transition: opacity 0.15s;
            pointer-events: none;
            line-height: 1;
        }
        .abl-chart-card.expandable:hover .abl-expand-hint { opacity: 0.7; }

        /* CHART LIGHTBOX */
        #chart-lb {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(28,28,25,0.72);
            backdrop-filter: blur(4px);
            z-index: 900;
            align-items: center;
            justify-content: center;
        }
        #chart-lb.open { display: flex; }
        .chart-lb-inner {
            background: var(--panel);
            border: 1px solid var(--rule-soft);
            border-radius: 18px;
            padding: 28px 32px 24px;
            width: min(92vw, 1000px);
            position: relative;
            box-shadow: 0 24px 64px rgba(0,0,0,0.45);
        }
        .chart-lb-inner svg { width: 100%; }
        .chart-lb-close {
            position: absolute;
            top: -14px; right: -14px;
            width: 32px; height: 32px; border-radius: 50%;
            background: rgba(255,255,255,0.14);
            border: 1.5px solid rgba(255,255,255,0.25);
            color: #fff; font-size: 14px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            backdrop-filter: blur(8px);
            transition: background 0.15s;
        }
        .chart-lb-close:hover { background: rgba(255,255,255,0.26); }
        .abl-chart-narrow { max-width: 62%; }
        .abl-row {
            display: flex;
            gap: 16px;
            margin: 18px auto 0;
            max-width: 780px;
        }
        .abl-row .abl-chart-card { margin: 0; flex: 1 1 0; min-width: 0; }
        @media (max-width: 720px) {
            .abl-chart-narrow { max-width: 100%; }
            .abl-row { flex-direction: column; max-width: 100%; }
        }

        /* LIMITATIONS LIST */
        .lim-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin: 18px 0;
        }
        @media (max-width: 640px) { .lim-list { grid-template-columns: 1fr; } }
        .lim-list.lim-row3 { grid-template-columns: repeat(3, 1fr); }
        @media (max-width: 760px) { .lim-list.lim-row3 { grid-template-columns: 1fr; } }
        .lim-item {
            background: var(--panel);
            border: 1px solid var(--rule-soft);
            border-left: 3px solid var(--ink-muted);
            border-radius: 12px;
            padding: 18px 20px;
            box-shadow: var(--sh-soft);
        }
        .lim-item .lim-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-muted);
            margin-bottom: 8px;
        }
        .lim-item p {
            font-family: 'Fraunces', serif;
            font-size: 0.96rem;
            line-height: 1.6;
            color: var(--ink-soft);
            margin: 0;
        }

        /* placeholder tile standing in for a not-yet-added rollout video */
        .vid-placeholder {
            aspect-ratio: 16 / 9;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: #14181f;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            text-align: center;
            padding: 12px;
            color: rgba(227, 236, 230, 0.55);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.74rem;
            letter-spacing: 0.04em;
            line-height: 1.4;
            position: relative; z-index: 1;
        }
        .vid-placeholder .ph-icon { font-size: 1.5rem; opacity: 0.5; margin-bottom: 4px; }

        /* centered, wrapping gallery (FPO / RialTo failure clips) — last row stays centered */
        .fail-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
        .fail-gallery > figure { flex: 0 1 calc(33.333% - 8px); min-width: 220px; margin: 0; }
        .fail-gallery video { width: 100%; border-radius: 10px; display: block; background: #000; }
        @media (max-width: 600px) { .fail-gallery > figure { flex-basis: 100%; } }

        /* SCORE-in-action overview: one tile per task, no tabs */
        .task-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
        .task-gallery > figure { margin: 0; position: relative; border-radius: 10px; overflow: hidden; background: #000; }
        .task-gallery video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
        .task-gallery figcaption {
            position: absolute; left: 8px; top: 8px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 600;
            letter-spacing: 0.02em; color: #fff; padding: 3px 8px; border-radius: 6px;
            background: rgba(20, 28, 40, 0.72); backdrop-filter: blur(2px);
        }
        @media (max-width: 700px) { .task-gallery { grid-template-columns: repeat(2, 1fr); } }

        /* base-vs-SCORE basket timelapse */
        .basket-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
        .basket-duo > figure { margin: 0; }
        .basket-duo video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 10px; background: #000; }
        .basket-duo figcaption {
            margin-top: 8px; font-family: 'Fraunces', serif; font-size: 0.9rem;
            line-height: 1.45; color: var(--ink-soft);
        }
        .basket-tag {
            display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem;
            font-weight: 600; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 6px; margin-right: 6px;
        }
        .base-tag { color: #b5532f; background: rgba(181, 83, 47, 0.12); }
        .score-tag { color: var(--em-glow); background: rgba(16, 185, 129, 0.12); }
        @media (max-width: 700px) { .basket-duo { grid-template-columns: 1fr; } }

        /* EXTRAS section: tabbed base-vs-SCORE toggle */
        .ex-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
        .ex-tab, .ms-tab {
            font-family: 'JetBrains Mono', monospace; font-size: 0.70rem; font-weight: 700;
            letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 12px;
            border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg);
            color: var(--ink); cursor: pointer; transition: all 0.18s ease; white-space: nowrap; flex: 0 0 auto;
        }
        .ex-tab:hover, .ms-tab:hover { background: var(--em-light); color: var(--em); border-color: var(--em); }
        .ex-tab.active, .ms-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
        .ms-tabs { display: flex; flex-wrap: nowrap; gap: 6px; margin: 14px 0; overflow-x: auto; scrollbar-width: none; }
        .ms-tabs::-webkit-scrollbar { display: none; }
        .ms-cell { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: #000; }
        .ms-cell video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

        /* ── Training-progress timelapse player (improvement in simulation) ── */
        .tl-player {
            margin: 18px 0 8px; max-width: 760px; margin-left: auto; margin-right: auto;
        }
        .tl-stage {
            position: relative; border-radius: 12px; overflow: hidden; background: #000;
            box-shadow: var(--sh-card-deep); border: 1.5px solid rgba(28,28,25,0.10);
        }
        .tl-stage video {
            width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
        }
        .tl-playpause {
            position: absolute; bottom: 12px; right: 12px; z-index: 2;
            width: 38px; height: 38px; border-radius: 50%;
            border: none; cursor: pointer;
            background: rgba(28,28,25,0.55); color: #fff; backdrop-filter: blur(6px);
            font-size: 0.8rem; display: grid; place-items: center;
            transition: background 0.18s ease, transform 0.18s ease;
        }
        .tl-playpause:hover { background: var(--em); transform: scale(1.06); }

        .tl-controls { padding: 16px 8px 4px; }
        .tl-readout {
            font-family: 'JetBrains Mono', monospace; font-weight: 700;
            font-size: 0.92rem; letter-spacing: 0.04em; color: var(--em);
            text-align: center; margin-bottom: 14px; min-height: 1.1em;
        }

        .tl-track {
            position: relative; height: 26px; cursor: pointer; touch-action: none;
            outline: none;
        }
        .tl-track:focus-visible .tl-thumb { box-shadow: 0 0 0 4px var(--em-light); }
        .tl-rail {
            position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
            height: 4px; border-radius: 999px; background: var(--bg-deep);
        }
        .tl-fill {
            position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            height: 4px; width: 0; border-radius: 999px; background: var(--em);
            pointer-events: none;
        }
        .tl-ticks { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
        .tl-tick {
            position: absolute; top: 50%; transform: translate(-50%, -50%);
            width: 9px; height: 9px; border-radius: 50%;
            background: var(--bg); border: 2px solid var(--em-mid);
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }
        .tl-tick.passed { border-color: var(--em); }
        .tl-tick.current {
            background: var(--em); border-color: var(--em);
            transform: translate(-50%, -50%) scale(1.5);
            box-shadow: 0 0 0 4px var(--em-light);
        }
        .tl-thumb {
            position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
            width: 16px; height: 16px; border-radius: 50%;
            background: #fff; border: 3px solid var(--em);
            box-shadow: var(--sh-card); pointer-events: none; z-index: 3;
            transition: box-shadow 0.18s ease;
        }

        .tl-labels { position: relative; height: 20px; margin-top: 8px; }
        .tl-lab {
            position: absolute; top: 0; transform: translateX(-50%);
            font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 600;
            letter-spacing: 0.02em; color: var(--ink-muted);
            background: none; border: none; padding: 2px 3px; cursor: pointer;
            white-space: nowrap; transition: color 0.18s ease;
        }
        .tl-lab:hover { color: var(--em); }
        .tl-lab.current { color: var(--em); font-weight: 700; }
        @media (max-width: 600px) {
            .tl-lab { font-size: 0.5rem; }
            .tl-readout { font-size: 0.82rem; }
        }

        /* FPO-in-simulation gallery (failures section) */
        .fpo-sim-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
        .fpo-sim-gallery > figure { margin: 0; position: relative; border-radius: 10px; overflow: hidden; background: #000; }
        .fpo-sim-gallery video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
        @media (max-width: 700px) { .fpo-sim-gallery { grid-template-columns: repeat(2, 1fr); } }
        .ex-vid-col { display: flex; flex-direction: column; gap: 8px; }
        .ex-cell { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: #000; }
        .ex-cell video { width: 100%; object-fit: cover; display: block; }
        .ex-chip {
            position: absolute; left: 8px; top: 8px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 600;
            letter-spacing: 0.02em; color: #fff; padding: 3px 8px; border-radius: 6px;
            background: rgba(20, 28, 40, 0.72); backdrop-filter: blur(2px);
        }

        /* featured "bonus" highlight below a comparison */
        .ex-bonus {
            display: grid; grid-template-columns: minmax(0, 320px) 1fr; align-items: center;
            gap: 24px; margin-top: 22px; padding: 22px 28px;
            background: var(--panel);
            border: 1px solid var(--rule-soft); border-left: 3px solid var(--em);
            border-radius: 14px; box-shadow: var(--sh-card);
        }
        .ex-bonus .ex-cell { width: 100%; }
        .ex-bonus-tag {
            display: inline-block; margin-bottom: 8px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
            letter-spacing: 0.1em; text-transform: uppercase; color: var(--em);
            padding: 3px 9px; border-radius: 999px; background: var(--em-light);
        }
        .ex-bonus-text p {
            margin: 0; font-family: 'Fraunces', serif; font-size: 0.98rem;
            line-height: 1.55; color: var(--ink-soft);
        }
        @media (max-width: 700px) { .ex-bonus { grid-template-columns: 1fr; } }

        /* ════════════════ DISTRIBUTIONAL TRADEOFF PLOT ════════════════ */
        .bctk {
            margin: 26px 0 4px; padding: 20px 24px 18px;
            background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--sh-card);
        }
        .bctk-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-bottom: 12px; }
        .bctk-legend { display: flex; align-items: center; gap: 20px; margin-bottom: 6px; }
        .bctk-leg { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--ink-soft); display: inline-flex; align-items: center; }
        .lg-line { display: inline-block; width: 22px; height: 0; border-top: 4px solid; margin-right: 8px; vertical-align: middle; }
        .lg-line.real { border-color: var(--baseline-terracotta); }
        .lg-line.sim  { border-color: var(--baseline-neutral); opacity: 0.6; }
        .bctk-tag {
            margin-left: auto;
            font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em;
            text-transform: uppercase; color: #fff; background: var(--baseline-terracotta);
            padding: 3px 11px; border-radius: 999px; white-space: nowrap; transition: background 0.3s;
        }
        .bctk-tag.good { background: var(--baseline-sage); }

        .bctk-chart { width: 100%; max-width: 600px; margin: 4px auto 0; }
        .bctk-svg { display: block; width: 100%; height: auto; overflow: visible; }
        .bctk-grid  { stroke: var(--rule); stroke-width: 1; opacity: 0.6; }
        /* base policy floor — solid-ish dotted, deep ink so it reads clearly */
        .bctk-base  { stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; opacity: 0.9; }
        /* SCORE ceiling — navy, the headline reference; bolder so it stands out */
        .bctk-ceil  { stroke: var(--em); stroke-width: 2.5; stroke-dasharray: 8 5; stroke-linecap: round; opacity: 1; }
        .bctk-reflabel { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; }
        .bctk-reflabel.score { fill: var(--em-deep); }
        .bctk-reflabel.base  { fill: var(--ink-soft); }
        .bctk-sim-line { fill: none; stroke: var(--baseline-neutral); stroke-width: 2; opacity: 0.5; stroke-dasharray: 5 4; stroke-linejoin: round; }
        /* the constrained policy's real-world curve — terracotta, distinct from SCORE's navy */
        .bctk-real-area { fill: url(#bctk-grad); }
        .bctk-real-line { fill: none; stroke: var(--baseline-terracotta); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 2px 4px rgba(181, 107, 92, 0.28)); }
        .bctk-dot { stroke: var(--panel); stroke-width: 1.5; }
        .bctk-dot.sim  { fill: var(--baseline-neutral); opacity: 0.5; }
        .bctk-dot.real { fill: var(--baseline-terracotta); }
        .bctk-dot.on { opacity: 1; }
        .bctk-xlab { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; fill: var(--ink-soft); }
        .bctk-cursor { stroke: var(--ink-soft); stroke-width: 1; opacity: 0.3; }
        .bctk-hl { fill: var(--baseline-terracotta); stroke: var(--panel); stroke-width: 2.5; }
        .bctk-bubble { fill: var(--baseline-terracotta); }
        .bctk-bubble-tx { fill: #fff; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }

        .bctk-state { margin: 12px 2px 14px; min-height: 2.6em; font-family: 'Fraunces', serif; font-style: italic;
            font-size: 0.98rem; line-height: 1.5; color: var(--ink-soft); text-align: center; }
        .bctk-axis { text-align: center; margin: 0 auto;
            font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-muted); }
        .bctk-axis b { color: var(--ink); font-weight: 700; }

        /* ════════════════ UNCONSTRAINED-RL FAILS (sim → hardware) ════════════════ */
        .ur-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
        .ur-task { font-family: 'Fraunces', serif; font-weight: 600; font-size: 0.98rem; color: var(--ink); margin-bottom: 7px; }
        .ur-duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
        .ur-arrow { color: var(--ink-muted); font-size: 1.1rem; }
        .ur-card { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--rule); }
        .ur-card video { width: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; }
        .ur-card.hw { box-shadow: 0 0 0 1.5px var(--baseline-terracotta); }
        .ur-card figcaption {
            position: absolute; left: 0; right: 0; bottom: 0; padding: 15px 9px 6px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; line-height: 1.3; color: #fff;
            background: linear-gradient(0deg, rgba(0,0,0,0.8), transparent);
        }
        .ur-sim { display: block; color: #9fb8d8; font-weight: 700; font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.08em; }
        .ur-hw  { display: block; color: #e0a59a; font-weight: 700; font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.08em; }

        .ur-climax {
            display: grid; grid-template-columns: minmax(0,300px) 1fr; align-items: center; gap: 24px;
            margin-top: 28px; padding: 22px 26px;
            background: var(--panel); border: 1px solid var(--rule-soft);
            border-left: 3px solid var(--baseline-terracotta); border-radius: 14px; box-shadow: var(--sh-card);
        }
        .ur-climax img { width: 100%; border-radius: 10px; display: block; }
        .ur-climax-tag {
            display: inline-block; margin-bottom: 9px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
            letter-spacing: 0.08em; text-transform: uppercase; color: var(--baseline-terracotta);
            padding: 3px 9px; border-radius: 999px; background: rgba(181,107,92,0.12);
        }
        .ur-climax-text p { margin: 0; font-family: 'Fraunces', serif; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }
        .ur-climax-text strong { color: var(--ink); }
        @media (max-width: 760px) {
            .ur-pairs { grid-template-columns: 1fr; }
            .ur-climax { grid-template-columns: 1fr; }
        }

        /* ════════════════ BEYOND THE BENCHMARK (showcase) ════════════════ */
        .bb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
        .bb-card { position: relative; margin: 0; border-radius: 11px; overflow: hidden;
            background: #000; box-shadow: 0 0 0 1px var(--rule); }
        .bb-card video { width: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; }
        .bb-card.score { box-shadow: 0 0 0 1.5px var(--em-mid); }
        .bb-card figcaption {
            position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 9px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; line-height: 1.4; color: #fff;
            background: linear-gradient(0deg, rgba(0,0,0,0.8), transparent);
        }
        .bb-ok  { color: #9fd3b0; font-weight: 700; margin-right: 6px; }
        .bb-bad { color: #e0a59a; font-weight: 700; margin-right: 6px; }
        .bb-tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 14px; }
        .bb-task-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: 2px; }
        .bb-task .bb-duo { gap: 10px; margin-top: 8px; }
        @media (max-width: 760px) { .bb-tasks { grid-template-columns: 1fr; } }

        /* ════════════════ MULTI-TASK PANEL (bespoke) ════════════════ */
        .mt-lede { font-family: 'Fraunces', serif; font-size: 1.07rem; line-height: 1.7;
            color: var(--ink); margin: 4px 0 22px; }
        .mt-lede strong { color: var(--em); font-weight: 700; }
        .mt-card { position: relative; margin: 0; border-radius: 10px; overflow: hidden;
            background: #000; box-shadow: 0 0 0 1px var(--rule); }
        .mt-card video { width: 100%; display: block; object-fit: cover; }
        .mt-card figcaption {
            position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 7px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; line-height: 1.35; color: #fff;
            background: linear-gradient(0deg, rgba(0,0,0,0.78), transparent);
            display: flex; flex-direction: column; gap: 2px;
        }
        .mt-card figcaption b { color: #fff; font-weight: 700; }
        .mt-borrow { color: var(--em-glow); font-weight: 700; }
        .mt-sub { color: rgba(255,255,255,0.7); font-size: 0.56rem; }
        .mt-ok  { color: #9fd3b0; font-weight: 700; margin-right: 5px; }
        .mt-bad { color: #e0a59a; font-weight: 700; margin-right: 5px; }

        /* borrowing hero */
        .mt-hero { background: var(--panel); border: 1px solid var(--rule-soft);
            border-left: 3px solid var(--em); border-radius: 14px; padding: 20px 24px 22px;
            box-shadow: var(--sh-card); }
        .mt-hero-head { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.12rem;
            color: var(--ink); margin-bottom: 14px; }
        .mt-hero-clips { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .mt-card.hero { box-shadow: 0 0 0 1.5px var(--em-mid), 0 6px 18px rgba(0,0,0,0.14); }
        .mt-hero-cap { margin: 14px 0 0; font-family: 'Fraunces', serif; font-style: italic;
            font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); }

        /* native tasks with base reference */
        .mt-native { margin-top: 26px; }
        .mt-native-head { font-family: 'Fraunces', serif; font-size: 1.07rem; line-height: 1.7;
            color: var(--ink); margin: 0 0 16px; }
        .mt-native-head strong { color: var(--em); font-weight: 700; }
        .mt-objs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
        .mt-obj-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 0.98rem;
            color: var(--ink); margin-bottom: 8px; }
        .mt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
        .mt-card.base { opacity: 0.82; }
        .mt-card.base figcaption { font-size: 0.58rem; }

        @media (max-width: 760px) {
            .mt-hero-clips, .mt-objs { grid-template-columns: 1fr; }
        }