Updates.

app.py

@@ -6,7 +6,13 @@ from apscheduler.schedulers.background import BackgroundScheduler
 from gradio_leaderboard import Leaderboard, SelectColumns
 from huggingface_hub import whoami
 
-from src.about import CITATION_BUTTON_LABEL, CITATION_BUTTON_TEXT, EVALUATION_QUEUE_TEXT, WHAT_IS_F1_HTML
+from src.about import (
+    CITATION_BUTTON_LABEL,
+    CITATION_BUTTON_TEXT,
+    EVALUATION_QUEUE_TEXT,
+    WHAT_IS_F1_HTML_BOTTOM,
+    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
@@ -184,6 +190,16 @@ def get_theme():
     return "light"
 
 
+# --- Gradio-based tabs for examples (no JS in HTML) ---
+def _select_example_tab(choice: str):
+    return (
+        gr.update(visible=(choice == "Warmup")),
+        gr.update(visible=(choice == "Tier 1")),
+        gr.update(visible=(choice == "Tier 2")),
+    )
+
+
+# Force light theme even if HF user prefers dark
 blocks = gr.Blocks(
     css=custom_css,
     theme=get_theme(),
@@ -193,7 +209,56 @@ with blocks:
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("What is FormulaOne", id=0):
-            gr.HTML(WHAT_IS_F1_HTML)
+            # Top content up to (but not including) the Examples and the 'latter category' paragraph
+            gr.HTML(WHAT_IS_F1_HTML_TOP)
+
+            # Examples of FormulaOne problems (LaTeX via Markdown; bottom 'tabs' via Radio)
+            with gr.Group(elem_id="f1-examples"):
+                gr.HTML(
+                    '<div class="f1-tabs-body"><h3 class="f1-examples-title">Examples of FormulaOne problems</h3></div>'
+                )
+
+                _latex = [
+                    {"left": "$$", "right": "$$", "display": True},
+                    {"left": "$", "right": "$", "display": False},
+                    {"left": "\\(", "right": "\\)", "display": False},
+                    {"left": "\\[", "right": "\\]", "display": True},
+                ]
+
+                md_warmup = gr.Markdown(
+                    value=(
+                        '<p class="f1-problem-name"><code>Union-of-Paths-and-Cycles</code></p>\n'
+                        "Given a tree-like graph $G=(V,E)$ and a weight function $w:V\\to\\mathbb{N}$, compute the sum of all weights of sets $S\\subseteq V$ such that the induced subgraph $G[S]$ is a disjoint union of paths and cycles."
+                    ),
+                    latex_delimiters=_latex,
+                )
+                md_tier1 = gr.Markdown(
+                    value=(
+                        '<p class="f1-problem-name"><code>Maximal-Union-of-Paths-and-Cycles</code></p>\n'
+                        "Given a tree-like graph $G=(V,E)$ and a weight function $w:V\\to\\mathbb{N}$, compute the sum of all weights of sets $S\\subseteq V$ such that $G[S]$ is a disjoint union of paths and cycles and $S$ is maximal with respect to this property."
+                    ),
+                    visible=False,
+                    latex_delimiters=_latex,
+                )
+                md_tier2 = gr.Markdown(
+                    value=(
+                        '<p class="f1-problem-name"><code>Maximal-Union-of-Cycles</code></p>\n'
+                        "Given a tree-like graph $G=(V,E)$ and a weight function $w:V\\to\\mathbb{N}$, compute the sum of all weights of sets $S\\subseteq V$ such that $G[S]$ is a disjoint union of cycles and $S$ is maximal with respect to this property."
+                    ),
+                    visible=False,
+                    latex_delimiters=_latex,
+                )
+
+                tab_radio = gr.Radio(
+                    choices=["Warmup", "Tier 1", "Tier 2"],
+                    value="Warmup",
+                    label=None,
+                    elem_id="f1-example-radio",
+                )
+                tab_radio.change(_select_example_tab, inputs=tab_radio, outputs=[md_warmup, md_tier1, md_tier2])
+
+            # Bottom content: the 'latter category' paragraph and all following sections
+            gr.HTML(WHAT_IS_F1_HTML_BOTTOM)
 
         # (5) Rename tab to "Leaderboard"
         with gr.TabItem("Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=1):

src/about.py

@@ -1,256 +1,118 @@
-# The paper's URL for linking
-PAPER_URL = "https://arxiv.org/abs/2507.13337"
-
-WHAT_IS_F1_HTML = f"""
-<!DOCTYPE html>
-<html lang="en">
-<body>
-    <main class="f1-container">
-        <header class="text-center mb-12">
-            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 f1-h1">FormulaOne</h1>
-        </header>
-
-        <section>
-            <p class="text-lg mb-4 f1-p">Frontier AI models have recently demonstrated strong performance on mathematical and algorithmic benchmarks, including earning <a href="https://deepmind.google/discover/blog/advanced-version-of-gemini-with-deep-think-officially-achieves-gold-medal-standard-at-the-international-mathematical-olympiad/" target="_blank" rel="noopener noreferrer" class="f1-a">gold medals in olympiads</a>, and attaining <a href="https://arxiv.org/html/2502.06807v1" target="_blank" rel="noopener noreferrer" class="f1-a">top percentile ratings</a> in competitive programming contests. How well do such benchmarks capture the true depth of algorithmic reasoning, as it arises in real-world research problems?</p>
-
-            <p class="text-lg mb-4 f1-p">We believe that existing benchmarks fail to capture the deep reasoning skills required for complex, research-level algorithmic problems. To address this gap, <a href="{PAPER_URL}" target="_blank" rel="noopener noreferrer" class="f1-a">we introduce <strong>FormulaOne</strong></a>.</p>
-
-            <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 -->
-            <div class="f1-table-wrap">
-                <table class="f1-table" aria-label="FormulaOne categories">
-                    <thead>
-                        <tr>
-                            <th>Category</th>
-                            <th>Size</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>Warmup</td>
-                            <td>100</td>
-                            <td>A set of “easier” problems.</td>
-                        </tr>
-                        <tr>
-                            <td>Tier 1</td>
-                            <td>100</td>
-                            <td>A set of challenging problems.</td>
-                        </tr>
-                        <tr>
-                            <td>Tier 2</td>
-                            <td>20</td>
-                            <td>A set of highly challenging problems.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <!-- Compact bottom tabs -->
-            <div class="mt-6 f1-tabs" id="f1-examples">
-                <div class="f1-tabs-body">
-                    <h3 class="text-xl font-semibold mb-2" style="color:#111827;">Examples of FormulaOne problems</h3>
-
-                    <div class="problem-panel" id="panel-warmup">
-                        <div class="f1-problem-box">
-                            <p class="f1-problem-name">Union-of-Paths-and-Cycles</p>
-                            <p class="mb-2 f1-p">Given a tree-like graph $G=(V,E)$, compute the sum of all weights of sets $S\\subseteq V$ such that the induced subgraph $G[S]$ is a disjoint union of paths and cycles.</p>
-                        </div>
-                    </div>
-
-                    <div class="problem-panel" id="panel-tier1" style="display:none;">
-                        <div class="f1-problem-box">
-                            <p class="f1-problem-name">Maximal-Union-of-Paths-and-Cycles</p>
-                            <p class="mb-2 f1-p">Given a tree-like graph $G=(V,E)$, compute the sum of all weights of sets $S\\subseteq V$ such that $G[S]$ is a disjoint union of paths and cycles and $S$ is maximal with respect to this property.</p>
-                        </div>
-                    </div>
-
-                    <div class="problem-panel" id="panel-tier2" style="display:none;">
-                        <div class="f1-problem-box">
-                            <p class="f1-problem-name">Maximal-Union-of-Cycles</p>
-                            <p class="mb-2 f1-p">Given a tree-like graph $G=(V,E)$, compute the sum of all weights of sets $S\\subseteq V$ such that $G[S]$ is a disjoint union of cycles and $S$ is maximal with respect to this property.</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="f1-tabs-buttons" role="tablist" aria-label="Example tiers">
-                    <button class="f1-tab-btn" id="tab-warmup" role="tab" aria-controls="panel-warmup" aria-selected="true">Warmup</button>
-                    <button class="f1-tab-btn" id="tab-tier1" role="tab" aria-controls="panel-tier1" aria-selected="false">Tier 1</button>
-                    <button class="f1-tab-btn" id="tab-tier2" role="tab" aria-controls="panel-tier2" aria-selected="false">Tier 2</button>
-                </div>
-            </div>
-
-            <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>
-
-            <p class="f1-p">Despite <a href="https://epoch.ai/frontiermath" target="_blank" rel="noopener noreferrer" class="f1-a">impressive</a> <a href="https://artificialanalysis.ai/evaluations/gpqa-diamond" target="_blank" rel="noopener noreferrer" class="f1-a">performance</a> on existing benchmarks, presently <strong>no model solves even a single FormulaOne Tier 2 problem</strong>.<sup><a href="#evaluation" class="f1-a">1</a></sup></p>
-        </section>
-
-        <section>
-            <h2 class="text-3xl font-bold text-gray-900 f1-h2">An “Infinite Well” of Problems</h2>
-
-            <div class="f1-problem-box">
-                <p class="mb-2 f1-p"><strong>Input:</strong> A tree-like graph $G=(V,E)$, a tree decomposition $\\mathcal{{T}}$ of $G$, and a weight function $w: V \\to \\mathbb{{N}}$.</p>
-                <p class="mb-2 f1-p"><strong>Goal:</strong> Compute the sum of all weights of sets $S \\subseteq V$ such that the induced subgraph $G[S]$ contains no cycle of length four.</p>
-                <p class="text-sm f1-p" style="color:#6b7280;"><strong>Notation:</strong> The weight of a set $S$ is defined as $w(S) \\triangleq \\sum_{{v\\in S}} w(v)$. Return the final result modulo $10^9+7$.</p>
-            </div>
-
-            <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.”
-            </blockquote>
-
-            <p class="f1-p">The key is to use a structure known as a tree decomposition, which organises the graph’s vertices into a series of overlapping sets, or “bags”, that are themselves arranged in a tree.</p>
-
-            <figure class="f1-figure">
-                <img src="/file=assets/bag_modifications.png" alt="An illustration of local modifications to bags (dashed boxes)" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
-                <figcaption class="f1-figcaption">An illustration of local modifications to bags: Introduce, Forget, and Join.</figcaption>
-            </figure>
-
-            <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">
-                    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 – <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>
-        </section>
-
-        <section id="evaluation">
-            <h2 class="text-3xl font-bold text-gray-900 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">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>
-                <li class="f1-li"><strong>Consistency:</strong> The solution must produce the same output for a given graph, regardless of the specific structure of its tree decomposition.</li>
-                <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.</p>
-
-            <h3 class="text-2xl font-bold text-gray-900 mt-8 mb-4">Model Accuracy</h3>
-
-            <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">
-                <img src="/file=assets/warmup_performance.png" alt="Plot showing model performance on FormulaOne-Warmup" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
-                <figcaption class="f1-figcaption">Performance of frontier models on the FormulaOne-Warmup dataset.</figcaption>
-            </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>
-            </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>
-    </main>
-
-    <!-- MathJax config FIRST (escaped {{ }}) -->
-    <script>
-      window.MathJax = {{
-        tex: {{ inlineMath: [['$', '$'], ['\\\\(', '\\\\)']] }},
-        options: {{ skipHtmlTags: ['script','noscript','style','textarea','pre','code'] }}
-      }};
-    </script>
-    <!-- Then load MathJax -->
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-
-    <!-- Tabs JS: works + re-typesets -->
-    <script>
-        setTimeout(() => {{
-            const tabs = [
-                {{ button: document.getElementById('tab-warmup'), panel: document.getElementById('panel-warmup') }},
-                {{ button: document.getElementById('tab-tier1'),  panel: document.getElementById('panel-tier1')  }},
-                {{ button: document.getElementById('tab-tier2'),  panel: document.getElementById('panel-tier2')  }}
-            ];
-
-            function selectTab(idx) {{
-                tabs.forEach((t, i) => {{
-                    const sel = (i === idx);
-                    if (!t.button || !t.panel) return;
-                    t.button.setAttribute('aria-selected', sel ? 'true' : 'false');
-                    t.panel.style.display = sel ? '' : 'none';
-                }});
-                if (window.MathJax && window.MathJax.typesetPromise) {{
-                    window.MathJax.typesetPromise();
-                }}
-            }}
-
-            tabs.forEach((t, i) => {{
-                if (t.button) t.button.addEventListener('click', () => selectTab(i));
-            }});
-
-            selectTab(0);
-        }}, 120);
-    </script>
-</body>
-</html>
-"""
-
-EVALUATION_QUEUE_TEXT = """
-## Submitting to the FormulaOne Leaderboard
-
-This leaderboard evaluates systems on the FormulaOne core dataset. Submissions consist of a .jsonl file with solution code for each problem.
-
-### 📁 I. Format Your Submission File
-
-Your submission must be a .jsonl file with one entry per problem:
-
-```json
-{"problem_id": "1", "solution": "<your Python code here>"}
-{"problem_id": "2", "solution": "<your Python code here>"}
-...
-```
-
-- problem_id: Must match the official list of FormulaOne core problems.
-- solution: A Python code implementing the required callback functions.
-
-📄 Full list of problem_ids:
-View the [FormulaOne core dataset](https://github.com/double-ai/formulaone-dataset-release/dataset/formulaone) for the complete list of problem IDs.
-
-⚠️ Validation Rules:
-Submissions must:
-- Contain exactly two columns: ["problem_id", "solution"]
-- Include all required problems (no missing/unknown IDs)
-- Provide solutions as Python strings
-- Avoid duplicates
-
-### 📤 II. Submit via the UI below
-
--  Upload your `.jsonl` file.
--  Fill in the following fields:
-   - **System Name**
-   - **Organization**
-   - **System Type**
--  Click **Submit**.
-
-### ⏱️ After Submission
+custom_css = """
+:root, [data-theme="light"] {
+  --f1-text: #111827;
+  --f1-subtle: #6b7280;
+  --f1-border: #e5e7eb;
+  --f1-bg: #ffffff;
+  --f1-bg-muted: #f9fafb;
+}
 
-Submissions are validated and evaluated within ~24 hours. Results will appear on the leaderboard once processed.
-"""
+/* Readable width */
+.f1-container { max-width: 800px; margin: 0 auto; padding: 0 16px; }
+.markdown-text { font-size: 16px !important; max-width: 800px; margin: 0 auto; }
+
+/* Paragraphs: nice wrapping */
+.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 */
+  font-weight: 700;
+  border-bottom: 1px solid var(--f1-border);
+  padding-bottom: 0.45rem;
+  margin-top: 1.75rem;
+  margin-bottom: 0.9rem;
+  color: var(--f1-text);
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 
-CITATION_BUTTON_LABEL = """📚 How to cite FormulaOne"""
-CITATION_BUTTON_TEXT = r"""
-@misc{beniamini2025formulaonemeasuringdepthalgorithmic,
-      title={FormulaOne: Measuring the Depth of Algorithmic Reasoning Beyond Competitive Programming},
-      author={Gal Beniamini and Yuval Dor and Alon Vinnikov and Shir Granot Peled and Or Weinstein and Or Sharir and Noam Wies and Tomer Nussbaum and Nadav Schweiger and Ido Ben Shaul and Tomer Zekharya and Yoav Levine and Shai Shalev-Shwartz and Amnon Shashua},
-      year={2025},
-      eprint={2507.13337},
-      archivePrefix={arXiv},
-      primaryClass={cs.AI},
-      url={https://arxiv.org/abs/2507.13337},
+/* Links */
+.f1-a { color: #2563eb; text-decoration: none; font-weight: 500; }
+.f1-a:hover { text-decoration: underline; }
+
+/* Blockquote & problem box */
+.f1-blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; margin-left: 0; font-style: italic; color: #4b5563; }
+.f1-problem-box { background-color: var(--f1-bg-muted); border: 1px solid var(--f1-border); border-radius: 8px; padding: 16px; margin-top: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04); }
+.f1-problem-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; text-align: center; }
+
+/* Clean, centered table: only top & left borders; not full width; headers centered */
+.f1-table-wrap { margin: 10px auto 8px auto; text-align: center; }
+.f1-table {
+  border-collapse: collapse;
+  width: auto;      /* not full width */
+  margin: 0 auto;   /* centered */
+  border-top: 1px solid var(--f1-border);
+  border-left: 1px solid var(--f1-border);
+  background: var(--f1-bg);
 }
+.f1-table th, .f1-table td {
+  padding: 8px 12px;
+  text-align: left;
+  vertical-align: top;
+}
+.f1-table th { text-align: center; }  /* header cells centered */
+.f1-table tr + tr td { border-top: 1px solid var(--f1-border); }  /* row separators that visually keep top line only */
+.f1-table td + td, .f1-table th + th { border-left: 1px solid var(--f1-border); } /* vertical grid from left border only */
+
+/* Examples block (Gradio-based) */
+#f1-examples { border: 1px solid var(--f1-border); border-radius: 8px; background: var(--f1-bg); margin-bottom: 12px; }
+#f1-examples .f1-examples-title { font-weight: 700; margin: 12px 14px 4px 14px; color: var(--f1-text); font-size: 1.1rem; }
+#f1-example-radio { border-top: 1px solid var(--f1-border); padding: 6px 8px; }
+#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: 6px; padding: 6px 10px; cursor: pointer; }
+#f1-example-radio input[type="radio"]:checked + span { background: var(--f1-bg-muted); border: 1px solid var(--f1-border); border-radius: 6px; padding: 6px 10px; }
+
+/* Leaderboard: full-width controls, nesting rule, center container */
+#formulaone-leaderboard-tab-table { max-width: 1200px; margin-left: auto; margin-right: auto; }  /* center the whole tab (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; }
+#formulaone-leaderboard-tab-table [data-testid="dropdown"], #formulaone-leaderboard-tab-table input[type="text"] { width: 100% !important; }
+
+/* Login button: force light */
+#hf-login-btn, #hf-login-btn button, button[data-testid="login-button"], [data-testid="login-button"] button, div[data-testid="login-button"] > button {
+  background: #ffffff !important;
+  color: #1f2937 !important;
+  border: 1px solid var(--f1-border) !important;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04) !important;
+}
+#hf-login-btn:hover, #hf-login-btn button:hover, button[data-testid="login-button"]:hover, [data-testid="login-button"] button:hover, div[data-testid="login-button"] > button:hover { background: #f9fafb !important; }
+
+/* Misc retained */
+#models-to-add-text { font-size: 18px !important; }
+#citation-button span { font-size: 16px !important; }
+#citation-button textarea { font-size: 16px !important; }
+#citation-button > label > button { margin: 6px; transform: scale(1.3); }
+#leaderboard-table { margin-top: 15px }
+#leaderboard-table-lite { margin-top: 15px }
+#search-bar-table-box > div:first-child { background: none; border: none; }
+#search-bar { padding: 0px; }
+#leaderboard-table td:nth-child(2), #leaderboard-table th:nth-child(2) { max-width: 400px; overflow: auto; white-space: nowrap; }
+#scale-logo { border-style: none !important; box-shadow: none; display: block; margin-left: auto; margin-right: auto; max-width: 600px; }
+#scale-logo .download { display: none; }
+#filter_type{ border: 0; padding-left: 0; padding-top: 0; }
+#filter_type label { display: flex; }
+#filter_type label > span{ margin-top: var(--spacing-lg); margin-right: 0.5em; }
+#filter_type label > .wrap{ width: 103px; }
+#filter_type label > .wrap .wrap-inner{ padding: 2px; }
+#filter_type label > .wrap .wrap-inner input{ width: 1px }
+#filter-columns-type{ border:0; padding:0.5; }
+#filter-columns-size{ border:0; padding:0.5; }
+#box-filter > .form{ border: 0 }
 """
+
+get_window_url_params = """
+    function(url_params) {
+        const params = new URLSearchParams(window.location.search);
+        url_params = Object.fromEntries(params);
+        return url_params;
+    }
+    """

src/display/css_html_js.py

@@ -8,14 +8,14 @@ custom_css = """
 }
 
 /* Readable width */
-.f1-container { max-width: 800px; margin: 0 auto; padding: 0 16px; } /* (2) */
+.f1-container { max-width: 800px; margin: 0 auto; padding: 0 16px; }
 .markdown-text { font-size: 16px !important; max-width: 800px; margin: 0 auto; }
 
 /* Paragraphs: nice wrapping */
 .f1-p, .f1-li {
   line-height: 1.75;
   color: #374151;
-  text-align: left;         /* no huge gaps */
+  text-align: left;
   text-wrap: pretty;
   overflow-wrap: break-word;
   hyphens: auto;
@@ -24,14 +24,14 @@ custom_css = """
 
 /* 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 { /* (4) smaller section headings */
+.f1-h2 { /* smaller section headings */
   font-weight: 700;
   border-bottom: 1px solid var(--f1-border);
   padding-bottom: 0.45rem;
   margin-top: 1.75rem;
   margin-bottom: 0.9rem;
   color: var(--f1-text);
-  font-size: 1.5rem;        /* was 1.875rem */
+  font-size: 1.5rem;
   line-height: 2rem;
 }
 
@@ -42,14 +42,14 @@ custom_css = """
 /* Blockquote & problem box */
 .f1-blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; margin-left: 0; font-style: italic; color: #4b5563; }
 .f1-problem-box { background-color: var(--f1-bg-muted); border: 1px solid var(--f1-border); border-radius: 8px; padding: 16px; margin-top: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04); }
-.f1-problem-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; text-align: center; } /* (7) */
+.f1-problem-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; text-align: center; }
 
