Demo

app.js

@@ -104,12 +104,9 @@ function isExternalModel(model) {
     return !model.startsWith(OPT_ORG + "/");
 }
 
-// ─── Derive unique values ─────────────────────────────────────────────────────
+// ─── Model families & variants ───────────────────────────────────────────────
 
 let ALL_MODELS = [];
-
-// ─── Model Family Keys from config ────────────────────────────────────────────
-
 const ALL_FAMILY_KEYS = Object.keys(config.model_families || {});
 let MODEL_FAMILIES = {};
 
@@ -263,14 +260,12 @@ function availableOptions() {
     return opts;
 }
 
-// Resolve display label for a filter value
 function valueLabel(filterCfg, val) {
     if (filterCfg.value_labels && filterCfg.value_labels[val]) return filterCfg.value_labels[val];
     if (typeof val === "string") return val.charAt(0).toUpperCase() + val.slice(1);
     return String(val);
 }
 
-// Sort models: external (original) first, then optimized
 function sortModels(models) {
     return [...models].sort((a, b) => {
         const aExt = isExternalModel(a) ? 0 : 1;
@@ -279,6 +274,22 @@ function sortModels(models) {
     });
 }
 
+// ─── Shared HTML builders ────────────────────────────────────────────────────
+
+function modelCellHtml(model) {
+    const color = MODEL_COLORS[model]?.border || '#888';
+    const url = LINK_PREFIX + model;
+    return `<td class="model-cell"><span class="model-dot" style="background:${color}"></span><a href="${url}" target="_blank" rel="noopener" style="color:${color}">${model}</a></td>`;
+}
+
+function metricCellHtml(val, isBest, extraClass) {
+    const cls = extraClass ? ` class="${extraClass}"` : ' class="metric-cell"';
+    if (val === null || val === undefined) return `<td${cls}><span class="oom">OOM</span></td>`;
+    const display = typeof val === "number" ? val.toFixed(2) : (val || "—");
+    const content = isBest ? `<strong style="color: white; opacity: 0.7">${display}</strong>` : display;
+    return `<td${cls}>${content}</td>`;
+}
+
 // ─── Populate page from config ────────────────────────────────────────────────
 
 // Hero
@@ -294,7 +305,7 @@ function renderSidebar() {
         html += `<div class="sidebar-item${isActive ? " active" : ""}" data-base-family="${bf}">${bf}</div>`;
         if (isActive) {
             const variants = BASE_FAMILIES[bf].variants;
-            const showVariants = variants.length > 1 || (variants.length === 1 && variants[0] !== bf);
+            const showVariants = variants.length > 1;
             if (showVariants) {
                 variants.forEach(v => {
                     const isVariantActive = v === filters.variant;
@@ -339,8 +350,8 @@ config.filters.forEach(f => {
     filtersBar.appendChild(createFilterGroup(f.label, "filter-" + f.column));
 });
 
-// Metric filter (always last)
-filtersBar.appendChild(createFilterGroup("METRIC", "filter-metric"));
+// Metric filter — rendered inside chart section header, not in filters bar
+const metricGroup = createFilterGroup("METRIC", "filter-metric");
 
 function createFilterGroup(label, id) {
     const div = document.createElement("div");
@@ -372,13 +383,12 @@ function renderBtnGroup(container, items, activeValue) {
 function populateFilters() {
     renderSidebar();
 
-    // Metric buttons
-    const metricEl = document.getElementById("filter-metric");
+    // Metric buttons (rendered inside chart header)
+    const metricEl = metricGroup.querySelector(".btn-group");
     renderBtnGroup(metricEl,
         config.metrics.map(m => ({ value: m.column, label: m.short || m.column })),
         filters.metric
     );
-    metricEl.closest(".filter-group").style.display = (config.metrics.length <= 1 || filters[GROUP_BY] === "all") ? "none" : "";
 
     updateDependentFilters();
 }
@@ -429,7 +439,7 @@ function updateDependentFilters(resetDefaults) {
 
 // ─── Event binding ────────────────────────────────────────────────────────────
 
-filtersBar.addEventListener("click", e => {
+function handleFilterClick(e) {
     const btn = e.target.closest(".btn");
     if (!btn) return;
     const group = btn.closest(".btn-group");
@@ -438,7 +448,10 @@ filtersBar.addEventListener("click", e => {
     const key = group.id.replace("filter-", "");
     filters[key] = btn.dataset.value;
     render();
-});
+}
+
+metricGroup.addEventListener("click", handleFilterClick);
+filtersBar.addEventListener("click", handleFilterClick);
 
 // ─── Chart ────────────────────────────��───────────────────────────────────────
 
@@ -474,6 +487,35 @@ function buildChart(filtered) {
         ? scenarios
         : [{ label: "", match: {} }];
 
+    // Insert metric selector into chart section header
+    const chartHeader = document.createElement("div");
+    chartHeader.className = "chart-header";
+
+    const headerLeft = document.createElement("div");
+    headerLeft.className = "chart-header-left";
+
+    const headerTitle = document.createElement("h3");
+    headerTitle.className = "chart-heading";
+    headerTitle.textContent = groupLabel;
+    headerLeft.appendChild(headerTitle);
+
+    const headerSubtitle = document.createElement("p");
+    headerSubtitle.className = "chart-subtitle";
+    headerLeft.appendChild(headerSubtitle);
+
+    chartHeader.appendChild(headerLeft);
+
+    if (config.metrics.length > 1) {
+        const metricEl = metricGroup.querySelector(".btn-group");
+        renderBtnGroup(metricEl,
+            config.metrics.map(m => ({ value: m.column, label: m.short || m.column })),
+            filters.metric
+        );
+        chartHeader.appendChild(metricGroup);
+    }
+
+    section.appendChild(chartHeader);
+
     scenarioList.forEach(scenario => {
         // Filter rows matching this scenario
         const matchRows = gRows.filter(r =>
@@ -506,16 +548,8 @@ function buildChart(filtered) {
         const chartBlock = document.createElement("div");
         chartBlock.className = "chart-block";
 
-        const heading = document.createElement("h3");
-        heading.className = "chart-heading";
-        heading.textContent = groupLabel;
-        chartBlock.appendChild(heading);
-
         if (scenario.label) {
-            const sub = document.createElement("p");
-            sub.className = "chart-subtitle";
-            sub.textContent = scenario.label;
-            chartBlock.appendChild(sub);
+            headerSubtitle.textContent = scenario.label;
         }
 
         const wrap = document.createElement("div");
@@ -683,19 +717,13 @@ function buildTables(filtered, chartsShown) {
             html += `<tr class="${rowClass}">`;
             colDefs.forEach((c, i) => {
                 const val = r[c.key];
-                const fmCls = i === firstMetricIdx ? ' class="first-metric metric-cell"' : ' class="metric-cell"';
                 if (c.isModel) {
-                    const hfUrl = LINK_PREFIX + val;
-                    const modelColor = MODEL_COLORS[val]?.border || '#888';
-                    html += `<td class="model-cell"><span class="model-dot" style="background:${modelColor}"></span><a href="${hfUrl}" target="_blank" rel="noopener" style="color:${modelColor}">${val}</a></td>`;
-                } else if (oom) {
-                    html += `<td${c.isMetric ? fmCls : ''}><span class="oom">OOM</span></td>`;
-                } else if (c.isMetric) {
+                    html += modelCellHtml(val);
+                } else if (c.isMetric || oom) {
+                    const cls = i === firstMetricIdx ? "first-metric metric-cell" : "metric-cell";
                     const sg = groupRowKey(r);
-                    const isBest = val !== null && val !== undefined && val === bestByGroup[sg]?.[c.key];
-                    const display = val === null ? '<span class="oom">OOM</span>' : (typeof val === "number" ? val.toFixed(2) : (val ?? "—"));
-                    const modelColor = MODEL_COLORS[r[MODEL_COL]]?.border || '#888';
-                    html += `<td${fmCls}>${isBest ? '<strong style="color: white; opacity: 0.7">' + display + '</strong>' : display}</td>`;
+                    const isBest = !oom && val !== null && val !== undefined && val === bestByGroup[sg]?.[c.key];
+                    html += metricCellHtml(oom ? null : val, isBest, cls);
                 } else {
                     html += `<td>${val || "—"}</td>`;
                 }
@@ -737,6 +765,29 @@ function buildExperimentSetup() {
     });
 }
 
+// ─── Demo Section ─────────────────────────────────────────────────────────────
+
+let currentDemoKey = null;
+
+async function buildDemo() {
+    const section = document.getElementById("demo-section");
+    const familyCfg = config.model_families?.[activeFamilyKey()] || {};
+    const demoData = familyCfg.demo;
+    const key = activeFamilyKey();
+    if (!demoData) {
+        section.innerHTML = "";
+        currentDemoKey = null;
+        return;
+    }
+    // Skip rebuild if demo is already rendered for this family
+    if (key === currentDemoKey) return;
+    currentDemoKey = key;
+    section.innerHTML = "";
+    if (typeof renderDemo === "function") {
+        await renderDemo(demoData, section, OPT_ORG, familyCfg.data_file, MODEL_COLORS);
+    }
+}
+
 // ─── Accuracy Table ────────────────────────────────────────────────────��──────
 
 async function buildAccuracyTable() {
@@ -767,37 +818,38 @@ async function buildAccuracyTable() {
         if (vals.length) best[col] = Math.max(...vals);
     });
 
-    // Fixed model column
+    // Build metric cells for a row
+    function accMetricCells(r) {
+        return metricCols.map(col => {
+            const val = parseFloat(r[col]);
+            const isBest = !isNaN(val) && val === best[col];
+            return metricCellHtml(isNaN(val) ? r[col] : val, isBest);
+        }).join("");
+    }
+
+    const metricHeaders = metricCols.map(h => `<th class="metric-cell">${h}</th>`).join("");
+
+    // Fixed model column (desktop)
     let fixedHtml = `<table><thead><tr><th>MODEL</th></tr></thead><tbody>`;
-    rows.forEach(r => {
-        const model = r[modelCol];
-        const modelColor = MODEL_COLORS[model]?.border || '#888';
-        fixedHtml += `<tr><td class="model-cell"><span class="model-dot" style="background:${modelColor}"></span><a href="${LINK_PREFIX}${model}" target="_blank" rel="noopener" style="color:${modelColor}">${model}</a></td></tr>`;
-    });
+    rows.forEach(r => { fixedHtml += `<tr>${modelCellHtml(r[modelCol])}</tr>`; });
     fixedHtml += `</tbody></table>`;
 
-    // Scrollable metric columns
-    let scrollHtml = `<table><thead><tr>`;
-    scrollHtml += metricCols.map(h => `<th class="metric-cell">${h}</th>`).join("");
-    scrollHtml += `</tr></thead><tbody>`;
-    rows.forEach(r => {
-        scrollHtml += `<tr>`;
-        metricCols.forEach(col => {
-            const val = parseFloat(r[col]);
-            const isBest = !isNaN(val) && val === best[col];
-            const display = isNaN(val) ? (r[col] || "—") : val.toFixed(2);
-            scrollHtml += `<td class="metric-cell">${isBest ? '<strong style="color: white; opacity: 0.7">' + display + '</strong>' : display}</td>`;
-        });
-        scrollHtml += `</tr>`;
-    });
+    // Scrollable metric columns (desktop)
+    let scrollHtml = `<table><thead><tr>${metricHeaders}</tr></thead><tbody>`;
+    rows.forEach(r => { scrollHtml += `<tr>${accMetricCells(r)}</tr>`; });
     scrollHtml += `</tbody></table>`;
 
+    // Combined single table (mobile — fully scrollable)
+    let combinedHtml = `<table><thead><tr><th>MODEL</th>${metricHeaders}</tr></thead><tbody>`;
+    rows.forEach(r => { combinedHtml += `<tr>${modelCellHtml(r[modelCol])}${accMetricCells(r)}</tr>`; });
+    combinedHtml += `</tbody></table>`;
+
     const accTitle = familyCfg.accuracy_title || config.accuracy_title || "Accuracy";
     const accUrl = familyCfg.accuracy_url;
     const titleHtml = accUrl
         ? `<h3><a href="${accUrl}" target="_blank" rel="noopener" class="acc-title-link">${accTitle}</a></h3>`
         : `<h3>${accTitle}</h3>`;
-    card.innerHTML = `${titleHtml}<div class="table-split"><div class="table-split-fixed">${fixedHtml}</div><div class="table-split-scroll">${scrollHtml}</div></div>`;
+    card.innerHTML = `${titleHtml}<div class="table-split"><div class="table-split-fixed">${fixedHtml}</div><div class="table-split-scroll">${scrollHtml}</div></div><div class="table-scroll table-scroll-mobile">${combinedHtml}</div>`;
     section.appendChild(card);
 }
 
@@ -818,13 +870,8 @@ function render() {
 
     buildChart(filtered);
     const chartsShown = charts.length > 0;
-    // Toggle metric selector visibility
-    const metricEl = document.getElementById("filter-metric");
-    if (metricEl) {
-        metricEl.closest(".filter-group").style.display =
-            (config.metrics.length <= 1 || !chartsShown) ? "none" : "";
-    }
     buildTables(filtered, chartsShown);
+    buildDemo();
     buildAccuracyTable();
     buildExperimentSetup();
 }

config.json

@@ -141,7 +141,70 @@
       "default_device": "orin_nano",
       "accuracy_file": "data/acc-Cosmos-Reason2.csv",
       "accuracy_title": "Physical AI Bench (PAI-Bench)",
-      "accuracy_url": "https://huggingface.co/spaces/shi-labs/physical-ai-bench-leaderboard"
+      "accuracy_url": "https://huggingface.co/spaces/shi-labs/physical-ai-bench-leaderboard",
+      "demo": {
+        "title": "Output Examples",
+        "benchmark_match": {
+          "type": "video",
+          "batch": "1",
+          "res": "1280x720",
+          "fps": "4"
+        },
+        "clips": [
+          {
+            "video": "https://nvidia-cosmos.github.io/cosmos-cookbook/gallery/vs_assets/clip_1_short.mp4",
+            "label": "Automotive Description",
+            "prompt": "Describe this video in detail.",
+            "inference_setup": "1280x720 · 12 Frames",
+            "citation": "Video source: Wagwani, R., Matveiev, N., Bapst, J., & Gu, J. (2025). Autonomous Vehicle Domain Adaptation Gallery. In NVIDIA Cosmos Cookbook.",
+            "citation_url": "https://nvidia-cosmos.github.io/cosmos-cookbook/gallery/av_inference.html",
+            "outputs": [
+              {
+                "model": "nvidia/Cosmos-Reason2-2B",
+                "text": "The video captures a scenic highway winding through a rural landscape, with multiple lanes of traffic flowing smoothly. Vehicles of various colors and models are seen traveling in both directions along the road. On the left side of the highway, a white pickup truck is followed by a red sedan, while on the right side, a white sedan is seen driving away from the camera. Further down the road, additional cars can be observed, including a blue hatchback and a red SUV, all maintaining a steady pace. The highway curves gently to the right, bordered by patches of dry grass and sparse trees, suggesting it might be late autumn or early spring. The sky above is clear and bright, indicating favorable weather conditions. On the right side of the highway, there is a pedestrian crossing marked by a yellow and black striped barrier, ensuring safety for walkers. In the distance, a lone figure can be seen walking along the sidewalk parallel to the road, adding a sense of scale and tranquility to the scene. The overall atmosphere is calm and orderly, with no signs of congestion or accidents."
+              },
+              {
+                "model": "embedl/Cosmos-Reason2-2B-W4A16-Edge2-FlashHead",
+                "text": "The video captures a dynamic scene of a multi-laned highway winding through a wooded area. The road is divided into two lanes in each direction, separated by a median strip. Several vehicles are traveling along the highway, including a white sedan in the rightmost lane, a red hatchback in the leftmost lane, and a white pickup truck further ahead in the same lane as the hatchback. Additional cars can be seen further down the road, moving in both directions. The surrounding landscape features bare trees and patches of grass, indicative of a winter or early spring season. The road markings are clearly visible, with dashed white lines marking the edges of the lanes and solid yellow lines delineating the lanes. On the right side of the road, there is a warning sign with black and yellow stripes, indicating caution for drivers. The sky is clear, suggesting favorable weather conditions for driving."
+              }
+            ]
+          },
+          {
+            "video": "https://nvidia-cosmos.github.io/cosmos-cookbook/gallery/assets/kitchen_oranges_input.mp4",
+            "label": "Instruction Understanding",
+            "prompt": "The robot in the video was given the instruction - store all fruit in the big bowl. Has it successfully completed the task specified in the instruction? Explain your answer in detail.",
+            "inference_setup": "1280x720 · 32 Frames",
+            "citation": "Video source: Wagwani, R., Matveiev, N., Bapst, J., & Gu, J. (2025). Autonomous Vehicle Domain Adaptation Gallery. In NVIDIA Cosmos Cookbook.",
+            "citation_url": "https://nvidia-cosmos.github.io/cosmos-cookbook/gallery/av_inference.html",
+            "outputs": [
+              {
+                "model": "nvidia/Cosmos-Reason2-2B",
+                "text": "No, the robot has not successfully completed the task. The instruction was to store all fruit in the big bowl, but the robot only moved one fruit into the bowl. There are still other fruits on the countertop that have not been moved into the bowl. Additionally, the robot's actions appear somewhat clumsy and inefficient."
+              },
+              {
+                "model": "embedl/Cosmos-Reason2-2B-W4A16-Edge2-FlashHead",
+                "text": "No, the robot has not successfully completed the task. The instruction was to store all fruit in the big bowl, but the video shows that there are still other fruits on the plate and counter. Additionally, the robot's actions involve moving objects around rather than storing them in the bowl."
+              }
+            ]
+          },
+          {
+            "video": "https://huggingface.co/datasets/embedl/documentation-images/resolve/main/Edge-Inference-Benchmarks/aerial_drone_view.mp4",
+            "label": "Search and Rescue",
+            "prompt": "Mission: Inspect the drone video for any people or animals that clearly need rescue. Answer format: 1. Rescue needed: Y/N; 2. Description: Describe the scene in detail, explain why rescue is or is not needed.",
+            "inference_setup": "1280x720 · 24 Frames",
+            "outputs": [
+              {
+                "model": "nvidia/Cosmos-Reason2-2B",
+                "text": "1. Rescue needed: N 2. The scene shows a group of people gathered around a table on a grassy field near a road, with a vehicle parked nearby. Individuals appear to be engaged in an activity, possibly a meeting or briefing, with some standing and others seated. There are no visible signs of distress, emergencies, or animals requiring rescue. The environment is calm, and the group seems to be cooperating peacefully."
+              },
+              {
+                "model": "embedl/Cosmos-Reason2-2B-W4A16-Edge2-FlashHead",
+                "text": "1. Rescue needed: N; 2. The video shows an aerial view of a serene landscape with a lake, green fields, and a road with a few vehicles and people. There are no visible emergencies, accidents, or animals in distress. The scene appears peaceful and undisturbed."
+              }
+            ]
+          }
+        ]
+      }
     },
     "Qwen3.5": {
       "data_file": "data/Qwen3.5.csv",

demo/demo.css

@@ -0,0 +1,249 @@
+/* ── Output Example Demo ──────────────────────────────── */
+.demo-section {
+    margin: 0 0 var(--space-xl);
+}
+
+/* ── Toggle button ───────────────────────────────────── */
+.demo-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    background: transparent;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text-muted);
+    font-family: inherit;
+    font-size: var(--text-md);
+    font-weight: 500;
+    padding: var(--space-sm) var(--space-md);
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.demo-toggle:hover {
+    color: var(--text);
+    background: var(--btn-hover-bg);
+}
+
+.demo-toggle.active {
+    color: var(--teal);
+    border-color: var(--btn-active-border);
+    background: var(--btn-active-bg);
+}
+
+.demo-toggle-arrow {
+    display: inline-block;
+    transition: transform 0.2s;
+    font-size: var(--text-sm);
+}
+
+.demo-toggle.active .demo-toggle-arrow {
+    transform: rotate(90deg);
+}
+
+/* ── Collapsible content ─────────────────────────────── */
+.demo-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s ease;
+}
+
+.demo-content.open {
+    grid-template-rows: 1fr;
+}
+
+.demo-content-inner {
+    overflow: hidden;
+}
+
+/* ── Card ────────────────────────────────────────────── */
+.demo-card {
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    padding: var(--space-lg);
+    margin-top: var(--space-md);
+    position: relative;
+    overflow: hidden;
+}
+
+/* ── Title row ──────────────────────────────────────── */
+.demo-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-md);
+    margin-bottom: var(--space-sm);
+}
+
+.demo-title-row h3 {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 0;
+}
+
+.demo-title-left {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-md);
+}
+
+.demo-clip-setup {
+    font-size: var(--text-md);
+    font-weight: 400;
+    color: var(--text-dim);
+}
+
+/* ── Device selector ────────────────────────────────── */
+.demo-device-selector {
+    display: flex;
+    justify-content: center;
+    margin-bottom: var(--space-md);
+}
+
+/* ── Video with overlay arrows ───────────────────────── */
+.demo-video-wrap {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    margin-bottom: var(--space-sm);
+}
+
+.demo-video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: opacity 0.3s ease;
+}
+
+.demo-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+    border: none;
+    border-radius: 50%;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+    font-family: inherit;
+}
+
+.demo-arrow-left {
+    left: var(--space-md);
+}
+
+.demo-arrow-right {
+    right: var(--space-md);
+}
+
+.demo-arrow:hover:not(:disabled) {
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+}
+
+.demo-arrow:disabled {
+    opacity: 0.25;
+    cursor: default;
+}
+
+/* ── Card content ────────────────────────────────────── */
+.demo-prompt {
+    font-size: var(--text-md);
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin-bottom: var(--space-md);
+}
+
+.demo-prompt strong {
+    color: var(--text);
+}
+
+.demo-citation {
+    font-size: var(--text-sm);
+    color: var(--text-dim);
+    margin-top: var(--space-md);
+    line-height: 1.5;
+}
+
+.demo-citation a {
+    color: var(--text-dim);
+    text-decoration: underline;
+}
+
+.demo-citation a:hover {
+    color: var(--text-muted);
+}
+
+/* ── Side-by-side outputs ────────────────────────────── */
+.demo-outputs {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-md);
+}
+
+.demo-output {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: var(--space-md);
+    line-height: 1.6;
+    font-size: var(--text-md);
+    color: var(--text);
+}
+
+.demo-output-model {
+    display: block;
+    font-size: var(--text-md);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-dim);
+    margin-bottom: var(--space-sm);
+}
+
+.demo-output-tps {
+    display: block;
+    font-size: var(--text-md);
+    font-weight: 700;
+    color: var(--text-dim);
+    margin-bottom: var(--space-sm);
+}
+
+.demo-output-tps.oom {
+    color: var(--red);
+}
+
+.demo-output-text {
+    color: var(--text-muted);
+    font-size: var(--text-md);
+}
+
+/* ── Responsive ──────────────────────────────────────── */
+@media (max-width: 768px) {
+    .demo-outputs {
+        grid-template-columns: 1fr;
+    }
+
+    .demo-title-row {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .demo-arrow {
+        width: 28px;
+        height: 28px;
+        font-size: var(--text-sm);
+    }
+}

demo/demo.js

@@ -0,0 +1,448 @@
+// ── Output Example Demo renderer ─────────────────────────────────────────────
+// Supports multiple clips with left/right arrow navigation, device selector,
+// and streaming text effect at real TPS speed.
+
+const DEMO_DEVICE_LABELS = {
+    orin_nano_super: "Jetson Orin Nano Super",
+    agx_orin: "Jetson AGX Orin",
+    agx_thor: "Jetson AGX Thor",
+};
+
+const DEMO_DEFAULT_DEVICE = "agx_orin";
+const DEMO_TOKENS_PER_WORD = 1.33;
+
+// ── CSV parser (minimal, demo-only) ─────────────────────────────────────────
+
+function demoParseCsv(text) {
+    const lines = text.replace(/\r/g, "").trim().split("\n");
+    const headers = lines[0].split(",");
+    return lines.slice(1).map(line => {
+        const vals = line.split(",");
+        const row = {};
+        headers.forEach((h, i) => { row[h] = (vals[i] || "").trim(); });
+        return row;
+    });
+}
+
+// ── Look up TPS from benchmark data ─────────────────────────────────────────
+
+function demoLookupTps(csvRows, modelName, device, matchCriteria) {
+    const row = csvRows.find(r =>
+        r.model === modelName &&
+        r.device === device &&
+        Object.entries(matchCriteria).every(([col, val]) => r[col] === val)
+    );
+    if (row) {
+        if (!row.tps || row.tps.toUpperCase() === "OOM") return { found: true, tps: null };
+        return { found: true, tps: parseFloat(row.tps) };
+    }
+    const oomRow = csvRows.find(r =>
+        r.model === modelName &&
+        r.device === device &&
+        r.tps && r.tps.toUpperCase() === "OOM"
+    );
+    if (oomRow) return { found: true, tps: null };
+    return { found: false, tps: null };
+}
+
+// ── Determine available devices from benchmark data ─────────────────────────
+
+function demoAvailableDevices(csvRows, models, matchCriteria) {
+    const deviceSet = new Set();
+    csvRows.forEach(r => {
+        if (!models.includes(r.model)) return;
+        if (!Object.entries(matchCriteria).every(([col, val]) => r[col] === val)) return;
+        if (r.tps && r.tps.toUpperCase() !== "OOM") deviceSet.add(r.device);
+    });
+    return Object.keys(DEMO_DEVICE_LABELS).filter(d => deviceSet.has(d));
+}
+
+// ── Streaming text animation ────────────────────────────────────────────────
+
+function demoStreamText(element, fullText, tps) {
+    const handle = { _tid: null, cancel() { clearTimeout(this._tid); } };
+    element.textContent = "";
+    if (!tps || tps <= 0) {
+        element.textContent = fullText;
+        return handle;
+    }
+    const words = fullText.split(/(\s+)/);
+    const delayMs = 1000 / (tps / DEMO_TOKENS_PER_WORD);
+    let idx = 0;
+
+    function tick() {
+        if (idx < words.length) {
+            element.textContent += words[idx];
+            idx++;
+            handle._tid = setTimeout(tick, delayMs);
+        }
+    }
+    tick();
+    return handle;
+}
+
+// ── Pre-calculate height for an output box to prevent layout shift ──────────
+
+function demoPreCalcHeight(box, textEl, fullText) {
+    textEl.textContent = fullText;
+    const h = box.offsetHeight;
+    box.style.minHeight = h + "px";
+    textEl.textContent = "";
+}
+
+// ── Main render function ────────────────────────────────────────────────────
+
+async function renderDemo(data, container, optimizedOrg, dataFile, modelColors) {
+    if (!data) return;
+
+    // Normalise: support both old single-clip format and new clips array
+    let clips = data.clips;
+    if (!clips) {
+        clips = [{
+            video: data.video,
+            label: data.title,
+            prompt: data.prompt,
+            inference_setup: data.inference_setup,
+            citation: data.citation,
+            citation_url: data.citation_url,
+            outputs: data.outputs,
+        }];
+    }
+    if (!clips.length) return;
+
+    const matchCriteria = data.benchmark_match || {};
+
+    // Collect all model names across clips
+    const allModelNames = [...new Set(clips.flatMap(c => (c.outputs || []).map(o => o.model)))];
+
+    // Load benchmark CSV
+    let csvRows = [];
+    if (dataFile) {
+        try {
+            const csvResp = await fetch(dataFile);
+            if (csvResp.ok) csvRows = demoParseCsv(await csvResp.text());
+        } catch { /* proceed without */ }
+    }
+
+    const devices = csvRows.length
+        ? demoAvailableDevices(csvRows, allModelNames, matchCriteria)
+        : [];
+
+    let selectedDevice = devices.includes(DEMO_DEFAULT_DEVICE)
+        ? DEMO_DEFAULT_DEVICE
+        : (devices[0] || DEMO_DEFAULT_DEVICE);
+
+    let currentClipIdx = 0;
+    let activeStreams = [];
+
+    // ── Build DOM skeleton ──────────────────────────────────────────────
+
+    const section = document.createElement("div");
+    section.className = "demo-section";
+
+    // Toggle button
+    const toggle = document.createElement("button");
+    toggle.className = "demo-toggle";
+    toggle.innerHTML = '<span class="demo-toggle-arrow">&#9654;</span> Show Demo';
+
+    // Collapsible wrapper
+    const content = document.createElement("div");
+    content.className = "demo-content";
+    const inner = document.createElement("div");
+    inner.className = "demo-content-inner";
+
+    const card = document.createElement("div");
+    card.className = "demo-card";
+
+    // Title row: h3 + device selector
+    const titleRow = document.createElement("div");
+    titleRow.className = "demo-title-row";
+
+    const titleLeft = document.createElement("div");
+    titleLeft.className = "demo-title-left";
+
+    const h3 = document.createElement("h3");
+    titleLeft.appendChild(h3);
+
+    const clipSetup = document.createElement("span");
+    clipSetup.className = "demo-clip-setup";
+    titleLeft.appendChild(clipSetup);
+
+    titleRow.appendChild(titleLeft);
+
+    const deviceSelector = document.createElement("div");
+    deviceSelector.className = "demo-device-selector";
+
+    if (devices.length > 1) {
+        const deviceGroup = document.createElement("div");
+        deviceGroup.className = "btn-group";
+
+        function renderDeviceButtons() {
+            deviceGroup.innerHTML = "";
+            devices.forEach(dev => {
+                const btn = document.createElement("button");
+                btn.className = "btn" + (dev === selectedDevice ? " active" : "");
+                btn.dataset.value = dev;
+                btn.textContent = DEMO_DEVICE_LABELS[dev] || dev;
+                deviceGroup.appendChild(btn);
+            });
+        }
+        renderDeviceButtons();
+
+        deviceGroup.addEventListener("click", e => {
+            const btn = e.target.closest(".btn");
+            if (!btn) return;
+            const newDevice = btn.dataset.value;
+            if (newDevice === selectedDevice) return;
+            selectedDevice = newDevice;
+            renderDeviceButtons();
+            renderOutputs();
+        });
+
+        deviceSelector.appendChild(deviceGroup);
+    }
+
+    card.appendChild(titleRow);
+
+    // Video with overlay arrows
+    const videoWrap = document.createElement("div");
+    videoWrap.className = "demo-video-wrap";
+
+    function makeVideoEl() {
+        const v = document.createElement("video");
+        v.loop = true;
+        v.muted = true;
+        v.playsInline = true;
+        v.preload = "auto";
+        v.className = "demo-video";
+        return v;
+    }
+
+    let videoA = makeVideoEl();
+    let videoB = makeVideoEl();
+    videoB.style.opacity = "0";
+    videoWrap.appendChild(videoA);
+    videoWrap.appendChild(videoB);
+
+    const arrowLeft = document.createElement("button");
+    arrowLeft.className = "demo-arrow demo-arrow-left";
+    arrowLeft.innerHTML = "&#9664;";
+    arrowLeft.setAttribute("aria-label", "Previous clip");
+
+    const arrowRight = document.createElement("button");
+    arrowRight.className = "demo-arrow demo-arrow-right";
+    arrowRight.innerHTML = "&#9654;";
+    arrowRight.setAttribute("aria-label", "Next clip");
+
+    videoWrap.appendChild(arrowLeft);
+    videoWrap.appendChild(arrowRight);
+    card.appendChild(videoWrap);
+
+    let isFirstClip = true;
+
+    // Device selector (centered under video)
+    card.appendChild(deviceSelector);
+
+    // Prompt (full width)
+    const promptEl = document.createElement("div");
+    promptEl.className = "demo-prompt";
+    card.appendChild(promptEl);
+
+    // Outputs grid
+    const grid = document.createElement("div");
+    grid.className = "demo-outputs";
+    card.appendChild(grid);
+
+    // Citation
+    const citeEl = document.createElement("p");
+    citeEl.className = "demo-citation";
+    card.appendChild(citeEl);
+
+    // ── Arrow visibility ────────────────────────────────────────────────
+
+    function updateArrows() {
+        const showArrows = clips.length > 1;
+        arrowLeft.style.display = showArrows ? "" : "none";
+        arrowRight.style.display = showArrows ? "" : "none";
+        arrowLeft.disabled = false;
+        arrowRight.disabled = false;
+    }
+
+    arrowLeft.addEventListener("click", () => {
+        currentClipIdx = (currentClipIdx - 1 + clips.length) % clips.length;
+        renderClip();
+    });
+    arrowRight.addEventListener("click", () => {
+        currentClipIdx = (currentClipIdx + 1) % clips.length;
+        renderClip();
+    });
+
+    // ── Render current clip ───────────────────────────────────────────��─
+
+    function cancelStreams() {
+        activeStreams.forEach(s => s.cancel());
+        activeStreams = [];
+    }
+
+    function renderOutputs() {
+        cancelStreams();
+        grid.innerHTML = "";
+        const clip = clips[currentClipIdx];
+        const outputs = clip.outputs || [];
+
+        outputs.forEach(out => {
+            const color = modelColors && modelColors[out.model];
+            const borderColor = color ? color.border : null;
+            const box = document.createElement("div");
+            box.className = "demo-output";
+            if (borderColor) box.style.borderColor = borderColor;
+
+            const modelEl = document.createElement("span");
+            modelEl.className = "demo-output-model";
+            modelEl.textContent = out.model;
+            if (borderColor) modelEl.style.color = borderColor;
+            box.appendChild(modelEl);
+
+            const tpsEl = document.createElement("span");
+            tpsEl.className = "demo-output-tps";
+            if (borderColor) tpsEl.style.color = borderColor;
+            box.appendChild(tpsEl);
+
+            const textEl = document.createElement("span");
+            textEl.className = "demo-output-text";
+            box.appendChild(textEl);
+
+            grid.appendChild(box);
+
+            // Look up TPS
+            let tps = null;
+            if (csvRows.length) {
+                const lookup = demoLookupTps(csvRows, out.model, selectedDevice, matchCriteria);
+                tps = lookup.found ? lookup.tps : (out.tps || null);
+            } else {
+                tps = out.tps || null;
+            }
+
+            if (tps != null) {
+                tpsEl.textContent = tps.toFixed(2) + " Tokens / sec";
+                tpsEl.classList.remove("oom");
+                textEl.style.display = "";
+                demoPreCalcHeight(box, textEl, out.text);
+                const handle = demoStreamText(textEl, out.text, tps);
+                activeStreams.push(handle);
+            } else {
+                tpsEl.textContent = "OOM";
+                tpsEl.classList.add("oom");
+                tpsEl.style.color = "";
+                textEl.style.display = "none";
+                box.style.minHeight = "";
+            }
+        });
+    }
+
+    function renderClip() {
+        const clip = clips[currentClipIdx];
+
+        // Title: clip label + setup details
+        h3.textContent = clip.label || data.title || "Output Examples";
+        clipSetup.textContent = clip.inference_setup || "";
+        clipSetup.style.display = clip.inference_setup ? "" : "none";
+
+        // Video — crossfade: keep old visible, load new behind, fade when frame ready
+        if (clip.video) {
+            videoWrap.style.display = "";
+            if (isFirstClip) {
+                // First clip: just load directly into videoA
+                videoA.src = clip.video;
+                videoA.style.opacity = "1";
+                videoA.load();
+                videoA.addEventListener("loadeddata", () => videoA.play(), { once: true });
+                isFirstClip = false;
+            } else {
+                // Crossfade: videoA is the old (visible), videoB gets the new source
+                videoB.src = clip.video;
+                videoB.style.opacity = "0";
+                videoB.load();
+
+                videoB.addEventListener("loadeddata", function onLoaded() {
+                    videoB.removeEventListener("loadeddata", onLoaded);
+                    videoB.play();
+
+                    // Wait for actual frame render before fading
+                    const startFade = () => {
+                        videoB.style.opacity = "1";
+                        videoA.style.opacity = "0";
+                        // After transition, pause old and swap roles
+                        setTimeout(() => {
+                            videoA.pause();
+                            videoA.removeAttribute("src");
+                            videoA.load();
+                            // Swap roles
+                            const tmp = videoA;
+                            videoA = videoB;
+                            videoB = tmp;
+                        }, 300);
+                    };
+
+                    if (videoB.requestVideoFrameCallback) {
+                        videoB.requestVideoFrameCallback(startFade);
+                    } else {
+                        startFade();
+                    }
+                });
+            }
+        } else {
+            videoWrap.style.display = "none";
+        }
+
+        // Prompt
+        if (clip.prompt) {
+            promptEl.innerHTML = "<strong>Prompt:</strong> " + clip.prompt.replace(/\n/g, "<br>");
+            promptEl.style.display = "";
+        } else {
+            promptEl.style.display = "none";
+        }
+
+        // Citation
+        if (clip.citation) {
+            if (clip.citation_url) {
+                citeEl.innerHTML = clip.citation.replace(
+                    /Autonomous Vehicle Domain Adaptation Gallery/,
+                    `<a href="${clip.citation_url}" target="_blank" rel="noopener">Autonomous Vehicle Domain Adaptation Gallery</a>`
+                );
+            } else {
+                citeEl.textContent = clip.citation;
+            }
+            citeEl.style.display = "";
+        } else {
+            citeEl.style.display = "none";
+        }
+
+        // Outputs
+        renderOutputs();
+
+        updateArrows();
+    }
+
+    // ── Toggle open/close ───────────────────────────────────────────────
+
+    toggle.addEventListener("click", () => {
+        const isOpen = content.classList.toggle("open");
+        toggle.classList.toggle("active", isOpen);
+        toggle.innerHTML = isOpen
+            ? '<span class="demo-toggle-arrow">&#9654;</span> Hide Demo'
+            : '<span class="demo-toggle-arrow">&#9654;</span> Show Demo';
+
+        if (isOpen) {
+            renderClip();
+        } else {
+            cancelStreams();
+        }
+    });
+
+    inner.appendChild(card);
+    content.appendChild(inner);
+    section.appendChild(toggle);
+    section.appendChild(content);
+    container.appendChild(section);
+}

index.html

@@ -4,7 +4,9 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Edge Inference Benchmarks — Embedl</title>
+    <link rel="stylesheet" href="palette.css"/>
     <link rel="stylesheet" href="style.css"/>
+    <link rel="stylesheet" href="demo/demo.css"/>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 </head>
 <body>
@@ -31,6 +33,9 @@
             <!-- Accuracy Table -->
             <section id="accuracy-section"></section>
 
+            <!-- Demo Section -->
+            <section id="demo-section"></section>
+
             <!-- Filters -->
             <section class="filters-bar" id="filters-bar"></section>
 
@@ -88,6 +93,7 @@
     </div>
 </footer>
 
+<script src="demo/demo.js"></script>
 <script src="app.js"></script>
 </body>
 </html>

palette.css

@@ -0,0 +1,74 @@
+/* ── Palette & Design Tokens ──────────────────────────── */
+:root {
+    /* Colors */
+    --bg: #0B1527;
+    --bg-opaque: rgba(11, 21, 39, 0.45);
+    --teal: #58b1c3;
+    --green: #6fcf97;
+    --red: #ff4d6d;
+    --pink: #ff6ec7;
+    --purple: #9b5de5;
+    --blue: #007F9E;
+    --neutral: #98A6AF;
+    --text: #e8e8e8;
+    --text-muted: #8899aa;
+    --text-dim: #5a6a7a;
+    --border: rgba(255, 255, 255, 0.15);
+    --btn-hover-bg: rgba(255, 255, 255, 0.03);
+    --btn-active-bg: rgba(88, 177, 195, 0.12);
+    --btn-active-border: rgba(88, 177, 195, 0.3);
+    --row-hover-bg: rgba(255, 255, 255, 0.02);
+    --row-border: rgba(255, 255, 255, 0.03);
+    --code-bg: rgba(88, 177, 195, 0.1);
+    --tooltip-bg: #2c3e50;
+    --tooltip-text: #f1f1f1;
+    --tooltip-body: #d9d9d9;
+
+    /* Typography scale */
+    --text-sm: 0.75rem;   /* secondary text, small UI */
+    --text-md: 1rem;      /* body text, subtitles, descriptions */
+    --text-lg: 1.25rem;   /* section headings */
+
+    /* Spacing scale */
+    --space-xs: 0.25rem;  /* tiny gaps: legend rows, label margins */
+    --space-sm: 0.5rem;   /* small: icon gaps, dot gaps, table cell vertical */
+    --space-ms: 0.75rem;  /* medium-small: table cell horizontal, sidebar padding */
+    --space-md: 1rem;     /* standard: flex gaps, element margins */
+    --space-lg: 1.5rem;   /* section internal spacing */
+    --space-xl: 2rem;     /* major section padding */
+    --space-2xl: 3rem;    /* large section breaks */
+}
+
+/* ── Reset & Base Typography ─────────────────────────── */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 20px;
+    background: radial-gradient(
+            60rem 40rem at 50% -45px,
+            rgba(0, 226, 213, 0.35),
+            rgba(18, 208, 254, 0.25) 30%,
+            transparent 70%
+    ), var(--bg);
+}
+
+body {
+    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    color: var(--text);
+    font-size: var(--text-md);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
+}
+
+code {
+    background: var(--code-bg);
+    color: var(--teal);
+    padding: 0.15em 0.45em;
+    border-radius: 4px;
+    font-size: 0.95em;
+}

style.css

@@ -1,64 +1,3 @@
-/* ── Palette ──────────────────────────────────────────── */
-:root {
-    --bg: #0B1527;
-    --bg-opaque: rgba(11, 21, 39, 0.45);
-    --bg-surface: #1a1a2e;
-    --teal: #58b1c3;
-    --green: #6fcf97;
-    --red: #ff4d6d;
-    --pink: #ff6ec7;
-    --purple: #9b5de5;
-    --blue: #007F9E;
-    --neutral: #98A6AF;
-    --text: #e8e8e8;
-    --text-muted: #8899aa;
-    --text-dim: #5a6a7a;
-    --border: rgba(255, 255, 255, 0.15);
-    --btn-hover-bg: rgba(255, 255, 255, 0.03);
-    --btn-active-bg: rgba(88, 177, 195, 0.12);
-    --btn-active-border: rgba(88, 177, 195, 0.3);
-    --sidebar-active-bg: rgba(88, 177, 195, 0.04);
-    --row-hover-bg: rgba(255, 255, 255, 0.02);
-    --row-border: rgba(255, 255, 255, 0.03);
-    --code-bg: rgba(88, 177, 195, 0.1);
-    --tooltip-bg: #2c3e50;
-    --tooltip-text: #f1f1f1;
-    --tooltip-body: #d9d9d9;
-}
-
-/* ── Reset & Base ─────────────────────────────────────── */
-*, *::before, *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-html {
-    font-size: 16px;
-    background: radial-gradient(
-            60rem 40rem at 50% -45px,
-            rgba(0, 226, 213, 0.35),
-            rgba(18, 208, 254, 0.25) 30%,
-            transparent 70%
-    ), var(--bg);
-}
-
-body {
-    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    color: var(--text);
-    line-height: 1.6;
-    -webkit-font-smoothing: antialiased;
-    position: relative;
-}
-
-code {
-    background: var(--code-bg);
-    color: var(--teal);
-    padding: 0.15em 0.45em;
-    border-radius: 4px;
-    font-size: 0.95em;
-}
-
 /* ── Page Layout ─────────────────────────────────────── */
 .page {
     position: relative;
@@ -66,7 +5,7 @@ code {
     display: flex;
     flex-direction: row;
     min-height: 100vh;
-    max-width: 1440px;
+    max-width: 1640px;
     margin: 0 auto;
 }
 
@@ -75,7 +14,7 @@ code {
     width: 280px;
     max-width: 300px;
     flex-shrink: 0;
-    padding: 2rem 0;
+    padding: var(--space-xl) 0;
     position: sticky;
     top: 0;
     height: 100vh;
@@ -84,7 +23,7 @@ code {
 
 .sidebar-logo {
     display: block;
-    padding: 0 1.25rem 3.25rem;
+    padding: 0 var(--space-md) var(--space-2xl);
 }
 
 .sidebar-nav {
@@ -94,8 +33,8 @@ code {
 
 .sidebar-item {
     display: block;
-    padding: 0.5rem 1.25rem;
-    font-size: 1.25rem;
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--text-lg);
     font-weight: 400;
     color: var(--text-dim);
     text-decoration: none;
@@ -115,8 +54,8 @@ code {
 
 .sidebar-variant {
     display: block;
-    padding: 0.35rem 1.25rem 0.35rem 2.25rem;
-    font-size: 1.1rem;
+    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-xl);
+    font-size: var(--text-md);
     font-weight: 400;
     color: var(--text-dim);
     cursor: pointer;
@@ -140,15 +79,14 @@ code {
 }
 
 .main-inner {
-    max-width: 1100px;
     width: 100%;
-    padding: 0 2rem 2rem;
+    padding: 0 var(--space-xl) var(--space-xl);
 }
 
 /* ── Hero ────────────────────────────────────────────── */
 .hero {
     position: relative;
-    padding: 2rem 0 2.5rem;
+    padding: var(--space-xl) 0;
 }
 
 .hero-badge {
@@ -156,16 +94,16 @@ code {
     padding: 1px;
     border-radius: 999px;
     background: linear-gradient(90deg, var(--teal), var(--blue));
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-md);
 }
 
 .hero-badge span {
     display: inline-block;
-    padding: 0.35rem 1rem;
+    padding: var(--space-sm) var(--space-md);
     border-radius: 999px;
     background: var(--bg-opaque);
     color: var(--teal);
-    font-size: 1rem;
+    font-size: var(--text-md);
     font-weight: 600;
     letter-spacing: 0.03em;
     text-transform: uppercase;
@@ -174,7 +112,7 @@ code {
 .hero h1 {
     font-size: clamp(1.8rem, 3.5vw, 3.0rem);
     font-weight: 700;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-sm);
     letter-spacing: -0.02em;
 }
 
@@ -184,8 +122,7 @@ code {
 
 .hero-sub {
     color: var(--text-muted);
-    font-size: 1.1rem;
-    max-width: 620px;
+    font-size: var(--text-md);
     line-height: 1.6;
 }
 
@@ -193,19 +130,19 @@ code {
 .filters-bar {
     display: flex;
     flex-wrap: wrap;
-    gap: 1.25rem;
-    padding: 1rem 0;
+    gap: var(--space-md);
+    padding: var(--space-md) 0 var(--space-2xl);
     top: 0;
     z-index: 10;
 }
 
 .filter-group label {
     display: block;
-    font-size: 0.8rem;
+    font-size: var(--text-sm);
     font-weight: 600;
     letter-spacing: 0.08em;
     color: var(--text-dim);
-    margin-bottom: 0.25rem;
+    margin-bottom: var(--space-xs);
 }
 
 .btn-group {
@@ -216,9 +153,9 @@ code {
     background: transparent;
     border: 1px solid var(--border);
     color: var(--text-muted);
-    font-size: 1rem;
+    font-size: var(--text-md);
     font-weight: 400;
-    padding: 0.45rem 1rem;
+    padding: var(--space-sm) var(--space-md);
     cursor: pointer;
     transition: all 0.15s;
 }
@@ -250,21 +187,62 @@ code {
 }
 
 /* ── Chart ───────────────────────────────────────────── */
+.chart-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-sm) var(--space-md);
+    margin-bottom: var(--space-xs);
+}
+
+.chart-header-left {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-md);
+}
+
+.chart-header .filter-group {
+    margin: 0;
+}
+
+.chart-header .filter-group label {
+    display: none;
+}
+
+.chart-header .btn,
+.demo-device-selector .btn {
+    border: 0;
+    background: transparent;
+}
+
+.chart-header .btn:hover,
+.demo-device-selector .btn:hover {
+    color: var(--text);
+    background: transparent;
+}
+
+.chart-header .btn.active,
+.demo-device-selector .btn.active {
+    background: transparent;
+    border-color: var(--btn-active-border);
+}
+
 .chart-block {
-    margin: 1.5rem 0;
+    margin: var(--space-lg) 0;
 }
 
 .chart-heading {
-    font-size: 1.25rem;
+    font-size: var(--text-lg);
     font-weight: 600;
     color: var(--text);
-    margin-bottom: 0.25rem;
+    margin-bottom: 0;
 }
 
 .chart-subtitle {
-    font-size: 1rem;
+    font-size: var(--text-md);
     color: var(--text-muted);
-    margin-bottom: 0.75rem;
+    margin-bottom: 0;
 }
 
 .chart-wrap {
@@ -273,15 +251,15 @@ code {
 
 /* ── Tables ──────────────────────────────────────────── */
 .table-card {
-    margin: 1.5rem 0 2rem;
+    margin: var(--space-lg) 0;
 }
 
 .table-card h3 {
-    font-size: 1.15rem;
+    font-size: var(--text-md);
     font-weight: 600;
     color: var(--text);
-    margin-bottom: 0.5rem;
-    padding-bottom: 0.5rem;
+    margin-bottom: var(--space-sm);
+    padding-bottom: var(--space-sm);
     border-bottom: 1px solid var(--border);
 }
 
@@ -312,22 +290,22 @@ code {
 table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 1rem;
+    font-size: var(--text-md);
 }
 
 thead th {
     text-align: left;
     font-weight: 600;
-    font-size: 0.8rem;
+    font-size: var(--text-sm);
     letter-spacing: 0.05em;
     color: var(--text-dim);
-    padding: 0.5rem 0.75rem;
+    padding: var(--space-sm) var(--space-ms);
     border-bottom: 1px solid var(--border);
     white-space: nowrap;
 }
 
 tbody td {
-    padding: 0.5rem 0.75rem;
+    padding: var(--space-sm) var(--space-ms);
     border-bottom: 1px solid var(--row-border);
     white-space: nowrap;
     color: var(--text-muted);
@@ -349,7 +327,7 @@ tbody tr:hover {
 .model-cell {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-sm);
     font-weight: 500;
     color: var(--text);
 }
@@ -372,7 +350,7 @@ tbody tr:hover {
 }
 
 th.first-metric, td.first-metric {
-    padding-left: 2.5rem;
+    padding-left: var(--space-xl);
 }
 
 .oom {
@@ -405,11 +383,15 @@ tbody tr.row-group-break td {
     scrollbar-color: var(--text-dim) var(--border);
     scrollbar-width: thin;
 }
+
+.table-scroll-mobile {
+    display: none;
+}
 #accuracy-section:empty {
     margin-bottom: 0;
 }
 #accuracy-section {
-    margin-bottom: 2.5rem;
+    margin-bottom: var(--space-xl);
 }
 
 .acc-title-link {
@@ -422,15 +404,15 @@ tbody tr.row-group-break td {
 }
 
 .legend-section {
-    margin: 2rem 0;
-    padding-top: 1.5rem;
+    margin: var(--space-xl) 0;
+    padding-top: var(--space-lg);
 }
 
 .legend-grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 0.25rem;
-    font-size: 0.8rem;
+    gap: var(--space-xs);
+    font-size: var(--text-sm);
     color: var(--text-dim);
 }
 
@@ -440,37 +422,37 @@ tbody tr.row-group-break td {
 }
 
 .experiment-setup {
-    margin-top: 0.75rem;
-    font-size: 0.95rem;
+    margin-top: var(--space-md);
+    font-size: var(--text-md);
     color: var(--text-dim);
     font-style: italic;
     line-height: 1.6;
 }
 
 .experiment-setup p {
-    margin-bottom: 0.25rem;
+    margin-bottom: var(--space-xs);
 }
 
 /* ── Footer ──────────────────────────────────────────── */
 .footer {
-    padding: 2.5rem 0;
-    margin-top: 2rem;
+    padding: var(--space-xl) 0;
+    margin-top: var(--space-xl);
 }
 
 .footer-inner {
-    max-width: 1440px;
+    max-width: 1640px;
     margin: 0 auto;
-    padding: 0 2rem;
+    padding: 0 var(--space-xl);
 }
 
 .footer-grid {
     display: flex;
-    gap: 3rem;
+    gap: var(--space-2xl);
     flex-wrap: wrap;
 }
 
 .footer-col {
-    font-size: 1rem;
+    font-size: var(--text-md);
     color: var(--text-dim);
     line-height: 1.7;
 }
@@ -480,7 +462,7 @@ tbody tr.row-group-break td {
 }
 
 .footer-col-title {
-    font-size: 0.85rem;
+    font-size: var(--text-sm);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.08em;
@@ -489,13 +471,13 @@ tbody tr.row-group-break td {
 
 .footer-logo-img {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-sm);
 }
 
 .footer-logo {
-    font-size: 1rem;
+    font-size: var(--text-md);
     color: var(--text-muted);
-    margin-bottom: 1.2rem;
+    margin-bottom: var(--space-md);
 }
 
 .footer-logo a {
@@ -509,7 +491,7 @@ tbody tr.row-group-break td {
 
 .footer-social {
     display: flex;
-    gap: 0.75rem;
+    gap: var(--space-md);
 }
 
 .footer-social a {
@@ -524,7 +506,7 @@ tbody tr.row-group-break td {
 }
 
 /* ── Responsive ──────────────────────────────────────── */
-@media (max-width: 768px) {
+@media (max-width: 900px) {
     .page {
         flex-direction: column;
     }
@@ -536,20 +518,20 @@ tbody tr.row-group-break td {
         position: static;
         border-right: none;
         border-bottom: 1px solid var(--border);
-        padding: 0.75rem 0;
+        padding: var(--space-sm) 0;
     }
 
     .sidebar-nav {
         flex-direction: row;
         flex-wrap: wrap;
-        padding: 0 0.75rem;
+        align-items: center;
+        padding: 0 var(--space-sm);
     }
 
     .sidebar-item {
         border-left: none;
         border-bottom: 2px solid transparent;
-        padding: 0.4rem 0.75rem;
-        font-size: 0.9rem;
+        padding: var(--space-sm) var(--space-md);
     }
 
     .sidebar-item.active {
@@ -560,8 +542,8 @@ tbody tr.row-group-break td {
     .sidebar-variant {
         border-left: none;
         border-bottom: 2px solid transparent;
-        padding: 0.3rem 0.75rem;
-        font-size: 0.8rem;
+        padding: var(--space-sm) var(--space-md);
+        font-size: var(--text-sm);
     }
 
     .sidebar-variant.active {
@@ -569,19 +551,15 @@ tbody tr.row-group-break td {
     }
 
     .main-inner {
-        padding: 0 1rem 2rem;
+        padding: 0 var(--space-md) var(--space-xl);
     }
 
-    .filters-bar {
-        gap: 0.75rem;
+    .table-split {
+        display: none;
     }
 
-    .btn {
-        font-size: 0.85rem;
-        padding: 0.35rem 0.7rem;
+    .table-scroll-mobile {
+        display: block;
     }
 
-    .chart-wrap {
-        height: 260px;
-    }
 }