Update.

app.py

@@ -273,21 +273,23 @@ ACCURACY_PCT = {
 
 
 def build_accuracy_figure(tier: str):
-    """Interactive scatter: x = release date, y = accuracy (%). Hover shows solved/total."""
+    """Interactive scatter: x = release date (ISO str), y = accuracy (%). Hover shows solved/total."""
     total = TIER_TOTALS[tier]
     fig = go.Figure()
 
     for model in MODELS_ORDER:
-        date_str = MODEL_RELEASES[model]
-        y = ACCURACY_PCT[tier][model]
+        date_str = MODEL_RELEASES[model]  # e.g., "2025-08-07"
+        y = ACCURACY_PCT[tier][model]  # percent
         solved = round(y * total / 100)
+
         fig.add_trace(
             go.Scatter(
                 x=[date_str],
                 y=[y],
                 mode="markers",
-                name=model,
-                marker=dict(size=12, line=dict(width=1)),
+                name=model,  # distinct legend entry & color per model
+                marker=dict(size=8, opacity=0.55, line=dict(width=0.5)),
+                cliponaxis=False,  # let markers render over axes
                 hovertemplate=(
                     f"<b>{model}</b><br>"
                     "Release: %{x|%b %d, %Y}<br>"
@@ -298,25 +300,18 @@ def build_accuracy_figure(tier: str):
             )
         )
 
-    # Comfortable y-range (dynamic ceiling for readability)
-    max_y = max(ACCURACY_PCT[tier].values()) or 1
-    upper = max(1, math.ceil(max_y * 1.25))
-
     fig.update_layout(
         template="plotly_white",
         height=420,
         margin=dict(l=30, r=120, t=10, b=40),  # extra right room for legend
-        xaxis=dict(
-            title=None,
-            type="date",
-            tickformat="%b %Y",
-            showgrid=True,
-        ),
+        xaxis=dict(title=None, type="date", tickformat="%b %Y", showgrid=True),
         yaxis=dict(
             title="Accuracy (%)",
-            range=[0, upper],
-            dtick=max(1, upper // 5),
+            range=[0, 100],  # fixed 0–100
+            tick0=0,
+            dtick=10,
             showgrid=True,
+            layer="below traces",  # draw axis below points so dots aren't “cut”
         ),
         legend=dict(title="Models", orientation="v", y=1, x=1.02, yanchor="top"),
         hovermode="closest",
@@ -337,7 +332,7 @@ with blocks:
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("FormulaOne", id=0, elem_id="landing-accuracy-tab"):
             gr.Markdown(
-                "The chart below summarizes static (non-live) results for model performance on FormulaOne.",
+                "The chart below summarises Frontier model performance on FormulaOne.",
                 elem_classes="markdown-text",
             )
 
@@ -363,23 +358,25 @@ with blocks:
             gr.Markdown(
                 """
 <div class="f1-container">
-<p class="f1-p" style="font-size:0.95rem;color:var(--f1-subtle);">
-    <em>Footnote.</em> All models were sampled with their highest available reasoning settings and a generous token budget.
-    We also used a diverse few-shot prompt that is highly supportive for these problems, covering many of the subtle
-    details inherent in the tasks (state design, invariants, and bag transformations).
-</p>
+  <p class="f1-p" style="font-size:0.95rem;color:var(--f1-subtle);">
+    All models were sampled with their highest available reasoning settings and a maximum token budget.
+    We also provided the models with a diverse few-shot prompt that is highly supportive for FormulaOne problems,
+    covering many of the subtle details of state design and maintenance, from a broad array of categories.
+  </p>
 </div>
-        """,
+""",
                 elem_classes="markdown-text",
             )
 
             # "Learn more" link to the explainer tab
             gr.Markdown(
-                '<div class="f1-container"><p><a class="f1-a" href="#what-is-tab">Learn more about FormulaOne.</a></p></div>'
+                '<div class="f1-container"><p style="font-size:1.05rem;font-weight:600;">'
+                '<a class="f1-a" href="#what-is-formulaone">Learn more about FormulaOne.</a>'
+                "</p></div>"
             )
+
         # Existing "What is FormulaOne" tab
         with gr.TabItem("What is FormulaOne", id=1, elem_id="what-is-tab"):
-
             gr.Image(
                 "assets/banner.png",
                 show_label=False,

src/about.py

@@ -2,6 +2,7 @@
 PAPER_URL = "https://arxiv.org/abs/2507.13337"
 
 WHAT_IS_F1_HTML_TOP = f"""
+<a id="what-is-formulaone"></a>
 <div 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>

src/display/css_html_js.py

@@ -19,14 +19,24 @@ custom_css = """
 #f1-examples { max-width: 710px; margin: 0 auto; }
 
 /* NEW: landing tab width + tier selector alignment */
+/* Landing tab width + tier selector alignment */
 #landing-accuracy-tab { max-width: 800px; margin-left: auto; margin-right: auto; }
-#f1-tier-select-row { justify-content: flex-end; margin-bottom: 6px; }
-#f1-tier-select-row { justify-content: flex-end; margin-bottom: 6px; }
+
+/* Right-align the switcher row; transparent background & border */
+#f1-tier-select-row {
+  justify-content: flex-end;
+  margin-bottom: 6px;
+  background: transparent !important;
+  border: none !important;
+}
+
+/* Make the control look like "pills" and force RTL layout */
+#f1-tier-select { direction: rtl; }  /* RTL direction (equivalent effect to dir="rtl") */
 #f1-tier-select .wrap {
   display: inline-flex;
   gap: 6px;
   padding: 4px;
-  background: #ffffff;
+  background: #ffffff;                /* white background for the switcher itself */
   border: 1px solid var(--f1-border);
   border-radius: 999px;
 }
@@ -39,7 +49,7 @@ custom_css = """
   cursor: pointer;
 }
 #f1-tier-select input[type="radio"]:checked + span {
-  background: #eef2ff; /* subtle non-white for selected pill */
+  background: #eef2ff;                /* only selected pill is tinted */
   border-radius: 999px;
   padding: 6px 12px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.04);