:root{color-scheme:dark;font-family:ui-rounded,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;--pink:#ff2bd6;--lime:#dfff00;--cyan:#34f6ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#120024;overscroll-behavior:none}
body{position:fixed;inset:0;touch-action:none}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
#camera{position:fixed;width:2px;height:2px;opacity:.001;pointer-events:none}
.panel{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:max(34px,env(safe-area-inset-top)) 25px max(34px,env(safe-area-inset-bottom));background:linear-gradient(110deg,rgba(10,0,27,.2),rgba(10,0,27,.16) 50%,rgba(10,0,27,.67)),linear-gradient(180deg,rgba(18,0,36,.04),rgba(18,0,36,.25) 46%,rgba(18,0,36,.94));transition:opacity .6s,transform .7s;overflow:hidden}
.panel::before,.panel::after{content:"";position:absolute;border:2px solid rgba(255,255,255,.25);transform:rotate(-18deg);pointer-events:none}.panel::before{width:48vw;height:48vw;border-radius:35% 65% 44% 56%;right:-24vw;top:5vh}.panel::after{width:24vw;height:62vh;left:-20vw;top:-14vh;border-color:var(--cyan)}
.panel.out{opacity:0;transform:scale(1.2);pointer-events:none}
.eyebrow{font-weight:900;font-size:11px;letter-spacing:.25em;margin:0 0 10px;color:var(--lime)}
h1{font-size:clamp(65px,20vw,110px);font-weight:1000;line-height:.72;letter-spacing:-.09em;margin:0 0 30px;text-shadow:0 0 28px rgba(255,43,214,.55);transform:skewY(-3deg)}
h1 span{color:transparent;-webkit-text-stroke:2px white;text-shadow:5px 6px 0 var(--pink),-5px -4px 0 var(--cyan)}
.lead{font-weight:700;line-height:1.8;font-size:15px;margin:0 0 22px;text-shadow:0 2px 8px #150026}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.primary{position:relative;width:100%;height:68px;padding:0 18px 0 25px;border-radius:6px;background:var(--lime);color:#170026;font-size:17px;font-weight:1000;letter-spacing:.08em;display:flex;align-items:center;justify-content:space-between;box-shadow:7px 7px 0 var(--pink);transform:skewX(-4deg)}
.primary b{font-size:30px}.primary:active{transform:translate(5px,5px) skewX(-4deg);box-shadow:2px 2px 0 var(--pink)}
.ghost{align-self:center;background:transparent;text-decoration:underline;text-underline-offset:4px;padding:18px;font-size:12px;font-weight:700}
.note{align-self:center;text-align:center;max-width:330px;font-size:9px;line-height:1.6;opacity:.65;margin:0}
.hidden{opacity:0!important;pointer-events:none!important}
.hud{position:absolute;z-index:5;top:0;left:0;right:0;padding:max(18px,env(safe-area-inset-top)) 18px 0;display:flex;align-items:center;justify-content:space-between;transition:opacity .4s;mix-blend-mode:screen;text-shadow:0 1px 7px #000}
.brand{font-size:11px;font-weight:1000;letter-spacing:.12em}.brand b{color:var(--lime)}
.status{font-size:9px;letter-spacing:.12em;font-weight:900;display:flex;gap:7px;align-items:center}.status i{display:block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.8);opacity:.5}}
.controls{position:absolute;z-index:6;left:0;right:0;bottom:0;padding:10px 14px max(14px,env(safe-area-inset-bottom));display:flex;gap:7px;align-items:center;background:linear-gradient(transparent,rgba(8,0,27,.72));transition:opacity .4s}
.controls.simple{justify-content:center;background:linear-gradient(transparent,rgba(8,0,27,.35))}
.scene{height:42px;flex:1;padding:0 7px;background:rgba(20,0,50,.42);border:1px solid rgba(255,255,255,.35);border-radius:21px;font-size:9px;font-weight:1000;letter-spacing:.12em;backdrop-filter:blur(8px)}
.scene.active{background:white;color:#1a002a;border-color:white;box-shadow:0 0 18px var(--pink)}
.round{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:rgba(20,0,50,.55);border:1px solid rgba(255,255,255,.4);font-size:19px;backdrop-filter:blur(8px)}
.tip{position:absolute;z-index:12;left:20px;right:20px;bottom:max(80px,calc(env(safe-area-inset-bottom) + 74px));padding:22px 46px 20px 22px;background:rgba(16,0,45,.88);border:1px solid var(--cyan);border-radius:16px;box-shadow:0 0 30px rgba(52,246,255,.25);backdrop-filter:blur(18px);transition:.3s}
.tip strong{color:var(--lime);letter-spacing:.12em}.tip p{font-size:12px;line-height:1.8;margin:8px 0 0}.tip button{position:absolute;right:10px;top:8px;background:transparent;font-size:22px}
.toast{position:absolute;z-index:20;left:20px;right:20px;top:max(58px,calc(env(safe-area-inset-top) + 42px));padding:12px 16px;border-radius:12px;background:rgba(18,0,40,.82);font-size:11px;text-align:center;line-height:1.5;backdrop-filter:blur(12px);opacity:0;transform:translateY(-10px);transition:.3s;pointer-events:none}.toast.show{opacity:1;transform:none}
@media (min-width:700px){.panel{padding-left:max(8vw,60px)}.panel>*{max-width:430px}.controls{width:160px;left:50%;right:auto;transform:translateX(-50%)}h1{font-size:100px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}