Ship redesigned PRIMO Space (rail nav, primo.css) reading PRIMOmics data

README.md

@@ -22,12 +22,13 @@ per-category leaderboard. The datasets are opaque (`d001`, `d002`…) and you ne
 see the disease, tissue, or target, which leaves you grading the *embedding*
 itself with no room for per-task tuning.
 
-The Space has six tabs: **Home** (a grid of boards), **Leaderboard** (one board
-at a time), **Tasks**, a **Submit** form (sign in with Hugging Face),
-**Contribute**, and **About**. Every board has its own URL,
-`?board=rheumatology-bulk-rna`, and every tab too, as `?tab=contribute`.
+A left **rail** navigates six pages: **Boards** (a grid of every board),
+**Board** (one leaderboard at a time), **Tasks**, a **Submit** form (sign in with
+Hugging Face), **Contribute**, and **Method**. Every board has its own URL,
+`?board=rheumatology-bulk-rna`, and every page too, as `?tab=contribute`, so the
+rail links and the open cards are shareable deep links.
 
-Home also shows **open boards**: greyed-out cards for the omics layers and the
+Boards also shows **open boards**: greyed-out cards for the omics layers and the
 therapeutic areas PRIMO does not cover yet, each linking to Contribute. They are
 declared in `boards.py` (`OPEN_BOARDS`) and drop out on their own once the
 registry covers that slice. Task categories deliberately get none, because a
@@ -36,7 +37,7 @@ that does not exist.
 
 🌐 Website: http://primomics.org/ ·
 📄 Paper: https://openreview.net/forum?id=v2SA8gHwqo ·
-📦 Data: https://huggingface.co/datasets/ScientaLab/primo
+📦 Data: https://huggingface.co/datasets/PRIMOmics/primo
 
 ## What's in the data
 
@@ -131,9 +132,9 @@ pushed by `benchmark/public_benchmark/baselines.py --score --publish`.
 - **`hf_oauth: true`** (set above) turns on the Submit tab's *Sign in with
   Hugging Face* button; submitting requires a logged-in HF account.
 - Set an **`HF_TOKEN`** Space secret (fine-grained) with: **read** on
