ui-changes

AGENTS.md

@@ -84,6 +84,14 @@ Run the app locally:
 uv run python app.py
 ```
 
+For **live reload** while you edit `app.py` (including the `CUSTOM_CSS` string), use the Gradio CLI instead of `python` directly. It watches the project directory and restarts the server when the file changes:
+
+```bash
+uv run gradio app.py
+```
+
+The Blocks instance is named `app`; Gradio discovers it automatically. If you ever need to pin the name explicitly, use `uv run gradio app.py --demo-name app`.
+
 Check syntax:
 
 ```bash

app.py

@@ -21,8 +21,16 @@ EMPTY_STAGE = """
 <div class="puppet-stage stage-empty">
   <div class="stage-valance"></div>
   <div class="stage-backdrop">
-    <div class="stage-marquee">AI Puppet Theater</div>
-    <div class="empty-stage-copy">Enter a premise and raise the curtain.</div>
+    <div class="stage-curtains stage-curtains-closed" aria-hidden="true">
+      <div class="stage-curtain stage-curtain-left"></div>
+      <div class="stage-curtain stage-curtain-right"></div>
+    </div>
+    <div class="stage-empty-playbill">
+      <p class="playbill-kicker">Tonight</p>
+      <h2 class="playbill-title">AI Puppet Theater</h2>
+      <p class="playbill-ornament" aria-hidden="true">— ✦ —</p>
+      <p class="playbill-tagline">Enter a premise and raise the curtain.</p>
+    </div>
   </div>
   <div class="stage-floorboards"></div>
 </div>
@@ -56,6 +64,26 @@ PROP_EMOJI = {
     "mirror": "🪞",
 }
 
+DEFAULT_STAGE_PROPS: list[str] = [
+    "rubber duck",
+    "egg",
+    "flowers",
+    "tomato",
+    "tiny crown",
+    "scroll",
+]
+
+
+def _prop_dropdown_label(canonical: str) -> str:
+    emoji = PROP_EMOJI.get(canonical.lower(), "🎁")
+    title = " ".join(part.capitalize() for part in canonical.split())
+    return f"{emoji}  {title}"
+
+
+PROP_DROPDOWN_CHOICES: list[tuple[str, str]] = [
+    (_prop_dropdown_label(name), name) for name in DEFAULT_STAGE_PROPS
+]
+
 CUSTOM_CSS = """
 body,
 .gradio-container {
@@ -65,10 +93,63 @@ body,
     color: #f8efe4 !important;
 }
 .gradio-container {
-    max-width: 1180px !important;
-    padding-top: 1rem !important;
+    --theater-burgundy: #3b0a16;
+    --theater-plum: #2a1426;
+    --theater-plum-light: #3d1a35;
+    --theater-gold: #f6c453;
+    --theater-gold-soft: rgba(246, 196, 83, 0.35);
+    --theater-cream: #f8efe4;
+    --theater-amber-top: #fcd34d;
+    --theater-amber-mid: #d97706;
+    --theater-amber-deep: #9a3412;
+    --checkbox-label-padding: 0 !important;
+    box-sizing: border-box !important;
+    width: min(1200px, calc(100vw - 2rem)) !important;
+    max-width: min(1200px, calc(100vw - 2rem)) !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    padding: 1rem 1rem 1.5rem !important;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
+.backstage-stack {
+    align-items: stretch !important;
+    gap: 0.85rem !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    margin-top: 0.5rem !important;
+    max-width: 52rem;
+    width: 100% !important;
+}
+.backstage-stack > div {
+    min-width: 0 !important;
+    width: 100% !important;
+}
+.stage-output.block {
+    border: 1px solid var(--theater-gold-soft) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+}
+.stage-output .label-wrap {
+    background: linear-gradient(180deg, #5c1628 0%, #3b0a16 100%) !important;
+    border-bottom: 2px solid var(--theater-gold) !important;
+    border-radius: 12px 12px 0 0 !important;
+    margin: 0 !important;
+    padding: 0.35rem 0.75rem !important;
+}
+.stage-output .label-wrap span,
+.stage-output label > span {
+    color: var(--theater-gold) !important;
+    font-family: Georgia, "Times New Roman", ui-serif, serif !important;
+    font-size: 0.82rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.12em !important;
+    text-transform: uppercase !important;
+}
+.stage-output .html-container {
+    border-radius: 0 0 12px 12px !important;
+}
 .gradio-container .prose,
 .gradio-container label,
 .gradio-container span,
@@ -104,12 +185,20 @@ body,
 .gradio-container .block-info,
 .gradio-container .label-wrap span,
 .gradio-container label > span {
-    background: rgba(34, 17, 31, 0.88) !important;
-    border: 1px solid rgba(246, 196, 83, 0.28) !important;
     border-radius: 6px !important;
     color: #ffd166 !important;
     font-weight: 700 !important;
 }
+.gradio-container .accordion .block .label-wrap span {
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    color: #cbb7a1 !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.03em !important;
+    text-transform: none !important;
+}
 .gradio-container .wrap,
 .gradio-container .styler,
 .gradio-container .form,
@@ -125,17 +214,20 @@ body,
     color: #f8efe4 !important;
 }
 .app-title h1 {
-    color: #f8efe4;
-    font-family: Georgia, "Times New Roman", serif;
+    color: #fff7ed;
+    font-family: Georgia, "Times New Roman", ui-serif, serif;
     font-size: 2.15rem;
-    letter-spacing: 0;
+    font-weight: 700;
+    letter-spacing: 0.02em;
     margin-bottom: 0;
     text-align: center;
+    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
 }
 .app-title p {
-    color: #cbb7a1;
+    color: #d4c4b4;
     font-size: 0.95rem;
-    margin: 0.15rem 0 0.8rem;
+    letter-spacing: 0.04em;
+    margin: 0.2rem 0 0.85rem;
     text-align: center;
 }
 .gradio-container h3,
@@ -145,40 +237,246 @@ body,
     color: #f8efe4 !important;
 }
 .premise-panel {
-    background: rgba(42, 20, 38, 0.72);
-    border-color: rgba(246, 196, 83, 0.3);
-    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
-    padding: 0.55rem 0.65rem 0.65rem;
+    background:
+        linear-gradient(145deg, rgba(246, 196, 83, 0.08) 0%, transparent 42%),
+        linear-gradient(180deg, rgba(52, 24, 46, 0.92) 0%, rgba(34, 17, 31, 0.94) 100%);
+    border: 1px solid rgba(246, 196, 83, 0.32) !important;
+    border-radius: 12px !important;
+    box-shadow:
+        0 0 0 1px rgba(59, 10, 22, 0.55),
+        0 18px 36px rgba(0, 0, 0, 0.28);
+    box-sizing: border-box !important;
+    overflow: hidden !important;
+    padding: 1rem 1.15rem 1.15rem !important;
+}
+.premise-panel .premise-stack,
+.gradio-container .gr-group.premise-panel .premise-stack {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    gap: 0.65rem !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+}
+.premise-panel .premise-actions,
+.gradio-container .gr-group.premise-panel .premise-actions {
+    box-sizing: border-box !important;
+    margin: 0 !important;
+    max-width: 100% !important;
+    padding: 0 !important;
+    width: 100% !important;
+}
+.premise-panel .form {
+    gap: 0.55rem !important;
+    padding: 0 !important;
 }
