:root {
            /* After-hours Editorial palette */
            --paper:        #0E0C09;
            --paper-2:      #15120E;
            --paper-3:      #1C1814;
            --paper-4:      #25201B;
            --ink:          #EFE5D2;
            --ink-2:        #B0A187;
            /* ink-3/ink-4 sized for WCAG AA (4.5:1 body, 3:1 large) on paper. */
            --ink-3:        #978B73;
            --ink-4:        #6F6553;
            --rule:         #3A3225;
            --rule-strong:  #5C4F3A;
            --gain:         #8FAA72;
            --loss:         #CB5C50;
            --warn:         #CA9555;
            --gold:         #D7AC60;
            --ink-blue:     #708FB6;

            --warning: var(--warn);

            /* Spacing + sizing tokens in rem so they scale with the user's
               preferred root font-size (16px default). 1rem = 16px. */
            --maxw:      105rem;   /* 1680px */

            --ff-display: 'Fraunces', 'Iowan Old Style', 'Times New Roman', Georgia, serif;
            --ff-sans:    'Geist', -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
            --ff-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

            /* ============================================================
               FLUID SIZING SYSTEM
               Single source of truth for all layout-affecting dimensions.
               Every value is clamp(min, vw-scaled, max) so one rule covers
               320–1920+ CSS px without per-breakpoint media queries.
               ============================================================ */

            /* Spacing scale */
            --space-3xs: clamp(0.125rem, 0.25vw + 0.0625rem, 0.25rem);
            --space-2xs: clamp(0.25rem,  0.5vw  + 0.125rem,  0.5rem);
            --space-xs:  clamp(0.5rem,   1vw    + 0.25rem,   0.75rem);
            --space-sm:  clamp(0.75rem,  1.5vw  + 0.375rem,  1rem);
            --space-md:  clamp(1rem,     2vw    + 0.5rem,    1.5rem);
            --space-lg:  clamp(1.25rem,  3vw    + 0.625rem,  2rem);
            --space-xl:  clamp(1.5rem,   4vw    + 0.75rem,   2.5rem);
            --space-2xl: clamp(2rem,     5vw    + 1rem,      3.5rem);
            --space-3xl: clamp(2.5rem,   7vw    + 1.25rem,   5rem);

            /* Page edge gutter for .container — tight on phone, roomy on desktop. */
            --gutter: clamp(0.875rem, 2.5vw + 0.25rem, 2.5rem);

            /* Lane minimums for auto-fit grids. min(100%, X) means each track
               collapses to a single column once the container drops below X,
               so a single auto-fit rule replaces multiple breakpoint media queries. */
            --lane-card:    min(100%, 22rem);
        }

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

        html {
            background: var(--paper);
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            font-family: var(--ff-sans);
            background: var(--paper);
            color: var(--ink);
            font-size: 0.875rem; /* 14px effective; scales with user root size */
            line-height: 1.55;
            font-feature-settings: 'ss01' 1, 'cv11' 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
            position: relative;
        }

        /* warm haze backdrop */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background:
                radial-gradient(1200px 700px at 14% -10%, rgba(215,172,96,0.085), transparent 60%),
                radial-gradient(900px 600px at 96% 110%, rgba(112,143,182,0.06), transparent 60%);
        }

        /* paper grain overlay */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.55;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.6  0 0 0 0 0.4  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        }

        .mono {
            font-family: var(--ff-mono);
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum' 1, 'zero' 1, 'cv02' 1;
            letter-spacing: -0.005em;
        }

        .profit { color: var(--gain); }
        .loss   { color: var(--loss); }
        .zero   { color: var(--ink-3); }
        .warning{ color: var(--warn); }

        .container {
            position: relative;
            z-index: 1;
            max-width: var(--maxw);
            margin: 0 auto;
            padding: var(--space-lg) var(--gutter) var(--space-3xl);
        }

        /* MASTHEAD */
        .header {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: var(--space-md);
            padding-bottom: 1.375rem;
            margin-bottom: 1.75rem;
            border-bottom: 1px solid var(--rule-strong);
            position: relative;
        }
        .header::before {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0; right: 0;
            height: 1px;
            background: var(--rule);
        }

        .masthead-left {
            flex: 1 1 18rem;
            min-width: 0;
        }

        .masthead-eyebrow {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.375rem 0.875rem;
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--ink-3);
            margin-bottom: 0.625rem;
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .masthead-eyebrow span { min-width: 0; overflow-wrap: anywhere; }
        .masthead-eyebrow .sep { color: var(--ink-4); }
        .masthead-eyebrow .gold { color: var(--gold); }

        .breadcrumb {
            font-family: var(--ff-display);
            font-weight: 350;
            font-style: italic;
            font-size: clamp(2rem, 4.2vw, 3.375rem);
            line-height: 1.15;
            letter-spacing: -0.025em;
            color: var(--ink);
            font-variation-settings: 'opsz' 96, 'SOFT' 60;
            text-rendering: geometricPrecision;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-bottom: 0.08em;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            flex-wrap: wrap;
            justify-content: flex-end;
            flex: 0 1 auto;
            min-width: 0;
            max-width: 100%;
        }

        .address-controls {
            display: flex;
            align-items: stretch;
            border: 1px solid var(--rule-strong);
            background: var(--paper-2);
            min-width: 0;
            max-width: 100%;
            flex: 1 1 min(22rem, 100%);
        }
        .address-input {
            background: transparent;
            color: var(--ink);
            border: 0;
            outline: 0;
            padding: 0.5625rem 0.75rem;
            font-family: var(--ff-mono);
            font-size: 0.6875rem;
            flex: 1 1 0;
            min-width: 0;
            width: auto;
            letter-spacing: 0.02em;
        }
        .address-input::placeholder {
            color: var(--ink-4);
            font-style: italic;
        }
        .address-btn {
            background: var(--paper-3);
            color: var(--ink);
            border: 0;
            border-left: 1px solid var(--rule-strong);
            padding: 0 1.125rem;
            font-family: var(--ff-display);
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.18s, color 0.18s;
        }
        .address-btn:hover { background: var(--gold); color: var(--paper); }

        .address {
            font-family: var(--ff-mono);
            font-size: 0.6875rem;
            color: var(--ink-2);
            cursor: pointer;
            letter-spacing: 0.02em;
            border-bottom: 1px dotted var(--rule-strong);
            padding-bottom: 1px;
            transition: color 0.15s;
            overflow-wrap: anywhere;
            word-break: break-all;
            max-width: 100%;
        }
        .address:hover { color: var(--ink); }

        .status-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4375rem;
            padding: 0.375rem 0.6875rem 0.375rem 0.5625rem;
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            border: 1px solid var(--rule-strong);
            background: var(--paper-2);
            color: var(--ink-2);
            /* Stable footprint for all states: FRESH / FETCHING / FRESH PARTIAL /
               OFFLINE / CACHED PARTIAL. Sized for the widest text
               ("CACHED · PARTIAL", ≈166px) plus slack for font fallback, so the
               right rail never reflows the headline mid-fetch. A fixed width,
               not min(…, 100%): the rail sizes itself from its children's
               intrinsic widths, where a percentage floor counts as zero and
               each state's text width would leak through. max-width collapses
               the badge to container width on viewports narrower than 11rem. */
            width: 11rem;
            max-width: 100%;
            box-sizing: border-box;
        }
        .status-badge.fresh {
            color: var(--gain);
            background: linear-gradient(180deg, rgba(143,170,114,0.07), rgba(143,170,114,0.02));
            border-color: rgba(143,170,114,0.35);
        }
        .status-badge.fresh::before,
        .status-badge.fetching::before,
        .status-badge.offline::before,
        .status-badge.partial::before,
        .status-badge.cached-partial::before {
            content: '';
            width: 0.375rem; height: 0.375rem; border-radius: 50%;
            flex-shrink: 0;
        }
        .status-badge.fresh::before {
            background: var(--gain);
            animation: pulse 2.4s infinite;
        }
        @keyframes pulse {
            0%   { box-shadow: 0 0 0 0 rgba(143,170,114,0.6); }
            70%  { box-shadow: 0 0 0 0.5rem rgba(143,170,114,0); }
            100% { box-shadow: 0 0 0 0 rgba(143,170,114,0); }
        }

        /* fetching state — gold pulse, faster cadence */
        .status-badge.fetching {
            color: var(--gold);
            background: linear-gradient(180deg, rgba(215,172,96,0.10), rgba(215,172,96,0.02));
            border-color: rgba(215,172,96,0.42);
        }
        .status-badge.fetching::before {
            background: var(--gold);
            animation: pulse-gold 1.1s infinite;
        }
        @keyframes pulse-gold {
            0%   { box-shadow: 0 0 0 0 rgba(215,172,96,0.7); }
            70%  { box-shadow: 0 0 0 0.5rem rgba(215,172,96,0); }
            100% { box-shadow: 0 0 0 0 rgba(215,172,96,0); }
        }

        /* offline state — fully failed load */
        .status-badge.offline {
            color: var(--loss);
            background: linear-gradient(180deg, rgba(203,92,80,0.08), rgba(203,92,80,0.02));
            border-color: rgba(203,92,80,0.4);
        }
        .status-badge.offline::before { background: var(--loss); }

        /* cached-partial state — painted from a cache snapshot that had
           fields evicted to fit browser storage; held until fresh data.
           partial state — the last fetch lost some endpoints. */
        .status-badge.cached-partial,
        .status-badge.partial {
            color: var(--warn);
            background: linear-gradient(180deg, rgba(202,149,85,0.09), rgba(202,149,85,0.02));
            border-color: rgba(202,149,85,0.4);
            cursor: help;
        }
        .status-badge.cached-partial::before,
        .status-badge.partial::before { background: var(--warn); }

        /* Determinate fetch progress bar — replaces the indefinite sweep.
           Sits in the masthead's bottom-rule slot. Track is a low-contrast
           hairline that fades in with the bar so the slot reads as a clean
           divider when idle; fill is a 2px gold band that scales horizontally
           from origin-left, driven by FetchProgress in index.html. */
        .fetch-bar {
            position: absolute;
            left: 0; right: 0;
            bottom: -4px;
            height: 2px;
            overflow: hidden;
            pointer-events: none;
            z-index: 2;
        }
        .fetch-bar__track {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 1px;
            background: linear-gradient(
                90deg,
                rgba(92, 79, 58, 0)   0%,
                rgba(92, 79, 58, 0.6) 12%,
                rgba(92, 79, 58, 0.6) 88%,
                rgba(92, 79, 58, 0)  100%
            );
            opacity: 0;
            transition: opacity 0.25s ease-out;
        }
        .fetch-bar__fill {
            position: absolute;
            inset: 0;
            transform-origin: left center;
            transform: scaleX(0);
            background: linear-gradient(
                180deg,
                rgba(215, 172, 96, 0.95),
                rgba(215, 172, 96, 0.55)
            );
            box-shadow:
                0 0 6px rgba(215, 172, 96, 0.45),
                0 0 1px rgba(215, 172, 96, 0.9);
            opacity: 0;
            transition:
                transform 0.55s cubic-bezier(0.2, 0.7, 0.1, 1),
                opacity   0.25s ease-out,
                background 0.4s ease-out,
                box-shadow 0.4s ease-out;
        }
        .fetch-bar.active .fetch-bar__track,
        .fetch-bar.active .fetch-bar__fill { opacity: 1; }
        .fetch-bar.settling-partial .fetch-bar__fill {
            background: linear-gradient(
                180deg,
                rgba(203, 92, 80, 0.95),
                rgba(203, 92, 80, 0.55)
            );
            box-shadow:
                0 0 6px rgba(203, 92, 80, 0.45),
                0 0 1px rgba(203, 92, 80, 0.9);
        }
        @media (prefers-reduced-motion: reduce) {
            .fetch-bar__fill {
                transition:
                    opacity 0.15s linear,
                    background 0.15s linear,
                    box-shadow 0.15s linear;
            }
        }

        /* endpoint progress caption — small editorial mono cap.
           Pinned absolutely to the masthead's bottom edge so its dynamic
           text width cannot feed back into the grid and force the headline
           to wrap. visibility-toggled so its box reserves no flow space
           when idle. */
        .fetch-caption {
            position: absolute;
            right: 0;
            bottom: -1.25rem;
            font-family: var(--ff-mono);
            font-size: 0.59375rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-3);
            display: inline-flex;
            align-items: baseline;
            gap: 0.5625rem;
            white-space: nowrap;
            visibility: hidden;
            pointer-events: none;
            z-index: 3;
        }
        .fetch-caption.active {
            visibility: visible;
            pointer-events: auto;
        }
        .fetch-caption .gold { color: var(--gold); }
        .fetch-caption .sep  { color: var(--ink-4); }

        /* Freshness caption — shares the bottom-right slot with .fetch-caption
           but mutually exclusive: caption is for in-flight fetches, age is for
           idle "how stale is what you're looking at" feedback. Hidden until
           the first successful load lands; auto-refresh keeps it under 10min
           while the tab is visible. */
        .data-age {
            position: absolute;
            right: 0;
            bottom: -1.25rem;
            font-family: var(--ff-mono);
            font-size: 0.59375rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-3);
            white-space: nowrap;
            z-index: 3;
            transition: color 0.25s ease-out;
        }
        .data-age[hidden] { display: none; }
        .data-age.stale { color: var(--warn); }
        .data-age.refreshing { color: var(--gold); }
        /* While a fetch is in-flight, the .fetch-caption owns the slot;
           the age caption would otherwise overlap it at the same y. */
        .fetch-caption.active ~ .data-age { display: none; }

        /* NAV TABS */
        .nav-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 2.25rem;
            border-bottom: 1px solid var(--rule-strong);
            position: relative;
            counter-reset: navtab;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .nav-tabs::-webkit-scrollbar { display: none; }

        .nav-tab {
            flex: 0 0 auto;
            padding: 1.125rem 1.375rem;
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--ink-3);
            cursor: pointer;
            border: 0;
            position: relative;
            transition: color 0.18s;
            white-space: nowrap;
            background: transparent;
        }
        .nav-tab:first-child { padding-left: 0; }
        .nav-tab:hover { color: var(--ink-2); }
        .nav-tab.active { color: var(--gold); }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            left: 0; right: 0; bottom: -1px;
            height: 1px;
            background: var(--gold);
        }
        .nav-tab::before {
            content: counter(navtab, decimal-leading-zero) "  ";
            counter-increment: navtab;
            color: var(--ink-4);
            margin-right: 0.625rem;
            font-size: 0.5625rem;
        }

        /* tab content with editorial reveal */
        .tab-content { display: none; }
        .tab-content.active {
            display: block;
            animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.1, 1) both;
        }
        @keyframes rise {
            from { opacity: 0; transform: translateY(0.625rem); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* METRICS GRID */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(var(--lane-card), 1fr));
            gap: 1px;
            background: var(--rule);
            border: 1px solid var(--rule-strong);
            margin-bottom: 2.25rem;
        }
        .metric-card {
            background: var(--paper-2);
            padding: 1.375rem 1.375rem 1.25rem;
            position: relative;
            transition: background 0.2s;
            min-height: 8.125rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .metric-card:hover { background: var(--paper-3); }

        /* HERO metric — magazine-style spread */
        .metric-card--hero {
            grid-column: 1 / -1;
            padding: 3.75rem 2.25rem 2rem;
            background:
                radial-gradient(720px 260px at 0% 100%, rgba(215,172,96,0.05), transparent 60%),
                linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas:
                "value  change"
                "ledger change";
            row-gap: 2rem;
            column-gap: 3rem;
            align-items: end;
            min-height: 16.25rem;
            position: relative;
            overflow: hidden;
        }
        .metric-card--hero::before {
            content: 'Total Profit';
            position: absolute;
            top: 1.625rem;
            left: 2.25rem;
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 0.9375rem;
            letter-spacing: 0.04em;
            color: var(--ink-3);
        }
        .metric-card--hero::after {
            /* serif § ornament */
            content: '§';
            position: absolute;
            right: 2.25rem;
            top: 1.375rem;
            font-family: var(--ff-display);
            font-style: italic;
            color: var(--gold);
            font-size: 1.25rem;
            opacity: 0.7;
        }
        .metric-card--hero .metric-label { display: none; }
        .metric-card--hero .metric-value {
            grid-area: value;
            font-family: var(--ff-display);
            font-feature-settings: 'tnum' 1, 'lnum' 1, 'ss01' 1;
            font-variation-settings: 'opsz' 144, 'SOFT' 100;
            font-weight: 380;
            font-size: clamp(3.5rem, 8.5vw, 7.5rem);
            line-height: 0.92;
            letter-spacing: -0.035em;
            color: var(--ink);
            margin: 0;
            align-self: end;
        }
        .metric-card--hero .metric-change {
            grid-area: change;
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: var(--ink-3);
            align-self: end;
            text-align: right;
            border-left: 1px solid var(--rule-strong);
            padding: 0.375rem 0 0.375rem 1.375rem;
            min-width: 6.875rem;
            line-height: 1.4;
        }
        .metric-card--hero .metric-sparkline {
            display: none;
        }

        /* Hero ledger — editorial composition strip under the headline.
           Tracked-caps eyebrows with mono figures sized to read as primary
           data, not annotation. Each row carries its own gold tick so the
           composition echoes the § ornament at top-right. */
        .hero-ledger {
            grid-area: ledger;
            align-self: end;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, max-content));
            column-gap: 3.5rem;
            margin: 0;
            padding-top: 1.25rem;
            border-top: 1px solid var(--rule-strong);
            position: relative;
            max-width: 100%;
        }
        .hero-ledger::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 0;
            width: 4rem;
            height: 1px;
            background: var(--gold);
        }
        .hero-ledger__row {
            display: grid;
            grid-template-rows: auto auto;
            row-gap: 0.5rem;
            min-width: 0;
            position: relative;
        }
        .hero-ledger__row + .hero-ledger__row::before {
            content: '';
            position: absolute;
            left: -1.75rem;
            top: 0.25rem;
            bottom: 0.25rem;
            width: 1px;
            background: var(--rule);
        }
        .hero-ledger dt {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--ink-3);
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
        }
        .hero-ledger dt::before {
            content: '';
            width: 0.375rem;
            height: 0.375rem;
            border: 1px solid var(--gold);
            transform: rotate(45deg);
            flex: none;
            opacity: 0.85;
        }
        .hero-ledger dd {
            font-family: var(--ff-mono);
            font-feature-settings: 'tnum' 1, 'lnum' 1;
            font-size: 1.625rem;
            line-height: 1;
            letter-spacing: -0.005em;
            color: var(--ink-2);
            white-space: nowrap;
        }
        .hero-ledger dd.profit { color: var(--gain); }
        .hero-ledger dd.loss   { color: var(--loss); }
        .hero-ledger dd.zero   { color: var(--ink-3); }

        @media (max-width: 1100px) {
            .metric-card--hero { padding: 3.5rem 1.75rem 1.75rem; }
            .hero-ledger { column-gap: 2.5rem; }
            .hero-ledger__row + .hero-ledger__row::before { left: -1.25rem; }
            .hero-ledger dd { font-size: 1.375rem; }
        }
        @media (max-width: 720px) {
            .metric-card--hero {
                padding: 3.5rem 1.5rem 1.5rem;
                grid-template-columns: 1fr;
                grid-template-areas:
                    "value"
                    "ledger"
                    "change";
                row-gap: 1.5rem;
                min-height: 0;
            }
            .metric-card--hero .metric-change {
                border-left: 0;
                border-top: 1px solid var(--rule-strong);
                padding: 0.875rem 0 0 0;
                text-align: left;
                min-width: 0;
            }
            .hero-ledger {
                grid-template-columns: repeat(3, 1fr);
                column-gap: 1.25rem;
            }
            .hero-ledger__row + .hero-ledger__row::before { left: -0.625rem; }
            .hero-ledger dd { font-size: 1.125rem; }
        }

        /* Funding rate-of-return hero — annualized return on time-weighted notional */
        .funding-hero {
            background:
                radial-gradient(720px 240px at 0% 100%, rgba(215,172,96,0.045), transparent 60%),
                linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
            border: 1px solid var(--rule-strong);
            padding: 1.875rem 2rem 1.75rem;
            margin-bottom: 1.75rem;
            position: relative;
            overflow: hidden;
        }
        .funding-hero__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.625rem;
            flex-wrap: wrap;
        }
        .funding-hero__eyebrow {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--ink-3);
        }
        .funding-hero__eyebrow::before {
            content: '';
            display: inline-block;
            width: 0.875rem;
            height: 1px;
            background: var(--gold);
            vertical-align: 5px;
            margin-right: 0.75rem;
        }
        .funding-hero__window {
            display: inline-flex;
            border: 1px solid var(--rule-strong);
            background: var(--paper-2);
        }
        .funding-hero__pill {
            background: transparent;
            color: var(--ink-3);
            border: 0;
            border-left: 1px solid var(--rule);
            padding: 0.4375rem 0.875rem;
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            cursor: pointer;
            transition: color 0.18s, background 0.18s;
        }
        .funding-hero__pill:first-child { border-left: 0; }
        .funding-hero__pill:hover { color: var(--ink); background: var(--paper-3); }
        .funding-hero__pill.active {
            color: var(--paper);
            background: var(--gold);
        }
        .funding-hero__body {
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
            gap: 2.25rem;
            align-items: end;
        }
        .funding-hero__rule {
            width: 2rem;
            height: 1px;
            background: var(--gold);
            margin-bottom: 1rem;
        }
        .funding-hero__apr {
            font-family: var(--ff-display);
            font-feature-settings: 'tnum' 1, 'lnum' 1, 'ss01' 1;
            font-variation-settings: 'opsz' 144, 'SOFT' 100;
            font-style: italic;
            font-weight: 380;
            font-size: clamp(3.625rem, 8.5vw, 7.5rem);
            line-height: 0.88;
            letter-spacing: -0.035em;
            color: var(--ink);
        }
        .funding-hero__apr.profit { color: var(--gain); }
        .funding-hero__apr.loss   { color: var(--loss); }
        .funding-hero__apr-suffix {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--ink-3);
            margin-top: 0.875rem;
            margin-bottom: 1.125rem;
        }
        .funding-hero__caption {
            font-family: var(--ff-mono);
            font-size: 0.75rem;
            color: var(--ink-2);
            line-height: 1.6;
            max-width: 42ch;
        }
        .funding-hero__breakdown {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.75rem;
            border-left: 1px solid var(--rule-strong);
            padding-left: 2rem;
            margin: 0;
        }
        .funding-hero__breakdown > div {
            display: grid;
            grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
            align-items: baseline;
            gap: var(--space-sm);
            margin: 0;
        }
        .funding-hero__breakdown dt {
            font-family: var(--ff-mono);
            font-size: 0.59375rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-3);
        }
        .funding-hero__breakdown dd {
            font-family: var(--ff-mono);
            font-size: 0.8125rem;
            color: var(--ink);
            font-variant-numeric: tabular-nums;
            margin: 0;
        }
        @media (max-width: 1100px) {
            .funding-hero__body {
                grid-template-columns: 1fr;
                gap: 1.75rem;
                align-items: start;
            }
            .funding-hero__breakdown {
                border-left: 0;
                border-top: 1px solid var(--rule-strong);
                padding-left: 0;
                padding-top: 1.375rem;
            }
        }
        @media (max-width: 720px) {
            .funding-hero { padding: var(--space-md); }
        }

        /* standard metric */
        .metric-label {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-3);
            margin-bottom: 0.875rem;
        }
        .metric-value {
            font-family: var(--ff-display);
            font-feature-settings: 'tnum' 1, 'lnum' 1;
            font-variation-settings: 'opsz' 96, 'SOFT' 50;
            font-weight: 400;
            font-size: 2rem;
            line-height: 1.0;
            letter-spacing: -0.018em;
            color: var(--ink);
            margin-bottom: 0.5rem;
        }
        .metric-value.mono {
            /* "mono" class on metric value: still use display serif but tabular */
            font-family: var(--ff-display);
            font-variant-numeric: lining-nums tabular-nums;
            letter-spacing: -0.022em;
        }
        .metric-change {
            font-family: var(--ff-mono);
            font-size: 0.6875rem;
            color: var(--ink-2);
            letter-spacing: 0.02em;
        }
        .metric-sparkline {
            position: absolute;
            right: 1.125rem;
            top: 1.375rem;
            width: 3.5rem;
            height: 1.375rem;
            opacity: 0.5;
        }

        /* Funding rate · price history chart (Market Structure tab) */
        .funding-chart {
            background: var(--paper-2);
            border: 1px solid var(--rule-strong);
            padding: 1.25rem 1.5rem 1.5rem;
            margin-bottom: 1.75rem;
            position: relative;
        }
        .funding-chart__head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1.5rem;
            padding-bottom: 0.875rem;
            margin-bottom: 1.125rem;
            border-bottom: 1px solid var(--rule);
            flex-wrap: wrap;
        }
        .funding-chart__title-block { min-width: 0; flex: 1 1 22rem; }
        .funding-chart__title {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 1.25rem;
            letter-spacing: -0.01em;
            color: var(--ink);
        }
        .funding-chart__title::before {
            content: '§';
            font-style: normal;
            color: var(--gold);
            margin-right: 0.5rem;
            font-size: 0.9375rem;
            vertical-align: 2px;
            opacity: 0.85;
        }
        .funding-chart__sub {
            margin-top: 0.375rem;
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--ink-3);
        }
        .funding-chart__controls {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.625rem;
            min-width: 0;
            max-width: 100%;
        }
        .funding-chart__select-label {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-3);
        }
        .funding-chart__select {
            font-family: var(--ff-mono);
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            background: var(--paper-3);
            color: var(--ink);
            border: 1px solid var(--rule-strong);
            padding: 0.375rem 1.75rem 0.375rem 0.625rem;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                              linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
            background-position: calc(100% - 0.875rem) 50%, calc(100% - 0.5rem) 50%;
            background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
            background-repeat: no-repeat;
            transition: border-color 0.15s, color 0.15s;
            /* The picker lists every market, and a select sizes itself to
               its longest option; cap it so it never widens the page. */
            min-width: 0;
            max-width: 100%;
        }
        .funding-chart__select:hover { border-color: var(--gold); color: var(--ink); }
        .funding-chart__select:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
        .funding-chart__status {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-3);
            min-width: 6rem;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .funding-chart__status.fetching { color: var(--gold); }
        .funding-chart__status.error    { color: var(--loss); }
        .funding-chart__canvas-wrap {
            position: relative;
            height: 24rem;
        }
        .funding-chart__empty {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--ff-mono);
            font-size: 0.75rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-4);
        }
        .funding-chart__empty[hidden] { display: none; }
        .funding-chart__legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.625rem 1.5rem;
            margin-top: 1rem;
            padding-top: 0.875rem;
            border-top: 1px solid var(--rule);
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--ink-3);
        }
        .funding-chart__legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .funding-chart__legend-item[hidden] { display: none; }
        .funding-chart__swatch {
            width: 0.6875rem;
            height: 0.6875rem;
            display: inline-block;
            border: 1px solid rgba(14, 12, 9, 0.6);
        }
        .funding-chart__swatch--gain  { background: rgba(143, 170, 114, 0.85); }
        .funding-chart__swatch--loss  { background: rgba(203, 92, 80, 0.85); }
        .funding-chart__swatch--price { background: rgba(176, 161, 135, 0.85); }

        /* CHART CONTAINER */
        .chart-container {
            background: var(--paper-2);
            border: 1px solid var(--rule-strong);
            padding: 1.5rem 1.75rem 1.75rem;
            margin-bottom: 2.25rem;
            position: relative;
            /* Chart.js requires explicit height on its parent to size the
               canvas. Express in rem so the container scales with the user's
               root font-size; canvas resize handler will repaint on zoom. */
            height: 30rem;
        }
        .market-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.875rem 1.375rem;
            justify-content: center;
            margin-top: 0.875rem;
            font-family: var(--ff-mono);
            font-size: 0.75rem;
            color: var(--ink);
            letter-spacing: 0.04em;
        }
        .market-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .market-legend-swatch {
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 2px;
            display: inline-block;
        }
        .market-legend-swatch.is-open-only {
            /* Hollow: the market holds open positions but no slice. */
            box-sizing: border-box;
            border: 1px solid var(--ink-3);
            background: transparent;
        }
        .chart-header {
            display: flex;
            align-items: end;
            justify-content: space-between;
            margin-bottom: 1.375rem;
            padding-bottom: 0.875rem;
            border-bottom: 1px solid var(--rule);
            gap: 1rem;
        }
        .chart-title {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 1.375rem;
            letter-spacing: -0.012em;
            color: var(--ink);
        }
        .chart-title::before {
            content: '§';
            font-style: normal;
            color: var(--gold);
            margin-right: 0.625rem;
            font-size: 1.0625rem;
            vertical-align: 2px;
            opacity: 0.85;
        }

        /* TABLES */
        .table-container {
            background: var(--paper-2);
            border: 1px solid var(--rule-strong);
            margin-bottom: 1.75rem;
            overflow-x: auto;
        }
        .table-header {
            padding: 1.125rem 1.5rem;
            border-bottom: 1px solid var(--rule);
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 1rem;
        }
        .table-title {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 1.1875rem;
            letter-spacing: -0.01em;
            color: var(--ink);
        }
        .table-title::before {
            content: '';
            display: inline-block;
            width: 0.875rem;
            height: 1px;
            background: var(--gold);
            vertical-align: 5px;
            margin-right: 0.75rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }
        th {
            text-align: right;
            padding: 0.875rem 1rem;
            font-family: var(--ff-mono);
            font-size: 0.59375rem;
            font-weight: 500;
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.22em;
            border-bottom: 1px solid var(--rule);
        }
        th:first-child, td:first-child { text-align: left; padding-left: 1.5rem; }
        th:last-child,  td:last-child  { padding-right: 1.5rem; }
        td {
            padding: 0.8125rem 1rem;
            text-align: right;
            font-family: var(--ff-mono);
            font-size: 0.75rem;
            color: var(--ink);
            border-top: 1px solid var(--rule);
            font-variant-numeric: tabular-nums;
        }
        td:first-child:not(.mono) {
            font-family: var(--ff-sans);
            color: var(--ink-2);
            letter-spacing: 0.01em;
        }
        tr:hover td { background: var(--paper-3); }

        /* STACKED-CARD TABLE TRANSFORM — viewports ≤ ~37.5rem render each row
           as a label:value card (label injected from data-label, populated by
           tagCells() in JS). The structural switch (table → block) can't be
           expressed by intrinsic sizing alone, so this is the ONE px breakpoint
           in the file. Threshold sits below the metric-card stack point. */
        @media (max-width: 37.5rem) {
            .table-container { overflow-x: visible; }
            .table-container > table,
            .table-container > table > thead,
            .table-container > table > tbody,
            .table-container > table > tbody > tr,
            .table-container > table > tbody > td,
            .table-container > table > tbody > tr > td { display: block; }

            /* Hide column headers visually but keep them in the a11y tree. */
            .table-container > table > thead {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                white-space: nowrap;
                border: 0;
            }

            .table-container > table > tbody > tr {
                display: grid;
                grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
                column-gap: var(--space-md);
                row-gap: var(--space-2xs);
                padding: var(--space-sm) var(--space-md);
                border-top: 1px solid var(--rule);
            }
            .table-container > table > tbody > tr:first-child { border-top: 0; }
            .table-container > table > tbody > tr:hover td { background: transparent; }

            .table-container > table > tbody > tr > td {
                display: contents;
            }

            /* The pseudo-label is injected from data-label and rendered in the
               first grid track; the cell's own textContent fills the second.
               Cells are styled directly via :where so display:contents works. */
            .table-container > table > tbody > tr > td::before {
                content: attr(data-label);
                font-family: var(--ff-mono);
                font-size: 0.59375rem;
                font-weight: 500;
                color: var(--ink-3);
                text-transform: uppercase;
                letter-spacing: 0.22em;
                text-align: left;
                padding: 0;
                border: 0;
                white-space: normal;
            }

            /* Reset table-cell sizing/alignment now that we're in a grid. */
            .table-container > table > tbody > tr > td {
                padding: 0;
                border: 0;
                text-align: right;
                font-size: 0.8125rem;
            }
            .table-container > table > tbody > tr > td:first-child {
                padding-left: 0;
                text-align: right;
            }
            .table-container > table > tbody > tr > td:last-child {
                padding-right: 0;
            }

            /* Footer notes that used colspan (e.g. cross-margin disclaimer)
               keep their full-row block layout without a label. */
            .table-container > table > tbody > tr > td[colspan] {
                grid-column: 1 / -1;
                text-align: center;
                padding: var(--space-sm) 0;
            }
            .table-container > table > tbody > tr > td[colspan]::before {
                content: none;
            }
        }

        /* GRID LAYOUTS — auto-fit so columns collapse on narrow viewports
           without per-breakpoint media queries. */
        .two-column {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(var(--lane-card), 1fr));
            gap: var(--space-md);
            margin-bottom: var(--space-lg);
        }

        /* OVERVIEW: hero equity curve */
        .chart-container--hero { margin-bottom: 2rem; }
        .pnl-chart__empty {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 1rem;
            text-align: center;
            font-family: var(--ff-mono);
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            color: var(--ink-3);
        }
        .pnl-chart__empty[hidden] { display: none; }

        /* OVERVIEW: editorial section break (asterism between hero + broadsheet) */
        .overview-section-break {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 1.625rem;
            margin: 1.75rem 0 1.625rem;
            pointer-events: none;
        }
        .osb-rule {
            height: 1px;
            min-width: 0;
            background: linear-gradient(90deg, transparent, var(--rule-strong) 60%);
        }
        .osb-rule--right {
            background: linear-gradient(90deg, var(--rule-strong) 40%, transparent);
        }
        .osb-mark {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 400;
            font-size: 1.375rem;
            color: var(--gold);
            line-height: 1;
            font-variation-settings: 'opsz' 60;
            user-select: none;
        }

        /* OVERVIEW: 3-up broadsheet (Activity / Statistics / Time)
           auto-fit collapses to 2-col, then 1-col, as container narrows. */
        .broadsheet {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(var(--lane-card), 1fr));
            gap: 0;
            margin-bottom: var(--space-lg);
            border-top: 1px solid var(--rule-strong);
            border-bottom: 1px solid var(--rule-strong);
            background: linear-gradient(180deg, rgba(215,172,96,0.025), transparent 50%);
            container-type: inline-size;
        }
        .broadsheet-col {
            padding: 1.75rem 1.875rem;
            border-right: 1px solid var(--rule);
            position: relative;
            min-width: 0;
        }
        .broadsheet-col:last-child { border-right: 0; }
        .broadsheet-head {
            display: flex;
            align-items: baseline;
            gap: 0.875rem;
            padding-bottom: 0.875rem;
            margin-bottom: 1.125rem;
            border-bottom: 1px solid var(--rule);
        }
        .broadsheet-eyebrow {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 400;
            font-size: 1.375rem;
            color: var(--gold);
            letter-spacing: 0;
            line-height: 1;
            font-variation-settings: 'opsz' 60, 'SOFT' 80;
            flex-shrink: 0;
        }
        .broadsheet-title {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 400;
            font-size: 1.1875rem;
            line-height: 1.15;
            color: var(--ink);
            letter-spacing: -0.012em;
            font-variation-settings: 'opsz' 48, 'SOFT' 80;
            margin: 0;
        }
        .broadsheet-table {
            width: 100%;
            border-collapse: collapse;
        }
        .broadsheet-table tr { border-bottom: 1px dotted var(--rule); }
        .broadsheet-table tr:last-child { border-bottom: 0; }
        .broadsheet-table td {
            padding: 0.6875rem 0;
            font-size: 0.8125rem;
            color: var(--ink-2);
            letter-spacing: 0.01em;
            border: 0;
        }
        .broadsheet-table td:last-child {
            text-align: right;
            color: var(--ink);
            font-size: 0.875rem;
        }
        .broadsheet-table tr:hover td { background: transparent; }
        .broadsheet-col .canvas-wrap { margin-bottom: 0.875rem; }
        /* Broadsheet border-handling switches via container query when stacked.
           Below ~36rem container width the columns are vertically stacked,
           so border-right (between adjacent cols) becomes border-bottom. */
        @container (max-width: 36rem) {
            .broadsheet-col { border-right: 0; border-bottom: 1px solid var(--rule); }
            .broadsheet-col:last-child { border-bottom: 0; }
        }

        /* STRATEGY EDGE — phase diagram (win rate × profit factor).
           Editorial composition: square SVG plot on the left, vertical
           verdict rail on the right. Quadrants render as soft-tinted
           backdrops; iso-R:R curves overlay as gold hairlines so the
           user can read off the relationship without leaving the plot. */
        .strategy-edge {
            background: var(--paper-2);
            border: 1px solid var(--rule-strong);
            margin: 1.75rem 0;
            position: relative;
            overflow: hidden;
        }
        .strategy-edge::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 5.5rem; height: 1px;
            background: var(--gold);
        }
        .se-head {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto;
            column-gap: 1.125rem;
            row-gap: 0.25rem;
            padding: 1.75rem 2rem 1.375rem;
            border-bottom: 1px solid var(--rule);
            align-items: baseline;
        }
        .se-eyebrow {
            grid-row: 1 / span 2;
            font-family: var(--ff-mono);
            font-size: 0.6875rem;
            letter-spacing: 0.28em;
            color: var(--gold);
            align-self: start;
            padding-top: 0.5rem;
        }
        .se-title {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 380;
            font-size: clamp(1.75rem, 3vw, 2.375rem);
            line-height: 1.02;
            color: var(--ink);
            letter-spacing: -0.015em;
            margin: 0;
        }
        .se-deck {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 0.875rem;
            color: var(--ink-3);
            letter-spacing: 0.005em;
        }
        .se-body {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
            gap: 0;
            container-type: inline-size;
        }
        .se-plot {
            padding: 1.5rem 1rem 1.75rem 1.5rem;
            border-right: 1px solid var(--rule);
            position: relative;
        }
        .se-svg {
            display: block;
            width: 100%;
            height: auto;
            font-family: var(--ff-mono);
        }
        .se-svg .se-axis-label {
            font-family: var(--ff-mono);
            font-size: 0.59375rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            fill: var(--ink-3);
        }
        .se-svg .se-tick {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            fill: var(--ink-4);
        }
        .se-svg .se-quadrant-label {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 420;
            font-size: 1.0625rem;
            letter-spacing: 0.005em;
            opacity: 0.92;
        }
        .se-svg .se-quadrant-sublabel {
            font-family: var(--ff-mono);
            font-size: 0.5625rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            fill: var(--ink-3);
        }
        .se-svg .se-iso-label {
            font-family: var(--ff-mono);
            font-size: 0.5625rem;
            letter-spacing: 0.18em;
            fill: var(--gold);
            opacity: 0.7;
        }
        .se-aside {
            padding: 1.75rem 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.625rem;
            /* Distribute verdict / readout / benchmarks across the full
               rail height so the right column doesn't leave a tall void
               under the benchmark list when the plot is square. */
            justify-content: space-between;
        }
        .se-verdict-block { display: flex; flex-direction: column; gap: 0.5rem; }
        .se-verdict-eyebrow {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--ink-3);
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
        }
        .se-verdict-eyebrow::before {
            content: '';
            width: 1rem; height: 1px;
            background: var(--gold);
        }
        .se-verdict-name {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 380;
            font-size: clamp(2.25rem, 4.4vw, 3.5rem);
            line-height: 0.96;
            letter-spacing: -0.025em;
            color: var(--ink);
            margin: 0;
        }
        .se-verdict-name.is-excellent { color: var(--gain); }
        .se-verdict-name.is-strong    { color: var(--gold); }
        .se-verdict-name.is-failing,
        .se-verdict-name.is-dangerous { color: var(--loss); }
        .se-verdict-name.is-pending   { color: var(--ink-3); }
        .se-verdict-desc {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 0.90625rem;
            line-height: 1.45;
            color: var(--ink-2);
            margin: 0;
            max-width: 38ch;
        }
        .se-readout {
            display: grid;
            grid-template-columns: 1fr;
            row-gap: 0.75rem;
            margin: 0;
            padding: 1.125rem 0;
            border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule);
        }
        .se-readout > div {
            display: grid;
            /* dt column auto-sizes to the widest label in the readout so
               every row uses the same dt width without us hand-tuning a
               rem value that breaks under browser zoom or non-default
               root font sizes. The 1fr value column absorbs the rest. */
            grid-template-columns: max-content 1fr;
            align-items: baseline;
            column-gap: 1.75rem;
        }
        .se-readout dt {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: var(--ink-3);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            /* Belt-and-braces: never let a dt wrap to a second line. */
            white-space: nowrap;
        }
        .se-readout dt::before {
            content: '';
            width: 0.3125rem; height: 0.3125rem;
            border: 1px solid var(--gold);
            transform: rotate(45deg);
            opacity: 0.7;
            flex: none;
        }
        .se-readout dd {
            font-family: var(--ff-mono);
            font-feature-settings: 'tnum' 1, 'lnum' 1;
            font-size: 1.125rem;
            color: var(--ink);
            margin: 0;
        }
        .se-benchmark {
            display: flex;
            flex-direction: column;
            gap: 0.625rem;
        }
        .se-benchmark-eyebrow {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--ink-3);
        }
        .se-benchmark ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .se-benchmark li {
            display: grid;
            grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
            align-items: baseline;
            gap: 0.75rem;
            font-family: var(--ff-display);
            font-style: italic;
            font-size: 0.84375rem;
            color: var(--ink-2);
            letter-spacing: 0.005em;
        }
        .se-bench-tick {
            font-family: var(--ff-mono);
            font-style: normal;
            font-size: 0.625rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-3);
            border-left: 2px solid var(--rule-strong);
            padding-left: 0.625rem;
            white-space: nowrap;
        }
        .se-bench-tick.se-bench-tick--gold { color: var(--gold); border-left-color: var(--gold); }

        /* .se-body auto-fits at <22rem-twice. Border switch fires when stacked. */
        @container (max-width: 43rem) {
            .se-plot { border-right: 0; border-bottom: 1px solid var(--rule); }
        }
        @container (max-width: 30rem) {
            .se-head  { padding: var(--space-md) var(--space-sm) var(--space-sm); }
            .se-aside { padding: var(--space-md) var(--space-sm); }
            .se-plot  { padding: var(--space-sm) var(--space-2xs) var(--space-md); }
        }

        /* RISK BAR */
        .risk-bar {
            height: 4px;
            background: var(--paper-3);
            margin-top: 0.75rem;
            position: relative;
            overflow: hidden;
        }
        .risk-bar-fill {
            height: 100%;
            background: var(--ink-blue);
            position: absolute;
            left: 0; top: 0;
            transition: width 0.6s cubic-bezier(0.2, 0.7, 0.1, 1);
        }

        /* HEATMAP */
        .heatmap {
            display: grid;
            grid-template-columns: repeat(24, 1fr);
            grid-template-rows: repeat(7, 1fr);
            gap: 2px;
            margin: 1.25rem 1.5rem 1.5rem;
            height: 10rem;
        }
        .heatmap-cell {
            background: var(--paper-3);
            transition: outline 0.15s, transform 0.15s;
            cursor: pointer;
        }
        .heatmap-cell:hover {
            outline: 1px solid var(--gold);
            outline-offset: -1px;
            z-index: 2;
            position: relative;
        }

        .flip-tag {
            margin-left: 0.375rem;
            color: var(--gold);
            cursor: help;
        }

        /* DISTRIBUTION BARS */
        .distribution-bars {
            display: flex;
            align-items: flex-end;
            height: 7.5rem;
            gap: 3px;
            padding: 1.5rem;
        }
        .distribution-bar {
            flex: 1;
            background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink-3) 100%);
            opacity: 0.75;
            min-height: 2px;
            transition: opacity 0.2s;
        }
        .distribution-bar:hover { opacity: 1; }
        .distribution-bar.is-gain { background: var(--gain); opacity: 0.55; }
        .distribution-bar.is-loss { background: var(--loss); opacity: 0.55; }

        /* Labeled histogram rows (renderHistogram): label | bar | count */
        .distribution-bars.distribution-rows {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr) max-content;
            align-items: center;
            column-gap: 0.75rem;
            row-gap: 0.375rem;
            height: auto;
        }
        .distribution-rows .distribution-label,
        .distribution-rows .distribution-count {
            font-size: 0.6875rem;
            white-space: nowrap;
        }
        .distribution-rows .distribution-label { color: var(--ink-2); }
        .distribution-rows .distribution-count { color: var(--ink); text-align: right; }
        .distribution-rows .distribution-track {
            height: 0.625rem;
            background: var(--paper-4);
        }
        .distribution-rows .distribution-bar {
            height: 100%;
            min-height: 0;
            border-radius: 0 2px 2px 0;
        }
        .distribution-rows .distribution-empty {
            grid-column: 1 / -1;
            margin: 0;
            font-size: 0.75rem;
            color: var(--ink-3);
        }

        /* MINI CHART (canvas) */
        .mini-chart { width: 100%; height: 3.75rem; margin-top: 0.875rem; }

        [title]:hover { cursor: help; }

        .error-banner {
            font-family: var(--ff-mono);
            font-size: 0.6875rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--loss);
            background: var(--paper-3);
            border: 1px solid var(--loss);
            padding: 0.5rem 0.75rem;
            margin: 0 0 1.75rem;
            overflow-wrap: anywhere;
        }

        /* selection */
        ::selection { background: var(--gold); color: var(--paper); }

        /* scrollbar */
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: var(--paper-2); }
        ::-webkit-scrollbar-thumb { background: var(--rule-strong); border: 2px solid var(--paper-2); }
        ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

        /* stagger reveal on tab activation */
        .tab-content.active .metric-card { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
        .tab-content.active .metric-card:nth-child(1) { animation-delay: 0.04s; }
        .tab-content.active .metric-card:nth-child(2) { animation-delay: 0.10s; }
        .tab-content.active .metric-card:nth-child(3) { animation-delay: 0.16s; }
        .tab-content.active .metric-card:nth-child(4) { animation-delay: 0.22s; }
        .tab-content.active .metric-card:nth-child(5) { animation-delay: 0.28s; }
        .tab-content.active .metric-card:nth-child(6) { animation-delay: 0.34s; }
        .tab-content.active .chart-container,
        .tab-content.active .table-container { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.1, 1) both; animation-delay: 0.16s; }

        /* ─── NAMEPLATE BLOCK ─── */
        .nameplate-block {
            display: grid;
            grid-template-columns: minmax(0, auto) 1fr;
            align-items: end;
            gap: 2.25rem;
            padding: 0.25rem 0 1.375rem;
            margin-bottom: 1.375rem;
            border-bottom: 1px solid var(--rule-strong);
            position: relative;
        }
        .nameplate-block::after {
            content: '';
            position: absolute;
            left: 0; right: 0; bottom: -4px;
            height: 1px;
            background: var(--rule);
            opacity: 0.7;
        }
        .nameplate {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: clamp(3.5rem, 8.4vw, 7.25rem);
            line-height: 0.84;
            letter-spacing: -0.045em;
            color: var(--ink);
            font-variation-settings: 'opsz' 144, 'SOFT' 100;
            text-rendering: geometricPrecision;
            display: inline-flex;
            align-items: baseline;
            user-select: none;
            white-space: nowrap;
        }
        .nameplate .np-domain { color: var(--ink); }
        .nameplate .np-dot {
            color: var(--ink-3);
            margin: 0 -0.04em;
            font-style: normal;
            font-feature-settings: 'tnum' 0;
        }
        .nameplate .np-tld { color: var(--gold); }

        .nameplate-kicker {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.625rem;
            text-align: right;
            padding-bottom: 0.625rem;
        }
        .kicker-mono {
            font-family: var(--ff-mono);
            font-size: 0.625rem;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--ink-3);
        }
        .kicker-mono .kicker-strike {
            color: var(--ink-4);
            text-decoration: line-through;
            text-decoration-color: var(--rule-strong);
            text-decoration-thickness: 1px;
        }
        .kicker-mono .gold { color: var(--gold); }
        .kicker-italic {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 1rem;
            line-height: 1.4;
            letter-spacing: -0.005em;
            color: var(--ink-2);
            font-variation-settings: 'opsz' 36, 'SOFT' 80;
            max-width: 34ch;
        }
        @media (max-width: 880px) {
            .nameplate-block { grid-template-columns: 1fr; gap: 0.75rem; }
            .nameplate-kicker { align-items: flex-start; text-align: left; padding-bottom: 0; }
        }

        /* ─── SLOGAN STRAPLINE ─── */
        .nameplate-slogan {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 1.75rem;
            margin: 1.625rem 0 0;
            padding-top: 1.375rem;
            border-top: 1px solid var(--rule);
        }
        .nameplate-slogan::before,
        .nameplate-slogan::after {
            content: '';
            height: 1px;
            min-width: 0;
            background: linear-gradient(90deg, transparent, var(--rule-strong) 60%);
        }
        .nameplate-slogan::after {
            background: linear-gradient(90deg, var(--rule-strong) 40%, transparent);
        }
        .nameplate-slogan-text {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: clamp(1.125rem, 2.1vw, 1.625rem);
            line-height: 1.35;
            letter-spacing: -0.008em;
            color: var(--ink);
            font-variation-settings: 'opsz' 60, 'SOFT' 80;
            text-align: center;
            text-wrap: balance;
        }
        @media (max-width: 880px) {
            .nameplate-slogan { grid-template-columns: 1fr; gap: 0; }
            .nameplate-slogan::before,
            .nameplate-slogan::after { display: none; }
        }

        /* ─── DISCLOSURE STRIP ─── */
        .disclosure-strip {
            position: relative;
            margin: 1.375rem 0 1.75rem;
            padding: 0.875rem 1.375rem;
            display: grid;
            grid-template-columns: max-content 1fr max-content;
            gap: 1.375rem;
            align-items: center;
            background: linear-gradient(180deg, rgba(215,172,96,0.05), rgba(215,172,96,0.012));
            border-top: 1px solid rgba(215,172,96,0.32);
            border-bottom: 1px solid rgba(215,172,96,0.18);
        }
        .disclosure-strip-eyebrow {
            font-family: var(--ff-mono);
            font-size: 0.59375rem;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: var(--gold);
            border: 1px solid rgba(215,172,96,0.5);
            padding: 0.3125rem 0.625rem 0.25rem;
            white-space: nowrap;
        }
        .disclosure-strip-body {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 0.875rem;
            line-height: 1.5;
            color: var(--ink-2);
            letter-spacing: 0.005em;
            font-variation-settings: 'opsz' 24, 'SOFT' 60;
        }
        .disclosure-strip-body strong {
            font-family: var(--ff-sans);
            font-style: normal;
            font-weight: 500;
            letter-spacing: 0.015em;
            color: var(--ink);
        }
        .disclosure-strip-body em {
            font-style: italic;
            color: var(--gold);
        }
        .disclosure-strip-tags {
            display: flex;
            gap: 0;
            font-family: var(--ff-mono);
            font-size: 0.59375rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--ink-3);
            white-space: nowrap;
        }
        .disclosure-strip-tags span:not(:first-child)::before {
            content: '·';
            color: var(--ink-4);
            margin: 0 0.75rem;
        }
        @media (max-width: 880px) {
            .disclosure-strip {
                grid-template-columns: 1fr;
                gap: 0.75rem;
                padding: 0.875rem 1rem;
            }
            .disclosure-strip-tags { flex-wrap: wrap; }
        }

        /* ─── COLOPHON FOOTER ─── */
        .colophon {
            margin-top: 6rem;
            padding-top: 2.25rem;
            border-top: 1px solid var(--rule-strong);
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.75rem;
        }
        .colophon::before {
            content: '';
            position: absolute;
            top: -5px; left: 0; right: 0;
            height: 1px;
            background: var(--rule);
            opacity: 0.7;
        }
        .colophon-col { display: flex; flex-direction: column; }
        .colophon-title {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 400;
            font-size: 1.5rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
            color: var(--ink);
            margin-bottom: 1rem;
            font-variation-settings: 'opsz' 60, 'SOFT' 80;
        }
        .colophon dl { margin: 0; }
        .colophon dt {
            font-family: var(--ff-mono);
            font-size: 0.59375rem;
            text-transform: uppercase;
            letter-spacing: 0.28em;
            color: var(--gold);
            margin-bottom: 0.375rem;
            margin-top: 0.875rem;
        }
        .colophon dt:first-of-type { margin-top: 0; }
        .colophon dd {
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 0.875rem;
            line-height: 1.55;
            color: var(--ink-2);
            margin: 0;
            letter-spacing: 0.002em;
            font-variation-settings: 'opsz' 24, 'SOFT' 60;
        }
        .colophon dd strong {
            font-family: var(--ff-sans);
            font-style: normal;
            font-weight: 500;
            color: var(--ink);
            letter-spacing: 0.015em;
        }
        .colophon dd em { color: var(--gold); }
        .colophon dd a {
            color: var(--ink);
            text-decoration: none;
            border-bottom: 1px dotted var(--rule-strong);
            transition: color 0.15s, border-color 0.15s;
        }
        .colophon dd a:hover {
            color: var(--gold);
            border-bottom-color: var(--gold);
        }
        .colophon-imprint {
            grid-column: 1 / -1;
            margin-top: 2.25rem;
            padding-top: 1.375rem;
            border-top: 1px solid var(--rule);
            font-family: var(--ff-display);
            font-style: italic;
            font-weight: 350;
            font-size: 0.84375rem;
            letter-spacing: 0.02em;
            color: var(--ink-3);
            text-align: center;
            font-variation-settings: 'opsz' 36, 'SOFT' 80;
        }
        .colophon-imprint strong {
            font-family: var(--ff-sans);
            font-style: normal;
            font-weight: 500;
            color: var(--ink);
            letter-spacing: 0.04em;
        }
        .colophon-imprint .vol {
            font-family: var(--ff-mono);
            font-style: normal;
            font-size: 0.6875rem;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: var(--gold);
            margin: 0 0.25rem;
        }
        @media (max-width: 880px) {
            .colophon { grid-template-columns: 1fr; gap: 1.75rem; }
        }

        /* Tone classes over a component's own ink colour: these selectors
           match or outrank it and come after it. */
        .metric-value.profit, .metric-change.profit, .broadsheet-table td.profit { color: var(--gain); }
        .metric-value.loss,   .metric-change.loss,   .broadsheet-table td.loss   { color: var(--loss); }
        .metric-value.zero,   .metric-change.zero,   .broadsheet-table td.zero   { color: var(--ink-3); }
        .metric-value.warning, .metric-change.warning, .broadsheet-table td.warning { color: var(--warn); }