
:root{--bg:#080d13;--text:#e2ebf1;--muted:#8c9cab;--line:#283541;--cyan:#4bdae8;--accent:#4bdae8;--success:#69dfc0;--warning:#e8b664;--danger:#ef8696;font-synthesis:none;color-scheme:dark}
*{box-sizing:border-box}html{min-height:100%;background:#070b10}body{margin:0;padding:30px 24px;min-height:100vh;background:radial-gradient(ellipse at 52% -32%,#183546 0,transparent 63%),linear-gradient(135deg,#0a1017,#070b10 65%);color:var(--text);font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}button,select,input[type=range]{cursor:pointer}button{user-select:none}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,select:focus-visible,[role=button]:focus-visible,input:focus-visible{outline:2px solid #83eef5;outline-offset:4px}
svg.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.hidden{display:none!important}
.app-shell{max-width:1480px;margin:auto;border:1px solid #3b4853;border-radius:15px;background:linear-gradient(155deg,#17212b,#0b121a 60%);box-shadow:0 35px 90px #0009,0 0 0 5px #080c11,0 0 0 6px #1b242d,0 1px 0 #ffffff13 inset;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 28px 19px;border-bottom:1px solid #33404c;background:linear-gradient(175deg,#19252f,#101922);box-shadow:0 4px 12px #0003;position:relative}.topbar:after{content:"";position:absolute;bottom:-1px;left:28px;width:32%;height:1px;background:linear-gradient(90deg,#71e9ef80,transparent)}
.brand-lockup{display:flex;align-items:center;gap:24px;min-width:0}.sonic-copy{display:flex;flex-direction:column;gap:7px;min-width:164px}.sonic-copy strong{font-size:19px;letter-spacing:.12em;font-weight:700;font-style:italic;white-space:nowrap}.sonic-copy strong span{margin-left:6px;font-weight:350}.brand-caption{font-size:9px;letter-spacing:.095em;color:#92a7b5;white-space:nowrap}.brand-divider{height:52px;width:1px;background:linear-gradient(transparent,#52606b,transparent)}
.atomizer-copy{display:flex;flex-direction:column;align-items:center}.atomizer-copy h1{margin:0;display:flex;align-items:center;font-size:40px;line-height:1.15;font-weight:370;letter-spacing:.16em;color:#eff7fb;text-shadow:0 1px 0 #fff6;white-space:nowrap;height:56px}.atomizer-copy h1>span:last-child{margin-right:-.16em}.logo-atom{width:66px;height:74px;margin-left:-.36em;margin-right:-.22em;flex-shrink:0}.wordmark-caption{font-size:9px;letter-spacing:.28em;color:#7cd2df;margin-top:7px;white-space:nowrap}
.header-actions{display:flex;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid #465562;border-radius:5px;background:linear-gradient(#24313e,#14202b);padding:10px 17px;font-size:14px;font-weight:550;color:#dbe7ef;box-shadow:0 1px 0 #ffffff0a inset,0 3px 5px #0004;transition:border-color .15s,background .15s,color .15s;white-space:nowrap}.button:hover:not(:disabled){border-color:#8aabbc;background:linear-gradient(#2b3b49,#1c2b37)}
.button.primary{background:linear-gradient(#60dfec,#29bace);border-color:#85eef3;color:#06202b;font-weight:650;box-shadow:0 1px 0 #c7f8ff90 inset,0 0 22px #23b6d014,0 3px 6px #0007}.button.primary:hover:not(:disabled){background:linear-gradient(#82edf5,#45ccd9);border-color:#b7faff}.button.primary:disabled{opacity:.48}.export-button{border-color:#437783;color:#a5f1f4;background:linear-gradient(#23414a,#16313a)}
.console-body{padding:22px 24px 14px}.panel{background:linear-gradient(165deg,#17212c,#0d1720 65%);border:1px solid #344451;border-radius:6px;box-shadow:0 1px 0 #ffffff08 inset,0 5px 10px #0002}
.source-panel{display:grid;grid-template-columns:minmax(0,1fr) 222px;overflow:hidden}.source-main{padding:18px 22px 14px;min-width:0}.source-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.panel-kicker{font-size:12px;letter-spacing:.15em;color:#b1c8d6;font-weight:550;margin:0;display:flex;align-items:center;gap:10px}.section-number{font:11px ui-monospace,SFMono-Regular,Consolas,monospace;color:#6295aa;letter-spacing:0}
.file-name{font-size:16px;line-height:1.4;font-weight:500;color:#e3edf3;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}.source-format{font:11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.03em;color:#8ca0b0;white-space:nowrap}
.wave-wrap{position:relative;height:134px;border:1px solid #294353;box-shadow:0 3px 16px #0008 inset;border-radius:3px;overflow:hidden;cursor:pointer;background-color:#060f16;background-image:linear-gradient(#36536b18 1px,transparent 1px),linear-gradient(90deg,#36536b18 1px,transparent 1px);background-size:100% 26px,50px 100%}.wave-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:0 0 30px #0005 inset}.wave-wrap.drag{outline:2px solid #4fdfeb;outline-offset:3px;background-color:#102532}.wave-wrap canvas{display:block;width:100%;height:100%;position:relative;z-index:2}.wave-midline{position:absolute;left:0;right:0;top:50%;height:1px;background:#56dbe330;z-index:1}
.drop-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:3;background:radial-gradient(ellipse at center,#07121be6,transparent 75%);pointer-events:none}.drop-hint .icon{height:24px;width:24px;color:#69bbcf;margin-bottom:3px}.drop-hint strong{font-size:16px;font-weight:450;color:#c5dbe6}.drop-hint span{font-size:14px;color:#8a9eae}.wave-wrap.has-audio .drop-hint{display:none}
.playhead{display:none;position:absolute;top:0;bottom:0;width:1px;background:#c2fbff;box-shadow:0 0 7px #5ee9f1;z-index:4;pointer-events:none;left:0}.has-audio .playhead{display:block}.playhead:before{content:"";position:absolute;left:-4px;top:0;border:4px solid transparent;border-top:7px solid #83e8f3}
.wave-ruler{display:flex;justify-content:space-between;margin-top:6px;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;color:#7c92a4}.source-controls{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-top:11px}.control-cluster{display:flex;gap:16px}.control-cluster label{display:flex;align-items:center;gap:9px;font-size:14px;color:#94aabc}.source-controls select,.transport select{background:linear-gradient(#1e2a35,#131e28);border:1px solid #455561;color:#e0e8ef;border-radius:4px;padding:9px 26px 9px 11px;min-height:38px;font-size:14px;box-shadow:0 1px 1px #0005}.split-button{min-width:194px}
.reactor-panel{padding:16px 19px 14px;border-left:1px solid #2c3d4a;background:radial-gradient(ellipse at center,#142b3b50,transparent 70%),linear-gradient(115deg,#0a141d50,#0d1720);display:flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative}.reactor-topline{width:100%;display:flex;align-items:center;gap:10px;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;color:#7a9aac}.reactor-line{height:1px;background:#29404e;flex:1}.reactor-visual{height:174px;display:grid;place-items:center;width:100%;position:relative}.reactor-atom{width:210px;height:198px}.engine-copy{display:flex;flex-direction:column;align-items:center;gap:7px;padding-bottom:6px;text-align:center}.engine-copy strong{font-size:10px;font-weight:500;letter-spacing:.18em;color:#8faab9}.engine-copy>span{font-size:12px;color:#96ced9;line-height:1.35}
.source-status{grid-column:1/-1;min-height:41px;border-top:1px solid #2a3d4b;display:flex;align-items:center;padding:10px 20px;gap:8px;background:#0b151e;color:#95acbb;font-size:12px;line-height:1.5}.status-indicator{width:5px;height:5px;background:#688393;border-radius:50%;flex-shrink:0}.source-status.connected .status-indicator{background:#75d9c2;box-shadow:0 0 7px #65cfbe60}.build-badge{margin-left:auto;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.05em;white-space:nowrap;color:#6d8999}
.progress-area{grid-column:1/-1;padding:16px 22px}.progress-track{height:5px;background:#233441;border-radius:3px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#4eb9da,#71e0d9);transition:width .3s}.progress-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#b8d1de}.progress-steps{display:flex;justify-content:space-between;margin-top:12px;font-size:11px;letter-spacing:.1em;color:#849caa}.progress-steps .active,.progress-steps .done{color:#73dfd7}
.metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 22px 14px}.metrics>div{display:flex;gap:8px;justify-content:space-between;padding:8px;border:1px solid #30414e;font-size:12px}.metrics span{font-size:10px;color:#88a1b0}.metrics .pass{color:#6bdabe}.metrics .warn{color:var(--warning)}
.mixer-heading{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 12px}.mixer-heading>span{font-size:10px;letter-spacing:.12em;color:#879dac}.mixer-heading b{font-weight:400;color:#486272;margin:0 8px}.mixer-panel{display:flex;gap:10px}.channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;flex:1;min-width:0}
.channel{--accent:#70d9e1;position:relative;min-width:0;border:1px solid #3b4655;border-radius:6px;padding:14px 14px 10px;background:linear-gradient(120deg,#1c2632,#151e29 45%,#0c1620);box-shadow:0 1px 0 #ffffff09 inset,0 5px 9px #0005;overflow:hidden}.channel:before{content:"";position:absolute;top:0;left:14px;right:14px;height:2px;background:var(--accent);opacity:.85;box-shadow:0 0 12px color-mix(in srgb,var(--accent),transparent 70%)}
.strip-header{display:flex;align-items:center;gap:8px;min-height:25px;position:relative}.strip-header .icon{width:19px;height:21px;color:var(--accent)}.strip-header strong{font-size:14px;letter-spacing:.06em;font-weight:600;color:var(--accent)}.channel-number{margin-left:auto;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#8798a8}
.mini-wave{height:53px;border:1px solid #2b3b48;border-radius:3px;background:linear-gradient(#070f17,#0a131c);margin-top:12px;position:relative;overflow:hidden;box-shadow:0 2px 8px #0008 inset}.mini-wave:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--accent);opacity:.18}.mini-wave canvas{height:100%;width:100%;position:relative;display:block}.stem-status{text-align:center;font-size:11px;letter-spacing:.08em;color:#8093a3;line-height:1.5;margin:8px 0 6px}.stem-status.ready{color:var(--accent)}
.pan-control{display:flex;align-items:center;justify-content:center;gap:12px;margin:9px 0 6px}.pan-control>span{font-size:10px;color:#99aab7}.pan-dial{width:42px;height:42px;position:relative;flex-shrink:0;border:1px solid #6b7784;border-radius:50%;background:linear-gradient(150deg,#64727f,#2b3644 12%,#131d28 35%,#0b1119 70%,#283443);box-shadow:0 3px 5px #000b,0 0 0 3px #090e15,0 0 0 4px #263542;touch-action:none;cursor:ew-resize}.pan-dial:before{content:"";position:absolute;inset:3px;border:1px solid #45556666;border-radius:50%;background:linear-gradient(145deg,#24303d,#141c26)}.pan-dial:after{content:"";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(var(--accent),var(--accent)) center 2px/2px 9px no-repeat;transform:rotate(var(--pan-rotation,0deg));pointer-events:none}.pan-dial:focus-within{outline:2px solid #94e6ee;outline-offset:5px}.pan-dial input{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.pan-label{text-align:center;font-size:10px;letter-spacing:.09em;color:#8b9eab;margin:8px 0 11px}
.channel-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:12px}.square-btn{width:40px;height:29px;border:1px solid #465765;border-radius:3px;background:linear-gradient(#2e3d4b,#192532 55%,#14202a);color:#b8c8d5;font-size:12px;font-weight:600;box-shadow:0 2px 3px #0008,inset 0 1px #ffffff0d;cursor:pointer}.square-btn:hover:not(:disabled){border-color:#93a7b5}.square-btn.mute.active{background:linear-gradient(#56d7de,#2099a7);color:#031c25;border-color:#7de8e8;box-shadow:0 0 12px #3bcfd82a}.square-btn.solo.active{background:linear-gradient(#f3c775,#d7933e);color:#281808;border-color:#efcc94;box-shadow:0 0 12px #d5a55620}
.fader-zone{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:14px;max-width:130px;margin:0 auto;height:146px}.db-scale{height:138px;position:relative;margin:0;color:#92a5b5;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}.db-scale span{position:absolute;right:0;transform:translateY(-50%)}.db-scale span:after{content:"";position:absolute;width:5px;height:1px;right:-9px;top:50%;background:#687c8d}.db-scale span:nth-child(1){top:0}.db-scale span:nth-child(2){top:9.09%;color:#d0d9e1}.db-scale span:nth-child(3){top:27.27%}.db-scale span:nth-child(4){top:45.45%}.db-scale span:nth-child(5){top:63.63%}.db-scale span:nth-child(6){top:100%}
.vertical-fader{writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;width:40px;height:145px;margin:0;background:transparent;justify-self:center;filter:drop-shadow(0 2px 2px #000a)}.vertical-fader::-webkit-slider-runnable-track{width:7px;height:100%;border:1px solid #030609;border-radius:3px;background:linear-gradient(90deg,#020609,#111b25);box-shadow:0 1px 1px #60717c40,0 0 0 1px #1f2a35}.vertical-fader::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:35px;width:28px;border:1px solid #667d8e;border-radius:3px;margin-left:-11px;background:linear-gradient(180deg,#c5d0d9 0,#7f909f 13%,#aab9c5 19%,#42596d 44%,#d4e1e8 48%,var(--accent) 50%,var(--accent) 55%,#354b5c 58%,#8396a5 87%,#536678 100%);box-shadow:0 5px 5px #0009,inset 1px 0 #e1edf777,inset -1px 0 #d1ddea44}.vertical-fader::-moz-range-track{width:7px;border:1px solid #030609;border-radius:3px;background:#061018}.vertical-fader::-moz-range-thumb{width:28px;height:35px;border:1px solid #667d8e;border-radius:3px;background:linear-gradient(#adbecb,#536b7e 44%,var(--accent) 49%,var(--accent) 55%,#425b6e 60%,#839aab);box-shadow:0 4px 5px #0009}
.meter-shell{width:10px;height:143px;border:1px solid #263744;background:#050c13;display:flex;align-items:flex-end;overflow:hidden;position:relative;box-shadow:0 0 0 2px #090f16}.meter-shell:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to top,transparent 0 3px,#060d14 3px 5px);pointer-events:none}.meter-fill{width:100%;height:0;background:linear-gradient(to top,var(--accent) 0 82%,#e4bc62 90%,#f48184 100%);transition:height .07s linear;opacity:.95}
.fader-value{text-align:center;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:#cad8e1;margin-top:10px}.strip-footer{display:flex;align-items:center;justify-content:center;min-height:27px;border-top:1px solid #2a3947;margin-top:10px;padding-top:7px}.empty-state{font-size:10px;color:#8297a7;letter-spacing:.02em}.stem-download{display:none;font-size:12px;color:var(--accent);text-decoration:none}.stem-download.ready{display:block}.stem-download:hover{text-decoration:underline}.strip-footer:has(.stem-download.ready) .empty-state{display:none}.channel.muted .mini-wave{opacity:.45}
.master-strip{--accent:#87e9dc;flex:0 0 208px;padding:14px 17px 12px;border:1px solid #4b5967;border-radius:6px;background:linear-gradient(135deg,#202e39,#14212c 42%,#0b1721);box-shadow:0 1px 0 #a9c8d116 inset,0 5px 10px #0005;position:relative;display:flex;flex-direction:column}.master-strip:before{content:"";position:absolute;top:0;left:17px;right:17px;height:2px;background:#a1bbc6;opacity:.75}.master-strip .strip-header strong{color:#e6f0f4}.master-strip .strip-header .icon{color:#c5d8df}
.master-display{margin:12px 0 17px;border:1px solid #384e5b;border-radius:3px;background:#08151e;padding:9px 11px;box-shadow:inset 0 2px 7px #0007}.master-display>span{font-size:9px;letter-spacing:.12em;color:#87a7b5}.master-display>div{display:flex;align-items:baseline;justify-content:space-between;gap:5px;margin-top:7px}.master-display strong{font:21px ui-monospace,SFMono-Regular,Consolas,monospace;color:#ceeae9;letter-spacing:-.04em}.master-display>div>span{font-size:9px;letter-spacing:.08em;color:#708d9e}
.master-fader-zone{display:flex;align-items:flex-start;justify-content:center;gap:16px;flex:1;margin:5px 0 13px;padding:0 7px}.meter-column{display:flex;flex-direction:column;align-items:center;gap:8px}.meter-column>span{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#9ab6c2}.master-strip .meter-shell{height:218px;width:13px}.master-fader-wrap{position:relative;width:50px;display:flex;justify-content:center;height:218px}.master-fader-wrap .vertical-fader{height:218px}.fader-guides{position:absolute;inset:0;pointer-events:none}.fader-guides i{position:absolute;right:-11px;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal;color:#8aa0af;transform:translateY(-50%)}.fader-guides i:nth-child(1){top:0}.fader-guides i:nth-child(2){top:9.09%;color:#b7c9d2}.fader-guides i:nth-child(3){top:27.27%}.fader-guides i:nth-child(4){top:45.45%}.fader-guides i:nth-child(5){top:63.63%}.fader-guides i:nth-child(6){top:100%}
.compare{width:100%;min-height:38px;font-size:12px;padding:8px;gap:7px;background:linear-gradient(#24333e,#172630);border-color:#425d6b}.compare.active{background:#244751;color:#aff3ef;border-color:#79c7ca}.compare-icon{font-size:18px;line-height:1}
.transport{display:flex;align-items:center;gap:18px;margin-top:15px;padding:13px 16px;background:linear-gradient(175deg,#1b2834,#101c27);border-color:#435766}.transport-buttons{display:flex;gap:8px;flex-shrink:0}.transport-btn{display:grid;place-items:center;width:38px;height:39px;border:1px solid #4b5b68;border-radius:4px;background:linear-gradient(#293c4a,#172632);color:#c6d9e3;box-shadow:0 2px 4px #0007,inset 0 1px #ffffff0b;cursor:pointer}.transport-btn .icon{height:17px;width:17px}.transport-btn.play{width:47px;border-color:#479eaf;background:linear-gradient(#244b59,#153540);color:#83ebf2;box-shadow:0 0 12px #2bcede10,inset 0 1px #a1e9f118}.transport-btn.play.is-playing{border-color:#7de0e9;background:#296171}
.time-readout{font:13px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;color:#c6d9e4}.time-readout span{color:#8299aa}.seek{appearance:none;-webkit-appearance:none;flex:1;min-width:30px;height:5px;border-radius:8px;background:#080f16;border:1px solid #344c5a;box-shadow:0 1px 1px #ffffff09;margin:0 8px}.seek::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border:2px solid #b4f9fb;border-radius:50%;background:#50bfcc;box-shadow:0 0 9px #53d6e448}.seek::-moz-range-thumb{width:9px;height:9px;border:2px solid #b4f9fb;border-radius:50%;background:#50bfcc}.seek:disabled{opacity:.5}.transport-right{margin-left:auto}.transport-right label{font-size:14px;display:flex;align-items:center;gap:10px;color:#a1b6c5}.transport select{padding:8px 24px 8px 10px;font-size:14px;min-height:35px}
.local-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:14px 2px 0;font-size:12px;color:#7d93a5;line-height:1.5}.local-footer>span:first-child{font-size:10px;letter-spacing:.14em;white-space:nowrap}.local-footer b{font-weight:400;color:#6f879a;font-size:9px;margin-left:10px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);max-width:min(620px,90vw);padding:14px 20px;border:1px solid #466576;background:#182a36;box-shadow:0 8px 25px #0008;border-radius:7px;font-size:14px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{border-color:#b26a7a;color:#ffd0d7}.toast.warning{border-color:#a18d62;color:#f1dcb6}
@media(min-width:1500px){body{padding-top:42px}.topbar{padding:24px 30px}.console-body{padding:26px 28px 16px}.source-panel{grid-template-columns:minmax(0,1fr) 244px}.wave-wrap{height:150px}.source-main{padding:20px 24px 17px}.reactor-visual{height:190px}.reactor-atom{width:230px;height:218px}.channel{padding:16px 19px 12px}.mini-wave{height:62px}.fader-zone{height:176px}.db-scale{height:166px}.vertical-fader{height:172px}.meter-shell{height:170px}.master-strip{flex-basis:220px}.master-strip .meter-shell,.master-fader-wrap,.master-fader-wrap .vertical-fader{height:255px}}
@media(max-width:1180px){body{padding:20px 18px}.topbar{padding:18px 22px;gap:16px}.sonic-copy{min-width:126px}.sonic-copy strong{font-size:15px;letter-spacing:.07em}.brand-caption{font-size:7px;letter-spacing:.04em}.brand-lockup{gap:18px}.atomizer-copy h1{font-size:34px;letter-spacing:.1em}.logo-atom{width:60px;height:68px}.wordmark-caption{font-size:8px;letter-spacing:.19em}.header-actions{gap:8px}.button{padding:10px 12px;font-size:14px}.console-body{padding:18px}.source-panel{grid-template-columns:minmax(0,1fr) 185px}.source-main{padding:16px}.source-format{display:none}.reactor-panel{padding:16px 12px}.reactor-atom{width:183px;height:183px}.source-controls{gap:10px}.control-cluster{gap:12px}.control-cluster label{font-size:14px;gap:6px}.source-controls select{font-size:14px;padding-left:8px;padding-right:20px}.split-button{min-width:175px}.master-strip{flex-basis:178px;padding:14px 12px}.channel{padding:13px 11px 10px}.strip-header{gap:6px}.strip-header strong{font-size:13px}.strip-header .icon{width:16px}.channel-number{font-size:9px}.master-fader-zone{gap:11px}.fader-zone{gap:10px;grid-template-columns:1fr 34px 1fr}.compare{font-size:12px;padding:8px 5px}}
@media(max-width:960px){.topbar{flex-wrap:wrap;gap:15px}.brand-lockup{flex:1;justify-content:flex-start}.header-actions .button{padding:9px 11px}.header-actions .icon{display:none}.sonic-copy{min-width:112px}.sonic-copy strong{font-size:13px}.brand-caption{font-size:6.5px}.brand-lockup{gap:13px}.atomizer-copy h1{font-size:30px}.wordmark-caption{font-size:7px}.logo-atom{width:53px;height:62px}.source-panel{grid-template-columns:minmax(0,1fr) 154px}.reactor-panel{padding:14px 8px}.reactor-topline{font-size:9px}.reactor-atom{width:158px;height:168px}.reactor-visual{height:165px}.engine-copy strong{font-size:9px}.engine-copy>span{font-size:12px}.control-cluster label{flex-direction:column;align-items:flex-start;gap:5px}.split-button{min-width:165px}.master-strip{flex-basis:160px}.channels{gap:7px}.mixer-panel{gap:8px}.channel{padding:12px 8px 9px}.channel-number{display:none}.strip-header{justify-content:center}.fader-zone{gap:8px}.source-status{padding:10px 16px}.build-badge{display:none}.transport{gap:12px}.time-readout{font-size:12px}.transport-right label{gap:7px}.local-footer b{display:none}.pan-control{gap:9px}.compare{white-space:normal;line-height:1.4}.master-strip .strip-header strong{font-size:13px}}
@media(max-width:700px){body{padding:12px 9px}.app-shell{border-radius:10px}.topbar{padding:14px 16px;gap:15px}.brand-lockup{width:100%;justify-content:space-between}.sonic-copy{min-width:0}.sonic-copy strong{font-size:15px}.brand-caption{font-size:7px}.brand-divider{height:44px}.atomizer-copy h1{font-size:31px;height:48px}.logo-atom{width:56px;height:63px}.wordmark-caption{font-size:7px;letter-spacing:.16em;margin-top:3px}.header-actions{width:100%;gap:10px}.header-actions .button{flex:1;font-size:14px}.header-actions .icon{display:block;width:17px}.console-body{padding:14px 12px 12px}.source-panel{grid-template-columns:minmax(0,1fr)}.source-main{padding:15px}.reactor-panel{display:none}.source-heading{margin-bottom:12px}.file-name{font-size:16px;max-width:72vw}.wave-wrap{height:130px}.source-controls{gap:10px;align-items:end}.control-cluster{gap:9px}.source-controls select{max-width:115px;font-size:14px;padding-right:18px}.split-button{min-width:0;padding:10px;font-size:14px;gap:6px;min-height:40px}.split-button .icon{width:16px}.source-status{padding:10px 14px;align-items:flex-start;gap:7px;font-size:12px}.status-indicator{margin-top:6px}.mixer-heading{margin:19px 1px 12px}.mixer-heading>span{font-size:9px;letter-spacing:.05em}.mixer-heading b{margin:0 4px}.panel-kicker{font-size:12px;letter-spacing:.1em}.mixer-panel{flex-direction:column;gap:12px}.channels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.channel{padding:14px}.strip-header{justify-content:flex-start;gap:9px}.strip-header strong{font-size:14px}.channel-number{display:block}.strip-header .icon{width:19px}.mini-wave{height:58px}.fader-zone{height:135px;gap:13px}.db-scale{height:128px}.vertical-fader{height:134px}.meter-shell{height:132px}.master-strip{flex-basis:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px}.master-strip .strip-header{grid-column:1}.master-display{grid-column:1;margin:0;align-self:start}.master-fader-zone{grid-column:2;grid-row:1/4;margin:8px 0 0;gap:20px}.master-strip .meter-shell,.master-fader-wrap,.master-fader-wrap .vertical-fader{height:148px}.compare{grid-column:1;font-size:12px;min-height:40px;align-self:end}.transport{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:13px}.time-readout{text-align:right;font-size:13px}.seek{grid-row:2;grid-column:1/-1;width:100%;margin:0}.transport-right{grid-column:1/-1;grid-row:3;margin:0;display:flex;justify-content:flex-end}.transport-btn{width:40px;height:40px}.transport-btn.play{width:50px}.local-footer{flex-direction:column;gap:6px;align-items:flex-start;margin-top:12px;font-size:12px}.metrics{grid-template-columns:1fr 1fr;padding:0 14px 12px}.source-format{display:none}}
@media(max-width:420px){.sonic-copy strong{font-size:12px}.brand-caption{font-size:6px}.brand-lockup{gap:9px}.atomizer-copy h1{font-size:27px;letter-spacing:.075em}.logo-atom{width:48px}.wordmark-caption{font-size:6px;letter-spacing:.11em}.source-controls{flex-wrap:wrap}.control-cluster{flex:1;gap:12px}.control-cluster label{flex:1}.source-controls select{width:100%;max-width:none}.split-button{width:100%;margin-top:2px}.mixer-heading>span{display:none}.master-fader-zone{gap:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* Machined faceplate edges and a restrained light sweep over the bevel only. */
.channel,.master-strip{
  --faceplate-bevel:8px;
  isolation:isolate;
  overflow:hidden;
  border:1px solid #768b9b;
  border-radius:8px;
  background:linear-gradient(125deg,#24313e 0%,#17232f 34%,#101b26 72%,#0c1721 100%);
  box-shadow:0 1px 0 #c6d7e53d,0 3px 0 #030810,0 9px 16px #0008,inset 0 0 0 8px #111c26;
}
.master-strip{background:linear-gradient(125deg,#293b48,#1b2b37 40%,#10212c 78%,#0c1822)}
.channel:after,.master-strip:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:7px;
  border:var(--faceplate-bevel) solid;
  border-color:#637888 #1c2d3c #09121b #3c5264;
  box-shadow:inset 0 1px 0 #04090ec9,inset 1px 0 0 #08111bb3,inset 0 -1px 0 #a5bac640,inset -1px 0 0 #b5c7d12b;
  pointer-events:none;
  z-index:2;
}
.channel:before,.master-strip:before{top:var(--faceplate-bevel);height:2px;z-index:3;opacity:.78}
.faceplate-shine{
  position:absolute;
  inset:0;
  display:block;
  padding:var(--faceplate-bevel);
  border-radius:7px;
  overflow:hidden;
  pointer-events:none;
  z-index:4;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.faceplate-shine:before{
  content:"";
  position:absolute;
  inset:-15% -50%;
  background:linear-gradient(112deg,transparent 42%,#e8f4ff10 46%,#f7fcffb3 50%,#d5e7f31a 54%,transparent 58%);
  transform:translateX(-115%);
  opacity:0;
  animation:faceplate-shimmer 6.5s ease-in-out infinite;
}
.channel:nth-child(2) .faceplate-shine:before{animation-delay:.3s}
.channel:nth-child(3) .faceplate-shine:before{animation-delay:.6s}
.channel:nth-child(4) .faceplate-shine:before{animation-delay:.9s}
.master-strip .faceplate-shine:before{animation-delay:1.2s}
@keyframes faceplate-shimmer{
  0%,62%{transform:translateX(-115%);opacity:0}
  69%{opacity:.38}
  83%{opacity:.38}
  94%,100%{transform:translateX(115%);opacity:0}
}
@media(max-width:960px){.channel,.master-strip{--faceplate-bevel:6px}}
@media(prefers-reduced-motion:reduce){.faceplate-shine{display:none}}


/* Brushed metal caps, knurled grips, inset pointers, and a cast shadow. */
.pan-dial{
  width:50px;height:50px;border:1px solid #111c26;
  background:linear-gradient(140deg,#ffffff75,transparent 40%,#000000b3 82%),repeating-conic-gradient(from 2deg,#aebfc9 0deg 1.4deg,#455b6b 2deg 4deg,#101d29 4.8deg 6deg,#7d929f 6.5deg 7.5deg);
  box-shadow:0 7px 8px #000b,0 2px 1px #000d,0 0 0 2px #071018,0 0 0 4px #3c4e5c,inset 0 0 0 1px #c4d2dc69;
}
.pan-dial:before{
  inset:5px;border:1px solid #bbc9d594;border-radius:50%;
  background:radial-gradient(ellipse at 28% 17%,#ffffff8a,transparent 50%),repeating-radial-gradient(circle at center,transparent 0 1px,#ffffff0a 1px 1.6px,transparent 1.6px 2.5px),conic-gradient(from -28deg,#9caeb9,#354a5a 14%,#647c8b 29%,#aab9c3 41%,#526a7b 58%,#263c4d 76%,#78909f 92%,#9caeb9);
  box-shadow:inset 0 1px 1px #f5fdffb3,inset 0 -2px 3px #0b1c2be6,0 0 0 1px #030a12;
}
.pan-dial:after{
  inset:6px;border-radius:50%;
  background:linear-gradient(90deg,#05121f 0%,#effbff 30%,var(--accent) 55%,#081421 100%) center 2px/3px 12px no-repeat;
  filter:drop-shadow(0 1px 1px #000b);
}
@media(max-width:960px){.pan-dial{width:46px;height:46px}}

/* Small radiused transitions connect the straight 45-degree corner cuts. */
.app-shell,.panel,.channel,.master-strip,.button,.transport-btn,.square-btn,.wave-wrap,.mini-wave,.master-display,.source-controls select,.transport select,.metrics>div,.toast{
  --corner-cut:12px;
  --frame-clip:polygon(
    calc(var(--corner-cut) + 2px) 0,
    calc(100% - var(--corner-cut) - 2px) 0,
    calc(100% - var(--corner-cut)) .5px,
    calc(100% - var(--corner-cut) + 1.5px) 1.5px,
    calc(100% - 1.5px) calc(var(--corner-cut) - 1.5px),
    calc(100% - .5px) var(--corner-cut),
    100% calc(var(--corner-cut) + 2px),
    100% calc(100% - var(--corner-cut) - 2px),
    calc(100% - .5px) calc(100% - var(--corner-cut)),
    calc(100% - 1.5px) calc(100% - var(--corner-cut) + 1.5px),
    calc(100% - var(--corner-cut) + 1.5px) calc(100% - 1.5px),
    calc(100% - var(--corner-cut)) calc(100% - .5px),
    calc(100% - var(--corner-cut) - 2px) 100%,
    calc(var(--corner-cut) + 2px) 100%,
    var(--corner-cut) calc(100% - .5px),
    calc(var(--corner-cut) - 1.5px) calc(100% - 1.5px),
    1.5px calc(100% - var(--corner-cut) + 1.5px),
    .5px calc(100% - var(--corner-cut)),
    0 calc(100% - var(--corner-cut) - 2px),
    0 calc(var(--corner-cut) + 2px),
    .5px var(--corner-cut),
    1.5px calc(var(--corner-cut) - 1.5px),
    calc(var(--corner-cut) - 1.5px) 1.5px,
    var(--corner-cut) .5px
  );
  border-radius:0;
  clip-path:var(--frame-clip);
}
.app-shell{--corner-cut:20px}
.channel,.master-strip{--corner-cut:12px}
.button,.transport-btn,.wave-wrap,.mini-wave,.master-display,.source-controls select,.transport select,.metrics>div,.toast{--corner-cut:6px}
.square-btn{--corner-cut:4px}
.channel:after,.master-strip:after,.faceplate-shine{border-radius:0;clip-path:var(--frame-clip)}
.button:focus-visible,.transport-btn:focus-visible,.square-btn:focus-visible,.wave-wrap:focus-visible,.source-controls select:focus-visible,.transport select:focus-visible{outline-offset:-4px}
@media(max-width:960px){.channel,.master-strip{--corner-cut:10px}}
@media(max-width:700px){.app-shell{--corner-cut:14px}.panel{--corner-cut:10px}}

/* A glass chamber: rear particles, waveform, then the heated core and near particles. */
.wave-wrap{isolation:isolate}
.wave-wrap .chamber-particles{position:absolute;inset:0;pointer-events:none}
.wave-wrap #chamberBack{z-index:1}
.wave-wrap #waveCanvas{z-index:2;pointer-events:none}
.wave-wrap #chamberFront{z-index:3}
.wave-wrap .playhead{z-index:4}
.wave-wrap .drop-hint{z-index:5;background:radial-gradient(ellipse at center,#07121bcc,transparent 65%)}
.wave-wrap:after{z-index:6}
.wave-wrap[data-chamber-state="processing"]{border-color:#b97b45;transition:border-color 1.2s}

.source-controls{flex-wrap:wrap}
.source-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto}
.demo-button{border-color:#497482;color:#b7e6ef;min-height:40px}
.demo-button:not(:disabled):hover{background:linear-gradient(#2b4553,#192b37);border-color:#78c4d4}
.demo-button[aria-busy="true"]{color:#a8bdc8}
@media(max-width:1100px){.source-actions{flex-basis:100%}.source-actions .button{flex:1;min-width:0}}
@media(max-width:420px){.source-actions{gap:8px}.source-actions .button{padding:10px 8px;white-space:normal;line-height:1.3}.source-actions .split-button{width:auto;margin-top:0}.source-actions .icon{display:none}}

/* Collider palette: cobalt metal, ion-blue illumination, violet trace accents. */
:root{--bg:#050c1d;--text:#e5f3ff;--muted:#99b6d0;--line:#245479;--cyan:#55ebff;--accent:#55ebff;--success:#7ef5db}
html{background:#040918}
body{
  background-color:#050c1d;
  background-image:
    radial-gradient(ellipse at 10% 5%,#007edc36,transparent 44%),
    radial-gradient(ellipse at 94% 38%,#6536c921,transparent 48%),
    linear-gradient(#2a8cbe0a 1px,transparent 1px),
    linear-gradient(90deg,#2a8cbe0a 1px,transparent 1px),
    linear-gradient(135deg,#07152b,#040917 72%);
  background-size:auto,auto,48px 48px,48px 48px,auto;
}
.app-shell{
  border-color:#277dac;
  background:radial-gradient(ellipse at 22% 0%,#154c7738,transparent 58%),linear-gradient(150deg,#0d233d,#071426 68%,#11142e);
  box-shadow:inset 0 1px 0 #96f4ff66,inset 0 0 38px #0878c012,0 30px 80px #0009;
}
.topbar{border-bottom-color:#2877a4;background:radial-gradient(ellipse at 40% -20%,#28609360,transparent 70%),linear-gradient(170deg,#102e4a,#0b1c34);box-shadow:inset 0 1px #73eaff24,0 4px 16px #0005}
.topbar:after{left:3%;width:94%;background:linear-gradient(90deg,transparent,#3bbdff8c 12%,#a0faffbd 38%,#3499ff6e 68%,#bd64fa82 91%,transparent);box-shadow:0 0 9px #28caff60}
.sonic-copy strong{color:#e4f6ff}
.brand-caption{color:#a1c2dd}
.brand-divider{background:linear-gradient(transparent,#62cefc99,transparent)}
.atomizer-copy h1{color:#f0fbff;text-shadow:0 0 15px #6bcfff4d,0 1px 0 #ffffff66}
.wordmark-caption{color:#7adeff}
.console-body{background-image:radial-gradient(#3c92b91a .7px,transparent .8px);background-size:24px 24px}
.panel{border-color:#265b82;background:linear-gradient(150deg,#102944,#0a1a31 65%,#0e1933);box-shadow:inset 0 1px #77dfff2b,inset 0 -1px #436cbd2b,0 5px 12px #0003}
.source-panel{background:radial-gradient(ellipse at 92% 20%,#005b9c2e,transparent 60%),linear-gradient(145deg,#102a46,#09192e 68%)}
.source-main{position:relative}
.source-main:before{content:"";position:absolute;top:0;left:8%;right:7%;height:1px;background:linear-gradient(90deg,transparent,#5ddeff99,transparent);pointer-events:none}
.panel-kicker{color:#bfe5ff}
.section-number{color:#66d4fa}
.file-name{color:#e5f4ff}
.source-format,.wave-ruler{color:#91b1cf}
.wave-wrap{
  border-color:#27779e;
  background-color:#040e21;
  background-image:radial-gradient(ellipse at center,#12446d54,transparent 74%),linear-gradient(#398fd522 1px,transparent 1px),linear-gradient(90deg,#398fd522 1px,transparent 1px);
  background-size:auto,100% 26px,50px 100%;
  box-shadow:inset 0 0 26px #001024,inset 0 0 0 1px #53dfff1c;
  transition:border-color 2s;
}
.wave-wrap:after{box-shadow:inset 0 0 28px #000916aa,inset 0 1px #90f5ff4d,inset 0 -1px #775eff45}
.wave-wrap[data-chamber-state="processing"]{border-color:#9cf6ff}
.wave-midline{background:#50cfff40}
.wave-wrap .drop-hint{background:radial-gradient(ellipse at center,#06142bd9,transparent 70%)}
.drop-hint .icon{color:#79e7ff;filter:drop-shadow(0 0 5px #32cfff45)}
.drop-hint strong{color:#d7f3ff}
.drop-hint span{color:#9fbbd3}
.reactor-panel{border-left-color:#2a7097;background:radial-gradient(ellipse at 50% 43%,#1163a53b,transparent 66%),linear-gradient(140deg,#091c35,#07152b 72%,#181b40);isolation:isolate}
.reactor-panel:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 44%,transparent 0 60px,#4adeff36 61px,transparent 63px,transparent 81px,#4c8ff82b 82px,transparent 84px),repeating-conic-gradient(from 0deg at 50% 44%,#2994dc0c 0deg 1deg,transparent 1deg 20deg)}
.reactor-topline{color:#8ac8ec}
.reactor-line{background:linear-gradient(90deg,#36d0fc88,#8c58ff66)}
.engine-copy strong{color:#a5c7e1}
.engine-copy>span{color:#a3e7ff}
.source-status{border-top-color:#245c82;background:#08182d;color:#a5c2dc}
.build-badge{color:#82a4c9}
.progress-track{background:#09142b;border:1px solid #204772}
.progress-fill{background:linear-gradient(90deg,#8f68ff,#38b7ff 48%,#9cfcff);box-shadow:0 0 8px #51ddff88}
.progress-steps .active,.progress-steps .done{color:#8aefff}
.metrics>div{border-color:#2c5686;background:#0b1b33}
.metrics span{color:#9fbada}
.mixer-heading>span{color:#9dbbd6}
.mixer-heading b{color:#587bac}
.channel,.master-strip{
  border-color:#3e779e;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent),transparent 91%),transparent 48%),linear-gradient(125deg,#1d3d5b 0%,#132d49 34%,#0b1e36 72%,#07152b 100%);
  box-shadow:inset 0 0 0 8px #10263f,inset 0 1px #a1e9ff66,0 9px 16px #0008;
}
.channel:after,.master-strip:after{border-color:#3e6989 #142e4b #051123 #245372;box-shadow:inset 0 1px #020b19,inset 1px 0 #041125,inset 0 -1px #93ddff42,inset -1px 0 #70beec33}
.channel:before,.master-strip:before{opacity:1;box-shadow:0 0 10px var(--accent)}
.faceplate-shine:before{background:linear-gradient(112deg,transparent 42%,#41cfff12 46%,#d7fbffd9 50%,#c188ff30 54%,transparent 58%)}
.strip-header strong{text-shadow:0 0 12px color-mix(in srgb,var(--accent),transparent 78%)}
.channel-number{color:#9db6d3}
.mini-wave{border-color:#2b557d;background:linear-gradient(#041025,#07172b);box-shadow:inset 0 2px 9px #000b,inset 0 -1px #438cef21}
.mini-wave:before{opacity:.24}
.stem-status,.pan-label{color:#a0b9d2}
.stem-status.ready{color:var(--accent)}
.pan-control>span{color:#aec8de}
.pan-dial{box-shadow:0 7px 8px #000b,0 2px 1px #000d,0 0 0 2px #040c1a,0 0 0 4px #3b6d91,0 0 12px color-mix(in srgb,var(--accent),transparent 84%),inset 0 0 0 1px #c4d2dc69}
.pan-dial:after{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--accent),transparent 36%))}
.pan-dial:focus-within{outline-color:#acfbff}
.button,.square-btn,.transport-btn{border-color:#3a7094;color:#d5edff;background:linear-gradient(#203e5d,#102841 58%,#0c1e35);box-shadow:inset 0 1px #8ac9ff30,inset 0 -1px #071326,0 3px 6px #0006}
.button:hover:not(:disabled),.square-btn:hover:not(:disabled),.transport-btn:hover:not(:disabled){border-color:#73dafa;background:linear-gradient(#2a5577,#143650);color:#f1fdff}
.button.primary{border-color:#b8faff;background:linear-gradient(#9cf7ff,#41d8ff 49%,#24b8ed);color:#05213b;box-shadow:inset 0 1px #e7ffff,0 0 22px #24caff36}
.button.primary:hover:not(:disabled){background:linear-gradient(#c8fdff,#68e5ff);border-color:#e1ffff;color:#05213b}
.demo-button{border-color:#8876ba;background:linear-gradient(#353660,#202844);color:#dfd9ff}
.demo-button:hover:not(:disabled){border-color:#c7acff;background:linear-gradient(#464572,#2c3353);color:#f4eaff}
.export-button{border-color:#478cb1;background:linear-gradient(#1d4460,#102a44);color:#adefff}
.square-btn.mute.active{background:linear-gradient(#9cf9ff,#29b9db);border-color:#bcfaff;color:#05213a}
.square-btn.solo.active{background:linear-gradient(#d8b2ff,#9775dd);border-color:#edcbff;color:#26164b;box-shadow:0 0 12px #af79ff45}
.db-scale,.fader-guides i{color:#9cb8d4}
.db-scale span:after{background:#487da4}
.fader-value{color:#d9efff}
.vertical-fader::-webkit-slider-thumb{border-color:#80b5d2;box-shadow:0 5px 5px #000a,inset 1px 0 #e1f6ff99,inset -1px 0 #a1d9f855,0 0 9px color-mix(in srgb,var(--accent),transparent 84%)}
.vertical-fader::-moz-range-thumb{border-color:#80b5d2;box-shadow:0 5px 5px #000a,0 0 9px color-mix(in srgb,var(--accent),transparent 84%)}
.meter-shell{border-color:#285879;background:#030b1b;box-shadow:0 0 0 2px #081427}
.strip-footer{border-color:#295a814f}
.empty-state{color:#99b3cc}
.master-strip{--accent:#abf5ff;background:radial-gradient(ellipse at 50% 0%,#47c5ff1e,transparent 50%),linear-gradient(130deg,#254d68,#142e4b 45%,#0a1e35)}
.master-strip:before{background:linear-gradient(90deg,#499cff,#b6ffff,#c993ff)}
.master-strip .strip-header strong,.master-strip .strip-header .icon{color:#d2f7ff}
.master-display{border-color:#2d81a3;background:repeating-linear-gradient(0deg,#3caaff06 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 100%,#16558b45,transparent 85%),#05142b;box-shadow:inset 0 2px 8px #0009,inset 0 -1px #6dedff2e}
.master-display>span,.master-display>div>span{color:#92c3df}
.master-display strong{color:#cefcff;text-shadow:0 0 10px #30d9ff44}
.compare.active{background:linear-gradient(#244d68,#213652);color:#d9faff;border-color:#8adaff}
.transport{border-color:#37779f;background:linear-gradient(170deg,#173750,#0b1e35 65%,#191e3e);box-shadow:inset 0 1px #72d7ff44,inset 0 -1px #8e70ff2e}
.transport-btn.play{border-color:#5fb7d1;background:linear-gradient(#255773,#11314e);color:#acf9ff}
.transport-btn.play.is-playing{border-color:#b4fcff;background:linear-gradient(#427fa0,#1e526d);box-shadow:inset 0 1px #b7faff66,0 0 16px #34dcff3b}
.time-readout{color:#d7f0ff}
.time-readout span{color:#8daece}
.seek{border-color:#396789;background:#050e20}
.transport-right label{color:#b0c8e0}
.source-controls select,.transport select{border-color:#39658a;background:linear-gradient(#1e3a57,#10243e);color:#dfedff;box-shadow:inset 0 1px #a1d7ff12}
.control-cluster label{color:#b0c8e0}
.local-footer{color:#8eaecb}
.local-footer b{color:#799cbe}
.toast{background:#0e2640;border-color:#4c93ba;color:#e0f5ff}

/* Indeterminate processing: RunPod reports stages, not a percentage. */
.progress-track{overflow:hidden}.progress-fill.indeterminate{animation:processing-slide 1.8s ease-in-out infinite}
@keyframes processing-slide{0%{transform:translateX(-105%)}100%{transform:translateX(390%)}}
#ownerConnect{margin-left:16px;color:#72eaff;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.progress-fill.indeterminate{animation:none;transform:translateX(90%)}}
