Prune UI to studio essentials

Dropped:
- Top bar connection dot / busy indicator (state shows on the
generate button itself)
- "TRACK · INPUT" / "MASTER · OUTPUT" / "CHANNEL 01" subheadings
- Status footer (queue / ETA / latency / codec bar at the bottom)
- Live-generating animated waveform bars (the button spinner covers it)
- Stop / loop transport buttons
- Solo button (mute is enough)
- "Library" panel for examples (moved inline under generate)
- Sample-rate / channels metadata (decoding clutter)
- Radial gradient body background

Kept (the studio signature):
- 3-column work area: Track | Master | Channel
- Functional channel strip: vertical fader → GainNode, pan knob →
StereoPannerNode, real LED meter via AnalyserNode
- RMS waveform with click-to-seek playhead
- DAW-style sliders with mono right-aligned values
- Segmented mode control

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

index.html

@@ -6,7 +6,7 @@
 <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&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
 <style>
   :root {
     --bg: #0b0d12;
@@ -16,7 +16,6 @@
     --bg-meter: #05070a;
     --line: #20242e;
     --line-strong: #2b303c;
-    --line-hairline: #191c25;
     --text: #e7e9f0;
     --text-dim: #9aa3b8;
     --text-faint: #5e6577;
@@ -25,10 +24,6 @@
     --orange: #f97316;
     --red: #dc2626;
     --green: #22c55e;
-    --cyan: #06b6d4;
-    --good: #22c55e;
-    --bad: #ef4444;
-    --warn: #f59e0b;
     --radius-sm: 3px;
     --radius: 5px;
     --radius-lg: 8px;
@@ -43,16 +38,13 @@
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
   }
-  body {
-    display: flex; flex-direction: column; min-height: 100vh;
-    background: radial-gradient(1400px 700px at 50% -220px, rgba(245,165,36,0.035), transparent 60%), var(--bg);
-  }
+  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 ===== */
   .topbar {
-    display: flex; align-items: center; justify-content: space-between;
-    height: 46px; padding: 0 16px;
+    display: flex; align-items: center;
+    height: 44px; padding: 0 16px;
     background: var(--bg-elev);
     border-bottom: 1px solid var(--line);
   }
@@ -62,43 +54,29 @@
     background: linear-gradient(135deg, #eab308, var(--orange), var(--red));
     border-radius: 3px;
     display: inline-flex; align-items: center; justify-content: center;
-    font-size: 12px; color: #fff; font-weight: 800;
+    font-size: 12px; color: #fff; font-weight: 700;
   }
   .brand .name { font-weight: 700; letter-spacing: 0.18em; font-size: 12px; text-transform: uppercase; }
   .brand .name .accent { color: var(--amber); }
-  .brand .tag {
-    font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase;
-    padding-left: 10px; margin-left: 6px; border-left: 1px solid var(--line);
-  }
-  .topbar-right { display: flex; align-items: center; gap: 14px; }
-  .conn-dot {
-    width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint);
-  }
-  .conn-dot.live { background: var(--good); box-shadow: 0 0 8px rgba(34,197,94,0.55); }
-  .conn-dot.busy { background: var(--warn); box-shadow: 0 0 8px rgba(245,158,11,0.55); animation: pulse 1.2s ease-in-out infinite; }
-  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
-  .conn-text { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; }
 
   /* ===== Work area ===== */
   .workarea {
     flex: 1;
-    max-width: 1360px;
+    max-width: 1320px;
     margin: 0 auto;
     width: 100%;
-    padding: 16px;
+    padding: 14px;
     display: grid;
-    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 200px);
-    gap: 14px;
-    align-items: start;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 180px;
+    gap: 12px;
+    align-items: stretch;
   }
   @media (max-width: 1080px) {
     .workarea { grid-template-columns: 1fr 1fr; }
-    .channel-strip { grid-column: 1 / -1; display: flex; gap: 14px; align-items: stretch; height: 220px; }
-    .fader-bank, .meter-bank, .knob-bank { flex: 1; }
+    .channel-strip { grid-column: 1 / -1; height: 200px; }
   }
   @media (max-width: 680px) {
     .workarea { grid-template-columns: 1fr; }
-    .channel-strip { flex-direction: row; height: 180px; }
   }
 
   .panel {
@@ -106,26 +84,25 @@
     border: 1px solid var(--line);
     border-radius: var(--radius-lg);
     overflow: hidden;
+    display: flex; flex-direction: column;
   }
   .panel-head {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 9px 12px;
+    padding: 8px 12px;
     border-bottom: 1px solid var(--line);
     background: var(--bg-elev-2);
   }
   .panel-head .title {
     font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
   }
