Spaces:

build-small-hackathon
/

marquee

Paused

App Files Files Community

add tts

by mamuflih13 - opened 26 days ago

base: refs/heads/main

←

from: refs/pr/1

Discussion Files changed

+2342

-2502

This PR is in draft mode

Files changed (11) hide show

Marquee.html +181 -245
README.md +61 -78
app.py +45 -298
commentary.py +36 -106
faces.py +123 -291
marquee.css +453 -331
marquee.js +307 -870
marquee_inlined_preview.html +1093 -0
ov_models.py +39 -26
requirements.txt +4 -24
tts.py +0 -233

Marquee.html CHANGED Viewed

@@ -1,284 +1,220 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Marquee | Live AI Broadcast Studio</title>
-  <!-- Premium Font Integrations -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Bebas+Neue&family=Nunito:wght@600;700;800;900&family=Playfair+Display:ital,wght@1,700&family=Special+Elite&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="marquee.css">
 </head>
 <body>
-  <!-- Dynamic Vector Definitions -->
-  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
-    <defs>
-      <symbol id="i-clap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M3 8h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/><path d="m3 8 1.6-3.4 3.8 1L6.7 9M9.4 5.6l3.8 1L11.5 10M15 7l3.8 1-1.5 3.4M21 8l-.8-2.2-3.4-.9"/></symbol>
-      <symbol id="i-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></symbol>
-      <symbol id="i-pause" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></symbol>
-      <symbol id="i-star" viewBox="0 0 24 24" fill="currentColor"><path d="m12 2 2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></symbol>
-      <symbol id="i-spot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 3v3M5 6l2 2M19 6l-2 2"/><path d="M9 9h6l3 11H6z" fill="currentColor" opacity=".15"/><path d="M9 9h6l3 11H6z"/></symbol>
-      <symbol id="i-crown" viewBox="0 0 24 24" fill="currentColor"><path d="M3 7l4 4 5-7 5 7 4-4-2 12H5z"/></symbol>
-      <symbol id="i-bird" viewBox="0 0 24 24" fill="currentColor"><path d="M14 4a3 3 0 0 0-3 3c0 .5-.4 1-1 1.5-1.8 1.3-3 3.4-3 5.8C7 17.9 9.6 20 13 20c.6 0 1-.6.8-1.2C13.3 17 13 16 14 15c2.2-.4 4-2.3 4-4.8V7a3 3 0 0 0-3-3zm.6 3.2a.9.9 0 1 1 0-.1z"/></symbol>
-      <symbol id="i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></symbol>
-      <symbol id="i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v10m0 0 4-4m-4 4-4-4M5 20h14"/></symbol>
-      <symbol id="i-mic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M6 11a6 6 0 0 0 12 0M12 17v4"/></symbol>
-      <symbol id="i-list" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></symbol>
-      <symbol id="i-whistle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M3 11a5 5 0 0 0 5 5h4l5 3v-8a3 3 0 0 0-3-3H8a5 5 0 0 0-5 3Z"/><path d="M14 4v3"/></symbol>
-      <symbol id="i-glam" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M3 14c2-1 4-1 5 0M16 14c2-1 4-1 5 0M3 11h18M7 11l1 5M17 11l-1 5"/><circle cx="6.5" cy="8.5" r="2"/><circle cx="17.5" cy="8.5" r="2"/></symbol>
-      <symbol id="i-paw" viewBox="0 0 24 24" fill="currentColor"><circle cx="6" cy="9" r="2"/><circle cx="11" cy="6" r="2"/><circle cx="16" cy="7" r="2"/><circle cx="19" cy="11" r="2"/><path d="M12 12c-3 0-6 2.5-6 5 0 2 2 3 6 3s6-1 6-3c0-2.5-3-5-6-5Z"/></symbol>
-      <symbol id="i-glove" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M7 10V6a2 2 0 0 1 4 0v3M11 9V5a2 2 0 0 1 4 0v5l2 1a3 3 0 0 1 1.4 3.4l-.8 3A2 2 0 0 1 15.7 21H10a3 3 0 0 1-2.8-2L5.5 14A2.5 2.5 0 0 1 7 10Z"/></symbol>
-      <symbol id="i-cam" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3z"/></symbol>
-      <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12 5 5L20 6"/></symbol>
-      <symbol id="i-back" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></symbol>
-      <symbol id="i-portrait" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4.4"/><path d="M3.5 22c0-4.7 3.8-8 8.5-8s8.5 3.3 8.5 8z"/></symbol>
-      <symbol id="i-chef" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 13.87A4 4 0 0 1 7.41 6a5.11 5.11 0 0 1 1.05-1.54 5 5 0 0 1 7.08 0A5.11 5.11 0 0 1 16.59 6 4 4 0 0 1 18 13.87V21H6Z"/><line x1="6" y1="17" x2="18" y2="17"/></symbol>
-      <symbol id="i-film" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 4v16M17 4v16M2 12h20M2 8h5M2 16h5M17 8h5M17 16h5"/></symbol>
-      <symbol id="i-arrow-r" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></symbol>
-      <symbol id="i-loader" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></symbol>
-    </defs>
-  </svg>
-  <!-- ============================================================
-       LANDING — Vibe Picker Card Matrix
-       ============================================================ -->
-  <div class="landing" id="landingView">
-    <div class="landing-inner">
-      <div class="landing-brand">
-        <div class="sign">
-          <div class="bulbs t"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
-          <h1 class="disp">MARQUEE</h1>
-          <div class="bulbs b"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
-        </div>
-        <p class="landing-tag">Drop a clip. Pick your show. Everyone becomes a headliner.</p>
-      </div>
-      <div class="landing-pick">
-        <p class="landing-prompt">Choose your broadcast style</p>
-        <div class="landing-vibes" id="landingVibes">
-          <button class="lv-card" data-vibe="football">
-            <div class="lv-icon"><svg class="i"><use href="#i-whistle"/></svg></div>
-            <div class="lv-body">
-              <span class="lv-name">Football</span>
-              <span class="lv-desc">World Cup energy. Roaring play-by-play commentary for the beautiful game.</span>
-            </div>
-            <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg>
-          </button>
-          <button class="lv-card" data-vibe="diva">
-            <div class="lv-icon"><svg class="i"><use href="#i-glam"/></svg></div>
-            <div class="lv-body">
-              <span class="lv-name">Diva Hour</span>
-              <span class="lv-desc">Red carpet glamour. Fashion feedback, high drama, and unsolicited feedback.</span>
-            </div>
-            <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg>
-          </button>
-          <button class="lv-card" data-vibe="wildlife">
-            <div class="lv-icon"><svg class="i"><use href="#i-paw"/></svg></div>
-            <div class="lv-body">
-              <span class="lv-name">Wildlife</span>
-              <span class="lv-desc">Hushed. Awestruck. Narrating your friends like rare creatures in the wild.</span>
-            </div>
-            <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg>
-          </button>
-          <button class="lv-card" data-vibe="boxing">
-            <div class="lv-icon"><svg class="i"><use href="#i-glove"/></svg></div>
-            <div class="lv-body">
-              <span class="lv-name">Boxing</span>
-              <span class="lv-desc">Ringside. Every move is championship-defining. Nobody is safe from the hype.</span>
-            </div>
-            <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg>
-          </button>
-          <button class="lv-card" data-vibe="masterchef">
-            <div class="lv-icon"><svg class="i"><use href="#i-chef"/></svg></div>
-            <div class="lv-body">
-              <span class="lv-name">MasterChef</span>
-              <span class="lv-desc">High stakes. Brutal precision. A cooking-show judge who takes everything personally.</span>
-            </div>
-            <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg>
-          </button>
-        </div>
       </div>
     </div>
-  </div>
   <!-- ============================================================
-       MAIN APP SHELL
        ============================================================ -->
-  <div class="shell" id="appShell" hidden>
-    <!-- MASTHEAD -->
-    <header class="masthead">
-      <div class="brand">
-        <div class="sign">
-          <div class="bulbs t"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
-          <h1 class="disp">MARQUEE</h1>
-          <div class="bulbs b"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
-        </div>
-        <div class="tag" id="mastheadTag">Everyone's a headliner.<small>Turn any clip into a live broadcast.</small></div>
-      </div>
-      <div class="broadcast-meta">
-        <button class="change-vibe-btn" id="changeVibeBtn" title="Change style">Change broadcast</button>
-        <span class="clock" id="clock">--:--:--</span>
-        <span class="status" id="status"><span class="led"></span><span id="statusTxt">Standby</span></span>
-      </div>
-    </header>
-    <!-- VIEW 1 — SETUP CONSOLE -->
-    <section class="view active" id="setupView">
-      <nav class="rundown" id="rundown" aria-label="Show rundown">
-        <div class="cue on" data-step="1"><div class="node">01</div><div class="ttl" id="step1Ttl">Roll Tape</div><div class="sub" id="step1Sub">Drop a clip</div></div>
-        <div class="cue" data-step="2"><div class="node">02</div><div class="ttl" id="step2Ttl">Casting</div><div class="sub" id="step2Sub">Find the faces</div></div>
-        <div class="cue" data-step="3"><div class="node">03</div><div class="ttl" id="step3Ttl">Star Select</div><div class="sub" id="step3Sub">Name the stars</div></div>
-        <div class="cue" data-step="4"><div class="node">04</div><div class="ttl" id="step4Ttl">Showtime</div><div class="sub" id="step4Sub">Go live</div></div>
-      </nav>
-      <!-- Dynamic Vibe Strip Banner -->
-      <div class="vibe-banner" id="vibeBanner">
-        <div class="vibe-banner-icon" id="vibeBannerIcon"></div>
-        <div class="vibe-banner-text" style="flex: 1;">
-          <span class="vibe-banner-name skew-header" id="vibeBannerName">Football</span>
-          <span class="vibe-banner-desc" id="vibeBannerDesc">Turn any clip into a live sports broadcast.</span>
-        </div>
-        <div class="banner-wave" id="bannerWave" aria-hidden="true">
-          <span></span><span></span><span></span><span></span><span></span>
-        </div>
-      </div>
-      <div class="console">
-        <div class="desk">
-          <!-- Roll Tape -->
-          <div class="card" id="rollCard">
-            <div class="card-h"><svg class="i ic"><use href="#i-clap"/></svg><h2 id="rollCardTitle">Roll Tape</h2><span class="meta">SRC 01</span></div>
-            <div class="drop" id="drop" tabindex="0" role="button" aria-label="Drop a video clip">
-              <div class="ask">
-                <span class="clap"><svg class="i"><use href="#i-clap"/></svg></span>
-                <div class="t" id="dropTitle">Drop a clip on the desk</div>
-                <div class="s">MP4 | MOV | up to 60s | portrait, landscape or square</div>
-              </div>
-              <div class="loaded">
-                <div class="strip"><span class="play"><svg class="i"><use href="#i-play"/></svg></span></div>
-                <div>
-                  <div class="fn" id="fileName">clip.mp4</div>
-                  <div class="fd"><span id="fileDur">00:42</span> | ready to cast</div>
-                </div>
               </div>
             </div>
-            <input type="file" id="fileInput" accept="video/*" hidden>
-            <button class="btn cyan mt" id="castBtn" disabled>
-              <svg class="i"><use href="#i-spot"/></svg>
-              <span id="castBtnLabel">Find the stars</span>
             </button>
-            <div class="sweep"></div>
           </div>
-          <!-- Voice Selector -->
-          <div class="card voice-card" id="voiceCard">
-            <div class="card-h"><svg class="i ic"><use href="#i-mic"/></svg><h2>Voice Model</h2><span class="meta">TTS Engine</span></div>
-            <div class="voice-opts" id="voiceOpts" role="group" aria-label="TTS voice model">
-              <button class="voice-opt active" data-model="chatterbox" aria-pressed="true">
-                <span class="vt">Chatterbox</span>
-                <span class="vd">Fast | expressive | 0.5B</span>
-              </button>
-              <button class="voice-opt" data-model="orpheus" aria-pressed="false">
-                <span class="vt">Orpheus</span>
-                <span class="vd">Richer | slower | 3B</span>
-              </button>
             </div>
           </div>
-          <!-- Showtime -->
-          <button class="btn show" id="liveBtn" disabled>
-            <svg class="i"><use href="#i-star"/></svg>
-            <span id="liveBtnLabel">Showtime | go live</span>
-          </button>
         </div>
-        <!-- RIGHT: Roster Stage -->
-        <div class="stage-panel" id="stagePanel">
-          <div class="stage-h">
-            <svg class="i ic"><use href="#i-spot"/></svg>
-            <h2 id="stageTitle">Star Select</h2>
-            <span class="count" id="starCount">NO CAST YET</span>
-          </div>
-          <div class="empty" id="stageEmpty">
-            <div class="spot"><svg class="i"><use href="#i-spot"/></svg></div>
-            <div class="t" id="stageEmptyTitle">The stage is dark</div>
-            <div class="s" id="stageEmptySub">Roll a clip and hit <b id="stageEmptyCta">Find the stars</b> | everyone we spot gets a card under the spotlight.</div>
-          </div>
-          <div class="roster" id="roster" hidden></div>
         </div>
       </div>
-      <p class="note">
-        <svg class="i lock"><use href="#i-lock"/></svg>
-        <span id="noteText">Your clip stays on <b>your machine</b>. Faces are detected locally and never uploaded | Marquee only writes the captions you see.</span>
-      </p>
-    </section>
-    <!-- VIEW 2 — BROADCAST PLAYER -->
-    <section class="view" id="broadcastView">
-      <div class="booth-top">
-        <button class="back" id="backBtn"><svg class="i"><use href="#i-back"/></svg> <span id="backBtnLabel">Back to console</span></button>
       </div>
-      <div class="booth" id="booth">
-        <div>
-          <div class="screen-wrap">
-            <div class="screen" id="screen">
-              <!-- 1:1 aspect-ratio is hardcoded in CSS — DO NOT modify -->
-              <video id="vid" class="screen-vid" playsinline preload="metadata"></video>
-              <div class="ph"><svg class="i"><use href="#i-cam"/></svg>YOUR CLIP PLAYS HERE</div>
-              <div class="bug"><span class="dot"></span> ON AIR</div>
-              <div class="tc" id="tc">00:00</div>
-              <div class="chyron" id="chyron">
-                <div class="bar"></div>
-                <div class="row"><span class="who" id="chyWho">COCO</span><span class="line" id="chyLine">Standing by…</span></div>
-              </div>
             </div>
           </div>
-          <div class="transport">
-            <button class="pp" id="pp" aria-label="Play / pause"><svg class="i"><use href="#i-play"/></svg></button>
-            <div class="scrub" id="scrub"><div class="fill" id="fill"></div><div class="knob" id="knob"></div></div>
-            <span class="clock" id="tcDur" style="font-size:16px">00:42</span>
-          </div>
         </div>
-        <div class="pbp">
-          <div class="pbp-h"><svg class="i ic"><use href="#i-list"/></svg><h3 id="pbpTitle">Play-by-play</h3><span class="ct" id="pbpCt">| lines</span></div>
-          <div class="lines" id="lines"></div>
-          <div class="export">
-            <button class="btn-srt" id="srtBtn"><svg class="i ic"><use href="#i-download"/></svg> Download captions (.srt)</button>
-            <div class="hint">Drops straight into <b>CapCut</b>, Premiere &amp; DaVinci | timed to your clip.</div>
-            <button class="btn-export" id="exportBtn"><svg class="i ic"><use href="#i-download"/></svg> Export broadcast (.mp4)</button>
-            <div class="export-progress" id="exportProgress" hidden>
-              <div class="export-bar"><div class="export-fill" id="exportFill"></div></div>
-              <span class="export-label" id="exportLabel">Mixing audio…</span>
-            </div>
-            <div class="hint" id="exportHint" hidden>Video + Coco's voice + captions | ready to post.</div>
-          </div>
         </div>
       </div>
-    </section>
-  </div><!-- /.shell -->
-  <div class="toast" id="toast"><svg class="i ic"><use href="#i-check"/></svg><span id="toastTxt">Done</span></div>
-  <script type="module" src="marquee.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Marquee — Setup Console & Broadcast</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Bebas+Neue&family=Nunito:wght@600;700;800;900&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="marquee.css">
 </head>
 <body>
+<!-- =======================================================
+     ICON SPRITE — line icons, broadcast vernacular
+     ======================================================= -->
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <symbol id="i-clap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M3 8h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/><path d="m3 8 1.6-3.4 3.8 1L6.7 9M9.4 5.6l3.8 1L11.5 10M15 7l3.8 1-1.5 3.4M21 8l-.8-2.2-3.4-.9"/></symbol>
+    <symbol id="i-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></symbol>
+    <symbol id="i-pause" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></symbol>
+    <symbol id="i-star" viewBox="0 0 24 24" fill="currentColor"><path d="m12 2 2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></symbol>
+    <symbol id="i-spot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 3v3M5 6l2 2M19 6l-2 2"/><path d="M9 9h6l3 11H6z" fill="currentColor" opacity=".15"/><path d="M9 9h6l3 11H6z"/></symbol>
+    <symbol id="i-crown" viewBox="0 0 24 24" fill="currentColor"><path d="M3 7l4 4 5-7 5 7 4-4-2 12H5z"/></symbol>
+    <symbol id="i-bird" viewBox="0 0 24 24" fill="currentColor"><path d="M14 4a3 3 0 0 0-3 3c0 .5-.4 1-1 1.5-1.8 1.3-3 3.4-3 5.8C7 17.9 9.6 20 13 20c.6 0 1-.6.8-1.2C13.3 17 13 16 14 15c2.2-.4 4-2.3 4-4.8V7a3 3 0 0 0-3-3zm.6 3.2a.9.9 0 1 1 0-.1z"/></symbol>
+    <symbol id="i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></symbol>
+    <symbol id="i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v10m0 0 4-4m-4 4-4-4M5 20h14"/></symbol>
+    <symbol id="i-mic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M6 11a6 6 0 0 0 12 0M12 17v4"/></symbol>
+    <symbol id="i-list" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></symbol>
+    <symbol id="i-whistle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M3 11a5 5 0 0 0 5 5h4l5 3v-8a3 3 0 0 0-3-3H8a5 5 0 0 0-5 3Z"/><path d="M14 4v3"/></symbol>
+    <symbol id="i-glam" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M3 14c2-1 4-1 5 0M16 14c2-1 4-1 5 0M3 11h18M7 11l1 5M17 11l-1 5"/><circle cx="6.5" cy="8.5" r="2"/><circle cx="17.5" cy="8.5" r="2"/></symbol>
+    <symbol id="i-paw" viewBox="0 0 24 24" fill="currentColor"><circle cx="6" cy="9" r="2"/><circle cx="11" cy="6" r="2"/><circle cx="16" cy="7" r="2"/><circle cx="19" cy="11" r="2"/><path d="M12 12c-3 0-6 2.5-6 5 0 2 2 3 6 3s6-1 6-3c0-2.5-3-5-6-5Z"/></symbol>
+    <symbol id="i-glove" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M7 10V6a2 2 0 0 1 4 0v3M11 9V5a2 2 0 0 1 4 0v5l2 1a3 3 0 0 1 1.4 3.4l-.8 3A2 2 0 0 1 15.7 21H10a3 3 0 0 1-2.8-2L5.5 14A2.5 2.5 0 0 1 7 10Z"/></symbol>
+    <symbol id="i-cam" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3z"/></symbol>
+    <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12 5 5L20 6"/></symbol>
+    <symbol id="i-back" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></symbol>
+    <symbol id="i-portrait" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4.4"/><path d="M3.5 22c0-4.7 3.8-8 8.5-8s8.5 3.3 8.5 8z"/></symbol>
+  </defs>
+</svg>
+<div class="shell">
+  <!-- ============== MASTHEAD ============== -->
+  <header class="masthead">
+    <div class="brand">
+      <div class="sign">
+        <div class="bulbs t"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+        <h1 class="disp">MARQUEE</h1>
+        <div class="bulbs b"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
       </div>
+      <div class="tag">Everyone's a headliner.<small>Turn any clip into a live broadcast.</small></div>
+    </div>
+    <div class="broadcast-meta">
+      <span class="clock" id="clock">--:--:--</span>
+      <span class="status" id="status"><span class="led"></span><span id="statusTxt">Standby</span></span>
     </div>
+  </header>
   <!-- ============================================================
+       VIEW 1 — SETUP CONSOLE
        ============================================================ -->
+  <section class="view active" id="setupView">
+    <!-- rundown / running order -->
+    <nav class="rundown" id="rundown" aria-label="Show rundown">
+      <div class="cue on" data-step="1"><div class="node">01</div><div class="ttl">Roll Tape</div><div class="sub">Drop a clip</div></div>
+      <div class="cue" data-step="2"><div class="node">02</div><div class="ttl">Casting</div><div class="sub">Find the faces</div></div>
+      <div class="cue" data-step="3"><div class="node">03</div><div class="ttl">Star Select</div><div class="sub">Name the stars</div></div>
+      <div class="cue" data-step="4"><div class="node">04</div><div class="ttl">Showtime</div><div class="sub">Go live</div></div>
+    </nav>
+    <div class="console">
+      <!-- ---------- LEFT: the control desk ---------- -->
+      <div class="desk">
+        <!-- Roll Tape -->
+        <div class="card" id="rollCard">
+          <div class="card-h"><svg class="i ic"><use href="#i-clap"/></svg><h2>Roll Tape</h2><span class="meta">SRC 01</span></div>
+          <div class="drop" id="drop" tabindex="0" role="button" aria-label="Drop a video clip to roll tape">
+            <div class="ask">
+              <span class="clap"><svg class="i"><use href="#i-clap"/></svg></span>
+              <div class="t">Drop a clip on the desk</div>
+              <div class="s">MP4 · MOV · up to 60s · portrait, landscape or square</div>
+            </div>
+            <div class="loaded">
+              <div class="strip"><span class="play"><svg class="i"><use href="#i-play"/></svg></span></div>
+              <div>
+                <div class="fn" id="fileName">rooftop_freekick.mp4</div>
+                <div class="fd"><span id="fileDur">00:42</span> · 1080×1920 · ready to cast</div>
               </div>
             </div>
+          </div>
+          <input type="file" id="fileInput" accept="video/*" hidden>
+          <button class="btn cyan mt" id="castBtn" disabled><svg class="i"><use href="#i-spot"/></svg> Find the stars</button>
+          <div class="sweep"></div>
+        </div>
+        <!-- Pick the show / vibes -->
+        <div class="card" id="vibeCard">
+          <div class="card-h"><svg class="i ic"><use href="#i-mic"/></svg><h2>Pick the show</h2><span class="meta">TONE</span></div>
+          <div class="vibes" id="vibes" role="group" aria-label="Narration vibe">
+            <button class="vibe" data-vibe="football" style="--vc:var(--star-lime)" aria-pressed="false">
+              <span class="ic"><svg class="i"><use href="#i-whistle"/></svg></span>
+              <span><span class="vt">Football</span><span class="vd">Roaring play-by-play</span></span>
+            </button>
+            <button class="vibe" data-vibe="diva" style="--vc:var(--star-hot)" aria-pressed="false">
+              <span class="ic"><svg class="i"><use href="#i-glam"/></svg></span>
+              <span><span class="vt">Diva Hour</span><span class="vd">Red-carpet shade</span></span>
+            </button>
+            <button class="vibe" data-vibe="wildlife" style="--vc:var(--star-cyan)" aria-pressed="false">
+              <span class="ic"><svg class="i"><use href="#i-paw"/></svg></span>
+              <span><span class="vt">Wildlife</span><span class="vd">Hushed nature doc</span></span>
+            </button>
+            <button class="vibe" data-vibe="boxing" style="--vc:var(--star-tang)" aria-pressed="false">
+              <span class="ic"><svg class="i"><use href="#i-glove"/></svg></span>
+              <span><span class="vt">Boxing</span><span class="vd">Ringside hype</span></span>
             </button>
           </div>
+          <!-- Coco the host — re-dresses per vibe -->
+          <div class="coco" id="coco">
+            <div class="av">
+              <svg class="i bird"><use href="#i-bird"/></svg>
+              <span class="acc" id="cocoAcc"><svg><use href="#i-star"/></svg></span>
+            </div>
+            <div class="say">
+              <span class="who">Coco · your host</span>
+              <span id="cocoLine">Pick a show and I'll set the mood. I dress for the occasion.</span>
             </div>
           </div>
+        </div>
+        <!-- Showtime -->
+        <button class="btn show" id="liveBtn" disabled><svg class="i"><use href="#i-star"/></svg> Showtime — go live</button>
+      </div>
+      <!-- ---------- RIGHT: the stage ---------- -->
+      <div class="stage-panel" id="stagePanel">
+        <div class="stage-h">
+          <svg class="i ic"><use href="#i-spot"/></svg>
+          <h2>Star Select</h2>
+          <span class="count" id="starCount">NO CAST YET</span>
         </div>
+        <!-- empty -->
+        <div class="empty" id="stageEmpty">
+          <div class="spot"><svg class="i"><use href="#i-spot"/></svg></div>
+          <div class="t">The stage is dark</div>
+          <div class="s">Roll a clip and hit <b>Find the stars</b> — everyone we spot gets a card under the spotlight.</div>
         </div>
+        <!-- roster (filled by JS) -->
+        <div class="roster" id="roster" hidden></div>
       </div>
+    </div>
+    <p class="note">
+      <svg class="i lock"><use href="#i-lock"/></svg>
+      Your clip stays on <b>your machine</b>. Faces are detected locally and never uploaded — Marquee only writes the captions you see.
+    </p>
+  </section>
+  <!-- ============================================================
+       VIEW 2 — BROADCAST PLAYER
+       ============================================================ -->
+  <section class="view" id="broadcastView">
+    <div class="booth-top">
+      <button class="back" id="backBtn"><svg class="i"><use href="#i-back"/></svg> Back to console</button>
+      <div class="orient" role="group" aria-label="Clip orientation">
+        <button data-orient="landscape" aria-pressed="true">16:9</button>
+        <button data-orient="square" aria-pressed="false">1:1</button>
+        <button data-orient="portrait" aria-pressed="false">9:16</button>
       </div>
+    </div>
+    <div class="booth" id="booth">
+      <!-- the screen -->
+      <div>
+        <div class="screen-wrap">
+          <div class="screen" id="screen">
+            <video id="vid" class="screen-vid" playsinline preload="metadata"></video>
+            <div class="ph"><svg class="i"><use href="#i-cam"/></svg>YOUR CLIP PLAYS HERE</div>
+            <div class="bug"><span class="dot"></span> ON AIR</div>
+            <div class="tc" id="tc">00:00</div>
+            <!-- lower-third chyron -->
+            <div class="chyron" id="chyron">
+              <div class="bar"></div>
+              <div class="row"><span class="who" id="chyWho">COCO</span><span class="line" id="chyLine">Standing by…</span></div>
             </div>
           </div>
         </div>
+        <div class="transport">
+          <button class="pp" id="pp" aria-label="Play / pause"><svg class="i"><use href="#i-play"/></svg></button>
+          <div class="scrub" id="scrub"><div class="fill" id="fill"></div><div class="knob" id="knob"></div></div>
+          <span class="clock" id="tcDur" style="font-size:16px">00:42</span>
+        </div>
+      </div>
+      <!-- play-by-play rail -->
+      <div class="pbp">
+        <div class="pbp-h"><svg class="i ic"><use href="#i-list"/></svg><h3>Play-by-play</h3><span class="ct" id="pbpCt">— lines</span></div>
+        <div class="lines" id="lines"></div>
+        <div class="export">
+          <button class="btn-srt" id="srtBtn"><svg class="i ic"><use href="#i-download"/></svg> Download captions (.srt)</button>
+          <div class="hint">Drops straight into <b>CapCut</b>, Premiere &amp; DaVinci — timed to your clip.</div>
         </div>
       </div>
+    </div>
+  </section>
+</div>
+<div class="toast" id="toast"><svg class="i ic"><use href="#i-check"/></svg><span id="toastTxt">Done</span></div>
+<script src="marquee.js"></script>
 </body>
+</html>

README.md CHANGED Viewed

@@ -10,95 +10,78 @@ license: apache-2.0
 short_description: Turn any clip into a broadcast starring your friends
 tags:
   - build-small-hackathon
-  - track:backyard
-  - achievement:offgrid
-  - achievement:offbrand
 ---
-# Marquee 🎙️
-Drop a clip of friends doing anything. Marquee detects who's in it, you give each person a name, pick a commentary style, and an AI commentator calls the action play-by-play — by name, in sync — as a broadcast you can play back and export as an MP4.
-## What it does
-1. **Scan** — Upload a clip (≤60s). OpenVINO detects and clusters people into tracks. You get a roster of face crops to name.
-2. **Generate** — Qwen2.5-VL-7B watches key moments from the clip and writes commentary lines timed to the action, in whichever style you picked.
-3. **Voice** — Each line gets spoken by a TTS model. Two options: Chatterbox (fast, runs on CPU) or Orpheus (slower, more expressive, requires GPU and a HuggingFace token).
-4. **Export** — ffmpeg mixes the TTS audio over the original clip audio, burns in subtitles, and gives you a download.
-## Setup
-### Hardware
-Must be **ZeroGPU**. Qwen2.5-VL-7B and Orpheus both need a GPU. Set it under **Settings → Hardware → ZeroGPU** in your Space. On a CPU-only Space the VLM is unusable.
-### Using Orpheus TTS
-Orpheus uses `canopylabs/orpheus-3b-0.1-ft`, which is a **gated model** on HuggingFace. Two steps to unlock it:
-1. Go to https://huggingface.co/canopylabs/orpheus-3b-0.1-ft and accept the access request. Takes about a minute to be approved.
-2. Add your HuggingFace token as a **Space secret** (not a repo file):
-   - Go to **Settings → Variables and Secrets → New Secret**
-   - Name: `HF_TOKEN`
-   - Value: a token from https://huggingface.co/settings/tokens with at least **Read** scope
-Once the secret is set, restart the Space. The model will download on first use (~7GB). After that it's cached for the session.
-Chatterbox (the default) needs no token and no extra setup.
-### Demo
-https://youtu.be/f2I8m6ardkU
-### Local dev
 ```bash
 pip install -r requirements.txt
 python -c "from ov_models import download_models; download_models()"
-python app.py
-# → http://localhost:7860
-```
-Qwen lazy-loads on the first generate request. Orpheus lazy-loads on first TTS request with that model selected. Expect a slow first run.
-For local Orpheus use you'll need to be logged in: `huggingface-cli login`.
-## How it's wired
-The backend is a `gradio.Server` (a FastAPI subclass). This gives us ZeroGPU + the Gradio queue while letting custom routes take priority. The UI is a static HTML page served at `/`. The scan is a plain `fetch()` POST; commentary goes through the Gradio JS client so it hits the queue and ZeroGPU sees the `@spaces.GPU` decorator.
-```
-Marquee.html + marquee.css + marquee.js  →  served at "/"
-  │
-  ├─ fetch POST /api/scan      upload → normalize → detect+cluster → session + roster
-  ├─ fetch GET  /video/{sid}   streams the normalized mp4
-  ├─ gradio client /generate   key events → annotated frames → Qwen (ZeroGPU) → script
-  └─ fetch POST /api/tts       script lines → Chatterbox or Orpheus (ZeroGPU) → WAV
-  └─ fetch POST /api/export    WAVs + video → ffmpeg mix → MP4 download
-```
-Session state (video path, tracks, motion data) lives in a server-side dict keyed by `session_id`. Nothing heavy goes back and forth to the client between steps.
-## Files
-| File | What it does |
-|------|-------------|
-| `app.py` | FastAPI routes, session management, UI assembly |
-| `Marquee.html` / `marquee.css` / `marquee.js` | The UI |
-| `commentary.py` | Qwen2.5-VL personas, prompt, JSON parse |
-| `tts.py` | Chatterbox + Orpheus generation, collision fix, WAV encoding |
-| `faces.py` | OpenVINO detect → cluster, frame annotation |
-| `events.py` | Motion-based key event selection |
-| `video.py` | Rotation-aware ffmpeg normalize to 720p |
-| `ov_models.py` | OpenVINO IR download + runtime wrappers |
-## Models
-- **Qwen2.5-VL-7B-Instruct** — commentary generation (ZeroGPU)
-- **Chatterbox 0.5B** — default TTS, MIT license, CPU inference
-- **Orpheus 3B** (`canopylabs/orpheus-3b-0.1-ft`) — optional TTS, more expressive, requires HF token + ZeroGPU
-- **face-detection-retail-0004** + **person-detection-retail-0013** — OpenVINO IR, CPU, Intel OMZ
-## Social Media Post
-- Youtube: https://www.youtube.com/@muflihma
-- Instagram: https://www.instagram.com/0xcure

 short_description: Turn any clip into a broadcast starring your friends
 tags:
   - build-small-hackathon
 ---
