@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--grape:#5426B2;--pink:#FF4A98;--mint:#58E9BF;--cream:#FFF8EC;--navy:#27194A;--lav:#D2C2F6;--line:rgba(255,248,236,.13);--mute:#BFB2E6;--trophy:#58E9BF;--wm:#FFF8EC;--f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}
body{font-family:var(--f);color:var(--cream);background:#160C33 radial-gradient(120% 70% at 50% -10%,#3A1F86 0%,#1E1046 45%,#120a2b 100%) fixed;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-radius:10px}
#wrap{max-width:1440px;margin:0 auto;padding:0 clamp(14px,3vw,36px) calc(24px + var(--safe-b))}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 0 4px}
.back{font-size:13.5px;font-weight:700;color:var(--mute);min-height:44px;display:flex;align-items:center}.back:hover{color:var(--cream)}
.brand{display:flex;align-items:center;gap:8px}.brand .zl{width:88px;height:auto;display:block;overflow:visible}.brand span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);border-left:1px solid var(--line);padding-left:8px}
.hero{padding:10px 0 16px}.kick{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.05;letter-spacing:-.035em;font-weight:800;margin:6px 0 8px}.hero h1 span{color:var(--pink)}
.sub{color:var(--mute);font-size:clamp(14.5px,1.6vw,17px);max-width:680px;line-height:1.5}
.studio{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){.studio{grid-template-columns:minmax(0,1fr) 420px;align-items:start}.stagewrap{position:sticky;top:12px}}
.stagewrap{position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(90% 80% at 50% 35%,#3B2391 0%,#22124F 55%,#170C38 100%);border:1px solid var(--line);box-shadow:0 14px 40px rgba(5,0,20,.5);height:min(62vh,560px);min-height:340px}
@media(min-width:980px){.stagewrap{height:calc(100vh - 150px);max-height:780px;min-height:500px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:6px 0 14px}.hero h1{font-size:40px;margin:4px 0 0}.hero .sub{max-width:520px;font-size:14.5px}}
@media(max-height:500px) and (orientation:landscape){.stagewrap{height:calc(100vh - 78px);min-height:280px}}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}
.hud{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:8px;pointer-events:none}.hud b{font-size:15px;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.lvtag,.lv{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:rgba(88,233,191,.16);color:var(--mint)}
.lvtag[data-lv="Intermediate"],.lv[data-lv="Intermediate"]{background:rgba(210,194,246,.18);color:var(--lav)}.lvtag[data-lv="Master Builder"],.lv[data-lv="Master Builder"]{background:rgba(255,74,152,.18);color:#FF8CC0}
.ctrl{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:10px}
.play{width:46px;height:46px;border-radius:50%;background:var(--mint);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.play i{width:14px;height:16px;border-left:5px solid #160C33;border-right:5px solid #160C33}.play.paused i{width:0;height:0;border-right:0;border-left:15px solid #160C33;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.dial{width:62px;height:62px;border-radius:50%;background:rgba(255,248,236,.08);border:1px solid rgba(255,248,236,.22);touch-action:none;display:grid;place-items:center;cursor:grab}
.knob{width:52px;height:52px;border-radius:50%;position:relative}.knob i{position:absolute;left:50%;top:3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px rgba(255,74,152,.25)}
.knob::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--cream)}
.ghost{width:40px;height:40px;border-radius:50%;background:rgba(255,248,236,.08);border:1px solid var(--line);font-size:18px}
.hint{position:absolute;left:14px;top:40px;font-size:11.5px;color:rgba(255,248,236,.5);pointer-events:none;line-height:1.35}.hint .hd{display:none}@media(hover:hover) and (pointer:fine){.hint .hd{display:inline}.hint .hm{display:none}}
.nogl-msg{display:none}.nogl .nogl-msg{display:block;position:absolute;inset:auto 16px 50% 16px;text-align:center;color:var(--mute)}
.panel{display:flex;flex-direction:column;gap:14px}
.panel section{background:linear-gradient(180deg,rgba(42,24,96,.85),rgba(29,16,70,.85));border:1px solid var(--line);border-radius:20px;padding:14px}
.panel h2{font-size:15px;font-weight:800;letter-spacing:-.01em}
.ph{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:12px;font-weight:700;padding:7px 11px;border-radius:99px;border:1px solid var(--line);color:var(--mute);min-height:34px}.chip.on{background:var(--cream);color:#160C33;border-color:var(--cream)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:8px 8px 10px;border-radius:16px;background:rgba(13,7,34,.5);border:1.5px solid transparent;transition:border-color .15s,transform .15s}
.mcard[hidden]{display:none}.mcard:hover{border-color:rgba(88,233,191,.4)}.mcard.on{border-color:var(--mint);background:rgba(88,233,191,.08)}
.mcard img{width:100%;aspect-ratio:480/330;object-fit:cover;border-radius:10px;background:radial-gradient(90% 80% at 50% 35%,#3B2391,#1B0F40)}
.mcard b{font-size:14px;font-weight:800;margin-top:4px}.mcard small{font-size:12px;color:var(--mute)}.mcard .lv{margin-top:6px}
.blurb{font-size:14px;line-height:1.5;color:var(--cream)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 10px}.stats div{background:rgba(13,7,34,.45);border-radius:12px;padding:8px 10px}.stats b{display:block;font-size:17px;font-weight:800}.stats small{font-size:11.5px;color:var(--mute)}
.mat small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lav)}.mat ul{margin:4px 0 0 18px;font-size:13px;color:var(--mute);line-height:1.5}
.style .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.style label{width:100%;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--lav)}
.sws{display:flex;flex-wrap:wrap;gap:7px;flex:1}.sw{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.18)}.sw.on{box-shadow:0 0 0 2px #160C33,0 0 0 4px var(--mint)}
input[type=color]{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:none;padding:2px}
.pats{display:flex;flex-wrap:wrap;gap:6px}.pat{font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:99px;border:1px solid var(--line);color:var(--mute);min-height:34px}.pat.on{background:var(--pink);border-color:var(--pink);color:#fff}
#nameIn{width:100%;font:inherit;font-size:16px;color:var(--cream);background:rgba(13,7,34,.55);border:1px solid var(--line);border-radius:12px;padding:11px 12px}#nameIn::placeholder{color:rgba(191,178,230,.6)}
.szs{display:flex;gap:6px}.sz{font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:99px;border:1px solid var(--line);color:var(--mute);min-height:34px}.sz.on{background:var(--cream);color:#160C33}
.dl{margin-top:16px;width:100%;min-height:54px;border-radius:16px;background:linear-gradient(90deg,var(--pink),#C23BD6 55%,var(--grape));color:#fff;font-size:16px;font-weight:800;box-shadow:0 10px 26px rgba(255,74,152,.25)}.dl small{font-weight:600;opacity:.85;font-size:12px;margin-left:6px}.dl:disabled{opacity:.7}
.proof{margin-top:12px;font-size:12px;line-height:1.45;color:var(--mute);display:flex;flex-direction:column;gap:4px}.proof b{color:var(--mint);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.show{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px;border-radius:20px;background:linear-gradient(90deg,rgba(88,233,191,.12),rgba(84,38,178,.25));border:1px solid rgba(88,233,191,.3)}
.show h2{font-size:18px;font-weight:800}.show p{color:var(--mute);font-size:14px;margin-top:4px}.show p a{color:var(--mint);font-weight:700}
.mail{min-height:46px;display:inline-flex;align-items:center;padding:0 20px;border-radius:99px;background:var(--mint);color:#160C33;font-weight:800;font-size:14.5px}
.foot{margin-top:24px;color:var(--mute);font-size:12.5px;line-height:1.6;text-align:center}.foot span{opacity:.7}
body.shotcard .hero,body.shotcard .panel,body.shotcard .show,body.shotcard .foot,body.shotcard .top,body.shotcard .ctrl,body.shotcard .hint{display:none}
@media(max-height:500px) and (orientation:landscape){.hero{padding:2px 0 8px}.hero .sub,.kick{display:none}.hero h1{font-size:24px;margin:0}.top{padding:6px 0 0}}
.cardtitle{display:none}
body.shotcard #wrap{padding:0;max-width:none}body.shotcard .stagewrap{position:fixed;inset:0;height:100vh;max-height:none;min-height:0;border-radius:0;border:0}
body.shotcard .hud{display:none}body.shotcard .cardtitle{display:flex;flex-direction:column;gap:10px;position:absolute;right:56px;top:50%;transform:translateY(-50%);text-align:left;pointer-events:none}
.cardtitle small{font-size:20px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}.cardtitle b{font-size:84px;line-height:.95;letter-spacing:-.04em;font-weight:800}.cardtitle span{font-size:24px;line-height:1.35;color:var(--lav)}
body.shotcard.notitle .cardtitle{display:none}