/* Approved photographic scene and canonical mural: geometry unchanged. */
#radio{background:#11100f;color:#e9e7e3;width:100vw;max-width:none;padding:0;overflow:hidden;isolation:isolate}
#radio .room-heading{max-width:1122px;margin:auto;padding:20px 28px;display:flex;justify-content:space-between;align-items:center;gap:15px}#radio h2{font:700 15px Arial,sans-serif;letter-spacing:.12em;margin:0}#radio .room-heading a{color:#b9aaa0;font:11px monospace}
#radio .room-deck{padding:0;margin:0 auto;max-width:1122px;width:100%;border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;transform:none}
.room-scene{position:relative;isolation:isolate;overflow:hidden}.room-plate{width:100%;display:block}.room-mural{position:absolute;width:67%;height:auto;left:5%;top:7%;transform:none;mix-blend-mode:hard-light;opacity:.94;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
#radio .room-vu{position:absolute;top:72.35%;width:3.65%;height:2.55%;overflow:hidden;background:radial-gradient(ellipse at 50% 90%,#f2cb80,#cf994e);box-shadow:inset 0 0 5px #513719;border:1px solid #57442f;transform:rotate(2deg)}.room-vu.left{left:56.55%}.room-vu.right{left:61.25%}
#radio .room-vu::before{content:'−20　0 +3';position:absolute;top:15%;left:4%;width:92%;color:#3c2b1a;font:clamp(2px,.6vw,7px) monospace;border-top:1px solid #50331c;border-radius:50%;padding-top:3px}
#radio .room-vu .fg-needle{position:absolute;bottom:8%;left:50%;top:auto;width:1px;height:74%;background:#281c17;transform:rotate(var(--needle,-49deg));transform-origin:50% 100%;transition:none;box-shadow:none}
#radio .room-reel{position:absolute;top:75.15%;width:1.65%;aspect-ratio:1;background:#272b29;border-radius:50%;overflow:hidden}.reel-left{left:45.05%}.reel-right{left:49.85%}
#radio .room-reel .cassette-hub{position:absolute;inset:18%;border:1px solid #91958d;border-radius:50%;width:auto;height:auto;animation:room-reel 2.8s linear infinite;animation-play-state:paused;background:repeating-conic-gradient(#111 0deg 30deg,#909388 30deg 45deg,#111 45deg 90deg)}#radio .is-playing .room-reel .cassette-hub{animation-play-state:running}#radio .is-spooling .room-reel .cassette-hub{animation-duration:.25s;animation-play-state:running}#radio .is-rewinding .room-reel .cassette-hub{animation-direction:reverse}@keyframes room-reel{to{transform:rotate(360deg)}}
.room-keys{position:absolute;left:44%;top:82.55%;width:11.35%;height:2%;display:flex;transform:rotate(1deg)}#radio .room-keys button{flex:1;padding:0;background:transparent;border:0;min-width:0;cursor:pointer;border-radius:1px;box-shadow:none}#radio .room-keys button:hover{background:#ffffff20}#radio .room-keys button.depressed,#radio .room-keys button:active{background:#0b111658;box-shadow:inset 0 3px 3px #0009;transform:translateY(2px)}
#radio .room-volume-hotspot{position:absolute;left:34.35%;top:61.4%;width:3%;aspect-ratio:1;padding:0;min-height:0;background:transparent;border:0;cursor:pointer;border-radius:50%}#radio .room-volume-hotspot::after{content:'';position:absolute;left:49%;top:12%;height:28%;width:2px;background:#26211e;transform-origin:50% 135%;transform:rotate(var(--physical-volume,-14deg))}
.room-door{position:absolute;left:41.6%;top:70.5%;width:13.4%;height:8.2%;border:1px solid transparent;pointer-events:none;transform-origin:bottom;transition:transform .18s,background .18s}.is-ejected .room-door{transform:perspective(400px) rotateX(-28deg);border-color:#c3bbb380;background:linear-gradient(120deg,#ffffff18,#0008);box-shadow:0 7px 5px #0008}
#radio .room-console{padding:18px 24px 20px;background:linear-gradient(#252526,#111213);border:1px solid #4f5152;border-top:0;font-family:monospace;color:#d2d2cc}
#radio .room-readout{display:flex;gap:15px;align-items:center;flex-wrap:wrap;font:11px monospace;margin-bottom:14px;color:#c8c7b6}#radio #lcd-state{color:#f0b859;min-width:70px}#radio #radio-track{font:inherit;margin:0;flex:1}#radio #radio-time{font:10px monospace;white-space:nowrap}
#radio .radio-transport{display:flex;gap:6px;margin:0;max-width:550px}#radio .radio-transport button{width:auto;flex:1;min-width:44px;min-height:48px;padding:5px 2px;background:linear-gradient(#e2e3e1,#92989b 65%,#d6d7d3);color:#14191b;border:1px solid #696e71;border-radius:2px;box-shadow:0 3px #4a4c4e;font:9px monospace;touch-action:manipulation}#radio .radio-transport button b{font-size:14px;display:block}#radio .radio-transport button span{display:block;font-size:8px}#radio .radio-transport button[aria-pressed=true],#radio .radio-transport button:active{transform:translateY(2px);box-shadow:0 1px #333;background:linear-gradient(#767d80,#bbbebb)}
#radio .room-volume-controls{margin-top:16px}#radio .radio-volume{display:flex;gap:12px;align-items:center;justify-content:flex-start;flex-wrap:wrap;margin:0;padding:0;border:0;width:auto}#radio #radio-volume-label{font:9px monospace}#radio #radio-knob{position:relative;width:48px;height:48px;flex:none;min-width:48px;border-radius:50%;background:conic-gradient(#f0f0ee,#686d70,#d5d7d5,#73797b,#f0f0ee);border:2px solid #686a6b;box-shadow:0 2px 4px #0008;touch-action:none;cursor:ns-resize}#radio #radio-knob i{position:absolute;left:47%;top:9%;width:2px;height:12px;background:#161b1c;transform-origin:50% 19px;transform:rotate(var(--rotation,-14deg))}#radio .fg-volume-trim{display:flex;align-items:center;gap:8px}#radio .fg-volume-trim button,#radio #radio-mute{min-width:44px;min-height:44px;color:#e5e5df;background:#292c2e;border:1px solid #777;font:12px monospace;border-radius:2px}#radio #radio-mute{padding:0 8px;font-size:10px}#radio #radio-volume-value{font:11px monospace;width:24px;text-align:center}#radio #radio-status{display:block;margin-top:10px;font:10px monospace;color:#b9bdb5;min-height:12px}
#radio button:focus-visible,#radio [role=slider]:focus-visible{outline:3px solid #f18b36;outline-offset:3px}#radio .portable-perch{height:0;margin:0}
@media(max-width:600px){#radio .room-heading{padding:17px 18px}#radio h2{font-size:12px;line-height:1.5;max-width:150px}#radio .room-heading a{font-size:9px}.room-scene{width:112%;margin-left:-6%}.room-mural{width:69%;left:6%;top:8%}#radio .room-console{padding:14px 12px}#radio .room-readout{gap:8px;font-size:9px}#radio #radio-track{font-size:9px;min-width:130px}#radio .radio-transport{gap:4px}#radio .radio-volume{gap:8px}.room-keys,.room-volume-hotspot{pointer-events:none}#radio .room-volume-hotspot{visibility:hidden}}
@media(prefers-reduced-motion:reduce){#radio .room-reel .cassette-hub{animation:none!important}.room-door{transition:none}#radio .room-vu .fg-needle{transform:rotate(-49deg)!important}}
.fg-radio-in-view .portable-companion{visibility:hidden;pointer-events:none}.fg-radio-in-view .portable-companion *{pointer-events:none}#radio .room-console{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:10px 22px}#radio .room-readout{grid-column:1/-1;margin-bottom:0}#radio .room-volume-controls{margin:0}#radio .radio-volume{flex-direction:row}#radio #radio-status{margin-top:0;grid-column:1/-1}#radio .room-volume-hotspot{touch-action:none}#radio .room-reel .cassette-hub{border-style:solid}#radio .radio-transport{padding:0;border:0;background:none}
@media(max-width:800px){#radio .room-console{grid-template-columns:1fr;gap:14px}#radio .radio-volume{justify-content:flex-start}}
#radio .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#radio .radio-transport{align-self:center;align-items:stretch;width:100%}#radio .room-console{grid-template-columns:minmax(280px,550px) auto}#radio .radio-transport button{height:48px;flex-basis:0}#radio .room-reel .cassette-hub{animation-play-state:paused}#radio .is-playing:not(.is-offscreen) .room-reel .cassette-hub{animation-play-state:running}#radio .is-offscreen .room-reel .cassette-hub{animation-play-state:paused}
@media(max-width:800px){#radio .room-console{grid-template-columns:minmax(0,1fr)}}

/* Sunny street integration: three independent layers, source-alpha stereo. */
#radio{background:#141311}
#radio .room-deck{max-width:none;width:100%}
#radio .room-scene{width:100%;margin:0;height:clamp(440px,45vw,700px);background:#bb9465}
#radio .room-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:blur(1.5px);pointer-events:none}
#radio .room-mural{width:35%;height:auto;left:12%;top:24%;transform:none;mix-blend-mode:multiply;opacity:.96;mask-image:url('assets/radio-room/mural-edge.svg');mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:add;pointer-events:none}
#radio .room-machine{position:absolute;left:51%;bottom:6%;width:43%;max-width:760px;aspect-ratio:1632 / 963;isolation:isolate}
#radio .room-machine::before{content:'';position:absolute;left:2%;right:0;bottom:2.7%;height:6%;border-radius:50%;background:#28170c9c;filter:blur(7px);transform:skewX(-28deg) translate(-7%,35%);z-index:-1;pointer-events:none}
#radio .room-boombox{display:block;width:100%;height:auto;filter:drop-shadow(-6px 9px 6px #30201565);pointer-events:none}
/* Coordinates are percentages of the supplied 1632 x 963 PNG. */
#radio .room-vu{top:52.6%;width:5.65%;height:9%;background:transparent;border:0;box-shadow:none;transform:none;pointer-events:none}
#radio .room-vu.left{left:56.2%}#radio .room-vu.right{left:62.95%}
#radio .room-vu::before{content:none}
#radio .room-vu .fg-needle{bottom:9%;left:50%;height:74%;width:1px;background:#482718}
#radio .room-reel{top:63.7%;width:2.42%;background:none;pointer-events:none}
#radio .reel-left{left:40.95%}#radio .reel-right{left:47.62%}
#radio .room-reel .cassette-hub{inset:12%;background:repeating-conic-gradient(#292723 0deg 38deg,#beb5a2 38deg 44deg,#292723 44deg 90deg);border:1px solid #7f7566}
#radio .room-keys{left:39.1%;top:82.35%;width:14.7%;height:6.1%;transform:none}
#radio .room-keys button{touch-action:manipulation;pointer-events:auto}
#radio .room-volume-hotspot{left:26.7%;top:30.3%;width:3.45%;aspect-ratio:1;visibility:visible;pointer-events:auto;touch-action:none}
#radio .room-volume-hotspot::after{height:20%;width:1px}
#radio .room-door{left:35.7%;top:55.5%;width:18.7%;height:18%;transform-origin:bottom}
#radio .room-console{max-width:1122px;margin:0 auto;border:0;background:transparent;padding:20px 28px 24px}
#radio .room-heading{padding-top:18px;padding-bottom:18px}
#radio .room-keys button:focus-visible{outline:2px solid #ff8b38;outline-offset:2px;background:#ffad4528}
@media(max-width:800px){
 #radio .room-scene{height:clamp(350px,62vw,490px)}
 #radio .room-machine{width:47%;left:49%;bottom:5%}
 #radio .room-mural{width:39%;left:9%;top:25%}
}
@media(max-width:600px){
 #radio .room-scene{height:auto;aspect-ratio:1.22 / 1}
 #radio .room-plate{object-position:0% 50%;filter:blur(.7px)}
 #radio .room-mural{width:60%;left:17%;top:23%;opacity:.97}
 #radio .room-machine{width:65%;left:33%;bottom:2.5%}
 #radio .room-console{padding:16px 14px 20px}
 #radio .room-heading{padding:16px 14px}
 #radio h2{max-width:none}
 #radio .room-keys{pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){#radio .room-boombox,#radio .room-plate{transition:none}}

@media(max-width:600px){#radio .room-mural{width:58%;left:18%;top:20%}#radio .room-machine{width:53%;left:45%;bottom:2.5%}}
/* Align moving hardware to the source tape hubs and meter pivots. */
#radio .room-vu{width:5.8%}
#radio .room-vu.left{left:55.8%}#radio .room-vu.right{left:62.5%}
#radio .room-reel{top:62.55%;width:2.82%}
#radio .reel-left{left:39.85%}#radio .reel-right{left:46.45%}
#radio .room-door{top:51.3%;height:21.1%}
/* Keep the painted outline on the concrete, clear of the skyline. */
#radio .room-mural{top:27%}
@media(min-width:601px) and (max-width:800px){#radio .room-mural{top:30%}}
@media(max-width:600px){#radio .room-scene{aspect-ratio:1.15 / 1}#radio .room-mural{width:54%;left:16%;top:25%}#radio .room-machine{width:48%;left:50%;bottom:2%}}

/* Approved single street scene, opening the existing shared FG-84 hardware. */
#radio .room-entry{position:relative;isolation:isolate;width:100%;aspect-ratio:1672 / 941;background:#8b602e}
#radio .room-entry[hidden],#radio .room-player[hidden]{display:none!important}
#radio .room-approved-street{display:block;width:100%;height:auto;filter:none}
#radio .room-entry-hotspot{position:absolute;left:19.3%;top:66.5%;width:20.4%;height:21.6%;padding:0;border:0;border-radius:3px;background:transparent;cursor:pointer;touch-action:manipulation}
#radio .room-entry-hotspot span{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);white-space:nowrap;background:#17130fe8;color:#ffce82;padding:8px 12px;font:11px monospace;letter-spacing:.07em;opacity:0;transition:opacity .15s}
#radio .room-entry-hotspot:hover,#radio .room-entry-hotspot:focus-visible{outline:2px solid #ffd386;outline-offset:4px;box-shadow:0 0 24px #ffd38635}
#radio .room-entry-hotspot:hover span,#radio .room-entry-hotspot:focus-visible span{opacity:1}
#radio .room-entry-hint{position:absolute;right:20px;bottom:16px;margin:0;background:#19150de0;color:#f5d3a3;padding:9px 12px;font:10px monospace;letter-spacing:.08em;pointer-events:none}
#radio .room-player{animation:room-open .25s ease-out both;background:#141311}
#radio .room-player-bar{max-width:1122px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 28px;color:#b9aaa0;font:11px monospace}
#radio .room-return{font:10px monospace;min-height:44px;padding:8px 12px;color:#e9cfaa;background:transparent;border:1px solid #746452;cursor:pointer}
#radio .room-player .room-scene{height:auto;aspect-ratio:auto;padding:20px 0 24px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 90%,#504333 0%,#28241e 38%,#171615 78%)}
#radio .room-player .room-machine{position:relative;left:auto;bottom:auto;width:86%;max-width:900px;flex:none}
#radio .room-player .room-machine::before{filter:blur(10px);background:#0009}
#radio .room-player .room-console{padding-top:18px}
@keyframes room-open{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
 #radio .room-entry-hotspot{min-height:44px}
 #radio .room-entry-hint{font-size:8px;right:8px;bottom:8px;padding:6px 8px;letter-spacing:.02em}
 #radio .room-entry-hotspot span{font-size:8px;bottom:-20px;padding:5px 7px}
 #radio .room-player-bar{padding:8px 14px;font-size:9px}
 #radio .room-return{font-size:9px}
 #radio .room-player .room-scene{padding:12px 0 16px}
 #radio .room-player .room-machine{width:96%}
}
@media(prefers-reduced-motion:reduce){#radio .room-player{animation:none}#radio .room-entry-hotspot span{transition:none}}
/* Foreground focus remains inside the approved street environment. */
#radio .room-deck{position:relative}
#radio .room-entry{overflow:hidden}
#radio .room-entry.is-focused{aspect-ratio:auto}
#radio .room-entry.is-focused .room-approved-street{height:100%;object-fit:cover;object-position:center;filter:blur(6px) brightness(.78);transform:scale(1.035)}
#radio .room-approved-street{transition:filter .65s,transform .65s}
#radio .room-entry.is-focused .room-entry-hotspot,#radio .room-entry.is-focused .room-entry-hint{visibility:hidden}
#radio .room-player{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;animation:none;background:linear-gradient(transparent 65%,#17130fd9);pointer-events:none}
#radio .room-player button,#radio .room-player [role=slider]{pointer-events:auto}
#radio .room-player-bar{width:100%;box-sizing:border-box;margin:0 auto;background:transparent;flex:none;color:#fff1d7}
#radio .room-return{background:#1e190fbb;color:#fff0cf;border-color:#c3a775}
#radio .room-player .room-scene{flex:1;min-height:0;padding:8px 0;background:none}
#radio .room-player .room-machine{width:min(70%,900px);max-height:100%;pointer-events:auto}
#radio .room-player .room-console{width:100%;box-sizing:border-box;flex:none;color:#fff2d8;background:transparent}
#radio .room-player #radio-status{color:#e8dfcd}
@media(max-width:600px){#radio .room-entry.is-focused .room-approved-street{object-position:25% center;filter:blur(4px) brightness(.78)}#radio .room-player .room-machine{width:94%}}
@media(prefers-reduced-motion:reduce){#radio .room-approved-street{transition:none}}

/* Keep zoom-out adjacent to the stereo without shifting its geometry. */
#radio .room-player-bar{min-height:68px}
#radio .room-player-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
#radio .room-player-bar .room-return{position:static;flex:none;min-height:44px}
@media(max-width:600px){#radio .room-player-bar{min-height:60px}}