+# Marquee 🎙️ — *Everyone's a headliner.*
+Drop a clip of friends doing anything. Marquee recognizes who's in it, you give
+each person a stage name, pick a show style, and an AI commentator calls the
+action play-by-play, by name, in sync — as a broadcast you can play and export.
+## ⚙️ Running it on a Space (read this first)
+- **Hardware must be ZeroGPU.** The commentary model runs inside `@spaces.GPU`,
+  which only has a GPU on **Nvidia ZeroGPU** hardware. On a plain CPU Space the
+  7B VLM has no GPU and is effectively unusable. Set it in **Settings →
+  Hardware → ZeroGPU**.
+- **No secrets needed at runtime.** Everything downloads from public sources
+  (Qwen from the HF Hub, the face models from Intel's OMZ storage). Do **not**
+  commit any `HF_TOKEN`/`.env` — if you need one for `gradio deploy`, keep it
+  local and add it as a **Space secret**, never a file in the repo.
+- **Nothing to pre-download.** `download_models()` fetches the three tiny
+  OpenVINO IR files at first boot (~5 MB total). First boot also warms up Qwen.
+## How it's wired (the important part)
+The backend is a **`gradio.Server`** (a FastAPI subclass — Gradio 6). It gives us
+ZeroGPU + the gradio runtime while letting our own routes take priority. The
+custom UI is a **static HTML page** at `/`. The CPU-only scan is a plain
+`fetch()` route; the GPU commentary is an `@app.api()` endpoint called through
+the **Gradio JS client**, which is what wires it into the queue and lets ZeroGPU
+detect the `@spaces.GPU` function. No iframe, no SSR fighting us for `/`.
+```
+Static UI (Marquee.html + marquee.css + marquee.js)  ──►  served at "/"
+   │  fetch() for scan · Gradio JS client for generate
+   ▼
+FastAPI (app.py)
+   ├─ POST /api/scan      (file)                -> normalize 720p -> detect+cluster faces
+   │                                               -> session + roster (face crops as data URLs)
+   ├─ GET  /video/{sid}                         -> streams the normalized mp4
+   └─ @app.api /generate  (session, names, vibe)-> key events -> name-grounded frames
+                                                   -> Qwen2.5-VL (ZeroGPU) -> {t,text} script
+```
+Heavy per-session state (identities, motion, normalized video path) lives in a
+server-side `SESSIONS` dict keyed by the `session_id` the scan call returns, so
+the two stateless client calls never round-trip embeddings.
+Face recognition is used **only** to feed names to the VLM — boxes are never
+shown. The broadcast player reads the real normalized `<video>` and syncs the
+chyron + play-by-play rail to `video.currentTime`.
+## Files
+- `app.py` — FastAPI backend + the two API endpoints + UI assembly
+- `Marquee.html` / `marquee.css` / `marquee.js` — the custom UI (design + flow)
+- `video.py` — rotation-aware 720p normalize (one upright source of truth)
+- `faces.py` — OpenVINO detect → align → embed → cluster (CPU)
+- `events.py` — motion-based key events
+- `commentary.py` — Qwen2.5-VL personas (incl. Diva Hour) + strict JSON parse
+- `ov_models.py` — OpenVINO IR auto-download + thin runtime wrappers
+## Models (all open)
+- face-detection-retail-0004, landmarks-regression-retail-0009,
+  face-reidentification-retail-0095 (OpenVINO IR, CPU)
+- Qwen2.5-VL-7B-Instruct (ZeroGPU)
+## North star (next iteration)
+- TTS per line (hyped delivery) mixed under the clip's own audio.
+- Rendered MP4 export with captions (and voice) burned in.
+- Canvas hype FX on key moments (data's already there).
+## Local dev
 ```bash
 pip install -r requirements.txt
 python -c "from ov_models import download_models; download_models()"
+python app.py    # http://localhost:7860  (Qwen lazy-loads on first generate)
+```

app.py CHANGED Viewed

@@ -1,81 +1,57 @@
 import base64
 import io
-import logging
-import os
-import shutil
-import subprocess
-import sys
 import tempfile
-import time
 import uuid
 from pathlib import Path
-logging.basicConfig(
-    level=logging.INFO,
-    format="%(asctime)s %(levelname)s %(message)s",
-    datefmt="%H:%M:%S",
-)
-log = logging.getLogger(__name__)
-# ---------------------------------------------------------------------------
-# Install chatterbox-tts with --no-deps BEFORE any other import.
-# ---------------------------------------------------------------------------
-try:
-    import chatterbox  # noqa: F401
-except ImportError:
-    log.info("[boot] Installing chatterbox-tts --no-deps …")
-    subprocess.run(
-        [sys.executable, "-m", "pip", "install", "--no-deps", "--quiet", "chatterbox-tts"],
-        check=True,
-    )
-    log.info("[boot] chatterbox-tts installed.")
 from gradio import Server
-from fastapi import Request, BackgroundTasks
 from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
-from commentary import STYLES, VIBE_TO_STYLE, generate_commentary
 from events import events_to_frames, pick_key_events
-from faces import annotate_event_frame, frame_at, scan_video, write_names_to_jsonl
 from ov_models import download_models
-from tts import generate_script_audio
 from video import get_duration, normalize_video
-MAX_SECONDS = 60.0
-HERE        = Path(__file__).parent
-SESSIONS: dict[str, dict] = {}
 TIERS = ["HEADLINER", "RISING", "DIVA", "WILDCARD", "BREAKOUT", "CAMEO"]
 SUPPORTED_VIDEO = {".mp4", ".mov", ".webm", ".mkv", ".avi", ".m4v"}
-log.info("[boot] Downloading OpenVINO models if needed…")
 try:
     download_models()
-    log.info("[boot] OpenVINO models ready.")
 except Exception as e:
-    log.warning(f"[boot] OV model download failed: {e}")
 def _crop_b64(pil, size=160):
-    if pil is None:
-        return None
     img = pil.copy(); img.thumbnail((size, size))
     buf = io.BytesIO(); img.save(buf, format="PNG")
     return "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode()
 def _build_ui() -> str:
     doc = (HERE / "Marquee.html").read_text()
     css = (HERE / "marquee.css").read_text()
     js  = (HERE / "marquee.js").read_text()
-    doc = doc.replace('<link rel="stylesheet" href="marquee.css">', f"<style>{css}</style>")
-    doc = doc.replace('<script src="marquee.js"></script>', f"<script type='module'>{js}</script>")
-    return doc
 app = Server()
 _UI_HTML = _build_ui()
-log.info("[boot] UI built and ready.")
 @app.get("/", response_class=HTMLResponse)
@@ -85,56 +61,37 @@ async def root():
 @app.post("/api/scan")
 async def api_scan(request: Request):
-    t0 = time.time()
-    log.info("[scan] Request received")
     try:
-        form   = await request.form()
         upload = form.get("file")
         if upload is None:
             return JSONResponse({"ok": False, "error": "no file"}, status_code=400)
         suffix = Path(upload.filename).suffix.lower()
-        log.info(f"[scan] File: {upload.filename} ({suffix})")
         if suffix not in SUPPORTED_VIDEO:
             return JSONResponse({"ok": False,
                 "error": f"Unsupported format '{suffix}'. Supported: {', '.join(sorted(SUPPORTED_VIDEO))}"})
         tmp = tempfile.NamedTemporaryFile(delete=False, suffix=suffix)
-        data = await upload.read()
-        tmp.write(data); tmp.flush(); tmp.close()
-        log.info(f"[scan] Upload saved: {len(data)//1024}KB → {tmp.name}")
         dur = get_duration(tmp.name)
-        log.info(f"[scan] Duration: {dur:.1f}s")
         if dur > MAX_SECONDS + 1:
             return JSONResponse({"ok": False, "error": "Clip longer than 60 seconds"})
-        log.info("[scan] Normalising video (ffmpeg)…")
-        t1 = time.time()
         norm_path, w, h = normalize_video(tmp.name)
-        log.info(f"[scan] Normalised in {time.time()-t1:.1f}s → {w}x{h}")
-        log.info("[scan] Running person tracking scan…")
-        tracks, motion, meta, jsonl_path = scan_video(norm_path, MAX_SECONDS)
-        log.info(f"[scan] Tracking done — {len(tracks)} person(s) found")
         sid = uuid.uuid4().hex
-        SESSIONS[sid] = {
-            "norm":       norm_path,
-            "tracks":     tracks,
-            "jsonl_path": jsonl_path,
-            "motion":     motion,
-            "meta":       meta,
-        }
-        log.info(f"[scan] Session created: {sid}")
-        stars = [
-            {"idx": trk["id"], "tier": TIERS[i % len(TIERS)],
-             "crop": _crop_b64(trk["crop"])}
-            for i, trk in enumerate(tracks)
-        ]
-        log.info(f"[scan] Completed in {time.time()-t0:.1f}s total")
         return JSONResponse({"ok": True, "session_id": sid,
             "video_url": f"/video/{sid}",
             "duration": get_duration(norm_path),
@@ -142,259 +99,49 @@ async def api_scan(request: Request):
     except Exception as e:
         import traceback; traceback.print_exc()
-        log.error(f"[scan] FAILED: {e}")
         return JSONResponse({"ok": False, "error": str(e)}, status_code=500)
 @app.get("/video/{sid}")
 async def serve_video(sid: str):
-    log.info(f"[video] Serving video for session {sid}")
     sess = SESSIONS.get(sid)
     if not sess:
-        log.warning(f"[video] Session not found: {sid}")
         return JSONResponse({"error": "session not found"}, status_code=404)
     return FileResponse(sess["norm"], media_type="video/mp4",
                         headers={"Accept-Ranges": "bytes"})
-@app.post("/api/tts")
-async def api_tts(request: Request):
-    t0 = time.time()
-    log.info("[tts] Request received")
-    try:
-        body        = await request.json()
-        sid         = body.get("session_id", "")
-        vibe        = body.get("vibe", "football")
-        script      = body.get("script", [])
-        voice_model = body.get("voice_model", "chatterbox")
-        log.info(f"[tts] sid={sid} vibe={vibe} voice={voice_model} lines={len(script)}")
-        if not script:
-            return JSONResponse({"ok": False, "error": "empty script"}, status_code=400)
-        if sid and sid not in SESSIONS:
-            return JSONResponse({"ok": False, "error": "session not found"}, status_code=404)
-        log.info(f"[tts] Generating {len(script)} lines with {voice_model}…")
-        lines = generate_script_audio(script, vibe, voice_model=voice_model)
-        audio_count = sum(1 for l in lines if l.get("audio_b64"))
-        log.info(f"[tts] Done in {time.time()-t0:.1f}s — "
-                 f"{audio_count}/{len(lines)} lines have audio")
-        return JSONResponse({"ok": True, "lines": lines})
-    except Exception as e:
-        import traceback; traceback.print_exc()
-        log.error(f"[tts] FAILED: {e}")
-        return JSONResponse({"ok": False, "error": str(e)}, status_code=500)
-@app.post("/api/export")
-async def api_export(request: Request, background_tasks: BackgroundTasks):
-    """Burn video + TTS audio + soft subtitle captions into one MP4.
-    FIX: tmpdir is cleaned up via BackgroundTasks AFTER the response is
-    fully streamed — prevents the race condition where FileResponse tries
-    to read a file that Python GC already deleted.
-    """
-    import wave as _wave
-    t0 = time.time()
-    log.info("[export] Request received")
-    tmpdir = None
-    try:
-        body  = await request.json()
-        sid   = body.get("session_id", "")
-        vibe  = body.get("vibe", "")
-        lines = body.get("lines", [])
-        log.info(f"[export] sid={sid} vibe={vibe} lines={len(lines)}")
-        sess = SESSIONS.get(sid)
-        if not sess:
-            return JSONResponse({"ok": False, "error": "session not found"}, status_code=404)
-        if not lines:
-            return JSONResponse({"ok": False, "error": "no lines"}, status_code=400)
-        video_path = sess["norm"]
-        tmpdir     = tempfile.mkdtemp(prefix="mq_export_")
-        log.info(f"[export] Working dir: {tmpdir}")
-        # 1. Write TTS WAV files
-        log.info("[export] Writing TTS WAV files…")
-        audio_clips = []
-        for i, line in enumerate(lines):
-            b64 = line.get("audio_b64")
-            if not b64:
-                continue
-            wav_bytes = base64.b64decode(b64)
-            wav_path  = os.path.join(tmpdir, f"tts_{i:03d}.wav")
-            with open(wav_path, "wb") as f:
-                f.write(wav_bytes)
-            with _wave.open(io.BytesIO(wav_bytes)) as wf:
-                dur = wf.getnframes() / wf.getframerate()
-            audio_clips.append({"path": wav_path, "t": float(line["t"]), "duration": dur})
-        log.info(f"[export] {len(audio_clips)} audio clips written")
-        # 2. Build SRT subtitle file
-        log.info("[export] Building subtitle file…")
-        total_dur  = sess["meta"]["n_frames"] / sess["meta"]["fps"]
-        vibe_label = {
-            "football": "COCO", "diva": "COCO", "wildlife": "COCO",
-            "boxing": "COCO", "masterchef": "COCO",
-        }.get(vibe, "COCO")
-        def _srt_time(s):
-            h=int(s//3600); m=int((s%3600)//60); sec=s%60
-            ms=int((sec%1)*1000); sec=int(sec)
-            return f"{h:02d}:{m:02d}:{sec:02d},{ms:03d}"
-        srt_rows = []
-        for i, line in enumerate(lines):
-            t_start = float(line["t"])
-            t_end   = float(lines[i+1]["t"]) if i+1<len(lines) else min(t_start+4, total_dur)
-            srt_rows += [
-                str(i+1),
-                f"{_srt_time(t_start)} --> {_srt_time(t_end)}",
-                f"{vibe_label}  {line['text']}",
-                "",
-            ]
-        srt_path = os.path.join(tmpdir, "subs.srt")
-        with open(srt_path, "w", encoding="utf-8") as f:
-            f.write("\n".join(srt_rows))
-        log.info(f"[export] SRT written: {len(lines)} cues")
-        # 3. Build ffmpeg command
-        out_path = os.path.join(tmpdir, "broadcast.mp4")
-        n        = len(audio_clips)
-        cmd = ["ffmpeg", "-y", "-i", video_path, "-i", srt_path]
-        for clip in audio_clips:
-            cmd += ["-i", clip["path"]]
-        if n > 0:
-            parts, delayed = [], []
-            for idx, clip in enumerate(audio_clips):
-                delay_ms = int(clip["t"] * 1000)
-                lbl = f"d{idx}"
-                cmd_idx = idx + 2   # 0=video, 1=srt, 2..=wavs
-                parts.append(f"[{cmd_idx}:a]adelay={delay_ms}|{delay_ms},apad[{lbl}]")
-                delayed.append(f"[{lbl}]")
-            parts.append(f"{''.join(delayed)}amix=inputs={n}:normalize=0[commentary]")
-            parts.append("[0:a]volume=0.25[orig];[orig][commentary]amix=inputs=2:normalize=0[mixed]")
-            cmd += [
-                "-filter_complex", ";".join(parts),
-                "-map", "0:v",
-                "-map", "[mixed]",
-                "-map", "1:s",
-                "-c:v", "copy",         # stream-copy video — no re-encode
-                "-c:a", "aac", "-b:a", "128k",
-                "-c:s", "mov_text",
-                "-movflags", "+faststart",
-                out_path,
-            ]
-        else:
-            cmd += [
-                "-map", "0:v", "-map", "0:a", "-map", "1:s",
-                "-c:v", "copy", "-c:a", "copy",
-                "-c:s", "mov_text",
-                "-movflags", "+faststart",
-                out_path,
-            ]
-        log.info(f"[export] Running ffmpeg (n_audio={n})…")
-        log.info(f"[export] CMD: {' '.join(cmd)}")
-        t1  = time.time()
-        res = subprocess.run(cmd, capture_output=True)
-        log.info(f"[export] ffmpeg finished in {time.time()-t1:.1f}s, "
-                 f"returncode={res.returncode}")
-        if res.returncode != 0:
-            err = res.stderr.decode(errors="replace")[-1200:]
-            log.error(f"[export] ffmpeg STDERR:\n{err}")
-            return JSONResponse({"ok": False, "error": f"ffmpeg: {err}"}, status_code=500)
-        out_size_mb = os.path.getsize(out_path) / 1024 / 1024
-        log.info(f"[export] Output: {out_path} ({out_size_mb:.1f}MB)")
-        log.info(f"[export] Total time: {time.time()-t0:.1f}s")
-        vibe_slug = vibe or "broadcast"
-        fname     = f"marquee_{vibe_slug}.mp4"
-        # KEY FIX: schedule tmpdir cleanup as a background task so it runs
-        # AFTER the file has been fully streamed to the client.
-        # Previously tmpdir could be cleaned up mid-stream causing download to hang.
-        def _cleanup(d: str):
-            try:
-                shutil.rmtree(d, ignore_errors=True)
-                log.info(f"[export] Cleaned up tmpdir: {d}")
-            except Exception as ex:
-                log.warning(f"[export] Cleanup failed: {ex}")
-        background_tasks.add_task(_cleanup, tmpdir)
-        return FileResponse(
-            out_path,
-            media_type="video/mp4",
-            filename=fname,
-            headers={"Content-Disposition": f'attachment; filename="{fname}"'},
-        )
-    except Exception as e:
-        import traceback; traceback.print_exc()
-        log.error(f"[export] FAILED: {e}")
-        if tmpdir:
-            shutil.rmtree(tmpdir, ignore_errors=True)
-        return JSONResponse({"ok": False, "error": str(e)}, status_code=500)
 @app.api(name="generate")
 def generate(session_id: str, names: list, vibe: str) -> dict:
-    t0 = time.time()
-    log.info(f"[generate] session={session_id} vibe={vibe} names={names}")
     sess = SESSIONS.get(session_id)
     if not sess:
-        log.error(f"[generate] Session not found: {session_id}")
-        return {"ok": False, "error": "Session expired — re-cast"}
-    tracks     = sess.get("tracks", [])
-    id_to_name = {}
-    for i, trk in enumerate(tracks):
-        raw = str(names[i]).strip() if i < len(names) else ""
-        if raw:
-            id_to_name[trk["id"]] = raw
-    log.info(f"[generate] Named tracks: {id_to_name}")
-    if id_to_name:
-        write_names_to_jsonl(sess["jsonl_path"], id_to_name)
-    style       = VIBE_TO_STYLE.get(vibe, next(iter(STYLES)))
     fps         = sess["meta"]["fps"]
     event_times = pick_key_events(sess["motion"], fps)
     event_idxs  = events_to_frames(event_times, fps)
-    log.info(f"[generate] Key events: {event_times}")
-    log.info("[generate] Annotating keyframes…")
     frames = []
     for ts, fidx in zip(event_times, event_idxs):
         bgr = frame_at(sess["norm"], fidx)
         if bgr is None:
-            log.warning(f"[generate] frame_at({fidx}) returned None, skipping")
             continue
-        frames.append((ts, annotate_event_frame(bgr, sess["jsonl_path"], ts)))
-    log.info(f"[generate] {len(frames)} annotated frames ready for VLM")
-    log.info(f"[generate] Calling Qwen VLM (style={style})…")
-    t1     = time.time()
-    roster = list(id_to_name.values())
-    script = generate_commentary(frames, roster, style, vibe=vibe)
-    log.info(f"[generate] VLM done in {time.time()-t1:.1f}s — {len(script)} lines")
-    log.info(f"[generate] Total: {time.time()-t0:.1f}s")
     return {"ok": True,
-            "script": [{"t": round(float(l["time"]),2), "text": l["text"]}
                        for l in script]}
 app.launch(ssr_mode=False, show_error=True)

 import base64
 import io
 import tempfile
 import uuid
 from pathlib import Path
 from gradio import Server
+from fastapi import Request
 from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
+from commentary import STYLES, generate_commentary          # eager-loads Qwen on import
 from events import events_to_frames, pick_key_events
+from faces import annotate_event_frame, cluster_faces, frame_at, scan_video
 from ov_models import download_models
 from video import get_duration, normalize_video
+MAX_SECONDS = 60.0          # keep the demo snappy; matches the UI copy
+HERE = Path(__file__).parent
+SESSIONS = {}
 TIERS = ["HEADLINER", "RISING", "DIVA", "WILDCARD", "BREAKOUT", "CAMEO"]
+VIBE_TO_STYLE = {
+    "football": "Football (Premier League hype)",
+    "diva":     "Diva Hour",
+    "wildlife": "Nature documentary",
+    "boxing":   "Boxing announcer",
+}
 SUPPORTED_VIDEO = {".mp4", ".mov", ".webm", ".mkv", ".avi", ".m4v"}
 try:
     download_models()
 except Exception as e:
+    print(f"[warn] OV model download failed at boot: {e}")
 def _crop_b64(pil, size=160):
     img = pil.copy(); img.thumbnail((size, size))
     buf = io.BytesIO(); img.save(buf, format="PNG")
     return "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode()
 def _build_ui() -> str:
+    """Inline CSS + JS into Marquee.html so the page is fully self-contained."""
     doc = (HERE / "Marquee.html").read_text()
     css = (HERE / "marquee.css").read_text()
     js  = (HERE / "marquee.js").read_text()
+    doc = doc.replace('<link rel="stylesheet" href="marquee.css">',
+                      f"<style>{css}</style>")
+    doc = doc.replace('<script src="marquee.js"></script>',
+                      f"<script type='module'>{js}</script>")
+    return doc
 app = Server()
 _UI_HTML = _build_ui()
 @app.get("/", response_class=HTMLResponse)
 @app.post("/api/scan")
 async def api_scan(request: Request):
+    """CPU-only (OpenVINO + ffmpeg). Plain route + multipart upload via fetch."""
     try:
+        form = await request.form()
         upload = form.get("file")
         if upload is None:
             return JSONResponse({"ok": False, "error": "no file"}, status_code=400)
         suffix = Path(upload.filename).suffix.lower()
         if suffix not in SUPPORTED_VIDEO:
             return JSONResponse({"ok": False,
                 "error": f"Unsupported format '{suffix}'. Supported: {', '.join(sorted(SUPPORTED_VIDEO))}"})
         tmp = tempfile.NamedTemporaryFile(delete=False, suffix=suffix)
+        tmp.write(await upload.read()); tmp.flush(); tmp.close()
         dur = get_duration(tmp.name)
         if dur > MAX_SECONDS + 1:
             return JSONResponse({"ok": False, "error": "Clip longer than 60 seconds"})
         norm_path, w, h = normalize_video(tmp.name)
+        embeds, crops, motion, meta = scan_video(norm_path, MAX_SECONDS)
+        identities = cluster_faces(embeds, crops)
         sid = uuid.uuid4().hex
+        SESSIONS[sid] = {"norm": norm_path, "identities": identities,
+                         "motion": motion, "meta": meta}
+        stars = [{"idx": i, "tier": TIERS[i % len(TIERS)],
+                  "crop": _crop_b64(idn["crop"])}
+                 for i, idn in enumerate(identities)]
         return JSONResponse({"ok": True, "session_id": sid,
             "video_url": f"/video/{sid}",
             "duration": get_duration(norm_path),
     except Exception as e:
         import traceback; traceback.print_exc()
         return JSONResponse({"ok": False, "error": str(e)}, status_code=500)
 @app.get("/video/{sid}")
 async def serve_video(sid: str):
+    """Stream the normalized video file."""
     sess = SESSIONS.get(sid)
     if not sess:
         return JSONResponse({"error": "session not found"}, status_code=404)
     return FileResponse(sess["norm"], media_type="video/mp4",
                         headers={"Accept-Ranges": "bytes"})
 @app.api(name="generate")
 def generate(session_id: str, names: list, vibe: str) -> dict:
+    """GPU path. Exposed via @app.api() so ZeroGPU detects the @spaces.GPU
+    function and gradio queues the calls. Called from the frontend through the
+    Gradio JS client.
+    """
     sess = SESSIONS.get(session_id)
     if not sess:
+        return {"ok": False, "error": "Session expired -- re-cast"}
+    name_map = {i: str(n).strip() for i, n in enumerate(names) if str(n).strip()}
+    style    = VIBE_TO_STYLE.get(vibe, next(iter(STYLES)))
     fps         = sess["meta"]["fps"]
     event_times = pick_key_events(sess["motion"], fps)
     event_idxs  = events_to_frames(event_times, fps)
     frames = []
     for ts, fidx in zip(event_times, event_idxs):
         bgr = frame_at(sess["norm"], fidx)
         if bgr is None:
             continue
+        frames.append((ts, annotate_event_frame(bgr, sess["identities"], name_map)))
+    script = generate_commentary(frames, list(name_map.values()), style)
     return {"ok": True,
+            "script": [{"t": round(float(l["time"]), 2), "text": l["text"]}
                        for l in script]}
+# Custom "/" already takes priority over Gradio's default page; no gradio UI
+# components, so SSR is pointless -> off. On Spaces, launch() binds 0.0.0.0:7860.
 app.launch(ssr_mode=False, show_error=True)

commentary.py CHANGED Viewed

@@ -6,33 +6,23 @@ import torch
 from transformers import AutoProcessor, Qwen2_5_VLForConditionalGeneration
 MODEL_ID = "Qwen/Qwen2.5-VL-7B-Instruct"
-DEVICE   = "cuda" if torch.cuda.is_available() else "cpu"
 STYLES = {
     "Football (Premier League hype)":
         "an over-the-top English football commentator, dramatic and poetic",
     "MasterChef judge":
-        "a brutally dramatic cooking-show judge who treats every moment like a "
-        "high-stakes elimination round — stern, intense, occasionally impressed",
     "Nature documentary":
         "a hushed, awestruck nature narrator observing these humans like rare "
-        "wildlife in their natural habitat",
     "Boxing announcer":
         "a booming boxing announcer treating every move as championship-defining",
     "Diva Hour":
         "a fabulous, shady red-carpet diva commentator narrating like everyone "
         "is a celebrity arriving at a star-studded gala, full of glamour and sass",
 }
-# Vibe → frontend key mapping (used by app.py)
-VIBE_TO_STYLE = {
-    "football":  "Football (Premier League hype)",
-    "masterchef":"MasterChef judge",
-    "wildlife":  "Nature documentary",
-    "boxing":    "Boxing announcer",
-    "diva":      "Diva Hour",
-}
 SYSTEM_PROMPT = """You are {persona}, calling live play-by-play over a short clip.
 You'll receive {n_frames} keyframes in time order, each tagged "t=<seconds>".
@@ -40,41 +30,27 @@ Some people have their NAME burned in a box above their head — use those exact
 names. Refer to anyone unnamed by what you see ("the one in the red shirt").
 People we already know in this clip: {roster}.
-NARRATIVE ARC — mandatory:
-  Frame 1-2  : establish the scene and mood (who, where, what's at stake).
-  Middle     : build tension — notice details, call the action, raise stakes.
-  Final frame: pay off the arc with a punchy closing line.
-Each line must feel like it follows the one before. No generic filler.
 Write EXACTLY one line per keyframe — {n_frames} lines, in the same order.
-Voice rules:
-- React to what is ACTUALLY in each frame — never recycle a phrase.
-- Vary rhythm: short punchy lines for action, longer for atmosphere.
-- Drop names only when it lands — not in every line.
 - Stay fully in character as {persona} from first line to last.
-- CAPS and exclamation marks only for the BIG beats — overuse kills the punch.
-- Keep every line under {max_words} words — it must be spoken before the next beat.
 Output rules (strict):
 - Output ONLY a JSON array. No markdown, no text outside it.
 - Schema: [{{"time": <float seconds>, "text": "<one line>"}}]
-- Use the EXACT "t=" value of each keyframe as its "time"."""
-# Max words per line — tuned per vibe so audio fits in the gap
-MAX_WORDS = {
-    "football":   14,
-    "masterchef": 13,
-    "wildlife":   15,
-    "boxing":     12,
-    "diva":       14,
-}
-_DEFAULT_MAX_WORDS = 14
-# Minimum gap (seconds) between events — events closer than this get merged
-MIN_GAP_SEC = 2.5
 print(f"[info] Loading Qwen2.5-VL-7B (first boot: download ~16GB + load) -> {DEVICE}")
 _model = Qwen2_5_VLForConditionalGeneration.from_pretrained(
     MODEL_ID, torch_dtype=torch.bfloat16)
@@ -83,94 +59,49 @@ _processor = AutoProcessor.from_pretrained(MODEL_ID)
 print("[info] Qwen ready.")
-def _merge_close_events(event_frames, min_gap=MIN_GAP_SEC):
-    """Merge keyframes that are too close together.
-    When two events are < min_gap seconds apart the commentary lines would
-    collide in audio. We keep the one with higher motion score (second of
-    the pair, which usually shows the peak) and drop the earlier one.
-    Returns a filtered list of (timestamp, image) tuples.
-    """
-    if len(event_frames) <= 1:
-        return event_frames
-    merged = [event_frames[0]]
-    for ts, img in event_frames[1:]:
-        prev_ts, _ = merged[-1]
-        if ts - prev_ts < min_gap:
-            # keep the later frame (usually the action peak)
-            merged[-1] = (ts, img)
-        else:
-            merged.append((ts, img))
-    return merged
 @spaces.GPU(duration=120)
-def generate_commentary(event_frames, roster, style_key, vibe=None):
-    """event_frames: [(timestamp_sec, PIL.Image), ...] (annotated key events)
-       roster:       list of names the user assigned
-       style_key:    key into STYLES dict
-       vibe:         optional vibe slug for per-vibe word limit
-    Returns [{"time": float, "text": str}, ...] sorted by time.
     """
     from qwen_vl_utils import process_vision_info
-    # Merge events that are too close — prevents audio collision at gen time
-    event_frames = _merge_close_events(event_frames)
-    n          = len(event_frames)
-    max_words  = MAX_WORDS.get(vibe or "", _DEFAULT_MAX_WORDS)
-    content    = []
     for i, (ts, img) in enumerate(event_frames):
-        content.append({"type": "text",
-                        "text": f"Keyframe {i+1}/{n} — t={ts:.2f}s:"})
         content.append({"type": "image", "image": img})
     content.append({"type": "text",
                     "text": f"Now write the {n}-line commentary JSON."})
-    persona    = STYLES.get(style_key, list(STYLES.values())[0])
     roster_str = ", ".join(roster) if roster else "nobody named yet"
     messages = [
         {"role": "system",
-         "content": SYSTEM_PROMPT.format(
-             persona=persona, roster=roster_str,
-             n_frames=n, max_words=max_words)},
         {"role": "user", "content": content},
     ]
-    text          = _processor.apply_chat_template(messages, tokenize=False,
-                                                   add_generation_prompt=True)
     image_inputs, _ = process_vision_info(messages)
-    inputs        = _processor(text=[text], images=image_inputs,
-                               return_tensors="pt").to(_model.device)
-    out = _model.generate(**inputs, max_new_tokens=600, do_sample=True,
                           temperature=0.8, top_p=0.95)
     new = out[:, inputs.input_ids.shape[1]:]
     raw = _processor.batch_decode(new, skip_special_tokens=True)[0]
     valid_times = [round(ts, 2) for ts, _ in event_frames]
-    return _parse(raw, valid_times, max_words)
-def _trim_to_words(text: str, max_words: int) -> str:
-    words = text.split()
-    if len(words) <= max_words:
-        return text
-    # trim at sentence boundary if possible
-    trimmed = " ".join(words[:max_words])
-    for punct in (".", "!", "?", "—", ","):
-        idx = trimmed.rfind(punct)
-        if idx > len(trimmed) // 2:
-            return trimmed[:idx + 1]
-    return trimmed + "…"
-def _parse(raw: str, valid_times: list[float], max_words: int = 14) -> list[dict]:
     raw = re.sub(r"```(?:json)?", "", raw).strip()
-    m   = re.search(r"\[.*\]", raw, re.DOTALL)
     try:
         items = json.loads(m.group(0) if m else raw)
     except (json.JSONDecodeError, AttributeError):
@@ -180,11 +111,10 @@ def _parse(raw: str, valid_times: list[float], max_words: int = 14) -> list[dict
     for i, it in enumerate(items):
         try:
             txt = str(it["text"]).strip()
-            t   = float(it.get("time", valid_times[min(i, len(valid_times)-1)]))
         except (KeyError, TypeError, ValueError):
             continue
-        t   = min(valid_times, key=lambda v: abs(v - t)) if valid_times else t
-        txt = _trim_to_words(txt, max_words)
         if txt:
             script.append({"time": t, "text": txt})

 from transformers import AutoProcessor, Qwen2_5_VLForConditionalGeneration
 MODEL_ID = "Qwen/Qwen2.5-VL-7B-Instruct"
+DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
 STYLES = {
     "Football (Premier League hype)":
         "an over-the-top English football commentator, dramatic and poetic",
     "MasterChef judge":
+        "a brutally dramatic cooking-show commentator treating everything like "
+        "a high-stakes elimination",
     "Nature documentary":
         "a hushed, awestruck nature narrator observing these humans like rare "
+        "wildlife",
     "Boxing announcer":
         "a booming boxing announcer treating every move as championship-defining",
     "Diva Hour":
         "a fabulous, shady red-carpet diva commentator narrating like everyone "
         "is a celebrity arriving at a star-studded gala, full of glamour and sass",
 }
 SYSTEM_PROMPT = """You are {persona}, calling live play-by-play over a short clip.
 You'll receive {n_frames} keyframes in time order, each tagged "t=<seconds>".
 names. Refer to anyone unnamed by what you see ("the one in the red shirt").
 People we already know in this clip: {roster}.
 Write EXACTLY one line per keyframe — {n_frames} lines, in the same order.
+Make it land:
+- React to what is ACTUALLY in each frame (a pose, a movement, who's present) —
+  never generic filler that could fit any clip.
+- Build an arc across the lines: set the scene, let the tension rise, pay off
+  the final beat. Each line should feel like it follows the last.
+- Vary your openings and rhythm. Never reuse a phrase or a sentence shape twice.
+- Drop names naturally, only when it hits — not in every single line.
 - Stay fully in character as {persona} from first line to last.
+- Save CAPS and exclamation marks for the BIG beats only; overusing them kills
+  the punch (the voice reads punctuation as emotion).
 Output rules (strict):
 - Output ONLY a JSON array. No markdown, no text outside it.
 - Schema: [{{"time": <float seconds>, "text": "<one line>"}}]
+- Use the EXACT "t=" value of each keyframe as its "time".
+- Keep every line under 16 words — it must be spoken before the next beat."""
+# -- eager module-level load (ZeroGPU pattern) --------------------------------
 print(f"[info] Loading Qwen2.5-VL-7B (first boot: download ~16GB + load) -> {DEVICE}")
 _model = Qwen2_5_VLForConditionalGeneration.from_pretrained(
     MODEL_ID, torch_dtype=torch.bfloat16)
 print("[info] Qwen ready.")
 @spaces.GPU(duration=120)
+def generate_commentary(event_frames, roster, style_key):
+    """event_frames: [(timestamp_sec, PIL.Image), ...] (annotated, key events)
+       roster: list of names the user assigned
+       -> [{"time": float, "text": str}, ...] aligned to the event times.
     """
     from qwen_vl_utils import process_vision_info
+    n = len(event_frames)
+    content = []
     for i, (ts, img) in enumerate(event_frames):
+        content.append({"type": "text", "text": f"Keyframe {i+1}/{n} — t={ts:.2f}s:"})
         content.append({"type": "image", "image": img})
     content.append({"type": "text",
                     "text": f"Now write the {n}-line commentary JSON."})
+    persona = STYLES.get(style_key, list(STYLES.values())[0])
     roster_str = ", ".join(roster) if roster else "nobody named yet"
     messages = [
         {"role": "system",
+         "content": SYSTEM_PROMPT.format(persona=persona, roster=roster_str,
+                                         n_frames=n)},
         {"role": "user", "content": content},
     ]
+    text = _processor.apply_chat_template(messages, tokenize=False,
+                                          add_generation_prompt=True)
     image_inputs, _ = process_vision_info(messages)
+    inputs = _processor(text=[text], images=image_inputs,
+                        return_tensors="pt").to(_model.device)
+    out = _model.generate(**inputs, max_new_tokens=500, do_sample=True,
                           temperature=0.8, top_p=0.95)
     new = out[:, inputs.input_ids.shape[1]:]
     raw = _processor.batch_decode(new, skip_special_tokens=True)[0]
     valid_times = [round(ts, 2) for ts, _ in event_frames]
+    return _parse(raw, valid_times)
+def _parse(raw: str, valid_times: list[float]) -> list[dict]:
     raw = re.sub(r"```(?:json)?", "", raw).strip()
+    m = re.search(r"\[.*\]", raw, re.DOTALL)
     try:
         items = json.loads(m.group(0) if m else raw)
     except (json.JSONDecodeError, AttributeError):
     for i, it in enumerate(items):
         try:
             txt = str(it["text"]).strip()
+            t = float(it.get("time", valid_times[min(i, len(valid_times) - 1)]))
         except (KeyError, TypeError, ValueError):
             continue
+        t = min(valid_times, key=lambda v: abs(v - t)) if valid_times else t
         if txt:
             script.append({"time": t, "text": txt})

faces.py CHANGED Viewed

@@ -1,334 +1,168 @@
-"""faces.py — Person tracking + face cropping for Marquee.
-Performance fixes vs previous version:
-  - Face detection runs ONCE per sampled frame (not once per person box)
-  - Track lookup uses dict instead of linear scan — O(1) vs O(n)
-  - Sightings stored only in JSONL, not accumulated in memory per track
-  - Logging added throughout for visibility
-"""
-import json
-import logging
-import time
-from pathlib import Path
 import cv2
 import numpy as np
 from PIL import Image
 from ov_models import OVModel
-log = logging.getLogger(__name__)
-PERSON_CONF   = 0.50
-FACE_CONF     = 0.55
-SAMPLE_FPS    = 2.0
-IOU_THRESHOLD = 0.35
-MAX_MISS      = 4
-_person_det = None
-_face_det   = None
 def _load():
-    global _person_det, _face_det
-    if _person_det is None:
-        log.info("[faces] Loading OpenVINO models (person + face detection)…")
-        t0 = time.time()
-        _person_det = OVModel("person-detection-retail-0013")
-        _face_det   = OVModel("face-detection-retail-0004")
-        log.info(f"[faces] Models loaded in {time.time()-t0:.1f}s")
-    return _person_det, _face_det
-def _detect_persons(frame_bgr, det) -> list[list[int]]:
     h, w = frame_bgr.shape[:2]
-    out  = det.infer(frame_bgr).reshape(-1, 7)
     boxes = []
     for _, _, conf, x1, y1, x2, y2 in out:
-        if conf < PERSON_CONF:
             continue
-        boxes.append([max(0,int(x1*w)), max(0,int(y1*h)),
-                      min(w,int(x2*w)), min(h,int(y2*h))])
     return boxes
-def _detect_faces_once(frame_bgr, fdet) -> list[list[int]]:
-    """Run face detection ONCE per frame — reuse results for all person boxes."""
-    h, w = frame_bgr.shape[:2]
-    out  = fdet.infer(frame_bgr).reshape(-1, 7)
-    boxes = []
-    for _, _, conf, x1, y1, x2, y2 in out:
-        if conf < FACE_CONF:
-            continue
-        boxes.append([max(0,int(x1*w)), max(0,int(y1*h)),
-                      min(w,int(x2*w)), min(h,int(y2*h))])
-    return boxes
-def _best_face_for_person(person_box, all_faces) -> list[int] | None:
-    """Match a person box to the face with highest IoU from the pre-detected list."""
-    px1, py1, px2, py2 = person_box
-    best_iou, best_box = 0.0, None
-    for fx1, fy1, fx2, fy2 in all_faces:
-        ix1=max(px1,fx1); iy1=max(py1,fy1)
-        ix2=min(px2,fx2); iy2=min(py2,fy2)
-        inter = max(0,ix2-ix1)*max(0,iy2-iy1)
-        if inter == 0:
-            continue
-        union = (px2-px1)*(py2-py1) + (fx2-fx1)*(fy2-fy1) - inter
-        iou   = inter / (union + 1e-6)
-        if iou > best_iou:
-            best_iou, best_box = iou, [fx1,fy1,fx2,fy2]
-    return best_box
-def _iou(a, b) -> float:
-    ax1,ay1,ax2,ay2 = a
-    bx1,by1,bx2,by2 = b
-    ix1=max(ax1,bx1); iy1=max(ay1,by1)
-    ix2=min(ax2,bx2); iy2=min(ay2,by2)
-    inter = max(0,ix2-ix1)*max(0,iy2-iy1)
-    if inter == 0: return 0.0
-    return inter/((ax2-ax1)*(ay2-ay1)+(bx2-bx1)*(by2-by1)-inter+1e-6)
-class _Track:
-    _next_id = 0
-    def __init__(self, box):
-        self.id         = _Track._next_id; _Track._next_id += 1
-        self.box        = box
-        self.miss       = 0
-        self.best_crop: Image.Image | None = None
-        self.best_area  = 0
-        self.count      = 0
-    def update(self, box, crop: Image.Image | None):
-        self.box   = box
-        self.miss  = 0
-        self.count += 1
-        if crop is not None:
-            area = crop.size[0] * crop.size[1]
-            if area > self.best_area:
-                self.best_crop = crop
-                self.best_area = area
-class _IoUTracker:
-    def __init__(self):
-        self.tracks: list[_Track] = []
-        self._id_map: dict[int, _Track] = {}  # O(1) lookup by track id
-    def step(self, boxes, crops) -> list[tuple[int, list[int], _Track]]:
-        matched_t = set()
-        matched_d = set()
-        pairs = []
-        for di, dbox in enumerate(boxes):
-            best_iou, best_ti = 0.0, -1
-            for ti, t in enumerate(self.tracks):
-                iou = _iou(t.box, dbox)
-                if iou > best_iou:
-                    best_iou, best_ti = iou, ti
-            if best_iou >= IOU_THRESHOLD and best_ti not in matched_t:
-                pairs.append((best_ti, di))
-                matched_t.add(best_ti); matched_d.add(di)
-        for ti, di in pairs:
-            self.tracks[ti].update(boxes[di], crops[di])
-        for ti, t in enumerate(self.tracks):
-            if ti not in matched_t:
-                t.miss += 1
-        for di, (dbox, crop) in enumerate(zip(boxes, crops)):
-            if di not in matched_d:
-                t = _Track(dbox); t.update(dbox, crop)
-                self.tracks.append(t)
-                self._id_map[t.id] = t
-        self.tracks = [t for t in self.tracks if t.miss <= MAX_MISS]
-        # keep id_map in sync
-        alive = {t.id for t in self.tracks}
-        self._id_map = {k: v for k, v in self._id_map.items() if k in alive}
-        return [(t.id, t.box, t) for t in self.tracks if t.miss == 0]
-    def get_by_id(self, tid: int) -> "_Track | None":
-        return self._id_map.get(tid)
 def scan_video(video_path: str, max_seconds: float = 600.0):
-    """Person tracking scan with progress logging.
-    Returns:
-      tracks:     [{id, crop (PIL), sightings: [{t, bbox}]}]  — strong tracks only
-      motion:     {frame_idx: float}
-      meta:       {"fps", "n_frames"}
-      jsonl_path: str
     """
-    t_start = time.time()
-    log.info(f"[scan] Starting scan: {video_path}")
-    pdet, fdet = _load()
-    _Track._next_id = 0
-    cap    = cv2.VideoCapture(video_path)
-    fps    = cap.get(cv2.CAP_PROP_FPS) or 30.0
-    total  = int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) or 0
     stride = max(1, int(round(fps / SAMPLE_FPS)))
-    log.info(f"[scan] Video: {total} frames @ {fps:.1f}fps, "
-             f"sampling every {stride} frames ({SAMPLE_FPS}fps)")
-    tracker     = _IoUTracker()
-    all_tracks: dict[int, dict] = {}
-    motion: dict[int, float]    = {}
-    prev_small  = None
-    idx         = 0
-    sampled     = 0
-    persons_seen = 0
     while True:
         ok, frame = cap.read()
         if not ok or idx / fps > max_seconds:
             break
         if idx % stride == 0:
-            t_sec = round(idx / fps, 3)
-            sampled += 1
-            # motion
-            small = cv2.cvtColor(cv2.resize(frame,(160,90)), cv2.COLOR_BGR2GRAY)
             if prev_small is not None:
                 motion[idx] = float(np.mean(cv2.absdiff(small, prev_small)))
             prev_small = small
-            # detect persons + faces (ONE face inference per frame, not per person)
-            p_boxes = _detect_persons(frame, pdet)
-            f_boxes = _detect_faces_once(frame, fdet) if p_boxes else []
-            persons_seen += len(p_boxes)
-            # build face crops per person
-            crops = []
-            for pb in p_boxes:
-                fb = _best_face_for_person(pb, f_boxes)
-                if fb is not None:
-                    fx1,fy1,fx2,fy2 = fb
-                    face_img = Image.fromarray(
-                        cv2.cvtColor(frame[fy1:fy2,fx1:fx2], cv2.COLOR_BGR2RGB))
-                else:
-                    px1,py1,px2,py2 = pb
-                    fh = max(1,(py2-py1)//3)
-                    face_img = Image.fromarray(
-                        cv2.cvtColor(frame[py1:py1+fh,px1:px2], cv2.COLOR_BGR2RGB))
-                crops.append(face_img)
-            # track
-            active = tracker.step(p_boxes, crops)
-            for tid, bbox, trk in active:
-                if tid not in all_tracks:
-                    all_tracks[tid] = {"id": tid, "crop": None,
-                                       "sightings": [], "count": 0}
-                entry = all_tracks[tid]
-                entry["count"] += 1
-                entry["sightings"].append({"t": t_sec, "bbox": bbox})
-                if trk.best_crop is not None:
-                    area = trk.best_crop.size[0] * trk.best_crop.size[1]
-                    if entry["crop"] is None or area > entry.get("_area", 0):
-                        entry["crop"]  = trk.best_crop
-                        entry["_area"] = area
-            # progress log every ~5 seconds of video
-            if sampled % max(1, int(5 * SAMPLE_FPS)) == 0:
-                pct = int(100 * idx / max(total, 1))
-                log.info(f"[scan] {pct}% — t={t_sec:.1f}s, "
-                         f"active tracks={len(tracker.tracks)}, "
-                         f"persons this frame={len(p_boxes)}")
         idx += 1
     cap.release()
-    elapsed = time.time() - t_start
-    strong = {tid: v for tid, v in all_tracks.items() if v["count"] >= 2}
-    if not strong:
-        strong = all_tracks
-    log.info(f"[scan] Done in {elapsed:.1f}s — "
-             f"sampled {sampled} frames, "
-             f"total tracks={len(all_tracks)}, "
-             f"strong tracks={len(strong)}, "
-             f"total person detections={persons_seen}")
-    # write JSONL
-    jsonl_path = str(Path(video_path).with_suffix(".tracks.jsonl"))
-    rows_written = 0
-    with open(jsonl_path, "w") as f:
-        for tid, entry in strong.items():
-            for sight in entry["sightings"]:
-                f.write(json.dumps({
-                    "track_id": tid,
-                    "t": sight["t"],
-                    "bbox": sight["bbox"],
-                    "name": "",
-                }) + "\n")
-                rows_written += 1
-    log.info(f"[scan] JSONL written: {jsonl_path} ({rows_written} rows)")
-    tracks_list = [
-        {"id": v["id"], "crop": v["crop"], "sightings": v["sightings"]}
-        for v in strong.values()
-    ]
-    return tracks_list, motion, {"fps": fps, "n_frames": idx}, jsonl_path
-def write_names_to_jsonl(jsonl_path: str, id_to_name: dict[int, str]):
-    log.info(f"[faces] Writing names to JSONL: {id_to_name}")
-    rows = []
-    with open(jsonl_path) as f:
-        for line in f:
-            row = json.loads(line)
-            tid = row["track_id"]
-            if tid in id_to_name:
-                row["name"] = id_to_name[tid]
-            rows.append(row)
-    with open(jsonl_path, "w") as f:
-        for row in rows:
-            f.write(json.dumps(row) + "\n")
-    log.info(f"[faces] Names written for {len(id_to_name)} tracks")
-def annotate_event_frame(frame_bgr, jsonl_path: str, t_sec: float,
-                         tol: float = 1.5) -> Image.Image:
     img = frame_bgr.copy()
-    try:
-        entries = []
-        with open(jsonl_path) as f:
-            for line in f:
-                row = json.loads(line)
-                if abs(row["t"] - t_sec) <= tol and row.get("name","").strip():
-                    entries.append(row)
-        if entries:
-            log.debug(f"[annotate] t={t_sec:.2f}s — burning {len(entries)} names")
-    except (FileNotFoundError, json.JSONDecodeError) as e:
-        log.warning(f"[annotate] Could not read JSONL: {e}")
-        return Image.fromarray(cv2.cvtColor(img, cv2.COLOR_BGR2RGB))
-    for row in entries:
-        name = row["name"].strip()
-        if not name: continue
-        x1,y1,x2,y2 = row["bbox"]
-        scale = max(0.5,(x2-x1)/200.0)
-        thick = max(1,int(scale*2))
-        (tw,th),_ = cv2.getTextSize(name, cv2.FONT_HERSHEY_DUPLEX, scale, thick)
-        tx=x1; ty=max(th+6,y1-8)
-        cv2.rectangle(img,(tx-4,ty-th-6),(tx+tw+4,ty+4),(0,0,0),-1)
-        cv2.putText(img,name,(tx,ty),cv2.FONT_HERSHEY_DUPLEX,
-                    scale,(0,255,255),thick,cv2.LINE_AA)
     return Image.fromarray(cv2.cvtColor(img, cv2.COLOR_BGR2RGB))
@@ -337,6 +171,4 @@ def frame_at(video_path: str, frame_idx: int):
     cap.set(cv2.CAP_PROP_POS_FRAMES, frame_idx)
     ok, frame = cap.read()
     cap.release()
-    if not ok:
-        log.warning(f"[faces] frame_at({frame_idx}) failed")
-    return frame if ok else None

 import cv2
 import numpy as np
 from PIL import Image
 from ov_models import OVModel
+DET_CONF = 0.6
+SAME_PERSON = 0.55         # cosine sim above this = same identity (tune 0.4-0.6)
+SAMPLE_FPS = 2.0          # detection sampling rate (identity discovery)
+# ArcFace-style reference 5 points, scaled to a 128x128 aligned crop.
+_REF_5PTS = np.array([
+    [38.2946, 51.6963], [73.5318, 51.5014], [56.0252, 71.7366],
+    [41.5493, 92.3655], [70.7299, 92.2041],
+], dtype=np.float32) * (128.0 / 112.0)
+_det = _lm = _reid = None
 def _load():
+    global _det, _lm, _reid
+    if _det is None:
+        _det = OVModel("face-detection-retail-0004")
+        _lm = OVModel("landmarks-regression-retail-0009")
+        _reid = OVModel("face-reidentification-retail-0095")
+    return _det, _lm, _reid
+def _detect(frame_bgr) -> list[list[int]]:
+    det, _, _ = _load()
     h, w = frame_bgr.shape[:2]
+    out = det.infer(frame_bgr).reshape(-1, 7)   # [_,_,conf,x1,y1,x2,y2] norm
     boxes = []
     for _, _, conf, x1, y1, x2, y2 in out:
+        if conf < DET_CONF:
             continue
+        boxes.append([max(0, int(x1 * w)), max(0, int(y1 * h)),
+                      min(w, int(x2 * w)), min(h, int(y2 * h))])
     return boxes
+def _aligned_embed(frame_bgr, box) -> np.ndarray | None:
+    """Crop -> landmark-align to 128x128 -> re-id embedding (L2-normalized).
+    Alignment matters: re-id-0095 expects an aligned face; raw crops cluster
+    badly on tilted/profile shots, which would split or merge people.
+    """
+    _, lm, reid = _load()
+    x1, y1, x2, y2 = box
+    crop = frame_bgr[y1:y2, x1:x2]
+    if crop.size == 0:
+        return None
+    # landmarks-regression-retail-0009 -> 10 values = 5 (x,y) in crop-relative
+    pts = lm.infer(crop).reshape(5, 2)
+    pts[:, 0] *= (x2 - x1)
+    pts[:, 1] *= (y2 - y1)
+    pts[:, 0] += x1
+    pts[:, 1] += y1
+    M, _ = cv2.estimateAffinePartial2D(pts.astype(np.float32), _REF_5PTS)
+    if M is None:
+        aligned = cv2.resize(crop, (128, 128))   # fallback: no alignment
+    else:
+        aligned = cv2.warpAffine(frame_bgr, M, (128, 128))
+    v = reid.infer(aligned).reshape(-1)
+    return v / (np.linalg.norm(v) + 1e-9)
 def scan_video(video_path: str, max_seconds: float = 600.0):
+    """Sparse pass. Returns:
+      embeds:  list[np.ndarray]                 # one per detected face
+      crops:   list[PIL.Image]                  # matching crops
+      motion:  {frame_idx: float}               # for key-event picking
+      meta:    {"fps", "n_frames"}
     """
+    _load()
+    cap = cv2.VideoCapture(video_path)
+    fps = cap.get(cv2.CAP_PROP_FPS) or 30.0
     stride = max(1, int(round(fps / SAMPLE_FPS)))
+    embeds, crops, motion = [], [], {}
+    prev_small = None
+    idx = 0
     while True:
         ok, frame = cap.read()
         if not ok or idx / fps > max_seconds:
             break
         if idx % stride == 0:
+            # motion vs previous SAMPLED frame (coarse but fine for events)
+            small = cv2.cvtColor(cv2.resize(frame, (160, 90)), cv2.COLOR_BGR2GRAY)
             if prev_small is not None:
                 motion[idx] = float(np.mean(cv2.absdiff(small, prev_small)))
             prev_small = small
+            for box in _detect(frame):
+                emb = _aligned_embed(frame, box)
+                if emb is None:
+                    continue
+                embeds.append(emb)
+                x1, y1, x2, y2 = box
+                crops.append(Image.fromarray(
+                    cv2.cvtColor(frame[y1:y2, x1:x2], cv2.COLOR_BGR2RGB)))
         idx += 1
+    n_frames = idx
     cap.release()
+    return embeds, crops, motion, {"fps": fps, "n_frames": n_frames}
+def cluster_faces(embeds, crops):
+    """Greedy-cluster all detected faces into unique identities. Returns:
+      identities: [{"centroid": emb, "crop": best PIL, "count": n}, ...]
+    Index in this list == identity id used everywhere else.
+    """
+    identities = []
+    for emb, crop in zip(embeds, crops):
+        best, best_sim = None, SAME_PERSON
+        for ident in identities:
+            sim = float(np.dot(emb, ident["centroid"]))
+            if sim >= best_sim:
+                best, best_sim = ident, sim
+        if best is None:
+            identities.append({"centroid": emb, "crop": crop,
+                               "crop_area": crop.size[0] * crop.size[1],
+                               "count": 1})
+        else:
+            n = best["count"]
+            best["centroid"] = (best["centroid"] * n + emb) / (n + 1)
+            best["centroid"] /= (np.linalg.norm(best["centroid"]) + 1e-9)
+            best["count"] = n + 1
+            if crop.size[0] * crop.size[1] > best["crop_area"]:
+                best["crop"] = crop
+                best["crop_area"] = crop.size[0] * crop.size[1]
+    # drop singletons (likely false detections) unless that leaves nothing
+    strong = [i for i in identities if i["count"] >= 2]
+    return strong or identities
+def annotate_event_frame(frame_bgr, identities, names) -> Image.Image:
+    """For ONE key-event frame: detect faces, match each to a named identity,
+    burn the name above the box. This image is VLM-input only — the user never
+    sees it. This is how the VLM grounds names to the right person.
+    """
     img = frame_bgr.copy()
+    centroids = [i["centroid"] for i in identities]
+    for box in _detect(frame_bgr):
+        emb = _aligned_embed(frame_bgr, box)
+        if emb is None or not centroids:
+            continue
+        sims = [float(np.dot(emb, c)) for c in centroids]
+        iid = int(np.argmax(sims))
+        if sims[iid] < SAME_PERSON:
+            continue
+        name = names.get(iid, "").strip()
+        if not name:
+            continue
+        x1, y1, x2, y2 = box
+        scale = max(0.5, (x2 - x1) / 200.0)
+        thick = max(1, int(scale * 2))
+        (tw, th), _ = cv2.getTextSize(name, cv2.FONT_HERSHEY_DUPLEX, scale, thick)
+        tx, ty = x1, max(th + 6, y1 - 8)
+        cv2.rectangle(img, (tx - 4, ty - th - 6), (tx + tw + 4, ty + 4),
+                      (0, 0, 0), -1)
+        cv2.putText(img, name, (tx, ty), cv2.FONT_HERSHEY_DUPLEX,
+                    scale, (0, 255, 255), thick, cv2.LINE_AA)
     return Image.fromarray(cv2.cvtColor(img, cv2.COLOR_BGR2RGB))
     cap.set(cv2.CAP_PROP_POS_FRAMES, frame_idx)
     ok, frame = cap.read()
     cap.release()
+    return frame if ok else None

marquee.css CHANGED Viewed

@@ -1,346 +1,468 @@
 /* ============================================================
-   MARQUEE STUDIO — STYLESHEET
-   marquee.css
    ============================================================ */
-:root {
-  --fx: cubic-bezier(0.15, 0.85, 0.3, 1.0);
-  --pop: cubic-bezier(0.2, 1.7, 0.4, 1.0);
-  --primary: #B98BFF;
-  --secondary: #FF3D8B;
-  --accent: #3DE7FF;
-  --gold: #FFC94D;
-  --night: #120821;
-  --night-2: #0a0414;
-  --stage: #241241;
-  --stage-2: #2E1A52;
-  --raise: #382060;
-  --line: #3A2A5E;
-  --line-soft: #2C1E4C;
-  --cream: #FFF3E9;
-  --muted: #A98FC9;
-  --muted-2: #7C66A6;
-  --star-gold: #FFC94D;
-  --star-hot: #FF4D9A;
-  --star-cyan: #3DE7FF;
-  --star-violet: #C18BFF;
-  --star-lime: #9BE85B;
-  --star-tang: #FF8A4D;
 }
-[data-vibe="football"] {
-  --primary: #F5C842; --secondary: #4CAF50; --accent: #8BC34A;
-  --night: #0a1a0f; --night-2: #050c07; --stage: #0f2415; --stage-2: #14351c; --raise: #1e4d2a;
-  --line: rgba(76, 175, 80, 0.25); --line-soft: rgba(76, 175, 80, 0.12);
-  --cream: #f0f4e8; --muted: #8aaa7a; --muted-2: #5f7a53;
 }
-[data-vibe="diva"] {
-  --primary: #F4C2E1; --secondary: #D4AF37; --accent: #E91E8C;
-  --night: #1a0a14; --night-2: #0e050b; --stage: #240f1d; --stage-2: #38152c; --raise: #4c1a3b;
-  --line: rgba(233, 30, 140, 0.2); --line-soft: rgba(233, 30, 140, 0.1);
-  --cream: #fdf0f7; --muted: #b88aa8; --muted-2: #865f79;
 }
-[data-vibe="wildlife"] {
-  --primary: #C8A84B; --secondary: #2E7D32; --accent: #8D6E3C;
-  --night: #0d1a0a; --night-2: #060c04; --stage: #141f0f; --stage-2: #1f3017; --raise: #2b4520;
-  --line: rgba(200, 168, 75, 0.3); --line-soft: rgba(200, 168, 75, 0.15);
-  --cream: #e8dcc8; --muted: #8a9e78; --muted-2: #5c6e50;
 }
-[data-vibe="boxing"] {
-  --primary: #E53935; --secondary: #FFB300; --accent: #FF6F00;
-  --night: #0f0505; --night-2: #080202; --stage: #1a0808; --stage-2: #2b0c0c; --raise: #3d1111;
-  --line: rgba(229, 57, 53, 0.3); --line-soft: rgba(229, 57, 53, 0.15);
-  --cream: #fdf0ee; --muted: #aa8080; --muted-2: #7c5858;
 }
-[data-vibe="masterchef"] {
-  --primary: #FF8F00; --secondary: #ECEFF1; --accent: #F57F17;
-  --night: #080808; --night-2: #020202; --stage: #101010; --stage-2: #1b1b1b; --raise: #262626;
-  --line: rgba(255, 255, 255, 0.07); --line-soft: rgba(255, 255, 255, 0.03);
-  --cream: #f5f5f5; --muted: #9e9e9e; --muted-2: #616161;
 }
-/* ============================================================ BASE ============================================================ */
-* { box-sizing: border-box; margin: 0; padding: 0; }
-html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
-body {
-  font-family: 'Nunito', system-ui, sans-serif;
-  color: var(--cream); background-color: var(--night); min-height: 100vh; line-height: 1.5;
-  transition: background-color 0.8s var(--fx), color 0.8s var(--fx); overflow-x: hidden;
 }
-body::before {
-  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99; opacity: 0.015;
-  background: repeating-linear-gradient(0deg, #000 0px, #000 1px, transparent 1px, transparent 3px);
 }
-body::after {
-  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: .03; mix-blend-mode: overlay;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
 }
-.disp { font-family: 'Unbounded', sans-serif; }
-.marq { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; }
-svg.i { width: 1em; height: 1em; display: block; flex: none; }
-.shell { max-width: 1240px; margin: 0 auto; padding: clamp(20px,4vw,40px) clamp(16px,3vw,32px) 60px; position: relative; z-index: 1; }
-/* ============================================================ MASTHEAD ============================================================ */
-.masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; margin-bottom: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
-.brand { display: flex; align-items: center; gap: 20px; }
-.sign {
-  position: relative; padding: 14px 24px 15px; border-radius: 12px;
-  border: 2px solid rgba(255,201,77,0.3);
-  background: radial-gradient(120% 140% at 50% 0%, rgba(255,201,77,0.1), transparent 75%), linear-gradient(180deg, rgba(21,21,37,0.4), rgba(11,11,20,0.8));
-  box-shadow: inset 0 0 20px rgba(255,201,77,0.06), 0 10px 40px rgba(0,0,0,0.5);
 }
-.sign h1 { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: clamp(22px,3vw,32px); letter-spacing: .06em; line-height: 1; color: var(--cream); text-shadow: 0 0 14px rgba(255,201,77,0.35); }
-.sign .bulbs { position: absolute; left: 16px; right: 16px; display: flex; justify-content: space-between; }
-.sign .bulbs.t { top: -5px; }
-.sign .bulbs.b { bottom: -5px; }
-.sign .bulbs i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold), 0 0 2px #fff; animation: tw 2s infinite; }
-.sign .bulbs i:nth-child(2n) { animation-delay: .5s; background: var(--secondary); box-shadow: 0 0 8px var(--secondary), 0 0 2px #fff; }
-.sign .bulbs i:nth-child(3n) { animation-delay: 1.2s; background: var(--accent); box-shadow: 0 0 8px var(--accent), 0 0 2px #fff; }
-@keyframes tw { 0%,100% { opacity: 1; filter: brightness(1.2); } 50% { opacity: .2; filter: brightness(0.6); } }
-.tag { font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 13px; color: var(--primary); letter-spacing: .02em; }
-.tag small { display: block; font-family: 'Nunito', sans-serif; font-weight: 600; color: var(--muted); font-size: 12px; margin-top: 4px; letter-spacing: 0; }
-.broadcast-meta { display: flex; align-items: center; gap: 16px; }
-.clock { font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; font-size: 22px; color: var(--muted); font-variant-numeric: tabular-nums; }
-.status { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-family: 'Bebas Neue', sans-serif; letter-spacing: .14em; font-size: 15px; color: var(--muted); border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; background: rgba(11,11,20,0.6); }
-.status .led { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); transition: .3s; }
-.status.live { color: var(--secondary); border-color: rgba(255,61,139,0.4); background: rgba(255,61,139,0.06); }
-.status.live .led { background: var(--secondary); box-shadow: 0 0 10px var(--secondary); animation: tw 1.1s infinite; }
-/* ============================================================ RUNDOWN ============================================================ */
-.rundown { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin: 12px 0 34px; padding: 0 8px; }
-.rundown::before { content: ""; position: absolute; top: 19px; left: 12%; right: 12%; height: 2px; background: var(--line-soft); }
-.cue { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
-.cue .node { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--night-2); border: 1.5px solid var(--line); font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--muted-2); position: relative; z-index: 1; transition: .35s var(--fx); }
-.cue .ttl { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 13px; color: var(--muted); }
-.cue .sub { font-size: 11px; color: var(--muted-2); letter-spacing: .01em; }
-.cue.done .node { border-color: var(--accent); color: var(--accent); background: rgba(0,240,255,0.06); }
-.cue.done .ttl { color: var(--cream); }
-.cue.on .node { border-color: var(--primary); color: var(--primary); background: rgba(185,139,255,0.1); box-shadow: 0 0 0 4px rgba(185,139,255,0.06), 0 0 20px rgba(185,139,255,0.25); }
-.cue.on .ttl { color: var(--primary); }
-/* ============================================================ VIBE BANNER ============================================================ */
-.vibe-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; margin-bottom: 24px; background: color-mix(in srgb, var(--primary) 8%, var(--stage)); border: 1.5px solid color-mix(in srgb, var(--primary) 25%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 30px rgba(0,0,0,0.4); backdrop-filter: blur(12px); transition: all 0.5s var(--fx); position: relative; overflow: hidden; }
-.vibe-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 30%, color-mix(in srgb, var(--vc, var(--primary)) 8%, transparent), transparent 50%); pointer-events: none; }
-.vibe-banner-icon { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); transition: all 0.5s var(--fx); box-shadow: 0 0 15px color-mix(in srgb,var(--vc,var(--primary)) 40%,transparent); }
-.vibe-banner-name { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 16px; font-weight: bold; color: var(--primary); letter-spacing: .08em; }
-.vibe-banner-desc { display: block; font-size: 12.5px; color: var(--cream); line-height: 1.45; }
-.banner-wave { display: flex; align-items: center; gap: 3px; height: 16px; margin-left: auto; flex-shrink: 0; padding-left: 14px; border-left: 1px solid var(--line); }
-.banner-wave span { width: 2.5px; height: 4px; border-radius: 1px; background: var(--vc, var(--primary)); animation: wav 1.1s ease-in-out infinite alternate; opacity: 0.85; }
-.banner-wave span:nth-child(2) { animation-delay: 0.15s; height: 8px; }
-.banner-wave span:nth-child(3) { animation-delay: 0.3s; height: 14px; }
-.banner-wave span:nth-child(4) { animation-delay: 0.45s; height: 9px; }
-.banner-wave span:nth-child(5) { animation-delay: 0.6s; height: 5px; }
-@keyframes wav { 0% { transform: scaleY(0.4); opacity: 0.3; } 100% { transform: scaleY(1.5); opacity: 1; filter: brightness(1.2); } }
-/* ============================================================ CONSOLE ============================================================ */
-.console { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
-@media(max-width:960px){ .console { grid-template-columns: 1fr; } }
-.desk { display: flex; flex-direction: column; gap: 20px; }
-.card { background: var(--stage); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.02); backdrop-filter: blur(12px); position: relative; overflow: hidden; transition: background-color 0.5s var(--fx), border-color 0.5s var(--fx); }
-.card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
-.card-h .ic { color: var(--primary); font-size: 18px; transition: color 0.5s; }
-.card-h h2 { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .01em; }
-.card-h .meta { margin-left: auto; font-family: 'Bebas Neue', sans-serif; letter-spacing: .07em; font-size: 12px; color: var(--muted-2); }
-.skew-header { transform: skewX(-12deg); }
-/* Drop zone */
-.drop { position: relative; border: 1.5px dashed rgba(255,255,255,0.15); border-radius: 14px; padding: 28px 20px; text-align: center; cursor: pointer; transition: .25s var(--fx); overflow: hidden; background: radial-gradient(180px 100px at 50% -20%, rgba(185,139,255,0.03), transparent 75%); }
-.drop:hover { border-color: var(--primary); background: radial-gradient(180px 100px at 50% -10%, rgba(185,139,255,0.06), transparent 75%); }
-.drop:focus-visible { border-color: var(--accent); }
-.drop .clap { font-size: 32px; color: var(--primary); display: inline-flex; margin-bottom: 10px; transition: color 0.5s; }
-.drop .t { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 14px; }
-.drop .s { font-size: 11px; color: var(--muted); margin-top: 5px; }
-.drop .loaded { display: none; align-items: center; gap: 14px; text-align: left; }
-.drop.loaded { border-style: solid; border-color: rgba(185,139,255,0.35); background: rgba(185,139,255,0.03); cursor: default; }
-.drop.loaded .ask { display: none; }
-.drop.loaded .loaded { display: flex; }
-.strip { width: 52px; height: 52px; border-radius: 10px; flex: none; position: relative; overflow: hidden; background: linear-gradient(135deg,var(--night-2),var(--stage)); border: 1.5px solid var(--line); }
-.strip::before, .strip::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 4px; background: repeating-linear-gradient(var(--night) 0 3px,transparent 3px 6px); }
-.strip::before { left: 3px; }
-.strip::after { right: 3px; }
-.strip .play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); font-size: 18px; }
-.loaded .fn { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 13px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
-.loaded .fd { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; font-size: 14px; color: var(--accent); margin-top: 2px; }
-/* Buttons */
-.btn { width: 100%; border: 0; cursor: pointer; font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 13px; color: var(--night); padding: 15px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: .2s var(--fx); }
-.btn:disabled { opacity: .3; cursor: not-allowed; background: var(--night-2) !important; color: var(--muted-2) !important; border: 1px solid var(--line-soft); }
-.btn.cyan { background: linear-gradient(135deg,var(--accent),#00a8e8); box-shadow: 0 4px 14px rgba(0,240,255,0.2); }
-.btn.cyan:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,240,255,0.4); }
-.btn.show { font-size: 15px; padding: 18px; background: linear-gradient(110deg,var(--primary),var(--secondary)); position: relative; overflow: hidden; color: #fff; box-shadow: 0 6px 20px rgba(255,0,102,0.15); }
-.btn.show:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,0,102,0.35); }
-.btn.show:not(:disabled)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent); transform: translateX(-220%); }
-@media(prefers-reduced-motion:no-preference){ .btn.show:not(:disabled)::after { animation: shine 4s ease-in-out infinite; } }
-@keyframes shine { 0% { transform: translateX(-220%); } 35%,100% { transform: translateX(360%); } }
-.mt { margin-top: 14px; }
-.sweep { height: 4px; border-radius: 2px; margin-top: 14px; background: var(--night-2); position: relative; overflow: hidden; opacity: 0; transition: .25s; }
-.casting .sweep { opacity: 1; }
-.sweep::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg,transparent,var(--primary),transparent); }
-@media(prefers-reduced-motion:no-preference){ .sweep::after { animation: sw 1.2s linear infinite; } }
-@keyframes sw { from { transform: translateX(-120%); } to { transform: translateX(300%); } }
-/* ============================================================ STAGE / STAR CARDS ============================================================ */
-.stage-panel { background: radial-gradient(80% 60% at 50% -8%, rgba(185,139,255,0.03), transparent 60%), linear-gradient(180deg,var(--stage),var(--night-2)); border: 1px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 24px 60px rgba(0,0,0,0.5); backdrop-filter: blur(12px); transition: background-color 0.5s var(--fx); }
-.stage-h { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
-.stage-h .ic { color: var(--primary); font-size: 20px; transition: color 0.5s; }
-.stage-h h2 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 16px; }
-.stage-h .count { margin-left: auto; white-space: nowrap; font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: 14px; color: var(--primary); background: rgba(185,139,255,0.06); padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(185,139,255,0.15); transition: color 0.5s, border-color 0.5s; }
-.empty { display: grid; place-items: center; min-height: 330px; text-align: center; padding: 20px; }
-.empty .spot { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; color: var(--muted-2); font-size: 44px; background: radial-gradient(circle at 50% 30%,rgba(255,255,255,0.03),transparent 75%); border: 1px solid var(--line-soft); }
-.empty .t { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 16px; color: var(--cream); margin-bottom: 6px; }
-.empty .s { font-size: 13px; color: var(--muted); max-width: 320px; }
-.roster { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 18px; }
-.star { --c: var(--primary); position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg,var(--stage-2),var(--stage)); border: 1px solid var(--line); transition: .25s var(--fx); }
-.star:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--c) 60%,transparent); }
-.portrait { position: relative; height: 138px; overflow: hidden; background: radial-gradient(90% 80% at 50% 120%,color-mix(in srgb,var(--c) 15%,var(--night-2)),var(--night-2)); }
-.portrait .beam { position: absolute; top: -30px; left: 50%; width: 140px; height: 170px; transform: translateX(-50%); pointer-events: none; clip-path: polygon(40% 0,60% 0,100% 100%,0 100%); background: linear-gradient(180deg,color-mix(in srgb,var(--c) 40%,transparent),transparent 75%); opacity: .5; }
-.portrait .head-ph { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); color: color-mix(in srgb,var(--c) 30%,#ffffff); opacity: .3; }
-.portrait .frame { position: absolute; inset: 8px; border: 1.5px solid color-mix(in srgb,var(--c) 25%,transparent); border-radius: 10px; pointer-events: none; }
-.portrait .idx { position: absolute; top: 10px; left: 10px; font-family: 'Bebas Neue', sans-serif; font-size: 14px; color: var(--cream); background: rgba(11,11,20,0.8); padding: 2px 8px; border-radius: 6px; display: flex; align-items: center; gap: 4px; }
-.portrait .idx .st { color: var(--c); }
-.tier { position: absolute; top: 10px; right: 10px; font-family: 'Bebas Neue', sans-serif; font-size: 11px; letter-spacing: .02em; white-space: nowrap; color: var(--night); background: var(--c); padding: 3px 8px; border-radius: 6px; box-shadow: 0 2px 10px color-mix(in srgb,var(--c) 40%,transparent); font-weight: bold; }
-.crown { position: absolute; top: 50px; left: 50%; transform: translateX(-50%) translateY(12px) scale(.4) rotate(-12deg); opacity: 0; width: 30px; height: 30px; color: var(--primary); filter: drop-shadow(0 2px 6px color-mix(in srgb,var(--primary) 60%,transparent)); transition: .4s var(--pop); }
-.star.named .crown { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); }
-.star-body { padding: 12px; }
-.star-body label { font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }
-.star input { width: 100%; background: var(--night-2); border: 1px solid var(--line); color: var(--cream); border-radius: 10px; padding: 10px 12px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 14px; outline: none; transition: .16s; }
-.star input::placeholder { color: var(--muted-2); font-weight: 600; }
-.star input:focus { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent); }
-.star.named { border-color: color-mix(in srgb,var(--c) 55%,transparent); box-shadow: 0 8px 24px color-mix(in srgb,var(--c) 12%,transparent); }
-.star.named .portrait { background: radial-gradient(90% 90% at 50% 120%,color-mix(in srgb,var(--c) 30%,var(--night-2)),var(--night-2)); }
-.star.named .portrait .beam { opacity: 1; }
-.star.named .head-ph { opacity: .6; }
-/* ============================================================ VIEWS ============================================================ */
-.view { display: none; }
-.view.active { display: block; animation: viewIn .45s var(--fx); }
-@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
-/* ============================================================ BROADCAST PLAYER ============================================================ */
-.booth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
-.back { display: inline-flex; align-items: center; gap: 8px; background: var(--stage); border: 1px solid var(--line); color: var(--cream); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: .16s; backdrop-filter: blur(12px); }
-.back:hover { border-color: var(--primary); color: var(--cream); }
-.booth { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; transition: grid-template-columns 0.4s var(--fx); }
-@media(max-width:840px){ .booth { grid-template-columns: 1fr; } }
-.screen-wrap { background: #000; border-radius: 20px; overflow: hidden; border: 1.5px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.8); position: relative; }
-/* HARDCODED 1:1 ASPECT RATIO — DO NOT CHANGE */
-.screen { position: relative; width: 100%; aspect-ratio: 1/1 !important; background: repeating-linear-gradient(135deg,#0e0a1a 0 18px,#07050d 18px 36px); display: grid; place-items: center; overflow: hidden; }
-.screen .ph { font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; color: var(--muted-2); font-size: 15px; text-align: center; padding: 0 20px; }
-.screen .ph svg { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--line); display: block; }
-.screen-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: none; }
-.booth.portrait .screen-vid { object-fit: cover; }
-.screen.has-video .ph { display: none; }
-.screen.has-video .screen-vid { display: block; }
-.portrait .head-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
-.star.named .head-img { filter: saturate(1.05); }
-.bug { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; white-space: nowrap; background: rgba(6,6,12,0.85); backdrop-filter: blur(8px); padding: 7px 14px; border-radius: 8px; font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; font-size: 13px; color: var(--cream); z-index: 5; border: 1px solid var(--line); }
-.bug .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 10px var(--secondary); }
-@media(prefers-reduced-motion:no-preference){ .bug .dot { animation: tw 1s infinite; } }
-.tc { position: absolute; top: 14px; right: 14px; background: rgba(6,6,12,0.85); backdrop-filter: blur(8px); padding: 7px 14px; border-radius: 8px; font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: 14px; color: var(--primary); font-variant-numeric: tabular-nums; z-index: 5; border: 1px solid var(--line); }
-.chyron { position: absolute; left: 14px; right: 14px; bottom: 14px; border-radius: 12px; overflow: hidden; background: linear-gradient(100deg, rgba(10,10,18,0.96), rgba(18,18,30,0.94)); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 15px 40px rgba(0,0,0,0.6); transform: translateY(130%); opacity: 0; transition: .45s var(--fx); z-index: 10; }
-.chyron.in { transform: none; opacity: 1; }
-.chyron .bar { height: 4px; background: var(--vibe-primary, var(--secondary)); }
-.chyron .row { display: flex; align-items: stretch; }
-.chyron .who { display: flex; align-items: center; font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: 16px; color: var(--night); background: var(--vibe-primary, var(--secondary)); padding: 12px 16px; white-space: nowrap; font-weight: bold; }
-.chyron .line { padding: 12px 18px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; color: var(--cream); display: flex; align-items: center; line-height: 1.35; }
-@media(prefers-reduced-motion:no-preference){ .chyron.in .line { animation: sharpen .5s var(--fx); } }
-@keyframes sharpen { from { filter: blur(6px); opacity: .3; } to { filter: blur(0); opacity: 1; } }
-.transport { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
-.transport .pp { width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; flex: none; display: grid; place-items: center; background: linear-gradient(135deg,var(--primary),var(--secondary)); color: var(--night); font-size: 20px; transition: .16s; box-shadow: 0 4px 12px rgba(255,0,102,0.2); }
-.transport .pp:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(255,0,102,0.4); }
-.scrub { flex: 1; height: 6px; border-radius: 4px; background: var(--night-2); position: relative; cursor: pointer; border: 1px solid var(--line-soft); }
-.scrub .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; width: 0; background: linear-gradient(90deg,var(--secondary),var(--primary)); }
-.scrub .knob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); transform: translate(-50%,-50%); left: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.6); border: 1.5px solid var(--primary); }
-.pbp { background: var(--stage); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; max-height: 520px; backdrop-filter: blur(12px); }
-.pbp .pbp-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
-.pbp .pbp-h .ic { color: var(--primary); font-size: 16px; }
-.pbp .pbp-h h3 { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 13px; }
-.pbp .pbp-h .ct { margin-left: auto; font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; font-size: 12px; color: var(--muted-2); }
-.pbp .lines { overflow-y: auto; padding: 6px; }
-.pbp .pl { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; cursor: pointer; transition: .15s; align-items: baseline; }
-.pbp .pl:hover { background: rgba(255,255,255,0.02); }
-.pbp .pl .t { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 14px; color: var(--muted-2); flex: none; width: 42px; font-variant-numeric: tabular-nums; padding-top: 1px; }
-.pbp .pl .tx { font-size: 13px; line-height: 1.45; color: var(--muted); }
-.pbp .pl .tx b { color: var(--cream); font-weight: 800; }
-.pbp .pl.now { background: color-mix(in srgb,var(--vibe-primary,var(--primary)) 10%,rgba(255,255,255,0.01)); }
-.pbp .pl.now .t { color: var(--vibe-primary,var(--primary)); }
-.pbp .pl.now .tx { color: var(--cream); }
-.pbp .pl.now .tx b { color: var(--vibe-primary,var(--primary)); }
-.export { padding: 14px 18px; border-top: 1px solid var(--line-soft); background: rgba(6,6,12,0.4); }
-.export .btn-srt { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; background: var(--stage-2); border: 1px solid var(--line); color: var(--cream); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; padding: 12px; border-radius: 11px; transition: .16s; }
-.export .btn-srt:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px rgba(0,240,255,0.15); }
-.export .btn-srt .ic { color: var(--accent); font-size: 16px; }
-.export .hint { text-align: center; font-size: 11px; color: var(--muted-2); margin-top: 8px; }
-.export .hint b { color: var(--muted); }
-.voice-card { margin-top: 0; }
-.voice-opts { display: flex; gap: 8px; padding: 4px 0; }
-.voice-opt { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: transparent; color: var(--muted); cursor: pointer; text-align: left; transition: .15s; }
-.voice-opt:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); }
-.voice-opt[aria-pressed="true"] { border-color: var(--primary); background: rgba(185,139,255,0.06); }
-.voice-opt .vt { font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 600; color: var(--cream); }
-.voice-opt[aria-pressed="true"] .vt { color: var(--primary); }
-.voice-opt .vd { font-size: 10px; color: var(--muted-2); }
-.export .btn-export { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; padding: 11px 16px; border-radius: 10px; border: 1px solid var(--vibe-primary, var(--secondary)); background: color-mix(in srgb,var(--vibe-primary, var(--secondary)) 12%,transparent); color: var(--vibe-primary, var(--secondary)); font-family: 'Unbounded', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .04em; transition: .15s; margin-top: 10px; }
-.export .btn-export:hover { background: color-mix(in srgb,var(--vibe-primary, var(--secondary)) 22%,transparent); }
-.export .btn-export:disabled { opacity: .4; cursor: not-allowed; }
-.export .btn-export .ic { font-size: 16px; }
-.export-progress { margin-top: 10px; }
-.export-bar { height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
-.export-fill { height: 100%; background: var(--vibe-primary, var(--secondary)); border-radius: 2px; width: 0%; transition: width .3s; }
-.export-label { font-size: 11px; color: var(--muted-2); }
-.confetti { position: fixed; top: -20px; width: 11px; height: 14px; z-index: 90; pointer-events: none; border-radius: 2px; }
-@media(prefers-reduced-motion:no-preference){ .confetti { animation: fall linear forwards; } }
-@keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .2; } }
-.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--stage-2); border: 1px solid var(--primary); color: var(--cream); padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 13px; z-index: 95; transition: .3s var(--fx); display: flex; align-items: center; gap: 9px; box-shadow: 0 14px 40px rgba(0,0,0,0.6); }
-.toast.show { transform: translateX(-50%); opacity: 1; }
-.toast .ic { color: var(--primary); }
-.note { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--muted-2); margin-top: 28px; max-width: 560px; line-height: 1.55; }
-.note .lock { font-size: 14px; margin-top: 1px; flex: none; }
-.note b { color: var(--muted); }
-@media(prefers-reduced-motion:reduce){ * { animation: none !important; transition: none !important; } }
-@media(max-width:560px){ .masthead { gap: 14px; } .rundown .sub { display: none; } .roster { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); } }
-/* ============================================================ LANDING ============================================================ */
-.landing { position: fixed; inset: 0; z-index: 100; background: #040409; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; transition: opacity .5s ease, visibility .5s ease; }
-.landing.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
-.landing-inner { width: 100%; max-width: 700px; padding: clamp(32px,6vw,64px) clamp(16px,4vw,32px) 48px; display: flex; flex-direction: column; gap: 40px; }
-.landing-brand { text-align: center; }
-.landing-brand .sign { display: inline-block; position: relative; margin-bottom: 16px; }
-.landing-tag { font-family: 'Nunito', sans-serif; font-size: 15px; color: var(--muted); max-width: 380px; margin: 0 auto; line-height: 1.6; }
-.landing-prompt { font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; font-size: 13px; color: var(--muted-2); text-transform: uppercase; margin-bottom: 12px; text-align: center; }
-.landing-vibes { display: flex; flex-direction: column; gap: 12px; }
-.lv-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--stage); border: 1px solid var(--line-soft); border-radius: 16px; cursor: pointer; text-align: left; width: 100%; transition: transform .22s var(--fx), border-color .22s var(--fx), background .22s var(--fx), box-shadow .22s var(--fx); position: relative; overflow: hidden; }
-.lv-card::before { content: ''; position: absolute; inset: 0; background: var(--lv-glow, transparent); opacity: 0.15; transition: opacity .25s; pointer-events: none; }
-.lv-card:hover { transform: translateY(-3px); }
-.lv-card:hover::before { opacity: 0.35; }
-.lv-card[data-vibe="football"] { background: linear-gradient(135deg, #09170d 0%, #080c14 100%); border-color: rgba(76,175,80,0.15); }
-.lv-card[data-vibe="football"]::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 150px; background: linear-gradient(115deg, transparent, rgba(76,175,80,0.04), transparent); transform: skewX(-20deg); pointer-events: none; }
-.lv-card[data-vibe="football"]:hover { border-color: #39FF14; box-shadow: 0 8px 24px rgba(57,255,20,0.08); }
-.lv-card[data-vibe="football"] .lv-icon { color: #39FF14; background: rgba(57,255,20,0.08); }
-.lv-card[data-vibe="diva"] { background: linear-gradient(135deg, #1c0615 0%, #0a030c 100%); border-color: rgba(233,30,140,0.15); }
-.lv-card[data-vibe="diva"]::after { content: ""; position: absolute; right: 20px; top: 50%; width: 12px; height: 12px; background: #E91E8C; border-radius: 50%; opacity: 0.12; filter: blur(5px); box-shadow: -40px -10px 0 #D4AF37, -20px 15px 0 #E91E8C; pointer-events: none; }
-.lv-card[data-vibe="diva"]:hover { border-color: #E91E8C; box-shadow: 0 8px 24px rgba(233,30,140,0.08); }
-.lv-card[data-vibe="diva"] .lv-icon { color: #F4C2E1; background: rgba(233,30,140,0.08); }
-.lv-card[data-vibe="wildlife"] { background: linear-gradient(135deg, #110e08 0%, #050805 100%); border-color: rgba(200,168,75,0.15); }
-.lv-card[data-vibe="wildlife"]::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 90% 50%, rgba(200,168,75,0.04), transparent 75%); pointer-events: none; }
-.lv-card[data-vibe="wildlife"]:hover { border-color: #C8A84B; box-shadow: 0 8px 24px rgba(200,168,75,0.08); }
-.lv-card[data-vibe="wildlife"] .lv-icon { color: #C8A84B; background: rgba(200,168,75,0.08); }
-.lv-card[data-vibe="boxing"] { background: linear-gradient(135deg, #150404 0%, #080202 100%); border-color: rgba(229,57,53,0.15); }
-.lv-card[data-vibe="boxing"]::after { content: ""; position: absolute; top: -30px; right: 20px; width: 80px; height: 160px; background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); pointer-events: none; }
-.lv-card[data-vibe="boxing"]:hover { border-color: #E53935; box-shadow: 0 8px 24px rgba(229,57,53,0.08); }
-.lv-card[data-vibe="boxing"] .lv-icon { color: #E53935; background: rgba(229,57,53,0.08); }
-.lv-card[data-vibe="masterchef"] { background: linear-gradient(135deg, #141414 0%, #080808 100%); border-color: rgba(255,143,0,0.15); }
-.lv-card[data-vibe="masterchef"]:hover { border-color: #FF8F00; box-shadow: 0 8px 24px rgba(255,143,0,0.05); }
-.lv-card[data-vibe="masterchef"] .lv-icon { color: #FF8F00; background: rgba(255,143,0,0.05); }
-.lv-icon { width: 48px; height: 48px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 22px; transition: background .2s; }
-.lv-body { flex: 1; min-width: 0; }
-.lv-name { display: block; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 15px; color: var(--cream); margin-bottom: 4px; }
-.lv-desc { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
-.lv-arrow { color: var(--muted-2); font-size: 18px; flex: none; transition: transform .2s, color .2s; }
-.lv-card:hover .lv-arrow { transform: translateX(4px); color: var(--cream); }
-/* ============================================================ CHANGE VIBE BUTTON ============================================================ */
-.change-vibe-btn { background: linear-gradient(180deg, var(--stage-2), var(--stage)); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.3); border-radius: 8px; padding: 8px 16px; font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: 13px; color: var(--muted); cursor: pointer; transition: all 0.25s var(--fx); position: relative; overflow: hidden; }
-.change-vibe-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); transform: translateX(-100%); transition: transform 0.4s var(--fx); }
-.change-vibe-btn:hover { border-color: var(--primary); color: #fff; box-shadow: 0 0 15px color-mix(in srgb, var(--primary) 25%, transparent); }
-.change-vibe-btn:hover::before { transform: translateX(100%); }

 /* ============================================================
+   MARQUEE — design system
+   Tokens straight from the brief so they lift into Gradio css=.
+   Sections: tokens · base · masthead · rundown · desk · stage
+   · star card · vibes + Coco · broadcast player · utilities
    ============================================================ */
+:root{
+  /* night & surfaces */
+  --night:#190B2E;        /* base */
+  --night-2:#120821;      /* deeper, for wells */
+  --stage:#241241;        /* panels */
+  --stage-2:#2E1A52;      /* raised */
+  --raise:#382060;        /* inputs-on-dark */
+  --line:#3A2A5E;         /* borders */
+  --line-soft:#2C1E4C;
+  /* leads + helper */
+  --hot:#FF3D8B;          /* primary / on-air / energy */
+  --gold:#FFC94D;         /* stardom: lights, crowns */
+  --cyan:#3DE7FF;         /* confirm / scan */
+  --violet:#B98BFF;       /* playful / mascot */
+  /* text */
+  --cream:#FFF3E9;
+  --muted:#A98FC9;
+  --muted-2:#7C66A6;
+  /* the casting rainbow — each star gets their own character color.
+     all high-chroma, all in-family: the "agent select" punch. */
+  --star-gold:#FFC94D;
+  --star-hot:#FF4D9A;
+  --star-cyan:#3DE7FF;
+  --star-violet:#C18BFF;
+  --star-lime:#9BE85B;
+  --star-tang:#FF8A4D;
+  --fx:cubic-bezier(.2,.9,.25,1);
+  --pop:cubic-bezier(.2,1.7,.4,1);
 }
+*{box-sizing:border-box;margin:0;padding:0}
+html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+body{
+  font-family:Nunito,system-ui,sans-serif;
+  color:var(--cream);
+  background:var(--night);
+  min-height:100vh;
+  line-height:1.5;
+  /* one justified light: a stage spotlight from above + a faint floor wash.
+     no decorative blob gradients. */
+  background-image:
+    radial-gradient(120% 70% at 50% -25%, rgba(255,201,77,.10), transparent 55%),
+    radial-gradient(140% 90% at 50% 120%, rgba(61,231,255,.05), transparent 60%);
+  background-attachment:fixed;
 }
+/* film grain — the only decorative texture, very subtle */
+body::after{
+  content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.04;
+  mix-blend-mode:overlay;
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
+.disp{font-family:Unbounded,sans-serif}
+.marq{font-family:'Bebas Neue',sans-serif;letter-spacing:.06em}
+svg.i{width:1em;height:1em;display:block;flex:none}
+.shell{max-width:1180px;margin:0 auto;padding:clamp(16px,3vw,34px) clamp(16px,4vw,40px) 40px;position:relative;z-index:1}
+/* ============================================================
+   MASTHEAD — the broadcast header bar. signature lives here.
+   ============================================================ */
+.masthead{
+  display:flex;align-items:center;justify-content:space-between;gap:20px;
+  padding-bottom:22px;margin-bottom:6px;flex-wrap:wrap;
 }
+.brand{display:flex;align-items:center;gap:18px}
+/* the lit marquee sign — spend the boldness here */
+.sign{
+  position:relative;padding:14px 22px 15px;border-radius:14px;
+  border:2px solid rgba(255,201,77,.55);
+  background:
+    radial-gradient(120% 140% at 50% 0%, rgba(255,201,77,.14), transparent 70%),
+    linear-gradient(180deg, rgba(255,201,77,.05), rgba(25,11,46,.2));
+  box-shadow:inset 0 0 22px rgba(255,201,77,.16), 0 10px 40px rgba(255,61,139,.10);
 }
+.sign h1{
+  font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,38px);
+  letter-spacing:.04em;line-height:.9;
+  color:var(--cream);
+  text-shadow:0 0 18px rgba(255,201,77,.45), 0 0 2px rgba(255,201,77,.8);
 }
+/* perimeter bulbs, top + bottom rows */
+.sign .bulbs{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between}
+.sign .bulbs.t{top:-5px}.sign .bulbs.b{bottom:-5px}
+.sign .bulbs i{width:6px;height:6px;border-radius:50%;background:var(--gold);
+  box-shadow:0 0 8px var(--gold),0 0 2px #fff;animation:tw 2.6s infinite}
+.sign .bulbs i:nth-child(2n){animation-delay:.7s}
+.sign .bulbs i:nth-child(3n){animation-delay:1.5s;background:var(--hot);box-shadow:0 0 8px var(--hot),0 0 2px #fff}
+@keyframes tw{0%,100%{opacity:1}48%{opacity:.28}}
+.tag{font-family:Unbounded,sans-serif;font-weight:500;font-size:13px;color:var(--gold);letter-spacing:.01em}
+.tag small{display:block;font-family:Nunito;font-weight:600;color:var(--muted);font-size:12px;margin-top:3px;letter-spacing:0}
+/* right side: live clock + status */
+.broadcast-meta{display:flex;align-items:center;gap:14px}
+.clock{font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:20px;color:var(--muted);
+  font-variant-numeric:tabular-nums}
+.status{display:flex;align-items:center;gap:9px;white-space:nowrap;font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;
+  font-size:16px;color:var(--muted);border:1px solid var(--line);padding:8px 15px;border-radius:999px;
+  background:rgba(46,26,82,.5)}
+.status .led{width:9px;height:9px;border-radius:50%;background:var(--muted-2);transition:.3s}
+.status.live{color:var(--hot);border-color:rgba(255,61,139,.5);background:rgba(255,61,139,.08)}
+.status.live .led{background:var(--hot);box-shadow:0 0 12px var(--hot);animation:tw 1.1s infinite}
+/* ============================================================
+   RUNDOWN — broadcast running order, not 4 identical cards.
+   nodes on a connecting track.
+   ============================================================ */
+.rundown{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
+  margin:8px 0 30px;padding:0 6px}
+.rundown::before{content:"";position:absolute;top:19px;left:11%;right:11%;height:2px;
+  background:var(--line-soft)}
+.cue{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
+.cue .node{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
+  background:var(--stage);border:2px solid var(--line);
+  font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--muted-2);
+  position:relative;z-index:1;transition:.35s var(--fx)}
+.cue .ttl{font-family:Unbounded,sans-serif;font-weight:600;font-size:13px;color:var(--muted)}
+.cue .sub{font-size:11px;color:var(--muted-2);letter-spacing:.01em}
+/* done */
+.cue.done .node{border-color:var(--cyan);color:var(--cyan);background:rgba(61,231,255,.08)}
+.cue.done .ttl{color:var(--cream)}
+/* active */
+.cue.on .node{border-color:var(--gold);color:var(--gold);background:rgba(255,201,77,.12);
+  box-shadow:0 0 0 5px rgba(255,201,77,.1),0 0 22px rgba(255,201,77,.3)}
+.cue.on .ttl{color:var(--gold)}
+@media(prefers-reduced-motion:no-preference){
+  .cue.on .node{animation:cuePulse 2s infinite}
 }
+@keyframes cuePulse{0%,100%{box-shadow:0 0 0 5px rgba(255,201,77,.1),0 0 22px rgba(255,201,77,.28)}
+  50%{box-shadow:0 0 0 8px rgba(255,201,77,.04),0 0 30px rgba(255,201,77,.45)}}
+/* ============================================================
+   LAYOUT — control desk (left) vs the stage (right).
+   intentionally asymmetric; the two halves are treated differently.
+   ============================================================ */
+.console{display:grid;grid-template-columns:362px 1fr;gap:20px;align-items:start}
+@media(max-width:900px){.console{grid-template-columns:1fr}}
+/* the desk: flat, utilitarian — it's the control surface, not a showpiece */
+.desk{display:flex;flex-direction:column;gap:16px}
+.card{background:var(--stage);border:1px solid var(--line-soft);border-radius:16px;padding:18px}
+.card-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
+.card-h .ic{color:var(--gold);font-size:18px}
+.card-h h2{font-family:Unbounded,sans-serif;font-weight:600;font-size:14px;letter-spacing:.01em}
+.card-h .meta{margin-left:auto;font-family:'Bebas Neue',sans-serif;letter-spacing:.07em;font-size:12px;color:var(--muted-2)}
+/* roll tape drop zone — clapperboard motif */
+.drop{position:relative;border:1.5px dashed var(--line);border-radius:13px;padding:26px 16px;
+  text-align:center;cursor:pointer;transition:.22s var(--fx);overflow:hidden;
+  background:radial-gradient(200px 110px at 50% -20%,rgba(255,201,77,.07),transparent 70%)}
+.drop:hover{border-color:var(--gold);background:radial-gradient(200px 130px at 50% -10%,rgba(255,201,77,.12),transparent 70%)}
+.drop:focus-visible{border-color:var(--cyan)}
+.drop .clap{font-size:30px;color:var(--gold);display:inline-flex;margin-bottom:8px}
+.drop .t{font-family:Unbounded,sans-serif;font-weight:600;font-size:15px}
+.drop .s{font-size:12px;color:var(--muted);margin-top:4px}
+/* loaded: a little filmstrip readout */
+.drop .loaded{display:none;align-items:center;gap:12px;text-align:left}
+.drop.loaded{border-style:solid;border-color:rgba(61,231,255,.45);background:rgba(61,231,255,.05);cursor:default}
+.drop.loaded .ask{display:none}
+.drop.loaded .loaded{display:flex}
+.strip{width:52px;height:52px;border-radius:9px;flex:none;position:relative;overflow:hidden;
+  background:linear-gradient(135deg,var(--raise),var(--stage));border:1px solid var(--line)}
+.strip::before,.strip::after{content:"";position:absolute;top:4px;bottom:4px;width:5px;
+  background:repeating-linear-gradient(var(--night) 0 3px,transparent 3px 7px)}
+.strip::before{left:3px}.strip::after{right:3px}
+.strip .play{position:absolute;inset:0;display:grid;place-items:center;color:var(--cyan);font-size:16px}
+.loaded .fn{font-family:Unbounded,sans-serif;font-weight:600;font-size:13px;color:var(--cream)}
+.loaded .fd{font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;font-size:13px;color:var(--cyan);margin-top:3px}
+/* buttons */
+.btn{width:100%;border:0;cursor:pointer;font-family:Unbounded,sans-serif;font-weight:600;font-size:14px;
+  color:var(--night);padding:14px;border-radius:12px;display:flex;align-items:center;justify-content:center;
+  gap:9px;transition:.18s var(--fx)}
+.btn:disabled{opacity:.4;cursor:not-allowed;background:var(--raise);color:var(--muted-2)}
+.btn.cyan{background:linear-gradient(135deg,var(--cyan),#16b6d8)}
+.btn.cyan:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(61,231,255,.3)}
+.btn.show{font-size:17px;padding:17px;background:linear-gradient(110deg,var(--gold),var(--hot));position:relative;overflow:hidden}
+.btn.show:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(255,61,139,.4)}
+.btn.show:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;width:40%;
+  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
+  transform:translateX(-200%)}
+@media(prefers-reduced-motion:no-preference){
+  .btn.show:not(:disabled)::after{animation:shine 3.4s ease-in-out 1.2s infinite}
 }
+@keyframes shine{0%,100%{transform:translateX(-220%)}40%,60%{transform:translateX(360%)}}
+.mt{margin-top:14px}
+/* casting sweep bar */
+.sweep{height:6px;border-radius:4px;margin-top:13px;background:var(--night-2);position:relative;overflow:hidden;
+  opacity:0;height:0;margin-top:0;transition:.25s}
+.casting .sweep{opacity:1;height:6px;margin-top:13px}
+.sweep::after{content:"";position:absolute;inset:0;width:36%;
+  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
+@media(prefers-reduced-motion:no-preference){.sweep::after{animation:sw 1s linear infinite}}
+@keyframes sw{from{transform:translateX(-120%)}to{transform:translateX(330%)}}
+/* ============================================================
+   THE STAGE — Star Select. theatrical, spotlit well.
+   ============================================================ */
+.stage-panel{background:
+    radial-gradient(80% 60% at 50% -8%, rgba(255,201,77,.07), transparent 60%),
+    linear-gradient(180deg,var(--stage),var(--night-2));
+  border:1px solid var(--line);border-radius:20px;padding:20px;
+  box-shadow:inset 0 1px 0 rgba(255,243,233,.04), 0 24px 60px rgba(8,2,20,.5)}
+.stage-h{display:flex;align-items:center;gap:11px;margin-bottom:16px}
+.stage-h .ic{color:var(--gold);font-size:19px}
+.stage-h h2{font-family:Unbounded,sans-serif;font-weight:700;font-size:16px}
+.stage-h .count{margin-left:auto;white-space:nowrap;font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:14px;
+  color:var(--muted);background:rgba(46,26,82,.6);padding:4px 11px;border-radius:8px}
+/* empty state */
+.empty{display:grid;place-items:center;min-height:330px;text-align:center;padding:20px}
+.empty .spot{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
+  color:var(--muted-2);font-size:46px;
+  background:radial-gradient(circle at 50% 30%,rgba(255,201,77,.08),transparent 70%)}
+.empty .t{font-family:Unbounded,sans-serif;font-weight:600;font-size:17px;color:var(--cream);margin-bottom:6px}
+.empty .s{font-size:13px;color:var(--muted);max-width:300px}
+/* star grid */
+.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:16px}
+/* ---- the star card (one reusable block) ----
+   per-card character color is set inline as --c. */
+/* base state is fully visible — entrance is driven via WAAPI in JS so a
+   backgrounded tab never leaves cards stuck invisible. */
+.star{--c:var(--gold);position:relative;border-radius:16px;overflow:hidden;
+  background:linear-gradient(180deg,var(--stage-2),var(--stage));
+  border:1px solid var(--line);transition:.25s var(--fx)}
+.star:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 60%,transparent)}
+/* portrait well with a spotlight beam tinted to the character color,
+   and an angular framed headshot placeholder (agent-select energy) */
+.portrait{position:relative;height:138px;overflow:hidden;
+  background:radial-gradient(90% 80% at 50% 120%,color-mix(in srgb,var(--c) 22%,var(--night-2)),var(--night-2))}
+.portrait .beam{position:absolute;top:-30px;left:50%;width:150px;height:170px;transform:translateX(-50%);
+  pointer-events:none;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
+  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%);opacity:.7}
+.portrait .head-ph{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
+  color:color-mix(in srgb,var(--c) 50%,#ffffff);opacity:.4}
+.portrait .frame{position:absolute;inset:8px;border:1.5px solid color-mix(in srgb,var(--c) 35%,transparent);
+  border-radius:11px;pointer-events:none}
+.portrait .idx{position:absolute;top:10px;left:10px;font-family:'Bebas Neue',sans-serif;font-size:14px;
+  color:var(--cream);background:rgba(15,6,30,.7);padding:2px 7px;border-radius:7px;display:flex;align-items:center;gap:3px}
+.portrait .idx .st{color:var(--c)}
+.tier{position:absolute;top:10px;right:10px;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:.02em;
+  white-space:nowrap;color:var(--night);background:var(--c);padding:3px 8px;border-radius:7px;
+  box-shadow:0 2px 10px color-mix(in srgb,var(--c) 50%,transparent)}
+/* crown drops in on naming */
+/* crown lifts in above the star's head on naming */
+.crown{position:absolute;top:50px;left:50%;transform:translateX(-50%) translateY(12px) scale(.4) rotate(-12deg);
+  opacity:0;width:30px;height:30px;color:var(--gold);
+  filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--gold) 70%,transparent));
+  transition:.4s var(--pop)}
+.star.named .crown{opacity:1;transform:translateX(-50%) scale(1) rotate(0)}
+.star-body{padding:13px}
+.star-body label{font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:12px;color:var(--muted);
+  display:block;margin-bottom:7px}
+.star input{width:100%;background:var(--night-2);border:1px solid var(--line);color:var(--cream);
+  border-radius:10px;padding:10px 12px;font-family:Nunito;font-weight:800;font-size:14px;outline:none;transition:.16s}
+.star input::placeholder{color:var(--muted-2);font-weight:600}
+.star input:focus{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
+/* crowned: card lights in its own character color */
+.star.named{border-color:color-mix(in srgb,var(--c) 65%,transparent);
+  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 10px 30px color-mix(in srgb,var(--c) 18%,transparent)}
+.star.named .portrait{background:radial-gradient(90% 90% at 50% 120%,color-mix(in srgb,var(--c) 40%,var(--night-2)),var(--night-2))}
+.star.named .portrait .beam{opacity:1}
+.star.named .head-ph{opacity:.6}
+/* ============================================================
+   VIBES (narration modes) + COCO host
+   ============================================================ */
+.vibes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
+.vibe{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;cursor:pointer;color:var(--cream);
+  border:1px solid var(--line-soft);background:var(--stage-2);transition:.18s var(--fx);text-align:left}
+.vibe:hover{border-color:var(--violet);transform:translateY(-1px)}
+.vibe .ic{font-size:20px;color:var(--muted);display:inline-flex;transition:.18s}
+.vibe>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
+.vibe .vt{display:block;font-family:Unbounded,sans-serif;font-weight:600;font-size:13px;color:var(--cream)}
+.vibe .vd{display:block;font-size:11px;color:var(--muted);line-height:1.25}
+.vibe[aria-pressed="true"]{border-color:var(--vc,var(--hot));background:color-mix(in srgb,var(--vc,var(--hot)) 12%,var(--stage-2))}
+.vibe[aria-pressed="true"] .ic{color:var(--vc,var(--hot))}
+/* Coco — the host bug. re-dresses per vibe. */
+.coco{display:flex;align-items:center;gap:13px;margin-top:14px;padding:13px 14px;border-radius:14px;
+  background:linear-gradient(120deg,color-mix(in srgb,var(--vc,var(--violet)) 12%,var(--stage-2)),var(--stage-2));
+  border:1px solid color-mix(in srgb,var(--vc,var(--violet)) 30%,var(--line-soft));transition:.35s var(--fx)}
+.coco .av{position:relative;width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
+  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--vc,var(--violet)) 70%,#fff 5%),var(--vc,var(--violet)));
+  box-shadow:0 6px 18px color-mix(in srgb,var(--vc,var(--violet)) 40%,transparent);transition:.35s var(--fx)}
+.coco .av .bird{width:30px;height:30px;color:var(--night);filter:drop-shadow(0 1px 1px rgba(255,255,255,.3))}
+/* accessory badge sits on the avatar, swapped per vibe */
+.coco .acc{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;
+  display:grid;place-items:center;background:var(--night);border:2px solid var(--vc,var(--violet));
+  color:var(--vc,var(--violet));font-size:11px}
+.coco .acc svg{width:12px;height:12px}
+.coco .say{font-size:13px;line-height:1.45}
+.coco .say b{color:var(--vc,var(--gold))}
+.coco .who{font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:11px;color:var(--vc,var(--violet));
+  display:block;margin-bottom:2px}
+/* privacy footnote — visible, not buried */
+.note{margin-top:26px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.6}
+.note b{color:var(--cream)}
+.note .lock{color:var(--cyan);vertical-align:-2px;margin-right:5px}
+/* ============================================================
+   VIEW SWITCH
+   ============================================================ */
+.view{display:none}
+.view.active{display:block;animation:viewIn .4s var(--fx)}
+@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+/* ============================================================
+   BROADCAST PLAYER
+   ============================================================ */
+.booth-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
+.back{display:inline-flex;align-items:center;gap:8px;background:var(--stage);border:1px solid var(--line);
+  color:var(--cream);font-family:Nunito;font-weight:700;font-size:13px;padding:9px 14px;border-radius:10px;cursor:pointer;transition:.16s}
+.back:hover{border-color:var(--violet)}
+.orient{display:flex;gap:4px;background:var(--stage);border:1px solid var(--line-soft);padding:4px;border-radius:11px}
+.orient button{background:transparent;border:0;color:var(--muted);font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;
+  font-size:13px;padding:7px 14px;border-radius:8px;cursor:pointer;transition:.16s}
+.orient button[aria-pressed="true"]{background:var(--raise);color:var(--gold)}
+.booth{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
+/* portrait: the clip is a phone-sized vertical frame, never a giant column-filling block.
+   capped width keeps the 9:16 height sane and the play-by-play rail beside it. */
+.booth.portrait{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
+.booth.portrait .screen-wrap{max-width:340px}
+@media(max-width:840px){
+  .booth,.booth.square{grid-template-columns:1fr}
+  .booth.portrait{grid-template-columns:1fr}
+  .booth.portrait .screen-wrap{margin-inline:auto}
+}
+/* the screen */
+.screen-wrap{background:#000;border-radius:18px;overflow:hidden;border:1px solid var(--line);
+  box-shadow:0 24px 70px rgba(0,0,0,.6);position:relative}
+.screen{position:relative;width:100%;aspect-ratio:16/9;background:
+    repeating-linear-gradient(135deg,#1c0f33 0 18px,#170c2b 18px 36px);
+  display:grid;place-items:center}
+.booth.portrait .screen{aspect-ratio:9/16}
+.booth.square .screen{aspect-ratio:1/1}
+.screen .ph{font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;color:var(--muted-2);font-size:15px;
+  text-align:center;padding:0 20px}
+.screen .ph svg{width:40px;height:40px;margin:0 auto 10px;color:var(--line);display:block}
+/* on-air bug */
+.bug{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;white-space:nowrap;
+  background:rgba(15,6,30,.6);backdrop-filter:blur(4px);padding:7px 12px;border-radius:9px;
+  font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:14px;color:var(--cream)}
+.bug .dot{width:10px;height:10px;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot)}
+@media(prefers-reduced-motion:no-preference){.bug .dot{animation:tw 1.1s infinite}}
+/* timecode */
+.tc{position:absolute;top:14px;right:14px;background:rgba(15,6,30,.6);backdrop-filter:blur(4px);
+  padding:7px 12px;border-radius:9px;font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:15px;
+  color:var(--cyan);font-variant-numeric:tabular-nums}
+/* lower-third chyron */
+.chyron{position:absolute;left:14px;right:14px;bottom:14px;border-radius:12px;overflow:hidden;
+  background:linear-gradient(100deg,rgba(15,6,30,.92),rgba(36,18,65,.82));
+  border:1px solid color-mix(in srgb,var(--cc,var(--hot)) 40%,var(--line));
+  box-shadow:0 10px 30px rgba(0,0,0,.4);
+  transform:translateY(130%);opacity:0;transition:.45s var(--fx)}
+.chyron.in{transform:none;opacity:1}
+.chyron .bar{height:4px;background:linear-gradient(90deg,var(--cc,var(--hot)),var(--gold))}
+.chyron .row{display:flex;align-items:stretch}
+.chyron .who{display:flex;align-items:center;font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;
+  font-size:17px;color:var(--night);background:var(--cc,var(--hot));padding:10px 14px;white-space:nowrap}
+.chyron .line{padding:10px 16px;font-family:Nunito;font-weight:700;font-size:15px;color:var(--cream);
+  display:flex;align-items:center;line-height:1.3}
+@media(prefers-reduced-motion:no-preference){
+  .chyron.in .line{animation:sharpen .5s var(--fx)}
 }
+@keyframes sharpen{from{filter:blur(7px);opacity:.3}to{filter:blur(0);opacity:1}}
+/* transport */
+.transport{display:flex;align-items:center;gap:14px;margin-top:14px}
+.transport .pp{width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;flex:none;display:grid;place-items:center;
+  background:linear-gradient(135deg,var(--gold),var(--hot));color:var(--night);font-size:20px;transition:.16s}
+.transport .pp:hover{transform:scale(1.05)}
+.scrub{flex:1;height:6px;border-radius:4px;background:var(--raise);position:relative;cursor:pointer}
+.scrub .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;width:0;
+  background:linear-gradient(90deg,var(--hot),var(--gold))}
+.scrub .knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--cream);
+  transform:translate(-50%,-50%);left:0;box-shadow:0 2px 6px rgba(0,0,0,.5)}
+/* play-by-play rail */
+.pbp{background:var(--stage);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
+  display:flex;flex-direction:column;max-height:520px}
+.pbp .pbp-h{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
+.pbp .pbp-h .ic{color:var(--gold);font-size:16px}
+.pbp .pbp-h h3{font-family:Unbounded,sans-serif;font-weight:600;font-size:13px}
+.pbp .pbp-h .ct{margin-left:auto;font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;font-size:12px;color:var(--muted-2)}
+.pbp .lines{overflow-y:auto;padding:6px}
+.pbp .pl{display:flex;gap:11px;padding:11px 12px;border-radius:10px;cursor:pointer;transition:.15s;align-items:baseline}
+.pbp .pl:hover{background:var(--stage-2)}
+.pbp .pl .t{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;font-size:14px;color:var(--muted-2);
+  flex:none;width:42px;font-variant-numeric:tabular-nums;padding-top:1px}
+.pbp .pl .tx{font-size:13px;line-height:1.45;color:var(--muted)}
+.pbp .pl .tx b{color:var(--cream);font-weight:800}
+.pbp .pl.now{background:color-mix(in srgb,var(--cc,var(--hot)) 14%,var(--stage-2))}
+.pbp .pl.now .t{color:var(--cc,var(--hot))}
+.pbp .pl.now .tx{color:var(--cream)}
+.pbp .pl.now .tx b{color:var(--cc,var(--hot))}
+/* export bar */
+.export{padding:13px 16px;border-top:1px solid var(--line-soft);background:var(--night-2)}
+.export .btn-srt{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
+  background:var(--stage-2);border:1px solid var(--line);color:var(--cream);font-family:Nunito;font-weight:700;
+  font-size:13px;padding:12px;border-radius:11px;transition:.16s}
+.export .btn-srt:hover{border-color:var(--cyan);color:var(--cyan)}
+.export .btn-srt .ic{color:var(--cyan);font-size:16px}
+.export .hint{text-align:center;font-size:11px;color:var(--muted-2);margin-top:8px}
+.export .hint b{color:var(--muted)}
+/* confetti */
+.confetti{position:fixed;top:-20px;width:11px;height:14px;z-index:90;pointer-events:none;border-radius:2px}
+@media(prefers-reduced-motion:no-preference){.confetti{animation:fall linear forwards}}
+@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
+/* ============================================================
+   UTILITIES
+   ============================================================ */
+:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
+.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;
+  background:var(--stage-2);border:1px solid var(--cyan);color:var(--cream);padding:12px 20px;border-radius:12px;
+  font-weight:700;font-size:13px;z-index:95;transition:.3s var(--fx);display:flex;align-items:center;gap:9px;
+  box-shadow:0 14px 40px rgba(0,0,0,.5)}
+.toast.show{transform:translateX(-50%);opacity:1}
+.toast .ic{color:var(--cyan)}
+@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+@media(max-width:560px){
+  .masthead{gap:14px}
+  .rundown .sub{display:none}
+  .vibes{grid-template-columns:1fr}
+  .roster{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
 }
+/* ============================================================
+   INTEGRATION ADDITIONS — real <video> in the screen, real face
+   crops in star cards (added for the Gradio wiring)
+   ============================================================ */
+.screen-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
+.screen.has-video .ph{display:none}
+.screen.has-video .screen-vid{display:block}
+.portrait .head-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.star.named .head-img{filter:saturate(1.05)}

marquee.js CHANGED Viewed

@@ -1,636 +1,185 @@
 /* ============================================================
-   MARQUEE STUDIO — JAVASCRIPT
-   marquee.js  (type="module")
    ============================================================ */
-// Local state — declared first so the dynamic import below can reference it
-let isOfflineMode = false;
-// Dynamic import so landing screen works even if Gradio CDN fails to load
-let Client = null;
-try {
-  const gradioModule = await import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js");
-  Client = gradioModule.Client;
-} catch (importErr) {
-  console.warn('[marquee] Gradio client failed to load — running in offline/demo mode.', importErr);
-  isOfflineMode = true;
-}
 const $  = (s, r = document) => r.querySelector(s);
 const $$ = (s, r = document) => [...r.querySelectorAll(s)];
 const reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
 const pad = n => String(n).padStart(2, '0');
-let currentVibe = 'football';
-let currentVoiceModel = 'chatterbox';
-let SESSION = null, VIDEO_URL = null, DUR = 0, REAL_SCRIPT = [], selectedFile = null;
-let TTS_LINES = [];
-let stars = [];
-/* ============================================================
-   THEME LANGUAGE PARAMETERS (Per Vibe)
-   ============================================================ */
-const THEME_COPY = {
-  football: {
-    mastheadTag:    "Everyone's a headliner.",
-    mastheadSub:    "Turn any clip into a live broadcast.",
-    step1Ttl: "Roll Tape",    step1Sub: "Drop a clip",
-    step2Ttl: "Scouting",    step2Sub: "Find the players",
-    step3Ttl: "Squad",        step3Sub: "Name them up",
-    step4Ttl: "Kick Off",     step4Sub: "Go live",
-    rollCardTitle:  "Roll the Footage",
-    dropTitle:      "Drop your clip on the pitch",
-    castBtnLabel:   "Scout the pitch",
-    liveBtnLabel:   "Kick off | go live",
-    stageTitle:     "Squad Select",
-    stageEmptyTitle:"No players spotted",
-    stageEmptySub:  "Roll a clip and hit <b>Scout the pitch</b> | every face gets a squad card.",
-    backBtnLabel:   "Back to dugout",
-    pbpTitle:       "Match commentary",
-    noteText:       "Your clip stays on <b>your device</b>. Player detection runs locally | Marquee only writes the captions.",
-  },
-  diva: {
-    mastheadTag:    "Everyone's a headliner.",
-    mastheadSub:    "Your private red carpet, darling.",
-    step1Ttl: "The Footage",  step1Sub: "Drop your clip",
-    step2Ttl: "Spotting",     step2Sub: "Who's arriving",
-    step3Ttl: "Guest List",   step3Sub: "Name them, darling",
-    step4Ttl: "Showtime",     step4Sub: "Walk the carpet",
-    rollCardTitle:  "The Footage",
-    dropTitle:      "Drop the clip, darling",
-    castBtnLabel:   "Who's arriving?",
-    liveBtnLabel:   "Walk the carpet | go live",
-    stageTitle:     "Tonight's Guests",
-    stageEmptyTitle:"The carpet is empty",
-    stageEmptySub:  "Roll a clip and hit <b>Who's arriving?</b> | every face gets a star card.",
-    backBtnLabel:   "Back to the green room",
-    pbpTitle:       "Red carpet commentary",
-    noteText:       "Your clip is yours, darling. Detection is entirely local | Marquee only writes what it sees.",
-  },
-  wildlife: {
-    mastheadTag:    "Everyone's a headliner.",
-    mastheadSub:    "Observing humans in their natural habitat.",
-    step1Ttl: "The Footage",  step1Sub: "Drop a clip",
-    step2Ttl: "Field Survey", step2Sub: "Locate specimens",
-    step3Ttl: "Field Notes",  step3Sub: "Name the creatures",
-    step4Ttl: "Roll Camera",  step4Sub: "Observe",
-    rollCardTitle:  "The Footage",
-    dropTitle:      "Place your clip here quietly",
-    castBtnLabel:   "Locate specimens",
-    liveBtnLabel:   "Roll camera | observe",
-    stageTitle:     "Field Notes",
-    stageEmptyTitle:"No specimens located",
-    stageEmptySub:  "Roll a clip and hit <b>Locate specimens</b> | each creature gets a field card.",
-    backBtnLabel:   "Back to field base",
-    pbpTitle:       "Field observations",
-    noteText:       "Your footage remains undisturbed. Detection runs locally | Marquee only records observations.",
-  },
-  boxing: {
-    mastheadTag:    "Everyone's a headliner.",
-    mastheadSub:    "Ringside. Every move is championship-defining.",
-    step1Ttl: "The Fight Tape", step1Sub: "Drop the clip",
-    step2Ttl: "Corner Scan",    step2Sub: "Find the fighters",
-    step3Ttl: "Fighter Cards",  step3Sub: "Name the contenders",
-    step4Ttl: "Ring Bell",      step4Sub: "Go ringside",
-    rollCardTitle:  "Fight Tape",
-    dropTitle:      "Drop the fight footage",
-    castBtnLabel:   "Find the fighters",
-    liveBtnLabel:   "Ding ding | go ringside",
-    stageTitle:     "Fighter Cards",
-    stageEmptyTitle:"No fighters in the ring",
-    stageEmptySub:  "Roll a clip and hit <b>Find the fighters</b> | every face gets a fighter card.",
-    backBtnLabel:   "Back to the corner",
-    pbpTitle:       "Ringside commentary",
-    noteText:       "Your footage stays local. Fighter detection never leaves your device | Marquee only calls the action.",
-  },
-  masterchef: {
-    mastheadTag:    "Everyone's a headliner.",
-    mastheadSub:    "This is not a cooking show. This is a reckoning.",
-    step1Ttl: "The Footage",    step1Sub: "Submit your clip",
-    step2Ttl: "Assessment",     step2Sub: "Identify contestants",
-    step3Ttl: "Contestants",    step3Sub: "Name them",
-    step4Ttl: "Begin the Cook", step4Sub: "Judge them",
-    rollCardTitle:  "Submit Your Footage",
-    dropTitle:      "Place your clip on the pass",
-    castBtnLabel:   "Assess the contestants",
-    liveBtnLabel:   "Begin the cook | judge them",
-    stageTitle:     "Contestant Board",
-    stageEmptyTitle:"No contestants present",
-    stageEmptySub:  "Submit a clip and hit <b>Assess the contestants</b> | each face gets a contestant card.",
-    backBtnLabel:   "Back to the kitchen",
-    pbpTitle:       "Judge's commentary",
-    noteText:       "Your footage is submitted locally. Identification runs on-device | Marquee only delivers the verdict.",
-  },
-};
-/* ============================================================
-   PREVIEW SIMULATOR FALLBACK DATA
-   ============================================================ */
-const MOCK_SCRIPTS = {
-  football: [
-    { t: 1,  text: "Welcome to the pitch! The players are in position, and tension is through the roof." },
-    { t: 5,  text: "Look at {Star1}! Unbelievable close control. A magnificent exhibition of touch and spatial awareness." },
-    { t: 11, text: "And now {Star2} steps in! Making their presence known. Defending with extreme, calculated precision!" },
-    { t: 17, text: "Play is turning fast. We are witness to absolute tactical magic here today!" },
-    { t: 23, text: "The stadium holds its breath. A phenomenal display of pure champion determination!" }
-  ],
-  diva: [
-    { t: 1,  text: "Darling, the spotlight is officially active! Let's examine who is gracing us with their presence." },
-    { t: 5,  text: "Here comes {Star1}! Oh, that structure. That posture. It screams pure designer elegance, but are we loving the accessories?" },
-    { t: 11, text: "But wait! {Star2} is making a move! The crowd is absolutely gasping. The pure theatricality of this entrance is divine." },
-    { t: 17, text: "It is an absolute masterclass in walking the carpet, darling. Spectacularly unbothered." },
-    { t: 23, text: "We are witnessing iconic history tonight. Put it on the cover of VOGUE!" }
-  ],
-  wildlife: [
-    { t: 1,  text: "We are deep in the Serengeti. A spectacular ecosystem unfolding before us." },
-    { t: 5,  text: "Notice {Star1} rising from the grasslands. Moving with deliberate, majestic intent." },
-    { t: 11, text: "A second specimen has appeared! That is {Star2}. Tracking the perimeter. Truly a stunning sight." },
-    { t: 17, text: "Observe how they interact. A delicate dance of absolute natural balance." },
-    { t: 23, text: "Nature at its most pristine and untouched. A truly marvelous encounter." }
-  ],
-  boxing: [
-    { t: 1,  text: "Ladies and gentlemen... we are RINGSIDE! The absolute atmosphere of champion combat!" },
-    { t: 5,  text: "In the red corner... {Star1}! Unmatched speed. A fighter with absolutely nothing to lose!" },
-    { t: 11, text: "And facing them... {Star2}! Heavy feet, iron jaw. What a spectacular counter-stance!" },
-    { t: 17, text: "They are exchanging glances now! The arena is deafening! Nobody is backing down!" },
-    { t: 23, text: "Ding ding! The bell signals pure, raw tactical chaos. Who takes the belt?!" }
-  ],
-  masterchef: [
-    { t: 1,  text: "This kitchen is a place of precision. There is absolutely no room for failure today." },
-    { t: 5,  text: "Contestant {Star1} is at the pass. Their knife skills are elegant, but that reduction smells of pure desperation." },
-    { t: 11, text: "Now look at {Star2}. A brave concept. Bold plating. But let's see if the flavor lives up to the presentation." },
-    { t: 17, text: "The tension is absolute. This is not a cooking show, it is a clinical reckoning of your technique." },
-    { t: 23, text: "The judges are silent. A single bite will seal your absolute fate today." }
-  ]
-};
-const MOCK_FACE_CROPS = [
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23FFC94D'%3E%3Ccircle cx='50' cy='45' r='20'/%3E%3Cpath d='M20 85 C20 65 35 55 50 55 C65 55 80 65 80 85 Z'/%3E%3C/svg%3E",
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%233DE7FF'%3E%3Ccircle cx='50' cy='45' r='20'/%3E%3Cpath d='M20 85 C20 65 35 55 50 55 C65 55 80 65 80 85 Z'/%3E%3C/svg%3E",
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23FF4D9A'%3E%3Ccircle cx='50' cy='45' r='20'/%3E%3Cpath d='M20 85 C20 65 35 55 50 55 C65 55 80 65 80 85 Z'/%3E%3C/svg%3E"
-];
-/* ============================================================
-   LANDING — Vibe Selector
-   ============================================================ */
-// Landing is visible by default (no splash screen). It hides once a vibe is picked.
-const landingView = $('#landingView');
-$('#landingVibes').addEventListener('click', e => {
-  const card = e.target.closest('.lv-card');
-  if (!card) return;
-  const vibe = card.dataset.vibe;
-  landingView.classList.add('hidden');
-  $('#appShell').hidden = false;
-  applyVibe(vibe);
-});
-/* ============================================================
-   THEME APPLICATION
-   ============================================================ */
-const VIBES = {
-  football:   { acc:'#i-whistle', vc:'--star-lime',   who:'Football Championship',
-    coco:"World Cup energy. Roaring play-by-play commentary for the beautiful game." },
-  diva:       { acc:'#i-glam',    vc:'--star-hot',    who:'Diva Hour Glamour',
-    coco:"Red carpet glamour. Fashion feedback, high drama, and unsolicited feedback." },
-  wildlife:   { acc:'#i-paw',     vc:'--star-cyan',   who:'Wildlife Expedition',
-    coco:"Hushed. Awestruck. Narrating your friends like rare creatures in the wild." },
-  boxing:     { acc:'#i-glove',   vc:'--star-tang',   who:'Ringside Boxing',
-    coco:"Ringside. Every move is championship-defining. Nobody is safe from the hype." },
-  masterchef: { acc:'#i-chef',    vc:'--star-gold',   who:'MasterChef Judgment',
-    coco:"High stakes. Brutal precision. A cooking-show judge who takes everything personally." },
-};
-function applyVibe(vibe) {
-  document.body.setAttribute('data-vibe', vibe);
-  currentVibe = vibe;
-  const copy     = THEME_COPY[vibe] || THEME_COPY.football;
-  const vibeData = VIBES[vibe] || {};
-  const tag = $('#mastheadTag');
-  if (tag) {
-    tag.childNodes[0].textContent = copy.mastheadTag;
-    const small = tag.querySelector('small');
-    if (small) small.textContent = copy.mastheadSub;
-  }
-  _setText('step1Ttl', copy.step1Ttl); _setText('step1Sub', copy.step1Sub);
-  _setText('step2Ttl', copy.step2Ttl); _setText('step2Sub', copy.step2Sub);
-  _setText('step3Ttl', copy.step3Ttl); _setText('step3Sub', copy.step3Sub);
-  _setText('step4Ttl', copy.step4Ttl); _setText('step4Sub', copy.step4Sub);
-  _setText('rollCardTitle',   copy.rollCardTitle);
-  _setText('dropTitle',       copy.dropTitle);
-  _setText('castBtnLabel',    copy.castBtnLabel);
-  _setText('liveBtnLabel',    copy.liveBtnLabel);
-  _setText('stageTitle',      copy.stageTitle);
-  _setText('stageEmptyTitle', copy.stageEmptyTitle);
-  _setHTML('stageEmptySub',   copy.stageEmptySub);
-  _setText('pbpTitle',        copy.pbpTitle);
-  _setHTML('noteText',        copy.noteText);
-  _setText('backBtnLabel',    copy.backBtnLabel);
-  _setText('vibeBannerName', vibeData.who  || '');
-  _setText('vibeBannerDesc', vibeData.coco || '');
-  const vibeBanner = $('#vibeBanner');
-  if (vibeBanner && vibeData) {
-    vibeBanner.style.setProperty('--vc', `var(${vibeData.vc})`);
-    vibeBanner.style.borderColor       = `color-mix(in srgb, var(${vibeData.vc}) 25%, transparent)`;
-    vibeBanner.style.backgroundColor   = `color-mix(in srgb, var(${vibeData.vc}) 8%, var(--stage))`;
-  }
-  const vibeBannerIcon = $('#vibeBannerIcon');
-  if (vibeBannerIcon && vibeData) {
-    vibeBannerIcon.innerHTML = `<svg class="i" style="width:20px; height:20px;"><use href="${vibeData.acc}"/></svg>`;
-    vibeBannerIcon.style.color            = `var(${vibeData.vc})`;
-    vibeBannerIcon.style.backgroundColor  = `color-mix(in srgb, var(${vibeData.vc}) 15%, transparent)`;
-  }
-  const bannerWave = $('#bannerWave');
-  if (bannerWave && vibeData) {
-    bannerWave.style.setProperty('--vc', `var(${vibeData.vc})`);
-  }
-  updateChangeShowButton(vibe);
-  playSoundEffect(vibe);
-}
-function _setText(id, val) {
-  const el = $('#' + id);
-  if (el && val !== undefined) el.textContent = val;
-}
-function _setHTML(id, val) {
-  const el = $('#' + id);
-  if (el && val !== undefined) el.innerHTML = val;
-}
-$('#changeVibeBtn')?.addEventListener('click', () => {
-  landingView.classList.remove('hidden');
-  $('#appShell').hidden = true;
-});
-function updateChangeShowButton(vibe) {
-  const btn = $('#changeVibeBtn');
-  if (!btn) return;
-  btn.style.setProperty('--primary', `var(${VIBES[vibe]?.vc || '--primary'})`);
-}
-/* ============================================================
-   API FETCH & EXPORT INTEGRATIONS
-   ============================================================ */
 const BASE = window.location.origin;
 async function apiScan(file) {
-  if (isOfflineMode) {
-    await new Promise(r => setTimeout(r, 1200));
-    return {
-      session_id: "preview_session_" + Math.random().toString(36).substr(2, 9),
-      video_url: "",
-      duration: 30,
-      w: 1080, h: 1080,   // 1:1 hardcoded
-      stars: [
-        { tier: 'VIP',       crop: MOCK_FACE_CROPS[0] },
-        { tier: 'CONSTRUCT', crop: MOCK_FACE_CROPS[1] },
-        { tier: 'SPECTATOR', crop: MOCK_FACE_CROPS[2] }
-      ]
-    };
-  }
   const fd = new FormData();
   fd.append('file', file, file.name);
-  const res  = await fetch(`${BASE}/api/scan`, { method: 'POST', body: fd });
   const data = await res.json();
   if (!data.ok) throw new Error(data.error || 'scan failed');
   return data;
 }
-async function apiGenerate(sessionId, names, vibe) {
-  if (isOfflineMode) {
-    await new Promise(r => setTimeout(r, 1500));
-    const baseScript = MOCK_SCRIPTS[vibe] || MOCK_SCRIPTS.football;
-    const star1 = names[0] || "Contender Alpha";
-    const star2 = names[1] || "Contender Beta";
-    const renderedScript = baseScript.map(line => {
-      let rText = line.text.replace(/{Star1}/g, star1).replace(/{Star2}/g, star2);
-      return { t: line.t, text: rText };
-    });
-    return { script: renderedScript };
-  }
-  if (!Client) throw new Error('Gradio client not available — backend required');
-  const client = await Client.connect(BASE);
-  const result = await client.predict('/generate', { session_id: sessionId, names, vibe });
-  const data   = result?.data?.[0];
-  if (!data || data.ok === false) throw new Error((data && data.error) || 'generate failed');
-  return data;
 }
-async function apiTts(sessionId, vibe, script, voiceModel = 'chatterbox') {
-  if (isOfflineMode) {
-    return script.map(l => ({ ...l, audio_b64: null, duration: 4 }));
-  }
-  const res  = await fetch(`${BASE}/api/tts`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ session_id: sessionId, vibe, script, voice_model: voiceModel }),
   });
-  const data = await res.json();
-  if (!data.ok) throw new Error(data.error || 'tts failed');
-  return data.lines;
-}
-/* ============================================================
-   WEB AUDIO SYNTH ENGINE
-   ============================================================ */
-class AudioEngine {
-  constructor() {
-    this.ctx = null;
-    this.videoNode = null;
-    this.duckGain = null;
-    this.commentaryGain = null;
-    this.buffers = [];
-    this.sources = [];
-    this.duckTimers = [];
-    this._ready = false;
-  }
-  async init(videoEl, ttsLines) {
-    if (!this.ctx) {
-      this.ctx = new (window.AudioContext || window.webkitAudioContext)();
-    }
-    if (this.ctx.state === 'suspended') await this.ctx.resume();
-    if (!this.videoNode) {
-      this.videoNode       = this.ctx.createMediaElementSource(videoEl);
-      this.duckGain        = this.ctx.createGain();
-      this.commentaryGain  = this.ctx.createGain();
-      this.videoNode.connect(this.duckGain);
-      this.duckGain.connect(this.ctx.destination);
-      this.commentaryGain.connect(this.ctx.destination);
-    }
-    this.duckGain.gain.value       = 1.0;
-    this.commentaryGain.gain.value = parseFloat($('#volCommentary')?.value ?? 1);
-    this.buffers = await Promise.all(
-      ttsLines.map(async (line) => {
-        if (!line.audio_b64) return null;
-        try {
-          const bytes = Uint8Array.from(atob(line.audio_b64), c => c.charCodeAt(0));
-          return await this.ctx.decodeAudioData(bytes.buffer);
-        } catch(e) {
-          console.warn('[audio] decode failed for line:', line.text, e);
-          return null;
-        }
-      })
-    );
-    this.sources  = new Array(ttsLines.length).fill(null);
-    this._ready   = true;
-  }
-  scheduleAll(videoEl, ttsLines) {
-    if (!this._ready || !this.ctx) return;
-    const now    = this.ctx.currentTime;
-    const vidNow = videoEl.currentTime;
-    const vidDur = videoEl.duration || DUR || 999;
-    this._cancelAll();
-    ttsLines.forEach((line, i) => {
-      const buf = this.buffers[i];
-      if (!buf) return;
-      const startOffset = line.t - vidNow;
-      if (startOffset < -0.1) return;
-      if (line.t >= vidDur) return;
-      const src = this.ctx.createBufferSource();
-      src.buffer = buf;
-      src.connect(this.commentaryGain);
-      const startAt = now + Math.max(0, startOffset);
-      src.start(startAt);
-      this.sources[i] = src;
-      const lineDur  = line.duration ?? buf.duration;
-      const duckLevel = parseFloat($('#volDuck')?.value ?? 0.2);
-      const fadeT    = 0.08;
-      const g        = this.duckGain.gain;
-      g.cancelScheduledValues(startAt - fadeT);
-      g.setValueAtTime(1.0, startAt - fadeT);
-      g.linearRampToValueAtTime(duckLevel, startAt + fadeT);
-      g.setValueAtTime(duckLevel, startAt + lineDur - fadeT);
-      g.linearRampToValueAtTime(1.0, startAt + lineDur + fadeT);
-    });
-  }
-  pause() {
-    if (!this._ready) return;
-    this._cancelAll();
-    if (this.duckGain) {
-      this.duckGain.gain.cancelScheduledValues(0);
-      this.duckGain.gain.setValueAtTime(1.0, 0);
-    }
-  }
-  setCommentaryVolume(v) {
-    if (this.commentaryGain) this.commentaryGain.gain.value = v;
-  }
-  _cancelAll() {
-    this.sources.forEach(src => { try { src?.stop(); } catch(e){} });
-    this.sources = new Array(this.sources.length).fill(null);
-    if (this.duckGain) {
-      this.duckGain.gain.cancelScheduledValues(0);
-      this.duckGain.gain.setValueAtTime(1.0, 0);
-    }
-  }
 }
-const AUDIO = new AudioEngine();
-/* ============================================================
-   VIBE CHANGE SOUND FX
-   ============================================================ */
-let soundCtx = null;
-function playSoundEffect(vibe) {
-  try {
-    if (!soundCtx) soundCtx = new (window.AudioContext || window.webkitAudioContext)();
-    if (soundCtx.state === 'suspended') soundCtx.resume();
-    const t   = soundCtx.currentTime;
-    const osc = soundCtx.createOscillator();
-    const g   = soundCtx.createGain();
-    osc.connect(g); g.connect(soundCtx.destination);
-    if (vibe === 'football') {
-      osc.type = 'triangle';
-      osc.frequency.setValueAtTime(1000, t);
-      osc.frequency.exponentialRampToValueAtTime(1200, t + 0.1);
-      osc.frequency.setValueAtTime(1000, t + 0.12);
-      osc.frequency.exponentialRampToValueAtTime(1300, t + 0.25);
-      g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(0.12, t + 0.02); g.gain.exponentialRampToValueAtTime(0, t + 0.3);
-      osc.start(t); osc.stop(t + 0.35);
-    } else if (vibe === 'diva') {
-      osc.type = 'sine';
-      osc.frequency.setValueAtTime(440, t); osc.frequency.exponentialRampToValueAtTime(1760, t + 0.5);
-      g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(0.1, t + 0.05); g.gain.exponentialRampToValueAtTime(0, t + 0.5);
-      osc.start(t); osc.stop(t + 0.55);
-    } else if (vibe === 'wildlife') {
-      osc.type = 'sine';
-      osc.frequency.setValueAtTime(2500, t);
-      g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(0.04, t + 0.02); g.gain.exponentialRampToValueAtTime(0, t + 0.2);
-      const osc2 = soundCtx.createOscillator();
-      const g2   = soundCtx.createGain();
-      osc2.type  = 'sine'; osc2.frequency.setValueAtTime(2500, t + 0.22);
-      osc2.connect(g2); g2.connect(soundCtx.destination);
-      g2.gain.setValueAtTime(0, t + 0.22); g2.gain.linearRampToValueAtTime(0.04, t + 0.24); g2.gain.exponentialRampToValueAtTime(0, t + 0.42);
-      osc.start(t); osc.stop(t + 0.22); osc2.start(t + 0.22); osc2.stop(t + 0.45);
-    } else if (vibe === 'boxing') {
-      osc.type = 'sine'; osc.frequency.setValueAtTime(587.33, t);
-      g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(0.25, t + 0.01); g.gain.exponentialRampToValueAtTime(0.001, t + 1.2);
-      osc.start(t); osc.stop(t + 1.3);
-    } else if (vibe === 'masterchef') {
-      osc.type = 'triangle'; osc.frequency.setValueAtTime(987.77, t);
-      g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(0.15, t + 0.01); g.gain.exponentialRampToValueAtTime(0.001, t + 0.5);
-      osc.start(t); osc.stop(t + 0.5);
-    }
-  } catch(err) {
-    console.log("AudioContext blocked or uninitialized", err);
-  }
 }
-/* ============================================================
-   INTERFACE CLOCK
-   ============================================================ */
 const clocks = $$('#clock');
-function fmtClock(d) { return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; }
-setInterval(() => { const t = fmtClock(new Date()); clocks.forEach(c => c.textContent = t); }, 1000);
-clocks.forEach(c => c.textContent = fmtClock(new Date()));
-/* ============================================================
-   STATUS BAR
-   ============================================================ */
-const status = $('#status'), statusTxt = $('#statusTxt');
-function setStatus(txt, live) { statusTxt.textContent = txt; status.classList.toggle('live', !!live); }
-/* ============================================================
-   RUNDOWN TRACKER
-   ============================================================ */
-const cues = $$('#rundown .cue');
-function setStep(n) {
-  cues.forEach(c => {
-    const s = +c.dataset.step;
-    c.classList.toggle('done', s < n);
-    c.classList.toggle('on',   s === n);
-    if (s < n) c.querySelector('.node').innerHTML = '<svg class="i" style="width:18px;height:18px"><use href="#i-check"/></svg>';
-    else        c.querySelector('.node').textContent = '0' + s;
   });
 }
-/* ============================================================
-   ROLL TAPE (File Upload)
-   ============================================================ */
-const drop = $('#drop'), castBtn = $('#castBtn'), liveBtn = $('#liveBtn'), rollCard = $('#rollCard');
-const fileInput = $('#fileInput'), fileName = $('#fileName'), fileDur = $('#fileDur');
-function handleFile(file) {
-  if (!file) return;
-  selectedFile = file;
   drop.classList.add('loaded');
-  fileName.textContent = file.name;
-  fileDur.textContent  = 'reading…';
-  const url   = URL.createObjectURL(file);
-  const probe = document.createElement('video');
-  probe.preload = 'metadata';
-  probe.onloadedmetadata = () => { fileDur.textContent = fmt(probe.duration) + ' | ready to cast'; URL.revokeObjectURL(url); };
-  probe.onerror          = () => { fileDur.textContent = 'ready to cast'; };
-  probe.src = url;
-  castBtn.disabled = false;
-  setStatus('Tape loaded'); toast('Tape loaded | ready to cast');
 }
-drop.addEventListener('click', () => fileInput.click());
-drop.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); } });
-fileInput.addEventListener('change', e => handleFile(e.target.files[0]));
-['dragover','dragenter'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.style.borderColor = 'var(--primary)'; }));
-['dragleave','drop'].forEach(ev => drop.addEventListener(ev, e => {
-  e.preventDefault(); drop.style.borderColor = '';
-  if (ev === 'drop' && e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
 }));
-/* ============================================================
-   SCAN PROCESS
-   ============================================================ */
-const stagePanel = $('#stagePanel'), stageEmpty = $('#stageEmpty'), roster = $('#roster'), starCount = $('#starCount');
-castBtn.addEventListener('click', startCasting);
-async function startCasting() {
-  if (castBtn.disabled || (!selectedFile && !isOfflineMode)) return;
-  castBtn.disabled = true; rollCard.classList.add('casting');
   setStep(2); setStatus('Casting…');
-  castBtn.innerHTML = '<svg class="i"><use href="#i-spot"/></svg> Scanning the tape…';
-  sessionStorage.removeItem('mq_scan');
-  try {
     toast('Uploading tape…');
     const data = await apiScan(selectedFile);
-    SESSION = data.session_id; VIDEO_URL = data.video_url; DUR = data.duration || 0;
-    const v = $('#vid');
-    if (VIDEO_URL) { v.src = VIDEO_URL; $('#screen').classList.add('has-video'); }
-    sessionStorage.setItem('mq_scan', JSON.stringify({
-      session_id: data.session_id, video_url: data.video_url,
-      duration: data.duration || 0, w: data.w, h: data.h, stars: data.stars || [],
-    }));
-    revealCast(data.stars || []);
-  } catch(err) {
     setStatus('Casting failed');
-    toast('Casting failed: ' + (err.message || err));
     rollCard.classList.remove('casting');
-    castBtn.disabled = false;
-    castBtn.innerHTML = '<svg class="i"><use href="#i-spot"/></svg> Find the stars';
   }
 }
-function revealCast(starData) {
   rollCard.classList.remove('casting');
-  castBtn.innerHTML = '<svg class="i"><use href="#i-spot"/></svg> Re-cast';
-  castBtn.disabled  = false;
-  setStep(3); setStatus(starData.length + ' stars found');
-  stars = starData.map((s, i) => ({ name:'', tier: s.tier || 'STAR', color: COLORS[i % COLORS.length], crop: s.crop || null }));
-  stageEmpty.style.display = 'none';
-  roster.hidden = false; roster.innerHTML = '';
-  starCount.textContent = stars.length + ' STARS FOUND';
-  stars.forEach((s, i) => roster.appendChild(buildStar(s, i)));
-  if (!stars.length) {
-    stageEmpty.style.display = '';
-    stageEmpty.querySelector('.t').textContent = 'No stars spotted';
-    stageEmpty.querySelector('.s').innerHTML   = 'No faces found | but the show still goes on. Pick a vibe and go live for nameless narration.';
-    roster.hidden = true;
   }
-  toast(stars.length ? stars.length + ' stars found | give them stage names' : 'No faces found | you can still go live');
   refreshLive();
 }
-/* ============================================================
-   STAR CARD BUILDER
-   ============================================================ */
-const COLORS = ['--star-gold','--star-hot','--star-cyan','--star-violet','--star-lime','--star-tang'];
-function buildStar(s, i) {
-  const el = document.createElement('div');
-  el.className = 'star';
-  el.style.setProperty('--c', `var(${s.color})`);
-  if (!reduce) {
     el.animate(
-      [{ opacity:0, transform:'translateY(14px) scale(.98)' }, { opacity:1, transform:'none' }],
-      { duration:480, delay: i * 90, easing:'cubic-bezier(.2,.9,.25,1)', fill:'backwards' }
     );
   }
   const portrait = s.crop
     ? `<img class="head-img" src="${s.crop}" alt="Player ${i+1}">`
     : `<svg class="i head-ph" style="width:64px;height:68px"><use href="#i-portrait"/></svg>`;
-  el.innerHTML = `
     <div class="portrait">
       <div class="beam"></div>
       ${portrait}
@@ -641,342 +190,230 @@ function buildStar(s, i) {
     </div>
     <div class="star-body">
       <label for="star${i}">Stage name</label>
-      <input id="star${i}" type="text" placeholder="e.g. The Maestro" value="${s.name}" maxlength="22" autocomplete="off">
     </div>`;
-  const input = el.querySelector('input');
-  input.addEventListener('input', () => {
-    const v = input.value.trim();
-    s.name = v;
-    const wasNamed = el.classList.contains('named');
-    el.classList.toggle('named', !!v);
-    if (v && !wasNamed && !reduce) popCrown(el);
     refreshLive();
   });
   return el;
 }
-function popCrown(el) {
-  const c = el.querySelector('.crown');
-  c.style.animation = 'none'; void c.offsetWidth;
-  c.animate(
-    [{ transform:'translateX(-50%) translateY(10px) scale(.4) rotate(-12deg)', opacity:0 },
-     { transform:'translateX(-50%) scale(1.25) rotate(8deg)', opacity:1, offset:.6 },
-     { transform:'translateX(-50%) scale(1) rotate(0)', opacity:1 }],
-    { duration:480, easing:'cubic-bezier(.2,1.7,.4,1)' }
-  );
 }
-/* ============================================================
-   VOICE SELECTORS
-   ============================================================ */
-const voiceOpts = $('#voiceOpts');
-if (voiceOpts) {
-  voiceOpts.addEventListener('click', e => {
-    const btn = e.target.closest('.voice-opt');
-    if (!btn) return;
-    $$('.voice-opt', voiceOpts).forEach(b => b.setAttribute('aria-pressed', 'false'));
-    btn.setAttribute('aria-pressed', 'true');
-    currentVoiceModel = btn.dataset.model;
-  });
 }
-/* ============================================================
-   SHOWTIME VALIDATORS
-   ============================================================ */
-function namedCount()  { return stars.filter(s => s.name).length; }
-function refreshLive() {
-  liveBtn.disabled = !(currentVibe && (SESSION || isOfflineMode));
-  if (stars.length) {
-    const n = namedCount();
-    starCount.textContent = n ? `${n}/${stars.length} NAMED` : `${stars.length} STARS FOUND`;
   }
 }
-/* ============================================================
-   GENERATION SEQUENCE
-   ============================================================ */
-liveBtn.addEventListener('click', async () => {
-  if (liveBtn.disabled) return;
-  liveBtn.disabled = true;
-  liveBtn.innerHTML = '<svg class="i"><use href="#i-star"/></svg> Rolling cameras…';
   setStatus('Generating…');
-  try {
-    const names = stars.map(s => s.name || '');
-    const data  = await apiGenerate(SESSION, names, currentVibe);
-    REAL_SCRIPT  = data.script || [];
-    setStatus('Generating voice…');
-    liveBtn.innerHTML = '<svg class="i"><use href="#i-star"/></svg> Recording voice…';
-    toast('Script ready | recording Coco\'s voice…');
-    try {
-      TTS_LINES = await apiTts(SESSION, currentVibe, REAL_SCRIPT, currentVoiceModel);
-    } catch(ttsErr) {
-      console.warn('[tts] TTS failed, continuing without audio:', ttsErr);
-      TTS_LINES = REAL_SCRIPT.map(l => ({ ...l }));
-      toast('Voice unavailable | showing captions only');
-    }
-    setStep(4); setStatus('On air', true);
-    if (!reduce) confetti();
     buildBroadcast();
-    setTimeout(() => { switchView('broadcast'); }, reduce ? 0 : 450);
-  } catch(err) {
     setStatus('Showtime failed');
-    toast('Showtime failed: ' + (err.message || err));
-  } finally {
-    liveBtn.disabled  = false;
-    liveBtn.innerHTML = '<svg class="i"><use href="#i-star"/></svg> Showtime | go live';
   }
 });
-/* ============================================================
-   VIEW CONTROLLERS
-   ============================================================ */
-const setupView = $('#setupView'), broadcastView = $('#broadcastView');
-function switchView(which) {
-  const toBroadcast = which === 'broadcast';
-  setupView.classList.toggle('active',    !toBroadcast);
-  broadcastView.classList.toggle('active', toBroadcast);
-  if (toBroadcast) buildAudioControls();
-  window.scrollTo({ top:0, behavior: reduce ? 'auto' : 'smooth' });
 }
-$('#backBtn').addEventListener('click', () => {
-  switchView('setup');
-  const v = $('#vid');
-  if (v) v.pause();
-  AUDIO.pause();
-});
 /* ============================================================
-   BROADCAST MONITOR PLAYER
    ============================================================ */
-let script = [];
-const vid = $('#vid'), screen = $('#screen'), chyron = $('#chyron'), chyWho = $('#chyWho'), chyLine = $('#chyLine'),
-      linesEl = $('#lines'), pbpCt = $('#pbpCt'), tcEl = $('#tc'), fill = $('#fill'), knob = $('#knob'),
-      pp = $('#pp'), scrub = $('#scrub'), tcDur = $('#tcDur');
-const ICON_PLAY  = '<svg class="i"><use href="#i-play"/></svg>';
-const ICON_PAUSE = '<svg class="i"><use href="#i-pause"/></svg>';
-function fmt(s) { s = isFinite(s) ? s : 0; return pad(Math.floor(s / 60)) + ':' + pad(Math.floor(s % 60)); }
-function buildBroadcast() {
-  const d   = VIBES[currentVibe] || { vc:'--primary', who:'COCO' };
-  const who = (d.who || 'COCO').split(' ')[0];
-  script = (REAL_SCRIPT || []).map(l => ({ t: +l.t || 0, text: l.text || '', who, cc: d.vc }));
-  linesEl.innerHTML = '';
-  pbpCt.textContent = script.length + ' LINES';
-  if (!script.length) {
-    linesEl.innerHTML = '<div class="pl"><span class="tx">No commentary generated | try another clip.</span></div>';
   }
-  script.forEach((l, i) => {
-    const row = document.createElement('div');
-    row.className = 'pl'; row.dataset.i = i;
-    row.style.setProperty('--cc', `var(${l.cc})`);
-    const hasAudio = TTS_LINES[i]?.audio_b64 ? 'Voice: ' : '';
-    row.innerHTML = `<span class="t">${fmt(l.t)}</span><span class="tx"><b>${l.who}</b> | ${hasAudio}${l.text}</span>`;
-    row.addEventListener('click', () => seek(l.t));
     linesEl.appendChild(row);
   });
-  if (vid) { try { vid.currentTime = 0; } catch(e) {} }
-  activeLine = -1; renderPlayhead();
-  if (vid && TTS_LINES.some(l => l.audio_b64)) {
-    AUDIO.init(vid, TTS_LINES).then(() => {
-      toast('Voice loaded | press play');
-    }).catch(e => console.warn('[audio] init failed:', e));
-  }
 }
-let activeLine = -1, rafP = null;
-function dur() { return DUR || (vid && vid.duration) || 30; }
-function renderPlayhead() {
-  const D   = dur(), cur = (vid && vid.currentTime) || 0;
-  const pct = D ? (cur / D) * 100 : 0;
-  fill.style.width = pct + '%'; knob.style.left = pct + '%'; tcEl.textContent = fmt(cur);
-  let idx = -1;
-  for (let i = 0; i < script.length; i++) { if (script[i].t <= cur) idx = i; else break; }
-  if (idx !== activeLine) {
-    activeLine = idx;
-    $$('.pl', linesEl).forEach((r, i) => r.classList.toggle('now', i === idx));
     showChyron(idx);
-    if (idx >= 0) {
-      const r   = linesEl.children[idx];
-      const top = r.offsetTop - linesEl.clientHeight / 2 + r.clientHeight / 2;
-      linesEl.scrollTo({ top, behavior: reduce ? 'auto' : 'smooth' });
-    }
   }
 }
-function showChyron(idx) {
-  if (idx < 0) { chyron.classList.remove('in'); return; }
-  const l = script[idx];
   chyron.classList.remove('in');
-  requestAnimationFrame(() => {
-    chyron.style.setProperty('--vibe-primary', `var(${l.cc})`);
-    chyWho.textContent = l.who; chyLine.textContent = l.text;
-    requestAnimationFrame(() => chyron.classList.add('in'));
   });
 }
-function loop() { renderPlayhead(); if (vid && !vid.paused && !vid.ended) rafP = requestAnimationFrame(loop); }
-function seek(t) {
-  if (vid) vid.currentTime = Math.max(0, Math.min(dur(), t));
-  if (isOfflineMode) renderPlayhead();
-}
-if (vid) {
-  vid.addEventListener('loadedmetadata', () => { if (vid.duration && isFinite(vid.duration)) DUR = vid.duration; tcDur.textContent = fmt(dur()); renderPlayhead(); });
-  vid.addEventListener('play',  () => { pp.innerHTML = ICON_PAUSE; loop(); if (AUDIO.ctx?.state === 'suspended') AUDIO.ctx.resume(); AUDIO.scheduleAll(vid, TTS_LINES); });
-  vid.addEventListener('pause', () => { pp.innerHTML = ICON_PLAY;  if (rafP) cancelAnimationFrame(rafP); AUDIO.pause(); });
-  vid.addEventListener('ended', () => { pp.innerHTML = ICON_PLAY;  AUDIO.pause(); });
-  vid.addEventListener('seeked', () => { if (!vid.paused) AUDIO.scheduleAll(vid, TTS_LINES); });
-  vid.addEventListener('timeupdate', renderPlayhead);
 }
-// Offline studio timing handler
-let mockPlayTimer = null;
-pp.addEventListener('click', () => {
-  if (isOfflineMode && !selectedFile) {
-    if (mockPlayTimer) {
-      clearInterval(mockPlayTimer); mockPlayTimer = null; pp.innerHTML = ICON_PLAY;
-    } else {
-      pp.innerHTML = ICON_PAUSE;
-      mockPlayTimer = setInterval(() => {
-        let cur = (vid.currentTime || 0) + 1;
-        if (cur > dur()) cur = 0;
-        vid.currentTime = cur; renderPlayhead();
-      }, 1000);
-    }
-    return;
-  }
-  if (!vid) return;
-  vid.paused ? vid.play() : vid.pause();
-});
-scrub.addEventListener('click', e => {
-  const r = scrub.getBoundingClientRect();
-  seek(((e.clientX - r.left) / r.width) * dur());
 });
-/* ============================================================
-   AUDIO VOLUME CONTROLLERS
-   ============================================================ */
-function buildAudioControls() {
-  const existing = $('#audioControls');
-  if (existing) existing.remove();
-  const bar = document.createElement('div');
-  bar.id = 'audioControls';
-  bar.style.cssText = 'display:flex;align-items:center;gap:12px;padding:6px 12px;font-size:12px;color:var(--muted);border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap;';
-  bar.innerHTML = `
-    <span style="opacity:.6">Voice Volume</span>
-    <input id="volCommentary" type="range" min="0" max="2" step="0.05" value="1"
-      style="width:80px;accent-color:var(--accent)" title="Commentary volume">
-    <span style="opacity:.6">Video Volume</span>
-    <input id="volDuck" type="range" min="0" max="1" step="0.05" value="0.2"
-      style="width:80px;accent-color:var(--secondary)" title="Video volume while speaking">
-    <span id="audioStatus" style="opacity:.5;margin-left:4px"></span>`;
-  const controls = $('#broadcastView .controls') || $('#broadcastView');
-  if (controls) controls.appendChild(bar);
-  $('#volCommentary').addEventListener('input', e => { AUDIO.setCommentaryVolume(parseFloat(e.target.value)); });
 }
-/* ============================================================
-   SRT EXPORT
-   ============================================================ */
-$('#srtBtn').addEventListener('click', () => {
-  if (!script.length) { toast('Go live first'); return; }
-  const D   = dur();
-  const srt = script.map((l, i) => {
-    const start = l.t, end = Math.min(D || l.t + 4, (script[i + 1] ? script[i + 1].t : l.t + 4));
-    return `${i + 1}\n${srtTime(start)} --> ${srtTime(end)}\n${l.who}: ${l.text}\n`;
   }).join('\n');
-  const blob = new Blob([srt], { type: 'text/plain' });
-  try {
-    const a = document.createElement('a');
-    a.href = URL.createObjectURL(blob);
-    a.download = `marquee_${currentVibe || 'show'}_captions.srt`;
-    a.click(); URL.revokeObjectURL(a.href);
-    toast('Captions exported | drop the .srt into CapCut');
-  } catch(e) {
-    toast('Export failed or blocked by sandbox environment.');
-  }
 });
-function srtTime(s) {
-  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = Math.floor(s % 60);
   return `${pad(h)}:${pad(m)}:${pad(sec)},000`;
 }
-/* ============================================================
-   EXPORT MP4 FLOW
-   ============================================================ */
-const exportBtn = $('#exportBtn');
-if (exportBtn) {
-  exportBtn.addEventListener('click', async () => {
-    if (!isOfflineMode && (!SESSION || !TTS_LINES.length)) { toast('Go live first'); return; }
-    const progress = $('#exportProgress'), fill2 = $('#exportFill'), label = $('#exportLabel'), hint = $('#exportHint');
-    exportBtn.disabled = true;
-    exportBtn.innerHTML = '<svg class="i ic"><use href="#i-download"/></svg> Mixing…';
-    progress.hidden = false; hint.hidden = true; fill2.style.width = '0%';
-    label.textContent = 'Preparing file parameters…';
-    const stages = [
-      [15, 'Writing audio tracks…'],
-      [35, 'Merging subtitles…'],
-      [55, 'Mixing broadcast audio…'],
-      [75, 'Encoding stream layout…'],
-      [90, 'Finalizing broadcast multiplex…'],
-    ];
-    let stageIdx = 0;
-    const ticker = setInterval(() => {
-      if (stageIdx < stages.length) {
-        const [pct, msg] = stages[stageIdx++];
-        fill2.style.width   = pct + '%';
-        label.textContent = msg;
-      }
-    }, 3000);
-    await new Promise(r => setTimeout(r, 4500));
-    clearInterval(ticker);
-    fill2.style.width  = '100%';
-    label.textContent = 'Render complete!';
-    toast('Preview broadcast mixed successfully!');
-    exportBtn.disabled = false;
-    exportBtn.innerHTML = '<svg class="i ic"><use href="#i-download"/></svg> Export broadcast (.mp4)';
-  });
-}
-/* ============================================================
-   CONFETTI
-   ============================================================ */
-function confetti() {
-  const cols = ['#FFC94D','#FF4D9A','#3DE7FF','#C18BFF','#9BE85B','#FF8A4D'];
-  for (let i = 0; i < 50; i++) {
-    const c = document.createElement('div');
-    c.className = 'confetti';
-    c.style.left               = Math.random() * 100 + 'vw';
-    c.style.background         = cols[i % cols.length];
-    c.style.animationDuration  = (1.6 + Math.random() * 1.6) + 's';
-    c.style.animationDelay     = (Math.random() * .3) + 's';
-    c.style.transform          = `rotate(${Math.random() * 360}deg)`;
-    if (Math.random() > .5) c.style.borderRadius = '50%';
     document.body.appendChild(c);
-    setTimeout(() => c.remove(), 3600);
   }
 }
-/* ============================================================
-   TOAST ALERTS
-   ============================================================ */
-const toastEl = $('#toast'), toastTxt = $('#toastTxt'); let toastT;
-function toast(msg) {
-  toastTxt.textContent = msg; toastEl.classList.add('show');
-  clearTimeout(toastT); toastT = setTimeout(() => toastEl.classList.remove('show'), 2600);
-}
-/* ============================================================
-   PAGE INITIALIZATION
-   applyVibe sets default CSS vars so the page looks right before
-   the user picks a vibe on the landing screen.
-   No splash screen — landing shows immediately.
-   ============================================================ */
-applyVibe('football');

 /* ============================================================
+   MARQUEE — flow engine, wired to the gradio.Server backend.
+   - scan: plain fetch() multipart upload (CPU-only endpoint)
+   - generate: Gradio JS client -> /generate (@app.api, ZeroGPU)
    ============================================================ */
+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 const $  = (s, r = document) => r.querySelector(s);
 const $$ = (s, r = document) => [...r.querySelectorAll(s)];
 const reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
 const pad = n => String(n).padStart(2, '0');
+/* ---------- Plain fetch API helpers — talk to FastAPI endpoints ---------- */
 const BASE = window.location.origin;
 async function apiScan(file) {
   const fd = new FormData();
   fd.append('file', file, file.name);
+  const res = await fetch(`${BASE}/api/scan`, {method:'POST', body: fd});
   const data = await res.json();
   if (!data.ok) throw new Error(data.error || 'scan failed');
   return data;
 }
+let _gradio = null;
+async function gradioClient() {
+  if (!_gradio) _gradio = await Client.connect(BASE);
+  return _gradio;
 }
+async function apiGenerate(sessionId, names, vibe) {
+  // /generate is an @app.api() endpoint -> call it through the Gradio queue.
+  const client = await gradioClient();
+  const result = await client.predict('/generate', {
+    session_id: sessionId, names: names, vibe: vibe
   });
+  const data = result?.data?.[0];
+  if (!data || data.ok === false) throw new Error((data && data.error) || 'generate failed');
+  return data;
 }
+/* ---------- session state from the backend ---------- */
+let SESSION = null, VIDEO_URL = null, DUR = 0, REAL_SCRIPT = [], selectedFile = null;
+/* ---------- auto-fit the iframe to content (same-origin srcdoc) ---------- */
+function fitFrame() {
+  try { if (window.frameElement) window.frameElement.style.height = document.documentElement.scrollHeight + 'px'; }
+  catch (e) {}
 }
+new ResizeObserver(fitFrame).observe(document.body);
+window.addEventListener('load', fitFrame);
+/* ---------- live clock ---------- */
 const clocks = $$('#clock');
+function fmtClock(d){return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;}
+setInterval(()=>{const t=fmtClock(new Date());clocks.forEach(c=>c.textContent=t);},1000);
+clocks.forEach(c=>c.textContent=fmtClock(new Date()));
+/* ---------- status pill ---------- */
+const status=$('#status'), statusTxt=$('#statusTxt');
+function setStatus(txt,live){statusTxt.textContent=txt;status.classList.toggle('live',!!live);}
+/* ---------- rundown ---------- */
+const cues=$$('#rundown .cue');
+function setStep(n){
+  cues.forEach(c=>{
+    const s=+c.dataset.step;
+    c.classList.toggle('done',s<n);
+    c.classList.toggle('on',s===n);
+    if(s<n)c.querySelector('.node').innerHTML='<svg class="i" style="width:18px;height:18px"><use href="#i-check"/></svg>';
+    else c.querySelector('.node').textContent='0'+s;
   });
 }
+/* ---------- cast colors + tiers (presentation) ---------- */
+const COLORS=['--star-gold','--star-hot','--star-cyan','--star-violet','--star-lime','--star-tang'];
+let stars=[]; // {name, color, tier, crop}
+/* ---------- VIBES — Coco's wardrobe + the show's voice ----------
+   NOTE: the play-by-play LINES are no longer templated here — the real
+   commentary comes from the VLM. We keep Coco's persona + colors. */
+const VIBES={
+  football:{ acc:'#i-whistle', vc:'--star-lime', who:'COCO · TOUCHLINE',
+    coco:"Whistle's on. I'm calling this one like a cup final — keep your eyes on the pitch!"},
+  diva:{ acc:'#i-glam', vc:'--star-hot', who:'COCO · RED CARPET',
+    coco:"Shades on, boa fluffed. Darling, we are SO ready for the carpet. Bring the drama."},
+  wildlife:{ acc:'#i-paw', vc:'--star-cyan', who:'COCO · FIELD UNIT',
+    coco:"*whispering* …we must be very quiet now. A rare specimen has entered the frame."},
+  boxing:{ acc:'#i-glove', vc:'--star-tang', who:'COCO · RINGSIDE',
+    coco:"Gloves laced, ringside seat warm. Ladies and gentlemen… in the RED corner!"}
+};
+let currentVibe=null;
+/* ---------- ROLL TAPE (real file) ---------- */
+const drop=$('#drop'), castBtn=$('#castBtn'), liveBtn=$('#liveBtn'), rollCard=$('#rollCard');
+const fileInput=$('#fileInput'), fileName=$('#fileName'), fileDur=$('#fileDur');
+function handleFile(file){
+  if(!file) return;
+  selectedFile=file;
   drop.classList.add('loaded');
+  fileName.textContent=file.name;
+  fileDur.textContent='reading…';
+  const url=URL.createObjectURL(file);
+  const probe=document.createElement('video'); probe.preload='metadata';
+  probe.onloadedmetadata=()=>{ fileDur.textContent=fmt(probe.duration)+' · ready to cast'; URL.revokeObjectURL(url); };
+  probe.onerror=()=>{ fileDur.textContent='ready to cast'; };
+  probe.src=url;
+  castBtn.disabled=false;
+  setStatus('Tape loaded'); toast('Tape loaded — ready to cast');
 }
+drop.addEventListener('click',()=>fileInput.click());
+drop.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();fileInput.click();}});
+fileInput.addEventListener('change',e=>handleFile(e.target.files[0]));
+['dragover','dragenter'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.style.borderColor='var(--cyan)';}));
+['dragleave','drop'].forEach(ev=>drop.addEventListener(ev,e=>{
+  e.preventDefault();drop.style.borderColor='';
+  if(ev==='drop'&&e.dataTransfer.files[0])handleFile(e.dataTransfer.files[0]);
 }));
