/* Oversized vinyl above a shallow red chassis, with controls on its flanks. */
.studio-live.has-dj .studio-window{overflow:visible}
.dj-booth{container-type:inline-size;width:89%;display:grid;grid-template-columns:94px minmax(0,1fr) 94px;grid-template-areas:'transport records pads' '. fader .' 'info info info' 'status status status';column-gap:16px;padding:0 12px 37px;--platter-size:min(280px,calc((100cqw - 220px)/2))}
.dj-top{position:absolute;top:-67px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;margin:0;padding:7px 10px;gap:15px;border:1px solid #a27367;box-shadow:0 4px 8px #0006}
.dj-title{font-size:1.1rem}.dj-signal{font-size:.6875rem}
.console-body-dock{inset:auto 0 67px;height:calc(var(--platter-size) - 30px)}
.is-console .cube-back{background:linear-gradient(130deg,#e44937,#a51e15 44%,#57110c);box-shadow:0 9px 0 #440907,0 16px 21px #0009;border-radius:8px}.is-console .cube-back>span{left:14px;bottom:7px;font-size:1rem}
.dj-grid{grid-area:records;gap:18px;align-items:center;overflow:visible;height:230px}
.dj-deck{height:230px;padding:0;border:0;background:none;box-shadow:none;overflow:visible;isolation:isolate}
.assembling .dj-deck::before{display:none}
.deck-handle{position:absolute;left:50%;top:-38px;transform:translateX(-50%);width:104px;min-height:28px;padding:5px 8px;font-size:.6875rem;z-index:10;box-shadow:0 2px 4px #0009;border:1px solid #928b80}
.deck-handle span{font-size:.5625rem}.dj-deck-note{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);display:block;width:max-content;max-width:100%;text-align:center;padding:4px 7px;font-size:.625rem;z-index:10;box-shadow:0 2px 3px #0006}.dj-deck-note b{display:none}
.record-dock{height:230px;margin:0;overflow:visible}
.play-object.is-docked.dj-platter{flex-shrink:0;width:var(--platter-size);height:var(--platter-size);border:7px solid #b6b0a4;background:#151515;box-shadow:0 0 0 3px #25221e,0 7px 0 #59554c,0 13px 15px #000b;max-width:none;z-index:3}
.is-docked .vinyl.dj-disc{background:repeating-radial-gradient(circle,#0a0a0a 0 2px,#3c3933 3px,#121212 4px);box-shadow:inset 2px 2px 5px #eee6,inset 0 -3px 6px #000}
.is-docked .vinyl-label.dj-label{font-size:clamp(1.3rem,3cqw,2.4rem);padding-top:13%;border-width:2px}.is-docked .vinyl-label>span{width:8px;height:8px;margin-top:6px}
.dj-mixer{display:contents}.dj-crossfade{grid-area:fader;position:relative;z-index:20;margin-top:38px;background:#241a17;padding:0 7px;border-radius:3px;font-size:.75rem;gap:8px}.dj-fader{min-height:36px}
.dj-transport{grid-area:transport;position:relative;z-index:20;align-self:end;display:flex;flex-direction:column;gap:7px;padding:7px;background:linear-gradient(120deg,#5f2019,#2b1713);border:1px solid #be7163;border-radius:6px;margin-bottom:6px;box-shadow:3px 4px 7px #0007}
.dj-transport button{min-height:44px;width:100%;font-size:.75rem;padding:6px 3px;border-bottom-width:3px}
.dj-pads{grid-area:pads;align-self:end;grid-template-columns:1fr;gap:5px;padding:7px;margin:0 0 6px;background:linear-gradient(120deg,#5f2019,#2b1713);border:1px solid #be7163;box-shadow:3px 4px 7px #0007}.dj-pad{min-height:44px;font-size:.6875rem;padding:4px 2px}.dj-pad span{font-size:.5rem;letter-spacing:0}
.dj-info{grid-area:info;margin:8px 0 0;justify-content:center;gap:20px;font-size:.6875rem}.dj-status{grid-area:status;margin:4px 0 0;font-size:.6875rem;text-align:center}.console-accessories{bottom:3px;right:10px}.tape-dock,.prop-tape.is-docked{width:64px}.pick-dock{width:19px}
.speaker-dock,.mic-dock{width:6%;bottom:86px}.is-docked .speaker-box{height:118px}.is-docked .speaker-cone{top:44px}.is-docked .speaker-small{width:17px;height:17px;left:30%}.is-docked .speaker-box b{left:24%;font-size:.5rem}.prop-mic.is-docked{width:100%}
.assembly-cue{bottom:calc(100% + 82px)}
@media(min-width:761px) and (max-width:1000px){.dj-booth{width:94%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'records records' 'transport pads' 'fader fader' 'info info' 'status status';gap:0 18px;--platter-size:min(270px,calc((100cqw - 38px)/2));padding-top:0}.dj-grid{height:220px;gap:24px}.dj-deck,.record-dock{height:220px}.console-body-dock{top:28px;bottom:auto;height:calc(var(--platter-size) - 25px)}.dj-transport{margin-top:39px;flex-direction:row;align-self:start}.dj-transport button{flex:1}.dj-pads{margin-top:39px;grid-template-columns:repeat(2,minmax(0,1fr));align-self:start}.dj-crossfade{margin-top:8px}.dj-deck-note{bottom:-25px}.dj-info{justify-content:space-between}.speaker-dock,.mic-dock{width:5%;bottom:auto;top:80px}.is-docked .speaker-box{height:95px}.dj-top{top:-67px}.assembly-cue{bottom:calc(100% + 84px)}}
@media(max-width:760px){.assembly-setup{margin-top:76px;padding-top:37px;margin-left:3%;margin-right:3%}.dj-booth{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'records records' 'transport pads' 'fader fader' 'info info' 'status status';column-gap:10px;padding:0 8px calc(2rem + 22px);--platter-size:min(164px,calc((100cqw - 4px)/2))}.dj-grid{height:125px;gap:10px}.dj-deck,.record-dock{height:125px}.play-object.is-docked.dj-platter{border-width:5px;box-shadow:0 0 0 2px #25221e,0 5px 0 #59554c,0 10px 10px #000b}.console-body-dock{top:26px;bottom:auto;height:calc(var(--platter-size) - 22px)}.is-console .cube-back>span{font-size:.75rem;left:50%;transform:translateX(-50%);bottom:4px;white-space:nowrap}.dj-top{top:-63px;width:100%;left:0;transform:none;max-width:100%;padding:6px;gap:5px}.dj-title{font-size:1.125rem}.dj-signal{font-size:.5625rem}.deck-handle{width:78px;min-height:30px;top:-33px;font-size:.625rem;padding:4px}.deck-handle span{display:none}.dj-deck-note{bottom:-30px;font-size:.5625rem;padding:4px;white-space:normal;width:100%;max-width:100%}.dj-deck-note b{display:none}.is-docked .vinyl-label.dj-label{font-size:1.6rem;padding-top:12%}.is-docked .vinyl-label>span{width:5px;height:5px;margin-top:3px}.dj-transport{margin-top:49px;margin-bottom:0;padding:6px;align-self:start;gap:6px}.dj-transport button{font-size:.8125rem;min-height:44px;padding:6px}.dj-pads{margin-top:49px;margin-bottom:0;grid-template-columns:1fr;padding:6px;align-self:start;gap:6px}.dj-pad{font-size:.8125rem;min-height:44px;padding:5px 3px}.dj-pad span{font-size:.5625rem}.dj-crossfade{margin-top:10px;font-size:.8125rem}.dj-fader{min-height:44px}.dj-info{margin-top:8px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:.75rem;text-align:left}.dj-info>span:first-child{grid-column:1/-1}.dj-status{font-size:.75rem;line-height:1.5;text-align:left;margin-top:5px}.speaker-dock,.mic-dock{width:29px;top:50px;bottom:auto;z-index:1}.speaker-dock{left:-2px}.mic-dock{right:-2px}.is-docked .speaker-box{height:58px}.is-docked .speaker-cone{top:25px}.is-docked .speaker-small{width:8px;height:8px;left:33%}.is-docked .speaker-box b{font-size:.3125rem}.prop-mic.is-docked{width:26px}.console-accessories{bottom:5px}.assembly-cue{bottom:calc(100% + 32px);font-size:.625rem}}
@media(max-width:360px){.is-docked .vinyl-label.dj-label{font-size:1.3rem}.dj-title{font-size:1rem}.dj-signal{font-size:.5rem}.dj-pad{font-size:.6875rem}.dj-pad span{font-size:.5rem}}
@media(prefers-reduced-motion:reduce){.studio-live.has-dj .studio-window{transform:none}}
/* Reserve real layout space for the rig header and the projecting vinyl. */
.dj-booth{display:block;padding-top:0}.dj-top{position:relative;grid-area:auto;top:auto;bottom:auto;left:auto;transform:none;width:fit-content;max-width:100%;margin:0 auto 50px;flex-wrap:wrap;justify-content:center}
.rig-surface{position:relative;display:grid;grid-template-columns:94px minmax(0,1fr) 94px;grid-template-areas:'transport records pads' '. fader .';column-gap:16px;isolation:isolate}
.console-body-dock{top:28px;bottom:auto;height:calc(var(--platter-size) - 30px)}
.dj-crossfade{margin-top:16px}.is-console .cube-back>span{bottom:26px}.dj-info{margin-top:12px}.dj-status{margin-right:110px;text-align:left;padding-right:8px}
@media(min-width:1001px){.playground.studio-live.has-dj{min-height:830px;max-height:none}.assembly-cue{bottom:calc(100% + 15px)}}
@media(max-width:1000px){.studio-live.has-dj{height:auto;min-height:0;max-height:none;padding:20px 6% 24px}.studio-live.has-dj .studio-window{position:relative;inset:auto;min-height:0}.studio-live.has-dj .opening-copy{display:block;position:relative;left:auto;right:auto;top:auto;padding:28px 7% 0;max-width:100%}.studio-live.has-dj .opening-copy h1{font-size:clamp(2rem,12vw,6rem)}.studio-live.has-dj .opening-copy p{font-size:1rem;margin-top:16px}.studio-live.has-dj .opening-copy .button{font-size:.875rem;margin-top:16px}.studio-live.has-dj .window-foot{display:none}.studio-live.has-dj .assembly-setup{position:relative;left:auto;right:auto;bottom:auto;margin:35px 4% 24px;padding-top:50px}.studio-live.has-dj .play-controls{position:relative;left:auto;right:auto;bottom:auto;margin-top:32px;display:block}.studio-live.has-dj .scene-buttons{margin-top:12px;flex-wrap:wrap}.studio-live.has-dj .scene-status{position:relative;left:auto;right:auto;bottom:auto;margin-top:14px}.dj-booth{width:100%;--platter-size:min(270px,calc((100cqw - 20px)/2))}.rig-surface{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'records records' 'transport pads' 'fader fader';gap:0 18px}.dj-top{top:auto;left:auto;width:fit-content;transform:none;margin-bottom:50px}.console-body-dock{top:28px;height:calc(var(--platter-size) - 25px)}.dj-deck-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}.is-console .cube-back>span{bottom:5px;left:50%;transform:translateX(-50%);font-size:.875rem;white-space:nowrap}.dj-status{margin-right:0}.dj-crossfade{margin-top:12px}.assembly-cue{bottom:calc(100% + 10px)}}
@media(max-width:760px){.studio-live.has-dj .opening-copy h1{font-size:clamp(2rem,16vw,7rem)}.studio-live.has-dj .assembly-setup{margin:25px 3% 24px;padding-top:30px}.dj-booth{--platter-size:min(164px,calc((100cqw - 4px)/2));padding-top:0}.dj-top{width:100%;padding:6px;justify-content:space-between;margin-bottom:52px;gap:8px}.rig-surface{column-gap:10px}.deck-handle{width:min(100%,110px);top:-33px}.console-body-dock{top:26px;height:calc(var(--platter-size) - 22px)}.is-console .cube-back>span{bottom:4px;font-size:.75rem}.dj-info{margin-top:8px}.dj-status{margin:5px 0 0}.assembly-cue{bottom:calc(100% + 8px)}}
/* Vinyl lettering is artwork: keep it proportionate when page text is enlarged. */
.is-docked .vinyl-label.dj-label{font-size:clamp(25px,3cqw,38px)}
.dj-deck-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}
@media(max-width:760px){.is-docked .vinyl-label.dj-label{font-size:clamp(19px,8cqw,29px)}}

@media(max-width:760px){.console-body-dock{top:46px}.is-console .cube-back>span{font-size:12px}}