-  .panel-head .meta { font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; }
-  .panel-body { padding: 12px; }
+  .panel-body { padding: 12px; flex: 1; }
 
   .section { margin-bottom: 14px; }
   .section:last-child { margin-bottom: 0; }
   .section-label {
     font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint);
-    margin-bottom: 7px; display: flex; align-items: center; gap: 8px;
+    margin-bottom: 6px;
   }
-  .section-label::after { content: ""; flex: 1; height: 1px; background: var(--line-hairline); }
 
   /* Inputs */
   select, textarea, input[type="text"] {
@@ -133,7 +110,7 @@
     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: 100px; line-height: 1.5; }
+  textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
 
   /* Segmented control */
   .seg {
@@ -180,14 +157,9 @@
   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; }
 
-  /* ===== Master panel ===== */
-  .master { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
-  .master-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--bg-elev-2); }
-  .master-head .title { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
-  .master-body { padding: 14px 12px; }
-
+  /* ===== Master ===== */
   .waveform-wrap {
-    height: 110px; background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--radius);
+    height: 100px; background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--radius);
     position: relative; overflow: hidden; cursor: pointer;
   }
   canvas.wave { width: 100%; height: 100%; display: block; }
@@ -196,168 +168,117 @@
     color: var(--text-faint); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
   }
   .wave-progress { position: absolute; top: 0; left: 0; bottom: 0; width: 0; background: rgba(245,165,36,0.05); border-right: 1px solid var(--amber); pointer-events: none; }
-  .waveform-wrap.generating canvas.wave { opacity: 0; }
-  .wave-live {
-    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
-    background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(245,165,36,0.04) 6px 12px);
-  }
-  .wave-live-bars { display: flex; align-items: center; gap: 3px; height: 55%; }
-  .wave-live-bars span { width: 3px; background: var(--amber); border-radius: 1px; animation: liveBar 0.85s ease-in-out infinite; }
-  .wave-live-bars span:nth-child(1){animation-delay:-0.1s}
-  .wave-live-bars span:nth-child(2){animation-delay:-0.2s}
-  .wave-live-bars span:nth-child(3){animation-delay:-0.3s}
-  .wave-live-bars span:nth-child(4){animation-delay:-0.4s}
-  .wave-live-bars span:nth-child(5){animation-delay:-0.5s}
-  .wave-live-bars span:nth-child(6){animation-delay:-0.6s}
-  .wave-live-bars span:nth-child(7){animation-delay:-0.7s}
-  .wave-live-bars span:nth-child(8){animation-delay:-0.8s}
-  @keyframes liveBar { 0%,100%{height:10%} 50%{height:90%} }
 
   /* Transport */
   .transport {
     display: flex; align-items: center; gap: 12px; margin-top: 12px;
   }
