/* The listening scene shares one central axis. The archive keeps its reading grid. */
.listening-stage>header{height:auto;min-height:0;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:24px 24px 14px;text-align:center}
.listening-stage .brand{font-size:23px;font-weight:700;letter-spacing:1px;line-height:1.1}
.listening-stage .brand small{font:7px/1.2 monospace;letter-spacing:2.3px;margin-top:7px;color:#91a28a}
.listening-stage .intro{position:static;inset:auto;width:auto;max-width:none;padding:0;margin:12px 0 13px;text-align:center;flex:none}
.listening-stage .intro h1{font-size:clamp(36px,4.2vw,59px);font-weight:400;line-height:1.04;letter-spacing:-2.3px;max-width:none;margin:0}
.listening-stage .artist-nav{position:static;display:flex;gap:25px;justify-content:center;font:9px/1.2 monospace;letter-spacing:.5px;color:#9cae92}
.listening-stage .artist-nav a{display:block;padding:5px 0;min-width:46px}
.listen-main{padding:0 32px calc(39px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.scene-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.listening-stage .room{position:relative;inset:auto;transform:none;flex:1;width:100%;max-width:1100px;max-height:585px;height:100%;min-height:0;margin:0 auto}
.listening-stage .side-note,.listening-stage .room-label{display:none}
.listening-stage .bottom-region{display:block;position:static;width:min(100%,490px);max-width:490px;margin:10px auto 0;flex:none}
.listening-stage .head-caption{font-size:6px;letter-spacing:1.1px;color:#a4b795;opacity:.8}
.listening-stage .orbit-line{left:50%;top:50%;width:var(--orbit-width);height:var(--orbit-height);transform:translate(-50%,-50%);border-color:#adc39416}
.listening-stage .orbit-line.two{left:50%;top:50%;width:calc(var(--orbit-width)*.91);height:calc(var(--orbit-height)*.91);transform:translate(-50%,-50%) rotate(-7deg);border-color:#adc3940d}

/* A fixed transparent button contains the moving glass. Text and hit area never move. */
.listening-stage .track,body.playing .listening-stage .track,
.listening-stage .track:hover,.listening-stage .track[aria-pressed=true],body.playing .listening-stage .track[aria-pressed=true]{
 background:transparent;border:0;box-shadow:none;backdrop-filter:none;scale:1;transform:translate(-50%,-50%);padding:0;overflow:visible;transition:none;isolation:isolate
}
.orb-shell{position:absolute;inset:5px;border-radius:50%;pointer-events:none;z-index:0;border:1px solid #a9bd8677;
 background:radial-gradient(ellipse at 29% 15%,#c1d8a72b,transparent 54%),linear-gradient(145deg,#29382cbb,#101b16dc);
 box-shadow:inset 1px 2px 3px #d3e7c13d,inset -1px -2px 5px #07100cc9,0 7px 20px #0002;
 transform:translate(var(--orb-dx,0px),var(--orb-dy,0px)) scale(var(--orb-scale,1));
 transition:border-color 180ms ease-out,background-color 180ms ease-out,box-shadow 180ms ease-out;
}
.orb-shell:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(ellipse at 30% 5%,rgb(var(--orb-tint,177 205 145) / .65),transparent 58%);
 box-shadow:inset 0 0 12px rgb(var(--orb-tint,177 205 145) / .25),0 0 15px rgb(var(--orb-tint,177 205 145) / .15);
 opacity:calc(var(--orb-light,0)*.65);
}
.orb-shell:after{content:"";position:absolute;inset:3px;border-radius:inherit;border-top:1px solid rgb(var(--orb-tint,177 205 145) / .75);border-right:1px solid transparent;border-bottom:1px solid transparent;border-left:1px solid transparent;opacity:calc(.08 + var(--orb-light,0)*.48);transform:rotate(-28deg)}
.orb-label{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px;pointer-events:none;width:100%;height:100%}
.listening-stage .track .number{font-size:25px;line-height:1;letter-spacing:-1px;color:#dce7ce}
.listening-stage .track .track-text{font:8px/1.12 monospace;letter-spacing:0;max-width:85%;text-align:center;color:#c0d0b3}
.listening-stage .track .dot{width:3px;height:3px;margin-top:1px;opacity:.45}
.listening-stage .track[aria-pressed=true] .orb-shell{border-color:#d2e6b0aa;background-color:#73895666;box-shadow:inset 0 1px 3px #d7ebba55,0 0 0 3px #b4ce8015,0 8px 25px #0003}
.listening-stage .track:hover .orb-shell,.listening-stage .track:focus-visible .orb-shell{border-color:#e0efcb;background-color:#60764d55;box-shadow:inset 0 1px 5px #e6f6ce66,0 0 0 3px #c0dc8722}
.listening-stage .track:active .orb-shell{scale:.98}
.listening-stage .small-bubble .orb-shell{inset:5px}
.listening-stage .small-bubble .orb-label{gap:2px;padding:5px}
.listening-stage .small-bubble .number{font-size:17px}
.listening-stage .small-bubble .track-text{font-size:6.5px;max-width:90%}
.listening-stage .small-bubble .dot{display:none}
@media(min-width:961px) and (max-height:800px){
 .listening-stage>header{padding-top:15px;padding-bottom:7px}.listening-stage .brand{font-size:20px}.listening-stage .brand small{font-size:6px;margin-top:4px}
 .listening-stage .intro{margin:8px 0}.listening-stage .intro h1{font-size:42px}.listening-stage .artist-nav{font-size:8px}
 .listening-stage .player.dj-deck{padding:12px 16px 9px}.listening-stage .recessed-play{width:58px;height:58px;flex-basis:58px}
 .listening-stage .dj-controls{margin-top:6px;padding-top:8px}.listening-stage .bottom-region{margin-top:8px}
 .listening-stage .head-caption{display:none}
}
@media(max-width:960px){
 .listening-stage>header{padding:19px 15px 9px}.listening-stage .brand{font-size:21px}.listening-stage .brand small{font-size:6px;letter-spacing:1.7px;margin-top:5px}
 .listening-stage .intro{margin:10px 0 9px}.listening-stage .intro h1{font-size:clamp(26px,7.6vw,45px);letter-spacing:-1.15px;line-height:1.05}
 .listening-stage .artist-nav{font-size:8px;gap:20px}.listening-stage .artist-nav a{padding:4px 0}
 .listen-main{padding:0 10px calc(34px + env(safe-area-inset-bottom))}
 .scene-area{display:flex;flex-direction:column;align-items:center;justify-content:center}
 .listening-stage .room{width:100%;max-width:450px;max-height:465px;height:0;flex:1;margin:auto}
 .listening-stage .bottom-region{width:100%;max-width:460px;margin:9px auto 0}
 .listening-stage .track .number{font-size:20px}.listening-stage .track .track-text{font-size:7px;max-width:94%}.orb-label{gap:3px;padding:8px}
 .listening-stage .track .dot{width:2px;height:2px;margin-top:0}
 .listening-stage .head-caption{font-size:5px;letter-spacing:.6px}
 .listening-stage .small-bubble .number{font-size:15px}.listening-stage .small-bubble .track-text{font-size:6.5px}
}
@media(min-width:600px) and (max-width:960px) and (min-height:600px){.listening-stage .room{max-width:620px;max-height:610px}}
@media(max-width:960px) and (max-height:680px){
 .listening-stage>header{padding-top:10px;padding-bottom:4px}.listening-stage .brand{font-size:17px}.listening-stage .brand small{display:none}
 .listening-stage .intro{margin:5px 0}.listening-stage .intro h1{font-size:24px}.listening-stage .artist-nav{font-size:7px;gap:17px}
 .listening-stage .artist-nav a{padding:3px 0}.listen-main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
 .listening-stage .head-caption{display:none}
}
@media(min-width:600px) and (max-width:960px) and (max-height:500px) and (orientation:landscape){
 .listening-stage>header{padding:7px 12px 5px}.listening-stage .intro{margin:4px 0}.listening-stage .intro h1{font-size:25px}
 .listen-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;padding:0 18px 26px}
 .scene-area{display:flex;flex-direction:row}.listening-stage .room{max-width:none;max-height:none;width:100%;height:100%;margin:0}
 .listening-stage .bottom-region{align-self:center;width:100%;margin:0}
}
@media(prefers-reduced-motion:reduce){.orb-shell{transform:none!important;transition:none!important}.orb-shell:before,.orb-shell:after{transition:none!important}}