:root{--bg:#060912;--panel:rgba(12,17,30,.86);--line:rgba(255,255,255,.12);--fg:#eef2fb;--muted:#9aa6bd;--accent:#ff7a2f;--accent2:#ffb347;--ok:#3ddc84;--bad:#ff5a5f;--blue:#6ea8ff}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font:15px/1.5 Inter,system-ui,sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
#stage{position:fixed;inset:0}#stage canvas{display:block}
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:18px;padding:12px 18px;background:linear-gradient(180deg,rgba(6,9,18,.9),rgba(6,9,18,0))}
.brand{font:700 20px "Space Grotesk";display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#ff7a2f,#ffb347);font-size:18px}
.steps{display:flex;gap:6px;list-style:none;margin:0 auto;padding:4px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px}
.steps li{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;font:600 13.5px Inter;color:var(--muted);transition:.3s}
.steps li b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:12px}
.steps li.on{background:var(--fg);color:#0b1020}.steps li.on b{background:var(--accent);color:#fff}
.steps li.done b{background:var(--ok);color:#06140b}
.iconbtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06)}
.panel{position:fixed;top:68px;bottom:92px;z-index:8;width:300px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;overflow:auto;backdrop-filter:blur(12px);animation:slide .5s cubic-bezier(.22,1,.36,1) both}
.panel.left{left:16px}.panel.right{right:16px;width:330px}
@keyframes slide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel h3{font:600 12px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:4px 0 8px}
.panel h3 small{text-transform:none;letter-spacing:0;font-weight:400}
.hint{color:var(--muted);font-size:13px;margin:0 0 10px}
#parts{display:grid;gap:8px}
.part{display:flex;gap:10px;align-items:center;text-align:left;width:100%;padding:9px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:.2s;user-select:none}
.part:hover{border-color:var(--accent);background:rgba(255,122,47,.1);transform:translateX(3px)}
.part:active{transform:scale(.97)}
.part .ic{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.07)}
.part .ic svg{width:30px;height:30px}
.part b{font:600 14px Inter;display:block}.part small{color:var(--muted);font-size:12px;line-height:1.35;display:block}
.part.flash{animation:flash 1s ease 3}
@keyframes flash{50%{border-color:var(--accent2);background:rgba(255,179,71,.25);box-shadow:0 0 0 3px rgba(255,179,71,.35)}}
.mission{padding:10px 12px;border-radius:12px;background:rgba(110,168,255,.1);border:1px solid rgba(110,168,255,.3);font-size:13.5px;margin-bottom:10px}
.mission b{color:#cfe0ff}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.kpi{background:rgba(255,255,255,.05);border-radius:12px;padding:8px 10px}
.kpi small{display:block;color:var(--muted);font-size:11.5px}.kpi b{font:700 17px "Space Grotesk"}
.kpi.wide{grid-column:1/-1}
.bar{height:8px;border-radius:8px;background:rgba(255,255,255,.08);margin-top:6px;position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .5s cubic-bezier(.22,1,.36,1)}
.bar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff}
#stack{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px;min-height:40px}
#stack li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid transparent;font-size:13.5px;transition:.2s;animation:slide .35s both}
#stack li.sel{border-color:var(--accent);background:rgba(255,122,47,.12)}
#stack li.sep{background:rgba(255,213,79,.08)}
#stack li .nm{flex:1;cursor:pointer}
#stack li button{width:26px;height:26px;border-radius:8px;border:0;background:rgba(255,255,255,.08);font-size:12px}
#stack li button:hover{background:rgba(255,255,255,.2)}
#stack li .n{width:auto;padding:0 8px;font-weight:700;color:var(--accent2)}
#stack .empty{color:var(--muted);font-size:13px;background:none}
.row{display:flex;gap:6px;flex-wrap:wrap}
.ghost{border:1px solid var(--line);background:rgba(255,255,255,.06);padding:8px 12px;border-radius:12px;font:600 13px Inter}
.ghost:hover{border-color:var(--blue)}
.menu{display:grid;gap:4px;margin-top:6px}.menu button{text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.04);padding:8px 10px;border-radius:10px;font-size:13px}
.menu button:hover{border-color:var(--accent)}
.hinttext{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,179,71,.12);border:1px solid rgba(255,179,71,.35);font-size:13.5px}
.cta{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:9;display:flex;gap:10px}
.primary{border:0;padding:14px 26px;border-radius:16px;font:700 16px "Space Grotesk";color:#1a0b00;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 12px 30px -10px rgba(255,122,47,.8);transition:.2s}
.primary:hover{transform:translateY(-2px)}.primary:active{transform:scale(.97)}
.primary:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.primary.big{font-size:22px;padding:18px 44px;letter-spacing:.06em;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 12px 30px -10px rgba(255,122,47,.8),0 0 0 0 rgba(255,122,47,.5)}50%{box-shadow:0 12px 30px -10px rgba(255,122,47,.8),0 0 0 16px rgba(255,122,47,0)}}
/* site */
#sitecard h2{font:700 22px "Space Grotesk";margin:4px 0}
.sitelist{display:grid;gap:6px;margin-top:12px}
.sitelist button{display:flex;justify-content:space-between;gap:8px;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.04);padding:9px 11px;border-radius:12px;font-size:13.5px}
.sitelist button.on{border-color:var(--accent);background:rgba(255,122,47,.12)}
.sitelist small{color:var(--muted)}
.bonus{margin:10px 0;padding:10px 12px;border-radius:12px;background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.3);font-size:13.5px}
.bonus.zero{background:rgba(255,90,95,.08);border-color:rgba(255,90,95,.3)}
.label{font:600 12px Inter;color:#fff;text-shadow:0 1px 4px #000,0 0 8px #000;white-space:nowrap;pointer-events:none;transform:translateY(-14px)}
.label.on{color:var(--accent2);font-size:13px}
/* hud */
.hud{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:8;text-align:center}
.hud .t{font:700 44px "Space Grotesk";letter-spacing:.04em;text-shadow:0 4px 20px rgba(0,0,0,.6)}
.hud .g{display:flex;gap:10px;justify-content:center}
.hud .g div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 14px;min-width:110px}
.hud small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.hud b{font:700 18px "Space Grotesk"}
.hud .ev{margin-top:10px;font:600 16px Inter;min-height:24px;color:var(--accent2);text-shadow:0 2px 10px #000}
.hud .ev.pop{animation:evpop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes evpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.milestones{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:8;display:flex;gap:4px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.milestones span{font:600 12px Inter;color:var(--muted);padding:4px 10px;border-radius:999px;transition:.3s}
.milestones span.done{color:#06140b;background:var(--ok)}.milestones span.bad{color:#fff;background:var(--bad)}
.milestones i{width:14px;height:2px;background:var(--line)}
/* result */
.result{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(4,6,12,.35);animation:fade .5s both}
@keyframes fade{from{opacity:0}}
.result .card{width:min(520px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:26px;backdrop-filter:blur(16px);animation:rise .6s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
@keyframes rise{from{transform:translateY(30px) scale(.95);opacity:0}}
.result .em{font-size:52px}
.result h2{font:700 28px "Space Grotesk";margin:6px 0}
.result .why{color:#d5dcea}
.result .fix{margin:14px 0;padding:12px 14px;border-radius:14px;background:rgba(255,179,71,.12);border:1px solid rgba(255,179,71,.35)}
.result .fix b{color:var(--accent2)}
.result .nums{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;color:var(--muted);font-size:13px}
.result .nums span{background:rgba(255,255,255,.06);padding:4px 10px;border-radius:999px}
.result .row{margin-top:14px}
.result.ok .card{border-color:rgba(61,220,132,.4)}.result.bad .card{border-color:rgba(255,90,95,.4)}
.toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:30;background:var(--panel);border:1px solid var(--line);padding:10px 16px;border-radius:12px;font-size:14px;animation:rise .4s both}
.dropline{position:fixed;height:3px;border-radius:3px;background:var(--accent2);box-shadow:0 0 12px var(--accent2);z-index:7;pointer-events:none}
@media(max-width:900px){.panel.left{top:auto;bottom:88px;height:190px;width:auto;right:16px}.panel.right{top:68px;bottom:auto;max-height:42vh;width:auto;left:16px}.steps li{padding:6px 10px 6px 6px}.brand span:not(.logo){display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
#launchcta{bottom:86px}
a.ghost{color:inherit;display:inline-flex;align-items:center}