app.py

"""CODA — finish the song you quit on.

Upload a short, unfinished music clip. CODA listens to it (key, tempo, meter),
then continues it into a longer, finished-sounding track in the same feel using
Stable Audio 3 Small Music — a single native audio-continuation call, 44.1 kHz
stereo — and splices the new part seamlessly onto your pristine original with a
level-matched crossfade and a clean closing fade.

Deliberately one job, done well. No lyrics generator, no cover-art printer — just
a real, listenable continuation of your clip.
"""
# stable-audio-tools hard-pins torch==2.7.1 in its pyproject.toml; ZeroGPU only
# accepts torch 2.8.0/2.9.1/2.10.0/2.11.0. We install the package without its
# dependency tree so the ZeroGPU-managed torch in the env is used instead.
import subprocess as _sp, sys as _sys
try:
    import stable_audio_tools as _  # noqa: F401
    del _
except ImportError:
    _sp.check_call([_sys.executable, "-m", "pip", "install",
                    "--no-cache-dir", "--no-deps", "-q",
                    "git+https://github.com/Stability-AI/stable-audio-tools.git"])
del _sp, _sys

import os
import tempfile

import gradio as gr
import librosa
import numpy as np
import soundfile as sf

import engine
import stitch
from analyze import fingerprint
from enhance import enhance_audio, enhance_to_tempfile, input_quality

# ZeroGPU shim: on a Space `spaces` exists and `@spaces.GPU` attaches a GPU for
# the duration of the call. Locally we no-op so the app still runs.
try:
    import spaces
except ImportError:
    class _FakeSpaces:
        def GPU(self, fn=None, **kw):
            return fn if fn else (lambda f: f)
    spaces = _FakeSpaces()

# bundled demo: "Track0000" — Tony Winslow's own song, recorded in 2016 and
# never finished. The emotional core of CODA: the exact kind of clip this tool
# exists to finish. lo-fi in, finished-sounding out.
DEMO_CLIP = os.path.join(os.path.dirname(__file__),
                         "examples", "track0000_tony_winslow.mp3")

# total finished length. SA3 Small generates up to 120 s in one call, so this is
# a *total length* control (clip + continuation), not a "seconds to add" knob.
MIN_TOTAL, MAX_TOTAL, DEFAULT_TOTAL = 30, 120, 60

# SA3's weights are gated under the Stability Community License, so the download
# 401s unless the request is authenticated. Log in with the HF_TOKEN secret
# (which must come from an account that accepted the licence on the model page)
# BEFORE preload() pulls the weights. No-op when unset, so local runs that have
# already done `huggingface-cli login` still work.
_HF_TOKEN = os.environ.get("HF_TOKEN")
if _HF_TOKEN:
    try:
        from huggingface_hub import login as _hf_login
        _hf_login(token=_HF_TOKEN)
        print("[coda] authenticated to the HF Hub via HF_TOKEN", flush=True)
    except Exception as _e:
        print(f"[coda] HF login failed ({_e}); gated model download may 401",
              flush=True)
elif os.environ.get("SPACE_ID"):
    print("[coda] WARNING: no HF_TOKEN secret set — the gated SA3 weights will "
          "401. Add HF_TOKEN in the Space settings (Settings -> Variables and "
          "secrets) using a token from an account that accepted the licence.",
          flush=True)

# On a Space, pull weights into CPU RAM at boot so the GPU window is spent
# generating, not reading 3 GB off disk. `spaces` defers CUDA placement until
# the first @spaces.GPU call.
if os.environ.get("SPACE_ID"):
    try:
        engine.preload()
    except Exception as _e:
        print(f"[coda] preload failed ({_e}); will lazy-load", flush=True)


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"):
        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>")