-.premise-panel .block,
 .premise-panel .wrap,
 .premise-panel .styler,
 .premise-panel .form,
 .premise-panel .block > div {
-    background: rgba(42, 20, 38, 0.78) !important;
+    background: transparent !important;
 }
 .control-panel {
-    background: rgba(34, 17, 31, 0.76);
-    border: 1px solid rgba(246, 196, 83, 0.22);
-    border-radius: 8px;
-    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
-    padding: 0.55rem;
+    background:
+        linear-gradient(160deg, rgba(246, 196, 83, 0.06) 0%, transparent 50%),
+        linear-gradient(180deg, rgba(45, 22, 42, 0.95) 0%, rgba(26, 12, 24, 0.97) 100%);
+    border: 1px solid rgba(246, 196, 83, 0.28) !important;
+    border-radius: 12px !important;
+    box-shadow:
+        0 0 0 1px rgba(59, 10, 22, 0.45),
+        0 14px 32px rgba(0, 0, 0, 0.3);
+    padding: 1.15rem 1.2rem 1.25rem !important;
+}
+.show-controls-title {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 6px;
+}
+.audience-title {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 6px;
+}
+.control-panel .form {
+    gap: 0.75rem !important;
+    padding: 0 !important;
 }
 .control-panel .block,
 .control-panel .wrap,
 .control-panel .styler,
 .control-panel .form,
 .control-panel .block > div {
-    background: rgba(34, 17, 31, 0.78) !important;
+    background: transparent !important;
+}
+.control-panel .row {
+    gap: 0.65rem !important;
+}
+.control-panel .prose {
+    margin-bottom: 0.65rem !important;
+}
+.control-panel .prose h3 {
+    margin-top: 0 !important;
+}
+.control-panel .label-wrap span,
+.control-panel label > span,
+.premise-panel .label-wrap span,
+.premise-panel label > span {
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    color: #e8ddd4 !important;
+    display: block !important;
+    font-size: 0.78rem !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.04em !important;
+    padding: 0 0 0.28rem 0 !important;
+    text-transform: none !important;
+}
+.control-panel .dropdown-container,
+.premise-panel .dropdown-container {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    margin-top: 0 !important;
+    padding: 0 !important;
+}
+.control-panel .dropdown-container .wrap-inner,
+.control-panel .dropdown-container .secondary-wrap,
+.control-panel .single-select,
+.premise-panel .dropdown-container .wrap-inner,
+.premise-panel .dropdown-container .secondary-wrap {
+    background: rgba(8, 10, 18, 0.92) !important;
+    border: 1px solid rgba(246, 196, 83, 0.38) !important;
+    border-radius: 10px !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
+}
+.control-panel .dropdown-container button,
+.control-panel .dropdown-container .icon,
+.premise-panel .dropdown-container button {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+/* Audience prop picker: clearer label, large click target, gold border, solid option list */
+.gradio-container .control-panel .prop-picker .label-wrap span,
+.gradio-container .control-panel .prop-picker label > span {
+    color: #fcd34d !important;
+    font-family: Georgia, "Times New Roman", ui-serif, serif !important;
+    font-size: 0.82rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.07em !important;
+    padding-bottom: 0.35rem !important;
+    text-transform: uppercase !important;
+}
+.gradio-container .control-panel .prop-picker .block-info,
+.gradio-container .control-panel .prop-picker span[data-testid="block-info"] {
+    color: rgba(232, 221, 212, 0.88) !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    line-height: 1.4 !important;
+    margin-top: 0.15rem !important;
+    max-width: 40rem;
+}
+.gradio-container .control-panel .prop-picker .single-select input,
+.gradio-container .control-panel .prop-picker .single-select span {
+    font-size: 1rem !important;
+    letter-spacing: 0.02em !important;
+}
+/* Outer rim + padding so the whole control reads as one big control */
+.gradio-container .control-panel .prop-picker .dropdown-container {
+    background: rgba(14, 10, 22, 0.94) !important;
+    border: 2px solid rgba(246, 196, 83, 0.62) !important;
+    border-radius: 14px !important;
+    box-shadow:
+        0 0 0 1px rgba(59, 10, 22, 0.45),
+        0 8px 26px rgba(0, 0, 0, 0.42) !important;
+    box-sizing: border-box !important;
+    margin-top: 0.1rem !important;
+    padding: 0.35rem !important;
+}
+.gradio-container .control-panel .prop-picker .dropdown-container .wrap-inner,
+.gradio-container .control-panel .prop-picker .dropdown-container .secondary-wrap,
+.gradio-container .control-panel .prop-picker .single-select {
+    border-radius: 11px !important;
+    min-height: 3.5rem !important;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease !important;
+}
+.gradio-container .control-panel .prop-picker .dropdown-container .wrap-inner,
+.gradio-container .control-panel .prop-picker .dropdown-container .secondary-wrap {
+    align-items: center !important;
+    background: rgba(8, 10, 18, 0.98) !important;
+    border: 2px solid rgba(246, 196, 83, 0.48) !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
+    padding: 0.85rem 1.05rem !important;
+}
+.gradio-container .control-panel .prop-picker .single-select {
+    min-height: 3.5rem !important;
+}
+.gradio-container .control-panel .prop-picker .dropdown-container button {
+    min-height: 2.85rem !important;
+    min-width: 2.85rem !important;
+}
+.gradio-container .control-panel .prop-picker .dropdown-container:focus-within {
+    border-color: #f6c453 !important;
+    box-shadow:
+        0 0 0 2px rgba(246, 196, 83, 0.35),
+        0 10px 28px rgba(0, 0, 0, 0.48) !important;
+}
+.gradio-container .control-panel .prop-picker .dropdown-container:focus-within .wrap-inner,
+.gradio-container .control-panel .prop-picker .dropdown-container:focus-within .secondary-wrap {
+    border-color: #f6c453 !important;
+    box-shadow:
+        0 0 0 1px rgba(246, 196, 83, 0.35),
+        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
+}
+/* Closed-state dropdown cue: chevron always visible on the trigger (not the open list) */
+.gradio-container .control-panel .prop-picker .dropdown-container,
+.gradio-container .control-panel .prop-picker .dropdown-container .wrap-inner,
+.gradio-container .control-panel .prop-picker .dropdown-container .secondary-wrap {
+    overflow: visible !important;
+}
+.gradio-container .control-panel .prop-picker .dropdown-container .wrap-inner {
+    position: relative !important;
+}
+.gradio-container .control-panel .prop-picker .dropdown-container .wrap-inner::after {
+    border-color: var(--theater-gold) transparent transparent transparent;
+    border-style: solid;
+    border-width: 8px 6px 0 6px;
+    content: "";
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
+    opacity: 1;
+    pointer-events: none;
+    position: absolute;
+    right: 0.72rem;
+    top: 50%;
+    transform: translateY(-40%);
+    z-index: 50;
+}
+.gradio-container .control-panel .prop-picker .dropdown-container button svg {
+    height: 0 !important;
+    opacity: 0 !important;
+    overflow: hidden !important;
+    width: 0 !important;
 }
 .control-panel .row,
-.premise-panel .row {
+.premise-panel .row,
+.premise-panel .premise-actions {
     background: transparent !important;
 }
 .control-panel h3 {
-    color: #f8efe4;
-    margin: 0 0 0.35rem;
-    font-size: 1rem;
+    border-bottom: 1px solid rgba(246, 196, 83, 0.2);
+    color: #fff7ed;
+    font-family: Georgia, "Times New Roman", ui-serif, serif;
+    font-size: 0.92rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    margin: 0 0 0.5rem;
+    padding-bottom: 0.35rem;
+    text-transform: uppercase;
 }
 .control-panel .prose,
 .control-panel .prose h3,
@@ -186,17 +484,20 @@ body,
     color: #f8efe4 !important;
 }
 .puppet-stage {
-    min-height: 430px;
     border: 5px solid #3b0a16;
     border-radius: 14px;
     background:
         linear-gradient(90deg, rgba(59, 10, 22, 0.98) 0 10%, transparent 10% 90%, rgba(59, 10, 22, 0.98) 90% 100%),
         linear-gradient(180deg, rgba(42, 20, 38, 0.96), rgba(13, 6, 14, 0.98));
+    box-sizing: border-box;
     color: #f8efe4;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
+    height: 600px;
+    max-height: 600px;
+    min-height: 600px;
     position: relative;
     overflow: hidden;
     box-shadow:
@@ -233,12 +534,76 @@ body,
     position: relative;
     z-index: 3;
 }
+.stage-curtains {
+    display: flex;
+    flex-direction: row;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    z-index: 15;
+}
+.stage-curtain {
+    background:
+        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 24px),
+        linear-gradient(180deg, #7f1533 0%, #4a0a18 55%, #2d050e 100%);
+    box-shadow:
+        inset 0 0 38px rgba(0, 0, 0, 0.5),
+        inset -5px 0 0 rgba(246, 196, 83, 0.32);
+    flex: 1 1 50%;
+    height: 100%;
+    min-width: 50%;
+}
+.stage-curtains-animate .stage-curtain-left {
+    animation: stage-curtain-left-open 1.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
+    transform-origin: left center;
+}
+.stage-curtains-animate .stage-curtain-right {
+    animation: stage-curtain-right-open 1.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
+    box-shadow:
+        inset 0 0 38px rgba(0, 0, 0, 0.5),
+        inset 5px 0 0 rgba(246, 196, 83, 0.32);
+    transform-origin: right center;
+}
+.stage-curtains-closed .stage-curtain-left,
+.stage-curtains-closed .stage-curtain-right {
+    animation: none !important;
+}
+.stage-curtains-closed .stage-curtain-left {
+    transform: translateX(1.5%);
+}
+.stage-curtains-closed .stage-curtain-right {
+    box-shadow:
+        inset 0 0 38px rgba(0, 0, 0, 0.5),
+        inset 5px 0 0 rgba(246, 196, 83, 0.32);
+    transform: translateX(-1.5%);
+}
+@keyframes stage-curtain-left-open {
+    from { transform: translateX(0); }
+    to { transform: translateX(-108%); }
+}
+@keyframes stage-curtain-right-open {
+    from { transform: translateX(0); }
+    to { transform: translateX(108%); }
+}
+@media (prefers-reduced-motion: reduce) {
+    .stage-curtains-animate .stage-curtain-left,
+    .stage-curtains-animate .stage-curtain-right {
+        animation: none !important;
+        opacity: 0;
+        transform: none !important;
+    }
+}
 .stage-backdrop {
     background:
         radial-gradient(circle at 50% 8%, rgba(255, 224, 150, 0.28), transparent 19rem),
         radial-gradient(circle at 24% 58%, rgba(255, 224, 150, 0.12), transparent 14rem),
         linear-gradient(180deg, #2a1426 0%, #22111f 62%, #130911 100%);
-    flex: 1;
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
     padding: 0.72rem 7.2rem 0.8rem;
     position: relative;
     z-index: 1;
@@ -277,13 +642,63 @@ body,
 .stage-copy strong {
     color: #f8efe4;
 }
-.empty-stage-copy {
-    color: #cbb7a1;
-    font-size: 1rem;
-    margin-top: 5.8rem;
+.stage-empty-playbill {
+    border: 2px solid rgba(246, 196, 83, 0.55);
+    border-radius: 4px;
+    box-shadow:
+        0 0 0 1px rgba(59, 10, 22, 0.9),
+        0 0 48px rgba(255, 209, 102, 0.22),
+        inset 0 0 36px rgba(0, 0, 0, 0.35);
+    left: 50%;
+    max-width: min(22rem, 88%);
+    padding: 1.35rem 1.5rem 1.45rem;
+    position: absolute;
     text-align: center;
-    position: relative;
-    z-index: 2;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 22;
+    background:
+        radial-gradient(ellipse 120% 80% at 50% 20%, rgba(255, 224, 160, 0.14), transparent 55%),
+        linear-gradient(180deg, rgba(42, 20, 38, 0.92) 0%, rgba(19, 9, 17, 0.94) 100%);
+}
+.playbill-kicker {
+    color: #ffd166;
+    font-family: Georgia, "Times New Roman", serif;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.38em;
+    margin: 0 0 0.35rem;
+    text-transform: uppercase;
+}
+.playbill-title {
+    color: #fff7ed;
+    font-family: Georgia, "Times New Roman", serif;
+    font-size: clamp(1.35rem, 3.2vw, 1.85rem);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    line-height: 1.15;
+    margin: 0;
+    text-shadow: 0 3px 22px rgba(0, 0, 0, 0.75);
+}
+.playbill-ornament {
+    color: rgba(246, 196, 83, 0.75);
+    font-size: 0.82rem;
+    letter-spacing: 0.12em;
+    margin: 0.45rem 0 0.35rem;
+}
+.playbill-tagline {
+    color: #e8d5c4;
+    font-size: 0.95rem;
+    line-height: 1.45;
+    margin: 0;
+}
+.puppet-stage.stage-empty .stage-backdrop::before {
+    background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 240, 200, 0.12), transparent 62%);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
 }
 .stage-floorboards {
     height: 58px;
@@ -296,17 +711,24 @@ body,
 }
 .speech-bubble {
     animation: bubble-in 0.24s ease-out;
-    background: rgba(18, 10, 18, 0.82);
+    background: rgba(18, 10, 18, 0.92);
     border: 1px solid rgba(246, 196, 83, 0.5);
     border-radius: 16px;
     box-shadow: 0 18px 30px rgba(0, 0, 0, 0.34);
+    box-sizing: border-box;
     color: #f8efe4;
-    margin: 0.55rem auto 0;
-    max-width: 46rem;
+    left: 0;
+    margin: 0 0 0.35rem 0;
+    max-height: 7.25rem;
+    overflow-x: hidden;
+    overflow-y: auto;
     padding: 0.72rem 0.95rem;
-    position: relative;
+    position: absolute;
+    right: 0;
+    bottom: 100%;
     text-align: center;
-    z-index: 4;
+    width: auto;
+    z-index: 6;
 }
 .speech-bubble::after {
     border-left: 10px solid transparent;
@@ -330,15 +752,28 @@ body,
     color: #f8efe4;
     font-size: 0.96rem;
     line-height: 1.35;
+    overflow-wrap: anywhere;
 }
 .actor-row {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+    align-items: flex-end;
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
     gap: 0.55rem;
-    margin-top: 0.72rem;
+    justify-content: center;
+    margin-top: 0.91rem;
     position: relative;
     z-index: 3;
 }
+.actor-column {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-width: 0;
+    position: relative;
+}
 .actor-card {
     background: rgba(70, 38, 36, 0.72);
     border: 1px solid rgba(246, 196, 83, 0.45);
@@ -349,6 +784,7 @@ body,
     position: relative;
     transform-origin: bottom center;
     text-align: center;
+    z-index: 1;
 }
 .actor-card::after {
     background: #7c3f17;
@@ -461,31 +897,157 @@ body,
     margin: 0.2rem;
     padding: 0.22rem 0.55rem;
 }
+.gradio-container button {
+    background: linear-gradient(180deg, #4f2f45 0%, #2f1828 100%) !important;
+    border: 1px solid rgba(246, 196, 83, 0.26) !important;
+    border-radius: 10px !important;
+    color: #f8efe4 !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.03em !important;
+    min-height: 2.45rem !important;
+    padding: 0.5rem 1rem !important;
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.15s ease,
+        transform 0.12s ease !important;
+}
+.gradio-container button:hover:not(:disabled) {
+    transform: translateY(-1px);
+}
+.gradio-container button:active:not(:disabled) {
+    transform: translateY(0);
+}
 .gradio-container button.primary,
 .gradio-container button.primary-action,
 .gradio-container button.run-one-action {
-    background: #f97316 !important;
-    border-color: #f97316 !important;
-    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.25) !important;
-    color: #fff7ed !important;
+    background: linear-gradient(180deg, #fde68a 0%, #d97706 42%, #b45309 100%) !important;
+    border: 1px solid rgba(252, 211, 77, 0.65) !important;
+    box-shadow:
+        0 2px 0 rgba(124, 45, 18, 0.65),
+        0 10px 26px rgba(217, 119, 6, 0.35) !important;
+    color: #1a0a06 !important;
+    text-shadow: 0 1px 0 rgba(255, 247, 237, 0.35);
+}
+.gradio-container button.primary:hover:not(:disabled),
+.gradio-container button.primary-action:hover:not(:disabled),
+.gradio-container button.run-one-action:hover:not(:disabled) {
+    background: linear-gradient(180deg, #fef3c7 0%, #ea580c 45%, #c2410c 100%) !important;
+    box-shadow:
+        0 2px 0 rgba(124, 45, 18, 0.55),
+        0 12px 28px rgba(234, 88, 12, 0.38) !important;
 }
 .gradio-container button.secondary,
-.gradio-container button.secondary-action,
 .gradio-container button.audience-action-button {
-    background: #3f3148 !important;
-    border-color: rgba(246, 196, 83, 0.22) !important;
-    color: #f8efe4 !important;
+    background: linear-gradient(180deg, #6b2a3a 0%, #4a1522 48%, #2d0c14 100%) !important;
+    border: 1px solid rgba(252, 165, 165, 0.35) !important;
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.07),
+        0 6px 18px rgba(0, 0, 0, 0.32) !important;
+    color: #fff5f5 !important;
+}
+.gradio-container button.secondary:hover:not(:disabled),
+.gradio-container button.audience-action-button:hover:not(:disabled) {
+    border-color: rgba(254, 202, 202, 0.55) !important;
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.12),
+        0 8px 22px rgba(0, 0, 0, 0.36) !important;
+}
+.gradio-container button.cue-action {
+    background: linear-gradient(180deg, #5c4a2f 0%, #3d3020 50%, #261c12 100%) !important;
+    border: 1px solid rgba(246, 196, 83, 0.45) !important;
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.08),
+        0 6px 18px rgba(0, 0, 0, 0.3) !important;
+    color: #fff8eb !important;
+}
+.gradio-container button.cue-action:hover:not(:disabled) {
+    background: linear-gradient(180deg, #6e5a38 0%, #4a3b26 50%, #322818 100%) !important;
+    border-color: rgba(253, 224, 71, 0.55) !important;
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.12),
+        0 8px 22px rgba(0, 0, 0, 0.34) !important;
 }
 .gradio-container button.reset-action {
-    background: #3b0a16 !important;
-    border-color: rgba(246, 196, 83, 0.24) !important;
-    color: #f8efe4 !important;
+    background: linear-gradient(180deg, #5c1218 0%, #3b0a16 55%, #2a0508 100%) !important;
+    border: 1px solid rgba(246, 196, 83, 0.28) !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+    color: #f5e6dc !important;
+}
+.gradio-container button.reset-action:hover:not(:disabled) {
+    border-color: rgba(255, 209, 102, 0.45) !important;
+}
+.transcript-box {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
 }
-.transcript-box,
 .gradio-container .accordion {
-    background: rgba(13, 6, 14, 0.58) !important;
-    border-color: rgba(246, 196, 83, 0.18) !important;
+    background: rgba(13, 6, 14, 0.72) !important;
+    border: 1px solid rgba(246, 196, 83, 0.22) !important;
+    border-radius: 12px !important;
     color: #f8efe4 !important;
+    overflow: hidden;
+}
+.gradio-container .accordion .block,
+.gradio-container .accordion .form,
+.gradio-container .accordion .wrap:not(.label-wrap) {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+.gradio-container .accordion textarea,
+.gradio-container .accordion .wrap-inner {
+    background: rgba(10, 12, 23, 0.88) !important;
+    border: 1px solid rgba(246, 196, 83, 0.22) !important;
+    border-radius: 8px !important;
+}
+.gradio-container .accordion .no-field-label .label-wrap {
+    display: none !important;
+}
+.gradio-container .accordion .no-field-label .wrap {
+    margin-top: 0 !important;
+}
+.gradio-container .accordion > .label-wrap {
+    background: linear-gradient(180deg, rgba(72, 28, 52, 0.98) 0%, rgba(42, 20, 38, 0.99) 100%) !important;
+    border-bottom: 1px solid rgba(246, 196, 83, 0.22) !important;
+}
+.gradio-container .accordion > .label-wrap span {
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    color: #ffd166 !important;
+    font-family: Georgia, "Times New Roman", ui-serif, serif !important;
+    font-size: 0.78rem !important;
+    letter-spacing: 0.08em !important;
+    text-transform: uppercase !important;
+}
+.gradio-container .accordion > .label-wrap button {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #ffd166 !important;
+}
+.gradio-container .accordion > .label-wrap button:hover {
+    background: rgba(255, 209, 102, 0.12) !important;
+}
+.gradio-container .accordion .dropdown-container {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+.gradio-container .accordion .dropdown-container .wrap-inner,
+.gradio-container .accordion .dropdown-container .secondary-wrap {
+    background: rgba(8, 10, 18, 0.92) !important;
+    border: 1px solid rgba(246, 196, 83, 0.32) !important;
+    border-radius: 10px !important;
+}
+.gradio-container input[type="range"] {
+    accent-color: #f6c453;
+}
+.gradio-container .slider input {
+    --slider-color: #f6c453;
 }
 @keyframes puppet-bounce {
     from { transform: translateY(0) rotate(-0.4deg); }
@@ -501,7 +1063,9 @@ body,
 }
 @media (max-width: 760px) {
     .puppet-stage {
-        min-height: 560px;
+        height: 600px;
+        max-height: 600px;
+        min-height: 600px;
     }
     .puppet-stage::before,
     .puppet-stage::after {
@@ -514,7 +1078,11 @@ body,
         font-size: 1.2rem;
     }
     .actor-row {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 0.45rem;
+    }
+    .backstage-stack {
+        gap: 0.65rem !important;
+        max-width: 100% !important;
     }
     .actor-card {
         min-height: 126px;
@@ -522,15 +1090,22 @@ body,
 }
 
 /* Final Gradio chrome overrides: keep the whole app in the theater palette. */
-.gradio-container {
-    width: min(1200px, calc(100vw - 2rem)) !important;
-}
-.gradio-container .gr-group {
+/* Generic groups only — theater panels use .control-panel / .premise-panel below. */
+.gradio-container .gr-group:not(.control-panel):not(.premise-panel) {
     background: rgba(34, 17, 31, 0.84) !important;
     border: 1px solid rgba(246, 196, 83, 0.2) !important;
     border-radius: 8px !important;
     color: #f8efe4 !important;
 }
+.gradio-container .gr-group.control-panel {
+    border-radius: 12px !important;
+    box-sizing: border-box !important;
+}
+.gradio-container .gr-group.premise-panel {
+    border-radius: 12px !important;
+    box-sizing: border-box !important;
+    overflow: hidden !important;
+}
 .gradio-container .gr-group .form,
 .gradio-container .gr-group .block,
 .gradio-container .gr-group .wrap,
@@ -538,45 +1113,45 @@ body,
 .gradio-container .gr-group .secondary-wrap,
 .gradio-container .gr-group .input-container,
 .gradio-container .gr-group label {
-    background: transparent !important;
     color: #f8efe4 !important;
 }
 .gradio-container input,
 .gradio-container textarea,
-.gradio-container select,
-.gradio-container .dropdown-container,
-.gradio-container .wrap-inner {
+.gradio-container select {
     background: rgba(10, 12, 23, 0.9) !important;
     color: #f8efe4 !important;
 }
+.gradio-container .control-panel .dropdown-container,
+.gradio-container .premise-panel .dropdown-container {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+.gradio-container .control-panel .dropdown-container .wrap-inner,
+.gradio-container .control-panel .dropdown-container .secondary-wrap,
+.gradio-container .control-panel .single-select,
+.gradio-container .premise-panel .dropdown-container .wrap-inner,
+.gradio-container .premise-panel .dropdown-container .secondary-wrap {
+    background: rgba(8, 10, 18, 0.92) !important;
+    border: 1px solid rgba(246, 196, 83, 0.38) !important;
+    border-radius: 10px !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
+}
 .gradio-container .control-panel input,
 .gradio-container .control-panel textarea,
-.gradio-container .control-panel .wrap-inner,
 .gradio-container .premise-panel textarea {
-    border: 1px solid rgba(246, 196, 83, 0.24) !important;
-}
-.gradio-container button {
-    background: #3f3148 !important;
-    border: 1px solid rgba(246, 196, 83, 0.24) !important;
-    color: #f8efe4 !important;
-}
-.gradio-container button.primary,
-.gradio-container button.primary-action,
-.gradio-container button.run-one-action {
-    background: #f97316 !important;
-    border-color: #f97316 !important;
-    color: #fff7ed !important;
-}
-.gradio-container button.reset-action {
-    background: #3b0a16 !important;
-    border-color: rgba(246, 196, 83, 0.32) !important;
+    background: rgba(8, 10, 18, 0.92) !important;
+    border: 1px solid rgba(246, 196, 83, 0.3) !important;
+    border-radius: 10px !important;
 }
 .gradio-container .html-container,
 .gradio-container .gradio-style {
     width: 100% !important;
 }
 .puppet-stage {
-    min-height: 500px;
+    height: 600px;
+    max-height: 600px;
+    min-height: 600px;
     width: 100%;
 }
 .puppet-stage::before,
@@ -591,16 +1166,21 @@ body,
     white-space: normal;
 }
 .speech-bubble {
-    margin-top: 0.48rem;
-    max-width: 44rem;
+    max-height: 6.75rem;
     padding: 0.58rem 0.82rem;
 }
 .actor-row {
-    align-items: end;
-    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
+    align-items: flex-end;
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
     gap: 0.62rem;
+    justify-content: center;
     margin-top: 0.82rem;
 }
+.actor-column {
+    position: relative;
+}
 .actor-card {
     align-content: start;
     background: radial-gradient(circle at 50% 18%, rgba(246, 196, 83, 0.13), rgba(70, 38, 36, 0.72) 58%);
@@ -668,7 +1248,6 @@ body,
         padding: 0.75rem 2.45rem;
     }
     .actor-row {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 0.45rem;
     }
     .actor-card {
@@ -688,16 +1267,29 @@ body,
 .app-title p {
     margin-bottom: 0.55rem;
 }
-.premise-panel {
-    padding: 0.42rem 0.55rem 0.52rem;
-}
 .stage-output,
 .stage-output .html-container,
 .stage-output .gradio-style {
     margin-bottom: 0 !important;
 }
 .puppet-stage {
-    min-height: 390px;
+    height: 600px;
+    max-height: 600px;
+    min-height: 600px;
+}
+.stage-empty-playbill {
+    max-width: min(19rem, 92%);
+    padding: 1rem 1.1rem 1.12rem;
+}
+.playbill-kicker {
+    font-size: 0.62rem;
+    letter-spacing: 0.28em;
+}
+.playbill-title {
+    font-size: clamp(1.12rem, 4vw, 1.42rem);
+}
+.playbill-tagline {
+    font-size: 0.82rem;
 }
 .stage-valance {
     height: 34px;
@@ -716,8 +1308,7 @@ body,
 }
 .speech-bubble {
     border-radius: 12px;
-    margin-top: 0.34rem;
-    max-width: 40rem;
+    max-height: 5.75rem;
     padding: 0.42rem 0.7rem;
 }
 .speech-speaker {
@@ -725,11 +1316,19 @@ body,
 }
 .speech-line {
     font-size: 0.86rem;
+    overflow-wrap: anywhere;
 }
 .actor-row {
-    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
+    align-items: flex-end;
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
     gap: 0.5rem;
-    margin-top: 0.55rem;
+    justify-content: center;
+    margin-top: 5.50rem;
+}
+.actor-column {
+    position: relative;
 }
 .actor-card {
     border-radius: 14px;
@@ -788,18 +1387,18 @@ body,
 }
 .control-panel {
     margin-top: 0 !important;
-    padding: 0.42rem;
+    padding: 1rem 1.1rem 1.15rem !important;
 }
 .control-panel h3 {
     margin-bottom: 0.2rem;
 }
 .gradio-container .row {
     gap: 0.55rem !important;
+    padding: 12px !important;
 }
-.stage-output + .row,
-.stage-output + div,
-.control-panel + .control-panel {
-    margin-top: 0.45rem !important;
+/* Column gap separates Show Controls from Audience; avoid doubling with sibling margin. */
+.backstage-stack .control-panel + .control-panel {
+    margin-top: 0 !important;
 }
 .transcript-section,
 .gradio-container .accordion {
@@ -807,26 +1406,74 @@ body,
 }
 @media (max-width: 760px) {
     .puppet-stage {
-        min-height: 430px;
+        height: 600px;
+        max-height: 600px;
+        min-height: 600px;
     }
     .stage-backdrop {
         padding: 0.52rem 2.15rem;
     }
     .actor-row {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 0.42rem;
     }
     .speech-line {
         font-size: 0.8rem;
     }
 }
+/* Gradio dropdown option panels are often portaled; keep them opaque and above the stage */
+[role="listbox"] {
+    z-index: 10050 !important;
+    background-color: rgba(12, 10, 20, 0.98) !important;
+    border: 2px solid rgba(246, 196, 83, 0.58) !important;
+    border-radius: 12px !important;
+    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.72) !important;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    max-height: min(70vh, 22rem) !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+}
+[role="option"] {
+    padding: 0.55rem 0.85rem !important;
+    font-size: 0.95rem !important;
+}
+[role="option"][aria-selected="true"],
+[role="option"]:hover,
+[role="option"][data-highlighted] {
+    background-color: rgba(246, 196, 83, 0.18) !important;
+}
+/* Gradio 6.5.x: listbox inside .contain — min 40px panel floor + 40px option rows */
+.gradio-container.gradio-container-6-5-1 .contain [role="listbox"] {
+    min-height: 40px !important;
+    padding-left: 8px !important;
+}
+.gradio-container.gradio-container-6-5-1 .contain [role="listbox"] [role="option"] {
+    align-items: center !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    min-height: 40px !important;
+}
 """
 
 
+THEATER_THEME = gr.themes.Soft(
+    primary_hue=gr.themes.colors.amber,
+    secondary_hue=gr.themes.colors.rose,
+    neutral_hue=gr.themes.colors.stone,
+    font=(gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"),
+    font_mono=(gr.themes.GoogleFont("IBM Plex Mono"), "ui-monospace", "Consolas", "monospace"),
+)
+
+
 def render_stage(session: TheaterSession | None) -> str:
     if session is None:
         return EMPTY_STAGE
 
-    actor_cards = []
+    show_opening_curtain = session.play_opening_curtain
+    if session.play_opening_curtain:
+        session.play_opening_curtain = False
+
+    actor_columns: list[str] = []
     latest_beat = session.transcript[-1] if session.transcript else None
     latest_speaker = latest_beat.speaker if latest_beat else None
     for actor in session.actors:
@@ -835,25 +1482,28 @@ def render_stage(session: TheaterSession | None) -> str:
         role_line = actor.goal.split(".", maxsplit=1)[0]
         held_prop = actor.held_prop or "nothing"
         held_emoji = PROP_EMOJI.get(held_prop.lower(), "🎁") if actor.held_prop else ""
-        actor_cards.append(
+        bubble_html = ""
+        if latest_beat is not None and actor.name == latest_speaker:
+            bubble_html = f"""
+            <div class="speech-bubble">
+              <div class="speech-speaker">{escape(latest_beat.speaker)}</div>
+              <div class="speech-line">{escape(latest_beat.line)}</div>
+            </div>
+            """
+        actor_columns.append(
             f"""
-            <div class="actor-card{active_class}">
-              <div class="actor-avatar">{escape(actor.avatar)}</div>
-              <div class="actor-name">{escape(actor.name)}</div>
-              {active_label}
-              <div class="actor-detail">{escape(role_line)}</div>
-              <div class="held-prop"><span>Holding: {escape((held_emoji + " ") if held_emoji else "")}{escape(held_prop)}</span></div>
+            <div class="actor-column">
+              {bubble_html}
+              <div class="actor-card{active_class}">
+                <div class="actor-avatar">{escape(actor.avatar)}</div>
+                <div class="actor-name">{escape(actor.name)}</div>
+                {active_label}
+                <div class="actor-detail">{escape(role_line)}</div>
+                <div class="held-prop"><span>Holding: {escape((held_emoji + " ") if held_emoji else "")}{escape(held_prop)}</span></div>
+              </div>
             </div>
             """
         )
-    latest_line = ""
-    if latest_beat is not None:
-        latest_line = f"""
-        <div class="speech-bubble">
-          <div class="speech-speaker">{escape(latest_beat.speaker)}</div>
-          <div class="speech-line">{escape(latest_beat.line)}</div>
-        </div>
-        """
     audience_action = ""
     if session.latest_audience_action is not None:
         audience_action = f"""
@@ -873,18 +1523,27 @@ def render_stage(session: TheaterSession | None) -> str:
         </div>
         """
 
+    curtain_html = ""
+    if show_opening_curtain:
+        curtain_html = """
+        <div class="stage-curtains stage-curtains-animate" aria-hidden="true">
+          <div class="stage-curtain stage-curtain-left"></div>
+          <div class="stage-curtain stage-curtain-right"></div>
+        </div>
+        """
+
     return f"""
     <div class="puppet-stage stage-live">
       <div class="stage-valance"></div>
       <div class="stage-backdrop">
+        {curtain_html}
         <div class="stage-marquee">{escape(session.show_title)}</div>
         <div class="stage-copy">
           <strong>Setting:</strong> {escape(session.setting)}<br />
           <strong>Premise:</strong> {escape(session.premise)}
         </div>
-        {latest_line}
         <div class="actor-row">
-          {''.join(actor_cards)}
+          {''.join(actor_columns)}
         </div>
         <div class="stage-events">
           {audience_action}
@@ -1223,35 +1882,39 @@ with gr.Blocks(title="AI Puppet Theater") as app:
     )
 
     with gr.Group(elem_classes=["control-panel", "premise-panel"]):
-        premise_input = gr.Textbox(
-            label="Premise",
-            placeholder="A moon detective interrogates a suspicious toaster...",
-            lines=1,
-        )
-        with gr.Row():
-            create_button = gr.Button("Create Show", variant="primary", elem_classes=["primary-action"])
-            reset_button = gr.Button("Reset", elem_classes=["reset-action"])
+        with gr.Column(elem_classes=["premise-stack"]):
+            premise_input = gr.Textbox(
+                label="Premise",
+                placeholder="A moon detective interrogates a suspicious toaster...",
+                lines=1,
+            )
+            with gr.Row(elem_classes=["premise-actions"]):
+                create_button = gr.Button("Create Show", variant="primary", elem_classes=["primary-action"])
+                reset_button = gr.Button("Reset", elem_classes=["reset-action"])
 
     stage_output = gr.HTML(value=EMPTY_STAGE, label="Stage", elem_classes=["stage-output"])
 
-    with gr.Row():
+    with gr.Column(elem_classes=["backstage-stack"]):
         with gr.Group(elem_classes=["control-panel"]):
-            gr.Markdown("### Show Controls")
+            gr.Markdown("### Show Controls", elem_classes=["show-controls-title", "panel-heading"])
             with gr.Row():
                 run_one_button = gr.Button(
                     "Run One Beat",
                     variant="primary",
                     elem_classes=["run-one-action"],
                 )
-                run_full_button = gr.Button("Run Full Act", elem_classes=["secondary-action"])
+                run_full_button = gr.Button("Run Full Act", elem_classes=["cue-action"])
 
         with gr.Group(elem_classes=["control-panel"]):
-            gr.Markdown("### Audience")
+            gr.Markdown("### Audience", elem_classes=["audience-title", "panel-heading"])
             prop_input = gr.Dropdown(
-                choices=["rubber duck", "egg", "flowers", "tomato", "tiny crown", "scroll"],
+                choices=PROP_DROPDOWN_CHOICES,
                 value="rubber duck",
                 allow_custom_value=True,
-                label="Prop",
+                filterable=True,
+                label="Choose a prop",
+                info="Pick from the chest or type your own, then press **Throw Prop**.",
+                elem_classes=["prop-picker"],
             )
             with gr.Row():
                 throw_prop_button = gr.Button(
@@ -1274,7 +1937,7 @@ with gr.Blocks(title="AI Puppet Theater") as app:
             label="Transcript",
             lines=7,
             interactive=False,
-            elem_classes=["transcript-box"],
+            elem_classes=["transcript-box", "no-field-label"],
         )
     with gr.Accordion("Behind the Curtain", open=False):
         director_output = gr.Textbox(
@@ -1282,6 +1945,7 @@ with gr.Blocks(title="AI Puppet Theater") as app:
             label="Director Log",
             lines=6,
             interactive=False,
+            elem_classes=["no-field-label"],
         )
     with gr.Accordion("Trace / Debug", open=False):
         trace_output = gr.Textbox(
@@ -1289,6 +1953,7 @@ with gr.Blocks(title="AI Puppet Theater") as app:
             label="Trace Events",
             lines=6,
             interactive=False,
+            elem_classes=["no-field-label"],
         )
     with gr.Accordion("Backend", open=False):
         backend_select = gr.Dropdown(
@@ -1319,12 +1984,13 @@ with gr.Blocks(title="AI Puppet Theater") as app:
             label="Use deterministic actor lines for OpenBMB full-act playback",
             interactive=True,
         )
-        warm_up_button = gr.Button("Warm up OpenBMB", elem_classes=["secondary-action"])
+        warm_up_button = gr.Button("Warm up OpenBMB", elem_classes=["cue-action"])
         backend_output = gr.Textbox(
             value=EMPTY_BACKEND,
             label="Model Settings",
             lines=8,
             interactive=False,
+            elem_classes=["no-field-label"],
         )
 
     create_button.click(
@@ -1389,4 +2055,7 @@ with gr.Blocks(title="AI Puppet Theater") as app:
 
 
 if __name__ == "__main__":
-    app.launch(css=CUSTOM_CSS, theme=gr.themes.Soft())
+    # For live reload on save (CSS in CUSTOM_CSS, layout, handlers), run:
+    #   uv run gradio app.py
+    # Spaces and plain `uv run python app.py` stay non-reloading.
+    app.launch(css=CUSTOM_CSS, theme=THEATER_THEME)

puppet_theater/models.py

@@ -67,3 +67,5 @@ class TheaterSession:
     backend_model_id: str | None = None
     backend_max_new_tokens: int = 80
     backend_temperature: float = 0.8
+    # One-shot: show opening-curtain animation on the first stage render after create.
+    play_opening_curtain: bool = False

puppet_theater/session.py

@@ -98,4 +98,5 @@ def create_show_from_premise(
         backend_model_id=backend_model_id,
         backend_max_new_tokens=backend_max_new_tokens,
         backend_temperature=backend_temperature,
+        play_opening_curtain=True,
     )