/* ===== Mascot lives in ONE file: swap avatar.svg (or change MASCOT in the script) and it updates everywhere ===== */
:root{
  --ink:#12063A; --sky1:#5B2BD6; --sky2:#2A1170; --sky3:#12063A;
  --pink:#FF7AD9; --violet:#C04BFF; --sun:#FFC531; --sun2:#FFF3B0; --mint:#3DF2B0; --red:#FF5A7A;
  --card:#F7F2FF; --fg:#FFFFFF; --dim:#D9CCFF;
  --disp:"Lilita One",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
  --sh:6px 6px 0 var(--ink);
}
[data-theme="day"]{--sky1:#9FD8FF;--sky2:#6FA8FF;--sky3:#4F6BFF;--dim:#F2F6FF}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-weight:800;color:var(--fg);overflow-x:hidden;
  background:radial-gradient(120% 80% at 50% 0%,var(--sky1),var(--sky2) 55%,var(--sky3));background-attachment:fixed;transition:background .6s}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.dots{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.12;background-image:radial-gradient(#fff 1.4px,transparent 1.6px);background-size:28px 28px}

/* sticker primitives */
.stk{background:var(--card);color:var(--ink);border:4px solid var(--ink);border-radius:22px;box-shadow:var(--sh)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border:4px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);
  font:400 20px var(--disp);letter-spacing:.02em;box-shadow:var(--sh);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn.sun{background:var(--sun)}.btn.pink{background:var(--pink)}.btn.mint{background:var(--mint)}
.tag{display:inline-block;font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border:3px solid var(--ink);border-radius:999px;background:var(--sun);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:.01em}
.outline{color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}

/* nav */
nav{position:sticky;top:12px;z-index:50;margin-top:12px}
nav .navbar{display:flex;align-items:center;gap:18px;padding:10px 12px 10px 14px}
.logo{display:flex;align-items:center;gap:10px;font:400 26px var(--disp)}
.logo img{width:46px;height:46px;border-radius:14px;border:3px solid var(--ink)}
.links{display:flex;gap:6px;margin-left:10px}
.links a{padding:8px 14px;border-radius:12px;font-weight:900;transition:background .15s}
.links a:hover{background:var(--sun2)}
.nav-r{margin-left:auto;display:flex;gap:10px}
.ib{width:48px;height:48px;border:3px solid var(--ink);border-radius:14px;background:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:3px 3px 0 var(--ink);font-size:20px;transition:transform .12s}
.ib:hover{transform:rotate(-8deg) scale(1.06)}
.ib.off{opacity:.45}
nav .btn{padding:10px 18px;font-size:18px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;min-height:calc(100vh - 90px);padding-top:40px;padding-bottom:70px}
h1{font-size:clamp(56px,8.2vw,112px);line-height:.92;margin:22px 0 20px}
h1 .l{display:inline-block;animation:pop .7s cubic-bezier(.3,1.6,.5,1) both}
h1 .y{color:var(--sun)}
@keyframes pop{from{opacity:0;transform:translateY(60px) scale(.6) rotate(-10deg)}}
.lead{font-size:21px;line-height:1.5;color:var(--dim);max-width:520px;font-weight:700}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.ca{margin-top:28px;display:inline-flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;font:700 14px var(--mono)}
.ca button{border:3px solid var(--ink);background:var(--mint);border-radius:10px;padding:6px 10px;cursor:pointer;font:700 12px var(--mono)}

.stage{position:relative;aspect-ratio:1;width:100%;max-width:540px;justify-self:center}
.burst{position:absolute;inset:-12%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,210,90,.28) 0 12deg,transparent 12deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mascot{position:absolute;inset:8%;cursor:pointer;transform-origin:50% 100%;animation:jiggle 2.6s ease-in-out infinite}
.mascot img{width:100%;height:100%;display:block;border-radius:30%;border:6px solid var(--ink);box-shadow:12px 12px 0 var(--ink);user-select:none;-webkit-user-drag:none}
@keyframes jiggle{0%,100%{transform:scale(1,1)}25%{transform:scale(1.03,.97)}50%{transform:scale(.98,1.03) translateY(-10px)}75%{transform:scale(1.02,.98)}}
.mascot.jump{animation:jump .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes jump{0%{transform:scale(1.15,.8)}40%{transform:scale(.9,1.12) translateY(-70px) rotate(-6deg)}70%{transform:scale(1.08,.92)}100%{transform:none}}
.bubble{position:absolute;top:-2%;right:-4%;padding:12px 18px;font:400 26px var(--disp);transform:scale(0) rotate(8deg);transform-origin:0 100%;transition:transform .35s cubic-bezier(.3,1.7,.5,1);z-index:3}
.bubble.show{transform:scale(1) rotate(6deg)}
.bubble::after{content:"";position:absolute;left:18px;bottom:-16px;border:10px solid transparent;border-top:12px solid var(--ink)}
.float{position:absolute;font:400 22px var(--disp);padding:10px 14px;animation:bob 4s ease-in-out infinite;z-index:2}
.float.f1{left:-6%;top:16%;background:var(--mint);transform:rotate(-8deg)}
.float.f2{right:-6%;bottom:18%;background:var(--pink);animation-delay:-2s}
.float.f3{left:2%;bottom:4%;background:var(--sun);animation-delay:-1s}
@keyframes bob{50%{translate:0 -14px}}
.coin{position:absolute;width:44px;height:44px;border-radius:50%;background:var(--sun);border:4px solid var(--ink);display:grid;place-items:center;font:400 20px var(--disp);color:var(--ink);pointer-events:none;z-index:4}
.hint{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);font:700 13px var(--mono);color:var(--dim);white-space:nowrap}

/* ticker */
.tick{background:var(--sun);color:var(--ink);border-block:5px solid var(--ink);transform:rotate(-2deg);margin:0 -20px;overflow:hidden}
.tick.alt{background:var(--pink);transform:rotate(1.5deg);margin-top:-14px}
.tick .t{display:flex;gap:40px;padding:14px 0;width:max-content;font:400 26px var(--disp);animation:marq 30s linear infinite;white-space:nowrap}
.tick.alt .t{animation-direction:reverse}
@keyframes marq{to{transform:translateX(-50%)}}
.up{color:#0E8F5F}.dn{color:#D0103A}

section{padding-top:120px;padding-bottom:40px}
.sh{text-align:center;margin-bottom:50px}
h2{font-size:clamp(44px,6vw,76px);line-height:1;margin-top:16px}
.sub{color:var(--dim);font-size:19px;margin-top:14px}
.reveal{opacity:0;transform:translateY(50px) rotate(-2deg);transition:opacity .7s,transform .7s cubic-bezier(.3,1.5,.5,1)}
.reveal.in{opacity:1;transform:none}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{padding:30px 26px;transition:transform .2s}
.step:nth-child(1){transform:rotate(-2deg)}.step:nth-child(3){transform:rotate(2deg)}
.step:hover{transform:rotate(0) translateY(-8px) scale(1.03)}
.step .em{width:74px;height:74px;border:4px solid var(--ink);border-radius:20px;display:grid;place-items:center;font-size:38px;margin-bottom:18px;box-shadow:4px 4px 0 var(--ink)}
.step h3{font-size:32px;margin-bottom:10px}
.step p{font-weight:700;line-height:1.5;color:#3B2D6E}
.step .n{float:right;font:400 22px var(--disp);opacity:.35}

/* climb simulator */
.climb{padding:26px;display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:center}
#mtn{width:100%;display:block}
.zone{font:400 42px var(--disp);line-height:1}
.statrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.stat{padding:14px 16px;border:3px solid var(--ink);border-radius:16px;background:#fff}
.stat small{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.stat div{font:400 32px var(--disp)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;border:4px solid var(--ink);border-radius:20px;background:linear-gradient(90deg,var(--mint),var(--sun),var(--pink));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;border-radius:50%;background:#fff;border:4px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:#fff;border:4px solid var(--ink)}
.note{font:700 12px var(--mono);opacity:.6;margin-top:12px}

/* board */
.tools{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.pill{padding:10px 18px;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;font-weight:900;box-shadow:3px 3px 0 var(--ink);transition:transform .12s}
.pill.on{background:var(--sun)}
.pill:hover{transform:translateY(-2px)}
.search{padding:10px 18px;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);outline:none;box-shadow:3px 3px 0 var(--ink);width:230px}
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.tok{padding:18px;cursor:pointer;transition:transform .15s}
.tok:nth-child(odd){rotate:-1deg}.tok:nth-child(even){rotate:1deg}
.tok:hover{transform:translateY(-6px) scale(1.03);rotate:0deg}
.tok .top{display:flex;gap:12px;align-items:center}
.av{width:54px;height:54px;border:3px solid var(--ink);border-radius:16px;display:grid;place-items:center;font-size:28px;flex:none}
.tok b{font:400 22px var(--disp);display:block}
.tok .tk{font:700 12px var(--mono);opacity:.6}
.tok .ch{margin-left:auto;font:700 15px var(--mono)}
.bar{height:18px;border:3px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden;margin-top:16px}
.bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--violet) 0 10px,var(--pink) 10px 20px);border-right:3px solid var(--ink);transition:width .5s;animation:stripes 1s linear infinite;background-size:28px 28px}
@keyframes stripes{to{background-position:28px 0}}
.tok .meta{display:flex;justify-content:space-between;margin-top:10px;font:700 12px var(--mono);opacity:.75}
.flash{animation:fl .6s}
@keyframes fl{30%{transform:scale(1.06) rotate(-2deg)}}
.demo{text-align:center;font:700 12px var(--mono);color:var(--dim);margin-top:22px}

/* launch */
.launch{display:grid;grid-template-columns:1.1fr 1fr;gap:28px}
form{padding:28px;display:grid;gap:16px}
label{font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;display:grid;gap:8px}
input[type=text],textarea{padding:14px 16px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);outline:none;font:800 17px var(--body);text-transform:none;letter-spacing:0;transition:box-shadow .15s}
input[type=text]:focus,textarea:focus{box-shadow:4px 4px 0 var(--violet)}
.emos{display:flex;gap:8px;flex-wrap:wrap}
.emos button{width:48px;height:48px;border:3px solid var(--ink);border-radius:14px;background:#fff;font-size:24px;cursor:pointer;transition:transform .12s}
.emos button.on{background:var(--sun);transform:rotate(-8deg) scale(1.08)}
.prev{padding:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--sun2);transform:rotate(2deg)}
.prev .big{width:150px;height:150px;border:5px solid var(--ink);border-radius:40px;display:grid;place-items:center;font-size:84px;box-shadow:var(--sh);animation:jiggle 2.4s ease-in-out infinite;transform-origin:50% 100%}
.prev h3{font-size:40px;margin-top:22px;word-break:break-word}
.prev .tk{font:700 15px var(--mono);opacity:.6;margin-top:4px}
.prev p{margin-top:12px;font-weight:700;max-width:320px;line-height:1.45}
.prev .bar{width:85%}

/* faq */
.faq{display:grid;gap:16px;max-width:820px;margin:0 auto}
.qa{padding:0 24px}
.qa button{width:100%;background:none;border:0;padding:20px 0;display:flex;justify-content:space-between;gap:16px;text-align:left;font:400 24px var(--disp);color:var(--ink);cursor:pointer}
.qa button span{transition:transform .3s cubic-bezier(.3,1.6,.5,1);font-size:30px;line-height:.8}
.qa.open button span{transform:rotate(135deg)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .35s}
.qa .ans p{padding-bottom:22px;font-weight:700;line-height:1.55;color:#3B2D6E}

/* footer */
footer{margin-top:140px;position:relative;background:var(--ink);border-top:5px solid #000;padding:60px 0 40px;color:var(--dim)}
.peek{position:absolute;left:50%;top:-112px;width:150px;transform:translateX(-50%);transition:top .4s cubic-bezier(.3,1.6,.5,1);cursor:pointer}
.peek:hover{top:-140px}
.peek img{width:100%;border-radius:30%;border:5px solid #000}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-weight:700}
footer .big{font:400 46px var(--disp);color:#fff}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140px) rotate(-3deg);padding:14px 22px;font:400 22px var(--disp);z-index:99;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.toast.show{transform:translate(-50%,0) rotate(-3deg)}
.conf{position:fixed;top:-30px;z-index:98;pointer-events:none;font-size:26px}

.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important}
.calm .reveal{opacity:1;transform:none}

@media (max-width:920px){
  .links{display:none}
  .hero{grid-template-columns:1fr;padding-top:30px;min-height:auto}
  .stage{max-width:400px;margin-top:20px}
  .steps,.launch,.climb{grid-template-columns:1fr}
  .step:nth-child(n){transform:none}
  .float{font-size:17px}
  nav .btn{display:none}
  section{padding-top:90px}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{animation:none!important}}

/* ===== neon skin (matches the crystal "Z" avatar) ===== */
:root{--sky1:#3A1478;--sky2:#1B0846;--sky3:#0A0320;--pink:#FF4FD8;--violet:#9B5CFF;--teal:#3DF2D0;--sun:#3DF2D0;--sun2:#FF4FD8;--card:rgba(34,12,82,.55);--dim:#CDB8FF;
  --glow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 34px -8px rgba(190,80,255,.6);--grad:linear-gradient(110deg,#FF4FD8,#9B5CFF 50%,#3DF2D0)}
[data-theme="day"]{--sky1:#5A2AB0;--sky2:#3A1A86;--sky3:#22105A}
body{font-weight:700}
.dots{opacity:.22;background-image:radial-gradient(#fff 1px,transparent 1.3px),radial-gradient(rgba(61,242,208,.8) 1px,transparent 1.3px);background-size:46px 46px,83px 83px;background-position:0 0,20px 30px;animation:tw 6s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.38}}
.neb{position:fixed;inset:-10%;z-index:-1;pointer-events:none;filter:blur(80px);opacity:.6;animation:drift 20s ease-in-out infinite alternate;
  background:radial-gradient(35% 30% at 15% 25%,rgba(255,79,216,.45),transparent 70%),radial-gradient(35% 30% at 85% 20%,rgba(61,242,208,.3),transparent 70%),radial-gradient(40% 35% at 60% 90%,rgba(155,92,255,.5),transparent 70%)}
@keyframes drift{to{transform:translate(3%,-4%) rotate(6deg) scale(1.1)}}
.stk{background:var(--card);color:#fff;border:1.5px solid rgba(255,140,240,.32);box-shadow:var(--glow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn{color:#fff;background:rgba(40,14,90,.6);border:1.5px solid rgba(255,140,240,.45);box-shadow:0 0 22px -6px rgba(255,79,216,.7);font-size:19px}
.btn:hover{transform:translateY(-3px);box-shadow:0 0 36px -4px rgba(255,79,216,.9)}
.btn:active{transform:translateY(1px);box-shadow:0 0 14px -4px rgba(255,79,216,.8)}
.btn.sun,.btn.pink{background:var(--grad);border-color:transparent;color:#140530;text-shadow:none}
.btn.sun{background-size:200% auto;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:200% center}}
.tag{background:rgba(61,242,208,.12);color:var(--teal);border:1.5px solid rgba(61,242,208,.55);box-shadow:0 0 18px -6px var(--teal)}
.outline{-webkit-text-stroke:0;color:transparent;background:linear-gradient(100deg,#fff 20%,#FFB8F0 50%,#9FFFEA 80%);-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 22px rgba(255,79,216,.45))}
h1.outline{color:#fff;background:none;-webkit-text-fill-color:#fff;filter:drop-shadow(0 0 26px rgba(255,79,216,.55))}
h1 .y .l{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.04em}
.ib{background:rgba(40,14,90,.6);border:1.5px solid rgba(255,140,240,.35);box-shadow:none}
.links a:hover{background:rgba(255,79,216,.15)}
.ca button{background:var(--teal);border:0;color:#140530}
.burst{background:repeating-conic-gradient(from 0deg,rgba(255,79,216,.18) 0 6deg,transparent 6deg 20deg,rgba(61,242,208,.14) 20deg 24deg,transparent 24deg 30deg)}
.mascot img{border-radius:50%;border:0;box-shadow:0 0 60px rgba(255,79,216,.55),0 0 120px rgba(155,92,255,.45)}
.ring{position:absolute;border-radius:50%;border:1.5px solid rgba(61,242,208,.5);pointer-events:none}
.ring.r1{inset:0;transform:rotateX(70deg) rotateZ(0);animation:orb 9s linear infinite;border-color:rgba(255,79,216,.6)}
.ring.r2{inset:4%;transform:rotateX(70deg) rotateY(30deg);animation:orb2 13s linear infinite}
.ring::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px var(--pink)}
.ring.r2::after{box-shadow:0 0 14px 4px var(--teal)}
@keyframes orb{to{transform:rotateX(70deg) rotateZ(360deg)}}
@keyframes orb2{to{transform:rotateX(70deg) rotateY(30deg) rotateZ(-360deg)}}
.bubble{color:#fff}.bubble::after{border-top-color:rgba(255,140,240,.6)}
.float.f1,.float.f2,.float.f3{background:var(--card)}
.float.f1{border-color:var(--teal)}.float.f2{border-color:var(--pink)}
.coin{background:var(--grad);border:2px solid #fff;color:#140530;box-shadow:0 0 16px var(--pink)}
.tick{background:var(--grad);border-block:0;color:#140530;box-shadow:0 0 40px -6px var(--pink)}
.tick.alt{background:rgba(20,6,50,.85);color:var(--teal);border-block:1.5px solid rgba(61,242,208,.4)}
.up{color:#0B7A55}.dn{color:#B0083A}
.tok .up,.stat .up{color:var(--teal)}.tok .dn{color:#FF6B8E}
.step p,.qa .ans p{color:var(--dim)}
.step .em{border:1.5px solid rgba(255,255,255,.25);box-shadow:0 0 24px -4px currentColor}
.step:hover{box-shadow:0 0 50px -6px rgba(255,79,216,.8)}
.stat,.pill,.search,.emos button,input[type=text],textarea{background:rgba(20,6,50,.6);color:#fff;border:1.5px solid rgba(255,140,240,.3);box-shadow:none}
.pill.on,.emos button.on{background:var(--grad);color:#140530;border-color:transparent}
input[type=text]:focus,textarea:focus{box-shadow:0 0 0 3px rgba(61,242,208,.35);border-color:var(--teal)}
.qa button{color:#fff}
.bar{background:rgba(20,6,50,.7);border:1.5px solid rgba(255,140,240,.3)}
.bar i{background:var(--grad);border-right:0;box-shadow:0 0 14px var(--pink);animation:none}
.prev{background:var(--card)}
.prev .big{border:1.5px solid rgba(255,255,255,.3);background:var(--grad);box-shadow:0 0 50px -6px var(--pink)}
input[type=range]{border:1.5px solid rgba(255,140,240,.4);background:var(--grad);height:14px}
input[type=range]::-webkit-slider-thumb{border:3px solid var(--pink);box-shadow:0 0 16px var(--pink)}
footer{background:rgba(8,2,24,.9);border-top:1.5px solid rgba(255,79,216,.35)}
.peek img{border:0;border-radius:50%;box-shadow:0 0 40px rgba(255,79,216,.6)}
.logo img{border:0;border-radius:50%;box-shadow:0 0 14px rgba(255,79,216,.6)}
.toast{background:rgba(30,10,70,.92)}

/* ===== launch page ===== */
.links a.cur{background:rgba(255,79,216,.2)}
.lhead{padding-top:50px;text-align:center}
.lhead h1{font-size:clamp(52px,7vw,96px);margin:18px 0 14px}
.lhead .lead{margin:0 auto}
.back-home{display:block;width:max-content;margin:0 auto 18px;font:700 13px var(--mono);color:var(--dim);opacity:.8}
.back-home:hover{opacity:1;color:#fff}
.lgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;padding-top:50px;padding-bottom:40px;align-items:start}
.lform{padding:28px;display:grid;gap:18px}
.lform.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-10px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
.wiz{display:flex;gap:10px;list-style:none;margin-bottom:6px}
.wiz li{flex:1;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1.5px solid rgba(255,140,240,.25);font:400 18px var(--disp);color:var(--dim);cursor:pointer;transition:.25s}
.wiz li i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font:700 13px var(--mono)}
.wiz li.on{color:#fff;border-color:var(--pink);box-shadow:0 0 22px -6px var(--pink)}
.wiz li.on i{background:var(--grad);color:#140530}
.wiz li.done i{background:var(--teal);color:#140530}
.pane{display:none;gap:16px}
.pane.on{display:grid;animation:paneIn .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes paneIn{from{opacity:0;transform:translateX(30px)}}
.two{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
label{position:relative}
.cnt{position:absolute;right:0;top:0;opacity:.6}
.drop{position:relative;height:150px;border:2px dashed rgba(255,140,240,.45);border-radius:18px;display:grid;place-items:center;text-align:center;cursor:pointer;background:rgba(20,6,50,.5) center/cover no-repeat;transition:.2s;text-transform:none;letter-spacing:0}
.drop:hover,.drop.over{border-color:var(--teal);box-shadow:0 0 30px -8px var(--teal);transform:scale(1.01)}
.dz{font:800 16px var(--body);color:var(--dim)}
.dz u{color:var(--teal)}
.dz small{display:block;font:700 11px var(--mono);margin-top:6px;opacity:.7}
.drop.has .dz{opacity:0}
.clear{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(10,3,30,.8);color:#fff;cursor:pointer;display:none}
.drop.has .clear{display:block}
.hintx{color:var(--dim);font-weight:700}
.rv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rv div{padding:14px 16px;border-radius:14px;background:rgba(20,6,50,.6);border:1.5px solid rgba(255,140,240,.2);min-width:0}
.rv small{display:block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.rv b{display:block;font:400 20px var(--disp);margin-top:4px;overflow-wrap:anywhere}
.agree{display:flex;gap:12px;align-items:flex-start;font:800 15px var(--body);text-transform:none;letter-spacing:0;cursor:pointer}
.agree input{width:22px;height:22px;accent-color:var(--pink);flex:none;margin-top:1px}
.wnav{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.wnav .btn{justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.side{position:sticky;top:110px;display:grid;gap:18px}
.side .prev{transform:none}
.live{align-self:flex-start;font:700 11px var(--mono);letter-spacing:.14em;color:var(--teal);margin-bottom:18px;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.4}}
.prev .big{background-size:cover;background-position:center}
.soc{display:flex;gap:8px;margin-top:12px;min-height:8px}
.soc span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(20,6,50,.6);border:1.5px solid rgba(255,140,240,.3);animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.pmeta{display:flex;justify-content:space-between;width:85%;font:700 11px var(--mono);margin-top:10px;opacity:.7}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rule{padding:14px;display:grid;gap:6px;font-size:13px;color:var(--dim)}
.rule b{font:400 16px var(--disp);color:#fff}
@media (max-width:920px){.lgrid{grid-template-columns:1fr}.side{position:static}.rules{grid-template-columns:1fr}.two{grid-template-columns:1fr}.wiz li{font-size:15px;padding:8px}}