:root{--sky:#27479b;--sky2:#1f3478;--deep:#131829;--deep2:#1b2240;--band:#22326a;--peri:#5f82c0;--ring:#a6cfe0;--yellow:#f4c92e;--cream:#fde9c0;--tx:#fff;--mut:#c3cde6;--line:rgba(166,207,224,.28);--err:#ffb3b3;--ok:#9be8bd}
*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--deep)}
body{margin:0;background:var(--deep);color:var(--tx);font:400 16px/1.65 Nunito,system-ui,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--ring)}
h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;font-weight:600;line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(1.45rem,3vw,1.9rem)}h2{font-size:1.35rem;margin-top:1.4em}h3{font-size:1.05rem}
p{margin:0 0 1em}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--yellow);color:var(--deep);padding:8px;z-index:9}
.strip{background:var(--deep);color:var(--mut);font-size:.78rem;text-align:center;padding:6px 16px}
.top{background:var(--sky);position:relative;z-index:5}
.top-in{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font:600 1.1rem Fredoka,sans-serif;text-decoration:none;white-space:nowrap}
.nav{display:flex;align-items:center;gap:18px}
.nav form{margin:0}
.nav>a:not(.btn){color:#fff;text-decoration:none;font-weight:600;font-size:.93rem}
.nav>a:not(.btn):hover,.nav>a[aria-current]{color:var(--yellow)}
.burger{display:none;background:none;border:1px solid var(--line);color:#fff;font-size:1.2rem;border-radius:8px;padding:4px 11px;cursor:pointer}
.btn{display:inline-block;background:var(--cream);color:var(--deep);border:0;border-radius:99px;padding:12px 24px;font:600 .98rem Fredoka,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover,.pill:hover{background:var(--yellow)}
.btn.ghost{background:none;color:#fff;border:1px solid var(--ring)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.sm{padding:7px 15px;font-size:.86rem}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.hero{position:relative;height:clamp(560px,44vw,860px);background:url(/img/scene.svg) center bottom/cover no-repeat,linear-gradient(180deg,var(--sky) 0,var(--sky2) 62%,var(--deep) 100%);text-align:center}
.hero-txt{padding-top:14px}
.hero-txt p{margin:0}
.eyebrow{color:var(--yellow);font:600 .9rem Fredoka,sans-serif}
.hero h1{font-size:1.5rem;margin:0}
.sub{color:var(--mut);font:500 .88rem Fredoka,sans-serif}
.down{position:absolute;right:16px;bottom:24%;width:34px;height:60px;border-radius:99px;background:var(--ring);color:var(--deep);display:grid;place-items:center;text-decoration:none;font-size:1.4rem;font-weight:700}
.down{writing-mode:vertical-rl}
.rows{padding-top:50px;padding-bottom:50px;max-width:880px}
.zig{display:flex;align-items:center;gap:48px;margin-bottom:56px}
.zig.flip{flex-direction:row-reverse}
.zig p{flex:1;margin:0;text-align:center;font:500 1.15rem/1.5 Fredoka,sans-serif}
.ring{display:block;flex:none;width:170px;height:170px;border-radius:50%;border:6px solid var(--ring);overflow:hidden;background:var(--deep2)}
.ring.big{width:220px;height:220px}
.ring img{width:100%;height:100%;object-fit:cover}
a.ring:hover{border-color:var(--yellow)}
.ready{background:var(--band);text-align:center;padding:14px 16px}
.ready h2{margin:0;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700}
.panel{background:var(--peri);padding:34px 0 44px}
.ask{text-align:center;font:600 1.2rem/1.4 Fredoka,sans-serif;margin-bottom:26px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 16px}
.card{text-align:center;display:flex;flex-direction:column;align-items:center}
.card .ring{margin-bottom:12px;border-color:var(--deep)}
.card h3{margin:0}.card h3 a{color:#fff;text-decoration:none}
.card p{margin:0 0 10px;font-size:.88rem;font-weight:700;color:var(--deep)}
.pill{display:inline-block;background:var(--cream);color:var(--deep);border-radius:99px;padding:7px 20px;font:600 .9rem Fredoka,sans-serif;text-decoration:none}
.band{background:url(/img/strip.svg) center bottom/100% auto no-repeat,linear-gradient(180deg,var(--sky),var(--sky2));padding:26px 0 150px;text-align:center}
.band .lead{margin:0 auto 1em;color:#fff}
.crumbs{font-size:.84rem;color:var(--mut);margin-bottom:8px}.crumbs a{color:#fff}
.lead{max-width:640px}
.sec{padding-top:30px;padding-bottom:30px}.sec>h2:first-child{margin-top:0}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:18px}
.feat{background:var(--deep2);border:1px solid var(--line);border-radius:16px;padding:18px}.feat p{margin:0;color:var(--mut)}
.gamehead{display:flex;gap:28px;align-items:center;justify-content:center;text-align:left}
.gamehead .lead{margin-left:0}
.row{display:flex;flex-wrap:wrap;gap:10px}
.split{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}.split h2:first-child{margin-top:0}
.facts{background:var(--deep2);border:1px solid var(--line);border-radius:16px;padding:6px 16px;margin:0}
.facts div{padding:9px 0;border-bottom:1px solid var(--line)}.facts div:last-child{border:0}
.facts dt{font-size:.76rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}.facts dd{margin:0}
.prose{max-width:780px}.narrow{max-width:520px}.muted{color:var(--mut);font-size:.9rem}
.steps{list-style:none;counter-reset:s;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;background:var(--deep2);border:1px solid var(--line);border-radius:16px;padding:14px 16px 14px 60px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--deep);font-weight:700;display:grid;place-items:center}
.steps p{margin:0;color:var(--mut)}
.qa{background:var(--deep2);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:10px}
.qa summary{cursor:pointer;font-weight:700}.qa p{margin:10px 0 0;color:var(--mut)}
.form{display:grid;gap:14px;margin-bottom:18px}
.form label{display:grid;gap:5px;font-weight:600;font-size:.93rem}
.form input:not([type=checkbox]),.form select,.form textarea{width:100%;background:var(--deep2);color:#fff;border:1px solid var(--ring);border-radius:12px;padding:11px 13px;font:inherit;font-weight:400;color-scheme:dark}
.form .check{display:flex;gap:9px;align-items:flex-start;font-weight:400}.form .check input{margin-top:5px;accent-color:var(--yellow)}
.form .btn{justify-self:start}
.err{color:var(--err)}.ok{color:var(--ok)}
.foot{background:var(--band);padding:30px 0;color:var(--mut);font-size:.85rem}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-bottom:16px}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 16px}.foot-nav a{color:#fff}
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 16px}
.badges li{border:1px solid var(--ring);color:#fff;padding:3px 11px;border-radius:99px;font-size:.78rem}
dialog{background:var(--deep2);color:#fff;border:1px solid var(--ring);border-radius:18px}
dialog::backdrop{background:rgba(8,10,20,.85)}
.dlg{max-width:400px;padding:24px;text-align:center}.dlg h2{margin-top:0}.dlg .row{justify-content:center}
.player{width:min(1100px,96vw);height:min(720px,92vh);padding:0;overflow:hidden}
.player[open]{display:flex;flex-direction:column}
.player-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:.85rem}.player-bar span{color:var(--mut);flex:1}
.player iframe{flex:1;width:100%;border:0;background:#000}
@media(max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}
.burger{display:block}.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sky2);flex-direction:column;align-items:flex-start;padding:14px 16px;gap:12px}.nav.open{display:flex}}
@media(max-width:640px){.zig,.zig.flip{flex-direction:column;gap:18px;margin-bottom:40px}.ring{width:132px;height:132px}.ring.big{width:190px;height:190px}.feats{grid-template-columns:1fr}.gamehead{flex-direction:column;text-align:center}.gamehead .row{justify-content:center}.band{background-size:auto 120px,auto;padding-bottom:110px}.down{display:none}.player{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border-radius:0}.player-bar span{display:none}.player-bar strong{flex:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
