/* A quiet listening room. Controls remain native, even when the 3D view cannot run. */
.home-page .record-room {
 --record-ink:#f4ede1; --record-muted:#b5b2a9; --record-accent:#e6a45c; --ui-focus:#ffbf75;
 position:relative; isolation:isolate; overflow:clip; color:var(--record-ink);
 padding:54px clamp(22px,5vw,80px) 34px; min-height:0;
 background:radial-gradient(ellipse at 23% 41%,#48494466,transparent 56%),radial-gradient(ellipse at 91% 11%,#4e403426,transparent 52%),linear-gradient(120deg,#2c2e2c,#242625 60%,#202221);
}
.home-page .record-room::after {content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.07;background-image:url('/assets/materials/concrete-room-grain.svg');}
.record-overline {display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:17px;border-bottom:1px solid #e9e5db26;font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.record-overline p {margin:0;color:#e7b77e;}
.record-overline>span {color:#b6b6ac;font-size:11px;letter-spacing:.08em;text-transform:none;}
.listening-heading {display:flex;justify-content:space-between;align-items:end;gap:25px;margin:33px 0 4px;}
.home-page .listening-heading h2 {margin:0;color:var(--record-ink);font-family:var(--font-display,Georgia,serif);font-size:clamp(32px,4.6vw,62px);font-weight:400;line-height:1.16;letter-spacing:-.03em;}
.listening-heading h2 em {font-weight:400;color:#ddbc92;}
.listening-heading>p {flex-shrink:0;margin:0 0 5px;color:var(--record-muted);font-size:12px;line-height:1.7;letter-spacing:.015em;}
.listening-room {display:grid;grid-template-columns:minmax(0,1.58fr) minmax(320px,1fr);gap:clamp(10px,2.8vw,48px);align-items:center;max-width:1500px;margin:0 auto;}
.record-console {min-width:0;}
.record-player-stage {position:relative;width:calc(100% + 34px);margin-left:-23px;height:clamp(340px,33vw,475px);touch-action:pan-y;}
#record-player-canvas {display:block;width:100%;height:100%;opacity:0;transition:opacity .45s ease;pointer-events:none;}
.record-player-stage[data-renderer="ready"] #record-player-canvas {opacity:1;}
.record-player-fallback {position:absolute;inset:0;pointer-events:none;transition:opacity .25s;}
.record-player-stage[data-renderer="ready"] .record-player-fallback {opacity:0;}
.fallback-deck {position:absolute;left:9%;top:19%;width:82%;height:60%;transform:perspective(900px) rotateX(31deg) rotateZ(-1deg);border-radius:18px;background:linear-gradient(116deg,#777971,#575951 58%,#41423e);box-shadow:1px 3px 0 #83847a,2px 7px 0 #3b3c37,3px 13px 0 #151714,4px 34px 25px #0009;}
.fallback-deck::before {content:"";position:absolute;inset:4%;border:1px solid #c1c3b423;border-radius:5px;}
.fallback-platter {position:absolute;left:8%;top:10%;width:61%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#111413 0 2px,#30322c 3px 4px);border:5px solid #8e938d;box-shadow:0 7px 10px #1118;}
.fallback-vinyl {position:absolute;inset:1%;border-radius:50%;background:repeating-radial-gradient(circle,#161c1a 0 1px,#090d0c 2px 3px);display:grid;place-items:center;opacity:0;}
.record-room[data-loaded="true"] .fallback-vinyl {opacity:1;}
.fallback-vinyl img {width:29%;height:29%;border-radius:50%;object-fit:cover;opacity:.9;}
.fallback-platter>i {position:absolute;width:5px;height:5px;background:#ddd;box-shadow:1px 2px 2px #222;border-radius:50%;left:50%;top:50%;}
.record-room[data-state="playing"] .fallback-vinyl {animation:record-spin 1.8s linear infinite;}
.fallback-arm {position:absolute;left:80%;top:17%;height:60%;width:6px;background:linear-gradient(90deg,#444,#e4e6df 45%,#8a8e86);transform-origin:top;transform:rotate(-6deg);transition:transform .7s;box-shadow:3px 2px 3px #0009;border-radius:3px;}
.fallback-arm::before {content:"";position:absolute;top:-9px;left:-9px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#555,#c0c3b8 30%,#777a71 56%,#3c3f39 60%);}
.fallback-arm::after {content:"";position:absolute;bottom:-4px;left:-5px;width:16px;height:26px;background:linear-gradient(90deg,#1b1e19,#687061,#222720);border-radius:3px;}
.record-room[data-state="playing"] .fallback-arm {transform:rotate(30deg);}
.fallback-knob {position:absolute;bottom:6%;width:8%;aspect-ratio:1;border-radius:50%;background:conic-gradient(#9b9d91,#52544c,#b4b5aa,#595c51,#c7c8bc,#686b60,#9b9d91);box-shadow:0 4px 0 #161a15,2px 6px 8px #13161188;}
.fallback-knob::after {content:"";position:absolute;inset:13%;border-radius:50%;background:radial-gradient(ellipse at 20% 15%,#565b51,#252a25);}
.fallback-power {left:6%;}.fallback-volume {right:7%;}
.fallback-eject {position:absolute;bottom:9%;left:24%;width:4%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 20%,#93978c,#363b31 55%,#171d14 75%);}
.deck-control {position:absolute;display:grid;place-items:center;z-index:3;width:54px;height:54px;padding:0;border:0;border-radius:50%;background:transparent;color:#e5e4d6;transform:translate(-50%,-50%);transition:box-shadow .18s,background .18s;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.deck-power-control {left:17%;top:71%;}.deck-eject-control {left:31%;top:69%;width:46px;height:46px;}.deck-volume-control {left:79%;top:68%;width:134px;height:44px;border-radius:5px;}
.deck-control:not(:disabled):hover,.deck-volume-control:has(input:not(:disabled)):hover {box-shadow:0 0 0 1px #f6d19b66,0 0 24px #daae5214;}
.deck-control:focus-visible,.deck-volume-control:focus-within {outline:2px solid #f8bc72;outline-offset:4px;box-shadow:0 0 0 7px #12191466;}
.deck-control:disabled {cursor:default;opacity:.6;}
.deck-control svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;}
.control-play-icon {fill:currentColor;stroke:none;}
.control-pause-icon {display:none;}
.record-room[data-state="playing"] .control-play-icon {display:none;}
.record-room[data-state="playing"] .control-pause-icon {display:block;}
.record-player-stage[data-renderer="ready"] .deck-control svg,.record-player-stage[data-renderer="ready"] .volume-track {visibility:hidden;}
.deck-volume-control input {position:absolute;inset:0;appearance:none;-webkit-appearance:none;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;}
.deck-volume-control input::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:44px;height:44px;}
.deck-volume-control input::-moz-range-thumb {width:44px;height:44px;}
.volume-track {position:relative;display:block;width:calc(100% - 44px);height:6px;border-radius:3px;background:linear-gradient(#000,#55594d);border:1px solid #999f8055;box-shadow:0 1px 1px #a0a89122;}
.volume-thumb {position:absolute;left:var(--volume-percent,75%);top:-7px;display:block;width:13px;height:19px;border-radius:2px;background:linear-gradient(90deg,#939a8b,#ced1bf 30%,#b3bcaa 65%,#7c8573);box-shadow:1px 2px 3px #0009;transform:translateX(-50%);}
.volume-thumb::after {content:"";position:absolute;left:5px;top:3px;height:12px;width:2px;background:#776749;}
.record-led {position:absolute;left:23%;top:73%;width:5px;height:5px;border-radius:50%;background:#b97f3944;pointer-events:none;}
.record-room[data-state="playing"] .record-led {background:#ffc46b;box-shadow:0 0 10px #ff8f3977;}
.record-player-stage[data-renderer="ready"] .record-led {display:none;}
.deck-signature {position:absolute;left:57%;top:81%;width:100px;height:auto;pointer-events:none;}
.record-player-stage[data-renderer="ready"] .deck-signature {visibility:hidden;}
.record-readout {position:relative;display:flex;align-items:center;gap:13px;margin:-3px 18px 0 2px;padding:18px 0 20px;border-top:1px solid #dde4d620;}
.readout-light {flex:none;width:5px;height:5px;background:#bd8d55;border-radius:50%;box-shadow:0 0 7px #e4a34e30;}
.record-readout p {font-size:12px;letter-spacing:.02em;color:#d4d3c9;margin:0;flex:1;line-height:1.5;}
#record-time {flex:none;color:#deb57d;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.1em;font-family:ui-monospace,SFMono-Regular,monospace;}
#record-time>span {color:#b3b5ab;}
.record-progress {position:absolute;bottom:0;left:0;right:0;height:1px;background:#dde4d610;overflow:hidden;}
#record-progress {display:block;background:#dfb079;width:0;height:100%;}
.record-room[data-state="ended"] .record-readout {border-color:#e9b87466;}
.record-library {min-width:0;padding-top:33px;}
.rack-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:32px;}
.rack-heading h3 {font-size:12px;font-weight:500;letter-spacing:.09em;color:#d0d2c7;margin:0;}
.rack-heading>span {font-size:10px;letter-spacing:.15em;color:#999c8e;}
.record-rack {position:relative;padding-bottom:11px;}
.rack-backing {position:absolute;left:-14px;right:-14px;top:20px;height:110px;border-radius:5px 5px 2px 2px;background:linear-gradient(0deg,#26160866,#c3946233),url('/assets/materials/walnut-grain.svg') center/100% 100%;border:1px solid #c08b5677;box-shadow:inset 0 2px 1px #d4a17277,inset 0 -15px 30px #321d1288,8px 10px 24px #0007;transform:perspective(900px) rotateX(-4deg);}
.rack-backing::before,.rack-backing::after {content:"";position:absolute;left:-5px;top:-3px;bottom:-3px;width:7px;background:linear-gradient(90deg,#422614,#b37c49 45%,#784827);border-radius:4px 0 0 2px;box-shadow:1px 0 3px #20140988;}
.rack-backing::after {left:auto;right:-5px;transform:scaleX(-1);}
.rack-slots {position:relative;display:grid;grid-template-columns:1.16fr 1fr 1fr;align-items:start;gap:clamp(8px,1.25vw,20px);perspective:1000px;}
.rack-record {min-width:0;padding:0;background:transparent;border:0;border-radius:3px;text-align:left;color:#f2eee2;position:relative;z-index:1;-webkit-tap-highlight-color:transparent;}
.rack-record:focus-visible {outline:2px solid #f3ba74;outline-offset:8px;}
.sleeve-object {position:relative;display:block;aspect-ratio:1;margin:0 0 36px;transform:rotateY(-9deg) rotateZ(-3deg);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.18,.8,.25,1),filter .3s;filter:drop-shadow(6px 6px 5px #0009);}
.future-two .sleeve-object {transform:rotateY(-11deg) rotateZ(2deg);margin-top:9px;}
.future-three .sleeve-object {transform:rotateY(-12deg) rotateZ(4deg);margin-top:18px;}
.rack-record:not(:disabled):hover .sleeve-object,.rack-record:focus-visible .sleeve-object {transform:translateY(-13px) rotateY(-4deg) rotateZ(-1deg);filter:drop-shadow(7px 19px 10px #0008);}
.sleeve-face {position:absolute;inset:0;display:block;border-radius:1px;overflow:hidden;background:#171f1c;border:1px solid #b9c7b348;box-shadow:inset 0 0 0 1px #0003,-3px 0 0 #111812,1px 2px 1px #cecdaf24;}
.sleeve-face::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#ffffff19,transparent 40%,#0002 88%),repeating-linear-gradient(0deg,transparent 0 3px,#ffffff06 4px 5px);}
.sleeve-face>img {display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.94);transition:filter .3s;}
.rack-available:hover .sleeve-face>img,.rack-available[aria-pressed="true"] .sleeve-face>img {filter:saturate(.92) brightness(.97);}
.sleeve-vinyl {position:absolute;inset:0 0 0 1%;display:block;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#121917 0 2px,#2f3530 3px 4px);transform:translateY(-11%);box-shadow:0 -1px 0 #abab9677;transition:transform .65s,opacity .3s;}
.sleeve-vinyl::after {content:"";position:absolute;inset:38%;border-radius:50%;background:#bd9255;border:5px solid #101815;}
.rack-available[aria-pressed="true"] .sleeve-vinyl {transform:translateY(0);opacity:0;}
.sleeve-topline {position:absolute;left:9%;top:7%;font-size:clamp(6px,.65vw,9px);letter-spacing:.14em;color:#fff7dc;text-shadow:0 1px 4px #000;}
.sleeve-caption {display:block;min-height:55px;}
.sleeve-caption strong {display:block;font-size:clamp(10px,.94vw,13px);font-weight:500;line-height:1.5;letter-spacing:.01em;}
.sleeve-caption>span {display:block;color:#b1b6a6;font-size:clamp(9px,.8vw,11px);line-height:1.5;margin-top:5px;}
.rack-available[aria-pressed="true"] .sleeve-caption>span {color:#e3b880;}
.future-face {background:radial-gradient(ellipse at 80% 80%,#54422a77,transparent 70%),linear-gradient(150deg,#343a35,#1a201c);}
.future-three .future-face {background:radial-gradient(ellipse at 10% 0%,#554a3a55,transparent 75%),linear-gradient(160deg,#353834,#1e231e);}
.future-two .sleeve-face>img {object-position:67% 50%;}
.future-number {position:absolute;top:6%;left:8%;font-size:8px;color:#fff4d7;letter-spacing:.15em;text-shadow:0 1px 3px #2d201c;}
.rack-rail {position:absolute;top:calc((100vw - clamp(44px,10vw,160px) - clamp(10px,2.8vw,48px)) * .144);left:-21px;right:-21px;height:26px;background:linear-gradient(180deg,#c99b66bb,#8d5a3255 24%,#3c231699 95%),url('/assets/materials/walnut-grain.svg') center/100% 100%;border:1px solid #bb83537a;box-shadow:inset 0 2px 1px #d8ab7599,inset 0 -3px 2px #2b170e55,2px 12px 12px #090e0999;z-index:2;border-radius:3px;pointer-events:none;}
.rack-rail::before,.rack-rail::after {content:"";position:absolute;left:3px;top:2px;width:12px;height:21px;border-left:1px solid #37201555;border-right:1px solid #d39e5f66;background:repeating-linear-gradient(0deg,#ab75432b 0 4px,#4c2c1933 4px 8px);}
.rack-rail::after {left:auto;right:3px;}
.rack-rail i {position:absolute;top:9px;left:27px;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#eedbaa,#a78043 55%,#51331e 75%);box-shadow:0 0 0 1px #48281866;}
.rack-rail i+ i {left:auto;right:27px;}
.record-story {display:inline-flex;align-items:center;gap:18px;min-height:44px;margin-top:15px;font-size:11px;letter-spacing:.03em;color:#d2c1a4;text-decoration:none;border-bottom:1px solid #a99a7c55;}
.record-story:hover {color:#ffe0ab;}
.record-story>span {font-size:17px;}
.record-endnote {display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1500px;margin:38px auto 0;padding-top:22px;border-top:1px solid #e9e5db26;}
.record-endnote>p {margin:0;font-size:11px;letter-spacing:.025em;color:#bcbcae;line-height:1.65;}
.record-follow {display:flex;align-items:center;gap:10px;}
.record-follow a {display:flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;color:#e8d1b0;text-decoration:none;font-size:11px;letter-spacing:.025em;border-radius:3px;transition:background .2s;}
.record-follow a:first-child {padding:0 10px;}
.record-follow a:hover {background:#e9c89812;}
.record-follow img,.record-dialog-social img {filter:brightness(0) invert(1);opacity:.82;}
.record-nojs {font-size:14px;color:#e7d6b3;padding:20px 0;}
.record-nojs a {text-decoration:underline;}
#record-coming-soon {color:#f4ebdc;background:radial-gradient(ellipse at 100% 0,#5f482b33,transparent 65%),#252a25;border:1px solid #aa98755c;border-radius:8px;padding:48px 28px 25px;width:min(410px,calc(100% - 34px));max-height:calc(100dvh - 48px);box-shadow:0 24px 90px #000a;}
#record-coming-soon::backdrop {background:#0b100cd4;backdrop-filter:blur(8px);}
#record-coming-soon .mini-label {font-size:10px;letter-spacing:.2em;color:#d7b483;margin:0 0 23px;}
#record-coming-soon h3 {font-family:var(--font-display,Georgia,serif);font-size:34px;font-weight:400;line-height:1.16;letter-spacing:-.025em;margin:0 0 12px;}
#record-coming-soon h3 em {color:#d9b98b;font-weight:400;}
#record-coming-soon>p:not(.mini-label) {font-size:13px;line-height:1.75;color:#c7c7b8;margin:0;}
.record-dialog-close {position:absolute;right:13px;top:13px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#e4d9c6;}
.record-dialog-close:hover {background:#ffffff0b;}
.record-dialog-close svg {width:19px;height:19px;stroke:currentColor;stroke-width:1.5;fill:none;}
.record-dialog-social {display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid #b5bba42b;margin-top:22px;padding-top:13px;}
.record-dialog-social a {display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;min-width:44px;padding:0 3px;text-decoration:none;color:#e9d5b5;font-size:12px;}
.record-dialog-social a:first-child {margin-right:auto;}
.record-dialog-social a:hover {color:#fff2d4;}
.record-room audio {display:none;}
.record-player-stage .deck-volume-control {height:44px;}
@keyframes record-spin {to {transform:rotate(360deg);}}
@media (min-width:1600px) {.home-page .record-room{padding-left:max(80px,calc((100vw - 1500px)/2));padding-right:max(80px,calc((100vw - 1500px)/2));}.rack-rail{top:219px;}}
@media (max-width:1000px) {.listening-room{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:15px;}.record-player-stage{height:360px;width:calc(100% + 40px);margin-left:-30px;}.listening-heading>p{font-size:11px;}.record-library{padding-top:15px;}.rack-heading{margin-bottom:28px;}.rack-rail{top:calc((100vw - 10vw - 15px) * .16);}.record-readout{gap:9px;margin-right:0;}.record-readout p{font-size:11px;}#record-time{font-size:10px;letter-spacing:.04em;}}
@media (max-width:760px) {.home-page .record-room{padding:35px 24px 24px;}.listening-heading{margin:25px 0 16px;align-items:start;flex-direction:column;gap:12px;}.home-page .listening-heading h2{font-size:clamp(33px,6.2vw,46px);}.listening-heading>p{font-size:12px;}.listening-room{display:flex;flex-direction:column;gap:27px;}.record-console{width:100%;}.record-player-stage{height:clamp(260px,52vw,360px);width:calc(100% + 32px);margin-left:-16px;}.record-library{width:min(100%,520px);padding-top:0;}.rack-heading{margin-bottom:30px;}.rack-slots{gap:18px;}.sleeve-object{margin-bottom:31px;}.rack-rail{top:calc((100vw - 84px) / 3.16);}.sleeve-caption strong{font-size:12px;}.sleeve-caption>span{font-size:10px;}.sleeve-topline{font-size:8px;}.future-note{font-size:clamp(12px,3.2vw,18px);}.record-story{margin-top:17px;}.record-readout{margin:0 4px;}.record-readout p{font-size:11px;}#record-time{font-size:10px;}.record-endnote{margin-top:30px;gap:10px;}.record-endnote>p{font-size:10px;max-width:220px;}.record-follow{gap:0;}.record-follow a:first-child{font-size:0;gap:0;padding:0;min-width:44px;}.record-follow a:first-child>span:not(.sr-only){display:none;}.record-overline>span{font-size:10px;letter-spacing:0;}.future-number{font-size:8px;}.record-player-stage .deck-control{width:48px;height:48px;}.record-player-stage .deck-eject-control{width:44px;height:44px;}}
@media (min-width:590px) and (max-width:760px) {.rack-rail{top:164px;}}
@media (max-width:360px) {.home-page .record-room{padding-left:18px;padding-right:18px;}.record-overline{font-size:10px;}.rack-slots{gap:12px;}.sleeve-caption strong{font-size:11px;}.sleeve-caption>span{font-size:9px;}.rack-rail{top:calc((100vw - 60px) / 3.16);}.record-player-stage{height:250px;}.record-readout p{font-size:10px;}#record-time{font-size:9px;}.record-endnote>p{max-width:150px;}}
@media (prefers-reduced-motion:reduce) {.record-room *, .record-room *::before,.record-room *::after{animation:none!important;transition:none!important;}}
html[data-motion="paused"] .record-room .fallback-vinyl {animation-play-state:paused;}

@media (max-width:760px) { .record-library{order:1;} .record-console{order:2;} .record-player-stage .deck-volume-control{width:122px;height:44px;border-radius:5px;} .rack-backing{left:-10px;right:-10px;} .rack-rail{left:-14px;right:-14px;} }

@media (max-width:360px) { .record-dialog-social a:first-child{flex-basis:100%;justify-content:flex-start;} }

/* Keep essential reading text legible, including on the narrowest phones. */
.record-room .sleeve-caption strong {font-size:clamp(12px,.94vw,13px);}
.record-room .sleeve-caption>span,
.record-room .record-readout p,
.record-room #record-time,
.record-room .record-story,
.record-room .record-endnote>p,
.record-room .record-follow a:first-child>span:not(.sr-only) {font-size:12px;}