Initial commit

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+/BLOG_POST_*.md
+/assets/dataset-treemap.png

README.md

@@ -0,0 +1,16 @@
+---
+title: "ArmBench-ASR: Armenian Speech Recognition in the Real World"
+emoji: 🎙️
+colorFrom: blue
+colorTo: indigo
+sdk: static
+pinned: false
+---
+
+# ArmBench-ASR: Armenian Speech Recognition in the Real World
+
+An interactive Armenian automatic speech recognition leaderboard.
+
+Current benchmark release: **v0.1**.
+
+The static leaderboard reads `results.csv` directly in the browser and supports single-dataset and all-datasets views, numeric sorting, availability filtering, external model links, and optional grouped score heatmaps.

app.js

@@ -0,0 +1,428 @@
+const DATASET_LABELS = {
+  combined: "Combined",
+  mcv26: "Common Voice 26",
+  fleurs: "FLEURS",
+  poems: "Poems",
+  movies: "Movies",
+  infocom_may_26: "Infocom",
+};
+
+const METRICS = ["WER", "CER", "WER-norm", "CER-norm"];
+
+const state = {
+  records: [],
+  datasets: [],
+  columns: new Map(),
+  view: "matrix",
+  sortKey: "combined|WER",
+  sortDirection: "asc",
+  colorScores: false,
+  availability: new Set(["Open", "Closed"]),
+  availabilityMenuOpen: false,
+};
+
+function setTheme(theme, persist = true) {
+  document.documentElement.dataset.theme = theme;
+  const toggle = document.querySelector("#theme-toggle");
+  if (toggle) {
+    const nextTheme = theme === "dark" ? "light" : "dark";
+    toggle.setAttribute("aria-label", `Switch to ${nextTheme} mode`);
+    toggle.title = `Switch to ${nextTheme} mode`;
+  }
+  if (persist) {
+    try { localStorage.setItem("arm-asr-theme", theme); } catch (_) {}
+  }
+}
+
+function parseCsv(text) {
+  const rows = [];
+  let row = [];
+  let field = "";
+  let quoted = false;
+
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index];
+    if (quoted) {
+      if (char === '"' && text[index + 1] === '"') {
+        field += '"';
+        index += 1;
+      } else if (char === '"') {
+        quoted = false;
+      } else {
+        field += char;
+      }
+    } else if (char === '"') {
+      quoted = true;
+    } else if (char === ",") {
+      row.push(field);
+      field = "";
+    } else if (char === "\n") {
+      row.push(field.replace(/\r$/, ""));
+      if (row.some((value) => value !== "")) rows.push(row);
+      row = [];
+      field = "";
+    } else {
+      field += char;
+    }
+  }
+
+  if (field || row.length) {
+    row.push(field.replace(/\r$/, ""));
+    rows.push(row);
+  }
+  return rows;
+}
+
+function ingest(rows) {
+  const [sections, datasets, metrics] = rows.slice(0, 3);
+  const modelIndex = sections.indexOf("model");
+  const urlIndex = sections.indexOf("model_url");
+  const availabilityIndex = sections.indexOf("availability");
+  const standardIndex = sections.indexOf("standard");
+  let currentDataset = "";
+
+  for (let index = standardIndex; index < sections.length; index += 1) {
+    if (datasets[index]) currentDataset = datasets[index];
+    if (currentDataset && METRICS.includes(metrics[index])) {
+      state.columns.set(`${currentDataset}|${metrics[index]}`, index);
+      if (!state.datasets.includes(currentDataset)) state.datasets.push(currentDataset);
+    }
+  }
+
+  state.records = rows.slice(3).map((row) => {
+    const values = {};
+    for (const [key, index] of state.columns) {
+      values[key] = row[index] === "" || row[index] === undefined ? null : Number(row[index]);
+    }
+    return {
+      model: row[modelIndex],
+      url: row[urlIndex],
+      availability: row[availabilityIndex],
+      values,
+    };
+  });
+}
+
+function currentDataset() {
+  return document.querySelector('input[name="dataset"]:checked')?.value || state.datasets[0];
+}
+
+function currentMatrixMetric() {
+  return document.querySelector('input[name="matrix-metric"]:checked')?.value || "WER";
+}
+
+function rankRecords(records, dataset, metric = "WER") {
+  const rankKey = `${dataset}|${metric}`;
+  const ranked = [...records].sort((left, right) => {
+    const a = left.values[rankKey];
+    const b = right.values[rankKey];
+    if (a === null) return 1;
+    if (b === null) return -1;
+    return a - b || left.model.localeCompare(right.model);
+  });
+  return new Map(ranked.map((record, index) => [record.model, index + 1]));
+}
+
+function makeCell(tag, text, className = "") {
+  const cell = document.createElement(tag);
+  cell.textContent = text;
+  if (className) cell.className = className;
+  return cell;
+}
+
+function matrixRanges(columns) {
+  const familyValues = { wer: [], cer: [] };
+  columns.forEach((column) => {
+    const metric = column.key.split("|")[1];
+    const family = metric.startsWith("CER") ? "cer" : "wer";
+    state.records.forEach((record) => {
+      const value = record.values[column.key];
+      if (value !== null) familyValues[family].push(value);
+    });
+  });
+
+  const familyRanges = Object.fromEntries(Object.entries(familyValues).map(([family, values]) => [
+    family,
+    values.length ? { min: Math.min(...values), max: Math.max(...values) } : null,
+  ]));
+
+  return new Map(columns.map((column) => {
+    const metric = column.key.split("|")[1];
+    const family = metric.startsWith("CER") ? "cer" : "wer";
+    return [column.key, familyRanges[family]];
+  }));
+}
+
+function heatClass(value, range) {
+  if (value === null || !range || range.max === range.min) return "";
+  const ratio = (value - range.min) / (range.max - range.min);
+  return ` heat-score-${Math.min(5, Math.floor(ratio * 5) + 1)}`;
+}
+
+function render() {
+  const dataset = currentDataset();
+  const matrixMetric = currentMatrixMetric();
+  const isMatrix = state.view === "matrix";
+  const columns = isMatrix
+    ? state.datasets.map((item) => ({ label: DATASET_LABELS[item] || item, key: `${item}|${matrixMetric}` }))
+    : METRICS.map((metric) => ({ label: metric, key: `${dataset}|${metric}` }));
+  const table = document.querySelector("#leaderboard-table");
+  const head = table.querySelector("thead");
+  const body = table.querySelector("tbody");
+  const rankDataset = isMatrix ? "combined" : dataset;
+  const rankMetric = isMatrix ? matrixMetric : "WER";
+  const ranks = rankRecords(state.records, rankDataset, rankMetric);
+  const ranges = state.colorScores ? matrixRanges(columns) : new Map();
+
+  let records = state.records.filter((record) => state.availability.has(record.availability));
+
+  if (columns.some((column) => column.key === state.sortKey)) {
+    const direction = state.sortDirection === "asc" ? 1 : -1;
+    records = [...records].sort((left, right) => {
+      const a = left.values[state.sortKey];
+      const b = right.values[state.sortKey];
+      if (a === null) return 1;
+      if (b === null) return -1;
+      return (a - b) * direction || left.model.localeCompare(right.model);
+    });
+  }
+
+  const headerRow = document.createElement("tr");
+  const rankHeader = makeCell("th", "Rank");
+  rankHeader.title = `Ranked by ${rankMetric} for ${DATASET_LABELS[rankDataset] || rankDataset}`;
+  const availabilityHeader = document.createElement("th");
+  const availabilityControl = document.createElement("span");
+  availabilityControl.className = "availability-control";
+  const availabilityLabel = document.createElement("button");
+  availabilityLabel.type = "button";
+  availabilityLabel.className = "availability-label";
+  availabilityLabel.setAttribute("aria-expanded", String(state.availabilityMenuOpen));
+  availabilityLabel.setAttribute("aria-label", "Filter models by availability");
+  const availabilitySummary = state.availability.size === 2
+    ? "All"
+    : [...state.availability][0];
+  availabilityLabel.innerHTML = `Availability <span>${availabilitySummary}</span><b aria-hidden="true">⌄</b>`;
+  availabilityLabel.addEventListener("click", (event) => {
+    event.stopPropagation();
+    state.availabilityMenuOpen = !state.availabilityMenuOpen;
+    render();
+  });
+  const availabilityFilters = document.createElement("span");
+  availabilityFilters.className = "availability-filters";
+  availabilityFilters.hidden = !state.availabilityMenuOpen;
+  availabilityFilters.addEventListener("click", (event) => event.stopPropagation());
+  ["Open", "Closed"].forEach((value) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `availability-filter ${value.toLowerCase()}`;
+    button.classList.toggle("is-active", state.availability.has(value));
+    button.setAttribute("aria-pressed", String(state.availability.has(value)));
+    button.setAttribute("aria-label", `Toggle ${value.toLowerCase()} models`);
+    button.textContent = value;
+    button.addEventListener("click", () => {
+      if (state.availability.has(value) && state.availability.size > 1) state.availability.delete(value);
+      else state.availability.add(value);
+      render();
+    });
+    availabilityFilters.append(button);
+  });
+  availabilityControl.append(availabilityLabel, availabilityFilters);
+  availabilityHeader.append(availabilityControl);
+  headerRow.append(rankHeader, makeCell("th", "Model"), availabilityHeader);
+  columns.forEach((column) => {
+    const header = document.createElement("th");
+    if (isMatrix && column.key.startsWith("combined|")) header.classList.add("combined-score");
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "sort-button";
+    if (state.sortKey === column.key) button.classList.add(`is-${state.sortDirection}`);
+    button.textContent = column.label;
+    button.setAttribute("aria-label", `Sort by ${column.label}`);
+    button.addEventListener("click", () => {
+      if (state.sortKey === column.key) {
+        state.sortDirection = state.sortDirection === "asc" ? "desc" : "asc";
+      } else {
+        state.sortKey = column.key;
+        state.sortDirection = "asc";
+      }
+      render();
+    });
+    header.append(button);
+    headerRow.append(header);
+  });
+  head.replaceChildren(headerRow);
+
+  const rows = records.map((record) => {
+    const row = document.createElement("tr");
+    const modelCell = document.createElement("td");
+    const modelWrap = document.createElement("div");
+    modelWrap.className = "model-cell";
+    const model = document.createElement("span");
+    model.className = "model-name";
+    model.textContent = record.model;
+    modelWrap.append(model);
+    if (record.url) {
+      const link = document.createElement("a");
+      link.className = "model-link";
+      link.href = record.url;
+      link.target = "_blank";
+      link.rel = "noreferrer";
+      link.title = `Open ${record.model}`;
+      link.setAttribute("aria-label", `Open ${record.model} model page`);
+      link.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5m0-5-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4"/></svg>';
+      modelWrap.append(link);
+    }
+    modelCell.append(modelWrap);
+
+    const rank = ranks.get(record.model);
+    const rankCell = makeCell("td", rank ? `#${rank}` : "—", `rank${rank <= 3 ? " rank-top" : ""}`);
+
+    const availabilityCell = document.createElement("td");
+    const badge = document.createElement("span");
+    badge.className = `availability-badge ${record.availability.toLowerCase()}`;
+    badge.textContent = record.availability;
+    availabilityCell.append(badge);
+    row.append(rankCell, modelCell, availabilityCell);
+
+    columns.forEach((column) => {
+      const value = record.values[column.key];
+      const heat = state.colorScores ? `heat-cell${heatClass(value, ranges.get(column.key))}` : "";
+      const cell = makeCell("td", value === null ? "—" : value.toFixed(2), heat);
+      if (isMatrix && column.key.startsWith("combined|")) cell.classList.add("combined-score");
+      row.append(cell);
+    });
+    return row;
+  });
+  body.replaceChildren(...rows);
+
+  document.querySelector("#table-title").textContent = isMatrix
+    ? `${matrixMetric} across all datasets`
+    : `${DATASET_LABELS[dataset] || dataset} leaderboard`;
+  const colorNote = state.colorScores
+    ? " Colors are scaled separately within the WER and CER metric families: green is better, red is worse."
+    : "";
+  document.querySelector("#table-description").textContent = (isMatrix
+    ? `Rank is based on Overall ${matrixMetric}. Scores are percentages; lower is better.`
+    : "Rank is based on WER. Scores are percentages; lower is better.") + colorNote;
+  document.querySelector("#result-count").textContent = `${records.length} ${records.length === 1 ? "model" : "models"}`;
+  document.querySelector("#empty-state").hidden = records.length !== 0;
+  table.hidden = records.length === 0;
+}
+
+function setView(view) {
+  state.view = view;
+  const isMatrix = view === "matrix";
+  document.querySelector("#leaderboards").classList.toggle("matrix-view", isMatrix);
+  document.querySelector(".matrix-metric-field").hidden = !isMatrix;
+  document.querySelectorAll(".view-button").forEach((button) => {
+    const active = button.dataset.view === view;
+    button.classList.toggle("is-active", active);
+    button.setAttribute("aria-pressed", String(active));
+  });
+  state.sortKey = isMatrix
+    ? `combined|${currentMatrixMetric()}`
+    : `${currentDataset()}|WER`;
+  state.sortDirection = "asc";
+  render();
+}
+
+function activateTab(name, updateHash = true) {
+  const validName = ["leaderboards", "datasets", "about"].includes(name) ? name : "leaderboards";
+  document.querySelectorAll(".tab").forEach((tab) => {
+    const active = tab.dataset.tab === validName;
+    tab.classList.toggle("is-active", active);
+    tab.setAttribute("aria-selected", String(active));
+  });
+  document.querySelectorAll(".panel").forEach((panel) => {
+    const active = panel.id === validName;
+    panel.classList.toggle("is-active", active);
+    panel.hidden = !active;
+  });
+  if (updateHash) history.replaceState(null, "", `#${validName}`);
+}
+
+function buildControls() {
+  const datasetOptions = document.querySelector("#dataset-options");
+  state.datasets.forEach((dataset, index) => {
+    const label = document.createElement("label");
+    label.className = "choice-pill";
+    if (dataset === "combined") label.classList.add("combined-choice");
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = "dataset";
+    input.value = dataset;
+    input.checked = index === 0;
+    input.addEventListener("change", () => {
+      state.sortKey = `${dataset}|WER`;
+      state.sortDirection = "asc";
+      render();
+    });
+    label.append(input, document.createTextNode(DATASET_LABELS[dataset] || dataset));
+    datasetOptions.append(label);
+  });
+
+  const matrixOptions = document.querySelector("#matrix-metric-options");
+  METRICS.forEach((metric, index) => {
+    const matrixLabel = document.createElement("label");
+    matrixLabel.className = "choice-pill";
+    const matrixInput = document.createElement("input");
+    matrixInput.type = "radio";
+    matrixInput.name = "matrix-metric";
+    matrixInput.value = metric;
+    matrixInput.checked = index === 0;
+    matrixInput.addEventListener("change", () => {
+      state.sortKey = `combined|${metric}`;
+      state.sortDirection = "asc";
+      render();
+    });
+    matrixLabel.append(matrixInput, document.createTextNode(metric));
+    matrixOptions.append(matrixLabel);
+  });
+
+  document.querySelector("#color-toggle").addEventListener("click", (event) => {
+    state.colorScores = !state.colorScores;
+    event.currentTarget.classList.toggle("is-active", state.colorScores);
+    event.currentTarget.setAttribute("aria-pressed", String(state.colorScores));
+    render();
+  });
+  document.querySelectorAll(".view-button").forEach((button) => button.addEventListener("click", () => setView(button.dataset.view)));
+  document.querySelectorAll(".tab").forEach((tab) => tab.addEventListener("click", () => activateTab(tab.dataset.tab)));
+  document.querySelector("#theme-toggle").addEventListener("click", () => {
+    setTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark");
+  });
+  document.addEventListener("click", () => {
+    if (!state.availabilityMenuOpen) return;
+    state.availabilityMenuOpen = false;
+    render();
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || !state.availabilityMenuOpen) return;
+    state.availabilityMenuOpen = false;
+    render();
+  });
+  setTheme(document.documentElement.dataset.theme, false);
+}
+
+async function start() {
+  try {
+    const response = await fetch("results.csv");
+    if (!response.ok) throw new Error(`Could not load results.csv (${response.status})`);
+    ingest(parseCsv(await response.text()));
+    buildControls();
+    activateTab(location.hash.slice(1), false);
+    render();
+  } catch (error) {
+    document.querySelector("#table-title").textContent = "Leaderboard unavailable";
+    document.querySelector("#leaderboard-table").hidden = true;
+    const empty = document.querySelector("#empty-state");
+    empty.hidden = false;
+    empty.querySelector("h3").textContent = "Could not load results";
+    empty.querySelector("p").textContent = error.message;
+  }
+}
+
+if (typeof module !== "undefined") {
+  module.exports = { heatClass, ingest, matrixRanges, parseCsv, rankRecords, setTheme, state };
+}
+
+if (typeof document !== "undefined") start();

