sync from abhijitramesh/webgpu-bench@aac06bd55b

css/style.css

@@ -28,28 +28,40 @@ html { scroll-padding-top: 80px; }
   --foreground-muted: #71717a;
   --foreground-subtle: #a1a1aa;
 
-  --success: #16a34a;
-  --success-bg: rgba(22, 163, 74, 0.1);
+  --success: #0fa968;
+  --success-bg: rgba(15, 169, 104, 0.16);
   --error: #dc2626;
-  --error-bg: rgba(220, 38, 38, 0.1);
-  --warning: #d97706;
-  --info: #2563eb;
-
-  /* Accent colors (theme-aware) */
-  --accent-blue: #2563eb;
-  --accent-blue-bg: rgba(37, 99, 235, 0.1);
-  --accent-purple: #7c3aed;
-  --accent-purple-bg: rgba(124, 58, 237, 0.1);
-  --accent-amber: #d97706;
-  --accent-amber-bg: rgba(217, 119, 6, 0.1);
-  --accent-violet: #6d28d9;
-  --accent-violet-bg: rgba(109, 40, 217, 0.1);
-
-  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --error-bg: rgba(220, 38, 38, 0.14);
+  --warning: #b45309;
+  --info: #1d4ed8;
+
+  /* Signature plasma green — used for brand accent, live state, running row,
+     sortable-active marker, and primary CTA glow. The single load-bearing
+     color in the palette; everything else stays neutral. */
+  --signal: #0fa968;
+  --signal-strong: #0a8a55;
+  --signal-bg: rgba(15, 169, 104, 0.14);
+  --signal-glow: 0 0 0 4px rgba(15, 169, 104, 0.18);
+
+  /* Accent colors (theme-aware) — kept for badge variation only. */
+  --accent-blue: #1d4ed8;
+  --accent-blue-bg: rgba(29, 78, 216, 0.12);
+  --accent-purple: #6d28d9;
+  --accent-purple-bg: rgba(109, 40, 217, 0.12);
+  --accent-amber: #b45309;
+  --accent-amber-bg: rgba(180, 83, 9, 0.14);
+  --accent-violet: #5b21b6;
+  --accent-violet-bg: rgba(91, 33, 182, 0.12);
+
+  /* Layered shadow vocabulary — light mode loses depth without these. */
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
+  --shadow-dropdown: 0 8px 24px rgba(15, 23, 42, 0.10);
 
   /* Non-color tokens (same in both themes) */
-  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+  --font-sans: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
+  --font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace;
+  --font-serif: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 12px;
@@ -60,7 +72,7 @@ html { scroll-padding-top: 80px; }
 [data-theme="dark"] {
   color-scheme: dark;
 
-  --background: #09090b;
+  --background: #08080a;
   --surface-0: #0f0f12;
   --surface-1: #18181b;
   --surface-2: #1c1c20;
@@ -75,22 +87,29 @@ html { scroll-padding-top: 80px; }
   --foreground-muted: #a1a1aa;
   --foreground-subtle: #71717a;
 
-  --success: #22c55e;
-  --success-bg: rgba(34, 197, 94, 0.12);
-  --error: #ef4444;
-  --error-bg: rgba(239, 68, 68, 0.12);
-  --warning: #eab308;
-  --info: #3b82f6;
+  --success: #22e09a;
+  --success-bg: rgba(34, 224, 154, 0.14);
+  --error: #f87171;
+  --error-bg: rgba(239, 68, 68, 0.14);
+  --warning: #fbbf24;
+  --info: #60a5fa;
+
+  --signal: #22e09a;
+  --signal-strong: #5cffaa;
+  --signal-bg: rgba(34, 224, 154, 0.12);
+  --signal-glow: 0 0 0 4px rgba(34, 224, 154, 0.20);
 
   --accent-blue: #60a5fa;
-  --accent-blue-bg: rgba(59, 130, 246, 0.12);
+  --accent-blue-bg: rgba(96, 165, 250, 0.14);
   --accent-purple: #a78bfa;
-  --accent-purple-bg: rgba(139, 92, 246, 0.12);
+  --accent-purple-bg: rgba(167, 139, 250, 0.14);
   --accent-amber: #fbbf24;
-  --accent-amber-bg: rgba(245, 158, 11, 0.12);
+  --accent-amber-bg: rgba(251, 191, 36, 0.14);
   --accent-violet: #c084fc;
-  --accent-violet-bg: rgba(168, 85, 247, 0.12);
+  --accent-violet-bg: rgba(192, 132, 252, 0.14);
 
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
   --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 
@@ -103,16 +122,30 @@ body {
   font-family: var(--font-sans);
   font-size: 14px;
   line-height: 1.6;
+  font-feature-settings: 'ss01', 'cv02', 'cv11';
+  font-variant-numeric: tabular-nums slashed-zero;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Bricolage Grotesque optical sizing — tighten for headings, relax for body. */
+.hero-title,
+.run-hero-title,
+.methodology-content h1,
+.methodology-content h2,
+.section-header h1,
+.section-header h2 {
+  font-family: var(--font-sans);
+  font-optical-sizing: auto;
+  font-variation-settings: 'opsz' 96;
+}
+
 a {
   color: var(--info);
   text-decoration: none;
   transition: color var(--transition-fast);
 }
-a:hover { color: #60a5fa; }
+a:hover { color: var(--info); }
 
 /* === SCROLLBAR === */
 ::-webkit-scrollbar { width: 8px; height: 8px; }
@@ -244,52 +277,164 @@ a:hover { color: #60a5fa; }
    HERO
    ============================================================= */
 .hero {
-  border-bottom: 1px solid var(--border);
+  position: relative;
   background: var(--background);
+  overflow: hidden;
+  /* No bottom border — filter-bar's top border is the visual divider. */
+}
+/* Subtle radial mesh — only present on the hero. Hints at the GPU subject
+   matter without committing to a heavy gradient aesthetic elsewhere. */
+.hero::before {
+  content: '';
+  position: absolute;
+  inset: -10% -10% auto auto;
+  width: 520px;
+  height: 520px;
+  background:
+    radial-gradient(circle at 70% 30%, var(--signal-bg), transparent 60%),
+    radial-gradient(circle at 30% 80%, var(--accent-violet-bg), transparent 60%);
+  filter: blur(40px);
+  opacity: 0.7;
+  pointer-events: none;
 }
 .hero-inner {
-  display: flex;
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  padding-top: 32px;
-  padding-bottom: 32px;
-  flex-wrap: wrap;
+  gap: 40px;
+  padding-top: 56px;
+  padding-bottom: 48px;
+}
+.hero-copy { min-width: 0; }
+.hero-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 16px;
+  padding: 4px 10px 4px 8px;
+  background: var(--signal-bg);
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--signal-strong);
+}
+[data-theme="dark"] .hero-eyebrow { color: var(--signal); }
+.hero-eyebrow-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--signal);
+  box-shadow: 0 0 0 0 var(--signal);
+  animation: live-pulse 2s ease-out infinite;
+}
+@keyframes live-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(15, 169, 104, 0.5); }
+  70% { box-shadow: 0 0 0 8px rgba(15, 169, 104, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(15, 169, 104, 0); }
+}
+[data-theme="dark"] .hero-eyebrow-dot {
+  animation-name: live-pulse-dark;
+}
+@keyframes live-pulse-dark {
+  0% { box-shadow: 0 0 0 0 rgba(34, 224, 154, 0.6); }
+  70% { box-shadow: 0 0 0 8px rgba(34, 224, 154, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(34, 224, 154, 0); }
 }
-.hero-copy { flex: 1 1 420px; min-width: 0; }
 .hero-title {
-  margin: 0 0 8px;
-  font-size: 28px;
-  font-weight: 800;
-  letter-spacing: -0.02em;
+  margin: 0 0 14px;
+  font-size: clamp(36px, 5vw, 56px);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 0.98;
   color: var(--foreground);
 }
 .hero-lede {
   margin: 0;
-  font-size: 15px;
+  font-size: 16px;
   line-height: 1.55;
   color: var(--foreground-secondary);
-  max-width: 62ch;
+  max-width: 56ch;
 }
 .hero-meta {
-  margin: 10px 0 0;
+  margin: 14px 0 0;
   font-size: 12px;
   color: var(--foreground-muted);
   font-family: var(--font-mono);
 }
 .hero-lede code {
   font-family: var(--font-mono);
-  font-size: 13px;
+  font-size: 14px;
   background: var(--surface-2);
   padding: 1px 6px;
   border-radius: var(--radius-sm);
   color: var(--foreground);
 }
-.hero-actions { display: flex; gap: 10px; flex-shrink: 0; }
+.hero-actions { display: flex; gap: 10px; flex-shrink: 0; margin-top: 24px; }
 .hero-actions .btn { text-decoration: none; }
+
+/* Right-side stat block — surfaces the headline metric. Count-up tween is
+   driven by JS; the markup ships with `data-target` and a starting "0.0". */
+.hero-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 20px 28px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface-1);
+  box-shadow: var(--shadow-md);
+  min-width: 240px;
+}
+.hero-stat-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--foreground-muted);
+}
+.hero-stat-value {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+  color: var(--foreground);
+  margin: 4px 0;
+}
+.hero-stat-num {
+  font-family: var(--font-mono);
+  font-size: 44px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  color: var(--signal-strong);
+  line-height: 1;
+}
+[data-theme="dark"] .hero-stat-num { color: var(--signal); }
+.hero-stat-unit {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--foreground-muted);
+  font-weight: 500;
+}
+.hero-stat-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--foreground-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 768px) {
+  .hero-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; padding-bottom: 28px; }
+  .hero-stat { min-width: 0; }
+  .hero-stat-num { font-size: 36px; }
+}
 @media (max-width: 640px) {
-  .hero-inner { padding-top: 20px; padding-bottom: 20px; }
-  .hero-title { font-size: 22px; }
+  .hero-title { font-size: 36px; }
   .hero-lede { font-size: 14px; }
 }
 
