.shake{position:fixed;inset:0;overflow:hidden}.stage{--bg:#a9e34b;background:var(--bg);transition:background .8s;position:absolute;inset:0}:where(.shake) button{font:inherit;color:inherit;cursor:pointer;touch-action:none;background:0 0;border:0;margin:0;padding:0}.pick{justify-content:center;align-items:center;gap:8vmin;padding-top:64px;display:flex;position:absolute;inset:0}.pick[hidden]{display:none}.pick-btn{aspect-ratio:200/320;background:#fff;border-radius:10vmin;height:min(60vmin,100dvh - 120px);padding:3vmin;transition:transform .15s;box-shadow:0 8px #3b335526}.pick-btn:active{transform:translateY(6px)scale(.97)}.pick-btn svg{width:100%;height:100%}@media (orientation:portrait){.pick{gap:5vw}.pick-btn{width:42vw;height:auto}}.play{position:absolute;inset:0}.play[hidden]{display:none}.instrument{aspect-ratio:200/320;touch-action:none;height:min(76vmin,100dvh - 130px);position:absolute;top:calc(50% + 24px);left:50%;translate:-50% -50%}@media (orientation:portrait){.instrument{height:min(128vw,100dvh - 210px)}}.instrument .art{transform-origin:50% 85%;filter:drop-shadow(0 8px 10px #3b335540);width:100%;height:100%}.instrument .art svg{width:100%;height:100%}.switch-btn{left:max(14px, env(safe-area-inset-left));bottom:max(14px, env(safe-area-inset-bottom));background:#fff;border-radius:50%;width:20vmin;min-width:72px;max-width:140px;height:20vmin;min-height:72px;max-height:140px;padding:2.5vmin;transition:transform .15s;position:absolute;box-shadow:0 6px #3b33552e}.switch-btn:active{transform:translateY(4px)}.switch-btn svg{width:100%;height:100%}.motion-btn{right:max(14px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));color:#3b3355;background:#fff;border-radius:50%;width:15vmin;min-width:56px;max-width:104px;height:15vmin;min-height:56px;max-height:104px;padding:2vmin;transition:transform .15s,opacity .2s;position:absolute;box-shadow:0 6px #3b33552e}.motion-btn[hidden]{display:none}.motion-btn:active{transform:translateY(4px)}.motion-btn svg{width:100%;height:100%}.motion-btn .slash{display:none}.motion-btn.is-off{opacity:.55}.motion-btn.is-off .waves{opacity:.3}.motion-btn.is-off .slash{display:block}.hint-hand path{fill:#fff;stroke:#3b3355;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}.effects{pointer-events:none;position:absolute;inset:0;overflow:hidden}.is-pop{animation:.35s cubic-bezier(.34,1.56,.64,1) pop}@keyframes pop{0%{scale:.85}50%{scale:1.12}to{scale:1}}.instrument .art.is-glint .glint{animation:.3s ease-out glint}@keyframes glint{0%{opacity:0}30%{opacity:.95}to{opacity:0}}.fx{left:var(--x);top:var(--y);width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);animation:fx-fly var(--dur) cubic-bezier(.2, .7, .4, 1) forwards;filter:drop-shadow(0 2px 2px #3b335540);position:absolute}.fx svg{width:100%;height:100%}@keyframes fx-fly{0%{opacity:1;transform:translate(0)rotate(0)scale(.4)}20%{transform:translate(calc(var(--dx) * .4), calc(var(--dy) * .4)) rotate(calc(var(--rot) * .3)) scale(1.1);opacity:1}65%{transform:translate(calc(var(--dx) * .85), calc(var(--dy) * .85)) rotate(calc(var(--rot) * .8)) scale(1);opacity:1}to{transform:translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--rot)) scale(.6);opacity:0}}.fx-ring{left:var(--x);top:var(--y);border:10px solid var(--c);border-radius:50%;width:80px;height:80px;margin:-40px 0 0 -40px;animation:.5s ease-out forwards fx-ring;position:absolute;box-shadow:0 0 0 6px #ffffff80}@keyframes fx-ring{0%{opacity:.8;transform:scale(0)}to{opacity:0;transform:scale(6)}}.hint{left:var(--x);top:var(--y);opacity:0;pointer-events:none;width:0;height:0;transition:opacity .3s;position:absolute}.hint.is-visible{opacity:1}.hint-hand{filter:drop-shadow(0 3px 4px #3b335559);width:64px;height:80px;animation:1.2s ease-in-out infinite hint-rub;position:absolute;top:-4px;left:-30px;overflow:visible}@keyframes hint-rub{0%,to{transform:translate(-40px)rotate(-10deg)}50%{transform:translate(40px)rotate(10deg)}}