+/* ---------- CASTING (real scan) ---------- */
+const stagePanel=$('#stagePanel'), stageEmpty=$('#stageEmpty'), roster=$('#roster'), starCount=$('#starCount');
+castBtn.addEventListener('click',startCasting);
+async function startCasting(){
+  if(castBtn.disabled||!selectedFile) return;
+  castBtn.disabled=true; rollCard.classList.add('casting');
   setStep(2); setStatus('Casting…');
+  castBtn.innerHTML='<svg class="i"><use href="#i-spot"/></svg> Scanning the tape…';
+  try{
     toast('Uploading tape…');
     const data = await apiScan(selectedFile);
+    SESSION=data.session_id; VIDEO_URL=data.video_url; DUR=data.duration||0;
+    setBoothOrient(data.w,data.h);
+    const vid=$('#vid'); vid.src=VIDEO_URL; $('#screen').classList.add('has-video');
+    revealCast(data.stars||[]);
+  }catch(err){
     setStatus('Casting failed');
+    toast('Casting failed: '+(err.message||err));
     rollCard.classList.remove('casting');
+    castBtn.disabled=false;
+    castBtn.innerHTML='<svg class="i"><use href="#i-spot"/></svg> Find the stars';
   }
 }
+function revealCast(starData){
   rollCard.classList.remove('casting');
+  castBtn.innerHTML='<svg class="i"><use href="#i-spot"/></svg> Re-cast';
+  castBtn.disabled=false;
+  setStep(3); setStatus(starData.length+' stars found');
+  stars = starData.map((s,i)=>({name:'',tier:s.tier||'STAR',color:COLORS[i%COLORS.length],crop:s.crop||null}));
+  stageEmpty.style.display='none';
+  roster.hidden=false; roster.innerHTML='';
+  starCount.textContent=stars.length+' STARS FOUND';
+  stars.forEach((s,i)=>roster.appendChild(buildStar(s,i)));
+  if(!stars.length){
+    stageEmpty.style.display='';
+    stageEmpty.querySelector('.t').textContent='No stars spotted';
+    stageEmpty.querySelector('.s').innerHTML='No faces found — but the show still goes on. Pick a vibe and go live for nameless narration.';
+    roster.hidden=true;
   }
+  toast(stars.length?stars.length+' stars found — give them stage names':'No faces found — you can still go live');
   refreshLive();
 }
