/* An instrument-like listening room, driven by the current audio signal. */
.beat-vault{transition:background .65s,color .65s}.beat-vault.session-live{background:#24271f;color:var(--paper)}
.beat-workstation{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.studio-scene{--bass:0;--energy:0;--air:0;grid-column:1/-1;position:relative;height:clamp(350px,38vw,530px);overflow:clip;background:#191c18;isolation:isolate;border-bottom:1px solid #ffffff26;perspective:1000px}
.studio-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;opacity:.32;filter:saturate(.65);transition:opacity .65s,filter .65s;z-index:-4}
.studio-scene:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0c0f0ee6,transparent 42%,#0c0f0ee6),linear-gradient(#0b0f0e70,transparent 50%,#090d0def);z-index:-3}
.studio-scene:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0,#0000 18px,#0002 19px,#0002 21px);opacity:.25;pointer-events:none;z-index:-2}
.studio-scene.is-dimmed .studio-backdrop{opacity:.13;filter:saturate(.45)}
.studio-top{position:absolute;top:22px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;z-index:5;font-size:8px;letter-spacing:1.5px;color:#d6d6c7}.studio-top>span{display:flex;align-items:center;gap:8px}.studio-top i{width:5px;height:5px;border-radius:50%;background:#6c7466}.is-playing .studio-top i{background:var(--beat-color);box-shadow:0 0 10px var(--beat-color)}
#studio-lights{padding:12px 15px;background:#ffffff09;border:1px solid #ffffff26;color:#d6d6c7;font-size:8px;letter-spacing:1px;min-height:40px}#studio-lights>span{margin-left:16px;font-size:12px}#studio-lights:hover{background:#ffffff15}
.studio-light{position:absolute;inset:-25% -5%;background:radial-gradient(ellipse at center,var(--beat-color),transparent 58%);opacity:calc(.055 + var(--energy)*.22);pointer-events:none;z-index:-1;transform:translateX(-23%) rotate(-22deg) scaleY(.7);will-change:opacity,transform}.studio-light-right{transform:translateX(23%) rotate(22deg) scaleY(.7);opacity:calc(.035 + var(--air)*.16)}
.studio-floor{position:absolute;left:-30%;right:-30%;bottom:-75%;height:110%;background:repeating-linear-gradient(90deg,#a3ae8b16 0 1px,transparent 1px 65px),repeating-linear-gradient(0deg,#a3ae8b16 0 1px,transparent 1px 65px);transform:rotateX(68deg);transform-origin:center top;mask-image:linear-gradient(transparent,#000 20%,#000);opacity:.6;z-index:-1}
.studio-speaker{position:absolute;top:21%;bottom:24%;width:17%;max-width:195px;transform-style:preserve-3d}.speaker-left{left:12%;transform:rotateY(17deg) rotateZ(-2deg)}.speaker-right{right:12%;transform:rotateY(-17deg) rotateZ(2deg)}
.speaker-face{height:100%;position:relative;border-radius:7px;background:linear-gradient(115deg,#353b31,#1c211b 35%,#11150f);border:1px solid #9eaa7d36;box-shadow:inset 0 1px 1px #ffffff33,8px 15px 25px #0007,0 0 38px #0004;display:flex;align-items:center;flex-direction:column;justify-content:space-evenly;padding:10% 12%}
.speaker-face:after{content:'';position:absolute;inset:7px;border:1px solid #ffffff06;pointer-events:none;border-radius:3px}.speaker-brand{font-size:7px;letter-spacing:2px;color:#959d87}.speaker-tweeter{width:27%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#242923 20%,#10140f 30%,#383e32 33%,#12160f 45%,#32392c 58%,#0b100b 60%);border:1px solid #a2ad8d29;box-shadow:0 3px 8px #0006}
.speaker-cone{width:100%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#39422e 0 2px,#252e20 3px 4px,#414b33 5px 6px);box-shadow:0 0 0 5px #0e130d,0 0 0 6px #68735460,inset 0 3px 14px #000a;position:relative;transform:scale(calc(1 + var(--bass)*.095));will-change:transform}
.speaker-cone:before{content:'';position:absolute;inset:5%;border-radius:50%;background:conic-gradient(from 20deg,#afba6830,#141d0d50,#dbe2a23b,#141d0d50,#afba6830)}.speaker-cone i{position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle at 38% 30%,#6b7550,#343e27 43%,#0f150c 82%);box-shadow:0 3px 7px #0009}
.speaker-port{width:48%;height:5%;border-radius:20px;background:#080c06;box-shadow:inset 0 1px 2px #000,0 1px 1px #64705255}.speaker-power{width:3px;height:3px;border-radius:50%;background:#929c53;box-shadow:0 0 8px #b2c65eaa}
.speaker-stand{position:absolute;left:44%;width:12%;height:35%;top:100%;background:linear-gradient(90deg,#171c15,#353c2e,#11170f);z-index:-1}.speaker-stand:after{content:'';position:absolute;bottom:0;left:-230%;width:560%;height:10%;border-radius:50%;background:#141a11;box-shadow:0 7px 10px #000a}
.studio-display{position:absolute;left:31%;right:31%;top:22%;bottom:28%;text-align:center}.studio-display .beat-art{position:relative;padding:0;background:none;color:var(--paper);isolation:isolate;z-index:2;margin:0;overflow:visible;aspect-ratio:auto;max-height:none}.beat-art>span{display:block;font-family:var(--body);font-size:10px;font-weight:400;letter-spacing:6px;line-height:1.2}.beat-art>b{position:static;display:block;font-family:var(--display);font-size:clamp(60px,8vw,122px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--beat-color);transform:scale(calc(1 + var(--bass)*.025));will-change:transform}.beat-art>small{display:block;font-size:5px;letter-spacing:1px;margin-top:8px;position:static}
#studio-scope{position:absolute;left:-7%;width:114%;top:47%;height:54%;pointer-events:none;opacity:.85}.studio-scope-caption{position:absolute;left:-15%;right:-15%;bottom:-12px;font-size:7px;letter-spacing:1px;color:#8f9a82}
.studio-rack{position:absolute;left:34%;right:34%;bottom:15%;display:flex;justify-content:space-between;gap:10px;align-items:center}.studio-rack>div{display:flex;align-items:center;gap:6px;flex:1}.studio-rack>div>span{font-size:6px;color:#a1ab93}.studio-rack>span{font-size:5px;letter-spacing:1px;white-space:nowrap;color:#879279}.studio-meter{display:flex;gap:2px;flex:1;min-width:0;height:12px;align-items:stretch}.studio-meter i{flex:1;background:#768862;opacity:.12}.studio-meter i:nth-child(n+12){background:var(--beat-color)}.studio-meter i.is-lit{opacity:.95}
.studio-transport{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;z-index:5}.studio-transport button{height:42px;min-width:38px;background:#ffffff08;border:1px solid #ffffff25;color:#c8ccbb;font-size:19px}.studio-transport .studio-play{display:flex;gap:12px;align-items:center;justify-content:center;min-width:175px;padding:0 16px;background:var(--beat-color);color:#171b14;border-color:transparent;font-size:9px;font-weight:600;letter-spacing:.7px}.studio-transport button:hover{background:#ffffff25}.studio-transport .studio-play:hover{background:var(--paper)}
.studio-foot{position:absolute;bottom:30px;left:28px;right:28px;display:flex;gap:14px;align-items:center;font-size:7px;color:#a1ab93;letter-spacing:1px}.studio-motion{margin-left:auto;min-height:36px;padding:8px 0 8px 10px;background:none;color:#bdc5ad;font-size:7px;letter-spacing:1px}.studio-motion span{text-transform:uppercase}
.beat-workstation .beat-deck{align-self:start}.beat-list{max-height:260px}.beat-now{margin-top:27px}.shortlist-bar{padding-top:20px;padding-bottom:20px}.studio-scene.visuals-static .studio-light,.studio-scene.visuals-static .speaker-cone,.studio-scene.visuals-static .beat-art>b{will-change:auto}
@media(min-width:1600px){.beat-list{max-height:280px}.beat-row,.beat-select{min-height:65px}}
@media(max-width:1000px){.studio-scene{height:370px}.speaker-left{left:8%}.speaker-right{right:8%}.studio-speaker{width:19%;top:23%;bottom:26%}.studio-display{left:30%;right:30%;top:23%;bottom:28%}.beat-art>b{font-size:82px}.studio-top{left:22px;right:22px}.studio-foot{left:22px;right:22px;font-size:6px}.studio-foot>span:nth-child(2){display:none}.studio-rack{left:32%;right:32%;bottom:17%}.studio-rack>span{display:none}.studio-transport .studio-play{min-width:155px;font-size:8px}.studio-scope-caption{font-size:6px}.beat-list{max-height:230px}}
@media(max-width:760px){.beat-workstation{grid-template-columns:1fr}.studio-scene{height:350px;grid-column:auto}.studio-top{top:14px;left:16px;right:16px;font-size:7px;letter-spacing:.7px}#studio-lights{font-size:7px;padding:10px;min-height:38px}#studio-lights>span{margin-left:7px}.studio-speaker{width:22%;top:29%;bottom:31%}.speaker-left{left:5%;transform:rotateY(17deg) rotateZ(-2deg)}.speaker-right{right:5%;transform:rotateY(-17deg) rotateZ(2deg)}.speaker-brand{font-size:4px;letter-spacing:.5px}.speaker-face{border-radius:4px;padding:12%}.speaker-cone{box-shadow:0 0 0 3px #0e130d,0 0 0 4px #68735460,inset 0 3px 14px #000a}.speaker-power{width:2px;height:2px}.studio-display{left:28%;right:28%;top:27%;bottom:31%}.beat-art>span{font-size:7px;letter-spacing:3px}.beat-art>b{font-size:clamp(48px,15vw,84px)}.beat-art>small{display:none}#studio-scope{top:40%;height:60%}.studio-scope-caption{bottom:-7px;font-size:5px;letter-spacing:.5px}.studio-rack{left:29%;right:29%;bottom:25%;gap:8px}.studio-meter{height:9px;gap:1px}.studio-rack>div{gap:3px}.studio-rack>div>span{font-size:5px}.studio-transport{bottom:38px;gap:5px}.studio-transport button{height:44px;min-width:34px}.studio-transport .studio-play{min-width:150px;font-size:8px;padding:0 12px}.studio-foot{bottom:7px;left:16px;right:16px;font-size:6px}.studio-motion{font-size:6px;min-height:28px}.studio-backdrop{object-position:center 40%}.studio-floor{bottom:-65%}.beat-deck{padding-top:20px}.beat-now{margin-top:20px}.beat-list{max-height:330px}}
@media(max-width:360px){.studio-top{left:12px;right:12px;font-size:6px}#studio-lights{font-size:6px;padding:8px}.studio-scene{height:320px}.studio-display{top:27%;bottom:31%}.studio-transport .studio-play{min-width:130px;font-size:7px}.studio-transport button{min-width:30px}.studio-scope-caption{font-size:4px}.speaker-face{padding:12% 14%}.studio-rack{bottom:26%}}
@media(prefers-reduced-motion:reduce){.beat-vault,.studio-backdrop{transition:none}}

.motion-paused .beat-vault,.motion-paused .studio-backdrop{transition:none}