Gradio: fix invisible header and body text on HF dark embed.

- Single HTML hero so styling is not split across Column DOM.
- Force light prose/heading colors; fix .sde-section-title (was dark ink on dark bg).
- Container default text color for theme gaps; link and caption tweaks.

Made-with: Cursor

server/gradio_ui.py

@@ -69,8 +69,38 @@ GRADIO_CSS = """
     radial-gradient(120% 140% at 0% 0%, rgba(45, 212, 191, 0.22) 0%, rgba(45, 212, 191, 0) 52%),
     radial-gradient(120% 140% at 100% 0%, rgba(147, 197, 253, 0.22) 0%, rgba(147, 197, 253, 0) 55%),
     linear-gradient(132deg, #0f172a 0%, #1e293b 45%, #0f766e 100%);
+  /* HF Space embed is often dark; keep prose readable (theme alone used near-black on black). */
+  --sde-body-text: #e2e8f0;
+  --sde-heading-text: #f8fafc;
+}
+.gradio-container {
+  max-width: 1180px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  color: #e2e8f0 !important;
+}
+/* Gradio 5 + HF: markdown / prose defaults can match a dark shell and disappear */
+.gradio-container .prose,
+.gradio-container .prose p,
+.gradio-container .prose li,
+.gradio-container .prose td,
+.gradio-container .prose th {
+  color: var(--sde-body-text) !important;
+}
+.gradio-container .prose h1,
+.gradio-container .prose h2,
+.gradio-container .prose h3,
+.gradio-container .prose h4,
+.gradio-container .prose strong {
+  color: var(--sde-heading-text) !important;
+}
+.gradio-container .prose a {
+  color: #7dd3fc !important;
+}
+.gradio-container .prose code {
+  color: #fef3c7 !important;
+  background: rgba(15, 23, 42, 0.55) !important;
 }
-.gradio-container { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; }
 .sde-hero-wrap {
   background: var(--sde-glow);
   color: #f8fafc;
@@ -80,34 +110,22 @@ GRADIO_CSS = """
   border: 1px solid rgba(148, 163, 184, 0.24);
   box-shadow: 0 18px 40px rgba(15, 23, 42, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
-/* Gradio 5 theme/prose can override colors; keep hero readable. */
-.sde-hero-wrap h1,
-.sde-hero-wrap .sde-hero-title,
-.sde-hero-wrap .prose,
-.sde-hero-wrap .prose p,
-.sde-hero-wrap .prose h1,
-.sde-hero-wrap .markdown,
-.sde-hero-wrap .markdown p {
-  color: #f8fafc !important;
-}
-.sde-hero-wrap h1,
 .sde-hero-wrap .sde-hero-title {
   margin: 0 0 0.35rem 0;
   font-size: 1.85rem;
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.2;
+  color: #f8fafc !important;
 }
-.sde-hero-wrap p,
-.sde-hero-wrap .prose p {
-  margin: 0;
+.sde-hero-wrap .sde-hero-lede {
+  margin: 0 0 0.5rem 0;
   color: #e2e8f0 !important;
   font-size: 0.95rem;
-  line-height: 1.5;
+  line-height: 1.55;
 }
-.sde-hero-subnav { margin-bottom: 0.75rem; opacity: 0.95; }
-.sde-hero-wrap .sde-hero-subnav a,
-.sde-hero-wrap .sde-hero-subnav .prose a {
+.sde-hero-subnav { margin-bottom: 0.75rem; font-size: 0.88rem; }
+.sde-hero-wrap .sde-hero-subnav a {
   color: #a5f3fc !important;
   font-weight: 600;
 }
@@ -127,12 +145,16 @@ GRADIO_CSS = """
 .sde-section-title {
   font-size: 1.05rem;
   font-weight: 700;
-  color: var(--sde-ink);
+  color: var(--sde-heading-text) !important;
   margin: 1.5rem 0 0.75rem 0;
   letter-spacing: -0.02em;
 }
+.sde-muted-caption {
+  color: #94a3b8 !important;
+  font-size: 0.9rem;
+}
 .sde-link-row a {
-  color: #2563eb !important;
+  color: #7dd3fc !important;
   font-weight: 600;
   margin-right: 1rem;
 }
@@ -397,24 +419,25 @@ def build_blocks(static_dir: Path) -> Any:
         theme=theme,
         css=GRADIO_CSS,
     ) as demo:
-        with gr.Column(elem_classes=["sde-hero-wrap"]):
-            gr.Markdown(
-                "[HTML demo (main Space page)](/demo) · [OpenEnv API](/docs)",
-                elem_classes=["sde-hero-subnav"],
-            )
-            gr.Markdown(
-                "# SQL Debug Environment\n\n"
-                "OpenEnv-compliant SQL repair · live SQLite rewards · TRL / GRPO training on this same Space. "
-                "One page: benchmarks, artifacts, architecture, and a live playground."
-            )
-            gr.Markdown(
-                '<div class="sde-pill-row">'
-                '<span class="sde-pill">OpenEnv</span>'
-                '<span class="sde-pill">FastAPI</span>'
-                '<span class="sde-pill">Gradio</span>'
-                '<span class="sde-pill">TRL · GRPO</span>'
-                "</div>"
-            )
+        gr.HTML(
+            """
+<div class="sde-hero-wrap">
+  <div class="sde-hero-subnav">
+    <a href="/demo">HTML demo (main Space page)</a> · <a href="/docs">OpenEnv API</a>
+  </div>
+  <div class="sde-hero-title">SQL Debug Environment</div>
+  <p class="sde-hero-lede">OpenEnv-compliant SQL repair · live SQLite rewards · TRL / GRPO training on this same Space.
+     One page: benchmarks, artifacts, architecture, and a live playground.</p>
+  <div class="sde-pill-row">
+    <span class="sde-pill">OpenEnv</span>
+    <span class="sde-pill">FastAPI</span>
+    <span class="sde-pill">Gradio</span>
+    <span class="sde-pill">TRL · GRPO</span>
+  </div>
+</div>
+            """.strip(),
+            elem_id="sde-hero",
+        )
 
         gr.Markdown(
             "### First context: training proof first\n"
@@ -554,7 +577,7 @@ def build_blocks(static_dir: Path) -> Any:
 
         gr.Markdown(
             '<p class="sde-section-title">Training run charts (repo static)</p>'
-            "<span style='color:#64748b;font-size:0.9rem'>Training plots from real runs. Regenerate with `presentation_graphs.py`; commit PNGs under `server/static/`.</span>"
+            '<span class="sde-muted-caption">Training plots from real runs. Regenerate with `presentation_graphs.py`; commit PNGs under `server/static/`.</span>'
         )
         with gr.Row():
             if proof_combo: