*{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Press Start 2P",monospace;background:#0a0a1a;color:#e0e0e0;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px;image-rendering:pixelated}
  body::after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0px,rgba(0,0,0,.12) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:9999}
  h1{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;text-align:center;color:#ffcc00;text-shadow:2px 2px 0 #804000,0 0 10px rgba(255,204,0,.4)}
  .sub{color:#66aaff;font-size:.6rem;margin-top:8px;text-align:center;margin-bottom:18px;line-height:2}
  .stage{width:100%;max-width:920px;background:#111128;border:4px solid #4444aa;padding:8px;box-shadow:inset 0 0 30px rgba(0,0,40,.8),0 0 20px rgba(68,68,170,.3)}
  svg{width:100%;height:auto;display:block;border:2px solid #333366}
  .ocean{fill:#0a0a2a}
  .land{fill:#1a1a44;stroke:#3333aa;stroke-width:.8;stroke-linejoin:round}
  .land.host{fill:#222266}
  .graticule{fill:none;stroke:#1a1a3a;stroke-width:.5}
  .route-bg{fill:none;stroke:#333366;stroke-width:1.6;stroke-dasharray:4 4;opacity:.6}
  .route-fg{fill:none;stroke:#ffcc00;stroke-width:3;stroke-linecap:butt;filter:drop-shadow(0 0 6px rgba(255,204,0,.6))}
  .city{fill:#555588;stroke:#111128;stroke-width:1.5}
  .city.visited{fill:#ffcc00}
  .city.current{fill:#ff3333}
  .ring{fill:none;stroke:#ff3333;stroke-width:2;opacity:0}
  .clabel{fill:#8888cc;font-family:"Press Start 2P",monospace;font-size:7px;paint-order:stroke;stroke:#0a0a2a;stroke-width:3px;stroke-linejoin:round}
  .clabel.current{fill:#ffffff}
  .plane{font-size:20px}
  .panel{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .stat{flex:1;min-width:130px;background:#0a0a1a;border:3px solid #4444aa;padding:12px 14px}
  .stat .v{font-size:1.1rem;color:#ffcc00;line-height:1.3;text-shadow:1px 1px 0 #804000}
  .stat .v.co2{color:#ff4444;text-shadow:1px 1px 0 #800000}
  .stat .l{font-size:.5rem;color:#8888bb;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
  .leg{font-size:.6rem;margin-top:14px;min-height:100px;text-align:center;line-height:2.2;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4px 0}
  .leg .dt{display:block;color:#8888bb;font-size:.5rem;margin-top:4px}
  .leg .match{color:#ffcc00}
  .vs-display{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:4px}
  .vs-flag{font-size:2.2rem;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5));line-height:1}
  .vs-text{color:#ff3333;font-size:.9rem;text-shadow:2px 2px 0 #800000,0 0 12px rgba(255,50,50,.5);animation:vs-pulse 1s ease-in-out infinite alternate;position:relative;top:3px}
  @keyframes vs-pulse{from{transform:scale(1)}to{transform:scale(1.1)}}
  .vs-score{color:#ffcc00;font-size:.6rem;margin-top:2px}
  .vs-summit{font-size:1.5rem;margin-bottom:4px}
  .controls{display:flex;align-items:center;gap:10px;margin-top:12px}
  button{font-family:"Press Start 2P",monospace;background:#ffcc00;color:#0a0a1a;border:3px solid #ffee66;padding:10px 18px;font-size:.55rem;cursor:pointer;white-space:nowrap;text-transform:uppercase;box-shadow:3px 3px 0 #804000}
  button:hover{background:#ffee66;box-shadow:2px 2px 0 #804000}
  button:active{box-shadow:1px 1px 0 #804000;transform:translate(1px,1px)}
  input[type=range]{flex:1;accent-color:#ffcc00;cursor:pointer;height:28px}
  .foot{color:#666688;font-size:.45rem;margin-top:16px;text-align:center;max-width:920px;line-height:2.4;padding:0 8px}
  .foot a{color:#66aaff;text-decoration:underline}
  .foot a:hover{color:#ffcc00}
  .note{margin-top:10px;color:#8888bb;font-style:italic}
  .miles-stat .l{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .unit-toggle{display:inline-flex;flex:none;cursor:pointer;border:2px solid #ffcc00;box-shadow:2px 2px 0 #804000;line-height:1}
  .unit-toggle span{padding:4px 6px;font-size:.45rem;color:#8888bb;background:#0a0a1a;text-transform:none}
  .unit-toggle span:first-child{border-right:2px solid #ffcc00}
  .unit-toggle span.on{background:#ffcc00;color:#0a0a1a}
  .co2-milestone{min-height:1.3em;margin-top:10px;text-align:center;font-size:.5rem;line-height:1.7;color:#ff8888;padding:0 8px}
  .co2-milestone.flash{animation:co2flash .7s ease-out}
  @keyframes co2flash{0%{color:#ffee66;text-shadow:0 0 12px rgba(255,238,102,.9)}100%{color:#ff8888;text-shadow:none}}
  .src{margin-top:12px}
  .src .lbl{color:#8888bb;text-transform:uppercase;letter-spacing:.08em}
  .src ul{list-style:none;margin:8px 0 0;padding:0}
  .src li{margin-top:5px}
  @media(max-width:600px){
    body{padding:12px 8px}
    h1{font-size:.75rem}
    .sub{font-size:.5rem;margin-bottom:12px}
    .stage{border-width:3px;padding:6px}
    .panel{gap:6px}
    .stat{min-width:0;padding:10px 8px}
    .stat .v{font-size:.9rem}
    .stat .l{font-size:.42rem}
    .miles-stat .l{flex-direction:column;align-items:flex-start;gap:5px}
    .unit-toggle span{padding:3px 6px}
    .leg{font-size:.5rem;min-height:90px;line-height:2.4}
    .leg .dt{font-size:.42rem}
    button{padding:8px 12px;font-size:.45rem}
    .controls{gap:8px}
    .foot{font-size:.38rem;line-height:2.6}
    .vs-flag{font-size:1.8rem}
    .vs-text{font-size:.7rem}
    .vs-display{gap:10px}
    .clabel{font-size:9px}
    .city{r:6}
  }
  @media(max-width:380px){
    h1{font-size:.6rem}
    .sub{font-size:.42rem}
    .stat .v{font-size:.75rem}
    .stat .l{font-size:.38rem}
    .leg{font-size:.42rem}
    .leg .dt{font-size:.38rem}
    button{padding:7px 10px;font-size:.4rem}
  }