split css

app.py

@@ -11,6 +11,39 @@ The user picks both layers with image buttons in the UI.
 Aesthetic: children's drawing — crayon textures, wobbly hand-drawn borders.
 """
 
+# ZeroGPU requirement: `spaces` must be imported BEFORE any CUDA/torch-touching
+# library, and at least one @spaces.GPU-decorated function must be registered at
+# import time, or the Space aborts at startup with:
+#   "No @spaces.GPU function detected during startup"
+# Our real GPU function (describe_with_vision) lives in draw/vision.py, which is
+# imported below behind a try/except — if that import ever fails, ZeroGPU would
+# see zero decorated functions. So we import spaces first and register a tiny
+# top-level probe here that ALWAYS exists. It's never called; it just guarantees
+# the startup scan succeeds regardless of what happens to the vision import.
+try:
+    import spaces
+    _HAVE_SPACES = True
+except ImportError:
+    # Not on a ZeroGPU Space (e.g. local/laptop or a CPU Space). Provide a no-op
+    # decorator so the probe definition below is harmless. Mirrors HF's behavior.
+    class _SpacesShim:
+        def GPU(self, *args, **kwargs):
+            if len(args) == 1 and callable(args[0]) and not kwargs:
+                return args[0]
+            def deco(fn):
+                return fn
+            return deco
+    spaces = _SpacesShim()
+    _HAVE_SPACES = False
+
+
+@spaces.GPU(duration=10)
+def _zerogpu_startup_probe():
+    # Never invoked. Exists only so ZeroGPU's startup scan always finds a
+    # @spaces.GPU function, even if the vision module import fails.
+    return True
+
+
 import base64
 import glob
 import os
@@ -44,9 +77,19 @@ except ImportError:
 # Vision module (drawing → "loves" phrase). Falls back to stroke analysis
 # internally if MiniCPM-V can't load, so the drawing input always produces
 # SOMETHING for the lullaby to be about.
+#
+# We catch Exception (not just ImportError) so a heavy transitive failure
+# doesn't crash the whole app, but we PRINT the traceback — a silent swallow
+# here previously hid the real reason the vision module wasn't loading on the
+# Space. The top-level _zerogpu_startup_probe above still guarantees ZeroGPU's
+# startup scan passes even if this import fails.
 try:
     import draw.vision as vision # vision.describe(image) -> {"loves": str, ...}
-except ImportError:
+except Exception as _vision_import_err:
+    import traceback as _tb
+    print("WARNING: could not import draw.vision — vision disabled, "
+          "falling back to stroke analysis. Real error follows:")
+    _tb.print_exc()
     vision = None
 
 
@@ -2283,1051 +2326,6 @@ ATTRIBUTION_HTML = """
 """
 
 
-CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Patrick+Hand&family=Gloria+Hallelujah&display=swap');
-
-:root {
-    --paper:        #fffef7;
-    --paper-edge:   #f5ecd9;
-    --crayon-blue:  #4a90d9;
-    --crayon-red:   #e15a4e;
-    --crayon-yellow:#f5c842;
-    --crayon-green: #6fb05e;
-    --crayon-purple:#9b6db5;
-    --crayon-pink:  #f08ab0;
-    --crayon-orange:#f0934a;
-    --ink:          #2d3142;
-    /* dark mode surface tokens (overridden below when .dark-mode is active) */
-    --surface-card:       var(--paper);
-    --surface-input:      rgba(255,255,255,0.6);
-    --surface-dropdown:   #ffffff;
-    --surface-canvas:     #f3f1ec;
-    --surface-canvas-inner: #fdfbf3;
-}
-
-/* ── Dark mode ── */
-.dark-mode {
-    --paper:        #1a1b2e;
-    --paper-edge:   #16172a;
-    --ink:          #e8e4d9;
-    --crayon-blue:  #6aabf0;
-    --crayon-yellow:#f5c842;
-    --crayon-red:   #f07066;
-    --crayon-orange:#f5a060;
-    --crayon-green: #80cc6e;
-    --surface-card:       #1e2040;
-    --surface-input:      rgba(30, 32, 64, 0.85);
-    --surface-dropdown:   #252848;
-    --surface-canvas:     #1c1e38;
-    --surface-canvas-inner: #23264a;
-}
-
-/* Dark mode toggle button */
-#dark-toggle-btn {
-    background: var(--paper) !important;
-    border: 2.5px solid var(--ink) !important;
-    border-radius: 50px !important;
-    padding: 6px 14px !important;
-    font-family: 'Fredoka One', cursive !important;
-    font-size: 1.05rem !important;
-    color: var(--ink) !important;
-    cursor: pointer !important;
-    box-shadow: 3px 3px 0 rgba(45,49,66,0.15) !important;
-    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
-    width: auto !important;
-    margin: 8px 0 0 0 !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    gap: 6px !important;
-}
-#dark-toggle-btn:hover {
-    transform: translate(-1px,-1px) !important;
-    box-shadow: 4px 4px 0 rgba(45,49,66,0.2) !important;
-}
-
-.gradio-container {
-    background: var(--paper) !important;
-    background-image:
-        radial-gradient(circle at 20% 30%, rgba(245, 200, 66, 0.06) 0%, transparent 30%),
-        radial-gradient(circle at 80% 70%, rgba(74, 144, 217, 0.06) 0%, transparent 30%),
-        radial-gradient(circle at 50% 90%, rgba(240, 138, 176, 0.06) 0%, transparent 30%);
-    font-family: 'Patrick Hand', sans-serif !important;
-    color: var(--ink) !important;
-    min-height: 100vh;
-    transition: background 0.3s ease, color 0.3s ease;
-}
-.dark-mode .gradio-container {
-    background-image:
-        radial-gradient(circle at 20% 30%, rgba(106,171,240,0.05) 0%, transparent 30%),
-        radial-gradient(circle at 80% 70%, rgba(155,109,181,0.05) 0%, transparent 30%),
-        radial-gradient(circle at 50% 90%, rgba(245,200,66,0.04) 0%, transparent 30%) !important;
-}
-
-#title-block {
-    text-align: center;
-    padding: 40px 24px 16px;
-}
-#title-block::after {
-    content: "";
-    display: block;
-    width: 280px;
-    height: 18px;
-    margin: 20px auto 0;
-    /* Hand-drawn squiggle. Inline SVG as a background image — single ink color,
-       gentle wave reading as "kid drew a wavy line under the title". */
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 18' fill='none' stroke='%232d3142' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9 C 22 2, 38 16, 56 9 S 90 2, 108 9 S 142 16, 160 9 S 194 2, 212 9 S 246 16, 276 9'/></svg>");
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-    opacity: 0.85;
-}
-#title-block h1 {
-    font-family: 'Fredoka One', cursive !important;
-    font-weight: 400 !important;
-    font-size: 4.2rem !important;
-    color: var(--ink) !important;
-    margin: 0 !important;
-    letter-spacing: 0.02em;
-    line-height: 1 !important;
-    text-shadow: 3px 3px 0px rgba(245, 200, 66, 0.45);
-}
-#title-block .subtitle {
-    font-family: 'Patrick Hand', sans-serif !important;
-    font-size: 1.4rem !important;
-    color: var(--crayon-blue) !important;
-    margin-top: 12px;
-    font-weight: 400;
-    transform: rotate(-1.5deg);
-    display: inline-block;
-}
-/* Orientation copy under the title. Sits BELOW the sketched squiggle (the
-   #title-block::after pseudo-element) so the squiggle reads as the title's
-   closing flourish, and the explainer is its own calmer block underneath.
-   Plain warm prose — what the app IS and who does WHAT, in two lines. */
-#title-explainer {
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 1.15rem;
-    color: var(--ink);
-    opacity: 0.82;
-    margin: 12px auto 24px;
-    max-width: 640px;
-    line-height: 1.5;
-    text-align: center;
-}
-#title-explainer .explainer-roles {
-    display: block;
-    margin-top: 6px;
-    font-size: 1.0rem;
-    opacity: 0.85;
-    font-style: italic;
-}
-
-/* ---------- Step diagram (1 ➜ 2 ➜ 3) -------------------------------------
-   Wayfinding strip just under the title. Three larger pills connected
-   by dashed lines, hand-drawn aesthetic to match the rest of the app.
-   Each pill contains: number badge (popped above), emoji icon, short
-   heading, and a two-line description. Step 1 is styled with a dashed
-   border to visually telegraph "optional" — backs up the explicit
-   "(optional)" text underneath.
-
-   The diagram doubles as the main explainer of how Lolaby works, so it
-   sits prominently above the cards. */
-#step-diagram {
-    display: flex;
-    align-items: flex-start;       /* top-align so descs of different
-                                       lengths don't shift the headings */
-    justify-content: center;
-    gap: 6px;
-    margin: 8px auto 32px;
-    flex-wrap: wrap;
-    max-width: 920px;
-}
-#step-diagram .step {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    padding: 14px 18px 16px;
-    background: rgba(255, 255, 255, 0.35);
-    border: 2.5px solid var(--ink);
-    border-radius: 16px 20px 14px 18px;   /* irregular to look hand-drawn */
-    width: 240px;
-    flex: 0 1 240px;
-    box-shadow: 2px 2px 0 rgba(45, 49, 66, 0.12);
-    position: relative;
-}
-.dark-mode #step-diagram .step {
-    background: rgba(30, 32, 64, 0.75);
-    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
-}
-#step-diagram .step-optional {
-    border-style: dashed;
-    background: rgba(255, 255, 255, 0.35);
-    opacity: 0.92;
-}
-.dark-mode #step-diagram .step-optional {
-    background: rgba(30, 32, 64, 0.35);
-}
-#step-diagram .step-num {
-    font-family: 'Fredoka One', sans-serif;
-    font-size: 1.25rem;
-    color: var(--ink);
-    background: var(--crayon-yellow);
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    border: 2.5px solid var(--ink);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    margin-top: -28px;       /* pop the number above the pill */
-    margin-bottom: 4px;
-    box-shadow: 1px 1px 0 rgba(45, 49, 66, 0.15);
-}
-#step-diagram .step-icon {
-    font-size: 1.7rem;
-    line-height: 1;
-    margin: 2px 0;
-}
-#step-diagram .step-label {
-    font-family: 'Fredoka One', sans-serif;
-    font-size: 1.05rem;
-    color: var(--ink);
-    text-align: center;
-    line-height: 1.2;
-    margin-bottom: 4px;
-}
-#step-diagram .step-sub {
-    font-family: 'Patrick Hand', sans-serif;
-    font-weight: normal;
-    font-size: 0.85rem;
-    opacity: 0.7;
-    display: block;
-    margin-top: 2px;
-}
-#step-diagram .step-desc {
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 0.95rem;
-    color: var(--ink);
-    opacity: 0.82;
-    text-align: center;
-    line-height: 1.35;
-    margin-top: 2px;
-}
-#step-diagram .step-connector {
-    flex: 0 0 24px;
-    height: 0;
-    border-top: 2.5px dashed var(--ink);
-    opacity: 0.5;
-    /* Connector centred vertically against the pill's vertical mid-point.
-       The pills are ~150px tall now, so the connector needs a ~70px top
-       offset so it visually meets the middle of the boxes, not the top. */
-    margin-top: 70px;
-    border-radius: 50%;
-}
-@media (max-width: 880px) {
-    /* When the strip can't fit three pills + connectors, stack vertically.
-       Hide connectors so the pills stack cleanly. */
-    #step-diagram { flex-direction: column; align-items: center; gap: 24px; }
-    #step-diagram .step-connector { display: none; }
-    #step-diagram .step { width: 280px; flex: 0 0 auto; }
-}
-
-/* ---------- Step badge (small number inside a card tab) ------------------
-   Reinforces the diagram by anchoring each card to its step number. Once
-   a user scrolls past the diagram they can still see which step they're
-   on by looking at the card tab. */
-.step-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    margin-right: 6px;
-    background: #2d3142 !important;
-    color: #ffffff !important;
-    border-radius: 50%;
-    font-family: 'Fredoka One', sans-serif;
-    font-size: 0.85rem;
-    line-height: 1;
-    vertical-align: middle;
-    position: relative;
-    top: -1px;
-}
-.step-badge-inline {
-    background: var(--crayon-yellow);
-    color: var(--ink);
-    border: 2px solid var(--ink);
-    margin-right: 8px;
-}
-
-/* ---------- Step-3 hint above the Sing button ---------------------------
-   Sits right above the primary CTA so a non-power user sees a clear
-   "this is the next thing to do" line before the button itself. */
-.step-3-hint {
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 1.05rem;
-    color: var(--ink);
-    text-align: center;
-    margin: 18px 0 8px;
-    opacity: 0.9;
-}
-
-label > span,
-.gradio-container label > span:first-child {
-    font-family: 'Fredoka One', cursive !important;
-    font-size: 1.2rem !important;
-    color: var(--ink) !important;
-    font-weight: 400 !important;
-}
-
-input[type="text"],
-input[type="number"],
-textarea,
-select {
-    background: rgba(255, 255, 255, 0.6) !important;
-    border: 2.5px solid var(--ink) !important;
-    border-radius: 14px 18px 12px 16px !important;
-    color: var(--ink) !important;
-    font-family: 'Patrick Hand', sans-serif !important;
-    font-size: 1.15rem !important;
-    padding: 10px 14px !important;
-    box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.12);
-    transition: all 0.18s ease;
-}
-.dark-mode input[type="text"],
-.dark-mode input[type="number"],
-.dark-mode textarea,
-.dark-mode select,
-.dark-mode input {
-    background: var(--paper) !important;
-    color: var(--ink) !important;
-    box-shadow: 3px 3px 0 rgba(0,0,0,0.25) !important;
-}
-input[type="text"]:focus, textarea:focus, select:focus {
-    border-color: var(--crayon-blue) !important;
-    box-shadow: 4px 4px 0 var(--crayon-yellow);
-    outline: none;
-}
-
-/* Dropdown: style only the visible trigger input, leave the options panel
-   with Gradio defaults so it stays usable. */
-.gradio-dropdown input {
-    background: rgba(255, 255, 255, 0.6) !important;
-    border: 2.5px solid var(--ink) !important;
-    border-radius: 14px 18px 12px 16px !important;
-    color: var(--ink) !important;
-    font-family: 'Patrick Hand', sans-serif !important;
-    font-size: 1.15rem !important;
-    padding: 10px 14px !important;
-    box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.12);
-}
-.dark-mode .gradio-dropdown input {
-    background: rgba(30, 32, 64, 0.85) !important;
-    color: var(--ink) !important;
-}
-/* Make sure the options popup is on top and uses readable defaults */
-.gradio-dropdown ul,
-.gradio-dropdown [role="listbox"],
-ul.options {
-    background: #ffffff !important;
-    border: 2px solid var(--ink) !important;
-    border-radius: 8px !important;
-    font-family: 'Patrick Hand', sans-serif !important;
-    color: var(--ink) !important;
-    z-index: 9999 !important;
-    box-shadow: 4px 4px 0 rgba(45, 49, 66, 0.18);
-}
-.gradio-dropdown ul li,
-.gradio-dropdown [role="option"],
-ul.options li {
-    padding: 8px 14px !important;
-    font-family: 'Patrick Hand', sans-serif !important;
-    font-size: 1.05rem !important;
-    color: var(--ink) !important;
-    background: transparent !important;
-    cursor: pointer;
-}
-.gradio-dropdown ul li:hover,
-.gradio-dropdown [role="option"]:hover,
-ul.options li:hover {
-    background: var(--crayon-yellow) !important;
-}
-.dark-mode .gradio-dropdown ul,
-.dark-mode .gradio-dropdown [role="listbox"],
-.dark-mode ul.options {
-    color: var(--paper) !important;
-}
-.dark-mode .reset-button {
-    color: var(--ink) !important;
-}
-
-.dark-mode ul.options li, .dark-mode .gradio-dropdown ul li,
-.dark-mode .gradio-dropdown [role="option"] {
-    color: var(--paper) !important;
-}
-
-input[type="range"] { accent-color: var(--crayon-red) !important; }
-
-.form-card {
-    background: var(--paper) !important;
-    border: 3px solid var(--ink) !important;
-    border-radius: 22px 18px 26px 16px !important;
-    padding: 28px !important;
-    box-shadow: 5px 5px 0 rgba(45, 49, 66, 0.08);
-    /* No transform here — it creates a stacking context that breaks
-       Gradio's fixed-position dropdown popup. */
-}
-.dark-mode .form-card {
-    box-shadow: 5px 5px 0 rgba(0,0,0,0.3) !important;
-}
-.dark-mode .form-card div {
-    background-color: var(--paper) !important;
-}
-.form-card-right {
-    background: var(--paper) !important;
-    border: 3px solid var(--ink) !important;
-    border-radius: 18px 24px 16px 22px !important;
-    padding: 28px !important;
-    box-shadow: 5px 5px 0 rgba(245, 200, 66, 0.25);
-}
-.dark-mode .form-card-right {
-    box-shadow: 5px 5px 0 rgba(245,200,66,0.12) !important;
-}
-.dark-mode .form-card-right div {
-    background-color: var(--paper) !important;
-}
-
-/* ---- Drawing canvas card ----------------------------------------------- */
-/* Matches the form-card aesthetic: paper background, ink border, wobbly
-   corners that read as "drawn by hand". Sits above the form as the hero. */
-.draw-card {
-    background: var(--paper) !important;
-    border: 3px solid var(--ink) !important;
-    border-radius: 24px 16px 22px 18px !important;
-    padding: 24px 28px 18px !important;
-    box-shadow: 5px 5px 0 rgba(74, 144, 217, 0.18);
-    margin-bottom: 12px;
-}
-.dark-mode .draw-card {
-    box-shadow: 5px 5px 0 rgba(106,171,240,0.12) !important;
-}
-.draw-card .card-heading {
-    margin-bottom: 4px;
-}
-.draw-hint {
-    font-family: 'Patrick Hand', sans-serif;
-    color: var(--ink);
-    opacity: 0.7;
-    font-size: 1.0rem;
-    margin: 0 0 14px 0;
-}
-
-/* ---------- Split draw card: canvas | upload ------------------------------
-   The draw card hosts two side-by-side image inputs so trackpad-allergic
-   users (i.e. small children) can upload a phone photo of a paper drawing
-   instead of trying to draw with a mouse. Soft vertical divider between
-   the two halves; on narrow viewports the columns stack and the divider
-   becomes a horizontal one. */
-#draw-row {
-    gap: 18px;
-    align-items: stretch;
-}
-.draw-half {
-    padding: 0 6px;
-    position: relative;
-    z-index: 2;     /* sit above background doodles */
-}
-/* Vertical divider between the two halves, drawn on the canvas-side's
-   right edge so it sits exactly between the two columns. */
-.draw-half-canvas {
-    border-right: 2px dashed rgba(45, 49, 66, 0.18);
-    padding-right: 18px;
-}
-.draw-half-upload {
-    padding-left: 6px;
-}
-/* Small label above each half so people immediately see "this side OR
-   that side." Same font as the hint, slightly bolder, slightly darker. */
-.draw-half-label {
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 1.05rem;
-    color: var(--ink);
-    opacity: 0.85;
-    margin: 0 0 8px;
-    font-weight: 700;
-    letter-spacing: 0.01em;
-}
-/* The little caption under the upload widget, mirroring the canvas's
-   `.draw-hint` styling but scoped to the upload half. */
-.draw-half-hint {
-    font-family: 'Patrick Hand', sans-serif;
-    color: var(--ink);
-    opacity: 0.65;
-    font-size: 0.95rem;
-    margin: 8px 2px 0;
-    text-align: center;
-}
-/* Match the upload widget's idle look to the canvas surround so the two
-   halves feel like siblings. Gradio's default upload widget has a plain
-   white drop-zone — we soften that to the same warm taupe used for the
-   canvas surround. */
-.gradio-container #draw-upload {
-    background-color: transparent !important;
-    background-image: none !important;
-}
-.gradio-container #draw-upload .upload-container,
-.gradio-container #draw-upload .image-container {
-    border: 2px dashed rgba(45, 49, 66, 0.25) !important;
-    border-radius: 14px !important;
-    background-color: #fdfbf3 !important;
-}
-.dark-mode .gradio-container #draw-upload .upload-container,
-.dark-mode .gradio-container #draw-upload .image-container {
-    border: 2px dashed rgba(232, 228, 217, 0.25) !important;
-    background-color: var(--paper) !important;
-}
-/* When viewport gets narrow, stack the two halves vertically and convert
-   the vertical divider into a horizontal one so it still reads as a
-   "this OR that" separator. */
-@media (max-width: 760px) {
-    .draw-half-canvas {
-        border-right: none;
-        border-bottom: 2px dashed rgba(45, 49, 66, 0.18);
-        padding-right: 0;
-        padding-bottom: 18px;
-        margin-bottom: 6px;
-    }
-    .draw-half-upload {
-        padding-left: 0;
-    }
-}
-/* Tab-pill labels that sit ABOVE each card heading, classifying who the
-   section is for. Visually paired (same shape) but color-differentiated
-   (kid = playful crayon-yellow accent, grown-up = grounded ink) so the
-   two roles are recognisable at a glance. */
-.card-tab {
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 0.95rem;
-    font-weight: 400;
-    display: inline-block;
-    padding: 4px 14px;
-    border-radius: 12px 16px 14px 12px;
-    margin: 0 0 10px;
-    letter-spacing: 0.02em;
-    transform: rotate(-1.2deg);
-    border: 2px solid var(--ink);
-}
-.card-tab-kid {
-    background: #f4d8a0;
-    color: var(--ink);
-}
-
-.dark-mode .card-tab-kid {
-    color: var(--paper) !important;
-}
-
-/* Grown-up tab: soft crayon-blue wash — paired with yellow (the kid tab) as
-   a classic complementary crayon pair, calm enough to read as the more
-   sober adult-facing section. Solid border (the dashed border had it
-   visually colliding with the Clear-drawing button). */
-.card-tab-grownup {
-    background: rgba(74, 144, 217, 0.22) !important;   /* crayon-blue @ 22% */
-    color: var(--ink);
-}
-/* Subtitle under the form heading — explains what's required vs optional in
-   one breath, so the user isn't surprised by validation errors. Same
-   visual weight as .draw-hint so the two cards feel like siblings. */
-.form-role-hint {
-    font-family: 'Patrick Hand', sans-serif;
-    color: var(--ink);
-    opacity: 0.7;
-    font-size: 1.0rem;
-    margin: 0 0 14px 0;
-}
-/* The Sketchpad itself: give the inner canvas a creamy "paper" feel and
-   the surround a dashed-ink border so it sits inside our card. The actual
-   surround color is set lower in the taupe block below. */
-#draw-canvas .image-container, #draw-canvas canvas {
-    background: #fdfbf3 !important;
-    border-radius: 14px !important;
-}
-#draw-canvas {
-    border: 2.5px dashed var(--ink) !important;
-    border-radius: 14px !important;
-    overflow: hidden;
-}
-#draw-canvas canvas {
-    border: none !important;
-}
-
-/* Drawing canvas surround.
-   IDLE state: warm muted taupe — repainted via CSS-variable overrides
-   scoped to #draw-canvas (Gradio uses --block-background-fill and friends
-   to color component surrounds; overriding them recolors the idle wrapper
-   without fighting Sketchpad's active editor chrome).
-   ACTIVE editing state: Gradio's Sketchpad swaps in its own dark editor
-   surface using inline styles / different variables, which I'm accepting
-   as a constraint — fighting it produced more side effects than wins. */
-.gradio-container #draw-canvas {
-    --block-background-fill: #f3f1ec !important;
-    --background-fill-primary: #f3f1ec !important;
-    --background-fill-secondary: #f3f1ec !important;
-    --neutral-50:  #f3f1ec !important;
-    --neutral-100: #f3f1ec !important;
-    background-color: #f3f1ec !important;
-    background-image: none !important;
-}
-.dark-mode .gradio-container #draw-canvas {
-    --block-background-fill: var(--paper) !important;
-    --background-fill-primary: var(--paper) !important;
-    --background-fill-secondary: var(--paper) !important;
-    --neutral-50:  var(--paper) !important;
-    --neutral-100: var(--paper) !important;
-    background-color: var(--paper) !important;
-}
-/* Also paint direct child wrappers (Gradio's Sketchpad nests several divs;
-   any "inactive" surround inherits/uses these surfaces). The active editor
-   uses a deeper element with its own inline style that we no longer fight. */
-.gradio-container #draw-canvas > div,
-.gradio-container #draw-canvas .block,
-.gradio-container #draw-canvas .wrap,
-.gradio-container #draw-canvas .container {
-    background-color: #f3f1ec !important;
-    background-image: none !important;
-}
-.dark-mode .gradio-container #draw-canvas > div,
-.dark-mode .gradio-container #draw-canvas .block,
-.dark-mode .gradio-container #draw-canvas .wrap,
-.dark-mode .gradio-container #draw-canvas .container {
-    background-color: var(--paper) !important;
-}
-/* The inner <canvas> stays cream-white when idle (it's the "paper") */
-.gradio-container #draw-canvas canvas {
-    background-color: #fdfbf3 !important;
-    background-image: none !important;
-}
-.dark-mode .gradio-container #draw-canvas canvas {
-    background-color: #23264a !important;
-}
-
-/* The "Clear drawing" button — secondary visual weight; the primary CTA is
-   still "Sing with Lola" further down the page. */
-#reset-drawing-btn {
-    margin-top: 10px !important;
-    background: transparent !important;
-    border: 2px dashed var(--ink) !important;
-    color: var(--ink) !important;
-    font-family: 'Patrick Hand', sans-serif !important;
-    font-size: 1.0rem !important;
-    padding: 6px 16px !important;
-    border-radius: 12px !important;
-    box-shadow: none !important;
-    width: auto !important;
-    align-self: flex-start;
-}
-#reset-drawing-btn:hover {
-    background: rgba(45, 49, 66, 0.04) !important;
-}
-
-/* ---- "What Lola saw" hint ----------------------------------------------
-   Sits between the audio player and the lyrics. Reserves a CONSTANT amount
-   of vertical space whether or not it has content, so the layout never
-   reflows when content arrives (which was previously pushing the lyrics
-   down on the first generation and overlapping them mid-transition).
-   The visual chrome (background, border, padding) only renders when the
-   inner .saw-hint div exists; the outer container keeps its margin always. */
-#saw-hint {
-    margin: 4px 0 14px !important;   /* ALWAYS reserve this space */
-    min-height: 12px;                 /* small constant gap when empty */
-}
-.saw-hint {
-    font-family: 'Patrick Hand', sans-serif;
-    color: var(--ink);
-    background: rgba(245, 200, 66, 0.10);          /* faint crayon-yellow */
-    border-left: 4px solid var(--crayon-yellow);
-    border-radius: 8px 12px 10px 8px;
-    padding: 10px 14px;
-    margin: 0;                        /* margin lives on #saw-hint now */
-    font-size: 1.0rem;
-    line-height: 1.45;
-}
-.dark-mode .saw-label {
-    color: var(--ink) !important;
-}
-.saw-hint .saw-label {
-    font-weight: 700;
-    margin-right: 4px;
-}
-.saw-hint em {
-    font-style: italic;
-    color: var(--ink);
-    opacity: 0.85;
-}
-.saw-hint .saw-plus {
-    margin-left: 6px;
-    opacity: 0.75;
-    font-size: 0.95rem;
-}
-.saw-hint-empty {
-    background: rgba(74, 144, 217, 0.08);          /* faint crayon-blue */
-    border-left-color: var(--crayon-blue);
-    font-style: italic;
-}
-
-/* Instrument grid */
-.instr-grid {
-    display: grid !important;
-    grid-template-columns: repeat(4, 1fr) !important;
-    gap: 12px !important;
-    margin: 0 0 14px !important;
-}
-/* Gradio wraps every gr.HTML in a div with default margin; squash the gap
-   between the picker title and the instrument grid. */
-.form-card-left .gr-block:has(> .instr-grid),
-.form-card-left .gr-block:has(> #picker-hint) {
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-/* Slider — Gradio's value bubble sits in a small box that can clip the
-   rounded border at the bottom. Give the wrapper extra padding so the
-   bubble's full outline shows, and force no overflow clipping on the
-   surrounding block. */
-.gr-slider, .gradio-slider, [data-testid="slider"] {
-    overflow: visible !important;
-    padding-bottom: 14px !important;
-}
-.gr-slider input[type="number"],
-.gradio-slider input[type="number"],
-[data-testid="slider"] input[type="number"] {
-    overflow: visible !important;
-}
-/* The bubble container itself */
-.gr-slider .wrap, .gradio-slider .wrap {
-    overflow: visible !important;
-}
-.instr-cell {
-    background: var(--paper) !important;
-    border: 2.5px solid var(--ink) !important;
-    border-radius: 16px 20px 14px 18px !important;
-    padding: 10px 6px 8px !important;
-    cursor: pointer;
-    box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.12);
-    transition: all 0.2s ease;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 1rem;
-    color: var(--ink);
-}
-.dark-mode .instr-cell {
-    box-shadow: 3px 3px 0 rgba(0,0,0,0.3) !important;
-}
-.dark-mode .instr-cell span {
-    color: var(--ink) !important;
-}
-.instr-cell:hover {
-    transform: translate(-2px, -2px) rotate(-2deg);
-    box-shadow: 5px 5px 0 rgba(45, 49, 66, 0.18);
-}
-.instr-cell.selected {
-    background: var(--crayon-yellow) !important;
-    box-shadow: 3px 3px 0 var(--ink) !important;
-    transform: rotate(-1deg);
-}
-.instr-cell img {
-    width: 56px;
-    height: 56px;
-    object-fit: contain;
-    pointer-events: none;
-}
-.instr-cell span { pointer-events: none; }
-/* The little "1" / "2" badge in the corner of selected cells — tells the
-   user which slot they've assigned the instrument to. */
-.instr-cell { position: relative; }
-
-.slot-badge {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    background: #2d3142 !important;
-    color: #ffffff !important;
-    font-family: 'Fredoka One', cursive;
-    font-size: 0.85rem;
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 2px 2px 0 rgba(45, 49, 66, 0.25);
-    pointer-events: none;
-}
-#picker-hint {
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 0.95rem;
-    color: var(--crayon-blue);
-    margin: -2px 0 10px;
-    padding: 4px 8px;
-    border-radius: 6px;
-    transition: background 0.25s ease, color 0.25s ease;
-    min-height: 0;
-}
-#picker-hint:empty {
-    margin: 0;
-    padding: 0;
-}
-#picker-hint.hint-flash {
-    background: var(--crayon-red);
-    color: #fff;
-    transform: rotate(-0.5deg);
-}
-#picker-hint.hint-error {
-    font-weight: 700;
-    box-shadow: 2px 2px 0 rgba(45, 49, 66, 0.2);
-}
-
-.section-title {
-    font-family: 'Fredoka One', cursive;
-    font-size: 1.4rem;
-    color: var(--ink);
-    margin: 18px 0 2px;
-    display: flex;
-    align-items: baseline;
-    gap: 10px;
-}
-.section-title .which {
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 1rem;
-    color: var(--crayon-blue);
-    font-style: italic;
-}
-
-button#generate-btn, .primary {
-    background: var(--crayon-red) !important;
-    color: #fffef7 !important;
-    border: 3px solid var(--ink) !important;
-    border-radius: 26px 18px 28px 22px !important;
-    font-family: 'Fredoka One', cursive !important;
-    font-size: 1.7rem !important;
-    font-weight: 400 !important;
-    padding: 18px 36px !important;
-    cursor: pointer;
-    box-shadow: 5px 5px 0 var(--ink);
-    transition: all 0.18s ease;
-    letter-spacing: 0.03em;
-    width: 100%;
-    margin-top: 16px;
-}
-button#generate-btn:hover {
-    transform: translate(-2px, -2px) rotate(-1deg);
-    box-shadow: 7px 7px 0 var(--ink);
-    background: var(--crayon-orange) !important;
-}
-button#generate-btn:active {
-    transform: translate(2px, 2px);
-    box-shadow: 2px 2px 0 var(--ink);
-}
-
-#output-lyrics textarea {
-    background:
-        linear-gradient(transparent 28px, rgba(74, 144, 217, 0.18) 28px, rgba(74, 144, 217, 0.18) 29px, transparent 29px) !important;
-    background-size: 100% 30px !important;
-    background-color: rgba(255, 255, 255, 0.7) !important;
-    font-family: 'Gloria Hallelujah', cursive !important;
-    font-size: 1.25rem !important;
-    line-height: 30px !important;
-    color: var(--ink) !important;
-    border: 2.5px solid var(--ink) !important;
-    border-radius: 16px 20px 14px 18px !important;
-    padding: 12px 18px !important;
-}
-.dark-mode #output-lyrics textarea {
-    background:
-        linear-gradient(transparent 28px, rgba(106, 171, 240, 0.15) 28px, rgba(106, 171, 240, 0.15) 29px, transparent 29px) !important;
-    background-size: 100% 30px !important;
-    background-color: rgba(30, 32, 64, 0.8) !important;
-}
-
-audio {
-    border-radius: 18px !important;
-    border: 2.5px solid var(--ink) !important;
-    background: var(--paper) !important;
-    box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.1);
-}
-.dark-mode audio {
-    box-shadow: 3px 3px 0 rgba(0,0,0,0.3) !important;
-}
-
-.attribution {
-    text-align: center;
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 0.85rem;
-    color: rgba(45, 49, 66, 0.55);
-    margin: 24px auto 16px;
-    padding: 12px;
-}
-.attribution a {
-    color: var(--crayon-blue);
-    text-decoration: none;
-    border-bottom: 1px dashed var(--crayon-blue);
-}
-
-/* Footer container — wraps the icon attribution and a professional credit
-   block. A subtle divider sits between them. */
-.footer {
-    text-align: center;
-    padding: 8px 12px 20px;
-}
-.footer .attribution {
-    padding: 6px 12px 14px;
-    border-bottom: 1px dashed rgba(45, 49, 66, 0.18);
-    margin-bottom: 12px;
-}
-/* Powered-by line — sits below the icon attribution. Small and quiet:
-   names the open-source models behind the app and gives judges one-click
-   access to each on the Hub. */
-.footer .powered-by {
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 0.92rem;
-    color: var(--ink);
-    opacity: 0.72;
-    letter-spacing: 0.01em;
-    padding: 0 0 4px;
-}
-.footer .powered-by a {
-    color: var(--ink);
-    text-decoration: none;
-    border-bottom: 1px dotted rgba(45, 49, 66, 0.45);
-    padding: 0 1px;
-    transition: color 0.2s ease, border-color 0.2s ease;
-}
-.footer .powered-by a:hover {
-    color: var(--crayon-blue);
-    border-bottom-color: var(--crayon-blue);
-}
-
-footer { display: none !important; }
-.gr-form { gap: 14px !important; }
-
-/* Hide the state-holder textboxes — they're in the DOM only so JS can write to them */
-.pick-state { display: none !important; }
-
-/* Card-level section headings (replaces inline gr.Markdown "###" usage) */
-.card-heading {
-    font-family: 'Fredoka One', cursive;
-    font-size: 1.5rem;
-    color: var(--ink);
-    margin: 4px 0 14px;
-    letter-spacing: 0.01em;
-}
-
-/* Advanced settings accordion */
-#advanced-accordion {
-    margin-top: 22px !important;
-    border: 2.5px dashed var(--ink) !important;
-    border-radius: 14px 18px 12px 16px !important;
-    background: rgba(255, 255, 255, 0.3) !important;
-    overflow: visible !important;
-}
-.dark-mode #advanced-accordion {
-    background: rgba(30, 32, 64, 0.5) !important;
-}
-#advanced-accordion > button,
-#advanced-accordion .label-wrap,
-#advanced-accordion summary {
-    font-family: 'Fredoka One', cursive !important;
-    font-size: 1.1rem !important;
-    color: var(--ink) !important;
-    padding: 10px 14px !important;
-}
-
-/* Inline error banner — appears under the form when validation fails */
-#error-banner {
-    margin-top: 12px;
-}
-.error-banner-inner {
-    background: #fde6e3;
-    border: 2.5px solid var(--crayon-red);
-    border-radius: 14px 18px 12px 16px;
-    color: #8a2a22;
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 1.1rem;
-    padding: 12px 16px;
-    box-shadow: 3px 3px 0 rgba(225, 90, 78, 0.25);
-    transform: rotate(-0.4deg);
-}
-.dark-mode .error-banner-inner {
-    background: #3a1a1a;
-    color: #f0a0a0;
-}
-
-/* ---------- Success banner (between heading and audio in lullaby card) ---
-   Sits between "Your lullaby" heading and the audio player. One-liner,
-   no emoji — quiet confirmation that generation completed. Friendly
-   green palette to mirror the error-banner's red, but smaller padding
-   and no rotation since it's an inline confirmation, not a celebration. */
-#success-banner {
-    margin: 4px 0 10px;
-}
-.success-banner-inner {
-    background: #e5f3dc;
-    border: 2.5px solid #6fb05e;
-    border-radius: 12px 16px 10px 14px;
-    color: #2f5a26;
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 1.05rem;
-    padding: 8px 14px;
-    text-align: center;
-    box-shadow: 2px 2px 0 rgba(111, 176, 94, 0.2);
-}
-.dark-mode .success-banner-inner {
-    background: #1a3020;
-    color: #90cc80;
-}
-/* Idle (pre-generation) variant — soft yellow "waiting" tone, no green
-   to avoid implying success before there's a song. Same shape as the
-   success state so the slot doesn't jump around when content changes. */
-.success-banner-idle {
-    background: rgba(245, 200, 66, 0.14);   /* whisper of crayon-yellow */
-    border: 2px dashed rgba(45, 49, 66, 0.40);
-    border-radius: 12px 16px 10px 14px;
-    color: var(--ink);
-    opacity: 0.78;
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 1.0rem;
-    padding: 8px 14px;
-    text-align: center;
-}
-
-/* ---------- "Both inputs" notice (in the draw card) ---------------------
-   Soft, low-key, informational tone. Not red/alarming because the user
-   didn't do anything wrong — we're just being transparent about which
-   input wins when both are present. */
-#both-inputs-notice {
-    margin: 14px 18px 0;
-}
-.both-inputs-inner {
-    background: rgba(245, 200, 66, 0.18);    /* whisper of crayon-yellow */
-    border: 2px dashed rgba(45, 49, 66, 0.45);
-    border-radius: 12px 16px 10px 14px;
-    color: var(--ink);
-    font-family: 'Patrick Hand', sans-serif;
-    font-size: 1.0rem;
-    padding: 10px 14px;
-    line-height: 1.4;
-}
-.both-inputs-inner .both-inputs-icon {
-    margin-right: 4px;
-    font-size: 1.1rem;
-}
-"""
-
-
 # JS injected once; the buttons call pickInstrument() which writes the chosen
 # value into the hidden Gradio textbox for that group and triggers its change.
 SELECTION_JS = """
@@ -3497,7 +2495,7 @@ function flashComboHint() {
 """
 
 
