@font-face{font-family:Orbitron;src:url(fonts/orbitron.ttf) format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:"Exo 2";src:url(fonts/exo2.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--bg:#06070a;--panel:#0e0f12;--line:#464a52;--sv:#aab0ba;--w:#f2f4f6;--y:#f5c518;--r:#c8282d;--b:#2f6fe0;--hd:Orbitron,"Michroma","Eurostile",system-ui,sans-serif;--tx:"Exo 2",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 var(--tx);color:var(--w);background:var(--bg);
 background-image:radial-gradient(1px 1px at 20px 30px,#c8cdd7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 140px 90px,#c8cdd7 50%,transparent 51%),radial-gradient(1px 1px at 230px 180px,#8b909a 50%,transparent 51%),radial-gradient(1px 1px at 90px 220px,#c8cdd7 50%,transparent 51%),radial-gradient(2px 2px at 260px 40px,#e8ebf0 50%,transparent 51%);background-size:300px 260px;-webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--y);color:#000;padding:8px;z-index:9999}
h1,h2,h3,.tag,.chip,.filters button,#clock,.earn,.ftab,.facts b{font-family:var(--hd);text-transform:uppercase;letter-spacing:.14em}
.hero{position:relative;padding:20px 16px 16px;border-bottom:1px solid var(--line);overflow:hidden}
.stripes{position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(90deg,var(--r) 0 50%,var(--b) 50%)}
.hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:6px;background:linear-gradient(90deg,var(--b) 0 50%,var(--r) 50%)}
.top{display:flex;gap:14px;align-items:center}
.tag{background:var(--y);color:#000;font-weight:900;font-size:22px;padding:6px 14px;border:3px solid #000;outline:2px solid var(--y);border-radius:14px;letter-spacing:.08em}
h1{margin:0;font-size:20px;font-weight:700}.tl{margin:2px 0 0;color:var(--sv);font:600 12px var(--hd);letter-spacing:.2em;text-transform:uppercase}
.stamp{display:block;width:100%;max-width:520px;height:auto;margin:16px auto 12px}
.facts,.patches{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.facts li{border:1px solid var(--line);color:var(--sv);padding:3px 10px;border-radius:999px;font-size:13px}.facts b{color:var(--w);font-size:11px;font-weight:700}
.hero h2{margin:18px 0 10px;font-size:14px;color:var(--w);text-align:center}.hero h2 small{color:#000;background:var(--y);border-radius:6px;padding:1px 6px;margin-left:6px}
.chev{color:var(--y)}
.patches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:720px;margin:0 auto}
.patches li{text-align:center;font:600 10px var(--hd);letter-spacing:.12em;text-transform:uppercase;color:var(--sv)}
.patches img{display:block;width:100%;max-width:150px;height:auto;margin:0 auto 4px;filter:drop-shadow(0 4px 10px #000)}
main{display:flex;flex-direction:column}
.mapwrap{position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:1px solid var(--line)}
#map{height:42vh;min-height:240px;background:#000}
.scrub{display:flex;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line)}
.scrub input{flex:1;accent-color:var(--y)}
.scrub button{background:var(--y);color:#000;border:2px solid #000;outline:2px solid var(--y);border-radius:10px;width:40px;height:36px;font-size:14px;cursor:pointer}
#clock{font-weight:700;min-width:62px;color:var(--y);font-size:14px}
.tlwrap{padding:14px}
.filters{display:flex;gap:6px;margin-bottom:14px}
.filters button{flex:1;padding:10px 6px;font-size:12px;font-weight:700;border:2px solid var(--sv);border-radius:999px;background:transparent;color:var(--w);cursor:pointer;position:relative}
.filters button[aria-checked=true]{background:var(--y);color:#000;border-color:var(--y);box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--y)}
.filters button[data-side=LEFT][aria-checked=false]{border-left:5px solid var(--y)}.filters button[data-side=RIGHT][aria-checked=false]{border-right:5px solid var(--b)}
.filters span{font-size:10px;opacity:.8}
#timeline{list-style:none;margin:0;padding:0 0 0 20px;border-left:1px dashed var(--line)}
#timeline li{position:relative;margin:0 0 14px}
#timeline li::before{content:"";position:absolute;left:-28px;top:20px;width:0;height:0;border:7px solid transparent;border-left:9px solid var(--y)}
#timeline li[data-side=RIGHT]::before{border-left-color:var(--b)}#timeline li[data-side=BOTH]::before{border-left-color:var(--w)}
.card{position:relative;width:100%;text-align:left;background:linear-gradient(#0e0f12,#0a0b0e);border:1px solid var(--line);outline:1px solid #1e2026;outline-offset:-5px;border-radius:14px;padding:22px 14px 12px;cursor:pointer;font:inherit;color:inherit}
.card::after{content:"";position:absolute;right:12px;bottom:12px;width:28px;height:6px;background:linear-gradient(90deg,var(--r) 0 50%,var(--b) 50%);border-radius:3px;opacity:.85}
.card:hover{border-color:var(--sv)}.card:focus-visible{outline:2px solid var(--y);outline-offset:2px}
li.on .card{border-color:var(--y);box-shadow:0 0 0 1px var(--y),0 0 24px rgba(245,197,24,.15)}
.ftab{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--y);color:#000;font-weight:900;font-size:11px;padding:2px 12px;border:2px solid #000;border-top:0;border-radius:0 0 9px 9px;letter-spacing:.1em}
.meta{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:10px;font-weight:600;color:var(--sv)}
.chip.t{color:var(--y);border-color:var(--y)}
.mission{color:var(--w)}.history{color:#e8b98a}.fact{color:#b9c4ff}
.chip.LEFT{color:#000;background:var(--y);border-color:var(--y)}.chip.RIGHT{color:#fff;background:var(--b);border-color:var(--b)}.chip.BOTH{color:#000;background:var(--w)}
.card h3{margin:8px 0 2px;font-size:15px;font-weight:700;letter-spacing:.1em;padding-right:36px}
.body{display:none;margin-top:6px;color:#d6d9df}li.on .body{display:block}
.earn{display:inline-block;margin-top:6px;color:var(--y);border:1px solid var(--y);border-radius:6px;padding:3px 8px;font-size:10px;font-weight:700}
.body img{width:100%;border-radius:10px;border:1px solid var(--line);margin-top:10px}
.extras{padding:16px;text-align:center;border-top:1px solid var(--line)}.extras h2{font-size:14px}.extras img{max-width:100%;border:1px solid var(--line);border-radius:14px}
footer{padding:16px;font-size:11px;text-align:center;color:var(--sv)}
.pin{width:22px;height:22px;border-radius:50%;border:2px solid #000;display:flex;align-items:center;justify-content:center;font:700 10px var(--hd);box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.pin.L{background:var(--y);color:#000}.pin.R{background:var(--b);color:#fff}.pin.B{background:var(--w);color:#000}.pin.sel{transform:scale(1.6);box-shadow:0 0 0 3px var(--y)}
.plane{filter:drop-shadow(0 0 3px #000)}
.leaflet-container{font-family:var(--tx);background:#000}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--panel);color:var(--w);border-bottom-color:var(--line)}
.leaflet-bar{border:1px solid var(--line)!important}
.leaflet-control-attribution{background:rgba(6,7,10,.75)!important;color:var(--sv)!important}.leaflet-control-attribution a{color:var(--y)!important}
@media(min-width:900px){main{flex-direction:row}.mapwrap{flex:1.2;height:100vh;position:sticky}#map{height:calc(100vh - 54px)}.tlwrap{flex:1}
 .hero{display:grid;grid-template-columns:auto 1fr;gap:0 30px;align-items:center;padding:20px 28px}.top{grid-column:1}.stamp{grid-column:1;grid-row:2/5;max-width:420px;margin:12px 0}.facts{justify-content:flex-start}.hero h2{text-align:left}.patches{grid-template-columns:repeat(6,1fr);max-width:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
html,body{max-width:100%;overflow-x:hidden}img{max-width:100%}
.mapwrap,.tlwrap{min-width:0}
.filters{position:sticky;top:0;z-index:500;background:#0a0b0e;padding:8px 0}
.filters button{min-height:44px;font-size:14px}
@media(max-width:600px){body{font-size:16px;line-height:1.5}.hero{padding:16px 14px}.patches{grid-template-columns:repeat(3,1fr);gap:8px}.patches span{font-size:12px}#map{height:46vh;min-height:280px}.scrub button{width:48px;height:44px}.scrub input{height:32px}.card{padding:22px 12px 14px}footer{padding:14px;font-size:13px}}
@media(min-width:601px) and (max-width:899px){#map{height:50vh}.patches{grid-template-columns:repeat(6,1fr)}}