:root{color-scheme:dark;font-family:system-ui,-apple-system,"Yu Gothic",sans-serif;color:#dfe4df;background:#070d14}
*{box-sizing:border-box}html,body,main{width:100%;height:100%;margin:0;overflow:hidden}main{isolation:isolate}
#viewport{position:absolute;inset:0;touch-action:none;background:#070d14}#viewport canvas{display:block;width:100%;height:100%}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 38%,#04080c66 100%)}
.identity{position:absolute;top:max(27px,env(safe-area-inset-top));left:34px;display:flex;align-items:center;gap:13px;pointer-events:none;opacity:.85}
.identity-mark{font-size:31px;color:#b9ae93;text-shadow:0 0 16px #a6dbc130}h1{font-size:19px;font-weight:400;letter-spacing:.35em;margin:0 0 6px}.identity p{margin:0;font-size:8px;letter-spacing:.23em;color:#7e9694}
.system-status{position:absolute;right:32px;top:max(30px,env(safe-area-inset-top));margin:0;max-width:min(40vw,380px);text-align:right;color:#8eaaa6;font-size:11px;line-height:1.8;pointer-events:none}
.system-status:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:#c7c39a;box-shadow:0 0 9px #d4bd79;margin:0 8px 2px 0}
.console{position:absolute;z-index:2;bottom:max(26px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(820px,calc(100% - 56px));display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:0;padding:22px 25px 20px;border:1px solid #8b958664;border-top-color:#d1cab282;border-radius:36px 36px 23px 23px;background:radial-gradient(ellipse at 50% -150%,#b8b6a64a,transparent 70%),linear-gradient(160deg,#283134e8,#101b21f2 47%,#1e2529ed);box-shadow:0 2px 0 #03090c,0 -2px 0 #555c5528,inset 0 1px 1px #e1dfc32b,inset 0 -5px 12px #030a0d66,0 14px 55px #000a;backdrop-filter:blur(20px)}
.console:before,.console:after{content:"";position:absolute;top:18px;bottom:16px;width:7px;border:1px solid #8b937548;border-radius:100%;pointer-events:none}.console:before{left:8px}.console:after{right:8px}
.console-edge{position:absolute;top:-3px;left:20%;right:20%;height:3px;background:linear-gradient(90deg,transparent,#aeaa8c,#8fc3b1,transparent);border-radius:50%;opacity:.7;box-shadow:0 0 13px #9dbba32c;pointer-events:none}
.control-caption{display:block;font-size:8px;letter-spacing:.19em;color:#849996;margin-bottom:12px}.music-control{position:relative;display:block;min-width:0;padding-right:25px;cursor:pointer;border-right:1px solid #7b8c8133}.music-action{display:flex;align-items:center;gap:10px;font-size:13px;color:#e2dfcd}.input-emblem{font-size:18px;color:#bfc9ac}.add-mark{margin-left:auto;color:#a6b6a4;font-size:19px}.track-name{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:10px;color:#839995;margin-top:9px}.music-control input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.music-control:focus-within{outline:1px solid #c3d0b0;outline-offset:7px;border-radius:4px}.music-control:has(input:disabled){opacity:.5;cursor:wait}.music-control input:disabled{cursor:wait}
.dial{display:block;padding:0 0 0 25px;min-width:0}.dial-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#c8d0c8}.dial output{font-size:10px;color:#b5c1a7;font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:22px;margin:8px 0 0;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#78978d,#485a57);box-shadow:0 1px 0 #0008}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:17px;margin-top:-7px;border-radius:5px;border:1px solid #d7ddc2;background:linear-gradient(90deg,#89998d,#ccd0b8,#9bab98);box-shadow:0 0 12px #a1c6a735,0 2px 3px #0008}input[type=range]:focus-visible{outline:1px solid #c3d0b0;outline-offset:4px;border-radius:3px}
@media(max-width:650px){.identity{left:20px;top:22px}.identity-mark{font-size:23px}h1{font-size:16px}.identity p{font-size:6px}.system-status{right:18px;top:24px;font-size:9px;max-width:43vw}.console{width:calc(100% - 28px);bottom:max(14px,env(safe-area-inset-bottom));grid-template-columns:1fr 1fr;padding:18px 23px 15px;border-radius:28px 28px 19px 19px;row-gap:17px}.music-control{grid-column:1/-1;border-right:0;border-bottom:1px solid #7b8c8133;padding:0 0 13px}.music-control .control-caption{display:none}.track-name{margin-top:6px}.dial{padding:0}.dial:last-child{padding-left:22px}.control-caption{font-size:7px;margin-bottom:8px}.music-action{font-size:12px}}
@media(max-height:520px) and (min-width:651px){.console{bottom:12px;padding-top:12px;padding-bottom:9px}.control-caption{margin-bottom:6px}.identity{top:15px}.system-status{top:17px}}

/* Five controls: an audio inlet beside four compact tuning rails. */
.console{width:min(1120px,calc(100% - 56px));grid-template-columns:1.7fr repeat(4,1fr);padding-left:28px;padding-right:28px}.dial{padding-left:23px}.music-control{padding-right:24px}
@media(max-width:900px){.console{width:min(640px,calc(100% - 32px));grid-template-columns:repeat(4,1fr);row-gap:16px;padding:18px 25px 13px}.music-control{grid-column:1/-1;border-right:0;border-bottom:1px solid #7b8c8133;padding:0 0 12px}.music-control .control-caption{display:none}.music-action{font-size:12px}.track-name{margin-top:5px}.dial{padding-left:17px}.dial:nth-of-type(2){padding-left:0}.control-caption{font-size:6px;margin-bottom:8px}.dial-label{font-size:11px}.dial output{font-size:9px}}
@media(max-width:520px){.console{grid-template-columns:1fr 1fr;row-gap:11px;padding:15px 22px 11px;bottom:max(12px,env(safe-area-inset-bottom))}.dial{padding-left:0}.dial:nth-of-type(3),.dial:nth-of-type(5){padding-left:20px}.control-caption{display:none}.music-control{padding-bottom:9px}.music-action{font-size:11px}.track-name{font-size:9px}input[type=range]{margin-top:4px;height:20px}.identity{top:18px}}

.playback{display:flex;align-items:center;gap:13px;color:#99b1a8;font-size:11px}.playback label{white-space:nowrap}.playback output{font-size:10px;font-variant-numeric:tabular-nums;min-width:32px}.playback input[type=range]{flex:1;min-width:0;width:auto;margin:0}.playback input:disabled{opacity:.35;cursor:default}
.console .playback{grid-column:1/-1;border-top:1px solid #7b8c8133;margin-top:15px;padding-top:11px}.console .playback label{font-size:9px;color:#8eaaa1}@media(max-width:900px){.console .playback{margin-top:0;padding-top:9px}}

.playback button{border:1px solid #a2b8a966;border-radius:9px;background:linear-gradient(#33413e,#1b2928);color:#d8e3d5;padding:7px 12px;min-width:73px;font:11px inherit;cursor:pointer}.playback button:disabled{opacity:.4;cursor:default}.playback button:focus-visible{outline:1px solid #d8e3b5;outline-offset:3px}.console .background-switch{grid-column:1/-1;justify-self:end;display:flex;align-items:center;gap:7px;font-size:10px;color:#a3b7ad;margin-top:8px}.background-switch input{accent-color:#9cbaaa}.vignette{opacity:calc(1 - var(--scene-light,0))}.bright-scene .identity{color:#293d3d}.bright-scene .identity p,.bright-scene .system-status{color:#395b58}.bright-scene .identity-mark{color:#5a6c5b}.console .playback{flex-wrap:nowrap}@media(max-width:520px){.playback{gap:8px}.playback button{min-width:59px;padding:7px}.console .playback label{display:none}.console .background-switch{margin-top:0}.console .playback{padding-top:7px}}

.status-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.audio-drop-cue{position:absolute;inset:16px;z-index:20;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;border:1px solid #bdceb180;border-radius:28px;background:#091611b0;backdrop-filter:blur(5px);color:#e0e4c7;font-size:13px;letter-spacing:.3em;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility .18s}.audio-drop-cue span{font-size:45px;letter-spacing:0}.audio-drag .audio-drop-cue{opacity:1;visibility:visible}.audio-drag .console{border-color:#c9ddba}.audio-loading .input-emblem{animation:audio-pulse 1s ease-in-out infinite}.console .audio-feedback{grid-column:1/-1;margin:10px 0 0;color:#e4bba4;font-size:11px}.audio-feedback[hidden]{display:none}@keyframes audio-pulse{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){.audio-drop-cue{transition:none}.audio-loading .input-emblem{animation:none;opacity:.5}}

.listening-controls{display:flex;align-items:center;gap:9px;grid-column:1/-1;color:#a5bdb3;font-size:10px;margin-top:10px}.listening-controls button{min-width:66px;padding:6px 9px;border:1px solid #78978d66;border-radius:9px;background:#132129;color:#dce4d0;font:inherit;cursor:pointer}.listening-controls button[aria-pressed=true]{color:#f2c29c;border-color:#bc9474}.listening-controls input[type=range]{width:110px;flex:0 1 110px;min-width:50px;margin:0}.listening-controls output{min-width:32px;font-variant-numeric:tabular-nums}.player-hint{margin-left:auto;font-size:9px;letter-spacing:.08em;color:#91a69d}@media(max-width:650px){.player-hint{display:none}.listening-controls{margin-top:0}.listening-controls input[type=range]{flex:1;width:auto}}

#viewport{transition:opacity .7s ease}.scene-loading #viewport{opacity:0}.scene-loader{position:absolute;inset:0 0 28%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;pointer-events:none;color:#b9c1ac;font-size:9px;letter-spacing:.28em;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}.scene-loading .scene-loader{opacity:1;visibility:visible}.loader-orbit{position:relative;width:64px;height:64px;border:1px solid #718e7c33;border-top-color:#c8c4a6;border-radius:50%;box-shadow:0 0 25px #7dafa712;animation:core-loading 3s linear infinite}.loader-orbit:after{content:"";display:block;position:absolute;inset:9px;border:1px solid #9aa79544;border-bottom-color:#d0c8a4;border-radius:50%}@keyframes core-loading{to{transform:rotate(360deg)}}.playback #demo-track{font-size:10px;letter-spacing:.08em;min-width:58px;color:#d2d5ba}@media(prefers-reduced-motion:reduce){#viewport,.scene-loader{transition:none}.loader-orbit{animation:none}}

.credits-link{position:absolute;right:24px;bottom:7px;z-index:10;color:#bac6c8;font:11px sans-serif;text-decoration:none;letter-spacing:.12em}