Updates.

app.py

@@ -10,10 +10,15 @@ from huggingface_hub import whoami
 from src.about import WHAT_IS_F1_HTML_AFTER_TIER1FIG_TAIL  # tail after Tier1 fig
 from src.about import WHAT_IS_F1_HTML_AFTER_VIDEO  # text immediately after the video
 from src.about import WHAT_IS_F1_HTML_AFTER_WARMUPFIG  # text between warmup/tier1 figs
-from src.about import WHAT_IS_F1_HTML_BOTTOM_A  # up to before first figure
-from src.about import WHAT_IS_F1_HTML_BOTTOM_B  # after first figure, before video
+from src.about import WHAT_IS_F1_HTML_BOTTOM_A_AFTER_TABS  # text after the heading, before the first figure
+from src.about import WHAT_IS_F1_HTML_BOTTOM_A_BEFORE_TABS  # up to (and including) the "Infinite Well" heading
 from src.about import WHAT_IS_F1_HTML_EVAL_BEFORE_WARMUPFIG  # evaluation section up to before Warmup fig
-from src.about import CITATION_BUTTON_LABEL, CITATION_BUTTON_TEXT, EVALUATION_QUEUE_TEXT, WHAT_IS_F1_HTML_TOP
+from src.about import (  # ⬅️ split to insert the tabs right after the heading
+    CITATION_BUTTON_LABEL,
+    CITATION_BUTTON_TEXT,
+    EVALUATION_QUEUE_TEXT,
+    WHAT_IS_F1_HTML_TOP,
+)
 from src.datamodel.data import F1Data
 from src.display.css_html_js import custom_css
 from src.display.formatting import styled_error
@@ -213,7 +218,11 @@ with blocks:
             # Top content and categories table
             gr.HTML(WHAT_IS_F1_HTML_TOP)
 
-            # Examples (centered; inner width 730px via CSS)
+            # ---- Bottom content pieces interleaved with real Gradio media ----
+            # Up to and including the "An Infinite Well" heading
+            gr.HTML(WHAT_IS_F1_HTML_BOTTOM_A_BEFORE_TABS)
+
+            # ===== Examples (now right after the “Infinite Well” heading; inner width 710px via CSS) =====
             with gr.Group(elem_id="f1-examples", elem_classes=["f1-container"]):
                 gr.HTML(
                     '<div class="f1-tabs-body"><div class="f1-examples-chip">Examples of FormulaOne problems</div></div>'
@@ -262,8 +271,8 @@ with blocks:
                 )
                 tab_radio.change(_select_example_tab, inputs=tab_radio, outputs=[md_warmup, md_tier1, md_tier2])
 