-  .transport-btns { display: flex; align-items: center; gap: 6px; }
-  .transport-btns button {
-    appearance: none; border: 0; background: var(--bg-elev-2); color: var(--text-dim);
-    width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer;
-    display: flex; align-items: center; justify-content: center; font-size: 12px;
-    border: 1px solid var(--line); transition: all 0.12s;
-  }
-  .transport-btns button:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
-  .transport-btns button.primary { background: var(--amber); color: #1a1300; border-color: transparent; }
-  .transport-btns button:disabled { color: var(--text-faint); cursor: not-allowed; }
+  .play-btn {
+    appearance: none; border: 0;
+    width: 44px; height: 44px;
+    border-radius: 50%;
+    background: var(--amber);
+    color: #1a1300;
+    font-size: 16px;
+    cursor: pointer;
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+    transition: filter 0.12s, transform 0.05s;
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 4px 12px rgba(245,165,36,0.18);
+  }
+  .play-btn:hover:not(:disabled) { filter: brightness(1.08); }
+  .play-btn:active:not(:disabled) { transform: translateY(1px); }
+  .play-btn:disabled { background: var(--bg-elev-2); color: var(--text-faint); cursor: not-allowed; box-shadow: 0 0 0 1px var(--line); }
   .time-display { display: flex; align-items: baseline; gap: 6px; font-family: "JetBrains Mono", monospace; }
-  .time-display .cur { font-size: 24px; font-weight: 500; color: var(--text); }
-  .time-display .sep { color: var(--text-faint); font-size: 16px; }
+  .time-display .cur { font-size: 26px; font-weight: 500; color: var(--text); }
+  .time-display .sep { color: var(--text-faint); font-size: 18px; }
   .time-display .dur { font-size: 14px; color: var(--text-dim); }
-  .transport-meta { margin-left: auto; text-align: right; font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; }
-  .transport-meta .v { color: var(--text-dim); }
 
   /* ===== Channel strip ===== */
   .channel-strip {
-    background: var(--bg-elev);
-    border: 1px solid var(--line);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    min-height: 460px;
-  }
-  .channel-strip-head {
-    padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--bg-elev-2);
-    font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
-    display: flex; justify-content: space-between;
+    background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg);
+    overflow: hidden; display: flex; flex-direction: column;
   }
   .strip-body {
-    padding: 12px;
+    padding: 14px 10px 12px;
     display: grid;
-    grid-template-columns: 1fr 40px 1fr;
-    gap: 10px;
+    grid-template-columns: 1fr 22px 1fr;
+    gap: 8px;
     align-items: end;
-    min-height: 0;
-  }
-  @media (max-width: 1080px) {
-    .strip-body { grid-template-columns: 1fr 60px 1fr; }
+    flex: 1;
   }
+  .strip-col { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; }
 
