feat: simplify web ui around waveform workflow

README.md

@@ -39,6 +39,7 @@ Implemented:
   - event log,
   - suggestions,
   - undo stack.
+- Minimal waveform-first UI inspired by dedicated sample-extractor hardware/software: compact top bar, large waveform workspace, right-side core controls, sample-card grid, and collapsible advanced panels.
 - Supervision UI:
   - selected-hit actions,
   - move hit to cluster,
@@ -153,7 +154,7 @@ curl http://127.0.0.1:7860/api/jobs
 | `sample_extractor.py` | Core DSP/sample extraction implementation |
 | `supervised_state.py` | Persistent semantic state, confidence, constraints, events, suggestions, force-onset, restore, undo |
 | `supervised_export.py` | Renders edited semantic state into supervised WAV/MIDI/reconstruction/ZIP artifacts |
-| `web/` | Custom no-build browser frontend with waveform, hit review, sample audition, add-onset mode, edited export, and supervision panel |
+| `web/` | Custom no-build browser frontend with the light waveform-first UI, sample-card grid, hit review, add-onset mode, edited export, and supervision panel |
 | `scripts/benchmark_subprocesses.py` | Synthetic benchmark runner for stage timings |
 | `scripts/test_interactive_supervision.py` | Smoke test for supervised state endpoints |
 | `scripts/test_supervised_export_and_force_onset.py` | Smoke test for force-onset, restore, suggestion diffs, and edited exports |

docs/FEATURES.md

@@ -86,3 +86,15 @@ Turn an input audio file into a practical drum sample pack: detected hits, group
 | Supervision | Cluster explanation | Implemented | Backend and UI show confidence reasons, label distribution, outliers, and constraints. |
 | Supervision | Edited artifact re-export | Implemented | Exports edited state into `supervised/` without mutating original batch artifacts. |
 | Supervision | Force-onset from waveform | Implemented | Add-onset mode turns waveform clicks into forced hit slices from `stem.wav`. |
+
+
+## Visual/UI experience
+
+Status: implemented.
+
+- Light, minimal, waveform-first interface matching the supplied reference direction.
+- Compact top bar with file selector, backend status, and primary extract action.
+- Main waveform card with colored onset markers and click-to-select / force-onset behavior.
+- Right-side core-control card for stem, sensitivity, cluster count, edited export, and fast modes.
+- Collapsible advanced controls keep detailed DSP/model parameters available without cluttering the main flow.
+- Extracted samples render as auditionable cards with waveform thumbnails; raw tables remain available in a collapsible detail panel.

docs/PROGRESS.md

@@ -187,3 +187,26 @@ Next recommended pass after Pass 5:
 2. Add cached feature-vector local reclustering around edited hits.
 3. Add edited-vs-original run comparison.
 4. Add browser-level UI tests and migrate the frontend to TypeScript/Vite once the UX stops shifting.
+
+
+## Pass 6: visual simplification toward the supplied reference UI
+
+Completed in this pass:
+
+1. Reworked `web/index.html` around a simpler first screen: top file/action bar, large waveform workspace, compact right-side extraction controls, sample cards, and lower utility panels.
+2. Replaced the previous dark dashboard styling with a light, minimal, card-based visual system closer to the supplied screenshot.
+3. Moved advanced extraction controls into a collapsible panel so the primary workflow exposes only stem, sensitivity, cluster count, extraction, export, and fast-mode decisions.
+4. Added representative sample cards with waveform thumbnails decoded from the sample WAV URLs in the browser.
+5. Updated waveform rendering to use grey filled waveforms plus colored lollipop onset markers similar to the reference image.
+6. Preserved all existing IDs/API wiring so supervised editing, SSE progress, run history, force-onset, and edited export continue to work.
+
+Validation performed in this pass:
+
+- `python3 -m py_compile app.py pipeline_runner.py sample_extractor.py supervised_state.py supervised_export.py scripts/*.py`
+- `node --check web/app.js`
+- HTML parser sanity check for `web/index.html`
+- `python3 scripts/test_api_job.py`
+
+Outcome:
+
+The app now looks and behaves more like a focused sample-extraction tool instead of a generic control dashboard while keeping the advanced review/supervision functionality available below the main workflow.

docs/REMAINING_WORK.md

@@ -72,3 +72,7 @@ Highest-priority remaining work now:
 3. Edited-vs-original comparison view.
 4. Batch restore / bulk operations for suppressed hits.
 5. Browser-level UI tests and TypeScript/Vite hardening.
+
+## UI status note
+
+The minimal waveform-first restyle is complete. Remaining UI work is now interaction depth and engineering hardening, not matching the supplied visual direction: browser tests, TypeScript/Vite migration, edited-vs-original comparison, and richer cluster merge/split/relabel workflows.

docs/TASKS.md

@@ -82,6 +82,12 @@ Last updated: 2026-05-12
 | Add exact suggestion diff previews | Done | Suggestions expose `diff`; UI has `Diff` preview. |
 | Add true local feature-neighborhood reclustering | Todo | Requires cached feature vectors and constraint-aware assignment. |
 
+## Visual simplification tasks
+
+| Task | Status | Notes |
+|---|---|---|
+| Restyle web UI to supplied minimal waveform-first reference | Done | Light theme, top-bar primary action, large waveform, compact right controls, sample-card grid, collapsible advanced/power panels. |
+
 ## Latest validation tasks
 
 - [x] `python3 -m py_compile app.py pipeline_runner.py sample_extractor.py supervised_state.py scripts/*.py`

docs/UI_REPLACEMENT.md

@@ -15,6 +15,21 @@ The active interface is a custom browser UI served from `web/` by the FastAPI ap
 5. Make `online_preview` obvious as the near-realtime clustering path.
 6. Keep the frontend deployable without a JavaScript build step until the interaction model stabilizes.
 
+
+## Pass 6 visual simplification
+
+The UI has been restyled to match the supplied minimal reference direction:
+
+- light native-feeling canvas instead of the previous dark dashboard;
+- compact top bar with file selector/status and one primary purple `Extract Samples` action;
+- large waveform-first workspace with colored lollipop onset markers;
+- right-side control card for the primary extraction decisions: stem, sensitivity, cluster count, edited export, fast modes;
+- advanced DSP/model parameters moved into a collapsible panel;
+- representative samples rendered as auditionable cards with waveform thumbnails instead of forcing the table to be the primary view;
+- pipeline, run history, supervision, and raw tables kept available as collapsible utility panels so power features remain reachable without dominating the first screen.
+
+This pass intentionally keeps the no-build frontend architecture. The goal was to simplify the product surface without destabilizing the backend/API or the supervised-editing flow.
+
 ## UI structure
 
 | Area | Purpose |
@@ -24,7 +39,10 @@ The active interface is a custom browser UI served from `web/` by the FastAPI ap
 | Controls panel | Stem, onset, clustering, MIDI, synthesis, and disk-cache parameters. |
 | Pipeline panel | Stage statuses, durations, and logs. |
 | Run history panel | Loads completed manifests from `.runs/`. |
-| Result panel | Summary, waveform/onsets, downloads, stem/reconstruction audio, sample table. |
+| Waveform workspace | Summary, waveform/onsets, stem/reconstruction audio, and downloads. |
+| Core control card | Stem, sensitivity, cluster count, fast modes, edited export, and collapsible advanced settings. |
+| Sample card grid | Primary representative-sample browsing and audition surface. |
+| Utility panels | Pipeline, run history, supervision, and raw detail tables. |
 
 ## Frontend implementation
 
@@ -65,11 +83,9 @@ Two modes are exposed:
 | `batch_quality` | Slower, final-quality clustering using all-pairs similarity plus agglomerative clustering. |
 | `online_preview` | Faster near-realtime-style clustering using prototype assignment. Best for quick iteration after bypassing Demucs. |
 
-## Why SSE progress with polling fallback instead of websockets/SSE
-
-Polling is the simplest robust option here because the current pipeline is CPU-heavy and mostly stage-based. The UI polls every 800 ms, which is enough to show stage transitions and logs without introducing websocket lifecycle complexity.
+## Why SSE progress with polling fallback instead of websockets
 
