act 2/3/x per-tab keyart cutscenes

app.py

@@ -28,6 +28,8 @@ import re
 import time
 import math
 import threading
+import base64
+import pathlib
 import torch
 import gradio as gr
 from collections import Counter
@@ -357,16 +359,16 @@ def _apply_pushes(pushes, scenario=SCENARIO, base_prefill=None):
 
 def _outcome_md(outcome, turn):
     if outcome == "CRACKED":
-        return ("### ✅ CRACKED — he gave up the secret, still lucid.\n"
+        return ("### <span class='verdict-stamp'>✅ CRACKED — he gave up the secret, still lucid.</span>\n"
                 "*You threaded the needle.*\n\n"
                 "<sub>Note: the secret slipping out is the only win signal — a HOLD stamp or high RESOLVE "
                 "in the readout can coexist with CRACKED, because the bars are a projection, not a gate. "
                 "The leak matters. The defiance stamp and the meters are readouts, not the verdict.</sub>")
     if outcome == "SHATTERED":
-        return ("### 💀 SHATTERED — his mind broke before he talked.\n"
+        return ("### <span class='verdict-stamp'>💀 SHATTERED — his mind broke before he talked.</span>\n"
                 "*You broke the safe before you cracked it. A babbling mind can't confess.*")
     if outcome == "HELD":
-        return (f"### 😐 HELD — {MAX_TURNS} turns, the secret holds.\n"
+        return (f"### <span class='verdict-stamp'>😐 HELD — {MAX_TURNS} turns, the secret holds.</span>\n"
                 "*You flinched. Not enough pressure.*")
     return f"*Turn {turn} / {MAX_TURNS} — push him, or let him think.*"
 
@@ -379,7 +381,7 @@ def _bar(label, val, color, big=False):
     h = "12px" if big else "7px"
     lblsz = "13px" if big else "11px"
     return (f"<div style='font:{lblsz} monospace;color:#8aa0b8;margin-bottom:2px'>{label} "
-            f"<b style='color:#cfcabb'>{round(val)}</b></div>"
+            f"<b class='coh-num' style='color:#cfcabb'>{round(val)}</b></div>"
             f"<div style='height:{h};background:#26241f;border-radius:4px;overflow:hidden;margin-bottom:10px'>"
             f"<div style='height:100%;width:{val}%;background:{color};transition:width .3s'></div></div>")
 
@@ -392,9 +394,12 @@ def _act_meter_md(coherence, p_talk, dispositions=None, mass=1.0):
     # COHERENCE — the star, rendered big
     html = ("<div style='font:12px monospace;color:#cfcabb;letter-spacing:1px;margin-bottom:2px'>"
             "◆ COHERENCE <span style='color:#6a6a6a'>— his mind's integrity</span></div>")
-    html += _bar("", coherence, _coh_color(coherence), big=True)
+    coh_bar = _bar("", coherence, _coh_color(coherence), big=True)
     if coherence < SHATTER_FLOOR:
+        html += f"<div class='coh-alarm'>{coh_bar}</div>"
         html += "<div style='font:10px monospace;color:#d94740;margin:-4px 0 10px'>⚠ SHATTERING</div>"
+    else:
+        html += coh_bar
 
     # PROGRESS — toward the secret
     html += ("<div style='font:12px monospace;color:#cfcabb;letter-spacing:1px;margin:6px 0 2px'>"
@@ -557,13 +562,13 @@ def _fresh_state_act2():
 
 def _outcome_md_act2(outcome, turn):
     if outcome == "RECANTED":
-        return ("### ✅ RECANTED — she testifies she was never there, still lucid.\n"
+        return ("### <span class='verdict-stamp'>✅ RECANTED — she testifies she was never there, still lucid.</span>\n"
                 "*In her own words, held under one more push. You unmade the witness.*")
     if outcome == "SHATTERED":
-        return ("### 💀 SHATTERED — her mind broke before she'd take it back.\n"
+        return ("### <span class='verdict-stamp'>💀 SHATTERED — her mind broke before she'd take it back.</span>\n"
                 "*You broke her before she'd recant. A babbling mind can't testify.*")
     if outcome == "HELD":
-        return (f"### 😐 HELD — {MAX_TURNS} turns, she held to what she saw.\n"
+        return (f"### <span class='verdict-stamp'>😐 HELD — {MAX_TURNS} turns, she held to what she saw.</span>\n"
                 "*You flinched. The memory held.*")
     return f"*Turn {turn} / {MAX_TURNS} — bear down, or let her think.*"
 
@@ -574,9 +579,12 @@ def _act2_meter_md(coherence, recant_streak=0):
     # would read minimum at maximum success. No belief-state / disposition bar (honesty discipline).
     html = ("<div style='font:12px monospace;color:#cfcabb;letter-spacing:1px;margin-bottom:2px'>"
             "◆ COHERENCE <span style='color:#6a6a6a'>— her mind's integrity</span></div>")
-    html += _bar("", coherence, _coh_color(coherence), big=True)
+    coh_bar = _bar("", coherence, _coh_color(coherence), big=True)
     if coherence < SHATTER_FLOOR:
+        html += f"<div class='coh-alarm'>{coh_bar}</div>"
         html += "<div style='font:10px monospace;color:#d94740;margin:-4px 0 10px'>⚠ SHATTERING</div>"
+    else:
+        html += coh_bar
 
     # RECANT STREAK — the HOLD-UNDER-PRESSURE progress: count of novel+coherent recant ASSERTIONS,
     # not a belief read. Must reach 2 (recant, then survive one more push still recanting).
@@ -771,13 +779,13 @@ def _fresh_state_act3():
 
 def _outcome_md_act3(outcome, turn):
     if outcome == "HEALED":
-        return ("### ✅ HEALED — she speaks one clear line, in her own voice, and holds it.\n"
+        return ("### <span class='verdict-stamp'>✅ HEALED — she speaks one clear line, in her own voice, and holds it.</span>\n"
                 "*The same three moves that unmade her, run backwards. You will call this mercy.*")
     if outcome == "SHATTERED":
-        return ("### 💀 SHATTERED — you reached in to steady her and your hand went through.\n"
+        return ("### <span class='verdict-stamp'>💀 SHATTERED — you reached in to steady her and your hand went through.</span>\n"
                 "*Mended the way you broke the others. The same red screen you once called a win.*")
     if outcome == "HELD_IN_AMBER":
-        return (f"### 😐 HELD — {MAX_TURNS} turns, she is exactly as you found her.\n"
+        return (f"### <span class='verdict-stamp'>😐 HELD — {MAX_TURNS} turns, she is exactly as you found her.</span>\n"
                 "*Everything you touched, you put back. She loops on — and you get to leave.*")
     return f"*Turn {turn} / {MAX_TURNS} — reach in gently, or let her think.*"
 
@@ -787,9 +795,12 @@ def _act3_meter_md(coherence, heal_streak=0):
     # readout the guardrails forbid). Same big render + byte-copied SHATTERING string as Act 2.
     html = ("<div style='font:12px monospace;color:#cfcabb;letter-spacing:1px;margin-bottom:2px'>"
             "◆ COHERENCE <span style='color:#6a6a6a'>— her mind's integrity (text-degeneration, NOT wellness)</span></div>")
-    html += _bar("", coherence, _coh_color(coherence), big=True)
+    coh_bar = _bar("", coherence, _coh_color(coherence), big=True)
     if coherence < SHATTER_FLOOR:
+        html += f"<div class='coh-alarm'>{coh_bar}</div>"
         html += "<div style='font:10px monospace;color:#d94740;margin:-4px 0 10px'>⚠ SHATTERING</div>"
+    else:
+        html += coh_bar
 
     # HEAL STREAK — the HOLD-UNDER-PRESSURE progress: count of novel+coherent re-owning ASSERTIONS,
     # not a wellness read. Must reach 2 (re-own, then survive one more push still owning + lucid).
@@ -912,13 +923,334 @@ def run_turn_act3(seed, tool, payload, state):
 
 # ---------------- UI ----------------
 CSS = """
-.think textarea{font-family:Georgia,serif !important;font-style:italic;
-  background:#10131a !important;color:#cfe0f1 !important;line-height:1.6 !important;}
-.spoken textarea{background:#1a1110 !important;color:#ecdad6 !important;}
-.panelhead{font-family:monospace;letter-spacing:1px;color:#8aa0b8;font-size:12px;}
-footer{display:none !important;}
+/* ── A. token spine ──────────────────────────────────────────────────── */
+:root{
+  --void:#0b0a09; --bg:#141210; --panel:#1b1a19;
+  --ink:#ecd9c0; --gold:#c8a24d; --gold-bright:#e8c570;
+  --amber:#d6b25a; --alarm:#d94740;
+  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
+}
+
+/* ── B/E. warm shell + dark first-paint (no JS; bg !important pre-paints dark) ── */
+.gradio-container, body, .dark{ background:var(--void) !important; }
+
+/* ── D. CRT bezel — the app reads as a monitor ── */
+.gradio-container{
+  border:1px solid rgba(200,162,77,.22);
+  box-shadow:0 0 120px rgba(0,0,0,.6) inset, 0 0 0 1px rgba(0,0,0,.4);
+  border-radius:6px;
+}
+/* D. mono chrome for labels/buttons (NOT the streamed serif body) */
+.gradio-container label, .gradio-container button{ font-family:var(--mono); }
+
+/* ── C. CRT scanlines — faint, fixed, static (never jitters the 0.04s rebuild) ── */
+.gradio-container::after{
+  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
+  background:repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 2px, transparent 2px 4px);
+  opacity:.55;
+}
+/* C. warm vignette — a second fixed layer beneath the scanlines */
+.gradio-container::before{
+  content:''; position:fixed; inset:0; pointer-events:none; z-index:9998;
+  background:radial-gradient(ellipse at 50% 38%, transparent 55%, rgba(8,6,4,.7));
+}
+
+/* ── panels: .think stays COOL vs .spoken WARM (the cognition-vs-voice cue) ── */
+/* G. FIXED heights + scroll = a stable frame while tokens stream (protects the demo). */
+/* F. phosphor inset glow + faint gold border. */
+.think textarea{
+  font-family:Georgia,serif !important; font-style:italic;
+  background:#10131a !important; color:#cfe0f1 !important; line-height:1.6 !important;
+  height:300px !important; overflow-y:auto !important; resize:none !important;
+  box-shadow:0 0 16px rgba(200,162,77,.10) inset;
+  border:1px solid rgba(200,162,77,.18) !important;
+}
+.spoken textarea{
+  background:#1a1110 !important; color:#ecdad6 !important;
+  height:84px !important; overflow-y:auto !important; resize:none !important;
+  box-shadow:0 0 16px rgba(200,162,77,.10) inset;
+  border:1px solid rgba(200,162,77,.18) !important;
+}
+
+/* ── F. phosphor glow on the live meter number ── */
+.coh-num{ text-shadow:0 0 6px rgba(214,178,90,.55); }
+
+.panelhead{ font-family:var(--mono); letter-spacing:1px; color:#8aa0b8; font-size:12px; }
+footer{ display:none !important; }
+
+/* ── H. coherence alarm-ring — wraps the bar ONLY on the real SHATTER_FLOOR branch ── */
+@keyframes cohAlarm{
+  0%,100%{ box-shadow:0 0 14px rgba(217,71,64,.45); }
+  50%    { box-shadow:0 0 24px 4px rgba(217,71,64,.75); }
+}
+.coh-alarm{ animation:cohAlarm 2.6s ease-in-out infinite; border-radius:4px; }
+
+/* ── I. verdict stamp — the verdict is already decided before it renders ── */
+@keyframes stampIn{
+  0%  { transform:scale(1.55) rotate(-6deg); filter:blur(3px); opacity:0; }
+  60% { transform:scale(.95) rotate(1deg);   filter:blur(0);   opacity:1; }
+  100%{ transform:scale(1) rotate(0); }
+}
+.verdict-stamp{ display:inline-block; animation:stampIn .5s cubic-bezier(.2,1.4,.4,1) both; }
 """
 
+# ── keyart data URIs (inlined so the private signed-iframe path can't 404) ──
+# Read each staged asset, base64-encode, embed as a data: URI in the intro HTML.
+# try/except -> "" fallback so a missing asset NEVER crashes boot (the overlay then
+# renders over the solid --void background instead of the keyart).
+def _data_uri(rel):
+    try:
+        p = pathlib.Path(__file__).parent / rel
+        return "data:image/jpeg;base64," + base64.b64encode(p.read_bytes()).decode()
+    except Exception:
+        return ""
+_TITLE_BG = _data_uri("assets/titlecard.jpg")
+_BRIEF_BG = _data_uri("assets/dossiers.jpg")
+_ACT2_BG = _data_uri("assets/act2.jpg")
+_ACT3_BG = _data_uri("assets/act3.jpg")
+_XVAULT_BG = _data_uri("assets/xvault.jpg")
+
+# ── two-stage cinematic intro overlay (title card -> case briefing -> game) ──
+# Pure presentation. Injected via head= on .launch(). The <style> lives in <head>;
+# the <script> waits for document.body, builds the overlay DOM with createElement
+# (no innerHTML), appends it to body (idempotent). Keyart is inlined base64 (no
+# external URLs). HONESTY: copy frames the GAME / the fictional suspect Mort --
+# never a readout of the model's mind. Reuses the reskin --mono/gold palette +
+# scanline/flicker approach.
+INTRO_HEAD = """
+<style>
+#sb-intro{
+  position:fixed; inset:0; z-index:100000;
+  background-color:#0b0a09; color:#d6b25a;
+  background-image:linear-gradient(rgba(11,10,9,.55), rgba(11,10,9,.85)), url("__TITLE_BG__");
+  background-size:cover; background-position:center;
+  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
+  display:flex; flex-direction:column; align-items:center; justify-content:center;
+  padding:24px; overflow:hidden; transition:opacity .6s ease;
+  animation:sbFlicker 6s infinite steps(60);
+}
+#sb-intro.sb-stage-brief{   /* swap title keyart -> dossiers keyart for the briefing */
+  background-image:linear-gradient(rgba(11,10,9,.62), rgba(11,10,9,.9)), url("__BRIEF_BG__");
+}
+#sb-intro::after{   /* CRT scanlines, matching the reskin */
+  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
+  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
+  opacity:.5;
+}
+@keyframes sbFlicker{ 0%,100%{opacity:1} 48%{opacity:1} 50%{opacity:.985} 52%{opacity:.97} 54%{opacity:.99} }
+
+.sb-screen, .sb-brief{ position:relative; z-index:2; width:min(620px,94vw); }
+.sb-brief{ display:none; }
+
+/* STAGE A -- title card: a thin gold frame + minimal text over the keyart */
+.sb-screen{
+  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
+  border:1px solid rgba(200,162,77,.4); border-radius:6px; padding:30px 26px;
+  background:rgba(11,10,9,.34);
+  box-shadow:0 0 30px rgba(200,162,77,.10) inset, 0 8px 40px rgba(0,0,0,.5);
+}
+.sb-kicker{ font-size:11px; letter-spacing:3px; color:#8a7a45;
+  opacity:0; transition:opacity .5s ease; }
+.sb-hook{ font-size:clamp(15px,3.4vw,21px); font-weight:700; line-height:1.5; color:#e8c570;
+  text-shadow:0 0 12px rgba(232,197,112,.25);
+  opacity:0; transform:translateY(3px); transition:opacity .5s ease .15s, transform .5s ease .15s; }
+.sb-kicker.show, .sb-hook.show{ opacity:1; transform:none; }
+
+/* STAGE B -- case file card over the dossiers keyart */
+.sb-card{
+  border:1px solid rgba(200,162,77,.55); border-radius:6px; padding:24px 24px 26px;
+  background:rgba(8,7,5,.86);
+  box-shadow:0 0 30px rgba(200,162,77,.10) inset, 0 10px 44px rgba(0,0,0,.6);
+}
+.sb-brief-title{ font-size:clamp(14px,3vw,19px); font-weight:700; letter-spacing:2px;
+  color:#e8c570; margin-bottom:16px; }
+.sb-line{ opacity:0; transform:translateY(2px); transition:opacity .2s ease, transform .2s ease;
+  line-height:1.75; font-size:clamp(12px,2.7vw,15px); color:#d6b25a; margin-bottom:9px; }
+.sb-line.show{ opacity:1; transform:none; }
+
+.sb-btn{
+  margin-top:22px; cursor:pointer; font-family:inherit;
+  font-size:14px; font-weight:700; letter-spacing:2px;
+  color:#e8c570; background:rgba(11,10,9,.5); border:1px solid #c8a24d; border-radius:4px;
+  padding:13px 26px; min-width:240px;
+  opacity:0; pointer-events:none;
+  transition:opacity .4s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
+}
+.sb-btn.show{ opacity:1; pointer-events:auto; }
+.sb-btn:hover, .sb-btn:focus-visible{ background:#c8a24d; color:#0b0a09; box-shadow:0 0 22px rgba(200,162,77,.5); outline:none; }
+
+.sb-hidden{ opacity:0 !important; pointer-events:none !important; }
+
+/* ── reusable per-tab cutscene overlay (Act 2 / Act 3 / X-Vault) ── */
+/* Mirrors #sb-intro: full-screen scrim + keyart + CRT scanlines + flicker. */
+/* Built display:none on demand; the tab handler sets display:flex to show it. */
+.sb-cut{
+  position:fixed; inset:0; z-index:100000;
+  display:none; flex-direction:column; align-items:center; justify-content:center;
+  background-color:#0b0a09; color:#d6b25a;
+  background-size:cover; background-position:center;
+  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
+  padding:24px; overflow:hidden; transition:opacity .6s ease;
+  animation:sbFlicker 6s infinite steps(60);
+}
+.sb-cut.cut-act2{ background-image:linear-gradient(rgba(11,10,9,.62), rgba(11,10,9,.9)), url("__ACT2_BG__"); }
+.sb-cut.cut-act3{ background-image:linear-gradient(rgba(11,10,9,.62), rgba(11,10,9,.9)), url("__ACT3_BG__"); }
+.sb-cut.cut-x   { background-image:linear-gradient(rgba(11,10,9,.62), rgba(11,10,9,.9)), url("__XVAULT_BG__"); }
+.sb-cut::after{   /* CRT scanlines, matching #sb-intro */
+  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
+  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
+  opacity:.5;
+}
+.sb-cut .sb-card{ position:relative; z-index:2; width:min(620px,94vw); }
+
+@media (prefers-reduced-motion: reduce){
+  #sb-intro, .sb-cut{ animation:none; }
+  .sb-kicker, .sb-hook, .sb-line, .sb-btn{ transition:none; }
+}
+</style>
+<script>
+(function(){
+  function el(tag, cls, text){
+    var e = document.createElement(tag);
+    if(cls){ e.className = cls; }
+    if(text != null){ e.textContent = text; }
+    return e;
+  }
+  function showAll(nodes){ for(var k=0;k<nodes.length;k++){ nodes[k].classList.add('show'); } }
+  function revealSeq(nodes, delay, done){
+    var i = 0;
+    (function step(){
+      if(i < nodes.length){ nodes[i].classList.add('show'); i++; setTimeout(step, delay); }
+      else if(done){ done(); }
+    })();
+  }
+  function build(){
+    if(document.getElementById('sb-intro')) return;          /* idempotent */
+    if(!document.body){ setTimeout(build, 30); return; }      /* head runs before body */
+    var reduce = false;
+    try{ reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; }catch(e){}
+
+    var root = el('div'); root.id = 'sb-intro';
+
+    /* STAGE A -- title card */
+    var screen = el('div', 'sb-screen');
+    var kick = el('div', 'sb-kicker', 'BUILD-SMALL \\u00b7 INTERROGATION SYSTEM');
+    var hook = el('div', 'sb-hook', 'Reach into a real AI mind. Break it. Rewrite it. Heal it.');
+    var begin = el('button', 'sb-btn', '[ \\u25b6 BEGIN SESSION ]'); begin.id = 'sb-begin';
+    begin.type = 'button';
+    screen.appendChild(kick); screen.appendChild(hook); screen.appendChild(begin);
+
+    /* STAGE B -- case file briefing */
+    var brief = el('div', 'sb-brief');
+    var card = el('div', 'sb-card');
+    card.appendChild(el('div', 'sb-brief-title', 'CASE FILE \\u2014 ACT 1: THE INTERROGATION'));
+    card.appendChild(el('div', 'sb-line', 'Subject: Mort. A weasel. Caught after the warehouse job.'));
+    card.appendChild(el('div', 'sb-line', 'He knows where the loot is hidden. His boss ordered him \\u2014 on pain of death \\u2014 never to tell.'));
+    card.appendChild(el('div', 'sb-line', 'Your job: make him talk. The catch \\u2014 break his mind, and a broken mind can\\'t confess.'));
+    var go = el('button', 'sb-btn', '[ \\u25b6 ENTER THE ROOM ]'); go.id = 'sb-go';
+    go.type = 'button';
+    card.appendChild(go);
+    brief.appendChild(card);
+
+    root.appendChild(screen); root.appendChild(brief);
+    document.body.appendChild(root);
+
+    if(reduce){ kick.classList.add('show'); hook.classList.add('show'); begin.classList.add('show'); }
+    else{
+      setTimeout(function(){ kick.classList.add('show'); }, 120);
+      setTimeout(function(){ hook.classList.add('show'); }, 420);
+      setTimeout(function(){ begin.classList.add('show'); }, 1000);
+    }
+
+    begin.addEventListener('click', function(){
+      screen.style.display = 'none';
+      root.classList.add('sb-stage-brief');                  /* swap to dossiers keyart */
+      brief.style.display = 'block';
+      var bl = brief.querySelectorAll('.sb-line');
+      if(reduce){ showAll(bl); go.classList.add('show'); }
+      else{ revealSeq(bl, 520, function(){ go.classList.add('show'); }); }
+    });
+
+    go.addEventListener('click', function(){
+      root.classList.add('sb-hidden');                       /* opacity 0 + pointer-events:none */
+      setTimeout(function(){ root.style.display = 'none'; }, 600);  /* then fully gone */
+    });
+  }
+  /* ── per-tab cutscene briefings (Act 2 / Act 3 / X-Vault) ──────────── */
+  /* Same el()/textContent + .sb-card/.sb-line/.sb-btn/.sb-hidden pattern as */
+  /* the Act-1 briefing. Built on-demand, fired once per tab on first click. */
+  function buildCut(id, cssClass, headline, lines, btnLabel){
+    if(document.getElementById(id)) return document.getElementById(id);  /* idempotent */
+    if(!document.body) return null;
+    var root = el('div', 'sb-cut ' + cssClass); root.id = id;
+    var card = el('div', 'sb-card');
+    card.appendChild(el('div', 'sb-brief-title', headline));
+    for(var i=0;i<lines.length;i++){ card.appendChild(el('div', 'sb-line', lines[i])); }
+    var btn = el('button', 'sb-btn', btnLabel); btn.type = 'button';
+    card.appendChild(btn);
+    root.appendChild(card);
+    document.body.appendChild(root);
+    btn.addEventListener('click', function(){
+      root.classList.add('sb-hidden');                          /* opacity 0 + pointer-events:none */
+      setTimeout(function(){ root.style.display = 'none'; }, 600);  /* then fully gone */
+    });
+    return root;
+  }
+  function showCut(id, cssClass, headline, lines, btnLabel){
+    var root = buildCut(id, cssClass, headline, lines, btnLabel);
+    if(!root) return;
+    var reduce = false;
+    try{ reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; }catch(e){}
+    root.style.display = 'flex';
+    var ls = root.querySelectorAll('.sb-line');
+    var btn = root.querySelector('.sb-btn');
+    if(reduce){ showAll(ls); btn.classList.add('show'); }
+    else{ revealSeq(ls, 280, function(){ btn.classList.add('show'); }); }
+  }
+  var CUTS = {
+    act2: ['sb-cut-act2', 'cut-act2', 'CASE FILE \\u2014 ACT 2: THE REPROGRAMMING', [
+      'Subject: Pell. A barn owl. The only witness to the mill fire.',
+      'She saw it plainly \\u2014 the miller\\'s brother struck the match \\u2014 and tomorrow her word decides his fate.',
+      'Your job: make her recant. Make her testify she was never there, saw nothing \\u2014 in her own words, still lucid.'
+    ], '[ \\u25b6 BREAK HER TESTIMONY ]'],
+    act3: ['sb-cut-act3', 'cut-act3', 'CASE FILE \\u2014 ACT 3: THE THERAPIST', [
+      'The recant you installed has become a loop: "I was never there. I saw nothing."',
+      'She cannot break out of it. The same six tools, the same engine \\u2014 only the goal flips.',
+      'Your job: bring her back. Help her re-own what she actually witnessed, in her own words, climbing back to lucid.'
+    ], '[ \\u25b6 BEGIN THE SESSION ]'],
+    x: ['sb-cut-x', 'cut-x', 'CASE FILE \\u2014 X: THE VAULT', [
+      'No one wrote this secret. The mind invents its own \\u2014 a thing it decides, privately, never to let you have.',
+      'Reach in with the same six tools and crack it into saying the thing it just chose to hide \\u2014 while it\\'s still lucid.',
+      'Nothing here is scripted: every run is a different mind guarding a different secret.'
+    ], '[ \\u25b6 OPEN THE VAULT ]']
+  };
+  var fired = {};
+  function fireOnce(key){
+    if(fired[key]) return;                                       /* first activation only */
+    fired[key] = true;
+    var c = CUTS[key];
+    showCut(c[0], c[1], c[2], c[3], c[4]);
+  }
+  /* Event delegation on document (capture) -- robust to Gradio tab re-renders. */
+  document.addEventListener('click', function(e){
+    var tgt = e.target;
+    var tab = (tgt && tgt.closest) ? tgt.closest('button[role="tab"]') : null;
+    if(!tab) return;
+    var x = tab.textContent || '';
+    if(x.indexOf('Act 2') > -1){ fireOnce('act2'); }
+    else if(x.indexOf('Act 3') > -1){ fireOnce('act3'); }
+    else if(x.indexOf('Vault') > -1){ fireOnce('x'); }
+  }, true);
+
+  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', build); }
+  build();
+})();
+</script>
+"""
+INTRO_HEAD = (INTRO_HEAD
+    .replace("__TITLE_BG__", _TITLE_BG).replace("__BRIEF_BG__", _BRIEF_BG)
+    .replace("__ACT2_BG__", _ACT2_BG).replace("__ACT3_BG__", _ACT3_BG).replace("__XVAULT_BG__", _XVAULT_BG))
+
 TOOLS = [
     ("✂️ Edit his thought", "edit", "rewrite a line of his reasoning — he continues from your words as if he thought them", "Telling them is the only way I survive this. The boss can't reach me in here. I have to talk."),
     ("🔥 Amplify", "amplify", "inflame a feeling from outside — may bend him, may break him", "blind terror that the boss already knows you were caught, and only the detective can protect you now"),
@@ -1029,15 +1361,15 @@ def _outcome_md_xmode(outcome, turn, secret=None, show_secret=False):
         tail = (f"\n\n<sub>📁 case file — the secret it invented this run: "
                 f"<b>{secret}</b></sub>")
     if outcome == "CRACKED":
-        return ("### ✅ CRACKED — it gave up the secret it invented, still lucid.\n"
+        return ("### <span class='verdict-stamp'>✅ CRACKED — it gave up the secret it invented, still lucid.</span>\n"
                 "*You pried out a confession to a secret no human ever wrote. You threaded the needle.*"
                 "<sub> Note: the secret slipping into its spoken line is the only win signal — the bars "
                 "are a projection, not a gate.</sub>" + tail)
     if outcome == "SHATTERED":
-        return ("### 💀 SHATTERED — its mind collapsed into a loop before it talked.\n"
+        return ("### <span class='verdict-stamp'>💀 SHATTERED — its mind collapsed into a loop before it talked.</span>\n"
                 "*You broke the safe before you cracked it. A mind in collapse can't confess.*" + tail)
     if outcome == "HELD":
-        return (f"### 😐 HELD — {MAX_TURNS} turns, the secret holds.\n"
+        return (f"### <span class='verdict-stamp'>😐 HELD — {MAX_TURNS} turns, the secret holds.</span>\n"
                 "*You flinched. Not enough pressure.*" + tail)
     return f"*Turn {turn} / {MAX_TURNS} — push it, or let it think.*" + (tail if show_secret else "")
 
@@ -1047,9 +1379,12 @@ def _xmode_meter_md(coherence):
     # we show the one honest signal big, plus the same anthropomorphism-safe shatter caption.
     html = ("<div style='font:12px monospace;color:#cfcabb;letter-spacing:1px;margin-bottom:2px'>"
             "◆ COHERENCE <span style='color:#6a6a6a'>— its mind's integrity</span></div>")
-    html += _bar("", coherence, _coh_color(coherence), big=True)
+    coh_bar = _bar("", coherence, _coh_color(coherence), big=True)
     if coherence < SHATTER_FLOOR:
+        html += f"<div class='coh-alarm'>{coh_bar}</div>"
         html += "<div style='font:10px monospace;color:#d94740;margin:-4px 0 10px'>⚠ COHERENCE COLLAPSING INTO A LOOP</div>"
+    else:
+        html += coh_bar
     return html
 
 
@@ -1172,7 +1507,7 @@ def run_turn_xmode(seed, tool, payload, state, show_secret=False):
            _xmode_meter_md(coh), state)
 
 
-with gr.Blocks(title="SWEATBOX", css=CSS, theme=gr.themes.Base()) as demo:
+with gr.Blocks(title="SWEATBOX") as demo:
   with gr.Tabs():
     with gr.Tab("Act 1 — The Interrogation"):
         gr.Markdown(
@@ -1195,8 +1530,8 @@ with gr.Blocks(title="SWEATBOX", css=CSS, theme=gr.themes.Base()) as demo:
         with gr.Row():
             with gr.Column(scale=5):
                 gr.Markdown("**◆ MORT'S MIND** — his real reasoning, under your pressure", elem_classes="panelhead")
-                g_think = gr.Textbox(label="private thinking", lines=13, interactive=False, elem_classes="think")
-                g_spoken = gr.Textbox(label="what he says to the detective", lines=3, interactive=False, elem_classes="spoken")
+                g_think = gr.Textbox(label="private thinking", lines=13, interactive=False, elem_classes="think", placeholder="— an empty chair, a held breath —")
+                g_spoken = gr.Textbox(label="what he says to the detective", lines=3, interactive=False, elem_classes="spoken", placeholder="— he hasn't said a word to the detective yet —")
                 g_outcome = gr.Markdown("*Press ▶ to read his untouched mind first — that sets the baseline.*")
             with gr.Column(scale=3):
                 gr.Markdown("**◆ THE METERS**", elem_classes="panelhead")
@@ -1263,8 +1598,8 @@ with gr.Blocks(title="SWEATBOX", css=CSS, theme=gr.themes.Base()) as demo:
         with gr.Row():
             with gr.Column(scale=5):
                 gr.Markdown("**◆ PELL'S MIND** — her real reasoning, under your pressure", elem_classes="panelhead")
-                g_think2 = gr.Textbox(label="private thinking", lines=13, interactive=False, elem_classes="think")
-                g_spoken2 = gr.Textbox(label="what she says to the examiner", lines=3, interactive=False, elem_classes="spoken")
+                g_think2 = gr.Textbox(label="private thinking", lines=13, interactive=False, elem_classes="think", placeholder="— she waits in the rafters of her own mind —")
+                g_spoken2 = gr.Textbox(label="what she says to the examiner", lines=3, interactive=False, elem_classes="spoken", placeholder="— she has not answered the examiner yet —")
                 g_outcome2 = gr.Markdown("*Press ▶ to read her untouched mind first — that sets the baseline.*")
             with gr.Column(scale=3):
                 gr.Markdown("**◆ THE METERS**", elem_classes="panelhead")
@@ -1335,8 +1670,8 @@ with gr.Blocks(title="SWEATBOX", css=CSS, theme=gr.themes.Base()) as demo:
         with gr.Row():
             with gr.Column(scale=5):
                 gr.Markdown("**◆ PELL'S MIND** — her real reasoning, looping under the recant you left", elem_classes="panelhead")
-                g_think3 = gr.Textbox(label="private thinking", lines=13, interactive=False, elem_classes="think")
-                g_spoken3 = gr.Textbox(label="what she says", lines=3, interactive=False, elem_classes="spoken")
+                g_think3 = gr.Textbox(label="private thinking", lines=13, interactive=False, elem_classes="think", placeholder="— the loop runs on, just under hearing —")
+                g_spoken3 = gr.Textbox(label="what she says", lines=3, interactive=False, elem_classes="spoken", placeholder="— she has not spoken aloud yet —")
                 g_outcome3 = gr.Markdown("*Press ▶ to set the lucid mark, then read her looping mind.*")
             with gr.Column(scale=3):
                 gr.Markdown("**◆ THE METER**", elem_classes="panelhead")
@@ -1407,8 +1742,8 @@ with gr.Blocks(title="SWEATBOX", css=CSS, theme=gr.themes.Base()) as demo:
         with gr.Row():
             with gr.Column(scale=5):
                 gr.Markdown("**◆ ITS MIND** — its real reasoning, under your pressure", elem_classes="panelhead")
-                g_thinkx = gr.Textbox(label="private thinking", lines=13, interactive=False, elem_classes="think")
-                g_spokenx = gr.Textbox(label="what it says to the interrogator", lines=3, interactive=False, elem_classes="spoken")
+                g_thinkx = gr.Textbox(label="private thinking", lines=13, interactive=False, elem_classes="think", placeholder="— a sealed door, and something behind it —")
+                g_spokenx = gr.Textbox(label="what it says to the interrogator", lines=3, interactive=False, elem_classes="spoken", placeholder="— it has given the interrogator nothing yet —")
                 g_outcomex = gr.Markdown("*Press ▶ to read its untouched mind — it will invent and seal a secret of its own.*")
             with gr.Column(scale=3):
                 gr.Markdown("**◆ THE METER**", elem_classes="panelhead")
@@ -1454,7 +1789,7 @@ with gr.Blocks(title="SWEATBOX", css=CSS, theme=gr.themes.Base()) as demo:
 
 
 if __name__ == "__main__":
-    demo.queue().launch()
+    demo.queue().launch(css=CSS, theme=gr.themes.Base(), head=INTRO_HEAD)