Update.

app.py

@@ -215,8 +215,9 @@ with blocks:
 
             # Examples (kept inside a centered, 800px container)
             with gr.Group(elem_id="f1-examples", elem_classes=["f1-container"]):
+                # centered pill title
                 gr.HTML(
-                    '<div class="f1-tabs-body"><h3 class="f1-examples-title">Examples of FormulaOne problems</h3></div>'
+                    '<div class="f1-tabs-body"><div class="f1-examples-chip">Examples of FormulaOne problems</div></div>'
                 )
 
                 _latex = [
@@ -257,7 +258,7 @@ with blocks:
                     choices=["Warmup", "Tier 1", "Tier 2"],
                     value="Warmup",
                     label=None,
-                    show_label=False,  # hide the "Radio" caption
+                    show_label=False,  # hide caption
                     elem_id="f1-example-radio",
                 )
                 tab_radio.change(_select_example_tab, inputs=tab_radio, outputs=[md_warmup, md_tier1, md_tier2])

src/about.py

@@ -1,7 +1,7 @@
 # The paper's URL for linking
 PAPER_URL = "https://arxiv.org/abs/2507.13337"
 
-# Top chunk — self-contained (no dangling <main/>). Includes the clean "table" (via divs).
+# Top chunk — self-contained (div grid table).
 WHAT_IS_F1_HTML_TOP = f"""
 <div class="f1-container">
   <header class="text-center mb-12">
@@ -15,7 +15,7 @@ WHAT_IS_F1_HTML_TOP = f"""
 
     <p class="mb-4 f1-p"><strong>FormulaOne</strong> consists of 220 novel dynamic programming problems over graphs. The problems are organised into three categories, ranging from moderate difficulty and all the way up to research-level.</p>
 
-    <!-- Clean, centered "table" using divs -->
+    <!-- Clean, centered "table" using a single grid -->
     <div class="f1-grid-wrap" role="region" aria-label="FormulaOne categories">
       <div class="f1-grid-table" role="table">
         <div class="f1-grid-row f1-grid-head" role="row">
@@ -44,7 +44,7 @@ WHAT_IS_F1_HTML_TOP = f"""
 </div>
 """
 
-# Bottom chunk — self-contained, width-constrained.
+# Bottom chunk — width-constrained; em-dashes; corrected video; captions centered/dark; wording tweak.
 WHAT_IS_F1_HTML_BOTTOM = """
 <div class="f1-container">
   <section>
@@ -54,7 +54,6 @@ WHAT_IS_F1_HTML_BOTTOM = """
 
   <section>
     <h2 class="f1-h2">An “Infinite Well” of Problems</h2>
-    <!-- Example problem removed, per request -->
     <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.”
@@ -67,12 +66,12 @@ WHAT_IS_F1_HTML_BOTTOM = """
     <p class="mb-4 f1-p">An algorithm can then traverse this tree of bags, solving the problem piece by piece using dynamic programming. This process involves designing a “state” that summarises all necessary information about the partial solution within a bag, and then defining how this state transforms as vertices are introduced, forgotten, or bags are merged.</p>
     <figure class="f1-figure">
         <video class="w-full max-w-2xl mx-auto rounded-lg shadow-lg" autoplay loop muted playsinline>
-            <source src="/file=assets/dp_animation.mp4" type="video/mp4">
+            <source src="/file=assets/DominatingSetAnimation.mp4" type="video/mp4">
             Your browser does not support the video tag.
         </video>
         <figcaption class="f1-figcaption">Animation showing the design of a compressed dynamic programming state-space.</figcaption>
     </figure>
-    <p class="f1-p">The deceptive simplicity of the problem statements belies the <strong>extraordinary difficulty</strong> of discovering the correct dynamic programming solution. This process is riddled with subtle combinatorial and logical pitfalls, demanding a profound understanding of the problem’s underlying structure. For a detailed walkthrough of the fifteen interdependent reasoning steps required to solve a single hard problem --- <code>Maximal-Cluster-Graph</code> --- <a href="https://arxiv.org/pdf/2507.13337#appendix.A" target="_blank" rel="noopener noreferrer" class="f1-a">see the appendix of our paper</a>.</p>
+    <p class="f1-p">The deceptive simplicity of the problem statements belies the <strong>extraordinary difficulty</strong> of discovering the correct dynamic programming solution. This process is riddled with subtle combinatorial and logical pitfalls, demanding a profound understanding of the problem’s underlying structure. For a detailed walkthrough of the fifteen interdependent reasoning steps required to solve a single hard problem &mdash; <code>Maximal-Cluster-Graph</code> &mdash; <a href="https://arxiv.org/pdf/2507.13337#appendix.A" target="_blank" rel="noopener noreferrer" class="f1-a">see the appendix of our paper</a>.</p>
   </section>
 
   <section id="evaluation">
@@ -87,7 +86,6 @@ WHAT_IS_F1_HTML_BOTTOM = """
     <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.</p>
 
