Update app.py

app.py

@@ -734,8 +734,7 @@ CSS = """
     align-items: flex-end;
     gap: 32px;
     flex-wrap: wrap;
-    border-bottom: 4px solid var(--ink);
-    padding-bottom: 18px;
+    padding-bottom: 8px;
 }
 #hero h1 {
     font-family: __TITLE_FAMILY__;
@@ -831,6 +830,20 @@ CSS = """
 .gradio-container .padded, .gradio-container .block { padding: 10px !important; }
 .gradio-container .block { border-color: var(--hairline) !important; }
 
+/* Control image dropzone — icon only, no instruction text */
+#control-image .wrap {
+    font-size: 0 !important;
+    line-height: 0 !important;
+    gap: 0 !important;
+}
+#control-image .wrap .or { display: none !important; }
+#control-image .wrap svg { width: 28px !important; height: 28px !important; }
+
+/* Compact output blocks (download + preview) */
+#otf-file { max-height: 84px !important; overflow: hidden; }
+#otf-file .unpadded_box, #otf-file .empty { min-height: 56px !important; height: 56px !important; }
+#preview-img .unpadded_box, #preview-img .empty { min-height: 96px !important; }
+
 /* Status line */
 .status-line { min-height: 22px; }
 .status-line p {
@@ -892,7 +905,7 @@ with gr.Blocks(title="Typotopia", theme=THEME, css=CSS) as demo:
                 placeholder="e.g. a bold geometric sans inspired by brutalist concrete signage",
                 lines=2,
             )
-            control_image = gr.Image(label="Control image (optional)", type="pil", height=140)
+            control_image = gr.Image(label="Control image (optional)", type="pil", height=140, elem_id="control-image")
             with gr.Row():
                 seed = gr.Number(label="Seed", value=0, precision=0)
                 random_seed = gr.Checkbox(label="Random seed", value=True)
@@ -900,8 +913,8 @@ with gr.Blocks(title="Typotopia", theme=THEME, css=CSS) as demo:
         with gr.Column(scale=1):
             gr.HTML("<p class='eyebrow'><span class='idx'>02</span>Specimen</p>")
             status = gr.HTML(elem_classes=["status-line"])
-            otf_file = gr.File(label="Download .otf", height=80)
-            preview = gr.Image(label="Preview", type="pil", height=160)
+            otf_file = gr.File(label="Download .otf", height=56, elem_id="otf-file")
+            preview = gr.Image(label="Preview", type="pil", height=110, elem_id="preview-img")
             gallery = gr.Gallery(label="Generated grids", columns=3, height=150, object_fit="contain")
 
     btn.click(