def _listening_html():
    """Instant 'CODA is reading your clip' state for the readout, shown the moment
    a clip lands so the panel lights up immediately instead of sitting greyed-out
    until the (CPU-bound) key/tempo analysis finishes. Replaced in-place by the
    real fingerprint readout a beat later."""
    return ("<div class='coda-hud coda-hud-listening'>"
            "<div class='coda-hud-head'><span class='coda-hud-dot'></span>"
            "CODA&nbsp;HEARD<span class='coda-hud-live'>LISTENING…</span></div>"
            "<div class='coda-hud-scan'><span></span></div>"
            "<div class='coda-hud-note'>Reading key, tempo and groove from your "
            "clip…</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 _mmss(seconds):
    s = int(round(max(float(seconds), 0.0)))
    return f"{s // 60}:{s % 60:02d}"


def _seam_html(source_seconds, total):
    """A self-contained before/after 'composition ribbon' for the finished track:
    one bar split at the EXACT seam — YOUR PART on the left, CODA's continuation
    on the right — with the join marked and labelled.

    Rendered SERVER-SIDE from the precise numbers finish_song already computed, so
    the marker is always exactly where CODA begins. The old approach measured the
    WaveSurfer waveform in the browser and drifted/stuck (the 'needle in the wrong
    place' bug); this can't, because the split is baked into the HTML. Purely
    cosmetic — does NOT touch enhance -> fingerprint -> continue_audio -> stitch."""
    src = max(float(source_seconds), 0.0)
    tot = max(float(total), src + 0.001)
    pct = max(0.0, min(src / tot, 1.0)) * 100.0
    added = max(tot - src, 0.0)
    return (
        "<div class='coda-seam-ribbon'>"
        "<div class='coda-seam-cap'>"
        "<span>The finished track</span>"
        f"<span class='coda-seam-cap-tot'>{_mmss(tot)} total</span>"
        "</div>"
        "<div class='coda-seam-track'>"
        f"<div class='coda-seam-seg coda-seam-seg-yours' style='width:{pct:.3f}%'>"
        "<span class='coda-seam-seg-lab'>YOUR&nbsp;PART</span></div>"
        f"<div class='coda-seam-seg coda-seam-seg-coda' style='width:{100.0 - pct:.3f}%'>"
        "<span class='coda-seam-seg-lab'>CODA</span></div>"
        f"<div class='coda-seam-join' style='left:{pct:.3f}%'></div>"
        "</div>"
        "<div class='coda-seam-foot'>"
        f"<span class='coda-seam-foot-y'>Your original&nbsp;·&nbsp;{_mmss(src)}</span>"
        f"<span class='coda-seam-foot-c'>CODA added&nbsp;·&nbsp;+{_mmss(added)}</span>"
        "</div>"
        "</div>")


def analyze_on_upload(audio_path):
    """Fast CPU-only pass the instant a clip loads, so the user sees what CODA
    heard immediately instead of a dead screen.

    A GENERATOR so the readout lights up the MOMENT a clip lands: it yields a
    'listening…' state first, then replaces it with the real key/tempo readout
    once the (CPU-bound) analysis completes. That kills the 'CODA heard stays
    greyed until you generate' feel on slower hosts. Does NOT touch the
    generation pipeline — it drives the readout panel + the Finish button's armed
    state, and RESETS the result panel (player / summary / seam / stage) so a new
    clip can't show the previous run's output."""
    # A freshly loaded clip makes the PREVIOUS finished result stale. Wipe the
    # whole result panel — player + summary + seam ribbon + any leftover stage
    # overlay — on the first beat, so (a) the old output can never be mistaken for
    # the new one, and (b) the next run's player starts from None and is forced to
    # reload its waveform cleanly. These are the trailing 4 outputs added to this
    # handler; `_clear` clears them once on the first yield, `_keep` leaves them
    # untouched on later yields so we don't re-send the clear every beat.
    _clear = (gr.update(value=None), gr.update(value=""),
              gr.update(value=""), gr.update(value=""))
    _keep = (gr.update(), gr.update(), gr.update(), gr.update())
    if not audio_path:
        yield (gr.update(value="", visible=False),
               gr.update(interactive=False), *_clear)
        return
    # instant feedback — panel lights up before the analysis even starts
    yield (gr.update(value=_listening_html(), visible=True),
           gr.update(interactive=False), *_clear)
    try:
        listen_path = enhance_to_tempfile(audio_path)
        info = fingerprint(listen_path)
        quality = input_quality(audio_path)
        # SA3 continues up to a 120s total, so a clip needs headroom for at
        # 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 = _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.")
            yield (gr.update(value=msg, visible=True),
                   gr.update(interactive=False), *_keep)
            return
        html = _readout_html(info, quality)
        yield (gr.update(value=html, visible=True),
               gr.update(interactive=True), *_keep)
    except Exception as e:
        print(f"[coda] analysis failed ({e})", flush=True)
        yield (gr.update(value=_warn_html("Couldn't read that file", str(e)),
                         visible=True),
               gr.update(interactive=False), *_keep)


@spaces.GPU(duration=120)
def _continue_on_gpu(listen_path, total_seconds, vibe):
    """ONLY the SA3 diffusion call runs inside the GPU window. All CPU work —
    enhancement, key/tempo analysis, decode, splice — happens OUTSIDE it (in
    `finish_song`), so the scarce ZeroGPU allocation is spent generating instead
    of decoding/analyzing audio. That's the stream-abort fix: the GPU task now
    starts and finishes fast instead of sitting through a slow analysis preamble
    until the browser aborts the stream.

    Do NOT pin a magic seed. The lab's verified seed=7 take was made on torch
    2.7.1; ZeroGPU runs a different torch (2.8–2.11), so the same seed reproduces
    a *different* draw — on the deployed build, the bad "loud random synth noise"
    one. Instead, leave the seed unset (engine draws several candidates and keeps
    the cleanest by an artifact score), which is robust across torch builds.
    """
    return engine.continue_audio(
        listen_path, total_seconds=int(total_seconds),
        prompt=(vibe or "").strip())


def finish_song(audio_path, total_seconds, vibe, remaster,
                progress=gr.Progress()):
    """Orchestrate the job: CPU prep -> GPU continuation -> CPU splice.

    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 Track0000 demo) first.")

    total_seconds = int(total_seconds)
    try:
        # --- BEAT: listening (CPU prep, outside the GPU window) ---
        # Clear ANY previous result the moment the run starts: blank the player
        # (value=None), the summary and the seam ribbon. This is what makes a
        # resubmit show fresh output on the FIRST click — the player transitions
        # None -> new file at the reveal, which forces WaveSurfer to tear down and
        # reload instead of (sometimes) keeping the prior take's waveform mounted.
        progress(0.05, desc="Listening to your clip…")
        yield gr.update(value=None), gr.update(value=""), _stage_html(
            "listening", "Listening to your clip",
            "reading key · tempo · groove"), gr.update(value="")  # +seam_data
        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"
            ), gr.update()  # 4-tuple: +seam_data
        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"), gr.update()  # +seam_data
        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 overlay, surface seam) ---
        yield out_path, summary, "", _seam_html(source_seconds, total)
    except gr.Error:
        # clear the overlay + any stale seam so a failure leaves a clean panel
        yield gr.update(), gr.update(), "", ""
        raise


def load_demo():
    """Load the Track0000 demo clip into the uploader.

    Copy the bundled clip to a fresh temp file and hand THAT to the uploader.
    Gradio 6 refuses to move a non-user-uploaded bundled file into its cache
    ("…was not uploaded by a user"), which broke the demo on the Space; a file
    in a per-request temp dir is one Gradio will cache and serve normally."""
    import shutil
    dst = os.path.join(tempfile.mkdtemp(), os.path.basename(DEMO_CLIP))
    shutil.copyfile(DEMO_CLIP, dst)
    return dst


# --- ethereal "dark studio" theme --------------------------------------------
THEME = gr.themes.Base(
    primary_hue=gr.themes.colors.cyan,
    secondary_hue=gr.themes.colors.purple,
    neutral_hue=gr.themes.colors.slate,
    font=[gr.themes.GoogleFont("Space Grotesk"),
          gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui"],
    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
).set(
    body_background_fill="#070710",
    body_background_fill_dark="#070710",
    background_fill_primary="rgba(255,255,255,0)",
    background_fill_secondary="rgba(255,255,255,0)",
    block_background_fill="rgba(255,255,255,0.025)",
    block_border_color="rgba(150,160,220,0.10)",
    block_border_width="1px",
    block_radius="16px",
    block_label_background_fill="rgba(0,0,0,0)",
    block_label_text_color="#9aa3bd",
    block_title_text_color="#9aa3bd",
    body_text_color="#e9ecf8",
    body_text_color_subdued="#9aa3bd",
    button_primary_background_fill="linear-gradient(100deg,#6fe0f5,#a98bff)",
    button_primary_background_fill_hover="linear-gradient(100deg,#7be8ff,#b89bff)",
    button_primary_text_color="#0a0a16",
    color_accent_soft="rgba(111,224,245,0.10)",
    border_color_accent="#6fe0f5",
    input_background_fill="rgba(10,11,22,0.55)",
    input_border_color="rgba(150,160,220,0.12)",
    slider_color="#6fe0f5",
)

CSS = """
/* CODA — premium dark-studio design system */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --cyan:#6fe0f5; --violet:#a98bff; --gold:#f6d68a;
  --text:#e9ecf8; --sub:#9aa3bd;
  --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 (UNCHANGED — already GOOD) ---------- */
.coda-aurora,.coda-glow,.coda-particles{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.coda-aurora{
  z-index:-3;
  background:
    radial-gradient(38% 48% at 18% 22%, rgba(124,92,255,.20), transparent 62%),
    radial-gradient(44% 52% at 84% 28%, rgba(64,200,235,.16), transparent 62%),
    radial-gradient(52% 46% at 50% 96%, rgba(246,214,138,.10), transparent 60%),
    radial-gradient(40% 42% at 72% 78%, rgba(169,139,255,.14), transparent 62%);
  filter:saturate(125%);
  animation:codaAurora 26s ease-in-out infinite alternate;
}
@keyframes codaAurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-1.8%,0) scale(1.07)}
  100%{transform:translate3d(-1.8%,1.4%,0) scale(1.03)}
}
.coda-glow{
  z-index:-2;
  background:radial-gradient(420px 420px at var(--mx) var(--my),
            rgba(111,224,245,.08), transparent 68%);
  transition:background .25s ease;
}
.coda-particles{ z-index:-1; }
.coda-particles span{
  position:absolute; bottom:-12px; border-radius:50%;
  background:radial-gradient(circle, rgba(190,205,255,.95), rgba(190,205,255,0) 70%);
  opacity:0; animation-name:codaFloat; animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes codaFloat{
  0%{transform:translateY(0) scale(.5); opacity:0}
  12%{opacity:.7} 88%{opacity:.45}
  100%{transform:translateY(-108vh) scale(1.05); opacity:0}
}

/* ---------- shell ---------- */
.gradio-container{ max-width:1080px !important; margin:0 auto !important; }
.gradio-container, .gradio-container *{ font-family:'Inter',ui-sans-serif,system-ui; }

/* ---------- 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;
  font-size:clamp(3rem,9vw,4.6rem); letter-spacing:.20em; margin:0 0 .2rem;
  background:linear-gradient(100deg,#6fe0f5 0%,#a98bff 46%,#f6d68a 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 38px rgba(150,140,255,.30));
  animation:codaShine 9s linear infinite;
}
@keyframes codaShine{ to{ background-position:220% center } }
#coda-tagline{
  color:var(--sub); text-transform:uppercase; letter-spacing:.34em;
  font-size:.78rem; margin:.2rem 0 0; font-weight:500;
}
#coda-eq{
  display:flex; gap:3px; align-items:center; justify-content:center;
  height:46px; max-width:440px; margin:22px auto 4px; opacity:.92;
}
#coda-eq span{
  flex:1 1 0; max-width:5px; height:100%; border-radius:3px;
  transform-origin:center; transform:scaleY(.2);
  background:linear-gradient(180deg,#7be8ff,#a98bff);
  box-shadow:0 0 9px rgba(111,224,245,.45);
  /* 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;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);
  opacity:.6;
}
#coda-intro{ text-align:center; color:var(--sub); max-width:680px;
  margin:0 auto 6px; font-size:1rem; line-height:1.6; }
#coda-intro strong{ color:#dfe4ff; font-weight:600; }

/* ---------- 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%);
  /* 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 .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 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 10px; display:flex;
  align-items:center; gap:.5rem;
}
.coda-label::before{
  content:''; 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;
}
@keyframes codaPulse{ 0%,100%{opacity:.5; transform:scale(.85)} 50%{opacity:1; transform:scale(1.15)} }

/* 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;
}

/* ---------- 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: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:
    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;
}

/* ---------- demo button (quiet utility key) ---------- */
.coda-demo{
  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(--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;
}

/* ---------- 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-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:
    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 -> 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;
}

/* ---------- output player -> integrated deck (REAL StaticAudio classes) ---------- */
.coda-player{
  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: living glow (UNCHANGED base) ---------- */
#coda-result{ position:relative; transition:min-height .5s var(--ease-expo); }
/* while the processing 'stage' overlay is up, give the card real vertical room so
   the spinner, label, sub-line and step rail never crush together (the overlay is
   position:absolute, so it can't size the card itself). Released the instant the
   result lands and .coda-stage is gone — the transition above smooths the change. */
#coda-result:has(.coda-stage){ min-height:380px; }
#coda-result::after{
  content:''; position:absolute; inset:-1px; border-radius:20px; pointer-events:none;
  box-shadow:0 0 0 1px rgba(111,224,245,.10), 0 0 40px rgba(111,224,245,.06) inset;
  animation:codaBreath 4.5s ease-in-out infinite;
}
@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 strong{ color:var(--violet); }
.coda-badge{
  display:inline-block; margin-top:8px; padding:5px 14px; border-radius:999px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sub);
  border:1px solid var(--glass-brd); background:rgba(255,255,255,.03);
}

/* ---------- 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:0 — the inter-element rhythm is set by explicit margins below so the
     label+sub read as one pair while the spinner and step rail get real air */
  gap:0; text-align:center; padding:42px 34px;
  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; flex:0 0 96px; display:flex; align-items:center; justify-content:center; margin-bottom:30px; }
