Make CODA a premium audio instrument with a 4-beat journey

Turn the UI into a milled-metal studio instrument with a cyan->violet->gold
narrative arc across four emotional beats:

- OPEN: faceplates rise on expo-out easing as milled panels (bevel lip +
recessed body + contact drop); the spectrum powers on from flat; the
Finish key sits visibly disarmed.
- UPLOAD: the fingerprint readout renders as a backlit-LCD HUD that powers
on (scanline sweep + per-cell settle) and the Finish key ignites.
- PROCESS: a generator yields a live stage overlay at the real pipeline
milestones (listening/composing/splicing) with counter-rotating rings,
dancing bars, and a violet active-step stepper that holds the GPU wait.
- REVEAL: the result deck escalates to a gold MASTER (gold bevel, head,
play control, and mono spec-plate summary chips).

Every module is custom-styled away from default Gradio: recessed upload
channel, milled fader with a lit knurled thumb, carved vibe field, backlit
remaster toggle, illuminated key states, integrated player decks. Beat
states are driven by CSS :has() off real DOM (stage overlay / output audio)
so they need no fragile JS events. Gradio footer hidden.

Engine pipeline, hidden length mirror, and no-autoplay output are unchanged.

app.py

@@ -86,20 +86,65 @@ if os.environ.get("SPACE_ID"):
         print(f"[coda] preload failed ({_e}); will lazy-load", flush=True)
 
 
