diff --git a/.github/workflows/validate_pr.yml b/.github/workflows/validate_pr.yml
index 36ea8561..d24bbf16 100644
--- a/.github/workflows/validate_pr.yml
+++ b/.github/workflows/validate_pr.yml
@@ -11,6 +11,7 @@ on:
       - 'schema/platforms.json'
       - 'tools/generate_platforms_matrix.py'
       - 'README.md'
+      - 'leaderboard/site/**'
 
 jobs:
   validate-runners:
@@ -205,4 +206,23 @@ jobs:
                 issue_number: context.issue.number,
                 body,
               });
-            }
\ No newline at end of file
+            }
+
+  frontend-tests:
+    name: Frontend unit tests (modal viz)
+    runs-on: ubuntu-latest
+    # Frontend tests don't need full git history; a shallow checkout
+    # plus Node 20 (which ships node:test) is enough.
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      # No npm install — the suite intentionally has zero runtime deps
+      # (a hand-written DOM stub stands in for jsdom / happy-dom).  Add
+      # extra files to leaderboard/site/test/ to widen coverage; the
+      # glob below picks them up automatically.
+      - name: Run leaderboard frontend tests
+        run: node --test leaderboard/site/test/*.test.mjs
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 2ea1c8c9..07e5795e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,9 @@ mini_result/
 *_backup/
 backup/
 /tmp/
+
+# ── Local-only handoff notes (across-session continuity) ────────────────────
+.handoff-*.md
+
+# ── Local-only design QA screenshots ────────────────────────────────────────
+.screenshots/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5dda79da..6ff8d5d1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -346,6 +346,69 @@ verified result is itself reproducible by definition.
 
 ---
 
+## How your result appears on the leaderboard
+
+The frontend treats every submission as data — there's nothing per-vendor or per-chip hand-coded on the UI side. A few conventions are worth knowing if you want your result to look its best:
+
+### Chip identity vs. chip count
+
+The chip-detail page (`#/chip/<slug>`) is keyed on the **chip model** alone, not on `chip_count`. That means a single chip page aggregates every fan-out you've ever submitted (×1, ×4, ×8, ×16) into one overview, with the runs table sorted by `chip_count` ascending and the per-suite KPI card flagging the deployment behind the best score (e.g. `×8` badge next to the metric).
+
+Implication: if your runner emits one `result.json` per chip-count, you don't need to invent fake chip names to keep them apart — submit them with the same `chip` field and they'll merge cleanly. Old `…-x<N>` URLs from before this change auto-redirect to the bare-model slug, so existing shared links keep working.
+
+### Vendor colours
+
+Vendor accents (chip dot, vendor pill, peer card border) are driven entirely by `assets/js/data.js`'s `VENDOR_COLORS` map. New vendors get a deterministic fallback colour from a 9-entry palette the first time they appear in the dataset — no frontend change required to ship the result.
+
+If you want a brand-accurate accent for a new vendor (e.g. your accelerator's official colour), open a one-line PR to `VENDOR_COLORS`:
+
+```js
+export const VENDOR_COLORS = {
+  // …
+  Cerebras: "#ff6f3c",   // ← add yours
+};
+```
+
+`VENDOR_ORDER` (used to lay out the rankings facet pill row) is derived from `Object.keys(VENDOR_COLORS)`, so the same edit also pins your vendor's position in the brand list. Vendors not in the map are appended alphabetically after the brand-named ones.
+
+### Optional: viz fields for richer modal charts
+
+The run-detail modal's **Visualize** tab is hidden when `result.viz` is absent. Populate it to surface scenario-specific charts:
+
+```jsonc
+{
+  "viz": {
+    "type": "decode",            // bandwidth-bound suite (A/F/G default)
+    "offline": {
+      "labels":     [1, 2, 4, 8, 16, 32],
+      "throughput": [120, 230, 410, 760, 1100, 1380]
+    },
+    "interactive": {             // optional, suite_D-style
+      "ttft_p50": 78,  "ttft_p90": 110, "ttft_p99": 135,
+      "tpot_p50":  9,  "tpot_p90":  11, "tpot_p99":  14
+    }
+  }
+}
+```
+
+Suite-specific shapes the frontend understands today:
+
+| `viz.type` | Suites | Required keys |
+|---|---|---|
+| `decode`    | A · F · G  | `offline.labels[]`, `offline.throughput[]` |
+| `multichip` | B          | `offline.labels[]`, `offline.throughput[]`, `offline.throughput_per_chip[]` |
+| `quant`     | C          | `precisions[]`, `throughput[]`, optional `accuracy[]` |
+| `longctx`   | D          | `offline.labels[]`, `offline.throughput[]`, `interactive.{ttft_p50,…,tpot_p99}` |
+| `scaling`   | E          | `chip_counts[]`, `throughput[]`, `efficiency_pct[]` |
+
+`viz` is **fully optional** — runners that don't emit it still get a clean Details / Implementation modal. When present, the same fields drive the per-suite head-to-head charts on the Compare page (so two basket runs render directly comparable visualisations instead of falling back to a metric-table-only view).
+
+### Submitter handle
+
+The leaderboard surfaces the value of `meta.submitted_by` as `@<handle>` next to your result on every list (home recent, suite cards, chip-detail submissions table). Anything that looks like a GitHub login, an email, or a `Name <email>` form is reduced to the local-part — see `submitterHandle` in `assets/js/utils.js`.
+
+---
+
 ## Using local or air-gapped models
 
 AccelMark separates the **model identifier** (used for leaderboard comparisons)
diff --git a/leaderboard/generate.py b/leaderboard/generate.py
index 65bfbdd0..4a9ac5ab 100644
--- a/leaderboard/generate.py
+++ b/leaderboard/generate.py
@@ -6,6 +6,7 @@
     python leaderboard/generate.py
 """
 
+import hashlib
 import json
 import re
 import statistics
@@ -48,6 +49,65 @@ def _get_suite_precision_required(suite_id: str) -> str:
         return "BF16"
 
 
+def _collect_suite_specs() -> dict:
+    """Collect UI-relevant per-suite spec from suites/suite_*/suite.json.
+
+    Baked into the generated leaderboard.js as ``window.SUITE_SPECS`` so
+    the static leaderboard UI auto-syncs whenever a maintainer edits a
+    suite contract — model id, dataset, prompt distribution, scenarios
+    default/extra split, online SLA, etc.  Editorial UI content (titles,
+    taglines, descriptions) stays in assets/js/data.js since it isn't a
+    property of the suite contract.
+
+    Returns a ``{ suite_id: spec }`` mapping with only the fields the UI
+    consumes.  Missing fields are omitted (the JS-side merge keeps the
+    hardcoded fallback when a key is absent).
+    """
+    out: dict = {}
+    suites_dir = Path("suites")
+    if not suites_dir.exists():
+        return out
+    for sd in sorted(suites_dir.iterdir()):
+        if not sd.is_dir():
+            continue
+        sf = sd / "suite.json"
+        if not sf.exists():
+            continue
+        try:
+            with open(sf) as f:
+                data = json.load(f)
+        except Exception:
+            continue
+        sid = data.get("suite_id") or sd.name
+        rd = data.get("request_distribution") or {}
+        scn = data.get("scenarios") or {}
+        spec: dict = {}
+        # Fields the UI displays in suite cards / specs / compare headers.
+        for k in (
+            "model_id",
+            "model_revision",
+            "dataset",
+            "precision_required",
+            "allowed_precisions",
+            "max_model_len",
+            "concurrency_levels",
+            "online_qps_levels",
+            "online_sla_ttft_ms",
+        ):
+            if k in data and data[k] is not None:
+                spec[k] = data[k]
+        if rd.get("input_tokens_p50") is not None:
+            spec["input_tokens_p50"] = rd["input_tokens_p50"]
+        if rd.get("output_tokens_p50") is not None:
+            spec["output_tokens_p50"] = rd["output_tokens_p50"]
+        if scn.get("default"):
+            spec["scenarios_default"] = list(scn["default"])
+        if scn.get("extra"):
+            spec["scenarios_extra"] = list(scn["extra"])
+        out[sid] = spec
+    return out
+
+
 # ── Data loading ──────────────────────────────────────────────────────────────
 
 def load_results() -> list[dict]:
@@ -1080,15 +1140,55 @@ def main():
 
     rows = _deduped
 
+    suite_specs = _collect_suite_specs()
+
     SITE_DIR.mkdir(parents=True, exist_ok=True)
     out_path = SITE_DIR / "leaderboard.js"
     with open(out_path, "w") as f:
         f.write("// Auto-generated by leaderboard/generate.py. Do not edit manually.\n")
+        # window.LEADERBOARD_DATA so ES modules (assets/js/data.js) can read it.
+        # Also exposed as bare LEADERBOARD_DATA for any legacy classic-script consumers.
         f.write(f"const LEADERBOARD_DATA = {json.dumps(rows, indent=2)};\n")
+        f.write("window.LEADERBOARD_DATA = LEADERBOARD_DATA;\n")
+        # window.SUITE_SPECS — canonical per-suite spec from suites/suite_*/suite.json.
+        # data.js merges these into SUITE_META at init() so UI facts auto-sync
+        # with a suite contract edit (no JS to keep in step manually).
+        f.write(f"const SUITE_SPECS = {json.dumps(suite_specs, indent=2)};\n")
+        f.write("window.SUITE_SPECS = SUITE_SPECS;\n")
+
+    print(f"Leaderboard data written to {out_path} "
+          f"({len(rows)} rows, {len(suite_specs)} suite specs).")
+
+    # Cache-bust leaderboard.js in index.html so a stale CDN / browser
+    # cached copy never out-survives the data refresh.  GitHub Pages
+    # serves the static files with a 10-minute Cache-Control by default
+    # and *no* ETag-aware revalidation on cross-domain `<script src>`
+    # loads, so without a versioned query users routinely see "old"
+    # submissions for hours after a merge.  We hash the bytes we just
+    # wrote and rewrite the existing `?v=…` (or insert one) in place.
+    _bust_index_cache(out_path, SITE_DIR / "index.html")
 
-    print(f"Leaderboard data written to {out_path} ({len(rows)} rows).")
     generate_api(results, SITE_DIR)
 
 
+def _bust_index_cache(data_path: Path, index_path: Path) -> None:
+    """Rewrite ``<script src="leaderboard.js?v=<sha8>">`` to match the
+    short SHA-256 of the file we just wrote.  No-op if the index file
+    is missing (e.g. someone is running the generator outside the
+    repo)."""
+    if not index_path.exists():
+        return
+    sha8 = hashlib.sha256(data_path.read_bytes()).hexdigest()[:8]
+    html = index_path.read_text()
+    pattern = re.compile(
+        r'(<script\s+src="leaderboard\.js)(?:\?v=[0-9a-f]+)?(")',
+        re.IGNORECASE,
+    )
+    new_html, n = pattern.subn(rf'\1?v={sha8}\2', html)
+    if n and new_html != html:
+        index_path.write_text(new_html)
+        print(f"  cache-busted leaderboard.js → ?v={sha8}")
+
+
 if __name__ == "__main__":
     main()
\ No newline at end of file
diff --git a/leaderboard/site/assets/css/base.css b/leaderboard/site/assets/css/base.css
new file mode 100644
index 00000000..0ed4f04a
--- /dev/null
+++ b/leaderboard/site/assets/css/base.css
@@ -0,0 +1,246 @@
+/* base.css — design tokens, reset, typography
+ *
+ * Palette philosophy (after "feels monotone" feedback):
+ *   • Avoid pure black / pure white — dark uses off-black charcoal,
+ *     light uses warm parchment (#faf8f3, Anthropic-ish).
+ *   • Single accent (blue) for links / primary CTA stays — but each
+ *     suite gets its own per-category color, surfaced on the card head,
+ *     letter chip, and the featured #1 row.
+ *   • Type pairs serif headline + system sans body for editorial feel.
+ */
+
+:root {
+  /* ── Dark theme (default) ─────────────────────────────── */
+  --bg:           #0b0c10;
+  --bg-elev:      #14161c;
+  --bg-elev-2:    #1c1f27;
+  --bg-tinted:    #181a22;            /* slightly cooler tint for hero */
+  --border:       #2a2d36;
+  --border-soft:  #20232b;
+
+  --fg:           #d4d4d8;
+  --fg-strong:    #f4f4f5;
+  --fg-muted:     #a1a1aa;
+  --fg-faint:     #71717a;
+
+  --accent:       #93c5fd;             /* link color — readable on bg */
+  --accent-2:     #3b82f6;             /* primary button / strong link */
+  --accent-3:     #1e3a8a;             /* deep blue — fallback header */
+  --accent-soft:  rgba(59, 130, 246, 0.14);
+  --on-accent:    #ffffff;
+
+  --good:         #34d399;
+  --warn:         #fbbf24;
+  --bad:          #fb7185;
+
+  --gold:         #f5b50a;
+  --silver:       #c2c2c8;
+  --bronze:       #d4844a;
+
+  /* Per-suite category colors (chosen perceptually distinct, deep
+     enough that --on-accent white reads cleanly on top). */
+  --suite-A: #4f6bed;   /* cobalt — Single-chip throughput */
+  --suite-B: #7c4ddb;   /* violet — Multi-chip throughput */
+  --suite-C: #14b8a6;   /* teal — Quantization efficiency */
+  --suite-D: #d97757;   /* terracotta — Interactive latency */
+  --suite-E: #16a34a;   /* emerald — Scaling efficiency */
+  --suite-F: #db2777;   /* rose — Edge / low-power */
+  --suite-G: #6366f1;   /* indigo — Sustained load */
+
+  /* Vendor colour table now lives in data.js (`VENDOR_COLORS`) and is
+   * injected at runtime as `[data-vendor="<name>"] { --vendor-color: ... }`
+   * — adding a new vendor is one line in JS instead of 70 lines spread
+   * across 6 CSS files.  Components keep consuming `var(--vendor-color)`. */
+
+  /* Card shadow (soft on dark) */
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --shadow-lift: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
+
+  /* Radii */
+  --r-sm: 4px;
+  --r-md: 8px;
+  --r-lg: 14px;
+
+  /* Layout */
+  --max-w:  1200px;
+  --gap:    1rem;
+  --gap-lg: 1.5rem;
+
+  /* Type — single sans family used everywhere; mono is kept only for
+     the `.mono` utility class and for the optional `font-variant-numeric`
+     tabular figures.  Serif token removed (was inconsistent feedback). */
+  --font-sans:  -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
+  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+  color-scheme: dark;
+}
+
+/* ── Light theme (auto, follows OS) ───────────────────── */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg:          #faf8f3;            /* warm parchment, not pure white */
+    --bg-elev:     #ffffff;
+    --bg-elev-2:   #f3efe6;
+    --bg-tinted:   #f5f1e8;
+    --border:      #e6e1d4;
+    --border-soft: #efeadd;
+
+    --fg:          #44403c;
+    --fg-strong:   #1c1917;
+    --fg-muted:    #78716c;
+    --fg-faint:    #a8a29e;
+
+    --accent:      #2563eb;
+    --accent-2:    #2563eb;
+    --accent-3:    #1e40af;
+    --accent-soft: rgba(37, 99, 235, 0.10);
+    --on-accent:   #ffffff;
+
+    --good:        #15803d;
+    --warn:        #b45309;
+    --bad:         #b91c1c;
+
+    --gold:        #b8860b;
+    --silver:      #6b7280;
+    --bronze:      #b45a30;
+
+    /* Suite colors — slight darken for white bg so white text on the
+       filled header keeps WCAG AA. */
+    --suite-A: #3b5bdb;
+    --suite-B: #6d28d9;
+    --suite-C: #0f766e;
+    --suite-D: #c2410c;
+    --suite-E: #15803d;
+    --suite-F: #be185d;
+    --suite-G: #4338ca;
+
+    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
+    --shadow-lift: 0 8px 24px -10px rgba(15, 23, 42, 0.14);
+
+    color-scheme: light;
+  }
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--fg);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  position: relative;
+  isolation: isolate;
+}
+/* Ambient page-top wash — soft multi-stop radial that fades into the
+   page background.  Pinned to the top of the document (absolute, not
+   fixed) so it scrolls away with the hero; no rounded clip, no hard
+   edge. */
+body::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 720px;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(60% 80% at 12% 0%, color-mix(in srgb, var(--suite-A) 13%, transparent), transparent 70%),
+    radial-gradient(55% 70% at 90% -4%, color-mix(in srgb, var(--suite-D) 11%, transparent), transparent 65%),
+    radial-gradient(70% 55% at 50% 0%,  color-mix(in srgb, var(--suite-B) 6%,  transparent), transparent 75%);
+  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
+          mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+/* Keyboard focus ring.  We rely on `:focus-visible` so mouse users
+   don't see the ring on click; tab navigation gets a two-layer halo:
+   a 2px solid accent outline (the crisp boundary) plus a 4px
+   translucent box-shadow ring underneath (the "halo" that survives
+   busy backgrounds — hero radial gradients, suite-color-tinted rows,
+   in-basket banners — where a single 2px line gets lost).
+   `outline-offset: 2px` keeps the line clear of rounded corners,
+   while the halo uses `0 0 0 4px` so it traces the element's own
+   shape (including any border-radius) without needing per-element
+   tuning.  `[tabindex="-1"]:focus-visible` is suppressed because we
+   use that pattern for programmatic focus targets (modal panel) where
+   the focus is intentional, not a keyboard navigation step. */
+:focus { outline: none; }
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: inherit;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
+}
+[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
+.btn:focus-visible,
+.copy-btn:focus-visible {
+  outline-offset: 2px;
+}
+/* Pills with their own border and tight radius look better with the
+   ring snugged in tighter — anything with a `*-pill` suffix opts in.
+   Halo width also dialled down so it doesn't dwarf the pill itself. */
+.rk-suite-pill:focus-visible,
+.rk-facet-pill:focus-visible,
+.scn-suite-letter:focus-visible {
+  outline-offset: 1px;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
+}
+/* Table rows: `<tr>` doesn't render a box-shadow reliably across the
+   td borders, and the halo would clip mid-row when the table is in
+   `border-collapse: collapse` mode (which the data-table is).  Drop
+   the halo for rows so users still get the crisp 2px outline without
+   a chopped-off ghost ring. */
+tr:focus-visible { box-shadow: none; }
+
+::selection { background: var(--accent-soft); color: var(--fg-strong); }
+
+/* Scrollbar (webkit only) */
+::-webkit-scrollbar       { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }
+
+/* Utility */
+.muted     { color: var(--fg-muted); }
+.faint     { color: var(--fg-faint); }
+.mono      { font-family: var(--font-mono); }
+.tnum      { font-variant-numeric: tabular-nums; }
+.text-xs   { font-size: 0.75rem; }
+.text-sm   { font-size: 0.85rem; }
+.text-lg   { font-size: 1.1rem; }
+.text-xl   { font-size: 1.35rem; }
+.text-2xl  { font-size: 1.8rem; }
+.bold      { font-weight: 600; }
+.no-wrap   { white-space: nowrap; }
+.hide-mobile { /* set in layout.css responsive block */ }
+
+/* ── Editorial eyebrow ──────────────────────────────────── */
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+.eyebrow::before {
+  content: "";
+  width: 1.5rem;
+  height: 1px;
+  background: currentColor;
+  opacity: 0.5;
+}
diff --git a/leaderboard/site/assets/css/chip-detail.css b/leaderboard/site/assets/css/chip-detail.css
new file mode 100644
index 00000000..5ce58bd3
--- /dev/null
+++ b/leaderboard/site/assets/css/chip-detail.css
@@ -0,0 +1,671 @@
+/* chip-detail.css — Chip-level overview page.
+ *
+ * Layout primitives (.hero, .section, .grid, .card, .data-table) come
+ * from the global stylesheets; this file only adds the per-page bits:
+ *   • chip-hero      : center-aligned hero matched to Home / Suites
+ *   • chip-suite-grid: per-suite KPI cards with suite-color accent
+ *   • chip-runs      : the all-submissions table styling
+ */
+
+/* ── Hero ──────────────────────────────────────────────────── */
+.chip-hero {
+  text-align: center;
+  padding: 2.5rem 1rem 1.75rem;
+}
+.chip-hero .eyebrow { justify-content: center; }
+/* Centered hero — drop the leading rule so the vendor label doesn't
+   read like "— APPLE", matching the rk-hero / cmp-hero treatment. */
+.chip-hero .eyebrow::before { display: none; }
+.chip-hero-eyebrow .vendor-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--vendor-color, var(--fg-muted));
+}
+
+/* ── 01 · Best per suite ──────────────────────────────────── */
+.chip-suite-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+}
+
+.chip-suite-card {
+  --suite-color: var(--accent-2);
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  padding: 1rem 1.05rem 1.05rem;
+  border: 1px solid var(--border-soft);
+  border-left: 3px solid color-mix(in srgb, var(--suite-color) 65%, transparent);
+  border-radius: var(--r-lg);
+  background: var(--bg-elev);
+  color: inherit;
+  text-decoration: none;
+  transition: border-color 120ms ease, transform 120ms ease,
+              box-shadow 120ms ease, background 120ms ease;
+}
+.chip-suite-card[data-suite="A"] { --suite-color: var(--suite-A); }
+.chip-suite-card[data-suite="B"] { --suite-color: var(--suite-B); }
+.chip-suite-card[data-suite="C"] { --suite-color: var(--suite-C); }
+.chip-suite-card[data-suite="D"] { --suite-color: var(--suite-D); }
+.chip-suite-card[data-suite="E"] { --suite-color: var(--suite-E); }
+.chip-suite-card[data-suite="F"] { --suite-color: var(--suite-F); }
+.chip-suite-card[data-suite="G"] { --suite-color: var(--suite-G); }
+
+a.chip-suite-card { cursor: pointer; }
+a.chip-suite-card:hover {
+  border-color: var(--suite-color);
+  border-left-color: var(--suite-color);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 18px -10px color-mix(in srgb, var(--suite-color) 45%, transparent);
+  background: color-mix(in srgb, var(--suite-color) 3%, var(--bg-elev));
+  text-decoration: none;
+}
+
+.chip-suite-card--empty {
+  opacity: 0.55;
+  border-left-color: var(--border-soft);
+}
+
+.chip-suite-head {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+.chip-suite-letter {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  background: color-mix(in srgb, var(--suite-color) 18%, transparent);
+  color: color-mix(in srgb, var(--suite-color) 75%, var(--fg-strong));
+  flex: 0 0 auto;
+}
+.chip-suite-letter--inline {
+  width: 22px;
+  height: 22px;
+  font-size: 0.7rem;
+}
+.chip-suite-title {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--fg-strong);
+  line-height: 1.2;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/* "Ranked #N of M" badge in the KPI card head.  Rank is computed
+   across unique chips (not raw rows), so a chip with many vLLM
+   versions doesn't double-count its own ranking slot.  Top-3 borrow
+   the same medal palette as Home / Rankings; everyone else stays
+   muted so the badge doesn't compete with the primary metric. */
+.chip-suite-rank {
+  flex: 0 0 auto;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--fg-muted);
+  background: color-mix(in srgb, var(--fg-muted) 10%, transparent);
+  padding: 0.18rem 0.45rem;
+  border-radius: 999px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.chip-suite-rank .chip-suite-rank-total {
+  color: var(--fg-faint);
+  font-weight: 500;
+}
+.chip-suite-rank.is-gold {
+  color: #b8860b;
+  background: color-mix(in srgb, #f1c40f 22%, transparent);
+}
+.chip-suite-rank.is-silver {
+  color: #7d7d7d;
+  background: color-mix(in srgb, #b0b0b0 25%, transparent);
+}
+.chip-suite-rank.is-bronze {
+  color: #8b4513;
+  background: color-mix(in srgb, #cd7f32 22%, transparent);
+}
+
+.chip-suite-metric {
+  margin-top: 0.2rem;
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+.chip-suite-val {
+  font-family: var(--font-serif);
+  font-size: 1.7rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  color: var(--fg-strong);
+  font-variant-numeric: tabular-nums;
+}
+.chip-suite-unit {
+  font-size: 0.78rem;
+  color: var(--fg-muted);
+  letter-spacing: 0.01em;
+}
+
+/* "×N" badge that appears next to the metric on chips with multiple
+ * fan-out variants (×1 / ×4 / ×8).  Tells users the headline number
+ * came from a multi-card deployment so they don't read it as a
+ * single-card score.  Suite-tinted to match the card accent. */
+.chip-suite-count {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  padding: 0.12rem 0.45rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--suite-color) 15%, transparent);
+  color: color-mix(in srgb, var(--suite-color) 70%, var(--fg-strong));
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.chip-suite-meta {
+  font-size: 0.78rem;
+  color: var(--fg-muted);
+  line-height: 1.4;
+}
+.chip-suite-meta .fw-ver { color: var(--fg-faint); margin-left: 0.25rem; }
+.chip-suite-empty {
+  font-size: 0.85rem;
+  color: var(--fg-faint);
+  font-style: italic;
+}
+
+/* Affordance hint pinned to the bottom of every active KPI card.
+ *   • Plain click   → primary action ("Open run") — emphasized.
+ *   • Modifier click → secondary path ("⌘+click for all in suite") —
+ *     muted and only fully revealed on hover so it doesn't compete
+ *     with the metric.  The full sentence is also exposed via the
+ *     card's `title` attribute for keyboard / screen-reader access. */
+.chip-suite-hint {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding-top: 0.5rem;
+  font-size: 0.68rem;
+  letter-spacing: 0.02em;
+  color: var(--fg-faint);
+  border-top: 1px dashed color-mix(in srgb, var(--border-soft) 80%, transparent);
+}
+.chip-suite-hint-primary {
+  color: var(--fg-muted);
+  font-weight: 600;
+}
+.chip-suite-hint-sep { opacity: 0.5; }
+.chip-suite-hint-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  opacity: 0.55;
+  transition: opacity 120ms ease;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chip-suite-hint kbd {
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  padding: 0.02rem 0.28rem;
+  border: 1px solid var(--border-soft);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  line-height: 1.2;
+}
+a.chip-suite-card:hover .chip-suite-hint-secondary { opacity: 1; }
+a.chip-suite-card:hover .chip-suite-hint {
+  border-top-color: color-mix(in srgb, var(--suite-color) 30%, var(--border-soft));
+}
+
+/* ── 02 · Performance fingerprint (radar) ─────────────────── */
+.chip-fp-wrap {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.9fr);
+  gap: 1.4rem;
+  align-items: center;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  padding: 1.2rem 1.3rem;
+  box-shadow: var(--shadow-card);
+}
+@media (max-width: 760px) {
+  .chip-fp-wrap {
+    grid-template-columns: 1fr;
+    padding: 1rem 0.95rem;
+  }
+}
+.chip-fp-canvas {
+  position: relative;
+  width: 100%;
+  /* Square the canvas so the radar polygon stays visually balanced;
+     Chart.js needs the parent to set the height (canvas is responsive). */
+  aspect-ratio: 1 / 1;
+  max-width: 420px;
+  margin: 0 auto;
+}
+.chip-fp-canvas canvas { width: 100% !important; height: 100% !important; }
+
+.chip-fp-legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.4rem;
+}
+.chip-fp-row {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr) auto auto;
+  gap: 0.55rem;
+  align-items: baseline;
+  padding: 0.32rem 0.55rem;
+  border-radius: var(--r-md);
+  background: var(--bg);
+  border: 1px solid var(--border-soft);
+  font-size: 0.82rem;
+}
+.chip-fp-row[data-suite="A"] { --suite-color: var(--suite-A); }
+.chip-fp-row[data-suite="B"] { --suite-color: var(--suite-B); }
+.chip-fp-row[data-suite="C"] { --suite-color: var(--suite-C); }
+.chip-fp-row[data-suite="D"] { --suite-color: var(--suite-D); }
+.chip-fp-row[data-suite="E"] { --suite-color: var(--suite-E); }
+.chip-fp-row[data-suite="F"] { --suite-color: var(--suite-F); }
+.chip-fp-row[data-suite="G"] { --suite-color: var(--suite-G); }
+.chip-fp-letter {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.75rem;
+  color: var(--on-accent, #fff);
+  background: var(--suite-color, var(--accent-2));
+}
+.chip-fp-name {
+  color: var(--fg);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chip-fp-value {
+  color: var(--fg-muted);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+.chip-fp-pct {
+  color: var(--fg-strong);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  min-width: 3.2rem;
+  text-align: right;
+}
+.chip-fp-pct.is-missing {
+  color: var(--fg-faint);
+  font-weight: 400;
+}
+
+/* ── 03 · Scaling across chip-counts (grouped bar) ────────── */
+.chip-scl-wrap {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1rem 1.4rem;
+  align-items: center;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  padding: 1.2rem 1.3rem 0.6rem;
+  box-shadow: var(--shadow-card);
+}
+@media (max-width: 760px) {
+  .chip-scl-wrap {
+    grid-template-columns: 1fr;
+    padding: 1rem 0.95rem 0.4rem;
+  }
+}
+.chip-scl-canvas {
+  position: relative;
+  width: 100%;
+  /* Aspect ratio that gives 6–7 suite clusters of bars adequate width
+     without stretching tall on mobile.  Chart.js owns the height. */
+  aspect-ratio: 16 / 7;
+  min-height: 220px;
+  max-height: 320px;
+}
+.chip-scl-canvas canvas { width: 100% !important; height: 100% !important; }
+
+.chip-scl-legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  align-self: start;
+  padding-top: 0.5rem;
+}
+.chip-scl-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.78rem;
+  color: var(--fg);
+}
+.chip-scl-legend-swatch {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  border: 1px solid var(--border-soft);
+  background: var(--accent-2);
+}
+.chip-scl-legend-label {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.chip-scl-breakdown {
+  margin-top: 0.9rem;
+  display: grid;
+  gap: 0.4rem;
+}
+.chip-scl-row {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 2fr);
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.4rem 0.65rem;
+  border-radius: var(--r-md);
+  background: var(--bg);
+  border: 1px solid var(--border-soft);
+  font-size: 0.8rem;
+}
+.chip-scl-row[data-suite="A"] { --suite-color: var(--suite-A); }
+.chip-scl-row[data-suite="B"] { --suite-color: var(--suite-B); }
+.chip-scl-row[data-suite="C"] { --suite-color: var(--suite-C); }
+.chip-scl-row[data-suite="D"] { --suite-color: var(--suite-D); }
+.chip-scl-row[data-suite="E"] { --suite-color: var(--suite-E); }
+.chip-scl-row[data-suite="F"] { --suite-color: var(--suite-F); }
+.chip-scl-row[data-suite="G"] { --suite-color: var(--suite-G); }
+.chip-scl-row-letter {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.74rem;
+  color: var(--on-accent, #fff);
+  background: var(--suite-color, var(--accent-2));
+}
+.chip-scl-row-title {
+  color: var(--fg);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chip-scl-row-cells {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  gap: 0.4rem;
+  align-items: center;
+}
+.chip-scl-cell {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.05rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+}
+.chip-scl-cell-pct {
+  color: var(--fg-strong);
+  font-weight: 600;
+  font-size: 0.78rem;
+}
+.chip-scl-cell-val {
+  color: var(--fg-muted);
+  font-size: 0.7rem;
+}
+.chip-scl-cell-empty {
+  color: var(--fg-faint);
+  font-weight: 400;
+  text-align: right;
+  display: inline-block;
+}
+
+/* ── 04 · Every submission ────────────────────────────────── */
+.chip-runs-wrap {
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  background: var(--bg-elev);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.chip-runs {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.86rem;
+}
+.chip-runs thead th {
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+  padding: 0.7rem 0.85rem;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border-soft);
+  white-space: nowrap;
+}
+.chip-runs tbody td {
+  padding: 0.7rem 0.85rem;
+  border-bottom: 1px solid var(--border-soft);
+  color: var(--fg);
+  vertical-align: middle;
+}
+.chip-runs tbody tr:last-child td { border-bottom: 0; }
+.chip-runs tbody tr {
+  cursor: pointer;
+  transition: background 80ms ease;
+}
+.chip-runs tbody tr:hover td {
+  background: color-mix(in srgb, var(--suite-color, var(--fg-muted)) 7%, transparent);
+}
+
+.chip-runs tbody tr[data-suite="A"] { --suite-color: var(--suite-A); }
+.chip-runs tbody tr[data-suite="B"] { --suite-color: var(--suite-B); }
+.chip-runs tbody tr[data-suite="C"] { --suite-color: var(--suite-C); }
+.chip-runs tbody tr[data-suite="D"] { --suite-color: var(--suite-D); }
+.chip-runs tbody tr[data-suite="E"] { --suite-color: var(--suite-E); }
+.chip-runs tbody tr[data-suite="F"] { --suite-color: var(--suite-F); }
+.chip-runs tbody tr[data-suite="G"] { --suite-color: var(--suite-G); }
+
+.chip-runs-suite {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+}
+.chip-runs-suite-title {
+  font-weight: 600;
+  color: var(--fg-strong);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chip-runs-metric {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--fg-strong);
+}
+.chip-runs .fw-ver { color: var(--fg-faint); margin-left: 0.25rem; }
+.chip-runs .col-tier .badge { text-transform: capitalize; }
+.chip-runs .col-chips { width: 1%; white-space: nowrap; }
+.chip-runs-count {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--fg-strong);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--fg-muted) 10%, transparent);
+}
+
+/* ── Empty / not-found state ──────────────────────────────────
+ * Visually rhymes with .rk-empty / .cmp-empty so a stale
+ * `#/chip/<slug>` link reads as the same "no data here" surface
+ * as an over-filtered rankings view, not a hard 404. */
+.chip-empty {
+  text-align: center;
+  padding: 3rem 1.5rem;
+  color: var(--fg-muted);
+  background: var(--bg-elev);
+  border: 1px dashed var(--border);
+  border-radius: var(--r-lg);
+}
+.chip-empty .state-icon {
+  display: block;
+  font-size: 2rem;
+  color: var(--fg-faint);
+  margin-bottom: 0.6rem;
+}
+.chip-empty p { margin: 0.3rem 0; }
+.chip-empty .chip-empty-sub {
+  font-size: 0.85rem;
+  color: var(--fg-faint);
+}
+.chip-empty code {
+  font-family: var(--font-mono);
+  background: var(--bg);
+  padding: 0.05rem 0.35rem;
+  border-radius: 4px;
+  color: var(--fg-strong);
+}
+
+/* ── 03 · Compare with similar chips ─────────────────────────
+ * Horizontal-flowing grid of peer tiles.  Each tile links to that
+ * chip's own detail page so the section is a pure navigation
+ * surface; we deliberately do NOT mutate the compare basket from
+ * here (that would be a hidden side effect on a click that visually
+ * reads as "open this chip"). */
+.chip-peer-grid {
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+}
+.chip-peer-card {
+  --vendor-color: var(--fg-faint);
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.85rem 1rem 0.95rem;
+  border: 1px solid var(--border-soft);
+  border-left: 3px solid color-mix(in srgb, var(--vendor-color) 60%, transparent);
+  border-radius: var(--r-md);
+  background: var(--bg-elev);
+  color: inherit;
+  text-decoration: none;
+  transition: border-color 120ms ease, transform 120ms ease,
+              box-shadow 120ms ease, background 120ms ease;
+}
+/* `--vendor-color` set globally by data.js via `[data-vendor="<name>"]`. */
+
+.chip-peer-card:hover {
+  border-color: var(--vendor-color);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 18px -10px color-mix(in srgb, var(--vendor-color) 45%, transparent);
+  background: color-mix(in srgb, var(--vendor-color) 3%, var(--bg-elev));
+  text-decoration: none;
+}
+.chip-peer-vendor {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+}
+.chip-peer-name {
+  font-weight: 600;
+  color: var(--fg-strong);
+  font-size: 0.95rem;
+  line-height: 1.25;
+}
+.chip-peer-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.55rem;
+  margin-top: 0.15rem;
+  font-size: 0.72rem;
+  color: var(--fg-muted);
+}
+.chip-peer-suites { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
+.chip-peer-suite {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  font-size: 0.62rem;
+  font-weight: 700;
+  background: color-mix(in srgb, var(--suite-color, var(--fg-muted)) 18%, transparent);
+  color: color-mix(in srgb, var(--suite-color, var(--fg-muted)) 75%, var(--fg-strong));
+}
+.chip-peer-suite[data-suite="A"] { --suite-color: var(--suite-A); }
+.chip-peer-suite[data-suite="B"] { --suite-color: var(--suite-B); }
+.chip-peer-suite[data-suite="C"] { --suite-color: var(--suite-C); }
+.chip-peer-suite[data-suite="D"] { --suite-color: var(--suite-D); }
+.chip-peer-suite[data-suite="E"] { --suite-color: var(--suite-E); }
+.chip-peer-suite[data-suite="F"] { --suite-color: var(--suite-F); }
+.chip-peer-suite[data-suite="G"] { --suite-color: var(--suite-G); }
+.chip-peer-runs { font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* ── Responsive ───────────────────────────────────────────── */
+@media (max-width: 880px) {
+  .chip-hero { padding: 1.75rem 0.5rem 1.4rem; }
+  .chip-suite-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
+  .chip-suite-val { font-size: 1.5rem; }
+  .chip-runs { font-size: 0.8rem; }
+  .chip-runs thead th,
+  .chip-runs tbody td { padding: 0.55rem 0.6rem; }
+  /* Submitter column carries the least info on mobile — hide it first. */
+  .chip-runs .col-submitter { display: none; }
+  .chip-peer-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
+}
+@media (max-width: 640px) {
+  .chip-runs .col-precision { display: none; }
+  .chip-suite-grid { grid-template-columns: 1fr; }
+  .chip-peer-grid { grid-template-columns: 1fr; }
+  /* Modifier-click is moot on touch — keep the primary hint, drop
+     the secondary one (the title attribute still carries the full
+     sentence for assistive tech). */
+  .chip-suite-hint-sep,
+  .chip-suite-hint-secondary { display: none; }
+}
diff --git a/leaderboard/site/assets/css/components.css b/leaderboard/site/assets/css/components.css
new file mode 100644
index 00000000..5d53a068
--- /dev/null
+++ b/leaderboard/site/assets/css/components.css
@@ -0,0 +1,326 @@
+/* components.css — buttons, cards, badges, tags, bars */
+
+/* ── Cards ────────────────────────────────────────────────── */
+.card {
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  padding: 1.1rem 1.2rem;
+  transition: border-color 120ms ease, transform 120ms ease;
+}
+.card.is-link {
+  cursor: pointer;
+  display: block;
+  color: inherit;
+}
+.card.is-link:hover {
+  border-color: var(--accent);
+  text-decoration: none;
+}
+
+/* ── Buttons ──────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.9rem;
+  border-radius: var(--r-md);
+  font-size: 0.85rem;
+  font-weight: 500;
+  background: var(--bg-elev);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.btn:hover { background: var(--bg-elev-2); border-color: var(--accent); text-decoration: none; }
+.btn.primary {
+  background: var(--accent-2);
+  border-color: var(--accent-2);
+  color: var(--on-accent);
+}
+.btn.primary:hover {
+  background: color-mix(in srgb, var(--accent-2) 88%, var(--fg-strong));
+  border-color: color-mix(in srgb, var(--accent-2) 88%, var(--fg-strong));
+}
+.btn.ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--fg-muted);
+}
+.btn.ghost:hover { color: var(--fg); background: var(--bg-elev); border-color: var(--border-soft); }
+.btn.small { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
+
+/* ── Copy / share buttons ─────────────────────────────────────
+   Cross-view affordance for "copy a URL to the clipboard".  Compose
+   with any base button class (`.btn`, `.cmp-basket-share`, etc.) — this
+   class only adds the icon spacing and the success / failure flash
+   chrome that runs after `flashButtonLabel(btn, …, { className: "is-copied"|"is-copy-failed" })`. */
+.copy-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
+.copy-btn-icon {
+  font-size: 0.95em;
+  line-height: 1;
+  display: inline-block;
+  transform: translateY(-1px);
+  opacity: 0.85;
+}
+.copy-btn.is-copied {
+  color: var(--good, #16a34a);
+  border-color: var(--good, #16a34a);
+  background: color-mix(in srgb, var(--good, #16a34a) 10%, transparent);
+}
+.copy-btn.is-copy-failed {
+  color: var(--bad, #dc2626);
+  border-color: var(--bad, #dc2626);
+  background: color-mix(in srgb, var(--bad, #dc2626) 10%, transparent);
+}
+
+/* ── Chart download button ────────────────────────────────────
+   Tiny icon button placed at the top-right corner of any chart
+   wrapper.  Position the wrapper `position: relative` and drop a
+   `<button class="chart-dl-btn">` inside; the helper in utils.js
+   (downloadCanvasAsPng) wires the click target to the canvas. */
+.chart-dl-btn {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  width: auto;
+  min-width: 26px;
+  height: 26px;
+  padding: 0 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--border-soft);
+  background: var(--bg-elev);
+  color: var(--fg-muted);
+  font-size: 0.7rem;
+  font-weight: 500;
+  cursor: pointer;
+  opacity: 0.55;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
+  z-index: 2;
+}
+.chart-dl-btn:hover,
+.chart-dl-btn:focus-visible {
+  opacity: 1;
+  color: var(--fg-strong);
+  border-color: var(--accent);
+  background: var(--bg-elev-2);
+}
+.chart-dl-btn-icon {
+  font-size: 0.85em;
+  line-height: 1;
+  transform: translateY(-1px);
+}
+.chart-dl-btn.is-saved {
+  color: var(--good, #16a34a);
+  border-color: var(--good, #16a34a);
+  opacity: 1;
+}
+.chart-dl-btn.is-failed {
+  color: var(--bad, #dc2626);
+  border-color: var(--bad, #dc2626);
+  opacity: 1;
+}
+
+/* ── Badges & tags ────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.15rem 0.55rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  border-radius: 999px;
+  background: var(--bg-elev-2);
+  color: var(--fg-muted);
+  border: 1px solid var(--border-soft);
+  white-space: nowrap;
+}
+.badge.tier-verified  {
+  color: var(--good);
+  border-color: color-mix(in srgb, var(--good) 40%, transparent);
+  background: color-mix(in srgb, var(--good) 10%, transparent);
+}
+.badge.tier-community {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+  background: var(--accent-soft);
+}
+/* Compact KPI tile (with subtle vertical divider) */
+.kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  align-items: center;
+  padding: 0 1.5rem;
+  position: relative;
+  min-width: 5.5rem;
+}
+.kpi + .kpi::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.4rem;
+  bottom: 0.4rem;
+  width: 1px;
+  background: var(--border-soft);
+}
+.kpi .kpi-value {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--fg-strong);
+  letter-spacing: -0.02em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.kpi .kpi-label {
+  font-size: 0.7rem;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 500;
+}
+
+/* Hero — centered text stack, no rounded clip. Background lives on
+   body::before so the gradient bleeds into the page naturally. */
+.hero {
+  padding: 3.25rem 1rem 2.75rem;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+.hero h1 {
+  margin: 0 auto 0.55rem;
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--fg-strong);
+  letter-spacing: -0.025em;
+  line-height: 1.05;
+  max-width: 22ch;
+}
+.hero .hero-sub {
+  margin: 0 auto 1.4rem;
+  font-size: 1.15rem;
+  color: var(--fg-strong);
+  font-weight: 400;
+  letter-spacing: -0.005em;
+  line-height: 1.35;
+  white-space: nowrap;
+}
+.hero .tagline {
+  color: var(--fg-muted);
+  margin: 0 auto 1.9rem;
+  font-size: 1rem;
+  line-height: 1.6;
+  max-width: 54ch;
+}
+
+.hero-stats {
+  display: flex;
+  gap: 0;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0 auto 1.75rem;
+  padding: 1.25rem 0;
+  border-top: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
+  max-width: 56rem;
+}
+.hero-cta {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* Recent-activity ribbon between the KPI strip and the CTA row.  Uses
+   the accent palette to read as a "live" indicator without competing
+   with the primary CTA below.  The pulsing dot mirrors a status-LED
+   convention so contributors immediately register that the page
+   updates as new submissions land. */
+.hero-recent-ribbon {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 0 auto 1.4rem;
+  padding: 0.5rem 0.95rem 0.5rem 0.85rem;
+  border-radius: 999px;
+  border: 1px solid var(--border-soft);
+  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
+  color: var(--fg);
+  font-size: 0.9rem;
+  text-decoration: none;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.hero-recent-ribbon:hover {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev));
+  text-decoration: none;
+}
+.hero-recent-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
+  animation: hero-recent-pulse 2s ease-out infinite;
+}
+@keyframes hero-recent-pulse {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
+  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hero-recent-dot { animation: none; }
+}
+.hero-recent-text { color: var(--fg); }
+.hero-recent-text strong { color: var(--fg-strong); font-weight: 600; }
+.hero-recent-window { color: var(--fg-muted); margin-left: 0.25rem; }
+.hero-recent-cta {
+  color: var(--accent);
+  font-weight: 500;
+  margin-left: 0.4rem;
+  white-space: nowrap;
+}
+
+/* Subtle accent on the freshness KPI so the "this week" tile reads as
+   the active counter without overpowering the static stats next to it. */
+.kpi.kpi--fresh .kpi-value { color: var(--accent); }
+.kpi.kpi--fresh .kpi-label { color: var(--accent); opacity: 0.85; }
+
+@media (max-width: 880px) {
+  .hero .hero-sub { font-size: 1rem; }
+}
+@media (max-width: 720px) {
+  .hero .hero-sub { font-size: 0.92rem; white-space: normal; max-width: 36ch; }
+}
+@media (max-width: 640px) {
+  .hero { padding: 1.75rem 0.5rem 2rem; }
+  .hero h1 { font-size: 1.85rem; }
+  .hero .tagline { font-size: 0.92rem; }
+  .hero-stats { padding: 0.9rem 0; }
+  .kpi { padding: 0 0.85rem; min-width: 4rem; }
+  .kpi .kpi-value { font-size: 1.4rem; }
+  .kpi .kpi-label { font-size: 0.65rem; letter-spacing: 0.08em; }
+  .hero-recent-ribbon { font-size: 0.82rem; padding: 0.4rem 0.75rem; max-width: 100%; }
+  .hero-recent-window { display: block; margin-left: 0; }
+  .hero-recent-cta { display: none; }
+}
+/* Very narrow viewports (≤420 — older phones, app drawer split-screen):
+   long titles like "AccelMark Leaderboard" or "NVIDIA H100 80GB HBM3"
+   overflow even at 1.85rem.  Drop another notch, force wrapping, and
+   stack the CTA row so the buttons are full-bleed and tappable. */
+@media (max-width: 420px) {
+  .hero { padding: 1.4rem 0.4rem 1.6rem; }
+  .hero h1 {
+    font-size: 1.5rem;
+    line-height: 1.1;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+  .hero-cta { flex-direction: column; align-items: stretch; }
+  .hero-cta .btn { width: 100%; text-align: center; }
+}
diff --git a/leaderboard/site/assets/css/home.css b/leaderboard/site/assets/css/home.css
new file mode 100644
index 00000000..6b699518
--- /dev/null
+++ b/leaderboard/site/assets/css/home.css
@@ -0,0 +1,564 @@
+/* home.css — Home page (suite overview grid + recent additions + vendor coverage)
+ *
+ * Each suite card declares its `data-suite="A".."G"` which scopes
+ *   --suite-color   (full saturation, used for header bar + accents)
+ *   --suite-tint    (~10% alpha, used for #1 row + letter chip bg)
+ */
+
+/* ── Per-suite color tokens via data attribute ──────────── */
+.suite-card[data-suite="A"], .lb-row[data-suite="A"], .vendor-suite-pill[data-suite="A"] { --suite-color: var(--suite-A); }
+.suite-card[data-suite="B"], .lb-row[data-suite="B"], .vendor-suite-pill[data-suite="B"] { --suite-color: var(--suite-B); }
+.suite-card[data-suite="C"], .lb-row[data-suite="C"], .vendor-suite-pill[data-suite="C"] { --suite-color: var(--suite-C); }
+.suite-card[data-suite="D"], .lb-row[data-suite="D"], .vendor-suite-pill[data-suite="D"] { --suite-color: var(--suite-D); }
+.suite-card[data-suite="E"], .lb-row[data-suite="E"], .vendor-suite-pill[data-suite="E"] { --suite-color: var(--suite-E); }
+.suite-card[data-suite="F"], .lb-row[data-suite="F"], .vendor-suite-pill[data-suite="F"] { --suite-color: var(--suite-F); }
+.suite-card[data-suite="G"], .lb-row[data-suite="G"], .vendor-suite-pill[data-suite="G"] { --suite-color: var(--suite-G); }
+
+/* Default fallback color */
+.suite-card,
+.lb-row,
+.vendor-suite-pill { --suite-color: var(--accent-2); }
+
+/* ── Uniform 3-col suite grid ──────────────────────────── */
+.suite-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.25rem;
+}
+@media (max-width: 980px) {
+  .suite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .suite-grid { grid-template-columns: 1fr; }
+}
+
+/* ── Suite card ────────────────────────────────────────────
+   Header (filled in suite color) contains:
+     · letter + bigger title + right metric pill
+     · tagline (short description, moved out of the body)
+     · meta line (model · precision · N rows · M chips)
+   Body is the lb-row leaderboard only (top 6).
+   Footer is the centered "View full ranking →" CTA. */
+
+.suite-card {
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  color: inherit;
+  box-shadow: var(--shadow-card);
+  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+}
+.suite-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lift);
+  border-color: color-mix(in srgb, var(--suite-color) 35%, var(--border-soft));
+}
+
+.suite-card-head {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  padding: 1rem 1.15rem 1.05rem;
+  background: var(--suite-color);
+  color: var(--on-accent);
+  position: relative;
+  overflow: hidden;
+}
+.suite-card-head::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 65%);
+  pointer-events: none;
+}
+.suite-card-head > * { position: relative; z-index: 1; }
+
+.suite-head-row1 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-width: 0;
+}
+.suite-head-left {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.suite-letter {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.22);
+  color: var(--on-accent);
+  font-weight: 700;
+  font-size: 0.85rem;
+  letter-spacing: 0.02em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.suite-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--on-accent);
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  overflow-wrap: break-word;
+}
+.suite-metric-tag {
+  flex: 0 0 auto;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.22rem 0.6rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.22);
+  color: var(--on-accent);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+.suite-head-tagline {
+  font-size: 0.86rem;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.86);
+  margin: 0;
+}
+
+.suite-head-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem 0.85rem;
+  font-size: 0.74rem;
+  color: rgba(255, 255, 255, 0.78);
+  letter-spacing: 0.01em;
+  padding-top: 0.15rem;
+}
+.suite-head-meta .meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+.suite-head-meta .meta-item strong {
+  color: var(--on-accent);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.suite-card-body {
+  padding: 0.4rem 0.55rem 0.35rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.suite-card-foot {
+  padding: 0.55rem 1.15rem 1rem;
+  text-align: center;
+  border-top: 1px solid var(--border-soft);
+  margin-top: 0.2rem;
+}
+.suite-card-foot a,
+.suite-card-foot .cta {
+  font-size: 0.82rem;
+  color: color-mix(in srgb, var(--suite-color) 78%, var(--fg-strong));
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+}
+.suite-card:hover .suite-card-foot .cta { color: var(--suite-color); }
+
+.suite-card.empty .suite-card-body {
+  padding: 1.5rem 1.1rem 1.25rem;
+  color: var(--fg-faint);
+  font-style: italic;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+/* ── Leaderboard row (used in suite cards + recent list) ── */
+.lb-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.7rem;
+  /* Row is a <div> (so the chip-name anchor inside can be a real <a>);
+     keep the link affordance for the row body. */
+  cursor: pointer;
+  padding: 0.62rem 0.7rem;
+  border-radius: var(--r-md);
+  text-decoration: none;
+  color: inherit;
+  transition: background 100ms ease;
+}
+.lb-row:hover {
+  background: var(--bg-elev-2);
+  text-decoration: none;
+}
+.lb-row + .lb-row::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0.65rem;
+  right: 0.65rem;
+  height: 1px;
+  background: var(--border-soft);
+  pointer-events: none;
+}
+.lb-row:hover::before,
+.lb-row:hover + .lb-row::before { background: transparent; }
+
+/* Featured #1 row — soft suite-color tint background */
+.lb-row.lb-row--featured {
+  background: color-mix(in srgb, var(--suite-color) 8%, transparent);
+  padding-top: 0.78rem;
+  padding-bottom: 0.78rem;
+  border-left: 2px solid var(--suite-color);
+  border-radius: 0 var(--r-md) var(--r-md) 0;
+  margin-left: -2px;
+}
+.lb-row.lb-row--featured + .lb-row::before { background: transparent; }
+.lb-row.lb-row--featured:hover {
+  background: color-mix(in srgb, var(--suite-color) 14%, transparent);
+}
+.lb-row.lb-row--featured .lb-row-name { font-size: 1rem; }
+.lb-row.lb-row--featured .lb-row-score .score-val { font-size: 1.08rem; }
+
+.lb-row-rank {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  font-weight: 700;
+  background: var(--bg-elev-2);
+  color: var(--fg-muted);
+  border: 1px solid var(--border-soft);
+  font-variant-numeric: tabular-nums;
+}
+.lb-row-rank.gold   { background: var(--gold);   color: #1a1206; border-color: transparent; }
+.lb-row-rank.silver { background: var(--silver); color: #15171c; border-color: transparent; }
+.lb-row-rank.bronze { background: var(--bronze); color: #1e0e02; border-color: transparent; }
+.lb-row-rank.suite-tag-rank {
+  background: color-mix(in srgb, var(--suite-color) 18%, transparent);
+  color: var(--suite-color);
+  border-color: color-mix(in srgb, var(--suite-color) 35%, transparent);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.lb-row-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+.lb-row-name {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--fg-strong);
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* Renders as an <a> so the chip name navigates to /chip/<slug> while
+     the rest of the row opens the run modal.  Suppress the default
+     underline and surface it only on hover to keep the row visually
+     quiet. */
+  text-decoration: none;
+  display: inline-block;
+  max-width: 100%;
+  transition: color 100ms ease;
+}
+.lb-row-name:hover {
+  color: var(--accent-2);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+.lb-row-sub {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.74rem;
+  color: var(--fg-muted);
+  line-height: 1.25;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+.lb-row-sub .fw-line {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lb-row-byline {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--fg-faint);
+  line-height: 1.25;
+  margin-top: 0.05rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lb-row-sub .vendor-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--vendor-color, var(--fg-faint));
+  flex: 0 0 auto;
+}
+/* `--vendor-color` set globally by data.js via `[data-vendor="<name>"]`. */
+
+.lb-row-sub .sub-sep { color: var(--fg-faint); flex: 0 0 auto; }
+.lb-row-sub .vendor-name { color: var(--fg-muted); flex: 0 0 auto; }
+.lb-row-sub .fw-ver {
+  color: var(--fg-faint);
+  font-size: 0.7rem;
+  margin-left: 0.15rem;
+  font-variant-numeric: tabular-nums;
+}
+.lb-row-sub .suite-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.05rem 0.45rem;
+  background: color-mix(in srgb, var(--suite-color) 12%, transparent);
+  color: color-mix(in srgb, var(--suite-color) 80%, var(--fg-strong));
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.lb-row-score {
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  line-height: 1.1;
+}
+.lb-row-score .score-val {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--fg-strong);
+  letter-spacing: -0.005em;
+  font-variant-numeric: tabular-nums;
+}
+.lb-row-score .score-unit {
+  font-size: 0.68rem;
+  color: var(--fg-muted);
+  letter-spacing: 0.02em;
+  margin-top: 0.1rem;
+}
+
+.lb-row.placeholder {
+  color: var(--fg-faint);
+  font-style: italic;
+  justify-content: center;
+  grid-template-columns: auto;
+}
+
+/* ── Recent submissions list ─────────────────────────────── */
+.recent-list {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  padding: 0.5rem 0.55rem;
+  box-shadow: var(--shadow-card);
+}
+
+/* ── Chip cloud (02 · Coverage) ──────────────────────────── */
+.chip-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 0.5rem 0.5rem;
+}
+
+.chip-tile {
+  --vendor-color: var(--fg-faint);
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.45rem 0.8rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--vendor-color) 14%, var(--bg-elev));
+  border: 1px solid color-mix(in srgb, var(--vendor-color) 32%, transparent);
+  color: var(--fg-strong);
+  font-weight: 600;
+  font-size: 0.85rem;
+  letter-spacing: -0.005em;
+  text-decoration: none;
+  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+  white-space: nowrap;
+}
+.chip-tile:hover {
+  background: color-mix(in srgb, var(--vendor-color) 26%, var(--bg-elev));
+  border-color: var(--vendor-color);
+  transform: translateY(-1px);
+  text-decoration: none;
+}
+.chip-tile.size-sm { font-size: 0.8rem;  padding: 0.38rem 0.7rem;  }
+.chip-tile.size-md { font-size: 0.92rem; padding: 0.45rem 0.85rem; }
+.chip-tile.size-lg { font-size: 1.05rem; padding: 0.55rem 1.05rem; }
+.chip-tile.size-xl { font-size: 1.25rem; padding: 0.65rem 1.25rem; }
+
+/* Phone widths: tiles can't keep their popularity-tier size scaling
+   without overflowing the viewport (the longest chip names already
+   eat 200+ px at xl).  Collapse them to a single compact size and
+   allow the inner text to wrap. */
+@media (max-width: 480px) {
+  .chip-cloud { gap: 0.4rem; }
+  .chip-tile,
+  .chip-tile.size-sm,
+  .chip-tile.size-md,
+  .chip-tile.size-lg,
+  .chip-tile.size-xl {
+    font-size: 0.82rem;
+    padding: 0.36rem 0.6rem;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+}
+
+/* `--vendor-color` set globally by data.js via `[data-vendor="<name>"]`. */
+
+.chip-tile-count {
+  font-size: 0.7em;
+  font-weight: 500;
+  color: var(--fg-muted);
+  font-variant-numeric: tabular-nums;
+  padding-left: 0.4rem;
+  border-left: 1px solid color-mix(in srgb, var(--vendor-color) 30%, transparent);
+}
+
+.cloud-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.4rem 1.5rem;
+  margin-top: 1rem;
+  padding: 0.85rem 1rem;
+  border-top: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
+  font-size: 0.8rem;
+  color: var(--fg-muted);
+}
+.cloud-legend-item {
+  --vendor-color: var(--fg-faint);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+/* `--vendor-color` set globally by data.js via `[data-vendor="<name>"]`. */
+.cloud-legend-item .dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--vendor-color);
+  flex: 0 0 auto;
+}
+.cloud-legend-item .name {
+  color: var(--fg-strong);
+  font-weight: 600;
+}
+.cloud-legend-item .meta {
+  color: var(--fg-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Submit your result (04 · Contribute) ───────────────── */
+/* Borderless, blends into the page with a soft radial wash that
+   fades to the page background — visually quieter than a card. */
+.submit-section { margin: 4rem 0 1rem; }
+.submit-card {
+  position: relative;
+  padding: 3rem 1rem 2.5rem;
+  text-align: center;
+  border: none;
+  background: transparent;
+}
+.submit-card::before {
+  content: "";
+  position: absolute;
+  inset: -1.5rem -4rem;
+  z-index: -1;
+  background:
+    radial-gradient(42% 80% at 26% 50%, color-mix(in srgb, var(--suite-A) 11%, transparent), transparent 65%),
+    radial-gradient(42% 80% at 74% 50%, color-mix(in srgb, var(--suite-D) 11%, transparent), transparent 65%);
+  -webkit-mask-image: radial-gradient(80% 95% at 50% 50%, #000 55%, transparent 100%);
+          mask-image: radial-gradient(80% 95% at 50% 50%, #000 55%, transparent 100%);
+  pointer-events: none;
+}
+.submit-card .eyebrow { justify-content: center; }
+.submit-card .eyebrow::before { display: none; }
+.submit-title {
+  font-size: 2.85rem;
+  font-weight: 700;
+  margin: 0.6rem 0 0.95rem;
+  color: var(--fg-strong);
+  letter-spacing: -0.025em;
+  line-height: 1.05;
+}
+.submit-body {
+  margin: 0 auto 1.75rem;
+  color: var(--fg-muted);
+  font-size: 1.08rem;
+  line-height: 1.65;
+  max-width: 58ch;
+}
+@media (max-width: 720px) {
+  .submit-title { font-size: 2.2rem; }
+  .submit-body { font-size: 1rem; }
+}
+.submit-cta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.6rem;
+}
+
+/* Stats row inside suite card body (used by /suites listing). */
+.suite-stats {
+  display: flex;
+  gap: 1.25rem;
+  flex-wrap: wrap;
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+}
+.suite-stats strong {
+  color: var(--fg-strong);
+  font-weight: 700;
+  font-size: 1rem;
+  font-variant-numeric: tabular-nums;
+  margin-right: 0.2rem;
+}
+
+a.suite-card { text-decoration: none; color: inherit; }
+a.suite-card:hover { text-decoration: none; }
+
+/* ── Responsive ──────────────────────────────────────────── */
+@media (max-width: 700px) {
+  .suite-card-head { padding: 0.85rem 0.95rem; }
+  .suite-title { font-size: 1.05rem; }
+  .suite-card-body { padding: 0.3rem 0.4rem 0.25rem; }
+  .suite-card-foot { padding: 0.5rem 0.95rem 0.9rem; }
+  .lb-row { padding: 0.45rem 0.55rem; gap: 0.55rem; }
+  .lb-row-name { font-size: 0.92rem; }
+  .lb-row-score .score-val { font-size: 0.95rem; }
+}
diff --git a/leaderboard/site/assets/css/layout.css b/leaderboard/site/assets/css/layout.css
new file mode 100644
index 00000000..a3d05b91
--- /dev/null
+++ b/leaderboard/site/assets/css/layout.css
@@ -0,0 +1,159 @@
+/* layout.css — top nav, page shell, footer, responsive */
+
+.topnav {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 0.85rem 1.75rem;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border-soft);
+}
+@supports (backdrop-filter: blur(6px)) {
+  .topnav {
+    background: color-mix(in srgb, var(--bg) 86%, transparent);
+    backdrop-filter: saturate(160%) blur(8px);
+    -webkit-backdrop-filter: saturate(160%) blur(8px);
+  }
+}
+
+.topnav .brand {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-weight: 700;
+  font-size: 1.05rem;
+  color: var(--fg-strong);
+}
+.topnav .brand:hover { text-decoration: none; }
+.topnav .brand svg { display: block; }
+
+.topnav .nav-links {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.topnav .nav-link {
+  padding: 0.45rem 0.85rem;
+  border-radius: var(--r-md);
+  font-size: 0.9rem;
+  color: var(--fg-muted);
+  font-weight: 500;
+}
+.topnav .nav-link:hover { background: var(--bg-elev); color: var(--fg); text-decoration: none; }
+.topnav .nav-link.active { background: var(--accent-soft); color: var(--fg-strong); }
+
+.topnav .nav-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.topnav .gh-link {
+  color: var(--fg-muted);
+  font-size: 0.85rem;
+  padding: 0.35rem;
+}
+.topnav .gh-link:hover { color: var(--fg); text-decoration: none; }
+
+main {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding: 2rem 1.75rem 3rem;
+}
+
+footer {
+  border-top: 1px solid var(--border-soft);
+  padding: 2rem 1.5rem 3rem;
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 0.82rem;
+}
+footer a { color: var(--fg-muted); border-bottom: 1px solid transparent; }
+footer a:hover { color: var(--fg); border-bottom-color: var(--fg); text-decoration: none; }
+
+/* Page section spacing */
+.section {
+  margin-bottom: 3.5rem;
+}
+.section-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-soft);
+}
+.section-header .section-title {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  min-width: 0;
+}
+.section-header h2 {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--fg-strong);
+  letter-spacing: -0.015em;
+  line-height: 1.15;
+}
+.section-header .section-sub {
+  color: var(--fg-muted);
+  font-size: 0.92rem;
+  line-height: 1.45;
+  text-align: right;
+  flex: 0 1 auto;
+}
+
+/* Loading + empty states */
+.state {
+  padding: 3rem 1rem;
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 0.95rem;
+}
+.state .state-icon {
+  font-size: 1.6rem;
+  color: var(--fg-faint);
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+/* Generic grid helpers */
+.grid {
+  display: grid;
+  gap: 1.25rem;
+}
+.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+@media (max-width: 980px) {
+  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+  .topnav { padding: 0.6rem 1rem; gap: 0.5rem; flex-wrap: wrap; }
+  .topnav .nav-link { padding: 0.35rem 0.55rem; font-size: 0.82rem; }
+  main { padding: 1rem; }
+  .hide-mobile { display: none !important; }
+}
+/* Phone-sized viewports — once we drop below ~480px the brand wordmark
+   and the 4-link nav can't share a single row.  Hide the wordmark and
+   GitHub link so the four primary destinations still fit on one line,
+   and let the link strip shrink-to-fit. */
+@media (max-width: 480px) {
+  .topnav { padding: 0.55rem 0.65rem; gap: 0.35rem; flex-wrap: nowrap; }
+  .topnav .brand span { display: none; }
+  .topnav .nav-links { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
+  .topnav .nav-link { padding: 0.3rem 0.45rem; font-size: 0.78rem; }
+  .topnav .nav-right { display: none; }
+  main { padding: 0.85rem 0.75rem 2rem; }
+}
diff --git a/leaderboard/site/assets/css/modal.css b/leaderboard/site/assets/css/modal.css
new file mode 100644
index 00000000..00e8e21a
--- /dev/null
+++ b/leaderboard/site/assets/css/modal.css
@@ -0,0 +1,423 @@
+/* modal.css — Single-run detail overlay.
+ *
+ * Composition:
+ *   .modal-overlay  → fixed backdrop, fades in when .open
+ *   .modal-shell    → centered card (max-w 760px, max-h 88vh, scrollable)
+ *     ↳ header (title + subtitle + close)
+ *     ↳ tab bar (Details / Visualize / Implementation)
+ *     ↳ body (one .modal-panel per tab, only .active is shown)
+ *     ↳ footer (submission id + reproduce link)
+ *
+ * Suite accent on the shell uses [data-suite="A"..G"] → --suite-color
+ * (same scheme as rankings.css), so the modal picks up the same hue as
+ * the suite the run belongs to.
+ */
+
+/* ── Per-suite color binding ───────────────────────────────── */
+.modal-shell[data-suite="A"] { --suite-color: var(--suite-A); }
+.modal-shell[data-suite="B"] { --suite-color: var(--suite-B); }
+.modal-shell[data-suite="C"] { --suite-color: var(--suite-C); }
+.modal-shell[data-suite="D"] { --suite-color: var(--suite-D); }
+.modal-shell[data-suite="E"] { --suite-color: var(--suite-E); }
+.modal-shell[data-suite="F"] { --suite-color: var(--suite-F); }
+.modal-shell[data-suite="G"] { --suite-color: var(--suite-G); }
+.modal-shell                  { --suite-color: var(--accent-2); }
+
+/* ── Backdrop ──────────────────────────────────────────────── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--bg) 35%, rgba(0, 0, 0, 0.55));
+  backdrop-filter: blur(2px);
+  z-index: 90;
+  display: none;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 4rem 1.25rem 2rem;
+  overflow-y: auto;
+}
+.modal-overlay.open {
+  display: flex;
+  animation: modal-fade 140ms ease;
+}
+@keyframes modal-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ── Shell ─────────────────────────────────────────────────── */
+.modal-shell {
+  width: 100%;
+  max-width: 760px;
+  max-height: 88vh;
+  background: var(--bg);
+  border: 1px solid var(--border-soft);
+  border-top: 3px solid var(--suite-color);
+  border-radius: var(--r-lg);
+  box-shadow:
+    0 24px 80px color-mix(in srgb, #000 28%, transparent),
+    0 2px 6px color-mix(in srgb, #000 18%, transparent);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: modal-rise 180ms cubic-bezier(0.2, 0.8, 0.3, 1.05);
+}
+@keyframes modal-rise {
+  from { transform: translateY(12px); opacity: 0.4; }
+  to   { transform: translateY(0);    opacity: 1;   }
+}
+
+/* ── Header ────────────────────────────────────────────────── */
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.1rem 1.4rem 0.85rem;
+  border-bottom: 1px solid var(--border-soft);
+}
+.modal-titles { min-width: 0; }
+.modal-title {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--fg-strong);
+  letter-spacing: -0.005em;
+  line-height: 1.2;
+}
+/* Small drill-in link under the chip name → /chip/<slug>.  Sits between
+   the title and the run-specific subtitle so the relationship between
+   "this run" and "this chip" reads as a natural hierarchy. */
+.modal-chip-link {
+  display: inline-block;
+  margin-top: 0.2rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--accent-2);
+  text-decoration: none;
+  border-bottom: 1px dashed color-mix(in srgb, var(--accent-2) 45%, transparent);
+}
+.modal-chip-link:hover {
+  color: color-mix(in srgb, var(--accent-2) 65%, var(--fg-strong));
+  border-bottom-color: var(--accent-2);
+}
+.modal-subtitle {
+  margin: 0.35rem 0 0;
+  font-size: 0.82rem;
+  color: var(--fg-muted);
+  line-height: 1.45;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 0.35rem;
+}
+.modal-subtitle .sep { color: var(--fg-faint); }
+.modal-subtitle .modal-warn { color: var(--warn, #d29922); font-size: 0.75rem; }
+.modal-suite-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.15rem 0.55rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--suite-color) 14%, transparent);
+  color: color-mix(in srgb, var(--suite-color) 75%, var(--fg-strong));
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  margin-right: 0.3rem;
+}
+
+.modal-close {
+  background: transparent;
+  border: 1px solid var(--border-soft);
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  font-size: 1.05rem;
+  color: var(--fg-faint);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  flex: 0 0 auto;
+  transition: background 100ms, color 100ms, border-color 100ms;
+}
+.modal-close:hover {
+  color: var(--fg-strong);
+  border-color: var(--border);
+  background: var(--bg-elev);
+}
+
+/* ── Tabs ──────────────────────────────────────────────────── */
+.modal-tabs {
+  display: flex;
+  gap: 0.4rem;
+  padding: 0.4rem 1rem 0;
+  border-bottom: 1px solid var(--border-soft);
+  background: var(--bg);
+}
+.modal-tab {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0.55rem 0.85rem 0.6rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--fg-muted);
+  cursor: pointer;
+  letter-spacing: 0.005em;
+  border-radius: 4px 4px 0 0;
+  transition: color 100ms, border-color 100ms, background 100ms;
+}
+.modal-tab:hover { color: var(--fg-strong); }
+.modal-tab.active {
+  color: var(--suite-color);
+  border-bottom-color: var(--suite-color);
+}
+
+/* ── Body / panels ─────────────────────────────────────────── */
+.modal-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 1.1rem 1.4rem 1.3rem;
+}
+.modal-panel { display: none; }
+.modal-panel.active { display: block; }
+
+/* ── Details / Impl shared sections ────────────────────────── */
+.detail-section { margin-bottom: 1.1rem; }
+.detail-section:last-child { margin-bottom: 0; }
+.detail-section-title {
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--fg-muted);
+  font-weight: 600;
+  margin-bottom: 0.45rem;
+  padding-bottom: 0.3rem;
+  border-bottom: 1px solid var(--border-soft);
+}
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+  padding: 0.35rem 0;
+  border-bottom: 1px dashed color-mix(in srgb, var(--border-soft) 70%, transparent);
+  font-size: 0.83rem;
+}
+.detail-row:last-child { border-bottom: none; }
+.detail-label {
+  color: var(--fg-muted);
+  font-size: 0.78rem;
+  flex: 0 0 auto;
+}
+.detail-value {
+  color: var(--fg-strong);
+  text-align: right;
+  word-break: break-word;
+}
+.detail-value.null  { color: var(--fg-faint); font-style: italic; }
+.detail-value.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
+.detail-value.good  { color: var(--good, #56d364); }
+.detail-value.warn  { color: var(--warn, #d29922); }
+.detail-value.bad   { color: var(--bad,  #f85149); }
+.detail-value .muted-note { color: var(--fg-faint); font-size: 0.78em; }
+.detail-link {
+  color: var(--accent-2);
+  font-size: 0.8rem;
+  text-decoration: none;
+}
+.detail-link:hover { text-decoration: underline; }
+.detail-link.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+/* ── Impl panel extras ─────────────────────────────────────── */
+.impl-deprecation {
+  background: color-mix(in srgb, var(--warn, #d29922) 12%, var(--bg-elev));
+  border: 1px solid color-mix(in srgb, var(--warn, #d29922) 40%, var(--border-soft));
+  color: var(--warn, #d29922);
+  border-radius: var(--r-md, 8px);
+  padding: 0.6rem 0.85rem;
+  font-size: 0.8rem;
+  margin-bottom: 1rem;
+}
+.impl-deprecation .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
+.impl-prose {
+  font-size: 0.83rem;
+  color: var(--fg);
+  line-height: 1.55;
+  white-space: pre-wrap;
+  padding: 0.45rem 0 0.65rem;
+}
+
+/* ── Footer ────────────────────────────────────────────────── */
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: 0.7rem 1.4rem;
+  border-top: 1px solid var(--border-soft);
+  background: var(--bg-elev);
+  font-size: 0.74rem;
+  color: var(--fg-faint);
+}
+.modal-submission {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 auto;
+}
+.modal-script-link {
+  color: var(--accent-2);
+  text-decoration: none;
+  font-size: 0.78rem;
+  font-weight: 500;
+  flex: 0 0 auto;
+}
+.modal-script-link:hover { text-decoration: underline; }
+
+/* ── Viz panel primitives ──────────────────────────────────── */
+.viz-empty {
+  padding: 2rem;
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 0.85rem;
+}
+.viz-section-title {
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--fg-muted);
+  font-weight: 600;
+  margin: 1.2rem 0 0.5rem;
+  padding-bottom: 0.3rem;
+  border-bottom: 1px solid var(--border-soft);
+}
+.viz-section-title:first-child { margin-top: 0.2rem; }
+.viz-chart-wrap {
+  position: relative;
+  width: 100%;
+  margin: 0.4rem 0 0.7rem;
+}
+.viz-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+  font-size: 0.72rem;
+  color: var(--fg-muted);
+  margin: 0.4rem 0 0.8rem;
+}
+.viz-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
+.viz-legend-swatch {
+  width: 12px;
+  height: 2px;
+  display: inline-block;
+  border-radius: 2px;
+}
+
+.viz-note {
+  margin: 0.4rem 0 0.8rem;
+  font-size: 0.72rem;
+  color: var(--fg-faint);
+}
+
+/* Stat chips — at-a-glance numeric callouts that head most viz sections. */
+.viz-stat-chips {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
+  gap: 0.4rem;
+  margin-bottom: 0.7rem;
+}
+.viz-stat-chip {
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-md, 8px);
+  padding: 0.45rem 0.6rem;
+}
+.viz-stat-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fg-muted);
+  margin-bottom: 0.15rem;
+}
+.viz-stat-value {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--fg-strong);
+  font-variant-numeric: tabular-nums;
+}
+.viz-stat-chip.accent .viz-stat-value { color: color-mix(in srgb, var(--suite-color) 70%, var(--fg-strong)); }
+.viz-stat-chip.good   .viz-stat-value { color: var(--good, #2da44e); }
+.viz-stat-chip.warn   .viz-stat-value { color: var(--warn, #d29922); }
+.viz-stat-chip.bad    .viz-stat-value { color: var(--bad,  #d1242f); }
+
+/* SLA inline row used by suite A/B/F/G online sections. */
+.viz-sla-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+  font-size: 0.74rem;
+  color: var(--fg-muted);
+  margin-bottom: 0.4rem;
+}
+.viz-sla-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+.viz-sla-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.viz-sla-dot.pass { background: var(--good, #56d364); }
+.viz-sla-dot.fail { background: var(--bad,  #f85149); }
+.viz-sla-item .qps { color: var(--fg); }
+.viz-sla-item .pass { color: var(--good, #56d364); }
+.viz-sla-item .fail { color: var(--bad,  #f85149); }
+
+/* Suite C quant table */
+.viz-quant-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.78rem;
+  margin: 0.4rem 0 0.7rem;
+}
+.viz-quant-table thead th {
+  text-align: left;
+  font-weight: 600;
+  color: var(--fg-muted);
+  border-bottom: 1px solid var(--border-soft);
+  padding: 0.4rem 0.55rem;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.viz-quant-table thead th:not(:first-child) { text-align: right; }
+.viz-quant-table tbody td {
+  padding: 0.4rem 0.55rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--border-soft) 60%, transparent);
+  color: var(--fg);
+}
+.viz-quant-table tbody td.tnum { text-align: right; font-variant-numeric: tabular-nums; }
+.viz-quant-table tbody tr:last-child td { border-bottom: none; }
+.viz-quant-table .good  { color: var(--good, #2da44e); }
+.viz-quant-table .warn  { color: var(--warn, #d29922); }
+.viz-quant-table .bad   { color: var(--bad,  #d1242f); }
+.viz-quant-table .muted { color: var(--fg-muted); }
+
+/* ── Small screens ─────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .modal-overlay { padding: 2rem 0.6rem; }
+  .modal-shell   { max-height: 92vh; }
+  .modal-header,
+  .modal-body,
+  .modal-footer { padding-left: 1rem; padding-right: 1rem; }
+  .modal-title  { font-size: 1.05rem; }
+}
diff --git a/leaderboard/site/assets/css/rankings.css b/leaderboard/site/assets/css/rankings.css
new file mode 100644
index 00000000..37edcafd
--- /dev/null
+++ b/leaderboard/site/assets/css/rankings.css
@@ -0,0 +1,1109 @@
+/* rankings.css — Rankings + Compare views.
+ *
+ * Shared primitives:
+ *   • .rk-suite-pill   — per-suite pill row, used as both the rankings
+ *                        suite filter and the compare suite switcher.
+ *   • .rk-facet-pill   — multi-select facet pills (vendor / precision /
+ *                        framework).
+ *   • .data-table      — sortable, scrollable data table with sticky-ish
+ *                        header (relative to the table container, not the
+ *                        viewport — the toolbar above is already sticky).
+ *
+ * Per-suite color tokens are bound via [data-suite="A"..G"] on the hero,
+ * table, and any pill that needs to render in suite color.
+ */
+
+/* ── Per-suite color binding ───────────────────────────────── */
+.rk-hero[data-suite="A"],        .data-table[data-suite="A"],   .rk-chip-focus[data-suite="A"] { --suite-color: var(--suite-A); }
+.rk-hero[data-suite="B"],        .data-table[data-suite="B"],   .rk-chip-focus[data-suite="B"] { --suite-color: var(--suite-B); }
+.rk-hero[data-suite="C"],        .data-table[data-suite="C"],   .rk-chip-focus[data-suite="C"] { --suite-color: var(--suite-C); }
+.rk-hero[data-suite="D"],        .data-table[data-suite="D"],   .rk-chip-focus[data-suite="D"] { --suite-color: var(--suite-D); }
+.rk-hero[data-suite="E"],        .data-table[data-suite="E"],   .rk-chip-focus[data-suite="E"] { --suite-color: var(--suite-E); }
+.rk-hero[data-suite="F"],        .data-table[data-suite="F"],   .rk-chip-focus[data-suite="F"] { --suite-color: var(--suite-F); }
+.rk-hero[data-suite="G"],        .data-table[data-suite="G"],   .rk-chip-focus[data-suite="G"] { --suite-color: var(--suite-G); }
+
+.rk-suite-pill[data-suite="suite_A"] { --suite-color: var(--suite-A); }
+.rk-suite-pill[data-suite="suite_B"] { --suite-color: var(--suite-B); }
+.rk-suite-pill[data-suite="suite_C"] { --suite-color: var(--suite-C); }
+.rk-suite-pill[data-suite="suite_D"] { --suite-color: var(--suite-D); }
+.rk-suite-pill[data-suite="suite_E"] { --suite-color: var(--suite-E); }
+.rk-suite-pill[data-suite="suite_F"] { --suite-color: var(--suite-F); }
+.rk-suite-pill[data-suite="suite_G"] { --suite-color: var(--suite-G); }
+
+.rk-hero, .data-table, .rk-suite-pill { --suite-color: var(--accent-2); }
+
+/* Vendor dots inside rankings / compare scopes inherit the global
+ * `--vendor-color` set on `[data-vendor="<name>"]` by data.js. */
+.rk-facet-pill .vendor-dot,
+.data-table .vendor-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--vendor-color, var(--fg-faint));
+  flex: 0 0 auto;
+}
+
+/* ── Hero (compact, suite-tinted) ──────────────────────────── */
+.rk-hero {
+  text-align: center;
+  padding: 2.25rem 1rem 1.5rem;
+  margin-bottom: 0.5rem;
+  position: relative;
+}
+.rk-hero::after {
+  content: "";
+  display: block;
+  width: 2.25rem;
+  height: 2px;
+  background: var(--suite-color);
+  margin: 1rem auto 0;
+  border-radius: 2px;
+  opacity: 0.85;
+}
+.rk-hero .eyebrow { justify-content: center; color: var(--suite-color); }
+/* Centered heroes don't need the leading rule that .eyebrow::before draws
+   for left-aligned section labels — it looks like a stray hyphen next to
+   the centered text. */
+.rk-hero .eyebrow::before { display: none; }
+.rk-hero-title {
+  margin: 0.55rem auto 0.4rem;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--fg-strong);
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+/* Aligns with .hero .hero-sub on Home / Suites so cross-page typography
+   stays consistent — same size, weight, and (strong) foreground. */
+.rk-hero-sub {
+  margin: 0 auto;
+  color: var(--fg-strong);
+  font-weight: 400;
+  font-size: 1.15rem;
+  line-height: 1.4;
+  letter-spacing: -0.005em;
+  max-width: 56ch;
+}
+
+/* ── Sticky toolbar ────────────────────────────────────────── */
+.rk-toolbar {
+  position: sticky;
+  top: 3.5rem;             /* clears topnav (~56–58 px) */
+  z-index: 20;
+  background: var(--bg);
+  padding: 0.85rem 0 0.65rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--border-soft);
+}
+@supports (backdrop-filter: blur(6px)) {
+  .rk-toolbar {
+    background: color-mix(in srgb, var(--bg) 92%, transparent);
+    backdrop-filter: saturate(160%) blur(8px);
+    -webkit-backdrop-filter: saturate(160%) blur(8px);
+  }
+}
+
+.rk-suite-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 0.7rem;
+}
+.rk-suite-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.32rem 0.85rem 0.32rem 0.4rem;
+  border-radius: 999px;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  color: var(--fg-muted);
+  font-size: 0.82rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+.rk-suite-pill .rk-suite-letter {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--suite-color) 18%, transparent);
+  color: var(--suite-color);
+  font-weight: 700;
+  font-size: 0.72rem;
+  letter-spacing: 0.01em;
+}
+.rk-suite-pill .rk-suite-name {
+  white-space: nowrap;
+}
+.rk-suite-pill:hover {
+  border-color: color-mix(in srgb, var(--suite-color) 55%, transparent);
+  color: var(--fg-strong);
+}
+.rk-suite-pill.active {
+  background: var(--suite-color);
+  border-color: var(--suite-color);
+  color: var(--on-accent);
+}
+.rk-suite-pill.active .rk-suite-letter {
+  background: rgba(255, 255, 255, 0.25);
+  color: var(--on-accent);
+}
+
+.rk-filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1.25rem;
+  margin-bottom: 0.55rem;
+}
+.rk-facet {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.rk-facet-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+.rk-facet-pills {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+.rk-facet-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.22rem 0.6rem;
+  border-radius: 999px;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  color: var(--fg-muted);
+  font-size: 0.76rem;
+  cursor: pointer;
+  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
+  text-decoration: none;
+}
+.rk-facet-pill:hover {
+  border-color: var(--accent);
+  color: var(--fg-strong);
+  text-decoration: none;
+}
+.rk-facet-pill.active {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--fg-strong);
+  font-weight: 600;
+}
+
+.rk-clear-all {
+  margin-left: auto;
+  background: transparent;
+  border: 1px solid var(--border-soft);
+  color: var(--fg-muted);
+  padding: 0.25rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: color 100ms, border-color 100ms;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+}
+.rk-clear-all:hover {
+  color: var(--fg-strong);
+  border-color: var(--accent);
+  text-decoration: none;
+}
+
+.rk-status {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.78rem;
+  color: var(--fg-muted);
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+}
+.rk-status strong { color: var(--fg-strong); font-weight: 600; }
+.rk-sort-arrow { color: var(--suite-color, var(--fg-strong)); font-weight: 700; }
+
+/* Hidden-columns toggle.  Visually paired with the sort-by line — same
+   font scale, same muted base colour — but readable as an action via
+   the chevron + accent-on-hover treatment.  Anchor (not button) so
+   middle/Cmd-click open the alternate ?cols= state in a new tab. */
+.rk-cols-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.18rem 0.55rem;
+  border-radius: 999px;
+  border: 1px solid var(--border-soft);
+  background: var(--bg-elev);
+  color: var(--fg-muted);
+  font-size: 0.74rem;
+  font-weight: 500;
+  text-decoration: none;
+  margin-left: auto;
+  white-space: nowrap;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+.rk-cols-toggle:hover {
+  border-color: var(--accent);
+  color: var(--fg-strong);
+  background: var(--bg-elev-2);
+  text-decoration: none;
+}
+.rk-cols-toggle-icon {
+  font-size: 0.85em;
+  line-height: 1;
+  display: inline-block;
+  color: var(--accent);
+}
+
+/* ── Compare basket banner ─────────────────────────────────── */
+.rk-basket-bar {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.6rem 0.9rem;
+  margin-bottom: 1rem;
+  background: color-mix(in srgb, var(--accent-2) 8%, var(--bg-elev));
+  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--border-soft));
+  border-radius: var(--r-md);
+  font-size: 0.85rem;
+  color: var(--fg-strong);
+}
+.rk-basket-bar.show { display: flex; }
+.rk-basket-bar strong { color: var(--accent-2); font-weight: 700; }
+.rk-basket-actions { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
+
+/* Chip focus banner: shown when rankings was deep-linked from a
+   chip-detail KPI card (`?chip=<slug>`).  Sits above the basket bar
+   so the "soft filter set externally" callout reads before any
+   in-progress compare state. */
+.rk-chip-focus {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 0.55rem 0.9rem;
+  margin-bottom: 0.75rem;
+  background: color-mix(in srgb, var(--suite-color, var(--accent-2)) 8%, var(--bg-elev));
+  border: 1px solid color-mix(in srgb, var(--suite-color, var(--accent-2)) 35%, var(--border-soft));
+  border-radius: var(--r-md);
+  font-size: 0.85rem;
+  color: var(--fg-strong);
+}
+.rk-chip-focus-msg strong {
+  color: var(--suite-color, var(--accent-2));
+  font-weight: 700;
+}
+.rk-chip-focus-variants {
+  color: var(--fg-muted);
+  font-size: 0.78rem;
+  margin-left: 0.15rem;
+}
+.rk-chip-focus-actions { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
+
+/* ── Data table ────────────────────────────────────────────── */
+.data-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  background: var(--bg-elev);
+  box-shadow: var(--shadow-card);
+}
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.86rem;
+}
+.data-table thead th {
+  background: var(--bg-elev);
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  font-weight: 600;
+  padding: 0.7rem 0.75rem 0.6rem;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 0.68rem;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+.data-table thead th.col-compare { width: 2.8rem; padding-right: 0; }
+.data-table thead th.col-rank    { width: 2.5rem; text-align: right; padding-right: 0.5rem; }
+.data-table thead th.col-vendor,
+.data-table thead th.col-precision,
+.data-table thead th.col-fw,
+.data-table thead th.col-tier,
+.data-table thead th.col-date { white-space: nowrap; }
+.data-table thead th.col-metric { text-align: right; }
+.data-table thead th.col-primary {
+  color: color-mix(in srgb, var(--suite-color) 70%, var(--fg-strong));
+}
+.data-table thead th.sortable { cursor: pointer; user-select: none; }
+.data-table thead th.sortable:hover { color: var(--fg-strong); }
+/* Sorted column tint: just enough to lead the eye, not a column wash.
+ * Header gets a hint of suite color; body cells stay neutral so the
+ * column doesn't visually compete with featured-row / in-basket rows. */
+.data-table thead th.is-sort {
+  color: var(--fg-strong);
+  background: color-mix(in srgb, var(--suite-color) 4%, var(--bg-elev));
+}
+.data-table thead th .th-unit {
+  display: block;
+  font-size: 0.6rem;
+  color: var(--fg-faint);
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  margin-top: 0.15rem;
+  text-transform: none;
+}
+.data-table thead th .th-sort-icon {
+  display: inline-block;
+  margin-left: 0.25rem;
+  color: var(--fg-faint);
+  font-size: 0.78rem;
+  vertical-align: -1px;
+}
+.data-table thead th.is-sort .th-sort-icon { color: var(--suite-color); }
+
+.data-table tbody tr {
+  border-bottom: 1px solid var(--border-soft);
+  cursor: pointer;
+  transition: background 100ms ease;
+}
+.data-table tbody tr:last-child { border-bottom: none; }
+.data-table tbody tr:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
+.data-table tbody tr.in-basket {
+  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
+}
+.data-table tbody tr.in-basket:hover {
+  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
+}
+
+.data-table td {
+  padding: 0.6rem 0.75rem;
+  vertical-align: middle;
+  color: var(--fg);
+}
+.data-table td.col-rank {
+  text-align: right;
+  font-weight: 700;
+  color: var(--fg-muted);
+  padding-right: 0.5rem;
+  width: 2.5rem;
+}
+/* The whole .col-compare cell is the hit-target for toggling a run
+ * into the compare basket — not the tiny checkbox.  This widens the
+ * forgiveness zone so the user doesn't have to land on the input
+ * pixel-perfectly and accidentally activate the row's chip-detail
+ * navigation instead. */
+.data-table td.col-compare {
+  width: 2.8rem;
+  padding-right: 0;
+  cursor: pointer;
+  position: relative;
+}
+.data-table td.col-compare:hover {
+  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
+}
+.data-table tbody tr.in-basket td.col-compare {
+  background: color-mix(in srgb, var(--accent-2) 16%, transparent);
+}
+.data-table .compare-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 1.6rem;
+  padding: 0.5rem 0.4rem;
+  cursor: pointer;
+}
+.data-table .compare-checkbox {
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+  accent-color: var(--accent-2);
+  pointer-events: none;
+}
+
+.data-table td.col-chip { min-width: 11rem; }
+/* The whole chip cell (name + memory meta) is a single link so users
+   don't accidentally hit the row's run-modal handler when aiming for
+   the memory affordance.  We render it as a block so the meta line
+   keeps its stacked layout below the name. */
+.data-table td.col-chip .rk-chip-link {
+  display: block;
+  color: var(--fg-strong);
+  text-decoration: none;
+}
+.data-table td.col-chip .rk-chip-name {
+  font-weight: 600;
+  color: var(--fg-strong);
+  transition: color 100ms ease;
+}
+.data-table td.col-chip .rk-chip-link:hover .rk-chip-name {
+  color: var(--suite-color);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+.data-table td.col-chip .rk-chip-meta {
+  display: block;
+  margin-top: 0.1rem;
+  font-size: 0.7rem;
+  color: var(--fg-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+.data-table td.col-vendor {
+  white-space: nowrap;
+  display: table-cell;
+}
+.data-table td.col-vendor .vendor-dot {
+  margin-right: 0.45rem;
+  vertical-align: 1px;
+}
+.data-table td.col-vendor .vendor-name { color: var(--fg); }
+
+.data-table td.col-fw .fw-ver {
+  color: var(--fg-faint);
+  font-size: 0.78rem;
+  margin-left: 0.15rem;
+}
+.data-table td.col-precision {
+  color: var(--fg-muted);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.data-table td.col-metric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.data-table td.col-metric .metric-empty { color: var(--fg-faint); }
+.data-table td.col-primary { color: var(--fg-strong); font-weight: 600; }
+.data-table td.col-primary .metric-val {
+  color: color-mix(in srgb, var(--suite-color) 60%, var(--fg-strong));
+  letter-spacing: -0.005em;
+}
+/* Body cells deliberately have no sort-column tint — only the header
+ * carries the cue.  A vertical band of color across every row was too
+ * loud and competed with the in-basket / featured row highlights. */
+.data-table td.col-metric.is-sort { background: transparent; }
+
+.data-table td.col-date {
+  color: var(--fg-muted);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  font-size: 0.8rem;
+}
+.data-table td.col-date.is-sort { background: transparent; }
+.data-table td.col-tier { white-space: nowrap; }
+
+/* Empty state */
+.rk-empty {
+  text-align: center;
+  padding: 3rem 1.5rem;
+  color: var(--fg-muted);
+  background: var(--bg-elev);
+  border: 1px dashed var(--border);
+  border-radius: var(--r-lg);
+}
+.rk-empty .rk-empty-icon {
+  display: block;
+  font-size: 2rem;
+  color: var(--fg-faint);
+  margin-bottom: 0.6rem;
+}
+.rk-empty p { margin: 0.3rem 0 1rem; }
+.rk-empty .rk-empty-sub {
+  font-size: 0.85rem;
+  color: var(--fg-faint);
+  margin-bottom: 0;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px; height: 1px;
+  margin: -1px; padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+/* ── Compare view ─────────────────────────────────────────── */
+.cmp-hero {
+  text-align: center;
+  padding: 2.25rem 1rem 1.25rem;
+  margin-bottom: 0.5rem;
+}
+.cmp-hero .eyebrow { justify-content: center; }
+/* Mirror .rk-hero: drop the leading rule so the centered eyebrow text
+   isn't preceded by a stray hyphen. */
+.cmp-hero .eyebrow::before { display: none; }
+.cmp-hero-title {
+  margin: 0.55rem auto 0.4rem;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--fg-strong);
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+/* Matches .hero .hero-sub on Home / Suites — same size, weight, color —
+   so the Compare landing reads like its siblings. */
+.cmp-hero-sub {
+  margin: 0 auto;
+  color: var(--fg-strong);
+  font-weight: 400;
+  font-size: 1.15rem;
+  line-height: 1.4;
+  letter-spacing: -0.005em;
+  max-width: 56ch;
+}
+
+/* Selected chips strip */
+.cmp-basket {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+  margin: 0.5rem 0 1.5rem;
+  padding: 0.85rem 1rem;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  align-items: center;
+}
+.cmp-basket-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+  margin-right: 0.4rem;
+}
+/* Stale-link variant: basket has entries but every run resolves to
+ * null.  We render the basket strip with just a count label (italic,
+ * muted) so it's obvious the chips themselves can't be shown.
+ */
+.cmp-basket--empty .cmp-basket-stale {
+  font-size: 0.85rem;
+  font-style: italic;
+  color: var(--fg-muted);
+  margin-right: auto;
+}
+.cmp-basket-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.4rem 0.5rem 0.4rem 0.7rem;
+  background: var(--bg);
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  color: var(--fg-strong);
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+.cmp-basket-name {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.05rem;
+  color: var(--fg-strong);
+  text-decoration: none;
+  line-height: 1.15;
+}
+.cmp-basket-name:hover .cmp-basket-chip-name {
+  color: var(--accent-2);
+}
+.cmp-basket-chip-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+}
+.cmp-basket-chip-meta {
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--fg-muted);
+  letter-spacing: 0.005em;
+}
+.cmp-basket-chip .vendor-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--vendor-color, var(--fg-faint));
+}
+/* `--vendor-color` set globally by data.js via `[data-vendor="<name>"]`. */
+
+.cmp-basket-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--fg-faint);
+  cursor: pointer;
+  font-size: 0.95rem;
+  line-height: 1;
+  padding: 0;
+}
+.cmp-basket-remove:hover {
+  background: color-mix(in srgb, var(--bad) 20%, transparent);
+  color: var(--bad);
+}
+
+.cmp-basket-actions {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+.cmp-basket-clear {
+  background: transparent;
+  border: 1px solid var(--border-soft);
+  color: var(--fg-muted);
+  padding: 0.25rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+.cmp-basket-clear:hover { color: var(--fg-strong); border-color: var(--accent); }
+
+/* Compare basket "Copy share link" pill — mirrors the clear pill's
+   silhouette so the two read as a paired actions group.  Success /
+   failure styling lives on the shared `.copy-btn` class (components.css)
+   so chip-detail and any future share button get the same flash chrome
+   for free. */
+.cmp-basket-share {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: transparent;
+  border: 1px solid var(--border-soft);
+  color: var(--fg-muted);
+  padding: 0.25rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+.cmp-basket-share:hover {
+  color: var(--fg-strong);
+  border-color: var(--accent);
+}
+
+/* Compare empty state */
+.cmp-empty {
+  text-align: center;
+  padding: 3rem 1.5rem;
+  color: var(--fg-muted);
+  background: var(--bg-elev);
+  border: 1px dashed var(--border);
+  border-radius: var(--r-lg);
+}
+.cmp-empty .state-icon {
+  display: block;
+  font-size: 1.8rem;
+  margin-bottom: 0.5rem;
+  color: var(--fg-faint);
+}
+.cmp-empty p { margin: 0.3rem 0 1rem; }
+
+/* Per-suite empty banner: shown when ALL chips in the basket have zero
+   data for the currently active suite — saves users from staring at a
+   table of dashes by surfacing which suites DO have data. */
+.cmp-suite-empty {
+  text-align: center;
+  padding: 2.5rem 1.5rem;
+  color: var(--fg-muted);
+  background: var(--bg-elev);
+  border: 1px dashed var(--border);
+  border-radius: var(--r-lg);
+}
+.cmp-suite-empty .state-icon {
+  display: block;
+  font-size: 1.8rem;
+  margin-bottom: 0.5rem;
+  color: var(--fg-faint);
+}
+.cmp-suite-empty p { margin: 0.3rem 0; }
+.cmp-suite-empty-sub {
+  font-size: 0.85rem;
+  color: var(--fg-faint);
+}
+.cmp-suite-empty-link {
+  color: var(--accent-2);
+  text-decoration: none;
+  font-weight: 600;
+}
+.cmp-suite-empty-link:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* Suite switcher reuses .rk-suite-pill; just align it. */
+.cmp-suite-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+.cmp-suite-row .rk-facet-label { margin-right: 0.4rem; }
+
+/* Metric comparison table */
+.cmp-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  background: var(--bg-elev);
+  box-shadow: var(--shadow-card);
+}
+.cmp-table {
+  --suite-color: var(--accent-2);
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.86rem;
+}
+.cmp-table[data-suite="A"] { --suite-color: var(--suite-A); }
+.cmp-table[data-suite="B"] { --suite-color: var(--suite-B); }
+.cmp-table[data-suite="C"] { --suite-color: var(--suite-C); }
+.cmp-table[data-suite="D"] { --suite-color: var(--suite-D); }
+.cmp-table[data-suite="E"] { --suite-color: var(--suite-E); }
+.cmp-table[data-suite="F"] { --suite-color: var(--suite-F); }
+.cmp-table[data-suite="G"] { --suite-color: var(--suite-G); }
+
+.cmp-table thead th {
+  background: var(--bg-elev);
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  font-weight: 600;
+  padding: 0.7rem 0.75rem 0.55rem;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 0.66rem;
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+.cmp-table thead th.cmp-chip-head {
+  text-transform: none;
+  letter-spacing: -0.005em;
+  font-size: 0.85rem;
+  color: var(--fg-strong);
+  padding-bottom: 0.5rem;
+}
+.cmp-table thead th.cmp-chip-head .cmp-chip-name {
+  display: block;
+  font-weight: 700;
+  color: var(--fg-strong);
+  text-decoration: none;
+  transition: color 100ms ease;
+}
+.cmp-table thead th.cmp-chip-head .cmp-chip-name:hover {
+  color: var(--accent-2);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+.cmp-table thead th.cmp-chip-head .cmp-chip-meta {
+  display: block;
+  font-size: 0.72rem;
+  color: var(--fg-muted);
+  font-weight: 500;
+  margin-top: 0.18rem;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.cmp-table thead th.cmp-chip-head .vendor-dot {
+  display: inline-block;
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  margin-right: 0.4rem;
+  vertical-align: 1px;
+  background: var(--vendor-color, var(--fg-faint));
+}
+/* `--vendor-color` set globally by data.js via `[data-vendor="<name>"]`. */
+
+.cmp-table tbody tr { border-bottom: 1px solid var(--border-soft); }
+.cmp-table tbody tr:last-child { border-bottom: none; }
+
+.cmp-table td {
+  padding: 0.75rem 0.75rem;
+  vertical-align: middle;
+  color: var(--fg);
+}
+.cmp-table td.cmp-metric-label {
+  font-size: 0.85rem;
+  color: var(--fg-strong);
+  font-weight: 600;
+  white-space: nowrap;
+  min-width: 11rem;
+}
+.cmp-table td.cmp-metric-label.is-primary {
+  color: color-mix(in srgb, var(--suite-color) 70%, var(--fg-strong));
+}
+.cmp-table td.cmp-metric-label .cmp-metric-unit {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--fg-muted);
+  font-weight: 500;
+  margin-top: 0.15rem;
+}
+.cmp-table td.cmp-metric-label .cmp-metric-dir {
+  display: inline-block;
+  margin-left: 0.5rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--fg-faint);
+}
+
+.cmp-table td.cmp-cell { position: relative; min-width: 9rem; }
+.cmp-bar {
+  position: relative;
+  height: 8px;
+  background: color-mix(in srgb, var(--fg) 6%, transparent);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 0.32rem;
+}
+.cmp-bar .cmp-bar-fill {
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--suite-color) 75%, var(--fg-strong)),
+    var(--suite-color));
+  border-radius: 4px;
+}
+.cmp-bar.is-winner .cmp-bar-fill {
+  background: linear-gradient(90deg,
+    var(--suite-color),
+    color-mix(in srgb, var(--suite-color) 75%, var(--good)));
+}
+.cmp-cell-value {
+  font-size: 0.94rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--fg-strong);
+}
+.cmp-cell-value .cmp-cell-unit {
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--fg-muted);
+  margin-left: 0.25rem;
+  letter-spacing: 0.02em;
+}
+.cmp-cell.is-winner .cmp-cell-value::after {
+  content: "★";
+  margin-left: 0.35rem;
+  color: var(--suite-color);
+  font-size: 0.8rem;
+}
+.cmp-cell.is-missing .cmp-cell-value {
+  color: var(--fg-faint);
+  font-weight: 400;
+}
+
+/* ── Compare head-to-head charts ─────────────────────────────── */
+.cmp-charts-wrap:not(:empty) {
+  max-width: var(--page-max, 1100px);
+  margin: 1.8rem auto 0;
+  padding: 0 1rem;
+}
+.cmp-charts-head {
+  margin-bottom: 1rem;
+}
+.cmp-charts-title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--fg-strong);
+  letter-spacing: -0.005em;
+}
+.cmp-charts-hint {
+  margin: 0.25rem 0 0;
+  font-size: 0.82rem;
+  color: var(--fg-muted);
+}
+.cmp-chart-card {
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  padding: 1rem 1.1rem 1.1rem;
+  margin-bottom: 1rem;
+}
+.cmp-chart-card-head { margin-bottom: 0.55rem; }
+.cmp-chart-card-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--fg-strong);
+  letter-spacing: 0.005em;
+}
+.cmp-chart-card-sub {
+  margin: 0.2rem 0 0;
+  font-size: 0.75rem;
+  color: var(--fg-muted);
+}
+.cmp-chart-canvas { width: 100%; position: relative; }
+.cmp-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  margin-top: 0.65rem;
+  font-size: 0.74rem;
+  color: var(--fg);
+}
+.cmp-chart-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
+.cmp-chart-legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  display: inline-block;
+  flex: 0 0 auto;
+}
+.cmp-chart-empty {
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--fg-faint);
+  font-size: 0.82rem;
+}
+.cmp-charts-missing {
+  font-size: 0.76rem;
+  color: var(--fg-faint);
+  margin: 0.45rem 0 0;
+  padding: 0.45rem 0.7rem;
+  border-left: 2px solid var(--border-soft);
+}
+.cmp-charts-missing strong {
+  color: var(--fg-muted);
+  font-weight: 600;
+}
+
+/* ── Compare chip cloud (quick-add affordance) ──────────────────
+ *
+ * Reuses .chip-cloud / .chip-tile from home.css; only the wrapping
+ * section, headline copy, and selected-chip styling live here.
+ * In the empty state (cmp-cloud without .is-compact) the block is the
+ * page's main content; in the populated state it sits below the table
+ * as a compact "add another chip" footer.
+ */
+.cmp-cloud {
+  max-width: var(--page-max, 1100px);
+  margin: 1.4rem auto 0;
+  padding: 1.4rem 1rem 1.5rem;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+}
+.cmp-cloud.is-compact {
+  background: transparent;
+  border: 1px dashed var(--border-soft);
+  margin-top: 2rem;
+  padding: 1rem 0.85rem 1.1rem;
+}
+.cmp-cloud-head {
+  text-align: center;
+  margin-bottom: 0.85rem;
+  padding: 0 0.5rem;
+}
+.cmp-cloud-title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--fg-strong);
+  letter-spacing: -0.005em;
+}
+.cmp-cloud.is-compact .cmp-cloud-title {
+  font-size: 0.92rem;
+  color: var(--fg-muted);
+  font-weight: 600;
+  letter-spacing: 0.005em;
+}
+.cmp-cloud-hint {
+  margin: 0.3rem 0 0;
+  font-size: 0.82rem;
+  color: var(--fg-muted);
+  line-height: 1.45;
+}
+.cmp-cloud.is-compact .cmp-cloud-hint {
+  font-size: 0.74rem;
+  color: var(--fg-faint);
+}
+
+/* "In-basket" affordance on cloud tiles — a filled pill in the chip's
+ * vendor color, with a checkmark prefixed to the name so the state is
+ * obvious without relying on color alone.  Clicking again removes
+ * every basket entry whose chip matches the tile name. */
+.chip-tile.in-basket {
+  background: color-mix(in srgb, var(--vendor-color) 38%, var(--bg-elev));
+  border-color: color-mix(in srgb, var(--vendor-color) 60%, var(--border));
+  color: var(--fg-strong);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--vendor-color) 30%, transparent);
+}
+.chip-tile.in-basket::before {
+  content: "✓";
+  display: inline-block;
+  margin-right: 0.35rem;
+  font-size: 0.8em;
+  color: color-mix(in srgb, var(--vendor-color) 75%, var(--fg-strong));
+  font-weight: 700;
+}
+.chip-tile.in-basket .chip-tile-count {
+  color: color-mix(in srgb, var(--vendor-color) 65%, var(--fg-strong));
+  font-weight: 600;
+}
+
+.cmp-hero-link {
+  color: var(--accent-2);
+  text-decoration: none;
+  border-bottom: 1px dashed color-mix(in srgb, var(--accent-2) 50%, transparent);
+}
+.cmp-hero-link:hover {
+  color: color-mix(in srgb, var(--accent-2) 70%, var(--fg-strong));
+  border-bottom-color: var(--accent-2);
+}
+
+/* ── Responsive ─────────────────────────────────────────────── */
+@media (max-width: 880px) {
+  .rk-hero-title, .cmp-hero-title { font-size: 1.6rem; }
+  .rk-toolbar { top: 3rem; }
+  .data-table, .cmp-table { font-size: 0.8rem; }
+  .data-table td, .data-table thead th { padding: 0.5rem 0.55rem; }
+  .data-table td.col-rank { width: 2rem; }
+}
+@media (max-width: 640px) {
+  .rk-hero, .cmp-hero { padding: 1.25rem 0.5rem 0.85rem; }
+  .rk-hero-title, .cmp-hero-title { font-size: 1.35rem; }
+  .rk-hero-sub, .cmp-hero-sub { font-size: 0.9rem; }
+  .rk-toolbar { top: 2.85rem; padding-top: 0.55rem; }
+  .rk-suite-pill { font-size: 0.76rem; padding: 0.28rem 0.6rem 0.28rem 0.3rem; }
+  .rk-suite-pill .rk-suite-letter { width: 18px; height: 18px; font-size: 0.66rem; }
+}
diff --git a/leaderboard/site/assets/css/suites.css b/leaderboard/site/assets/css/suites.css
new file mode 100644
index 00000000..24006fcc
--- /dev/null
+++ b/leaderboard/site/assets/css/suites.css
@@ -0,0 +1,886 @@
+/* suites.css — Suites explainer page.
+   Reuses shared tokens (--suite-A..G, --vendor-*) defined in base.css. */
+
+/* Per-suite color binding (mirrors the home selectors). */
+.suite-spec[data-suite="A"],
+.inversion-card[data-suite="A"],
+.scn-card .scn-suite-letter[data-suite="A"],
+.rfl-dot[data-suite="A"] { --suite-color: var(--suite-A); }
+.suite-spec[data-suite="B"],
+.inversion-card[data-suite="B"],
+.scn-card .scn-suite-letter[data-suite="B"],
+.rfl-dot[data-suite="B"] { --suite-color: var(--suite-B); }
+.suite-spec[data-suite="C"],
+.inversion-card[data-suite="C"],
+.scn-card .scn-suite-letter[data-suite="C"],
+.rfl-dot[data-suite="C"] { --suite-color: var(--suite-C); }
+.suite-spec[data-suite="D"],
+.inversion-card[data-suite="D"],
+.scn-card .scn-suite-letter[data-suite="D"],
+.rfl-dot[data-suite="D"] { --suite-color: var(--suite-D); }
+.suite-spec[data-suite="E"],
+.inversion-card[data-suite="E"],
+.scn-card .scn-suite-letter[data-suite="E"],
+.rfl-dot[data-suite="E"] { --suite-color: var(--suite-E); }
+.suite-spec[data-suite="F"],
+.inversion-card[data-suite="F"],
+.scn-card .scn-suite-letter[data-suite="F"],
+.rfl-dot[data-suite="F"] { --suite-color: var(--suite-F); }
+.suite-spec[data-suite="G"],
+.inversion-card[data-suite="G"],
+.scn-card .scn-suite-letter[data-suite="G"],
+.rfl-dot[data-suite="G"] { --suite-color: var(--suite-G); }
+.suite-spec,
+.inversion-card,
+.scn-card .scn-suite-letter,
+.rfl-dot { --suite-color: var(--accent-2); }
+
+/* ── Hero ──────────────────────────────────────────────── */
+.suites-hero {
+  padding: 3rem 1rem 2.25rem;
+  margin-bottom: 0.5rem;
+}
+.suites-hero h1 {
+  font-size: 3rem;
+  max-width: none;
+  line-height: 1.05;
+  margin-bottom: 1rem;
+}
+@media (max-width: 760px) {
+  .suites-hero h1 { font-size: 2.2rem; }
+}
+.suites-hero .hero-sub {
+  margin-bottom: 1.4rem;
+  white-space: nowrap;
+  max-width: none;
+}
+@media (max-width: 980px) {
+  .suites-hero .hero-sub { white-space: normal; max-width: 60ch; }
+}
+
+/* Section header overrides for suites page — stack title with a separate
+   lede paragraph below it instead of pushing a subtitle to the right
+   edge (which leaves an unsightly gap when titles are short). */
+.section-header--stacked {
+  display: block;
+}
+/* Lede paragraph: full page width, single column, comfortable for prose. */
+.section-lede {
+  max-width: none;
+  margin: 0.1rem 0 1.5rem;
+  font-size: 0.96rem;
+  line-height: 1.65;
+  color: var(--fg-muted);
+}
+.section-lede strong { color: var(--fg-strong); font-weight: 600; }
+.section-lede code {
+  font-family: var(--font-mono);
+  font-size: 0.88em;
+  background: var(--bg-elev-2);
+  padding: 0.05rem 0.35rem;
+  border-radius: 5px;
+  color: var(--fg);
+  border: 1px solid var(--border-soft);
+}
+
+/* ── 01 · Methodology / Why per-suite ───────────────────── */
+.why-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 360px);
+  gap: 1.5rem;
+  align-items: start;
+  margin-bottom: 2rem;
+}
+@media (max-width: 980px) {
+  .why-grid { grid-template-columns: 1fr; gap: 1.5rem; }
+}
+.why-prose {
+  max-width: none;
+}
+.why-prose p {
+  color: var(--fg);
+  font-size: 1.02rem;
+  line-height: 1.7;
+  margin: 0 0 1rem;
+}
+.why-prose p:last-child { margin-bottom: 0; }
+.why-prose strong { color: var(--fg-strong); font-weight: 600; }
+.why-prose em { color: var(--fg-strong); font-style: italic; }
+
+/* "Read the full argument" disclosure.  Default-open on desktop (set
+   imperatively at mount), default-closed on mobile so the page stays
+   short.  We strip the native triangle marker because it visually
+   collides with the eyebrow + h2 header above. */
+.why-prose-more { margin-top: 0; }
+.why-prose-more > summary {
+  cursor: pointer;
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.85rem;
+  margin: 0.25rem 0 0;
+  border-radius: 999px;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  color: var(--fg);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.2;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.why-prose-more > summary::-webkit-details-marker { display: none; }
+.why-prose-more > summary:hover {
+  background: var(--bg);
+  border-color: var(--border);
+}
+.why-prose-more > summary::after {
+  content: "▾";
+  display: inline-block;
+  font-size: 0.75rem;
+  color: var(--fg-muted);
+  transition: transform 120ms ease;
+}
+.why-prose-more[open] > summary::after { transform: rotate(180deg); }
+.why-prose-more .why-more-hide { display: none; }
+.why-prose-more[open] .why-more-show { display: none; }
+.why-prose-more[open] .why-more-hide { display: inline; }
+.why-prose-more > p { margin-top: 1rem; }
+.why-prose-more[open] > p:first-of-type { margin-top: 1rem; }
+
+/* ── Roofline mini-diagram (sidebar of the methodology section) ── */
+.roofline-diagram {
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-md);
+  padding: 0.85rem 0.95rem 0.95rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-self: stretch;
+}
+.roofline-eyebrow { color: var(--fg-muted); }
+.roofline-svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.rfl-axis {
+  stroke: var(--border);
+  stroke-width: 1;
+}
+.rfl-roof {
+  fill: none;
+  stroke: color-mix(in srgb, var(--accent-2) 50%, var(--fg-faint));
+  stroke-width: 1.6;
+  stroke-dasharray: 4 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.rfl-knee {
+  stroke: var(--border-soft);
+  stroke-width: 1;
+  stroke-dasharray: 2 3;
+}
+.rfl-region {
+  font-size: 8.5px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  fill: var(--fg-faint);
+}
+.rfl-region--bw { fill: color-mix(in srgb, var(--accent-2) 60%, var(--fg-muted)); }
+.rfl-region--cp { fill: color-mix(in srgb, var(--suite-D) 60%, var(--fg-muted)); }
+.rfl-knee-label {
+  font-size: 7.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  fill: var(--fg-faint);
+}
+.rfl-dot circle {
+  fill: var(--suite-color);
+  stroke: var(--bg-elev);
+  stroke-width: 1.6;
+}
+.rfl-letter {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  fill: var(--fg-strong);
+}
+.rfl-axis-label {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  fill: var(--fg-muted);
+  text-transform: uppercase;
+}
+.roofline-caption {
+  margin: 0;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: var(--fg-muted);
+}
+
+/* Inversion cards row — the "evidence" */
+.inversion-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.1rem;
+  margin-top: 0.5rem;
+}
+.inversion-card {
+  position: relative;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  padding: 1.2rem 1.25rem 1.3rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+.inversion-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 3px;
+  background: var(--suite-color);
+}
+.inversion-card h3 {
+  margin: 0;
+  font-size: 1.08rem;
+  font-weight: 700;
+  color: var(--fg-strong);
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+.inversion-card p {
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--fg-muted);
+}
+@media (max-width: 980px) {
+  .inversion-grid { grid-template-columns: 1fr; }
+}
+
+/* ── 02 · Scenarios catalog ─────────────────────────────── */
+.scn-catalog {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.05rem;
+}
+@media (max-width: 1080px) {
+  .scn-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .scn-catalog { grid-template-columns: 1fr; }
+}
+
+.scn-card {
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-md);
+  padding: 1.1rem 1.2rem 1.15rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+.scn-card-head {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+}
+.scn-icon {
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--accent-2) 9%, var(--bg-elev-2));
+  color: color-mix(in srgb, var(--accent-2) 75%, var(--fg-strong));
+  border: 1px solid color-mix(in srgb, var(--accent-2) 18%, var(--border-soft));
+}
+.scn-icon svg { width: 24px; height: 24px; }
+.scn-card-id {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+/* Scenario name is the card title — promoted from a small pill to a
+   proper headline so each card has a clear focal point. */
+.scn-card-name {
+  margin: 0;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 1.18rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  color: var(--fg-strong);
+  line-height: 1.1;
+}
+.scn-card-role {
+  font-size: 0.66rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--fg-muted);
+}
+.scn-card-desc {
+  margin: 0;
+  font-size: 0.92rem;
+  line-height: 1.6;
+  color: var(--fg);
+  /* Let the description absorb extra height so the spec block lands at
+     the same vertical position across every card in a row. */
+  flex: 1 0 auto;
+}
+
+/* Mini-spec rows (Metric / Direction / Setting / ...) */
+.scn-card-spec {
+  margin: 0;
+  padding: 0.75rem 0.9rem;
+  background: var(--bg-elev-2);
+  border-radius: var(--r-sm, 8px);
+  border: 1px solid var(--border-soft);
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.scn-spec-row {
+  display: grid;
+  grid-template-columns: minmax(90px, 32%) minmax(0, 1fr);
+  gap: 0.7rem;
+  align-items: baseline;
+}
+.scn-spec-row dt {
+  font-size: 0.66rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  color: var(--fg-muted);
+}
+.scn-spec-row dd {
+  margin: 0;
+  font-size: 0.86rem;
+  line-height: 1.4;
+  color: var(--fg-strong);
+  font-weight: 500;
+}
+
+.scn-card-applies {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin-top: 0.05rem;
+  flex-wrap: wrap;
+}
+.scn-applies-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--fg-muted);
+}
+.scn-applies-letters {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+}
+.scn-applies-sep {
+  color: var(--fg-faint);
+  font-weight: 500;
+  margin: 0 0.05rem;
+}
+.scn-applies-note {
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  color: var(--fg-faint);
+}
+.scn-suite-letter {
+  --letter-bg: color-mix(in srgb, var(--suite-color) 18%, transparent);
+  --letter-border: color-mix(in srgb, var(--suite-color) 35%, transparent);
+  --letter-fg: color-mix(in srgb, var(--suite-color) 75%, var(--fg-strong));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: var(--letter-bg);
+  border: 1px solid var(--letter-border);
+  color: var(--letter-fg);
+  font-size: 0.78rem;
+  font-weight: 700;
+  font-feature-settings: "tnum" on;
+  text-decoration: none;
+  letter-spacing: -0.02em;
+  transition: transform 80ms ease, background 120ms ease;
+}
+.scn-suite-letter:hover {
+  background: color-mix(in srgb, var(--suite-color) 30%, transparent);
+  transform: translateY(-1px);
+  text-decoration: none;
+}
+.scn-suite-letter--extra {
+  --letter-bg: transparent;
+  --letter-border: color-mix(in srgb, var(--suite-color) 40%, transparent);
+  --letter-fg: color-mix(in srgb, var(--suite-color) 65%, var(--fg-muted));
+  border-style: dashed;
+}
+
+/* ── 03 · Suite specifications ─────────────────────────── */
+.suite-spec-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+.suite-spec {
+  position: relative;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+  /* Clear the sticky top nav (~58 px) plus a little breathing room so
+     anchor jumps from the scenarios catalog don't tuck the suite card's
+     top edge underneath the nav bar. */
+  scroll-margin-top: 4.75rem;
+}
+.suite-spec::before {
+  content: "";
+  position: absolute;
+  top: 0; bottom: 0; left: 0;
+  width: 4px;
+  background: var(--suite-color);
+}
+
+/* Brief flash when scrolling to a suite via a "Used by" letter chip. */
+@keyframes suite-spec-flash {
+  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--suite-color) 55%, transparent); }
+  60%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--suite-color) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--suite-color) 0%, transparent); }
+}
+.suite-spec--flash {
+  animation: suite-spec-flash 1.2s ease-out 1;
+}
+
+.suite-spec-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 1.4rem 1.5rem 1.2rem;
+  border-bottom: 1px solid var(--border-soft);
+  background: color-mix(in srgb, var(--suite-color) 5%, transparent);
+}
+.suite-spec-letter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background: var(--suite-color);
+  color: var(--on-accent, #fff);
+  font-size: 1.7rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  flex: 0 0 auto;
+}
+.suite-spec-title { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
+.suite-spec-title .eyebrow { color: color-mix(in srgb, var(--suite-color) 70%, var(--fg-muted)); }
+.suite-spec-title .eyebrow::before { background: var(--suite-color); }
+.suite-spec-title h3 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--fg-strong);
+  line-height: 1.15;
+}
+.suite-spec-tagline {
+  margin: 0.1rem 0 0;
+  color: var(--fg-muted);
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+.suite-spec-metric {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.15rem;
+  flex: 0 0 auto;
+}
+.suite-spec-metric .metric-label {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: color-mix(in srgb, var(--suite-color) 80%, var(--fg-strong));
+}
+.suite-spec-metric .metric-direction {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--fg-muted);
+  font-weight: 600;
+}
+
+@media (max-width: 720px) {
+  .suite-spec-head {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto auto;
+  }
+  .suite-spec-metric {
+    grid-column: 1 / -1;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 0.6rem;
+  }
+  .suite-spec-letter { width: 44px; height: 44px; font-size: 1.4rem; }
+  .suite-spec-title h3 { font-size: 1.25rem; }
+}
+
+.suite-spec-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1.15rem;
+  padding: 1.3rem 1.5rem 1.5rem;
+}
+
+/* Per-suite intro paragraph — sits in the left column of the suite-intro-row
+   alongside the Current Leaders sidebar.  No max-width so it fills the
+   available column comfortably. */
+.suite-spec-intro {
+  margin: 0;
+  font-size: 0.98rem;
+  line-height: 1.7;
+  color: var(--fg);
+}
+
+/* ── Horizontal spec strip ─────────────────────────────── */
+.spec-strip {
+  list-style: none;
+  margin: 0;
+  padding: 0.95rem 1.1rem;
+  background: var(--bg-elev-2);
+  border-radius: var(--r-md);
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0.95rem 1.25rem;
+  border: 1px solid var(--border-soft);
+}
+@media (max-width: 980px) {
+  .spec-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 560px) {
+  .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+.spec-strip li {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+.spec-strip .strip-v { overflow-wrap: anywhere; }
+.spec-strip .strip-v code {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  background: var(--bg-elev);
+  padding: 0.08rem 0.4rem;
+  border-radius: 6px;
+  color: var(--fg);
+  border: 1px solid var(--border-soft);
+  word-break: keep-all;
+  white-space: nowrap;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.spec-strip .strip-k {
+  font-size: 0.66rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--fg-muted);
+}
+.spec-strip .strip-v {
+  font-size: 0.92rem;
+  font-weight: 500;
+  color: var(--fg-strong);
+  line-height: 1.3;
+}
+
+/* ── Suite scenarios (compact pills row) ───────────────── */
+.suite-scns {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  flex-wrap: wrap;
+}
+.suite-scns-label,
+.suite-leaders-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--fg-muted);
+  flex: 0 0 auto;
+}
+.suite-scns-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+/* Scenario pills — shared between catalog and per-suite contexts. */
+.scn-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 0.22rem 0.6rem;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.scn-default {
+  background: color-mix(in srgb, var(--suite-color) 16%, transparent);
+  color: color-mix(in srgb, var(--suite-color) 75%, var(--fg-strong));
+  border: 1px solid color-mix(in srgb, var(--suite-color) 28%, transparent);
+}
+.scn-extra {
+  background: var(--bg-elev-2);
+  color: var(--fg-muted);
+  border: 1px dashed var(--border);
+}
+.scn-extra-tag {
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-faint);
+}
+/* ── Suite intro row: description (left) + concrete finding (right) ─── */
+.suite-intro-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) clamp(280px, 36%, 400px);
+  gap: 1.5rem;
+  align-items: stretch;
+}
+@media (max-width: 880px) {
+  .suite-intro-row { grid-template-columns: 1fr; gap: 1.1rem; }
+}
+
+/* ── Current leaders — horizontal mini-card grid ───────── */
+.suite-leaders {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+.suite-leaders-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--fg-muted);
+}
+.leader-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  /* Flex with capped card width so a lone leader keeps a sensible size
+     instead of stretching to full row width, and a full row of four
+     leaders still divides the space evenly. */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+}
+.leader-row {
+  flex: 1 1 220px;
+  min-width: 220px;
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.7rem 0.85rem 0.75rem;
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-md);
+  border-top: 3px solid color-mix(in srgb, var(--suite-color) 38%, var(--border-soft));
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.leader-row:hover {
+  border-top-color: var(--suite-color);
+  background: color-mix(in srgb, var(--suite-color) 4%, var(--bg-elev-2));
+}
+.leader-row .scn-pill {
+  align-self: flex-start;
+  font-size: 0.7rem;
+  padding: 0.12rem 0.55rem;
+}
+.leader-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  text-decoration: none;
+  min-width: 0;
+  margin-top: 0.05rem;
+}
+.leader-chip:hover { text-decoration: none; }
+.leader-chip:hover .leader-chip-name { color: var(--accent-2); }
+.leader-chip-name {
+  font-weight: 600;
+  color: var(--fg-strong);
+  font-size: 0.9rem;
+  line-height: 1.25;
+  transition: color 120ms ease;
+  /* Long chip names wrap to a second line inside their mini-card. */
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.leader-vendor {
+  --vendor-color: var(--fg-faint);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--vendor-color);
+  flex: 0 0 auto;
+}
+/* `--vendor-color` set globally by data.js via `[data-vendor="<name>"]`. */
+.leader-val {
+  color: color-mix(in srgb, var(--suite-color) 80%, var(--fg-strong));
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: -0.005em;
+  margin-top: 0.15rem;
+}
+.leader-empty {
+  color: var(--fg-faint);
+  font-style: italic;
+  font-size: 0.82rem;
+  margin-top: 0.15rem;
+}
+
+/* ── Concrete finding card ───────────────────────────────── */
+.suite-finding {
+  padding: 1rem 1.1rem 1.05rem;
+  background: color-mix(in srgb, var(--suite-color) 6%, var(--bg-elev-2));
+  border-radius: var(--r-md);
+  border: 1px solid color-mix(in srgb, var(--suite-color) 18%, transparent);
+}
+/* Side variant — sits alongside the description paragraph in the
+   suite-intro-row.  Stretches to match the description's height for
+   a clean two-column block. */
+.suite-finding--side {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.suite-finding--side .finding-body {
+  font-size: 0.88rem;
+}
+.finding-eyebrow {
+  display: inline-block;
+  font-size: 0.66rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 600;
+  color: color-mix(in srgb, var(--suite-color) 70%, var(--fg-muted));
+  margin-bottom: 0.4rem;
+}
+.finding-headline {
+  margin: 0 0 0.4rem;
+  font-size: 1.02rem;
+  font-weight: 700;
+  color: var(--fg-strong);
+  line-height: 1.3;
+  letter-spacing: -0.005em;
+}
+.finding-body {
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--fg-muted);
+}
+
+/* ── CTAs ─────────────────────────────────────────────────── */
+.suite-spec-cta {
+  margin-top: 0.25rem;
+  padding-top: 1.1rem;
+  border-top: 1px solid var(--border-soft);
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+/* ── 04 · Datasets table ───────────────────────────────── */
+.dataset-table {
+  display: grid;
+  grid-template-columns: 1fr;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+}
+.dataset-row {
+  display: grid;
+  grid-template-columns:
+    minmax(180px, 1.4fr)
+    minmax(120px, 1fr)
+    minmax(70px, 0.6fr)
+    minmax(110px, 0.9fr)
+    minmax(110px, 0.9fr)
+    minmax(220px, 2fr);
+  gap: 1rem;
+  align-items: baseline;
+  padding: 0.85rem 1.1rem;
+  border-bottom: 1px solid var(--border-soft);
+  font-size: 0.92rem;
+}
+.dataset-row:last-child { border-bottom: none; }
+.dataset-row--head {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  color: var(--fg-muted);
+  background: var(--bg-elev-2);
+}
+.dataset-row .dt-name code {
+  font-family: var(--font-mono);
+  font-size: 0.86rem;
+  background: var(--bg-elev-2);
+  padding: 0.1rem 0.45rem;
+  border-radius: 6px;
+  color: var(--fg-strong);
+}
+.dataset-row .dt-notes {
+  color: var(--fg-muted);
+  font-size: 0.86rem;
+  line-height: 1.45;
+}
+
+@media (max-width: 880px) {
+  .dataset-row {
+    grid-template-columns: 1fr 1fr;
+    row-gap: 0.35rem;
+  }
+  .dataset-row--head { display: none; }
+  .dataset-row .dt-name { grid-column: 1 / -1; font-weight: 600; }
+  .dataset-row .dt-notes { grid-column: 1 / -1; }
+}
diff --git a/leaderboard/site/assets/js/data.js b/leaderboard/site/assets/js/data.js
new file mode 100644
index 00000000..470af671
--- /dev/null
+++ b/leaderboard/site/assets/js/data.js
@@ -0,0 +1,1010 @@
+// data.js — single source of truth for leaderboard rows.
+//
+// The legacy generator emits leaderboard.js which sets `window.LEADERBOARD_DATA`
+// as a side-effect when included via <script>. We import it through that route
+// to keep the generator output unchanged (zero-build pipeline).
+//
+// All views consume LeaderboardData from this module.  Do not access
+// window.LEADERBOARD_DATA directly anywhere else.
+
+import { groupBy, chipSlug, toTitleCase } from "./utils.js";
+
+// Each suite has a "primary metric" most relevant to a buyer's question.
+// This drives default sort on the rankings page and the top-3 podium on home.
+//
+// `primary.scale` multiplies raw value at display (e.g. 0.945 → 94.5 %).
+// `primary.decimals` overrides automatic decimal selection.
+// Suite workload constants — fixed per suite definition (suites/README.md).
+// `inputTokens` / `outputTokens` are the dataset p50s used at benchmark
+// time and are NOT derived from data files; they're part of the suite
+// contract and only change with a suite revision.
+export const SUITE_META = {
+  suite_A: {
+    letter: "A",
+    title: "Single-chip throughput",
+    tagline: "How fast can one accelerator serve an 8B model?",
+    description:
+      "The canonical bandwidth-bound regime. 8B Llama on a single accelerator is small enough to fit comfortably in HBM, large enough that decode is memory-bandwidth-bound rather than compute-bound. This is the bread-and-butter serving workload that anchors most other LLM benchmarks, and the suite where vendor marketing numbers usually land.",
+    primary: { key: "offline_throughput",     label: "tokens/sec",      direction: "desc", unit: "tokens/sec" },
+    workload: {
+      model: "meta-llama/Meta-Llama-3-8B-Instruct",
+      chips: "1",
+      precision: "BF16",
+      dataset: "sharegpt_standard_v1",
+      inputTokens: "~280",
+      outputTokens: "~310",
+    },
+    scenarios: [
+      { name: "accuracy",    isExtra: false,
+        desc: "MMLU subset score against the baseline. Gate for a valid submission." },
+      { name: "offline",     isExtra: false,
+        desc: "Max throughput with all requests batched at once.",
+        metric: { key: "offline_throughput", label: "tokens/sec", direction: "desc", unit: "tokens/sec" } },
+      { name: "online",      isExtra: false,
+        desc: "Highest QPS that meets the 500 ms p99 TTFT SLA under Poisson arrivals.",
+        metric: { key: "online_max_qps", label: "queries/sec", direction: "desc", unit: "queries/sec" } },
+      { name: "interactive", isExtra: true,
+        desc: "Single-stream first-token latency. No concurrency.",
+        metric: { key: "interactive_ttft_p99", label: "TTFT p99", direction: "asc", unit: "ms", decimals: 0 } },
+      { name: "sustained",   isExtra: true,
+        desc: "30 min fixed-concurrency load. Reports throughput stability and throttle ratio.",
+        metric: { key: "sustained_throughput", label: "sustained throughput", direction: "desc", unit: "tokens/sec" } },
+      { name: "speculative", isExtra: true,
+        desc: "Offline workload with a 1B draft model loaded. Reports acceptance rate." },
+      { name: "burst",       isExtra: true,
+        desc: "TTFT p99 during 5x burst windows versus steady. KV pressure test." },
+    ],
+  },
+  suite_B: {
+    letter: "B",
+    title: "Multi-chip throughput",
+    tagline: "Large-model serving across multiple chips.",
+    description:
+      "70B Llama distributed across multiple accelerators. Two effects compound: the model itself no longer fits on one chip (capacity-bound) and tensor-parallel inference shards KV cache, activations, and all-reduce traffic over the interconnect. Both the framework's TP path and the chip's NVLink / Infinity Fabric / scale-out fabric come under test here.",
+    primary: { key: "offline_throughput",     label: "tokens/sec",      direction: "desc", unit: "tokens/sec" },
+    workload: {
+      model: "meta-llama/Meta-Llama-3-70B-Instruct",
+      chips: "flexible (typ. 4 / 8)",
+      precision: "BF16",
+      dataset: "sharegpt_standard_v1",
+      inputTokens: "~280",
+      outputTokens: "~310",
+    },
+    scenarios: [
+      { name: "accuracy",    isExtra: false,
+        desc: "MMLU subset score against the 70B baseline." },
+      { name: "offline",     isExtra: false,
+        desc: "Aggregate throughput across N chips serving the 70B model.",
+        metric: { key: "offline_throughput", label: "tokens/sec", direction: "desc", unit: "tokens/sec" } },
+      { name: "online",      isExtra: false,
+        desc: "Highest QPS that meets the 500 ms p99 TTFT SLA at 70B scale.",
+        metric: { key: "online_max_qps", label: "queries/sec", direction: "desc", unit: "queries/sec" } },
+      { name: "interactive", isExtra: true,
+        desc: "Single-stream TTFT at 70B. Decode-bound." },
+      { name: "sustained",   isExtra: true,
+        desc: "30 min fixed load; concurrency 4 (70B leaves less KV headroom than 8B).",
+        metric: { key: "sustained_throughput", label: "sustained throughput", direction: "desc", unit: "tokens/sec" } },
+      { name: "burst",       isExtra: true,
+        desc: "Burst vs steady TTFT p99 at 70B scale." },
+    ],
+  },
+  suite_C: {
+    letter: "C",
+    title: "Quantization efficiency",
+    tagline: "Quality-adjusted throughput across precision formats.",
+    description:
+      "The bandwidth-to-compute transition. The same 8B model is run at five precision formats (BF16, FP8, W8A8, W8A16, W4A16); quality efficiency multiplies throughput speedup by the accuracy drop so a chip can't trade quality for speed silently. Reveals which chips have working low-precision tensor cores and which fall back to BF16 on the same instruction.",
+    primary: { key: "quant_quality_eff",      label: "quality efficiency", direction: "desc", unit: "" },
+    workload: {
+      model: "meta-llama/Llama-3.1-8B-Instruct",
+      chips: "1",
+      precision: "BF16, FP8, W8A8, W8A16, W4A16",
+      dataset: "sharegpt_standard_v1",
+      inputTokens: "~280",
+      outputTokens: "~310",
+    },
+    scenarios: [
+      { name: "accuracy",          isExtra: false,
+        desc: "Per-format accuracy gate (each format has its own threshold)." },
+      { name: "offline (×5 formats)", isExtra: false,
+        desc: "Offline throughput at each precision. Quality efficiency = throughput × accuracy.",
+        metric: { key: "quant_quality_eff", label: "quality efficiency", direction: "desc", unit: "" } },
+      { name: "online",            isExtra: true,
+        desc: "Online QPS sweep per format. Extra: 5 formats × QPS levels is expensive." },
+      { name: "sustained",         isExtra: true,
+        desc: "15 min sustained load per format." },
+    ],
+  },
+  suite_D: {
+    letter: "D",
+    title: "Long-context inference",
+    tagline: "28K-token prefill, compute-bound regime.",
+    description:
+      "Compute-bound prefill. ~28K-token prompts push arithmetic intensity past the roofline knee, so chips with more raw FLOPS pull ahead of bandwidth-rich ones. The output cap (256 tokens) keeps decode short on purpose; this suite isolates the prefill side and is where Suite A's bandwidth-bound rankings begin to invert.",
+    primary: { key: "offline_throughput",     label: "tokens/sec",      direction: "desc", unit: "tokens/sec" },
+    workload: {
+      model: "meta-llama/Llama-3.1-8B-Instruct",
+      chips: "1",
+      precision: "BF16; max_model_len 30,208",
+      dataset: "sharegpt_longctx_v1",
+      inputTokens: "~28K",
+      outputTokens: "≤256",
+    },
+    scenarios: [
+      { name: "accuracy",    isExtra: false,
+        desc: "MMLU gate against the 8B Llama-3.1 baseline." },
+      { name: "offline",     isExtra: false,
+        desc: "Offline throughput at ~28K input tokens. Prefill-bound, tests raw FLOPS.",
+        metric: { key: "offline_throughput", label: "tokens/sec", direction: "desc", unit: "tokens/sec" } },
+      { name: "interactive", isExtra: true,
+        desc: "Long-context TTFT (~11 s per request at 28K). p90 is primary." },
+      { name: "online",      isExtra: true,
+        desc: "Sub-QPS levels (0.5 / 1 / 2). Rate-bound at long context." },
+      { name: "sustained",   isExtra: true,
+        desc: "30 min sustained at concurrency 8. Throttle ratio is the headline." },
+      { name: "speculative", isExtra: true,
+        desc: "Long-context offline with 1B draft model. Prefill-bound speculative." },
+    ],
+  },
+  suite_E: {
+    letter: "E",
+    title: "Multi-chip scaling efficiency",
+    tagline: "How well does 8B throughput scale to 2 / 4 / 8 chips?",
+    description:
+      "The Amdahl penalty in numbers. The same 8B model runs at 1×, 2×, and (optionally) 4× / 8× chip counts; the headline metric is 2× scaling efficiency = T_2× / (2 · T_1×). Reveals NVLink / Infinity Fabric / PCIe ceilings, and exposes flagships whose per-chip throughput grew faster than the interconnect did.",
+    primary: { key: "scaling_efficiency_2x",  label: "2× scaling efficiency", direction: "desc", unit: "%", scale: 100, decimals: 1 },
+    workload: {
+      model: "meta-llama/Meta-Llama-3-8B-Instruct",
+      chips: "1× / 2× required; 4× / 8× optional",
+      precision: "BF16",
+      dataset: "sharegpt_standard_v1",
+      inputTokens: "~280",
+      outputTokens: "~310",
+    },
+    scenarios: [
+      { name: "offline (1× / 2×)", isExtra: false,
+        desc: "Two-chip scaling efficiency vs single chip. Required for a valid submission.",
+        metric: { key: "scaling_efficiency_2x", label: "2× scaling efficiency", direction: "desc", unit: "%", scale: 100, decimals: 1 } },
+      { name: "offline (4×)",      isExtra: false,
+        desc: "Four-chip scaling efficiency. Optional but commonly reported.",
+        metric: { key: "scaling_efficiency_4x", label: "4× scaling efficiency", direction: "desc", unit: "%", scale: 100, decimals: 1 } },
+      { name: "offline (8×)",      isExtra: false,
+        desc: "Eight-chip scaling. Communication overhead is the binding constraint here." },
+    ],
+  },
+  suite_F: {
+    letter: "F",
+    title: "Edge / consumer hardware",
+    tagline: "Small models on single-GPU edge hardware.",
+    description:
+      "The pure-bandwidth lower bound. Qwen2.5-0.5B with ~95-token prompts strips away residual compute interference and short-circuits prefill, exposing raw HBM headroom and software overhead. Commodity GPUs (RTX 4090, A6000) tend to be most competitive per dollar here, and the suite doubles as a regression check for low-VRAM deployments.",
+    primary: { key: "offline_throughput",     label: "tokens/sec",      direction: "desc", unit: "tokens/sec" },
+    workload: {
+      model: "Qwen/Qwen2.5-0.5B-Instruct",
+      chips: "1 (≥4 GB VRAM)",
+      precision: "BF16",
+      dataset: "sharegpt_edge_v1",
+      inputTokens: "~95",
+      outputTokens: "~150",
+    },
+    scenarios: [
+      { name: "accuracy",    isExtra: false,
+        desc: "MMLU gate against the 0.5B baseline." },
+      { name: "offline",     isExtra: false,
+        desc: "Offline throughput on the edge dataset (~95 tok prompts).",
+        metric: { key: "offline_throughput", label: "tokens/sec", direction: "desc", unit: "tokens/sec" } },
+      { name: "online",      isExtra: false,
+        desc: "Max QPS at the standard 500 ms p99 TTFT SLA.",
+        metric: { key: "online_max_qps", label: "queries/sec", direction: "desc", unit: "queries/sec" } },
+      { name: "interactive", isExtra: false,
+        desc: "Single-stream TTFT on consumer hardware.",
+        metric: { key: "interactive_ttft_p99", label: "TTFT p99", direction: "asc", unit: "ms", decimals: 0 } },
+      { name: "sustained",   isExtra: true,
+        desc: "15 min sustained load (shorter than datacenter suites)." },
+    ],
+  },
+  suite_G: {
+    letter: "G",
+    title: "Mixture-of-Experts (MoE)",
+    tagline: "Sparse routing; bandwidth-bound multi-chip serving.",
+    description:
+      "Sparse activation. Mixtral 8×7B activates only 2 of 8 experts per token, which keeps arithmetic intensity below dense 8B inference even at multi-chip scale. Chips with high aggregate HBM bandwidth (HBM3e generation) pay off here; pure-FLOPS advantages from compute-bound suites don't translate.",
+    primary: { key: "sustained_throughput",   label: "tokens/sec",      direction: "desc", unit: "tokens/sec" },
+    workload: {
+      model: "mistralai/Mixtral-8x7B-Instruct-v0.1",
+      chips: "≥2 (auto)",
+      precision: "BF16",
+      dataset: "sharegpt_standard_v1",
+      inputTokens: "~280",
+      outputTokens: "~310",
+    },
+    scenarios: [
+      { name: "accuracy",    isExtra: false,
+        desc: "MMLU gate against the Mixtral baseline." },
+      { name: "offline",     isExtra: false,
+        desc: "Aggregate MoE throughput. Only 2 of 8 experts activate per token.",
+        metric: { key: "offline_throughput", label: "tokens/sec", direction: "desc", unit: "tokens/sec" } },
+      { name: "online",      isExtra: false,
+        desc: "Max QPS under the 500 ms p99 TTFT SLA on MoE serving.",
+        metric: { key: "online_max_qps", label: "queries/sec", direction: "desc", unit: "queries/sec" } },
+      { name: "interactive", isExtra: true,
+        desc: "Single-stream TTFT on MoE inference." },
+      { name: "sustained",   isExtra: true,
+        desc: "30 min sustained MoE load. Several chips show thermal onset on this suite.",
+        metric: { key: "sustained_throughput", label: "sustained throughput", direction: "desc", unit: "tokens/sec" } },
+    ],
+  },
+};
+
+// House style: headline-style Title Case for all suite titles so they
+// look correct everywhere they surface (home cards, rankings hero,
+// rankings suite pills, compare hero, compare suite pills, modal
+// header, suites explainer).  The source strings above stay in
+// natural sentence case for readability; we transform once at module
+// load so consumers don't have to remember to call toTitleCase().
+for (const meta of Object.values(SUITE_META)) {
+  meta.title = toTitleCase(meta.title);
+}
+
+// Single source of truth for "render the primary metric for this suite".
+// Used by home, rankings, chip-detail, compare — keeps unit / scale rules
+// in one place.  Returns "—" for null / missing values.
+export function formatPrimary(value, suiteId) {
+  if (value === null || value === undefined || Number.isNaN(value)) return "-";
+  const meta = SUITE_META[suiteId];
+  if (!meta) return String(value);
+  const p = meta.primary;
+  const scaled = Number(value) * (p.scale || 1);
+  const decimals = p.decimals !== undefined
+    ? p.decimals
+    : (Math.abs(scaled) >= 100 ? 0 : Math.abs(scaled) >= 10 ? 1 : 2);
+  const num = scaled.toLocaleString(undefined, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+  return p.unit ? `${num} ${p.unit}` : num;
+}
+
+export const SUITE_ORDER = ["suite_A", "suite_B", "suite_C", "suite_D", "suite_E", "suite_F", "suite_G"];
+
+// ── Vendor metadata (single source of truth) ────────────────────────
+//
+// Adding a new vendor used to require touching ~70 lines across 6 CSS
+// files (one `[data-vendor="X"] { --vendor-color: var(--v-x); }` per
+// scoped selector).  Now everything lives here:
+//
+//   • VENDOR_COLORS — known brand colour per vendor name (1 entry per
+//                     vendor; key matches the `vendor` field on rows).
+//   • vendorColor(name) — returns the brand colour, or a deterministic
+//                         fallback from FALLBACK_PALETTE when the
+//                         vendor isn't in the table yet.
+//   • injectVendorStyles() — reads every vendor seen in the loaded
+//                            dataset and writes one `[data-vendor="X"]
+//                            { --vendor-color: ... }` rule into a
+//                            singleton `<style>` tag.  Components keep
+//                            consuming `var(--vendor-color)` like before.
+//
+// Net result: a brand-new vendor gets a stable colour out of the box.
+// To pin its actual brand colour, add one entry below — that's it.
+export const VENDOR_COLORS = {
+  "NVIDIA":        "#76b900",
+  "AMD":           "#ed1c24",
+  "Apple":         "#a1a1aa",
+  "Google":        "#4285f4",
+  "Huawei":        "#ff4d4d",
+  "Moore Threads": "#c084fc",
+  "Intel":         "#0071c5",
+};
+
+// Spread across the colour wheel so two unknown vendors picked up in
+// the same dataset are unlikely to collide.  Tuned for legibility on
+// both light and dark backgrounds.
+const FALLBACK_PALETTE = [
+  "#5e9bff", "#ffa94d", "#56d364", "#f87171",
+  "#a78bfa", "#2dd4bf", "#fbbf24", "#fb7185", "#22d3ee",
+];
+
+export function vendorColor(name) {
+  if (!name) return "#888780";
+  if (VENDOR_COLORS[name]) return VENDOR_COLORS[name];
+  // Deterministic per-name pick: same vendor name always lands on the
+  // same fallback so the colour doesn't shuffle between page loads.
+  let h = 0;
+  const s = String(name);
+  for (let i = 0; i < s.length; i++) h = ((h << 5) - h + s.charCodeAt(i)) | 0;
+  return FALLBACK_PALETTE[Math.abs(h) % FALLBACK_PALETTE.length];
+}
+
+// Display order for vendor filter pills, derived from VENDOR_COLORS in
+// declaration order so adding a vendor to the colour table is the only
+// step needed to give it a stable rank in the UI.  Vendors that show
+// up in the data without a colour entry are appended in alphabetical
+// order at the end.
+export const VENDOR_ORDER = Object.keys(VENDOR_COLORS);
+
+function _cssEscapeAttr(v) {
+  // CSS attribute selectors use double-quoted strings; double quotes
+  // and backslashes need escaping.  Vendor names in the wild are very
+  // unlikely to contain either, but better to be robust than to write
+  // unparseable CSS the moment a vendor like `Foo "Bar"` shows up.
+  return String(v).replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+function injectVendorStyles(vendors) {
+  // Quietly no-op when the DOM isn't available — node tests import
+  // data.js without standing up the full document/window globals and
+  // we don't want them to blow up.
+  if (typeof document === "undefined" || !document.head) return;
+  const css = Array.from(vendors)
+    .filter(Boolean)
+    .map((v) => `[data-vendor="${_cssEscapeAttr(v)}"]{--vendor-color:${vendorColor(v)};}`)
+    .join("\n");
+  let style = document.getElementById("__vendor-color-styles");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "__vendor-color-styles";
+    document.head.appendChild(style);
+  }
+  style.textContent = css;
+}
+
+// Per-suite column / metric specs used by the rankings table and the
+// compare view.  Decoupled from SUITE_META.scenarios because the UI
+// columns are a curated subset (some scenarios are extras, some have
+// no numeric metric at all), and the column ordering matters.
+//
+// First entry is the primary metric (default sort + featured row).
+// `scale` multiplies the raw value at display (e.g. 0.945 -> 94.5 %).
+// `direction` selects asc / desc default sort and informs compare bars.
+// `textual` marks string-valued columns (e.g. quant_best_precision).
+export const SUITE_COLUMNS = {
+  suite_A: [
+    { key: "offline_throughput",   label: "Offline",        unit: "tok/s", direction: "desc", primary: true },
+    { key: "online_max_qps",       label: "Online QPS",     unit: "qps",   direction: "desc" },
+    { key: "interactive_ttft_p99", label: "TTFT p99",       unit: "ms",    direction: "asc", decimals: 0 },
+  ],
+  suite_B: [
+    { key: "offline_throughput",   label: "Offline",        unit: "tok/s", direction: "desc", primary: true },
+    { key: "online_max_qps",       label: "Online QPS",     unit: "qps",   direction: "desc" },
+  ],
+  suite_C: [
+    { key: "quant_quality_eff",    label: "Quality eff.",   unit: "",      direction: "desc", primary: true, decimals: 2 },
+    { key: "quant_best_throughput", label: "Best tok/s",    unit: "tok/s", direction: "desc" },
+    { key: "quant_best_precision", label: "Best format",    unit: "",      direction: "desc", textual: true },
+  ],
+  suite_D: [
+    { key: "offline_throughput",   label: "Offline",        unit: "tok/s", direction: "desc", primary: true },
+    { key: "interactive_ttft_p99", label: "TTFT p99",       unit: "ms",    direction: "asc", decimals: 0 },
+  ],
+  suite_E: [
+    { key: "scaling_efficiency_2x", label: "2× eff.",       unit: "%",     direction: "desc", primary: true, scale: 100, decimals: 1 },
+    { key: "scaling_efficiency_4x", label: "4× eff.",       unit: "%",     direction: "desc", scale: 100, decimals: 1 },
+  ],
+  suite_F: [
+    { key: "offline_throughput",   label: "Offline",        unit: "tok/s", direction: "desc", primary: true },
+    { key: "online_max_qps",       label: "Online QPS",     unit: "qps",   direction: "desc" },
+    { key: "interactive_ttft_p99", label: "TTFT p99",       unit: "ms",    direction: "asc", decimals: 0 },
+  ],
+  suite_G: [
+    { key: "sustained_throughput", label: "Sustained",      unit: "tok/s", direction: "desc", primary: true },
+    { key: "offline_throughput",   label: "Offline",        unit: "tok/s", direction: "desc" },
+  ],
+};
+
+// Format a numeric value against a column spec.  Returns null for
+// missing values so callers can render the "-" themselves.
+export function formatMetric(value, col) {
+  if (value === null || value === undefined || Number.isNaN(value)) return null;
+  if (col.textual) return String(value);
+  const scaled = Number(value) * (col.scale || 1);
+  const decimals = col.decimals !== undefined
+    ? col.decimals
+    : (Math.abs(scaled) >= 100 ? 0 : Math.abs(scaled) >= 10 ? 1 : 2);
+  return scaled.toLocaleString(undefined, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+}
+
+let _rows = null;
+let _byChip = null;
+let _byRunId = null;
+let _bySuite = null;
+let _ready = false;
+
+export function init() {
+  if (_ready) return;
+  mergeSuiteSpecs();
+
+  const data = (typeof window !== "undefined" && Array.isArray(window.LEADERBOARD_DATA))
+    ? window.LEADERBOARD_DATA
+    : [];
+  // Attach derived fields so views don't recompute.
+  for (const r of data) {
+    r._chip_slug = chipSlug(r);
+    r._chip_label = r.chip_count && r.chip_count > 1
+      ? `${r.chip} ×${r.chip_count}`
+      : r.chip;
+  }
+  _rows = data;
+  _bySuite = groupBy(data, (r) => r.suite);
+  _byChip  = groupBy(data, (r) => r._chip_slug);
+  _byRunId = new Map(data.filter((r) => r.run_id).map((r) => [r.run_id, r]));
+
+  // Resolve vendor colours for every vendor seen in the loaded data
+  // and inject them as CSS custom properties.  Components consume
+  // `var(--vendor-color)` and stay agnostic to the colour table.
+  const vendors = new Set(data.map((r) => r.vendor).filter(Boolean));
+  injectVendorStyles(vendors);
+
+  _ready = true;
+}
+
+// Merge canonical suite spec from suites/suite_X/suite.json (baked into
+// the generated leaderboard.js as window.SUITE_SPECS) into SUITE_META.
+//
+// Only factual fields (model, dataset, precision baseline, prompt-token
+// p50, default/extra scenario split) are merged in; editorial fields
+// (title, tagline, description, primary metric label, chip-count copy)
+// stay hardcoded since they aren't part of the suite contract.
+//
+// The merge is conservative: a spec value only overrides the existing
+// editorial value when the existing value looks like a simple token
+// (no comma, no semicolon).  This preserves intentionally composite
+// strings — e.g. suite_C's "BF16, FP8, W8A8, W8A16, W4A16" and
+// suite_D's "BF16; max_model_len 30,208".  If maintainers want those
+// suites to auto-track suite.json too, they should split the composite
+// into separate fields in SUITE_META.
+function mergeSuiteSpecs() {
+  const specs = (typeof window !== "undefined" && window.SUITE_SPECS) || {};
+  for (const [sid, spec] of Object.entries(specs)) {
+    const meta = SUITE_META[sid];
+    if (!meta) continue;
+    const wl = meta.workload || (meta.workload = {});
+
+    if (spec.model_id) wl.model = spec.model_id;
+    if (spec.dataset)  wl.dataset = spec.dataset;
+    if (spec.precision_required && _isSimpleToken(wl.precision)) {
+      wl.precision = spec.precision_required;
+    }
+
+    const inT  = _fmtTokenCount(spec.input_tokens_p50);
+    const outT = _fmtTokenCount(spec.output_tokens_p50);
+    if (inT  && _isTokenCountToken(wl.inputTokens))  wl.inputTokens  = inT;
+    if (outT && _isTokenCountToken(wl.outputTokens)) wl.outputTokens = outT;
+
+    // Scenario name in SUITE_META may be qualified ("offline (×5 formats)",
+    // "offline (1× / 2×)"); match by leading bare word.
+    const extras   = new Set(spec.scenarios_extra   || []);
+    const defaults = new Set(spec.scenarios_default || []);
+    for (const s of meta.scenarios) {
+      const base = s.name.split(" ")[0].trim();
+      if (extras.has(base))   s.isExtra = true;
+      if (defaults.has(base)) s.isExtra = false;
+    }
+  }
+}
+
+function _isSimpleToken(v) {
+  // True for "BF16", "FP16", "FP8", etc.; false for "BF16, FP8, ..."
+  // (composite list) and "BF16; max_model_len 30,208" (composite line).
+  if (!v) return true;
+  const s = String(v);
+  return !s.includes(",") && !s.includes(";");
+}
+
+function _isTokenCountToken(v) {
+  // Auto-format only when the existing value is a plain "~280" / "~28K"
+  // style.  Preserves anything more elaborate the editorial layer set.
+  if (!v) return true;
+  return /^~[\d.]+[KM]?$/.test(String(v));
+}
+
+function _fmtTokenCount(n) {
+  if (n === null || n === undefined) return null;
+  const v = Number(n);
+  if (!Number.isFinite(v)) return null;
+  if (v >= 10000) return `~${Math.round(v / 1000)}K`;
+  if (v >= 1000)  return `~${(v / 1000).toFixed(1)}K`;
+  return `~${Math.round(v)}`;
+}
+
+// Returns rows in a given suite, sorted by suite primary metric.
+export function rowsForSuite(suiteId) {
+  if (!_ready) init();
+  const suite = SUITE_META[suiteId];
+  if (!suite) return [];
+  const raw = _bySuite.get(suiteId) || [];
+  const direction = suite.primary.direction;
+  const key = suite.primary.key;
+
+  // Filter to rows that actually have the primary metric.
+  const valid = raw.filter((r) => {
+    const v = r[key];
+    return v !== null && v !== undefined && !Number.isNaN(v);
+  });
+
+  const cmp = direction === "asc"
+    ? (a, b) => a[key] - b[key]
+    : (a, b) => b[key] - a[key];
+
+  return [...valid].sort(cmp);
+}
+
+// One row per chip for a suite — picks best by primary metric.
+// Used for "is this chip the leader in this suite?" comparisons.
+export function bestPerChipForSuite(suiteId) {
+  const all = rowsForSuite(suiteId);
+  const seen = new Map();
+  for (const r of all) {
+    if (!seen.has(r._chip_slug)) seen.set(r._chip_slug, r);
+  }
+  return Array.from(seen.values());
+}
+
+// Rows for a given chip slug, grouped by suite (so a chip detail page
+// can show each suite as a tile).  Each entry has one "best" row.
+export function rowsForChip(slug) {
+  if (!_ready) init();
+  return _byChip.get(slug) || [];
+}
+
+// Chip-count variants this chip has been deployed at, sorted asc.
+// Returns e.g. [1, 4, 8] for a chip with single-card, 4-card, and
+// 8-card submissions.  chip-detail uses this in the hero facts row
+// and the suite-card "won at ×N" badge.
+export function chipCountsForChip(slug) {
+  const rs = rowsForChip(slug);
+  const counts = new Set();
+  for (const r of rs) counts.add(r.chip_count || 1);
+  return Array.from(counts).sort((a, b) => a - b);
+}
+
+// Per-suite "fingerprint" of a chip, normalised against the global best
+// for each suite.  Used by the chip-detail page to render a radar of
+// where the chip lands across the workload spectrum: each suite axis
+// reads as 0–100 (% of the global best primary metric for that suite).
+//
+// `direction === "asc"` (lower-is-better metrics like TTFT) inverts
+// the normalisation so the global winner still shows at 100 % — same
+// convention compare.js uses for its bar widths.  Suites the chip
+// hasn't submitted to come back as `value: null, normalized: 0` so
+// the radar polygon collapses to the centre on those axes (visually
+// signalling "no data" rather than faking a low score).
+export function suiteFingerprint(slug) {
+  const out = new Map();
+  for (const sid of SUITE_ORDER) {
+    const meta = SUITE_META[sid];
+    if (!meta) continue;
+    const board = rowsForSuite(sid);
+    if (!board.length) {
+      out.set(sid, { value: null, normalized: 0, best: null, missing: true });
+      continue;
+    }
+    const key = meta.primary.key;
+    const direction = meta.primary.direction;
+    const bestValue = board[0][key];
+    const myRow = board.find((r) => r._chip_slug === slug);
+    if (!myRow) {
+      out.set(sid, { value: null, normalized: 0, best: bestValue, missing: true });
+      continue;
+    }
+    const v = myRow[key];
+    let normalized = 0;
+    if (typeof v === "number" && typeof bestValue === "number") {
+      if (direction === "asc") {
+        normalized = v > 0 ? bestValue / v : 0;
+      } else {
+        normalized = bestValue > 0 ? v / bestValue : 0;
+      }
+    }
+    // Clamp into [0, 1] just in case the global best is the row itself
+    // (1.0) or a future scoring change inverts something unexpectedly.
+    normalized = Math.max(0, Math.min(1, normalized));
+    out.set(sid, { value: v, normalized, best: bestValue, missing: false });
+  }
+  return out;
+}
+
+// Per-suite scaling profile across this chip's chip-count variants.
+// Returns { chipCounts: [1, 4, 8], suites: [{ sid, letter, title, perCount }] }
+// where `perCount` is a Map<chip_count, { value, normalized, run_id }>.
+//
+// `normalized` is `value / max(values across chip_counts for this
+// suite)`, clamped to [0, 1].  asc-direction primary metrics (TTFT,
+// latency) get inverted so the lowest latency reads as 1.0 — matches
+// the radar's convention so users don't have to retrain their eye
+// when switching between sections.
+//
+// Cells where the chip didn't submit at a given chip-count for a
+// suite come back as `{ value: null, normalized: 0, run_id: null }`
+// so the chart renderer can render a zero-height placeholder rather
+// than skipping the cluster (skipping would silently re-align the
+// remaining bars under the wrong x-axis tick).
+//
+// Suites the chip never submitted to at *any* chip-count are omitted
+// from `suites` entirely — the scaling story for those is "no data"
+// and the fingerprint section already telegraphs that.
+export function chipCountScaling(slug) {
+  const counts = chipCountsForChip(slug);
+  const out = { chipCounts: counts, suites: [] };
+  if (counts.length < 2) return out;
+
+  for (const sid of SUITE_ORDER) {
+    const meta = SUITE_META[sid];
+    if (!meta) continue;
+    const key = meta.primary.key;
+    const direction = meta.primary.direction;
+    const board = rowsForSuite(sid);
+    const myRows = board.filter((r) => r._chip_slug === slug);
+    if (!myRows.length) continue;
+
+    // Best row per chip_count for this chip on this suite.
+    const perCount = new Map();
+    for (const r of myRows) {
+      const c = r.chip_count || 1;
+      const cur = perCount.get(c);
+      const better = !cur || (direction === "asc"
+        ? r[key] < cur.value
+        : r[key] > cur.value);
+      if (better && r[key] != null) {
+        perCount.set(c, { value: r[key], run_id: r.run_id || r.submission || null });
+      }
+    }
+    if (!perCount.size) continue;
+
+    // Normalise within this suite's per-count column so the chart
+    // reads as "% of this chip's best on this suite" rather than raw
+    // throughput (which would drown the smaller chip_counts).
+    const values = Array.from(perCount.values()).map((v) => v.value);
+    const refValue = direction === "asc" ? Math.min(...values) : Math.max(...values);
+    const filled = new Map();
+    for (const c of counts) {
+      const cell = perCount.get(c);
+      if (!cell) {
+        filled.set(c, { value: null, normalized: 0, run_id: null });
+        continue;
+      }
+      let normalized = 0;
+      if (typeof cell.value === "number" && typeof refValue === "number" && refValue !== 0) {
+        normalized = direction === "asc" ? refValue / cell.value : cell.value / refValue;
+      }
+      normalized = Math.max(0, Math.min(1, normalized));
+      filled.set(c, { value: cell.value, normalized, run_id: cell.run_id });
+    }
+
+    out.suites.push({ sid, letter: meta.letter, title: meta.title, perCount: filled });
+  }
+
+  return out;
+}
+
+// Pick a representative run_id for a given chip slug — used by the
+// chip-cloud "quick add" affordance on Home and Compare so that a single
+// click on a chip seeds the compare basket with the freshest run for
+// that chip-count variant.  Returns null when no rows exist (e.g. the
+// chip was removed from the dataset since a shared link was created).
+export function representativeRunForChip(slug) {
+  const rs = rowsForChip(slug);
+  if (!rs.length) return null;
+  const best = rs.reduce((a, b) => (String(b.date) > String(a.date) ? b : a));
+  return best.run_id || best.submission || null;
+}
+
+// Find a row by its run_id (the compare-basket primary key).
+// Returns null if the run no longer exists in the dataset (e.g. the
+// user reloaded a shared URL after the submission was withdrawn).
+export function rowByRunId(runId) {
+  if (!_ready) init();
+  return _byRunId.get(runId) || null;
+}
+
+// Resolve a basket run_id to the most appropriate row to display for a
+// given suite:
+//   • exact run in the same suite     → return it
+//   • same chip + count + framework + version → best by suite primary
+//   • same chip + count + framework             → best by suite primary
+//   • otherwise                                  → null (no data in suite)
+//
+// This is what makes the compare page meaningful across suites: the
+// user picks a specific run from Rankings, and when they switch suite
+// we resurface that same hardware/software configuration's best run
+// in the new suite rather than dropping the chip from the basket.
+// Resolve a basket entry to its "matching" row in another suite.  The
+// match cascades through ever-laxer constraints so suites that fix
+// chip_count (e.g. suite_B / suite_G are ×8) still surface a relevant
+// row when the user originally picked a single-chip variant:
+//
+//   1. exact run_id in the target suite (rare; same submission ran the
+//      whole suite family)
+//   2. chip + chip_count + framework + framework_version
+//   3. chip + chip_count + framework (looser framework_version)
+//   4. chip + framework (loosen chip_count; this is how an H200×1 pick
+//      maps onto suite_B's H200×8 row, which is the *only* H200 row in
+//      that suite anyway)
+//   5. chip (loosen framework — last-resort cross-framework fallback)
+//
+// Within whichever pool wins we pick the row with the best value on
+// the target suite's primary metric.
+export function bestRowForRunInSuite(runId, suiteId) {
+  const seed = rowByRunId(runId);
+  if (!seed) return null;
+  if (seed.suite === suiteId) return seed;
+  const inSuite = _rows.filter((r) => r.suite === suiteId);
+  if (inSuite.length === 0) return null;
+
+  const cascade = [
+    (r) => r.chip === seed.chip
+        && (r.chip_count || 1) === (seed.chip_count || 1)
+        && r.framework === seed.framework
+        && r.framework_version === seed.framework_version,
+    (r) => r.chip === seed.chip
+        && (r.chip_count || 1) === (seed.chip_count || 1)
+        && r.framework === seed.framework,
+    (r) => r.chip === seed.chip
+        && r.framework === seed.framework,
+    (r) => r.chip === seed.chip,
+  ];
+
+  let pool = null;
+  for (const pred of cascade) {
+    const candidates = inSuite.filter(pred);
+    if (candidates.length > 0) { pool = candidates; break; }
+  }
+  if (!pool) return null;
+
+  const meta = SUITE_META[suiteId];
+  if (!meta) return pool[0];
+  const pk = meta.primary.key;
+  const valid = pool.filter((r) =>
+    r[pk] !== null && r[pk] !== undefined && !Number.isNaN(r[pk])
+  );
+  if (valid.length === 0) return pool[0];
+  return meta.primary.direction === "asc"
+    ? valid.reduce((a, b) => (a[pk] <= b[pk] ? a : b))
+    : valid.reduce((a, b) => (a[pk] >= b[pk] ? a : b));
+}
+
+// Best per suite for a chip.  Returns Map<suite_id, best_row>.
+export function bestPerSuiteForChip(slug) {
+  const rs = rowsForChip(slug);
+  const out = new Map();
+  for (const suiteId of SUITE_ORDER) {
+    const inSuite = rs.filter((r) => r.suite === suiteId);
+    if (inSuite.length === 0) continue;
+    const meta = SUITE_META[suiteId];
+    const key = meta.primary.key;
+    const direction = meta.primary.direction;
+    const valid = inSuite.filter((r) => r[key] !== null && r[key] !== undefined);
+    if (valid.length === 0) {
+      // Fall back to first row even without primary, so user still sees a tile.
+      out.set(suiteId, inSuite[0]);
+      continue;
+    }
+    const best = direction === "asc"
+      ? valid.reduce((a, b) => (a[key] <= b[key] ? a : b))
+      : valid.reduce((a, b) => (a[key] >= b[key] ? a : b));
+    out.set(suiteId, best);
+  }
+  return out;
+}
+
+// High-level stats for hero strip.
+export function summary() {
+  if (!_ready) init();
+  const chips = new Set(_rows.map((r) => r._chip_slug));
+  const vendors = new Set(_rows.map((r) => r.vendor));
+  const suites = new Set(_rows.map((r) => r.suite));
+  const verified = _rows.filter((r) => r.tier === "verified").length;
+  return {
+    total: _rows.length,
+    verified,
+    chips: chips.size,
+    vendors: vendors.size,
+    suites: suites.size,
+  };
+}
+
+// Last N submissions, sorted by date desc.
+export function recent(limit = 6) {
+  if (!_ready) init();
+  return [..._rows]
+    .filter((r) => r.date)
+    .sort((a, b) => String(b.date).localeCompare(String(a.date)))
+    .slice(0, limit);
+}
+
+// Count submissions with a `date` newer than `now - days`.  Used by
+// the home hero to surface a "this week" momentum stat without
+// double-rendering the recent activity list.  Accepts an optional
+// `now` for deterministic unit testing.
+//
+// Row dates are stored as calendar `YYYY-MM-DD` strings (no time
+// component); we compare lexicographically against a UTC cutoff,
+// which is correct for ISO-formatted dates and avoids timezone
+// rollover ambiguity around midnight.
+export function recentSince(days, now = new Date()) {
+  if (!_ready) init();
+  const n = Number(days);
+  if (!Number.isFinite(n) || n <= 0) return 0;
+  const ms = n * 24 * 60 * 60 * 1000;
+  const cutoff = new Date(now.getTime() - ms);
+  const cutoffStr = cutoff.toISOString().slice(0, 10);
+  let count = 0;
+  for (const r of _rows) {
+    if (r.date && String(r.date) >= cutoffStr) count++;
+  }
+  return count;
+}
+
+// Rank a *chip* within a suite leaderboard (one entry per chip slug,
+// scored by each chip's best primary metric).  Used by chip-detail to
+// surface "ranked #N of M" badges per suite — far more useful than the
+// raw row rank, which would penalise chips that submit many variants.
+export function rankChipInSuite(slug, suiteId) {
+  const board = bestPerChipForSuite(suiteId);
+  if (!board.length) return null;
+  const idx = board.findIndex((r) => r._chip_slug === slug);
+  if (idx < 0) return null;
+  return { rank: idx + 1, total: board.length };
+}
+
+// Find chips with the most overlapping suite coverage with `slug`.
+// Returns a small array sorted by (shared suite count desc, same-vendor
+// preferred, total run count desc) — i.e. "you might also care about
+// these because they compete on the same workloads".  Chips with no
+// shared suite are excluded; the source chip itself is excluded.
+export function similarChipsTo(slug, { limit = 5 } = {}) {
+  if (!_ready) init();
+  const myRows = rowsForChip(slug);
+  if (!myRows.length) return [];
+  const mySuites = new Set(myRows.map((r) => r.suite));
+  const myVendor = myRows[0].vendor;
+
+  const candidates = [];
+  for (const [otherSlug, rows] of _byChip.entries()) {
+    if (otherSlug === slug || !rows.length) continue;
+    const shared = rows.filter((r) => mySuites.has(r.suite));
+    if (shared.length === 0) continue;
+    const otherSuites = new Set(shared.map((r) => r.suite));
+    candidates.push({
+      slug: otherSlug,
+      sample: rows[0],
+      // Peer cards link to a chip-detail page (which is now per-model,
+      // not per-fan-out) so the displayed label is the bare chip name
+      // — `_chip_label` would arbitrarily pick whichever variant came
+      // first in `rows`, which would read as "RTX 4090D ×4" sometimes
+      // and "RTX 4090D" other times depending on insertion order.
+      label: rows[0].chip,
+      vendor: rows[0].vendor,
+      sharedSuites: Array.from(otherSuites),
+      sameVendor: rows[0].vendor === myVendor,
+      totalRuns: rows.length,
+    });
+  }
+
+  candidates.sort((a, b) => {
+    if (b.sharedSuites.length !== a.sharedSuites.length) {
+      return b.sharedSuites.length - a.sharedSuites.length;
+    }
+    // Same-vendor first when overlap is tied — keeps recommendations
+    // intra-vendor for vendor lock-in shoppers without hard-filtering
+    // cross-vendor matches off the strip.
+    if (a.sameVendor !== b.sameVendor) return a.sameVendor ? -1 : 1;
+    return b.totalRuns - a.totalRuns;
+  });
+
+  return candidates.slice(0, limit);
+}
+
+// Suite-level facts derived from current data — model used,
+// baseline precision, total submissions, distinct chips.  Used in
+// the home suite-card header to give buyers immediate context
+// without having to dive in.
+export function suiteFacts(suiteId) {
+  if (!_ready) init();
+  const rows = _bySuite.get(suiteId) || [];
+  if (rows.length === 0) {
+    return { model: null, precision: null, submissions: 0, chips: 0 };
+  }
+  const model = mode(rows.map((r) => r.model).filter(Boolean));
+  const precision = mode(rows.map((r) => r.precision).filter(Boolean));
+  const chips = new Set(rows.map((r) => r._chip_slug)).size;
+  return { model, precision, submissions: rows.length, chips };
+}
+
+// Find the best row in a suite by an arbitrary metric key + direction.
+// Used by the suites page to surface a leader per scenario, not just
+// for the suite-level primary metric.  Returns null if no rows have a
+// numeric value for that key.
+export function bestRowByMetric(suiteId, key, direction) {
+  if (!_ready) init();
+  const rows = (_bySuite.get(suiteId) || [])
+    .filter((r) => r[key] !== null && r[key] !== undefined && Number.isFinite(r[key]));
+  if (rows.length === 0) return null;
+  return direction === "asc"
+    ? rows.reduce((a, b) => (a[key] <= b[key] ? a : b))
+    : rows.reduce((a, b) => (a[key] >= b[key] ? a : b));
+}
+
+// Chip cloud data — one entry per chip (variants like ×1 / ×4 / ×8
+// are aggregated under the base chip name; the linked detail row
+// picks the most-submitted variant so the link still resolves).
+// Each entry gets a size bucket (sm/md/lg/xl) for the home cloud.
+//
+// Ordering is intentionally NOT by submission count: tiles are
+// shuffled by a deterministic hash so the resulting layout reads
+// like a real cloud rather than a sorted bar chart.
+export function chipCloudData() {
+  if (!_ready) init();
+  // Aggregate by base chip name across chip-count variants.
+  const byBase = new Map();
+  for (const r of _rows) {
+    const base = r.chip;
+    if (!base) continue;
+    let agg = byBase.get(base);
+    if (!agg) {
+      agg = {
+        label: base,
+        vendor: r.vendor,
+        submissions: 0,
+        _bestSlug: null,
+        _bestVariantSubs: -1,
+        _variantSubs: new Map(),
+        _suites: new Set(),
+      };
+      byBase.set(base, agg);
+    }
+    agg.submissions += 1;
+    agg._suites.add(r.suite);
+    const cur = (agg._variantSubs.get(r._chip_slug) || 0) + 1;
+    agg._variantSubs.set(r._chip_slug, cur);
+    if (cur > agg._bestVariantSubs) {
+      agg._bestVariantSubs = cur;
+      agg._bestSlug = r._chip_slug;
+    }
+  }
+  const out = [];
+  for (const agg of byBase.values()) {
+    out.push({
+      slug: agg._bestSlug,
+      label: agg.label,
+      vendor: agg.vendor,
+      submissions: agg.submissions,
+      variants: agg._variantSubs.size,
+      suites: Array.from(agg._suites).sort().map((s) =>
+        (SUITE_META[s] && SUITE_META[s].letter) || null).filter(Boolean),
+    });
+  }
+  // Bucket by submission count — thresholds tuned to spread current
+  // distribution (max ~12 subs) into 4 buckets.
+  for (const c of out) {
+    c.size = c.submissions >= 8 ? "xl"
+           : c.submissions >= 4 ? "lg"
+           : c.submissions >= 2 ? "md"
+                                : "sm";
+  }
+  // Deterministic shuffle: hash of label seeds a stable but
+  // chaotic-looking order.  Stable across reloads.
+  for (const c of out) c._h = hashString(c.label);
+  out.sort((a, b) => a._h - b._h);
+  for (const c of out) delete c._h;
+  return out;
+}
+
+function hashString(s) {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = ((h << 5) - h + s.charCodeAt(i)) | 0;
+  }
+  return h;
+}
+
+function mode(arr) {
+  if (!arr || arr.length === 0) return null;
+  const c = new Map();
+  for (const x of arr) c.set(x, (c.get(x) || 0) + 1);
+  let best = null, bestC = -1;
+  for (const [k, n] of c.entries()) if (n > bestC) { best = k; bestC = n; }
+  return best;
+}
diff --git a/leaderboard/site/assets/js/main.js b/leaderboard/site/assets/js/main.js
new file mode 100644
index 00000000..9a4ef42b
--- /dev/null
+++ b/leaderboard/site/assets/js/main.js
@@ -0,0 +1,32 @@
+// main.js — entry point.  Wires up router, data, and the top nav.
+
+import { init as initData } from "./data.js";
+import { mount, register, start } from "./router.js";
+import { initModal } from "./modal.js";
+import { render as renderHome }     from "./views/home.js";
+import { render as renderRankings } from "./views/rankings.js";
+import { render as renderChip }     from "./views/chip-detail.js";
+import { render as renderCompare }  from "./views/compare.js";
+import { render as renderSuites }   from "./views/suites.js";
+
+function boot() {
+  initData();
+  initModal();
+
+  const appEl = document.getElementById("view");
+  mount(appEl);
+
+  register("/",            renderHome);
+  register("/rankings",    renderRankings);
+  register("/chip/:slug",  renderChip);
+  register("/compare",     renderCompare);
+  register("/suites",      renderSuites);
+
+  start();
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", boot);
+} else {
+  boot();
+}
diff --git a/leaderboard/site/assets/js/modal.js b/leaderboard/site/assets/js/modal.js
new file mode 100644
index 00000000..a52a3e1f
--- /dev/null
+++ b/leaderboard/site/assets/js/modal.js
@@ -0,0 +1,1281 @@
+// modal.js — Single-run detail modal overlay.
+//
+// Triggered by any element with `data-open-run="<run_id>"` anywhere in
+// the app via document-level delegation, plus the public openModal()
+// API for programmatic callers and a URL deep-link (`?run=<rid>`).
+//
+// Layout: 3 tabs.
+//   • Details — hardware / software / model / run-settings / accuracy
+//               / metadata key-value sections from row.detail.
+//   • Visualize — Chart.js charts per suite type, driven by row.viz
+//                 (offline bars, online latency lines, sustained
+//                 throughput-over-time, scaling efficiency, etc.).
+//   • Implementation — runner-code metadata from row.impl, including
+//                      deprecation banner and links to runner.py.
+//
+// Inert when no `<script src="chart.umd*.js">` is present — the Viz tab
+// silently falls back to "Charting library failed to load".  Modal
+// itself never crashes the app.
+
+import { rowByRunId, SUITE_META } from "./data.js";
+import {
+  esc, shortVersion, fmtDate, submitterHandle, chipSlug,
+  downloadCanvasAsPng, flashButtonLabel,
+} from "./utils.js";
+
+// ── Module state ──
+let _modalEl = null;
+let _activeCharts = [];
+let _activeTab = "details";
+let _lastFocus = null;
+let _currentRow = null;
+let _vizRenderedForRun = null;
+
+// Suite letter -> CSS variable used for accent color binding on the
+// modal shell.  The same tokens are already defined in base.css.
+const SUITE_LETTERS = { suite_A: "A", suite_B: "B", suite_C: "C", suite_D: "D", suite_E: "E", suite_F: "F", suite_G: "G" };
+
+// Chart palette — pulled from CSS variables so the modal reacts to the
+// active light / dark scheme.  Resolved lazily so we read after the
+// stylesheet has been parsed.
+let _C = null;
+function chartColors() {
+  if (_C) return _C;
+  const cs = getComputedStyle(document.documentElement);
+  const v = (name, fallback) => (cs.getPropertyValue(name).trim() || fallback);
+  _C = {
+    blue:  "#378ADD",
+    teal:  "#1D9E75",
+    amber: "#EF9F27",
+    coral: "#D85A30",
+    purple:"#c084fc",
+    green: "#56d364",
+    red:   "#f85149",
+    yellow:"#fbbf24",
+    gray:  "#888780",
+    text:  v("--fg-muted",   "#8b949e"),
+    grid:  v("--border-soft","rgba(127,127,127,0.18)"),
+  };
+  return _C;
+}
+
+// ── Public API ──
+
+// Inject the modal DOM and wire global listeners.  Idempotent.
+export function initModal() {
+  if (_modalEl) return;
+  _modalEl = document.createElement("div");
+  _modalEl.className = "modal-overlay";
+  _modalEl.setAttribute("aria-hidden", "true");
+  _modalEl.innerHTML = `
+    <div class="modal-shell" role="dialog" aria-modal="true" aria-labelledby="run-modal-title" tabindex="-1">
+      <header class="modal-header">
+        <div class="modal-titles">
+          <h2 class="modal-title" id="run-modal-title">—</h2>
+          <a class="modal-chip-link" href="#/" title="See every run for this chip">View chip overview →</a>
+          <p class="modal-subtitle">—</p>
+        </div>
+        <button class="modal-close" type="button" aria-label="Close">×</button>
+      </header>
+      <nav class="modal-tabs" role="tablist" aria-label="Run details">
+        <button class="modal-tab" data-tab="details" type="button" role="tab" id="run-modal-tab-details" aria-controls="run-modal-panel-details">Details</button>
+        <button class="modal-tab" data-tab="viz"     type="button" role="tab" id="run-modal-tab-viz"     aria-controls="run-modal-panel-viz">Visualize</button>
+        <button class="modal-tab" data-tab="impl"    type="button" role="tab" id="run-modal-tab-impl"    aria-controls="run-modal-panel-impl">Implementation</button>
+      </nav>
+      <div class="modal-body">
+        <section class="modal-panel" data-panel="details" role="tabpanel" id="run-modal-panel-details" aria-labelledby="run-modal-tab-details" tabindex="0"></section>
+        <section class="modal-panel" data-panel="viz"     role="tabpanel" id="run-modal-panel-viz"     aria-labelledby="run-modal-tab-viz"     tabindex="0"></section>
+        <section class="modal-panel" data-panel="impl"    role="tabpanel" id="run-modal-panel-impl"    aria-labelledby="run-modal-tab-impl"    tabindex="0"></section>
+      </div>
+      <footer class="modal-footer">
+        <span class="modal-submission">—</span>
+        <a class="modal-script-link" target="_blank" rel="noopener">View reproduce script ↗</a>
+      </footer>
+    </div>
+  `;
+  document.body.appendChild(_modalEl);
+
+  // Backdrop click closes (anywhere outside the shell).
+  _modalEl.addEventListener("click", (ev) => {
+    if (ev.target === _modalEl) closeModal();
+  });
+
+  // Header / tab clicks within the modal.
+  _modalEl.addEventListener("click", (ev) => {
+    if (ev.target.closest(".modal-close")) { closeModal(); return; }
+    const tab = ev.target.closest(".modal-tab");
+    if (tab) { _setTab(tab.dataset.tab); return; }
+    // Chart download button — sits inside any .viz-chart-wrap built
+    // by _mkCanvas.  Resolve the canvas via DOM proximity so we don't
+    // need a separate registry of (button → chart) mappings.
+    const dlBtn = ev.target.closest("[data-chart-dl]");
+    if (dlBtn && _modalEl.contains(dlBtn)) {
+      ev.preventDefault();
+      _downloadVizChart(dlBtn);
+      return;
+    }
+  });
+
+  // Esc closes from anywhere.
+  document.addEventListener("keydown", (ev) => {
+    if (ev.key === "Escape" && _modalEl.classList.contains("open")) {
+      ev.preventDefault();
+      closeModal();
+    }
+  });
+
+  // Document-wide trigger.  Any element marked data-open-run="<rid>"
+  // opens the modal — works inside any view without each view having
+  // to wire its own handler.
+  document.addEventListener("click", (ev) => {
+    const t = ev.target.closest("[data-open-run]");
+    if (!t) return;
+
+    // Nested-anchor escape: when the click lands on a real `<a href>`
+    // strictly inside the trigger (e.g. the chip-name link inside an
+    // lb-row), let the browser follow that link instead of popping the
+    // modal.  This is what lets `chip name → /chip/<slug>` and `row
+    // body → run modal` coexist on the same row.
+    const inner = ev.target.closest("a[href]");
+    if (inner && inner !== t && t.contains(inner)) return;
+
+    // Allow modifier-clicks (cmd/ctrl/middle) to behave like normal links
+    // when the element is also an anchor with an href.
+    if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.button === 1) return;
+    ev.preventDefault();
+    openModal(t.dataset.openRun);
+  });
+
+  // Keyboard activation for the same `[data-open-run]` triggers.
+  // Mirrors the click handler so non-mouse users can pop the modal
+  // by tabbing onto a row / card and pressing Enter or Space — the
+  // ARIA-recommended activation keys for role="button" surfaces.  We
+  // skip text inputs / contenteditable so typing inside, say, a
+  // future modal search field doesn't accidentally fire it.
+  document.addEventListener("keydown", (ev) => {
+    if (ev.key !== "Enter" && ev.key !== " " && ev.key !== "Spacebar") return;
+    const t = ev.target.closest("[data-open-run]");
+    if (!t) return;
+    // If focus is on an inner link/button, let that element's own
+    // activation handler win (matches the click nested-anchor escape).
+    const inner = ev.target.closest("a[href], button, input, textarea, select, [contenteditable=true]");
+    if (inner && inner !== t && t.contains(inner)) return;
+    // Modifiers fall through to the browser's default (e.g. Cmd+Enter
+    // on a focused link still opens in a new tab).
+    if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return;
+    ev.preventDefault();
+    openModal(t.dataset.openRun);
+  });
+
+  // URL deep-link: `?run=<rid>` in the hash query opens the modal on
+  // boot and on any subsequent hashchange (so e.g. switching from
+  // /rankings?run=<rid> to /compare?run=<rid> still pops the modal).
+  // An optional `&tab=viz|impl` lets a deep link target a specific tab.
+  const syncFromHash = () => {
+    const q = location.hash.split("?")[1] || "";
+    const params = new URLSearchParams(q);
+    const rid = params.get("run");
+    const tab = params.get("tab");
+    if (rid) {
+      // Open in a microtask so the current view has time to render first.
+      setTimeout(() => {
+        openModal(rid);
+        // Only honour the tab hint when the modal actually opened — if the
+        // run_id was stale, openModal will have stripped ?run= for us and
+        // poking a tab on a closed modal is just noise.
+        if (_modalEl.classList.contains("open") && (tab === "viz" || tab === "impl")) {
+          _setTab(tab);
+        }
+      }, 0);
+    } else if (_modalEl.classList.contains("open")) {
+      closeModal();
+    }
+  };
+  window.addEventListener("hashchange", syncFromHash);
+  syncFromHash();
+}
+
+export function openModal(runId) {
+  if (!_modalEl) initModal();
+  const row = rowByRunId(runId);
+  if (!row) {
+    // Stale or invalid run_id (e.g. a shared link to a run that has
+    // since been removed from the dataset).  Strip the param so we
+    // don't keep retrying on every hashchange and don't leave a
+    // misleading ?run= in the address bar.
+    if (runId) _setHashRunParam(null);
+    return;
+  }
+  _currentRow = row;
+  _vizRenderedForRun = null;
+  _lastFocus = document.activeElement;
+  _fillModal(row);
+  // Default to Details on every open; Viz tab is lazy.
+  _setTab("details");
+  _modalEl.classList.add("open");
+  _modalEl.setAttribute("aria-hidden", "false");
+  document.body.style.overflow = "hidden";
+  const closeBtn = _modalEl.querySelector(".modal-close");
+  if (closeBtn) closeBtn.focus();
+  _setHashRunParam(runId);
+}
+
+export function closeModal() {
+  if (!_modalEl || !_modalEl.classList.contains("open")) return;
+  _destroyCharts();
+  _modalEl.classList.remove("open");
+  _modalEl.setAttribute("aria-hidden", "true");
+  document.body.style.overflow = "";
+  if (_lastFocus && typeof _lastFocus.focus === "function") {
+    _lastFocus.focus();
+  }
+  _lastFocus = null;
+  _currentRow = null;
+  _vizRenderedForRun = null;
+  _setHashRunParam(null);
+}
+
+// Update (or strip) the `run` query param inside the current hash using
+// history.replaceState so we don't fire a hashchange event — the router
+// would otherwise re-dispatch the current view and reset its scroll on
+// every modal open / close.
+function _setHashRunParam(runId) {
+  const raw = location.hash || "";
+  const stripped = raw.startsWith("#") ? raw.slice(1) : raw;
+  const [path, qs = ""] = stripped.split("?");
+  const params = new URLSearchParams(qs);
+  if (runId) params.set("run", runId);
+  else       params.delete("run");
+  const nextQs = params.toString();
+  const next = "#" + (path || "/") + (nextQs ? "?" + nextQs : "");
+  if (next !== raw) {
+    history.replaceState(null, "", location.pathname + location.search + next);
+  }
+}
+
+// ── Header / footer ──
+
+function _fillModal(row) {
+  const d = row.detail || {};
+  const meta = SUITE_META[row.suite];
+
+  _modalEl.querySelector(".modal-shell").setAttribute(
+    "data-suite", SUITE_LETTERS[row.suite] || ""
+  );
+
+  const titleEl = _modalEl.querySelector(".modal-title");
+  titleEl.textContent =
+    (d.hw_chip || row.chip || "—") +
+    (row.chip_count > 1 ? ` ×${row.chip_count}` : "");
+
+  // Drill-in link to the chip-detail page so users can see every run
+  // for this hardware configuration without leaving via the URL bar.
+  // Clicking the link triggers a hashchange which auto-closes the modal
+  // (see syncFromHash in initModal).
+  const chipLink = _modalEl.querySelector(".modal-chip-link");
+  chipLink.setAttribute("href", `#/chip/${chipSlug(row)}`);
+
+  const subEl = _modalEl.querySelector(".modal-subtitle");
+  const parts = [];
+  if (meta) {
+    parts.push(
+      `<span class="modal-suite-pill" data-suite="${esc(meta.letter)}">` +
+      `Suite ${esc(meta.letter)} · ${esc(meta.title)}` +
+      `</span>`
+    );
+  }
+  const fwLine = [row.framework, shortVersion(row.framework_version)].filter(Boolean).join(" ");
+  if (fwLine) parts.push(esc(fwLine));
+  if (row.precision) {
+    const fallback = row.precision_fallback
+      ? ` <span class="modal-warn">(fallback)</span>`
+      : "";
+    parts.push(esc(row.precision) + fallback);
+  }
+  if (row.date) parts.push(esc(fmtDate(row.date)));
+  subEl.innerHTML = parts.filter(Boolean).join(' <span class="sep">·</span> ');
+
+  // Footer: submission + script link.
+  const subInfo = _modalEl.querySelector(".modal-submission");
+  const handle = submitterHandle(row.submitted_by);
+  subInfo.textContent =
+    `Submission: ${row.submission || row.run_id || "—"}` +
+    (handle ? ` · by @${handle}` : "");
+
+  const scriptLink = _modalEl.querySelector(".modal-script-link");
+  const impl = row.impl || {};
+  let scriptUrl = null;
+  if (d.meta_reproduce_script) {
+    scriptUrl = `https://github.com/JuhaoLiang1997/AccelMark/blob/main/${d.meta_reproduce_script}`;
+    // If the result references an old (superseded) runner path, point to
+    // the current runner.py instead.
+    if (impl.supersedes_chain && Array.isArray(impl.supersedes_chain)) {
+      const parts = d.meta_reproduce_script.split("/");
+      const oldRunnerId = parts.length >= 2 ? parts[parts.length - 2] : null;
+      if (oldRunnerId && impl.supersedes_chain.includes(oldRunnerId) && impl.runner_url) {
+        scriptUrl = impl.runner_url;
+      }
+    }
+  }
+  if (scriptUrl) {
+    scriptLink.href = scriptUrl;
+    scriptLink.style.display = "";
+  } else {
+    scriptLink.removeAttribute("href");
+    scriptLink.style.display = "none";
+  }
+
+  // Hide tabs whose data is missing.
+  const vizTab  = _modalEl.querySelector('[data-tab="viz"]');
+  const implTab = _modalEl.querySelector('[data-tab="impl"]');
+  const hasViz = row.viz && row.viz.type && row.viz.type !== "none" && _vizHasAnyData(row.viz);
+  vizTab.style.display  = hasViz ? "" : "none";
+  implTab.style.display = row.impl ? "" : "none";
+
+  // Render Details up-front; Viz is lazy in _setTab().
+  _renderDetails(row, _modalEl.querySelector('[data-panel="details"]'));
+  _renderImpl(row,    _modalEl.querySelector('[data-panel="impl"]'));
+  // Clear viz panel; it'll be filled on first tab activation.
+  _modalEl.querySelector('[data-panel="viz"]').innerHTML = "";
+}
+
+function _vizHasAnyData(viz) {
+  if (!viz) return false;
+  for (const k of Object.keys(viz)) {
+    if (k === "type") continue;
+    const v = viz[k];
+    if (v && typeof v === "object" && Object.keys(v).length > 0) return true;
+  }
+  return false;
+}
+
+function _setTab(name) {
+  _activeTab = name;
+  for (const btn of _modalEl.querySelectorAll(".modal-tab")) {
+    btn.classList.toggle("active", btn.dataset.tab === name);
+    btn.setAttribute("aria-selected", btn.dataset.tab === name ? "true" : "false");
+  }
+  for (const panel of _modalEl.querySelectorAll(".modal-panel")) {
+    panel.classList.toggle("active", panel.dataset.panel === name);
+  }
+  if (name === "viz" && _currentRow) {
+    if (_vizRenderedForRun !== _currentRow.run_id) {
+      _renderViz(_currentRow);
+      _vizRenderedForRun = _currentRow.run_id;
+    }
+  }
+  // Reset body scroll on tab change so users see the top of each panel.
+  const body = _modalEl.querySelector(".modal-body");
+  if (body) body.scrollTop = 0;
+}
+
+// ── Details panel ──
+
+function _detailRow(label, v, opts = {}) {
+  if (v === null || v === undefined || v === "" || v === "unknown" || v === "Unknown") {
+    return `<div class="detail-row"><span class="detail-label">${esc(label)}</span><span class="detail-value null">—</span></div>`;
+  }
+  const cls = opts.cls ? " " + opts.cls : "";
+  const mono = opts.mono ? " mono" : "";
+  const display = opts.html ? String(v) : (opts.format ? opts.format(v) : esc(String(v)));
+  return `<div class="detail-row"><span class="detail-label">${esc(label)}</span><span class="detail-value${mono}${cls}">${display}</span></div>`;
+}
+
+function _detailSection(title, rows) {
+  const content = rows.filter(Boolean).join("");
+  if (!content) return "";
+  return `
+    <div class="detail-section">
+      <div class="detail-section-title">${esc(title)}</div>
+      ${content}
+    </div>
+  `;
+}
+
+function _renderDetails(row, panel) {
+  const d = row.detail || {};
+
+  const html = [
+    _detailSection("Hardware", [
+      _detailRow("Chip",     d.hw_chip),
+      _detailRow("Vendor",   d.hw_vendor),
+      _detailRow("Count",    d.hw_count),
+      _detailRow("Memory per chip", d.hw_memory_gb, { format: (v) => `${v} GB` }),
+      _detailRow("Intra-node interconnect", d.hw_interconnect_intra),
+      _detailRow("Inter-node interconnect", d.hw_interconnect_inter),
+      _detailRow("CPU", d.hw_cpu),
+      _detailRow("System memory", d.hw_system_memory_gb, { format: (v) => `${Number(v).toFixed(0)} GB` }),
+      _detailRow("PCIe generation", d.hw_pcie),
+      _detailRow("Network", d.hw_network),
+    ]),
+    _detailSection("Software", [
+      _detailRow("Framework",
+        d.sw_framework
+          ? (d.sw_framework + (d.sw_framework_version ? " " + d.sw_framework_version : ""))
+          : null),
+      _detailRow("PyTorch",        d.sw_pytorch, { mono: true }),
+      _detailRow("Driver version", d.sw_driver,  { mono: true }),
+      _detailRow("Runtime",        d.sw_runtime, { mono: true }),
+      _detailRow("OS",             d.sw_os),
+      _detailRow("Python",         d.sw_python,  { mono: true }),
+    ]),
+    _detailSection("Model", [
+      _detailRow("Model ID",   d.model_id,       { mono: true }),
+      _detailRow("Revision",   d.model_revision, { mono: true }),
+      d.model_name
+        ? _detailRow("Actual model",
+            d.model_name + ` <span class="muted-note">(substituted variant)</span>`,
+            { html: true })
+        : null,
+      d.model_note ? _detailRow("Model note", d.model_note) : null,
+      _detailRow("Architecture", d.model_arch),
+      _detailRow("Parameters",   d.model_params_b, { format: (v) => `${v}B` }),
+      _detailRow("Precision",    d.model_precision),
+      d.model_effective_dtype
+        ? _detailRow("Compute dtype",
+            d.model_effective_dtype +
+              (row.precision_emulated
+                ? ` <span class="muted-note">(${esc(row.precision)} weights, ${esc(d.model_effective_dtype)} compute)</span>`
+                : ""),
+            { html: true })
+        : null,
+      d.model_quant_method ? _detailRow("Quantization", d.model_quant_method) : null,
+      _detailRow("Format", d.model_format),
+      d.model_source === "local"
+        ? _detailRow("Model source", "local override", {})
+        : null,
+    ]),
+    _detailSection("Run settings", [
+      d.run_scenarios
+        ? _detailRow("Scenarios", Array.isArray(d.run_scenarios) ? d.run_scenarios.join(", ") : d.run_scenarios)
+        : null,
+      d.run_chip_counts
+        ? _detailRow("Chip counts tested", Array.isArray(d.run_chip_counts) ? d.run_chip_counts.join(", ") : d.run_chip_counts)
+        : null,
+      _detailRow("Runs per config",       d.run_num_runs),
+      d.run_tp != null ? _detailRow("Tensor parallel size",   d.run_tp) : null,
+      d.run_pp != null ? _detailRow("Pipeline parallel size", d.run_pp) : null,
+      d.run_dp != null ? _detailRow("Data parallel size",     d.run_dp) : null,
+    ]),
+    _detailSection("Accuracy", [
+      _detailRow("Subset score", d.acc_score, {
+        format: (v) => Number(v).toFixed(2),
+        cls: d.acc_valid ? "good" : "warn",
+      }),
+      _detailRow("Baseline delta", d.acc_baseline_delta, {
+        format: (v) => (Number(v) >= 0 ? "+" : "") + Number(v).toFixed(3),
+      }),
+      d.acc_valid != null
+        ? _detailRow("Valid",
+            d.acc_valid ? `<span class="detail-value good">Yes</span>` : `<span class="detail-value warn">No</span>`,
+            { html: true })
+        : null,
+      d.acc_notes ? _detailRow("Notes", d.acc_notes) : null,
+    ]),
+    _detailSection("Metadata", [
+      _detailRow("Submitted by",    d.meta_submitted_by),
+      _detailRow("Submission type", d.meta_submission_type),
+      _detailRow("Date",            d.meta_date),
+      d.meta_elapsed_min != null
+        ? _detailRow("Benchmark duration", d.meta_elapsed_min, { format: (v) => `${Number(v).toFixed(1)} min` })
+        : null,
+      d.meta_model_load_sec != null
+        ? _detailRow("Model load time", d.meta_model_load_sec, { format: (v) => `${Number(v).toFixed(1)} s` })
+        : null,
+      d.meta_notes ? _detailRow("Notes", d.meta_notes) : null,
+    ]),
+  ].join("");
+
+  panel.innerHTML = html;
+}
+
+// ── Implementation panel ──
+
+function _renderImpl(row, panel) {
+  const impl = row.impl;
+  if (!impl) { panel.innerHTML = ""; return; }
+  const isDeprecated = !!impl.deprecated_by;
+
+  panel.innerHTML = [
+    isDeprecated
+      ? `<div class="impl-deprecation">
+           ⚠ This runner has been superseded by
+           <span class="mono">${esc(impl.deprecated_by)}</span>.
+           Results using this runner remain valid — the code is unchanged.
+         </div>`
+      : "",
+    _detailSection("Runner", [
+      _detailRow("ID",           impl.id,           { mono: true }),
+      _detailRow("Platform",     impl.platform),
+      _detailRow("Framework",    impl.framework),
+      _detailRow("Name",         impl.name),
+      _detailRow("Submitted by", impl.submitted_by),
+      _detailRow("Created",      impl.created),
+      impl.supersedes_chain && impl.supersedes_chain.length
+        ? _detailRow("Replaces", impl.supersedes_chain[0], { mono: true })
+        : null,
+      impl.deprecated_by ? _detailRow("Deprecated by", impl.deprecated_by, { mono: true }) : null,
+    ]),
+    (impl.description || impl.notes)
+      ? `<div class="detail-section">
+           <div class="detail-section-title">Description</div>
+           ${impl.description ? `<div class="impl-prose">${esc(impl.description)}</div>` : ""}
+           ${impl.notes ? `<div class="detail-row"><span class="detail-label">Notes</span><span class="detail-value">${esc(impl.notes)}</span></div>` : ""}
+         </div>`
+      : "",
+    impl.github_url || impl.runner_url
+      ? `<div class="detail-section">
+           <div class="detail-section-title">Source</div>
+           ${impl.github_url ? `
+             <div class="detail-row">
+               <span class="detail-label">Runner folder</span>
+               <a class="detail-link mono" href="${esc(impl.github_url)}" target="_blank" rel="noopener">
+                 runners/${esc(impl.id)} ↗
+               </a>
+             </div>` : ""}
+           ${impl.runner_url ? `
+             <div class="detail-row">
+               <span class="detail-label">runner.py</span>
+               <a class="detail-link" href="${esc(impl.runner_url)}" target="_blank" rel="noopener">View source ↗</a>
+             </div>` : ""}
+         </div>`
+      : "",
+  ].filter(Boolean).join("");
+}
+
+// ── Visualize panel ──
+
+// _renderViz lazily fills the Visualize tab with the right chart bundle
+// for `row.viz.type`.  `panel` defaults to the modal's viz panel for the
+// production code path; tests pass a fake element to drive the dispatch
+// + per-suite renderer fallbacks without standing up the full modal DOM.
+function _renderViz(row, panel) {
+  if (!panel) panel = _modalEl.querySelector('[data-panel="viz"]');
+  panel.innerHTML = "";
+
+  if (typeof window.Chart !== "function") {
+    panel.innerHTML = `<div class="viz-empty">Charting library failed to load.</div>`;
+    return;
+  }
+
+  const viz = row.viz || {};
+  if (!_vizHasAnyData(viz)) {
+    panel.innerHTML = `<div class="viz-empty">No visualization data for this run.</div>`;
+    return;
+  }
+
+  switch (viz.type) {
+    case "suite_A": _renderSuiteAB(panel, row, viz, "blue"); break;
+    case "suite_B": _renderSuiteB (panel, row, viz);          break;
+    case "suite_C": _renderSuiteC (panel, row, viz);          break;
+    case "suite_D": _renderSuiteD (panel, row, viz);          break;
+    case "suite_E": _renderSuiteE (panel, row, viz);          break;
+    case "suite_F": _renderSuiteAB(panel, row, viz, "purple"); break;
+    case "suite_G": _renderSuiteG (panel, row, viz);          break;
+    case "sustained": _renderSustained(panel, row, viz); break;
+    default:
+      panel.innerHTML = `<div class="viz-empty">Visualization for type "${esc(viz.type || "unknown")}" is not yet supported.</div>`;
+  }
+
+  // Suite-level rows often nest a sustained run inside the main viz.
+  if (viz.type !== "sustained" && viz.sustained) {
+    _renderSustained(panel, row, viz.sustained);
+  }
+}
+
+async function _downloadVizChart(btn) {
+  const wrap = btn.closest(".viz-chart-wrap");
+  const canvas = wrap && wrap.querySelector("canvas");
+  if (!canvas) {
+    flashButtonLabel(btn, "Failed", { holdMs: 2000, className: "is-failed", labelSelector: ".chart-dl-btn-label" });
+    return;
+  }
+  // Filename anatomy: <run_id>-<section-slug>.png
+  // We scan backwards through the wrap's preceding siblings for the
+  // nearest .viz-section-title — that's the heading immediately above
+  // the chart in the DOM (e.g. "Online — TTFT & TPOT by QPS"), which
+  // gives the user a self-describing filename without each _mkCanvas
+  // caller having to pass a name.
+  let sectionSlug = btn.dataset.chartDl || "chart";
+  let prev = wrap.previousElementSibling;
+  while (prev) {
+    if (prev.classList && prev.classList.contains("viz-section-title")) {
+      const text = (prev.textContent || "").trim();
+      if (text) {
+        sectionSlug = text.toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/^-+|-+$/g, "")
+          .slice(0, 60);
+      }
+      break;
+    }
+    prev = prev.previousElementSibling;
+  }
+  const ridSlug = (_currentRow?.run_id || "run").replace(/[^a-zA-Z0-9_-]+/g, "_");
+  const ok = await downloadCanvasAsPng(canvas, { filename: `${ridSlug}-${sectionSlug}.png` });
+  flashButtonLabel(btn, ok ? "Saved" : "Failed", {
+    holdMs: ok ? 1400 : 2200,
+    className: ok ? "is-saved" : "is-failed",
+    labelSelector: ".chart-dl-btn-label",
+  });
+}
+
+function _destroyCharts() {
+  for (const c of _activeCharts) {
+    try { c.destroy(); } catch (e) { /* ignore */ }
+  }
+  _activeCharts = [];
+}
+
+// ── Chart utilities ──
+
+function _section(label) {
+  const d = document.createElement("div");
+  d.className = "viz-section-title";
+  d.textContent = label;
+  return d;
+}
+
+function _statChips(items) {
+  const grid = document.createElement("div");
+  grid.className = "viz-stat-chips";
+  for (const { label, value, cls } of items) {
+    const card = document.createElement("div");
+    card.className = "viz-stat-chip" + (cls ? " " + cls : "");
+    card.innerHTML = `
+      <div class="viz-stat-label">${esc(label)}</div>
+      <div class="viz-stat-value">${value != null ? esc(String(value)) : "—"}</div>
+    `;
+    grid.appendChild(card);
+  }
+  return grid;
+}
+
+// `name` is a stable slug used as the PNG filename hint when the user
+// clicks the download button — defaults to "chart" so callers that
+// don't bother still get a sensible download.  Wrap is `position:
+// relative` (modal.css) so the absolutely-positioned download button
+// anchors against the canvas area.
+function _mkCanvas(height, name = "chart") {
+  const wrap = document.createElement("div");
+  wrap.className = "viz-chart-wrap";
+  wrap.style.height = height + "px";
+  const canvas = document.createElement("canvas");
+  wrap.appendChild(canvas);
+  const dl = document.createElement("button");
+  dl.className = "chart-dl-btn";
+  dl.type = "button";
+  dl.dataset.chartDl = name;
+  dl.title = "Download this chart as a PNG image";
+  dl.innerHTML = `
+    <span class="chart-dl-btn-icon" aria-hidden="true">↓</span>
+    <span class="chart-dl-btn-label">PNG</span>
+  `;
+  wrap.appendChild(dl);
+  return { wrap, canvas };
+}
+
+function _baseOpts(yLabel, yFormat, xLabel) {
+  const C = chartColors();
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { display: false } },
+    scales: {
+      x: {
+        ticks: { color: C.text, font: { size: 11 } },
+        grid:  { color: C.grid },
+        title: { display: !!xLabel, text: xLabel || "", color: C.text, font: { size: 11 } },
+      },
+      y: {
+        ticks: { color: C.text, font: { size: 11 }, callback: yFormat || ((v) => v) },
+        grid:  { color: C.grid },
+        title: { display: !!yLabel, text: yLabel || "", color: C.text, font: { size: 11 } },
+      },
+    },
+  };
+}
+
+function _legend(items) {
+  const leg = document.createElement("div");
+  leg.className = "viz-legend";
+  leg.innerHTML = items.map(({ color, label }) => `
+    <span class="viz-legend-item">
+      <span class="viz-legend-swatch" style="background:${color}"></span>
+      ${esc(label)}
+    </span>
+  `).join("");
+  return leg;
+}
+
+function _fmtKMs(v) {
+  if (v == null) return "";
+  if (v >= 1000) return (v / 1000).toFixed(1) + "s";
+  return v + "ms";
+}
+
+// ── Per-suite renderers ──
+
+// Shared offline + online + interactive + speculative + burst block.
+// Used for suite_A and suite_F (just changes the accent color).
+function _renderSuiteAB(el, row, viz, accent) {
+  const C = chartColors();
+  const accentHex = accent === "purple" ? C.purple : C.blue;
+
+  if (viz.offline && viz.offline.labels && viz.offline.labels.length) {
+    el.appendChild(_section("Offline — throughput by concurrency"));
+    el.appendChild(_statChips([
+      { label: "Peak throughput", value: row.offline_throughput
+          ? row.offline_throughput.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null, cls: "accent" },
+      { label: "Peak memory",  value: row.peak_memory_gb ? row.peak_memory_gb.toFixed(1) + " GB" : null },
+      { label: "Memory util.", value: row.memory_utilization_pct ? row.memory_utilization_pct.toFixed(1) + "%" : null },
+    ]));
+    const { wrap, canvas } = _mkCanvas(190);
+    el.appendChild(wrap);
+    _activeCharts.push(new window.Chart(canvas, {
+      type: "bar",
+      data: {
+        labels: viz.offline.labels,
+        datasets: [{
+          label: "Throughput (tok/s)",
+          data: viz.offline.throughput,
+          backgroundColor: accentHex + "99",
+          borderColor:     accentHex,
+          borderWidth: 1, borderRadius: 3,
+        }],
+      },
+      options: _baseOpts("tokens / sec", (v) => v.toLocaleString(), "concurrency"),
+    }));
+  }
+
+  if (viz.online && viz.online.labels && viz.online.labels.length) {
+    el.appendChild(_section("Online — TTFT & TPOT by QPS"));
+    _appendSlaRow(el, viz.online);
+    const { wrap, canvas } = _mkCanvas(210);
+    el.appendChild(wrap);
+    _activeCharts.push(new window.Chart(canvas, {
+      type: "line",
+      data: {
+        labels: viz.online.labels,
+        datasets: [
+          { label: "TTFT p50", data: viz.online.ttft_p50, borderColor: accentHex, backgroundColor: accentHex + "33", tension: 0.3, pointRadius: 4, fill: false },
+          { label: "TTFT p90", data: viz.online.ttft_p90, borderColor: C.coral,   backgroundColor: C.coral + "33",   tension: 0.3, pointRadius: 4, fill: false, borderDash: [4, 3] },
+          { label: "TPOT p50", data: viz.online.tpot_p50, borderColor: C.teal,    backgroundColor: C.teal + "33",    tension: 0.3, pointRadius: 4, fill: false },
+        ],
+      },
+      options: _baseOpts("latency (ms)", _fmtKMs, "target QPS"),
+    }));
+    el.appendChild(_legend([
+      { color: accentHex, label: "TTFT p50" },
+      { color: C.coral,   label: "TTFT p90" },
+      { color: C.teal,    label: "TPOT p50" },
+    ]));
+  }
+
+  if (viz.interactive && viz.interactive.ttft_p50 != null) {
+    el.appendChild(_section("Interactive — single request latency"));
+    el.appendChild(_statChips([
+      { label: "TTFT p50", value: _ms(viz.interactive.ttft_p50), cls: "accent" },
+      { label: "TTFT p90", value: _ms(viz.interactive.ttft_p90) },
+      { label: "TTFT p99", value: _ms(viz.interactive.ttft_p99) },
+      { label: "TPOT p50", value: _ms(viz.interactive.tpot_p50), cls: "good" },
+      { label: "TPOT p99", value: _ms(viz.interactive.tpot_p99) },
+    ]));
+  }
+
+  if (viz.speculative && viz.speculative.offline_tok_per_sec != null) {
+    el.appendChild(_section("Speculative decoding"));
+    const accPct = viz.speculative.acceptance_rate != null
+      ? (viz.speculative.acceptance_rate * 100).toFixed(1) + "%"
+      : null;
+    el.appendChild(_statChips([
+      { label: "Speculative tok/s", value: viz.speculative.offline_tok_per_sec
+          ? viz.speculative.offline_tok_per_sec.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null, cls: "warn" },
+      { label: "Acceptance rate", value: accPct, cls: accPct ? "good" : null },
+      { label: "Mean accepted",   value: viz.speculative.mean_accepted_tokens != null
+          ? viz.speculative.mean_accepted_tokens.toFixed(2) + " tok" : null },
+    ]));
+  }
+
+  if (viz.burst) {
+    el.appendChild(_section("Burst load"));
+    const degr = viz.burst.burst_degradation_ratio;
+    const degrCls = degr != null ? (degr < 2 ? "good" : degr < 5 ? "warn" : "bad") : null;
+    el.appendChild(_statChips([
+      { label: "Degradation ratio", value: degr != null ? degr.toFixed(2) + "×" : null, cls: degrCls },
+      { label: "Steady p99 TTFT",   value: viz.burst.steady_ttft_p99_ms != null ? viz.burst.steady_ttft_p99_ms.toFixed(0) + " ms" : null },
+      { label: "Burst p99 TTFT",    value: viz.burst.burst_ttft_p99_ms  != null ? viz.burst.burst_ttft_p99_ms.toFixed(0)  + " ms" : null, cls: "bad" },
+      { label: "SLA met during burst", value: viz.burst.sla_met_during_burst != null ? (viz.burst.sla_met_during_burst ? "✓" : "✗") : null,
+        cls: viz.burst.sla_met_during_burst ? "good" : "bad" },
+    ]));
+  }
+}
+
+function _renderSuiteB(el, row, viz) {
+  const C = chartColors();
+  if (viz.offline && viz.offline.labels && viz.offline.labels.length) {
+    el.appendChild(_section("Offline — total & per-chip throughput by concurrency"));
+    el.appendChild(_statChips([
+      { label: "Peak total",   value: row.offline_throughput      ? row.offline_throughput.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null, cls: "accent" },
+      { label: "Per chip",     value: row.tokens_per_sec_per_chip ? row.tokens_per_sec_per_chip.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null, cls: "good" },
+      { label: "Peak memory",  value: row.peak_memory_gb          ? row.peak_memory_gb.toFixed(1) + " GB" : null },
+      { label: "Memory util.", value: row.memory_utilization_pct  ? row.memory_utilization_pct.toFixed(1) + "%" : null },
+    ]));
+    const { wrap, canvas } = _mkCanvas(210);
+    el.appendChild(wrap);
+    _activeCharts.push(new window.Chart(canvas, {
+      type: "bar",
+      data: {
+        labels: viz.offline.labels,
+        datasets: [
+          { label: "Total (tok/s)",   data: viz.offline.throughput,           backgroundColor: C.blue + "99", borderColor: C.blue, borderWidth: 1, borderRadius: 3 },
+          { label: "Per chip (tok/s)",data: viz.offline.throughput_per_chip,  backgroundColor: C.teal + "99", borderColor: C.teal, borderWidth: 1, borderRadius: 3 },
+        ],
+      },
+      options: {
+        responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { display: true, labels: { color: C.text, font: { size: 11 } } } },
+        scales: {
+          x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid }, title: { display: true, text: "concurrency", color: C.text, font: { size: 11 } } },
+          y: { ticks: { color: C.text, font: { size: 11 }, callback: (v) => v.toLocaleString() }, grid: { color: C.grid }, title: { display: true, text: "tokens / sec", color: C.text, font: { size: 11 } } },
+        },
+      },
+    }));
+  }
+
+  if (viz.online && viz.online.labels && viz.online.labels.length) {
+    el.appendChild(_section("Online — TTFT & TPOT by QPS"));
+    _appendSlaRow(el, viz.online);
+    const { wrap, canvas } = _mkCanvas(210);
+    el.appendChild(wrap);
+    _activeCharts.push(new window.Chart(canvas, {
+      type: "line",
+      data: {
+        labels: viz.online.labels,
+        datasets: [
+          { label: "TTFT p50", data: viz.online.ttft_p50, borderColor: C.blue,  backgroundColor: C.blue  + "33", tension: 0.3, pointRadius: 4, fill: false },
+          { label: "TTFT p90", data: viz.online.ttft_p90, borderColor: C.coral, backgroundColor: C.coral + "33", tension: 0.3, pointRadius: 4, fill: false, borderDash: [4, 3] },
+          { label: "TPOT p50", data: viz.online.tpot_p50, borderColor: C.teal,  backgroundColor: C.teal  + "33", tension: 0.3, pointRadius: 4, fill: false },
+        ],
+      },
+      options: _baseOpts("latency (ms)", _fmtKMs, "target QPS"),
+    }));
+    el.appendChild(_legend([
+      { color: C.blue,  label: "TTFT p50" },
+      { color: C.coral, label: "TTFT p90" },
+      { color: C.teal,  label: "TPOT p50" },
+    ]));
+  }
+
+  if (viz.burst) {
+    el.appendChild(_section("Burst load"));
+    const degr = viz.burst.burst_degradation_ratio;
+    const degrCls = degr != null ? (degr < 2 ? "good" : degr < 5 ? "warn" : "bad") : null;
+    el.appendChild(_statChips([
+      { label: "Degradation ratio", value: degr != null ? degr.toFixed(2) + "×" : null, cls: degrCls },
+      { label: "Steady p99 TTFT",   value: viz.burst.steady_ttft_p99_ms != null ? viz.burst.steady_ttft_p99_ms.toFixed(0) + " ms" : null },
+      { label: "Burst p99 TTFT",    value: viz.burst.burst_ttft_p99_ms  != null ? viz.burst.burst_ttft_p99_ms.toFixed(0)  + " ms" : null, cls: "bad" },
+      { label: "SLA met during burst", value: viz.burst.sla_met_during_burst != null ? (viz.burst.sla_met_during_burst ? "✓" : "✗") : null,
+        cls: viz.burst.sla_met_during_burst ? "good" : "bad" },
+    ]));
+  }
+}
+
+function _renderSuiteC(el, row, viz) {
+  if (!viz.precisions || !viz.precisions.length) {
+    el.innerHTML = `<div class="viz-empty">No quantization data available.</div>`;
+    return;
+  }
+  const C = chartColors();
+  const PREC_COLORS = { BF16: C.teal, FP8: C.blue, W8A8: C.amber, W8A16: C.coral, W4A16: C.green };
+  const precColor = (p) => PREC_COLORS[p] || C.gray;
+
+  el.appendChild(_section("Offline — quantization efficiency"));
+
+  // Per-format summary table.
+  const tbl = document.createElement("table");
+  tbl.className = "viz-quant-table";
+  tbl.innerHTML = `
+    <thead>
+      <tr>
+        <th>Format</th>
+        <th>Throughput</th>
+        <th>Speedup</th>
+        <th>Accuracy</th>
+        <th>Quality eff.</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${viz.precisions.map((prec, i) => {
+        const thr   = viz.throughput[i];
+        const spd   = viz.speedup ? viz.speedup[i] : null;
+        const acc   = viz.accuracies ? viz.accuracies[i] : null;
+        const qe    = viz.quality_efficiency ? viz.quality_efficiency[i] : null;
+        const valid = viz.acc_valid ? viz.acc_valid[i] : null;
+        const accCls = valid === false ? "bad" : valid === true ? "good" : "muted";
+        return `
+          <tr>
+            <td><strong>${esc(prec)}</strong></td>
+            <td class="tnum">${thr != null ? esc(thr.toLocaleString(undefined, { maximumFractionDigits: 0 })) + " tok/s" : "—"}</td>
+            <td class="tnum">${spd != null ? esc(spd.toFixed(2)) + "×" : "—"}</td>
+            <td class="tnum ${accCls}">${acc != null ? esc(acc.toFixed(4)) : "—"}</td>
+            <td class="tnum">${qe  != null ? esc(qe.toLocaleString(undefined, { maximumFractionDigits: 0 })) : "—"}</td>
+          </tr>
+        `;
+      }).join("")}
+    </tbody>
+  `;
+  el.appendChild(tbl);
+
+  // Throughput bar by format.
+  const { wrap: w1, canvas: c1 } = _mkCanvas(200);
+  el.appendChild(w1);
+  _activeCharts.push(new window.Chart(c1, {
+    type: "bar",
+    data: {
+      labels: viz.precisions,
+      datasets: [{
+        label: "Throughput",
+        data: viz.throughput,
+        backgroundColor: viz.precisions.map((p) => precColor(p) + "99"),
+        borderColor:     viz.precisions.map((p) => precColor(p)),
+        borderWidth: 1, borderRadius: 3,
+      }],
+    },
+    options: _baseOpts("tokens / sec", (v) => v.toLocaleString(undefined, { maximumFractionDigits: 0 }), "precision"),
+  }));
+
+  if (viz.online_by_precision && viz.online_by_precision.length) {
+    el.appendChild(_section("Online — TTFT p99 by QPS across formats"));
+    // qps_labels and sla_met are both optional sidecars in the per-format
+    // record — fall back gracefully so a partial fixture (e.g. forgot to
+    // emit sla_met, or this format has no online block at all) doesn't
+    // turn the whole Visualize tab white with a TypeError.
+    const qpsLabels = (viz.online_by_precision[0] && viz.online_by_precision[0].qps_labels) || [];
+    const { wrap, canvas } = _mkCanvas(240);
+    el.appendChild(wrap);
+    _activeCharts.push(new window.Chart(canvas, {
+      type: "line",
+      data: {
+        labels: qpsLabels,
+        datasets: viz.online_by_precision.map((fp) => {
+          const slaPoints = Array.isArray(fp.sla_met) ? fp.sla_met : [];
+          return {
+            label: fp.precision,
+            data:  fp.ttft_p99 || [],
+            borderColor:     precColor(fp.precision),
+            backgroundColor: precColor(fp.precision) + "22",
+            pointBackgroundColor: slaPoints.map((m) => (m === false ? C.red : precColor(fp.precision))),
+            pointRadius: 5, tension: 0.2, fill: false,
+          };
+        }),
+      },
+      options: {
+        responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { display: true, labels: { color: C.text, font: { size: 11 }, boxWidth: 12 } } },
+        scales: {
+          x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid }, title: { display: true, text: "target QPS", color: C.text, font: { size: 11 } } },
+          y: { ticks: { color: C.text, font: { size: 11 }, callback: (v) => v + "ms" }, grid: { color: C.grid }, title: { display: true, text: "TTFT p99 (ms)", color: C.text, font: { size: 11 } } },
+        },
+      },
+    }));
+  }
+}
+
+function _renderSuiteD(el, row, viz) {
+  const C = chartColors();
+
+  if (viz.interactive && viz.interactive.ttft_p50 != null) {
+    const iv = viz.interactive;
+    el.appendChild(_section("Long-context latency (~28K input tokens)"));
+    el.appendChild(_statChips([
+      { label: "TTFT p50", value: _ms(iv.ttft_p50, 0), cls: "accent" },
+      { label: "TTFT p90", value: _ms(iv.ttft_p90, 0), cls: "accent" },
+      { label: "TTFT p99", value: _ms(iv.ttft_p99, 0), cls: "accent" },
+      { label: "TPOT p50", value: _ms(iv.tpot_p50, 1), cls: "good" },
+      { label: "TPOT p90", value: _ms(iv.tpot_p90, 1), cls: "good" },
+      { label: "TPOT p99", value: _ms(iv.tpot_p99, 1), cls: "good" },
+    ]));
+    const { wrap, canvas } = _mkCanvas(240);
+    el.appendChild(wrap);
+    _activeCharts.push(new window.Chart(canvas, {
+      type: "bar",
+      data: {
+        labels: ["TTFT p50", "TTFT p90", "TTFT p99", "TPOT p50", "TPOT p90", "TPOT p99"],
+        datasets: [
+          { label: "TTFT — prefill", data: [iv.ttft_p50, iv.ttft_p90, iv.ttft_p99, null, null, null],
+            backgroundColor: C.blue + "99", borderColor: C.blue, borderWidth: 1, borderRadius: 3 },
+          { label: "TPOT — decode",  data: [null, null, null, iv.tpot_p50, iv.tpot_p90, iv.tpot_p99],
+            backgroundColor: C.teal + "99", borderColor: C.teal, borderWidth: 1, borderRadius: 3 },
+        ],
+      },
+      options: {
+        indexAxis: "y",
+        responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { display: true, labels: { color: C.text, font: { size: 11 } } } },
+        scales: {
+          x: { ticks: { color: C.text, font: { size: 11 }, callback: _fmtKMs }, grid: { color: C.grid }, title: { display: true, text: "latency", color: C.text, font: { size: 11 } } },
+          y: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
+        },
+      },
+    }));
+  }
+
+  if (viz.offline && viz.offline.labels && viz.offline.labels.length) {
+    el.appendChild(_section("Offline throughput (~28K context)"));
+    el.appendChild(_statChips([
+      { label: "Peak throughput", value: row.offline_throughput ? row.offline_throughput.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null, cls: "accent" },
+      { label: "Peak memory",     value: row.peak_memory_gb    ? row.peak_memory_gb.toFixed(1) + " GB" : null },
+    ]));
+    const { wrap, canvas } = _mkCanvas(160);
+    el.appendChild(wrap);
+    _activeCharts.push(new window.Chart(canvas, {
+      type: "bar",
+      data: {
+        labels: viz.offline.labels,
+        datasets: [{ data: viz.offline.throughput, backgroundColor: C.blue + "99", borderColor: C.blue, borderWidth: 1, borderRadius: 3 }],
+      },
+      options: _baseOpts("tokens / sec", (v) => v.toLocaleString(), "concurrency"),
+    }));
+  }
+}
+
+function _renderSuiteE(el, row, viz) {
+  const C = chartColors();
+  const counts = viz.chip_counts || [];
+  const labels = counts.map((c) => c + "× GPU");
+
+  el.appendChild(_section("Multi-chip scaling"));
+  el.appendChild(_statChips([
+    { label: "1× baseline",     value: viz.throughput[0] ? viz.throughput[0].toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null, cls: "accent" },
+    { label: "2× throughput",   value: viz.throughput[1] ? viz.throughput[1].toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null },
+    { label: "4× throughput",   value: viz.throughput[2] ? viz.throughput[2].toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null },
+    { label: "2× efficiency",   value: row.scaling_efficiency_2x != null ? (row.scaling_efficiency_2x * 100).toFixed(1) + "%" : null, cls: row.scaling_efficiency_2x >= 0.8 ? "good" : "warn" },
+    { label: "4× efficiency",   value: row.scaling_efficiency_4x != null ? (row.scaling_efficiency_4x * 100).toFixed(1) + "%" : null,
+      cls: row.scaling_efficiency_4x >= 0.8 ? "good" : row.scaling_efficiency_4x >= 0.5 ? "warn" : "bad" },
+  ]));
+
+  const { wrap: w1, canvas: c1 } = _mkCanvas(190);
+  el.appendChild(w1);
+  _activeCharts.push(new window.Chart(c1, {
+    type: "bar",
+    data: { labels, datasets: [{ data: viz.throughput, backgroundColor: C.blue + "99", borderColor: C.blue, borderWidth: 1, borderRadius: 3 }] },
+    options: _baseOpts("tokens / sec", (v) => v ? v.toLocaleString(undefined, { maximumFractionDigits: 0 }) : ""),
+  }));
+
+  el.appendChild(_section("Scaling efficiency vs ideal"));
+  const ideal  = counts.map(() => 100);
+  const target = counts.map(() => 80);
+  const { wrap: w2, canvas: c2 } = _mkCanvas(220);
+  el.appendChild(w2);
+  _activeCharts.push(new window.Chart(c2, {
+    type: "line",
+    data: { labels, datasets: [
+      { label: "Actual",         data: viz.efficiency_pct, borderColor: C.blue, backgroundColor: C.blue + "33", tension: 0.3, pointRadius: 5, pointBackgroundColor: C.blue, fill: true },
+      { label: "Linear ideal",   data: ideal,              borderColor: C.gray, borderDash: [6, 4], tension: 0, pointRadius: 0, fill: false },
+      { label: "Good (80%)",     data: target,             borderColor: C.teal, borderDash: [3, 3], tension: 0, pointRadius: 0, fill: false },
+    ]},
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false } },
+      scales: {
+        x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
+        y: { min: 0, max: 110, ticks: { color: C.text, font: { size: 11 }, callback: (v) => v + "%" }, grid: { color: C.grid }, title: { display: true, text: "efficiency %", color: C.text, font: { size: 11 } } },
+      },
+    },
+  }));
+  el.appendChild(_legend([
+    { color: C.blue, label: "Actual"        },
+    { color: C.gray, label: "Linear ideal"  },
+    { color: C.teal, label: "Good (80%)"    },
+  ]));
+
+  if (viz.throughput_per_chip && viz.throughput_per_chip.some((v) => v != null)) {
+    el.appendChild(_section("Throughput per chip"));
+    const { wrap: w3, canvas: c3 } = _mkCanvas(160);
+    el.appendChild(w3);
+    _activeCharts.push(new window.Chart(c3, {
+      type: "bar",
+      data: { labels, datasets: [{ data: viz.throughput_per_chip, backgroundColor: C.teal + "99", borderColor: C.teal, borderWidth: 1, borderRadius: 3 }] },
+      options: _baseOpts("tok/s per chip", (v) => v ? v.toLocaleString(undefined, { maximumFractionDigits: 0 }) : ""),
+    }));
+  }
+}
+
+function _renderSuiteG(el, row, viz) {
+  const C = chartColors();
+  const accentHex = "#2dd4bf";
+
+  if (viz.offline && viz.offline.labels && viz.offline.labels.length) {
+    el.appendChild(_section("Offline — throughput by concurrency"));
+    el.appendChild(_statChips([
+      { label: "Peak throughput", value: row.offline_throughput ? row.offline_throughput.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null, cls: "good" },
+      { label: "Peak memory",     value: row.peak_memory_gb    ? row.peak_memory_gb.toFixed(1) + " GB" : null },
+    ]));
+    const { wrap, canvas } = _mkCanvas(190);
+    el.appendChild(wrap);
+    _activeCharts.push(new window.Chart(canvas, {
+      type: "bar",
+      data: {
+        labels: viz.offline.labels,
+        datasets: [{ label: "Throughput (tok/s)", data: viz.offline.throughput, backgroundColor: accentHex + "99", borderColor: accentHex, borderWidth: 1, borderRadius: 3 }],
+      },
+      options: _baseOpts("tokens / sec", (v) => v.toLocaleString(), "concurrency"),
+    }));
+  }
+
+  if (viz.online && viz.online.labels && viz.online.labels.length) {
+    el.appendChild(_section("Online — TTFT & TPOT by QPS"));
+    _appendSlaRow(el, viz.online);
+    const { wrap, canvas } = _mkCanvas(210);
+    el.appendChild(wrap);
+    _activeCharts.push(new window.Chart(canvas, {
+      type: "line",
+      data: {
+        labels: viz.online.labels,
+        datasets: [
+          { label: "TTFT p50", data: viz.online.ttft_p50, borderColor: accentHex, backgroundColor: accentHex + "33", tension: 0.3, pointRadius: 4, fill: false },
+          { label: "TTFT p90", data: viz.online.ttft_p90, borderColor: C.coral,    backgroundColor: C.coral + "33",   tension: 0.3, pointRadius: 4, fill: false, borderDash: [4, 3] },
+          { label: "TPOT p50", data: viz.online.tpot_p50, borderColor: C.teal,     backgroundColor: C.teal + "33",    tension: 0.3, pointRadius: 4, fill: false },
+        ],
+      },
+      options: _baseOpts("latency (ms)", _fmtKMs, "target QPS"),
+    }));
+    el.appendChild(_legend([
+      { color: accentHex, label: "TTFT p50" },
+      { color: C.coral,   label: "TTFT p90" },
+      { color: C.teal,    label: "TPOT p50" },
+    ]));
+  }
+
+  if (viz.interactive && viz.interactive.ttft_p50 != null) {
+    el.appendChild(_section("Interactive — single request latency"));
+    el.appendChild(_statChips([
+      { label: "TTFT p50", value: _ms(viz.interactive.ttft_p50, 1), cls: "good" },
+      { label: "TTFT p90", value: _ms(viz.interactive.ttft_p90, 1) },
+      { label: "TTFT p99", value: _ms(viz.interactive.ttft_p99, 1) },
+      { label: "TPOT p50", value: _ms(viz.interactive.tpot_p50, 1) },
+      { label: "TPOT p99", value: _ms(viz.interactive.tpot_p99, 1) },
+    ]));
+  }
+
+  if (viz.runtime_metrics) {
+    const rm = viz.runtime_metrics;
+    const items = [];
+    if (rm.expert_load_balance != null) items.push({ label: "Expert load balance (std)", value: rm.expert_load_balance.toFixed(3) });
+    if (rm.mean_experts_per_token != null) items.push({ label: "Mean experts/token", value: rm.mean_experts_per_token.toFixed(1) });
+    if (items.length) {
+      el.appendChild(_section("MoE runtime metrics"));
+      el.appendChild(_statChips(items));
+    }
+  }
+}
+
+function _renderSustained(el, row, viz) {
+  const C = chartColors();
+  const dur  = viz.duration_minutes != null ? viz.duration_minutes : "?";
+  const conc = viz.sustained_concurrency != null ? viz.sustained_concurrency : "?";
+  const mean  = viz.sustained_throughput;
+  const thr   = viz.throttle_ratio;
+  const onset = viz.throttle_onset_minute;
+
+  el.appendChild(_section(`Sustained load — ${dur} min @ concurrency ${conc}`));
+  el.appendChild(_statChips([
+    { label: "Sustained throughput", value: mean != null
+        ? mean.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " tok/s" : null, cls: "accent" },
+    { label: "Concurrency",          value: viz.sustained_concurrency != null ? viz.sustained_concurrency + " in-flight" : null },
+    { label: "Throttle ratio",       value: thr != null ? (thr * 100).toFixed(1) + "%" : null,
+      cls: thr >= 0.95 ? "good" : thr >= 0.85 ? "warn" : "bad" },
+    { label: "Throttle onset",       value: onset != null ? "min " + onset.toFixed(1) : "No throttling detected",
+      cls: onset == null ? "good" : "warn" },
+  ]));
+
+  const samples = viz.samples;
+  if (!samples || !samples.length) return;
+  const minutes = samples.map((s) => s.minute);
+  const tputs   = samples.map((s) => (s.throughput_tokens_per_sec == null ? null : s.throughput_tokens_per_sec));
+  const warmup  = samples.filter((s) => s.is_warmup).length;
+  const pointColors = minutes.map((_, i) => i < warmup ? C.gray : C.blue);
+  const pointRadii  = minutes.map((_, i) => i < warmup ? 2 : 3);
+
+  el.appendChild(_section("Throughput over time"));
+  const { wrap: w1, canvas: c1 } = _mkCanvas(200);
+  el.appendChild(w1);
+  const datasets = [{
+    label: "Throughput", data: tputs,
+    borderColor: C.blue, backgroundColor: C.blue + "22",
+    fill: true, tension: 0.3,
+    pointBackgroundColor: pointColors, pointRadius: pointRadii,
+  }];
+  if (mean != null) {
+    datasets.push({
+      label: "Sustained mean", data: new Array(tputs.length).fill(mean),
+      borderColor: C.teal, borderDash: [6, 3], borderWidth: 1.5, pointRadius: 0,
+    });
+  }
+  _activeCharts.push(new window.Chart(c1, {
+    type: "line",
+    data: { labels: minutes.map((m) => m + " min"), datasets },
+    options: {
+      ..._baseOpts("tok/s", (v) => (v != null ? v.toFixed(0) : "")),
+      plugins: { legend: { display: true, labels: { color: C.text, font: { size: 11 } } } },
+    },
+  }));
+  if (warmup > 0) {
+    const note = document.createElement("div");
+    note.className = "viz-note";
+    note.textContent = `First ${warmup} sample${warmup === 1 ? "" : "s"} are warmup (gray) and excluded from scalar metrics.`;
+    el.appendChild(note);
+  }
+
+  const ttfts = samples.map((s) => (s.ttft_ms_p99 == null ? null : s.ttft_ms_p99));
+  if (ttfts.some((v) => v != null)) {
+    el.appendChild(_section("TTFT p99 over time"));
+    const { wrap: w2, canvas: c2 } = _mkCanvas(160);
+    el.appendChild(w2);
+    _activeCharts.push(new window.Chart(c2, {
+      type: "line",
+      data: { labels: minutes.map((m) => m + " min"),
+        datasets: [{ label: "TTFT p99", data: ttfts, borderColor: C.yellow, backgroundColor: C.yellow + "22", fill: true, tension: 0.3, pointRadius: 2 }] },
+      options: { ..._baseOpts("ms", (v) => (v != null ? v.toFixed(0) : "")), plugins: { legend: { display: false } } },
+    }));
+  }
+}
+
+// ── Small shared bits ──
+
+function _appendSlaRow(el, online) {
+  const C = chartColors();
+  const slaDiv = document.createElement("div");
+  slaDiv.className = "viz-sla-row";
+  for (let i = 0; i < online.labels.length; i++) {
+    const qps = online.labels[i];
+    const pass = online.sla_met[i];
+    const cls = pass ? "pass" : "fail";
+    slaDiv.innerHTML += `<span class="viz-sla-item">
+      <span class="viz-sla-dot ${cls}"></span>
+      <span class="qps">${esc(String(qps))} QPS</span>
+      <span class="${cls}">${pass ? "SLA met" : "SLA fail"}</span>
+    </span>`;
+  }
+  el.appendChild(slaDiv);
+}
+
+function _ms(v, decimals = 1) {
+  if (v == null) return null;
+  return Number(v).toFixed(decimals) + " ms";
+}
+
+// Test-only escape hatch.  Kept namespaced under an underscore so it
+// reads as "internals — don't depend on this from app code"; node tests
+// import it to drive _renderViz against fake panels + a stubbed Chart
+// constructor without booting the full modal shell.
+export const _test = {
+  vizHasAnyData: _vizHasAnyData,
+  renderViz: (panel, row) => _renderViz(row, panel),
+  destroyCharts: _destroyCharts,
+  // Lets a test reset the cached chartColors() result between cases —
+  // the cache reads CSS custom-properties on first access and would
+  // otherwise pin to whatever the first test happened to expose.
+  resetColorCache: () => { _C = null; },
+};
diff --git a/leaderboard/site/assets/js/router.js b/leaderboard/site/assets/js/router.js
new file mode 100644
index 00000000..d1a2ab5a
--- /dev/null
+++ b/leaderboard/site/assets/js/router.js
@@ -0,0 +1,147 @@
+// router.js — minimal hash router.
+//
+// Routes are registered with patterns like:
+//   "/"                  → home
+//   "/rankings"          → rankings (suite via ?suite=...)
+//   "/chip/:slug"        → chip detail
+//   "/compare"           → compare (chips via ?chips=a,b,c)
+//   "/suites"            → suite explorer
+//
+// Each handler receives ({ params, query, el }) and is responsible for
+// rendering into `el` (the main view container).
+
+import { parseHash, normalizeChipSlug } from "./utils.js";
+
+const routes = [];
+let mountEl = null;
+let _compareBasket = new Set();
+
+export function mount(el) { mountEl = el; }
+
+export function register(pattern, handler) {
+  const parts = pattern.split("/").filter(Boolean);
+  routes.push({ pattern, parts, handler });
+}
+
+function matchRoute(path) {
+  const target = path.split("/").filter(Boolean);
+  for (const r of routes) {
+    if (r.parts.length !== target.length) continue;
+    const params = {};
+    let ok = true;
+    for (let i = 0; i < r.parts.length; i++) {
+      const expected = r.parts[i];
+      const actual = target[i];
+      if (expected.startsWith(":")) {
+        params[expected.slice(1)] = decodeURIComponent(actual);
+      } else if (expected !== actual) {
+        ok = false; break;
+      }
+    }
+    if (ok) return { route: r, params };
+  }
+  return null;
+}
+
+export function dispatch() {
+  if (!mountEl) return;
+  const { path, params: query } = parseHash(location.hash);
+
+  // Backward-compat for the pre-2026-05 chip slug shape (`<chip>-x<N>`)
+  // — chip-detail pages are now per-model, with chip-count variants
+  // surfaced inside the page.  Old shared links / bookmarks like
+  // `#/chip/nvidia-rtx-4090d-x4` would otherwise hit the empty state;
+  // rewrite to the new bare-model slug and let the dispatch continue.
+  // We use replaceState so a back-button click goes to wherever the
+  // user came from rather than the legacy URL itself.
+  const chipMatch = path.match(/^\/chip\/(.+)$/);
+  if (chipMatch) {
+    const normalised = normalizeChipSlug(chipMatch[1]);
+    if (normalised) {
+      const qs = location.hash.includes("?")
+        ? "?" + location.hash.split("?").slice(1).join("?")
+        : "";
+      const next = `#/chip/${encodeURIComponent(normalised)}${qs}`;
+      history.replaceState(null, "", location.pathname + location.search + next);
+      // Re-dispatch with the corrected hash so this turn renders the
+      // right view immediately rather than waiting for a hashchange.
+      return dispatch();
+    }
+  }
+
+  const match = matchRoute(path);
+  // Reset scroll on route change.
+  window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
+
+  if (!match) {
+    mountEl.innerHTML = `
+      <section class="state">
+        <span class="state-icon">⚠</span>
+        Unknown route: <code>${path}</code><br>
+        <a href="#/" class="btn primary" style="margin-top:1rem">Back to home</a>
+      </section>
+    `;
+    syncNav(path);
+    return;
+  }
+
+  try {
+    match.route.handler({
+      params: match.params,
+      query,
+      el: mountEl,
+    });
+  } catch (err) {
+    console.error("Route handler failed:", err);
+    mountEl.innerHTML = `
+      <section class="state">
+        <span class="state-icon">⚠</span>
+        Something went wrong rendering this view.<br>
+        <small class="muted">${(err && err.message) || err}</small>
+      </section>
+    `;
+  }
+  syncNav(path);
+}
+
+function syncNav(path) {
+  const links = document.querySelectorAll(".topnav .nav-link");
+  // Map the route to the nav entry that should appear active.
+  //   • /chip/:slug    → no nav entry highlighted; it's a drill-in page
+  //                      reached from chip-cloud / lb-row, not part of
+  //                      the rankings hub.
+  //   • everything else falls through to its obvious top-level link.
+  let active = "/";
+  if (path.startsWith("/rankings"))      active = "/rankings";
+  else if (path.startsWith("/compare"))  active = "/compare";
+  else if (path.startsWith("/suites"))   active = "/suites";
+  else if (path.startsWith("/chip"))     active = null;
+  for (const a of links) {
+    const href = a.getAttribute("href") || "";
+    a.classList.toggle("active", active !== null && href === `#${active}`);
+  }
+}
+
+export function start() {
+  window.addEventListener("hashchange", dispatch);
+  if (!location.hash) location.hash = "#/";
+  else dispatch();
+}
+
+// ── Compare basket (shared state across views) ──
+const basketListeners = new Set();
+
+export function basketGet() { return Array.from(_compareBasket); }
+export function basketHas(slug) { return _compareBasket.has(slug); }
+export function basketToggle(slug) {
+  if (_compareBasket.has(slug)) _compareBasket.delete(slug);
+  else _compareBasket.add(slug);
+  notifyBasket();
+}
+export function basketClear() { _compareBasket.clear(); notifyBasket(); }
+export function basketOnChange(fn) { basketListeners.add(fn); return () => basketListeners.delete(fn); }
+function notifyBasket() {
+  for (const fn of basketListeners) {
+    try { fn(basketGet()); } catch (e) { console.warn("basket listener failed", e); }
+  }
+}
diff --git a/leaderboard/site/assets/js/utils.js b/leaderboard/site/assets/js/utils.js
new file mode 100644
index 00000000..1334078c
--- /dev/null
+++ b/leaderboard/site/assets/js/utils.js
@@ -0,0 +1,353 @@
+// utils.js — pure helpers (no DOM/state side-effects)
+
+// HTML escape — used everywhere we interpolate text into HTML.
+export function esc(s) {
+  if (s === null || s === undefined) return "";
+  return String(s)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+// Format big numbers compactly: 12453 -> "12,453"; 1234567 -> "1.23M"
+// Integers (e.g. counts) render with no decimals automatically.
+export function fmtNum(v, opts = {}) {
+  if (v === null || v === undefined || Number.isNaN(v)) return "-";
+  const n = Number(v);
+  const { compact = false, decimals } = opts;
+  if (compact && Math.abs(n) >= 1000) {
+    if (Math.abs(n) >= 1e9) return (n / 1e9).toFixed(2) + "B";
+    if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(2) + "M";
+    if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(2) + "K";
+  }
+  // Integer fast-path: counts like 97 / 32 / 4 must not render as "97.0".
+  if (decimals === undefined && Number.isInteger(n)) {
+    return n.toLocaleString();
+  }
+  const d = decimals === undefined
+    ? (Math.abs(n) >= 100 ? 0 : Math.abs(n) >= 10 ? 1 : 2)
+    : decimals;
+  return n.toLocaleString(undefined, {
+    minimumFractionDigits: d,
+    maximumFractionDigits: d,
+  });
+}
+
+export function fmtDate(s) {
+  if (!s) return "-";
+  // Accept YYYY-MM-DD or ISO timestamp; return short YYYY-MM-DD.
+  return String(s).slice(0, 10);
+}
+
+// Trim long framework versions to something display-friendly.
+//   "0.7.3"                         → "0.7.3"
+//   "0.19.1rc1.dev339+gedc364896"   → "0.19.1rc1"
+//   "0.18.0rc1"                     → "0.18.0rc1"
+// Strategy: cut at "+" (drops git hash), then at ".dev" (drops dev
+// build counter). If still long, hard-cap at 12 chars.
+// Title-case a string while preserving common separators (hyphen,
+// slash, parens) so hero copy reads as proper headlines.
+//   "Multi-chip throughput"   -> "Multi-Chip Throughput"
+//   "Edge / consumer hardware"-> "Edge / Consumer Hardware"
+//   "Mixture-of-Experts (MoE)"-> "Mixture-of-Experts (MoE)"
+// Words that already contain *any* uppercase letter are left intact —
+// covers acronyms like MoE / GPU / TPU / FP8 as well as branded camel
+// casing.  Lowercase "stop words" stay lowercase unless they're the
+// first token (matches AP / Chicago house-style minor words).
+export function toTitleCase(s) {
+  if (!s) return "";
+  const STOP = new Set(["a","an","the","and","but","or","nor","for","of","on","in","to","by","at","as","vs"]);
+  return String(s).replace(/[A-Za-z][A-Za-z0-9]*/g, (word, offset, full) => {
+    if (/[A-Z]/.test(word)) return word;
+    const isFirst = offset === 0 || /^[\s]+$/.test(full.slice(0, offset));
+    if (!isFirst && STOP.has(word)) return word;
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  });
+}
+
+export function shortVersion(v) {
+  if (!v) return "";
+  let s = String(v).split("+")[0];
+  s = s.split(".dev")[0];
+  if (s.length > 12) s = s.slice(0, 12);
+  return s;
+}
+
+// Abbreviate verbose HF-style model names for tight UI slots.
+//   "Meta-Llama-3-8B-Instruct"        → "Llama 3 · 8B"
+//   "Meta-Llama-3-70B-Instruct"       → "Llama 3 · 70B"
+//   "Llama-3.1-8B-Instruct"           → "Llama 3.1 · 8B"
+//   "Qwen2.5-0.5B-Instruct"           → "Qwen 2.5 · 0.5B"
+//   "Mixtral-8x7B-Instruct-v0.1"      → "Mixtral 8×7B"
+//   anything-else                     → unchanged
+export function shortModel(name) {
+  if (!name) return "";
+  let s = String(name);
+  s = s.replace(/^Meta-/, "");                  // Meta-Llama-3 → Llama-3
+  s = s.replace(/-Instruct(?:-v[\d.]+)?$/, ""); // drop trailing variant
+  // Llama / Qwen with a "-<size>" suffix → split family · size
+  const m = s.match(/^(Llama|Qwen)[-]?(\d+(?:\.\d+)?)-([\d.]+B)$/i);
+  if (m) return `${m[1]} ${m[2]} · ${m[3]}`;
+  // Mixtral 8x7B style → keep
+  s = s.replace(/(\d+)x(\d+B)/i, "$1×$2");
+  return s;
+}
+
+// Normalize a submitter field to a bare handle (no leading @).
+// Accepts GitHub login, email, or "Name <email>" — falls back to the
+// part before the first @ for emails.
+export function submitterHandle(s) {
+  if (!s) return "";
+  let h = String(s).trim();
+  if (!h) return "";
+  if (h.startsWith("@")) h = h.slice(1);
+  if (h.includes("<") && h.includes(">")) {
+    const m = h.match(/<([^>]+)>/);
+    if (m) h = m[1];
+  }
+  if (h.includes("@")) h = h.split("@")[0]; // email → local part
+  return h;
+}
+
+// Stable slug for URLs.  Lowercase, hyphenated, ASCII-safe.
+export function slugify(s) {
+  return String(s || "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+// Build a chip slug that's stable across pages.
+//
+// Slug is the chip *model* only — chip_count is intentionally NOT
+// encoded.  4090D, 4090D ×4, 4090D ×8 are the same hardware deployed in
+// different fan-out configurations; they belong on the same chip-detail
+// page where the page itself can break them out by chip-count.  Ranking
+// tables and compare baskets continue to disambiguate per-row via
+// `_chip_label` (which still carries "×N") and `run_id` respectively.
+//
+// `data.js` precomputes `_chip_slug` for every loaded row — we prefer
+// that so the link target stays in lock-step with the grouping key the
+// rest of the app uses (no risk of slug drift if slugify ever changes).
+export function chipSlug(row) {
+  if (!row) return "";
+  if (row._chip_slug) return row._chip_slug;
+  if (!row.chip) return "";
+  return slugify(row.chip);
+}
+
+// Detect a stale "<chip>-x<N>" slug from the pre-2026-05 era and return
+// the bare-model slug it should now be normalised to.  Returns null
+// when `slug` is already in the new shape.  Used by the router to
+// redirect old shared links instead of 404-ing them.
+export function normalizeChipSlug(slug) {
+  if (!slug) return null;
+  const m = String(slug).match(/^(.+)-x\d+$/);
+  return m ? m[1] : null;
+}
+
+// Build a URL hash for chip detail.  Falls back to the rankings landing
+// when the row can't produce a slug — better to bounce somewhere useful
+// than to leave a dangling `#/chip/` that 404s into the empty state.
+export function chipHref(row) {
+  const slug = chipSlug(row);
+  return slug ? `#/chip/${slug}` : "#/rankings";
+}
+
+// Group by helper.
+export function groupBy(arr, keyFn) {
+  const m = new Map();
+  for (const item of arr) {
+    const k = keyFn(item);
+    if (!m.has(k)) m.set(k, []);
+    m.get(k).push(item);
+  }
+  return m;
+}
+
+// Hash-route param parsing: takes "#/foo/bar?a=1&b=2" → { path:"/foo/bar", params:{a,b} }
+export function parseHash(hash) {
+  const raw = hash || "";
+  const stripped = raw.startsWith("#") ? raw.slice(1) : raw;
+  const [pathRaw, queryRaw] = stripped.split("?");
+  const path = pathRaw || "/";
+  const params = {};
+  if (queryRaw) {
+    for (const part of queryRaw.split("&")) {
+      if (!part) continue;
+      const [k, v = ""] = part.split("=");
+      params[decodeURIComponent(k)] = decodeURIComponent(v);
+    }
+  }
+  return { path, params };
+}
+
+export function buildHash(path, params = {}) {
+  const qs = Object.entries(params)
+    .filter(([, v]) => v !== "" && v !== null && v !== undefined)
+    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+    .join("&");
+  return `#${path}${qs ? "?" + qs : ""}`;
+}
+
+// Copy a string to the user's clipboard with progressive fallback.
+//
+// Three paths, tried in order:
+//   1. navigator.clipboard.writeText — modern, requires a secure
+//      context (https / localhost) and a user gesture.
+//   2. <textarea> + execCommand("copy") — works on insecure contexts
+//      (file://, intranet) and older Safari.
+//   3. window.prompt — last-ditch surface so the user can manually
+//      Cmd-C.  Returns false in this case so callers can flag the
+//      "user had to do extra work" outcome differently from a clean
+//      programmatic copy.
+//
+// Returns true when a path completed without user-visible escalation
+// (paths 1 + 2), false on path 3.  Never throws.
+export async function copyToClipboard(text) {
+  const value = text == null ? "" : String(text);
+  try {
+    if (typeof navigator !== "undefined"
+        && navigator.clipboard
+        && typeof navigator.clipboard.writeText === "function") {
+      await navigator.clipboard.writeText(value);
+      return true;
+    }
+  } catch (_) { /* fall through */ }
+  try {
+    if (typeof document !== "undefined" && typeof document.execCommand === "function") {
+      const ta = document.createElement("textarea");
+      ta.value = value;
+      ta.setAttribute("readonly", "");
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      ta.style.left = "-9999px";
+      document.body.appendChild(ta);
+      ta.select();
+      const ok = document.execCommand("copy");
+      document.body.removeChild(ta);
+      if (ok) return true;
+    }
+  } catch (_) { /* fall through */ }
+  try {
+    if (typeof window !== "undefined" && typeof window.prompt === "function") {
+      window.prompt("Copy this link:", value);
+    }
+  } catch (_) { /* noop */ }
+  return false;
+}
+
+// Briefly swap a button's label to a status message after an async
+// action.  Used by the share-link buttons in compare + chip-detail to
+// give a "Copied!" / "Copy failed" beat without pulling in a toast
+// framework.  The label is restored after `holdMs`, or sooner on a
+// follow-up call to the same button.
+//
+// `labelSelector` defaults to ".copy-btn-label" — the convention used
+// by the share buttons in this codebase; pass an explicit selector if
+// the caller's label lives somewhere else inside the button.
+export function flashButtonLabel(btn, message, {
+  holdMs = 1600,
+  className = "is-flashed",
+  labelSelector = ".copy-btn-label",
+} = {}) {
+  if (!btn) return;
+  const labelEl = btn.querySelector(labelSelector) || btn;
+  if (btn.__flashTimer) {
+    clearTimeout(btn.__flashTimer);
+    btn.__flashTimer = null;
+  }
+  if (btn.__flashOriginalLabel == null) {
+    btn.__flashOriginalLabel = labelEl.textContent || "";
+  }
+  if (btn.__flashOriginalClass == null) {
+    btn.__flashOriginalClass = className;
+  }
+  labelEl.textContent = message;
+  if (className) btn.classList.add(className);
+  btn.__flashTimer = setTimeout(() => {
+    labelEl.textContent = btn.__flashOriginalLabel;
+    if (className) btn.classList.remove(className);
+    btn.__flashTimer = null;
+  }, holdMs);
+}
+
+// Export a `<canvas>` (typically a Chart.js render target) as a PNG
+// download.  Two non-obvious things this helper does:
+//
+//   1. Composites the source canvas onto an opaque background before
+//      export — Chart.js renders with a transparent fill, so a naive
+//      `canvas.toDataURL("image/png")` from a dark-mode page produces
+//      a PNG with white text on a transparent background, invisible
+//      when the user pastes it into a white surface (Slack, X, GitHub
+//      Discussions).  We resolve `--bg-elev` from the document so the
+//      exported image looks like the on-page card it came from.
+//   2. Falls back from Blob → dataURL when `canvas.toBlob` isn't
+//      available (older Safari, jsdom in tests), so the helper never
+//      throws on environments lacking the modern API.
+//
+// Returns a Promise<boolean> — `true` on success, `false` if every
+// path failed (caller can flash an error label).  Never throws.
+export async function downloadCanvasAsPng(sourceCanvas, opts = {}) {
+  if (!sourceCanvas || typeof sourceCanvas.getContext !== "function") return false;
+  const { filename = "chart.png", backgroundColor } = opts;
+
+  let composite;
+  try {
+    composite = document.createElement("canvas");
+    composite.width = sourceCanvas.width;
+    composite.height = sourceCanvas.height;
+    const ctx = composite.getContext("2d");
+    if (!ctx) return false;
+    // Background fill — explicit override > on-page card surface > white.
+    let bg = backgroundColor;
+    if (!bg && typeof getComputedStyle === "function") {
+      try {
+        const v = getComputedStyle(document.documentElement).getPropertyValue("--bg-elev").trim();
+        if (v) bg = v;
+      } catch (_) { /* noop */ }
+    }
+    ctx.fillStyle = bg || "#ffffff";
+    ctx.fillRect(0, 0, composite.width, composite.height);
+    ctx.drawImage(sourceCanvas, 0, 0);
+  } catch (_) {
+    return false;
+  }
+
+  // Try Blob → object URL → <a download>.
+  try {
+    const blob = await new Promise((resolve) => {
+      if (typeof composite.toBlob !== "function") return resolve(null);
+      composite.toBlob((b) => resolve(b), "image/png");
+    });
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      // Revoke after a tick so click can resolve before the URL dies.
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+      return true;
+    }
+  } catch (_) { /* fall through to dataURL */ }
+
+  // dataURL fallback — works everywhere `<canvas>` does.
+  try {
+    const dataUrl = composite.toDataURL("image/png");
+    if (typeof dataUrl !== "string" || !dataUrl.startsWith("data:image/png")) return false;
+    const a = document.createElement("a");
+    a.href = dataUrl;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
diff --git a/leaderboard/site/assets/js/views/chip-detail.js b/leaderboard/site/assets/js/views/chip-detail.js
new file mode 100644
index 00000000..86d19588
--- /dev/null
+++ b/leaderboard/site/assets/js/views/chip-detail.js
@@ -0,0 +1,824 @@
+// views/chip-detail.js — Chip-level overview page.
+//
+// Reachable via `#/chip/<slug>` where the slug encodes a specific chip
+// + chip-count variant (e.g. `nvidia-h100-80gb-hbm3-x1` vs `…-x8`).
+// Single-run details live in the modal; this page is the place to see
+// everything about ONE hardware configuration in aggregate:
+//
+//   • Hero           : chip name, vendor, memory, suite/run/framework
+//                      coverage facts, and a "Compare this chip" CTA
+//                      that seeds the basket with the most recent run.
+//   • Per-suite grid : one card per suite — the best primary-metric run
+//                      the chip has on file there, with a `data-open-run`
+//                      handle so a click pops the run modal.  Suites the
+//                      chip never submitted to render as dim placeholders.
+//   • Runs table     : every submission, sorted newest-first, each row
+//                      `data-open-run` for the same modal flow.
+//
+// Layout primitives (.hero, .section, .grid, .card, .data-table) come
+// from the global stylesheet; per-page tweaks live in chip-detail.css.
+
+import {
+  SUITE_ORDER, SUITE_META,
+  rowsForChip, bestPerSuiteForChip, formatPrimary,
+  rankChipInSuite, similarChipsTo, chipCountsForChip,
+  suiteFingerprint, chipCountScaling, vendorColor,
+} from "../data.js";
+import {
+  esc, fmtDate, shortVersion, submitterHandle,
+  copyToClipboard, flashButtonLabel, downloadCanvasAsPng,
+} from "../utils.js";
+
+export function render({ el, params }) {
+  const slug = params.slug;
+  const rs = rowsForChip(slug);
+
+  if (rs.length === 0) {
+    // Mirror `.rk-empty` / `.cmp-empty` so a stale chip-detail link feels
+    // like the same "nothing here" surface as an over-filtered rankings
+    // view rather than a dramatic 404.
+    el.innerHTML = `
+      <section class="chip-empty">
+        <span class="state-icon" aria-hidden="true">⚠</span>
+        <p>No chip found for <code>${esc(slug)}</code>.</p>
+        <p class="chip-empty-sub">It may have been removed, or the link is from an older revision of the dataset.</p>
+        <div class="hero-cta" style="justify-content:center;margin-top:1rem">
+          <a class="btn primary" href="#/">Back to home</a>
+          <a class="btn" href="#/rankings">Browse rankings</a>
+        </div>
+      </section>
+    `;
+    return;
+  }
+
+  // Pick a sample row for hero attribution (vendor / memory / model
+  // name) and a separate "latest run" for the Compare CTA so users land
+  // on the freshest configuration when they jump to compare.  We use
+  // `sample.chip` (not `_chip_label`) for the hero h1 because the page
+  // is now a chip-model page; ×1/×4/×8 variants live inside.
+  const sample = rs[0];
+  const latestRun = rs.reduce(
+    (a, b) => (String(b.date || "") > String(a.date || "") ? b : a)
+  );
+  const latestRid = latestRun.run_id || latestRun.submission || "";
+
+  const bestPerSuite = bestPerSuiteForChip(slug);
+  const activeSuites = SUITE_ORDER.filter((sid) => bestPerSuite.has(sid));
+  const frameworks   = new Set(rs.map((r) => r.framework).filter(Boolean));
+  const precisions   = new Set(rs.map((r) => r.precision).filter(Boolean));
+  const chipCounts   = chipCountsForChip(slug);
+
+  // Section numbering — scaling section (03) is conditional on the
+  // chip having ≥2 chip_count variants with data on at least one
+  // shared suite.  Precompute once so we can renumber every
+  // downstream eyebrow consistently and we only call the data helper
+  // once per render.
+  const scalingHtml = renderScalingSection(slug, sample);
+  const runsNum  = scalingHtml ? "04" : "03";
+  const peersNum = scalingHtml ? "05" : "04";
+
+  const memoryStr = sample.memory_gb ? `${sample.memory_gb} GB` : "";
+  const factPills = [
+    `${activeSuites.length} suite${activeSuites.length === 1 ? "" : "s"}`,
+    `${rs.length} run${rs.length === 1 ? "" : "s"}`,
+    `${frameworks.size} framework${frameworks.size === 1 ? "" : "s"}`,
+    `${precisions.size} precision${precisions.size === 1 ? "" : "s"}`,
+  ];
+  // Chip-count fact only adds noise for single-variant chips; only
+  // surface it when the chip has been deployed at >1 fan-out.
+  if (chipCounts.length > 1) {
+    factPills.push(`${chipCounts.length} chip-count variants (${chipCounts.map((c) => `×${c}`).join(", ")})`);
+  } else if (chipCounts.length === 1 && chipCounts[0] > 1) {
+    factPills.push(`deployed at ×${chipCounts[0]}`);
+  }
+
+  el.innerHTML = `
+    <section class="hero chip-hero" data-vendor="${esc(sample.vendor)}">
+      <span class="eyebrow chip-hero-eyebrow">
+        <span class="vendor-dot" data-vendor="${esc(sample.vendor)}"></span>
+        ${esc(sample.vendor)}${memoryStr ? " · " + esc(memoryStr) : ""}
+      </span>
+      <h1>${esc(sample.chip)}</h1>
+      <p class="hero-sub">${factPills.map(esc).join(" · ")}</p>
+      <div class="hero-cta">
+        ${latestRid
+          ? `<a class="btn primary" href="#/compare?runs=${encodeURIComponent(latestRid)}">Compare this chip</a>`
+          : ""}
+        <a class="btn" href="#/rankings?vendor=${encodeURIComponent(sample.vendor)}">Browse ${esc(sample.vendor)} rankings</a>
+        <button class="btn copy-btn chip-share-btn"
+                type="button"
+                data-chip-share="1"
+                title="Copy a link to this chip's overview page.">
+          <span class="copy-btn-icon" aria-hidden="true">↗</span>
+          <span class="copy-btn-label">Copy link</span>
+        </button>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-header section-header--stacked">
+        <div class="section-title">
+          <span class="eyebrow">01 · Best per suite</span>
+          <h2>Where this chip lands</h2>
+        </div>
+        <p class="section-sub">Top primary-metric run in each suite. Click a card to open its details.</p>
+      </div>
+      <div class="chip-suite-grid">
+        ${SUITE_ORDER.map((sid) => renderSuiteCard(sid, bestPerSuite.get(sid), slug)).join("")}
+      </div>
+    </section>
+
+    ${renderFingerprintSection(slug, sample)}
+
+    ${scalingHtml}
+
+    <section class="section">
+      <div class="section-header section-header--stacked">
+        <div class="section-title">
+          <span class="eyebrow">${runsNum} · Every submission</span>
+          <h2>${rs.length} run${rs.length === 1 ? "" : "s"} on file</h2>
+        </div>
+        <p class="section-sub">Sorted newest first. Click a row to open the run detail.</p>
+      </div>
+      <div class="chip-runs-wrap">
+        ${renderRunsTable(rs)}
+      </div>
+    </section>
+
+    ${renderSimilarChipsSection(slug, latestRid, peersNum)}
+  `;
+
+  bindClicks(el);
+  // Mount Chart.js instances after innerHTML lands so the canvases
+  // are attached.  setTimeout(0) instead of rAF so the first paint
+  // already includes the charts (no layout flash).
+  setTimeout(() => {
+    _mountFingerprintChart(el, slug, sample);
+    _mountScalingChart(el, slug, sample);
+  }, 0);
+}
+
+// Click delegation — once-attached on the view container.  The router
+// rebuilds `el.innerHTML` on every visit so handlers must live on the
+// container itself; the guard flag prevents listener stacking on
+// re-renders.  Currently scoped to the hero share button; expand here
+// when other in-view affordances need view-local logic (anything that
+// runs before modal.js's document delegation should land here too).
+function bindClicks(el) {
+  if (el.__chipDetailClicksAttached) return;
+  el.__chipDetailClicksAttached = true;
+
+  el.addEventListener("click", (ev) => {
+    if (!location.hash.startsWith("#/chip/")) return;
+    const t = ev.target;
+
+    // Hero share button — copy a clean URL to this chip's overview
+    // page (no query string, so the recipient lands on the canonical
+    // view rather than a filtered slice).
+    const shareBtn = t.closest("[data-chip-share]");
+    if (shareBtn) {
+      ev.preventDefault();
+      _copyChipShareLink(shareBtn);
+      return;
+    }
+
+    // Download chart as PNG.  Each download button sits inside the
+    // chart's canvas wrapper; we resolve the canvas via the data
+    // attribute the wrapper template owns, so adding a new chart
+    // just needs the wrapper + the matching button — no rebinding.
+    const dlBtn = t.closest("[data-chart-dl]");
+    if (dlBtn) {
+      ev.preventDefault();
+      _downloadChipChart(dlBtn);
+      return;
+    }
+  });
+}
+
+// Read the active chip slug from the URL hash rather than capturing
+// it in bindClicks's closure — bindClicks attaches once per mounted
+// view container (`__chipDetailClicksAttached` guard), so a captured
+// slug would go stale the first time the user navigates to a
+// different chip without remounting the view.  `#/chip/<slug>(?…)`
+// is the only shape this view ever runs under, so the regex is safe.
+function _activeChipSlug() {
+  const m = (location.hash || "").match(/#\/chip\/([^?]+)/);
+  return m ? decodeURIComponent(m[1]) : "chip";
+}
+
+async function _downloadChipChart(btn) {
+  const kind = btn.dataset.chartDl; // "radar" | "scaling"
+  const wrap = btn.closest(".chip-fp-canvas, .chip-scl-canvas");
+  const canvas = wrap && wrap.querySelector("canvas");
+  if (!canvas) {
+    flashButtonLabel(btn, "Failed", { holdMs: 2000, className: "is-failed", labelSelector: ".chart-dl-btn-label" });
+    return;
+  }
+  const slug = _activeChipSlug();
+  const filename = `${slug}-${kind === "radar" ? "fingerprint" : "scaling"}.png`;
+  const ok = await downloadCanvasAsPng(canvas, { filename });
+  flashButtonLabel(btn, ok ? "Saved" : "Failed", {
+    holdMs: ok ? 1400 : 2200,
+    className: ok ? "is-saved" : "is-failed",
+    labelSelector: ".chart-dl-btn-label",
+  });
+}
+
+function _chipShareUrl() {
+  // Strip any in-flight query string (`?foo=…` after `#/chip/<slug>`)
+  // so the shared link points at the canonical chip-detail view.
+  // Anything past `#/chip/<slug>` is current-session UI state, not
+  // semantically part of the chip identity.
+  const hash = location.hash || "";
+  const hashPath = hash.split("?")[0];
+  return location.origin + location.pathname + location.search + hashPath;
+}
+
+async function _copyChipShareLink(btn) {
+  const url = _chipShareUrl();
+  const ok = await copyToClipboard(url);
+  flashButtonLabel(btn, ok ? "Copied!" : "Copy failed — select & ⌘C", {
+    holdMs: ok ? 1600 : 3500,
+    className: ok ? "is-copied" : "is-copy-failed",
+    labelSelector: ".copy-btn-label",
+  });
+}
+
+// ── 02 · Performance fingerprint (radar) ──────────────────────
+//
+// Tells the user where this chip is strong and weak across the suite
+// spectrum at a glance.  Each axis = one suite, each tick = % of the
+// global best primary metric for that suite (asc-direction metrics
+// inverted so the leader still reads as 100 %).
+//
+// We render a section + canvas, then mount Chart.js after innerHTML
+// lands.  When the chip has data on fewer than 2 suites the polygon
+// degenerates to a point and the chart adds no signal — the section
+// is skipped.  When Chart.js isn't available (rare: tests, blocked
+// CDN) we render a structured table fallback so the data still
+// reaches keyboard / screen-reader users.
+function renderFingerprintSection(slug, sample) {
+  const fp = suiteFingerprint(slug);
+  const activeSuites = SUITE_ORDER.filter((sid) => {
+    const cell = fp.get(sid);
+    return cell && !cell.missing;
+  });
+  if (activeSuites.length < 2) return "";
+
+  const missing = SUITE_ORDER.filter((sid) => fp.get(sid)?.missing);
+  const cells = SUITE_ORDER.map((sid) => {
+    const meta = SUITE_META[sid];
+    const cell = fp.get(sid);
+    if (!meta || !cell) return "";
+    const pct = cell.missing ? "—" : `${Math.round(cell.normalized * 100)}%`;
+    const value = cell.missing ? "no data" : formatPrimary(cell.value, sid);
+    return `
+      <li class="chip-fp-row" data-suite="${esc(meta.letter)}">
+        <span class="chip-fp-letter" aria-hidden="true">${esc(meta.letter)}</span>
+        <span class="chip-fp-name">${esc(meta.title)}</span>
+        <span class="chip-fp-value tnum">${esc(value)}</span>
+        <span class="chip-fp-pct tnum${cell.missing ? " is-missing" : ""}">${esc(pct)}</span>
+      </li>
+    `;
+  }).join("");
+
+  return `
+    <section class="section chip-fp-section">
+      <div class="section-header section-header--stacked">
+        <div class="section-title">
+          <span class="eyebrow">02 · Performance fingerprint</span>
+          <h2>How this chip sits across the spectrum</h2>
+        </div>
+        <p class="section-sub">
+          Each axis is one suite.  100 % is the global best primary metric
+          for that suite — your chip's normalised score sits inside.
+          ${missing.length
+            ? `Suites without a submission collapse to the centre (${missing.map((sid) => SUITE_META[sid]?.letter).filter(Boolean).join(", ")}).`
+            : ""}
+        </p>
+      </div>
+      <div class="chip-fp-wrap" data-vendor="${esc(sample.vendor)}">
+        <div class="chip-fp-canvas">
+          <canvas data-chip-radar
+                  aria-label="Radar chart of ${esc(sample.chip)} performance across all suites"
+                  role="img"></canvas>
+          <button class="chart-dl-btn"
+                  type="button"
+                  data-chart-dl="radar"
+                  title="Download this radar as a PNG image">
+            <span class="chart-dl-btn-icon" aria-hidden="true">↓</span>
+            <span class="chart-dl-btn-label">PNG</span>
+          </button>
+        </div>
+        <ol class="chip-fp-legend" aria-label="Per-suite normalised scores">
+          ${cells}
+        </ol>
+      </div>
+    </section>
+  `;
+}
+
+let _activeFpChart = null;
+
+function _mountFingerprintChart(el, slug, sample) {
+  const canvas = el.querySelector("[data-chip-radar]");
+  if (!canvas) return;
+  if (typeof window.Chart !== "function") return; // table fallback already shown.
+
+  if (_activeFpChart) {
+    try { _activeFpChart.destroy(); } catch (_) { /* noop */ }
+    _activeFpChart = null;
+  }
+
+  const fp = suiteFingerprint(slug);
+  const labels = SUITE_ORDER
+    .map((sid) => SUITE_META[sid]?.letter || sid)
+    .filter(Boolean);
+  const data = SUITE_ORDER.map((sid) => {
+    const cell = fp.get(sid);
+    return cell && !cell.missing ? Math.round(cell.normalized * 100) : 0;
+  });
+  const reference = SUITE_ORDER.map(() => 100);
+
+  const cs = getComputedStyle(document.documentElement);
+  const textColor   = (cs.getPropertyValue("--fg-muted").trim()    || "#8b949e");
+  const gridColor   = (cs.getPropertyValue("--border-soft").trim() || "rgba(127,127,127,0.18)");
+  const refColor    = (cs.getPropertyValue("--fg-faint").trim()    || "#888780");
+  const accentHex   = vendorColor(sample.vendor);
+
+  _activeFpChart = new window.Chart(canvas, {
+    type: "radar",
+    data: {
+      labels,
+      datasets: [
+        {
+          label: "Global best",
+          data: reference,
+          borderColor: refColor,
+          borderDash: [4, 4],
+          backgroundColor: "transparent",
+          pointRadius: 0,
+          borderWidth: 1,
+        },
+        {
+          label: sample.chip,
+          data,
+          borderColor: accentHex,
+          backgroundColor: accentHex + "33",
+          pointBackgroundColor: accentHex,
+          pointBorderColor: accentHex,
+          pointRadius: 3.5,
+          borderWidth: 2,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `${ctx.dataset.label}: ${ctx.parsed.r}%`,
+          },
+        },
+      },
+      scales: {
+        r: {
+          suggestedMin: 0,
+          suggestedMax: 100,
+          ticks: {
+            color: textColor,
+            backdropColor: "transparent",
+            font: { size: 10 },
+            stepSize: 25,
+            showLabelBackdrop: false,
+            callback: (v) => `${v}%`,
+          },
+          grid: { color: gridColor },
+          angleLines: { color: gridColor },
+          pointLabels: {
+            color: textColor,
+            font: { size: 12, weight: "600" },
+          },
+        },
+      },
+    },
+  });
+}
+
+// ── 03 · Scaling across chip-counts (grouped bar) ─────────────
+//
+// Only meaningful when the chip has been deployed at >1 fan-out
+// (e.g. ×1 + ×8 for an A100, ×1 + ×4 for a 4090D); otherwise this
+// section returns "" and the rest of the page renumbers downward.
+// The chart answers: "is this chip linearly faster at ×8 than at
+// ×1?  On which suites does going wide actually help?"
+//
+// Y-axis is "% of this chip's best on this suite" — within a single
+// suite cluster, the bars are normalised to the highest-throughput
+// chip-count for that suite (asc-direction primary metrics inverted
+// so the lowest-latency variant still reads as 100 %).  Cross-suite
+// comparison would mix tok/s with ms with %, which is exactly what
+// the fingerprint radar is for; here we want intra-suite scaling
+// behaviour to read at a glance instead.
+function renderScalingSection(slug, sample) {
+  const data = chipCountScaling(slug);
+  if (data.suites.length === 0) return "";
+
+  const chipCounts = data.chipCounts;
+  // Build a compact legend list — also serves as the keyboard /
+  // screen-reader fallback when Chart.js can't load.
+  const legendItems = chipCounts.map((c, i) => `
+    <li class="chip-scl-legend-item" data-count-idx="${i}">
+      <span class="chip-scl-legend-swatch" data-count-idx="${i}" aria-hidden="true"></span>
+      <span class="chip-scl-legend-label">×${c}</span>
+    </li>
+  `).join("");
+
+  // Per-suite breakdown row underneath the chart — visible on every
+  // viewport and the only surface for the absolute primary-metric
+  // value (chart bars are normalised %).
+  const breakdownRows = data.suites.map((s) => {
+    const bestPerCount = chipCounts.map((c) => {
+      const cell = s.perCount.get(c);
+      if (!cell || cell.value == null) return `<span class="chip-scl-cell-empty" title="No submission at ×${c}">—</span>`;
+      const pct = Math.round(cell.normalized * 100);
+      const display = formatPrimary(cell.value, s.sid);
+      return `
+        <span class="chip-scl-cell" title="${esc(`×${c}: ${display} (${pct}% of this chip's best in Suite ${s.letter})`)}">
+          <span class="chip-scl-cell-pct tnum">${pct}%</span>
+          <span class="chip-scl-cell-val tnum">${esc(display || "—")}</span>
+        </span>
+      `;
+    }).join("");
+    return `
+      <div class="chip-scl-row" data-suite="${esc(s.letter)}">
+        <span class="chip-scl-row-letter" aria-hidden="true">${esc(s.letter)}</span>
+        <span class="chip-scl-row-title">${esc(s.title)}</span>
+        <span class="chip-scl-row-cells">${bestPerCount}</span>
+      </div>
+    `;
+  }).join("");
+
+  return `
+    <section class="section chip-scl-section">
+      <div class="section-header section-header--stacked">
+        <div class="section-title">
+          <span class="eyebrow">03 · Scaling across chip-counts</span>
+          <h2>Does going wide actually pay off?</h2>
+        </div>
+        <p class="section-sub">
+          Bars are normalised to this chip's best result on each suite —
+          ×N at 100 % means that fan-out wins the suite among this chip's
+          variants.  Chip-counts without a submission for a suite show as
+          gaps; zoom out via Compare to put another chip on the same axes.
+        </p>
+      </div>
+      <div class="chip-scl-wrap" data-vendor="${esc(sample.vendor)}">
+        <div class="chip-scl-canvas">
+          <canvas data-chip-scaling
+                  aria-label="Grouped bar chart of ${esc(sample.chip)} scaling across chip-counts ${chipCounts.map((c) => `×${c}`).join(", ")}"
+                  role="img"></canvas>
+          <button class="chart-dl-btn"
+                  type="button"
+                  data-chart-dl="scaling"
+                  title="Download this scaling chart as a PNG image">
+            <span class="chart-dl-btn-icon" aria-hidden="true">↓</span>
+            <span class="chart-dl-btn-label">PNG</span>
+          </button>
+        </div>
+        <ol class="chip-scl-legend" aria-label="Chip-count series">
+          ${legendItems}
+        </ol>
+      </div>
+      <div class="chip-scl-breakdown" role="table" aria-label="Per-suite scaling breakdown">
+        ${breakdownRows}
+      </div>
+    </section>
+  `;
+}
+
+let _activeSclChart = null;
+
+function _mountScalingChart(el, slug, sample) {
+  const canvas = el.querySelector("[data-chip-scaling]");
+  if (!canvas) return;
+  if (typeof window.Chart !== "function") return; // breakdown table is the fallback.
+
+  if (_activeSclChart) {
+    try { _activeSclChart.destroy(); } catch (_) { /* noop */ }
+    _activeSclChart = null;
+  }
+
+  const data = chipCountScaling(slug);
+  if (!data.suites.length) return;
+
+  const chipCounts = data.chipCounts;
+  const labels = data.suites.map((s) => `Suite ${s.letter}`);
+  const accentHex = vendorColor(sample.vendor);
+
+  // Per-chip-count colour: tint the vendor accent by lightening it
+  // for higher counts, so the bars within a cluster read as a
+  // gradient ("more chips = brighter" matches scaling intuition)
+  // instead of needing a separate palette per chip family.
+  const datasets = chipCounts.map((c, i) => {
+    const tint = chipCounts.length === 1 ? 0 : i / (chipCounts.length - 1);
+    // Mix from accent (i=0) → vendor accent at 50% (i=last).  We use
+    // explicit hex for opacity so old browsers without color-mix in
+    // canvas still get a reasonable colour.
+    const alphaHex = (200 - Math.round(tint * 90)).toString(16).padStart(2, "0");
+    return {
+      label: `×${c}`,
+      data: data.suites.map((s) => {
+        const cell = s.perCount.get(c);
+        return cell && cell.value != null ? Math.round(cell.normalized * 100) : null;
+      }),
+      backgroundColor: accentHex + alphaHex,
+      borderColor: accentHex,
+      borderWidth: 1,
+      borderRadius: 3,
+    };
+  });
+
+  // Push the same per-chip-count palette into the legend swatches so
+  // the canvas + DOM legend stay visually in sync without a runtime
+  // observer.
+  const legendItems = el.querySelectorAll(".chip-scl-legend-swatch");
+  legendItems.forEach((sw, i) => {
+    sw.style.background = datasets[i]?.backgroundColor || accentHex;
+    sw.style.borderColor = datasets[i]?.borderColor || accentHex;
+  });
+
+  const cs = getComputedStyle(document.documentElement);
+  const textColor = (cs.getPropertyValue("--fg-muted").trim()    || "#8b949e");
+  const gridColor = (cs.getPropertyValue("--border-soft").trim() || "rgba(127,127,127,0.18)");
+
+  _activeSclChart = new window.Chart(canvas, {
+    type: "bar",
+    data: { labels, datasets },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => {
+              const sIdx = ctx.dataIndex;
+              const cIdx = ctx.datasetIndex;
+              const suite = data.suites[sIdx];
+              const cnt = chipCounts[cIdx];
+              const cell = suite?.perCount.get(cnt);
+              if (!cell || cell.value == null) return `×${cnt}: no submission`;
+              const display = formatPrimary(cell.value, suite.sid);
+              return `×${cnt}: ${display} (${ctx.parsed.y}% of best)`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          ticks: { color: textColor, font: { size: 11, weight: "600" } },
+          grid:  { color: gridColor, display: false },
+        },
+        y: {
+          beginAtZero: true,
+          suggestedMax: 100,
+          ticks: { color: textColor, callback: (v) => `${v}%` },
+          grid:  { color: gridColor },
+        },
+      },
+    },
+  });
+}
+
+// ── 04 · Compare with similar chips ──
+//
+// Surfaces chips with the largest suite-coverage overlap so users have
+// a one-click jump-off to peer hardware they'd realistically compare
+// against.  Each tile links to that chip's detail page; the section as
+// a whole is skipped when the dataset is too sparse for a meaningful
+// recommendation (e.g. the chip is the only entry in its suites).
+function renderSimilarChipsSection(slug, latestRid, sectionNum = "04") {
+  const peers = similarChipsTo(slug, { limit: 6 });
+  if (!peers.length) return "";
+
+  const tiles = peers.map((p) => {
+    const sharedLetters = p.sharedSuites
+      .filter((sid) => SUITE_META[sid])
+      .sort((a, b) => SUITE_ORDER.indexOf(a) - SUITE_ORDER.indexOf(b))
+      .map((sid) => `
+        <span class="chip-peer-suite" data-suite="${esc(SUITE_META[sid].letter)}"
+              title="${esc(SUITE_META[sid].title)}">${esc(SUITE_META[sid].letter)}</span>
+      `).join("");
+    const subL = p.totalRuns === 1 ? "run" : "runs";
+    return `
+      <a class="chip-peer-card" data-vendor="${esc(p.vendor)}" href="#/chip/${esc(p.slug)}">
+        <span class="chip-peer-vendor">
+          <span class="vendor-dot" data-vendor="${esc(p.vendor)}"></span>
+          ${esc(p.vendor)}
+        </span>
+        <span class="chip-peer-name">${esc(p.label)}</span>
+        <span class="chip-peer-meta">
+          <span class="chip-peer-suites">${sharedLetters}</span>
+          <span class="chip-peer-runs">${p.totalRuns} ${subL}</span>
+        </span>
+      </a>
+    `;
+  }).join("");
+
+  // A "Compare this chip against the strip" shortcut: seed compare with
+  // both the source chip and each peer's freshest run.  Cheaper than
+  // making every peer card itself a basket toggle and keeps the section
+  // a navigation surface rather than a hidden mutation.
+  return `
+    <section class="section">
+      <div class="section-header section-header--stacked">
+        <div class="section-title">
+          <span class="eyebrow">${sectionNum} · Peers</span>
+          <h2>Compare with similar chips</h2>
+        </div>
+        <p class="section-sub">Chips that compete on the same workload suites — sorted by suite overlap, same-vendor first.</p>
+      </div>
+      <div class="chip-peer-grid">${tiles}</div>
+    </section>
+  `;
+}
+
+// Per-suite KPI card.  Active suite → linkable card with the run's best
+// primary metric, framework / precision / date.  Inactive suite → muted
+// placeholder so users can see at a glance which suites the chip skipped.
+//
+// `chipSlug` threads through so the card's fallback href (Cmd-click /
+// middle-click) lands the user on the rankings view already filtered to
+// this exact chip variant — saves a few clicks compared to dumping them
+// at the unfiltered suite page.
+//
+// The dual-affordance (plain click → run modal, modified click → filtered
+// rankings) isn't visually obvious, so each active card carries both a
+// `title` tooltip and a small bottom-row hint so the cmd-click path is
+// discoverable without bloating the layout.
+function renderSuiteCard(sid, row, chipSlug) {
+  const meta = SUITE_META[sid];
+  if (!meta) return "";
+
+  if (!row) {
+    return `
+      <div class="chip-suite-card chip-suite-card--empty" data-suite="${esc(meta.letter)}">
+        <div class="chip-suite-head">
+          <span class="chip-suite-letter">${esc(meta.letter)}</span>
+          <span class="chip-suite-title">${esc(meta.title)}</span>
+        </div>
+        <div class="chip-suite-empty">Not submitted</div>
+      </div>
+    `;
+  }
+
+  const value = row[meta.primary.key];
+  const display = formatPrimary(value, sid);
+  const num   = display ? display.replace(/\s.+$/, "") : "—";
+  const unit  = display && /\s/.test(display) ? display.replace(/^[^\s]+\s/, "") : meta.primary.unit;
+
+  const rid = row.run_id || row.submission || "";
+  const ver = shortVersion(row.framework_version);
+  const fwLine = ver
+    ? `${esc(row.framework)} <span class="fw-ver">${esc(ver)}</span>`
+    : esc(row.framework || "");
+
+  const rankingsHref = `#/rankings?suite=${encodeURIComponent(sid)}${chipSlug ? `&chip=${encodeURIComponent(chipSlug)}` : ""}`;
+
+  // Rank among unique chips in this suite (not among raw rows — a chip
+  // with 4 vLLM versions shouldn't take up 4 ranking slots in its own
+  // badge).  Highlight top-3 with the same medal palette as Home / Rankings.
+  const rank = chipSlug ? rankChipInSuite(chipSlug, sid) : null;
+  const medal = rank
+    ? (rank.rank === 1 ? " is-gold"
+       : rank.rank === 2 ? " is-silver"
+       : rank.rank === 3 ? " is-bronze" : "")
+    : "";
+
+  // Two affordances on one element. Spell them out in the tooltip and
+  // (more visibly) in a tiny hint footer so the modifier-click path is
+  // findable without a separate help layer.
+  const chipLabel = row._chip_label || "this chip";
+  const cardTitle = `Click to open this run · Cmd/Ctrl-click to see all ${chipLabel} runs in Suite ${meta.letter}`;
+
+  // Now that chip_count variants share a chip-detail page, the "best
+  // per suite" run can land on any fan-out (×1 vs ×4 vs ×8).  Surface
+  // that explicitly so users don't read the metric as "single-card
+  // throughput".  Only render the badge when the chip has multiple
+  // variants — otherwise it's noise.
+  const allCounts = chipSlug ? chipCountsForChip(chipSlug) : [];
+  const bestCount = row.chip_count || 1;
+  const showCountBadge = allCounts.length > 1;
+
+  return `
+    <a class="chip-suite-card"
+       data-suite="${esc(meta.letter)}"
+       data-open-run="${esc(rid)}"
+       href="${esc(rankingsHref)}"
+       title="${esc(cardTitle)}">
+      <div class="chip-suite-head">
+        <span class="chip-suite-letter">${esc(meta.letter)}</span>
+        <span class="chip-suite-title">${esc(meta.title)}</span>
+        ${rank ? `
+          <span class="chip-suite-rank${medal}"
+                title="Ranked #${rank.rank} of ${rank.total} chips in Suite ${esc(meta.letter)}">
+            #${rank.rank}<span class="chip-suite-rank-total"> / ${rank.total}</span>
+          </span>
+        ` : ""}
+      </div>
+      <div class="chip-suite-metric">
+        <span class="chip-suite-val">${esc(num)}</span>
+        ${unit ? `<span class="chip-suite-unit">${esc(unit)}</span>` : ""}
+        ${showCountBadge
+          ? `<span class="chip-suite-count" title="Best score in this suite came from a ×${bestCount} deployment">×${bestCount}</span>`
+          : ""}
+      </div>
+      <div class="chip-suite-meta">
+        ${fwLine}${row.precision ? ` · ${esc(row.precision)}` : ""}${row.date ? ` · ${esc(fmtDate(row.date))}` : ""}
+      </div>
+      <div class="chip-suite-hint" aria-hidden="true">
+        <span class="chip-suite-hint-primary">Open run</span>
+        <span class="chip-suite-hint-sep">·</span>
+        <span class="chip-suite-hint-secondary"><kbd>⌘</kbd>+click for all in suite</span>
+      </div>
+    </a>
+  `;
+}
+
+function renderRunsTable(rs) {
+  // Group by chip_count then date desc; runs at the same fan-out land
+  // next to each other so users can scan "what does ×1 look like vs ×8"
+  // without flipping rows.  Within a fan-out, newest first.
+  const sorted = rs.slice().sort((a, b) => {
+    const ca = a.chip_count || 1;
+    const cb = b.chip_count || 1;
+    if (ca !== cb) return ca - cb;
+    return String(b.date || "").localeCompare(String(a.date || ""));
+  });
+  // Show the Chips column only when this chip actually has variants —
+  // adding a column that only ever reads "×1" is just visual debt.
+  const counts = new Set(rs.map((r) => r.chip_count || 1));
+  const showChipCol = counts.size > 1;
+  return `
+    <table class="data-table chip-runs">
+      <thead>
+        <tr>
+          <th class="col-suite">Suite</th>
+          ${showChipCol ? `<th class="col-chips">Chips</th>` : ""}
+          <th class="col-framework">Framework</th>
+          <th class="col-precision">Precision</th>
+          <th class="col-primary">Primary metric</th>
+          <th class="col-date">Date</th>
+          <th class="col-submitter">Submitter</th>
+          <th class="col-tier">Tier</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${sorted.map((r) => renderRunRow(r, showChipCol)).join("")}
+      </tbody>
+    </table>
+  `;
+}
+
+function renderRunRow(row, showChipCol) {
+  const meta = SUITE_META[row.suite];
+  const rid = row.run_id || row.submission || "";
+  const ver = shortVersion(row.framework_version);
+  const fwLine = ver
+    ? `${esc(row.framework)} <span class="fw-ver">${esc(ver)}</span>`
+    : esc(row.framework || "");
+  const v = meta ? row[meta.primary.key] : row.primary_metric;
+  const display = meta ? formatPrimary(v, row.suite) : (v != null ? String(v) : "");
+  const handle = submitterHandle(row.submitted_by);
+  const tierClass = row.tier ? ` tier-${esc(row.tier)}` : "";
+  const cnt = row.chip_count || 1;
+
+  // a11y: tabindex makes the row keyboard-reachable; modal.js's
+  // keydown delegate fires openModal on Enter/Space.  Native <tr>
+  // semantics stay so screen-reader column headers still pair with
+  // each cell.
+  const a11yLabel = `Open run details: ${meta ? meta.title + " · " : ""}${row.framework || ""} ${display || ""}`.trim();
+  return `
+    <tr data-open-run="${esc(rid)}"
+        data-suite="${meta ? esc(meta.letter) : ""}"
+        tabindex="0"
+        aria-label="${esc(a11yLabel)}">
+      <td class="col-suite">
+        <span class="chip-runs-suite">
+          <span class="chip-suite-letter chip-suite-letter--inline">${meta ? esc(meta.letter) : "·"}</span>
+          <span class="chip-runs-suite-title">${meta ? esc(meta.title) : esc(row.suite || "")}</span>
+        </span>
+      </td>
+      ${showChipCol ? `<td class="col-chips tnum"><span class="chip-runs-count">×${cnt}</span></td>` : ""}
+      <td class="col-framework">${fwLine}</td>
+      <td class="col-precision">${esc(row.precision || "—")}</td>
+      <td class="col-primary"><span class="chip-runs-metric">${esc(display || "—")}</span></td>
+      <td class="col-date">${esc(fmtDate(row.date))}</td>
+      <td class="col-submitter">${handle ? `@${esc(handle)}` : "—"}</td>
+      <td class="col-tier"><span class="badge${tierClass}">${esc(row.tier || "—")}</span></td>
+    </tr>
+  `;
+}
diff --git a/leaderboard/site/assets/js/views/compare.js b/leaderboard/site/assets/js/views/compare.js
new file mode 100644
index 00000000..c5a550e1
--- /dev/null
+++ b/leaderboard/site/assets/js/views/compare.js
@@ -0,0 +1,1070 @@
+// views/compare.js — Side-by-side comparison of basket runs on one suite.
+//
+// Page anatomy:
+//   • Compact hero with the active suite's eyebrow + title + tagline.
+//   • Basket strip listing each compared run (vendor-tinted dot, chip
+//     name + framework, × remove button) and a "Clear all" affordance.
+//   • Suite switcher (re-uses .rk-suite-pill from rankings).  Switching
+//     the suite does NOT clear the basket — instead each run resolves
+//     to its same-hardware best row in the newly-selected suite, so the
+//     user can compare the same set of configurations across metrics.
+//   • Per-metric comparison table:
+//       rows  = metrics in SUITE_COLUMNS[suiteId]
+//       cols  = runs (one per basket entry)
+//       cells = horizontal bar normalized to the row's best run + value,
+//               with a ★ on the winning run.  For "lower is better"
+//               metrics the bar uses min / value so the winner still
+//               renders at 100 % width.
+//
+// Empty state when the basket has zero runs, with a deep link back to
+// rankings to start picking.
+//
+// On basket changes the view re-renders itself, but only when /compare
+// is still the active route — otherwise we'd clobber whatever view the
+// user just navigated to.
+
+import {
+  SUITE_ORDER, SUITE_META, SUITE_COLUMNS, formatMetric,
+  rowByRunId, bestRowForRunInSuite, chipCloudData,
+  representativeRunForChip,
+} from "../data.js";
+import {
+  esc, fmtNum, buildHash, chipHref, parseHash, shortVersion,
+  copyToClipboard, flashButtonLabel, downloadCanvasAsPng,
+} from "../utils.js";
+import {
+  basketGet, basketHas, basketToggle, basketOnChange,
+} from "../router.js";
+
+export function render({ el, query }) {
+  // Seed from ?runs=a,b,c (back-compat: ?chips=…).  Used both for
+  // shareable links and for the Home chip-cloud quick-add affordance,
+  // which sends users here with a single run pre-baked into the URL.
+  //
+  // Behaviour:
+  //   • Add each listed run to the basket if it isn't already there —
+  //     existing entries are preserved so users coming from Home can
+  //     stack a chip on top of a basket they already built up.
+  //   • Strip ?runs= / ?chips= from the URL after consuming so that
+  //     subsequent re-renders (suite toggles, basket edits) don't
+  //     reprocess the same param.  This also keeps the address bar
+  //     clean once the state has moved into in-memory basket.
+  const seed = query.runs || query.chips;
+  if (seed) {
+    const added = String(seed).split(",").map((x) => x.trim()).filter(Boolean);
+    // Strip ?runs= / ?chips= from the URL BEFORE mutating the basket.
+    // basketToggle fires the listener synchronously which re-renders by
+    // re-parsing location.hash — if we don't strip first, that re-render
+    // sees the same seed param and recurses through render() again.
+    if (added.length > 0) {
+      const cleaned = { ...query };
+      delete cleaned.runs;
+      delete cleaned.chips;
+      const newHash = buildHash("/compare", cleaned);
+      if (location.hash !== newHash) {
+        history.replaceState(null, "", newHash);
+      }
+    }
+    for (const s of added) {
+      if (!basketHas(s)) basketToggle(s);
+    }
+  }
+
+  const runIds = basketGet();
+
+  if (runIds.length === 0) {
+    el.innerHTML = `
+      <section class="cmp-hero">
+        <span class="eyebrow">Compare</span>
+        <h1 class="cmp-hero-title">Side-by-Side Comparison</h1>
+        <p class="cmp-hero-sub">
+          Pick chips below to start a head-to-head across every metric.
+          You can also tick runs from
+          <a class="cmp-hero-link" href="#/rankings">any rankings page</a>
+          to compare specific framework / precision configurations.
+        </p>
+      </section>
+      ${renderChipCloudBlock({
+        title: "Pick chips to compare",
+        hint: "Each click adds that chip's most recent run.  Choose any two or more.",
+        compact: false,
+      })}
+    `;
+    bindClicks(el);
+    attachBasketListener(el);
+    return;
+  }
+
+  // Resolve each basket entry to its source (seed) row.  Runs that no
+  // longer exist in the dataset (stale shared link) are silently dropped.
+  const seeds = runIds
+    .map((rid) => ({ rid, row: rowByRunId(rid) }))
+    .filter((x) => x.row);
+
+  // Edge case: the basket has entries but every one of them resolves to
+  // null — almost always a shared comparison URL whose runs have since
+  // been re-uploaded under new ids or pruned.  Without this short-
+  // circuit the page renders a header-only table and an empty chart
+  // grid with no explanation, which reads like a broken UI.
+  if (seeds.length === 0) {
+    el.innerHTML = `
+      <section class="cmp-hero">
+        <span class="eyebrow">Compare</span>
+        <h1 class="cmp-hero-title">Side-by-Side Comparison</h1>
+        <p class="cmp-hero-sub">
+          This comparison link refers to ${runIds.length === 1 ? "a run" : `${runIds.length} runs`}
+          that ${runIds.length === 1 ? "is" : "are"} no longer in the dataset
+          (re-uploaded or pruned). Pick chips below to start a new comparison.
+        </p>
+      </section>
+      <div class="cmp-basket cmp-basket--empty">
+        <span class="cmp-basket-label">Comparing</span>
+        <span class="cmp-basket-stale">${runIds.length} stale ${runIds.length === 1 ? "run" : "runs"}</span>
+        <div class="cmp-basket-actions">
+          <button class="cmp-basket-clear" data-basket-clear="1" type="button">Clear &amp; start over</button>
+        </div>
+      </div>
+      ${renderChipCloudBlock({
+        title: "Pick chips to compare",
+        hint: "Each click adds that chip's most recent run.  Choose any two or more.",
+        compact: false,
+      })}
+    `;
+    bindClicks(el);
+    attachBasketListener(el);
+    return;
+  }
+
+  // Default suite: first one in canonical order that any selected run
+  // has data for; otherwise the seed's own suite.  Lets the page open
+  // on something useful even without a ?suite= param.
+  let suiteId = SUITE_ORDER.includes(query.suite) ? query.suite : null;
+  if (!suiteId) {
+    for (const sid of SUITE_ORDER) {
+      const hasData = seeds.some(({ rid }) => bestRowForRunInSuite(rid, sid));
+      if (hasData) { suiteId = sid; break; }
+    }
+    if (!suiteId) suiteId = (seeds[0] && seeds[0].row.suite) || SUITE_ORDER[0];
+  }
+  const meta = SUITE_META[suiteId];
+  const cols = SUITE_COLUMNS[suiteId];
+
+  // For each basket run resolve the equivalent row in the active suite.
+  // The seed row (where the user originally ticked the checkbox) is
+  // used purely for display attribution — chip name, vendor, framework
+  // chip in the basket strip — so the user sees the configuration they
+  // selected even when this suite has no matching data.
+  const chips = seeds.map(({ rid, row }) => ({
+    rid,
+    label: row._chip_label,
+    vendor: row.vendor,
+    seedRow: row,
+    suiteRow: bestRowForRunInSuite(rid, suiteId),
+  }));
+
+  // When none of the selected chips have data for the active suite the
+  // page would otherwise read as a wall of "-" dashes with no charts.
+  // Suggest the suites that DO have data so users have a clear next step.
+  const suitesWithData = SUITE_ORDER.filter((sid) =>
+    chips.some((c) => bestRowForRunInSuite(c.rid, sid))
+  );
+  const suiteEmpty = chips.length > 0 && chips.every((c) => !c.suiteRow);
+
+  el.innerHTML = `
+    <section class="cmp-hero">
+      <span class="eyebrow">Compare</span>
+      <h1 class="cmp-hero-title">${esc(meta.title)}</h1>
+      <p class="cmp-hero-sub">${esc(meta.tagline)}</p>
+    </section>
+
+    ${renderChipCloudBlock({
+      title: "Pick chips to compare",
+      hint: "Click a chip to add or remove its most recent run.  Already-selected chips are highlighted.",
+      compact: true,
+    })}
+
+    <div class="cmp-basket">
+      <span class="cmp-basket-label">Comparing</span>
+      ${chips.map((c) => renderBasketChip(c)).join("")}
+      <div class="cmp-basket-actions">
+        <button class="copy-btn cmp-basket-share"
+                data-basket-share="1"
+                type="button"
+                title="Copy a URL that pre-loads this comparison.">
+          <span class="copy-btn-icon" aria-hidden="true">↗</span>
+          <span class="copy-btn-label">Copy share link</span>
+        </button>
+        <button class="cmp-basket-clear" data-basket-clear="1" type="button">Clear all</button>
+      </div>
+    </div>
+
+    <div class="cmp-suite-row">
+      <span class="rk-facet-label">Suite</span>
+      <div class="rk-suite-pills">
+        ${SUITE_ORDER.map((sid) => renderSuitePill(sid, sid === suiteId)).join("")}
+      </div>
+    </div>
+
+    ${suiteEmpty ? `
+      <div class="cmp-suite-empty">
+        <span class="state-icon" aria-hidden="true">∅</span>
+        <p>None of the selected chips have <strong>Suite ${esc(meta.letter)} · ${esc(meta.title)}</strong> data.</p>
+        ${suitesWithData.length ? `
+          <p class="cmp-suite-empty-sub">Try
+            ${suitesWithData.map((sid) => `
+              <a class="cmp-suite-empty-link" href="${esc(buildHash("/compare", { ...query, suite: sid }))}">
+                Suite ${esc(SUITE_META[sid].letter)}
+              </a>
+            `).join(" · ")}
+            instead.
+          </p>
+        ` : `<p class="cmp-suite-empty-sub">The chips you picked have no submissions on file.</p>`}
+      </div>
+    ` : `
+      <div class="cmp-table-wrap">
+        ${renderCmpTable(suiteId, cols, chips)}
+      </div>
+
+      <div class="cmp-charts-wrap" data-suite="${esc(meta.letter)}"></div>
+    `}
+  `;
+
+  bindClicks(el);
+  attachBasketListener(el);
+  renderCmpCharts(el.querySelector(".cmp-charts-wrap"), suiteId, chips);
+}
+
+// ── Chip cloud — quick-add affordance ──
+//
+// Reuses the same chip-tile styling as the home page so users get a
+// familiar visual rhythm.  Tiles with an `.in-basket` modifier mark
+// chips that already have at least one row in the basket (compared by
+// chip name, not slug — so e.g. an H100×8 chip already in the basket
+// will mark the H100 tile as selected even though the cloud surfaces
+// the most popular variant of each chip).
+function renderChipCloudBlock({ title, hint, compact }) {
+  const chips = chipCloudData();
+  const basketChipNames = new Set(
+    basketGet()
+      .map((rid) => rowByRunId(rid))
+      .filter(Boolean)
+      .map((r) => r.chip)
+  );
+  if (!chips.length) return "";
+  const tiles = chips.map((c) => {
+    const inBasket = basketChipNames.has(c.label);
+    const subL  = c.submissions === 1 ? "submission" : "submissions";
+    const suiteL = c.suites.length === 1 ? "suite" : "suites";
+    const variantPart = c.variants > 1 ? ` · ${c.variants} chip-count variants` : "";
+    // Left-click is intercepted by bindClicks for the toggle add/remove
+    // basket behaviour; the href is the middle-click / Cmd-click /
+    // copy-link fallback and points at the chip's overview page so it
+    // matches every other chip-name link on the site.
+    //
+    // a11y: tile doubles as a toggle (left-click) and a navigation link
+    // (modifier-click).  We treat the toggle as the primary action for
+    // assistive tech — `role="button"` + `aria-pressed` mirrors the
+    // visual "in-basket" state.  Modifier-click is documented in the
+    // tooltip so non-mouse users know about the secondary affordance.
+    const a11yTitle = `${c.label}: ${c.submissions} ${subL} across ${c.suites.length} ${suiteL}${variantPart}. Click to ${inBasket ? "remove from" : "add to"} compare basket; Cmd / Ctrl-click to open chip overview.`;
+    return `
+      <a class="chip-tile size-${esc(c.size)}${inBasket ? " in-basket" : ""}"
+         href="#/chip/${esc(c.slug)}"
+         data-vendor="${esc(c.vendor)}"
+         data-cmp-add-slug="${esc(c.slug)}"
+         role="button"
+         aria-pressed="${inBasket ? "true" : "false"}"
+         title="${esc(a11yTitle)}">
+        <span class="chip-tile-name">${esc(c.label)}</span>
+        <span class="chip-tile-count">${fmtNum(c.submissions)}</span>
+      </a>
+    `;
+  }).join("");
+  return `
+    <section class="cmp-cloud${compact ? " is-compact" : ""}">
+      <div class="cmp-cloud-head">
+        <h2 class="cmp-cloud-title">${esc(title)}</h2>
+        ${hint ? `<p class="cmp-cloud-hint">${esc(hint)}</p>` : ""}
+      </div>
+      <div class="chip-cloud">${tiles}</div>
+    </section>
+  `;
+}
+
+// ── Per-suite head-to-head charts ──────────────────────────────
+//
+// Lives below the comparison table and renders one or more Chart.js
+// charts that overlay every basket run on the same canvas.  Each suite
+// picks its most distinctive visualization (offline throughput curves,
+// quantization-format throughput, scaling efficiency, etc.) instead of
+// recycling the same chart everywhere.
+//
+// Charts are torn down on every render so re-attaching never leaks
+// canvases.  When the active suite has no chart data for the current
+// basket the section is hidden entirely — rather than show empty
+// canvases — to keep the page short.
+
+const _activeCmpCharts = [];
+
+// Distinct chip palette — same hues as legacy main so users get a
+// stable visual ID across pages.  Cycles modulo length when there are
+// more chips than colors.
+const CMP_PALETTE = [
+  "#3b82f6", "#14b8a6", "#f97316", "#ec4899",
+  "#a855f7", "#84cc16", "#f59e0b", "#06b6d4",
+];
+function _palette(i) { return CMP_PALETTE[i % CMP_PALETTE.length]; }
+
+function _destroyCmpCharts() {
+  while (_activeCmpCharts.length) {
+    const c = _activeCmpCharts.pop();
+    try { c.destroy(); } catch (_) { /* noop */ }
+  }
+}
+
+function _cmpChartColors() {
+  const cs = getComputedStyle(document.documentElement);
+  return {
+    text: (cs.getPropertyValue("--fg-muted").trim()    || "#8b949e"),
+    grid: (cs.getPropertyValue("--border-soft").trim() || "rgba(127,127,127,0.18)"),
+  };
+}
+
+function renderCmpCharts(wrap, suiteId, chips) {
+  if (!wrap) return;
+  _destroyCmpCharts();
+  wrap.innerHTML = "";
+
+  if (typeof window.Chart !== "function") return;
+  // Only chips that actually have a suite row contribute to the chart;
+  // ones missing data for this suite are listed separately as a note.
+  const active = chips.filter((c) => c.suiteRow);
+  if (active.length < 1) return;
+  const missing = chips.filter((c) => !c.suiteRow);
+
+  const renderer = CMP_CHART_RENDERERS[suiteId];
+  if (!renderer) return;
+
+  const charts = renderer(active);
+  if (!charts || !charts.length) return;
+
+  wrap.innerHTML = `
+    <div class="cmp-charts-head">
+      <h2 class="cmp-charts-title">Head-to-head charts</h2>
+      <p class="cmp-charts-hint">${esc(
+        active.length === chips.length
+          ? "Each chip overlaid on the same axes."
+          : `${active.length} of ${chips.length} chips have Suite ${SUITE_META[suiteId].letter} data — others are listed below.`
+      )}</p>
+    </div>
+  `;
+
+  for (const spec of charts) {
+    const card = document.createElement("div");
+    card.className = "cmp-chart-card";
+    card.innerHTML = `
+      <div class="cmp-chart-card-head">
+        <h3 class="cmp-chart-card-title">${esc(spec.title)}</h3>
+        ${spec.subtitle ? `<p class="cmp-chart-card-sub">${esc(spec.subtitle)}</p>` : ""}
+      </div>
+      <div class="cmp-chart-card-body"></div>
+    `;
+    const body = card.querySelector(".cmp-chart-card-body");
+    const canvasWrap = document.createElement("div");
+    canvasWrap.className = "cmp-chart-canvas";
+    canvasWrap.style.height = (spec.height || 220) + "px";
+    const canvas = document.createElement("canvas");
+    canvasWrap.appendChild(canvas);
+    // Download-as-PNG button — anchors against the canvas wrapper
+    // (which is `position: relative` in rankings.css).  data-chart-dl
+    // value is the chart spec's title slug so the saved file reads
+    // as e.g. "compare-suite-a-throughput-by-concurrency.png".
+    const dlBtn = document.createElement("button");
+    dlBtn.className = "chart-dl-btn";
+    dlBtn.type = "button";
+    dlBtn.dataset.chartDl = (spec.title || "chart").toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+    dlBtn.title = "Download this chart as a PNG image";
+    dlBtn.innerHTML = `
+      <span class="chart-dl-btn-icon" aria-hidden="true">↓</span>
+      <span class="chart-dl-btn-label">PNG</span>
+    `;
+    canvasWrap.appendChild(dlBtn);
+    body.appendChild(canvasWrap);
+    body.appendChild(_cmpLegend(spec.legend || []));
+    wrap.appendChild(card);
+    try {
+      _activeCmpCharts.push(new window.Chart(canvas, spec.config));
+    } catch (e) {
+      body.innerHTML = `<div class="cmp-chart-empty">Chart failed to render.</div>`;
+    }
+  }
+
+  if (missing.length) {
+    const note = document.createElement("div");
+    note.className = "cmp-charts-missing";
+    const names = missing.map((m) => esc(m.label)).join(", ");
+    note.innerHTML = `<strong>No Suite ${esc(SUITE_META[suiteId].letter)} data:</strong> ${names}`;
+    wrap.appendChild(note);
+  }
+}
+
+function _cmpLegend(items) {
+  const div = document.createElement("div");
+  div.className = "cmp-chart-legend";
+  div.innerHTML = items.map(({ color, label }) => `
+    <span class="cmp-chart-legend-item">
+      <span class="cmp-chart-legend-swatch" style="background:${esc(color)}"></span>
+      ${esc(label)}
+    </span>
+  `).join("");
+  return div;
+}
+
+// ── Per-suite chart specs ─────────────────────────────────────
+//
+// Each entry returns an array of chart specs ({title, subtitle, config,
+// legend}).  Config goes straight to new Chart(canvas, config).
+
+const CMP_CHART_RENDERERS = {
+  suite_A: (chips) => _offlineConcurrencyBars(chips, "Single-chip offline throughput",  "tok/s by concurrency"),
+  suite_F: (chips) => _offlineConcurrencyBars(chips, "Edge offline throughput",          "tok/s by concurrency"),
+  suite_G: (chips) => _offlineConcurrencyBars(chips, "MoE offline throughput",           "tok/s by concurrency"),
+  suite_B: (chips) => [
+    ..._offlineConcurrencyBars(chips, "Multi-chip total throughput", "tok/s by concurrency"),
+    ..._perChipThroughputBars(chips),
+  ],
+  suite_C: (chips) => _quantThroughputBars(chips),
+  suite_D: (chips) => _longContextLatency(chips),
+  suite_E: (chips) => _scalingCurves(chips),
+};
+
+// Shared: grouped bar where x = concurrency level, groups = chips.
+// Each chip's offline.throughput array contributes one bar at each
+// concurrency level.  Falls back to a single primary-metric bar when
+// the run lacks per-concurrency series.
+function _offlineConcurrencyBars(chips, title, subtitle) {
+  const C = _cmpChartColors();
+  // Collect the union of concurrency labels across all chips.
+  const labelSet = new Set();
+  for (const c of chips) {
+    const off = c.suiteRow.viz && c.suiteRow.viz.offline;
+    if (off && Array.isArray(off.labels)) {
+      for (const l of off.labels) labelSet.add(String(l));
+    }
+  }
+  if (labelSet.size === 0) {
+    // No per-concurrency data; render simple primary-metric bar across chips.
+    const labels = chips.map((c) => c.label);
+    const data = chips.map((c) => c.suiteRow.offline_throughput ?? null);
+    return [{
+      title,
+      subtitle: "Peak offline throughput",
+      height: 200,
+      config: {
+        type: "bar",
+        data: {
+          labels,
+          datasets: [{
+            data,
+            backgroundColor: chips.map((_, i) => _palette(i) + "99"),
+            borderColor:     chips.map((_, i) => _palette(i)),
+            borderWidth: 1, borderRadius: 3,
+          }],
+        },
+        options: {
+          responsive: true, maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: {
+            x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
+            y: { ticks: { color: C.text, font: { size: 11 }, callback: (v) => v.toLocaleString() }, grid: { color: C.grid }, title: { display: true, text: "tokens / sec", color: C.text, font: { size: 11 } } },
+          },
+        },
+      },
+      legend: [],
+    }];
+  }
+  const labels = Array.from(labelSet).sort((a, b) => Number(a) - Number(b));
+  const datasets = chips.map((c, i) => {
+    const off = c.suiteRow.viz && c.suiteRow.viz.offline;
+    let data = [];
+    if (off && Array.isArray(off.labels)) {
+      const idx = new Map(off.labels.map((l, j) => [String(l), j]));
+      data = labels.map((l) => {
+        const j = idx.get(String(l));
+        return j == null ? null : off.throughput[j];
+      });
+    } else {
+      data = labels.map(() => null);
+    }
+    return {
+      label: c.label,
+      data,
+      backgroundColor: _palette(i) + "99",
+      borderColor:     _palette(i),
+      borderWidth: 1, borderRadius: 3,
+    };
+  });
+  return [{
+    title,
+    subtitle,
+    height: 230,
+    config: {
+      type: "bar",
+      data: { labels, datasets },
+      options: {
+        responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: {
+          x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid }, title: { display: true, text: "concurrency", color: C.text, font: { size: 11 } } },
+          y: { ticks: { color: C.text, font: { size: 11 }, callback: (v) => v.toLocaleString() }, grid: { color: C.grid }, title: { display: true, text: "tokens / sec", color: C.text, font: { size: 11 } } },
+        },
+      },
+    },
+    legend: chips.map((c, i) => ({ color: _palette(i), label: c.label })),
+  }];
+}
+
+function _perChipThroughputBars(chips) {
+  const C = _cmpChartColors();
+  const labels = chips.map((c) => c.label);
+  const data   = chips.map((c) => c.suiteRow.tokens_per_sec_per_chip ?? null);
+  if (data.every((v) => v == null)) return [];
+  return [{
+    title: "Per-chip throughput",
+    subtitle: "tok/s per accelerator, scales with hardware count",
+    height: 200,
+    config: {
+      type: "bar",
+      data: {
+        labels,
+        datasets: [{
+          data,
+          backgroundColor: chips.map((_, i) => _palette(i) + "99"),
+          borderColor:     chips.map((_, i) => _palette(i)),
+          borderWidth: 1, borderRadius: 3,
+        }],
+      },
+      options: {
+        responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: {
+          x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
+          y: { ticks: { color: C.text, font: { size: 11 }, callback: (v) => v.toLocaleString() }, grid: { color: C.grid }, title: { display: true, text: "tok / sec / chip", color: C.text, font: { size: 11 } } },
+        },
+      },
+    },
+    legend: [],
+  }];
+}
+
+function _quantThroughputBars(chips) {
+  const C = _cmpChartColors();
+  // Collect the union of precision formats across all chips.
+  const fmtSet = new Set();
+  for (const c of chips) {
+    const v = c.suiteRow.viz;
+    if (v && Array.isArray(v.precisions)) {
+      for (const p of v.precisions) fmtSet.add(p);
+    }
+  }
+  if (fmtSet.size === 0) return [];
+  const PREC_ORDER = ["BF16", "FP16", "FP8", "W8A8", "W8A16", "W4A16"];
+  const labels = Array.from(fmtSet).sort((a, b) => {
+    const ai = PREC_ORDER.indexOf(a), bi = PREC_ORDER.indexOf(b);
+    if (ai === -1 && bi === -1) return a.localeCompare(b);
+    if (ai === -1) return 1;
+    if (bi === -1) return -1;
+    return ai - bi;
+  });
+  const datasets = chips.map((c, i) => {
+    const v = c.suiteRow.viz;
+    let data = [];
+    if (v && Array.isArray(v.precisions)) {
+      const idx = new Map(v.precisions.map((p, j) => [p, j]));
+      data = labels.map((p) => {
+        const j = idx.get(p);
+        return j == null ? null : v.throughput[j];
+      });
+    } else {
+      data = labels.map(() => null);
+    }
+    return {
+      label: c.label,
+      data,
+      backgroundColor: _palette(i) + "99",
+      borderColor:     _palette(i),
+      borderWidth: 1, borderRadius: 3,
+    };
+  });
+  return [{
+    title: "Throughput across quantization formats",
+    subtitle: "tok/s by precision · grouped by chip",
+    height: 230,
+    config: {
+      type: "bar",
+      data: { labels, datasets },
+      options: {
+        responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: {
+          x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid }, title: { display: true, text: "precision", color: C.text, font: { size: 11 } } },
+          y: { ticks: { color: C.text, font: { size: 11 }, callback: (v) => v.toLocaleString(undefined, { maximumFractionDigits: 0 }) }, grid: { color: C.grid }, title: { display: true, text: "tokens / sec", color: C.text, font: { size: 11 } } },
+        },
+      },
+    },
+    legend: chips.map((c, i) => ({ color: _palette(i), label: c.label })),
+  }];
+}
+
+function _longContextLatency(chips) {
+  const C = _cmpChartColors();
+  const buckets = [
+    { key: "ttft_p50", label: "TTFT p50" },
+    { key: "ttft_p90", label: "TTFT p90" },
+    { key: "ttft_p99", label: "TTFT p99" },
+    { key: "tpot_p50", label: "TPOT p50" },
+    { key: "tpot_p90", label: "TPOT p90" },
+    { key: "tpot_p99", label: "TPOT p99" },
+  ];
+  const datasets = chips.map((c, i) => {
+    const v = (c.suiteRow.viz && c.suiteRow.viz.interactive) || {};
+    return {
+      label: c.label,
+      data: buckets.map((b) => (v[b.key] == null ? null : v[b.key])),
+      backgroundColor: _palette(i) + "99",
+      borderColor:     _palette(i),
+      borderWidth: 1, borderRadius: 3,
+    };
+  });
+  // Drop datasets that are entirely null.
+  const filtered = datasets.filter((ds) => ds.data.some((v) => v != null));
+  if (!filtered.length) return [];
+  return [{
+    title: "Long-context latency",
+    subtitle: "ms · TTFT (prefill) and TPOT (decode) percentiles",
+    height: 280,
+    config: {
+      type: "bar",
+      data: { labels: buckets.map((b) => b.label), datasets: filtered },
+      options: {
+        indexAxis: "y",
+        responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: {
+          x: { ticks: { color: C.text, font: { size: 11 }, callback: (v) => v >= 1000 ? (v / 1000).toFixed(1) + "s" : v + "ms" }, grid: { color: C.grid }, title: { display: true, text: "latency", color: C.text, font: { size: 11 } } },
+          y: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
+        },
+      },
+    },
+    legend: chips.filter((_, i) => filtered.some((ds) => ds === datasets[i]))
+      .map((c, i) => ({ color: _palette(i), label: c.label })),
+  }];
+}
+
+function _scalingCurves(chips) {
+  const C = _cmpChartColors();
+  // Collect the union of chip counts across all chips.
+  const countSet = new Set();
+  for (const c of chips) {
+    const v = c.suiteRow.viz;
+    if (v && Array.isArray(v.chip_counts)) for (const n of v.chip_counts) countSet.add(Number(n));
+  }
+  if (!countSet.size) return [];
+  const counts = Array.from(countSet).sort((a, b) => a - b);
+  const labels = counts.map((n) => n + "× GPU");
+  const throughputDs = chips.map((c, i) => {
+    const v = c.suiteRow.viz;
+    let data = [];
+    if (v && Array.isArray(v.chip_counts)) {
+      const idx = new Map(v.chip_counts.map((n, j) => [Number(n), j]));
+      data = counts.map((n) => {
+        const j = idx.get(n);
+        return j == null ? null : v.throughput[j];
+      });
+    } else {
+      data = counts.map(() => null);
+    }
+    return {
+      label: c.label,
+      data,
+      borderColor:     _palette(i),
+      backgroundColor: _palette(i) + "22",
+      pointRadius: 4, tension: 0.25, fill: false,
+    };
+  });
+  const effDs = chips.map((c, i) => {
+    const v = c.suiteRow.viz;
+    let data = [];
+    if (v && Array.isArray(v.chip_counts)) {
+      const idx = new Map(v.chip_counts.map((n, j) => [Number(n), j]));
+      data = counts.map((n) => {
+        const j = idx.get(n);
+        return j == null ? null : v.efficiency_pct[j];
+      });
+    } else {
+      data = counts.map(() => null);
+    }
+    return {
+      label: c.label,
+      data,
+      borderColor:     _palette(i),
+      backgroundColor: _palette(i) + "22",
+      pointRadius: 4, tension: 0.25, fill: false,
+    };
+  });
+  return [
+    {
+      title: "Throughput by chip count",
+      subtitle: "tok/s · one line per chip",
+      height: 240,
+      config: {
+        type: "line",
+        data: { labels, datasets: throughputDs },
+        options: {
+          responsive: true, maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: {
+            x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
+            y: { ticks: { color: C.text, font: { size: 11 }, callback: (v) => v.toLocaleString() }, grid: { color: C.grid }, title: { display: true, text: "tokens / sec", color: C.text, font: { size: 11 } } },
+          },
+        },
+      },
+      legend: chips.map((c, i) => ({ color: _palette(i), label: c.label })),
+    },
+    {
+      title: "Scaling efficiency vs linear ideal",
+      subtitle: "% · 100 % is perfect linear scaling",
+      height: 240,
+      config: {
+        type: "line",
+        data: {
+          labels,
+          datasets: [
+            ...effDs,
+            { label: "Linear ideal", data: counts.map(() => 100),
+              borderColor: C.text, borderDash: [6, 4], pointRadius: 0, fill: false, tension: 0 },
+            { label: "Good (80 %)", data: counts.map(() => 80),
+              borderColor: "#2dd4bf", borderDash: [3, 3], pointRadius: 0, fill: false, tension: 0 },
+          ],
+        },
+        options: {
+          responsive: true, maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: {
+            x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
+            y: { min: 0, max: 110, ticks: { color: C.text, font: { size: 11 }, callback: (v) => v + "%" }, grid: { color: C.grid }, title: { display: true, text: "efficiency %", color: C.text, font: { size: 11 } } },
+          },
+        },
+      },
+      legend: chips.map((c, i) => ({ color: _palette(i), label: c.label }))
+        .concat([{ color: "#2dd4bf", label: "Good (80 %)" }]),
+    },
+  ];
+}
+
+function renderSuitePill(sid, active) {
+  const m = SUITE_META[sid];
+  return `
+    <button class="rk-suite-pill ${active ? "active" : ""}"
+            data-suite="${esc(sid)}"
+            type="button"
+            aria-pressed="${active ? "true" : "false"}"
+            title="${esc(m.tagline)}">
+      <span class="rk-suite-letter">${esc(m.letter)}</span>
+      <span class="rk-suite-name">${esc(m.title)}</span>
+    </button>
+  `;
+}
+
+// Basket strip pill — chip name on top line, framework + version + precision
+// on the second so the user can tell two same-chip runs apart at a glance.
+// Plain click on the name opens the seed run's detail modal; Cmd-click
+// falls through to the chip-level overview page.
+function renderBasketChip(c) {
+  const r = c.seedRow;
+  const ver = shortVersion(r.framework_version);
+  const fwLine = [r.framework, ver].filter(Boolean).join(" ");
+  const detail = [fwLine, r.precision].filter(Boolean).join(" · ");
+  // Chip-name link goes to the chip overview (every chip name on the
+  // site should navigate to /chip/<slug>).  The × button still removes
+  // the specific run from the basket — that's the basket-local action.
+  return `
+    <span class="cmp-basket-chip" data-vendor="${esc(c.vendor)}">
+      <span class="vendor-dot"></span>
+      <a href="${chipHref(r)}" class="cmp-basket-name">
+        <span class="cmp-basket-chip-name">${esc(c.label)}</span>
+        ${detail ? `<span class="cmp-basket-chip-meta">${esc(detail)}</span>` : ""}
+      </a>
+      <button class="cmp-basket-remove"
+              data-remove-run="${esc(c.rid)}"
+              aria-label="Remove ${esc(c.label)} from compare"
+              type="button">×</button>
+    </span>
+  `;
+}
+
+function renderCmpTable(suiteId, cols, chips) {
+  const meta = SUITE_META[suiteId];
+  return `
+    <table class="cmp-table" data-suite="${esc(meta.letter)}">
+      <thead>
+        <tr>
+          <th class="cmp-row-header" scope="col">Metric</th>
+          ${chips.map((c) => renderChipHead(c, meta)).join("")}
+        </tr>
+      </thead>
+      <tbody>
+        ${cols.map((col) => renderCmpRow(col, chips)).join("")}
+      </tbody>
+    </table>
+  `;
+}
+
+function renderChipHead(c, meta) {
+  const r = c.suiteRow;
+  let metaLine = `No Suite ${esc(meta.letter)} data`;
+  if (r) {
+    const fw = r.framework || "";
+    const ver = shortVersion(r.framework_version);
+    const fwLine = ver ? `${fw} ${ver}` : fw;
+    const parts = [fwLine, r.precision].filter(Boolean);
+    metaLine = esc(parts.join(" · "));
+  }
+  // The header links to the chip's overview page so users can drill
+  // into every run for that chip.  We use c.seedRow (the row the user
+  // ticked from rankings) rather than c.suiteRow for the slug, so the
+  // link stays stable when switching across suites.
+  const href = chipHref(c.seedRow);
+  return `
+    <th class="cmp-chip-head" data-vendor="${esc(c.vendor)}" scope="col">
+      <a class="cmp-chip-name" href="${esc(href)}">
+        <span class="vendor-dot"></span>${esc(c.label)}
+      </a>
+      <span class="cmp-chip-meta">${metaLine}</span>
+    </th>
+  `;
+}
+
+function renderCmpRow(col, chips) {
+  // Pull each chip's raw value for this metric.
+  const values = chips.map((c) => {
+    if (!c.suiteRow) return null;
+    const v = c.suiteRow[col.key];
+    if (v === null || v === undefined) return null;
+    if (typeof v === "number" && Number.isNaN(v)) return null;
+    return v;
+  });
+
+  // Find the winning index (skipped for textual columns).
+  let bestIdx = -1;
+  if (!col.textual) {
+    let best = null;
+    values.forEach((v, i) => {
+      if (typeof v !== "number") return;
+      if (best === null) { best = { v, i }; return; }
+      if (col.direction === "asc"  && v < best.v) best = { v, i };
+      if (col.direction === "desc" && v > best.v) best = { v, i };
+    });
+    if (best) bestIdx = best.i;
+  }
+
+  // Normalize bar fractions so the winner sits at 100 % regardless of
+  // metric direction.  For "lower is better" we use min / value.
+  const numerics = values.filter((v) => typeof v === "number");
+  const max = numerics.length ? Math.max(...numerics) : 0;
+  const min = numerics.length ? Math.min(...numerics) : 0;
+  const fracOf = (v) => {
+    if (typeof v !== "number") return 0;
+    if (col.textual) return 0;
+    if (col.direction === "asc") return v > 0 ? min / v : 0;
+    return max > 0 ? v / max : 0;
+  };
+
+  const dirLabel = col.direction === "asc" ? "lower is better" : "higher is better";
+
+  return `
+    <tr>
+      <td class="cmp-metric-label${col.primary ? " is-primary" : ""}">
+        ${esc(col.label)}
+        ${col.unit ? `<span class="cmp-metric-unit">${esc(col.unit)}</span>` : ""}
+        <span class="cmp-metric-dir">${dirLabel}</span>
+      </td>
+      ${chips.map((_, i) => renderCmpCell(values[i], col, i === bestIdx, fracOf(values[i]))).join("")}
+    </tr>
+  `;
+}
+
+function renderCmpCell(value, col, isWinner, frac) {
+  if (value === null || value === undefined) {
+    return `
+      <td class="cmp-cell is-missing">
+        <div class="cmp-cell-value">-</div>
+      </td>
+    `;
+  }
+  const formatted = formatMetric(value, col);
+  const pct = Math.max(2, Math.min(100, frac * 100));
+  return `
+    <td class="cmp-cell${isWinner ? " is-winner" : ""}">
+      ${col.textual ? "" : `
+        <div class="cmp-bar${isWinner ? " is-winner" : ""}">
+          <div class="cmp-bar-fill" style="width:${pct}%"></div>
+        </div>
+      `}
+      <div class="cmp-cell-value">
+        ${esc(formatted)}
+        ${col.unit && !col.textual ? `<span class="cmp-cell-unit">${esc(col.unit)}</span>` : ""}
+      </div>
+    </td>
+  `;
+}
+
+// ── Share-link copy ───────────────────────────────────────────
+//
+// Build a self-contained URL that, when opened, restores the current
+// basket on the active suite.  We always include `?runs=` (basket
+// state isn't in `location.hash` after seed consumption) and pin the
+// suite so the recipient lands on the exact view the sender saw.
+function _shareUrlForBasket(suiteId) {
+  const rids = basketGet();
+  if (!rids.length) return location.href;
+  const params = new URLSearchParams();
+  params.set("runs", rids.join(","));
+  if (suiteId) params.set("suite", suiteId);
+  const base = location.origin + location.pathname + location.search;
+  return `${base}#/compare?${params.toString()}`;
+}
+
+async function _copyShareLink(btn, suiteId) {
+  const url = _shareUrlForBasket(suiteId);
+  const ok = await copyToClipboard(url);
+  flashButtonLabel(btn, ok ? "Copied!" : "Copy failed — select & ⌘C", {
+    holdMs: ok ? 1600 : 3500,
+    className: ok ? "is-copied" : "is-copy-failed",
+    labelSelector: ".copy-btn-label",
+  });
+}
+
+// ── Click delegation ──
+//
+// Attached once per mounted view; we re-derive the active suite from
+// the URL on every click so a render-induced re-attach can never stack
+// stale closures on top of each other.
+
+function bindClicks(el) {
+  if (el.__cmpClicksAttached) return;
+  el.__cmpClicksAttached = true;
+
+  el.addEventListener("click", (ev) => {
+    if (!location.hash.startsWith("#/compare")) return;
+    const { params: query } = parseHash(location.hash);
+    const suiteId = SUITE_ORDER.includes(query.suite) ? query.suite : SUITE_ORDER[0];
+    const t = ev.target;
+
+    // Remove a single run from the basket.
+    const removeBtn = t.closest("[data-remove-run]");
+    if (removeBtn) {
+      ev.preventDefault();
+      basketToggle(removeBtn.dataset.removeRun);
+      return;
+    }
+
+    // Clear all runs.
+    if (t.closest("[data-basket-clear]")) {
+      ev.preventDefault();
+      for (const s of basketGet()) basketToggle(s);
+      return;
+    }
+
+    // Copy a shareable URL.  The basket lives in-memory on the
+    // /compare route (the seed ?runs= is stripped from the address bar
+    // after consumption), so we have to recompose the canonical link
+    // from the current basket + active suite at click time.
+    const shareBtn = t.closest("[data-basket-share]");
+    if (shareBtn) {
+      ev.preventDefault();
+      _copyShareLink(shareBtn, suiteId);
+      return;
+    }
+
+    // Chip cloud quick-add: plain click on a tile adds (or removes, if
+    // already in the basket) the chip's representative run.  Modifier
+    // clicks fall through to the anchor's href so users can still pop
+    // open the chip overview page in a new tab.
+    const cloudTile = t.closest("[data-cmp-add-slug]");
+    if (cloudTile) {
+      if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.button === 1) return;
+      ev.preventDefault();
+      const slug = cloudTile.dataset.cmpAddSlug;
+      // If any basket run already shares this chip's name, treat the
+      // click as a toggle: remove every matching basket entry instead
+      // of adding a duplicate run for the same chip.
+      const targetName = cloudTile.querySelector(".chip-tile-name")?.textContent || "";
+      const matching = basketGet()
+        .map((rid) => ({ rid, row: rowByRunId(rid) }))
+        .filter((x) => x.row && x.row.chip === targetName);
+      if (matching.length) {
+        for (const m of matching) basketToggle(m.rid);
+        return;
+      }
+      const rid = representativeRunForChip(slug);
+      if (rid) basketToggle(rid);
+      return;
+    }
+
+    // Suite switcher.  Always pin the explicit suite to the URL because
+    // the default suite for compare is dynamic (first suite where any
+    // basket run has data), so omitting the param would round-trip
+    // back to the default instead of honoring the user's pick.
+    const suitePill = t.closest(".rk-suite-pill");
+    if (suitePill) {
+      ev.preventDefault();
+      const sid = suitePill.dataset.suite;
+      if (sid && sid !== suiteId) {
+        location.hash = buildHash("/compare", { suite: sid });
+      }
+      return;
+    }
+
+    // Chart download — sits inside any .cmp-chart-canvas wrapper
+    // built by renderCmpCharts.  Resolve the canvas via DOM proximity.
+    const dlBtn = t.closest("[data-chart-dl]");
+    if (dlBtn) {
+      ev.preventDefault();
+      _downloadCmpChart(dlBtn, suiteId);
+      return;
+    }
+  });
+}
+
+async function _downloadCmpChart(btn, suiteId) {
+  const wrap = btn.closest(".cmp-chart-canvas");
+  const canvas = wrap && wrap.querySelector("canvas");
+  if (!canvas) {
+    flashButtonLabel(btn, "Failed", { holdMs: 2000, className: "is-failed", labelSelector: ".chart-dl-btn-label" });
+    return;
+  }
+  const sectionSlug = btn.dataset.chartDl || "chart";
+  const ok = await downloadCanvasAsPng(canvas, {
+    filename: `compare-${suiteId.replace(/^suite_/, "suite-")}-${sectionSlug}.png`,
+  });
+  flashButtonLabel(btn, ok ? "Saved" : "Failed", {
+    holdMs: ok ? 1400 : 2200,
+    className: ok ? "is-saved" : "is-failed",
+    labelSelector: ".chart-dl-btn-label",
+  });
+}
+
+// Subscribe once per mounted view container; when the shared basket
+// store changes we re-render — but only if /compare is still the active
+// route, otherwise we'd clobber whatever view the user navigated to.
+function attachBasketListener(el) {
+  if (el.__cmpBasketAttached) return;
+  basketOnChange(() => {
+    if (!location.hash.startsWith("#/compare")) return;
+    const { params } = parseHash(location.hash);
+    render({ el, query: params });
+  });
+  el.__cmpBasketAttached = true;
+}
diff --git a/leaderboard/site/assets/js/views/home.js b/leaderboard/site/assets/js/views/home.js
new file mode 100644
index 00000000..32744317
--- /dev/null
+++ b/leaderboard/site/assets/js/views/home.js
@@ -0,0 +1,388 @@
+// views/home.js — Home page (multi-suite overview).
+//
+// Layout:
+//   • Hero  : centered, two-line title (h1 + sub), tagline, KPI strip, CTAs.
+//             Background gradient lives on body::before (no hard edges).
+//   • 01    : Suite grid — uniform 3-col, 7 cards, each with a colored
+//             header (letter + title + metric tag + tagline + meta line:
+//             model · precision · N results · M chips) and top-6 entries
+//             in the body. CTA at the bottom.
+//   • 02    : Coverage by vendor — auto-fit cards, one per vendor.
+//   • 03    : Recent submissions — same .lb-row primitive, suite-tinted
+//             letter circle in the rank slot.
+
+import {
+  SUITE_ORDER, SUITE_META,
+  bestPerChipForSuite, suiteFacts, chipCloudData,
+  summary, recent, recentSince, formatPrimary,
+} from "../data.js";
+import {
+  esc, fmtNum, fmtDate, chipHref, buildHash,
+  shortVersion, shortModel, submitterHandle,
+} from "../utils.js";
+
+const TOP_N = 8;
+const RECENT_WINDOW_DAYS = 7;
+
+export function render({ el }) {
+  const s = summary();
+  // 7-day momentum stat for the hero strip + standalone activity
+  // ribbon below the KPIs.  The ribbon is suppressed when zero so
+  // post-launch quiet weeks don't read as a regression to viewers.
+  const recentCount = recentSince(RECENT_WINDOW_DAYS);
+  const recentRibbon = recentCount > 0
+    ? renderRecentRibbon(recentCount)
+    : "";
+  el.innerHTML = `
+    <section class="hero">
+      <h1>AccelMark Leaderboard</h1>
+      <p class="hero-sub">A Reproducible Multi-Regime AI Accelerator Benchmark</p>
+      <p class="tagline">
+        Independent measurements of inference performance across vendors.
+        Every result links back to the runner code that produced it.
+      </p>
+      <div class="hero-stats">
+        <div class="kpi"><span class="kpi-value">${fmtNum(s.total)}</span><span class="kpi-label">results</span></div>
+        <div class="kpi"><span class="kpi-value">${fmtNum(s.chips)}</span><span class="kpi-label">chip configs</span></div>
+        <div class="kpi"><span class="kpi-value">${fmtNum(s.vendors)}</span><span class="kpi-label">vendors</span></div>
+        <div class="kpi"><span class="kpi-value">${fmtNum(s.suites)}</span><span class="kpi-label">suites</span></div>
+        <div class="kpi"><span class="kpi-value">${fmtNum(s.verified)}</span><span class="kpi-label">verified</span></div>
+        ${recentCount > 0 ? `
+          <div class="kpi kpi--fresh">
+            <span class="kpi-value">${fmtNum(recentCount)}</span>
+            <span class="kpi-label">this week</span>
+          </div>
+        ` : ""}
+      </div>
+      ${recentRibbon}
+      <div class="hero-cta">
+        <a class="btn primary" href="#/rankings">Browse rankings →</a>
+        <a class="btn" href="#/compare">Compare chips</a>
+        <a class="btn" href="#/suites">What are the suites?</a>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-header">
+        <div class="section-title">
+          <span class="eyebrow">01 · Workloads</span>
+          <h2>Rankings by workload</h2>
+        </div>
+        <span class="section-sub">Each suite is a fixed model + protocol. Pick one to dive in.</span>
+      </div>
+      <div class="suite-grid" id="suite-grid"></div>
+    </section>
+
+    <section class="section">
+      <div class="section-header">
+        <div class="section-title">
+          <span class="eyebrow">02 · Coverage</span>
+          <h2>Chips on the leaderboard</h2>
+        </div>
+        <span class="section-sub">Tile size = submission count. Color = vendor.</span>
+      </div>
+      <div class="chip-cloud" id="chip-cloud"></div>
+      <div class="cloud-legend" id="cloud-legend"></div>
+    </section>
+
+    <section class="section">
+      <div class="section-header">
+        <div class="section-title">
+          <span class="eyebrow">03 · Latest activity</span>
+          <h2>Recent submissions</h2>
+        </div>
+        <a class="btn small" href="#/rankings">See all →</a>
+      </div>
+      <div class="recent-list" id="recent-list"></div>
+    </section>
+
+    <section class="section submit-section">
+      <div class="submit-card">
+        <span class="eyebrow">04 · Contribute</span>
+        <h2 class="submit-title">Submit your result</h2>
+        <p class="submit-body">
+          Benchmark your hardware with a runner script, open a pull request,
+          and CI re-runs the validation suite before a maintainer reviews. Once
+          merged, your result lands in the leaderboard within minutes.
+        </p>
+        <div class="submit-cta">
+          <a class="btn primary"
+             href="https://github.com/JuhaoLiang1997/AccelMark/blob/main/CONTRIBUTING.md"
+             target="_blank" rel="noopener">Contributor guide →</a>
+          <a class="btn"
+             href="https://github.com/JuhaoLiang1997/AccelMark/issues/new?template=submission.md"
+             target="_blank" rel="noopener">Open a submission</a>
+        </div>
+      </div>
+    </section>
+  `;
+
+  const grid = el.querySelector("#suite-grid");
+  for (const suiteId of SUITE_ORDER) {
+    grid.appendChild(renderSuiteCard(suiteId));
+  }
+
+  const cloud = el.querySelector("#chip-cloud");
+  const legend = el.querySelector("#cloud-legend");
+  renderChipCloud(cloud, legend);
+
+  const recentEl = el.querySelector("#recent-list");
+  for (const row of recent(8)) {
+    recentEl.appendChild(renderRecentRow(row));
+  }
+}
+
+// Hero ribbon directly below the KPI strip.  Tells contributors that
+// fresh submissions land on the front page (not buried in a per-suite
+// view) and gives a one-click way to scan the latest activity sorted
+// by date across the canonical default suite.
+function renderRecentRibbon(n) {
+  const label = n === 1 ? "submission" : "submissions";
+  const href = buildHash("/rankings", { suite: SUITE_ORDER[0], sort: "date:desc" });
+  return `
+    <a class="hero-recent-ribbon"
+       href="${esc(href)}"
+       title="Open rankings sorted by submission date.">
+      <span class="hero-recent-dot" aria-hidden="true"></span>
+      <span class="hero-recent-text">
+        <strong>${fmtNum(n)}</strong> new ${label}
+        <span class="hero-recent-window">in the last ${RECENT_WINDOW_DAYS} days</span>
+      </span>
+      <span class="hero-recent-cta" aria-hidden="true">See latest →</span>
+    </a>
+  `;
+}
+
+function renderSuiteCard(suiteId) {
+  const meta = SUITE_META[suiteId];
+  const facts = suiteFacts(suiteId);
+  const top = bestPerChipForSuite(suiteId).slice(0, TOP_N);
+  const empty = top.length === 0;
+
+  const card = document.createElement("article");
+  card.className = "card suite-card" + (empty ? " empty" : "");
+  card.setAttribute("data-suite", meta.letter);
+
+  const rankingsHref = buildHash("/rankings", { suite: suiteId });
+
+  const metaLine = renderSuiteMeta(suiteId, facts);
+  const header = `
+    <div class="suite-card-head">
+      <div class="suite-head-row1">
+        <div class="suite-head-left">
+          <span class="suite-letter">${esc(meta.letter)}</span>
+          <span class="suite-title">${esc(meta.title)}</span>
+        </div>
+        <span class="suite-metric-tag">${esc(meta.primary.label)}</span>
+      </div>
+      <p class="suite-head-tagline">${esc(meta.tagline)}</p>
+      <div class="suite-head-meta">${metaLine}</div>
+    </div>
+  `;
+
+  if (empty) {
+    card.innerHTML = `
+      ${header}
+      <div class="suite-card-body">Awaiting first submission.</div>
+      <div class="suite-card-foot"><a class="cta" href="${rankingsHref}">View suite →</a></div>
+    `;
+    return card;
+  }
+
+  const body = top.map((r, i) => renderLbRow(r, suiteId, i + 1)).join("");
+  card.innerHTML = `
+    ${header}
+    <div class="suite-card-body">${body}</div>
+    <div class="suite-card-foot"><a class="cta" href="${rankingsHref}">View full ranking →</a></div>
+  `;
+  return card;
+}
+
+function renderSuiteMeta(suiteId, facts) {
+  const wl = SUITE_META[suiteId] && SUITE_META[suiteId].workload;
+  const items = [];
+  if (facts.model) {
+    items.push(`<span class="meta-item"><strong>${esc(shortModel(facts.model))}</strong></span>`);
+  }
+  if (facts.precision) {
+    items.push(`<span class="meta-item">${esc(facts.precision)} baseline</span>`);
+  }
+  if (wl && wl.inputTokens && wl.outputTokens) {
+    items.push(`<span class="meta-item">${esc(wl.inputTokens)} → ${esc(wl.outputTokens)} tok</span>`);
+  }
+  if (facts.submissions) {
+    items.push(`<span class="meta-item"><strong>${fmtNum(facts.submissions)}</strong> results</span>`);
+  }
+  if (facts.chips) {
+    items.push(`<span class="meta-item"><strong>${fmtNum(facts.chips)}</strong> chips</span>`);
+  }
+  return items.join("");
+}
+
+// Single ranked row used by suite cards.  Plain click → run modal.
+// Anchor href stays pointed at the chip detail page so Cmd-click still
+// opens the chip-level overview in a new tab.
+function renderLbRow(row, suiteId, rank) {
+  const meta = SUITE_META[suiteId];
+  const value = row[meta.primary.key];
+  const display = formatPrimary(value, suiteId);
+  const { num, unit } = splitNumUnit(display);
+  const medal = rank === 1 ? "gold" : rank === 2 ? "silver" : rank === 3 ? "bronze" : "";
+  const featured = rank === 1 ? " lb-row--featured" : "";
+  const runId = row.run_id || row.submission || "";
+  // Row anatomy: the surrounding <div> is the run-modal trigger; the
+  // chip name is a nested <a> that the modal listener lets through to
+  // its native href, so users get two distinct affordances on one row:
+  //   • click on chip name        → /chip/<slug> overview page
+  //   • click anywhere else in row → run-detail modal
+  // role="button" + tabindex="0" + aria-label make the row keyboard /
+  // screen-reader accessible — modal.js's keydown handler turns Enter
+  // and Space into the same `openModal(rid)` call.
+  const a11yLabel = `Open run details for ${row._chip_label}`;
+  return `
+    <div class="lb-row${featured}"
+         role="button"
+         tabindex="0"
+         aria-label="${esc(a11yLabel)}"
+         data-open-run="${esc(runId)}">
+      <span class="lb-row-rank ${medal}">${rank}</span>
+      <span class="lb-row-main">
+        <a class="lb-row-name" href="${chipHref(row)}">${esc(row._chip_label)}</a>
+        ${renderFwSub(row)}
+      </span>
+      <span class="lb-row-score">
+        <span class="score-val">${esc(num)}</span>
+        ${unit ? `<span class="score-unit">${esc(unit)}</span>` : ""}
+      </span>
+    </div>
+  `;
+}
+
+// Sub block under chip name — two predictable lines so every row in
+// a suite card lines up the same way regardless of framework / version
+// string length:
+//   line 1: vendor · framework version · precision
+//   line 2: @submitter (omitted if absent)
+function renderFwSub(row) {
+  const fw = row.framework || "";
+  const ver = shortVersion(row.framework_version);
+  const fwVer = ver ? `${esc(fw)} <span class="fw-ver">${esc(ver)}</span>` : esc(fw);
+  const precision = row.precision ? ` · ${esc(row.precision)}` : "";
+  const handle = submitterHandle(row.submitted_by);
+  const byline = handle
+    ? `<span class="lb-row-byline">@${esc(handle)}</span>`
+    : "";
+  return `
+    <span class="lb-row-sub">
+      <span class="vendor-dot" data-vendor="${esc(row.vendor)}"></span>
+      <span class="vendor-name">${esc(row.vendor)}</span>
+      <span class="sub-sep">·</span>
+      <span class="fw-line">${fwVer}${precision}</span>
+    </span>
+    ${byline}
+  `;
+}
+
+function renderChipCloud(container, legendEl) {
+  const chips = chipCloudData();
+  for (const c of chips) {
+    const a = document.createElement("a");
+    a.className = `chip-tile size-${c.size}`;
+    // Each tile is a navigational link to the chip's overview page.
+    // From there users can drill into any specific run or jump to
+    // Compare with this chip pre-selected, but the home landing stays
+    // a "browse chips" experience rather than a "start comparing"
+    // funnel — matches user expectations for a clickable chip name.
+    a.href = `#/chip/${c.slug}`;
+    a.setAttribute("data-vendor", c.vendor);
+    const subL = c.submissions === 1 ? "submission" : "submissions";
+    const suiteL = c.suites.length === 1 ? "suite" : "suites";
+    const variantPart = c.variants > 1 ? ` · ${c.variants} chip-count variants` : "";
+    a.setAttribute("title",
+      `${c.label}: ${c.submissions} ${subL} across ` +
+      `${c.suites.length} ${suiteL}${variantPart}`);
+    a.innerHTML = `
+      <span class="chip-tile-name">${esc(c.label)}</span>
+      <span class="chip-tile-count">${fmtNum(c.submissions)}</span>
+    `;
+    container.appendChild(a);
+  }
+
+  // Vendor legend below the cloud
+  if (!legendEl) return;
+  const byVendor = new Map();
+  for (const c of chips) {
+    const v = byVendor.get(c.vendor) || { vendor: c.vendor, chips: 0, submissions: 0 };
+    v.chips += 1;
+    v.submissions += c.submissions;
+    byVendor.set(c.vendor, v);
+  }
+  const vendors = Array.from(byVendor.values()).sort((a, b) => b.submissions - a.submissions);
+  legendEl.innerHTML = vendors.map((v) => {
+    const chipsLbl = v.chips === 1 ? "chip" : "chips";
+    const subsLbl  = v.submissions === 1 ? "result" : "results";
+    return `
+      <span class="cloud-legend-item" data-vendor="${esc(v.vendor)}">
+        <span class="dot"></span>
+        <span class="name">${esc(v.vendor)}</span>
+        <span class="meta">${fmtNum(v.chips)} ${chipsLbl} · ${fmtNum(v.submissions)} ${subsLbl}</span>
+      </span>
+    `;
+  }).join("");
+}
+
+function renderRecentRow(row) {
+  const meta = SUITE_META[row.suite];
+  const metricVal = meta ? row[meta.primary.key] : row.primary_metric;
+  const display = formatPrimary(metricVal, row.suite);
+  const { num, unit } = splitNumUnit(display);
+  const suiteLabel = row.suite.replace("suite_", "Suite ");
+  const letter = meta ? meta.letter : "·";
+  const handle = submitterHandle(row.submitted_by);
+  const ver = shortVersion(row.framework_version);
+  const fwVer = ver ? `${esc(row.framework)} <span class="fw-ver">${esc(ver)}</span>` : esc(row.framework);
+
+  // Mirrors renderLbRow: outer <div> = run-modal trigger, inner chip-name
+  // <a> escapes via modal.js nested-anchor rule to navigate to /chip/<slug>.
+  const wrap = document.createElement("div");
+  wrap.className = "lb-row";
+  wrap.setAttribute("data-suite", letter);
+  wrap.setAttribute("data-open-run", row.run_id || row.submission || "");
+  // a11y: same role + keyboard hooks as renderLbRow so the recent
+  // activity list is fully tab-able and screen-reader-discoverable.
+  wrap.setAttribute("role", "button");
+  wrap.setAttribute("tabindex", "0");
+  wrap.setAttribute("aria-label", `Open run details for ${row._chip_label} on ${suiteLabel}`);
+  const bylineBits = [];
+  if (handle) bylineBits.push(`@${esc(handle)}`);
+  bylineBits.push(esc(fmtDate(row.date)));
+  const byline = `<span class="lb-row-byline">${bylineBits.join(" · ")}</span>`;
+  wrap.innerHTML = `
+    <span class="lb-row-rank suite-tag-rank" aria-hidden="true">${esc(letter)}</span>
+    <span class="lb-row-main">
+      <a class="lb-row-name" href="${chipHref(row)}">${esc(row._chip_label)}</a>
+      <span class="lb-row-sub">
+        <span class="vendor-dot" data-vendor="${esc(row.vendor)}"></span>
+        <span class="vendor-name">${esc(row.vendor)}</span>
+        <span class="sub-sep">·</span>
+        <span class="fw-line">${fwVer}${row.precision ? " · " + esc(row.precision) : ""}</span>
+        <span class="sub-sep">·</span>
+        <span class="suite-tag">${esc(suiteLabel)}</span>
+      </span>
+      ${byline}
+    </span>
+    <span class="lb-row-score">
+      <span class="score-val">${esc(num)}</span>
+      ${unit ? `<span class="score-unit">${esc(unit)}</span>` : ""}
+    </span>
+  `;
+  return wrap;
+}
+
+// "5,731 tok/s" → { num: "5,731", unit: "tok/s" }
+function splitNumUnit(s) {
+  if (!s) return { num: "-", unit: "" };
+  const idx = s.search(/\s[A-Za-z%]/);
+  if (idx === -1) return { num: s, unit: "" };
+  return { num: s.slice(0, idx), unit: s.slice(idx + 1) };
+}
diff --git a/leaderboard/site/assets/js/views/rankings.js b/leaderboard/site/assets/js/views/rankings.js
new file mode 100644
index 00000000..e837a7e2
--- /dev/null
+++ b/leaderboard/site/assets/js/views/rankings.js
@@ -0,0 +1,600 @@
+// views/rankings.js — Per-suite rankings table with filters and compare basket.
+//
+// Page anatomy:
+//   • Compact hero with the active suite's eyebrow + title + tagline.
+//   • Sticky toolbar:
+//       row 1 — 7 suite filter pills (color-bound to --suite-X).
+//       row 2 — multi-select vendor / precision / framework facet pills,
+//               populated from the rows in the active suite (filters that
+//               would empty the set get hidden, not greyed).
+//       row 3 — status line: "N of M results · sorted by …"
+//   • Data table:
+//       columns: ☐ · # · Chip · Vendor · Framework · Precision · primary
+//                metric · secondary metrics · Date · Tier.
+//       Basket key is run_id so every row toggles independently — same
+//       chip with vLLM vs SGLang (or a different precision / version)
+//       never share state.  The whole leftmost cell wraps the checkbox
+//       so the hit-area is generous and the user doesn't have to land
+//       on the tiny input itself.
+//       click chip link → chip detail; click checkbox cell → toggle
+//       compare basket; click sortable header → toggle / set sort
+//       order; click any other inert area on the row → chip detail.
+//   • Empty state appears when filters return no rows.
+//
+// All state (suite, sort, vendor/precision/framework filters) lives in the
+// URL hash so views are bookmarkable and shareable.
+
+import {
+  SUITE_ORDER, SUITE_META, VENDOR_ORDER,
+  SUITE_COLUMNS, formatMetric,
+  rowsForSuite,
+} from "../data.js";
+import {
+  esc, fmtNum, fmtDate, chipHref, buildHash, parseHash,
+  shortVersion,
+} from "../utils.js";
+import {
+  basketHas, basketToggle, basketGet, basketOnChange,
+} from "../router.js";
+
+export function render({ el, query }) {
+  const suiteId = SUITE_ORDER.includes(query.suite) ? query.suite : SUITE_ORDER[0];
+  const meta = SUITE_META[suiteId];
+  const cols = SUITE_COLUMNS[suiteId];
+  const primary = cols.find((c) => c.primary) || cols[0];
+
+  const vendorFilter    = parseCsv(query.vendor);
+  const precisionFilter = parseCsv(query.precision);
+  const frameworkFilter = parseCsv(query.framework);
+  // `?chip=<slug>` lets the chip-detail KPI cards deep-link straight to
+  // a rankings view scoped to that chip variant.  We don't expose it as
+  // a facet pill — it's a soft filter set externally and announced via
+  // a banner that offers a one-click "show all chips" escape.
+  const chipFilter      = (query.chip || "").trim();
+
+  // Sort: ?sort=key:dir, validated against the active suite's columns.
+  let sortKey = primary.key;
+  let sortDir = primary.direction;
+  if (query.sort) {
+    const [k, d] = String(query.sort).split(":");
+    if (cols.some((c) => c.key === k)) {
+      sortKey = k;
+      sortDir = d === "asc" ? "asc" : "desc";
+    }
+  }
+
+  // Column-visibility mode: ?cols=auto (default) hides metric columns
+  // that are empty for every visible row — suite_C's quant_quality
+  // and suite_E's scaling_efficiency end up null on most chips, and
+  // a wall of "—" reads as a regression.  ?cols=all forces every
+  // declared column to render so power users can inspect what's
+  // sparse vs. what's genuinely zero.
+  const colsMode = query.cols === "all" ? "all" : "auto";
+
+  // Facet sets are derived from the suite's rows (not the post-filter
+  // subset) so toggling one filter doesn't erase the others.
+  const allRows = rowsForSuite(suiteId);
+  const facets = buildFacets(allRows);
+
+  const filtered = allRows.filter((r) =>
+    matchSet(vendorFilter,    r.vendor) &&
+    matchSet(precisionFilter, r.precision) &&
+    matchSet(frameworkFilter, r.framework) &&
+    (!chipFilter || r._chip_slug === chipFilter)
+  );
+
+  const sorted = [...filtered].sort((a, b) => safeCompare(a[sortKey], b[sortKey], sortDir));
+
+  // Compute which metric columns are entirely empty in the current
+  // post-filter slice.  Always keep the primary metric and the active
+  // sort column visible — hiding either would make the table read as
+  // broken (primary is the headline number; sort would dangle a sort
+  // indicator on a missing column).  In ?cols=all mode we still
+  // *track* the empty list so the toggle label can advertise the
+  // count even when nothing is hidden.
+  const emptyMetricKeys = cols
+    .filter((c) => !c.primary && c.key !== sortKey)
+    .filter((c) => sorted.length > 0 && sorted.every((r) => r[c.key] == null))
+    .map((c) => c.key);
+  const colsAreHideable = emptyMetricKeys.length > 0;
+  const displayCols = colsMode === "auto" && colsAreHideable
+    ? cols.filter((c) => !emptyMetricKeys.includes(c.key))
+    : cols;
+
+  const filtersActive = !!(query.vendor || query.precision || query.framework || chipFilter);
+
+  // Banner label for the chip-focus mode: now that `?chip=<slug>`
+  // matches every chip_count variant of a single chip model (×1 / ×4 /
+  // ×8 share a slug), use the bare chip name rather than `_chip_label`
+  // — the latter carries "×N" which would mislabel the banner as
+  // scoped to a specific fan-out.  We also surface how many distinct
+  // chip-count variants the filter is showing so the count isn't
+  // surprising.
+  const chipFocusLabel = chipFilter
+    ? (filtered[0]?.chip || allRows.find((r) => r._chip_slug === chipFilter)?.chip || chipFilter)
+    : "";
+  const chipFocusVariants = chipFilter
+    ? new Set(filtered.map((r) => r.chip_count || 1)).size
+    : 0;
+
+  el.innerHTML = `
+    <section class="rk-hero" data-suite="${esc(meta.letter)}">
+      <span class="eyebrow">Rankings · Suite ${esc(meta.letter)}</span>
+      <h1 class="rk-hero-title">${esc(meta.title)}</h1>
+      <p class="rk-hero-sub">${esc(meta.tagline)}</p>
+    </section>
+
+    <section class="rk-toolbar">
+      <div class="rk-suite-pills" role="tablist" aria-label="Workload suite">
+        ${SUITE_ORDER.map((sid) => renderSuitePill(sid, sid === suiteId)).join("")}
+      </div>
+
+      <div class="rk-filter-row">
+        ${renderFacetGroup("vendor",    "Vendor",    facets.vendor,    vendorFilter,    suiteId, query)}
+        ${renderFacetGroup("precision", "Precision", facets.precision, precisionFilter, suiteId, query)}
+        ${renderFacetGroup("framework", "Framework", facets.framework, frameworkFilter, suiteId, query)}
+        ${filtersActive
+          ? `<a class="rk-clear-all" data-clear-all="1" href="${esc(buildHash("/rankings", suiteUrlParam(suiteId)))}">Clear filters</a>`
+          : ""}
+      </div>
+
+      <div class="rk-status">
+        <span class="rk-count">
+          <strong class="tnum">${fmtNum(sorted.length)}</strong>
+          of <span class="tnum">${fmtNum(allRows.length)}</span> results
+        </span>
+        <span class="rk-sortby">
+          Sorted by
+          <strong>${esc(colLabel(cols, sortKey))}</strong>
+          <span class="rk-sort-arrow">${sortDir === "asc" ? "↑" : "↓"}</span>
+        </span>
+        ${colsAreHideable ? renderColsToggle(suiteId, query, colsMode, emptyMetricKeys.length) : ""}
+      </div>
+    </section>
+
+    ${chipFilter ? `
+      <div class="rk-chip-focus" data-suite="${esc(meta.letter)}">
+        <span class="rk-chip-focus-msg">
+          Showing only <strong>${esc(chipFocusLabel)}</strong>${chipFocusVariants > 1 ? ` <span class="rk-chip-focus-variants">(across ${chipFocusVariants} chip-count variants)</span>` : ""} in Suite ${esc(meta.letter)}.
+        </span>
+        <span class="rk-chip-focus-actions">
+          <a class="btn ghost small" href="#/chip/${esc(chipFilter)}">View chip overview</a>
+          <a class="btn ghost small" href="${esc(buildHash("/rankings", { ...query, chip: undefined }))}">Show all chips</a>
+        </span>
+      </div>
+    ` : ""}
+
+    <div class="rk-basket-bar ${basketGet().length ? "show" : ""}">
+      <span class="rk-basket-msg">
+        <strong class="tnum">${fmtNum(basketGet().length)}</strong>
+        ${basketGet().length === 1 ? "run" : "runs"} in your compare basket
+      </span>
+      <span class="rk-basket-actions">
+        <a class="btn primary small" href="#/compare">Open compare →</a>
+        <button class="btn ghost small" data-basket-clear="1" type="button">Clear basket</button>
+      </span>
+    </div>
+
+    <section class="rk-table-section">
+      ${sorted.length === 0
+        ? renderEmpty(meta, filtersActive)
+        : renderTable(suiteId, sorted, displayCols, sortKey, sortDir)}
+    </section>
+  `;
+
+  bindClicks(el);
+
+  // Keep the table's checked state, the basket banner, and the in-basket
+  // row highlight in sync with the shared basket store.  Attach once per
+  // mounted view container to avoid stacking listeners across re-renders.
+  if (!el.__rkBasketAttached) {
+    basketOnChange(() => {
+      const tbody = el.querySelector(".data-table tbody");
+      if (tbody) {
+        for (const tr of tbody.querySelectorAll("tr[data-run-id]")) {
+          const rid = tr.dataset.runId;
+          const inBasket = basketHas(rid);
+          tr.classList.toggle("in-basket", inBasket);
+          const cb = tr.querySelector(".compare-checkbox");
+          if (cb) cb.checked = inBasket;
+        }
+      }
+      const bar = el.querySelector(".rk-basket-bar");
+      if (bar) {
+        const n = basketGet().length;
+        bar.classList.toggle("show", n > 0);
+        const msg = bar.querySelector(".rk-basket-msg");
+        if (msg) {
+          msg.innerHTML = `
+            <strong class="tnum">${fmtNum(n)}</strong>
+            ${n === 1 ? "run" : "runs"} in your compare basket
+          `;
+        }
+      }
+    });
+    el.__rkBasketAttached = true;
+  }
+}
+
+// ── Toolbar bits ──
+
+// "N empty columns hidden" pill in the status row.  Anchor (not button)
+// so middle-click / Cmd-click open the alternate view in a new tab —
+// same affordance every other rankings filter uses.  We rebuild the
+// hash via rebuildHash so the suite + every other filter survive the
+// toggle.
+function renderColsToggle(suiteId, query, colsMode, hiddenCount) {
+  const isHiding = colsMode === "auto";
+  const next = isHiding ? "all" : undefined; // undefined drops the param
+  const href = rebuildHash(suiteId, query, { cols: next });
+  const label = isHiding
+    ? `${hiddenCount} ${hiddenCount === 1 ? "column" : "columns"} hidden — show all`
+    : "Hide empty columns";
+  return `
+    <a class="rk-cols-toggle"
+       href="${esc(href)}"
+       title="${esc(isHiding ? "Show every metric column declared by this suite" : "Hide metric columns that are empty for every visible row")}">
+      <span class="rk-cols-toggle-icon" aria-hidden="true">${isHiding ? "▸" : "▾"}</span>
+      ${esc(label)}
+    </a>
+  `;
+}
+
+function renderSuitePill(sid, active) {
+  const m = SUITE_META[sid];
+  return `
+    <button class="rk-suite-pill ${active ? "active" : ""}"
+            data-suite="${esc(sid)}"
+            data-suite-letter="${esc(m.letter)}"
+            type="button"
+            aria-pressed="${active ? "true" : "false"}"
+            title="${esc(m.tagline)}">
+      <span class="rk-suite-letter">${esc(m.letter)}</span>
+      <span class="rk-suite-name">${esc(m.title)}</span>
+    </button>
+  `;
+}
+
+function renderFacetGroup(facetKey, label, options, selected, suiteId, query) {
+  if (options.length === 0) return "";
+  const sel = new Set(selected);
+  // Each pill is an anchor whose `href` is the URL the click would
+  // navigate to (toggling this value into the comma-separated facet
+  // CSV).  That gives middle-click and Cmd/Ctrl-click native open-in-
+  // new-tab semantics for free; the listener still preventDefaults on
+  // plain left-clicks and routes through the SPA in-place.
+  return `
+    <div class="rk-facet" data-facet-group="${esc(facetKey)}">
+      <span class="rk-facet-label">${esc(label)}</span>
+      <div class="rk-facet-pills">
+        ${options.map((opt) => {
+          const next = toggleInCsv(query[facetKey], opt);
+          const href = rebuildHash(suiteId, query, { [facetKey]: next || undefined });
+          const active = sel.has(opt);
+          return `
+            <a class="rk-facet-pill ${active ? "active" : ""}"
+               href="${esc(href)}"
+               data-toggle-facet="${esc(facetKey)}"
+               data-value="${esc(opt)}"
+               role="button"
+               aria-pressed="${active ? "true" : "false"}">
+              ${facetKey === "vendor"
+                ? `<span class="vendor-dot" data-vendor="${esc(opt)}"></span>`
+                : ""}
+              <span>${esc(opt)}</span>
+            </a>
+          `;
+        }).join("")}
+      </div>
+    </div>
+  `;
+}
+
+// ── Table ──
+
+function renderTable(suiteId, rows, cols, sortKey, sortDir) {
+  const meta = SUITE_META[suiteId];
+  return `
+    <div class="data-table-wrap">
+      <table class="data-table" data-suite="${esc(meta.letter)}">
+        <thead>
+          <tr>
+            <th class="col-compare" scope="col"><span class="visually-hidden">Compare</span></th>
+            <th class="col-rank" scope="col">#</th>
+            <th class="col-chip" scope="col">Chip</th>
+            <th class="col-vendor" scope="col">Vendor</th>
+            <th class="col-fw" scope="col">Framework</th>
+            <th class="col-precision" scope="col">Precision</th>
+            ${cols.map((c) => `
+              <th class="col-metric sortable${c.primary ? " col-primary" : ""}${sortKey === c.key ? " is-sort" : ""}"
+                  data-sort-key="${esc(c.key)}"
+                  data-sort-dir-default="${esc(c.direction)}"
+                  aria-sort="${sortKey === c.key ? (sortDir === "asc" ? "ascending" : "descending") : "none"}"
+                  scope="col">
+                <span class="th-label">${esc(c.label)}</span>
+                ${c.unit ? `<span class="th-unit">${esc(c.unit)}</span>` : ""}
+                <span class="th-sort-icon">${sortKey === c.key ? (sortDir === "asc" ? "↑" : "↓") : ""}</span>
+              </th>
+            `).join("")}
+            <th class="col-date sortable${sortKey === "date" ? " is-sort" : ""}"
+                data-sort-key="date" data-sort-dir-default="desc"
+                aria-sort="${sortKey === "date" ? (sortDir === "asc" ? "ascending" : "descending") : "none"}"
+                scope="col">
+              <span class="th-label">Date</span>
+              <span class="th-sort-icon">${sortKey === "date" ? (sortDir === "asc" ? "↑" : "↓") : ""}</span>
+            </th>
+            <th class="col-tier" scope="col">Tier</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rows.map((r, i) => renderRow(suiteId, r, cols, sortKey, i + 1)).join("")}
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+
+function renderRow(suiteId, row, cols, sortKey, rank) {
+  const slug = row._chip_slug;
+  const runId = row.run_id || row.submission || "";
+  const inBasket = basketHas(runId);
+  const ver = shortVersion(row.framework_version);
+  const fw = row.framework || "";
+  // a11y: tabindex on the row makes the run-detail trigger reachable
+  // via keyboard.  We deliberately keep the native `<tr>` role so
+  // assistive tech still announces row context (column → cell mapping
+  // would break under role="button").  modal.js's keydown handler
+  // turns Enter / Space on a focused row into the same openModal call
+  // a click would make.
+  const a11yLabel = `Open run details for ${row._chip_label}${fw ? " on " + fw : ""}`;
+  return `
+    <tr data-run-id="${esc(runId)}"
+        data-chip-slug="${esc(slug)}"
+        data-open-run="${esc(runId)}"
+        tabindex="0"
+        aria-label="${esc(a11yLabel)}"
+        class="${inBasket ? "in-basket" : ""}">
+      <td class="col-compare" title="Add to compare basket">
+        <label class="compare-cell" aria-label="Add ${esc(row._chip_label)} run to compare basket">
+          <input type="checkbox" class="compare-checkbox" tabindex="-1" ${inBasket ? "checked" : ""}>
+        </label>
+      </td>
+      <td class="col-rank tnum">${rank}</td>
+      <td class="col-chip">
+        <a class="rk-chip-link" href="${chipHref(row)}">
+          <span class="rk-chip-name">${esc(row._chip_label)}</span>
+          ${row.memory_gb
+            ? `<span class="rk-chip-meta">${esc(fmtNum(row.memory_gb))} GB</span>`
+            : ""}
+        </a>
+      </td>
+      <td class="col-vendor">
+        <span class="vendor-dot" data-vendor="${esc(row.vendor)}"></span>
+        <span class="vendor-name">${esc(row.vendor || "-")}</span>
+      </td>
+      <td class="col-fw">
+        ${esc(fw)}${ver ? ` <span class="fw-ver tnum">${esc(ver)}</span>` : ""}
+      </td>
+      <td class="col-precision">${esc(row.precision || "-")}</td>
+      ${cols.map((c) => {
+        const v = formatMetric(row[c.key], c);
+        const isSort = sortKey === c.key;
+        return `
+          <td class="col-metric${c.primary ? " col-primary" : ""}${isSort ? " is-sort" : ""} tnum">
+            ${v !== null
+              ? `<span class="metric-val">${esc(v)}</span>`
+              : `<span class="metric-empty">-</span>`}
+          </td>
+        `;
+      }).join("")}
+      <td class="col-date tnum${sortKey === "date" ? " is-sort" : ""}">${esc(fmtDate(row.date))}</td>
+      <td class="col-tier">
+        <span class="badge tier-${esc(row.tier || "community")}">${esc(row.tier || "community")}</span>
+      </td>
+    </tr>
+  `;
+}
+
+function renderEmpty(meta, filtersActive) {
+  if (!filtersActive) {
+    return `
+      <div class="rk-empty">
+        <span class="rk-empty-icon" aria-hidden="true">∅</span>
+        <p>No submissions yet for <strong>Suite ${esc(meta.letter)} · ${esc(meta.title)}</strong>.</p>
+        <p class="rk-empty-sub">${esc(meta.tagline)}</p>
+      </div>
+    `;
+  }
+  // Resolve the active suite from the URL so the "Clear filters" href
+  // strips facets while keeping the user on this same suite.
+  const { params: q } = parseHash(location.hash);
+  const sid = SUITE_ORDER.includes(q.suite) ? q.suite : SUITE_ORDER[0];
+  return `
+    <div class="rk-empty">
+      <span class="rk-empty-icon" aria-hidden="true">∅</span>
+      <p>No submissions match the current filters in Suite ${esc(meta.letter)}.</p>
+      <a class="btn" data-clear-all="1" href="${esc(buildHash("/rankings", suiteUrlParam(sid)))}">Clear filters</a>
+    </div>
+  `;
+}
+
+// ── Click delegation ──
+//
+// The listener is attached exactly once per mounted view container.
+// Stale closures (a re-render that re-attached the handler would
+// otherwise capture stale suite/query and double-fire updates) are
+// avoided by re-reading the URL hash on every click.
+//
+// The first thing the listener does is bail when the active route is
+// no longer /rankings.  Without that guard, navigating Rankings →
+// Compare leaves this listener subscribed to the same view container
+// and intercepts compare-page clicks (e.g. the suite pills, which
+// share a class name) and redirects them back to /rankings.
+
+function bindClicks(el) {
+  if (el.__rkClicksAttached) return;
+  el.__rkClicksAttached = true;
+
+  el.addEventListener("click", (ev) => {
+    if (!location.hash.startsWith("#/rankings")) return;
+    const { params: query } = parseHash(location.hash);
+    const suiteId = SUITE_ORDER.includes(query.suite) ? query.suite : SUITE_ORDER[0];
+    const t = ev.target;
+
+    // Compare basket clear.
+    if (t.closest("[data-basket-clear]")) {
+      ev.preventDefault();
+      const ids = basketGet();
+      for (const id of ids) basketToggle(id);
+      return;
+    }
+
+    // Anchor-driven actions (clear filters, facet pills) are real <a>
+    // tags so middle-click / Cmd-click / Ctrl-click / Shift-click can
+    // open the toggled URL in a new tab.  The plain-click case still
+    // preventDefaults and routes through the SPA in-place.
+    const isModifiedNav = ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.button !== 0;
+
+    // Clear all filters anchor.
+    if (t.closest("[data-clear-all]")) {
+      if (isModifiedNav) return;
+      ev.preventDefault();
+      location.hash = buildHash("/rankings", suiteUrlParam(suiteId));
+      return;
+    }
+
+    // Suite pill (still a button — switching suite resets sort/filters
+    // so opening "the same suite with different filters" in a new tab
+    // doesn't make sense).
+    const suitePill = t.closest(".rk-suite-pill");
+    if (suitePill) {
+      ev.preventDefault();
+      const sid = suitePill.dataset.suite;
+      if (sid && sid !== suiteId) {
+        location.hash = buildHash("/rankings", suiteUrlParam(sid));
+      }
+      return;
+    }
+
+    // Facet pill anchor.  Toggle the facet value in the CSV and update
+    // the URL — but only on plain left-click; modified clicks fall
+    // through to the browser so they open the precomputed href in a
+    // new tab.
+    const facetPill = t.closest("[data-toggle-facet]");
+    if (facetPill) {
+      if (isModifiedNav) return;
+      ev.preventDefault();
+      const facet = facetPill.dataset.toggleFacet;
+      const value = facetPill.dataset.value;
+      const next = toggleInCsv(query[facet], value);
+      location.hash = rebuildHash(suiteId, query, { [facet]: next || undefined });
+      return;
+    }
+
+    // Compare cell.  Clicking anywhere inside .col-compare toggles the
+    // basket — not just the tiny checkbox itself — to forgive misclicks.
+    const compareCell = t.closest(".col-compare");
+    if (compareCell) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      const tr = compareCell.closest("tr");
+      const rid = tr && tr.dataset.runId;
+      if (rid) basketToggle(rid);
+      return;
+    }
+
+    // Sort header.
+    const th = t.closest("th.sortable");
+    if (th) {
+      ev.preventDefault();
+      const key = th.dataset.sortKey;
+      const defaultDir = th.dataset.sortDirDefault;
+      const cur = String(query.sort || "");
+      let nextDir = defaultDir;
+      if (cur.startsWith(key + ":")) {
+        const curDir = cur.split(":")[1];
+        nextDir = curDir === "desc" ? "asc" : "desc";
+      }
+      location.hash = rebuildHash(suiteId, query, { sort: `${key}:${nextDir}` });
+      return;
+    }
+
+    // Plain row body clicks fall through to the document-level
+    // data-open-run handler in modal.js, which pops up the run detail.
+  });
+}
+
+// ── Helpers ──
+
+function parseCsv(s) {
+  if (!s) return [];
+  return String(s).split(",").map((x) => x.trim()).filter(Boolean);
+}
+
+function toggleInCsv(csv, value) {
+  const arr = parseCsv(csv);
+  const idx = arr.indexOf(value);
+  if (idx >= 0) arr.splice(idx, 1);
+  else arr.push(value);
+  return arr.join(",");
+}
+
+function matchSet(filter, value) {
+  if (filter.length === 0) return true;
+  if (value === null || value === undefined) return false;
+  return filter.includes(value);
+}
+
+function safeCompare(a, b, dir) {
+  const aMissing = a === null || a === undefined || (typeof a === "number" && Number.isNaN(a));
+  const bMissing = b === null || b === undefined || (typeof b === "number" && Number.isNaN(b));
+  // Missing values always sink to the bottom regardless of direction.
+  if (aMissing && bMissing) return 0;
+  if (aMissing) return 1;
+  if (bMissing) return -1;
+  if (typeof a === "string" || typeof b === "string") {
+    const c = String(a).localeCompare(String(b));
+    return dir === "asc" ? c : -c;
+  }
+  return dir === "asc" ? a - b : b - a;
+}
+
+function buildFacets(rows) {
+  const vendor = new Set();
+  const precision = new Set();
+  const framework = new Set();
+  for (const r of rows) {
+    if (r.vendor)    vendor.add(r.vendor);
+    if (r.precision) precision.add(r.precision);
+    if (r.framework) framework.add(r.framework);
+  }
+  // Vendors follow the canonical order; precision/framework alphabetical.
+  const sortedVendor = VENDOR_ORDER.filter((v) => vendor.has(v))
+    .concat(Array.from(vendor).filter((v) => !VENDOR_ORDER.includes(v)).sort());
+  return {
+    vendor: sortedVendor,
+    precision: Array.from(precision).sort(),
+    framework: Array.from(framework).sort(),
+  };
+}
+
+function colLabel(cols, key) {
+  if (key === "date") return "Date";
+  const c = cols.find((x) => x.key === key);
+  return c ? c.label : key;
+}
+
+function suiteUrlParam(suiteId) {
+  // suite_A is the default so we omit it from the URL for tidiness.
+  return suiteId === SUITE_ORDER[0] ? {} : { suite: suiteId };
+}
+
+function rebuildHash(suiteId, currentQuery, updates) {
+  const merged = { ...currentQuery, ...updates, ...suiteUrlParam(suiteId) };
+  const out = {};
+  for (const [k, v] of Object.entries(merged)) {
+    if (v === "" || v === null || v === undefined) continue;
+    out[k] = v;
+  }
+  return buildHash("/rankings", out);
+}
diff --git a/leaderboard/site/assets/js/views/suites.js b/leaderboard/site/assets/js/views/suites.js
new file mode 100644
index 00000000..15e22ae4
--- /dev/null
+++ b/leaderboard/site/assets/js/views/suites.js
@@ -0,0 +1,728 @@
+// views/suites.js — Suites explainer.  This is the "what is this
+// benchmark?" page: roofline argument + diagram, scenarios catalog
+// with per-scenario specs, per-suite specifications, datasets reference.
+
+import {
+  SUITE_ORDER, SUITE_META, suiteFacts, bestRowByMetric,
+} from "../data.js";
+import { esc, fmtNum, buildHash, shortModel } from "../utils.js";
+
+const GH_BASE = "https://github.com/JuhaoLiang1997/AccelMark";
+
+// One concrete finding per suite, distilled from the paper.  Kept short
+// enough to fit inside a single card but specific enough to be useful.
+const SUITE_FINDINGS = {
+  suite_A: {
+    headline: "Offline winner is not the SLA winner",
+    body:
+      "H200 leads Suite A offline at 5,731 tokens/sec, but on the same suite's " +
+      "online tier A100 and A800 sustain 25 queries/sec while H200 caps " +
+      "at 10. The 500 ms p99 TTFT SLA binds well before the throughput " +
+      "ceiling, so the chip that leads offline loses the production tier.",
+  },
+  suite_B: {
+    headline: "Bottom tier is decided by software stack, not VRAM",
+    body:
+      "With 8 chips serving 70B BF16, aggregate VRAM is no longer binding. " +
+      "Ascend 910C ×16 supplies 1,024 GB and still delivers only 723 tokens/sec, " +
+      "below Ascend 910B2 ×8 at 770 tokens/sec. Doubling the hardware buys " +
+      "nothing once vllm-ascend's 70B path is the binding constraint.",
+  },
+  suite_C: {
+    headline: "Speed without quality is meaningless",
+    body:
+      "Quality efficiency multiplies throughput by accuracy. On A100, W8A8 " +
+      "wins at 3,776 (1.20× speedup, +2 pts accuracy) because INT8 tensor " +
+      "cores engage. FP8 shows zero speedup on A100 because the hardware " +
+      "path is absent and compute falls back to BF16. On H100 the same FP8 " +
+      "column flips to roughly 1.5 to 1.8× speedup.",
+  },
+  suite_D: {
+    headline: "Long context inverts the bandwidth-bound ranking",
+    body:
+      "Suite D pushes arithmetic intensity past the roofline knee with " +
+      "~28K-token prefill, making the workload compute-bound rather than " +
+      "memory-bandwidth-bound. Rankings invert relative to Suite A: chips " +
+      "that win on short-prompt decode lose to chips with higher raw FLOPS.",
+  },
+  suite_E: {
+    headline: "Newest flagship has the worst 2× efficiency",
+    body:
+      "RTX 4090 D tops the Suite E 2× efficiency leaderboard because its " +
+      "lower per-die throughput keeps the communication share small. H200, " +
+      "the newest flagship, shows the worst NVIDIA 2× efficiency because " +
+      "per-chip throughput grew faster than NVLink 4.0 bandwidth did.",
+  },
+  suite_F: {
+    headline: "Edge isolates the pure HBM bandwidth ceiling",
+    body:
+      "Suite F uses Qwen2.5-0.5B with ~95-token prompts. Stripping residual " +
+      "compute-path interference exposes raw memory-bandwidth headroom; " +
+      "this is where commodity hardware (RTX 4090, A6000) is most " +
+      "competitive on a per-dollar basis.",
+  },
+  suite_G: {
+    headline: "Sparse routing rewards bandwidth over FLOPS",
+    body:
+      "Mixtral activates only 2 of 8 experts per token, keeping arithmetic " +
+      "intensity below dense 8B inference even at 8-chip scale. H20-3e " +
+      "trails A100-40G by ~5% on dense Suite A but beats A100-40G ×8 by " +
+      "17% on Suite G; its 4,000 GB/s aggregate bandwidth pays off more " +
+      "than its compute.",
+  },
+};
+
+// Three cross-suite ranking inversions distilled from the paper.
+const INVERSION_CARDS = [
+  {
+    eyebrow: "Offline vs Online",
+    title: "The throughput winner loses the SLA tier",
+    body:
+      "Suite A: H200 leads offline at 5,731 tokens/sec, but caps at 10 queries/sec " +
+      "once the 500 ms p99 TTFT SLA is enforced. A100 and A800 sustain " +
+      "25 queries/sec on the same hardware tier. Offline and online are not the " +
+      "same race.",
+    suite: "A",
+  },
+  {
+    eyebrow: "Dense vs MoE",
+    title: "H20-3e: minus 5% on dense, plus 17% on MoE",
+    body:
+      "On dense Suite A, H20-3e trails A100-40G by ~5%. On Suite G's " +
+      "sparse Mixtral routing the same chip leads A100-40G ×8 by 17%. " +
+      "Sparse activation holds arithmetic intensity below dense 8B, so " +
+      "bandwidth (not FLOPS) sets the ceiling.",
+    suite: "G",
+  },
+  {
+    eyebrow: "Multi-chip Amdahl",
+    title: "Newest flagship has the worst 2× scaling",
+    body:
+      "RTX 4090 D tops the Suite E 2× efficiency table precisely because " +
+      "its per-die throughput is low; communication occupies a small share " +
+      "of wall time. H200's per-chip throughput outgrew NVLink 4.0 " +
+      "bandwidth, so its 2× scaling sits at the bottom of NVIDIA's range.",
+    suite: "E",
+  },
+];
+
+// Shared scenarios catalog.  Each card has:
+//   icon         — small SVG illustrating the load shape
+//   role         — uppercase tagline (what the scenario reveals)
+//   description  — 2 sentences in plain prose
+//   spec         — key/value rows (metric / direction / setting)
+//   appliesTo    — which suite letters use it (default vs. extra)
+const SCENARIO_CATALOG = [
+  {
+    name: "accuracy",
+    icon: "gate",
+    role: "Quality gate",
+    description:
+      "MMLU subset score against the suite's baseline model. Runs before any throughput scenario; a chip that drops accuracy beyond the threshold has every other number on this suite invalidated.",
+    spec: [
+      { k: "Metric",    v: "MMLU score (0-100)" },
+      { k: "Direction", v: "Higher is better" },
+      { k: "Threshold", v: "Suite-specific baseline" },
+      { k: "Cost",      v: "~5 min / chip" },
+    ],
+    appliesTo: { default: ["A", "B", "C", "D", "F", "G"], extra: [] },
+  },
+  {
+    name: "offline",
+    icon: "batch",
+    role: "Peak throughput",
+    description:
+      "All requests submitted at once, no SLA, no concurrency cap. The pure capability number that establishes the chip's ceiling on this workload.",
+    spec: [
+      { k: "Metric",    v: "Aggregate tokens/sec" },
+      { k: "Direction", v: "Higher is better" },
+      { k: "Concurrency", v: "Unbounded (vendor-tuned)" },
+      { k: "Cost",      v: "~10 to 15 min / chip" },
+    ],
+    appliesTo: { default: ["A", "B", "C", "D", "E", "F", "G"], extra: [] },
+  },
+  {
+    name: "online",
+    icon: "poisson",
+    role: "SLA-bound capacity",
+    description:
+      "Sweeps offered load under Poisson arrivals and reports the highest queries/sec that still meets the 500 ms p99 TTFT SLA. The number production traffic actually has to honour.",
+    spec: [
+      { k: "Metric",    v: "Max queries/sec" },
+      { k: "Direction", v: "Higher is better" },
+      { k: "SLA",       v: "p99 TTFT ≤ 500 ms" },
+      { k: "Arrivals",  v: "Poisson, vendor sweep" },
+    ],
+    appliesTo: { default: ["A", "B", "F", "G"], extra: ["C", "D"] },
+  },
+  {
+    name: "interactive",
+    icon: "single",
+    role: "Single-stream latency",
+    description:
+      "One request in-flight at a time, no concurrency. The chat-window UX baseline; minimal queueing, dominated by decode latency and software overhead.",
+    spec: [
+      { k: "Metric",    v: "TTFT p99 (milliseconds)" },
+      { k: "Direction", v: "Lower is better" },
+      { k: "Concurrency", v: "1 stream" },
+      { k: "Streams",   v: "Many short conversations" },
+    ],
+    appliesTo: { default: ["F"], extra: ["A", "B", "D", "G"] },
+  },
+  {
+    name: "sustained",
+    icon: "longblock",
+    role: "Stability under load",
+    description:
+      "Fixed-concurrency load held for 15 to 30 minutes. Reports the throttle ratio between the first and last 60 s windows so thermal throttling and memory fragmentation surface.",
+    spec: [
+      { k: "Metric",    v: "Throttle ratio (peak → end)" },
+      { k: "Direction", v: "Smaller drop is better" },
+      { k: "Duration",  v: "15 to 30 minutes" },
+      { k: "Load",      v: "Fixed concurrency" },
+    ],
+    appliesTo: { default: [], extra: ["A", "B", "C", "D", "F", "G"] },
+  },
+  {
+    name: "speculative",
+    icon: "spec",
+    role: "Draft-assisted decode",
+    description:
+      "Offline workload with a 1B draft model loaded alongside the target. Reports speculative decoding acceptance rate and end-to-end speedup; tells you whether spec-decode is worth the VRAM cost.",
+    spec: [
+      { k: "Metric",    v: "tokens/sec + acceptance rate" },
+      { k: "Direction", v: "Higher is better" },
+      { k: "Draft model", v: "1B (fits beside target)" },
+      { k: "Mode",      v: "Offline (no SLA)" },
+    ],
+    appliesTo: { default: [], extra: ["A", "D"] },
+  },
+  {
+    name: "burst",
+    icon: "burst",
+    role: "KV pressure",
+    description:
+      "Alternates 5× steady arrival rate (short windows) with steady traffic and reports TTFT p99 during the burst. Stresses the KV cache, admission control, and warm-up paths.",
+    spec: [
+      { k: "Metric",    v: "TTFT p99 during burst" },
+      { k: "Direction", v: "Lower is better" },
+      { k: "Burst",     v: "5× steady traffic" },
+      { k: "Window",    v: "Short pulses + recovery" },
+    ],
+    appliesTo: { default: [], extra: ["A", "B"] },
+  },
+];
+
+const DATASETS = [
+  {
+    name: "sharegpt_standard_v1",
+    used: "A · B · C · E · G",
+    prompts: "500",
+    inputP50: "~280 tok",
+    outputP50: "~310 tok",
+    notes: "Curated to match production LLM-API traffic; token-length p99 ≈ 2,100.",
+  },
+  {
+    name: "sharegpt_longctx_v1",
+    used: "D",
+    prompts: "200",
+    inputP50: "~28,650 tok",
+    outputP50: "≤256 tok",
+    notes: "Multi-turn dialogues concatenated to push prefill past the roofline knee.",
+  },
+  {
+    name: "sharegpt_edge_v1",
+    used: "F",
+    prompts: "500",
+    inputP50: "~95 tok",
+    outputP50: "~150 tok",
+    notes: "Short single-turn prompts; keeps the edge suite bandwidth-isolated.",
+  },
+];
+
+// Tiny SVG icons keyed by scenario.icon — drawn with currentColor so they
+// inherit the surrounding text colour and stay legible in both themes.
+const SCN_ICONS = {
+  gate: `
+    <svg viewBox="0 0 28 28" aria-hidden="true">
+      <path d="M14 3 L23 6 L23 14 C23 19.5 19.2 23.5 14 25.5 C8.8 23.5 5 19.5 5 14 L5 6 Z"
+            fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+      <path d="M9.5 14.5 L13 18 L19 11" fill="none" stroke="currentColor"
+            stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`,
+  batch: `
+    <svg viewBox="0 0 28 28" aria-hidden="true">
+      <rect x="4"  y="6"  width="20" height="2.6" rx="1" fill="currentColor"/>
+      <rect x="4"  y="11" width="20" height="2.6" rx="1" fill="currentColor"/>
+      <rect x="4"  y="16" width="20" height="2.6" rx="1" fill="currentColor"/>
+      <rect x="4"  y="21" width="20" height="2.6" rx="1" fill="currentColor"/>
+    </svg>`,
+  poisson: `
+    <svg viewBox="0 0 28 28" aria-hidden="true">
+      <line x1="4"  y1="22" x2="4"  y2="14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="8"  y1="22" x2="8"  y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="13" y1="22" x2="13" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="17" y1="22" x2="17" y2="10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="21" y1="22" x2="21" y2="14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="25" y1="22" x2="25" y2="18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="3" y1="23" x2="26" y2="23" stroke="currentColor" stroke-width="1" opacity="0.4"/>
+    </svg>`,
+  single: `
+    <svg viewBox="0 0 28 28" aria-hidden="true">
+      <line x1="3" y1="22" x2="25" y2="22" stroke="currentColor" stroke-width="1" opacity="0.4"/>
+      <line x1="14" y1="22" x2="14" y2="8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <circle cx="14" cy="6" r="2" fill="currentColor"/>
+    </svg>`,
+  longblock: `
+    <svg viewBox="0 0 28 28" aria-hidden="true">
+      <rect x="3"  y="10" width="18" height="8" rx="1.5" fill="currentColor"/>
+      <rect x="22" y="13" width="4"  height="5" rx="1"   fill="currentColor" opacity="0.55"/>
+    </svg>`,
+  spec: `
+    <svg viewBox="0 0 28 28" aria-hidden="true">
+      <path d="M3 9 L17 9 L17 6 L25 12 L17 18 L17 15 L3 15 Z"
+            fill="currentColor" opacity="0.45"/>
+      <path d="M3 17 L21 17 L21 14 L26 18 L21 22 L21 20 L3 20 Z"
+            fill="currentColor"/>
+    </svg>`,
+  burst: `
+    <svg viewBox="0 0 28 28" aria-hidden="true">
+      <line x1="3"  y1="22" x2="25" y2="22" stroke="currentColor" stroke-width="1" opacity="0.4"/>
+      <line x1="3"  y1="22" x2="3"  y2="18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="7"  y1="22" x2="7"  y2="18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="11" y1="22" x2="11" y2="6"  stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="15" y1="22" x2="15" y2="8"  stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="19" y1="22" x2="19" y2="18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="23" y1="22" x2="23" y2="18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+    </svg>`,
+};
+
+// Roofline mini-diagram.  Coordinates are hand-tuned so the seven dots
+// land at roughly the right region of the spectrum for each suite.
+const ROOFLINE_POINTS = [
+  { letter: "F", x:  68, y: 168, label: "right" },  // far left, bandwidth-bound, smallest model
+  { letter: "A", x: 102, y: 132, label: "right" },  // bandwidth-bound, 8B decode
+  { letter: "G", x: 118, y: 122, label: "right" },  // MoE, similar region as A
+  { letter: "B", x: 138, y:  96, label: "left"  },  // 70B multi-chip
+  { letter: "C", x: 168, y:  68, label: "left"  },  // quantization, transition
+  { letter: "E", x: 192, y:  56, label: "right" },  // scaling, near the knee
+  { letter: "D", x: 268, y:  56, label: "left"  },  // compute-bound long context
+];
+
+export function render({ el }) {
+  el.innerHTML = `
+    <section class="hero suites-hero">
+      <h1>Workload Suites</h1>
+      <p class="hero-sub">
+        Each suite anchors a distinct bottleneck region, together sampling
+        the full inference workload spectrum.
+      </p>
+      <div class="hero-cta">
+        <a class="btn primary" href="#/rankings">Browse rankings →</a>
+        <a class="btn" href="${GH_BASE}/tree/main/suites" target="_blank" rel="noopener">Suite spec on GitHub</a>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-header section-header--stacked">
+        <div class="section-title">
+          <span class="eyebrow">01 · Methodology</span>
+          <h2>Why per-suite, not a single score?</h2>
+        </div>
+      </div>
+
+      <div class="why-grid">
+        <div class="why-prose">
+          <p>
+            AI inference workloads span a wide range of arithmetic intensity.
+            The roofline model makes the consequence concrete: a chip's
+            effective performance is set by whichever of memory bandwidth or
+            compute is binding for the workload. Because different workloads
+            occupy different regions of that spectrum, hardware rankings
+            <em>are not preserved</em> across them.
+          </p>
+          <details class="why-prose-more">
+            <summary>
+              <span class="why-more-show">Read the full argument</span>
+              <span class="why-more-hide">Show less</span>
+            </summary>
+            <p>
+              A chip optimized for one region, say bandwidth-bound 8B decode,
+              diverges from a chip optimized for another, say compute-bound
+              long-context prefill, as soon as the workload moves. Collapsing
+              heterogeneous workloads into a single composite score hides
+              exactly the trade-offs a buyer needs to see.
+            </p>
+            <p>
+              AccelMark operationalizes <strong>spectrum sampling</strong>: a
+              set of suites, each anchored to a qualitatively distinct
+              bottleneck region. Bandwidth-bound serving at 8B (A) and 0.5B
+              (F); capacity-then-stack-bound 70B multi-chip (B); the
+              bandwidth-to-compute transition via quantization (C);
+              compute-bound long-context prefill (D); multi-chip communication
+              overhead (E); and sparse MoE routing (G).
+            </p>
+          </details>
+        </div>
+        ${renderRoofline()}
+      </div>
+
+      <div class="inversion-grid">
+        ${INVERSION_CARDS.map(renderInversion).join("")}
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-header section-header--stacked">
+        <div class="section-title">
+          <span class="eyebrow">02 · Scenarios</span>
+          <h2>Seven protocols, one suite at a time</h2>
+        </div>
+      </div>
+      <p class="section-lede">
+        Each suite picks a subset of these seven protocols. The metric,
+        direction, and setting are pinned here once; per-suite cards below
+        just say which apply.
+        <strong>Default</strong> scenarios are required for a valid
+        submission; <strong>extras</strong> are opt-in for vendors who want
+        to characterize a regime further.
+      </p>
+      <ul class="scn-catalog">
+        ${SCENARIO_CATALOG.map(renderScenarioCard).join("")}
+      </ul>
+    </section>
+
+    <section class="section">
+      <div class="section-header section-header--stacked">
+        <div class="section-title">
+          <span class="eyebrow">03 · Specifications</span>
+          <h2>Each suite, in detail</h2>
+        </div>
+      </div>
+      <p class="section-lede">
+        One self-contained card per suite. The header pins the primary
+        metric and direction; the workload strip pins the model, hardware
+        budget, precision, and dataset; the protocols row shows which
+        scenarios apply; current leaders surface the top chip per metric.
+      </p>
+      <div class="suite-spec-list">
+        ${SUITE_ORDER.map(renderSuiteSpec).join("")}
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-header section-header--stacked">
+        <div class="section-title">
+          <span class="eyebrow">04 · Datasets</span>
+          <h2>Three immutable prompt sets</h2>
+        </div>
+      </div>
+      <p class="section-lede">
+        Datasets are content-hash-pinned: once a name is published, the
+        bytes never change. Revising a dataset means a new version
+        (<code>_v2</code>, etc.). Every result is tied to a dataset hash so
+        comparisons stay apples-to-apples across years.
+      </p>
+      <div class="dataset-table">
+        <div class="dataset-row dataset-row--head">
+          <span>Dataset</span>
+          <span>Used by</span>
+          <span>Prompts</span>
+          <span>Input p50</span>
+          <span>Output p50</span>
+          <span class="dt-notes">Why</span>
+        </div>
+        ${DATASETS.map(renderDataset).join("")}
+      </div>
+    </section>
+
+    <section class="section submit-section">
+      <div class="submit-card">
+        <span class="eyebrow">05 · Extend</span>
+        <h2 class="submit-title">Propose a new suite</h2>
+        <p class="submit-body">
+          Have a workload regime AccelMark doesn't cover yet: long-context
+          serving, speculative decoding economics, a domain-specific
+          fine-tune? Open a discussion with a one-page sketch of the
+          bottleneck region and reference SLAs. The contribution flow is
+          the same as a new result.
+        </p>
+        <div class="submit-cta">
+          <a class="btn primary" href="${GH_BASE}/discussions/new?category=ideas"
+             target="_blank" rel="noopener">Propose a suite →</a>
+          <a class="btn" href="${GH_BASE}/blob/main/CONTRIBUTING.md"
+             target="_blank" rel="noopener">Read the contributor guide</a>
+        </div>
+      </div>
+    </section>
+  `;
+
+  // Wire up smooth scroll for the scenario catalog's "Used by" suite-letter
+  // chips.  These use #suite-X anchors, but the SPA hash router would
+  // otherwise interpret the click as a route change.  Intercept here and
+  // scroll the matching <article id="suite-X"> into view.
+  //
+  // Use a once-attach guard: the router rebuilds the view's innerHTML on
+  // each visit, but the listener is on `el` itself and would accumulate
+  // across re-renders without this flag.
+  if (!el.__suitesScrollAttached) {
+    el.addEventListener("click", (ev) => {
+      const a = ev.target.closest(".scn-suite-letter");
+      if (!a) return;
+      const href = a.getAttribute("href") || "";
+      if (!href.startsWith("#suite-")) return;
+      ev.preventDefault();
+      const id = href.slice(1);
+      const target = el.querySelector(`#${CSS.escape(id)}`);
+      if (!target) return;
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
+      // Brief highlight so the user sees which card they landed on.
+      target.classList.remove("suite-spec--flash");
+      // Force reflow so the animation restarts when re-clicked.
+      void target.offsetWidth;
+      target.classList.add("suite-spec--flash");
+    });
+    el.__suitesScrollAttached = true;
+  }
+
+  // Default the methodology "Read the full argument" disclosure based
+  // on viewport width: desktop readers see the whole essay up front,
+  // mobile readers see the opening paragraph + an opt-in expander so
+  // the rest of the page stays reachable without a long scroll.  Pure
+  // mount-time decision — we don't react to viewport changes since
+  // toggling `open` mid-read would yank the user's scroll position.
+  for (const det of el.querySelectorAll(".why-prose-more")) {
+    const isDesktop = typeof window.matchMedia === "function"
+      && window.matchMedia("(min-width: 880px)").matches;
+    det.open = isDesktop;
+  }
+}
+
+function renderRoofline() {
+  const dots = ROOFLINE_POINTS.map((p) => {
+    const labelDx = p.label === "left" ? -10 : 10;
+    const textAnchor = p.label === "left" ? "end" : "start";
+    return `
+      <g class="rfl-dot" data-suite="${esc(p.letter)}">
+        <circle cx="${p.x}" cy="${p.y}" r="7"/>
+        <text x="${p.x + labelDx}" y="${p.y + 3.5}" class="rfl-letter" text-anchor="${textAnchor}">${esc(p.letter)}</text>
+      </g>
+    `;
+  }).join("");
+  return `
+    <aside class="roofline-diagram" aria-label="Roofline diagram of AccelMark suites">
+      <span class="eyebrow roofline-eyebrow">Roofline</span>
+      <svg class="roofline-svg" viewBox="0 0 340 220" xmlns="http://www.w3.org/2000/svg" role="img">
+        <!-- axes -->
+        <line x1="40" y1="190" x2="320" y2="190" class="rfl-axis"/>
+        <line x1="40" y1="20"  x2="40"  y2="190" class="rfl-axis"/>
+
+        <!-- roofline (bandwidth-bound slope → compute-bound ceiling) -->
+        <path d="M 40 178 L 190 50 L 320 50" class="rfl-roof"/>
+
+        <!-- region annotations -->
+        <text x="58"  y="116" class="rfl-region rfl-region--bw">bandwidth-bound</text>
+        <text x="200" y="42"  class="rfl-region rfl-region--cp">compute-bound</text>
+
+        <!-- knee marker -->
+        <line x1="190" y1="50" x2="190" y2="190" class="rfl-knee"/>
+        <text x="194" y="200" class="rfl-knee-label">roofline knee</text>
+
+        ${dots}
+
+        <!-- axis labels -->
+        <text x="42"  y="14"  class="rfl-axis-label">throughput</text>
+        <text x="320" y="208" class="rfl-axis-label" text-anchor="end">arithmetic intensity →</text>
+      </svg>
+      <p class="roofline-caption">
+        Each suite sits at a different point on the roofline. Bandwidth-bound
+        regimes (left of the knee) reward HBM throughput; compute-bound
+        regimes (right) reward raw FLOPS. A chip's ranking changes as the
+        workload moves.
+      </p>
+    </aside>
+  `;
+}
+
+function renderInversion(card) {
+  return `
+    <article class="inversion-card" data-suite="${esc(card.suite)}">
+      <span class="eyebrow">${esc(card.eyebrow)}</span>
+      <h3>${esc(card.title)}</h3>
+      <p>${esc(card.body)}</p>
+    </article>
+  `;
+}
+
+function renderScenarioCard(scn) {
+  const defaults = scn.appliesTo.default || [];
+  const extras   = scn.appliesTo.extra   || [];
+  const icon = SCN_ICONS[scn.icon] || "";
+  return `
+    <li class="scn-card">
+      <header class="scn-card-head">
+        <span class="scn-icon" aria-hidden="true">${icon}</span>
+        <div class="scn-card-id">
+          <h3 class="scn-card-name">${esc(scn.name)}</h3>
+          <span class="scn-card-role">${esc(scn.role)}</span>
+        </div>
+      </header>
+      <p class="scn-card-desc">${esc(scn.description)}</p>
+      <dl class="scn-card-spec">
+        ${scn.spec.map((row) => `
+          <div class="scn-spec-row">
+            <dt>${esc(row.k)}</dt>
+            <dd>${esc(row.v)}</dd>
+          </div>
+        `).join("")}
+      </dl>
+      <div class="scn-card-applies">
+        <span class="scn-applies-label">Used by</span>
+        <span class="scn-applies-letters">
+          ${defaults.map((l) => `<a class="scn-suite-letter" data-suite="${esc(l)}" href="#suite-${esc(l)}">${esc(l)}</a>`).join("")}
+          ${extras.length && defaults.length ? `<span class="scn-applies-sep">·</span>` : ""}
+          ${extras.map((l) => `<a class="scn-suite-letter scn-suite-letter--extra" data-suite="${esc(l)}" href="#suite-${esc(l)}">${esc(l)}</a>`).join("")}
+        </span>
+        ${extras.length ? `<span class="scn-applies-note">${defaults.length ? "extras" : "all extra"}</span>` : ""}
+      </div>
+    </li>
+  `;
+}
+
+function renderSuiteSpec(suiteId) {
+  const meta = SUITE_META[suiteId];
+  if (!meta) return "";
+  const facts = suiteFacts(suiteId);
+  const finding = SUITE_FINDINGS[suiteId];
+  const wl = meta.workload || {};
+  const scenarios = meta.scenarios || [];
+
+  const directionLabel = meta.primary.direction === "asc"
+    ? "Lower is better"
+    : "Higher is better";
+
+  const leaderScenarios = scenarios.filter((s) => s.metric);
+
+  return `
+    <article class="suite-spec" data-suite="${esc(meta.letter)}" id="suite-${esc(meta.letter)}">
+      <header class="suite-spec-head">
+        <span class="suite-spec-letter">${esc(meta.letter)}</span>
+        <div class="suite-spec-title">
+          <span class="eyebrow">Suite ${esc(meta.letter)}</span>
+          <h3>${esc(meta.title)}</h3>
+          <p class="suite-spec-tagline">${esc(meta.tagline)}</p>
+        </div>
+        <span class="suite-spec-metric">
+          <span class="metric-label">${esc(meta.primary.label)}</span>
+          <span class="metric-direction">${esc(directionLabel)}</span>
+        </span>
+      </header>
+
+      <div class="suite-spec-body">
+        <div class="suite-intro-row">
+          ${meta.description ? `<p class="suite-spec-intro">${esc(meta.description)}</p>` : `<div></div>`}
+          ${finding ? `
+            <aside class="suite-finding suite-finding--side">
+              <span class="finding-eyebrow">Concrete finding</span>
+              <p class="finding-headline">${esc(finding.headline)}</p>
+              <p class="finding-body">${esc(finding.body)}</p>
+            </aside>
+          ` : ""}
+        </div>
+
+        <ul class="spec-strip">
+          <li><span class="strip-k">Model</span><span class="strip-v">${esc(shortModel(wl.model) || "-")}</span></li>
+          <li><span class="strip-k">Chips</span><span class="strip-v">${esc(wl.chips || "-")}</span></li>
+          <li><span class="strip-k">Precision</span><span class="strip-v">${esc(wl.precision || "-")}</span></li>
+          <li><span class="strip-k">Dataset</span><span class="strip-v"><code>${esc(wl.dataset || "-")}</code></span></li>
+          <li><span class="strip-k">Tokens (in / out)</span><span class="strip-v tnum">${esc(wl.inputTokens || "-")} / ${esc(wl.outputTokens || "-")}</span></li>
+          <li><span class="strip-k">Coverage</span><span class="strip-v tnum">${fmtNum(facts.submissions)} results &middot; ${fmtNum(facts.chips)} chips</span></li>
+        </ul>
+
+        <div class="suite-scns">
+          <span class="suite-scns-label">Protocols</span>
+          <ul class="suite-scns-list">
+            ${scenarios.map((s) => `
+              <li class="scn-pill ${s.isExtra ? "scn-extra" : "scn-default"}" title="${esc(s.isExtra ? "Extra protocol (opt-in)" : "Default protocol")}">
+                ${esc(s.name)}${s.isExtra ? `<span class="scn-extra-tag">extra</span>` : ""}
+              </li>
+            `).join("")}
+          </ul>
+        </div>
+
+        ${leaderScenarios.length ? `
+          <div class="suite-leaders">
+            <span class="suite-leaders-label">Current leaders</span>
+            <ul class="leader-list">
+              ${leaderScenarios.map((s) => renderLeaderRow(suiteId, s)).join("")}
+            </ul>
+          </div>
+        ` : ""}
+
+        <div class="suite-spec-cta">
+          <a class="btn primary small"
+             href="${esc(buildHash("/rankings", { suite: suiteId }))}">
+            Open ranking →
+          </a>
+          <a class="btn small"
+             href="${GH_BASE}/blob/main/suites/${esc(suiteId)}/suite.json"
+             target="_blank" rel="noopener">
+            View suite.json
+          </a>
+        </div>
+      </div>
+    </article>
+  `;
+}
+
+function renderLeaderRow(suiteId, scn) {
+  const row = bestRowByMetric(suiteId, scn.metric.key, scn.metric.direction);
+  const pillClass = scn.isExtra ? "scn-extra" : "scn-default";
+  if (!row) {
+    return `
+      <li class="leader-row leader-row--empty">
+        <span class="scn-pill ${pillClass}">${esc(scn.name)}</span>
+        <span class="leader-empty">No qualifying submissions yet</span>
+      </li>
+    `;
+  }
+  const val = formatScnMetric(row[scn.metric.key], scn.metric);
+  return `
+    <li class="leader-row">
+      <span class="scn-pill ${pillClass}">${esc(scn.name)}</span>
+      <a class="leader-chip"
+         href="${esc(buildHash("/rankings", { suite: suiteId }))}"
+         title="View ${esc(scn.name)} ranking">
+        <span class="leader-vendor" data-vendor="${esc(row.vendor)}"></span>
+        <span class="leader-chip-name">${esc(row._chip_label)}</span>
+      </a>
+      <span class="leader-val tnum">${esc(val)}</span>
+    </li>
+  `;
+}
+
+function formatScnMetric(value, m) {
+  if (value === null || value === undefined || !Number.isFinite(value)) return "-";
+  const scale = m.scale || 1;
+  const decimals = m.decimals != null
+    ? m.decimals
+    : Math.abs(value * scale) >= 100 ? 0 : 1;
+  const num = (value * scale).toLocaleString("en-US", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+  return m.unit ? `${num} ${m.unit}` : num;
+}
+
+function renderDataset(d) {
+  return `
+    <div class="dataset-row">
+      <span class="dt-name"><code>${esc(d.name)}</code></span>
+      <span class="dt-used">${esc(d.used)}</span>
+      <span class="dt-count tnum">${esc(d.prompts)}</span>
+      <span class="dt-in tnum">${esc(d.inputP50)}</span>
+      <span class="dt-out tnum">${esc(d.outputP50)}</span>
+      <span class="dt-notes">${esc(d.notes)}</span>
+    </div>
+  `;
+}
diff --git a/leaderboard/site/index.html b/leaderboard/site/index.html
index a890e5e2..10013843 100644
--- a/leaderboard/site/index.html
+++ b/leaderboard/site/index.html
@@ -3,2381 +3,78 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/svg+xml" href="favicon.svg">
   <title>AccelMark — AI Accelerator Leaderboard</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      background: #0d1117;
-      color: #e6edf3;
-      min-height: 100vh;
-    }
-
-    header {
-      padding: 2rem 2rem 1rem;
-      border-bottom: 1px solid #21262d;
-    }
-
-    header h1 {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: #f0f6fc;
-      display: flex;
-      align-items: center;
-      gap: 0.6rem;
-    }
-
-    header h1 .brand-mark {
-      flex: 0 0 auto;
-    }
-
-    header p {
-      color: #8b949e;
-      margin-top: 0.25rem;
-      font-size: 0.9rem;
-    }
-
-    .controls {
-      padding: 1rem 2rem;
-      display: flex;
-      gap: 0.75rem;
-      flex-wrap: wrap;
-      align-items: center;
-      border-bottom: 1px solid #21262d;
-    }
-
-    select, input {
-      background: #161b22;
-      border: 1px solid #30363d;
-      color: #e6edf3;
-      padding: 0.4rem 0.75rem;
-      border-radius: 6px;
-      font-size: 0.875rem;
-    }
-
-    .view-toggle {
-      margin-left: auto;
-      display: flex;
-      gap: 0.5rem;
-    }
-
-    .view-btn {
-      background: #161b22;
-      border: 1px solid #30363d;
-      color: #8b949e;
-      padding: 0.4rem 0.9rem;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 0.875rem;
-    }
-
-    .view-btn.active {
-      background: #1f6feb;
-      border-color: #1f6feb;
-      color: #fff;
-    }
-
-    .table-wrap {
-      overflow-x: auto;
-      padding: 1rem 2rem;
-    }
-
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.875rem;
-    }
-
-    th {
-      text-align: left;
-      padding: 0.6rem 0.75rem;
-      color: #8b949e;
-      font-weight: 500;
-      border-bottom: 1px solid #21262d;
-      white-space: nowrap;
-      cursor: pointer;
-      user-select: none;
-    }
-
-    th:hover { color: #e6edf3; }
-
-    th.sorted-asc::after  { content: " ↑"; }
-    th.sorted-desc::after { content: " ↓"; }
-
-    td {
-      padding: 0.6rem 0.75rem;
-      border-bottom: 1px solid #161b22;
-      white-space: nowrap;
-    }
-
-    tr.clickable { cursor: pointer; }
-    tr.clickable:hover td { background: #1c2128; }
-
-    .badge {
-      display: inline-block;
-      padding: 0.15rem 0.5rem;
-      border-radius: 12px;
-      font-size: 0.75rem;
-      font-weight: 500;
-    }
-
-    .badge-verified  { background: #1a4a1a; color: #56d364; }
-    .badge-community { background: #1c2e4a; color: #58a6ff; }
-    .badge-vendor    { background: #3d2b00; color: #d29922; }
-    .badge-mini      { background: #2d1b69; color: #a78bfa; }
-
-    .metric-primary {
-      font-weight: 600;
-      font-variant-numeric: tabular-nums;
-    }
-
-    .chip-name { font-weight: 500; }
-    .badge-flagged {
-      display: inline-block;
-      background: #fff3cd;
-      color: #856404;
-      border: 1px solid #ffc107;
-      border-radius: 4px;
-      padding: 1px 5px;
-      font-size: 11px;
-      margin-left: 6px;
-      cursor: help;
-      vertical-align: middle;
-    }
-    .empty-state {
-      text-align: center;
-      padding: 4rem 2rem;
-      color: #8b949e;
-    }
-
-    .stat-bar {
-      padding: 1rem 2rem;
-      display: flex;
-      gap: 2rem;
-      border-bottom: 1px solid #21262d;
-      font-size: 0.875rem;
-      color: #8b949e;
-    }
-
-    .stat-bar span { color: #e6edf3; font-weight: 600; }
-
-    /* Consumer view cards */
-    .cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 1rem;
-      padding: 1rem 2rem;
-    }
-
-    .card {
-      background: #161b22;
-      border: 1px solid #21262d;
-      border-radius: 8px;
-      padding: 1rem;
-      cursor: pointer;
-      transition: border-color 0.15s, background 0.15s;
-    }
-
-    .card:hover {
-      border-color: #388bfd;
-      background: #1c2128;
-    }
-
-    .card-chip { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
-    .card-speed { font-size: 1.75rem; font-weight: 700; color: #58a6ff; }
-    .card-speed-label { font-size: 0.75rem; color: #8b949e; }
-    .card-model { font-size: 0.8rem; color: #8b949e; margin-top: 0.5rem; }
-
-    .cap-list { margin-top: 0.75rem; font-size: 0.8rem; }
-    .cap-yes { color: #56d364; }
-    .cap-no  { color: #f85149; }
-
-    .framework-standard { color: #56d364; }
-    .framework-custom    { color: #d29922; }
-    .framework-unknown   { color: #8b949e; }
-
-    .framework-cell {
-      cursor: pointer;
-      text-decoration: underline dotted;
-    }
-
-    .framework-tooltip {
-      display: none;
-      position: absolute;
-      background: #1c2128;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      padding: 0.5rem 0.75rem;
-      font-size: 0.8rem;
-      color: #e6edf3;
-      z-index: 100;
-      max-width: 400px;
-      white-space: normal;
-    }
-
-    .framework-cell:hover .framework-tooltip {
-      display: block;
-    }
-
-    .framework-wrapper {
-      position: relative;
-      display: inline-block;
-    }
-
-    /* ── Suite color system ───────────────────────────────────── */
-    .suite-pill {
-      display: inline-block;
-      font-size: 0.7rem;
-      font-weight: 600;
-      padding: 0.1rem 0.45rem;
-      border-radius: 10px;
-      letter-spacing: 0.02em;
-      vertical-align: middle;
-    }
-    .suite-pill.suite_A { background: #0c2d4a; color: #58a6ff; }
-    .suite-pill.suite_B { background: #0f2d14; color: #56d364; }
-    .suite-pill.suite_C { background: #2d1f00; color: #d29922; }
-    .suite-pill.suite_D { background: #1e1040; color: #a78bfa; }
-    .suite-pill.suite_E { background: #062d1e; color: #1D9E75; }
-    .suite-pill.suite_F { background: #2d1a2e; color: #c084fc; }
-    .suite-pill.suite_G { background: #0a2d2d; color: #2dd4bf; }
-
-    /* ── Scenario pill ────────────────────────────────────────── */
-    .scenario-pill {
-      display: inline-block;
-      font-size: 0.7rem;
-      font-weight: 600;
-      padding: 0.1rem 0.45rem;
-      border-radius: 10px;
-      letter-spacing: 0.02em;
-      vertical-align: middle;
-      cursor: default;
-    }
-    .scenario-pill.sc-offline     { background: #0c2d4a; color: #58a6ff; }
-    .scenario-pill.sc-online      { background: #0c2d2d; color: #39d0d0; }
-    .scenario-pill.sc-interactive { background: #1e1040; color: #a78bfa; }
-    .scenario-pill.sc-sustained   { background: #0f2d14; color: #56d364; }
-    .scenario-pill.sc-speculative { background: #2d2300; color: #eab308; }
-    .scenario-pill.sc-burst       { background: #2d0c0c; color: #f87171; }
-    .scenario-pill.sc-all         { background: #1c2028; color: #8b949e; }
-
-    /* ── Card suite top border ────────────────────────────────── */
-    .card { border-top: 3px solid #21262d; }
-    .card.suite_A { border-top-color: #58a6ff; }
-    .card.suite_B { border-top-color: #56d364; }
-    .card.suite_C { border-top-color: #d29922; }
-    .card.suite_D { border-top-color: #a78bfa; }
-    .card.suite_E { border-top-color: #1D9E75; }
-    .card.suite_F { border-top-color: #c084fc; }
-    .card.suite_G { border-top-color: #2dd4bf; }
-
-    /* ── Modal suite top border ───────────────────────────────── */
-    .modal.suite_A { border-top: 3px solid #58a6ff; }
-    .modal.suite_B { border-top: 3px solid #56d364; }
-    .modal.suite_C { border-top: 3px solid #d29922; }
-    .modal.suite_D { border-top: 3px solid #a78bfa; }
-    .modal.suite_E { border-top: 3px solid #1D9E75; }
-    .modal.suite_F { border-top: 3px solid #c084fc; }
-    .modal.suite_G { border-top: 3px solid #2dd4bf; }
-
-    /* ── Detail modal ─────────────────────────────────────── */
-    .modal-backdrop {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.65);
-      z-index: 1000;
-      align-items: center;
-      justify-content: center;
-      padding: 1rem;
-    }
-
-    .modal-backdrop.open {
-      display: flex;
-    }
-
-    .modal {
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 12px;
-      width: 100%;
-      max-width: 640px;
-      max-height: 90vh;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .modal-header {
-      padding: 1.25rem 1.5rem 1rem;
-      border-bottom: 1px solid #21262d;
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 1rem;
-      position: sticky;
-      top: 0;
-      background: #161b22;
-      z-index: 1;
-    }
-
-    .modal-title {
-      font-size: 1rem;
-      font-weight: 600;
-      color: #f0f6fc;
-      line-height: 1.4;
-    }
-
-    .modal-subtitle {
-      font-size: 0.8rem;
-      color: #8b949e;
-      margin-top: 0.2rem;
-    }
-
-    .modal-close {
-      background: none;
-      border: 1px solid #30363d;
-      color: #8b949e;
-      border-radius: 6px;
-      cursor: pointer;
-      padding: 0.25rem 0.6rem;
-      font-size: 1rem;
-      line-height: 1;
-      flex-shrink: 0;
-    }
-
-    .modal-close:hover { color: #e6edf3; border-color: #8b949e; }
-
-    .modal-body {
-      padding: 1rem 1.5rem 1.5rem;
-      display: flex;
-      flex-direction: column;
-      gap: 1.25rem;
-    }
-
-    .detail-section { display: flex; flex-direction: column; gap: 0; }
-
-    .detail-section-title {
-      font-size: 0.7rem;
-      font-weight: 600;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: #8b949e;
-      margin-bottom: 0.5rem;
-    }
-
-    .detail-row {
-      display: flex;
-      align-items: baseline;
-      gap: 0.5rem;
-      padding: 0.35rem 0;
-      border-bottom: 1px solid #21262d;
-      font-size: 0.85rem;
-    }
-
-    .detail-row:last-child { border-bottom: none; }
-
-    .detail-label {
-      color: #8b949e;
-      min-width: 160px;
-      flex-shrink: 0;
-    }
-
-    .detail-value {
-      color: #e6edf3;
-      word-break: break-all;
-    }
-
-    .detail-value.mono {
-      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
-      font-size: 0.8rem;
-      color: #a5d6ff;
-    }
-
-    .detail-value.good { color: #56d364; }
-    .detail-value.warn { color: #d29922; }
-    .detail-value.null { color: #484f58; font-style: italic; }
-
-    .modal-footer {
-      padding: 0.75rem 1.5rem;
-      border-top: 1px solid #21262d;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 0.8rem;
-      color: #8b949e;
-    }
-
-    .modal-footer a {
-      color: #58a6ff;
-      text-decoration: none;
-    }
-
-    .modal-footer a:hover { text-decoration: underline; }
-
-    .modal-tabs {
-      display: flex;
-      gap: 0;
-      border-bottom: 1px solid #21262d;
-      padding: 0 1.5rem;
-      background: #161b22;
-    }
-
-    .modal-tab {
-      background: none;
-      border: none;
-      border-bottom: 2px solid transparent;
-      color: #8b949e;
-      padding: 0.6rem 1rem;
-      cursor: pointer;
-      font-size: 0.85rem;
-      margin-bottom: -1px;
-    }
-
-    .modal-tab.active {
-      color: #e6edf3;
-      border-bottom-color: #1f6feb;
-    }
-
-    .modal-tab:hover:not(.active) { color: #c9d1d9; }
-
-    .chart-wrap {
-      position: relative;
-      width: 100%;
-    }
-
-    .chart-section-title {
-      font-size: 0.7rem;
-      font-weight: 600;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: #8b949e;
-      margin: 1rem 0 0.5rem;
-    }
-
-    .chart-section-title:first-child { margin-top: 0; }
-
-    .stat-chips {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-      gap: 8px;
-      margin-bottom: 1rem;
-    }
-
-    .stat-chip {
-      background: #0d1117;
-      border-radius: 6px;
-      padding: 8px 12px;
-    }
-
-    .stat-chip-label { font-size: 11px; color: #8b949e; margin: 0 0 2px; }
-    .stat-chip-value { font-size: 16px; font-weight: 600; color: #e6edf3; margin: 0; }
-    .stat-chip-value.blue  { color: #58a6ff; }
-    .stat-chip-value.green { color: #56d364; }
-    .stat-chip-value.teal  { color: #1D9E75; }
-    .stat-chip-value.amber { color: #d29922; }
-    .stat-chip-value.coral { color: #D85A30; }
-    .stat-chip-value.purple { color: #c084fc; }
-
-    .sla-row {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 12px;
-      margin-bottom: 4px;
-    }
+  <meta name="description" content="Open, reproducible benchmark leaderboard for AI accelerators across vendors and workloads.">
+  <meta name="theme-color" content="#0b0c10" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#faf8f3" media="(prefers-color-scheme: light)">
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
 
-    .sla-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-    .sla-dot.pass { background: #56d364; }
-    .sla-dot.fail { background: #f85149; }
-  </style>
+  <link rel="stylesheet" href="assets/css/base.css">
+  <link rel="stylesheet" href="assets/css/layout.css">
+  <link rel="stylesheet" href="assets/css/components.css">
+  <link rel="stylesheet" href="assets/css/home.css">
+  <link rel="stylesheet" href="assets/css/suites.css">
+  <link rel="stylesheet" href="assets/css/rankings.css">
+  <link rel="stylesheet" href="assets/css/chip-detail.css">
+  <link rel="stylesheet" href="assets/css/modal.css">
 </head>
 <body>
-
-<header>
-  <h1>
-    <svg class="brand-mark" viewBox="0 0 72 72" width="34" height="34" role="img" aria-hidden="true">
-      <defs>
-        <linearGradient id="lbBolt" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" stop-color="#FCD34D"/>
-          <stop offset="100%" stop-color="#FBBF24"/>
-        </linearGradient>
-        <linearGradient id="lbGauge" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%" stop-color="#93C5FD"/>
-          <stop offset="100%" stop-color="#60A5FA"/>
-        </linearGradient>
-      </defs>
-      <path d="M 10 50 A 26 26 0 1 1 62 50" fill="none" stroke="url(#lbGauge)" stroke-width="5.5" stroke-linecap="round"/>
-      <circle cx="10" cy="50" r="3" fill="url(#lbGauge)"/>
-      <circle cx="62" cy="50" r="3" fill="url(#lbGauge)"/>
-      <path d="M 40 14 L 24 42 L 33 42 L 28 58 L 50 30 L 41 30 Z" fill="url(#lbBolt)" stroke="#78350F" stroke-width="0.7" stroke-linejoin="round"/>
-    </svg>
-    <span>AccelMark Leaderboard</span>
-  </h1>
-  <p>Open benchmark for AI accelerators on LLM workloads · <a href="https://github.com/JuhaoLiang1997/AccelMark" style="color:#58a6ff">GitHub</a></p>
-</header>
-
-<div class="stat-bar">
-  <div>Submissions: <span id="stat-total">—</span></div>
-  <div>Chips: <span id="stat-chips">—</span></div>
-  <div>Last updated: <span id="stat-date">—</span></div>
-</div>
-
-<details style="padding:0.75rem 2rem;border-bottom:1px solid #21262d;font-size:0.82rem;color:#8b949e;cursor:pointer">
-  <summary style="color:#e6edf3;font-weight:500;list-style:none;display:flex;align-items:center;gap:0.5rem">
-    <span style="font-size:0.75rem;background:#21262d;padding:0.15rem 0.5rem;border-radius:4px">?</span> Suite descriptions
-  </summary>
-  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0.5rem 2rem;margin-top:0.75rem">
-    <div><span style="color:#58a6ff;font-weight:500">Suite A</span> — Single chip, Llama-3-8B. How fast is this chip at inference? Primary metric: offline tokens/sec.</div>
-    <div><span style="color:#56d364;font-weight:500">Suite B</span> — Flexible chips, Llama-3-70B. Can this chip serve large models? Tests multi-chip setups required for 70B.</div>
-    <div><span style="color:#d29922;font-weight:500">Suite C</span> — Single chip, Llama-3.1-8B. Quantization speed/quality tradeoff across BF16, FP8, W8A8, W8A16, W4A16.</div>
-    <div><span style="color:#a78bfa;font-weight:500">Suite D</span> — Single chip, Llama-3.1-8B. How does this chip handle ~28K-token long-context inputs?</div>
-    <div><span style="color:#1D9E75;font-weight:500">Suite E</span> — 1×/2×/4×/8× chips, Llama-3-8B. Multi-chip scaling efficiency. Primary metric: 1× baseline tokens/sec.</div>
-    <div><span style="color:#c084fc;font-weight:500">Suite F</span> — Single chip, Qwen2.5-0.5B. Consumer/edge inference. Designed for GPUs with ≥4 GB VRAM. Primary metric: offline tokens/sec.</div>
-    <div><span style="color:#2dd4bf;font-weight:500">Suite G</span> — Multi-chip, Mixtral-8x7B-Instruct (MoE, ~47B total / ~13B active). Minimum 2 chips. Tests sparse expert routing efficiency.</div>
-  </div>
-</details>
-<details style="padding:0.75rem 2rem;border-bottom:1px solid #21262d;font-size:0.82rem;color:#8b949e;cursor:pointer">
-  <summary style="color:#e6edf3;font-weight:500;list-style:none;display:flex;align-items:center;gap:0.5rem">
-    <span style="font-size:0.75rem;background:#21262d;padding:0.15rem 0.5rem;border-radius:4px">?</span> Scenario descriptions
-  </summary>
-  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0.5rem 2rem;margin-top:0.75rem">
-    <div><span class="scenario-pill sc-offline">Offline</span> — All requests sent at once. Measures peak throughput (tokens/sec) at each concurrency level. Primary metric for most suites.</div>
-    <div><span class="scenario-pill sc-online">Online</span> — Poisson-arrival load at increasing QPS levels. Reports maximum QPS where TTFT p99 stays within the suite SLA.</div>
-    <div><span class="scenario-pill sc-interactive">Interactive</span> — One request at a time (serial). Measures isolated TTFT and TPOT with no queueing pressure.</div>
-    <div><span class="scenario-pill sc-sustained">Sustained</span> — Fixed-concurrency run (typically 30 minutes; Suite F uses 15). Detects thermal throttling, memory fragmentation, and performance degradation over time.</div>
-    <div><span class="scenario-pill sc-speculative">Speculative</span> — Speculative decoding with a fixed draft model (Llama-3.2-1B). Measures throughput change when verification batching shifts the workload toward compute-bound.</div>
-    <div><span class="scenario-pill sc-burst">Burst</span> — Two-state bursty load test. Alternates between steady-state and 5× burst QPS. Measures KV cache eviction behavior and tail latency under transient overload.</div>
-  </div>
-</details>
-<div class="controls">
-  <select id="filter-vendor">
-    <option value="">All vendors</option>
-  </select>
-  <select id="filter-scenario">
-    <option value="">All scenarios</option>
-    <option value="offline">Offline</option>
-    <option value="online">Online</option>
-    <option value="interactive">Interactive</option>
-    <option value="sustained">Sustained</option>
-    <option value="speculative">Speculative</option>
-    <option value="burst">Burst</option>
-    <option value="all">All (suite-level)</option>
-  </select>
-  <select id="filter-tier">
-    <option value="">Verified + Community</option>
-    <option value="verified">Verified only</option>
-    <option value="community">Community only</option>
-  </select>
-  <select id="filter-chips">
-    <option value="">All chip counts</option>
-    <option value="1">Single chip (1)</option>
-    <option value="2">2 chips</option>
-    <option value="4">4 chips</option>
-    <option value="8">8 chips</option>
-  </select>
-  <select id="filter-suite">
-    <option value="">All suites</option>
-    <option value="suite_A">Suite A — single chip inference speed</option>
-    <option value="suite_B">Suite B — large model serving</option>
-    <option value="suite_C">Suite C — quantization tradeoff</option>
-    <option value="suite_D">Suite D — long context (~28K)</option>
-    <option value="suite_E">Suite E — multi-chip scaling</option>
-    <option value="suite_F">Suite F — consumer/edge inference</option>
-    <option value="suite_G">Suite G — MoE inference (Mixtral-8x7B)</option>
-  </select>
-  <input id="search" type="text" placeholder="Search chip or model…" style="width:200px">
-  <div class="view-toggle">
-    <button class="view-btn active" id="btn-consumer" onclick="setView('consumer')">Community</button>
-    <button class="view-btn" id="btn-pro" onclick="setView('pro')">Pro</button>
-  </div>
-</div>
-
-<!-- Consumer view -->
-<div id="view-consumer">
-  <div class="cards" id="cards-container"></div>
-</div>
-
-<!-- Pro view -->
-<div id="view-pro" style="display:none">
-  <div class="table-wrap">
-    <table id="pro-table">
-      <thead>
-        <tr>
-          <th onclick="sortBy('chip')">Chip</th>
-          <th onclick="sortBy('vendor')">Vendor</th>
-          <th onclick="sortBy('chip_count')">Count</th>
-          <th onclick="sortBy('framework')">Framework</th>
-          <th onclick="sortBy('model')">Model</th>
-          <th onclick="sortBy('precision')">Precision</th>
-          <th onclick="sortBy('suite')">Suite</th>
-          <th onclick="sortBy('scenario')">Scenario</th>
-          <th onclick="sortBy('primary_metric')">Performance</th>
-          <th onclick="sortBy('quant_int8_speedup')" data-col="int8_speedup">W8A16 speedup</th>
-          <th onclick="sortBy('quant_int4_speedup')" data-col="int4_speedup">W4A16 speedup</th>
-          <th onclick="sortBy('scaling_efficiency_2x')" data-col="scaling_2x">2× eff.</th>
-          <th onclick="sortBy('scaling_efficiency_4x')" data-col="scaling_4x">4× eff.</th>
-          <th onclick="sortBy('sustained_throughput')" data-col="sustained" title="Mean tokens/sec over sustained run">Sustained tok/s</th>
-          <th onclick="sortBy('throttle_ratio')" data-col="throttle_ratio" title="min/max throughput ratio (1.0 = no throttling)">Throttle ratio</th>
-          <th onclick="sortBy('throttle_onset_minute')" data-col="throttle_onset" title="Minute when throughput first dropped >10%">Throttle onset</th>
-          <th onclick="sortBy('tokens_per_watt')" data-col="toks_w">tok/s/W</th>
-          <th onclick="sortBy('memory_efficiency_toks_per_gb')" data-col="toks_gb">tok/s/GB</th>
-          <th onclick="sortBy('cost_efficiency_toks_per_dollar_hr')" data-col="toks_dollar">tok/s/$/hr</th>
-          <th onclick="sortBy('tier')">Tier</th>
-          <th onclick="sortBy('date')">Date</th>
-        </tr>
-      </thead>
-      <tbody id="pro-tbody"></tbody>
-    </table>
-    <div class="empty-state" id="pro-empty" style="display:none">
-      No results match the current filters.
+  <nav class="topnav" aria-label="Primary">
+    <a class="brand" href="#/" aria-label="AccelMark home">
+      <svg width="24" height="24" viewBox="0 0 72 72" aria-hidden="true">
+        <defs>
+          <linearGradient id="navBolt" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="#FBBF24"/>
+            <stop offset="100%" stop-color="#F59E0B"/>
+          </linearGradient>
+          <linearGradient id="navGauge" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#60A5FA"/>
+            <stop offset="100%" stop-color="#2563EB"/>
+          </linearGradient>
+        </defs>
+        <path d="M 10 50 A 26 26 0 1 1 62 50" fill="none" stroke="url(#navGauge)" stroke-width="6" stroke-linecap="round"/>
+        <path d="M 40 14 L 24 42 L 33 42 L 28 58 L 50 30 L 41 30 Z" fill="url(#navBolt)" stroke-width="0"/>
+      </svg>
+      <span>AccelMark</span>
+    </a>
+
+    <div class="nav-links">
+      <a class="nav-link" href="#/">Home</a>
+      <a class="nav-link" href="#/rankings">Rankings</a>
+      <a class="nav-link" href="#/compare">Compare</a>
+      <a class="nav-link" href="#/suites">Suites</a>
     </div>
-  </div>
-</div>
 
-<!-- Detail modal -->
-<div class="modal-backdrop" id="modal-backdrop" onclick="closeModal(event)">
-  <div class="modal" id="modal">
-    <div class="modal-header">
-      <div>
-        <div class="modal-title" id="modal-title">—</div>
-        <div class="modal-subtitle" id="modal-subtitle">—</div>
-      </div>
-      <button class="modal-close" onclick="closeModalDirect()">✕</button>
-    </div>
-    <div class="modal-tabs" id="modal-tabs">
-      <button class="modal-tab active" id="tab-details" onclick="switchTab('details')">Details</button>
-      <button class="modal-tab" id="tab-viz" onclick="switchTab('viz')">Visualize</button>
-      <button class="modal-tab" id="tab-impl" onclick="switchTab('impl')" style="display:none">Implementation</button>
+    <div class="nav-right">
+      <a class="gh-link" href="https://github.com/JuhaoLiang1997/AccelMark" target="_blank" rel="noopener" aria-label="GitHub">
+        <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.32c-2.22.48-2.69-1.07-2.69-1.07-.36-.93-.89-1.18-.89-1.18-.73-.49.06-.48.06-.48.8.06 1.23.82 1.23.82.72 1.23 1.88.88 2.34.67.07-.52.28-.88.51-1.08-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.13 0 0 .67-.21 2.2.82a7.58 7.58 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.11.16 1.93.08 2.13.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.2c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+        </svg>
+      </a>
     </div>
-    <div class="modal-body" id="modal-body"></div>
-    <div class="modal-body" id="modal-viz" style="display:none"></div>
-    <div class="modal-body" id="modal-impl" style="display:none"></div>
-    <div class="modal-footer">
-      <span id="modal-submission">—</span>
-      <a id="modal-script-link" href="#" target="_blank" style="display:none">View reproduce script ↗</a>
-    </div>
-  </div>
-</div>
-
-<script src="leaderboard.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
-<script>
-  // ── State ────────────────────────────────────────────────
-  let currentView = 'consumer';
-  let sortKey = 'primary_metric';
-  let sortDir = -1; // -1 = desc, 1 = asc
-
-  // ── Init ─────────────────────────────────────────────────
-  document.addEventListener('DOMContentLoaded', () => {
-    if (typeof LEADERBOARD_DATA === 'undefined' || !LEADERBOARD_DATA.length) {
-      document.getElementById('pro-empty').style.display = 'block';
-      document.getElementById('pro-empty').textContent = 'No submissions yet. Be the first!';
-      return;
-    }
-
-    populateVendorFilter();
-    updateStats();
-    render();
-  });
-
-  // ── Suite pill ────────────────────────────────────────────
-  function suitePill(suite) {
-    if (!suite) return '';
-    const label = suite.replace('_', '\u00a0').toUpperCase(); // "SUITE A" with nbsp
-    return `<span class="suite-pill ${suite}">${label}</span>`;
-  }
-
-  // ── Scenario pill ──────────────────────────────────────────
-  const SCENARIO_INFO = {
-    offline:     { label: 'Offline',      desc: 'Batch throughput benchmark' },
-    online:      { label: 'Online',       desc: 'Concurrent requests — max valid QPS & latency' },
-    interactive: { label: 'Interactive',  desc: 'Single-stream — TTFT and TPOT percentiles' },
-    sustained:   { label: 'Sustained',    desc: 'Long-run load stability & throttle detection' },
-    speculative: { label: 'Speculative', desc: 'Speculative decoding throughput with draft model' },
-    burst:       { label: 'Burst',       desc: 'Burst load — tail latency under traffic spikes' },
-  };
-
-  function scenarioPill(row) {
-    const scenario = row.scenario;
-    if (!scenario) return '';
-    if (scenario === 'all') {
-      const run = row.detail && row.detail.run_scenarios;
-      if (run && run.length) {
-        const text = run.map(s => (SCENARIO_INFO[s] || { label: s }).label).join(' · ');
-        const tip  = run.map(s => (SCENARIO_INFO[s] || { label: s, desc: s }).desc).join('\n');
-        return `<span class="scenario-pill sc-all" title="${tip}">${text}</span>`;
-      }
-      return `<span class="scenario-pill sc-all">All</span>`;
-    }
-    const info = SCENARIO_INFO[scenario] || { label: scenario, desc: '' };
-    return `<span class="scenario-pill sc-${scenario}" title="${info.desc}">${info.label}</span>`;
-  }
-
-  // ── Filters ──────────────────────────────────────────────
-  function getFiltered() {
-    const vendor   = document.getElementById('filter-vendor').value;
-    const scenario = document.getElementById('filter-scenario').value;
-    const tier     = document.getElementById('filter-tier').value;
-    const search   = document.getElementById('search').value.toLowerCase();
-    const chips    = document.getElementById('filter-chips').value;
-    const suite    = document.getElementById('filter-suite').value;
-
-    return LEADERBOARD_DATA.filter(row => {
-      if (vendor   && row.vendor   !== vendor)   return false;
-      if (scenario && row.scenario !== scenario) return false;
-      if (tier     && row.tier     !== tier)     return false;
-      if (chips && String(row.chip_count || 1) !== chips) return false;
-      if (suite    && row.suite    !== suite)    return false;
-      if (search) {
-        const haystack = `${row.chip} ${row.model} ${row.framework}`.toLowerCase();
-        if (!haystack.includes(search)) return false;
-      }
-      return true;
-    });
-  }
-
-  function populateVendorFilter() {
-    const vendors = [...new Set(LEADERBOARD_DATA.map(r => r.vendor).filter(Boolean))].sort();
-    const sel = document.getElementById('filter-vendor');
-    vendors.forEach(v => {
-      const opt = document.createElement('option');
-      opt.value = v; opt.textContent = v;
-      sel.appendChild(opt);
-    });
-  }
-
-  ['filter-vendor','filter-scenario','filter-tier','filter-chips','filter-suite','search'].forEach(id => {
-    document.getElementById(id).addEventListener('change', render);
-    document.getElementById(id).addEventListener('input', render);
-  });
-
-  // ── Sorting ──────────────────────────────────────────────
-  function sortBy(key) {
-    if (sortKey === key) sortDir *= -1;
-    else { sortKey = key; sortDir = -1; }
-    render();
-  }
-
-  function getSorted(rows) {
-    return [...rows].sort((a, b) => {
-      const va = a[sortKey], vb = b[sortKey];
-      if (va === null || va === undefined) return 1;
-      if (vb === null || vb === undefined) return -1;
-      if (typeof va === 'number') return (va - vb) * sortDir;
-      return String(va).localeCompare(String(vb)) * sortDir;
-    });
-  }
-
-  // ── Render ───────────────────────────────────────────────
-  function render() {
-    const filtered = getFiltered();
-    const sorted   = getSorted(filtered);
-
-    updateStats(filtered);
-
-    if (currentView === 'consumer') renderConsumer(sorted);
-    else { renderPro(sorted); hideEmptyCols(); }
-  }
-
-  function setView(v) {
-    currentView = v;
-    document.getElementById('view-consumer').style.display = v === 'consumer' ? '' : 'none';
-    document.getElementById('view-pro').style.display      = v === 'pro'      ? '' : 'none';
-    document.getElementById('btn-consumer').classList.toggle('active', v === 'consumer');
-    document.getElementById('btn-pro').classList.toggle('active', v === 'pro');
-    render();
-  }
-
-  function updateStats(filtered) {
-    const rows = filtered || LEADERBOARD_DATA;
-    document.getElementById('stat-total').textContent = rows.length;
-    document.getElementById('stat-chips').textContent = new Set(rows.map(r => r.chip)).size;
-    const dates = rows.map(r => r.date).filter(Boolean).sort();
-    document.getElementById('stat-date').textContent = dates.length ? dates[dates.length - 1] : '—';
-  }
-
-  // ── Consumer View ────────────────────────────────────────
-  function renderConsumer(rows) {
-    const container = document.getElementById('cards-container');
-    container.innerHTML = '';
-
-    // Group by chip+suite, take best result per group
-    const byChip = {};
-    rows.forEach(row => {
-      if (!row.chip) return;
-      const key = (row.chip || '') + '||' + (row.suite || '');
-      if (!byChip[key] || (row.primary_metric || 0) > (byChip[key].primary_metric || 0)) {
-        byChip[key] = row;
-      }
-    });
-
-    const chips = Object.values(byChip).sort((a, b) =>
-      (b.primary_metric || 0) - (a.primary_metric || 0)
-    );
-
-    if (!chips.length) {
-      container.innerHTML = '<div class="empty-state">No results match the current filters.</div>';
-      return;
-    }
-
-    chips.forEach(row => {
-      const card = document.createElement('div');
-      card.className = `card ${row.suite || ''}`;
-      const isMini = (row.suite || '').startsWith('mini-');
-      card.innerHTML = `
-        <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;margin-bottom:0.25rem">
-          <div class="card-chip">
-            ${row.chip || 'Unknown'}
-            ${(row.chip_count || 1) > 1
-              ? `<span style="color:#8b949e;font-size:0.85rem;font-weight:400"> ×${row.chip_count}</span>`
-              : ''}
-          </div>
-          ${suitePill(row.suite)}
-        </div>
-        <div style="margin-top:0.25rem">
-          ${row.is_suite_level && row.suite !== 'suite_C' ? `
-            <div class="card-speed">${row.offline_throughput
-              ? row.offline_throughput.toLocaleString(undefined, {maximumFractionDigits: 0})
-              : '—'}</div>
-            <div class="card-speed-label">tokens/sec offline</div>
-            <div style="margin-top:0.5rem;font-size:0.82rem;color:#8b949e">
-              ${row.online_max_qps ? '&bull; ' + row.online_max_qps + ' max QPS' : ''}
-              ${row.interactive_ttft_p99 ? ' &bull; ' + row.interactive_ttft_p99.toFixed(0) + 'ms TTFT p99' : ''}
-            </div>
-          ` : `
-            <div class="card-speed">${row.primary_metric
-              ? row.primary_metric.toLocaleString(undefined, {maximumFractionDigits: 0})
-              : '—'}</div>
-            <div class="card-speed-label">${row.primary_metric_label || 'tokens/sec'}</div>
-          `}
-        </div>
-        <div class="card-model">
-          ${row.model || ''} ·
-          <span title="${row.implementation_id ? 'runner: ' + row.implementation_id : ''}">${row.framework || ''}${row.framework_version ? ' ' + row.framework_version : ''}</span> ·
-          ${row.precision_fallback
-            ? `<span style="color:#d29922" title="BF16 not supported on this hardware — using FP16">${row.precision || ''} ⚠</span>`
-            : (row.precision || '')}
-        </div>
-        ${row.suite === 'suite_E' ? `
-            <div style="margin-top:0.5rem;font-size:0.82rem;color:#8b949e">
-                ${row.scaling_efficiency_2x != null
-                    ? '2× eff: ' + (row.scaling_efficiency_2x * 100).toFixed(1) + '%'
-                    : ''}
-                ${row.scaling_efficiency_4x != null
-                    ? ' · 4× eff: ' + (row.scaling_efficiency_4x * 100).toFixed(1) + '%'
-                    : ''}
-            </div>
-        ` : ''}
-        ${row.suite === 'suite_C' && (row.quant_int8_speedup || row.quant_int4_speedup) ? `
-            <div style="margin-top:0.5rem;font-size:0.82rem;color:#8b949e">
-                ${row.quant_int8_speedup ? 'W8A16: ' + row.quant_int8_speedup.toFixed(2) + '× faster' : ''}
-                ${row.quant_int4_speedup ? ' · W4A16: ' + row.quant_int4_speedup.toFixed(2) + '× faster' : ''}
-            </div>
-        ` : ''}
-        ${row.sustained_throughput ? `
-          <div style="margin-top:0.5rem;font-size:0.82rem;color:#8b949e">
-            Sustained: ${row.sustained_throughput.toLocaleString(undefined, {maximumFractionDigits:0})} tok/s
-            ${row.throttle_ratio != null
-              ? ' · throttle: ' + (row.throttle_ratio * 100).toFixed(1) + '%'
-              : ''}
-          </div>
-        ` : ''}
-        <div style="margin-top:0.75rem;display:flex;gap:0.4rem;flex-wrap:wrap;align-items:center">
-          <span class="badge badge-${row.tier}">${row.tier}</span>
-          ${isMini ? '<span class="badge badge-mini">mini</span>' : ''}
-          ${scenarioPill(row)}
-          <span style="margin-left:auto;font-size:0.75rem;color:#484f58">click for details</span>
-        </div>
-      `;
-      card.addEventListener('click', () => openModal(row));
-      container.appendChild(card);
-    });
-  }
-
-  // ── Framework formatter ──────────────────────────────────
-  function formatFramework(row) {
-    const fw = row.framework || '';
-    const fwVersion = row.framework_version || '';
-    const script = row.reproduce_script || '';
-    const notes = row.notes || '';
-    const runnerId = row.implementation_id || '';
-
-    if (!fw || fw === 'unknown') {
-      return `<span class="framework-unknown">—</span>`;
-    }
-
-    const standardFrameworks = ['vllm', 'tensorrt-llm', 'trtllm', 'mindie', 'torchtitan', 'vllm-rocm'];
-    const isStandard = standardFrameworks.some(f => fw.toLowerCase().includes(f));
-    const isCustom = fw.toLowerCase().startsWith('custom') || !isStandard;
-
-    const colorClass = isCustom ? 'framework-custom' : 'framework-standard';
-    const badge = isCustom
-      ? `<span class="badge" style="background:#3d2b00;color:#d29922;margin-left:4px;font-size:0.7rem">custom</span>`
-      : '';
-
-    const versionInline = fwVersion ? ` <span style="color:#8b949e;font-weight:400;font-size:0.85em">${fwVersion}</span>` : '';
-
-    const tooltipLines = [];
-    if (runnerId)  tooltipLines.push(`Runner: ${runnerId}`);
-    if (fwVersion) tooltipLines.push(`Version: ${fwVersion}`);
-    if (script)    tooltipLines.push(`Script: ${script}`);
-    if (notes)     tooltipLines.push(`Notes: ${notes}`);
-    const tooltip = tooltipLines.length
-      ? `<div class="framework-tooltip">${tooltipLines.join('<br>')}</div>`
-      : '';
-
-    return `
-      <div class="framework-wrapper">
-        <span class="framework-cell ${colorClass}">${fw}${versionInline}${badge}</span>
-        ${tooltip}
-      </div>
-    `;
-  }
-
-  // ── Hide columns where every visible row has no value ────
-  function hideEmptyCols() {
-    const COLS = ['int8_speedup','int4_speedup','scaling_2x','scaling_4x',
-                  'sustained','throttle_ratio','throttle_onset',
-                  'toks_w','toks_gb','toks_dollar'];
-    COLS.forEach(col => {
-      const tds = document.querySelectorAll(`#pro-tbody td[data-col="${col}"]`);
-      const th  = document.querySelector(`#pro-table th[data-col="${col}"]`);
-      const hasValue = [...tds].some(td => td.textContent.trim() !== '—');
-      const display = hasValue ? '' : 'none';
-      if (th) th.style.display = display;
-      tds.forEach(td => td.style.display = display);
-    });
-  }
-
-  // ── Pro View ─────────────────────────────────────────────
-  function renderPro(rows) {
-    const tbody = document.getElementById('pro-tbody');
-    const empty = document.getElementById('pro-empty');
-    tbody.innerHTML = '';
-
-    if (!rows.length) {
-      empty.style.display = 'block';
-      return;
-    }
-    empty.style.display = 'none';
-
-    document.querySelectorAll('th').forEach(th => {
-      th.classList.remove('sorted-asc', 'sorted-desc');
-    });
-
-    rows.forEach(row => {
-      const tr = document.createElement('tr');
-      tr.className = 'clickable';
-      const isMini  = (row.suite || '').startsWith('mini-');
-      const isVendor = row.submitted_by && row.submitted_by.includes('[vendor]');
-
-      tr.innerHTML = `
-        <td class="chip-name">${row.chip || '—'}${row.flagged ? `<span class="badge-flagged" title="${row.flagged}">⚠️ flagged</span>` : ''}</td>
-        <td>${row.vendor || '—'}</td>
-        <td>${row.chip_count || 1}</td>
-        <td>${formatFramework(row)}</td>
-        <td title="${row.model_name ? 'Actual: ' + row.model_name : ''}">
-          ${row.model || '—'}
-          ${row.model_name
-            ? ' <span style="color:#d29922;font-size:0.75rem" title="Contributor used a different model variant: ' + row.model_name + '">*</span>'
-            : ''}</td>
-        <td>${row.precision || '—'}${row.precision_fallback
-            ? ' <span style="color:#d29922;font-size:0.75rem" title="Suite requires BF16; hardware uses FP16">⚠</span>'
-            : ''}${row.precision_emulated
-            ? ` <span style="color:#8b949e;font-size:0.75rem" title="Requested ${row.precision} — computed as ${row.effective_dtype}">~</span>`
-            : ''}</td>
-        <td>${suitePill(row.suite) || '—'}</td>
-        <td>${scenarioPill(row) || '—'}</td>
-        <td class="metric-primary">${
-          (row.is_suite_level && row.suite !== 'suite_C')
-            ? `<div>${row.offline_throughput
-                ? row.offline_throughput.toLocaleString(undefined, {maximumFractionDigits: 0})
-                  + ' <small style="color:#8b949e">tok/s</small>'
-                : '—'}</div>
-               <div style="font-size:0.8rem;color:#8b949e;font-weight:400;margin-top:2px">${
-                 [
-                   row.online_max_qps ? row.online_max_qps + ' max QPS' : '',
-                   row.interactive_ttft_p99 ? row.interactive_ttft_p99.toFixed(0) + 'ms TTFT p99' : '',
-                 ].filter(Boolean).join(' · ')
-               }</div>${
-                 row.tokens_per_sec_per_chip && (row.chip_count || 1) > 1
-                   ? `<div style="font-size:0.8rem;color:#8b949e;font-weight:400">${row.tokens_per_sec_per_chip.toLocaleString(undefined, {maximumFractionDigits:0})} tok/s per chip</div>`
-                   : ''
-               }`
-            : row.primary_metric
-              ? row.primary_metric.toLocaleString(undefined, {maximumFractionDigits: 1})
-                + ' <small style="color:#8b949e;font-weight:400">' + (row.primary_metric_label || '') + '</small>'
-              : '—'
-        }</td>
-        <td data-col="int8_speedup">${row.quant_int8_speedup != null
-            ? row.quant_int8_speedup.toFixed(2) + '×'
-            : '—'}</td>
-        <td data-col="int4_speedup">${row.quant_int4_speedup != null
-            ? row.quant_int4_speedup.toFixed(2) + '×'
-            : '—'}</td>
-        <td data-col="scaling_2x">${row.scaling_efficiency_2x != null
-            ? (row.scaling_efficiency_2x * 100).toFixed(1) + '%'
-            : '—'}</td>
-        <td data-col="scaling_4x">${row.scaling_efficiency_4x != null
-            ? (row.scaling_efficiency_4x * 100).toFixed(1) + '%'
-            : '—'}</td>
-        <td data-col="sustained">${row.sustained_throughput != null
-            ? row.sustained_throughput.toLocaleString(undefined, {maximumFractionDigits: 0})
-            : '—'}</td>
-        <td data-col="throttle_ratio">${row.throttle_ratio != null
-            ? (row.throttle_ratio * 100).toFixed(1) + '%'
-            : '—'}</td>
-        <td data-col="throttle_onset">${row.throttle_onset_minute != null
-            ? row.throttle_onset_minute.toFixed(1) + ' min'
-            : '—'}</td>
-        <td data-col="toks_w">${row.tokens_per_watt ? row.tokens_per_watt.toFixed(2) : '—'}</td>
-        <td data-col="toks_gb">${row.memory_efficiency_toks_per_gb != null ? row.memory_efficiency_toks_per_gb.toLocaleString(undefined, {maximumFractionDigits: 1}) : '—'}</td>
-        <td data-col="toks_dollar">${row.cost_efficiency_toks_per_dollar_hr != null ? row.cost_efficiency_toks_per_dollar_hr.toLocaleString(undefined, {maximumFractionDigits: 0}) : '—'}</td>
-        <td>
-          <span class="badge badge-${row.tier}">${row.tier}</span>
-          ${isMini   ? '<span class="badge badge-mini" style="margin-left:4px">mini</span>' : ''}
-          ${isVendor ? '<span class="badge badge-vendor" style="margin-left:4px">vendor</span>' : ''}
-        </td>
-        <td style="color:#8b949e">${row.date || '—'}</td>
-      `;
-
-      tr.addEventListener('click', (e) => {
-        // Don't open modal when clicking framework tooltip area
-        if (e.target.closest('.framework-wrapper')) return;
-        openModal(row);
-      });
-
-      tbody.appendChild(tr);
-    });
-  }
-
-  // ── Detail modal ─────────────────────────────────────────
-  function fmt(v, opts = {}) {
-    if (v === null || v === undefined || v === '' || v === 'unknown' || v === 'Unknown') {
-      return '<span class="detail-value null">—</span>';
-    }
-    const cls = opts.cls || '';
-    const mono = opts.mono ? ' mono' : '';
-    const display = opts.format ? opts.format(v) : String(v);
-    return `<span class="detail-value${mono}${cls ? ' ' + cls : ''}">${display}</span>`;
-  }
-
-  function detailRow(label, v, opts = {}) {
-    return `<div class="detail-row"><span class="detail-label">${label}</span>${fmt(v, opts)}</div>`;
-  }
-
-  function detailSection(title, rows) {
-    const content = rows.filter(Boolean).join('');
-    if (!content) return '';
-    return `
-      <div class="detail-section">
-        <div class="detail-section-title">${title}</div>
-        ${content}
-      </div>`;
-  }
-
-  function _fillModal(row) {
-    const d = row.detail || {};
-
-    document.getElementById('modal-title').textContent =
-      (d.hw_chip || row.chip || '—') +
-      (d.hw_count > 1 ? ` ×${d.hw_count}` : '');
-
-    const subtitleEl = document.getElementById('modal-subtitle');
-    const precisionNote = row.precision_fallback
-        ? `<span style="color:#d29922;font-size:0.75rem">FP16 fallback</span>`
-        : '';
-    subtitleEl.innerHTML = [suitePill(row.suite), scenarioPill(row), row.date, precisionNote]
-      .filter(Boolean).join(' <span style="color:#484f58">·</span> ');
-
-    // Footer
-    document.getElementById('modal-submission').textContent =
-      `Submission: ${row.submission || '—'} · by ${d.meta_submitted_by || '—'}`;
-
-    const scriptLink = document.getElementById('modal-script-link');
-    if (d.meta_reproduce_script) {
-      // If the result references an old (superseded) runner path, the file no longer
-      // exists at that path on GitHub. Point to the current runner's runner.py instead
-      // when impl is available and its supersedes_chain covers the old runner ID.
-      const impl = row.impl;
-      let scriptUrl = `https://github.com/JuhaoLiang1997/AccelMark/blob/main/${d.meta_reproduce_script}`;
-      if (impl && impl.supersedes_chain && d.meta_reproduce_script) {
-        // Extract runner ID from path: "runners/<id>/runner.py" → "<id>"
-        const parts = d.meta_reproduce_script.split('/');
-        const oldRunnerId = parts.length >= 2 ? parts[parts.length - 2] : null;
-        if (oldRunnerId && impl.supersedes_chain.includes(oldRunnerId)) {
-          scriptUrl = impl.runner_url;  // link to current runner.py instead
-        }
-      }
-      scriptLink.href = scriptUrl;
-      scriptLink.style.display = '';
-    } else {
-      scriptLink.style.display = 'none';
-    }
-
-    const body = document.getElementById('modal-body');
-    body.innerHTML = [
-      detailSection('Hardware', [
-        detailRow('Chip', d.hw_chip),
-        detailRow('Vendor', d.hw_vendor),
-        detailRow('Count', d.hw_count),
-        detailRow('Memory per chip', d.hw_memory_gb, { format: v => v + ' GB' }),
-        detailRow('Intra-node interconnect', d.hw_interconnect_intra),
-        detailRow('Inter-node interconnect', d.hw_interconnect_inter),
-        detailRow('CPU', d.hw_cpu),
-        detailRow('System memory', d.hw_system_memory_gb, { format: v => v.toFixed(0) + ' GB' }),
-        detailRow('PCIe generation', d.hw_pcie),
-        detailRow('Network', d.hw_network),
-      ]),
-      detailSection('Software', [
-        detailRow('Framework', d.sw_framework
-          ? (d.sw_framework + (d.sw_framework_version ? ' ' + d.sw_framework_version : ''))
-          : null),
-        detailRow('PyTorch', d.sw_pytorch, { mono: true }),
-        detailRow('Driver version', d.sw_driver, { mono: true }),
-        detailRow('Runtime', d.sw_runtime, { mono: true }),
-        detailRow('OS', d.sw_os),
-        detailRow('Python', d.sw_python, { mono: true }),
-      ]),
-      detailSection('Model', [
-        detailRow('Model ID', d.model_id, { mono: true }),
-        detailRow('Revision', d.model_revision, { mono: true }),
-        row.detail.model_name
-            ? detailRow(
-                'Actual model',
-                row.detail.model_name
-                + ' <span style="color:#d29922;font-size:0.8em">(substituted variant)</span>',
-                { html: true }
-              )
-            : null,
-        row.detail.model_note
-            ? detailRow('Model note', row.detail.model_note)
-            : null,
-        detailRow('Architecture', d.model_arch),
-        detailRow('Parameters', d.model_params_b, { format: v => v + 'B' }),
-        detailRow('Precision', d.model_precision),
-        row.detail.model_effective_dtype
-            ? detailRow(
-                'Compute dtype',
-                row.detail.model_effective_dtype
-                + (row.precision_emulated
-                    ? ` <span style="color:#8b949e;font-size:0.8em">(${row.precision} weights, ${row.detail.model_effective_dtype} compute)</span>`
-                    : ''),
-                { html: true }
-              )
-            : null,
-        row.detail.model_quant_method
-            ? detailRow('Quantization', row.detail.model_quant_method)
-            : null,
-        detailRow('Format', d.model_format),
-        row.detail.model_source === 'local'
-            ? detailRow(
-                'Model source',
-                'local override'
-                + ' <span style="color:#8b949e;font-size:0.8em" title="Model loaded from local path in models_local.yaml, not directly from HuggingFace">ℹ</span>',
-                { html: true }
-              )
-            : null,
-      ]),
-      detailSection('Run settings', [
-        d.run_scenarios ? detailRow('Scenarios', d.run_scenarios.join(', ')) : null,
-        d.run_chip_counts ? detailRow('Chip counts tested', d.run_chip_counts.join(', ')) : null,
-        detailRow('Runs per config', d.run_num_runs),
-        d.run_tp != null ? detailRow('Tensor parallel size', d.run_tp) : null,
-        d.run_pp != null ? detailRow('Pipeline parallel size', d.run_pp) : null,
-        d.run_dp != null ? detailRow('Data parallel size', d.run_dp) : null,
-      ]),
-      detailSection('Accuracy', [
-        detailRow('Subset score', d.acc_score, {
-          format: v => v.toFixed(2),
-          cls: d.acc_valid ? 'good' : 'warn'
-        }),
-        detailRow('Baseline delta', d.acc_baseline_delta, { format: v => (v >= 0 ? '+' : '') + v.toFixed(3) }),
-        detailRow('Valid', d.acc_valid != null
-          ? (d.acc_valid ? '<span class="detail-value good">Yes</span>' : '<span class="detail-value warn">No</span>')
-          : null),
-        d.acc_notes ? detailRow('Notes', d.acc_notes) : null,
-      ]),
-      detailSection('Metadata', [
-        detailRow('Submitted by', d.meta_submitted_by),
-        detailRow('Submission type', d.meta_submission_type),
-        detailRow('Date', d.meta_date),
-        detailRow('Benchmark duration', d.meta_elapsed_min, { format: v => v.toFixed(1) + ' min' }),
-        detailRow('Model load time', d.meta_model_load_sec, { format: v => v.toFixed(1) + ' s' }),
-        d.meta_notes ? detailRow('Notes', d.meta_notes) : null,
-      ]),
-    ].join('');
-
-    document.getElementById('modal-backdrop').classList.add('open');
-    document.body.style.overflow = 'hidden';
-  }
-
-  function closeModal(e) {
-    if (e.target === document.getElementById('modal-backdrop')) closeModalDirect();
-  }
-
-  function closeModalDirect() {
-    document.getElementById('modal-backdrop').classList.remove('open');
-    document.body.style.overflow = '';
-  }
-
-  document.addEventListener('keydown', e => {
-    if (e.key === 'Escape') closeModalDirect();
-  });
-
-  // ── Tab switching ─────────────────────────────────────────
-  let _activeTab = 'details';
-  let _activeCharts = [];
-
-  function switchTab(tab) {
-    _activeTab = tab;
-    document.getElementById('modal-body').style.display  = tab === 'details' ? '' : 'none';
-    document.getElementById('modal-viz').style.display   = tab === 'viz'     ? '' : 'none';
-    document.getElementById('modal-impl').style.display  = tab === 'impl'    ? '' : 'none';
-    document.getElementById('tab-details').classList.toggle('active', tab === 'details');
-    document.getElementById('tab-viz').classList.toggle('active', tab === 'viz');
-    document.getElementById('tab-impl').classList.toggle('active', tab === 'impl');
-    if (tab === 'viz' && _pendingViz) {
-      renderViz(_pendingViz);
-      _pendingViz = null;
-    }
-  }
-
-  let _pendingViz = null;
-
-  // ── Destroy existing charts ───────────────────────────────
-  function destroyCharts() {
-    _activeCharts.forEach(c => { try { c.destroy(); } catch(e) {} });
-    _activeCharts = [];
-  }
-
-  // ── openModal: reset viz state, then populate details ────
-  function openModal(row) {
-    destroyCharts();
-    _activeTab = 'details';
-    document.getElementById('modal-body').style.display  = '';
-    document.getElementById('modal-viz').style.display   = 'none';
-    document.getElementById('modal-impl').style.display  = 'none';
-    document.getElementById('tab-details').classList.add('active');
-    document.getElementById('tab-viz').classList.remove('active');
-    document.getElementById('tab-impl').classList.remove('active');
-
-    // Apply suite accent color to modal
-    document.getElementById('modal').className = `modal ${row.suite || ''}`;
-
-    // Viz tab
-    const vizBtn = document.getElementById('tab-viz');
-    if (row.viz && row.viz.type !== 'none') {
-      vizBtn.style.display = '';
-    } else {
-      vizBtn.style.display = 'none';
-    }
-
-    // Implementation tab
-    const implBtn = document.getElementById('tab-impl');
-    if (row.impl) {
-      implBtn.style.display = '';
-      renderImpl(row.impl);
-    } else {
-      implBtn.style.display = 'none';
-    }
-
-    _pendingViz = row;
-    _fillModal(row);
-  }
-
-  // ── Chart helpers ─────────────────────────────────────────
-  const C = {
-    blue:   '#378ADD',
-    teal:   '#1D9E75',
-    amber:  '#EF9F27',
-    coral:  '#D85A30',
-    gray:   '#888780',
-    green:  '#56d364',
-    red:    '#f85149',
-    grid:   '#21262d',
-    text:   '#8b949e',
-    white:  '#e6edf3',
-  };
-
-  function baseOpts(yLabel, yFormat, xLabel) {
-    return {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: { legend: { display: false } },
-      scales: {
-        x: {
-          ticks: { color: C.text, font: { size: 11 } },
-          grid:  { color: C.grid },
-          title: { display: !!xLabel, text: xLabel || '', color: C.text, font: { size: 11 } },
-        },
-        y: {
-          ticks: { color: C.text, font: { size: 11 }, callback: yFormat || (v => v) },
-          grid:  { color: C.grid },
-          title: { display: !!yLabel, text: yLabel || '', color: C.text, font: { size: 11 } },
-        }
-      }
-    };
-  }
-
-  function mkCanvas(id, height) {
-    const wrap = document.createElement('div');
-    wrap.className = 'chart-wrap';
-    wrap.style.height = height + 'px';
-    const c = document.createElement('canvas');
-    c.id = id;
-    wrap.appendChild(c);
-    return { wrap, canvas: c };
-  }
-
-  function sectionTitle(text) {
-    const d = document.createElement('div');
-    d.className = 'chart-section-title';
-    d.textContent = text;
-    return d;
-  }
-
-  function statChips(items) {
-    const grid = document.createElement('div');
-    grid.className = 'stat-chips';
-    items.forEach(({ label, value, cls }) => {
-      grid.innerHTML += `<div class="stat-chip">
-        <p class="stat-chip-label">${label}</p>
-        <p class="stat-chip-value ${cls||''}">${value != null ? value : '—'}</p>
-      </div>`;
-    });
-    return grid;
-  }
-
-  // ── Viz renderers ─────────────────────────────────────────
-  function renderViz(row) {
-    const viz = row.viz || {};
-    const container = document.getElementById('modal-viz');
-    container.innerHTML = '';
-
-    if (!viz || viz.type === 'none') {
-      container.innerHTML = '<div style="padding:2rem;text-align:center;color:#8b949e">No visualization available for this suite.</div>';
-      return;
-    }
-
-    if (viz.type === 'suite_A') renderSuiteA(container, viz, row);
-    else if (viz.type === 'suite_B') renderSuiteB(container, viz, row);
-    else if (viz.type === 'suite_C') renderSuiteC(container, viz, row);
-    else if (viz.type === 'suite_D') renderSuiteD(container, viz, row);
-    else if (viz.type === 'suite_E') renderSuiteE(container, viz, row);
-    else if (viz.type === 'suite_F') renderSuiteF(container, viz, row);
-    else if (viz.type === 'suite_G') renderSuiteG(container, viz, row);
-    else if (viz.type === 'sustained') renderSustained(container, viz, row);
-    else container.innerHTML = '<div style="padding:2rem;text-align:center;color:#8b949e">Visualization coming soon.</div>';
-
-    // Also render sustained charts when a suite result includes a sustained run
-    if (viz.type !== 'sustained' && viz.sustained) {
-      renderSustained(container, viz.sustained, row);
-    }
-  }
-
-  // Suite A ─────────────────────────────────────────────────
-  function renderSuiteA(el, viz, row) {
-    // ── Offline throughput ──
-    if (viz.offline && viz.offline.labels.length) {
-      el.appendChild(sectionTitle('Offline — throughput by concurrency'));
-      el.appendChild(statChips([
-        { label: 'Peak throughput', value: row.offline_throughput ? row.offline_throughput.toLocaleString(undefined,{maximumFractionDigits:0}) + ' tok/s' : null, cls: 'blue' },
-        { label: 'Peak memory', value: row.peak_memory_gb ? row.peak_memory_gb.toFixed(1) + ' GB' : null },
-        { label: 'Memory util.', value: row.memory_utilization_pct ? row.memory_utilization_pct.toFixed(1) + '%' : null },
-      ]));
-      const { wrap, canvas } = mkCanvas('viz-offline', 180);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'bar',
-        data: {
-          labels: viz.offline.labels,
-          datasets: [{
-            label: 'Throughput (tok/s)',
-            data: viz.offline.throughput,
-            backgroundColor: C.blue + '99',
-            borderColor: C.blue,
-            borderWidth: 1,
-            borderRadius: 3,
-          }]
-        },
-        options: baseOpts('tokens / sec', v => v.toLocaleString(), 'concurrency')
-      }));
-    }
-
-    // ── Online latency ──
-    if (viz.online && viz.online.labels.length) {
-      el.appendChild(sectionTitle('Online — TTFT & TPOT by QPS'));
-
-      // SLA summary
-      const slaDiv = document.createElement('div');
-      slaDiv.style.cssText = 'margin-bottom:10px;font-size:12px;';
-      viz.online.labels.forEach((qps, i) => {
-        const pass = viz.online.sla_met[i];
-        slaDiv.innerHTML += `<span class="sla-row" style="display:inline-flex;margin-right:12px">
-          <span class="sla-dot ${pass ? 'pass' : 'fail'}"></span>
-          <span style="color:#8b949e">${qps} QPS</span>
-          <span style="color:${pass ? C.green : C.red}">${pass ? 'SLA met' : 'SLA fail'}</span>
-        </span>`;
-      });
-      el.appendChild(slaDiv);
-
-      const { wrap, canvas } = mkCanvas('viz-online', 200);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'line',
-        data: {
-          labels: viz.online.labels,
-          datasets: [
-            { label: 'TTFT p50', data: viz.online.ttft_p50, borderColor: C.blue, backgroundColor: C.blue+'33', tension: 0.3, pointRadius: 4, fill: false },
-            { label: 'TTFT p90', data: viz.online.ttft_p90, borderColor: C.coral, backgroundColor: C.coral+'33', tension: 0.3, pointRadius: 4, fill: false, borderDash: [4,3] },
-            { label: 'TPOT p50', data: viz.online.tpot_p50, borderColor: C.teal, backgroundColor: C.teal+'33', tension: 0.3, pointRadius: 4, fill: false },
-          ]
-        },
-        options: baseOpts('latency (ms)', v => v >= 1000 ? (v/1000).toFixed(1)+'s' : v+'ms', 'target QPS')
-      }));
-      // custom legend
-      const leg = document.createElement('div');
-      leg.style.cssText = 'display:flex;gap:16px;margin-top:6px;font-size:11px;color:#8b949e;';
-      leg.innerHTML = `
-        <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.blue};display:inline-block"></span>TTFT p50</span>
-        <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.coral};display:inline-block"></span>TTFT p90</span>
-        <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.teal};display:inline-block"></span>TPOT p50</span>`;
-      el.appendChild(leg);
-    }
-
-    // ── Interactive ──
-    if (viz.interactive && viz.interactive.ttft_p50 != null) {
-      el.appendChild(sectionTitle('Interactive — single request latency'));
-      el.appendChild(statChips([
-        { label: 'TTFT p50',  value: viz.interactive.ttft_p50  != null ? viz.interactive.ttft_p50.toFixed(1)  + ' ms' : null, cls: 'blue' },
-        { label: 'TTFT p90',  value: viz.interactive.ttft_p90  != null ? viz.interactive.ttft_p90.toFixed(1)  + ' ms' : null },
-        { label: 'TTFT p99',  value: viz.interactive.ttft_p99  != null ? viz.interactive.ttft_p99.toFixed(1)  + ' ms' : null },
-        { label: 'TPOT p50',  value: viz.interactive.tpot_p50  != null ? viz.interactive.tpot_p50.toFixed(1)  + ' ms' : null, cls: 'green' },
-        { label: 'TPOT p99',  value: viz.interactive.tpot_p99  != null ? viz.interactive.tpot_p99.toFixed(1)  + ' ms' : null },
-      ]));
-    }
-
-    // ── Speculative ──
-    if (viz.speculative && viz.speculative.offline_tok_per_sec != null) {
-      el.appendChild(sectionTitle('Speculative decoding'));
-      const accPct = viz.speculative.acceptance_rate != null
-        ? (viz.speculative.acceptance_rate * 100).toFixed(1) + '%' : null;
-      el.appendChild(statChips([
-        { label: 'Speculative tok/s', value: viz.speculative.offline_tok_per_sec
-            ? viz.speculative.offline_tok_per_sec.toLocaleString(undefined,{maximumFractionDigits:0}) + ' tok/s' : null, cls: 'amber' },
-        { label: 'Acceptance rate', value: accPct, cls: accPct ? 'green' : null },
-        { label: 'Mean accepted', value: viz.speculative.mean_accepted_tokens != null
-            ? viz.speculative.mean_accepted_tokens.toFixed(2) + ' tok' : null },
-      ]));
-    }
-
-    // ── Burst ──
-    if (viz.burst) {
-      el.appendChild(sectionTitle('Burst load'));
-      const degr = viz.burst.burst_degradation_ratio;
-      const degrCls = degr != null ? (degr < 2 ? 'green' : degr < 5 ? 'amber' : 'coral') : null;
-      el.appendChild(statChips([
-        { label: 'Degradation ratio', value: degr != null ? degr.toFixed(2) + '×' : null, cls: degrCls },
-        { label: 'Steady p99 TTFT', value: viz.burst.steady_ttft_p99_ms != null
-            ? viz.burst.steady_ttft_p99_ms.toFixed(0) + ' ms' : null },
-        { label: 'Burst p99 TTFT', value: viz.burst.burst_ttft_p99_ms != null
-            ? viz.burst.burst_ttft_p99_ms.toFixed(0) + ' ms' : null, cls: 'coral' },
-        { label: 'SLA met during burst', value: viz.burst.sla_met_during_burst != null
-            ? (viz.burst.sla_met_during_burst ? '✓' : '✗') : null,
-          cls: viz.burst.sla_met_during_burst ? 'green' : 'coral' },
-      ]));
-    }
-  }
-
-  // Suite B ─────────────────────────────────────────────────
-  function renderSuiteB(el, viz, row) {
-    // ── Offline: total + per-chip throughput grouped bars ──
-    if (viz.offline && viz.offline.labels.length) {
-      el.appendChild(sectionTitle('Offline — throughput by concurrency'));
-      el.appendChild(statChips([
-        { label: 'Peak total',   value: row.offline_throughput      ? row.offline_throughput.toLocaleString(undefined, {maximumFractionDigits: 0}) + ' tok/s' : null, cls: 'blue' },
-        { label: 'Per chip',     value: row.tokens_per_sec_per_chip ? row.tokens_per_sec_per_chip.toLocaleString(undefined, {maximumFractionDigits: 0}) + ' tok/s' : null, cls: 'teal' },
-        { label: 'Peak memory',  value: row.peak_memory_gb          ? row.peak_memory_gb.toFixed(1) + ' GB' : null },
-        { label: 'Memory util.', value: row.memory_utilization_pct  ? row.memory_utilization_pct.toFixed(1) + '%' : null },
-      ]));
-      const { wrap, canvas } = mkCanvas('viz-b-offline', 200);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'bar',
-        data: {
-          labels: viz.offline.labels,
-          datasets: [
-            {
-              label: 'Total (tok/s)',
-              data: viz.offline.throughput,
-              backgroundColor: C.blue + '99',
-              borderColor: C.blue,
-              borderWidth: 1,
-              borderRadius: 3,
-            },
-            {
-              label: 'Per chip (tok/s)',
-              data: viz.offline.throughput_per_chip,
-              backgroundColor: C.teal + '99',
-              borderColor: C.teal,
-              borderWidth: 1,
-              borderRadius: 3,
-            },
-          ]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: { legend: { display: true, labels: { color: C.text, font: { size: 11 } } } },
-          scales: {
-            x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid },
-                 title: { display: true, text: 'concurrency', color: C.text, font: { size: 11 } } },
-            y: { ticks: { color: C.text, font: { size: 11 }, callback: v => v.toLocaleString() }, grid: { color: C.grid },
-                 title: { display: true, text: 'tokens / sec', color: C.text, font: { size: 11 } } },
-          }
-        }
-      }));
-    }
-
-    // ── Online latency ──
-    if (viz.online && viz.online.labels.length) {
-      el.appendChild(sectionTitle('Online — TTFT & TPOT by QPS'));
-      const slaDiv = document.createElement('div');
-      slaDiv.style.cssText = 'margin-bottom:10px;font-size:12px;';
-      viz.online.labels.forEach((qps, i) => {
-        const pass = viz.online.sla_met[i];
-        slaDiv.innerHTML += `<span class="sla-row" style="display:inline-flex;margin-right:12px">
-          <span class="sla-dot ${pass ? 'pass' : 'fail'}"></span>
-          <span style="color:#8b949e">${qps} QPS</span>
-          <span style="color:${pass ? C.green : C.red}">${pass ? 'SLA met' : 'SLA fail'}</span>
-        </span>`;
-      });
-      el.appendChild(slaDiv);
-      const { wrap, canvas } = mkCanvas('viz-b-online', 200);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'line',
-        data: {
-          labels: viz.online.labels,
-          datasets: [
-            { label: 'TTFT p50', data: viz.online.ttft_p50, borderColor: C.blue,  backgroundColor: C.blue+'33',  tension: 0.3, pointRadius: 4, fill: false },
-            { label: 'TTFT p90', data: viz.online.ttft_p90, borderColor: C.coral, backgroundColor: C.coral+'33', tension: 0.3, pointRadius: 4, fill: false, borderDash: [4,3] },
-            { label: 'TPOT p50', data: viz.online.tpot_p50, borderColor: C.teal,  backgroundColor: C.teal+'33',  tension: 0.3, pointRadius: 4, fill: false },
-          ]
-        },
-        options: baseOpts('latency (ms)', v => v >= 1000 ? (v/1000).toFixed(1)+'s' : v+'ms', 'target QPS')
-      }));
-      const leg = document.createElement('div');
-      leg.style.cssText = 'display:flex;gap:16px;margin-top:6px;font-size:11px;color:#8b949e;';
-      leg.innerHTML = `
-        <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.blue};display:inline-block"></span>TTFT p50</span>
-        <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.coral};display:inline-block"></span>TTFT p90</span>
-        <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.teal};display:inline-block"></span>TPOT p50</span>`;
-      el.appendChild(leg);
-    }
-
-    // ── Burst ──
-    if (viz.burst) {
-      el.appendChild(sectionTitle('Burst load'));
-      const degr = viz.burst.burst_degradation_ratio;
-      const degrCls = degr != null ? (degr < 2 ? 'green' : degr < 5 ? 'amber' : 'coral') : null;
-      el.appendChild(statChips([
-        { label: 'Degradation ratio', value: degr != null ? degr.toFixed(2) + '×' : null, cls: degrCls },
-        { label: 'Steady p99 TTFT', value: viz.burst.steady_ttft_p99_ms != null
-            ? viz.burst.steady_ttft_p99_ms.toFixed(0) + ' ms' : null },
-        { label: 'Burst p99 TTFT', value: viz.burst.burst_ttft_p99_ms != null
-            ? viz.burst.burst_ttft_p99_ms.toFixed(0) + ' ms' : null, cls: 'coral' },
-        { label: 'SLA met during burst', value: viz.burst.sla_met_during_burst != null
-            ? (viz.burst.sla_met_during_burst ? '✓' : '✗') : null,
-          cls: viz.burst.sla_met_during_burst ? 'green' : 'coral' },
-      ]));
-    }
-  }
-
-  // Suite D ─────────────────────────────────────────────────
-  function renderSuiteD(el, viz, row) {
-    // ── Interactive latency — prominent (~28K prefill story) ──
-    if (viz.interactive && viz.interactive.ttft_p50 != null) {
-      el.appendChild(sectionTitle('Long-context latency (~28K input tokens)'));
-      el.appendChild(statChips([
-        { label: 'TTFT p50', value: viz.interactive.ttft_p50 != null ? viz.interactive.ttft_p50.toFixed(0) + ' ms' : null, cls: 'blue' },
-        { label: 'TTFT p90', value: viz.interactive.ttft_p90 != null ? viz.interactive.ttft_p90.toFixed(0) + ' ms' : null, cls: 'blue' },
-        { label: 'TTFT p99', value: viz.interactive.ttft_p99 != null ? viz.interactive.ttft_p99.toFixed(0) + ' ms' : null, cls: 'blue' },
-        { label: 'TPOT p50', value: viz.interactive.tpot_p50 != null ? viz.interactive.tpot_p50.toFixed(1) + ' ms' : null, cls: 'teal' },
-        { label: 'TPOT p90', value: viz.interactive.tpot_p90 != null ? viz.interactive.tpot_p90.toFixed(1) + ' ms' : null, cls: 'teal' },
-        { label: 'TPOT p99', value: viz.interactive.tpot_p99 != null ? viz.interactive.tpot_p99.toFixed(1) + ' ms' : null, cls: 'teal' },
-      ]));
-      // Horizontal bar: TTFT p50/p90/p99 (blue) · TPOT p50/p90/p99 (teal)
-      const iv = viz.interactive;
-      const { wrap, canvas } = mkCanvas('viz-d-latency', 240);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'bar',
-        data: {
-          labels: ['TTFT p50', 'TTFT p90', 'TTFT p99', 'TPOT p50', 'TPOT p90', 'TPOT p99'],
-          datasets: [
-            {
-              label: 'TTFT — prefill',
-              data: [iv.ttft_p50, iv.ttft_p90, iv.ttft_p99, null, null, null],
-              backgroundColor: C.blue + '99',
-              borderColor: C.blue,
-              borderWidth: 1,
-              borderRadius: 3,
-            },
-            {
-              label: 'TPOT — decode',
-              data: [null, null, null, iv.tpot_p50, iv.tpot_p90, iv.tpot_p99],
-              backgroundColor: C.teal + '99',
-              borderColor: C.teal,
-              borderWidth: 1,
-              borderRadius: 3,
-            },
-          ]
-        },
-        options: {
-          indexAxis: 'y',
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: { legend: { display: true, labels: { color: C.text, font: { size: 11 } } } },
-          scales: {
-            x: {
-              ticks: { color: C.text, font: { size: 11 }, callback: v => v >= 1000 ? (v/1000).toFixed(1)+'s' : v+'ms' },
-              grid: { color: C.grid },
-              title: { display: true, text: 'latency', color: C.text, font: { size: 11 } },
-            },
-            y: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
-          }
-        }
-      }));
-    }
-
-    // ── Offline throughput (secondary) ──
-    if (viz.offline && viz.offline.labels.length) {
-      el.appendChild(sectionTitle('Offline throughput (~28K context)'));
-      el.appendChild(statChips([
-        { label: 'Peak throughput', value: row.offline_throughput ? row.offline_throughput.toLocaleString(undefined, {maximumFractionDigits: 0}) + ' tok/s' : null, cls: 'blue' },
-        { label: 'Peak memory',     value: row.peak_memory_gb    ? row.peak_memory_gb.toFixed(1) + ' GB' : null },
-      ]));
-      const { wrap, canvas } = mkCanvas('viz-d-offline', 160);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'bar',
-        data: {
-          labels: viz.offline.labels,
-          datasets: [{
-            data: viz.offline.throughput,
-            backgroundColor: C.blue + '99',
-            borderColor: C.blue,
-            borderWidth: 1,
-            borderRadius: 3,
-          }]
-        },
-        options: baseOpts('tokens / sec', v => v.toLocaleString(), 'concurrency')
-      }));
-    }
-
-    // ── Speculative ──
-    if (viz.speculative && viz.speculative.offline_tok_per_sec != null) {
-      el.appendChild(sectionTitle('Speculative decoding'));
-      const accPct = viz.speculative.acceptance_rate != null
-        ? (viz.speculative.acceptance_rate * 100).toFixed(1) + '%' : null;
-      el.appendChild(statChips([
-        { label: 'Speculative tok/s', value: viz.speculative.offline_tok_per_sec
-            ? viz.speculative.offline_tok_per_sec.toLocaleString(undefined,{maximumFractionDigits:0}) + ' tok/s' : null, cls: 'amber' },
-        { label: 'Acceptance rate', value: accPct, cls: accPct ? 'green' : null },
-        { label: 'Mean accepted', value: viz.speculative.mean_accepted_tokens != null
-            ? viz.speculative.mean_accepted_tokens.toFixed(2) + ' tok' : null },
-      ]));
-    }
-  }
-
-  // Suite C ─────────────────────────────────────────────────
-  function renderSuiteC(el, viz, row) {
-    if (!viz || !viz.precisions || !viz.precisions.length) {
-        el.innerHTML = '<div style="padding:2rem;text-align:center;color:#8b949e">No quantization data available.</div>';
-        return;
-    }
-
-    const PREC_COLORS = { BF16: C.teal, FP8: C.blue, W8A8: C.amber, W8A16: C.coral, W4A16: C.green };
-    function precColor(p) { return PREC_COLORS[p] || C.gray; }
-
-    function _precToDtype(p) {
-        return {BF16:'bfloat16',FP16:'float16',FP8:'float8_e4m3fn',
-                W8A8:'int8',W8A16:'float16',W4A16:'float16'}[p] || '';
-    }
-
-    // ── Section 1: Offline — quantization efficiency table + chart ──────
-    el.appendChild(sectionTitle('Offline — quantization efficiency'));
-
-    const table = document.createElement('table');
-    table.style.cssText = 'width:100%;border-collapse:collapse;font-size:0.82rem;margin-bottom:1rem';
-    table.innerHTML = `
-        <thead>
-            <tr style="border-bottom:1px solid #21262d;color:#8b949e">
-                <th style="text-align:left;padding:0.4rem">Format</th>
-                <th style="text-align:right;padding:0.4rem">Throughput</th>
-                <th style="text-align:right;padding:0.4rem">Speedup</th>
-                <th style="text-align:right;padding:0.4rem">Accuracy</th>
-                <th style="text-align:right;padding:0.4rem">Quality eff.</th>
-            </tr>
-        </thead>
-        <tbody>
-            ${viz.precisions.map((prec, i) => {
-                const thr  = viz.throughput[i];
-                const spd  = viz.speedup[i];
-                const acc  = viz.accuracies[i];
-                const qe   = viz.quality_efficiency[i];
-                const valid = viz.acc_valid[i];
-                const accColor = valid === false ? '#f85149'
-                               : valid === true  ? '#56d364' : '#8b949e';
-                const edt = viz.effective_dtypes && viz.effective_dtypes[i];
-                const emulated = edt && edt !== _precToDtype(prec);
-                const precCell = emulated
-                    ? `${prec} <span style="color:#8b949e;font-size:0.8em" title="Computed as ${edt}">~${edt}</span>`
-                    : prec;
-                return `<tr style="border-bottom:1px solid #21262d21">
-                    <td style="padding:0.4rem;font-weight:500">${precCell}</td>
-                    <td style="text-align:right;padding:0.4rem">${
-                        thr ? thr.toLocaleString(undefined,{maximumFractionDigits:0})+' tok/s' : '—'
-                    }</td>
-                    <td style="text-align:right;padding:0.4rem">${
-                        spd ? spd.toFixed(2)+'×' : '—'
-                    }</td>
-                    <td style="text-align:right;padding:0.4rem;color:${accColor}">${
-                        acc != null ? acc.toFixed(4) : '—'
-                    }</td>
-                    <td style="text-align:right;padding:0.4rem">${
-                        qe ? qe.toLocaleString(undefined,{maximumFractionDigits:0}) : '—'
-                    }</td>
-                </tr>`;
-            }).join('')}
-        </tbody>
-    `;
-    el.appendChild(table);
-
-    // Throughput grouped bar: one bar per format, color-coded
-    const { wrap: w1, canvas: c1 } = mkCanvas('viz-suitec-thr', 200);
-    el.appendChild(w1);
-    _activeCharts.push(new Chart(c1, {
-        type: 'bar',
-        data: {
-            labels: viz.precisions,
-            datasets: [{
-                label: 'Throughput',
-                data: viz.throughput,
-                backgroundColor: viz.precisions.map(p => precColor(p) + '99'),
-                borderColor:     viz.precisions.map(p => precColor(p)),
-                borderWidth: 1, borderRadius: 3,
-            }],
-        },
-        options: baseOpts('tokens / sec', v => v.toLocaleString(undefined,{maximumFractionDigits:0}), 'precision'),
-    }));
-
-    // ── Section 2: Online — TTFT p99 by QPS, one line per format ─────────
-    if (viz.online_by_precision && viz.online_by_precision.length) {
-        el.appendChild(sectionTitle('Online — TTFT p99 by QPS across formats (extra scenario)'));
-
-        // Summary chips: max_valid_qps per format
-        el.appendChild(statChips(
-            viz.online_by_precision.map(fp => ({
-                label: fp.precision + ' max QPS',
-                value: fp.max_valid_qps != null ? fp.max_valid_qps + ' QPS' : '—',
-                cls:   fp.max_valid_qps ? 'blue' : null,
-            }))
-        ));
-
-        // Multi-line chart: x=QPS level, y=TTFT p99, one line per format
-        const qpsLabels = viz.online_by_precision[0].qps_labels;
-        const slaMs = row.detail && row.detail.run_scenarios ? null : null; // not easily available here
-        const { wrap: w2, canvas: c2 } = mkCanvas('viz-suitec-online', 240);
-        el.appendChild(w2);
-        _activeCharts.push(new Chart(c2, {
-            type: 'line',
-            data: {
-                labels: qpsLabels,
-                datasets: viz.online_by_precision.map(fp => ({
-                    label:           fp.precision,
-                    data:            fp.ttft_p99,
-                    borderColor:     precColor(fp.precision),
-                    backgroundColor: precColor(fp.precision) + '22',
-                    pointBackgroundColor: fp.sla_met.map((met, i) =>
-                        met === false ? '#f85149' : precColor(fp.precision)
-                    ),
-                    pointRadius: 5,
-                    tension: 0.2,
-                    fill: false,
-                })),
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    legend: { display: true, labels: { color: C.text, font: { size: 11 }, boxWidth: 12 } },
-                    tooltip: {
-                        callbacks: {
-                            label: ctx => {
-                                const fp = viz.online_by_precision[ctx.datasetIndex];
-                                const sla = fp.sla_met[ctx.dataIndex];
-                                const v = ctx.parsed.y;
-                                return fp.precision + ': ' + (v != null ? v.toFixed(0) + 'ms' : '—') +
-                                       (sla === false ? ' ✗ SLA' : sla === true ? ' ✓' : '');
-                            }
-                        }
-                    }
-                },
-                scales: {
-                    x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid },
-                         title: { display: true, text: 'target QPS', color: C.text, font: { size: 11 } } },
-                    y: { ticks: { color: C.text, font: { size: 11 }, callback: v => v + 'ms' },
-                         grid: { color: C.grid },
-                         title: { display: true, text: 'TTFT p99 (ms)', color: C.text, font: { size: 11 } } },
-                }
-            }
-        }));
-        const onlineLeg = document.createElement('div');
-        onlineLeg.style.cssText = 'font-size:11px;color:#8b949e;margin-top:4px';
-        onlineLeg.textContent = 'Red dots = SLA missed. Lines show TTFT p99 vs QPS load per quantization format.';
-        el.appendChild(onlineLeg);
-    }
-
-    // ── Section 3: Sustained — throughput over time per format ───────────
-    if (viz.sustained_by_precision && viz.sustained_by_precision.length) {
-        el.appendChild(sectionTitle('Sustained — throughput stability across formats (extra scenario)'));
-
-        // Summary: sustained throughput + throttle ratio per format
-        el.appendChild(statChips(
-            viz.sustained_by_precision.map(fp => ({
-                label: fp.precision + ' throttle',
-                value: fp.throttle_ratio != null ? fp.throttle_ratio.toFixed(3) : '—',
-                cls:   fp.throttle_ratio >= 0.9 ? 'green' : fp.throttle_ratio >= 0.8 ? 'amber' : 'coral',
-            }))
-        ));
-        el.appendChild(statChips(
-            viz.sustained_by_precision.map(fp => ({
-                label: fp.precision + ' sustained',
-                value: fp.sustained_throughput_tokens_per_sec != null
-                    ? fp.sustained_throughput_tokens_per_sec.toLocaleString(undefined,{maximumFractionDigits:0}) + ' tok/s'
-                    : '—',
-            }))
-        ));
-
-        // Multi-line chart: x=minute, y=throughput, one line per format
-        // Use post-warmup samples only for the chart (is_warmup=false)
-        const minuteLabels = viz.sustained_by_precision[0].minutes
-            .filter((_, i) => !viz.sustained_by_precision[0].is_warmup[i]);
-        const { wrap: w3, canvas: c3 } = mkCanvas('viz-suitec-sus', 220);
-        el.appendChild(w3);
-        _activeCharts.push(new Chart(c3, {
-            type: 'line',
-            data: {
-                labels: minuteLabels,
-                datasets: viz.sustained_by_precision.map(fp => {
-                    const postWarmup = fp.throughput.filter((_, i) => !fp.is_warmup[i]);
-                    return {
-                        label:           fp.precision,
-                        data:            postWarmup,
-                        borderColor:     precColor(fp.precision),
-                        backgroundColor: precColor(fp.precision) + '11',
-                        pointRadius: 2,
-                        tension: 0.2,
-                        fill: false,
-                    };
-                }),
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    legend: { display: true, labels: { color: C.text, font: { size: 11 }, boxWidth: 12 } },
-                },
-                scales: {
-                    x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid },
-                         title: { display: true, text: 'minute', color: C.text, font: { size: 11 } } },
-                    y: { ticks: { color: C.text, font: { size: 11 },
-                                  callback: v => v.toLocaleString(undefined,{maximumFractionDigits:0}) },
-                         grid: { color: C.grid },
-                         title: { display: true, text: 'tok/s', color: C.text, font: { size: 11 } } },
-                }
-            }
-        }));
-
-        // Throttle ratio comparison bar
-        el.appendChild(sectionTitle('Throttle ratio by format (1.0 = no degradation)'));
-        const { wrap: w4, canvas: c4 } = mkCanvas('viz-suitec-throttle', 140);
-        el.appendChild(w4);
-        _activeCharts.push(new Chart(c4, {
-            type: 'bar',
-            data: {
-                labels: viz.sustained_by_precision.map(fp => fp.precision),
-                datasets: [{
-                    label: 'Throttle ratio',
-                    data: viz.sustained_by_precision.map(fp => fp.throttle_ratio),
-                    backgroundColor: viz.sustained_by_precision.map(fp =>
-                        fp.throttle_ratio >= 0.9 ? C.teal + '99'
-                        : fp.throttle_ratio >= 0.8 ? C.amber + '99'
-                        : C.coral + '99'
-                    ),
-                    borderColor: viz.sustained_by_precision.map(fp =>
-                        fp.throttle_ratio >= 0.9 ? C.teal
-                        : fp.throttle_ratio >= 0.8 ? C.amber : C.coral
-                    ),
-                    borderWidth: 1, borderRadius: 3,
-                }],
-            },
-            options: {
-                responsive: true, maintainAspectRatio: false,
-                plugins: { legend: { display: false } },
-                scales: {
-                    x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
-                    y: { min: 0, max: 1.05,
-                         ticks: { color: C.text, font: { size: 11 }, callback: v => v.toFixed(2) },
-                         grid: { color: C.grid } },
-                }
-            }
-        }));
-    }
-  }
-
-  // Suite E ─────────────────────────────────────────────────
-  function renderSuiteE(el, viz, row) {
-    el.appendChild(sectionTitle('Multi-chip scaling'));
-    el.appendChild(statChips([
-      { label: '1× baseline',      value: viz.throughput[0] ? viz.throughput[0].toLocaleString(undefined,{maximumFractionDigits:0}) + ' tok/s' : null, cls: 'blue' },
-      { label: '2× throughput',    value: viz.throughput[1] ? viz.throughput[1].toLocaleString(undefined,{maximumFractionDigits:0}) + ' tok/s' : null },
-      { label: '4× throughput',    value: viz.throughput[2] ? viz.throughput[2].toLocaleString(undefined,{maximumFractionDigits:0}) + ' tok/s' : null },
-      { label: '2× efficiency',    value: row.scaling_efficiency_2x != null ? (row.scaling_efficiency_2x*100).toFixed(1) + '%' : null, cls: row.scaling_efficiency_2x >= 0.8 ? 'green' : 'amber' },
-      { label: '4× efficiency',    value: row.scaling_efficiency_4x != null ? (row.scaling_efficiency_4x*100).toFixed(1) + '%' : null, cls: row.scaling_efficiency_4x >= 0.8 ? 'green' : row.scaling_efficiency_4x >= 0.5 ? 'amber' : 'coral' },
-    ]));
-
-    // Throughput chart
-    const labels = (viz.chip_counts || []).map(c => c + '× GPU');
-    const { wrap, canvas } = mkCanvas('viz-scale-thr', 180);
-    el.appendChild(wrap);
-    _activeCharts.push(new Chart(canvas, {
-      type: 'bar',
-      data: {
-        labels,
-        datasets: [{
-          label: 'Throughput',
-          data: viz.throughput,
-          backgroundColor: C.blue + '99',
-          borderColor: C.blue,
-          borderWidth: 1,
-          borderRadius: 3,
-        }]
-      },
-      options: baseOpts('tokens / sec', v => v ? v.toLocaleString(undefined,{maximumFractionDigits:0}) : '')
-    }));
-
-    // Efficiency line chart vs ideal
-    el.appendChild(sectionTitle('Scaling efficiency vs ideal'));
-    const maxCount = Math.max(...(viz.chip_counts || [1]));
-    const idealLine = (viz.chip_counts || []).map(() => 100);
-    const targetLine = (viz.chip_counts || []).map(() => 80);
-
-    const { wrap: w2, canvas: c2 } = mkCanvas('viz-scale-eff', 200);
-    el.appendChild(w2);
-    _activeCharts.push(new Chart(c2, {
-      type: 'line',
-      data: {
-        labels,
-        datasets: [
-          { label: 'Actual', data: viz.efficiency_pct, borderColor: C.blue, backgroundColor: C.blue+'33', tension: 0.3, pointRadius: 5, pointBackgroundColor: C.blue, fill: true },
-          { label: 'Linear ideal', data: idealLine, borderColor: C.gray, borderDash: [6,4], tension: 0, pointRadius: 0, fill: false },
-          { label: 'Good target (80%)', data: targetLine, borderColor: C.teal, borderDash: [3,3], tension: 0, pointRadius: 0, fill: false },
-        ]
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: { legend: { display: false } },
-        scales: {
-          x: { ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid } },
-          y: { min: 0, max: 110, ticks: { color: C.text, font: { size: 11 }, callback: v => v + '%' }, grid: { color: C.grid }, title: { display: true, text: 'efficiency %', color: C.text, font: { size: 11 } } },
-        }
-      }
-    }));
-
-    const leg = document.createElement('div');
-    leg.style.cssText = 'display:flex;gap:16px;margin-top:6px;font-size:11px;color:#8b949e;';
-    leg.innerHTML = `
-      <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.blue};display:inline-block"></span>Actual</span>
-      <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.gray};display:inline-block"></span>Linear ideal</span>
-      <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.teal};display:inline-block"></span>Good target (80%)</span>`;
-    el.appendChild(leg);
-
-    // Per-chip throughput
-    if (viz.throughput_per_chip && viz.throughput_per_chip.some(v => v != null)) {
-      el.appendChild(sectionTitle('Throughput per chip'));
-      const { wrap: w3, canvas: c3 } = mkCanvas('viz-scale-perchip', 150);
-      el.appendChild(w3);
-      _activeCharts.push(new Chart(c3, {
-        type: 'bar',
-        data: {
-          labels,
-          datasets: [{
-            data: viz.throughput_per_chip,
-            backgroundColor: C.teal + '99',
-            borderColor: C.teal,
-            borderWidth: 1,
-            borderRadius: 3,
-          }]
-        },
-        options: baseOpts('tok/s per chip', v => v ? v.toLocaleString(undefined,{maximumFractionDigits:0}) : '')
-      }));
-    }
-  }
-
-  // Suite F ─────────────────────────────────────────────────
-  function renderSuiteF(el, viz, row) {
-    // ── Offline throughput ──
-    if (viz.offline && viz.offline.labels.length) {
-      el.appendChild(sectionTitle('Offline — throughput by concurrency'));
-      el.appendChild(statChips([
-        { label: 'Peak throughput', value: row.offline_throughput ? row.offline_throughput.toLocaleString(undefined,{maximumFractionDigits:0}) + ' tok/s' : null, cls: 'purple' },
-        { label: 'Peak memory', value: row.peak_memory_gb ? row.peak_memory_gb.toFixed(1) + ' GB' : null },
-        { label: 'Memory util.', value: row.memory_utilization_pct ? row.memory_utilization_pct.toFixed(1) + '%' : null },
-      ]));
-      const { wrap, canvas } = mkCanvas('viz-offline', 180);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'bar',
-        data: {
-          labels: viz.offline.labels,
-          datasets: [{
-            label: 'Throughput (tok/s)',
-            data: viz.offline.throughput,
-            backgroundColor: '#c084fc99',
-            borderColor: '#c084fc',
-            borderWidth: 1,
-            borderRadius: 3,
-          }]
-        },
-        options: baseOpts('tokens / sec', v => v.toLocaleString(), 'concurrency')
-      }));
-    }
-
-    // ── Online latency ──
-    if (viz.online && viz.online.labels.length) {
-      el.appendChild(sectionTitle('Online — TTFT & TPOT by QPS'));
-      const slaDiv = document.createElement('div');
-      slaDiv.style.cssText = 'margin-bottom:10px;font-size:12px;';
-      viz.online.labels.forEach((qps, i) => {
-        const pass = viz.online.sla_met[i];
-        slaDiv.innerHTML += `<span class="sla-row" style="display:inline-flex;margin-right:12px">
-          <span class="sla-dot ${pass ? 'pass' : 'fail'}"></span>
-          <span style="color:#8b949e">${qps} QPS</span>
-          <span style="color:${pass ? C.green : C.red}">${pass ? 'SLA met' : 'SLA fail'}</span>
-        </span>`;
-      });
-      el.appendChild(slaDiv);
-
-      const { wrap, canvas } = mkCanvas('viz-online', 200);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'line',
-        data: {
-          labels: viz.online.labels,
-          datasets: [
-            { label: 'TTFT p50', data: viz.online.ttft_p50, borderColor: '#c084fc', backgroundColor: '#c084fc33', tension: 0.3, pointRadius: 4, fill: false },
-            { label: 'TTFT p90', data: viz.online.ttft_p90, borderColor: C.coral, backgroundColor: C.coral+'33', tension: 0.3, pointRadius: 4, fill: false, borderDash: [4,3] },
-            { label: 'TPOT p50', data: viz.online.tpot_p50, borderColor: C.teal, backgroundColor: C.teal+'33', tension: 0.3, pointRadius: 4, fill: false },
-          ]
-        },
-        options: baseOpts('latency (ms)', v => v >= 1000 ? (v/1000).toFixed(1)+'s' : v+'ms', 'target QPS')
-      }));
-      const leg = document.createElement('div');
-      leg.style.cssText = 'display:flex;gap:16px;margin-top:6px;font-size:11px;color:#8b949e;';
-      leg.innerHTML = `
-        <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:#c084fc;display:inline-block"></span>TTFT p50</span>
-        <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.coral};display:inline-block"></span>TTFT p90</span>
-        <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:2px;background:${C.teal};display:inline-block"></span>TPOT p50</span>`;
-      el.appendChild(leg);
-    }
-
-    // ── Interactive ──
-    if (viz.interactive && viz.interactive.ttft_p50 != null) {
-      el.appendChild(sectionTitle('Interactive — single request latency'));
-      el.appendChild(statChips([
-        { label: 'TTFT p50', value: viz.interactive.ttft_p50 != null ? viz.interactive.ttft_p50.toFixed(1) + ' ms' : null, cls: 'purple' },
-        { label: 'TTFT p90', value: viz.interactive.ttft_p90 != null ? viz.interactive.ttft_p90.toFixed(1) + ' ms' : null },
-        { label: 'TTFT p99', value: viz.interactive.ttft_p99 != null ? viz.interactive.ttft_p99.toFixed(1) + ' ms' : null },
-        { label: 'TPOT p50', value: viz.interactive.tpot_p50 != null ? viz.interactive.tpot_p50.toFixed(1) + ' ms' : null, cls: 'green' },
-        { label: 'TPOT p99', value: viz.interactive.tpot_p99 != null ? viz.interactive.tpot_p99.toFixed(1) + ' ms' : null },
-      ]));
-    }
-  }
-
-  // Suite G (MoE) ──────────────────────────────────────────────
-  function renderSuiteG(el, viz, row) {
-    // ── Offline throughput ──
-    if (viz.offline && viz.offline.labels.length) {
-      el.appendChild(sectionTitle('Offline — throughput by concurrency'));
-      el.appendChild(statChips([
-        { label: 'Peak throughput', value: row.offline_throughput ? row.offline_throughput.toLocaleString(undefined,{maximumFractionDigits:0}) + ' tok/s' : null, cls: 'teal' },
-        { label: 'Peak memory', value: row.peak_memory_gb ? row.peak_memory_gb.toFixed(1) + ' GB' : null },
-      ]));
-      const { wrap, canvas } = mkCanvas('viz-g-offline', 180);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'bar',
-        data: {
-          labels: viz.offline.labels,
-          datasets: [{
-            label: 'Throughput (tok/s)',
-            data: viz.offline.throughput,
-            backgroundColor: '#2dd4bf99',
-            borderColor: '#2dd4bf',
-            borderWidth: 1,
-            borderRadius: 3,
-          }]
-        },
-        options: baseOpts('tokens / sec', v => v.toLocaleString(), 'concurrency')
-      }));
-    }
-
-    // ── Online latency ──
-    if (viz.online && viz.online.labels.length) {
-      el.appendChild(sectionTitle('Online — TTFT & TPOT by QPS'));
-      const slaDiv = document.createElement('div');
-      slaDiv.style.cssText = 'margin-bottom:10px;font-size:12px;';
-      viz.online.labels.forEach((qps, i) => {
-        const pass = viz.online.sla_met[i];
-        slaDiv.innerHTML += `<span class="sla-row" style="display:inline-flex;margin-right:12px">
-          <span class="sla-dot ${pass ? 'pass' : 'fail'}"></span>
-          <span style="color:#8b949e">${qps} QPS</span>
-          <span style="color:${pass ? C.green : C.red}">${pass ? 'SLA met' : 'SLA fail'}</span>
-        </span>`;
-      });
-      el.appendChild(slaDiv);
-      const { wrap, canvas } = mkCanvas('viz-g-online', 200);
-      el.appendChild(wrap);
-      _activeCharts.push(new Chart(canvas, {
-        type: 'line',
-        data: {
-          labels: viz.online.labels,
-          datasets: [
-            { label: 'TTFT p50', data: viz.online.ttft_p50, borderColor: '#2dd4bf', backgroundColor: '#2dd4bf33', tension: 0.3, pointRadius: 4, fill: false },
-            { label: 'TTFT p90', data: viz.online.ttft_p90, borderColor: C.coral, backgroundColor: C.coral+'33', tension: 0.3, pointRadius: 4, fill: false, borderDash: [4,3] },
-            { label: 'TPOT p50', data: viz.online.tpot_p50, borderColor: C.teal, backgroundColor: C.teal+'33', tension: 0.3, pointRadius: 4, fill: false },
-          ]
-        },
-        options: baseOpts('latency (ms)', v => v >= 1000 ? (v/1000).toFixed(1)+'s' : v+'ms', 'target QPS')
-      }));
-    }
-
-    // ── Interactive ──
-    if (viz.interactive && viz.interactive.ttft_p50 != null) {
-      el.appendChild(sectionTitle('Interactive — single request latency'));
-      el.appendChild(statChips([
-        { label: 'TTFT p50',  value: viz.interactive.ttft_p50  != null ? viz.interactive.ttft_p50.toFixed(1)  + ' ms' : null, cls: 'teal' },
-        { label: 'TTFT p90',  value: viz.interactive.ttft_p90  != null ? viz.interactive.ttft_p90.toFixed(1)  + ' ms' : null },
-        { label: 'TTFT p99',  value: viz.interactive.ttft_p99  != null ? viz.interactive.ttft_p99.toFixed(1)  + ' ms' : null },
-        { label: 'TPOT p50',  value: viz.interactive.tpot_p50  != null ? viz.interactive.tpot_p50.toFixed(1)  + ' ms' : null, cls: 'green' },
-        { label: 'TPOT p99',  value: viz.interactive.tpot_p99  != null ? viz.interactive.tpot_p99.toFixed(1)  + ' ms' : null },
-      ]));
-    }
-
-    // ── Runtime metrics (expert stats, if available) ──
-    if (viz.runtime_metrics) {
-      const rm = viz.runtime_metrics;
-      const items = [];
-      if (rm.expert_load_balance != null) items.push({ label: 'Expert load balance (std)', value: rm.expert_load_balance.toFixed(3) });
-      if (rm.mean_experts_per_token != null) items.push({ label: 'Mean experts/token', value: rm.mean_experts_per_token.toFixed(1) });
-      if (items.length) {
-        el.appendChild(sectionTitle('MoE runtime metrics'));
-        el.appendChild(statChips(items));
-      }
-    }
-  }
-
-  // Suite Stress / Sustained ─────────────────────────────────
-  function renderSustained(el, viz, row) {
-    const dur   = viz.duration_minutes     ?? '?';
-    const conc  = viz.sustained_concurrency ?? '?';
-    const mean  = viz.sustained_throughput;
-    const thr   = viz.throttle_ratio;
-    const onset = viz.throttle_onset_minute;
-    const drift = viz.ttft_p99_drift_ms;
-
-    el.appendChild(sectionTitle(`Sustained load — ${dur} min @ concurrency ${conc}`));
-
-    // Stat chips
-    el.appendChild(statChips([
-      {
-        label: 'Sustained throughput',
-        value: mean != null
-          ? mean.toLocaleString(undefined, {maximumFractionDigits: 0}) + ' tok/s'
-          : null,
-        cls: 'blue'
-      },
-      {
-        label: 'Concurrency',
-        value: viz.sustained_concurrency != null
-          ? viz.sustained_concurrency + ' in-flight'
-          : null,
-      },
-      {
-        label: 'Throttle ratio',
-        value: thr != null
-          ? (thr * 100).toFixed(1) + '%'
-          : null,
-        cls: thr >= 0.95 ? 'green'
-           : thr >= 0.85 ? 'amber' : 'coral'
-      },
-      {
-        label: 'Throttle onset',
-        value: onset != null
-          ? 'min ' + onset.toFixed(1)
-          : 'No throttling detected',
-        cls: onset == null ? 'green' : 'amber'
-      },
-    ]));
-
-    // Throughput over time
-    const samples = viz.samples;
-    if (!samples || !samples.length) return;
-
-    const minutes = samples.map(s => s.minute);
-    const tputs   = samples.map(s => s.throughput_tokens_per_sec ?? null);
-
-    el.appendChild(sectionTitle('Throughput over time'));
-    const { wrap: w1, canvas: c1 } = mkCanvas('viz-sustained-tput', 180);
-    el.appendChild(w1);
-
-    const warmupSamples = samples.filter(s => s.is_warmup).length;
-    const pointColors = minutes.map((_, i) => i < warmupSamples ? C.gray : C.blue);
-    const pointRadii  = minutes.map((_, i) => i < warmupSamples ? 2 : 3);
-
-    const datasets = [{
-      label: 'Throughput',
-      data: tputs,
-      borderColor: C.blue,
-      backgroundColor: C.blue + '22',
-      fill: true,
-      tension: 0.3,
-      pointBackgroundColor: pointColors,
-      pointRadius: pointRadii,
-    }];
-
-    if (mean != null) {
-      datasets.push({
-        label: 'Sustained mean',
-        data: new Array(tputs.length).fill(mean),
-        borderColor: C.teal,
-        borderDash: [6, 3],
-        borderWidth: 1.5,
-        pointRadius: 0,
-      });
-    }
-
-    _activeCharts.push(new Chart(c1, {
-      type: 'line',
-      data: { labels: minutes.map(m => m + ' min'), datasets },
-      options: {
-        ...baseOpts('tok/s', v => v != null ? v.toFixed(0) : ''),
-        plugins: {
-          ...baseOpts('tok/s').plugins,
-          legend: { display: true, labels: { color: '#8b949e', font: { size: 11 } } },
-        },
-      },
-    }));
-
-    if (warmupSamples > 0) {
-      const note = document.createElement('div');
-      note.style.cssText = 'font-size:11px;color:#8b949e;margin-top:4px';
-      note.textContent = `First ${warmupSamples} sample(s) are warmup (shown in gray) and excluded from scalar metrics.`;
-      el.appendChild(note);
-    }
-
-    // TTFT p99 over time (optional)
-    const ttfts = samples.map(s => s.ttft_ms_p99 ?? null);
-    if (ttfts.some(v => v != null)) {
-      el.appendChild(sectionTitle('TTFT p99 over time'));
-      const { wrap: w2, canvas: c2 } = mkCanvas('viz-sustained-ttft', 150);
-      el.appendChild(w2);
-      _activeCharts.push(new Chart(c2, {
-        type: 'line',
-        data: {
-          labels: minutes.map(m => m + ' min'),
-          datasets: [{
-            label: 'TTFT p99',
-            data: ttfts,
-            borderColor: C.yellow,
-            backgroundColor: C.yellow + '22',
-            fill: true,
-            tension: 0.3,
-            pointRadius: 2,
-          }],
-        },
-        options: {
-          ...baseOpts('ms', v => v != null ? v.toFixed(0) : ''),
-          plugins: {
-            ...baseOpts('ms').plugins,
-            legend: { display: false },
-          },
-        },
-      }));
-    }
-  }
-
-  // ── Implementation tab ────────────────────────────────────
-  function renderImpl(impl) {
-    const el = document.getElementById('modal-impl');
-    const isDeprecated = !!impl.deprecated_by;
-
-    el.innerHTML = [
-      // Deprecation warning banner
-      isDeprecated ? `
-        <div style="background:#2d1f00;border:1px solid #d29922;border-radius:6px;padding:0.65rem 1rem;margin-bottom:1rem;font-size:0.82rem;color:#d29922">
-          ⚠ This runner has been superseded by
-          <span style="font-family:monospace;font-weight:500">${impl.deprecated_by}</span>.
-          Results using this runner remain valid — the code is unchanged.
-        </div>` : '',
-
-      detailSection('Runner', [
-        detailRow('ID',           impl.id,           { mono: true }),
-        detailRow('Platform',     impl.platform),
-        detailRow('Framework',    impl.framework),
-        detailRow('Name',         impl.name),
-        detailRow('Submitted by', impl.submitted_by),
-        detailRow('Created',      impl.created),
-        impl.supersedes_chain ? detailRow('Replaces', impl.supersedes_chain[0], { mono: true }) : null,
-        impl.deprecated_by ? detailRow('Deprecated by', impl.deprecated_by, { mono: true }) : null,
-      ]),
-
-      detailSection('Description', [
-        impl.description ? `<div class="detail-row" style="border:none;display:block;padding:0.4rem 0">
-          <span class="detail-value" style="white-space:pre-wrap;line-height:1.6">${impl.description}</span>
-        </div>` : null,
-        impl.notes ? `<div class="detail-row" style="border-bottom:none">
-          <span class="detail-label">Notes</span>
-          <span class="detail-value" style="white-space:pre-wrap">${impl.notes}</span>
-        </div>` : null,
-      ]),
-
-      detailSection('Source', [
-        `<div class="detail-row">
-          <span class="detail-label">Runner folder</span>
-          <a href="${impl.github_url}" target="_blank"
-             style="color:#58a6ff;font-size:0.8rem;font-family:monospace;text-decoration:none">
-            runners/${impl.id} ↗
-          </a>
-        </div>`,
-        `<div class="detail-row" style="border-bottom:none">
-          <span class="detail-label">runner.py</span>
-          <a href="${impl.runner_url}" target="_blank"
-             style="color:#58a6ff;font-size:0.8rem;text-decoration:none">
-            View source ↗
-          </a>
-        </div>`,
-      ]),
-    ].join('');
-  }
-</script>
+  </nav>
+
+  <main id="view" aria-live="polite">
+    <div class="state">Loading leaderboard…</div>
+  </main>
+
+  <footer>
+    <p>
+      AccelMark · Open, reproducible benchmark for AI accelerators.<br>
+      <a href="https://github.com/JuhaoLiang1997/AccelMark">Source code</a> ·
+      <a href="https://github.com/JuhaoLiang1997/AccelMark/blob/main/CONTRIBUTING.md">Contribute results</a> ·
+      <a href="https://github.com/JuhaoLiang1997/AccelMark/discussions">Discussions</a>
+    </p>
+  </footer>
+
+  <!-- Generated by leaderboard/generate.py.  Sets window.LEADERBOARD_DATA. -->
+  <script src="leaderboard.js"></script>
+
+  <!-- Chart.js, used by the run-detail modal's Visualize tab.  Loaded
+       synchronously (no defer) so window.Chart is ready by the time
+       the user opens a modal. -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js"></script>
+
+  <script type="module" src="assets/js/main.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/leaderboard/site/style.css b/leaderboard/site/style.css
deleted file mode 100644
index bad295be..00000000
--- a/leaderboard/site/style.css
+++ /dev/null
@@ -1,92 +0,0 @@
-*, *::before, *::after { box-sizing: border-box; }
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  margin: 0;
-  background: #f8f9fa;
-  color: #212529;
-}
-
-header {
-  background: #1a1a2e;
-  color: #fff;
-  padding: 2rem;
-  text-align: center;
-}
-
-header h1 { margin: 0 0 0.5rem; font-size: 2rem; }
-header p  { margin: 0 0 1rem; opacity: 0.8; }
-
-.btn {
-  display: inline-block;
-  margin: 0 0.4rem;
-  padding: 0.5rem 1.2rem;
-  background: #e94560;
-  color: #fff;
-  border-radius: 4px;
-  text-decoration: none;
-  font-size: 0.9rem;
-}
-.btn:hover { background: #c73652; }
-
-main { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
-
-#filters {
-  display: flex;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-  margin-bottom: 1rem;
-  background: #fff;
-  padding: 1rem 1.5rem;
-  border-radius: 6px;
-  box-shadow: 0 1px 3px rgba(0,0,0,.1);
-}
-
-#filters label { font-size: 0.9rem; }
-#filters select {
-  margin-left: 0.4rem;
-  padding: 0.3rem 0.5rem;
-  border: 1px solid #ced4da;
-  border-radius: 4px;
-}
-
-.table-wrap { overflow-x: auto; }
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  background: #fff;
-  border-radius: 6px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0,0,0,.1);
-  font-size: 0.88rem;
-}
-
-th {
-  background: #1a1a2e;
-  color: #fff;
-  padding: 0.7rem 0.8rem;
-  text-align: left;
-  white-space: nowrap;
-}
-
-td {
-  padding: 0.6rem 0.8rem;
-  border-bottom: 1px solid #e9ecef;
-}
-
-tr:last-child td { border-bottom: none; }
-tr:hover td { background: #f1f3f5; }
-
-.tier-verified  { color: #2f9e44; font-weight: 600; }
-.tier-community { color: #1971c2; }
-
-.acc-valid   { color: #2f9e44; }
-.acc-invalid { color: #e03131; }
-
-footer {
-  text-align: center;
-  padding: 2rem;
-  color: #6c757d;
-  font-size: 0.85rem;
-}
diff --git a/leaderboard/site/test/chip_count_scaling.test.mjs b/leaderboard/site/test/chip_count_scaling.test.mjs
new file mode 100644
index 00000000..24413ffa
--- /dev/null
+++ b/leaderboard/site/test/chip_count_scaling.test.mjs
@@ -0,0 +1,98 @@
+// chip_count_scaling.test.mjs — guard the chip-detail scaling chart.
+//
+// chipCountScaling(slug) feeds the grouped bar chart on the chip-detail
+// 03 · Scaling section.  Two regressions to lock down:
+//
+//   1. Single-fan-out chips return an empty `suites` list — the
+//      section depends on `data.suites.length` to decide whether to
+//      render at all, and rendering an empty bar chart for, say, an
+//      Apple M2 (always ×1) would look like a layout bug.
+//   2. Per-suite normalization is intra-cluster only.  Each chip-count
+//      cell on a suite is normalised to that suite's max value across
+//      the chip's own variants — NOT to a global max.  A regression
+//      that conflates them would make every bar read 100% on bandwidth
+//      suites and ~0% on multi-chip suites.
+
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { installDom } from "./dom_stub.mjs";
+
+installDom();
+
+// Two synthetic chips:
+//   ChipScale: ×1, ×4, ×8 on suite_A; only ×1 on suite_B (so ×4/×8
+//             cells should be zero-filled, not absent).
+//   ChipSolo: only ×1 on suite_A — drives the "empty suites list"
+//             branch via chipCounts < 2.
+globalThis.window.LEADERBOARD_DATA = [
+  // ChipScale on suite_A
+  { run_id: "scale-a-1",  date: "2026-04-01", suite: "suite_A", chip: "ChipScale", chip_count: 1, vendor: "V",
+    offline_throughput: 100, primary_metric: 100 },
+  { run_id: "scale-a-4",  date: "2026-04-02", suite: "suite_A", chip: "ChipScale", chip_count: 4, vendor: "V",
+    offline_throughput: 380, primary_metric: 380 },
+  { run_id: "scale-a-8",  date: "2026-04-03", suite: "suite_A", chip: "ChipScale", chip_count: 8, vendor: "V",
+    offline_throughput: 700, primary_metric: 700 },
+  // ChipScale on suite_B (only ×1 — should still render a row with ×4/×8 cells nullified)
+  { run_id: "scale-b-1",  date: "2026-04-04", suite: "suite_B", chip: "ChipScale", chip_count: 1, vendor: "V",
+    offline_throughput: 50,  primary_metric: 50 },
+  // ChipSolo on suite_A — single fan-out → scaling section should suppress.
+  { run_id: "solo-a-1",   date: "2026-04-05", suite: "suite_A", chip: "ChipSolo",  chip_count: 1, vendor: "V",
+    offline_throughput: 200, primary_metric: 200 },
+];
+
+const { chipCountScaling, init } = await import("../assets/js/data.js");
+init();
+
+test("chipCountScaling: chip with a single fan-out returns empty suites + chipCounts of length 1", () => {
+  const out = chipCountScaling("chipsolo");
+  assert.deepEqual(out.chipCounts, [1]);
+  assert.equal(out.suites.length, 0);
+});
+
+test("chipCountScaling: multi-fan-out chip surfaces every chip_count and normalises within suite", () => {
+  const out = chipCountScaling("chipscale");
+  assert.deepEqual(out.chipCounts, [1, 4, 8]);
+  // suite_A should be present with a perCount Map covering 1/4/8.
+  const suiteA = out.suites.find((s) => s.sid === "suite_A");
+  assert.ok(suiteA, "suite_A entry should exist");
+  const cellA1 = suiteA.perCount.get(1);
+  const cellA4 = suiteA.perCount.get(4);
+  const cellA8 = suiteA.perCount.get(8);
+  assert.equal(cellA1.value, 100);
+  assert.equal(cellA4.value, 380);
+  assert.equal(cellA8.value, 700);
+  // Normalised against the cluster max (700).
+  assert.equal(cellA1.normalized, 100 / 700);
+  assert.equal(cellA4.normalized, 380 / 700);
+  assert.equal(cellA8.normalized, 1.0);
+});
+
+test("chipCountScaling: cells without a submission for that chip-count come back as null + zero", () => {
+  const out = chipCountScaling("chipscale");
+  const suiteB = out.suites.find((s) => s.sid === "suite_B");
+  assert.ok(suiteB, "suite_B should still render so the chart shows the gap");
+  // ×1 has data, ×4 and ×8 don't — must be null/zero, not missing keys.
+  assert.equal(suiteB.perCount.get(1).value, 50);
+  assert.equal(suiteB.perCount.get(1).normalized, 1.0);
+  assert.equal(suiteB.perCount.get(4).value, null);
+  assert.equal(suiteB.perCount.get(4).normalized, 0);
+  assert.equal(suiteB.perCount.get(8).value, null);
+  assert.equal(suiteB.perCount.get(8).normalized, 0);
+});
+
+test("chipCountScaling: suites the chip never submitted to (any count) are omitted entirely", () => {
+  const out = chipCountScaling("chipscale");
+  // ChipScale never touched suites C/D/E/F/G — they should NOT appear,
+  // saving the chart from rendering empty clusters.
+  for (const sid of ["suite_C", "suite_D", "suite_E", "suite_F", "suite_G"]) {
+    assert.equal(out.suites.find((s) => s.sid === sid), undefined,
+      `${sid} should be omitted when the chip has no data on it at any chip_count`);
+  }
+});
+
+test("chipCountScaling: unknown chip slug returns a stable shape (no throw, empty suites)", () => {
+  const out = chipCountScaling("does-not-exist");
+  assert.deepEqual(out.chipCounts, []);
+  assert.deepEqual(out.suites, []);
+});
diff --git a/leaderboard/site/test/chip_slug.test.mjs b/leaderboard/site/test/chip_slug.test.mjs
new file mode 100644
index 00000000..d9a4c88e
--- /dev/null
+++ b/leaderboard/site/test/chip_slug.test.mjs
@@ -0,0 +1,65 @@
+// chip_slug.test.mjs — guard the chip-detail URL contract.
+//
+// chipSlug deliberately does NOT encode chip_count: 4090D, 4090D ×4,
+// 4090D ×8 are the same hardware and share a chip-detail page.  This
+// is a behaviour change from the original implementation, where the
+// slug used to carry an "-x<N>" suffix.  Two regressions we'd want to
+// catch fast:
+//
+//   1. someone re-introducing chip_count into chipSlug — would re-fork
+//      ×1 / ×4 / ×8 back into separate detail pages.
+//   2. someone removing the legacy "-x<N>" → bare-model normaliser —
+//      would 404 every shared link / bookmark from before the change.
+
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { chipSlug, normalizeChipSlug, slugify } from "../assets/js/utils.js";
+
+test("chipSlug: same chip at different chip_count produces the same slug", () => {
+  const x1 = { chip: "RTX 4090D", chip_count: 1 };
+  const x4 = { chip: "RTX 4090D", chip_count: 4 };
+  const x8 = { chip: "RTX 4090D", chip_count: 8 };
+  assert.equal(chipSlug(x1), chipSlug(x4));
+  assert.equal(chipSlug(x4), chipSlug(x8));
+  assert.equal(chipSlug(x1), slugify("RTX 4090D"));
+});
+
+test("chipSlug: missing chip / row returns empty string", () => {
+  assert.equal(chipSlug(null), "");
+  assert.equal(chipSlug(undefined), "");
+  assert.equal(chipSlug({}), "");
+});
+
+test("chipSlug: precomputed _chip_slug wins over recomputation", () => {
+  const row = { chip: "Will Be Ignored", _chip_slug: "precomputed-value" };
+  assert.equal(chipSlug(row), "precomputed-value");
+});
+
+test("normalizeChipSlug: legacy -x<N> shape is mapped back to the bare model", () => {
+  assert.equal(normalizeChipSlug("nvidia-rtx-4090d-x4"), "nvidia-rtx-4090d");
+  assert.equal(normalizeChipSlug("apple-m4-max-x1"),     "apple-m4-max");
+  assert.equal(normalizeChipSlug("h200-x16"),            "h200");
+});
+
+test("normalizeChipSlug: new bare-model slugs are reported unchanged (null)", () => {
+  // Returning null lets the router skip the rewrite + replaceState
+  // dance for slugs that are already in the new shape.
+  assert.equal(normalizeChipSlug("nvidia-rtx-4090d"), null);
+  assert.equal(normalizeChipSlug("apple-m4-max"),     null);
+  assert.equal(normalizeChipSlug(""),                  null);
+  assert.equal(normalizeChipSlug(null),                null);
+});
+
+test("normalizeChipSlug: known boundary — slug tokens that look like -x<digits>", () => {
+  // The regex matches any `-x<digits>$` tail, so a hypothetical chip
+  // ending in "x86" or "x64" would also be rewritten.  Document this
+  // here so a future refactor doesn't widen the regex by accident.
+  // No real chip in the dataset has this shape today; if one ever
+  // ships, switch the redirect to a known-suffix allowlist or check
+  // the rewrite target actually exists in `_byChip` before applying.
+  assert.equal(normalizeChipSlug("foo-x86"), "foo");
+  // Suffix with non-digits stays put — no rewrite.
+  assert.equal(normalizeChipSlug("foo-xy"),  null);
+  assert.equal(normalizeChipSlug("foo-x"),   null);
+});
diff --git a/leaderboard/site/test/dom_stub.mjs b/leaderboard/site/test/dom_stub.mjs
new file mode 100644
index 00000000..50bb2eb5
--- /dev/null
+++ b/leaderboard/site/test/dom_stub.mjs
@@ -0,0 +1,139 @@
+// dom_stub.mjs — Tiny DOM + Chart.js stand-in for headless node tests.
+//
+// modal.js's Visualize tab renderer touches a small DOM surface
+// (createElement / appendChild / classList / innerHTML / textContent /
+// dataset / style + getComputedStyle on the documentElement) plus the
+// global Chart constructor.  Spinning up jsdom or happy-dom for that is
+// overkill; this file ships the minimum implementation required to make
+// `_test.renderViz(panel, row)` reach every per-suite branch without
+// throwing.  When the real DOM grows another usage in modal.js, add it
+// here — the failing test will tell you exactly which method.
+
+class FakeEl {
+  constructor(tag) {
+    this.tagName = String(tag).toUpperCase();
+    this.children = [];
+    this._attrs = {};
+    this._cls = new Set();
+    this._innerHTML = "";
+    this._textContent = "";
+    this.style = {};
+    this.dataset = {};
+    this.classList = {
+      add:      (c) => this._cls.add(c),
+      remove:   (c) => this._cls.delete(c),
+      toggle:   (c, v) => (v ? this._cls.add(c) : this._cls.delete(c)),
+      contains: (c) => this._cls.has(c),
+    };
+  }
+  set className(v) {
+    this._cls = new Set(String(v).split(/\s+/).filter(Boolean));
+  }
+  get className() { return [...this._cls].join(" "); }
+  // Mirror DOM `el.id` ↔ `el.getAttribute("id")` so callers that use
+  // either form (data.js's injectVendorStyles uses the property form)
+  // both update the same backing slot the head's appendChild looks at.
+  set id(v) { this._attrs.id = String(v); }
+  get id() { return this._attrs.id || ""; }
+  set innerHTML(v) {
+    this._innerHTML = String(v == null ? "" : v);
+    if (this._innerHTML === "") this.children = [];
+  }
+  get innerHTML() { return this._innerHTML; }
+  set textContent(v) { this._textContent = String(v); }
+  get textContent() { return this._textContent; }
+  appendChild(c) { this.children.push(c); return c; }
+  removeChild(c) {
+    const i = this.children.indexOf(c);
+    if (i >= 0) this.children.splice(i, 1);
+    return c;
+  }
+  setAttribute(k, v) { this._attrs[k] = v; }
+  removeAttribute(k) { delete this._attrs[k]; }
+  getAttribute(k)  { return this._attrs[k] ?? null; }
+  // Synthetic `<a download>.click()` fired by downloadCanvasAsPng to
+  // trigger a browser download.  Tests only need it to not throw —
+  // the actual download has no real-DOM observable side effect.
+  click() {}
+  // Minimal querySelector stub: we only ever need to call this for
+  // helpers like flashButtonLabel that look for ".copy-btn-label"
+  // inside a button.  Returning null lets the helper fall through to
+  // its "label is the button itself" branch, which the tests assert.
+  querySelector() { return null; }
+  querySelectorAll() { return []; }
+
+  // Recursively flatten children — handy for assertions that care
+  // about how many cards / canvases the renderer produced regardless
+  // of nesting depth.
+  descendants() {
+    const out = [];
+    const walk = (el) => {
+      for (const c of el.children) {
+        out.push(c);
+        if (c instanceof FakeEl) walk(c);
+      }
+    };
+    walk(this);
+    return out;
+  }
+}
+
+// installDom() wires fake document + window onto globalThis and returns
+// helpers a test uses to inspect chart creation.  Each call resets
+// counters so test cases stay independent.
+export function installDom() {
+  const created = [];
+
+  function FakeChart(canvas, config) {
+    this.canvas = canvas;
+    this.config = config;
+    this.destroyed = false;
+    this.destroy = () => { this.destroyed = true; };
+    created.push(this);
+  }
+
+  // `_byId` lets injectVendorStyles in data.js mount its singleton
+  // <style> tag and re-find it on subsequent re-runs.  Tests that
+  // don't care about styles can ignore it.
+  const _byId = new Map();
+  const head = new FakeEl("head");
+  const document = {
+    createElement: (tag) => new FakeEl(tag),
+    documentElement: new FakeEl("html"),
+    head,
+    body: new FakeEl("body"),
+    addEventListener: () => {},
+    querySelectorAll: () => [],
+    activeElement: null,
+    getElementById: (id) => _byId.get(id) || null,
+  };
+  // Patch head.appendChild to keep an id index so getElementById works.
+  const _origHeadAppend = head.appendChild.bind(head);
+  head.appendChild = (el) => {
+    if (el && el._attrs && el._attrs.id) _byId.set(el._attrs.id, el);
+    if (el && el.tagName === "STYLE" && el._attrs?.id) _byId.set(el._attrs.id, el);
+    return _origHeadAppend(el);
+  };
+
+  const window = {
+    Chart: FakeChart,
+    addEventListener: () => {},
+  };
+
+  globalThis.document = document;
+  globalThis.window = window;
+  globalThis.getComputedStyle = () => ({ getPropertyValue: () => "" });
+  globalThis.history = { replaceState: () => {} };
+  globalThis.location = { hash: "", pathname: "/", search: "" };
+  globalThis.setTimeout = globalThis.setTimeout || ((fn) => fn());
+
+  return {
+    FakeEl,
+    document,
+    window,
+    chartsCreated: () => created.length,
+    charts: () => created.slice(),
+    reset: () => { created.length = 0; },
+    makePanel: () => new FakeEl("section"),
+  };
+}
diff --git a/leaderboard/site/test/modal_viz.test.mjs b/leaderboard/site/test/modal_viz.test.mjs
new file mode 100644
index 00000000..7a196d8e
--- /dev/null
+++ b/leaderboard/site/test/modal_viz.test.mjs
@@ -0,0 +1,158 @@
+// modal_viz.test.mjs — node:test coverage for the Visualize tab.
+//
+// modal.js's Visualize panel is the most failure-prone surface in the
+// frontend: its per-suite chart renderers all dereference deeply-nested
+// fields on `row.viz` and would happily blow up on a slightly malformed
+// row.  These tests guard the three regressions we'd actually catch in
+// review:
+//
+//   1. happy-path  — full suite_A row renders without throwing and
+//                    actually creates Chart.js instances.
+//   2. missing-viz — `viz` is present but every sub-block is empty;
+//                    we should fall back to the "No visualization
+//                    data" placeholder and skip the renderers entirely.
+//   3. non-suite   — `viz.type` we don't know about renders the
+//                    "not yet supported" placeholder rather than
+//                    crashing the dispatch.
+//
+// We additionally smoke-test every per-suite renderer with a partially-
+// populated viz block so future edits to a single renderer can't slip a
+// `Cannot read properties of undefined` past CI.
+
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { installDom } from "./dom_stub.mjs";
+
+// IMPORTANT: install the DOM stub before importing modal.js — modal.js
+// references `window` / `document` at module init time (e.g. inside
+// chartColors() which the renderers call).
+const dom = installDom();
+
+const { _test } = await import("../assets/js/modal.js");
+
+function freshPanel() {
+  dom.reset();
+  _test.destroyCharts();
+  _test.resetColorCache();
+  return dom.makePanel();
+}
+
+// ── 1. happy-path ─────────────────────────────────────────────
+test("renderViz: full suite_A row creates charts and does not throw", () => {
+  const panel = freshPanel();
+  const row = {
+    run_id: "test-run-1",
+    suite: "suite_A",
+    offline_throughput: 12345,
+    peak_memory_gb: 70.2,
+    memory_utilization_pct: 88,
+    viz: {
+      type: "suite_A",
+      offline:    { labels: [1, 2, 4, 8], throughput: [1000, 1900, 3500, 6000] },
+      online:     {
+        labels:   [1, 2, 4],
+        ttft_p50: [80, 95, 130],
+        ttft_p90: [120, 150, 220],
+        tpot_p50: [25, 28, 32],
+        sla_met:  [true, true, false],
+      },
+      interactive: {
+        ttft_p50: 100, ttft_p90: 130, ttft_p99: 180,
+        tpot_p50: 25,  tpot_p99: 35,
+      },
+      speculative: {
+        offline_tok_per_sec: 18000,
+        acceptance_rate: 0.72,
+        mean_accepted_tokens: 2.4,
+      },
+      burst: {
+        burst_degradation_ratio: 1.5,
+        steady_ttft_p99_ms: 200,
+        burst_ttft_p99_ms: 300,
+        sla_met_during_burst: true,
+      },
+    },
+  };
+
+  assert.doesNotThrow(() => _test.renderViz(panel, row),
+    "happy-path renderViz must not throw");
+  // Offline + Online lines, plus optional interactive stat-only block;
+  // we only assert ≥1 to stay decoupled from chart-count tweaks.
+  assert.ok(dom.chartsCreated() >= 2,
+    `expected at least 2 charts, got ${dom.chartsCreated()}`);
+  // Panel should have been populated with section titles, stat chips,
+  // canvases — so at minimum the children list is non-empty.
+  assert.ok(panel.children.length > 0,
+    "panel should have children after a successful render");
+});
+
+// ── 2. missing-viz-block ──────────────────────────────────────
+test("renderViz: viz with only `type` shows the no-data placeholder", () => {
+  const panel = freshPanel();
+  const row = { run_id: "missing-viz", suite: "suite_A", viz: { type: "suite_A" } };
+
+  assert.doesNotThrow(() => _test.renderViz(panel, row));
+  assert.equal(dom.chartsCreated(), 0,
+    "no charts should be created when viz has no actual data");
+  assert.match(panel.innerHTML, /No visualization data/,
+    "expected the No-visualization-data placeholder");
+});
+
+// ── 3. non-suite-row (unknown viz.type) ───────────────────────
+test("renderViz: unknown viz.type falls back to a friendly message", () => {
+  const panel = freshPanel();
+  const row = {
+    run_id: "weird",
+    suite: "suite_unknown",
+    viz: { type: "suite_zzz", offline: { labels: [1], throughput: [9] } },
+  };
+
+  assert.doesNotThrow(() => _test.renderViz(panel, row));
+  assert.equal(dom.chartsCreated(), 0,
+    "unknown types must not invent charts");
+  assert.match(panel.innerHTML, /not yet supported/i,
+    "expected the unsupported-type placeholder");
+});
+
+// ── 4. each per-suite renderer survives a partial viz block ──
+//
+// Some real rows submit only the offline block (no online / interactive)
+// or only the interactive block.  This battery confirms each per-suite
+// dispatch handles partial input without throwing.
+const partialCases = [
+  ["suite_A", { offline:    { labels: [1, 2], throughput: [10, 20] } }],
+  ["suite_B", { offline:    { labels: [1], throughput: [10], throughput_per_chip: [5] } }],
+  ["suite_C", { precisions: ["BF16", "FP8"], throughput: [100, 200] }],
+  ["suite_D", { interactive:{ ttft_p50: 50, ttft_p90: 80, ttft_p99: 100, tpot_p50: 10, tpot_p90: 12, tpot_p99: 15 } }],
+  ["suite_E", { chip_counts: [1, 2, 4], throughput: [100, 190, 350], efficiency_pct: [100, 95, 88] }],
+  ["suite_F", { offline:    { labels: [1], throughput: [10] } }],
+  ["suite_G", { offline:    { labels: [1], throughput: [10] }, runtime_metrics: { expert_load_balance: 0.12 } }],
+];
+
+for (const [type, vizBody] of partialCases) {
+  test(`renderViz: ${type} renderer accepts a partial viz block without throwing`, () => {
+    const panel = freshPanel();
+    const row = {
+      run_id: `partial-${type}`,
+      suite: type,
+      viz: { type, ...vizBody },
+    };
+    assert.doesNotThrow(() => _test.renderViz(panel, row),
+      `${type} renderer threw on partial viz`);
+    // Either some charts were created or a graceful empty-state was
+    // appended.  Either is fine; the key invariant is "no throw".
+    assert.ok(panel.children.length > 0 || panel.innerHTML.length > 0,
+      `${type} renderer produced no output at all`);
+  });
+}
+
+// ── 5. vizHasAnyData: the gatekeeper before dispatch ──────────
+test("vizHasAnyData: distinguishes empty vs populated viz objects", () => {
+  assert.equal(_test.vizHasAnyData(null), false);
+  assert.equal(_test.vizHasAnyData({}), false);
+  assert.equal(_test.vizHasAnyData({ type: "suite_A" }), false);
+  assert.equal(_test.vizHasAnyData({ type: "suite_A", offline: {} }), false,
+    "an empty sub-object should not count as data");
+  assert.equal(_test.vizHasAnyData({ type: "suite_A", offline: { labels: [1] } }), true);
+});
diff --git a/leaderboard/site/test/recent_since.test.mjs b/leaderboard/site/test/recent_since.test.mjs
new file mode 100644
index 00000000..ba4e670d
--- /dev/null
+++ b/leaderboard/site/test/recent_since.test.mjs
@@ -0,0 +1,72 @@
+// recent_since.test.mjs — guard the home hero "this week" counter.
+//
+// recentSince(days, now) is what the home hero ribbon and the
+// "this week" KPI both call.  Two regressions we want to catch:
+//
+//   1. cutoff drift — an off-by-one in the days math would either
+//      double-count or under-count, both visible to contributors.
+//   2. silent failure when rows are missing dates — the loader
+//      sometimes drops `date` for runs imported from older formats;
+//      those should be ignored, not crash the hero render.
+//
+// We inject a hand-built fixture as `window.LEADERBOARD_DATA` *before*
+// importing data.js so init() picks it up on the very first call.
+
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { installDom } from "./dom_stub.mjs";
+
+installDom();
+
+// Fixture spans a 6-month window so we can exercise multiple cutoff
+// distances without contriving wall-clock dates.
+globalThis.window.LEADERBOARD_DATA = [
+  { run_id: "old",   date: "2026-01-01", suite: "suite_A", chip: "X", chip_count: 1, vendor: "V" },
+  { run_id: "edge",  date: "2026-05-09", suite: "suite_A", chip: "X", chip_count: 1, vendor: "V" },
+  { run_id: "fresh1", date: "2026-05-15", suite: "suite_A", chip: "X", chip_count: 1, vendor: "V" },
+  { run_id: "fresh2", date: "2026-05-10", suite: "suite_A", chip: "X", chip_count: 1, vendor: "V" },
+  { run_id: "fresh3", date: "2026-05-13", suite: "suite_A", chip: "X", chip_count: 1, vendor: "V" },
+  { run_id: "today", date: "2026-05-16", suite: "suite_A", chip: "X", chip_count: 1, vendor: "V" },
+  { run_id: "no-date", suite: "suite_A", chip: "X", chip_count: 1, vendor: "V" },
+];
+
+const { recentSince, init } = await import("../assets/js/data.js");
+init();
+
+// Pin "now" so the cutoff math is reproducible regardless of when the
+// suite runs in CI.
+const NOW = new Date("2026-05-16T00:00:00Z");
+
+test("recentSince: 7-day window catches every row newer than today-7", () => {
+  // cutoff = 2026-05-09 (inclusive via lexicographic >=)
+  // matches: edge, fresh1, fresh2, fresh3, today = 5
+  assert.equal(recentSince(7, NOW), 5);
+});
+
+test("recentSince: 1-day window is just today + yesterday", () => {
+  // cutoff = 2026-05-15
+  // matches: fresh1 (2026-05-15), today (2026-05-16) = 2
+  assert.equal(recentSince(1, NOW), 2);
+});
+
+test("recentSince: huge window catches every dated row, never the undated one", () => {
+  // 365 days catches everything dated, and the `no-date` row stays
+  // skipped because the body explicitly guards on `r.date`.
+  assert.equal(recentSince(365, NOW), 6);
+});
+
+test("recentSince: 0, negative, NaN, and non-numeric days return 0", () => {
+  assert.equal(recentSince(0, NOW), 0);
+  assert.equal(recentSince(-1, NOW), 0);
+  assert.equal(recentSince(NaN, NOW), 0);
+  assert.equal(recentSince("not-a-number", NOW), 0);
+});
+
+test("recentSince: defaults `now` to wall clock so callers don't have to thread it", () => {
+  // We can't pin Date.now() here without monkey-patching, but we can
+  // verify the call doesn't throw and returns a non-negative integer.
+  const n = recentSince(7);
+  assert.ok(Number.isInteger(n));
+  assert.ok(n >= 0);
+});
diff --git a/leaderboard/site/test/share_helpers.test.mjs b/leaderboard/site/test/share_helpers.test.mjs
new file mode 100644
index 00000000..ea027f38
--- /dev/null
+++ b/leaderboard/site/test/share_helpers.test.mjs
@@ -0,0 +1,188 @@
+// share_helpers.test.mjs — guard the cross-view copy/share UX helpers.
+//
+// `copyToClipboard` and `flashButtonLabel` live in utils.js so both the
+// compare basket and the chip-detail hero share button behave the same.
+// Two regressions we want fast feedback on:
+//
+//   1. copyToClipboard never throws — even when none of the three
+//      paths (navigator.clipboard / execCommand / window.prompt) are
+//      available, it must return a boolean and log nothing.
+//   2. flashButtonLabel restores the original label on the second call
+//      to the same button — without that, two rapid clicks would lock
+//      the button into "Copied!" forever (the new flash would think
+//      "Copied!" is the original label).
+
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { installDom } from "./dom_stub.mjs";
+
+installDom();
+
+const { copyToClipboard, flashButtonLabel, downloadCanvasAsPng } = await import("../assets/js/utils.js");
+
+test("copyToClipboard: returns false (and never throws) when no clipboard path is available", async () => {
+  // The DOM stub doesn't provide navigator.clipboard or execCommand,
+  // so the helper should fall through to the prompt branch and report
+  // failure cleanly.  globalThis.window.prompt is undefined, that's ok.
+  const ok = await copyToClipboard("https://example.test/share");
+  assert.equal(ok, false);
+});
+
+test("copyToClipboard: succeeds via navigator.clipboard.writeText when the API is present", async () => {
+  // Cross-Node-version setup: Node ≤20 leaves `globalThis.navigator`
+  // undefined entirely, while Node ≥21 exposes it as a configurable
+  // getter.  We replace the whole `navigator` slot via defineProperty
+  // (configurable on every supported version) and restore the original
+  // descriptor — or delete the slot if there wasn't one — on the way
+  // out.  This keeps the test green on both runtimes (CI pins Node 20
+  // today, local devs typically run a newer version).
+  const captured = [];
+  const origDesc = Object.getOwnPropertyDescriptor(globalThis, "navigator");
+  Object.defineProperty(globalThis, "navigator", {
+    value: { clipboard: { writeText: async (s) => { captured.push(s); } } },
+    configurable: true,
+    writable: true,
+  });
+  try {
+    const ok = await copyToClipboard("hello");
+    assert.equal(ok, true);
+    assert.deepEqual(captured, ["hello"]);
+  } finally {
+    if (origDesc) Object.defineProperty(globalThis, "navigator", origDesc);
+    else delete globalThis.navigator;
+  }
+});
+
+test("copyToClipboard: surfaces a string-coerced empty value cleanly", async () => {
+  // Two-call assertion: null and undefined must both reach a clipboard
+  // path; we check `false` because the stub still has no clipboard API
+  // — the point is just "no exception".
+  await assert.doesNotReject(() => copyToClipboard(null));
+  await assert.doesNotReject(() => copyToClipboard(undefined));
+});
+
+test("flashButtonLabel: restores the original label after holdMs and is re-entrant", async () => {
+  // FakeEl from dom_stub doesn't carry a real querySelector — but
+  // flashButtonLabel falls back to the button itself when the selector
+  // resolves to null, so we can use the button as its own labelEl.
+  const btn = document.createElement("button");
+  btn.textContent = "Copy share link";
+  // First flash — should swap label to "Copied!" and arm the timer.
+  flashButtonLabel(btn, "Copied!", { holdMs: 30, labelSelector: ".missing" });
+  assert.equal(btn.textContent, "Copied!");
+  // Second flash before the first restored — should clear the existing
+  // timer, NOT capture "Copied!" as the new "original" label.
+  flashButtonLabel(btn, "Copy failed — select & ⌘C", { holdMs: 30, labelSelector: ".missing" });
+  assert.equal(btn.textContent, "Copy failed — select & ⌘C");
+  // Wait for the second timer to fire, then verify we landed on the
+  // genuine original ("Copy share link") not the intermediate flash.
+  await new Promise((r) => setTimeout(r, 80));
+  assert.equal(btn.textContent, "Copy share link");
+});
+
+test("flashButtonLabel: does nothing (and doesn't throw) for a null button", () => {
+  assert.doesNotThrow(() => flashButtonLabel(null, "x"));
+  assert.doesNotThrow(() => flashButtonLabel(undefined, "x"));
+});
+
+// ── downloadCanvasAsPng — never-throws contract + happy path ──
+
+test("downloadCanvasAsPng: returns false (and never throws) on null / non-canvas inputs", async () => {
+  assert.equal(await downloadCanvasAsPng(null), false);
+  assert.equal(await downloadCanvasAsPng(undefined), false);
+  assert.equal(await downloadCanvasAsPng({}), false); // no getContext
+  assert.equal(await downloadCanvasAsPng({ getContext: 42 }), false); // not a function
+});
+
+test("downloadCanvasAsPng: returns false when a 2d context is unavailable", async () => {
+  const canvas = { getContext: () => null, width: 100, height: 50 };
+  // The helper still has to *create* a composite canvas via
+  // document.createElement — dom_stub returns a FakeEl whose getContext
+  // is also missing, so this exercises the early-return branch in
+  // the composite block too.
+  assert.equal(await downloadCanvasAsPng(canvas), false);
+});
+
+test("downloadCanvasAsPng: succeeds via toBlob path with a full canvas mock", async () => {
+  // Stand up a minimal canvas implementation: getContext returns a
+  // ctx that records draws (so we can assert background fill happened
+  // before drawImage), and toBlob yields a fake Blob.
+  const composite = makeFakeCanvas({ withToBlob: true });
+  // Override createElement just for this test so the helper picks up
+  // our instrumented composite canvas.
+  const origCreate = document.createElement;
+  document.createElement = (tag) => {
+    if (tag === "canvas") return composite;
+    return origCreate.call(document, tag);
+  };
+  try {
+    const sourceCanvas = makeFakeCanvas({ withToBlob: true });
+    const ok = await downloadCanvasAsPng(sourceCanvas, { filename: "test.png", backgroundColor: "#000" });
+    assert.equal(ok, true);
+    // Background fill happened before drawImage (otherwise the source
+    // canvas would overwrite the bg, defeating the whole point).
+    assert.deepEqual(composite._ops, ["fillRect", "drawImage"]);
+    assert.equal(composite._fillStyle, "#000");
+  } finally {
+    document.createElement = origCreate;
+  }
+});
+
+test("downloadCanvasAsPng: falls back to toDataURL when toBlob is unavailable", async () => {
+  const composite = makeFakeCanvas({ withToBlob: false }); // toBlob undefined
+  const origCreate = document.createElement;
+  document.createElement = (tag) => {
+    if (tag === "canvas") return composite;
+    return origCreate.call(document, tag);
+  };
+  try {
+    const sourceCanvas = makeFakeCanvas({ withToBlob: false });
+    const ok = await downloadCanvasAsPng(sourceCanvas, { filename: "fallback.png" });
+    assert.equal(ok, true);
+    assert.equal(composite._toDataURLCalled, true);
+  } finally {
+    document.createElement = origCreate;
+  }
+});
+
+// Tiny canvas factory the tests above share.  Records fillRect /
+// drawImage call order so we can assert ordering, and surfaces the
+// filename via the synthetic <a> click that the helper performs.
+function makeFakeCanvas({ withToBlob }) {
+  const ops = [];
+  const ctx = {
+    set fillStyle(v) { canvas._fillStyle = v; },
+    get fillStyle() { return canvas._fillStyle; },
+    fillRect:  () => ops.push("fillRect"),
+    drawImage: () => ops.push("drawImage"),
+  };
+  const canvas = {
+    width: 200,
+    height: 100,
+    _ops: ops,
+    _fillStyle: null,
+    _toDataURLCalled: false,
+    getContext: (type) => (type === "2d" ? ctx : null),
+    toDataURL: () => { canvas._toDataURLCalled = true; return "data:image/png;base64,AAAA"; },
+  };
+  if (withToBlob) {
+    canvas.toBlob = (cb) => cb(new FakeBlob());
+  }
+  return canvas;
+}
+
+class FakeBlob {
+  constructor() { this.size = 4; this.type = "image/png"; }
+}
+
+// URL.createObjectURL is required by the toBlob path.  Stub on first
+// test setup; harmless if jsdom or another stub adds the real one
+// later because we only set it when missing.
+if (typeof globalThis.URL === "undefined") globalThis.URL = {};
+if (typeof globalThis.URL.createObjectURL !== "function") {
+  globalThis.URL.createObjectURL = () => "blob:fake";
+}
+if (typeof globalThis.URL.revokeObjectURL !== "function") {
+  globalThis.URL.revokeObjectURL = () => {};
+}
diff --git a/leaderboard/site/test/suite_fingerprint.test.mjs b/leaderboard/site/test/suite_fingerprint.test.mjs
new file mode 100644
index 00000000..00f8660f
--- /dev/null
+++ b/leaderboard/site/test/suite_fingerprint.test.mjs
@@ -0,0 +1,99 @@
+// suite_fingerprint.test.mjs — guard the chip-detail radar contract.
+//
+// suiteFingerprint(slug) returns a Map<sid, { value, normalized,
+// best, missing }>.  Two regressions to catch fast:
+//
+//   1. asc-direction metrics (TTFT, latency) are inverted so the
+//      global winner still reads as 1.0.  An off-by-direction bug
+//      would invert chip rankings on the radar.
+//   2. chips with no submission in a suite must come back as
+//      `missing: true` with `normalized: 0`, NOT throw or skip — the
+//      radar relies on every entry being present so the polygon
+//      collapses to centre on absent suites.
+
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { installDom } from "./dom_stub.mjs";
+
+installDom();
+
+// SUITE_META baked into data.js dictates the primary metric per suite.
+// We use a single suite (suite_A → offline_throughput, desc) for the
+// asc-fixture rows to keep the test independent of the hardcoded
+// per-suite metric direction (suite_D's TTFT is the only stock asc
+// metric and adding rows for it would entangle this test in the
+// long-context viz schema).  Asc-direction inversion is exercised
+// directly by mocking with another suite where the schema fits.
+globalThis.window.LEADERBOARD_DATA = [
+  { run_id: "leader",   date: "2026-04-01", suite: "suite_A", chip: "ChipBest", chip_count: 1, vendor: "V",
+    offline_throughput: 1000, primary_metric: 1000 },
+  { run_id: "midpack",  date: "2026-04-02", suite: "suite_A", chip: "ChipMid",  chip_count: 1, vendor: "V",
+    offline_throughput: 500,  primary_metric: 500 },
+  { run_id: "tailend",  date: "2026-04-03", suite: "suite_A", chip: "ChipTail", chip_count: 1, vendor: "V",
+    offline_throughput: 100,  primary_metric: 100 },
+  // suite_B: same chips, different relative ordering.  ChipMid wins B.
+  { run_id: "b1", date: "2026-04-04", suite: "suite_B", chip: "ChipBest", chip_count: 8, vendor: "V",
+    offline_throughput: 200, primary_metric: 200 },
+  { run_id: "b2", date: "2026-04-05", suite: "suite_B", chip: "ChipMid",  chip_count: 8, vendor: "V",
+    offline_throughput: 800, primary_metric: 800 },
+];
+
+const { suiteFingerprint, init } = await import("../assets/js/data.js");
+init();
+
+test("suiteFingerprint: leader of a suite gets normalized=1.0 there", () => {
+  const fp = suiteFingerprint("chipbest");
+  const a = fp.get("suite_A");
+  assert.ok(a);
+  assert.equal(a.missing, false);
+  assert.equal(a.normalized, 1.0);
+  assert.equal(a.value, 1000);
+});
+
+test("suiteFingerprint: a chip at half the leader's value reads ~0.5", () => {
+  const fp = suiteFingerprint("chipmid");
+  const a = fp.get("suite_A");
+  assert.equal(a.missing, false);
+  // 500 / 1000 = 0.5
+  assert.equal(a.normalized, 0.5);
+});
+
+test("suiteFingerprint: a chip absent from a suite is reported as missing with normalized=0", () => {
+  const fp = suiteFingerprint("chipbest");
+  // chipbest doesn't have a row in suite_C/D/E/F/G — every one of
+  // those should be missing with a zero normalised score so the radar
+  // polygon collapses on those axes.
+  for (const sid of ["suite_C", "suite_D", "suite_E", "suite_F", "suite_G"]) {
+    const cell = fp.get(sid);
+    assert.ok(cell, `${sid} entry should exist`);
+    assert.equal(cell.missing, true);
+    assert.equal(cell.normalized, 0);
+    assert.equal(cell.value, null);
+  }
+});
+
+test("suiteFingerprint: every entry returned, never throws on unknown chip slugs", () => {
+  const fp = suiteFingerprint("chip-that-does-not-exist");
+  // 7 suites total — even with no data on any of them, every key is
+  // present so callers can iterate SUITE_ORDER safely.
+  let presentCount = 0;
+  for (const cell of fp.values()) {
+    presentCount++;
+    assert.equal(cell.missing, true);
+    assert.equal(cell.normalized, 0);
+  }
+  assert.ok(presentCount >= 5);
+});
+
+test("suiteFingerprint: relative ordering across suites can flip per chip", () => {
+  // ChipBest leads suite_A (1.0) but only scores 200/800 = 0.25 in
+  // suite_B; ChipMid is the inverse (0.5 in A, 1.0 in B).  This is
+  // exactly the cross-suite inversion the radar is meant to surface.
+  const best = suiteFingerprint("chipbest");
+  const mid  = suiteFingerprint("chipmid");
+  assert.equal(best.get("suite_A").normalized, 1.0);
+  assert.equal(best.get("suite_B").normalized, 0.25);
+  assert.equal(mid.get("suite_A").normalized, 0.5);
+  assert.equal(mid.get("suite_B").normalized, 1.0);
+});
diff --git a/leaderboard/site/test/vendor_color.test.mjs b/leaderboard/site/test/vendor_color.test.mjs
new file mode 100644
index 00000000..22ee5fb6
--- /dev/null
+++ b/leaderboard/site/test/vendor_color.test.mjs
@@ -0,0 +1,61 @@
+// vendor_color.test.mjs — guard the vendor-colour single-source-of-truth.
+//
+// Adding a new vendor used to mean editing 70 lines of CSS across 6
+// files; now it's one entry in `VENDOR_COLORS` (or zero entries if you
+// don't care about a brand colour — the deterministic fallback picks a
+// stable shade for you).  These tests pin that contract:
+//
+//   • known vendors return their brand colour exactly.
+//   • unknown vendors get a colour from the fallback palette.
+//   • the same unknown vendor always lands on the same fallback shade
+//     across calls (no per-pageload reshuffling).
+//   • two different unknown vendors usually land on different shades
+//     (no degenerate "everyone is teal" failure mode).
+
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { VENDOR_COLORS, vendorColor, VENDOR_ORDER } from "../assets/js/data.js";
+
+test("vendorColor: known vendors return the brand colour from VENDOR_COLORS", () => {
+  for (const [name, hex] of Object.entries(VENDOR_COLORS)) {
+    assert.equal(vendorColor(name), hex,
+      `expected ${name} to map to ${hex}, got ${vendorColor(name)}`);
+  }
+});
+
+test("vendorColor: unknown vendor falls back to a deterministic palette colour", () => {
+  const c1 = vendorColor("Cerebras");
+  const c2 = vendorColor("Cerebras");
+  assert.equal(c1, c2, "same vendor name must return the same colour");
+  // The fallback palette is hex-coded — the result should look like a
+  // 6-digit hex colour, not "undefined" or an empty string.
+  assert.match(c1, /^#[0-9a-fA-F]{6}$/);
+});
+
+test("vendorColor: empty / null vendor returns a neutral grey, never throws", () => {
+  assert.match(vendorColor(""),        /^#[0-9a-fA-F]{6}$/);
+  assert.match(vendorColor(null),      /^#[0-9a-fA-F]{6}$/);
+  assert.match(vendorColor(undefined), /^#[0-9a-fA-F]{6}$/);
+});
+
+test("vendorColor: most pairs of unknown vendors land on different fallback shades", () => {
+  const probes = ["Cerebras", "Tenstorrent", "Graphcore", "Groq", "SambaNova", "Mythic", "Etched"];
+  const colours = probes.map(vendorColor);
+  const distinct = new Set(colours).size;
+  // 7 probes against a 9-colour palette: the deterministic hash will
+  // very occasionally collide, but a healthy spread is ≥4 distinct
+  // shades.  This is a "no degenerate clumping" guard, not a hard
+  // uniqueness contract.
+  assert.ok(distinct >= 4,
+    `expected at least 4 distinct shades across ${probes.length} unknown vendors, got ${distinct}`);
+});
+
+test("VENDOR_ORDER: derived from VENDOR_COLORS so adding a vendor pins its rank", () => {
+  // The rankings facet pill row uses VENDOR_ORDER to lay out the
+  // brand-name vendors in a stable order; vendors NOT in this list
+  // get appended alphabetically (see buildFacets in rankings.js).
+  // If VENDOR_COLORS and VENDOR_ORDER ever drift apart, we'd start
+  // showing brand-coloured pills at unexpected positions.
+  assert.deepEqual(VENDOR_ORDER, Object.keys(VENDOR_COLORS));
+});