.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.08rem; font-weight:600;
  color:#eef1ff; letter-spacing:.01em; line-height:1.3;
}
.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:320px;
  margin-top:11px; line-height:1.5;        /* hugs the label as a pair */
  font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;
}
.coda-stage-sub:empty{ display:none; }      /* no phantom gap when a beat has no sub */
.coda-stage-steps{ display:flex; gap:10px; margin-top:32px; }
.coda-step{
  width:34px; 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, .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; } }




/* ===== FEATURE A — PLAY-ENERGIZED HERO ===== */
/* When the player reports it's playing, the JS adds .coda-eq-playing and the
   spectrum comes alive: each bar beats faster, taller and brighter (keeping its
   per-bar inline animation-delay so the field stays lively, not in lockstep).
   Pure CSS, so it renders even in a backgrounded tab and is cheap. */
#coda-eq.coda-eq-playing{
  filter: drop-shadow(0 0 14px rgba(124,100,255,.28));
  transition: filter .25s ease;
}
#coda-eq.coda-eq-playing span{
  animation-name: codaBarHot !important;
  animation-duration: .5s !important;
  box-shadow: 0 0 16px rgba(111,224,245,.85), 0 0 5px rgba(169,139,255,.6);
}
@keyframes codaBarHot{ 0%,100%{ transform:scaleY(.14) } 50%{ transform:scaleY(1.08) } }
@media (prefers-reduced-motion: reduce){
  #coda-eq.coda-eq-playing span{ animation:none !important; transform:none !important; }
}

/* ===== FEATURE A (LIVE) — real audio-reactive bars =====
   When a Web Audio AnalyserNode is driving the field, the JS adds .coda-eq-live
   and writes each bar's scaleY inline from getByteFrequencyData(). A *running*
   CSS animation would override those inline transforms, so we kill it here. This
   rule sits AFTER .coda-eq-playing so its equal-specificity !important wins by
   source order. On stop the JS removes the class and the CSS breathing resumes. */
#coda-eq.coda-eq-live span{
  animation: none !important;
  transition: transform .06s linear, box-shadow .2s ease;
  box-shadow: 0 0 16px rgba(111,224,245,.7), 0 0 6px rgba(169,139,255,.55);
}
@media (prefers-reduced-motion: reduce){
  #coda-eq.coda-eq-live span{ transition:none !important; }
}

/* ===== FEATURE B — SEAM REVEAL (gold-accented, part of the MASTER reveal) ===== */
#coda-seam-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:4; display:none;
}
.coda-seam-line{
  position:absolute; top:6%; bottom:6%; left:var(--seam, 50%);
  width:2px; transform:translateX(-1px);
  background:linear-gradient(180deg,
     rgba(246,214,138,0) 0%, rgba(246,214,138,.95) 18%,
     rgba(246,214,138,.95) 82%, rgba(246,214,138,0) 100%);
  box-shadow:0 0 10px rgba(246,214,138,.65), 0 0 2px rgba(246,214,138,.9);
  border-radius:2px;
}
.coda-seam-line::before{
  content:''; position:absolute; top:-3px; left:50%;
  width:7px; height:7px; transform:translateX(-50%) rotate(45deg);
  background:var(--gold); border-radius:1px;
  box-shadow:0 0 8px rgba(246,214,138,.8);
}
.coda-seam-tag{
  position:absolute; top:2px; font-family:'Space Grotesk',sans-serif;
  font-size:.56rem; letter-spacing:.18em; font-weight:600; text-transform:uppercase;
  padding:2px 7px; border-radius:6px; white-space:nowrap;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.coda-seam-yours{
  right:calc(100% - var(--seam, 50%) + 8px);
  color:#9aa3bd; border:1px solid rgba(150,160,220,.22); background:rgba(10,12,22,.55);
}
.coda-seam-coda{
  left:calc(var(--seam, 50%) + 8px);
  color:var(--gold); border:1px solid rgba(246,214,138,.35);
  background:rgba(246,214,138,.08); text-shadow:0 0 8px rgba(246,214,138,.4);
}
#coda-seam-overlay.coda-seam-near-end .coda-seam-coda{ left:auto; right:6px; }
#coda-seam-overlay.coda-seam-near-start .coda-seam-yours{ right:auto; left:6px; }
#coda-seam-overlay.coda-seam-in .coda-seam-line{ animation:codaSeamWipe .7s var(--ease-expo) both; }
#coda-seam-overlay.coda-seam-in .coda-seam-tag{ animation:codaSeamTag .5s var(--ease-expo) .25s both; }
@keyframes codaSeamWipe{ 0%{ transform:translateX(-1px) scaleY(0); opacity:0; } 100%{ transform:translateX(-1px) scaleY(1); opacity:1; } }
@keyframes codaSeamTag{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }

/* "Play from the seam" key — gold utility control in the result head */
.coda-seam-btn{
  display:none; margin-left:auto; align-items:center; gap:.4rem;
  font-family:'Space Grotesk',sans-serif; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; cursor:pointer;
  color:var(--gold); padding:5px 12px; border-radius:999px;
  border:1px solid rgba(246,214,138,.3);
  background:linear-gradient(180deg, rgba(246,214,138,.10), rgba(246,214,138,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(246,214,138,0);
  transition:transform .2s var(--ease-expo), box-shadow .25s, background .25s, color .2s;
}
/* the existing .coda-result-head is already display:flex (app.py line 775); the
   button uses margin-left:auto to push to the right edge — no head override needed */
.coda-seam-btn:hover{
  transform:translateY(-1px); color:#fff3d6;
  background:linear-gradient(180deg, rgba(246,214,138,.18), rgba(246,214,138,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 18px rgba(246,214,138,.4);
}
.coda-seam-btn:active{ transform:translateY(0) scale(.98); }
.coda-seam-btn .coda-seam-ico{ font-size:.6rem; line-height:1; filter:drop-shadow(0 0 6px rgba(246,214,138,.6)); }
@media (prefers-reduced-motion: reduce){
  #coda-seam-overlay.coda-seam-in .coda-seam-line,
  #coda-seam-overlay.coda-seam-in .coda-seam-tag{ animation:none !important; }
  .coda-seam-btn{ transition:none !important; }
}

/* ===== FEATURE C — CINEMATIC ONBOARDING ===== */
#coda-intro-overlay{
  position:fixed; inset:0; z-index:9999; opacity:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(60% 60% at 50% 38%, rgba(20,18,44,.72), rgba(6,7,16,.96)),
    #06070f;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1);
}
#coda-intro-overlay.coda-intro-on{ opacity:1; pointer-events:auto; }
#coda-intro-overlay.coda-intro-out{ opacity:0; pointer-events:none; }
#coda-intro-overlay.coda-intro-out #coda-intro-card{
  transform:translateY(-8px) scale(.985);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
body.coda-intro-lock{ overflow:hidden !important; }
#coda-intro-overlay::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.10) 0, rgba(0,0,0,.10) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}
#coda-intro-card{
  position:relative; width:min(640px,92vw); text-align:center;
  padding:8px 18px 26px; color:#e9ecf8; font-family:'Space Grotesk',sans-serif;
}
#coda-intro-skip{
  position:absolute; top:18px; right:20px; z-index:2;
  font-family:'Inter',sans-serif; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:#6b7388; cursor:pointer; user-select:none;
  padding:6px 10px; border-radius:8px; border:1px solid transparent;
  transition:color .2s, border-color .2s, background .2s;
}
#coda-intro-skip:hover, #coda-intro-skip:focus-visible{
  color:#cfd6f5; border-color:rgba(150,160,220,.2);
  background:rgba(255,255,255,.03); outline:none;
}
.coda-intro-beat{ opacity:0; transform:translateY(10px); will-change:opacity,transform; }
.coda-intro-on .coda-intro-beat{ animation:codaIntroIn .9s cubic-bezier(.16,1,.3,1) both; }
.coda-intro-on .coda-intro-beat.b1{ animation-delay:.25s; }
.coda-intro-on .coda-intro-beat.b2{ animation-delay:1.5s; }
.coda-intro-on .coda-intro-beat.b3{ animation-delay:2.7s; }
.coda-intro-on .coda-intro-beat.b4{ animation-delay:4.2s; }
@keyframes codaIntroIn{
  from{ opacity:0; transform:translateY(10px); filter:blur(4px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
.coda-intro-year{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.92rem; letter-spacing:.5em; color:#7be8ff; text-indent:.5em;
  text-transform:uppercase; margin:0 0 6px; text-shadow:0 0 14px rgba(111,224,245,.4);
}
.coda-intro-line{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(1rem,3.4vw,1.32rem); line-height:1.5; color:#cfd6f5;
  margin:0 auto 4px; max-width:30ch;
}
.coda-intro-line em{ color:#f6d68a; font-style:italic; }
.coda-intro-mark{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(2.4rem,11vw,4.2rem); letter-spacing:.2em; margin:14px 0 2px;
  text-indent:.2em;
  background:linear-gradient(100deg,#6fe0f5 0%,#a98bff 46%,#f6d68a 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 30px rgba(150,140,255,.3));
}
.coda-intro-on .coda-intro-mark{ animation:codaIntroIn .9s cubic-bezier(.16,1,.3,1) 2.7s both, codaShine 9s linear 3.6s infinite; }
#coda-intro-eq{
  display:flex; gap:3px; align-items:center; justify-content:center;
  height:20px; max-width:180px; margin:6px auto 2px; opacity:0;
}
.coda-intro-on #coda-intro-eq{ animation:codaIntroIn .8s ease-out 3.1s both; }
#coda-intro-eq span{
  flex:1 1 0; max-width:4px; height:100%; border-radius:3px; transform:scaleY(.2);
  transform-origin:center; background:linear-gradient(180deg,#7be8ff,#a98bff);
  box-shadow:0 0 8px rgba(111,224,245,.4); animation:codaBar 1.2s ease-in-out infinite;
}
#coda-intro-eq span:nth-child(2){animation-delay:.1s}
#coda-intro-eq span:nth-child(3){animation-delay:.2s}
#coda-intro-eq span:nth-child(4){animation-delay:.3s}
#coda-intro-eq span:nth-child(5){animation-delay:.15s}
#coda-intro-eq span:nth-child(6){animation-delay:.25s}
#coda-intro-eq span:nth-child(7){animation-delay:.35s}
#coda-intro-eq span:nth-child(8){animation-delay:.2s}
#coda-intro-eq span:nth-child(9){animation-delay:.3s}
#coda-intro-eq span:nth-child(10){animation-delay:.1s}
#coda-intro-eq span:nth-child(11){animation-delay:.22s}
#coda-intro-eq span:nth-child(12){animation-delay:.32s}
.coda-intro-fin{
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(1.05rem,3.6vw,1.4rem); letter-spacing:.04em; color:#f6d68a;
  margin:10px 0 22px; text-shadow:0 0 18px rgba(246,214,138,.3);
}
#coda-intro-enter{
  font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:.04em;
  font-size:.92rem; color:#0a0a16; cursor:pointer; user-select:none;
  padding:13px 30px; border-radius:14px; border:0;
  background:linear-gradient(100deg,#6fe0f5,#a98bff 60%,#f6d68a);
  background-size:180% auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
             0 8px 30px rgba(124,100,255,.4), 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .25s cubic-bezier(.16,1,.3,1),
             box-shadow .25s, background-position .6s, filter .2s;
}
#coda-intro-enter:hover, #coda-intro-enter:focus-visible{
  transform:translateY(-2px); filter:brightness(1.05);
  background-position:right center; outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 14px 40px rgba(124,100,255,.5), 0 0 34px rgba(246,214,138,.4);
}
#coda-intro-enter:active{ transform:translateY(0) scale(.99); }
#coda-intro-overlay.coda-intro-ready #coda-intro-enter{ animation:codaIntroPulse 2s ease-in-out infinite; }
@keyframes codaIntroPulse{
  0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 30px rgba(124,100,255,.4), 0 0 0 1px rgba(255,255,255,.08); }
  50%    { box-shadow:inset 0 1px 0 rgba(255,255,255,.5),  0 10px 34px rgba(124,100,255,.55), 0 0 30px rgba(246,214,138,.45); }
}
#coda-intro-replay{
  display:inline-block; margin-top:6px; cursor:pointer; color:#6b7388;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px dotted rgba(150,160,220,.3); transition:color .2s;
}
#coda-intro-replay:hover, #coda-intro-replay:focus-visible{ color:var(--cyan); outline:none; }
#coda-intro-overlay.coda-intro-reduced .coda-intro-beat,
#coda-intro-overlay.coda-intro-reduced #coda-intro-eq{
  opacity:1 !important; transform:none !important; filter:none !important; animation:none !important;
}
#coda-intro-overlay.coda-intro-reduced #coda-intro-eq span{ transform:scaleY(.6) !important; animation:none !important; }
@media (prefers-reduced-motion: reduce){
  #coda-intro-overlay, #coda-intro-card, .coda-intro-beat, .coda-intro-mark,
  #coda-intro-eq, #coda-intro-eq span, #coda-intro-overlay.coda-intro-ready #coda-intro-enter{
    animation:none !important;
  }
  .coda-intro-beat, #coda-intro-eq{ opacity:1 !important; transform:none !important; filter:none !important; }
  #coda-intro-overlay{ transition:opacity .2s linear; }
}

