.stage{--beat:.625s;min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) 16px calc(var(--sky-control) + 32px);background:radial-gradient(60% 42% at 50% 38%, var(--sky-glow-fuchsia), transparent 72%), radial-gradient(45% 30% at 8% 96%, var(--sky-glow-olo), transparent 70%), radial-gradient(40% 28% at 96% 6%, var(--sky-haze-aqua), transparent 70%), var(--sky-ground);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-template-rows:minmax(0,1fr) auto auto;gap:14px;display:grid;position:relative;overflow:hidden}.stage:before{content:"";pointer-events:none;background:radial-gradient(1.5px 1.5px at 10% 14%,#ffffffb3,#0000),radial-gradient(1.5px 1.5px at 82% 10%,#fff9,#0000),radial-gradient(2px 2px at 92% 44%,#00ffccb3,#0000),radial-gradient(1.5px 1.5px at 24% 40%,#ffffff80,#0000),radial-gradient(2px 2px at 4% 62%,#ff00bf99,#0000),radial-gradient(1.5px 1.5px at 56% 6%,#ffffff8c,#0000);animation:7s ease-in-out infinite stage-twinkle;position:absolute;inset:0}@keyframes stage-twinkle{50%{opacity:.45}}.stage-floor{flex-wrap:wrap;justify-content:center;align-self:center;gap:6px 0;width:100%;max-width:1340px;margin:0 auto;display:flex}.stage-spot{width:33.33%;max-width:264px;container-type:inline-size}.stage-cell{height:calc(123.5cqw + 56px);position:relative}.stage-rive{display:block}.stage-rive>.w-rive{width:100%;height:100%;display:block;position:absolute;inset:0}.stage-pad{pointer-events:none;width:100cqw;height:62.5cqw;position:absolute;top:61cqw;left:0}.stage-body{pointer-events:none;transform-origin:50% 90%;width:104cqw;height:104cqw;position:absolute;top:0;left:-2cqw}.stage-spot[data-filled] .stage-body{animation:5s ease-in-out infinite stage-sway}.stage-spot:nth-child(2n) .stage-body{animation-delay:-1.7s}.stage-spot:nth-child(3n) .stage-body{animation-delay:-3.1s}@keyframes stage-sway{50%{transform:translateY(-3px)scale(1.01,.99)}}.stage-body.is-bounce{animation:stage-bounce var(--beat) cubic-bezier(.3, .6, .4, 1) 1}.stage-body.is-spin{animation:stage-spin var(--beat) ease-in-out 1}.stage-body.is-glow{animation:stage-fade var(--beat) ease-out 1}@keyframes stage-bounce{35%{transform:translateY(-26%)scale(.96,1.06)}70%{transform:translateY(0)scale(1.1,.88)}}@keyframes stage-spin{0%{transform:perspective(420px)rotateY(0)}to{transform:perspective(420px)rotateY(360deg)}}@keyframes stage-fade{40%{opacity:.55}}.stage-pic{width:100%;height:100%;display:block;position:relative}.stage-pic-canvas,.stage-pic-rive,.stage-pic-rive>.w-rive{width:100%;height:100%;display:block;position:absolute;inset:0}.stage-pic.is-rive .stage-pic-canvas{visibility:hidden}.stage-spot-btn{width:100%;min-height:var(--sky-control);cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:40% 40% 50% 50%;padding:0;position:absolute;inset:0 0 56px}.stage-spot-btn:focus-visible{outline:3px solid var(--sky-ink);outline-offset:-4px}.stage-cell.is-down .stage-body{transition:transform .12s cubic-bezier(.34,1.56,.64,1);transform:scale(1.1,.86)}.stage-off{width:var(--sky-control);height:var(--sky-control);margin-left:calc(var(--sky-control) / -2);background:var(--sky-glass);color:var(--sky-ink-muted);cursor:pointer;touch-action:manipulation;border:0;border-radius:50%;place-items:center;padding:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1);display:grid;position:absolute;bottom:0;left:50%;box-shadow:inset 0 0 0 1px #ffffff29}.stage-off svg{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;width:28px;height:28px}.stage-off:active{transform:scale(var(--sky-press))}.stage-off:focus-visible{outline:3px solid var(--sky-ink);outline-offset:3px}.stage-controls{z-index:1;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px;display:flex}.stage-slots,.stage-palette{gap:8px;display:flex}.stage-slots{background:#ffffff0d;border-radius:28px;padding:6px;box-shadow:inset 0 0 0 1px #ffffff1a}.stage-tile{width:var(--sky-control);height:var(--sky-control);color:var(--sky-ink);cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:22px;flex:none;padding:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1);display:block;position:relative}.stage-tile.is-empty{cursor:default}.stage-tile .stage-rive{pointer-events:none;position:absolute;inset:-9px}.stage-tile:not(.is-empty):active{transform:scale(var(--sky-press))}.stage-tile:focus-visible{outline:3px solid var(--sky-ink);outline-offset:4px}.stage-play,.stage-friend{background:var(--sky-glass);color:var(--sky-ink);cursor:pointer;touch-action:manipulation;border:0;place-items:center;padding:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;display:grid;position:relative;box-shadow:inset 0 0 0 1px #ffffff29}.stage-play{width:var(--sky-control);height:var(--sky-control);color:var(--sky-go);box-shadow:inset 0 0 0 3px var(--sky-go), 0 0 26px var(--sky-glow-olo);border-radius:50%}.stage-play[aria-pressed=false]{color:var(--sky-ink);box-shadow:inset 0 0 0 1px #ffffff4d}.stage-play svg{fill:none;stroke:currentColor;stroke-width:4px;stroke-linecap:round;width:30px;height:30px}.stage-play svg .is-fill{fill:currentColor;stroke-linejoin:round}.stage-play:active,.stage-friend:active{transform:scale(var(--sky-press))}.stage-play:focus-visible,.stage-friend:focus-visible{outline:3px solid var(--sky-ink);outline-offset:3px}.stage-tray{scrollbar-width:none;z-index:1;justify-content:safe center;gap:12px;margin:0;padding:6px 4px 10px;list-style:none;display:flex;overflow-x:auto}.stage-tray::-webkit-scrollbar{display:none}.stage-tray li{flex:none}.stage-friend{border-radius:28px;width:76px;height:76px}.stage-friend .stage-pic{width:100%;height:100%;transform:scale(1.22)translateY(-2px)}.stage-friend[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--sky-go), 0 0 26px var(--sky-glow-olo)}.is-nope{animation:.45s ease-in-out stage-nope}@keyframes stage-nope{20%{transform:translate(-6px)}50%{transform:translate(5px)}80%{transform:translate(-3px)}}.stage-burst{aspect-ratio:1;pointer-events:none;z-index:2;width:min(120vw,720px);position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.stage.is-chorus{animation:1.8s ease-out stage-flash}@keyframes stage-flash{0%{box-shadow:inset 0 0 120px var(--sky-glow-olo)}to{box-shadow:inset 0 0 #0000}}@media (min-width:900px){.stage{gap:20px}.stage-spot{width:20%}.stage-friend{width:84px;height:84px}}@media (prefers-reduced-motion:reduce){.stage:before,.stage-spot[data-filled] .stage-body{animation:none}.stage-body.is-bounce,.stage-body.is-spin{animation:stage-fade var(--beat) ease-out 1}.is-nope{animation:.45s ease-out stage-fade}.stage.is-chorus{animation:none}.stage-tile,.stage-off,.stage-play,.stage-friend,.stage-cell.is-down .stage-body{transition:none}}