:root{--bg:#0b0a1b;--panel:#1b1633;--lime:#dcff5e;--lilac:#b79bff;--muted:#c0b9d4;--line:#b79bff30;--cyan:#73ecff;--pink:#ff88bc}
body{background:var(--bg);overflow-x:clip}header,main,footer{max-width:1500px}header{padding:23px 54px;position:relative;z-index:5;border-color:#b79bff26;background:#0b0a1bbb}.brand .mark{box-shadow:0 0 28px #dcff5e22;padding:0}.nav-cta{background:#dcff5e;color:#192126;border:0;box-shadow:0 0 24px #dcff5e22}nav a:hover{color:var(--lime)}nav .nav-cta:hover{color:#192126}
#party-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}.ambient-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 9% 25%,#792b9a35,transparent 45%),radial-gradient(ellipse at 95% 60%,#24667430,transparent 45%)}
.hero{min-height:700px;padding:55px 54px 35px;grid-template-columns:1fr 1.1fr;gap:35px;overflow:clip}.hero::before{background:radial-gradient(ellipse at 80% 40%,#6830b740,transparent 55%),radial-gradient(ellipse at 20% 90%,#2b5b6822,transparent 55%)}
.intro{position:relative;z-index:2}.intro>.eyebrow{font-size:12px;letter-spacing:2.5px;color:#e1cbff}.intro h1{position:relative;font-size:clamp(48px,5.7vw,83px);line-height:.98;letter-spacing:-4px;margin:23px 0 25px}.intro h1 em{font-size:1.45em;line-height:.86;letter-spacing:-.065em;text-shadow:0 4px 0 #72872e,0 0 55px #dcff5e28;margin-top:11px}.title-spark{position:absolute;top:37%;right:5%;font-size:64px;color:var(--pink);text-shadow:0 0 35px #ff88bc50;transform:rotate(-15deg)}
.intro .hero-lead{font-size:17px;line-height:1.7;color:#d8d1e9}.hero-actions{margin-top:26px}.hero-actions .button{padding:16px 24px;font-size:15px}.hero-actions .primary{box-shadow:0 0 35px #dcff5e23}.hero-actions .secondary{border-color:#b79bff80;background:#b79bff0c}.intro>.caption{font-size:12px}.hero-note{font-size:12px;margin-top:22px;max-width:380px;color:#c4b9d7}.hero-note>span{color:var(--pink);font-size:32px}
.broadcast-lights{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.broadcast-lights i{position:absolute;top:-90px;left:25%;width:320px;height:950px;background:linear-gradient(#b79bff38,transparent 90%);clip-path:polygon(49% 0,51% 0,100% 100%,0 100%);transform-origin:50% 0;transform:rotate(-28deg)}.broadcast-lights i:nth-child(2){left:70%;background:linear-gradient(#73ecff26,transparent 90%);transform:rotate(28deg)}.broadcast-lights i:nth-child(3){left:95%;background:linear-gradient(#dcff5e20,transparent 90%);transform:rotate(40deg)}
.showcase{padding-top:185px;margin-top:0;perspective:1000px;isolation:isolate}.showcase-orbit{inset:-6% -10% 8%;border:1px solid #b79bff45;box-shadow:0 0 70px #9b5cff10}.logo-orbit{position:absolute;width:210px;height:170px;top:0;left:25%;display:grid;place-items:center}.logo-orbit img{width:112px;height:112px;border-radius:30px;transform:rotate(-14deg);box-shadow:7px 9px 0 #0004,0 0 55px #dcff5e40}.logo-ring{position:absolute;inset:10px -14px;border:1px dashed #b79bff88;border-radius:50%;transform:rotate(-25deg)}.logo-orbit>span{position:absolute;bottom:0;right:-18px;background:#b79bff;color:#1b1331;line-height:1.2;padding:11px 17px;font-weight:800;font-size:12px;border-radius:7px;transform:rotate(10deg);box-shadow:3px 4px 0 #0004}.logo-orbit>b{position:absolute;top:0;right:-26px;color:var(--lime);font-size:42px;text-shadow:0 0 22px #dcff5e60}.show-ticket{top:158px;right:20px;background:#ffc0d9;color:#321528;font-size:10px;padding:10px 14px;z-index:4}
.screen-frame{border-color:#b79bff99;box-shadow:0 25px 70px #0007,0 0 40px #a260ff28,inset 0 0 0 1px #b79bff30;background:#17152c}.screen-bar{background:linear-gradient(90deg,#392252,#203543);color:#d9c4f2}.phone-frame{top:auto;bottom:135px;right:-8px;width:121px;border-color:#685e7b;box-shadow:0 18px 40px #0008,0 0 30px #dcff5e20}.phone-tag{background:#dcff5e;padding:8px;font-size:8px}.showcase-caption{padding:30px 130px 0 8px;min-height:145px}.showcase-caption p{font-size:14px}.showcase-caption .eyebrow{font-size:11px}.showcase-caption small{font-size:12px}.slide-controls button{width:34px;height:34px;font-size:12px;background:#251d39;border-color:#b79bff44}
.showtime-controls{margin:0 54px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid #b79bff35}.showtime-controls>span{font-size:11px;letter-spacing:2px;color:#b4a4cf}.showtime-controls>div{display:flex;gap:10px}.showtime-controls button{border:1px solid #b79bff60;border-radius:30px;background:#b79bff12;color:#e3d5ff;font-size:12px;padding:10px 16px;min-height:40px}#chaos-button{color:#ffb4d5;border-color:#ff88bc66;background:#ff88bc0c}#chaos-button:hover{background:#ff88bc25;box-shadow:0 0 28px #ff88bc20}
.hype-marquee{overflow:hidden;max-width:100%;border-block:1px solid #b79bff55;background:linear-gradient(100deg,#382249,#142c34);padding:14px 0;transform:rotate(-1deg);margin:0 0 52px}.hype-marquee>div{display:flex;width:max-content}.hype-marquee span{font:700 32px/1 'Space Grotesk',sans-serif;letter-spacing:-1px;white-space:nowrap;color:#d3c1fa}.hype-marquee b{color:var(--lime);font-size:26px;margin:0 26px}
@media(max-width:1050px){header{padding-inline:30px}.hero{padding:40px 30px 30px;gap:25px;min-height:650px}.intro h1{font-size:58px}.intro h1 em{font-size:1.4em}.title-spark{right:0;font-size:45px}.intro .hero-lead{font-size:16px}.hero-actions .button{font-size:14px;padding:14px 18px}.showcase{padding-top:175px}.showcase-caption{padding-right:95px}.phone-frame{width:96px;bottom:160px}.show-ticket{top:150px;font-size:8px}.showtime-controls{margin-inline:30px}}
@media(max-width:640px){header{padding:18px 22px}nav{gap:15px;font-size:12px}.brand{font-size:20px}.hero{display:block;padding:36px 22px 20px;min-height:0}.intro h1{font-size:clamp(44px,10.5vw,72px);letter-spacing:-2.5px}.intro h1 em{font-size:1.38em;line-height:.9}.title-spark{right:8%;top:36%;font-size:54px}.intro>.eyebrow{font-size:10px;letter-spacing:1.5px}.intro .hero-lead{font-size:16px}.hero-note{margin-top:18px}.showcase{margin:26px auto 0;padding-top:150px;padding-right:12px}.logo-orbit{height:140px;top:0;left:27%;width:180px}.logo-orbit img{width:95px;height:95px;border-radius:25px}.logo-orbit>span{font-size:10px}.logo-orbit>b{font-size:32px}.show-ticket{top:135px;right:25px;font-size:8px}.phone-frame{bottom:143px;width:98px;right:3px}.showcase-caption{padding-right:92px;min-height:175px;padding-top:25px}.showtime-controls{margin:0 22px 25px;align-items:flex-start;flex-direction:column;gap:12px}.showtime-controls>span{font-size:9px;letter-spacing:1.5px}.showtime-controls button{min-height:44px}.hype-marquee{margin-bottom:35px}.hype-marquee span{font-size:25px}.hype-marquee b{font-size:20px;margin-inline:18px}}
@media(max-width:360px){header{padding-inline:16px}.hero{padding-inline:16px}.intro h1{font-size:42px}.title-spark{right:0;font-size:43px}.showcase-caption{padding-right:82px}.phone-frame{width:82px;bottom:165px}.showtime-controls{margin-inline:16px}.hero-actions .button{width:100%}}
/* Turn up every dial on the broadcast set. */
.ambient-glow{background-size:140% 140%;animation:aurora-drift 18s ease-in-out infinite alternate}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#c6b1ff40 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(transparent,#0008 40%,transparent)}
.broadcast-lights i{animation:light-sweep 16s ease-in-out infinite alternate}.broadcast-lights i:nth-child(2){animation-delay:-9s}.broadcast-lights i:nth-child(3){animation-delay:-4s;animation-duration:22s}
.intro h1 em{animation:title-glow 6s ease-in-out infinite}.title-spark{animation:spark-spin 24s linear infinite}.logo-orbit img{animation:logo-bob 6s ease-in-out infinite}.logo-ring{animation:spark-spin 28s linear infinite}.logo-orbit>b{animation:spark-bob 5s ease-in-out infinite}.logo-orbit>span{animation:sticker-wiggle 8s ease-in-out infinite}.showcase-orbit{animation:orbit-breathe 10s ease-in-out infinite}
.hype-marquee>div{animation:hype-scroll 36s linear infinite}.hype-marquee:hover>div{animation-play-state:paused}
.screen-frame{transform:rotate(-2deg) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .4s ease-out,box-shadow .4s}.screen-frame::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #e4c9ff25;background:linear-gradient(115deg,transparent 25%,#ffffff06 45%,transparent 65%)}.screen-frame:hover{box-shadow:0 28px 70px #0008,0 0 65px #a260ff44}
.phone-frame{animation:phone-hover 7s ease-in-out infinite}.show-ticket{animation:ticket-wiggle 9s ease-in-out infinite}.hero-actions .primary{position:relative;overflow:hidden}.hero-actions .primary::after{content:'';position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 40%,#ffffff60 50%,transparent 60%);translate:-90% 0;animation:button-glint 7s ease-in-out infinite;pointer-events:none}
.feature-strip{margin:0 54px;border-color:#b79bff44;box-shadow:0 0 40px #b79bff0b;background:linear-gradient(120deg,#261c3d,#102c34);overflow:hidden}.feature-strip>div{position:relative;transition:background .3s}.feature-strip>div:hover{background:#b79bff12}.feature-strip b{color:var(--lime)}.feature-strip strong{font-size:18px}.feature-strip>div>span{font-size:14px;color:#bdb5ce}.feature-strip>div::after{content:'';position:absolute;bottom:0;left:20px;right:20px;height:2px;background:linear-gradient(90deg,#dcff5e,#b79bff);opacity:.5}
.how-heading h2,.warm-up h2,.section-head h2,.control-feature>h2{letter-spacing:-2px;font-weight:700}.how-heading h2{text-shadow:0 0 35px #b79bff20}.how .step{background:radial-gradient(ellipse at 90% 0,#b79bff20,transparent 70%),#19152d;border-color:#b79bff38;box-shadow:0 12px 30px #0003}.how .step:nth-child(2){background:radial-gradient(ellipse at 90% 0,#73ecff17,transparent 70%),#151b2d}.how .step:nth-child(3){background:radial-gradient(ellipse at 90% 0,#dcff5e14,transparent 70%),#182328}.how .step:hover{box-shadow:0 15px 35px #0004,0 0 35px #b79bff16}.how .step p{font-size:16px}.how .step h3{font-size:25px}.how .step>.step-foot{font-size:10px}.step-label{font-size:11px}
.steps-visible .scene-buzz .buzz-ring{animation:buzz-ripple 3.5s ease-out infinite}.steps-visible .scene-buzz .ring-two{animation-delay:1.3s}.steps-visible .scene-mix .scene-spark{animation:spark-spin 25s linear infinite}.step-scene{background:radial-gradient(ellipse,#b79bff18,transparent 75%)}
.warm-up{position:relative}.warm-up-copy>.eyebrow{color:var(--pink)}.warm-up .preview{border-color:#b79bff80;box-shadow:0 18px 65px #0004,0 0 50px #b79bff15;background:linear-gradient(135deg,#36264b,#151c31)}.preview-top{background:#b79bff08}.warm-up .preview h2{font-size:27px;letter-spacing:-.8px}.preview-bottom .decor{animation:spark-spin 25s linear infinite}.answer-row input:focus{border-color:#dcff5e;outline:2px solid #dcff5e40;box-shadow:0 0 20px #dcff5e0c}.answer-result{box-shadow:0 0 28px #dcff5e0c}.demo-choices button.selected{box-shadow:0 0 22px #dcff5e1a}
.control-feature{position:relative;background:linear-gradient(130deg,#251a39,#151c30);border-color:#b79bff30}.control-grid article>span{color:var(--pink);text-shadow:0 0 22px #ff88bc33}.control-grid article:nth-child(2)>span{color:var(--cyan)}.control-grid article:nth-child(3)>span{color:var(--lime)}.control-grid p{font-size:16px}.pack-grid{gap:12px}.pack{border-color:#b79bff30;background:linear-gradient(120deg,#b79bff0b,#73ecff06);transition:transform .25s,border-color .25s,box-shadow .25s}.pack:hover{transform:translateY(-4px);border-color:#b79bff90;box-shadow:0 8px 25px #b79bff12}.pack>span:first-child{filter:drop-shadow(0 0 10px #b79bff40)}
.download{position:relative;background:radial-gradient(ellipse at 90% 20%,#ffffff60,transparent 50%),linear-gradient(125deg,#dcff5e,#a6edb1);box-shadow:0 0 65px #dcff5e16;border:1px solid #dcff5e;overflow:hidden}.download::before{content:'✦';position:absolute;right:-35px;top:-60px;font-size:300px;line-height:1;color:#1123230a;pointer-events:none;animation:spark-spin 50s linear infinite}.download h2{font-weight:700;letter-spacing:-2px}.download p{color:#243b30}.download .button{min-height:50px}.download .primary{background:#111827;color:#dcff5e;box-shadow:0 8px 25px #11182720}.download .launch-card{position:relative;background:#ffffff3a;border-color:#213e3628}.download .launch-card li{font-size:16px}.faq details{border-color:#b79bff30}.faq summary:hover{color:var(--lime)}footer{border-color:#b79bff30}footer .mark{box-shadow:0 0 25px #dcff5e22}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #b79bff;outline-offset:4px}
#party-message{position:fixed;left:50%;bottom:28px;translate:-50% 0;z-index:12;max-width:calc(100vw - 32px);background:#27183eee;border:1px solid #ff88bc88;box-shadow:0 0 45px #ff88bc33;border-radius:14px;padding:14px 22px;color:#ffc9e2;font-size:14px;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(10px)}#party-message.visible{opacity:1;transform:translateY(0)}
@keyframes light-sweep{to{transform:rotate(30deg)}}
@keyframes aurora-drift{to{background-position:90% 80%}}
@keyframes title-glow{50%{text-shadow:0 4px 0 #72872e,0 0 75px #dcff5e40}}
@keyframes spark-spin{to{rotate:360deg}}
@keyframes logo-bob{50%{translate:0 -10px;rotate:7deg}}
@keyframes spark-bob{50%{translate:3px -8px;rotate:16deg}}
@keyframes sticker-wiggle{50%{rotate:-8deg;translate:0 -3px}}
@keyframes ticket-wiggle{50%{rotate:-5deg}}
@keyframes orbit-breathe{50%{scale:1.06;opacity:.55}}
@keyframes phone-hover{50%{translate:0 -9px;rotate:-3deg}}
@keyframes hype-scroll{to{transform:translateX(-50%)}}
@keyframes button-glint{70%{translate:-90% 0}100%{translate:90% 0}}
@keyframes buzz-ripple{0%{scale:.7;opacity:0}20%{opacity:.7}100%{scale:1.5;opacity:0}}

html[data-page-hidden=true] *,html[data-page-hidden=true] *::before,html[data-page-hidden=true] *::after{animation-play-state:paused!important}
@media(max-width:1050px){.feature-strip{margin-inline:30px}.how .step h3{font-size:23px}.how .step p{font-size:15px}}
@media(max-width:640px){.feature-strip{margin-inline:22px}.feature-strip strong{font-size:17px}.feature-strip>div>span{font-size:12px}.how .step p{font-size:15px}.how .step h3{font-size:23px}.how .step>.step-foot{font-size:9px}.control-grid p{font-size:16px}.download .launch-card li{font-size:15px}.warm-up .preview h2{font-size:25px}.packs .section-head h2{font-size:35px}.showcase-caption p{font-size:14px}.how .step-scene{min-width:0}.download::before{font-size:230px;top:-30px}}
@media(max-width:360px){.feature-strip{margin-inline:16px}.how .step h3{font-size:20px}.how .step p{font-size:14px}}
@media(hover:none){.pack:hover,.how .step:hover{transform:none}.screen-frame{transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#party-canvas{display:none}.screen-frame{transform:rotate(-2deg)}}

/* Compact desktop windows keep the navigation and gameplay preview together. */
@media(min-width:641px) and (max-width:900px){
 header{padding:18px 24px}.brand{font-size:19px;gap:9px}nav{gap:16px;font-size:12px}.nav-cta{padding:10px 14px}
 .hero{padding:32px 24px;gap:24px;min-height:610px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .intro h1{font-size:clamp(38px,5.5vw,49px);letter-spacing:-2.5px}.intro h1 em{font-size:1.35em}
 .intro>.eyebrow{font-size:9px;letter-spacing:1.4px}.intro .hero-lead{font-size:14px}.title-spark{font-size:32px;right:0}
 .hero-actions{gap:9px}.hero-actions .button{padding:12px 14px;font-size:12px}.intro>.caption{font-size:11px}.hero-note{font-size:11px;margin-top:18px}
 .showcase{padding-top:145px}.logo-orbit{width:150px;height:130px;left:22%}.logo-orbit img{width:88px;height:88px}.logo-orbit>span{font-size:9px;padding:8px 12px}.logo-orbit>b{font-size:30px}
 .show-ticket{top:125px;font-size:7px;padding:8px 10px;right:8px}.screen-bar{font-size:7px;padding:10px}.screen-bar>span:last-child{font-size:10px}
 .phone-frame{width:72px;right:0;bottom:155px}.phone-tag{font-size:6px;padding:6px}.showcase-caption{padding:24px 64px 0 0;min-height:150px}.showcase-caption p{font-size:12px}.showcase-caption small{font-size:10px}.showcase-caption .eyebrow{font-size:9px}.slide-controls{gap:5px}.slide-controls button{width:28px;height:28px;font-size:10px}
 .how-heading{gap:24px}.how h2{font-size:34px}.how .steps{gap:12px}.how .step{padding:16px}.how .step h3{font-size:19px}.how .step p{font-size:13px}.step-scene{height:145px}.mini-window{width:145px}.mini-window>div{flex-wrap:wrap}
 .warm-up{gap:24px}.warm-up h2{font-size:34px}.warm-up .preview #demo{padding:24px 18px}.answer-row{flex-wrap:wrap}.answer-row .button{width:100%}.preview h2{font-size:22px}
 .pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.control-grid{gap:18px}.control-grid h3{font-size:20px}.download{gap:24px;padding:24px}.download h2{font-size:32px}.launch-card{padding:20px}
}