- NEW styles

.claude/skills/regenerate-catalog/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: regenerate-catalog
+description: Regenerate the dashboard's models.json from the live Hugging Face repos by running generate_models_json.py. Use when the user wants to refresh, update, or rebuild the model catalog, import benchmark numbers, or after repos change on Hugging Face.
+---
+
+# Regenerate the model catalog (`models.json`)
+
+This skill runs `generate_models_json.py` to rebuild `models.json` — the auto-generated
+catalog the static dashboard reads. **Never hand-edit `models.json`; always regenerate it.**
+
+## Steps
+
+1. **Work from the project root** (where `generate_models_json.py` lives). Confirm it exists:
+   ```bash
+   ls generate_models_json.py
+   ```
+
+2. **Ensure dependencies** are installed (idempotent — safe to re-run):
+   ```bash
+   pip install requests pyyaml
+   ```
+   `huggingface_hub` is optional — only used to auto-detect a cached login token.
+
+3. **Decide whether a token is needed.** Gated Renesas repos are *listed* without a token, but
+   their *benchmark numbers* require an authorized one. Resolve a token from (in order):
+   `--token hf_xxx`, env `HF_TOKEN` / `HUGGINGFACE_TOKEN` / `HUGGING_FACE_HUB_TOKEN`, or a prior
+   `huggingface-cli login`. If the user hasn't supplied one and wants gated metrics, ask them to
+   either run `! huggingface-cli login` in this session or pass a token. Do **not** print or echo
+   a token; pass it through the environment or the `--token` flag they provide.
+
+4. **Preview first (recommended).** A dry run prints the JSON and a summary without writing:
+   ```bash
+   python generate_models_json.py --dry-run -v
+   ```
+   Read the per-repo summary: configs, metric blocks, and any `[gated: metrics skipped]` flags.
+
+5. **Write the catalog** once the preview looks right:
+   ```bash
+   python generate_models_json.py            # rewrites ./models.json (anonymous)
+   python generate_models_json.py --token hf_xxx   # also imports gated repos' metrics
+   ```
+   Other flags: `--org <name>` (default `Renesas`), `--output <path>`, `--include-private`
+   (needs a token with access), `--force` (write even if 0 models — overwrites existing file).
+
+6. **Check the exit code and report it:**
+   - `0` — success (or a valid dry run).
+   - `2` — Hugging Face network/API error (rate-limited or unreachable). Suggest retrying later.
+   - `3` — could not write the output file (check path/permissions).
+   - `4` — produced **0 models** and refused to overwrite the existing `models.json`. This is a
+     safety guard — investigate *why* zero models came back (org name? token? API down?) before
+     ever reaching for `--force`.
+
+## After regenerating
+
+- Skim the run summary for gated repos whose metrics were skipped — if the user expected those
+  numbers, they need a token with access (request access on HF, then re-run with `--token`).
+- The dashboard reads `models.json` over HTTP, so to eyeball the result locally:
+  ```bash
+  python -m http.server 8000   # then open http://localhost:8000
+  ```
+  (Opening `index.html` via `file://` will not work — `app.js` `fetch`es `models.json`.)
+- If the user wants the refresh committed, stage and commit `models.json` only after confirming
+  the run succeeded and the diff looks reasonable.
+
+## Notes
+
+- The generator is the source of truth for the catalog schema; if a new accelerator/EP or
+  benchmark `type` appears and shows up wrong, the fix belongs in the Python (`EP_TO_UNIT`,
+  `HIL_TYPES`), not in `models.json`.
+- Run this whenever the Hugging Face repos change to keep the dashboard current.

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "python-envs.defaultEnvManager": "ms-python.python:conda",
+    "python-envs.defaultPackageManager": "ms-python.python:conda"
+}

CLAUDE.md

@@ -0,0 +1,92 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## What this is
+
+A **static** Hugging Face Space (`sdk: static` in `README.md` front matter) that lets users
+browse the Renesas AI model catalog and route each model to the correct benchmark/estimation
+Space. There is **no build step, no framework, no package manager, and no test suite** — it is
+plain `index.html` + `app.js` (vanilla ES, loaded with `defer`) + `styles.css`, served as-is.
+
+## Running and updating
+
+```bash
+# Serve locally (any static server works; the app fetches models.json/links.json over HTTP)
+python -m http.server 8000        # then open http://localhost:8000
+
+# Regenerate the catalog from the live Hugging Face repos
+pip install requests pyyaml
+python generate_models_json.py                 # rewrites ./models.json
+python generate_models_json.py --token hf_xxx  # also import gated repos' benchmark numbers
+python generate_models_json.py --dry-run -v    # print, don't write
+```
+
+Opening `index.html` via `file://` will not work — `app.js` `fetch`es `models.json` and
+`links.json`, which requires an HTTP origin.
+
+Generator exit codes: `0` ok, `2` network/API error, `3` write error, `4` produced 0 models
+(refuses to overwrite an existing file — use `--force`).
+
+## Architecture
+
+The whole app is **data-driven from two JSON files** loaded at boot in `app.js` `init()`:
+
+- **`models.json`** — the catalog. **Auto-generated; do not hand-edit.** Regenerate with the
+  Python script instead. Schema is defined implicitly by what `app.js` reads (see below).
+- **`links.json`** — routing targets: HF Space ids for the benchmark tools (`spaces`) and
+  optional collection links. Hand-maintained.
+
+### Data flow: `generate_models_json.py` → `models.json` → `app.js`
+
+`generate_models_json.py` is the source of truth for the catalog schema. It scrapes the public
+HF API for an org (default `Renesas`) and, for each model repo, reads:
+
+- the repo info + recursive file tree (public even for gated repos),
+- the root `.metadata.yaml` (identity: name, upstream, architecture, modality),
+- each `<artifact>/.metadata.yaml` (per-precision artifact, e.g. `fp16`, `w4a16`),
+- each `<artifact>/benchmarks/<chip>_<ep>.yaml` (the actual benchmark numbers).
+
+Key transforms to know when changing either side:
+
+- **Repos are grouped into one logical model** by `group_key()` (strips `-ONNX`/`-GGUF`
+  suffix). One model entry can therefore carry both `onnx_repo` + `gguf_repo` and their
+  separate `*_artifacts` lists.
+- **`key`** is the join id between Python and JS — `app.js` builds `KEY_TO_MODEL` keyed by it.
+  The generator guarantees uniqueness (collisions get a `-2` suffix), because a duplicate key
+  silently drops a model from the dashboard.
+- **Execution provider → target/unit** mapping lives in `EP_TO_UNIT` (`cpu`/`npu`/`dsp`).
+  Unknown EPs default to NPU with a warning — add new accelerators there.
+- **`benchmark.type`** decides where numbers land: values in `HIL_TYPES` → the `hil` block
+  (measured on hardware), everything else → the `estimate` block. The UI shows both per
+  artifact per hardware config under `hardware_configs[].metrics.artifacts[<art>].{estimate,hil}`.
+- Artifacts that actually have measured data are sorted first, because the table/Explore open
+  on the first artifact and should show real numbers, not `—`.
+
+### `app.js` UI (three sections, switched by the top nav)
+
+`app.js` is a single file of plain functions (no modules). The three sections map to the
+`<section>` blocks in `index.html`:
+
+1. **Overview** (`initOverview`, `drawConstellation`) — a `<canvas>` scatter plotting every
+   model/artifact by throughput vs size, plus stat tiles and a "recently updated" carousel.
+2. **Catalog** (`initCatalog`, `renderCatalog`) — faceted card grid / table view with
+   search, sort, and a filter rail built from the catalog (`buildFacetRail`, `modelMatches`).
+3. **Explore** (`updateExploreAny`, `renderActions`) — the routing tool: pick
+   architecture/modality/format/target/artifact and get the `hf download` command and a link to
+   the matching benchmark Space from `links.json`. Format↔purpose rules are enforced by
+   `validatePurpose` (PerformanceEstimate/ORT = ONNX-only; llama.cpp = GGUF-only).
+
+A shared **model-details modal** (`openModelModal`) is reused by the Catalog table and cards.
+
+Global mutable state (`CATALOG`, `KEY_TO_MODEL`, `LINKS`, the `*_SELECTED_ARTIFACT` vars) is
+module-level. Defaults (`DEFAULT_FMT`, `DEFAULT_COMPUTE`, etc.) are derived from the loaded
+catalog so the UI always opens on data that actually exists.
+
+## Conventions
+
+- Build HTML via string templates; **always pass user/catalog strings through `esc()`** (the
+  existing builders do — match that).
+- Element lookups use the `$`/`$$` helpers; missing data renders as `—` (`safeList`, null-guards
+  everywhere) rather than throwing.
+- The on-page disclaimer banner shows `catalog_note` / `generated_at` from `models.json`.

README.md

@@ -7,20 +7,40 @@ sdk: static
 pinned: true
 short_description: Find models and route to the correct estimation or benchmark
 ---
-# Renesas AI Dashboard (POC)
+# Renesas AI Dashboard
 
-> ⚠️ **DEMO / POC ONLY — FAKE DATA**  
-> This Space uses **faked models** and **placeholder metrics** for UI prototyping.  
-> Model names and numbers may **not match real repositories or real performance data**.  
-> Do not use this Space for performance claims.
+The catalog (`models.json`) is **auto-generated from the public Hugging Face
+`Renesas` org repositories** — model identity, artifacts (e.g. `fp16` / `w4a16`),
+hardware configs and benchmark numbers all come straight from each repo's
+`.metadata.yaml` and `<artifact>/benchmarks/<chip>_<ep>.yaml` files. No hand
+editing required.
 
 ## Semantics
 - 📊 **ONNX** → PerformanceEstimate now; later custom ONNX Runtime provider benchmarking  
 - 🧪 **GGUF** → llama.cpp execution benchmarking (**CPU-only** / **NPU-only**)
 
