Replace waveform with highlighted lyrics, condense controls, drop channel strip

- Viewport output is now the LYRICS preview, not a waveform: 28pt
centered text with the current word glowing amber + scaled up,
past words fading to 55% opacity, upcoming words at 35%. Auto-
scrolls to keep the current word in view.
- Click anywhere in the lyrics viewport to seek (vertical position
maps to time, like a waveform scrub).
- Removed the channel strip (fader/meter/pan/mute). The audio graph
and metering were tied to those controls, so the visual meter is
gone with them — playback still works.
- Combined the bottom 3 panels (Source+Script, Mix+Render, Channel)
into ONE "Console" panel with a 2-column body: Source/Script on
the left, Parameters/Library/Render on the right.
- Render button is now smaller and inline at the bottom-right of the
Console panel, with the toast next to it.

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

index.html

@@ -6,14 +6,13 @@
 <title>GEPARD 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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
 <style>
   :root {
     --bg: #0a0c11;
     --bg-elev: #13161d;
     --bg-elev-2: #1a1e27;
     --bg-input: #080a0e;
-    --bg-meter: #05070a;
     --bg-viewport: #000000;
     --line: #20242e;
     --line-strong: #2b303c;
@@ -25,8 +24,9 @@
     --orange: #f97316;
     --red: #dc2626;
     --green: #22c55e;
-    --hl-bg: rgba(245, 165, 36, 0.22);
-    --hl-text: #f5a524;
+    --hl-bg: rgba(245, 165, 36, 0.28);
+    --hl-text: #fbbf24;
+    --hl-glow: 0 0 20px rgba(245, 165, 36, 0.25);
     --radius-sm: 3px;
     --radius: 5px;
     --radius-lg: 8px;
@@ -44,7 +44,7 @@
   body { display: flex; flex-direction: column; min-height: 100vh; }
   .mono, .num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
 
-  /* ===== Top bar (project header) ===== */
+  /* ===== Top bar ===== */
   .topbar {
     display: flex; align-items: center; justify-content: space-between;
     height: 48px; padding: 0 16px;
@@ -66,9 +66,8 @@
     text-transform: uppercase; letter-spacing: 0.1em;
     padding-left: 12px; border-left: 1px solid var(--line);
   }
-  .topbar-right { display: flex; align-items: center; gap: 14px; }
 
-  /* ===== Main viewport (audio hero) ===== */
+  /* ===== Viewport ===== */
   .viewport {
     margin: 14px;
     background: var(--bg-viewport);
@@ -100,23 +99,23 @@
     background: var(--bg-elev-2);
   }
 
-  /* Timecode display (video-studio style) */
+  /* Timecode */
   .timecode {
     display: flex; align-items: center; gap: 14px;
-    padding: 14px 16px 6px;
+    padding: 14px 16px 8px;
     background: var(--bg-viewport);
   }
   .timecode .tc {
     font-family: "JetBrains Mono", ui-monospace, monospace;
     font-variant-numeric: tabular-nums;
-    font-size: 38px;
+    font-size: 36px;
     font-weight: 500;
     color: var(--text);
     letter-spacing: 0.02em;
     line-height: 1;
   }
   .timecode .tc .sep { color: var(--text-faint); margin: 0 1px; }
-  .timecode .tc .frames { color: var(--text-dim); font-size: 24px; }
+  .timecode .tc .frames { color: var(--text-dim); font-size: 22px; }
   .timecode .tc-label {
     font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
     color: var(--text-faint); margin-bottom: 4px;
@@ -133,102 +132,62 @@
   .timecode .meta .k { color: var(--text-faint); margin-right: 6px; }
   .timecode .meta .v { color: var(--text); }
 
-  /* Big waveform */
-  .waveform-wrap {
-    height: 220px;
+  /* ===== The Lyrics Preview (replaces waveform) ===== */
+  .lyrics-preview {
+    min-height: 220px;
     background: var(--bg-viewport);
     position: relative;
-    overflow: hidden;
-    cursor: pointer;
+    overflow-y: auto;
     border-top: 1px solid var(--line);
+    padding: 32px 40px;
+    cursor: pointer;
+    scroll-behavior: smooth;
   }
-  canvas.wave { width: 100%; height: 100%; display: block; }
-  .wave-empty {
-    position: absolute; inset: 0;
-    display: flex; align-items: center; justify-content: center;
+  .lyrics-preview .empty {
     color: var(--text-faint);
-    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
-  }
-  .wave-progress {
-    position: absolute; top: 0; left: 0; bottom: 0; width: 0;
-    background: rgba(245, 165, 36, 0.06);
-    border-right: 2px solid var(--amber);
-    pointer-events: none;
-  }
-  .playhead {
-    position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
-    background: var(--amber);
-    pointer-events: none;
-    box-shadow: 0 0 6px var(--amber);
-  }
-  .playhead::before {
-    content: ""; position: absolute; top: -4px; left: -5px;
-    width: 11px; height: 11px;
-    background: var(--amber);
-    clip-path: polygon(50% 100%, 0 0, 100% 0);
+    font-size: 14px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    text-align: center;
+    margin-top: 80px;
   }
-
-  /* Timeline strip (below viewport) */
-  .timeline {
-    background: var(--bg-viewport);
-    border-top: 1px solid var(--line);
-    padding: 8px 16px 12px;
+  .lyrics-text {
+    font-size: 28px;
+    font-weight: 500;
+    line-height: 1.55;
+    color: var(--text);
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
   }
-  .ruler {
-    height: 18px;
-    position: relative;
-    border-bottom: 1px solid var(--line);
-    margin-bottom: 6px;
+  .lyrics-text .word {
+    display: inline-block;
+    padding: 2px 4px;
+    margin: 0 1px;
+    border-radius: 6px;
+    color: rgba(231, 233, 240, 0.35);
+    transition: color 0.15s, background-color 0.15s, transform 0.15s;
   }
-  .ruler .tick {
-    position: absolute; top: 0; bottom: 0;
-    border-left: 1px solid var(--line-strong);
-    color: var(--text-faint);
-    font-family: "JetBrains Mono", monospace;
-    font-size: 9px;
-    padding-left: 3px;
-    white-space: nowrap;
+  .lyrics-text .word.past {
+    color: rgba(231, 233, 240, 0.55);
   }
-  .ruler .tick.major { border-left-color: var(--text-faint); }
-  .track-strip {
-    height: 36px;
-    background: var(--bg-elev-2);
-    border: 1px solid var(--line);
-    border-radius: var(--radius-sm);
-    position: relative;
-    overflow: hidden;
-  }
-  .track-strip .clip {
-    position: absolute; top: 4px; bottom: 4px; left: 0;
-    background: linear-gradient(180deg, rgba(245,165,36,0.18), rgba(245,165,36,0.08));
-    border: 1px solid rgba(245,165,36,0.4);
-    border-radius: 3px;
-    width: 0;
+  .lyrics-text .word.current {
+    color: var(--hl-text);
+    background: var(--hl-bg);
+    box-shadow: var(--hl-glow);
+    transform: scale(1.05);
   }
-  .track-strip .clip-label {
-    position: absolute; top: 50%; left: 8px;
-    transform: translateY(-50%);
-    font-family: "JetBrains Mono", monospace;
-    font-size: 10px; color: var(--amber);
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    pointer-events: none;
+  .lyrics-progress-bar {
+    position: absolute; top: 0; left: 0; right: 0; height: 2px;
+    background: var(--bg-elev);
   }
-  .track-strip .playhead-mini {
-    position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
+  .lyrics-progress-bar .fill {
+    height: 100%; width: 0;
     background: var(--amber);
-    pointer-events: none;
-  }
-  .track-label {
-    position: absolute; top: 50%; left: 8px;
-    transform: translateY(-50%);
-    font-size: 10px; font-weight: 700;
-    color: var(--text-dim);
-    text-transform: uppercase; letter-spacing: 0.12em;
-    pointer-events: none;
+    transition: width 0.05s linear;
   }
 
-  /* Transport bar */
+  /* Transport */
   .transport {
     display: flex; align-items: center; gap: 14px;
     padding: 14px 16px;
@@ -247,9 +206,7 @@
   }
   .transport-btns button:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
   .transport-btns button:disabled { color: var(--text-faint); cursor: not-allowed; }
-  .transport-btns .skip {
-    width: 32px; height: 32px; font-size: 12px;
-  }
+  .transport-btns .skip { width: 32px; height: 32px; font-size: 12px; }
   .transport-btns .play {
     width: 48px; height: 48px; font-size: 18px;
     background: var(--amber); color: #1a1300;
@@ -270,91 +227,46 @@
   .transport .info .k { color: var(--text-faint); margin-right: 6px; }
   .transport .info .v { color: var(--text); }
 
-  /* ===== Bottom controls (3-column workspace) ===== */
-  .workspace {
-    flex: 1;
-    max-width: 1320px;
-    margin: 0 auto;
-    width: 100%;
-    padding: 0 14px 14px;
-    display: grid;
-    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 180px;
-    gap: 12px;
-    align-items: stretch;
-  }
-  @media (max-width: 1080px) {
-    .workspace { grid-template-columns: 1fr 1fr; }
-    .channel-strip { grid-column: 1 / -1; height: 200px; }
-  }
-  @media (max-width: 680px) {
-    .workspace { grid-template-columns: 1fr; }
-  }
-
-  .panel {
+  /* ===== Combined control panel ===== */
+  .controls {
+    margin: 0 14px 14px;
     background: var(--bg-elev);
     border: 1px solid var(--line);
     border-radius: var(--radius-lg);
     overflow: hidden;
-    display: flex; flex-direction: column;
   }
-  .panel-head {
+  .controls-head {
     display: flex; align-items: center; justify-content: space-between;
     padding: 8px 12px;
     border-bottom: 1px solid var(--line);
     background: var(--bg-elev-2);
   }
-  .panel-head .title {
+  .controls-head .title {
     font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
   }
-  .panel-body { padding: 12px; flex: 1; }
+  .controls-body {
+    padding: 14px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+  }
+  @media (max-width: 900px) {
+    .controls-body { grid-template-columns: 1fr; }
+  }
 
-  .section { margin-bottom: 14px; }
-  .section:last-child { margin-bottom: 0; }
-  .section-label {
+  .col-label {
     font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint);
-    margin-bottom: 6px;
+    margin-bottom: 8px;
   }
-
+  .field { margin-bottom: 12px; }
+  .field:last-child { margin-bottom: 0; }
   select, textarea, input[type="text"] {
     width: 100%; background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--radius);
     color: var(--text); font: inherit; padding: 8px 10px; outline: none; transition: border-color 0.15s;
   }
   select:focus, textarea:focus { border-color: var(--amber); }
-  textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
-
-  /* Script editor with word highlight */
-  .script-editor {
-    background: var(--bg-input);
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
-    padding: 10px 12px;
-    min-height: 110px;
-    line-height: 1.65;
-    font-size: 14px;
-    color: var(--text);
-    outline: none;
-    transition: border-color 0.15s;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
-  .script-editor:focus { border-color: var(--amber); }
-  .script-editor.playing { background: #0e1014; }
-  .word {
-    display: inline;
-    padding: 1px 2px;
-    margin: 0 -2px;
-    border-radius: 3px;
-    color: var(--text);
-    transition: background-color 0.08s, color 0.08s;
-  }
-  .word.past { color: var(--text-faint); }
-  .word.current {
-    background: var(--hl-bg);
-    color: var(--hl-text);
-    font-weight: 600;
-  }
+  textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
 
-  /* Segmented control */
   .seg {
     display: grid; grid-template-columns: 1fr 1fr;
     background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px;
@@ -367,7 +279,6 @@
   .seg button.active { background: var(--bg-elev-2); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }
   .seg button:not(.active):hover { color: var(--text); }
 
-  /* File drop */
   .file-drop {
     border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 12px;
     text-align: center; color: var(--text-dim); background: var(--bg-input); cursor: pointer; transition: all 0.15s;
@@ -377,9 +288,26 @@
   .file-drop .lbl { font-size: 11px; }
   .file-name { margin-top: 5px; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--amber); }
 
+  /* Script editor (compact, for typing) */
+  .script-editor {
+    background: var(--bg-input);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    padding: 10px 12px;
+    min-height: 80px;
+    line-height: 1.5;
+    font-size: 13px;
+    color: var(--text);
+    outline: none;
+    transition: border-color 0.15s;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+  .script-editor:focus { border-color: var(--amber); }
+
   /* Sliders */
   .slider {
-    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 5px 0;
+    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 4px 0;
   }
   .slider .name { font-size: 11px; color: var(--text-label); text-transform: uppercase; letter-spacing: 0.1em; }
   .slider .val {
@@ -399,93 +327,30 @@
   input[type="range"]::-moz-range-track { height: 3px; background: var(--bg-input); border: 1px solid var(--line); border-radius: 2px; }
   input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 2px; background: var(--amber); cursor: pointer; }
 
-  /* Channel strip */
-  .channel-strip {
-    background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg);
-    overflow: hidden; display: flex; flex-direction: column;
-  }
-  .strip-body {
-    padding: 14px 10px 12px;
-    display: grid;
-    grid-template-columns: 1fr 22px 1fr;
-    gap: 8px;
-    align-items: end;
-    flex: 1;
-  }
-  .strip-col { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; }
-  .strip-btn {
-    width: 100%; padding: 5px 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
-    background: var(--bg-elev-2); color: var(--text-dim); font-size: 9px; font-weight: 700;
-    letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: all 0.12s;
-  }
-  .strip-btn:hover { border-color: var(--line-strong); color: var(--text); }
-  .strip-btn.active { background: var(--red); color: #fff; border-color: transparent; }
-  .fader-rail {
-    flex: 1; width: 30px; min-height: 100px;
-    position: relative; background: var(--bg-input);
-    border: 1px solid var(--line); border-radius: 999px; cursor: pointer; touch-action: none;
-  }
-  .fader-rail::before {
-    content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px;
-    background: var(--line); transform: translateX(-50%);
-  }
-  .fader-cap {
-    position: absolute; left: 50%; width: 38px; height: 16px;
-    background: linear-gradient(180deg, #2a2f3a, #1a1e27);
-    border: 1px solid var(--line-strong); border-radius: 3px;
-    transform: translate(-50%, -50%);
-    box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
-    cursor: grab;
-  }
-  .fader-cap:active { cursor: grabbing; }
-  .fader-cap::after {
-    content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 2px;
-    background: var(--amber); transform: translate(-50%, -50%); border-radius: 1px;
-  }
-  .fader-value { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-dim); text-align: center; margin-top: 6px; }
-  .meter-rail {
-    flex: 1; width: 22px; min-height: 100px;
-    position: relative; background: var(--bg-meter);
-    border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
-  }
-  .meter-led {
-    position: absolute; left: 2px; right: 2px; height: 3px;
-    background: var(--line-strong); border-radius: 1px;
-  }
-  .meter-led.on { background: var(--green); }
-  .meter-led.on.warn { background: var(--amber); }
-  .meter-led.on.clip { background: var(--red); box-shadow: 0 0 4px var(--red); }
-  .knob-ring {
-    width: 44px; height: 44px; border-radius: 50%;
-    background: var(--bg-input); border: 1px solid var(--line);
-    position: relative; cursor: pointer; touch-action: none;
-  }
-  .knob-ring::before {
-    content: ""; position: absolute; inset: 0; border-radius: 50%;
-    background: conic-gradient(var(--amber) 0deg, var(--amber) var(--knob-deg, 0deg), transparent var(--knob-deg, 0deg));
-    mask: radial-gradient(transparent 56%, black 60%); -webkit-mask: radial-gradient(transparent 56%, black 60%);
-  }
-  .knob-cap {
-    position: absolute; inset: 5px; border-radius: 50%;
-    background: linear-gradient(180deg, #2a2f3a, #1a1e27);
-    border: 1px solid var(--line-strong);
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
-  }
-  .knob-cap::after {
-    content: ""; position: absolute; top: 5px; left: 50%; width: 2px; height: 8px;
-    background: var(--amber); transform: translateX(-50%); border-radius: 1px;
+  /* Examples + render */
+  .examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+  .example-chip {
+    appearance: none; display: inline-flex; align-items: center; gap: 6px;
+    padding: 5px 9px; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 999px;
+    color: var(--text-dim); font: inherit; font-size: 11px; cursor: pointer; transition: all 0.12s;
   }
-  .knob-label { font-size: 9px; color: var(--text-faint); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }
-  .knob-value { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-dim); margin-top: 2px; }
+  .example-chip:hover { border-color: var(--amber); color: var(--text); }
+  .example-chip .tag { font-family: "JetBrains Mono", monospace; color: var(--amber); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+  .example-chip .txt { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-  /* Generate */
+  .render-row {
+    margin-top: 14px;
+    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
+  }
   .generate-btn {
-    width: 100%; appearance: none; border: 0; padding: 12px; border-radius: var(--radius);
+    appearance: none; border: 0; padding: 12px 24px; border-radius: var(--radius);
     background: linear-gradient(90deg, var(--amber) 0%, var(--orange) 60%, var(--red) 100%);
     color: #fff; font: inherit; font-weight: 700; font-size: 12px;
     letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
     box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 6px 18px rgba(249,115,22,0.2);
-    transition: filter 0.12s, transform 0.05s; display: flex; align-items: center; justify-content: center; gap: 10px;
+    transition: filter 0.12s, transform 0.05s;
+    display: flex; align-items: center; justify-content: center; gap: 10px;
+    min-width: 180px;
   }
   .generate-btn:hover:not(:disabled) { filter: brightness(1.06); }
   .generate-btn:active:not(:disabled) { transform: translateY(1px); }
@@ -493,23 +358,11 @@
   .generate-btn .spinner { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
 
-  /* Toast */
   .toast {
     margin-top: 10px; padding: 9px 12px; border-radius: var(--radius);
     font-size: 12px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5;
   }
   .toast.hidden { display: none; }
-
-  /* Examples */
-  .examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
-  .example-chip {
-    appearance: none; display: inline-flex; align-items: center; gap: 6px;
-    padding: 5px 9px; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 999px;
-    color: var(--text-dim); font: inherit; font-size: 11px; cursor: pointer; transition: all 0.12s;
-  }
-  .example-chip:hover { border-color: var(--amber); color: var(--text); }
-  .example-chip .tag { font-family: "JetBrains Mono", monospace; color: var(--amber); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
-  .example-chip .txt { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 </style>
 </head>
 <body>
@@ -523,15 +376,14 @@
       <span class="meta">v1.0 · Text-to-Speech</span>
     </div>
   </div>
-  <div class="topbar-right"></div>
 </div>
 
-<!-- ===== Viewport (audio hero) ===== -->
+<!-- ===== Viewport ===== -->
 <section class="viewport">
   <div class="viewport-head">
     <div class="left">
       <span class="rec-dot" id="rec-dot"></span>
-      <span class="label">Program · Audio</span>
+      <span class="label">Program · Lyrics</span>
     </div>
     <div class="right">
       <span class="stage" id="stage-pill">Idle</span>
@@ -546,111 +398,78 @@
     <div class="spacer"></div>
     <div class="meta">
       <div><span class="k">Duration</span><span class="v" id="dur-time">0:00</span></div>
-      <div><span class="k">Sample Rate</span><span class="v" id="sr-meta">—</span></div>
-      <div><span class="k">Channels</span><span class="v" id="ch-meta">—</span></div>
+      <div><span class="k">Voice</span><span class="v" id="voice-info">—</span></div>
+      <div><span class="k">Codec</span><span class="v">NeMo Nano · 22.05kHz</span></div>
     </div>
   </div>
 
-  <div class="waveform-wrap" id="wave-wrap">
-    <div class="wave-empty" id="wave-empty">No signal · awaiting input</div>
-    <canvas class="wave" id="wave"></canvas>
-    <div class="wave-progress" id="wave-progress"></div>
-    <div class="playhead" id="playhead"></div>
-  </div>
-
-  <div class="timeline">
-    <div class="ruler" id="ruler"></div>
-    <div class="track-strip" id="track-strip">
-      <div class="clip" id="clip"><div class="clip-label" id="clip-label"></div></div>
-      <div class="playhead-mini" id="playhead-mini"></div>
-    </div>
+  <div class="lyrics-preview" id="lyrics-preview">
+    <div class="lyrics-progress-bar"><div class="fill" id="progress-fill"></div></div>
+    <div class="empty" id="lyrics-empty">No signal · awaiting input</div>
+    <div class="lyrics-text" id="lyrics-text" style="display:none"></div>
   </div>
 
   <div class="transport">
     <div class="transport-btns">
-      <button class="skip" id="stop-btn" type="button" title="Return to start">⏮</button>
+      <button class="skip" id="stop-btn" type="button" title="Return to start" disabled>⏮</button>
       <button class="play" id="play-btn" type="button" title="Play / Pause" disabled>▶</button>
     </div>
     <div class="spacer"></div>
     <div class="info">
-      <div><span class="k">Voice</span><span class="v" id="voice-info">—</span></div>
-      <div><span class="k">Codec</span><span class="v">NeMo Nano · 22.05kHz</span></div>
+      <div><span class="k">Engine</span><span class="v">Gepard · 32 FSQ heads</span></div>
     </div>
   </div>
 </section>
 
-<!-- ===== Workspace (controls) ===== -->
-<div class="workspace">
+<!-- ===== Combined control panel ===== -->
+<section class="controls">
+  <div class="controls-head">
+    <div class="title">Console</div>
+  </div>
+  <div class="controls-body">
 
-  <!-- Track -->
-  <section class="panel">
-    <div class="panel-head"><div class="title">Source · Script</div></div>
-    <div class="panel-body">
-      <div class="section">
-        <div class="section-label">Source</div>
+    <!-- Left column: Source + Script -->
+    <div>
+      <div class="col-label">Source</div>
+      <div class="field">
         <div class="seg" id="mode-seg">
           <button id="mode-preset" class="active" type="button">Preset</button>
           <button id="mode-clone" type="button">Clone</button>
         </div>
       </div>
-      <div class="section" id="speaker-section">
-        <div class="section-label">Voice</div>
+      <div class="field" id="speaker-section">
         <select id="speaker"></select>
       </div>
-      <div class="section hidden" id="ref-section">
-        <div class="section-label">Reference · ≤ 60s</div>
+      <div class="field hidden" id="ref-section">
         <div class="file-drop" id="drop">
           <div class="ico">🎙️</div>
-          <div class="lbl">Drop clip · click to upload</div>
+          <div class="lbl">Drop reference clip · click to upload</div>
           <div class="file-name" id="file-name"></div>
         </div>
         <input type="file" id="file-input" accept="audio/*" hidden />
       </div>
-      <div class="section">
-        <div class="section-label">Script</div>
+      <div class="col-label" style="margin-top: 16px">Script</div>
+      <div class="field">
         <div class="script-editor" id="script" contenteditable="true" spellcheck="false">Type what the cheetah should say…</div>
       </div>
     </div>
-  </section>
 
-  <!-- Mix + transport -->
-  <section class="panel">
-    <div class="panel-head"><div class="title">Mix · Render</div></div>
-    <div class="panel-body">
-      <div class="section">
-        <div class="section-label">Parameters</div>
-        <div id="sliders"></div>
-      </div>
-      <div class="section">
-        <div class="section-label">Library · Examples</div>
-        <div class="examples" id="examples"></div>
-      </div>
-      <button class="generate-btn" id="generate-btn" type="button"><span class="lbl">▶  Render</span></button>
-      <div class="toast hidden" id="toast"></div>
-    </div>
-  </section>
+    <!-- Right column: Mix + Examples + Render -->
+    <div>
+      <div class="col-label">Mix · Parameters</div>
+      <div class="field" id="sliders"></div>
 
-  <!-- Channel strip -->
-  <section class="channel-strip">
-    <div class="panel-head"><div class="title">Channel</div></div>
-    <div class="strip-body">
-      <div class="strip-col">
-        <button class="strip-btn" id="mute-btn" type="button">Mute</button>
-        <div class="knob-ring" id="pan-ring" style="--knob-deg:0deg"><div class="knob-cap" id="pan-cap"></div></div>
-        <div class="knob-label">Pan</div>
-        <div class="knob-value mono" id="pan-val">C</div>
-      </div>
-      <div class="strip-col">
-        <div class="meter-rail" id="meter-rail"></div>
-      </div>
-      <div class="strip-col">
-        <div class="fader-rail" id="fader-rail"><div class="fader-cap" id="fader-cap"></div></div>
-        <div class="fader-value mono" id="fader-val">0.0 dB</div>
+      <div class="col-label" style="margin-top: 16px">Library · Examples</div>
+      <div class="examples" id="examples"></div>
+
+      <div class="render-row">
+        <div class="toast hidden" id="toast"></div>
+        <button class="generate-btn" id="generate-btn" type="button"><span class="lbl">▶  Render</span></button>
       </div>
     </div>
-  </section>
 
-</div>
+  </div>
+</section>
 
 <script type="module">
 import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
@@ -659,13 +478,10 @@ const $ = (id) => document.getElementById(id);
 const els = {
   recDot: $("rec-dot"), stagePill: $("stage-pill"),
   tcH: $("tc-h"), tcM: $("tc-m"), tcS: $("tc-s"), tcF: $("tc-f"),
-  durTime: $("dur-time"), srMeta: $("sr-meta"), chMeta: $("ch-meta"),
-  voiceInfo: $("voice-info"),
-  waveWrap: $("wave-wrap"), wave: $("wave"), waveEmpty: $("wave-empty"),
-  waveProgress: $("wave-progress"), playhead: $("playhead"),
-  ruler: $("ruler"),
-  trackStrip: $("track-strip"), clip: $("clip"), clipLabel: $("clip-label"),
-  playheadMini: $("playhead-mini"),
+  durTime: $("dur-time"), voiceInfo: $("voice-info"),
+  lyricsPreview: $("lyrics-preview"),
+  lyricsEmpty: $("lyrics-empty"), lyricsText: $("lyrics-text"),
+  progressFill: $("progress-fill"),
   playBtn: $("play-btn"), stopBtn: $("stop-btn"),
   modePreset: $("mode-preset"), modeClone: $("mode-clone"),
   speaker: $("speaker"), speakerSection: $("speaker-section"), refSection: $("ref-section"),
@@ -673,33 +489,18 @@ const els = {
   script: $("script"),
   sliders: $("sliders"),
   generateBtn: $("generate-btn"), toast: $("toast"), examples: $("examples"),
-  faderRail: $("fader-rail"), faderCap: $("fader-cap"), faderVal: $("fader-val"),
-  meterRail: $("meter-rail"),
-  panRing: $("pan-ring"), panCap: $("pan-cap"), panVal: $("pan-val"),
-  muteBtn: $("mute-btn"),
 };
 
 let cfg = null;
 let client = null;
 let mode = "preset";
 let refFile = null;
-let audioUrl = null;
 let audioEl = new Audio();
 let currentSubmission = null;
-let startedAt = 0;
 let trackDuration = 0;
 
-let audioCtx = null;
-let sourceNode = null;
-let gainNode = null;
-let panNode = null;
-let analyser = null;
-let meterRAF = null;
-let faderValueDb = 0;
-let panValue = 0;
-let isMuted = false;
-
 let wordSpans = [];
+let wordScript = "";   // the actual text that's currently in the lyrics viewport
 let hlRAF = null;
 
 const sliderSpec = [
@@ -710,7 +511,6 @@ const sliderSpec = [
   { key: "repetition_window",  label: "Rep. Window",  fmt: v => String(Math.round(v)), step: 1 },
 ];
 
-const dbToGain = (db) => Math.pow(10, db / 20);
 const setBusy = (busy) => {
   els.generateBtn.disabled = busy;
   els.generateBtn.innerHTML = busy
@@ -722,7 +522,6 @@ const clearError = () => { els.toast.classList.add("hidden"); els.toast.textCont
 const fmtTime = (s) => { if (!isFinite(s)) return "0:00"; const m = Math.floor(s / 60); const r = Math.floor(s % 60); return `${m}:${String(r).padStart(2, "0")}`; };
 const pad = (n, w = 2) => String(Math.floor(n)).padStart(w, "0");
 
-// Timecode formatter: H:MM:SS:FF (24fps fake frames based on time progress)
 const updateTimecode = (current, total) => {
   const fps = 24;
   const h = Math.floor(current / 3600);
@@ -734,28 +533,7 @@ const updateTimecode = (current, total) => {
   els.tcS.textContent = pad(s);
   els.tcF.textContent = pad(frames);
   const pct = total ? (current / total) * 100 : 0;
-  const clipW = total > 0 ? Math.max(2, Math.min(100, pct)) : 0;
-  els.clip.style.width = `${clipW}%`;
-  els.playheadMini.style.left = `${clipW}%`;
-  els.playhead.style.left = `${pct}%`;
-  els.waveProgress.style.width = `${pct}%`;
-};
-
-const buildRuler = (durationSec) => {
-  els.ruler.innerHTML = "";
-  if (!durationSec || !isFinite(durationSec)) return;
-  const ticks = [];
-  const step = durationSec > 60 ? 10 : durationSec > 20 ? 5 : durationSec > 10 ? 2 : 1;
-  for (let t = 0; t <= durationSec; t += step) ticks.push(t);
-  if (ticks[ticks.length - 1] < durationSec) ticks.push(Math.ceil(durationSec));
-  ticks.forEach(t => {
-    const tick = document.createElement("div");
-    const pct = (t / durationSec) * 100;
-    tick.className = "tick" + (t === 0 || t === Math.round(durationSec) ? " major" : "");
-    tick.style.left = `${pct}%`;
-    tick.textContent = `${pad(Math.floor(t/60))}:${pad(t%60)}`;
-    els.ruler.appendChild(tick);
-  });
+  els.progressFill.style.width = `${pct}%`;
 };
 
 // ---------- Mode / file ----------
@@ -792,60 +570,32 @@ const buildSliders = () => {
 };
 const sliderValue = (key) => Number($(`sl-${key}`).value);
 
-// ---------- Script editor ----------
-const tokenizeScript = () => {
-  const sel = window.getSelection();
-  let caretOffset = 0;
-  if (sel && sel.rangeCount && els.script.contains(sel.anchorNode)) {
-    const range = sel.getRangeAt(0);
-    const pre = range.cloneRange();
-    pre.selectNodeContents(els.script);
-    pre.setEnd(range.endContainer, range.endOffset);
-    caretOffset = pre.toString().length;
-  }
-  const text = els.script.innerText;
-  els.script.innerHTML = "";
+// ---------- Lyrics preview ----------
+// Renders the script as a series of word spans so we can highlight the
+// current word as the audio plays. Called when audio loads (with the
+// synthesized text) — the small script editor below stays editable but
+// is NOT what gets highlighted in the viewport.
+const renderLyrics = (text) => {
+  wordScript = text;
+  els.lyricsEmpty.style.display = "none";
+  els.lyricsText.style.display = "";
+  els.lyricsText.innerHTML = "";
   wordSpans = [];
   const tokens = text.split(/(\s+)/);
   for (const tok of tokens) {
     if (/^\s+$/.test(tok)) {
-      els.script.appendChild(document.createTextNode(tok));
+      els.lyricsText.appendChild(document.createTextNode(tok));
     } else if (tok.length) {
       const span = document.createElement("span");
       span.className = "word";
       span.textContent = tok;
-      els.script.appendChild(span);
+      els.lyricsText.appendChild(span);
       wordSpans.push(span);
     }
   }
-  if (els.script.contains(document.activeElement)) {
-    const walker = document.createTreeWalker(els.script, NodeFilter.SHOW_TEXT);
-    let pos = 0, node;
-    while ((node = walker.nextNode())) {
-      const next = pos + node.nodeValue.length;
-      if (next >= caretOffset) {
-        const range = document.createRange();
-        range.setStart(node, caretOffset - pos);
-        range.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(range);
-        break;
-      }
-      pos = next;
-    }
-  }
 };
-els.script.addEventListener("input", tokenizeScript);
-els.script.addEventListener("focus", () => {
-  if (els.script.innerText.trim() === "Type what the cheetah should say…") {
-    els.script.innerHTML = "";
-    tokenizeScript();
-  }
-});
-const scriptText = () => els.script.innerText.trim();
 const clearHighlight = () => {
   wordSpans.forEach(s => s.classList.remove("current", "past"));
-  els.script.classList.remove("playing");
 };
 const setCurrentWord = (idx) => {
   for (let i = 0; i < wordSpans.length; i++) {
@@ -858,13 +608,16 @@ const setCurrentWord = (idx) => {
     const cur = wordSpans[idx];
     cur.classList.add("current");
     cur.classList.remove("past");
-    const r = cur.getBoundingClientRect();
-    const sr = els.script.getBoundingClientRect();
-    if (r.bottom > sr.bottom - 20) cur.scrollIntoView({ block: "end" });
+    // Scroll into view inside the preview
+    const pr = els.lyricsPreview.getBoundingClientRect();
+    const cr = cur.getBoundingClientRect();
+    if (cr.bottom > pr.bottom - 40 || cr.top < pr.top + 40) {
+      cur.scrollIntoView({ block: "center", behavior: "smooth" });
+    }
   }
 };
 const highlightLoop = () => {
-  if (!audioEl || !audioEl.duration) {
+  if (!audioEl || !audioEl.duration || wordSpans.length === 0) {
     hlRAF = requestAnimationFrame(highlightLoop);
     return;
   }
@@ -879,155 +632,32 @@ const highlightLoop = () => {
   hlRAF = requestAnimationFrame(highlightLoop);
 };
 
-// ---------- Channel strip ----------
-const buildMeter = () => {
-  const ledCount = 28;
-  const step = 100 / ledCount;
-  els.meterRail.innerHTML = "";
-  for (let i = 0; i < ledCount; i++) {
-    const led = document.createElement("div");
-    led.className = "meter-led";
-    led.style.top = `${i * step}%`;
-    led.style.height = `${Math.max(2, step * 0.7)}%`;
-    led.dataset.level = 1 - (i / ledCount);
-    els.meterRail.appendChild(led);
+// ---------- Script editor (small, editable input below) ----------
+els.script.addEventListener("focus", () => {
+  if (els.script.innerText.trim() === "Type what the cheetah should say…") {
+    els.script.innerHTML = "";
   }
-};
-const updateFaderUI = () => {
-  const pct = (1 - (faderValueDb - (-60)) / (12 - (-60))) * 100;
-  els.faderCap.style.top = `${Math.max(4, Math.min(96, pct))}%`;
-  els.faderVal.textContent = faderValueDb <= -58 ? "-∞ dB" : `${faderValueDb >= 0 ? "+" : ""}${faderValueDb.toFixed(1)} dB`;
-  if (gainNode) gainNode.gain.value = isMuted ? 0 : dbToGain(faderValueDb);
-};
-const updatePanUI = () => {
-  const deg = (panValue + 1) * 180;
-  els.panRing.style.setProperty("--knob-deg", `${deg}deg`);
-  els.panCap.style.transform = `rotate(${deg}deg)`;
-  els.panVal.textContent = panValue === 0 ? "C" : `${panValue > 0 ? "R" : "L"}${Math.round(Math.abs(panValue) * 100)}`;
-  if (panNode) panNode.pan.value = panValue;
-};
-let draggingFader = false;
-els.faderRail.addEventListener("pointerdown", (e) => { draggingFader = true; els.faderRail.setPointerCapture(e.pointerId); moveFader(e); });
-els.faderRail.addEventListener("pointermove", (e) => { if (draggingFader) moveFader(e); });
-els.faderRail.addEventListener("pointerup", () => draggingFader = false);
-const moveFader = (e) => {
-  const rect = els.faderRail.getBoundingClientRect();
-  const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-  faderValueDb = 12 - y * (12 - (-60));
-  updateFaderUI();
-};
-let draggingPan = false;
-els.panRing.addEventListener("pointerdown", (e) => { draggingPan = true; els.panRing.setPointerCapture(e.pointerId); movePan(e); });
-els.panRing.addEventListener("pointermove", (e) => { if (draggingPan) movePan(e); });
-els.panRing.addEventListener("pointerup", () => draggingPan = false);
-const movePan = (e) => {
-  const rect = els.panRing.getBoundingClientRect();
-  const cx = rect.left + rect.width / 2;
-  const cy = rect.top + rect.height / 2;
-  const angle = Math.atan2(e.clientY - cy, e.clientX - cx);
-  let deg = (angle * 180 / Math.PI) + 90;
-  if (deg < 0) deg += 360;
-  panValue = Math.max(-1, Math.min(1, (deg / 180) - 1));
-  updatePanUI();
-};
-els.muteBtn.addEventListener("click", () => { isMuted = !isMuted; els.muteBtn.classList.toggle("active", isMuted); updateFaderUI(); });
-
-// ---------- Audio graph ----------
-const initAudioGraph = () => {
-  if (audioCtx) return;
-  const AC = window.AudioContext || window.webkitAudioContext;
-  audioCtx = new AC();
-  gainNode = audioCtx.createGain();
-  panNode = audioCtx.createStereoPanner();
-  analyser = audioCtx.createAnalyser();
-  analyser.fftSize = 256;
-  analyser.smoothingTimeConstant = 0.8;
-  gainNode.connect(panNode);
-  panNode.connect(analyser);
-  analyser.connect(audioCtx.destination);
-  updateFaderUI();
-  updatePanUI();
-  meterLoop();
-  highlightLoop();
-};
-const attachAudio = () => {
-  if (!audioCtx) initAudioGraph();
-  if (sourceNode) sourceNode.disconnect();
-  sourceNode = audioCtx.createMediaElementSource(audioEl);
-  sourceNode.connect(gainNode);
-};
-const meterLoop = () => {
-  if (!analyser) return;
-  const data = new Uint8Array(analyser.frequencyBinCount);
-  analyser.getByteFrequencyData(data);
-  const time = new Uint8Array(analyser.fftSize);
-  analyser.getByteTimeDomainData(time);
-  let peak = 0, tpeak = 0;
-  for (let i = 0; i < data.length; i++) peak = Math.max(peak, data[i] / 255);
-  for (let i = 0; i < time.length; i++) { const v = Math.abs((time[i] - 128) / 128); if (v > tpeak) tpeak = v; }
-  const level = Math.max(peak * 0.7, tpeak * 0.9);
-  els.meterRail.querySelectorAll(".meter-led").forEach(led => {
-    const thr = parseFloat(led.dataset.level);
-    const on = level >= thr;
-    led.classList.toggle("on", on);
-    led.classList.toggle("warn", on && thr > 0.5);
-    led.classList.toggle("clip", on && thr > 0.85);
-  });
-  meterRAF = requestAnimationFrame(meterLoop);
+});
+const scriptText = () => {
+  const t = els.script.innerText.trim();
+  if (t === "Type what the cheetah should say…") return "";
+  return t;
 };
 
 // ---------- Player ----------
-const drawWaveform = async (audioUrl) => {
-  const ctx = new (window.AudioContext || window.webkitAudioContext)();
-  const buf = await fetch(audioUrl).then(r => r.arrayBuffer());
-  const audio = await ctx.decodeAudioData(buf);
-  ctx.close();
-  els.srMeta.textContent = `${audio.sampleRate} Hz`;
-  els.chMeta.textContent = audio.numberOfChannels === 1 ? "Mono" : "Stereo";
-  const canvas = els.wave;
-  const dpr = window.devicePixelRatio || 1;
-  const rect = els.waveWrap.getBoundingClientRect();
-  canvas.width = rect.width * dpr; canvas.height = rect.height * dpr;
-  const c = canvas.getContext("2d"); c.scale(dpr, dpr);
-  const data0 = audio.getChannelData(0);
-  const data1 = audio.numberOfChannels > 1 ? audio.getChannelData(1) : null;
-  const samples = Math.floor(rect.width);
-  const block = Math.max(1, Math.floor(data0.length / samples));
-  const mid = rect.height / 2;
-  c.clearRect(0, 0, rect.width, rect.height);
-  c.strokeStyle = "rgba(255,255,255,0.04)"; c.beginPath(); c.moveTo(0, mid); c.lineTo(rect.width, mid); c.stroke();
-  for (let i = 0; i < samples; i++) {
-    let s0 = 0, s1 = 0;
-    const start = i * block;
-    for (let j = 0; j < block; j++) { s0 += data0[start+j]*data0[start+j]; if (data1) s1 += data1[start+j]*data1[start+j]; }
-    const rms0 = Math.sqrt(s0 / block), rms1 = data1 ? Math.sqrt(s1 / block) : rms0;
-    const rms = Math.max(rms0, rms1);
-    const h = Math.max(1, rms * rect.height * 0.92);
-    c.fillStyle = "rgba(245, 165, 36, 0.75)";
-    c.fillRect(i, mid - h / 2, 1, h);
-  }
-};
-const loadAudio = (url) => {
-  if (audioUrl) URL.revokeObjectURL(audioUrl);
-  audioUrl = url;
+const loadAudio = (url, script) => {
   audioEl = new Audio(url);
   audioEl.preload = "auto";
   audioEl.addEventListener("loadedmetadata", () => {
     trackDuration = audioEl.duration;
     els.durTime.textContent = fmtTime(trackDuration);
-    els.waveEmpty.style.display = "none";
     els.playBtn.disabled = false;
     els.stopBtn.disabled = false;
     els.stagePill.textContent = "Ready";
     els.recDot.classList.remove("live");
-    attachAudio();
-    drawWaveform(url);
-    buildRuler(trackDuration);
+    renderLyrics(script);
     clearHighlight();
-    tokenizeScript();
-    els.script.classList.add("playing");
-    els.clipLabel.textContent = `Clip · ${fmtTime(trackDuration)}`;
-    const voiceLabel = els.speaker.options[els.speaker.selectedIndex]?.textContent || "—";
+    const voiceLabel = els.speaker.options[els.speaker.selectedIndex]?.textContent || "Cloned";
     els.voiceInfo.textContent = voiceLabel;
   });
   audioEl.addEventListener("timeupdate", () => {
@@ -1051,17 +681,23 @@ const loadAudio = (url) => {
   });
 };
 els.playBtn.addEventListener("click", () => {
-  if (!audioCtx) initAudioGraph();
-  if (audioCtx.state === "suspended") audioCtx.resume();
   if (audioEl.paused) audioEl.play();
   else audioEl.pause();
 });
-els.stopBtn.addEventListener("click", () => { audioEl.pause(); audioEl.currentTime = 0; els.playBtn.textContent = "▶"; clearHighlight(); });
-els.waveWrap.addEventListener("click", (e) => {
+els.stopBtn.addEventListener("click", () => {
+  audioEl.pause();
+  audioEl.currentTime = 0;
+  els.playBtn.textContent = "▶";
+  clearHighlight();
+});
+els.lyricsPreview.addEventListener("click", (e) => {
   if (!audioEl.duration) return;
-  const rect = els.waveWrap.getBoundingClientRect();
-  const t = ((e.clientX - rect.left) / rect.width) * audioEl.duration;
-  audioEl.currentTime = Math.max(0, Math.min(audioEl.duration, t));
+  // Click anywhere in the lyrics jumps to the proportional time
+  const r = els.lyricsPreview.getBoundingClientRect();
+  // Use vertical position to seek? Actually the progress bar is at the top.
+  // For simplicity, click position relative to top controls seek:
+  const y = (e.clientY - r.top) / r.height;
+  audioEl.currentTime = Math.max(0, Math.min(audioEl.duration, y * audioEl.duration));
 });
 
 // ---------- Examples ----------
@@ -1070,12 +706,11 @@ const renderExamples = (items) => {
   items.forEach(ex => {
     const chip = document.createElement("button");
     chip.type = "button"; chip.className = "example-chip";
-    chip.innerHTML = `<span class="tag">${ex.label}</span><span class="txt">${ex.text.slice(0,60)}${ex.text.length > 60 ? "…" : ""}</span>`;
+    chip.innerHTML = `<span class="tag">${ex.label}</span><span class="txt">${ex.text.slice(0,50)}${ex.text.length > 50 ? "…" : ""}</span>`;
     chip.addEventListener("click", () => {
       els.script.innerText = ex.text;
       setMode("preset");
       els.speaker.value = ex.speaker;
-      tokenizeScript();
     });
     els.examples.appendChild(chip);
   });
@@ -1102,7 +737,6 @@ els.generateBtn.addEventListener("click", async () => {
   setBusy(true);
   els.stagePill.textContent = "Rendering";
   els.recDot.classList.add("live");
-  startedAt = Date.now();
   try {
     currentSubmission = await client.submit("/synthesize", args);
     for await (const event of currentSubmission) {
@@ -1110,7 +744,9 @@ els.generateBtn.addEventListener("click", async () => {
         const data = event.data?.[0];
         if (data?.url) {
           const resp = await fetch(data.url); const blob = await resp.blob();
-          loadAudio(URL.createObjectURL(blob));
+          loadAudio(URL.createObjectURL(blob), text);
+          // Auto-play once loaded
+          audioEl.addEventListener("loadedmetadata", () => audioEl.play(), { once: true });
         }
       }
     }
@@ -1128,10 +764,10 @@ els.generateBtn.addEventListener("click", async () => {
   cfg = await fetch("/config.json").then(r => r.json());
   cfg.speakers.forEach(s => { const o = document.createElement("option"); o.value = s.key; o.textContent = s.label; els.speaker.appendChild(o); });
   buildSliders();
-  buildMeter();
-  tokenizeScript();
   renderExamples(cfg.examples);
   client = await Client.connect(window.location.origin);
+  // start the highlight RAF loop regardless (it no-ops without audio)
+  highlightLoop();
 })();
 </script>
 </body>