-def _fmt_info(info, quality):
-    """human-readable summary of what CODA heard."""
-    lines = [
-        f"**KEY**  `{info['key']}`",
-        f"**TEMPO**  `{info['bpm']} BPM`",
-        f"**METER**  `{info['time_signature']}`",
-        f"**CLIP**  `{info['duration']}s`",
+def _readout_html(info, quality):
+    """The 'CODA heard' fingerprint as a premium audio-tool readout (a HUD of
+    labelled value cells), not a text dump. Rendered into a gr.HTML panel."""
+    cells = [
+        ("KEY", str(info["key"]), ""),
+        ("TEMPO", str(info["bpm"]), "BPM"),
+        ("METER", str(info["time_signature"]), ""),
+        ("LENGTH", f"{info['duration']}", "S"),
     ]
+    cell_html = "".join(
+        f"<div class='coda-hud-cell'>"
+        f"<div class='coda-hud-k'>{k}</div>"
+        f"<div class='coda-hud-v'>{v}<span class='coda-hud-u'>{u}</span></div>"
+        f"</div>"
+        for (k, v, u) in cells)
+    note = ""
     if quality and quality.get("lofi"):
-        lines.append(
-            f"**SOURCE**&nbsp;&nbsp;`lo-fi ~{quality['bandwidth_hz']/1000:.0f}kHz` "
-            f"— CODA cleans a copy before it listens, so it follows the *song*, "
-            f"not the hiss")
-    return "  \n".join(lines)
+        note = (f"<div class='coda-hud-note'>"
+                f"<span class='coda-hud-tag'>LO-FI ~{quality['bandwidth_hz']/1000:.0f}KHZ</span>"
+                f"CODA cleans a copy before it listens, so it follows the "
+                f"<em>song</em>, not the hiss</div>")
+    return (
+        "<div class='coda-hud'>"
+        "<div class='coda-hud-head'><span class='coda-hud-dot'></span>"
+        "CODA&nbsp;HEARD<span class='coda-hud-live'>ANALYZED</span></div>"
+        f"<div class='coda-hud-grid'>{cell_html}</div>"
+        f"{note}</div>")
+
+
+def _warn_html(title, body):
+    """A clip-rejected / read-error message styled to match the readout HUD."""
+    return ("<div class='coda-hud coda-hud-warn'>"
+            f"<div class='coda-hud-head'><span class='coda-hud-dot'></span>{title}</div>"
+            f"<div class='coda-hud-note'>{body}</div></div>")
+
+
+# the live "what is CODA doing right now" overlay shown over the result panel
+# during generation. finish_song yields these at each real pipeline milestone.
+_STAGE_STEPS = ["listening", "composing", "splicing"]
+
+
+def _stage_html(phase, label, sub=""):
+    bars = "".join("<span></span>" for _ in range(9))
+    steps = "".join(
+        f"<span class='coda-step{' on' if _STAGE_STEPS.index(phase) >= i else ''}"
+        f"{' now' if _STAGE_STEPS.index(phase) == i else ''}'></span>"
+        if phase in _STAGE_STEPS else "<span class='coda-step'></span>"
+        for i in range(len(_STAGE_STEPS)))
+    return (
+        f"<div class='coda-stage' data-phase='{phase}'>"
+        "<div class='coda-stage-core'>"
+        "<div class='coda-stage-ring'></div>"
+        "<div class='coda-stage-ring r2'></div>"
+        f"<div class='coda-stage-bars'>{bars}</div>"
+        "</div>"
+        f"<div class='coda-stage-label'>{label}<span class='coda-stage-dots'></span></div>"
+        f"<div class='coda-stage-sub'>{sub}</div>"
+        f"<div class='coda-stage-steps'>{steps}</div>"
+        "</div>")
 
 
 def analyze_on_upload(audio_path):
@@ -115,16 +160,19 @@ def analyze_on_upload(audio_path):
         # least MIN_NEW seconds of new audio. Block over-long clips here, with a
         # clear message, instead of failing at generation time.
         if info["duration"] > engine.MAX_SOURCE_SECONDS:
-            msg = (f"### Clip too long\nThat clip is **{info['duration']:.0f}s**. "
-                   f"CODA continues clips up to **{engine.MAX_SOURCE_SECONDS:.0f}s** "
-                   f"(Stable Audio 3's {engine.MAX_TOTAL_SECONDS:.0f}s total cap). "
-                   f"Trim it shorter and re-upload.")
+            msg = _warn_html(
+                "Clip too long",
+                f"That clip is {info['duration']:.0f}s. CODA continues clips up to "
+                f"{engine.MAX_SOURCE_SECONDS:.0f}s (Stable Audio 3's "
+                f"{engine.MAX_TOTAL_SECONDS:.0f}s total cap). Trim it shorter and "
+                f"re-upload.")
             return gr.update(value=msg, visible=True), gr.update(interactive=False)
-        md = "### CODA heard\n" + _fmt_info(info, quality)
-        return gr.update(value=md, visible=True), gr.update(interactive=True)
+        html = _readout_html(info, quality)
+        return gr.update(value=html, visible=True), gr.update(interactive=True)
     except Exception as e:
         print(f"[coda] analysis failed ({e})", flush=True)
-        return (gr.update(value=f"Couldn't read that file: {e}", visible=True),
+        return (gr.update(value=_warn_html("Couldn't read that file", str(e)),
+                          visible=True),
                 gr.update(interactive=False))
 
 
@@ -151,51 +199,75 @@ def _continue_on_gpu(listen_path, total_seconds, vibe):
 def finish_song(audio_path, total_seconds, vibe, remaster,
                 progress=gr.Progress()):
     """Orchestrate the job: CPU prep -> GPU continuation -> CPU splice.
-    Returns (output_wav_path, summary_markdown)."""
+
+    A GENERATOR so the UI gets a real, dramatic, server-synced wait state: it
+    yields a live 'stage' overlay (gr.HTML) at each genuine pipeline milestone —
+    listening / composing / splicing — and finally yields the finished audio +
+    summary while clearing the overlay. This is still ONE event (the spinner
+    clears on StopIteration), so it keeps the single-completion property; the
+    earlier 'stuck spinner' risk was a CHAINED second `.then` event, which this
+    is not. The exact pipeline contract and call order are unchanged:
+    enhance_to_tempfile -> fingerprint -> engine.continue_audio -> stitch.stitch.
+
+    Yields/returns 3-tuples for (output_audio, summary_md, stage_html)."""
     if not audio_path:
         raise gr.Error("Upload a clip (or load the PUSHBACK demo) first.")
 
     total_seconds = int(total_seconds)
-
-    # --- CPU prep (outside the GPU window) ---
-    progress(0.05, desc="Listening to your clip…")
-    listen_path = enhance_to_tempfile(audio_path)
-    info = fingerprint(listen_path)
-    # the pristine original — what the listener hears for the first stretch
-    original, sr = librosa.load(audio_path, sr=None, mono=False)
-    if remaster:
-        progress(0.15, desc="Remastering your part…")
-        original = enhance_audio(original, sr)
-
-    # --- GPU continuation (the ONLY @spaces.GPU call) ---
-    progress(0.35, desc="Composing the continuation…")
     try:
-        new_tail, source_seconds, SR = _continue_on_gpu(
-            listen_path, total_seconds, vibe)
-    except ValueError as e:
-        # e.g. the clip is a full-length track, not a clip to continue
-        raise gr.Error(str(e))
-
-    # --- CPU splice + write (outside the GPU window) ---
-    progress(0.9, desc="Splicing onto your original…")
-    out = stitch.stitch(original, sr, new_tail, source_seconds)
-
-    out_path = os.path.join(tempfile.mkdtemp(), "coda_finished.wav")
-    sf.write(out_path, out.T, SR, subtype="PCM_16")
-
-    progress(1.0, desc="Done.")
-    total = out.shape[-1] / SR
-    added = total - source_seconds
-    vibe_note = f" guided by *“{vibe.strip()}”*" if (vibe or "").strip() else ""
-    summary = (
-        f"### Finished — {total:.0f}s\n"
-        f"Your **{source_seconds:.0f}s** clip in **{info['key']}** at "
-        f"**{info['bpm']} BPM** continued for **~{added:.0f}s** more{vibe_note}, "
-        f"then crossfaded onto your original and faded to a clean close.\n\n"
-        f"*Stable Audio 3 generated the continuation as 44.1 kHz stereo in a "
-        f"single pass; your original recording plays untouched up to the seam.*"
-    )
-    return out_path, summary
+        # --- BEAT: listening (CPU prep, outside the GPU window) ---
+        progress(0.05, desc="Listening to your clip…")
+        yield gr.update(), gr.update(), _stage_html(
+            "listening", "Listening to your clip",
+            "reading key · tempo · groove")
+        listen_path = enhance_to_tempfile(audio_path)
+        info = fingerprint(listen_path)
+        # the pristine original — what the listener hears for the first stretch
+        original, sr = librosa.load(audio_path, sr=None, mono=False)
+        if remaster:
+            progress(0.15, desc="Remastering your part…")
+            original = enhance_audio(original, sr)
+
+        # --- BEAT: composing (holds during the ONLY @spaces.GPU call) ---
+        progress(0.35, desc="Composing the continuation…")
+        yield gr.update(), gr.update(), _stage_html(
+            "composing", "Composing the continuation",
+            f"Stable Audio 3 · extending in {info['key']} at {info['bpm']} BPM")
+        try:
+            new_tail, source_seconds, SR = _continue_on_gpu(
+                listen_path, total_seconds, vibe)
+        except ValueError as e:
+            # e.g. the clip is a full-length track, not a clip to continue
+            raise gr.Error(str(e))
+
+        # --- BEAT: splicing (CPU splice + write, outside the GPU window) ---
+        progress(0.9, desc="Splicing onto your original…")
+        yield gr.update(), gr.update(), _stage_html(
+            "splicing", "Splicing onto your original",
+            "level-matched crossfade · clean closing fade")
+        out = stitch.stitch(original, sr, new_tail, source_seconds)
+
+        out_path = os.path.join(tempfile.mkdtemp(), "coda_finished.wav")
+        sf.write(out_path, out.T, SR, subtype="PCM_16")
+
+        progress(1.0, desc="Done.")
+        total = out.shape[-1] / SR
+        added = total - source_seconds
+        vibe_note = f" guided by *“{vibe.strip()}”*" if (vibe or "").strip() else ""
+        summary = (
+            f"### Finished — {total:.0f}s\n"
+            f"Your **{source_seconds:.0f}s** clip in **{info['key']}** at "
+            f"**{info['bpm']} BPM** continued for **~{added:.0f}s** more{vibe_note}, "
+            f"then crossfaded onto your original and faded to a clean close.\n\n"
+            f"*Stable Audio 3 generated the continuation as 44.1 kHz stereo in a "
+            f"single pass; your original recording plays untouched up to the seam.*"
+        )
+        # --- BEAT: reveal (set audio + summary, clear the overlay) ---
+        yield out_path, summary, ""
+    except gr.Error:
+        # clear the overlay so a failure never leaves a stuck 'composing' animation
+        yield gr.update(), gr.update(), ""
+        raise
 
 
 def load_demo():
@@ -236,6 +308,7 @@ THEME = gr.themes.Base(
 )
 
 CSS = """
+/* ===================================================================== CODA — premium audio-instrument treatment. This is a COMPLETE replacement for the CSS string in app.py. It keeps every existing ambient layer / hero / HUD / stage rule that already works, retargets only REAL class names (verified against the app.py source + the Gradio 6.17 StaticAudio/Upload compiled assets), and adds the milled-metal light model, the LCD power-on, the milled controls, the illuminated key states, and the gold MASTER reveal. No new font import (theme already loads Space Grotesk + Inter + JetBrains Mono). ===================================================================== */
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
 
 :root{
@@ -244,12 +317,18 @@ CSS = """
   --glass:rgba(18,20,36,0.55);
   --glass-brd:rgba(150,160,220,0.14);
   --mx:50%; --my:28%;
+  /* milled-metal light model (cheap, no textures) */
+  --bevel-hi:rgba(255,255,255,.06);
+  --bevel-lo:rgba(0,0,0,.55);
+  --well:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.16));
+  --ring:rgba(150,160,220,.14);
+  --ring-hot:rgba(111,224,245,.45);
+  --ease-expo:cubic-bezier(.16,1,.3,1);
+  --ink:#0a0a16;
 }
 
-/* ---------- ambient background layers ---------- */
-.coda-aurora,.coda-glow,.coda-particles{
-  position:fixed; inset:0; pointer-events:none; overflow:hidden;
-}
+/* ---------- ambient background layers (UNCHANGED — already GOOD) ---------- */
+.coda-aurora,.coda-glow,.coda-particles{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
 .coda-aurora{
   z-index:-3;
   background:
@@ -288,7 +367,7 @@ CSS = """
 .gradio-container{ max-width:1080px !important; margin:0 auto !important; }
 .gradio-container, .gradio-container *{ font-family:'Inter',ui-sans-serif,system-ui; }
 
-/* ---------- hero ---------- */
+/* ---------- hero (wordmark + spectrum power-on) ---------- */
 #coda-head{ text-align:center; padding:40px 0 4px; position:relative; }
 #coda-title{
   font-family:'Space Grotesk',sans-serif; font-weight:700;
@@ -313,9 +392,11 @@ CSS = """
   transform-origin:center; transform:scaleY(.2);
   background:linear-gradient(180deg,#7be8ff,#a98bff);
   box-shadow:0 0 9px rgba(111,224,245,.45);
-  animation-name:codaBar; animation-timing-function:ease-in-out;
-  animation-iteration-count:infinite;
+  /* one-shot power-on, THEN the infinite breathing bar (additive list) */
+  animation:codaPowerOn .7s var(--ease-expo) both, codaBar 1.2s ease-in-out infinite .7s;
+  animation-name:codaPowerOn, codaBar;
 }
+@keyframes codaPowerOn{ from{transform:scaleY(.04); opacity:.25} to{opacity:.92} }
 @keyframes codaBar{ 0%,100%{transform:scaleY(.16)} 50%{transform:scaleY(1)} }
 #coda-rule{
   height:1px; border:0; max-width:260px; margin:18px auto 6px;
@@ -326,24 +407,28 @@ CSS = """
   margin:0 auto 6px; font-size:1rem; line-height:1.6; }
 #coda-intro strong{ color:#dfe4ff; font-weight:600; }
 
-/* ---------- glass panels ---------- */
+/* ---------- glass panels -> milled faceplates ---------- */
 .coda-glass, .coda-card{
   background:var(--glass) !important;
   border:1px solid var(--glass-brd) !important;
   border-radius:20px !important;
   backdrop-filter:blur(16px) saturate(135%);
   -webkit-backdrop-filter:blur(16px) saturate(135%);
-  box-shadow:0 10px 38px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
-  padding:22px !important;
+  /* light model: top-bevel lip + recessed body + outer contact drop */
+  box-shadow:
+    inset 0 1px 0 var(--bevel-hi),
+    inset 0 -1px 0 var(--bevel-lo),
+    0 12px 40px rgba(0,0,0,.5) !important;
+  padding:22px !important; position:relative;
 }
-.coda-glass{ animation:codaRise .8s cubic-bezier(.2,.8,.2,1) both; }
-.coda-card{ animation:codaRise .8s cubic-bezier(.2,.8,.2,1) .08s both; }
-@keyframes codaRise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
+.coda-glass{ animation:codaRise .85s var(--ease-expo) .55s both; }
+.coda-card{ animation:codaRise .85s var(--ease-expo) .63s both; }
+@keyframes codaRise{ from{opacity:0; transform:translateY(16px) scale(.99)} to{opacity:1; transform:none} }
 
-/* section labels */
+/* section micro-labels (engraved legend + live status lamp) */
 .coda-label{
   color:var(--cyan); text-transform:uppercase; letter-spacing:.18em;
-  font-size:.72rem; font-weight:600; margin:0 0 2px; display:flex;
+  font-size:.72rem; font-weight:600; margin:0 0 10px; display:flex;
   align-items:center; gap:.5rem;
 }
 .coda-label::before{
@@ -353,66 +438,205 @@ CSS = """
 }
 @keyframes codaPulse{ 0%,100%{opacity:.5; transform:scale(.85)} 50%{opacity:1; transform:scale(1.15)} }
 
-/* make inner gradio blocks blend into the glass */
-.coda-glass .block, .coda-card .block{ box-shadow:none !important; }
+/* blend inner gradio blocks into the glass; mute redundant helper text */
+.coda-glass .block, .coda-card .block{ box-shadow:none !important; background:transparent !important; }
+.coda-glass .info, .coda-card .info{ color:var(--sub) !important; font-size:.78rem !important; opacity:.85; }
 .coda-card h3{
   color:var(--cyan); text-transform:uppercase; letter-spacing:.16em;
   font-size:.74rem; font-weight:600; margin:.1rem 0 .7rem;
 }
 
-/* ---------- buttons ---------- */
+/* ---------- primary FINISH key: disarmed -> armed -> held ---------- */
 .coda-go, .coda-go button{
   background:linear-gradient(100deg,#6fe0f5,#a98bff 62%,#cf9bff) !important;
   background-size:180% auto !important;
-  color:#0a0a16 !important; font-weight:600 !important; letter-spacing:.03em;
-  border:0 !important; border-radius:14px !important; min-height:46px;
-  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 26px rgba(124,100,255,.34) !important;
-  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s,
+  color:var(--ink) !important; font-weight:600 !important; letter-spacing:.03em;
+  border:0 !important; border-radius:14px !important; min-height:48px;
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,.42),
+    inset 0 -2px 4px rgba(0,0,0,.25),
+    0 0 0 1px rgba(255,255,255,.08),
+    0 8px 26px rgba(124,100,255,.34) !important;
+  transition:transform .25s var(--ease-expo), box-shadow .25s,
              filter .25s, background-position .6s !important;
 }
+/* IGNITE on arm (the real interactive flip removes [disabled]) */
+.coda-go:not([disabled]){ animation:codaCtaSheen .85s ease-out 1; }
+@keyframes codaCtaSheen{ 0%{background-position:120% center} 100%{background-position:0% center} }
 .coda-go:hover:not([disabled]){
   transform:translateY(-2px); filter:brightness(1.06);
   background-position:right center !important;
-  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 40px rgba(124,100,255,.5),
-             0 0 34px rgba(111,224,245,.38) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,.5),
+    0 0 0 1px rgba(255,255,255,.16),
+    0 14px 40px rgba(124,100,255,.5),
+    0 0 34px rgba(111,224,245,.38) !important;
+}
+.coda-go:active:not([disabled]){
+  transform:translateY(0) scale(.99);
+  box-shadow:
+    inset 0 2px 6px rgba(0,0,0,.4),
+    0 0 0 1px rgba(255,255,255,.12),
+    0 0 30px rgba(124,100,255,.45) !important;
+}
+.coda-go[disabled]{
+  filter:grayscale(.6) brightness(.6); opacity:.5;
+  box-shadow:inset 0 1px 2px rgba(0,0,0,.5) !important;
+}
+/* held/lit while the engine runs — keyed off the live stage overlay via :has(),
+   so it needs no JS to set/clear and is correct for the whole run + after. */
+.gradio-container:has(.coda-stage) .coda-go,
+.gradio-container:has(.coda-stage) .coda-go button{
+  filter:brightness(.94);
+  box-shadow:inset 0 2px 8px rgba(0,0,0,.45),0 0 26px rgba(169,139,255,.45) !important;
 }
-.coda-go[disabled]{ filter:grayscale(.55) brightness(.7); opacity:.5;
-  box-shadow:none !important; }
 
+/* ---------- demo button (quiet utility key) ---------- */
 .coda-demo{
-  background:rgba(255,255,255,.04) !important; color:var(--sub) !important;
-  border:1px solid var(--glass-brd) !important; border-radius:12px !important;
-  font-weight:500 !important; transition:all .25s ease !important;
+  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)) !important;
+  color:var(--sub) !important;
+  border:1px solid var(--glass-brd) !important; border-radius:11px !important;
+  font-weight:500 !important; letter-spacing:.02em;
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 2px rgba(0,0,0,.4) !important;
+  transition:all .25s ease !important;
 }
 .coda-demo:hover{
-  color:#eaf6ff !important; border-color:var(--cyan) !important;
-  background:rgba(111,224,245,.08) !important;
-  box-shadow:0 0 22px rgba(111,224,245,.22) !important;
+  color:#eaf6ff !important; border-color:var(--ring-hot) !important;
+  background:linear-gradient(180deg,rgba(111,224,245,.10),rgba(111,224,245,.04)) !important;
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 22px rgba(111,224,245,.20) !important;
 }
 
-/* ---------- inputs ---------- */
-.coda-glass input[type=text], .coda-glass textarea{
+/* ---------- vibe textbox (carved + arming focus) ---------- */
+.coda-vibe textarea, .coda-vibe input[type=text]{
+  background:var(--well) !important;
+  border:1px solid var(--ring) !important; border-radius:10px !important;
+  color:var(--text) !important; caret-color:var(--cyan);
+  box-shadow:inset 0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04) !important;
   transition:box-shadow .2s, border-color .2s !important;
 }
-.coda-glass input[type=text]:focus, .coda-glass textarea:focus{
+.coda-vibe textarea::placeholder, .coda-vibe input[type=text]::placeholder{
+  color:#6b7388 !important; letter-spacing:.02em; opacity:.9;
+}
+.coda-vibe textarea:focus, .coda-vibe input[type=text]:focus{
   border-color:var(--cyan) !important;
-  box-shadow:0 0 0 1px var(--cyan),0 0 22px rgba(111,224,245,.22) !important;
+  box-shadow:
+    inset 0 0 0 1px rgba(111,224,245,.35),
+    inset 0 2px 6px rgba(0,0,0,.45),
+    0 0 22px rgba(111,224,245,.18) !important;
 }
+
+/* ---------- length slider (milled fader, webkit + moz) ---------- */
+.coda-slider input[type=range]{
+  -webkit-appearance:none; appearance:none; height:6px; border-radius:4px;
+  background:rgba(10,11,22,.7);
+  box-shadow:inset 0 1px 3px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.04);
+  accent-color:var(--cyan); /* native fill is always correct — no JS --val */
+}
+.coda-slider input[type=range]::-webkit-slider-thumb{
+  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
+  background:radial-gradient(circle at 50% 35%,#eafcff,#6fe0f5 58%,#3f8fa8);
+  border:1px solid rgba(255,255,255,.16);
+  box-shadow:0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22),
+             inset 0 -1px 2px rgba(0,0,0,.55), 0 0 0 0 rgba(111,224,245,0);
+  transition:transform .14s, box-shadow .14s; cursor:grab;
+}
+.coda-slider input[type=range]:active::-webkit-slider-thumb{
+  transform:scale(1.1); cursor:grabbing;
+  box-shadow:0 2px 6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28),
+             0 0 0 4px rgba(111,224,245,.18), 0 0 16px rgba(111,224,245,.55);
+}
+.coda-slider input[type=range]::-moz-range-thumb{
+  width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
+  background:radial-gradient(circle at 50% 35%,#eafcff,#6fe0f5 58%,#3f8fa8);
+  box-shadow:0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22);
+  transition:transform .14s, box-shadow .14s;
+}
+.coda-slider input[type=range]:active::-moz-range-thumb{
+  transform:scale(1.1);
+  box-shadow:0 0 0 4px rgba(111,224,245,.18), 0 0 16px rgba(111,224,245,.55);
+}
+.coda-slider input[type=range]::-moz-range-track{ height:6px; border-radius:4px; background:rgba(10,11,22,.7); }
+/* the companion number box = honest mono value chip */
+.coda-slider input[type=number]{
+  background:rgba(10,11,22,.6) !important; border:1px solid var(--ring) !important;
+  box-shadow:inset 0 1px 3px rgba(0,0,0,.5) !important;
+  color:#dfe4ff !important; border-radius:8px !important;
+  font-family:'JetBrains Mono',ui-monospace,monospace !important;
+  font-variant-numeric:tabular-nums;
+}
+
+/* ---------- remaster checkbox (backlit toggle) ---------- */
+.coda-check input[type=checkbox]{
+  -webkit-appearance:none; appearance:none; width:18px; height:18px;
+  border-radius:5px; position:relative; cursor:pointer; vertical-align:middle;
+  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.22));
+  border:1px solid rgba(150,160,220,.2);
+  box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.04);
+  transition:background .2s, box-shadow .2s, border-color .2s;
+}
+.coda-check input[type=checkbox]:hover{ border-color:var(--ring-hot); }
+.coda-check input[type=checkbox]:checked{
+  background:linear-gradient(135deg,#7be8ff,#a98bff);
+  border-color:transparent;
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 14px rgba(111,224,245,.45);
+}
+.coda-check input[type=checkbox]:checked::after{
+  content:''; position:absolute; left:5px; top:1px; width:5px; height:10px;
+  border:solid var(--ink); border-width:0 2px 2px 0;
+  transform:rotate(42deg) scale(0);
+  animation:codaCheck .18s cubic-bezier(.34,1.56,.64,1) forwards;
+}
+@keyframes codaCheck{ to{ transform:rotate(42deg) scale(1) } }
+
+/* generic range accent (covers any non-scoped range, e.g. player seek) */
 input[type=range]{ accent-color:var(--cyan); }
 
-/* upload dropzone — inviting, glowing */
-.coda-drop{ border-radius:16px !important; transition:box-shadow .3s, transform .3s; }
-.coda-drop:hover{ box-shadow:0 0 30px rgba(124,100,255,.18) !important; }
+/* ---------- upload dropzone -> recessed INPUT channel ---------- */
+.coda-drop{
+  border-radius:16px !important;
+  background:radial-gradient(120% 120% at 50% 0%, rgba(111,224,245,.05), rgba(10,11,22,.5)) !important;
+  box-shadow:inset 0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
+  transition:box-shadow .3s, transform .3s var(--ease-expo);
+}
+/* Gradio's Upload inner empty-state = .wrap (verified). Tame the stark frame. */
+.coda-drop .wrap{
+  border:1.5px dashed rgba(111,224,245,.22) !important; border-radius:13px !important;
+  background:transparent !important; transition:border-color .3s, background .3s;
+}
+.coda-drop .wrap:hover{ border-color:var(--ring-hot) !important; background:rgba(111,224,245,.04) !important; }
+.coda-drop:hover{ box-shadow:inset 0 2px 10px rgba(0,0,0,.5), 0 0 30px rgba(124,100,255,.18) !important; }
+.coda-drop .wrap *{ color:var(--sub) !important; letter-spacing:.03em; }
+.coda-drop svg{ filter:drop-shadow(0 0 8px rgba(111,224,245,.3)); opacity:.8; }
+/* loaded/hot channel */
+.coda-has-clip .coda-drop, .coda-drop:has(audio){
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px rgba(111,224,245,.14) !important;
+}
+.coda-has-clip .coda-drop .wrap, .coda-drop:has(audio) .wrap{
+  border-style:solid !important; border-color:rgba(111,224,245,.3) !important;
+}
 
-/* the output player: replace Gradio's stark 3px white empty-state frame with a
-   soft, on-brand panel so the result area looks intentional before a song loads */
+/* ---------- output player -> integrated deck (REAL StaticAudio classes) ---------- */
 .coda-player{
-  border:1px solid rgba(150,160,220,0.16) !important; border-width:1px !important;
-  border-radius:14px !important;
+  border:1px solid rgba(150,160,220,0.16) !important; border-radius:14px !important;
   background:linear-gradient(180deg, rgba(111,224,245,.04), rgba(169,139,255,.04)) !important;
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.5),
+             inset 0 0 30px rgba(0,0,0,.3) !important;
+}
+.coda-player .standard-player, .coda-player .component-wrapper{ padding:14px !important; }
+/* recess the waveform + scrubber into a well (canvas color is locked — frame, don't recolor) */
+.coda-player .waveform-container{
+  background:rgba(10,11,22,.4) !important; border-radius:10px !important;
+  box-shadow:inset 0 1px 4px rgba(0,0,0,.5);
 }
+.coda-player .timestamps{
+  font-family:'JetBrains Mono',ui-monospace,monospace !important;
+  font-variant-numeric:tabular-nums; color:var(--sub) !important; letter-spacing:.02em;
+}
+.coda-player .play-pause-button{ color:var(--cyan) !important; fill:var(--cyan) !important;
+  transition:filter .2s, transform .12s; }
+.coda-player .play-pause-button:hover{ filter:drop-shadow(0 0 8px rgba(111,224,245,.5)); transform:scale(1.06); }
 
-/* finished-song card gets a gentle living glow */
+/* ---------- finished-song card: living glow (UNCHANGED base) ---------- */
 #coda-result{ position:relative; }
 #coda-result::after{
   content:''; position:absolute; inset:-1px; border-radius:20px; pointer-events:none;
@@ -421,9 +645,37 @@ input[type=range]{ accent-color:var(--cyan); }
 }
 @keyframes codaBreath{ 0%,100%{opacity:.4} 50%{opacity:.9} }
 
+/* ---------- REVEAL: gold MASTER escalation (only on a real finished result) ---------- */
+/* keyed off the output <audio> appearing — fully CSS, no JS reveal event needed.
+   the one-shot flourish plays as the rule first matches (when the track lands). */
+#coda-result:has(.coda-player audio){
+  --color-accent:var(--gold);   /* play icon + seek progress -> gold */
+  animation:codaReveal 1.2s var(--ease-expo) both;
+}
+#coda-result:has(.coda-player audio) .coda-player{
+  border-top-color:rgba(246,214,138,.5) !important;
+  box-shadow:inset 0 1px 0 rgba(246,214,138,.28), inset 0 -1px 0 rgba(0,0,0,.5),
+             0 0 30px rgba(246,214,138,.10) !important;
+}
+#coda-result:has(.coda-player audio) .play-pause-button{ color:var(--gold) !important; fill:var(--gold) !important;
+  filter:drop-shadow(0 0 10px rgba(246,214,138,.5)); }
+#coda-result:has(.coda-player audio) .coda-result-head{ color:var(--gold); }
+#coda-result:has(.coda-player audio) .coda-result-dot{ background:var(--gold); box-shadow:0 0 10px var(--gold); }
+#coda-result:has(.coda-player audio)::after{
+  box-shadow:0 0 0 1px rgba(246,214,138,.16), 0 0 46px rgba(246,214,138,.09) inset;
+  animation:codaBreath 5.5s ease-in-out infinite;   /* warmer, slower */
+}
+/* one-shot reveal flourish (warm). Played via the :has() rule above when the
+   finished <audio> first appears; this class is kept as a reduced-motion hook. */
+.coda-reveal{ animation:codaReveal 1.1s var(--ease-expo) both; }
+@keyframes codaReveal{
+  0%{ transform:scale(.985); }
+  35%{ transform:scale(1.012); box-shadow:0 0 0 1px rgba(246,214,138,.5), 0 0 60px rgba(246,214,138,.4); }
+  100%{ transform:scale(1); }
+}
+
 /* ---------- footer ---------- */
-#coda-foot{ text-align:center; color:#6b7388; font-size:.85rem; margin-top:18px;
-  line-height:1.7; }
+#coda-foot{ text-align:center; color:#6b7388; font-size:.85rem; margin-top:18px; line-height:1.7; }
 #coda-foot strong{ color:var(--violet); }
 .coda-badge{
   display:inline-block; margin-top:8px; padding:5px 14px; border-radius:999px;
@@ -431,11 +683,238 @@ input[type=range]{ accent-color:var(--cyan); }
   border:1px solid var(--glass-brd); background:rgba(255,255,255,.03);
 }
 
-/* respect reduced-motion preferences */
+/* ---------- kill default-Gradio tells ---------- */
+footer{ display:none !important; }
+.coda-readout .progress-text, #coda-result .progress-text,
+.coda-readout .eta-bar, #coda-result .eta-bar{ display:none !important; }
+
+/* ---------- 'CODA heard' readout -> backlit LCD HUD (REAL .coda-hud* classes) ---------- */
+.coda-readout{ position:relative; }
+.coda-hud{
+  font-family:'Space Grotesk',sans-serif; position:relative; overflow:hidden;
+  padding:16px 18px; border-radius:14px;
+  background:linear-gradient(180deg,#0b1119,#070b12);
+  border:1px solid rgba(111,224,245,.14);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(0,0,0,.6),
+             inset 0 0 40px rgba(0,0,0,.5), 0 0 26px rgba(111,224,245,.05);
+  animation:codaLcdOn .42s ease-out both;
+}
+/* faint scanline overlay (cheap) */
+.coda-hud::after{
+  content:''; position:absolute; inset:0; pointer-events:none; opacity:.45;
+  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px);
+}
+/* one-shot scan-sweep on power-on */
+.coda-hud::before{
+  content:''; position:absolute; top:0; left:-40%; width:40%; height:100%; pointer-events:none;
+  background:linear-gradient(90deg, transparent, rgba(111,224,245,.18), transparent);
+  animation:codaScan .8s ease-out 1 both;
+}
+@keyframes codaLcdOn{ from{opacity:0; filter:brightness(.4)} to{opacity:1; filter:brightness(1)} }
+@keyframes codaScan{ from{left:-40%} to{left:120%} }
+.coda-hud-head{
+  display:flex; align-items:center; gap:.5rem; color:var(--cyan);
+  text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-weight:600;
+  margin-bottom:14px; position:relative;
+}
+.coda-hud-dot{
+  width:7px; height:7px; border-radius:50%; background:var(--cyan);
+  box-shadow:0 0 10px var(--cyan); animation:codaPulse 2.4s ease-in-out infinite;
+}
+.coda-hud-live{
+  margin-left:auto; font-size:.6rem; letter-spacing:.18em; color:#7be8ff;
+  padding:3px 8px; border-radius:999px; border:1px solid rgba(111,224,245,.25);
+  background:rgba(111,224,245,.06);
+}
+.coda-hud-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative; }
+.coda-hud-cell{
+  position:relative; padding:12px 14px; border-radius:12px;
+  background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.2));
+  border:1px solid rgba(150,160,220,.12);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 24px rgba(0,0,0,.4);
+  /* per-cell settle stagger (meter locking) */
+  animation:codaCellSettle .26s var(--ease-expo) both;
+}
+.coda-hud-cell:nth-child(2){ animation-delay:.06s }
+.coda-hud-cell:nth-child(3){ animation-delay:.12s }
+.coda-hud-cell:nth-child(4){ animation-delay:.18s }
+@keyframes codaCellSettle{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
+.coda-hud-k{
+  color:var(--sub); text-transform:uppercase; letter-spacing:.16em;
+  font-size:.62rem; font-weight:600; margin-bottom:4px;
+}
+.coda-hud-v{
+  font-family:'JetBrains Mono','ui-monospace',monospace; color:#eaf0ff;
+  font-size:1.5rem; font-weight:500; line-height:1; display:flex;
+  align-items:baseline; gap:.3rem; font-variant-numeric:tabular-nums;
+  text-shadow:0 0 10px rgba(111,224,245,.25);
+}
+.coda-hud-u{ font-size:.7rem; color:var(--sub); letter-spacing:.1em; font-weight:600; }
+.coda-hud-note{
+  margin-top:12px; color:var(--sub); font-size:.82rem; line-height:1.55; font-family:'Inter',sans-serif;
+  position:relative;
+}
+.coda-hud-note em{ color:#cfd6f5; font-style:italic; }
+.coda-hud-tag{
+  display:inline-block; margin-right:.5rem; font-size:.62rem; letter-spacing:.12em;
+  color:var(--gold); padding:2px 8px; border-radius:6px; vertical-align:middle;
+  border:1px solid rgba(246,214,138,.25); background:rgba(246,214,138,.06);
+}
+.coda-hud-warn{ animation:none; }
+.coda-hud-warn .coda-hud-head{ color:var(--gold); }
+.coda-hud-warn .coda-hud-dot{ background:var(--gold); box-shadow:0 0 10px var(--gold); }
+
+/* ---------- result panel head ---------- */
+.coda-result-head{
+  display:flex; align-items:center; gap:.5rem; color:var(--cyan);
+  text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-weight:600; margin-bottom:4px;
+}
+.coda-result-dot{
+  width:7px; height:7px; border-radius:50%; background:var(--violet);
+  box-shadow:0 0 10px var(--violet); animation:codaPulse 2.6s ease-in-out infinite;
+}
+
+/* ---------- summary -> mono gold spec plate (styles <strong>, NOT <code>) ---------- */
+.coda-summary{ font-family:'Inter',sans-serif; }
+.coda-summary h3{ color:var(--text); font-family:'Space Grotesk',sans-serif; letter-spacing:.01em; }
+.coda-summary strong{
+  font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--gold);
+  font-weight:500; font-variant-numeric:tabular-nums;
+  background:rgba(246,214,138,.06); border:1px solid rgba(246,214,138,.18);
+  border-radius:6px; padding:1px 7px;
+}
+
+/* ---------- live processing 'stage' overlay (REAL .coda-stage* classes) ---------- */
+#coda-stage:empty{ display:none; }
+.coda-stage{
+  position:absolute; inset:0; z-index:6; border-radius:18px;
+  display:flex; flex-direction:column; align-items:center; justify-content:center;
+  gap:14px; text-align:center; padding:20px;
+  background:radial-gradient(120% 120% at 50% 30%, rgba(20,16,40,.82), rgba(8,9,18,.92));
+  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 40px rgba(0,0,0,.5);
+  animation:codaFade .5s ease both;
+}
+@keyframes codaFade{ from{opacity:0} to{opacity:1} }
+.coda-stage-core{ position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
+.coda-stage-ring{
+  position:absolute; inset:0; border-radius:50%; border:2px solid transparent;
+  border-top-color:var(--cyan); border-right-color:rgba(111,224,245,.35);
+  box-shadow:0 0 28px rgba(111,224,245,.35); animation:codaSpin 1.5s linear infinite;
+}
+.coda-stage-ring.r2{
+  inset:14px; border-top-color:var(--violet); border-right-color:rgba(169,139,255,.3);
+  animation:codaSpin 2.1s linear infinite reverse;
+}
+@keyframes codaSpin{ to{ transform:rotate(360deg) } }
+.coda-stage-bars{ display:flex; gap:3px; align-items:center; height:30px; }
+.coda-stage-bars span{
+  width:3px; height:100%; border-radius:2px; transform:scaleY(.3); transform-origin:center;
+  background:linear-gradient(180deg,#7be8ff,#a98bff); animation:codaBar 1s ease-in-out infinite;
+}
+.coda-stage-bars span:nth-child(2){animation-delay:.1s}
+.coda-stage-bars span:nth-child(3){animation-delay:.2s}
+.coda-stage-bars span:nth-child(4){animation-delay:.3s}
+.coda-stage-bars span:nth-child(5){animation-delay:.15s}
+.coda-stage-bars span:nth-child(6){animation-delay:.25s}
+.coda-stage-bars span:nth-child(7){animation-delay:.35s}
+.coda-stage-bars span:nth-child(8){animation-delay:.2s}
+.coda-stage-bars span:nth-child(9){animation-delay:.05s}
+.coda-stage-label{
+  font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:600;
+  color:#eef1ff; letter-spacing:.01em;
+}
+.coda-stage-dots::after{
+  content:'…'; animation:codaDots 1.4s steps(4,end) infinite;
+  display:inline-block; width:1.2em; text-align:left; overflow:hidden; vertical-align:bottom;
+}
+@keyframes codaDots{ 0%{clip-path:inset(0 100% 0 0)} 100%{clip-path:inset(0 0 0 0)} }
+.coda-stage-sub{
+  color:var(--sub); font-size:.82rem; letter-spacing:.02em; max-width:300px;
+  font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;
+}
+.coda-stage-steps{ display:flex; gap:7px; margin-top:4px; }
+.coda-step{
+  width:30px; height:3px; border-radius:3px; background:rgba(255,255,255,.12);
+  transition:background .3s, box-shadow .3s;
+}
+.coda-step.on{ background:var(--cyan); }                                  /* latched done -> cyan */
+.coda-step.now{ background:var(--violet); box-shadow:0 0 12px var(--violet); /* active engine step -> violet */
+  animation:codaPulse 1.1s ease-in-out infinite; }
+
+/* ---------- 'has-clip' ambient reaction (UNCHANGED) ---------- */
+.gradio-container:has(.coda-drop audio) .coda-aurora{ filter:saturate(150%); animation-duration:18s; }
+.gradio-container:has(.coda-drop audio) #coda-eq span{ animation-duration:.9s; }
+
+/* ---------- reduced-motion: kill EVERY animation (existing + new) ---------- */
 @media (prefers-reduced-motion: reduce){
-  .coda-aurora,#coda-eq span,.coda-particles span,.coda-label::before,
-  #coda-result::after,#coda-title{ animation:none !important; }
+  .coda-aurora, #coda-eq span, .coda-particles span, .coda-label::before,
+  #coda-result::after, #coda-title, .coda-glass, .coda-card,
+  .coda-hud, .coda-hud::before, .coda-hud-cell, .coda-hud-dot,
+  .coda-go:not([disabled]), .coda-reveal, .coda-stage, .coda-stage-ring,
+  .coda-stage-bars span, .coda-stage-dots::after, .coda-step.now,
+  .coda-result-dot, #coda-eq span, .coda-drop .icon-wrap,
+  #coda-result:has(.coda-player audio){
+    animation:none !important;
+  }
+  .coda-hud::before{ display:none !important; }
+}
+
+
+/* ===================================================================== */
+/* CODA EXTRAS — premium touches kept from the prior pass (additive)      */
+/* ===================================================================== */
+/* uppercase engraved legends on every control label (Gradio block-info) */
+.gradio-container [data-testid="block-info"]{
+  color:#aeb6cf !important; text-transform:uppercase; letter-spacing:.15em;
+  font-size:.7rem !important; font-weight:600; font-family:'Space Grotesk',sans-serif;
 }
+.gradio-container .info-text{
+  color:#828aa6 !important; font-size:.78rem !important; line-height:1.5 !important;
+}
+/* the audio module's floating label -> engraved chip */
+.coda-drop label.float, .coda-player label.float{
+  color:#aeb6cf !important; text-transform:uppercase; letter-spacing:.15em;
+  font-size:.66rem !important; font-weight:600;
+  background:rgba(10,12,22,.7) !important; border-radius:8px !important;
+  border:1px solid rgba(150,160,220,.12) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
+}
+/* never show Gradio's default status text inside our panels */
+#coda-result [data-testid="status-tracker"],
+.coda-readout [data-testid="status-tracker"]{ display:none !important; }
+/* dropzone empty-state: tall inviting channel + glowing floating icon */
+.coda-drop .audio-container{
+  min-height:200px; display:flex; flex-direction:column;
+  align-items:center; justify-content:center;
+}
+.coda-drop .icon-wrap{
+  width:54px !important; height:54px !important; margin-bottom:6px;
+  display:flex; align-items:center; justify-content:center; border-radius:50%;
+  background:radial-gradient(circle at 40% 35%, rgba(111,224,245,.18), rgba(111,224,245,0) 70%);
+  animation:codaFloatY 3.4s ease-in-out infinite;
+}
+.coda-drop .icon-wrap svg{
+  width:26px !important; height:26px !important; opacity:1 !important;
+  color:var(--cyan) !important; stroke:var(--cyan) !important;
+  filter:drop-shadow(0 0 10px rgba(111,224,245,.6));
+}
+@keyframes codaFloatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+.coda-drop .or{ color:#5f6886 !important; font-size:.72rem; letter-spacing:.1em; }
+/* 'Click to Upload' affordance as a refined pill */
+.coda-drop button.center{
+  border:1px solid rgba(111,224,245,.3) !important; border-radius:10px !important;
+  padding:7px 16px !important; color:#dff6ff !important;
+  background:rgba(111,224,245,.06) !important; font-weight:500 !important;
+}
+.coda-drop button.center:hover{
+  background:rgba(111,224,245,.12) !important;
+  box-shadow:0 0 20px rgba(111,224,245,.2) !important;
+}
+.coda-drop button:not(.coda-demo):not(.center):hover, .coda-player button:hover{
+  color:var(--cyan) !important;
+}
+@media (prefers-reduced-motion: reduce){ .coda-drop .icon-wrap{ animation:none !important; } }
+
 """
 
 # ethereal hero spectrum: a frequency-spectrum bar field with a centered
@@ -483,6 +962,7 @@ POINTER_JS = """
 }
 """
 
+
 with gr.Blocks(title="CODA") as app:
     # ambient layers (aurora + cursor glow + drifting particles) live behind
     # everything via position:fixed / negative z-index, so they never affect layout.
@@ -505,13 +985,18 @@ with gr.Blocks(title="CODA") as app:
             gr.HTML("<div class='coda-label'>Your clip</div>")
             audio_input = gr.Audio(
                 label="Your unfinished clip", type="filepath",
-                sources=["upload"], elem_classes="coda-drop")
+                sources=["upload"], elem_classes="coda-drop",
+                waveform_options=gr.WaveformOptions(
+                    waveform_color="#33405e",
+                    waveform_progress_color="#6fe0f5",
+                    trim_region_color="#a98bff"))
             demo_btn = gr.Button("🎧 Try the demo — PUSHBACK (via TikTok)",
                                  size="sm", elem_classes="coda-demo")
             total_slider = gr.Slider(
                 MIN_TOTAL, MAX_TOTAL, value=DEFAULT_TOTAL, step=1,
                 label="Finished length (seconds)",
-                info="Total length of the finished track. Longer = a bit slower.")
+                info="Total length of the finished track. Longer = a bit slower.",
+                elem_classes="coda-slider")
             # Hidden mirror of the slider, and the field finish_song actually
             # reads. Two reasons it's separate from the slider: (1) some Gradio
             # frontends snap a slider back to its minimum on the 2nd+ submit,
@@ -523,20 +1008,29 @@ with gr.Blocks(title="CODA") as app:
             vibe = gr.Textbox(
                 label="Describe the vibe (optional)", lines=1,
                 placeholder="e.g. warm lo-fi, vinyl crackle, mellow piano",
-                info="Leave empty for pure audio-led continuation.")
+                info="Leave empty for pure audio-led continuation.",
+                elem_classes="coda-vibe")
             remaster = gr.Checkbox(
                 value=False, label="Remaster my part too",
                 info="Apply the same lo-fi cleanup to your original section so "
-                     "the whole track sits at one level.")
+                     "the whole track sits at one level.",
+                elem_classes="coda-check")
             finish_btn = gr.Button("✨  Finish this song", variant="primary",
                                    interactive=False, elem_classes="coda-go")
 
         with gr.Column(scale=1):
