/* SonicLoom instrument surfaces: one session, three amounts of detail. */
:root{--bg:#101216;--panel:#20242b;--ink:#f4f2ec;--muted:#b4bdc7;--line:#454c58;--accent:#ffc075;color-scheme:dark}
body,body[data-control-view=advanced]{background:radial-gradient(ellipse at 85% 0,#26303d 0,transparent 55%),#101216;color:var(--ink)}
header{height:76px;background:#11151be8;border-bottom:1px solid #505967;box-shadow:0 3px 16px #0006}.brand{letter-spacing:-1px}.edition{font:10px monospace;letter-spacing:3px}button,.file-button{min-height:44px;background:linear-gradient(#3c424b,#252a32);border:1px solid #626b79;box-shadow:inset 0 1px #ffffff16,0 2px 3px #0008;color:#f2f3f6;border-radius:6px}button:hover,.file-button:hover{background:#414c5a;border-color:#a7bbc9}button.primary,.primary{background:linear-gradient(#ffd391,#eda753);color:#21170c;border-color:#ffce88}.quiet{box-shadow:none;background:transparent}.eyebrow,.rack-kicker{color:#ffd08b;font:11px/1.5 monospace;letter-spacing:2px}a{color:#9ed8eb}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #8fe4ff;outline-offset:4px}
.welcome{max-width:1360px;gap:44px;padding-top:40px;grid-template-columns:1.1fr 1fr}.welcome h1{font-weight:750;letter-spacing:-3px;font-size:clamp(44px,5vw,76px)}.welcome .welcome-lead{color:#dfebf3}.welcome-copy>p:last-child{color:#b4bdc7}.welcome-choices{padding:26px;border:1px solid #67717e;border-left:12px solid #363d47;border-right:12px solid #363d47;border-radius:8px;background:linear-gradient(135deg,#303640,#1a1f26);box-shadow:inset 0 1px #ffffff32,0 16px 32px #0007}.welcome-choices h2{font:12px monospace;text-transform:uppercase;letter-spacing:2px;color:#c7d9df}.welcome-choices>button[data-start]{border-color:#63717d;background:linear-gradient(#303a47,#202731)}.welcome-choices>button[data-start]:hover{background:#384754}.welcome-choices>button.primary[data-start]{background:linear-gradient(#ffd391,#efa950);color:#21170c}.entry-symbol{color:#87d9eb}.welcome-foot{border-color:#485361}
.instrument-window{position:relative;margin-top:30px;padding:18px 20px 16px;background:linear-gradient(135deg,#323b46,#1d232c);border:1px solid #687583;border-left:10px solid #444c58;border-right:10px solid #444c58;border-radius:6px;box-shadow:0 12px 24px #0007,inset 0 1px #ffffff30}.instrument-window::before,.instrument-window::after{content:'⊕';position:absolute;top:8px;left:-9px;font:12px monospace;color:#adb9c6}.instrument-window::after{left:auto;right:-9px}.instrument-screen{height:112px;position:relative;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 31px,#84cce914 32px),repeating-linear-gradient(0deg,transparent 0 23px,#84cce914 24px),#0a121a;border:1px solid #536776;border-radius:3px;display:flex;align-items:center;justify-content:space-around;padding:0 14px}.instrument-screen i{width:3px;height:var(--h);background:linear-gradient(#a7e7f1,#4694b4);box-shadow:0 0 8px #60d3ed33}.instrument-caption{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:1.5px;color:#a4c7d5;margin-bottom:10px}.instrument-bottom{display:flex;gap:14px;align-items:center;margin-top:16px;font:11px monospace;color:#c9d4dd}.instrument-bottom span:last-child{margin-left:auto;color:#f3c386}.instrument-mini{width:35px;height:35px;border-radius:50%;background:conic-gradient(#555d68,#bbc0c7,#434b56,#929aa6,#555d68);border:5px solid #171c24;box-shadow:0 2px 4px #000}.instrument-mini:after{content:'';display:block;width:2px;height:9px;background:#ffcb7b;margin:0 auto}.instrument-levels{display:flex;gap:4px;margin-top:18px;flex-wrap:wrap}.instrument-levels span{padding:7px 10px;border:1px solid #455361;border-radius:4px;color:#b3c8d7;font:11px monospace}
.workspace{grid-template-columns:205px minmax(0,1fr)}aside{padding:26px 18px;background:#151a21;border-color:#46505a}aside h1{font-size:22px}main{padding:24px;display:flex;flex-direction:column}.workspace-modes{order:-30;margin-bottom:12px;padding-bottom:14px}.studio-view{order:-29;padding:10px 0 20px;margin-bottom:18px;gap:14px}.view-title{font-size:25px!important;margin:8px 0}.view-copy{font-size:13px;max-width:480px}.rack-jump{display:none}.view-switch{background:#0e131a;border-color:#617180;box-shadow:inset 0 2px 5px #000}.view-switch button{min-width:80px}.view-switch button[aria-pressed=true]{background:linear-gradient(#b9e9ed,#7cc5d3);color:#101f27}.session-header{order:-28;margin-bottom:16px}#session-name{font-size:24px}.session-header .eyebrow{font-size:10px}.session-header p{font-size:12px}.scope-wrap{order:-27;max-height:180px}.layer-heading{order:-26;margin:20px 0 12px}.layer-heading h2{font:12px monospace;letter-spacing:2px;text-transform:uppercase}#layers{order:-25;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#empty{order:-24}#status{order:-23}.source-mix{order:-22}.master{order:8}.beta-footer{order:9}
.layer,body[data-control-view=advanced] .layer,.layer.controls-open{position:relative;background:linear-gradient(125deg,#343b45,#20262f 65%,#2c333d);border:1px solid #697580;border-top:3px solid var(--track,#f3bf7b);border-left:8px solid #444d59;border-right:8px solid #444d59;border-radius:6px;box-shadow:inset 0 1px #ffffff25,0 8px 18px #0006;padding:20px}.layer-number{font:15px monospace;color:var(--track)}.track-name{font-size:18px!important;color:#f4f1e8!important}.track-meta{font:10px monospace!important;color:#bdc9d3}.wave-row,body[data-control-view=advanced] .wave-row,.controls-open .wave-row{background:repeating-linear-gradient(90deg,transparent 0 39px,#72c6ec18 40px),#09131b;border:1px solid #567080;border-radius:3px;min-height:54px}.layer-top [data-action=play]{background:linear-gradient(#a3dec5,#66af92);color:#0b2820;border-color:#b3e0ce;font-weight:bold;min-width:72px}.track-actions{gap:8px}.controls output{color:#b8e6ef}.controls input[type=range]{accent-color:var(--track,#8ed3e4);min-height:30px}.track-actions button{font-size:12px}.source-mix,.binaural,.visual-panel,.dj-workspace,body[data-control-view=advanced] .source-mix,body[data-control-view=advanced] .binaural,body[data-control-view=advanced] .dj-workspace{background:linear-gradient(120deg,#2b333e,#1b232c);border:1px solid #566574;border-top:3px solid #8ba8bd;border-radius:6px;box-shadow:inset 0 1px #ffffff20,0 6px 14px #0005}.source-mix h2,.binaural h2{font-size:23px}.music-controls{background:#121d27;padding:18px;border:1px solid #455f73;border-radius:4px}.music-controls input{accent-color:#8ed9ef}.first-mix{background:linear-gradient(115deg,#2e3b45,#1c2832);border-color:#658595;border-radius:6px}.first-crossfade{background:#101e29}.first-play{background:linear-gradient(#a3dec5,#66af92);color:#0b2820}.first-mix h2{font-size:28px}.first-tip{color:#c1d4df}
body[data-control-view=mix] .controls{grid-template-columns:1fr 1fr}body[data-control-view=mix] .layer .open-controls{display:none}body[data-control-view=mix] .layer .local-dj-note{font-size:11px}body[data-control-view=mix] .scope-wrap{display:none}body[data-control-view=mix]:not(.show-binaural) .binaural,body[data-control-view=mix]:not(.show-visuals) .visual-panel{display:none}
body[data-control-view=advanced] #layers{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-control-view=advanced] .controls,.controls-open .controls{background:#151d26;border-color:#495968;grid-template-columns:repeat(4,minmax(0,1fr))}body[data-control-view=advanced] .controls label,.controls-open .controls label{border-color:#455361;padding:14px 5px;letter-spacing:0;font-size:10px}body[data-control-view=advanced] .rack-dial,.controls-open .rack-dial{width:62px;height:62px;background:repeating-conic-gradient(#818b96 0deg 3deg,#303947 3deg 12deg);border-color:#111721;box-shadow:0 5px 8px #000b,0 0 0 3px #657280}body[data-control-view=advanced] .rack-dial i,.controls-open .rack-dial i{background:conic-gradient(#747f8a,#bdc5cc,#3b4652,#89949f,#747f8a)}.rack-dial i:before{background:#ffc576}body[data-control-view=advanced] .controls output,.controls-open .controls output{min-width:0;width:100%;color:#aee2f1;background:#0a1722;border-color:#385669;padding:5px 3px;font-size:11px}body[data-control-view=advanced] .rack-exact,.controls-open .rack-exact{width:100%;max-width:78px;background:#101b26;color:#d6edf3;border-color:#566677}body[data-control-view=advanced] .rack-path{font-size:9px;color:#a5becf;border-color:#526574}body[data-control-view=advanced] .master{background:#202b36;border-color:#657b8c}.pending-hardware{display:none!important}
body[data-entry=guided] .studio-view{display:flex!important;order:-31}body[data-entry=guided] .studio-view>div:first-child{display:none}body[data-entry=guided] .first-mix{order:-28}body[data-entry=guided] #layers{order:-25}
body[data-control-view=simple] .rack-path{display:none!important}body[data-control-view=simple] .layer:not(.controls-open) .controls{grid-template-columns:1fr}.view-switch button:focus-visible{outline-offset:1px}
@media(max-width:1100px){.workspace{grid-template-columns:180px minmax(0,1fr)}#layers,body[data-control-view=advanced] #layers{grid-template-columns:1fr}.studio-view{flex-wrap:wrap}.welcome{gap:26px;padding-left:24px;padding-right:24px}}
@media(max-width:760px){.workspace{display:block}aside{min-height:0;border-right:0;padding:16px}aside .intro,aside .sidebar-bottom{display:none}main{padding:16px}.welcome{grid-template-columns:1fr;padding:25px 18px}.welcome h1{font-size:46px}.welcome-choices{padding:18px;border-left-width:7px;border-right-width:7px}.instrument-window{margin-top:20px}.instrument-screen{height:72px}.instrument-levels{margin-top:12px}.studio-view{flex-direction:column;align-items:stretch}.view-switch{width:100%}.view-switch button{min-width:0;flex:1}.layer,body[data-control-view=advanced] .layer{padding:16px 12px}.session-header{flex-wrap:wrap}.session-buttons{width:100%;display:flex}.session-buttons button{flex:1}.controls-open .controls,body[data-control-view=advanced] .controls{grid-template-columns:1fr 1fr}.welcome-foot{line-height:1.6}.layer-top{gap:10px}header{padding:14px 18px;height:auto;flex-wrap:wrap}.brand{font-size:25px}.edition{font-size:9px}body[data-entry=guided] .studio-view{margin:0;padding:0 0 16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Put playable channels above monitoring and reference material. */
body[data-control-view=advanced] .scope-wrap{order:-21;background:#0a1520;border-color:#456276}body[data-control-view=advanced] .studio-view{padding:6px 0 12px;margin-bottom:10px}body[data-control-view=advanced] .session-header{margin-bottom:8px}body[data-control-view=advanced] .session-header p{margin:6px 0}body[data-control-view=advanced] .layer-heading{margin:10px 0}body[data-control-view=advanced] .local-dj-note{display:none}body[data-control-view=advanced] .controls input[type=range]{accent-color:var(--track,#8ed3e4)}body[data-control-view=advanced] .layer-number{color:var(--track);background:#111c26;border-color:#566c7c}body[data-control-view=advanced] .track-actions button[aria-pressed=true]{background:#b6d6d4;color:#122329;border-color:#c9e4e3}body[data-control-view=mix] .layer.controls-open .rack-dial,body[data-control-view=mix] .layer.controls-open .rack-exact,body[data-control-view=mix] .layer.controls-open .rack-path{display:none!important}body[data-control-view=mix] .layer.controls-open .controls label{display:block;padding:0;border:0;text-transform:none;font:inherit}body[data-control-view=mix] .layer.controls-open .controls output{display:block;background:none;border:0;text-align:left}body[data-control-view=mix] .layer.controls-open .controls input{width:100%;max-width:none}

/* Keep live monitoring at the front of every workspace depth. */
body:not([data-entry=welcome]) .scope-wrap{display:block!important;order:-29!important;max-height:none;background:#091520;border:1px solid #678da2;border-top:3px solid #8ed9ef;margin:12px 0 18px;box-shadow:0 6px 20px #0005}
body:not([data-entry=welcome]) .scope-wrap canvas{height:140px;width:100%;display:block}
body:not([data-entry=welcome]) .studio-view{order:-30;padding:6px 0;margin-bottom:8px}
body:not([data-entry=welcome]) .source-mix:has(.captured-row){display:flex!important;flex-direction:column;order:-28}
.source-mix:has(.captured-row) .console-channels{order:-1;margin-bottom:20px}
.source-mix:has(.captured-row) .console-channels:before{content:'CONNECTED SOURCES';display:block;font:12px monospace;letter-spacing:2px;color:#9ed8eb;margin-bottom:12px}
.captured-row.source-arrived{outline:2px solid #9ed8eb;outline-offset:4px}
@media(max-width:760px){body:not([data-entry=welcome]) .scope-wrap canvas{height:110px}.scope-footer{flex-wrap:wrap;gap:8px}}