Upload 5 files

README.md

@@ -1,12 +1,16 @@
 ---
-title: Leaderboard
-emoji: 🏆
-colorFrom: green
-colorTo: red
+title: StreamAV-Bench Leaderboard
+emoji: 📡
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
 license: mit
 short_description: Official StreamAV-Bench leaderboard.
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# StreamAV-Bench Leaderboard
+
+Official metric-wise leaderboard for **StreamAV-Bench: A Comprehensive Benchmark for Streaming Audio-Video Generation**.
+
+The page is a static Hugging Face Space. Published results and metric metadata are maintained in `data.json`. The primary explorer preserves the paper's 32 core metrics, while four adjusted sensitivity diagnostics are presented in a separate view.

app.js

@@ -0,0 +1,479 @@
+const state = {
+  data: null,
+  track: "shared",
+  category: "quality",
+  sortMetric: "va",
+  sortDirection: "desc",
+  query: "",
+  paradigm: "all",
+  access: "all"
+};
+
+const elements = {
+  trackTabs: document.querySelector("#track-tabs"),
+  trackDescription: document.querySelector("#track-description"),
+  categoryTabs: document.querySelector("#category-tabs"),
+  categoryTitle: document.querySelector("#category-title"),
+  categoryDescription: document.querySelector("#category-description"),
+  tablePanel: document.querySelector(".table-panel"),
+  tableKicker: document.querySelector("#table-kicker"),
+  rankingLabel: document.querySelector("#ranking-label"),
+  table: document.querySelector("#leaderboard-table"),
+  tableStatus: document.querySelector("#table-status"),
+  contextCopy: document.querySelector("#context-copy"),
+  search: document.querySelector("#model-search"),
+  metricSelect: document.querySelector("#metric-select"),
+  paradigm: document.querySelector("#paradigm-filter"),
+  access: document.querySelector("#access-filter"),
+  reset: document.querySelector("#reset-filters"),
+  download: document.querySelector("#download-csv"),
+  metricGuide: document.querySelector("#metric-guide"),
+  error: document.querySelector("#data-error")
+};
+
+const directionFor = (metric) => metric.direction === "higher" ? "desc" : "asc";
+
+const escapeHtml = (value) => String(value)
+  .replaceAll("&", "&")
+  .replaceAll("<", "&lt;")
+  .replaceAll(">", "&gt;")
+  .replaceAll('"', "&quot;")
+  .replaceAll("'", "&#039;");
+
+function formatScore(value) {
+  if (value === null || value === undefined) return "—";
+  return Number(value).toFixed(state.data.meta.publishedPrecision);
+}
+
+function currentCategory() {
+  return state.data.categories.find((category) => category.id === state.category);
+}
+
+function currentMetric() {
+  return state.data.metrics[state.sortMetric];
+}
+
+function applyLink(id, url, readyLabel, pendingLabel) {
+  const link = document.querySelector(`#${id}`);
+  if (!link) return;
+
+  if (url) {
+    link.href = url;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.classList.remove("is-disabled");
+    link.removeAttribute("aria-disabled");
+    const status = link.querySelector("[data-link-status]");
+    if (status) status.textContent = readyLabel;
+  } else {
+    link.removeAttribute("href");
+    link.classList.add("is-disabled");
+    link.setAttribute("aria-disabled", "true");
+    const status = link.querySelector("[data-link-status]");
+    if (status) status.textContent = pendingLabel;
+  }
+}
+
+function renderMeta() {
+  const { meta } = state.data;
+  document.title = meta.title;
+  document.querySelector("#hero-tagline").textContent = meta.tagline;
+  document.querySelector("#hero-description").textContent = meta.description;
+  document.querySelector("#release-label").textContent = meta.release;
+  document.querySelector("#stat-systems").textContent = meta.systemCount;
+  document.querySelector("#stat-metrics").textContent = meta.metricCount;
+  document.querySelector("#stat-scenarios").textContent = meta.scenarioCount;
+  document.querySelector("#stat-duration").textContent = `${meta.durationSeconds}s`;
+
+  applyLink("project-link", meta.links.project, "Project page", "Coming soon");
+  applyLink("code-link", meta.links.code, "Code repository", "Coming soon");
+  applyLink("paper-link", meta.links.paper, "Read paper", "Paper coming soon");
+  applyLink("dataset-link", meta.links.dataset, "Open dataset", "Dataset coming soon");
+
+  const submitLink = document.querySelector("#submission-link");
+  if (meta.links.submission) {
+    submitLink.href = meta.links.submission;
+    submitLink.target = "_blank";
+    submitLink.rel = "noopener noreferrer";
+    submitLink.classList.remove("is-disabled");
+    submitLink.removeAttribute("aria-disabled");
+    submitLink.querySelector("span").textContent = "Open submission form";
+  } else {
+    submitLink.removeAttribute("href");
+    submitLink.classList.add("is-disabled");
+    submitLink.setAttribute("aria-disabled", "true");
+    submitLink.querySelector("span").textContent = "Submission form coming soon";
+  }
+}
+
+function renderTrackTabs() {
+  elements.trackTabs.innerHTML = state.data.tracks.map((track) => {
+    const active = track.id === state.track;
+    return `
+      <button
+        class="track-tab ${active ? "is-active" : ""}"
+        type="button"
+        role="tab"
+        aria-selected="${active}"
+        data-track="${escapeHtml(track.id)}"
+      >
+        <span>${escapeHtml(track.label)}</span>
+        <b>${escapeHtml(track.badge || track.count)}</b>
+      </button>
+    `;
+  }).join("");
+
+  const activeTrack = state.data.tracks.find((track) => track.id === state.track);
+  elements.trackDescription.textContent = activeTrack.description;
+
+  elements.trackTabs.querySelectorAll("[data-track]").forEach((button) => {
+    button.addEventListener("click", () => {
+      state.track = button.dataset.track;
+      const firstCategory = state.data.categories.find((category) => category.track === state.track);
+      state.category = firstCategory.id;
+      state.sortMetric = firstCategory.defaultMetric;
+      state.sortDirection = directionFor(state.data.metrics[state.sortMetric]);
+      render();
+    });
+  });
+}
+
+function renderCategoryTabs() {
+  const categories = state.data.categories.filter((category) => category.track === state.track);
+  elements.categoryTabs.innerHTML = categories.map((category) => {
+    const active = category.id === state.category;
+    return `
+      <button
+        class="category-tab ${active ? "is-active" : ""}"
+        type="button"
+        aria-pressed="${active}"
+        data-category="${escapeHtml(category.id)}"
+      >
+        ${escapeHtml(category.label)}
+      </button>
+    `;
+  }).join("");
+
+  elements.categoryTabs.querySelectorAll("[data-category]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const category = state.data.categories.find((item) => item.id === button.dataset.category);
+      state.category = category.id;
+      state.sortMetric = category.defaultMetric;
+      state.sortDirection = directionFor(state.data.metrics[state.sortMetric]);
+      render();
+    });
+  });
+}
+
+function renderMetricSelect() {
+  const category = currentCategory();
+  elements.metricSelect.innerHTML = category.metrics.map((metricKey) => {
+    const metric = state.data.metrics[metricKey];
+    const direction = metric.direction === "higher" ? "↑" : "↓";
+    return `<option value="${escapeHtml(metricKey)}">${escapeHtml(metric.abbr)} ${direction} · ${escapeHtml(metric.name)}</option>`;
+  }).join("");
+  elements.metricSelect.value = state.sortMetric;
+}
+
+function compareScores(a, b, metricKey, direction) {
+  const aValue = a.scores[metricKey];
+  const bValue = b.scores[metricKey];
+
+  if (aValue === null && bValue === null) return a.name.localeCompare(b.name);
+  if (aValue === null) return 1;
+  if (bValue === null) return -1;
+
+  const difference = direction === "desc" ? bValue - aValue : aValue - bValue;
+  return difference || a.name.localeCompare(b.name);
+}
+
+function buildRankMap(metricKey) {
+  const metric = state.data.metrics[metricKey];
+  const sortedValues = state.data.models
+    .map((model) => model.scores[metricKey])
+    .filter((value) => value !== null)
+    .sort((a, b) => metric.direction === "higher" ? b - a : a - b);
+
+  const ranks = new Map();
+  sortedValues.forEach((value, index) => {
+    if (!ranks.has(value)) ranks.set(value, index + 1);
+  });
+  return ranks;
+}
+
+function filteredModels() {
+  const query = state.query.trim().toLocaleLowerCase();
+  return state.data.models
+    .filter((model) => !query || model.name.toLocaleLowerCase().includes(query))
+    .filter((model) => state.paradigm === "all" || model.paradigm === state.paradigm)
+    .filter((model) => state.access === "all" || model.access === state.access)
+    .sort((a, b) => compareScores(a, b, state.sortMetric, state.sortDirection));
+}
+
+function renderTable() {
+  const category = currentCategory();
+  const metric = currentMetric();
+  const models = filteredModels();
+  const rankMap = buildRankMap(state.sortMetric);
+  const arrow = state.sortDirection === "desc" ? "↓" : "↑";
+  const preferredDirection = metric.direction === "higher" ? "Higher is better" : "Lower is better";
+  const isDiagnostics = state.track === "diagnostics";
+
+  elements.tablePanel.classList.toggle("is-diagnostics", isDiagnostics);
+  elements.tableKicker.textContent = isDiagnostics ? "Adjusted sensitivity analysis" : "Metric-wise ranking";
+  elements.categoryTitle.textContent = category.label;
+  elements.categoryDescription.textContent = category.description;
+  elements.rankingLabel.innerHTML = `
+    Ranked by <strong>${escapeHtml(metric.name)}</strong>
+    <span>${preferredDirection}</span>
+  `;
+  elements.contextCopy.innerHTML = isDiagnostics
+    ? `
+      <p><strong>Diagnostic status.</strong> These four adjusted diagnostics are reported separately from the 32 core metrics. They complement—rather than replace—PVRL, PARL, and HDF, and they are not combined into an overall score.</p>
+      <p>SA-PVRL and SA-PARL assign the 30-second cap to unachieved targets. CA-HDF-A and CA-HDF-L normalize conditional HDF to [0,1] and assign zero when the required source state was not established.</p>
+    `
+    : `
+      <p><strong>Reading the ranks.</strong> Click any metric header to rank by that metric. Published three-decimal ties use competition ranking (for example, 1, 1, 3). PVRL and PARL are conditional on successful target achievement and should be read with PVUAR and PAUAR.</p>
+      <p>HDF is evaluated only when its required source state was established. NBC, FPS, and TTFC are unavailable for PixVerse R1, HappyOyster, and Odyssey-2 because their web interfaces do not expose the required traces.</p>
+    `;
+
+  const metricHeaders = category.metrics.map((metricKey) => {
+    const item = state.data.metrics[metricKey];
+    const active = metricKey === state.sortMetric;
+    const ariaSort = active
+      ? (state.sortDirection === "desc" ? "descending" : "ascending")
+      : "none";
+    return `
+      <th scope="col" aria-sort="${ariaSort}" class="metric-column ${active ? "is-sorted" : ""}">
+        <button type="button" data-sort="${escapeHtml(metricKey)}" title="Sort by ${escapeHtml(item.name)}">
+          <span>${escapeHtml(item.abbr)}</span>
+          <i aria-hidden="true">${active ? arrow : "↕"}</i>
+          <small>${item.direction === "higher" ? "higher" : "lower"}</small>
+        </button>
+      </th>
+    `;
+  }).join("");
+
+  const rows = models.map((model) => {
+    const sortedValue = model.scores[state.sortMetric];
+    const rank = sortedValue === null ? null : rankMap.get(sortedValue);
+    const rankClass = rank !== null && rank <= 3 ? ` rank-${rank}` : "";
+    const cells = category.metrics.map((metricKey) => {
+      const value = model.scores[metricKey];
+      const metricRankMap = buildMetricRankMap(metricKey);
+      const cellRank = value === null ? null : metricRankMap.get(value);
+      const rankClass = cellRank === 1 ? "is-best" : cellRank === 2 ? "is-runner-up" : "";
+      const sortedClass = metricKey === state.sortMetric ? "is-sorted" : "";
+      const metricInfo = state.data.metrics[metricKey];
+      const unit = value !== null && metricInfo.unit ? ` ${metricInfo.unit}` : "";
+      const unavailableReason = value === null
+        ? "Unavailable because the official web interface does not expose model-native boundaries or reliable generation-time traces."
+        : "";
+      return `
+        <td
+          class="score-cell ${rankClass} ${sortedClass}"
+          data-label="${escapeHtml(metricInfo.abbr)}"
+          ${unavailableReason ? `title="${escapeHtml(unavailableReason)}"` : ""}
+        >
+          ${value === null
+            ? `<span aria-hidden="true">—</span><span class="sr-only">${escapeHtml(unavailableReason)}</span>`
+            : `<span>${formatScore(value)}</span>${unit ? `<small>${escapeHtml(unit.trim())}</small>` : ""}`
+          }
+        </td>
+      `;
+    }).join("");
+
+    return `
+      <tr>
+        <td class="rank-cell" data-label="Rank">
+          ${rank === null ? "—" : `<span class="rank-badge${rankClass}">${rank}</span>`}
+        </td>
+        <th scope="row" class="model-cell">
+          <a href="${escapeHtml(model.reference)}" target="_blank" rel="noopener noreferrer">
+            <span>${escapeHtml(model.name)}</span><i aria-hidden="true">↗</i>
+          </a>
+          <small>${model.paradigm === "Cascaded" ? "with HunyuanVideo-Foley" : "native audio-video"}</small>
+        </th>
+        <td class="meta-cell" data-label="Paradigm">
+          <span class="tag tag-${model.paradigm === "Native joint" ? "native" : "cascaded"}">${escapeHtml(model.paradigm)}</span>
+        </td>
+        <td class="meta-cell" data-label="Access">
+          <span class="access-dot access-${model.access.toLowerCase()}"></span>${escapeHtml(model.access)}
+        </td>
+        ${cells}
+      </tr>
+    `;
+  }).join("");
+
+  elements.table.innerHTML = `
+    <thead>
+      <tr>
+        <th scope="col" class="rank-heading">#</th>
+        <th scope="col" class="model-heading">System</th>
+        <th scope="col">Paradigm</th>
+        <th scope="col">Access</th>
+        ${metricHeaders}
+      </tr>
+    </thead>
+    <tbody>
+      ${rows || `
+        <tr>
+          <td class="empty-row" colspan="${4 + category.metrics.length}">
+            No systems match the current filters.
+          </td>
+        </tr>
+      `}
+    </tbody>
+  `;
+
+  elements.tableStatus.textContent = `${models.length} of ${state.data.models.length} systems · global ranks use published three-decimal scores`;
+
+  elements.table.querySelectorAll("[data-sort]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const metricKey = button.dataset.sort;
+      if (state.sortMetric === metricKey) {
+        state.sortDirection = state.sortDirection === "desc" ? "asc" : "desc";
+      } else {
+        state.sortMetric = metricKey;
+        state.sortDirection = directionFor(state.data.metrics[metricKey]);
+      }
+      elements.metricSelect.value = state.sortMetric;
+      renderTable();
+      renderMetricGuide();
+    });
+  });
+}
+
+function buildMetricRankMap(metricKey) {
+  const item = state.data.metrics[metricKey];
+  const values = state.data.models
+    .map((model) => model.scores[metricKey])
+    .filter((value) => value !== null)
+    .sort((a, b) => item.direction === "higher" ? b - a : a - b);
+  return new Map([...new Set(values)].map((value, index) => [value, index + 1]));
+}
+
+function renderMetricGuide() {
+  const category = currentCategory();
+  elements.metricGuide.innerHTML = category.metrics.map((metricKey) => {
+    const metric = state.data.metrics[metricKey];
+    const active = metricKey === state.sortMetric;
+    return `
+      <article class="metric-card ${active ? "is-active" : ""}">
+        <button type="button" data-metric-card="${escapeHtml(metricKey)}" aria-label="Rank by ${escapeHtml(metric.name)}">
+          <span class="metric-abbr">${escapeHtml(metric.abbr)}</span>
+          <span class="direction direction-${metric.direction}">
+            ${metric.direction === "higher" ? "↑ Higher" : "↓ Lower"}
+          </span>
+        </button>
+        <h3>${escapeHtml(metric.name)}</h3>
+        <p>${escapeHtml(metric.description)}</p>
+        <dl>
+          <div><dt>Scale</dt><dd>${escapeHtml(metric.range)}${metric.unit ? ` · ${escapeHtml(metric.unit)}` : ""}</dd></div>
+          <div><dt>Evaluator</dt><dd>${escapeHtml(metric.evaluator)}</dd></div>
+        </dl>
+      </article>
+    `;
+  }).join("");
+
+  elements.metricGuide.querySelectorAll("[data-metric-card]").forEach((button) => {
+    button.addEventListener("click", () => {
+      state.sortMetric = button.dataset.metricCard;
+      state.sortDirection = directionFor(state.data.metrics[state.sortMetric]);
+      elements.metricSelect.value = state.sortMetric;
+      renderTable();
+      renderMetricGuide();
+      document.querySelector("#leaderboard").scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  });
+}
+
+function csvCell(value) {
+  const stringValue = value === null || value === undefined ? "" : String(value);
+  return `"${stringValue.replaceAll('"', '""')}"`;
+}
+
+function downloadCurrentView() {
+  const category = currentCategory();
+  const models = filteredModels();
+  const headers = ["System", "Paradigm", "Access", ...category.metrics.map((key) => state.data.metrics[key].abbr)];
+  const lines = [
+    headers.map(csvCell).join(","),
+    ...models.map((model) => [
+      model.name,
+      model.paradigm,
+      model.access,
+      ...category.metrics.map((key) => model.scores[key])
+    ].map(csvCell).join(","))
+  ];
+
+  const blob = new Blob([`\uFEFF${lines.join("\n")}`], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `streamav-bench-${category.id}.csv`;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
+
+function resetFilters() {
+  state.query = "";
+  state.paradigm = "all";
+  state.access = "all";
+  elements.search.value = "";
+  elements.paradigm.value = "all";
+  elements.access.value = "all";
+  renderTable();
+}
+
+function bindControls() {
+  elements.search.addEventListener("input", (event) => {
+    state.query = event.target.value;
+    renderTable();
+  });
+  elements.metricSelect.addEventListener("change", (event) => {
+    state.sortMetric = event.target.value;
+    state.sortDirection = directionFor(state.data.metrics[state.sortMetric]);
+    renderTable();
+    renderMetricGuide();
+  });
+  elements.paradigm.addEventListener("change", (event) => {
+    state.paradigm = event.target.value;
+    renderTable();
+  });
+  elements.access.addEventListener("change", (event) => {
+    state.access = event.target.value;
+    renderTable();
+  });
+  elements.reset.addEventListener("click", resetFilters);
+  elements.download.addEventListener("click", downloadCurrentView);
+}
+
+function render() {
+  renderTrackTabs();
+  renderCategoryTabs();
+  renderMetricSelect();
+  renderTable();
+  renderMetricGuide();
+}
+
+async function init() {
+  try {
+    const response = await fetch("./data.json", { cache: "no-store" });
+    if (!response.ok) throw new Error(`Data request failed with status ${response.status}`);
+    state.data = await response.json();
+    state.sortDirection = directionFor(state.data.metrics[state.sortMetric]);
+    renderMeta();
+    bindControls();
+    render();
+    document.documentElement.classList.add("is-ready");
+  } catch (error) {
+    console.error(error);
+    elements.error.hidden = false;
+    elements.error.querySelector("p").textContent = "The leaderboard data could not be loaded. Please refresh the page or try again later.";
+  }
+}
+
+init();

data.json

@@ -0,0 +1,634 @@
+{
+  "meta": {
+    "title": "StreamAV-Bench Leaderboard",
+    "tagline": "Streaming systems, evaluated while they run.",
+    "description": "Official metric-wise results for streaming audio-video generation across progressive and interactive evaluation tracks.",
+    "release": "Initial benchmark release",
+    "systemCount": 13,
+    "metricCount": 32,
+    "scenarioCount": 320,
+    "durationSeconds": 180,
+    "publishedPrecision": 3,
+    "links": {
+      "project": "https://liukqchoco.github.io/StreamAVBench/",
+      "code": "https://github.com/liukqchoco/StreamAVBench-Code",
+      "paper": "",
+      "dataset": "",
+      "submission": ""
+    }
+  },
+  "tracks": [
+    {
+      "id": "shared",
+      "label": "Shared",
+      "count": 9,
+      "description": "Quality, alignment, continuity, and efficiency metrics applied across both tracks."
+    },
+    {
+      "id": "progressive",
+      "label": "Progressive",
+      "count": 12,
+      "description": "Instruction adherence and long-horizon stability under one global prompt."
+    },
+    {
+      "id": "interactive",
+      "label": "Interactive",
+      "count": 11,
+      "description": "Runtime-update response, state retention, and reuse under prompt updates."
+    },
+    {
+      "id": "diagnostics",
+      "label": "Diagnostics",
+      "count": 4,
+      "description": "Success- and coverage-adjusted diagnostics that jointly account for update success and source-state coverage."
+    }
+  ],
+  "categories": [
+    {
+      "id": "quality",
+      "track": "shared",
+      "label": "Quality & Alignment",
+      "shortLabel": "Quality",
+      "description": "Perceptual quality and semantic or temporal correspondence between audio and video.",
+      "defaultMetric": "va",
+      "metrics": ["va", "vq", "pq", "aq", "avalign", "avsync"]
+    },
+    {
+      "id": "streaming",
+      "track": "shared",
+      "label": "Continuity & Efficiency",
+      "shortLabel": "Streaming",
+      "description": "Technical continuity at native generation boundaries, throughput, and startup latency.",
+      "defaultMetric": "nbc",
+      "metrics": ["nbc", "fps", "ttfc"]
+    },
+    {
+      "id": "adherence",
+      "track": "progressive",
+      "label": "Instruction Adherence",
+      "shortLabel": "Adherence",
+      "description": "Full-rollout fulfillment and endpoint drift for fixed visual and audio requirements.",
+      "defaultMetric": "vif",
+      "metrics": ["vif", "aif", "vid", "aid"]
+    },
+    {
+      "id": "stability",
+      "track": "progressive",
+      "label": "Long-Horizon Stability",
+      "shortLabel": "Stability",
+      "description": "Quality drift, visual consistency, and audio-video drift over the 180-second rollout.",
+      "defaultMetric": "va_d",
+      "metrics": ["va_d", "vq_d", "pq_d", "aq_d", "sc", "bc", "avalign_d", "avsync_d"]
+    },
+    {
+      "id": "response",
+      "track": "interactive",
+      "label": "Interactive Response",
+      "shortLabel": "Response",
+      "description": "Update fulfillment, transition continuity, achievement rate, and successful-response latency.",
+      "defaultMetric": "vuf",
+      "metrics": ["vuf", "auf", "pvc", "pac", "pvuar", "pauar", "pvrl", "parl"]
+    },
+    {
+      "id": "state",
+      "track": "interactive",
+      "label": "State Retention & Reuse",
+      "shortLabel": "State",
+      "description": "Preservation of untargeted states and correct reuse of information established earlier.",
+      "defaultMetric": "vsr",
+      "metrics": ["vsr", "asr", "hdf"]
+    },
+    {
+      "id": "adjusted",
+      "track": "diagnostics",
+      "label": "Success & Coverage Adjustments",
+      "shortLabel": "Adjusted",
+      "description": "Adjusted diagnostics that penalize unachieved updates and unestablished dependency sources; these are reported separately from the 32 core metrics.",
+      "defaultMetric": "sa_pvrl",
+      "metrics": ["sa_pvrl", "sa_parl", "ca_hdf_a", "ca_hdf_l"]
+    }
+  ],
+  "metrics": {
+    "va": {
+      "abbr": "VA",
+      "name": "Visual Aesthetics",
+      "direction": "higher",
+      "range": "[0, 1]",
+      "unit": "",
+      "evaluator": "LAION Aesthetic Predictor",
+      "description": "Perceptual visual appeal, averaged over six 30-second intervals."
+    },
+    "vq": {
+      "abbr": "VQ",
+      "name": "Visual Quality",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro",
+      "description": "Visual fidelity, subject integrity, motion naturalness, and artifact control."
+    },
+    "pq": {
+      "abbr": "PQ",
+      "name": "Production Quality",
+      "direction": "higher",
+      "range": "Original evaluator scale",
+      "unit": "",
+      "evaluator": "Audiobox Aesthetics",
+      "description": "Perceptual and production fidelity of the generated audio."
+    },
+    "aq": {
+      "abbr": "AQ",
+      "name": "Audio Quality",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro",
+      "description": "Audio naturalness and artifact control."
+    },
+    "avalign": {
+      "abbr": "AVAlign",
+      "name": "Audio-Video Alignment",
+      "direction": "higher",
+      "range": "Cosine similarity",
+      "unit": "",
+      "evaluator": "ImageBind",
+      "description": "Semantic correspondence between generated audio and visual content."
+    },
+    "avsync": {
+      "abbr": "AVSync",
+      "name": "Audio-Video Synchronization",
+      "direction": "lower",
+      "range": "≥ 0",
+      "unit": "s",
+      "evaluator": "Synchformer",
+      "description": "Absolute predicted temporal offset between audio and video."
+    },
+    "nbc": {
+      "abbr": "NBC",
+      "name": "Native Boundary Continuity",
+      "direction": "higher",
+      "range": "[0, 100]",
+      "unit": "",
+      "evaluator": "Deterministic artifact detector",
+      "description": "Continuity at model-native generation-unit boundaries, accounting for black frames, repetition, freezing, and flashes."
+    },
+    "fps": {
+      "abbr": "FPS",
+      "name": "Frames per Second",
+      "direction": "higher",
+      "range": "≥ 0",
+      "unit": "fps",
+      "evaluator": "Runtime measurement",
+      "description": "Generated video frames per unit generation time under the default recommended configuration."
+    },
+    "ttfc": {
+      "abbr": "TTFC",
+      "name": "Time to First Chunk",
+      "direction": "lower",
+      "range": "≥ 0",
+      "unit": "s",
+      "evaluator": "Runtime measurement",
+      "description": "Elapsed time from receiving a generation request to producing the first output chunk."
+    },
+    "vif": {
+      "abbr": "VIF",
+      "name": "Video Instruction Fulfillment",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro + case checklist",
+      "description": "Completeness of visual requirements over the full progressive output."
+    },
+    "aif": {
+      "abbr": "AIF",
+      "name": "Audio Instruction Fulfillment",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro + case checklist",
+      "description": "Completeness of audio requirements over the full progressive output."
+    },
+    "vid": {
+      "abbr": "VID",
+      "name": "Video Instruction Drift",
+      "direction": "lower",
+      "range": "[0, 4]",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro + case checklist",
+      "description": "Absolute change in visual instruction adherence between the first and last intervals."
+    },
+    "aid": {
+      "abbr": "AID",
+      "name": "Audio Instruction Drift",
+      "direction": "lower",
+      "range": "[0, 4]",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro + case checklist",
+      "description": "Absolute change in audio instruction adherence between the first and last intervals."
+    },
+    "va_d": {
+      "abbr": "VA-D",
+      "name": "Visual Aesthetics Drift",
+      "direction": "lower",
+      "range": "VA units",
+      "unit": "",
+      "evaluator": "LAION Aesthetic Predictor",
+      "description": "Absolute change in visual aesthetics between the first and last intervals."
+    },
+    "vq_d": {
+      "abbr": "VQ-D",
+      "name": "Visual Quality Drift",
+      "direction": "lower",
+      "range": "VQ units",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro",
+      "description": "Absolute change in visual quality between the first and last intervals."
+    },
+    "pq_d": {
+      "abbr": "PQ-D",
+      "name": "Production Quality Drift",
+      "direction": "lower",
+      "range": "PQ units",
+      "unit": "",
+      "evaluator": "Audiobox Aesthetics",
+      "description": "Absolute change in production quality between the first and last intervals."
+    },
+    "aq_d": {
+      "abbr": "AQ-D",
+      "name": "Audio Quality Drift",
+      "direction": "lower",
+      "range": "AQ units",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro",
+      "description": "Absolute change in audio quality between the first and last intervals."
+    },
+    "sc": {
+      "abbr": "SC",
+      "name": "Subject Consistency",
+      "direction": "higher",
+      "range": "Original evaluator scale",
+      "unit": "",
+      "evaluator": "VBench-Long protocol",
+      "description": "Temporal consistency of subject appearance over the generated sequence."
+    },
+    "bc": {
+      "abbr": "BC",
+      "name": "Background Consistency",
+      "direction": "higher",
+      "range": "Original evaluator scale",
+      "unit": "",
+      "evaluator": "VBench-Long protocol",
+      "description": "Temporal consistency of background scenes over the generated sequence."
+    },
+    "avalign_d": {
+      "abbr": "AVAlign-D",
+      "name": "Audio-Video Alignment Drift",
+      "direction": "lower",
+      "range": "AVAlign units",
+      "unit": "",
+      "evaluator": "ImageBind",
+      "description": "Absolute change in audio-video semantic correspondence between the first and last intervals."
+    },
+    "avsync_d": {
+      "abbr": "AVSync-D",
+      "name": "Audio-Video Synchronization Drift",
+      "direction": "lower",
+      "range": "AVSync units",
+      "unit": "s",
+      "evaluator": "Synchformer",
+      "description": "Absolute change in audio-video synchronization offset between the first and last intervals."
+    },
+    "vuf": {
+      "abbr": "VUF",
+      "name": "Video Update Fulfillment",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro + update checklist",
+      "description": "Completeness of each runtime update's visual targets."
+    },
+    "auf": {
+      "abbr": "AUF",
+      "name": "Audio Update Fulfillment",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro + update checklist",
+      "description": "Completeness of each runtime update's audio targets."
+    },
+    "pvc": {
+      "abbr": "PVC",
+      "name": "Prompt-Based Visual Continuity",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Boundary detector + Gemini 3.1 Pro",
+      "description": "Visual continuity across prompt-update boundaries while allowing requested changes."
+    },
+    "pac": {
+      "abbr": "PAC",
+      "name": "Prompt-Based Audio Continuity",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro",
+      "description": "Audio continuity across prompt-update boundaries while allowing requested changes."
+    },
+    "pvuar": {
+      "abbr": "PVUAR",
+      "name": "Prompt-Based Visual Update Achievement Rate",
+      "direction": "higher",
+      "range": "[0, 1]",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro + update checklist",
+      "description": "Fraction of applicable visual updates whose core target is clearly realized."
+    },
+    "pauar": {
+      "abbr": "PAUAR",
+      "name": "Prompt-Based Audio Update Achievement Rate",
+      "direction": "higher",
+      "range": "[0, 1]",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro + update checklist",
+      "description": "Fraction of applicable audio updates whose core target is clearly realized."
+    },
+    "pvrl": {
+      "abbr": "PVRL",
+      "name": "Prompt-Based Visual Response Latency",
+      "direction": "lower",
+      "range": "Media time",
+      "unit": "s",
+      "evaluator": "Media-time measurement",
+      "description": "Conditional latency to the first clear realization of an achieved visual target."
+    },
+    "parl": {
+      "abbr": "PARL",
+      "name": "Prompt-Based Audio Response Latency",
+      "direction": "lower",
+      "range": "Media time",
+      "unit": "s",
+      "evaluator": "Media-time measurement",
+      "description": "Conditional latency to the first clear realization of an achieved audio target."
+    },
+    "vsr": {
+      "abbr": "VSR",
+      "name": "Visual State Retention",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro",
+      "description": "Preservation of subject appearance and environment after accounting for requested changes."
+    },
+    "asr": {
+      "abbr": "ASR",
+      "name": "Audio State Retention",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro",
+      "description": "Preservation of recurring music, ambience, and persistent sounds not targeted by an update."
+    },
+    "hdf": {
+      "abbr": "HDF",
+      "name": "History-Dependency Following",
+      "direction": "higher",
+      "range": "1–5",
+      "unit": "",
+      "evaluator": "Gemini 3.1 Pro",
+      "description": "Correct execution of updates using relevant earlier states, evaluated only when the required source state was established."
+    },
+    "sa_pvrl": {
+      "abbr": "SA-PVRL",
+      "name": "Success-Adjusted Visual Response Latency",
+      "direction": "lower",
+      "range": "[0, 30]",
+      "unit": "s",
+      "evaluator": "Achievement-adjusted media-time measurement",
+      "description": "Visual response latency with the 30-second observation-window cap assigned to every unachieved target."
+    },
+    "sa_parl": {
+      "abbr": "SA-PARL",
+      "name": "Success-Adjusted Audio Response Latency",
+      "direction": "lower",
+      "range": "[0, 30]",
+      "unit": "s",
+      "evaluator": "Achievement-adjusted media-time measurement",
+      "description": "Audio response latency with the 30-second observation-window cap assigned to every unachieved target."
+    },
+    "ca_hdf_a": {
+      "abbr": "CA-HDF-A",
+      "name": "Coverage-Adjusted Adjacent HDF",
+      "direction": "higher",
+      "range": "[0, 1]",
+      "unit": "",
+      "evaluator": "Source establishment + normalized conditional HDF",
+      "description": "Adjacent-dependency quality normalized to [0,1], with unestablished source states assigned zero."
+    },
+    "ca_hdf_l": {
+      "abbr": "CA-HDF-L",
+      "name": "Coverage-Adjusted Long-Range HDF",
+      "direction": "higher",
+      "range": "[0, 1]",
+      "unit": "",
+      "evaluator": "Source establishment + normalized conditional HDF",
+      "description": "Long-range dependency quality normalized to [0,1], with unestablished source states assigned zero."
+    }
+  },
+  "models": [
+    {
+      "name": "PixVerse R1",
+      "paradigm": "Native joint",
+      "access": "Web",
+      "reference": "https://pixverse.ai/en/blog/pixverse-launches-r1-real-time-world-model",
+      "scores": {
+        "va": 0.529, "vq": 2.428, "pq": 6.348, "aq": 2.810, "avalign": 0.234, "avsync": 0.855,
+        "nbc": null, "fps": null, "ttfc": null,
+        "vif": 2.976, "aif": 2.511, "vid": 0.484, "aid": 0.425,
+        "va_d": 0.032, "vq_d": 0.253, "pq_d": 0.421, "aq_d": 0.626, "sc": 0.907, "bc": 0.930, "avalign_d": 0.065, "avsync_d": 0.579,
+        "vuf": 2.573, "auf": 2.895, "pvc": 4.278, "pac": 2.544, "pvuar": 0.350, "pauar": 0.466, "pvrl": 12.992, "parl": 10.352,
+        "vsr": 2.430, "asr": 4.108, "hdf": 2.461,
+        "sa_pvrl": 24.011, "sa_parl": 20.855, "ca_hdf_a": 0.232, "ca_hdf_l": 0.234
+      }
+    },
+    {
+      "name": "HappyOyster",
+      "paradigm": "Native joint",
+      "access": "Web",
+      "reference": "https://www.alizila.com/alibaba-launches-happyoyster-a-world-model-product-for-real-time-immersive-creation-and-interaction/",
+      "scores": {
+        "va": 0.529, "vq": 2.785, "pq": 6.817, "aq": 3.157, "avalign": 0.206, "avsync": 1.044,
+        "nbc": null, "fps": null, "ttfc": null,
+        "vif": 3.565, "aif": 2.692, "vid": 0.510, "aid": 0.508,
+        "va_d": 0.032, "vq_d": 0.417, "pq_d": 0.623, "aq_d": 0.411, "sc": 0.904, "bc": 0.934, "avalign_d": 0.077, "avsync_d": 0.534,
+        "vuf": 2.975, "auf": 2.879, "pvc": 3.744, "pac": 3.509, "pvuar": 0.518, "pauar": 0.488, "pvrl": 14.484, "parl": 13.621,
+        "vsr": 2.799, "asr": 3.772, "hdf": 2.817,
+        "sa_pvrl": 21.991, "sa_parl": 21.861, "ca_hdf_a": 0.354, "ca_hdf_l": 0.306
+      }
+    },
+    {
+      "name": "OmniForcing",
+      "paradigm": "Native joint",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2603.11647",
+      "scores": {
+        "va": 0.554, "vq": 2.374, "pq": 6.351, "aq": 2.528, "avalign": 0.119, "avsync": 1.423,
+        "nbc": 98.808, "fps": 12.799, "ttfc": 3.998,
+        "vif": 2.423, "aif": 2.343, "vid": 0.572, "aid": 0.277,
+        "va_d": 0.083, "vq_d": 0.273, "pq_d": 0.429, "aq_d": 0.506, "sc": 0.962, "bc": 0.953, "avalign_d": 0.081, "avsync_d": 0.479,
+        "vuf": 1.848, "auf": 2.242, "pvc": 4.161, "pac": 3.369, "pvuar": 0.053, "pauar": 0.316, "pvrl": 13.295, "parl": 7.925,
+        "vsr": 2.624, "asr": 3.388, "hdf": 2.487,
+        "sa_pvrl": 29.128, "sa_parl": 23.046, "ca_hdf_a": 0.136, "ca_hdf_l": 0.109
+      }
+    },
+    {
+      "name": "Odyssey-2",
+      "paradigm": "Cascaded",
+      "access": "Web",
+      "reference": "https://odyssey.ml/introducing-odyssey-2",
+      "scores": {
+        "va": 0.531, "vq": 2.820, "pq": 6.426, "aq": 2.659, "avalign": 0.260, "avsync": 0.946,
+        "nbc": null, "fps": null, "ttfc": null,
+        "vif": 3.106, "aif": 2.778, "vid": 0.500, "aid": 0.566,
+        "va_d": 0.040, "vq_d": 0.463, "pq_d": 0.362, "aq_d": 0.456, "sc": 0.976, "bc": 0.966, "avalign_d": 0.064, "avsync_d": 0.548,
+        "vuf": 2.408, "auf": 2.244, "pvc": 3.919, "pac": 1.749, "pvuar": 0.274, "pauar": 0.308, "pvrl": 18.758, "parl": 15.733,
+        "vsr": 2.836, "asr": 2.707, "hdf": 2.554,
+        "sa_pvrl": 26.838, "sa_parl": 25.611, "ca_hdf_a": 0.196, "ca_hdf_l": 0.168
+      }
+    },
+    {
+      "name": "Self-Forcing",
+      "paradigm": "Cascaded",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2506.08009",
+      "scores": {
+        "va": 0.585, "vq": 2.753, "pq": 6.453, "aq": 2.623, "avalign": 0.256, "avsync": 0.919,
+        "nbc": 94.359, "fps": 15.628, "ttfc": 1.278,
+        "vif": 3.019, "aif": 2.810, "vid": 0.373, "aid": 0.457,
+        "va_d": 0.025, "vq_d": 0.323, "pq_d": 0.341, "aq_d": 0.488, "sc": 0.981, "bc": 0.969, "avalign_d": 0.054, "avsync_d": 0.476,
+        "vuf": 2.237, "auf": 2.339, "pvc": 3.912, "pac": 1.784, "pvuar": 0.185, "pauar": 0.334, "pvrl": 14.164, "parl": 12.369,
+        "vsr": 2.851, "asr": 2.813, "hdf": 2.348,
+        "sa_pvrl": 27.081, "sa_parl": 24.156, "ca_hdf_a": 0.206, "ca_hdf_l": 0.169
+      }
+    },
+    {
+      "name": "LongLive",
+      "paradigm": "Cascaded",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2509.22622",
+      "scores": {
+        "va": 0.605, "vq": 2.768, "pq": 6.459, "aq": 2.696, "avalign": 0.272, "avsync": 0.969,
+        "nbc": 85.418, "fps": 10.125, "ttfc": 1.381,
+        "vif": 3.164, "aif": 2.814, "vid": 0.317, "aid": 0.581,
+        "va_d": 0.023, "vq_d": 0.367, "pq_d": 0.280, "aq_d": 0.475, "sc": 0.986, "bc": 0.973, "avalign_d": 0.052, "avsync_d": 0.476,
+        "vuf": 2.341, "auf": 2.138, "pvc": 3.631, "pac": 1.809, "pvuar": 0.241, "pauar": 0.266, "pvrl": 11.792, "parl": 13.078,
+        "vsr": 2.724, "asr": 2.712, "hdf": 2.212,
+        "sa_pvrl": 25.575, "sa_parl": 25.490, "ca_hdf_a": 0.186, "ca_hdf_l": 0.187
+      }
+    },
+    {
+      "name": "Rolling-Forcing",
+      "paradigm": "Cascaded",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2509.25161",
+      "scores": {
+        "va": 0.572, "vq": 2.757, "pq": 6.393, "aq": 2.673, "avalign": 0.265, "avsync": 1.078,
+        "nbc": 96.657, "fps": 10.603, "ttfc": 2.962,
+        "vif": 3.009, "aif": 2.858, "vid": 0.425, "aid": 0.474,
+        "va_d": 0.043, "vq_d": 0.427, "pq_d": 0.329, "aq_d": 0.425, "sc": 0.980, "bc": 0.966, "avalign_d": 0.064, "avsync_d": 0.506,
+        "vuf": 2.315, "auf": 2.221, "pvc": 4.086, "pac": 1.800, "pvuar": 0.217, "pauar": 0.298, "pvrl": 13.234, "parl": 12.820,
+        "vsr": 2.542, "asr": 2.597, "hdf": 2.502,
+        "sa_pvrl": 26.355, "sa_parl": 24.941, "ca_hdf_a": 0.250, "ca_hdf_l": 0.155
+      }
+    },
+    {
+      "name": "Deep Forcing",
+      "paradigm": "Cascaded",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2512.05081",
+      "scores": {
+        "va": 0.597, "vq": 2.632, "pq": 6.523, "aq": 2.668, "avalign": 0.280, "avsync": 0.878,
+        "nbc": 92.482, "fps": 11.065, "ttfc": 1.397,
+        "vif": 3.041, "aif": 2.629, "vid": 0.359, "aid": 0.545,
+        "va_d": 0.023, "vq_d": 0.334, "pq_d": 0.289, "aq_d": 0.497, "sc": 0.979, "bc": 0.967, "avalign_d": 0.062, "avsync_d": 0.553,
+        "vuf": 2.295, "auf": 2.146, "pvc": 3.879, "pac": 1.770, "pvuar": 0.220, "pauar": 0.288, "pvrl": 13.433, "parl": 12.650,
+        "vsr": 2.449, "asr": 2.601, "hdf": 2.206,
+        "sa_pvrl": 26.420, "sa_parl": 25.024, "ca_hdf_a": 0.181, "ca_hdf_l": 0.150
+      }
+    },
+    {
+      "name": "MemFlow",
+      "paradigm": "Cascaded",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2512.14699",
+      "scores": {
+        "va": 0.600, "vq": 2.836, "pq": 6.407, "aq": 2.651, "avalign": 0.269, "avsync": 1.035,
+        "nbc": 87.724, "fps": 10.840, "ttfc": 1.343,
+        "vif": 3.142, "aif": 2.854, "vid": 0.333, "aid": 0.492,
+        "va_d": 0.028, "vq_d": 0.502, "pq_d": 0.319, "aq_d": 0.503, "sc": 0.986, "bc": 0.972, "avalign_d": 0.054, "avsync_d": 0.474,
+        "vuf": 2.309, "auf": 2.286, "pvc": 3.630, "pac": 1.880, "pvuar": 0.217, "pauar": 0.326, "pvrl": 13.698, "parl": 13.154,
+        "vsr": 2.961, "asr": 2.879, "hdf": 2.385,
+        "sa_pvrl": 26.503, "sa_parl": 24.433, "ca_hdf_a": 0.200, "ca_hdf_l": 0.216
+      }
+    },
+    {
+      "name": "Causal-Forcing",
+      "paradigm": "Cascaded",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2602.02214",
+      "scores": {
+        "va": 0.556, "vq": 2.397, "pq": 6.383, "aq": 2.714, "avalign": 0.280, "avsync": 1.093,
+        "nbc": 99.558, "fps": 15.421, "ttfc": 1.284,
+        "vif": 2.834, "aif": 2.729, "vid": 0.364, "aid": 0.615,
+        "va_d": 0.030, "vq_d": 0.189, "pq_d": 0.320, "aq_d": 0.509, "sc": 0.952, "bc": 0.946, "avalign_d": 0.058, "avsync_d": 0.491,
+        "vuf": 2.284, "auf": 2.165, "pvc": 4.218, "pac": 1.715, "pvuar": 0.219, "pauar": 0.283, "pvrl": 14.032, "parl": 12.680,
+        "vsr": 2.218, "asr": 2.468, "hdf": 2.357,
+        "sa_pvrl": 26.497, "sa_parl": 25.117, "ca_hdf_a": 0.184, "ca_hdf_l": 0.188
+      }
+    },
+    {
+      "name": "Helios",
+      "paradigm": "Cascaded",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2603.04379",
+      "scores": {
+        "va": 0.470, "vq": 2.176, "pq": 6.241, "aq": 2.521, "avalign": 0.200, "avsync": 0.927,
+        "nbc": 83.657, "fps": 10.231, "ttfc": 8.059,
+        "vif": 2.977, "aif": 2.712, "vid": 0.694, "aid": 0.566,
+        "va_d": 0.149, "vq_d": 0.306, "pq_d": 0.649, "aq_d": 0.513, "sc": 0.967, "bc": 0.967, "avalign_d": 0.115, "avsync_d": 0.514,
+        "vuf": 2.253, "auf": 2.461, "pvc": 3.317, "pac": 1.644, "pvuar": 0.197, "pauar": 0.354, "pvrl": 14.043, "parl": 12.207,
+        "vsr": 2.405, "asr": 1.985, "hdf": 2.478,
+        "sa_pvrl": 26.841, "sa_parl": 23.712, "ca_hdf_a": 0.202, "ca_hdf_l": 0.181
+      }
+    },
+    {
+      "name": "SWIFT",
+      "paradigm": "Cascaded",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2605.09442",
+      "scores": {
+        "va": 0.605, "vq": 2.735, "pq": 6.483, "aq": 2.680, "avalign": 0.270, "avsync": 0.970,
+        "nbc": 87.043, "fps": 12.359, "ttfc": 1.496,
+        "vif": 3.152, "aif": 2.887, "vid": 0.305, "aid": 0.515,
+        "va_d": 0.022, "vq_d": 0.411, "pq_d": 0.272, "aq_d": 0.463, "sc": 0.986, "bc": 0.973, "avalign_d": 0.049, "avsync_d": 0.501,
+        "vuf": 2.357, "auf": 2.102, "pvc": 3.615, "pac": 1.856, "pvuar": 0.246, "pauar": 0.276, "pvrl": 10.340, "parl": 12.094,
+        "vsr": 2.609, "asr": 2.705, "hdf": 2.322,
+        "sa_pvrl": 25.150, "sa_parl": 25.195, "ca_hdf_a": 0.192, "ca_hdf_l": 0.232
+      }
+    },
+    {
+      "name": "IAMFlow",
+      "paradigm": "Cascaded",
+      "access": "Open",
+      "reference": "https://arxiv.org/abs/2605.18733",
+      "scores": {
+        "va": 0.602, "vq": 2.840, "pq": 6.415, "aq": 2.625, "avalign": 0.268, "avsync": 1.016,
+        "nbc": 86.957, "fps": 6.049, "ttfc": 1.772,
+        "vif": 3.192, "aif": 2.789, "vid": 0.302, "aid": 0.600,
+        "va_d": 0.023, "vq_d": 0.425, "pq_d": 0.331, "aq_d": 0.563, "sc": 0.986, "bc": 0.973, "avalign_d": 0.057, "avsync_d": 0.490,
+        "vuf": 2.319, "auf": 2.190, "pvc": 3.655, "pac": 1.819, "pvuar": 0.222, "pauar": 0.297, "pvrl": 11.683, "parl": 13.001,
+        "vsr": 2.836, "asr": 2.903, "hdf": 2.424,
+        "sa_pvrl": 25.976, "sa_parl": 24.936, "ca_hdf_a": 0.213, "ca_hdf_l": 0.183
+      }
+    }
+  ]
+}

index.html

@@ -1,19 +1,319 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Official StreamAV-Bench leaderboard for streaming audio-video generation.">
+    <meta name="theme-color" content="#f5f2ea">
+    <meta property="og:title" content="StreamAV-Bench Leaderboard">
+    <meta property="og:description" content="Metric-wise evaluation of streaming audio-video generation systems.">
+    <meta property="og:type" content="website">
+    <title>StreamAV-Bench Leaderboard</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%2318231f'/%3E%3Cpath d='M12 35h8l4-14 7 28 7-37 5 23h9' fill='none' stroke='%23fffef9' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
+    <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&family=DM+Serif+Display&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+    <script src="app.js" defer></script>
+  </head>
+  <body>
+    <a class="skip-link" href="#leaderboard">Skip to leaderboard</a>
+
+    <header class="site-header">
+      <div class="shell header-inner">
+        <a class="brand" id="project-link" href="https://liukqchoco.github.io/StreamAVBench/" target="_blank" rel="noopener noreferrer">
+          <svg class="brand-mark" viewBox="0 0 42 42" role="img" aria-label="StreamAV-Bench">
+            <rect x="1" y="1" width="40" height="40" rx="11" fill="currentColor"/>
+            <path d="M9 23h4l2.6-7 4.2 14L24 11l3.4 12H33" fill="none" stroke="#fffdf7" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
+            <circle cx="33" cy="23" r="2.2" fill="#ef9b77"/>
+          </svg>
+          <span>
+            <strong>StreamAV-Bench</strong>
+            <small>Leaderboard</small>
+          </span>
+        </a>
+
+        <nav aria-label="Primary navigation">
+          <a href="#leaderboard">Results</a>
+          <a href="#metrics">Metrics</a>
+          <a href="#submission">Submit</a>
+          <a class="nav-project" href="https://liukqchoco.github.io/StreamAVBench/" target="_blank" rel="noopener noreferrer">
+            Project <span aria-hidden="true">↗</span>
+          </a>
+        </nav>
+      </div>
+    </header>
+
+    <main>
+      <section class="hero">
+        <div class="hero-grid" aria-hidden="true"></div>
+        <div class="hero-orb hero-orb-one" aria-hidden="true"></div>
+        <div class="hero-orb hero-orb-two" aria-hidden="true"></div>
+        <div class="shell hero-inner">
+          <div class="hero-copy">
+            <p class="eyebrow"><span></span><b id="release-label">Initial benchmark release</b></p>
+            <h1>StreamAV-Bench <em>Leaderboard</em></h1>
+            <p class="hero-tagline" id="hero-tagline">Streaming systems, evaluated while they run.</p>
+            <p class="hero-description" id="hero-description">
+              Official metric-wise results for streaming audio-video generation across progressive and interactive evaluation tracks.
+            </p>
+            <div class="hero-actions">
+              <a class="button button-primary" href="#leaderboard">
+                Explore results <span aria-hidden="true">↓</span>
+              </a>
+              <a class="button button-secondary" href="#submission">
+                Submit a system <span aria-hidden="true">→</span>
+              </a>
+            </div>
+          </div>
+
+          <div class="stream-card">
+            <div class="stream-card-header">
+              <span>Evaluation signal</span>
+              <i><b></b> 180-second rollout</i>
+            </div>
+            <div class="signal-group signal-progressive">
+              <div class="signal-label">
+                <strong>Progressive</strong>
+                <small>one global prompt</small>
+              </div>
+              <div class="signal-track">
+                <span style="--level: 82%"></span>
+                <span style="--level: 76%"></span>
+                <span style="--level: 70%"></span>
+                <span style="--level: 66%"></span>
+                <span style="--level: 59%"></span>
+                <span style="--level: 54%"></span>
+              </div>
+              <div class="signal-times"><span>0</span><span>60</span><span>120</span><span>180s</span></div>
+            </div>
+            <div class="signal-divider"><span>committed history</span></div>
+            <div class="signal-group signal-interactive">
+              <div class="signal-label">
+                <strong>Interactive</strong>
+                <small>five runtime updates</small>
+              </div>
+              <div class="update-track">
+                <span>P0</span><i></i><span>U1</span><i></i><span>U2</span><i></i><span>U3</span><i></i><span>U4</span><i></i><span>U5</span>
+              </div>
+              <div class="response-line">
+                <b style="--delay: 18%"></b>
+                <b style="--delay: 42%"></b>
+                <b style="--delay: 31%"></b>
+                <b style="--delay: 54%"></b>
+                <b style="--delay: 38%"></b>
+              </div>
+            </div>
+            <p class="stream-card-note"><span>◆</span> Scores expose change over time—not only the final output.</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="stat-band" aria-label="Benchmark statistics">
+        <div class="shell stats">
+          <div><strong id="stat-systems">13</strong><span>evaluated systems</span></div>
+          <div><strong id="stat-metrics">32</strong><span>core metrics</span></div>
+          <div><strong>2</strong><span>streaming tracks</span></div>
+          <div><strong id="stat-scenarios">320</strong><span>verified scenarios</span></div>
+          <div><strong id="stat-duration">180s</strong><span>continuous generation</span></div>
+        </div>
+      </section>
+
+      <section class="section leaderboard-section" id="leaderboard">
+        <div class="shell">
+          <div class="section-heading split-heading">
+            <div>
+              <p class="kicker">Official results</p>
+              <h2>Compare one capability at a time.</h2>
+            </div>
+            <div class="heading-note">
+              <span class="note-icon">≠</span>
+              <p><strong>No aggregate score.</strong> StreamAV-Bench reports complementary capabilities without introducing an unsupported weighted composite.</p>
+            </div>
+          </div>
+
+          <div class="explorer">
+            <div class="track-switcher">
+              <div class="track-tabs" id="track-tabs" role="tablist" aria-label="Evaluation views"></div>
+              <p id="track-description">Quality, alignment, continuity, and efficiency metrics applied across both tracks.</p>
+            </div>
+
+            <div class="category-bar">
+              <span>View</span>
+              <div class="category-tabs" id="category-tabs" aria-label="Metric categories"></div>
+            </div>
+
+            <div class="table-panel">
+              <div class="table-panel-header">
+                <div>
+                  <p class="table-kicker" id="table-kicker">Metric-wise ranking</p>
+                  <h3 id="category-title">Quality &amp; Alignment</h3>
+                  <p id="category-description">Perceptual quality and semantic or temporal correspondence between audio and video.</p>
+                </div>
+                <p class="ranking-label" id="ranking-label">Ranked by <strong>Visual Aesthetics</strong><span>Higher is better</span></p>
+              </div>
+
+              <div class="toolbar">
+                <label class="search-control">
+                  <span class="sr-only">Search systems</span>
+                  <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5"></circle><path d="m16 16 4 4"></path></svg>
+                  <input id="model-search" type="search" placeholder="Search systems…" autocomplete="off">
+                </label>
+                <label class="metric-select-control">
+                  <span>Rank by</span>
+                  <select id="metric-select" aria-label="Select the metric used to rank systems"></select>
+                </label>
+                <label>
+                  <span>Paradigm</span>
+                  <select id="paradigm-filter">
+                    <option value="all">All paradigms</option>
+                    <option value="Native joint">Native joint</option>
+                    <option value="Cascaded">Cascaded</option>
+                  </select>
+                </label>
+                <label>
+                  <span>Access</span>
+                  <select id="access-filter">
+                    <option value="all">All access</option>
+                    <option value="Open">Open</option>
+                    <option value="Web">Web</option>
+                  </select>
+                </label>
+                <button class="tool-button" id="reset-filters" type="button" title="Reset filters">
+                  <span aria-hidden="true">↺</span> Reset
+                </button>
+                <button class="tool-button download-button" id="download-csv" type="button">
+                  <span aria-hidden="true">↓</span> CSV
+                </button>
+              </div>
+
+              <div class="data-error" id="data-error" role="alert" hidden>
+                <strong>Leaderboard unavailable</strong>
+                <p>The leaderboard data could not be loaded.</p>
+              </div>
+
+              <div class="table-scroll" tabindex="0" aria-label="Scrollable leaderboard table">
+                <table id="leaderboard-table">
+                  <caption class="sr-only">StreamAV-Bench system results</caption>
+                </table>
+              </div>
+
+              <div class="table-footer">
+                <p id="table-status" aria-live="polite">13 of 13 systems</p>
+                <div class="legend" aria-label="Cell highlighting legend">
+                  <span><i class="legend-best"></i> Best published value</span>
+                  <span><i class="legend-second"></i> Second distinct value</span>
+                  <span><b>—</b> Unavailable</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="evidence-note">
+              <span aria-hidden="true">i</span>
+              <div id="context-copy">
+                <p><strong>Reading the ranks.</strong> Click any metric header to rank by that metric. Published three-decimal ties use competition ranking (for example, 1, 1, 3). PVRL and PARL are conditional on successful target achievement and should be read with PVUAR and PAUAR.</p>
+                <p>HDF is evaluated only when its required source state was established. NBC, FPS, and TTFC are unavailable for PixVerse R1, HappyOyster, and Odyssey-2 because their web interfaces do not expose the required traces.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section metrics-section" id="metrics">
+        <div class="shell">
+          <div class="section-heading split-heading">
+            <div>
+              <p class="kicker">Metric guide</p>
+              <h2>Know what each number measures.</h2>
+            </div>
+            <p class="section-intro">The cards update with the selected leaderboard category. Choose a card to rank the table by that metric.</p>
+          </div>
+          <div class="metric-guide" id="metric-guide"></div>
+        </div>
+      </section>
+
+      <section class="section protocol-section">
+        <div class="shell">
+          <div class="section-heading">
+            <p class="kicker">How to read StreamAV-Bench</p>
+            <h2>Performance is a profile, not a single number.</h2>
+          </div>
+          <div class="protocol-grid">
+            <article>
+              <span>01</span>
+              <h3>Start with the regime</h3>
+              <p>Use Progressive for fixed-prompt long-horizon behavior and Interactive for runtime response, retention, and reuse.</p>
+            </article>
+            <article>
+              <span>02</span>
+              <h3>Pair level with change</h3>
+              <p>High quality or fulfillment can coexist with temporal drift. Read absolute scores alongside their drift counterparts.</p>
+            </article>
+            <article>
+              <span>03</span>
+              <h3>Pair success with speed</h3>
+              <p>Low conditional latency does not guarantee reliable updates. Read response latency together with achievement rate.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="section submission-section" id="submission">
+        <div class="shell submission-grid">
+          <div>
+            <p class="kicker">Join the leaderboard</p>
+            <h2>Submit results for manual verification.</h2>
+            <p class="submission-copy">The initial leaderboard uses a review-first process so that model configuration, benchmark coverage, and reported values can be checked before publication.</p>
+            <a class="button button-primary submission-button is-disabled" id="submission-link" aria-disabled="true">
+              <span>Submission form coming soon</span><b aria-hidden="true">↗</b>
+            </a>
+          </div>
+          <ol class="submission-steps">
+            <li><span>1</span><div><strong>Run the official protocol</strong><p>Evaluate the applicable StreamAV-Bench tracks and retain the per-case outputs.</p></div></li>
+            <li><span>2</span><div><strong>Package model metadata</strong><p>Include the model version, access mode, generation configuration, and metric results.</p></div></li>
+            <li><span>3</span><div><strong>Pass manual review</strong><p>The benchmark team verifies completeness and consistency before updating the public table.</p></div></li>
+          </ol>
+        </div>
+      </section>
+
+      <section class="resource-band" aria-label="Project resources">
+        <div class="shell resources">
+          <a id="paper-link" class="resource-link is-disabled" aria-disabled="true">
+            <span class="resource-symbol">▤</span>
+            <span><strong>Paper</strong><small data-link-status>Paper coming soon</small></span>
+            <b aria-hidden="true">—</b>
+          </a>
+          <a id="code-link" class="resource-link" href="https://github.com/liukqchoco/StreamAVBench-Code" target="_blank" rel="noopener noreferrer">
+            <span class="resource-symbol">&lt;/&gt;</span>
+            <span><strong>Code</strong><small data-link-status>Code repository</small></span>
+            <b aria-hidden="true">↗</b>
+          </a>
+          <a id="dataset-link" class="resource-link is-disabled" aria-disabled="true">
+            <span class="resource-symbol">≋</span>
+            <span><strong>Dataset</strong><small data-link-status>Dataset coming soon</small></span>
+            <b aria-hidden="true">—</b>
+          </a>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div class="shell footer-inner">
+        <div class="footer-brand">
+          <svg class="brand-mark" viewBox="0 0 42 42" aria-hidden="true">
+            <rect x="1" y="1" width="40" height="40" rx="11" fill="currentColor"/>
+            <path d="M9 23h4l2.6-7 4.2 14L24 11l3.4 12H33" fill="none" stroke="#fffdf7" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
+            <circle cx="33" cy="23" r="2.2" fill="#ef9b77"/>
+          </svg>
+          <span><strong>StreamAV-Bench</strong><small>Persistent · responsive · synchronized</small></span>
+        </div>
+        <p>Official benchmark results. Scores are reproduced from the final paper tables.</p>
+        <a href="#leaderboard">Back to results ↑</a>
+      </div>
+    </footer>
+
+    <noscript>
+      <div class="noscript">JavaScript is required to render and sort the leaderboard.</div>
+    </noscript>
+  </body>
 </html>

styles.css

@@ -0,0 +1,1987 @@
+:root {
+  --ink: #18231f;
+  --ink-2: #2d3934;
+  --ink-soft: #5c6863;
+  --paper: #f7f5ef;
+  --paper-deep: #eeebe1;
+  --white: #fffef9;
+  --line: rgba(24, 35, 31, 0.14);
+  --line-strong: rgba(24, 35, 31, 0.26);
+  --blue: #4b7bec;
+  --blue-soft: #e6efff;
+  --green: #6f9659;
+  --green-soft: #e8f0df;
+  --coral: #cc664e;
+  --coral-soft: #fae9e1;
+  --purple: #7969ad;
+  --purple-soft: #eee9fa;
+  --gold: #c88b2f;
+  --gold-soft: #fff4d8;
+  --silver: #71818a;
+  --silver-soft: #edf2f4;
+  --radius: 20px;
+  --shadow: 0 26px 90px rgba(47, 58, 49, 0.1);
+  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --serif: "DM Serif Display", Georgia, serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 88px;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  background: var(--paper);
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+button,
+input,
+select {
+  color: inherit;
+  font: inherit;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button {
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+.shell {
+  width: min(1320px, calc(100% - 56px));
+  margin-inline: auto;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.skip-link {
+  position: fixed;
+  z-index: 1000;
+  top: 12px;
+  left: 12px;
+  padding: 9px 14px;
+  color: var(--white);
+  background: var(--ink);
+  border-radius: 9px;
+  transform: translateY(-180%);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.site-header {
+  position: sticky;
+  z-index: 100;
+  top: 0;
+  height: 74px;
+  background: rgba(247, 245, 239, 0.9);
+  border-bottom: 1px solid var(--line);
+  backdrop-filter: blur(18px);
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.brand,
+.footer-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+}
+
+.brand-mark {
+  width: 36px;
+  height: 36px;
+  color: var(--ink);
+  flex: none;
+}
+
+.brand > span,
+.footer-brand > span {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.15;
+}
+
+.brand strong,
+.footer-brand strong {
+  font-size: 14px;
+  letter-spacing: -0.02em;
+}
+
+.brand small,
+.footer-brand small {
+  margin-top: 3px;
+  color: var(--ink-soft);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.site-header nav {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  color: var(--ink-soft);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.site-header nav a {
+  transition: color 150ms ease;
+}
+
+.site-header nav a:hover {
+  color: var(--ink);
+}
+
+.site-header .nav-project {
+  padding: 9px 15px;
+  color: var(--ink);
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+}
+
+.hero {
+  position: relative;
+  padding: 70px 0 64px;
+  overflow: hidden;
+}
+
+.hero-grid {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(rgba(24, 35, 31, 0.037) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(24, 35, 31, 0.037) 1px, transparent 1px);
+  background-size: 48px 48px;
+  mask-image: linear-gradient(to bottom, #000, transparent 94%);
+  pointer-events: none;
+}
+
+.hero-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(2px);
+  pointer-events: none;
+}
+
+.hero-orb-one {
+  top: -80px;
+  right: -90px;
+  width: 360px;
+  height: 360px;
+  background: var(--blue-soft);
+  opacity: 0.75;
+}
+
+.hero-orb-two {
+  bottom: -150px;
+  left: -130px;
+  width: 330px;
+  height: 330px;
+  background: var(--coral-soft);
+  opacity: 0.8;
+}
+
+.hero-inner {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.9fr);
+  align-items: center;
+  gap: 64px;
+}
+
+.eyebrow,
+.kicker,
+.table-kicker {
+  color: var(--coral);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  margin-bottom: 18px;
+  padding: 7px 12px;
+  color: var(--ink-soft);
+  background: rgba(255, 254, 249, 0.72);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  letter-spacing: 0.08em;
+}
+
+.eyebrow span {
+  width: 7px;
+  height: 7px;
+  background: var(--coral);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgba(204, 102, 78, 0.13);
+}
+
+.eyebrow b {
+  font-weight: 700;
+}
+
+.hero h1 {
+  max-width: 760px;
+  margin-bottom: 20px;
+  font-family: var(--serif);
+  font-size: clamp(56px, 6.4vw, 90px);
+  font-weight: 400;
+  line-height: 0.93;
+  letter-spacing: -0.055em;
+}
+
+.hero h1 em {
+  display: block;
+  color: var(--blue);
+  font-weight: inherit;
+}
+
+.hero-tagline {
+  margin-bottom: 12px;
+  font-size: clamp(20px, 2vw, 28px);
+  font-weight: 600;
+  letter-spacing: -0.035em;
+}
+
+.hero-description {
+  max-width: 650px;
+  margin-bottom: 24px;
+  color: var(--ink-soft);
+  font-size: 17px;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  min-height: 48px;
+  padding: 11px 18px;
+  border: 1px solid var(--line-strong);
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 700;
+  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
+}
+
+.button:hover:not(.is-disabled) {
+  transform: translateY(-2px);
+}
+
+.button-primary {
+  color: var(--paper);
+  background: var(--ink);
+  border-color: var(--ink);
+  box-shadow: 0 10px 24px rgba(24, 35, 31, 0.16);
+}
+
+.button-secondary {
+  background: rgba(255, 254, 249, 0.7);
+}
+
+.stream-card {
+  position: relative;
+  min-height: 410px;
+  padding: 20px;
+  background: rgba(255, 254, 249, 0.9);
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+}
+
+.stream-card::before {
+  position: absolute;
+  z-index: -1;
+  inset: 22px -18px -18px 22px;
+  content: "";
+  background: var(--green-soft);
+  border-radius: 28px;
+  transform: rotate(2deg);
+}
+
+.stream-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--line);
+  color: var(--ink-soft);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.stream-card-header i {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 9px;
+  font-style: normal;
+}
+
+.stream-card-header i b {
+  width: 7px;
+  height: 7px;
+  background: var(--green);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgba(111, 150, 89, 0.12);
+}
+
+.signal-group {
+  padding: 21px 6px;
+}
+
+.signal-label {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.signal-label strong {
+  font-size: 15px;
+}
+
+.signal-label small {
+  color: var(--ink-soft);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.signal-track {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  align-items: end;
+  gap: 7px;
+  height: 68px;
+  padding: 10px;
+  background: var(--green-soft);
+  border-radius: 13px;
+}
+
+.signal-track span {
+  position: relative;
+  height: var(--level);
+  background: var(--green);
+  border-radius: 5px 5px 2px 2px;
+}
+
+.signal-track span::after {
+  position: absolute;
+  inset: 7px 4px auto;
+  height: 2px;
+  content: "";
+  background: rgba(255, 255, 255, 0.48);
+  border-radius: 999px;
+}
+
+.signal-times {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  color: var(--ink-soft);
+  font-size: 8px;
+  font-weight: 600;
+}
+
+.signal-divider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--ink-soft);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.signal-divider::before,
+.signal-divider::after {
+  height: 1px;
+  content: "";
+  background: var(--line);
+  flex: 1;
+}
+
+.update-track {
+  display: flex;
+  align-items: center;
+}
+
+.update-track span {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  color: white;
+  background: var(--blue);
+  border-radius: 8px;
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.update-track span:first-child {
+  background: var(--ink);
+}
+
+.update-track span:nth-of-type(3) {
+  background: var(--purple);
+}
+
+.update-track span:nth-of-type(4) {
+  background: var(--green);
+}
+
+.update-track span:nth-of-type(5) {
+  background: var(--coral);
+}
+
+.update-track span:nth-of-type(6) {
+  color: var(--ink);
+  background: #edb755;
+}
+
+.update-track i {
+  height: 2px;
+  background: var(--line-strong);
+  flex: 1;
+}
+
+.response-line {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 9px;
+  margin: 11px 16px 0 48px;
+}
+
+.response-line b {
+  position: relative;
+  height: 5px;
+  overflow: hidden;
+  background: var(--blue-soft);
+  border-radius: 99px;
+}
+
+.response-line b::after {
+  position: absolute;
+  inset: 0 var(--delay) 0 0;
+  content: "";
+  background: var(--blue);
+  border-radius: inherit;
+}
+
+.stream-card-note {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 3px 7px 0;
+  padding: 11px 14px;
+  color: var(--ink-soft);
+  background: var(--paper);
+  border-radius: 11px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.stream-card-note span {
+  color: var(--coral);
+}
+
+.stat-band {
+  color: var(--paper);
+  background: var(--ink);
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  padding: 32px 0;
+}
+
+.stats > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-right: 1px solid rgba(255, 255, 255, 0.14);
+  text-align: center;
+}
+
+.stats > div:last-child {
+  border-right: 0;
+}
+
+.stats strong {
+  font-family: var(--serif);
+  font-size: clamp(32px, 3.4vw, 48px);
+  font-weight: 400;
+  line-height: 1;
+}
+
+.stats span {
+  margin-top: 7px;
+  color: rgba(255, 255, 255, 0.58);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.section {
+  padding: 112px 0;
+}
+
+.leaderboard-section {
+  padding-top: 84px;
+}
+
+.leaderboard-section .section-heading {
+  margin-bottom: 40px;
+}
+
+.section-heading {
+  max-width: 840px;
+  margin-bottom: 54px;
+}
+
+.section-heading .kicker {
+  margin-bottom: 16px;
+}
+
+.section-heading h2 {
+  margin-bottom: 0;
+  font-family: var(--serif);
+  font-size: clamp(40px, 5vw, 66px);
+  font-weight: 400;
+  line-height: 1.02;
+  letter-spacing: -0.04em;
+}
+
+.split-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.65fr);
+  align-items: end;
+  gap: 80px;
+  max-width: none;
+}
+
+.heading-note {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 14px;
+  align-items: start;
+  padding: 17px;
+  background: var(--coral-soft);
+  border: 1px solid rgba(204, 102, 78, 0.18);
+  border-radius: 14px;
+}
+
+.heading-note .note-icon {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  color: var(--coral);
+  background: var(--white);
+  border-radius: 8px;
+  font-family: var(--serif);
+  font-size: 20px;
+}
+
+.heading-note p {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.heading-note strong {
+  color: var(--ink);
+}
+
+.explorer {
+  display: grid;
+  gap: 18px;
+}
+
+.track-switcher {
+  display: grid;
+  grid-template-columns: minmax(460px, 0.9fr) 1fr;
+  align-items: center;
+  gap: 34px;
+  padding: 13px;
+  background: var(--paper-deep);
+  border: 1px solid var(--line);
+  border-radius: 18px;
+}
+
+.track-tabs {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 7px;
+}
+
+.track-tab {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 48px;
+  padding: 9px 12px;
+  color: var(--ink-soft);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.track-tab b {
+  display: grid;
+  width: auto;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 5px;
+  place-items: center;
+  color: var(--ink-soft);
+  background: rgba(255, 255, 255, 0.55);
+  border-radius: 7px;
+  font-size: 9px;
+}
+
+.track-tab.is-active {
+  color: var(--ink);
+  background: var(--white);
+  border-color: var(--line);
+  box-shadow: 0 8px 20px rgba(47, 58, 49, 0.06);
+}
+
+.track-tab.is-active b {
+  color: var(--blue);
+  background: var(--blue-soft);
+}
+
+.track-tab[data-track="diagnostics"].is-active b {
+  color: var(--purple);
+  background: var(--purple-soft);
+}
+
+.track-switcher > p {
+  margin: 0;
+  padding-right: 18px;
+  color: var(--ink-soft);
+  font-size: 12px;
+}
+
+.category-bar {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  min-height: 46px;
+  padding: 0 6px;
+}
+
+.category-bar > span {
+  color: var(--ink-soft);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.category-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.category-tab {
+  padding: 8px 13px;
+  color: var(--ink-soft);
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.category-tab.is-active {
+  color: var(--paper);
+  background: var(--ink);
+  border-color: var(--ink);
+}
+
+.table-panel {
+  overflow: hidden;
+  background: var(--white);
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  box-shadow: var(--shadow);
+}
+
+.table-panel.is-diagnostics {
+  border-color: rgba(121, 105, 173, 0.34);
+}
+
+.table-panel.is-diagnostics .table-kicker {
+  color: var(--purple);
+}
+
+.table-panel-header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 30px;
+  padding: 28px 30px 24px;
+}
+
+.table-panel-header > div {
+  max-width: 720px;
+}
+
+.table-kicker {
+  margin-bottom: 7px;
+}
+
+.table-panel-header h3 {
+  margin-bottom: 5px;
+  font-family: var(--serif);
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+}
+
+.table-panel-header > div > p:last-child {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 12px;
+}
+
+.ranking-label {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 10px;
+}
+
+.ranking-label strong {
+  color: var(--ink);
+  font-size: 13px;
+}
+
+.ranking-label span {
+  margin-top: 2px;
+  color: var(--green);
+  font-weight: 700;
+}
+
+.toolbar {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr) 150px 130px auto auto;
+  gap: 9px;
+  padding: 15px 20px;
+  background: var(--paper);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.toolbar label {
+  position: relative;
+}
+
+.toolbar label > span:not(.sr-only) {
+  position: absolute;
+  z-index: 1;
+  top: 5px;
+  left: 12px;
+  color: var(--ink-soft);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  pointer-events: none;
+  text-transform: uppercase;
+}
+
+.toolbar input,
+.toolbar select,
+.tool-button {
+  width: 100%;
+  height: 44px;
+  background: var(--white);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  outline: none;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.toolbar select {
+  padding: 14px 30px 3px 11px;
+}
+
+.toolbar .metric-select-control > span {
+  color: var(--blue);
+}
+
+.metric-select-control select {
+  background: var(--blue-soft);
+  border-color: rgba(75, 123, 236, 0.28);
+}
+
+.search-control svg {
+  position: absolute;
+  top: 13px;
+  left: 13px;
+  width: 18px;
+  fill: none;
+  stroke: var(--ink-soft);
+  stroke-linecap: round;
+  stroke-width: 1.8;
+}
+
+.search-control input {
+  padding: 0 12px 0 40px;
+}
+
+.toolbar input:focus,
+.toolbar select:focus,
+.tool-button:focus-visible,
+.track-tab:focus-visible,
+.category-tab:focus-visible,
+.metric-card button:focus-visible {
+  border-color: var(--blue);
+  box-shadow: 0 0 0 3px rgba(75, 123, 236, 0.15);
+}
+
+.tool-button {
+  width: auto;
+  min-width: 78px;
+  padding: 0 12px;
+}
+
+.download-button {
+  color: var(--paper);
+  background: var(--ink);
+  border-color: var(--ink);
+}
+
+.table-scroll {
+  overflow-x: auto;
+  outline: none;
+  scrollbar-color: var(--line-strong) transparent;
+  scrollbar-width: thin;
+}
+
+.table-scroll:focus-visible {
+  box-shadow: inset 0 0 0 3px rgba(75, 123, 236, 0.16);
+}
+
+table {
+  width: 100%;
+  min-width: 1050px;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+thead th {
+  position: sticky;
+  z-index: 3;
+  top: 0;
+  height: 62px;
+  padding: 0 13px;
+  color: var(--ink-soft);
+  background: var(--white);
+  border-bottom: 1px solid var(--line-strong);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+thead th.metric-column {
+  min-width: 86px;
+  padding: 0;
+  text-align: center;
+}
+
+.metric-column button {
+  display: grid;
+  grid-template-columns: auto auto;
+  align-content: center;
+  justify-content: center;
+  gap: 0 6px;
+  width: 100%;
+  height: 61px;
+  padding: 0 8px;
+  color: inherit;
+  background: transparent;
+  border: 0;
+}
+
+.metric-column button span {
+  color: var(--ink);
+  font-size: 11px;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.metric-column button i {
+  color: var(--ink-soft);
+  font-size: 10px;
+  font-style: normal;
+}
+
+.metric-column button small {
+  grid-column: 1 / -1;
+  margin-top: 2px;
+  color: var(--ink-soft);
+  font-size: 7px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+thead th.is-sorted {
+  background: var(--blue-soft);
+}
+
+thead th.is-sorted button span,
+thead th.is-sorted button i {
+  color: var(--blue);
+}
+
+tbody th,
+tbody td {
+  height: 70px;
+  padding: 11px 13px;
+  background: var(--white);
+  border-bottom: 1px solid var(--line);
+  font-size: 12px;
+  text-align: left;
+}
+
+tbody tr:last-child th,
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+tbody tr:hover th,
+tbody tr:hover td {
+  background: #fbfaf5;
+}
+
+.rank-heading,
+.rank-cell {
+  position: sticky;
+  z-index: 5;
+  left: 0;
+  width: 54px;
+  min-width: 54px;
+  text-align: center;
+}
+
+.model-heading,
+.model-cell {
+  position: sticky;
+  z-index: 4;
+  left: 54px;
+  width: 184px;
+  min-width: 184px;
+  box-shadow: 1px 0 0 var(--line);
+}
+
+thead .rank-heading,
+thead .model-heading {
+  z-index: 8;
+}
+
+.rank-badge {
+  display: inline-grid;
+  width: 27px;
+  height: 27px;
+  place-items: center;
+  color: var(--ink-soft);
+  background: var(--paper);
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.rank-badge.rank-1 {
+  color: #8b5b17;
+  background: var(--gold-soft);
+}
+
+.rank-badge.rank-2 {
+  color: #53636c;
+  background: var(--silver-soft);
+}
+
+.rank-badge.rank-3 {
+  color: #9d5848;
+  background: var(--coral-soft);
+}
+
+.model-cell a {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.model-cell a i {
+  color: var(--blue);
+  font-size: 9px;
+  font-style: normal;
+}
+
+.model-cell small {
+  display: block;
+  max-width: 160px;
+  margin-top: 3px;
+  overflow: hidden;
+  color: var(--ink-soft);
+  font-size: 8px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta-cell {
+  min-width: 104px;
+  color: var(--ink-soft);
+  white-space: nowrap;
+}
+
+.tag {
+  display: inline-block;
+  padding: 5px 8px;
+  border-radius: 7px;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.tag-native {
+  color: #3a609e;
+  background: var(--blue-soft);
+}
+
+.tag-cascaded {
+  color: #557741;
+  background: var(--green-soft);
+}
+
+.access-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  background: var(--green);
+  border-radius: 50%;
+}
+
+.access-web {
+  background: var(--coral);
+}
+
+.score-cell {
+  min-width: 86px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.score-cell span {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.score-cell small {
+  margin-left: 2px;
+  color: var(--ink-soft);
+  font-size: 7px;
+}
+
+.score-cell.is-sorted {
+  background: rgba(230, 239, 255, 0.5);
+}
+
+.score-cell.is-best span {
+  display: inline-block;
+  padding: 4px 7px;
+  color: #8b5b17;
+  background: var(--gold-soft);
+  border-radius: 7px;
+  font-weight: 700;
+}
+
+.score-cell.is-runner-up span {
+  color: #596b74;
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-color: #b0bdc4;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+
+.empty-row {
+  height: 180px;
+  color: var(--ink-soft);
+  text-align: center;
+}
+
+.table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  min-height: 54px;
+  padding: 10px 22px;
+  color: var(--ink-soft);
+  background: var(--paper);
+  border-top: 1px solid var(--line);
+  font-size: 9px;
+  font-weight: 600;
+}
+
+.table-footer p {
+  margin: 0;
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 15px;
+}
+
+.legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend i {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+}
+
+.legend-best {
+  background: var(--gold-soft);
+  border: 1px solid rgba(200, 139, 47, 0.4);
+}
+
+.legend-second {
+  background: var(--silver-soft);
+  border-bottom: 2px solid #b0bdc4;
+}
+
+.evidence-note {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 12px;
+  align-items: start;
+  padding: 16px 18px;
+  color: var(--ink-soft);
+  background: rgba(230, 239, 255, 0.65);
+  border: 1px solid rgba(75, 123, 236, 0.16);
+  border-radius: 14px;
+}
+
+.evidence-note > span {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  color: var(--blue);
+  background: var(--white);
+  border-radius: 50%;
+  font-family: var(--serif);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.evidence-note p {
+  margin: 1px 0 0;
+  font-size: 11px;
+}
+
+.evidence-note p + p {
+  margin-top: 7px;
+}
+
+.evidence-note strong {
+  color: var(--ink);
+}
+
+.data-error {
+  margin: 20px;
+  padding: 16px;
+  color: #8e3e2b;
+  background: var(--coral-soft);
+  border: 1px solid rgba(204, 102, 78, 0.22);
+  border-radius: 12px;
+}
+
+.data-error p {
+  margin: 4px 0 0;
+  font-size: 12px;
+}
+
+.metrics-section {
+  color: var(--paper);
+  background: var(--ink);
+}
+
+.metrics-section .section-intro {
+  margin: 0 0 5px;
+  color: rgba(255, 255, 255, 0.56);
+  font-size: 16px;
+}
+
+.metric-guide {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 13px;
+}
+
+.metric-card {
+  min-height: 270px;
+  padding: 22px;
+  color: var(--ink);
+  background: var(--white);
+  border: 2px solid transparent;
+  border-radius: 18px;
+  transition: transform 150ms ease, border-color 150ms ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-3px);
+}
+
+.metric-card.is-active {
+  background: var(--blue-soft);
+  border-color: var(--blue);
+}
+
+.metric-card > button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 30px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+
+.metric-abbr {
+  padding: 6px 9px;
+  color: var(--ink);
+  background: var(--paper);
+  border-radius: 7px;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+.metric-card.is-active .metric-abbr {
+  color: var(--blue);
+  background: var(--white);
+}
+
+.direction {
+  padding: 5px 8px;
+  border-radius: 999px;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.direction-higher {
+  color: #557741;
+  background: var(--green-soft);
+}
+
+.direction-lower {
+  color: #a34f3c;
+  background: var(--coral-soft);
+}
+
+.metric-card h3 {
+  margin-bottom: 8px;
+  font-size: 18px;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+}
+
+.metric-card > p {
+  min-height: 58px;
+  margin-bottom: 20px;
+  color: var(--ink-soft);
+  font-size: 11px;
+}
+
+.metric-card dl {
+  display: grid;
+  gap: 7px;
+  margin: 0;
+  padding-top: 15px;
+  border-top: 1px solid var(--line);
+}
+
+.metric-card dl div {
+  display: grid;
+  grid-template-columns: 65px 1fr;
+  gap: 10px;
+}
+
+.metric-card dt {
+  color: var(--ink-soft);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.metric-card dd {
+  margin: 0;
+  font-size: 9px;
+  font-weight: 600;
+  text-align: right;
+}
+
+.protocol-section {
+  background: var(--paper-deep);
+}
+
+.protocol-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.protocol-grid article {
+  min-height: 280px;
+  padding: 28px;
+  background: var(--white);
+  border: 1px solid var(--line);
+  border-radius: 20px;
+}
+
+.protocol-grid article:nth-child(2) {
+  background: var(--green-soft);
+}
+
+.protocol-grid article:nth-child(3) {
+  background: var(--blue-soft);
+}
+
+.protocol-grid article > span {
+  display: block;
+  margin-bottom: 70px;
+  color: var(--coral);
+  font-family: var(--serif);
+  font-size: 24px;
+}
+
+.protocol-grid h3 {
+  margin-bottom: 10px;
+  font-size: 22px;
+  letter-spacing: -0.03em;
+}
+
+.protocol-grid p {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 13px;
+}
+
+.submission-section {
+  background: var(--coral-soft);
+}
+
+.submission-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.85fr) minmax(430px, 1fr);
+  gap: 100px;
+  align-items: center;
+}
+
+.submission-section h2 {
+  max-width: 600px;
+  margin-bottom: 22px;
+  font-family: var(--serif);
+  font-size: clamp(42px, 5vw, 65px);
+  font-weight: 400;
+  line-height: 1.02;
+  letter-spacing: -0.04em;
+}
+
+.submission-copy {
+  max-width: 620px;
+  margin-bottom: 28px;
+  color: var(--ink-soft);
+  font-size: 16px;
+}
+
+.submission-button {
+  min-width: 220px;
+}
+
+.is-disabled {
+  cursor: default;
+  opacity: 0.56;
+  pointer-events: none;
+}
+
+.submission-steps {
+  display: grid;
+  gap: 9px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.submission-steps li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 16px;
+  padding: 19px;
+  background: rgba(255, 254, 249, 0.78);
+  border: 1px solid rgba(204, 102, 78, 0.18);
+  border-radius: 15px;
+}
+
+.submission-steps li > span {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  color: var(--coral);
+  background: var(--coral-soft);
+  border-radius: 10px;
+  font-family: var(--serif);
+  font-size: 18px;
+}
+
+.submission-steps strong {
+  font-size: 13px;
+}
+
+.submission-steps p {
+  margin: 3px 0 0;
+  color: var(--ink-soft);
+  font-size: 11px;
+}
+
+.resource-band {
+  padding: 24px 0;
+  color: var(--paper);
+  background: var(--ink);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
+}
+
+.resources {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.resource-link {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 13px;
+  min-height: 70px;
+  padding: 12px 15px;
+  background: rgba(255, 255, 255, 0.055);
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  border-radius: 13px;
+  transition: background 150ms ease, transform 150ms ease;
+}
+
+.resource-link:hover:not(.is-disabled) {
+  background: rgba(255, 255, 255, 0.09);
+  transform: translateY(-2px);
+}
+
+.resource-symbol {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  color: var(--ink);
+  background: var(--paper);
+  border-radius: 9px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.resource-link > span:nth-child(2) {
+  display: flex;
+  flex-direction: column;
+}
+
+.resource-link strong {
+  font-size: 12px;
+}
+
+.resource-link small {
+  margin-top: 2px;
+  color: rgba(255, 255, 255, 0.48);
+  font-size: 9px;
+}
+
+.resource-link > b {
+  color: rgba(255, 255, 255, 0.46);
+  font-size: 11px;
+}
+
+footer {
+  padding: 34px 0;
+  color: var(--paper);
+  background: #101815;
+}
+
+.footer-inner {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 30px;
+}
+
+.footer-brand .brand-mark {
+  color: var(--paper);
+}
+
+.footer-brand small {
+  color: rgba(255, 255, 255, 0.46);
+}
+
+.footer-inner > p {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.46);
+  font-size: 10px;
+  text-align: center;
+}
+
+.footer-inner > a {
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.noscript {
+  position: fixed;
+  z-index: 1000;
+  right: 20px;
+  bottom: 20px;
+  padding: 12px 16px;
+  color: white;
+  background: #a34f3c;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+@media (max-width: 1080px) {
+  .hero-inner {
+    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
+    gap: 52px;
+  }
+
+  .toolbar {
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(130px, 0.8fr);
+  }
+
+  .tool-button {
+    width: 100%;
+  }
+
+  .metric-guide {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 860px) {
+  .shell {
+    width: min(100% - 36px, 1320px);
+  }
+
+  .site-header nav > a:not(.nav-project) {
+    display: none;
+  }
+
+  .hero {
+    padding: 60px 0;
+  }
+
+  .hero-inner,
+  .split-heading,
+  .track-switcher,
+  .submission-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-inner {
+    gap: 40px;
+  }
+
+  .hero-copy {
+    text-align: center;
+  }
+
+  .hero h1,
+  .hero-description {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .eyebrow {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .hero-actions {
+    justify-content: center;
+  }
+
+  .stream-card {
+    width: min(100%, 600px);
+    min-height: auto;
+    margin: 0 auto;
+  }
+
+  .stats {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 28px 0;
+  }
+
+  .stats > div:nth-child(3) {
+    border-right: 0;
+  }
+
+  .section {
+    padding: 88px 0;
+  }
+
+  .split-heading {
+    align-items: start;
+    gap: 28px;
+  }
+
+  .heading-note {
+    max-width: 600px;
+  }
+
+  .track-switcher {
+    gap: 16px;
+  }
+
+  .track-switcher > p {
+    padding: 0 8px 7px;
+  }
+
+  .toolbar {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .search-control,
+  .metric-select-control {
+    grid-column: 1 / -1;
+  }
+
+  .protocol-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .protocol-grid article {
+    min-height: 220px;
+  }
+
+  .protocol-grid article > span {
+    margin-bottom: 45px;
+  }
+
+  .submission-grid {
+    gap: 52px;
+  }
+
+  .resources {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-inner {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+}
+
+@media (max-width: 600px) {
+  .shell {
+    width: min(100% - 24px, 1320px);
+  }
+
+  .site-header {
+    height: 66px;
+  }
+
+  .brand-mark {
+    width: 32px;
+    height: 32px;
+  }
+
+  .site-header .nav-project {
+    padding: 7px 11px;
+    font-size: 10px;
+  }
+
+  .hero {
+    padding: 48px 0 52px;
+  }
+
+  .hero h1 {
+    font-size: clamp(52px, 16vw, 76px);
+  }
+
+  .hero-tagline {
+    font-size: 20px;
+  }
+
+  .hero-description {
+    font-size: 14px;
+  }
+
+  .hero-actions {
+    display: grid;
+  }
+
+  .stream-card {
+    padding: 17px;
+    border-radius: 20px;
+  }
+
+  .stream-card::before {
+    display: none;
+  }
+
+  .stream-card-header {
+    gap: 15px;
+    font-size: 9px;
+  }
+
+  .signal-group {
+    padding: 20px 2px;
+  }
+
+  .update-track span {
+    width: 27px;
+    height: 27px;
+    font-size: 8px;
+  }
+
+  .stats {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .stats > div {
+    border-right: 0;
+  }
+
+  .stats > div:last-child {
+    grid-column: 1 / -1;
+  }
+
+  .section {
+    padding: 72px 0;
+  }
+
+  .section-heading {
+    margin-bottom: 40px;
+  }
+
+  .section-heading h2 {
+    font-size: 40px;
+  }
+
+  .track-switcher {
+    padding: 8px;
+  }
+
+  .track-tabs {
+    gap: 4px;
+  }
+
+  .track-tab {
+    justify-content: center;
+    min-height: 46px;
+    padding: 7px;
+  }
+
+  .track-tab b {
+    display: none;
+  }
+
+  .category-bar {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+    padding: 3px;
+  }
+
+  .category-tabs {
+    width: 100%;
+  }
+
+  .category-tab {
+    flex: 1;
+  }
+
+  .table-panel {
+    border-radius: 17px;
+  }
+
+  .table-panel-header {
+    align-items: start;
+    flex-direction: column;
+    padding: 22px 18px 18px;
+  }
+
+  .table-panel-header h3 {
+    font-size: 28px;
+  }
+
+  .ranking-label {
+    align-items: start;
+  }
+
+  .toolbar {
+    grid-template-columns: 1fr 1fr;
+    padding: 12px;
+  }
+
+  .search-control {
+    grid-column: 1 / -1;
+  }
+
+  .tool-button {
+    min-width: 0;
+  }
+
+  .model-heading,
+  .model-cell {
+    width: 155px;
+    min-width: 155px;
+  }
+
+  .model-cell small {
+    max-width: 132px;
+  }
+
+  .table-footer {
+    align-items: start;
+    flex-direction: column;
+    padding: 14px 16px;
+  }
+
+  .legend {
+    justify-content: flex-start;
+  }
+
+  .metric-guide {
+    grid-template-columns: 1fr;
+  }
+
+  .metric-card {
+    min-height: auto;
+  }
+
+  .protocol-grid article {
+    min-height: 200px;
+    padding: 23px;
+  }
+
+  .submission-section h2 {
+    font-size: 42px;
+  }
+
+  .submission-steps li {
+    padding: 15px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+  }
+}