sync from abhijitramesh/webgpu-bench@9f9ce2bf77

css/style.css

@@ -5,6 +5,8 @@
 
 /* === RESET === */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { overflow-x: hidden; max-width: 100%; }
+html { scroll-padding-top: 80px; }
 
 /* === DESIGN TOKENS === */
 :root {
@@ -203,6 +205,33 @@ a:hover { color: #60a5fa; }
   color: var(--foreground-muted);
   font-size: 13px;
 }
+/* Skeleton rows that mimic the dashboard shell while data loads — reduces
+   perceived latency compared with a centered spinner + text swap. */
+.skeleton {
+  background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%);
+  background-size: 200% 100%;
+  border-radius: var(--radius-md);
+  animation: shimmer 1.2s ease-in-out infinite;
+}
+@keyframes shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
+.skeleton-hero { height: 120px; margin: 32px 0 1px; border-radius: 0; }
+.skeleton-filters { height: 70px; margin-bottom: 1px; border-radius: 0; }
+.skeleton-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  padding: 32px;
+}
+.skeleton-stats > div { height: 80px; }
+.skeleton-table { margin: 0 32px 32px; height: 240px; }
+@media (max-width: 640px) {
+  .skeleton-stats { grid-template-columns: 1fr; padding: 16px; }
+  .skeleton-table { margin: 0 16px 24px; }
+}
+
 .loading-hint code {
   background: var(--surface-2);
   padding: 2px 8px;
@@ -211,6 +240,59 @@ a:hover { color: #60a5fa; }
   font-size: 12px;
 }
 
+/* =============================================================
+   HERO
+   ============================================================= */
+.hero {
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
+}
+.hero-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding-top: 32px;
+  padding-bottom: 32px;
+  flex-wrap: wrap;
+}
+.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;
+  color: var(--foreground);
+}
+.hero-lede {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.55;
+  color: var(--foreground-secondary);
+  max-width: 62ch;
+}
+.hero-meta {
+  margin: 10px 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;
+  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 .btn { text-decoration: none; }
+@media (max-width: 640px) {
+  .hero-inner { padding-top: 20px; padding-bottom: 20px; }
+  .hero-title { font-size: 22px; }
+  .hero-lede { font-size: 14px; }
+}
+
 /* =============================================================
    FILTER BAR
    ============================================================= */
@@ -234,8 +316,8 @@ a:hover { color: #60a5fa; }
 }
 .filter-label {
   font-size: 11px;
-  font-weight: 600;
-  color: var(--foreground-subtle);
+  font-weight: 700;
+  color: var(--foreground-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -297,11 +379,15 @@ a:hover { color: #60a5fa; }
   cursor: pointer;
   transition: all var(--transition-fast);
 }
-.filter-reset-btn:hover {
+.filter-reset-btn:hover:not(:disabled) {
   background: var(--surface-2);
   color: var(--foreground);
   border-color: var(--border-hover);
 }
+.filter-reset-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 /* =============================================================
    QUANT MULTI-SELECT DROPDOWN
@@ -425,12 +511,25 @@ a:hover { color: #60a5fa; }
 }
 
 /* =============================================================
-   SECTION NAVIGATION (Sticky Tabs)
+   STICKY HEAD (filter bar + section jump links)
    ============================================================= */
-.section-nav {
+.sticky-head {
   position: sticky;
   top: 0;
-  z-index: 40;
+  z-index: 45;
+  background: var(--background);
+}
+/* On small screens the filter-bar + nav together exceed 500px, which is
+   worse than not sticking at all. Drop back to static flow so the user
+   can see content. */
+@media (max-width: 768px) {
+  .sticky-head { position: static; }
+}
+
+/* =============================================================
+   SECTION NAVIGATION (jump links)
+   ============================================================= */
+.section-nav {
   background: var(--background);
   border-bottom: 1px solid var(--border);
 }
@@ -482,6 +581,32 @@ a:hover { color: #60a5fa; }
   color: var(--foreground);
   letter-spacing: -0.01em;
 }
+.section-header h1 {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--foreground);
+  letter-spacing: -0.02em;
+}
+
+/* Run page hero row — matches the size of the Methodology h1 / index
+   hero-title (28px). Houses the mode badge inline. */
+.run-hero {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+.run-hero-title {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--foreground);
+}
+@media (max-width: 640px) {
+  .run-hero-title { font-size: 22px; }
+}
 .results-count {
   font-size: 13px;
   color: var(--foreground-muted);
@@ -580,6 +705,36 @@ a:hover { color: #60a5fa; }
   user-select: none;
 }
 
+/* Sticky-left columns: Machine (col 1) + Model (col 2). Keeps the row
+   identity visible when scrolling through the 19-column table. */
+.results-table .col-pin {
+  position: sticky;
+  z-index: 2;
+}
+.results-table thead th.col-pin {
+  z-index: 11;
+  background: var(--surface-1);
+}
+.results-table tbody td.col-pin { background: var(--background); }
+[data-theme="dark"] .results-table tbody td.col-pin { background: var(--surface-0); }
+.results-table tbody tr:hover td.col-pin { background: var(--surface-2); }
+.results-table .col-pin-1 { left: 0; }
+.results-table .col-pin-2 {
+  left: 140px;
+  box-shadow: 1px 0 0 var(--border);
+}
+@media (max-width: 768px) {
+  .results-table .col-pin { position: static; box-shadow: none; }
+}
+/* Priority-based responsive columns: drop the bulky metric columns so
+   the mobile table is readable instead of an endless horizontal scroll. */
+@media (max-width: 900px) {
+  .results-table .col-p3 { display: none; }
+}
+@media (max-width: 640px) {
+  .results-table .col-p2 { display: none; }
+}
+
 /* Sortable headers (results table only) */
 .results-table thead th {
   cursor: pointer;
@@ -592,6 +747,25 @@ a:hover { color: #60a5fa; }
 .results-table thead th.sorted {
   color: var(--foreground);
 }
+.results-table thead th:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+.results-table .th-label { margin-right: 4px; }
+.results-table .th-sort-indicator {
+  display: inline-block;
+  width: 10px;
+  color: var(--foreground-muted);
+  opacity: 0.45;
+  font-weight: 500;
+  transition: opacity var(--transition-fast), color var(--transition-fast);
+}
+.results-table thead th[aria-sort="ascending"] .th-sort-indicator,
+.results-table thead th[aria-sort="descending"] .th-sort-indicator {
+  opacity: 1;
+  color: var(--foreground);
+}
+.results-table thead th:hover .th-sort-indicator { opacity: 0.85; }
 
 /* Table cells */
 .results-table td,
@@ -630,12 +804,19 @@ a:hover { color: #60a5fa; }
   text-transform: uppercase;
   letter-spacing: 0.02em;
 }
-.badge--pass { background: var(--success-bg); color: var(--success); }
-.badge--fail { background: var(--error-bg); color: var(--error); }
-.badge--yes { background: var(--accent-blue-bg); color: var(--accent-blue); }
-.badge--no { background: var(--surface-3); color: var(--foreground-subtle); }
-.badge--webgpu { background: var(--accent-purple-bg); color: var(--accent-purple); }
-.badge--cpu { background: var(--accent-amber-bg); color: var(--accent-amber); }
+.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--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; }
+
+[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--no { color: var(--foreground-muted); }
+[data-theme="dark"] .badge--webgpu { color: #c4b5fd; }
+[data-theme="dark"] .badge--cpu { color: #fbbf24; }
 
 /* =============================================================
    ERROR CELLS & CATEGORIES
@@ -672,16 +853,18 @@ a:hover { color: #60a5fa; }
   padding: 20px;
   position: relative;
   height: 340px;
+  min-width: 0;
   transition: border-color var(--transition-base);
 }
+.chart-box canvas { max-width: 100%; }
 .chart-box:hover { border-color: var(--border-hover); }
 
 .subsection-title { font-size: 16px; font-weight: 600; color: var(--foreground); margin: 0; }
 .metric-selector { display: flex; align-items: center; gap: 8px; }
-.metric-selector-label { font-size: 13px; color: var(--foreground-subtle); }
-.col-sublabel { font-size: 10px; font-weight: 400; color: var(--foreground-subtle); }
+.metric-selector-label { font-size: 13px; color: var(--foreground-muted); }
+.col-sublabel { font-size: 10px; font-weight: 400; color: var(--foreground-muted); }
 .th-group { text-align: center; font-weight: 700; color: var(--foreground); background: var(--surface-2); }
-.th-sub { font-size: 11px; font-weight: 500; color: var(--foreground-subtle); white-space: nowrap; }
+.th-sub { font-size: 11px; font-weight: 500; color: var(--foreground-muted); white-space: nowrap; }
 .th-group-border { border-right: 1px solid var(--border-hover); }
 .results-table td:has(+ .th-group-border) { border-right: 1px solid var(--border-hover); }
 
@@ -690,7 +873,7 @@ a:hover { color: #60a5fa; }
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: var(--foreground-subtle);
+  color: var(--foreground-secondary);
   font-size: 13px;
 }
 
@@ -711,6 +894,42 @@ 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. */
+.machine-card-add {
+  display: flex;
+  flex-direction: column;
+  border-style: dashed;
+  background: transparent;
+  color: var(--foreground-secondary);
+  text-decoration: none;
+  gap: 12px;
+}
+.machine-card-add:hover {
+  border-color: var(--foreground-muted);
+  background: var(--surface-1);
+  color: var(--foreground);
+}
+.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-blurb {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--foreground-secondary);
+}
+.machine-card-add-cta {
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--foreground);
+  margin-top: auto;
+}
+
 .machine-card-header {
   display: flex;
   align-items: center;
@@ -747,9 +966,22 @@ a:hover { color: #60a5fa; }
 .empty-state {
   padding: 48px 24px;
   text-align: center;
-  color: var(--foreground-subtle);
+  color: var(--foreground-secondary);
   font-size: 14px;
 }
+.empty-state p + p { margin-top: 8px; }
+.empty-state-sub {
+  font-size: 13px;
+  color: var(--foreground-muted);
+  max-width: 52ch;
+  margin-inline: auto;
+  line-height: 1.5;
+}
+.empty-state a {
+  color: var(--foreground);
+  font-weight: 600;
+  text-decoration: underline;
+}
 
 /* =============================================================
    UTILITY CLASSES
@@ -784,8 +1016,17 @@ a:hover { color: #60a5fa; }
 }
 
 @media (max-width: 768px) {
-  .header-inner { padding: 0 16px; height: 48px; }
+  .header-inner { padding: 0 12px; height: 48px; gap: 8px; }
   .header-title { font-size: 14px; }
+  .header-nav { gap: 2px; }
+  .header-link { padding: 6px 8px; font-size: 12px; }
+  /* Hide the "GitHub" wordmark, keep the icon-only link. */
+  .header-nav > a[href*="github.com"] { padding: 6px; }
+  .header-nav > a[href*="github.com"] > :not(svg) { display: none; }
+}
+@media (max-width: 420px) {
+  .header-title { display: none; }
+  .header-link { padding: 6px; font-size: 12px; }
 
   .filter-bar { padding: 16px; }
   .filter-bar-inner { flex-direction: column; align-items: stretch; gap: 12px; }
@@ -821,11 +1062,74 @@ a:hover { color: #60a5fa; }
 /* =============================================================
    METHODOLOGY PAGE
    ============================================================= */
-.methodology-content {
-  max-width: 800px;
+/* Two-column layout: sticky ToC on the left, content on the right.
+   Falls back to a stacked layout on small screens. */
+.methodology-layout {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 800px);
+  gap: 48px;
+  max-width: 1100px;
   margin: 0 auto;
   padding: 40px 32px 80px;
 }
+.methodology-toc {
+  position: sticky;
+  top: 24px;
+  align-self: start;
+  font-size: 13px;
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
+}
+.methodology-toc-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--foreground-muted);
+  margin-bottom: 12px;
+}
+.methodology-toc ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-left: 1px solid var(--border);
+}
+.methodology-toc ol ol { margin-top: 4px; margin-left: 12px; }
+.methodology-toc li { margin: 0; padding: 0; }
+.methodology-toc a {
+  display: block;
+  padding: 6px 12px;
+  color: var(--foreground-secondary);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  margin-left: -1px;
+  line-height: 1.4;
+  transition: color var(--transition-fast), border-color var(--transition-fast);
+}
+.methodology-toc a:hover { color: var(--foreground); }
+.methodology-toc a.active {
+  color: var(--foreground);
+  border-left-color: var(--foreground);
+  font-weight: 600;
+}
+@media (max-width: 900px) {
+  .methodology-layout { grid-template-columns: 1fr; gap: 0; padding: 24px 16px 48px; }
+  .methodology-toc {
+    position: static;
+    max-height: none;
+    margin-bottom: 24px;
+    padding: 16px 20px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+  }
+  .methodology-toc ol { border-left: none; }
+  .methodology-toc a { padding: 4px 0; border-left: none; }
+}
+
+.methodology-content {
+  min-width: 0;
+}
 .methodology-content .back-link {
   display: inline-flex;
   align-items: center;
@@ -838,6 +1142,14 @@ a:hover { color: #60a5fa; }
 }
 .methodology-content .back-link:hover { color: var(--foreground); text-decoration: none; }
 
+.methodology-content h1 {
+  margin: 0 0 32px;
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--foreground);
+  letter-spacing: -0.02em;
+}
+
 .methodology-content h2 {
   margin-top: 48px;
   margin-bottom: 16px;
@@ -846,7 +1158,7 @@ a:hover { color: #60a5fa; }
   color: var(--foreground);
   letter-spacing: -0.01em;
 }
-.methodology-content h2:first-of-type { margin-top: 0; }
+.methodology-content h1 + h2 { margin-top: 0; }
 
 .methodology-content h3 {
   margin-top: 28px;
@@ -966,14 +1278,18 @@ a:hover { color: #60a5fa; }
 
 /* Run-mode badge colored by surface. */
 .run-mode-badge {
-  text-transform: lowercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.02em;
   font-weight: 600;
 }
-.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-subtle); }
-.run-mode-file { background: var(--accent-amber-bg); color: var(--accent-amber); }
+.run-mode-localhost { background: var(--accent-blue-bg); color: #1d4ed8; }
+.run-mode-space { background: var(--accent-purple-bg); color: #5b21b6; }
+.run-mode-pages { background: var(--surface-3); color: var(--foreground-secondary); }
+.run-mode-file { background: var(--accent-amber-bg); color: #92400e; }
+
+[data-theme="dark"] .run-mode-localhost { color: #60a5fa; }
+[data-theme="dark"] .run-mode-space { color: #c4b5fd; }
+[data-theme="dark"] .run-mode-pages { color: var(--foreground-muted); }
+[data-theme="dark"] .run-mode-file { color: #fbbf24; }
 
 /* Pages-mode read-only banner. */
 .run-pages-banner {
@@ -988,7 +1304,8 @@ a:hover { color: #60a5fa; }
   border-radius: var(--radius-md);
   font-size: 13px;
 }
-.run-pages-banner a { font-weight: 600; }
+.run-pages-banner a { font-weight: 600; color: #1d4ed8; text-decoration: underline; }
+[data-theme="dark"] .run-pages-banner a { color: #93c5fd; }
 
 /* HF hub sign-in/submit row (space surface only). */
 .hub-row { margin-bottom: 20px; }
@@ -1025,7 +1342,7 @@ a:hover { color: #60a5fa; }
 }
 .run-device-row-label { color: var(--foreground-muted); }
 .run-device-row-value { color: var(--foreground); font-weight: 600; }
-.run-device-note { font-size: 11px; color: var(--foreground-subtle); margin-top: 2px; }
+.run-device-note { font-size: 11px; color: var(--foreground-muted); margin-top: 2px; }
 
 /* Hide filters + iterations + action buttons — stacks with .filter-bar tokens. */
 .run-filters { align-items: center; }
@@ -1048,7 +1365,13 @@ a:hover { color: #60a5fa; }
   width: 72px;
   min-width: 0;
   padding: 0 10px;
-  background: var(--surface-1);
+  background-color: var(--surface-1);
+  background-image: none;
+  background-repeat: no-repeat;
+}
+/* The dark-theme .filter-select override re-adds the chevron SVG at higher
+   specificity; explicitly nullify for the number input. */
+[data-theme="dark"] .run-iter-input {
   background-image: none;
 }
 .run-actions {
@@ -1058,7 +1381,44 @@ a:hover { color: #60a5fa; }
   flex-wrap: wrap;
   margin-left: auto;
 }
-#queue-status { font-size: 12px; color: var(--foreground-muted); font-family: var(--font-mono); }
+.run-queue-status {
+  font-size: 12px;
+  color: var(--foreground-muted);
+  font-family: var(--font-mono);
+  min-height: 16px;
+}
+
+/* Small button variant used in the batch-select row. */
+.btn-xs {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+/* Sticky action bar with Download / Run — always reachable inside the
+   long model list. */
+.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);
+}
+.run-action-bar-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+@media (max-width: 640px) {
+  .run-action-bar { padding: 12px 16px; }
+  .run-action-bar-inner { gap: 10px; }
+  .run-actions { margin-left: 0; }
+}
 
 /* Family cards + variant rows. */
 .run-models-stack {
@@ -1068,9 +1428,7 @@ a:hover { color: #60a5fa; }
   margin-bottom: 24px;
 }
 .run-family { padding: 0; overflow: hidden; }
-.run-family > summary {
-  list-style: none;
-  cursor: pointer;
+.run-family-summary {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -1078,25 +1436,52 @@ a:hover { color: #60a5fa; }
   background: var(--surface-1);
   border-bottom: 1px solid transparent;
   transition: background var(--transition-fast), border-color var(--transition-fast);
+  cursor: pointer;
+  user-select: none;
 }
-.run-family[open] > summary {
+.run-family-summary:hover { background: var(--surface-2); }
+.run-family.is-open > .run-family-summary {
   border-bottom-color: var(--border);
   background: var(--surface-2);
 }
-.run-family > summary::-webkit-details-marker { display: none; }
+.run-family-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+}
+.run-family-toggle:hover { background: var(--surface-3); }
+.run-family-toggle:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
 .run-family-chevron {
   display: inline-block;
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   border-right: 1.5px solid var(--foreground-muted);
   border-bottom: 1.5px solid var(--foreground-muted);
   transform: rotate(-45deg);
   transition: transform var(--transition-fast);
   flex-shrink: 0;
 }
-.run-family[open] > summary .run-family-chevron { transform: rotate(45deg); }
+.run-family.is-open .run-family-chevron { transform: rotate(45deg); }
 .run-family-select-all { margin: 0; accent-color: var(--foreground); cursor: pointer; }
-.run-family-name { font-size: 14px; font-weight: 700; color: var(--foreground); }
+.run-family-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--foreground);
+  cursor: pointer;
+  user-select: none;
+}
 .run-family-stats {
   color: var(--foreground-muted);
   font-size: 12px;
@@ -1104,10 +1489,11 @@ a:hover { color: #60a5fa; }
 }
 .run-family-warning {
   margin-left: auto;
-  color: var(--accent-amber);
+  color: #92400e;
   font-size: 11px;
   font-weight: 600;
 }
+[data-theme="dark"] .run-family-warning { color: #fbbf24; }
 
 .run-variant-list {
   display: flex;
@@ -1193,6 +1579,15 @@ a:hover { color: #60a5fa; }
   font-size: 12px;
   line-height: 1.6;
   resize: vertical;
+  transition: min-height var(--transition-base);
+}
+/* Collapse when no output — hides the 320px empty textarea. */
+.run-output.is-empty .run-output-textarea {
+  min-height: 60px;
+  height: 60px;
+}
+.run-output.is-empty .run-output-textarea::placeholder {
+  color: var(--foreground-muted);
 }
 .run-output-textarea:focus {
   outline: none;

index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="color-scheme" content="light dark">
-  <script>(function(){var t=localStorage.getItem('theme')||'light';document.documentElement.setAttribute('data-theme',t);})();</script>
+  <script>(function(){var s=localStorage.getItem('theme');if(!s){s=(window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light';}document.documentElement.setAttribute('data-theme',s);})();</script>
   <title>WebGPU Bench</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -19,7 +19,7 @@
         <svg class="header-logo" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
         <span class="header-title">WebGPU Bench</span>
       </a>
-      <nav class="header-nav">
+      <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">
@@ -35,14 +35,35 @@
   </header>
 
   <main>
-    <div id="loading" class="loading-state">
-      <div class="loading-content">
-        <div class="loading-spinner"></div>
-        <p>Loading benchmark data...</p>
+    <div id="loading" aria-busy="true" aria-label="Loading benchmark data">
+      <div class="skeleton skeleton-hero" aria-hidden="true"></div>
+      <div class="skeleton skeleton-filters" aria-hidden="true"></div>
+      <div class="skeleton-stats" aria-hidden="true">
+        <div class="skeleton"></div>
+        <div class="skeleton"></div>
+        <div class="skeleton"></div>
       </div>
+      <div class="skeleton skeleton-table" aria-hidden="true"></div>
     </div>
 
     <div id="dashboard" style="display: none;">
+      <!-- Hero -->
+      <section class="hero">
+        <div class="container hero-inner">
+          <div class="hero-copy">
+            <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>
+          <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>
+      </section>
+
+      <!-- Sticky head: filter bar + section jump links -->
+      <div class="sticky-head">
       <!-- Filter Bar -->
       <div class="filter-bar">
         <div class="filter-bar-inner">
@@ -77,16 +98,16 @@
             </div>
           </div>
           <div class="filter-actions">
-            <button class="filter-reset-btn" id="filter-reset" type="button" style="display: none;" title="Reset all filters">
+            <button class="filter-reset-btn" id="filter-reset" type="button" disabled title="Reset all filters">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
-              Reset
+              <span class="filter-reset-label">Reset</span>
             </button>
           </div>
         </div>
       </div>
 
       <!-- Section Navigation -->
-      <nav class="section-nav" id="section-nav">
+      <nav class="section-nav" id="section-nav" aria-label="Dashboard sections">
         <div class="section-nav-track">
           <button class="section-nav-item active" data-section="overview">Overview</button>
           <button class="section-nav-item" data-section="results-section">Results</button>
@@ -95,6 +116,7 @@
           <button class="section-nav-item" data-section="machines-section">Machines</button>
         </div>
       </nav>
+      </div><!-- /sticky-head -->
 
       <!-- Overview -->
       <section id="overview" class="dash-section">
@@ -139,7 +161,7 @@
             <span class="results-count" id="results-count"></span>
           </div>
           <div class="table-card">
-            <div class="results-wrapper" id="results-table"></div>
+            <div class="results-wrapper" id="results-table" tabindex="0" role="region" aria-label="Benchmark results table"></div>
           </div>
         </div>
       </section>
@@ -160,8 +182,8 @@
           <div class="section-header" style="margin-top: 32px;">
             <h3 class="subsection-title">CPU vs WebGPU</h3>
             <div class="metric-selector">
-              <span class="metric-selector-label">Metric</span>
-              <select id="cpu-gpu-metric" class="filter-select">
+              <label class="metric-selector-label" for="cpu-gpu-metric">Metric</label>
+              <select id="cpu-gpu-metric" class="filter-select" aria-label="CPU vs WebGPU metric">
                 <option value="decode_tok_s">Decode tok/s</option>
                 <option value="prefill_tok_s">Prefill tok/s</option>
               </select>

js/app.js

@@ -9,7 +9,9 @@ async function init() {
   try {
     appData = await loadData();
   } catch (e) {
-    document.getElementById('loading').innerHTML = `
+    const loading = document.getElementById('loading');
+    loading.className = 'loading-state';
+    loading.innerHTML = `
       <div class="loading-content">
         <p class="loading-error">Failed to load data</p>
         <p class="loading-hint">Run: <code>node scripts/build-site.js</code></p>
@@ -28,6 +30,9 @@ async function init() {
   // Populate quant options from actual data
   populateQuantOptions(appData.results);
 
+  // Surface the dataset's last-updated time so users know data freshness.
+  renderHeroMeta(appData);
+
   // Init filter dropdowns
   initFilters(appData.meta, () => render());
 
@@ -89,13 +94,19 @@ function render() {
       : `${filtered.length} of ${total}`;
   }
 
-  // Reset button visibility
+  // Reset button — always visible so users understand filters can be
+  // cleared; disabled when nothing to reset.
   const resetBtn = document.getElementById('filter-reset');
   if (resetBtn) {
-    const active = filters.machine !== 'all' || filters.browser !== 'all' ||
-      filters.model !== 'all' || filters.backend !== 'all' ||
-      filters.status !== 'all' || filters.quants.size > 0;
-    resetBtn.style.display = active ? '' : 'none';
+    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 = '';
+    const label = resetBtn.querySelector('.filter-reset-label') || resetBtn;
+    if (label !== resetBtn) {
+      label.textContent = activeCount ? `Reset (${activeCount})` : 'Reset';
+    }
   }
 
   // Tables
@@ -111,11 +122,74 @@ function render() {
 
   // CPU vs GPU comparison
   const metric = document.getElementById('cpu-gpu-metric')?.value || 'decode_tok_s';
+  renderCpuGpuSection(filtered, metric);
+}
+
+/* Consolidate the 3-part CPU-vs-GPU block (two charts + table). When there
+   is no CPU baseline or no overlapping GPU data, render a single inline
+   empty state and hide the charts+table so the user doesn't see the same
+   message repeated three times. */
+function renderCpuGpuSection(filtered, metric) {
+  const chartsGrid = document.querySelector('#performance-section .charts-grid:nth-of-type(2)');
+  const table = document.getElementById('cpu-gpu-table');
+  const passed = filtered.filter(r => r.status === 'done');
+  const cpuResults = passed.filter(r => r.nGpuLayers === 0);
+  const gpuResults = passed.filter(r => r.nGpuLayers !== 0);
+
+  if (!chartsGrid || !table) {
+    renderCpuGpuChart(filtered, metric);
+    renderSpeedupChart(filtered, metric);
+    renderCpuGpuTable(filtered);
+    return;
+  }
+
+  if (cpuResults.length === 0 || gpuResults.length === 0) {
+    chartsGrid.hidden = true;
+    const reason = cpuResults.length === 0
+      ? 'No CPU baseline in the current filter. Select "All Backends" or enable CPU baselines when benchmarking with <code>--consistency</code>.'
+      : 'No WebGPU runs in the current filter. Adjust the Backend filter to include WebGPU.';
+    table.innerHTML = `<div class="empty-state"><p>${reason}</p></div>`;
+    return;
+  }
+
+  chartsGrid.hidden = false;
   renderCpuGpuChart(filtered, metric);
   renderSpeedupChart(filtered, metric);
   renderCpuGpuTable(filtered);
 }
 
+function renderHeroMeta(data) {
+  const el = document.getElementById('hero-meta');
+  if (!el) return;
+  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 (parts.length === 0) return;
+  el.textContent = parts.join(' · ');
+  el.hidden = false;
+  if (generated) el.title = new Date(generated).toLocaleString();
+}
+
+function formatRelativeTime(date) {
+  const now = Date.now();
+  const diff = Math.max(0, now - date.getTime());
+  const min = 60_000, hr = 60 * min, day = 24 * hr;
+  if (diff < min) return 'just now';
+  if (diff < hr) return `${Math.floor(diff / min)} min ago`;
+  if (diff < day) return `${Math.floor(diff / hr)} h ago`;
+  const days = Math.floor(diff / day);
+  if (days < 30) return `${days} day${days === 1 ? '' : 's'} ago`;
+  return date.toISOString().slice(0, 10);
+}
+
 function initSectionNav() {
   const nav = document.getElementById('section-nav');
   if (!nav) return;
@@ -123,6 +197,10 @@ function initSectionNav() {
   const buttons = nav.querySelectorAll('.section-nav-item');
   const sections = [];
 
+  // Prefer the sticky wrapper height so the jumped-to section isn't
+  // obscured by the sticky head.
+  const stickyHead = document.querySelector('.sticky-head') || nav;
+
   buttons.forEach(btn => {
     const sectionId = btn.dataset.section;
     const section = document.getElementById(sectionId);
@@ -131,29 +209,38 @@ function initSectionNav() {
     btn.addEventListener('click', (e) => {
       e.preventDefault();
       if (section) {
-        const navHeight = nav.offsetHeight;
-        const top = section.getBoundingClientRect().top + window.scrollY - navHeight;
+        const offset = stickyHead.offsetHeight + 8;
+        const top = section.getBoundingClientRect().top + window.scrollY - offset;
         window.scrollTo({ top, behavior: 'smooth' });
       }
     });
   });
 
-  // Scroll spy with IntersectionObserver
+  // 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
+  // the bottom of the sticky head. Cheaper and predictable.
   if (sections.length === 0) return;
 
-  const observer = new IntersectionObserver(
-    (entries) => {
-      for (const entry of entries) {
-        if (entry.isIntersecting) {
-          const id = entry.target.id;
-          buttons.forEach(b => b.classList.toggle('active', b.dataset.section === id));
-        }
-      }
-    },
-    { rootMargin: '-20% 0px -60% 0px' }
-  );
-
-  sections.forEach(({ section }) => observer.observe(section));
+  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;
+      else break;
+    }
+    buttons.forEach(b => b.classList.toggle('active', b.dataset.section === activeId));
+  };
+  const onScroll = () => {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => { updateActive(); ticking = false; });
+  };
+  window.addEventListener('scroll', onScroll, { passive: true });
+  window.addEventListener('resize', onScroll);
+  updateActive();
 }
 
 init();

js/run/controller.js

@@ -120,6 +120,15 @@ function flattenVariants(models) {
   return out;
 }
 
+function getQuickVariantSet() {
+  const list = state.models?.quickVariants;
+  return new Set(Array.isArray(list) && list.length ? list : ['Q2_K', 'Q4_K_M', 'Q8_0']);
+}
+
+function isQuickVariant(v) {
+  return getQuickVariantSet().has(v.quant);
+}
+
 function computeWarnings(modelName, quant) {
   const w = [];
   if (/^granite-4/i.test(modelName)) w.push('needs SSM_SCAN');
@@ -153,7 +162,13 @@ function renderHeader() {
 
   const badge = $('run-mode-badge');
   if (badge) {
-    badge.textContent = state.surface;
+    const labels = {
+      localhost: 'Local dev',
+      space: 'Hosted · Hugging Face',
+      pages: 'Read-only preview',
+      file: 'Local file',
+    };
+    badge.textContent = labels[state.surface] || state.surface;
     badge.className = `badge run-mode-badge run-mode-${state.surface}`;
   }
 
@@ -241,31 +256,55 @@ function renderModels() {
   const groups = groupByFamily(state.variants);
   for (const [family, variants] of groups) {
     const fitsCount = variants.filter(variantFitsDevice).length;
-    const allFit = fitsCount === variants.length;
+    const quickFitCount = variants.filter(v => isQuickVariant(v) && variantFitsDevice(v)).length;
 
-    const familyEl = document.createElement('details');
+    // Card wrapper (not <details>, to avoid nested-interactive with the
+    // family-level checkbox). A dedicated toggle button expands/collapses
+    // the variant list.
+    const familyEl = document.createElement('section');
     familyEl.className = 'run-family card';
     familyEl.dataset.family = family;
-    familyEl.open = true;
-
-    const summary = document.createElement('summary');
-    summary.className = 'run-family-summary';
-    summary.innerHTML = `
-      <span class="run-family-chevron" aria-hidden="true"></span>
-      <input type="checkbox" class="run-family-select-all" data-family="${escapeAttr(family)}"${allFit ? ' checked' : ''}>
-      <span class="run-family-name">${escapeText(family)}</span>
-      <span class="run-family-stats">${variants.length} variants · ${fitsCount} fit</span>
-    `;
+
+    const header = document.createElement('div');
+    header.className = 'run-family-summary';
+
+    const toggleBtn = document.createElement('button');
+    toggleBtn.type = 'button';
+    toggleBtn.className = 'run-family-toggle';
+    toggleBtn.setAttribute('aria-expanded', 'false');
+    toggleBtn.setAttribute('aria-label', `Expand ${family}`);
+    toggleBtn.innerHTML = '<span class="run-family-chevron" aria-hidden="true"></span>';
+
+    const selectAllId = `run-family-all-${family.replace(/[^a-z0-9]/gi, '-')}`;
+    const selectAll = document.createElement('input');
+    selectAll.type = 'checkbox';
+    selectAll.className = 'run-family-select-all';
+    selectAll.dataset.family = family;
+    selectAll.id = selectAllId;
+    selectAll.setAttribute('aria-label', `Select all variants in ${family}`);
+
+    const nameLabel = document.createElement('label');
+    nameLabel.className = 'run-family-name';
+    nameLabel.htmlFor = selectAllId;
+    nameLabel.textContent = family;
+
+    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);
+
     if (/^granite-4/i.test(family)) {
       const w = document.createElement('span');
       w.className = 'run-family-warning';
       w.textContent = '⚠ needs SSM_SCAN in llama.cpp';
-      summary.appendChild(w);
+      header.appendChild(w);
     }
-    familyEl.appendChild(summary);
+    familyEl.appendChild(header);
 
     const list = document.createElement('div');
     list.className = 'run-variant-list';
+    list.hidden = true;
 
     for (const v of variants) {
       const row = document.createElement('label');
@@ -277,7 +316,7 @@ function renderModels() {
       cb.type = 'checkbox';
       cb.className = 'run-variant-select';
       cb.dataset.key = cacheKey(v);
-      cb.checked = variantFitsDevice(v);
+      cb.checked = isQuickVariant(v) && variantFitsDevice(v);
 
       const quant = document.createElement('span');
       quant.className = 'run-variant-quant';
@@ -300,9 +339,27 @@ function renderModels() {
     }
     familyEl.appendChild(list);
     panel.appendChild(familyEl);
+
+    updateFamilySelectAllState(family);
   }
 }
 
+function updateFamilySelectAllState(family) {
+  const panel = $('run-models');
+  if (!panel) return;
+  const familyEl = panel.querySelector(
+    `.run-family[data-family="${cssEscape(family)}"]`,
+  );
+  if (!familyEl) return;
+  const rows = familyEl.querySelectorAll('.run-variant-select');
+  const all = rows.length;
+  const checked = [...rows].filter(cb => cb.checked).length;
+  const selectAll = familyEl.querySelector('.run-family-select-all');
+  if (!selectAll) return;
+  selectAll.checked = checked === all && all > 0;
+  selectAll.indeterminate = checked > 0 && checked < all;
+}
+
 function updateBadgesForVariant(badgesEl, v) {
   badgesEl.innerHTML = '';
   if (isCached(v)) badgesEl.appendChild(makeBadge('cached', 'badge--cached'));
@@ -346,19 +403,39 @@ function wireSelectionHandlers() {
     if (t.classList?.contains('run-family-select-all')) {
       const family = t.dataset.family;
       const rows = panel.querySelectorAll(
-        `details.run-family[data-family="${cssEscape(family)}"] .run-variant-select`,
+        `.run-family[data-family="${cssEscape(family)}"] .run-variant-row`,
       );
-      rows.forEach(cb => { cb.checked = t.checked; });
+      // Only affect fit variants — checking non-fit can cause OOM on the
+      // user's device, which is actively dangerous.
+      rows.forEach(row => {
+        if (row.classList.contains('is-non-fit')) return;
+        const cb = row.querySelector('.run-variant-select');
+        if (cb) cb.checked = t.checked;
+      });
+      updateFamilySelectAllState(family);
       updateButtons();
     } else if (t.classList?.contains('run-variant-select')) {
+      const familyEl = t.closest('.run-family');
+      if (familyEl) updateFamilySelectAllState(familyEl.dataset.family);
       updateButtons();
     }
   });
-  // Prevent the select-all toggling expand/collapse.
   panel.addEventListener('click', (e) => {
-    if (e.target.classList?.contains('run-family-select-all')) {
-      e.stopPropagation();
+    // Clicks on the select-all checkbox or name label must not toggle
+    // expansion — they have their own semantics.
+    if (e.target.closest('.run-family-select-all, .run-family-name, .run-variant-list, .run-variant-row')) {
+      return;
     }
+    const header = e.target.closest?.('.run-family-summary');
+    if (!header) return;
+    const familyEl = header.closest('.run-family');
+    const list = familyEl?.querySelector('.run-variant-list');
+    const toggle = familyEl?.querySelector('.run-family-toggle');
+    if (!list || !toggle) return;
+    const expanded = !list.hidden;
+    list.hidden = expanded;
+    toggle.setAttribute('aria-expanded', String(!expanded));
+    familyEl.classList.toggle('is-open', !expanded);
   });
 }
 
@@ -369,6 +446,28 @@ function wireFilters() {
   });
 }
 
+function wireBatchSelect() {
+  const apply = (pred) => {
+    document.querySelectorAll('.run-variant-select').forEach(cb => {
+      const v = state.variants.find(x => cacheKey(x) === cb.dataset.key);
+      cb.checked = pred(v);
+    });
+    document.querySelectorAll('.run-family').forEach(el => {
+      if (el.dataset.family) updateFamilySelectAllState(el.dataset.family);
+    });
+    updateButtons();
+  };
+  $('btn-select-quick')?.addEventListener('click', () => {
+    apply(v => !!v && isQuickVariant(v) && variantFitsDevice(v));
+  });
+  $('btn-select-fit')?.addEventListener('click', () => {
+    apply(v => !!v && variantFitsDevice(v));
+  });
+  $('btn-select-none')?.addEventListener('click', () => {
+    apply(() => false);
+  });
+}
+
 function wireIterationsInput() {
   const el = $('iterations-input');
   if (!el) return;
@@ -390,6 +489,7 @@ function applyFilters() {
   const hideUd = $('hide-ud')?.checked;
   const hideIq = $('hide-iq')?.checked;
   const hideHifp = $('hide-hifp')?.checked;
+  const hiddenByFamily = new Map();
   document.querySelectorAll('.run-variant-row').forEach(row => {
     const v = state.variants.find(x => cacheKey(x) === row.dataset.key);
     if (!v) return;
@@ -398,7 +498,27 @@ function applyFilters() {
     const isHifp = /^(BF16|F16|bf16|f16)$/.test(v.quant);
     const hide = (hideUd && isUd) || (hideIq && isIq) || (hideHifp && isHifp);
     row.style.display = hide ? 'none' : '';
+    if (hide) hiddenByFamily.set(v.modelName, (hiddenByFamily.get(v.modelName) || 0) + 1);
   });
+  // Refresh the per-family stats line so users see hidden filter impact.
+  document.querySelectorAll('.run-family').forEach(familyEl => {
+    const family = familyEl.dataset.family;
+    const all = [...familyEl.querySelectorAll('.run-variant-row')];
+    const visible = all.filter(r => r.style.display !== 'none').length;
+    const fit = all.filter(r => !r.classList.contains('is-non-fit') && r.style.display !== 'none').length;
+    const quick = all.filter(r => {
+      if (r.style.display === 'none' || r.classList.contains('is-non-fit')) return false;
+      const v = state.variants.find(x => cacheKey(x) === r.dataset.key);
+      return v && isQuickVariant(v);
+    }).length;
+    const stats = familyEl.querySelector('.run-family-stats');
+    if (!stats) return;
+    const hiddenCount = hiddenByFamily.get(family) || 0;
+    const base = `${visible} variants · ${fit} fit · ${quick} quick`;
+    stats.textContent = hiddenCount > 0 ? `${base} · ${hiddenCount} hidden` : base;
+  });
+  // A selected-but-now-hidden variant is a footgun; re-count the queue.
+  updateButtons();
 }
 
 function getCheckedVariants() {
@@ -415,9 +535,18 @@ function updateButtons() {
   const ab = $('btn-abort'); if (ab) { ab.disabled = !state.running; ab.hidden = !state.running; }
   const status = $('queue-status');
   if (status) {
-    status.textContent = checked.length
-      ? `${checked.length} selected · ${cachedChecked.length} cached`
-      : '';
+    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(' · ');
+    }
   }
 }
 
@@ -426,6 +555,13 @@ function updateButtons() {
 function ensureProgressTable() {
   const wrap = $('run-progress-wrapper');
   if (!wrap) return null;
+  // Reveal the progress card + its header — they are hidden by default on
+  // mount so the user doesn't see an empty "Progress" scaffold, but we must
+  // un-hide them as soon as the first row (download or run) appears.
+  const card = wrap.closest('.table-card');
+  if (card) card.hidden = false;
+  const header = card?.previousElementSibling;
+  if (header?.classList?.contains('section-header')) header.hidden = false;
   let table = wrap.querySelector('table');
   if (!table) {
     table = document.createElement('table');
@@ -832,6 +968,26 @@ function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
 function renderOutput() {
   const ta = $('output-textarea');
   if (ta) ta.value = generateMarkdown(state.results);
+  // Reflect emptiness: collapse the textarea, disable copy/download.
+  const hasContent = !!ta?.value;
+  const outputCard = document.querySelector('.run-output');
+  if (outputCard) outputCard.classList.toggle('is-empty', !hasContent);
+  const copyBtn = $('btn-copy');
+  const dlJson = $('btn-download-json');
+  if (copyBtn) copyBtn.disabled = !hasContent;
+  if (dlJson) dlJson.disabled = !hasContent;
+}
+
+/* Hide the Progress scaffolding at mount so we don't show an empty
+   placeholder. `ensureProgressTable` un-hides it the moment a download or
+   run row appears. */
+function hideProgressUntilFirstRow() {
+  const wrap = $('run-progress-wrapper');
+  if (!wrap) return;
+  const card = wrap.closest('.table-card');
+  if (card) card.hidden = true;
+  const header = card?.previousElementSibling;
+  if (header?.classList?.contains('section-header')) header.hidden = true;
 }
 
 function generateMarkdown(results) {
@@ -1026,6 +1182,7 @@ export async function mountRunSection() {
   renderModels();
   wireSelectionHandlers();
   wireFilters();
+  wireBatchSelect();
   wireIterationsInput();
   wireRunHandlers();
   wireAbortHandler();
@@ -1033,6 +1190,8 @@ export async function mountRunSection() {
   wireHubHandlers();
   wireOutputHandlers();
   updateButtons();
+  renderOutput();
+  hideProgressUntilFirstRow();
 }
 
 export function teardownRunSection() {

js/tables.js

@@ -45,48 +45,60 @@ export function renderResultsTable(results) {
   if (!container) return;
 
   if (results.length === 0) {
-    container.innerHTML = '<div class="empty-state"><p>No results match the current filters.</p></div>';
+    container.innerHTML = `
+      <div class="empty-state">
+        <p>No results match the current filters.</p>
+        <p class="empty-state-sub">Try resetting filters above, or <a href="run.html">run the benchmark</a> on your own machine to contribute data.</p>
+      </div>`;
     return;
   }
 
   const sorted = sortState.key ? sortResults(results, sortState.key, sortState.dir) : results;
 
+  /* priority: 1 = always show; 2 = hide below 640px; 3 = hide below 900px */
   const cols = [
-    { key: 'machineSlug', label: 'Machine' },
-    { key: 'model', label: 'Model' },
-    { key: 'variant', label: 'Quant' },
-    { key: 'sizeMB', label: 'Size (MB)' },
-    { key: 'browser', label: 'Browser' },
-    { key: 'nGpuLayers', label: 'Backend' },
-    { key: 'status', label: 'Status' },
-    { key: 'buildType', label: 'Build' },
-    { key: 'webgpuAvailable', label: 'WebGPU' },
-    { key: 'decode_tok_s', label: 'Decode tok/s' },
-    { key: 'prefill_tok_s', label: 'Prefill tok/s' },
-    { key: 'n_eval', label: 'n_eval' },
-    { key: 't_eval_ms', label: 't_eval (ms)' },
-    { key: 'n_p_eval', label: 'n_p_eval' },
-    { key: 't_p_eval_ms', label: 't_p_eval (ms)' },
-    { key: 'wallTimeMs', label: 'Wall (s)' },
-    { key: 'consistency_rate', label: 'CPU Match' },
-    { key: 'llamaCppCommit', label: 'llama.cpp' },
-    { key: 'error', label: 'Error' },
+    { key: 'machineSlug', label: 'Machine', priority: 1 },
+    { key: 'model', label: 'Model', priority: 1 },
+    { key: 'variant', label: 'Quant', priority: 1 },
+    { key: 'sizeMB', label: 'Size (MB)', priority: 3 },
+    { key: 'browser', label: 'Browser', priority: 2 },
+    { key: 'nGpuLayers', label: 'Backend', priority: 2 },
+    { key: 'status', label: 'Status', priority: 1 },
+    { key: 'buildType', label: 'Build', priority: 3 },
+    { key: 'webgpuAvailable', label: 'WebGPU', priority: 3 },
+    { key: 'decode_tok_s', label: 'Decode tok/s', priority: 1 },
+    { key: 'prefill_tok_s', label: 'Prefill tok/s', priority: 3 },
+    { key: 'n_eval', label: 'n_eval', priority: 3 },
+    { key: 't_eval_ms', label: 't_eval (ms)', priority: 3 },
+    { key: 'n_p_eval', label: 'n_p_eval', priority: 3 },
+    { key: 't_p_eval_ms', label: 't_p_eval (ms)', priority: 3 },
+    { key: 'wallTimeMs', label: 'Wall (s)', priority: 3 },
+    { key: 'consistency_rate', label: 'CPU Match', priority: 2 },
+    { key: 'llamaCppCommit', label: 'llama.cpp', priority: 3 },
+    { key: 'error', label: 'Error', priority: 2 },
   ];
 
   let html = '<table class="results-table"><thead><tr>';
-  for (const col of cols) {
+  cols.forEach((col, i) => {
     const isActive = sortState.key === col.key;
-    const arrow = isActive ? (sortState.dir === 'asc' ? ' \u2191' : ' \u2193') : '';
-    const cls = isActive ? ' class="sorted"' : '';
-    html += `<th data-key="${col.key}"${cls}>${col.label}${arrow}</th>`;
-  }
+    const ariaSort = isActive ? (sortState.dir === 'asc' ? 'ascending' : 'descending') : 'none';
+    const arrowChar = isActive ? (sortState.dir === 'asc' ? '\u2191' : '\u2193') : '\u2195';
+    const pin = i === 0 ? ' col-pin col-pin-1' : (i === 1 ? ' col-pin col-pin-2' : '');
+    const prio = col.priority >= 3 ? ' col-p3' : (col.priority === 2 ? ' col-p2' : '');
+    const cls = `sortable${isActive ? ' sorted' : ''}${pin}${prio}`;
+    html += `<th data-key="${col.key}" class="${cls}" aria-sort="${ariaSort}" scope="col" tabindex="0"><span class="th-label">${col.label}</span><span class="th-sort-indicator" aria-hidden="true">${arrowChar}</span></th>`;
+  });
   html += '</tr></thead><tbody>';
 
   for (const r of sorted) {
     const rowClass = r.status === 'done' ? 'row-pass' : 'row-fail';
     html += `<tr class="${rowClass}">`;
-    for (const col of cols) {
-      html += '<td>';
+    cols.forEach((col, i) => {
+      const pin = i === 0 ? 'col-pin col-pin-1' : (i === 1 ? 'col-pin col-pin-2' : '');
+      const prio = col.priority >= 3 ? 'col-p3' : (col.priority === 2 ? 'col-p2' : '');
+      const parts = [pin, prio].filter(Boolean);
+      const cls = parts.length ? ` class="${parts.join(' ')}"` : '';
+      html += `<td${cls}>`;
       switch (col.key) {
         case 'status':
           html += r.status === 'done'
@@ -153,16 +165,22 @@ export function renderResultsTable(results) {
           html += escapeHtml(String(r[col.key] ?? '\u2014'));
       }
       html += '</td>';
-    }
+    });
     html += '</tr>';
   }
 
   html += '</tbody></table>';
   container.innerHTML = html;
 
-  // Wire sort click handlers
+  // Wire sort click + keyboard handlers
   container.querySelectorAll('th[data-key]').forEach(th => {
     th.addEventListener('click', () => handleSort(th.dataset.key));
+    th.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleSort(th.dataset.key);
+      }
+    });
   });
 }
 
@@ -172,7 +190,11 @@ export function renderErrorTable(results) {
 
   const errors = results.filter(r => r.status !== 'done' && r.error);
   if (errors.length === 0) {
-    container.innerHTML = '<div class="empty-state"><p>No errors found.</p></div>';
+    container.innerHTML = `
+      <div class="empty-state">
+        <p>No errors in the current filter.</p>
+        <p class="empty-state-sub">Either every benchmark passed, or no results are in scope — try widening the filter.</p>
+      </div>`;
     return;
   }
 
@@ -192,8 +214,18 @@ export function renderMachineInfo(machines) {
   const container = document.getElementById('machine-info');
   if (!container) return;
 
+  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>
+        <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>
+    </a>`;
+
   if (machines.length === 0) {
-    container.innerHTML = '<div class="empty-state"><p>No machine data.</p></div>';
+    container.innerHTML = `<div class="machine-grid">${addYourMachineCard}</div>`;
     return;
   }
 
@@ -217,6 +249,7 @@ export function renderMachineInfo(machines) {
         </div>
       </div>`;
   }
+  html += addYourMachineCard;
   html += '</div>';
   container.innerHTML = html;
 }

methodology.html

@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="color-scheme" content="dark">
+  <meta name="color-scheme" content="light dark">
+  <script>(function(){var s=localStorage.getItem('theme');if(!s){s=(window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light';}document.documentElement.setAttribute('data-theme',s);})();</script>
   <title>Methodology — WebGPU Bench</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -17,20 +18,48 @@
         <svg class="header-logo" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
         <span class="header-title">WebGPU Bench</span>
       </a>
-      <nav class="header-nav">
+      <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">
+          <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>
+        <a href="https://github.com/abhijitramesh/webgpu-bench" target="_blank" rel="noopener" class="header-link">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.5 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6.02 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.82.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/></svg>
+          GitHub
+        </a>
       </nav>
     </div>
   </header>
 
-  <div class="methodology-content">
+  <main class="methodology-layout">
+    <nav class="methodology-toc" aria-label="Table of contents">
+      <p class="methodology-toc-title">On this page</p>
+      <ol>
+        <li><a href="#how-benchmarks-work">How Benchmarks Work</a></li>
+        <li><a href="#dashboard-columns">Dashboard Columns</a></li>
+        <li><a href="#error-categories">Error Categories</a></li>
+        <li>
+          <a href="#consistency-measurement">Consistency Measurement</a>
+          <ol>
+            <li><a href="#how-it-works">How it works</a></li>
+            <li><a href="#why-forced-decoding">Why forced decoding</a></li>
+            <li><a href="#interpreting-cpu-match">Interpreting CPU Match</a></li>
+          </ol>
+        </li>
+      </ol>
+    </nav>
+
+    <div class="methodology-content">
     <a href="index.html" class="back-link">
       <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="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
       Back to Dashboard
     </a>
 
-    <h2>How Benchmarks Work</h2>
+    <h1>Methodology</h1>
+
+    <h2 id="how-benchmarks-work">How Benchmarks Work</h2>
     <ol>
       <li><code>build.sh</code> compiles llama.cpp to WebAssembly with WebGPU support via Emscripten + emdawnwebgpu, producing two WASM variants: JSPI (Chrome) and Asyncify (Firefox, Safari).</li>
       <li><code>runner.js</code> launches Playwright browsers and navigates to <code>harness.html</code>.</li>
@@ -41,7 +70,7 @@
       <li>A fresh browser instance is launched for each variant to prevent WASM memory accumulation (OOM fix).</li>
     </ol>
 
-    <h2>Dashboard Columns</h2>
+    <h2 id="dashboard-columns">Dashboard Columns</h2>
     <table>
       <thead>
         <tr><th>Column</th><th>Description</th></tr>
@@ -67,7 +96,7 @@
       </tbody>
     </table>
 
-    <h2>Error Categories</h2>
+    <h2 id="error-categories">Error Categories</h2>
     <table>
       <thead>
         <tr><th>Category</th><th>Pattern</th><th>Typical Cause</th></tr>
@@ -81,20 +110,20 @@
       </tbody>
     </table>
 
-    <h2>Consistency Measurement</h2>
+    <h2 id="consistency-measurement">Consistency Measurement</h2>
     <p>The <code>--consistency</code> flag measures how faithfully the WebGPU backend reproduces the CPU computation for each quantization type.</p>
 
-    <h3>How it works</h3>
+    <h3 id="how-it-works">How it works</h3>
     <p>For each variant, two runs are performed:</p>
     <ol>
       <li><strong>CPU baseline</strong> (<code>n_gpu_layers=0</code>): greedy-decodes 128 tokens and records the token ID sequence. Cached to <code>results/cpu_baselines.json</code>. When testing multiple browsers, the baseline is collected once on the first browser and shared across all browsers (CPU output is identical regardless of JSPI vs Asyncify). When testing a single browser, the baseline runs in that same browser.</li>
       <li><strong>WebGPU run</strong> (<code>n_gpu_layers=999</code>): performs a forced-decoding pass — feeds the CPU's token sequence one token at a time and checks whether the WebGPU backend independently predicts the same top-1 token at each position.</li>
     </ol>
 
-    <h3>Why forced decoding</h3>
+    <h3 id="why-forced-decoding">Why forced decoding</h3>
     <p>Naively comparing generated text suffers from cascading divergence: a single token difference changes the KV cache context for all subsequent tokens. Forced decoding evaluates each position independently, giving a clean per-token accuracy signal.</p>
 
-    <h3>Interpreting CPU Match</h3>
+    <h3 id="interpreting-cpu-match">Interpreting CPU Match</h3>
     <table>
       <thead>
         <tr><th>CPU Match</th><th>Interpretation</th></tr>
@@ -107,6 +136,40 @@
         <tr><td><code>—</code></td><td>No consistency data — benchmarks were run without <code>--consistency</code></td></tr>
       </tbody>
     </table>
-  </div>
+    </div>
+  </main>
+
+  <script>
+    document.getElementById('theme-toggle')?.addEventListener('click', () => {
+      const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+    });
+
+    // ToC scroll-spy: mark active link based on the topmost visible heading.
+    (function() {
+      const links = [...document.querySelectorAll('.methodology-toc a[href^="#"]')];
+      const targets = links
+        .map(a => ({ a, el: document.getElementById(a.getAttribute('href').slice(1)) }))
+        .filter(x => x.el);
+      if (targets.length === 0) return;
+      let ticking = false;
+      function update() {
+        const anchor = 120;
+        let active = targets[0].a;
+        for (const t of targets) {
+          if (t.el.getBoundingClientRect().top - anchor <= 0) active = t.a;
+          else break;
+        }
+        links.forEach(l => l.classList.toggle('active', l === active));
+      }
+      window.addEventListener('scroll', () => {
+        if (ticking) return;
+        ticking = true;
+        requestAnimationFrame(() => { update(); ticking = false; });
+      }, { passive: true });
+      update();
+    })();
+  </script>
 </body>
 </html>

run.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="color-scheme" content="light dark">
-  <script>(function(){var t=localStorage.getItem('theme')||'light';document.documentElement.setAttribute('data-theme',t);})();</script>
+  <script>(function(){var s=localStorage.getItem('theme');if(!s){s=(window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light';}document.documentElement.setAttribute('data-theme',s);})();</script>
   <title>Run — WebGPU Bench</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -27,7 +27,7 @@
         <svg class="header-logo" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
         <span class="header-title">WebGPU Bench</span>
       </a>
-      <nav class="header-nav">
+      <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">
@@ -45,8 +45,8 @@
   <main>
     <section id="run-section" class="dash-section">
       <div class="container">
-        <div class="section-header">
-          <h2>Run a benchmark</h2>
+        <div class="run-hero">
+          <h1 class="run-hero-title">Run a benchmark</h1>
           <span id="run-mode-badge" class="badge run-mode-badge">…</span>
         </div>
 
@@ -96,7 +96,7 @@
         </div>
 
         <!-- Hide filters, iterations, actions -->
-        <div class="filter-bar">
+        <div class="filter-bar run-controls">
           <div class="filter-bar-inner run-filters">
             <div class="filter-group">
               <span class="filter-label">Hide</span>
@@ -106,12 +106,26 @@
                 <label class="run-hide-label"><input type="checkbox" id="hide-hifp"> BF16/F16</label>
               </div>
             </div>
+            <div class="filter-group">
+              <span class="filter-label">Select</span>
+              <div class="run-filters-checks">
+                <button class="btn btn-secondary btn-xs" id="btn-select-quick" type="button">Quick set</button>
+                <button class="btn btn-secondary btn-xs" id="btn-select-fit" type="button">All fit</button>
+                <button class="btn btn-secondary btn-xs" id="btn-select-none" type="button">None</button>
+              </div>
+            </div>
             <div class="filter-group">
               <label class="filter-label" for="iterations-input">Iterations</label>
               <input type="number" id="iterations-input" class="filter-select run-iter-input" value="5" min="1" max="50" step="1">
             </div>
+          </div>
+        </div>
+
+        <!-- Sticky action bar: always-reachable Download/Run -->
+        <div class="run-action-bar">
+          <div class="run-action-bar-inner">
+            <span id="queue-status" class="run-queue-status"></span>
             <div class="run-actions">
-              <span id="queue-status"></span>
               <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>
               <button class="btn btn-danger" id="btn-abort" type="button" hidden>Abort</button>
@@ -127,7 +141,7 @@
 
         <!-- Progress -->
         <div class="section-header">
-          <h3 class="subsection-title">Progress</h3>
+          <h2 class="subsection-title">Progress</h2>
         </div>
         <div class="table-card">
           <div id="run-progress-wrapper" class="results-wrapper"></div>
@@ -135,14 +149,14 @@
 
         <!-- Output -->
         <div class="section-header" style="margin-top: 32px;">
-          <h3 class="subsection-title">Output</h3>
+          <h2 class="subsection-title">Output</h2>
         </div>
         <div class="card run-output">
           <label id="save-local-row" class="run-output-toggle" hidden>
             <input type="checkbox" id="save-local" checked>
             Save to <code>results/results.json</code> on this server
           </label>
-          <textarea id="output-textarea" class="run-output-textarea" readonly spellcheck="false"></textarea>
+          <textarea id="output-textarea" class="run-output-textarea" readonly spellcheck="false" aria-label="Benchmark results output (JSON)" placeholder="Run benchmarks to generate output here…"></textarea>
           <div class="run-output-buttons">
             <button class="btn btn-secondary" id="btn-copy" type="button">Copy</button>
             <button class="btn btn-secondary" id="btn-download-json" type="button">Download JSON</button>