-## How to update (POC)
-- Add/edit entries in `models.json`
-- Update routing links in `links.json`
+## How to update the catalog
+
+Re-run the generator whenever the repos change:
+
+```bash
+pip install requests pyyaml
+python generate_models_json.py            # rewrites models.json
+```
+
+- **Gated repos** (e.g. `Llama-3.2-1B/3B-Instruct-GGUF`): their listing is public,
+  but their benchmark numbers need an authorized token. Provide one via
+  `--token hf_xxx`, the `HF_TOKEN` env var, or a prior `huggingface-cli login`
+  (the cached token is picked up automatically). Without access, those repos are
+  still listed but their metrics are reported as skipped.
+- Useful flags: `--org <owner>` (default `Renesas`), `--output <path>`,
+  `--dry-run` (print, don't write), `-v` (verbose). Exit codes: `0` ok,
+  `2` network/API error, `3` write error, `4` produced 0 models (refused to
+  overwrite — use `--force`).
+- Update routing links (benchmark Spaces) in `links.json`.
+
+> The on-page banner shows when the catalog was generated; metrics reflect each
+> repo's published benchmark YAML at that time.
 
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.js

@@ -21,7 +21,7 @@ function esc(str) {
 
 let CATALOG_ROOT = { models: [] };
 let CATALOG = [];
-let CATALOG_NOTE = "POC ONLY: Fake models/metrics for UI prototyping. Not real performance data.";
+let CATALOG_NOTE = "Auto-generated from Hugging Face repositories.";
 let LINKS = { spaces: {}, collections: {} };
 
 let KEY_TO_MODEL = {};
@@ -90,10 +90,10 @@ function hwBadgesHTML(targets) {
 function repoButtonsSmallHTML(model) {
   const parts = [];
   if (model.onnx_repo) {
-    parts.push(`<a class="link small" href="${esc(hfModelUrl(model.onnx_repo))}" target="_blank" rel="noopener noreferrer">ONNX ↗</a>`);
+    parts.push(`<a class="link small" href="${esc(hfModelUrl(model.onnx_repo))}" target="_blank" rel="noopener noreferrer">ONNX</a>`);
   }
   if (model.gguf_repo) {
-    parts.push(`<a class="link small" href="${esc(hfModelUrl(model.gguf_repo))}" target="_blank" rel="noopener noreferrer">GGUF ↗</a>`);
+    parts.push(`<a class="link small" href="${esc(hfModelUrl(model.gguf_repo))}" target="_blank" rel="noopener noreferrer">GGUF</a>`);
   }
   return `<div class="badges" style="gap:8px;">${parts.join("") || `<span class="subtle">—</span>`}</div>`;
 }
@@ -195,6 +195,33 @@ function getArtifactsFor(modelKey, fmt) {
   return (fmt === "ONNX") ? safeList(m.onnx_artifacts, []) : safeList(m.gguf_artifacts, []);
 }
 
+/* True only if the artifact actually carries benchmark metadata (from its
+   benchmarks/ subfolder → an estimate or hil block). Checked against the
+   per-artifact map directly, NOT metricsForArtifact (whose legacy fallback
+   would make every artifact look benchmarked). A legacy config with no
+   artifacts map at all is treated as benchmarked so it isn't hidden. */
+function artifactHasBenchmark(m, art) {
+  for (const cfg of safeList(m?.hardware_configs, [])) {
+    const metrics = cfg.metrics || {};
+    const artMap = metrics.artifacts;
+    if (artMap && typeof artMap === "object") {
+      const a = artMap[art];
+      if (a && (a.estimate || a.hil)) return true;
+    } else if (metrics.estimate || metrics.hil) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/* Artifacts to actually surface in the results UI: only those with benchmark
+   data (e.g. 8B's fp16 folder has no benchmark, so it must not appear). */
+function benchmarkedArtifactsFor(modelKey, fmt) {
+  const m = KEY_TO_MODEL[modelKey];
+  if (!m) return [];
+  return getArtifactsFor(modelKey, fmt).filter(a => artifactHasBenchmark(m, a));
+}
+
 /**
  * Artifact-layer aware:
  * - Preferred: cfg.metrics.artifacts[artifact].estimate/hil
@@ -315,6 +342,16 @@ function readRadio(name, fallback) {
   return el ? el.value : fallback;
 }
 
+/* Programmatically select a radio option and sync its .pill active state
+   (does not fire a change event — callers re-render explicitly). */
+function setRadioValue(name, value) {
+  document.querySelectorAll(`input[name="${CSS.escape(name)}"]`).forEach(inp => {
+    const on = inp.value === value;
+    inp.checked = on;
+    inp.closest(".pill")?.classList.toggle("active", on);
+  });
+}
+
 function readChecks(name) {
   return Array.from(document.querySelectorAll(`input[name="${CSS.escape(name)}"]:checked`)).map(x => x.value);
 }
@@ -353,7 +390,7 @@ function refreshModelList(keepSelection = true) {
 
 /* ---------- Mini per-model scatter (accuracy vs runtime) (Explore only) ---------- */
 function palette(i) {
-  const base = ["#4c6ef5", "#16a34a", "#f59e0b", "#ef4444", "#06b6d4", "#a855f7", "#f97316", "#10b981"];
+  const base = ["#C96442", "#6E8B6A", "#C9A24B", "#5B7A99", "#A6573F", "#8E6E9E", "#4C8C7D", "#B07A3C"];
   return base[i % base.length];
 }
 
@@ -404,7 +441,7 @@ function drawArtifactScatter(canvas, points) {
   const innerH = Math.max(1, h - pad.t - pad.b);
 
   if (!points.length) {
-    ctx.fillStyle = "rgba(31,41,55,0.65)";
+    ctx.fillStyle = "rgba(31,30,28,0.62)";
     ctx.font = "13px system-ui, -apple-system, Segoe UI, Roboto, Arial";
     ctx.fillText("No artifact points available.", pad.l, pad.t + 24);
     ARTIFACT_POINTS = [];
@@ -425,9 +462,9 @@ function drawArtifactScatter(canvas, points) {
 
   const ticks = 4;
 
-  ctx.strokeStyle = "rgba(17,24,39,0.08)";
+  ctx.strokeStyle = "rgba(31,30,28,0.08)";
   ctx.lineWidth = 1;
-  ctx.fillStyle = "rgba(31,41,55,0.75)";
+  ctx.fillStyle = "rgba(31,30,28,0.72)";
   ctx.font = "12px system-ui, -apple-system, Segoe UI, Roboto, Arial";
 
   for (let i = 0; i <= ticks; i++) {
@@ -447,7 +484,7 @@ function drawArtifactScatter(canvas, points) {
     ctx.fillText(`${Math.round(val)} ms`, tx - 18, h - 16);
   }
 
-  ctx.fillStyle = "rgba(31,41,55,0.60)";
+  ctx.fillStyle = "rgba(31,30,28,0.52)";
   ctx.font = "11px system-ui, -apple-system, Segoe UI, Roboto, Arial";
   ctx.fillText("Runtime total (ms) — wheel=zoom • drag=pan • dblclick=reset", pad.l, h - 4);
   ctx.fillText("Accuracy", pad.l, 12);
@@ -530,13 +567,39 @@ function renderDetails(modelKey, cfgId, fmt, compute, purpose, artifact) {
   const cfgTargets = safeList(cfg.targets, safeList(m.targets, []));
   const sizeM = m.model_size_m;
 
-  const arts = getArtifactsFor(modelKey, fmt);
+  const arts = benchmarkedArtifactsFor(modelKey, fmt);
   const safeArt = (artifact && arts.includes(artifact)) ? artifact : (arts[0] || "default");
   const { estimate: est, hil } = metricsForArtifact(cfg.metrics || {}, safeArt);
 
   const onnxRepo = m.onnx_repo || "";
   const ggufRepo = m.gguf_repo || "";
 
+  // Est-vs-HIL throughput (tok/s is the metric currently populated) + accuracy
+  // for the selected precision (HIL-first). These drive the small graph and the
+  // accuracy column of the merged block.
+  const estTok = tokSOf(est);
+  const hilTok = tokSOf(hil);
+  const maxTok = Math.max(estTok || 0, hilTok || 0) || 1;
+  const pctOf = (t) => (t != null && t > 0) ? Math.max(6, Math.round((t / maxTok) * 100)) : 0;
+  const estPct = pctOf(estTok), hilPct = pctOf(hilTok);
+  const graphHasData = (estTok != null || hilTok != null);
+
+  let acc = accuracyFromBlock(hil), accSrc = "HIL";
+  if (acc == null) { acc = accuracyFromBlock(est); accSrc = "Estimate"; }
+  const accIsPct = acc != null && acc <= 1.5;
+  const accText = acc == null ? "—" : `${accIsPct ? Math.round(acc * 1000) / 10 : Math.round(acc * 10) / 10}${accIsPct ? "%" : ""}`;
+  const updated = (hil && hil.last_updated) || (est && est.last_updated) || null;  // benchmark freshness (HIL-first)
+
+  const barCol = (label, tok, pct, cls) => `
+              <div class="pm-bar-col">
+                <div class="pm-bar-val">${tok != null ? esc(Math.round(tok * 10) / 10) : "—"}</div>
+                <div class="pm-bar-track">
+                  <div class="pm-bar-spacer" style="flex-grow:${100 - pct}"></div>
+                  ${tok != null ? `<div class="pm-bar-fill ${cls}" style="flex-grow:${pct}"></div>` : ""}
+                </div>
+                <div class="pm-bar-lbl">${label}</div>
+              </div>`;
+
   return `
     <div class="md">
       <h3>Summary</h3>
@@ -552,47 +615,54 @@ function renderDetails(modelKey, cfgId, fmt, compute, purpose, artifact) {
             <li><b>Config Targets:</b> <code>${esc(cfgTargets.join(", ") || "—")}</code></li>
             <li><b>Format:</b> <code>${esc(fmt)}</code></li>
             <li><b>Compute:</b> <code>${esc(compute)}</code></li>
-            <li><b>Precision/Quant:</b> <code>${esc(safeArt)}</code></li>
           </ul>
+        </div>
+
+        <div class="repo-buttons" aria-label="Model repos">
+          ${onnxRepo ? `<a class="link" href="${esc(hfModelUrl(onnxRepo))}" target="_blank" rel="noopener noreferrer">Open ONNX Repo ↗</a>` : `<span class="link link-na" aria-disabled="true">No ONNX repo available</span>`}
+          ${ggufRepo ? `<a class="link" href="${esc(hfModelUrl(ggufRepo))}" target="_blank" rel="noopener noreferrer">Open GGUF Repo ↗</a>` : `<span class="link link-na" aria-disabled="true">No GGUF repo available</span>`}
+        </div>
+      </div>
 
-          <div style="margin-top:12px;">
-            <div class="subtle" style="font-weight:950; margin-bottom:8px;">
-              Available precision/quant (click to select)
-            </div>
+      <h3 class="pm-heading">Precision &amp; performance</h3>
 
-            <div class="chips" role="list" aria-label="Available precision/quant">
-              ${arts.length
-                ? arts.map(a => `
+      <div class="pm-block">
+        <div class="pm-rail" role="group" aria-label="Available precision/quant — select to view its metrics">
+          <div class="pm-rail-cap">Precision / Quant</div>
+          <div class="pm-rail-list">
+            ${arts.length
+              ? arts.map(a => {
+                  const on = a === safeArt;
+                  return `
                   <button type="button"
-                    class="chip-btn ${a === safeArt ? "active" : ""}"
+                    class="chip-btn pm-opt ${on ? "active" : ""}"
                     data-artifact="${esc(a)}"
-                    aria-pressed="${a === safeArt ? "true" : "false"}"
+                    aria-pressed="${on ? "true" : "false"}"
                     title="Select ${esc(a)}"
-                  >${esc(a)}</button>
-                `).join("")
-                : `<span class="subtle">—</span>`
-              }
-            </div>
+                  >
+                    <span class="pm-opt-dot" aria-hidden="true"></span>
+                    <span class="pm-opt-label">${esc(a)}</span>
+                    <span class="pm-opt-badge" aria-hidden="true">Selected</span>
+                  </button>`;
+                }).join("")
+              : `<div class="pm-opt-empty subtle">No precision/quant variants</div>`
+            }
           </div>
         </div>
 
-        <div class="repo-buttons" aria-label="Model repos">
-          ${onnxRepo ? `<a class="link" href="${esc(hfModelUrl(onnxRepo))}" target="_blank" rel="noopener noreferrer">Open ONNX Repo ↗</a>` : `<span class="subtle">ONNX: —</span>`}
-          ${ggufRepo ? `<a class="link" href="${esc(hfModelUrl(ggufRepo))}" target="_blank" rel="noopener noreferrer">Open GGUF Repo ↗</a>` : `<span class="subtle">GGUF: —</span>`}
+        <div class="metric-card pm-graph" aria-live="polite">
+          <div class="metric-card-title">Est vs HIL · tok/s</div>
+          ${graphHasData
+            ? `<div class="pm-bars">${barCol("Est", estTok, estPct, "est")}${barCol("HIL", hilTok, hilPct, "hil")}</div>${updated ? `<div class="pm-graph-foot">Updated ${esc(updated)}</div>` : ""}`
+            : `<div class="pm-graph-empty subtle">No throughput yet</div>`}
         </div>
-      </div>
 
-      <h3>Metrics (POC)</h3>
-      <div class="metric-banner">Precision/Quant: <code>${esc(safeArt)}</code></div>
-
-      <div class="metric-grid">
-        <div class="metric-card">
-          <div class="metric-card-title">Estimate</div>
-          <pre class="metric-pre">${esc(metricSummaryV2(est))}</pre>
-        </div>
-        <div class="metric-card">
-          <div class="metric-card-title">HIL</div>
-          <pre class="metric-pre">${esc(metricSummaryV2(hil))}</pre>
+        <div class="metric-card pm-acc" aria-live="polite">
+          <div class="metric-card-title">Accuracy</div>
+          <div class="pm-acc-body">
+            <div class="pm-acc-num ${acc == null ? "empty" : ""}">${esc(accText)}</div>
+            <div class="pm-acc-sub">${acc == null ? "Not published yet" : esc(accSrc) + " · " + esc(safeArt)}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -640,9 +710,8 @@ function buildArtifactAccuracyRuntimePoints(modelKey, cfgId, fmt) {
 }
 
 /**
- * mode:
- *  - "explore": includes Accuracy vs Runtime plot
- *  - "modal": omits that section (requested)
+ * mode: "explore" (Deploy result card) or "modal" (model details).
+ * Only differs in the Download heading's top spacing.
  */
 function renderActions(modelKey, fmt, compute, purpose, artifact, cfgId, mode = "explore") {
   const m = KEY_TO_MODEL[modelKey];
@@ -655,52 +724,10 @@ function renderActions(modelKey, fmt, compute, purpose, artifact, cfgId, mode =
   const include = downloadIncludePattern(fmt, artifact);
   const cmd = repoId ? `hf download ${repoId} --repo-type=model --include "${include}"` : "";
 
-  const sp = (LINKS || {}).spaces || {};
-  let toolSection = "";
-  if (purpose === "ORT Benchmarking") {
-    const sid = sp.ort_benchmark;
-    toolSection = sid
-      ? `<h3>Tool</h3><a class="link" href="${esc(hfSpaceUrl(sid))}" target="_blank" rel="noopener noreferrer">Open ORT Benchmark Space ↗</a>`
-      : `<h3>Tool</h3><i>ORT Benchmark Space: (set links.json)</i>`;
-  } else if (purpose === "llama.cpp Benchmarking") {
-    const sid = sp.gguf_llamacpp_benchmark;
-    toolSection = sid
-      ? `<h3>Tool</h3><a class="link" href="${esc(hfSpaceUrl(sid))}" target="_blank" rel="noopener noreferrer">Open llama.cpp Benchmark Space ↗</a>`
-      : `<h3>Tool</h3><i>llama.cpp Benchmark Space: (set links.json)</i>`;
-  }
-
-  let accRuntimeSection = "";
-  if (mode === "explore") {
-    const { points, allAccMissing } = buildArtifactAccuracyRuntimePoints(modelKey, cfgId, fmt);
-    window.__artifactPlotPoints = points;
-
-    const accWarn = allAccMissing ? `
-      <div class="note note-warn tight" style="margin-top:10px;">
-        <b>Accuracy not yet published.</b> Plot uses <b>0</b> for accuracy until values are available.
-      </div>
-    ` : "";
-
-    accRuntimeSection = `
-      <h3 style="margin-top:14px;">Precision/Quant — Accuracy vs Runtime</h3>
-      ${accWarn}
-      <div class="mini-chart-wrap">
-        <div class="mini-chart-head">
-          <div class="mini-chart-title">Accuracy vs Runtime total</div>
-          <div class="mini-chart-subtle">${points.length ? `${points.length} variant(s)` : "No points"}</div>
-        </div>
-        <div style="padding:10px;">
-          <canvas id="artifactCanvas" style="width:100%; height:260px;"></canvas>
-          <div id="artifactTooltip" class="mini-tooltip"></div>
-        </div>
-      </div>
-    `;
-  }
-
   return `
     <div class="md">
-      <h3>Download</h3>
+      <h3${mode === "explore" ? ' style="margin-top:18px;"' : ""}>Download</h3>
       ${repoId ? `
-        <div class="subtle tight">Downloads files matching: <code>${esc(include)}</code></div>
         <div class="cmd-row">
           <pre>${esc(cmd)}</pre>
           <button class="copy-btn" type="button"
@@ -709,15 +736,11 @@ function renderActions(modelKey, fmt, compute, purpose, artifact, cfgId, mode =
             aria-label="Copy download command"
             title="Copy to clipboard"
           >
-            <span class="icon">📋</span>
+            <span class="icon"><svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><rect x="4" y="3" width="9" height="11" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 3.2V2.2A1.2 1.2 0 0 1 7.2 1h1.6A1.2 1.2 0 0 1 10 2.2v1" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></span>
             <span class="txt">Copy</span>
           </button>
         </div>
       ` : `<i>Repo not set for the selected format (${esc(fmt)}).</i>`}
-
-      ${accRuntimeSection}
-
-      ${toolSection ? `<div style="margin-top:12px;">${toolSection}</div>` : ""}
     </div>
   `;
 }
@@ -729,13 +752,15 @@ function setActiveSection(targetId) {
   $$(".nav-item").forEach(btn => btn.classList.remove("active"));
   document.querySelector(`.nav-item[data-target="${CSS.escape(targetId)}"]`)?.classList.add("active");
 
-  if (targetId === "sec-all") requestAnimationFrame(() => setupPinnedColumns($("modelsTable"), 4));
-  if (targetId === "sec-scatter") requestAnimationFrame(() => updateScatter());
+  if (targetId === "sec-overview") requestAnimationFrame(redrawConstellation);
+  if (targetId === "sec-catalog" && CATALOG_STATE.view === "table") {
+    requestAnimationFrame(() => setupPinnedColumns($("modelsTable"), 1));
+  }
 }
 
 /* ---------- Explore pipeline ---------- */
 function ensureExploreArtifact(modelKey, fmt) {
-  const arts = getArtifactsFor(modelKey, fmt);
+  const arts = benchmarkedArtifactsFor(modelKey, fmt);
   if (!arts.length) { EXPLORE_SELECTED_ARTIFACT = null; return null; }
   if (!EXPLORE_SELECTED_ARTIFACT || !arts.includes(EXPLORE_SELECTED_ARTIFACT)) EXPLORE_SELECTED_ARTIFACT = arts[0];
   return EXPLORE_SELECTED_ARTIFACT;
@@ -750,6 +775,30 @@ function updateExploreFromFilters() {
   refreshModelList(false);
 }
 
+/* Pick a format the model actually provides, keeping the current one when it's
+   valid. Prefers artifacts (which drive the precision selector + graph) and
+   falls back to repo presence only when a model lists no artifacts at all. */
+function bestFormatForModel(m, preferred) {
+  if (!m) return preferred;
+  // Prefer a format that has at least one benchmarked variant to display.
+  const onnxBench = safeList(m.onnx_artifacts, []).some(a => artifactHasBenchmark(m, a));
+  const ggufBench = safeList(m.gguf_artifacts, []).some(a => artifactHasBenchmark(m, a));
+  if (onnxBench || ggufBench) {
+    if (preferred === "ONNX" && onnxBench) return "ONNX";
+    if (preferred === "GGUF" && ggufBench) return "GGUF";
+    return onnxBench ? "ONNX" : "GGUF";
+  }
+  // No benchmarked variants anywhere — fall back to artifact/repo presence so
+  // the download command still resolves.
+  const hasOnnx = safeList(m.onnx_artifacts, []).length > 0 || !!m.onnx_repo;
+  const hasGguf = safeList(m.gguf_artifacts, []).length > 0 || !!m.gguf_repo;
+  if (preferred === "ONNX" && hasOnnx) return "ONNX";
+  if (preferred === "GGUF" && hasGguf) return "GGUF";
+  if (hasOnnx) return "ONNX";
+  if (hasGguf) return "GGUF";
+  return preferred;
+}
+
 function updateExploreOnModelChange() {
   const key = $("modelKey").value;
   const m = KEY_TO_MODEL[key];
@@ -758,7 +807,17 @@ function updateExploreOnModelChange() {
   const def = ids.length ? ids[0] : null;
   fillSelect($("hwCfg"), ids, def);
 
-  const fmt = readRadio("fmt", "ONNX");
+  /* Keep the format valid for the chosen model. Without this, selecting a model
+     that lacks the current format yields no artifacts/repo for it, so only the
+     (format-independent) Summary appears to refresh while the precision/quant,
+     graph, accuracy and download stay empty. */
+  const prevFmt = readRadio("fmt", "ONNX");
+  const fmt = bestFormatForModel(m, prevFmt);
+  if (fmt !== prevFmt) {
+    setRadioValue("fmt", fmt);
+    setRadioValue("purpose", defaultPurposeForFormat(fmt));
+  }
+
   ensureExploreArtifact(key, fmt);
   updateExploreAny();
 }
@@ -792,27 +851,6 @@ function updateExploreAny() {
 
   $("details").innerHTML = renderDetails(key, cfgId, fmt, compute, purpose, artifact);
   $("actions").innerHTML = renderActions(key, fmt, compute, purpose, artifact, cfgId, "explore");
-
-  requestAnimationFrame(() => {
-    const canvas = $("artifactCanvas");
-    if (!canvas) return;
-
-    drawArtifactScatter(canvas, window.__artifactPlotPoints || []);
-
-    const tip = $("artifactTooltip");
-    if (!tip) return;
-
-    if (canvas.dataset.bound !== "1") {
-      canvas.dataset.bound = "1";
-
-      canvas.addEventListener("mousemove", (evt) => {
-        const hit = hitTestArtifact(evt, canvas);
-        if (!hit) return hideArtifactTip(tip);
-        showArtifactTip(hit, evt, tip, canvas);
-      });
-      canvas.addEventListener("mouseleave", () => hideArtifactTip(tip));
-    }
-  });
 }
 
 /* ---------- Modal (All Models -> Details) ---------- */
@@ -820,7 +858,7 @@ function updateModalAny() {
   if (!MODAL_CTX) return;
   const { key, cfgId, fmt, compute, purpose } = MODAL_CTX;
 
-  const arts = getArtifactsFor(key, fmt);
+  const arts = benchmarkedArtifactsFor(key, fmt);
   if (!arts.length) MODAL_SELECTED_ARTIFACT = null;
   else if (!MODAL_SELECTED_ARTIFACT || !arts.includes(MODAL_SELECTED_ARTIFACT)) MODAL_SELECTED_ARTIFACT = arts[0];
 
@@ -829,8 +867,6 @@ function updateModalAny() {
 }
 
 /* ---------- All Models (table) ---------- */
-let FULL_ROWS = [];
-let FILTERED_ROWS = [];
 
 function defaultRowFmt(model) {
   return model.onnx_repo ? "ONNX" : (model.gguf_repo ? "GGUF" : "ONNX");
@@ -852,7 +888,6 @@ function buildTableRows(models) {
     const defArt = defaultRowArtifact(m, fmt);
 
     const { estimate, hil } = metricsForArtifact(cfg.metrics || {}, defArt);
-    const cfgTargets = safeList(cfg.targets, safeList(m.targets, []));
 
     const detailsBtn = `<button class="mini-btn" type="button"
       data-open-model="1"
@@ -866,11 +901,9 @@ function buildTableRows(models) {
       _cfg: cfg.id || "",
       _fmt: fmt,
 
-      "Name": esc(m.display_name || m.key || ""),
+      "Name": `<span class="tc-name"><span class="mc-logo">${designerOf(m).svg}</span><span class="tc-name-txt">${esc(m.display_name || m.key || "")}</span></span>`,
       "Modality": esc(m.modality || "LLM"),
-      "Task": "",
-      "Format": formatBadgesHTML(m),
-      "Supported HW": hwBadgesHTML(cfgTargets.length ? cfgTargets : safeList(m.targets, [])),
+      "Task": esc(safeList(m.tasks, [])[0] || "—"),
       "Repo": repoButtonsSmallHTML(m),
       "Precision/Quant": artifactsBadgesHTML(m),
       "Estimate": metricBriefHTML(estimate),
@@ -882,38 +915,6 @@ function buildTableRows(models) {
   return rows;
 }
 
-function applyAllFilters(rows, modality, formatFilter, hwFilter, needEst, needHil, searchQ) {
-  let out = rows.slice();
-
-  if (modality !== "All") out = out.filter(r => r["Modality"] === modality);
-
-  const fmtList = safeList(formatFilter, []);
-  if (fmtList.length) {
-    out = out.filter(r => fmtList.some(f => String(r["Format"] || "").toUpperCase().includes(f)));
-  }
-
-  const hwList = safeList(hwFilter, []);
-  if (hwList.length) {
-    out = out.filter(r => hwList.some(h => String(r["Supported HW"] || "").toUpperCase().includes(h)));
-  }
-
-  if (needEst) out = out.filter(r => !String(r["Estimate"] || "").includes("—"));
-  if (needHil) out = out.filter(r => !String(r["HIL"] || "").includes("—"));
-
-  const q = String(searchQ || "").trim().toLowerCase();
-  if (q) {
-    out = out.filter(r => {
-      const flat = Object.entries(r)
-        .filter(([k]) => !k.startsWith("_"))
-        .map(([, v]) => String(v ?? ""))
-        .join(" | ")
-        .toLowerCase();
-      return flat.includes(q);
-    });
-  }
-  return out;
-}
-
 function renderTable(rows) {
   const table = $("modelsTable");
   if (!table) return;
@@ -927,30 +928,34 @@ function renderTable(rows) {
   }
 
   const cols = Object.keys(rows[0]).filter(k => !k.startsWith("_"));
-  const pinCount = 4; // Name, Modality, Task, Format
+  const pinCount = 1; // pin only the identifier (Name) column
 
   thead.innerHTML = `<tr>${cols.map((c, i) => {
     const isPinned = i < pinCount;
     const isDetails = (c === "");
-    const cls = `${isPinned ? "pin" : ""}${isDetails ? " details-col" : ""}`.trim();
+    const isName = (c === "Name");
+    const cls = `${isPinned ? "pin" : ""}${isDetails ? " details-col" : ""}${isName ? " cell-name" : ""}`.trim();
     const pinAttr = isPinned ? ` data-pin="${i}"` : "";
     const header = isDetails ? "" : esc(c);
     return `<th class="${cls}"${pinAttr}>${header}</th>`;
   }).join("")}</tr>`;
 
-  const htmlCols = new Set(["Format", "Supported HW", "Repo", "Precision/Quant", "Estimate", "HIL", ""]);
+  const htmlCols = new Set(["Name", "Repo", "Precision/Quant", "Estimate", "HIL", ""]);
 
   tbody.innerHTML = rows.map((r, ri) => {
     return `<tr data-row="${ri}" data-key="${esc(r._key)}" data-cfg="${esc(r._cfg)}" data-fmt="${esc(r._fmt)}">${
       cols.map((c, i) => {
         const isPinned = i < pinCount;
         const isDetails = (c === "");
-        const cls = `${isPinned ? "pin" : ""}${isDetails ? " details-col" : ""}`.trim();
+        const isName = (c === "Name");
+        const cls = `${isPinned ? "pin" : ""}${isDetails ? " details-col" : ""}${isName ? " cell-name" : ""}`.trim();
         const pinAttr = isPinned ? ` data-pin="${i}"` : "";
+        // data-label drives the stacked-card layout's field labels on narrow screens
+        const labelAttr = ` data-label="${esc(c)}"`;
         const val = r[c];
 
-        if (htmlCols.has(c)) return `<td class="${cls}"${pinAttr}>${val ?? ""}</td>`;
-        return `<td class="${cls}"${pinAttr}>${esc(val)}</td>`;
+        if (htmlCols.has(c)) return `<td class="${cls}"${pinAttr}${labelAttr}>${val ?? ""}</td>`;
+        return `<td class="${cls}"${pinAttr}${labelAttr}>${esc(val)}</td>`;
       }).join("")
     }</tr>`;
   }).join("\n");
@@ -976,19 +981,6 @@ function setupPinnedColumns(table, count) {
   }
 }
 
-function updateAllModels() {
-  const modality = $("t_modality").value;
-  const fmtList = readChecks("t_format");
-  const hwList = readChecks("t_hw");
-  const needEst = $("t_need_est").checked;
-  const needHil = $("t_need_hil").checked;
-  const searchQ = $("t_search").value;
-
-  FILTERED_ROWS = applyAllFilters(FULL_ROWS, modality, fmtList, hwList, needEst, needHil, searchQ);
-  $("t_status").innerHTML = `Showing <b>${FILTERED_ROWS.length}</b> / <b>${FULL_ROWS.length}</b> models.`;
-  renderTable(FILTERED_ROWS);
-}
-
 /* ---------- Model modal ---------- */
 function openModelModal(modelKey, cfgId, fmt) {
   const m = KEY_TO_MODEL[modelKey];
@@ -1022,224 +1014,559 @@ function closeModelModal() {
   MODAL_SELECTED_ARTIFACT = null;
 }
 
-/* ---------- Scatter tab (unchanged) ---------- */
-function latencyForCompute(block, compute) {
+/* ====================================================================== */
+/* OVERVIEW — constellation (size vs throughput)                          */
+/* ====================================================================== */
+const FAMILY_PALETTE = ["#C96442", "#6E8B6A", "#C9A24B", "#5B7A99", "#A6573F", "#8E6E9E", "#4C8C7D", "#B07A3C", "#9A6B6B", "#7C8B5A"];
+const COLOR_CACHE = {};
+function colorFor(label) {
+  if (COLOR_CACHE[label] != null) return COLOR_CACHE[label];
+  const c = FAMILY_PALETTE[Object.keys(COLOR_CACHE).length % FAMILY_PALETTE.length];
+  COLOR_CACHE[label] = c;
+  return c;
+}
+
+function allArtifactsOf(m) {
+  return uniqueSorted([...safeList(m.onnx_artifacts, []), ...safeList(m.gguf_artifacts, [])]);
+}
+function fmtOfArtifact(m, art) {
+  if (safeList(m.gguf_artifacts, []).includes(art)) return "GGUF";
+  if (safeList(m.onnx_artifacts, []).includes(art)) return "ONNX";
+  return "—";
+}
+function pickBlock(cfgMetrics, art, source) {
+  const { estimate, hil } = metricsForArtifact(cfgMetrics || {}, art);
+  if (source === "HIL") return hil ? { block: hil, source: "HIL" } : null;
+  if (source === "Estimate") return estimate ? { block: estimate, source: "Estimate" } : null;
+  if (hil) return { block: hil, source: "HIL" };
+  if (estimate) return { block: estimate, source: "Estimate" };
+  return null;
+}
+function tokSOf(block) {
   if (!block) return null;
-  const unit = block[(compute || "").toLowerCase()];
-  if (!unit) return null;
-  const lat = unit.latency_ms_p50;
-  return (lat != null) ? Number(lat) : null;
+  let t = (block.total && block.total.tok_s != null) ? block.total.tok_s : null;
+  if (t == null) t = block.npu?.tok_s ?? block.cpu?.tok_s ?? block.dsp?.tok_s ?? null;
+  return (t != null && isFinite(Number(t))) ? Number(t) : null;
 }
 
-function buildScatterRows(arch, modality, variant, compute, metricSource, colorBy, pointMode) {
-  const rows = [];
+const AXES = {
+  tok: { get: p => p.tok, label: "Throughput (tok/s)", tick: v => `${Math.round(v * 10) / 10}` },
+  size: { get: p => p.sizeM, label: "Model size", tick: v => (v >= 1000 ? `${Math.round(v / 100) / 10}B` : `${Math.round(v)}M`) },
+};
 
+function buildConstellationPoints(source) {
+  const pts = [];
   for (const m of CATALOG) {
-    if (arch !== "All" && (m.architecture || "Unknown") !== arch) continue;
-    if (modality !== "All" && (m.modality || "LLM") !== modality) continue;
-    if (variant !== "All" && (m.variant || "Default") !== variant) continue;
-
-    const sizeM = m.model_size_m;
-    if (sizeM == null) continue;
-
-    const cfgs = safeList(m.hardware_configs, []);
-    if (!cfgs.length) continue;
-
-    const defArt = safeList(m.onnx_artifacts, [])[0] || safeList(m.gguf_artifacts, [])[0] || null;
-
-    const addRow = (cfg, suffix = "") => {
-      const { estimate, hil } = metricsForArtifact(cfg.metrics || {}, defArt);
-
-      let block = null;
-      let label = "—";
-      if (metricSource === "Estimate") { block = estimate; label = "Estimate"; }
-      else if (metricSource === "HIL") { block = hil; label = "HIL"; }
-      else { block = hil || estimate; label = hil ? "HIL" : (estimate ? "Estimate" : "—"); }
-
-      if (!block) return;
-
-      const lat = latencyForCompute(block, compute);
-      if (lat == null) return;
-
-      const fmtBadge = (m.onnx_repo ? "ONNX" : "") + (m.gguf_repo ? (m.onnx_repo ? "+GGUF" : "GGUF") : "");
-      const hwBadge = safeList(cfg.targets, safeList(m.targets, [])).join("+") || "—";
-
-      let colorVal = m.modality || "LLM";
-      if (colorBy === "Architecture") colorVal = m.architecture || "Unknown";
-      else if (colorBy === "Modality") colorVal = m.modality || "LLM";
-      else if (colorBy === "Variant") colorVal = m.variant || "Default";
-      else if (colorBy === "Format") colorVal = fmtBadge || "—";
-      else if (colorBy === "Supported HW") colorVal = hwBadge || "—";
-
-      rows.push({
-        _key: m.key || "",
-        _cfg: cfg.id || "",
-        Model: (m.display_name || m.key || "") + suffix,
-        "Size (M)": Number(sizeM),
-        "Runtime p50 (ms)": Number(lat),
-        "Runtime Source": label,
-        Compute: compute,
-        "HW Config": cfg.id || "",
-        "HW Label": cfg.label || cfg.id || "",
-        Architecture: m.architecture || "Unknown",
-        Modality: m.modality || "LLM",
-        Variant: m.variant || "Default",
-        Color: String(colorVal)
-      });
-    };
-
-    if (pointMode === "Per hardware config") {
-      for (const cfg of cfgs) addRow(cfg);
-    } else {
-      let bestCfg = null;
-      let bestLat = null;
-      for (const cfg of cfgs) {
-        const { estimate, hil } = metricsForArtifact(cfg.metrics || {}, defArt);
-        const block = (metricSource === "Estimate") ? estimate :
-                      (metricSource === "HIL") ? hil :
-                      (hil || estimate);
-        if (!block) continue;
-        const lat = latencyForCompute(block, compute);
-        if (lat == null) continue;
-        if (bestLat == null || lat < bestLat) { bestLat = lat; bestCfg = cfg; }
+    const sizeM = (m.model_size_m != null) ? Number(m.model_size_m) : null;
+    for (const cfg of safeList(m.hardware_configs, [])) {
+      for (const art of allArtifactsOf(m)) {
+        const got = pickBlock(cfg.metrics || {}, art, source);
+        if (!got) continue;
+        const tok = tokSOf(got.block);
+        if (tok == null) continue;
+        pts.push({
+          key: m.key, cfgId: cfg.id, fmt: fmtOfArtifact(m, art),
+          name: m.display_name || m.key, family: m.architecture || "Unknown",
+          quant: art, target: safeList(cfg.targets, safeList(m.targets, []))[0] || "—",
+          hwLabel: cfg.label || cfg.id || "—", sizeM, tok, source: got.source,
+        });
       }
-      if (bestCfg && bestLat != null) addRow(bestCfg, " (best)");
     }
   }
+  return pts;
+}
+function colorKey(p, colorBy) {
+  return colorBy === "quant" ? p.quant : colorBy === "format" ? p.fmt : colorBy === "target" ? p.target : p.family;
+}
 
-  rows.sort((a, b) => (a["Size (M)"] - b["Size (M)"]) || (a["Runtime p50 (ms)"] - b["Runtime p50 (ms)"]));
-  return rows;
+let CSTL_HIT = [];
+
+function hitTest(list, evt, canvas) {
+  const rect = canvas.getBoundingClientRect();
+  const x = evt.clientX - rect.left, y = evt.clientY - rect.top;
+  let best = null, bestD = Infinity;
+  for (const p of list) {
+    const dx = x - p.x, dy = y - p.y, d = dx * dx + dy * dy;
+    if (d <= p.r * p.r && d < bestD) { best = p; bestD = d; }
+  }
+  return best;
 }
 
-let SCATTER_POINTS = [];
-function niceCeil(v) {
-  const x = (v && isFinite(v)) ? v : 1;
-  const pow = Math.pow(10, Math.floor(Math.log10(x || 1)));
-  const n = x / pow;
-  let nice = 1;
-  if (n <= 1) nice = 1;
-  else if (n <= 2) nice = 2;
-  else if (n <= 5) nice = 5;
-  else nice = 10;
-  return nice * pow;
-}
-function paletteFor(categories) {
-  const base = ["#4c6ef5","#16a34a","#f59e0b","#ef4444","#06b6d4","#a855f7","#f97316","#10b981","#3b82f6","#64748b"];
-  const map = {}; let i = 0;
-  for (const c of categories) { map[c] = base[i % base.length]; i++; }
-  return map;
-}
-function drawScatter(canvas, rows) {
+function drawConstellation(canvas, points, opts) {
   const ctx = canvas.getContext("2d");
-  const rect = canvas.getBoundingClientRect();
+  const rect = canvas.parentElement.getBoundingClientRect();
   const dpr = window.devicePixelRatio || 1;
-  canvas.width = Math.max(1, Math.floor(rect.width * dpr));
-  canvas.height = Math.max(1, Math.floor(rect.height * dpr));
-  ctx.setTransform(dpr,0,0,dpr,0,0);
-
-  const w = rect.width, h = rect.height;
-  ctx.clearRect(0,0,w,h);
+  const h = canvas.clientHeight || 460, w = rect.width;
+  canvas.width = Math.max(1, Math.floor(w * dpr));
+  canvas.height = Math.max(1, Math.floor(h * dpr));
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, w, h);
 
-  const pad = { l: 62, r: 18, t: 18, b: 52 };
+  const pad = { l: 66, r: 18, t: 22, b: 48 };
   const innerW = Math.max(1, w - pad.l - pad.r);
   const innerH = Math.max(1, h - pad.t - pad.b);
+  const ax = AXES[opts.xKey] || AXES.tok;
+  const ay = AXES[opts.yKey] || AXES.size;
+  const txt = "rgba(31,30,28,0.72)";
+  ctx.font = "12px system-ui, -apple-system, Segoe UI, Roboto, Arial";
 
-  if (!rows.length) { SCATTER_POINTS = []; return; }
-
-  const xs = rows.map(r => r["Size (M)"]);
-  const ys = rows.map(r => r["Runtime p50 (ms)"]);
-  const xMin = Math.min(...xs), xMax = Math.max(...xs);
-  const yMin = 0, yMax = niceCeil(Math.max(...ys));
+  CSTL_HIT = [];
+  if (!points.length) {
+    ctx.fillStyle = txt;
+    ctx.fillText("No data points for this selection.", pad.l, pad.t + 24);
+    return;
+  }
 
-  const xOf = (x) => (xMax === xMin) ? pad.l + innerW/2 : pad.l + ((x - xMin)/(xMax - xMin))*innerW;
-  const yOf = (y) => pad.t + innerH - ((y - yMin)/(yMax - yMin))*innerH;
+  const xs = points.map(ax.get).filter(v => v != null && isFinite(v));
+  const ys = points.map(ay.get).filter(v => v != null && isFinite(v));
+  let xMin = Math.min(0, ...xs), xMax = Math.max(...xs);
+  let yMin = Math.min(0, ...ys), yMax = Math.max(...ys);
+  if (xMax - xMin < 1e-9) xMax = xMin + 1;
+  if (yMax - yMin < 1e-9) yMax = yMin + 1;
+  xMax += (xMax - xMin) * 0.08;
+  yMax += (yMax - yMin) * 0.12;
 
-  const cats = uniqueSorted(rows.map(r => r.Color));
-  const pal = paletteFor(cats);
+  const xOf = v => pad.l + ((v - xMin) / (xMax - xMin)) * innerW;
+  const yOf = v => pad.t + innerH - ((v - yMin) / (yMax - yMin)) * innerH;
 
-  SCATTER_POINTS = [];
-  for (const r of rows) {
-    const x = xOf(r["Size (M)"]);
-    const y = yOf(r["Runtime p50 (ms)"]);
-    const col = pal[r.Color] || "#4c6ef5";
+  const ticks = 4;
+  ctx.lineWidth = 1;
+  for (let i = 0; i <= ticks; i++) {
+    const ty = pad.t + innerH - (innerH * i / ticks);
+    ctx.strokeStyle = "rgba(31,30,28,0.08)";
+    ctx.beginPath(); ctx.moveTo(pad.l, ty); ctx.lineTo(pad.l + innerW, ty); ctx.stroke();
+    ctx.fillStyle = txt;
+    ctx.fillText(ay.tick(yMin + (yMax - yMin) * (i / ticks)), 8, ty + 4);
+  }
+  for (let i = 0; i <= ticks; i++) {
+    const tx = pad.l + (innerW * i / ticks);
+    ctx.fillStyle = txt;
+    ctx.fillText(ax.tick(xMin + (xMax - xMin) * (i / ticks)), tx - 12, h - 16);
+  }
+  ctx.fillStyle = "rgba(31,30,28,0.52)";
+  ctx.fillText(ax.label + " →", pad.l, h - 2);
+  ctx.fillText("↑ " + ay.label, 8, 14);
+
+  const maxSz = Math.max(1, ...points.map(p => p.sizeM || 0));
+  const rOf = s => 6 + 16 * Math.sqrt((s || 0) / maxSz);
+
+  points.forEach(p => {
+    const xv = ax.get(p), yv = ay.get(p);
+    if (xv == null || yv == null) return;
+    const x = xOf(xv), y = yOf(yv), r = rOf(p.sizeM);
+    const col = colorFor(colorKey(p, opts.colorBy));
+    ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2);
+    if (p.source === "HIL") { ctx.fillStyle = col + "C0"; ctx.fill(); ctx.strokeStyle = col; ctx.lineWidth = 1.5; ctx.stroke(); }
+    else { ctx.fillStyle = col + "33"; ctx.fill(); ctx.strokeStyle = col; ctx.lineWidth = 1.8; ctx.stroke(); }
+    CSTL_HIT.push({ x, y, r: Math.max(r, 10), data: p });
+  });
+}
 
-    ctx.beginPath();
-    ctx.fillStyle = col + "B3";
-    ctx.strokeStyle = col;
-    ctx.lineWidth = 1.5;
-    ctx.arc(x, y, 6.5, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
+function buildLegend(points, colorBy) {
+  const el = $("cstlLegend");
+  if (!el) return;
+  const seen = [];
+  for (const p of points) { const k = colorKey(p, colorBy); if (!seen.includes(k)) seen.push(k); }
+  el.innerHTML = seen.map(k =>
+    `<span class="legend-item"><span class="legend-dot" style="background:${colorFor(k)}"></span>${esc(k)}</span>`
+  ).join("") + `<span class="legend-item">● HIL&nbsp;&nbsp;◌ Estimate</span>`;
+}
+
+function redrawConstellation() {
+  const canvas = $("cstlCanvas");
+  if (!canvas) return;
+  const xKey = $("cstlX")?.value || "tok";
+  const yKey = $("cstlY")?.value || "size";
+  const colorBy = $("cstlColor")?.value || "family";
+  const srcRaw = readRadio("cstlSource", "Best available");
+  const source = (srcRaw === "HIL" || srcRaw === "Estimate") ? srcRaw : "Best";
+  const points = buildConstellationPoints(source);
+  drawConstellation(canvas, points, { xKey, yKey, colorBy });
+  buildLegend(points, colorBy);
+  const status = $("cstlStatus");
+  if (status) status.textContent = `${points.length} variant point(s) · ${srcRaw}`;
+}
+
+function fillStatTiles() {
+  const el = $("statTiles");
+  if (!el) return;
+  const variants = new Set();
+  for (const m of CATALOG) {
+    for (const cfg of safeList(m.hardware_configs, []))
+      for (const art of allArtifactsOf(m))
+        if (pickBlock(cfg.metrics || {}, art, "Best")) variants.add(`${m.key}|${art}`);
+  }
+  const tiles = [
+    [CATALOG.length, "Models"],
+    [variants.size, "Benchmarked variants"],
+  ];
+  el.innerHTML = tiles.map(([n, l]) =>
+    `<div class="stat-tile"><div class="stat-num">${esc(n)}</div><div class="stat-label">${esc(l)}</div></div>`
+  ).join("");
+}
+
+/* ---------- Recently-added carousel ---------- */
+const RECENT_WINDOW_DAYS = 31;
+
+function modelRecency(m) {
+  const c = m.created_at ? Date.parse(m.created_at) : NaN;
+  const u = m.last_modified ? Date.parse(m.last_modified) : NaN;
+  const v = [c, u].filter(x => !isNaN(x));
+  return v.length ? Math.max(...v) : NaN;
+}
+function timeAgo(ts) {
+  if (isNaN(ts)) return "";
+  const d = Math.floor((Date.now() - ts) / 86400000);
+  if (d <= 0) return "today";
+  if (d === 1) return "yesterday";
+  if (d < 30) return `${d} days ago`;
+  const mo = Math.round(d / 30);
+  return `${mo} month${mo > 1 ? "s" : ""} ago`;
+}
+function recentLabel(m) {
+  const c = m.created_at ? Date.parse(m.created_at) : NaN;
+  const u = m.last_modified ? Date.parse(m.last_modified) : NaN;
+  const cut = Date.now() - RECENT_WINDOW_DAYS * 86400000;
+  if (!isNaN(c) && c >= cut) return { isNew: true, text: `added ${timeAgo(c)}` };
+  if (!isNaN(u)) return { isNew: false, text: `updated ${timeAgo(u)}` };
+  return { isNew: false, text: "" };
+}
+function recentModels() {
+  const cut = Date.now() - RECENT_WINDOW_DAYS * 86400000;
+  return CATALOG
+    .filter(m => { const r = modelRecency(m); return !isNaN(r) && r >= cut; })
+    .sort((a, b) => modelRecency(b) - modelRecency(a));
+}
+function recentCardHTML(m) {
+  const col = colorFor(m.architecture || "Unknown");
+  const best = bestHilFirstVariantOf(m);
+  const firstCfg = safeFirstCfg(m);
+  const defFmt = m.gguf_repo ? "GGUF" : (m.onnx_repo ? "ONNX" : "GGUF");
+  const lbl = recentLabel(m);
+  const srcTag = best
+    ? (best.source === "HIL"
+        ? `<span class="rc-src rc-src-hil">HIL</span>`
+        : `<span class="rc-src rc-src-est">est</span>`)
+    : "";
+  const stat = best
+    ? `<div class="rc-stat"><b>${esc(Math.round(best.tok * 10) / 10)}</b> tok/s · ${esc(best.quant)} ${srcTag}</div>`
+    : `<div class="rc-stat empty">No throughput yet</div>`;
+  return `
+    <div class="model-card rc-card" data-card="1" data-key="${esc(m.key)}" data-cfg="${esc(firstCfg?.id || "")}" data-fmt="${esc(defFmt)}">
+      <div class="rc-meta ${lbl.isNew ? "is-new" : ""}">${lbl.isNew ? "✦" : "⟳"} ${esc(lbl.text)}</div>
+      ${designerRowHTML(m)}
+      <div class="mc-head">
+        <div class="mc-monogram" style="background:linear-gradient(135deg, ${col}, ${col}99)">${esc(monogramText(m))}</div>
+        <div style="min-width:0">
+          <div class="mc-title">${esc(m.display_name || m.key)}</div>
+          <div class="mc-sub">${esc(m.architecture || "")}${m.variant ? " · " + esc(m.variant) : ""}</div>
+        </div>
+      </div>
+      ${stat}
+    </div>`;
+}
+function renderRecentCarousel() {
+  const sec = $("recentSection"), track = $("recentTrack");
+  if (!sec || !track) return;
+  const list = recentModels();
+  if (!list.length) { sec.hidden = true; return; }
+  sec.hidden = false;
+  track.innerHTML = list.map(recentCardHTML).join("");
+  const sub = $("recentSub");
+  if (sub) sub.textContent = `${list.length} model${list.length > 1 ? "s" : ""} · last 30 days`;
+}
+
+function initOverview() {
+  fillStatTiles();
+  renderRecentCarousel();
+
+  const track = $("recentTrack");
+  $("recentPrev")?.addEventListener("click", () => track?.scrollBy({ left: -276, behavior: "smooth" }));
+  $("recentNext")?.addEventListener("click", () => track?.scrollBy({ left: 276, behavior: "smooth" }));
+  track?.addEventListener("click", (e) => {
+    if (e.target.closest("a")) return;
+    const card = e.target.closest('.model-card[data-card="1"]');
+    if (card) openModelModal(card.getAttribute("data-key"), card.getAttribute("data-cfg") || "", card.getAttribute("data-fmt") || "GGUF");
+  });
 
-    SCATTER_POINTS.push({ x, y, r: 10, row: r, color: col });
+  buildRadioGroup($("cstlSource"), "cstlSource", ["Best available", "HIL", "Estimate"], "Best available");
+  ["cstlX", "cstlY", "cstlColor"].forEach(id => $(id)?.addEventListener("change", redrawConstellation));
+  document.addEventListener("change", (e) => { if (e.target && e.target.name === "cstlSource") redrawConstellation(); });
+
+  const canvas = $("cstlCanvas");
+  if (canvas && canvas.dataset.bound !== "1") {
+    canvas.dataset.bound = "1";
+    const tip = $("cstlTooltip");
+    canvas.addEventListener("mousemove", (evt) => {
+      const hit = hitTest(CSTL_HIT, evt, canvas);
+      if (!hit || !tip) { if (tip) tip.style.display = "none"; return; }
+      const rect = canvas.parentElement.getBoundingClientRect();
+      const x = evt.clientX - rect.left, y = evt.clientY - rect.top;
+      const sz = hit.data.sizeM >= 1000 ? `${hit.data.sizeM / 1000}B` : `${hit.data.sizeM}M`;
+      tip.innerHTML = `<b>${esc(hit.data.name)}</b><br/>${esc(hit.data.quant)} · ${esc(hit.data.target)} · ${esc(hit.data.source)}<br/>${esc(Math.round(hit.data.tok * 10) / 10)} tok/s · ${esc(sz)}`;
+      tip.style.display = "block";
+      tip.style.left = `${Math.min(x + 14, rect.width - 250)}px`;
+      tip.style.top = `${Math.max(8, y - 10)}px`;
+    });
+    canvas.addEventListener("mouseleave", () => { if (tip) tip.style.display = "none"; });
+    canvas.addEventListener("click", (evt) => {
+      const hit = hitTest(CSTL_HIT, evt, canvas);
+      if (hit) openModelModal(hit.data.key, hit.data.cfgId, hit.data.fmt);
+    });
   }
-}
-function hitTestScatter(evt) {
-  const canvas = $("scatterCanvas");
-  if (!canvas) return null;
-  const rect = canvas.getBoundingClientRect();
-  const x = evt.clientX - rect.left;
-  const y = evt.clientY - rect.top;
-  let best = null, bestD2 = Infinity;
-  for (const p of SCATTER_POINTS) {
-    const dx = x - p.x, dy = y - p.y;
-    const d2 = dx*dx + dy*dy;
-    if (d2 <= p.r*p.r && d2 < bestD2) { best = p; bestD2 = d2; }
+  redrawConstellation();
+}
+
+/* ====================================================================== */
+/* CATALOG — card gallery + facet rail + table view                       */
+/* ====================================================================== */
+const SIZE_BUCKETS = [
+  { id: "≤1B", test: s => s != null && s <= 1000 },
+  { id: "1–4B", test: s => s != null && s > 1000 && s <= 4000 },
+  { id: "4–10B", test: s => s != null && s > 4000 && s <= 10000 },
+  { id: ">10B", test: s => s != null && s > 10000 },
+];
+const CATALOG_STATE = {
+  search: "", sort: "size_desc", view: "grid",
+  facets: { family: new Set(), size: new Set(), format: new Set(), target: new Set(), quant: new Set() },
+  hil: false,
+};
+
+function bestVariantBySource(m, source) {
+  let best = null;
+  for (const cfg of safeList(m.hardware_configs, [])) {
+    for (const art of allArtifactsOf(m)) {
+      const got = pickBlock(cfg.metrics || {}, art, source);
+      const tok = got ? tokSOf(got.block) : null;
+      if (tok == null) continue;
+      if (!best || tok > best.tok) {
+        best = { tok, quant: art, source: got.source, target: safeList(cfg.targets, safeList(m.targets, []))[0] || "—" };
+      }
+    }
   }
   return best;
 }
-function showTooltip(p, evt) {
-  const tip = $("scatterTooltip");
-  if (!tip || !p) return;
-  const wrap = $("scatterCanvas").parentElement;
-  const rect = wrap.getBoundingClientRect();
-  const x = evt.clientX - rect.left;
-  const y = evt.clientY - rect.top;
-  const r = p.row;
-  tip.innerHTML = `<b>${esc(r.Model)}<\/b><br/>
-    Size: ${esc(r["Size (M)"])}M<br/>
-    p50: ${esc(r["Runtime p50 (ms)"])} ms<br/>
-    HW: ${esc(r["HW Config"])} — ${esc(r["HW Label"])}<br/>
-    Source: ${esc(r["Runtime Source"])}
-  `;
-  tip.style.display = "block";
-  tip.style.left = `${Math.min(x + 14, rect.width - 340)}px`;
-  tip.style.top = `${Math.max(8, y - 8)}px`;
+function bestVariantOf(m) { return bestVariantBySource(m, "Best"); }
+/* Recency cards prioritise measured HIL numbers: show the best HIL variant
+   when any exists, only falling back to the best Estimate when it has none. */
+function bestHilFirstVariantOf(m) {
+  return bestVariantBySource(m, "HIL") || bestVariantBySource(m, "Estimate");
+}
+function modelHasHil(m) {
+  for (const cfg of safeList(m.hardware_configs, []))
+    for (const art of allArtifactsOf(m))
+      if (metricsForArtifact(cfg.metrics || {}, art).hil) return true;
+  return false;
+}
+function sizeBucketOf(s) { const b = SIZE_BUCKETS.find(x => x.test(s)); return b ? b.id : "—"; }
+function modelFormats(m) { const f = []; if (m.gguf_repo) f.push("GGUF"); if (m.onnx_repo) f.push("ONNX"); return f; }
+
+function facetDefs() {
+  return [
+    { group: "family", title: "Family", opts: uniqueSorted(CATALOG.map(m => m.architecture || "Unknown")) },
+    { group: "size", title: "Size", opts: SIZE_BUCKETS.map(b => b.id).filter(id => CATALOG.some(m => sizeBucketOf(m.model_size_m) === id)) },
+    { group: "quant", title: "Quantization", opts: uniqueSorted(CATALOG.flatMap(allArtifactsOf)) },
+  ];
+}
+
+function buildFacetRail() {
+  const el = $("cgFacets");
+  if (!el) return;
+  let html = facetDefs().map(d => `
+    <div class="facet-group">
+      <div class="facet-group-title">${esc(d.title)}</div>
+      ${d.opts.map(o => {
+        const checked = CATALOG_STATE.facets[d.group].has(o) ? "checked" : "";
+        return `<label class="facet-opt"><input type="checkbox" data-facet-group="${esc(d.group)}" value="${esc(o)}" ${checked}/> <span>${esc(o)}</span></label>`;
+      }).join("")}
+    </div>`).join("");
+  html += `
+    <div class="facet-group">
+      <div class="facet-group-title">Metrics</div>
+      <label class="facet-opt"><input type="checkbox" id="cgHil" ${CATALOG_STATE.hil ? "checked" : ""}/> <span>Has HIL measurement</span></label>
+    </div>`;
+  el.innerHTML = html;
+}
+
+function modelMatches(m) {
+  const f = CATALOG_STATE.facets;
+  if (f.family.size && !f.family.has(m.architecture || "Unknown")) return false;
+  if (f.size.size && !f.size.has(sizeBucketOf(m.model_size_m))) return false;
+  if (f.format.size && !modelFormats(m).some(x => f.format.has(x))) return false;
+  if (f.target.size && !safeList(m.targets, []).some(x => f.target.has(x))) return false;
+  if (f.quant.size && !allArtifactsOf(m).some(x => f.quant.has(x))) return false;
+  if (CATALOG_STATE.hil && !modelHasHil(m)) return false;
+  const q = CATALOG_STATE.search.trim().toLowerCase();
+  if (q) {
+    const hay = [m.display_name, m.key, m.architecture, m.base_model, m.license, safeList(m.tasks, []).join(" "), allArtifactsOf(m).join(" ")].join(" ").toLowerCase();
+    if (!hay.includes(q)) return false;
+  }
+  return true;
+}
+
+function sortModels(list) {
+  const s = CATALOG_STATE.sort;
+  const tok = m => { const b = bestVariantOf(m); return b ? b.tok : -1; };
+  const arr = list.slice();
+  if (s === "size_desc") arr.sort((a, b) => (b.model_size_m || 0) - (a.model_size_m || 0));
+  else if (s === "size_asc") arr.sort((a, b) => (a.model_size_m || 0) - (b.model_size_m || 0));
+  else if (s === "tok_desc") arr.sort((a, b) => tok(b) - tok(a));
+  else if (s === "name_asc") arr.sort((a, b) => String(a.display_name || a.key).localeCompare(String(b.display_name || b.key)));
+  return arr;
+}
+
+function monogramText(m) {
+  const s = m.model_size_m;
+  if (s != null) return s >= 1000 ? `${Math.round(s / 100) / 10}B` : `${s}M`;
+  return (m.display_name || m.key || "?").slice(0, 2).toUpperCase();
+}
+
+/* ---- Model designer / publisher logos (derived from base_model org or architecture) ---- */
+const DESIGNERS = {
+  meta: { name: "Meta", svg: `<svg viewBox="0 0 32 18" width="22" height="13" aria-hidden="true"><path d="M16 9.2C13.1 4 10.2 2.8 7.6 2.8 4.5 2.8 2 5.6 2 9s2.5 6.2 5.6 6.2c2.6 0 5.5-1.2 8.4-6.4 2.9 5.2 5.8 6.4 8.4 6.4 3.1 0 5.6-2.8 5.6-6.2s-2.5-6.2-5.6-6.2C21.8 2.8 18.9 4 16 9.2Z" fill="none" stroke="#0866FF" stroke-width="2.7" stroke-linejoin="round"/></svg>` },
+  nvidia: { name: "NVIDIA", svg: `<svg viewBox="0 0 26 22" width="18" height="15" aria-hidden="true"><path d="M9 4C4.4 4.6 1.8 7.8 1 11c2.6 4.4 8 6.4 13 5.9 5.3-.5 8.8-3.4 10.4-6.4C22 6.2 15 3.4 9 4Z" fill="none" stroke="#76B900" stroke-width="2"/><path d="M9.7 7.6c-1.9.8-2.9 2.1-3.1 3.6 1.6 2.2 4.5 2.7 6.6 1.8 1.9-1 2.5-3.2 1.3-5C13.4 6.2 11.5 6.8 9.7 7.6Z" fill="#76B900"/></svg>` },
+  google: { name: "Google", svg: `<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M23 12.2c0-.8-.1-1.6-.2-2.3H12v4.5h6.2a5.3 5.3 0 0 1-2.3 3.5v2.9h3.7C21.7 18.7 23 15.8 23 12.2Z" fill="#4285F4"/><path d="M12 24c3.1 0 5.7-1 7.6-2.8l-3.7-2.9c-1 .7-2.3 1.1-3.9 1.1-3 0-5.5-2-6.4-4.7H1.8v3C3.7 21.4 7.6 24 12 24Z" fill="#34A853"/><path d="M5.6 14.7a7.2 7.2 0 0 1 0-4.6V7.1H1.8a12 12 0 0 0 0 10.6l3.8-3Z" fill="#FBBC05"/><path d="M12 4.8c1.7 0 3.2.6 4.4 1.7l3.3-3.3C17.7 1.2 15.1 0 12 0 7.6 0 3.7 2.6 1.8 6.4l3.8 3C6.5 6.7 9 4.8 12 4.8Z" fill="#EA4335"/></svg>` },
+  microsoft: { name: "Microsoft", svg: `<svg viewBox="0 0 23 23" width="14" height="14" aria-hidden="true"><rect x="1" y="1" width="10" height="10" fill="#F25022"/><rect x="12" y="1" width="10" height="10" fill="#7FBA00"/><rect x="1" y="12" width="10" height="10" fill="#00A4EF"/><rect x="12" y="12" width="10" height="10" fill="#FFB900"/></svg>` },
+  mistral: { name: "Mistral AI", svg: `<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><g><rect x="2" y="3" width="5" height="4.5" fill="#F7D046"/><rect x="17" y="3" width="5" height="4.5" fill="#F7D046"/><rect x="2" y="8" width="5" height="4.5" fill="#F2A73B"/><rect x="9.5" y="8" width="5" height="4.5" fill="#F2A73B"/><rect x="17" y="8" width="5" height="4.5" fill="#F2A73B"/><rect x="2" y="13" width="5" height="4.5" fill="#EE792F"/><rect x="17" y="13" width="5" height="4.5" fill="#EE792F"/><rect x="2" y="18" width="5" height="4.5" fill="#EA3326"/><rect x="17" y="18" width="5" height="4.5" fill="#EA3326"/></g></svg>` },
+  qwen: { name: "Qwen", svg: `<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="#615CED"/><path d="M7.5 7l4.5 10 4.5-10M9.3 13.2h5.4" stroke="#fff" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>` },
+  deepseek: { name: "DeepSeek", svg: `<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="#4D6BFE"/><path d="M6 9.5c3.2.2 4 2.2 6 2.2s2.2-2 .2-3.2" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round"/><circle cx="9.2" cy="14.2" r="1.3" fill="#fff"/></svg>` },
+  renesas: { name: "Renesas", svg: `<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><rect width="24" height="24" rx="4" fill="#2A289D"/><text x="12" y="16.5" font-family="Arial, sans-serif" font-size="13" font-weight="700" fill="#fff" text-anchor="middle">R</text></svg>` },
+  generic: { name: "AI Model", svg: `<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="#8E8DA3"/><circle cx="12" cy="12" r="4" fill="#fff"/></svg>` },
+};
+function designerOf(m) {
+  const base = (m.base_model || "").toLowerCase();
+  const org = base.includes("/") ? base.split("/")[0] : "";
+  const hay = `${org} ${(m.architecture || "").toLowerCase()} ${(m.key || "").toLowerCase()}`;
+  if (org.includes("nvidia") || hay.includes("nemotron") || hay.includes("nemo")) return DESIGNERS.nvidia;
+  if (org.includes("meta") || org.includes("facebook") || hay.includes("llama")) return DESIGNERS.meta;
+  if (org.includes("google") || hay.includes("gemma")) return DESIGNERS.google;
+  if (org.includes("microsoft") || hay.includes("phi")) return DESIGNERS.microsoft;
+  if (org.includes("mistral") || hay.includes("mistral") || hay.includes("mixtral")) return DESIGNERS.mistral;
+  if (org.includes("qwen") || org.includes("alibaba") || hay.includes("qwen")) return DESIGNERS.qwen;
+  if (org.includes("deepseek") || hay.includes("deepseek")) return DESIGNERS.deepseek;
+  if (org.includes("renesas")) return DESIGNERS.renesas;
+  if (org) return { name: org.split(/[-_]/)[0].replace(/^\w/, c => c.toUpperCase()), svg: DESIGNERS.generic.svg };
+  return DESIGNERS.generic;
+}
+function designerRowHTML(m) {
+  const d = designerOf(m);
+  return `<div class="mc-designer"><span class="mc-logo">${d.svg}</span><span class="mc-designer-name">${esc(d.name)}</span></div>`;
+}
+
+function cardHTML(m) {
+  const best = bestHilFirstVariantOf(m);
+  const col = colorFor(m.architecture || "Unknown");
+  const quantChips = allArtifactsOf(m).map(a => `<span class="badge art clickable" data-facet="quant" data-value="${esc(a)}">${esc(a)}</span>`).join("");
+  const modalityChip = `<span class="badge modality">${esc(m.modality || "LLM")}</span>`;
+  const _lbl = recentLabel(m);
+  const statusChips = `${modelHasHil(m) ? `<span class="badge status-hil">HIL</span>` : ""}${_lbl.isNew ? `<span class="badge status-new">New</span>` : ""}`;
+  const stat = best
+    ? `<div class="mc-stat"><span class="mc-stat-num">${esc(Math.round(best.tok * 10) / 10)}</span><span class="mc-stat-sub">tok/s · ${esc(best.target)} · ${esc(best.quant)}${best.source === "Estimate" ? " (est)" : ""}</span></div>`
+    : `<div class="mc-stat empty"><span class="mc-stat-sub">No published throughput yet</span></div>`;
+  const repo = m.gguf_repo || m.onnx_repo || "";
+  const repoLink = repo ? `<a class="link small" href="${esc(hfModelUrl(repo))}" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()">View repo</a>` : "";
+  const firstCfg = safeFirstCfg(m);
+  const defFmt = m.gguf_repo ? "GGUF" : (m.onnx_repo ? "ONNX" : "GGUF");
+  return `
+    <div class="model-card" data-card="1" data-key="${esc(m.key)}" data-cfg="${esc(firstCfg?.id || "")}" data-fmt="${esc(defFmt)}">
+      ${designerRowHTML(m)}
+      <div class="mc-head">
+        <div class="mc-monogram" style="background:linear-gradient(135deg, ${col}, ${col}99)">${esc(monogramText(m))}</div>
+        <div style="min-width:0">
+          <div class="mc-title">${esc(m.display_name || m.key)}</div>
+          <div class="mc-sub">${esc(m.architecture || "")}${m.variant ? " · " + esc(m.variant) : ""}</div>
+        </div>
+      </div>
+      <div class="mc-chips">${modalityChip}${statusChips}</div>
+      ${stat}
+      ${quantChips ? `<div class="mc-quants">${quantChips}</div>` : ""}
+      ${(m.license || repoLink) ? `<div class="mc-foot">
+        <span class="mc-meta">${esc(m.license || "")}</span>
+        ${repoLink}
+      </div>` : ""}
+    </div>`;
+}
+
+function renderCards(models) {
+  const el = $("cardGrid");
+  if (!el) return;
+  el.innerHTML = models.length
+    ? models.map(cardHTML).join("")
+    : `<div class="subtle" style="padding:24px;">No models match the current filters.</div>`;
+}
+
+function renderCatalog() {
+  const filtered = sortModels(CATALOG.filter(modelMatches));
+  const count = $("cgCount");
+  if (count) count.innerHTML = `<b>${filtered.length}</b> of ${CATALOG.length} models`;
+  const grid = $("cardGrid"), table = $("tableView");
+  if (CATALOG_STATE.view === "grid") {
+    if (grid) grid.hidden = false;
+    if (table) table.hidden = true;
+    renderCards(filtered);
+  } else {
+    if (grid) grid.hidden = true;
+    if (table) table.hidden = false;
+    renderTable(buildTableRows(filtered));
+    requestAnimationFrame(() => setupPinnedColumns($("modelsTable"), 1));
+  }
 }
-function hideTooltip(){ const tip = $("scatterTooltip"); if (tip) tip.style.display = "none"; }
 
-let SCATTER_ROWS = [];
+function setView(view) {
+  CATALOG_STATE.view = view;
+  $("cgViewGrid")?.classList.toggle("active", view === "grid");
+  $("cgViewTable")?.classList.toggle("active", view === "table");
+  $("cgViewGrid")?.setAttribute("aria-pressed", String(view === "grid"));
+  $("cgViewTable")?.setAttribute("aria-pressed", String(view === "table"));
+  renderCatalog();
+}
 
-function updateScatter() {
-  const arch = $("s_arch").value;
-  const modality = $("s_modality").value;
-  const variant = $("s_variant").value;
-  const compute = readRadio("s_compute", "CPU");
-  const src = readRadio("s_source", "Best available");
-  const pointMode = readRadio("s_point_mode", "Per hardware config");
-  const colorBy = $("s_color_by").value;
+function toggleFacet(group, value) {
+  const set = CATALOG_STATE.facets[group];
+  if (!set) return;
+  if (set.has(value)) set.delete(value); else set.add(value);
+  buildFacetRail();
+  renderCatalog();
+}
 
-  SCATTER_ROWS = buildScatterRows(arch, modality, variant, compute, src, colorBy, pointMode);
-  $("s_status").innerHTML = `Plotted <b>${SCATTER_ROWS.length}</b> point(s) for <b>${esc(compute)}</b> using <b>${esc(src)}</b>.`;
+function initCatalog() {
+  buildFacetRail();
 
-  const canvas = $("scatterCanvas");
-  if (canvas) drawScatter(canvas, SCATTER_ROWS);
-  $("s_details").innerHTML = "Select a point to see details.";
-}
+  $("cgSearch")?.addEventListener("input", () => {
+    clearTimeout(window.__cgT);
+    window.__cgT = setTimeout(() => { CATALOG_STATE.search = $("cgSearch").value; renderCatalog(); }, 90);
+  });
+  $("cgSort")?.addEventListener("change", () => { CATALOG_STATE.sort = $("cgSort").value; renderCatalog(); });
+  $("cgReset")?.addEventListener("click", () => {
+    CATALOG_STATE.search = ""; CATALOG_STATE.sort = "size_desc"; CATALOG_STATE.hil = false;
+    Object.values(CATALOG_STATE.facets).forEach(s => s.clear());
+    if ($("cgSearch")) $("cgSearch").value = "";
+    if ($("cgSort")) $("cgSort").value = "size_desc";
+    buildFacetRail();
+    renderCatalog();
+  });
+  $("cgViewGrid")?.addEventListener("click", () => setView("grid"));
+  $("cgViewTable")?.addEventListener("click", () => setView("table"));
+
+  $("cgFacets")?.addEventListener("change", (e) => {
+    const t = e.target;
+    if (t.id === "cgHil") { CATALOG_STATE.hil = t.checked; renderCatalog(); return; }
+    const group = t.getAttribute("data-facet-group");
+    if (!group) return;
+    const set = CATALOG_STATE.facets[group];
+    if (t.checked) set.add(t.value); else set.delete(t.value);
+    renderCatalog();
+  });
 
-function onScatterMove(evt) { const hit = hitTestScatter(evt); if (!hit) return hideTooltip(); showTooltip(hit, evt); }
-function onScatterLeave(){ hideTooltip(); }
-function onScatterClick(evt){
-  const hit = hitTestScatter(evt);
-  if (!hit) return;
-  $("s_details").innerHTML = renderDetails(
-    hit.row._key,
-    hit.row._cfg,
-    "ONNX",
-    hit.row.Compute,
-    defaultPurposeForFormat("ONNX"),
-    safeList(KEY_TO_MODEL[hit.row._key]?.onnx_artifacts, [])[0] || null
-  );
+  $("cardGrid")?.addEventListener("click", (e) => {
+    const chip = e.target.closest("[data-facet]");
+    if (chip) { e.stopPropagation(); toggleFacet(chip.getAttribute("data-facet"), chip.getAttribute("data-value")); return; }
+    if (e.target.closest("a")) return;
+    const card = e.target.closest('.model-card[data-card="1"]');
+    if (card) openModelModal(card.getAttribute("data-key"), card.getAttribute("data-cfg") || "", card.getAttribute("data-fmt") || "GGUF");
+  });
+
+  renderCatalog();
 }
 
 /* ---------- Boot ---------- */
@@ -1343,14 +1670,20 @@ async function init() {
   MODALITIES = ["All"].concat(uniqueSorted(CATALOG.map(m => m.modality || "LLM")));
   VARIANTS = ["All"].concat(uniqueSorted(CATALOG.map(m => m.variant || "Default")));
 
-  $("disclaimer").innerHTML = `<b>⚠️ POC ONLY — FAKE MODELS &amp; FAKE METRICS</b><br/>${esc(CATALOG_NOTE)}`;
+  /* Defaults derived from the loaded catalog (so the UI opens on data that exists). */
+  const hasOnnx = CATALOG.some(m => m.onnx_repo);
+  const DEFAULT_FMT = hasOnnx ? "ONNX" : "GGUF";
+  const DEFAULT_PURPOSE = defaultPurposeForFormat(DEFAULT_FMT);
+  const allTargets = new Set();
+  CATALOG.forEach(m => safeList(m.targets, []).forEach(t => allTargets.add(t)));
+  const DEFAULT_COMPUTE = allTargets.has("CPU") ? "CPU" : (allTargets.has("NPU") ? "NPU" : "DSP");
 
   /* Explore init */
   fillSelect($("arch"), ARCHS, "All");
   buildRadioGroup($("modality"), "modality", MODALITIES, "All");
-  buildRadioGroup($("fmt"), "fmt", ["ONNX", "GGUF"], "ONNX");
-  buildRadioGroup($("compute"), "compute", ["CPU", "NPU", "DSP"], "CPU");
-  buildRadioGroup($("purpose"), "purpose", ["PerformanceEstimate", "ORT Benchmarking", "llama.cpp Benchmarking"], "PerformanceEstimate");
+  buildRadioGroup($("fmt"), "fmt", ["ONNX", "GGUF"], DEFAULT_FMT);
+  buildRadioGroup($("compute"), "compute", ["CPU", "NPU", "DSP"], DEFAULT_COMPUTE);
+  buildRadioGroup($("purpose"), "purpose", ["PerformanceEstimate", "ORT Benchmarking", "llama.cpp Benchmarking"], DEFAULT_PURPOSE);
 
   EXPLORE_KEYS = filteredKeys("All", "All", "All");
   updateExploreFromFilters();
@@ -1366,62 +1699,16 @@ async function init() {
   $("modelKey").addEventListener("change", updateExploreOnModelChange);
   $("hwCfg").addEventListener("change", updateExploreAny);
 
-  /* All models init */
-  fillSelect($("t_modality"), MODALITIES, "All");
-  buildCheckGroup($("t_format"), "t_format", ALL_FORMATS, []);
-  buildCheckGroup($("t_hw"), "t_hw", ALL_HW, []);
+  /* Catalog (cards + table + facet rail) */
+  initCatalog();
 
-  FULL_ROWS = buildTableRows(CATALOG);
-  updateAllModels();
-
-  $("t_modality").addEventListener("change", updateAllModels);
-  $("t_need_est").addEventListener("change", updateAllModels);
-  $("t_need_hil").addEventListener("change", updateAllModels);
-
-  $("t_search").addEventListener("input", () => {
-    clearTimeout(window.__tSearchT);
-    window.__tSearchT = setTimeout(updateAllModels, 80);
-  });
-
-  document.addEventListener("change", (e) => {
-    if (e.target && e.target.name === "t_format") { e.target.closest(".pill")?.classList.toggle("active", e.target.checked); updateAllModels(); }
-    if (e.target && e.target.name === "t_hw") { e.target.closest(".pill")?.classList.toggle("active", e.target.checked); updateAllModels(); }
-  });
-
-  /* Scatter init */
-  fillSelect($("s_arch"), ARCHS, "All");
-  fillSelect($("s_modality"), MODALITIES, "All");
-  fillSelect($("s_variant"), VARIANTS, "All");
-  fillSelect($("s_color_by"), ["Architecture", "Modality", "Variant", "Format", "Supported HW"], "Modality");
-  buildRadioGroup($("s_compute"), "s_compute", ["CPU", "NPU", "DSP"], "CPU");
-  buildRadioGroup($("s_source"), "s_source", ["Best available", "Estimate", "HIL"], "Best available");
-  buildRadioGroup($("s_point_mode"), "s_point_mode", ["Per hardware config", "Per model (best across configs)"], "Per hardware config");
-
-  $("s_arch").addEventListener("change", updateScatter);
-  $("s_modality").addEventListener("change", updateScatter);
-  $("s_variant").addEventListener("change", updateScatter);
-  $("s_color_by").addEventListener("change", updateScatter);
-
-  document.addEventListener("change", (e) => {
-    if (e.target && (e.target.name === "s_compute" || e.target.name === "s_source" || e.target.name === "s_point_mode")) updateScatter();
-  });
-
-  const sc = $("scatterCanvas");
-  sc.addEventListener("mousemove", onScatterMove);
-  sc.addEventListener("mouseleave", onScatterLeave);
-  sc.addEventListener("click", onScatterClick);
+  /* Overview (constellation) */
+  initOverview();
 
   window.addEventListener("resize", () => {
-    setupPinnedColumns($("modelsTable"), 4);
-    updateScatter();
-    requestAnimationFrame(() => {
-      const c = $("artifactCanvas");
-      const modalOpen = $("modelModal")?.classList.contains("open");
-      if (!modalOpen && c) drawArtifactScatter(c, window.__artifactPlotPoints || []);
-    });
+    if ($("sec-overview")?.classList.contains("visible")) redrawConstellation();
+    if (CATALOG_STATE.view === "table") setupPinnedColumns($("modelsTable"), 1);
   });
-
-  updateScatter();
 }
 
 document.addEventListener("DOMContentLoaded", init);

generate_models_json.py

@@ -0,0 +1,842 @@
+#!/usr/bin/env python3
+"""
+generate_models_json.py
+=======================
+
+Regenerate the dashboard's `models.json` directly from the Hugging Face repos of
+an organization (default: "Renesas"), instead of maintaining the catalog by hand.
+
+It reads, for every model repo in the org:
+  * the model-list / per-repo info API   (always public, even for gated repos)
+  * the recursive file tree API           (always public, even for gated repos)
+  * each `.metadata.yaml`                  (repo-level identity + per-artifact info)
+  * each `<artifact>/benchmarks/<chip>_<ep>.yaml`  (the actual benchmark numbers)
+
+and emits a `models.json` whose schema is the one `app.js` already consumes.
+
+Gated repos
+-----------
+The org has gated ("gated: manual") repos. Their *listing* (ids, tags, file
+tree, artifact dirs, benchmark file paths) is public, but their raw *file
+contents* require an authorized token. Provide one to import their metrics:
+
+  * `--token hf_xxx`, or
+  * env  HF_TOKEN / HUGGINGFACE_TOKEN / HUGGING_FACE_HUB_TOKEN, or
+  * a prior `huggingface-cli login` (cached token is picked up automatically).
+
+Without an authorized token, gated repos are still listed (with their artifacts,
+and -- where benchmark files exist in the public file tree -- their hardware
+targets/config derived from the file paths) but their benchmark numbers are left
+empty and reported as skipped.
+
+Usage
+-----
+    pip install requests pyyaml
+    python generate_models_json.py                 # writes ./models.json
+    python generate_models_json.py --org Renesas --output models.json
+    python generate_models_json.py --token hf_xxx  # include gated repos' metrics
+    python generate_models_json.py --dry-run -v    # print, don't write
+
+Run it whenever the repos change to refresh the dashboard.
+"""
+
+from __future__ import annotations
+
+import argparse
+import datetime as _dt
+import json
+import os
+import re
+import sys
+import time
+from pathlib import Path
+
+try:
+    import requests
+except ImportError:  # pragma: no cover
+    sys.exit("Missing dependency 'requests'. Install with:  pip install requests pyyaml")
+
+try:
+    import yaml
+except ImportError:  # pragma: no cover
+    sys.exit("Missing dependency 'pyyaml'. Install with:  pip install requests pyyaml")
+
+
+HF_BASE = "https://huggingface.co"
+DEFAULT_ORG = "Renesas"
+
+# execution-provider / accelerator token -> (unit key in metric block, UI target)
+EP_TO_UNIT = {
+    "cpu": ("cpu", "CPU"),
+    "npu": ("npu", "NPU"),
+    "dsp": ("dsp", "DSP"),
+}
+# benchmark.type values that mean "measured on real hardware" -> HIL block; everything
+# else (projected / simulated / static estimate) -> Estimate block.
+HIL_TYPES = {"hil", "measured", "hardware", "device", "hw", "hardware_in_the_loop"}
+
+VARIANT_KEYWORDS = ["Instruct", "Chat", "Vision", "Guard", "Code", "Base"]
+FORMAT_SUFFIXES = ["GGUF", "ONNX"]
+
+# status codes worth retrying (rate limit + transient server errors)
+RETRYABLE_STATUS = {429, 500, 502, 503, 504}
+
+
+def warn(msg: str) -> None:
+    print(f"  ! {msg}", file=sys.stderr)
+
+
+# --------------------------------------------------------------------------- #
+# HTTP helpers                                                                #
+# --------------------------------------------------------------------------- #
+class Client:
+    def __init__(self, token: str | None, verbose: bool = False):
+        self.session = requests.Session()
+        self.token = token
+        self.verbose = verbose
+        if token:
+            self.session.headers["Authorization"] = f"Bearer {token}"
+        self.session.headers["User-Agent"] = "renesas-ai-dashboard-generator/1.0"
+
+    def _get(self, url: str, *, params=None, retries: int = 3):
+        last = None
+        for attempt in range(retries + 1):
+            try:
+                r = self.session.get(url, params=params, timeout=30)
+            except requests.RequestException as exc:  # network hiccup -> retry
+                last = exc
+                if attempt < retries:
+                    time.sleep(1.0 + attempt)
+                    continue
+                raise
+            # retry rate-limit / transient 5xx, honoring Retry-After when present
+            if r.status_code in RETRYABLE_STATUS and attempt < retries:
+                ra = r.headers.get("Retry-After")
+                try:
+                    delay = float(ra) if ra is not None else None
+                except ValueError:
+                    delay = None
+                if self.verbose:
+                    warn(f"HTTP {r.status_code} from {url} — retrying (attempt {attempt + 1})")
+                time.sleep(delay if delay is not None else 1.5 * (attempt + 1))
+                continue
+            return r
+        raise last  # type: ignore[misc]
+
+    def _json(self, r, url: str):
+        try:
+            return r.json()
+        except ValueError as exc:  # non-JSON 200 (proxy / login interstitial / HTML)
+            snippet = (r.text or "")[:200].replace("\n", " ")
+            raise RuntimeError(
+                f"Expected JSON from {url} (HTTP {r.status_code}) but got non-JSON: {snippet!r}"
+            ) from exc
+
+    def get_json(self, url: str, *, params=None):
+        r = self._get(url, params=params)
+        r.raise_for_status()
+        return self._json(r, url)
+
+    def get_json_pages(self, url: str, *, params=None):
+        """Follow HF `Link: rel=next` pagination; return the concatenated array."""
+        out, next_url, next_params = [], url, params
+        while next_url:
+            r = self._get(next_url, params=next_params)
+            r.raise_for_status()
+            page = self._json(r, next_url)
+            if not isinstance(page, list):
+                raise RuntimeError(
+                    f"Expected a JSON array from {next_url}, got {type(page).__name__}"
+                )
+            out.extend(page)
+            next_url = (r.links.get("next") or {}).get("url")
+            next_params = None  # the cursor for later pages is embedded in the URL
+        return out
+
+    def get_text(self, path_url: str):
+        """Fetch a raw file. Returns (text, status).
+
+        status: "ok" | "gated" | "missing" | "error".
+        """
+        r = self._get(path_url)
+        if r.status_code == 200:
+            return r.text, "ok"
+        if r.status_code in (401, 403):
+            return None, "gated"
+        if r.status_code == 404:
+            return None, "missing"
+        return None, f"error:{r.status_code}"
+
+
+# --------------------------------------------------------------------------- #
+# Token resolution                                                            #
+# --------------------------------------------------------------------------- #
+def resolve_token(cli_token: str | None) -> str | None:
+    if cli_token:
+        return cli_token.strip()
+    for var in ("HF_TOKEN", "HUGGINGFACE_TOKEN", "HUGGING_FACE_HUB_TOKEN"):
+        val = os.environ.get(var)
+        if val:
+            return val.strip()
+    # huggingface_hub cached login token (huggingface-cli login)
+    try:
+        from huggingface_hub import get_token  # type: ignore
+
+        tok = get_token()
+        if tok:
+            return tok.strip()
+    except Exception:
+        pass
+    for p in (
+        Path.home() / ".cache" / "huggingface" / "token",
+        Path.home() / ".huggingface" / "token",
+    ):
+        try:
+            if p.is_file():
+                txt = p.read_text(encoding="utf-8").strip()
+                if txt:
+                    return txt
+        except Exception:
+            pass
+    return None
+
+
+# --------------------------------------------------------------------------- #
+# Small parsing helpers                                                       #
+# --------------------------------------------------------------------------- #
+def tag_value(tags: list[str], prefix: str) -> str | None:
+    for t in tags:
+        if t.startswith(prefix):
+            return t[len(prefix):]
+    return None
+
+
+def parse_base_model(tags: list[str], upstream: str | None) -> str | None:
+    """The non-quantized base_model:* tag, else the metadata upstream."""
+    candidate = None
+    for t in tags:
+        if t.startswith("base_model:") and ":quantized:" not in t:
+            candidate = t.split(":", 1)[1]
+            break
+    if not candidate:
+        for t in tags:
+            if t.startswith("base_model:"):
+                candidate = t.split(":", 1)[-1]
+                break
+    return candidate or upstream
+
+
+def short_name(repo_or_model_id: str) -> str:
+    return repo_or_model_id.split("/")[-1]
+
+
+def strip_format_suffix(name: str) -> str:
+    for suf in FORMAT_SUFFIXES:
+        name = re.sub(rf"[-_ ]{suf}$", "", name, flags=re.IGNORECASE)
+    return name
+
+
+def detect_variant(name: str) -> str:
+    low = name.lower()
+    for v in VARIANT_KEYWORDS:
+        if re.search(rf"(?:^|[-_ ]){v.lower()}(?:$|[-_ ])", low):
+            return v
+    return "Base"
+
+
+def architecture_from(name: str, variant: str) -> str:
+    """Family + size label, e.g. 'Llama-3.1-8B' from 'Llama-3.1-8B-Instruct'."""
+    arch = strip_format_suffix(short_name(name))
+    arch = re.sub(rf"[-_ ]{re.escape(variant)}$", "", arch, flags=re.IGNORECASE)
+    return arch.strip("-_ ") or arch
+
+
+def parse_size_m(*texts: str | None) -> int | None:
+    """Parameter count in millions. Handles '8.0B', '8B', '500M', '1.5b'."""
+    for text in texts:
+        if not text:
+            continue
+        m = re.search(r"(\d+(?:\.\d+)?)\s*([BM])\b", str(text), flags=re.IGNORECASE)
+        if m:
+            val = float(m.group(1))
+            return int(round(val * (1000 if m.group(2).upper() == "B" else 1)))
+    return None
+
+
+def map_modality(meta_modality, tags: list[str], pipeline_tag: str | None) -> str:
+    vals = []
+    if isinstance(meta_modality, list):
+        vals = [str(v).lower() for v in meta_modality]
+    elif isinstance(meta_modality, str):
+        vals = [meta_modality.lower()]
+    if any(v in ("vision", "image", "multimodal", "vlm") for v in vals):
+        return "VLM"
+    if any(v in ("audio", "speech") for v in vals):
+        return "ALM"
+    if vals:  # language / text
+        return "LLM"
+    # fallback from tags / pipeline tag
+    low_tags = [t.lower() for t in tags]
+    if "vlm" in low_tags or "image-text-to-text" == (pipeline_tag or ""):
+        return "VLM"
+    return "LLM"
+
+
+def detect_format(repo_id: str, meta_format_type: str | None) -> str:
+    ft = (meta_format_type or "").lower()
+    if "onnx" in ft:
+        return "ONNX"
+    if "gguf" in ft:
+        return "GGUF"
+    low = repo_id.lower()
+    if low.endswith("-onnx") or "onnx" in low:
+        return "ONNX"
+    if low.endswith("-gguf") or "gguf" in low:
+        return "GGUF"
+    return "GGUF"  # sensible default for this org
+
+
+def normalize_chip_id(chip: str) -> str:
+    return re.sub(r"[^A-Za-z0-9]+", "-", chip).strip("-").upper()
+
+
+def prettify_chip(chip: str) -> str:
+    parts = re.split(r"[-_]", chip)
+    out = ["R-Car" if p.lower() == "rcar" else p.upper() for p in parts if p]
+    return " ".join(out) if out else chip
+
+
+def block_kind_for(bench_type: str | None) -> str:
+    return "hil" if str(bench_type or "").lower() in HIL_TYPES else "estimate"
+
+
+def as_number(v):
+    if v is None or isinstance(v, bool):
+        return None
+    if isinstance(v, (int, float)):
+        return v
+    try:
+        s = str(v).strip()
+        return float(s) if s else None
+    except (TypeError, ValueError):
+        return None
+
+
+def normalize_accuracy(v):
+    """app.js expects top-level accuracy as a 0..1 fraction; rescale percents."""
+    n = as_number(v)
+    if n is None:
+        return None
+    return n / 100.0 if n > 1.5 else n
+
+
+# --------------------------------------------------------------------------- #
+# Per-repo gathering                                                          #
+# --------------------------------------------------------------------------- #
+class RepoData:
+    def __init__(self, info: dict):
+        self.id: str = info.get("id") or info.get("modelId") or ""
+        if not self.id:
+            raise ValueError("repo info has no 'id'")
+        self.gated = info.get("gated")  # False | "auto" | "manual"
+        self.private = bool(info.get("private"))
+        self.tags: list[str] = list(info.get("tags") or [])
+        self.pipeline_tag = info.get("pipeline_tag")
+        self.last_modified = info.get("lastModified") or info.get("last_modified")
+        self.created_at = info.get("createdAt") or info.get("created_at")
+        self.downloads = info.get("downloads")
+        self.likes = info.get("likes")
+        self.files: list[str] = []
+        self.artifact_dirs: list[str] = []
+        self.benchmark_files: list[str] = []
+        self.root_meta: dict | None = None
+        self.artifact_meta: dict[str, dict] = {}
+        self.bench_docs: dict[str, dict] = {}  # path -> parsed yaml
+        self.bench_errors: list[tuple] = []    # (path, status) for fetch/parse failures
+        self.content_blocked = False           # gated/forbidden file contents
+        self.license = (tag_value(self.tags, "license:") or info.get("license"))
+        self.base_model = parse_base_model(self.tags, None)
+        self.format = detect_format(self.id, None)
+
+
+def list_org_repos(client: Client, org: str, include_private: bool) -> list[str]:
+    data = client.get_json_pages(
+        f"{HF_BASE}/api/models", params={"author": org, "limit": 100}
+    )
+    ids = []
+    for m in data:
+        if not isinstance(m, dict):
+            warn(f"unexpected listing entry (not an object) skipped: {m!r:.80}")
+            continue
+        rid = m.get("id")
+        if not rid:
+            warn(f"listing entry without 'id' skipped: {m!r:.80}")
+            continue
+        if m.get("private") and not include_private:
+            continue
+        ids.append(rid)
+    return sorted(ids)
+
+
+def fetch_tree(client: Client, repo: str) -> list[str]:
+    """Recursive file list. Public even for gated repos."""
+    try:
+        tree = client.get_json(
+            f"{HF_BASE}/api/models/{repo}/tree/main", params={"recursive": "true"}
+        )
+        return [e["path"] for e in tree if e.get("type") == "file"]
+    except requests.HTTPError:
+        return []
+
+
+def raw_url(repo: str, path: str) -> str:
+    return f"{HF_BASE}/{repo}/raw/main/{path}"
+
+
+def fetch_yaml(client: Client, repo: str, path: str):
+    """Return (parsed_dict_or_None, status)."""
+    text, status = client.get_text(raw_url(repo, path))
+    if status != "ok" or text is None:
+        return None, status
+    try:
+        doc = yaml.safe_load(text)
+        return (doc if isinstance(doc, dict) else {}), "ok"
+    except yaml.YAMLError:
+        return None, "error:yaml"
+
+
+def gather_repo(client: Client, repo: str, verbose: bool) -> RepoData:
+    info = client.get_json(f"{HF_BASE}/api/models/{repo}")
+    rd = RepoData(info)
+    rd.files = fetch_tree(client, repo) or [
+        s.get("rfilename") for s in info.get("siblings", []) if s.get("rfilename")
+    ]
+    rd.format = detect_format(repo, None)
+
+    # artifact dirs = top-level dirs that carry a `.metadata.yaml`
+    art_dirs: list[str] = []
+    for f in rd.files:
+        parts = f.split("/")
+        if len(parts) == 2 and parts[1] == ".metadata.yaml":
+            art_dirs.append(parts[0])
+    rd.artifact_dirs = sorted(set(art_dirs))
+
+    # benchmark files: <artifact>/benchmarks/<name>.yaml|yml
+    rd.benchmark_files = sorted(
+        f for f in rd.files if re.search(r"/benchmarks/[^/]+\.ya?ml$", f)
+    )
+
+    # root .metadata.yaml
+    if ".metadata.yaml" in rd.files:
+        doc, status = fetch_yaml(client, repo, ".metadata.yaml")
+        if status == "gated":
+            rd.content_blocked = True
+        rd.root_meta = doc
+        if doc:
+            rd.format = detect_format(repo, (doc.get("format") or {}).get("type"))
+            up = (doc.get("model") or {}).get("upstream")
+            if not rd.base_model:
+                rd.base_model = up
+
+    # per-artifact .metadata.yaml (optional enrichment)
+    for d in rd.artifact_dirs:
+        p = f"{d}/.metadata.yaml"
+        if p in rd.files:
+            doc, status = fetch_yaml(client, repo, p)
+            if status == "gated":
+                rd.content_blocked = True
+            if doc:
+                rd.artifact_meta[d] = doc
+
+    # benchmark docs
+    for bf in rd.benchmark_files:
+        doc, status = fetch_yaml(client, repo, bf)
+        if status == "gated":
+            rd.content_blocked = True
+        elif status not in ("ok", "missing"):
+            rd.bench_errors.append((bf, status))
+            warn(f"{repo}: could not read benchmark {bf} ({status})")
+        if doc:
+            rd.bench_docs[bf] = doc
+
+    # warn if we could not confidently determine the repo format
+    low = repo.lower()
+    mft = str(((rd.root_meta or {}).get("format") or {}).get("type", "")).lower()
+    if not any(tok in low or tok in mft for tok in ("onnx", "gguf")):
+        warn(f"{repo}: could not determine format; defaulting to {rd.format}. "
+             f"Add explicit handling if this is a new format.")
+
+    if verbose:
+        state = "gated/no-access" if rd.content_blocked else "readable"
+        print(
+            f"  · {repo}: format={rd.format} artifacts={rd.artifact_dirs} "
+            f"benchmarks={len(rd.benchmark_files)} contents={state}"
+        )
+    return rd
+
+
+# --------------------------------------------------------------------------- #
+# Benchmark file -> hardware config / metric block                            #
+# --------------------------------------------------------------------------- #
+def parse_bench_path(path: str):
+    """Return (artifact_dir, chip_token, ep_token) from the file path."""
+    parts = path.split("/")
+    artifact = parts[0]
+    base = re.sub(r"\.ya?ml$", "", parts[-1])
+    seg = base.split("_")
+    if len(seg) >= 2:
+        ep = seg[-1]
+        chip = "_".join(seg[:-1])
+    else:
+        ep = seg[-1]
+        chip = seg[-1]
+    return artifact, chip, ep
+
+
+def build_metric_block(doc: dict, ep: str, kind: str, repo_date: str | None, chip_label: str):
+    hardware = doc.get("hardware") or {}
+    runtime = doc.get("runtime") or {}
+    perf = doc.get("performance") or {}
+    metrics = doc.get("metrics") or {}
+    memory = doc.get("memory") or {}
+    bench = doc.get("benchmark") or {}
+
+    ep_token = (runtime.get("execution_provider") or ep or "").lower()
+    unit_key, _target = EP_TO_UNIT.get(ep_token, ("npu", "NPU"))
+
+    tok = as_number(perf.get("tokens_per_sec"))
+    if tok is None:
+        tok = as_number(perf.get("tok_s"))
+    peak = as_number(memory.get("peak_mb"))
+    if peak is None:
+        peak = as_number(memory.get("peak_mem_mb"))
+    lat = as_number(perf.get("latency_ms_p50"))
+    acc = normalize_accuracy(metrics.get("accuracy"))
+
+    # Nothing measured -> no block (keeps null so the UI shows "—").
+    if tok is None and peak is None and lat is None and acc is None:
+        return None
+
+    unit = {"tok_s": tok, "latency_ms_p50": lat, "peak_mem_mb": peak}
+    block = {
+        "accuracy": acc,
+        unit_key: unit,
+        "total": {"tok_s": tok, "latency_ms_p50": lat, "peak_mem_mb": peak},
+        "engine": runtime.get("engine"),
+        "execution_provider": ep_token or None,
+        "last_updated": (repo_date or "")[:10] or None,
+    }
+    bs = ((bench.get("parameters") or {}).get("batch_size"))
+    if bs is not None:
+        block["batch_size"] = bs
+    if kind == "hil":
+        block["setup"] = chip_label
+    return block
+
+
+# --------------------------------------------------------------------------- #
+# Model assembly (group repos that are the same model in different formats)   #
+# --------------------------------------------------------------------------- #
+def group_key(repo_id: str) -> str:
+    return strip_format_suffix(repo_id).lower()
+
+
+def build_model(repos: list[RepoData], verbose: bool) -> tuple[dict, dict]:
+    """Build one models.json entry from one or more repos (same model, diff formats)."""
+    # Identity: prefer a repo whose root metadata is readable.
+    primary = next((r for r in repos if r.root_meta), repos[0])
+    rm = primary.root_meta or {}
+    rm_model = rm.get("model") or {}
+    rm_arch = rm.get("architecture") or {}
+
+    base_model = next((r.base_model for r in repos if r.base_model), None)
+    name_src = base_model or short_name(primary.id)
+    short = short_name(name_src)
+
+    variant = detect_variant(short)
+    display_name = rm_model.get("display_name") or strip_format_suffix(short)
+    key = (rm_model.get("name") or strip_format_suffix(short)).lower()
+    key = re.sub(r"[^a-z0-9.]+", "-", key).strip("-.")
+    architecture = architecture_from(name_src, variant)
+    size_m = parse_size_m(rm_arch.get("parameters"), short, primary.id)
+    modality = map_modality(rm_arch.get("modality"), primary.tags, primary.pipeline_tag)
+    license_ = next((r.license for r in repos if r.license), None)
+    tasks = rm.get("tasks") if isinstance(rm.get("tasks"), list) else None
+
+    model = {
+        "key": key,
+        "display_name": display_name,
+        "architecture": architecture,
+        "model_size_m": size_m,
+        "modality": modality,
+        "variant": variant,
+        "targets": [],
+        "onnx_repo": "",
+        "gguf_repo": "",
+        "onnx_artifacts": [],
+        "gguf_artifacts": [],
+        "base_model": base_model,
+        "license": license_,
+        "tasks": tasks,
+        "created_at": min([r.created_at for r in repos if r.created_at], default=None),
+        "last_modified": max([r.last_modified for r in repos if r.last_modified], default=None),
+        "hardware_configs": [],
+    }
+
+    # Per-format repo + artifacts
+    all_artifacts: list[str] = []
+    for r in repos:
+        if r.format == "ONNX":
+            model["onnx_repo"] = r.id
+            model["onnx_artifacts"] = r.artifact_dirs
+        else:  # GGUF (and any default)
+            model["gguf_repo"] = r.id
+            model["gguf_artifacts"] = r.artifact_dirs
+        all_artifacts.extend(r.artifact_dirs)
+    all_artifacts = list(dict.fromkeys(all_artifacts))  # de-dupe, keep order
+
+    # Hardware configs keyed by chip, with metrics.artifacts[<art>].{estimate,hil}
+    configs: dict[str, dict] = {}
+    targets_seen: set[str] = set()
+    stats = {"id": primary.id, "configs": 0, "metric_blocks": 0,
+             "content_blocked": any(r.content_blocked for r in repos),
+             "bench_files": sum(len(r.benchmark_files) for r in repos),
+             "bench_errors": sum(len(r.bench_errors) for r in repos)}
+
+    for r in repos:
+        for bf in r.benchmark_files:
+            artifact, chip_tok, ep_tok = parse_bench_path(bf)
+            doc = r.bench_docs.get(bf)
+
+            chip = ((doc or {}).get("hardware") or {}).get("chip") or chip_tok
+            cfg_id = normalize_chip_id(chip)
+            ep = (((doc or {}).get("runtime") or {}).get("execution_provider")
+                  or ep_tok).lower()
+            if ep not in EP_TO_UNIT:
+                warn(f"{r.id}: unknown execution_provider '{ep}' in {bf}; "
+                     f"attributing to NPU — add it to EP_TO_UNIT if that is wrong.")
+            unit_key, target = EP_TO_UNIT.get(ep, ("npu", "NPU"))
+            targets_seen.add(target)
+
+            if cfg_id not in configs:
+                npu = ((doc or {}).get("hardware") or {}).get("npu")
+                label = prettify_chip(chip) + (f" ({str(npu).upper()})" if npu else "")
+                configs[cfg_id] = {
+                    "id": cfg_id,
+                    "label": label,
+                    "targets": set(),
+                    "notes": _hw_notes((doc or {}).get("hardware") or {}),
+                    "metrics": {"artifacts": {a: {"estimate": None, "hil": None}
+                                              for a in all_artifacts}},
+                }
+            cfg = configs[cfg_id]
+            cfg["targets"].add(target)
+            cfg["metrics"]["artifacts"].setdefault(
+                artifact, {"estimate": None, "hil": None}
+            )
+
+            if doc:
+                kind = block_kind_for((doc.get("benchmark") or {}).get("type"))
+                block = build_metric_block(doc, ep, kind, r.last_modified, cfg["label"])
+                if block:
+                    cfg["metrics"]["artifacts"][artifact][kind] = block
+                    stats["metric_blocks"] += 1
+
+    # finalize configs (sets -> sorted lists)
+    hw_configs = []
+    for cfg in configs.values():
+        cfg["targets"] = sorted(cfg["targets"])
+        hw_configs.append(cfg)
+    hw_configs.sort(key=lambda c: c["id"])
+    model["hardware_configs"] = hw_configs
+    model["targets"] = sorted(targets_seen)
+    stats["configs"] = len(hw_configs)
+
+    # The dashboard's table + Explore open on the FIRST artifact. Put artifacts that
+    # actually have measured metrics first (stable sort keeps upstream order otherwise),
+    # so the default view shows real numbers instead of an empty "—" row.
+    def _has_data(art: str) -> bool:
+        for cfg in hw_configs:
+            a = cfg["metrics"]["artifacts"].get(art) or {}
+            if a.get("estimate") or a.get("hil"):
+                return True
+        return False
+
+    model["gguf_artifacts"] = sorted(model["gguf_artifacts"], key=lambda a: 0 if _has_data(a) else 1)
+    model["onnx_artifacts"] = sorted(model["onnx_artifacts"], key=lambda a: 0 if _has_data(a) else 1)
+
+    if verbose:
+        print(f"  -> model '{key}' ({display_name}): {len(hw_configs)} config(s), "
+              f"{stats['metric_blocks']} metric block(s)")
+    return model, stats
+
+
+def _hw_notes(hardware: dict) -> str:
+    if not hardware:
+        return ""
+    bits = []
+    for k in ("vendor", "chip", "cpu", "npu", "memory_mb"):
+        v = hardware.get(k)
+        if v not in (None, ""):
+            bits.append(f"{k}={v}")
+    return "; ".join(bits)
+
+
+# --------------------------------------------------------------------------- #
+# Main                                                                        #
+# --------------------------------------------------------------------------- #
+def build_catalog(client: Client, org: str, include_private: bool, verbose: bool):
+    print(f"Listing models for org '{org}' ...")
+    repo_ids = list_org_repos(client, org, include_private)
+    print(f"Found {len(repo_ids)} repo(s): {', '.join(repo_ids) or '(none)'}")
+
+    repos: list[RepoData] = []
+    for rid in repo_ids:
+        try:
+            repos.append(gather_repo(client, rid, verbose))
+        except requests.HTTPError as exc:
+            print(f"  ! skipping {rid}: HTTP {exc.response.status_code if exc.response else '?'}")
+        except Exception as exc:  # noqa: BLE001  (keep going on a single bad repo)
+            print(f"  ! skipping {rid}: {exc}")
+
+    # group repos that are the same logical model in different formats
+    groups: dict[str, list[RepoData]] = {}
+    for r in repos:
+        groups.setdefault(group_key(r.id), []).append(r)
+
+    models, all_stats = [], []
+    for gkey in sorted(groups):
+        model, stats = build_model(groups[gkey], verbose)
+        models.append(model)
+        all_stats.append(stats)
+    models.sort(key=lambda m: (m.get("model_size_m") or 0, m["key"]))
+
+    # guarantee unique keys — app.js builds KEY_TO_MODEL keyed by `key`, so a
+    # collision would silently drop a model from the dashboard.
+    seen: dict[str, int] = {}
+    for m in models:
+        base = m["key"] or "model"
+        key = base
+        while key in seen:
+            seen[base] = seen.get(base, 1) + 1
+            key = f"{base}-{seen[base]}"
+        if key != m["key"]:
+            warn(f"duplicate model key '{m['key']}' -> '{key}' (renamed to avoid collision)")
+        seen[key] = 1
+        m["key"] = key
+    return models, all_stats
+
+
+def main(argv=None):
+    parser = argparse.ArgumentParser(description=__doc__,
+                                     formatter_class=argparse.RawDescriptionHelpFormatter)
+    parser.add_argument("--org", default=DEFAULT_ORG, help="HF org/owner (default: Renesas)")
+    parser.add_argument("--output", "-o", default=str(Path(__file__).with_name("models.json")),
+                        help="output path (default: ./models.json next to this script)")
+    parser.add_argument("--token", default=None, help="HF token (else env / cached login)")
+    parser.add_argument("--include-private", action="store_true",
+                        help="also include private repos (requires token with access)")
+    parser.add_argument("--dry-run", action="store_true", help="print JSON, do not write")
+    parser.add_argument("--force", action="store_true",
+                        help="write even if 0 models were produced (overwrites existing file)")
+    parser.add_argument("--verbose", "-v", action="store_true")
+    args = parser.parse_args(argv)
+
+    token = resolve_token(args.token)
+    print(f"Auth: {'token present' if token else 'anonymous (gated repo metrics will be skipped)'}")
+    client = Client(token, verbose=args.verbose)
+
+    # Top-level network guard: a failure on the initial listing must not dump a
+    # raw traceback on the admin — report it and exit with a distinct code.
+    try:
+        models, stats = build_catalog(client, args.org, args.include_private, args.verbose)
+    except requests.HTTPError as exc:
+        code = exc.response.status_code if exc.response is not None else "?"
+        print(f"ERROR: Hugging Face API returned HTTP {code} while listing org '{args.org}' "
+              f"(rate-limited or unavailable). Try again later.", file=sys.stderr)
+        return 2
+    except requests.RequestException as exc:
+        print(f"ERROR: could not reach {HF_BASE} (network / DNS / proxy): {exc}", file=sys.stderr)
+        return 2
+    except RuntimeError as exc:  # e.g. non-JSON response from a proxy/interstitial
+        print(f"ERROR: {exc}", file=sys.stderr)
+        return 2
+
+    now = _dt.datetime.now().astimezone()
+    gated_skipped = [s["id"] for s in stats if s["content_blocked"] and s["metric_blocks"] == 0]
+    note = (
+        f"Auto-generated from Hugging Face '{args.org}' repositories on "
+        f"{now.strftime('%Y-%m-%d %H:%M %Z')}. Metrics reflect each repo's published "
+        f"benchmark YAML files."
+    )
+    if gated_skipped:
+        reason = ("token not authorized for these repos" if token
+                  else "no authorized token — re-run with --token")
+        note += (f" Benchmark metrics for gated repo(s) were not imported "
+                 f"({reason}): {', '.join(gated_skipped)}.")
+
+    catalog = {
+        "version": "1.0-auto",
+        "generated_at": now.isoformat(timespec="seconds"),
+        "source": "huggingface",
+        "org": args.org,
+        "catalog_note": note,
+        "models": models,
+    }
+
+    payload = json.dumps(catalog, indent=2, ensure_ascii=False)
+
+    # ---- summary ----
+    print("\nSummary")
+    print("-------")
+    for s in stats:
+        flag = ""
+        if s["content_blocked"] and s["metric_blocks"] == 0:
+            flag = ("  [gated: token lacks access — request access on HF]" if token
+                    else "  [gated: metrics skipped — provide --token]")
+        elif s["content_blocked"]:
+            flag = "  [gated: imported with token]"
+        print(f"  {s['id']}: {s['configs']} config(s), {s['metric_blocks']} metric block(s){flag}")
+        if s["bench_errors"]:
+            print(f"      ! {s['bench_errors']} benchmark file(s) failed to parse/fetch "
+                  f"(see warnings above) — those metrics were not imported")
+        elif not s["content_blocked"] and s["bench_files"] > s["metric_blocks"]:
+            missing = s["bench_files"] - s["metric_blocks"]
+            print(f"      note: {missing} benchmark file(s) had no recognized metric values")
+    print(f"\n{len(models)} model(s) total.")
+    if gated_skipped and not token:
+        print("Tip: pass --token (or set HF_TOKEN / run `huggingface-cli login`) "
+              "to import gated repos' benchmark numbers.")
+
+    if args.dry_run:
+        print("\n--dry-run: not writing file. JSON follows:\n")
+        print(payload)
+        return 0
+
+    out = Path(args.output)
+    if not models and not args.force:
+        if out.exists():
+            print(f"\nERROR: produced 0 models; refusing to overwrite existing {out} "
+                  f"(use --force to override).", file=sys.stderr)
+            return 4
+        warn("produced 0 models — writing an empty catalog (no existing file to protect)")
+
+    # Atomic write: write a sibling temp file then replace, so an interrupted or
+    # failed write never leaves the live models.json truncated.
+    tmp = out.with_name(out.name + ".tmp")
+    try:
+        tmp.write_text(payload + "\n", encoding="utf-8")
+        os.replace(tmp, out)
+    except OSError as exc:
+        print(f"\nERROR: could not write {out}: {exc}", file=sys.stderr)
+        try:
+            tmp.unlink(missing_ok=True)
+        except OSError:
+            pass
+        return 3
+    print(f"\nWrote {out}  ({len(payload)} bytes)")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

index.html

@@ -3,153 +3,258 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Renesas AI Dashboard (POC) — Static</title>
+  <title>Renesas AI Models</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&display=swap" />
   <link rel="stylesheet" href="styles.css" />
 </head>
 
 <body>
+  <div class="bg-fx" aria-hidden="true">
+    <canvas id="bgfx"></canvas>
+    <span class="blob b1"></span>
+    <span class="blob b2"></span>
+  </div>
   <header class="topbar" role="banner">
     <div class="topbar-inner">
-      <div class="brand" aria-label="Renesas AI Dashboard">
-        <img class="brand-icon" src="assets/logo_renesas_light.svg" alt="Company logo" onerror="this.style.display='none'"/>
+      <div class="brand" aria-label="Renesas AI Models">
+        <img class="brand-icon" src="assets/logo_renesas_blue.svg" alt="Renesas" onerror="this.style.display='none'"/>
+        <span class="brand-divider" aria-hidden="true"></span>
         <div class="brand-text">
-          <div class="brand-title">AI Dashboard (POC)</div>
-          <div class="brand-subtitle">Renesas AI Model Explorer</div>
+          <div class="brand-title">AI Models</div>
+          <div class="brand-subtitle">Model Explorer</div>
         </div>
       </div>
 
-      <nav class="tabs" role="navigation" aria-label="Primary">
-        <button class="nav-item active" data-target="sec-explore" type="button">Explore</button>
-        <button class="nav-item" data-target="sec-all" type="button">All Models</button>
+      <nav class="tabs" role="navigation" aria-label="Primary" id="primaryNav">
+        <button class="nav-item active" data-target="sec-overview" type="button">Overview</button>
+        <button class="nav-item" data-target="sec-catalog" type="button">Catalog</button>
+        <button class="nav-item" data-target="sec-explore" type="button">Deploy</button>
       </nav>
+
+      <button class="nav-burger" id="navBurger" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="primaryNav">
+        <span></span><span></span><span></span>
+      </button>
     </div>
   </header>
 
   <main class="content" role="main">
 
-    <!-- Explore -->
-    <section id="sec-explore" class="section visible">
-      <div class="section-scroll">
-        <div class="grid explore-grid" style="align-items:start;">
-          <div class="card">
-            <h3 class="no-border">Filters</h3>
+    <!-- ===================== OVERVIEW (constellation) ===================== -->
+    <section id="sec-overview" class="section visible">
+        <section class="carousel-section featured" id="recentSection" hidden>
+          <div class="carousel-head">
+            <h2 class="carousel-title">Last Update</h2>
+            <div class="carousel-actions">
+              <span class="carousel-sub" id="recentSub"></span>
+              <button class="carousel-nav" id="recentPrev" type="button" aria-label="Scroll left">‹</button>
+              <button class="carousel-nav" id="recentNext" type="button" aria-label="Scroll right">›</button>
+            </div>
+          </div>
+          <div class="carousel-track" id="recentTrack"></div>
+        </section>
 
-            <div class="form-grid explore-form">
-              <label class="field">
-                <span class="label">Architecture</span>
-                <select id="arch" class="filter-select"></select>
-              </label>
-
-              <label class="field">
-                <span class="label">Modality</span>
-                <div class="radio-row" id="modality"></div>
-              </label>
-
-              <label class="field">
-                <span class="label">Purpose</span>
-                <div class="radio-col" id="purpose"></div>
-              </label>
-
-              <div class="field-row two">
-                <label class="field">
-                  <span class="label">Format</span>
-                  <div class="radio-row" id="fmt"></div>
-                </label>
+        <div class="stat-tiles" id="statTiles"></div>
 
-                <label class="field">
-                  <span class="label">Compute Target</span>
-                  <div class="radio-row" id="compute"></div>
-                </label>
-              </div>
+        <div class="card constellation-card">
+          <div class="card-head">
+            <h2 class="card-head-title">Model constellation</h2>
+            <p class="subtle tight" style="margin:0;">Every model and quantization plotted by throughput and size. Bubble size ∝ parameters. Click a point for details.</p>
+          </div>
+          <button class="filter-toggle" type="button" data-target="cstlControls" id="cstlFilterToggle" aria-controls="cstlControls" aria-expanded="false">
+            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M1.5 3h13M3.5 8h9M6 13h4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+            <span>Chart filters</span>
+            <svg class="ft-chevron" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+          <div class="cstl-controls" id="cstlControls">
+            <label class="field compact">
+              <span class="label">X axis</span>
+              <select id="cstlX" class="filter-select compact">
+                <option value="tok">Throughput (tok/s)</option>
+                <option value="size">Model size (params)</option>
+              </select>
+            </label>
+            <label class="field compact">
+              <span class="label">Y axis</span>
+              <select id="cstlY" class="filter-select compact">
+                <option value="size">Model size (params)</option>
+                <option value="tok">Throughput (tok/s)</option>
+              </select>
+            </label>
+            <label class="field compact">
+              <span class="label">Color by</span>
+              <select id="cstlColor" class="filter-select compact">
+                <option value="family">Family</option>
+                <option value="quant">Quantization</option>
+                <option value="format">Format</option>
+                <option value="target">Target</option>
+              </select>
+            </label>
+            <div class="field compact">
+              <span class="label">Source</span>
+              <div class="radio-row" id="cstlSource"></div>
+            </div>
+          </div>
 
-              <label class="field">
-                <span class="label">Hardware Config</span>
-                <select id="hwCfg" class="filter-select"></select>
-              </label>
+          <div class="constellation">
+            <canvas id="cstlCanvas"></canvas>
+            <div id="cstlTooltip" class="mini-tooltip"></div>
+          </div>
+          <div class="cstl-foot">
+            <div id="cstlLegend" class="legend"></div>
+            <div id="cstlStatus" class="subtle tight"></div>
+          </div>
+        </div>
+    </section>
 
-              <div class="matchline" id="matchCount"></div>
+    <!-- ===================== CATALOG (cards + table) ===================== -->
+    <section id="sec-catalog" class="section">
+      <div class="catalog-layout">
+        <aside class="facets" aria-label="Filters">
+          <div class="facets-head">
+            <button class="filter-toggle" type="button" data-target="facetsBody" aria-controls="facetsBody" aria-expanded="false">
+              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M1.5 3h13M3.5 8h9M6 13h4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+              <span>Filters</span>
+              <svg class="ft-chevron" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+            <span class="facets-title">Filters</span>
+            <button class="link-btn" id="cgReset" type="button">Reset</button>
+          </div>
+          <div class="facets-body" id="facetsBody">
+            <label class="field">
+              <span class="label">Search</span>
+              <input id="cgSearch" class="filter-input" placeholder="Search models…" />
+            </label>
+            <label class="field">
+              <span class="label">Sort</span>
+              <select id="cgSort" class="filter-select">
+                <option value="size_desc">Largest first</option>
+                <option value="size_asc">Smallest first</option>
+                <option value="tok_desc">Fastest (tok/s)</option>
+                <option value="name_asc">Name A–Z</option>
+              </select>
+            </label>
+            <div id="cgFacets" class="facet-groups"></div>
+          </div>
+        </aside>
 
-              <div class="model-picker">
-                <div class="model-picker-head">
-                  <div class="model-picker-title">Model</div>
-                  <div class="model-picker-subtle" id="modelCountHint"></div>
-                </div>
-                <select id="modelKey" class="filter-select model-list" size="12"></select>
-              </div>
+        <div class="catalog-main">
+          <div class="toolbar">
+            <div class="toolbar-count" id="cgCount"></div>
+            <div class="view-toggle" role="tablist" aria-label="View">
+              <button id="cgViewGrid" class="view-btn active" type="button" aria-pressed="true">▦ Grid</button>
+              <button id="cgViewTable" class="view-btn" type="button" aria-pressed="false">▤ Table</button>
             </div>
           </div>
 
-          <div class="card">
-            <div id="warning" class="note note-warn" style="display:none"></div>
-            <div id="details"></div>
-            <div id="actions"></div>
+          <div id="cardGrid" class="card-grid"></div>
+
+          <div id="tableView" class="table-view" hidden>
+            <div class="table-shell">
+              <div class="table-wrap">
+                <table class="table" id="modelsTable" aria-label="Models table">
+                  <thead></thead>
+                  <tbody></tbody>
+                </table>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- All Models (updated) -->
-    <section id="sec-all" class="section">
-      <div class="section-scroll">
+    <!-- ===================== EXPLORE (routing / download tool) ===================== -->
+    <section id="sec-explore" class="section">
         <div class="section-head">
-          <h1 class="section-title">All Models</h1>
-          <p class="subtle tight">
-            Table shows <b>default hardware config</b> main metrics per model. Use <b>Details</b> to open full model card.
-          </p>
+          <h1 class="section-title">Configure &amp; deploy</h1>
+          <p class="subtle tight">Set your format, target and hardware, pick a matching model, then copy the exact download command and open its benchmark tool.</p>
+          <ol class="deploy-steps">
+            <li><span class="ds-num">1</span><span class="ds-txt">Set constraints</span></li>
+            <li><span class="ds-num">2</span><span class="ds-txt">Pick a model</span></li>
+            <li><span class="ds-num">3</span><span class="ds-txt">Copy &amp; run</span></li>
+          </ol>
         </div>
+        <div class="grid explore-grid">
+          <div class="card">
+            <h3 class="no-border">Configure</h3>
 
-        <div class="card">
-          <div class="filters-row compact" id="t_filters_row">
-            <label class="field compact">
-              <span class="label">Modality</span>
-              <select id="t_modality" class="filter-select compact"></select>
-            </label>
-
-            <div class="field compact">
-              <span class="label">Format</span>
-              <div class="check-row compact" id="t_format"></div>
-            </div>
+            <div class="form-grid explore-form">
+              <button class="filter-toggle" type="button" data-target="exploreFilters" aria-controls="exploreFilters" aria-expanded="false">
+                <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M1.5 3h13M3.5 8h9M6 13h4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+                <span>Filters</span>
+                <svg class="ft-chevron" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              </button>
+              <div class="explore-filters" id="exploreFilters">
+                <!-- Primary tier: always visible -->
+                <label class="field compact">
+                  <span class="label">Architecture</span>
+                  <select id="arch" class="filter-select compact"></select>
+                </label>
 
-            <div class="field compact">
-              <span class="label">Supported HW</span>
-              <div class="check-row compact" id="t_hw"></div>
-            </div>
+                <div class="field-row two">
+                  <label class="field compact">
+                    <span class="label">Modality</span>
+                    <div class="radio-row" id="modality"></div>
+                  </label>
+                  <label class="field compact">
+                    <span class="label">Format</span>
+                    <div class="radio-row" id="fmt"></div>
+                  </label>
+                </div>
 
-            <label class="field inline compact">
-              <input type="checkbox" id="t_need_est" />
-              <span>Has Estimate</span>
-            </label>
+                <!-- Reveal toggle for secondary filters (reuses the generic
+                     delegated .filter-toggle handler below — no JS change) -->
+                <button class="filter-toggle filter-toggle--inline" type="button"
+                        data-target="exploreAdvanced" aria-controls="exploreAdvanced" aria-expanded="false">
+                  <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M2.5 5h11M4.5 8h7M6.5 11h3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+                  <span>Advanced</span>
+                  <svg class="ft-chevron" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </button>
 
-            <label class="field inline compact">
-              <input type="checkbox" id="t_need_hil" />
-              <span>Has HIL</span>
-            </label>
+                <!-- Secondary tier: collapsed by default on desktop, one click to reveal -->
+                <div class="explore-advanced" id="exploreAdvanced">
+                  <div class="field-row two">
+                    <label class="field compact">
+                      <span class="label">Compute Target</span>
+                      <div class="radio-row" id="compute"></div>
+                    </label>
+                    <label class="field compact">
+                      <span class="label">Hardware Config</span>
+                      <select id="hwCfg" class="filter-select compact"></select>
+                    </label>
+                  </div>
 
-            <label class="field compact grow">
-              <span class="label">Search</span>
-              <input id="t_search" class="filter-input compact" placeholder="Search…" />
-            </label>
-          </div>
+                  <label class="field compact">
+                    <span class="label">Purpose</span>
+                    <div class="radio-row" id="purpose"></div>
+                  </label>
+                </div>
+              </div>
 
-          <div class="subtle" id="t_status"></div>
+              <div class="matchline" id="matchCount"></div>
 
-          <div class="table-shell">
-            <div class="table-wrap">
-              <table class="table" id="modelsTable" aria-label="Models table">
-                <thead></thead>
-                <tbody></tbody>
-              </table>
+              <div class="model-picker">
+                <div class="model-picker-head">
+                  <div class="model-picker-title">Model</div>
+                  <div class="model-picker-subtle" id="modelCountHint"></div>
+                </div>
+                <select id="modelKey" class="filter-select model-list" size="12"></select>
+              </div>
             </div>
           </div>
+
+          <div class="card result-card">
+            <div id="warning" class="note note-warn" style="display:none"></div>
+            <div id="details"></div>
+            <div id="actions"></div>
+          </div>
         </div>
-      </div>
     </section>
 
   </main>
 
-  <div id="disclaimer" class="poc-overlay" aria-live="polite"></div>
-
-  <!-- Model details modal (All Models -> Details) -->
+  <!-- Model details modal -->
   <div id="modelModal" class="modal" aria-hidden="true" role="dialog" aria-label="Model details">
     <div class="modal-backdrop" data-modal-close="1"></div>
     <div class="modal-panel" role="document">
@@ -164,6 +269,120 @@
     </div>
   </div>
 
+  <script>
+    /* Brand network-mesh background — inspired by the Renesas circuit-network artwork:
+       a faint blueprint grid, then a constellation of nodes (small dots + larger glowing
+       hubs) connected by hairlines, tinted on a left→right blue→violet gradient. */
+    (function () {
+      var c = document.getElementById("bgfx");
+      if (!c) return;
+      var ctx = c.getContext("2d");
+      var w = 0, h = 0, dpr = 1, nodes = [], N = 0, LINK = 168, raf = 0;
+      var reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+      /* gradient stops: cool blue (left) -> Renesas blue -> violet (right) */
+      var C0 = [67, 171, 226], C1 = [42, 40, 157], C2 = [150, 104, 214];
+      function lerp(a, b, t) { return [a[0]+(b[0]-a[0])*t, a[1]+(b[1]-a[1])*t, a[2]+(b[2]-a[2])*t]; }
+      function tint(t) { return t < 0.5 ? lerp(C0, C1, t * 2) : lerp(C1, C2, (t - 0.5) * 2); }
+      function rgba(c, a) { return "rgba(" + (c[0]|0) + "," + (c[1]|0) + "," + (c[2]|0) + "," + a + ")"; }
+
+      function resize() {
+        dpr = Math.min(window.devicePixelRatio || 1, 2);
+        w = c.clientWidth; h = c.clientHeight;
+        c.width = Math.max(1, Math.floor(w * dpr));
+        c.height = Math.max(1, Math.floor(h * dpr));
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      }
+      function seed() {
+        N = Math.max(40, Math.min(110, Math.round((w * h) / 14000)));
+        nodes = [];
+        for (var i = 0; i < N; i++) {
+          var hub = Math.random() < 0.14;
+          nodes.push({
+            x: Math.random() * w, y: Math.random() * h,
+            vx: (Math.random() - 0.5) * 0.20, vy: (Math.random() - 0.5) * 0.20,
+            hub: hub, r: hub ? 3.2 + Math.random() * 3.4 : 1.0 + Math.random() * 1.6
+          });
+        }
+      }
+      function grid() {
+        var step = 44, g = "rgba(67,140,210,0.06)";
+        ctx.lineWidth = 1; ctx.strokeStyle = g; ctx.beginPath();
+        for (var x = 0; x <= w; x += step) { ctx.moveTo(x, 0); ctx.lineTo(x, h); }
+        for (var y = 0; y <= h; y += step) { ctx.moveTo(0, y); ctx.lineTo(w, y); }
+        ctx.stroke();
+      }
+      function draw(step) {
+        ctx.clearRect(0, 0, w, h);
+        grid();
+        if (step) for (var k = 0; k < N; k++) {
+          var n = nodes[k]; n.x += n.vx; n.y += n.vy;
+          if (n.x < 0 || n.x > w) n.vx *= -1; if (n.y < 0 || n.y > h) n.vy *= -1;
+        }
+        /* links */
+        for (var i = 0; i < N; i++) for (var j = i + 1; j < N; j++) {
+          var a = nodes[i], b = nodes[j], dx = a.x - b.x, dy = a.y - b.y, d = Math.sqrt(dx * dx + dy * dy);
+          if (d < LINK) {
+            var mid = ((a.x + b.x) / 2) / w;
+            ctx.strokeStyle = rgba(tint(mid), ((1 - d / LINK) * 0.16).toFixed(3));
+            ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
+          }
+        }
+        /* nodes */
+        for (var m = 0; m < N; m++) {
+          var p = nodes[m], col = tint(p.x / w);
+          if (p.hub) {
+            var halo = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 4.5);
+            halo.addColorStop(0, rgba(col, 0.28)); halo.addColorStop(1, rgba(col, 0));
+            ctx.fillStyle = halo; ctx.beginPath(); ctx.arc(p.x, p.y, p.r * 4.5, 0, Math.PI * 2); ctx.fill();
+          }
+          ctx.fillStyle = rgba(col, p.hub ? 0.85 : 0.5);
+          ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
+        }
+      }
+      function tick() { draw(true); raf = requestAnimationFrame(tick); }
+      function start() { resize(); seed(); if (raf) cancelAnimationFrame(raf); if (reduce) draw(false); else tick(); }
+      window.addEventListener("resize", function () { resize(); seed(); if (reduce) draw(false); });
+      start();
+    })();
+  </script>
+  <script>
+    /* Mobile nav: burger toggles the menu; selecting an item closes it. */
+    (function () {
+      var burger = document.getElementById("navBurger");
+      var nav = document.getElementById("primaryNav");
+      if (!burger || !nav) return;
+      function setOpen(open) {
+        nav.classList.toggle("open", open);
+        burger.classList.toggle("active", open);
+        burger.setAttribute("aria-expanded", open ? "true" : "false");
+      }
+      burger.addEventListener("click", function (e) {
+        e.stopPropagation();
+        setOpen(!nav.classList.contains("open"));
+      });
+      nav.addEventListener("click", function (e) {
+        if (e.target.closest(".nav-item")) setOpen(false);
+      });
+      document.addEventListener("click", function (e) {
+        if (nav.classList.contains("open") && !nav.contains(e.target) && e.target !== burger) setOpen(false);
+      });
+    })();
+  </script>
+  <script>
+    /* Collapsible filter clusters (phone): a "Filters" button toggles each group. */
+    (function () {
+      document.addEventListener("click", function (e) {
+        var btn = e.target.closest(".filter-toggle");
+        if (!btn) return;
+        var t = document.getElementById(btn.getAttribute("data-target"));
+        if (!t) return;
+        var open = t.classList.toggle("open");
+        btn.classList.toggle("active", open);
+        btn.setAttribute("aria-expanded", open ? "true" : "false");
+      });
+    })();
+  </script>
   <script src="app.js" defer></script>
 </body>
 </html>

links.json

@@ -1,17 +0,0 @@
-{
-  "spaces": {
-    "onnx_perf_explorer": "Renesas/ONNX-Performance-Explorer",
-    "ort_benchmark": "Renesas/ORT-Benchmark",
-    "gguf_llamacpp_benchmark": "Renesas/GGUF-llamacpp-Benchmark"
-  },
-  "collections": {
-    "onnx": "",
-    "gguf": "",
-    "performanceestimate": "",
-    "cpu": "",
-    "npu": "",
-    "llm": "",
-    "vlm": "",
-    "llama32_1b": ""
-  }
-}

models.json

@@ -1,659 +1,127 @@
 {
-  "version": "0.7",
-  "catalog_note": "POC ONLY: Fake models/metrics for UI prototyping. Not real performance data.",
+  "version": "1.0-auto",
+  "generated_at": "2026-06-23T16:50:24+02:00",
+  "source": "huggingface",
+  "org": "Renesas",
+  "catalog_note": "Auto-generated from Hugging Face 'Renesas' repositories on 2026-06-23 16:50 W. Europe Daylight Time. Metrics reflect each repo's published benchmark YAML files.",
   "models": [
     {
-      "key": "llama32-1b-instruct",
-      "display_name": "Llama3.2-1B Instruct",
-      "architecture": "Llama3.2-1B",
+      "key": "llama-3.2-1b-instruct",
+      "display_name": "Llama-3.2-1B-Instruct",
+      "architecture": "Llama-3.2-1B",
       "model_size_m": 1000,
       "modality": "LLM",
       "variant": "Instruct",
       "targets": [
-        "CPU",
         "NPU"
       ],
-      "onnx_repo": "Renesas/Llama3.2-1B-Instruct-ONNX",
-      "gguf_repo": "Renesas/Llama3.2-1B-Instruct-GGUF",
+      "onnx_repo": "Renesas/Llama-3.2-1B-Instruct-ONNX",
+      "gguf_repo": "Renesas/Llama-3.2-1B-Instruct-GGUF",
       "onnx_artifacts": [
         "fp16",
-        "int8"
+        "w4a8",
+        "fp32"
       ],
       "gguf_artifacts": [
-        "Q4_K_M",
-        "Q8_0"
+        "fp16",
+        "w4a16"
+      ],
+      "base_model": "meta-llama/Llama-3.2-1B-Instruct",
+      "license": "llama3.2",
+      "tasks": [
+        "text-generation",
+        "instruction-following",
+        "chat"
       ],
+      "created_at": "2026-02-20T08:59:16.000Z",
+      "last_modified": "2026-06-22T09:24:19.000Z",
       "hardware_configs": [
         {
-          "id": "X5H-200TOPS",
-          "label": "X5H 200TOPS Reference Platform",
+          "id": "RCAR-X5H",
+          "label": "R-Car X5H (NPX6-48K)",
           "targets": [
-            "CPU",
             "NPU"
           ],
-          "notes": "Default reference board config",
+          "notes": "vendor=renesas; chip=rcar-x5h; cpu=arm-cortex-a720; npu=npx6-48k; memory_mb=8192",
           "metrics": {
             "artifacts": {
               "fp16": {
                 "estimate": {
-                  "accuracy": 0.63,
-                  "llm_metrics": {
-                    "overall": 63.0,
-                    "mmlu": 45.0,
-                    "gsm8k": 22.0,
-                    "hellaswag": 64.5,
-                    "truthfulqa": 38.0,
-                    "winogrande": 59.0,
-                    "arc_challenge": 35.0,
-                    "mt_bench": 6.2
-                  },
-                  "cpu": {
-                    "tok_s": 18.0,
-                    "latency_ms_p50": 55.0,
-                    "peak_mem_mb": 820
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 45.0,
-                    "latency_ms_p50": 22.0,
-                    "peak_mem_mb": 610
+                    "tok_s": 18.73,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "dsp": null,
                   "total": {
-                    "tok_s": 45.0,
-                    "peak_mem_mb": 900,
-                    "latency_ms_p50": 77.0
+                    "tok_s": 18.73,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "last_updated": "2026-03-01"
+                  "engine": "ppa-estimator",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-03-09"
                 },
                 "hil": {
-                  "accuracy": 0.624,
-                  "llm_metrics": {
-                    "overall": 62.4,
-                    "mmlu": 44.4,
-                    "gsm8k": 21.4,
-                    "hellaswag": 63.9,
-                    "truthfulqa": 37.4,
-                    "winogrande": 58.4,
-                    "arc_challenge": 34.4,
-                    "mt_bench": 6.1
-                  },
-                  "cpu": {
-                    "tok_s": 16.5,
-                    "latency_ms_p50": 60.0,
-                    "peak_mem_mb": 840
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 38.0,
-                    "latency_ms_p50": 25.0,
-                    "peak_mem_mb": 640
+                    "tok_s": 20.25,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "dsp": null,
                   "total": {
-                    "tok_s": 38.0,
-                    "peak_mem_mb": 920,
-                    "latency_ms_p50": 85.0
+                    "tok_s": 20.25,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-01"
+                  "engine": "llama.cpp",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-06-22",
+                  "batch_size": 1,
+                  "setup": "R-Car X5H (NPX6-48K)"
                 }
               },
-              "int8": {
-                "estimate": {
-                  "accuracy": 0.622,
-                  "llm_metrics": {
-                    "overall": 62.2,
-                    "mmlu": 44.2,
-                    "gsm8k": 21.2,
-                    "hellaswag": 63.7,
-                    "truthfulqa": 37.2,
-                    "winogrande": 58.2,
-                    "arc_challenge": 34.2,
-                    "mt_bench": 6.1
-                  },
-                  "cpu": {
-                    "tok_s": 18.0,
-                    "latency_ms_p50": 55.0,
-                    "peak_mem_mb": 820
-                  },
-                  "npu": {
-                    "tok_s": 45.0,
-                    "latency_ms_p50": 22.0,
-                    "peak_mem_mb": 610
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 45.0,
-                    "peak_mem_mb": 900,
-                    "latency_ms_p50": 77.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": {
-                  "accuracy": 0.616,
-                  "llm_metrics": {
-                    "overall": 61.6,
-                    "mmlu": 43.6,
-                    "gsm8k": 20.6,
-                    "hellaswag": 63.1,
-                    "truthfulqa": 36.6,
-                    "winogrande": 57.6,
-                    "arc_challenge": 33.6,
-                    "mt_bench": 6.1
-                  },
-                  "cpu": {
-                    "tok_s": 16.5,
-                    "latency_ms_p50": 60.0,
-                    "peak_mem_mb": 840
-                  },
-                  "npu": {
-                    "tok_s": 38.0,
-                    "latency_ms_p50": 25.0,
-                    "peak_mem_mb": 640
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 38.0,
-                    "peak_mem_mb": 920,
-                    "latency_ms_p50": 85.0
-                  },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-01"
-                }
-              },
-              "Q4_K_M": {
-                "estimate": {
-                  "accuracy": 0.595,
-                  "llm_metrics": {
-                    "overall": 59.5,
-                    "mmlu": 41.5,
-                    "gsm8k": 18.5,
-                    "hellaswag": 61.0,
-                    "truthfulqa": 34.5,
-                    "winogrande": 55.5,
-                    "arc_challenge": 31.5,
-                    "mt_bench": 6.0
-                  },
-                  "cpu": {
-                    "tok_s": 18.0,
-                    "latency_ms_p50": 55.0,
-                    "peak_mem_mb": 820
-                  },
-                  "npu": {
-                    "tok_s": 45.0,
-                    "latency_ms_p50": 22.0,
-                    "peak_mem_mb": 610
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 45.0,
-                    "peak_mem_mb": 900,
-                    "latency_ms_p50": 77.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": {
-                  "accuracy": 0.589,
-                  "llm_metrics": {
-                    "overall": 58.9,
-                    "mmlu": 40.9,
-                    "gsm8k": 17.9,
-                    "hellaswag": 60.4,
-                    "truthfulqa": 33.9,
-                    "winogrande": 54.9,
-                    "arc_challenge": 30.9,
-                    "mt_bench": 5.9
-                  },
-                  "cpu": {
-                    "tok_s": 16.5,
-                    "latency_ms_p50": 60.0,
-                    "peak_mem_mb": 840
-                  },
-                  "npu": {
-                    "tok_s": 38.0,
-                    "latency_ms_p50": 25.0,
-                    "peak_mem_mb": 640
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 38.0,
-                    "peak_mem_mb": 920,
-                    "latency_ms_p50": 85.0
-                  },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-01"
-                }
-              },
-              "Q8_0": {
-                "estimate": {
-                  "accuracy": 0.617,
-                  "llm_metrics": {
-                    "overall": 61.7,
-                    "mmlu": 43.7,
-                    "gsm8k": 20.7,
-                    "hellaswag": 63.2,
-                    "truthfulqa": 36.7,
-                    "winogrande": 57.7,
-                    "arc_challenge": 33.7,
-                    "mt_bench": 6.1
-                  },
-                  "cpu": {
-                    "tok_s": 18.0,
-                    "latency_ms_p50": 55.0,
-                    "peak_mem_mb": 820
-                  },
-                  "npu": {
-                    "tok_s": 45.0,
-                    "latency_ms_p50": 22.0,
-                    "peak_mem_mb": 610
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 45.0,
-                    "peak_mem_mb": 900,
-                    "latency_ms_p50": 77.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": {
-                  "accuracy": 0.611,
-                  "llm_metrics": {
-                    "overall": 61.1,
-                    "mmlu": 43.1,
-                    "gsm8k": 20.1,
-                    "hellaswag": 62.6,
-                    "truthfulqa": 36.1,
-                    "winogrande": 57.1,
-                    "arc_challenge": 33.1,
-                    "mt_bench": 6.1
-                  },
-                  "cpu": {
-                    "tok_s": 16.5,
-                    "latency_ms_p50": 60.0,
-                    "peak_mem_mb": 840
-                  },
-                  "npu": {
-                    "tok_s": 38.0,
-                    "latency_ms_p50": 25.0,
-                    "peak_mem_mb": 640
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 38.0,
-                    "peak_mem_mb": 920,
-                    "latency_ms_p50": 85.0
-                  },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-01"
-                }
-              }
-            }
-          }
-        },
-        {
-          "id": "X5H-200TOPS-LOWPWR",
-          "label": "X5H 200TOPS Reference Platform — Low Power",
-          "targets": [
-            "CPU",
-            "NPU"
-          ],
-          "notes": "Lower clocks / lower power envelope",
-          "metrics": {
-            "artifacts": {
-              "fp16": {
-                "estimate": {
-                  "accuracy": 0.628,
-                  "llm_metrics": {
-                    "overall": 62.8,
-                    "mmlu": 44.8,
-                    "gsm8k": 21.8,
-                    "hellaswag": 64.3,
-                    "truthfulqa": 37.8,
-                    "winogrande": 58.8,
-                    "arc_challenge": 34.8,
-                    "mt_bench": 6.1
-                  },
-                  "cpu": {
-                    "tok_s": 17.0,
-                    "latency_ms_p50": 58.0,
-                    "peak_mem_mb": 820
-                  },
-                  "npu": {
-                    "tok_s": 41.0,
-                    "latency_ms_p50": 24.0,
-                    "peak_mem_mb": 610
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 41.0,
-                    "peak_mem_mb": 900,
-                    "latency_ms_p50": 82.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": null
-              },
-              "int8": {
-                "estimate": {
-                  "accuracy": 0.62,
-                  "llm_metrics": {
-                    "overall": 62.0,
-                    "mmlu": 44.0,
-                    "gsm8k": 21.0,
-                    "hellaswag": 63.5,
-                    "truthfulqa": 37.0,
-                    "winogrande": 58.0,
-                    "arc_challenge": 34.0,
-                    "mt_bench": 6.1
-                  },
-                  "cpu": {
-                    "tok_s": 17.0,
-                    "latency_ms_p50": 58.0,
-                    "peak_mem_mb": 820
-                  },
-                  "npu": {
-                    "tok_s": 41.0,
-                    "latency_ms_p50": 24.0,
-                    "peak_mem_mb": 610
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 41.0,
-                    "peak_mem_mb": 900,
-                    "latency_ms_p50": 82.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": null
-              },
-              "Q4_K_M": {
-                "estimate": {
-                  "accuracy": 0.593,
-                  "llm_metrics": {
-                    "overall": 59.3,
-                    "mmlu": 41.3,
-                    "gsm8k": 18.3,
-                    "hellaswag": 60.8,
-                    "truthfulqa": 34.3,
-                    "winogrande": 55.3,
-                    "arc_challenge": 31.3,
-                    "mt_bench": 6.0
-                  },
-                  "cpu": {
-                    "tok_s": 17.0,
-                    "latency_ms_p50": 58.0,
-                    "peak_mem_mb": 820
-                  },
-                  "npu": {
-                    "tok_s": 41.0,
-                    "latency_ms_p50": 24.0,
-                    "peak_mem_mb": 610
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 41.0,
-                    "peak_mem_mb": 900,
-                    "latency_ms_p50": 82.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": null
-              },
-              "Q8_0": {
-                "estimate": {
-                  "accuracy": 0.615,
-                  "llm_metrics": {
-                    "overall": 61.5,
-                    "mmlu": 43.5,
-                    "gsm8k": 20.5,
-                    "hellaswag": 63.0,
-                    "truthfulqa": 36.5,
-                    "winogrande": 57.5,
-                    "arc_challenge": 33.5,
-                    "mt_bench": 6.1
-                  },
-                  "cpu": {
-                    "tok_s": 17.0,
-                    "latency_ms_p50": 58.0,
-                    "peak_mem_mb": 820
-                  },
-                  "npu": {
-                    "tok_s": 41.0,
-                    "latency_ms_p50": 24.0,
-                    "peak_mem_mb": 610
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 41.0,
-                    "peak_mem_mb": 900,
-                    "latency_ms_p50": 82.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": null
-              }
-            }
-          }
-        }
-      ]
-    },
-    {
-      "key": "llama32-1b-base",
-      "display_name": "Llama3.2-1B Base",
-      "architecture": "Llama3.2-1B",
-      "model_size_m": 1000,
-      "modality": "LLM",
-      "variant": "Base",
-      "targets": [
-        "CPU"
-      ],
-      "onnx_repo": "Renesas/Llama3.2-1B-Base-ONNX",
-      "gguf_repo": "Renesas/Llama3.2-1B-Base-GGUF",
-      "onnx_artifacts": [
-        "fp16"
-      ],
-      "gguf_artifacts": [
-        "Q4_K_M"
-      ],
-      "hardware_configs": [
-        {
-          "id": "X5H-200TOPS",
-          "label": "X5H 200TOPS Reference Platform",
-          "targets": [
-            "CPU"
-          ],
-          "metrics": {
-            "artifacts": {
-              "fp16": {
+              "w4a16": {
                 "estimate": null,
                 "hil": {
-                  "accuracy": 0.549,
-                  "llm_metrics": {
-                    "overall": 54.9,
-                    "mmlu": 36.9,
-                    "gsm8k": 13.9,
-                    "hellaswag": 56.4,
-                    "truthfulqa": 29.9,
-                    "winogrande": 50.9,
-                    "arc_challenge": 26.9,
-                    "mt_bench": 5.7
-                  },
-                  "cpu": {
-                    "tok_s": 20.0,
-                    "latency_ms_p50": 52.0,
-                    "peak_mem_mb": 760
+                  "accuracy": null,
+                  "npu": {
+                    "tok_s": 41.38,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "npu": null,
-                  "dsp": null,
                   "total": {
-                    "tok_s": 20.0,
-                    "peak_mem_mb": 810,
-                    "latency_ms_p50": 52.0
+                    "tok_s": 41.38,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-01"
+                  "engine": "llama.cpp",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-06-22",
+                  "batch_size": 1,
+                  "setup": "R-Car X5H (NPX6-48K)"
                 }
               },
-              "Q4_K_M": {
+              "fp32": {
                 "estimate": null,
-                "hil": {
-                  "accuracy": 0.514,
-                  "llm_metrics": {
-                    "overall": 51.4,
-                    "mmlu": 33.4,
-                    "gsm8k": 10.4,
-                    "hellaswag": 52.9,
-                    "truthfulqa": 26.4,
-                    "winogrande": 47.4,
-                    "arc_challenge": 23.4,
-                    "mt_bench": 5.6
-                  },
-                  "cpu": {
-                    "tok_s": 20.0,
-                    "latency_ms_p50": 52.0,
-                    "peak_mem_mb": 760
-                  },
-                  "npu": null,
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 20.0,
-                    "peak_mem_mb": 810,
-                    "latency_ms_p50": 52.0
-                  },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-01"
-                }
-              }
-            }
-          }
-        }
-      ]
-    },
-    {
-      "key": "vlm-tiny-visionchat",
-      "display_name": "VLM Tiny VisionChat",
-      "architecture": "VLM-Tiny-450M",
-      "model_size_m": 450,
-      "modality": "VLM",
-      "variant": "Instruct",
-      "targets": [
-        "CPU",
-        "NPU"
-      ],
-      "onnx_repo": "Renesas/VLM-Tiny-VisionChat-ONNX",
-      "gguf_repo": "Renesas/VLM-Tiny-VisionChat-GGUF",
-      "onnx_artifacts": [
-        "fp16",
-        "int8"
-      ],
-      "gguf_artifacts": [
-        "Q4_K_M"
-      ],
-      "hardware_configs": [
-        {
-          "id": "X5H-200TOPS",
-          "label": "X5H 200TOPS Reference Platform",
-          "targets": [
-            "CPU",
-            "NPU"
-          ],
-          "metrics": {
-            "artifacts": {
-              "fp16": {
-                "estimate": {
-                  "accuracy": 0.55,
-                  "vlm_metrics": {
-                    "overall": 55.0,
-                    "mmbench": 50.0,
-                    "vqav2": 57.0,
-                    "seedbench": 47.0,
-                    "pope": 52.0
-                  },
-                  "cpu": {
-                    "tok_s": 5.0,
-                    "latency_ms_p50": 180.0,
-                    "peak_mem_mb": 920
-                  },
-                  "npu": {
-                    "tok_s": 14.0,
-                    "latency_ms_p50": 70.0,
-                    "peak_mem_mb": 690
-                  },
-                  "dsp": {
-                    "latency_ms_p50": 12.0,
-                    "peak_mem_mb": 32
-                  },
-                  "total": {
-                    "tok_s": 14.0,
-                    "peak_mem_mb": 980,
-                    "latency_ms_p50": 262.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
                 "hil": null
               },
-              "int8": {
+              "w4a8": {
                 "estimate": {
-                  "accuracy": 0.542,
-                  "vlm_metrics": {
-                    "overall": 54.2,
-                    "mmbench": 49.2,
-                    "vqav2": 56.2,
-                    "seedbench": 46.2,
-                    "pope": 51.2
-                  },
-                  "cpu": {
-                    "tok_s": 5.0,
-                    "latency_ms_p50": 180.0,
-                    "peak_mem_mb": 920
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 14.0,
-                    "latency_ms_p50": 70.0,
-                    "peak_mem_mb": 690
-                  },
-                  "dsp": {
-                    "latency_ms_p50": 12.0,
-                    "peak_mem_mb": 32
-                  },
-                  "total": {
-                    "tok_s": 14.0,
-                    "peak_mem_mb": 980,
-                    "latency_ms_p50": 262.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": null
-              },
-              "Q4_K_M": {
-                "estimate": {
-                  "accuracy": 0.515,
-                  "vlm_metrics": {
-                    "overall": 51.5,
-                    "mmbench": 46.5,
-                    "vqav2": 53.5,
-                    "seedbench": 43.5,
-                    "pope": 48.5
-                  },
-                  "cpu": {
-                    "tok_s": 5.0,
-                    "latency_ms_p50": 180.0,
-                    "peak_mem_mb": 920
-                  },
-                  "npu": {
-                    "tok_s": 14.0,
-                    "latency_ms_p50": 70.0,
-                    "peak_mem_mb": 690
-                  },
-                  "dsp": {
-                    "latency_ms_p50": 12.0,
-                    "peak_mem_mb": 32
+                    "tok_s": 72.98,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
                   "total": {
-                    "tok_s": 14.0,
-                    "peak_mem_mb": 980,
-                    "latency_ms_p50": 262.0
+                    "tok_s": 72.98,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "last_updated": "2026-03-01"
+                  "engine": "ppa-estimator",
+                  "execution_provider": "bw",
+                  "last_updated": "2026-03-09"
                 },
                 "hil": null
               }
@@ -663,99 +131,81 @@
       ]
     },
     {
-      "key": "demo-gguf-only",
-      "display_name": "Demo GGUF-only Model",
-      "architecture": "Demo-700M",
-      "model_size_m": 700,
+      "key": "llama-3.2-3b-instruct",
+      "display_name": "Llama-3.2-3B-Instruct",
+      "architecture": "Llama-3.2-3B",
+      "model_size_m": 3000,
       "modality": "LLM",
       "variant": "Instruct",
       "targets": [
-        "CPU",
         "NPU"
       ],
       "onnx_repo": "",
-      "gguf_repo": "Renesas/Demo-700M-GGUF",
+      "gguf_repo": "Renesas/Llama-3.2-3B-Instruct-GGUF",
       "onnx_artifacts": [],
       "gguf_artifacts": [
-        "Q4_K_M",
-        "Q8_0"
+        "fp16",
+        "w4a16"
       ],
+      "base_model": "meta-llama/Llama-3.2-3B-Instruct",
+      "license": "llama3.2",
+      "tasks": [
+        "text-generation",
+        "instruction-following",
+        "chat"
+      ],
+      "created_at": "2026-05-11T09:18:02.000Z",
+      "last_modified": "2026-06-22T09:30:11.000Z",
       "hardware_configs": [
         {
-          "id": "X5H-100TOPS",
-          "label": "X5H 100TOPS Reference Platform",
+          "id": "RCAR-X5H",
+          "label": "R-Car X5H (NPX6-48K)",
           "targets": [
-            "CPU",
             "NPU"
           ],
+          "notes": "vendor=renesas; chip=rcar-x5h; cpu=arm-cortex-a720; npu=npx6-48k; memory_mb=8192",
           "metrics": {
             "artifacts": {
-              "Q4_K_M": {
+              "fp16": {
                 "estimate": null,
                 "hil": {
-                  "accuracy": 0.558,
-                  "llm_metrics": {
-                    "overall": 55.8,
-                    "mmlu": 37.8,
-                    "gsm8k": 14.8,
-                    "hellaswag": 57.3,
-                    "truthfulqa": 30.8,
-                    "winogrande": 51.8,
-                    "arc_challenge": 27.8,
-                    "mt_bench": 5.8
-                  },
-                  "cpu": {
-                    "tok_s": 24.0,
-                    "latency_ms_p50": 40.0,
-                    "peak_mem_mb": 740
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 52.0,
-                    "latency_ms_p50": 18.0,
-                    "peak_mem_mb": 600
+                    "tok_s": 8.76,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "dsp": null,
                   "total": {
-                    "tok_s": 52.0,
-                    "peak_mem_mb": 820,
-                    "latency_ms_p50": 58.0
+                    "tok_s": 8.76,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "setup": "DEMO-HIL-RIG-2",
-                  "last_updated": "2026-03-01"
+                  "engine": "llama.cpp",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-06-22",
+                  "batch_size": 1,
+                  "setup": "R-Car X5H (NPX6-48K)"
                 }
               },
-              "Q8_0": {
+              "w4a16": {
                 "estimate": null,
                 "hil": {
-                  "accuracy": 0.58,
-                  "llm_metrics": {
-                    "overall": 58.0,
-                    "mmlu": 40.0,
-                    "gsm8k": 17.0,
-                    "hellaswag": 59.5,
-                    "truthfulqa": 33.0,
-                    "winogrande": 54.0,
-                    "arc_challenge": 30.0,
-                    "mt_bench": 5.9
-                  },
-                  "cpu": {
-                    "tok_s": 24.0,
-                    "latency_ms_p50": 40.0,
-                    "peak_mem_mb": 740
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 52.0,
-                    "latency_ms_p50": 18.0,
-                    "peak_mem_mb": 600
+                    "tok_s": 17.46,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "dsp": null,
                   "total": {
-                    "tok_s": 52.0,
-                    "peak_mem_mb": 820,
-                    "latency_ms_p50": 58.0
+                    "tok_s": 17.46,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "setup": "DEMO-HIL-RIG-2",
-                  "last_updated": "2026-03-01"
+                  "engine": "llama.cpp",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-06-22",
+                  "batch_size": 1,
+                  "setup": "R-Car X5H (NPX6-48K)"
                 }
               }
             }
@@ -764,286 +214,82 @@
       ]
     },
     {
-      "key": "lfm-3b-instruct",
-      "display_name": "LFM-3B Instruct",
-      "architecture": "LFM-3B",
+      "key": "qwen2.5-vl-3b-instruct",
+      "display_name": "Qwen2.5-VL-3B-Instruct",
+      "architecture": "Qwen2.5-VL-3B",
       "model_size_m": 3000,
       "modality": "LLM",
       "variant": "Instruct",
       "targets": [
-        "CPU",
         "NPU"
       ],
-      "onnx_repo": "Renesas/LFM-3B-Instruct-ONNX",
-      "gguf_repo": "Renesas/LFM-3B-Instruct-GGUF",
-      "onnx_artifacts": [
+      "onnx_repo": "",
+      "gguf_repo": "Renesas/Qwen2.5-VL-3B-Instruct-GGUF",
+      "onnx_artifacts": [],
+      "gguf_artifacts": [
         "fp16",
-        "int8"
+        "w4a16"
       ],
-      "gguf_artifacts": [
-        "Q4_K_M",
-        "Q8_0"
+      "base_model": "Qwen/Qwen2.5-VL-3B-Instruct",
+      "license": "other",
+      "tasks": [
+        "image-text-to-text",
+        "text-generation",
+        "instruction-following",
+        "chat"
       ],
+      "created_at": "2026-05-13T09:09:11.000Z",
+      "last_modified": "2026-06-23T10:48:46.000Z",
       "hardware_configs": [
         {
-          "id": "X5H-200TOPS",
-          "label": "X5H 200TOPS Reference Platform",
+          "id": "RCAR-X5H",
+          "label": "R-Car X5H (NPX6-48K)",
           "targets": [
-            "CPU",
             "NPU"
           ],
+          "notes": "vendor=renesas; chip=rcar-x5h; cpu=arm-cortex-a720; npu=npx6-48k; memory_mb=8192",
           "metrics": {
             "artifacts": {
               "fp16": {
-                "estimate": {
-                  "accuracy": 0.7,
-                  "llm_metrics": {
-                    "overall": 70.0,
-                    "mmlu": 52.0,
-                    "gsm8k": 29.0,
-                    "hellaswag": 71.5,
-                    "truthfulqa": 45.0,
-                    "winogrande": 66.0,
-                    "arc_challenge": 42.0,
-                    "mt_bench": 6.5
-                  },
-                  "cpu": {
-                    "tok_s": 7.5,
-                    "latency_ms_p50": 125.0,
-                    "peak_mem_mb": 1850
-                  },
-                  "npu": {
-                    "tok_s": 19.0,
-                    "latency_ms_p50": 52.0,
-                    "peak_mem_mb": 1320
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 19.0,
-                    "peak_mem_mb": 1980,
-                    "latency_ms_p50": 177.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": {
-                  "accuracy": 0.694,
-                  "llm_metrics": {
-                    "overall": 69.4,
-                    "mmlu": 51.4,
-                    "gsm8k": 28.4,
-                    "hellaswag": 70.9,
-                    "truthfulqa": 44.4,
-                    "winogrande": 65.4,
-                    "arc_challenge": 41.4,
-                    "mt_bench": 6.5
-                  },
-                  "cpu": {
-                    "tok_s": 6.8,
-                    "latency_ms_p50": 138.0,
-                    "peak_mem_mb": 1900
-                  },
-                  "npu": {
-                    "tok_s": 16.5,
-                    "latency_ms_p50": 58.0,
-                    "peak_mem_mb": 1400
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 16.5,
-                    "peak_mem_mb": 2050,
-                    "latency_ms_p50": 196.0
-                  },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-02"
-                }
-              },
-              "int8": {
-                "estimate": {
-                  "accuracy": 0.692,
-                  "llm_metrics": {
-                    "overall": 69.2,
-                    "mmlu": 51.2,
-                    "gsm8k": 28.2,
-                    "hellaswag": 70.7,
-                    "truthfulqa": 44.2,
-                    "winogrande": 65.2,
-                    "arc_challenge": 41.2,
-                    "mt_bench": 6.5
-                  },
-                  "cpu": {
-                    "tok_s": 7.5,
-                    "latency_ms_p50": 125.0,
-                    "peak_mem_mb": 1850
-                  },
-                  "npu": {
-                    "tok_s": 19.0,
-                    "latency_ms_p50": 52.0,
-                    "peak_mem_mb": 1320
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 19.0,
-                    "peak_mem_mb": 1980,
-                    "latency_ms_p50": 177.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
-                "hil": {
-                  "accuracy": 0.686,
-                  "llm_metrics": {
-                    "overall": 68.6,
-                    "mmlu": 50.6,
-                    "gsm8k": 27.6,
-                    "hellaswag": 70.1,
-                    "truthfulqa": 43.6,
-                    "winogrande": 64.6,
-                    "arc_challenge": 40.6,
-                    "mt_bench": 6.4
-                  },
-                  "cpu": {
-                    "tok_s": 6.8,
-                    "latency_ms_p50": 138.0,
-                    "peak_mem_mb": 1900
-                  },
-                  "npu": {
-                    "tok_s": 16.5,
-                    "latency_ms_p50": 58.0,
-                    "peak_mem_mb": 1400
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 16.5,
-                    "peak_mem_mb": 2050,
-                    "latency_ms_p50": 196.0
-                  },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-02"
-                }
-              },
-              "Q4_K_M": {
-                "estimate": {
-                  "accuracy": 0.665,
-                  "llm_metrics": {
-                    "overall": 66.5,
-                    "mmlu": 48.5,
-                    "gsm8k": 25.5,
-                    "hellaswag": 68.0,
-                    "truthfulqa": 41.5,
-                    "winogrande": 62.5,
-                    "arc_challenge": 38.5,
-                    "mt_bench": 6.3
-                  },
-                  "cpu": {
-                    "tok_s": 7.5,
-                    "latency_ms_p50": 125.0,
-                    "peak_mem_mb": 1850
-                  },
-                  "npu": {
-                    "tok_s": 19.0,
-                    "latency_ms_p50": 52.0,
-                    "peak_mem_mb": 1320
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 19.0,
-                    "peak_mem_mb": 1980,
-                    "latency_ms_p50": 177.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
+                "estimate": null,
                 "hil": {
-                  "accuracy": 0.659,
-                  "llm_metrics": {
-                    "overall": 65.9,
-                    "mmlu": 47.9,
-                    "gsm8k": 24.9,
-                    "hellaswag": 67.4,
-                    "truthfulqa": 40.9,
-                    "winogrande": 61.9,
-                    "arc_challenge": 37.9,
-                    "mt_bench": 6.3
-                  },
-                  "cpu": {
-                    "tok_s": 6.8,
-                    "latency_ms_p50": 138.0,
-                    "peak_mem_mb": 1900
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 16.5,
-                    "latency_ms_p50": 58.0,
-                    "peak_mem_mb": 1400
+                    "tok_s": 8.21,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "dsp": null,
                   "total": {
-                    "tok_s": 16.5,
-                    "peak_mem_mb": 2050,
-                    "latency_ms_p50": 196.0
+                    "tok_s": 8.21,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-02"
+                  "engine": "llama.cpp",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-06-23",
+                  "batch_size": 1,
+                  "setup": "R-Car X5H (NPX6-48K)"
                 }
               },
-              "Q8_0": {
-                "estimate": {
-                  "accuracy": 0.687,
-                  "llm_metrics": {
-                    "overall": 68.7,
-                    "mmlu": 50.7,
-                    "gsm8k": 27.7,
-                    "hellaswag": 70.2,
-                    "truthfulqa": 43.7,
-                    "winogrande": 64.7,
-                    "arc_challenge": 40.7,
-                    "mt_bench": 6.4
-                  },
-                  "cpu": {
-                    "tok_s": 7.5,
-                    "latency_ms_p50": 125.0,
-                    "peak_mem_mb": 1850
-                  },
-                  "npu": {
-                    "tok_s": 19.0,
-                    "latency_ms_p50": 52.0,
-                    "peak_mem_mb": 1320
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 19.0,
-                    "peak_mem_mb": 1980,
-                    "latency_ms_p50": 177.0
-                  },
-                  "last_updated": "2026-03-01"
-                },
+              "w4a16": {
+                "estimate": null,
                 "hil": {
-                  "accuracy": 0.681,
-                  "llm_metrics": {
-                    "overall": 68.1,
-                    "mmlu": 50.1,
-                    "gsm8k": 27.1,
-                    "hellaswag": 69.6,
-                    "truthfulqa": 43.1,
-                    "winogrande": 64.1,
-                    "arc_challenge": 40.1,
-                    "mt_bench": 6.4
-                  },
-                  "cpu": {
-                    "tok_s": 6.8,
-                    "latency_ms_p50": 138.0,
-                    "peak_mem_mb": 1900
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 16.5,
-                    "latency_ms_p50": 58.0,
-                    "peak_mem_mb": 1400
+                    "tok_s": 14.09,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "dsp": null,
                   "total": {
-                    "tok_s": 16.5,
-                    "peak_mem_mb": 2050,
-                    "latency_ms_p50": 196.0
+                    "tok_s": 14.09,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "setup": "DEMO-HIL-RIG-1",
-                  "last_updated": "2026-03-02"
+                  "engine": "llama.cpp",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-06-23",
+                  "batch_size": 1,
+                  "setup": "R-Car X5H (NPX6-48K)"
                 }
               }
             }
@@ -1052,256 +298,82 @@
       ]
     },
     {
-      "key": "mamba-1p4b",
-      "display_name": "Mamba-1.4B",
-      "architecture": "Mamba-1.4B",
-      "model_size_m": 1400,
+      "key": "qwen3-vl-4b-instruct",
+      "display_name": "Qwen3-VL-4B-Instruct",
+      "architecture": "Qwen3-VL-4B",
+      "model_size_m": 4000,
       "modality": "LLM",
-      "variant": "Base",
+      "variant": "Instruct",
       "targets": [
-        "CPU",
         "NPU"
       ],
-      "onnx_repo": "Renesas/Mamba-1.4B-ONNX",
-      "gguf_repo": "",
-      "onnx_artifacts": [
+      "onnx_repo": "",
+      "gguf_repo": "Renesas/Qwen3-VL-4B-Instruct-GGUF",
+      "onnx_artifacts": [],
+      "gguf_artifacts": [
         "fp16",
-        "int8"
+        "w4a16"
       ],
-      "gguf_artifacts": [],
-      "hardware_configs": [
-        {
-          "id": "X5H-200TOPS",
-          "label": "X5H 200TOPS Reference Platform",
-          "targets": [
-            "CPU",
-            "NPU"
-          ],
-          "metrics": {
-            "artifacts": {
-              "fp16": {
-                "estimate": {
-                  "accuracy": 0.575,
-                  "llm_metrics": {
-                    "overall": 57.5,
-                    "mmlu": 39.5,
-                    "gsm8k": 16.5,
-                    "hellaswag": 59.0,
-                    "truthfulqa": 32.5,
-                    "winogrande": 53.5,
-                    "arc_challenge": 29.5,
-                    "mt_bench": 5.9
-                  },
-                  "cpu": {
-                    "tok_s": 26.0,
-                    "latency_ms_p50": 38.0,
-                    "peak_mem_mb": 880
-                  },
-                  "npu": {
-                    "tok_s": 62.0,
-                    "latency_ms_p50": 15.0,
-                    "peak_mem_mb": 520
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 62.0,
-                    "peak_mem_mb": 940,
-                    "latency_ms_p50": 53.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
-                "hil": null
-              },
-              "int8": {
-                "estimate": {
-                  "accuracy": 0.567,
-                  "llm_metrics": {
-                    "overall": 56.7,
-                    "mmlu": 38.7,
-                    "gsm8k": 15.7,
-                    "hellaswag": 58.2,
-                    "truthfulqa": 31.7,
-                    "winogrande": 52.7,
-                    "arc_challenge": 28.7,
-                    "mt_bench": 5.8
-                  },
-                  "cpu": {
-                    "tok_s": 26.0,
-                    "latency_ms_p50": 38.0,
-                    "peak_mem_mb": 880
-                  },
-                  "npu": {
-                    "tok_s": 62.0,
-                    "latency_ms_p50": 15.0,
-                    "peak_mem_mb": 520
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 62.0,
-                    "peak_mem_mb": 940,
-                    "latency_ms_p50": 53.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
-                "hil": null
-              }
-            }
-          }
-        }
-      ]
-    },
-    {
-      "key": "mamba2-1p3b",
-      "display_name": "Mamba2-1.3B",
-      "architecture": "Mamba2-1.3B",
-      "model_size_m": 1300,
-      "modality": "LLM",
-      "variant": "Base",
-      "targets": [
-        "CPU",
-        "NPU"
+      "base_model": "Qwen/Qwen3-VL-4B-Instruct",
+      "license": "apache-2.0",
+      "tasks": [
+        "image-text-to-text",
+        "text-generation",
+        "instruction-following",
+        "chat"
       ],
-      "onnx_repo": "Renesas/Mamba2-1.3B-ONNX",
-      "gguf_repo": "",
-      "onnx_artifacts": [
-        "fp16",
-        "int8"
-      ],
-      "gguf_artifacts": [],
+      "created_at": "2026-05-15T09:37:33.000Z",
+      "last_modified": "2026-06-23T13:01:38.000Z",
       "hardware_configs": [
         {
-          "id": "X5H-100TOPS",
-          "label": "X5H 100TOPS Reference Platform",
+          "id": "RCAR-X5H",
+          "label": "R-Car X5H (NPX6-48K)",
           "targets": [
-            "CPU",
             "NPU"
           ],
+          "notes": "vendor=renesas; chip=rcar-x5h; cpu=arm-cortex-a720; npu=npx6-48k; memory_mb=8192",
           "metrics": {
             "artifacts": {
               "fp16": {
-                "estimate": {
-                  "accuracy": 0.594,
-                  "llm_metrics": {
-                    "overall": 59.4,
-                    "mmlu": 41.4,
-                    "gsm8k": 18.4,
-                    "hellaswag": 60.9,
-                    "truthfulqa": 34.4,
-                    "winogrande": 55.4,
-                    "arc_challenge": 31.4,
-                    "mt_bench": 6.0
-                  },
-                  "cpu": {
-                    "tok_s": 28.0,
-                    "latency_ms_p50": 35.0,
-                    "peak_mem_mb": 860
-                  },
-                  "npu": {
-                    "tok_s": 68.0,
-                    "latency_ms_p50": 14.0,
-                    "peak_mem_mb": 500
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 68.0,
-                    "peak_mem_mb": 920,
-                    "latency_ms_p50": 49.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
+                "estimate": null,
                 "hil": {
-                  "accuracy": 0.588,
-                  "llm_metrics": {
-                    "overall": 58.8,
-                    "mmlu": 40.8,
-                    "gsm8k": 17.8,
-                    "hellaswag": 60.3,
-                    "truthfulqa": 33.8,
-                    "winogrande": 54.8,
-                    "arc_challenge": 30.8,
-                    "mt_bench": 5.9
-                  },
-                  "cpu": {
-                    "tok_s": 25.5,
-                    "latency_ms_p50": 39.0,
-                    "peak_mem_mb": 900
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 60.0,
-                    "latency_ms_p50": 16.0,
-                    "peak_mem_mb": 520
+                    "tok_s": 6.29,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "dsp": null,
                   "total": {
-                    "tok_s": 60.0,
-                    "peak_mem_mb": 960,
-                    "latency_ms_p50": 55.0
+                    "tok_s": 6.29,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "setup": "DEMO-HIL-RIG-2",
-                  "last_updated": "2026-03-03"
+                  "engine": "llama.cpp",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-06-23",
+                  "batch_size": 1,
+                  "setup": "R-Car X5H (NPX6-48K)"
                 }
               },
-              "int8": {
-                "estimate": {
-                  "accuracy": 0.586,
-                  "llm_metrics": {
-                    "overall": 58.6,
-                    "mmlu": 40.6,
-                    "gsm8k": 17.6,
-                    "hellaswag": 60.1,
-                    "truthfulqa": 33.6,
-                    "winogrande": 54.6,
-                    "arc_challenge": 30.6,
-                    "mt_bench": 5.9
-                  },
-                  "cpu": {
-                    "tok_s": 28.0,
-                    "latency_ms_p50": 35.0,
-                    "peak_mem_mb": 860
-                  },
-                  "npu": {
-                    "tok_s": 68.0,
-                    "latency_ms_p50": 14.0,
-                    "peak_mem_mb": 500
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 68.0,
-                    "peak_mem_mb": 920,
-                    "latency_ms_p50": 49.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
+              "w4a16": {
+                "estimate": null,
                 "hil": {
-                  "accuracy": 0.58,
-                  "llm_metrics": {
-                    "overall": 58.0,
-                    "mmlu": 40.0,
-                    "gsm8k": 17.0,
-                    "hellaswag": 59.5,
-                    "truthfulqa": 33.0,
-                    "winogrande": 54.0,
-                    "arc_challenge": 30.0,
-                    "mt_bench": 5.9
-                  },
-                  "cpu": {
-                    "tok_s": 25.5,
-                    "latency_ms_p50": 39.0,
-                    "peak_mem_mb": 900
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 60.0,
-                    "latency_ms_p50": 16.0,
-                    "peak_mem_mb": 520
+                    "tok_s": 11.48,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "dsp": null,
                   "total": {
-                    "tok_s": 60.0,
-                    "peak_mem_mb": 960,
-                    "latency_ms_p50": 55.0
+                    "tok_s": 11.48,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "setup": "DEMO-HIL-RIG-2",
-                  "last_updated": "2026-03-03"
+                  "engine": "llama.cpp",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-06-23",
+                  "batch_size": 1,
+                  "setup": "R-Car X5H (NPX6-48K)"
                 }
               }
             }
@@ -1310,533 +382,70 @@
       ]
     },
     {
-      "key": "jamba-1p5b-instruct",
-      "display_name": "Jamba-1.5B Instruct",
-      "architecture": "Jamba-1.5B",
-      "model_size_m": 1500,
+      "key": "llama-3.1-8b-instruct",
+      "display_name": "Llama-3.1-8B-Instruct",
+      "architecture": "Llama-3.1-8B",
+      "model_size_m": 8000,
       "modality": "LLM",
       "variant": "Instruct",
       "targets": [
-        "CPU",
         "NPU"
       ],
-      "onnx_repo": "Renesas/Jamba-1.5B-Instruct-ONNX",
-      "gguf_repo": "Renesas/Jamba-1.5B-Instruct-GGUF",
-      "onnx_artifacts": [
-        "fp16",
-        "int8"
-      ],
+      "onnx_repo": "",
+      "gguf_repo": "Renesas/Llama-3.1-8B-Instruct-GGUF",
+      "onnx_artifacts": [],
       "gguf_artifacts": [
-        "Q4_K_M",
-        "Q8_0"
-      ],
-      "hardware_configs": [
-        {
-          "id": "X5H-200TOPS",
-          "label": "X5H 200TOPS Reference Platform",
-          "targets": [
-            "CPU",
-            "NPU"
-          ],
-          "metrics": {
-            "artifacts": {
-              "fp16": {
-                "estimate": {
-                  "accuracy": 0.66,
-                  "llm_metrics": {
-                    "overall": 66.0,
-                    "mmlu": 48.0,
-                    "gsm8k": 25.0,
-                    "hellaswag": 67.5,
-                    "truthfulqa": 41.0,
-                    "winogrande": 62.0,
-                    "arc_challenge": 38.0,
-                    "mt_bench": 6.3
-                  },
-                  "cpu": {
-                    "tok_s": 14.0,
-                    "latency_ms_p50": 72.0,
-                    "peak_mem_mb": 1050
-                  },
-                  "npu": {
-                    "tok_s": 34.0,
-                    "latency_ms_p50": 28.0,
-                    "peak_mem_mb": 720
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 34.0,
-                    "peak_mem_mb": 1120,
-                    "latency_ms_p50": 100.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
-                "hil": null
-              },
-              "int8": {
-                "estimate": {
-                  "accuracy": 0.652,
-                  "llm_metrics": {
-                    "overall": 65.2,
-                    "mmlu": 47.2,
-                    "gsm8k": 24.2,
-                    "hellaswag": 66.7,
-                    "truthfulqa": 40.2,
-                    "winogrande": 61.2,
-                    "arc_challenge": 37.2,
-                    "mt_bench": 6.3
-                  },
-                  "cpu": {
-                    "tok_s": 14.0,
-                    "latency_ms_p50": 72.0,
-                    "peak_mem_mb": 1050
-                  },
-                  "npu": {
-                    "tok_s": 34.0,
-                    "latency_ms_p50": 28.0,
-                    "peak_mem_mb": 720
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 34.0,
-                    "peak_mem_mb": 1120,
-                    "latency_ms_p50": 100.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
-                "hil": null
-              },
-              "Q4_K_M": {
-                "estimate": {
-                  "accuracy": 0.625,
-                  "llm_metrics": {
-                    "overall": 62.5,
-                    "mmlu": 44.5,
-                    "gsm8k": 21.5,
-                    "hellaswag": 64.0,
-                    "truthfulqa": 37.5,
-                    "winogrande": 58.5,
-                    "arc_challenge": 34.5,
-                    "mt_bench": 6.1
-                  },
-                  "cpu": {
-                    "tok_s": 14.0,
-                    "latency_ms_p50": 72.0,
-                    "peak_mem_mb": 1050
-                  },
-                  "npu": {
-                    "tok_s": 34.0,
-                    "latency_ms_p50": 28.0,
-                    "peak_mem_mb": 720
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 34.0,
-                    "peak_mem_mb": 1120,
-                    "latency_ms_p50": 100.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
-                "hil": null
-              },
-              "Q8_0": {
-                "estimate": {
-                  "accuracy": 0.647,
-                  "llm_metrics": {
-                    "overall": 64.7,
-                    "mmlu": 46.7,
-                    "gsm8k": 23.7,
-                    "hellaswag": 66.2,
-                    "truthfulqa": 39.7,
-                    "winogrande": 60.7,
-                    "arc_challenge": 36.7,
-                    "mt_bench": 6.2
-                  },
-                  "cpu": {
-                    "tok_s": 14.0,
-                    "latency_ms_p50": 72.0,
-                    "peak_mem_mb": 1050
-                  },
-                  "npu": {
-                    "tok_s": 34.0,
-                    "latency_ms_p50": 28.0,
-                    "peak_mem_mb": 720
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 34.0,
-                    "peak_mem_mb": 1120,
-                    "latency_ms_p50": 100.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
-                "hil": null
-              }
-            }
-          }
-        }
-      ]
-    },
-    {
-      "key": "zamba-2p7b-instruct",
-      "display_name": "Zamba-2.7B Instruct",
-      "architecture": "Zamba-2.7B",
-      "model_size_m": 2700,
-      "modality": "LLM",
-      "variant": "Instruct",
-      "targets": [
-        "CPU",
-        "NPU"
-      ],
-      "onnx_repo": "Renesas/Zamba-2.7B-Instruct-ONNX",
-      "gguf_repo": "Renesas/Zamba-2.7B-Instruct-GGUF",
-      "onnx_artifacts": [
-        "fp16",
-        "int8"
+        "w4a16",
+        "fp16"
       ],
-      "gguf_artifacts": [
-        "Q4_K_M"
+      "base_model": "meta-llama/Llama-3.1-8B-Instruct",
+      "license": "llama3.1",
+      "tasks": [
+        "text-generation",
+        "instruction-following",
+        "chat"
       ],
+      "created_at": "2026-06-12T09:43:03.000Z",
+      "last_modified": "2026-06-19T11:01:35.000Z",
       "hardware_configs": [
         {
-          "id": "X5H-100TOPS",
-          "label": "X5H 100TOPS Reference Platform",
+          "id": "RCAR-X5H",
+          "label": "R-Car X5H (NPX6-48K)",
           "targets": [
-            "CPU",
             "NPU"
           ],
+          "notes": "vendor=renesas; chip=rcar-x5h; cpu=arm-cortex-a720; npu=npx6-48k; memory_mb=8192",
           "metrics": {
             "artifacts": {
               "fp16": {
-                "estimate": {
-                  "accuracy": 0.719,
-                  "llm_metrics": {
-                    "overall": 71.9,
-                    "mmlu": 53.9,
-                    "gsm8k": 30.9,
-                    "hellaswag": 73.4,
-                    "truthfulqa": 46.9,
-                    "winogrande": 67.9,
-                    "arc_challenge": 43.9,
-                    "mt_bench": 6.6
-                  },
-                  "cpu": {
-                    "tok_s": 8.5,
-                    "latency_ms_p50": 112.0,
-                    "peak_mem_mb": 1620
-                  },
-                  "npu": {
-                    "tok_s": 22.0,
-                    "latency_ms_p50": 46.0,
-                    "peak_mem_mb": 1180
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 22.0,
-                    "peak_mem_mb": 1720,
-                    "latency_ms_p50": 158.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
-                "hil": {
-                  "accuracy": 0.713,
-                  "llm_metrics": {
-                    "overall": 71.3,
-                    "mmlu": 53.3,
-                    "gsm8k": 30.3,
-                    "hellaswag": 72.8,
-                    "truthfulqa": 46.3,
-                    "winogrande": 67.3,
-                    "arc_challenge": 43.3,
-                    "mt_bench": 6.6
-                  },
-                  "cpu": {
-                    "tok_s": 7.9,
-                    "latency_ms_p50": 120.0,
-                    "peak_mem_mb": 1680
-                  },
-                  "npu": {
-                    "tok_s": 19.5,
-                    "latency_ms_p50": 52.0,
-                    "peak_mem_mb": 1240
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 19.5,
-                    "peak_mem_mb": 1800,
-                    "latency_ms_p50": 172.0
-                  },
-                  "setup": "DEMO-HIL-RIG-2",
-                  "last_updated": "2026-03-03"
-                }
-              },
-              "int8": {
-                "estimate": {
-                  "accuracy": 0.711,
-                  "llm_metrics": {
-                    "overall": 71.1,
-                    "mmlu": 53.1,
-                    "gsm8k": 30.1,
-                    "hellaswag": 72.6,
-                    "truthfulqa": 46.1,
-                    "winogrande": 67.1,
-                    "arc_challenge": 43.1,
-                    "mt_bench": 6.6
-                  },
-                  "cpu": {
-                    "tok_s": 8.5,
-                    "latency_ms_p50": 112.0,
-                    "peak_mem_mb": 1620
-                  },
-                  "npu": {
-                    "tok_s": 22.0,
-                    "latency_ms_p50": 46.0,
-                    "peak_mem_mb": 1180
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 22.0,
-                    "peak_mem_mb": 1720,
-                    "latency_ms_p50": 158.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
-                "hil": {
-                  "accuracy": 0.705,
-                  "llm_metrics": {
-                    "overall": 70.5,
-                    "mmlu": 52.5,
-                    "gsm8k": 29.5,
-                    "hellaswag": 72.0,
-                    "truthfulqa": 45.5,
-                    "winogrande": 66.5,
-                    "arc_challenge": 42.5,
-                    "mt_bench": 6.5
-                  },
-                  "cpu": {
-                    "tok_s": 7.9,
-                    "latency_ms_p50": 120.0,
-                    "peak_mem_mb": 1680
-                  },
-                  "npu": {
-                    "tok_s": 19.5,
-                    "latency_ms_p50": 52.0,
-                    "peak_mem_mb": 1240
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 19.5,
-                    "peak_mem_mb": 1800,
-                    "latency_ms_p50": 172.0
-                  },
-                  "setup": "DEMO-HIL-RIG-2",
-                  "last_updated": "2026-03-03"
-                }
+                "estimate": null,
+                "hil": null
               },
-              "Q4_K_M": {
-                "estimate": {
-                  "accuracy": 0.684,
-                  "llm_metrics": {
-                    "overall": 68.4,
-                    "mmlu": 50.4,
-                    "gsm8k": 27.4,
-                    "hellaswag": 69.9,
-                    "truthfulqa": 43.4,
-                    "winogrande": 64.4,
-                    "arc_challenge": 40.4,
-                    "mt_bench": 6.4
-                  },
-                  "cpu": {
-                    "tok_s": 8.5,
-                    "latency_ms_p50": 112.0,
-                    "peak_mem_mb": 1620
-                  },
-                  "npu": {
-                    "tok_s": 22.0,
-                    "latency_ms_p50": 46.0,
-                    "peak_mem_mb": 1180
-                  },
-                  "dsp": null,
-                  "total": {
-                    "tok_s": 22.0,
-                    "peak_mem_mb": 1720,
-                    "latency_ms_p50": 158.0
-                  },
-                  "last_updated": "2026-03-02"
-                },
+              "w4a16": {
+                "estimate": null,
                 "hil": {
-                  "accuracy": 0.678,
-                  "llm_metrics": {
-                    "overall": 67.8,
-                    "mmlu": 49.8,
-                    "gsm8k": 26.8,
-                    "hellaswag": 69.3,
-                    "truthfulqa": 42.8,
-                    "winogrande": 63.8,
-                    "arc_challenge": 39.8,
-                    "mt_bench": 6.4
-                  },
-                  "cpu": {
-                    "tok_s": 7.9,
-                    "latency_ms_p50": 120.0,
-                    "peak_mem_mb": 1680
-                  },
+                  "accuracy": null,
                   "npu": {
-                    "tok_s": 19.5,
-                    "latency_ms_p50": 52.0,
-                    "peak_mem_mb": 1240
+                    "tok_s": 8.59,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "dsp": null,
                   "total": {
-                    "tok_s": 19.5,
-                    "peak_mem_mb": 1800,
-                    "latency_ms_p50": 172.0
+                    "tok_s": 8.59,
+                    "latency_ms_p50": null,
+                    "peak_mem_mb": null
                   },
-                  "setup": "DEMO-HIL-RIG-2",
-                  "last_updated": "2026-03-03"
+                  "engine": "llama.cpp",
+                  "execution_provider": "npu",
+                  "last_updated": "2026-06-19",
+                  "batch_size": 1,
+                  "setup": "R-Car X5H (NPX6-48K)"
                 }
               }
             }
           }
         }
       ]
-    },
-    {
-      "key": "llava-7b",
-      "display_name": "LLaVA-7B",
-      "architecture": "LLaVA-7B",
-      "model_size_m": 7000,
-      "modality": "VLM",
-      "variant": "Chat",
-      "targets": [
-        "CPU",
-        "NPU",
-        "DSP"
-      ],
-      "onnx_repo": "Renesas/LLaVA-7B-ONNX",
-      "gguf_repo": "Renesas/LLaVA-7B-GGUF",
-      "onnx_artifacts": [
-        "fp16",
-        "int8"
-      ],
-      "gguf_artifacts": [
-        "Q4_K_M"
-      ],
-      "hardware_configs": [
-        {
-          "id": "X5H-100TOPS",
-          "label": "X5H 100TOPS Reference Platform",
-          "targets": [
-            "CPU",
-            "NPU",
-            "DSP"
-          ],
-          "notes": "Example showing DSP used for vision preprocessing",
-          "metrics": {
-            "artifacts": {
-              "fp16": {
-                "estimate": {
-                  "accuracy": 0.699,
-                  "vlm_metrics": {
-                    "overall": 69.9,
-                    "mmbench": 64.9,
-                    "vqav2": 71.9,
-                    "seedbench": 61.9,
-                    "pope": 66.9
-                  },
-                  "cpu": {
-                    "tok_s": 2.2,
-                    "latency_ms_p50": 420.0,
-                    "peak_mem_mb": 4100
-                  },
-                  "npu": {
-                    "tok_s": 6.0,
-                    "latency_ms_p50": 155.0,
-                    "peak_mem_mb": 2800
-                  },
-                  "dsp": {
-                    "latency_ms_p50": 18.0,
-                    "peak_mem_mb": 64
-                  },
-                  "total": {
-                    "tok_s": 6.0,
-                    "peak_mem_mb": 4300,
-                    "latency_ms_p50": 593.0
-                  },
-                  "last_updated": "2026-03-03"
-                },
-                "hil": null
-              },
-              "int8": {
-                "estimate": {
-                  "accuracy": 0.691,
-                  "vlm_metrics": {
-                    "overall": 69.1,
-                    "mmbench": 64.1,
-                    "vqav2": 71.1,
-                    "seedbench": 61.1,
-                    "pope": 66.1
-                  },
-                  "cpu": {
-                    "tok_s": 2.2,
-                    "latency_ms_p50": 420.0,
-                    "peak_mem_mb": 4100
-                  },
-                  "npu": {
-                    "tok_s": 6.0,
-                    "latency_ms_p50": 155.0,
-                    "peak_mem_mb": 2800
-                  },
-                  "dsp": {
-                    "latency_ms_p50": 18.0,
-                    "peak_mem_mb": 64
-                  },
-                  "total": {
-                    "tok_s": 6.0,
-                    "peak_mem_mb": 4300,
-                    "latency_ms_p50": 593.0
-                  },
-                  "last_updated": "2026-03-03"
-                },
-                "hil": null
-              },
-              "Q4_K_M": {
-                "estimate": {
-                  "accuracy": 0.664,
-                  "vlm_metrics": {
-                    "overall": 66.4,
-                    "mmbench": 61.4,
-                    "vqav2": 68.4,
-                    "seedbench": 58.4,
-                    "pope": 63.4
-                  },
-                  "cpu": {
-                    "tok_s": 2.2,
-                    "latency_ms_p50": 420.0,
-                    "peak_mem_mb": 4100
-                  },
-                  "npu": {
-                    "tok_s": 6.0,
-                    "latency_ms_p50": 155.0,
-                    "peak_mem_mb": 2800
-                  },
-                  "dsp": {
-                    "latency_ms_p50": 18.0,
-                    "peak_mem_mb": 64
-                  },
-                  "total": {
-                    "tok_s": 6.0,
-                    "peak_mem_mb": 4300,
-                    "latency_ms_p50": 593.0
-                  },
-                  "last_updated": "2026-03-03"
-                },
-                "hil": null
-              }
-            }
-          }
-        }
-      ]
     }
   ]
-}
+}

styles.css

@@ -1,18 +1,96 @@
+/* =====================================================================
+   Renesas AI Models — restyle
+   Three switchable directions on data-theme:
+     a = Brand Light   (true to Renesas brand: flat, squared, hairlines)
+     b = Frosted Light (light branded backdrop + liquid-glass surfaces)
+     c = Midnight Glass (refined dark, premium frosted glass)
+   All share Renesas Blue #2A289D and the brand condensed display type.
+   Drop-in: works with the existing app.js unchanged.
+   ===================================================================== */
+
+/* ---------- Brand constants (all themes) ---------- */
 :root {
-  --bg: #0b1220;
-  --text: #e8eefc;
-  --border: rgba(232, 238, 252, 0.12);
-  --accent: #4c6ef5;
+  --brand:        #2A289D;   /* Renesas Blue — corporate */
+  --brand-press:  #1F1D78;
+  --brand-2:      #43ABE2;   /* secondary sky blue */
+  --font-display: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
+  --font-body:    "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
 
-  --content-text: #1f2937;
-  --code-bg: #f6f8fa;
+  /* badge accent colors (brand secondary palette) */
+  --bc-onnx:   #306683;
+  --bc-gguf:   #609A3B;
+  --bc-cpu:    #706F6F;
+  --bc-npu:    #EB6209;
+  --bc-dsp:    #883D90;
+  --bc-modal:  var(--brand);
+  --bc-art:    #706F6F;
+}
+
+/* =====================================================================
+   Frosted Light — the single theme: liquid glass over a living,
+   branded backdrop. Renesas Blue #2A289D + brand condensed display.
+   ===================================================================== */
+:root {
+  --bg: linear-gradient(165deg, #EEF1F8 0%, #E4E9F4 48%, #EAE6F2 100%);
+  --bg-dots: radial-gradient(rgba(42,40,157,0.10) 1.4px, transparent 1.6px);
+  --text: #2C2B45;
+  --text-dim: #5C5B72;
+  --text-mute: #908FA3;
 
-  --pad: 12px;
   --radius: 16px;
-  --card-radius: 14px;
+  --radius-sm: 12px;
+  --card-radius: 16px;
+  --card-blur: blur(20px) saturate(155%);
+
+  --panel-bg: rgba(255,255,255,0.55);
+  --panel-border: rgba(255,255,255,0.75);
+  --panel-shadow: 0 18px 44px rgba(42,40,157,0.10), inset 0 1px 0 rgba(255,255,255,0.65);
+
+  --card-bg: rgba(255,255,255,0.58);
+  --card-border: rgba(255,255,255,0.8);
+  --card-shadow: 0 12px 32px rgba(42,40,157,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
+  --card-rule: 0px;
+  --card-hover-bg: rgba(255,255,255,0.74);
+  --card-hover-border: rgba(42,40,157,0.45);
+  --card-hover-shadow: 0 20px 46px rgba(42,40,157,0.18), inset 0 1px 0 rgba(255,255,255,0.8);
+
+  --surface: rgba(255,255,255,0.5);
+  --surface-strong: rgba(255,255,255,0.7);
+  --surface-border: rgba(255,255,255,0.85);
+
+  --header-bg: rgba(255,255,255,0.6);
+  --header-border: rgba(255,255,255,0.7);
+  --header-shadow: 0 8px 30px rgba(42,40,157,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
+  --header-text: #2C2B45;
+  --header-blur: blur(22px) saturate(160%);
+
+  --input-bg: rgba(255,255,255,0.7);
+  --input-border: rgba(255,255,255,0.9);
+  --chip-bg: rgba(255,255,255,0.65);
+  --chip-border: rgba(255,255,255,0.85);
+
+  --brand-tint: rgba(42,40,157,0.12);
+  --brand-ring: rgba(42,40,157,0.22);
+  --hairline: rgba(42,40,157,0.12);
+  --canvas-bg: rgba(255,255,255,0.92);
+  --canvas-border: rgba(255,255,255,0.8);
+  --table-head-bg: var(--brand);
+  --table-head-text: #FFFFFF;
+  --code-bg: rgba(42,40,157,0.06);
+  --scroll-thumb: rgba(42,40,157,0.28);
+  --link-bg: rgba(42,40,157,0.12);
+  --link-text: var(--brand);
+  --link-border: rgba(42,40,157,0.3);
+  --modal-backdrop: rgba(38,40,80,0.4);
+
+  --brand-active: var(--brand);
 }
 
+/* =====================================================================
+   Base
+   ===================================================================== */
 * { box-sizing: border-box; }
+[hidden] { display: none !important; }
 html, body { height: 100%; }
 
 body {
@@ -21,559 +99,992 @@ body {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
-  background:
-    radial-gradient(1000px 400px at 10% 0%, rgba(76,110,245,.32), transparent),
-    linear-gradient(180deg, var(--bg), #070b14);
+  color: var(--text);
+  font-family: var(--font-body);
+  background: var(--bg);
+  background-attachment: fixed;
 }
+/* ---------- Dynamic, living background: brand network mesh + soft color blooms ---------- */
+.bg-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
+.bg-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+.bg-fx .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.42; will-change: transform; }
+.bg-fx .b1 { width: 46vw; height: 46vw; left: -12vw; top: -16vh; background: radial-gradient(circle, rgba(67,171,226,0.70), transparent 68%); animation: fx1 30s ease-in-out infinite; }
+.bg-fx .b2 { width: 42vw; height: 42vw; right: -10vw; bottom: -18vh; background: radial-gradient(circle, rgba(150,104,214,0.62), transparent 68%); animation: fx2 36s ease-in-out infinite; }
+@keyframes fx1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14vw,10vh) scale(1.15); } }
+@keyframes fx2 { 0%, 100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-12vw,12vh) scale(0.92); } }
+@media (prefers-reduced-motion: reduce) { .bg-fx .blob { animation: none !important; } }
+.topbar, .content { position: relative; z-index: 1; }
 
-/* Topbar */
+/* =====================================================================
+   Topbar
+   ===================================================================== */
 .topbar {
   flex: 0 0 auto;
   z-index: 50;
-  border-bottom: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(15,26,48,0.96), rgba(15,26,48,0.86));
-  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--header-border);
+  background: var(--header-bg);
+  backdrop-filter: var(--header-blur);
+  -webkit-backdrop-filter: var(--header-blur);
+  box-shadow: var(--header-shadow);
 }
-
+:root[data-theme="a"] .topbar { border-top: 3px solid var(--brand); }
 .topbar-inner {
   width: 100%;
-  margin: 0;
-  padding: 12px 16px;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 12px;
+  padding: 11px 22px;
+  display: flex;
   align-items: center;
+  gap: 22px;
 }
+.brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 0 auto; }
+.brand-icon { height: 22px; width: auto; max-width: 168px; object-fit: contain; display: block; }
+.brand-divider { width: 1px; height: 26px; background: var(--hairline); flex: 0 0 auto; }
+.brand-title {
+  color: var(--header-text);
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.18rem;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.brand-subtitle { color: var(--text-dim); font-size: 0.74rem; margin-top: 3px; letter-spacing: 0.04em; }
 
-.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.brand-icon{ height: 34px; width: auto; max-width: 180px; object-fit: contain; }
-.brand-title{ color: var(--text); font-weight: 900; font-size: 1.02rem; line-height: 1.15; }
-.brand-subtitle{ color: rgba(232, 238, 252, 0.72); font-size: 0.82rem; margin-top: 4px; }
-
-/* Tabs */
-.tabs { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
+.tabs { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
 .nav-item {
   appearance: none;
-  border: 1px solid rgba(232, 238, 252, 0.18);
-  background: rgba(255,255,255,0.04);
-  color: rgba(232,238,252,0.95);
-  border-radius: 999px;
-  padding: 9px 14px;
-  font-weight: 850;
-  font-size: 0.92rem;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-dim);
+  border-radius: var(--radius-sm);
+  padding: 9px 16px;
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 0.96rem;
+  letter-spacing: 0.02em;
   cursor: pointer;
+  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
 }
+.nav-item:hover { color: var(--text); background: var(--brand-tint); }
 .nav-item.active {
-  background: rgba(76,110,245,0.22);
-  border-color: rgba(76,110,245,0.55);
-  box-shadow: 0 0 0 4px rgba(76,110,245,0.10);
+  background: var(--brand-active);
+  color: #fff;
+  box-shadow: 0 4px 14px rgba(42,40,157,0.32);
 }
 
-/* Content */
-.content {
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
-  margin: 0;
-  padding: var(--pad);
-  overflow: hidden;
+/* Burger (mobile nav trigger) — hidden until the phone breakpoint */
+.nav-burger {
+  display: none;
+  appearance: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
+  width: 44px; height: 44px; flex: 0 0 auto; margin-left: auto; cursor: pointer;
+  border: 1px solid var(--chip-border); background: var(--chip-bg);
+  border-radius: var(--radius-sm);
+  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
+  transition: border-color 140ms ease, background 140ms ease;
+}
+.nav-burger:hover { border-color: var(--brand-ring); }
+.nav-burger span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 180ms ease, opacity 150ms ease; }
+.nav-burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+.nav-burger.active span:nth-child(2) { opacity: 0; }
+.nav-burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+
+/* Theme switch */
+.theme-switch {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--chip-border);
+  background: var(--surface);
+  flex: 0 0 auto;
 }
+.theme-btn {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  border-radius: calc(var(--radius-sm) - 2px);
+  padding: 6px 10px;
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 0.74rem;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: background 140ms ease, color 140ms ease;
+}
+.theme-btn:hover { color: var(--text); }
+.theme-btn.active { background: var(--brand-active); color: #fff; box-shadow: 0 2px 8px rgba(42,40,157,0.28); }
+.theme-btn .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.12); }
+.sw-a { background: #FFFFFF; }
+.sw-b { background: linear-gradient(135deg, #E7ECF8, #DCD9EF); }
+.sw-c { background: linear-gradient(135deg, #1A1C36, #3937C4); border-color: rgba(255,255,255,0.2); }
 
-/* Sections */
+/* =====================================================================
+   Content / sections
+   ===================================================================== */
+.content { flex: 1 1 auto; min-height: 0; width: 100%; padding: 8px; overflow: hidden; }
 .section {
   display: none;
   height: 100%;
   min-height: 0;
-  background: #fff;
-  color: var(--content-text);
+  color: var(--text);
   border-radius: var(--radius);
-  border: 1px solid rgba(17, 24, 39, 0.08);
-  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
+  border: 1px solid var(--panel-border);
+  background: var(--panel-bg);
+  backdrop-filter: var(--card-blur);
+  -webkit-backdrop-filter: var(--card-blur);
+  box-shadow: var(--panel-shadow);
   overflow: hidden;
 }
 .section.visible { display: flex; flex-direction: column; }
-.section-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px; }
+#sec-overview.visible, #sec-explore.visible { overflow: auto; padding: 9px; }
+/* Overview content sits directly on the page (no panel frame). */
+#sec-overview { border: none; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
+
+.section-head { margin-bottom: 18px; }
+.section-title {
+  margin: 0 0 4px; border: none; padding: 0;
+  font-family: var(--font-display); font-weight: 700; font-size: 1.9rem;
+  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text);
+}
 
-/* Typography */
-h1, h2, h3 { margin-top: 0.2rem; padding-bottom: 0.25rem; border-bottom: 1px solid rgba(17,24,39,0.08); }
-pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-pre { background: var(--code-bg); padding: 10px 12px; border-radius: 12px; overflow-x: auto; border: 1px solid rgba(17,24,39,0.08); margin: 0; }
-code { background: rgba(246,248,250,0.9); padding: 0.1rem 0.3rem; border-radius: 6px; }
+/* =====================================================================
+   Typography
+   ===================================================================== */
+h1, h2, h3 { color: var(--text); margin-top: 0.2rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--hairline); }
+h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand); }
+:root[data-theme="c"] h3 { color: #B9C0FF; }
+pre, code { font-family: "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace; }
+pre { background: var(--code-bg); color: var(--text); padding: 11px 13px; border-radius: var(--radius-sm); overflow-x: auto; border: 1px solid var(--hairline); margin: 0; font-size: 0.86rem; }
+code { background: var(--code-bg); color: var(--text); padding: 0.1rem 0.34rem; border-radius: 4px; font-size: 0.88em; }
 
-.note { background: #f0f4ff; border-left: 4px solid var(--accent); padding: 10px 12px; margin: 10px 0 12px; border-radius: 10px; }
-.note.note-warn{ background: #fff7ed; border-left-color: #f59e0b; }
-.subtle { color: #4b5563; margin-top: 0.4rem; }
+.note { background: var(--surface); border-left: 3px solid var(--brand); padding: 11px 13px; margin: 10px 0 12px; border-radius: var(--radius-sm); color: var(--text); }
+.note.note-warn { background: color-mix(in srgb, var(--bc-npu) 12%, transparent); border-left-color: var(--bc-npu); }
+.subtle { color: var(--text-dim); margin-top: 0.4rem; }
 .tight { margin-top: 0.35rem; }
-.no-border{ border-bottom:none !important; padding-bottom:0 !important; }
-
-/* Disclaimer overlay */
-.poc-overlay{
-  position: fixed;
-  top: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  max-width: min(820px, calc(100vw - 32px));
-  background: rgba(240, 244, 255, 0.70);
-  border: 1px solid rgba(76, 110, 245, 0.25);
-  border-left: 4px solid var(--accent);
-  border-radius: 12px;
-  padding: 10px 12px;
-  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
-  backdrop-filter: blur(10px);
-  color: #111827;
-  font-size: 0.92rem;
-  line-height: 1.25;
-  pointer-events: none;
-}
+.no-border { border-bottom: none !important; padding-bottom: 0 !important; }
 
-/* Layout */
-.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
-.grid.explore-grid{ display: grid; grid-template-columns: minmax(320px, 30%) 1fr; gap: 12px; margin-top: 10px; }
+.link-btn { appearance: none; background: none; border: none; cursor: pointer; color: var(--brand); font-weight: 700; font-size: 0.82rem; padding: 2px 4px; letter-spacing: 0.02em; }
+:root[data-theme="c"] .link-btn { color: #B9C0FF; }
+.link-btn:hover { text-decoration: underline; }
 
-.card {
-  border: 1px solid rgba(17,24,39,0.08);
-  border-radius: var(--card-radius);
-  padding: 12px 12px 10px;
-  background: linear-gradient(180deg, rgba(76,110,245,0.05), transparent);
-  min-width: 0;
+/* =====================================================================
+   Card base (big panels) + glass surfaces
+   ===================================================================== */
+.card, .stat-tile, .model-card, .metric-card, .model-picker, .constellation {
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  backdrop-filter: var(--card-blur);
+  -webkit-backdrop-filter: var(--card-blur);
+  box-shadow: var(--card-shadow);
+}
+.card { border-radius: var(--card-radius); padding: 8px; min-width: 0; position: relative; }
+.card::before {
+  content: "";
+  position: absolute; top: 0; left: 0; right: 0;
+  height: var(--card-rule);
+  background: var(--brand);
+  border-radius: var(--card-radius) var(--card-radius) 0 0;
+}
+.card-head { margin-bottom: 14px; }
+.card-head-title {
+  margin: 0 0 4px; border: none; padding: 0;
+  font-family: var(--font-display); font-weight: 700; font-size: 1.28rem;
+  letter-spacing: 0.03em; text-transform: uppercase; color: var(--text);
 }
 
-/* Form controls */
-.form-grid{ display: grid; grid-template-columns: 1fr; gap: 10px; }
-.field{ display:flex; flex-direction:column; gap:6px; min-width: 0; }
-.label{ font-size: 0.82rem; color: rgba(75, 85, 99, 0.9); font-weight: 800; }
-.radio-row{ display:flex; flex-wrap:wrap; gap:10px; }
-.radio-col{ display:grid; gap:8px; }
-.field-row.two{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
+/* =====================================================================
+   Form controls
+   ===================================================================== */
+.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
+.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.label { font-size: 0.72rem; color: var(--text-dim); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
+.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.radio-col { display: grid; gap: 8px; }
+.field-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 
-.pill{
-  display:inline-flex; align-items:center; gap:8px;
-  padding: 6px 10px; border: 1px solid rgba(17,24,39,0.10);
-  background: rgba(255,255,255,0.95); border-radius: 999px;
-  cursor:pointer; user-select:none; font-size: 0.92rem;
+.pill {
+  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
+  border: 1px solid var(--chip-border); background: var(--chip-bg);
+  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
+  border-radius: var(--radius-sm); cursor: pointer; user-select: none; font-size: 0.88rem; color: var(--text);
+  transition: background 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
 }
-.pill.active{ background: rgba(76,110,245,0.10); border-color: rgba(76,110,245,0.35); box-shadow: 0 0 0 4px rgba(76,110,245,0.08); }
+.pill:hover { border-color: var(--brand-ring); }
+.pill.active { background: var(--brand-tint); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); color: var(--text); font-weight: 600; }
+.pill input { accent-color: var(--brand); }
 
 .filter-input, .filter-select {
-  height: 38px; padding: 0 12px; border-radius: 10px;
-  border: 1px solid rgba(17,24,39,0.14);
-  background: rgba(255,255,255,0.98); color: var(--content-text);
-  outline: none; font-size: 0.95rem; width: 100%;
+  height: 40px; padding: 0 13px; border-radius: var(--radius-sm);
+  border: 1px solid var(--input-border); background: var(--input-bg);
+  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
+  color: var(--text); outline: none; font-size: 0.92rem; width: 100%; font-family: var(--font-body);
 }
-
-select.filter-select{
-  appearance:none; -webkit-appearance:none; -moz-appearance:none;
-  padding-right:40px;
+.filter-input::placeholder { color: var(--text-mute); }
+select.filter-select {
+  appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; cursor: pointer;
   background-image:
-    linear-gradient(45deg, transparent 50%, rgba(31,41,55,.75) 50%),
-    linear-gradient(135deg, rgba(31,41,55,.75) 50%, transparent 50%),
-    linear-gradient(to right, rgba(17,24,39,.08), rgba(17,24,39,.08));
-  background-position:
-    calc(100% - 18px) 16px,
-    calc(100% - 12px) 16px,
-    calc(100% - 36px) 50%;
-  background-size: 6px 6px, 6px 6px, 1px 60%;
-  background-repeat:no-repeat;
-}
-.filter-input:focus, .filter-select:focus{
-  border-color: rgba(76,110,245,0.55);
-  box-shadow: 0 0 0 4px rgba(76,110,245,0.12);
-}
-
-.matchline{
-  font-size: 0.92rem;
-  color: #111827;
-  font-weight: 850;
-  padding: 8px 10px;
-  border-radius: 12px;
-  background: rgba(76,110,245,0.08);
-  border: 1px solid rgba(76,110,245,0.18);
-}
-
-/* Model list */
-.model-picker{ border: 1px solid rgba(17,24,39,0.10); background: rgba(255,255,255,0.85); border-radius: 14px; padding: 10px; }
-.model-picker-head{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
-.model-picker-title{ font-weight: 950; color: #111827; font-size: 0.95rem; }
-.model-picker-subtle{ font-size: 0.82rem; color: rgba(75,85,99,0.85); font-weight: 700; }
-.model-list{ height:auto; min-height:280px; padding: 8px 10px; line-height:1.3; border-radius:12px; background-image:none !important; padding-right: 12px !important; }
-.model-list option{ padding: 6px 6px; }
-
-/* Link buttons */
-.link{
-  display:inline-flex; gap:6px; align-items:center;
-  font-weight: 850; color: #1d4ed8; text-decoration:none;
-  padding: 8px 10px; border-radius:10px;
-  border: 1px solid rgba(29,78,216,0.18);
-  background: rgba(29,78,216,0.06);
-}
-.link:hover{ background: rgba(29,78,216,0.10); }
-.link.small{
-  padding: 6px 8px;
-  font-size: 0.82rem;
-  border-radius: 9px;
-}
-
-/* Summary grid + repo buttons */
-.summary-grid{ display:grid; grid-template-columns: 1fr 320px; gap: 12px; align-items:start; }
-.repo-buttons{ display:grid; gap: 10px; justify-items:end; padding: 6px 8px 0 0; }
-.repo-buttons .link{ width: 100%; justify-content:center; }
-
-/* Chips */
-.chips{ display:flex; flex-wrap:wrap; gap:10px; }
-.chip-btn{
-  appearance:none; border:1px solid rgba(17,24,39,0.14);
-  background: rgba(255,255,255,0.96);
-  border-radius:999px; padding: 7px 12px;
-  cursor:pointer; font-weight:900; font-size:0.9rem;
-  color: rgba(17,24,39,0.88);
-  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
+    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
+    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
+  background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px;
+  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
 }
-.chip-btn:hover{ border-color: rgba(76,110,245,0.45); box-shadow: 0 0 0 4px rgba(76,110,245,0.10); transform: translateY(-1px); }
-.chip-btn.active{ background: rgba(76,110,245,0.12); border-color: rgba(76,110,245,0.55); box-shadow: 0 0 0 4px rgba(76,110,245,0.12); }
+.filter-select option { background: var(--input-bg); color: var(--text); }
+:root[data-theme="c"] .filter-select option { background: #1B1D33; color: var(--text); }
+.filter-input:focus, .filter-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
+.filter-input.compact, .filter-select.compact { height: 36px; font-size: 0.88rem; }
+.field.compact { gap: 5px; }
+.field.compact .label { font-size: 0.7rem; }
 
-/* Mini chart */
-.mini-chart-wrap{ margin-top: 10px; border: 1px solid rgba(17,24,39,0.10); border-radius: 12px; background: linear-gradient(180deg, rgba(76,110,245,0.04), transparent); overflow:hidden; position:relative; }
-.mini-chart-head{ display:flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 10px 0; }
-.mini-chart-title{ font-weight: 950; color: #111827; }
-.mini-chart-subtle{ color: rgba(75,85,99,0.85); font-weight: 700; font-size: 0.85rem; }
-.mini-tooltip{
-  position:absolute; pointer-events:none; padding: 8px 10px; border-radius: 12px;
-  background: rgba(15,26,48,0.92); color: rgba(232,238,252,0.95);
-  border: 1px solid rgba(232,238,252,0.18); box-shadow: 0 18px 40px rgba(0,0,0,0.28);
-  font-size: 0.82rem; max-width: 280px; line-height: 1.25; display:none;
-}
-.mini-chart-wrap canvas { cursor: grab; }
-.mini-chart-wrap canvas:active { cursor: grabbing; }
+/* =====================================================================
+   OVERVIEW
+   ===================================================================== */
+.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
+.stat-tile { border-radius: var(--card-radius); padding: 8px 9px 8px 10px; position: relative; border-left: 3px solid var(--brand); }
+.stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1; }
+.stat-label { margin-top: 6px; font-size: 0.78rem; color: var(--text-dim); font-weight: 600; letter-spacing: 0.03em; }
 
-/* All Models: compact filters (one line as much as possible) */
-.filters-row{
-  display:flex;
-  flex-wrap:wrap;
-  gap: 10px 12px;
-  align-items:flex-end;
+/* Carousel */
+.carousel-section { margin-bottom: 20px; }
+.carousel-section.featured {
+  padding: 8px 10px 4px; margin-bottom: 14px; border-radius: var(--card-radius);
+  background: var(--card-bg); border: 1px solid var(--card-border);
+  box-shadow: var(--card-shadow); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
+  position: relative;
 }
-.filters-row.compact{
-  padding: 6px 2px 2px;
+:root[data-theme="a"] .carousel-section.featured { border-top: 3px solid var(--brand); }
+.carousel-section.featured .carousel-title { font-size: 1.42rem; }
+.carousel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
+.carousel-title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; margin: 0; border: none; padding: 0; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }
+.carousel-actions { display: flex; align-items: center; gap: 8px; }
+.carousel-sub { color: var(--text-dim); font-size: 0.8rem; font-weight: 600; margin-right: 4px; }
+.carousel-nav {
+  width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center;
+  cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--text);
+  border: 1px solid var(--chip-border); background: var(--chip-bg);
+  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
+  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
 }
-.field.compact { gap: 6px; }
-.field.compact .label{ font-size: 0.78rem; }
-.field.inline.compact{
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  padding-top: 20px; /* align with controls */
-}
-.field.grow{ flex: 1 1 260px; min-width: 220px; }
+.carousel-nav:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
+.carousel-track { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 4px 2px 14px; }
+.rc-card { flex: 0 0 252px; scroll-snap-align: start; gap: 10px; }
+.rc-meta { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; gap: 5px; letter-spacing: 0.02em; }
+.rc-meta.is-new { color: var(--brand); }
+:root[data-theme="c"] .rc-meta.is-new { color: #B9C0FF; }
+.rc-stat { font-size: 0.84rem; color: var(--text-dim); }
+.rc-stat b { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); font-weight: 700; }
+.rc-stat.empty { color: var(--text-mute); }
+/* Source tag on the recency stat — measured HIL is the priority, estimates
+   are clearly marked as fallback. */
+.rc-src { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; vertical-align: middle; line-height: 1.45; }
+.rc-src-hil { background: var(--brand); color: #fff; }
+.rc-src-est { background: transparent; color: var(--text-mute); border: 1px solid var(--hairline); }
+:root[data-theme="c"] .rc-src-hil { background: #6670E6; }
+
+/* Constellation */
+.constellation-card { padding: 8px; }
+.cstl-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }
+.cstl-controls .field { min-width: 150px; }
+.constellation { border-radius: var(--radius-sm); overflow: hidden; position: relative; background: var(--canvas-bg); border: 1px solid var(--canvas-border); box-shadow: none; }
+.constellation canvas { width: 100%; height: 460px; display: block; cursor: grab; }
+.constellation canvas:active { cursor: grabbing; }
+.cstl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 12px; align-items: center; }
+.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
+.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
+.legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
 
-.filter-input.compact, .filter-select.compact{
-  height: 34px;
-  border-radius: 10px;
-  font-size: 0.92rem;
+.mini-tooltip {
+  position: absolute; pointer-events: none; padding: 9px 11px; border-radius: var(--radius-sm);
+  background: rgba(28,30,52,0.95); color: #F4F5FB; backdrop-filter: blur(6px);
+  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 40px rgba(0,0,0,0.35);
+  font-size: 0.8rem; max-width: 280px; line-height: 1.35; display: none; z-index: 5;
 }
-.check-row.compact{
-  display:flex;
-  flex-wrap:wrap;
-  gap: 8px;
+
+/* =====================================================================
+   CATALOG
+   ===================================================================== */
+.catalog-layout { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr); }
+.facets {
+  border-right: 1px solid var(--hairline); padding: 9px 8px; overflow: auto;
+  display: flex; flex-direction: column; gap: 12px;
 }
-.check-row.compact .pill{
-  padding: 5px 9px;
-  font-size: 0.88rem;
+.facets-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
+.facets-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
+
+/* Collapsible filter clusters (the toggle button is shown only on phones) */
+.filter-toggle {
+  display: none; align-items: center; gap: 8px; width: 100%; cursor: pointer;
+  appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg);
+  color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
+  letter-spacing: 0.03em; padding: 11px 14px; border-radius: var(--radius-sm);
+  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
+  transition: border-color 140ms ease, background 140ms ease;
 }
+.filter-toggle:hover { border-color: var(--brand-ring); }
+.filter-toggle.active { border-color: var(--brand); background: var(--brand-tint); }
+.filter-toggle .ft-chevron { margin-left: auto; transition: transform 200ms ease; }
+.filter-toggle[aria-expanded="true"] .ft-chevron { transform: rotate(180deg); }
+.facets-body { display: flex; flex-direction: column; gap: 12px; }
+.explore-filters { display: grid; gap: 10px; }
 
-/* Badges */
-.badges{ display:flex; flex-wrap:wrap; gap:6px; }
-.badge{
-  display:inline-flex;
-  align-items:center;
-  gap:6px;
-  padding: 4px 8px;
-  border-radius: 999px;
-  font-weight: 900;
-  font-size: 0.82rem;
-  border: 1px solid rgba(17,24,39,0.12);
-  background: rgba(255,255,255,0.9);
-  color: rgba(17,24,39,0.88);
-}
-.badge.onnx{ background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.25); }
-.badge.gguf{ background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.25); }
-.badge.cpu{ background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.35); }
-.badge.npu{ background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.30); }
-.badge.dsp{ background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.30); }
-
-/* Precision/Quant badge */
-.badge.art{
-  background: rgba(17,24,39,0.06);
-  border-color: rgba(17,24,39,0.14);
-  font-weight: 950;
-}
-
-/* Table + pinned cols */
-.table-wrap{ margin-top:10px; border:1px solid rgba(17,24,39,0.10); border-radius:12px; overflow:auto; max-height:650px; background:#fff; }
-table.table{ width:100%; border-collapse: collapse; background:#fff; }
-.table th, .table td{ padding:10px 12px; border-bottom:1px solid rgba(17,24,39,0.08); font-size:0.94rem; color:#111827; vertical-align: top; }
-.table th{ background: rgba(76,110,245,0.06); font-weight: 900; }
-.table thead th{ position: sticky; top: 0; z-index: 3; }
-.pin{ position: sticky; left:0; z-index:2; background:#fff; }
-.table thead .pin{ z-index:4; background: rgba(76,110,245,0.06); }
-.table tr.selected-row td{ background: rgba(76,110,245,0.08); }
-
-/* Stack badges vertically in table cells by default */
-.table .badges{
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
+/* Explore filters: dense progressive-disclosure redesign.
+   Secondary ("Advanced") tier is collapsed by default on desktop; the generic
+   delegated .filter-toggle handler (index.html) toggles .open on it — no JS. */
+.explore-advanced { display: none; }
+.explore-advanced.open { display: grid; gap: 10px; }
+/* Desktop-visible variant of the toggle (base .filter-toggle is display:none
+   >680px). Slimmer + dimmer so it reads as a secondary affordance. */
+.filter-toggle--inline {
+  display: flex; padding: 7px 12px; font-size: 0.82rem; font-family: var(--font-body);
+  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim);
 }
-/* Precision/Quant badges: horizontal wrap */
-.table .badges.badges-row{
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
+.filter-toggle--inline svg:first-of-type { opacity: 0.75; }
+/* Dense packing, SCOPED to Explore so Catalog/Overview pills are untouched. */
+.explore-filters .field-row.two, .explore-advanced .field-row.two { gap: 10px; }
+.explore-filters .field.compact { gap: 4px; }
+.explore-filters .field.compact .label { font-size: 0.68rem; }
+.explore-filters .filter-select.compact { height: 34px; font-size: 0.86rem; padding: 0 10px; }
+.explore-filters select.filter-select.compact { background-position: calc(100% - 16px) 14px, calc(100% - 10px) 14px; padding-right: 32px; }
+.explore-filters .radio-row { gap: 6px; row-gap: 6px; }
+.explore-filters .radio-row .pill { padding: 5px 10px; gap: 6px; font-size: 0.82rem; line-height: 1.15; }
+.facet-groups { display: flex; flex-direction: column; gap: 12px; }
+.facet-group-title { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); font-weight: 700; margin-bottom: 5px; }
+.facet-opt { display: flex; align-items: center; gap: 8px; padding: 3px 5px; font-size: 0.82rem; color: var(--text); cursor: pointer; border-radius: 6px; }
+.facet-opt:hover { background: var(--brand-tint); }
+.facet-opt input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 30px; height: 17px; border-radius: 999px; background: rgba(42,40,157,0.18); position: relative; cursor: pointer; transition: background 150ms ease; }
+.facet-opt input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28); transition: left 150ms ease; }
+.facet-opt input:checked { background: var(--brand); }
+.facet-opt input:checked::after { left: 15px; }
+
+.catalog-main { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
+.toolbar {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 7px 9px; border-bottom: 1px solid var(--hairline); flex: 0 0 auto;
 }
+.toolbar-count { color: var(--text-dim); font-weight: 600; font-size: 0.9rem; }
+.toolbar-count b { color: var(--text); font-family: var(--font-display); }
+.view-toggle { display: inline-flex; border: 1px solid var(--chip-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--chip-bg); }
+.view-btn { appearance: none; border: none; background: transparent; color: var(--text-dim); padding: 8px 14px; font-weight: 700; font-size: 0.84rem; cursor: pointer; font-family: var(--font-body); }
+.view-btn.active { background: var(--brand-active); color: #fff; }
+
+.card-grid { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 9px; display: grid; grid-template-columns: repeat(auto-fill, minmax(247px, 1fr)); gap: 12px; align-content: start; }
+.table-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px 18px 18px; }
 
-/* Details column: vertically center button */
-.table th.details-col,
-.table td.details-col{
-  width: 1%;
-  white-space: nowrap;
+/* Model card — squared Renesas brand language: a top gradient accent that
+   sweeps wider on hover, a framed hero stat with a solid left bar, and
+   hairline-divided publisher row + footer with a solid-fill repo CTA. */
+.model-card {
+  position: relative; overflow: hidden;
+  border-radius: var(--card-radius); padding: 17px 17px 15px; display: flex; flex-direction: column; gap: 13px; cursor: pointer;
+  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
 }
-.table td.details-col{
-  vertical-align: middle;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* Signature top accent: 3px brand→brand-2 bar, 34% wide at rest, sweeping to
+   full width + full opacity on hover. Keep this motif on card-like surfaces. */
+.model-card::before {
+  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  background: linear-gradient(90deg, var(--brand), var(--brand-2));
+  transform: scaleX(0.34); transform-origin: left; opacity: 0.8;
+  transition: transform 220ms ease, opacity 220ms ease;
 }
-.table td.details-col .mini-btn{
-  margin-top: 0;
-  align-self: center;
+.model-card:hover {
+  transform: translateY(-4px); border-color: var(--card-hover-border); background: var(--card-hover-bg);
+  box-shadow: var(--card-hover-shadow);
 }
+.model-card:hover::before { transform: scaleX(1); opacity: 1; }
 
-/* Compact metrics cell */
-.cell-metrics{
-  display:flex;
-  flex-direction:column;
-  gap: 4px;
-  white-space: normal;
-  line-height: 1.15;
+/* Publisher row — uppercase, divided from the body by a hairline rule */
+.mc-designer {
+  display: flex; align-items: center; gap: 8px; min-width: 0;
+  padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
+  text-transform: uppercase; letter-spacing: 0.04em;
 }
-.cell-metrics .row{
-  display:flex;
-  gap: 8px;
-  align-items: baseline;
+.mc-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
+.mc-logo svg { display: block; }
+.mc-designer-name { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mc-head { display: flex; gap: 12px; align-items: center; }
+.mc-monogram {
+  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center;
+  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(42,40,157,0.18);
 }
-.cell-metrics .k{
-  font-size: 0.78rem;
-  font-weight: 950;
-  color: rgba(75,85,99,0.95);
-  width: 56px;
+.mc-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--text); word-break: break-word; letter-spacing: 0.01em; }
+.mc-sub { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
+.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+/* Throughput hero — tinted brand panel, framed all round, with a solid brand
+   left bar via ::before (squared accent, not a left-border-only card). */
+.mc-stat {
+  position: relative; overflow: hidden;
+  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
+  padding: 9px 12px 9px 16px; border-radius: var(--radius-sm);
+  background: linear-gradient(115deg, rgba(42,40,157,0.08), rgba(67,171,226,0.05));
+  border: 1px solid rgba(42,40,157,0.16);
+}
+.mc-stat::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
+  background: var(--brand);
+}
+.mc-stat-num { font-family: var(--font-display); font-size: 1.78rem; font-weight: 700; color: var(--brand); line-height: 1; }
+:root[data-theme="c"] .mc-stat-num { color: #C3C8FF; }
+.mc-stat-sub { font-size: 0.74rem; color: var(--text-dim); font-weight: 600; line-height: 1.25; }
+/* Empty state — greyed bar + dashed frame, transparent, italic placeholder */
+.mc-stat.empty { align-items: center; text-align: center; background: transparent; border: 1px dashed var(--hairline); }
+.mc-stat.empty::before { background: var(--hairline); }
+.mc-stat.empty .mc-stat-sub { color: var(--text-mute); font-style: italic; font-weight: 500; }
+.mc-quants { display: flex; flex-wrap: wrap; gap: 6px; }
+/* Footer — hairline rule on top; uppercase meta, solid-fill repo CTA */
+.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--hairline); }
+.mc-meta { flex: 1 1 0; min-width: 0; font-size: 0.72rem; color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mc-foot .link {
   flex: 0 0 auto;
+  background: var(--brand); border-color: var(--brand); color: #fff;
+  box-shadow: 0 4px 12px rgba(42,40,157,0.24);
 }
-.cell-metrics .v{
-  font-weight: 900;
-  color: #111827;
+.mc-foot .link:hover { background: var(--brand-press); border-color: var(--brand-press); color: #fff; }
+
+/* Chips / badges */
+.chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.chip-btn {
+  appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg);
+  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
+  border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; font-weight: 700; font-size: 0.86rem; color: var(--text);
+  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
 }
+.chip-btn:hover { border-color: var(--brand); transform: translateY(-1px); }
+.chip-btn.active { background: var(--brand-tint); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
 
-/* Small action button for table cells */
-.mini-btn{
-  appearance: none;
-  border: 1px solid rgba(29,78,216,0.20);
-  background: rgba(29,78,216,0.06);
-  color: #1d4ed8;
-  border-radius: 10px;
-  padding: 6px 10px;
-  font-weight: 900;
-  font-size: 0.84rem;
-  cursor: pointer;
-  align-self: flex-start;
-  margin-top: 4px;
+.badges { display: flex; flex-wrap: wrap; gap: 6px; }
+.badge {
+  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
+  font-weight: 700; font-size: 0.76rem; letter-spacing: 0.02em;
+  background: color-mix(in srgb, var(--bc) 13%, transparent);
+  border: 1px solid color-mix(in srgb, var(--bc) 38%, transparent);
+  color: var(--bc);
+  --bc: var(--bc-art);
 }
-.mini-btn:hover{
-  background: rgba(29,78,216,0.10);
+:root[data-theme="c"] .badge { color: color-mix(in srgb, var(--bc) 55%, white); background: color-mix(in srgb, var(--bc) 24%, transparent); border-color: color-mix(in srgb, var(--bc) 45%, transparent); }
+.badge.clickable { cursor: pointer; }
+.badge.clickable:hover { border-color: var(--bc); filter: brightness(0.97); }
+.badge.onnx { --bc: var(--bc-onnx); }
+.badge.gguf { --bc: var(--bc-gguf); }
+.badge.cpu  { --bc: var(--bc-cpu); }
+.badge.npu  { --bc: var(--bc-npu); }
+.badge.dsp  { --bc: var(--bc-dsp); }
+.badge.modality { --bc: var(--bc-modal); }
+.badge.art  { --bc: var(--bc-art); }
+
+/* status badges (mockup-style: uppercase pills) */
+.badge.status { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; padding: 3px 9px; }
+.badge.status-hil { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; padding: 3px 9px; background: var(--brand); border-color: var(--brand); color: #fff; }
+.badge.status-new { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; padding: 3px 9px; background: rgba(223,177,24,0.16); border-color: rgba(223,177,24,0.5); color: #9C7B0F; }
+:root[data-theme="c"] .badge.status-new { color: #E7C657; }
+
+/* =====================================================================
+   EXPLORE
+   ===================================================================== */
+.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
+.grid.explore-grid { display: grid; grid-template-columns: minmax(320px, 32%) 1fr; gap: 16px; margin-top: 10px; }
+/* Wide screens: the Configure rail and the result card each fill the full
+   section height and scroll internally (the page itself doesn't scroll).
+   On smaller screens the columns stack and the section scrolls normally. */
+@media (min-width: 1041px) {
+  #sec-explore.visible { overflow: hidden; }
+  #sec-explore .explore-grid { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
+  /* Both columns fill the section height and scroll internally if content
+     overflows. The model list keeps its own natural (size=12) height — a
+     native <select> does NOT flex reliably, so we don't stretch it. */
+  #sec-explore .explore-grid > .card { min-height: 0; overflow: auto; }
 }
 
-/* --- Metrics cards (Estimate + HIL side-by-side) --- */
-.metric-banner{
-  margin: 10px 0 10px;
-  padding: 8px 10px;
-  border-radius: 12px;
-  background: rgba(76,110,245,0.08);
-  border: 1px solid rgba(76,110,245,0.18);
-  font-weight: 850;
-  color: #111827;
+.matchline { font-size: 0.9rem; color: var(--text); font-weight: 700; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-tint); border: 1px solid var(--brand-ring); }
+.matchline b { font-family: var(--font-display); color: var(--brand); }
+:root[data-theme="c"] .matchline b { color: #C3C8FF; }
+.model-picker { border-radius: var(--radius-sm); padding: 12px; }
+.model-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
+.model-picker-title { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; }
+.model-picker-subtle { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
+.model-list { height: auto; min-height: 280px; padding: 8px 10px; line-height: 1.4; border-radius: var(--radius-sm); background-image: none !important; padding-right: 12px !important; cursor: auto; }
+.model-list option { padding: 7px 8px; border-radius: 4px; }
+
+/* Deploy page: numbered step strip under the section head */
+.deploy-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
+.deploy-steps li {
+  display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 7px;
+  border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface);
+  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em;
+  text-transform: uppercase; color: var(--text-dim);
+}
+.deploy-steps .ds-num {
+  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
+  background: var(--brand); color: #fff; font-size: 0.8rem; line-height: 1;
+}
+.deploy-steps .ds-txt { white-space: nowrap; }
+/* Hero terminal for the download command (the only non-token colors allowed) */
+#actions .cmd-row pre {
+  background: #18172B; color: #EAEBFB; margin: 0; padding: 12px 14px; border-radius: var(--radius-sm);
+  border: 1px solid rgba(42,40,157,0.55); border-left: 4px solid var(--brand-2);
+}
+
+.link { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--link-text); text-decoration: none; padding: 9px 13px; border-radius: var(--radius-sm); border: 1px solid var(--link-border); background: var(--link-bg); transition: background 130ms ease, border-color 130ms ease; }
+.link:hover { border-color: var(--brand); filter: brightness(1.02); }
+.link.small { padding: 6px 10px; font-size: 0.8rem; }
+.link.link-na {
+  color: var(--text-mute); background: transparent;
+  border: 1px dashed var(--input-border); cursor: default; font-weight: 600;
 }
-.metric-grid{
+.link.link-na:hover { border-color: var(--input-border); filter: none; }
+
+.summary-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
+.summary-grid ul { margin: 0; padding-left: 0; list-style: none; }
+.summary-grid li { margin: 6px 0; color: var(--text); padding-left: 18px; position: relative; }
+.summary-grid li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--brand); }
+:root[data-theme="c"] .summary-grid li::before { background: #6670E6; }
+.repo-buttons { display: grid; gap: 10px; justify-items: end; }
+.repo-buttons .link { width: 100%; justify-content: center; }
+
+/* Metrics cards */
+.metric-banner { margin: 10px 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--surface-border); font-weight: 700; color: var(--text); }
+.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin-top: 10px; }
+.metric-card { border-radius: var(--radius-sm); padding: 14px; min-width: 0; }
+.metric-card-title { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 0.95rem; margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
+.metric-pre { white-space: pre-wrap; word-break: break-word; margin: 0; border-radius: var(--radius-sm); }
+
+/* =====================================================================
+   Merged "Precision & performance" block (selector + metrics)
+   Replaces the old precision/quant chip label and the standalone
+   "Metrics" heading. The selector drives the metrics shown beside it —
+   each option keeps .chip-btn + data-artifact, so the click handler is
+   unchanged (zero JS change).
+   ===================================================================== */
+.pm-heading { margin-top: 20px; }
+
+.pm-block {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  align-items: stretch;
-  margin-top: 10px;
-}
-.metric-card{
-  border: 1px solid rgba(17,24,39,0.10);
-  border-radius: 14px;
-  background: rgba(255,255,255,0.92);
-  padding: 10px 10px 12px;
+  grid-template-columns: minmax(140px, 3fr) minmax(0, 4fr) minmax(0, 3fr);   /* precision | est-vs-HIL graph | accuracy */
+  gap: 14px;
+  align-items: stretch;   /* all three columns share the same height */
+  margin-top: 12px;
+}
+
+/* ---- Selector rail (left) ---- */
+.pm-rail {
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--card-border);
+  background: var(--card-bg);
+  backdrop-filter: var(--card-blur);
+  -webkit-backdrop-filter: var(--card-blur);
+  box-shadow: var(--card-shadow);
+  padding: 12px;
   min-width: 0;
 }
-.metric-card-title{
-  font-weight: 950;
-  color: #111827;
-  font-size: 0.95rem;
-  margin-bottom: 8px;
+.pm-rail-cap {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.78rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  margin-bottom: 10px;
 }
-.metric-pre{
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin: 0;
-  border-radius: 12px;
+.pm-rail-list { display: flex; flex-direction: column; gap: 6px; }
+
+/* Each selectable row keeps .chip-btn (handler-compatible); override the
+   inherited tiny-pill look into a full-width row. */
+.chip-btn.pm-opt {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border: 1px solid var(--chip-border);
+  background: var(--chip-bg);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  position: relative;
+  font-size: inherit;
+  transition: background 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
 }
+.chip-btn.pm-opt:hover { background: var(--brand-tint); border-color: var(--brand-ring); transform: none; }
+.chip-btn.pm-opt:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
 
-/* --- Download copy button --- */
-.cmd-row{
-  display:flex;
-  align-items:center;
-  gap:10px;
-  margin-top:10px;
+/* Radio-dot indicator */
+.pm-opt-dot {
+  flex: 0 0 auto;
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--text-mute);
+  background: transparent;
+  display: grid;
+  place-items: center;   /* centers the check glyph regardless of box metrics */
+  transition: border-color 130ms ease, background 130ms ease;
 }
-.cmd-row pre{
+
+/* Label (condensed display type, like brand titles) */
+.pm-opt-label {
   flex: 1 1 auto;
+  min-width: 0;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.96rem;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--text);
+  line-height: 1.1;
+  word-break: break-word;
 }
 
-.copy-btn{
-  appearance:none;
-  border: 1px solid rgba(17,24,39,0.12);
-  background: rgba(255,255,255,0.92);
-  border-radius: 10px;
-  padding: 8px 10px;
-  cursor: pointer;
-  font-weight: 950;
-  line-height: 1;
-  display:inline-flex;
-  align-items:center;
-  gap:8px;
-  color: rgba(17,24,39,0.88);
-  white-space: nowrap;
-}
-.copy-btn:hover{
-  background: rgba(76,110,245,0.10);
-  border-color: rgba(76,110,245,0.35);
-  box-shadow: 0 0 0 4px rgba(76,110,245,0.10);
-}
-.copy-btn .icon{ font-size: 1rem; }
-.copy-btn.copied{
-  background: rgba(16,185,129,0.10);
-  border-color: rgba(16,185,129,0.35);
-  box-shadow: 0 0 0 4px rgba(16,185,129,0.10);
-}
-
-/* Scatter */
-.chart-wrap{
-  width:100%; border-radius:12px; border:1px solid rgba(17,24,39,0.08);
-  background: linear-gradient(180deg, rgba(76,110,245,0.04), transparent);
-  overflow:hidden;
-}
-.tooltip{
-  position:absolute; pointer-events:none; padding:10px 10px; border-radius:12px;
-  background: rgba(15,26,48,0.92); color: rgba(232,238,252,0.95);
-  border:1px solid rgba(232,238,252,0.18); box-shadow: 0 18px 40px rgba(0,0,0,0.28);
-  font-size:0.85rem; max-width:320px; line-height:1.25;
-}
-
-/* Modal */
-.modal{
-  position: fixed;
-  inset: 0;
-  z-index: 10000;
+/* "Selected" badge — only on the active row */
+.pm-opt-badge {
+  flex: 0 0 auto;
   display: none;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.62rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #fff;
+  background: rgba(255,255,255,0.22);
+  border-radius: 999px;
+  padding: 2px 8px;
+  line-height: 1.3;
 }
-.modal.open{ display:block; }
-.modal-backdrop{
-  position:absolute;
-  inset:0;
-  background: rgba(0,0,0,0.45);
-  backdrop-filter: blur(4px);
-}
-.modal-panel{
-  position: absolute;
-  top: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: min(980px, calc(100vw - 28px));
-  max-height: calc(100vh - 48px);
-  overflow: auto;
-  background: #fff;
-  border-radius: 16px;
-  border: 1px solid rgba(17,24,39,0.10);
-  box-shadow: 0 25px 80px rgba(0,0,0,0.35);
-}
-.modal-head{
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  background: rgba(255,255,255,0.92);
-  backdrop-filter: blur(8px);
-  border-bottom: 1px solid rgba(17,24,39,0.08);
-  padding: 12px 14px;
-  display:flex;
-  align-items:center;
-  justify-content: space-between;
-  gap: 12px;
-}
-.modal-title{
-  font-weight: 950;
-  font-size: x-large;
-  color: #111827;
-}
-.icon-btn{
-  appearance:none;
-  border: 1px solid rgba(17,24,39,0.12);
-  background: rgba(255,255,255,0.9);
-  border-radius: 12px;
-  padding: 8px 10px;
-  cursor: pointer;
-  font-weight: 950;
+
+/* ---- ACTIVE row: unmistakable solid brand fill ---- */
+.chip-btn.pm-opt.active {
+  background: var(--brand);
+  border-color: var(--brand);
+  box-shadow: 0 2px 10px rgba(42,40,157,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
+  transform: none;
+}
+.chip-btn.pm-opt.active:hover { background: var(--brand-press); border-color: var(--brand-press); }
+.chip-btn.pm-opt.active .pm-opt-label { color: #fff; }
+.chip-btn.pm-opt.active .pm-opt-badge { display: inline-block; }
+.chip-btn.pm-opt.active .pm-opt-dot { border-color: #fff; background: #fff; }
+.chip-btn.pm-opt.active .pm-opt-dot::after {
+  content: "";
+  width: 3.5px; height: 7px;
+  margin-top: -1px;   /* optical lift so the tick sits centred in the circle */
+  border: solid var(--brand); border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
 }
-.modal-body{ padding: 12px 14px 16px; }
+.chip-btn.pm-opt.active:focus-visible { box-shadow: 0 0 0 3px var(--brand-ring), 0 2px 10px rgba(42,40,157,0.28); }
 
-/* All Models table takes all available height */
-#sec-all .section-scroll{
-  display:flex;
-  flex-direction:column;
-  min-height:0;
-  overflow:hidden;
+.pm-opt-empty {
+  padding: 12px;
+  border: 1px dashed var(--hairline);
+  border-radius: var(--radius-sm);
+  font-size: 0.85rem;
+  text-align: center;
 }
-#sec-all .section-head{ flex: 0 0 auto; }
-#sec-all .card{
-  flex: 1 1 auto;
-  min-height:0;
-  display:flex;
-  flex-direction:column;
+
+/* ---- Column 2: Est-vs-HIL throughput as a small bar graph.
+   Bars use flex-grow (not % heights) so they scale to whatever height the
+   row stretches to, with no dependence on a definite track height. ---- */
+.pm-graph, .pm-acc { display: flex; flex-direction: column; min-width: 0; }
+.pm-bars { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center; gap: 22px; min-height: 96px; margin-top: 12px; }
+.pm-bar-col { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; }
+.pm-bar-val { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; line-height: 1; color: var(--text); }
+.pm-bar-track { width: 40px; flex: 1 1 auto; min-height: 56px; display: flex; flex-direction: column; }
+.pm-bar-fill { width: 100%; min-height: 4px; border-radius: 6px 6px 2px 2px; }
+.pm-bar-fill.est { background: var(--brand-2); }
+.pm-bar-fill.hil { background: var(--brand); }
+.pm-bar-lbl { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
+.pm-graph-empty { flex: 1 1 auto; display: grid; place-items: center; min-height: 80px; font-size: 0.85rem; }
+.pm-graph-foot { margin-top: 10px; text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--text-mute); }
+
+/* ---- Column 3: Accuracy (HIL-first; "—" until published) ---- */
+.pm-acc-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
+.pm-acc-num { font-family: var(--font-display); font-weight: 700; font-size: 1.95rem; line-height: 1; color: var(--brand); }
+:root[data-theme="c"] .pm-acc-num { color: #C3C8FF; }
+.pm-acc-num.empty { color: var(--text-mute); font-size: 1.6rem; }
+.pm-acc-sub { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); }
+
+/* ---- Dark variant (data-theme="c") — match the established #6670E6 accent ---- */
+:root[data-theme="c"] .chip-btn.pm-opt.active {
+  background: #6670E6;
+  border-color: #6670E6;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.20);
 }
-#sec-all .table-shell{
-  flex: 1 1 auto;
-  min-height:0;
-  display:flex;
-  flex-direction:column;
+:root[data-theme="c"] .chip-btn.pm-opt.active:hover { background: #565FD6; border-color: #565FD6; }
+:root[data-theme="c"] .chip-btn.pm-opt.active .pm-opt-dot::after { border-color: #6670E6; }
+
+/* ---- Responsive: selector ABOVE metrics on narrow screens ---- */
+@media (max-width: 760px) {
+  .pm-block { grid-template-columns: 1fr; gap: 14px; }
+  .pm-rail-list { flex-direction: row; flex-wrap: wrap; }
+  .chip-btn.pm-opt { width: auto; flex: 1 1 150px; }
 }
-#sec-all .table-wrap{
-  flex: 1 1 auto;
-  min-height:0;
-  max-height:none;
-  height:100%;
-  overflow:auto;
+
+/* Mini chart */
+.mini-chart-wrap { margin-top: 12px; border: 1px solid var(--canvas-border); border-radius: var(--radius-sm); background: var(--canvas-bg); overflow: hidden; position: relative; }
+.mini-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 12px 0; }
+.mini-chart-title { font-family: var(--font-display); font-weight: 700; color: #2C2B45; letter-spacing: 0.02em; }
+.mini-chart-subtle { color: #5b5750; font-weight: 600; font-size: 0.85rem; }
+.mini-chart-wrap canvas { cursor: grab; }
+.mini-chart-wrap canvas:active { cursor: grabbing; }
+
+/* Download copy */
+.cmd-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
+.cmd-row pre { flex: 1 1 auto; }
+.copy-btn { appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; transition: background 130ms ease, border-color 130ms ease; }
+.copy-btn:hover { background: var(--brand-tint); border-color: var(--brand); }
+.copy-btn.copied { background: color-mix(in srgb, var(--bc-gguf) 16%, transparent); border-color: color-mix(in srgb, var(--bc-gguf) 45%, transparent); color: var(--bc-gguf); }
+.copy-btn .icon { font-size: 1rem; }
+
+/* =====================================================================
+   TABLE
+   ===================================================================== */
+.table-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+.table-wrap { flex: 1 1 auto; min-height: 0; border: 1px solid var(--card-border); border-radius: var(--radius-sm); overflow: auto; background: var(--card-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); }
+table.table { width: 100%; min-width: 720px; border-collapse: collapse; background: transparent; }
+.table th, .table td { padding: 12px 15px; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; color: var(--text); vertical-align: top; text-align: left; }
+/* Header — brand band with a brand-2 accent underline (the signature edge accent) */
+.table th {
+  background: var(--table-head-bg); color: var(--table-head-text);
+  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.78rem;
+  white-space: nowrap; border-bottom: none; box-shadow: inset 0 -3px 0 var(--brand-2);
 }
+.table thead th { position: sticky; top: 0; z-index: 3; }
+.table tbody tr { transition: background 130ms ease; }
+/* subtle zebra for cross-row scanning (pinned cell gets the matching tint over its opaque base) */
+.table tbody tr:nth-child(even) td { background: rgba(42,40,157,0.035); }
+.table tbody tr:nth-child(even) .pin { background: linear-gradient(rgba(42,40,157,0.035), rgba(42,40,157,0.035)), var(--panel-bg); }
+.table tbody tr:hover td { background: var(--brand-tint); }
+.table tbody tr:last-child td { border-bottom: none; }
+/* Name reads as the row's title; a left accent bar slides in on hover */
+.table td.cell-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text); white-space: nowrap; }
+/* Publisher logo + model name in the Name cell (mirrors the card's .mc-designer) */
+.tc-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
+.tc-name .mc-logo { line-height: 0; }
+.table tbody tr:hover td.cell-name { box-shadow: inset 3px 0 0 var(--brand); }
 
-/* Responsive */
-@media (max-width: 980px){
-  .topbar-inner { grid-template-columns: 1fr; }
-  .tabs { justify-content: flex-start; }
+.pin { position: sticky; left: 0; z-index: 2; background: var(--panel-bg); }
+.table thead .pin { z-index: 4; background: var(--table-head-bg); }
+.table tbody tr:hover .pin { background: var(--card-hover-bg); }
+
+.table .badges { flex-direction: column; align-items: flex-start; gap: 6px; }
+.table .badges.badges-row { flex-direction: row; flex-wrap: wrap; }
+.table th.details-col, .table td.details-col { width: 1%; white-space: nowrap; }
+.table td.details-col { vertical-align: middle; }
+
+/* Metric mini-table — label left, value right-aligned in display type */
+.cell-metrics { display: grid; gap: 3px; white-space: normal; line-height: 1.2; min-width: 118px; }
+.cell-metrics .row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; }
+.cell-metrics .k { font-size: 0.66rem; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; }
+.cell-metrics .v { font-family: var(--font-display); font-weight: 700; color: var(--text); text-align: right; font-size: 0.95rem; line-height: 1; }
+
+.mini-btn { appearance: none; border: 1px solid var(--brand-ring); background: var(--brand-tint); color: var(--brand); border-radius: var(--radius-sm); padding: 7px 12px; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: var(--font-body); transition: background 130ms ease; }
+:root[data-theme="c"] .mini-btn { color: #C3C8FF; }
+.mini-btn:hover { background: var(--brand); color: #fff; }
+
+/* =====================================================================
+   MODAL
+   ===================================================================== */
+.modal { position: fixed; inset: 0; z-index: 10000; display: none; }
+.modal.open { display: block; }
+.modal-backdrop { position: absolute; inset: 0; background: var(--modal-backdrop); backdrop-filter: blur(4px); }
+.modal-panel {
+  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
+  width: min(980px, calc(100vw - 28px)); max-height: calc(100vh - 60px); overflow: hidden;
+  display: flex; flex-direction: column;
+  background: var(--panel-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
+  border-radius: var(--radius); border: 1px solid var(--panel-border); box-shadow: 0 40px 90px rgba(0,0,0,0.35), var(--panel-shadow);
+}
+:root[data-theme="a"] .modal-panel { background: #FFFFFF; border-top: 3px solid var(--brand); }
+.modal-head { flex: 0 0 auto; z-index: 5; background: var(--header-bg); backdrop-filter: var(--header-blur); border-bottom: 1px solid var(--hairline); border-radius: var(--radius) var(--radius) 0 0; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--text); letter-spacing: 0.02em; text-transform: uppercase; }
+.icon-btn { appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg); border-radius: var(--radius-sm); padding: 8px 11px; cursor: pointer; font-weight: 700; color: var(--text); }
+.icon-btn:hover { background: var(--brand-tint); border-color: var(--brand); }
+.modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px 20px; }
+
+/* =====================================================================
+   Scrollbars
+   ===================================================================== */
+.facets::-webkit-scrollbar, .card-grid::-webkit-scrollbar, .table-wrap::-webkit-scrollbar,
+.carousel-track::-webkit-scrollbar, #sec-overview::-webkit-scrollbar, #sec-explore::-webkit-scrollbar,
+#sec-explore .explore-grid > .card::-webkit-scrollbar,
+.modal-panel::-webkit-scrollbar { width: 10px; height: 9px; }
+::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-track { background: transparent; }
+
+/* =====================================================================
+   Responsive
+   ---------------------------------------------------------------------
+   ≥1281px  Full layout (tuned for wide / ultrawide screens)
+   ≤1280px  Laptop — tighten padding, narrower rails, shorter chart
+   ≤1040px  Tablet — single-column layouts, catalog filters collapse behind a toggle
+   ≤680px   Phone  — switch to natural document scroll, stack everything
+   ===================================================================== */
+
+/* ---------- Laptop: keep the desktop layout but ease the spacing ---------- */
+@media (max-width: 1280px) {
+  .section-title { font-size: 1.7rem; }
+  .catalog-layout { grid-template-columns: 184px minmax(0, 1fr); }
+  .card-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
+  .grid.explore-grid { grid-template-columns: minmax(300px, 36%) 1fr; }
+  .constellation canvas { height: 400px; }
+  .stat-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
+}
+
+/* ---------- Tablet ---------- */
+@media (max-width: 1040px) {
+  /* Nav stays inline on the header row (no wrap) right down to the phone breakpoint */
+  .topbar-inner { padding: 10px 16px; }
   .grid.two, .grid.explore-grid { grid-template-columns: 1fr; }
-  .field-row.two{ grid-template-columns: 1fr; }
-  .summary-grid{ grid-template-columns: 1fr; }
-  .repo-buttons{ justify-items: start; padding: 0; }
-  .repo-buttons .link{ width: auto; justify-content: flex-start; }
-  .field.inline.compact{ padding-top: 0; }
-
-  .metric-grid{ grid-template-columns: 1fr; }
-}
+  .field-row.two { grid-template-columns: 1fr 1fr; }
+  .summary-grid { grid-template-columns: 1fr; }
+  .repo-buttons { justify-items: start; }
+  .repo-buttons .link { width: auto; }
+  .metric-grid { grid-template-columns: 1fr 1fr; }
+  .catalog-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
+  .facets { border-right: none; border-bottom: 1px solid var(--hairline); max-height: none; overflow: visible; }
+  /* Catalog filters collapse behind the "Filters" toggle — the old always-open
+     top strip is removed, leaving only "left rail" (desktop) and "collapsed".
+     Scoped to .facets-head so the Explore toggle is unaffected here. */
+  .facets-head .filter-toggle { display: flex; width: auto; flex: 1 1 auto; }
+  .facets-title { display: none; }
+  .facets-body { display: none; }
+  .facets-body.open { display: flex; max-height: 50vh; overflow-y: auto; padding-bottom: 2px; }
+  /* Overview model constellation — same merge: its "Chart filters" collapse moves
+     up here too, so it has only "full" (desktop) and "collapsed" states. */
+  #cstlFilterToggle { display: flex; margin-bottom: 12px; }
+  .cstl-controls { display: none; margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
+  .cstl-controls.open { display: flex; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
+}
+
+/* ---------- Phone: natural document scroll, burger nav, fully stacked ---------- */
+@media (max-width: 680px) {
+  /* Release the fixed-viewport lock so the page scrolls as one document */
+  html, body { height: auto; }
+  body { height: auto; min-height: 100dvh; overflow-y: auto; overflow-x: hidden; }
+  .topbar { position: sticky; top: 0; }
+  .content { flex: 0 0 auto; height: auto; min-height: 0; overflow: visible; }
+
+  .section { height: auto; min-height: 0; overflow: visible; }
+  #sec-overview.visible, #sec-explore.visible { overflow: visible; }
+
+  /* Header stays on a single line: brand left, burger right */
+  .topbar-inner { flex-wrap: nowrap; padding: 9px 12px; gap: 12px; }
+  .brand-icon { height: 19px; }
+  .brand-subtitle { display: none; }
+  .nav-burger { display: inline-flex; }
+
+  /* Tabs collapse into a dropdown panel under the header */
+  .tabs {
+    position: absolute; top: 100%; left: 0; right: 0; margin: 0; z-index: 60;
+    flex-direction: column; align-items: stretch; gap: 4px; padding: 8px;
+    display: none;
+    background: rgba(255,255,255,0.95); backdrop-filter: blur(26px) saturate(165%); -webkit-backdrop-filter: blur(26px) saturate(165%);
+    border-bottom: 1px solid var(--header-border); box-shadow: 0 18px 40px rgba(42,40,157,0.20);
+  }
+  .tabs.open { display: flex; }
+  .nav-item { width: 100%; text-align: left; padding: 11px 14px; font-size: 0.96rem; }
+
+  /* Headings scale down */
+  .section-title { font-size: 1.45rem; }
+  .card-head-title { font-size: 1.12rem; }
+  .carousel-section.featured .carousel-title { font-size: 1.18rem; }
+
+  /* Overview */
+  .stat-tiles { grid-template-columns: 1fr 1fr; }
+  .stat-num { font-size: 1.7rem; }
+  .cstl-controls .field { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); }
+  .constellation canvas { height: 320px; }
+  .rc-card { flex-basis: 78vw; }
+
+  /* Catalog — a wrapping two-up grid that scrolls vertically with the page
+     (NOT a single horizontal swipe lane) */
+  .toolbar { flex-wrap: wrap; }
+  .card-grid {
+    flex: 0 0 auto; height: auto; min-height: 0;
+    display: grid; grid-template-columns: repeat(2, 1fr);
+    overflow-x: hidden; overflow-y: visible;
+    gap: 10px; padding-bottom: 16px; scroll-snap-type: none;
+  }
+  .model-card { width: auto; scroll-snap-align: none; padding: 10px; gap: 8px; }
+  .mc-monogram { width: 34px; height: 34px; font-size: 0.8rem; }
+  .mc-head { gap: 9px; }
+  .mc-title { font-size: 0.95rem; }
+  .mc-stat { padding: 8px 10px 8px 11px; }
+  .mc-stat-num { font-size: 1.18rem; }
+  /* Table → cards: collapse each row into a stacked card (no horizontal scroll),
+     flowing with the document. Each <td> becomes a labelled space-between row. */
+  .table-view { display: block; flex: 0 0 auto; height: auto; min-height: 0; overflow: visible; padding: 8px 10px 16px; }
+  .table-wrap { max-height: none; overflow: visible; border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
+  table.table { min-width: 0; display: block; width: auto; }
+  .table thead { display: none; }
+  .table tbody { display: flex; flex-direction: column; gap: 12px; }
+  .table tbody tr {
+    position: relative; overflow: hidden; display: block;
+    padding: 15px 16px 13px;
+    border: 1px solid var(--card-border); border-radius: var(--card-radius);
+    background: var(--card-bg); box-shadow: var(--card-shadow);
+  }
+  /* signature top accent (matches .model-card) */
+  .table tbody tr::before {
+    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+    background: linear-gradient(90deg, var(--brand), var(--brand-2));
+    transform: scaleX(0.34); transform-origin: left; opacity: 0.85;
+  }
+  /* cancel desktop row tints + sticky pins inside cards */
+  .table tbody tr:hover td, .table tbody tr:nth-child(even) td { background: transparent; }
+  .table .pin { position: static !important; left: auto !important; z-index: auto; background: transparent; }
+  .table tbody tr:hover td.cell-name { box-shadow: none; }
+  .table tbody td {
+    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
+    width: auto; padding: 8px 0; border-bottom: 1px solid var(--hairline);
+    font-size: 0.88rem; white-space: normal; text-align: right;
+  }
+  .table tbody td::before {
+    content: attr(data-label); flex: 0 0 auto; text-align: left;
+    font-family: var(--font-display); font-weight: 700; font-size: 0.66rem;
+    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim);
+  }
+  .table tbody td:last-child { border-bottom: none; }
+  /* Name → card title (block, larger, no label) */
+  .table tbody td[data-label="Name"] {
+    display: block; text-align: left; padding: 0 0 11px; margin-bottom: 4px;
+    border-bottom: 1px solid var(--hairline); font-size: 1.18rem; white-space: normal;
+  }
+  .table tbody td[data-label="Name"]::before { content: none; }
+  /* Details → full-width button */
+  .table tbody td.details-col { display: block; width: auto; padding: 12px 0 4px; border-bottom: none; }
+  .table tbody td.details-col::before { content: none; }
+  .table tbody td.details-col .mini-btn { width: 100%; }
+  .table .cell-metrics { min-width: 0; }
+  .table .badges, .table .badges.badges-row { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
+
+  /* Explore */
+  .field-row.two { grid-template-columns: 1fr; }
+  .metric-grid { grid-template-columns: 1fr; }
+  .model-list { min-height: 220px; }
+
+  /* Collapsible filter clusters — only Explore collapses here now.
+     (Catalog + Overview-constellation filters collapse at ≤1040px above.) */
+  .filter-toggle { display: flex; }
+  .explore-filters { display: none; }
+  .explore-filters.open { display: grid; }
+  /* On phone the whole page scrolls, so let the opened filter lists expand fully */
+  .facets-body.open { max-height: none; overflow: visible; }
+
+  /* Modal goes near full-screen */
+  .modal-panel { top: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
+  .modal-title { font-size: 1.15rem; }
+  .modal-body { padding: 14px; }
+}
+
+/* Explore: on phone the single "Filters" button reveals #exploreFilters, so
+   force the nested Advanced tier open (no two-step) and hide its desktop
+   sub-toggle. Must come AFTER the block above to win on source order. */
+@media (max-width: 680px) {
+  .explore-advanced { display: grid; gap: 10px; }
+  .filter-toggle--inline { display: none; }
+  .explore-filters .field-row.two, .explore-advanced .field-row.two { grid-template-columns: 1fr 1fr; }
+}
+
+/* ---------- Small phone ---------- */
+@media (max-width: 380px) {
+  .stat-tiles { grid-template-columns: 1fr; }
+}