:root{--bg:#0a0a0c;--surface:#131317;--surface-2:#1a1a20;--surface-3:#222228;--border:#2a2a32;--border-light:#3a3a44;--accent:#e85d3a;--accent-hover:#f06a47;--accent-dim:#e85d3a4d;--cyan:#00d4ff;--green:#0f8;--yellow:#fc0;--red:#f35;--text:#e0e0e6;--text-dim:#7a7a86;--text-bright:#fff;--warning:#e8c43a;--radius:4px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;height:100dvh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}.topbar{background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:40px;padding:6px 16px;display:flex}.topbar-brand{align-items:center;gap:8px;display:flex}.topbar-tagline{color:var(--text-muted,#888);margin:0;font-size:.7rem;font-weight:400}.topbar-brand h1{letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(135deg, var(--accent), #f84);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1rem;font-weight:800}#create-btn{background:var(--accent);color:#fff;border-radius:var(--radius);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;border:none;padding:10px 16px;font-size:.7rem;font-weight:800;transition:background .2s}#create-btn:hover{background:var(--accent-hover)}#create-btn:disabled{opacity:.2;cursor:not-allowed}.main-split{grid-template-columns:1fr 1fr;height:calc(100dvh - 40px);display:grid}.browser-panel{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.panel-header{border-bottom:1px solid var(--border);background:var(--surface-2);flex-shrink:0;justify-content:space-between;align-items:center;height:40px;padding:8px 12px;display:flex}.panel-title{text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);font-size:.7rem;font-weight:700}.download-format{color:var(--text);font-variant-numeric:tabular-nums;font-size:.7rem;font-weight:700}.panel-actions{gap:6px;display:flex}.panel-btn{background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;align-items:center;gap:4px;padding:4px 10px;font-size:.65rem;font-weight:600;display:flex}.panel-btn:hover{background:var(--border)}.panel-btn.primary{background:var(--text);border-color:var(--text);color:var(--bg)}.panel-btn.primary:hover{background:var(--text-bright)}.track-table{flex:1;transition:background .15s;overflow-y:auto}.track-table.dragover{background:var(--accent-dim)}.track-table-header{height:36px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border);background:var(--surface);z-index:1;grid-template-columns:32px 1fr 80px 70px 32px;align-items:center;padding:4px 12px;font-size:.6rem;font-weight:700;display:grid;position:sticky;top:0}.track-table-header .sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.track-table-header .sortable:hover{color:var(--text)}#track-list{flex-direction:column;display:flex}.track-table-row{cursor:grab;border-bottom:1px solid #2a2a3280;grid-template-columns:32px 1fr 80px 70px 32px;align-items:center;padding:6px 12px;font-size:.75rem;transition:background .1s;display:grid}.track-table-row:active{cursor:grabbing}.track-table-row:hover{background:var(--surface-2)}.track-table-row.dragging{opacity:.4}.track-table-row.drop-target{background:var(--accent-dim)}.track-num{color:var(--text-dim);text-align:center;font-size:.65rem;font-weight:700}.track-title{white-space:nowrap;text-overflow:ellipsis;padding-right:8px;font-weight:600;overflow:hidden}.track-dur{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.7rem}.track-bpm-cell{font-variant-numeric:tabular-nums;color:var(--accent);font-size:.7rem;font-weight:700}.track-bpm-cell.detecting{color:var(--text-dim)}.track-remove-cell{text-align:center}.track-remove-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:2px;justify-content:center;align-items:center;width:20px;height:20px;padding:2px;font-size:.9rem;display:flex}.track-remove-btn:hover{color:var(--red);background:#ff33551a}.track-empty[hidden]{display:none}.track-empty{cursor:pointer;color:var(--text-dim);flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:32px 24px;font-size:.75rem;display:flex}.track-empty .steps{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.track-empty svg{color:var(--text-bright)}.track-empty strong{color:var(--text)}.max-tracks-msg{color:var(--warning);text-align:center;padding:6px 12px;font-size:.7rem}.output-panel{background:var(--surface);flex-direction:column;display:flex;overflow:hidden}.mix-settings{border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;align-items:center;gap:16px;height:36px;padding:8px 12px;display:flex}.mix-setting-item{align-items:center;gap:6px;display:flex}.mix-setting-item label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;font-size:.6rem;font-weight:700}.mix-setting-item input[type=range]{width:80px;accent-color:var(--accent)}.mix-setting-item .setting-val{color:var(--text);font-variant-numeric:tabular-nums;min-width:24px;font-size:.7rem;font-weight:700}#action-section{flex-direction:column;min-height:0;display:flex}#progress-container{text-align:center;padding:16px 12px}.progress-label{color:var(--text-dim);margin-bottom:8px;font-size:.75rem}progress{appearance:none;border-radius:3px;width:100%;height:6px;overflow:hidden}progress::-webkit-progress-bar{background:var(--surface-3);border-radius:3px}progress::-webkit-progress-value{background:var(--accent);border-radius:3px;transition:width .3s}progress::-moz-progress-bar{background:var(--accent);border-radius:3px}#result-container{flex-direction:column;flex:1;min-height:0;display:flex}#player{flex-direction:column;flex:1;gap:8px;min-height:0;padding:12px;display:flex}#waveform-container{cursor:pointer;border-radius:var(--radius);background:var(--bg);touch-action:none;flex-shrink:0;width:100%;height:100px;position:relative;overflow:hidden}#waveform-canvas{width:100%;height:100%;display:block}#playhead{pointer-events:none;z-index:2;background:#fff;width:2px;height:100%;position:absolute;top:0;left:0;box-shadow:0 0 6px #ffffff80}#player-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}#play-btn{background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;justify-content:center;align-items:center;width:36px;height:36px;transition:all .15s;display:flex}#play-btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-light)}#play-btn:disabled{opacity:.2;cursor:not-allowed}#player-time{color:var(--text);font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:700}#transition-legend{flex-wrap:wrap;gap:8px;font-size:.65rem;display:flex}.legend-item{color:var(--text-dim);align-items:center;gap:4px;display:flex}.legend-swatch{border-radius:2px;flex-shrink:0;width:8px;height:8px}#download-btn{background:var(--green);color:var(--bg);border-radius:var(--radius);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;white-space:nowrap;border:none;padding:10px 16px;font-size:.7rem;font-weight:800;transition:background .2s}#download-btn:hover{background:#3fa}#download-btn:disabled{opacity:.2;cursor:not-allowed}.output-actions{flex-shrink:0;gap:8px;padding:8px 12px;display:flex}#create-btn,#download-btn{flex:1}#memory-warning{color:var(--warning);text-align:center;flex-shrink:0;padding:6px 12px;font-size:.7rem}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:2px solid var(--border);border-top-color:var(--accent);vertical-align:middle;border-radius:50%;width:12px;height:12px;animation:.8s linear infinite spin;display:inline-block}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}@media (max-width:768px){body{overflow:auto}.main-split{grid-template-rows:auto auto;grid-template-columns:1fr;height:auto;min-height:calc(100dvh - 40px)}.browser-panel{border-right:none;border-bottom:1px solid var(--border);max-height:50vh}.output-panel{margin-top:24px}.panel-header{background:var(--border-light)}.output-panel{min-height:300px}.mix-settings{flex-wrap:wrap;height:auto}#transition-legend{display:none}}