@@ -532,6 +677,13 @@ a:hover { color: #60a5fa; }
 .section-nav {
   background: var(--background);
   border-bottom: 1px solid var(--border);
+  position: relative;
+  /* Right-edge fade so the user knows there's more to scroll on mobile. */
+  -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
+          mask-image: linear-gradient(to right, black 90%, transparent 100%);
+}
+@media (min-width: 901px) {
+  .section-nav { -webkit-mask-image: none; mask-image: none; }
 }
 .section-nav-track {
   display: flex;
@@ -539,27 +691,40 @@ a:hover { color: #60a5fa; }
   overflow-x: auto;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
+  position: relative;
 }
 .section-nav-track::-webkit-scrollbar { display: none; }
+/* Sliding indicator — JS sets `--indicator-x` and `--indicator-w` to the
+   active button's offsetLeft/offsetWidth. Falls back to 0 (hidden) before
+   first paint. */
+.section-nav-track::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  width: var(--indicator-w, 0px);
+  transform: translateX(var(--indicator-x, 0));
+  background: var(--signal);
+  border-radius: 1px 1px 0 0;
+  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), width 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
 
 .section-nav-item {
   padding: 10px 16px;
   background: none;
   border: none;
-  border-bottom: 2px solid transparent;
   color: var(--foreground-muted);
   font-family: var(--font-sans);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   white-space: nowrap;
-  transition: color var(--transition-fast), border-color var(--transition-fast);
+  transition: color var(--transition-fast);
 }
 .section-nav-item:hover { color: var(--foreground); }
-.section-nav-item.active {
-  color: var(--foreground);
-  border-bottom-color: var(--foreground);
-}
+.section-nav-item.active { color: var(--foreground); }
 
 /* =============================================================
    SECTIONS & LAYOUT
@@ -619,49 +784,79 @@ a:hover { color: #60a5fa; }
    ============================================================= */
 .summary-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
 }
 .stat-card {
   display: flex;
   align-items: flex-start;
-  gap: 16px;
+  gap: 14px;
   background: var(--surface-1);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  padding: 20px 24px;
-  transition: border-color var(--transition-base);
+  padding: 18px 20px;
+  box-shadow: var(--shadow-sm);
+  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
+}
+.stat-card:hover {
+  border-color: var(--border-hover);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
 }
-.stat-card:hover { border-color: var(--border-hover); }
 
 .stat-card-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   border-radius: var(--radius-md);
   flex-shrink: 0;
 }
 .stat-card-icon--machines { background: var(--accent-blue-bg); color: var(--accent-blue); }
 .stat-card-icon--benchmarks { background: var(--accent-violet-bg); color: var(--accent-violet); }
 .stat-card-icon--pass { background: var(--success-bg); color: var(--success); }
+.stat-card-icon--decode { background: var(--signal-bg); color: var(--signal-strong); }
+[data-theme="dark"] .stat-card-icon--decode { color: var(--signal); }
+.stat-card-icon--size { background: var(--accent-amber-bg); color: var(--accent-amber); }
 