index.html

@@ -0,0 +1,220 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="A comparative leaderboard for Armenian automatic speech recognition models."
+    />
+    <title>ArmBench-ASR: Armenian Speech Recognition in the Real World</title>
+    <script>
+      (() => {
+        let saved = null;
+        try { saved = localStorage.getItem("arm-asr-theme"); } catch (_) {}
+        const theme = saved || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+        document.documentElement.dataset.theme = theme;
+      })();
+    </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Manrope:wght@600;700;800&amp;display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <script src="app.js" defer></script>
+  </head>
+  <body>
+    <main class="shell">
+      <header class="hero">
+        <div class="hero-tools">
+          <button class="theme-toggle" id="theme-toggle" type="button" aria-label="Switch color theme">
+            <svg class="sun-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <circle cx="12" cy="12" r="3.5"></circle>
+              <path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"></path>
+            </svg>
+            <svg class="moon-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M20.2 15.1A8.5 8.5 0 0 1 8.9 3.8a8.5 8.5 0 1 0 11.3 11.3Z"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="hero-copy">
+          <h1><span class="heading-flag" role="img" aria-label="Armenian flag">🇦🇲</span> ArmBench-ASR: Armenian Speech Recognition in the Real World</h1>
+          <p class="lede">
+            <span class="version-badge">v0.1</span>
+            A clear, comparable view of Armenian ASR performance across public and
+            private evaluation sets.
+          </p>
+        </div>
+        <div class="hero-art" aria-hidden="true">
+          <span></span><span></span><span></span><span></span><span></span>
+          <span></span><span></span><span></span><span></span>
+        </div>
+      </header>
+
+      <nav class="tabs" role="tablist" aria-label="Benchmark sections">
+        <button class="tab is-active" role="tab" aria-selected="true" data-tab="leaderboards">
+          Leaderboards
+        </button>
+        <button class="tab" role="tab" aria-selected="false" data-tab="datasets">Datasets</button>
+        <button class="tab" role="tab" aria-selected="false" data-tab="about">About</button>
+      </nav>
+
+      <section class="panel is-active matrix-view" id="leaderboards" role="tabpanel">
+        <div class="view-switch" role="group" aria-label="Leaderboard view">
+          <button class="view-button" type="button" data-view="single" aria-pressed="false">Single dataset</button>
+          <button class="view-button is-active" type="button" data-view="matrix" aria-pressed="true">All datasets</button>
+        </div>
+
+        <div class="filter-card">
+          <fieldset class="field dataset-field">
+            <legend>Dataset</legend>
+            <div class="choice-options" id="dataset-options"></div>
+          </fieldset>
+
+          <fieldset class="field matrix-metric-field">
+            <legend>Metric across all datasets</legend>
+            <div class="choice-options" id="matrix-metric-options"></div>
+          </fieldset>
+        </div>
+
+        <div class="table-heading">
+          <div>
+            <h2 id="table-title">Overall leaderboard</h2>
+            <p id="table-description">Rank is based on WER. Scores are percentages; lower is better.</p>
+          </div>
+          <div class="table-tools">
+            <button class="color-toggle" id="color-toggle" type="button" aria-pressed="false">
+              <span class="color-swatch good"></span><span class="color-swatch mid"></span><span class="color-swatch bad"></span>
+              Colors
+            </button>
+            <span class="result-count" id="result-count" aria-live="polite"></span>
+          </div>
+        </div>
+
+        <div class="table-card">
+          <div class="table-scroll">
+            <table id="leaderboard-table">
+              <thead></thead>
+              <tbody></tbody>
+            </table>
+          </div>
+          <div class="empty-state" id="empty-state" hidden>
+            <h3>No matching models</h3>
+            <p>Select Open or Closed in the Availability column to show models.</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="panel" id="datasets" role="tabpanel" hidden>
+        <div class="section-intro">
+          <h2>Five datasets, one Armenian benchmark</h2>
+          <p>10,113 clips and 20.7 hours of speech spanning read, literary, cinematic, and conversational Armenian. Every model is evaluated on the same fixed test material.</p>
+        </div>
+        <div class="dataset-grid">
+          <article class="dataset-card accent">
+            <div class="dataset-card-top"><span>01</span><span class="dataset-tag">Aggregate</span></div>
+            <h3>Combined</h3>
+            <p>A pooled view across all five sources, balancing large public test sets with smaller domain-focused evaluation data.</p>
+            <dl class="dataset-meta"><div><dt>Samples</dt><dd>10,113</dd></div><div><dt>Audio</dt><dd>20.7 h</dd></div><div><dt>Sources</dt><dd>5 datasets</dd></div></dl>
+          </article>
+          <article class="dataset-card">
+            <div class="dataset-card-top"><span>02</span><span class="dataset-tag public">Public</span></div>
+            <h3><a class="dataset-source" href="https://mozilladatacollective.com/datasets/cmqinsp2y00xsnr07ra8gxfoi" target="_blank" rel="noreferrer">Common Voice 26 <span>↗</span></a></h3>
+            <p>Mozilla Common Voice Scripted Speech 26.0 for Armenian, using the full <code>hy-AM</code> test split released in June 2026.</p>
+            <dl class="dataset-meta"><div><dt>Samples</dt><dd>6,892</dd></div><div><dt>Audio</dt><dd>10.8 h</dd></div><div><dt>Style</dt><dd>Read speech</dd></div></dl>
+          </article>
+          <article class="dataset-card">
+            <div class="dataset-card-top"><span>03</span><span class="dataset-tag public">Public</span></div>
+            <h3><a class="dataset-source" href="https://huggingface.co/datasets/google/fleurs" target="_blank" rel="noreferrer">FLEURS <span>↗</span></a></h3>
+            <p>Google FLEURS Armenian (<code>hy_am</code>) test split. Raw transcriptions retain punctuation and capitalization for strict scoring, with some <a href="https://huggingface.co/datasets/Metric-AI/fleurs-corrections" target="_blank" rel="noreferrer">manual corrections</a> applied.</p>
+            <dl class="dataset-meta"><div><dt>Samples</dt><dd>932</dd></div><div><dt>Audio</dt><dd>3.0 h</dd></div><div><dt>Style</dt><dd>Read speech</dd></div></dl>
+          </article>
+          <article class="dataset-card">
+            <div class="dataset-card-top"><span>04</span><span class="dataset-tag private">Private</span></div>
+            <h3>Poems</h3>
+            <p>Read Armenian poetry with background music, literary vocabulary, expressive phrasing, and text structures underrepresented in general ASR sets.</p>
+            <dl class="dataset-meta"><div><dt>Samples</dt><dd>969</dd></div><div><dt>Audio</dt><dd>3.3 h</dd></div><div><dt>Style</dt><dd>Literary</dd></div></dl>
+          </article>
+          <article class="dataset-card">
+            <div class="dataset-card-top"><span>05</span><span class="dataset-tag private">Private</span></div>
+            <h3>Movies</h3>
+            <p>Armenian movie dialogue with conversational delivery, produced-media acoustics, and occasional background noise.</p>
+            <dl class="dataset-meta"><div><dt>Samples</dt><dd>820</dd></div><div><dt>Audio</dt><dd>1.7 h</dd></div><div><dt>Style</dt><dd>Dialogue</dd></div></dl>
+          </article>
+          <article class="dataset-card">
+            <div class="dataset-card-top"><span>06</span><span class="dataset-tag private">Private</span></div>
+            <h3>Infocom</h3>
+            <p>A compact Armenian news dataset recited by a speaker, designed to evaluate clear narrated speech beyond standard public test sets.</p>
+            <dl class="dataset-meta"><div><dt>Samples</dt><dd>500</dd></div><div><dt>Audio</dt><dd>1.9 h</dd></div><div><dt>Style</dt><dd>Narrated news</dd></div></dl>
+          </article>
+        </div>
+      </section>
+
+      <section class="panel" id="about" role="tabpanel" hidden>
+        <div class="about-grid">
+          <div class="section-intro">
+            <h2>Reading the benchmark</h2>
+            <p>
+              Armenian ASR Benchmark compares automatic speech recognition systems on a varied
+              Armenian evaluation suite. Every score is an error rate, so lower values are better.
+            </p>
+            <p>
+              The benchmark aims to bring clarity to the Armenian ASR landscape, make model comparisons easier, and help model creators identify strengths, gaps, and opportunities for meaningful improvement.
+            </p>
+          </div>
+          <div class="definition-list">
+            <article><strong>WER</strong><span>Word error rate after strict, punctuation-preserving preprocessing.</span></article>
+            <article><strong>CER</strong><span>Character error rate after strict, punctuation-preserving preprocessing.</span></article>
+            <article><strong>WER-norm</strong><span>Word error rate after text normalization.</span></article>
+            <article><strong>CER-norm</strong><span>Character error rate after text normalization.</span></article>
+          </div>
+        </div>
+        <div class="note">
+          <strong>Availability</strong>
+          <p><b>Open</b> means model weights are publicly available. <b>Closed</b> means access is provided through a hosted product or API.</p>
+        </div>
+        <div class="note">
+          <strong>API settings</strong>
+          <p>Hosted systems use fixed model identifiers and transcription-only prompts. Evaluated Gemini runs use temperature 0, a 1,000-token output cap, and audio limited to 40 seconds. Thinking is disabled or set to the lowest applicable level: budget 0 for Gemini 2.5 Flash, budget 128 for Gemini 2.5 Pro, and <b>MINIMAL</b> for Gemini 3.1 Flash Lite, 3.5 Flash Lite, and 3.6 Flash.</p>
+        </div>
+
+        <section class="method-section">
+          <div class="section-intro compact">
+            <h2>Cleaning without hiding mistakes</h2>
+            <p>Original references and predictions remain auditable. The benchmark derives strict and normalized text from both sides with the same deterministic pipeline, so normalization never changes only one side of a comparison.</p>
+          </div>
+          <div class="pipeline-grid">
+            <article class="pipeline-card">
+              <span>01</span><h3>Source fidelity</h3>
+              <p>Predictions are kept verbatim. FLEURS uses raw transcriptions when available, preserving case and punctuation for strict evaluation.</p>
+            </article>
+            <article class="pipeline-card">
+              <span>02</span><h3>Strict preprocessing</h3>
+              <p>Unicode NFKC, Armenian punctuation, quotes, apostrophes, hyphens, grouped numbers, spacing, trailing segment punctuation, capitalization, and whitespace are made consistent.</p>
+            </article>
+            <article class="pipeline-card">
+              <span>03</span><h3>Normalized scoring</h3>
+              <p>Text is lowercased; standalone Armenian “Եվ” and hyphenated suffixes are canonicalized; dashes become spaces; Armenian, English, Russian letters and digits are retained. Other punctuation is removed, except separators in recognized <code>HH:MM</code> clock times, which are preserved in Armenian form (<code>12։00</code>).</p>
+            </article>
+          </div>
+          <p class="method-footnote">Both views are published: <b>WER / CER</b> reflect the stricter cleaned transcription, while <b>WER-norm / CER-norm</b> reduce formatting and orthographic noise.</p>
+        </section>
+
+        <section class="lab-card">
+          <div>
+            <h2>Metric AI Lab</h2>
+            <p>Armenian ASR Benchmark is a Metric AI Lab project. The applied AI research lab builds production systems across custom language and vision-language models, multilingual voice agents, Physical AI, retrieval, and analytics—while publishing frontier research and open benchmarks.</p>
+          </div>
+          <a href="https://metricailab.com" target="_blank" rel="noreferrer">Visit Metric AI Lab <span>↗</span></a>
+        </section>
+      </section>
+
+      <footer>
+        <span>Armenian ASR Benchmark · v0.1</span>
+        <span>A Metric AI Lab project · Built for transparent Armenian speech recognition evaluation.</span>
+      </footer>
+    </main>
+  </body>
+</html>

