:root{--bg-deep:#0a0a0f;--bg-panel:#16161f;--bg-panel-hover:#1c1c28;--bg-elevated:#1a1a24;--border-subtle:#252530;--border-focus:#3a3a4a;--cyan:#00d4aa;--cyan-dim:#00d4aa26;--cyan-glow:#00d4aa59;--magenta:#e040fb;--magenta-dim:#e040fb26;--magenta-glow:#e040fb59;--text-primary:#e0e0e0;--text-secondary:#888;--text-muted:#556;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-mono:ui-monospace, "SFMono-Regular", Consolas, monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--shadow-soft:0 4px 20px #0006;font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-deep);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{background:var(--bg-deep);color:var(--text-primary)}.app{flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.app-header{background:var(--bg-panel);border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;min-width:0;padding:16px 24px;display:flex}.header-left{flex-direction:column;gap:4px;display:flex}.app-title{letter-spacing:-.3px;color:var(--text-primary);margin:0;font-size:20px;font-weight:600}.title-accent{color:var(--cyan)}.app-subtitle{color:var(--text-secondary);margin:0;font-size:12px}.header-right{align-items:center;gap:16px;display:flex}.master-meter{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.meter-label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary);font-size:10px}.meter-bar{background:var(--bg-elevated);border-radius:2px;width:80px;height:4px;overflow:hidden}.meter-fill{background:linear-gradient(90deg, var(--cyan), var(--magenta));border-radius:2px;height:100%;transition:width .1s linear}.app-main{flex:1;min-height:0;display:flex;overflow:hidden}.main-left{flex-direction:column;flex:auto;gap:12px;min-width:0;padding:20px;display:flex;overflow:hidden}.main-right{scrollbar-gutter:stable;flex-direction:column;flex:0 0 clamp(280px,25vw,360px);gap:16px;min-width:280px;max-width:360px;min-height:0;padding:20px 20px 20px 0;display:flex;overflow:hidden auto}.app-footer{background:var(--bg-panel);border-top:1px solid var(--border-subtle);flex-direction:column;flex-shrink:0;gap:12px;padding:12px 24px;display:flex}@media (width<=900px){.app-main{flex-direction:column;overflow-y:auto}.main-left,.main-right{flex:none;width:100%;min-width:0;max-width:none;padding:16px}.main-right{padding-left:16px}}.file-uploader{border:2px dashed var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-panel);cursor:pointer;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;min-height:300px;transition:all .2s;display:flex}.file-uploader:hover,.file-uploader:focus-visible{border-color:var(--cyan);background:var(--cyan-dim);outline:none}.file-uploader:focus-visible{box-shadow:0 0 0 2px var(--cyan-glow)}.upload-icon{color:var(--text-secondary);transition:color .2s}.file-uploader:hover .upload-icon{color:var(--cyan)}.upload-text{color:var(--text-primary);margin:0;font-size:16px;font-weight:500}.upload-hint{color:var(--text-secondary);margin:0;font-size:13px}.upload-formats{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:4px 0 0;font-size:11px}.file-uploader.loading{cursor:wait;opacity:.7}.spinner{border:3px solid #00d4aa33;border-top-color:var(--cyan);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.visualizer-container{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;flex:auto;min-width:0;min-height:400px;display:flex;overflow:hidden}.visualizer-labels{border-top:1px solid var(--border-subtle);justify-content:center;gap:24px;padding:10px 16px;font-size:11px;display:flex}.viz-label{align-items:center;gap:6px;display:flex}.viz-label.cyan{color:var(--cyan)}.viz-label.magenta{color:var(--magenta)}.control-panel{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;flex:none;gap:16px;min-width:0;padding:20px;display:flex;overflow:visible}.panel-header{justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex;overflow:hidden}.panel-header h3{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);flex-shrink:0;margin:0;font-size:12px;font-weight:600}.source-badge{flex:0 auto;align-items:center;gap:6px;min-width:0;font-size:11px;font-weight:500;display:flex;overflow:hidden}.source-badge .source-dot{background:currentColor;border-radius:50%;flex-shrink:0;width:8px;height:8px}.source-name-text{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;overflow:hidden}.panel-section{flex-direction:column;gap:8px;min-width:0;display:flex;overflow:hidden}.panel-section.empty-state{text-align:center;color:var(--text-secondary);justify-content:center;align-items:center;padding:40px 20px}.panel-section.empty-state .hint{color:var(--text-muted);margin-top:4px;font-size:12px}.panel-section.is-disabled{opacity:.5;transition:opacity .15s}.panel-divider{background:var(--border-subtle);flex-shrink:0;height:1px;margin:4px 0}.param-row{justify-content:space-between;align-items:center;gap:8px;min-width:0;display:flex;overflow:hidden}.param-label{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:none;min-width:0;font-size:13px;font-weight:500;overflow:hidden}.param-value{font-family:var(--font-mono);text-align:right;flex:none;font-size:13px;font-weight:600}.param-value.cyan{color:var(--cyan)}.param-value.magenta{color:var(--magenta)}.param-hints{color:var(--text-muted);justify-content:space-between;margin-top:-2px;font-size:10px;display:flex}input[type=range]{appearance:none;background:var(--bg-elevated);cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px;transition:box-shadow .2s}input[type=range]:focus-visible{box-shadow:0 0 0 2px var(--border-focus)}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--bg-deep);border:2px solid var(--text-secondary);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:transform .15s,border-color .15s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{background:var(--bg-deep);border:2px solid var(--text-secondary);cursor:pointer;border-radius:50%;width:16px;height:16px}.slider-cyan::-webkit-slider-thumb{border-color:var(--cyan)}.slider-cyan::-moz-range-thumb{border-color:var(--cyan)}.slider-cyan::-webkit-slider-thumb:hover{box-shadow:0 0 8px var(--cyan-glow)}.slider-magenta::-webkit-slider-thumb{border-color:var(--magenta)}.slider-magenta::-moz-range-thumb{border-color:var(--magenta)}.slider-magenta::-webkit-slider-thumb:hover{box-shadow:0 0 8px var(--magenta-glow)}.auto-badge{background:var(--cyan-dim);color:var(--cyan);text-transform:uppercase;letter-spacing:.5px;vertical-align:middle;border-radius:4px;margin-left:6px;padding:1px 5px;font-size:9px;font-weight:700;display:inline-block}.mode-section{padding-bottom:4px}.mode-toggle{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);gap:4px;padding:3px;display:flex}.mode-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:1;padding:6px 10px;font-size:12px;font-weight:500;transition:all .15s}.mode-btn:hover:not(.active){background:var(--bg-panel-hover);color:var(--text-primary)}.mode-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.mode-btn.active{background:var(--cyan-dim);color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan-glow)}.param-select{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;outline:none;width:100%;min-width:0;max-width:140px;padding:4px 8px;font-size:12px}.param-select option{background:var(--bg-elevated);color:var(--text-primary)}.param-select:focus-visible{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan-glow)}.trajectory-buttons{gap:8px;margin-top:4px;display:flex}.btn-apply,.btn-clear{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-elevated);color:var(--text-primary);cursor:pointer;flex:1;padding:6px 12px;font-size:12px;font-weight:500;transition:all .15s}.btn-apply:hover{background:var(--cyan-dim);border-color:var(--cyan);color:var(--cyan)}.btn-clear:hover{color:#ff5252;background:#ff525226;border-color:#ff5252}.btn-apply:focus-visible,.btn-clear:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.wall-gains-section{flex-direction:column;gap:6px;min-width:0;margin-top:4px;display:flex;overflow:hidden}.wall-gain-row{grid-template-columns:48px minmax(0,1fr) 36px;align-items:center;gap:8px;min-width:0;display:grid;overflow:hidden}.wall-label{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;font-size:11px;overflow:hidden}.wall-slider{width:100%;min-width:0}.wall-value{font-family:var(--font-mono);color:var(--magenta);text-align:right;flex-shrink:0;min-width:36px;font-size:11px}.slider-timeline{background:var(--bg-elevated);height:4px}.slider-timeline::-webkit-slider-thumb{background:var(--text-primary);border:none;width:14px;height:14px}.slider-timeline::-moz-range-thumb{background:var(--text-primary);border:none;width:14px;height:14px}.playback-controls{flex-wrap:wrap;align-items:center;gap:16px;min-width:0;display:flex}.playback-buttons{flex-shrink:0;align-items:center;gap:8px;display:flex}.playback-btn{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-elevated);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;transition:all .15s;display:flex}.playback-btn:hover{background:var(--bg-panel-hover);color:var(--text-primary);border-color:var(--border-focus)}.playback-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.play-btn{background:var(--cyan-dim);width:44px;height:44px;color:var(--cyan);border-color:var(--cyan)}.play-btn:hover{background:var(--cyan);color:var(--bg-deep)}.timeline-area{flex:200px;align-items:center;gap:12px;min-width:0;display:flex;overflow:hidden}.time-display{font-family:var(--font-mono);color:var(--text-secondary);text-align:center;flex-shrink:0;min-width:38px;font-size:12px}.timeline-wrapper{flex-direction:column;gap:8px;display:flex}.timeline-track-info{justify-content:space-between;align-items:center;font-size:12px;display:flex}.track-name{color:var(--text-primary);align-items:center;gap:6px;font-weight:500;display:flex}.track-name.muted{color:var(--text-muted)}.track-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.track-time{font-family:var(--font-mono);color:var(--text-secondary);font-size:11px}.timeline-bar{background:var(--bg-elevated);border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border-subtle);height:24px;position:relative;overflow:hidden}.timeline-ticks{pointer-events:none;justify-content:space-between;align-items:center;padding:0 8px;display:flex;position:absolute;inset:0}.tick-mark{background:var(--border-subtle);width:1px;height:8px}.timeline-progress{background:linear-gradient(90deg, var(--cyan-dim), #00d4aa14);pointer-events:none;height:100%;transition:width 50ms linear;position:absolute;top:0;left:0}.timeline-playhead{background:var(--cyan);pointer-events:none;width:2px;box-shadow:0 0 6px var(--cyan-glow);z-index:4;transition:left 50ms linear;position:absolute;top:0;bottom:0;transform:translate(-50%)}.timeline-hover{background:var(--text-secondary);pointer-events:none;opacity:.6;width:2px;height:100%;position:absolute;top:0;transform:translate(-50%)}.hover-tooltip{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-mono);color:var(--text-primary);white-space:nowrap;pointer-events:none;padding:2px 8px;position:absolute;top:-26px;left:50%;transform:translate(-50%)}.source-tabs{align-items:center;gap:8px;display:flex}.tabs-list{flex-wrap:wrap;align-items:center;gap:6px;min-width:0;max-width:100%;display:flex;overflow:hidden}.source-tab{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;white-space:nowrap;flex:0 auto;align-items:center;gap:8px;min-width:0;max-width:220px;padding:8px 14px;font-size:13px;transition:all .15s;display:inline-flex;overflow:hidden}.source-tab:hover{background:var(--bg-panel-hover);color:var(--text-primary);border-color:var(--border-focus)}.source-tab.active{background:var(--bg-panel-hover);color:var(--text-primary);border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan-dim)}.source-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.source-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.source-name{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;max-width:160px;overflow:hidden}.source-remove{width:18px;height:18px;color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;margin-left:2px;font-size:14px;line-height:1;transition:all .15s;display:flex}.source-remove:hover{color:#ff5252;background:#ff525226}.add-tab{color:var(--text-muted);border-style:dashed;padding:8px 14px}.add-tab:hover{color:var(--cyan);border-color:var(--cyan);border-style:solid}.add-icon{font-size:16px;font-weight:300;line-height:1}.record-btn{color:#ff5252;background:#ff52521a;border-color:#ff525266}.record-btn:hover:not(:disabled){color:#ff6b6b;background:#ff525233;border-color:#ff5252}.record-btn:disabled{opacity:.35;cursor:not-allowed;color:var(--text-muted);border-color:var(--border-subtle);background:var(--bg-elevated)}.record-btn.recording{color:var(--bg-deep);background:#ff5252;border-color:#ff5252;animation:1.2s ease-in-out infinite record-pulse}@keyframes record-pulse{0%,to{box-shadow:0 0 #ff525280}50%{box-shadow:0 0 0 8px #ff525200}}.timeline-segment{opacity:.75;cursor:pointer;pointer-events:auto;border-radius:3px;min-width:4px;transition:opacity .15s,transform .15s;position:absolute;top:2px;bottom:2px}.timeline-segment:hover{opacity:1;z-index:2}.timeline-segment.selected{opacity:1;z-index:3;outline-offset:1px;outline:2px solid #fff}.recording-indicator{z-index:4;animation:.8s ease-in-out infinite recording-blink}@keyframes recording-blink{0%,to{opacity:1}50%{opacity:.4}}.segment-actions{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);align-items:center;gap:4px;padding:2px 4px;display:flex;position:absolute;top:-28px;right:0}.segment-action-btn{width:22px;height:22px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;transition:all .15s;display:flex}.segment-action-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.segment-action-btn.delete-btn:hover{color:#ff5252;background:#ff525226}.segment-action-btn.rerecord-btn:hover{background:var(--cyan-dim);color:var(--cyan)}.segment-handle{cursor:ew-resize;z-index:2;width:8px;position:absolute;top:0;bottom:0}.segment-handle-left{left:0}.segment-handle-right{right:0}.segment-handle:hover{background:#ffffff40}.timeline-segment.dragging{z-index:5;cursor:grabbing;box-shadow:0 0 0 1px #fff6}.segment-label{font-family:var(--font-mono);color:#000000b3;letter-spacing:.4px;white-space:nowrap;pointer-events:none;text-shadow:0 0 3px #ffffff40;font-size:10px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.timeline-help{color:var(--text-muted);letter-spacing:.3px;padding-top:2px;font-size:10px}.timeline-tracks-area{flex-direction:column;gap:0;display:flex;position:relative}.timeline-ruler{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm) var(--radius-sm) 0 0;cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:none;border-bottom:1px dashed #88888880;height:22px;transition:background .12s;position:relative;overflow:hidden}.timeline-ruler:hover,.timeline-ruler.scrubbing{background:var(--bg-panel-hover)}.timeline-ruler-ticks{pointer-events:none;justify-content:space-between;align-items:flex-end;padding:0 8px;display:flex;position:absolute;inset:0}.timeline-ruler-tick{background:var(--border-focus);opacity:.6;width:1px;height:6px}.timeline-ruler-tick.major{background:var(--text-muted);opacity:.95;height:11px}.timeline-layers{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:0 0 var(--radius-sm) var(--radius-sm);border-top:0;flex-direction:column;gap:4px;min-height:32px;margin-top:-1px;padding:4px 0;display:flex;position:relative}.timeline-row{height:28px;margin-bottom:0;display:block;position:relative}.timeline-row-label{font-family:var(--font-mono);color:var(--text-muted);text-align:center;letter-spacing:.5px;pointer-events:none;z-index:1;font-size:10px;font-weight:600;position:absolute;top:50%;left:4px;transform:translateY(-50%)}.timeline-row-bar{background:var(--bg-deep);border:1px solid var(--border-subtle);cursor:pointer;border-radius:3px;position:absolute;inset:0;overflow:hidden}.timeline-row-recording .timeline-row-bar{border-color:#ff525266}.timeline-clip{opacity:.85;cursor:grab;pointer-events:auto;background:var(--cyan);border-radius:3px;min-width:4px;transition:opacity .15s,transform .15s;position:absolute;top:2px;bottom:2px}.timeline-clip:hover{opacity:1;z-index:2}.timeline-clip.selected{opacity:1;z-index:3;outline-offset:1px;outline:2px solid #fff}.timeline-clip.live-recording{animation:.8s ease-in-out infinite recording-blink;background:#ff5252!important}.clip-label{font-family:var(--font-mono);color:#000000bf;letter-spacing:.4px;white-space:nowrap;pointer-events:none;text-shadow:0 0 3px #ffffff40;font-size:10px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.clip-actions{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);z-index:5;align-items:center;gap:4px;padding:2px 4px;display:flex;position:absolute;top:-28px;right:0}.clip-action-btn{width:22px;height:22px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;transition:all .15s;display:flex}.clip-action-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.clip-action-btn.delete-btn:hover{color:#ff5252;background:#ff525226}.clip-action-btn.rerecord-btn:hover{background:var(--cyan-dim);color:var(--cyan)}.timeline-row-playhead-tick{pointer-events:none;background:#00d4aa73;width:1px;height:100%;position:absolute;top:0;transform:translate(-50%)}.timeline-hover-inline{pointer-events:none;background:#88888873;width:1px;height:100%;position:absolute;top:0;transform:translate(-50%)}.timeline-toolbar{flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;display:flex}.timeline-tool{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:11px;font-family:var(--font-mono);cursor:pointer;letter-spacing:.3px;padding:4px 10px;transition:all .15s}.timeline-tool:hover:not(:disabled){background:var(--bg-panel-hover);color:var(--text-primary);border-color:var(--border-focus)}.timeline-tool:disabled{opacity:.4;cursor:not-allowed}.timeline-tool.danger:hover:not(:disabled){color:#ff5252;background:#ff525226;border-color:#ff5252}.timeline-empty{color:var(--text-muted);letter-spacing:.3px;text-align:center;padding:8px 12px;font-size:11px}.timeline-empty kbd{background:var(--bg-panel);border:1px solid var(--border-subtle);font-family:var(--font-mono);color:var(--text-secondary);border-radius:3px;margin:0 2px;padding:1px 6px;font-size:10px;display:inline-block}.layer-merge-btn{z-index:2;background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-muted);cursor:pointer;border-radius:3px;padding:1px 4px;font-size:10px;position:absolute;top:6px;right:4px}.layer-merge-btn:hover{background:var(--cyan-dim);color:var(--cyan);border-color:var(--cyan)}.timeline-help kbd{background:var(--bg-panel);border:1px solid var(--border-subtle);font-family:var(--font-mono);color:var(--text-secondary);border-radius:3px;margin:0 2px;padding:1px 6px;font-size:10px;display:inline-block}.export-panel{flex:none;min-width:0;margin-top:0;overflow:visible}.export-progress{align-items:center;gap:8px;margin-top:8px;display:flex}.progress-bar{background:var(--bg-elevated);border-radius:3px;flex:1;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--cyan), var(--cyan-dim));border-radius:3px;height:100%;transition:width .1s linear}.progress-text{font-family:var(--font-mono);color:var(--cyan);text-align:right;min-width:36px;font-size:12px}.export-error{border-radius:var(--radius-sm);color:#ff6b6b;background:#ff52521a;border:1px solid #ff52524d;margin-top:8px;padding:8px 12px;font-size:12px}.app,.app-main,.control-panel,.app-header,.app-footer,.brand-text{scrollbar-width:thin;scrollbar-color:var(--bg-elevated) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-focus)}::-webkit-scrollbar-corner{background:0 0}.brand-logo{flex:0 0 56px;width:56px;height:56px;display:block}.header-left{flex-direction:row;align-items:center;gap:14px;min-width:0;display:flex}.brand-text{flex-direction:column;gap:2px;min-width:0;display:flex}