:root{
  --bg:#0b2332; --bg-deep:#071824; --panel:#16384c; --line:#3d6274;
  --text:#f2e6cb; --body:#e7dcc4; --muted:#c4bba8;
  --brass:#e0bb73; --hivis:#ff850f; --hivis-hot:#ffdb8c; --vermilion:#e94b27;
  --tape:#f2b705; --ink:#071824;
  --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);color-scheme:dark;
  font:17px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--brass)}
img{max-width:100%;height:auto}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:Impact,"Arial Narrow Bold","Helvetica Neue Condensed",ui-sans-serif,sans-serif;
  font-weight:400;text-transform:uppercase;letter-spacing:.04em;line-height:1.05;margin:0}
.hazard{height:10px;background:repeating-linear-gradient(-45deg,var(--tape) 0 14px,var(--ink) 14px 28px)}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:12px;z-index:5;background:var(--hivis);color:var(--ink);padding:8px 12px;border-radius:8px}

.top{position:sticky;top:0;z-index:4;border-bottom:1px solid var(--line);
  background:rgba(11,35,50,.94);backdrop-filter:saturate(1.2) blur(10px)}
.bar{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px #0006}
.brand span{font:400 13px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
nav{display:flex;flex-wrap:wrap;gap:8px 18px}
nav a{color:var(--text);text-decoration:none;font-size:15px}
nav a:hover,nav a[aria-current="page"]{color:var(--brass)}

.hero{padding:48px 0 56px;border-bottom:1px solid var(--line);
  background:radial-gradient(880px 420px at 78% 18%,rgba(255,133,15,.18),transparent 68%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
h1{font-size:clamp(52px,9vw,96px)}
h1 em{font-style:normal;color:var(--hivis)}
.tagline{font-size:clamp(22px,3vw,28px);margin:14px 0 0;color:var(--text)}
.lede{font-size:20px;color:var(--text);margin:18px 0 26px;max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-block;padding:13px 22px;border-radius:var(--radius);font-weight:700;text-decoration:none;
  letter-spacing:.02em}
.btn-primary{background:var(--hivis);color:var(--ink)}
.btn-primary:hover{background:#ff9a33}
.btn-ghost{border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--hivis);outline-offset:3px}

.well-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.well-cap{margin:0;text-align:center;color:var(--muted);font-size:15px;max-width:26em}
.fire{position:relative;font-family:Impact,"Arial Narrow Bold",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:22px;
  padding:12px 40px;border-radius:10px;background:#123044;color:#8aa0ab;border:2px solid var(--line);box-shadow:0 6px 0 var(--ink);
  user-select:none;transition:transform .08s,box-shadow .08s,background .2s,color .2s}
.fire.ready{background:var(--hivis);color:var(--ink);border-color:var(--hivis-hot);box-shadow:0 6px 0 #8a3c04,0 0 24px rgba(255,133,15,.55);animation:ready .9s ease-in-out infinite}
@keyframes ready{50%{box-shadow:0 6px 0 #8a3c04,0 0 38px rgba(255,133,15,.95)}}
.fire.pressed{background:#ff9a33;color:var(--ink);border-color:var(--hivis-hot);transform:translateY(6px);box-shadow:0 0 0 #8a3c04,0 0 34px rgba(255,133,15,.85)}
.fire.pressed::after{content:"";position:absolute;inset:-5px;border-radius:14px;border:3px solid #fff;animation:ring .5s ease-out forwards}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.3)}}
.well{--cell:clamp(22px,4.6vw,34px);display:grid;grid-template-columns:var(--cell) var(--cell) var(--cell) var(--cell) var(--cell) var(--cell) var(--cell) var(--cell);
  grid-auto-rows:var(--cell);gap:2px;padding:6px;background:var(--bg-deep);border:2px solid var(--line);border-radius:6px;
  box-shadow:0 20px 60px #0008;position:relative;overflow:hidden;transition:opacity .4s,grid-template-columns .7s ease-in-out}
.well.fade{opacity:0}
.well.narrow{grid-template-columns:var(--cell) var(--cell) var(--cell) var(--cell) var(--cell) 0px var(--cell) var(--cell)}
.well i{display:block;border-radius:3px;background:transparent;min-width:0;overflow:hidden}
.well i.b{box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),inset 0 -5px 0 rgba(0,0,0,.25)}
.well i.c1{background:#b8601f}.well i.c2{background:#2f5d9e}.well i.c3{background:#8a5a34}.well i.c4{background:#a23a2a}
.well i.c5{background:#5a6a73}.well i.c6{background:#d6a512}.well i.c7{background:#6f8f9c}
.well i.shaft{background:linear-gradient(180deg,rgba(255,133,15,0) 0%,rgba(255,133,15,.42) 100%)}
.well i.shaft.hot{background:rgba(255,133,15,.75);box-shadow:0 0 18px rgba(255,133,15,.65)}
.well i.flash{animation:flash .7s steps(1,end) 1}
.well i.shaft.hot.flash{animation:flash .7s steps(1,end) 1}
@keyframes flash{0%,40%,80%{filter:brightness(2.4) saturate(.6);box-shadow:0 0 14px #fff8}20%,60%,100%{filter:none}}
.well i.drop{animation:dropin .65s cubic-bezier(.55,0,.9,.6) both}
@keyframes dropin{from{transform:translateY(calc(var(--n) * -1 * (var(--cell) + 2px)))}to{transform:none}}
.tag{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;
  font-family:Impact,"Arial Narrow Bold",sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:20px;
  background:var(--ink);color:var(--hivis);border:2px solid var(--hivis);border-radius:6px;padding:6px 14px}
.tag.show{animation:tag 1.6s ease-out 1 both}
@keyframes tag{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}

section{padding:64px 0;border-bottom:1px solid var(--line);scroll-margin-top:76px}
.hero{scroll-margin-top:76px}
h2{font-size:clamp(30px,5vw,44px);margin-bottom:10px}
.sub{color:var(--muted);margin:0 0 28px;max-width:42em}
.prose{color:var(--body);max-width:42em}
.prose p{margin:0 0 14px}
.prose h2{margin-top:28px}
.prose ul{margin:0 0 14px;padding-left:1.2em}
.prose li{margin:0 0 6px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 22px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.step .n{font-family:Impact,"Arial Narrow Bold",sans-serif;color:var(--brass);font-size:40px;line-height:1}
.step h3{font-size:26px;margin:8px 0}
.step p{margin:0;color:var(--body)}

.jobs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px;padding:0;list-style:none}
.jobs li{margin:0;color:var(--body);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.jobs strong{display:block;color:var(--brass);font-weight:700;margin-bottom:4px}
.jobs li:last-child:nth-child(odd){grid-column:1 / -1}
.run-label{font-size:28px;margin:28px 0 12px}

.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.modes li{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:0;color:var(--body)}
.modes strong{color:var(--brass);font-weight:700}

.crew{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.crew article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 18px}
.crew img{width:100%;aspect-ratio:2/3;object-fit:contain;border-radius:8px;background:var(--panel)}
.crew h3{font-size:24px;margin:12px 0 4px}
.crew .codes{margin:0 0 8px;color:var(--brass);font:600 13px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
.crew p{margin:0;color:var(--body)}

.skyline{display:flex;align-items:flex-end;gap:8px;height:150px;margin:8px 0 18px;padding:18px 10px 0;
  background:linear-gradient(180deg,#12384c 0%,var(--bg-deep) 100%);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.skyline span{flex:1;display:block;background:#1a3344;box-shadow:inset 0 0 0 2px #0005;position:relative}
.skyline span::after{content:"";position:absolute;inset:8px 5px 6px;
  background:repeating-linear-gradient(180deg,transparent 0 7px,var(--bg-deep) 7px 9px),
    repeating-linear-gradient(90deg,rgba(224,187,115,.55) 0 5px,transparent 5px 11px);opacity:.75}
.skyline span.now{background:var(--vermilion)}
.skyline span.now::after{
  background:repeating-linear-gradient(180deg,transparent 0 7px,#8a2a16 7px 9px),
    repeating-linear-gradient(90deg,rgba(242,230,203,.8) 0 5px,transparent 5px 11px);opacity:.85}

.plat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plat article,.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.plat article{display:flex;flex-direction:column;gap:12px}
.plat h3{color:var(--text);font-size:26px;margin:0}
.pill{align-self:flex-start;font:700 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.pill.live{background:var(--hivis);border-color:var(--hivis);color:var(--ink)}
.pill.soon{border-color:var(--brass);color:var(--brass)}
.plat p{margin:0;color:var(--body);font-size:16px}
.plat .btn{margin-top:auto;text-align:center}
#platforms[data-ios-status="soon"] .ios-live,
#platforms[data-ios-status="live"] .ios-soon{display:none}

.duo-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 28px;padding:0}
.duo-facts div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.duo-facts dt{margin:0;font-family:Impact,"Arial Narrow Bold","Helvetica Neue Condensed",ui-sans-serif,sans-serif;
  font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:22px;color:var(--brass)}
.duo-facts dd{margin:4px 0 0;color:var(--body)}
.duo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.duo-shot{margin:0}
.duo-leaves{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 24px 60px #000a;background:var(--bg-deep)}
.duo-leaves img{width:100%;display:block;border-radius:0}
.duo-hinge{position:absolute;left:0;right:0;top:49.7%;height:0;border-top:2px solid var(--hivis);pointer-events:none}
.duo-hinge span{position:absolute;left:auto;right:10px;top:0;transform:translate(0,-50%);
  background:var(--hivis);color:var(--ink);font:700 11px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:99px}
.duo-shot figcaption{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.4}

.about{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.about p{margin:0 0 14px;color:var(--body)}
.note{font-size:15px;color:var(--muted)}

.facts{width:100%;border-collapse:collapse;margin:8px 0 28px}
.facts th,.facts td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.facts th{width:9.5em;color:var(--brass);font-weight:700;font-size:15px}
.facts td{color:var(--body)}

footer{padding:36px 0 56px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer a{color:var(--brass)}

@media (min-width:900px){
  .crew{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:820px){
  .hero .wrap,.about,.steps,.plat,.duo-facts{grid-template-columns:1fr}
  .duo-gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .duo-gallery .duo-shot{flex:0 0 78%;scroll-snap-align:center}
  .hero{padding-top:32px}
}
@media (max-width:640px){
  .jobs,.modes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .fire.ready,.fire.pressed::after{animation:none}
  .well i,.well i.flash,.well i.drop{animation:none}
  .well{transition:none}
  html{scroll-behavior:auto}
}