-            info_md = gr.Markdown(visible=False, elem_classes="coda-card")
+            # the 'CODA heard' readout — a gr.HTML panel (not Markdown) so the
+            # fingerprint renders as a custom audio-tool HUD with real classes.
+            info_md = gr.HTML(visible=False, elem_classes="coda-card coda-readout")
             # built visible inside the result group: Gradio drops visible=False
             # audio players at build time, so we never toggle player visibility.
             with gr.Group(elem_classes="coda-card", elem_id="coda-result"):
-                gr.Markdown("### Your finished song")
+                gr.HTML("<div class='coda-result-head'>"
+                        "<span class='coda-result-dot'></span>YOUR FINISHED SONG"
+                        "</div>")
+                # live processing overlay (absolutely positioned over this card).
+                # finish_song yields stage HTML here at each milestone; empty = gone.
+                stage = gr.HTML("", elem_id="coda-stage")
                 # No autoplay: an autoplay output <audio> element is reused across
                 # runs and can fail to reload its src on the 2nd+ generation — the
                 # result then looks like it "didn't play" / "didn't update". A
@@ -544,12 +1038,15 @@ with gr.Blocks(title="CODA") as app:
                 # play, which also avoids browsers blocking autoplay-with-sound.
                 output_audio = gr.Audio(label="", type="filepath",
                                         interactive=False,
-                                        elem_classes="coda-player")
+                                        elem_classes="coda-player",
+                                        waveform_options=gr.WaveformOptions(
+                                            waveform_color="#3a3060",
+                                            waveform_progress_color="#a98bff"))
                 # built visible with an empty value (an empty Markdown renders
                 # nothing). finish_song fills it in the SAME event that sets the
                 # audio, so there's no second `.then` to toggle visibility — one
                 # event = one completion signal, so the spinner always clears.
-                summary_md = gr.Markdown()
+                summary_md = gr.Markdown(elem_classes="coda-summary")
 
     gr.HTML(
         "<div id='coda-foot'>Demo clip: <strong>PUSHBACK</strong> (via TikTok), "
@@ -572,10 +1069,16 @@ with gr.Blocks(title="CODA") as app:
     # A chained second event was a place the "stuck processing" state could hang
     # if the SSE stream blipped (ClientDisconnect) between the two events.
     # Read the length from length_input (not the slider directly) — see above.
+    # Single completion event (unchanged contract). The journey's beat states —
+    # the held button during the run, the gold MASTER escalation on reveal, and
+    # the ambient 'has-clip' reaction — are ALL driven by CSS :has() off real DOM
+    # state (the stage overlay, the output <audio>, the input <audio>), so they
+    # need no JS event to fire. This is far more reliable than js-only .change/
+    # .then callbacks, which Gradio does not consistently run on backend updates.
     finish_btn.click(
         fn=finish_song,
         inputs=[audio_input, length_input, vibe, remaster],
-        outputs=[output_audio, summary_md])
+        outputs=[output_audio, summary_md, stage])
 
     # cosmetic only: start the cursor-following glow once the page is ready.
     app.load(js=POINTER_JS)