:root{color-scheme:dark;--bg:#000;--card:#1c1c1e;--tx:#f5f5f7;--mu:#98989d;--ln:rgba(255,255,255,.12);--up:#32d74b;--dn:#ff453a;--ac:#2997ff;--or:#ff9f0a;--bl:rgba(40,40,44,.45)}
*{box-sizing:border-box;margin:0;padding:0}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
a{color:var(--ac)}
nav.top{position:sticky;top:0;z-index:5;background:var(--bl);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--ln);padding:calc(10px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--tx);text-decoration:none}
.logo svg{width:28px;height:28px;display:block}
.links{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.links a{color:var(--tx);text-decoration:none;font-size:14px;padding:6px 12px;border-radius:980px}
.links a:hover,.links a.on{background:var(--ln)}
.links a.cta{background:var(--ac);color:#fff}
main{max-width:1000px;margin:0 auto;padding:24px max(20px,env(safe-area-inset-right)) 40px max(20px,env(safe-area-inset-left))}
.hero{text-align:center;padding:64px 0 40px}
h1{font-size:clamp(38px,8vw,72px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
h2{font-size:clamp(26px,4vw,36px);letter-spacing:-.02em;margin-bottom:14px}
.lead{font-size:clamp(18px,2.6vw,22px);color:var(--mu);max-width:640px;margin:18px auto 28px}
.btn{display:inline-block;border:0;border-radius:980px;background:var(--ac);color:#fff;font:inherit;font-weight:500;padding:12px 24px;margin:4px;text-decoration:none;cursor:pointer}
.btn.sec{background:var(--ln);color:var(--tx)}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:24px 0}
.card{background:var(--card);border-radius:22px;padding:24px}
.card h3{font-size:19px;margin-bottom:6px}.card p{color:var(--mu);font-size:15px;margin-bottom:10px}
.card a.go{font-weight:500;text-decoration:none}
.center{text-align:center}
footer{max-width:760px;margin:20px auto 0;padding:0 20px 40px;text-align:center;color:var(--mu);font-size:13px}
footer a{color:var(--mu)}
details{border-top:1px solid var(--ln);padding:12px 0}summary{cursor:pointer;font-weight:600}details p{color:var(--mu);font-size:15px;margin-top:6px}
input{width:100%;background:var(--bg);color:var(--tx);border:1px solid var(--ln);border-radius:12px;padding:12px 14px;font:inherit;margin:6px 0}
.tabs{display:flex;background:var(--ln);border-radius:10px;padding:2px;margin-bottom:14px}
.tabs button{flex:1;border:0;background:none;color:var(--tx);font:inherit;font-weight:500;padding:8px;border-radius:8px;cursor:pointer}
.tabs button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.err{color:var(--dn);font-size:14px;min-height:20px;margin:6px 0}
.note{color:var(--mu);font-size:13px;margin-top:14px}

:root{--gl:rgba(255,255,255,.07);--gb:rgba(255,255,255,.16);--gs:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04),0 10px 40px rgba(0,0,0,.5);--bf:blur(30px) saturate(180%)}
body{background:#000}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px 380px at 12% -5%,rgba(41,151,255,.22),transparent 70%),radial-gradient(480px 360px at 92% 8%,rgba(191,90,242,.16),transparent 70%),radial-gradient(600px 400px at 60% 105%,rgba(48,209,88,.10),transparent 70%)}
.card{background:var(--gl);-webkit-backdrop-filter:var(--bf);backdrop-filter:var(--bf);border:1px solid var(--gb);box-shadow:var(--gs)}
nav.top,nav{position:sticky;top:calc(8px + env(safe-area-inset-top));margin:calc(8px + env(safe-area-inset-top)) 12px 0;padding:10px 16px;border-radius:24px;background:var(--bl);-webkit-backdrop-filter:var(--bf);backdrop-filter:var(--bf);border:1px solid var(--gb);box-shadow:var(--gs)}
select,input,.seg,.tabs{background:rgba(255,255,255,.08);border:1px solid var(--gb);-webkit-backdrop-filter:var(--bf);backdrop-filter:var(--bf);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.seg,.tabs{padding:3px}
.seg button.on,.tabs button.on{background:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.35)}
.btn{background:rgba(10,132,255,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 16px rgba(10,132,255,.3)}
.btn.sec{background:rgba(255,255,255,.12);border:1px solid var(--gb);-webkit-backdrop-filter:var(--bf);backdrop-filter:var(--bf);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.links a:hover,.links a.on,.lk a:hover{background:rgba(255,255,255,.14)}
#toast{background:rgba(60,60,64,.6);color:var(--tx);border:1px solid var(--gb);-webkit-backdrop-filter:var(--bf);backdrop-filter:var(--bf);box-shadow:var(--gs)}