
    :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); }
    @media (max-width: 680px) {
      .lab-links a:last-child { display: none; }
      .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; }
      main { padding-inline: 18px; }
    }
    @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; }
    }
