:root{
  --ink:#0c0b0e; --night:#141318; --char:#1d1b22; --slate:#3a3742;
  --fog:#8d8896; --bone:#e8e1cc; --amber:#c98f3c; --glow:#f2c46b;
  --pixel:"Silkscreen", ui-monospace, monospace;
  --body:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--bone);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;image-rendering:pixelated}
a{color:var(--glow);text-underline-offset:3px}
a:hover{color:var(--bone)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.px{font-family:var(--pixel);letter-spacing:.04em;text-transform:uppercase}

/* nav */
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:14px}
nav a{color:var(--fog);text-decoration:none;margin-left:22px}
nav a:hover,nav a[aria-current]{color:var(--bone)}
nav .home{margin:0;color:var(--bone)}

/* hero */
.hero{position:relative;border:2px solid var(--char);overflow:hidden;touch-action:none;cursor:none}
#stage{display:block;width:100%;height:auto;image-rendering:pixelated;aspect-ratio:20/9}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(12,11,14,.6) 0,rgba(12,11,14,0) 45%)}
.logo{position:absolute;left:4%;top:16%;width:min(40%,400px);z-index:2;pointer-events:none;animation:bob 3.2s ease-in-out infinite}
.logo img{width:100%}
.logo img:not(:first-child){position:absolute}
.logo-env{left:82.6%;top:18.5%;width:16.9%!important;transform-origin:30% 75%;animation:flap 1.6s steps(4) infinite}
.spark{width:6.4%!important;animation:twinkle 1.8s steps(3) infinite}
.s1{left:84%;top:75%}.s2{left:73.5%;top:24%;animation-delay:-.9s!important}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes flap{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) translateY(-2px)}75%{transform:rotate(6deg)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
.hud{position:absolute;top:10px;right:14px;display:flex;gap:16px;font-size:12px;color:var(--bone);z-index:2;text-shadow:0 2px 0 var(--ink);pointer-events:none}
.hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);margin:0;font-size:12px;color:var(--glow);background:rgba(12,11,14,.75);padding:4px 10px;z-index:2;pointer-events:none;white-space:nowrap;animation:pulse 1.4s steps(2) infinite;transition:opacity .4s}
@keyframes pulse{50%{opacity:.55}}
.lights{margin-left:22px;background:none;border:2px solid var(--slate);color:var(--fog);font:inherit;text-transform:uppercase;padding:3px 8px;cursor:pointer}
.lights:hover{color:var(--bone);border-color:var(--amber)}
.lights[aria-pressed="true"]{color:var(--glow);border-color:var(--amber)}
.lantern{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle 170px at var(--lx,50%) var(--ly,40%),rgba(242,196,107,.10) 0,rgba(12,11,14,0) 45%,rgba(6,5,8,.93) 100%)}
body.dark .lantern{opacity:1}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s steps(6),transform .6s steps(6)}
.reveal.in{opacity:1;transform:none}
figure{position:relative;overflow:hidden;border:2px solid var(--char);transition:border-color .2s,transform .25s steps(3)}
figure img{border:0;transition:transform 1.2s ease}
figure:hover{border-color:var(--amber);transform:translateY(-4px)}
figure:hover img{transform:scale(1.08)}
figure figcaption{padding:8px 10px;background:var(--night)}
.btn:not([aria-disabled]):hover{background:var(--amber);color:var(--ink)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.intro{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;padding:44px 0 20px}
.intro h1{font:400 clamp(22px,3.4vw,30px)/1.3 var(--pixel);text-transform:uppercase;margin:0 0 14px;color:var(--bone)}
.intro p{margin:0 0 12px;color:#cfc8b6}
.cta{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border:2px solid var(--amber);color:var(--glow);font:400 15px var(--pixel);text-transform:uppercase;text-decoration:none;background:var(--night)}
.btn[aria-disabled]{border-color:var(--slate);color:var(--fog);cursor:default}
.note{font-size:13px;color:var(--fog);margin:0}

/* sections */
section{padding:40px 0;border-top:2px dashed var(--char)}
h2{font:400 18px var(--pixel);text-transform:uppercase;color:var(--amber);margin:0 0 22px;letter-spacing:.06em}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;list-style:none;padding:0;margin:0}
.feats b{display:block;font:400 14px var(--pixel);text-transform:uppercase;color:var(--bone);margin-bottom:6px}
.feats span{color:#bdb6a5;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
figure{margin:0}

figcaption{font:400 13px var(--pixel);text-transform:uppercase;color:var(--fog);padding-top:8px}
figcaption em{font-style:normal;color:var(--glow)}

/* footer */
footer{border-top:2px solid var(--char);margin-top:20px;padding:28px 0 48px;font-size:14px;color:var(--fog);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--fog)}

/* policy */
.doc{max-width:680px;padding:20px 0 40px}
.doc h1{font:400 26px var(--pixel);text-transform:uppercase;margin:24px 0 6px}
.doc h2{margin:36px 0 10px;font-size:15px}
.doc .meta{color:var(--fog);font-size:14px;margin:0 0 28px}
.doc .tldr{border:2px solid var(--char);background:var(--night);padding:16px 20px;margin-bottom:8px}
.doc ul{padding-left:20px}

@media (max-width:720px){
  .intro{grid-template-columns:1fr;gap:20px}
  .feats{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .logo{width:52%;top:10%}
  .hint{font-size:10px}
  .hud{font-size:10px;gap:10px}
  .lights{margin-left:12px}
  nav a{margin-left:14px}
}
.mail{color:#f3c46a;white-space:nowrap}
nav .home img{display:block;width:180px;height:auto;image-rendering:pixelated}
nav .home:hover img,nav .home:focus-visible img{filter:brightness(1.12)}
@media (max-width:640px){nav .home img{width:140px}}
main.doc{padding-top:4px}
main.doc h1{margin-top:6px}