Use HTML sections for Space layout so custom styling applies

app.py

@@ -705,7 +705,7 @@ def load_example(example_name: str):
 
 
 with gr.Blocks(title="BioAssayAlign Compatibility Explorer", analytics_enabled=False, css=CSS, theme=THEME) as demo:
-    gr.Markdown(
+    gr.HTML(
         """
 <div id="hero">
   <div class="hero-grid">
@@ -732,7 +732,7 @@ with gr.Blocks(title="BioAssayAlign Compatibility Explorer", analytics_enabled=F
 
     with gr.Row():
         with gr.Column(scale=5):
-            gr.Markdown(
+            gr.HTML(
                 """
 <div class="panel-note">
 Use structured assay fields when possible. Missing fields are allowed, but species, readout, format, and target metadata usually improve ranking quality.
@@ -740,7 +740,7 @@ Use structured assay fields when possible. Missing fields are allowed, but speci
 """
             )
         with gr.Column(scale=4):
-            gr.Markdown(
+            gr.HTML(
                 f"""
 <div class="metric-strip">
   <div class="metric-card"><span>Default model</span><strong>{MODEL_REPO_ID}</strong></div>
@@ -750,7 +750,7 @@ Use structured assay fields when possible. Missing fields are allowed, but speci
 """
             )
 
-    gr.Markdown(
+    gr.HTML(
         """
 <div class="guide-grid">
   <div class="guide-card"><strong>1. Describe the assay</strong>Use normal lab language. Add UniProt, readout, format, and organism when known.</div>
@@ -763,7 +763,7 @@ Use structured assay fields when possible. Missing fields are allowed, but speci
     with gr.Tab("Rank Compounds"):
         with gr.Row(elem_classes="workspace"):
             with gr.Column(scale=6, elem_classes="pane"):
-                gr.Markdown(
+                gr.HTML(
                     """
 <div class="pane-header">
   <div>
@@ -780,7 +780,7 @@ Use structured assay fields when possible. Missing fields are allowed, but speci
 """
                 )
                 example_name = gr.Dropdown(choices=list(EXAMPLES.keys()), value="JAK2 cell assay", label="Live example")
-                gr.Markdown("<div class='examples-note'>Examples run against the live model. They are not screenshots or mocked outputs.</div>")
+                gr.HTML("<div class='examples-note'>Examples run against the live model. They are not screenshots or mocked outputs.</div>")
                 load_example_btn = gr.Button("Load live example", variant="secondary")
                 assay_title = gr.Textbox(label="Assay title")
                 description = gr.Textbox(label="Description", lines=6, placeholder="Describe the assay in practical lab language.")
@@ -793,7 +793,7 @@ Use structured assay fields when possible. Missing fields are allowed, but speci
                 target_uniprot = gr.Textbox(label="Target UniProt IDs", placeholder="Q06187, P52333")
 
             with gr.Column(scale=5, elem_classes="pane"):
-                gr.Markdown(
+                gr.HTML(
                     """
 <div class="pane-header">
   <div>
@@ -811,12 +811,12 @@ Use structured assay fields when possible. Missing fields are allowed, but speci
                 )
                 upload_file = gr.File(label="Upload CSV / TXT / SMI", file_count="single", file_types=[".csv", ".txt", ".smi", ".smiles"])
                 top_k = gr.Slider(label="Top-K rows to display", minimum=5, maximum=200, step=5, value=DEFAULT_TOP_K)
-                gr.Markdown("<div class='section-note'>Tip: prefer parent or neutralized molecules, one SMILES per row, and avoid obvious salts or malformed fragments.</div>")
+                gr.HTML("<div class='section-note'>Tip: prefer parent or neutralized molecules, one SMILES per row, and avoid obvious salts or malformed fragments.</div>")
                 with gr.Row(elem_classes="action-row"):
                     run_btn = gr.Button("Run ranking", variant="primary")
                     clear_btn = gr.ClearButton(value="Clear inputs", components=[assay_title, description, organism, readout, assay_format, assay_type, target_uniprot, smiles_text, upload_file])
 
-        gr.Markdown(
+        gr.HTML(
             """
 <div class="summary-shell">
   <div class="pane-header">
@@ -852,42 +852,24 @@ Use structured assay fields when possible. Missing fields are allowed, but speci
         )
 
     with gr.Tab("How To Use This"):
-        gr.Markdown(
+        gr.HTML(
             """
-### Recommended workflow
-
-1. Describe the assay in plain scientific language.
-2. Add metadata if you know it: organism, readout, format, assay type, target UniProt.
-3. Paste a candidate list or upload a CSV with a `smiles` column.
-4. Run ranking and inspect the top band first.
-
-### How to read the result table
-
-- **priority** is the first thing to read:
-  - `Screen first`
-  - `Worth a look`
-  - `Middle pack`
-  - `Low priority`
-- **relative_score_100** rescales the submitted list so the strongest candidate is near `100` and the weakest is near `0`.
-- **model_score** is the raw internal ranking score. It behaves like a logit-like utility value, not a probability.
-- If you need a normalized shortlist view, treat the model score as a list-relative ranking signal and rescale within your submitted list.
-- **mol_wt / logp / tpsa** are quick chemistry context columns so you can sanity-check what the model surfaced.
-
-### Good input habits
-
-- Prefer parent, neutralized, chemically sensible SMILES.
-- Keep assay descriptions concrete.
-- If the assay is target-defined, add the UniProt ID.
-- If you upload a CSV, use one SMILES per row in a column named `smiles` or `canonical_smiles`.
-
-### What this Space is not
-
-- not a generative chemistry tool
-- not a medicinal chemistry oracle
-- not a wet-lab substitute
-
-<div class="footer-note">
-This interface is tuned for clarity over breadth. If you need a larger ranking workflow, use the downloadable CSV as the handoff into your own screening or modeling pipeline.
+<div class="summary-shell">
+  <div class="pane-header">
+    <div>
+      <div class="pane-kicker">Practical guidance</div>
+      <div class="pane-title">How to use this interface well</div>
+    </div>
+  </div>
+  <div class="explain-grid">
+    <div class="explain-card"><strong>Write the assay like a scientist</strong>Use concrete descriptions, not keywords alone. If the assay is target-defined, add UniProt.</div>
+    <div class="explain-card"><strong>Use clean candidate input</strong>Prefer parent or neutralized molecules. Upload a CSV with a <code>smiles</code> column if you have a larger list.</div>
+    <div class="explain-card"><strong>Interpret results as triage</strong>Use priority and relative score first. Treat the raw model score as an internal ranking value, not a probability.</div>
+  </div>
+  <div class="footer-note" style="margin-top: 1rem;">
+    This Space is tuned for shortlist ranking. It is not a generative chemistry tool, not a medicinal chemistry oracle, and not a wet-lab substitute.
+    If you need a larger workflow, export the CSV and pass the ranked list into your own screening pipeline.
+  </div>
 </div>
 """
         )