Update.

app.py

@@ -214,7 +214,7 @@ with blocks:
             gr.HTML(WHAT_IS_F1_HTML_TOP)
 
             # Examples (kept inside a centered, 800px container)
-            with gr.Group(elem_id="f1-examples"):
+            with gr.Group(elem_id="f1-examples", elem_classes=["f1-container"]):
                 gr.HTML(
                     '<div class="f1-tabs-body"><h3 class="f1-examples-title">Examples of FormulaOne problems</h3></div>'
                 )
@@ -257,6 +257,7 @@ with blocks:
                     choices=["Warmup", "Tier 1", "Tier 2"],
                     value="Warmup",
                     label=None,
+                    show_label=False,  # hide the "Radio" 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

@@ -72,7 +72,7 @@ WHAT_IS_F1_HTML_BOTTOM = """
         </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 – <strong>Maximal-Cluster-Graph</strong> – <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 --- <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>
   </section>
 
   <section id="evaluation">
@@ -87,7 +87,7 @@ 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>
 
-    <!-- Make "Model Accuracy" same level as Evaluation -->
+    <!-- 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">

src/display/css_html_js.py

@@ -45,47 +45,66 @@ custom_css = """
 .f1-blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; margin-left: 0; font-style: italic; color: #4b5563; }
 .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, only top & left borders) ===== */
+/* ===== Clean "table" using divs (centered, not full width, borders all around) ===== */
 .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 */
   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: 8px 12px; text-align: left; }
+.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); }
 
-/* ===== Examples card (look like the nicer previous version) ===== */
-#f1-examples { border: 1px solid var(--f1-border); border-radius: 10px; background: var(--f1-bg); box-shadow: 0 1px 2px rgba(0,0,0,0.04); margin-bottom: 12px; }
-#f1-examples .f1-examples-title { font-weight: 700; margin: 12px 14px 4px 14px; color: var(--f1-text); font-size: 1.1rem; }
+/* ===== Examples card (restore nice look, fix width, unify background, center title) ===== */
+#f1-examples {
+  background: var(--f1-bg-muted);                /* match problem box bg */
+  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 {
+  font-weight: 700;
+  margin: 12px 14px 8px 14px;
+  color: var(--f1-text);
+  font-size: 1.1rem;
+  text-align: center;                             /* center heading */
+}
 
-/* Problem content: consistent, subtle background */
+/* Problem content: consistent background + padding */
 #f1-examples .f1-problem-markdown .markdown {
-  background: var(--f1-bg-muted);
+  background: var(--f1-bg-muted);                 /* same as container */
   border: 1px solid var(--f1-border);
   border-radius: 8px;
-  padding: 16px;
-  margin: 0 14px 6px 14px;
+  padding: 18px;                                   /* ensure inner padding */
+  margin: 0 14px 8px 14px;
 }
 
-/* Bottom "tabs" using Radio, styled as quiet pills aligned to the bottom edge */
-#f1-example-radio { border-top: 1px solid var(--f1-border); padding: 6px 8px 8px 8px; margin: 0 6px 6px; }
-#f1-example-radio .wrap { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
-#f1-example-radio label { border: 1px solid transparent; border-radius: 999px; padding: 6px 10px; cursor: pointer; }
+/* Bottom "tabs" using Radio -> show only pills (hide inputs), no "Radio" label */
+#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 .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: var(--f1-bg-muted);
+  background: #e5e7eb;                             /* subtle active pill */
   border: 1px solid var(--f1-border);
   border-radius: 999px;
-  padding: 6px 10px;
+  padding: 6px 12px;
 }
 
-/* Leaderboard: center the whole tab and satisfy the nesting/min-width rule */
-#formulaone-leaderboard-tab-table { max-width: 1200px; margin-left: auto; margin-right: auto; }  /* center (8) */
-#formulaone-leaderboard-tab-table .gr-column .gr-row .gr-column { min-width: 80% !important; }   /* (7) exact chain rule */
-#formulaone-leaderboard-tab-table .gr-row, #formulaone-leaderboard-tab-table .gr-column { width: 100% !important; max-width: 100% !important; }
+/* 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 .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; }
 
 /* Login button: force light */