:root{--bg:#f2f6f9;--panel:#fff;--ink:#0f2233;--mut:#5b6f80;--line:#d8e2ea;--blue:#0175c2;--ok:#12906a;--bad:#c2410c;--code:#0f2233;--codeink:#e6f1fa;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b141c;--panel:#122230;--ink:#e6f1fa;--mut:#8fa5b6;--line:#23384a;--blue:#4cb4f5;--ok:#3ddc9f;--bad:#fb923c;--code:#07101a}}
:root[data-theme="dark"]{--bg:#0b141c;--panel:#122230;--ink:#e6f1fa;--mut:#8fa5b6;--line:#23384a;--blue:#4cb4f5;--ok:#3ddc9f;--bad:#fb923c;--code:#07101a}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,sans-serif}
h1,h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;margin:0;line-height:1.1}
.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 48px}
header{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
h1{font-size:clamp(26px,5vw,42px);font-weight:800}
.bar{height:8px;background:var(--line);border-radius:8px;width:220px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .3s}
.layout{display:grid;grid-template-columns:210px 1fr;gap:20px}
nav{display:flex;flex-direction:column;gap:6px}
nav small{color:var(--mut);margin-top:8px}
nav button,.lv button,.qs button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;font:500 14px Inter,sans-serif;cursor:pointer}
nav button{display:flex;justify-content:space-between;text-align:left;padding:9px 12px}
nav button.on,.lv button.on,.qs button.on{border-color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue)}
nav button.on{box-shadow:inset 3px 0 0 var(--blue)}
nav .c{color:var(--mut);font-size:12px}
main{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;min-width:0}
h2{font-size:28px;font-weight:800;margin-bottom:8px}
code.k{font-family:"JetBrains Mono",monospace;background:var(--bg);padding:1px 6px;border-radius:4px;font-size:.9em}
.lv,.qs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.lv button{padding:6px 10px}.qs button{width:36px;height:34px}
.lv button.ok,.qs button.ok{color:var(--ok);font-weight:700}
.story{border-left:4px solid var(--blue);padding:4px 0 4px 14px;margin:14px 0}
textarea{width:100%;min-height:200px;resize:vertical;background:var(--code);color:var(--codeink);border:0;border-radius:10px 10px 0 0;padding:14px;font:14px/1.6 "JetBrains Mono",monospace;tab-size:2}
textarea:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.out{background:var(--code);color:var(--codeink);border-top:1px solid #2b4257;border-radius:0 0 10px 10px;padding:12px 14px;font:13px/1.5 "JetBrains Mono",monospace;min-height:56px;white-space:pre-wrap;overflow-x:auto}
.out .l{color:var(--mut)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.btn{padding:9px 16px;border-radius:8px;border:1px solid var(--blue);background:var(--blue);color:#fff;font:600 14px Inter,sans-serif;cursor:pointer;text-decoration:none}
.btn.g{background:transparent;color:var(--blue)}
.chk{list-style:none;padding:0;margin:8px 0}.chk .y{color:var(--ok)}.chk .n{color:var(--bad)}
.msg{font-weight:600}
details{margin-top:10px}summary{cursor:pointer;color:var(--blue)}
pre{background:var(--bg);padding:12px;border-radius:8px;overflow-x:auto;font:13px "JetBrains Mono",monospace}
.note{color:var(--mut);font-size:13px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.phone{background:var(--bg);color:var(--ink);border:8px solid #263a4b;border-radius:22px;min-height:320px;max-height:540px;overflow:auto;font:14px/1.4 Inter,sans-serif}.phone .er{color:var(--bad);padding:12px;font:13px "JetBrains Mono",monospace;white-space:pre-wrap}
@media(max-width:720px){.split{grid-template-columns:1fr}.layout{grid-template-columns:1fr}nav{flex-direction:row;overflow-x:auto;align-items:center}nav button{white-space:nowrap;gap:8px}nav small{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.mc label{display:block;padding:11px 14px;border:1px solid var(--line);border-radius:10px;margin:8px 0;cursor:pointer}
.mc label:has(input:checked){border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
.mc input{margin-right:10px}
#app[hidden]{display:none}
#intro{position:fixed;inset:0;overflow:auto;z-index:20;background:#0a1624;color:#e8f2fb;padding:max(28px,env(safe-area-inset-top)) 20px 48px}
#intro.off{display:none}
#intro h1,#intro h2{color:#fff}
.aur{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:fl 14s ease-in-out infinite alternate;pointer-events:none}
.a1{width:420px;height:420px;background:#0175c2;top:-120px;left:-90px}
.a2{width:360px;height:360px;background:#12906a;bottom:-120px;right:-70px;animation-delay:-6s}
.gr{position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 25%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 25%,#000 25%,transparent 72%);pointer-events:none}
@keyframes fl{to{transform:translate(70px,45px) scale(1.15)}}
@keyframes up{from{opacity:0;transform:translateY(20px)}}
@keyframes bl{50%{opacity:0}}
@keyframes ln{from{transform:scaleX(0)}}
.ih{position:relative;max-width:1040px;margin:5vh auto 0;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.itxt>*{animation:up .7s both}.itxt>*:nth-child(2){animation-delay:.1s}.itxt>*:nth-child(3){animation-delay:.2s}.itxt>*:nth-child(4){animation-delay:.3s}.itxt>*:nth-child(5){animation-delay:.4s}
.itxt h1{font-size:clamp(30px,5.4vw,54px);margin:14px 0}
.itxt em{color:#4cb4f5;font-style:normal}
.itxt p{color:#b9cde0;max-width:520px}
.tg{display:inline-block;padding:4px 12px;border:1px solid #2b4257;border-radius:99px;font-size:13px;color:#8fd0ff}
.ibtn{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
#intro .btn.g{color:#8fd0ff;border-color:#2b6a96}
.stat{display:flex;gap:22px;flex-wrap:wrap;color:#8fa5b6;font-size:14px}.stat b{display:block;font:800 28px "Bricolage Grotesque",sans-serif;color:#fff}
.cd{background:#07101a;border:1px solid #23384a;border-radius:14px;padding:14px 16px;animation:up .8s .3s both;box-shadow:0 20px 60px #0008}
.dots{display:flex;gap:6px;margin-bottom:10px}.dots i{width:10px;height:10px;border-radius:50%;background:#2b4257}.dots i:first-child{background:#e5534b}.dots i:nth-child(2){background:#e0a100}.dots i:nth-child(3){background:#3ddc9f}
.cd pre{margin:0;min-height:190px;font:14px/1.6 "JetBrains Mono",monospace;white-space:pre-wrap;display:inline}
.caret{display:inline-block;width:8px;height:1.1em;background:#4cb4f5;vertical-align:-3px;animation:bl 1s steps(1) infinite}
.peta{position:relative;max-width:1040px;margin:64px auto 0}
.sub{color:#8fa5b6;margin:6px 0 18px}
.rm{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative}
.rm::before{content:"";position:absolute;left:0;right:0;top:-10px;height:2px;background:linear-gradient(90deg,#4cb4f5,#3ddc9f);transform-origin:left;animation:ln 1.6s .3s both}
.rn{text-align:left;background:#0f2233;border:1px solid #23384a;border-radius:12px;padding:14px;color:#e8f2fb;font:500 14px Inter,sans-serif;cursor:pointer;animation:up .6s both;transition:transform .2s,border-color .2s}
.rn:hover,.rn:focus-visible{transform:translateY(-4px);border-color:#4cb4f5;outline:none}
.rn i{display:flex;width:30px;height:30px;border-radius:50%;background:#0175c2;align-items:center;justify-content:center;font:700 14px Inter,sans-serif;font-style:normal;margin-bottom:8px}
.src{position:relative;max-width:1040px;margin:48px auto 0;color:#8fa5b6;font-size:13px}.src a{color:#8fd0ff}
@media(max-width:760px){.ih{grid-template-columns:1fr}.rm{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){#intro *,.aur{animation:none!important;transition:none!important}}