*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--surface: #1a1d27;--border: #2e3248;--accent: #7c6af7;--accent2: #4fc3a1;--text: #e2e4f0;--muted: #8890aa;--danger: #f06a6a;--radius: 8px;--gap: 16px}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.5;min-height:100vh}#app{max-width:720px;margin:0 auto;padding:24px var(--gap);display:flex;flex-direction:column;gap:var(--gap)}header h1{font-size:28px;font-weight:700;letter-spacing:-.5px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header .subtitle{color:var(--muted);margin-top:4px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--gap)}.card h2{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:12px}.file-label{display:inline-block;cursor:pointer;padding:8px 16px;background:var(--accent);color:#fff;border-radius:var(--radius);font-weight:600;font-size:13px;transition:opacity .15s}.file-label:hover{opacity:.85}#file-input{display:none}.file-name{margin-top:8px;color:var(--muted);font-size:12px}.transport-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}button{padding:8px 18px;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;background:var(--border);color:var(--text);transition:background .15s}button:hover:not(:disabled){background:var(--accent);color:#fff}button:disabled{opacity:.4;cursor:not-allowed}#btn-play{background:var(--accent2);color:#0f1117}#btn-play:hover:not(:disabled){background:var(--accent);color:#fff}.toggle-label{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.ab-toggle{margin-left:auto;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius);font-weight:600}.ab-toggle:has(input:checked){border-color:var(--danger);color:var(--danger)}#controls-container{display:flex;flex-direction:column;gap:14px}.control-row{display:grid;grid-template-columns:160px 1fr 64px;align-items:center;gap:12px}.control-row label{font-size:13px;font-weight:500}.control-row .param-hint{font-size:11px;color:var(--muted);display:block;margin-top:1px}input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;transition:background .15s}input[type=range]:hover::-webkit-slider-thumb{background:var(--accent2)}.control-value{text-align:right;font-variant-numeric:tabular-nums;color:var(--accent2);font-size:13px;font-weight:600}footer{color:var(--muted);font-size:12px;text-align:center;padding-top:4px}#status{transition:color .3s}#status.error{color:var(--danger)}