results.csv

@@ -0,0 +1,30 @@
+model,model_url,availability,standard,,,,,,,,,,,,,,,,,,,,,,,
+,,,combined,,,,mcv26,,,,fleurs,,,,poems,,,,movies,,,,infocom_may_26,,,
+,,,WER,CER,WER-norm,CER-norm,WER,CER,WER-norm,CER-norm,WER,CER,WER-norm,CER-norm,WER,CER,WER-norm,CER-norm,WER,CER,WER-norm,CER-norm,WER,CER,WER-norm,CER-norm
+google/gemini-2.5-pro,https://ai.google.dev/gemini-api/docs/models/gemini-2.5-pro,Closed,14.307,4.0955,6.4197,2.4423,9.6864,2.5433,6.3459,1.9419,8.5084,2.0004,2.9433,1.1523,24.7593,5.3359,3.9983,1.2723,38.9844,16.3223,18.8966,10.1838,11.91,3.9989,4.5688,2.7964
+hispeech/model-23012026,https://www.hispeech.ai/api.html,Closed,16.8129,4.2261,7.4986,2.2817,11.0856,2.4903,7.3486,1.761,13.7435,3.3926,5.87,1.8887,22.7285,5.4921,4.6175,1.5223,41.6997,16.3958,19.4237,9.6334,14.7849,3.3687,4.7462,1.5464
+google/gemini-2.5-flash,https://ai.google.dev/gemini-api/docs/models/gemini-2.5-flash,Closed,17.5469,4.6513,8.6718,2.8069,12.319,2.98,8.5497,2.3472,10.598,2.4786,3.9687,1.4569,28.1633,6.2153,5.6564,1.5213,46.0284,18.7923,27.1194,12.545,14.0014,3.7409,4.7969,2.2266
+talk2edit,https://talk2edit.com,Closed,17.8337,4.2155,8.0151,2.3704,12.3693,2.6625,8.5198,2.0073,10.5202,2.3319,4.1683,1.3561,25.0855,5.5935,5.7719,1.5641,46.0725,17.6354,20.9259,10.8242,15.7326,3.1442,4.0999,1.3002
+elevenlabs/scribe_v2,https://elevenlabs.io/docs/overview/capabilities/speech-to-text,Closed,17.9525,4.3362,8.7695,2.5805,12.0917,2.4134,7.5713,1.7013,10.0811,2.3679,4.135,1.4697,26.0273,5.8995,8.0753,2.0474,49.9515,19.3585,28.5865,13.1939,14.1467,3.574,4.6702,2.0372
+hispeech/model-01052025,https://www.hispeech.ai/api.html,Closed,17.9822,4.48,8.6709,2.6206,10.2156,2.205,6.8155,1.6571,15.5719,3.7499,8.1204,2.4814,22.9179,5.5556,4.8484,1.6561,49.8545,19.2636,26.7504,12.4295,18.2915,4.0996,7.1605,2.0652
+google/gemini-3.6-flash,https://ai.google.dev/gemini-api/docs/models/gemini-3.6-flash,Closed,19.6098,5.2995,10.1194,3.5158,16.1478,4.0149,10.1325,3.0682,11.7095,2.8982,5.2104,1.9015,25.8694,6.329,8.0753,2.5018,46.8218,18.8627,27.4971,13.34,13.3127,4.1459,5.6207,2.9026
+wavam/default,https://wav.am,Closed,20.1028,4.9044,9.3242,2.7368,12.6209,2.9858,9.3149,2.3614,13.4156,3.3471,6.3855,2.1722,30.7834,7.3266,7.5716,2.3587,53.5044,18.3362,22.9377,9.5349,16.3139,3.7337,5.0124,1.6387
+google/gemini-3.1-flash-lite,https://ai.google.dev/gemini-api/docs/models/gemini-3.1-flash-lite,Closed,20.4652,6.2546,12.4615,4.6047,16.4105,4.615,12.9892,4.0185,11.0926,2.7537,5.1217,1.8097,26.4008,7.0928,9.702,3.5157,55.0295,26.8234,36.2734,20.9757,13.3253,3.9878,5.2215,2.6358
+tbb-asr,https://asr.tbb.rip,Closed,20.5739,5.5345,10.7268,3.4857,8.1509,1.7125,5.5219,1.29,17.0223,5.0072,8.9241,3.7525,31.2727,7.51,11.5909,3.0966,61.8708,26.5403,37.2925,18.55,24.2876,5.9792,10.2085,3.5103
+wavam/streaming,https://wav.am,Closed,21.1144,5.1478,10.3147,2.9628,13.4723,3.1688,10.1979,2.5488,15.3662,3.6728,8.3865,2.4912,31.3832,7.2507,8.3692,2.2788,54.2537,19.2146,22.7357,10.2246,17.4828,4.0445,6.3051,1.9367
+openai/gpt-transcribe,https://developers.openai.com/api/docs/models/gpt-transcribe,Closed,22.5595,5.9631,14.1197,4.2576,17.2917,4.1186,13.8105,3.5182,15.9275,3.9751,8.7966,2.8454,30.131,7.241,13.6531,3.5603,52.1114,23.0863,34.6042,17.7397,17.6913,4.126,7.0401,2.3361
+nvidia/stt_hy_fastconformer_hybrid_large_pc,https://huggingface.co/nvidia/stt_hy_fastconformer_hybrid_large_pc,Open,24.9471,7.2708,14.9855,5.1482,7.6985,1.5642,5.229,1.1576,16.3721,4.9419,8.7246,3.7623,31.32,7.5453,11.6854,3.1524,60.9451,26.3582,37.5911,18.7198,24.5024,5.9968,10.4049,3.5285
+google/gemini-3.5-flash-lite,https://ai.google.dev/gemini-api/docs/models/gemini-3.5-flash-lite,Closed,26.2101,8.3246,17.6418,6.5826,23.6786,7.7033,19.5952,6.944,14.8049,4.1232,8.7357,3.1433,33.7402,9.2069,15.521,5.1867,56.1668,25.1706,38.9265,20.1264,17.249,5.3594,8.4152,3.8216
+chillarmo/whisper-large-v3-turbo-armenian,https://huggingface.co/chillarmo/whisper-large-v3-turbo-armenian,Open,33.1251,13.6194,23.3776,11.3725,12.9432,2.5861,9.6292,2.0609,25.0361,9.393,16.0302,7.8195,55.1113,26.9981,35.6858,22.704,82.0947,39.4393,59.5362,30.5854,49.2639,29.0766,37.3994,26.762
+arampacha/whisper-large-hy-2,https://huggingface.co/arampacha/whisper-large-hy-2,Open,33.283,8.1694,22.433,5.6564,23.1886,4.7625,19.6082,4.1286,17.856,3.7587,10.9916,2.6153,44.4363,11.0406,25.5326,6.4506,77.669,32.3799,55.9431,23.5714,39.8496,8.9892,17.1662,4.6599
+facebook/omniASR-LLM-3B,https://huggingface.co/facebook/omniASR-LLM-3B,Open,39.2308,10.9837,16.8896,6.6404,27.3266,4.8987,9.4384,2.298,26.9201,5.4025,6.5351,2.2249,56.5558,16.7054,26.3796,9.3765,89.4516,57.1848,63.3258,48.3842,36.3303,7.5905,8.7384,2.9628
+facebook/omniASR-LLM-1B,https://huggingface.co/facebook/omniASR-LLM-1B,Open,39.6051,10.7221,16.9431,6.32,28.0104,5.1484,10.168,2.5503,27.4203,5.4759,7.1393,2.3076,55.7526,15.2889,25.341,7.82,89.8539,54.4434,59.6566,44.753,36.9179,7.6296,9.898,3.0229
+facebook/omniASR-CTC-3B,https://huggingface.co/facebook/omniASR-CTC-3B,Open,41.1224,11.8272,21.4443,7.727,30.4883,5.3088,13.5823,2.688,28.9152,5.5969,9.2789,2.4137,58.2351,14.6111,30.2455,7.018,86.9501,68.524,77.1309,64.3544,37.2275,7.6903,10.8612,3.0929
+cast/whisper-large-v3-mwa-hy,https://huggingface.co/Center-of-Advanced-Software-Technologies/whisper-large-v3-mwa-hy,Open,41.6865,10.1111,22.5511,6.1765,29.5828,5.3063,12.1997,2.6544,31.9996,7.411,13.2531,4.358,52.8174,14.2677,30.2603,8.748,75.227,31.1618,50.4261,21.9763,56.3404,14.1713,38.8252,9.9003
+facebook/omniASR-CTC-1B,https://huggingface.co/facebook/omniASR-CTC-1B,Open,41.9099,10.4939,21.4817,6.3275,33.8327,6.0835,17.5728,3.4618,31.1659,6.0664,12.3275,2.9041,54.0054,12.1948,22.3615,4.3528,80.0577,48.8093,63.3694,42.6041,39.3062,8.1153,13.6683,3.5268
+facebook/omniASR-LLM-300M,https://huggingface.co/facebook/omniASR-LLM-300M,Open,42.4713,11.4939,21.025,7.0071,30.7231,5.6727,13.4008,3.0543,29.7377,6.1456,10.0327,3.0011,59.951,16.1485,32.1653,8.7,92.9765,57.3088,65.5308,46.5174,39.1293,8.1457,13.5986,3.61
+facebook/mms-1b-all,https://huggingface.co/facebook/mms-1b-all,Open,48.6009,10.7795,30.4742,6.5337,43.0794,7.7882,29.2,5.2074,34.606,6.3033,16.5623,3.1892,59.6641,14.0066,30.9222,6.2569,83.5855,37.9021,69.7761,29.0887,44.8537,8.4724,21.9061,3.9048
+google/gemma-4-e4b-it,https://huggingface.co/google/gemma-4-e4b-it,Open,50.6746,18.9239,41.7823,16.2226,48.4173,17.8457,43.1284,16.1956,37.3402,12.8714,30.2644,11.3516,58.3259,20.7961,42.1031,15.6847,79.7761,42.2581,66.2479,35.4199,44.3925,15.2009,32.3554,12.8153
+facebook/omniASR-CTC-300M,https://huggingface.co/facebook/omniASR-CTC-300M,Open,51.743,12.7912,34.645,8.7434,44.9164,8.3903,30.996,5.8332,40.4468,7.9296,23.696,4.8357,63.633,15.2827,37.8934,7.7029,86.8801,51.8881,75.4837,46.1984,47.9497,9.7258,25.9046,5.2149
+google/gemma-4-e2b-it,https://huggingface.co/google/gemma-4-e2b-it,Open,53.5029,20.7604,44.578,17.6968,50.4164,18.8588,45.5343,17.4727,42.9199,18.2358,34.4715,13.5592,59.9042,22.157,44.7634,17.1837,80.2081,40.8992,67.8116,35.16,49.2134,18.0144,35.9103,14.9587
+openai/whisper-large-v3,https://huggingface.co/openai/whisper-large-v3,Open,65.131,20.8108,58.645,19.0484,61.7163,17.1442,59.0287,16.5047,51.9618,14.6363,45.4687,13.1643,71.0738,28.6474,58.7732,25.5887,105.8362,52.0858,95.3176,48.8992,55.3737,16.2242,45.8019,13.6535

