Fix contrast (dark text + deep accents), single-line hero title, YouTube above demo, centered intros, robust video autoplay

_style.css

@@ -6,25 +6,60 @@
    ============================================================================ */
 
 :root {
-  --ink:        #1d1b2e;   /* near-black ink, body text */
-  --ink-soft:   #4a4660;   /* muted body */
-  --ink-faint:  #6e6a85;   /* captions */
-  --bolt:       #ffcb05;   /* Pikachu electric yellow (accent only) */
-  --bolt-deep:  #f6a700;   /* deeper amber for borders */
-  --spark:      #2a6df4;   /* electric blue accent */
+  --ink:        #20242e;   /* dark body text (high contrast on cream) */
+  --ink-soft:   #353a47;   /* secondary body — still clearly dark */
+  --ink-faint:  #4a5160;   /* captions — darkened, no longer washed out */
+  --accent:     #b45309;   /* DEEP amber — emphasis, MORE visible than body */
+  --accent-2:   #3730a3;   /* deep indigo — secondary emphasis */
+  --bolt:       #f6a700;   /* electric amber (decorative accents/borders) */
+  --bolt-deep:  #b45309;   /* deep amber for borders/highlights */
+  --spark:      #3730a3;   /* deep indigo link/accent */
   --surface:    #fbfaf6;   /* warm off-white page */
   --card:       #ffffff;   /* card surface */
-  --card-edge:  #ece8df;   /* hairline */
-  --shadow:     0 10px 30px rgba(40, 32, 8, 0.10);
-  --shadow-sm:  0 4px 14px rgba(40, 32, 8, 0.08);
+  --card-edge:  #e2ddd0;   /* hairline */
+  --shadow:     0 10px 30px rgba(40, 32, 8, 0.12);
+  --shadow-sm:  0 4px 14px rgba(40, 32, 8, 0.09);
   --radius:     20px;
 }
 
+/* Force a light surface even if the visitor's Gradio theme is dark. */
+:root, .dark, .gradio-container.dark {
+  --body-background-fill: var(--surface) !important;
+  --background-fill-primary: var(--surface) !important;
+  --body-text-color: #20242e !important;
+  --body-text-color-subdued: #4a5160 !important;
+  color-scheme: light !important;
+}
+
+/* ============================================================================
+   HARD CONTRAST OVERRIDES — Gradio's theme cascade washes text out on the live
+   Space (custom-property colors get re-resolved). Pin every text run to a dark
+   color with !important so nothing is "only readable when highlighted".
+   ============================================================================ */
+#pet-app, #pet-app * { color: #20242e; }
+#pet-app p, #pet-app li, #pet-app td, #pet-app .hero-sub,
+#pet-app .section-head p, #pet-app .talk-hint, #pet-app .emotion .desc,
+#pet-app .stack-table td, #pet-app .stack-table th { color: #353a47 !important; }
+#pet-app h1, #pet-app h2, #pet-app h3, #pet-app .name,
+#pet-app .stack-table td:first-child { color: #20242e !important; }
+/* Emphasis must be MORE visible than body, never less */
+#pet-app b, #pet-app strong, #pet-app .prose b, #pet-app .prose li b,
+#pet-app .prose p b, #pet-app .lede b { color: #92400e !important; font-weight: 700; }
+#pet-app .hero-sub b { color: #20242e !important; }
+#pet-app code { color: #92400e !important; background: #f3ede2 !important; }
+#pet-app .chip { color: #20242e !important; }
+#pet-app .eyebrow, #pet-app .eyebrow * { color: #20242e !important; }
+#pet-app .chip.local, #pet-app .chip.local * { color: #ffffff !important; }
+#pet-app .btn-dark, #pet-app .btn-dark * { color: #ffffff !important; }
+#pet-app .foot, #pet-app .foot * { color: #4a5160 !important; }
+#pet-app .foot a { color: #3730a3 !important; }
+
 /* Page surface — soft cream with a faint sunny glow at the top, NOT flat yellow.
    Transparent sprite + alpha videos read cleanly on this. */
+html, body,
 .gradio-container,
 .gradio-container .main,
