.room{transition:opacity 1.1s var(--ease-soft);position:absolute;inset:0;overflow:hidden;container-type:size}html.js .room:not(.is-ready){opacity:0}.room__stage{--fx:.695;--fy:.8;left:calc(var(--fx) * 100%);top:calc(var(--fy) * 100%);aspect-ratio:1600/1000;width:max(100cqw,160cqh);translate:calc(var(--fx) * -100%) calc(var(--fy) * -100%);position:absolute}.room__bg,.room__under,.room__map,.room__glows,.room__over,.room__hits{position:absolute;inset:0}.room__bg{width:100%;max-width:none;height:100%}.room__map{mix-blend-mode:multiply;background:#50536f}.room__light,.room__glow{pointer-events:none;mix-blend-mode:screen;border-radius:50%;position:absolute;translate:-50% -50%}.room__light{background:radial-gradient(closest-side,#ffe0b4 0%,#ffd4a0db 12%,#ffc48c8c 27%,#ffb67a45 46%,#ffaa6e1a 70%,#ffa06400 100%)}.room__glow{background:radial-gradient(closest-side,#ffe8c4d9,#ffd29c57 38%,#ffc0841a 68%,#ffbe8200 100%)}.room__moon{background:#e9ebff;width:10.625%;height:52%;position:absolute;top:16.5%;left:86.5625%}.room__lamp{pointer-events:none;-webkit-user-select:none;user-select:none;width:auto;max-width:none;position:absolute;translate:-50%}.room__cord{background:linear-gradient(#2a242000 0% 62%,#2a2420 92%);width:1.5px;position:absolute;top:0;translate:-50%}.room__light,.room__glow,.room__lamp--lit{opacity:0;transition:opacity .65s cubic-bezier(.45,0,.55,1)}.room__light.is-on,.room__glow.is-on,.room__lamp--lit.is-on{opacity:1;transition:opacity .42s cubic-bezier(.2,.75,.25,1)}html.js .room:not(.is-awake) .is-on:is(.room__light,.room__glow,.room__lamp--lit){opacity:0}.room__hit{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:0;border-radius:14px;padding:0;position:absolute}.room__hit:focus-visible{outline-offset:5px;outline:2px solid #ffeed6e6}.room__hit:after{content:"";left:var(--gx,50%);top:var(--gy,40%);aspect-ratio:1;mix-blend-mode:screen;opacity:0;width:170%;transition:opacity .35s var(--ease-soft);pointer-events:none;background:radial-gradient(closest-side,#ffe2b88c,#ffe2b800);border-radius:50%;position:absolute;translate:-50% -50%}@media (hover:hover){.room__hit:not(.is-on):hover:after{opacity:.5}}.room__pulse{left:var(--gx,50%);top:var(--gy,40%);opacity:0;pointer-events:none;border:1.5px solid #ffecd2d9;border-radius:50%;width:46px;height:46px;margin:-23px 0 0 -23px;position:absolute}.room.is-hinting .room__hit:not(.is-on) .room__pulse{animation:room-pulse 3s var(--ease-soft) var(--delay,0s) infinite}@keyframes room-pulse{0%{opacity:0;transform:scale(.5)}18%{opacity:.9}65%,to{opacity:0;transform:scale(1.45)}}.player{aspect-ratio:100/47.9;position:absolute;container-type:inline-size}.player>span,.player__deck>span,.player__arm>span,.player__platter>span{display:block;position:absolute}.player__deck{transform-origin:50% 0;background:linear-gradient(#d9b78d,#c8a174);border-radius:1.6cqw;width:100cqw;height:83.3cqw;top:0;left:0;transform:scaleY(.42)}.player__platter{background:#8e8a84;border-radius:50%;width:72cqw;height:72cqw;top:5.6cqw;left:5cqw;box-shadow:0 1cqw #5e5a55}.player__record{background:radial-gradient(circle,#0000 0 11.6cqw,#ffffff12 12cqw,#0000 12.8cqw),repeating-radial-gradient(circle,#191817 0 .45cqw,#242221 .45cqw .9cqw);border-radius:50%;inset:.9cqw}.player__label{background:radial-gradient(circle, #2a2522 0 .9cqw, transparent 1cqw), conic-gradient(#b5704f 0 64%, #ebdcc3 64% 74%, #b5704f 74%);border-radius:50%;width:23cqw;height:23cqw;position:absolute;top:50%;left:50%;translate:-50% -50%}.player__sheen{pointer-events:none;background:conic-gradient(from 200deg, transparent 0 5%, #fff3 10%, transparent 16% 50%, #ffffff26 60%, transparent 66%);border-radius:50%;inset:.9cqw;-webkit-mask:radial-gradient(circle,#0000 0 12.4cqw,#000 13cqw);mask:radial-gradient(circle,#0000 0 12.4cqw,#000 13cqw)}.player__knob{background:radial-gradient(circle at 40% 35%,#f2eee8,#a8a39b);border-radius:50%;width:6cqw;height:6cqw;bottom:4cqw;left:4cqw}.player__pivot{background:radial-gradient(circle at 40% 35%,#f0ece6,#9c978f);border-radius:50%;width:10cqw;height:10cqw;top:9cqw;left:81cqw}.player__arm{width:0;height:0;transition:transform .9s cubic-bezier(.45,0,.25,1);top:14cqw;left:86cqw;transform:rotate(0)}.player.is-playing .player__arm{transform:rotate(25deg)}.player__tube{background:linear-gradient(90deg,#f1eee9,#a9a49c);border-radius:1cqw;width:1.6cqw;height:55cqw;top:-3cqw;left:-.8cqw}.player__weight{background:#3b3734;border-radius:50%;width:6.4cqw;height:6.4cqw;top:-11cqw;left:-3.2cqw}.player__head{background:#2c2926;border-radius:.8cqw;width:5.2cqw;height:8cqw;top:50cqw;left:-2.6cqw}.player__front{background:linear-gradient(#b48a5e,#9c744c);border-radius:0 0 1cqw 1cqw;width:100cqw;height:12.9cqw;top:35cqw;left:0;box-shadow:inset 0 .5cqw #ffffff2e}.player__shadow{background:radial-gradient(closest-side,#00000080,#0000);border-radius:50%;height:7cqw;top:43cqw;left:2cqw;right:2cqw}.room__hit--player{aspect-ratio:100/47.9;border-radius:10px}.room__hit--player:after{content:none}.room__led{opacity:0;background:#ffb45a;border-radius:50%;width:4px;height:4px;transition:opacity .4s;position:absolute;top:82%;left:7%;box-shadow:0 0 6px 2px #ffaa50b3}.room__hit--player.is-on .room__led{opacity:1}.room__notes{pointer-events:none;width:40%;height:90%;position:absolute;bottom:100%;left:30%}.room__note{color:#f6e2c2;opacity:0;filter:drop-shadow(0 0 4px #ffd29699);width:15px;position:absolute;bottom:0;left:10%}.room__note:nth-child(2){width:12px;left:55%}.room__note svg{width:100%;height:auto;display:block}.room.is-noting .room__note:first-child{animation:2.4s ease-in-out infinite note-bob}.room__hit--player.is-on .room__note{animation:3.2s linear infinite note-rise}.room__hit--player.is-on .room__note:nth-child(2){animation-delay:1.6s}@keyframes note-bob{0%,to{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}@keyframes note-rise{0%{opacity:0;transform:translate(0)rotate(-8deg)}15%{opacity:.95}to{opacity:0;transform:translate(14px,-60px)rotate(10deg)}}.room__scrim{pointer-events:none;background:linear-gradient(#0d0a08a8 0%,#0d0a0866 20%,#0d0a0800 40%),linear-gradient(#0d0a0800 82%,#0d0a088c 100%);position:absolute;inset:0}.room-content{pointer-events:none;flex-direction:column;justify-content:space-between;padding-bottom:2.5rem;display:flex;position:absolute;inset:5rem 0 0}.room-content__intro,.room-content__actions{pointer-events:auto}.room-title{letter-spacing:-.015em;font-size:clamp(1.9rem,8.4vw,3.4rem);line-height:1.08}.room-hint{letter-spacing:.02em;color:#f3e3c9;opacity:0;min-height:1.4em;transition:opacity .6s var(--ease-soft);align-items:center;gap:.6rem;margin-top:1rem;font-size:.86rem;font-weight:500;display:flex}.room-hint.is-shown{opacity:.95}.room-hint:empty:before{content:none}.room-hint:before{content:"";background:#ffd9a1;border-radius:50%;flex:none;width:7px;height:7px;animation:2.4s ease-in-out infinite hint-dot;box-shadow:0 0 10px 2px #ffcd8c8c}@keyframes hint-dot{50%{opacity:.35}}@media (min-width:900px),(orientation:landscape){.room__scrim{background:linear-gradient(90deg,#0d0a089e 0%,#0d0a0847 36%,#0d0a0800 55%),linear-gradient(#0d0a0800 76%,#0d0a0866)}.room-content{padding-bottom:4rem;display:block;inset:auto 0 0}.room-content__intro,.room-content__actions{max-width:min(620px,42%)}.room-title{font-size:clamp(2.4rem,4.4vw,4.75rem)}}@media (min-width:900px) and (min-aspect-ratio:3/2){.room__stage{--fx:1;--fy:.9;width:max(108cqw,172.8cqh)}}@media (prefers-reduced-motion:reduce){.room,.room__light,.room__glow,.room__lamp--lit,.room-hint,.player__arm{transition:none!important}.room-hint:before,.room.is-hinting .room__hit:not(.is-on) .room__pulse,.room.is-noting .room__note:first-child,.room__hit--player.is-on .room__note{animation:none}.room.is-hinting .room__hit:not(.is-on) .room__pulse{opacity:.55}.room.is-noting .room__note:first-child,.room__hit--player.is-on .room__note:first-child{opacity:.9}}