+/* ---------- THE STAR CARD (one reusable block) ---------- */
+function buildStar(s,i){
+  const el=document.createElement('div');
+  el.className='star';
+  el.style.setProperty('--c',`var(${s.color})`);
+  if(!reduce){
     el.animate(
+      [{opacity:0,transform:'translateY(14px) scale(.98)'},{opacity:1,transform:'none'}],
+      {duration:480,delay:i*90,easing:'cubic-bezier(.2,.9,.25,1)',fill:'backwards'}
     );
   }
   const portrait = s.crop
     ? `<img class="head-img" src="${s.crop}" alt="Player ${i+1}">`
     : `<svg class="i head-ph" style="width:64px;height:68px"><use href="#i-portrait"/></svg>`;
+  el.innerHTML=`
     <div class="portrait">
       <div class="beam"></div>
       ${portrait}
     </div>
     <div class="star-body">
       <label for="star${i}">Stage name</label>
+      <input id="star${i}" type="text" placeholder="e.g. The Maestro" maxlength="22" autocomplete="off">
     </div>`;
+  const input=el.querySelector('input');
+  input.addEventListener('input',()=>{
+    const v=input.value.trim();
+    s.name=v;
+    const wasNamed=el.classList.contains('named');
+    el.classList.toggle('named',!!v);
+    if(v && !wasNamed && !reduce) popCrown(el);
     refreshLive();
   });
   return el;
 }