-body {
+.gradio-container.dark {
   background:
     radial-gradient(1100px 520px at 50% -8%, #fff4cf 0%, rgba(255,244,207,0) 60%),
     radial-gradient(900px 600px at 88% 8%, #eef4ff 0%, rgba(238,244,255,0) 55%),
@@ -72,14 +107,15 @@ body {
 .hero-center { text-align: center; }
 .eyebrow {
   display: inline-flex; align-items: center; gap: 7px;
-  background: #fff;
-  border: 1.5px solid var(--card-edge);
-  color: var(--ink-soft);
-  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em;
+  background: #fff4d6;                 /* warm tinted pill for contrast */
+  border: 1.5px solid #f0c64e;
+  color: #6b3d06 !important;          /* deep amber text — clearly legible */
+  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em;
   text-transform: uppercase;
   padding: 6px 14px; border-radius: 999px;
   box-shadow: var(--shadow-sm);
 }
+.eyebrow, .eyebrow * { color: #6b3d06 !important; }
 .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.18); }
 
 /* Sprite-sheet animation — 12 frames in a 6144x512 strip, ~10 fps.
@@ -108,9 +144,10 @@ body {
 @keyframes shadow-pulse { 0%,100% { transform: scaleX(1); opacity:.7;} 50%{ transform: scaleX(.82); opacity:.45;} }
 
 .hero-title {
-  font-size: clamp(2.3rem, 5vw, 3.3rem) !important;
-  line-height: 1.02;
+  font-size: clamp(1.9rem, 4.6vw, 3rem) !important;
+  line-height: 1.05;
   margin: 6px 0 8px !important;
+  white-space: nowrap;            /* keep "⚡ Pocket Pikachu" on ONE line */
 }
 .hero-title .zap { color: var(--bolt-deep); }
 .hero-sub {
@@ -136,9 +173,10 @@ body {
    SECTION SCAFFOLD
    ========================================================================= */
 .section { margin: 34px 0 0; }
-.section-head { text-align: center; margin-bottom: 18px; }
+.section-head { text-align: center !important; margin-bottom: 18px; }
+.section-head * { text-align: center !important; }
 .section-head h2 { font-size: 1.7rem !important; margin: 0 0 6px !important; }
-.section-head p { color: var(--ink-faint) !important; font-size: 0.98rem; margin: 0; max-width: 600px; margin-inline: auto; }
+.section-head p { color: #4a5160 !important; font-size: 0.98rem; margin: 0 auto; max-width: 620px; }
 
 .card {
   background: var(--card); border: 1px solid var(--card-edge);

app.py

@@ -376,9 +376,13 @@ def sprite_html(src: str) -> str:
 
 
 def _alpha_video(webm: str, mp4: str, side_class: str, label: str) -> str:
+    # autoplay+muted+playsinline so it loops silently; preload=auto + an onloadeddata
+    # play() nudge so it starts even if the browser defers autoplay during load.
     return (
         f"<video class='hero-vid {side_class}' autoplay loop muted playsinline "
-        f"aria-label='{label}'>"
+        f"preload='auto' aria-label='{label}' "
+        "onloadeddata='this.play().catch(function(){});' "
+        "oncanplay='this.play().catch(function(){});'>"
         f"<source src='{_file_url(webm)}' type='video/webm'>"
         f"<source src='{_file_url(mp4)}' type='video/mp4'>"
         "</video>"
@@ -640,6 +644,9 @@ def build_app() -> gr.Blocks:
             gr.HTML(WHAT_HTML)
             gr.HTML(emotion_html())
 
+            # Watch the demo first, then try it live.
+            gr.HTML(youtube_html())
+
             # -------- Live demo (keeps the working voice/chat loop) --------
             gr.HTML(
                 "<section class='section' id='demo'>"
@@ -664,7 +671,6 @@ def build_app() -> gr.Blocks:
                 with gr.Row():
                     checkin_btn = gr.Button("☀️ Daily check-in", elem_classes="talk-btn")
 
-            gr.HTML(youtube_html())
             gr.HTML(STACK_HTML)
             gr.HTML(FIELD_NOTES_HTML)
             gr.HTML(LEARNINGS_HTML)