Benchmark pages as tabs under a compact hero

Each benchmark page shows one view at a time, picked from tabs at the top
of its controls: Summary (the default), Leaderboard, Quality vs time, Head
to head and Per dataset. Every view is on the page from the start, so a
switch needs no round trip, and `?view=<key>` links to one.

- The tabs, the one-row Customize bar and the shown view's first card form
one block at full width. The controls sit on a surface a shade apart
from the view, with a firmer line where it starts.
- The tab captions moved to each tab's hover text, with what the selection
covers.
- The hero drops the "Meet our benchmark" eyebrow and the stats band; the
numbers are in the Learn more pills' hover texts.
- The floating bottom selection bar and its Jump to menu are gone.
- The Summary table shows every row instead of scrolling inside a 680px
box, and its heading takes the table's own surface.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

AGENTS.md

@@ -57,15 +57,15 @@ Do not edit files under `data/` by hand — they are generated artifacts.
   reorders the figure grid, in the browser; it computes nothing and costs no render.
 - Every selector lives in one card at the top of the page (`views.selector_card`, built by
   `pages._render_control_band` and `pages._render_beyond_control_band`). It is one `gr.HTML` of plain
-  buttons, not Gradio controls, with a column that says how many datasets the selection covers (beside
-  only the bar below 1420px, under it on a phone). It starts closed, as a bar styled like the per-dataset
-  browser's (`.ta-pdbar`) but without its wash of colour, beside that column (it spans the bar and the
-  lines, so opening only grows it): the title, which is the toggle, and
+  buttons, not Gradio controls. It starts closed, as one row (`.ta-pdbar` without its wash of colour): the
+  title "Customize", which is the toggle, small
   shortcuts (`website_texts.SELECTOR_EXAMPLES`, `BEYOND_SELECTOR_EXAMPLES`; `views._selector_examples` drops
-  locked chips) that pick a chip of the card, or several toggles at once, and open it there. They stay in
+  locked chips) that pick a chip of the card, or several toggles at once, and open it there, and at its end
+  how many datasets the selection covers. The shortcuts scroll sideways where the row cannot hold them, on
+  a line of their own on a phone. Open, the lines grow under the bar, headed by what the choices change
+  (`website_texts.SELECTOR_SUB`). The shortcuts stay in
   the bar once it is open, pressed while the selection matches, so a second click undoes them. Opening is client-side only, so the
-  open state survives every re-render, and a link to the card (the bottom bar's "change", Jump to) opens
-  it too. A click updates the card in the browser
+  open state survives every re-render. A click updates the card in the browser
   (`main.taSelector`: chip state, dataset counts, that number, system warnings) and sends the whole
   selection as one custom `pick` event (`trigger('pick', …)` in `js_on_load`), whose listener validates
   every value (`views.picked`) and returns the page's `gr.State`s. A State re-renders its readers only when its value changed, and
@@ -73,10 +73,23 @@ Do not edit files under `data/` by hand — they are generated artifacts.
   comes from the `n_datasets_*` marker of the leaderboard that chip would select; a chip whose leaderboard
   is not published cannot be picked. Hover text is written into the card (`title`), from the notes dicts
   and `data_loading.AXIS_NOTES` (per row caption).
-- The figures under "Your leaderboard" are one grid in one `gr.HTML` (`views.make_figure_grid`): the
-  overview and the win-rate matrix span the width, the three Pareto fronts (inference, end-to-end, train
-  time) and the tuning trajectories sit two to a row (one per row below 1100px; an odd one out spans the
-  row). "I care about" and "Measured by" are not render inputs. `main.taSelector` writes the choice onto
+- A benchmark page shows one view at a time, picked from tabs at the top of its controls
+  (`views.view_bar`, `website_texts.VIEW_TABS`): Summary, the default (the summary table across subsets;
+  BeyondArena's overview images), Leaderboard (the Elo overview chart and the full table, open), Quality
+  vs time (the Pareto fronts and tuning trajectories), Head to head (the win-rate matrix) and Per dataset
+  (the per-dataset browser). Each tab says on hover what its view shows and what the selection covers
+  (from `views.lb_spec`); the bar carries the Follow picker. The selector card hangs under it, and the
+  shown view under the card as its body on the card's surface (`.block.ta-sel-block` and `.ta-view` pulled
+  up over the block gap), so the tabs, the choices and the view read as one panel. The bar renders with the selection (for the Follow list) and marks the page's shown view
+  each time it is drawn (`main.taSyncViewTabs`). Every view is a `gr.Column(elem_classes=["ta-view",
+  "ta-view-<key>"])` with its own `@gr.render` blocks, all on the page from the start; the browser shows
+  the one the page element's `data-view` names (`main.taShowView`, the generated `__TA_VIEW_RULES__`), so
+  a switch costs no round trip, loads the view's explorers (`taLoadFrames`) and goes into the address as
+  `?view=<key>` (`taOpenLinkedView` reads it back, after `?tab=`).
+- Each figure view is one grid in one `gr.HTML` (`views.make_figure_grid(lb, keys)`, the keys from
+  `views.VIEW_TILES`): the overview and the win-rate matrix span the width, the three Pareto fronts
+  (inference, end-to-end, train time) and the tuning trajectories sit two to a row (one per row below
+  1100px; an odd one out spans the row). "I care about" and "Measured by" are not render inputs. `main.taSelector` writes the choice onto
   the page element (`.ta-page[data-care][data-metric]`, the `gr.TabItem`'s class), and the stylesheet
   orders the tiles from it: the figure that answers the choice first, its partner beside it, then the
   overview. The figure that leads takes the metric the reader picked and the others the other one, so both
@@ -112,18 +125,17 @@ Do not edit files under `data/` by hand — they are generated artifacts.
   system from its name.
 - Each top-level page has a `slug` (`pages.PAGES`) that is its tab id and its `?tab=<slug>` link, e.g. `huggingface.co/spaces/TabArena/leaderboard?tab=beyondarena`. `main._open_linked_page` selects it on load, and a click on a page link in the top bar writes it back to the address bar and, inside the Space, to the Hugging Face page URL over `postMessage`. Not `?page=`: Gradio reserves that name (and `deep_link`) for its own routing.
 - The top bar (`views.make_page_chrome`) is plain HTML above `gr.Tabs(elem_id="top-tabs")`, whose own tab bar is hidden. A page link clicks the matching Gradio tab button, found by the tab's label (`main.taGoToPage`); with the bar hidden Gradio keeps every button in its overflow menu, where the selected one carries `.selected` rather than `aria-selected`. The bar keeps one row while brand, links and actions fit and gives the links a row of their own otherwise (`main.taFitTopBar` measures, since where that happens depends on the reader's font). Its version chip and the version-history dialog are parsed from `website_texts.VERSION_HISTORY_BUTTON_TEXT` (`views.parse_version_history`), so release entries must keep the `* YYYY/MM/DD-vX.Y.Z:` form. The COI statement and the version history are dialogs: a hidden checkbox (`main.taOpenDialog`) shows an overlay on the visible band, and the dialog scrolls inside itself so a click on the overlay always closes it.
-- TabArena and BeyondArena share one hero (`views._page_hero`), coloured like the page's link in the top bar: one panel washed faintly in that colour and headed by a "Meet …" eyebrow (`website_texts.HERO_EYEBROW`, `BEYOND_HERO_EYEBROW`), so the background on the benchmark reads apart from the results below it. Its numbers are read from the data (`views.hero_facts`, `views.beyond_hero_facts`); TabArena's also come from the version history, including the newest entrant, which it takes from a release whose first bullet reads `Add new verified model: <name>, …`. Its citation, its team and the Learn more topics open as dialogs, with toggle ids per page (`views._hero_toggle`) since both pages are in the document at once. `views.learn_more` puts every topic into the page once, so a pill opens without a round trip to the server; the row ends with the page's call to submit a model (`website_texts.HERO_CTA`, `BEYOND_HERO_CTA`), a link out washed in the page's colour. Reference text lives there and not at the bottom of the page: the MCP & API topic (`website_texts.AGENTS_*`, CSV paths and the MCP tools) replaced the Appendix, and BeyondArena's subsets explainer is its Subsets topic, opened from the overview figures too (`views.open_doc`).
+- TabArena and BeyondArena share one hero (`views._page_hero`), coloured like the page's link in the top bar: one panel washed faintly in that colour, so the background on the benchmark reads apart from the results below it: the lead sentence with its links, then the Learn more row. The Learn more pills carry the benchmark's numbers in their hover texts (`website_texts.HERO_HINTS`, `BEYOND_HERO_HINTS`), read from the data (`views.hero_facts`, `views.beyond_hero_facts`). Its citation, its team and the Learn more topics open as dialogs, with toggle ids per page (`views._hero_toggle`) since both pages are in the document at once. `views.learn_more` puts every topic into the page once, so a pill opens without a round trip to the server; the row ends with the page's call to submit a model (`website_texts.HERO_CTA`, `BEYOND_HERO_CTA`), a link out washed in the page's colour. Reference text lives there and not at the bottom of the page: the MCP & API topic (`website_texts.AGENTS_*`, CSV paths and the MCP tools) replaced the Appendix, and BeyondArena's subsets explainer is its Subsets topic, opened from the overview figures too (`views.open_doc`).
 - A dialog has a link of its own: while it is open, `?doc=<name>` is in the address bar (and in the Hugging Face page URL), a Learn more topic key or `cite`, `team`, `history`, `coi`; `main.taOpenLinkedDialog` opens it on load once the page `?tab=` names shows, e.g. `?tab=beyondarena&doc=subsets`.
 - Inside the Space the visible band comes from iframe-resizer's `getPageInfo`, which the parent answers once and afterwards only on its own scroll and resize. The first answer arrives while the frame is still short, so `main.taReaskPageInfo` asks again whenever the frame's height changes; without that the band stayed unset until the reader first scrolled.
 - Gradio rescopes every rule of the launch stylesheet under `.gradio-container.gradio-container-<version> .contain`. A top-level rule also keeps its written form, a rule inside `@media` does not, so a media query cannot style `.contain` or its ancestors (`.main`, `.gradio-container`); use a top-level rule with `clamp()` there instead.
 - `LBContainer` (`data_loading.py`) loads one subset's `website_leaderboard.csv`, lazily unzips its PNGs, and inlines its interactive HTML plots.
-- The cross-subset overview, titled Summary (`views.make_cross_subset_overview`), is one block: its heading (the title, what the table shows on hover) and the table. The columns: the rank in the sorted column; the Method column, sticky, with the search in its header's corner (an icon opening a box that finds a method by name), on the table's own opaque surface (`--ta-xo-bg`), the organization's logo and the name in its family colour with its variant, a system's tag (🔒 for a closed-source API, 🤖 with LLMs; `constants.tag_emoji`), ✔️, `$` and ↗; then Overall Elo and Overall improvability, the two metrics the figures show, and the train and inference costs, as in-cell bars (as long as the value is high in its column, on the log scale for the costs, so lower is shorter; coloured amber for the best through violet for the worst, `views.BAR_STOPS` as `--bar-dark` / `--bar-light`); a divider (`ta-xo-sep`) after each of those two groups; then the breakdowns by task, size and target as heat cells. There is no type column and no metric menu. Under the Method header two keys (`views._th_key`): the colours of the names by short family names (`views._method_legend`, full names on hover), and the marks ✔️, `$`, ↗ and the system tags; `*` (imputed) is keyed under the headline Elo and `†` under the train time, each only when a row on screen has it; the medals need no key. The breakdowns start folded into stub columns after the others (`views._FOLDING_GROUPS`; their cells carry `data-g`, the stubs `data-stub`, and the table's `data-open` names the open ones); a stub opens its group, the ✕ in its heading folds it, a group a selector comes to point at opens by itself (the table's `data-auto`), and each open group has an Elo | Improv. switch: every breakdown column is rendered in both metrics (`data-m`), the table's `data-m-<group>` shows one. In the browser (`main.taOverviewTable`): a click on a number heading sorts by it (best first, again reverses; the sort is kept by the heading's `data-label`, the column id, and falls back to the headline Elo when its column folds or switches away); the search hides rows; the sort, the open groups, their metrics and the search survive re-renders (`window.taOverviewState`). Each number's hover gives its rank in the column (and the Elo 95% CI). A "new" badge marks the methods the last three entrant-adding releases of the version history named (`views._recent_additions`).
+- The cross-subset overview, the Summary view (`views.make_cross_subset_overview`), is one table at its full length (it scrolls sideways only). The columns: the rank in the sorted column; the Method column, sticky, with the search in its header's corner (an icon opening a box that finds a method by name), on the table's own opaque surface (`--ta-xo-bg`), the organization's logo and the name in its family colour with its variant, a system's tag (🔒 for a closed-source API, 🤖 with LLMs; `constants.tag_emoji`), ✔️, `$` and ↗; then Overall Elo and Overall improvability, the two metrics the figures show, and the train and inference costs, as in-cell bars (as long as the value is high in its column, on the log scale for the costs, so lower is shorter; coloured amber for the best through violet for the worst, `views.BAR_STOPS` as `--bar-dark` / `--bar-light`); a divider (`ta-xo-sep`) after each of those two groups; then the breakdowns by task, size and target as heat cells. There is no type column and no metric menu. Under the Method header two keys (`views._th_key`): the colours of the names by short family names (`views._method_legend`, full names on hover), and the marks ✔️, `$`, ↗ and the system tags; `*` (imputed) is keyed under the headline Elo and `†` under the train time, each only when a row on screen has it; the medals need no key. The breakdowns start folded into stub columns after the others (`views._FOLDING_GROUPS`; their cells carry `data-g`, the stubs `data-stub`, and the table's `data-open` names the open ones); a stub opens its group, the ✕ in its heading folds it, a group a selector comes to point at opens by itself (the table's `data-auto`), and each open group has an Elo | Improv. switch: every breakdown column is rendered in both metrics (`data-m`), the table's `data-m-<group>` shows one. In the browser (`main.taOverviewTable`): a click on a number heading sorts by it (best first, again reverses; the sort is kept by the heading's `data-label`, the column id, and falls back to the headline Elo when its column folds or switches away); the search hides rows; the sort, the open groups, their metrics and the search survive re-renders (`window.taOverviewState`). Each number's hover gives its rank in the column (and the Elo 95% CI). A "new" badge marks the methods the last three entrant-adding releases of the version history named (`views._recent_additions`), taken from a release whose first bullet reads `Add new verified model: <name>, …`.
 - Logos: the `Organization` column of `website_leaderboard.csv` comes from `MethodMetadata.organization` upstream; `views.ORGANIZATION_LOGOS` maps it to a file in `assets/logos/` (64 px PNGs through LFS, SVGs as text), served with `gr.set_static_paths` (`main.main`). A logo fills its tile at its own shape, with no backdrop; one whose artwork is dark on transparency (Amazon, NVIDIA, Perpetual ML) has a white tile baked into the file, since it would vanish on the dark table. An organization without a logo shows its initial, a method without one an empty tile; artifacts generated before the column existed show no logos. A new organization needs its name spelled as upstream spells it, plus a logo file and an entry here.
 - The reactive render is driven by one `gr.State` per axis: selecting a tab or toggle updates that state, and the `@gr.render` block in `pages.py` rebuilds the subset's figures and table.