/* ===================================================================== */
/* CODA UI FIXES (additive) — server-rendered before/after ribbon, full   */
/* waveform, instant 'listening' readout, and elegance polish.            */
/* ===================================================================== */

/* ---------- before/after COMPOSITION RIBBON (server-rendered, exact) ----------
   replaces the old client-side seam overlay that drifted/stuck on the waveform.
   The split is baked in as inline width/left %, so the join is ALWAYS exactly
   where CODA begins. */
.coda-seam-ribbon{
  margin:16px 2px 2px; font-family:'Space Grotesk',sans-serif;
  animation:codaSeamRibbonIn .7s var(--ease-expo) both;
}
@keyframes codaSeamRibbonIn{ from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }
.coda-seam-cap{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sub); margin:0 2px 8px; font-weight:600;
}
.coda-seam-cap-tot{
  font-family:'JetBrains Mono',ui-monospace,monospace; color:#cfd6f5;
  letter-spacing:.05em; font-variant-numeric:tabular-nums;
}
.coda-seam-track{
  position:relative; display:flex; height:38px; border-radius:11px; overflow:hidden;
  border:1px solid rgba(150,160,220,.16);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
}
.coda-seam-seg{
  display:flex; align-items:center; min-width:0; padding:0 13px; overflow:hidden;
  position:relative; transition:width .5s var(--ease-expo);
}
.coda-seam-seg-yours{
  justify-content:flex-start;
  background:linear-gradient(180deg, rgba(111,224,245,.13), rgba(111,224,245,.04));
}
.coda-seam-seg-coda{
  justify-content:flex-end;
  background:linear-gradient(180deg, rgba(246,214,138,.18), rgba(246,214,138,.06));
}
.coda-seam-seg-lab{ font-size:.62rem; font-weight:600; letter-spacing:.16em; white-space:nowrap; }
.coda-seam-seg-yours .coda-seam-seg-lab{ color:var(--cyan); text-shadow:0 0 10px rgba(111,224,245,.3); }
.coda-seam-seg-coda  .coda-seam-seg-lab{ color:var(--gold); text-shadow:0 0 10px rgba(246,214,138,.35); }
.coda-seam-join{
  position:absolute; top:0; bottom:0; width:2px; transform:translateX(-1px);
  background:linear-gradient(180deg, rgba(246,214,138,.25), var(--gold) 22%, var(--gold) 78%, rgba(246,214,138,.25));
  box-shadow:0 0 10px rgba(246,214,138,.7), 0 0 2px rgba(246,214,138,.9);
  transform-origin:center; animation:codaSeamWipe .7s var(--ease-expo) .25s both;
}
.coda-seam-join::before, .coda-seam-join::after{
  content:''; position:absolute; left:50%; width:7px; height:7px;
  transform:translateX(-50%) rotate(45deg); background:var(--gold); border-radius:1px;
  box-shadow:0 0 8px rgba(246,214,138,.8);
}
.coda-seam-join::before{ top:-3px; }
.coda-seam-join::after{ bottom:-3px; }
.coda-seam-foot{
  display:flex; justify-content:space-between; margin:9px 2px 0;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.66rem;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.coda-seam-foot-y{ color:var(--cyan); }
.coda-seam-foot-c{ color:var(--gold); }

/* ---------- OUTPUT WAVEFORM: show it in full (was clipped ~15px) ----------
   WaveSurfer draws taller than Gradio's default container, so the lower part of
   the waveform was bleeding into the timestamps and looking 'cut off'. Give it
   real vertical room and let it breathe. */
.coda-player .component-wrapper{ overflow:visible; }
.coda-player .waveform-container{
  min-height:90px !important; align-items:center !important; overflow:visible !important;
}

/* ---------- 'CODA HEARD' instant LISTENING state ----------
   the readout lights up the moment a clip lands, before key/tempo analysis is
   done — so it never sits greyed-out waiting on generation. */
.coda-hud-listening .coda-hud-live{
  color:var(--gold); border-color:rgba(246,214,138,.3); background:rgba(246,214,138,.06);
}
.coda-hud-scan{
  height:6px; margin:2px 0 12px; border-radius:3px; overflow:hidden;
  background:rgba(0,0,0,.42); box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.coda-hud-scan span{
  display:block; height:100%; width:36%; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation:codaHudScan 1.15s var(--ease-expo) infinite;
}
@keyframes codaHudScan{ 0%{transform:translateX(-120%)} 100%{transform:translateX(380%)} }

/* ---------- ELEGANCE POLISH ---------- */
.gradio-container *{ -webkit-tap-highlight-color:transparent; }
/* one consistent, soft focus ring instead of the browser default */
.gradio-container button:focus-visible,
.gradio-container [tabindex]:focus-visible,
.coda-vibe textarea:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 2px rgba(111,224,245,.5), 0 0 18px rgba(111,224,245,.25) !important;
}
/* quiet utility key easing (was a generic 'all .25s ease') */
.coda-demo{ transition:color .25s var(--ease-expo), border-color .25s var(--ease-expo),
            background .25s var(--ease-expo), box-shadow .25s var(--ease-expo) !important; }
/* the finished summary settles in gently with the reveal rather than popping */
.coda-summary h3, .coda-summary p{ animation:codaSeamRibbonIn .6s var(--ease-expo) both; }
@media (prefers-reduced-motion: reduce){
  .coda-seam-ribbon, .coda-seam-join, .coda-seam-seg, .coda-hud-scan span,
  .coda-summary h3, .coda-summary p{
    animation:none !important; transition:none !important;
  }
  .coda-hud-scan{ display:none; }
}
"""

# ethereal hero spectrum: a frequency-spectrum bar field with a centered
# envelope; each bar drifts on its own phase for a living, breathing look.
_N = 48
_bars = []
for _i in range(_N):
    _t = (_i - (_N - 1) / 2) / ((_N - 1) / 2)
    _env = 1.0 - 0.72 * _t * _t            # ~0.28 at the edges, 1.0 in the middle
    _delay = (_i * 0.06) % 1.6
    _dur = 1.15 + (_i % 6) * 0.11
    _bars.append(
        f"<span style='height:{_env*100:.0f}%;"
        f"animation-delay:-{_delay:.2f}s;animation-duration:{_dur:.2f}s'></span>")
SPECTRUM = "<div id='coda-eq'>" + "".join(_bars) + "</div>"

# ambient drifting particles — pure-CSS motes that float up behind the glass.
# (left%, size px, duration s, delay s) hand-tuned for an even, calm spread.
_seeds = [(6, 2.4, 16, 0), (13, 1.6, 21, 3), (21, 3.0, 18, 6), (29, 2.0, 24, 1),
          (37, 2.6, 19, 8), (45, 1.8, 22, 4), (53, 3.2, 17, 7), (61, 2.2, 25, 2),
          (69, 1.6, 20, 9), (77, 2.8, 23, 5), (84, 2.0, 18, 1), (91, 3.0, 21, 6),
          (9, 2.2, 26, 10), (34, 1.8, 19, 12), (66, 2.6, 22, 7), (88, 2.4, 24, 3)]
_parts = "".join(
    f"<span style='left:{_l}%;width:{_s}px;height:{_s}px;"
    f"animation-duration:{_d}s;animation-delay:-{_dl}s'></span>"
    for (_l, _s, _d, _dl) in _seeds)
AMBIENT = ("<div class='coda-aurora'></div>"
           "<div class='coda-glow'></div>"
           f"<div class='coda-particles'>{_parts}</div>")

# Feature C — cinematic onboarding overlay. The 2016 story plays on
# EVERY page load. It is rendered with `coda-intro-on` BAKED IN, so the CSS beats
# start immediately on load WITHOUT waiting on (or even needing) JS — bulletproof
# against the head-injection issue that made it vanish on the Space. The
# CODA_INIT_JS controller (when present) relocates it to <body>, locks scroll,
# wires Esc / auto-advance / replay, and hard-removes it on dismiss. Skip / Enter
# carry an INLINE onclick fallback so the overlay is always dismissable even if
# the JS module never loads (no lock-out).
_INTRO_CLOSE = (
    "(window.__codaCloseIntro||function(){"
    "var o=document.getElementById('coda-intro-overlay');"
    "if(o){o.style.opacity=0;o.style.pointerEvents='none';"
    "setTimeout(function(){if(o)o.remove();},620);}"
    "document.body.classList.remove('coda-intro-lock');})()")
INTRO_OVERLAY = (
    "<div id='coda-intro-overlay' class='coda-intro-on' role='dialog' "
    "aria-modal='true' aria-label='CODA — the story'>"
    f'<div id="coda-intro-skip" role="button" tabindex="0" onclick="{_INTRO_CLOSE}">Skip</div>'
    "<div id='coda-intro-card'>"
    "<div class='coda-intro-beat b1'><p class='coda-intro-year'>2016</p></div>"
    "<div class='coda-intro-beat b2'><p class='coda-intro-line'>A song, recorded "
    "one night — then <em>quit at the bridge</em>.</p></div>"
    "<div class='coda-intro-beat b3'>"
    "<h1 class='coda-intro-mark'>CODA</h1>"
    "<div id='coda-intro-eq'>" + ("<span></span>" * 12) + "</div></div>"
    "<div class='coda-intro-beat b4'>"
    "<p class='coda-intro-fin'>Ten years later, it gets finished.</p>"
    f'<button id="coda-intro-enter" type="button" onclick="{_INTRO_CLOSE}">Enter CODA</button>'
    "</div></div></div>")

# the only JS, and purely cosmetic: a soft light that follows the cursor. Runs
# once on load and just writes --mx/--my; all the rendering is CSS (.coda-glow).
POINTER_JS = """
() => {
  if (window.__codaPointer) return;
  window.__codaPointer = true;
  const set = (x, y) => {
    const r = document.documentElement.style;
    r.setProperty('--mx', x + 'px');
    r.setProperty('--my', y + 'px');
  };
  set(window.innerWidth * 0.5, window.innerHeight * 0.28);
  window.addEventListener('pointermove',
    (e) => set(e.clientX, e.clientY), { passive: true });
}
"""

# --- unified front-end init: Features A (audio-reactive hero), B (seam
# reveal), C (cinematic onboarding). One idempotent vanilla-JS module under
# window.__coda; composes with POINTER_JS. Wired via a second app.load(js=...).
CODA_INIT_JS = """
() => {
  /* ============================================================================
   * CODA — unified front-end init (Features A + B + C). ONE idempotent vanilla-JS
   * module under window.__coda. Composes with POINTER_JS (window.__codaPointer) —
   * never clobbers it. No CDN, no libs. Wired via a SECOND app.load(js=...).
   * Each sub-feature guards its own init flag, so re-firing app.load on an SSE
   * reconnect never double-installs observers/listeners.
   * ========================================================================== */
  try {
    var W = (window.__coda = window.__coda || {});
    var doc = document;

    var REDUCED = false;
    try { REDUCED = !!(window.matchMedia &&
      window.matchMedia('(prefers-reduced-motion: reduce)').matches); } catch (e) {}

    function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
    function fmtTime(s) {
      if (!isFinite(s) || s < 0) s = 0;
      var m = Math.floor(s / 60), r = Math.round(s % 60);
      if (r === 60) { m += 1; r = 0; }
      return m + ':' + (r < 10 ? '0' : '') + r;
    }
    function isCodaAudio(el) {
      return !!(el && el.tagName === 'AUDIO' &&
        (el.closest('.coda-drop') || el.closest('.coda-player')));
    }

    /* ===== SHARED AUDIO LAYER (AnalyserNode context) ===== */
    var AUDIO = (W.audio = W.audio || {
      AC: (window.AudioContext || window.webkitAudioContext || null),
      ctx: null,
      ensureCtx: function () {
        if (!this.AC) return null;
        if (!this.ctx) { try { this.ctx = new this.AC(); } catch (e) { return null; } }
        if (this.ctx.state === 'suspended') { try { this.ctx.resume(); } catch (e) {} }
        return this.ctx;
      }
    });

    /* ===== FEATURE A — AUDIO-REACTIVE HERO (real FFT via a shadow <audio>) =====
     * The hero bars dance with the finished track, driven by real FFT data.
     *
     * Verified live: Gradio's WaveSurfer plays from a DECODED BUFFER through its
     * own Web Audio graph — its <audio> element never loads (readyState 0, no
     * src, currentTime stays 0 while it plays). So there is no media element of
     * WaveSurfer's to tap, and wrapping HTMLMediaElement.play() never fires.
     *
     * Instead we drive the 48 bars from a SHADOW <audio> of the SAME file (its
     * download URL), wired MediaElementSource -> AnalyserNode and deliberately NOT
     * connected to destination: it yields real getByteFrequencyData() while
     * staying SILENT, so WaveSurfer remains the only audible source (no echo). We
     * start/stop the shadow in lockstep with WaveSurfer (play state = its Pause
     * button; position = its timestamp, resynced so it can't drift), and paint the
     * bars every frame. Bars are mirrored center=lows / edges=highs to keep the
     * hero's centered silhouette, with snappy attack + soft release. If Web Audio
     * is unavailable, autoplay is blocked, or the file is cross-origin-tainted, we
     * never confirm live data and the CSS-energized `.coda-eq-playing` look stays
     * as a graceful fallback — nothing regresses. On stop the bars glide to idle
     * and the CSS breathing animation resumes. */
    if (!W.heroFx) {
      W.heroFx = true;
      var EQ = (W.eq = W.eq || {});
      EQ.idle = 0.16;
      EQ.shadow = null; EQ.url = null; EQ.analyser = null; EQ.data = null;
      EQ.srcNode = null;                                  /* live MediaElementSource, torn down per track */
      EQ.raf = 0; EQ.settleRaf = 0; EQ.syncRaf = 0; EQ.confirmed = false; EQ.tries = 0;

      EQ.bars = function () {
        var eq = doc.getElementById('coda-eq');
        return eq ? eq.querySelectorAll('span') : [];
      };

      /* bar i (0..n-1) -> a frequency bin. Distance from center picks the band
       * (center=low, edge=high), perceptually spread so the lows aren't crammed. */
      EQ.band = function (data, i, n, bins) {
        var half = n / 2;
        var d = Math.abs(i + 0.5 - half) / half;          /* 0 center .. ~1 edge */
        var t = Math.pow(d, 1.35);
        var top = Math.max(4, Math.floor(bins * 0.80));   /* top bins are ~empty */
        var idx = 1 + Math.round(t * (top - 2));
        var a = data[idx];
        var b = data[idx + 1 < top ? idx + 1 : idx];
        return (a + b) / 510;                             /* /255/2 -> 0..1 */
      };

      EQ.paint = function (data, bins) {
        var spans = EQ.bars(), n = spans.length;
        if (!n) return;
        if (!EQ.state || EQ.state.length !== n) {
          EQ.state = new Float32Array(n); EQ.state.fill(EQ.idle);
        }
        for (var i = 0; i < n; i++) {
          var amp = EQ.band(data, i, n, bins);
          var target = clamp(0.12 + amp * 1.18, 0.04, 1.14);
          var prev = EQ.state[i];
          var k = target > prev ? 0.55 : 0.20;            /* snappy attack, soft release */
          var v = prev + (target - prev) * k;
          EQ.state[i] = v;
          spans[i].style.transform = 'scaleY(' + v.toFixed(3) + ')';
        }
      };

      /* the CODA player currently showing a Pause button (i.e. actually playing) */
      EQ.activePlayer = function () {
        var players = doc.querySelectorAll('.coda-player, .coda-drop');
        for (var i = 0; i < players.length; i++) {
          var bs = players[i].querySelectorAll('button');
          for (var j = 0; j < bs.length; j++) {
            var l = (bs[j].getAttribute('aria-label') || bs[j].title ||
                     bs[j].textContent || '').toLowerCase();
            if (l.indexOf('pause') !== -1) return players[i];
          }
        }
        return null;
      };
      EQ.playerURL = function (p) {
        if (!p) return null;
        var a = p.querySelector('a.download-link, a[download], a[href*="file="]');
        if (a && a.getAttribute('href')) return a.href;
        var au = p.querySelector('audio');
        if (au && (au.currentSrc || au.src)) return au.currentSrc || au.src;
        return null;
      };
      EQ.playerPos = function (p) {
        try {
          var t = p.querySelector('.timestamps time');
          if (!t) return null;
          var s = (t.textContent || '').trim().split(':');
          if (s.length < 2) return null;
          var v = parseInt(s[0], 10) * 60 + parseInt(s[1], 10);
          return isFinite(v) ? v : null;
        } catch (e) { return null; }
      };

      /* (re)build the silent shadow element + analyser for `url`. Returns false if
         Web Audio is unavailable or the graph can't be built (-> CSS fallback). */
      EQ.ensureShadow = function (url) {
        if (!AUDIO.AC) return false;
        if (EQ.url !== url) {                              /* new track */
          if (EQ.shadow) { try { EQ.shadow.pause(); EQ.shadow.src = ''; } catch (e) {} }
          /* tear down the PREVIOUS Web Audio graph so old MediaElementSource /
             analyser nodes don't pile up across resubmits — each finished take is
             a new URL, i.e. a fresh graph. (A MediaElementSource can't be re-made
             for the same element anyway, so the shadow is always a new element.) */
          if (EQ.srcNode) { try { EQ.srcNode.disconnect(); } catch (e) {} EQ.srcNode = null; }
          if (EQ.analyser) { try { EQ.analyser.disconnect(); } catch (e) {} }
          EQ.shadow = new Audio();
          EQ.shadow.crossOrigin = 'anonymous';            /* clean FFT if ever cross-origin */
          EQ.shadow.preload = 'auto';
          EQ.shadow.src = url;
          EQ.url = url; EQ.analyser = null; EQ.confirmed = false;
        }
        var ctx = AUDIO.ensureCtx();
        if (!ctx) return false;
        if (!EQ.analyser) {
          try {
            var node = ctx.createMediaElementSource(EQ.shadow);
            var an = ctx.createAnalyser();
            an.fftSize = 256; an.smoothingTimeConstant = 0.78;
            node.connect(an);                             /* NOT ->destination: stays silent */
            EQ.analyser = an; EQ.srcNode = node; EQ.data = new Uint8Array(an.frequencyBinCount);
          } catch (e) { return false; }
        }
        return true;
      };

      EQ.loop = function () {
        EQ.raf = requestAnimationFrame(EQ.loop);
        if (!EQ.analyser) return;
        EQ.analyser.getByteFrequencyData(EQ.data);
        if (!EQ.confirmed) {
          /* Hold on the CSS-energized look until the analyser delivers a real
             signal — covers the brief window where the AudioContext is still
             resuming after the click, or the track opens quietly. We keep
             looping (cheap) rather than giving up, so it self-heals the instant
             audio energy arrives; EQ.stop() ends the loop on pause/stop. */
          var mx = 0, i;
          for (i = 0; i < EQ.data.length; i++) if (EQ.data[i] > mx) mx = EQ.data[i];
          if (mx === 0) return;
          EQ.confirmed = true;
        }
        /* JS owns the bars on every confirmed frame. Re-assert .coda-eq-live each
           frame (idempotent) so a PRIOR stop()'s class removal can't survive into a
           pause→play cycle: without the class the .coda-eq-playing keyframe overrides
           our inline scaleY and the bars freeze. This is what made reactivity die on
           the 2nd play. Cheap: classList.add is a no-op once present. */
        var eq = doc.getElementById('coda-eq');
        if (eq && !eq.classList.contains('coda-eq-live')) eq.classList.add('coda-eq-live');
        EQ.paint(EQ.data, EQ.analyser.frequencyBinCount);
      };

      EQ.start = function (p) {
        if (REDUCED) return;
        var url = EQ.playerURL(p);
        if (!url || !EQ.ensureShadow(url)) return;         /* -> CSS fallback */
        EQ.tries = 0;
        /* Re-arm the confirm gate for THIS play session. On a pause→play the gate
           was left latched true, so the loop skipped re-adding .coda-eq-live and the
           bars went dead. Resetting it makes every play (1st, 2nd, Nth) re-detect
           energy and re-take ownership of the bars, holding the CSS pulse only for
           the few frames while the AudioContext resumes. */
        EQ.confirmed = false;
        /* ensureShadow already resumed the AudioContext (it may have auto-suspended
           while paused); make sure the silent shadow is actually rolling again. */
        var pos = EQ.playerPos(p);
        if (pos != null) { try { EQ.shadow.currentTime = pos; } catch (e) {} }
        try { var pr = EQ.shadow.play(); if (pr && pr.catch) pr.catch(function () {}); } catch (e) {}
        if (EQ.settleRaf) { cancelAnimationFrame(EQ.settleRaf); EQ.settleRaf = 0; }
        if (!EQ.raf) EQ.loop();
      };

      EQ.stop = function () {
        if (EQ.raf) { cancelAnimationFrame(EQ.raf); EQ.raf = 0; }
        if (EQ.shadow) { try { EQ.shadow.pause(); } catch (e) {} }
        var spans = EQ.bars(), n = spans.length;
        var eq = doc.getElementById('coda-eq');
        if (!n) { if (eq) eq.classList.remove('coda-eq-live'); return; }
        if (!EQ.state || EQ.state.length !== n) {
          EQ.state = new Float32Array(n); EQ.state.fill(EQ.idle);
        }
        /* glide the bars down to idle, THEN hand back to the CSS breathing anim */
        function decay() {
          var moving = false;
          for (var i = 0; i < n; i++) {
            EQ.state[i] += (EQ.idle - EQ.state[i]) * 0.22;
            if (Math.abs(EQ.state[i] - EQ.idle) > 0.012) moving = true;
            spans[i].style.transform = 'scaleY(' + EQ.state[i].toFixed(3) + ')';
          }
          if (moving) {
            EQ.settleRaf = requestAnimationFrame(decay);
          } else {
            EQ.settleRaf = 0;
            if (eq) eq.classList.remove('coda-eq-live');
            for (var j = 0; j < n; j++) spans[j].style.transform = '';  /* CSS resumes */
          }
        }
        decay();
      };

      EQ.sync = function () {
        var eq = doc.getElementById('coda-eq'); if (!eq) return;
        var p = REDUCED ? null : EQ.activePlayer();
        eq.classList.toggle('coda-eq-playing', !!p);       /* CSS floor while playing */
        if (p) {
          if (!EQ.raf) {
            EQ.start(p);
          } else if (EQ.shadow) {                           /* keep the shadow locked to the player */
            /* If the silent shadow stalled while the main player is still playing
               — ended, or the browser paused it after a scrub past its buffered
               edge — wake it back up so the analyser keeps feeding the bars. */
            if (EQ.shadow.paused || EQ.shadow.ended) {
              try { var rp = EQ.shadow.play(); if (rp && rp.catch) rp.catch(function () {}); } catch (e) {}
            }
            /* bound drift to the timestamp (covers scrubbing/seeking) */
            var pos = EQ.playerPos(p);
            if (pos != null && isFinite(EQ.shadow.duration) &&
                Math.abs(EQ.shadow.currentTime - pos) > 0.7) {
              try { EQ.shadow.currentTime = pos; } catch (e) {}
            }
          }
        } else if (EQ.raf || EQ.settleRaf || (EQ.shadow && !EQ.shadow.paused)) {
          EQ.stop();
        }
      };

      /* Coalesce mutation storms. WaveSurfer repaints + the stage overlay's
         animations mutate the DOM many times per frame; the old direct callback
         ran EQ.sync on EVERY one (hundreds/sec during playback) — a real source of
         the resubmit jank. Collapse to at most one sync per animation frame; the
         250ms interval below still independently drives play/stop + drift resync. */
      EQ.syncSoon = function () {
        if (EQ.syncRaf) return;
        EQ.syncRaf = requestAnimationFrame(function () { EQ.syncRaf = 0; EQ.sync(); });
      };
      try {
        var mo = new MutationObserver(EQ.syncSoon);
        mo.observe(doc.body, { subtree: true, childList: true, attributes: true,
          attributeFilter: ['aria-label', 'title', 'class'] });
      } catch (e) {}
      W.playPoll = setInterval(EQ.sync, 250);              /* drives play/stop + drift resync */
      EQ.sync();
      W.heroSync = EQ.sync;
    }

    /* ===== FEATURE B — BEFORE/AFTER SEAM REVEAL =====
     * The before/after split (YOUR PART | CODA + the join marker) is now rendered
     * SERVER-SIDE as a self-contained ribbon (see _seam_html in app.py) with the
     * exact proportions baked into inline styles. That removes the old, fragile
     * client-side path that measured WaveSurfer's waveform and could leave the
     * marker stuck in the wrong place. No JS needed here anymore. */

    /* ===== FEATURE C — CINEMATIC ONBOARDING ===== */
    (function featureC() {
      if (W.intro) return;
      W.intro = true;
      var KEY = 'coda_intro_seen';
      var hasLS = (function () {
        try { var k = '__coda_t'; localStorage.setItem(k, '1'); localStorage.removeItem(k); return true; }
        catch (e) { return false; }
      })();
      (function cacheTemplate() {
        var h = doc.getElementById('coda-intro-overlay');
        if (h && !W.introHTML) { try { W.introHTML = h.outerHTML; } catch (e) {} }
      })();
      function hardRemove(host) {
        try {
          host.style.display = 'none'; host.style.pointerEvents = 'none';
          host.setAttribute('aria-hidden', 'true'); host.remove();
        } catch (e) {}
      }
      /* Design choice: the 2016 intro replays on EVERY page load, not just the
       * first. So there is NO localStorage "seen" gate — we always boot it.
       * Skip / Esc / click-outside / auto-advance still dismiss it per load. */
      var tries = 0;
      function boot() {
        var host = doc.getElementById('coda-intro-overlay');
        if (!host) { if (tries++ < 60) requestAnimationFrame(boot); return; }
        init(host);
      }
      function init(host) {
        /* no seen-gate: the intro plays every load (see featureC note above) */
        try { if (host.parentNode !== doc.body) doc.body.appendChild(host); } catch (e) {}
        try { doc.body.classList.add('coda-intro-lock'); } catch (e) {}
        host.classList.add('coda-intro-on');
        if (REDUCED) host.classList.add('coda-intro-reduced');
        var enter = doc.getElementById('coda-intro-enter');
        var skip = doc.getElementById('coda-intro-skip');
        try { if (enter) enter.focus({ preventScroll: true }); } catch (e) {}
        var dismissed = false, walkAway = null, readyT = null;
        function dismiss() {
          if (dismissed) return; dismissed = true;
          try { if (walkAway) clearTimeout(walkAway); } catch (e) {}
          try { if (readyT) clearTimeout(readyT); } catch (e) {}
          try { doc.removeEventListener('keydown', onKey, true); } catch (e) {}
          host.classList.add('coda-intro-out');
          var done = false;
          function finish() {
            if (done) return; done = true;
            hardRemove(host);
            try { doc.body.classList.remove('coda-intro-lock'); } catch (e) {}
            /* intentionally do NOT persist a 'seen' flag — replay every load */
          }
          host.addEventListener('transitionend', finish, { once: true });
          setTimeout(finish, 750);
        }
        /* expose the graceful close so the overlay's inline onclick fallback
           routes through it when the JS module is present (else it self-closes) */
        try { window.__codaCloseIntro = dismiss; } catch (e) {}
        if (enter) enter.addEventListener('click', dismiss);
        if (skip) skip.addEventListener('click', dismiss);
        host.addEventListener('click', function (ev) { if (ev.target === host) dismiss(); });
        function onKey(ev) {
          if (ev.key === 'Escape') { dismiss(); }
          else if (ev.key === 'Enter' || ev.key === ' ' || ev.key === 'Spacebar') {
            if (host.contains(doc.activeElement) || doc.activeElement === doc.body) { ev.preventDefault(); dismiss(); }
          }
        }
        doc.addEventListener('keydown', onKey, true);
        var ARM = REDUCED ? 100 : 5200;
        readyT = setTimeout(function () { host.classList.add('coda-intro-ready'); }, ARM);
        walkAway = setTimeout(function () { if (!dismissed) dismiss(); }, REDUCED ? 1600 : 11000);
        ['click', 'keydown', 'pointerdown'].forEach(function (t) {
          host.addEventListener(t, function () { try { clearTimeout(walkAway); } catch (e) {} },
            { once: true, passive: true });
        });
        wireReplay();
      }
      function wireReplay() {
        var foot = doc.getElementById('coda-foot');
        if (!foot || doc.getElementById('coda-intro-replay')) return;
        var link = doc.createElement('span');
        link.id = 'coda-intro-replay'; link.textContent = 'replay intro';
        link.setAttribute('role', 'button'); link.setAttribute('tabindex', '0');
        function replay() {
          try { localStorage.removeItem(KEY); } catch (e) {}
          var tmpl = W.introHTML; if (!tmpl) return;
          var old = doc.getElementById('coda-intro-overlay'); if (old) old.remove();
          var wrap = doc.createElement('div'); wrap.innerHTML = tmpl;
          var fresh = wrap.firstElementChild; if (!fresh) return;
          doc.body.appendChild(fresh); init(fresh);
        }
        link.addEventListener('click', replay);
        link.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); replay(); } });
        foot.appendChild(doc.createElement('br'));
        foot.appendChild(link);
      }
      boot();
    })();

  } catch (e) {
    try {
      var h = document.getElementById('coda-intro-overlay');
      if (h) { h.style.display = 'none'; h.remove(); }
      document.body.classList.remove('coda-intro-lock');
    } catch (_) {}
  }
}
"""



# On-load JS hook. In this Gradio build, js-only app.load() handlers are dropped
# from the served config AND gr.Blocks(js=...) is populated but never auto-run by
# the frontend (both verified live). The reliable path is a <script> injected via
# gr.Blocks(head=...): the browser always executes it. It polls until the Gradio
# app has mounted, then runs the cursor glow + Features A/B/C; every sub-feature
# guards its own flag, so the repeated poll-driven calls are idempotent.
# The IIFE that polls until the Gradio app has mounted, then runs the cursor glow
# + Features A/B/C. Defined once and delivered through TWO channels (below), since
# head= injection is unreliable on the deployed Space — see BOOTSTRAP_HTML.
_BOOT_JS = (
    "(function () {\n"
    "  function boot() {\n"
    "    try { (" + POINTER_JS.strip() + ")(); } catch (e) {}\n"
    "    try { (" + CODA_INIT_JS.strip() + ")(); } catch (e) {}\n"
    "  }\n"
    "  function ready() {\n"
    "    /* wait for the real CONTENT elements, not just .gradio-container (which\n"
    "       exists before its children render) — else Feature C inits with no\n"
    "       overlay in the DOM and gives up. */\n"
    "    return !!(document.getElementById('coda-eq') &&\n"
    "              document.getElementById('coda-intro-overlay'));\n"
    "  }\n"
    "  function poll(n) { if (ready()) { boot(); } else if (n > 0) {\n"
    "    setTimeout(function () { poll(n - 1); }, 120); } }\n"
    "  if (document.readyState === 'loading') {\n"
    "    document.addEventListener('DOMContentLoaded', function () { poll(80); });\n"
    "  } else { poll(80); }\n"
    "  window.addEventListener('load', function () { poll(30); });\n"
    "})();\n"
)

# Channel 1 — head injection. Works locally (Gradio 6.16.0 honors head= on
# launch(), NOT on gr.Blocks()), and is the clean path wherever it lands.
HEAD_SCRIPT = "<script>\n" + _BOOT_JS + "</script>"

# Channel 2 — IN-BODY bootstrap (the reliable one on the Space). On the deployed
# Space, head= is dropped entirely (verified live: none of the module's symbols
# reach the page), so the whole front-end module — cursor glow + Feature A
# audio-reactive hero + Feature C intro controller — never ran. This channel does
# NOT depend on head= at all: a gr.HTML carries the boot code in an inert
# <script type="text/plain"> plus a 0×0 <img src="x"> whose onerror fires the
# instant Gradio sets the component's innerHTML (a broken <img> always errors,
# and innerHTML-inserted handlers DO run — unlike innerHTML-inserted <script>).
# The handler copies the boot text into a real <script> element and appends it,
# which executes it. Idempotent via window.__codaBoot, and _BOOT_JS itself guards
# every sub-feature, so co-firing with Channel 1 (where present) is harmless.
BOOTSTRAP_HTML = (
    "<div style=\"position:absolute;width:0;height:0;overflow:hidden\" aria-hidden=\"true\">"
    "<script type=\"text/plain\" id=\"coda-boot-src\">" + _BOOT_JS + "</script>"
    "<img src=\"x\" alt=\"\" "
    "onerror=\"(function(){try{if(window.__codaBoot)return;window.__codaBoot=1;"
    "var t=document.getElementById('coda-boot-src');if(!t)return;"
    "var s=document.createElement('script');s.textContent=t.textContent;"
    "(document.head||document.documentElement).appendChild(s);}catch(e){}})()\">"
    "</div>"
)

with gr.Blocks(title="CODA") as app:
    # in-body front-end bootstrap (Channel 2). First child so its <img> mounts and
    # fires as early as possible; 0×0 and aria-hidden, so it never affects layout.
    gr.HTML(BOOTSTRAP_HTML)
    # cinematic onboarding overlay (position:fixed; the JS relocates it to <body>
    # and never lets it block the tool). First child so it can never affect layout.
    gr.HTML(INTRO_OVERLAY)
    # ambient layers (aurora + cursor glow + drifting particles) live behind
    # everything via position:fixed / negative z-index, so they never affect layout.
    gr.HTML(AMBIENT)

    with gr.Column(elem_id="coda-head"):
        gr.HTML("<h1 id='coda-title'>CODA</h1>"
                "<p id='coda-tagline'>the songs you quit on, finished</p>"
                + SPECTRUM)
    gr.HTML("<hr id='coda-rule'/>")
    gr.HTML(
        "<p id='coda-intro'>Upload a short, unfinished music clip. CODA reads its "
        "<strong>key</strong>, <strong>tempo</strong> and <strong>groove</strong>, "
        "then <strong>Stable Audio 3</strong> continues it into a finished-sounding "
        "track in the same feel — 44.1 kHz stereo, spliced seamlessly onto your "
        "original.</p>")

    with gr.Row(equal_height=False):
        with gr.Column(scale=1, elem_classes="coda-glass"):
            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",
                waveform_options=gr.WaveformOptions(
                    waveform_color="#33405e",
                    waveform_progress_color="#6fe0f5",
                    trim_region_color="#a98bff"))
            demo_btn = gr.Button("🎧 Hear Track0000 — recorded 2016, never finished",
                                 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.",
                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,
            # which would make the next run generate a tiny tail that "sounds like
            # the original" — this hidden field is written only from the slider's
            # change/release, so it isn't subject to that reset; (2) unlike a
            # gr.State it stays settable through the API. Mirrored just below.
            length_input = gr.Number(value=DEFAULT_TOTAL, visible=False)
            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.",
                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.",
                elem_classes="coda-check")
            finish_btn = gr.Button("✨  Finish this song", variant="primary",
                                   interactive=False, elem_classes="coda-go")

        with gr.Column(scale=1):
            # 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.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
                # plain player reliably loads each new result; the user presses
                # play, which also avoids browsers blocking autoplay-with-sound.
                output_audio = gr.Audio(label="", type="filepath",
                                        interactive=False,
                                        elem_classes="coda-player",
                                        waveform_options=gr.WaveformOptions(
                                            waveform_color="#3a3060",
                                            waveform_progress_color="#a98bff"))
                # before/after composition ribbon, sat right under the player.
                # finish_song fills it on reveal with a fully self-contained,
                # server-computed YOUR PART | CODA split (see _seam_html) — the
                # marker is always exactly where CODA begins, no client-side
                # waveform measuring. Empty until a result lands.
                seam_data = gr.HTML("", elem_id="coda-seam-host")
                # 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(elem_classes="coda-summary")

    gr.HTML(
        "<div id='coda-foot'>Demo clip: <strong>Track0000</strong> — recorded "
        "2016, never finished. Tony Winslow's own unfinished song, the kind CODA "
        "exists to finish. Bring your own clip to finish yours."
        "<br/><span class='coda-badge'>Stable Audio 3 · ZeroGPU · 44.1 kHz "
        "stereo</span></div>")

    # On a new clip, analyze_on_upload also RESETS the result panel (player,
    # summary, seam ribbon, any leftover stage overlay) — its trailing 4 outputs —
    # so a fresh upload after a finished run starts from a clean slate.
    audio_input.change(fn=analyze_on_upload, inputs=[audio_input],
                       outputs=[info_md, finish_btn,
                                output_audio, summary_md, stage, seam_data])
    demo_btn.click(fn=load_demo, inputs=[], outputs=[audio_input])

    # Mirror the slider into the hidden length field on change AND release, so the
    # chosen length is captured whether the user drags the handle or clicks the
    # track — and then survives a frontend slider reset on the next submit.
    total_slider.change(lambda v: v, inputs=[total_slider], outputs=[length_input])
    total_slider.release(lambda v: v, inputs=[total_slider], outputs=[length_input])

    # Single event (no chained `.then`): finish_song returns BOTH the audio path
    # and the summary markdown, so one completion message clears the spinner.
    # 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.
    # seam_data is the 4th output (still ONE event, no chained .then): finish_song
    # yields a 4-tuple ending in the hidden seam-data div the Feature-B JS reads.
    finish_btn.click(
        fn=finish_song,
        inputs=[audio_input, length_input, vibe, remaster],
        outputs=[output_audio, summary_md, stage, seam_data])

    # NOTE: on-load JS (cursor glow + Features A/B/C) runs via the combined
    # gr.Blocks(js=ALL_LOAD_JS) above — js-only app.load() handlers are dropped
    # from the served config in this Gradio build, so they must not be used here.


if __name__ == "__main__":
    # Gradio 6 moved theme/css/head to launch(). On the deployed Space (Gradio
    # 6.16.0) head= on gr.Blocks() is SILENTLY IGNORED, so the whole front-end
    # JS module (cursor glow + Feature A audio-reactive hero + Feature C intro)
    # never got injected — which is why the 2016 intro "disappeared" on the
    # Space. Passing head=HEAD_SCRIPT to launch() is the supported path and
    # injects it on 6.16.0+. (HEAD_SCRIPT itself is idempotent, so even if a
    # newer Gradio also honored Blocks(head=) the double-run would be harmless.)
    # queue: one heavy job at a time (single GPU), others wait rather than
    # contend. show_error surfaces a real error in the UI instead of a silently
    # stuck spinner. allowed_paths: on HF Spaces, Gradio 6 refuses to serve the
    # bundled demo clip (gradio_api/file=…/examples/… → 403) unless its
    # directory is explicitly allowed, which broke "Try the demo" on the Space.
    app.queue(default_concurrency_limit=1, max_size=10).launch(
        theme=THEME, css=CSS, head=HEAD_SCRIPT, show_error=True,
        allowed_paths=[os.path.join(os.path.dirname(__file__), "examples")])