-Future improvement: use Server-Sent Events for lower-latency log streaming once the backend has a persistent job store.
+The active UI uses Server-Sent Events through `GET /api/jobs/{job_id}/events` for stage/log updates, with the older polling loop retained as a fallback. WebSockets are unnecessary here because the pipeline is stage-oriented and the frontend does not need bidirectional streaming while extraction runs.
 
 ## Remaining UI improvements
 

web/app.js

@@ -15,7 +15,21 @@ let lastResult = null;
 let lastSupervisionState = null;
 let activeJobId = null;
 let selectedHitIndex = null;
+let selectedSampleIndex = null;
 let forceOnsetMode = false;
+let audioContext = null;
+
+const palette = ["#9b72ef", "#4f7df2", "#42b8b4", "#ef9343", "#ea5ca9", "#6d9be8", "#8abc59", "#805fe6"];
+
+function clusterColor(index) {
+  const numeric = Number(String(index ?? 0).replace(/[^0-9-]/g, ""));
+  return palette[Math.abs(Number.isFinite(numeric) ? numeric : 0) % palette.length];
+}
+
+function getAudioContext() {
+  if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  return audioContext;
+}
 
 function esc(value) {
   return String(value ?? "").replace(/[&<>'"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;" }[c]));
@@ -146,7 +160,7 @@ function collectParams() {
     const el = $(field);
     if (!el) continue;
     if (el.type === "checkbox") params[field] = el.checked;
-    else if (el.type === "number") params[field] = Number(el.value);
+    else if (["number", "range"].includes(el.type)) params[field] = Number(el.value);
     else params[field] = el.value;
   }
   return params;
@@ -168,56 +182,87 @@ function drawWaveform(overview) {
   const ctx = canvas.getContext("2d");
   const ratio = window.devicePixelRatio || 1;
   const rect = canvas.getBoundingClientRect();
+  const cssHeight = Math.max(260, Math.floor(rect.height || 360));
   canvas.width = Math.max(1, Math.floor(rect.width * ratio));
-  canvas.height = Math.max(160, Math.floor(160 * ratio));
-  ctx.scale(ratio, ratio);
+  canvas.height = Math.max(cssHeight, Math.floor(cssHeight * ratio));
+  ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
   const w = rect.width;
-  const h = 160;
+  const h = cssHeight;
   ctx.clearRect(0, 0, w, h);
-  ctx.fillStyle = "rgba(139,211,255,.045)";
+
+  const gradient = ctx.createLinearGradient(0, 0, 0, h);
+  gradient.addColorStop(0, "#ffffff");
+  gradient.addColorStop(1, "#fbfbfc");
+  ctx.fillStyle = gradient;
   ctx.fillRect(0, 0, w, h);
+
   const env = overview?.envelope ?? [];
-  if (!env.length) return;
-  ctx.strokeStyle = "rgba(139,211,255,.92)";
-  ctx.lineWidth = 1.4;
+  const mid = Math.round(h * 0.56);
+  ctx.strokeStyle = "#d9dbe2";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(0, mid);
+  ctx.lineTo(w, mid);
+  ctx.stroke();
+
+  if (!env.length) {
+    ctx.fillStyle = "#9ca0aa";
+    ctx.font = "14px system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+    ctx.fillText("Waveform and onset markers appear after extraction.", 32, mid - 16);
+    return;
+  }
+
   ctx.beginPath();
-  const mid = h / 2;
   env.forEach((v, i) => {
     const x = (i / Math.max(1, env.length - 1)) * w;
-    const y = mid - Math.min(1, v) * (h * 0.42);
+    const y = mid - Math.min(1, v) * (h * 0.36);
     if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
   });
   for (let i = env.length - 1; i >= 0; i--) {
     const v = env[i];
     const x = (i / Math.max(1, env.length - 1)) * w;
-    const y = mid + Math.min(1, v) * (h * 0.42);
+    const y = mid + Math.min(1, v) * (h * 0.26);
     ctx.lineTo(x, y);
   }
   ctx.closePath();
-  ctx.fillStyle = "rgba(139,211,255,.28)";
+  ctx.fillStyle = "rgba(107, 113, 126, .58)";
   ctx.fill();
+  ctx.strokeStyle = "rgba(107, 113, 126, .28)";
   ctx.stroke();
 
   for (const onset of overview.onsets ?? []) {
     const x = (onset.time_sec / Math.max(overview.duration_sec, 0.001)) * w;
     const selected = Number(onset.index) === Number(selectedHitIndex);
-    ctx.strokeStyle = selected ? "rgba(255,255,255,.95)" : "rgba(200,165,255,.55)";
-    ctx.lineWidth = selected ? 2.4 : 1;
+    const stateHit = stateHitByIndex(onset.index);
+    const color = selected ? "#26272b" : clusterColor(stateHit?.cluster_id ?? onset.index);
+    ctx.strokeStyle = color;
+    ctx.globalAlpha = selected ? 1 : 0.5;
+    ctx.lineWidth = selected ? 2.2 : 1.2;
     ctx.beginPath();
-    ctx.moveTo(x, selected ? 3 : 10);
-    ctx.lineTo(x, selected ? h - 3 : h - 10);
+    ctx.moveTo(x, 64);
+    ctx.lineTo(x, mid + h * 0.24);
     ctx.stroke();
+    ctx.globalAlpha = 1;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(x, 64, selected ? 7 : 6, 0, Math.PI * 2);
+    ctx.fill();
   }
+
   for (const hit of lastSupervisionState?.hits ?? []) {
     if (hit.source !== "forced") continue;
     const x = (Number(hit.onset_sec) / Math.max(overview.duration_sec, 0.001)) * w;
     const selected = Number(hit.index) === Number(selectedHitIndex);
-    ctx.strokeStyle = selected ? "rgba(255,255,255,.98)" : "rgba(85,230,165,.9)";
-    ctx.lineWidth = selected ? 2.8 : 1.6;
+    ctx.strokeStyle = selected ? "#26272b" : "#64aa45";
+    ctx.lineWidth = selected ? 2.5 : 1.8;
     ctx.beginPath();
-    ctx.moveTo(x, 2);
-    ctx.lineTo(x, h - 2);
+    ctx.moveTo(x, 34);
+    ctx.lineTo(x, h - 42);
     ctx.stroke();
+    ctx.fillStyle = selected ? "#26272b" : "#64aa45";
+    ctx.beginPath();
+    ctx.arc(x, 34, selected ? 7 : 6, 0, Math.PI * 2);
+    ctx.fill();
   }
 }
 
@@ -269,9 +314,95 @@ function auditionSample(sample) {
   playAudio($("sampleAudio"), sample.url);
 }
 
+async function drawMiniWaveform(canvas, url, color = "#8b8f9a") {
+  const ctx = canvas.getContext("2d");
+  const ratio = window.devicePixelRatio || 1;
+  const rect = canvas.getBoundingClientRect();
+  const w = Math.max(1, Math.floor(rect.width));
+  const h = Math.max(80, Math.floor(rect.height || 130));
+  canvas.width = w * ratio;
+  canvas.height = h * ratio;
+  ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+  ctx.clearRect(0, 0, w, h);
+  ctx.fillStyle = "#fff";
+  ctx.fillRect(0, 0, w, h);
+  ctx.strokeStyle = "#e0e2e7";
+  ctx.beginPath();
+  ctx.moveTo(12, h / 2);
+  ctx.lineTo(w - 12, h / 2);
+  ctx.stroke();
+
+  try {
+    if (!url) throw new Error("missing sample URL");
+    const response = await fetch(url);
+    const buffer = await response.arrayBuffer();
+    const decoded = await getAudioContext().decodeAudioData(buffer.slice(0));
+    const data = decoded.getChannelData(0);
+    const points = Math.min(w - 24, 260);
+    ctx.beginPath();
+    for (let i = 0; i < points; i++) {
+      const start = Math.floor((i / points) * data.length);
+      const end = Math.max(start + 1, Math.floor(((i + 1) / points) * data.length));
+      let peak = 0;
+      for (let j = start; j < end; j++) peak = Math.max(peak, Math.abs(data[j] || 0));
+      const x = 12 + (i / Math.max(1, points - 1)) * (w - 24);
+      const y1 = h / 2 - peak * h * 0.38;
+      const y2 = h / 2 + peak * h * 0.38;
+      ctx.moveTo(x, y1);
+      ctx.lineTo(x, y2);
+    }
+    ctx.strokeStyle = "rgba(113, 119, 132, .72)";
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  } catch {
+    // Deterministic fallback thumbnail: still shows the transient-card affordance if WebAudio cannot decode yet.
+    ctx.beginPath();
+    const points = 90;
+    for (let i = 0; i < points; i++) {
+      const t = i / Math.max(1, points - 1);
+      const amp = Math.exp(-t * 6) * (0.72 + 0.25 * Math.sin(i * 1.7));
+      const x = 14 + t * (w - 28);
+      ctx.moveTo(x, h / 2 - amp * h * 0.32);
+      ctx.lineTo(x, h / 2 + amp * h * 0.32);
+    }
+    ctx.strokeStyle = "rgba(113, 119, 132, .58)";
+    ctx.stroke();
+  }
+}
+
 function renderSamples(result) {
+  const samples = result.samples ?? [];
+  if ($("sampleCountLabel")) $("sampleCountLabel").textContent = `(${samples.length})`;
+
+  const grid = $("samplesGrid");
+  if (grid) {
+    grid.innerHTML = samples.map((sample, i) => {
+      const color = clusterColor(sample.cluster_id ?? i);
+      return `
+        <button class="sample-card ${i === selectedSampleIndex ? "selected" : ""}" type="button" data-sample-audition="${i}" style="border-top-color: ${esc(color)}">
+          <canvas class="sample-wave" data-wave-url="${esc(sample.url)}" data-wave-color="${esc(color)}"></canvas>
+          <span class="sample-card-footer">
+            <span class="play-dot">▶</span>
+            <span><strong class="sample-name">${esc(sample.label || `Sample ${i + 1}`)}</strong><small class="sample-meta">${esc(sample.classification)} · ${esc(sample.hits)} hits</small></span>
+          </span>
+        </button>
+      `;
+    }).join("") || `<p class="empty">Run extraction to populate sample cards.</p>`;
+    for (const button of grid.querySelectorAll("[data-sample-audition]")) {
+      button.addEventListener("click", () => {
+        selectedSampleIndex = Number(button.dataset.sampleAudition);
+        const sample = samples[selectedSampleIndex];
+        auditionSample(sample);
+        renderSamples(result);
+      });
+    }
+    for (const canvas of grid.querySelectorAll(".sample-wave")) {
+      drawMiniWaveform(canvas, canvas.dataset.waveUrl, canvas.dataset.waveColor);
+    }
+  }
+
   const tbody = $("samplesTable").querySelector("tbody");
-  tbody.innerHTML = (result.samples ?? []).map((sample, i) => `
+  tbody.innerHTML = samples.map((sample, i) => `
     <tr data-sample-index="${i}">
       <td><button class="mini-button" type="button" data-sample-audition="${i}">Audition</button></td>
       <td>${esc(sample.label)}</td>
@@ -286,8 +417,10 @@ function renderSamples(result) {
   for (const button of tbody.querySelectorAll("[data-sample-audition]")) {
     button.addEventListener("click", (event) => {
       event.stopPropagation();
-      const sample = result.samples[Number(button.dataset.sampleAudition)];
+      selectedSampleIndex = Number(button.dataset.sampleAudition);
+      const sample = samples[selectedSampleIndex];
       auditionSample(sample);
+      renderSamples(result);
     });
   }
 }
@@ -529,6 +662,7 @@ function renderResult(job) {
   if (!result) return;
   activeJobId = job.id;
   lastResult = result;
+  if (!(result.samples ?? [])[selectedSampleIndex]) selectedSampleIndex = null;
   if (!(result.hits ?? []).some((hit) => Number(hit.index) === Number(selectedHitIndex))) {
     selectedHitIndex = (result.hits ?? [])[0]?.index ?? null;
   }
@@ -669,9 +803,12 @@ async function runExtraction() {
 
 function setFile(file) {
   selectedFile = file;
-  $("dropTitle").textContent = file ? file.name : "Drop audio here or click to browse";
-  $("dropMeta").textContent = file ? `${(file.size / 1024 / 1024).toFixed(2)} MB · ${file.type || "audio"}` : "No file selected";
+  $("dropTitle").textContent = file ? file.name : "Choose an audio file";
+  $("dropMeta").textContent = file ? `${(file.size / 1024 / 1024).toFixed(2)} MB · ${file.type || "audio"}` : "WAV, MP3, FLAC, AIFF, OGG, M4A";
   $("runButton").disabled = !file;
+  if (file && (!lastResult || $("resultSummary").textContent.startsWith("Load audio"))) {
+    $("resultSummary").textContent = `${file.name} is ready. Extract samples to see waveform markers and sample cards.`;
+  }
   if (file) {
     $("sourcePreview").hidden = false;
     $("sourcePreview").src = URL.createObjectURL(file);
@@ -703,6 +840,7 @@ async function boot() {
     config = await api("/api/config");
     populateConfig();
     await refreshHistory();
+    drawWaveform({ envelope: [], onsets: [], duration_sec: 0 });
     setHealth(true, "Ready", "Backend online");
   } catch (error) {
     setHealth(false, "Offline", error.message);
@@ -727,6 +865,19 @@ $("usePreviewButton").addEventListener("click", () => {
   $("mel_threshold").value = 0.62;
   $("ncc_threshold").value = 0.72;
 });
+
+for (const [id, delta] of [["clusterMinusButton", -1], ["clusterPlusButton", 1]]) {
+  const button = $(id);
+  if (button) {
+    button.addEventListener("click", () => {
+      const input = $("target_max");
+      const current = Number(input.value || 0);
+      const min = Number(input.min || 0);
+      const max = Number(input.max || 256);
+      input.value = Math.max(min, Math.min(max, current + delta));
+    });
+  }
+}
 $("refreshHistoryButton").addEventListener("click", refreshHistory);
 $("clearCacheButton").addEventListener("click", async () => {
   try {

web/index.html

@@ -8,234 +8,244 @@
   </head>
   <body>
     <div class="shell">
-      <header class="hero">
-        <div>
-          <p class="eyebrow">Sample extraction workstation</p>
-          <h1>Extract reusable drum samples from one audio file.</h1>
-          <p class="lede">Upload a track, isolate or bypass the stem, detect hits, cluster similar transients, export WAVs, MIDI, reconstruction audio, and a complete sample pack.</p>
-        </div>
-        <div class="hero-card" aria-live="polite">
-          <span class="status-dot" id="healthDot"></span>
-          <div>
-            <strong id="healthText">Connecting</strong>
-            <span id="healthSubtext">FastAPI backend</span>
+      <header class="topbar">
+        <label class="file-chip" id="dropzone" title="Drop audio here or click to browse">
+          <input id="fileInput" type="file" accept="audio/*,.wav,.mp3,.flac,.aiff,.ogg,.m4a" />
+          <span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>
+          <span class="file-copy">
+            <strong id="dropTitle">Choose an audio file</strong>
+            <small id="dropMeta">WAV, MP3, FLAC, AIFF, OGG, M4A</small>
+          </span>
+        </label>
+        <div class="topbar-actions">
+          <div class="backend-pill" aria-live="polite">
+            <span class="status-dot" id="healthDot"></span>
+            <span><strong id="healthText">Connecting</strong><small id="healthSubtext">FastAPI backend</small></span>
           </div>
+          <button id="runButton" class="primary-button" type="button" disabled><span>✦</span> Extract Samples</button>
         </div>
       </header>
 
-      <main class="workspace">
-        <section class="panel ingest-panel">
-          <div class="panel-heading">
+      <main class="app-layout">
+        <section class="wave-card panel">
+          <div class="wave-header">
             <div>
-              <h2>1. Source</h2>
-              <p>Drop a WAV, MP3, FLAC, AIFF, or OGG file. Use <code>all</code> stem for fast iteration without Demucs.</p>
+              <p class="eyebrow">Sample extraction workstation</p>
+              <h1 id="resultSummary">Load audio, tune sensitivity, extract clean drum hits.</h1>
             </div>
+            <span class="job-pill" id="jobPill">idle</span>
           </div>
-          <label class="dropzone" id="dropzone">
-            <input id="fileInput" type="file" accept="audio/*,.wav,.mp3,.flac,.aiff,.ogg,.m4a" />
-            <span class="drop-icon">↥</span>
-            <strong id="dropTitle">Drop audio here or click to browse</strong>
-            <small id="dropMeta">No file selected</small>
-          </label>
-          <audio id="sourcePreview" controls hidden></audio>
-        </section>
-
-        <section class="panel controls-panel">
-          <div class="panel-heading">
-            <div>
-              <h2>2. Extraction controls</h2>
-              <p>Batch quality gives the best final grouping. Online preview is the near-realtime clustering path.</p>
-            </div>
-            <button id="clearCacheButton" class="ghost-button" type="button">Clear cache</button>
+          <canvas id="waveform" class="waveform" height="360"></canvas>
+          <div class="transport-row">
+            <audio id="sourcePreview" controls hidden></audio>
+            <label class="transport-audio">Stem audio<audio id="stemAudio" controls></audio></label>
+            <label class="transport-audio">Reconstruction<audio id="reconAudio" controls></audio></label>
           </div>
+          <div class="downloads" id="downloads"></div>
+        </section>
 
-          <div class="control-grid">
+        <aside class="control-card panel">
+          <div class="control-group">
             <label>Stem
               <select id="stem"></select>
             </label>
-            <label>Demucs model
-              <select id="demucs_model"></select>
-            </label>
-            <label>Clustering mode
-              <select id="clustering_mode">
-                <option value="batch_quality">batch quality</option>
-                <option value="online_preview">online preview</option>
-              </select>
-            </label>
-            <label>Shifts
-              <input id="demucs_shifts" type="number" min="0" max="8" step="1" />
-            </label>
-            <label>Overlap
-              <input id="demucs_overlap" type="number" min="0" max="0.9" step="0.05" />
-            </label>
-            <label>Onset mode
-              <select id="onset_mode">
-                <option value="auto">auto / multiband</option>
-                <option value="percussive">percussive</option>
-                <option value="harmonic">harmonic</option>
-                <option value="broadband">broadband</option>
-              </select>
-            </label>
-            <label>Onset delta
-              <input id="onset_delta" type="number" min="0.001" max="1" step="0.01" />
-            </label>
-            <label>Energy threshold dB
-              <input id="energy_threshold_db" type="number" min="-100" max="0" step="1" />
-            </label>
-            <label>Minimum gap seconds
-              <input id="min_gap" type="number" min="0.001" max="1" step="0.005" />
-            </label>
-            <label>Pre-pad seconds
-              <input id="pre_pad" type="number" min="0" max="0.25" step="0.001" />
-            </label>
-            <label>Min duration seconds
-              <input id="min_dur" type="number" min="0.001" max="10" step="0.005" />
-            </label>
-            <label>Max duration seconds
-              <input id="max_dur" type="number" min="0.01" max="10" step="0.1" />
-            </label>
-            <label>NCC threshold
-              <input id="ncc_threshold" type="number" min="0" max="1" step="0.01" />
-            </label>
-            <label>Attack window ms
-              <input id="attack_ms" type="number" min="1" max="250" step="1" />
-            </label>
-            <label>Mel prefilter
-              <input id="mel_threshold" type="number" min="0" max="1" step="0.01" />
-            </label>
-            <label>Linkage
-              <select id="linkage">
-                <option value="average">average</option>
-                <option value="complete">complete</option>
-                <option value="single">single</option>
-              </select>
-            </label>
-            <label>Target min clusters
-              <input id="target_min" type="number" min="0" max="256" step="1" />
-            </label>
-            <label>Target max clusters
-              <input id="target_max" type="number" min="0" max="256" step="1" />
-            </label>
-            <label>MIDI grid
-              <select id="subdivision">
-                <option value="8">8th</option>
-                <option value="16">16th</option>
-                <option value="32">32nd</option>
-                <option value="64">64th</option>
-              </select>
-            </label>
           </div>
 
-          <div class="toggles">
-            <label><input id="synthesize" type="checkbox" /> synthesize alternates</label>
-            <label><input id="quantize_midi" type="checkbox" /> quantize MIDI</label>
-            <label><input id="use_disk_cache" type="checkbox" /> disk cache stems/source loads</label>
+          <div class="control-group sensitivity-group">
+            <label for="onset_delta">Sensitivity</label>
+            <input id="onset_delta" type="range" min="0.01" max="0.35" step="0.005" />
+            <div class="range-caption"><span>Low</span><span>High</span></div>
+          </div>
+
+          <div class="control-group">
+            <label>Cluster Count</label>
+            <div class="stepper">
+              <button id="clusterMinusButton" type="button" class="step-button">−</button>
+              <input id="target_max" type="number" min="0" max="256" step="1" />
+              <button id="clusterPlusButton" type="button" class="step-button">+</button>
+            </div>
           </div>
 
-          <div class="actions">
-            <button id="runButton" class="primary-button" type="button" disabled>Extract samples</button>
-            <button id="useFastButton" class="secondary-button" type="button">Use fast full-mix mode</button>
-            <button id="usePreviewButton" class="secondary-button" type="button">Use online preview mode</button>
+          <div class="primary-actions-stack">
+            <button id="exportStateButton" class="export-button" type="button" disabled>⇧ Export edited pack</button>
+            <button id="usePreviewButton" class="ghost-button" type="button">Online preview mode</button>
+            <button id="useFastButton" class="ghost-button" type="button">Fast full-mix mode</button>
           </div>
-        </section>
 
-        <section class="panel progress-panel">
-          <div class="panel-heading">
-            <div>
-              <h2>3. Pipeline</h2>
-              <p>Stage timings are captured per run. Stem separation is deliberately isolated because it dominates offline extraction.</p>
+          <details class="advanced-controls">
+            <summary>Advanced extraction settings</summary>
+            <div class="control-grid compact-controls">
+              <label>Demucs model
+                <select id="demucs_model"></select>
+              </label>
+              <label>Clustering mode
+                <select id="clustering_mode">
+                  <option value="batch_quality">batch quality</option>
+                  <option value="online_preview">online preview</option>
+                </select>
+              </label>
+              <label>Shifts
+                <input id="demucs_shifts" type="number" min="0" max="8" step="1" />
+              </label>
+              <label>Overlap
+                <input id="demucs_overlap" type="number" min="0" max="0.9" step="0.05" />
+              </label>
+              <label>Onset mode
+                <select id="onset_mode">
+                  <option value="auto">auto / multiband</option>
+                  <option value="percussive">percussive</option>
+                  <option value="harmonic">harmonic</option>
+                  <option value="broadband">broadband</option>
+                </select>
+              </label>
+              <label>Energy threshold dB
+                <input id="energy_threshold_db" type="number" min="-100" max="0" step="1" />
+              </label>
+              <label>Minimum gap seconds
+                <input id="min_gap" type="number" min="0.001" max="1" step="0.005" />
+              </label>
+              <label>Pre-pad seconds
+                <input id="pre_pad" type="number" min="0" max="0.25" step="0.001" />
+              </label>
+              <label>Min duration seconds
+                <input id="min_dur" type="number" min="0.001" max="10" step="0.005" />
+              </label>
+              <label>Max duration seconds
+                <input id="max_dur" type="number" min="0.01" max="10" step="0.1" />
+              </label>
+              <label>NCC threshold
+                <input id="ncc_threshold" type="number" min="0" max="1" step="0.01" />
+              </label>
+              <label>Attack window ms
+                <input id="attack_ms" type="number" min="1" max="250" step="1" />
+              </label>
+              <label>Mel prefilter
+                <input id="mel_threshold" type="number" min="0" max="1" step="0.01" />
+              </label>
+              <label>Linkage
+                <select id="linkage">
+                  <option value="average">average</option>
+                  <option value="complete">complete</option>
+                  <option value="single">single</option>
+                </select>
+              </label>
+              <label>Target min clusters
+                <input id="target_min" type="number" min="0" max="256" step="1" />
+              </label>
+              <label>MIDI grid
+                <select id="subdivision">
+                  <option value="8">8th</option>
+                  <option value="16">16th</option>
+                  <option value="32">32nd</option>
+                  <option value="64">64th</option>
+                </select>
+              </label>
             </div>
-            <span class="job-pill" id="jobPill">idle</span>
+            <div class="toggles">
+              <label><input id="synthesize" type="checkbox" /> synthesize alternates</label>
+              <label><input id="quantize_midi" type="checkbox" /> quantize MIDI</label>
+              <label><input id="use_disk_cache" type="checkbox" /> disk cache stems/source loads</label>
+            </div>
+            <button id="clearCacheButton" class="ghost-button full-width" type="button">Clear cache</button>
+          </details>
+        </aside>
+
+        <section class="samples-section">
+          <div class="section-heading">
+            <h2>Extracted Samples <span id="sampleCountLabel">(0)</span></h2>
+            <p>Representative samples appear as auditionable cards. Use the supervision tools below for deeper correction.</p>
           </div>
+          <div id="samplesGrid" class="sample-grid"></div>
+        </section>
+
+        <section class="review-strip">
+          <article class="review-card">
+            <strong>Selected hit</strong>
+            <span id="selectedHitMeta">Click an onset marker or hit row to audition the detected slice.</span>
+            <audio id="hitAudio" controls></audio>
+          </article>
+          <article class="review-card">
+            <strong>Selected sample</strong>
+            <span id="selectedSampleMeta">Click a sample card to hear the representative sample.</span>
+            <audio id="sampleAudio" controls></audio>
+          </article>
+        </section>
+
+        <details class="panel progress-panel utility-panel" open>
+          <summary>
+            <span>Pipeline</span>
+            <small>Stage timings, logs, and streaming job progress</small>
+          </summary>
           <div id="stageList" class="stage-list"></div>
           <pre id="logs" class="logs" aria-live="polite"></pre>
-        </section>
+        </details>
 
-        <section class="panel history-panel">
-          <div class="panel-heading">
-            <div>
-              <h2>Run history</h2>
-              <p>Completed manifests under <code>.runs/</code> are indexed automatically. Load a run to compare timings and artifacts.</p>
-            </div>
-            <button id="refreshHistoryButton" class="ghost-button" type="button">Refresh</button>
-          </div>
+        <details class="panel history-panel utility-panel">
+          <summary>
+            <span>Run history</span>
+            <small>Completed manifests under .runs/</small>
+          </summary>
+          <button id="refreshHistoryButton" class="ghost-button" type="button">Refresh history</button>
           <div id="historyList" class="history-list"></div>
-        </section>
+        </details>
 
-        <section class="panel result-panel">
-          <div class="panel-heading">
+        <details class="panel supervision-panel utility-panel">
+          <summary>
+            <span>Interactive supervision</span>
+            <small>Move, suppress, restore, force-onset, explain, and export edited packs</small>
+          </summary>
+          <div class="supervision-header">
             <div>
-              <h2>4. Results</h2>
-              <p id="resultSummary">Run extraction to populate samples, timing, MIDI, reconstruction, and downloads.</p>
+              <h3>Semantic edit state</h3>
+              <p class="subtle">Moves, locks, suppressions, favorites, and accepted suggestions are saved as replayable semantic state next to the run manifest.</p>
+            </div>
+            <div class="supervision-actions">
+              <button id="refreshStateButton" class="ghost-button" type="button">Refresh state</button>
+              <button id="forceOnsetButton" class="ghost-button" type="button" disabled>Add-onset mode off</button>
+              <button id="undoButton" class="ghost-button" type="button" disabled>Undo edit</button>
             </div>
           </div>
-          <canvas id="waveform" class="waveform" height="160"></canvas>
-          <div class="downloads" id="downloads"></div>
-          <div class="audio-grid">
-            <label>Stem audio<audio id="stemAudio" controls></audio></label>
-            <label>Reconstruction<audio id="reconAudio" controls></audio></label>
+          <div id="supervisionSummary" class="state-summary">No interactive state loaded.</div>
+          <div id="editedDownloads" class="downloads edited-downloads"></div>
+          <div class="supervision-tools">
+            <label>Target cluster
+              <select id="targetClusterSelect"></select>
+            </label>
+            <button id="moveHitButton" class="secondary-button" type="button" disabled>Move selected hit</button>
+            <button id="pullHitButton" class="secondary-button" type="button" disabled>Pull into new cluster</button>
+            <button id="acceptHitButton" class="secondary-button" type="button" disabled>Accept hit</button>
+            <button id="favoriteHitButton" class="secondary-button" type="button" disabled>Favorite as representative</button>
+            <button id="suppressHitButton" class="secondary-button danger-button" type="button" disabled>Suppress as bleed</button>
+            <button id="restoreHitButton" class="secondary-button" type="button" disabled>Restore selected hit</button>
+            <button id="lockClusterButton" class="secondary-button" type="button" disabled>Lock target cluster</button>
+            <button id="explainClusterButton" class="secondary-button" type="button" disabled>Explain target cluster</button>
           </div>
-          <div class="review-grid">
-            <article class="review-card">
-              <strong>Selected hit</strong>
-              <span id="selectedHitMeta">Click an onset marker or hit row to audition the detected slice.</span>
-              <audio id="hitAudio" controls></audio>
+          <div class="supervision-grid">
+            <article>
+              <h4>Outlier-first review queue</h4>
+              <div id="reviewQueue" class="compact-list"></div>
             </article>
-            <article class="review-card">
-              <strong>Selected sample</strong>
-              <span id="selectedSampleMeta">Click Audition in the sample table to hear the representative sample.</span>
-              <audio id="sampleAudio" controls></audio>
+            <article>
+              <h4>Cluster board</h4>
+              <div id="clusterBoard" class="compact-list"></div>
+            </article>
+            <article>
+              <h4>Suggestion inbox</h4>
+              <div id="suggestionInbox" class="compact-list"></div>
+            </article>
+            <article>
+              <h4>Constraint / event log</h4>
+              <div id="stateLog" class="compact-list"></div>
             </article>
           </div>
+          <pre id="clusterExplanation" class="explanation empty">Select a cluster and click Explain.</pre>
+        </details>
 
-          <section class="supervision-panel" aria-live="polite">
-            <div class="supervision-header">
-              <div>
-                <h3>Interactive supervision</h3>
-                <p class="subtle">Moves, locks, suppressions, favorites, and accepted suggestions are saved as replayable semantic state next to the run manifest.</p>
-              </div>
-              <div class="supervision-actions">
-                <button id="refreshStateButton" class="ghost-button" type="button">Refresh state</button>
-                <button id="exportStateButton" class="ghost-button" type="button" disabled>Export edited pack</button>
-                <button id="forceOnsetButton" class="ghost-button" type="button" disabled>Add-onset mode off</button>
-                <button id="undoButton" class="ghost-button" type="button" disabled>Undo edit</button>
-              </div>
-            </div>
-            <div id="supervisionSummary" class="state-summary">No interactive state loaded.</div>
-            <div id="editedDownloads" class="downloads edited-downloads"></div>
-            <div class="supervision-tools">
-              <label>Target cluster
-                <select id="targetClusterSelect"></select>
-              </label>
-              <button id="moveHitButton" class="secondary-button" type="button" disabled>Move selected hit</button>
-              <button id="pullHitButton" class="secondary-button" type="button" disabled>Pull into new cluster</button>
-              <button id="acceptHitButton" class="secondary-button" type="button" disabled>Accept hit</button>
-              <button id="favoriteHitButton" class="secondary-button" type="button" disabled>Favorite as representative</button>
-              <button id="suppressHitButton" class="secondary-button danger-button" type="button" disabled>Suppress as bleed</button>
-              <button id="restoreHitButton" class="secondary-button" type="button" disabled>Restore selected hit</button>
-              <button id="lockClusterButton" class="secondary-button" type="button" disabled>Lock target cluster</button>
-              <button id="explainClusterButton" class="secondary-button" type="button" disabled>Explain target cluster</button>
-            </div>
-            <div class="supervision-grid">
-              <article>
-                <h4>Outlier-first review queue</h4>
-                <div id="reviewQueue" class="compact-list"></div>
-              </article>
-              <article>
-                <h4>Cluster board</h4>
-                <div id="clusterBoard" class="compact-list"></div>
-              </article>
-              <article>
-                <h4>Suggestion inbox</h4>
-                <div id="suggestionInbox" class="compact-list"></div>
-              </article>
-              <article>
-                <h4>Constraint / event log</h4>
-                <div id="stateLog" class="compact-list"></div>
-              </article>
-            </div>
-            <pre id="clusterExplanation" class="explanation empty">Select a cluster and click Explain.</pre>
-          </section>
+        <details class="panel utility-panel data-panel">
+          <summary>
+            <span>Detailed tables</span>
+            <small>Raw sample and detected-hit review rows</small>
+          </summary>
           <div class="result-columns">
             <section>
               <h3>Representative samples</h3>
@@ -265,7 +275,7 @@
               </div>
             </section>
           </div>
-        </section>
+        </details>
       </main>
     </div>
     <script type="module" src="/web/app.js"></script>

web/styles.css

@@ -1,125 +1,665 @@
 :root {
-  color-scheme: dark;
-  --bg: #08090d;
-  --panel: rgba(18, 22, 32, 0.84);
-  --panel-strong: rgba(28, 34, 48, 0.92);
-  --line: rgba(255, 255, 255, 0.1);
-  --muted: #8b93a7;
-  --text: #eef2ff;
-  --accent: #8bd3ff;
-  --accent-2: #c8a5ff;
-  --good: #55e6a5;
-  --bad: #ff6d7a;
-  --warn: #ffca6b;
-  --shadow: 0 24px 90px rgba(0,0,0,.38);
+  color-scheme: light;
+  --bg: #f7f7f8;
+  --surface: #ffffff;
+  --surface-soft: #fbfbfc;
+  --line: #e3e4e8;
+  --line-strong: #d4d6dd;
+  --muted: #8b8f9a;
+  --text: #26272b;
+  --text-soft: #4a4d55;
+  --accent: #6b3ff2;
+  --accent-strong: #5129d9;
+  --accent-soft: #eee9ff;
+  --good: #64aa45;
+  --bad: #d95767;
+  --warn: #f08f3e;
+  --cyan: #42b8b4;
+  --blue: #4f7df2;
+  --pink: #ea5ca9;
+  --orange: #ef9343;
+  --green: #8abc59;
+  --shadow: 0 18px 50px rgba(20, 22, 30, .06);
+  --radius-xl: 22px;
+  --radius-lg: 16px;
+  font-synthesis-weight: none;
 }
+
 * { box-sizing: border-box; }
-html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 20% 0%, rgba(139,211,255,.20), transparent 30rem), radial-gradient(circle at 88% 8%, rgba(200,165,255,.18), transparent 28rem), var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
+html, body {
+  margin: 0;
+  min-height: 100%;
+  background:
+    radial-gradient(circle at 12% 0%, rgba(107, 63, 242, .05), transparent 28rem),
+    radial-gradient(circle at 90% 12%, rgba(66, 184, 180, .04), transparent 30rem),
+    var(--bg);
+  color: var(--text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
+}
 button, input, select { font: inherit; }
-code { color: var(--accent); }
-.shell { width: min(1520px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
-.hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 24px; }
-.eyebrow { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); font-size: 12px; font-weight: 800; }
-h1 { margin: 0; font-size: clamp(36px, 6vw, 76px); line-height: .92; letter-spacing: -.07em; max-width: 980px; }
-.lede { margin: 18px 0 0; color: #cbd3e5; font-size: 17px; max-width: 860px; line-height: 1.55; }
-.hero-card { min-width: 250px; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.06); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
-.hero-card strong, .hero-card span { display: block; }
-.hero-card span:last-child { color: var(--muted); font-size: 13px; margin-top: 3px; }
-.status-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--warn); box-shadow: 0 0 26px currentColor; }
-.status-dot.ok { background: var(--good); }
-.status-dot.bad { background: var(--bad); }
-.workspace { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(520px, 1.35fr); gap: 18px; align-items: start; }
-.panel { border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, var(--panel-strong), var(--panel)); box-shadow: var(--shadow); backdrop-filter: blur(22px); padding: 22px; }
-.result-panel { grid-column: 1 / -1; }
-.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
-h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
-.panel p { margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
-.dropzone { position: relative; display: grid; place-items: center; gap: 8px; min-height: 260px; padding: 22px; border: 1.5px dashed rgba(139,211,255,.42); border-radius: 24px; background: linear-gradient(145deg, rgba(139,211,255,.08), rgba(200,165,255,.05)); text-align: center; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
-.dropzone:hover, .dropzone.dragging { transform: translateY(-1px); border-color: var(--accent); background: rgba(139,211,255,.12); }
-.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
-.drop-icon { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 22px; background: rgba(255,255,255,.08); color: var(--accent); font-size: 42px; line-height: 1; }
-.dropzone strong { font-size: 18px; }
-.dropzone small { color: var(--muted); }
-audio { width: 100%; margin-top: 12px; }
-.control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
-label { display: block; color: #c7d0e4; font-size: 12px; font-weight: 750; letter-spacing: .02em; }
-input, select { width: 100%; margin-top: 7px; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; color: var(--text); background: rgba(5, 7, 12, .62); outline: none; }
-input:focus, select:focus { border-color: rgba(139,211,255,.8); box-shadow: 0 0 0 4px rgba(139,211,255,.12); }
-.toggles { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 0; }
-.toggles label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
-.toggles input { width: auto; margin: 0; }
-.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
-button { border: 0; border-radius: 16px; padding: 12px 16px; color: var(--text); cursor: pointer; transition: transform .16s ease, opacity .16s ease, border-color .16s ease; }
+code { color: var(--accent-strong); }
+
+.shell {
+  width: min(100% - 64px, 1760px);
+  margin: 0 auto;
+  padding: 34px 0 56px;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 34px;
+}
+.file-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 28px;
+  min-width: min(620px, 100%);
+  cursor: pointer;
+  color: var(--text);
+}
+.file-chip input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.file-chip.dragging .brand-mark,
+.file-chip:hover .brand-mark { transform: translateY(-1px); }
+.brand-mark {
+  width: 52px;
+  height: 52px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border-radius: 14px;
+  transition: transform .18s ease;
+}
+.brand-mark i {
+  width: 4px;
+  border-radius: 999px;
+  background: #1f2024;
+  display: block;
+}
+.brand-mark i:nth-child(1) { height: 17px; }
+.brand-mark i:nth-child(2) { height: 29px; }
+.brand-mark i:nth-child(3) { height: 40px; }
+.brand-mark i:nth-child(4) { height: 25px; }
+.brand-mark i:nth-child(5) { height: 13px; }
+.file-copy strong {
+  display: block;
+  font-size: clamp(20px, 2vw, 27px);
+  line-height: 1.1;
+  font-weight: 640;
+  letter-spacing: -.035em;
+}
+.file-copy small {
+  display: block;
+  margin-top: 5px;
+  color: var(--muted);
+  font-size: 13px;
+}
+.topbar-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.backend-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  color: var(--text-soft);
+  font-size: 12px;
+  padding: 8px 11px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .72);
+}
+.backend-pill strong { display: block; font-size: 12px; line-height: 1; }
+.backend-pill small { display: block; color: var(--muted); margin-top: 3px; }
+.status-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: var(--warn);
+  box-shadow: 0 0 0 4px rgba(240, 143, 62, .13);
+}
+.status-dot.ok { background: var(--good); box-shadow: 0 0 0 4px rgba(100, 170, 69, .13); }
+.status-dot.bad { background: var(--bad); box-shadow: 0 0 0 4px rgba(217, 87, 103, .13); }
+
+.app-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  grid-template-areas:
+    "wave controls"
+    "samples samples"
+    "review review"
+    "progress progress"
+    "history history"
+    "supervision supervision"
+    "data data";
+  gap: 28px;
+  align-items: start;
+}
+.panel {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xl);
+  background: rgba(255, 255, 255, .82);
+  box-shadow: var(--shadow);
+}
+.wave-card { grid-area: wave; padding: 0; overflow: hidden; min-height: 590px; }
+.control-card { grid-area: controls; padding: 30px; min-height: 590px; }
+.samples-section { grid-area: samples; }
+.review-strip { grid-area: review; }
+.progress-panel { grid-area: progress; }
+.history-panel { grid-area: history; }
+.supervision-panel { grid-area: supervision; }
+.data-panel { grid-area: data; }
+
+.wave-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: flex-start;
+  padding: 26px 30px 8px;
+}
+.eyebrow {
+  margin: 0 0 8px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: .14em;
+  font-size: 11px;
+  font-weight: 780;
+}
+h1 {
+  margin: 0;
+  font-size: clamp(20px, 2.2vw, 30px);
+  line-height: 1.16;
+  letter-spacing: -.045em;
+  font-weight: 620;
+  color: var(--text);
+}
+.job-pill {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 8px 11px;
+  color: var(--muted);
+  background: #fff;
+  font-size: 12px;
+}
+.waveform {
+  display: block;
+  width: 100%;
+  height: 420px;
+  min-height: 420px;
+  margin: 0;
+  background: linear-gradient(180deg, #fff, #fbfbfc);
+  cursor: crosshair;
+}
+.transport-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  align-items: center;
+  padding: 0 30px 26px;
+}
+audio { width: 100%; margin-top: 8px; height: 38px; }
+.transport-audio {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 680;
+  letter-spacing: .02em;
+}
+.downloads {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 0 30px 28px;
+}
+.downloads a, .table-wrap a {
+  color: var(--accent-strong);
+  text-decoration: none;
+  font-weight: 760;
+  background: var(--accent-soft);
+  border: 1px solid rgba(107, 63, 242, .18);
+  border-radius: 999px;
+  padding: 8px 12px;
+}
+
+label {
+  display: block;
+  color: var(--text-soft);
+  font-size: 20px;
+  font-weight: 520;
+  letter-spacing: -.025em;
+}
+.control-group { margin-bottom: 34px; }
+input, select {
+  width: 100%;
+  margin-top: 12px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 15px 18px;
+  color: var(--text);
+  background: #fff;
+  outline: none;
+  font-size: 18px;
+}
+input:focus, select:focus {
+  border-color: rgba(107, 63, 242, .62);
+  box-shadow: 0 0 0 4px rgba(107, 63, 242, .09);
+}
+input[type="range"] {
+  appearance: none;
+  padding: 0;
+  height: 6px;
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--accent), #ececf1);
+}
+input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 0;
+  box-shadow: 0 6px 18px rgba(107, 63, 242, .28);
+}
+input[type="range"]::-moz-range-thumb {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 0;
+  box-shadow: 0 6px 18px rgba(107, 63, 242, .28);
+}
+.range-caption {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 14px;
+  color: var(--muted);
+  font-size: 16px;
+}
+.stepper {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) 64px;
+  margin-top: 12px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+}
+.stepper input {
+  margin: 0;
+  border: 0;
+  border-left: 1px solid var(--line);
+  border-right: 1px solid var(--line);
+  border-radius: 0;
+  text-align: center;
+  font-size: 18px;
+}
+.step-button {
+  border: 0;
+  border-radius: 0;
+  background: #fff;
+  color: var(--text);
+  font-size: 26px;
+  line-height: 1;
+}
+.primary-actions-stack { display: grid; gap: 14px; margin-top: 40px; }
+button {
+  border: 0;
+  border-radius: 10px;
+  padding: 14px 18px;
+  color: var(--text);
+  cursor: pointer;
+  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease;
+}
 button:hover:not(:disabled) { transform: translateY(-1px); }
 button:disabled { opacity: .45; cursor: not-allowed; }
-.primary-button { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #07101d; font-weight: 900; }
-.secondary-button, .ghost-button { border: 1px solid var(--line); background: rgba(255,255,255,.07); }
-.ghost-button { padding: 9px 12px; color: #cbd3e5; }
-.job-pill { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; color: var(--muted); background: rgba(255,255,255,.06); font-size: 12px; }
-.stage-list { display: grid; gap: 9px; }
-.stage { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,.16); }
-.stage .badge { width: 18px; height: 18px; border-radius: 999px; background: rgba(255,255,255,.16); }
-.stage.running .badge { background: var(--accent); box-shadow: 0 0 22px rgba(139,211,255,.8); }
+.primary-button {
+  min-width: 250px;
+  background: linear-gradient(135deg, #7048f5, #5129d9);
+  color: #fff;
+  font-weight: 690;
+  font-size: 18px;
+  box-shadow: 0 14px 34px rgba(81, 41, 217, .22);
+}
+.primary-button span { margin-right: 8px; }
+.export-button, .secondary-button, .ghost-button {
+  border: 1px solid var(--line-strong);
+  background: #fff;
+  color: var(--text-soft);
+  font-weight: 610;
+}
+.export-button { min-height: 64px; font-size: 18px; }
+.ghost-button { padding: 10px 13px; font-size: 14px; }
+.full-width { width: 100%; margin-top: 16px; }
+.ghost-button.active, .secondary-button.active {
+  border-color: rgba(100, 170, 69, .55);
+  background: rgba(100, 170, 69, .10);
+  color: #386b24;
+}
+.advanced-controls {
+  margin-top: 28px;
+  border-top: 1px solid var(--line);
+  padding-top: 18px;
+}
+.advanced-controls summary,
+.utility-panel summary {
+  cursor: pointer;
+  color: var(--text-soft);
+  font-weight: 680;
+}
+.control-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+.compact-controls label {
+  font-size: 12px;
+  font-weight: 720;
+  letter-spacing: .01em;
+}
+.compact-controls input, .compact-controls select {
+  padding: 10px 11px;
+  font-size: 13px;
+  margin-top: 7px;
+}
+.toggles {
+  display: grid;
+  gap: 10px;
+  margin: 16px 0 0;
+}
+.toggles label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 650;
+}
+.toggles input { width: auto; margin: 0; }
+
+.section-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 20px;
+  margin: 10px 8px 20px;
+}
+h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; font-weight: 620; }
+.section-heading p { margin: 0; color: var(--muted); max-width: 680px; }
+.sample-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 34px;
+}
+.sample-card {
+  display: grid;
+  grid-template-rows: 130px auto;
+  min-height: 220px;
+  border: 1px solid var(--line);
+  border-top: 4px solid var(--accent);
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 10px 26px rgba(20, 22, 30, .04);
+  overflow: hidden;
+  text-align: left;
+  padding: 0;
+}
+.sample-card:hover { box-shadow: 0 16px 38px rgba(20, 22, 30, .08); }
+.sample-card.selected { outline: 3px solid rgba(107, 63, 242, .14); }
+.sample-wave {
+  width: 100%;
+  height: 130px;
+  display: block;
+  background: #fff;
+}
+.sample-card-footer {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  padding: 14px 14px 16px;
+}
+.play-dot {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: #fff;
+  border: 1px solid var(--line);
+  color: var(--text);
+  font-size: 14px;
+}
+.sample-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 17px;
+  font-weight: 570;
+  letter-spacing: -.02em;
+}
+.sample-meta {
+  display: block;
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+.review-strip {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22px;
+}
+.review-card {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, .82);
+  box-shadow: var(--shadow);
+  padding: 18px;
+}
+.review-card strong, .review-card span { display: block; }
+.review-card span { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.4; }
+
+.utility-panel {
+  padding: 18px 20px;
+}
+.utility-panel > summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 4px;
+  list-style: none;
+}
+.utility-panel > summary::-webkit-details-marker { display: none; }
+.utility-panel > summary span { font-size: 17px; color: var(--text); }
+.utility-panel > summary small { color: var(--muted); font-weight: 500; }
+.stage-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 10px;
+  margin-top: 16px;
+}
+.stage {
+  display: grid;
+  grid-template-columns: 20px 1fr auto;
+  gap: 10px;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--surface-soft);
+}
+.stage .badge { width: 14px; height: 14px; border-radius: 999px; background: #d7d9e1; }
+.stage.running .badge { background: var(--accent); box-shadow: 0 0 0 5px rgba(107, 63, 242, .12); }
 .stage.done .badge { background: var(--good); }
 .stage.error .badge { background: var(--bad); }
-.stage strong { display: block; font-size: 14px; }
+.stage strong { display: block; font-size: 13px; color: var(--text); }
 .stage small { display: block; color: var(--muted); margin-top: 2px; }
-.stage time { color: #d7def0; font-variant-numeric: tabular-nums; }
-.logs { min-height: 140px; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin: 14px 0 0; background: #05070b; color: #9db8c8; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
-.waveform { width: 100%; min-height: 160px; border: 1px solid var(--line); border-radius: 20px; background: rgba(0,0,0,.18); margin: 4px 0 16px; }
-.downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
-.downloads a, .table-wrap a { color: #07101d; text-decoration: none; font-weight: 850; background: var(--accent); border-radius: 999px; padding: 8px 11px; }
-.audio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
-.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 20px; }
-table { width: 100%; border-collapse: collapse; min-width: 860px; }
-th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
-th { position: sticky; top: 0; background: #101521; color: #aeb9ce; z-index: 1; }
-td { color: #e5eaf7; }
-tr:last-child td { border-bottom: 0; }
-@media (max-width: 1100px) { .workspace, .hero { grid-template-columns: 1fr; } .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 680px) { .shell { width: min(100% - 20px, 1520px); padding-top: 16px; } .panel { padding: 16px; border-radius: 22px; } .control-grid, .audio-grid { grid-template-columns: 1fr; } h1 { letter-spacing: -.045em; } }
-.history-panel { align-self: stretch; }
-.history-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; }
-.history-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--line); background: rgba(0,0,0,.16); border-radius: 16px; padding: 12px; }
+.stage time { color: var(--text-soft); font-variant-numeric: tabular-nums; }
+.logs {
+  min-height: 110px;
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 14px;
+  margin: 14px 0 0;
+  background: #fbfbfc;
+  color: #606571;
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+.history-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; margin-top: 14px; }
+.history-row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  gap: 12px;
+  align-items: center;
+  text-align: left;
+  border: 1px solid var(--line);
+  background: #fff;
+  border-radius: 14px;
+  padding: 12px;
+}
 .history-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
 .history-row small { display: block; color: var(--muted); margin-top: 3px; }
-.history-row span:not(:first-child) { color: #dbe5f7; font-size: 12px; font-variant-numeric: tabular-nums; }
+.history-row span:not(:first-child) { color: var(--text-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
 .empty { color: var(--muted); margin: 0; }
-@media (max-width: 680px) { .history-row { grid-template-columns: 1fr 1fr; } }
+
 h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: -.015em; }
 .subtle { margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
-.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px; }
-.review-card { border: 1px solid var(--line); border-radius: 20px; background: rgba(0,0,0,.16); padding: 14px; }
-.review-card strong, .review-card span { display: block; }
-.review-card span { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.4; }
-.result-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
+.result-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 18px; }
 .hit-table-wrap { max-height: 420px; }
-.mini-button { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--text); font-size: 12px; font-weight: 800; }
-tr.selected td { background: rgba(139,211,255,.12); }
+.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
+table { width: 100%; border-collapse: collapse; min-width: 860px; background: #fff; }
+th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
+th { position: sticky; top: 0; background: #fbfbfc; color: var(--muted); z-index: 1; }
+td { color: var(--text-soft); }
+tr:last-child td { border-bottom: 0; }
+.mini-button {
+  padding: 7px 10px;
+  border-radius: 999px;
+  background: #fff;
+  border: 1px solid var(--line);
+  color: var(--text-soft);
+  font-size: 12px;
+  font-weight: 720;
+}
+tr.selected td { background: var(--accent-soft); }
 tr[data-hit-index] { cursor: pointer; }
-tr[data-hit-index]:hover td { background: rgba(255,255,255,.045); }
-@media (max-width: 760px) { .review-grid { grid-template-columns: 1fr; } }
-.supervision-panel { border: 1px solid var(--line); border-radius: 24px; background: rgba(0,0,0,.14); padding: 16px; margin: 0 0 20px; }
-.supervision-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
+tr[data-hit-index]:hover td { background: #f6f4ff; }
+tr.low-confidence td { background: rgba(240,143,62,.06); }
+tr.low-confidence.selected td { background: var(--accent-soft); }
+tr.suppressed td { opacity: .62; text-decoration: line-through; }
+
+.supervision-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 18px 0 14px;
+}
 .supervision-header h3, .supervision-grid h4 { margin: 0; }
 .supervision-actions, .row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
-.state-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: #dbe5f7; }
-.state-summary span { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.06); padding: 7px 10px; font-size: 12px; font-weight: 800; }
-.supervision-tools { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(7, auto); gap: 10px; align-items: end; margin-bottom: 16px; }
-.danger-button { border-color: rgba(255,109,122,.35); color: #ffd4d8; }
+.state-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: var(--text-soft); }
+.state-summary span {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: #fff;
+  padding: 7px 10px;
+  font-size: 12px;
+  font-weight: 760;
+}
+.supervision-tools {
+  display: grid;
+  grid-template-columns: minmax(220px, 1fr) repeat(7, auto);
+  gap: 10px;
+  align-items: end;
+  margin-bottom: 16px;
+}
+.supervision-tools label { font-size: 13px; font-weight: 720; }
+.supervision-tools input, .supervision-tools select { font-size: 13px; padding: 10px 11px; }
+.danger-button { border-color: rgba(217,87,103,.34); color: #973844; }
 .supervision-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
 .compact-list { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
-.compact-row, .suggestion-row, .log-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: rgba(0,0,0,.14); color: var(--text); text-align: left; }
+.compact-row, .suggestion-row, .log-row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 10px;
+  background: #fff;
+  color: var(--text);
+  text-align: left;
+}
 .compact-row strong, .suggestion-row strong, .log-row strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .compact-row small, .suggestion-row small, .log-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; line-height: 1.35; }
-.compact-row.locked { border-color: rgba(85,230,165,.45); background: rgba(85,230,165,.08); }
-.compact-row.suppressed, tr.suppressed td { opacity: .62; text-decoration: line-through; }
-.log-row.constraint { border-color: rgba(200,165,255,.26); }
-.explanation { min-height: 120px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: #05070b; color: #b9d7e9; padding: 12px; margin: 14px 0 0; font-size: 12px; line-height: 1.45; }
-tr.low-confidence td { background: rgba(255,202,107,.06); }
-tr.low-confidence.selected td { background: rgba(139,211,255,.15); }
-@media (max-width: 1320px) { .supervision-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } .supervision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 760px) { .supervision-header { display: block; } .supervision-actions { justify-content: flex-start; margin-top: 10px; } .supervision-tools, .supervision-grid { grid-template-columns: 1fr; } }
-.ghost-button.active, .secondary-button.active { border-color: rgba(85,230,165,.7); background: rgba(85,230,165,.13); color: #d9ffe9; }
-.edited-downloads { margin: -4px 0 14px; }
+.compact-row.locked { border-color: rgba(100,170,69,.45); background: rgba(100,170,69,.08); }
+.compact-row.suppressed { opacity: .62; text-decoration: line-through; }
+.log-row.constraint { border-color: rgba(107,63,242,.22); }
+.explanation {
+  min-height: 120px;
+  max-height: 320px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #fbfbfc;
+  color: #606571;
+  padding: 12px;
+  margin: 14px 0 0;
+  font-size: 12px;
+  line-height: 1.45;
+}
+.edited-downloads { margin: -4px 0 14px; padding: 0; }
 .edited-downloads:empty { display: none; }
+
+@media (max-width: 1180px) {
+  .app-layout {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "controls"
+      "wave"
+      "samples"
+      "review"
+      "progress"
+      "history"
+      "supervision"
+      "data";
+  }
+  .control-card, .wave-card { min-height: 0; }
+  .control-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
+  .control-group, .primary-actions-stack, .advanced-controls { margin: 0; }
+  .advanced-controls { grid-column: 1 / -1; }
+}
+@media (max-width: 760px) {
+  .shell { width: min(100% - 24px, 1760px); padding-top: 20px; }
+  .topbar, .section-heading, .supervision-header { display: block; }
+  .topbar-actions { margin-top: 18px; justify-content: stretch; width: 100%; }
+  .primary-button { width: 100%; min-width: 0; }
+  .file-chip { min-width: 0; width: 100%; gap: 12px; }
+  .wave-header, .transport-row, .downloads { padding-left: 18px; padding-right: 18px; }
+  .waveform { height: 300px; min-height: 300px; }
+  .transport-row, .review-strip, .control-card, .control-grid, .supervision-tools, .supervision-grid { grid-template-columns: 1fr; }
+  .sample-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 18px; }
+  .history-row { grid-template-columns: 1fr 1fr; }
+}
+#sourcePreview { grid-column: 1 / -1; }
+.downloads:empty { display: none; }