mode-switch fix, remove example autoplay

index.html

@@ -97,6 +97,7 @@
   }
   body { display: flex; flex-direction: column; min-height: 100vh; }
   .mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
+  .hidden { display: none !important; }
 
   /* ===== Top bar ===== */
   .topbar {
@@ -654,14 +655,8 @@
     }
     .examples { order: 1; }
     .example-chip { padding: 6px 11px; font-size: 12px; }
-    .render-btn {
-      order: 2;
-      width: 100%;
-      padding: 12px 16px;
-      font-size: 14px;
-      justify-content: center;
-    }
-    .toast { order: 3; }
+    /* Keep Render compact; on narrow screens let the transport bar wrap. */
+    .transport { flex-wrap: wrap; }
 
     /* Toast — slide up from bottom on mobile for visibility */
     .toast {
@@ -733,10 +728,14 @@
       <span id="tc-s">00</span><span class="sep">:</span><span id="tc-f">00</span>
       <span style="margin-left: 8px; font-size: 11px; color: var(--text-faint)" id="dur-text">0:00</span>
     </div>
-    <div class="spacer"></div>
     <div class="info">
       <span class="k">Engine</span><span class="v">Gepard · 32 FSQ heads</span>
     </div>
+    <div class="spacer"></div>
+    <button class="render-btn" id="render-btn" type="button">
+      <span class="icon" id="render-icon">▶</span>
+      <span id="render-label">Render</span>
+    </button>
   </div>
 </section>
 
@@ -787,10 +786,6 @@
 
     <div class="row-actions">
       <div class="examples" id="examples"></div>
-      <button class="render-btn" id="render-btn" type="button">
-        <span class="icon" id="render-icon">▶</span>
-        <span id="render-label">Render</span>
-      </button>
     </div>
 
     <div class="toast hidden" id="toast"></div>
@@ -867,7 +862,9 @@ const setMode = (m) => {
   mode = m;
   els.modePreset.classList.toggle("active", m === "preset");
   els.modeClone.classList.toggle("active", m !== "preset");
+  // Preset → show speaker dropdown only; Clone → show reference panel only.
   els.refSection.classList.toggle("hidden", m !== "clone");
+  els.speaker.classList.toggle("hidden", m === "clone");
 };
 els.modePreset.addEventListener("click", () => setMode("preset"));
 els.modeClone.addEventListener("click", () => setMode("clone"));
@@ -1049,6 +1046,10 @@ const sliderValue = (key) => Number($(`sl-${key}`).value);
 
 // ---------- Player ----------
 const loadAudio = (url, script, filename = "gepard.wav") => {
+  // Silence any previously loaded clip: reassigning `audioEl` alone does not
+  // stop the old element, which is what caused overlapping playback.
+  if (audioEl) { audioEl.pause(); audioEl.src = ""; }
+  isPlaying = false;
   audioEl = new Audio(url);
   audioEl.preload = "auto";
   audioEl._downloadName = filename;
@@ -1256,15 +1257,6 @@ document.getElementById("theme-toggle").addEventListener("click", () => {
   renderExamples(cfg.examples);
   client = await Client.connect(window.location.origin);
   highlightLoop();
-
-  // Lazy cache: warm the first 3 examples in the background so first
-  // click is instant. Sequential to avoid GPU contention; failures are
-  // silent (next click will retry).
-  (async () => {
-    for (const ex of cfg.examples.slice(0, 3)) {
-      try { await synthesizeForExample(ex); } catch (e) { /* skip */ }
-    }
-  })();
 })();
 </script>
 </body>