/* Isolated spatial art + the supplied prototype's old-computer material palette. */
#resonance-room {background:#0c1421;overflow:hidden;}
#resonance-room [hidden] {display:none!important;}
#resonance-overview {position:absolute;inset:0;display:grid;place-items:center;}
.resonance-art-plane {position:relative;width:min(100vw,133.333333vh);aspect-ratio:4/3;}
.resonance-art-plane>img {display:block;width:100%;height:100%;object-fit:contain;}
#open-resonance-os {position:absolute;left:52.9%;top:34.5%;width:18.5%;height:19.7%;clip-path:polygon(0 5%,96% 0,100% 91%,3% 100%);border:0;background:transparent;cursor:pointer;}
#open-resonance-os:hover {background:rgba(215,232,255,.035);}
#open-resonance-os:focus-visible {background:rgba(215,232,255,.07);outline:2px dotted #d7e8ef;outline-offset:-5px;}
#resonance-os {position:absolute;inset:0;background:#9bafd5;color:#222;font-family:monospace;}
.resonance-os-scroll {height:100%;overflow:auto;display:grid;align-items:center;}
#resonance-os-mount {position:relative;width:min(1100px,100vw);min-width:760px;margin:auto;aspect-ratio:1100/720;outline:none;}
#resonance-os-mount canvas {display:block!important;width:100%!important;height:auto!important;cursor:none;touch-action:none;}
#leave-resonance-os {position:absolute;right:12px;bottom:12px;z-index:3;padding:6px 12px;font:12px monospace;background:#e8e5d8;border:2px outset #eee;color:#222;cursor:pointer;}
#resonance-status {position:absolute;left:16px;bottom:0;max-width:70%;font:11px monospace;color:#252e48;pointer-events:none;}

.resonance-mobile-hotspots {display:none;position:absolute;inset:0;z-index:2;pointer-events:none;}
.resonance-mobile-hotspots button {position:absolute;top:.55%;width:11.1%;height:4.75%;min-width:0;min-height:0;padding:0;border:0;background:transparent;color:transparent;pointer-events:auto;touch-action:manipulation;}
@media (pointer:coarse) {.resonance-mobile-hotspots {display:block;}}

.resonance-accessible {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.resonance-accessible:focus-within {width:auto;height:auto;max-height:55vh;overflow:auto;clip-path:none;inset:auto 12px 52px;z-index:5;background:#e8e5d8;padding:12px;border:2px outset #eee;}
.resonance-accessible button {margin:3px;font:12px monospace;}
.resonance-dialog {color:#222;background:#e8e5d8;border:2px solid #454545;box-shadow:9px 10px rgba(30,35,55,.3);border-radius:0;width:min(500px,calc(100vw - 28px));max-height:88vh;padding:4px;font:13px/1.5 monospace;}
.resonance-dialog::backdrop {background:rgba(25,37,67,.22);backdrop-filter:none;}
.resonance-dialog header {display:flex;align-items:center;justify-content:space-between;background:#334d91;color:white;padding:5px 8px;min-height:36px;font-weight:bold;}
.resonance-dialog header button {font:16px monospace;padding:0 6px;}
.resonance-dialog .resonance-dialog-body {padding:18px;overflow:auto;}
.resonance-dialog label {display:block;margin:0 0 12px;}
.resonance-dialog input:not([type=checkbox]),.resonance-dialog textarea {display:block;width:100%;margin-top:5px;padding:7px;border:2px inset #ccc;background:#f7f5ec;color:#222;font:13px monospace;border-radius:0;}
.resonance-dialog textarea {min-height:100px;resize:vertical;}
.resonance-dialog button {background:#d8d6cd;color:#222;border:2px outset #eee;border-radius:0;padding:5px 10px;font:12px monospace;cursor:pointer;}
.resonance-dialog button:active {border-style:inset;}
.resonance-dialog button:focus-visible {outline:2px dotted #334d91;outline-offset:2px;}
.resonance-dialog footer {display:flex;justify-content:flex-end;gap:12px;margin-top:18px;}
.resonance-links {max-height:190px;overflow:auto;border-top:1px solid #aaa;margin:12px 0;}
.resonance-links label {display:flex;gap:9px;padding:5px;margin:0;align-items:flex-start;}
.resonance-links input {margin-top:4px;}
.resonance-results {display:grid;gap:6px;margin-top:12px;max-height:260px;overflow:auto;}
.resonance-preview {max-width:100%;max-height:40vh;object-fit:contain;display:block;margin:auto;}
.resonance-text {white-space:pre-wrap;overflow-wrap:anywhere;}
.spotify-callback {background:#9bafd5;color:#222;font:14px/1.6 monospace;padding:40px;}
@media (prefers-reduced-motion:reduce) {#resonance-room * {scroll-behavior:auto;}}