+function popCrown(el){
+  const c=el.querySelector('.crown');
+  c.style.animation='none';void c.offsetWidth;
+  c.animate([{transform:'translateX(-50%) translateY(10px) scale(.4) rotate(-12deg)',opacity:0},
+             {transform:'translateX(-50%) scale(1.25) rotate(8deg)',opacity:1,offset:.6},
+             {transform:'translateX(-50%) scale(1) rotate(0)',opacity:1}],
+             {duration:480,easing:'cubic-bezier(.2,1.7,.4,1)'});
 }
+/* ---------- VIBES + COCO ---------- */
+const vibesWrap=$('#vibes'), coco=$('#coco'), cocoLine=$('#cocoLine'),
+      cocoAcc=$('#cocoAcc'), cocoWho=coco.querySelector('.who');
+vibesWrap.addEventListener('click',e=>{
+  const b=e.target.closest('.vibe'); if(!b)return;
+  $$('.vibe',vibesWrap).forEach(v=>v.setAttribute('aria-pressed','false'));
+  b.setAttribute('aria-pressed','true');
+  currentVibe=b.dataset.vibe;
+  dressCoco(currentVibe);
+  refreshLive();
+});
+function dressCoco(v){
+  const d=VIBES[v]; if(!d)return;
+  coco.style.setProperty('--vc',`var(${d.vc})`);
+  cocoAcc.innerHTML=`<svg><use href="${d.acc}"/></svg>`;
+  cocoWho.textContent=d.who;
+  cocoLine.textContent=d.coco;
+  if(!reduce){
+    coco.animate([{transform:'scale(.98)',opacity:.6},{transform:'scale(1)',opacity:1}],{duration:300,easing:'ease-out'});
+    const av=coco.querySelector('.av');
+    av.animate([{transform:'rotate(-8deg) scale(.9)'},{transform:'rotate(6deg) scale(1.08)'},{transform:'none'}],{duration:420,easing:'cubic-bezier(.2,1.7,.4,1)'});
+  }
 }