-- The full leaderboard table is `views.make_leaderboard`, a card like the figure tiles that opens in the browser (`main.taToggleTable`) and embeds the generated `leaderboard_table.html`, so it reuses the explorers' family colours, variant chips, tag chips and imputation markers rather than reimplementing them. Its toolbar (search, family toggles, variants, a Methods and a Columns menu), the 1-based positions and the default columns (Elo, Improvability, runtimes) are upstream's; the "new" badges come from here, the methods `views._recent_additions` names, as `data-new` sent by `main.taSendNew`. `views.make_leaderboard_gradio` is the fallback for subsets whose artifacts predate that file; its filtering lives in `views.filter_leaderboard`, kept pure so it can be tested without a Gradio context. Neither path may reintroduce the `gradio_leaderboard` custom component, which pinned Gradio < 6.
-- The per-dataset browser (`views.make_per_dataset_block`, embedding `per_dataset_explorer.html`) hangs
-  collapsed right under the cross-subset overview ("Dataset by dataset"): both look across the whole
-  benchmark, unlike "Your leaderboard" below. From 1100px wide it shows its dataset list beside the
+- The full leaderboard table is `views.make_leaderboard`, a card like the figure tiles, open in the Leaderboard view, that hides and shows in the browser (`main.taToggleTable`) and embeds the generated `leaderboard_table.html`, so it reuses the explorers' family colours, variant chips, tag chips and imputation markers rather than reimplementing them. Its toolbar (search, family toggles, variants, a Methods and a Columns menu), the 1-based positions and the default columns (Elo, Improvability, runtimes) are upstream's; the "new" badges come from here, the methods `views._recent_additions` names, as `data-new` sent by `main.taSendNew`. `views.make_leaderboard_gradio` is the fallback for subsets whose artifacts predate that file; its filtering lives in `views.filter_leaderboard`, kept pure so it can be tested without a Gradio context. Neither path may reintroduce the `gradio_leaderboard` custom component, which pinned Gradio < 6.
+- The per-dataset browser (`views.make_per_dataset_block`, embedding `per_dataset_explorer.html`) is the
+  Per dataset view; its frame loads when the view is first shown. From 1100px wide it shows its dataset list beside the
   chosen dataset (upstream). It is read from the `tasks_all/datasets_all` sibling of the selected cell, not from the cell itself: a dataset's own
   rank and gap do not depend on which *other* datasets share its leaderboard, so upstream publishes one per
   (entrants, imputation, splits) rather than for all 60 task/dataset cells. The current task and
@@ -134,14 +146,10 @@ Do not edit files under `data/` by hand — they are generated artifacts.
   splits, α = 0.05, no verdict below five splits), all computed upstream in
   `plot/interactive/per_dataset_explorer.py`; nothing here recomputes them. Its "Target" filter
   (balanced / imbalanced) reads the `target_imbalanced` verdict from the dataset metadata upstream.
-- The dataset browser and the full table are collapsed by default; the browser's frame is only built once
-  it has been opened (its artifact is the largest the site ships). The selection bar at the bottom hides
-  while an open browser fills the view (`main.taOverDataBrowser`).
 - Section headings come from `views.section_head`: a plain title, a muted line beside it saying what the
