:root{--night:#0d1226;--dusk:#17203f;--line:#2a3a6a;--gold:#ff9f43;--cyan:#56d9ff;--grass:#5aa84a;--stone:#9aa3b5;--text:#e9ecf5;--red:#ef6b63;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:5rem}
body{margin:0;background:var(--night);color:var(--text);font:17px/1.65 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.head{display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,3rem);border-bottom:2px solid var(--line);background:var(--night);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--text);text-decoration:none;font:900 1.4rem/1 "Arial Black",Impact,system-ui,sans-serif;letter-spacing:.02em}
.brand img{width:2.2rem;height:2.2rem;display:block}
nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
nav a{color:var(--stone);text-decoration:none;padding:.2rem 0;border-bottom:3px solid transparent}
nav a:hover,nav a[aria-current]{color:var(--text);border-color:var(--cyan)}
.hero{position:relative;isolation:isolate;padding:clamp(2.5rem,7vw,4.5rem) clamp(1rem,4vw,3rem);overflow:hidden;background:var(--night)}
.hero:before{content:"";position:absolute;inset:-30px;z-index:-2;background:url(city.jpg) center/cover;filter:blur(14px) brightness(.45)}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,18,38,.85),rgba(13,18,38,.35))}
.hero-in{max-width:1000px;margin:auto;display:grid;grid-template-columns:1fr auto;gap:2rem 3rem;align-items:center}
.logo{width:min(320px,70vw);height:auto;border-radius:50%;box-shadow:0 0 70px rgba(86,217,255,.35)}
@media(max-width:760px){.hero-in{grid-template-columns:1fr}.logo{order:-1;width:min(200px,55vw)}}
h1{font:900 clamp(2.6rem,9vw,5.5rem)/1 "Arial Black",Impact,system-ui,sans-serif;margin:0 0 .6rem;letter-spacing:-.01em}
.lead{max-width:34rem;font-size:1.2rem;margin:0 0 1.8rem;color:#f4f1ff}
.sign{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;background:#0b2447;border:3px solid var(--cyan);padding:.9rem 1.2rem;margin-bottom:1rem}
.sign small{display:block;color:#9fd8f0;font-size:.85rem}
.sign code{font:700 clamp(1.2rem,4vw,1.9rem)/1.2 ui-monospace,Consolas,monospace;color:#fff;word-break:break-all}
button{font:inherit;font-weight:700;background:var(--gold);color:#1b1500;border:0;padding:.6rem 1rem;cursor:pointer}
button:hover{background:#ffd37a}
.status{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;margin:0;min-height:2rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .8rem;background:#0b0f1e;font-weight:700;border:2px solid var(--line)}
.pill:before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--stone)}
.pill[data-state=on]:before{background:#59e07a;animation:p 2s infinite}
.pill[data-state=off]:before{background:var(--red)}
@keyframes p{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.pill:before{animation:none!important}}
.sky{display:block;width:100%;height:auto;margin-top:1rem}
main{max-width:1000px;margin:auto;padding:3rem clamp(1rem,4vw,3rem) 4rem}
main.prose{max-width:760px}
h2{font:800 1.5rem/1.25 "Arial Black",system-ui,sans-serif;margin:2.4rem 0 .6rem}
h3{font-size:1.1rem;margin:1.6rem 0 .3rem}
main>h1{font-size:clamp(2rem,6vw,3rem)}
.steps{padding-left:1.3rem}.steps li{margin:.5rem 0}
.rules>li{margin:1.2rem 0;padding-left:.4rem}.rules>li::marker{font-weight:800;color:var(--gold)}
.rules ul{color:#d3d8e8}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem 2.5rem}
.cols div{border-left:4px solid var(--cyan);padding-left:1rem}
.cols h3{margin-top:0}
.meta{color:var(--stone);font-size:.95rem}
mark{background:#4a2c0c;color:var(--gold);padding:0 .25rem}
.foot{border-top:2px solid var(--line);padding:1.5rem clamp(1rem,4vw,3rem);color:var(--stone);display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;font-size:.95rem}
.foot a{color:var(--stone)}