-/* (1) Clean table: centered, auto width, only top & left bars */
+/* Clean, centered table: only top & left borders; not full width; headers centered */
 .f1-table-wrap { margin: 10px auto 8px auto; text-align: center; }
 .f1-table {
   border-collapse: collapse;
-  width: auto;              /* not full width */
-  margin: 0 auto;           /* centered */
+  width: auto;      /* not full width */
+  margin: 0 auto;   /* centered */
   border-top: 1px solid var(--f1-border);
   border-left: 1px solid var(--f1-border);
   background: var(--f1-bg);
@@ -59,26 +59,22 @@ custom_css = """
   text-align: left;
   vertical-align: top;
 }
-.f1-table th { font-weight: 600; color: var(--f1-text); }
+.f1-table th { text-align: center; }  /* header cells centered */
+.f1-table tr + tr td { border-top: 1px solid var(--f1-border); }  /* row separators that visually keep top line only */
+.f1-table td + td, .f1-table th + th { border-left: 1px solid var(--f1-border); } /* vertical grid from left border only */
 
-/* Tabs: quiet, compact, with small gap after (3) */
-.f1-tabs { border: 1px solid var(--f1-border); border-radius: 8px; background: var(--f1-bg); margin-bottom: 12px; } /* small spacing below */
-.f1-tabs-body { padding: 12px 14px 6px 14px; }
-.f1-tabs-buttons { display: flex; gap: 6px; border-top: 1px solid var(--f1-border); padding: 6px; justify-content: flex-start; }
-.f1-tab-btn {
-  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  padding: 6px 10px;
-  border-radius: 6px;
-  border: 1px solid transparent;
-  background: transparent;
-  color: #374151;
-  cursor: pointer;
-}
-.f1-tab-btn[aria-selected="true"] { background: var(--f1-bg-muted); border-color: var(--f1-border); }
+/* Examples block (Gradio-based) */
+#f1-examples { border: 1px solid var(--f1-border); border-radius: 8px; background: var(--f1-bg); margin-bottom: 12px; }
+#f1-examples .f1-examples-title { font-weight: 700; margin: 12px 14px 4px 14px; color: var(--f1-text); font-size: 1.1rem; }
+#f1-example-radio { border-top: 1px solid var(--f1-border); padding: 6px 8px; }
+#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: 6px; padding: 6px 10px; cursor: pointer; }
+#f1-example-radio input[type="radio"]:checked + span { background: var(--f1-bg-muted); border: 1px solid var(--f1-border); border-radius: 6px; padding: 6px 10px; }
 
-/* Leaderboard width helpers (6) */
-#formulaone-leaderboard-tab-table .gr-column .gr-row .gr-column { width: 100% !important; } /* column -> row -> column chain */
-#formulaone-leaderboard-tab-table .gr-row, #formulaone-leaderboard-tab-table .gr-column { max-width: 100% !important; }
+/* Leaderboard: full-width controls, nesting rule, center container */
+#formulaone-leaderboard-tab-table { max-width: 1200px; margin-left: auto; margin-right: auto; }  /* center the whole tab (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; }
 #formulaone-leaderboard-tab-table [data-testid="dropdown"], #formulaone-leaderboard-tab-table input[type="text"] { width: 100% !important; }
 
 /* Login button: force light */
@@ -90,7 +86,7 @@ custom_css = """
 }
 #hf-login-btn:hover, #hf-login-btn button:hover, button[data-testid="login-button"]:hover, [data-testid="login-button"] button:hover, div[data-testid="login-button"] > button:hover { background: #f9fafb !important; }
 
-/* Misc existing */
+/* Misc retained */
 #models-to-add-text { font-size: 18px !important; }
 #citation-button span { font-size: 16px !important; }
 #citation-button textarea { font-size: 16px !important; }