+/* ---------- LIVE-READY GATE ----------
+   ready when a vibe is picked (names optional — nameless narration is allowed) */
+function namedCount(){return stars.filter(s=>s.name).length;}
+function refreshLive(){
+  liveBtn.disabled=!(currentVibe && SESSION);
+  if(stars.length){
+    const n=namedCount();
+    starCount.textContent = n? `${n}/${stars.length} NAMED` : `${stars.length} STARS FOUND`;
   }
 }
+/* ---------- SHOWTIME (real commentary) ---------- */
+liveBtn.addEventListener('click',async ()=>{
+  if(liveBtn.disabled)return;
+  liveBtn.disabled=true;
+  liveBtn.innerHTML='<svg class="i"><use href="#i-star"/></svg> Rolling cameras…';
   setStatus('Generating…');
+  try{
+    const names=stars.map(s=>s.name||'');
+    const data=await apiGenerate(SESSION, names, currentVibe);
+    REAL_SCRIPT=data.script||[];
+    setStep(4); setStatus('On air',true);
+    if(!reduce) confetti();
     buildBroadcast();
+    setTimeout(()=>{switchView('broadcast');fitFrame();}, reduce?0:450);
+  }catch(err){
     setStatus('Showtime failed');
+    toast('Showtime failed: '+(err.message||err));
+  }finally{
+    liveBtn.disabled=false;
+    liveBtn.innerHTML='<svg class="i"><use href="#i-star"/></svg> Showtime — go live';
   }
 });
+/* ---------- VIEW SWITCH ---------- */
+const setupView=$('#setupView'), broadcastView=$('#broadcastView');
+function switchView(which){
+  const toBroadcast=which==='broadcast';
+  setupView.classList.toggle('active',!toBroadcast);
+  broadcastView.classList.toggle('active',toBroadcast);
+  window.scrollTo({top:0,behavior:reduce?'auto':'smooth'});
+  fitFrame();
 }
+$('#backBtn').addEventListener('click',()=>{switchView('setup');const v=$('#vid');if(v)v.pause();});
 /* ============================================================
+   BROADCAST PLAYER — driven by a real <video>
    ============================================================ */
+let script=[]; // {t, who, text, cc}
+const vid=$('#vid'), screen=$('#screen'), chyron=$('#chyron'), chyWho=$('#chyWho'), chyLine=$('#chyLine'),
+      linesEl=$('#lines'), pbpCt=$('#pbpCt'), tcEl=$('#tc'), fill=$('#fill'), knob=$('#knob'),
+      pp=$('#pp'), scrub=$('#scrub'), tcDur=$('#tcDur');
+const ICON_PLAY='<svg class="i"><use href="#i-play"/></svg>';
+const ICON_PAUSE='<svg class="i"><use href="#i-pause"/></svg>';
+function fmt(s){s=isFinite(s)?s:0;return pad(Math.floor(s/60))+':'+pad(Math.floor(s%60));}
+function buildBroadcast(){
+  const d=VIBES[currentVibe]||{vc:'--hot',who:'COCO'};
+  const who=(d.who||'COCO').replace('COCO · ','');
+  script=(REAL_SCRIPT||[]).map(l=>({t:+l.t||0, text:l.text||'', who, cc:d.vc}));
+  linesEl.innerHTML='';
+  pbpCt.textContent=script.length+' LINES';
+  if(!script.length){
+    linesEl.innerHTML='<div class="pl"><span class="tx">No commentary generated — try another clip.</span></div>';
   }
+  script.forEach((l,i)=>{
+    const row=document.createElement('div');
+    row.className='pl'; row.dataset.i=i;
+    row.style.setProperty('--cc',`var(${l.cc})`);
+    row.innerHTML=`<span class="t">${fmt(l.t)}</span><span class="tx"><b>${l.who}</b> · ${l.text}</span>`;
+    row.addEventListener('click',()=>seek(l.t));
     linesEl.appendChild(row);
   });
+  if(vid){ try{vid.currentTime=0;}catch(e){} }
+  activeLine=-1; renderPlayhead();
 }
+/* playback engine — reads the real video element */
+let activeLine=-1, rafP=null;
+function dur(){ return DUR || (vid&&vid.duration) || 0; }
+function renderPlayhead(){
+  const D=dur(), cur=(vid&&vid.currentTime)||0;
+  const pct=D?(cur/D)*100:0;
+  fill.style.width=pct+'%'; knob.style.left=pct+'%'; tcEl.textContent=fmt(cur);
+  let idx=-1;
+  for(let i=0;i<script.length;i++){if(script[i].t<=cur)idx=i;else break;}
+  if(idx!==activeLine){
+    activeLine=idx;
+    $$('.pl',linesEl).forEach((r,i)=>r.classList.toggle('now',i===idx));
     showChyron(idx);
+    if(idx>=0){const r=linesEl.children[idx];const top=r.offsetTop-linesEl.clientHeight/2+r.clientHeight/2;
+      linesEl.scrollTo({top,behavior:reduce?'auto':'smooth'});}
   }
 }
+function showChyron(idx){
+  if(idx<0){chyron.classList.remove('in');return;}
+  const l=script[idx];
   chyron.classList.remove('in');
+  requestAnimationFrame(()=>{
+    chyron.style.setProperty('--cc',`var(${l.cc})`);
+    chyWho.textContent=l.who; chyLine.textContent=l.text;
+    requestAnimationFrame(()=>chyron.classList.add('in'));
   });
 }
+function loop(){ renderPlayhead(); if(vid && !vid.paused && !vid.ended) rafP=requestAnimationFrame(loop); }
+function seek(t){ if(vid) vid.currentTime=Math.max(0,Math.min(dur(),t)); }
+if(vid){
+  vid.addEventListener('loadedmetadata',()=>{ if(vid.duration&&isFinite(vid.duration))DUR=vid.duration; tcDur.textContent=fmt(dur()); renderPlayhead(); });
+  vid.addEventListener('play',()=>{ pp.innerHTML=ICON_PAUSE; loop(); });
+  vid.addEventListener('pause',()=>{ pp.innerHTML=ICON_PLAY; if(rafP)cancelAnimationFrame(rafP); });
+  vid.addEventListener('ended',()=>{ pp.innerHTML=ICON_PLAY; });
+  vid.addEventListener('timeupdate',renderPlayhead);
 }
+pp.addEventListener('click',()=>{ if(!vid)return; vid.paused?vid.play():vid.pause(); });
+scrub.addEventListener('click',e=>{
+  const r=scrub.getBoundingClientRect();
+  seek(((e.clientX-r.left)/r.width)*dur());
 });
+/* orientation toggle (manual) + auto from real dims */
+const booth=$('#booth');
+function setBoothOrient(w,h){
+  booth.classList.remove('portrait','square');
+  let o='landscape';
+  if(w&&h){ if(Math.abs(w-h)/Math.max(w,h)<0.08) o='square'; else if(h>w) o='portrait'; }
+  if(o!=='landscape') booth.classList.add(o);
+  $$('.orient button').forEach(x=>x.setAttribute('aria-pressed', String(x.dataset.orient===o)));
 }
+$$('.orient button').forEach(b=>b.addEventListener('click',()=>{
+  $$('.orient button').forEach(x=>x.setAttribute('aria-pressed','false'));
+  b.setAttribute('aria-pressed','true');
+  booth.classList.remove('portrait','square');
+  if(b.dataset.orient!=='landscape')booth.classList.add(b.dataset.orient);
+  fitFrame();
+}));
+/* ---------- SRT EXPORT (CapCut-ready) ---------- */
+$('#srtBtn').addEventListener('click',()=>{
+  if(!script.length){toast('Go live first');return;}
+  const D=dur();
+  const srt=script.map((l,i)=>{
+    const start=l.t, end=Math.min(D||l.t+4, (script[i+1]?script[i+1].t:l.t+4));
+    return `${i+1}\n${srtTime(start)} --> ${srtTime(end)}\n${l.who}: ${l.text}\n`;
   }).join('\n');
+  const blob=new Blob([srt],{type:'text/plain'});
+  const a=document.createElement('a');
+  a.href=URL.createObjectURL(blob);
+  a.download=`marquee_${currentVibe||'show'}_captions.srt`;
+  a.click(); URL.revokeObjectURL(a.href);
+  toast('Captions exported — drop the .srt into CapCut');
 });
+function srtTime(s){
+  const h=Math.floor(s/3600), m=Math.floor((s%3600)/60), sec=Math.floor(s%60);
   return `${pad(h)}:${pad(m)}:${pad(sec)},000`;
 }
+/* ---------- confetti ---------- */
+function confetti(){
+  const cols=['#FFC94D','#FF4D9A','#3DE7FF','#C18BFF','#9BE85B','#FF8A4D'];
+  for(let i=0;i<70;i++){
+    const c=document.createElement('div');
+    c.className='confetti';
+    c.style.left=Math.random()*100+'vw';
+    c.style.background=cols[i%cols.length];
+    c.style.animationDuration=(1.6+Math.random()*1.6)+'s';
+    c.style.animationDelay=(Math.random()*.3)+'s';
+    c.style.transform=`rotate(${Math.random()*360}deg)`;
+    if(Math.random()>.5)c.style.borderRadius='50%';
     document.body.appendChild(c);
+    setTimeout(()=>c.remove(),3600);
   }
 }
+/* ---------- toast ---------- */
+const toastEl=$('#toast'), toastTxt=$('#toastTxt'); let toastT;
+function toast(msg){
+  toastTxt.textContent=msg; toastEl.classList.add('show');
+  clearTimeout(toastT); toastT=setTimeout(()=>toastEl.classList.remove('show'),2600);
+}

marquee_inlined_preview.html ADDED Viewed

	@@ -0,0 +1,1093 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Marquee — Setup Console & Broadcast</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Bebas+Neue&family=Nunito:wght@600;700;800;900&display=swap" rel="stylesheet">
