Redesign the studio UI from the voice-studio prototype

Adopt the Claude Design prototype's direction while keeping all real
functionality (SSE progress, voice cloning + consent, script import,
editable turns):

- Instrument Serif / Plus Jakarta Sans, warm cream palette, floating
cards instead of full-height panes
- Cast panel: labeled speaker-count pills, voice slot cards with
preview + Change, auto-fill of empty slots with unused voices
- Voice library modal: search, gender/tag filter chips, per-voice
slot assignment, clone-a-voice entry
- Model select becomes a Fast/Best quality toggle; CFG scale becomes
an Expressiveness slider (same backend range)
- Output dock becomes a player: custom play button, seekable waveform
with progress, and a synced transcript that highlights the current
line using word-count-proportional timing
- /api/voices now returns per-voice tags and color

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app.py

@@ -29,10 +29,15 @@ MODAL_STUB_NAME = "vibevoice-generator"
 MODAL_CLASS_NAME = "VibeVoiceModel"
 
 AVAILABLE_MODELS = ["VibeVoice-1.5B", "VibeVoice-7B"]
-VOICE_GENDERS = {
-    "Cherry": "F", "Chicago": "M", "Janus": "M",
-    "Mantis": "F", "Sponge": "M", "Starchild": "F",
+VOICE_INFO = {
+    "Cherry": {"gender": "F", "tags": ["Warm", "Storyteller"], "color": "#E2582A"},
+    "Chicago": {"gender": "M", "tags": ["Deep", "Narrator"], "color": "#2F6F63"},
+    "Janus": {"gender": "M", "tags": ["Bright", "Conversational"], "color": "#CC8A2E"},
+    "Mantis": {"gender": "F", "tags": ["Crisp", "Energetic"], "color": "#7B4B94"},
+    "Sponge": {"gender": "M", "tags": ["Playful", "Animated"], "color": "#3A7CA5"},
+    "Starchild": {"gender": "F", "tags": ["Airy", "Dreamy"], "color": "#B6558C"},
 }
+VOICE_GENDERS = {name: info["gender"] for name, info in VOICE_INFO.items()}
 AVAILABLE_VOICES = list(VOICE_GENDERS.keys())
 DEFAULT_SPEAKERS = ["Cherry", "Chicago", "Janus", "Mantis"]
 
@@ -566,8 +571,14 @@ async def api_models() -> list[str]:
 @app.get("/api/voices")
 async def api_voices() -> list[dict]:
     return [
-        {"name": name, "gender": VOICE_GENDERS[name], "preview_url": f"/public/voices/{name}.mp3"}
-        for name in AVAILABLE_VOICES
+        {
+            "name": name,
+            "gender": info["gender"],
+            "tags": info["tags"],
+            "color": info["color"],
+            "preview_url": f"/public/voices/{name}.mp3",
+        }
+        for name, info in VOICE_INFO.items()
     ]
 
 

static/app.js

@@ -24,6 +24,12 @@ const PRIMARY_STAGE_MESSAGES = {
   error: ["Error", "Check the log for details."],
 };
 
+const QUALITY_LABELS = { "VibeVoice-1.5B": "Fast", "VibeVoice-7B": "Best" };
+const GENDER_LABELS = { F: "Feminine", M: "Masculine" };
+const SPEAKER_FALLBACK_COLORS = ["#e2582a", "#2f6f63", "#cc8a2e", "#7b4b94"];
+const CUSTOM_VOICE_VALUE = "__custom__";
+const MAX_CUSTOM_AUDIO_BYTES = 15 * 1024 * 1024;
+
 const state = {
   turns: [],
   numSpeakers: 2,
@@ -31,25 +37,33 @@ const state = {
   voiceSelections: [null, null, null, null],
   customVoiceFiles: [null, null, null, null],
   models: [],
+  model: null,
   examples: [],
   parodyLines: [],
   parodyIndex: 0,
   previewAudio: new Audio(),
   playingVoice: null,
+  librarySearch: "",
+  libraryFilter: "all",
+  resultTurns: [],       // snapshot of turns for the synced transcript
+  wavePeaks: null,
+  activeSyncIndex: -1,
 };
 
 const el = {};
 [
-  "runtimeStatus", "runtimeLabel", "aboutBtn", "aboutDialog", "closeAboutBtn",
-  "modelSelect", "speakerStepper", "voiceRows", "cfgScale", "cfgScaleValue",
+  "runtimeStatus", "runtimeLabel", "browseVoicesBtn", "aboutBtn", "aboutDialog", "closeAboutBtn",
+  "speakerStepper", "voiceRows", "qualityPills", "cfgScale", "cfgScaleValue",
   "voiceConsentRow", "voiceConsentCheckbox",
   "scriptPrompt", "durationSelect", "generateScriptBtn", "examplePills", "openImportBtn", "scriptGenStatus",
   "scriptTitle", "scriptDuration", "turnsList", "addTurnBtn",
   "generateBarMeta", "generateBtn",
   "statusCard", "statusTitle", "statusDesc",
   "dockEmpty", "resultBlock", "resultWaveform", "resultAudio",
+  "playBtn", "playerTime", "syncedTranscript",
   "generationTime", "audioDuration", "resultModel", "downloadBtn",
   "logToggleBtn", "logBox",
+  "voiceLibraryDialog", "closeLibraryBtn", "librarySearch", "libraryFilters", "libraryGrid",
   "importDialog", "pastedScript", "scriptFileUpload", "cancelImportBtn", "loadScriptBtn",
 ].forEach((id) => { el[id] = document.getElementById(id); });
 
@@ -58,9 +72,27 @@ function autoGrow(textarea) {
   textarea.style.height = `${textarea.scrollHeight}px`;
 }
 
-function genderOf(name) {
-  const v = state.voices.find((x) => x.name === name);
-  return v ? v.gender : "?";
+function voiceByName(name) {
+  return state.voices.find((v) => v.name === name) || null;
+}
+
+function isCustomVoice(i) {
+  return state.voiceSelections[i] === CUSTOM_VOICE_VALUE;
+}
+
+function anyCustomVoiceActive() {
+  return Array.from({ length: state.numSpeakers }, (_, i) => i).some(isCustomVoice);
+}
+
+function slotColor(i) {
+  if (isCustomVoice(i)) return SPEAKER_FALLBACK_COLORS[i];
+  const voice = voiceByName(state.voiceSelections[i]);
+  return voice ? voice.color : SPEAKER_FALLBACK_COLORS[i];
+}
+
+function slotVoiceLabel(i) {
+  if (isCustomVoice(i)) return "Custom voice";
+  return state.voiceSelections[i] || `Voice ${i + 1}`;
 }
 
 function estimateDuration(turns) {
@@ -75,16 +107,32 @@ function formatDuration(seconds) {
   return seconds < 60 ? `${seconds.toFixed(1)}s` : `${Math.floor(seconds / 60)}m ${Math.round(seconds % 60)}s`;
 }
 
-/* ---------------- About dialog ---------------- */
+function formatClock(seconds) {
+  if (!Number.isFinite(seconds)) return "0:00";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+/* ---------------- Dialogs ---------------- */
 el.aboutBtn.addEventListener("click", () => el.aboutDialog.showModal());
 el.closeAboutBtn.addEventListener("click", () => el.aboutDialog.close());
 el.aboutDialog.addEventListener("click", (e) => { if (e.target === el.aboutDialog) el.aboutDialog.close(); });
 
-/* ---------------- Import dialog ---------------- */
 el.openImportBtn.addEventListener("click", () => el.importDialog.showModal());
 el.cancelImportBtn.addEventListener("click", () => el.importDialog.close());
 el.importDialog.addEventListener("click", (e) => { if (e.target === el.importDialog) el.importDialog.close(); });
 
+function openLibrary() {
+  renderLibrary();
+  el.voiceLibraryDialog.showModal();
+}
+el.browseVoicesBtn.addEventListener("click", openLibrary);
+el.closeLibraryBtn.addEventListener("click", () => el.voiceLibraryDialog.close());
+el.voiceLibraryDialog.addEventListener("click", (e) => {
+  if (e.target === el.voiceLibraryDialog) el.voiceLibraryDialog.close();
+});
+
 /* ---------------- Status polling ---------------- */
 async function updateStatus() {
   try {
@@ -100,90 +148,112 @@ async function updateStatus() {
 }
 
 /* ---------------- Voice preview ---------------- */
-function playVoicePreview(name, button) {
+function refreshPreviewButtons() {
+  document.querySelectorAll(".voice-play").forEach((b) => {
+    const playing = b.dataset.voice === state.playingVoice;
+    b.classList.toggle("playing", playing);
+    b.textContent = playing ? "❚❚" : "▶";
+  });
+  document.querySelectorAll(".voice-preview-link").forEach((b) => {
+    b.textContent = b.dataset.voice === state.playingVoice ? "Playing..." : "Preview";
+  });
+}
+
+function playVoicePreview(name) {
   if (state.playingVoice === name) {
     state.previewAudio.pause();
+    state.playingVoice = null;
+    refreshPreviewButtons();
     return;
   }
-  const voice = state.voices.find((v) => v.name === name);
+  const voice = voiceByName(name);
   if (!voice) return;
   state.previewAudio.src = voice.preview_url;
   state.playingVoice = name;
-  document.querySelectorAll(".voice-play").forEach((b) => b.classList.toggle("playing", b === button));
+  refreshPreviewButtons();
   state.previewAudio.play().catch((err) => {
     state.playingVoice = null;
-    document.querySelectorAll(".voice-play").forEach((b) => b.classList.remove("playing"));
+    refreshPreviewButtons();
     console.error("Voice preview failed to play:", err);
   });
 }
 state.previewAudio.addEventListener("ended", () => {
   state.playingVoice = null;
-  document.querySelectorAll(".voice-play").forEach((b) => b.classList.remove("playing"));
+  refreshPreviewButtons();
 });
 
-/* ---------------- Sidebar: model / speakers / voices ---------------- */
-const CUSTOM_VOICE_VALUE = "__custom__";
-const MAX_CUSTOM_AUDIO_BYTES = 15 * 1024 * 1024;
-
-function isCustomVoice(i) {
-  return state.voiceSelections[i] === CUSTOM_VOICE_VALUE;
-}
-
-function anyCustomVoiceActive() {
-  return Array.from({ length: state.numSpeakers }, (_, i) => i).some(isCustomVoice);
-}
-
+/* ---------------- Sidebar: cast / quality / expressiveness ---------------- */
 function updateVoiceConsentVisibility() {
   el.voiceConsentRow.hidden = !anyCustomVoiceActive();
 }
 
-function renderSidebar() {
-  el.modelSelect.innerHTML = state.models.map((m) => `<option value="${m}">${m}</option>`).join("");
+function fillEmptySlots() {
+  if (!state.voices.length) return;
+  for (let i = 0; i < state.numSpeakers; i += 1) {
+    if (state.voiceSelections[i]) continue;
+    const used = new Set(state.voiceSelections.filter(Boolean));
+    const pick = state.voices.find((v) => !used.has(v.name)) || state.voices[i % state.voices.length];
+    state.voiceSelections[i] = pick.name;
+  }
+}
 
+function renderCast() {
+  fillEmptySlots();
   el.speakerStepper.querySelectorAll("button").forEach((btn) => {
     btn.classList.toggle("active", Number(btn.dataset.count) === state.numSpeakers);
   });
 
   el.voiceRows.innerHTML = "";
   for (let i = 0; i < state.numSpeakers; i += 1) {
-    const row = document.createElement("div");
-    row.className = "voice-row";
+    const card = document.createElement("div");
+    card.className = "slot-card";
 
     const dot = document.createElement("span");
     dot.className = "voice-dot";
-    dot.style.background = `var(--speaker-${i + 1})`;
-
-    const select = document.createElement("select");
-    select.innerHTML =
-      `<option value="${CUSTOM_VOICE_VALUE}">🎙️ Clone a voice…</option>` +
-      state.voices.map((v) => `<option value="${v.name}">${v.name} (${v.gender})</option>`).join("");
-    if (state.voiceSelections[i]) select.value = state.voiceSelections[i];
-
-    const playBtn = document.createElement("button");
-    playBtn.type = "button";
-    playBtn.className = "voice-play";
-    playBtn.textContent = "▶";
-    playBtn.title = "Preview voice";
-    playBtn.addEventListener("click", () => playVoicePreview(select.value, playBtn));
-
-    select.addEventListener("change", () => {
-      state.voiceSelections[i] = select.value;
-      if (select.value !== CUSTOM_VOICE_VALUE) state.customVoiceFiles[i] = null;
+    dot.style.background = slotColor(i);
+
+    const info = document.createElement("div");
+    info.className = "slot-info";
+    const name = document.createElement("div");
+    name.className = "slot-name";
+    name.textContent = slotVoiceLabel(i);
+    const meta = document.createElement("div");
+    meta.className = "slot-meta";
+    if (isCustomVoice(i)) {
+      meta.textContent = state.customVoiceFiles[i] ? state.customVoiceFiles[i].name : "Upload a clip below";
+    } else {
+      const voice = voiceByName(state.voiceSelections[i]);
+      meta.textContent = voice ? [GENDER_LABELS[voice.gender], ...(voice.tags || [])].join(" · ") : "";
+    }
+    info.append(name, meta);
+    card.append(dot, info);
+
+    if (!isCustomVoice(i) && state.voiceSelections[i]) {
+      const playBtn = document.createElement("button");
+      playBtn.type = "button";
+      playBtn.className = "voice-play";
+      playBtn.dataset.voice = state.voiceSelections[i];
       playBtn.textContent = "▶";
-      renderSidebar();
-      renderTurns();
-    });
+      playBtn.title = "Preview voice";
+      playBtn.addEventListener("click", () => playVoicePreview(playBtn.dataset.voice));
+      card.append(playBtn);
+    }
+
+    const changeBtn = document.createElement("button");
+    changeBtn.type = "button";
+    changeBtn.className = "slot-change";
+    changeBtn.textContent = "Change";
+    changeBtn.addEventListener("click", openLibrary);
+    card.append(changeBtn);
 
-    row.append(dot, select, playBtn);
-    el.voiceRows.append(row);
+    el.voiceRows.append(card);
 
     if (isCustomVoice(i)) {
-      playBtn.hidden = true;
       const uploadRow = document.createElement("div");
       uploadRow.className = "custom-voice-row";
 
       const fileLabel = document.createElement("label");
-      fileLabel.className = "btn btn-sm upload-mini-btn";
+      fileLabel.className = "btn upload-mini-btn";
       fileLabel.textContent = state.customVoiceFiles[i] ? state.customVoiceFiles[i].name : "Choose audio file…";
       const fileInput = document.createElement("input");
       fileInput.type = "file";
@@ -198,7 +268,7 @@ function renderSidebar() {
           return;
         }
         state.customVoiceFiles[i] = file;
-        renderSidebar();
+        renderCast();
       });
       fileLabel.append(fileInput);
       uploadRow.append(fileLabel);
@@ -206,12 +276,12 @@ function renderSidebar() {
       if (state.customVoiceFiles[i]) {
         const clearBtn = document.createElement("button");
         clearBtn.type = "button";
-        clearBtn.className = "btn btn-sm btn-icon-only";
+        clearBtn.className = "btn btn-icon-only";
         clearBtn.textContent = "✕";
         clearBtn.title = "Remove file";
         clearBtn.addEventListener("click", () => {
           state.customVoiceFiles[i] = null;
-          renderSidebar();
+          renderCast();
         });
         uploadRow.append(clearBtn);
       }
@@ -221,24 +291,199 @@ function renderSidebar() {
   }
 
   updateVoiceConsentVisibility();
+  refreshPreviewButtons();
+}
+
+function renderQuality() {
+  el.qualityPills.innerHTML = "";
+  state.models.forEach((model) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "single-line";
+    btn.title = model;
+    const label = document.createElement("span");
+    label.textContent = QUALITY_LABELS[model] || model;
+    btn.append(label);
+    btn.classList.toggle("active", model === state.model);
+    btn.addEventListener("click", () => {
+      state.model = model;
+      renderQuality();
+    });
+    el.qualityPills.append(btn);
+  });
 }
 
 el.speakerStepper.querySelectorAll("button").forEach((btn) => {
   btn.addEventListener("click", () => {
     state.numSpeakers = Number(btn.dataset.count);
-    renderSidebar();
+    renderCast();
   });
 });
 
-el.cfgScale.addEventListener("input", () => {
-  el.cfgScaleValue.textContent = Number(el.cfgScale.value).toFixed(2);
+function expressivenessWord(value) {
+  if (value < 1.35) return "Calm";
+  if (value < 1.7) return "Balanced";
+  return "Dynamic";
+}
+
+function updateCfgLabel() {
+  const value = Number(el.cfgScale.value);
+  el.cfgScaleValue.textContent = `${value.toFixed(2)} · ${expressivenessWord(value)}`;
+}
+el.cfgScale.addEventListener("input", updateCfgLabel);
+updateCfgLabel();
+
+/* ---------------- Voice library ---------------- */
+function libraryFilterOptions() {
+  const tags = Array.from(new Set(state.voices.flatMap((v) => v.tags || [])));
+  return [
+    { key: "all", label: "All" },
+    { key: "F", label: "Feminine" },
+    { key: "M", label: "Masculine" },
+    ...tags.map((t) => ({ key: t, label: t })),
+  ];
+}
+
+function renderLibraryFilters() {
+  el.libraryFilters.innerHTML = "";
+  libraryFilterOptions().forEach((opt) => {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "filter-chip";
+    chip.textContent = opt.label;
+    chip.classList.toggle("active", state.libraryFilter === opt.key);
+    chip.addEventListener("click", () => {
+      state.libraryFilter = opt.key;
+      renderLibraryFilters();
+      renderLibraryGrid();
+    });
+    el.libraryFilters.append(chip);
+  });
+}
+
+function makeSlotAssignRow(isAssigned, assignedColor, onAssign) {
+  const row = document.createElement("div");
+  row.className = "slot-assign";
+  const label = document.createElement("span");
+  label.className = "slot-assign-label";
+  label.textContent = "Assign to";
+  row.append(label);
+  for (let i = 0; i < state.numSpeakers; i += 1) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.textContent = String(i + 1);
+    if (isAssigned(i)) {
+      btn.classList.add("assigned");
+      btn.style.background = assignedColor(i);
+    }
+    btn.addEventListener("click", () => onAssign(i));
+    row.append(btn);
+  }
+  return row;
+}
+
+function assignVoiceToSlot(i, value) {
+  state.voiceSelections[i] = value;
+  if (value !== CUSTOM_VOICE_VALUE) state.customVoiceFiles[i] = null;
+  renderCast();
+  renderTurns();
+  renderLibraryGrid();
+}
+
+function renderLibraryGrid() {
+  el.libraryGrid.innerHTML = "";
+  const q = state.librarySearch.trim().toLowerCase();
+  const filtered = state.voices.filter((v) => {
+    const matchesSearch = !q || v.name.toLowerCase().includes(q);
+    const matchesFilter =
+      state.libraryFilter === "all" ||
+      v.gender === state.libraryFilter ||
+      (v.tags || []).includes(state.libraryFilter);
+    return matchesSearch && matchesFilter;
+  });
+
+  filtered.forEach((voice) => {
+    const card = document.createElement("div");
+    card.className = "voice-card";
+
+    const avatar = document.createElement("span");
+    avatar.className = "voice-avatar";
+    avatar.style.background = voice.color;
+    avatar.textContent = voice.name[0];
+
+    const body = document.createElement("div");
+    body.className = "voice-card-body";
+
+    const head = document.createElement("div");
+    head.className = "voice-card-head";
+    const name = document.createElement("span");
+    name.className = "voice-card-name";
+    name.textContent = voice.name;
+    const preview = document.createElement("button");
+    preview.type = "button";
+    preview.className = "voice-preview-link";
+    preview.dataset.voice = voice.name;
+    preview.textContent = "Preview";
+    preview.addEventListener("click", () => playVoicePreview(voice.name));
+    head.append(name, preview);
+
+    const meta = document.createElement("div");
+    meta.className = "voice-card-meta";
+    meta.textContent = [GENDER_LABELS[voice.gender], ...(voice.tags || [])].join(" · ");
+
+    body.append(head, meta, makeSlotAssignRow(
+      (i) => state.voiceSelections[i] === voice.name,
+      () => voice.color,
+      (i) => assignVoiceToSlot(i, voice.name),
+    ));
+    card.append(avatar, body);
+    el.libraryGrid.append(card);
+  });
+
+  // Clone-a-voice card, always available
+  const clone = document.createElement("div");
+  clone.className = "voice-card clone-card";
+  const cloneAvatar = document.createElement("span");
+  cloneAvatar.className = "voice-avatar";
+  cloneAvatar.textContent = "🎙️";
+  const cloneBody = document.createElement("div");
+  cloneBody.className = "voice-card-body";
+  const cloneHead = document.createElement("div");
+  cloneHead.className = "voice-card-head";
+  const cloneName = document.createElement("span");
+  cloneName.className = "voice-card-name";
+  cloneName.textContent = "Clone a voice";
+  cloneHead.append(cloneName);
+  const cloneMeta = document.createElement("div");
+  cloneMeta.className = "voice-card-meta";
+  cloneMeta.textContent = "Upload a short clip of a voice you have rights to use";
+  cloneBody.append(cloneHead, cloneMeta, makeSlotAssignRow(
+    (i) => isCustomVoice(i),
+    () => "#2a2016",
+    (i) => assignVoiceToSlot(i, CUSTOM_VOICE_VALUE),
+  ));
+  clone.append(cloneAvatar, cloneBody);
+  el.libraryGrid.append(clone);
+
+  refreshPreviewButtons();
+}
+
+function renderLibrary() {
+  el.librarySearch.value = state.librarySearch;
+  renderLibraryFilters();
+  renderLibraryGrid();
+}
+
+el.librarySearch.addEventListener("input", () => {
+  state.librarySearch = el.librarySearch.value;
+  renderLibraryGrid();
 });
 
 /* ---------------- Turn editor ---------------- */
 function speakerChoiceLabel(i) {
   const sel = state.voiceSelections[i];
   if (sel === CUSTOM_VOICE_VALUE) return `Speaker ${i + 1} · Custom voice`;
-  return sel ? `Speaker ${i + 1} · ${sel} (${genderOf(sel)})` : `Speaker ${i + 1}`;
+  return sel ? `Speaker ${i + 1} · ${sel}` : `Speaker ${i + 1}`;
 }
 
 function renderTurns() {
@@ -247,7 +492,9 @@ function renderTurns() {
     const empty = document.createElement("div");
     empty.className = "empty-transcript";
     empty.id = "emptyTurns";
-    empty.innerHTML = "Nothing here yet. Type a scenario above and click <strong>Write with AI</strong>, or start typing your own line below.";
+    empty.innerHTML =
+      '<div class="empty-title">No scene yet</div>' +
+      "Type a scenario above and click <strong>Write with AI</strong>, pick an example, or start typing your own line below.";
     el.turnsList.append(empty);
     updateMeta();
     return;
@@ -257,7 +504,7 @@ function renderTurns() {
     const spk = Math.min(4, Math.max(1, turn.speaker || 1));
     const card = document.createElement("div");
     card.className = "turn-card";
-    card.dataset.speaker = String(spk);
+    card.style.borderLeftColor = slotColor(spk - 1);
 
     const head = document.createElement("div");
     head.className = "turn-head";
@@ -333,7 +580,7 @@ function loadScriptResult(result, titleFallback) {
   while (voices.length < 4) voices.push(null);
   state.voiceSelections = voices;
   el.scriptTitle.textContent = result.title || titleFallback || "Untitled conversation";
-  renderSidebar();
+  renderCast();
   renderTurns();
   el.dockEmpty.hidden = false;
   el.resultBlock.classList.remove("visible");
@@ -419,18 +666,15 @@ el.generateScriptBtn.addEventListener("click", async () => {
   }
 });
 
-/* ---------------- Waveform ---------------- */
-async function drawWaveform(url, canvas, color = "#b5502e") {
+/* ---------------- Player: waveform + synced transcript ---------------- */
+async function decodeWavePeaks(url, blocks) {
   const response = await fetch(url);
-  if (!response.ok) return;
+  if (!response.ok) return null;
   const data = await response.arrayBuffer();
   const context = new AudioContext();
   try {
     const buffer = await context.decodeAudioData(data.slice(0));
     const samples = buffer.getChannelData(0);
-    const width = canvas.width;
-    const height = canvas.height;
-    const blocks = Math.min(110, Math.max(30, Math.floor(width / 6)));
     const blockSize = Math.max(1, Math.floor(samples.length / blocks));
     const peaks = [];
     for (let block = 0; block < blocks; block += 1) {
@@ -441,21 +685,118 @@ async function drawWaveform(url, canvas, color = "#b5502e") {
       peaks.push(peak);
     }
     const maxPeak = Math.max(...peaks, 0.001);
-    const draw = canvas.getContext("2d");
-    draw.clearRect(0, 0, width, height);
-    draw.fillStyle = color;
-    const barWidth = Math.max(2, width / blocks - 2);
-    peaks.forEach((peak, i) => {
-      const normalized = peak / maxPeak;
-      const barHeight = Math.max(3, normalized * height * 0.9);
-      const x = i * (width / blocks) + 1;
-      draw.fillRect(x, (height - barHeight) / 2, barWidth, barHeight);
-    });
+    return peaks.map((p) => p / maxPeak);
   } finally {
     await context.close();
   }
 }
 
+function renderWave(progress) {
+  const canvas = el.resultWaveform;
+  const cssWidth = canvas.clientWidth || 240;
+  const cssHeight = canvas.clientHeight || 44;
+  const dpr = window.devicePixelRatio || 1;
+  if (canvas.width !== Math.round(cssWidth * dpr)) {
+    canvas.width = Math.round(cssWidth * dpr);
+    canvas.height = Math.round(cssHeight * dpr);
+  }
+  const draw = canvas.getContext("2d");
+  draw.setTransform(dpr, 0, 0, dpr, 0, 0);
+  draw.clearRect(0, 0, cssWidth, cssHeight);
+  const peaks = state.wavePeaks || Array.from({ length: 48 }, () => 0.3);
+  const blocks = peaks.length;
+  const step = cssWidth / blocks;
+  const barWidth = Math.max(2, step - 2);
+  peaks.forEach((peak, i) => {
+    const barHeight = Math.max(3, peak * cssHeight * 0.9);
+    const x = i * step + 1;
+    const played = (i + 0.5) / blocks <= progress;
+    draw.fillStyle = played ? "#e2582a" : "#e4d8c2";
+    draw.fillRect(x, (cssHeight - barHeight) / 2, barWidth, barHeight);
+  });
+}
+
+function buildSyncedTranscript(snapshot) {
+  // Approximate per-line timing: apportion total duration by word count.
+  const words = snapshot.map((t) => t.text.split(/\s+/).filter(Boolean).length || 1);
+  const total = words.reduce((a, b) => a + b, 0);
+  let acc = 0;
+  state.resultTurns = snapshot.map((t, i) => {
+    const startRatio = acc / total;
+    acc += words[i];
+    return { ...t, startRatio, endRatio: acc / total };
+  });
+  state.activeSyncIndex = -1;
+
+  el.syncedTranscript.innerHTML = "";
+  state.resultTurns.forEach((turn, i) => {
+    const row = document.createElement("div");
+    row.className = "sync-line";
+    const dot = document.createElement("span");
+    dot.className = "sync-dot";
+    dot.style.background = slotColor(turn.speaker - 1);
+    const body = document.createElement("div");
+    const label = document.createElement("div");
+    label.className = "sync-label";
+    label.textContent = `Speaker ${turn.speaker} · ${slotVoiceLabel(turn.speaker - 1)}`;
+    const text = document.createElement("div");
+    text.className = "sync-text";
+    text.textContent = turn.text;
+    body.append(label, text);
+    row.append(dot, body);
+    row.addEventListener("click", () => {
+      const audio = el.resultAudio;
+      if (Number.isFinite(audio.duration) && audio.duration > 0) {
+        audio.currentTime = turn.startRatio * audio.duration;
+        if (audio.paused) audio.play().catch(() => {});
+      }
+    });
+    el.syncedTranscript.append(row);
+    state.resultTurns[i].row = row;
+  });
+}
+
+function updatePlaybackUI() {
+  const audio = el.resultAudio;
+  const duration = audio.duration;
+  if (!Number.isFinite(duration) || duration <= 0) return;
+  const ratio = audio.currentTime / duration;
+  renderWave(ratio);
+  el.playerTime.textContent = `${formatClock(audio.currentTime)} / ${formatClock(duration)}`;
+
+  let active = -1;
+  for (let i = 0; i < state.resultTurns.length; i += 1) {
+    if (ratio >= state.resultTurns[i].startRatio) active = i;
+  }
+  if (active !== state.activeSyncIndex) {
+    state.resultTurns.forEach((t, i) => t.row.classList.toggle("active", i === active));
+    state.activeSyncIndex = active;
+    const row = state.resultTurns[active] && state.resultTurns[active].row;
+    if (row) row.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }
+}
+
+el.playBtn.addEventListener("click", () => {
+  const audio = el.resultAudio;
+  if (!audio.src) return;
+  if (audio.paused) audio.play().catch(() => {});
+  else audio.pause();
+});
+el.resultAudio.addEventListener("play", () => { el.playBtn.textContent = "❚❚"; });
+el.resultAudio.addEventListener("pause", () => { el.playBtn.textContent = "►"; });
+el.resultAudio.addEventListener("ended", () => { el.playBtn.textContent = "►"; });
+el.resultAudio.addEventListener("timeupdate", updatePlaybackUI);
+el.resultAudio.addEventListener("loadedmetadata", updatePlaybackUI);
+
+el.resultWaveform.addEventListener("click", (e) => {
+  const audio = el.resultAudio;
+  if (!Number.isFinite(audio.duration) || audio.duration <= 0) return;
+  const rect = el.resultWaveform.getBoundingClientRect();
+  const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+  audio.currentTime = ratio * audio.duration;
+  updatePlaybackUI();
+});
+
 /* ---------------- Generation status ---------------- */
 function nextParodyLine() {
   if (!state.parodyLines.length) return null;
@@ -507,10 +848,15 @@ el.generateBtn.addEventListener("click", async () => {
     return;
   }
 
+  const turnsSnapshot = state.turns
+    .filter((t) => (t.text || "").trim())
+    .map((t) => ({ speaker: Math.min(4, Math.max(1, t.speaker || 1)), text: t.text.trim() }));
+
   el.generateBtn.disabled = true;
   el.generateBtn.textContent = "Generating...";
   el.resultBlock.classList.remove("visible");
-  el.dockEmpty.hidden = false;
+  el.resultAudio.pause();
+  el.dockEmpty.hidden = true;
   el.logBox.textContent = "";
   el.logBox.classList.remove("visible");
   el.logToggleBtn.hidden = true;
@@ -535,7 +881,7 @@ el.generateBtn.addEventListener("click", async () => {
   }
 
   const payload = {
-    model: el.modelSelect.value,
+    model: state.model,
     num_speakers: state.numSpeakers,
     turns: state.turns,
     speakers: state.voiceSelections.map((v) => (v === CUSTOM_VOICE_VALUE ? null : v)),
@@ -587,15 +933,20 @@ el.generateBtn.addEventListener("click", async () => {
           el.downloadBtn.href = url;
           el.generationTime.textContent = formatDuration((performance.now() - started) / 1000);
           el.audioDuration.textContent = formatDuration(evt.audio_duration);
-          el.resultModel.textContent = el.modelSelect.value;
-          await drawWaveform(url, el.resultWaveform);
+          el.resultModel.textContent = state.model;
+          el.playerTime.textContent = `0:00 / ${formatClock(evt.audio_duration)}`;
+          el.playBtn.textContent = "►";
+          buildSyncedTranscript(turnsSnapshot);
           el.dockEmpty.hidden = true;
           el.resultBlock.classList.add("visible");
+          state.wavePeaks = await decodeWavePeaks(url, 48);
+          renderWave(0);
         }
       }
     }
   } catch (error) {
     setStatus("error", error.message);
+    el.dockEmpty.hidden = false;
   } finally {
     el.generateBtn.disabled = false;
     el.generateBtn.textContent = "Generate Audio";
@@ -611,16 +962,20 @@ async function init() {
     fetch("/api/duration-options").then((r) => r.json()),
   ]);
   state.models = models;
+  state.model = models[0] || null;
   state.voices = voices;
   state.examples = examples;
   state.voiceSelections = voices.slice(0, 4).map((v) => v.name);
   while (state.voiceSelections.length < 4) state.voiceSelections.push(null);
 
-  el.durationSelect.innerHTML = durationOptions.map((m) => `<option value="${m}">${m} min</option>`).join("");
+  el.durationSelect.innerHTML = durationOptions
+    .map((m) => `<option value="${m}">${m >= 60 ? "1 hr" : `${m} min`}</option>`)
+    .join("");
   const defaultDuration = durationOptions.includes(2) ? 2 : durationOptions[0];
   el.durationSelect.value = String(defaultDuration);
 
-  renderSidebar();
+  renderCast();
+  renderQuality();
   renderTurns();
   renderExamplePills();
   updateStatus();

static/index.html

@@ -3,12 +3,18 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#f7f4ee" />
+    <meta name="theme-color" content="#faf3e7" />
     <meta
       name="description"
       content="Chorus — an AI voice studio for writing and generating natural multi-speaker dialogue, powered by VibeVoice."
     />
     <title>Chorus — AI Voice Studio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="/static/styles.css" />
     <script src="/static/app.js" defer></script>
   </head>
@@ -16,32 +22,28 @@
     <header class="topbar">
       <a class="wordmark" href="/">
         <span class="mark">Chorus</span>
-        <span class="tagline">Voice Studio</span>
+        <span class="brand-pill">VOICE STUDIO</span>
       </a>
-      <div class="topbar-right">
+      <nav class="topbar-right">
+        <button class="link-quiet" type="button" id="browseVoicesBtn">Browse voices</button>
         <button class="link-quiet" type="button" id="aboutBtn">How it works</button>
         <div class="runtime-status" id="runtimeStatus" aria-live="polite">
           <span class="status-dot"></span>
           <span id="runtimeLabel">Connecting</span>
         </div>
-      </div>
+      </nav>
     </header>
 
     <div class="app-shell">
       <!-- SIDEBAR: cast & model -->
       <aside class="pane sidebar">
         <div class="side-section">
-          <span class="side-label">Model</span>
-          <select id="modelSelect"></select>
-        </div>
-
-        <div class="side-section">
-          <span class="side-label">Speakers</span>
-          <div class="speaker-stepper" id="speakerStepper">
-            <button type="button" data-count="1">1</button>
-            <button type="button" data-count="2">2</button>
-            <button type="button" data-count="3">3</button>
-            <button type="button" data-count="4">4</button>
+          <span class="side-label">Your cast</span>
+          <div class="seg" id="speakerStepper">
+            <button type="button" data-count="1"><strong>1</strong><span>Solo</span></button>
+            <button type="button" data-count="2"><strong>2</strong><span>Duo</span></button>
+            <button type="button" data-count="3"><strong>3</strong><span>Trio</span></button>
+            <button type="button" data-count="4"><strong>4</strong><span>Cast</span></button>
           </div>
           <div id="voiceRows"></div>
           <div id="voiceConsentRow" class="voice-consent-row" hidden>
@@ -53,11 +55,17 @@
         </div>
 
         <div class="side-section">
-          <span class="side-label">CFG Scale</span>
-          <div class="slider-row">
-            <input id="cfgScale" type="range" min="1.0" max="2.0" step="0.05" value="2.0" />
-            <span id="cfgScaleValue" class="slider-value">2.00</span>
+          <span class="side-label">Quality</span>
+          <div class="seg" id="qualityPills"></div>
+        </div>
+
+        <div class="side-section">
+          <div class="side-label-row">
+            <span class="side-label">Expressiveness</span>
+            <span id="cfgScaleValue" class="side-label-value">2.00 · Dynamic</span>
           </div>
+          <input id="cfgScale" type="range" min="1.0" max="2.0" step="0.05" value="2.0" />
+          <div class="slider-ends"><span>Calm &amp; steady</span><span>Big &amp; dynamic</span></div>
         </div>
 
         <div class="sidebar-footer">
@@ -67,8 +75,9 @@
       </aside>
 
       <!-- CANVAS: script composer + transcript -->
-      <main class="pane canvas">
-        <div class="canvas-inner">
+      <main class="pane-col canvas">
+        <div class="card composer-card">
+          <h2 class="card-heading">What's the scene?</h2>
           <div class="composer">
             <textarea
               id="scriptPrompt"
@@ -83,12 +92,14 @@
                   <span aria-hidden="true">📋</span> Import script
                 </button>
               </div>
-              <button id="generateScriptBtn" class="btn btn-ink" type="button">Write with AI</button>
+              <button id="generateScriptBtn" class="btn btn-accent" type="button">Write with AI</button>
             </div>
           </div>
           <div class="example-chips" id="examplePills"></div>
-          <div id="scriptGenStatus" class="transcript-meta" style="margin: 6px 0 4px;"></div>
+          <div id="scriptGenStatus" class="gen-status"></div>
+        </div>
 
+        <div class="card script-card">
           <div class="transcript-header">
             <h2 id="scriptTitle">Untitled conversation</h2>
             <span class="transcript-meta" id="scriptDuration"></span>
@@ -96,39 +107,48 @@
 
           <div id="turnsList">
             <div class="empty-transcript" id="emptyTurns">
-              Nothing here yet. Type a scenario above and click <strong>Write with AI</strong>,
-              or start typing your own line below.
+              <div class="empty-title">No scene yet</div>
+              Type a scenario above and click <strong>Write with AI</strong>, pick an example, or
+              start typing your own line below.
             </div>
           </div>
           <button class="add-turn" id="addTurnBtn" type="button">+ Add a line</button>
+        </div>
 
-          <div class="generate-bar">
-            <span class="generate-bar-meta" id="generateBarMeta">Add dialogue to begin</span>
-            <button id="generateBtn" class="btn btn-ink" type="button">Generate Audio</button>
-          </div>
+        <div class="generate-bar">
+          <span class="generate-bar-meta" id="generateBarMeta">Add dialogue to begin</span>
+          <button id="generateBtn" class="btn btn-ink" type="button">Generate Audio</button>
         </div>
       </main>
 
       <!-- DOCK: generation status + output -->
       <aside class="pane dock">
-        <div class="dock-label">Output</div>
+        <div class="side-label dock-label">Your recording</div>
 
         <div id="statusCard" class="status-card">
+          <div class="status-spinner" id="statusSpinner"></div>
           <div class="status-title"><span class="status-dot-pulse" id="statusDot"></span><span id="statusTitle">Working</span></div>
           <div class="status-desc" id="statusDesc"></div>
         </div>
 
-        <div id="dockEmpty" class="dock-empty">Your generated audio will appear here.</div>
+        <div id="dockEmpty" class="dock-empty">Your generated audio will appear here once you record a take.</div>
 
         <div id="resultBlock" class="result-block">
-          <canvas id="resultWaveform" width="640" height="68"></canvas>
-          <audio id="resultAudio" controls></audio>
+          <div class="player-top">
+            <button id="playBtn" class="play-btn" type="button" aria-label="Play">►</button>
+            <canvas id="resultWaveform" width="480" height="72"></canvas>
+          </div>
+          <div class="player-time" id="playerTime">0:00 / 0:00</div>
+
+          <div class="synced-transcript" id="syncedTranscript"></div>
+
           <div class="result-metrics">
             <div><span>Generation time</span> <strong id="generationTime">--</strong></div>
             <div><span>Audio length</span> <strong id="audioDuration">--</strong></div>
             <div><span>Model</span> <strong id="resultModel">--</strong></div>
           </div>
-          <a id="downloadBtn" class="btn" download="chorus-audio.wav" style="display:block; text-align:center;">Download WAV</a>
+          <a id="downloadBtn" class="btn btn-pill-outline" download="chorus-audio.wav">Download WAV</a>
+          <audio id="resultAudio" hidden></audio>
         </div>
 
         <button class="log-toggle" id="logToggleBtn" type="button" hidden>View generation log</button>
@@ -136,6 +156,19 @@
       </aside>
     </div>
 
+    <!-- Voice library dialog -->
+    <dialog id="voiceLibraryDialog" class="library-dialog">
+      <div class="dialog-body">
+        <div class="library-head">
+          <h3>Choose your voices</h3>
+          <button class="dialog-close" type="button" id="closeLibraryBtn" aria-label="Close">×</button>
+        </div>
+        <input id="librarySearch" class="library-search" placeholder="Search voices by name..." />
+        <div class="filter-chips" id="libraryFilters"></div>
+        <div class="library-grid" id="libraryGrid"></div>
+      </div>
+    </dialog>
+
     <!-- Import dialog -->
     <dialog id="importDialog">
       <div class="dialog-body">
@@ -170,7 +203,7 @@
           <li><strong>Multi-speaker</strong> — up to 4 distinct voices in one take</li>
           <li><strong>Long-form</strong> — up to 90 minutes of continuous audio</li>
           <li><strong>Natural flow</strong> — turn-taking, filler words, natural pacing</li>
-          <li><strong>Two model sizes</strong> — 1.5B for fast iteration, 7B for higher fidelity</li>
+          <li><strong>Two model sizes</strong> — Fast (1.5B) for iteration, Best (7B) for fidelity</li>
         </ul>
         <img src="/public/images/diagram.jpg" alt="VibeVoice architecture diagram" />
         <div class="dialog-actions" style="justify-content: flex-end;">

static/styles.css

@@ -1,30 +1,33 @@
 :root {
-  --cream: #f7f4ee;
-  --paper: #ffffff;
-  --paper-soft: #fbf9f4;
-  --field: #ece4d2;
-  --border: #e7e1d3;
-  --border-strong: #d8cfb9;
-  --ink: #262019;
-  --ink-dim: #6f6656;
-  --ink-faint: #a89d87;
-  --accent: #b5502e;
-  --accent-hover: #9c4326;
-  --accent-soft: rgba(181, 80, 46, 0.1);
-  --success: #3f7d5c;
+  --cream: #faf3e7;
+  --paper: #fffdf9;
+  --paper-soft: #fbf6ec;
+  --field: #f3eada;
+  --border: #efe4d2;
+  --border-strong: #e4d8c2;
+  --ink: #2a2016;
+  --ink-dim: #6b5f52;
+  --ink-faint: #9c8e7b;
+  --ink-ghost: #b4a691;
+  --accent: #e2582a;
+  --accent-hover: #c1481f;
+  --accent-soft: #fbe3d6;
+  --success: #3f6b4e;
+  --success-soft: #e7efe3;
   --error: #b23b3b;
-  --speaker-1: #b5502e;
-  --speaker-2: #2f6b63;
-  --speaker-3: #b8862b;
-  --speaker-4: #7c5a83;
-  --radius: 14px;
-  --radius-sm: 9px;
-  --shadow: 0 10px 34px rgba(38, 32, 25, 0.08);
-  --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
-  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
+  --speaker-1: #e2582a;
+  --speaker-2: #2f6f63;
+  --speaker-3: #cc8a2e;
+  --speaker-4: #7b4b94;
+  --radius: 20px;
+  --radius-sm: 12px;
+  --shadow: 0 8px 24px rgba(42, 32, 22, 0.08);
+  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
+  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 * { box-sizing: border-box; }
+::selection { background: #f6d9c9; }
 
 html, body {
   margin: 0;
@@ -33,60 +36,49 @@ html, body {
   color: var(--ink);
   font-family: var(--font-ui);
   -webkit-font-smoothing: antialiased;
-  height: 100%;
-}
-
-body {
-  min-height: 100vh;
-  display: grid;
-  grid-template-rows: 56px 1fr;
 }
 
 a { color: var(--accent); }
-.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
-
 button, select, input, textarea { font-family: inherit; }
 
 /* ---------------- Top bar ---------------- */
 .topbar {
-  grid-row: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
-  border-bottom: 1px solid var(--border);
-  background: var(--paper);
-  z-index: 30;
+  padding: 18px 44px;
+  border-bottom: 1px solid #ebdfc9;
 }
 .wordmark {
   display: flex;
   align-items: baseline;
-  gap: 8px;
+  gap: 12px;
   text-decoration: none;
   color: var(--ink);
 }
 .wordmark .mark {
-  font-family: var(--font);
-  font-weight: 700;
+  font-family: var(--font-serif);
   font-style: italic;
-  font-size: 1.35rem;
-  letter-spacing: 0.01em;
+  font-size: 1.8rem;
+  letter-spacing: 0.02em;
 }
-.wordmark .tagline {
-  font-size: 0.72rem;
-  color: var(--ink-faint);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+.brand-pill {
+  font-size: 0.66rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  color: var(--accent);
+  background: var(--accent-soft);
+  padding: 5px 10px;
+  border-radius: 999px;
 }
-.topbar-right { display: flex; align-items: center; gap: 14px; }
+.topbar-right { display: flex; align-items: center; gap: 22px; }
 .link-quiet {
-  font-size: 0.8rem;
+  font-size: 0.84rem;
+  font-weight: 600;
   color: var(--ink-dim);
-  text-decoration: none;
-  border-bottom: 1px dotted var(--border-strong);
-  cursor: pointer;
   background: none;
-  border-top: none; border-left: none; border-right: none;
+  border: none;
+  cursor: pointer;
   padding: 0;
 }
 .link-quiet:hover { color: var(--accent); }
@@ -94,116 +86,155 @@ button, select, input, textarea { font-family: inherit; }
   display: flex;
   align-items: center;
   gap: 7px;
-  font-size: 0.76rem;
-  color: var(--ink-dim);
-  border: 1px solid var(--border);
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--error);
   border-radius: 999px;
-  padding: 5px 11px;
-  background: var(--paper-soft);
+  padding: 7px 14px;
+  background: rgba(178, 59, 59, 0.08);
 }
 .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--error); }
+.runtime-status.ready { color: var(--success); background: var(--success-soft); }
 .runtime-status.ready .status-dot { background: var(--success); }
 
 /* ---------------- App shell ---------------- */
 .app-shell {
-  grid-row: 2;
+  max-width: 1560px;
+  margin: 0 auto;
+  padding: 32px 44px 80px;
   display: grid;
-  grid-template-columns: 272px minmax(0, 1fr) 336px;
-  min-height: 0;
+  grid-template-columns: 320px minmax(0, 1fr) 320px;
+  gap: 26px;
+  align-items: start;
 }
 
-.pane { overflow-y: auto; min-height: 0; }
+.pane {
+  background: var(--paper);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 22px;
+  position: sticky;
+  top: 24px;
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
+}
 .pane::-webkit-scrollbar { width: 7px; }
 .pane::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
 
-/* ---------------- Sidebar ---------------- */
-.sidebar {
-  border-right: 1px solid var(--border);
+.pane-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
+
+.card {
   background: var(--paper);
-  padding: 20px 18px 90px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
 }
-.side-section { margin-bottom: 26px; }
+.card-heading {
+  margin: 0 0 14px;
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: 1.5rem;
+}
+
+/* ---------------- Sidebar ---------------- */
+.side-section { margin-bottom: 24px; }
 .side-label {
   font-size: 0.7rem;
   font-weight: 700;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--ink-faint);
   margin-bottom: 10px;
   display: block;
 }
-select {
-  width: 100%;
-  background-color: var(--paper-soft);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236f6656' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 11px center;
-  border: 1px solid var(--border);
-  color: var(--ink);
-  border-radius: var(--radius-sm);
-  padding: 9px 28px 9px 10px;
-  font-size: 0.86rem;
-  appearance: none;
-  cursor: pointer;
+.side-label-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
 }
-select:focus { outline: none; border-color: var(--accent); }
+.side-label-value { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
 
-.speaker-stepper { display: flex; gap: 6px; margin-bottom: 16px; }
-.speaker-stepper button {
+/* Segmented pill control (speaker count, quality) */
+.seg {
+  display: flex;
+  background: var(--field);
+  border-radius: var(--radius-sm);
+  padding: 4px;
+  gap: 4px;
+  margin-bottom: 14px;
+}
+.seg button {
   flex: 1;
-  border: 1px solid var(--border);
-  background: var(--paper-soft);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  border: none;
+  background: transparent;
   color: var(--ink-dim);
-  border-radius: var(--radius-sm);
-  padding: 7px 0;
-  font-size: 0.82rem;
-  font-weight: 600;
+  border-radius: 8px;
+  padding: 7px 4px;
   cursor: pointer;
 }
-.speaker-stepper button.active {
-  background: var(--ink);
-  border-color: var(--ink);
-  color: var(--cream);
-}
+.seg button strong { font-size: 0.84rem; font-weight: 800; }
+.seg button span { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.02em; }
+.seg button.single-line { flex-direction: row; justify-content: center; padding: 9px 4px; }
+.seg button.single-line span { font-size: 0.78rem; font-weight: 700; }
+.seg button.active { background: var(--ink); color: #fff; }
 
-.voice-row {
+/* Speaker slot cards */
+.slot-card {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 12px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  padding: 8px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--paper-soft);
+  gap: 10px;
+  margin-bottom: 10px;
+  background: var(--paper);
 }
-.voice-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
-.voice-row select {
-  flex: 1;
-  border: none;
-  background-color: transparent;
-  background-position: right 2px center;
-  padding: 2px 20px 2px 0;
+.voice-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
+.slot-info { flex: 1; min-width: 0; }
+.slot-name { font-size: 0.86rem; font-weight: 700; }
+.slot-meta {
+  font-size: 0.72rem;
+  color: var(--ink-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .voice-play {
-  width: 26px; height: 26px;
+  width: 30px; height: 30px;
   border-radius: 50%;
-  border: 1px solid var(--border-strong);
-  background: var(--paper);
+  border: none;
+  background: var(--field);
   color: var(--ink-dim);
   cursor: pointer;
   flex-shrink: 0;
   display: flex; align-items: center; justify-content: center;
-  font-size: 0.7rem;
+  font-size: 0.66rem;
   padding: 0;
 }
-.voice-play:hover { border-color: var(--accent); color: var(--accent); }
-.voice-play.playing { background: var(--accent); border-color: var(--accent); color: #fff; }
+.voice-play:hover { background: var(--accent-soft); color: var(--accent); }
+.voice-play.playing { background: var(--accent); color: #fff; }
+.slot-change {
+  border: 1px solid var(--border-strong);
+  background: #fff;
+  color: var(--ink-dim);
+  font-size: 0.74rem;
+  font-weight: 700;
+  border-radius: 8px;
+  padding: 7px 10px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.slot-change:hover { border-color: var(--accent); color: var(--accent); }
 
 .custom-voice-row {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin: -4px 0 8px 17px;
+  margin: -4px 0 10px 21px;
 }
 .upload-mini-btn {
   font-size: 0.76rem;
@@ -220,7 +251,7 @@ select:focus { outline: none; border-color: var(--accent); }
 
 .voice-consent-row {
   border: 1px solid var(--speaker-3);
-  background: rgba(184, 134, 43, 0.08);
+  background: rgba(204, 138, 46, 0.08);
   border-radius: var(--radius-sm);
   padding: 10px 12px;
   margin-top: 4px;
@@ -229,70 +260,79 @@ select:focus { outline: none; border-color: var(--accent); }
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  font-size: 0.78rem;
+  font-size: 0.76rem;
   color: var(--ink-dim);
   cursor: pointer;
 }
 .voice-consent-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
 
-.slider-row { display: flex; align-items: center; gap: 10px; }
-input[type="range"] { flex: 1; accent-color: var(--accent); }
-.slider-value { font-size: 0.8rem; color: var(--ink-dim); min-width: 32px; text-align: right; }
+input[type="range"] { width: 100%; accent-color: var(--accent); margin: 6px 0 2px; }
+.slider-ends {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.7rem;
+  color: var(--ink-ghost);
+}
 
 .sidebar-footer {
-  font-size: 0.72rem;
-  color: var(--ink-faint);
-  line-height: 1.5;
+  font-size: 0.74rem;
+  color: var(--ink-ghost);
+  line-height: 1.55;
   border-top: 1px solid var(--border);
   padding-top: 14px;
-  margin-top: 6px;
 }
 
-/* ---------------- Main canvas ---------------- */
-.canvas { background: var(--cream); padding: 26px 32px 140px; position: relative; }
-.canvas-inner { max-width: 720px; margin: 0 auto; }
-
-/* ---- Composer: a single input "shell" (textarea + toolbar), the
-   chat-composer pattern from ChatGPT/Claude.ai — unmistakable as an
-   input at a glance, with secondary controls grouped in a footer strip
-   instead of competing with the textarea as loose sibling elements. ---- */
+/* ---------------- Composer ---------------- */
 .composer {
   background: var(--paper);
   border: 1px solid var(--border-strong);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
+  border-radius: 14px;
   overflow: hidden;
-  margin-bottom: 12px;
 }
+.composer:focus-within { border-color: #d9a98c; }
 .composer-input {
   display: block;
   width: 100%;
   border: none;
   resize: none;
-  background: transparent;
-  padding: 18px 20px 8px;
-  font-size: 1.05rem;
-  line-height: 1.5;
-  font-family: var(--font);
+  background: var(--paper-soft);
+  padding: 16px 18px 10px;
+  font-size: 0.95rem;
+  line-height: 1.55;
   color: var(--ink);
-  min-height: 100px;
+  min-height: 92px;
   max-height: 240px;
   cursor: text;
 }
 .composer-input:focus { outline: none; }
-.composer-input::placeholder { color: var(--ink-faint); font-style: italic; }
+.composer-input::placeholder { color: var(--ink-ghost); font-style: italic; }
 
 .composer-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  padding: 9px 12px;
+  padding: 9px 10px;
   border-top: 1px solid var(--border);
   background: var(--paper-soft);
 }
 .composer-toolbar-left { display: flex; align-items: center; gap: 2px; }
 
+select {
+  background-color: var(--paper-soft);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b5f52' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 11px center;
+  border: 1px solid var(--border);
+  color: var(--ink);
+  border-radius: var(--radius-sm);
+  padding: 9px 28px 9px 10px;
+  font-size: 0.86rem;
+  appearance: none;
+  cursor: pointer;
+}
+select:focus { outline: none; border-color: #d9a98c; }
+
 .toolbar-select {
   width: auto;
   background-color: transparent;
@@ -305,13 +345,8 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
   font-weight: 600;
   padding: 7px 24px 7px 11px;
 }
-.toolbar-select:hover { background-color: var(--paper); border-color: var(--border); }
-.toolbar-select:focus {
-  outline: none;
-  background-color: var(--paper);
-  border-color: var(--border-strong);
-  box-shadow: 0 0 0 3px var(--accent-soft);
-}
+.toolbar-select:hover { background-color: #fff; border-color: var(--border); }
+.toolbar-select:focus { background-color: #fff; border-color: var(--border-strong); }
 
 .toolbar-btn {
   display: inline-flex;
@@ -327,18 +362,13 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
   cursor: pointer;
   white-space: nowrap;
 }
-.toolbar-btn:hover { background: var(--paper); border-color: var(--border); color: var(--accent); }
-
-.composer-toolbar .btn-ink {
-  border-radius: 999px;
-  padding: 9px 18px;
-  font-size: 0.84rem;
-}
+.toolbar-btn:hover { background: #fff; border-color: var(--border); color: var(--accent); }
 
+/* ---------------- Buttons ---------------- */
 .btn {
   font-family: var(--font-ui);
-  font-size: 0.85rem;
-  font-weight: 600;
+  font-size: 0.84rem;
+  font-weight: 700;
   border-radius: var(--radius-sm);
   border: 1px solid var(--border-strong);
   background: var(--paper);
@@ -355,8 +385,29 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
   background: var(--ink);
   border-color: var(--ink);
   color: var(--cream);
+  border-radius: 999px;
+  padding: 10px 22px;
 }
 .btn-ink:hover { background: #3a3226; border-color: #3a3226; }
+.btn-accent {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  border-radius: 999px;
+  padding: 9px 18px;
+}
+.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+.btn-accent:disabled { background: #d9a98c; border-color: #d9a98c; opacity: 1; }
+.btn-pill-outline {
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  color: var(--ink-dim);
+  border-radius: 999px;
+  padding: 10px 16px;
+}
 .btn-icon-only {
   width: 34px; height: 34px;
   padding: 0;
@@ -364,75 +415,78 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
   display: flex; align-items: center; justify-content: center;
 }
 
-.example-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
+/* ---------------- Example chips ---------------- */
+.example-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
 .chip {
-  font-size: 0.78rem;
-  border: 1px solid var(--border);
-  background: var(--paper);
+  font-size: 0.8rem;
+  font-weight: 600;
+  border: 1px solid var(--border-strong);
+  background: #fff;
   color: var(--ink-dim);
   border-radius: 999px;
-  padding: 5px 12px;
+  padding: 7px 14px;
   cursor: pointer;
 }
-.chip:hover { border-color: var(--accent); color: var(--accent); }
+.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
+.gen-status { font-size: 0.78rem; color: var(--ink-faint); margin-top: 8px; min-height: 1em; }
 
-/* ---------------- Transcript ---------------- */
+/* ---------------- Transcript / turn editor ---------------- */
 .transcript-header {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  margin: 26px 0 12px;
+  margin: 0 0 16px;
 }
 .transcript-header h2 {
   margin: 0;
-  font-family: var(--font);
-  font-weight: 700;
-  font-size: 1.3rem;
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: 1.6rem;
 }
-.transcript-meta { font-size: 0.78rem; color: var(--ink-faint); }
+.transcript-meta { font-size: 0.8rem; color: var(--ink-ghost); }
 
 .empty-transcript {
   text-align: center;
-  padding: 56px 20px;
+  padding: 44px 20px;
+  color: var(--ink-ghost);
+  font-size: 0.88rem;
+  border: 1.5px dashed var(--border-strong);
+  border-radius: 16px;
+}
+.empty-transcript .empty-title {
+  font-family: var(--font-serif);
+  font-size: 1.25rem;
   color: var(--ink-faint);
-  font-size: 0.9rem;
-  border: 1px dashed var(--border-strong);
-  border-radius: var(--radius);
-  background: var(--paper-soft);
+  margin-bottom: 6px;
 }
 .empty-transcript strong { color: var(--ink-dim); }
 
 .turn-card {
-  background: var(--paper);
-  border: 1px solid var(--border);
   border-left: 3px solid var(--speaker-1);
-  border-radius: var(--radius-sm);
-  padding: 12px 14px;
-  margin-bottom: 8px;
+  padding: 2px 0 2px 14px;
+  margin-bottom: 14px;
   position: relative;
 }
-.turn-card[data-speaker="2"] { border-left-color: var(--speaker-2); }
-.turn-card[data-speaker="3"] { border-left-color: var(--speaker-3); }
-.turn-card[data-speaker="4"] { border-left-color: var(--speaker-4); }
-
 .turn-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
 }
 .turn-speaker-select {
-  font-size: 0.74rem;
-  font-weight: 600;
+  font-size: 0.72rem;
+  font-weight: 700;
   border: none;
-  background-color: var(--paper-soft);
-  background-position: right 8px center;
+  background-color: transparent;
+  background-position: right 6px center;
   background-size: 8px 5px;
   border-radius: 999px;
-  padding: 3px 22px 3px 10px;
-  color: var(--ink-dim);
+  padding: 3px 20px 3px 8px;
+  margin-left: -8px;
+  color: var(--ink-faint);
   cursor: pointer;
 }
+.turn-speaker-select:hover { background-color: var(--paper-soft); }
 .turn-remove {
   border: none;
   background: none;
@@ -451,22 +505,24 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
   border: none;
   background: transparent;
   resize: none;
-  font-family: var(--font);
-  font-size: 0.98rem;
-  line-height: 1.5;
+  font-family: var(--font-ui);
+  font-size: 0.94rem;
+  line-height: 1.6;
   color: var(--ink);
   min-height: 24px;
+  padding: 0;
 }
 .turn-card textarea:focus { outline: none; }
 
 .add-turn {
   width: 100%;
-  border: 1px dashed var(--border-strong);
+  border: 1.5px dashed var(--border-strong);
   background: transparent;
   color: var(--ink-faint);
   border-radius: var(--radius-sm);
   padding: 10px;
   font-size: 0.84rem;
+  font-weight: 600;
   cursor: pointer;
   margin-top: 4px;
 }
@@ -476,7 +532,6 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
 .generate-bar {
   position: sticky;
   bottom: 22px;
-  margin-top: 22px;
   background: var(--paper);
   border: 1px solid var(--border-strong);
   border-radius: 999px;
@@ -487,43 +542,40 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
   justify-content: space-between;
   gap: 12px;
 }
-.generate-bar-meta { font-size: 0.8rem; color: var(--ink-dim); }
-.generate-bar .btn-ink { padding: 11px 24px; border-radius: 999px; }
+.generate-bar-meta { font-size: 0.8rem; font-weight: 600; color: var(--ink-dim); }
 
 /* ---------------- Output dock ---------------- */
-.dock {
-  border-left: 1px solid var(--border);
-  background: var(--paper);
-  padding: 20px 18px 40px;
-}
-.dock-label {
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--ink-faint);
-  margin-bottom: 14px;
-}
+.dock-label { margin-bottom: 16px; }
 .dock-empty {
   text-align: center;
-  padding: 40px 12px;
-  color: var(--ink-faint);
-  font-size: 0.85rem;
+  padding: 30px 8px;
+  color: #c9bca5;
+  font-size: 0.82rem;
+  line-height: 1.6;
 }
 
 .status-card {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 14px;
-  margin-bottom: 14px;
   display: none;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+  padding: 18px 6px;
+  margin-bottom: 14px;
 }
-.status-card.visible { display: block; }
-.status-card.active { border-color: var(--accent); background: var(--accent-soft); }
-.status-card.complete { border-color: var(--success); background: rgba(63, 125, 92, 0.08); }
-.status-card.error { border-color: var(--error); background: rgba(178, 59, 59, 0.08); }
-.status-title { font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
-.status-desc { font-size: 0.78rem; color: var(--ink-dim); margin-top: 4px; }
+.status-card.visible { display: flex; }
+.status-spinner {
+  width: 34px; height: 34px;
+  border-radius: 50%;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  animation: spin 0.8s linear infinite;
+}
+.status-card.complete .status-spinner, .status-card.error .status-spinner { display: none; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.status-title { font-size: 0.88rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
+.status-desc { font-size: 0.78rem; color: var(--ink-dim); }
+.status-card.error .status-title { color: var(--error); }
 .status-dot-pulse {
   width: 8px; height: 8px; border-radius: 50%;
   background: var(--accent);
@@ -533,21 +585,77 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
 .status-card.error .status-dot-pulse { background: var(--error); animation: none; }
 @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
 
-.result-block { display: none; }
+/* Player */
+.result-block { display: none; animation: fadeIn 0.3s ease; }
 .result-block.visible { display: block; }
-#resultWaveform { width: 100%; height: 68px; border-radius: var(--radius-sm); background: var(--paper-soft); display: block; margin-bottom: 10px; }
-.result-block audio { width: 100%; margin-bottom: 12px; height: 34px; }
-.result-metrics { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--ink-dim); margin-bottom: 12px; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+
+.player-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+.play-btn {
+  width: 44px; height: 44px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: none;
+  color: #fff;
+  font-size: 0.85rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  padding: 0;
+}
+.play-btn:hover { background: var(--accent-hover); }
+#resultWaveform { flex: 1; min-width: 0; height: 44px; display: block; cursor: pointer; }
+.player-time { font-size: 0.76rem; color: var(--ink-faint); margin-bottom: 12px; text-align: right; }
+
+.synced-transcript {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 300px;
+  overflow-y: auto;
+  margin-bottom: 14px;
+  padding-right: 4px;
+}
+.synced-transcript::-webkit-scrollbar { width: 6px; }
+.synced-transcript::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
+.sync-line {
+  display: flex;
+  gap: 9px;
+  padding: 7px 9px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.25s;
+}
+.sync-line:hover { background: var(--paper-soft); }
+.sync-line .sync-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
+.sync-line .sync-label { font-size: 0.68rem; font-weight: 700; color: var(--ink-faint); margin-bottom: 2px; }
+.sync-line .sync-text { font-size: 0.8rem; line-height: 1.5; color: var(--ink-ghost); }
+.sync-line.active { background: var(--accent-soft); }
+.sync-line.active .sync-label { color: var(--accent-hover); }
+.sync-line.active .sync-text { color: var(--ink); font-weight: 600; }
+
+.result-metrics {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 0.78rem;
+  color: var(--ink-dim);
+  border-top: 1px solid var(--border);
+  padding-top: 12px;
+  margin-bottom: 12px;
+}
+.result-metrics > div { display: flex; justify-content: space-between; }
 .result-metrics span { color: var(--ink-faint); }
 .result-metrics strong { color: var(--ink); font-weight: 600; }
 
 .log-toggle {
-  font-size: 0.76rem;
+  font-size: 0.74rem;
   color: var(--ink-faint);
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
+  margin-top: 12px;
   text-decoration: underline dotted;
 }
 .log-box {
@@ -566,40 +674,139 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
 }
 .log-box.visible { display: block; }
 
-/* ---------------- Import dialog ---------------- */
+/* ---------------- Dialogs ---------------- */
 dialog {
   border: none;
-  border-radius: var(--radius);
+  border-radius: 22px;
   padding: 0;
   max-width: 520px;
   width: 92vw;
-  box-shadow: 0 24px 60px rgba(38, 32, 25, 0.25);
+  box-shadow: 0 24px 64px rgba(42, 32, 22, 0.25);
   background: var(--paper);
   color: var(--ink);
 }
-dialog::backdrop { background: rgba(38, 32, 25, 0.35); }
-.dialog-body { padding: 22px; }
-.dialog-body h3 { margin: 0 0 4px; font-family: var(--font); }
-.dialog-body p { font-size: 0.82rem; color: var(--ink-dim); margin: 0 0 14px; }
+dialog::backdrop { background: rgba(42, 32, 22, 0.45); }
+.dialog-body { padding: 24px; }
+.dialog-body h3 {
+  margin: 0 0 4px;
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: 1.5rem;
+}
+.dialog-body p { font-size: 0.82rem; color: var(--ink-dim); margin: 8px 0 14px; }
 .dialog-body textarea {
   width: 100%;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-sm);
-  padding: 10px;
+  padding: 12px;
   font-size: 0.86rem;
-  background: var(--field);
-  box-shadow: inset 0 1px 3px rgba(38, 32, 25, 0.08);
+  background: var(--paper-soft);
   resize: vertical;
   color: var(--ink);
 }
-.dialog-body textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  background: var(--paper);
-  box-shadow: 0 0 0 3px var(--accent-soft);
-}
+.dialog-body textarea:focus { outline: none; border-color: #d9a98c; }
 .dialog-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; }
 .dialog-actions input[type="file"] { font-size: 0.78rem; max-width: 190px; }
+.dialog-close {
+  background: none;
+  border: none;
+  font-size: 1.4rem;
+  color: var(--ink-faint);
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+.dialog-close:hover { color: var(--ink); }
+
+/* Voice library */
+.library-dialog { max-width: 780px; }
+.library-dialog .dialog-body { max-height: 82vh; overflow-y: auto; }
+.library-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 16px;
+}
+.library-search {
+  width: 100%;
+  border: 1px solid var(--border-strong);
+  background: var(--paper-soft);
+  border-radius: var(--radius-sm);
+  padding: 11px 14px;
+  font-size: 0.88rem;
+  margin-bottom: 12px;
+  color: var(--ink);
+}
+.library-search:focus { outline: none; border-color: #d9a98c; }
+.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
+.filter-chip {
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 0.76rem;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--border-strong);
+  background: #fff;
+  color: var(--ink-dim);
+}
+.filter-chip.active {
+  border: 1.5px solid var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.library-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+.voice-card {
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 14px;
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.voice-card.clone-card { border-style: dashed; border-color: var(--border-strong); }
+.voice-avatar {
+  width: 40px; height: 40px;
+  border-radius: 50%;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1.05rem;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  font-family: var(--font-serif);
+}
+.clone-card .voice-avatar { background: var(--field); font-size: 1.1rem; }
+.voice-card-body { flex: 1; min-width: 0; }
+.voice-card-head { display: flex; justify-content: space-between; align-items: baseline; }
+.voice-card-name { font-size: 0.92rem; font-weight: 700; }
+.voice-preview-link {
+  background: none;
+  border: none;
+  color: var(--accent);
+  font-size: 0.74rem;
+  font-weight: 700;
+  cursor: pointer;
+  padding: 0;
+}
+.voice-card-meta { font-size: 0.74rem; color: var(--ink-faint); margin: 2px 0 9px; }
+.slot-assign { display: flex; gap: 6px; align-items: center; }
+.slot-assign-label { font-size: 0.68rem; color: var(--ink-ghost); margin-right: 2px; }
+.slot-assign button {
+  width: 26px; height: 26px;
+  border-radius: 50%;
+  border: 1px solid var(--border-strong);
+  background: #fff;
+  color: var(--ink-dim);
+  font-size: 0.74rem;
+  font-weight: 700;
+  cursor: pointer;
+  padding: 0;
+}
+.slot-assign button.assigned { border: none; color: #fff; }
 
 /* ---------------- About dialog ---------------- */
 #aboutDialog .dialog-body { max-height: 70vh; overflow-y: auto; }
@@ -608,11 +815,12 @@ dialog::backdrop { background: rgba(38, 32, 25, 0.35); }
 #aboutDialog li { margin-bottom: 4px; }
 
 /* ---------------- Responsive ---------------- */
-@media (max-width: 1100px) {
-  .app-shell { grid-template-columns: 240px minmax(0, 1fr) 300px; }
-}
-@media (max-width: 880px) {
-  .app-shell { grid-template-columns: 1fr; grid-auto-rows: auto; }
-  .sidebar, .dock { border: none; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
-  .canvas { padding: 22px 18px 120px; }
+@media (max-width: 1400px) {
+  .app-shell { grid-template-columns: 1fr; max-width: 760px; }
+  .pane { position: static; max-height: none; }
+}
+@media (max-width: 640px) {
+  .topbar { padding: 14px 18px; }
+  .app-shell { padding: 20px 16px 80px; }
+  .library-grid { grid-template-columns: 1fr; }
 }