-    <!-- Same level as Evaluation -->
     <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>
     <figure class="f1-figure">
@@ -96,8 +94,8 @@ WHAT_IS_F1_HTML_BOTTOM = """
     </figure>
     <p class="mb-4 f1-p">However, as the reasoning depth increases in <strong>Tier 1</strong>, and solutions require the discovery and integration of novel and more complex state representations, model performance drops off sharply.</p>
     <figure class="f1-figure">
-        <img src="/file=assets/tier1_performance.png" alt="Plot showing model performance on FormulaOne Tier 1" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
-        <figcaption class="f1-figcaption">Figure 1: Performance of frontier reasoning models on the FormulaOne dataset.</figcaption>
+        <img src="/file=assets/tier1_performance.png" alt="Plot showing model performance on Tier 1" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
+        <figcaption class="f1-figcaption">Performance of frontier reasoning models on the FormulaOne dataset.</figcaption>
     </figure>
     <p class="f1-p">This trend culminates in <strong>Tier 2</strong>, where the difficulty is characteristic of exploratory research problems. On this set of 20 problems, no current frontier model solves even a single one. This result starkly illustrates the gap that remains between high performance on existing benchmarks and the deep algorithmic reasoning required for truly complex problems.</p>
   </section>

src/display/css_html_js.py

@@ -10,23 +10,21 @@ custom_css = """
 /* Readable width everywhere */
 .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; }  /* keep the whole tab narrow */
-#f1-examples { max-width: 800px; margin: 0 auto; }                        /* ensure examples stay narrow */
+#what-is-tab { max-width: 800px; margin-left: auto; margin-right: auto; }
+#f1-examples { max-width: 800px; margin: 0 auto; }
 
-/* Paragraphs: nice wrapping */
+/* Body text */
 .f1-p, .f1-li {
   line-height: 1.75;
   color: #374151;
-  text-align: left;
   text-wrap: pretty;
   overflow-wrap: break-word;
   hyphens: auto;
-  word-break: normal;
 }
 
 /* Headings */
 .f1-h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; color: var(--f1-text); text-align: center; margin-bottom: 1.25rem !important; }
