Update stem mixer and separation logic

app.py

@@ -14,7 +14,7 @@ import sys
 import sysconfig
 import traceback
 import zipfile
-from collections import deque
+from collections import defaultdict, deque
 from pathlib import Path
 from urllib.parse import quote
 
@@ -36,23 +36,11 @@ EXPECTED_STEMS = {
     "6": ["vocals", "drums", "bass", "guitar", "piano", "other"],
 }
 
-COMMON_53_STEMS = [
-    "vocals",
-    "drums",
-    "bass",
-    "guitar",
-    "piano",
-    "other",
-    "synth",
-    "strings",
-    "percussion",
-]
-
 MODE_CHOICES = [
-    "Voice + music",
-    "Core instruments",
-    "Full band",
-    "Every detail",
+    "Voice + music — 2 tracks",
+    "Core instruments — 4 tracks",
+    "Full band — 6 tracks",
+    "Every detail — 53 tracks",
 ]
 
 MODE_BY_CHOICE = dict(zip(MODE_CHOICES, ["2", "4", "6", "53"]))
@@ -114,6 +102,11 @@ def normalized_token(path: Path) -> str:
     return re.sub(r"[^a-z0-9]+", "_", path.stem.lower()).strip("_")
 
 
+def output_stem_name(path: Path) -> str:
+    """Derive the model's stem label from its rendered WAV filename."""
+    return re.sub(r"^input[_ -]", "", path.stem.lower())
+
+
 def best_match(stem_name: str, paths: list[Path]) -> Path | None:
     stem = stem_name.lower()
     matches = []
@@ -232,8 +225,8 @@ def run_inference(stage_wav: Path, raw_dir: Path, model: str) -> None:
         "--backend",
         COMPUTE_BACKEND,
     ]