+.stat-card-content { min-width: 0; flex: 1; }
 .stat-card-label {
   display: block;
-  font-size: 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
   font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
   color: var(--foreground-muted);
-  margin-bottom: 2px;
+  margin-bottom: 4px;
 }
 .stat-card-value {
-  display: block;
-  font-size: 28px;
-  font-weight: 800;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  font-size: 26px;
+  font-weight: 600;
   font-family: var(--font-mono);
   color: var(--foreground);
-  letter-spacing: -0.02em;
-  line-height: 1.1;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+}
+.stat-card-unit {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--foreground-muted);
+  letter-spacing: 0;
+}
+
+@media (max-width: 1100px) {
+  .summary-grid { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 720px) {
+  .summary-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 480px) {
+  .summary-grid { grid-template-columns: 1fr; }
 }
 
 /* =============================================================
@@ -763,7 +958,12 @@ a:hover { color: #60a5fa; }
 .results-table thead th[aria-sort="ascending"] .th-sort-indicator,
 .results-table thead th[aria-sort="descending"] .th-sort-indicator {
   opacity: 1;
+  color: var(--signal);
+}
+.results-table thead th[aria-sort="ascending"],
+.results-table thead th[aria-sort="descending"] {
   color: var(--foreground);
+  box-shadow: inset 0 -2px 0 var(--signal);
 }
 .results-table thead th:hover .th-sort-indicator { opacity: 0.85; }
 
@@ -787,8 +987,11 @@ a:hover { color: #60a5fa; }
   border-bottom: none;
 }
 
-/* Row status indicator */
-.row-pass td:first-child { box-shadow: inset 3px 0 0 var(--success); }
+/* Row status indicator — purely decorative; the badge in the Status column
+   carries the same info accessibly. The stripe is hidden from AT via
+   the parent row's `aria-label` (added in tables.js render) plus the
+   badge being the canonical source of truth. */
+.row-pass td:first-child { box-shadow: inset 3px 0 0 var(--signal); }
 .row-fail td:first-child { box-shadow: inset 3px 0 0 var(--error); }
 
 /* =============================================================
@@ -804,19 +1007,19 @@ a:hover { color: #60a5fa; }
   text-transform: uppercase;
   letter-spacing: 0.02em;
 }
-.badge--pass { background: var(--success-bg); color: #166534; }
-.badge--fail { background: var(--error-bg); color: #991b1b; }
-.badge--yes { background: var(--accent-blue-bg); color: #1d4ed8; }
+.badge--pass { background: var(--signal-bg); color: var(--signal-strong); }
+.badge--fail { background: var(--error-bg); color: #b91c1c; }
+.badge--yes { background: var(--accent-blue-bg); color: var(--accent-blue); }
 .badge--no { background: var(--surface-3); color: var(--foreground-secondary); }
-.badge--webgpu { background: var(--accent-purple-bg); color: #5b21b6; }
-.badge--cpu { background: var(--accent-amber-bg); color: #92400e; }
+.badge--webgpu { background: var(--accent-purple-bg); color: var(--accent-purple); }
+.badge--cpu { background: var(--accent-amber-bg); color: var(--accent-amber); }
 
-[data-theme="dark"] .badge--pass { color: #4ade80; }
-[data-theme="dark"] .badge--fail { color: #f87171; }
-[data-theme="dark"] .badge--yes { color: #60a5fa; }
+[data-theme="dark"] .badge--pass { color: var(--signal); }
+[data-theme="dark"] .badge--fail { color: var(--error); }
+[data-theme="dark"] .badge--yes { color: var(--accent-blue); }
 [data-theme="dark"] .badge--no { color: var(--foreground-muted); }
-[data-theme="dark"] .badge--webgpu { color: #c4b5fd; }
-[data-theme="dark"] .badge--cpu { color: #fbbf24; }
+[data-theme="dark"] .badge--webgpu { color: var(--accent-purple); }
+[data-theme="dark"] .badge--cpu { color: var(--accent-amber); }
 
 /* =============================================================
    ERROR CELLS & CATEGORIES
@@ -854,10 +1057,19 @@ a:hover { color: #60a5fa; }
   position: relative;
   height: 340px;
   min-width: 0;
-  transition: border-color var(--transition-base);
+  box-shadow: var(--shadow-sm);
+  transition: border-color var(--transition-base), box-shadow var(--transition-base);
+  /* Faint dot grid — visible mostly through empty-state placeholders, and
+     adds texture to charts with sparse data points. */
+  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
+  background-size: 18px 18px;
+  background-position: 12px 12px;
+}
+[data-theme="dark"] .chart-box {
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
 }
-.chart-box canvas { max-width: 100%; }
-.chart-box:hover { border-color: var(--border-hover); }
+.chart-box canvas { max-width: 100%; position: relative; z-index: 1; }
+.chart-box:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
 
 .subsection-title { font-size: 16px; font-weight: 600; color: var(--foreground); margin: 0; }
 .metric-selector { display: flex; align-items: center; gap: 8px; }
@@ -870,11 +1082,22 @@ a:hover { color: #60a5fa; }
 
 .chart-empty {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--foreground-secondary);
-  font-size: 13px;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 24px;
+  color: var(--foreground-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  z-index: 2;
+}
+.chart-empty::before {
+  content: '— ';
+  color: var(--foreground-subtle);
+  margin-right: 8px;
 }
 
 /* =============================================================
@@ -894,41 +1117,87 @@ a:hover { color: #60a5fa; }
 }
 .machine-card:hover { border-color: var(--border-hover); }
 
-/* "Add your machine" call-to-action card — same shape as machine cards
-   but dashed/muted, and it's a link so the whole card is clickable. */
+/* "Add your machine" call-to-action card — strengthened version: subtle
+   signal-tinted gradient ring, copyable command line, real arrow that
+   slides on hover. */
 .machine-card-add {
+  position: relative;
   display: flex;
   flex-direction: column;
-  border-style: dashed;
-  background: transparent;
+  border-style: solid;
+  border-color: var(--border);
+  background:
+    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
+    linear-gradient(135deg, var(--signal-bg), transparent 60%, var(--accent-violet-bg)) border-box;
   color: var(--foreground-secondary);
   text-decoration: none;
-  gap: 12px;
+  gap: 14px;
+  overflow: hidden;
+}
+.machine-card-add::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 0% 0%, var(--signal-bg), transparent 60%);
+  opacity: 0;
+  transition: opacity var(--transition-base);
+  pointer-events: none;
 }
 .machine-card-add:hover {
-  border-color: var(--foreground-muted);
-  background: var(--surface-1);
+  border-color: transparent;
   color: var(--foreground);
+  text-decoration: none;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
 }
+.machine-card-add:hover::before { opacity: 1; }
+.machine-card-add > * { position: relative; }
 .machine-card-add .machine-card-header {
   margin-bottom: 0;
   padding-bottom: 0;
   border-bottom: none;
 }
-.machine-card-add .machine-card-icon { color: var(--foreground-muted); }
-.machine-card-add:hover .machine-card-icon { color: var(--foreground); }
+.machine-card-add .machine-card-icon { color: var(--signal-strong); }
+[data-theme="dark"] .machine-card-add .machine-card-icon { color: var(--signal); }
 .machine-card-add-blurb {
   font-size: 13px;
   line-height: 1.5;
   color: var(--foreground-secondary);
 }