-            # Bottom content pieces interleaved with real Gradio media
-            gr.HTML(WHAT_IS_F1_HTML_BOTTOM_A)
+            # Continue the text after the heading (before the first figure)
+            gr.HTML(WHAT_IS_F1_HTML_BOTTOM_A_AFTER_TABS)
 
             # Figure 1: bag_modifications.png (use gr.Image)
             gr.Image(

src/about.py

@@ -45,8 +45,8 @@ WHAT_IS_F1_HTML_TOP = f"""
 
 # Bottom is split so we can insert real Gradio media (images/video) from app.py.
 
-# Up to before the first figure (bag_modifications.png)
-WHAT_IS_F1_HTML_BOTTOM_A = """
+# Up to (and including) the "An Infinite Well" heading — tabs are inserted immediately after
+WHAT_IS_F1_HTML_BOTTOM_A_BEFORE_TABS = """
 <div class="f1-container">
   <section>
     <p class="mb-4 f1-p">The latter category is incredibly demanding, requiring resolution of many points of uncertainty, and involving an array of reasoning steps, including topological and geometric insight, knowledge of mathematical domains such as extremal graph theory and logic, combinatorial considerations, precise implementation, and more.</p>
@@ -55,6 +55,10 @@ WHAT_IS_F1_HTML_BOTTOM_A = """
 
   <section>
     <h2 class="f1-h2">An “Infinite Well” of Problems</h2>
+"""
+
+# After the heading (and after the tabbed examples), before the first figure
+WHAT_IS_F1_HTML_BOTTOM_A_AFTER_TABS = """
     <p class="mb-4 f1-p">While the problems are often natural to state, their solutions are far from obvious. The solvability of this vast class of problems is guaranteed by an algorithmic <strong>meta-theorem</strong> due to <a href="https://en.wikipedia.org/wiki/Courcelle%27s_theorem" target="_blank" rel="noopener noreferrer" class="f1-a">Courcelle</a>, which broadly states:</p>
     <blockquote class="my-6 f1-blockquote">
         “For every sufficiently tree-like graph, any problem definable in an expressive formal logic — Monadic Second-Order (MSO) logic — can be solved by a dynamic programming algorithm that operates in time linear in the order of the graph.”
@@ -76,7 +80,7 @@ WHAT_IS_F1_HTML_AFTER_VIDEO = """
 
   <section id="evaluation">
     <h2 class="f1-h2">Evaluation</h2>
-    <p class="mb-4 f1-p">To give models the best possible chance of success, we provide a generous few-shot prompt that covers a broad array of the ideas and techniques involved in solving these problems. All models were evaluated using their highest available reasoning settings and with the maximum context length permitted.</p>
+    <p class="mb-4 f1-p">All models were evaluated using their highest available reasoning settings and with the maximum context length permitted. To give models the best possible chance of success, we provide a generous few-shot prompt that covers a broad array of the ideas and techniques involved in solving these problems.</p>
     <p class="mb-4 f1-p">Each submitted solution is subjected to a rigorous and automated <a href="https://arxiv.org/pdf/2507.13337#section.4" target="_blank" rel="noopener noreferrer" class="f1-a">test suite</a> that measures three key aspects of its validity:</p>
     <ul class="list-disc list-inside space-y-2 mb-6">
         <li class="f1-li"><strong>Correctness:</strong> The output of the submitted algorithm must be correct on all graphs.</li>
@@ -84,14 +88,13 @@ WHAT_IS_F1_HTML_AFTER_VIDEO = """
         <li class="f1-li"><strong>Efficiency:</strong> The solution must be truly <a href="https://en.wikipedia.org/wiki/Parameterized_complexity" target="_blank" rel="noopener noreferrer" class="f1-a">fixed-parameter linear</a>.</li>
     </ul>
     <p class="mb-4 f1-p">To support research and encourage community contributions, the <code>FormulaOne-Warmup</code> dataset is released as a public resource for training and fine-tuning models. The complete test suite for all 100 Warmup problems is available, alongside a standalone evaluation environment, in our <a href="https://github.com/double-ai/formulaone-dataset/tree/main" target="_blank" rel="noopener noreferrer" class="f1-a">GitHub repository</a>.</p>
-    <p class="f1-p">To maintain the integrity of the core benchmark, only a minimal subset of tests is released for the Tier 1 and Tier 2 problems. Any solutions submitted for evaluation against our benchmark are evaluated against the comprehensive withheld test-suite.</p>
+    <p class="f1-p">To maintain the integrity of the core benchmark, only a minimal subset of tests is released for the Tier 1 and Tier 2 problems. Solutions submitted for evaluation on our benchmark are evaluated against a withheld comprehensive test-suite.</p>
 """
 
-# *** THIS WAS MISSING BEFORE ***
 # Evaluation: begins the "Model Accuracy" subsection and the Warmup paragraph, up to (but not including) the Warmup figure.
 WHAT_IS_F1_HTML_EVAL_BEFORE_WARMUPFIG = """
     <h2 class="f1-h2">Model Accuracy</h2>
-    <p class="mb-4 f1-p">On the <strong>FormulaOne-Warmup</strong> problems, frontier models perform reasonably well. This confirms they have a foundational capability for these types of algorithmic tasks.</p>
+    <p class="mb-4 f1-p">On the <strong>FormulaOne-Warmup</strong> problems, frontier models perform reasonably well. This confirms they have a foundational capability for these types of algorithmic tasks, in other words, the tasks are squarely in-distribution.</p>
     <!-- warmup_performance figure inserted via gr.Image in app.py -->
 """
 

src/display/css_html_js.py

@@ -15,7 +15,8 @@ custom_css = """
 .f1-container { max-width: 800px; margin: 0 auto; padding: 0 16px; }
 .markdown-text { font-size: 16px !important; max-width: 800px; margin: 0 auto; }
 #what-is-tab { max-width: 800px; margin-left: auto; margin-right: auto; }
-#f1-examples { max-width: 730px; margin: 0 auto; } /* requested 730px */
+/* requested 710px */
+#f1-examples { max-width: 710px; margin: 0 auto; }
 
 /* Text */
 .f1-p, .f1-li { line-height: 1.75; color: #374151; text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }
@@ -29,20 +30,20 @@ custom_css = """
 .f1-a:hover { text-decoration: underline; }
 
 /* Captions (centered + dark) */
-.f1-figcaption { margin-top: 8px; font-size: 0.875rem; color: #111827; text-align: center; }
-.f1-figcaption-video { margin-top: 6px; } /* a bit tighter under the video */
+.f1-figcaption { margin-top: 4px; font-size: 0.875rem; color: #111827; text-align: center; }
+.f1-figcaption-video { margin-top: 2px; } /* tighter under the video */
 
 /* Problem name — force center from first render; code bg color #f9fafb */
-#f1-examples .f1-problem-markdown .markdown p { text-align: center !important; margin: 0 0 8px 0; }
+#f1-examples .f1-problem-markdown .markdown p:first-child { text-align: center !important; margin: 0 0 8px 0; }
 .f1-problem-markdown p code,
-#f1-examples .f1-problem-markdown .markdown p code {
-  display: inline-block; background: #f9fafb !important; padding: 2px 8px; border-radius: 6px;
+#f1-examples .f1-problem-markdown .markdown p:first-child code {
+  display: inline-block; background: #f9fafb !important; padding: 2px 8px; border-radius: 6px; margin-left: auto; margin-right: auto;
 }
 
 .f1-problem-markdown > * { margin-top: 7px; margin-bottom: 7px; }
 
-/* Problem body: padding + line-height inside Markdown + small space before tabs */
-#f1-examples .f1-problem-markdown .markdown { background: var(--f1-bg-muted); border: 1px solid var(--f1-border); border-radius: 8px; padding: 18px; margin: 10px 14px 10px 14px; line-height: 1.75; }
+/* Problem body: padding + comfortable line-height inside Markdown + small space before tabs */
+#f1-examples .f1-problem-markdown .markdown { background: var(--f1-bg-muted); border: 1px solid var(--f1-border); border-radius: 8px; padding: 18px; margin: 10px 14px 10px 14px; line-height: 1.8; }
 #f1-examples .f1-problem-markdown .markdown p { margin: 0.35rem 0; }
 
 /* Pills (Radio) — compact spacing at bottom */