-  `ScientaLab/primo` (the public `datasets.yaml` manifest) and
-  `ScientaLab/primo-labels` (the private `tasks.yaml` registry +
-  `<task_id>/labels.csv`), and **write** on `ScientaLab/primo-results` (the
+  `PRIMOmics/primo` (the public `datasets.yaml` manifest) and
+  `PRIMOmics/primo-labels` (the private `tasks.yaml` registry +
+  `<task_id>/labels.csv`), and **write** on `PRIMOmics/primo-results` (the
   persisted leaderboard).
 - Results persist as one normalized `task_results.csv` (`model_name, task_id,
   score, submitted_at, is_baseline, hf_username`) in the results dataset; the

app.py

@@ -1,13 +1,15 @@
 """Gradio front-end for the PRIMO public benchmark.
 
-Six pages: Home (a grid of boards), Leaderboard (one board at a time), Tasks
-("what is actually being tested?"), Submit ("how do I enter?"), Contribute
-("what is missing, and how do I add it?"), About ("can I trust this?"). A tab is
-addressable as ``?tab=contribute``, which is what the open cards on Home link to.
+A left rail navigates six pages: Boards (a grid of every board), Board (one
+leaderboard at a time), Tasks ("what is actually being tested?"), Submit ("how
+do I enter?"), Contribute ("what is missing, and how do I add it?"), Method
+("can I trust this?"). Every page is addressable -- ``?board=<slug>`` opens a
+board and ``?tab=contribute`` opens a tab -- which is what the rail links and the
+open cards use. The tab strip is hidden in CSS; the rail is the navigation.
 
 Upload one embedding file spanning every dataset (rows keyed by ``dataset_id``
 + ``sample_id``); a fixed linear probe scores each task (a dataset may carry
-several hidden targets). Results roll up into BOARDS -- the whole modality, one
+several hidden targets). Results roll up into boards -- the whole modality, one
 therapeutic area, one task family -- and each board ranks the models that
 covered all of its tasks, one column per category in its native metric (AUROC or
 Pearson), plus a ``Mean`` of those columns that orders the rows and is labelled
@@ -19,27 +21,21 @@ Disclosure policy -- what the public pages may show:
   never      study accessions, dataset_id -> cohort, hub keys, per-sample labels
 Naming the accession behind ``d002`` would put every label one GEO download
 away, so ``sources`` is collapsed to its archive (NCBI GEO / EMBL-EBI
-ArrayExpress) and ``citation`` is never rendered at all.
+ArrayExpress) and ``citation`` is never rendered at all. The submitter's Hugging
+Face username is a name-ownership lock, kept private and never rendered.
 
 Failures are surfaced by who owns them: a bad file tells the submitter exactly
 what to fix; an evaluator-side failure says "our side, please retry" and logs
 the traceback rather than blaming the submission.
 
 A page load is ONE fetch: ``_init`` pulls the registry, the boards and the
-persisted results once and threads that state into every tab, rather than each
-tab fetching for itself.
-
-The board dropdown takes ``allow_custom_value``: its choices are only filled once
-the registry loads, so a browser holding a value from an earlier version of the
-page -- or any load where the registry is briefly unreachable -- would otherwise
-be refused by Gradio's own preprocessing, before ``by_slug`` gets the chance to
-fall back to the hero board.
+persisted results once and threads that state into every page, rather than each
+page fetching for itself.
 """
 
 import os
 import traceback
 from datetime import datetime, timezone
-from html import escape
 from pathlib import Path
 
 import gradio as gr
@@ -55,14 +51,8 @@ from evaluator import (
     score_all,
     scoreable_tasks,
 )
-from home import banner_html, home_html
-from leaderboard import (
-    RESERVED_COLUMNS,
-    per_task_table,
-    ranked_table,
-    source_repositories,
-    tasks_table,
-)
+from leaderboard import RESERVED_COLUMNS, source_repositories
+from render import rail_html, render_board, render_boards, render_tasks
 from results import (
     BASELINE_TAG,
     IS_BASELINE,
@@ -74,74 +64,45 @@ from results import (
     read_results,
 )
 
-PAGES_DIR = Path(__file__).parent / "pages"
-STYLE = (Path(__file__).parent / "style.css").read_text()
+HERE = Path(__file__).parent
+PAGES_DIR = HERE / "pages"
+CSS_PATH = str(HERE / "primo.css")
+ALLOWED_PATHS = [str(HERE / "assets"), str(HERE / "fonts")]
 
 TOKEN = os.environ.get("HF_TOKEN")
-TAB_IDS = ("home", "leaderboard", "tasks", "submit", "contribute", "about")
-
-DEEP_NAVY = "#050A3C"
-PANEL = "#0A1049"
-LINE = "#1E2775"
-CYAN = "#16B3C0"
-PAPER = "#F3F8F8"
-MUTED = "#9FB3B7"
+TAB_IDS = ("boards", "board", "tasks", "submit", "contribute", "method")
+FOOT_TABS = frozenset({"tasks", "submit", "contribute", "method"})
 
 THEME = gr.themes.Base(
-    primary_hue=gr.themes.colors.cyan,
-    secondary_hue=gr.themes.colors.blue,
-    neutral_hue=gr.themes.colors.slate,
-    font=(
-        gr.themes.GoogleFont("Funnel Sans"),
-        "ui-sans-serif",
-        "system-ui",
-        "sans-serif",
-    ),
-).set(
-    color_accent=CYAN,
-    border_color_accent=CYAN,
-    body_background_fill=DEEP_NAVY,
-    body_background_fill_dark=DEEP_NAVY,
-    background_fill_primary=DEEP_NAVY,
-    background_fill_primary_dark=DEEP_NAVY,
-    background_fill_secondary=PANEL,
-    background_fill_secondary_dark=PANEL,
-    block_background_fill=DEEP_NAVY,
-    block_background_fill_dark=DEEP_NAVY,
-    panel_background_fill=PANEL,
-    block_label_background_fill=PANEL,
-    block_label_text_color=MUTED,
-    body_text_color=PAPER,
-    body_text_color_dark=PAPER,
-    body_text_color_subdued=MUTED,
-    body_text_color_subdued_dark=MUTED,
-    border_color_primary=LINE,
-    border_color_primary_dark=LINE,
-    block_border_color=LINE,
-    input_background_fill=PANEL,
-    input_background_fill_dark=PANEL,
-    button_primary_background_fill=CYAN,
-    button_primary_text_color=DEEP_NAVY,
-    button_secondary_background_fill=PANEL,
-    table_border_color=LINE,
-    table_text_color=PAPER,
-    table_even_background_fill=DEEP_NAVY,
-    table_odd_background_fill=PANEL,
-    link_text_color=CYAN,
+    font=["Funnel Sans", "sans-serif"], font_mono=["DM Mono", "monospace"]
+)
+
+SUBMIT_HEAD = (
+    '<div class="pm-head"><div><h1>Submit a model</h1>'
+    "<p>One embedding file. Partial coverage is fine — you are ranked on every "
+    "board you cover in full.</p></div></div>"
 )
 
 
 def _page_text(name: str) -> str:
     """One ``pages/<tab>.md`` per prose tab, named after the tab it fills.
 
-    Editing the site's words never means touching Python. Home has no file --
-    it is the generated board grid.
+    Editing the site's words never means touching Python. The data pages (Boards,
+    Board, Tasks) are generated markup instead.
     """
     return (PAGES_DIR / f"{name}.md").read_text()
 
 
 def _registry_by_id() -> dict[str, dict]:
-    """Scoreable tasks keyed by task_id (dataset present in the public manifest)."""
+    """Scoreable tasks keyed by task_id (dataset present in the public manifest).
+
+    ``PRIMO_FIXTURE=1`` swaps the token-gated fetch for the test registry, so the
+    app runs offline for local smoke-testing.
+    """
+    if os.environ.get("PRIMO_FIXTURE"):
+        from conftest import REGISTRY
+
+        return {task_id: dict(task) for task_id, task in REGISTRY.items()}
     datasets = manifest_ids(fetch_manifest(TOKEN))
     registry = scoreable_tasks(fetch_tasks_registry(TOKEN), datasets)
     return {_norm_id(task["task_id"]): task for task in registry}
@@ -154,7 +115,7 @@ def _page_state() -> PageState:
     """Registry, boards and persisted results -- one fetch per render.
 
     A failed fetch yields empty structures so the page renders a "come back
-    later" state instead of a stack trace. Every tab is built from one of these,
+    later" state instead of a stack trace. Every page is built from one of these,
     threaded through rather than refetched, so a page load is one round trip.
     """
     try:
@@ -165,99 +126,6 @@ def _page_state() -> PageState:
         return {}, [], pd.DataFrame(columns=RESULT_COLUMNS)
 
 
-COLUMN_WIDTHS = {
-    "Rank": "70px",
-    "Model": "230px",
-    "Mean": "110px",
-    "Task": "300px",
-    "Family": "150px",
-    "Area": "170px",
-    "Metric": "100px",
-    "Best": "170px",
-}
-DEFAULT_WIDTH = "160px"
-
-
-def _score_columns(df: pd.DataFrame) -> list[str]:
-    return [c for c in df.select_dtypes("number").columns if c != "Rank"]
-
-
-def _styled(df: pd.DataFrame, label: str, axis: int, pinned: int) -> gr.DataFrame:
-    """An MTEB-style table: best value in bold, ids pinned, searchable.
-
-    ``axis=0`` bolds the best model per column (the ranked table); ``axis=1``
-    bolds the best model per row (the per-task table, read across). The label
-    names the table, so the copy file needs one block per tab, not per table.
-    """
-    if df.empty:
-        return gr.DataFrame(df, label=label, interactive=False)
-    scores = _score_columns(df)
-    labels = [c for c in df.columns if c not in scores]
-    styler = df.style.format("{:.3f}", subset=scores, na_rep="n/a").highlight_max(
-        subset=scores, axis=axis, props="font-weight: 700"
-    )
-    if labels:
-        styler = styler.format(na_rep="n/a", subset=labels)
-    return gr.DataFrame(
-        styler,
-        label=label,
-        interactive=False,
-        wrap=True,
-        pinned_columns=pinned,
-        column_widths=[COLUMN_WIDTHS.get(c, DEFAULT_WIDTH) for c in df.columns],
-        show_search="filter",
-        show_copy_button=True,
-        show_fullscreen_button=True,
-    )
-
-
-def _board_header(board: Board | None) -> str:
-    """The board title strip. Registry strings are escaped: they are data, not code."""
-    if board is None:
-        return (
-            '<div class="primo-board-head"><h2>No board available</h2>'
-            "<p>The task registry could not be loaded. Please retry shortly.</p></div>"
-        )
-    return (
-        '<div class="primo-board-head primo-accent"><h2>'
-        f'<span class="primo-code primo-code-modality">{escape(board.code)}</span>'
-        f"{escape(board.name)}</h2>"
-        f"<p>{escape(board.blurb)} {board.n_tasks} tasks · "
-        f"{board.n_cohorts} cohorts · {board.n_patients:,} patients · "
-        f"{escape(board.modality)}</p></div>"
-    )
-
-
-RANKED_LABEL = "🏆 Ranked"
-PER_TASK_LABEL = "🔍 Per task"
-
-
-def _board_page(slug: str | None, state: PageState | None = None):
-    """Header + both tables for one board.
-
-    ``state`` lets a caller that has already fetched pass it in; the first render
-    builds every tab from one fetch that way.
-    """
-    by_id, boards, df = _page_state() if state is None else state
-    board = by_slug(boards, slug)
-    if board is None:
-        empty = pd.DataFrame()
-        return (
-            _board_header(None),
-            _styled(empty, RANKED_LABEL, 0, 0),
-            _styled(empty, PER_TASK_LABEL, 1, 0),
-        )
-    return (
-        _board_header(board),
-        _styled(ranked_table(df, by_id, board), RANKED_LABEL, 0, 2),
-        _styled(per_task_table(df, by_id, board), PER_TASK_LABEL, 1, 1),
-    )
-
-
-def _board_choices(boards: list[Board]) -> list[tuple[str, str]]:
-    return [(f"{b.code} · {b.name} · {b.group}", b.slug) for b in boards]
-
-
 def _about_text(by_id: dict[str, dict]) -> str:
     """Methodology + the archives the cohorts live in, never their accessions.
 
@@ -307,6 +175,12 @@ def _claimed_by(model: str) -> str:
         return ""
 
 
+def _rendered_board(slug: str | None) -> str:
+    """The Board page for ``slug`` -- re-rendered after a submission saves."""
+    by_id, boards, df = _page_state()
+    return render_board(by_slug(boards, slug), df, by_id)
+
+
 def evaluate(
     submission_path: str,
     model_name: str,
@@ -318,7 +192,7 @@ def evaluate(
     profile: gr.OAuthProfile | None,
 ):
     def _refuse(message: str):
-        return (message, *_board_page(slug))
+        return message, _rendered_board(slug)
 
     if profile is None:
         return _refuse("Please sign in with Hugging Face to submit.")
@@ -387,122 +261,124 @@ def evaluate(
     except Exception as error:  # noqa: BLE001
         traceback.print_exc()
         summary += f"\n\n⚠️ scored, but the leaderboard was not saved: {error}"
-    return (summary, *_board_page(slug))
+    return summary, _rendered_board(slug)
 
 
 def _landing_tab(params: dict, has_board: bool) -> str:
-    """Which tab a visitor lands on: ``?tab=`` wins, then ``?board=``, else Home.
+    """Which page a visitor lands on: ``?tab=`` wins, then ``?board=``, else Boards.
 
-    An unknown ``?tab=`` falls through to Home rather than selecting nothing,
+    An unknown ``?tab=`` falls through to Boards rather than selecting nothing,
     which would render the Space with every panel collapsed.
     """
     tab = params.get("tab")
     if tab in TAB_IDS:
         return tab
-    return "leaderboard" if has_board else "home"
+    return "board" if has_board else "boards"
 
 
 def _init(request: gr.Request):
-    """Render every tab from one fetch, landing where the query params ask."""
-    state = _page_state()
-    by_id, boards, df = state
+    """Render every page from one fetch, landing where the query params ask."""
+    by_id, boards, df = _page_state()
     params = dict(request.query_params) if request else {}
     board = by_slug(boards, params.get("board"))
     selected = _landing_tab(params, bool(params.get("board") and board))
+    active_slug = board.slug if selected == "board" and board else None
+    active_tab = selected if selected in FOOT_TABS else None
     return (
         gr.Tabs(selected=selected),
-        gr.Dropdown(
-            choices=_board_choices(boards), value=board.slug if board else None
-        ),
-        banner_html(boards),
-        home_html(boards, df, by_id),
-        tasks_table(list(by_id.values())),
+        rail_html(boards, active_slug, active_tab),
+        board.slug if board else None,
+        render_boards(boards, df, by_id),
+        render_tasks(by_id),
         _about_text(by_id),
-        *_board_page(board.slug if board else None, state),
+        render_board(board, df, by_id),
     )
 
 
 def build_demo() -> gr.Blocks:
     with gr.Blocks(
-        title="PRIMO Benchmark", theme=THEME, css=STYLE, fill_width=True
+        title="PRIMO Benchmark", theme=THEME, css_paths=[CSS_PATH], fill_width=True
     ) as demo:
-        gr.Markdown(
-            "# 🧬 PRIMO: Patient Representations in Multi-Omics\n\n"
-            "**Does your model's patient embedding predict a real clinical "
-            "outcome?** We score it on cohorts whose labels you never see."
-        )
-        banner = gr.HTML()
-        with gr.Tabs() as tabs:
-            with gr.Tab("Home", id="home"):
-                home = gr.HTML()
-            with gr.Tab("Leaderboard", id="leaderboard"):
-                board_sel = gr.Dropdown(
-                    label="Board",
-                    choices=[],
-                    allow_custom_value=True,
-                    info="A slice of the benchmark: one modality, area or task family.",
-                )
-                board_head = gr.HTML()
-                gr.Markdown(_page_text("leaderboard"))
-                ranked = gr.DataFrame(label=RANKED_LABEL, interactive=False)
-                per_task = gr.DataFrame(label=PER_TASK_LABEL, interactive=False)
-            with gr.Tab("Tasks", id="tasks"):
-                gr.Markdown(_page_text("tasks"))
-                tasks_df = gr.DataFrame(interactive=False, wrap=True)
-            with gr.Tab("Submit", id="submit"):
-                gr.Markdown(_page_text("submit"))
-                gr.LoginButton()
-                with gr.Row():
-                    with gr.Column():
-                        model_tb = gr.Textbox(
-                            label="Model name",
-                            placeholder="e.g. eva-rna-v1",
-                            info="Shown on the leaderboard.",
-                        )
-                        email_tb = gr.Textbox(
-                            label="Email address",
-                            placeholder="you@lab.org",
-                            info="Contact for this submission, kept private.",
-                        )
-                        notes_tb = gr.Textbox(
-                            label="Training data / notes (optional)",
-                            placeholder="e.g. pretrained on atlas X",
-                            info="About the model or its training data.",
-                        )
-                    with gr.Column():
-                        paper_tb = gr.Textbox(
-                            label="Paper link (optional)",
-                            placeholder="https://arxiv.org/abs/...",
-                        )
-                        hf_tb = gr.Textbox(
-                            label="Hugging Face model link (optional)",
-                            placeholder="https://huggingface.co/...",
-                        )
-                        file_in = gr.File(
-                            label="Submission (.csv / .tsv / .parquet / .npz)",
-                            type="filepath",
-                        )
-                run_btn = gr.Button("Evaluate", variant="primary")
-                result_md = gr.Markdown()
-            with gr.Tab("Contribute", id="contribute"):
-                gr.Markdown(_page_text("contribute"))
-            with gr.Tab("About", id="about"):
-                about_md = gr.Markdown()
-
-        board_view = [board_head, ranked, per_task]
+        active_board = gr.State(None)
+        with gr.Row(elem_id="pm-shell"):
+            with gr.Column(elem_id="pm-rail"):
+                rail = gr.HTML()
+            with gr.Column(elem_id="pm-main"):
+                with gr.Tabs(elem_id="pm-pages") as pages:
+                    with gr.Tab("Boards", id="boards"):
+                        boards_html = gr.HTML()
+                    with gr.Tab("Board", id="board"):
+                        board_html = gr.HTML()
+                    with gr.Tab("Tasks", id="tasks"):
+                        tasks_html = gr.HTML()
+                    with gr.Tab("Submit", id="submit"):
+                        gr.HTML(SUBMIT_HEAD)
+                        with gr.Column(elem_classes=["pm-body"]):
+                            with gr.Row():
+                                with gr.Column(scale=3):
+                                    gr.Markdown(_page_text("submit"))
+                                with gr.Column(scale=2, elem_id="pm-form"):
+                                    gr.LoginButton()
+                                    model_tb = gr.Textbox(
+                                        label="Model name",
+                                        placeholder="e.g. eva-rna-v1",
+                                        info="Shown on the leaderboard.",
+                                    )
+                                    email_tb = gr.Textbox(
+                                        label="Email address",
+                                        placeholder="you@lab.org",
+                                        info="Contact for this submission, kept private.",
+                                    )
+                                    notes_tb = gr.Textbox(
+                                        label="Training data / notes (optional)",
+                                        placeholder="e.g. pretrained on atlas X",
+                                        info="About the model or its training data.",
+                                    )
+                                    paper_tb = gr.Textbox(
+                                        label="Paper link (optional)",
+                                        placeholder="https://arxiv.org/abs/...",
+                                    )
+                                    hf_tb = gr.Textbox(
+                                        label="Hugging Face model link (optional)",
+                                        placeholder="https://huggingface.co/...",
+                                    )
+                                    file_in = gr.File(
+                                        label="Submission (.csv / .tsv / .parquet / .npz)",
+                                        type="filepath",
+                                    )
+                                    run_btn = gr.Button(
+                                        "Evaluate",
+                                        elem_classes=[
+                                            "pm-btn",
+                                            "pm-btn--primary",
+                                            "pm-btn--block",
+                                        ],
+                                    )
+                            result_md = gr.Markdown()
+                    with gr.Tab("Contribute", id="contribute"):
+                        with gr.Column(elem_classes=["pm-body", "pm-prose"]):
+                            gr.Markdown(_page_text("contribute"))
+                    with gr.Tab("Method", id="method"):
+                        with gr.Column(elem_classes=["pm-body", "pm-prose"]):
+                            about_md = gr.Markdown()
+
         run_btn.click(
             evaluate,
-            [file_in, model_tb, email_tb, paper_tb, hf_tb, notes_tb, board_sel],
-            [result_md, *board_view],
+            [file_in, model_tb, email_tb, paper_tb, hf_tb, notes_tb, active_board],
+            [result_md, board_html],
         )
-        board_sel.change(_board_page, board_sel, board_view)
         demo.load(
             _init,
             None,
-            [tabs, board_sel, banner, home, tasks_df, about_md, *board_view],
+            [pages, rail, active_board, boards_html, tasks_html, about_md, board_html],
         )
     return demo
 
 
 if __name__ == "__main__":
-    build_demo().launch(server_name="0.0.0.0", server_port=7860, ssr_mode=False)
+    build_demo().launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        ssr_mode=False,
+        allowed_paths=ALLOWED_PATHS,
+    )

evaluator.py

@@ -46,7 +46,7 @@ SPLIT = "split"
 SPLIT_TRAIN = "train"
 SPLIT_TEST = "test"
 
-ORG = "ScientaLab"
+ORG = "PRIMOmics"
 PUBLIC_REPO = f"{ORG}/primo"
 LABELS_REPO = f"{ORG}/primo-labels"
 RESULTS_REPO = f"{ORG}/primo-results"

home.py

@@ -1,213 +0,0 @@
-"""The home page: boards -> a grid of cards, as one block of HTML.
-
-Gradio has no card component, so the overview is rendered as markup and handed
-to ``gr.HTML``. Each card is a plain ``<a href="?board=...">``: clicking it
-reloads the Space on that board, which costs a page load but buys shareable
-per-board URLs and needs no JavaScript.
-
-Two things here are not leaderboards. The version strip states what v0 actually
-covers, counted off the registry so it cannot go stale. The greyed-out OPEN cards
-state what it does not cover, and link to Contribute instead of to a board: the
-page is supposed to show its own gaps, not imply the registry is the territory.
-
-Every string that comes from the registry goes through ``html.escape`` -- the
-titles, blurbs and disease names are authored data, not constants.
-"""
-
-from html import escape
-
-import pandas as pd
-from boards import (
-    AREA_GROUP,
-    CATEGORY_GROUP,
-    GROUP_NOTE,
-    MODALITY_GROUP,
-    Board,
-    OpenBoard,
-    featured,
-    in_group,
-    metric_label,
-    open_in_group,
-)
-from leaderboard import TopModel, top_models
-
-SECTIONS = (MODALITY_GROUP, AREA_GROUP, CATEGORY_GROUP)
-N_TOP_MODELS = 3
-GROUP_ACCENT = {
-    MODALITY_GROUP: "modality",
-    AREA_GROUP: "area",
-    CATEGORY_GROUP: "category",
-}
-VERSION = "v0"
-
-
-def _plural(count: int, noun: str) -> str:
-    return f"{count} {noun}" if count == 1 else f"{count} {noun}s"
-
-
-def banner_html(boards: list[Board]) -> str:
-    """The version strip shown above every tab: what the benchmark covers today.
-
-    Counted off the registry rather than written by hand, so it can never claim a
-    scope that has since changed. An unavailable registry yields no strip at all
-    -- a version claim nobody can check is worse than none.
-    """
-    modalities = in_group(boards, MODALITY_GROUP)
-    if not modalities:
-        return ""
-    areas = len({board.name for board in in_group(boards, AREA_GROUP)})
-    return (
-        f'<div class="primo-banner"><span class="primo-banner-tag">{VERSION}</span>'
-        f'<span>{escape(", ".join(b.name for b in modalities))} · '
-        f'{_plural(areas, "therapeutic area")} · '
-        f'{_plural(sum(b.n_tasks for b in modalities), "task")}. '
-        "The scope is incomplete by design, and the open boards on Home show where."
-        "</span></div>"
-    )
-
-
-def _stat(name: str, value: object) -> str:
-    return (
-        f'<div class="primo-stat"><span class="primo-stat-label">{escape(name)}</span>'
-        f'<span class="primo-stat-value">{escape(f"{value:,}" if isinstance(value, int) else str(value))}</span></div>'
-    )
-
-
-def _pills(board: Board) -> str:
-    pills = [
-        f'<span class="primo-pill primo-pill-modality">{escape(board.modality)}</span>'
-    ]
-    pills += [
-        f'<span class="primo-pill">{escape(metric_label(m))}</span>'
-        for m in board.metrics
-    ]
-    return f'<div class="primo-pills">{"".join(pills)}</div>'
-
-
-def _top_row(row: TopModel) -> str:
-    tag = '<span class="primo-tag">baseline</span>' if row.is_baseline else ""
-    css = "primo-top-row primo-top-baseline" if row.is_baseline else "primo-top-row"
-    score = "n/a" if row.score is None else f"{row.score:.3f}"
-    return (
-        f'<div class="{css}"><span>{escape(row.name)}{tag}</span>'
-        f"<span>{score}</span></div>"
-    )
-
-
-def _top_models(rows: list[TopModel]) -> str:
-    """The card's mini-ranking.
-
-    A board whose only entries are our own baselines says so: "be the first" is
-    misleading once a PCA already holds a score somebody has to beat.
-    """
-    if not rows:
-        return (
-            '<div class="primo-top primo-top-empty">No ranked model yet. '
-            "Be the first.</div>"
-        )
-    foot = (
-        '<div class="primo-top-foot">No submitted model yet. Beat the baseline.</div>'
-        if all(row.is_baseline for row in rows)
-        else ""
-    )
-    return (
-        '<div class="primo-top"><div class="primo-top-head">'
-        "<span>TOP MODELS</span><span>MEAN</span></div>"
-        f'{"".join(_top_row(row) for row in rows)}{foot}</div>'
-    )
-
-
-def _card(board: Board, top: list[TopModel] | None) -> str:
-    accent = GROUP_ACCENT.get(board.group, "modality")
-    inner = [
-        '<div class="primo-card-head">'
-        f'<span class="primo-code primo-code-{accent}">{escape(board.code)}</span>'
-        f'<span class="primo-card-title">{escape(board.name)}</span></div>'
-    ]
-    if top is None:
-        inner.append(f'<p class="primo-blurb">{escape(board.blurb)}</p>')
-        inner.append(
-            '<div class="primo-stats">'
-            + _stat("TASKS", board.n_tasks)
-            + _stat("COHORTS", board.n_cohorts)
-            + _stat("PATIENTS", board.n_patients)
-            + _stat("DISEASES", board.n_diseases)
-            + "</div>"
-        )
-    else:
-        inner.append(
-            f'<div class="primo-card-sub">{board.n_tasks} tasks · '
-            f"{board.n_cohorts} cohorts · {board.n_patients:,} patients</div>"
-        )
-        inner.append(_top_models(top))
-    inner.append(_pills(board))
-    return (
-        f'<a class="primo-card primo-accent-{accent}" target="_self" '
-        f'href="?board={escape(board.slug)}">{"".join(inner)}</a>'
-    )
-
-
-def _open_card(board: OpenBoard) -> str:
-    """A greyed-out card for a slice nobody covers: no stats, one call to action."""
-    return (
-        '<a class="primo-card primo-card-open" target="_self" href="?tab=contribute">'
-        f'<div class="primo-card-head"><span class="primo-card-title">'
-        f'{escape(board.name)}</span><span class="primo-badge-open">OPEN</span></div>'
-        f'<p class="primo-blurb">{escape(board.blurb)}</p>'
-        '<div class="primo-open-cta">Propose a cohort →</div></a>'
-    )
-
-
-def _section(group: str, boards: list[Board], opens: list[OpenBoard]) -> str:
-    open_count = (
-        f'<span class="primo-count-open">+{len(opens)} open</span>' if opens else ""
-    )
-    cards = "".join(_card(b, None) for b in boards)
-    cards += "".join(_open_card(b) for b in opens)
-    return (
-        '<section class="primo-section">'
-        '<div class="primo-section-head"><h3>'
-        f'{escape(group)} <span class="primo-count">{len(boards)}</span>'
-        f"{open_count}</h3>"
-        f'<span class="primo-section-note">{escape(GROUP_NOTE.get(group, ""))}</span>'
-        f'</div><div class="primo-grid">{cards}</div></section>'
-    )
-
-
-def _sections(boards: list[Board]) -> str:
-    """One block per facet: what is covered, then what is openly missing.
-
-    The Modality section is shown even when a single modality exists. A lone card
-    would read as a bug; a lone card beside the omics layers nobody has brought
-    yet reads as the point of the page.
-    """
-    out = []
-    for group in SECTIONS:
-        cards, opens = in_group(boards, group), open_in_group(boards, group)
-        if not cards and not opens:
-            continue
-        out.append(_section(group, cards, opens))
-    return "".join(out)
-
-
-def home_html(boards: list[Board], df: pd.DataFrame, by_id: dict[str, dict]) -> str:
-    """The whole overview page: hero row, then one section per facet."""
-    if not boards:
-        return (
-            '<div class="primo-home"><p class="primo-empty">'
-            "The task registry is unavailable right now. Please retry in a moment."
-            "</p></div>"
-        )
-    heroes = "".join(
-        _card(b, top_models(df, by_id, b, N_TOP_MODELS)) for b in featured(boards)
-    )
-    sections = _sections(boards)
-    return (
-        '<div class="primo-home">'
-        '<div class="primo-title-row"><h2>Benchmark overview</h2>'
-        '<span class="primo-hint">Pick a board. Each one is its own leaderboard'
-        "</span></div>"
-        '<div class="primo-chip">FEATURED</div>'
-        f'<div class="primo-grid primo-grid-featured">{heroes}</div>'
-        f"{sections}</div>"
-    )

pages/about.md

@@ -41,7 +41,8 @@ columns.
 ## How the results are organised
 
 A **board** is a self-contained leaderboard over a slice of the benchmark: the
-whole modality, one therapeutic area, or one task family. Pick one on **Home**.
+whole modality, one therapeutic area, or one task family. Pick one from the rail,
+or on the **Boards** page.
 
 A board ranks only the models that covered **all of its tasks**. Skipping
 Dermatology therefore costs you nothing on the Rheumatology board.
@@ -83,6 +84,6 @@ modality or therapeutic area, or work with us on the methodology? The
 ## Links
 
 - 🌐 **Website**: [primomics.org](http://primomics.org/)
-- 📦 **Data**: [ScientaLab/primo](https://huggingface.co/datasets/ScientaLab/primo)
+- 📦 **Data**: [PRIMOmics/primo](https://huggingface.co/datasets/PRIMOmics/primo)
 - 📄 **Paper**: [OpenReview](https://openreview.net/forum?id=v2SA8gHwqo)
 - 💬 **Questions**: [karim.elkanbi@scientalab.com](mailto:karim.elkanbi@scientalab.com)

pages/contribute.md

@@ -1,6 +1,6 @@
-PRIMO is an open benchmark, and it is **deliberately incomplete**. The strip at
-the top of this page says exactly how far it reaches today. Everything past that
-line still needs somebody to bring it.
+PRIMO is an open benchmark, and it is **deliberately incomplete**. The **Boards**
+page shows exactly how far it reaches today — the live boards — and names the
+gaps as open cards. Everything past that still needs somebody to bring it.
 
 PRIMO was started by **Scienta Lab**. The intent is community governance; how
 that actually works is part of what the first partners will define.
@@ -33,8 +33,8 @@ much as data does.
 
 ## Add a modality or a therapeutic area
 
-The **OPEN** cards on Home mark the omics layers and clinical areas PRIMO does
-not reach yet. Read them as gaps waiting for someone rather than as a roadmap we
+The **OPEN** cards on the Boards page mark the omics layers and clinical areas
+PRIMO does not reach yet. Read them as gaps waiting for someone rather than as a roadmap we
 are already working through. Opening one takes a single cohort with clinical
 labels, and not a whole atlas.
 
@@ -53,4 +53,4 @@ methodology, co-signature on what we publish, and early access to the results.
 - **Question the method.** Open a thread in the Space's **Community** tab.
 - **Submit a model.** Baselines are on the leaderboard already; beat them.
 - **Read the paper**: [OpenReview](https://openreview.net/forum?id=v2SA8gHwqo)
-- **Look at the data**: [ScientaLab/primo](https://huggingface.co/datasets/ScientaLab/primo)
+- **Look at the data**: [PRIMOmics/primo](https://huggingface.co/datasets/PRIMOmics/primo)

pages/submit.md

@@ -15,7 +15,7 @@ python quickstart.py --out submission.parquet
 
 Or do it by hand, in **three steps**:
 
-1. **Get the data** → download the datasets from [ScientaLab/primo](https://huggingface.co/datasets/ScientaLab/primo) (start with its `datasets.yaml`).
+1. **Get the data** → download the datasets from [PRIMOmics/primo](https://huggingface.co/datasets/PRIMOmics/primo) (start with its `datasets.yaml`).
 2. **Embed every dataset** → build **one** file: `dataset_id`, `sample_id`, then one column per embedding dim (`e0`, `e1`, …). CSV / TSV / Parquet, or NPZ.
 3. **Sign in, fill the form, and hit Evaluate.** A fixed linear probe scores each hidden task (AUROC or Pearson), reported per task category in its native metric.
 

primo.css

@@ -0,0 +1,216 @@
+/* PRIMO benchmark platform — Gradio stylesheet
+   Derived from the Scienta design system + primomics.org.
+   Load with: gr.Blocks(css_paths=["primo.css"])
+   Every value here is a design-system token; do not invent new ones. */
+
+/* ---------- fonts ---------- */
+@font-face { font-family: "Funnel Display"; font-weight: 500 700; font-display: swap; src: url("/gradio_api/file=fonts/funnel-display.woff2") format("woff2"); }
+@font-face { font-family: "Funnel Sans"; font-weight: 400 700; font-display: swap; src: url("/gradio_api/file=fonts/funnel-sans.woff2") format("woff2"); }
+@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("/gradio_api/file=fonts/dm-mono-regular.woff2") format("woff2"); }
+
+/* ---------- tokens ---------- */
+:root {
+  --marine-50: #e5e9fc;  --marine-100: #bcc3ea; --marine-200: #929ed8;
+  --marine-400: #3f53b5; --marine-500: #162da3; --marine-700: #0d1b62;
+  --coral-400: #fd9878;  --coral-500: #fd7e56;  --coral-600: #d36745;
+  --n-100: #f5f5f5; --n-200: #e5e5e5; --n-300: #d4d4d4;
+  --n-400: #a3a3a3; --n-500: #737373; --n-600: #525252; --n-900: #171717;
+
+  --border: var(--n-200);
+  --text-body: var(--n-900);
+  --text-secondary: var(--n-600);
+  --text-muted: var(--n-500);
+  --surface-selected: var(--marine-50);
+
+  --sidebar: radial-gradient(ellipse 100% 5rem at 50% 100%, rgb(253 126 86 / .35), transparent 70%),
+             linear-gradient(45deg, var(--marine-500), var(--marine-700));
+  --sidebar-fg: rgb(255 255 255 / .9);
+  --sidebar-sub-fg: rgb(255 255 255 / .6);
+  --sidebar-accent: linear-gradient(90deg, rgb(253 152 120 / .15), rgb(63 83 181 / .2));
+  --sidebar-highlight: rgb(63 83 181 / .2);
+  --sidebar-border: var(--marine-700);
+
+  --font-sans: "Funnel Sans", sans-serif;
+  --font-title: "Funnel Display", sans-serif;
+  --font-mono: "DM Mono", ui-monospace, monospace;
+
+  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;
+  --shadow-xs: 0 1px 2px rgb(9 18 65 / .05);
+  --shadow-sm: 0 1px 3px rgb(9 18 65 / .1), 0 1px 2px -1px rgb(9 18 65 / .1);
+}
+
+/* ---------- Gradio reset: get its chrome out of the way ---------- */
+.gradio-container { max-width: 100% !important; padding: 0 !important; font-family: var(--font-sans) !important; }
+.gradio-container .prose :where(h1, h2, h3) { font-family: var(--font-title); }
+footer { display: none !important; }
+/* the rail replaces the tab bar (Gradio renamed .tab-nav -> .tab-wrapper) */
+#pm-pages > .tab-nav, #pm-pages > .tab-wrapper { display: none !important; }
+#pm-pages > .tabitem { border: 0 !important; padding: 0 !important; }
+#pm-shell { flex-wrap: nowrap !important; gap: 0 !important; align-items: stretch !important; }
+
+/* ---------- rail ---------- */
+#pm-rail {
+  width: 272px !important; min-width: 272px !important; flex: 0 0 272px !important;
+  background: var(--sidebar); color: var(--sidebar-fg); padding: 8px; gap: 0 !important;
+}
+.pm-brand { display: flex; align-items: center; gap: 8px; height: 3rem; padding: 8px; border-radius: var(--radius-md); color: #fff; text-decoration: none; }
+.pm-brand:hover { background: var(--sidebar-highlight); }
+.pm-brand img { height: 24px; width: auto; padding: 2px; background: #fff; border-radius: var(--radius-sm); object-fit: contain; }
+.pm-brand b { font: 700 1.125rem/1 var(--font-title); letter-spacing: -.04em; }
+.pm-brand span { font: 500 1.25rem/0 var(--font-title); letter-spacing: -.04em; color: var(--sidebar-sub-fg); }
+
+.pm-rail-group { padding: 16px 16px 0; }
+.pm-rail-label { display: flex; align-items: center; height: 2.5rem; padding: 8px;
+  font: 400 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sidebar-sub-fg); }
+
+/* board links are Gradio buttons, restyled */
+#pm-rail .pm-link {
+  position: relative; display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
+  width: 100%; height: 2rem; min-height: 2rem; padding: 0 8px; margin: 0 0 2px;
+  border: 0 !important; border-radius: var(--radius-md); background: transparent !important; box-shadow: none !important;
+  font: 400 14px/1 var(--font-sans); color: var(--sidebar-sub-fg) !important; text-align: left;
+  transition: color .15s ease, background .15s ease;
+}
+#pm-rail .pm-link:hover { background: var(--sidebar-highlight) !important; color: #fff !important; }
+#pm-rail .pm-link::before {
+  content: ""; position: absolute; top: 50%; left: 0; height: 50%; width: 2px;
+  translate: 0 -50%; background: var(--coral-500); opacity: 0; transition: opacity .15s ease;
+}
+#pm-rail .pm-link.pm-active { background: var(--sidebar-accent) !important; color: #fff !important; font-weight: 500; }
+#pm-rail .pm-link.pm-active::before { opacity: 1; }
+.pm-link .pm-count { font: 400 12px/1 var(--font-mono); opacity: .75; }
+.pm-link .pm-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.pm-rail-foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--sidebar-border); }
+#pm-rail .pm-foot-link {
+  display: flex !important; align-items: center; width: 100%; height: 2.5rem; padding: 8px; margin: 0 0 2px;
+  border: 0 !important; border-radius: var(--radius-md); background: transparent !important; box-shadow: none !important;
+  font: 500 14px/1 var(--font-sans); color: var(--sidebar-fg) !important; text-align: left;
+}
+#pm-rail .pm-foot-link:hover { background: var(--sidebar-highlight) !important; color: #fff !important; }
+#pm-rail .pm-foot-link.pm-active { background: var(--sidebar-accent) !important; color: #fff !important; }
+
+/* ---------- page shell ---------- */
+#pm-main { min-width: 0; background: #fff; }
+.pm-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 32px; border-bottom: 1px solid var(--border); }
+.pm-head h1 { margin: 0; font: 600 1.5rem/1.1 var(--font-title); letter-spacing: -.04em; color: var(--marine-700); }
+.pm-head p { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }
+.pm-body { padding: 24px 32px 32px; }
+.pm-prose { max-width: 860px; }
+.pm-over { margin: 0; font: 400 10px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
+.pm-over--marine { color: var(--marine-500); }
+h2.pm-h2 { margin: 0; font: 600 1.125rem/1.2 var(--font-title); letter-spacing: -.03em; color: var(--marine-700); }
+.pm-group { margin-bottom: 28px; }
+.pm-group-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
+.pm-group-head .pm-note { margin: 0; font-size: 12px; color: var(--text-muted); }
+.pm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+
+/* ---------- cards ---------- */
+.pm-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl);
+  background: #fff; padding: 20px; box-shadow: var(--shadow-xs); }
+.pm-card--live { border-left: 4px solid var(--marine-500); }
+.pm-card--open { border-style: dashed; border-color: var(--marine-200); box-shadow: none; }
+.pm-card--note { background: var(--surface-selected); border-color: var(--marine-100); }
+.pm-card h3 { margin: 0; font: 600 1.25rem/1.1 var(--font-title); letter-spacing: -.04em; color: var(--marine-700); }
+.pm-card--open h3 { color: var(--text-secondary); }
+.pm-card .pm-meta { margin: 10px 0 0; font: 400 12px/1.5 var(--font-mono); color: var(--text-muted); }
+.pm-card .pm-asks { margin: 8px 0 0; font-size: 14px; color: var(--text-secondary); }
+.pm-card .pm-leader { margin: 6px 0 0; font-size: 14px; color: var(--text-body); }
+.pm-card .pm-leader--2 { margin-top: 2px; color: var(--text-muted); }
+.pm-card p.pm-cta { margin: 14px 0 0; font-size: 14px; }
+a { color: var(--marine-500); text-decoration: none; }
+a:hover { color: var(--marine-700); }
+
+/* ---------- badges ---------- */
+.pm-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid transparent;
+  border-radius: var(--radius-md); font: 400 12px/1 var(--font-sans); white-space: nowrap; }
+.pm-badge--marine { background: var(--marine-50); color: var(--marine-500); }
+.pm-badge--quiet { background: var(--n-100); border-color: var(--border); color: var(--text-secondary); }
+.pm-link .pm-badge--quiet { background: transparent; border-color: var(--sidebar-border); color: var(--sidebar-sub-fg); }
+
+/* ---------- buttons (page actions) ---------- */
+#pm-main .pm-btn { display: inline-flex !important; align-items: center; justify-content: center; height: 2rem; min-height: 2rem;
+  padding: 0 12px; border-radius: var(--radius-md); font: 500 12px/1 var(--font-sans); border: 1px solid transparent; box-shadow: none; }
+#pm-main .pm-btn--primary { background: var(--marine-400) !important; color: #fff !important; }
+#pm-main .pm-btn--primary:hover { background: var(--marine-500) !important; }
+#pm-main .pm-btn--outline { background: #fff !important; border-color: var(--border) !important; color: var(--marine-700) !important; box-shadow: var(--shadow-xs); }
+#pm-main .pm-btn--outline:hover { background: var(--n-100) !important; }
+#pm-main .pm-btn--block { width: 100%; height: 2.25rem; font-size: 14px; }
+
+/* ---------- toggle group (Ranked / Per task) ---------- */
+#pm-main .pm-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-lg); background: var(--n-100); margin-bottom: 16px; }
+#pm-main .pm-toggle button { height: 1.75rem; min-height: 1.75rem; padding: 0 14px; border: 0 !important; border-radius: var(--radius-md);
+  background: transparent !important; box-shadow: none !important; font: 400 14px/1 var(--font-sans); color: var(--text-muted) !important; }
+#pm-main .pm-toggle button.pm-active { background: #fff !important; color: var(--marine-400) !important; box-shadow: var(--shadow-sm) !important; font-weight: 500; }
+
+/* ---------- tables ---------- */
+.pm-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
+.pm-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
+.pm-table thead { background: var(--n-100); }
+.pm-table thead tr, .pm-table tbody tr { border-bottom: 1px solid var(--border); }
+.pm-table tbody tr:last-child { border-bottom: 0; }
+.pm-table th { height: 2.5rem; padding: 0 8px; text-align: left; vertical-align: middle;
+  font: 400 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
+.pm-table td { padding: 8px; vertical-align: middle; color: var(--text-secondary); }
+.pm-table th:first-child, .pm-table td:first-child { padding-left: 16px; }
+.pm-table th:last-child, .pm-table td:last-child { padding-right: 16px; }
+.pm-table td.pm-strong { color: var(--text-body); }
+.pm-table td.pm-name { font-weight: 500; color: var(--marine-700); }
+.pm-table .pm-num { text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--text-body); }
+.pm-table .pm-num--dim { color: var(--n-400); }
+.pm-table .pm-score { text-align: right; font-family: var(--font-mono); font-size: .9375rem; color: var(--marine-700); }
+.pm-table .pm-metric { font-family: var(--font-mono); font-size: 12px; color: var(--marine-700); }
+.pm-table .pm-groupline td { padding-top: 22px; border-bottom: 0;
+  font: 400 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marine-700); }
+.pm-table .pm-invite td { text-align: center; color: var(--text-muted); }
+/* definition table (Method) */
+.pm-table--def td:first-child { width: 190px; background: var(--n-100);
+  font: 400 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
+.pm-caption { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
+
+/* ---------- submit steps + code ---------- */
+.pm-step { display: flex; gap: 16px; }
+.pm-step-n { flex: none; width: 26px; height: 26px; display: grid; place-content: center;
+  border-radius: var(--radius-md); background: var(--marine-500); color: #fff; font: 400 12px/1 var(--font-mono); }
+.pm-step p { max-width: 60ch; margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
+.pm-code { margin: 14px 0 0; padding: 16px 18px; border-radius: var(--radius-md);
+  background: var(--n-900); color: var(--n-100); font: 400 12px/1.7 var(--font-mono); overflow-x: auto; }
+code, .pm-inline-code { font-family: var(--font-mono); font-size: .95em; }
+
+/* ---------- submit form (Gradio inputs) ---------- */
+#pm-form { display: flex; flex-direction: column; gap: 14px; }
+#pm-form .block { padding: 0 !important; border: 0 !important; background: transparent !important; }
+#pm-form label > span { font-size: 13px !important; font-weight: 400 !important; color: var(--text-secondary) !important; }
+#pm-form input[type="text"], #pm-form textarea {
+  border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important;
+  box-shadow: var(--shadow-xs) !important; font-family: var(--font-sans) !important; font-size: 14px !important; }
+#pm-form input[type="text"]:focus, #pm-form textarea:focus { outline: 3px solid rgb(63 83 181 / .5); outline-offset: 0; }
+#pm-form .pm-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
+#pm-form .upload-container, #pm-form .file-preview { border: 1px dashed var(--marine-200) !important;
+  border-radius: var(--radius-md) !important; background: #fff !important; }
+
+/* ---------- routes (Contribute) ---------- */
+.pm-route { display: block; padding: 20px; margin-bottom: 12px; border: 1px solid var(--border);
+  border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
+.pm-route:hover { border-color: var(--marine-400); box-shadow: var(--shadow-sm); }
+.pm-route-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
+.pm-route-cta { font: 400 12px/1 var(--font-mono); color: var(--coral-600); white-space: nowrap; }
+.pm-route p { max-width: 70ch; margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
+.pm-logos { display: flex; flex-wrap: wrap; gap: 10px; }
+.pm-logo { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
+  padding: 0 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
+.pm-logo img { max-width: 132px; max-height: 22px; object-fit: contain; }
+.pm-logo--hf img { max-height: 35px; }
+.pm-logo--open { border-style: dashed; border-color: var(--marine-200); }
+
+/* ---------- rail inner wrapper (keeps the foot links at the bottom) ---------- */
+#pm-rail .pm-rail-inner { display: flex; flex-direction: column; min-height: 100%; }
+.pm-leader .pm-num--dim { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
+
+/* ---------- responsive: rail collapses under 900px ---------- */
+@media (max-width: 900px) {
+  #pm-shell { flex-wrap: wrap !important; }
+  #pm-rail { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; }
+  .pm-grid { grid-template-columns: 1fr 1fr; }
+  .pm-head { flex-direction: column; align-items: flex-start; }
+}

quickstart.py

@@ -22,7 +22,7 @@ import yaml
 from huggingface_hub import snapshot_download
 from sklearn.decomposition import PCA
 
-PUBLIC_REPO = "ScientaLab/primo"
+PUBLIC_REPO = "PRIMOmics/primo"
 MANIFEST_FILENAME = "datasets.yaml"
 
 DATASET_ID = "dataset_id"

render.py

@@ -0,0 +1,345 @@
+"""The PRIMO pages, rendered as ``pm-*`` markup for ``gr.HTML`` blocks.
+
+Gradio has no card or rich-table component, so every page here is a string of
+HTML styled entirely by ``primo.css`` -- the rail, the board grid, the
+leaderboard tables and the tasks table. The functions are pure: they take the
+data the app already fetched (``Board`` objects, the results ``DataFrame``, the
+registry) and return a string, so they unit-test without Gradio or a network.
+
+Two rules hold everywhere:
+
+* Every string that comes from the registry or from a submission goes through
+  ``html.escape`` -- board names, blurbs, disease names and, above all, the
+  user-chosen model names that become table cells and column headers.
+* The private ``hf_username`` is never rendered. It is a name-ownership lock in
+  the results dataset, not a public credit, so no table here carries a
+  "submitted by" column.
+
+Navigation is reload-based: the rail is a column of ``<a href="?board=slug">``
+and ``<a href="?tab=name">`` links, which costs a page load per click but buys
+shareable per-board URLs and needs no JavaScript, matching how the board cards
+have always worked.
+"""
+
+import math
+import numbers
+from html import escape
+
+import pandas as pd
+from boards import (
+    AREA_GROUP,
+    CATEGORY_GROUP,
+    GROUP_NOTE,
+    MODALITY_GROUP,
+    Board,
+    OpenBoard,
+    featured,
+    in_group,
+    metric_label,
+    open_in_group,
+)
+from leaderboard import per_task_table, ranked_table, tasks_table, top_models
+
+SECTIONS = (MODALITY_GROUP, AREA_GROUP, CATEGORY_GROUP)
+N_TOP_MODELS = 3
+
+BRAND = (
+    '<a class="pm-brand" target="_self" href="?tab=boards">'
+    '<img src="/gradio_api/file=assets/primo-mark.webp" alt="">'
+    "<b>PRIMO</b><span>benchmark</span></a>"
+)
+
+FOOT_LINKS = (
+    ("tasks", "Tasks"),
+    ("submit", "Submit a model"),
+    ("contribute", "Contribute"),
+    ("method", "Method"),
+)
+
+NAME_COLUMNS = frozenset({"Model", "Best"})
+STRONG_COLUMNS = frozenset({"Task"})
+METRIC_COLUMNS = frozenset({"Metric"})
+RIGHT_COLUMNS = frozenset({"Rank", "Patients"})
+
+
+# --------------------------------------------------------------------- rail
+def rail_html(boards: list[Board], active_slug: str | None, active_tab: str | None) -> str:
+    """The left navigation: brand, one link per board grouped by facet, foot links.
+
+    ``active_slug`` highlights the board a visitor is on; ``active_tab`` highlights
+    a foot link. Open boards link to Contribute, mirroring the overview cards.
+    """
+    parts = ['<div class="pm-rail-inner">', BRAND]
+    for group in SECTIONS:
+        cards, opens = in_group(boards, group), open_in_group(boards, group)
+        if not cards and not opens:
+            continue
+        parts.append(
+            f'<div class="pm-rail-group"><p class="pm-rail-label">{escape(group)}</p></div>'
+        )
+        for board in cards:
+            cls = "pm-link pm-active" if board.slug == active_slug else "pm-link"
+            parts.append(
+                f'<a class="{cls}" target="_self" href="?board={escape(board.slug)}">'
+                f'<span class="pm-label">{escape(board.name)}</span>'
+                f'<span class="pm-count">{board.n_tasks}</span></a>'
+            )
+        for board in opens:
+            parts.append(
+                '<a class="pm-link" target="_self" href="?tab=contribute">'
+                f'<span class="pm-label">{escape(board.name)}</span>'
+                '<span class="pm-badge pm-badge--quiet">open</span></a>'
+            )
+    parts.append('<div class="pm-rail-foot">')
+    for tab, label in FOOT_LINKS:
+        cls = "pm-foot-link pm-active" if tab == active_tab else "pm-foot-link"
+        parts.append(
+            f'<a class="{cls}" target="_self" href="?tab={tab}">{escape(label)}</a>'
+        )
+    parts.append("</div></div>")
+    return "".join(parts)
+
+
+# ------------------------------------------------------------------ boards
+def _leading(top) -> str:
+    """The card's mini-ranking, with the same empty/baseline states as before.
+
+    An empty board says "be the first"; a board held only by our baselines says
+    "beat the baseline" instead, because "be the first" misleads once a PCA
+    already holds a score.
+    """
+    parts = ['<p class="pm-over" style="margin-top:14px">Leading</p>']
+    if not top:
+        parts.append(
+            '<p class="pm-leader pm-leader--2">No ranked model yet. Be the first.</p>'
+        )
+        return "".join(parts)
+    for row in top:
+        badge = (
+            ' <span class="pm-badge pm-badge--marine">baseline</span>'
+            if row.is_baseline
+            else ""
+        )
+        score = "n/a" if row.score is None else f"{row.score:.3f}"
+        parts.append(
+            f'<p class="pm-leader">{escape(row.name)}{badge}'
+            f' <span class="pm-num--dim">{score}</span></p>'
+        )
+    if all(row.is_baseline for row in top):
+        parts.append(
+            '<p class="pm-leader pm-leader--2">No submitted model yet. '
+            "Beat the baseline.</p>"
+        )
+    return "".join(parts)
+
+
+def _live_card(board: Board, df: pd.DataFrame, by_id: dict[str, dict]) -> str:
+    top = top_models(df, by_id, board, N_TOP_MODELS)
+    return (
+        f'<a class="pm-card pm-card--live" target="_self" href="?board={escape(board.slug)}">'
+        f"<h3>{escape(board.name)}</h3>"
+        f'<p class="pm-meta">{board.n_tasks} tasks · {board.n_cohorts} cohorts<br>'
+        f"{board.n_patients:,} patients · {board.n_diseases} diseases</p>"
+        f'<p class="pm-asks">{escape(board.blurb)}</p>'
+        f"{_leading(top)}</a>"
+    )
+
+
+def _open_card(board: OpenBoard) -> str:
+    return (
+        '<a class="pm-card pm-card--open" target="_self" href="?tab=contribute">'
+        f"<h3>{escape(board.name)}</h3>"
+        '<p class="pm-meta"><span class="pm-badge pm-badge--quiet">OPEN · no cohort yet</span></p>'
+        f'<p class="pm-asks">{escape(board.blurb)}</p>'
+        '<p class="pm-cta">Propose a cohort →</p></a>'
+    )
+
+
+def render_boards(boards: list[Board], df: pd.DataFrame, by_id: dict[str, dict]) -> str:
+    """The Boards overview: every board as a card, grouped by facet.
+
+    Live cards link to their board and teaser their leaders; open cards state a
+    gap and link to Contribute. A section counts its open slices so the page
+    reads as showing its own gaps, not the registry as the whole territory.
+    """
+    if not boards:
+        return (
+            '<div class="pm-body"><p class="pm-caption">The task registry is '
+            "unavailable right now. Please retry in a moment.</p></div>"
+        )
+    n_live = len(boards)
+    n_open = sum(len(open_in_group(boards, group)) for group in SECTIONS)
+    out = [
+        '<div class="pm-head"><div><h1>Boards</h1>',
+        f"<p>{n_live} live · {n_open} open. Every board is scored by the same "
+        "fixed linear probe on labels we never release.</p></div></div>",
+        '<div class="pm-body">',
+    ]
+    for group in SECTIONS:
+        cards, opens = in_group(boards, group), open_in_group(boards, group)
+        if not cards and not opens:
+            continue
+        note = escape(GROUP_NOTE.get(group, ""))
+        counter = f' · +{len(opens)} open' if opens else ""
+        out.append(
+            '<div class="pm-group"><div class="pm-group-head">'
+            f'<p class="pm-over">{escape(group)}</p>'
+            f'<p class="pm-note">{note}{counter}</p></div><div class="pm-grid">'
+        )
+        out += [_live_card(b, df, by_id) for b in cards]
+        out += [_open_card(b) for b in opens]
+        out.append("</div></div>")
+    out.append("</div>")
+    return "".join(out)
+
+
+# ------------------------------------------------------------- html tables
+def _fmt_value(value, is_score: bool) -> str | None:
+    """Display text for one cell; ``None`` marks a blank (``n/a``) cell."""
+    try:
+        if pd.isna(value):
+            return None
+    except (TypeError, ValueError):
+        pass
+    if isinstance(value, str):
+        return value
+    if isinstance(value, numbers.Integral):
+        return str(int(value))
+    if isinstance(value, numbers.Real):
+        if not math.isfinite(float(value)):
+            return None
+        return f"{float(value):.3f}" if is_score else str(value)
+    return str(value)
+
+
+def _score_columns(df: pd.DataFrame) -> list[str]:
+    """Numeric columns to format and bold -- ``Rank`` is an index, not a score."""
+    return [c for c in df.select_dtypes("number").columns if c not in RIGHT_COLUMNS]
+
+
+def _bold_cells(df: pd.DataFrame, score_cols: list[str], axis: int) -> set:
+    """Which ``(row, col)`` cells hold the best value.
+
+    ``axis=0`` bolds the best model per column (the ranked table, read down);
+    ``axis=1`` bolds the best model per row (the per-task table, read across).
+    """
+    bold = set()
+    if not score_cols:
+        return bold
+    if axis == 0:
+        for col in score_cols:
+            best = df[col].max(skipna=True)
+            if pd.notna(best):
+                for idx, value in df[col].items():
+                    if pd.notna(value) and value == best:
+                        bold.add((idx, col))
+    else:
+        for idx, row in df.iterrows():
+            present = {c: row[c] for c in score_cols if pd.notna(row[c])}
+            if present:
+                best = max(present.values())
+                bold.update((idx, c) for c, v in present.items() if v == best)
+    return bold
+
+
+def _cell_class(col: str, is_score: bool, blank: bool) -> str:
+    if col in NAME_COLUMNS:
+        return "pm-name"
+    if col in STRONG_COLUMNS:
+        return "pm-strong"
+    if col in METRIC_COLUMNS:
+        return "pm-metric"
+    if is_score or col in RIGHT_COLUMNS:
+        return "pm-num pm-num--dim" if blank else "pm-num"
+    return ""
+
+
+def _df_to_table(df: pd.DataFrame, bold_axis: int | None, empty: str) -> str:
+    """Render a DataFrame as a ``pm-table``, escaping every header and cell."""
+    if df.empty:
+        return f'<p class="pm-caption">{escape(empty)}</p>'
+    score_cols = _score_columns(df)
+    bold = _bold_cells(df, score_cols, bold_axis) if bold_axis is not None else set()
+
+    head = []
+    for col in df.columns:
+        align = ' style="text-align:right"' if col in score_cols or col in RIGHT_COLUMNS else ""
+        head.append(f"<th{align}>{escape(str(col))}</th>")
+    body = []
+    for idx, row in df.iterrows():
+        cells = []
+        for col in df.columns:
+            is_score = col in score_cols
+            text = _fmt_value(row[col], is_score)
+            cls = _cell_class(col, is_score, text is None)
+            weight = ' style="font-weight:700"' if (idx, col) in bold else ""
+            shown = "n/a" if text is None else escape(text)
+            cells.append(f'<td class="{cls}"{weight}>{shown}</td>')
+        body.append(f"<tr>{''.join(cells)}</tr>")
+    return (
+        '<div class="pm-table-wrap"><table class="pm-table" style="table-layout:auto">'
+        f"<thead><tr>{''.join(head)}</tr></thead>"
+        f"<tbody>{''.join(body)}</tbody></table></div>"
+    )
+
+
+# ------------------------------------------------------------------- board
+def _board_meta(board: Board) -> str:
+    metrics = " · ".join(metric_label(m) for m in board.metrics)
+    tail = f" · {metrics}" if metrics else ""
+    return (
+        f"{escape(board.blurb)} · {board.n_tasks} tasks · {board.n_cohorts} cohorts · "
+        f"{board.n_patients:,} patients · {escape(board.modality)}{tail}"
+    )
+
+
+def render_board(board: Board | None, df: pd.DataFrame, by_id: dict[str, dict]) -> str:
+    """One board: title strip, the ranked leaderboard, then the per-task table."""
+    if board is None:
+        return (
+            '<div class="pm-head"><div><h1>No board available</h1>'
+            "<p>The task registry could not be loaded. Please retry shortly.</p>"
+            "</div></div>"
+        )
+    ranked = _df_to_table(
+        ranked_table(df, by_id, board),
+        bold_axis=0,
+        empty="No model has covered every task of this board yet. Be the first to submit.",
+    )
+    per_task = _df_to_table(
+        per_task_table(df, by_id, board),
+        bold_axis=1,
+        empty="No submission has scored on this board yet.",
+    )
+    return (
+        '<div class="pm-head"><div><p class="pm-over">Board</p>'
+        f"<h1>{escape(board.name)}</h1><p>{_board_meta(board)}</p></div></div>"
+        '<div class="pm-body">'
+        '<div class="pm-group"><div class="pm-group-head">'
+        '<p class="pm-over pm-over--marine">Ranked</p>'
+        f'<p class="pm-note">Only models that covered all {board.n_tasks} tasks are '
+        "ranked. Mean averages the family columns and mixes metrics — a tie-break, "
+        "not a score.</p>"
+        f"</div>{ranked}</div>"
+        '<div class="pm-group"><div class="pm-group-head">'
+        '<p class="pm-over pm-over--marine">Per task</p>'
+        '<p class="pm-note">Every submission, partial ones included — read across a row.</p>'
+        f"</div>{per_task}</div>"
+        "</div>"
+    )
+
+
+# ------------------------------------------------------------------- tasks
+def render_tasks(by_id: dict[str, dict]) -> str:
+    """The Tasks page: one scannable row per hidden target. Provenance is never shown."""
+    df = tasks_table(list(by_id.values()))
+    table = _df_to_table(
+        df, bold_axis=None, empty="The task registry is unavailable right now."
+    )
+    return (
+        '<div class="pm-head"><div><h1>Tasks</h1>'
+        f"<p>{len(df)} hidden clinical targets. One fixed linear probe reads each "
+        "one out of your embedding; the cohorts stay anonymous, the biology does "
+        "not.</p></div></div>"
+        f'<div class="pm-body">{table}</div>'
+    )

style.css

@@ -1,444 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400..800&display=swap");
-
-/* PRIMO charter, dark. Deep Navy is the charter's own dark value, so the Space
-   stays on-brand while reading like a leaderboard should. Slate and Cyan swap
-   roles from the light build: on navy, raw Cyan clears 7:1 and carries text,
-   while Slate is too dark to read and is lightened for muted copy. */
-:root {
-  --primo-navy: #080f5f;
-  --primo-deep-navy: #050a3c;
-  --primo-cyan: #16b3c0;
-  --primo-paper: #f3f8f8;
-
-  --primo-bg: var(--primo-deep-navy);
-  --primo-card: #0a1049;
-  --primo-card-hover: #0e1663;
-  --primo-line: #1e2775;
-  --primo-text: var(--primo-paper);
-  --primo-muted: #9fb3b7;
-  --primo-dim: #74898e;
-  --primo-modality: var(--primo-cyan);
-  --primo-area: #8b99f7;
-  --primo-category: #e0b341;
-  --primo-featured: var(--primo-cyan);
-  --primo-wash: rgba(243, 248, 248, 0.06);
-}
-
-.primo-home h2,
-.primo-home h3,
-.primo-board-head h2,
-.prose h1,
-.prose h2,
-.prose h3 {
-  font-family: "Funnel Display", "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
-  letter-spacing: -0.015em;
-}
-
-.primo-banner {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  font-size: 0.82rem;
-  color: var(--primo-muted);
-  border: 1px solid var(--primo-line);
-  border-radius: 10px;
-  padding: 9px 14px;
-  margin-bottom: 4px;
-}
-
-.primo-banner-tag {
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--primo-featured);
-  background: var(--primo-wash);
-  border: 1px solid rgba(22, 179, 192, 0.3);
-  border-radius: 999px;
-  padding: 2px 9px;
-}
-
-.primo-home {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 8px 4px 32px;
-  color: var(--primo-text);
-}
-
-.primo-title-row {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 16px;
-  flex-wrap: wrap;
-  margin-bottom: 20px;
-}
-
-.primo-title-row h2 {
-  font-size: 2rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  margin: 0;
-  color: var(--primo-text);
-}
-
-.primo-hint {
-  font-size: 0.85rem;
-  color: var(--primo-muted);
-}
-
-.primo-chip {
-  display: inline-block;
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  color: var(--primo-featured);
-  background: var(--primo-wash);
-  border: 1px solid rgba(22, 179, 192, 0.3);
-  border-radius: 999px;
-  padding: 4px 12px;
-  margin-bottom: 12px;
-}
-
-.primo-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 16px;
-}
-
-.primo-grid-featured {
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  margin-bottom: 32px;
-}
-
-.primo-card {
-  display: block;
-  position: relative;
-  background: var(--primo-card);
-  border: 1px solid var(--primo-line);
-  border-left: 3px solid var(--primo-line);
-  border-radius: 12px;
-  padding: 16px 18px;
-  text-decoration: none !important;
-  color: inherit;
-  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
-}
-
-.primo-card:hover {
-  background: var(--primo-card-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
-}
-
-.primo-accent-modality {
-  border-left-color: var(--primo-modality);
-}
-.primo-accent-area {
-  border-left-color: var(--primo-area);
-}
-.primo-accent-category {
-  border-left-color: var(--primo-category);
-}
-.primo-accent-modality:hover {
-  border-color: var(--primo-modality);
-}
-.primo-accent-area:hover {
-  border-color: var(--primo-area);
-}
-.primo-accent-category:hover {
-  border-color: var(--primo-category);
-}
-
-/* ``align-self`` so an open card sizes to its own text: stretched to match a
-   full board it becomes a large empty rectangle, which reads as broken. */
-.primo-card-open {
-  align-self: start;
-  background: transparent;
-  border-style: dashed;
-  border-left-color: var(--primo-line);
-  opacity: 0.72;
-}
-
-.primo-card-open:hover {
-  opacity: 1;
-  background: var(--primo-card);
-  border-color: var(--primo-dim);
-}
-
-.primo-card-open .primo-card-title {
-  color: var(--primo-muted);
-}
-
-.primo-badge-open {
-  margin-left: auto;
-  font-size: 0.6rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: var(--primo-dim);
-  border: 1px solid var(--primo-line);
-  border-radius: 999px;
-  padding: 2px 8px;
-}
-
-.primo-open-cta {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--primo-area);
-}
-
-.primo-count-open {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--primo-dim);
-  margin-left: 6px;
-}
-
-.primo-card-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-/* Replaces the per-board emoji: letters scale to any modality anyone adds, and
-   the colour is the group's, so a new board needs no design decision. */
-.primo-code {
-  flex: none;
-  font-size: 0.66rem;
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  line-height: 1;
-  color: var(--primo-deep-navy);
-  background: var(--primo-modality);
-  border-radius: 5px;
-  padding: 5px 6px;
-}
-
-.primo-code-area {
-  background: var(--primo-area);
-}
-
-.primo-code-category {
-  background: var(--primo-category);
-}
-
-.primo-board-head .primo-code {
-  vertical-align: middle;
-  display: inline-block;
-  margin-right: 9px;
-}
-
-.primo-card-title {
-  font-size: 1.05rem;
-  font-weight: 650;
-  color: var(--primo-text);
-}
-
-.primo-card-sub {
-  font-size: 0.8rem;
-  color: var(--primo-muted);
-  margin-bottom: 14px;
-}
-
-.primo-blurb {
-  font-size: 0.85rem;
-  line-height: 1.45;
-  color: var(--primo-muted);
-  margin: 0 0 14px;
-  min-height: 2.5em;
-}
-
-.primo-stats {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px 12px;
-  margin-bottom: 14px;
-}
-
-.primo-stat {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.primo-stat-label {
-  font-size: 0.65rem;
-  letter-spacing: 0.06em;
-  color: var(--primo-dim);
-}
-
-.primo-stat-value {
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: var(--primo-text);
-  font-variant-numeric: tabular-nums;
-}
-
-.primo-top {
-  border-top: 1px solid var(--primo-line);
-  padding-top: 10px;
-  margin-bottom: 14px;
-}
-
-.primo-top-head,
-.primo-top-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 5px 0;
-}
-
-.primo-top-head {
-  font-size: 0.65rem;
-  letter-spacing: 0.06em;
-  color: var(--primo-dim);
-}
-
-.primo-top-row {
-  font-size: 0.85rem;
-  border-top: 1px solid var(--primo-line);
-  font-variant-numeric: tabular-nums;
-}
-
-.primo-top-row span:first-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.primo-top-empty {
-  font-size: 0.82rem;
-  color: var(--primo-dim);
-  font-style: italic;
-}
-
-.primo-top-baseline span:first-child {
-  color: var(--primo-muted);
-}
-
-.primo-tag {
-  font-size: 0.6rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--primo-dim);
-  border: 1px solid var(--primo-line);
-  border-radius: 999px;
-  padding: 1px 6px;
-  margin-left: 7px;
-}
-
-.primo-top-foot {
-  font-size: 0.75rem;
-  color: var(--primo-dim);
-  font-style: italic;
-  border-top: 1px solid var(--primo-line);
-  padding-top: 7px;
-}
-
-.primo-pills {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.primo-pill {
-  font-size: 0.72rem;
-  color: var(--primo-muted);
-  background: var(--primo-wash);
-  border: 1px solid var(--primo-line);
-  border-radius: 999px;
-  padding: 2px 10px;
-}
-
-.primo-pill-modality {
-  color: var(--primo-modality);
-  border-color: rgba(22, 179, 192, 0.32);
-  background: var(--primo-wash);
-}
-
-/* No fill: the cards already lift off the page, and a second surface behind
-   them only muddies the contrast they rely on. */
-.primo-section {
-  border: 1px solid var(--primo-line);
-  border-radius: 14px;
-  padding: 0 0 18px;
-  margin-bottom: 20px;
-  background: transparent;
-}
-
-.primo-section-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  flex-wrap: wrap;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--primo-line);
-  margin-bottom: 18px;
-}
-
-.primo-section-head h3 {
-  font-size: 1.1rem;
-  font-weight: 650;
-  margin: 0;
-  color: var(--primo-text);
-}
-
-.primo-count {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--primo-muted);
-  background: var(--primo-wash);
-  border-radius: 999px;
-  padding: 2px 9px;
-  margin-left: 6px;
-}
-
-.primo-section-note {
-  font-size: 0.82rem;
-  color: var(--primo-dim);
-}
-
-.primo-section .primo-grid {
-  padding: 0 20px;
-}
-
-.primo-empty {
-  color: var(--primo-muted);
-  font-style: italic;
-}
-
-.primo-board-head {
-  border-left: 3px solid var(--primo-modality);
-  padding: 2px 0 2px 14px;
-  margin-bottom: 4px;
-}
-
-.primo-board-head h2 {
-  margin: 0 0 4px;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.primo-board-head p {
-  margin: 0;
-  color: var(--primo-muted);
-  font-size: 0.9rem;
-}
-
-/* Gradio's default inline-code chip is light-on-light, unreadable on this
-   theme. Scoped to :not(pre) so fenced blocks keep their own styling. */
-.md :not(pre) > code,
-.prose :not(pre) > code {
-  background: rgba(22, 179, 192, 0.1) !important;
-  color: #6fe3ec !important;
-  border: 1px solid rgba(22, 179, 192, 0.3);
-  border-radius: 5px;
-  padding: 1px 6px;
-  font-size: 0.9em;
-}
-
-footer {
-  display: none !important;
-}