-    if COMPUTE_BACKEND == "mlx" and model == MODEL_BY_MODE["53"]:
-        checkpoint_path, config_path = mlx_compatible_53_stem_assets(model)
+    if COMPUTE_BACKEND == "mlx":
+        checkpoint_path, config_path = mlx_compatible_assets(model)
         cmd.extend([
             "--model_path",
             str(checkpoint_path),
@@ -279,8 +272,8 @@ def ensure_healthy_model_assets(model: str) -> None:
     ensure_model_assets(model)
 
 
-def mlx_compatible_53_stem_assets(model: str) -> tuple[Path, Path]:
-    """Return the 53-stem checkpoint and a hop-aligned job-local config."""
+def mlx_compatible_assets(model: str) -> tuple[Path, Path]:
+    """Return model assets, patching MLX-incompatible chunk sizes when needed."""
     checkpoint, config_path = map(Path, ensure_model_assets(model))
     config_text = config_path.read_text()
     chunk_matches = list(re.finditer(
@@ -294,9 +287,9 @@ def mlx_compatible_53_stem_assets(model: str) -> tuple[Path, Path]:
     if not chunk_matches or hop_match is None:
         raise RuntimeError("The detailed separation settings are incomplete.")
 
-    # The final chunk_size entry belongs to the inference section; the earlier
-    # audio entry is training metadata and must remain untouched.
-    chunk_match = chunk_matches[-1]
+    # Published configs keep the chunked-inference setting in the audio section.
+    # Use the first entry instead of the model's unrelated training metadata.
+    chunk_match = chunk_matches[0]
     chunk_size = int(chunk_match.group(2))
     hop_length = int(hop_match.group(1))
     if chunk_size % hop_length == 0:
@@ -387,15 +380,13 @@ def normalize_outputs(
 
         return files, previews
 
-    selected_dir = job_dir / "selected_stems"
-    selected_dir.mkdir(parents=True, exist_ok=True)
-
-    for stem in COMMON_53_STEMS:
-        src = best_match(stem, raw_wavs)
-        if src is not None:
-            dst = selected_dir / f"{stem}.wav"
-            copy_atomic(src, dst)
-            previews[stem] = dst
+    # The detailed model emits a distinct WAV for every one of its 53 stems.
+    # Keep every source in the mixer instead of showing only a small preview.
+    for src in raw_wavs:
+        stem = output_stem_name(src)
+        if stem in previews:
+            stem = src.stem.lower()
+        previews[stem] = src
 
     return raw_wavs, previews
 
@@ -429,11 +420,37 @@ STEM_LABELS = {
     "synth": "Synth",
 }
 
+GROUP_LABELS = {
+    "vocals": "Vocals",
+    "rhythm": "Rhythm",
+    "guitars_keys": "Guitars & keys",
+    "orchestral_winds": "Orchestral & winds",
+    "other": "Other instruments",
+}
+
+STEM_GROUPS = {
+    "vocals": {"vocal", "vocals", "lead-vocal", "back-vocal"},
+    "rhythm": {"drums", "kick", "snare", "toms", "hh", "percussion", "congas", "tambourine", "timpani", "triangle", "bass", "double-bass"},
+    "guitars_keys": {"acoustic-guitar", "electric-guitar", "guitar", "banjo", "dobro", "mandolin", "ukulele", "sitar", "harp", "piano", "digital-piano", "keys", "organ", "harpsichord", "accordion", "synth", "marimba", "glockenspiel", "bells"},
+    "orchestral_winds": {"bowed_strings", "strings", "cello", "viola", "violin", "brass", "trumpet", "trombone", "tuba", "french-horn", "flute", "clarinet", "oboe", "saxophone", "bassoon", "harmonica", "wind", "wind-chimes", "woodwind"},
+}
+
+# These broad predictions overlap the more specific instrument predictions in
+# the same group. They are a convenient mix layer, not an extra source to add.
+AGGREGATE_STEMS = {
+    "vocal", "vocals",
+    "drums", "percussion",
+    "guitar", "keys",
+    "bowed_strings", "strings", "brass", "wind", "woodwind",
+}
+
 ICON_PATHS = {
     "sparkles": '<path d="m12 3-1.9 4.8L5 10l5.1 2.2L12 17l1.9-4.8L19 10l-5.1-2.2L12 3Z"/><path d="M5 3v4M3 5h4M19 17v4m-2-2h4"/>',
     "play": '<path d="m8 5 11 7-11 7Z"/>',
     "pause": '<path d="M9 5v14M15 5v14"/>',
     "download": '<path d="M12 3v12m0 0 4-4m-4 4-4-4M5 19h14"/>',
+    "speaker": '<path d="M11 5 6 9H3v6h3l5 4Z"/><path d="M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12"/>',
+    "speaker-muted": '<path d="M11 5 6 9H3v6h3l5 4Z"/><path d="m16 9 5 5m0-5-5 5"/>',
     "vocals": '<rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v4M8 21h8"/>',
     "background": '<path d="m12 2 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5M3 17l9 5 9-5"/>',
     "drums": '<ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v11c0 1.7 3.6 3 8 3s8-1.3 8-3V6M8 9v10M16 9v10"/>',
@@ -453,32 +470,97 @@ def icon_svg(name: str, class_name: str = "ui-icon") -> str:
     )
 
 
-def mixer_html(previews: dict[str, Path]) -> str:
+def stem_group(stem: str) -> str:
+    for group, stems in STEM_GROUPS.items():
+        if stem in stems:
+            return group
+    return "other"
+
+
+def stem_label(stem: str) -> str:
+    return STEM_LABELS.get(stem, stem.replace("-", " ").replace("_", " ").title())
+
+
+def mixer_html(previews: dict[str, Path], mode: str) -> str:
     """Build native audio controls; Gradio's waveform player has no controllable audio src."""
+    detailed_mode = mode == "53"
+    flat_mode = mode == "6"
+    grouped: dict[str, list[tuple[str, Path]]] = defaultdict(list)
+    for stem, path in previews.items():
+        grouped[stem_group(stem)].append((stem, path))
+
+    if not grouped:
+        return '<p class="empty-mixer">No playable stems were produced.</p>'
+
     controls = []
     tracks = []
-    for stem, label in STEM_LABELS.items():
-        path = previews.get(stem)
-        if path is None:
+    for group in GROUP_LABELS:
+        group_stems = grouped.get(group)
+        if not group_stems:
             continue
-        url = "/gradio_api/file=" + quote(str(path.resolve()), safe="/")
-        escaped_label = html.escape(label)
-        escaped_filename = html.escape(path.name, quote=True)
-        controls.append(
-            f'<div class="mixer-stem"><span class="stem-name">{icon_svg(stem)}{escaped_label}</span>'
-            f'<button class="mixer-toggle" data-stem="{stem}" aria-pressed="true">On</button></div>'
-        )
-        tracks.append(
-            f'<article class="stem-track" data-stem="{stem}" data-src="{html.escape(url, quote=True)}">'
-            f'<div class="stem-track-header"><span class="stem-track-label">{icon_svg(stem)}{escaped_label}</span>'
-            f'<a class="stem-download" href="{html.escape(url, quote=True)}" '
-            f'download="{escaped_filename}">{icon_svg("download")}Save</a></div>'
-            f'<div class="track-timeline" aria-hidden="true"><span class="track-playhead"></span></div>'
-            f'</article>'
+        group_label = GROUP_LABELS[group]
+        escaped_group_label = html.escape(group_label)
+        group_controls = []
+        group_tracks = []
+        for stem, path in sorted(group_stems, key=lambda item: stem_label(item[0])):
+            label = stem_label(stem)
+            url = "/gradio_api/file=" + quote(str(path.resolve()), safe="/")
+            escaped_label = html.escape(label)
+            escaped_filename = html.escape(path.name, quote=True)
+            icon_name = stem if stem in ICON_PATHS else "other"
+            aggregate = detailed_mode and stem in AGGREGATE_STEMS
+            state = "false" if aggregate else "true"
+            action = "Unmute" if aggregate else "Mute"
+            button_icon = "speaker-muted" if aggregate else "speaker"
+            button_text = "Muted" if aggregate else "On"
+            tier = "aggregate" if aggregate else "individual"
+            group_controls.append(
+                f'<div class="mixer-stem" data-tier="{tier}"><span class="stem-name">{icon_svg(icon_name)}{escaped_label}</span>'
+                f'<button class="mixer-toggle" data-stem="{stem}" data-label="{escaped_label}" data-tier="{tier}" '
+                f'aria-pressed="{state}" aria-label="{action} {escaped_label}" title="{action} {escaped_label}">'
+                f'{icon_svg(button_icon)}<span>{button_text}</span></button></div>'
+            )
+            group_tracks.append(
+                f'<article class="stem-track" data-stem="{stem}" data-group="{group}" data-tier="{tier}" '
+                f'data-initial-muted="{str(aggregate).lower()}" data-src="{html.escape(url, quote=True)}">'
+                f'<div class="stem-track-header"><span class="stem-track-label">{icon_svg(icon_name)}{escaped_label}</span>'
+                f'<a class="stem-download" href="{html.escape(url, quote=True)}" '
+                f'download="{escaped_filename}">{icon_svg("download")}Save</a></div>'
+                f'<div class="track-timeline" aria-hidden="true"><span class="track-playhead"></span></div>'
+                f'</article>'
+            )
+        group_header = (
+            f'<section class="mixer-group"><div class="mixer-group-heading"><h4>{escaped_group_label}</h4>'
+            f'<button class="mixer-group-toggle" data-group="{group}" data-label="{escaped_group_label}" '
+            f'data-detailed="{str(detailed_mode).lower()}" '
+            f'aria-pressed="true" aria-label="Mute all {escaped_group_label}" title="Mute all {escaped_group_label}">'
+            f'{icon_svg("speaker")}<span>Mute all</span></button></div>'
         )
+        if flat_mode:
+            controls.extend(group_controls)
+            tracks.extend(group_tracks)
+        elif detailed_mode:
+            controls.append(
+                group_header + f'<details><summary>{len(group_stems)} tracks</summary>{"".join(group_controls)}</details></section>'
+            )
+            tracks.append(
+                f'<details class="stem-track-group"{" open" if group == "vocals" else ""}>'
+                f'<summary><span>{escaped_group_label}</span><span>{len(group_stems)} tracks</span></summary>'
+                f'<div class="stem-track-grid">{"".join(group_tracks)}</div></details>'
+            )
+        else:
+            controls.append(group_header + "".join(group_controls) + "</section>")
+            tracks.append(
+                f'<section class="stem-track-group is-expanded"><div class="stem-track-group-title">'
+                f'<span>{escaped_group_label}</span><span>{len(group_stems)} tracks</span></div>'
+                f'<div class="stem-track-grid">{"".join(group_tracks)}</div></section>'
+            )
 
-    if not tracks:
-        return '<p class="empty-mixer">No playable stems were produced.</p>'
+    track_markup = (
+        f'<div class="stem-track-grid full-grid">{"".join(tracks)}</div>'
+        if flat_mode
+        else "".join(tracks)
+    )
 
     return """
     <section id="sync-mixer" aria-label="Synchronized stem mixer">
@@ -498,7 +580,7 @@ def mixer_html(previews: dict[str, Path]) -> str:
         <div id="stem-track-list">%s</div>
       </div>
     </section>
-    """ % (icon_svg("play"), icon_svg("pause"), "".join(controls), "".join(tracks))
+    """ % (icon_svg("play"), icon_svg("pause"), "".join(controls), track_markup)
 
 
 def mode_from_choice(choice: str) -> str:
@@ -625,7 +707,7 @@ def separate(
             status,
             [str(path) for path in files],
             str(zip_path),
-            mixer_html(previews),
+            mixer_html(previews, mode),
         )
 
     except gr.Error:
@@ -667,6 +749,47 @@ MIXER_HEAD = """
     return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`;
   };
 
+  const speakerIcon = (muted) => `<svg class="ui-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${muted
+    ? '<path d="M11 5 6 9H3v6h3l5 4Z"/><path d="m16 9 5 5m0-5-5 5"/>'
+    : '<path d="M11 5 6 9H3v6h3l5 4Z"/><path d="M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12"/>'
+  }</svg>`;
+
+  const setStemMuted = (stem, muted) => {
+    const gain = engine.gains.get(stem);
+    if (!gain || !engine.mixer) return;
+    if (muted) engine.muted.add(stem); else engine.muted.delete(stem);
+    const now = engine.context.currentTime;
+    if (typeof gain.gain.cancelAndHoldAtTime === "function") {
+      gain.gain.cancelAndHoldAtTime(now);
+    } else {
+      gain.gain.cancelScheduledValues(now);
+    }
+    gain.gain.setTargetAtTime(muted ? 0 : 1, now, 0.008);
+    const control = [...engine.mixer.querySelectorAll(".mixer-toggle")]
+      .find((button) => button.dataset.stem === stem);
+    if (!control) return;
+    const action = muted ? "Unmute" : "Mute";
+    const label = control.dataset.label || stem;
+    control.setAttribute("aria-pressed", String(!muted));
+    control.setAttribute("aria-label", `${action} ${label}`);
+    control.title = `${action} ${label}`;
+    control.innerHTML = `${speakerIcon(muted)}<span>${muted ? "Muted" : "On"}</span>`;
+  };
+
+  const updateGroupControl = (group) => {
+    if (!engine.mixer) return;
+    const control = engine.mixer.querySelector(`.mixer-group-toggle[data-group="${group}"]`);
+    const stems = [...engine.mixer.querySelectorAll(`.stem-track[data-group="${group}"]`)]
+      .map((track) => track.dataset.stem);
+    if (!control || !stems.length) return;
+    const allMuted = stems.every((stem) => engine.muted.has(stem));
+    const label = control.dataset.label || group;
+    control.setAttribute("aria-pressed", String(!allMuted));
+    control.setAttribute("aria-label", `${allMuted ? "Unmute" : "Mute"} all ${label}`);
+    control.title = `${allMuted ? "Unmute" : "Mute"} all ${label}`;
+    control.innerHTML = `${speakerIcon(allMuted)}<span>${allMuted ? "Unmute all" : "Mute all"}</span>`;
+  };
+
   const position = () => engine.playing
     ? Math.min(engine.duration, engine.offset + engine.context.currentTime - engine.startedAt)
     : engine.offset;
@@ -727,6 +850,10 @@ MIXER_HEAD = """
         gain.connect(engine.context.destination);
         engine.buffers.set(stem, buffer);
         engine.gains.set(stem, gain);
+        if (track.dataset.initialMuted === "true") {
+          gain.gain.value = 0;
+          engine.muted.add(stem);
+        }
       }));
       if (engine.mixer !== mixer) return;
       engine.duration = Math.min(...[...engine.buffers.values()].map((buffer) => buffer.duration));
@@ -782,22 +909,40 @@ MIXER_HEAD = """
       }
       return;
     }
+    if (!engine.mixer) return;
+    const groupControl = event.target.closest(".mixer-group-toggle");
+    if (groupControl) {
+      const group = groupControl.dataset.group;
+      const stems = [...engine.mixer.querySelectorAll(`.stem-track[data-group="${group}"]`)]
+        .map((track) => track.dataset.stem);
+      const shouldMute = stems.some((stem) => !engine.muted.has(stem));
+      if (shouldMute) {
+        stems.forEach((stem) => setStemMuted(stem, true));
+      } else if (groupControl.dataset.detailed === "true") {
+        // Returning a detailed group to audible state selects its individual
+        // sources, keeping broad aggregate predictions muted.
+        engine.mixer.querySelectorAll(`.stem-track[data-group="${group}"]`).forEach((track) => {
+          setStemMuted(track.dataset.stem, track.dataset.tier === "aggregate");
+        });
+      } else {
+        stems.forEach((stem) => setStemMuted(stem, false));
+      }
+      updateGroupControl(group);
+      return;
+    }
     const control = event.target.closest(".mixer-toggle");
     if (!control) return;
     const stem = control.dataset.stem;
-    const gain = engine.gains.get(stem);
-    if (!gain) return;
     const muted = !engine.muted.has(stem);
-    if (muted) engine.muted.add(stem); else engine.muted.delete(stem);
-    const now = engine.context.currentTime;
-    if (typeof gain.gain.cancelAndHoldAtTime === "function") {
-      gain.gain.cancelAndHoldAtTime(now);
-    } else {
-      gain.gain.cancelScheduledValues(now);
+    const track = engine.mixer.querySelector(`.stem-track[data-stem="${stem}"]`);
+    const group = track?.dataset.group;
+    if (!muted && group && control.dataset.tier) {
+      const oppositeTier = control.dataset.tier === "aggregate" ? "individual" : "aggregate";
+      engine.mixer.querySelectorAll(`.stem-track[data-group="${group}"][data-tier="${oppositeTier}"]`)
+        .forEach((other) => setStemMuted(other.dataset.stem, true));
     }
-    gain.gain.setTargetAtTime(muted ? 0 : 1, now, 0.008);
-    control.setAttribute("aria-pressed", String(!muted));
-    control.textContent = muted ? "Muted" : "On";
+    setStemMuted(stem, muted);
+    if (group) updateGroupControl(group);
   });
 
   document.addEventListener("input", async (event) => {
@@ -805,6 +950,11 @@ MIXER_HEAD = """
     await seek(Number(event.target.value) / 1000);
   });
 
+  document.addEventListener("click", (event) => {
+    if (!event.target.closest("#split-button")) return;
+    document.querySelector("#studio-hero")?.classList.add("is-compact");
+  });
+
   const tick = () => {
     const mixer = document.querySelector("#sync-mixer");
     if (mixer && engine.mixer !== mixer && !engine.loading) initialize(mixer);
@@ -830,13 +980,17 @@ MIXER_CSS = """
 body, .gradio-container { background: #0b0a10 !important; color: #f7f4ff !important; }
 .gradio-container { max-width: 1180px !important; margin: 0 auto !important; padding: 28px 24px 56px !important; }
 footer { display: none !important; }
-#studio-hero { position: relative; overflow: hidden; margin: 8px 0 28px; padding: 38px 40px; border: 1px solid #292435; border-radius: 28px; background: radial-gradient(circle at 82% 20%, rgba(167,139,250,.26), transparent 32%), radial-gradient(circle at 10% 100%, rgba(251,113,133,.14), transparent 36%), #111018; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
+#studio-hero { position: relative; overflow: hidden; margin: 8px 0 28px; padding: 38px 40px; border: 1px solid #292435; border-radius: 28px; background: radial-gradient(circle at 82% 20%, rgba(167,139,250,.26), transparent 32%), radial-gradient(circle at 10% 100%, rgba(251,113,133,.14), transparent 36%), #111018; box-shadow: 0 30px 80px rgba(0,0,0,.28); transition: margin .25s ease, padding .25s ease, border-radius .25s ease; }
 #studio-hero::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; bottom: -130px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
 .ui-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
 .hero-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #c4b5fd; font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
 .hero-kicker .ui-icon { width: 1rem; height: 1rem; }
 #studio-hero h1 { max-width: 650px; margin: 0; font-size: clamp(2.35rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.055em; }
 #studio-hero p { max-width: 560px; margin: 18px 0 0; color: #aca6b9; font-size: 1.08rem; line-height: 1.55; }
+#studio-hero.is-compact { position: sticky; top: 8px; z-index: 10; margin: 8px 0 16px; padding: 13px 18px; border-radius: 16px; background: rgba(17,16,24,.94); box-shadow: 0 10px 28px rgba(0,0,0,.3); backdrop-filter: blur(14px); }
+#studio-hero.is-compact::after, #studio-hero.is-compact h1, #studio-hero.is-compact p { display: none; }
+#studio-hero.is-compact .hero-kicker { margin: 0; font-size: .78rem; }
+#studio-hero.is-compact .hero-kicker::after { content: "Separation workspace"; margin-left: 8px; padding-left: 10px; border-left: 1px solid #494157; color: #aca6b9; font-weight: 600; letter-spacing: .08em; }
 #upload-panel { align-items: stretch; gap: 16px; margin-bottom: 16px; }
 #song-card, #controls-card { padding: 18px !important; border: 1px solid var(--studio-line) !important; border-radius: 20px !important; background: var(--studio-panel) !important; box-shadow: 0 14px 34px rgba(0,0,0,.16); }
 #song-card > div, #controls-card > div { background: transparent !important; }
@@ -862,22 +1016,37 @@ footer { display: none !important; }
 .transport-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
 .mixer-stem { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
 .mixer-stem:last-child { border-bottom: 0; }
-.mixer-transport, .mixer-toggle { border: 1px solid #373144; border-radius: 10px; background: #211e2a; color: #f7f4ff; cursor: pointer; }
+.mixer-group { margin-top: 14px; }
+.mixer-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.1); }
+.mixer-group-heading h4 { margin: 0; color: #c9c3d4; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
+.mixer-group details summary { padding: 7px 0 1px; color: #817a8d; cursor: pointer; font-size: .78rem; }
+.mixer-group details summary:hover { color: #c9c3d4; }
+.mixer-transport, .mixer-toggle, .mixer-group-toggle { border: 1px solid #373144; border-radius: 10px; background: #211e2a; color: #f7f4ff; cursor: pointer; }
 .mixer-transport { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
 .mixer-transport { min-height: 40px; }
-.mixer-toggle { min-width: 4.5rem; padding: 6px 10px; color: #d8b4fe; }
+.mixer-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 5.4rem; padding: 6px 10px; color: #d8b4fe; }
+.mixer-group-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 7px; color: #d8b4fe; font-size: .72rem; white-space: nowrap; }
+.mixer-group-toggle .ui-icon { width: .9rem; height: .9rem; }
 .mixer-toggle[aria-pressed="false"] { color: #817a8d; background: #111018; }
+.mixer-group-toggle[aria-pressed="false"] { color: #817a8d; background: #111018; }
 #stem-players { flex: 1; min-width: 0; }
 .shared-timeline { margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--studio-line); border-radius: 18px; background: #181620; }
 .timeline-labels { display: flex; justify-content: space-between; margin-bottom: .45rem; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--body-text-color-subdued); }
 #timeline-scrubber { width: 100%; accent-color: var(--studio-accent); cursor: pointer; }
-#stem-track-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
-.stem-track { border: 1px solid var(--studio-line); border-radius: 16px; padding: 15px 16px; background: #181620; transition: border-color .16s ease, transform .16s ease; }
+#stem-track-list { display: grid; gap: 1rem; }
+.stem-track-group { border: 1px solid var(--studio-line); border-radius: 16px; background: #15131c; overflow: hidden; }
+.stem-track-group > summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; color: #c9c3d4; cursor: pointer; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.stem-track-group > summary span:last-child { color: #817a8d; font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
+.stem-track-group[open] > summary { border-bottom: 1px solid var(--studio-line); }
+.stem-track-group-title { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--studio-line); color: #c9c3d4; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.stem-track-group-title span:last-child { color: #817a8d; font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
+.stem-track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; padding: 10px; }
+.stem-track { border: 1px solid rgba(255,255,255,.07); border-radius: 11px; padding: 10px 11px; background: #181620; transition: border-color .16s ease, transform .16s ease; }
 .stem-track:hover { border-color: #494157; transform: translateY(-1px); }
 .stem-track-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
 .stem-name, .stem-track-label { display: inline-flex; align-items: center; gap: 9px; }
 .stem-name .ui-icon, .stem-track-label .ui-icon { color: #a78bfa; }
-.stem-track-label { font-weight: 600; }
+.stem-track-label { font-size: .88rem; font-weight: 600; }
 .stem-download { display: inline-flex; align-items: center; gap: 6px; color: #c4b5fd !important; font-size: .82rem; text-decoration: none; }
 .stem-download .ui-icon { width: .9rem; height: .9rem; }
 .stem-download:hover { text-decoration: underline; }
@@ -889,7 +1058,7 @@ footer { display: none !important; }
   #studio-hero { padding: 28px 24px; border-radius: 22px; }
   #sync-mixer { display: block; }
   #mixer-sidebar { position: static; margin-bottom: 1rem; }
-  #stem-track-list { grid-template-columns: 1fr; }
+  .stem-track-grid { grid-template-columns: 1fr; }
 }
 """