@font-face{font-family:"Pixel";src:url(/pixel-cyr.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:"Pixel";src:url(/pixel-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;font-display:swap}
:root{--bg:#0e1020;--panel:#171a30;--panel2:#1f2340;--ink:#e8ecf6;--dim:#a9b0c8;--grass:#5fae3a;--grass-d:#2f6a1f;--gold:#f2c14e;--gold-d:#a8742a;--sky:#6fb6ff;--line:#2d3358}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 "Bahnschrift","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px)}
a{color:var(--gold)}
img{max-width:100%;height:auto;display:block}
.px{font-family:"Pixel","Courier New",monospace;letter-spacing:.02em;line-height:1.5}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

header.hero{position:relative;overflow:hidden;text-align:center;padding:64px 0 0;
 background:radial-gradient(ellipse at 50% 120%,#3b2a5e 0,rgba(59,42,94,0) 60%),linear-gradient(#070814,#161a3a 55%,#2a2350)}
.stars{position:absolute;inset:0;pointer-events:none;
 background-image:radial-gradient(2px 2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 28% 42%,#cfe0ff 50%,transparent 51%),radial-gradient(2px 2px at 47% 12%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 63% 30%,#ffe9b0 50%,transparent 51%),radial-gradient(2px 2px at 81% 16%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 92% 44%,#cfe0ff 50%,transparent 51%),radial-gradient(2px 2px at 7% 58%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 36% 66%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 72% 60%,#fff 50%,transparent 51%);
 animation:twinkle 4s steps(2) infinite}
@keyframes twinkle{50%{opacity:.55}}
.moon{position:absolute;right:9%;top:48px;width:56px;height:56px;background:#f3eecf;box-shadow:inset -12px -8px 0 #d9d2a8,0 0 40px rgba(243,238,207,.35)}
.hero img.logo{position:relative;margin:0 auto;width:330px;image-rendering:pixelated;filter:drop-shadow(0 6px 0 rgba(0,0,0,.45))}
.hero h1{position:relative;font-size:20px;margin:26px auto 14px;max-width:820px;color:#fff;text-shadow:3px 3px 0 #000}
.hero p.lead{position:relative;font-size:19px;max-width:680px;margin:0 auto 30px;color:#cdd4ea}

.btn{position:relative;display:inline-block;margin-bottom:12px;font-family:"Pixel",monospace;font-size:16px;color:#fff;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0,.45);
 background:var(--grass);padding:18px 30px 16px;border:0;
 box-shadow:inset -4px -6px 0 var(--grass-d),inset 4px 4px 0 #9ae06a,0 0 0 4px #10240a,0 8px 0 4px #0a1606;transition:transform .06s}
.btn:hover{background:#6cc044}
.btn:active{transform:translateY(4px);box-shadow:inset -4px -6px 0 var(--grass-d),inset 4px 4px 0 #9ae06a,0 0 0 4px #10240a,0 4px 0 4px #0a1606}
.btn small{display:block;margin-top:10px;font:13px "Bahnschrift","Segoe UI",sans-serif;opacity:.9;text-shadow:none}
.btn-gold{background:var(--gold);color:#2a1a05;text-shadow:none;box-shadow:inset -4px -6px 0 var(--gold-d),inset 4px 4px 0 #ffe39a,0 0 0 4px #2a1a05,0 8px 0 4px #1a1003}
.btn-gold:hover{background:#ffcf5c}

.status{position:relative;display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;padding:8px 14px;font-size:15px;color:var(--dim);background:rgba(0,0,0,.35);border:2px solid var(--line)}
.status b{width:12px;height:12px;background:#777;box-shadow:0 0 0 2px #000}
.status.on b{background:#5ac85a;box-shadow:0 0 0 2px #000,0 0 10px #5ac85a;animation:blink 1.6s steps(2) infinite}
.status.off b{background:#d05a4c}
@keyframes blink{50%{opacity:.4}}

.ground{position:relative;height:72px;margin-top:56px;
 background:linear-gradient(#5aa33a 0 12px,#3f7d27 12px 16px,transparent 16px),
 repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 8px,transparent 8px 16px),
 repeating-linear-gradient(0deg,#6b4a2d 0 8px,#5d3f26 8px 16px)}

section{padding:52px 0}
section h2{font-family:"Pixel",monospace;font-size:18px;color:var(--gold);margin:0 0 28px;text-shadow:3px 3px 0 #000}
section h2:before{content:"";display:inline-block;width:14px;height:14px;margin-right:14px;background:var(--grass);box-shadow:inset -3px -3px 0 var(--grass-d),0 0 0 2px #000;vertical-align:1px}
.panel{background:var(--panel);border:4px solid #000;box-shadow:inset 0 0 0 2px var(--line),6px 6px 0 rgba(0,0,0,.45)}

.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.shots figure{margin:0}
.shots img{image-rendering:auto;border-bottom:4px solid #000}
.shots figcaption{padding:10px 14px;font-size:15px;color:var(--dim)}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{padding:18px 20px 20px}
.card .ic{width:36px;height:36px;margin-bottom:12px;image-rendering:pixelated;box-shadow:0 0 0 2px #000}
.card h3{font-family:"Pixel",monospace;font-size:12px;line-height:1.6;margin:0 0 10px;color:#fff}
.card p{margin:0;color:#c3cad8}

ol.steps{counter-reset:s;list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0}
ol.steps li{padding:20px;counter-increment:s}
ol.steps li:before{content:counter(s);display:inline-block;font-family:"Pixel",monospace;font-size:18px;color:#2a1a05;background:var(--gold);padding:8px 10px 6px;margin-bottom:12px;box-shadow:inset -3px -3px 0 var(--gold-d),0 0 0 2px #000}
ol.steps strong{display:block;color:#fff;margin-bottom:6px}

.keys{columns:2;padding:20px 20px 20px 40px;margin:0}
.keys li{margin:4px 0}
kbd{display:inline-block;min-width:28px;text-align:center;font:11px "Pixel",monospace;color:#fff;background:#2a2e48;padding:6px 7px 5px;box-shadow:inset -2px -3px 0 #151829,inset 2px 2px 0 #474d78,0 0 0 2px #000}

details{margin:0 0 12px;padding:16px 20px}
summary{cursor:pointer;font-weight:600;color:#fff;list-style:none;display:flex;align-items:center}
summary::-webkit-details-marker{display:none}
summary:before{content:"+";flex:0 0 22px;font-family:"Pixel",monospace;font-size:14px;line-height:1;color:var(--gold)}
details[open] summary:before{content:"-"}
details p{margin:10px 0 0 22px;color:#c3cad8}

.cta{text-align:center;background:linear-gradient(#131632,#1e1a3c);padding:60px 0 72px}
.cta p{color:var(--dim);margin:-10px 0 28px}
footer{text-align:center;padding:28px 0 44px;color:#6e7694;font-size:14px;border-top:4px solid #000;background:#0a0b18}
footer .px{font-size:10px;color:#4f5677;margin-top:8px}

@media (max-width:820px){.features,ol.steps{grid-template-columns:1fr}.shots{grid-template-columns:minmax(0,1fr)}.keys{columns:1}.hero h1{font-size:15px}.moon{display:none}section h2{font-size:14px}}
@media (prefers-reduced-motion:reduce){.stars,.status.on b{animation:none}}

.topbar{position:sticky;top:0;z-index:40;background:rgba(8,9,20,.92);border-bottom:4px solid #000;box-shadow:0 2px 0 var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:"Pixel",monospace;font-size:13px;margin-right:auto}
.brand img{width:30px;height:30px;image-rendering:pixelated}
.brand b{color:var(--grass);font-weight:normal}.brand i{color:var(--gold);font-style:normal}
.nav{display:flex;align-items:center;gap:6px}
.nav a{color:var(--dim);text-decoration:none;padding:8px 10px;font-size:15px}
.nav a:hover,.nav a.on{color:#fff;background:var(--panel2);box-shadow:0 0 0 2px #000}
.nav a.wiki{font-family:"Pixel",monospace;font-size:11px;color:#2a1a05;background:var(--gold);padding:10px 12px 8px;box-shadow:inset -3px -3px 0 var(--gold-d),inset 3px 3px 0 #ffe39a,0 0 0 2px #000}
.nav a.wiki:hover,.nav a.wiki.on{background:#ffcf5c;color:#2a1a05}
@media (max-width:820px){.nav a.hide{display:none}.brand{font-size:11px}}