style.css

@@ -0,0 +1,339 @@
+:root {
+  --ink: #19212d;
+  --muted: #697587;
+  --line: #e7e8eb;
+  --surface: #ffffff;
+  --soft: #f7f7f6;
+  --accent: #356fbe;
+  --accent-dark: #24508e;
+  --accent-soft: #edf4ff;
+  --blue-soft: #edf3ff;
+  --green: #21855b;
+  --shadow: 0 18px 50px rgba(33, 39, 49, 0.08);
+  color-scheme: light;
+}
+
+html[data-theme="dark"] {
+  --ink: #eef1f6;
+  --muted: #9da8b8;
+  --line: #303744;
+  --surface: #171c24;
+  --soft: #202630;
+  --accent: #78aaf0;
+  --accent-dark: #a8caff;
+  --accent-soft: #1d2d43;
+  --blue-soft: #202a3b;
+  --green: #62c997;
+  --shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
+  color-scheme: dark;
+}
+
+* { box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  margin: 0;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 8% 0%, rgba(53, 111, 190, 0.09), transparent 25rem),
+    #fbfbfa;
+  font-family: "DM Sans", system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+button, input, select { font: inherit; }
+button, select, label { -webkit-tap-highlight-color: transparent; }
+
+.shell { width: min(1460px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 24px; }
+
+.hero {
+  position: relative;
+  min-height: 190px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30px 52px;
+  border: 1px solid rgba(53, 111, 190, 0.16);
+  border-radius: 28px;
+  background: linear-gradient(118deg, #fff 18%, #f7faff 62%, #edf4ff 100%);
+  box-shadow: var(--shadow);
+}
+
+.hero::before {
+  content: "";
+  position: absolute;
+  width: 240px;
+  height: 240px;
+  right: 12%;
+  top: -58%;
+  border: 1px solid rgba(53, 111, 190, 0.15);
+  border-radius: 50%;
+}
+
+.hero-tools { position: absolute; z-index: 3; top: 20px; right: 22px; display: flex; align-items: center; gap: 9px; }
+.theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(25, 33, 45, 0.12); border-radius: 11px; color: #4e5b6e; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(8px); cursor: pointer; transition: 150ms ease; }
+.theme-toggle:hover { border-color: rgba(53, 111, 190, 0.4); color: var(--accent-dark); transform: translateY(-1px); }
+.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.moon-icon { display: none; }
+html[data-theme="dark"] .sun-icon { display: none; }
+html[data-theme="dark"] .moon-icon { display: block; }
+
+.hero-copy { position: relative; z-index: 1; max-width: 980px; }
+.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--accent-dark); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
+.eyebrow-mark { width: 18px; height: 3px; border-radius: 2px; background: var(--accent); }
+h1, h2, h3 { font-family: "Manrope", system-ui, sans-serif; }
+h1 { margin: 8px 0 10px; font-size: clamp(38px, 5vw, 60px); line-height: 0.98; letter-spacing: -0.055em; }
+.heading-flag { display: inline-block; margin-right: 0.08em; font-size: 0.9em; line-height: 1; letter-spacing: 0; transform: translateY(-0.02em); }
+.lede { max-width: 710px; margin: 0; color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.6; }
+.version-badge { display: inline-flex; align-items: center; margin-right: 7px; padding: 2px 7px; border: 1px solid rgba(53, 111, 190, 0.25); border-radius: 999px; color: var(--accent-dark); background: var(--accent-soft); font-size: 0.68em; font-weight: 800; letter-spacing: 0.04em; vertical-align: 0.12em; }
+
+.hero-art { z-index: 1; display: flex; align-items: center; gap: 7px; height: 92px; padding: 0 34px; }
+.hero-art span { display: block; width: 8px; border-radius: 10px; background: linear-gradient(180deg, var(--accent), #79a9eb); opacity: 0.82; }
+.hero-art span:nth-child(1), .hero-art span:nth-child(9) { height: 20%; }
+.hero-art span:nth-child(2), .hero-art span:nth-child(8) { height: 42%; }
+.hero-art span:nth-child(3), .hero-art span:nth-child(7) { height: 68%; }
+.hero-art span:nth-child(4), .hero-art span:nth-child(6) { height: 92%; }
+.hero-art span:nth-child(5) { height: 60%; }
+
+.tabs { display: flex; gap: 6px; margin: 20px 0; padding: 6px; width: fit-content; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.86); }
+.tab { padding: 10px 18px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 600; transition: 150ms ease; }
+.tab:hover { color: var(--ink); background: var(--soft); }
+.tab.is-active { color: #fff; background: var(--ink); box-shadow: 0 5px 15px rgba(25, 33, 45, 0.18); }
+
+.panel { animation: reveal 240ms ease; }
+@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
+
+.view-switch { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
+.view-button { padding: 9px 14px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; }
+.view-button:hover { color: var(--ink); background: var(--soft); }
+.view-button.is-active { color: #fff; background: #315f9d; box-shadow: 0 4px 12px rgba(36, 80, 142, 0.24); }
+
+.filter-card {
+  display: grid;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(255,255,255,0.92);
+}
+.filter-card { grid-template-columns: 1fr; }
+.dataset-field { grid-column: 1 / -1; }
+.matrix-view .dataset-field { display: none; }
+.matrix-metric-field { grid-column: 1 / -1; width: auto; }
+.field { min-width: 0; }
+.field > label, fieldset legend { display: block; margin-bottom: 8px; color: #4c5665; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
+fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
+.choice-pill input { position: absolute; opacity: 0; pointer-events: none; }
+.choice-options { display: flex; flex-wrap: wrap; gap: 8px; }
+.choice-pill { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #dadde2; border-radius: 10px; color: #586475; background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; transition: 150ms ease; }
+.choice-pill:hover { border-color: #b8c3d2; color: var(--ink); }
+.choice-pill:has(input:checked) { border-color: #4f83c9; color: #fff; background: #315f9d; box-shadow: 0 4px 12px rgba(36, 80, 142, 0.22); }
+.choice-pill.combined-choice:has(input:checked) { border-color: #142d4f; background: #0d2a4f; box-shadow: 0 4px 15px rgba(7, 25, 49, 0.42); }
+.color-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 10px; border: 1px solid #dadde2; border-radius: 8px; color: #586475; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
+.color-toggle:hover { border-color: #b8c3d2; color: var(--ink); }
+.color-toggle.is-active { border-color: rgba(53, 111, 190, 0.4); color: var(--accent-dark); background: var(--accent-soft); }
+.color-swatch { width: 6px; height: 13px; border-radius: 3px; opacity: 0.85; }
+.color-swatch.good { background: #22c55e; }
+.color-swatch.mid { margin-left: -4px; background: #eab308; }
+.color-swatch.bad { margin-left: -4px; background: #ef4444; }
+#matrix-metric-options .choice-pill { justify-content: center; width: 94px; padding-inline: 10px; }
+
+.table-heading { display: flex; justify-content: space-between; align-items: end; margin: 28px 2px 12px; }
+.table-heading h2 { margin: 0 0 3px; font-size: 21px; letter-spacing: -0.025em; }
+.table-heading p { margin: 0; color: var(--muted); font-size: 13px; }
+.table-tools { display: flex; align-items: center; gap: 8px; }
+.result-count { padding: 6px 10px; border-radius: 999px; color: var(--muted); background: #eeefef; font-size: 12px; font-weight: 700; }
+
+.table-card { overflow: hidden; min-height: 180px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 10px 32px rgba(35, 40, 48, 0.05); }
+.table-scroll { overflow-x: auto; }
+table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
+th, td { padding: 10px 16px; border-bottom: 1px solid #eceef0; text-align: right; white-space: nowrap; }
+th { position: sticky; top: 0; z-index: 2; color: #697483; background: #f7f7f6; font-size: 11px; letter-spacing: 0.055em; text-transform: uppercase; }
+th:first-child, td:first-child { position: sticky; left: 0; z-index: 2; width: 64px; min-width: 64px; text-align: center; background: #fff; }
+th:first-child { z-index: 4; background: #f7f7f6; }
+th:nth-child(2), td:nth-child(2) { position: sticky; left: 64px; z-index: 1; width: 100%; min-width: 480px; overflow: hidden; text-align: left; background: #fff; }
+th:nth-child(2) { z-index: 3; background: #f7f7f6; }
+th:nth-child(3), td:nth-child(3) { width: 156px; min-width: 156px; max-width: 156px; text-align: left; }
+th:nth-child(n+4), td:nth-child(n+4) { width: 110px; min-width: 110px; }
+.combined-score { border-right: 2px solid #c8ced7; border-left: 3px solid #aeb7c3; }
+tbody tr:last-child td { border-bottom: 0; }
+tbody tr:hover td { background: #fbfbfa; }
+tbody tr:hover td:first-child { background: #fbfbfa; }
+tbody tr:hover td:nth-child(2) { background: #fbfbfa; }
+.model-cell { display: flex; align-items: center; min-width: 0; }
+.model-name { min-width: 0; overflow: hidden; color: #26374e; font-weight: 700; text-overflow: ellipsis; }
+.model-link { display: inline-grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; margin-left: 6px; border-radius: 6px; color: #7d8999; text-decoration: none; }
+.model-link:hover { color: var(--accent-dark); background: var(--accent-soft); }
+.model-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.rank { color: #7a8492; font: 700 12px "Manrope", sans-serif; }
+.rank.rank-top { color: var(--accent-dark); }
+.availability-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
+.availability-badge.open { color: #167149; background: #eaf7f0; }
+.availability-badge.closed { color: #677180; background: #f0f1f3; }
+.availability-control { position: relative; display: inline-block; }
+.availability-label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border: 0; border-radius: 7px; color: inherit; background: transparent; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
+.availability-label:hover, .availability-label[aria-expanded="true"] { color: var(--ink); background: #eceef1; }
+.availability-label span { padding: 2px 5px; border-radius: 5px; color: var(--accent-dark); background: var(--accent-soft); font-size: 9px; }
+.availability-label b { color: #9aa3af; font-size: 12px; line-height: 1; transition: transform 150ms ease; }
+.availability-label[aria-expanded="true"] b { transform: rotate(180deg); }
+.availability-filters { position: absolute; z-index: 8; top: calc(100% + 7px); left: 0; display: flex; gap: 5px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 10px 28px rgba(25, 33, 45, 0.16); }
+.availability-filters[hidden] { display: none; }
+.availability-filter { min-width: 52px; height: 23px; padding: 0 7px; border: 1px solid #d8dce2; border-radius: 6px; color: #8993a1; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; }
+.availability-filter:hover { color: var(--ink); border-color: #b8c0cb; }
+.availability-filter.open.is-active { border-color: rgba(33, 133, 91, 0.3); color: #167149; background: #eaf7f0; }
+.availability-filter.closed.is-active { border-color: #cfd4db; color: #596575; background: #e9ebee; }
+.sort-button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; color: inherit; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
+.sort-button::after { content: "↕"; color: #a3a9b2; font-size: 12px; }
+.sort-button.is-asc::after { content: "↑"; color: var(--accent); }
+.sort-button.is-desc::after { content: "↓"; color: var(--accent); }
+.heat-cell.heat-score-1 { background: rgba(16, 185, 129, 0.38); }
+.heat-cell.heat-score-2 { background: rgba(132, 204, 22, 0.34); }
+.heat-cell.heat-score-3 { background: rgba(250, 204, 21, 0.38); }
+.heat-cell.heat-score-4 { background: rgba(249, 115, 22, 0.34); }
+.heat-cell.heat-score-5 { background: rgba(244, 63, 94, 0.36); }
+.empty-state { padding: 48px 20px; text-align: center; }
+.empty-state h3 { margin: 0 0 5px; }
+.empty-state p { margin: 0; color: var(--muted); }
+
+.section-intro { max-width: 760px; padding: 34px 4px 22px; }
+.section-intro h2 { margin: 9px 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.04em; }
+.section-intro > p:last-child { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
+.dataset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.dataset-card { display: flex; flex-direction: column; min-height: 310px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 9px 28px rgba(35, 40, 48, 0.04); }
+.dataset-card.accent { background: linear-gradient(135deg, #f5f9ff, #edf4ff); }
+.dataset-card-top { display: flex; align-items: center; justify-content: space-between; }
+.dataset-card-top > span:first-child { color: var(--accent); font: 700 12px "Manrope", sans-serif; }
+.dataset-tag { padding: 5px 8px; border-radius: 999px; color: #697483; background: #eeeff1; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
+.dataset-tag.public { color: #167149; background: #eaf7f0; }
+.dataset-tag.private { color: #7556a5; background: #f2ecfb; }
+.dataset-card h3 { margin: 24px 0 7px; font-size: 19px; }
+.dataset-source { color: var(--ink); text-decoration: none; }
+.dataset-source span { color: var(--accent); font-size: 14px; }
+.dataset-source:hover { color: var(--accent-dark); }
+.dataset-card p { margin: 0; color: var(--muted); line-height: 1.55; }
+.dataset-card code { padding: 1px 4px; border-radius: 4px; color: var(--ink); background: var(--soft); font-size: 0.86em; }
+.dataset-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: auto 0 0; padding-top: 22px; }
+.dataset-meta div { padding-top: 10px; border-top: 1px solid var(--line); }
+.dataset-meta dt { color: #949daa; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
+.dataset-meta dd { margin: 3px 0 0; color: var(--ink); font-size: 12px; font-weight: 700; }
+
+.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
+.definition-list { margin-top: 38px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
+.definition-list article { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 20px; border-bottom: 1px solid var(--line); }
+.definition-list article:last-child { border-bottom: 0; }
+.definition-list strong { color: var(--accent-dark); }
+.definition-list span { color: var(--muted); }
+.note { display: grid; grid-template-columns: 150px 1fr; gap: 20px; margin-top: 18px; padding: 22px; border-radius: 16px; background: var(--blue-soft); }
+.note p { margin: 0; color: #57677e; }
+.method-section { margin-top: 44px; }
+.section-intro.compact { padding-top: 0; }
+.pipeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.pipeline-card { min-height: 220px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
+.pipeline-card > span { color: var(--accent); font: 700 11px "Manrope", sans-serif; }
+.pipeline-card h3 { margin: 28px 0 8px; font-size: 18px; }
+.pipeline-card p { margin: 0; color: var(--muted); line-height: 1.6; }
+.method-footnote { margin: 14px 0 0; padding: 18px 20px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; color: var(--muted); background: var(--soft); line-height: 1.6; }
+.method-footnote b { color: var(--ink); }
+.lab-card { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 44px; padding: 34px; overflow: hidden; border: 1px solid rgba(53, 111, 190, 0.19); border-radius: 22px; background: linear-gradient(125deg, #f5f9ff, #edf4ff); }
+.lab-card h2 { margin: 8px 0 10px; font-size: 30px; letter-spacing: -0.035em; }
+.lab-card p:last-child { max-width: 800px; margin: 0; color: var(--muted); line-height: 1.65; }
+.lab-card a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 11px; color: #fff; background: var(--ink); text-decoration: none; white-space: nowrap; font-weight: 700; }
+.lab-card a:hover { background: var(--accent-dark); }
+
+footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding: 20px 4px 0; border-top: 1px solid var(--line); color: #8a93a0; font-size: 12px; }
+footer span:first-child { color: #596474; font-weight: 700; }
+
+html[data-theme="dark"] body {
+  background:
+    radial-gradient(circle at 8% 0%, rgba(120, 170, 240, 0.1), transparent 25rem),
+    #11151b;
+}
+html[data-theme="dark"] .hero {
+  border-color: rgba(120, 170, 240, 0.18);
+  background: linear-gradient(118deg, #1c222c 18%, #1d2430 62%, #19283d 100%);
+}
+html[data-theme="dark"] .hero::before { border-color: rgba(120, 170, 240, 0.18); }
+html[data-theme="dark"] .theme-toggle { border-color: #3b4350; color: #cbd3df; background: rgba(23, 28, 36, 0.74); }
+html[data-theme="dark"] .tabs,
+html[data-theme="dark"] .filter-card { background: rgba(23, 28, 36, 0.92); }
+html[data-theme="dark"] .tab.is-active { color: #171c24; background: #eef1f6; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28); }
+html[data-theme="dark"] .field > label,
+html[data-theme="dark"] fieldset legend { color: #aab4c2; }
+html[data-theme="dark"] .choice-pill,
+html[data-theme="dark"] .color-toggle { border-color: #465064; color: #d9e1ed; background: #202630; }
+html[data-theme="dark"] .choice-pill:hover { border-color: #65738a; color: #fff; background: #27303d; }
+html[data-theme="dark"] .choice-pill:has(input:checked) { border-color: #4f83c9; color: #fff; background: #315f9d; box-shadow: 0 4px 14px rgba(8, 28, 56, 0.38); }
+html[data-theme="dark"] .choice-pill.combined-choice:has(input:checked) { border-color: #2b527f; background: #091f3b; box-shadow: 0 4px 16px rgba(0, 8, 20, 0.64); }
+html[data-theme="dark"] .color-toggle.is-active { border-color: rgba(120, 170, 240, 0.42); color: #a8caff; background: #1d2d43; }
+html[data-theme="dark"] .table-card,
+html[data-theme="dark"] .dataset-card,
+html[data-theme="dark"] .definition-list { background: var(--surface); }
+html[data-theme="dark"] .dataset-card.accent { background: linear-gradient(135deg, #1d2939, #1b304b); }
+html[data-theme="dark"] .dataset-tag { color: #b5bfcb; background: #292f38; }
+html[data-theme="dark"] .dataset-tag.public { color: #7ed6aa; background: #17362b; }
+html[data-theme="dark"] .dataset-tag.private { color: #c5a9ee; background: #302641; }
+html[data-theme="dark"] .lab-card { background: linear-gradient(125deg, #1d2939, #1b304b); }
+html[data-theme="dark"] .lab-card a { color: #171c24; background: #eef1f6; }
+html[data-theme="dark"] .lab-card a:hover { color: #fff; background: var(--accent); }
+html[data-theme="dark"] th { color: #a4afbd; background: #202630; }
+html[data-theme="dark"] th:first-child,
+html[data-theme="dark"] th:nth-child(2) { background: #202630; }
+html[data-theme="dark"] td:first-child,
+html[data-theme="dark"] td:nth-child(2) { background: var(--surface); }
+html[data-theme="dark"] th,
+html[data-theme="dark"] td { border-bottom-color: #2a313c; }
+html[data-theme="dark"] .combined-score { border-right-color: #4b5667; border-left-color: #657185; }
+html[data-theme="dark"] tbody tr:hover td,
+html[data-theme="dark"] tbody tr:hover td:first-child,
+html[data-theme="dark"] tbody tr:hover td:nth-child(2) { background: #1c222b; }
+html[data-theme="dark"] .heat-cell.heat-score-1 { background: rgba(16, 185, 129, 0.42); }
+html[data-theme="dark"] .heat-cell.heat-score-2 { background: rgba(132, 204, 22, 0.38); }
+html[data-theme="dark"] .heat-cell.heat-score-3 { background: rgba(250, 204, 21, 0.38); }
+html[data-theme="dark"] .heat-cell.heat-score-4 { background: rgba(249, 115, 22, 0.38); }
+html[data-theme="dark"] .heat-cell.heat-score-5 { background: rgba(244, 63, 94, 0.42); }
+html[data-theme="dark"] .model-name { color: #dce5f2; }
+html[data-theme="dark"] .model-link { color: #91a0b3; }
+html[data-theme="dark"] .availability-badge.open { color: #7ed6aa; background: #17362b; }
+html[data-theme="dark"] .availability-badge.closed { color: #abb5c3; background: #292f38; }
+html[data-theme="dark"] .availability-filter { border-color: #414a58; color: #8995a6; }
+html[data-theme="dark"] .availability-filter.open.is-active { border-color: #285c48; color: #7ed6aa; background: #17362b; }
+html[data-theme="dark"] .availability-filter.closed.is-active { border-color: #454d59; color: #c0c8d3; background: #292f38; }
+html[data-theme="dark"] .availability-label:hover,
+html[data-theme="dark"] .availability-label[aria-expanded="true"] { background: #303744; }
+html[data-theme="dark"] .result-count { color: #aeb8c6; background: #252c35; }
+html[data-theme="dark"] .note { background: var(--blue-soft); }
+html[data-theme="dark"] .note p { color: #aab7ca; }
+html[data-theme="dark"] footer span:first-child { color: #b1bbc8; }
+
+@media (max-width: 900px) {
+  .hero { min-height: 180px; padding: 28px 36px; }
+  .hero-art { display: none; }
+  .filter-card { grid-template-columns: 1fr; }
+  .dataset-grid { grid-template-columns: repeat(2, 1fr); }
+  .pipeline-grid { grid-template-columns: 1fr; }
+  .pipeline-card { min-height: 0; }
+  .about-grid { grid-template-columns: 1fr; gap: 0; }
+  .definition-list { margin-top: 0; }
+}
+
+@media (max-width: 620px) {
+  .shell { width: min(100% - 24px, 1460px); padding-top: 12px; }
+  .hero { min-height: 168px; padding: 24px; border-radius: 20px; }
+  .hero-tools { top: 14px; right: 14px; }
+  .theme-toggle { width: 35px; height: 35px; }
+  .tabs { width: 100%; }
+  .tab { flex: 1; padding-inline: 9px; }
+  .filter-card { grid-template-columns: 1fr; padding: 16px; }
+  .choice-pill { flex: 1 1 auto; justify-content: center; }
+  th:nth-child(2), td:nth-child(2) { width: 260px; min-width: 260px; max-width: 260px; }
+  .table-heading { align-items: center; gap: 12px; }
+  .table-tools { flex-direction: column-reverse; align-items: end; gap: 5px; }
+  .dataset-grid { grid-template-columns: 1fr; }
+  .lab-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
+  .lab-card a { width: fit-content; }
+  .definition-list article { grid-template-columns: 1fr; gap: 5px; }
+  .note { grid-template-columns: 1fr; gap: 7px; }
+  footer { flex-direction: column; }
+}