:root {
      color-scheme: dark;
      --lime: #d4fb46;
      --grass: #18a957;
      --ink: #07150e;
      --panel: #10251a;
      --panel-2: #173326;
      --muted: #a9bcb0;
      --line: rgba(255,255,255,.13);
    }
    * { box-sizing: border-box; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at 82% 8%, rgba(212,251,70,.13), transparent 22rem),
        repeating-linear-gradient(105deg, transparent 0 80px, rgba(255,255,255,.018) 80px 160px),
        #07150e;
      color: #f4f7f2;
      font-family: Inter, system-ui, sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
    }
    body::before {
      content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    }
    .hero > * { animation: hero-rise .75s both cubic-bezier(.16,1,.3,1); }
    .hero h1 { animation-delay: .08s; }
    .hero .lede { animation-delay: .16s; }
    .hero p:last-child { animation-delay: .24s; }
    @keyframes hero-rise { from { opacity: 0; transform: translateY(28px); filter: blur(7px); } }
    a { color: var(--lime); text-underline-offset: 3px; }
    .scroll-meter { position: fixed; inset: 0 0 auto; height: 4px; z-index: 20; background: rgba(255,255,255,.06); }
    .scroll-meter span { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; animation: scroll-progress linear; animation-timeline: scroll(); }
    @keyframes scroll-progress { to { transform: scaleX(1); } }
    .lab-nav { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
    .lab-brand { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-weight: 800; }
    .lab-ball { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: 0 0 24px rgba(212,251,70,.25); }
    .lab-links { display: flex; gap: 18px; font-size: 14px; font-weight: 700; }
    .lab-links a { color: var(--muted); text-decoration: none; }
    .lab-links a:hover { color: white; }
    main { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 42px 24px 90px; }
    nav.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
    nav.crumbs a { color: var(--muted); }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
    h1, h2, .display { font-family: Anton, Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .015em; }
    h1 { max-width: 820px; font-size: clamp(46px, 10vw, 88px); line-height: .94; margin: 0 0 18px; text-wrap: balance; }
    h2 { font-size: clamp(28px, 5vw, 42px); line-height: 1; margin: 64px 0 20px; }
    p.lede { max-width: 720px; color: #d2ddd6; font-size: clamp(17px, 2.4vw, 21px); margin: 0 0 26px; }
    .cta {
      display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 6px;
      background: var(--lime); color: var(--ink); font-weight: 800; text-decoration: none;
      box-shadow: 0 5px 0 #8fb623; transition: transform .2s, box-shadow .2s;
    }
    .cta::after { content: "→"; }
    .cta:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #8fb623; }
    .hero { position: relative; padding: 34px 0 20px; overflow: clip; }
    .hero::after { content: ""; position: absolute; right: -70px; top: 10px; width: 250px; height: 250px; border: 2px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: inset 0 0 0 48px transparent, inset 0 0 0 50px rgba(255,255,255,.04); pointer-events: none; }
    .scoreboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 34px 0; }
    .stat { min-height: 118px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(31,67,48,.9), rgba(12,33,22,.9)); overflow: hidden; }
    .stat strong { display: block; color: var(--lime); font: 400 clamp(28px,5vw,46px)/1 Anton, Impact, sans-serif; }
    .stat span { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .stat { animation: stat-kick .65s both cubic-bezier(.16,1,.3,1); }
    .stat:nth-child(2) { animation-delay: .08s; }
    .stat:nth-child(3) { animation-delay: .16s; }
    .stat:nth-child(4) { animation-delay: .24s; }
    @keyframes stat-kick { from { opacity: 0; transform: translateY(24px) scale(.94); } }
    .section-kicker { color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    ul.clues { list-style: none; padding: 0; margin: 0; }
    ul.clues li {
      padding: 13px 15px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 6px;
      background: var(--panel); font-weight: 700;
    }
    .chip-wrap ul.clues { display: flex; flex-wrap: wrap; gap: 9px; }
    .chip-wrap ul.clues li { margin: 0; padding: 9px 13px; border-color: rgba(212,251,70,.25); border-radius: 999px; background: rgba(212,251,70,.07); }
    .chip-cloud { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; list-style: none; }
    .chip-cloud li { margin: 0; padding: 9px 13px; border: 1px solid rgba(212,251,70,.25); border-radius: 999px; background: rgba(212,251,70,.07); }
    .chip-cloud a { color: white; text-decoration: none; }
    .bars { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(4,20,12,.56); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
    .bar-row { display: grid; grid-template-columns: minmax(160px, 1.15fr) 3fr 52px; align-items: center; gap: 18px; min-height: 56px; padding: 10px 14px; border-radius: 9px; background: rgba(18,48,32,.72); }
    .bar-label { font-size: 14px; font-weight: 800; }
    .bar-track { position: relative; height: 12px; overflow: visible; border-radius: 99px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 25%), rgba(255,255,255,.055); }
    .bar-fill { display: block; position: relative; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0fbd62, #8de044 74%, var(--lime)); box-shadow: 0 0 20px rgba(105,220,72,.16); transform-origin: left; animation: grow .8s both cubic-bezier(.16,1,.3,1); animation-timeline: view(); animation-range: entry 10% cover 30%; }
    .bar-fill::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: white; box-shadow: 0 0 0 3px var(--lime), 0 0 14px var(--lime); transform: translateY(-50%); }
    .bar-value { color: var(--lime); font-weight: 800; font-variant-numeric: tabular-nums; }
    @keyframes grow { from { transform: scaleX(.08); opacity: .4; } }
    .leader-chart { display: grid; gap: 7px; margin: 0; padding: 14px; list-style: none; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(19,55,35,.82), rgba(4,21,13,.86)); box-shadow: 0 28px 80px rgba(0,0,0,.26); counter-reset: rank; }
    .leader-chart li { counter-increment: rank; display: grid; grid-template-columns: 38px minmax(150px,1fr) 3fr auto; align-items: center; gap: 14px; min-height: 54px; padding: 7px 11px; border-radius: 9px; transition: background .18s, transform .18s; }
    .leader-chart li::before { content: counter(rank, decimal-leading-zero); color: var(--muted); font: 400 18px Anton, Impact, sans-serif; }
    .leader-chart li:is(:nth-child(1),:nth-child(2),:nth-child(3))::before { color: var(--lime); }
    .leader-chart li:hover { background: rgba(212,251,70,.06); transform: translateX(4px); }
    .leader-chart a { color: white; font-weight: 850; text-decoration: none; }
    .leader-chart small { min-width: 82px; color: var(--muted); text-align: right; }
    .mini-track { position: relative; height: 10px; border-radius: 99px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 25%), rgba(255,255,255,.04); }
    .mini-track i { display: block; position: relative; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--grass), var(--lime)); box-shadow: 0 0 15px rgba(212,251,70,.12); }
    .player-directory { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: rank; }
    .player-directory li { counter-increment: rank; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(16,42,27,.7); }
    .player-directory li::before { content: counter(rank, decimal-leading-zero); color: #789082; font: 400 15px Anton, Impact, sans-serif; }
    .player-directory a { color: white; font-weight: 800; text-decoration: none; }
    .player-directory small { color: var(--muted); font-size: 11px; text-align: right; }
    .mix-panel { display: grid; grid-template-columns: minmax(210px,.8fr) 1.3fr; align-items: center; gap: clamp(28px,6vw,72px); margin: 34px 0 10px; padding: clamp(24px,5vw,46px); border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(22,63,39,.86), rgba(5,24,15,.9)); box-shadow: 0 30px 90px rgba(0,0,0,.28); }
    .mix-ring { display: grid; place-items: center; width: min(100%,250px); aspect-ratio: 1; margin: auto; border-radius: 50%; background: conic-gradient(#d4fb46 0 16%, #48d875 16% 48%, #19a957 48% 64%, #087846 64% 100%); box-shadow: 0 0 0 12px rgba(255,255,255,.025), 0 0 60px rgba(105,220,72,.12); }
    .mix-ring::before { content: ""; grid-area: 1/1; width: 61%; aspect-ratio: 1; border-radius: 50%; background: #0a2115; box-shadow: inset 0 0 0 1px var(--line); }
    .mix-ring strong { grid-area: 1/1; z-index: 1; color: white; font: 400 58px/1 Anton, Impact, sans-serif; }
    .mix-ring small { grid-area: 1/1; z-index: 1; align-self: end; margin-bottom: 27%; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .mix-ring { animation: ring-arrive 1.15s both cubic-bezier(.16,1,.3,1); animation-timeline: view(); animation-range: entry 0 cover 42%; }
    @keyframes ring-arrive { from { transform: rotate(-110deg) scale(.48); filter: blur(10px); } }
    .mix-legend { display: grid; gap: 16px; margin: 0; }
    .mix-item { --c: var(--lime); display: grid; grid-template-columns: 13px minmax(0,1fr) auto; align-items: center; gap: 12px; }
    .mix-item::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c), transparent 35%); }
    .mix-item:nth-child(2) { --c: #48d875; }
    .mix-item:nth-child(3) { --c: #19a957; }
    .mix-item:nth-child(4) { --c: #087846; }
    .mix-item dt { font-weight: 800; }
    .mix-item dd { margin: 0; color: var(--c); font: 400 28px/1 Anton, Impact, sans-serif; }
    .category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
    .category-grid li { min-height: 68px; }
    .category-grid a { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; padding: 14px 16px; border: 1px solid rgba(255,255,255,.09); border-left: 3px solid var(--group-color,var(--lime)); border-radius: 8px; background: rgba(16,45,29,.76); color: white; font-weight: 800; text-decoration: none; transition: border-color .18s, background .18s, transform .18s; }
    .category-grid a::after { content: "\2197"; color: var(--group-color,var(--lime)); }
    .category-grid a:hover { border-color: var(--group-color,var(--lime)); background: rgba(25,67,43,.9); transform: translateY(-2px); }
    .category-grid a > span { display: grid; gap: 4px; }
    .category-grid small { color: var(--muted); font-size: 11px; font-weight: 650; }
    .category-grid [data-group="trophy"] { --group-color: #48d875; }
    .category-grid [data-group="career"] { --group-color: #19a957; }
    .category-grid [data-group="name"] { --group-color: #087846; }
    .criteria-chart { display: grid; gap: 8px; margin: 0; padding: 14px; list-style: none; border: 1px solid var(--line); border-radius: 16px; background: rgba(4,20,12,.62); box-shadow: 0 28px 80px rgba(0,0,0,.24); }
    .criteria-chart li { display: grid; grid-template-columns: minmax(190px,1.2fr) 2.4fr minmax(170px,auto); align-items: center; gap: 16px; min-height: 60px; padding: 9px 13px; border-radius: 9px; background: rgba(16,47,30,.74); animation: chart-row .7s both cubic-bezier(.16,1,.3,1); animation-delay: var(--d); animation-timeline: view(); animation-range: entry 0 cover 28%; }
    .criteria-chart a { color: white; font-weight: 850; text-decoration: none; }
    .criteria-chart small { color: var(--muted); text-align: right; }
    .criteria-chart small strong { color: white; }
    .criteria-measures { display: grid; gap: 6px; }
    .criteria-measures i { display: block; width: var(--w); height: 7px; border-radius: 99px; transform-origin: left; animation: grow 1s both cubic-bezier(.16,1,.3,1); animation-delay: var(--d); }
    .players-measure { background: linear-gradient(90deg,#23c86c,var(--lime)); box-shadow: 0 0 14px rgba(212,251,70,.14); }
    .editions-measure { background: #357b59; }
    @keyframes chart-row { from { transform: translateX(-42px); } }
    .comparison-intro { margin-top: 68px; }
    .comparison-intro h2 { margin-top: 12px; }
    .comparison-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .comparison-legend span { display: inline-flex; align-items: center; gap: 8px; }
    .comparison-legend span::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #42c976; box-shadow: 0 0 10px rgba(66,201,118,.48); }
    .comparison-legend .legend-player::before { background: #ff4f49; box-shadow: 0 0 0 3px rgba(255,79,73,.2), 0 0 16px rgba(255,79,73,.5); }
    .comparison-charts { display: grid; gap: 30px; margin-top: 28px; }
    .comparison-chart { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 70% 22%, rgba(55,140,84,.15), transparent 36%), rgba(3,18,11,.84); box-shadow: 0 30px 90px rgba(0,0,0,.28); }
    .comparison-chart > header { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 16px; padding: 24px 26px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
    .comparison-chart h3 { margin: 0; font: 400 clamp(24px,4vw,34px)/1 Anton,Impact,sans-serif; text-transform: uppercase; letter-spacing: .02em; }
    .comparison-chart header p { max-width: 680px; margin: 7px 0 0; color: var(--muted); font-size: 14px; }
    .chart-number { color: var(--lime); font: 400 21px/1 Anton,Impact,sans-serif; }
    .comparison-plot { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: rgba(212,251,70,.45) transparent; }
    .comparison-plot svg { display: block; width: 100%; min-width: 620px; height: auto; }
    .comparison-grid path { fill: none; stroke: rgba(255,255,255,.075); stroke-width: 1; stroke-dasharray: 3 8; }
    .comparison-ticks text { fill: #71867a; font: 700 10px Inter,system-ui,sans-serif; }
    .comparison-axis { fill: var(--muted); font: 800 11px Inter,system-ui,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
    .compare-point circle { fill: #42c976; fill-opacity: .64; stroke: rgba(226,255,234,.66); stroke-width: 1.5; filter: drop-shadow(0 0 8px rgba(66,201,118,.38)); transform-box: fill-box; transform-origin: center; transition: transform .18s, fill-opacity .18s, stroke-width .18s; animation: bubble-in .7s both cubic-bezier(.16,1,.3,1); }
    .compare-point:hover circle { fill-opacity: .95; stroke-width: 3; transform: scale(1.15); }
    .current-player circle { fill: #ff4f49; fill-opacity: .96; stroke: #ffd3d0; stroke-width: 3; filter: drop-shadow(0 0 14px rgba(255,79,73,.72)); }
    .current-player line { stroke: #ff9a95; stroke-width: 1.5; }
    .current-player text { fill: #fff5f4; paint-order: stroke; stroke: #07150e; stroke-width: 4px; stroke-linejoin: round; font: 900 13px Inter,system-ui,sans-serif; }
    .comparison-chart > footer { display: grid; grid-template-columns: minmax(150px,.65fr) 1.35fr; gap: 16px; margin: 0; padding: 18px 26px 22px; border-top: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: 13px; }
    .comparison-chart > footer strong { color: #ff7b75; }
    .player-landscape { display: grid; grid-template-columns: minmax(0,1fr) 245px; gap: 20px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 55% 35%,rgba(54,153,91,.16),transparent 45%),rgba(4,20,12,.72); box-shadow: 0 34px 100px rgba(0,0,0,.3); overflow: hidden; }
    .player-landscape svg { display: block; width: 100%; height: auto; overflow: visible; }
    .plot-grid path:first-child { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 2; }
    .plot-grid path:last-child { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1; stroke-dasharray: 3 7; }
    .axis-label { fill: var(--muted); font: 800 11px Inter,system-ui,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
    .player-point { color: #d4fb46; }
    .player-point.tone-1 { color: #d4fb46; }
    .player-point.tone-2 { color: #55e386; }
    .player-point.tone-3 { color: #20b966; }
    .player-point.tone-0 { color: #0d8050; }
    .player-point circle { fill: currentColor; fill-opacity: .76; stroke: rgba(255,255,255,.62); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: bubble-in .8s both cubic-bezier(.16,1,.3,1); animation-delay: var(--d); filter: drop-shadow(0 0 8px color-mix(in srgb,currentColor,transparent 35%)); transition: fill-opacity .2s, stroke-width .2s, transform .2s; }
    .player-point text { fill: #07150e; font: 900 10px Inter,system-ui,sans-serif; text-anchor: middle; pointer-events: none; animation: fade-in .5s both; animation-delay: calc(var(--d) + .35s); }
    .player-point:hover circle { fill-opacity: 1; stroke-width: 3; transform: scale(1.18); }
    @keyframes bubble-in { from { opacity: 0; transform: scale(0); } }
    @keyframes fade-in { from { opacity: 0; } }
    .landscape-key { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
    .landscape-key li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 2px 8px; align-items: center; padding: 7px 8px; border-radius: 7px; background: rgba(255,255,255,.035); }
    .landscape-key li > span { grid-row: 1 / 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 900; }
    .landscape-key a { color: white; font-size: 13px; font-weight: 850; text-decoration: none; }
    .landscape-key small { color: var(--muted); font-size: 9px; }
    .chart-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
    .cell {
      padding: 16px; border: 1px solid rgba(255,255,255,.15); background: linear-gradient(145deg, rgba(24,169,87,.28), rgba(10,45,25,.8)); min-height: 128px;
    }
    .cell h3 { margin: 0 0 8px; font-size: 13px; color: var(--lime); font-weight: 800; }
    .cell p { margin: 0; color: #e2ebe5; font-size: 14px; }
    .cell .more { color: var(--muted); font-size: 12px; }
    .pitch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border: 2px solid rgba(255,255,255,.38); background: rgba(255,255,255,.15); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
    ol.days { list-style: none; padding: 0; }
    ol.days li { padding: 14px 16px; margin-bottom: 8px; border-left: 3px solid var(--grass); background: var(--panel); transition: border-color .2s, transform .2s; }
    ol.days li:hover { border-color: var(--lime); transform: translateX(4px); }
    .match-list li { display: grid; grid-template-columns: 130px 1fr; gap: 20px; }
    .match-list a { font-weight: 800; }
    .callout { margin: 34px 0; padding: 22px; border-left: 4px solid var(--lime); background: var(--panel); }
    footer { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
    /* ---- Stat pages (scripts/lib/stats.ts + statviz.ts) -------------------
       Each .metric-card has to read on its own when cropped out of the page for
       a screenshot or a video frame, so it repeats the player name, the value at
       display size and the sample size rather than relying on page context. */
    .cta-ghost { margin-left: 8px; background: transparent; color: var(--lime); box-shadow: inset 0 0 0 2px rgba(212,251,70,.55); }
    .cta-ghost:hover { box-shadow: inset 0 0 0 2px var(--lime); }
    .sample-note { font-size: 15px; color: var(--muted); }
    .fact-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 8px; margin: 8px 0 30px; }
    .fact { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(16,45,29,.6); }
    .fact span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .fact strong { display: block; margin-top: 4px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .metric-group { margin-top: 18px; }
    .metric-card { margin: 26px 0; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, rgba(23,51,38,.92), rgba(7,21,14,.94)); box-shadow: 0 26px 70px rgba(0,0,0,.26); overflow: hidden; }
    .metric-card > header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 22px; align-items: start; padding: 24px 26px 18px; border-bottom: 1px solid var(--line); }
    .metric-kicker { display: block; color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
    .metric-card h3 { margin: 8px 0 6px; font: 400 clamp(21px,3.4vw,30px)/1.05 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .015em; }
    .metric-card > header p { margin: 0; max-width: 56ch; color: #cad8d0; font-size: 14px; }
    .metric-headline { text-align: right; }
    .metric-headline strong { display: block; color: var(--lime); font: 400 clamp(38px,7vw,64px)/1 Anton, Impact, sans-serif; font-variant-numeric: tabular-nums; }
    .metric-headline > span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .metric-headline em { display: inline-block; margin-top: 10px; padding: 5px 11px; border-radius: 99px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 900; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
    .metric-headline small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
    svg.dist { display: block; width: 100%; height: auto; padding: 6px 12px 0; }
    .dist-bar { fill: rgba(255,255,255,.16); }
    .dist-bar.is-current { fill: var(--lime); filter: drop-shadow(0 0 12px rgba(212,251,70,.5)); }
    .dist-axis { stroke: var(--line); stroke-width: 1.5; }
    .dist-median line { stroke: rgba(255,255,255,.3); stroke-width: 1.5; stroke-dasharray: 3 5; }
    .dist-median text { fill: var(--muted); font: 700 12px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
    .dist-pin line { stroke: var(--lime); stroke-width: 2; }
    .dist-pin circle { fill: var(--lime); }
    .dist-pin text { fill: white; font: 800 17px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
    .dist-scale text { fill: var(--muted); font: 700 12px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
    ol.rivals { display: grid; gap: 4px; margin: 12px 0 0; padding: 0 22px 20px; list-style: none; }
    ol.rivals li { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 7px; background: rgba(255,255,255,.035); font-size: 14px; }
    ol.rivals li.is-current { background: rgba(212,251,70,.13); border: 1px solid rgba(212,251,70,.45); font-weight: 800; }
    ol.rivals b { color: var(--muted); font-variant-numeric: tabular-nums; }
    ol.rivals span { color: var(--lime); font-weight: 800; font-variant-numeric: tabular-nums; }
    ol.rivals a { text-decoration: none; }
    .metric-card > footer { margin: 0; padding: 14px 26px 20px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 800; }
    .stat-bars .bar-row { grid-template-columns: 46px minmax(120px, 1fr) 3fr 64px; }
    .stat-bars .bar-row.is-current { outline: 1px solid rgba(212,251,70,.5); background: rgba(212,251,70,.1); }
    .bar-rank { color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; }
    .metric-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
    .metric-tile { display: grid; align-content: start; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--lime); border-radius: 9px; background: rgba(16,45,29,.76); color: white; text-decoration: none; transition: background .18s, transform .18s; }
    .metric-tile:hover { background: rgba(25,67,43,.9); transform: translateY(-2px); }
    .metric-tile strong { font-size: 16px; }
    .metric-tile span { color: var(--muted); font-size: 13px; }
    .metric-tile small { color: var(--lime); font-weight: 800; font-variant-numeric: tabular-nums; }
    .split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
    .split { padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16,45,29,.6); }
    .split h3 { margin: 0 0 10px; color: var(--lime); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
    .split ol { margin: 0; padding-left: 20px; font-size: 14px; }
    .split li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
    .split span { color: var(--lime); font-weight: 800; font-variant-numeric: tabular-nums; }
    ul.rank-list li { display: flex; justify-content: space-between; gap: 14px; }
    ul.rank-list small { color: var(--lime); font-weight: 800; font-variant-numeric: tabular-nums; }
    @media (max-width: 680px) {
      /* Four lab destinations no longer fit on one phone-width line, and
         hiding one would orphan a whole page family from the nav, so the
         header wraps instead. */
      .lab-nav { flex-wrap: wrap; gap: 8px 12px; padding: 14px 18px; }
      .lab-links { flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
      .scoreboard { grid-template-columns: repeat(2, 1fr); }
      .pitch-grid { grid-template-columns: 1fr; }
      .bar-row { grid-template-columns: 1fr auto; }
      .bar-track { grid-column: 1 / -1; grid-row: 2; }
      .leader-chart li { grid-template-columns: 30px minmax(0,1fr) auto; }
      .leader-chart .mini-track { grid-column: 2 / -1; grid-row: 2; }
      .leader-chart small { min-width: 0; }
      .player-directory, .category-grid { grid-template-columns: 1fr; }
      .mix-panel { grid-template-columns: 1fr; }
      .mix-ring { width: 210px; }
      .criteria-chart li { grid-template-columns: 1fr auto; gap: 8px 12px; }
      .criteria-measures { grid-column: 1 / -1; grid-row: 2; }
      .criteria-chart small { grid-column: 1 / -1; grid-row: 3; text-align: left; }
      .comparison-chart > header { padding: 20px 18px 16px; }
      .comparison-chart > footer { grid-template-columns: 1fr; gap: 4px; padding: 16px 18px 19px; }
      .comparison-plot svg { min-width: 0; }
      .player-landscape { grid-template-columns: 1fr; padding: 10px; }
      .landscape-key { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0 8px 8px; }
      .match-list li { grid-template-columns: 1fr; gap: 2px; }
      .metric-card > header { grid-template-columns: 1fr; gap: 12px; padding: 20px 18px 16px; }
      .metric-headline { text-align: left; }
      .stat-bars .bar-row { grid-template-columns: 44px 1fr auto; }
      .metric-tiles, .split-grid { grid-template-columns: 1fr; }
      ol.rivals { padding-inline: 14px; }
      .dist-pin text { font-size: 22px; }
      .fact-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
      main { padding-inline: 18px; }
    }
    /* --- The Race (season projection pages, scripts/lib/predictions.ts) ---
       Every colour here comes in through a --c custom property set inline from
       the destination id, so this block never names a competition. */
    /* The projection table carries far more columns than a prose page, so its
       pages get a wider shell than the 920px reading measure. */
    main[data-race] { max-width: 1120px; }
    .race-updated { margin: -10px 0 22px; color: var(--muted); font-size: 13px; }
    .race-switch { margin: 26px 0 8px; }
    .race-switch ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
    .race-switch a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(16,45,29,.7); color: #dbe7df; font-size: 12px; font-weight: 800; text-decoration: none; transition: border-color .18s, background .18s, color .18s; }
    .race-switch a:hover { border-color: rgba(212,251,70,.5); color: white; }
    .race-switch a[aria-current="page"] { border-color: var(--lime); background: rgba(212,251,70,.12); color: var(--lime); }
    .race-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 40px 0 16px; }
    .race-legend { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
    .race-legend li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(255,255,255,.035); color: #cddad2; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
    .race-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
    .race-toggle { display: none; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(4,20,12,.72); }
    [data-race="js"] .race-toggle { display: inline-flex; }
    .race-toggle button { padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 800 12px Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .18s, color .18s; }
    .race-toggle button:hover { color: white; }
    .race-toggle button.is-active { background: var(--lime); color: var(--ink); }
    .race-group-title { margin: 46px 0 14px; font-size: clamp(22px,4vw,32px); }
    .race-view-title { margin: 26px 0 12px; color: var(--muted); font: 800 11px Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
    [data-race="js"] .race-view-title { display: none; }
    .race-table { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(4,20,12,.6); box-shadow: 0 28px 80px rgba(0,0,0,.24); }
    .race-head, .race-row { display: grid; grid-template-columns: 26px minmax(150px,1fr) auto 72px minmax(270px,2.9fr); align-items: center; gap: 12px; }
    .race-head { padding: 4px 12px 8px; color: #7d9187; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .race-head .race-proj, .race-row .race-proj { text-align: right; }
    .race-head .race-proj { color: inherit; font: 800 10px Inter, system-ui, sans-serif; letter-spacing: .1em; }
    .race-row { min-height: 58px; padding: 9px 12px; border-radius: 10px; background: rgba(16,47,30,.72); transition: background .18s; animation: race-row-in .6s both cubic-bezier(.16,1,.3,1); animation-delay: var(--d); }
    .race-row:hover { background: rgba(25,67,43,.9); }
    @keyframes race-row-in { from { opacity: 0; transform: translateY(14px); } }
    .race-rank { color: #8ba396; font: 400 17px/1 Anton, Impact, sans-serif; }
    .race-team { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; min-width: 0; }
    /* The floor is what makes the pill WRAP under a long name instead of
       squeezing the name out of its own cell. */
    .race-name { flex: 0 1 auto; min-width: 96px; overflow: hidden; font-size: 14px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
    .race-crest { flex: none; width: 24px; height: 24px; object-fit: contain; }
    .race-crest--text { display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.09); color: #cfe0d5; font-size: 8px; font-weight: 900; letter-spacing: .02em; }
    /* Pushed to the end of the team cell so every team name starts at the same
       x whether or not its row has a pill. */
    .race-pill { flex: none; margin-left: auto; padding: 3px 8px; border: 1px solid var(--c,#ff5c5c); border-radius: 999px; color: var(--c,#ff5c5c); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
    .race-pill--in { background: color-mix(in srgb, var(--c), transparent 88%); }
    .race-pill--out { --c: #ff7b75; background: rgba(255,92,92,.1); }
    .race-stats { display: grid; grid-template-columns: 38px 30px 42px 88px; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .race-stats > span:not(.race-formstrip) { color: #c4d3c9; }
    .race-stats .race-pts { color: white; font-weight: 900; }
    .race-head .race-stats { font-size: 10px; font-weight: 800; }
    .race-formstrip { display: inline-flex; gap: 3px; }
    .race-form { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; font-size: 9px; font-style: normal; font-weight: 900; }
    .race-form--w { background: rgba(61,220,151,.22); color: #6ff0b4; }
    .race-form--d { background: rgba(255,255,255,.12); color: #cbd8cf; }
    .race-form--l { background: rgba(255,92,92,.2); color: #ff8f8a; }
    .race-proj { color: var(--lime); font: 400 20px/1 Anton, Impact, sans-serif; font-variant-numeric: tabular-nums; }
    .race-chart { min-width: 0; }
    .race-bar { display: flex; height: 11px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.05); }
    .race-bar i { height: 100%; background: var(--c); transform-origin: left; animation: race-seg .75s both cubic-bezier(.16,1,.3,1); animation-delay: var(--d); }
    @keyframes race-seg { from { transform: scaleX(0); } }
    .race-pcts { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 7px; font-size: 10.5px; font-weight: 700; color: #a9bcb0; }
    .race-pcts span { display: inline-flex; align-items: center; gap: 5px; }
    .race-pcts i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
    .race-pcts b { color: white; font-variant-numeric: tabular-nums; }
    .race-heat { overflow-x: auto; overscroll-behavior-inline: contain; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(4,20,12,.6); scrollbar-color: rgba(212,251,70,.45) transparent; }
    /* Sized to its content, not to the container: stretching the table to
       100% only widens the sticky team column and leaves a gap before the
       first position. Overflow is handled by the scroller around it. */
    .race-heat table { width: max-content; border-collapse: separate; border-spacing: 2px; }
    .race-heat th, .race-heat td { padding: 0; font-variant-numeric: tabular-nums; }
    .race-heat thead th { width: 30px; height: 24px; border-radius: 5px; font-size: 10px; font-weight: 900; }
    .race-heat td { width: 30px; height: 28px; border-radius: 5px; color: #f1f7f2; font-size: 10px; font-weight: 800; text-align: center; }
    .race-heat td.is-mode { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
    .race-heat .race-heat-team { position: sticky; left: 0; z-index: 1; display: flex; gap: 7px; align-items: center; width: 96px; min-width: 96px; height: 28px; padding: 0 10px 0 4px; background: #0a2115; color: #dfeae2; font-size: 11px; font-weight: 850; text-align: left; white-space: nowrap; }
    .race-heat thead .race-heat-team { height: 24px; color: #7d9187; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
    .race-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
    .race-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
    .race-cards li { animation: race-row-in .7s both cubic-bezier(.16,1,.3,1); animation-delay: var(--d); }
    .race-cards a { position: relative; display: grid; gap: 4px; height: 100%; padding: 18px 20px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: linear-gradient(150deg, rgba(23,63,40,.85), rgba(6,25,16,.9)); color: white; text-decoration: none; transition: border-color .18s, transform .18s; }
    .race-cards a:hover { border-color: var(--lime); transform: translateY(-2px); }
    .race-card-top { display: flex; align-items: center; gap: 10px; }
    .race-card-flag { font-size: 22px; line-height: 1; }
    .race-cards strong { font: 400 22px/1 Anton, Impact, sans-serif; text-transform: uppercase; }
    .race-cards small { color: var(--muted); font-size: 11px; font-weight: 700; }
    .race-cards dl { display: grid; gap: 5px; margin: 12px 0 0; }
    .race-cards dl div { display: grid; grid-template-columns: 124px minmax(0,1fr); gap: 10px; align-items: baseline; }
    .race-cards dt { color: #7d9187; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .race-cards dd { margin: 0; font-size: 13px; font-weight: 800; }
    .race-cards dd b { color: var(--lime); }
    .race-cards i { position: absolute; right: 16px; top: 14px; color: var(--lime); font-style: normal; }
    @media (max-width: 860px) {
      .race-head, .race-row { grid-template-columns: 24px minmax(120px,1fr) auto 56px minmax(180px,1.7fr); gap: 10px; }
      .race-stats { grid-template-columns: 34px 26px 38px; }
      .race-formstrip { display: none; }
    }
    @media (max-width: 680px) {
      .race-controls { justify-content: flex-start; }
      .race-head { display: none; }
      .race-row {
        grid-template-columns: 24px minmax(0,1fr) auto;
        grid-template-areas: "rank team proj" "stats stats stats" "chart chart chart";
        gap: 8px 10px;
      }
      .race-row .race-rank { grid-area: rank; }
      .race-row .race-team { grid-area: team; }
      .race-row .race-stats { grid-area: stats; grid-template-columns: repeat(4,auto); justify-content: start; gap: 12px; }
      .race-row .race-proj { grid-area: proj; }
      .race-row .race-chart { grid-area: chart; }
      /* The header row is hidden on a phone, so each stat carries its own
         label. The form chips are self-explanatory and keep theirs off. */
      .race-stats > span::before { content: attr(data-label) " "; color: #7d9187; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
      .race-stats > span.race-formstrip::before { content: none; }
      .race-row .race-formstrip { display: inline-flex; }
      .race-row .race-proj::after { content: attr(data-label); display: block; margin-top: 3px; color: #7d9187; font: 800 8px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
      .race-cards { grid-template-columns: 1fr; }
      .race-heat { padding: 8px; }
      .race-heat .race-heat-team { width: 72px; min-width: 72px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .bar-fill { transform: none; }
      .player-point circle { transform: none; }
    }