-  /* Strip buttons */
-  .strip-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
   .strip-btn {
-    width: 100%; padding: 6px 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
-    background: var(--bg-elev-2); color: var(--text-dim); font-size: 10px; font-weight: 700;
-    letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all 0.12s;
+    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(--amber); color: #1a1300; border-color: transparent; }
-  .strip-btn.mute.active { background: var(--red); color: #fff; }
-  .strip-btn.solo.active { background: var(--cyan); color: #001a1c; }
+  .strip-btn.active { background: var(--red); color: #fff; border-color: transparent; }
 
   /* Fader */
   .fader-rail {
-    flex: 1;
-    width: 34px;
-    position: relative;
-    background: var(--bg-input);
-    border: 1px solid var(--line);
-    border-radius: 999px;
-    cursor: pointer;
-    touch-action: none;
+    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-tick {
-    position: absolute; left: 50%; width: 6px; height: 1px; background: var(--line-strong);
-    transform: translateX(-50%);
-  }
   .fader-cap {
-    position: absolute; left: 50%; width: 42px; height: 18px;
+    position: absolute; left: 50%; width: 38px; height: 16px;
     background: linear-gradient(180deg, #2a2f3a, #1a1e27);
-    border: 1px solid var(--line-strong);
-    border-radius: 3px;
+    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: 28px; height: 2px;
+    content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 2px;
     background: var(--amber); transform: translate(-50%, -50%); border-radius: 1px;
   }
-  .fader-value {
-    margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 11px;
-    color: var(--text-dim); text-align: center;
-  }
+  .fader-value { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-dim); text-align: center; margin-top: 6px; }
 
   /* LED meter */
   .meter-rail {
-    flex: 1;
-    width: 22px;
-    position: relative;
-    background: var(--bg-meter);
-    border: 1px solid var(--line);
-    border-radius: var(--radius-sm);
-    overflow: hidden;
+    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(--warn); }
+  .meter-led.on.warn { background: var(--amber); }
   .meter-led.on.clip { background: var(--red); box-shadow: 0 0 4px var(--red); }
-  .meter-labels {
-    position: absolute; right: -22px; top: 0; bottom: 0;
-    display: flex; flex-direction: column; justify-content: space-between;
-    font-size: 8px; color: var(--text-faint); font-family: "JetBrains Mono", monospace;
-  }
 
   /* Pan knob */
-  .knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
   .knob-ring {
-    width: 54px; height: 54px; border-radius: 50%;
+    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 58%, black 60%); -webkit-mask: radial-gradient(transparent 58%, black 60%);
+    mask: radial-gradient(transparent 56%, black 60%); -webkit-mask: radial-gradient(transparent 56%, black 60%);
   }
   .knob-cap {
-    position: absolute; inset: 6px; border-radius: 50%;
+    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: 6px; left: 50%; width: 2px; height: 10px;
+    content: ""; position: absolute; top: 5px; left: 50%; width: 2px; height: 8px;
     background: var(--amber); transform: translateX(-50%); border-radius: 1px;
   }
-  .knob-label { font-size: 10px; color: var(--text-faint); letter-spacing: 0.12em; text-transform: uppercase; }
-  .knob-value { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-dim); }
+  .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; }
 
   /* Generate */
   .generate-btn {
@@ -381,54 +302,32 @@
   }
   .toast.hidden { display: none; }
 
-  /* Examples */
-  .examples { display: flex; flex-wrap: wrap; gap: 6px; }
+  /* Examples inline */
+  .examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
   .example-chip {
     appearance: none; display: inline-flex; align-items: center; gap: 6px;
-    padding: 6px 10px; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 999px;
+    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; }
-
-  /* Status bar */
-  .statusbar {
-    display: flex; align-items: center; gap: 18px;
-    padding: 8px 16px; background: var(--bg-elev); border-top: 1px solid var(--line);
-    font-size: 10px; color: var(--text-faint); letter-spacing: 0.12em; text-transform: uppercase;
-  }
-  .statusbar .item { display: flex; align-items: center; gap: 6px; }
-  .statusbar .item .k { color: var(--text-faint); }
-  .statusbar .item .v { color: var(--text-dim); font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
-  .statusbar .item .v.live { color: var(--amber); }
-  .statusbar .spacer { flex: 1; }
 </style>
 </head>
 <body>
 
-<!-- ===== Top bar ===== -->
 <div class="topbar">
   <div class="brand">
     <span class="logo">G</span>
     <span class="name">GEPARD<span class="accent">·</span>STUDIO</span>
-    <span class="tag">v1.1 · Text-to-Speech</span>
-  </div>
-  <div class="topbar-right">
-    <span class="conn-dot" id="conn-dot"></span>
-    <span class="conn-text" id="conn-text">Disconnected</span>
   </div>
 </div>
 
-<!-- ===== Work area ===== -->
 <div class="workarea">
 
-  <!-- LEFT: TRACK -->
+  <!-- Track -->
   <section class="panel">
-    <div class="panel-head">
-      <div class="title">Track · Input</div>
-      <div class="meta">Source · Script · Mix</div>
-    </div>
+    <div class="panel-head"><div class="title">Track</div></div>
     <div class="panel-body">
       <div class="section">
         <div class="section-label">Source</div>
@@ -442,7 +341,7 @@
         <select id="speaker"></select>
       </div>
       <div class="section hidden" id="ref-section">
-        <div class="section-label">Reference Audio · ≤ 60s</div>
+        <div class="section-label">Reference · ≤ 60s</div>
         <div class="file-drop" id="drop">
           <div class="ico">🎙️</div>
           <div class="lbl">Drop clip · click to upload</div>
@@ -455,74 +354,49 @@
         <textarea id="text" placeholder="Type what the cheetah should say…"></textarea>
       </div>
       <div class="section">
-        <div class="section-label">Mix · Parameters</div>
+        <div class="section-label">Mix</div>
         <div id="sliders"></div>
       </div>
     </div>
   </section>
 
-  <!-- CENTER: MASTER -->
-  <section class="master">
-    <div class="master-head">
-      <div class="title">Master · Output</div>
-      <div class="meta" id="stage-meta">Idle</div>
-    </div>
-    <div class="master-body">
+  <!-- Master -->
+  <section class="panel">
+    <div class="panel-head"><div class="title">Master</div></div>
+    <div class="panel-body">
       <div class="waveform-wrap" id="wave-wrap">
-        <div class="wave-empty" id="wave-empty">No signal · awaiting input</div>
+        <div class="wave-empty" id="wave-empty">No signal</div>
         <canvas class="wave" id="wave"></canvas>
         <div class="wave-progress" id="wave-progress"></div>
-        <div class="wave-live" id="wave-live" style="display:none">
-          <div class="wave-live-bars">
-            <span></span><span></span><span></span><span></span>
-            <span></span><span></span><span></span><span></span>
-          </div>
-        </div>
       </div>
       <div class="transport">
-        <div class="transport-btns">
-          <button id="stop-btn" type="button" title="Stop">■</button>
-          <button class="primary" id="play-btn" type="button" title="Play / Pause" disabled>▶</button>
-          <button id="loop-btn" type="button" title="Loop">⟳</button>
-        </div>
+        <button class="play-btn" id="play-btn" type="button" disabled>▶</button>
         <div class="time-display">
           <span class="cur" id="cur-time">0:00</span>
           <span class="sep">/</span>
           <span class="dur" id="dur-time">0:00</span>
         </div>
-        <div class="transport-meta">
-          <div>SR <span class="v" id="sr-meta">—</span></div>
-          <div>CH <span class="v" id="ch-meta">—</span></div>
-        </div>
       </div>
+      <button class="generate-btn" id="generate-btn" type="button"><span class="lbl">▶  Generate</span></button>
+      <div class="toast hidden" id="toast"></div>
+      <div class="examples" id="examples"></div>
     </div>
   </section>
 
-  <!-- RIGHT: CHANNEL STRIP -->
-  <section class="channel-strip" id="channel-strip">
-    <div class="channel-strip-head">
-      <span>Channel 01</span>
-      <span>Master</span>
-    </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 mute" id="mute-btn" type="button">Mute</button>
-        <button class="strip-btn solo" id="solo-btn" type="button">Solo</button>
-        <div style="flex:1"></div>
-        <div class="knob-wrap">
-          <div class="knob-ring" id="pan-ring" style="--knob-deg:0deg">
-            <div class="knob-cap" id="pan-cap"></div>
-          </div>
-          <span class="knob-label">Pan</span>
-          <span class="knob-value mono" id="pan-val">C</span>
-        </div>
+        <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" style="justify-content:flex-end">
+      <div class="strip-col">
         <div class="meter-rail" id="meter-rail"></div>
-        <div class="meter-labels" id="meter-labels"></div>
       </div>
       <div class="strip-col">
-        <div style="flex:1"></div>
         <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>
@@ -531,54 +405,23 @@
 
 </div>
 
-<!-- ===== Generate + Examples ===== -->
-<div class="workarea" style="padding-top:0">
-  <div style="grid-column:1 / -1">
-    <button class="generate-btn" id="generate-btn" type="button"><span class="lbl">▶  Generate</span></button>
-    <div class="toast hidden" id="toast"></div>
-    <section class="panel" style="margin-top:14px">
-      <div class="panel-head">
-        <div class="title">Library · Examples</div>
-        <div class="meta">Click to load</div>
-      </div>
-      <div class="panel-body"><div class="examples" id="examples"></div></div>
-    </section>
-  </div>
-</div>
-
-<!-- ===== Status footer ===== -->
-<div class="statusbar">
-  <div class="item"><span class="k">Stage</span> <span class="v" id="f-stage">Idle</span></div>
-  <div class="item"><span class="k">Queue</span> <span class="v" id="f-queue">—</span></div>
-  <div class="item"><span class="k">ETA</span> <span class="v" id="f-eta">—</span></div>
-  <div class="item"><span class="k">Latency</span> <span class="v" id="f-latency">—</span></div>
-  <div class="spacer"></div>
-  <div class="item"><span class="k">Codec</span> <span class="v">NeMo Nano · 22.05kHz</span></div>
-</div>
-
 <script type="module">
 import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
 const $ = (id) => document.getElementById(id);
 const els = {
-  connDot: $("conn-dot"), connText: $("conn-text"),
   modePreset: $("mode-preset"), modeClone: $("mode-clone"),
-  speaker: $("speaker"),
-  speakerSection: $("speaker-section"), refSection: $("ref-section"),
+  speaker: $("speaker"), speakerSection: $("speaker-section"), refSection: $("ref-section"),
   drop: $("drop"), fileInput: $("file-input"), fileName: $("file-name"),
   text: $("text"), sliders: $("sliders"),
   waveWrap: $("wave-wrap"), wave: $("wave"), waveEmpty: $("wave-empty"),
-  waveProgress: $("wave-progress"), waveLive: $("wave-live"),
-  playBtn: $("play-btn"), stopBtn: $("stop-btn"), loopBtn: $("loop-btn"),
-  curTime: $("cur-time"), durTime: $("dur-time"),
-  srMeta: $("sr-meta"), chMeta: $("ch-meta"),
+  waveProgress: $("wave-progress"),
+  playBtn: $("play-btn"), curTime: $("cur-time"), durTime: $("dur-time"),
   generateBtn: $("generate-btn"), toast: $("toast"), examples: $("examples"),
-  stageMeta: $("stage-meta"),
-  fStage: $("f-stage"), fQueue: $("f-queue"), fEta: $("f-eta"), fLatency: $("f-latency"),
   faderRail: $("fader-rail"), faderCap: $("fader-cap"), faderVal: $("fader-val"),
-  meterRail: $("meter-rail"), meterLabels: $("meter-labels"),
+  meterRail: $("meter-rail"),
   panRing: $("pan-ring"), panCap: $("pan-cap"), panVal: $("pan-val"),
-  muteBtn: $("mute-btn"), soloBtn: $("solo-btn"),
+  muteBtn: $("mute-btn"),
 };
 
 let cfg = null;
@@ -589,19 +432,16 @@ let audioUrl = null;
 let audioEl = new Audio();
 let currentSubmission = null;
 let startedAt = 0;
-let loop = false;
 
-// Audio graph for level meter + fader + pan
 let audioCtx = null;
 let sourceNode = null;
 let gainNode = null;
 let panNode = null;
 let analyser = null;
 let meterRAF = null;
-let faderValueDb = 0;   // -60..+12
-let panValue = 0;       // -1..0..+1
+let faderValueDb = 0;
+let panValue = 0;
 let isMuted = false;
-let isSolo = false;
 
 const sliderSpec = [
   { key: "temperature",        label: "Temperature",  fmt: v => Number(v).toFixed(2), step: 0.05 },
@@ -611,26 +451,19 @@ const sliderSpec = [
   { key: "repetition_window",  label: "Rep. Window",  fmt: v => String(Math.round(v)), step: 1 },
 ];
 
-// ---------- Helpers ----------
-const setStage = (t) => { els.stageMeta.textContent = t; els.fStage.textContent = t; };
-const setConn = (state, text) => {
-  els.connDot.classList.remove("live", "busy");
-  if (state) els.connDot.classList.add(state);
-  els.connText.textContent = text;
-};
-const setBusy = (busy, label) => {
+const dbToGain = (db) => Math.pow(10, db / 20);
+
+const setBusy = (busy) => {
   els.generateBtn.disabled = busy;
   els.generateBtn.innerHTML = busy
-    ? '<span class="spinner"></span> Processing…'
-    : `<span class="lbl">${label || "▶  Generate"}</span>`;
+    ? '<span class="spinner"></span> Generating…'
+    : '<span class="lbl">▶  Generate</span>';
 };
 const showError = (msg) => { els.toast.textContent = msg; els.toast.classList.remove("hidden"); };
 const clearError = () => { els.toast.classList.add("hidden"); els.toast.textContent = ""; };
 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 fmtEta = (s) => { if (!s || s < 0) return "—"; if (s < 60) return `${Math.round(s)}s`; return `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`; };
-const fmtQueue = (n) => (n == null || n <= 0) ? "0" : `#${n}`;
 
-// ---------- Mode / file / sliders ----------
+// ---------- Mode / file ----------
 const setMode = (m) => {
   mode = m;
   els.modePreset.classList.toggle("active", m === "preset");
@@ -645,9 +478,10 @@ els.drop.addEventListener("click", () => els.fileInput.click());
 els.fileInput.addEventListener("change", (e) => { const f = e.target.files[0]; if (f) setRefFile(f); });
 ["dragenter", "dragover"].forEach(ev => els.drop.addEventListener(ev, (e) => { e.preventDefault(); els.drop.classList.add("drag"); }));
 ["dragleave", "drop"].forEach(ev => els.drop.addEventListener(ev, (e) => { e.preventDefault(); els.drop.classList.remove("drag"); }));
-els.drop.addEventListener("drop", (e) => { const f = e.target.files[0]; if (f) setRefFile(f); });
+els.drop.addEventListener("drop", (e) => { const f = e.dataTransfer.files[0]; if (f) setRefFile(f); });
 const setRefFile = (f) => { refFile = f; els.fileName.textContent = f.name; };
 
+// ---------- Sliders ----------
 const buildSliders = () => {
   els.sliders.innerHTML = "";
   sliderSpec.forEach(spec => {
@@ -665,67 +499,56 @@ const sliderValue = (key) => Number($(`sl-${key}`).value);
 
 // ---------- Channel strip ----------
 const buildMeter = () => {
-  const labels = ["+6", "0", "-6", "-12", "-18", "-24", "-36", "-60"];
-  const ledCount = 32;
+  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.65)}%`;
+    led.style.height = `${Math.max(2, step * 0.7)}%`;
     led.dataset.level = 1 - (i / ledCount);
     els.meterRail.appendChild(led);
   }
-  els.meterLabels.innerHTML = labels.map(l => `<span>${l}</span>`).join("");
 };
-
 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 dbToGain = (db) => Math.pow(10, db / 20);
 const updatePanUI = () => {
-  const deg = (panValue + 1) * 180; // 0..360 for conic
+  const deg = (panValue + 1) * 180;
   els.panRing.style.setProperty("--knob-deg", `${deg}deg`);
   els.panCap.style.transform = `rotate(${deg}deg)`;
-  if (panValue === 0) els.panVal.textContent = "C";
-  else els.panVal.textContent = `${panValue > 0 ? "R" : "L"}${Math.round(Math.abs(panValue) * 100)}`;
+  els.panVal.textContent = panValue === 0 ? "C" : `${panValue > 0 ? "R" : "L"}${Math.round(Math.abs(panValue) * 100)}`;
   if (panNode) panNode.pan.value = panValue;
 };
-
-// Fader interaction
 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", (e) => { draggingFader = false; });
+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();
 };
-
-// Pan interaction
 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", (e) => { draggingPan = false; });
+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; // 0 top
+  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(); });
-els.soloBtn.addEventListener("click", () => { isSolo = !isSolo; els.soloBtn.classList.toggle("active", isSolo); });
 
 // ---------- Audio graph ----------
 const initAudioGraph = () => {
@@ -754,20 +577,13 @@ const meterLoop = () => {
   if (!analyser) return;
   const data = new Uint8Array(analyser.frequencyBinCount);
   analyser.getByteFrequencyData(data);
-  // Convert peak freq energy to dB-ish 0..1
-  let peak = 0;
-  for (let i = 0; i < data.length; i++) peak = Math.max(peak, data[i] / 255);
-  // also use time-domain for more motion
   const time = new Uint8Array(analyser.fftSize);
   analyser.getByteTimeDomainData(time);
-  let tpeak = 0;
-  for (let i = 0; i < time.length; i++) {
-    const v = Math.abs((time[i] - 128) / 128);
-    if (v > tpeak) tpeak = v;
-  }
+  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);
-  const leds = els.meterRail.querySelectorAll(".meter-led");
-  leds.forEach(led => {
+  els.meterRail.querySelectorAll(".meter-led").forEach(led => {
     const thr = parseFloat(led.dataset.level);
     const on = level >= thr;
     led.classList.toggle("on", on);
@@ -783,8 +599,6 @@ const drawWaveform = async (audioUrl) => {
   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();
@@ -808,17 +622,11 @@ const drawWaveform = async (audioUrl) => {
     c.fillRect(i, mid - h / 2, 1, h);
   }
 };
-const setGenerating = (on) => {
-  els.waveWrap.classList.toggle("generating", on);
-  els.waveLive.style.display = on ? "flex" : "none";
-  els.waveEmpty.style.display = on ? "none" : (audioUrl ? "none" : "flex");
-};
 const loadAudio = (url) => {
   if (audioUrl) URL.revokeObjectURL(audioUrl);
   audioUrl = url;
   audioEl = new Audio(url);
   audioEl.preload = "auto";
-  audioEl.loop = loop;
   audioEl.addEventListener("loadedmetadata", () => {
     els.durTime.textContent = fmtTime(audioEl.duration);
     els.waveEmpty.style.display = "none";
@@ -831,19 +639,16 @@ const loadAudio = (url) => {
     const pct = audioEl.duration ? (audioEl.currentTime / audioEl.duration) * 100 : 0;
     els.waveProgress.style.width = `${pct}%`;
   });
-  audioEl.addEventListener("ended", () => { if (!loop) els.playBtn.textContent = "▶"; });
+  audioEl.addEventListener("ended", () => { els.playBtn.textContent = "▶"; });
 };
-
 els.playBtn.addEventListener("click", () => {
   if (!audioCtx) initAudioGraph();
   if (audioCtx.state === "suspended") audioCtx.resume();
   if (audioEl.paused) { audioEl.play(); els.playBtn.textContent = "❚❚"; }
   else { audioEl.pause(); els.playBtn.textContent = "▶"; }
 });
-els.stopBtn.addEventListener("click", () => { audioEl.pause(); audioEl.currentTime = 0; els.playBtn.textContent = "▶"; });
-els.loopBtn.addEventListener("click", () => { loop = !loop; audioEl.loop = loop; els.loopBtn.classList.toggle("active", loop); });
 els.waveWrap.addEventListener("click", (e) => {
-  if (!audioEl.duration || els.waveWrap.classList.contains("generating")) return;
+  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));
@@ -855,7 +660,7 @@ 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,70)}${ex.text.length > 70 ? "…" : ""}</span>`;
+    chip.innerHTML = `<span class="tag">${ex.label}</span><span class="txt">${ex.text.slice(0,60)}${ex.text.length > 60 ? "…" : ""}</span>`;
     chip.addEventListener("click", () => { els.text.value = ex.text; setMode("preset"); els.speaker.value = ex.speaker; });
     els.examples.appendChild(chip);
   });
@@ -879,21 +684,13 @@ els.generateBtn.addEventListener("click", async () => {
     repetition_penalty: sliderValue("repetition_penalty"),
     repetition_window: sliderValue("repetition_window"),
   };
-  setBusy(true); setGenerating(true); setStage("Submitting");
-  els.fQueue.textContent = "—"; els.fEta.textContent = "—"; els.fLatency.textContent = "—";
+  setBusy(true);
   startedAt = Date.now();
   try {
     currentSubmission = await client.submit("/synthesize", args);
     for await (const event of currentSubmission) {
-      if (event.type === "status") {
-        const stage = event.stage || "pending";
-        const label = stage === "generating" ? "Generating" : stage === "pending" ? "Queued" : stage === "complete" ? "Complete" : stage === "error" ? "Error" : stage === "streaming" ? "Streaming" : stage;
-        setStage(label);
-        els.fQueue.textContent = fmtQueue(event.position);
-        els.fEta.textContent = fmtEta(event.eta);
-        setConn(stage === "generating" ? "busy" : "live", stage === "generating" ? "Generating" : "Ready");
-      } else if (event.type === "data") {
-        els.fLatency.textContent = `${((Date.now() - startedAt) / 1000).toFixed(1)}s`;
+      if (event.type === "data") {
+        const elapsed = ((Date.now() - startedAt) / 1000).toFixed(1);
         const data = event.data?.[0];
         if (data?.url) {
           const resp = await fetch(data.url); const blob = await resp.blob();
@@ -901,23 +698,21 @@ els.generateBtn.addEventListener("click", async () => {
         }
       }
     }
-    setStage("Idle"); setConn("live", "Ready");
   } catch (err) {
-    console.error(err); showError(err?.message || String(err)); setStage("Error"); setConn("live", "Ready");
+    console.error(err); showError(err?.message || String(err));
   } finally {
-    setBusy(false); setGenerating(false); currentSubmission = null;
+    setBusy(false); currentSubmission = null;
   }
 });
 
 // ---------- Boot ----------
 (async () => {
-  setConn(null, "Connecting"); setStage("Idle"); buildMeter();
   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();
   renderExamples(cfg.examples);
   client = await Client.connect(window.location.origin);
-  setConn("live", "Ready");
 })();
 </script>
 </body>