-with gr.Blocks(css=CSS, title="Lolaby", theme=gr.themes.Citrus(),
+with gr.Blocks(css_paths="style.css", title="Lolaby", theme=gr.themes.Citrus(),
                 head=f"<script>{SELECTION_JS}</script>") as demo:
     gr.HTML("""
     <div id="title-block">
@@ -3883,7 +2881,7 @@ gr.mount_gradio_app(
     demo,
     path="/",
     theme=gr.themes.Citrus(),
-    css=CSS,
+    css_paths="style.css",
     head=f"<script>{SELECTION_JS}</script>",
 )
 

style.css

@@ -0,0 +1,1183 @@
+@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Patrick+Hand&family=Gloria+Hallelujah&display=swap');
+
+:root {
+    --paper: #fffef7;
+    --paper-edge: #f5ecd9;
+    --crayon-blue: #4a90d9;
+    --crayon-red: #e15a4e;
+    --crayon-yellow: #f5c842;
+    --crayon-green: #6fb05e;
+    --crayon-purple: #9b6db5;
+    --crayon-pink: #f08ab0;
+    --crayon-orange: #f0934a;
+    --ink: #2d3142;
+    /* dark mode surface tokens (overridden below when .dark-mode is active) */
+    --surface-card: var(--paper);
+    --surface-input: rgba(255, 255, 255, 0.6);
+    --surface-dropdown: #ffffff;
+    --surface-canvas: #f3f1ec;
+    --surface-canvas-inner: #fdfbf3;
+}
+
+/* ── Dark mode ── */
+.dark-mode {
+    --paper: #1a1b2e;
+    --paper-edge: #16172a;
+    --ink: #e8e4d9;
+    --crayon-blue: #6aabf0;
+    --crayon-yellow: #f5c842;
+    --crayon-red: #f07066;
+    --crayon-orange: #f5a060;
+    --crayon-green: #80cc6e;
+    --surface-card: #1e2040;
+    --surface-input: rgba(30, 32, 64, 0.85);
+    --surface-dropdown: #252848;
+    --surface-canvas: #1c1e38;
+    --surface-canvas-inner: #23264a;
+}
+
+/* Dark mode toggle button */
+#dark-toggle-btn {
+    background: var(--paper) !important;
+    border: 2.5px solid var(--ink) !important;
+    border-radius: 50px !important;
+    padding: 6px 14px !important;
+    font-family: 'Fredoka One', cursive !important;
+    font-size: 1.05rem !important;
+    color: var(--ink) !important;
+    cursor: pointer !important;
+    box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.15) !important;
+    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
+    width: auto !important;
+    margin: 8px 0 0 0 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 6px !important;
+}
+
+#dark-toggle-btn:hover {
+    transform: translate(-1px, -1px) !important;
+    box-shadow: 4px 4px 0 rgba(45, 49, 66, 0.2) !important;
+}
+
+.gradio-container {
+    background: var(--paper) !important;
+    background-image:
+        radial-gradient(circle at 20% 30%, rgba(245, 200, 66, 0.06) 0%, transparent 30%),
+        radial-gradient(circle at 80% 70%, rgba(74, 144, 217, 0.06) 0%, transparent 30%),
+        radial-gradient(circle at 50% 90%, rgba(240, 138, 176, 0.06) 0%, transparent 30%);
+    font-family: 'Patrick Hand', sans-serif !important;
+    color: var(--ink) !important;
+    min-height: 100vh;
+    transition: background 0.3s ease, color 0.3s ease;
+}
+
+.dark-mode .gradio-container {
+    background-image:
+        radial-gradient(circle at 20% 30%, rgba(106, 171, 240, 0.05) 0%, transparent 30%),
+        radial-gradient(circle at 80% 70%, rgba(155, 109, 181, 0.05) 0%, transparent 30%),
+        radial-gradient(circle at 50% 90%, rgba(245, 200, 66, 0.04) 0%, transparent 30%) !important;
+}
+
+#title-block {
+    text-align: center;
+    padding: 40px 24px 16px;
+}
+
+#title-block::after {
+    content: "";
+    display: block;
+    width: 280px;
+    height: 18px;
+    margin: 20px auto 0;
+    /* Hand-drawn squiggle. Inline SVG as a background image — single ink color,
+       gentle wave reading as "kid drew a wavy line under the title". */
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 18' fill='none' stroke='%232d3142' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9 C 22 2, 38 16, 56 9 S 90 2, 108 9 S 142 16, 160 9 S 194 2, 212 9 S 246 16, 276 9'/></svg>");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    opacity: 0.85;
+}
+
+#title-block h1 {
+    font-family: 'Fredoka One', cursive !important;
+    font-weight: 400 !important;
+    font-size: 4.2rem !important;
+    color: var(--ink) !important;
+    margin: 0 !important;
+    letter-spacing: 0.02em;
+    line-height: 1 !important;
+    text-shadow: 3px 3px 0px rgba(245, 200, 66, 0.45);
+}
+
+#title-block .subtitle {
+    font-family: 'Patrick Hand', sans-serif !important;
+    font-size: 1.4rem !important;
+    color: var(--crayon-blue) !important;
+    margin-top: 12px;
+    font-weight: 400;
+    transform: rotate(-1.5deg);
+    display: inline-block;
+}
+
+/* Orientation copy under the title. Sits BELOW the sketched squiggle (the
+   #title-block::after pseudo-element) so the squiggle reads as the title's
+   closing flourish, and the explainer is its own calmer block underneath.
+   Plain warm prose — what the app IS and who does WHAT, in two lines. */
+#title-explainer {
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 1.15rem;
+    color: var(--ink);
+    opacity: 0.82;
+    margin: 12px auto 24px;
+    max-width: 640px;
+    line-height: 1.5;
+    text-align: center;
+}
+
+#title-explainer .explainer-roles {
+    display: block;
+    margin-top: 6px;
+    font-size: 1.0rem;
+    opacity: 0.85;
+    font-style: italic;
+}
+
+/* ---------- Step diagram (1 ➜ 2 ➜ 3) -------------------------------------
+   Wayfinding strip just under the title. Three larger pills connected
+   by dashed lines, hand-drawn aesthetic to match the rest of the app.
+   Each pill contains: number badge (popped above), emoji icon, short
+   heading, and a two-line description. Step 1 is styled with a dashed
+   border to visually telegraph "optional" — backs up the explicit
+   "(optional)" text underneath.
+
+   The diagram doubles as the main explainer of how Lolaby works, so it
+   sits prominently above the cards. */
+#step-diagram {
+    display: flex;
+    align-items: flex-start;
+    /* top-align so descs of different
+                                       lengths don't shift the headings */
+    justify-content: center;
+    gap: 6px;
+    margin: 8px auto 32px;
+    flex-wrap: wrap;
+    max-width: 920px;
+}
+
+#step-diagram .step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 14px 18px 16px;
+    background: rgba(255, 255, 255, 0.35);
+    border: 2.5px solid var(--ink);
+    border-radius: 16px 20px 14px 18px;
+    /* irregular to look hand-drawn */
+    width: 240px;
+    flex: 0 1 240px;
+    box-shadow: 2px 2px 0 rgba(45, 49, 66, 0.12);
+    position: relative;
+}
+
+.dark-mode #step-diagram .step {
+    background: rgba(30, 32, 64, 0.75);
+    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
+}
+
+#step-diagram .step-optional {
+    border-style: dashed;
+    background: rgba(255, 255, 255, 0.35);
+    opacity: 0.92;
+}
+
+.dark-mode #step-diagram .step-optional {
+    background: rgba(30, 32, 64, 0.35);
+}
+
+#step-diagram .step-num {
+    font-family: 'Fredoka One', sans-serif;
+    font-size: 1.25rem;
+    color: var(--ink);
+    background: var(--crayon-yellow);
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 2.5px solid var(--ink);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    margin-top: -28px;
+    /* pop the number above the pill */
+    margin-bottom: 4px;
+    box-shadow: 1px 1px 0 rgba(45, 49, 66, 0.15);
+}
+
+#step-diagram .step-icon {
+    font-size: 1.7rem;
+    line-height: 1;
+    margin: 2px 0;
+}
+
+#step-diagram .step-label {
+    font-family: 'Fredoka One', sans-serif;
+    font-size: 1.05rem;
+    color: var(--ink);
+    text-align: center;
+    line-height: 1.2;
+    margin-bottom: 4px;
+}
+
+#step-diagram .step-sub {
+    font-family: 'Patrick Hand', sans-serif;
+    font-weight: normal;
+    font-size: 0.85rem;
+    opacity: 0.7;
+    display: block;
+    margin-top: 2px;
+}
+
+#step-diagram .step-desc {
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 0.95rem;
+    color: var(--ink);
+    opacity: 0.82;
+    text-align: center;
+    line-height: 1.35;
+    margin-top: 2px;
+}
+
+#step-diagram .step-connector {
+    flex: 0 0 24px;
+    height: 0;
+    border-top: 2.5px dashed var(--ink);
+    opacity: 0.5;
+    /* Connector centred vertically against the pill's vertical mid-point.
+       The pills are ~150px tall now, so the connector needs a ~70px top
+       offset so it visually meets the middle of the boxes, not the top. */
+    margin-top: 70px;
+    border-radius: 50%;
+}
+
+@media (max-width: 880px) {
+
+    /* When the strip can't fit three pills + connectors, stack vertically.
+       Hide connectors so the pills stack cleanly. */
+    #step-diagram {
+        flex-direction: column;
+        align-items: center;
+        gap: 24px;
+    }
+
+    #step-diagram .step-connector {
+        display: none;
+    }
+
+    #step-diagram .step {
+        width: 280px;
+        flex: 0 0 auto;
+    }
+}
+
+/* ---------- Step badge (small number inside a card tab) ------------------
+   Reinforces the diagram by anchoring each card to its step number. Once
+   a user scrolls past the diagram they can still see which step they're
+   on by looking at the card tab. */
+.step-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+    background: #2d3142 !important;
+    color: #ffffff !important;
+    border-radius: 50%;
+    font-family: 'Fredoka One', sans-serif;
+    font-size: 0.85rem;
+    line-height: 1;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+}
+
+.step-badge-inline {
+    background: var(--crayon-yellow);
+    color: var(--ink);
+    border: 2px solid var(--ink);
+    margin-right: 8px;
+}
+
+/* ---------- Step-3 hint above the Sing button ---------------------------
+   Sits right above the primary CTA so a non-power user sees a clear
+   "this is the next thing to do" line before the button itself. */
+.step-3-hint {
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 1.05rem;
+    color: var(--ink);
+    text-align: center;
+    margin: 18px 0 8px;
+    opacity: 0.9;
+}
+
+label>span,
+.gradio-container label>span:first-child {
+    font-family: 'Fredoka One', cursive !important;
+    font-size: 1.2rem !important;
+    color: var(--ink) !important;
+    font-weight: 400 !important;
+}
+
+input[type="text"],
+input[type="number"],
+textarea,
+select {
+    background: rgba(255, 255, 255, 0.6) !important;
+    border: 2.5px solid var(--ink) !important;
+    border-radius: 14px 18px 12px 16px !important;
+    color: var(--ink) !important;
+    font-family: 'Patrick Hand', sans-serif !important;
+    font-size: 1.15rem !important;
+    padding: 10px 14px !important;
+    box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.12);
+    transition: all 0.18s ease;
+}
+
+.dark-mode input[type="text"],
+.dark-mode input[type="number"],
+.dark-mode textarea,
+.dark-mode select,
+.dark-mode input {
+    background: var(--paper) !important;
+    color: var(--ink) !important;
+    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25) !important;
+}
+
+input[type="text"]:focus,
+textarea:focus,
+select:focus {
+    border-color: var(--crayon-blue) !important;
+    box-shadow: 4px 4px 0 var(--crayon-yellow);
+    outline: none;
+}
+
+/* Dropdown: style only the visible trigger input, leave the options panel
+   with Gradio defaults so it stays usable. */
+.gradio-dropdown input {
+    background: rgba(255, 255, 255, 0.6) !important;
+    border: 2.5px solid var(--ink) !important;
+    border-radius: 14px 18px 12px 16px !important;
+    color: var(--ink) !important;
+    font-family: 'Patrick Hand', sans-serif !important;
+    font-size: 1.15rem !important;
+    padding: 10px 14px !important;
+    box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.12);
+}
+
+.dark-mode .gradio-dropdown input {
+    background: rgba(30, 32, 64, 0.85) !important;
+    color: var(--ink) !important;
+}
+
+/* Make sure the options popup is on top and uses readable defaults */
+.gradio-dropdown ul,
+.gradio-dropdown [role="listbox"],
+ul.options {
+    background: #ffffff !important;
+    border: 2px solid var(--ink) !important;
+    border-radius: 8px !important;
+    font-family: 'Patrick Hand', sans-serif !important;
+    color: var(--ink) !important;
+    z-index: 9999 !important;
+    box-shadow: 4px 4px 0 rgba(45, 49, 66, 0.18);
+}
+
+.gradio-dropdown ul li,
+.gradio-dropdown [role="option"],
+ul.options li {
+    padding: 8px 14px !important;
+    font-family: 'Patrick Hand', sans-serif !important;
+    font-size: 1.05rem !important;
+    color: var(--ink) !important;
+    background: transparent !important;
+    cursor: pointer;
+}
+
+.gradio-dropdown ul li:hover,
+.gradio-dropdown [role="option"]:hover,
+ul.options li:hover {
+    background: var(--crayon-yellow) !important;
+}
+
+.dark-mode .gradio-dropdown ul,
+.dark-mode .gradio-dropdown [role="listbox"],
+.dark-mode ul.options {
+    color: var(--paper) !important;
+}
+
+.dark-mode .reset-button {
+    color: var(--ink) !important;
+}
+
+.dark-mode ul.options li,
+.dark-mode .gradio-dropdown ul li,
+.dark-mode .gradio-dropdown [role="option"] {
+    color: var(--paper) !important;
+}
+
+input[type="range"] {
+    accent-color: var(--crayon-red) !important;
+}
+
+.form-card {
+    background: var(--paper) !important;
+    border: 3px solid var(--ink) !important;
+    border-radius: 22px 18px 26px 16px !important;
+    padding: 28px !important;
+    box-shadow: 5px 5px 0 rgba(45, 49, 66, 0.08);
+    /* No transform here — it creates a stacking context that breaks
+       Gradio's fixed-position dropdown popup. */
+}
+
+.dark-mode .form-card {
+    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3) !important;
+}
+
+.dark-mode .form-card div {
+    background-color: var(--paper) !important;
+}
+
+.form-card-right {
+    background: var(--paper) !important;
+    border: 3px solid var(--ink) !important;
+    border-radius: 18px 24px 16px 22px !important;
+    padding: 28px !important;
+    box-shadow: 5px 5px 0 rgba(245, 200, 66, 0.25);
+}
+
+.dark-mode .form-card-right {
+    box-shadow: 5px 5px 0 rgba(245, 200, 66, 0.12) !important;
+}
+
+.dark-mode .form-card-right div {
+    background-color: var(--paper) !important;
+}
+
+/* ---- Drawing canvas card ----------------------------------------------- */
+/* Matches the form-card aesthetic: paper background, ink border, wobbly
+   corners that read as "drawn by hand". Sits above the form as the hero. */
+.draw-card {
+    background: var(--paper) !important;
+    border: 3px solid var(--ink) !important;
+    border-radius: 24px 16px 22px 18px !important;
+    padding: 24px 28px 18px !important;
+    box-shadow: 5px 5px 0 rgba(74, 144, 217, 0.18);
+    margin-bottom: 12px;
+}
+
+.dark-mode .draw-card {
+    box-shadow: 5px 5px 0 rgba(106, 171, 240, 0.12) !important;
+}
+
+.draw-card .card-heading {
+    margin-bottom: 4px;
+}
+
+.draw-hint {
+    font-family: 'Patrick Hand', sans-serif;
+    color: var(--ink);
+    opacity: 0.7;
+    font-size: 1.0rem;
+    margin: 0 0 14px 0;
+}
+
+/* ---------- Split draw card: canvas | upload ------------------------------
+   The draw card hosts two side-by-side image inputs so trackpad-allergic
+   users (i.e. small children) can upload a phone photo of a paper drawing
+   instead of trying to draw with a mouse. Soft vertical divider between
+   the two halves; on narrow viewports the columns stack and the divider
+   becomes a horizontal one. */
+#draw-row {
+    gap: 18px;
+    align-items: stretch;
+}
+
+.draw-half {
+    padding: 0 6px;
+    position: relative;
+    z-index: 2;
+    /* sit above background doodles */
+}
+
+/* Vertical divider between the two halves, drawn on the canvas-side's
+   right edge so it sits exactly between the two columns. */
+.draw-half-canvas {
+    border-right: 2px dashed rgba(45, 49, 66, 0.18);
+    padding-right: 18px;
+}
+
+.draw-half-upload {
+    padding-left: 6px;
+}
+
+/* Small label above each half so people immediately see "this side OR
+   that side." Same font as the hint, slightly bolder, slightly darker. */
+.draw-half-label {
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 1.05rem;
+    color: var(--ink);
+    opacity: 0.85;
+    margin: 0 0 8px;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+}
+
+/* The little caption under the upload widget, mirroring the canvas's
+   `.draw-hint` styling but scoped to the upload half. */
+.draw-half-hint {
+    font-family: 'Patrick Hand', sans-serif;
+    color: var(--ink);
+    opacity: 0.65;
+    font-size: 0.95rem;
+    margin: 8px 2px 0;
+    text-align: center;
+}
+
+/* Match the upload widget's idle look to the canvas surround so the two
+   halves feel like siblings. Gradio's default upload widget has a plain
+   white drop-zone — we soften that to the same warm taupe used for the
+   canvas surround. */
+.gradio-container #draw-upload {
+    background-color: transparent !important;
+    background-image: none !important;
+}
+
+.gradio-container #draw-upload .upload-container,
+.gradio-container #draw-upload .image-container {
+    border: 2px dashed rgba(45, 49, 66, 0.25) !important;
+    border-radius: 14px !important;
+    background-color: #fdfbf3 !important;
+}
+
+.dark-mode .gradio-container #draw-upload .upload-container,
+.dark-mode .gradio-container #draw-upload .image-container {
+    border: 2px dashed rgba(232, 228, 217, 0.25) !important;
+    background-color: var(--paper) !important;
+}
+
+/* When viewport gets narrow, stack the two halves vertically and convert
+   the vertical divider into a horizontal one so it still reads as a
+   "this OR that" separator. */
+@media (max-width: 760px) {
+    .draw-half-canvas {
+        border-right: none;
+        border-bottom: 2px dashed rgba(45, 49, 66, 0.18);
+        padding-right: 0;
+        padding-bottom: 18px;
+        margin-bottom: 6px;
+    }
+
+    .draw-half-upload {
+        padding-left: 0;
+    }
+}
+
+/* Tab-pill labels that sit ABOVE each card heading, classifying who the
+   section is for. Visually paired (same shape) but color-differentiated
+   (kid = playful crayon-yellow accent, grown-up = grounded ink) so the
+   two roles are recognisable at a glance. */
+.card-tab {
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 0.95rem;
+    font-weight: 400;
+    display: inline-block;
+    padding: 4px 14px;
+    border-radius: 12px 16px 14px 12px;
+    margin: 0 0 10px;
+    letter-spacing: 0.02em;
+    transform: rotate(-1.2deg);
+    border: 2px solid var(--ink);
+}
+
+.card-tab-kid {
+    background: #f4d8a0;
+    color: var(--ink);
+}
+
+.dark-mode .card-tab-kid {
+    color: var(--paper) !important;
+}
+
+/* Grown-up tab: soft crayon-blue wash — paired with yellow (the kid tab) as
+   a classic complementary crayon pair, calm enough to read as the more
+   sober adult-facing section. Solid border (the dashed border had it
+   visually colliding with the Clear-drawing button). */
+.card-tab-grownup {
+    background: rgba(74, 144, 217, 0.22) !important;
+    /* crayon-blue @ 22% */
+    color: var(--ink);
+}
+
+/* Subtitle under the form heading — explains what's required vs optional in
+   one breath, so the user isn't surprised by validation errors. Same
+   visual weight as .draw-hint so the two cards feel like siblings. */
+.form-role-hint {
+    font-family: 'Patrick Hand', sans-serif;
+    color: var(--ink);
+    opacity: 0.7;
+    font-size: 1.0rem;
+    margin: 0 0 14px 0;
+}
+
+/* The Sketchpad itself: give the inner canvas a creamy "paper" feel and
+   the surround a dashed-ink border so it sits inside our card. The actual
+   surround color is set lower in the taupe block below. */
+#draw-canvas .image-container,
+#draw-canvas canvas {
+    background: #fdfbf3 !important;
+    border-radius: 14px !important;
+}
+
+#draw-canvas {
+    border: 2.5px dashed var(--ink) !important;
+    border-radius: 14px !important;
+    overflow: hidden;
+}
+
+#draw-canvas canvas {
+    border: none !important;
+}
+
+/* Drawing canvas surround.
+   IDLE state: warm muted taupe — repainted via CSS-variable overrides
+   scoped to #draw-canvas (Gradio uses --block-background-fill and friends
+   to color component surrounds; overriding them recolors the idle wrapper
+   without fighting Sketchpad's active editor chrome).
+   ACTIVE editing state: Gradio's Sketchpad swaps in its own dark editor
+   surface using inline styles / different variables, which I'm accepting
+   as a constraint — fighting it produced more side effects than wins. */
+.gradio-container #draw-canvas {
+    --block-background-fill: #f3f1ec !important;
+    --background-fill-primary: #f3f1ec !important;
+    --background-fill-secondary: #f3f1ec !important;
+    --neutral-50: #f3f1ec !important;
+    --neutral-100: #f3f1ec !important;
+    background-color: #f3f1ec !important;
+    background-image: none !important;
+}
+
+.dark-mode .gradio-container #draw-canvas {
+    --block-background-fill: var(--paper) !important;
+    --background-fill-primary: var(--paper) !important;
+    --background-fill-secondary: var(--paper) !important;
+    --neutral-50: var(--paper) !important;
+    --neutral-100: var(--paper) !important;
+    background-color: var(--paper) !important;
+}
+
+/* Also paint direct child wrappers (Gradio's Sketchpad nests several divs;
+   any "inactive" surround inherits/uses these surfaces). The active editor
+   uses a deeper element with its own inline style that we no longer fight. */
+.gradio-container #draw-canvas>div,
+.gradio-container #draw-canvas .block,
+.gradio-container #draw-canvas .wrap,
+.gradio-container #draw-canvas .container {
+    background-color: #f3f1ec !important;
+    background-image: none !important;
+}
+
+.dark-mode .gradio-container #draw-canvas>div,
+.dark-mode .gradio-container #draw-canvas .block,
+.dark-mode .gradio-container #draw-canvas .wrap,
+.dark-mode .gradio-container #draw-canvas .container {
+    background-color: var(--paper) !important;
+}
+
+/* The inner <canvas> stays cream-white when idle (it's the "paper") */
+.gradio-container #draw-canvas canvas {
+    background-color: #fdfbf3 !important;
+    background-image: none !important;
+}
+
+.dark-mode .gradio-container #draw-canvas canvas {
+    background-color: #23264a !important;
+}
+
+/* The "Clear drawing" button — secondary visual weight; the primary CTA is
+   still "Sing with Lola" further down the page. */
+#reset-drawing-btn {
+    margin-top: 10px !important;
+    background: transparent !important;
+    border: 2px dashed var(--ink) !important;
+    color: var(--ink) !important;
+    font-family: 'Patrick Hand', sans-serif !important;
+    font-size: 1.0rem !important;
+    padding: 6px 16px !important;
+    border-radius: 12px !important;
+    box-shadow: none !important;
+    width: auto !important;
+    align-self: flex-start;
+}
+
+#reset-drawing-btn:hover {
+    background: rgba(45, 49, 66, 0.04) !important;
+}
+
+/* ---- "What Lola saw" hint ----------------------------------------------
+   Sits between the audio player and the lyrics. Reserves a CONSTANT amount
+   of vertical space whether or not it has content, so the layout never
+   reflows when content arrives (which was previously pushing the lyrics
+   down on the first generation and overlapping them mid-transition).
+   The visual chrome (background, border, padding) only renders when the
+   inner .saw-hint div exists; the outer container keeps its margin always. */
+#saw-hint {
+    margin: 4px 0 14px !important;
+    /* ALWAYS reserve this space */
+    min-height: 12px;
+    /* small constant gap when empty */
+}
+
+.saw-hint {
+    font-family: 'Patrick Hand', sans-serif;
+    color: var(--ink);
+    background: rgba(245, 200, 66, 0.10);
+    /* faint crayon-yellow */
+    border-left: 4px solid var(--crayon-yellow);
+    border-radius: 8px 12px 10px 8px;
+    padding: 10px 14px;
+    margin: 0;
+    /* margin lives on #saw-hint now */
+    font-size: 1.0rem;
+    line-height: 1.45;
+}
+
+.dark-mode .saw-label {
+    color: var(--ink) !important;
+}
+
+.saw-hint .saw-label {
+    font-weight: 700;
+    margin-right: 4px;
+}
+
+.saw-hint em {
+    font-style: italic;
+    color: var(--ink);
+    opacity: 0.85;
+}
+
+.saw-hint .saw-plus {
+    margin-left: 6px;
+    opacity: 0.75;
+    font-size: 0.95rem;
+}
+
+.saw-hint-empty {
+    background: rgba(74, 144, 217, 0.08);
+    /* faint crayon-blue */
+    border-left-color: var(--crayon-blue);
+    font-style: italic;
+}
+
+/* Instrument grid */
+.instr-grid {
+    display: grid !important;
+    grid-template-columns: repeat(4, 1fr) !important;
+    gap: 12px !important;
+    margin: 0 0 14px !important;
+}
+
+/* Gradio wraps every gr.HTML in a div with default margin; squash the gap
+   between the picker title and the instrument grid. */
+.form-card-left .gr-block:has(> .instr-grid),
+.form-card-left .gr-block:has(> #picker-hint) {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* Slider — Gradio's value bubble sits in a small box that can clip the
+   rounded border at the bottom. Give the wrapper extra padding so the
+   bubble's full outline shows, and force no overflow clipping on the
+   surrounding block. */
+.gr-slider,
+.gradio-slider,
+[data-testid="slider"] {
+    overflow: visible !important;
+    padding-bottom: 14px !important;
+}
+
+.gr-slider input[type="number"],
+.gradio-slider input[type="number"],
+[data-testid="slider"] input[type="number"] {
+    overflow: visible !important;
+}
+
+/* The bubble container itself */
+.gr-slider .wrap,
+.gradio-slider .wrap {
+    overflow: visible !important;
+}
+
+.instr-cell {
+    background: var(--paper) !important;
+    border: 2.5px solid var(--ink) !important;
+    border-radius: 16px 20px 14px 18px !important;
+    padding: 10px 6px 8px !important;
+    cursor: pointer;
+    box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.12);
+    transition: all 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 1rem;
+    color: var(--ink);
+}
+
+.dark-mode .instr-cell {
+    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3) !important;
+}
+
+.dark-mode .instr-cell span {
+    color: var(--ink) !important;
+}
+
+.instr-cell:hover {
+    transform: translate(-2px, -2px) rotate(-2deg);
+    box-shadow: 5px 5px 0 rgba(45, 49, 66, 0.18);
+}
+
+.instr-cell.selected {
+    background: var(--crayon-yellow) !important;
+    box-shadow: 3px 3px 0 var(--ink) !important;
+    transform: rotate(-1deg);
+}
+
+.instr-cell img {
+    width: 56px;
+    height: 56px;
+    object-fit: contain;
+    pointer-events: none;
+}
+
+.instr-cell span {
+    pointer-events: none;
+}
+
+/* The little "1" / "2" badge in the corner of selected cells — tells the
+   user which slot they've assigned the instrument to. */
+.instr-cell {
+    position: relative;
+}
+
+.slot-badge {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background: #2d3142 !important;
+    color: #ffffff !important;
+    font-family: 'Fredoka One', cursive;
+    font-size: 0.85rem;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 2px 2px 0 rgba(45, 49, 66, 0.25);
+    pointer-events: none;
+}
+
+#picker-hint {
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 0.95rem;
+    color: var(--crayon-blue);
+    margin: -2px 0 10px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    transition: background 0.25s ease, color 0.25s ease;
+    min-height: 0;
+}
+
+#picker-hint:empty {
+    margin: 0;
+    padding: 0;
+}
+
+#picker-hint.hint-flash {
+    background: var(--crayon-red);
+    color: #fff;
+    transform: rotate(-0.5deg);
+}
+
+#picker-hint.hint-error {
+    font-weight: 700;
+    box-shadow: 2px 2px 0 rgba(45, 49, 66, 0.2);
+}
+
+.section-title {
+    font-family: 'Fredoka One', cursive;
+    font-size: 1.4rem;
+    color: var(--ink);
+    margin: 18px 0 2px;
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+}
+
+.section-title .which {
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 1rem;
+    color: var(--crayon-blue);
+    font-style: italic;
+}
+
+button#generate-btn,
+.primary {
+    background: var(--crayon-red) !important;
+    color: #fffef7 !important;
+    border: 3px solid var(--ink) !important;
+    border-radius: 26px 18px 28px 22px !important;
+    font-family: 'Fredoka One', cursive !important;
+    font-size: 1.7rem !important;
+    font-weight: 400 !important;
+    padding: 18px 36px !important;
+    cursor: pointer;
+    box-shadow: 5px 5px 0 var(--ink);
+    transition: all 0.18s ease;
+    letter-spacing: 0.03em;
+    width: 100%;
+    margin-top: 16px;
+}
+
+button#generate-btn:hover {
+    transform: translate(-2px, -2px) rotate(-1deg);
+    box-shadow: 7px 7px 0 var(--ink);
+    background: var(--crayon-orange) !important;
+}
+
+button#generate-btn:active {
+    transform: translate(2px, 2px);
+    box-shadow: 2px 2px 0 var(--ink);
+}
+
+#output-lyrics textarea {
+    background:
+        linear-gradient(transparent 28px, rgba(74, 144, 217, 0.18) 28px, rgba(74, 144, 217, 0.18) 29px, transparent 29px) !important;
+    background-size: 100% 30px !important;
+    background-color: rgba(255, 255, 255, 0.7) !important;
+    font-family: 'Gloria Hallelujah', cursive !important;
+    font-size: 1.25rem !important;
+    line-height: 30px !important;
+    color: var(--ink) !important;
+    border: 2.5px solid var(--ink) !important;
+    border-radius: 16px 20px 14px 18px !important;
+    padding: 12px 18px !important;
+}
+
+.dark-mode #output-lyrics textarea {
+    background:
+        linear-gradient(transparent 28px, rgba(106, 171, 240, 0.15) 28px, rgba(106, 171, 240, 0.15) 29px, transparent 29px) !important;
+    background-size: 100% 30px !important;
+    background-color: rgba(30, 32, 64, 0.8) !important;
+}
+
+audio {
+    border-radius: 18px !important;
+    border: 2.5px solid var(--ink) !important;
+    background: var(--paper) !important;
+    box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.1);
+}
+
+.dark-mode audio {
+    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3) !important;
+}
+
+.attribution {
+    text-align: center;
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 0.85rem;
+    color: rgba(45, 49, 66, 0.55);
+    margin: 24px auto 16px;
+    padding: 12px;
+}
+
+.attribution a {
+    color: var(--crayon-blue);
+    text-decoration: none;
+    border-bottom: 1px dashed var(--crayon-blue);
+}
+
+/* Footer container — wraps the icon attribution and a professional credit
+   block. A subtle divider sits between them. */
+.footer {
+    text-align: center;
+    padding: 8px 12px 20px;
+}
+
+.footer .attribution {
+    padding: 6px 12px 14px;
+    border-bottom: 1px dashed rgba(45, 49, 66, 0.18);
+    margin-bottom: 12px;
+}
+
+/* Powered-by line — sits below the icon attribution. Small and quiet:
+   names the open-source models behind the app and gives judges one-click
+   access to each on the Hub. */
+.footer .powered-by {
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 0.92rem;
+    color: var(--ink);
+    opacity: 0.72;
+    letter-spacing: 0.01em;
+    padding: 0 0 4px;
+}
+
+.footer .powered-by a {
+    color: var(--ink);
+    text-decoration: none;
+    border-bottom: 1px dotted rgba(45, 49, 66, 0.45);
+    padding: 0 1px;
+    transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+.footer .powered-by a:hover {
+    color: var(--crayon-blue);
+    border-bottom-color: var(--crayon-blue);
+}
+
+footer {
+    display: none !important;
+}
+
+.gr-form {
+    gap: 14px !important;
+}
+
+/* Hide the state-holder textboxes — they're in the DOM only so JS can write to them */
+.pick-state {
+    display: none !important;
+}
+
+/* Card-level section headings (replaces inline gr.Markdown "###" usage) */
+.card-heading {
+    font-family: 'Fredoka One', cursive;
+    font-size: 1.5rem;
+    color: var(--ink);
+    margin: 4px 0 14px;
+    letter-spacing: 0.01em;
+}
+
+/* Advanced settings accordion */
+#advanced-accordion {
+    margin-top: 22px !important;
+    border: 2.5px dashed var(--ink) !important;
+    border-radius: 14px 18px 12px 16px !important;
+    background: rgba(255, 255, 255, 0.3) !important;
+    overflow: visible !important;
+}
+
+.dark-mode #advanced-accordion {
+    background: rgba(30, 32, 64, 0.5) !important;
+}
+
+#advanced-accordion>button,
+#advanced-accordion .label-wrap,
+#advanced-accordion summary {
+    font-family: 'Fredoka One', cursive !important;
+    font-size: 1.1rem !important;
+    color: var(--ink) !important;
+    padding: 10px 14px !important;
+}
+
+/* Inline error banner — appears under the form when validation fails */
+#error-banner {
+    margin-top: 12px;
+}
+
+.error-banner-inner {
+    background: #fde6e3;
+    border: 2.5px solid var(--crayon-red);
+    border-radius: 14px 18px 12px 16px;
+    color: #8a2a22;
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 1.1rem;
+    padding: 12px 16px;
+    box-shadow: 3px 3px 0 rgba(225, 90, 78, 0.25);
+    transform: rotate(-0.4deg);
+}
+
+.dark-mode .error-banner-inner {
+    background: #3a1a1a;
+    color: #f0a0a0;
+}
+
+/* ---------- Success banner (between heading and audio in lullaby card) ---
+   Sits between "Your lullaby" heading and the audio player. One-liner,
+   no emoji — quiet confirmation that generation completed. Friendly
+   green palette to mirror the error-banner's red, but smaller padding
+   and no rotation since it's an inline confirmation, not a celebration. */
+#success-banner {
+    margin: 4px 0 10px;
+}
+
+.success-banner-inner {
+    background: #e5f3dc;
+    border: 2.5px solid #6fb05e;
+    border-radius: 12px 16px 10px 14px;
+    color: #2f5a26;
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 1.05rem;
+    padding: 8px 14px;
+    text-align: center;
+    box-shadow: 2px 2px 0 rgba(111, 176, 94, 0.2);
+}
+
+.dark-mode .success-banner-inner {
+    background: #1a3020;
+    color: #90cc80;
+}
+
+/* Idle (pre-generation) variant — soft yellow "waiting" tone, no green
+   to avoid implying success before there's a song. Same shape as the
+   success state so the slot doesn't jump around when content changes. */
+.success-banner-idle {
+    background: rgba(245, 200, 66, 0.14);
+    /* whisper of crayon-yellow */
+    border: 2px dashed rgba(45, 49, 66, 0.40);
+    border-radius: 12px 16px 10px 14px;
+    color: var(--ink);
+    opacity: 0.78;
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 1.0rem;
+    padding: 8px 14px;
+    text-align: center;
+}
+
+/* ---------- "Both inputs" notice (in the draw card) ---------------------
+   Soft, low-key, informational tone. Not red/alarming because the user
+   didn't do anything wrong — we're just being transparent about which
+   input wins when both are present. */
+#both-inputs-notice {
+    margin: 14px 18px 0;
+}
+
+.both-inputs-inner {
+    background: rgba(245, 200, 66, 0.18);
+    /* whisper of crayon-yellow */
+    border: 2px dashed rgba(45, 49, 66, 0.45);
+    border-radius: 12px 16px 10px 14px;
+    color: var(--ink);
+    font-family: 'Patrick Hand', sans-serif;
+    font-size: 1.0rem;
+    padding: 10px 14px;
+    line-height: 1.4;
+}
+
+.both-inputs-inner .both-inputs-icon {
+    margin-right: 4px;
+    font-size: 1.1rem;
+}