.listening-room{--record-accent:#ff5a2a;position:relative;isolation:isolate;overflow:hidden;background:#171914}
.listening-room:before{content:'';position:absolute;inset:160px 30% 20% -20%;background:radial-gradient(ellipse,var(--record-accent),transparent 65%);opacity:.075;z-index:-1;pointer-events:none;transition:background .6s}
.listening-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:45px 0 36px}
.listening-heading h2{font:700 clamp(42px,5.6vw,96px)/.95 var(--display);letter-spacing:-.015em}
.listening-heading h2 .serif{font-size:1.05em;white-space:nowrap}
.listening-heading>p{font-size:12px;line-height:1.7;color:#b9bbad;flex-shrink:0}
.record-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #4c4e43;border-bottom:1px solid #4c4e43}
.record-choice{display:flex;align-items:center;gap:14px;padding:20px 18px;position:relative;transition:background .3s,color .3s;min-width:0}
.record-choice+.record-choice{border-left:1px solid #4c4e43}
.record-choice:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:3px;background:var(--record-accent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.record-choice:hover{background:#ffffff08}.record-choice.is-selected{background:#ffffff06}.record-choice.is-selected:after{transform:scaleX(1)}
.choice-number{font-size:10px;color:#9da18e;align-self:flex-start;margin-top:3px}
.record-choice.is-selected .choice-number,.record-choice.is-selected .choice-symbol{color:var(--record-accent)}
.record-choice>img{width:43px;height:43px;object-fit:cover;filter:grayscale(1);opacity:.7;transition:opacity .3s,filter .3s}
.record-choice.is-selected>img{filter:none;opacity:1}
.choice-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.choice-copy strong{font:600 clamp(17px,1.9vw,27px)/1 var(--display);letter-spacing:.2px}
.choice-copy>span{font-size:7px;letter-spacing:.6px;color:#a5aa96;line-height:1.4}
.choice-symbol{margin-left:auto;font-size:20px}
.record-choice:focus-visible{outline:2px solid var(--paper);outline-offset:-5px;z-index:2}
.selected-record{display:grid;grid-template-columns:1.1fr 1fr;gap:7%;align-items:center;padding:46px 0 36px;min-height:550px}
.selected-record:focus-visible{outline:1px solid #eeeae166;outline-offset:8px}
.record-object{position:relative;min-width:0;height:auto;aspect-ratio:1.08;perspective:1000px;touch-action:pan-y}
.record-object-inner{position:absolute;inset:0;transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .35s ease-out;transform-style:preserve-3d}
.deck-watermark{position:absolute;left:3%;top:-13%;font:700 290px/1 var(--display);letter-spacing:-.06em;color:#ffffff04;user-select:none}
.record-sleeve{position:absolute;left:4%;top:12%;width:65%;transform:rotate(-7deg);box-shadow:0 25px 35px #0008;background:#252820;z-index:2}
.record-sleeve>img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.8)}
.record-sleeve figcaption{display:flex;justify-content:space-between;gap:10px;background:#eeeae1;color:#1b1c18;padding:13px 10px;font-size:5px;letter-spacing:.6px;line-height:1.4}
.record-sleeve figcaption b{font-weight:500;white-space:nowrap}
.deck-vinyl{position:absolute;width:67%;aspect-ratio:1;left:30%;top:11%;border-radius:50%;box-shadow:10px 16px 25px #0007;border:1px solid #42473b}
.disc-spin{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#11130f 0,#11130f 2px,#30352b 3px,#151811 4px);animation:disc-revolve 24s linear infinite;animation-play-state:paused}
.disc-spin:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent,#ffffff20 17%,transparent 30%,#ffffff16 52%,transparent 68%,#ffffff12 88%,transparent)}
.disc-label{position:absolute;inset:34%;border-radius:50%;overflow:hidden;background:var(--record-accent);border:5px solid var(--record-accent)}
.disc-label img{height:100%;object-fit:cover;opacity:.85}
.disc-label i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:#12140f;border:2px solid #eeeae1}
.listening-room.scene-visible .disc-spin{animation-play-state:running}
.listening-room.scene-suspended .disc-spin{animation-play-state:paused}
.deck-corner{position:absolute;color:#6e7561;font-size:20px;z-index:3;line-height:1}.deck-corner-a{top:0;left:0}.deck-corner-b{right:0;bottom:28px}
.deck-caption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:15px;font-size:7px;letter-spacing:1px;color:#a5aa96}
.deck-caption>span:first-child{display:flex;align-items:center;gap:8px;color:var(--paper)}
.deck-caption i{width:5px;height:5px;border-radius:50%;background:var(--record-accent)}
.record-story{min-width:0}.record-metadata{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.record-metadata>span{font-size:8px;letter-spacing:1.5px;color:#a5aa96}
.record-stepper{display:flex;align-items:center;gap:13px}.record-stepper[hidden]{display:none}
.record-stepper>span{font-size:9px;font-variant-numeric:tabular-nums;color:#bfc4b1;white-space:nowrap}
.record-stepper button{background:transparent;border:1px solid #4c4e43;border-radius:50%;width:44px;height:44px;font-size:18px;transition:color .2s,border-color .2s}
.record-stepper button:hover{color:var(--record-accent);border-color:var(--record-accent)}
.selected-artist{font-size:11px;font-weight:500;letter-spacing:1.4px;color:var(--record-accent);margin-bottom:15px;line-height:1.5}
.record-story h3{font:700 clamp(58px,6.7vw,112px)/.85 var(--display);letter-spacing:-.025em;min-height:1.7em}
.record-note{color:#a5aa96;font-size:12px;line-height:1.8;max-width:350px;min-height:44px;margin-top:23px}
.listen-actions{display:flex;align-items:center;gap:24px;margin-top:25px;flex-wrap:wrap}
.listen-primary{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--record-accent);color:#171914;padding:18px 20px;font-size:10px;letter-spacing:.6px;font-weight:700;min-height:52px;transition:filter .2s;min-width:215px}
.listen-primary:hover{filter:brightness(1.13)}.listen-primary-icon{font-size:11px}.listen-primary>span:last-child{font-size:21px;line-height:1}
.record-credit-link{font-size:8px;letter-spacing:.5px;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid #595f4c}
.preview-hint{margin-top:12px;font-size:9px;color:#a5aa96;line-height:1.6}
.inline-preview{margin-top:20px;border:1px solid #4c4e43;background:#0f110e;animation:preview-enter .35s ease-out}
.inline-preview[hidden]{display:none}.inline-preview-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;font-size:7px;letter-spacing:1px;color:#bbc0ac}
.inline-preview-bar>button{background:transparent;font-size:9px;min-height:34px;padding:0 0 0 16px}
#inline-player-mount{height:175px}#inline-player-mount iframe{border:0;width:100%;height:100%}
#inline-player-fallback{display:block;padding:12px;font-size:10px;text-decoration:underline;text-underline-offset:3px;color:#bfc4b1}
.listening-outro{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #4c4e43;padding:25px 0}
.listening-outro>p{font:600 25px/1.15 var(--display);letter-spacing:.3px}.listening-outro p>span{font:italic 23px/1.4 Georgia,serif;letter-spacing:-.5px;color:#a5aa96}
.listening-outro>a{display:flex;align-items:center;gap:28px;font-size:9px;font-weight:600;letter-spacing:.6px;padding:16px 0;border-bottom:1px solid var(--record-accent)}
.listening-outro>a>span{font-size:23px;color:var(--record-accent)}
.listening-room .placement{margin-top:20px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes disc-revolve{to{transform:rotate(360deg)}}
@keyframes preview-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.record-object{height:auto}.record-sleeve{width:62%;left:6%}.deck-vinyl{width:64%;top:12%}.selected-record{gap:10%;padding:60px 0}}
@media(max-width:1100px){.record-choice{gap:9px;padding:18px 12px}.record-choice>img{width:34px;height:34px}.choice-symbol{display:none}.choice-copy>span{font-size:6px}.selected-record{gap:5%;min-height:470px}.record-object{height:auto}.record-sleeve{top:14%}.deck-vinyl{top:14%}.record-metadata{margin-bottom:22px}.record-stepper{gap:8px}.record-stepper button{width:40px;height:40px}.record-story h3{font-size:6.9vw}.listen-actions{gap:15px}.listen-primary{min-width:190px;font-size:9px;padding:16px}.record-note{font-size:11px;margin-top:18px}.selected-artist{font-size:9px}.record-story h3{min-height:1.7em}}
@media(max-width:760px){
  .listening-heading{display:block;margin:30px 0 25px}.listening-heading h2{font-size:clamp(39px,9.5vw,65px)}.listening-heading>p{font-size:11px;margin-top:16px}.listening-heading>p br{display:none}.listening-heading>p br:after{content:' '}
  .record-tabs{gap:0}.record-choice{display:block;padding:14px 8px 15px;min-height:99px}.record-choice:first-child{padding-left:3px}.record-choice>img{display:none}.choice-number{display:block;font-size:8px;margin:0 0 10px}.choice-copy strong{font-size:clamp(16px,4.2vw,22px);line-height:1.05}.choice-copy>span{font-size:6px;letter-spacing:.2px}.choice-copy{gap:7px}.choice-symbol{display:none}
  .selected-record{display:flex;flex-direction:column;gap:30px;padding:28px 0 30px;min-height:0}.record-object{width:100%;height:clamp(270px,77vw,420px)}.record-sleeve{width:62%;left:5%;top:10%}.deck-vinyl{width:64%;left:32%;top:11%}.record-sleeve figcaption{font-size:4px;padding:10px 7px;gap:7px}.deck-caption{font-size:6px;letter-spacing:.7px}.deck-watermark{font-size:240px;top:-10%;left:6%}.record-story{width:100%}.record-metadata{margin-bottom:19px}.record-metadata>span{font-size:8px}.record-stepper button{width:44px;height:44px}.record-stepper{gap:13px}.record-stepper>span{font-size:9px}.selected-artist{font-size:10px;margin-bottom:12px}.record-story h3{font-size:clamp(60px,17vw,90px);min-height:0}.record-note{font-size:12px;min-height:0;margin-top:20px}.listen-actions{gap:20px;margin-top:22px}.listen-primary{min-width:195px;min-height:52px;font-size:10px}.record-credit-link{font-size:8px}.preview-hint{font-size:10px}.listening-outro{align-items:flex-start;gap:16px}.listening-outro>p{font-size:20px}.listening-outro p>span{font-size:18px}.listening-outro>a{font-size:7px;gap:12px;padding:10px 0;max-width:140px;line-height:1.5}.listening-outro>a>span{font-size:21px}.listening-room .placement{margin-top:8px}
}
@media(max-width:370px){.record-choice{padding-right:5px;padding-left:5px}.choice-copy strong{font-size:15px}.choice-copy>span{font-size:5.5px}.listen-primary{min-width:180px}.listen-actions{gap:14px}.record-credit-link{font-size:7px}.listening-outro{display:block}.listening-outro>a{max-width:none;width:max-content;margin-top:14px;font-size:8px}.record-sleeve figcaption{letter-spacing:.2px}}
.motion-paused .record-object-inner{transform:none;transition:none}.motion-paused .record-choice,.motion-paused .record-choice:after{transition:none}
.motion-paused .inline-preview{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.record-object-inner{transform:none;transition:none}}