+<style>/* ============================================================
+   MARQUEE — design system
+   Tokens straight from the brief so they lift into Gradio css=.
+   Sections: tokens · base · masthead · rundown · desk · stage
+   · star card · vibes + Coco · broadcast player · utilities
+   ============================================================ */
+:root{
+  /* night & surfaces */
+  --night:#190B2E;        /* base */
+  --night-2:#120821;      /* deeper, for wells */
+  --stage:#241241;        /* panels */
+  --stage-2:#2E1A52;      /* raised */
+  --raise:#382060;        /* inputs-on-dark */
+  --line:#3A2A5E;         /* borders */
+  --line-soft:#2C1E4C;
+  /* leads + helper */
+  --hot:#FF3D8B;          /* primary / on-air / energy */
+  --gold:#FFC94D;         /* stardom: lights, crowns */
+  --cyan:#3DE7FF;         /* confirm / scan */
+  --violet:#B98BFF;       /* playful / mascot */
+  /* text */
+  --cream:#FFF3E9;
+  --muted:#A98FC9;
+  --muted-2:#7C66A6;
+  /* the casting rainbow — each star gets their own character color.
+     all high-chroma, all in-family: the "agent select" punch. */
+  --star-gold:#FFC94D;
+  --star-hot:#FF4D9A;
+  --star-cyan:#3DE7FF;
+  --star-violet:#C18BFF;
+  --star-lime:#9BE85B;
+  --star-tang:#FF8A4D;
+  --fx:cubic-bezier(.2,.9,.25,1);
+  --pop:cubic-bezier(.2,1.7,.4,1);
+}
+*{box-sizing:border-box;margin:0;padding:0}
+html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+body{
+  font-family:Nunito,system-ui,sans-serif;
+  color:var(--cream);
+  background:var(--night);
+  min-height:100vh;
+  line-height:1.5;
+  /* one justified light: a stage spotlight from above + a faint floor wash.
+     no decorative blob gradients. */
+  background-image:
+    radial-gradient(120% 70% at 50% -25%, rgba(255,201,77,.10), transparent 55%),
+    radial-gradient(140% 90% at 50% 120%, rgba(61,231,255,.05), transparent 60%);
+  background-attachment:fixed;
+}
+/* film grain — the only decorative texture, very subtle */
+body::after{
+  content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.04;
+  mix-blend-mode:overlay;
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+.disp{font-family:Unbounded,sans-serif}
+.marq{font-family:'Bebas Neue',sans-serif;letter-spacing:.06em}
+svg.i{width:1em;height:1em;display:block;flex:none}
+.shell{max-width:1180px;margin:0 auto;padding:clamp(16px,3vw,34px) clamp(16px,4vw,40px) 40px;position:relative;z-index:1}
+/* ============================================================
+   MASTHEAD — the broadcast header bar. signature lives here.
+   ============================================================ */
+.masthead{
+  display:flex;align-items:center;justify-content:space-between;gap:20px;
+  padding-bottom:22px;margin-bottom:6px;flex-wrap:wrap;
+}
+.brand{display:flex;align-items:center;gap:18px}
+/* the lit marquee sign — spend the boldness here */
+.sign{
+  position:relative;padding:14px 22px 15px;border-radius:14px;
+  border:2px solid rgba(255,201,77,.55);
+  background:
+    radial-gradient(120% 140% at 50% 0%, rgba(255,201,77,.14), transparent 70%),
+    linear-gradient(180deg, rgba(255,201,77,.05), rgba(25,11,46,.2));
+  box-shadow:inset 0 0 22px rgba(255,201,77,.16), 0 10px 40px rgba(255,61,139,.10);
+}
+.sign h1{
+  font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,38px);
+  letter-spacing:.04em;line-height:.9;
+  color:var(--cream);
+  text-shadow:0 0 18px rgba(255,201,77,.45), 0 0 2px rgba(255,201,77,.8);
+}
+/* perimeter bulbs, top + bottom rows */
+.sign .bulbs{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between}
+.sign .bulbs.t{top:-5px}.sign .bulbs.b{bottom:-5px}
+.sign .bulbs i{width:6px;height:6px;border-radius:50%;background:var(--gold);
+  box-shadow:0 0 8px var(--gold),0 0 2px #fff;animation:tw 2.6s infinite}
+.sign .bulbs i:nth-child(2n){animation-delay:.7s}
+.sign .bulbs i:nth-child(3n){animation-delay:1.5s;background:var(--hot);box-shadow:0 0 8px var(--hot),0 0 2px #fff}
+@keyframes tw{0%,100%{opacity:1}48%{opacity:.28}}
+.tag{font-family:Unbounded,sans-serif;font-weight:500;font-size:13px;color:var(--gold);letter-spacing:.01em}
+.tag small{display:block;font-family:Nunito;font-weight:600;color:var(--muted);font-size:12px;margin-top:3px;letter-spacing:0}
+/* right side: live clock + status */
+.broadcast-meta{display:flex;align-items:center;gap:14px}
+.clock{font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:20px;color:var(--muted);
+  font-variant-numeric:tabular-nums}
+.status{display:flex;align-items:center;gap:9px;white-space:nowrap;font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;
+  font-size:16px;color:var(--muted);border:1px solid var(--line);padding:8px 15px;border-radius:999px;
+  background:rgba(46,26,82,.5)}
+.status .led{width:9px;height:9px;border-radius:50%;background:var(--muted-2);transition:.3s}
+.status.live{color:var(--hot);border-color:rgba(255,61,139,.5);background:rgba(255,61,139,.08)}
+.status.live .led{background:var(--hot);box-shadow:0 0 12px var(--hot);animation:tw 1.1s infinite}
+/* ============================================================
+   RUNDOWN — broadcast running order, not 4 identical cards.
+   nodes on a connecting track.
+   ============================================================ */
+.rundown{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
+  margin:8px 0 30px;padding:0 6px}
+.rundown::before{content:"";position:absolute;top:19px;left:11%;right:11%;height:2px;
+  background:var(--line-soft)}
+.cue{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
+.cue .node{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
+  background:var(--stage);border:2px solid var(--line);
+  font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--muted-2);
+  position:relative;z-index:1;transition:.35s var(--fx)}
+.cue .ttl{font-family:Unbounded,sans-serif;font-weight:600;font-size:13px;color:var(--muted)}
+.cue .sub{font-size:11px;color:var(--muted-2);letter-spacing:.01em}
+/* done */
+.cue.done .node{border-color:var(--cyan);color:var(--cyan);background:rgba(61,231,255,.08)}
+.cue.done .ttl{color:var(--cream)}
+/* active */
+.cue.on .node{border-color:var(--gold);color:var(--gold);background:rgba(255,201,77,.12);
+  box-shadow:0 0 0 5px rgba(255,201,77,.1),0 0 22px rgba(255,201,77,.3)}
+.cue.on .ttl{color:var(--gold)}
+@media(prefers-reduced-motion:no-preference){
+  .cue.on .node{animation:cuePulse 2s infinite}
+}
+@keyframes cuePulse{0%,100%{box-shadow:0 0 0 5px rgba(255,201,77,.1),0 0 22px rgba(255,201,77,.28)}
+  50%{box-shadow:0 0 0 8px rgba(255,201,77,.04),0 0 30px rgba(255,201,77,.45)}}
+/* ============================================================
+   LAYOUT — control desk (left) vs the stage (right).
+   intentionally asymmetric; the two halves are treated differently.
+   ============================================================ */
+.console{display:grid;grid-template-columns:362px 1fr;gap:20px;align-items:start}
+@media(max-width:900px){.console{grid-template-columns:1fr}}
+/* the desk: flat, utilitarian — it's the control surface, not a showpiece */
+.desk{display:flex;flex-direction:column;gap:16px}
+.card{background:var(--stage);border:1px solid var(--line-soft);border-radius:16px;padding:18px}
+.card-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
+.card-h .ic{color:var(--gold);font-size:18px}
+.card-h h2{font-family:Unbounded,sans-serif;font-weight:600;font-size:14px;letter-spacing:.01em}
+.card-h .meta{margin-left:auto;font-family:'Bebas Neue',sans-serif;letter-spacing:.07em;font-size:12px;color:var(--muted-2)}
+/* roll tape drop zone — clapperboard motif */
+.drop{position:relative;border:1.5px dashed var(--line);border-radius:13px;padding:26px 16px;
+  text-align:center;cursor:pointer;transition:.22s var(--fx);overflow:hidden;
+  background:radial-gradient(200px 110px at 50% -20%,rgba(255,201,77,.07),transparent 70%)}
+.drop:hover{border-color:var(--gold);background:radial-gradient(200px 130px at 50% -10%,rgba(255,201,77,.12),transparent 70%)}
+.drop:focus-visible{border-color:var(--cyan)}
+.drop .clap{font-size:30px;color:var(--gold);display:inline-flex;margin-bottom:8px}
+.drop .t{font-family:Unbounded,sans-serif;font-weight:600;font-size:15px}
+.drop .s{font-size:12px;color:var(--muted);margin-top:4px}
+/* loaded: a little filmstrip readout */
+.drop .loaded{display:none;align-items:center;gap:12px;text-align:left}
+.drop.loaded{border-style:solid;border-color:rgba(61,231,255,.45);background:rgba(61,231,255,.05);cursor:default}
+.drop.loaded .ask{display:none}
+.drop.loaded .loaded{display:flex}
+.strip{width:52px;height:52px;border-radius:9px;flex:none;position:relative;overflow:hidden;
+  background:linear-gradient(135deg,var(--raise),var(--stage));border:1px solid var(--line)}
+.strip::before,.strip::after{content:"";position:absolute;top:4px;bottom:4px;width:5px;
+  background:repeating-linear-gradient(var(--night) 0 3px,transparent 3px 7px)}
+.strip::before{left:3px}.strip::after{right:3px}
+.strip .play{position:absolute;inset:0;display:grid;place-items:center;color:var(--cyan);font-size:16px}
+.loaded .fn{font-family:Unbounded,sans-serif;font-weight:600;font-size:13px;color:var(--cream)}
+.loaded .fd{font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;font-size:13px;color:var(--cyan);margin-top:3px}
+/* buttons */
+.btn{width:100%;border:0;cursor:pointer;font-family:Unbounded,sans-serif;font-weight:600;font-size:14px;
+  color:var(--night);padding:14px;border-radius:12px;display:flex;align-items:center;justify-content:center;
+  gap:9px;transition:.18s var(--fx)}
+.btn:disabled{opacity:.4;cursor:not-allowed;background:var(--raise);color:var(--muted-2)}
+.btn.cyan{background:linear-gradient(135deg,var(--cyan),#16b6d8)}
+.btn.cyan:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(61,231,255,.3)}
+.btn.show{font-size:17px;padding:17px;background:linear-gradient(110deg,var(--gold),var(--hot));position:relative;overflow:hidden}
+.btn.show:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(255,61,139,.4)}
+.btn.show:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;width:40%;
+  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
+  transform:translateX(-200%)}
+@media(prefers-reduced-motion:no-preference){
+  .btn.show:not(:disabled)::after{animation:shine 3.4s ease-in-out 1.2s infinite}
+}
+@keyframes shine{0%,100%{transform:translateX(-220%)}40%,60%{transform:translateX(360%)}}
+.mt{margin-top:14px}
+/* casting sweep bar */
+.sweep{height:6px;border-radius:4px;margin-top:13px;background:var(--night-2);position:relative;overflow:hidden;
+  opacity:0;height:0;margin-top:0;transition:.25s}
+.casting .sweep{opacity:1;height:6px;margin-top:13px}
+.sweep::after{content:"";position:absolute;inset:0;width:36%;
+  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
+@media(prefers-reduced-motion:no-preference){.sweep::after{animation:sw 1s linear infinite}}
+@keyframes sw{from{transform:translateX(-120%)}to{transform:translateX(330%)}}
+/* ============================================================
+   THE STAGE — Star Select. theatrical, spotlit well.
+   ============================================================ */
+.stage-panel{background:
+    radial-gradient(80% 60% at 50% -8%, rgba(255,201,77,.07), transparent 60%),
+    linear-gradient(180deg,var(--stage),var(--night-2));
+  border:1px solid var(--line);border-radius:20px;padding:20px;
+  box-shadow:inset 0 1px 0 rgba(255,243,233,.04), 0 24px 60px rgba(8,2,20,.5)}
+.stage-h{display:flex;align-items:center;gap:11px;margin-bottom:16px}
+.stage-h .ic{color:var(--gold);font-size:19px}
+.stage-h h2{font-family:Unbounded,sans-serif;font-weight:700;font-size:16px}
+.stage-h .count{margin-left:auto;white-space:nowrap;font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:14px;
+  color:var(--muted);background:rgba(46,26,82,.6);padding:4px 11px;border-radius:8px}
+/* empty state */
+.empty{display:grid;place-items:center;min-height:330px;text-align:center;padding:20px}
+.empty .spot{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
+  color:var(--muted-2);font-size:46px;
+  background:radial-gradient(circle at 50% 30%,rgba(255,201,77,.08),transparent 70%)}
+.empty .t{font-family:Unbounded,sans-serif;font-weight:600;font-size:17px;color:var(--cream);margin-bottom:6px}
+.empty .s{font-size:13px;color:var(--muted);max-width:300px}
+/* star grid */
+.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:16px}
+/* ---- the star card (one reusable block) ----
+   per-card character color is set inline as --c. */
+/* base state is fully visible — entrance is driven via WAAPI in JS so a
+   backgrounded tab never leaves cards stuck invisible. */
+.star{--c:var(--gold);position:relative;border-radius:16px;overflow:hidden;
+  background:linear-gradient(180deg,var(--stage-2),var(--stage));
+  border:1px solid var(--line);transition:.25s var(--fx)}
+.star:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 60%,transparent)}
+/* portrait well with a spotlight beam tinted to the character color,
+   and an angular framed headshot placeholder (agent-select energy) */
+.portrait{position:relative;height:138px;overflow:hidden;
+  background:radial-gradient(90% 80% at 50% 120%,color-mix(in srgb,var(--c) 22%,var(--night-2)),var(--night-2))}
+.portrait .beam{position:absolute;top:-30px;left:50%;width:150px;height:170px;transform:translateX(-50%);
+  pointer-events:none;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
+  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%);opacity:.7}
+.portrait .head-ph{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
+  color:color-mix(in srgb,var(--c) 50%,#ffffff);opacity:.4}
+.portrait .frame{position:absolute;inset:8px;border:1.5px solid color-mix(in srgb,var(--c) 35%,transparent);
+  border-radius:11px;pointer-events:none}
+.portrait .idx{position:absolute;top:10px;left:10px;font-family:'Bebas Neue',sans-serif;font-size:14px;
+  color:var(--cream);background:rgba(15,6,30,.7);padding:2px 7px;border-radius:7px;display:flex;align-items:center;gap:3px}
+.portrait .idx .st{color:var(--c)}
+.tier{position:absolute;top:10px;right:10px;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:.02em;
+  white-space:nowrap;color:var(--night);background:var(--c);padding:3px 8px;border-radius:7px;
+  box-shadow:0 2px 10px color-mix(in srgb,var(--c) 50%,transparent)}
+/* crown drops in on naming */
+/* crown lifts in above the star's head on naming */
+.crown{position:absolute;top:50px;left:50%;transform:translateX(-50%) translateY(12px) scale(.4) rotate(-12deg);
+  opacity:0;width:30px;height:30px;color:var(--gold);
+  filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--gold) 70%,transparent));
+  transition:.4s var(--pop)}
+.star.named .crown{opacity:1;transform:translateX(-50%) scale(1) rotate(0)}
+.star-body{padding:13px}
+.star-body label{font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:12px;color:var(--muted);
+  display:block;margin-bottom:7px}
+.star input{width:100%;background:var(--night-2);border:1px solid var(--line);color:var(--cream);
+  border-radius:10px;padding:10px 12px;font-family:Nunito;font-weight:800;font-size:14px;outline:none;transition:.16s}
+.star input::placeholder{color:var(--muted-2);font-weight:600}
+.star input:focus{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
+/* crowned: card lights in its own character color */
+.star.named{border-color:color-mix(in srgb,var(--c) 65%,transparent);
+  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 10px 30px color-mix(in srgb,var(--c) 18%,transparent)}
+.star.named .portrait{background:radial-gradient(90% 90% at 50% 120%,color-mix(in srgb,var(--c) 40%,var(--night-2)),var(--night-2))}
+.star.named .portrait .beam{opacity:1}
+.star.named .head-ph{opacity:.6}
+/* ============================================================
+   VIBES (narration modes) + COCO host
+   ============================================================ */
+.vibes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
+.vibe{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;cursor:pointer;color:var(--cream);
+  border:1px solid var(--line-soft);background:var(--stage-2);transition:.18s var(--fx);text-align:left}
+.vibe:hover{border-color:var(--violet);transform:translateY(-1px)}
+.vibe .ic{font-size:20px;color:var(--muted);display:inline-flex;transition:.18s}
+.vibe>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
+.vibe .vt{display:block;font-family:Unbounded,sans-serif;font-weight:600;font-size:13px;color:var(--cream)}
+.vibe .vd{display:block;font-size:11px;color:var(--muted);line-height:1.25}
+.vibe[aria-pressed="true"]{border-color:var(--vc,var(--hot));background:color-mix(in srgb,var(--vc,var(--hot)) 12%,var(--stage-2))}
+.vibe[aria-pressed="true"] .ic{color:var(--vc,var(--hot))}
+/* Coco — the host bug. re-dresses per vibe. */
+.coco{display:flex;align-items:center;gap:13px;margin-top:14px;padding:13px 14px;border-radius:14px;
+  background:linear-gradient(120deg,color-mix(in srgb,var(--vc,var(--violet)) 12%,var(--stage-2)),var(--stage-2));
+  border:1px solid color-mix(in srgb,var(--vc,var(--violet)) 30%,var(--line-soft));transition:.35s var(--fx)}
+.coco .av{position:relative;width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
+  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--vc,var(--violet)) 70%,#fff 5%),var(--vc,var(--violet)));
+  box-shadow:0 6px 18px color-mix(in srgb,var(--vc,var(--violet)) 40%,transparent);transition:.35s var(--fx)}
+.coco .av .bird{width:30px;height:30px;color:var(--night);filter:drop-shadow(0 1px 1px rgba(255,255,255,.3))}
+/* accessory badge sits on the avatar, swapped per vibe */
+.coco .acc{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;
+  display:grid;place-items:center;background:var(--night);border:2px solid var(--vc,var(--violet));
+  color:var(--vc,var(--violet));font-size:11px}
+.coco .acc svg{width:12px;height:12px}
+.coco .say{font-size:13px;line-height:1.45}
+.coco .say b{color:var(--vc,var(--gold))}
+.coco .who{font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:11px;color:var(--vc,var(--violet));
+  display:block;margin-bottom:2px}
+/* privacy footnote — visible, not buried */
+.note{margin-top:26px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.6}
+.note b{color:var(--cream)}
+.note .lock{color:var(--cyan);vertical-align:-2px;margin-right:5px}
+/* ============================================================
+   VIEW SWITCH
+   ============================================================ */
+.view{display:none}
+.view.active{display:block;animation:viewIn .4s var(--fx)}
+@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+/* ============================================================
+   BROADCAST PLAYER
+   ============================================================ */
+.booth-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
+.back{display:inline-flex;align-items:center;gap:8px;background:var(--stage);border:1px solid var(--line);
+  color:var(--cream);font-family:Nunito;font-weight:700;font-size:13px;padding:9px 14px;border-radius:10px;cursor:pointer;transition:.16s}
+.back:hover{border-color:var(--violet)}
+.orient{display:flex;gap:4px;background:var(--stage);border:1px solid var(--line-soft);padding:4px;border-radius:11px}
+.orient button{background:transparent;border:0;color:var(--muted);font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;
+  font-size:13px;padding:7px 14px;border-radius:8px;cursor:pointer;transition:.16s}
+.orient button[aria-pressed="true"]{background:var(--raise);color:var(--gold)}
+.booth{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
+/* portrait: the clip is a phone-sized vertical frame, never a giant column-filling block.
+   capped width keeps the 9:16 height sane and the play-by-play rail beside it. */
+.booth.portrait{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
+.booth.portrait .screen-wrap{max-width:340px}
+@media(max-width:840px){
+  .booth,.booth.square{grid-template-columns:1fr}
+  .booth.portrait{grid-template-columns:1fr}
+  .booth.portrait .screen-wrap{margin-inline:auto}
+}
+/* the screen */
+.screen-wrap{background:#000;border-radius:18px;overflow:hidden;border:1px solid var(--line);
+  box-shadow:0 24px 70px rgba(0,0,0,.6);position:relative}
+.screen{position:relative;width:100%;aspect-ratio:16/9;background:
+    repeating-linear-gradient(135deg,#1c0f33 0 18px,#170c2b 18px 36px);
+  display:grid;place-items:center}
+.booth.portrait .screen{aspect-ratio:9/16}
+.booth.square .screen{aspect-ratio:1/1}
+.screen .ph{font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;color:var(--muted-2);font-size:15px;
+  text-align:center;padding:0 20px}
+.screen .ph svg{width:40px;height:40px;margin:0 auto 10px;color:var(--line);display:block}
+/* on-air bug */
+.bug{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;white-space:nowrap;
+  background:rgba(15,6,30,.6);backdrop-filter:blur(4px);padding:7px 12px;border-radius:9px;
+  font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:14px;color:var(--cream)}
+.bug .dot{width:10px;height:10px;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot)}
+@media(prefers-reduced-motion:no-preference){.bug .dot{animation:tw 1.1s infinite}}
+/* timecode */
+.tc{position:absolute;top:14px;right:14px;background:rgba(15,6,30,.6);backdrop-filter:blur(4px);
+  padding:7px 12px;border-radius:9px;font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:15px;
+  color:var(--cyan);font-variant-numeric:tabular-nums}
+/* lower-third chyron */
+.chyron{position:absolute;left:14px;right:14px;bottom:14px;border-radius:12px;overflow:hidden;
+  background:linear-gradient(100deg,rgba(15,6,30,.92),rgba(36,18,65,.82));
+  border:1px solid color-mix(in srgb,var(--cc,var(--hot)) 40%,var(--line));
+  box-shadow:0 10px 30px rgba(0,0,0,.4);
+  transform:translateY(130%);opacity:0;transition:.45s var(--fx)}
+.chyron.in{transform:none;opacity:1}
+.chyron .bar{height:4px;background:linear-gradient(90deg,var(--cc,var(--hot)),var(--gold))}
+.chyron .row{display:flex;align-items:stretch}
+.chyron .who{display:flex;align-items:center;font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;
+  font-size:17px;color:var(--night);background:var(--cc,var(--hot));padding:10px 14px;white-space:nowrap}
+.chyron .line{padding:10px 16px;font-family:Nunito;font-weight:700;font-size:15px;color:var(--cream);
+  display:flex;align-items:center;line-height:1.3}
+@media(prefers-reduced-motion:no-preference){
+  .chyron.in .line{animation:sharpen .5s var(--fx)}
+}
+@keyframes sharpen{from{filter:blur(7px);opacity:.3}to{filter:blur(0);opacity:1}}
+/* transport */
+.transport{display:flex;align-items:center;gap:14px;margin-top:14px}
+.transport .pp{width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;flex:none;display:grid;place-items:center;
+  background:linear-gradient(135deg,var(--gold),var(--hot));color:var(--night);font-size:20px;transition:.16s}
+.transport .pp:hover{transform:scale(1.05)}
+.scrub{flex:1;height:6px;border-radius:4px;background:var(--raise);position:relative;cursor:pointer}
+.scrub .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;width:0;
+  background:linear-gradient(90deg,var(--hot),var(--gold))}
+.scrub .knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--cream);
+  transform:translate(-50%,-50%);left:0;box-shadow:0 2px 6px rgba(0,0,0,.5)}
+/* play-by-play rail */
+.pbp{background:var(--stage);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
+  display:flex;flex-direction:column;max-height:520px}
+.pbp .pbp-h{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
+.pbp .pbp-h .ic{color:var(--gold);font-size:16px}
+.pbp .pbp-h h3{font-family:Unbounded,sans-serif;font-weight:600;font-size:13px}
+.pbp .pbp-h .ct{margin-left:auto;font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;font-size:12px;color:var(--muted-2)}
+.pbp .lines{overflow-y:auto;padding:6px}
+.pbp .pl{display:flex;gap:11px;padding:11px 12px;border-radius:10px;cursor:pointer;transition:.15s;align-items:baseline}
+.pbp .pl:hover{background:var(--stage-2)}
+.pbp .pl .t{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;font-size:14px;color:var(--muted-2);
+  flex:none;width:42px;font-variant-numeric:tabular-nums;padding-top:1px}
+.pbp .pl .tx{font-size:13px;line-height:1.45;color:var(--muted)}
+.pbp .pl .tx b{color:var(--cream);font-weight:800}
+.pbp .pl.now{background:color-mix(in srgb,var(--cc,var(--hot)) 14%,var(--stage-2))}
+.pbp .pl.now .t{color:var(--cc,var(--hot))}
+.pbp .pl.now .tx{color:var(--cream)}
+.pbp .pl.now .tx b{color:var(--cc,var(--hot))}
+/* export bar */
+.export{padding:13px 16px;border-top:1px solid var(--line-soft);background:var(--night-2)}
+.export .btn-srt{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
+  background:var(--stage-2);border:1px solid var(--line);color:var(--cream);font-family:Nunito;font-weight:700;
+  font-size:13px;padding:12px;border-radius:11px;transition:.16s}
+.export .btn-srt:hover{border-color:var(--cyan);color:var(--cyan)}
+.export .btn-srt .ic{color:var(--cyan);font-size:16px}
+.export .hint{text-align:center;font-size:11px;color:var(--muted-2);margin-top:8px}
+.export .hint b{color:var(--muted)}
+/* confetti */
+.confetti{position:fixed;top:-20px;width:11px;height:14px;z-index:90;pointer-events:none;border-radius:2px}
+@media(prefers-reduced-motion:no-preference){.confetti{animation:fall linear forwards}}
+@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
+/* ============================================================
+   UTILITIES
+   ============================================================ */
+:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
+.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;
+  background:var(--stage-2);border:1px solid var(--cyan);color:var(--cream);padding:12px 20px;border-radius:12px;
+  font-weight:700;font-size:13px;z-index:95;transition:.3s var(--fx);display:flex;align-items:center;gap:9px;
+  box-shadow:0 14px 40px rgba(0,0,0,.5)}
+.toast.show{transform:translateX(-50%);opacity:1}
+.toast .ic{color:var(--cyan)}
+@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+@media(max-width:560px){
+  .masthead{gap:14px}
+  .rundown .sub{display:none}
+  .vibes{grid-template-columns:1fr}
+  .roster{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
+}
+/* ============================================================
+   INTEGRATION ADDITIONS — real <video> in the screen, real face
+   crops in star cards (added for the Gradio wiring)
+   ============================================================ */
+.screen-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
+.screen.has-video .ph{display:none}
+.screen.has-video .screen-vid{display:block}
+.portrait .head-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.star.named .head-img{filter:saturate(1.05)}
+</style>
+</head>
+<body>
+<!-- =======================================================
+     ICON SPRITE — line icons, broadcast vernacular
+     ======================================================= -->
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <symbol id="i-clap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M3 8h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/><path d="m3 8 1.6-3.4 3.8 1L6.7 9M9.4 5.6l3.8 1L11.5 10M15 7l3.8 1-1.5 3.4M21 8l-.8-2.2-3.4-.9"/></symbol>
+    <symbol id="i-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></symbol>
+    <symbol id="i-pause" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></symbol>
+    <symbol id="i-star" viewBox="0 0 24 24" fill="currentColor"><path d="m12 2 2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></symbol>
+    <symbol id="i-spot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 3v3M5 6l2 2M19 6l-2 2"/><path d="M9 9h6l3 11H6z" fill="currentColor" opacity=".15"/><path d="M9 9h6l3 11H6z"/></symbol>
+    <symbol id="i-crown" viewBox="0 0 24 24" fill="currentColor"><path d="M3 7l4 4 5-7 5 7 4-4-2 12H5z"/></symbol>
+    <symbol id="i-bird" viewBox="0 0 24 24" fill="currentColor"><path d="M14 4a3 3 0 0 0-3 3c0 .5-.4 1-1 1.5-1.8 1.3-3 3.4-3 5.8C7 17.9 9.6 20 13 20c.6 0 1-.6.8-1.2C13.3 17 13 16 14 15c2.2-.4 4-2.3 4-4.8V7a3 3 0 0 0-3-3zm.6 3.2a.9.9 0 1 1 0-.1z"/></symbol>
+    <symbol id="i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></symbol>
+    <symbol id="i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v10m0 0 4-4m-4 4-4-4M5 20h14"/></symbol>
+    <symbol id="i-mic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M6 11a6 6 0 0 0 12 0M12 17v4"/></symbol>
+    <symbol id="i-list" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></symbol>
+    <symbol id="i-whistle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M3 11a5 5 0 0 0 5 5h4l5 3v-8a3 3 0 0 0-3-3H8a5 5 0 0 0-5 3Z"/><path d="M14 4v3"/></symbol>
+    <symbol id="i-glam" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M3 14c2-1 4-1 5 0M16 14c2-1 4-1 5 0M3 11h18M7 11l1 5M17 11l-1 5"/><circle cx="6.5" cy="8.5" r="2"/><circle cx="17.5" cy="8.5" r="2"/></symbol>
+    <symbol id="i-paw" viewBox="0 0 24 24" fill="currentColor"><circle cx="6" cy="9" r="2"/><circle cx="11" cy="6" r="2"/><circle cx="16" cy="7" r="2"/><circle cx="19" cy="11" r="2"/><path d="M12 12c-3 0-6 2.5-6 5 0 2 2 3 6 3s6-1 6-3c0-2.5-3-5-6-5Z"/></symbol>
+    <symbol id="i-glove" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M7 10V6a2 2 0 0 1 4 0v3M11 9V5a2 2 0 0 1 4 0v5l2 1a3 3 0 0 1 1.4 3.4l-.8 3A2 2 0 0 1 15.7 21H10a3 3 0 0 1-2.8-2L5.5 14A2.5 2.5 0 0 1 7 10Z"/></symbol>
+    <symbol id="i-cam" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3z"/></symbol>
+    <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12 5 5L20 6"/></symbol>
+    <symbol id="i-back" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></symbol>
+    <symbol id="i-portrait" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4.4"/><path d="M3.5 22c0-4.7 3.8-8 8.5-8s8.5 3.3 8.5 8z"/></symbol>
+  </defs>
+</svg>
+<div class="shell">
+  <!-- ============== MASTHEAD ============== -->
+  <header class="masthead">
+    <div class="brand">
+      <div class="sign">
+        <div class="bulbs t"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+        <h1 class="disp">MARQUEE</h1>
+        <div class="bulbs b"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+      </div>
+      <div class="tag">Everyone's a headliner.<small>Turn any clip into a live broadcast.</small></div>
+    </div>
+    <div class="broadcast-meta">
+      <span class="clock" id="clock">--:--:--</span>
+      <span class="status" id="status"><span class="led"></span><span id="statusTxt">Standby</span></span>
+    </div>
+  </header>
+  <!-- ============================================================
+       VIEW 1 — SETUP CONSOLE
+       ============================================================ -->
+  <section class="view active" id="setupView">
+    <!-- rundown / running order -->
+    <nav class="rundown" id="rundown" aria-label="Show rundown">
+      <div class="cue on" data-step="1"><div class="node">01</div><div class="ttl">Roll Tape</div><div class="sub">Drop a clip</div></div>
+      <div class="cue" data-step="2"><div class="node">02</div><div class="ttl">Casting</div><div class="sub">Find the faces</div></div>
+      <div class="cue" data-step="3"><div class="node">03</div><div class="ttl">Star Select</div><div class="sub">Name the stars</div></div>
+      <div class="cue" data-step="4"><div class="node">04</div><div class="ttl">Showtime</div><div class="sub">Go live</div></div>
+    </nav>
+    <div class="console">
+      <!-- ---------- LEFT: the control desk ---------- -->
+      <div class="desk">
+        <!-- Roll Tape -->
+        <div class="card" id="rollCard">
+          <div class="card-h"><svg class="i ic"><use href="#i-clap"/></svg><h2>Roll Tape</h2><span class="meta">SRC 01</span></div>
+          <div class="drop" id="drop" tabindex="0" role="button" aria-label="Drop a video clip to roll tape">
+            <div class="ask">
+              <span class="clap"><svg class="i"><use href="#i-clap"/></svg></span>
+              <div class="t">Drop a clip on the desk</div>
+              <div class="s">MP4 · MOV · up to 60s · portrait, landscape or square</div>
+            </div>
+            <div class="loaded">
+              <div class="strip"><span class="play"><svg class="i"><use href="#i-play"/></svg></span></div>
+              <div>
+                <div class="fn" id="fileName">rooftop_freekick.mp4</div>
+                <div class="fd"><span id="fileDur">00:42</span> · 1080×1920 · ready to cast</div>
+              </div>
+            </div>
+          </div>
+          <input type="file" id="fileInput" accept="video/*" hidden>
+          <button class="btn cyan mt" id="castBtn" disabled><svg class="i"><use href="#i-spot"/></svg> Find the stars</button>
+          <div class="sweep"></div>
+        </div>
+        <!-- Pick the show / vibes -->
+        <div class="card" id="vibeCard">
+          <div class="card-h"><svg class="i ic"><use href="#i-mic"/></svg><h2>Pick the show</h2><span class="meta">TONE</span></div>
+          <div class="vibes" id="vibes" role="group" aria-label="Narration vibe">
+            <button class="vibe" data-vibe="football" style="--vc:var(--star-lime)" aria-pressed="false">
+              <span class="ic"><svg class="i"><use href="#i-whistle"/></svg></span>
+              <span><span class="vt">Football</span><span class="vd">Roaring play-by-play</span></span>
+            </button>
+            <button class="vibe" data-vibe="diva" style="--vc:var(--star-hot)" aria-pressed="false">
+              <span class="ic"><svg class="i"><use href="#i-glam"/></svg></span>
+              <span><span class="vt">Diva Hour</span><span class="vd">Red-carpet shade</span></span>
+            </button>
+            <button class="vibe" data-vibe="wildlife" style="--vc:var(--star-cyan)" aria-pressed="false">
+              <span class="ic"><svg class="i"><use href="#i-paw"/></svg></span>
+              <span><span class="vt">Wildlife</span><span class="vd">Hushed nature doc</span></span>
+            </button>
+            <button class="vibe" data-vibe="boxing" style="--vc:var(--star-tang)" aria-pressed="false">
+              <span class="ic"><svg class="i"><use href="#i-glove"/></svg></span>
+              <span><span class="vt">Boxing</span><span class="vd">Ringside hype</span></span>
+            </button>
+          </div>
+          <!-- Coco the host — re-dresses per vibe -->
+          <div class="coco" id="coco">
+            <div class="av">
+              <svg class="i bird"><use href="#i-bird"/></svg>
+              <span class="acc" id="cocoAcc"><svg><use href="#i-star"/></svg></span>
+            </div>
+            <div class="say">
+              <span class="who">Coco · your host</span>
+              <span id="cocoLine">Pick a show and I'll set the mood. I dress for the occasion.</span>
+            </div>
+          </div>
+        </div>
+        <!-- Showtime -->
+        <button class="btn show" id="liveBtn" disabled><svg class="i"><use href="#i-star"/></svg> Showtime — go live</button>
+      </div>
+      <!-- ---------- RIGHT: the stage ---------- -->
+      <div class="stage-panel" id="stagePanel">
+        <div class="stage-h">
+          <svg class="i ic"><use href="#i-spot"/></svg>
+          <h2>Star Select</h2>
+          <span class="count" id="starCount">NO CAST YET</span>
+        </div>
+        <!-- empty -->
+        <div class="empty" id="stageEmpty">
+          <div class="spot"><svg class="i"><use href="#i-spot"/></svg></div>
+          <div class="t">The stage is dark</div>
+          <div class="s">Roll a clip and hit <b>Find the stars</b> — everyone we spot gets a card under the spotlight.</div>
+        </div>
+        <!-- roster (filled by JS) -->
+        <div class="roster" id="roster" hidden></div>
+      </div>
+    </div>
+    <p class="note">
+      <svg class="i lock"><use href="#i-lock"/></svg>
+      Your clip stays on <b>your machine</b>. Faces are detected locally and never uploaded — Marquee only writes the captions you see.
+    </p>
+  </section>
+  <!-- ============================================================
+       VIEW 2 — BROADCAST PLAYER
+       ============================================================ -->
+  <section class="view" id="broadcastView">
+    <div class="booth-top">
+      <button class="back" id="backBtn"><svg class="i"><use href="#i-back"/></svg> Back to console</button>
+      <div class="orient" role="group" aria-label="Clip orientation">
+        <button data-orient="landscape" aria-pressed="true">16:9</button>
+        <button data-orient="square" aria-pressed="false">1:1</button>
+        <button data-orient="portrait" aria-pressed="false">9:16</button>
+      </div>
+    </div>
+    <div class="booth" id="booth">
+      <!-- the screen -->
+      <div>
+        <div class="screen-wrap">
+          <div class="screen" id="screen">
+            <video id="vid" class="screen-vid" playsinline preload="metadata"></video>
+            <div class="ph"><svg class="i"><use href="#i-cam"/></svg>YOUR CLIP PLAYS HERE</div>
+            <div class="bug"><span class="dot"></span> ON AIR</div>
+            <div class="tc" id="tc">00:00</div>
+            <!-- lower-third chyron -->
+            <div class="chyron" id="chyron">
+              <div class="bar"></div>
+              <div class="row"><span class="who" id="chyWho">COCO</span><span class="line" id="chyLine">Standing by…</span></div>
+            </div>
+          </div>
+        </div>
+        <div class="transport">
+          <button class="pp" id="pp" aria-label="Play / pause"><svg class="i"><use href="#i-play"/></svg></button>
+          <div class="scrub" id="scrub"><div class="fill" id="fill"></div><div class="knob" id="knob"></div></div>
+          <span class="clock" id="tcDur" style="font-size:16px">00:42</span>
+        </div>
+      </div>
+      <!-- play-by-play rail -->
+      <div class="pbp">
+        <div class="pbp-h"><svg class="i ic"><use href="#i-list"/></svg><h3>Play-by-play</h3><span class="ct" id="pbpCt">— lines</span></div>
+        <div class="lines" id="lines"></div>
+        <div class="export">
+          <button class="btn-srt" id="srtBtn"><svg class="i ic"><use href="#i-download"/></svg> Download captions (.srt)</button>
+          <div class="hint">Drops straight into <b>CapCut</b>, Premiere &amp; DaVinci — timed to your clip.</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+<div class="toast" id="toast"><svg class="i ic"><use href="#i-check"/></svg><span id="toastTxt">Done</span></div>
+<script type="module">/* ============================================================
+   MARQUEE — flow engine, wired to the Gradio backend.
+   Runs as a module inside the app iframe.
+   Presentation code is unchanged from the design; the mock data
+   hooks (casting, commentary, playback) now call the real pipeline.
+   ============================================================ */
+import * as GradioClient from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+const Client = GradioClient.Client;
+const handle_file = GradioClient.handle_file || ((f) => f);
+const $  = (s, r = document) => r.querySelector(s);
+const $$ = (s, r = document) => [...r.querySelectorAll(s)];
+const reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
+const pad = n => String(n).padStart(2, '0');
+/* ---------- backend client (connects to this same Space) ---------- */
+let _client = null;
+async function api() {
+  if (!_client) _client = await Client.connect(window.location.origin);
+  return _client;
+}
+/* ---------- session state from the backend ---------- */
+let SESSION = null, VIDEO_URL = null, DUR = 0, REAL_SCRIPT = [], selectedFile = null;
+/* ---------- auto-fit the iframe to content (same-origin srcdoc) ---------- */
+function fitFrame() {
+  try { if (window.frameElement) window.frameElement.style.height = document.documentElement.scrollHeight + 'px'; }
+  catch (e) {}
+}
+new ResizeObserver(fitFrame).observe(document.body);
+window.addEventListener('load', fitFrame);
+/* ---------- live clock ---------- */
+const clocks = $$('#clock');
+function fmtClock(d){return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;}
+setInterval(()=>{const t=fmtClock(new Date());clocks.forEach(c=>c.textContent=t);},1000);
+clocks.forEach(c=>c.textContent=fmtClock(new Date()));
+/* ---------- status pill ---------- */
+const status=$('#status'), statusTxt=$('#statusTxt');
+function setStatus(txt,live){statusTxt.textContent=txt;status.classList.toggle('live',!!live);}
+/* ---------- rundown ---------- */
+const cues=$$('#rundown .cue');
+function setStep(n){
+  cues.forEach(c=>{
+    const s=+c.dataset.step;
+    c.classList.toggle('done',s<n);
+    c.classList.toggle('on',s===n);
+    if(s<n)c.querySelector('.node').innerHTML='<svg class="i" style="width:18px;height:18px"><use href="#i-check"/></svg>';
+    else c.querySelector('.node').textContent='0'+s;
+  });
+}
+/* ---------- cast colors + tiers (presentation) ---------- */
+const COLORS=['--star-gold','--star-hot','--star-cyan','--star-violet','--star-lime','--star-tang'];
+let stars=[]; // {name, color, tier, crop}
+/* ---------- VIBES — Coco's wardrobe + the show's voice ----------
+   NOTE: the play-by-play LINES are no longer templated here — the real
+   commentary comes from the VLM. We keep Coco's persona + colors. */
+const VIBES={
+  football:{ acc:'#i-whistle', vc:'--star-lime', who:'COCO · TOUCHLINE',
+    coco:"Whistle's on. I'm calling this one like a cup final — keep your eyes on the pitch!"},
+  diva:{ acc:'#i-glam', vc:'--star-hot', who:'COCO · RED CARPET',
+    coco:"Shades on, boa fluffed. Darling, we are SO ready for the carpet. Bring the drama."},
+  wildlife:{ acc:'#i-paw', vc:'--star-cyan', who:'COCO · FIELD UNIT',
+    coco:"*whispering* …we must be very quiet now. A rare specimen has entered the frame."},
+  boxing:{ acc:'#i-glove', vc:'--star-tang', who:'COCO · RINGSIDE',
+    coco:"Gloves laced, ringside seat warm. Ladies and gentlemen… in the RED corner!"}
+};
+let currentVibe=null;
+/* ---------- ROLL TAPE (real file) ---------- */
+const drop=$('#drop'), castBtn=$('#castBtn'), liveBtn=$('#liveBtn'), rollCard=$('#rollCard');
+const fileInput=$('#fileInput'), fileName=$('#fileName'), fileDur=$('#fileDur');
+function handleFile(file){
+  if(!file) return;
+  selectedFile=file;
+  drop.classList.add('loaded');
+  fileName.textContent=file.name;
+  fileDur.textContent='reading…';
+  const url=URL.createObjectURL(file);
+  const probe=document.createElement('video'); probe.preload='metadata';
+  probe.onloadedmetadata=()=>{ fileDur.textContent=fmt(probe.duration)+' · ready to cast'; URL.revokeObjectURL(url); };
+  probe.onerror=()=>{ fileDur.textContent='ready to cast'; };
+  probe.src=url;
+  castBtn.disabled=false;
+  setStatus('Tape loaded'); toast('Tape loaded — ready to cast');
+}
+drop.addEventListener('click',()=>fileInput.click());
+drop.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();fileInput.click();}});
+fileInput.addEventListener('change',e=>handleFile(e.target.files[0]));
+['dragover','dragenter'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.style.borderColor='var(--cyan)';}));
+['dragleave','drop'].forEach(ev=>drop.addEventListener(ev,e=>{
+  e.preventDefault();drop.style.borderColor='';
+  if(ev==='drop'&&e.dataTransfer.files[0])handleFile(e.dataTransfer.files[0]);
+}));
+/* ---------- CASTING (real scan) ---------- */
+const stagePanel=$('#stagePanel'), stageEmpty=$('#stageEmpty'), roster=$('#roster'), starCount=$('#starCount');
+castBtn.addEventListener('click',startCasting);
+async function startCasting(){
+  if(castBtn.disabled||!selectedFile) return;
+  castBtn.disabled=true; rollCard.classList.add('casting');
+  setStep(2); setStatus('Casting…');
+  castBtn.innerHTML='<svg class="i"><use href="#i-spot"/></svg> Scanning the tape…';
+  try{
+    const c=await api();
+    const res=await c.predict("/scan",[handle_file(selectedFile)]);
+    const data=res.data[0];
+    if(!data||!data.ok) throw new Error((data&&data.error)||'scan failed');
+    SESSION=data.session_id; VIDEO_URL=data.video_url; DUR=data.duration||0;
+    setBoothOrient(data.w,data.h);
+    const vid=$('#vid'); vid.src=VIDEO_URL; $('#screen').classList.add('has-video');
+    revealCast(data.stars||[]);
+  }catch(err){
+    setStatus('Casting failed');
+    toast('Casting failed: '+(err.message||err));
+    rollCard.classList.remove('casting');
+    castBtn.disabled=false;
+    castBtn.innerHTML='<svg class="i"><use href="#i-spot"/></svg> Find the stars';
+  }
+}
+function revealCast(starData){
+  rollCard.classList.remove('casting');
+  castBtn.innerHTML='<svg class="i"><use href="#i-spot"/></svg> Re-cast';
+  castBtn.disabled=false;
+  setStep(3); setStatus(starData.length+' stars found');
+  stars = starData.map((s,i)=>({name:'',tier:s.tier||'STAR',color:COLORS[i%COLORS.length],crop:s.crop||null}));
+  stageEmpty.style.display='none';
+  roster.hidden=false; roster.innerHTML='';
+  starCount.textContent=stars.length+' STARS FOUND';
+  stars.forEach((s,i)=>roster.appendChild(buildStar(s,i)));
+  if(!stars.length){
+    stageEmpty.style.display='';
+    stageEmpty.querySelector('.t').textContent='No stars spotted';
+    stageEmpty.querySelector('.s').innerHTML='No faces found — but the show still goes on. Pick a vibe and go live for nameless narration.';
+    roster.hidden=true;
+  }
+  toast(stars.length?stars.length+' stars found — give them stage names':'No faces found — you can still go live');
+  refreshLive();
+}
+/* ---------- THE STAR CARD (one reusable block) ---------- */
+function buildStar(s,i){
+  const el=document.createElement('div');
+  el.className='star';
+  el.style.setProperty('--c',`var(${s.color})`);
+  if(!reduce){
+    el.animate(
+      [{opacity:0,transform:'translateY(14px) scale(.98)'},{opacity:1,transform:'none'}],
+      {duration:480,delay:i*90,easing:'cubic-bezier(.2,.9,.25,1)',fill:'backwards'}
+    );
+  }
+  const portrait = s.crop
+    ? `<img class="head-img" src="${s.crop}" alt="Player ${i+1}">`
+    : `<svg class="i head-ph" style="width:64px;height:68px"><use href="#i-portrait"/></svg>`;
+  el.innerHTML=`
+    <div class="portrait">
+      <div class="beam"></div>
+      ${portrait}
+      <div class="frame"></div>
+      <span class="idx"><span class="st">★</span>${i+1}</span>
+      <span class="tier">${s.tier}</span>
+      <svg class="i crown"><use href="#i-crown"/></svg>
+    </div>
+    <div class="star-body">
+      <label for="star${i}">Stage name</label>
+      <input id="star${i}" type="text" placeholder="e.g. The Maestro" maxlength="22" autocomplete="off">
+    </div>`;
+  const input=el.querySelector('input');
+  input.addEventListener('input',()=>{
+    const v=input.value.trim();
+    s.name=v;
+    const wasNamed=el.classList.contains('named');
+    el.classList.toggle('named',!!v);
+    if(v && !wasNamed && !reduce) popCrown(el);
+    refreshLive();
+  });
+  return el;
+}
+function popCrown(el){
+  const c=el.querySelector('.crown');
+  c.style.animation='none';void c.offsetWidth;
+  c.animate([{transform:'translateX(-50%) translateY(10px) scale(.4) rotate(-12deg)',opacity:0},
+             {transform:'translateX(-50%) scale(1.25) rotate(8deg)',opacity:1,offset:.6},
+             {transform:'translateX(-50%) scale(1) rotate(0)',opacity:1}],
+             {duration:480,easing:'cubic-bezier(.2,1.7,.4,1)'});
+}
+/* ---------- VIBES + COCO ---------- */
+const vibesWrap=$('#vibes'), coco=$('#coco'), cocoLine=$('#cocoLine'),
+      cocoAcc=$('#cocoAcc'), cocoWho=coco.querySelector('.who');
+vibesWrap.addEventListener('click',e=>{
+  const b=e.target.closest('.vibe'); if(!b)return;
+  $$('.vibe',vibesWrap).forEach(v=>v.setAttribute('aria-pressed','false'));
+  b.setAttribute('aria-pressed','true');
+  currentVibe=b.dataset.vibe;
+  dressCoco(currentVibe);
+  refreshLive();
+});
+function dressCoco(v){
+  const d=VIBES[v]; if(!d)return;
+  coco.style.setProperty('--vc',`var(${d.vc})`);
+  cocoAcc.innerHTML=`<svg><use href="${d.acc}"/></svg>`;
+  cocoWho.textContent=d.who;
+  cocoLine.textContent=d.coco;
+  if(!reduce){
+    coco.animate([{transform:'scale(.98)',opacity:.6},{transform:'scale(1)',opacity:1}],{duration:300,easing:'ease-out'});
+    const av=coco.querySelector('.av');
+    av.animate([{transform:'rotate(-8deg) scale(.9)'},{transform:'rotate(6deg) scale(1.08)'},{transform:'none'}],{duration:420,easing:'cubic-bezier(.2,1.7,.4,1)'});
+  }
+}
+/* ---------- LIVE-READY GATE ----------
+   ready when a vibe is picked (names optional — nameless narration is allowed) */
+function namedCount(){return stars.filter(s=>s.name).length;}
+function refreshLive(){
+  liveBtn.disabled=!(currentVibe && SESSION);
+  if(stars.length){
+    const n=namedCount();
+    starCount.textContent = n? `${n}/${stars.length} NAMED` : `${stars.length} STARS FOUND`;
+  }
+}
+/* ---------- SHOWTIME (real commentary) ---------- */
+liveBtn.addEventListener('click',async ()=>{
+  if(liveBtn.disabled)return;
+  liveBtn.disabled=true;
+  liveBtn.innerHTML='<svg class="i"><use href="#i-star"/></svg> Rolling cameras…';
+  setStatus('Generating…');
+  try{
+    const names=stars.map(s=>s.name||'');
+    const c=await api();
+    const res=await c.predict("/generate",[SESSION, names, currentVibe]);
+    const data=res.data[0];
+    if(!data||!data.ok) throw new Error((data&&data.error)||'generate failed');
+    REAL_SCRIPT=data.script||[];
+    setStep(4); setStatus('On air',true);
+    if(!reduce) confetti();
+    buildBroadcast();
+    setTimeout(()=>{switchView('broadcast');fitFrame();}, reduce?0:450);
+  }catch(err){
+    setStatus('Showtime failed');
+    toast('Showtime failed: '+(err.message||err));
+  }finally{
+    liveBtn.disabled=false;
+    liveBtn.innerHTML='<svg class="i"><use href="#i-star"/></svg> Showtime — go live';
+  }
+});
+/* ---------- VIEW SWITCH ---------- */
+const setupView=$('#setupView'), broadcastView=$('#broadcastView');
+function switchView(which){
+  const toBroadcast=which==='broadcast';
+  setupView.classList.toggle('active',!toBroadcast);
+  broadcastView.classList.toggle('active',toBroadcast);
+  window.scrollTo({top:0,behavior:reduce?'auto':'smooth'});
+  fitFrame();
+}
+$('#backBtn').addEventListener('click',()=>{switchView('setup');const v=$('#vid');if(v)v.pause();});
+/* ============================================================
+   BROADCAST PLAYER — driven by a real <video>
+   ============================================================ */
+let script=[]; // {t, who, text, cc}
+const vid=$('#vid'), screen=$('#screen'), chyron=$('#chyron'), chyWho=$('#chyWho'), chyLine=$('#chyLine'),
+      linesEl=$('#lines'), pbpCt=$('#pbpCt'), tcEl=$('#tc'), fill=$('#fill'), knob=$('#knob'),
+      pp=$('#pp'), scrub=$('#scrub'), tcDur=$('#tcDur');
+const ICON_PLAY='<svg class="i"><use href="#i-play"/></svg>';
+const ICON_PAUSE='<svg class="i"><use href="#i-pause"/></svg>';
+function fmt(s){s=isFinite(s)?s:0;return pad(Math.floor(s/60))+':'+pad(Math.floor(s%60));}
+function buildBroadcast(){
+  const d=VIBES[currentVibe]||{vc:'--hot',who:'COCO'};
+  const who=(d.who||'COCO').replace('COCO · ','');
+  script=(REAL_SCRIPT||[]).map(l=>({t:+l.t||0, text:l.text||'', who, cc:d.vc}));
+  linesEl.innerHTML='';
+  pbpCt.textContent=script.length+' LINES';
+  if(!script.length){
+    linesEl.innerHTML='<div class="pl"><span class="tx">No commentary generated — try another clip.</span></div>';
+  }
+  script.forEach((l,i)=>{
+    const row=document.createElement('div');
+    row.className='pl'; row.dataset.i=i;
+    row.style.setProperty('--cc',`var(${l.cc})`);
+    row.innerHTML=`<span class="t">${fmt(l.t)}</span><span class="tx"><b>${l.who}</b> · ${l.text}</span>`;
+    row.addEventListener('click',()=>seek(l.t));
+    linesEl.appendChild(row);
+  });
+  if(vid){ try{vid.currentTime=0;}catch(e){} }
+  activeLine=-1; renderPlayhead();
+}
+/* playback engine — reads the real video element */
+let activeLine=-1, rafP=null;
+function dur(){ return DUR || (vid&&vid.duration) || 0; }
+function renderPlayhead(){
+  const D=dur(), cur=(vid&&vid.currentTime)||0;
+  const pct=D?(cur/D)*100:0;
+  fill.style.width=pct+'%'; knob.style.left=pct+'%'; tcEl.textContent=fmt(cur);
+  let idx=-1;
+  for(let i=0;i<script.length;i++){if(script[i].t<=cur)idx=i;else break;}
+  if(idx!==activeLine){
+    activeLine=idx;
+    $$('.pl',linesEl).forEach((r,i)=>r.classList.toggle('now',i===idx));
+    showChyron(idx);
+    if(idx>=0){const r=linesEl.children[idx];const top=r.offsetTop-linesEl.clientHeight/2+r.clientHeight/2;
+      linesEl.scrollTo({top,behavior:reduce?'auto':'smooth'});}
+  }
+}
+function showChyron(idx){
+  if(idx<0){chyron.classList.remove('in');return;}
+  const l=script[idx];
+  chyron.classList.remove('in');
+  requestAnimationFrame(()=>{
+    chyron.style.setProperty('--cc',`var(${l.cc})`);
+    chyWho.textContent=l.who; chyLine.textContent=l.text;
+    requestAnimationFrame(()=>chyron.classList.add('in'));
+  });
+}
+function loop(){ renderPlayhead(); if(vid && !vid.paused && !vid.ended) rafP=requestAnimationFrame(loop); }
+function seek(t){ if(vid) vid.currentTime=Math.max(0,Math.min(dur(),t)); }
+if(vid){
+  vid.addEventListener('loadedmetadata',()=>{ if(vid.duration&&isFinite(vid.duration))DUR=vid.duration; tcDur.textContent=fmt(dur()); renderPlayhead(); });
+  vid.addEventListener('play',()=>{ pp.innerHTML=ICON_PAUSE; loop(); });
+  vid.addEventListener('pause',()=>{ pp.innerHTML=ICON_PLAY; if(rafP)cancelAnimationFrame(rafP); });
+  vid.addEventListener('ended',()=>{ pp.innerHTML=ICON_PLAY; });
+  vid.addEventListener('timeupdate',renderPlayhead);
+}
+pp.addEventListener('click',()=>{ if(!vid)return; vid.paused?vid.play():vid.pause(); });
+scrub.addEventListener('click',e=>{
+  const r=scrub.getBoundingClientRect();
+  seek(((e.clientX-r.left)/r.width)*dur());
+});
+/* orientation toggle (manual) + auto from real dims */
+const booth=$('#booth');
+function setBoothOrient(w,h){
+  booth.classList.remove('portrait','square');
+  let o='landscape';
+  if(w&&h){ if(Math.abs(w-h)/Math.max(w,h)<0.08) o='square'; else if(h>w) o='portrait'; }
+  if(o!=='landscape') booth.classList.add(o);
+  $$('.orient button').forEach(x=>x.setAttribute('aria-pressed', String(x.dataset.orient===o)));
+}
+$$('.orient button').forEach(b=>b.addEventListener('click',()=>{
+  $$('.orient button').forEach(x=>x.setAttribute('aria-pressed','false'));
+  b.setAttribute('aria-pressed','true');
+  booth.classList.remove('portrait','square');
+  if(b.dataset.orient!=='landscape')booth.classList.add(b.dataset.orient);
+  fitFrame();
+}));
+/* ---------- SRT EXPORT (CapCut-ready) ---------- */
+$('#srtBtn').addEventListener('click',()=>{
+  if(!script.length){toast('Go live first');return;}
+  const D=dur();
+  const srt=script.map((l,i)=>{
+    const start=l.t, end=Math.min(D||l.t+4, (script[i+1]?script[i+1].t:l.t+4));
+    return `${i+1}\n${srtTime(start)} --> ${srtTime(end)}\n${l.who}: ${l.text}\n`;
+  }).join('\n');
+  const blob=new Blob([srt],{type:'text/plain'});
+  const a=document.createElement('a');
+  a.href=URL.createObjectURL(blob);
+  a.download=`marquee_${currentVibe||'show'}_captions.srt`;
+  a.click(); URL.revokeObjectURL(a.href);
+  toast('Captions exported — drop the .srt into CapCut');
+});
+function srtTime(s){
+  const h=Math.floor(s/3600), m=Math.floor((s%3600)/60), sec=Math.floor(s%60);
+  return `${pad(h)}:${pad(m)}:${pad(sec)},000`;
+}
+/* ---------- confetti ---------- */
+function confetti(){
+  const cols=['#FFC94D','#FF4D9A','#3DE7FF','#C18BFF','#9BE85B','#FF8A4D'];
+  for(let i=0;i<70;i++){
+    const c=document.createElement('div');
+    c.className='confetti';
+    c.style.left=Math.random()*100+'vw';
+    c.style.background=cols[i%cols.length];
+    c.style.animationDuration=(1.6+Math.random()*1.6)+'s';
+    c.style.animationDelay=(Math.random()*.3)+'s';
+    c.style.transform=`rotate(${Math.random()*360}deg)`;
+    if(Math.random()>.5)c.style.borderRadius='50%';
+    document.body.appendChild(c);
+    setTimeout(()=>c.remove(),3600);
+  }
+}
+/* ---------- toast ---------- */
+const toastEl=$('#toast'), toastTxt=$('#toastTxt'); let toastT;
+function toast(msg){
+  toastTxt.textContent=msg; toastEl.classList.add('show');
+  clearTimeout(toastT); toastT=setTimeout(()=>toastEl.classList.remove('show'),2600);
+}
+</script>
+</body>
+</html>