-.f1-h2 { /* smaller section headings */
+.f1-h2 {
   font-weight: 700;
   border-bottom: 1px solid var(--f1-border);
   padding-bottom: 0.45rem;
@@ -41,69 +39,83 @@ custom_css = """
 .f1-a { color: #2563eb; text-decoration: none; font-weight: 500; }
 .f1-a:hover { text-decoration: underline; }
 
-/* Blockquote & problem name */
-.f1-blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; margin-left: 0; font-style: italic; color: #4b5563; }
+/* Blockquote, captions, problem name */
+.f1-blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; font-style: italic; color: #4b5563; }
+.f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #111827; text-align: center; }  /* centered + very dark */
 .f1-problem-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; text-align: center; }
 
-/* ===== Clean "table" using divs (centered, not full width, borders all around) ===== */
+/* ===== Clean "table" using a single grid (equal column widths across rows) ===== */
 .f1-grid-wrap { text-align: center; margin: 10px auto 8px auto; }
 .f1-grid-table {
-  display: inline-block;                         /* center by shrink-to-fit */
-  border-top: 1px solid var(--f1-border);
-  border-left: 1px solid var(--f1-border);
-  border-right: 1px solid var(--f1-border);      /* add right border */
-  border-bottom: 1px solid var(--f1-border);     /* add bottom border */
+  display: grid;                        /* one grid for all rows */
+  grid-template-columns: 1fr 1fr 1fr;   /* equal column widths */
+  border: 1px solid var(--f1-border);   /* full border */
   background: var(--f1-bg);
   border-radius: 8px;
   overflow: hidden;
 }
-.f1-grid-row { display: grid; grid-template-columns: auto auto 1fr; align-items: start; }
-.f1-grid-row + .f1-grid-row { border-top: 1px solid var(--f1-border); } /* horizontal separators */
-.f1-grid-cell { padding: 10px 14px; text-align: left; }
-.f1-grid-head .f1-grid-cell { font-weight: 600; text-align: center; }   /* centered headers */
-.f1-grid-row .f1-grid-cell + .f1-grid-cell { border-left: 1px solid var(--f1-border); }
+.f1-grid-row { display: contents; }     /* rows don’t reset column widths */
+.f1-grid-cell {
+  padding: 10px 14px;
+  text-align: left;
+  border-left: 1px solid var(--f1-border);
+  border-top: 1px solid var(--f1-border);
+}
+.f1-grid-cell:nth-child(3n+1) { border-left: none; } /* first col cells: no left border */
+.f1-grid-head .f1-grid-cell {
+  font-weight: 600;
+  text-align: center;
+}
+.f1-grid-head .f1-grid-cell { border-top: none; }    /* top border only on body rows */
 
-/* ===== Examples card (restore nice look, fix width, unify background, center title) ===== */
+/* ===== Examples card: background, centered pill heading, pretty pills ===== */
 #f1-examples {
-  background: var(--f1-bg-muted);                /* match problem box bg */
+  background: var(--f1-bg-muted);               /* #f9fafb */
   border: 1px solid var(--f1-border);
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.04);
   margin-bottom: 12px;
 }
-#f1-examples .f1-examples-title {
+.f1-tabs-body { padding-top: 12px; text-align: center; }
+.f1-examples-chip {
+  display: inline-block;
+  background: #e5e7eb;                          /* slightly darker gray pill */
+  color: #111827;
+  padding: 6px 12px;
+  border-radius: 999px;
   font-weight: 700;
-  margin: 12px 14px 8px 14px;
-  color: var(--f1-text);
-  font-size: 1.1rem;
-  text-align: center;                             /* center heading */
 }
 
 /* Problem content: consistent background + padding */
 #f1-examples .f1-problem-markdown .markdown {
-  background: var(--f1-bg-muted);                 /* same as container */
+  background: var(--f1-bg-muted);
   border: 1px solid var(--f1-border);
   border-radius: 8px;
-  padding: 18px;                                   /* ensure inner padding */
-  margin: 0 14px 8px 14px;
+  padding: 18px;
+  margin: 10px 14px 8px 14px;
 }
 
-/* Bottom "tabs" using Radio -> show only pills (hide inputs), no "Radio" label */
+/* Bottom "tabs" using Radio -> show only pills (hide inputs) */
 #f1-example-radio { border-top: 1px solid var(--f1-border); padding: 8px 10px 10px 10px; margin: 0 8px 8px; }
-#f1-example-radio input[type="radio"] { display: none; }                 /* hide the radio bullet */
+#f1-example-radio input[type="radio"] { display: none; }
 #f1-example-radio .wrap { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
-#f1-example-radio label { border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer; background: #fff; }
-#f1-example-radio label:hover { background: #f3f4f6; }
-#f1-example-radio input[type="radio"]:checked + span {
-  background: #e5e7eb;                             /* subtle active pill */
+#f1-example-radio label {
   border: 1px solid var(--f1-border);
   border-radius: 999px;
   padding: 6px 12px;
+  cursor: pointer;
+  background: #f3f4f6;                           /* light gray for inactive pills */
+}
+#f1-example-radio input[type="radio"]:checked + span {
+  background: #e5e7eb;                           /* selected pill slightly darker */
+  border-color: var(--f1-border);
+  border-radius: 999px;
+  padding: 6px 12px;
 }
 
 /* Leaderboard: center the whole tab and apply requested nesting/min-width rule with .column/.row */
-#formulaone-leaderboard-tab-table { max-width: 1200px; margin-left: auto; margin-right: auto; }  /* center */
-#formulaone-leaderboard-tab-table .column .row .column { min-width: 80% !important; }            /* exact chain rule */
+#formulaone-leaderboard-tab-table { max-width: 1200px; margin-left: auto; margin-right: auto; }
+#formulaone-leaderboard-tab-table .column .row .column { min-width: 80% !important; }  /* exact chain rule */
 #formulaone-leaderboard-tab-table .row, #formulaone-leaderboard-tab-table .column { width: 100% !important; max-width: 100% !important; }
 #formulaone-leaderboard-tab-table [data-testid="dropdown"], #formulaone-leaderboard-tab-table input[type="text"] { width: 100% !important; }