feat(gradio): update to gradio app

README.md

@@ -3,8 +3,9 @@ title: Video Benchmark
 emoji: 🎬
 colorFrom: green
 colorTo: indigo
-sdk: static
-app_file: index.html
+sdk: gradio
+sdk_version: 6.12.0
+app_file: app.py
 pinned: false
 license: apache-2.0
 short_description: Benchmark video encoding and decoding performance
@@ -38,4 +39,29 @@ The benchmark uses LeRobot image datasets from the HuggingFace Hub:
 | `lerobot/paris_street` | 720 x 1280 | Real-world outdoor, moving camera |
 | `lerobot/kitchen` | 1080 x 1920 | Real-world indoor, fixed camera |
 
+## Architecture
+
+Single-process Gradio Space. One language (Python), one entry point (`app.py`), no build step.
+
+- [`app.py`](app.py) builds the `gr.Blocks` layout: hero banner (as `gr.HTML` so the HF branding stays pixel-close), then six tabs — Results, Leaderboards, Compare, Submit, Parameters, About. Event handlers call into `src.compute` directly; there is no HTTP hop between frontend and data layer.
+- [`src/schema.py`](src/schema.py) is the single source of truth for UI vocabulary: column metadata, filter / submit option lists, leaderboard categories, parameter-reference prose, About-page narration. A column or option only ever changes here.
+- [`src/compute.py`](src/compute.py) holds pure-Python row math: chip filtering, composite ranking, per-axis normalization, leaderboard weighted scoring, and the three Compare-tab aggregations. All functions are `list[dict] → list[dict]` or `dict`, trivially testable.
+- Results rows come from [`lerobot/video-benchmark-results`](https://huggingface.co/datasets/lerobot/video-benchmark-results) via `datasets.load_dataset`, cached in-process with a single-flight lock and a stale-but-usable fallback.
+- Submissions are committed to [`lerobot/video-benchmark-submissions`](https://huggingface.co/datasets/lerobot/video-benchmark-submissions) as one JSON file per submission. The schema matches what existing LeRobot benchmark workers already consume, so they keep picking up jobs unchanged.
+- [`styles.css`](styles.css) layers HF brand colors, hero typography, and the About / Parameters card styling on top of the Gradio theme defined in `_hf_theme()`.
+
+### Required Space secrets
+
+- `HF_TOKEN` — a bot token with **write** access to `lerobot/video-benchmark-submissions`. Without it, the Submit button raises an error.
+
+### Local development
+
+```
+pip install -r requirements.txt
+export HF_TOKEN=hf_...   # optional; needed for the Submit tab
+python app.py
+```
+
+Then open http://localhost:7860.
+
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.jsx

@@ -1,1241 +0,0 @@
-// Main React app for the Video Benchmark UI
-const { useState, useMemo, useEffect, useRef } = React;
-
-// Data (ALL_ROWS, COLUMNS, etc) comes from data.js. Hoist window.VB_DATA
-// keys onto window so bare identifiers resolve — no-op in the bundled build
-// where data.js is concatenated into this same block.
-(function hoistData(){
-  if (typeof window === 'undefined' || !window.VB_DATA) return;
-  for (const k of Object.keys(window.VB_DATA)) {
-    if (typeof window[k] === 'undefined') window[k] = window.VB_DATA[k];
-  }
-})();
-
-// ---------- helpers ----------
-const METRIC_COLS = COLUMNS.filter(c => c.metric);
-
-function normalize(rows, col) {
-  const vals = rows.map(r => r[col.key]).filter(v => v != null && !isNaN(v));
-  if (!vals.length) return () => 0;
-  const min = Math.min(...vals), max = Math.max(...vals);
-  if (max === min) return () => 0.5;
-  return (v) => {
-    if (v == null || isNaN(v)) return 0;
-    const t = (v - min) / (max - min);
-    return col.lower ? 1 - t : t;
-  };
-}
-
-function rdylgn(t) {
-  t = Math.max(0, Math.min(1, t));
-  const lerp = (a,b,s) => a + (b-a)*s;
-  if (t < 0.5) { const s = t/0.5; return [lerp(215,255,s), lerp(48,255,s), lerp(39,75,s)]; }
-  const s = (t-0.5)/0.5; return [lerp(255,26,s), lerp(255,152,s), lerp(75,80,s)];
-}
-
-function compositeRank(rows, cols) {
-  const fns = cols.map(c => [c, normalize(rows, c)]);
-  return rows.map(r => {
-    let sum = 0, n = 0;
-    for (const [c, fn] of fns) {
-      const v = fn(r[c.key]);
-      sum += (1 - v); // lower normalized => better rank
-      n++;
-    }
-    return { row: r, score: n ? sum/n : 0 };
-  }).sort((a,b) => a.score - b.score);
-}
-
-const GROUP_COLOR = {
-  Config: '#6A768F', Compression: '#FF9D00', Speed: '#496EF0', Quality: '#009B3A',
-};
-
-// ---------- Filter Bar ----------
-function FilterBar({ filters, setFilters, counts, visible, setVisible }) {
-  const fields = [
-    { key: 'backend', opts: BACKENDS },
-    { key: 'vcodec', opts: VCODECS },
-    { key: 'pix_fmt', opts: PIX_FMTS },
-    { key: 'g', opts: G_VALUES.map(String) },
-    { key: 'crf', opts: CRF_VALUES.map(String) },
-  ].map(f => ({ ...f, label: COLUMNS.find(c => c.key === f.key).label, desc: COLUMNS.find(c => c.key === f.key).desc }));
-  const toggle = (field, v) => {
-    const cur = new Set(filters[field] || []);
-    cur.has(v) ? cur.delete(v) : cur.add(v);
-    setFilters({ ...filters, [field]: [...cur] });
-  };
-  const clearAll = () => setFilters({});
-  return (
-    <div className="filters-bar">
-      {fields.map(f => (
-        <div className="filter-field" key={f.key}>
-          <label data-tt={f.desc}>{f.label}</label>
-          <div className="chips">
-            {f.opts.map(o => {
-              const active = (filters[f.key] || []).includes(String(o));
-              return <span key={o} className={`filter-chip ${active?'active':''}`} onClick={()=>toggle(f.key, String(o))}>{o}</span>;
-            })}
-          </div>
-        </div>
-      ))}
-      <div className="filter-actions">
-        <ColumnPicker visible={visible} setVisible={setVisible} />
-        <button className="btn ghost" onClick={clearAll}>Reset</button>
-      </div>
-    </div>
-  );
-}
-
-// ---------- Column Picker ----------
-function ColumnPicker({ visible, setVisible }) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  useEffect(() => {
-    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
-    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
-    document.addEventListener('mousedown', onDoc);
-    document.addEventListener('keydown', onKey);
-    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
-  }, []);
-  const toggle = (k) => {
-    const s = new Set(visible);
-    s.has(k) ? s.delete(k) : s.add(k);
-    setVisible(s);
-  };
-  const toggleGroup = (g) => {
-    const cols = COLUMNS.filter(c => c.group === g).map(c => c.key);
-    const allOn = cols.every(k => visible.has(k));
-    const s = new Set(visible);
-    cols.forEach(k => allOn ? s.delete(k) : s.add(k));
-    setVisible(s);
-  };
-  const resetAll = () => setVisible(new Set(COLUMNS.map(c=>c.key)));
-  const hideAll = () => setVisible(new Set(COLUMNS.filter(c=>c.group==='Config').map(c=>c.key)));
-  return (
-    <div className="columns-dd-wrap" ref={ref}>
-      <button className={`columns-dd-trigger ${open?'open':''}`} onClick={()=>setOpen(o=>!o)}>
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{flexShrink:0}}>
-          <rect x="1" y="2" width="12" height="2" rx="0.5" fill="currentColor" opacity="0.9"/>
-          <rect x="1" y="6" width="12" height="2" rx="0.5" fill="currentColor" opacity="0.6"/>
-          <rect x="1" y="10" width="12" height="2" rx="0.5" fill="currentColor" opacity="0.3"/>
-        </svg>
-        <span>Columns</span>
-        <span className="dd-count">{visible.size} <span style={{opacity:0.5}}>/ {COLUMNS.length}</span></span>
-        <svg width="10" height="10" viewBox="0 0 10 10" style={{marginLeft:4, transition:'transform .15s', transform: open?'rotate(180deg)':'none'}}>
-          <path d="M2 4L5 7L8 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
-        </svg>
-      </button>
-      {open && (
-        <div className="columns-dd-panel">
-          <div className="dd-panel-head">
-            <span>Visible columns</span>
-            <div style={{marginLeft:'auto', display:'flex', gap:4}}>
-              <button className="dd-mini" onClick={resetAll}>Show all</button>
-              <button className="dd-mini" onClick={hideAll}>Reset</button>
-            </div>
-          </div>
-          <div className="dd-groups">
-            {COL_GROUPS.map(g => {
-              const groupCols = COLUMNS.filter(c => c.group === g);
-              const visCount = groupCols.filter(c=>visible.has(c.key)).length;
-              const allOn = visCount === groupCols.length;
-              const some = visCount > 0 && visCount < groupCols.length;
-              return (
-                <div className="dd-group" key={g}>
-                  <button className="dd-group-head" onClick={()=>toggleGroup(g)}>
-                    <span className="sw" style={{background: GROUP_COLOR[g]}}/>
-                    <span className={`dd-cbx ${allOn?'on':some?'some':''}`}/>
-                    <span className="dd-group-name">{g}</span>
-                    <span className="dd-group-count">{visCount}/{groupCols.length}</span>
-                  </button>
-                  <div className="dd-group-items">
-                    {groupCols.map(c => {
-                      const on = visible.has(c.key);
-                      return (
-                        <button key={c.key} className={`dd-item ${on?'on':''}`} onClick={()=>toggle(c.key)} title={c.desc}>
-                          <span className={`dd-cbx ${on?'on':''}`}/>
-                          <span className="dd-item-label">{c.label.replace('\n', ' ')}</span>
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ---------- Table ----------
-function BenchTable({ rows, visible }) {
-  const visibleCols = COLUMNS.filter(c => visible.has(c.key));
-  const metricColorFns = useMemo(() => {
-    const m = {};
-    visibleCols.filter(c => c.metric).forEach(c => { m[c.key] = normalize(rows, c); });
-    return m;
-  }, [rows, visibleCols.map(c=>c.key).join(',')]);
-
-  const sorted = useMemo(() => {
-    if (!rows.length) return [];
-    const ranked = compositeRank(rows, visibleCols.filter(c => c.metric));
-    return ranked.map(r => r.row);
-  }, [rows, visibleCols]);
-
-  const renderCell = (r, col) => {
-    const v = r[col.key];
-    if (col.key === 'repo_id') return <span className="mono" style={{color:'var(--fg-link)'}}>{v.replace('lerobot/','')}</span>;
-    if (col.key === 'vcodec') return <span className={`codec-pill codec-${v}`}>{v}</span>;
-    if (col.key === 'pix_fmt') return <span className="mono">{v}</span>;
-    if (['g','crf'].includes(col.key)) return <span className="mono" style={{color:'var(--fg-1)'}}>{v}</span>;
-    if (['timestamps_mode','backend'].includes(col.key)) return <span className="mono">{v}</span>;
-    if (col.metric) {
-      const fn = metricColorFns[col.key];
-      const t = fn ? fn(v) : 0.5;
-      const [rr,gg,bb] = rdylgn(t);
-      const bg = `rgba(${(rr|0)},${(gg|0)},${(bb|0)},0.35)`;
-      const fmt = col.fmt ? col.fmt(v) : String(v);
-      const std = col.stdKey ? r[col.stdKey] : null;
-      return (
-        <div style={{display:'inline-block', background: bg, padding:'2px 6px', borderRadius:4}}>
-          {fmt}{std != null && <span className="std"> ±{col.fmt(std)}</span>}
-        </div>
-      );
-    }
-    return String(v);
-  };
-
-  return (
-    <div className="table-wrap">
-      <div className="table-top">
-        <span className="row-count"><b>{sorted.length}</b> configurations • ranked by composite score</span>
-        <span style={{fontSize:11, color:'var(--fg-3)', fontFamily:'var(--font-mono)'}}>🟢 best · 🔴 worst</span>
-      </div>
-      <div className="table-scroll">
-        <table className="bench">
-          <thead>
-            <tr>
-              <th style={{width:40}}>#</th>
-              {visibleCols.map((c,i) => {
-                const prevGroup = i > 0 ? visibleCols[i-1].group : null;
-                const groupStart = c.group !== prevGroup && i > 0;
-                return (
-                  <th key={c.key} className={groupStart?'group-start':''} data-tt={c.desc}>
-                    {c.label}
-                  </th>
-                );
-              })}
-            </tr>
-          </thead>
-          <tbody>
-            {sorted.slice(0, 250).map((r, i) => (
-              <tr key={i}>
-                <td className="rank">{String(i+1).padStart(2,'0')}</td>
-                {visibleCols.map((c, j) => {
-                  const prevGroup = j > 0 ? visibleCols[j-1].group : null;
-                  const groupStart = c.group !== prevGroup && j > 0;
-                  return <td key={c.key} className={`${c.metric?'metric':''} ${groupStart?'group-start':''}`}>{renderCell(r, c)}</td>;
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}
-
-// ---------- Radar Chart ----------
-function RadarChart({ data, axes, colors }) {
-  const size = 380, cx = size/2, cy = size/2, r = 140;
-  const n = axes.length;
-  const angleFor = (i) => -Math.PI/2 + (i / n) * Math.PI * 2;
-  const gridLevels = [0.25, 0.5, 0.75, 1.0];
-
-  const axisPoint = (i, t) => {
-    const a = angleFor(i);
-    return [cx + Math.cos(a) * r * t, cy + Math.sin(a) * r * t];
-  };
-
-  return (
-    <svg viewBox={`0 0 ${size} ${size}`} xmlns="http://www.w3.org/2000/svg">
-      {/* Grid */}
-      {gridLevels.map(lvl => (
-        <polygon key={lvl}
-          points={axes.map((_, i) => axisPoint(i, lvl).join(',')).join(' ')}
-          fill="none" stroke="var(--border-1)" strokeWidth="1" />
-      ))}
-      {/* Axes */}
-      {axes.map((ax, i) => {
-        const [x,y] = axisPoint(i, 1);
-        const [lx,ly] = axisPoint(i, 1.18);
-        return (
-          <g key={ax}>
-            <line x1={cx} y1={cy} x2={x} y2={y} stroke="var(--border-1)" strokeWidth="1" />
-            <text x={lx} y={ly} textAnchor="middle" dominantBaseline="central"
-              style={{font:"600 11px var(--font-sans)", fill:"var(--fg-2)"}}>{ax}</text>
-          </g>
-        );
-      })}
-      {/* Data polygons */}
-      {data.map((d, idx) => {
-        const pts = d.values.map((v, i) => axisPoint(i, Math.max(0, Math.min(1, v)))).map(p => p.join(',')).join(' ');
-        const color = colors[idx];
-        return (
-          <g key={idx}>
-            <polygon points={pts} fill={color} fillOpacity="0.18" stroke={color} strokeWidth="2" />
-            {d.values.map((v, i) => {
-              const [x,y] = axisPoint(i, Math.max(0, Math.min(1, v)));
-              return <circle key={i} cx={x} cy={y} r="3.5" fill={color} stroke="white" strokeWidth="1.5"/>;
-            })}
-          </g>
-        );
-      })}
-    </svg>
-  );
-}
-
-// ---------- Leaderboards ----------
-// All categories share the same 6 axes — what changes between tabs is the
-// WEIGHTING used to rank configurations.
-const LEADERBOARD_AXES = ['encoding_time_ms', 'median_load_time_video_ms', 'video_images_size_ratio', 'median_mse', 'median_psnr', 'median_ssim'];
-const LEADERBOARD_CATS = {
-  Overall:  { desc: 'Balanced across encoding, decoding, size, and quality.',
-              weights: { encoding_time_ms: 1, median_load_time_video_ms: 1, video_images_size_ratio: 1, median_mse: 1, median_psnr: 1, median_ssim: 1 } },
-  Quality:  { desc: 'Weighted toward reconstruction fidelity (MSE, PSNR, SSIM).',
-              weights: { encoding_time_ms: 0.15, median_load_time_video_ms: 0.15, video_images_size_ratio: 0.3, median_mse: 1.5, median_psnr: 1.5, median_ssim: 1.5 } },
-  Encoding: { desc: 'Weighted toward encoding speed and output size.',
-              weights: { encoding_time_ms: 2, median_load_time_video_ms: 0.2, video_images_size_ratio: 1.5, median_mse: 0.3, median_psnr: 0.3, median_ssim: 0.3 } },
-  Decoding: { desc: 'Weighted toward decoding throughput and size-on-disk impact.',
-              weights: { encoding_time_ms: 0.2, median_load_time_video_ms: 2, video_images_size_ratio: 1.2, median_mse: 0.3, median_psnr: 0.3, median_ssim: 0.3 } },
-};
-// Axis labels (short form) pulled from COLUMNS so everything stays in sync.
-const AXIS_LABEL = Object.fromEntries(COLUMNS.map(c => [c.key, c.short || c.label]));
-const PODIUM_COLORS = ['#FFD21E', '#496EF0', '#FF9D00', '#9747FF', '#009B3A', '#DB3328', '#353E60', '#FFBD59'];
-
-function Leaderboards() {
-  const [cat, setCat] = useState('Overall');
-  const [ts, setTs] = useState('1_frame');
-  const [topN, setTopN] = useState(4);
-
-  const scoped = useMemo(() => ALL_ROWS.filter(r => r.timestamps_mode === ts), [ts]);
-
-  const { top, axes, values } = useMemo(() => {
-    const axisKeys = LEADERBOARD_AXES;
-    const axisCols = axisKeys.map(k => COLUMNS.find(c => c.key === k));
-    const axes = axisKeys.map(k => AXIS_LABEL[k]);
-
-    // Aggregate over per-dataset repeats: group by (vcodec, pix_fmt, g, crf, backend)
-    const groups = new Map();
-    for (const r of scoped) {
-      const key = `${r.vcodec}|${r.pix_fmt}|${r.g}|${r.crf}|${r.backend}`;
-      if (!groups.has(key)) groups.set(key, []);
-      groups.get(key).push(r);
-    }
-    const agg = [...groups.entries()].map(([k, rs]) => {
-      const ag = { ...rs[0] };
-      for (const c of axisCols) {
-        const vals = rs.map(r => r[c.key]).filter(v => v!=null);
-        ag[c.key] = vals.length ? vals.reduce((a,b)=>a+b,0)/vals.length : null;
-      }
-      return ag;
-    });
-
-    // Rank by category weighting
-    const weights = LEADERBOARD_CATS[cat].weights;
-    const normFns = axisCols.map(c => normalize(agg, c));
-    const weighted = agg.map(row => {
-      let sum = 0, wsum = 0;
-      axisCols.forEach((c, i) => {
-        const w = weights[c.key] || 1;
-        sum += w * (1 - normFns[i](row[c.key]));
-        wsum += w;
-      });
-      return { row, score: wsum ? sum/wsum : 0 };
-    }).sort((a,b) => a.score - b.score).slice(0, topN);
-    const top = weighted.map(x => x.row);
-
-    const values = top.map(row => axisCols.map((c, i) => normFns[i](row[c.key])));
-    return { top, axes, values };
-  }, [cat, ts, topN, scoped]);
-
-  return (
-    <div>
-      <div className="lb-controls">
-        <div className="lb-field">
-          <label>Access pattern</label>
-          <select className="select" value={ts} onChange={e=>setTs(e.target.value)}>
-            {TS_MODES.map(m => <option key={m} value={m}>{m}</option>)}
-          </select>
-        </div>
-        <div className="lb-field">
-          <label>Top N configs</label>
-          <div className="slider-wrap">
-            <input type="range" min="1" max="12" value={topN} onChange={e=>setTopN(+e.target.value)} />
-            <span className="v">{topN}</span>
-          </div>
-        </div>
-        <div className="lb-field" style={{marginLeft:'auto'}}>
-          <label>Ranking</label>
-          <div className="lb-subtabs">
-            {Object.keys(LEADERBOARD_CATS).map(c => (
-              <span key={c} className={`lb-subtab ${cat===c?'active':''}`} onClick={()=>setCat(c)}>{c}</span>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className="lb-grid">
-        <div className="card radar-card">
-          <RadarChart data={top.map((r,i)=>({ values: values[i] }))} axes={axes} colors={PODIUM_COLORS} />
-        </div>
-        <div className="card lb-list-card">
-          <h3>Top configurations — <span style={{color:'var(--fg-3)', fontWeight:400}}>{cat.toLowerCase()}</span></h3>
-          <p style={{fontSize:'var(--fs-xs)', color:'var(--fg-3)', margin:'0 0 12px'}}>
-            {LEADERBOARD_CATS[cat].desc} Axes normalized so <b>1.0 = best-in-class</b>.
-          </p>
-          <div className="legend-list lb-legend-scroll">
-            {top.map((r, i) => (
-              <div className="legend-item" key={i}>
-                <div className="rank" style={{background: PODIUM_COLORS[i % PODIUM_COLORS.length]+'33', color: PODIUM_COLORS[i % PODIUM_COLORS.length]}}>{i+1}</div>
-                <div>
-                  <div className="name"><span className={`codec-pill codec-${r.vcodec}`}>{r.vcodec}</span></div>
-                  <div className="name" style={{color:'var(--fg-3)', marginTop:4}}>
-                    {r.pix_fmt} · g={r.g} · crf={r.crf} · {r.backend}
-                  </div>
-                </div>
-                <div className="score">{(values[i].reduce((a,b)=>a+b,0) / values[i].length).toFixed(3)}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className="card">
-        <h3>Detailed metrics</h3>
-        <div style={{overflowX:'auto'}}>
-        <table className="bench" style={{fontSize:'var(--fs-xs)'}}>
-          <thead>
-            <tr>
-              <th>#</th>
-              <th data-tt={COLUMNS.find(c=>c.key==='vcodec').desc}>Codec</th>
-              <th data-tt={COLUMNS.find(c=>c.key==='pix_fmt').desc}>Pixel format</th>
-              <th data-tt={COLUMNS.find(c=>c.key==='g').desc}>GOP</th>
-              <th data-tt={COLUMNS.find(c=>c.key==='crf').desc}>CRF</th>
-              <th data-tt={COLUMNS.find(c=>c.key==='backend').desc}>Backend</th>
-              {LEADERBOARD_AXES.map(k => {
-                const c = COLUMNS.find(x=>x.key===k);
-                return <th key={k} className="group-start">{c.label}</th>;
-              })}
-            </tr>
-          </thead>
-          <tbody>
-            {top.map((r, i) => (
-              <tr key={i}>
-                <td className="rank">{String(i+1).padStart(2,'0')}</td>
-                <td><span className={`codec-pill codec-${r.vcodec}`}>{r.vcodec}</span></td>
-                <td className="mono">{r.pix_fmt}</td>
-                <td className="mono">{r.g}</td>
-                <td className="mono">{r.crf}</td>
-                <td className="mono">{r.backend}</td>
-                {LEADERBOARD_AXES.map(k => {
-                  const c = COLUMNS.find(x=>x.key===k);
-                  return <td key={k} className="metric group-start">{c.fmt(r[k])}</td>;
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ---------- Compare charts ----------
-function BarChart({ data, xLabel, yLabel, xDesc, yDesc, color='#496EF0' }) {
-  const width = 780, height = 360, mL = 60, mR = 20, mT = 20, mB = 90;
-  const iw = width - mL - mR, ih = height - mT - mB;
-  if (!data.length) return <svg viewBox={`0 0 ${width} ${height}`} className="chart-svg" />;
-  const max = Math.max(...data.map(d => d.v));
-  const barW = iw / data.length * 0.7;
-  const step = iw / data.length;
-  const rotate = step < 72;
-
-  const ticks = 5;
-  const tickVals = Array.from({length: ticks+1}, (_, i) => (max * i / ticks));
-
-  return (
-    <svg viewBox={`0 0 ${width} ${height}`} className="chart-svg">
-      {/* grid */}
-      {tickVals.map((v, i) => {
-        const y = mT + ih - (v/max)*ih;
-        return (
-          <g key={i}>
-            <line x1={mL} x2={mL+iw} y1={y} y2={y} stroke="var(--border-1)" strokeDasharray="2,3"/>
-            <text x={mL-8} y={y} textAnchor="end" dominantBaseline="central" style={{font:"11px var(--font-mono)", fill:"var(--fg-3)"}}>{v.toFixed(2)}</text>
-          </g>
-        );
-      })}
-      {/* bars */}
-      {data.map((d, i) => {
-        const x = mL + i*step + (step-barW)/2;
-        const h = (d.v / max) * ih;
-        const y = mT + ih - h;
-        const tx = x + barW/2;
-        const ty = mT + ih + 14;
-        return (
-          <g key={d.k}>
-            <rect x={x} y={y} width={barW} height={h} fill={color} rx="4">
-              <title>{yDesc ? `${yLabel}: ${d.v.toFixed(3)}\n\n${yDesc}` : `${d.k}: ${d.v.toFixed(3)}`}</title>
-            </rect>
-            {rotate ? (
-              <text x={tx} y={ty} textAnchor="end"
-                transform={`rotate(-32 ${tx} ${ty})`}
-                style={{font:"11px var(--font-mono)", fill:"var(--fg-2)"}}>{d.k}</text>
-            ) : (
-              <text x={tx} y={mT+ih+18} textAnchor="middle" style={{font:"11px var(--font-mono)", fill:"var(--fg-2)"}}>{d.k}</text>
-            )}
-            <text x={tx} y={y-6} textAnchor="middle" style={{font:"600 10px var(--font-mono)", fill:"var(--fg-1)"}}>{d.v.toFixed(2)}</text>
-          </g>
-        );
-      })}
-      {/* axis labels */}
-      <text x={mL+iw/2} y={height-8} textAnchor="middle" style={{font:"600 11px var(--font-sans)", fill:"var(--fg-2)"}}>{xLabel}</text>
-      <text x={18} y={mT+ih/2} textAnchor="middle" transform={`rotate(-90 18 ${mT+ih/2})`} style={{font:"600 11px var(--font-sans)", fill:"var(--fg-2)"}}>{yLabel}</text>
-    </svg>
-  );
-}
-
-function ScatterChart({ points, xLabel, yLabel, xDesc, yDesc, colorBy }) {
-  const width = 780, height = 360, mL = 60, mR = 140, mT = 20, mB = 60;
-  const iw = width - mL - mR, ih = height - mT - mB;
-  if (!points.length) return <svg viewBox={`0 0 ${width} ${height}`} className="chart-svg" />;
-  const xMin = Math.min(...points.map(p=>p.x));
-  const xMax = Math.max(...points.map(p=>p.x));
-  const yMin = Math.min(...points.map(p=>p.y));
-  const yMax = Math.max(...points.map(p=>p.y));
-  const xS = v => mL + ((v - xMin)/(xMax-xMin || 1)) * iw;
-  const yS = v => mT + ih - ((v - yMin)/(yMax-yMin || 1)) * ih;
-
-  const colors = { h264: '#1D4ED8', hevc: '#7E22CE', libsvtav1: '#047857' };
-  const cats = [...new Set(points.map(p => p.c))];
-
-  return (
-    <svg viewBox={`0 0 ${width} ${height}`} className="chart-svg">
-      {/* grid */}
-      {[0,0.25,0.5,0.75,1].map((t,i) => {
-        const y = mT + ih - t*ih;
-        const v = yMin + (yMax-yMin)*t;
-        return <g key={i}>
-          <line x1={mL} x2={mL+iw} y1={y} y2={y} stroke="var(--border-1)" strokeDasharray="2,3"/>
-          <text x={mL-8} y={y} textAnchor="end" dominantBaseline="central" style={{font:"11px var(--font-mono)", fill:"var(--fg-3)"}}>{v.toFixed(1)}</text>
-        </g>;
-      })}
-      {[0,0.25,0.5,0.75,1].map((t,i) => {
-        const x = mL + t*iw;
-        const v = xMin + (xMax-xMin)*t;
-        return <g key={i}>
-          <line x1={x} x2={x} y1={mT} y2={mT+ih} stroke="var(--border-1)" strokeDasharray="2,3"/>
-          <text x={x} y={mT+ih+16} textAnchor="middle" style={{font:"11px var(--font-mono)", fill:"var(--fg-3)"}}>{v.toFixed(2)}</text>
-        </g>;
-      })}
-      {/* points */}
-      {points.map((p, i) => (
-        <circle key={i} cx={xS(p.x)} cy={yS(p.y)} r="4" fill={colors[p.c]||'#496EF0'} fillOpacity="0.55" stroke={colors[p.c]||'#496EF0'} strokeWidth="1">
-          <title>{`${p.c} · ${p.label}\n${xLabel}: ${p.x.toFixed(4)}\n${yLabel}: ${p.y.toFixed(2)}`}</title>
-        </circle>
-      ))}
-      {/* legend */}
-      {cats.map((c, i) => (
-        <g key={c} transform={`translate(${mL+iw+20} ${mT+i*22})`}>
-          <circle cx="6" cy="6" r="5" fill={colors[c]||'#496EF0'}/>
-          <text x="18" y="6" dominantBaseline="central" style={{font:"11px var(--font-mono)", fill:"var(--fg-1)"}}>{c}</text>
-        </g>
-      ))}
-      <text x={mL+iw/2} y={height-10} textAnchor="middle" style={{font:"600 11px var(--font-sans)", fill:"var(--fg-2)"}}>{xLabel}</text>
-      <text x={18} y={mT+ih/2} textAnchor="middle" transform={`rotate(-90 18 ${mT+ih/2})`} style={{font:"600 11px var(--font-sans)", fill:"var(--fg-2)"}}>{yLabel}</text>
-    </svg>
-  );
-}
-
-const STACK_COLORS = ['#496EF0', '#FF9D00', '#009B3A', '#9747FF', '#FFD21E', '#DB3328'];
-
-function StackedBarChart({ data, keys, xLabel, yLabel }) {
-  const width = 780, rowH = 46, mL = 90, mR = 40, mT = 30, mB = 70;
-  const n = data.length;
-  const ih = rowH * n;
-  const height = mT + ih + mB;
-  const iw = width - mL - mR;
-  if (!n) return <svg viewBox={`0 0 ${width} ${height}`} className="chart-svg" />;
-  const max = Math.max(...data.map(d => d.total));
-  const ticks = 5;
-  const tickVals = Array.from({length: ticks+1}, (_, i) => (max * i / ticks));
-
-  return (
-    <svg viewBox={`0 0 ${width} ${height}`} className="chart-svg">
-      {/* grid */}
-      {tickVals.map((v, i) => {
-        const x = mL + (v/max)*iw;
-        return (
-          <g key={i}>
-            <line x1={x} x2={x} y1={mT} y2={mT+ih} stroke="var(--border-1)" strokeDasharray="2,3"/>
-            <text x={x} y={mT+ih+16} textAnchor="middle" style={{font:"11px var(--font-mono)", fill:"var(--fg-3)"}}>{Math.round(v)}</text>
-          </g>
-        );
-      })}
-      {/* bars */}
-      {data.map((d, i) => {
-        const y = mT + i*rowH + 6;
-        const h = rowH - 14;
-        let cx = mL;
-        return (
-          <g key={d.k}>
-            <text x={mL-10} y={y+h/2} textAnchor="end" dominantBaseline="central" style={{font:"600 12px var(--font-sans)", fill:"var(--fg-1)"}}>{d.k}</text>
-            {d.segments.map((s, j) => {
-              const w = (s.v/max)*iw;
-              const fill = STACK_COLORS[j % STACK_COLORS.length];
-              const rect = <rect key={j} x={cx} y={y} width={w} height={h} fill={fill}>
-                <title>{d.k} · {s.key}: {s.v.toFixed(1)} ms</title>
-              </rect>;
-              const label = w > 36 ? <text key={'t'+j} x={cx+w/2} y={y+h/2} textAnchor="middle" dominantBaseline="central" style={{font:"600 10px var(--font-mono)", fill:"white"}}>{s.v.toFixed(0)}</text> : null;
-              cx += w;
-              return <g key={j}>{rect}{label}</g>;
-            })}
-            <text x={cx+8} y={y+h/2} dominantBaseline="central" style={{font:"600 11px var(--font-mono)", fill:"var(--fg-1)"}}>{d.total.toFixed(0)} ms</text>
-          </g>
-        );
-      })}
-      {/* legend */}
-      <g transform={`translate(${mL}, ${mT+ih+44})`}>
-        {keys.map((k, i) => (
-          <g key={k} transform={`translate(${i*130}, 0)`}>
-            <rect x={0} y={-9} width={12} height={12} fill={STACK_COLORS[i % STACK_COLORS.length]} rx="2"/>
-            <text x={18} y={0} dominantBaseline="central" style={{font:"11px var(--font-mono)", fill:"var(--fg-2)"}}>{k}</text>
-          </g>
-        ))}
-      </g>
-      <text x={mL+iw/2} y={height-8} textAnchor="middle" style={{font:"600 11px var(--font-sans)", fill:"var(--fg-2)"}}>{xLabel}</text>
-    </svg>
-  );
-}
-
-function Compare() {
-  const metricKeys = METRIC_COLS.map(c => c.key);
-  const groupKeys = ['vcodec', 'pix_fmt', 'timestamps_mode', 'backend', 'repo_id', 'g', 'crf'];
-  const [metric, setMetric] = useState('median_psnr');
-  const [groupBy, setGroupBy] = useState('vcodec');
-
-  const barData = useMemo(() => {
-    const g = new Map();
-    for (const r of ALL_ROWS) {
-      const v = r[metric];
-      if (v == null || isNaN(v)) continue;
-      const k = String(r[groupBy]);
-      if (!g.has(k)) g.set(k, []);
-      g.get(k).push(v);
-    }
-    return [...g.entries()].map(([k, arr]) => ({
-      k: k.replace('lerobot/',''),
-      v: arr.reduce((a,b)=>a+b,0)/arr.length
-    })).sort((a,b) => b.v - a.v);
-  }, [metric, groupBy]);
-
-  const scatterData = useMemo(() => {
-    return ALL_ROWS.slice(0, 600).map(r => ({
-      x: r.video_images_size_ratio,
-      y: r.median_psnr,
-      c: r.vcodec,
-      label: `g=${r.g} crf=${r.crf}`,
-    }));
-  }, []);
-
-  // Decoding speed: stacked bar — one bar per codec, segments = access patterns.
-  const stackedSpeed = useMemo(() => {
-    const codecs = [...new Set(ALL_ROWS.map(r => r.vcodec))];
-    const modes = [...new Set(ALL_ROWS.map(r => r.timestamps_mode))];
-    const data = codecs.map(codec => {
-      const seg = modes.map(mode => {
-        const vals = ALL_ROWS.filter(r => r.vcodec === codec && r.timestamps_mode === mode).map(r => r.median_load_time_video_ms);
-        return { key: mode, v: vals.length ? vals.reduce((a,b)=>a+b,0)/vals.length : 0 };
-      });
-      return { k: codec, segments: seg, total: seg.reduce((a,b)=>a+b.v,0) };
-    }).sort((a,b) => a.total - b.total);
-    return { codecs, modes, data };
-  }, []);
-
-  const metricLabel = COLUMNS.find(c=>c.key===metric).label.replace('\n', ' ');
-  const groupLabel = COLUMNS.find(c=>c.key===groupBy).label.replace('\n', ' ');
-
-  return (
-    <div className="compare-grid">
-      <div className="card chart-card">
-        <div className="chart-head">
-          <div>
-            <h3 style={{margin:0}}>Compare parameters</h3>
-            <p style={{margin:'4px 0 0', fontSize:'var(--fs-xs)', color:'var(--fg-3)'}}>Mean of <b>{metricLabel}</b> grouped by <b>{groupLabel}</b></p>
-          </div>
-          <div className="controls">
-            <div className="lb-field"><label>Metric</label>
-              <select className="select" value={metric} onChange={e=>setMetric(e.target.value)}>
-                {metricKeys.map(k => <option key={k} value={k}>{COLUMNS.find(c=>c.key===k).label.replace('\n', ' ')}</option>)}
-              </select>
-            </div>
-            <div className="lb-field"><label>Group by</label>
-              <select className="select" value={groupBy} onChange={e=>setGroupBy(e.target.value)}>
-                {groupKeys.map(k => <option key={k} value={k}>{COLUMNS.find(c=>c.key===k).label.replace('\n', ' ')}</option>)}
-              </select>
-            </div>
-          </div>
-        </div>
-        <BarChart data={barData} xLabel={groupLabel} yLabel={metricLabel} yDesc={COLUMNS.find(c=>c.key===metric).desc} xDesc={COLUMNS.find(c=>c.key===groupBy).desc} />
-      </div>
-
-      <div className="card chart-card">
-        <div className="chart-head">
-          <div>
-            <h3 style={{margin:0}}>Compression vs quality</h3>
-            <p style={{margin:'4px 0 0', fontSize:'var(--fs-xs)', color:'var(--fg-3)'}}>Every encoded config as a dot. Up and to the left = smaller files at higher quality.</p>
-          </div>
-        </div>
-        <ScatterChart points={scatterData} xLabel="Size ratio (lower is better)" yLabel="PSNR (higher is better)" xDesc={COLUMNS.find(c=>c.key==='video_images_size_ratio').desc} yDesc={COLUMNS.find(c=>c.key==='median_psnr').desc} />
-      </div>
-
-      <div className="card chart-card">
-        <div className="chart-head">
-          <div>
-            <h3 style={{margin:0}}>Decoding speed by codec × access pattern</h3>
-            <p style={{margin:'4px 0 0', fontSize:'var(--fs-xs)', color:'var(--fg-3)'}}>Cumulative median decode time per codec, broken down by access pattern. Shorter bar = faster overall.</p>
-          </div>
-        </div>
-        <StackedBarChart data={stackedSpeed.data} keys={stackedSpeed.modes} xLabel="Decode time across access patterns (ms)" yLabel="Codec" />
-      </div>
-    </div>
-  );
-}
-
-// ---------- Submit ----------
-function Submit() {
-  const [repos, setRepos] = useState(new Set(REPOS.slice(0,2)));
-  const [vcodecs, setVcodecs] = useState(new Set(['h264']));
-  const [pixs, setPixs] = useState(new Set(['yuv420p']));
-  const [gs, setGs] = useState(new Set(['2','10']));
-  const [crfs, setCrfs] = useState(new Set(['10','30']));
-  const [tsModes, setTsModes] = useState(new Set(['1_frame','2_frames']));
-  const [backends, setBackends] = useState(new Set(['pyav']));
-  const [samples, setSamples] = useState(50);
-  const [workers, setWorkers] = useState(4);
-  const [submitted, setSubmitted] = useState(false);
-
-  const chip = (set, setSet, v) => {
-    const s = new Set(set);
-    s.has(v) ? s.delete(v) : s.add(v);
-    setSet(s);
-  };
-
-  const totalConfigs = repos.size * vcodecs.size * pixs.size * gs.size * crfs.size * tsModes.size * backends.size;
-  const estMinutes = Math.round(totalConfigs * samples * 0.08 / 60);
-
-  const submit = () => { setSubmitted(true); setTimeout(()=>setSubmitted(false), 3500); };
-
-  const queue = [
-    { id: 'sub_3a9f', status: 'done', repo: 'lerobot/kitchen', when: '2 min ago' },
-    { id: 'sub_3a9e', status: 'running', repo: 'lerobot/paris_street', when: '14 min ago', progress: '42/96' },
-    { id: 'sub_3a9d', status: 'running', repo: 'aliberts/aloha', when: '28 min ago', progress: '8/24' },
-    { id: 'sub_3a9c', status: 'queued', repo: 'lerobot/pusht_image', when: '1 h ago' },
-    { id: 'sub_3a9b', status: 'done', repo: 'lerobot/kitchen', when: '3 h ago' },
-  ];
-
-  return (
-    <div className="submit-grid">
-      <div className="card">
-        <h2>Submit a benchmark run</h2>
-        <p style={{fontSize:'var(--fs-sm)', color:'var(--fg-2)', margin:'0 0 var(--space-5)'}}>
-          Queue a benchmark to a pool of evaluation workers. Results land in the Results tab automatically.
-        </p>
-
-        <div className="param-section">
-          <h4>Datasets</h4>
-          <p className="hint">Hugging Face Hub dataset repo IDs. The benchmark runs on every (dataset × config) combination.</p>
-          <div className="checkbox-group">
-            {REPOS.map(r => (
-              <span key={r} className={`checkbox-chip ${repos.has(r)?'checked':''}`} onClick={()=>chip(repos, setRepos, r)}>{r}</span>
-            ))}
-          </div>
-        </div>
-
-        <div className="param-section">
-          <h4>Encoding — codec & pixel format</h4>
-          <p className="hint">Codec defines the compression algorithm; pixel format controls chroma subsampling.</p>
-          <div className="checkbox-group" style={{marginBottom: 8}}>
-            {VCODECS.map(v => (
-              <span key={v} className={`checkbox-chip ${vcodecs.has(v)?'checked':''}`} onClick={()=>chip(vcodecs, setVcodecs, v)}>{v}</span>
-            ))}
-          </div>
-          <div className="checkbox-group">
-            {PIX_FMTS.map(v => (
-              <span key={v} className={`checkbox-chip ${pixs.has(v)?'checked':''}`} onClick={()=>chip(pixs, setPixs, v)}>{v}</span>
-            ))}
-          </div>
-        </div>
-
-        <div className="param-section">
-          <h4>Encoding — quality knobs <span style={{color:'var(--fg-3)', fontWeight:400}}>GOP · CRF</span></h4>
-          <p className="hint">GOP = distance between keyframes. CRF = quality (0 lossless → 50 very compressed).</p>
-          <div style={{display:'flex', gap:'var(--space-2)', alignItems:'center', marginBottom: 8}}>
-            <span style={{fontSize:11, color:'var(--fg-3)', width:32, fontFamily:'var(--font-mono)'}}>GOP</span>
-            <div className="checkbox-group">
-              {['1','2','3','4','5','6','10','15','20','40','100'].map(v => (
-                <span key={v} className={`checkbox-chip ${gs.has(v)?'checked':''}`} onClick={()=>chip(gs, setGs, v)}>{v}</span>
-              ))}
-            </div>
-          </div>
-          <div style={{display:'flex', gap:'var(--space-2)', alignItems:'center'}}>
-            <span style={{fontSize:11, color:'var(--fg-3)', width:32, fontFamily:'var(--font-mono)'}}>CRF</span>
-            <div className="checkbox-group">
-              {['0','5','10','15','20','25','30','40','50'].map(v => (
-                <span key={v} className={`checkbox-chip ${crfs.has(v)?'checked':''}`} onClick={()=>chip(crfs, setCrfs, v)}>{v}</span>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        <div className="param-section">
-          <h4>Decoding — access pattern & backend</h4>
-          <p className="hint">How frames are requested and which library decodes them.</p>
-          <div className="checkbox-group" style={{marginBottom:8}}>
-            {TS_MODES.map(v => (
-              <span key={v} className={`checkbox-chip ${tsModes.has(v)?'checked':''}`} onClick={()=>chip(tsModes, setTsModes, v)}>{v}</span>
-            ))}
-          </div>
-          <div className="checkbox-group">
-            {['pyav','torchcodec','video_reader'].map(v => (
-              <span key={v} className={`checkbox-chip ${backends.has(v)?'checked':''}`} onClick={()=>chip(backends, setBackends, v)}>{v}</span>
-            ))}
-          </div>
-        </div>
-
-        <div className="param-section">
-          <h4>Sampling</h4>
-          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--space-4)'}}>
-            <div>
-              <div style={{fontSize:11, color:'var(--fg-3)', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Samples per config <span style={{float:'right', fontFamily:'var(--font-mono)', color:'var(--fg-1)'}}>{samples}</span></div>
-              <input type="range" min="1" max="200" value={samples} onChange={e=>setSamples(+e.target.value)} style={{width:'100%', accentColor:'var(--hf-blue)'}} />
-            </div>
-            <div>
-              <div style={{fontSize:11, color:'var(--fg-3)', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Worker threads <span style={{float:'right', fontFamily:'var(--font-mono)', color:'var(--fg-1)'}}>{workers}</span></div>
-              <input type="range" min="1" max="32" value={workers} onChange={e=>setWorkers(+e.target.value)} style={{width:'100%', accentColor:'var(--hf-blue)'}} />
-            </div>
-          </div>
-        </div>
-
-        <button className="btn primary" style={{marginTop:'var(--space-4)'}} onClick={submit} disabled={!totalConfigs}>
-          {submitted ? '✓ Submitted to queue' : `Submit ${totalConfigs} configuration${totalConfigs===1?'':'s'}`}
-        </button>
-      </div>
-
-      <div>
-        <div className="card summary-card">
-          <div className="count-box">
-            <div>
-              <div className="n">{totalConfigs.toLocaleString()}</div>
-              <div className="l">configurations<br/>in this run</div>
-            </div>
-            <img src={(typeof window !== 'undefined' && window.__ROCKET) || "assets/huggy-rocket.png"} alt=""/>
-          </div>
-          <div className="summary-list">
-            <div className="row"><span>Datasets</span><b>{repos.size}</b></div>
-            <div className="row"><span>Codecs</span><b>{vcodecs.size}</b></div>
-            <div className="row"><span>Pixel formats</span><b>{pixs.size}</b></div>
-            <div className="row"><span>GOP values</span><b>{gs.size}</b></div>
-            <div className="row"><span>CRF values</span><b>{crfs.size}</b></div>
-            <div className="row"><span>Access modes</span><b>{tsModes.size}</b></div>
-            <div className="row"><span>Backends</span><b>{backends.size}</b></div>
-            <div className="row"><span>Samples / config</span><b>{samples}</b></div>
-            <div className="row" style={{marginTop:8, paddingTop:12, borderTop:'1px solid var(--border-1)', borderBottom:'none'}}>
-              <span style={{color:'var(--fg-1)', fontWeight:600}}>Est. wall time</span>
-              <b style={{color: estMinutes>60 ? 'var(--hf-red)' : 'var(--hf-green)'}}>~{estMinutes} min</b>
-            </div>
-          </div>
-        </div>
-
-        <div className="card" style={{marginTop:'var(--space-4)'}}>
-          <h3 style={{display:'flex', alignItems:'center', gap:6}}>
-            Queue
-            <span style={{marginLeft:'auto', fontSize:11, color:'var(--fg-3)', fontWeight:400}}>5 recent</span>
-          </h3>
-          <table className="queue-table">
-            <thead>
-              <tr><th>ID</th><th>Status</th><th>Submitted</th></tr>
-            </thead>
-            <tbody>
-              {queue.map(q => (
-                <tr key={q.id}>
-                  <td>{q.id}</td>
-                  <td>
-                    <span className={`queue-status ${q.status}`}>
-                      <span className="dot"/>
-                      {q.status}{q.progress?` (${q.progress})`:''}
-                    </span>
-                  </td>
-                  <td style={{color:'var(--fg-3)'}}>{q.when}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ---------- Parameters ----------
-// Descriptions live in COLUMNS (data.js). Group structure stays here so we can
-// narrate the concept groupings.
-const PARAM_GROUPS = [
-  { t: 'Inputs — what you benchmark',
-    desc: 'The corpus. Each dataset is a LeRobot episode recording with a few minutes of RGB observations.',
-    keys: ['repo_id'] },
-  { t: 'Encoding — how the video is compressed',
-    desc: 'Passed to the FFmpeg/PyAV encoder. These are the knobs operators actually tune.',
-    keys: ['vcodec', 'pix_fmt', 'g', 'crf'] },
-  { t: 'Decoding — how you read it back',
-    desc: 'The other half of the equation. The same MP4 can decode very differently depending on library and access pattern.',
-    keys: ['backend', 'timestamps_mode'] },
-  { t: 'Fidelity metrics — how faithful is decoded frame vs. source',
-    desc: 'We decode the compressed video, re-read the original PNG frames, and compare pixel-for-pixel.',
-    keys: ['median_mse', 'median_psnr', 'median_ssim'] },
-  { t: 'Performance metrics — how fast, how small',
-    desc: 'The cost side. Run on a single CPU thread unless noted.',
-    keys: ['encoding_time_ms', 'video_images_size_ratio', 'median_load_time_video_ms', 'video_images_load_time_ratio'] },
-];
-
-function Parameters() {
-  return (
-    <div className="params-page">
-      {PARAM_GROUPS.map((g, gi) => (
-        <section className="param-group" key={gi}>
-          <div className="param-group-head">
-            <h3>{g.t}</h3>
-            <p>{g.desc}</p>
-          </div>
-          <div className="param-cards">
-            {g.keys.map(k => {
-              const col = COLUMNS.find(c => c.key === k);
-              if (!col) return null;
-              return (
-                <div className="param-card" key={k}>
-                  <div className="param-card-head">
-                    <code className="param-key">{k}</code>
-                    <span className="param-label">{col.label.replace('\n', ' ')}</span>
-                  </div>
-                  <p>{col.desc}</p>
-                </div>
-              );
-            })}
-          </div>
-        </section>
-      ))}
-    </div>
-  );
-}
-
-// ---------- About ----------
-function About() {
-  return (
-    <div className="about-grid">
-      <div className="prose">
-        <h3 id="what">What this is</h3>
-        <p>
-          A benchmark for video encoding and decoding in the context of robotics datasets. LeRobot stores episode observations as MP4 rather than PNG sequences — this page quantifies <i>how much</i> we gain in size and what we pay in decode latency and pixel fidelity.
-        </p>
-        <p>
-          We sweep over four axes — <code>vcodec</code>, <code>pix_fmt</code>, <code>g</code> (GOP size), and <code>crf</code> (quality) — across four representative datasets, and decode each clip through <code>pyav</code>, <code>torchcodec</code>, and <code>video_reader</code>.
-        </p>
-
-        <h3 id="metrics">Metrics</h3>
-        <ul>
-          <li><b>Size ratio</b> — encoded video ÷ sum of PNG frames. Lower is smaller on disk.</li>
-          <li><b>Decode time</b> — median wall-clock to fetch N frames at a given timestamp.</li>
-          <li><b>PSNR / SSIM / MSE</b> — fidelity of decoded frames against the uncompressed source.</li>
-          <li><b>Encoding time</b> — wall-clock to encode the whole clip, end-to-end.</li>
-        </ul>
-
-        <h3 id="access">Access patterns</h3>
-        <p>
-          Decode cost depends heavily on <i>how</i> frames are requested. <code>1_frame</code> pays the full seek+IDR cost per sample; <code>6_frames</code> amortizes it across contiguous frames; <code>2_frames_4_space</code> probes the worst case where the decoder must step across two distant windows.
-        </p>
-
-        <h3 id="repro">Reproduce locally</h3>
-        <p>The full sweep is open source. From the <code>lerobot</code> repo:</p>
-        <pre style={{background:'var(--hf-gray-900)', color:'var(--hf-gray-100)', padding:'var(--space-4)', borderRadius:'var(--radius-md)', fontSize:'var(--fs-xs)', overflow:'auto'}}>
-{`python benchmark/video/run_video_benchmark.py \\
-  --output-dir outputs/video_benchmark \\
-  --repo-ids lerobot/pusht_image lerobot/kitchen \\
-  --vcodec h264 hevc libsvtav1 \\
-  --pix-fmt yuv420p yuv444p \\
-  --g 2 10 40 \\
-  --crf 10 20 30 \\
-  --timestamps-modes 1_frame 2_frames 6_frames \\
-  --backends pyav torchcodec \\
-  --num-samples 50`}
-        </pre>
-
-        <h3 id="contrib">Contribute</h3>
-        <p>
-          Submit your own configurations through the <b>Submit</b> tab. A background worker picks them up and pushes results to the Hub so the whole community benefits from the same measurements.
-        </p>
-      </div>
-
-      <aside className="about-toc">
-        <div className="t">On this page</div>
-        <a href="#what">What this is</a>
-        <a href="#metrics">Metrics</a>
-        <a href="#access">Access patterns</a>
-        <a href="#repro">Reproduce locally</a>
-        <a href="#contrib">Contribute</a>
-      </aside>
-    </div>
-  );
-}
-
-// ---------- Tweaks ----------
-function Tweaks({ state, setState }) {
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
-    const onMsg = (e) => {
-      if (e.data?.type === '__activate_edit_mode') setOpen(true);
-      if (e.data?.type === '__deactivate_edit_mode') setOpen(false);
-    };
-    window.addEventListener('message', onMsg);
-    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
-    return () => window.removeEventListener('message', onMsg);
-  }, []);
-  const set = (k, v) => {
-    const next = { ...state, [k]: v };
-    setState(next);
-    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
-  };
-  return (
-    <div className={`tweaks-panel ${open?'open':''}`}>
-      <h5>⚡ Tweaks</h5>
-      <div className="tweak-row">
-        <label>Density</label>
-        <select value={state.density} onChange={e=>set('density', e.target.value)}>
-          <option value="comfortable">Comfortable</option>
-          <option value="compact">Compact</option>
-        </select>
-      </div>
-      <div className="tweak-row">
-        <label>Theme</label>
-        <select value={state.theme} onChange={e=>set('theme', e.target.value)}>
-          <option value="light">Light</option>
-          <option value="dark">Dark</option>
-        </select>
-      </div>
-      <div className="tweak-row">
-        <label>Hero mascot</label>
-        <select value={state.mascot} onChange={e=>set('mascot', e.target.value)}>
-          <option value="vision">Vision</option>
-          <option value="rocket">Rocket</option>
-          <option value="coding">Coding</option>
-          <option value="lab">Lab</option>
-          <option value="hello">Hello</option>
-          <option value="none">None</option>
-        </select>
-      </div>
-      <div className="tweak-row">
-        <label>Hero style</label>
-        <select value={state.hero} onChange={e=>set('hero', e.target.value)}>
-          <option value="cream">Cream</option>
-          <option value="yellow">Yellow</option>
-          <option value="white">Minimal white</option>
-        </select>
-      </div>
-    </div>
-  );
-}
-
-// ---------- App ----------
-function App() {
-  const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
-    "density": "comfortable",
-    "theme": "light",
-    "mascot": "vision",
-    "hero": "cream"
-  }/*EDITMODE-END*/;
-  const [tweaks, setTweaks] = useState(TWEAKS_DEFAULTS);
-
-  useEffect(() => {
-    document.body.classList.toggle('density-compact', tweaks.density === 'compact');
-    document.body.classList.toggle('dark', tweaks.theme === 'dark');
-  }, [tweaks.density, tweaks.theme]);
-
-  const [tab, setTab] = useState(() => {
-    const t = localStorage.getItem('vb_tab');
-    return (t === 'params' ? 'about' : t) || 'results';
-  });
-  useEffect(() => { localStorage.setItem('vb_tab', tab); }, [tab]);
-
-  const [filters, setFilters] = useState({});
-  const [visible, setVisible] = useState(new Set(COLUMNS.map(c => c.key)));
-
-  const filteredRows = useMemo(() => {
-    return ALL_ROWS.filter(r => {
-      for (const [k, vs] of Object.entries(filters)) {
-        if (vs && vs.length && !vs.includes(String(r[k]))) return false;
-      }
-      return true;
-    });
-  }, [filters]);
-
-  // Tooltip handler
-  useEffect(() => {
-    const tt = document.createElement('div'); tt.className='tt'; document.body.appendChild(tt);
-    const onOver = (e) => {
-      const el = e.target.closest('[data-tt]'); if (!el) return;
-      tt.textContent = el.getAttribute('data-tt');
-      const rect = el.getBoundingClientRect();
-      tt.style.left = (rect.left + rect.width/2 - 140) + 'px';
-      tt.style.top = (rect.top - 8 - 40 + window.scrollY) + 'px';
-      tt.classList.add('show');
-    };
-    const onOut = (e) => { if (e.target.closest('[data-tt]')) tt.classList.remove('show'); };
-    document.addEventListener('mouseover', onOver);
-    document.addEventListener('mouseout', onOut);
-    return () => { document.removeEventListener('mouseover', onOver); document.removeEventListener('mouseout', onOut); tt.remove(); };
-  }, []);
-
-  const heroClass = tweaks.hero === 'yellow' ? { background: 'var(--hf-yellow)' } :
-                    tweaks.hero === 'white' ? { background: 'var(--hf-white)', border: '1px solid var(--border-1)' } :
-                    {};
-
-  const mascotSrc = tweaks.mascot === 'none' ? null : (window.__MASCOTS && window.__MASCOTS[tweaks.mascot]) || `assets/huggy-${tweaks.mascot}.png`;
-
-  const tabs = [
-    { k: 'results', label: 'Results', count: filteredRows.length },
-    { k: 'leaderboards', label: 'Leaderboards' },
-    { k: 'compare', label: 'Compare' },
-    { k: 'submit', label: 'Submit' },
-    { k: 'about', label: 'About & parameters' },
-  ];
-
-  return (
-    <div>
-      {/* Main */}
-      <div className="page">
-        {/* Hero */}
-        <section className="hero" style={heroClass}>
-          <div>
-            <span className="hero-tag"><span className="dot"/> Open benchmark</span>
-            <h1>Which video codec belongs in your robotics dataset?</h1>
-            <p className="subtitle">
-              Encode with h264, HEVC, or AV1. Decode with PyAV, torchcodec, or video_reader. Across four LeRobot datasets, {ALL_ROWS.length.toLocaleString()} configurations tell you exactly what you trade for what.
-            </p>
-            <div style={{display:'flex', gap:'var(--space-3)'}}>
-              <button className="btn primary" onClick={()=>setTab('results')}>Explore results →</button>
-              <button className="btn" onClick={()=>setTab('submit')}>Submit a run</button>
-            </div>
-            <div className="hero-stats">
-              <div className="hero-stat"><div className="v">{ALL_ROWS.length.toLocaleString()}</div><div className="l">Configs</div></div>
-              <div className="hero-stat"><div className="v">3</div><div className="l">Codecs</div></div>
-              <div className="hero-stat"><div className="v">{REPOS.length}</div><div className="l">Datasets</div></div>
-              <div className="hero-stat"><div className="v">4</div><div className="l">Access modes</div></div>
-            </div>
-          </div>
-          {mascotSrc && <div className="hero-mascot"><img src={mascotSrc} alt=""/></div>}
-        </section>
-
-        {/* Tabs */}
-        <div className="tabs-bar">
-          {tabs.map(t => (
-            <button key={t.k} className={`tab-btn ${tab===t.k?'active':''}`} onClick={()=>setTab(t.k)}>
-              {t.label}
-              {t.count != null && <span className="tab-count">{t.count}</span>}
-            </button>
-          ))}
-        </div>
-
-        {/* Panels */}
-        <div className={`tab-panel ${tab==='results'?'active':''}`}>
-          <FilterBar filters={filters} setFilters={setFilters} visible={visible} setVisible={setVisible} />
-          <BenchTable rows={filteredRows} visible={visible} />
-        </div>
-
-        <div className={`tab-panel ${tab==='leaderboards'?'active':''}`}>
-          <div className="section-title">
-            <div>
-              <h2>Leaderboards</h2>
-              <p style={{color:'var(--fg-2)', fontSize:'var(--fs-sm)', margin:'4px 0 0', maxWidth:'780px'}}>
-                The top configurations on six normalized axes — encoding time, decode time, size, MSE, PSNR, SSIM. Bigger polygon means a better all-rounder; each axis is rescaled so <b>1.0 = best-in-class</b>.
-              </p>
-            </div>
-          </div>
-          <Leaderboards/>
-        </div>
-
-        <div className={`tab-panel ${tab==='compare'?'active':''}`}>
-          <div className="section-title">
-            <div>
-              <h2>Compare parameters</h2>
-              <p style={{color:'var(--fg-2)', fontSize:'var(--fs-sm)', margin:'4px 0 0'}}>Pick any metric and any dimension to see how the field behaves.</p>
-            </div>
-          </div>
-          <Compare/>
-        </div>
-
-        <div className={`tab-panel ${tab==='submit'?'active':''}`}>
-          <div className="section-title">
-            <div>
-              <h2>Submit a benchmark</h2>
-              <p style={{color:'var(--fg-2)', fontSize:'var(--fs-sm)', margin:'4px 0 0'}}>Queue a configuration sweep; results are pushed to the Hub and appear here automatically.</p>
-            </div>
-          </div>
-          <Submit/>
-        </div>
-
-        <div className={`tab-panel ${tab==='about'?'active':''}`}>
-          <div className="section-title">
-            <div>
-              <h2>About this benchmark</h2>
-              <p style={{color:'var(--fg-2)', fontSize:'var(--fs-sm)', margin:'4px 0 0'}}>Methodology, metrics, and how to reproduce — followed by a full parameter reference.</p>
-            </div>
-          </div>
-          <About/>
-          <div className="section-title" style={{marginTop:'var(--space-8)'}}>
-            <div>
-              <h2>Parameters reference</h2>
-              <p style={{color:'var(--fg-2)', fontSize:'var(--fs-sm)', margin:'4px 0 0', maxWidth:'780px'}}>A plain-English reference for every knob you can turn and every number we report.</p>
-            </div>
-          </div>
-          <Parameters/>
-        </div>
-
-        {/* Citation */}
-        <div style={{marginTop:'var(--space-8)'}}>
-          <h3 style={{fontSize:'var(--fs-md)', fontWeight:600, marginBottom:'var(--space-3)'}}>Citation</h3>
-          <div className="citation">
-            <button className="copy-btn" onClick={(e)=>{navigator.clipboard?.writeText(e.target.parentNode.innerText.replace('Copy',''));}}>Copy</button>
-{`@misc{cadene2024lerobot,
-  author  = {Cadene, Remi and Alibert, Simon and Pascal, Caroline and others},
-  title   = {LeRobot: State-of-the-art Machine Learning for Real-World Robotics in Pytorch},
-  url     = {https://github.com/huggingface/lerobot},
-  year    = {2024}
-}`}
-          </div>
-        </div>
-      </div>
-
-      <Tweaks state={tweaks} setState={setTweaks} />
-    </div>
-  );
-}
-
-class __EB extends React.Component {
-  constructor(p){super(p);this.state={err:null};}
-  componentDidCatch(err, info){ console.error('App error:', err, info.componentStack); this.setState({err: err.message + '\n' + (info.componentStack||'')}); }
-  render(){ if (this.state.err) return <pre style={{padding:20,color:'red',fontSize:11,whiteSpace:'pre-wrap'}}>{this.state.err}</pre>; return this.props.children; }
-}
-ReactDOM.createRoot(document.getElementById('root')).render(<__EB><App/></__EB>);

assets/colors_and_type.css

@@ -1,169 +0,0 @@
-/* ==========================================================================
-   Hugging Face — Colors & Type
-   Sourced from the official HF brand (chunte-hfba) and huggingface.co.
-   ========================================================================== */
-
-:root {
-  /* ---------- Brand core ---------- */
-  --hf-yellow:        #FFD21E;  /* The mascot yellow; primary surface accent */
-  --hf-yellow-deep:   #FFBD59;  /* Shadow side of the face */
-  --hf-orange:        #FF9D00;  /* Secondary warm accent, crescent shadow */
-  --hf-orange-soft:   #FFAD05;
-  --hf-blue:          #496EF0;  /* Electric blue — wordmark, outlines */
-  --hf-blue-deep:     #353E60;  /* Dark blue for body text on warm bgs */
-  --hf-red:           #DB3328;  /* Mascot mouth / accent */
-  --hf-green:         #009B3A;
-  --hf-purple:        #9747FF;  /* Secondary accent (used on wordmark frames) */
-
-  /* Rainbow logo gradient stops (ordered) */
-  --hf-rainbow-1: #FFD21E;
-  --hf-rainbow-2: #FF9D00;
-  --hf-rainbow-3: #DB3328;
-  --hf-rainbow-4: #9747FF;
-  --hf-rainbow-5: #496EF0;
-  --hf-rainbow-6: #009B3A;
-
-  /* ---------- Neutrals (from huggingface.co) ---------- */
-  --hf-black:         #000000;
-  --hf-gray-900:      #1B1B1D;
-  --hf-gray-800:      #32343D;
-  --hf-gray-700:      #475169;  /* Sidebar text */
-  --hf-gray-600:      #6A768F;  /* Secondary text */
-  --hf-gray-500:      #9BA3AF;
-  --hf-gray-400:      #D1D5DB;
-  --hf-gray-300:      #E5E7EB;
-  --hf-gray-200:      #EEEFF2;  /* Subtle border */
-  --hf-gray-100:      #F5F6F8;  /* Page background */
-  --hf-gray-50:       #FAFAFA;
-  --hf-white:         #FFFFFF;
-
-  /* ---------- Warm brand backgrounds ---------- */
-  --hf-cream:         #FFF8DE;  /* Soft yellow card bg */
-  --hf-cream-deep:    #FFF2C5;
-  --hf-paper:         #FFF0B4;
-
-  /* ---------- Semantic (UI surfaces on huggingface.co) ---------- */
-  --fg-1:             var(--hf-gray-900);   /* Primary body copy */
-  --fg-2:             var(--hf-gray-700);   /* Secondary body copy */
-  --fg-3:             var(--hf-gray-600);   /* Muted / meta */
-  --fg-inverse:       var(--hf-white);
-  --fg-link:          var(--hf-blue);
-  --fg-accent:        var(--hf-blue);
-
-  --bg-1:             var(--hf-white);       /* Card surface */
-  --bg-2:             var(--hf-gray-100);    /* Page background */
-  --bg-3:             var(--hf-gray-200);    /* Inset surface */
-  --bg-brand:         var(--hf-yellow);
-  --bg-brand-soft:    var(--hf-cream);
-  --bg-invert:        var(--hf-gray-900);
-
-  --border-1:         var(--hf-gray-200);
-  --border-2:         var(--hf-gray-300);
-  --border-strong:    var(--hf-gray-800);
-
-  /* Pill / product chips seen throughout hf.co */
-  --tag-models-fg:    #B45309;   /* amber-700 */
-  --tag-models-bg:    #FEF3C7;
-  --tag-datasets-fg:  #1D4ED8;   /* blue-700 */
-  --tag-datasets-bg:  #DBEAFE;
-  --tag-spaces-fg:    #7E22CE;   /* purple-700 */
-  --tag-spaces-bg:    #F3E8FF;
-  --tag-papers-fg:    #047857;   /* emerald-700 */
-  --tag-papers-bg:    #D1FAE5;
-  --tag-posts-fg:     #BE185D;   /* pink-700 */
-  --tag-posts-bg:     #FCE7F3;
-
-  /* ---------- Radius ---------- */
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;   /* hf.co default control radius */
-  --radius-lg: 12px;  /* Cards */
-  --radius-xl: 16px;
-  --radius-2xl: 24px; /* Brand poster frames */
-  --radius-pill: 999px;
-
-  /* ---------- Elevation ---------- */
-  --shadow-xs: 0 1px 1px rgba(27, 27, 29, 0.04);
-  --shadow-sm: 0 1px 2px rgba(27, 27, 29, 0.06), 0 1px 3px rgba(27, 27, 29, 0.08);
-  --shadow-md: 0 4px 10px rgba(27, 27, 29, 0.06), 0 2px 4px rgba(27, 27, 29, 0.06);
-  --shadow-lg: 0 12px 24px rgba(27, 27, 29, 0.08), 0 4px 8px rgba(27, 27, 29, 0.04);
-  --shadow-brand: 0 10px 30px rgba(73, 110, 240, 0.20);
-
-  /* ---------- Spacing (4-pt base, consistent with tailwind hf uses) ---------- */
-  --space-1:  4px;
-  --space-2:  8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-10: 40px;
-  --space-12: 48px;
-  --space-16: 64px;
-  --space-24: 96px;
-
-  /* ---------- Typography ----------
-     hf.co uses "Source Sans 3" (successor to Source Sans Pro) for UI,
-     IBM Plex Mono for code/tags, and a heavy slanted display face
-     (Hugging Face wordmark proper) for marketing. Substitution: we use
-     Source Sans 3 + IBM Plex Mono from Google Fonts; the display slanted
-     wordmark is used only via the supplied SVG.
-  */
-  --font-sans: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui,
-               -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
-  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
-               Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-display: "Source Sans 3", var(--font-sans); /* For big headings */
-
-  /* Type scale — matches hf.co docs + marketing pages */
-  --fs-xs:   12px; --lh-xs:   16px;
-  --fs-sm:   14px; --lh-sm:   20px;
-  --fs-base: 16px; --lh-base: 24px;
-  --fs-md:   18px; --lh-md:   28px;
-  --fs-lg:   20px; --lh-lg:   28px;
-  --fs-xl:   24px; --lh-xl:   32px;
-  --fs-2xl:  30px; --lh-2xl:  36px;
-  --fs-3xl:  36px; --lh-3xl:  44px;
-  --fs-4xl:  48px; --lh-4xl:  56px;
-  --fs-5xl:  60px; --lh-5xl:  68px;
-  --fs-6xl:  80px; --lh-6xl:  88px;
-
-  --fw-regular: 400;
-  --fw-medium:  500;
-  --fw-semibold: 600;
-  --fw-bold:    700;
-  --fw-black:   900;
-
-  /* ---------- Motion ---------- */
-  --ease-out: cubic-bezier(.16,1,.3,1);
-  --ease-spring: cubic-bezier(.34,1.56,.64,1);
-  --t-quick: 120ms;
-  --t-base:  200ms;
-  --t-slow:  360ms;
-}
-
-/* ==========================================================================
-   Semantic element styles. Include with:  <link rel="stylesheet" href="colors_and_type.css">
-   ========================================================================== */
-html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-2); -webkit-font-smoothing: antialiased; }
-
-h1, .h1 { font-family: var(--font-display); font-size: var(--fs-5xl); line-height: var(--lh-5xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--fg-1); }
-h2, .h2 { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: var(--lh-3xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--fg-1); }
-h3, .h3 { font-family: var(--font-sans);    font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold); color: var(--fg-1); }
-h4, .h4 { font-family: var(--font-sans);    font-size: var(--fs-xl);  line-height: var(--lh-xl);  font-weight: var(--fw-semibold); color: var(--fg-1); }
-h5, .h5 { font-family: var(--font-sans);    font-size: var(--fs-lg);  line-height: var(--lh-lg);  font-weight: var(--fw-semibold); color: var(--fg-1); }
-h6, .h6 { font-family: var(--font-sans);    font-size: var(--fs-md);  line-height: var(--lh-md);  font-weight: var(--fw-semibold); color: var(--fg-1); }
-
-p, .p   { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-1); }
-.small  { font-size: var(--fs-sm);   line-height: var(--lh-sm);   color: var(--fg-2); }
-.meta   { font-size: var(--fs-xs);   line-height: var(--lh-xs);   color: var(--fg-3); }
-
-code, kbd, pre, .mono { font-family: var(--font-mono); font-size: .92em; }
-code { background: var(--bg-3); border-radius: var(--radius-xs); padding: 2px 6px; }
-pre  { background: var(--hf-gray-900); color: var(--hf-gray-100); border-radius: var(--radius-md); padding: var(--space-4); overflow: auto; }
-
-a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; }
-a:hover { opacity: .8; }
-
-hr { border: 0; border-top: 1px solid var(--border-1); }

colors_and_type.css

@@ -1,169 +0,0 @@
-/* ==========================================================================
-   Hugging Face — Colors & Type
-   Sourced from the official HF brand (chunte-hfba) and huggingface.co.
-   ========================================================================== */
-
-:root {
-  /* ---------- Brand core ---------- */
-  --hf-yellow:        #FFD21E;  /* The mascot yellow; primary surface accent */
-  --hf-yellow-deep:   #FFBD59;  /* Shadow side of the face */
-  --hf-orange:        #FF9D00;  /* Secondary warm accent, crescent shadow */
-  --hf-orange-soft:   #FFAD05;
-  --hf-blue:          #496EF0;  /* Electric blue — wordmark, outlines */
-  --hf-blue-deep:     #353E60;  /* Dark blue for body text on warm bgs */
-  --hf-red:           #DB3328;  /* Mascot mouth / accent */
-  --hf-green:         #009B3A;
-  --hf-purple:        #9747FF;  /* Secondary accent (used on wordmark frames) */
-
-  /* Rainbow logo gradient stops (ordered) */
-  --hf-rainbow-1: #FFD21E;
-  --hf-rainbow-2: #FF9D00;
-  --hf-rainbow-3: #DB3328;
-  --hf-rainbow-4: #9747FF;
-  --hf-rainbow-5: #496EF0;
-  --hf-rainbow-6: #009B3A;
-
-  /* ---------- Neutrals (from huggingface.co) ---------- */
-  --hf-black:         #000000;
-  --hf-gray-900:      #1B1B1D;
-  --hf-gray-800:      #32343D;
-  --hf-gray-700:      #475169;  /* Sidebar text */
-  --hf-gray-600:      #6A768F;  /* Secondary text */
-  --hf-gray-500:      #9BA3AF;
-  --hf-gray-400:      #D1D5DB;
-  --hf-gray-300:      #E5E7EB;
-  --hf-gray-200:      #EEEFF2;  /* Subtle border */
-  --hf-gray-100:      #F5F6F8;  /* Page background */
-  --hf-gray-50:       #FAFAFA;
-  --hf-white:         #FFFFFF;
-
-  /* ---------- Warm brand backgrounds ---------- */
-  --hf-cream:         #FFF8DE;  /* Soft yellow card bg */
-  --hf-cream-deep:    #FFF2C5;
-  --hf-paper:         #FFF0B4;
-
-  /* ---------- Semantic (UI surfaces on huggingface.co) ---------- */
-  --fg-1:             var(--hf-gray-900);   /* Primary body copy */
-  --fg-2:             var(--hf-gray-700);   /* Secondary body copy */
-  --fg-3:             var(--hf-gray-600);   /* Muted / meta */
-  --fg-inverse:       var(--hf-white);
-  --fg-link:          var(--hf-blue);
-  --fg-accent:        var(--hf-blue);
-
-  --bg-1:             var(--hf-white);       /* Card surface */
-  --bg-2:             var(--hf-gray-100);    /* Page background */
-  --bg-3:             var(--hf-gray-200);    /* Inset surface */
-  --bg-brand:         var(--hf-yellow);
-  --bg-brand-soft:    var(--hf-cream);
-  --bg-invert:        var(--hf-gray-900);
-
-  --border-1:         var(--hf-gray-200);
-  --border-2:         var(--hf-gray-300);
-  --border-strong:    var(--hf-gray-800);
-
-  /* Pill / product chips seen throughout hf.co */
-  --tag-models-fg:    #B45309;   /* amber-700 */
-  --tag-models-bg:    #FEF3C7;
-  --tag-datasets-fg:  #1D4ED8;   /* blue-700 */
-  --tag-datasets-bg:  #DBEAFE;
-  --tag-spaces-fg:    #7E22CE;   /* purple-700 */
-  --tag-spaces-bg:    #F3E8FF;
-  --tag-papers-fg:    #047857;   /* emerald-700 */
-  --tag-papers-bg:    #D1FAE5;
-  --tag-posts-fg:     #BE185D;   /* pink-700 */
-  --tag-posts-bg:     #FCE7F3;
-
-  /* ---------- Radius ---------- */
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;   /* hf.co default control radius */
-  --radius-lg: 12px;  /* Cards */
-  --radius-xl: 16px;
-  --radius-2xl: 24px; /* Brand poster frames */
-  --radius-pill: 999px;
-
-  /* ---------- Elevation ---------- */
-  --shadow-xs: 0 1px 1px rgba(27, 27, 29, 0.04);
-  --shadow-sm: 0 1px 2px rgba(27, 27, 29, 0.06), 0 1px 3px rgba(27, 27, 29, 0.08);
-  --shadow-md: 0 4px 10px rgba(27, 27, 29, 0.06), 0 2px 4px rgba(27, 27, 29, 0.06);
-  --shadow-lg: 0 12px 24px rgba(27, 27, 29, 0.08), 0 4px 8px rgba(27, 27, 29, 0.04);
-  --shadow-brand: 0 10px 30px rgba(73, 110, 240, 0.20);
-
-  /* ---------- Spacing (4-pt base, consistent with tailwind hf uses) ---------- */
-  --space-1:  4px;
-  --space-2:  8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-10: 40px;
-  --space-12: 48px;
-  --space-16: 64px;
-  --space-24: 96px;
-
-  /* ---------- Typography ----------
-     hf.co uses "Source Sans 3" (successor to Source Sans Pro) for UI,
-     IBM Plex Mono for code/tags, and a heavy slanted display face
-     (Hugging Face wordmark proper) for marketing. Substitution: we use
-     Source Sans 3 + IBM Plex Mono from Google Fonts; the display slanted
-     wordmark is used only via the supplied SVG.
-  */
-  --font-sans: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui,
-               -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
-  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
-               Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-display: "Source Sans 3", var(--font-sans); /* For big headings */
-
-  /* Type scale — matches hf.co docs + marketing pages */
-  --fs-xs:   12px; --lh-xs:   16px;
-  --fs-sm:   14px; --lh-sm:   20px;
-  --fs-base: 16px; --lh-base: 24px;
-  --fs-md:   18px; --lh-md:   28px;
-  --fs-lg:   20px; --lh-lg:   28px;
-  --fs-xl:   24px; --lh-xl:   32px;
-  --fs-2xl:  30px; --lh-2xl:  36px;
-  --fs-3xl:  36px; --lh-3xl:  44px;
-  --fs-4xl:  48px; --lh-4xl:  56px;
-  --fs-5xl:  60px; --lh-5xl:  68px;
-  --fs-6xl:  80px; --lh-6xl:  88px;
-
-  --fw-regular: 400;
-  --fw-medium:  500;
-  --fw-semibold: 600;
-  --fw-bold:    700;
-  --fw-black:   900;
-
-  /* ---------- Motion ---------- */
-  --ease-out: cubic-bezier(.16,1,.3,1);
-  --ease-spring: cubic-bezier(.34,1.56,.64,1);
-  --t-quick: 120ms;
-  --t-base:  200ms;
-  --t-slow:  360ms;
-}
-
-/* ==========================================================================
-   Semantic element styles. Include with:  <link rel="stylesheet" href="colors_and_type.css">
-   ========================================================================== */
-html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-2); -webkit-font-smoothing: antialiased; }
-
-h1, .h1 { font-family: var(--font-display); font-size: var(--fs-5xl); line-height: var(--lh-5xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--fg-1); }
-h2, .h2 { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: var(--lh-3xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--fg-1); }
-h3, .h3 { font-family: var(--font-sans);    font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold); color: var(--fg-1); }
-h4, .h4 { font-family: var(--font-sans);    font-size: var(--fs-xl);  line-height: var(--lh-xl);  font-weight: var(--fw-semibold); color: var(--fg-1); }
-h5, .h5 { font-family: var(--font-sans);    font-size: var(--fs-lg);  line-height: var(--lh-lg);  font-weight: var(--fw-semibold); color: var(--fg-1); }
-h6, .h6 { font-family: var(--font-sans);    font-size: var(--fs-md);  line-height: var(--lh-md);  font-weight: var(--fw-semibold); color: var(--fg-1); }
-
-p, .p   { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-1); }
-.small  { font-size: var(--fs-sm);   line-height: var(--lh-sm);   color: var(--fg-2); }
-.meta   { font-size: var(--fs-xs);   line-height: var(--lh-xs);   color: var(--fg-3); }
-
-code, kbd, pre, .mono { font-family: var(--font-mono); font-size: .92em; }
-code { background: var(--bg-3); border-radius: var(--radius-xs); padding: 2px 6px; }
-pre  { background: var(--hf-gray-900); color: var(--hf-gray-100); border-radius: var(--radius-md); padding: var(--space-4); overflow: auto; }
-
-a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; }
-a:hover { opacity: .8; }
-
-hr { border: 0; border-top: 1px solid var(--border-1); }

data.js

@@ -1,153 +0,0 @@
-// Mock benchmark data that mirrors the real schema from the Gradio app.
-// Columns match COLUMN_HEADER_LABELS in the source.
-// Fields: repo_id, vcodec, pix_fmt, g, crf, timestamps_mode, backend,
-//         video_images_size_ratio, video_images_load_time_ratio,
-//         median_load_time_video_ms, std_load_time_video_ms,
-//         median_psnr, std_psnr, median_ssim, std_ssim,
-//         median_mse, std_mse, encoding_fps, encoding_time_ms
-
-const REPOS = [
-  "lerobot/pusht_image",
-  "lerobot/aloha_mobile_shrimp_image",
-  "lerobot/paris_street",
-  "lerobot/kitchen",
-];
-const VCODECS = ["h264", "hevc", "libsvtav1"];
-const PIX_FMTS = ["yuv444p", "yuv420p"];
-const G_VALUES = [1, 2, 6, 15, 40, 100];
-const CRF_VALUES = [10, 20, 30, 40, 50];
-const TS_MODES = ["1_frame", "2_frames", "2_frames_4_space", "6_frames"];
-const BACKENDS = ["pyav", "torchcodec"];
-
-// Deterministic pseudo-random so the table is stable across reloads
-function mulberry32(seed) {
-  return function () {
-    let t = (seed += 0x6d2b79f5);
-    t = Math.imul(t ^ (t >>> 15), t | 1);
-    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-}
-
-function codecBias(v) {
-  if (v === "libsvtav1") return { size: 0.35, psnr: 1.8, speed: 1.15, enc: 0.6 };
-  if (v === "hevc") return { size: 0.55, psnr: 1.1, speed: 1.02, enc: 0.85 };
-  return { size: 0.85, psnr: 0.0, speed: 0.92, enc: 1.15 }; // h264
-}
-
-function genRows() {
-  const rand = mulberry32(42);
-  const rows = [];
-  for (const repo of REPOS) {
-    const repoScale = repo.includes("pusht") ? 0.6 : repo.includes("kitchen") ? 1.25 : 1.0;
-    for (const vcodec of VCODECS) {
-      for (const pix of PIX_FMTS) {
-        // libsvtav1 only with yuv420p
-        if (vcodec === "libsvtav1" && pix !== "yuv420p") continue;
-        for (const g of G_VALUES) {
-          for (const crf of CRF_VALUES) {
-            for (const ts of TS_MODES) {
-              for (const be of BACKENDS) {
-                // torchcodec doesn't exist for av1 on all
-                if (vcodec === "libsvtav1" && be === "torchcodec" && rand() < 0.3) continue;
-                const b = codecBias(vcodec);
-                const r = 0.5 + rand() * 0.5;
-
-                // Compression ratio (smaller is better). crf high + g high → small file
-                const sizeRatio = (b.size * (1 - crf * 0.008) * (1 / (1 + g * 0.03)) * (pix === "yuv420p" ? 0.85 : 1)) * (0.8 + rand() * 0.4);
-
-                // Decode time ms (lower is better). Multi-frame access ~ faster per-frame.
-                const tsMult = ts === "1_frame" ? 1.0 : ts === "2_frames" ? 0.68 : ts === "2_frames_4_space" ? 0.72 : 0.35;
-                const beMult = be === "torchcodec" ? 0.62 : 1.0;
-                const medDec = 7.2 * b.speed * repoScale * tsMult * beMult * (0.9 + rand() * 0.2);
-                const stdDec = medDec * (0.08 + rand() * 0.12);
-
-                // PSNR (higher is better) — av1 best, h264 worst. crf low → high psnr.
-                const medPsnr = 40 + b.psnr - crf * 0.22 - g * 0.02 + (pix === "yuv444p" ? 0.6 : 0) + (rand() * 0.8 - 0.4);
-                const stdPsnr = 0.3 + rand() * 0.5;
-
-                // SSIM
-                const medSsim = Math.min(0.999, 0.92 + b.psnr * 0.01 - crf * 0.0015 + rand() * 0.01);
-                const stdSsim = 0.001 + rand() * 0.004;
-
-                const medMse = Math.max(0.1, 4 + crf * 0.6 - b.psnr * 0.8 + rand() * 1.2);
-                const stdMse = medMse * (0.1 + rand() * 0.2);
-
-                const loadRatio = 0.3 + rand() * 0.6 + (ts === "1_frame" ? 0.2 : 0);
-
-                const encFps = 120 / (b.enc * repoScale * (1 + crf * 0.004));
-                const encMs = 1000 / encFps;
-
-                rows.push({
-                  repo_id: repo,
-                  vcodec, pix_fmt: pix, g, crf,
-                  timestamps_mode: ts, backend: be,
-                  video_images_size_ratio: sizeRatio,
-                  video_images_load_time_ratio: loadRatio,
-                  median_load_time_video_ms: medDec,
-                  std_load_time_video_ms: stdDec,
-                  median_load_time_images_ms: medDec * (1.6 + rand() * 0.4),
-                  std_load_time_images_ms: stdDec * 1.3,
-                  median_psnr: medPsnr,
-                  std_psnr: stdPsnr,
-                  median_ssim: medSsim,
-                  std_ssim: stdSsim,
-                  median_mse: medMse,
-                  std_mse: stdMse,
-                  encoding_fps: encFps,
-                  encoding_time_ms: encMs,
-                });
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  return rows;
-}
-
-// Limit to a representative subset so the UI stays responsive
-const ALL_ROWS = genRows();
-
-// Column metadata — mirrors the Gradio app labels + descriptions
-// Canonical label + description for every parameter and metric.
-// Rendered in: table headers, About & parameters, chart hover bubbles,
-// column picker, Submit form. Edit HERE to change everywhere.
-const COLUMNS = [
-  { key: "repo_id", label: "Dataset", short: "Dataset", group: "Config",
-    desc: "Hugging Face Hub dataset repo ID. We pick one representative episode per dataset." },
-  { key: "vcodec", label: "Codec", short: "Codec", group: "Config",
-    desc: "Video codec. h264 (widest compatibility), hevc (≈30% smaller at same quality, slower), libsvtav1 (AV1, smallest, newest)." },
-  { key: "pix_fmt", label: "Pixel format", short: "Pixel format", group: "Config",
-    desc: "Pixel format. yuv420p = 8-bit 4:2:0 (standard, smallest). yuv444p = full chroma (bigger, better for fine edges)." },
-  { key: "g", label: "GOP", short: "GOP", group: "Config",
-    desc: "GOP size (group-of-pictures). Keyframe interval. Small g = cheap seeks, bigger files. Large g = great compression, expensive random access." },
-  { key: "crf", label: "CRF", short: "CRF", group: "Config",
-    desc: "Constant rate factor. Quality knob: 0 is lossless, ~18 is visually lossless, 23 is default, 51 is worst. Lower CRF = bigger file, higher PSNR/SSIM." },
-  { key: "timestamps_mode", label: "Access pattern", short: "Access", group: "Config",
-    desc: "How frames are requested. 1_frame: seek, decode one frame, done. 2_frames: two adjacent frames. 6_frames: contiguous window. 2_frames_4_space: two samples four frames apart — worst-case for GOP-heavy settings." },
-  { key: "backend", label: "Backend", short: "Backend", group: "Config",
-    desc: "Decoder library. pyav (FFmpeg Python bindings), torchcodec (Meta, GPU-accel), video_reader (torchvision fallback)." },
-
-  { key: "video_images_size_ratio", label: "Video/Image\nsize ratio ↓", short: "Video/Image size", group: "Compression", metric: true, lower: true, fmt: (v) => v.toFixed(4),
-    desc: "Encoded video size ÷ sum of original PNG image sizes. 0.02 means the video is 50× smaller than the frame dump. Lower is better." },
-  { key: "video_images_load_time_ratio", label: "Video/Image\nload ratio ↓", short: "Video/Image load", group: "Compression", metric: true, lower: true, fmt: (v) => v.toFixed(4),
-    desc: "Video decode time ÷ PNG image load time for the same frames. <1 means the video is faster to read than the PNGs; >1 means you pay for the compression at read time." },
-
-  { key: "median_load_time_video_ms", label: "Decoding (ms) ↓", short: "Decoding", group: "Speed", metric: true, lower: true, fmt: (v) => v.toFixed(2), stdKey: "std_load_time_video_ms",
-    desc: "Median wall-clock time to decode N frames (per access pattern) from the compressed video." },
-  { key: "encoding_time_ms", label: "Encoding (ms) ↓", short: "Encoding", group: "Speed", metric: true, lower: true, fmt: (v) => v.toFixed(2),
-    desc: "Wall time to encode the whole episode once. Includes container muxing. Lower is faster." },
-
-  { key: "median_psnr", label: "PSNR ↑", short: "PSNR", group: "Quality", metric: true, higher: true, fmt: (v) => v.toFixed(2), stdKey: "std_psnr",
-    desc: "Peak signal-to-noise ratio in dB. Logarithmic, so +3 dB ≈ half the error. 40+ is excellent, 30 is acceptable, 20 is visible artefacts." },
-  { key: "median_ssim", label: "SSIM ↑", short: "SSIM", group: "Quality", metric: true, higher: true, fmt: (v) => v.toFixed(4), stdKey: "std_ssim",
-    desc: "Structural similarity index in [0,1]. Perceptual — weights luminance, contrast, structure. 0.95+ is good, 0.80 is degraded." },
-  { key: "median_mse", label: "MSE ↓", short: "MSE", group: "Quality", metric: true, lower: true, fmt: (v) => v.toFixed(2), stdKey: "std_mse",
-    desc: "Median mean-squared error between decoded and original frames. Pixel-space error. Lower is better. 0 = identical." },
-];
-
-const COL_GROUPS = ["Config", "Compression", "Speed", "Quality"];
-
-window.VB_DATA = { ALL_ROWS, COLUMNS, COL_GROUPS, REPOS, VCODECS, PIX_FMTS, G_VALUES, CRF_VALUES, TS_MODES, BACKENDS };

requirements.txt

@@ -0,0 +1,6 @@
+gradio>=6.12
+plotly
+pandas
+huggingface_hub
+datasets
+pydantic

src/__init__.py

@@ -0,0 +1,13 @@
+"""Server-side data layer for the Video Benchmark Space.
+
+``schema`` holds the canonical UI vocabulary (column metadata, option
+lists, leaderboard categories, parameter group narration, About-page
+prose) that the Gradio app in ``app.py`` reads directly to build its
+controls and tabs. ``compute`` holds the pure-Python row math the app
+calls from its event handlers: filtering, composite ranking, leaderboard
+aggregation, and the three Compare-tab chart aggregations.
+
+Both modules are framework-agnostic — they only know about ``list[dict]``
+rows and the ``COLUMNS`` metadata, so they're trivial to import from a
+notebook or a test harness.
+"""

src/compute.py

@@ -0,0 +1,352 @@
+"""Row math for the Video Benchmark Space.
+
+Pure functions that take ``list[dict]`` rows (a subset of the
+``lerobot/video-benchmark-results`` schema — see ``_RESULTS_KEEP_KEYS``
+in ``app.py``) and return JSON-serializable values. The Gradio handlers
+in ``app.py`` call these to build the Results table heatmap, the
+Leaderboards bar chart, and the three Compare-tab plots.
+
+Nothing here imports Gradio, pandas, or plotly: the module is purely
+arithmetic so it stays trivially testable and reusable from notebooks.
+"""
+from __future__ import annotations
+
+from typing import Any, Iterable
+
+from . import schema
+
+
+Row = dict[str, Any]
+Scale = dict[str, Any]  # {"min": float, "max": float, "lower": bool}
+
+
+# --------------------------------------------------------------------------- #
+# Helpers
+# --------------------------------------------------------------------------- #
+def _is_num(v: Any) -> bool:
+    """True for finite ints/floats; False for ``None``, NaN, and bools.
+
+    Bools are explicitly rejected so accidental flag columns can't sneak
+    into numeric aggregations.
+    """
+    if v is None:
+        return False
+    if isinstance(v, bool):
+        return False
+    if isinstance(v, (int, float)):
+        # NaN is the only float that's not equal to itself.
+        return v == v
+    return False
+
+
+def _column(key: str) -> dict[str, Any] | None:
+    for c in schema.COLUMNS:
+        if c["key"] == key:
+            return c
+    return None
+
+
+# --------------------------------------------------------------------------- #
+# Per-metric normalization (used by the Results table color ramp and the
+# Leaderboards weighted score).
+# --------------------------------------------------------------------------- #
+def normalize_scale(rows: list[Row], col: dict[str, Any]) -> Scale:
+    """Return ``{min, max, lower}`` for a metric column.
+
+    Used to map raw values into [0, 1] before feeding the rdylgn color
+    ramp: ``t = (v - min) / (max - min); if lower: t = 1 - t``. When all
+    values are missing, returns a degenerate scale tagged with
+    ``empty=True`` so callers can fall back to mid-gray.
+    """
+    vals = [r.get(col["key"]) for r in rows]
+    nums = [v for v in vals if _is_num(v)]
+    lower = bool(col.get("lower"))
+    if not nums:
+        return {"min": 0.0, "max": 0.0, "lower": lower, "empty": True}
+    lo = min(nums)
+    hi = max(nums)
+    return {"min": lo, "max": hi, "lower": lower}
+
+
+def _normalize_value(v: Any, scale: Scale) -> float:
+    """Map ``v`` into [0, 1] using a scale from :func:`normalize_scale`.
+
+    Returns ``0.5`` for empty scales, ``0.0`` for non-numeric values, and
+    inverts the result when the column is polarity-``lower`` so that
+    ``1.0`` always means "best on this axis".
+    """
+    if scale.get("empty"):
+        return 0.5
+    if not _is_num(v):
+        return 0.0
+    lo = scale["min"]
+    hi = scale["max"]
+    if hi == lo:
+        return 0.5
+    t = (v - lo) / (hi - lo)
+    return (1 - t) if scale["lower"] else t
+
+
+def composite_rank(rows: list[Row], metric_cols: list[dict[str, Any]]) -> list[Row]:
+    """Sort rows by their composite score across the visible metric columns.
+
+    Score is the unweighted average of ``(1 - normalized_value)`` across
+    ``metric_cols``, so *lower* = better. Sort is stable: ties fall back
+    to original input order so repeated calls on the same input produce
+    the same ordering.
+    """
+    if not rows:
+        return []
+    if not metric_cols:
+        return list(rows)
+
+    scales = [(c, normalize_scale(rows, c)) for c in metric_cols]
+
+    def score(r: Row) -> float:
+        s = 0.0
+        n = 0
+        for c, sc in scales:
+            v = r.get(c["key"])
+            s += (1 - _normalize_value(v, sc))
+            n += 1
+        return s / n if n else 0.0
+
+    indexed = list(enumerate(rows))
+    indexed.sort(key=lambda pair: (score(pair[1]), pair[0]))
+    return [r for _, r in indexed]
+
+
+# --------------------------------------------------------------------------- #
+# Filtering
+# --------------------------------------------------------------------------- #
+def filter_rows(rows: list[Row], filters: dict[str, Iterable[str]] | None) -> list[Row]:
+    """Keep rows whose column values match the Results-tab chip selections.
+
+    ``filters`` maps a column key to the set of allowed values. Values
+    are always compared as strings (the CheckboxGroups emit strings,
+    even for numeric columns like ``g`` / ``crf``), so row values are
+    coerced via ``str()`` before lookup. An empty / missing entry for a
+    key disables that filter.
+    """
+    if not filters:
+        return list(rows)
+    cleaned: dict[str, set[str]] = {}
+    for k, vs in filters.items():
+        if not vs:
+            continue
+        s = {str(v) for v in vs}
+        if s:
+            cleaned[k] = s
+    if not cleaned:
+        return list(rows)
+    out: list[Row] = []
+    for r in rows:
+        keep = True
+        for k, allowed in cleaned.items():
+            if str(r.get(k)) not in allowed:
+                keep = False
+                break
+        if keep:
+            out.append(r)
+    return out
+
+
+def metric_scales(rows: list[Row], cols: list[dict[str, Any]]) -> dict[str, Scale]:
+    """Return ``{column_key: scale}`` for every metric column in ``cols``.
+
+    Pre-computing scales once per render lets the heatmap colorize each
+    cell without re-walking the rows for each column.
+    """
+    return {c["key"]: normalize_scale(rows, c) for c in cols if c.get("metric")}
+
+
+# --------------------------------------------------------------------------- #
+# Leaderboards
+# --------------------------------------------------------------------------- #
+def leaderboard(rows: list[Row], ts: str, cat: str) -> dict[str, Any]:
+    """Build the ranked leaderboard for one category and access pattern.
+
+    Steps:
+        1. Keep rows whose ``timestamps_mode`` matches ``ts``.
+        2. Group by ``(vcodec, pix_fmt, g, crf, backend)`` and average each
+           axis across the per-dataset repeats.
+        3. Normalize each axis across the aggregated set.
+        4. Score each aggregated row as the weighted sum of
+           ``(1 - normalized)`` using ``schema.LEADERBOARD_CATS[cat]['weights']``
+           and sort ascending (lower = better).
+
+    Returns ``{axes, axis_keys, items}`` where each ``items[i].values`` is the
+    list of *normalized* per-axis values oriented so 1.0 = best-in-class.
+    Every aggregated configuration is returned (no top-N truncation).
+    Raises ``ValueError`` for an unknown category and ``RuntimeError`` if
+    any leaderboard axis is missing from ``schema.COLUMNS``.
+    """
+    if cat not in schema.LEADERBOARD_CATS:
+        raise ValueError(f"unknown leaderboard category: {cat!r}")
+    weights = schema.LEADERBOARD_CATS[cat]["weights"]
+    axis_keys = schema.LEADERBOARD_AXES
+    axis_cols = [_column(k) for k in axis_keys]
+    if any(c is None for c in axis_cols):
+        missing = [k for k, c in zip(axis_keys, axis_cols) if c is None]
+        raise RuntimeError(f"missing column metadata for axes: {missing}")
+
+    scoped = [r for r in rows if r.get("timestamps_mode") == ts]
+
+    # Group by the five-tuple, preserving first-seen order so two equally
+    # ranked configs always come out in the same order across requests.
+    groups: dict[tuple, list[Row]] = {}
+    order: list[tuple] = []
+    for r in scoped:
+        key = (r.get("vcodec"), r.get("pix_fmt"), r.get("g"), r.get("crf"), r.get("backend"))
+        if key not in groups:
+            groups[key] = []
+            order.append(key)
+        groups[key].append(r)
+
+    aggregated: list[Row] = []
+    for key in order:
+        rs = groups[key]
+        ag: Row = dict(rs[0])
+        for c in axis_cols:
+            vals = [r.get(c["key"]) for r in rs]
+            nums = [v for v in vals if _is_num(v)]
+            ag[c["key"]] = sum(nums) / len(nums) if nums else None
+        aggregated.append(ag)
+
+    if not aggregated:
+        return {"axes": [c["short"] or c["label"] for c in axis_cols], "items": []}
+
+    scales = [normalize_scale(aggregated, c) for c in axis_cols]
+
+    scored: list[tuple[float, int, Row, list[float]]] = []
+    for idx, row in enumerate(aggregated):
+        sum_w = 0.0
+        wsum = 0.0
+        values: list[float] = []
+        for i, c in enumerate(axis_cols):
+            w = weights.get(c["key"], 1)
+            n = _normalize_value(row.get(c["key"]), scales[i])
+            values.append(n)
+            sum_w += w * (1 - n)
+            wsum += w
+        score = sum_w / wsum if wsum else 0.0
+        scored.append((score, idx, row, values))
+
+    scored.sort(key=lambda t: (t[0], t[1]))
+
+    items = [
+        {
+            "row": _slim_row(r),
+            "values": vals,
+            "score": s,
+        }
+        for s, _, r, vals in scored
+    ]
+    return {
+        "axes": [c["short"] or c["label"] for c in axis_cols],
+        "axis_keys": axis_keys,
+        "items": items,
+    }
+
+
+def _slim_row(r: Row) -> Row:
+    """Project a row down to the keys the leaderboard payload actually reads."""
+    keep = (
+        "vcodec", "pix_fmt", "g", "crf", "backend", "timestamps_mode", "repo_id",
+        *schema.LEADERBOARD_AXES,
+    )
+    return {k: r.get(k) for k in keep if k in r}
+
+
+# --------------------------------------------------------------------------- #
+# Compare-tab aggregations
+# --------------------------------------------------------------------------- #
+def compare_bar(rows: list[Row], metric: str, group_by: str) -> list[dict[str, Any]]:
+    """Mean of ``metric`` grouped by ``group_by``, sorted descending by value.
+
+    Returns ``[{"k": label, "v": mean}, ...]``. The ``lerobot/`` prefix is
+    stripped from dataset labels so x-axis ticks stay readable when
+    ``group_by="repo_id"``.
+    """
+    g: dict[str, list[float]] = {}
+    order: list[str] = []
+    for r in rows:
+        v = r.get(metric)
+        if not _is_num(v):
+            continue
+        k = str(r.get(group_by))
+        if k not in g:
+            g[k] = []
+            order.append(k)
+        g[k].append(v)
+    out = [
+        {"k": k.replace("lerobot/", ""), "v": sum(g[k]) / len(g[k])}
+        for k in order
+        if g[k]
+    ]
+    out.sort(key=lambda d: d["v"], reverse=True)
+    return out
+
+
+def compare_scatter(rows: list[Row]) -> list[dict[str, Any]]:
+    """Return one point per row for the quality-vs-compression scatter.
+
+    Each point is ``{x: size_ratio, y: psnr, c: vcodec, label}``. Rows
+    that lack a numeric size ratio or PSNR are skipped; everything else
+    is kept so the chart reflects the full Hub dataset.
+    """
+    pts: list[dict[str, Any]] = []
+    for r in rows:
+        x = r.get("video_images_size_ratio")
+        y = r.get("median_psnr")
+        if not _is_num(x) or not _is_num(y):
+            continue
+        pts.append({
+            "x": x,
+            "y": y,
+            "c": r.get("vcodec"),
+            "label": f"g={r.get('g')} crf={r.get('crf')}",
+        })
+    return pts
+
+
+def compare_stacked(rows: list[Row]) -> dict[str, Any]:
+    """Aggregate decoding latency per codec, broken down by access pattern.
+
+    Returns ``{codecs, modes, data}`` where ``data[i].segments`` carries
+    the per-mean-decode-time mean for each access pattern. The codec list
+    is sorted by total stacked height ascending so the fastest codec sits
+    at the left of the chart.
+    """
+    codecs: list[str] = []
+    seen_c: set[str] = set()
+    modes: list[str] = []
+    seen_m: set[str] = set()
+    for r in rows:
+        c = r.get("vcodec")
+        if c is not None and c not in seen_c:
+            seen_c.add(c)
+            codecs.append(c)
+        m = r.get("timestamps_mode")
+        if m is not None and m not in seen_m:
+            seen_m.add(m)
+            modes.append(m)
+
+    data: list[dict[str, Any]] = []
+    for codec in codecs:
+        segs: list[dict[str, Any]] = []
+        for mode in modes:
+            vals = [
+                r["median_load_time_video_ms"]
+                for r in rows
+                if r.get("vcodec") == codec
+                and r.get("timestamps_mode") == mode
+                and _is_num(r.get("median_load_time_video_ms"))
+            ]
+            v = sum(vals) / len(vals) if vals else 0.0
+            segs.append({"key": mode, "v": v})
+        total = sum(s["v"] for s in segs)
+        data.append({"k": codec, "segments": segs, "total": total})
+
+    data.sort(key=lambda d: d["total"])
+    return {"codecs": codecs, "modes": modes, "data": data}

src/schema.py

@@ -0,0 +1,320 @@
+"""Canonical UI vocabulary for the Video Benchmark.
+
+Single source of truth for everything the Gradio app needs to *describe*
+a column, option, parameter group, leaderboard ranking, or About-page
+narration. ``app.py`` imports these constants directly to wire up its
+filter chips, dropdowns, table headers, and prose blocks; adding or
+renaming a knob means editing exactly one file.
+
+Each ``COLUMNS`` entry carries display metadata plus, for numeric
+columns, a printf-style ``fmt_spec`` (e.g. ``"%.2f"``) so values render
+consistently across the table and tooltips.
+"""
+from __future__ import annotations
+
+from typing import Any
+
+
+# --------------------------------------------------------------------------- #
+# Datasets the UI talks to. Mirrored as constants so the frontend can render
+# friendly links without duplicating strings.
+# --------------------------------------------------------------------------- #
+RESULTS_DATASET = "lerobot/video-benchmark-results"
+SUBMISSIONS_DATASET = "lerobot/video-benchmark-submissions"
+
+
+# --------------------------------------------------------------------------- #
+# Column metadata
+#
+# Order matters: it drives table column order, the Column-picker grouping,
+# Parameters-page ordering, and Compare-tab dropdowns. ``metric=True`` flags
+# numeric columns that participate in composite ranking and color ramps;
+# ``lower=True`` / ``higher=True`` set the polarity.
+# --------------------------------------------------------------------------- #
+COLUMNS: list[dict[str, Any]] = [
+    # Config
+    {"key": "repo_id", "label": "Dataset", "short": "Dataset", "group": "Config",
+     "desc": "Hugging Face Hub dataset repo ID. We pick one representative episode per dataset."},
+    {"key": "vcodec", "label": "Codec", "short": "Codec", "group": "Config",
+     "desc": "Video codec. h264 (widest compatibility), hevc (≈30% smaller at same quality, slower), libsvtav1 (AV1, smallest, newest)."},
+    {"key": "pix_fmt", "label": "Pixel format", "short": "Pixel format", "group": "Config",
+     "desc": "yuv420p = 8-bit 4:2:0 (standard, smallest). yuv444p = full chroma (bigger, better for fine edges)."},
+    {"key": "g", "label": "GOP", "short": "GOP", "group": "Config",
+     "desc": "Group Of Pictures. Keyframe interval. Small g = cheap seeks, bigger files. Large g = great compression, expensive random access."},
+    {"key": "crf", "label": "CRF", "short": "CRF", "group": "Config",
+     "desc": "Constant Rate Factor. Quality knob: 0 is lossless, ~18 is visually lossless, 23 is default, 51 is worst. Lower CRF = bigger file, higher PSNR/SSIM."},
+    {"key": "timestamps_mode", "label": "Access pattern", "short": "Access", "group": "Config",
+     "desc": "How frames are requested. 1_frame: seek, decode one frame, done. 2_frames: two adjacent frames. 6_frames: contiguous window. 2_frames_4_space: two samples four frames apart — worst-case for GOP-heavy settings."},
+    {"key": "backend", "label": "Backend", "short": "Backend", "group": "Config",
+     "desc": "Video decoding library. pyav (torchvision default), torchcodec"},
+
+    # Compression
+    {"key": "video_images_size_ratio", "label": "Video/Image\nsize ratio ↓", "short": "Video/Image size ratio",
+     "group": "Compression", "metric": True, "lower": True, "fmt_spec": "%.4f",
+     "desc": "Encoded video size ÷ sum of original PNG image sizes. 0.02 means the video is 50× smaller than the frame dump. Lower is better."},
+    {"key": "video_images_load_time_ratio", "label": "Video/Image\nload ratio ↓", "short": "Video/Image load ratio",
+     "group": "Compression", "metric": True, "lower": True, "fmt_spec": "%.4f",
+     "desc": "Video decoding time ÷ PNG image load time for the same frames. <1 means the video is faster to read than the PNGs; >1 means you pay for the compression at read time."},
+
+    # Speed
+    {"key": "median_load_time_video_ms", "label": "Decoding (ms) ↓", "short": "Decoding",
+     "group": "Speed", "metric": True, "lower": True, "fmt_spec": "%.2f", "std_key": "std_load_time_video_ms",
+     "desc": "Median wall-clock time to decode N frames (per access pattern) from the compressed video."},
+    {"key": "encoding_time_ms", "label": "Encoding (ms) ↓", "short": "Encoding",
+     "group": "Speed", "metric": True, "lower": True, "fmt_spec": "%.2f",
+     "desc": "Wall time to encode the whole episode once. Includes container muxing. Lower is faster."},
+    {"key": "encoding_fps", "label": "Encoding (fps) ↑", "short": "Encoding fps",
+     "group": "Speed", "metric": True, "higher": True, "fmt_spec": "%.1f",
+     "desc": "Encoding throughput — frames encoded per second across the whole episode. Higher is faster."},
+
+    # Quality
+    {"key": "median_psnr", "label": "PSNR (dB) ↑", "short": "PSNR",
+     "group": "Quality", "metric": True, "higher": True, "fmt_spec": "%.2f", "std_key": "std_psnr",
+     "desc": "Peak signal-to-noise ratio in dB. Logarithmic, so +3 dB ≈ half the error. 40+ is excellent, 30 is acceptable, 20 is visible artefacts."},
+    {"key": "median_ssim", "label": "SSIM (0–1) ↑", "short": "SSIM",
+     "group": "Quality", "metric": True, "higher": True, "fmt_spec": "%.4f", "std_key": "std_ssim",
+     "desc": "Structural similarity index in [0,1], dimensionless. Perceptual — weights luminance, contrast, structure. 0.95+ is good, 0.80 is degraded."},
+    {"key": "median_mse", "label": "MSE (px²) ↓", "short": "MSE",
+     "group": "Quality", "metric": True, "lower": True, "fmt_spec": "%.2f", "std_key": "std_mse",
+     "desc": "Median mean-squared error between decoded and original frames, in squared 8-bit pixel intensities (px², 0–65025). Lower is better. 0 = identical."},
+]
+
+# Qualitative palette for leaderboard rank badges + radar polygons.
+# Muted on purpose — the cards overlay four to twelve colors on the
+# same card surface (and the radar stacks the same count on one axis
+# system), so a saturated HF-brand palette reads as visual noise.
+# These are chromatic neighbours of the brand hues, pulled 20–30%
+# toward gray, so they stay recognizable next to the brand palette
+# without fighting it for attention.
+PODIUM_COLORS: list[str] = [
+    "#6B8EBF",  # dusty blue
+    "#D99B5A",  # warm sand
+    "#7FA97E",  # sage
+    "#A98FBF",  # muted lavender
+    "#C98595",  # dusty rose
+    "#6FA3A3",  # dusty teal
+    "#B8A773",  # soft olive
+    "#8A95A8",  # slate
+    "#D1A663",  # honey
+    "#7FA3B8",  # powder blue
+    "#B88A73",  # terracotta
+    "#8F9F8A",  # moss
+]
+
+# Codec → brand-aligned but desaturated accent color. Shared by the
+# leaderboard cards (codec pill), the leaderboard dataframe (codec
+# column chip), and anywhere else codec identity is rendered. Keys
+# are lowercased for case-insensitive lookup.
+CODEC_COLORS: dict[str, str] = {
+    "h264": "#6B8EBF",       # dusty blue (mirrors HF blue)
+    "hevc": "#D99B5A",       # warm sand (mirrors HF orange)
+    "libsvtav1": "#7FA97E",  # sage (mirrors HF green)
+}
+CODEC_FALLBACK_COLOR: str = "#8A95A8"
+
+STACK_COLORS: list[str] = [
+    "#6B8EBF", "#D99B5A", "#7FA97E", "#A98FBF", "#C98595", "#6FA3A3",
+]
+
+
+# --------------------------------------------------------------------------- #
+# Filter-bar option lists (used by the Results tab's chip filters).
+# These define the *UI vocabulary*; actual row values come from the Hub
+# dataset and may be a subset.
+# --------------------------------------------------------------------------- #
+REPOS: list[str] = [
+    "lerobot/pusht_image",
+    "lerobot/aloha_mobile_shrimp_image",
+    "lerobot/paris_street",
+    "lerobot/kitchen",
+]
+VCODECS: list[str] = ["h264", "hevc", "libsvtav1"]
+PIX_FMTS: list[str] = ["yuv444p", "yuv420p"]
+G_VALUES: list[int] = [ 2, 3, 4, 5, 6, 10, 15, 20, 40]
+CRF_VALUES: list[int] = [0, 5, 10, 15, 20, 25, 30, 40, 50]
+TS_MODES: list[str] = ["1_frame", "2_frames", "2_frames_4_space", "6_frames"]
+BACKENDS: list[str] = ["pyav", "torchcodec"]
+
+
+# --------------------------------------------------------------------------- #
+# Submit-form option lists. Wider than the filter-bar lists because the
+# Submit form lets users *queue* sweeps over knobs that aren't represented
+# in current results.
+# --------------------------------------------------------------------------- #
+SUBMIT_OPTIONS: dict[str, list[str]] = {
+    "repos": REPOS,
+    "vcodecs": VCODECS,
+    "pix_fmts": PIX_FMTS,
+    "g": ["1", "2", "3", "4", "5", "6", "10", "15", "20", "40", "100"],
+    "crf": ["0", "5", "10", "15", "20", "25", "30", "40", "50"],
+    "timestamps_modes": TS_MODES,
+    "backends": BACKENDS,
+}
+
+SUBMIT_DEFAULTS: dict[str, Any] = {
+    "repos": REPOS[:2],
+    "vcodecs": ["h264"],
+    "pix_fmts": ["yuv420p"],
+    "g": ["2", "10"],
+    "crf": ["10", "30"],
+    "timestamps_modes": ["1_frame", "2_frames"],
+    "backends": ["pyav"],
+    "samples_per_config": 50,
+    "workers": 4,
+}
+
+
+# --------------------------------------------------------------------------- #
+# Maintainer "full sweep" — every curated knob, full Cartesian product. The
+# Submit tab exposes this behind a collapsed accordion (no public link). The
+# resulting submission size (~tens of thousands of configs) intentionally
+# blows past ``MAX_CONFIGS_PER_SUBMISSION``; the corresponding handler in
+# ``app.py`` bypasses that cap because this path is gated behind a confirm
+# checkbox and is meant to be triggered only by maintainers re-baselining
+# the leaderboard.
+# --------------------------------------------------------------------------- #
+FULL_SWEEP: dict[str, Any] = {
+    "repos": list(REPOS),
+    "vcodecs": list(VCODECS),
+    "pix_fmts": list(PIX_FMTS),
+    "g": [str(v) for v in G_VALUES],
+    "crf": [str(v) for v in CRF_VALUES],
+    "timestamps_modes": list(TS_MODES),
+    "backends": list(BACKENDS),
+    "samples_per_config": 50,
+    "workers": 4,
+}
+
+
+# --------------------------------------------------------------------------- #
+# Leaderboards
+# --------------------------------------------------------------------------- #
+# All categories share the same six axes — what changes between tabs is
+# the *weighting* used to rank configurations.
+LEADERBOARD_AXES: list[str] = [
+    "encoding_time_ms",
+    "median_load_time_video_ms",
+    "video_images_size_ratio",
+    "median_mse",
+    "median_psnr",
+    "median_ssim",
+]
+
+LEADERBOARD_CATS: dict[str, dict[str, Any]] = {
+    "Overall": {
+        "desc": "Balanced across encoding, decoding, size, and quality.",
+        "weights": {
+            "encoding_time_ms": 1, "median_load_time_video_ms": 1,
+            "video_images_size_ratio": 1, "median_mse": 1,
+            "median_psnr": 1, "median_ssim": 1,
+        },
+    },
+    "Quality": {
+        "desc": "Weighted toward reconstruction fidelity (MSE, PSNR, SSIM).",
+        "weights": {
+            "encoding_time_ms": 0.15, "median_load_time_video_ms": 0.15,
+            "video_images_size_ratio": 0.3, "median_mse": 1.5,
+            "median_psnr": 1.5, "median_ssim": 1.5,
+        },
+    },
+    "Encoding": {
+        "desc": "Weighted toward encoding speed and output size.",
+        "weights": {
+            "encoding_time_ms": 2, "median_load_time_video_ms": 0.2,
+            "video_images_size_ratio": 1.5, "median_mse": 0.3,
+            "median_psnr": 0.3, "median_ssim": 0.3,
+        },
+    },
+    "Decoding": {
+        "desc": "Weighted toward decoding throughput and size-on-disk impact.",
+        "weights": {
+            "encoding_time_ms": 0.2, "median_load_time_video_ms": 2,
+            "video_images_size_ratio": 1.2, "median_mse": 0.3,
+            "median_psnr": 0.3, "median_ssim": 0.3,
+        },
+    },
+}
+
+
+# --------------------------------------------------------------------------- #
+# Parameters reference (drives the About tab's "Parameters reference" pane)
+# --------------------------------------------------------------------------- #
+PARAM_GROUPS: list[dict[str, Any]] = [
+    {"t": "Inputs — what you benchmark",
+     "desc": "The corpus. Each dataset is a LeRobot episode recording with a few minutes of RGB observations.",
+     "keys": ["repo_id"]},
+    {"t": "Encoding — how the video is compressed",
+     "desc": "Passed to the FFmpeg/PyAV encoder. These are the knobs operators actually tune.",
+     "keys": ["vcodec", "pix_fmt", "g", "crf"]},
+    {"t": "Decoding — how you read it back",
+     "desc": "The other half of the equation. The same MP4 can decode very differently depending on library and access pattern.",
+     "keys": ["backend", "timestamps_mode"]},
+    {"t": "Fidelity metrics — how faithful is decoded frame vs. source",
+     "desc": "We decode the compressed video, re-read the original PNG frames, and compare pixel-for-pixel.",
+     "keys": ["median_mse", "median_psnr", "median_ssim"]},
+    {"t": "Performance metrics — how fast, how small",
+     "desc": "The cost side. Run on a single CPU thread unless noted.",
+     "keys": ["encoding_time_ms", "encoding_fps", "video_images_size_ratio", "median_load_time_video_ms", "video_images_load_time_ratio"]},
+]
+
+
+# --------------------------------------------------------------------------- #
+# About-page prose. Authored here so the React layer just renders it. The
+# code snippet uses literal newlines; React renders it inside a <pre>.
+# --------------------------------------------------------------------------- #
+ABOUT_HTML: str = """\
+<h3 id="what">What this is</h3>
+<p>
+A benchmark for video encoding and decoding in the context of robotics datasets. LeRobot stores episode observations as MP4 rather than PNG sequences — this page quantifies <i>how much</i> we gain in size and what we pay in decoding latency and pixel fidelity.
+</p>
+
+<p>
+<h3 id="parameters">Parameters</h3>
+We sweep across five axes and benchmark every combination end-to-end.
+<ul>
+<li><code>vcodec</code> — <code>h264</code>, <code>hevc</code>, or <code>libsvtav1</code>. Trades encode speed against compression.</li>
+<li><code>pix_fmt</code> — chroma subsampling. <code>yuv420p</code> is smaller; <code>yuv444p</code> preserves full color.</li>
+<li><code>g</code> — GOP size. Small = fast seeks, bigger files; large = smaller files, slower single-frame access.</li>
+<li><code>crf</code> — quality knob. Lower = higher quality, bigger file.</li>
+<li><code>backend</code> — decoder library. <code>pyav</code> (FFmpeg Python bindings, also <code>torchvision</code> backend) or <code>torchcodec</code>.</li>
+</ul>
+</p>
+
+<p>
+<h3 id="metrics">Metrics</h3>
+<ul>
+<li><b>Video/image size ratio</b> — encoded video ÷ sum of PNG frames. Lower is smaller on disk.</li>
+<li><b>Video/image load ratio</b> — video decoding time ÷ PNG image load time for the same frames. <1 means the video is faster to read than the PNGs; >1 means you pay for the compression at read time.</li>
+<li><b>Decoding time</b> — median wall-clock to decode N frames at a given timestamp.</li>
+<li><b>PSNR / SSIM / MSE</b> — fidelity of decoded frames against the uncompressed source.</li>
+<li><b>Encoding time</b> — wall-clock to encode the whole clip, end-to-end.</li>
+<li><b>Encoding fps</b> — encode throughput in frames per second, derived from the encoding time and the episode length. Higher is faster; the handy complement to the raw time column.</li>
+</ul>
+</p>
+
+<p>
+<h3 id="access">Access patterns</h3>
+<p>
+Decode cost depends heavily on <i>how</i> frames are requested. <code>1_frame</code> pays the full seek+IDR cost per sample; <code>6_frames</code> amortizes it across contiguous frames; <code>2_frames_4_space</code> probes the worst case where the decoder must step across two distant windows.
+</p>
+
+<h3 id="repro">Reproduce locally</h3>
+<p>The full sweep is open source. First, set <code>HF_RESULTS_REPO_ID</code> to the Hugging Face Hub dataset where you want results pushed:</p>
+<pre style="background:var(--hf-gray-900);color:var(--hf-gray-100);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-xs);overflow:auto">export HF_RESULTS_REPO_ID=lerobot/video-benchmark-results</pre>
+<p>Then run the benchmark:</p>
+<pre style="background:var(--hf-gray-900);color:var(--hf-gray-100);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-xs);overflow:auto">python benchmark/video/run_video_benchmark.py \\
+  --output-dir outputs/video_benchmark \\
+  --repo-ids lerobot/pusht_image lerobot/kitchen \\
+  --vcodec h264 hevc libsvtav1 \\
+  --pix-fmt yuv420p yuv444p \\
+  --g 2 10 40 \\
+  --crf 10 20 30 \\
+  --timestamps-modes 1_frame 2_frames 6_frames \\
+  --backends pyav torchcodec \\
+  --num-samples 50</pre>
+
+<h3 id="contrib">Contribute</h3>
+<p>
+Submit your own configurations through the <b>Submit</b> tab. A background worker picks them up and pushes results to the Hub so the whole community benefits from the same measurements.
+</p>
+"""

styles.css

@@ -1,831 +1,1594 @@
-/* Video Benchmark — Hugging Face-styled UI */
+/* Video Benchmark — custom styling layered on top of the Gradio theme.
+ *
+ * Strategy: Gradio's theme handles buttons, inputs, tabs, dataframes,
+ * plots. This file owns only the non-Gradio pieces — the HF-branded hero,
+ * About-page prose, parameter cards — plus a few overrides so Gradio
+ * widgets inherit HF spacing / typography.
+ *
+ * All HF brand tokens live at the top as CSS variables so anything below
+ * can reference them without pulling an extra stylesheet. */
 
-/* --- Base overrides built on top of colors_and_type.css --- */
-* { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; }
-body {
-  background: var(--bg-2);
-  color: var(--fg-1);
-  font-family: var(--font-sans);
-  font-size: var(--fs-sm);
-  line-height: var(--lh-sm);
+:root {
+  /* Brand core */
+  --hf-yellow: #FFD21E;
+  --hf-yellow-deep: #FFBD59;
+  --hf-orange: #FF9D00;
+  --hf-blue: #496EF0;
+  --hf-blue-deep: #353E60;
+  --hf-red: #DB3328;
+  --hf-green: #009B3A;
+  --hf-purple: #9747FF;
+  /* Neutrals */
+  --hf-gray-900: #1B1B1D;
+  --hf-gray-800: #32343D;
+  --hf-gray-700: #475169;
+  --hf-gray-600: #6A768F;
+  --hf-gray-500: #9BA3AF;
+  --hf-gray-300: #E5E7EB;
+  --hf-gray-200: #EEEFF2;
+  --hf-gray-100: #F5F6F8;
+  --hf-white: #FFFFFF;
+  /* Warm backgrounds */
+  --hf-cream: #FFF8DE;
+  /* Semantic */
+  --fg-1: var(--hf-gray-900);
+  --fg-2: var(--hf-gray-700);
+  --fg-3: var(--hf-gray-600);
+  --bg-1: var(--hf-white);
+  --bg-2: var(--hf-gray-100);
+  --bg-3: var(--hf-gray-200);
+  --border-1: var(--hf-gray-200);
+  --border-2: var(--hf-gray-300);
+  /* Spacing + radii */
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-2xl: 24px;
+  --radius-pill: 999px;
+  /* Type scale */
+  --fs-xs: 12px;
+  --fs-sm: 14px;
+  --fs-md: 18px;
+  --fs-lg: 20px;
+  --fs-xl: 24px;
+  --fs-2xl: 30px;
+  --fs-4xl: 48px;
+  --lh-4xl: 56px;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+  --fw-black: 900;
 }
 
-button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
-
-/* --- Top nav (mimics hf.co) --- */
-.nav {
-  background: var(--hf-white);
-  border-bottom: 1px solid var(--border-1);
-  padding: 0 var(--space-6);
-  height: 56px;
-  display: flex;
-  align-items: center;
-  gap: var(--space-6);
-  position: sticky; top: 0; z-index: 100;
-}
-.nav-brand { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--fg-1); text-decoration: none; }
-.nav-brand img { width: 28px; height: 28px; }
-.nav-brand .wordmark { font-family: var(--font-display); letter-spacing: -0.01em; }
-.nav-links { display: flex; gap: var(--space-1); align-items: center; }
-.nav-links a { color: var(--fg-2); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
-.nav-links a:hover { background: var(--bg-3); color: var(--fg-1); opacity: 1; }
-.nav-spacer { flex: 1; }
-.nav-search {
-  background: var(--bg-2);
-  border: 1px solid var(--border-1);
-  border-radius: var(--radius-md);
-  padding: 6px 12px 6px 32px;
-  font-size: var(--fs-sm);
-  width: 240px;
-  color: var(--fg-2);
-  position: relative;
+/* Dark-mode semantic tokens. Flipping the `--fg-*` / `--bg-*` / `--border-*`
+ * scale in one place keeps typography consistent across every tab — any rule
+ * that reads these tokens (prose, param cards, chips, tables, leaderboard
+ * cards, tab strip) automatically picks up the dark palette without needing
+ * its own `.dark` override. Covers both Gradio's `.dark` root class and the
+ * OS-level `prefers-color-scheme` fallback. */
+.dark,
+body.dark {
+  --fg-1: var(--hf-gray-100);
+  --fg-2: var(--hf-gray-300);
+  --fg-3: var(--hf-gray-500);
+  --bg-1: #1E2233;
+  --bg-2: rgba(255, 255, 255, 0.04);
+  --bg-3: rgba(255, 255, 255, 0.07);
+  --border-1: rgba(255, 255, 255, 0.08);
+  --border-2: rgba(255, 255, 255, 0.18);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --fg-1: var(--hf-gray-100);
+    --fg-2: var(--hf-gray-300);
+    --fg-3: var(--hf-gray-500);
+    --bg-1: #1E2233;
+    --bg-2: rgba(255, 255, 255, 0.04);
+    --bg-3: rgba(255, 255, 255, 0.07);
+    --border-1: rgba(255, 255, 255, 0.08);
+    --border-2: rgba(255, 255, 255, 0.18);
+  }
 }
-.nav-right { display: flex; align-items: center; gap: var(--space-3); }
-.nav-right .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--hf-yellow), var(--hf-orange)); }
-.nav-btn { padding: 6px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-1); font-size: var(--fs-sm); background: var(--hf-white); color: var(--fg-1); font-weight: var(--fw-medium); }
-.nav-btn:hover { background: var(--bg-2); }
-.nav-btn.primary { background: var(--hf-gray-900); color: var(--hf-white); border-color: var(--hf-gray-900); }
-.nav-btn.primary:hover { background: var(--hf-gray-800); }
-
-/* --- Space header (mimics hf.co Space page) --- */
-.space-header {
-  background: var(--hf-white);
-  border-bottom: 1px solid var(--border-1);
-  padding: var(--space-6) var(--space-8);
-}
-.space-header-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: flex-start; gap: var(--space-6); }
-.space-breadcrumb { font-size: var(--fs-sm); color: var(--fg-2); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
-.space-breadcrumb a { color: var(--fg-link); text-decoration: none; font-weight: var(--fw-medium); }
-.space-breadcrumb .sep { color: var(--fg-3); }
-.space-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--space-2); }
-.space-meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--fg-3); }
-.space-meta .pill { background: var(--tag-spaces-bg); color: var(--tag-spaces-fg); padding: 2px 8px; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); font-size: 11px; text-transform: none; }
-.space-meta .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-sm); color: var(--fg-2); }
-.space-actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: flex-start; }
-.like-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--hf-white); border: 1px solid var(--border-1); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-1); }
-.like-btn .count { color: var(--fg-2); border-left: 1px solid var(--border-1); padding-left: 8px; margin-left: 4px; }
-.like-btn:hover { background: var(--bg-2); }
-
-/* --- Main layout --- */
-.page { max-width: 1440px; margin: 0 auto; padding: var(--space-6) var(--space-8); }
 
-/* --- Hero --- */
+/* --- Hero ---
+ * The hero is now a plain `gr.Row` of two `gr.Column`s (copy + mascot). Since
+ * Gradio owns layout and widths, CSS here only paints — no escape-hatch
+ * positioning, no viewport-unit math.
+ *
+ * Colors are driven by local CSS variables so dark mode can flip the whole
+ * hero in one place (see the `.dark .hero` block at the bottom of this
+ * section). Gradio applies `.dark` to the root when the dark theme is on,
+ * and the `prefers-color-scheme` fallback covers cases where Gradio's theme
+ * isn't overriding the OS preference. */
 .hero {
-  background: var(--hf-cream);
+  --hero-bg: var(--hf-cream);
+  --hero-title: var(--hf-blue-deep);
+  --hero-text: var(--hf-gray-800);
+  --hero-tag-bg: var(--hf-white);
+  --hero-tag-fg: var(--hf-blue-deep);
+  --hero-tag-border: rgba(53, 62, 96, 0.12);
+  --hero-stat-v: var(--hf-blue-deep);
+  background: var(--hero-bg);
   border-radius: var(--radius-2xl);
-  padding: var(--space-10) var(--space-10);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--space-6);
+  padding: var(--space-8) var(--space-10);
+  margin-bottom: var(--space-6);
   align-items: center;
-  margin-bottom: var(--space-8);
-  position: relative;
-  overflow: hidden;
 }
-.hero h1 {
+.hero .hero-copy h1 {
   font-size: var(--fs-4xl);
   line-height: var(--lh-4xl);
   font-weight: var(--fw-black);
   letter-spacing: -0.025em;
-  margin: 0 0 var(--space-3);
-  color: var(--hf-blue-deep);
+  margin: var(--space-2) 0 var(--space-3);
+  color: var(--hero-title);
 }
-.hero .subtitle {
+.hero .hero-copy p {
   font-size: var(--fs-md);
-  line-height: var(--lh-md);
-  color: var(--hf-gray-800);
+  color: var(--hero-text);
   max-width: 620px;
-  margin: 0 0 var(--space-5);
-}
-.hero-stats { display: flex; gap: var(--space-8); margin-top: var(--space-4); }
-.hero-stat .v { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--hf-blue-deep); letter-spacing: -0.01em; }
-.hero-stat .l { font-size: var(--fs-xs); color: var(--hf-gray-800); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--fw-semibold); margin-top: 2px; }
-.hero-mascot { width: 200px; justify-self: end; position: relative; z-index: 2; }
-.hero-mascot img { width: 100%; display: block; filter: drop-shadow(0 8px 24px rgba(53,62,96,0.18)); }
-.hero-tag {
-  display: inline-flex; align-items: center; gap: 6px;
-  background: var(--hf-white); border: 1px solid rgba(53,62,96,0.12);
-  padding: 4px 10px; border-radius: var(--radius-pill);
-  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
-  color: var(--hf-blue-deep); margin-bottom: var(--space-3);
-}
-.hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hf-green); }
-
-/* --- Tabs --- */
-.tabs-bar {
-  display: flex;
-  gap: 2px;
-  border-bottom: 1px solid var(--border-1);
-  margin-bottom: var(--space-6);
-  overflow-x: auto;
+  line-height: 1.5;
+  margin: 0;
 }
-.tab-btn {
-  padding: var(--space-3) var(--space-4);
-  font-size: var(--fs-sm);
-  font-weight: var(--fw-medium);
-  color: var(--fg-2);
-  border-bottom: 2px solid transparent;
+.hero .hero-copy strong:first-child {
+  display: inline-block;
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--hero-tag-fg);
+  background: var(--hero-tag-bg);
+  border: 1px solid var(--hero-tag-border);
+  border-radius: var(--radius-pill);
+  padding: 4px 10px;
+}
+/* Dark-mode palette: keep the HF feel (yellow accent pill on deep navy)
+ * while staying legible on a dark theme. Cover both Gradio's `.dark` root
+ * class and the OS-level `prefers-color-scheme` media query. */
+.dark .hero,
+body.dark .hero {
+  --hero-bg: #1E2233;
+  --hero-title: #FFFFFF;
+  --hero-text: #C7CCD6;
+  --hero-tag-bg: rgba(255, 209, 30, 0.16);
+  --hero-tag-fg: var(--hf-yellow);
+  --hero-tag-border: rgba(255, 209, 30, 0.3);
+  --hero-stat-v: var(--hf-yellow);
+}
+@media (prefers-color-scheme: dark) {
+  .hero:not(.light *) {
+    --hero-bg: #1E2233;
+    --hero-title: #FFFFFF;
+    --hero-text: #C7CCD6;
+    --hero-tag-bg: rgba(255, 209, 30, 0.16);
+    --hero-tag-fg: var(--hf-yellow);
+    --hero-tag-border: rgba(255, 209, 30, 0.3);
+    --hero-stat-v: var(--hf-yellow);
+  }
+}
+/* Stats are rendered as a 4-column markdown table — header row = numbers
+ * (big, blue), body row = labels (small caps). The negative top margin pulls
+ * the table up tight against the subtitle above it (Gradio adds its own
+ * sibling-block gap which we don't want here). */
+.hero .hero-stats {
+  margin-top: var(--space-2) !important;
+  padding-top: 0 !important;
+}
+.hero .hero-stats table,
+.hero .hero-stats thead,
+.hero .hero-stats tbody,
+.hero .hero-stats tr,
+.hero .hero-stats th,
+.hero .hero-stats td {
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+.hero .hero-stats table {
+  border-collapse: collapse;
+  width: auto;
+}
+.hero .hero-stats th,
+.hero .hero-stats td {
+  padding: 0 var(--space-6) 0 0;
+  text-align: left;
+  vertical-align: top;
   white-space: nowrap;
-  display: inline-flex; align-items: center; gap: 6px;
 }
-.tab-btn:hover { color: var(--fg-1); }
-.tab-btn.active { color: var(--hf-blue-deep); border-bottom-color: var(--hf-yellow); font-weight: var(--fw-semibold); }
-.tab-btn .tab-count { font-family: var(--font-mono); font-size: 11px; background: var(--bg-3); color: var(--fg-2); padding: 1px 6px; border-radius: var(--radius-pill); }
-.tab-btn.active .tab-count { background: var(--hf-yellow); color: var(--hf-blue-deep); }
-
-.tab-panel { display: none; }
-.tab-panel.active { display: block; animation: fadeIn 0.2s var(--ease-out); }
-@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
-
-/* --- Cards --- */
-.card {
-  background: var(--hf-white);
-  border: 1px solid var(--border-1);
-  border-radius: var(--radius-lg);
-  padding: var(--space-5);
+.hero .hero-stats th:last-child,
+.hero .hero-stats td:last-child {
+  padding-right: 0;
+}
+.hero .hero-stats th {
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: var(--fs-2xl);
+  font-weight: var(--fw-semibold);
+  color: var(--hero-stat-v);
+  letter-spacing: -0.01em;
+  padding-bottom: 2px;
+}
+.hero .hero-stats td {
+  font-size: var(--fs-xs);
+  color: var(--hero-text);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: var(--fw-semibold);
+}
+.hero .hero-mascot,
+.hero .hero-mascot img {
+  max-width: 220px;
+  margin-left: auto;
+}
+.hero .hero-mascot img {
+  filter: drop-shadow(0 8px 24px rgba(53, 62, 96, 0.18));
 }
-.card-flush { padding: 0; overflow: hidden; }
-.card h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
-.card h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0 0 var(--space-3); }
 
-.section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); }
-.section-title h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin: 0; letter-spacing: -0.01em; }
-.section-title .muted { color: var(--fg-3); font-size: var(--fs-sm); }
+/* Gradio's `<gradio-html>` custom element defaults to `display: inline`,
+ * which makes any flex/grid child collapse to its intrinsic width. Force
+ * the About-tab wrappers (prose + parameters grid) to behave as blocks
+ * so they each use the full tab width instead of shrinking to content. */
+gradio-html:has(.params-page),
+gradio-html:has(.prose) {
+  display: block;
+  width: 100%;
+}
 
-/* --- Filters --- */
-.filters-bar {
+/* --- Parameters page ---
+ *
+ * Rendered at the bottom of the About tab after ``schema.ABOUT_HTML``,
+ * so the top margin separates the parameter reference from the prose
+ * and draws a visible yellow rule — the same ``.tab-intro`` treatment
+ * used elsewhere — to introduce the new section. */
+.params-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  /* Gradio renders `gr.HTML` inside a `<gradio-html>` custom element
+   * that defaults to `display: inline`, so the flex/grid children
+   * collapse to their intrinsic width and the cards wrap long before
+   * the window edge. Force the tree to span the full tab width. */
+  width: 100%;
+  margin-top: var(--space-6);
+}
+.param-group {
+  width: 100%;
+}
+.param-group-head {
+  margin-bottom: var(--space-4);
+}
+.param-group-head h3 {
+  font-size: var(--fs-md);
+  font-weight: var(--fw-semibold);
+  margin: 0 0 4px;
+  padding-bottom: 6px;
+  border-bottom: 2px solid var(--hf-yellow);
+  display: inline-block;
+}
+.param-group-head p {
+  margin: 8px 0 0;
+  color: var(--fg-2);
+  font-size: var(--fs-sm);
+  max-width: 760px;
+}
+.param-cards {
+  /* Fixed 4-column grid: parameters read as a comparison table at a
+   * glance, so equal track widths are more useful than ``auto-fit``
+   * here. ``minmax(0, 1fr)`` is what stops long descriptions from
+   * blowing past their column (grid items default to ``min-width:
+   * auto``, which uses the *content* min as the lower bound). The
+   * narrower-viewport fallbacks below collapse the grid gracefully
+   * before the cards become unreadable. */
   display: grid;
-  grid-template-columns: repeat(5, 1fr) auto;
-  grid-template-rows: auto 1fr;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--space-3);
-  padding: var(--space-4);
-  background: var(--hf-white);
+  /* Explicit full width so the grid fills the Gradio tab content area
+   * instead of shrinking to its intrinsic width inside the inline
+   * `<gradio-html>` wrapper, which would otherwise make the cards wrap
+   * mid-window. */
+  width: 100%;
+}
+@media (max-width: 1100px) {
+  .param-cards {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 820px) {
+  .param-cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 540px) {
+  .param-cards {
+    grid-template-columns: 1fr;
+  }
+}
+.param-card {
+  --param-card-bg: var(--hf-white);
+  --param-key-bg: var(--hf-cream);
+  --param-key-fg: var(--hf-blue-deep);
+  min-width: 0;
+  background: var(--param-card-bg);
   border: 1px solid var(--border-1);
   border-radius: var(--radius-lg);
-  margin-bottom: var(--space-4);
-  align-items: end;
+  padding: var(--space-4);
+  transition: border-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.filter-field {
-  display: grid;
-  grid-row: 1 / span 2;
-  grid-template-rows: subgrid;
-  row-gap: 6px;
-}
-.filter-field label {
-  display: block; font-size: 11px; font-weight: var(--fw-semibold);
-  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em;
-  margin-bottom: 0;
-  align-self: start;
-}
-.filter-field .chips { display: flex; gap: 4px; flex-wrap: wrap; align-content: flex-start; align-self: start; }
-.filter-chip {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 3px 8px;
+.param-card:hover {
+  border-color: var(--hf-yellow-deep);
+}
+.param-card-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+.param-card-head .param-key {
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: var(--fs-xs);
+  background: var(--param-key-bg);
+  color: var(--param-key-fg);
+  padding: 2px 8px;
   border-radius: var(--radius-sm);
-  background: var(--bg-2);
-  border: 1px solid var(--border-1);
+  font-weight: var(--fw-semibold);
+}
+/* Dark-mode palette for param cards — drop the HF cream/blue chip
+ * (which is a light-mode-only brand accent) and borrow the generic
+ * `--bg-2` / `--bg-3` / `--fg-1` tokens so the pill matches `.prose
+ * code` on the About tab exactly. Cover both Gradio's `.dark` root
+ * class and the OS-level `prefers-color-scheme` media query. */
+.dark .param-card,
+body.dark .param-card {
+  --param-card-bg: var(--bg-1);
+  --param-key-bg: var(--bg-3);
+  --param-key-fg: var(--fg-1);
+}
+@media (prefers-color-scheme: dark) {
+  .param-card:not(.light *) {
+    --param-card-bg: var(--bg-1);
+    --param-key-bg: var(--bg-3);
+    --param-key-fg: var(--fg-1);
+  }
+}
+.param-card-head .param-label {
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  color: var(--fg-1);
+}
+.param-card p {
+  margin: 0;
   color: var(--fg-2);
-  cursor: pointer;
-  transition: all var(--t-quick) var(--ease-out);
-  user-select: none;
+  font-size: var(--fs-sm);
+  line-height: 1.55;
 }
-.filter-chip:hover { background: var(--bg-3); }
-.filter-chip.active { background: var(--hf-blue-deep); color: var(--hf-white); border-color: var(--hf-blue-deep); }
-.filter-chip.active:hover { background: var(--hf-gray-800); }
 
-.filter-actions { grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
-.btn {
-  padding: 8px 14px; border-radius: var(--radius-md); font-size: var(--fs-sm);
-  font-weight: var(--fw-semibold); border: 1px solid var(--border-1);
-  background: var(--hf-white); color: var(--fg-1);
-  transition: all var(--t-quick) var(--ease-out);
-  display: inline-flex; align-items: center; gap: 6px;
-}
-.btn:hover { background: var(--bg-2); }
-.btn.primary { background: var(--hf-gray-900); color: var(--hf-white); border-color: var(--hf-gray-900); }
-.btn.primary:hover { background: var(--hf-gray-800); }
-.btn.brand { background: var(--hf-yellow); color: var(--hf-blue-deep); border-color: var(--hf-yellow-deep); }
-.btn.brand:hover { background: var(--hf-yellow-deep); }
-.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
-.btn.ghost:hover { background: var(--bg-3); color: var(--fg-1); }
+/* --- About ---
+ * No ``max-width`` on the prose wrapper: the About tab intentionally
+ * spans the full tab width so it lines up with the Parameters card grid
+ * below it. Per-element line length is kept readable by the smaller
+ * font-size + generous line-height instead. */
+.prose {
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--fg-1);
+  width: 100%;
+}
+.prose h3 {
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-semibold);
+  margin: var(--space-6) 0 var(--space-2);
+}
+.prose h3:first-child {
+  margin-top: 0;
+}
+.prose p {
+  margin: 0 0 var(--space-3);
+}
+.prose ul {
+  margin: 0 0 var(--space-3);
+  padding-left: 20px;
+}
+.prose li {
+  margin-bottom: 4px;
+}
+.prose code {
+  /* Both `--bg-3` and `--fg-1` flip at the root in dark mode, so the
+   * inline-code chip picks up the right palette automatically — no
+   * per-element dark override needed. */
+  background: var(--bg-3);
+  color: var(--fg-1);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 0.88em;
+}
+/* --- Results-tab accordions (Filters / Visible columns) ---
+ * Both panels are `gr.Accordion(elem_classes="results-accordion")` so
+ * the header chrome is identical — a small uppercase title with Gradio's
+ * chevron on the right. Filters starts open, Visible columns starts
+ * closed, but the card border / typography / padding all match. */
+.results-accordion {
+  margin-bottom: var(--space-3);
+}
+.results-accordion > .label-wrap {
+  padding: 4px var(--space-2) !important;
+  gap: var(--space-2);
+}
+.results-accordion > .label-wrap > span,
+.results-accordion > .label-wrap span.label {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-3);
+}
+.results-accordion[open] > .label-wrap {
+  border-bottom: 1px solid var(--border-1);
+}
+/* Inset the accordion body so its contents aren't flush against the card
+ * border. `.label-wrap ~ *` targets every sibling after the header,
+ * which in Gradio's accordion is the single content div. */
+.gradio-container .results-accordion > .label-wrap ~ * {
+  padding: 2px var(--space-2) 4px !important;
+  box-sizing: border-box;
+}
+.gradio-container .results-accordion:not(.filters-accordion) > .label-wrap ~ * {
+  padding-bottom: 0 !important;
+}
+.gradio-container .results-accordion:not(.filters-accordion) > .label-wrap ~ * *:last-child {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
+}
+/* Kill any bottom margin on the last content element in either accordion
+ * body, so the visible gap between last row and the card bottom border
+ * is identical in Filters and Visible columns (driven purely by the
+ * body's own 12px bottom padding above). */
+.gradio-container .results-accordion > .label-wrap ~ * > *:last-child,
+.gradio-container .results-accordion > .label-wrap ~ * > * > *:last-child {
+  margin-bottom: 0 !important;
+}
+/* Strip every inner wrapper background + border inside both results
+ * accordions, so filter chips and column checkboxes sit flat on the
+ * accordion's own card — no nested "inner window" compartments.
+ * Per-category color still applies because it's driven by checkbox /
+ * label styling, not by wrapper backgrounds. */
+.gradio-container .results-accordion .form,
+.gradio-container .results-accordion .block,
+.gradio-container .results-accordion .wrap,
+.gradio-container .results-accordion .gr-group,
+.gradio-container .results-accordion .gr-form {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
 
-/* --- Column picker dropdown --- */
-.columns-dd-wrap { position: relative; display: inline-block; }
-.columns-dd-trigger {
-  display: inline-flex; align-items: center; gap: 8px;
-  padding: 8px 12px;
-  background: var(--hf-white);
-  border: 1px solid var(--border-1);
-  border-radius: var(--radius-md);
-  font-family: var(--font-sans);
+/* --- Filter chips (toggle-button CheckboxGroup) ---
+ * Each value in a `.filter-chips` CheckboxGroup renders as a pill button.
+ * The underlying native checkbox is hidden; the whole label is the click
+ * target. Checked state is detected with `:has(input:checked)` so Gradio's
+ * own state management still works — we just restyle the presentation.
+ *
+ * All filters share the HF deep-navy selected color; we strip the
+ * CheckboxGroup's own background + border so the chips sit directly on
+ * the accordion's card instead of inside a nested "inner window". */
+.filter-chips {
+  --chip-color: var(--hf-yellow);
+  --chip-color-text: var(--hf-gray-900);
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  min-width: 0 !important;
+  overflow: visible;
+}
+/* Filters row: flex-wrap row so the five filter groups sit on one line
+ * when there's room, and gracefully wrap to a second line when there
+ * isn't. Each group asks for 20% of the row but is allowed to shrink
+ * (min-width: 0) so its chips wrap inside it, and is allowed to grow
+ * into the full width on narrow viewports. */
+.filters-accordion,
+.filters-accordion * {
+  box-sizing: border-box;
+}
+.filters-row {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  align-items: flex-start !important;
+  gap: var(--space-5) 0 !important;
+  width: 100% !important;
+}
+/* All 5 groups share the row equally (flex: 1 1 0). Inter-group
+ * spacing is added inside each group via a transparent spacer on the
+ * label+option wrapper, because Gradio reliably overrides outer `gap`
+ * / `margin` / `padding` on our CheckboxGroup root. */
+.filter-chips {
+  box-sizing: border-box !important;
+}
+.filters-accordion .filter-chips {
+  flex: 1 1 0 !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+}
+.filters-accordion .filter-chips ~ .filter-chips > * {
+  padding-left: 32px !important;
+}
+/* Target whichever container Gradio wraps its CheckboxGroup options in
+ * (class name varies between versions) by matching any direct child of
+ * `.filter-chips` that itself contains at least one checkbox label. */
+.filter-chips > *:has(> label input[type="checkbox"]) {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  gap: 6px !important;
+  align-items: flex-start;
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+}
+/* Labels must be allowed to shrink below their content width so the
+ * container can wrap them aggressively instead of letting a long pill
+ * push the row wider than its column. */
+.filter-chips label {
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+.filter-chips label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0 !important;
+  min-width: 56px;
+  padding: 6px 12px;
+  border: 1px solid var(--border-2);
+  border-radius: var(--radius-pill);
+  background: var(--bg-1);
+  color: var(--fg-2);
   font-size: var(--fs-sm);
   font-weight: var(--fw-medium);
-  color: var(--fg-1);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
   cursor: pointer;
-  transition: all var(--t-quick) var(--ease-out);
-}
-.columns-dd-trigger:hover { border-color: var(--fg-3); }
-.columns-dd-trigger.open { border-color: var(--hf-blue-deep); box-shadow: 0 0 0 3px color-mix(in oklab, var(--hf-blue-deep) 18%, transparent); }
-.columns-dd-trigger .dd-count {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 2px 6px;
-  background: var(--bg-2);
-  border-radius: 10px;
-  color: var(--fg-2);
-  margin-left: 2px;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+  user-select: none;
 }
-.columns-dd-panel {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  z-index: 50;
-  width: 520px;
-  max-height: 520px;
-  background: var(--hf-white);
-  border: 1px solid var(--border-1);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 12px 32px rgba(17,19,24,.14), 0 2px 8px rgba(17,19,24,.06);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: ddIn .14s var(--ease-out);
+.filter-chips label > * {
+  margin: 0 !important;
 }
-@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
-.dd-panel-head {
-  display: flex; align-items: center; gap: 8px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--border-1);
+.filter-chips label:hover {
+  border-color: var(--fg-3);
+  color: var(--fg-1);
+}
+.filter-chips label input[type="checkbox"] {
+  position: absolute !important;
+  opacity: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  pointer-events: none !important;
+}
+.filter-chips label:has(input:checked),
+.filter-chips label.selected,
+.filter-chips label[aria-checked="true"] {
+  background: var(--chip-color) !important;
+  border-color: var(--chip-color) !important;
+  color: var(--chip-color-text) !important;
+}
+.filter-chips label:has(input:checked):hover,
+.filter-chips label.selected:hover,
+.filter-chips label[aria-checked="true"]:hover {
+  filter: brightness(0.94);
+}
+/* Click feedback — flash the pill yellow on press for tactile feedback,
+ * independent of its checked state. */
+.filter-chips label:active {
+  background: var(--chip-color) !important;
+  border-color: var(--chip-color) !important;
+  color: var(--chip-color-text) !important;
+}
+.filter-chips > .block-label,
+.filter-chips > label > span:first-child {
   font-size: var(--fs-xs);
   font-weight: var(--fw-semibold);
-  text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--fg-2);
+  text-transform: uppercase;
+  color: var(--fg-3);
+  margin-bottom: 2px;
 }
-.dd-mini {
-  font-family: var(--font-sans);
-  font-size: 11px;
-  font-weight: var(--fw-medium);
-  padding: 4px 8px;
-  background: transparent;
-  border: 1px solid var(--border-1);
-  border-radius: 6px;
-  color: var(--fg-2);
-  cursor: pointer;
-  text-transform: none;
-  letter-spacing: 0;
+
+/* Category-tinted checkboxes — each `CheckboxGroup` inside the Visible-
+ * columns accordion gets a brand color applied through Gradio's own
+ * checkbox CSS variables. Overriding the variables (not the `input`
+ * itself) means the hover / focus / disabled states still track
+ * Gradio's theme; we just recolor the selected chip.
+ *
+ * Colors are pulled from the leaderboard ``PODIUM_COLORS`` palette in
+ * ``src/schema.py`` — chromatic neighbours of the brand hues, pulled
+ * 20–30% toward gray. Using the same desaturated set across the column
+ * picker and the leaderboard radar / cards keeps the page reading as
+ * one visual system instead of two competing palettes (the saturated
+ * HF brand colors fight the muted heatmap chips in the table below).
+ *
+ *   Config       · dusty blue       (#6B8EBF)
+ *   Compression  · warm sand        (#D99B5A)
+ *   Speed        · sage             (#7FA97E)
+ *   Quality      · muted lavender   (#A98FBF)
+ */
+.col-cat {
+  --cat-color: #6B8EBF;
 }
-.dd-mini:hover { border-color: var(--hf-blue-deep); color: var(--hf-blue-deep); }
-.dd-groups {
-  overflow-y: auto;
-  padding: 6px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2px 8px;
-  align-content: start;
+.col-cat-config       { --cat-color: #6B8EBF; }
+.col-cat-compression  { --cat-color: #D99B5A; }
+.col-cat-speed        { --cat-color: #7FA97E; }
+.col-cat-quality      { --cat-color: #A98FBF; }
+
+.col-cat {
+  --checkbox-background-color-selected: var(--cat-color);
+  --checkbox-border-color-selected: var(--cat-color);
+  --checkbox-background-color-focus: var(--cat-color);
+  --checkbox-border-color-focus: var(--cat-color);
 }
-.dd-group {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 0 8px;
+.col-cat input[type="checkbox"] {
+  accent-color: var(--cat-color);
 }
-.dd-group-head {
-  display: flex; align-items: center; gap: 8px;
-  padding: 6px 8px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  width: 100%;
-  text-align: left;
+.col-cat input[type="checkbox"]:checked {
+  background-color: var(--cat-color) !important;
+  border-color: var(--cat-color) !important;
 }
-.dd-group-head:hover { background: var(--bg-2); }
-.dd-group-head .sw { width: 3px; height: 14px; border-radius: 2px; flex-shrink: 0; }
-.dd-group-name {
-  font-family: var(--font-sans);
-  font-size: var(--fs-xs);
+.col-cat > .block-label,
+.col-cat > label > span:first-child,
+.col-cat span[data-testid="block-info"] {
+  color: var(--cat-color) !important;
+  font-weight: var(--fw-semibold);
+}
+/* Strip the default pill / border Gradio renders around each
+ * CheckboxGroup option so the category picker reads as a flat list of
+ * checkbox + label rows, not buttons. Forcing zero left padding on
+ * every wrapper ensures the first sub-checkbox of each row aligns
+ * vertically with the master checkbox above it. */
+.col-cat,
+.col-cat > *,
+.col-cat .wrap {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+.col-cat .wrap {
+  gap: 6px 28px !important;
+  padding: 0 !important;
+}
+.col-cat label {
+  padding: 0 !important;
+  margin-left: 0 !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  gap: 6px;
+  min-height: 0;
+}
+.col-cat-master,
+.col-cat-master > *,
+.col-cat-master label {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+
+/* Master "toggle all" checkbox sitting above each category group. Uses
+ * the same per-category color variable, but renders bolder/bigger so it
+ * reads as the category header rather than another option. It's aligned
+ * flush-left with the option checkboxes below by zeroing its padding. */
+.col-cat-master {
+  padding: 0 !important;
+  margin: 0 0 6px !important;
+  background: transparent !important;
+  border: 0 !important;
+}
+.col-cat-master label {
+  padding: 0 !important;
+  gap: 6px !important;
+  background: transparent !important;
+  border: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+.col-cat-master,
+.col-cat-master > *,
+.col-cat-master label,
+.col-cat-master label > span,
+.col-cat,
+.col-cat > *,
+.col-cat .wrap,
+.col-cat label,
+.col-cat label > span {
+  overflow: visible !important;
+}
+.col-cat-master label,
+.col-cat label {
+  padding: 4px 0 !important;
+  line-height: 1.6 !important;
+  min-height: 28px !important;
+  align-items: center !important;
+}
+.col-cat-master input[type="checkbox"],
+.col-cat input[type="checkbox"] {
+  width: 18px !important;
+  height: 18px !important;
+  min-width: 18px !important;
+  min-height: 18px !important;
+  flex: 0 0 18px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 4px !important;
+  box-sizing: border-box !important;
+  overflow: visible !important;
+  display: inline-block !important;
+  vertical-align: middle !important;
+}
+.col-cat-master label > span:last-child,
+.col-cat-master span[data-testid="block-info"] {
+  font-size: var(--fs-sm);
   font-weight: var(--fw-semibold);
+  letter-spacing: 0.02em;
+  color: var(--cat-color) !important;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--fg-1);
 }
-.dd-group-count {
-  margin-left: auto;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--fg-3);
-  padding: 1px 6px;
-  background: var(--bg-2);
-  border-radius: 8px;
+.col-cat-master input[type="checkbox"] {
+  accent-color: var(--cat-color);
 }
-.dd-group-items {
-  display: flex;
-  flex-direction: column;
-  padding: 2px 0 0 10px;
+.col-cat-master input[type="checkbox"]:checked {
+  background-color: var(--cat-color) !important;
+  border-color: var(--cat-color) !important;
 }
-.dd-item {
-  display: flex; align-items: center; gap: 8px;
-  padding: 5px 8px;
-  background: transparent;
-  border: none;
+
+/* --- Results table ---
+ * Each metric value is wrapped in `<span class="heatmap-chip">` by the
+ * Python renderer, with the rdylgn color applied inline as
+ * `background`. The span is inline-block so the chip sizes to the value,
+ * leaving the rest of the cell neutral — the row stays readable and the
+ * color reads as a badge behind the number, not a column fill.
+ *
+ * We kill the default Gradio row / column separators and lighten the
+ * header so the colored chips carry the visual weight. */
+/* Gradio 6 renders the Dataframe as a virtualized table — column widths
+ * are measured in a hidden sizing body and then applied by JS, so we
+ * deliberately do NOT override the table's own `width` / `table-layout`
+ * here. Doing so collapses every column but the first. With the
+ * Dataframe configured as `wrap=False`, columns already expand to their
+ * content and the `.virtual-table-viewport` scrolls horizontally.
+ *
+ * All the rules below are cosmetic only (colors, borders, paddings) —
+ * they don't touch the table layout. */
+.gradio-container .table-wrap {
+  --table-head-bg: var(--bg-2);
+  --table-head-fg: var(--fg-1);
+  --table-head-border: var(--border-1);
+}
+.gradio-container .table-wrap thead th,
+.gradio-container .table-wrap tbody td,
+.gradio-container .table-wrap tbody tr {
+  border: 0 !important;
+  box-shadow: none !important;
+}
+.gradio-container .table-wrap thead th {
+  border-bottom: 1px solid var(--table-head-border) !important;
+  background: var(--table-head-bg) !important;
+  color: var(--table-head-fg) !important;
+}
+.gradio-container .table-wrap tbody td {
+  padding: 3px 6px !important;
+  background: transparent !important;
+}
+/* Results-tab header: wrap long column names onto two lines instead of
+ * forcing a single line, which would either truncate (with ellipsis) or
+ * blow up the column width on labels like "Decoding (ms)" and
+ * "Composite rank". ``min-height: 2lh`` reserves two lines on every
+ * header cell so single-word columns stay baseline-aligned with the
+ * wrapped ones. ``max-width`` is what actually triggers the wrap; set
+ * it tight enough that two-word headers break naturally. */
+/* Header wraps onto two lines maximum.
+ *
+ * Headers use the schema's ``short`` form (see ``_render_results_table``
+ * in app.py): "Decoding", "Video/Image size", "PSNR" — concise enough
+ * that two equal-share columns can hold them on one or two lines.
+ * ``column_widths`` on the Dataframe flips the table to ``table-
+ * layout: fixed`` so each column is a fixed percentage of the wrap
+ * width rather than content-sized.
+ *
+ * The hard two-line cap is enforced two ways for belt-and-braces:
+ *   1. ``max-height`` + ``overflow: hidden`` on the ``<th>`` — bullet-
+ *      proof against any DOM Gradio renders inside the cell.
+ *   2. ``-webkit-line-clamp: 2`` on the inner wrapper — adds the
+ *      ellipsis when truncation actually fires.
+ *
+ * The ``th *`` mirror is needed because Gradio sets ``white-space:
+ * nowrap`` on an inner span at higher specificity; normalising only
+ * the ``th`` would leave the wrapper nowrap. */
+.results-table .table-wrap thead th,
+.results-table .table-wrap thead th * {
+  white-space: normal !important;
+  /* ``keep-all`` only allows the browser to break at whitespace (and
+   * CJK boundaries) — *not* at characters like ``/`` inside a token.
+   * Without it, Chrome will happily split "Video/Image" into "Video/"
+   * + "Image" because the slash is a soft break opportunity, which
+   * pushes the trailing word ("size" / "load") onto a third line and
+   * straight into the ``-webkit-line-clamp: 2`` cap below — making the
+   * trailing word vanish. ``overflow-wrap: break-word`` is kept as a
+   * fallback so a header longer than its column still breaks somewhere
+   * instead of overflowing horizontally. */
+  word-break: keep-all !important;
+  overflow-wrap: break-word !important;
+  hyphens: none;
+}
+/* Reserve a fixed slot for Gradio's per-header sort/menu button so it's
+ * counted in the column's width budget instead of popping in on hover
+ * and squeezing the label. The button is laid out (``display: flex``)
+ * at all times — only its paint is toggled via ``visibility``, which
+ * keeps the slot occupied while still hiding the chrome until the user
+ * actually hovers/focuses the cell. Pair this with the matching weight
+ * bump in ``_column_widths_for`` so the column track is wide enough to
+ * hold ``label + gap + icon`` without truncating the label. */
+.results-table .table-wrap thead th .cell-menu-button {
+  display: flex !important;
+  visibility: hidden;
+}
+.results-table .table-wrap thead th:hover .cell-menu-button,
+.results-table .table-wrap thead th.focus .cell-menu-button {
+  visibility: visible;
+}
+.results-table .table-wrap thead th {
+  /* Explicit pixel font-size + line-height instead of ``lh`` units,
+   * so the cell height isn't sensitive to whichever font-size Gradio's
+   * theme inherits onto the ``th``.
+   *
+   * Cell budget: 60px outer = 6px padding-top + 48px content (two
+   * line-heights at 24px) + 6px padding-bottom. ``overflow: hidden``
+   * on the cell + ``max-height: 60px`` is what actually enforces the
+   * two-line cap (the inner wrapper is left as a plain block — see
+   * ``> *`` below — so that ``vertical-align: middle`` on this
+   * ``table-cell`` can actually see the inner's natural height as
+   * less-than-cell and center it).
+   *
+   * Why padding lives on the cell, not the inner: ``overflow: hidden``
+   * on a box clips at its *padding-box* edge, not its content edge —
+   * so the cell's 6px of padding-bottom is a clip-safe runoff band
+   * that catches bold IBM Plex Mono descenders (``p`` in "fps" /
+   * "ratio", ``g`` in "Encoding") which extend a couple of pixels
+   * below the second line's content box. The matching 6px on top
+   * keeps two-line headers visually balanced. */
+  font-size: 14px !important;
+  line-height: 24px !important;
+  height: 60px;
+  max-height: 60px;
+  overflow: hidden;
+  vertical-align: middle;
+  padding-top: 6px !important;
+  padding-bottom: 6px !important;
+  /* Horizontal breathing room so the column labels don't kiss the
+   * vertical separators between cells. Matches the ~12px gutter the
+   * body cells get from Gradio's default ``td`` padding, so the
+   * header text aligns visually with the values below it. */
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+/* Gradio's dataframe renders each header as
+ *
+ *   <th>
+ *     <div class="cell-wrap">       (display:flex, height:100%, padding:8px)
+ *       <div class="header-content"> (display:flex, overflow:hidden)
+ *         text
+ *       </div>
+ *     </div>
+ *   </th>
+ *
+ * Two things in that default styling actively fight vertical centering
+ * on single-line headers like "Codec" / "PSNR":
+ *
+ *   1. ``.cell-wrap`` has ``height: 100%`` — it stretches to fill the
+ *      ``th``, leaving zero slack for the cell's ``vertical-align:
+ *      middle`` to center anything.
+ *   2. ``.cell-wrap`` is a flex *row* (``flex-direction: row`` is the
+ *      default), so a 1-line text child sits at the top of the row's
+ *      cross axis baseline, not in its center.
+ *
+ * Solution: knock both Gradio wrappers down to plain ``display: block``
+ * with ``height: auto``. Now the wrapper chain is sized to its actual
+ * text content (24px for single-line headers, 48px for two-line ones),
+ * and the cell's ``vertical-align: middle`` distributes the leftover
+ * vertical slack equally above and below. */
+.results-table .table-wrap thead th > *,
+.results-table .table-wrap thead th > * > * {
+  display: block !important;
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  gap: 0 !important;
+  overflow: visible !important;
+  font-size: 14px !important;
+  line-height: 24px !important;
+  max-width: 100%;
+}
+/* Body cells: keep numeric values + heatmap chips on a single line so
+ * the table reads as a comparison grid, even though the dataframe runs
+ * in ``wrap=True`` mode (which is what lets the header wrap). The
+ * matching rule on the chip itself stops "42.13 ± 0.45" from breaking
+ * between the median and the std. */
+.results-table .table-wrap tbody td,
+.results-table .table-wrap tbody td * {
+  white-space: nowrap !important;
+}
+.results-table .heatmap-chip {
+  white-space: nowrap;
+}
+.heatmap-chip {
+  display: inline-block;
+  padding: 2px 8px;
   border-radius: var(--radius-sm);
-  font-family: var(--font-sans);
-  font-size: var(--fs-sm);
-  color: var(--fg-2);
-  cursor: pointer;
-  width: 100%;
-  text-align: left;
-  transition: background var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
+  color: var(--hf-gray-900);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.4;
 }
-.dd-item:hover { background: var(--bg-2); color: var(--fg-1); }
-.dd-item.on { color: var(--fg-1); }
-.dd-item-label { flex: 1; }
-.dd-cbx {
-  width: 14px; height: 14px;
-  border-radius: 4px;
-  border: 1.5px solid var(--border-2);
-  background: var(--hf-white);
-  flex-shrink: 0;
-  transition: all var(--t-quick) var(--ease-out);
-  position: relative;
+
+/* Row-count caption sits below the table as a quiet, right-aligned
+ * annotation so it reads as metadata about the table above rather than
+ * a heading. */
+.results-count {
+  margin-top: var(--space-2) !important;
+  text-align: right;
+  color: var(--fg-3);
+  font-size: var(--fs-xs);
+  letter-spacing: 0.04em;
+}
+/* Dark mode: flip the header to a deep slate with light text so the
+ * column names stay legible against Gradio's dark table surface.
+ * Cover both the `.dark` root class Gradio sets on theme toggle and the
+ * OS-level `prefers-color-scheme` fallback. */
+.dark .gradio-container .table-wrap,
+body.dark .gradio-container .table-wrap {
+  --table-head-bg: #2A2E3E;
+  --table-head-fg: #F5F6F8;
+  --table-head-border: rgba(255, 255, 255, 0.08);
 }
-.dd-cbx.on {
-  background: var(--hf-blue-deep);
-  border-color: var(--hf-blue-deep);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-size: 12px 12px;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.dd-cbx.some {
-  background: var(--hf-blue-deep);
-  border-color: var(--hf-blue-deep);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6L9 6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
-  background-size: 12px 12px;
-  background-repeat: no-repeat;
-  background-position: center;
+@media (prefers-color-scheme: dark) {
+  .gradio-container .table-wrap:not(.light *) {
+    --table-head-bg: #2A2E3E;
+    --table-head-fg: #F5F6F8;
+    --table-head-border: rgba(255, 255, 255, 0.08);
+  }
 }
 
-/* Dark mode dropdown */
-body.dark .columns-dd-trigger { background: #1A1D24; border-color: #2C3240; color: #F5F6F8; }
-body.dark .columns-dd-trigger:hover { border-color: #475064; }
-body.dark .columns-dd-trigger.open { border-color: var(--hf-yellow); box-shadow: 0 0 0 3px color-mix(in oklab, var(--hf-yellow) 22%, transparent); }
-body.dark .columns-dd-trigger .dd-count { background: #0F1115; color: #C7CDD8; }
-body.dark .columns-dd-panel { background: #161A20; border-color: #2C3240; box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.3); }
-body.dark .dd-panel-head { border-bottom-color: #2C3240; color: #C7CDD8; }
-body.dark .dd-mini { border-color: #2C3240; color: #C7CDD8; }
-body.dark .dd-mini:hover { border-color: var(--hf-yellow); color: var(--hf-yellow); }
-body.dark .dd-group-head:hover { background: #1A1D24; }
-body.dark .dd-group-name { color: #F5F6F8; }
-body.dark .dd-group-count { background: #0F1115; color: #8B93A7; }
-body.dark .dd-item { color: #C7CDD8; }
-body.dark .dd-item:hover { background: #1A1D24; color: #F5F6F8; }
-body.dark .dd-item.on { color: #F5F6F8; }
-body.dark .dd-cbx { background: #0F1115; border-color: #475064; }
-body.dark .dd-cbx.on, body.dark .dd-cbx.some { background: var(--hf-yellow); border-color: var(--hf-yellow); }
-body.dark .dd-cbx.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='%231B1B1D' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
-body.dark .dd-cbx.some { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6L9 6' stroke='%231B1B1D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
-.columns-bar {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr) auto;
-  gap: var(--space-3);
-  padding: var(--space-4);
-  background: var(--hf-white);
+/* --- Leaderboards tab ---
+ * Two-column layout: a Plotly radar on the left, a stack of "podium"
+ * cards on the right. The card color (rank badge + left accent bar)
+ * maps 1:1 to its polygon in the radar via schema.PODIUM_COLORS, so
+ * users can trace any shape back to its config at a glance.
+ *
+ * Controls row uses a gr.Radio restyled into pill buttons for the
+ * Ranking selector (Overall / Quality / Encoding / Decoding); the
+ * pattern mirrors .filter-chips but in single-select semantics. */
+/* One-card header: promote .lb-controls from a multi-column Row of card
+ * surfaces to a single flat surface, then strip the background / border /
+ * shadow from every nested wrapper Gradio inserts between the row and the
+ * actual controls. The three columns (Access pattern / Top N / Ranking)
+ * sit on one unified card with the dropdown + slider on the left and the
+ * access-pattern pill buttons aligned to the right. */
+.lb-controls {
+  gap: var(--space-6) !important;
+  align-items: start !important;
+  margin-bottom: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  background: var(--bg-1);
   border: 1px solid var(--border-1);
   border-radius: var(--radius-lg);
-  margin-bottom: var(--space-4);
-  align-items: start;
+  overflow: visible !important;
+}
+/* Gradio's slider renders its number-input + reset overlay above the
+ * trough; keep the column non-clipping so its rounded corners stay
+ * visible inside .lb-controls' padded card. */
+.lb-controls,
+.lb-controls > *,
+.lb-controls .block,
+.lb-controls .form,
+.lb-controls .gr-form {
+  overflow: visible !important;
+}
+/* All three columns of the controls card align to the top of the row
+ * (driven by ``align-items: start`` on ``.lb-controls`` above). Each
+ * column then lays out its label + control naturally from the top,
+ * so the three column labels — "Access pattern", "Top N configs",
+ * "Ranking" (visually replaced by the pills since
+ * ``show_label=False``) — sit on a shared baseline. */
+.lb-controls .lb-topn-col {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
 }
-.columns-bar .filter-field label {
-  display: flex; align-items: center; gap: 6px;
-  font-size: 11px; font-weight: var(--fw-semibold);
-  color: var(--fg-1); text-transform: uppercase; letter-spacing: 0.06em;
-  margin-bottom: 6px;
+.lb-controls .lb-topn-col .lb-topn {
+  width: 100%;
+  max-width: 360px;
+}
+/* Right-align the ranking pills horizontally so they hug the right edge
+ * of the controls card, and vertically center the whole column within
+ * the row using ``align-self: center`` (which overrides the parent's
+ * ``align-items: start``). The dropdown column is taller, so the row's
+ * height is driven by it; the shorter pills column then sits in the
+ * vertical middle while the dropdown / slider keep their top-aligned
+ * labels. */
+.lb-controls .lb-cats-col {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: flex-end !important;
+  align-self: center !important;
+}
+.lb-controls > .gr-column,
+.lb-controls .gr-form,
+.lb-controls .form,
+.lb-controls .block,
+.lb-controls > * > .block,
+.lb-controls > * > .form {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+/* Dark-mode surface: every "window" in the app (controls bar, podium
+ * cards, compare-controls strip, param cards) shares one background
+ * token (``--bg-1``) so the page reads as a consistent visual system
+ * instead of a stack of subtly-different gray slabs. ``--bg-1`` already
+ * flips between light (white) and dark (#1E2233), so per-theme
+ * overrides only need to soften the border. */
+.dark .lb-controls,
+body.dark .lb-controls {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+@media (prefers-color-scheme: dark) {
+  .lb-controls:not(.light *) {
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+}
+
+/* Ranking pills — restyled gr.Radio. Gradio's default renders each
+ * option as a stacked radio+label row; we hide the native input and
+ * paint the wrapping label as a pill, using :has(input:checked) to
+ * pick up the current selection. */
+.ranking-pills,
+.ranking-pills > *,
+.ranking-pills .wrap {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  padding: 0 !important;
 }
-.columns-bar .chips { flex-direction: column; gap: 3px; align-items: flex-start; }
-.columns-bar .col-chip {
-  font-family: var(--font-sans);
+.ranking-pills .wrap {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  justify-content: flex-end !important;
+  gap: 6px !important;
+}
+.ranking-pills > .block-label,
+.ranking-pills > label > span:first-child {
   font-size: var(--fs-xs);
+  font-weight: var(--fw-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-3);
+  margin-bottom: var(--space-2);
+}
+.ranking-pills label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0 !important;
+  padding: 6px 14px;
+  min-width: 72px;
+  border: 1px solid var(--border-2);
+  border-radius: var(--radius-pill);
+  background: var(--bg-1);
+  color: var(--fg-2);
+  font-size: var(--fs-sm);
   font-weight: var(--fw-medium);
-  padding: 3px 0;
-  background: transparent;
-  border: none;
-  color: var(--fg-1);
   cursor: pointer;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
   user-select: none;
-  display: flex; align-items: center; gap: 6px;
+}
+.ranking-pills label > * {
+  margin: 0 !important;
+}
+.ranking-pills label:hover {
+  border-color: var(--fg-3);
+  color: var(--fg-1);
+}
+.ranking-pills label input[type="radio"] {
+  position: absolute !important;
+  opacity: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  pointer-events: none !important;
+}
+.ranking-pills label:has(input:checked),
+.ranking-pills label[aria-checked="true"] {
+  background: var(--hf-gray-900) !important;
+  border-color: var(--hf-gray-900) !important;
+  color: var(--hf-white) !important;
+}
+.dark .ranking-pills label:has(input:checked),
+.dark .ranking-pills label[aria-checked="true"] {
+  background: var(--hf-yellow) !important;
+  border-color: var(--hf-yellow) !important;
+  color: var(--hf-gray-900) !important;
+}
+
+/* Main row: radar plot | cards. Kill the plot's own card chrome so the
+ * radar floats inside the same surface as the controls above it. */
+.lb-main {
+  gap: var(--space-4) !important;
+  align-items: stretch !important;
+}
+.lb-radar .plot-container,
+.lb-cards-wrap {
+  background: transparent;
+}
+
+/* Card list — sized to match the 520px radar plot on the left so both
+ * columns share the same bottom edge. When the Top-N slider produces
+ * more cards than fit in that height, the column scrolls internally
+ * instead of pushing the whole tab taller. The header is `position:
+ * sticky` so the "Top configurations" title stays visible while the
+ * reader scrolls through the podium. */
+.lb-cards-wrap {
   width: 100%;
-  transition: color var(--t-quick) var(--ease-out);
-  text-align: left;
+  max-height: 520px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-2) transparent;
+}
+.lb-cards-wrap::-webkit-scrollbar {
+  width: 8px;
+}
+.lb-cards-wrap::-webkit-scrollbar-track {
+  background: transparent;
+}
+.lb-cards-wrap::-webkit-scrollbar-thumb {
+  background: var(--border-2);
+  border-radius: var(--radius-pill);
+}
+.lb-cards-wrap::-webkit-scrollbar-thumb:hover {
+  background: var(--fg-3);
+}
+.lb-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding-right: var(--space-2);
 }
-.columns-bar .col-chip::before {
-  content: "";
-  width: 12px; height: 12px; border-radius: 3px;
-  border: 1.5px solid var(--border-2);
-  background: var(--hf-white);
-  flex-shrink: 0;
-  transition: all var(--t-quick) var(--ease-out);
-}
-.columns-bar .col-chip.active { color: var(--fg-1); }
-.columns-bar .col-chip.active::before {
-  background: var(--hf-blue-deep);
-  border-color: var(--hf-blue-deep);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5L4 7L8 3' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-size: 10px 10px;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.columns-bar .col-chip:not(.active) { color: var(--fg-3); }
-.columns-bar .col-chip:hover { color: var(--hf-blue); }
-.columns-bar .col-chip:hover::before { border-color: var(--hf-blue); }
-body.dark .columns-bar .col-chip { color: #F5F6F8; }
-body.dark .columns-bar .col-chip:not(.active) { color: #6A768F; }
-body.dark .columns-bar .col-chip::before { background: #0F1115; border-color: #475064; }
-body.dark .columns-bar .col-chip.active::before { background: var(--hf-yellow); border-color: var(--hf-yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5L4 7L8 3' stroke='%231B1B1D' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
-body.dark .columns-bar .col-chip:hover { color: var(--hf-yellow); }
-body.dark .columns-bar .col-chip:hover::before { border-color: var(--hf-yellow); }
 
-/* (legacy details-block kept for any other use) */
-.details-block {
-  background: var(--hf-white);
-  border: 1px solid var(--border-1);
-  border-radius: var(--radius-lg);
+/* Per-tab section heading rendered by ``_tab_intro`` in app.py. The
+ * <h2> is visually matched to the Parameters page's <h3>s: yellow
+ * underline, semibold, inline-block so the bar only stretches under
+ * the title text. The muted subtitle paragraph sits below, capped at
+ * a comfortable reading width. */
+.tab-intro-wrap {
+  margin-top: var(--space-2);
   margin-bottom: var(--space-4);
-  overflow: hidden;
 }
-.details-head {
-  padding: var(--space-3) var(--space-4);
-  display: flex; align-items: center; gap: var(--space-3);
-  cursor: pointer; user-select: none;
-  font-weight: var(--fw-semibold); font-size: var(--fs-sm);
-}
-.details-head:hover { background: var(--bg-2); }
-.details-head .caret { transition: transform var(--t-quick); }
-.details-block.open .caret { transform: rotate(90deg); }
-.details-body { padding: 0 var(--space-4) var(--space-4); display: none; }
-.details-block.open .details-body { display: block; }
-
-.col-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
-.col-group-header {
-  display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold);
-  font-size: var(--fs-sm); color: var(--fg-1); margin-bottom: 8px;
-  padding-bottom: 8px; border-bottom: 1px solid var(--border-1);
-}
-.col-group-header .sw { width: 3px; height: 14px; border-radius: 2px; }
-.col-item {
-  display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm);
-  padding: 4px 0; color: var(--fg-2); cursor: pointer; user-select: none;
-}
-.col-item input { accent-color: var(--hf-blue); }
+.tab-intro {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.tab-intro h2 {
+  font-size: var(--fs-xl);
+  font-weight: var(--fw-bold);
+  margin: 0;
+  padding-bottom: 6px;
+  border-bottom: 2px solid var(--hf-yellow);
+  display: inline-block;
+  align-self: flex-start;
+  color: var(--fg-1);
+  letter-spacing: -0.01em;
+}
+.tab-intro p {
+  margin: 0;
+  color: var(--fg-3);
+  font-size: var(--fs-sm);
+  line-height: 1.5;
+  max-width: 760px;
+}
+.dark .tab-intro h2,
+body.dark .tab-intro h2 {
+  color: var(--hf-white);
+}
+.dark .tab-intro p,
+body.dark .tab-intro p {
+  color: var(--hf-gray-500);
+}
+@media (prefers-color-scheme: dark) {
+  .tab-intro h2:not(.light *) { color: var(--hf-white); }
+  .tab-intro p:not(.light *) { color: var(--hf-gray-500); }
+}
+.lb-empty {
+  padding: var(--space-5);
+  text-align: center;
+  color: var(--fg-3);
+  border: 1px dashed var(--border-2);
+  border-radius: var(--radius-lg);
+}
 
-/* --- Table --- */
-.table-wrap {
-  background: var(--hf-white);
+.lb-card {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 6px);
+  background: var(--bg-1);
   border: 1px solid var(--border-1);
   border-radius: var(--radius-lg);
-  overflow: hidden;
+  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
+}
+.lb-card::before {
+  /* Left accent strip keyed to the polygon color — lets users eyeball
+   * "which card goes with which shape" even before reading the badge. */
+  content: "";
+  position: absolute;
+  left: 0; top: 10px; bottom: 10px;
+  width: 4px;
+  background: var(--rank-color, var(--hf-gray-300));
+  border-radius: 0 4px 4px 0;
 }
-.table-top { padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-1); background: var(--bg-2); }
-.table-top .row-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-2); }
-.table-top .row-count b { color: var(--fg-1); }
-.table-scroll { overflow-x: auto; max-height: 620px; }
-table.bench {
-  width: 100%; border-collapse: separate; border-spacing: 0;
+.lb-card:hover {
+  border-color: var(--border-2);
+  box-shadow: 0 2px 8px rgba(27, 27, 29, 0.06);
+}
+.lb-badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px; height: 34px;
+  border-radius: 999px;
+  background: var(--rank-color, var(--hf-gray-500));
+  color: var(--hf-white);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-bold);
+  line-height: 1;
+  align-self: center;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9) inset;
+}
+.lb-card-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.lb-card-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.lb-codec {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 0;
+  color: var(--fg-1);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
   font-size: var(--fs-xs);
-  font-variant-numeric: tabular-nums;
+  font-weight: var(--fw-semibold);
+  letter-spacing: 0.02em;
 }
-table.bench thead th {
-  position: sticky; top: 0; z-index: 2;
-  background: var(--hf-white); padding: 10px 12px; text-align: left;
-  font-size: 11px; font-weight: var(--fw-semibold); color: var(--fg-2);
-  text-transform: uppercase; letter-spacing: 0.05em;
-  border-bottom: 1px solid var(--border-2);
-  white-space: pre-line;
-  vertical-align: middle;
-  line-height: 1.25;
-}
-table.bench thead th.group-start { border-left: 2px solid var(--hf-yellow); }
-table.bench thead th .info {
-  display: inline-block; width: 13px; height: 13px; margin-left: 4px;
-  border: 1px solid var(--border-2); border-radius: 50%;
-  text-align: center; font-size: 9px; line-height: 12px;
-  color: var(--fg-3); cursor: help;
-  font-family: var(--font-sans); font-weight: var(--fw-bold);
-}
-table.bench thead th .info:hover { border-color: var(--fg-2); color: var(--fg-1); }
-table.bench tbody td {
-  padding: 8px 12px; border-bottom: 1px solid var(--border-1);
-  white-space: nowrap; color: var(--fg-1);
-}
-table.bench tbody td.group-start { border-left: 2px solid var(--hf-yellow); }
-table.bench tbody tr:hover td { background: rgba(73,110,240,0.03); }
-table.bench tbody tr.highlight td { background: rgba(255,210,30,0.15); }
-
-table.bench tbody td.mono { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
-table.bench tbody td .std { color: var(--fg-3); font-size: 10px; margin-left: 2px; }
-table.bench tbody td.metric { font-family: var(--font-mono); }
-
-table.bench .rank { font-family: var(--font-mono); color: var(--fg-3); font-size: 10px; }
-
-.codec-pill { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); }
-.codec-h264 { background: var(--tag-datasets-bg); color: var(--tag-datasets-fg); }
-.codec-hevc { background: var(--tag-spaces-bg); color: var(--tag-spaces-fg); }
-.codec-libsvtav1 { background: var(--tag-papers-bg); color: var(--tag-papers-fg); }
-
-/* Tooltip for info icons */
-.tt {
-  position: absolute; z-index: 50; pointer-events: none;
-  background: var(--hf-gray-900); color: var(--hf-white);
-  font-size: var(--fs-xs); line-height: 1.4; padding: 8px 10px;
-  border-radius: var(--radius-md); max-width: 280px;
-  box-shadow: var(--shadow-md); opacity: 0; transition: opacity 120ms;
-  font-weight: var(--fw-regular); letter-spacing: 0;
-  text-transform: none;
-}
-.tt.show { opacity: 1; }
-
-/* --- Leaderboards --- */
-.lb-controls { display: flex; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-4); padding: var(--space-4); background: var(--hf-white); border: 1px solid var(--border-1); border-radius: var(--radius-lg); }
-.lb-field { display: flex; flex-direction: column; gap: 6px; }
-.lb-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); font-weight: var(--fw-semibold); }
-.select {
-  padding: 6px 28px 6px 10px; border: 1px solid var(--border-1);
-  border-radius: var(--radius-md); background: var(--hf-white);
-  font-family: var(--font-mono); font-size: var(--fs-xs);
-  color: var(--fg-1); appearance: none; min-width: 140px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236A768F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-}
-.slider-wrap { display: flex; align-items: center; gap: 8px; }
-.slider-wrap input[type="range"] { accent-color: var(--hf-blue); width: 160px; }
-.slider-wrap .v { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); width: 24px; text-align: center; }
-
-.lb-subtabs { display: flex; gap: 4px; margin-bottom: var(--space-4); }
-.lb-subtab {
-  padding: 6px 14px; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
-  border-radius: var(--radius-pill); background: var(--bg-3);
-  color: var(--fg-2); cursor: pointer;
-  transition: all var(--t-quick);
-}
-.lb-subtab:hover { background: var(--border-2); }
-.lb-subtab.active { background: var(--hf-blue-deep); color: var(--hf-white); }
-
-.lb-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
-.radar-card { padding: var(--space-5); display: flex; align-items: center; justify-content: center; min-height: 420px; height: 420px; }
-.radar-card svg { width: 420px; max-width: 100%; height: 420px; }
-.lb-list-card { display: flex; flex-direction: column; max-height: 420px; overflow: hidden; }
-.lb-legend-scroll { overflow-y: auto; padding-right: 4px; flex: 1; scrollbar-width: thin; }
-.lb-legend-scroll::-webkit-scrollbar { width: 6px; }
-.lb-legend-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
-body.dark .lb-legend-scroll::-webkit-scrollbar-thumb { background: #2C3240; }
-
-.legend-list { display: flex; flex-direction: column; gap: var(--space-2); }
-.legend-item {
-  display: flex; align-items: center; gap: var(--space-3);
-  padding: var(--space-3); background: var(--bg-2); border-radius: var(--radius-md);
+.lb-config {
+  color: var(--fg-2);
+  font-size: var(--fs-sm);
+}
+.lb-config code {
+  background: var(--bg-3);
+  color: var(--fg-1);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 0.88em;
+}
+.lb-metrics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.lb-metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-2);
   border: 1px solid var(--border-1);
-  transition: border-color var(--t-quick);
+  font-size: var(--fs-xs);
+  white-space: nowrap;
+}
+.lb-metric-k {
+  color: var(--fg-3);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: var(--fw-semibold);
+  font-size: 10px;
 }
-.legend-item:hover { border-color: var(--border-2); }
-.legend-item .rank {
-  width: 28px; height: 28px; border-radius: 50%;
-  display: grid; place-items: center;
-  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-bold);
-  flex-shrink: 0;
+.lb-metric-v {
+  color: var(--fg-1);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-weight: var(--fw-semibold);
+  font-variant-numeric: tabular-nums;
 }
-.legend-item .name { font-family: var(--font-mono); font-size: 11px; color: var(--fg-1); line-height: 1.4; }
-.legend-item .score { margin-left: auto; font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--fg-1); }
 
-/* --- Compare charts --- */
-.compare-grid { display: grid; gap: var(--space-4); }
-.chart-card { padding: var(--space-5); }
-.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
-.chart-head .controls { display: flex; gap: var(--space-3); }
-.chart-svg { width: 100%; height: 360px; }
-
-/* --- Submit form --- */
-.submit-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-4); align-items: start; }
-.param-section { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-1); }
-.param-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
-.param-section h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: 0 0 var(--space-1); display: flex; align-items: center; gap: 6px; }
-.param-section .hint { font-size: var(--fs-xs); color: var(--fg-3); margin-bottom: var(--space-3); }
-.checkbox-group { display: flex; flex-wrap: wrap; gap: 6px; }
-.checkbox-chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 6px 10px; border: 1px solid var(--border-1);
-  border-radius: var(--radius-md); background: var(--hf-white);
-  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
-  cursor: pointer; user-select: none;
-  transition: all var(--t-quick);
-}
-.checkbox-chip:hover { background: var(--bg-2); }
-.checkbox-chip.checked { background: var(--hf-blue); color: var(--hf-white); border-color: var(--hf-blue); }
-
-.textarea {
-  width: 100%; padding: 8px 10px; border: 1px solid var(--border-1);
-  border-radius: var(--radius-md); font-family: var(--font-mono);
-  font-size: 11px; resize: vertical; min-height: 36px; background: var(--hf-white);
+/* Dark-mode tweaks — cards need a slightly lifted background and
+ * lighter metric chips so they don't disappear into the tab surface. */
+.dark .lb-card,
+body.dark .lb-card {
+  border-color: rgba(255, 255, 255, 0.08);
 }
-.textarea:focus { outline: 2px solid var(--hf-blue); outline-offset: -1px; border-color: transparent; }
-
-.summary-card .count-box {
-  background: var(--hf-cream); border: 1px solid var(--hf-yellow-deep);
-  border-radius: var(--radius-md); padding: var(--space-4);
-  display: flex; align-items: center; gap: var(--space-3);
-  margin-bottom: var(--space-4);
+.dark .lb-card:hover,
+body.dark .lb-card:hover {
+  border-color: rgba(255, 255, 255, 0.18);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+}
+.dark .lb-metric,
+body.dark .lb-metric {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+.dark .lb-metric-v,
+body.dark .lb-metric-v {
+  color: var(--hf-gray-100);
+}
+.dark .lb-metric-k,
+body.dark .lb-metric-k {
+  color: var(--hf-gray-500);
+}
+.dark .lb-config,
+body.dark .lb-config {
+  color: var(--hf-gray-300);
+}
+.dark .lb-config code,
+body.dark .lb-config code {
+  background: rgba(255, 255, 255, 0.07);
+  color: var(--hf-gray-100);
+}
+.dark .lb-badge,
+body.dark .lb-badge {
+  box-shadow: 0 0 0 3px rgba(27, 27, 29, 0.9) inset;
 }
-.summary-card .count-box .n { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--hf-blue-deep); letter-spacing: -0.01em; line-height: 1; }
-.summary-card .count-box .l { font-size: 11px; color: var(--hf-blue-deep); font-weight: var(--fw-semibold); line-height: 1.35; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
-.summary-card .count-box img { width: 44px; margin-left: auto; flex-shrink: 0; }
-
-.summary-list { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); }
-.summary-list .row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--border-1); color: var(--fg-2); }
-.summary-list .row:last-child { border-bottom: none; }
-.summary-list .row b { color: var(--fg-1); font-family: var(--font-mono); }
 
-.queue-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-xs); margin-top: var(--space-3); }
-.queue-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-1); color: var(--fg-2); font-weight: var(--fw-semibold); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
-.queue-table td { padding: 10px; border-bottom: 1px solid var(--border-1); font-family: var(--font-mono); color: var(--fg-1); }
-.queue-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--fw-semibold); }
-.queue-status .dot { width: 6px; height: 6px; border-radius: 50%; }
-.queue-status.done { background: var(--tag-papers-bg); color: var(--tag-papers-fg); }
-.queue-status.done .dot { background: var(--tag-papers-fg); }
-.queue-status.running { background: var(--tag-models-bg); color: var(--tag-models-fg); }
-.queue-status.running .dot { background: var(--tag-models-fg); animation: pulse 1.4s infinite; }
-.queue-status.queued { background: var(--bg-3); color: var(--fg-2); }
-.queue-status.queued .dot { background: var(--fg-3); }
-@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+@media (prefers-color-scheme: dark) {
+  .lb-card:not(.light *) {
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+  .lb-metric:not(.light *) {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+}
 
-/* --- Parameters page --- */
-.params-page { display: flex; flex-direction: column; gap: var(--space-6); }
-.param-group { }
-.param-group-head { margin-bottom: var(--space-4); }
-.param-group-head h3 {
-  font-size: var(--fs-md); font-weight: var(--fw-semibold);
-  margin: 0 0 4px; letter-spacing: -0.01em;
+/* "Selected configurations" section heading sits under the radar/card
+ * row and introduces the dataframe. Match the prose scale used in the
+ * params page so the tab reads as header → content → header → content. */
+.lb-table-head {
+  margin-top: var(--space-6) !important;
+  margin-bottom: var(--space-2) !important;
+}
+.lb-table-head h3 {
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-semibold);
+  margin: 0;
   padding-bottom: 6px;
   border-bottom: 2px solid var(--hf-yellow);
   display: inline-block;
+  color: var(--fg-1);
 }
-.param-group-head p { margin: 8px 0 0; color: var(--fg-2); font-size: var(--fs-sm); max-width: 760px; }
-.param-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: var(--space-3);
+.dark .lb-table-head h3,
+body.dark .lb-table-head h3 {
+  color: var(--hf-white);
 }
-.param-card {
-  background: var(--hf-white);
-  border: 1px solid var(--border-1);
-  border-radius: var(--radius-lg);
-  padding: var(--space-4);
-  transition: border-color var(--t-quick);
+/* Kill the dataframe's outer card so the table reads as part of the
+ * tab (matching the Results table treatment), and bump the Score
+ * column to monospace tabular numerals for quick top-down scanning.
+ * Rank is now a colored badge (rendered as HTML inside the cell), so
+ * the span's monospace font handles alignment — no need to restyle
+ * the td. */
+.lb-table .table-wrap {
+  border: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
 }
-.param-card:hover { border-color: var(--hf-yellow-deep); }
-.param-card-head {
-  display: flex; align-items: baseline; gap: 10px;
-  flex-wrap: wrap; margin-bottom: 8px;
+.lb-table .table-wrap tbody td:last-child {
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--fw-semibold);
 }
-.param-card-head .param-key {
-  font-family: var(--font-mono); font-size: var(--fs-xs);
-  background: var(--hf-cream); color: var(--hf-blue-deep);
-  padding: 2px 8px; border-radius: var(--radius-sm);
-  font-weight: var(--fw-semibold); letter-spacing: -0.01em;
+/* Center header labels in the leaderboard table. Gradio nests the label
+ * text inside ``.cell-wrap`` > ``.header-content`` flex wrappers, so we
+ * also need to neutralize their ``justify-content`` (defaults to
+ * ``flex-start``) — otherwise ``text-align: center`` on the ``th``
+ * alone is overridden by the inner flex layout. */
+.lb-table .table-wrap thead th,
+.lb-table .table-wrap thead th * {
+  text-align: center !important;
+  justify-content: center !important;
 }
-.param-card-head .param-label {
-  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-1);
+
+/* Inline rank badge used inside the table's Rank column. Same visual
+ * as the card badge, just smaller and without the inset ring that
+ * makes sense only on the card's white surface. */
+.lb-badge-inline {
+  width: 26px;
+  height: 26px;
+  font-size: var(--fs-xs);
+  box-shadow: none;
 }
-.param-card p { margin: 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.55; }
 
-/* --- About --- */
-.about-grid { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-8); align-items: start; }
-.prose { font-size: var(--fs-base); line-height: var(--lh-md); color: var(--fg-1); }
-.prose h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: var(--space-6) 0 var(--space-2); }
-.prose h3:first-child { margin-top: 0; }
-.prose p { margin: 0 0 var(--space-3); }
-.prose ul { margin: 0 0 var(--space-3); padding-left: 20px; }
-.prose li { margin-bottom: 4px; }
-.prose code { background: var(--bg-3); padding: 1px 6px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 0.88em; }
+/* --- Compare tab plots ---
+ * Plotly renders text via SVG `<text>` with a `fill=...` attribute
+ * set server-side (see `_PLOTLY_FG` in app.py). That baked-in color
+ * is a single mid-slate for both themes, which works but leaves
+ * titles / legends a bit washed-out. CSS `fill` overrides the SVG
+ * attribute, so we swap in theme-aware tokens (`--fg-1` / `--fg-2`)
+ * only for Compare plots — the Leaderboards radar keeps its muted
+ * gray on purpose, to avoid stealing attention from the polygons. */
+.compare-plot .gtitle,
+.compare-plot .g-gtitle {
+  fill: var(--fg-1) !important;
+  font-weight: var(--fw-semibold) !important;
+}
+.compare-plot .xtitle,
+.compare-plot .ytitle,
+.compare-plot .legendtitletext {
+  fill: var(--fg-1) !important;
+}
+.compare-plot .legendtext,
+.compare-plot .xtick > text,
+.compare-plot .ytick > text,
+.compare-plot .annotation-text {
+  fill: var(--fg-2) !important;
+}
+/* Axis spines + grid lines: use the neutral border token so they
+ * stay visible on dark without turning harsh on light. */
+.compare-plot .xaxislayer-above path.domain,
+.compare-plot .yaxislayer-above path.domain,
+.compare-plot .zerolinelayer path {
+  stroke: var(--border-2) !important;
+}
+.compare-plot .gridlayer path {
+  stroke: var(--border-1) !important;
+}
+/* The caption sits above each bar plot and explains the current
+ * selection; keep it readable but subordinate to the plot title. */
+.compare-caption {
+  color: var(--fg-2) !important;
+  font-size: var(--fs-sm) !important;
+  margin: var(--space-1) 0 var(--space-2) !important;
+}
+/* The configurable bar chart + its title + its dropdowns live in one
+ * gr.Group so they read as a single "patch". The group itself stays
+ * transparent — it's the `.compare-controls` sub-column (title +
+ * dropdowns) that gets a darker tinted surface. The chart sits on
+ * the page background so it reads as "on the page", not "on a card".
+ *
+ * Together this produces: darker strip for the controls → seamless
+ * transition → chart on page bg — i.e. darker background everywhere
+ * except on the chart. */
+.compare-panel {
+  margin-bottom: var(--space-4);
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
+.compare-controls {
+  background: var(--bg-1) !important;
+  border: 1px solid var(--border-1) !important;
+  padding: var(--space-4) !important;
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-4) !important;
+}
+.compare-controls .compare-caption {
+  margin-top: 0 !important;
+  margin-bottom: var(--space-3) !important;
+}
+/* Control-label treatment for the Leaderboards "Top N configs" slider
+ * and the Compare-tab "Metric" / "Group by" dropdowns — small uppercase
+ * semibold cap in ``--fg-3`` so they all match the ``.filter-chips`` /
+ * ``.ranking-pills`` label family. */
+.lb-topn > .block-label,
+.lb-topn > label > span:first-child,
+.lb-topn span[data-testid="block-info"],
+.cmp-control > .block-label,
+.cmp-control > label > span:first-child,
+.cmp-control span[data-testid="block-info"] {
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-3);
+  margin-bottom: var(--space-2);
+}
+/* Kill the white/light card chrome Gradio wraps around every gr.Plot —
+ * the plot itself is transparent (see `_PLOTLY_LAYOUT` in app.py), so
+ * the default border + background read as a stray outline against the
+ * `.compare-panel` surface. Strip border, background and shadow on
+ * every wrapper between `.compare-plot` and the plotly SVG. */
+.compare-plot,
+.compare-plot > div,
+.compare-plot .plot-container,
+.compare-plot .plotly,
+.compare-plot .svg-container {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
 
-.about-toc { position: sticky; top: 80px; padding: var(--space-4); background: var(--hf-cream); border-radius: var(--radius-lg); }
-.about-toc .t { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hf-blue-deep); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
-.about-toc a { display: block; padding: 6px 0; font-size: var(--fs-sm); color: var(--hf-blue-deep); text-decoration: none; opacity: 0.8; }
-.about-toc a:hover { opacity: 1; }
+/* --- Gradio component tweaks to tighten the HF look --- */
+/* Slightly softer tabs bar — default Gradio tabs ship a heavy underline. */
+.tab-nav button.selected {
+  border-bottom-color: var(--hf-yellow) !important;
+  color: var(--hf-blue-deep) !important;
+  font-weight: var(--fw-semibold);
+}
 
-/* --- Tweaks panel --- */
-.tweaks-panel {
-  position: fixed; bottom: 20px; right: 20px; width: 280px;
-  background: var(--hf-white); border: 1px solid var(--border-1);
-  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
-  padding: var(--space-4); z-index: 1000;
-  display: none;
-}
-.tweaks-panel.open { display: block; }
-.tweaks-panel h5 { margin: 0 0 var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 6px; }
-.tweak-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: var(--fs-xs); }
-.tweak-row label { color: var(--fg-2); }
-.tweak-row select { padding: 4px 8px; border: 1px solid var(--border-1); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; background: var(--hf-white); }
+/* Give plot cards the same card radius as the param cards. */
+.gradio-container .plot-container {
+  border-radius: var(--radius-lg);
+}
 
-/* --- Citation --- */
-.citation {
-  background: var(--hf-gray-900); color: var(--hf-gray-300);
-  border-radius: var(--radius-lg); padding: var(--space-4);
-  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6;
-  position: relative; overflow: auto;
-}
-.citation .copy-btn {
-  position: absolute; top: 10px; right: 10px;
-  padding: 4px 8px; font-size: 11px; background: rgba(255,255,255,0.1);
-  color: var(--hf-white); border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.15);
-}
-.citation .copy-btn:hover { background: rgba(255,255,255,0.2); }
+/* The whole layout — hero and every tab — shares one wide column that tracks
+ * the window. Using `100%` (not the Gradio default `1440px` cap) means the
+ * hero always occupies most of the window. */
+.gradio-container {
+  max-width: 100% !important;
+  width: 100% !important;
+  margin: 0 auto !important;
+  padding: var(--space-6) var(--space-8) !important;
+  box-sizing: border-box;
+}
 
-/* --- Density modes --- */
-body.density-compact table.bench tbody td { padding: 5px 10px; }
-body.density-compact table.bench thead th { padding: 7px 10px; }
+@media (max-width: 820px) {
+  .hero {
+    padding: var(--space-6);
+  }
+  .hero .hero-mascot,
+  .hero .hero-mascot img {
+    max-width: 140px;
+  }
+  .hero .hero-stats {
+    gap: var(--space-4);
+  }
+}
 
-/* --- Dark (subtle) --- */
-body.dark { background: #0F1115; color: #E5E7EB; }
-body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 { color: #F5F6F8; }
-body.dark strong, body.dark b { color: #F5F6F8; }
-body.dark .card,
-body.dark .nav,
-body.dark .space-header,
-body.dark .filters-bar,
-body.dark .columns-bar,
-body.dark .table-wrap,
-body.dark .details-block,
-body.dark .lb-controls,
-body.dark .tweaks-panel,
-body.dark .param-card { background: #161A20; border-color: #2E3442; }
-body.dark .hero { background: #1E1B0F; }
-body.dark .hero h1, body.dark .hero .subtitle, body.dark .hero-stat .v, body.dark .hero-stat .l { color: #F5F6F8; }
-body.dark .btn { background: #1E232C; border-color: #2E3442; color: #E5E7EB; }
-body.dark .btn:hover { background: #262B36; }
-body.dark .btn.ghost { background: transparent; color: #9BA3AF; }
-body.dark .btn.ghost:hover { background: #262B36; color: #F5F6F8; }
-body.dark .btn.primary { background: var(--hf-yellow); color: #1B1B1D; border-color: var(--hf-yellow); }
-body.dark table.bench thead th { background: #161A20; color: #C7CDD8; border-color: #2E3442; }
-body.dark table.bench tbody td { border-color: #262B36; color: #E5E7EB; }
-body.dark table.bench tbody td.mono { color: #B5BCC8; }
-body.dark table.bench tbody tr:hover td { background: rgba(73,110,240,0.08); }
-body.dark .table-top { background: #1A1F27; border-color: #2E3442; }
-body.dark .tab-btn { color: #9BA3AF; }
-body.dark .tab-btn:hover { color: #F5F6F8; }
-body.dark .tab-btn.active { color: var(--hf-yellow); }
-body.dark .tab-count { background: #262B36; color: #C7CDD8; }
-body.dark .tab-btn.active .tab-count { background: var(--hf-yellow); color: #1B1B1D; }
-body.dark .select,
-body.dark .textarea,
-body.dark .checkbox-chip,
-body.dark .filter-chip { background: #1E232C; border-color: #3A4152; color: #E5E7EB; }
-body.dark .filter-chip:hover { background: #262B36; border-color: #475064; }
-body.dark .filter-chip.active { background: var(--hf-yellow); color: #1B1B1D; border-color: var(--hf-yellow); }
-body.dark .filter-chip.active:hover { background: var(--hf-yellow-deep); }
-body.dark .checkbox-chip.checked { background: var(--hf-yellow); color: #1B1B1D; border-color: var(--hf-yellow); }
-body.dark .filter-field label,
-body.dark .filter-field label span,
-body.dark .lb-field label,
-body.dark .param-section h4 { color: #C7CDD8; }
-body.dark .columns-bar .filter-field label span { color: #F5F6F8; }
-body.dark .columns-bar .filter-field label span[style*="line-through"] { color: #6A768F !important; }
-body.dark .codec-h264 { background: rgba(73,110,240,0.25); color: #A9BDFF; }
-body.dark .codec-hevc { background: rgba(151,71,255,0.25); color: #CFB0FF; }
-body.dark .codec-libsvtav1 { background: rgba(0,155,58,0.22); color: #7CD896; }
-body.dark .nav-brand, body.dark .space-title { color: #F5F6F8; }
-body.dark .nav-links a { color: #C7CDD8; }
-body.dark .nav-links a:hover { background: #262B36; color: #F5F6F8; }
-body.dark .nav-btn { background: #1E232C; color: #E5E7EB; border-color: #2E3442; }
-body.dark .nav-btn.primary { background: var(--hf-yellow); color: #1B1B1D; border-color: var(--hf-yellow); }
-body.dark .legend-item { background: #1E232C; border-color: #2E3442; }
-body.dark .legend-item .name,
-body.dark .legend-item .score { color: #E5E7EB; }
-body.dark .queue-table th { color: #C7CDD8; border-color: #2E3442; }
-body.dark .queue-table td { color: #E5E7EB; border-color: #262B36; }
-body.dark .summary-list .row { color: #C7CDD8; border-color: #2E3442; }
-body.dark .summary-list .row b { color: #F5F6F8; }
-body.dark .summary-card .count-box { background: #2A2410; border-color: var(--hf-yellow-deep); }
-body.dark .summary-card .count-box .n,
-body.dark .summary-card .count-box .l { color: var(--hf-yellow); }
-body.dark .param-card-head .param-label { color: #F5F6F8; }
-body.dark .param-card-head .param-key { background: #2A2410; color: var(--hf-yellow); }
-body.dark .param-card p { color: #C7CDD8; }
-body.dark .param-group-head p { color: #C7CDD8; }
-body.dark .prose { color: #E5E7EB; }
-body.dark .prose code { background: #262B36; color: #E5E7EB; }
-body.dark .about-toc { background: #2A2410; }
-body.dark .about-toc .t,
-body.dark .about-toc a { color: var(--hf-yellow); }
-body.dark .chart-svg text { fill: #C7CDD8 !important; }
-body.dark .chart-svg line[stroke="var(--border-1)"] { stroke: #2E3442 !important; }
-body.dark .space-breadcrumb { color: #C7CDD8; }
-body.dark .space-breadcrumb a { color: #A9BDFF; }
-body.dark .space-breadcrumb a[style*="fg-1"] { color: #F5F6F8 !important; }
-body.dark .space-meta { color: #9BA3AF; }
-body.dark .space-meta .chip { background: #1E232C; border-color: #2E3442; color: #C7CDD8; }
-body.dark .like-btn { background: #1E232C; border-color: #2E3442; color: #E5E7EB; }
-body.dark .nav-search { background: #1E232C; border-color: #2E3442; color: #C7CDD8; }
-body.dark .citation { background: #0B0D11; }
-body.dark .bg-2 { background: #0F1115; }
+/* Footer row hosting the "Refresh from Hub" button. Sits flush against
+ * the bottom of the page, right-aligned so the action reads as ambient
+ * tooling rather than a primary CTA, with a soft top border separating
+ * it from the last tab's content. */
+.refresh-footer {
+  margin-top: var(--space-6);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border-1);
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-4);
+}
+.refresh-footer .refresh-status {
+  flex: 1 1 auto;
+  color: var(--fg-3);
+  font-size: 13px;
+}
+.refresh-footer button {
+  flex: 0 0 auto;
+}