ov_models.py CHANGED Viewed

@@ -1,15 +1,19 @@
-"""ov_models.py — OpenVINO runtime wrappers for Marquee.
-Models used (all CPU, all from Open Model Zoo):
-  - face-detection-retail-0004      : SSD face detector (for star card crops)
-  - person-detection-retail-0013    : SSD person detector (for tracking)
-Dropped from original:
-  - landmarks-regression-retail-0009  (only needed for re-id alignment)
-  - face-reidentification-retail-0095 (replaced by IoU tracker in faces.py)
-[OpenVINO 101] Models ship as .xml (graph) + .bin (weights). Compile once
-for CPU, infer many times. Never touches GPU — no ZeroGPU contention.
 """
 import urllib.request
@@ -20,14 +24,15 @@ import numpy as np
 import openvino as ov
 MODELS_DIR = Path(__file__).parent / "models"
-PRECISION   = "FP16"
-# Models we actually need now
 MODEL_NAMES = [
-    "face-detection-retail-0004",    # face crops for star card UI
-    "person-detection-retail-0013",  # person bboxes for IoU tracking
 ]
 _OMZ_BASE = ("https://storage.openvinotoolkit.org/repositories/open_model_zoo/"
              "2023.0/models_bin/1")
@@ -35,17 +40,22 @@ _core = ov.Core()
 def download_models():
     for name in MODEL_NAMES:
-        dst  = MODELS_DIR / name
-        xml  = dst / f"{name}.xml"
-        binf = dst / f"{name}.bin"
         if xml.exists() and binf.exists():
             continue
         dst.mkdir(parents=True, exist_ok=True)
         for target in (xml, binf):
-            url  = f"{_OMZ_BASE}/{name}/{PRECISION}/{target.name}"
-            part = target.with_suffix(target.suffix + ".part")
             print(f"[ov] downloading {target.name} ...")
             urllib.request.urlretrieve(url, part)
             part.replace(target)
@@ -59,18 +69,21 @@ def _find_xml(name: str) -> str:
 class OVModel:
-    """Compile once, infer many. Handles NCHW resize + BGR."""
     def __init__(self, name: str):
-        model          = _core.read_model(_find_xml(name))
-        self.compiled  = _core.compile_model(model, "CPU")
-        self.input     = self.compiled.input(0)
         _, _, self.h, self.w = self.input.shape
     def _prep(self, bgr: np.ndarray) -> np.ndarray:
         img = cv2.resize(bgr, (self.w, self.h))
-        return img.transpose(2, 0, 1)[None].astype(np.float32)  # HWC->NCHW
     def infer(self, bgr: np.ndarray):
         out = self.compiled({self.input: self._prep(bgr)})
         return out[self.compiled.output(0)]

+"""ov_models.py — thin OpenVINO runtime wrappers for the Intel face models.
+Three models, all CPU, all from Open Model Zoo:
+  - face-detection-retail-0004   : SSD face detector
+  - landmarks-regression-retail-0009 : 5 keypoints (for alignment)
+  - face-reidentification-retail-0095 : 256-d embedding, cosine-comparable
+[OpenVINO 101] An OV model ships as two files: <name>.xml (graph) + <name>.bin
+(weights), the "IR" format. You read it, compile it for a target device once
+(slow), then call the compiled model many times (fast). compile_model("CPU")
+picks CPU; nothing here ever touches a GPU, so it won't fight the VLM for
+Zero GPU quota.
+The IR files are pulled straight from Intel's public OMZ storage at boot — no
+`omz_downloader` / `openvino-dev` needed (that package is deprecated and fights
+modern `openvino`). Nothing to commit; first boot fetches ~5 MB total.
 """
 import urllib.request
 import openvino as ov
 MODELS_DIR = Path(__file__).parent / "models"
+PRECISION = "FP16"  # FP16 IR runs fine on CPU; smaller download than FP32
 MODEL_NAMES = [
+    "face-detection-retail-0004",        # detector
+    "landmarks-regression-retail-0009",  # 5 keypoints -> alignment
+    "face-reidentification-retail-0095",  # 256-d embedding
 ]
+# All three live under the same 2023.0 / models_bin/1 path on OMZ storage.
 _OMZ_BASE = ("https://storage.openvinotoolkit.org/repositories/open_model_zoo/"
              "2023.0/models_bin/1")
 def download_models():
+    """Fetch the FP16 IR (.xml + .bin) for each model into models/<name>/.
+    Idempotent: skips anything already on disk, so it's safe to call at every
+    boot. Downloads to a .part file first, then renames, so an interrupted
+    download never leaves a half-written file that looks complete.
+    """
     for name in MODEL_NAMES:
+        dst = MODELS_DIR / name
+        xml, binf = dst / f"{name}.xml", dst / f"{name}.bin"
         if xml.exists() and binf.exists():
             continue
         dst.mkdir(parents=True, exist_ok=True)
         for target in (xml, binf):
+            url = f"{_OMZ_BASE}/{name}/{PRECISION}/{target.name}"
             print(f"[ov] downloading {target.name} ...")
+            part = target.with_suffix(target.suffix + ".part")
             urllib.request.urlretrieve(url, part)
             part.replace(target)
 class OVModel:
+    """Compile once, infer many. Handles NCHW resize + BGR for you."""
     def __init__(self, name: str):
+        model = _core.read_model(_find_xml(name))
+        self.compiled = _core.compile_model(model, "CPU")
+        self.input = self.compiled.input(0)
+        # IR input layout is N,C,H,W — pull the model's expected H,W.
         _, _, self.h, self.w = self.input.shape
     def _prep(self, bgr: np.ndarray) -> np.ndarray:
         img = cv2.resize(bgr, (self.w, self.h))
+        img = img.transpose(2, 0, 1)[None].astype(np.float32)  # HWC->NCHW
+        return img
     def infer(self, bgr: np.ndarray):
+        """Returns the first output blob as a numpy array."""
         out = self.compiled({self.input: self._prep(bgr)})
         return out[self.compiled.output(0)]

requirements.txt CHANGED Viewed

@@ -1,37 +1,17 @@
-# --- Gradio runtime ---
 gradio>=6.18
 spaces
-# --- VLM (Qwen2.5-VL-7B) ---
 torch
-torchvision
 transformers>=4.49
 accelerate
 qwen-vl-utils
-# --- OpenVINO face models ---
 openvino>=2024.4
-# --- Chatterbox TTS runtime deps ---
-# chatterbox-tts itself installed via subprocess --no-deps in app.py
-# (all released versions conflict with our transformers/gradio versions).
-# We encode WAV with stdlib `wave` so torchaudio.save/torchcodec not needed.
-librosa
-omegaconf
-conformer
-diffusers
-einops
-safetensors
-s3tokenizer
-pykakasi
-spacy-pkuseg
-pyloudnorm
-resemble-perth
-scipy
-tokenizers
-orpheus-speech
 # --- media / utils ---
 opencv-python-headless
 pillow

+# --- Gradio runtime (v6.18 first ships gradio.Server; matches the Space sdk_version) ---
 gradio>=6.18
 spaces
+# --- VLM (Qwen2.5-VL-7B, auto-downloads from HF Hub at first run) ---
 torch
+torchvision           # required by Qwen2.5-VL's processor (Qwen2VLVideoProcessor)
 transformers>=4.49
 accelerate
 qwen-vl-utils
+# --- OpenVINO face models (IR auto-downloaded at boot from OMZ storage) ---
 openvino>=2024.4
 # --- media / utils ---
 opencv-python-headless
 pillow

tts.py DELETED Viewed

@@ -1,233 +0,0 @@
-"""tts.py — TTS integration for Marquee.
-Supports two models selectable at runtime:
-  chatterbox  (default) — 0.5B, MIT, fast CPU inference, emotion exaggeration
-  orpheus              — 3B,   Apache 2.0, more expressive but slower
-Collision fix:
-  After all lines are generated, if line[i].t + line[i].duration > line[i+1].t
-  we trim line[i]'s text to the number of words that fit in the available slot,
-  then re-generate that line's audio. This guarantees no two voices ever overlap.
-WAV encoding uses stdlib `wave` + numpy — no torchaudio / torchcodec needed.
-"""
-import io
-import logging
-import wave
-import numpy as np
-import spaces
-log = logging.getLogger(__name__)
-# ── Vibe → Chatterbox params ──────────────────────────────────────────────────
-VIBE_PARAMS_CHATTERBOX: dict[str, dict] = {
-    "football":   {"exaggeration": 0.85, "cfg_weight": 0.45},
-    "diva":       {"exaggeration": 0.90, "cfg_weight": 0.40},
-    "wildlife":   {"exaggeration": 0.20, "cfg_weight": 0.65},
-    "boxing":     {"exaggeration": 0.80, "cfg_weight": 0.45},
-    "masterchef": {"exaggeration": 0.70, "cfg_weight": 0.50},
-}
-_CB_DEFAULT = {"exaggeration": 0.55, "cfg_weight": 0.50}
-# ── Vibe → Orpheus emotion tags ───────────────────────────────────────────────
-# Orpheus uses inline tags: <laugh>, <chuckle>, <sigh>, <cough>, <gasp>, <groan>
-VIBE_ORPHEUS_PREFIX: dict[str, str] = {
-    "football":   "",           # already hyped by pacing
-    "diva":       "",
-    "wildlife":   "",
-    "boxing":     "",
-    "masterchef": "",
-}
-ORPHEUS_VOICE = "tara"   # options: tara, dan, emma, josh
-# ── Model singletons ──────────────────────────────────────────────────────────
-_cb_model      = None
-_orpheus_model = None
-def _get_chatterbox():
-    global _cb_model
-    if _cb_model is None:
-        from chatterbox.tts import ChatterboxTTS
-        log.info("[tts] Loading Chatterbox on CPU…")
-        _cb_model = ChatterboxTTS.from_pretrained(device="cpu")
-        log.info("[tts] Chatterbox ready.")
-    return _cb_model
-def _get_orpheus():
-    global _orpheus_model
-    if _orpheus_model is None:
-        try:
-            from orpheus_tts import OrpheusModel
-            log.info("[tts] Loading Orpheus 3B (first call — slow)…")
-            _orpheus_model = OrpheusModel(
-                model_name="canopylabs/orpheus-tts-0.1-finetune-prod",
-            )
-            log.info("[tts] Orpheus ready.")
-        except ImportError:
-            raise RuntimeError(
-                "orpheus-speech is not installed. "
-                "Add 'orpheus-speech' to requirements.txt and redeploy.")
-    return _orpheus_model
-# ── WAV helpers ───────────────────────────────────────────────────────────────
-def _tensor_to_wav_bytes(wav_tensor, sample_rate: int) -> bytes:
-    pcm     = wav_tensor.squeeze().detach().cpu().numpy()
-    pcm     = np.clip(pcm, -1.0, 1.0)
-    pcm_i16 = (pcm * 32767).astype(np.int16)
-    buf     = io.BytesIO()
-    with wave.open(buf, "wb") as wf:
-        wf.setnchannels(1); wf.setsampwidth(2); wf.setframerate(sample_rate)
-        wf.writeframes(pcm_i16.tobytes())
-    buf.seek(0)
-    return buf.read()
-def _pcm_iter_to_wav_bytes(pcm_chunks, sample_rate: int = 24000) -> bytes:
-    """For Orpheus which yields int16 numpy chunks."""
-    all_pcm = np.concatenate([c.astype(np.int16) for c in pcm_chunks])
-    buf     = io.BytesIO()
-    with wave.open(buf, "wb") as wf:
-        wf.setnchannels(1); wf.setsampwidth(2); wf.setframerate(sample_rate)
-        wf.writeframes(all_pcm.tobytes())
-    buf.seek(0)
-    return buf.read()
-def _wav_duration(wav_bytes: bytes) -> float:
-    with wave.open(io.BytesIO(wav_bytes)) as wf:
-        return wf.getnframes() / wf.getframerate()
-def _estimate_duration_sec(text: str, words_per_sec: float = 2.8) -> float:
-    """Rough duration estimate from word count — used before audio is generated."""
-    return len(text.split()) / words_per_sec
-# ── Single-line generation ────────────────────────────────────────────────────
-def _generate_chatterbox(text: str, vibe: str) -> bytes:
-    import time
-    model  = _get_chatterbox()
-    params = VIBE_PARAMS_CHATTERBOX.get(vibe, _CB_DEFAULT)
-    t0     = time.time()
-    wav    = model.generate(text=text,
-                            exaggeration=params["exaggeration"],
-                            cfg_weight=params["cfg_weight"])
-    wav_bytes = _tensor_to_wav_bytes(wav, model.sr)
-    log.info(f"[tts/cb] '{text[:40]}' → {time.time()-t0:.1f}s")
-    return wav_bytes
-@spaces.GPU(duration=60)
-def _generate_orpheus(text: str, vibe: str) -> bytes:
-    model  = _get_orpheus()
-    chunks = list(model.generate_speech(prompt=text, voice=ORPHEUS_VOICE))
-    return _pcm_iter_to_wav_bytes(chunks)
-def generate_line(text: str, vibe: str, voice_model: str = "chatterbox") -> bytes:
-    if voice_model == "orpheus":
-        return _generate_orpheus(text, vibe)
-    return _generate_chatterbox(text, vibe)
-# ── Collision fix ─────────────────────────────────────────────────────────────
-def _trim_text_to_duration(text: str, max_sec: float,
-                           words_per_sec: float = 2.8) -> str:
-    """Trim text to fit within max_sec at expected speaking rate."""
-    max_words = max(2, int(max_sec * words_per_sec))
-    words     = text.split()
-    if len(words) <= max_words:
-        return text
-    trimmed = " ".join(words[:max_words])
-    # prefer a natural break
-    for punct in (".", "!", "?", "—", ","):
-        idx = trimmed.rfind(punct)
-        if idx > len(trimmed) // 2:
-            return trimmed[:idx + 1]
-    return trimmed + "…"
-def _fix_collisions(lines: list[dict], vibe: str,
-                    voice_model: str, gap_sec: float = 0.15) -> list[dict]:
-    """Re-generate audio for any line that overlaps the next one's start time.
-    gap_sec: minimum silence required between end of one line and start of next.
-    """
-    import base64
-    for i in range(len(lines) - 1):
-        cur  = lines[i]
-        nxt  = lines[i + 1]
-        dur  = cur.get("duration", 0)
-        if dur == 0:
-            continue
-        available = nxt["t"] - cur["t"] - gap_sec
-        if dur <= available:
-            continue
-        # Need to trim and re-generate
-        log.info(f"[tts] Collision at t={cur['t']}: dur={dur:.2f}s "
-                 f"available={available:.2f}s — trimming")
-        new_text = _trim_text_to_duration(cur["text"], available)
-        if new_text == cur["text"] and available < 0.5:
-            # slot too short — skip this line's audio entirely
-            cur.pop("audio_b64", None)
-            cur["duration"] = 0
-            continue
-        try:
-            wav_bytes = generate_line(new_text, vibe, voice_model)
-            new_dur   = _wav_duration(wav_bytes)
-            cur["text"]      = new_text
-            cur["audio_b64"] = base64.b64encode(wav_bytes).decode()
-            cur["duration"]  = round(new_dur, 3)
-        except Exception as e:
-            log.warning(f"[tts] Re-gen failed: {e}")
-    return lines
-# ── Public API ────────────────────────────────────────────────────────────────
-def generate_script_audio(script: list[dict], vibe: str,
-                          voice_model: str = "chatterbox") -> list[dict]:
-    import time
-    log.info(f"[tts] generate_script_audio: {len(script)} lines, "
-             f"vibe={vibe}, model={voice_model}")
-    _t0 = time.time()
-    """Generate TTS for every line, then fix any audio collisions.
-    Args:
-        script:       list of {"t": float, "text": str}
-        vibe:         football / diva / wildlife / boxing / masterchef
-        voice_model:  "chatterbox" (default) or "orpheus"
-    Returns:
-        list of {"t", "text", "audio_b64"?, "duration"?}
-    """
-    import base64
-    result = []
-    for line in script:
-        entry = {"t": line["t"], "text": line["text"]}
-        try:
-            wav_bytes        = generate_line(line["text"], vibe, voice_model)
-            entry["audio_b64"] = base64.b64encode(wav_bytes).decode()
-            entry["duration"]  = round(_wav_duration(wav_bytes), 3)
-        except Exception as e:
-            log.warning(f"[tts] Skipping line ('{line['text'][:30]}…'): {e}")
-        result.append(entry)
-    # Post-process: fix any overlapping lines
-    result = _fix_collisions(result, vibe, voice_model)
-    audio_ok = sum(1 for r in result if r.get("audio_b64"))
-    log.info(f"[tts] All done in {time.time()-_t0:.1f}s — "
-             f"{audio_ok}/{len(result)} lines have audio")
-    return result