+.machine-card-add-cmd {
+  display: block;
+  margin-top: 4px;
+  padding: 8px 10px;
+  background: var(--surface-0);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.machine-card-add-cmd::before {
+  content: '$ ';
+  color: var(--foreground-subtle);
+  user-select: none;
+}
 .machine-card-add-cta {
   display: inline-flex;
+  align-items: center;
+  gap: 6px;
   font-size: 13px;
   font-weight: 600;
   color: var(--foreground);
   margin-top: auto;
 }
+.machine-card-add-cta svg {
+  transition: transform var(--transition-base);
+}
+.machine-card-add:hover .machine-card-add-cta svg {
+  transform: translateX(3px);
+}
 
 .machine-card-header {
   display: flex;
@@ -1012,7 +1281,6 @@ a:hover { color: #60a5fa; }
    ============================================================= */
 @media (max-width: 1024px) {
   .charts-grid { grid-template-columns: 1fr; }
-  .summary-grid { grid-template-columns: 1fr 1fr; }
 }
 
 @media (max-width: 768px) {
@@ -1041,9 +1309,8 @@ a:hover { color: #60a5fa; }
   .table-card { border-radius: var(--radius-md); }
   .results-wrapper { max-height: 450px; }
 
-  .summary-grid { grid-template-columns: 1fr; gap: 12px; }
-  .stat-card { padding: 16px 20px; }
-  .stat-card-value { font-size: 24px; }
+  .stat-card { padding: 16px 18px; }
+  .stat-card-value { font-size: 22px; }
 
   .charts-grid { gap: 12px; }
   .chart-box { height: 280px; padding: 16px; }
@@ -1144,33 +1411,47 @@ a:hover { color: #60a5fa; }
 
 .methodology-content h1 {
   margin: 0 0 32px;
-  font-size: 28px;
-  font-weight: 800;
+  font-size: clamp(36px, 5vw, 52px);
+  font-weight: 700;
   color: var(--foreground);
-  letter-spacing: -0.02em;
+  letter-spacing: -0.04em;
+  line-height: 1;
 }
 
 .methodology-content h2 {
-  margin-top: 48px;
+  margin-top: 56px;
   margin-bottom: 16px;
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 700;
   color: var(--foreground);
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
 }
 .methodology-content h1 + h2 { margin-top: 0; }
 
 .methodology-content h3 {
   margin-top: 28px;
   margin-bottom: 8px;
-  font-size: 15px;
+  font-family: var(--font-mono);
+  font-size: 12px;
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
   color: var(--foreground-muted);
 }
-.methodology-content p,
+/* Body paragraphs in Instrument Serif — gives Methodology editorial weight
+   that separates it from the dashboard's UI typography. List items stay
+   sans-serif for tighter scanning. */
+.methodology-content p {
+  font-family: var(--font-serif);
+  font-size: 19px;
+  line-height: 1.55;
+  margin-bottom: 12px;
+  color: var(--foreground-secondary);
+  letter-spacing: -0.005em;
+}
 .methodology-content li {
-  line-height: 1.8;
-  margin-bottom: 8px;
+  line-height: 1.7;
+  margin-bottom: 6px;
   color: var(--foreground-secondary);
   font-size: 14px;
 }
@@ -1255,8 +1536,12 @@ a:hover { color: #60a5fa; }
 .btn-primary {
   background: var(--foreground);
   color: var(--background);
+  position: relative;
+}
+.btn-primary:hover:not(:disabled) {
+  background: var(--foreground-secondary);
+  box-shadow: var(--signal-glow);
 }
-.btn-primary:hover:not(:disabled) { background: var(--foreground-secondary); }
 
 .btn-secondary {
   background: transparent;
@@ -1281,15 +1566,15 @@ a:hover { color: #60a5fa; }
   letter-spacing: 0.02em;
   font-weight: 600;
 }
-.run-mode-localhost { background: var(--accent-blue-bg); color: #1d4ed8; }
-.run-mode-space { background: var(--accent-purple-bg); color: #5b21b6; }
+.run-mode-localhost { background: var(--accent-blue-bg); color: var(--accent-blue); }
+.run-mode-space { background: var(--accent-purple-bg); color: var(--accent-purple); }
 .run-mode-pages { background: var(--surface-3); color: var(--foreground-secondary); }
-.run-mode-file { background: var(--accent-amber-bg); color: #92400e; }
+.run-mode-file { background: var(--accent-amber-bg); color: var(--accent-amber); }
 
-[data-theme="dark"] .run-mode-localhost { color: #60a5fa; }
-[data-theme="dark"] .run-mode-space { color: #c4b5fd; }
+[data-theme="dark"] .run-mode-localhost { color: var(--accent-blue); }
+[data-theme="dark"] .run-mode-space { color: var(--accent-purple); }
 [data-theme="dark"] .run-mode-pages { color: var(--foreground-muted); }
-[data-theme="dark"] .run-mode-file { color: #fbbf24; }
+[data-theme="dark"] .run-mode-file { color: var(--accent-amber); }
 
 /* Pages-mode read-only banner. */
 .run-pages-banner {
@@ -1304,8 +1589,7 @@ a:hover { color: #60a5fa; }
   border-radius: var(--radius-md);
   font-size: 13px;
 }
-.run-pages-banner a { font-weight: 600; color: #1d4ed8; text-decoration: underline; }
-[data-theme="dark"] .run-pages-banner a { color: #93c5fd; }
+.run-pages-banner a { font-weight: 600; color: var(--accent-blue); text-decoration: underline; }
 
 /* HF hub sign-in/submit row (space surface only). */
 .hub-row { margin-bottom: 20px; }
@@ -1352,6 +1636,44 @@ a:hover { color: #60a5fa; }
   gap: 12px;
   flex-wrap: wrap;
 }
+
+/* Family search — sits at the start of the run-filters row, expands to
+   fill available space so the user has a generous typing target. */
+.filter-group--search { flex: 1 1 220px; min-width: 200px; }
+.run-search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.run-search-icon {
+  position: absolute;
+  left: 10px;
+  color: var(--foreground-muted);
+  pointer-events: none;
+}
+.run-search-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px 0 32px;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.run-search-input::placeholder { color: var(--foreground-muted); }
+.run-search-input:hover { border-color: var(--border-hover); }
+.run-search-input:focus {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px rgba(82, 82, 91, 0.3);
+}
+/* Hide the native "x" clear button on type=search inputs — we don't want
+   the rendering inconsistency between Webkit and Gecko. */
+.run-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
 .run-hide-label {
   display: inline-flex;
   align-items: center;
@@ -1395,17 +1717,17 @@ a:hover { color: #60a5fa; }
   font-size: 12px;
 }
 
-/* Sticky action bar with Download / Run — always reachable inside the
-   long model list. */
+/* Action bar with Download / Run / Abort / Purge — sits between the model
+   list and the Progress section so the controls are visually adjacent to
+   the status they drive. Wrapped in a card so it reads as a deliberate
+   pre-launch surface, not a leftover toolbar. */
 .run-action-bar {
-  position: sticky;
-  top: 0;
-  z-index: 40;
-  margin: 0 0 20px;
-  padding: 12px 32px;
-  background: var(--background);
-  border-bottom: 1px solid var(--border);
-  box-shadow: 0 1px 0 var(--border);
+  margin: 24px 0 16px;
+  padding: 14px 18px;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
 }
 .run-action-bar-inner {
   display: flex;
@@ -1414,10 +1736,72 @@ a:hover { color: #60a5fa; }
   gap: 16px;
   flex-wrap: wrap;
 }
+
+/* Budget meter — visualizes "largest selected model" against the device
+   memory budget so users can tell at-a-glance if their queue will fit. */
+.run-budget {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1 1 280px;
+  min-width: 220px;
+  max-width: 480px;
+}
+.run-budget-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+.run-budget-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--foreground-muted);
+}
+.run-budget-text {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--foreground-secondary);
+}
+.run-budget-text strong {
+  color: var(--foreground);
+  font-weight: 600;
+}
+.run-budget-size {
+  color: var(--foreground);
+  font-weight: 500;
+}
+.run-budget-bar {
+  height: 6px;
+  background: var(--surface-3);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.run-budget-bar-fill {
+  height: 100%;
+  width: 0;
+  background: var(--signal);
+  border-radius: 3px;
+  transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms ease;
+}
+.run-budget[data-tone="warn"] .run-budget-bar-fill { background: var(--accent-amber); }
+.run-budget[data-tone="over"] .run-budget-bar-fill { background: var(--error); }
+.run-budget-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--foreground-muted);
+  letter-spacing: 0.01em;
+  min-height: 14px;
+}
+
 @media (max-width: 640px) {
-  .run-action-bar { padding: 12px 16px; }
+  .run-action-bar { padding: 12px 14px; }
   .run-action-bar-inner { gap: 10px; }
-  .run-actions { margin-left: 0; }
+  .run-actions { margin-left: 0; width: 100%; }
+  .run-budget { max-width: none; }
 }
 
 /* Family cards + variant rows. */
@@ -1482,6 +1866,20 @@ a:hover { color: #60a5fa; }
   cursor: pointer;
   user-select: none;
 }
+.run-family-params {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  background: var(--signal-bg);
+  color: var(--signal-strong);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+[data-theme="dark"] .run-family-params { color: var(--signal); }
 .run-family-stats {
   color: var(--foreground-muted);
   font-size: 12px;
@@ -1489,11 +1887,10 @@ a:hover { color: #60a5fa; }
 }
 .run-family-warning {
   margin-left: auto;
-  color: #92400e;
+  color: var(--accent-amber);
   font-size: 11px;
   font-weight: 600;
 }
-[data-theme="dark"] .run-family-warning { color: #fbbf24; }
 
 .run-variant-list {
   display: flex;
@@ -1547,11 +1944,33 @@ a:hover { color: #60a5fa; }
 .badge--warn { background: var(--accent-amber-bg); color: var(--accent-amber); }
 
 /* Progress table — piggybacks on .results-table styling. */
-.run-progress-table { font-variant-numeric: tabular-nums; }
+.run-progress-table { font-variant-numeric: tabular-nums slashed-zero; }
 .run-progress-table th.num,
 .run-progress-table td.num { text-align: right; }
 .run-row-queued { color: var(--foreground-subtle); }
-.run-row-running td { background: var(--accent-blue-bg); }
+.run-row-running td {
+  background: var(--signal-bg);
+  position: relative;
+}
+/* Animated 1px stripe across the running row's leading cell — signals
+   liveness without consuming attention the way a flashing background would. */
+.run-row-running td:first-child::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent 0%, var(--signal) 50%, transparent 100%);
+  background-size: 50% 100%;
+  background-repeat: no-repeat;
+  animation: running-stripe 1.4s linear infinite;
+  pointer-events: none;
+}
+@keyframes running-stripe {
+  from { background-position: -50% 0; }
+  to { background-position: 150% 0; }
+}
 .run-row-ok { color: var(--foreground-secondary); }
 .run-row-error td { color: var(--error); }
 .run-row-error td.err { font-family: var(--font-mono); font-size: 12px; }

index.html

@@ -8,7 +8,7 @@
   <title>WebGPU Bench</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 </head>
@@ -22,7 +22,7 @@
       <nav class="header-nav" aria-label="Primary">
         <a href="run.html" class="header-link">Run</a>
         <a href="methodology.html" class="header-link">Methodology</a>
-        <button id="theme-toggle" class="header-link theme-toggle-btn" type="button" title="Toggle theme">
+        <button id="theme-toggle" class="header-link theme-toggle-btn" type="button" title="Toggle theme" aria-label="Toggle dark mode">
           <svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
           <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
         </button>
@@ -51,14 +51,26 @@
       <section class="hero">
         <div class="container hero-inner">
           <div class="hero-copy">
+            <span class="hero-eyebrow" id="hero-live" hidden>
+              <span class="hero-eyebrow-dot" aria-hidden="true"></span>
+              <span id="hero-live-text">Live</span>
+            </span>
             <h1 class="hero-title">WebGPU Bench</h1>
             <p class="hero-lede">Real-browser benchmarks for <code>llama.cpp</code>'s WebGPU backend. GGUF models loaded via WebAssembly, measured across Chrome and Safari.</p>
             <p class="hero-meta" id="hero-meta" hidden></p>
+            <div class="hero-actions">
+              <a href="run.html" class="btn btn-primary">Run on your machine</a>
+              <a href="methodology.html" class="btn btn-secondary">Methodology</a>
+            </div>
           </div>
-          <div class="hero-actions">
-            <a href="run.html" class="btn btn-primary">Run on your machine</a>
-            <a href="methodology.html" class="btn btn-secondary">Methodology</a>
-          </div>
+          <aside class="hero-stat" id="hero-stat" aria-live="polite" hidden>
+            <span class="hero-stat-label">Top decode</span>
+            <span class="hero-stat-value">
+              <span class="hero-stat-num" id="hero-top-decode" data-target="0">0.0</span>
+              <span class="hero-stat-unit">tok/s</span>
+            </span>
+            <span class="hero-stat-meta" id="hero-top-meta">—</span>
+          </aside>
         </div>
       </section>
 
@@ -127,8 +139,8 @@
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
               </div>
               <div class="stat-card-content">
-                <span class="stat-card-label">Machines Tested</span>
-                <span class="stat-card-value" id="stat-machines">0</span>
+                <span class="stat-card-label">Machines</span>
+                <span class="stat-card-value" id="stat-machines" data-target="0">0</span>
               </div>
             </div>
             <div class="stat-card">
@@ -137,7 +149,7 @@
               </div>
               <div class="stat-card-content">
                 <span class="stat-card-label">Benchmarks</span>
-                <span class="stat-card-value" id="stat-benchmarks">0</span>
+                <span class="stat-card-value" id="stat-benchmarks" data-target="0">0</span>
               </div>
             </div>
             <div class="stat-card">
@@ -146,7 +158,25 @@
               </div>
               <div class="stat-card-content">
                 <span class="stat-card-label">Pass Rate</span>
-                <span class="stat-card-value" id="stat-pass-rate">0%</span>
+                <span class="stat-card-value"><span id="stat-pass-rate" data-target="0">0</span><span class="stat-card-unit">%</span></span>
+              </div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-card-icon stat-card-icon--decode">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 17 9 11 13 15 21 7"/><polyline points="14 7 21 7 21 14"/></svg>
+              </div>
+              <div class="stat-card-content">
+                <span class="stat-card-label">Best Decode</span>
+                <span class="stat-card-value"><span id="stat-best-decode" data-target="0">0.0</span><span class="stat-card-unit">tok/s</span></span>
+              </div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-card-icon stat-card-icon--size">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+              </div>
+              <div class="stat-card-content">
+                <span class="stat-card-label">Largest Run</span>
+                <span class="stat-card-value"><span id="stat-largest" data-target="0">0</span><span class="stat-card-unit">MB</span></span>
               </div>
             </div>
           </div>

js/app.js

@@ -78,12 +78,21 @@ function render() {
   const filters = getFilters();
   const filtered = filterResults(appData.results, filters);
 
-  // Summary cards
+  // Summary cards — counts tween from previous value to new on filter changes
+  // and from 0 on first paint (since `data-value` defaults to "0").
   const passed = filtered.filter(r => r.status === 'done');
-  document.getElementById('stat-machines').textContent = appData.meta.machines.length;
-  document.getElementById('stat-benchmarks').textContent = filtered.length;
-  const passRate = filtered.length > 0 ? ((passed.length / filtered.length) * 100).toFixed(0) : '0';
-  document.getElementById('stat-pass-rate').textContent = `${passRate}%`;
+  animateCount(document.getElementById('stat-machines'), appData.meta.machines.length, { decimals: 0 });
+  animateCount(document.getElementById('stat-benchmarks'), filtered.length, { decimals: 0 });
+  const passRate = filtered.length > 0 ? (passed.length / filtered.length) * 100 : 0;
+  animateCount(document.getElementById('stat-pass-rate'), passRate, { decimals: 0 });
+
+  const decodeVals = passed.map(r => r.decode_tok_s).filter(v => v != null);
+  const bestDecode = decodeVals.length ? Math.max(...decodeVals) : 0;
+  animateCount(document.getElementById('stat-best-decode'), bestDecode, { decimals: 1 });
+
+  const sizes = passed.map(r => r.sizeMB).filter(v => v != null);
+  const largest = sizes.length ? Math.max(...sizes) : 0;
+  animateCount(document.getElementById('stat-largest'), largest, { decimals: 0 });
 
   // Results count
   const countEl = document.getElementById('results-count');
@@ -94,15 +103,16 @@ function render() {
       : `${filtered.length} of ${total}`;
   }
 
-  // Reset button — always visible so users understand filters can be
-  // cleared; disabled when nothing to reset.
+  // Reset button — only present when at least one filter is active. Hiding
+  // (rather than disabling) removes a permanent ghost button from the bar
+  // and makes the appearance signal "you can undo your filter."
   const resetBtn = document.getElementById('filter-reset');
   if (resetBtn) {
     const activeCount = (filters.machine !== 'all' ? 1 : 0) + (filters.browser !== 'all' ? 1 : 0) +
       (filters.model !== 'all' ? 1 : 0) + (filters.backend !== 'all' ? 1 : 0) +
       (filters.status !== 'all' ? 1 : 0) + (filters.quants.size > 0 ? 1 : 0);
     resetBtn.disabled = activeCount === 0;
-    resetBtn.style.display = '';
+    resetBtn.hidden = activeCount === 0;
     const label = resetBtn.querySelector('.filter-reset-label') || resetBtn;
     if (label !== resetBtn) {
       label.textContent = activeCount ? `Reset (${activeCount})` : 'Reset';
@@ -160,22 +170,63 @@ function renderCpuGpuSection(filtered, metric) {
 
 function renderHeroMeta(data) {
   const el = document.getElementById('hero-meta');
-  if (!el) return;
+  const liveEl = document.getElementById('hero-live');
+  const liveText = document.getElementById('hero-live-text');
   const generated = data?.meta?.generatedAt;
   const machineCount = data?.meta?.machines?.length || 0;
   const resultCount = data?.results?.length || 0;
-  const parts = [];
-  if (machineCount > 0) parts.push(`${machineCount} machine${machineCount === 1 ? '' : 's'}`);
-  if (resultCount > 0) parts.push(`${resultCount} benchmark${resultCount === 1 ? '' : 's'}`);
-  if (generated) {
-    const d = new Date(generated);
-    const rel = formatRelativeTime(d);
-    parts.push(`updated ${rel}`);
+
+  if (el) {
+    const parts = [];
+    if (machineCount > 0) parts.push(`${machineCount} machine${machineCount === 1 ? '' : 's'}`);
+    if (resultCount > 0) parts.push(`${resultCount} benchmark${resultCount === 1 ? '' : 's'}`);
+    if (generated) parts.push(`updated ${formatRelativeTime(new Date(generated))}`);
+    if (parts.length > 0) {
+      el.textContent = parts.join(' · ');
+      el.hidden = false;
+      if (generated) el.title = new Date(generated).toLocaleString();
+    }
+  }
+
+  if (liveEl && liveText && generated) {
+    liveText.textContent = `Live · ${formatRelativeTime(new Date(generated))}`;
+    liveEl.hidden = false;
+  }
+
+  // Hero stat: top decode tok/s with machine + model context.
+  const passed = (data?.results || []).filter(r => r.status === 'done' && r.decode_tok_s != null);
+  const heroStatEl = document.getElementById('hero-stat');
+  const heroNumEl = document.getElementById('hero-top-decode');
+  const heroMetaEl = document.getElementById('hero-top-meta');
+  if (heroStatEl && heroNumEl && heroMetaEl && passed.length > 0) {
+    const top = passed.reduce((a, b) => (a.decode_tok_s > b.decode_tok_s ? a : b));
+    heroStatEl.hidden = false;
+    heroMetaEl.textContent = `${top.machineSlug || top.machine || '—'} · ${top.model || ''} ${top.variant || ''}`.trim();
+    animateCount(heroNumEl, top.decode_tok_s, { decimals: 1, duration: 800 });
   }
-  if (parts.length === 0) return;
-  el.textContent = parts.join(' · ');
-  el.hidden = false;
-  if (generated) el.title = new Date(generated).toLocaleString();
+}
+
+/* Tween numeric content from 0 to a target. CSS-only via @property would
+   need server-side @property registration to work in older Safari; keep
+   this 12-line JS tween for predictability. */
+export function animateCount(el, target, { decimals = 0, duration = 600 } = {}) {
+  if (!el) return;
+  const start = parseFloat(el.dataset.value || '0') || 0;
+  const end = Number(target) || 0;
+  if (start === end) {
+    el.textContent = end.toFixed(decimals);
+    return;
+  }
+  const startTime = performance.now();
+  const ease = (t) => 1 - Math.pow(1 - t, 3);
+  function step(now) {
+    const t = Math.min(1, (now - startTime) / duration);
+    const v = start + (end - start) * ease(t);
+    el.textContent = v.toFixed(decimals);
+    if (t < 1) requestAnimationFrame(step);
+    else el.dataset.value = String(end);
+  }
+  requestAnimationFrame(step);
 }
 
 function formatRelativeTime(date) {
@@ -194,6 +245,7 @@ function initSectionNav() {
   const nav = document.getElementById('section-nav');
   if (!nav) return;
 
+  const track = nav.querySelector('.section-nav-track');
   const buttons = nav.querySelectorAll('.section-nav-item');
   const sections = [];
 
@@ -216,6 +268,14 @@ function initSectionNav() {
     });
   });
 
+  // Drive the sliding indicator from the active button's geometry. Track
+  // is the positioned ancestor; offsetLeft/offsetWidth are relative to it.
+  const moveIndicator = (btn) => {
+    if (!track || !btn) return;
+    track.style.setProperty('--indicator-x', `${btn.offsetLeft}px`);
+    track.style.setProperty('--indicator-w', `${btn.offsetWidth}px`);
+  };
+
   // Scroll spy: instead of IntersectionObserver (which fires inconsistently
   // when multiple sections overlap the observer band), compute the
   // currently-active section on scroll by comparing each section's top to
@@ -225,13 +285,14 @@ function initSectionNav() {
   let ticking = false;
   const updateActive = () => {
     const anchor = stickyHead.offsetHeight + 16;
-    let activeId = sections[0].section.id;
-    for (const { section } of sections) {
-      const top = section.getBoundingClientRect().top;
-      if (top - anchor <= 0) activeId = section.id;
+    let active = sections[0];
+    for (const entry of sections) {
+      const top = entry.section.getBoundingClientRect().top;
+      if (top - anchor <= 0) active = entry;
       else break;
     }
-    buttons.forEach(b => b.classList.toggle('active', b.dataset.section === activeId));
+    buttons.forEach(b => b.classList.toggle('active', b === active.btn));
+    moveIndicator(active.btn);
   };
   const onScroll = () => {
     if (ticking) return;
@@ -241,6 +302,8 @@ function initSectionNav() {
   window.addEventListener('scroll', onScroll, { passive: true });
   window.addEventListener('resize', onScroll);
   updateActive();
+  // Re-measure once fonts settle — Bricolage Grotesque shifts widths.
+  document.fonts?.ready?.then(() => updateActive()).catch(() => {});
 }
 
 init();

js/charts.js

@@ -1,18 +1,27 @@
 import { BROWSER_COLORS, quantSortKey, groupBy, formatTokS } from './utils.js';
 
-// Global Chart.js theme
-Chart.defaults.font.family = "'Manrope', system-ui, -apple-system, sans-serif";
+// Global Chart.js theme — uses the site's font tokens and a calm tooltip
+// silhouette. Colors are pulled from CSS variables at render time so the
+// theme toggle works without rebuilding chart instances.
+Chart.defaults.font.family = "'Bricolage Grotesque', system-ui, -apple-system, sans-serif";
+Chart.defaults.font.size = 12;
 Chart.defaults.color = '#a1a1aa';
+Chart.defaults.borderColor = 'rgba(255,255,255,0.06)';
 Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(15, 15, 18, 0.95)';
 Chart.defaults.plugins.tooltip.borderColor = '#27272a';
 Chart.defaults.plugins.tooltip.borderWidth = 1;
 Chart.defaults.plugins.tooltip.cornerRadius = 8;
 Chart.defaults.plugins.tooltip.padding = { top: 8, bottom: 8, left: 12, right: 12 };
-Chart.defaults.plugins.tooltip.titleFont = { weight: '600', size: 13 };
-Chart.defaults.plugins.tooltip.bodyFont = { family: "'JetBrains Mono', monospace", size: 12 };
-Chart.defaults.plugins.legend.labels.boxWidth = 12;
-Chart.defaults.plugins.legend.labels.boxHeight = 12;
+Chart.defaults.plugins.tooltip.titleFont = { weight: '600', size: 12, family: "'Bricolage Grotesque', system-ui, sans-serif" };
+Chart.defaults.plugins.tooltip.bodyFont = { family: "'Geist Mono', 'SF Mono', monospace", size: 12 };
+Chart.defaults.plugins.tooltip.displayColors = true;
+Chart.defaults.plugins.tooltip.boxPadding = 6;
+Chart.defaults.plugins.legend.labels.boxWidth = 8;
+Chart.defaults.plugins.legend.labels.boxHeight = 8;
 Chart.defaults.plugins.legend.labels.padding = 16;
+Chart.defaults.plugins.legend.labels.font = { family: "'Geist Mono', monospace", size: 11 };
+Chart.defaults.elements.bar.borderRadius = 4;
+Chart.defaults.elements.bar.borderSkipped = false;
 
 const chartInstances = new Map();
 
@@ -26,9 +35,10 @@ function destroyChart(id) {
 function themeColors() {
   const dark = document.documentElement.getAttribute('data-theme') === 'dark';
   return {
-    grid:  dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)',
+    grid:  dark ? 'rgba(255,255,255,0.04)' : 'rgba(15, 23, 42, 0.05)',
     text:  dark ? '#a1a1aa' : '#71717a',
     title: dark ? '#e4e4e7' : '#09090b',
+    signal: dark ? '#22e09a' : '#0fa968',
   };
 }
 

js/run/controller.js

@@ -299,11 +299,17 @@ function renderModels() {
     nameLabel.htmlFor = selectAllId;
     nameLabel.textContent = family;
 
+    const paramChip = document.createElement('span');
+    paramChip.className = 'run-family-params';
+    const params = parseParamSize(family);
+    if (params) paramChip.textContent = params;
+    else paramChip.hidden = true;
+
     const stats = document.createElement('span');
     stats.className = 'run-family-stats';
     stats.textContent = `${variants.length} variants · ${fitsCount} fit · ${quickFitCount} quick`;
 
-    header.append(toggleBtn, selectAll, nameLabel, stats);
+    header.append(toggleBtn, selectAll, nameLabel, paramChip, stats);
 
     if (/^granite-4/i.test(family)) {
       const w = document.createElement('span');
@@ -362,7 +368,12 @@ function updateFamilySelectAllState(family) {
     `.run-family[data-family="${cssEscape(family)}"]`,
   );
   if (!familyEl) return;
-  const rows = familyEl.querySelectorAll('.run-variant-select');
+  // Only count fit variants — the parent checkbox is intentionally limited
+  // to toggling fits (non-fits would OOM). If we counted non-fits here too,
+  // the parent could never reach "all checked" for any mixed family, which
+  // wedges its underlying `checked` at false and turns subsequent clicks
+  // into no-ops (see SmolLM3-3B: 21 fit / 24 variants).
+  const rows = familyEl.querySelectorAll('.run-variant-row:not(.is-non-fit) .run-variant-select');
   const all = rows.length;
   const checked = [...rows].filter(cb => cb.checked).length;
   const selectAll = familyEl.querySelector('.run-family-select-all');
@@ -396,6 +407,18 @@ function formatSize(mb) {
   return `${mb.toFixed(0)} MB`;
 }
 
+/* Pull a parameter-count hint (e.g. "1B", "270M", "0.6B") from a family
+   name. Most family names embed this near the end (Llama-3.2-1B-Instruct,
+   gemma-3-270m-it). Returns the LAST `<digits>[Bb|Mm]` token in the name,
+   uppercased. Returns null if no match — chip is then hidden. */
+function parseParamSize(name) {
+  if (!name) return null;
+  const matches = String(name).match(/(\d+\.?\d*)\s*[BbMm](?![A-Za-z])/g);
+  if (!matches?.length) return null;
+  const last = matches[matches.length - 1];
+  return last.toUpperCase().replace(/\s+/g, '');
+}
+
 function escapeText(s) {
   return String(s).replace(/[&<>]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
 }
@@ -457,6 +480,32 @@ function wireFilters() {
   });
 }
 
+function wireFamilySearch() {
+  const input = $('family-search');
+  if (!input) return;
+  // Live-filter family cards on input. Match against the lowercased family
+  // name; auto-expand any family that matches a non-empty query so the user
+  // sees the relevant variants without an extra click.
+  input.addEventListener('input', () => {
+    const q = input.value.trim().toLowerCase();
+    document.querySelectorAll('.run-family').forEach(el => {
+      const family = (el.dataset.family || '').toLowerCase();
+      const match = q === '' || family.includes(q);
+      el.hidden = !match;
+      // Expand on match-with-query so variants are visible without a click.
+      if (q !== '' && match) {
+        const list = el.querySelector('.run-variant-list');
+        const toggle = el.querySelector('.run-family-toggle');
+        if (list && toggle) {
+          list.hidden = false;
+          toggle.setAttribute('aria-expanded', 'true');
+          el.classList.add('is-open');
+        }
+      }
+    });
+  });
+}
+
 function wireBatchSelect() {
   const apply = (pred) => {
     document.querySelectorAll('.run-variant-select').forEach(cb => {
@@ -547,21 +596,50 @@ function updateButtons() {
   // workflow.)
   const rn = $('btn-run'); if (rn) rn.disabled = state.running || checked.length === 0;
   const ab = $('btn-abort'); if (ab) { ab.disabled = !state.running; ab.hidden = !state.running; }
-  const status = $('queue-status');
-  if (status) {
-    if (checked.length === 0) {
-      status.textContent = '';
-    } else {
-      const toDownload = checked.filter(v => !isCached(v));
-      const dlMB = toDownload.reduce((a, v) => a + (v.sizeMB || 0), 0);
-      const parts = [
-        `${checked.length} selected`,
-        `${cachedChecked.length} cached`,
-      ];
-      if (dlMB > 0) parts.push(`~${formatSize(dlMB)} to download`);
-      status.textContent = parts.join(' · ');
-    }
+  renderBudgetMeter(checked, cachedChecked);
+}
+
+/* Show selected size as a fill bar against the device's max model size.
+   Three states drive the fill color: under (signal green), nearing (amber
+   ≥ 70%), over (red ≥ 100%). When nothing is selected, hide the whole
+   widget so the action bar isn't dominated by an empty meter. */
+function renderBudgetMeter(checked, cachedChecked) {
+  const widget = $('run-budget');
+  const fill = $('run-budget-fill');
+  const text = $('run-budget-text');
+  const meta = $('run-budget-meta');
+  if (!widget || !fill || !text || !meta) return;
+
+  if (checked.length === 0) {
+    widget.hidden = true;
+    return;
+  }
+  widget.hidden = false;
+
+  const totalMB = checked.reduce((a, v) => a + (v.sizeMB || 0), 0);
+  const toDownload = checked.filter(v => !isCached(v));
+  const dlMB = toDownload.reduce((a, v) => a + (v.sizeMB || 0), 0);
+  const budgetMB = state.budget?.budgetMB || 0;
+
+  // Largest single model is what really matters for the device — total is
+  // download size, not peak memory. Show both.
+  const largest = checked.reduce((m, v) => Math.max(m, v.sizeMB || 0), 0);
+  const pct = budgetMB > 0 ? Math.min(100, (largest / budgetMB) * 100) : 0;
+
+  fill.style.width = `${pct}%`;
+  let tone = 'ok';
+  if (budgetMB > 0 && largest > budgetMB) tone = 'over';
+  else if (budgetMB > 0 && largest / budgetMB >= 0.7) tone = 'warn';
+  widget.dataset.tone = tone;
+
+  text.innerHTML = `<strong>${checked.length}</strong> selected · <span class="run-budget-size">${formatSize(totalMB)}</span> total`;
+  const metaParts = [];
+  if (largest > 0 && budgetMB > 0) {
+    metaParts.push(`largest ${formatSize(largest)} / budget ${formatSize(budgetMB)}`);
   }
+  if (cachedChecked.length > 0) metaParts.push(`${cachedChecked.length} cached`);
+  if (dlMB > 0) metaParts.push(`~${formatSize(dlMB)} to download`);
+  meta.textContent = metaParts.join(' · ');
 }
 
 // ──────────────── progress table ────────────────
@@ -1424,6 +1502,7 @@ export async function mountRunSection() {
   renderModels();
   wireSelectionHandlers();
   wireFilters();
+  wireFamilySearch();
   wireBatchSelect();
   wireIterationsInput();
   wireRunHandlers();

js/tables.js

@@ -217,11 +217,15 @@ export function renderMachineInfo(machines) {
   const addYourMachineCard = `
     <a class="machine-card machine-card-add" href="run.html">
       <div class="machine-card-header">
-        <svg class="machine-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        <svg class="machine-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
         <h3>Add your machine</h3>
       </div>
-      <p class="machine-card-add-blurb">Run the benchmark in your browser and contribute results to the leaderboard.</p>
-      <span class="machine-card-add-cta">Open Run page →</span>
+      <p class="machine-card-add-blurb">Run benchmarks directly in your browser. Results post to the leaderboard.</p>
+      <code class="machine-card-add-cmd">npm run bench:quick</code>
+      <span class="machine-card-add-cta">
+        Open Run page
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+      </span>
     </a>`;
 
   if (machines.length === 0) {

methodology.html

@@ -8,7 +8,7 @@
   <title>Methodology — WebGPU Bench</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
@@ -21,7 +21,7 @@
       <nav class="header-nav" aria-label="Primary">
         <a href="index.html" class="header-link">Dashboard</a>
         <a href="run.html" class="header-link">Run</a>
-        <button id="theme-toggle" class="header-link theme-toggle-btn" type="button" title="Toggle theme">
+        <button id="theme-toggle" class="header-link theme-toggle-btn" type="button" title="Toggle theme" aria-label="Toggle dark mode">
           <svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
           <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
         </button>

run.html

@@ -8,7 +8,7 @@
   <title>Run — WebGPU Bench</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
   <!-- Import map so `@huggingface/hub` resolves in the browser via esm.sh.
        Must appear before any <script type="module">. -->
@@ -30,7 +30,7 @@
       <nav class="header-nav" aria-label="Primary">
         <a href="index.html" class="header-link">Dashboard</a>
         <a href="methodology.html" class="header-link">Methodology</a>
-        <button id="theme-toggle" class="header-link theme-toggle-btn" type="button" title="Toggle theme">
+        <button id="theme-toggle" class="header-link theme-toggle-btn" type="button" title="Toggle theme" aria-label="Toggle dark mode">
           <svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
           <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
         </button>
@@ -113,6 +113,13 @@
         <!-- Hide filters, iterations, actions -->
         <div class="filter-bar run-controls">
           <div class="filter-bar-inner run-filters">
+            <div class="filter-group filter-group--search">
+              <label class="filter-label" for="family-search">Search</label>
+              <div class="run-search-wrapper">
+                <svg class="run-search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                <input type="search" id="family-search" class="run-search-input" placeholder="Filter models…" autocomplete="off" spellcheck="false">
+              </div>
+            </div>
             <div class="filter-group">
               <span class="filter-label">Hide</span>
               <div class="run-filters-checks">
@@ -136,10 +143,26 @@
           </div>
         </div>
 
-        <!-- Sticky action bar: always-reachable Download/Run -->
+        <!-- Family / variant list -->
+        <div id="run-models" class="run-models-stack">
+          <div class="empty-state">Loading models…</div>
+        </div>
+
+        <!-- Action bar: lives just above Progress so the Run/Abort/Download
+             controls are co-located with the live status they affect. -->
         <div class="run-action-bar">
           <div class="run-action-bar-inner">
-            <span id="queue-status" class="run-queue-status"></span>
+            <div class="run-budget" id="run-budget" hidden>
+              <div class="run-budget-row">
+                <span class="run-budget-label">Selected</span>
+                <span class="run-budget-text" id="run-budget-text">—</span>
+              </div>
+              <div class="run-budget-bar" role="progressbar" aria-labelledby="run-budget-text">
+                <div class="run-budget-bar-fill" id="run-budget-fill"></div>
+              </div>
+              <div class="run-budget-meta" id="run-budget-meta"></div>
+            </div>
+            <span id="queue-status" class="run-queue-status" hidden></span>
             <div class="run-actions">
               <button class="btn btn-secondary" id="btn-download" type="button" disabled>Download selected</button>
               <button class="btn btn-primary" id="btn-run" type="button" disabled>Run benchmarks</button>
@@ -149,11 +172,6 @@
           </div>
         </div>
 
-        <!-- Family / variant list -->
-        <div id="run-models" class="run-models-stack">
-          <div class="empty-state">Loading models…</div>
-        </div>
-
         <!-- Progress -->
         <div class="section-header">
           <h2 class="subsection-title">Progress</h2>