Mobile responsive layout (≤768px and ≤480px breakpoints)

- Tag the main controls/outputs row with elem_classes='ovc-main'
so we can target it specifically.
- At ≤768px: collapse the two-column layout into a single stacked
column (controls then outputs); shrink hero h1 (2.7rem → 2.05rem),
tagline, by-line chip, link pills, and description pills; tighten
pipeline-flow strip and hide its '›' arrows so the six steps wrap
naturally; reduce card padding; cap the visualization video at
280px tall; trim Run button to 48px.
- At ≤480px: shrink hero further (h1 1.7rem), trim links and step
chips a notch, drop Run button to 46px.

No JS changes; pure CSS.

app.py

@@ -1091,6 +1091,64 @@ CUSTOM_CSS = """
     margin-top: 4px;
     font-weight: 600;
 }
+
+/* ─── Mobile / narrow viewport adjustments ─────────────────────────── */
+@media (max-width: 768px) {
+    .gradio-container { padding: 6px !important; }
+
+    /* Force the controls/outputs row to stack vertically on phones */
+    .gradio-container .ovc-main {
+        flex-direction: column !important;
+        gap: 12px !important;
+    }
+    .gradio-container .ovc-main > div {
+        width: 100% !important;
+        min-width: 0 !important;
+        max-width: 100% !important;
+        flex: 1 1 100% !important;
+    }
+
+    /* Hero scales down */
+    #ovc-hero { padding: 28px 14px 16px; border-radius: 16px; margin-bottom: 12px; }
+    #ovc-hero h1 { font-size: 2.05rem; letter-spacing: -0.02em; }
+    #ovc-hero p.tagline { font-size: 0.96rem; line-height: 1.5; margin-bottom: 12px; }
+    #ovc-hero .by-line { font-size: 0.72rem; padding: 2px 9px; }
+    .ovc-links { gap: 6px; margin-top: 10px; }
+    .ovc-links a { font-size: 0.78rem; padding: 5px 10px; }
+    #ovc-hero .pills { gap: 5px; }
+    #ovc-hero .pill { font-size: 0.72rem; padding: 4px 9px; }
+
+    /* Pipeline flow: tight wrap, drop arrows */
+    #ovc-flow { padding: 10px 12px; gap: 5px; margin-bottom: 12px; }
+    #ovc-flow .step { font-size: 0.74rem; padding: 4px 10px; }
+    #ovc-flow .arrow { display: none; }
+
+    /* Cards tighter */
+    .ovc-card { padding: 12px 14px !important; border-radius: 14px !important; }
+    .ovc-card h3 { font-size: 0.70rem !important; margin-bottom: 8px !important; }
+
+    /* Run button */
+    #ovc-run button { height: 48px !important; font-size: 0.98rem !important; }
+
+    /* Stats tile sizing */
+    .ovc-stats { grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 8px; }
+    .ovc-stat { padding: 10px 12px; }
+    .ovc-stat .value { font-size: 1.25rem; }
+    .ovc-stat .label { font-size: 0.68rem; }
+
+    /* Outputs: shorter video so it does not dominate the screen */
+    .ovc-card video { max-height: 280px !important; }
+}
+
+@media (max-width: 480px) {
+    #ovc-hero { padding: 22px 12px 14px; }
+    #ovc-hero h1 { font-size: 1.7rem; }
+    #ovc-hero p.tagline { font-size: 0.9rem; }
+    /* Put each link on a row of two (browsers will pack 2 per row at this size) */
+    .ovc-links a { font-size: 0.74rem; padding: 4px 9px; }
+    #ovc-flow .step { font-size: 0.70rem; padding: 3px 8px; }
+    #ovc-run button { height: 46px !important; font-size: 0.94rem !important; }
+}
 """
 
 THEME = gr.themes.Soft(
@@ -1178,7 +1236,7 @@ with gr.Blocks(**_BLOCK_KW) as demo:
     gr.HTML(HERO_HTML)
     gr.HTML(FLOW_HTML)
 
-    with gr.Row(equal_height=False):
+    with gr.Row(equal_height=False, elem_classes="ovc-main"):
         # ─── Controls (narrow column) ────────────────────────────────────
         with gr.Column(scale=4, min_width=320):
             with gr.Group(elem_classes="ovc-card"):