body{margin:0;background:#070b14;color:#e8eefb;font-family:"Manrope","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#7cc4ff}a:hover{color:#a9dbff}
*{box-sizing:border-box}
:root{--bg:#070b14;--accent:#4da3ff;--accent2:#7cc4ff;--text:#e8eefb;--muted:#8a9bbd;--err:#ff6b7a;--glass:rgba(12,19,36,.64);--line:rgba(130,178,255,.16)}
button{font-family:inherit}
input{font-family:inherit}

/* ---------- BACKGROUND ---------- */
.bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% 110%,#0b1a33 0%,#070b14 55%),#070b14}
.aur{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.aur.a1{width:70vw;height:70vw;left:-20vw;top:-35vw;background:radial-gradient(circle,rgba(40,110,220,.55),rgba(40,110,220,0) 65%);animation:aurA 26s ease-in-out infinite alternate}
.aur.a2{width:60vw;height:60vw;right:-25vw;bottom:-30vw;background:radial-gradient(circle,rgba(90,170,255,.4),rgba(90,170,255,0) 65%);animation:aurB 32s ease-in-out infinite alternate}
@keyframes aurA{from{transform:translate(0,0) scale(1)}to{transform:translate(12vw,8vw) scale(1.12)}}
@keyframes aurB{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-10vw,-8vw) scale(.95)}}
.rays{position:absolute;left:50%;top:-30%;width:160vmax;height:160vmax;margin-left:-80vmax;opacity:.07;background:repeating-conic-gradient(from 0deg,rgba(124,196,255,0) 0deg 9deg,rgba(124,196,255,.9) 10deg 11deg,rgba(124,196,255,0) 12deg 24deg);border-radius:50%;animation:spin 240s linear infinite;-webkit-mask:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.5) 30%,transparent 62%);mask:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.5) 30%,transparent 62%)}
@keyframes spin{to{transform:rotate(360deg)}}
.px{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.layer{position:absolute;inset:-10%;font-family:"Unbounded","Manrope",sans-serif;font-weight:600;letter-spacing:.06em;text-transform:none;will-change:transform}
.layer.far{animation:driftFar 90s linear infinite alternate}
.layer.mid{animation:driftMid 70s ease-in-out infinite alternate}
.layer.near{animation:driftNear 60s ease-in-out infinite alternate}
@keyframes driftFar{from{transform:translate(0,0)}to{transform:translate(-3%,2%)}}
@keyframes driftMid{from{transform:translate(-2%,-2%)}to{transform:translate(3%,3%)}}
@keyframes driftNear{from{transform:translate(1%,1%)}to{transform:translate(-2%,-1%)}}
.w{position:absolute;white-space:nowrap;user-select:none}
.far .w{font-size:13px;color:rgba(124,170,230,.16);filter:blur(1px)}
.mid .w{font-size:30px;color:rgba(124,170,230,.13);filter:blur(.4px)}
.near .w{font-size:132px;color:rgba(124,196,255,.055);text-shadow:0 0 28px rgba(77,163,255,.22);animation:floatY 14s ease-in-out infinite alternate}
.near .w:nth-child(2){animation-delay:-4s}.near .w:nth-child(3){animation-delay:-8s}.near .w:nth-child(4){animation-delay:-11s}.near .w:nth-child(5){animation-delay:-6s}
@keyframes floatY{from{transform:translateY(0)}to{transform:translateY(-22px)}}
.far .w:nth-child(1){left:4%;top:8%}.far .w:nth-child(2){left:22%;top:14%}.far .w:nth-child(3){left:41%;top:6%}.far .w:nth-child(4){left:63%;top:11%}.far .w:nth-child(5){left:84%;top:7%}.far .w:nth-child(6){left:12%;top:31%}.far .w:nth-child(7){left:33%;top:27%}.far .w:nth-child(8){left:55%;top:34%}.far .w:nth-child(9){left:76%;top:29%}.far .w:nth-child(10){left:93%;top:38%}.far .w:nth-child(11){left:7%;top:55%}.far .w:nth-child(12){left:27%;top:61%}.far .w:nth-child(13){left:48%;top:52%}.far .w:nth-child(14){left:70%;top:58%}.far .w:nth-child(15){left:89%;top:63%}.far .w:nth-child(16){left:16%;top:84%}.far .w:nth-child(17){left:44%;top:88%}.far .w:nth-child(18){left:72%;top:82%}
.mid .w:nth-child(1){left:8%;top:18%}.mid .w:nth-child(2){left:30%;top:9%}.mid .w:nth-child(3){left:58%;top:16%}.mid .w:nth-child(4){left:82%;top:22%}.mid .w:nth-child(5){left:3%;top:42%}.mid .w:nth-child(6){left:24%;top:48%}.mid .w:nth-child(7){left:68%;top:44%}.mid .w:nth-child(8){left:91%;top:50%}.mid .w:nth-child(9){left:12%;top:72%}.mid .w:nth-child(10){left:38%;top:78%}.mid .w:nth-child(11){left:60%;top:70%}.mid .w:nth-child(12){left:84%;top:80%}
.near .w:nth-child(1){left:-2%;top:12%}.near .w:nth-child(2){left:64%;top:6%}.near .w:nth-child(3){left:72%;top:68%}.near .w:nth-child(4){left:-4%;top:74%}.near .w:nth-child(5){left:34%;top:90%}
.dots{position:absolute;inset:0}
.d{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(150,200,255,.7);box-shadow:0 0 10px rgba(120,180,255,.6);opacity:0;animation:dot 16s linear infinite}
@keyframes dot{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:.7}50%{opacity:.5}90%{opacity:.6}100%{transform:translateY(-140px) scale(1.1);opacity:0}}
.d:nth-child(1){left:6%;top:70%;animation-delay:-1s}.d:nth-child(2){left:14%;top:40%;animation-delay:-5s;width:3px;height:3px}.d:nth-child(3){left:21%;top:85%;animation-delay:-9s}.d:nth-child(4){left:29%;top:22%;animation-delay:-3s;width:2px;height:2px}.d:nth-child(5){left:37%;top:64%;animation-delay:-12s}.d:nth-child(6){left:45%;top:92%;animation-delay:-7s;width:3px;height:3px}.d:nth-child(7){left:52%;top:30%;animation-delay:-14s;width:2px;height:2px}.d:nth-child(8){left:60%;top:76%;animation-delay:-2s}.d:nth-child(9){left:67%;top:18%;animation-delay:-10s;width:3px;height:3px}.d:nth-child(10){left:74%;top:58%;animation-delay:-6s}.d:nth-child(11){left:81%;top:88%;animation-delay:-13s;width:2px;height:2px}.d:nth-child(12){left:88%;top:35%;animation-delay:-4s}.d:nth-child(13){left:94%;top:66%;animation-delay:-11s;width:3px;height:3px}.d:nth-child(14){left:10%;top:15%;animation-delay:-8s;width:2px;height:2px}.d:nth-child(15){left:56%;top:48%;animation-delay:-15s;width:2px;height:2px}.d:nth-child(16){left:40%;top:8%;animation-delay:-0.5s;width:3px;height:3px}.d:nth-child(17){left:78%;top:8%;animation-delay:-9.5s;width:2px;height:2px}.d:nth-child(18){left:25%;top:55%;animation-delay:-6.5s;width:3px;height:3px}
.vign{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,transparent 40%,rgba(4,7,14,.75) 100%)}

/* ---------- BRAND / TITLE ---------- */
.brand{position:absolute;left:0;right:0;top:44px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;text-align:center;animation:brandIn 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes brandIn{from{opacity:0;transform:translateY(-14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.brand .lockup{display:flex;align-items:center;gap:13px}
.brand svg{filter:drop-shadow(0 0 12px rgba(77,163,255,.55))}
.brand .name{font-family:"Unbounded",sans-serif;font-weight:700;font-size:26px;letter-spacing:.02em;color:#f2f6ff;text-shadow:0 0 26px rgba(77,163,255,.35)}
.brand .tag{font-family:"Manrope",sans-serif;font-weight:500;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#8aa8d8}
@media (max-width:640px){.brand{top:26px}.brand .name{font-size:21px}.brand .tag{font-size:11px;letter-spacing:.24em;padding:0 20px}}

/* ---------- PANEL ---------- */
.stage{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:center;padding:96px 16px}
.panel{position:relative;width:440px;max-width:100%;padding:44px 40px 36px;border-radius:24px;background:rgba(12,19,36,.64);border:1px solid rgba(130,178,255,.16);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset,0 0 60px rgba(77,163,255,.10);animation:panelIn .9s cubic-bezier(.2,.8,.2,1) .25s both}
.panel::before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1px;background:linear-gradient(160deg,rgba(124,196,255,.35),rgba(124,196,255,0) 40%,rgba(124,196,255,0) 70%,rgba(77,163,255,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.panel.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes panelIn{from{opacity:0;transform:scale(.96) translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.scr{display:flex;flex-direction:column;gap:20px;animation:scrIn .55s cubic-bezier(.2,.8,.2,1) both}
.scr.out{animation:scrOut .38s cubic-bezier(.4,0,.6,1) both}
@keyframes scrIn{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes scrOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateY(-18px) scale(.98);filter:blur(6px)}}
h1.t{margin:0;font-family:"Unbounded",sans-serif;font-weight:600;font-size:22px;line-height:1.25;letter-spacing:-.01em;color:#f2f6ff}
p.sub{margin:-8px 0 0;font-size:14.5px;line-height:1.5;color:#8a9bbd}

/* region selector */
.selwrap{display:flex;flex-direction:column;gap:7px}
.selwrap label{font-size:13px;color:#9fc6ff;letter-spacing:.02em;padding-left:2px}
.selwrap select{height:54px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(140,180,240,.14);color:#e8eefb;font-size:16px;padding:0 16px;outline:0;cursor:pointer;transition:border-color .3s,box-shadow .3s,background .3s}
.selwrap select:hover{border-color:rgba(140,180,240,.28)}
.selwrap select:focus{border-color:rgba(124,196,255,.7);background:rgba(77,163,255,.06);box-shadow:0 0 0 4px rgba(77,163,255,.14)}
.selwrap select:disabled{opacity:.5;cursor:default}
.selwrap option{background:#0c1324;color:#e8eefb}
.orderregion{height:54px;display:flex;align-items:center;border-radius:14px;background:rgba(77,163,255,.08);border:1px solid rgba(124,196,255,.35);color:#e8eefb;font-size:16px;font-weight:600;padding:0 16px}

/* fields */
.field{position:relative;height:58px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(140,180,240,.14);transition:border-color .3s,box-shadow .3s,background .3s}
.field:hover{border-color:rgba(140,180,240,.28);box-shadow:0 0 0 3px rgba(77,163,255,.05)}
.field:focus-within{border-color:rgba(124,196,255,.7);background:rgba(77,163,255,.06);box-shadow:0 0 0 4px rgba(77,163,255,.14),0 0 28px rgba(77,163,255,.18)}
.field input{width:100%;height:100%;padding:22px 52px 6px 16px;border:0;outline:0;background:transparent;color:#e8eefb;font-size:16px;caret-color:#7cc4ff}
.field input::placeholder{color:transparent}
.field label{position:absolute;left:16px;top:19px;font-size:15px;color:#8a9bbd;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),color .28s,font-size .28s;transform-origin:left top}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-11px) scale(.78);color:#9fc6ff}
.field.err{border-color:rgba(255,107,122,.65);background:rgba(255,107,122,.05);box-shadow:0 0 0 4px rgba(255,107,122,.10)}
.field.err label{color:#ff9aa5}
.field.err:focus-within{box-shadow:0 0 0 4px rgba(255,107,122,.14),0 0 28px rgba(255,107,122,.15)}
.field.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.eye{position:absolute;right:8px;top:8px;width:42px;height:42px;border-radius:10px;border:0;background:transparent;color:#8a9bbd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s}
.eye:hover{color:#c9dcff;background:rgba(255,255,255,.05)}
.eye:focus-visible{outline:2px solid #7cc4ff;outline-offset:2px}
.ferr{margin:-12px 0 0 4px;font-size:13px;color:#ff9aa5;display:flex;align-items:center;gap:6px;animation:fadeUp .3s ease-out both}
@keyframes fadeUp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fgroup{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-4px}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:#b8c7e6;cursor:pointer;user-select:none;min-height:44px}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{width:20px;height:20px;border-radius:6px;border:1px solid rgba(140,180,240,.35);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;transition:all .25s}
.check .box svg{opacity:0;transform:scale(.5);transition:all .25s}
.check input:checked + .box{background:linear-gradient(145deg,#4da3ff,#2f7fe0);border-color:transparent;box-shadow:0 0 14px rgba(77,163,255,.45)}
.check input:checked + .box svg{opacity:1;transform:scale(1)}
.check input:focus-visible + .box{outline:2px solid #7cc4ff;outline-offset:2px}
.link{font-size:14px;color:#9fc6ff;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color .2s}
.link:hover{color:#d2e8ff;text-decoration:underline}

/* banner */
.banner{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,107,122,.08);border:1px solid rgba(255,107,122,.28);font-size:14px;line-height:1.45;color:#ffd0d5;animation:fadeUp .35s ease-out both}
.banner.info{background:rgba(77,163,255,.08);border-color:rgba(124,196,255,.3);color:#d2e8ff}
.banner .ic{flex:none;margin-top:1px}
.banner .btxt{flex:1;display:flex;flex-direction:column;gap:8px}
.banner .cd{font-family:"Unbounded",sans-serif;font-size:13px;color:#fff;letter-spacing:.08em}
.mini{align-self:flex-start;height:32px;padding:0 14px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s}
.mini:hover{background:rgba(255,255,255,.12)}

/* buttons */
.btn{position:relative;height:52px;border-radius:14px;border:0;font-size:15.5px;font-weight:700;letter-spacing:.01em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,box-shadow .3s,opacity .3s,background .3s;overflow:hidden}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn.primary{color:#fff;background:linear-gradient(135deg,#5eb0ff 0%,#2f7fe0 55%,#2a6fd0 100%);box-shadow:0 10px 30px rgba(47,127,224,.35),0 0 0 1px rgba(255,255,255,.08) inset}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn.primary:hover:not(:disabled)::after{transform:translateX(120%)}
.btn.primary:hover:not(:disabled){box-shadow:0 14px 36px rgba(77,163,255,.45),0 0 0 1px rgba(255,255,255,.12) inset;transform:translateY(-1px)}
.btn.primary:active:not(:disabled){transform:translateY(0) scale(.99)}
.btn:disabled{cursor:default;opacity:.85}
.btn.primary.busy{background:linear-gradient(135deg,#3d86d6,#2a67b8)}
.btn.ghost{background:transparent;color:#a9c9f5;border:1px solid rgba(140,180,240,.18);height:48px;font-weight:600}
.btn.ghost:hover:not(:disabled){background:rgba(124,196,255,.06);border-color:rgba(140,180,240,.36);color:#dbeaff}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .8s linear infinite}
.pulse{display:inline-flex;gap:6px}.pulse i{width:6px;height:6px;border-radius:50%;background:#7cc4ff;animation:pulse 1.2s ease-in-out infinite}.pulse i:nth-child(2){animation-delay:.15s}.pulse i:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.note{font-size:13px;color:#8a9bbd;text-align:center;margin:0;animation:fadeUp .3s both}

/* ---------- CODE ---------- */
.sendbox{display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 0 10px;animation:fadeUp .4s both}
.sendbox .txt{font-size:14.5px;color:#c9dcff}
.plane{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(77,163,255,.35),rgba(77,163,255,0) 70%);display:flex;align-items:center;justify-content:center;animation:breath 1.4s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(.92);filter:brightness(.9)}50%{transform:scale(1.06);filter:brightness(1.25)}}
.timerWrap{display:flex;flex-direction:column;align-items:center;gap:12px;animation:fadeUp .5s both}
.ring{position:relative;width:132px;height:132px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring .track{fill:none;stroke:rgba(140,180,240,.12);stroke-width:5}
.ring .prog{fill:none;stroke:url(#gradRing);stroke-width:5;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0;animation:drain 600s linear forwards;filter:drop-shadow(0 0 6px rgba(77,163,255,.6));transition:filter .4s,stroke-width .4s}
@keyframes drain{from{stroke-dashoffset:0}to{stroke-dashoffset:326.7}}
.ring.hot .prog{filter:drop-shadow(0 0 12px rgba(124,196,255,1));stroke-width:6}
.ring.hot .glowc{opacity:1}
.ring.paused .prog{animation-play-state:paused}
.ring.dead .prog{opacity:0;transition:opacity .4s}
.ring .glowc{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,rgba(77,163,255,.32),rgba(77,163,255,0) 70%);opacity:.5;transition:opacity .5s;animation:breath 1s ease-in-out infinite}
.ring.dead .glowc{opacity:0}
.nums{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Unbounded",sans-serif;font-weight:600;font-size:30px;letter-spacing:.02em;color:#f2f6ff;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(124,196,255,.4);transition:color .3s,text-shadow .3s}
.ring.hot .nums{color:#fff;text-shadow:0 0 22px rgba(124,196,255,.95),0 0 4px #fff;animation:numPulse 1s ease-in-out infinite}
.ring.dead .nums{color:#6b7a99;text-shadow:none}
@keyframes numPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.ttl{margin:0;font-size:14px;color:#8a9bbd;transition:color .3s}
.ttl.dead{color:#ffb3bb}
.cells{display:flex;gap:10px;justify-content:center;animation:fadeUp .4s both}
.cell{width:52px;height:62px;border-radius:14px;border:1px solid rgba(140,180,240,.16);background:rgba(255,255,255,.035);color:#f2f6ff;text-align:center;font-family:"Unbounded",sans-serif;font-size:24px;font-weight:500;outline:0;transition:border-color .25s,box-shadow .25s,background .25s,transform .25s,opacity .3s;caret-color:transparent}
.cell:hover:not(:disabled){border-color:rgba(140,180,240,.3)}
.cell:focus{border-color:rgba(124,196,255,.8);background:rgba(77,163,255,.08);box-shadow:0 0 0 4px rgba(77,163,255,.15),0 0 24px rgba(77,163,255,.22);transform:translateY(-2px)}
.cell.filled{border-color:rgba(124,196,255,.45);background:rgba(77,163,255,.09);text-shadow:0 0 12px rgba(124,196,255,.6)}
.cell:disabled{opacity:.35}
.cells.bad .cell{border-color:rgba(255,107,122,.6);background:rgba(255,107,122,.06)}
.cells.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
.cerr{margin:-6px 0 0;text-align:center;font-size:13.5px;color:#ff9aa5;display:flex;flex-direction:column;align-items:center;gap:10px;animation:fadeUp .3s both}
.vbox{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0;animation:fadeUp .4s both;color:#c9dcff;font-size:14.5px}
.okpill{display:flex;align-items:center;gap:8px;color:#8ff0c2}

/* ---------- FULLSCREEN LAYERS ---------- */
.full{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;animation:fadeIn .6s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.loader{width:96px;height:96px;border-radius:50%;background:conic-gradient(from 0deg,rgba(77,163,255,0) 0%,#7cc4ff 60%,#fff 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:spin 1.1s linear infinite;filter:drop-shadow(0 0 14px rgba(77,163,255,.7))}
.loader.stop{animation-play-state:paused;opacity:0;transition:opacity .5s}
.pcore{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.pcore .loader{position:absolute;width:150px;height:150px}
.ppct{font-family:"Unbounded",sans-serif;font-weight:600;font-size:40px;color:#f2f6ff;text-shadow:0 0 22px rgba(124,196,255,.5);font-variant-numeric:tabular-nums}
.ppct span{font-size:20px;color:#9fc6ff;margin-left:2px}
.steps{position:relative;height:28px;width:100%;max-width:560px}
.step{position:absolute;left:0;right:0;text-align:center;font-size:17px;color:#d2e0fa;letter-spacing:.01em;opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1),filter .5s}
.step.on{opacity:1;transform:none;filter:blur(0)}
.step.off{opacity:0;transform:translateY(-14px);filter:blur(6px)}
.pbar{position:relative;width:min(420px,80vw);height:6px;border-radius:6px;background:rgba(140,180,240,.12);overflow:hidden}
.pbar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#4da3ff,#bfe2ff);box-shadow:0 0 14px rgba(77,163,255,.6);transition:width .9s cubic-bezier(.4,0,.2,1)}
.pbar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:sheen 1.8s ease-in-out infinite}
@keyframes sheen{to{transform:translateX(220%)}}
.pmeta{font-size:13px;color:#8a9bbd;letter-spacing:.02em}

/* ---------- SUCCESS ---------- */
.succ{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0}
.dim{position:absolute;inset:0;background:rgba(3,6,12,0);transition:background 1.2s}
.dim.on{background:rgba(3,6,12,.55)}
.rglow{position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:radial-gradient(circle,rgba(77,163,255,.22),rgba(77,163,255,0) 60%);opacity:0;transform:scale(.6);transition:opacity 2.4s ease,transform 2.4s ease;pointer-events:none}
.rglow.on{opacity:1;transform:scale(1)}
.core{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.orb{position:absolute;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(140,200,255,.35),rgba(30,70,140,.45) 60%,rgba(20,40,90,.3));border:1.5px solid rgba(160,210,255,.7);box-shadow:0 0 0 0 rgba(124,196,255,.5),0 0 30px rgba(77,163,255,.35);opacity:0;transform:scale(.04)}
.orb.on{animation:orbIn 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes orbIn{0%{opacity:0;transform:scale(.04);box-shadow:0 0 30px 10px rgba(124,196,255,1)}40%{opacity:1;transform:scale(.3);box-shadow:0 0 40px 8px rgba(124,196,255,.9)}100%{opacity:1;transform:scale(1);box-shadow:0 0 0 1px rgba(124,196,255,.15),0 0 40px rgba(77,163,255,.45)}}
.orb.bright{box-shadow:0 0 0 1px rgba(124,196,255,.25),0 0 60px rgba(124,196,255,.6);border-color:#bfe2ff;transition:box-shadow .8s,border-color .8s}
.chk{position:absolute;width:112px;height:112px}
.chk path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:62;stroke-dashoffset:62;filter:drop-shadow(0 0 8px rgba(160,220,255,.9))}
.chk.on path{animation:draw .75s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rip{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:1.5px solid rgba(124,196,255,.7);opacity:0;pointer-events:none}
.rip.on{animation:rip 1.8s cubic-bezier(.1,.6,.3,1) forwards}
.rip.on:nth-child(2){animation-delay:.28s}.rip.on:nth-child(3){animation-delay:.56s}
@keyframes rip{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
.parts{position:absolute;left:50%;top:50%;width:0;height:0}
.pt{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#bfe2ff;box-shadow:0 0 8px rgba(124,196,255,.9);opacity:0}
.parts.on .pt{animation:fly 1.5s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes fly{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
.pt:nth-child(1){--dx:110px;--dy:-30px}.pt:nth-child(2){--dx:70px;--dy:-95px;animation-delay:.05s}.pt:nth-child(3){--dx:-20px;--dy:-120px;animation-delay:.1s}.pt:nth-child(4){--dx:-90px;--dy:-80px;animation-delay:.03s}.pt:nth-child(5){--dx:-125px;--dy:10px;animation-delay:.12s}.pt:nth-child(6){--dx:-85px;--dy:85px;animation-delay:.07s}.pt:nth-child(7){--dx:-10px;--dy:120px;animation-delay:.15s}.pt:nth-child(8){--dx:80px;--dy:90px;animation-delay:.02s}.pt:nth-child(9){--dx:125px;--dy:35px;animation-delay:.18s}.pt:nth-child(10){--dx:40px;--dy:-135px;animation-delay:.2s;width:3px;height:3px}.pt:nth-child(11){--dx:-135px;--dy:-45px;animation-delay:.22s;width:3px;height:3px}.pt:nth-child(12){--dx:-50px;--dy:135px;animation-delay:.09s;width:3px;height:3px}.pt:nth-child(13){--dx:135px;--dy:-80px;animation-delay:.25s;width:2px;height:2px}.pt:nth-child(14){--dx:20px;--dy:-60px;animation-delay:.3s;width:2px;height:2px}
.orbit{position:absolute;width:168px;height:168px;left:50%;top:50%;margin:-84px 0 0 -84px;border-radius:50%;opacity:0;background:conic-gradient(from 0deg,rgba(124,196,255,0) 0%,rgba(124,196,255,0) 70%,#bfe2ff 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));filter:drop-shadow(0 0 8px rgba(124,196,255,.9))}
.orbit.on{animation:orbit 1.8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes orbit{0%{opacity:0;transform:rotate(0)}15%{opacity:1}80%{opacity:1;transform:rotate(340deg)}100%{opacity:0;transform:rotate(360deg)}}
.done{margin:36px 0 0;font-family:"Unbounded",sans-serif;font-weight:700;font-size:34px;letter-spacing:.18em;color:#fff;opacity:0;transform:scale(.9);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),text-shadow 1.2s}
.done.on{opacity:1;transform:scale(1);text-shadow:0 0 24px rgba(124,196,255,.55),0 0 2px rgba(255,255,255,.5)}
.region{margin:16px 0 0;font-family:"Unbounded",sans-serif;font-weight:500;font-size:15px;letter-spacing:.22em;color:#a9d0ff;opacity:0;transform:translateY(15px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.region.on{opacity:1;transform:none;text-shadow:0 0 18px rgba(124,196,255,.5)}
.cont{margin-top:44px;display:flex;gap:12px;width:min(480px,90vw);opacity:0;transform:translateY(12px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.cont.on{opacity:1;transform:none;pointer-events:auto}
.cont .btn{flex:1}
@media(max-width:520px){.cont{flex-direction:column}}

/* ---------- DEMO HINT ---------- */
.hintbtn{position:absolute;right:24px;bottom:24px;z-index:6;width:44px;height:44px;border-radius:50%;border:1px solid rgba(130,178,255,.16);background:rgba(12,19,36,.7);color:#9fc6ff;cursor:pointer;font-family:"Unbounded",sans-serif;font-size:15px;backdrop-filter:blur(10px);transition:all .25s}
.hintbtn:hover{color:#fff;border-color:rgba(140,180,240,.4)}
.hint{position:absolute;right:24px;bottom:78px;z-index:6;width:300px;padding:16px 18px;border-radius:16px;background:rgba(12,19,36,.85);border:1px solid rgba(130,178,255,.16);backdrop-filter:blur(16px);font-size:12.5px;line-height:1.6;color:#b8c7e6;animation:fadeUp .3s both}
.hint b{color:#e8eefb;font-weight:600}.hint code{font-family:ui-monospace,Menlo,monospace;color:#9fc6ff;background:rgba(124,196,255,.08);padding:1px 5px;border-radius:5px}
.hint h4{margin:0 0 8px;font-family:"Unbounded",sans-serif;font-size:12px;letter-spacing:.1em;color:#fff}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){.near .w{font-size:88px}.rays{display:none}}
@media (max-width:640px){
  .stage{padding:88px 12px 40px;align-items:flex-start}
  .panel{width:100%;padding:32px 22px 28px;border-radius:20px}
  h1.t{font-size:20px}
  .far{display:none}.mid .w{font-size:22px}.near .w{font-size:64px}
  .d:nth-child(n+10){display:none}
  .aur{filter:blur(40px)}
  .cell{width:46px;height:58px;font-size:22px}.cells{gap:8px}
  .brand{left:20px;top:20px}
  .done{font-size:26px}.region{font-size:13px;text-align:center;padding:0 24px}
  .hint{width:calc(100vw - 48px)}
}
@media (prefers-reduced-motion:reduce){
  .layer,.aur,.rays,.d,.near .w,.ring .glowc,.plane{animation:none!important}
  .panel,.scr,.scr.out{animation-duration:.01ms!important}
  .rip.on,.parts.on .pt,.orbit.on{animation-duration:.01ms!important;opacity:0!important}
  .dim,.rglow,.done,.region,.cont,.step{transition-duration:.01ms!important}
}