-  section holds, actions at the right, and the longer text as the title's hover. "Your leaderboard" (the
-  selected leaderboard's figures and table) is rendered with its selection, its line from `views.lb_spec`:
-  the number of datasets, split by task where the selection spans both kinds, then the selector card's
-  summary terms. Each figure tile is one flat card with one header row: the figure's name, its caption from
+  section holds, actions at the right, and the longer text as the title's hover. The selection's line
+  (`views.lb_spec`, under the view tabs): the number of datasets, split by task where the selection spans
+  both kinds, then the selection's terms. Each figure tile is one flat card with one header row: the figure's name, its caption from
   `website_texts.FIGURE_CAPTIONS` (shown only where it fits whole, `main.taFitCaptions`; the title's hover
   carries it either way), and ghost buttons "Customize" (the explorer's controls; paper view is the default), a
   "Download" menu (SVG, PDF, PNG; shown in paper view) and ⤢.

main.py

@@ -4,6 +4,7 @@ import gradio as gr
 
 import json
 
+import website_texts
 from api import register_api
 from data_loading import BEYOND_DATA_DIR, DATA_DIR
 from pages import PAGES, render_page
@@ -13,10 +14,6 @@ from views import LOGO_DIR, VERSION_HISTORY_TOGGLE, make_page_chrome
 CSS = """
 /* Use the full page width instead of gradio's narrow centered column. */
 .gradio-container { max-width: 100% !important; }
-/* Leave room for the fixed selection bar (.ta-selbar sits 18px off the bottom and is ~42px
-   tall). Without this the page still scrolls to its end, but the end sits underneath the bar,
-   which reads as not being able to get to the bottom. */
-.gradio-container { padding-bottom: 78px !important; }
 .gradio-container { padding-top: 6px !important; }
 
 /* --- Colour emoji ----------------------------------------------------------
@@ -118,17 +115,16 @@ CSS = """
    then one line per choice with the captions in one column down the left, and beside the lines a
    column that says what the selection covers, its number set like the hero's. A chip in a row that
    filters the datasets carries the number of datasets the leaderboard would cover with it picked.
-   The card starts closed, as its bar alone, beside the column that says what the selection covers:
-   the per-dataset browser's bar (`.ta-pdbar`), its title the button and offering shortcuts into the
-   card. Opened, the lines grow under the bar and the column grows with them. */
+   The card starts closed, as its bar alone, one row: the title is the button, small shortcuts into
+   the card follow it, and the number of datasets the selection covers ends it. Opened, the lines
+   grow under the bar, headed by what the choices change. */
 .ta-sel-block .html-container { padding: 0; }
 .ta-sel {
     --ta-page-color: var(--ta-accent);
     --ta-pd-color: var(--ta-page-color);
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 212px;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: "bar result" "main result" "warns warns";
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "bar result" "main main" "warns warns";
     overflow: hidden;
     border: 1px solid var(--ta-line-soft);
     border-radius: 14px;
@@ -140,20 +136,21 @@ CSS = """
    selling points, a second orange band read as more of the same. The icon, the chevron and the
    shortcuts carry the colour instead. */
 .ta-sel-bar { grid-area: bar; }
-.ta-sel .ta-sel-bar { background: transparent; }
+.ta-sel .ta-sel-bar { gap: 12px !important; padding: 7px 14px !important; background: transparent; }
 .ta-sel .ta-sel-bar:hover { background: color-mix(in srgb, var(--ta-ink) 4%, transparent); }
-.ta-sel:not([data-open="true"]) > :is(.ta-sel-main, .ta-sel-warns),
-.ta-sel:not([data-open="true"]) .ta-sel-lead { display: none; }
+.ta-sel:not([data-open="true"]) > :is(.ta-sel-main, .ta-sel-warns) { display: none; }
 .ta-sel-main { grid-area: main; min-width: 0; padding: 0 18px 2px; }
-.ta-sel-main > .ta-sel-line:first-child { border-top: 0; }
-.ta-sel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
-.ta-sel-title { margin: 0; font-size: 1.08rem; letter-spacing: -0.01em; }
+.ta-sel-lead { margin: 0; padding: 10px 0 2px; color: var(--ta-muted); font-size: 0.84rem; }
+.ta-sel-main > .ta-sel-lead + .ta-sel-line { border-top: 0; }
+.ta-sel .ta-pdicon { width: 28px; height: 28px; border-radius: 8px; }
+.ta-sel .ta-pdicon svg { width: 15px; height: 15px; }
+.ta-sel .ta-sel-title { flex: none; margin: 0; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; }
 /* The title opens the card, its chevron filled in the page's colour while there is more to see,
    quiet and turned once the card is open. */
 .ta-sel-toggle {
     display: inline-flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     margin: 0;
     padding: 0;
     border: 0;
@@ -167,8 +164,8 @@ CSS = """
     display: grid;
     place-items: center;
     flex: none;
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
     border: 1px solid transparent;
     border-radius: 50%;
     background: var(--ta-page-color);
@@ -177,8 +174,8 @@ CSS = """
 }
 .ta-sel-chev::before {
     content: "";
-    width: 7px;
-    height: 7px;
+    width: 6px;
+    height: 6px;
     border-style: solid;
     border-color: var(--ta-on-accent);
     border-width: 0 2px 2px 0;
@@ -192,24 +189,35 @@ CSS = """
     transform: rotate(180deg);
 }
 .ta-sel[data-open="true"] .ta-sel-chev::before { border-color: var(--ta-ink); }
-/* The shortcuts: dashed, as suggestions rather than settings, each a "+" until it is picked. */
-.ta-sel-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
-.ta-sel-try-lead { margin-right: 2px; color: var(--ta-muted); font-size: 0.8rem; font-weight: 600; }
+/* The shortcuts: small and dashed, as suggestions rather than settings, each a "+" until it is
+   picked. They keep to the bar's row, which scrolls sideways where it cannot hold them, fading out
+   at the edge it continues past. */
+.ta-sel-try {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 5px;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+.ta-sel-try::-webkit-scrollbar { display: none; }
 .ta-sel-ex {
+    flex: none;
     margin: 0;
-    padding: 3px 11px 3px 9px;
+    padding: 2px 9px 2px 7px;
     border: 1px dashed color-mix(in srgb, var(--ta-page-color) 60%, transparent);
     border-radius: 999px;
     background: transparent;
     color: var(--ta-ink);
     font: inherit;
-    font-size: 0.8rem;
+    font-size: 0.74rem;
     font-weight: 600;
     white-space: nowrap;
     cursor: pointer;
     transition: background .14s ease, border-color .14s ease;
 }
-.ta-sel-ex::before { content: "+"; margin-right: 5px; color: var(--ta-page-color); font-weight: 800; }
+.ta-sel-ex::before { content: "+"; margin-right: 4px; color: var(--ta-page-color); font-weight: 800; }
 .ta-sel-ex:hover,
 .ta-sel-ex[aria-pressed="true"] {
     border-style: solid;
@@ -218,18 +226,12 @@ CSS = """
 .ta-sel-ex[aria-pressed="true"]::before { content: "\\2713"; }
 .ta-sel-ex:focus-visible { outline: 2px solid var(--ta-page-color); outline-offset: 2px; }
 .ta-sel-ex:disabled { opacity: 0.4; cursor: not-allowed; }
-/* On a phone the shortcuts keep to one row that scrolls sideways, fading out at the edge it
-   continues past, and the icon stays with the title. */
+@media (max-width: 1100px) {
+    .ta-sel-try { mask-image: linear-gradient(90deg, #000 85%, transparent); }
+}
+/* On a phone the shortcuts take a line of their own under the title. */
 @media (max-width: 640px) {
-    .ta-sel-bar { align-items: flex-start !important; }
-    .ta-sel-try {
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        scrollbar-width: none;
-        mask-image: linear-gradient(90deg, #000 85%, transparent);
-    }
-    .ta-sel-try::-webkit-scrollbar { display: none; }
-    .ta-sel-try-lead { flex: none; }
+    .ta-sel .ta-sel-try { flex-basis: 100%; }
 }
 /* The chip a shortcut picked pulses as the card opens, so the reader sees where it lives. */
 .ta-sel .ta-chip.ta-flash { animation: ta-sel-flash 0.9s ease-out 2; }
@@ -390,31 +392,135 @@ CSS = """
 .ta-sel .ta-chip[role="switch"][aria-checked="true"] .ta-chip-mark { background: var(--ta-page-color); }
 .ta-sel .ta-chip[role="switch"][aria-checked="true"] .ta-chip-mark::after { transform: translateX(12px); }
 
+/* The page's views (views.view_bar): tabs at the top of its controls, quiet labels with the shown one
+   in ink over a rail in the page's colour, like the top bar's page links, each saying on hover what
+   its view shows; Follow at the right. The selector card hangs under the bar, joined to it as one
+   card, so its choices read as applying to every view. On a phone the tabs scroll sideways in one
+   row and Follow takes a line of its own. */
+.ta-viewbar-block .html-container { padding: 0 !important; }
+.ta-viewbar {
+    --ta-page-color: var(--ta-tabarena);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0 16px;
+    padding: 0 12px 0 10px;
+    border: 1px solid var(--ta-line-soft);
+    border-bottom: 0;
+    border-radius: 14px 14px 0 0;
+    background: var(--ta-toolbar);
+}
+.ta-viewbar[data-page="beyondarena"] { --ta-page-color: var(--ta-beyondarena); }
+/* Pulled up over the gap between blocks so the card's top border lies on the bar's foot. Gradio puts
+   the class on the block and on its inner element too, so only the block (`.block`) moves. */
+.ta-page:has(.ta-viewbar) .block.ta-sel-block { margin-top: -16px !important; }
+/* The tabs and the card share a surface a shade apart from the view under them, as a toolbar over its
+   page, with a firmer line where the view starts. */
+.ta-page:has(.ta-viewbar) .ta-sel { border-radius: 0; border-bottom-color: var(--ta-line); background: var(--ta-toolbar); }
+/* The shown view starts on the card's foot: its first card, or the first row of a figure grid, takes
+   the card's bottom border for its top edge, with square corners where the two meet. Which tiles make
+   that row follows "I care about" (the order rules at `.ta-figgrid`). */
+.ta-page:has(.ta-viewbar) .ta-view { margin-top: -16px !important; }
+.ta-view .ta-figpanel { margin-top: 0; }
+.ta-view :is(.ta-xo-scroll, .ta-figpanel, .ta-view-card:not(.ta-view-card ~ .ta-view-card)),
+.ta-view .ta-figgrid > .ta-tile:first-child,
+.ta-page[data-care="total"] .ta-view .ta-tile[data-key="total"],
+.ta-page[data-care="train"] .ta-view .ta-tile[data-key="train"] {
+    border-top: 0 !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+}
+@media (min-width: 1101px) {
+    .ta-view .ta-figgrid > .ta-tile:not(.ta-tile-wide):first-child + .ta-tile:not(.ta-tile-wide) {
+        border-top: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    .ta-page[data-care="train"] .ta-view .ta-figgrid:has(> [data-key="train"]) > .ta-tile[data-key="total"] {
+        border-top: 1px solid var(--ta-line-soft);
+        border-top-left-radius: 14px;
+        border-top-right-radius: 14px;
+    }
+}
+/* One figure per row: only the one put first joins. */
+@media (max-width: 1100px) {
+    .ta-page[data-care="total"] .ta-view .ta-figgrid:has(> [data-key="total"]) > .ta-tile:first-child:not([data-key="total"]),
+    .ta-page[data-care="train"] .ta-view .ta-figgrid:has(> [data-key="train"]) > .ta-tile:first-child:not([data-key="train"]) {
+        border-top: 1px solid var(--ta-line-soft) !important;
+        border-top-left-radius: 14px !important;
+        border-top-right-radius: 14px !important;
+    }
+}
+.ta-viewtabs { display: flex; flex: none; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+.ta-viewtabs::-webkit-scrollbar { display: none; }
+.ta-viewtab {
+    flex: none;
+    margin: 0;
+    padding: 12px 14px 10px;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    background: none;
+    color: var(--ta-muted);
+    font: inherit;
+    font-size: 0.95rem;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color .14s ease, border-color .14s ease;
+}
+.ta-viewtab:hover { color: var(--ta-ink); }
+.ta-viewtab[aria-selected="true"] { border-bottom-color: var(--ta-page-color); color: var(--ta-ink); }
+.ta-viewtab:focus-visible { outline: 2px solid var(--ta-page-color); outline-offset: -2px; border-radius: 6px; }
+/* What follows the tabs: a warning about the selection, or a note of the shown view. */
+.ta-viewnotes { flex: 1 1 auto; min-width: 0; margin: 0; padding: 8px 0; color: var(--ta-muted); font-size: 0.84rem; line-height: 1.4; }
+.ta-viewnotes:empty { display: none; }
+.ta-viewnote-link {
+    margin: 0 0 0 6px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--ta-ink);
+    font: inherit;
+    font-weight: 600;
+    text-decoration: underline dotted;
+    text-underline-offset: 3px;
+    cursor: pointer;
+}
+.ta-viewnotes .ta-head-warn { margin-left: 8px; }
+.ta-viewbar .ta-follow { flex: none; margin: 0 0 0 auto; }
+@media (max-width: 640px) {
+    .ta-viewbar { padding: 0 8px 8px; }
+    .ta-viewnotes { flex-basis: 100%; padding: 2px 4px 6px; }
+}
+/* One view shows at a time: the one the page names (`data-view`, main.taShowView), the first until
+   it names one. */
+__TA_VIEW_RULES__
+
 /* What the selection covers: the number of datasets, beside the bar and the lines. */
 .ta-sel-result {
     grid-area: result;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    align-items: center;
     min-width: 0;
-    padding: 12px 18px;
+    padding: 6px 16px;
     border-left: 1px solid var(--ta-line-soft);
-    background: linear-gradient(200deg, color-mix(in srgb, var(--ta-page-color) 13%, transparent), transparent 70%);
+    background: linear-gradient(260deg, color-mix(in srgb, var(--ta-page-color) 13%, transparent), transparent 90%);
 }
+.ta-sel[data-open="true"] .ta-sel-result { border-bottom: 1px solid var(--ta-line-soft); }
 .ta-sel-total {
     display: flex;
-    flex-wrap: wrap;
     align-items: baseline;
-    gap: 2px 8px;
+    gap: 6px;
     margin: 0;
     color: var(--ta-ink);
-    font-size: 0.95rem;
+    font-size: 0.84rem;
     font-weight: 700;
+    white-space: nowrap;
 }
 .ta-sel-unit { white-space: nowrap; }
 .ta-sel-num {
     color: var(--ta-page-color);
-    font-size: 2.15rem;
+    font-size: 1.2rem;
     font-weight: 800;
     font-variant-numeric: tabular-nums;
     letter-spacing: -0.03em;
@@ -454,25 +560,6 @@ CSS = """
 .ta-sel-warn-body ul { padding-left: 1.2em; }
 .ta-sel-warn-body > :last-child { margin-bottom: 0; }
 
-/* Where the lines need the card's width, the number stays beside the bar alone and the lines take the
-   whole width under both. */
-@media (max-width: 1420px) {
-    .ta-sel { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; grid-template-areas: "bar result" "main main" "warns warns"; }
-    .ta-sel-result { padding: 10px 18px; }
-    .ta-sel[data-open="true"] .ta-sel-result { border-bottom: 1px solid var(--ta-line-soft); }
-    .ta-sel-num { font-size: 1.45rem; }
-}
-/* On a phone the number goes under the bar, as one line. */
-@media (max-width: 640px) {
-    .ta-sel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "result" "main" "warns"; }
-    .ta-sel-result {
-        flex-direction: row;
-        justify-content: flex-start;
-        border-top: 1px solid var(--ta-line-soft);
-        border-left: 0;
-        background: linear-gradient(100deg, color-mix(in srgb, var(--ta-page-color) 13%, transparent), transparent 60%);
-    }
-}
 /* Where the line cannot hold both rows, the second takes a line of its own, caption in the column. */
 @media (max-width: 1180px) {
     .ta-sel-line { flex-direction: column; }
@@ -526,6 +613,8 @@ CSS = """
     --ta-card: rgba(255, 255, 255, 0.04);
     --ta-strip: rgba(255, 255, 255, 0.06);
     --ta-raised: #1b1b22;
+    /* The controls over a page's views (the tabs and the selector card). */
+    --ta-toolbar: color-mix(in srgb, var(--ta-ink) 7%, var(--ta-page));
     --ta-line: rgba(255, 255, 255, 0.2);
     --ta-line-soft: rgba(255, 255, 255, 0.1);
     --ta-ink: #f4f4f5;
@@ -543,137 +632,8 @@ CSS = """
        orange of its old tab, BeyondArena the teal of its hero. */
     --ta-tabarena: #fb923c;
     --ta-beyondarena: #2dd4bf;
-    /* The dot that marks a benchmark as alive (its latest release). */
-    --ta-live: #4ade80;
-}
-
-/* The bar is fixed, so the block that holds it takes no room, and its column gives back the gap
-   before it. */
-.ta-selbar-host, .ta-selbar-host > .html-container { padding: 0; }
-.column:has(> .ta-selbar-host) { margin-top: -16px; }
-/* Sticky summary of the current selection, revealed once the control card scrolls away (see
-   main.taWatchControls), with the page's "Jump to" menu at its end. Bottom-centre: it is a
-   status line for the whole page and the one element that floats over it. */
-.ta-selbar {
-    position: fixed;
-    left: 50%;
-    top: calc(var(--ta-vp-h) - 18px);
-    z-index: 60;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    max-width: min(94vw, 1100px);
-    padding: 5px;
-    border: 1px solid var(--ta-line);
-    border-radius: 999px;
-    background: rgba(24, 24, 28, 0.94);
-    box-shadow: var(--ta-shadow);
-    color: #dfe5f5;
-    font-family: inherit;
-    /* Hidden until the observer says the controls are off screen. `top` anchors the bar's own
-       top edge, so it is pulled back up by its full height to sit on the line above. */
-    opacity: 0;
-    pointer-events: none;
-    transform: translate(-50%, calc(-100% + 12px)) translateY(var(--ta-vp-top));
-    /* The band offset rides in the same transform, so following the screen costs no layout;
-       only opacity and the reveal slide are transitioned, or every scroll would ease. */
-    transition: opacity .16s ease;
-}
-.ta-selbar.ta-show {
-    opacity: 1;
-    pointer-events: auto;
-    transform: translate(-50%, -100%) translateY(var(--ta-vp-top));
-}
-/* The summary half scrolls sideways on a narrow screen; the menu beside it cannot sit inside
-   that scroller, or the list opening above it would be clipped. */
-.ta-selbar-view {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    min-width: 0;
-    padding: 3px 6px 3px 10px;
-    border-radius: 999px;
-    color: inherit !important;
-    text-decoration: none !important;
-    overflow-x: auto;
-    scrollbar-width: none;
-}
-.ta-selbar-view:hover { background: var(--ta-chip); }
-.ta-selbar-lead {
-    flex: 0 0 auto;
-    font-size: 0.66em;
-    font-weight: 700;
-    letter-spacing: 0.09em;
-    text-transform: uppercase;
-    opacity: 0.5;
-}
-.ta-selchip {
-    flex: 0 0 auto;
-    padding: 3px 9px;
-    border-radius: 999px;
-    background: rgba(158, 176, 208, 0.16);
-    font-size: 0.8em;
-    font-weight: 600;
-    white-space: nowrap;
 }
 
-.ta-selbar-go {
-    flex: 0 0 auto;
-    margin-left: 3px;
-    padding: 3px 10px;
-    border-radius: 999px;
-    background: rgba(110, 140, 245, 0.34);
-    color: #eef2ff;
-    font-size: 0.78em;
-    font-weight: 700;
-    white-space: nowrap;
-}
-.ta-jumpmenu { position: relative; flex: 0 0 auto; }
-.ta-jumpmenu > summary {
-    padding: 6px 12px;
-    border-left: 1px solid var(--ta-line-soft);
-    border-radius: 0 999px 999px 0;
-    font-size: 0.8em;
-    font-weight: 700;
-    white-space: nowrap;
-    list-style: none;
-    cursor: pointer;
-    user-select: none;
-}
-.ta-jumpmenu > summary::-webkit-details-marker { display: none; }
-.ta-jumpmenu > summary::after { content: " \\25B4"; opacity: 0.6; }
-.ta-jumpmenu > summary:hover,
-.ta-jumpmenu[open] > summary { background: var(--ta-chip); }
-.ta-jumpmenu-list {
-    position: absolute;
-    right: 0;
-    bottom: calc(100% + 10px);
-    display: flex;
-    flex-direction: column;
-    min-width: 250px;
-    padding: 6px;
-    border: 1px solid var(--ta-line);
-    border-radius: 12px;
-    background: var(--ta-raised);
-    box-shadow: var(--ta-shadow);
-}
-.ta-jumpmenu-list a,
-.ta-jumpmenu-list button {
-    display: block;
-    padding: 7px 10px;
-    border: 0;
-    border-radius: 7px;
-    background: none;
-    color: var(--ta-ink) !important;
-    font: inherit;
-    font-size: 0.86em;
-    font-weight: 600;
-    text-align: left;
-    text-decoration: none !important;
-    cursor: pointer;
-}
-.ta-jumpmenu-list a:hover,
-.ta-jumpmenu-list button:hover { background: var(--ta-accent-tint); }
 
 
 /* The models-vs-systems warning. It appears the moment a system joins the field, and it is the
@@ -910,25 +870,7 @@ CSS = """
 .ta-expand { padding: 4px 10px !important; font-size: 0.95rem !important; line-height: 1; }
 /* The full table's card (views.make_leaderboard) takes the tile look, below the grid. */
 .ta-lbtile { margin: 0 0 18px 0; }
-/* The dataset browser hangs right under the overview table it extends (views.make_per_dataset_block).
-   On TabArena it is the table's own bottom bar: pulled up over the 16px between blocks so its top
-   border lies on the table's bottom one, the corners where they meet squared. BeyondArena's sits
-   under its overview figures instead, a block of its own. */
-.ta-pdrawer { margin-top: 2px !important; }
-.ta-pdrawer:has(#ta-perdataset-section) {
-    margin-top: -17px !important;
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-}
-.ta-page:has(#ta-perdataset-section) .ta-xo-scroll {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-/* Its bar asks to be opened: a wash of the page's own colour (TabArena orange, BeyondArena teal, as in
-   the top bar and the overview table above it), an icon, the count in the caption and a filled
-   button, and the whole bar takes the click (main.taPdBarClick). Open, the button goes quiet. */
-.ta-pdrawer { --ta-pd-color: var(--ta-tabarena); }
-.ta-pdrawer:has(#beyond-perdataset-section) { --ta-pd-color: var(--ta-beyondarena); }
+/* The selector card's bar (views.selector_card), washed in the page's colour (`--ta-pd-color`). */
 .ta-pdbar {
     cursor: pointer;
     flex-wrap: nowrap !important;
@@ -955,48 +897,9 @@ CSS = """
     color: var(--ta-pd-color);
     background: color-mix(in srgb, var(--ta-pd-color) 20%, transparent);
 }
-.ta-pdtext { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
-.ta-pdbar .ta-figbar-title { font-size: 1.08rem; }
-.ta-pdtoggle {
-    flex: none;
-    margin: 0 !important;
-    padding: 9px 18px;
-    border: 1px solid transparent;
-    border-radius: 999px;
-    background: var(--ta-pd-color);
-    color: var(--ta-on-accent);
-    font: inherit;
-    font-size: 0.9rem;
-    font-weight: 700;
-    white-space: nowrap;
-    cursor: pointer;
-    box-shadow: 0 4px 14px color-mix(in srgb, var(--ta-pd-color) 32%, transparent);
-    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
-}
-.ta-pdbar:hover .ta-pdtoggle {
-    filter: brightness(1.08);
-    transform: translateY(-1px);
-    box-shadow: 0 6px 18px color-mix(in srgb, var(--ta-pd-color) 42%, transparent);
-}
-.ta-pdtoggle:focus-visible { outline: 2px solid var(--ta-pd-color); outline-offset: 3px; }
-.ta-pdbar.is-open .ta-pdtoggle,
-.ta-pdbar.is-open:hover .ta-pdtoggle {
-    padding: 5px 13px;
-    border-color: var(--ta-line-soft);
-    background: transparent;
-    color: var(--ta-ink);
-    font-weight: 600;
-    box-shadow: none;
-    filter: none;
-    transform: none;
-}
 @media (max-width: 640px) {
     .ta-pdbar { flex-wrap: wrap !important; }
-    .ta-pdbar .ta-pdtext { flex-basis: 0; }
-    .ta-pdbar .ta-figbar-actions { width: 100%; }
-    .ta-pdbar:not(.is-open) .ta-pdtoggle { width: 100%; }
 }
-html.ta-tile-open .ta-selbar { display: none !important; }
 
 /* --- Follow a method (views.follow_picker, the ◎ on each overview row, main.taToggleFollow) ----- */
 .ta-follow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px 0; }
@@ -1173,7 +1076,6 @@ html.ta-tile-open .ta-selbar { display: none !important; }
 .ta-xo-scroll {
     --ta-xo-bg: color-mix(in srgb, #ffffff 4%, var(--ta-page));
     overflow: auto;
-    max-height: 680px;
     border: 1px solid var(--ta-line-soft);
     border-radius: 12px;
     background: var(--ta-xo-bg);
@@ -1200,12 +1102,14 @@ html.ta-tile-open .ta-selbar { display: none !important; }
     top: 0;
     z-index: 3;
     height: 32px;
-    background: var(--ta-raised);
+    background: var(--ta-xo-bg);
     color: var(--ta-ink);
     font-size: 0.8rem;
     font-weight: 700;
 }
 .ta-xo thead tr:nth-child(2) th { top: 32px; }
+/* The heading is on the table's own surface; a firmer line under it starts the rows. */
+.ta-xo thead :is(tr:last-child th, th[rowspan]) { border-bottom-color: var(--ta-line); }
 .ta-xo .ta-group-h {
     border-bottom-color: var(--ta-line);
     color: var(--ta-muted);
@@ -1348,7 +1252,7 @@ html.ta-tile-open .ta-selbar { display: none !important; }
     background: var(--ta-xo-bg);
     text-align: left;
 }
-.ta-xo thead .ta-xo-model { z-index: 4; background: var(--ta-raised); }
+.ta-xo thead .ta-xo-model { z-index: 4; background: var(--ta-xo-bg); }
 .ta-xo tbody tr:hover .ta-xo-model { background: color-mix(in srgb, var(--ta-ink) 5%, var(--ta-xo-bg)); }
 .ta-xo-id { display: inline-flex; align-items: center; gap: 8px; }
 /* A logo fills its tile at its own shape and colours; the few whose artwork would vanish on a dark
@@ -1712,33 +1616,24 @@ button.ta-jump { background: none; color: inherit; font: inherit; font-size: 0.9
 .ta-ci-head { opacity: 0.55; font-weight: 400; font-size: 0.82em; }
 
 /* --- A benchmark page's hero (views._page_hero) ---------------------------------------------
-   One sentence on what the benchmark is with its links beside it, a band of four selling points
-   whose numbers come from the data, and the Learn more row. Its colour is the page's own, as on
-   the page's link in the top bar. */
-/* The hero is the page's background, so it sits apart from the results under it: one panel washed
-   faintly in the page's colour, headed by a small "Meet …" eyebrow. */
+   One sentence on what the benchmark is with its links beside it, then the Learn more row, whose
+   pills quote the benchmark's numbers from the data. Its colour is the page's own, as on the
+   page's link in the top bar. The hero is the page's background, so it sits apart from the
+   results under it: one panel washed faintly in the page's colour. */
 .ta-phero {
     --ta-page-color: var(--ta-accent);
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    padding: 14px 18px 16px;
+    gap: 10px;
+    padding: 12px 18px;
     border: 1px solid color-mix(in srgb, var(--ta-page-color) 16%, var(--ta-line-soft));
     border-radius: 16px;
     background: linear-gradient(
         160deg, color-mix(in srgb, var(--ta-page-color) 7%, transparent), color-mix(in srgb, var(--ta-ink) 2%, transparent) 70%
     );
 }
-.ta-phero-eyebrow {
-    margin-bottom: -4px;
-    color: var(--ta-page-color);
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-}
 @media (max-width: 560px) {
-    .ta-phero { padding: 12px 12px 14px; }
+    .ta-phero { padding: 12px; }
 }
 /* The block gap already parts the hero from the top bar and the card under it, and the panel's
    edges line up with the cards below, so Gradio's padding around the block goes. */
@@ -1834,93 +1729,6 @@ button.ta-jump { background: none; color: inherit; font: inherit; font-size: 0.9
 .ta-split > :focus-visible { outline: none; }
 .ta-split:has(:focus-visible) { outline: 2px solid var(--ta-accent); outline-offset: 2px; }
 
-/* The selling points: one band of four, each a big value with a label and a line under it, and
-   each opening the details behind it. A numeric value counts up when the hero first shows: the
-   number is drawn from a CSS counter animated by `ta-count-up` (HEAD), while the text in the
-   page stays the real number for screen readers and copying. */
-.ta-stats {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    overflow: hidden;
-    border: 1px solid var(--ta-line-soft);
-    border-radius: 14px;
-    background:
-        linear-gradient(100deg, color-mix(in srgb, var(--ta-page-color) 10%, transparent), transparent 60%),
-        var(--ta-card);
-}
-.ta-stat {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    min-width: 0;
-    margin: 0;
-    padding: 12px 18px;
-    border: 0;
-    border-left: 1px solid var(--ta-line-soft);
-    border-radius: 0;
-    background: none;
-    color: inherit;
-    font: inherit;
-    text-align: left;
-    text-decoration: none;
-    cursor: pointer;
-    transition: background .14s ease;
-}
-.ta-stat:first-child { border-left: 0; }
-.ta-stat:hover { background: var(--ta-chip); }
-.ta-stat:focus-visible { outline: 2px solid var(--ta-accent); outline-offset: -2px; }
-.ta-stat-num {
-    flex: 0 0 auto;
-    color: var(--ta-page-color);
-    font-size: 2.15rem;
-    font-weight: 800;
-    font-variant-numeric: tabular-nums;
-    letter-spacing: -0.03em;
-    line-height: 1;
-}
-.ta-stat-num[data-count] {
-    --ta-count: var(--ta-count-to);
-    counter-reset: ta-count var(--ta-count);
-    animation: ta-count-up 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-.ta-stat-num[data-count]::after {
-    content: counter(ta-count);
-    content: counter(ta-count) / "";
-}
-.ta-stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.ta-stat-lbl { color: var(--ta-ink); font-size: 0.95rem; font-weight: 700; line-height: 1.25; }
-.ta-stat-line { color: var(--ta-muted); font-size: 0.8rem; line-height: 1.35; }
-.ta-stat[data-live] .ta-stat-line::before {
-    content: "";
-    display: inline-block;
-    width: 7px;
-    height: 7px;
-    margin-right: 6px;
-    border-radius: 50%;
-    background: var(--ta-live);
-    vertical-align: 1px;
-    animation: ta-live-ping 2.4s ease-out infinite;
-}
-.ta-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-}
-@media (prefers-reduced-motion: reduce) {
-    .ta-stat-num[data-count], .ta-stat[data-live] .ta-stat-line::before { animation: none; }
-}
-@media (max-width: 1100px) {
-    .ta-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .ta-stat:nth-child(3) { border-left: 0; }
-    .ta-stat:nth-child(n + 3) { border-top: 1px solid var(--ta-line-soft); }
-}
-@media (max-width: 560px) {
-    .ta-stat { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; }
-    .ta-stat-num { font-size: 1.85rem; }
-}
 
 /* "Your Benchmark?" invite page: two "path" cards side by side. */
 .ta-paths {
@@ -2114,11 +1922,9 @@ button.ta-jump { background: none; color: inherit; font: inherit; font-size: 0.9
    into the page's top-right corner, above the bar's actions; the bar steps down below it. */
 html:has(#huggingface-space-header) .ta-topbar { margin-top: 50px; }
 
-/* A little air above a section that a link jumped to. The figure panels are targets too (the
-   "Below:" row links to each one), and they are addressed by prefix because their ids carry the
-   subset they belong to. */
-#ta-controls-anchor, #ta-overview-section, #lb-detailed, #ta-perdataset-section,
-#beyond-controls-anchor, #beyond-lb-detailed, #beyond-perdataset-section,
+/* A little air above a section that a link jumped to: the view bars, the selector cards, and the
+   figure panels, addressed by prefix because their ids carry the subset they belong to. */
+#ta-views-anchor, #beyond-views-anchor, #ta-controls-anchor, #beyond-controls-anchor,
 [id^="ta-fig-"] { scroll-margin-top: 16px; }
 /* Anchor navigation is the only jump that works inside the Space (a scripted scroll cannot move
    a cross-origin parent), so the easing has to come from CSS rather than from `scrollIntoView`. */
@@ -2399,6 +2205,18 @@ html { scroll-behavior: smooth; }
 }
 """
 
+
+def _view_rules(keys: list[str]) -> str:
+    """The rules that show one view and its notes: the one a page names in ``data-view``, the
+    first until it names one."""
+    pages = [(".ta-page:not([data-view])", keys[0])] + [(f'.ta-page[data-view="{key}"]', key) for key in keys]
+    views = ",\n".join(f"{page} .ta-view:not(.ta-view-{key})" for page, key in pages)
+    notes = ",\n".join(f'{page} .ta-viewnote:not([data-view="{key}"])' for page, key in pages)
+    return f"{views} {{ display: none !important; }}\n{notes} {{ display: none; }}"
+
+
+CSS = CSS.replace("__TA_VIEW_RULES__", _view_rules([key for key, _label in website_texts.VIEW_TABS]))
+
 # --- The opt-in light theme -------------------------------------------------
 # Everything `CSS` above draws in dark-theme colours, restated for a light page. Every selector
 # is scoped to `html.ta-light`, which only the top bar's theme toggle sets (`taSetTheme` in
@@ -2439,7 +2257,6 @@ html.ta-light {
     --ta-shadow: 0 1px 2px rgba(60, 50, 30, 0.08);
     --ta-tabarena: #c2410c;
     --ta-beyondarena: #0f766e;
-    --ta-live: #16a34a;
     /* THEME points Gradio's light body pair at the dark values (see THEME below); the rest of
        its light theme is white, restated here on the soft surfaces. */
     --body-background-fill: var(--ta-page);
@@ -2513,17 +2330,6 @@ __TA_FAMILY_INK__
 html.ta-light .ta-theme-toggle .ta-ico-sun { display: none; }
 html.ta-light .ta-theme-toggle .ta-ico-moon { display: inline; }
 
-/* Section chips, sticky selection bar */
-html.ta-light .ta-selbar {
-    border-color: var(--ta-line);
-    background: rgba(246, 245, 241, 0.96);
-    box-shadow: 0 6px 22px rgba(60, 50, 30, 0.2);
-    color: #1f2740;
-}
-html.ta-light .ta-selchip { background: var(--ta-chip); }
-html.ta-light .ta-selbar-go { background: var(--ta-accent-tint); color: var(--ta-accent-ink); }
-html.ta-light .ta-jumpmenu-list { box-shadow: 0 10px 30px rgba(60, 50, 30, 0.2); }
-
 /* Figure panels and the full-table card. The figures inside stay on their white paper. */
 html.ta-light .ta-figpanel,
 html.ta-light .ta-tile,
@@ -2592,15 +2398,6 @@ HEAD = """
    the same side; the script below does the rest. */
 :root { color-scheme: dark; }
 html, body, gradio-app { background: #0f0f11; }
-/* The hero's animations (see `.ta-stat-num` and `.ta-stat[data-live]` in `CSS`). They live here
-   rather than in `CSS`, whose rescoping is written for rules with selectors, not at-rules.
-   `--ta-count` is registered as an integer so that it animates rather than flips. */
-@property --ta-count { syntax: "<integer>"; inherits: false; initial-value: 0; }
-@keyframes ta-count-up { from { --ta-count: 0; } }
-@keyframes ta-live-ping {
-    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ta-live) 55%, transparent); }
-    70%, 100% { box-shadow: 0 0 0 6px transparent; }
-}
 /* The selector chip a shortcut picked (`.ta-sel .ta-chip.ta-flash` in `CSS`). */
 @keyframes ta-sel-flash {
     0%, 100% { box-shadow: 0 0 0 0 transparent; }
@@ -2830,8 +2627,6 @@ window.taExpandTile = function (uid) {
     tile.before(backdrop);
     tile.classList.add("ta-tile-max");
     tile.querySelector(".ta-expand").setAttribute("aria-pressed", "true");
-    // The bottom pill would sit on top of the backdrop.
-    document.documentElement.classList.add("ta-tile-open");
     taSetBand(taBand);
 };
 function taCollapseTile(tile) {
@@ -2839,7 +2634,6 @@ function taCollapseTile(tile) {
     const btn = tile.querySelector(".ta-expand");
     if (btn) btn.setAttribute("aria-pressed", "false");
     document.querySelectorAll(".ta-tile-backdrop").forEach((backdrop) => backdrop.remove());
-    document.documentElement.classList.remove("ta-tile-open");
 }
 document.addEventListener("keydown", (ev) => {
     if (ev.key === "Escape") document.querySelectorAll(".ta-tile-max").forEach(taCollapseTile);
@@ -3015,7 +2809,11 @@ window.taGoToPage = function (link) {
     const target = taTabButton(link.dataset.tab);
     if (target) target.click();
     const slug = link.dataset.slug;
-    const query = slug === window.taPageSlugs[0] ? "" : "?tab=" + slug;
+    const params = new URLSearchParams(slug === window.taPageSlugs[0] ? "" : "tab=" + slug);
+    const tabs = document.querySelector(`.ta-viewbar[data-page="${slug}"]`);
+    const view = tabs && tabs.closest(".ta-page") && tabs.closest(".ta-page").dataset.view;
+    if (view && view !== taFirstView()) params.set("view", view);
+    const query = params.toString() ? "?" + params.toString() : "";
     try { history.replaceState(null, "", location.pathname + query + location.hash); } catch (err) {}
     if (window.parent !== window) {
         try { window.parent.postMessage({ queryString: query }, "https://huggingface.co"); } catch (err) {}
@@ -3419,15 +3217,69 @@ window.taSelector = function (root, send) {
     });
     paint();
 };
-/* A link to a selector card (the bottom bar's "change", the Jump to menu) opens the card, in the
-   capture phase so that it is open before `taJumpToAnchor` measures where it is. */
+/* --- A page's views (views.view_bar) ----------------------------------------------------------
+   Every view is on the page from the start; the page shows the one its `data-view` names (the
+   stylesheet's view rules, the first until it names one). A tab switches it in the browser: the tabs mark the shown one, its explorers load (they wait until
+   they are seen, `taLoadFrames`), tile captions are measured again now that they have a width
+   (`taFitCaptions`), and the view goes into the address as `?view=<key>` (dropped for the first),
+   inside the Space into the Hugging Face page's URL too, so the address opens it again. */
+function taFirstView() {
+    const tab = document.querySelector(".ta-viewtab");
+    return tab ? tab.dataset.view : "";
+}
+/* The tab bar is drawn again with every new selection (for its Follow list), so it marks the view
+   the page already shows. */
+window.taSyncViewTabs = function (root) {
+    const page = root.closest(".ta-page");
+    const view = (page && page.dataset.view) || taFirstView();
+    root.querySelectorAll(".ta-viewtab").forEach((tab) => {
+        tab.setAttribute("aria-selected", String(tab.dataset.view === view));
+    });
+    if (page) taSyncFollow(page);
+};
+window.taShowView = function (page, view, record = true) {
+    if (!page || !view) return;
+    page.dataset.view = view;
+    page.querySelectorAll(".ta-viewtab").forEach((tab) => {
+        tab.setAttribute("aria-selected", String(tab.dataset.view === view));
+    });
+    window.taLoadFrames();
+    taFitCaptions();
+    if (record) taSetViewParam(view);
+};
+function taSetViewParam(view) {
+    const params = new URLSearchParams(location.search);
+    if (view && view !== taFirstView()) params.set("view", view);
+    else params.delete("view");
+    const query = params.toString() ? "?" + params.toString() : "";
+    if (query === location.search) return;
+    try { history.replaceState(null, "", location.pathname + query + location.hash); } catch (err) {}
+    if (window.parent !== window) {
+        try { window.parent.postMessage({ queryString: query }, "https://huggingface.co"); } catch (err) {}
+    }
+}
 document.addEventListener("click", (event) => {
     const path = typeof event.composedPath === "function" ? event.composedPath() : [event.target];
-    const link = path.find((node) => node && node.matches && node.matches('a[href^="#"]'));
-    const block = link && document.getElementById(link.getAttribute("href").slice(1));
-    const card = block && block.querySelector(".ta-sel");
-    if (card && card._taSetOpen) card._taSetOpen(true);
+    const tab = path.find((node) => node && node.matches && node.matches(".ta-viewtab"));
+    if (tab) window.taShowView(tab.closest(".ta-page"), tab.dataset.view);
 }, true);
+/* A shared link's view belongs to the page the link names, which shows only once the server has
+   selected it, so this waits for that page's tabs (up to 15 s); a name the page has no view for is
+   dropped from the address. */
+(function taOpenLinkedView() {
+    const params = new URLSearchParams(location.search);
+    const view = params.get("view");
+    if (!view || !/^[a-z0-9]+$/.test(view)) return;
+    const slug = params.get("tab") || window.taPageSlugs[0];
+    let tries = 0;
+    const attempt = () => {
+        const tab = document.querySelector(`.ta-viewbar[data-page="${slug}"] .ta-viewtab[data-view="${view}"]`);
+        if (tab) window.taShowView(tab.closest(".ta-page"), view, false);
+        else if (document.querySelector(`.ta-viewbar[data-page="${slug}"]`) || ++tries >= 60) taSetViewParam("");
+        else setTimeout(attempt, 250);
+    };
+    attempt();
+})();
 /* Copy a block's text, as the citation dialog's button does. Where the clipboard is not offered
    (some embeds refuse it), the text is selected instead so the reader can copy it by hand. */
 window.taCopy = function (button, id) {
@@ -3461,8 +3313,8 @@ window.taCloseDialogs = function () {
 document.addEventListener("click", (ev) => {
     if (ev.target.classList && ev.target.classList.contains("ta-dialog-overlay")) window.taCloseDialogs();
 });
-function taCloseJumpMenus(except) {
-    const open = "details.ta-jumpmenu[open], details.ta-dl[open], details.ta-follow-pick[open]";
+function taCloseMenus(except) {
+    const open = "details.ta-dl[open], details.ta-follow-pick[open]";
     document.querySelectorAll(open).forEach((menu) => {
         if (menu !== except) menu.open = false;
     });
@@ -3470,34 +3322,25 @@ function taCloseJumpMenus(except) {
 document.addEventListener("keydown", (ev) => {
     if (ev.key !== "Escape") return;
     window.taCloseDialogs();
-    taCloseJumpMenus(null);
+    taCloseMenus(null);
 });
-/* A pick closes the menu (the bottom bar's, the overview's metric menu, a panel's downloads), and
-   so does a click anywhere else. Clicks on its own summary are left to the browser, which opens and closes it.
-   The Follow picker stays open through its picks, since it takes several. */
+/* A pick closes a panel's download menu, and so does a click anywhere else. Clicks on its own
+   summary are left to the browser, which opens and closes it. The Follow picker stays open
+   through its picks, since it takes several. */
 document.addEventListener("click", (ev) => {
-    const menus = "details.ta-jumpmenu, details.ta-dl, details.ta-follow-pick";
+    const menus = "details.ta-dl, details.ta-follow-pick";
     const menu = ev.target.closest && ev.target.closest(menus);
-    taCloseJumpMenus(menu);
-    if (menu && ev.target.closest(".ta-jumpmenu-list a, .ta-jumpmenu-list button, .ta-dl-menu button")) menu.open = false;
+    taCloseMenus(menu);
+    if (menu && ev.target.closest(".ta-dl-menu button")) menu.open = false;
 });
 
-/* Reveal the selection bar once the control card has scrolled out of view, and hide it again
-   while an open dataset browser fills the view (taOverDataBrowser): that browser has its own
-   contender, sort and filter controls, so a second floating bar of selectors over it competes for
-   the same job.
-
-   IntersectionObservers rather than a scroll handler: no work on frames where nothing crossed a
-   boundary. Re-attached after Gradio re-renders, since the elements are replaced. */
-let taControlsSeen = null;
-
 /* The visible band, written onto the elements pinned to it rather than onto :root. A custom
    property set on the root is inherited by every element on the page, so each scroll report
    restyled all six thousand of them (~15 ms) while the reader was scrolling, in the frame whose
    main thread also has to paint what scrolls into view; on these few it restyles only them.
    `taBand` keeps the numbers for the scripts below; null while our viewport is the screen,
    where the stylesheet's own defaults apply. */
-const TA_BAND_READERS = ".ta-selbar, .ta-dialog-overlay, .ta-tile-max, .ta-tile-backdrop, #ta-debug-readout";
+const TA_BAND_READERS = ".ta-dialog-overlay, .ta-tile-max, .ta-tile-backdrop, #ta-debug-readout";
 let taBand = null;
 function taSetBand(band) {
     taBand = band;
@@ -3513,46 +3356,12 @@ function taSetBand(band) {
     taLoadFramesInBand();
 }
 
-/* Is an open dataset browser across the middle of the reader's view? It has its own contender,
-   filter and sort controls, so the selection bar would compete with it there. Asked of the visible
-   band rather than of an IntersectionObserver, because the two environments move different
-   things: top-level the page scrolls, so the frame's own top moves and --ta-vp-top stays 0;
-   embedded, the Space's frame is as tall as its content and never scrolls, so the browser's top is
-   a fixed document position and the band moves instead. Comparing the two covers both. */
-function taOverDataBrowser() {
-    const frame = document.querySelector("iframe.ta-explorer[title^='Per-dataset'][src]");
-    if (!frame) return false;
-    const bandTop = taBand ? taBand.top : 0;
-    const bandH = taBand ? taBand.h : window.innerHeight;
-    const box = frame.getBoundingClientRect();
-    const middle = bandTop + bandH * 0.5;
-    return box.top <= middle && box.bottom >= middle;
-}
-
-function taSyncSelbar() {
-    const bar = document.querySelector(".ta-selbar");
-    if (bar) bar.classList.toggle("ta-show", taControlsSeen === false && !taOverDataBrowser());
-}
-function taWatchControls() {
-    const anchor = document.getElementById("ta-controls-anchor");
-    const bar = document.querySelector(".ta-selbar");
-    if (!anchor || !bar) return;
-    taSyncSelbar();
-    if (anchor.dataset.taWatched) return;
-    anchor.dataset.taWatched = "1";
-    new IntersectionObserver((entries) => {
-        taControlsSeen = entries[0].isIntersecting;
-        taSyncSelbar();
-    }, { rootMargin: "-40px 0px 0px 0px" }).observe(anchor);
-}
-
 /* --- Keep --ta-vp-top / --ta-vp-h on the visible band ----------------------
    Only does anything when this page's viewport is not the screen. Embedded in a Hugging Face
    Space it is not: HF sizes the Space iframe to the app's whole content, so the iframe never
    scrolls, the outer page does, and our viewport is the entire document. Everything pinned to a
-   screen edge then pins to the top of a six-thousand-pixel page instead: the selection bar
-   waits at the very bottom, and opening a dialog blacks out the whole page with its content
-   parked far above the screen.
+   screen edge then pins to the top of a six-thousand-pixel page instead: opening a dialog
+   blacks out the whole page with its content parked far above the screen.
 
    The parent is cross-origin, so its scroll position is unreadable. IntersectionObserver's
    implicit root is the top-level viewport though, and it reports the intersection in *our*
@@ -3637,7 +3446,6 @@ function taOnPageInfo(info) {
         taSetBand(null);
     } else {
         taSetBand({ top: Math.round(top), h: Math.round(bottom - top) });
-        taSyncSelbar();   // the band moved, so what the reader has reached changed with it
     }
     taReportViewport();
 }
@@ -3752,7 +3560,6 @@ function taTrackViewport() {
         // then there are two scrollports rather than none. Both cases come out right here,
         // because a page that cannot scroll has `scrollY === 0` anyway.
         taSetBand({ top: Math.round(top), h: Math.round(bottom - top) });
-        taSyncSelbar();
         taReportViewport();
     }, { threshold: TA_STEPS });
 
@@ -3773,7 +3580,6 @@ new MutationObserver(() => {
     // Coalesce a burst of mutations into one pass; the guards above make it idempotent.
     clearTimeout(window._taStampTimer);
     window._taStampTimer = setTimeout(() => {
-        taWatchControls();
         taTrackViewport();
         taSetBand(taBand);
         // A re-render brings fresh frames to load, a page switch a new page.
@@ -3786,10 +3592,7 @@ new MutationObserver(() => {
         taFitTopBar();
     }, 60);
 }).observe(document.body, { childList: true, subtree: true });
-// Top-level there is no band to track, so the section's own position is what moves.
-window.addEventListener("scroll", taSyncSelbar, { passive: true });
 document.addEventListener("DOMContentLoaded", () => {
-    taWatchControls();
     taTrackViewport();
     taReportViewport();
     taSyncThemeChip();
@@ -3868,7 +3671,7 @@ window.taSendExclude = function (frame) {
 /* How tall the reader's visible band is, for the per-dataset browser's "fit to screen" button.
    The frame cannot work this out for itself: it is sized to its own content, so its
    `innerHeight` is the length of its page rather than of the screen. We already track the band
-   for the selection bar and the dialogs (`taBand`), so send that. */
+   for the dialogs (`taBand`), so send that. */
 window.taSendPerDatasetViewport = function (frame) {
     if (frame.dataset.task === undefined) return;
     const height = taBand && taBand.h > 200 ? taBand.h : window.innerHeight;
@@ -3878,22 +3681,6 @@ window.taSendPerDatasetViewport = function (frame) {
     } catch (err) { /* not ready; it will ask again with its next height report */ }
 };
 
-/* That button is HTML inside the panel's title bar, so it cannot be a Gradio component itself;
-   it forwards the click to the hidden one that actually reaches the server. */
-/* The dataset browser's bar opens and closes it from anywhere on it, not only from its button; the
-   download menu inside it keeps its own clicks. */
-window.taPdBarClick = function (ev, uid) {
-    if (ev.target.closest(".ta-dl")) return;
-    window.taTogglePerDataset(uid);
-};
-window.taTogglePerDataset = function (uid) {
-    // Gradio puts `elem_id` on the <button> itself for gr.Button, and on a wrapper for most
-    // other components; accept either so this does not depend on which.
-    const node = document.getElementById(uid + "-toggle");
-    const real = node && (node.tagName === "BUTTON" ? node : node.querySelector("button"));
-    if (real) real.click();
-};
-
 /* --- Leaderboard table sorting ---------------------------------------------
    Click a header to sort the rows beneath it; click again to reverse. Numeric
    columns are marked `data-type="num"` and every cell carries the raw value in

pages.py

@@ -8,8 +8,8 @@ hosted elsewhere). Adding a leaderboard is a one-entry edit to :data:`PAGES`.
 
 from __future__ import annotations
 
-import html
 import itertools
+import re
 from dataclasses import dataclass
 from pathlib import Path
 
@@ -46,7 +46,6 @@ from views import (
     METRIC_NOTES,
     Choice,
     ChoiceRow,
-    make_selection_bar,
     METRIC_LABELS,
     make_beyond_hero,
     make_beyond_overview_figure,
@@ -54,16 +53,16 @@ from views import (
     has_end_to_end,
     make_tabarena_hero,
     lb_spec,
-    open_doc,
     follow_picker,
+    VIEW_TILES,
     make_figure_grid,
     make_leaderboard,
     make_per_dataset_block,
     metric_definitions_html,
     picked,
     render_markdown,
-    section_head,
     selector_card,
+    view_bar,
 )
 
 
@@ -316,31 +315,6 @@ def _render_control_band(
         api_visibility="private",
     )
 
-    # The bottom bar re-renders on any selector change, so it can never describe a stale view.
-    @gr.render(
-        inputs=[
-            entrants_state,
-            care_state,
-            metric_state,
-            tasks_state,
-            datasets_state,
-            impute_state,
-            splits_state,
-            commercial_state,
-        ]
-    )
-    def _render_selection_bar(entrants, care, metric, tasks, datasets, imputation, splits, noncommercial):
-        make_selection_bar(
-            entrants=entrants,
-            care=care,
-            metric=metric,
-            tasks=tasks,
-            datasets=datasets,
-            imputation=imputation,
-            splits=splits,
-            include_noncommercial=noncommercial,
-        )
-
 
 def render_internal_page(page: LeaderboardPage) -> None:
     make_tabarena_hero(page.data_root, _tabarena_docs())
@@ -353,6 +327,21 @@ def render_internal_page(page: LeaderboardPage) -> None:
     tasks_state = gr.State("all")
     datasets_state = gr.State("all")
     commercial_state = gr.State(True)
+    selection = [entrants_state, impute_state, splits_state, tasks_state, datasets_state, commercial_state]
+
+    def _lb(ent, imp, spl, tsk, dst, noncommercial) -> LBContainer:
+        subset = Subset(entrants=ent, imputation=imp, splits=spl, tasks=tsk, datasets=dst)
+        return LBContainer(
+            data_root=page.data_root, subset=subset, name=subset_name(subset), include_noncommercial=noncommercial
+        )
+
+    # -- The views' tabs, then the selector card joined under them, then the views. Every view is on
+    # the page from the start and the browser shows one (main.taShowView), so a tab switch costs no
+    # round trip; each view's content renders from the selection it follows. The tab bar renders
+    # with the selection too, for the Follow picker's list.
+    @gr.render(inputs=selection)
+    def _render_view_bar(*args):
+        _view_bar_block("tabarena", _lb(*args), website_texts.LB_HINT)
 
     _render_control_band(
         page.data_root,
@@ -366,105 +355,82 @@ def render_internal_page(page: LeaderboardPage) -> None:
         commercial_state,
     )
 
-    # -- The Summary across all subsets. It follows the selectors too: the column each one points at
-    # leads its group and is tinted, so the reader's own view is where their eye already is.
-    @gr.render(inputs=[entrants_state, tasks_state, datasets_state, care_state, commercial_state])
-    def _render_overview(entrants, tasks, datasets, care, noncommercial):
-        make_cross_subset_overview(
-            page.data_root,
-            entrants=entrants,
-            tasks=tasks,
-            datasets=datasets,
-            care=care,
-            include_noncommercial=noncommercial,
-        )
+    with gr.Column(elem_classes=["ta-view", "ta-view-leaderboard"]):
+
+        @gr.render(inputs=selection)
+        def _render_leaderboard(*args):
+            lb = _lb(*args)
+            if not _published(lb):
+                gr.Markdown(website_texts.SUBSET_MISSING, elem_classes="ta-warnbox", container=False)
+                return
+            make_figure_grid(lb, VIEW_TILES["leaderboard"])
+            make_leaderboard(lb, opened=True)
+
+    # The Summary across all subsets follows the selectors too: the column each one points at leads
+    # its group and is tinted, so the reader's own view is where their eye already is.
+    with gr.Column(elem_classes=["ta-view", "ta-view-summary"]):
+
+        @gr.render(inputs=[entrants_state, tasks_state, datasets_state, care_state, commercial_state])
+        def _render_overview(entrants, tasks, datasets, care, noncommercial):
+            make_cross_subset_overview(
+                page.data_root,
+                entrants=entrants,
+                tasks=tasks,
+                datasets=datasets,
+                care=care,
+                include_noncommercial=noncommercial,
+            )
 
-    # -- Dataset by dataset: the browser hangs under the overview table, collapsed. Both look across
-    # the whole benchmark rather than at the one leaderboard selected below. Its own render block, so
-    # that opening it rebuilds nothing else.
-    per_dataset_open = gr.State(False)
+    # "I care about" and "Measured by" are not inputs of the figure views: their grids follow them
+    # in the browser.
+    for view in ("time", "h2h"):
+        with gr.Column(elem_classes=["ta-view", f"ta-view-{view}"]):
 
-    @gr.render(
-        inputs=[
-            per_dataset_open,
-            entrants_state,
-            impute_state,
-            splits_state,
-            tasks_state,
-            datasets_state,
-            commercial_state,
-        ]
-    )
-    def _render_per_dataset(opened, ent, imp, spl, tsk, dst, noncommercial):
-        subset = Subset(entrants=ent, imputation=imp, splits=spl, tasks=tsk, datasets=dst)
-        lb = LBContainer(
-            data_root=page.data_root, subset=subset, name=subset_name(subset), include_noncommercial=noncommercial
-        )
-        toggle = make_per_dataset_block(lb, opened=opened, anchor="ta-perdataset-section")
-        toggle.click(lambda now: not now, per_dataset_open, per_dataset_open, api_visibility="private")
+            @gr.render(inputs=selection)
+            def _render_figures(*args, view=view):
+                lb = _lb(*args)
+                if not _published(lb):
+                    gr.Markdown(website_texts.SUBSET_MISSING, elem_classes="ta-warnbox", container=False)
+                    return
+                make_figure_grid(lb, VIEW_TILES[view])
 
-    # -- The selected leaderboard, under a heading that says what the selection covers. "I care
-    # about" and "Measured by" are not inputs: the figure grid follows them in the browser.
-    @gr.render(
-        inputs=[
-            entrants_state,
-            impute_state,
-            splits_state,
-            tasks_state,
-            datasets_state,
-            commercial_state,
-        ]
-    )
-    def _render_subset(ent, imp, spl, tsk, dst, noncommercial):
-        subset = Subset(entrants=ent, imputation=imp, splits=spl, tasks=tsk, datasets=dst)
-        lb = LBContainer(
-            data_root=page.data_root, subset=subset, name=subset_name(subset), include_noncommercial=noncommercial
-        )
-        # The table is the one file every published cell has; a folder alone can be an empty
-        # shell left by a skipped evaluation (a subset with no dataset of that task type).
-        if not (lb.base_path / "website_leaderboard.csv").is_file():
-            gr.HTML(section_head(website_texts.LB_TITLE, anchor="lb-detailed", hint=website_texts.LB_HINT))
-            gr.Markdown(website_texts.SUBSET_MISSING, elem_classes="ta-warnbox", container=False)
-            return
+    with gr.Column(elem_classes=["ta-view", "ta-view-datasets"]):
+
+        @gr.render(inputs=selection)
+        def _render_per_dataset(*args):
+            make_per_dataset_block(_lb(*args))
+
+
+def _view_bar_block(slug: str, lb: LBContainer, hint: str) -> None:
+    """A page's view tabs with Follow (views.view_bar), for the selection ``lb``; each tab's hover text
+    ends with what the selection covers, and a warning follows the tabs where it has one."""
+    if not _published(lb):
+        bar = view_bar(slug)
+    else:
         line, notes = lb_spec(lb)
-        # The Follow row sits under the heading, before the figures it marks.
-        gr.HTML(
-            section_head(
-                website_texts.LB_TITLE, line, anchor="lb-detailed", hint=f"{website_texts.LB_HINT} {notes}".strip()
-            )
-            + follow_picker(lb)
+        warn = re.search(r'<span class="ta-head-warn".*?</span>', line)
+        bar = view_bar(
+            slug,
+            follow=follow_picker(lb),
+            hint=f"{re.sub(r'<[^>]+>', '', line)}. {hint} {notes}".strip(),
+            extra=warn.group(0) if warn else "",
         )
-        # The table closes the section as its detailed reference, collapsed because that is what a
-        # reference is for.
-        make_figure_grid(lb)
+    gr.HTML(bar, js_on_load="taSyncViewTabs(element);", apply_default_css=False, elem_classes="ta-viewbar-block")
 
-    @gr.render(
-        inputs=[
-            entrants_state,
-            impute_state,
-            splits_state,
-            tasks_state,
-            datasets_state,
-            commercial_state,
-        ]
-    )
-    def _render_leaderboard_table(ent, imp, spl, tsk, dst, noncommercial):
-        subset = Subset(entrants=ent, imputation=imp, splits=spl, tasks=tsk, datasets=dst)
-        lb = LBContainer(
-            data_root=page.data_root, subset=subset, name=subset_name(subset), include_noncommercial=noncommercial
-        )
-        if not (lb.base_path / "website_leaderboard.csv").is_file():
-            return
-        make_leaderboard(lb)
+
+def _published(lb: LBContainer) -> bool:
+    """Whether the selected cell has a leaderboard. The table is the one file every published cell
+    has; a folder alone can be an empty shell left by a skipped evaluation (a subset with no
+    dataset of that task type)."""
+    return (lb.base_path / "website_leaderboard.csv").is_file()
 
 
 def render_beyondarena_page(page: LeaderboardPage) -> None:
     """The BeyondArena leaderboard: four crossed filter axes, always on the ``core2k`` protocol.
 
-    The cross-subset overview stays the two ``plot_subset_results`` images rather than TabArena's
-    HTML heatmap. Below the control card everything is TabArena's: the figure grid ordered by
-    "I care about", the full table and the per-dataset browser, read from
-    the selected cell's ``data_beyondarena/subsets/split_*/size_*/features_*/tasks_*/``.
+    The views are TabArena's, under the same tabs, except the Summary, which stays the two
+    ``plot_subset_results`` images rather than TabArena's HTML table. The others read the selected
+    cell's ``data_beyondarena/subsets/split_*/size_*/features_*/tasks_*/``.
     """
     # Graceful fallback until the artifacts are generated (see
     # scripts/run_generate_beyondarena_website_artifacts.py in the tabarena repo).
@@ -485,31 +451,15 @@ def render_beyondarena_page(page: LeaderboardPage) -> None:
 
     make_beyond_hero(page.data_root, _beyond_docs())
 
-    # -- Cross-subset overview (image, not the TabArena HTML heatmap)
-    gr.HTML(
-        section_head(
-            website_texts.OVERVIEW_TITLE,
-            html.escape(website_texts.BEYOND_OVERVIEW_LINE),
-            hint=website_texts.BEYOND_OVERVIEW_HINT,
-            actions=(
-                '<span class="ta-section-links">'
-                f'<button type="button" class="ta-jump" onclick="{open_doc("beyondarena", "subsets")}">'
-                f"{website_texts.BEYOND_SUBSETS_LINK}</button>"
-                f'<a href="#beyond-lb-detailed" class="ta-jump">{website_texts.BEYOND_JUMP_DETAILS}</a></span>'
-            ),
-        )
-    )
-    make_beyond_overview_figure(page.data_root)
-
-    # One state per filter axis, in BEYOND_AXES order, each starting on its "all" chip. Made here,
-    # above the control card that sets them, because the dataset browser under the overview reads
-    # them too.
+    # One state per filter axis, in BEYOND_AXES order, each starting on its "all" chip.
     axis_states = [gr.State("all") for _ in BEYOND_AXES]
     care_state = gr.State("quality")
     metric_state = gr.State("elo")
     commercial_state = gr.State(True)
+    selection = [*axis_states, commercial_state]
 
-    def _lb(keys: tuple[str, ...], noncommercial: bool) -> LBContainer:
+    def _lb(*args) -> LBContainer:
+        *keys, noncommercial = args
         subset = BeyondSubset(**{field: key for (field, _caption, _labels), key in zip(BEYOND_AXES, keys, strict=True)})
         return LBContainer(
             data_root=page.data_root,
@@ -518,59 +468,51 @@ def render_beyondarena_page(page: LeaderboardPage) -> None:
             include_noncommercial=noncommercial,
         )
 
-    # -- Dataset by dataset, under the overview: read from the "full" subset and told which slice is
-    # selected.
-    per_dataset_open = gr.State(False)
+    def _missing(lb: LBContainer) -> None:
+        # The generator skips exactly the cells no dataset falls into, so a missing folder with
+        # filters set means an empty intersection, not a deployment gap.
+        missing = website_texts.BEYOND_CELL_EMPTY if lb.subset.filters else website_texts.SUBSET_MISSING
+        gr.Markdown(missing, elem_classes="ta-warnbox", container=False)
 
-    @gr.render(inputs=[per_dataset_open, *axis_states, commercial_state])
-    def _render_beyond_per_dataset(opened, *args):
-        *keys, noncommercial = args
-        lb = _lb(tuple(keys), noncommercial)
-        toggle = make_per_dataset_block(
-            lb,
-            opened=opened,
-            source_subset=BeyondSubset(),
-            filter_attrs=beyond_per_dataset_attrs(lb.subset),
-            anchor="beyond-perdataset-section",
-        )
-        toggle.click(lambda now: not now, per_dataset_open, per_dataset_open, api_visibility="private")
+    @gr.render(inputs=selection)
+    def _render_beyond_view_bar(*args):
+        _view_bar_block("beyondarena", _lb(*args), website_texts.BEYOND_LB_HINT)
 
     _render_beyond_control_band(page.data_root, axis_states, care_state, metric_state, commercial_state)
 
-    # -- The selected leaderboard: the TabArena figure grid for the selected subset, under a heading
-    # that says what the selection covers.
-
-    @gr.render(inputs=[*axis_states, commercial_state])
-    def _render_beyond_subset(*args):
-        *keys, noncommercial = args
-        lb = _lb(tuple(keys), noncommercial)
-        if not (lb.base_path / "website_leaderboard.csv").is_file():
-            # The generator skips exactly the cells no dataset falls into, so a missing folder
-            # with filters set means an empty intersection, not a deployment gap.
-            missing = website_texts.BEYOND_CELL_EMPTY if lb.subset.filters else website_texts.SUBSET_MISSING
-            gr.HTML(
-                section_head(website_texts.LB_TITLE, anchor="beyond-lb-detailed", hint=website_texts.BEYOND_LB_HINT)
-            )
-            gr.Markdown(missing, elem_classes="ta-warnbox", container=False)
-            return
-        line, notes = lb_spec(lb)
-        gr.HTML(
-            section_head(
-                website_texts.LB_TITLE,
-                line,
-                anchor="beyond-lb-detailed",
-                hint=f"{website_texts.BEYOND_LB_HINT} {notes}".strip(),
-            )
-            + follow_picker(lb)
-        )
-        make_figure_grid(lb)
-
-    @gr.render(inputs=[*axis_states, commercial_state])
-    def _render_beyond_table(*args):
-        *keys, noncommercial = args
-        lb = _lb(tuple(keys), noncommercial)
-        if (lb.base_path / "website_leaderboard.csv").is_file():
-            make_leaderboard(lb)
+    with gr.Column(elem_classes=["ta-view", "ta-view-leaderboard"]):
+
+        @gr.render(inputs=selection)
+        def _render_beyond_leaderboard(*args):
+            lb = _lb(*args)
+            if not _published(lb):
+                _missing(lb)
+                return
+            make_figure_grid(lb, VIEW_TILES["leaderboard"])
+            make_leaderboard(lb, opened=True)
+
+    # The Summary: the overview images, which hold every subset whatever is selected.
+    with gr.Column(elem_classes=["ta-view", "ta-view-summary"]):
+        make_beyond_overview_figure(page.data_root)
+
+    for view in ("time", "h2h"):
+        with gr.Column(elem_classes=["ta-view", f"ta-view-{view}"]):
+
+            @gr.render(inputs=selection)
+            def _render_beyond_figures(*args, view=view):
+                lb = _lb(*args)
+                if not _published(lb):
+                    _missing(lb)
+                    return
+                make_figure_grid(lb, VIEW_TILES[view])
+
+    # Per dataset: read from the "full" subset and told which slice is selected.
+    with gr.Column(elem_classes=["ta-view", "ta-view-datasets"]):
+
+        @gr.render(inputs=selection)
+        def _render_beyond_per_dataset(*args):
+            lb = _lb(*args)
+            make_per_dataset_block(lb, source_subset=BeyondSubset(), filter_attrs=beyond_per_dataset_attrs(lb.subset))
 
 
 def _render_beyond_control_band(

views.py

@@ -419,8 +419,9 @@ def leaderboard_table_html(df: pd.DataFrame, columns: list[str], table_id: str)
     )
 
 
-def make_leaderboard(lb: LBContainer) -> None:
-    """The full leaderboard table for one subset, as a card like the figure tiles.
+def make_leaderboard(lb: LBContainer, *, opened: bool = False) -> None:
+    """The full leaderboard table for one subset, as a card like the figure tiles, ``opened`` or
+    closed.
 
     The table is a generated artifact (`leaderboard_table.html`, built by
     `tabarena.plot.interactive.leaderboard_table`), embedded the same way as the
@@ -428,8 +429,8 @@ def make_leaderboard(lb: LBContainer) -> None:
     family and variant colours, chip components and imputation markers rather than
     reimplementing them here, where they drifted.
 
-    It closes the section as its reference, so it opens on request (``main.taToggleTable``, in the
-    browser); its frame loads only then. The download sits in the card's header but is the
+    Its button shows and hides it in the browser (``main.taToggleTable``); its frame loads only
+    while it is shown. The download sits in the card's header but is the
     frame's own (``main.taLeaderboardCsv``): only the frame knows the current filters, columns and
     sort order. On TabArena the frame is also told which methods the latest releases added, for
     its "new" badges (``data-new``, ``main.taSendNew``).
@@ -452,12 +453,13 @@ def make_leaderboard(lb: LBContainer) -> None:
         f'<section class="ta-tile ta-lbtile" id="{uid}" data-role="table"><div class="ta-figbar">'
         f'<span class="ta-figbar-title" title="{caption}">{website_texts.TABLE_TITLE}</span>'
         f'<span class="ta-figbar-sub" title="{caption}">{caption}</span><span class="ta-figbar-actions">'
-        '<button type="button" class="ta-viewbtn ta-csvbtn" hidden onclick="taLeaderboardCsv(this)" '
+        f'<button type="button" class="ta-viewbtn ta-csvbtn"{"" if opened else " hidden"} onclick="taLeaderboardCsv(this)" '
         'title="Download the rows and columns shown, in the current sort order">Download CSV</button>'
-        '<button type="button" class="ta-viewbtn ta-tabletoggle" aria-expanded="false" '
+        f'<button type="button" class="ta-viewbtn ta-tabletoggle" aria-expanded="{str(opened).lower()}" '
         f'data-show="{website_texts.TABLE_SHOW}" data-hide="{website_texts.TABLE_HIDE}" '
-        f'onclick="taToggleTable(this)">{website_texts.TABLE_SHOW}</button></span></div>'
-        f'<div class="ta-figview ta-lbtile-body" hidden>{frame}</div></section>',
+        f'onclick="taToggleTable(this)">{website_texts.TABLE_HIDE if opened else website_texts.TABLE_SHOW}</button>'
+        "</span></div>"
+        f'<div class="ta-figview ta-lbtile-body"{"" if opened else " hidden"}>{frame}</div></section>',
         padding=False,
         apply_default_css=False,
         elem_classes="ta-flush",
@@ -787,6 +789,14 @@ _TILES = (
 )
 
 
+#: The figures of each view that shows them, by their ``_TILES`` keys.
+VIEW_TILES = {
+    "leaderboard": ("overview",),
+    "time": ("infer", "total", "train", "trajectories"),
+    "h2h": ("winrate",),
+}
+
+
 def _figure_tiles(lb: LBContainer) -> list[_Tile]:
     """The tiles this subset has a figure for.
 
@@ -865,16 +875,17 @@ def _tile_html(lb: LBContainer, tile: _Tile) -> str:
     )
 
 
-def make_figure_grid(lb: LBContainer) -> None:
-    """The subset's figures as one grid: the overview and the win rates span the width, the four
-    scatter plots (the three Pareto fronts and the tuning trajectories) sit two to a row.
+def make_figure_grid(lb: LBContainer, keys: Sequence[str]) -> None:
+    """The subset's figures of one view, by their ``_TILES`` keys, as one grid: the overview and
+    the win rates span the width, the scatter plots (the three Pareto fronts and the tuning
+    trajectories) sit two to a row.
 
     One HTML block, so "I care about" and "Measured by" reach it without a render: the page
     carries the reader's choice as ``data-care`` / ``data-metric`` (``main.taSelector`` writes
     them), the stylesheet orders the tiles from those, and ``main.taSendMetric`` tells each
     explorer which metric to open on.
     """
-    tiles = _figure_tiles(lb)
+    tiles = [tile for tile in _figure_tiles(lb) if tile.key in keys]
     no_total = "" if any(tile.key == "total" for tile in tiles) else " ta-no-total"
     gr.HTML(
         f'<div class="ta-figgrid{no_total}">' + "".join(_tile_html(lb, tile) for tile in tiles) + "</div>",
@@ -896,27 +907,17 @@ _PD_ICON = (
 def make_per_dataset_block(
     lb: LBContainer,
     *,
-    opened: bool,
     source_subset: Subset | BeyondSubset | None = None,
     filter_attrs: str | None = None,
-    anchor: str = "",
-) -> gr.Button:
-    """The per-dataset browser panel, returned so the caller can wire its show/hide button.
-
-    It hangs under the cross-subset overview, collapsed: both look across the whole benchmark.
-    ``anchor`` is the id its header carries for the Jump to menu.
+) -> None:
+    """The per-dataset browser, the page's Datasets view: a panel like the figure tiles, open.
 
     The artifact is published once per (entrants, imputation, splits) rather than for all 60
     task/dataset cells: a dataset's own numbers do not depend on which *other* datasets share
     its leaderboard, so the browser is read from the unrestricted cell and told which slice the
     reader currently has selected. It filters itself from there, and the reader can widen it
-    again from inside without leaving the page.
-
-    The show/hide control lives in the panel's own title bar rather than in an accordion around
-    it: an accordion would wrap this panel in a second box with its own padding and its own
-    title, for one button. That button is HTML inside the bar, so it needs a real Gradio button
-    to reach the server (`main.taTogglePerDataset` clicks the hidden one) — the frame is only
-    built when ``opened``, since the page it embeds carries every dataset's results and is the
+    again from inside without leaving the page. Its frame loads only once the view is shown
+    (main.taLoadFrames), since the page it embeds carries every dataset's results and is the
     largest artifact the site ships.
 
     ``source_subset`` and ``filter_attrs`` are for BeyondArena, whose cells have no
@@ -937,44 +938,33 @@ def make_per_dataset_block(
             f'data-size="{lb.subset.datasets if lb.subset.datasets in DATASET_SIZE_LABELS else "all"}" '
             f'data-balance="{lb.subset.datasets if lb.subset.datasets in DATASET_DISTRIBUTION_LABELS else "all"}" '
         )
-    url = source.html_url("per_dataset_explorer") if opened else ""
-    anchor = f' id="{anchor}"' if anchor else ""
+    url = source.html_url("per_dataset_explorer")
     teaser = html.escape(website_texts.PER_DATASET_TEASER, quote=True)
     n = source.n_datasets
     caption = website_texts.PER_DATASET_CAPTION.format(n=n) if n else website_texts.FIGURE_CAPTIONS["per_dataset"]
-    label = website_texts.PER_DATASET_HIDE if opened else website_texts.PER_DATASET_OPEN.format(n=n or "the")
-    with gr.Column(elem_classes=["ta-figpanel", "ta-pdrawer"], elem_id=uid):
-        # The whole bar opens it (main.taPdBarClick); the button inside is what a keyboard reaches.
+    with gr.Column(elem_classes="ta-figpanel", elem_id=uid):
         gr.HTML(
-            f'<div class="ta-figbar ta-pdbar{" is-open" if opened else ""}"{anchor} '
-            f"onclick=\"taPdBarClick(event, '{uid}')\">"
-            f'<span class="ta-pdicon" aria-hidden="true">{_PD_ICON}</span>'
-            f'<span class="ta-pdtext"><span class="ta-figbar-title" title="{teaser}">'
+            f'<div class="ta-figbar"><span class="ta-figbar-title" title="{teaser}">'
             f"{website_texts.PER_DATASET_TITLE}</span>"
-            f'<span class="ta-figbar-sub">{html.escape(caption)}</span></span>'
-            '<span class="ta-figbar-actions">'
-            + (_download_menu(uid, "Download the chart") if opened and url else "")
-            + f'<button type="button" class="ta-pdtoggle" aria-expanded="{str(opened).lower()}">{label}</button>'
-            + "</span></div>"
+            f'<span class="ta-figbar-sub">{html.escape(caption)}</span>'
+            f'<span class="ta-figbar-actions">{_download_menu(uid, "Download the chart") if url else ""}</span></div>'
         )
-        toggle = gr.Button("toggle", elem_id=f"{uid}-toggle", elem_classes="ta-offscreen-btn")
-        if opened and url is None:
+        if url is None:
             gr.HTML(f'<p class="ta-pd-teaser">{website_texts.PER_DATASET_MISSING}</p>')
-        elif opened:
-            # `-i` matches what `taExport` and `taPaperView` look for on the other panels.
-            with gr.Column(elem_id=f"{uid}-i", elem_classes=["ta-figview", "ta-figview-flush"]):
-                gr.HTML(
-                    _explorer_frame(
-                        url,
-                        f"Per-dataset results, {lb.name}",
-                        height=1020,
-                        # Read back by `main.taSendPerDatasetFilter` once the frame reports its
-                        # height, so the browser opens on the slice selected above it.
-                        extra_attrs=filter_attrs,
-                        exclude=lb.excluded_methods(),
-                    )
+            return
+        # `-i` matches what `taExport` and `taPaperView` look for on the other panels.
+        with gr.Column(elem_id=f"{uid}-i", elem_classes=["ta-figview", "ta-figview-flush"]):
+            gr.HTML(
+                _explorer_frame(
+                    url,
+                    f"Per-dataset results, {lb.name}",
+                    height=1020,
+                    # Read back by `main.taSendPerDatasetFilter` once the frame reports its
+                    # height, so the browser opens on the slice selected above it.
+                    extra_attrs=filter_attrs,
+                    exclude=lb.excluded_methods(),
                 )
-    return toggle
+            )
 
 
 # --------------------------------------------------------------------------- #
@@ -1441,12 +1431,11 @@ def selector_card(
 ) -> gr.HTML:
     """Every selector of a page, as one card of chips that answers a click at once.
 
-    The card starts closed, as a bar like the per-dataset browser's: its ``title``, which is the
-    button that opens it, and the ``examples`` (see :func:`_selector_examples`), shortcuts that pick
-    a chip and open the card on it. Open, the ``lead`` joins the title. Each of the ``lines`` holds
-    one row, or several that read as one choice, the later ones with their caption inline. Beside
-    the bar and the lines (under them on narrow screens) the card says how many datasets the
-    selection covers, open or closed. A click updates the card in the browser
+    The card starts closed, as one row like the per-dataset browser's bar: its ``title``, which is the
+    button that opens it, the ``examples`` (see :func:`_selector_examples`), shortcuts that pick a
+    chip and open the card on it, and at its end how many datasets the selection covers, open or
+    closed. Open, the ``lead`` heads the ``lines`` under the bar. Each line holds one row, or several
+    that read as one choice, the later ones with their caption inline. A click updates the card in the browser
     (main.taSelector): the chip, the dataset counts and the ``warnings``, as (selection
     field, value, headline, details in Markdown), each shown while that value is selected. The whole
     selection then goes to Python as one ``pick`` event, whose listener writes the page's states.
@@ -1462,7 +1451,7 @@ def selector_card(
     shortcuts = _selector_examples(rows, examples)
     if shortcuts:
         shortcuts = (
-            f'<span class="ta-sel-try"><span class="ta-sel-try-lead">{html.escape(website_texts.SELECTOR_TRY)}</span>'
+            f'<span class="ta-sel-try" role="group" aria-label="{html.escape(website_texts.SELECTOR_TRY)}">'
             f"{shortcuts}</span>"
         )
     # The whole bar opens and closes the card (main.taSelector); the title is the button a keyboard
@@ -1470,10 +1459,9 @@ def selector_card(
     bar = (
         '<div class="ta-figbar ta-pdbar ta-sel-bar">'
         f'<span class="ta-pdicon" aria-hidden="true">{_SELECTOR_ICON}</span>'
-        '<span class="ta-pdtext"><span class="ta-sel-head">'
         '<h2 class="ta-figbar-title ta-sel-title"><button type="button" class="ta-sel-toggle" aria-expanded="false">'
         f'{html.escape(title)}<span class="ta-sel-chev" aria-hidden="true"></span></button></h2>'
-        f'<span class="ta-figbar-sub ta-sel-lead">{html.escape(lead)}</span></span>{shortcuts}</span></div>'
+        f"{shortcuts}</div>"
     )
     warns = "".join(
         f'<details class="ta-sel-warn" data-field="{field}" data-when="{value}" hidden>'
@@ -1492,7 +1480,7 @@ def selector_card(
     }
     return gr.HTML(
         f'<div class="ta-sel" data-page="{page}" data-open="false" data-config="{html.escape(json.dumps(data))}">'
-        f'{bar}<div class="ta-sel-main">{body}</div>'
+        f'{bar}<div class="ta-sel-main"><p class="ta-sel-lead">{html.escape(lead)}</p>{body}</div>'
         '<div class="ta-sel-result" aria-live="polite">'
         '<p class="ta-sel-total"><b class="ta-sel-num"></b><span class="ta-sel-unit"></span></p></div>'
         f'<div class="ta-sel-warns">{warns}</div></div>',
@@ -1503,81 +1491,54 @@ def selector_card(
     )
 
 
-def picked(value: object, labels: dict[str, str]) -> str:
-    """``value`` when it is one of the ``labels`` keys, else the first key (the row's default).
+#: The view bar's anchor per page.
+VIEW_ANCHORS = {"tabarena": "ta-views-anchor", "beyondarena": "beyond-views-anchor"}
 
-    The selection comes from the browser, so nothing in it is used before it is checked.
-    """
-    return value if isinstance(value, str) and value in labels else next(iter(labels))
 
+def view_bar(slug: str, *, follow: str = "", hint: str = "", extra: str = "") -> str:
+    """A page's view tabs (``website_texts.VIEW_TABS``), the top of its controls, with ``follow`` (the
+    Follow picker, HTML) at the right.
 
-#: Anchor on the control card; the sticky selection bar watches it and scrolls back to it.
-CONTROLS_ANCHOR = "ta-controls-anchor"
+    Plain buttons: the browser shows the view a tab names (``main.taShowView``), every view being on
+    the page from the start, so a switch costs no round trip, and marks the page's shown one
+    whenever the bar is drawn again (``main.taSyncViewTabs``). A tab's hover text says what its view
+    shows, ending with ``hint``, what the selection covers; ``extra`` (HTML) follows the tabs, such as
+    a warning, and so does a note that only one view has, shown with it.
+    """
+    hints = dict(website_texts.VIEW_HINTS)
+    notes = {}
+    if slug == "beyondarena":
+        hints.update(website_texts.BEYOND_VIEW_HINTS)
+        # Its Summary charts the subsets, whose meaning is a Learn more topic.
+        notes["summary"] = (
+            f'<button type="button" class="ta-viewnote-link" onclick="{open_doc("beyondarena", "subsets")}">'
+            f"{html.escape(website_texts.BEYOND_SUBSETS_LINK)}</button>"
+        )
+    buttons = "".join(
+        f'<button type="button" class="ta-viewtab" role="tab" data-view="{key}" '
+        f'aria-selected="{str(i == 0).lower()}" '
+        f'title="{html.escape(" ".join(part for part in (hints.get(key, ""), hint) if part), quote=True)}">'
+        f"{html.escape(label)}</button>"
+        for i, (key, label) in enumerate(website_texts.VIEW_TABS)
+    )
+    shown = "".join(f'<span class="ta-viewnote" data-view="{key}">{note}</span>' for key, note in notes.items())
+    return (
+        f'<div class="ta-viewbar" id="{VIEW_ANCHORS[slug]}" data-page="{slug}">'
+        f'<nav class="ta-viewtabs" role="tablist" aria-label="Views">{buttons}</nav>'
+        f'<p class="ta-viewnotes">{shown}{extra}</p>{follow}</div>'
+    )
 
 
-def make_selection_bar(
-    *,
-    entrants: str,
-    care: str,
-    metric: str,
-    tasks: str,
-    datasets: str,
-    imputation: str,
-    splits: str,
-    include_noncommercial: bool = True,
-) -> None:
-    """A fixed bar summarising the current selection, shown once the controls scroll away.
+def picked(value: object, labels: dict[str, str]) -> str:
+    """``value`` when it is one of the ``labels`` keys, else the first key (the row's default).
 
-    The controls decide every number on a long page, so once they are off screen there is
-    nothing left saying which leaderboard you are reading. This restates it and links back up
-    to the card. Read-only on purpose: a second set of live controls means two widgets per axis
-    to keep in step, and the card is one scroll away. It also carries the page's "Jump to"
-    menu, so the bar is the one element that floats over the page.
+    The selection comes from the browser, so nothing in it is used before it is checked.
     """
-    parts = [
-        TASK_LABELS[tasks],
-        DATASET_LABELS[datasets],
-        _entrants_short(entrants),
-        CARE_LABELS[care],
-        METRIC_LABELS[metric],
-    ]
-    if imputation == "no":
-        parts.append("no imputed")
-    if splits == "lite":
-        parts.append("Lite")
-    if not include_noncommercial:
-        parts.append("commercial use only")
-    chips = "".join(f'<span class="ta-selchip">{html.escape(p)}</span>' for p in parts)
-    jumps = "".join(f'<a href="#{anchor}">{html.escape(label)}</a>' for anchor, label in website_texts.JUMP_LINKS)
-    # The bar is TabArena's, as are its anchors.
-    jumps += (
-        f'<button type="button" onclick="{open_doc("tabarena", website_texts.AGENTS_TOPIC[0])}">'
-        f"{html.escape(website_texts.JUMP_AGENTS)}</button>"
-        f'<button type="button" onclick="taOpenDialog(\'{VERSION_HISTORY_TOGGLE}\')">'
-        f"{html.escape(website_texts.VERSION_HISTORY_TITLE)}</button>"
-    )
-    # A link rather than a scripted scroll: inside the Space only `taJumpToAnchor` can move the
-    # page the reader is looking at, and it acts on anchors.
-    gr.HTML(
-        '<div class="ta-selbar">'
-        f'<a class="ta-selbar-view" href="#{CONTROLS_ANCHOR}" title="Back to the selectors">'
-        '<span class="ta-selbar-lead">Viewing</span>'
-        f"{chips}"
-        '<span class="ta-selbar-go">change</span>'
-        "</a>"
-        f'<details class="ta-jumpmenu"><summary>Jump to</summary><div class="ta-jumpmenu-list">{jumps}</div></details>'
-        "</div>",
-        apply_default_css=False,
-        elem_classes="ta-selbar-host",
-    )
+    return value if isinstance(value, str) and value in labels else next(iter(labels))
 
 
-def _entrants_short(key: str) -> str:
-    """A pool name short enough for the bar: the categories, not their full sentences."""
-    selected = entrants_categories(key)
-    if not selected:
-        return "🤖 Models only"
-    return "🤖 + " + " + ".join(SYSTEM_CATEGORY_LABELS[k].split(" ", 1)[0] for k in selected)
+#: Anchor on TabArena's selector card.
+CONTROLS_ANCHOR = "ta-controls-anchor"
 
 
 def make_cross_subset_overview(
@@ -1588,7 +1549,7 @@ def make_cross_subset_overview(
     care: str = "quality",
     include_noncommercial: bool = True,
 ) -> gr.HTML:
-    """The Summary: every entrant (rows) on every subset (columns), within one pool, under its heading.
+    """The Summary: every entrant (rows) on every subset (columns), within one pool, as one table.
 
     A row is one model *variant* — default, tuned, or tuned + ensembled — so its quality and its
     cost are always the same run's.
@@ -1879,9 +1840,8 @@ def make_cross_subset_overview(
         )
 
     table = f'<table class="ta-xo" data-auto="{auto_open}">{header}<tbody>{"".join(body)}</tbody></table>'
-    head = section_head(website_texts.OVERVIEW_TITLE, anchor="ta-overview-section", hint=website_texts.OVERVIEW_SUB)
     return gr.HTML(
-        f'{head}{_OVERVIEW_CSS}<div class="ta-xo-scroll">{table}</div>',
+        f'{_OVERVIEW_CSS}<div class="ta-xo-scroll">{table}</div>',
         js_on_load="taOverviewTable(element);",
         apply_default_css=False,
         elem_classes="ta-overview-block",
@@ -1889,9 +1849,8 @@ def make_cross_subset_overview(
 
 
 def _no_overview() -> gr.HTML:
-    """The overview's heading over a note, when its pool has no data."""
-    head = section_head(website_texts.OVERVIEW_TITLE, anchor="ta-overview-section", hint=website_texts.OVERVIEW_SUB)
-    return gr.HTML(f"{head}<p>No overview data available.</p>", elem_classes="ta-overview-block")
+    """A note in place of the overview, when its pool has no data."""
+    return gr.HTML("<p>No overview data available.</p>", elem_classes="ta-overview-block")
 
 
 #: An overview column as its hover text names it.
@@ -2108,12 +2067,6 @@ def _added_entrants(releases: Sequence[Release]) -> list[tuple[str, Release]]:
     return added
 
 
-def _newest_entrant(releases: Sequence[Release]) -> str:
-    """The entrant the newest release that adds one names, or "" when none does."""
-    added = _added_entrants(releases)
-    return added[0][0] if added else ""
-
-
 def _entrant_facts(df: pd.DataFrame) -> dict[str, str]:
     """How many models and systems a leaderboard lists, a method counting once whatever its variants."""
     method = df["Model"].map(lambda m: parse_model(m)[0])
@@ -2137,27 +2090,13 @@ def _entrant_facts(df: pd.DataFrame) -> dict[str, str]:
 
 
 def hero_facts(data_root: Path) -> dict[str, str]:
-    """The numbers the TabArena hero quotes, read from the published data and the version history.
+    """The numbers the TabArena hero quotes, read from the published data.
 
     Methods are counted in the widest entrant pool, so the hero names everything TabArena covers
     rather than whichever pool the page opens on.
     """
     df = LBContainer(data_root, Subset(entrants=widest_entrants_key()), "").load_df()
-    releases, _ = parse_version_history(website_texts.VERSION_HISTORY_BUTTON_TEXT)
-    updated = releases[0].when if releases else "—"
-    newest = _newest_entrant(releases)
-    if newest:
-        fresh = website_texts.HERO_FRESH_NEWEST.format(newest=newest)
-    else:
-        fresh = website_texts.HERO_FRESH_UPDATED.format(updated=updated)
-    return {
-        "datasets": str(LBContainer(data_root, Subset(), "").n_datasets or "—"),
-        **_entrant_facts(df),
-        "releases": str(len(releases)),
-        "since": f"{releases[-1].date:%b %Y}" if releases else "—",
-        "updated": updated,
-        "fresh": fresh,
-    }
+    return {"datasets": str(LBContainer(data_root, Subset(), "").n_datasets or "—"), **_entrant_facts(df)}
 
 
 def _dialog(toggle: str, label: str, body: str, *, cls: str, head: str = "") -> str:
@@ -2197,20 +2136,28 @@ def metric_definitions_html() -> str:
 
 
 def learn_more(
-    toggle: str, label: str, topics: Sequence[tuple[str, str, str]], cta: tuple[str, str] | None = None
+    toggle: str,
+    label: str,
+    topics: Sequence[tuple[str, str, str]],
+    cta: tuple[str, str] | None = None,
+    hints: dict[str, str] | None = None,
 ) -> tuple[str, str]:
     """A page's Learn more row and the dialog it opens, for (key, label, HTML) topics.
 
     Every topic is in the page from the start, so a pill opens at once without a round trip to the
     server, and the tabs at the top of the dialog switch topic without closing it. Returned apart,
-    so the row can sit inside a layout the dialog would otherwise add a gap to. ``cta``, as (label,
-    link), ends the row as a highlighted link out, which also draws the eye to the pills.
+    so the row can sit inside a layout the dialog would otherwise add a gap to. ``hints`` maps a
+    topic to its pill's hover text. ``cta``, as (label, link), ends the row as a highlighted link out,
+    which also draws the eye to the pills.
     """
-    pills = "".join(
-        f'<button type="button" class="ta-learn-pill" onclick="taOpenDoc(\'{toggle}\', \'{key}\')">'
-        f"{html.escape(name)}</button>"
-        for key, name, _ in topics
-    )
+    pills = ""
+    for key, name, _ in topics:
+        hint = (hints or {}).get(key)
+        title = f' title="{html.escape(hint)}"' if hint else ""
+        pills += (
+            f'<button type="button" class="ta-learn-pill"{title} onclick="taOpenDoc(\'{toggle}\', \'{key}\')">'
+            f"{html.escape(name)}</button>"
+        )
     if cta:
         cta_label, url = cta
         pills += (
@@ -2257,56 +2204,25 @@ def _team_dialog(toggle: str, title: str, team: Sequence[tuple[str, str]]) -> st
     return _dialog(toggle, title, body, cls="ta-dialog-team")
 
 
-def _hero_stat(
-    value: str, label: str, line: str, hint: str, target: str, *, facts: dict[str, str], docs_toggle: str
-) -> str:
-    """One selling point: a big value, what it counts and a short line, opening its target.
-
-    A numeric value counts up when the hero first shows (the ``ta-count-up`` animation in main.py).
-    """
-    value, label, line, hint = (part.format(**facts) for part in (value, label, line, hint))
-    if value.isdigit():
-        num = (
-            f'<span class="ta-stat-num" data-count style="--ta-count-to: {value}">'
-            f'<span class="ta-sr-only">{value}</span></span>'
-        )
-    else:
-        num = f'<span class="ta-stat-num">{html.escape(value)}</span>'
-    inner = (
-        f'{num}<span class="ta-stat-text"><span class="ta-stat-lbl">{html.escape(label)}</span>'
-        f'<span class="ta-stat-line">{html.escape(line)}</span></span>'
-    )
-    title = html.escape(hint)
-    if target.startswith("doc:"):
-        action = f"taOpenDoc('{docs_toggle}', '{target[4:]}')"
-        return f'<button type="button" class="ta-stat" title="{title}" onclick="{action}">{inner}</button>'
-    if target == "history":
-        # The version history is the proof that the benchmark is alive, so its line has a live dot.
-        action = f"taOpenDialog('{VERSION_HISTORY_TOGGLE}')"
-        return f'<button type="button" class="ta-stat" data-live title="{title}" onclick="{action}">{inner}</button>'
-    return f'<a class="ta-stat" href="{target}" target="_blank" rel="noopener noreferrer" title="{title}">{inner}</a>'
-
-
 def _page_hero(
     slug: str,
     facts: dict[str, str],
     *,
-    eyebrow: str,
     lead: str,
     paper_url: str,
     citation: tuple[str, str],
     cta: tuple[str, str],
     team: tuple[str, Sequence[tuple[str, str]]],
-    stats: Sequence[tuple[str, str, str, str, str]],
+    hints: dict[str, str],
     docs: Sequence[tuple[str, str, str]],
 ) -> gr.HTML:
-    """The top of a benchmark's page: what it is, its links, and why it is worth trusting.
+    """The top of a benchmark's page: what it is, its links, and the topics to learn more.
 
-    The selling points quote ``facts`` read from the data, so they cannot drift from what the page
-    shows, and each opens the details behind it. The citation (``citation`` is its label and BibTeX),
-    the team (``team`` is its title and members) and the ``docs`` topics of the Learn more row open
-    as dialogs rather than panels on the page, and ``cta`` ends that row. The hero takes its name
-    from the page's link in the top bar and its colour from ``slug``.
+    The Learn more pills' ``hints`` quote ``facts`` read from the data, so the numbers in them cannot
+    drift from what the page shows. The citation (``citation`` is its label and BibTeX), the
+    team (``team`` is its title and members) and the ``docs`` topics open as dialogs rather than
+    panels on the page, and ``cta`` ends the Learn more row. The hero takes its name from the page's
+    link in the top bar and its colour from ``slug``.
     """
     name = website_texts.TOPBAR_NAV[slug][1]
     cite_toggle, team_toggle, docs_toggle = (_hero_toggle(slug, kind) for kind in ("cite", "team", "docs"))
@@ -2326,17 +2242,15 @@ def _page_hero(
         f'<span class="ta-avatars" aria-hidden="true">{avatars}</span>{html.escape(website_texts.HERO_TEAM_LABEL)}'
         "</button>"
     )
-    band = "".join(_hero_stat(*stat, facts=facts, docs_toggle=docs_toggle) for stat in stats)
-    learn_row, docs_dialog = learn_more(docs_toggle, f"Learn more about {name}", docs, cta=cta)
+    hints = {key: hint.format(**facts) for key, hint in hints.items()}
+    learn_row, docs_dialog = learn_more(docs_toggle, f"Learn more about {name}", docs, cta=cta, hints=hints)
     cite = f"<h2>Cite {html.escape(name)}</h2>" + citation_html(f"{cite_toggle}-bibtex", *citation)
     dialogs = _dialog(cite_toggle, f"Cite {name}", cite, cls="ta-dialog-cite")
     dialogs += _team_dialog(team_toggle, *team) + docs_dialog
     return gr.HTML(
         f'<section class="ta-phero" data-page="{slug}">'
-        f'<span class="ta-phero-eyebrow">{html.escape(eyebrow)}</span>'
         f'<div class="ta-phero-head"><p class="ta-phero-lead">{_MARKDOWN.renderInline(lead)}</p>'
         f'<div class="ta-phero-links">{head}</div></div>'
-        f'<div class="ta-stats">{band}</div>'
         f"{learn_row}"
         f"</section>{dialogs}",
         apply_default_css=False,
@@ -2349,13 +2263,12 @@ def make_tabarena_hero(data_root: Path, docs: Sequence[tuple[str, str, str]]) ->
     return _page_hero(
         "tabarena",
         hero_facts(data_root),
-        eyebrow=website_texts.HERO_EYEBROW,
         lead=website_texts.HERO_LEAD,
         paper_url=website_texts.HERO_PAPER_URL,
         citation=(website_texts.CITATION_BUTTON_LABEL, website_texts.CITATION_BUTTON_TEXT),
         cta=website_texts.HERO_CTA,
         team=(website_texts.TEAM_TITLE, website_texts.TEAM),
-        stats=website_texts.HERO_STATS,
+        hints=website_texts.HERO_HINTS,
         docs=docs,
     )
 
@@ -2587,13 +2500,12 @@ def make_beyond_hero(data_root: Path, docs: Sequence[tuple[str, str, str]]) -> g
     return _page_hero(
         "beyondarena",
         beyond_hero_facts(data_root),
-        eyebrow=website_texts.BEYOND_HERO_EYEBROW,
         lead=website_texts.BEYOND_HERO_LEAD,
         paper_url=website_texts.BEYOND_HERO_PAPER_URL,
         citation=(website_texts.BEYOND_CITATION_BUTTON_LABEL, website_texts.BEYOND_CITATION_BUTTON_TEXT),
         cta=website_texts.BEYOND_HERO_CTA,
         team=(website_texts.BEYOND_TEAM_TITLE, website_texts.BEYOND_TEAM),
-        stats=website_texts.BEYOND_HERO_STATS,
+        hints=website_texts.BEYOND_HERO_HINTS,
         docs=docs,
     )
 
@@ -2617,6 +2529,7 @@ def make_beyond_overview_figure(data_root: Path) -> None:
                 unzip_png(result_dir, name),
                 label=label,
                 show_label=True,
+                elem_classes="ta-view-card",
             )
             shown = True
     if not shown:

website_texts.py

@@ -29,20 +29,32 @@ VERSION_HISTORY_TITLE = "Version history"
 VERSION_HISTORY_HINT = "Version history: what changed in each release"
 VERSION_HISTORY_SUB = "Every change to the leaderboard, newest first."
 
-# The "Jump to" menu of the bottom selection bar, as (anchor id, label). The anchors are set in
-# pages.render_internal_page; the MCP & API topic and the version history open as dialogs after them.
-JUMP_LINKS = [
-    ("ta-controls-anchor", "Customize your leaderboard"),
-    ("ta-overview-section", "Summary"),
-    ("ta-perdataset-section", "Dataset by dataset"),
-    ("lb-detailed", "Your leaderboard"),
+# The views of a benchmark page, as tabs at the top of its controls (views.view_bar), as (key, tab
+# label). The first, the Summary, is the default, and `?view=<key>` opens another.
+VIEW_TABS = [
+    ("summary", "Summary"),
+    ("leaderboard", "Leaderboard"),
+    ("time", "Quality vs time"),
+    ("h2h", "Head to head"),
+    ("datasets", "Per dataset"),
 ]
-JUMP_AGENTS = "MCP & API"
+# A tab's hover text: what its view shows.
+VIEW_HINTS = {
+    "summary": "Every method on every task and dataset subset at once, with its cost: who is strong "
+    "everywhere and who shines on one subset. Per subset, with imputation, over all repeats.",
+    "leaderboard": "The Elo ratings, then every number in the full table, on the datasets selected below.",
+    "time": "The quality against training and prediction time, and what tuning buys.",
+    "h2h": "The win rate of every pair of methods, on the datasets selected below.",
+    "datasets": "Each method's rank and gap to the best on each dataset, as the chart and its ranking.",
+}
+# BeyondArena's hover texts where its views differ from TabArena's.
+BEYOND_VIEW_HINTS = {
+    "summary": "Best result per model and per model family on every BeyondArena subset: which methods "
+    "hold up beyond the IID assumption.",
+}
 
 # --- The page heroes (views.make_tabarena_hero, views.make_beyond_hero) -------
-# What the benchmark is, in one sentence (`**…**` is bold).
-# Heads the hero, which is the page's background: what the benchmark is, before its results.
-HERO_EYEBROW = "Meet our benchmark"
+# What the benchmark is, in one sentence (`**…**` is bold), heading the hero.
 HERO_LEAD = (
     "**TabArena-v0.1** is a living benchmark for predictive machine learning on IID tabular data, built to "
     "measure the peak performance of model-specific pipelines."
@@ -54,49 +66,16 @@ HERO_TEAM_LABEL = "Team"
 HERO_PAPER_URL = "https://tabarena.ai/paper-tabular-ml-iid-study"
 # The call to submit, as (label, link): the highlighted pill that ends the Learn more row.
 HERO_CTA = ("Benchmark your model", "https://tabarena.ai/code-examples")
-# The selling points, as (value, label, line, hover text, target). The fields in braces are read
-# from the data and the version history when the page is built (views.hero_facts). A click opens
-# the target: a Learn more topic ("doc:<topic>"), the version history ("history") or a link.
-HERO_STATS = [
-    (
-        "{datasets}",
-        "curated datasets",
-        "from 1,053 candidates",
-        "Hand-picked from 1,053 real-world candidates for IID tabular data",
-        "doc:datasets",
+# The Learn more pills' hover texts, as {topic: text}. The fields in braces are read from the data when
+# the page is built (views.hero_facts).
+HERO_HINTS = {
+    "datasets": "{datasets} datasets, hand-picked from 1,053 real-world candidates for IID tabular data",
+    "models": (
+        "{entrants}, run on the same protocol and budget, each scored at its default, tuned, and as an "
+        "ensemble of tuned configurations. {verified} of the {models} models are verified by their authors "
+        "or the maintainers"
     ),
-    (
-        "{methods}",
-        "{methods_label}",
-        "each tuned to its peak",
-        (
-            "{entrants}, run on the same protocol and budget. Every model is scored at its default, "
-            "tuned, and as an ensemble of tuned configurations"
-        ),
-        "doc:models",
-    ),
-    (
-        "{releases}",
-        "live updates",
-        "{fresh}",
-        "{releases} releases since {since}, as new models join. Last update: {updated}",
-        "history",
-    ),
-    (
-        "Open",
-        "source & data",
-        "verified implementations",
-        (
-            "The code, the datasets and every prediction are public, and {verified} of the {models} "
-            "models are verified by their authors or the maintainers"
-        ),
-        TOPBAR_CODE_URL,
-    ),
-]
-# The third selling point's line on TabArena: the newest entrant in the version history, or the date of the
-# last update when no release names one.
-HERO_FRESH_NEWEST = "newest: {newest}"
-HERO_FRESH_UPDATED = "last update {updated}"
+}
 
 # The "Learn more" row: each topic opens one dialog, which switches between them.
 LEARN_MORE_LABEL = "Learn more"
@@ -234,14 +213,7 @@ benchmark should not rank as if it covered all of it.
 **Repeats:** Toggle *TabArena-Lite* to score each experiment on a single repeat instead of several. It is
 noisier than the full setting, but much cheaper to compute and usually close enough to be worth it.
 """
-# --- The summary table (views.make_cross_subset_overview) ----------------------
-OVERVIEW_TITLE = "Summary"
-# The title's hover text.
-OVERVIEW_SUB = (
-    "Every method variant on every task and dataset subset: the quickest way to tell the ones that are "
-    "strong everywhere from those that shine on one subset, and to see what tuning buys. Per subset, "
-    "with imputation, over all repeats."
-)
+# --- The summary table, the Summary view (views.make_cross_subset_overview) ----------
 # The search at the heading's right, which keeps the rows whose name holds its text.
 OVERVIEW_FIND = "Find a method"
 # The table's two metrics, as (headline column name, the name a breakdown's switch shows).
@@ -253,14 +225,14 @@ OVERVIEW_STUB = "{n} subsets"
 OVERVIEW_FOLD = "Fold these columns"
 
 # --- The selector card (views.selector_card) ---------------------------------
-SELECTOR_TITLE = "Customize your leaderboard"
+SELECTOR_TITLE = "Customize"
 SELECTOR_SUB = "Every number below is relative to who competes and which datasets count."
 BEYOND_SELECTOR_SUB = "Every number below is relative to the datasets compared, so each subset is its own evaluation."
-# The bar's shortcuts into the card, after SELECTOR_TRY, as (label, hover text, row, value). A click
-# picks that chip of the row and opens the card on it, a second click undoes it. In a row of toggles
-# the value can be a tuple of chips turned on together; a switch names itself as the row and the
-# state the shortcut puts it in as the value. Chips that cannot be picked yet are left out.
-SELECTOR_TRY = "Make it yours:"
+# The bar's shortcuts into the card (SELECTOR_TRY names the group for screen readers), as (label, hover
+# text, row, value). A click picks that chip of the row and opens the card on it, a second click undoes
+# it. In a row of toggles the value can be a tuple of chips turned on together; a switch names itself as
+# the row and the state the shortcut puts it in as the value. Chips that cannot be picked yet are left out.
+SELECTOR_TRY = "Make it yours"
 SELECTOR_EXAMPLES = [
     (
         "Add systems",
@@ -363,24 +335,12 @@ SYSTEM_WARNINGS = {
 }
 
 # --- Section headings (views.section_head) ----------------------------------
-# The selected leaderboard's section: its title, beside it what the selection covers (views.lb_spec),
-# and what the section holds as the title's hover text.
-LB_TITLE = "Your leaderboard"
-LB_HINT = (
-    "The full picture for the leaderboard selected above: how tuning moves each method, the "
-    "accuracy-versus-time trade-off, and the complete table."
-)
+# Ends the view bar's hover text after what the selection covers (views.lb_spec).
+LB_HINT = "The leaderboard selected below: the datasets it covers, who competes and how it is computed."
 BEYOND_LB_HINT = LB_HINT + " Every BeyondArena leaderboard is computed on the core2k protocol."
 PER_DATASET_TITLE = "Dataset by dataset"
-# Its bar under the overview table: what opening it shows, and the button. `{n}` is the number of
-# datasets the browser covers.
+# The browser's header in the Datasets view. `{n}` is the number of datasets it covers.
 PER_DATASET_CAPTION = "Where each method wins and loses, on each of the {n} datasets"
-PER_DATASET_OPEN = "Explore all {n} datasets ▾"
-PER_DATASET_HIDE = "Hide ▴"
-# BeyondArena's overview figures, above its selector.
-BEYOND_OVERVIEW_LINE = "Best result per model and per model family on every BeyondArena subset"
-BEYOND_OVERVIEW_HINT = "The quickest way to see which methods hold up beyond the IID assumption."
-BEYOND_JUMP_DETAILS = "Jump to your leaderboard"
 # What each figure panel shows, in its header beside the title.
 FIGURE_CAPTIONS = {
     "overview": "Each method at its default, tuned, and tuned + ensembled settings",
@@ -624,7 +584,6 @@ under 0.5 s per 1000 rows?"*
 # BeyondArena is the second internal leaderboard: the first unified benchmark for
 # tabular data that goes beyond the IID assumption. Copy mirrors the TabArena
 # HERO_* / OVERVIEW_* / CITATION_* structure, plus a Subsets topic, with BeyondArena specifics.
-BEYOND_HERO_EYEBROW = "Meet our benchmark"
 BEYOND_HERO_LEAD = (
     "**BeyondArena** is the first unified benchmark for tabular data beyond the IID assumption, with "
     "IID, temporal and grouped splits across dataset sizes and feature types."
@@ -641,44 +600,18 @@ BEYOND_TEAM = [
     ("Alan Arazi", "alanarazi7"),
 ]
 BEYOND_HERO_CTA = ("Benchmark your model", "https://github.com/autogluon/tabarena/tree/main/examples/beyondarena")
-# As HERO_STATS; the fields in braces come from views.beyond_hero_facts.
-BEYOND_HERO_STATS = [
-    (
-        "{datasets}",
-        "curated datasets",
-        "IID, temporal & grouped splits",
-        (
-            "Split at random, by time or by group, from tiny to large and with text or high-cardinality "
-            "columns. Every leaderboard uses the core2k protocol: 2,000 splits over all {datasets} datasets"
-        ),
-        "doc:datasets",
-    ),
-    (
-        "{subsets}",
-        "subsets to combine",
-        "by split, size, features & task",
-        "Pick one chip per row in the selector below, and each combination is its own leaderboard",
-        "doc:subsets",
+# As HERO_HINTS; the fields in braces come from views.beyond_hero_facts.
+BEYOND_HERO_HINTS = {
+    "datasets": (
+        "{datasets} datasets, split at random, by time or by group, from tiny to large and with text or "
+        "high-cardinality columns. Every leaderboard uses the core2k protocol: 2,000 splits over all of them"
     ),
-    (
-        "{methods}",
-        "{methods_label}",
-        "each tuned to its peak",
-        "{entrants}, each scored at its default, tuned, and as an ensemble of tuned configurations",
-        "doc:models",
-    ),
-    (
-        "Open",
-        "source & data",
-        "built on TabArena's code",
-        (
-            "The code, the datasets and every prediction are public, BeyondArena runs on TabArena's "
-            "experiment and evaluation code, and {verified} of the {models} models are verified by their "
-            "authors or the maintainers"
-        ),
-        TOPBAR_CODE_URL,
+    "subsets": "{subsets} subsets: pick one chip per row in the selector below, and each combination is its own leaderboard",
+    "models": (
+        "{entrants}, each scored at its default, tuned, and as an ensemble of tuned configurations. "
+        "{verified} of the {models} models are verified by their authors or the maintainers"
     ),
-]
+}
 
 BEYOND_OVERVIEW_DATASETS = """
 BeyondArena is built on a curated collection of **142 datasets** that deliberately go **beyond the IID
@@ -730,7 +663,7 @@ everywhere. A `[X% IMPUTED]` tag marks affected models.
 
 # The Subsets topic of the Learn more dialog, also opened from the overview figures (whose axes name
 # the subsets) by this link.
-BEYOND_SUBSETS_LINK = "🧩 What do the subsets mean?"
+BEYOND_SUBSETS_LINK = "What do the subsets mean?"
 BEYOND_SUBSETS_EXPLAINER = """
 BeyondArena is sliced into **curated subsets** so you can see how methods hold up *beyond* the IID
 assumption, and specifically on the kinds of data where an average hides big differences.