diff --git a/README.md b/README.md
index e724c34cb..6f272be6b 100644
--- a/README.md
+++ b/README.md
@@ -479,7 +479,7 @@ the `--check` mode.
 
 ## Website
 
-The public site at <https://dataflowbench.brokk.ai> is an Astro
+The public site at <https://dataflowbench.slopcop.com> is an Astro
 Starlight package in `docs/`; every number it shows is rendered from the
 generated `results/results.json`, never hand-authored. Develop locally with:
 
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 4edf905c2..a184e4dac 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -4,6 +4,7 @@ import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import { snapshots } from './src/data/snapshots';
 import { remarkHeadingIds } from './src/plugins/remark-heading-ids.mjs';
+import { rehypeTableScroll } from './src/plugins/rehype-table-scroll.mjs';
 
 // ---------------------------------------------------------------------------
 // Snapshot navigation.
@@ -58,12 +59,21 @@ const previousLabel = previousSnapshot
   : '';
 
 // Production deployment target for GitHub Pages.
+const site = 'https://dataflowbench.slopcop.com';
+const base = '/';
+/** The published root, for the absolute URLs social cards need. */
+const siteRoot = new URL(base.replace(/\/?$/, '/'), site);
+const socialCard = new URL('og-image.png', siteRoot).href;
+
 export default defineConfig({
-  site: 'https://dataflowbench.brokk.ai',
+  site,
+  base,
   markdown: {
     // `## Heading {#legacy-id}` — explicit anchors for headings whose ids are
     // citable and must not follow the auto-slugger. See the plugin's comment.
     remarkPlugins: [remarkHeadingIds],
+    // Each table in a scroll box, so a wide one pans instead of overflowing.
+    rehypePlugins: [rehypeTableScroll],
   },
   redirects: {
     // Explicit current-snapshot pointer alongside versioned snapshot URLs.
@@ -75,7 +85,44 @@ export default defineConfig({
       favicon: '/favicon.svg',
       description:
         'Analyzer-neutral benchmark for data-flow analysis, published exclusively from immutable freeze evidence.',
-      customCss: ['./src/styles/custom.css'],
+      // The shared foundation first (identical in the UsageBench repository),
+      // then this site's accent, palette and layout on top of it.
+      customCss: ['./src/styles/foundation.css', './src/styles/custom.css'],
+      logo: { src: './src/assets/mark.svg', alt: '' },
+      head: [
+        { tag: 'meta', attrs: { property: 'og:image', content: socialCard } },
+        { tag: 'meta', attrs: { property: 'og:image:width', content: '1200' } },
+        { tag: 'meta', attrs: { property: 'og:image:height', content: '630' } },
+        {
+          tag: 'meta',
+          attrs: {
+            property: 'og:image:alt',
+            content: 'DataFlowBench: how well do static analyzers follow data flow?',
+          },
+        },
+        { tag: 'meta', attrs: { name: 'twitter:image', content: socialCard } },
+        {
+          tag: 'script',
+          attrs: { type: 'application/ld+json' },
+          content: JSON.stringify({
+            '@context': 'https://schema.org',
+            '@type': 'WebSite',
+            name: 'DataFlowBench',
+            url: siteRoot.href,
+            publisher: { '@type': 'Organization', name: 'SlopCop', url: 'https://slopcop.com' },
+          }),
+        },
+      ],
+      // Archived snapshot pages get their release named in their search
+      // description, so no two pages share one. See src/routeData.ts.
+      routeMiddleware: './src/routeData.ts',
+      expressiveCode: {
+        styleOverrides: {
+          borderRadius: '0px',
+          codeFontFamily: "'JetBrains Mono', ui-monospace, monospace",
+          uiFontFamily: "'Apfel Grotezk', ui-sans-serif, system-ui, sans-serif",
+        },
+      },
       components: {
         // Starlight's own footer, with the floating "back to top" control
         // appended. The footer is the one slot that renders exactly once on
diff --git a/docs/public/CNAME b/docs/public/CNAME
index af10f63da..2b2629ea3 100644
--- a/docs/public/CNAME
+++ b/docs/public/CNAME
@@ -1 +1 @@
-dataflowbench.brokk.ai
+dataflowbench.slopcop.com
diff --git a/docs/public/favicon.svg b/docs/public/favicon.svg
index 182f96962..f45ab4a4c 100644
--- a/docs/public/favicon.svg
+++ b/docs/public/favicon.svg
@@ -1,14 +1,15 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <!-- A small data-flow graph: source node routing through a join to a sink. -->
-  <g stroke="#0e7490" stroke-width="4.5" stroke-linecap="round" fill="none">
+  <!-- A small data-flow graph: two sources routing through a join to a sink.
+       The nodes are octagons, the flow-node shape the site's panels echo. -->
+  <g stroke="#0e7490" stroke-width="4.5" stroke-linecap="square" fill="none">
     <path d="M15 14 L32 32" />
     <path d="M15 50 L32 32" />
     <path d="M32 32 L51 32" />
   </g>
   <g fill="#22d3ee">
-    <circle cx="13" cy="12" r="8" />
-    <circle cx="13" cy="52" r="8" />
-    <circle cx="33" cy="32" r="8" />
+    <path d="M9.7 4h6.6L21 8.7v6.6L16.3 20H9.7L5 15.3V8.7z" />
+    <path d="M9.7 44h6.6L21 48.7v6.6L16.3 60H9.7L5 55.3v-6.6z" />
+    <path d="M29.7 24h6.6L41 28.7v6.6L36.3 40h-6.6L25 35.3v-6.6z" />
   </g>
-  <circle cx="53" cy="32" r="8" fill="#0e7490" />
+  <path d="M49.7 24h6.6L61 28.7v6.6L56.3 40h-6.6L45 35.3v-6.6z" fill="#0e7490" />
 </svg>
diff --git a/docs/public/og-image.png b/docs/public/og-image.png
new file mode 100644
index 000000000..143d8b8a0
Binary files /dev/null and b/docs/public/og-image.png differ
diff --git a/docs/src/assets/mark.svg b/docs/src/assets/mark.svg
new file mode 100644
index 000000000..f45ab4a4c
--- /dev/null
+++ b/docs/src/assets/mark.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- A small data-flow graph: two sources routing through a join to a sink.
+       The nodes are octagons, the flow-node shape the site's panels echo. -->
+  <g stroke="#0e7490" stroke-width="4.5" stroke-linecap="square" fill="none">
+    <path d="M15 14 L32 32" />
+    <path d="M15 50 L32 32" />
+    <path d="M32 32 L51 32" />
+  </g>
+  <g fill="#22d3ee">
+    <path d="M9.7 4h6.6L21 8.7v6.6L16.3 20H9.7L5 15.3V8.7z" />
+    <path d="M9.7 44h6.6L21 48.7v6.6L16.3 60H9.7L5 55.3v-6.6z" />
+    <path d="M29.7 24h6.6L41 28.7v6.6L36.3 40h-6.6L25 35.3v-6.6z" />
+  </g>
+  <path d="M49.7 24h6.6L61 28.7v6.6L56.3 40h-6.6L45 35.3v-6.6z" fill="#0e7490" />
+</svg>
diff --git a/docs/src/components/AnalyzerLandscape.astro b/docs/src/components/AnalyzerLandscape.astro
index 4c0f44bd4..93954b3df 100644
--- a/docs/src/components/AnalyzerLandscape.astro
+++ b/docs/src/components/AnalyzerLandscape.astro
@@ -12,6 +12,7 @@ import {
   vendorOrder,
 } from '../data/snapshots';
 import { analyzerLanguageSupport, type AnalyzerLanguageSupport } from '../data/analyzer-language-support';
+import { percentAxis, placeLabels } from '../data/scatter-layout';
 import ScatterTooltip from './ScatterTooltip.astro';
 
 interface AnalyzerPoint {
@@ -67,28 +68,28 @@ const formatPercent = (value: number) => `${value.toFixed(1)}%`;
 
 const width = 820;
 const height = 470;
-const padLeft = 66;
-const padRight = 30;
-const padTop = 34;
-const padBottom = 62;
+const padLeft = 60;
+const padRight = 24;
+const padTop = 28;
+const padBottom = 56;
 const plotWidth = width - padLeft - padRight;
 const plotHeight = height - padTop - padBottom;
 const languageAxisMax = 14;
+// The vertical axis starts at the tens below the lowest analyzer rather than
+// at 0, so the plot spends its height on the range the analyzers occupy.
+const axis = percentAxis(points.map((point) => percent(point.correct, point.covered)));
 const x = (languages: number) => padLeft + languages * plotWidth / languageAxisMax;
-const y = (correct: number, covered: number) => padTop + (100 - percent(correct, covered)) * plotHeight / 100;
+const y = (value: number) => padTop + (axis.max - value) * plotHeight / (axis.max - axis.min);
 const xTicks = [0, 2, 4, 6, 8, 10, 12, 14];
-const yTicks = [50, 60, 70, 80, 90, 100];
-// Small, stable offsets keep labels readable without changing point geometry.
-const labelOffsets: Record<string, { x: number; y: number; anchor?: 'start' | 'end' }> = {
-  bifrost: { x: -9, y: -11, anchor: 'end' },
-  codeql: { x: -9, y: 17, anchor: 'end' },
-  joern: { x: -9, y: -11, anchor: 'end' },
-  semgrep: { x: -9, y: 17, anchor: 'end' },
-  opentaint: { x: -10, y: -11, anchor: 'end' },
-  infer: { x: 9, y: -11 },
-  flowdroid: { x: 9, y: 17 },
-  pysa: { x: 9, y: 17 },
-};
+const plotted = points.map((point) => ({
+  ...point,
+  px: x(point.languageSupport.languages.length),
+  py: y(percent(point.correct, point.covered)),
+}));
+const labels = placeLabels(
+  plotted.map((point) => ({ x: point.px, y: point.py, text: point.name })),
+  { bounds: { left: padLeft + 4, top: 4, right: width - 4, bottom: height - padBottom - 4 }, radius: 8, fontSize: 13, charWidth: 0.58 },
+);
 ---
 
 <h2 id="landscape">Accuracy and language coverage — current snapshot</h2>
@@ -108,33 +109,26 @@ const labelOffsets: Record<string, { x: number; y: number; anchor?: 'start' | 'e
   <svg class="landscape-chart" viewBox={`0 0 ${width} ${height}`} role="img" aria-labelledby="landscape-title landscape-desc">
     <title id="landscape-title">Current analyzer accuracy by supported data-flow languages</title>
     <desc id="landscape-desc">Scatter plot of all analyzers in DataFlowBench {currentSnapshot.version}. The horizontal axis is the documented number of languages in which each analyzer performs data-flow analysis. The vertical axis is decisive-correct assertions divided by every assertion in the benchmark kernels that analyzer covers, including non-answers in the denominator.</desc>
-    {yTicks.map((tick) => {
-      const tickY = padTop + (100 - tick) * plotHeight / 100;
-      return <>
-        <line class="grid" x1={padLeft} y1={tickY} x2={width - padRight} y2={tickY} />
-        <text class="tick" x={padLeft - 10} y={tickY + 4} text-anchor="end">{tick}%</text>
-      </>;
-    })}
-    {xTicks.map((tick) => {
-      const tickX = x(tick);
-      return <>
-        <line class="grid vertical" x1={tickX} y1={padTop} x2={tickX} y2={height - padBottom} />
-        <text class="tick" x={tickX} y={height - padBottom + 22} text-anchor="middle">{tick}</text>
-      </>;
-    })}
+    {axis.ticks.map((tick) => <>
+      <line class="grid" x1={padLeft} y1={y(tick)} x2={width - padRight} y2={y(tick)} />
+      <text class="tick" x={padLeft - 10} y={y(tick) + 4} text-anchor="end">{tick}%</text>
+    </>)}
+    {xTicks.map((tick) => <>
+      <line class="grid vertical" x1={x(tick)} y1={padTop} x2={x(tick)} y2={height - padBottom} />
+      <text class="tick" x={x(tick)} y={height - padBottom + 20} text-anchor="middle">{tick}</text>
+    </>)}
     <line class="axis" x1={padLeft} y1={height - padBottom} x2={width - padRight} y2={height - padBottom} />
     <line class="axis" x1={padLeft} y1={padTop} x2={padLeft} y2={height - padBottom} />
-    <text class="axis-title" x={(padLeft + width - padRight) / 2} y={height - 10} text-anchor="middle">languages with documented data-flow support</text>
-    <text class="axis-title" transform={`translate(17 ${(padTop + height - padBottom) / 2}) rotate(-90)`} text-anchor="middle">accuracy within covered kernels</text>
-    {points.map((point) => {
-      const pointX = x(point.languageSupport.languages.length);
-      const pointY = y(point.correct, point.covered);
-      const offset = labelOffsets[point.tool] ?? { x: 9, y: -9 };
+    <text class="axis-title" x={(padLeft + width - padRight) / 2} y={height - 12} text-anchor="middle">Languages with documented data-flow support</text>
+    <text class="axis-title" transform={`translate(16 ${(padTop + height - padBottom) / 2}) rotate(-90)`} text-anchor="middle">Accuracy within covered kernels</text>
+    {plotted.map((point, index) => {
+      const label = labels[index];
       const accuracy = percent(point.correct, point.covered);
       const tooltip = `${point.name} — x: ${point.languageSupport.languages.length} supported languages · y: ${formatPercent(accuracy)} accuracy`;
       return <g class:list={['analyzer', point.colorClass]} tabindex="0" role="img" aria-label={tooltip} data-tooltip={tooltip}>
-        <circle class:list={['point', point.cohort]} cx={pointX} cy={pointY} r="7" />
-        <text class="point-label" x={pointX + offset.x} y={pointY + offset.y} text-anchor={offset.anchor ?? 'start'}>{point.name}</text>
+        {label.leader && <line class="leader" x1={point.px} y1={point.py} x2={label.x} y2={label.y - 4} />}
+        <circle class:list={['point', point.cohort]} cx={point.px} cy={point.py} r="6.5" />
+        <text class="point-label" x={label.x} y={label.y} text-anchor={label.anchor}>{point.name}</text>
       </g>;
     })}
   </svg>
@@ -148,15 +142,15 @@ const labelOffsets: Record<string, { x: number; y: number; anchor?: 'start' | 'e
 
 <details class="landscape-data">
   <summary>Exact figures</summary>
-  <div class="table-wrap">
+  <div class="table-wrap ds-table">
     <table>
       <thead><tr><th>Analyzer</th><th>Scope</th><th>Supported languages</th><th>Benchmark kernels</th><th>Accuracy</th><th>Correct</th><th>Wrong</th><th>Incomplete</th></tr></thead>
       <tbody>{points.map((point) => <tr>
         <th scope="row"><span class:list={['vendor-dot', point.colorClass]}></span>{point.name}</th>
         <td>{point.cohort}</td>
         <td><a href={point.languageSupport.sourceUrl} title={point.languageSupport.source}>{point.languageSupport.languages.length}</a><small>{point.languageSupport.languages.join(', ')}</small></td>
-        <td>{point.kernels}/{kernelCount} ({formatPercent(percent(point.kernels, kernelCount))})</td>
-        <td>{point.correct}/{point.covered} ({formatPercent(percent(point.correct, point.covered))})</td>
+        <td class="num">{point.kernels}/{kernelCount} ({formatPercent(percent(point.kernels, kernelCount))})</td>
+        <td class="num">{point.correct}/{point.covered} ({formatPercent(percent(point.correct, point.covered))})</td>
         <td>{point.correct}</td><td>{point.wrong}</td><td>{point.incomplete}</td>
       </tr>)}</tbody>
     </table>
@@ -164,26 +158,32 @@ const labelOffsets: Record<string, { x: number; y: number; anchor?: 'start' | 'e
 </details>
 
 <style>
-  .landscape-frame { position: relative; border: 1px solid var(--sl-color-hairline); border-radius: .75rem; padding: .75rem .5rem .25rem; background: var(--sl-color-bg-sidebar); overflow-x: auto; }
+  .landscape-frame { position: relative; margin-top: 1.25rem; border: 1px solid var(--ds-line); padding: 1rem .75rem .5rem; background: var(--ds-well); overflow-x: auto; }
   .landscape-chart { display: block; width: 100%; min-width: 42rem; height: auto; }
-  .grid { stroke: var(--sl-color-hairline); stroke-width: 1; }
-  .grid.vertical { stroke-dasharray: 3 5; }
-  .axis { stroke: var(--sl-color-gray-4); stroke-width: 1.5; }
-  .tick, .axis-title { font-family: var(--__sl-font-mono); font-size: 11px; fill: var(--sl-color-gray-3); }
-  .axis-title { font-size: 12px; }
-  .point { fill: var(--vendor-rule); stroke: var(--sl-color-bg-sidebar); stroke-width: 2; }
+  .grid { stroke: var(--ds-line-soft); stroke-width: 1; }
+  .grid.vertical { stroke-dasharray: 2 4; }
+  .axis { stroke: var(--ds-line-strong); stroke-width: 1; }
+  .tick { font-family: var(--ds-font-mono); font-size: 11px; fill: var(--ds-text-3); }
+  .axis-title { font-family: var(--ds-font); font-size: 13px; font-weight: 500; fill: var(--ds-text-2); }
+  .point { fill: var(--vendor-rule); stroke: var(--ds-well); stroke-width: 2; }
+  .leader { stroke: var(--vendor-rule); stroke-width: 1; opacity: .55; }
   .analyzer { cursor: default; outline: none; }
-  .analyzer:is(:hover, :focus-visible) .point { stroke: var(--sl-color-text); stroke-width: 3; }
-  .point.specialist { stroke-dasharray: 3 2; stroke-width: 3; }
-  .point-label { font-family: var(--__sl-font-mono); font-size: 12px; font-weight: 650; fill: var(--vendor-rule); paint-order: stroke; stroke: var(--sl-color-bg-sidebar); stroke-width: 4px; stroke-linejoin: round; }
-  .landscape-key { list-style: none; display: flex; gap: 1.25rem; margin: .65rem 0 0; padding: 0; color: var(--sl-color-gray-2); font-size: var(--sl-text-sm); }
+  .analyzer:is(:hover, :focus-visible) .point { stroke: var(--ds-text); stroke-width: 2.5; }
+  .analyzer:focus-visible .point-label { text-decoration: underline; }
+  /* A specialist is drawn as a ring, so the distinction survives without colour. */
+  .point.specialist { fill: var(--ds-well); stroke: var(--vendor-rule); stroke-width: 2.5; }
+  .point-label { font-family: var(--ds-font); font-size: 13px; font-weight: 500; fill: var(--vendor-rule); paint-order: stroke; stroke: var(--ds-well); stroke-width: 4px; stroke-linejoin: round; }
+  .landscape-key { list-style: none; display: flex; gap: 1.5rem; margin: .65rem 0 0; padding: 0; color: var(--ds-text-3); font-size: var(--sl-text-sm); }
   .landscape-key li { display: flex; align-items: center; margin: 0; }
-  .shape { width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; background: var(--sl-color-gray-3); border: 2px solid var(--sl-color-bg); }
-  .shape.specialist { border: 2px dashed var(--sl-color-gray-3); background: transparent; }
+  .shape { width: .7rem; height: .7rem; border-radius: 50%; margin-right: .45rem; background: var(--ds-text-3); }
+  .shape.specialist { background: transparent; border: 2px solid var(--ds-text-3); }
   .landscape-data { margin-top: .8rem; }
   .table-wrap { overflow-x: auto; }
-  td small { display: block; min-width: 12rem; margin-top: .2rem; color: var(--sl-color-gray-3); line-height: 1.35; }
-  .vendor-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; background: var(--vendor-rule); }
+  td small { display: block; min-width: 12rem; margin-top: .2rem; color: var(--ds-text-3); line-height: 1.35; }
+  /* A name and a fraction each read as one unit; the table pans before either
+     splits across lines. */
+  th[scope='row'], .num { white-space: nowrap; }
+  .vendor-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; background: var(--vendor-rule); }
   .v0 { --vendor-rule: var(--sl-color-accent-high); } .v1 { --vendor-rule: var(--sl-color-orange); } .v2 { --vendor-rule: var(--sl-color-purple); } .v3 { --vendor-rule: var(--sl-color-green); }
   .v4 { --vendor-rule: var(--dfb-vendor-4); } .v5 { --vendor-rule: var(--dfb-vendor-5); } .v6 { --vendor-rule: var(--dfb-vendor-6); } .v7 { --vendor-rule: var(--dfb-vendor-7); }
 </style>
diff --git a/docs/src/components/AnalyzerProfiles.astro b/docs/src/components/AnalyzerProfiles.astro
index a51a64129..e44a47224 100644
--- a/docs/src/components/AnalyzerProfiles.astro
+++ b/docs/src/components/AnalyzerProfiles.astro
@@ -300,17 +300,19 @@ const cards = model.profiles.map((profile) => {
   }
   .profile-card {
     margin: 0;
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.75rem;
-    padding: 0.75rem 0.75rem 0.6rem;
-    background: var(--sl-color-bg-sidebar);
+    border: 1px solid var(--ds-line);
+    border-radius: var(--ds-cut-control);
+    corner-shape: bevel;
+    padding: 0.95rem 1rem 0.85rem;
+    background: var(--ds-surface);
   }
   .profile-name {
     display: flex;
     align-items: center;
-    font-weight: 600;
+    font-weight: 500;
     font-size: var(--sl-text-base);
-    color: var(--sl-color-white);
+    letter-spacing: -0.01em;
+    color: var(--ds-text);
     margin: 0 0 0.25rem;
   }
   .vendor-dot {
@@ -318,7 +320,7 @@ const cards = model.profiles.map((profile) => {
     width: 0.55rem;
     height: 0.55rem;
     border-radius: 50%;
-    margin-right: 0.4rem;
+    margin-right: 0.45rem;
     background: var(--vendor-rule, var(--sl-color-accent));
   }
   .profile-radar {
@@ -328,11 +330,11 @@ const cards = model.profiles.map((profile) => {
   }
   .profile-radar .ring {
     fill: none;
-    stroke: var(--sl-color-hairline);
+    stroke: var(--ds-line);
     stroke-width: 1;
   }
   .profile-radar .spoke {
-    stroke: var(--sl-color-hairline);
+    stroke: var(--ds-line-soft);
     stroke-width: 1;
   }
   .profile-radar .shape {
@@ -346,9 +348,10 @@ const cards = model.profiles.map((profile) => {
     fill: var(--vendor-rule, var(--sl-color-accent));
   }
   .profile-radar .axis-label {
-    font-family: var(--__sl-font-mono);
-    font-size: 11px;
-    fill: var(--sl-color-gray-3);
+    font-family: var(--ds-font);
+    font-size: 11.5px;
+    font-weight: 500;
+    fill: var(--ds-text-3);
   }
   .readings {
     display: grid;
@@ -358,26 +361,25 @@ const cards = model.profiles.map((profile) => {
     font-size: var(--sl-text-xs);
   }
   .readings dt {
-    font-family: var(--__sl-font-mono);
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
   }
   .readings dd {
     margin: 0;
     display: flex;
     flex-direction: column;
     line-height: 1.3;
-    color: var(--sl-color-gray-2);
+    color: var(--ds-text-2);
   }
   .readings .basis {
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
   }
   .axis-notes {
     font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
   }
   .caption {
     font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
   }
   /* The same fixed vendor→colour identity map every other section uses. */
   .v0 {
diff --git a/docs/src/components/BackToTop.astro b/docs/src/components/BackToTop.astro
index 431758f54..84b88bfa6 100644
--- a/docs/src/components/BackToTop.astro
+++ b/docs/src/components/BackToTop.astro
@@ -68,13 +68,14 @@
     justify-content: center;
     width: 2.5rem;
     height: 2.5rem;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 999px;
+    border: 1px solid var(--ds-line-strong);
+    border-radius: var(--ds-cut-chip);
+    corner-shape: bevel;
     /* The nav's own background: this floats over the page, so it should read
        as chrome rather than as another card. */
     background: var(--sl-color-bg-nav);
-    color: var(--sl-color-gray-2);
-    box-shadow: var(--sl-shadow-md);
+    color: var(--ds-text-2);
+    box-shadow: var(--ds-shadow-float);
 
     /* Hidden until the reader has scrolled. `visibility` rather than opacity
        alone so the anchor leaves the tab order while it is not on offer. */
@@ -94,12 +95,12 @@
   }
 
   .to-top:hover {
-    color: var(--sl-color-white);
-    border-color: var(--sl-color-accent);
+    color: var(--ds-text);
+    border-color: var(--ds-accent);
   }
 
   .to-top:focus-visible {
-    outline: 2px solid var(--sl-color-accent-high);
+    outline: 2px solid var(--ds-accent);
     outline-offset: 2px;
   }
 
diff --git a/docs/src/components/CaseEvidence.astro b/docs/src/components/CaseEvidence.astro
index 1103b9fdb..e8d157784 100644
--- a/docs/src/components/CaseEvidence.astro
+++ b/docs/src/components/CaseEvidence.astro
@@ -14,7 +14,7 @@ interface Props {
 const { snapshot, tier } = Astro.props;
 ---
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -30,17 +30,17 @@ const { snapshot, tier } = Astro.props;
       {
         tier.cases.map((result) => (
           <tr>
-            <td>
+            <td class="template">
               <code>{result.template_id.replace('dfb-template-', '')}</code>
             </td>
-            <td>
+            <td class="case">
               <code>{result.case_id}</code>
             </td>
             <td>{result.polarity}</td>
             <td>
               <code>{result.outcome}</code>
             </td>
-            <td>{result.classification}</td>
+            <td class="classification">{result.classification}</td>
             <td>
               <a href={evidenceUrl(snapshot, result.raw_evidence.path)}>
                 <code>{shortDigest(result.raw_evidence.sha256)}…</code>
@@ -57,4 +57,16 @@ const { snapshot, tier } = Astro.props;
   .table-scroll {
     overflow-x: auto;
   }
+  /* Template and case ids wrap at their hyphens, two or three pieces to a
+     line; below that the table pans instead of stacking one piece per line.
+     A classification such as true-negative is one term. */
+  .template {
+    min-width: 9rem;
+  }
+  .case {
+    min-width: 11rem;
+  }
+  .classification {
+    white-space: nowrap;
+  }
 </style>
diff --git a/docs/src/components/DecisionLandscape.astro b/docs/src/components/DecisionLandscape.astro
index cf5467bed..aed02e409 100644
--- a/docs/src/components/DecisionLandscape.astro
+++ b/docs/src/components/DecisionLandscape.astro
@@ -11,6 +11,7 @@ import {
   vendorName,
   vendorOrder,
 } from '../data/snapshots';
+import { percentAxis, placeLabels, type LabelPlacement, type PercentAxis } from '../data/scatter-layout';
 import ScatterTooltip from './ScatterTooltip.astro';
 
 interface Point {
@@ -30,6 +31,13 @@ interface Panel {
   points: Point[];
 }
 
+interface PlottedPoint extends Point {
+  decided: number;
+  px: number;
+  py: number;
+  label: LabelPlacement;
+}
+
 const populations = coreKernelPopulations(currentSnapshot.results);
 const totalAssertions = populations.reduce((sum, population) => sum + population.cases, 0);
 
@@ -73,36 +81,49 @@ const panels: Panel[] = [
 
 const width = 820;
 const height = 470;
-const padLeft = 66;
-const padRight = 30;
-const padTop = 34;
-const padBottom = 62;
+const padLeft = 60;
+const padRight = 24;
+const padTop = 28;
+const padBottom = 56;
 const plotWidth = width - padLeft - padRight;
 const plotHeight = height - padTop - padBottom;
 const percent = (part: number, whole: number) => whole === 0 ? 0 : (100 * part) / whole;
 const formatPercent = (value: number) => `${value.toFixed(1)}%`;
-const x = (decided: number, denominator: number) => padLeft + percent(decided, denominator) * plotWidth / 100;
-const y = (correct: number, decided: number) => padTop + (100 - percent(correct, decided)) * plotHeight / 100;
 const xTicks = [0, 25, 50, 75, 100];
-const yTicks = [50, 60, 70, 80, 90, 100];
-const labelOffsets: Record<string, { x: number; y: number; anchor?: 'start' | 'end' }> = {
-  bifrost: { x: -9, y: -11, anchor: 'end' },
-  codeql: { x: -9, y: 17, anchor: 'end' },
-  joern: { x: -9, y: -11, anchor: 'end' },
-  semgrep: { x: 9, y: 17 },
-  opentaint: { x: -10, y: -11, anchor: 'end' },
-  infer: { x: 9, y: -11 },
-  flowdroid: { x: 9, y: 17 },
-  pysa: { x: -9, y: 17, anchor: 'end' },
-};
+// Blind answering — the same verdict on both halves of every pair — is right
+// exactly half the time, so 50% correctness is the floor worth marking.
+const baseline = 50;
+
+// Each view gets a vertical axis fitted to its own points, trimmed from 0 to
+// the tens below the lowest one but always keeping the baseline clear of the
+// floor: most views share the same 40–100% axis, and one that dips below it
+// says so on its ticks.
+// Labels are placed per view, since which points crowd depends on the view.
+const layouts = panels.map((panel) => {
+  const axis: PercentAxis = percentAxis(
+    panel.points.map((point) => percent(point.correct, point.correct + point.wrong)),
+    baseline - 10,
+  );
+  const x = (value: number) => padLeft + value * plotWidth / 100;
+  const y = (value: number) => padTop + (axis.max - value) * plotHeight / (axis.max - axis.min);
+  const located = panel.points.map((point) => {
+    const decided = point.correct + point.wrong;
+    return { ...point, decided, px: x(percent(decided, panel.denominator)), py: y(percent(point.correct, decided)) };
+  });
+  const labels = placeLabels(
+    located.map((point) => ({ x: point.px, y: point.py, text: point.name })),
+    { bounds: { left: padLeft + 4, top: 4, right: width - 4, bottom: height - padBottom - 4 }, radius: 8, fontSize: 13, charWidth: 0.58 },
+  );
+  const points: PlottedPoint[] = located.map((point, index) => ({ ...point, label: labels[index] }));
+  return { panel, axis, x, y, points };
+});
 
 const toggleCss = panels.map((panel) => `
 #decision-view-${panel.id}:checked ~ .decision-ribbon label[for='decision-view-${panel.id}'] {
-  background: var(--sl-color-accent-low); color: var(--sl-color-white);
-  box-shadow: inset 0 0 0 1px var(--sl-color-accent);
+  border-color: var(--ds-accent); background: var(--ds-accent-low); color: var(--ds-text);
 }
 #decision-view-${panel.id}:focus-visible ~ .decision-ribbon label[for='decision-view-${panel.id}'] {
-  outline: 2px solid var(--sl-color-accent-high); outline-offset: 2px;
+  outline: 2px solid var(--ds-accent); outline-offset: 2px;
 }
 #decision-view-${panel.id}:checked ~ .decision-panels > #decision-panel-${panel.id} { display: block; }
 `).join('\n');
@@ -111,35 +132,34 @@ const toggleCss = panels.map((panel) => `
 <div class="decision-landscape" id="decisions">
   {panels.map((panel, index) => <input class="decision-radio" type="radio" name="decision-view" id={`decision-view-${panel.id}`} checked={index === 0} />)}
   <div class="decision-ribbon" role="group" aria-label="Decisiveness and correctness view">
-    {panels.map((panel) => <label for={`decision-view-${panel.id}`}>{panel.label}</label>)}
+    {panels.map((panel, index) => <label class:list={['ds-chip', { lead: index === 0 }]} for={`decision-view-${panel.id}`}>{panel.label}</label>)}
   </div>
   <div class="decision-panels">
-    {panels.map((panel) => <section class="decision-panel" id={`decision-panel-${panel.id}`}>
+    {layouts.map(({ panel, axis, x, y, points }) => <section class="decision-panel" id={`decision-panel-${panel.id}`}>
       <div class="chart-frame" data-scatter-frame>
         <svg class="decision-chart" viewBox={`0 0 ${width} ${height}`} role="img" aria-labelledby={`decision-title-${panel.id} decision-desc-${panel.id}`}>
           <title id={`decision-title-${panel.id}`}>{panel.label} analyzer decisiveness and correctness</title>
-          <desc id={`decision-desc-${panel.id}`}>Scatter plot for {panel.label}. The horizontal axis is decisive answers divided by {panel.denominator} assertions. The vertical axis is correct answers divided by decisive answers.</desc>
-          {yTicks.map((tick) => {
-            const tickY = padTop + (100 - tick) * plotHeight / 100;
-            return <><line class="grid" x1={padLeft} y1={tickY} x2={width - padRight} y2={tickY} /><text class="tick" x={padLeft - 10} y={tickY + 4} text-anchor="end">{tick}%</text></>;
-          })}
-          {xTicks.map((tick) => {
-            const tickX = padLeft + tick * plotWidth / 100;
-            return <><line class="grid vertical" x1={tickX} y1={padTop} x2={tickX} y2={height - padBottom} /><text class="tick" x={tickX} y={height - padBottom + 22} text-anchor="middle">{tick}%</text></>;
-          })}
+          <desc id={`decision-desc-${panel.id}`}>Scatter plot for {panel.label}. The horizontal axis is decisive answers divided by {panel.denominator} assertions. The vertical axis is correct answers divided by decisive answers, from {axis.min}% to 100%; a line marks the {baseline}% a blind answerer would score.</desc>
+          {axis.ticks.map((tick) => <>
+            <line class="grid" x1={padLeft} y1={y(tick)} x2={width - padRight} y2={y(tick)} />
+            <text class="tick" x={padLeft - 10} y={y(tick) + 4} text-anchor="end">{tick}%</text>
+          </>)}
+          {xTicks.map((tick) => <>
+            <line class="grid vertical" x1={x(tick)} y1={padTop} x2={x(tick)} y2={height - padBottom} />
+            <text class="tick" x={x(tick)} y={height - padBottom + 20} text-anchor="middle">{tick}%</text>
+          </>)}
+          <line class="baseline" x1={padLeft} y1={y(baseline)} x2={width - padRight} y2={y(baseline)} />
+          <text class="baseline-label" x={width - padRight - 4} y={y(baseline) - 6} text-anchor="end">blind baseline</text>
           <line class="axis" x1={padLeft} y1={height - padBottom} x2={width - padRight} y2={height - padBottom} />
           <line class="axis" x1={padLeft} y1={padTop} x2={padLeft} y2={height - padBottom} />
-          <text class="axis-title" x={(padLeft + width - padRight) / 2} y={height - 10} text-anchor="middle">decisiveness — share of {panel.denominator} assertions answered</text>
-          <text class="axis-title" transform={`translate(17 ${(padTop + height - padBottom) / 2}) rotate(-90)`} text-anchor="middle">correctness among decisive answers</text>
-          {panel.points.map((point) => {
-            const decided = point.correct + point.wrong;
-            const pointX = x(decided, panel.denominator);
-            const pointY = y(point.correct, decided);
-            const offset = labelOffsets[point.tool] ?? { x: 9, y: -9 };
-            const tooltip = `${point.name} — x: ${formatPercent(percent(decided, panel.denominator))} decisiveness (${decided}/${panel.denominator}) · y: ${formatPercent(percent(point.correct, decided))} correctness (${point.correct}/${decided})`;
+          <text class="axis-title" x={(padLeft + width - padRight) / 2} y={height - 12} text-anchor="middle">Decisiveness: share of {panel.denominator} assertions answered</text>
+          <text class="axis-title" transform={`translate(16 ${(padTop + height - padBottom) / 2}) rotate(-90)`} text-anchor="middle">Correctness among decisive answers</text>
+          {points.map((point) => {
+            const tooltip = `${point.name} — x: ${formatPercent(percent(point.decided, panel.denominator))} decisiveness (${point.decided}/${panel.denominator}) · y: ${formatPercent(percent(point.correct, point.decided))} correctness (${point.correct}/${point.decided})`;
             return <g class:list={['analyzer', point.colorClass]} tabindex="0" role="img" aria-label={tooltip} data-tooltip={tooltip}>
-              <circle class="point" cx={pointX} cy={pointY} r="7" />
-              <text class="point-label" x={pointX + offset.x} y={pointY + offset.y} text-anchor={offset.anchor ?? 'start'}>{point.name}</text>
+              {point.label.leader && <line class="leader" x1={point.px} y1={point.py} x2={point.label.x} y2={point.label.y - 4} />}
+              <circle class="point" cx={point.px} cy={point.py} r="6.5" />
+              <text class="point-label" x={point.label.x} y={point.label.y} text-anchor={point.label.anchor}>{point.name}</text>
             </g>;
           })}
         </svg>
@@ -152,16 +172,16 @@ const toggleCss = panels.map((panel) => `
       </p>
       <details class="decision-data">
         <summary>Exact figures</summary>
-        <div class="table-wrap"><table>
+        <div class="table-wrap ds-table"><table>
           <thead><tr><th>Analyzer</th><th>Decisiveness</th><th>Correctness when decisive</th><th>Unanswered</th>{panel.kernelId && <th>Evidence</th>}</tr></thead>
           <tbody>{panel.points.map((point) => {
             const decided = point.correct + point.wrong;
             return <tr>
               <th scope="row"><span class:list={['vendor-dot', point.colorClass]}></span>{point.name}</th>
-              <td>{decided}/{panel.denominator} ({formatPercent(percent(decided, panel.denominator))})</td>
-              <td>{point.correct}/{decided} ({formatPercent(percent(point.correct, decided))})</td>
+              <td class="num">{decided}/{panel.denominator} ({formatPercent(percent(decided, panel.denominator))})</td>
+              <td class="num">{point.correct}/{decided} ({formatPercent(percent(point.correct, decided))})</td>
               <td>{panel.denominator - decided}</td>
-              {panel.kernelId && <td><button type="button" class="details-button" data-kernel={panel.kernelId}>Confusion matrix</button></td>}
+              {panel.kernelId && <td><button type="button" class="details-button ds-button" data-kernel={panel.kernelId}>Confusion matrix</button></td>}
             </tr>;
           })}</tbody>
         </table></div>
@@ -172,30 +192,38 @@ const toggleCss = panels.map((panel) => `
 
 <style is:inline set:html={toggleCss}></style>
 <style>
-  .decision-landscape { display: grid; gap: 1rem; margin-top: 1rem; scroll-margin-top: 5rem; }
+  .decision-landscape { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: var(--ds-space-lg); scroll-margin-top: 5rem; }
   .decision-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
-  .decision-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .35rem; border-radius: .65rem; background: var(--sl-color-bg-sidebar); }
-  .decision-ribbon label { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; height: 2.5rem; margin: 0 !important; padding: 0 .65rem; border: 1px solid transparent; border-radius: .45rem; cursor: pointer; color: var(--sl-color-gray-2); font-size: var(--sl-text-sm); line-height: 1; }
+  .decision-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
+  .decision-ribbon label { min-height: 2rem; margin: 0 !important; padding-inline: .65rem; font-size: var(--sl-text-xs); cursor: pointer; }
+  /* The aggregate view is set apart from the per-language ones. */
+  .decision-ribbon label.lead { margin-right: .6rem !important; }
   .decision-ribbon, .decision-panels, .decision-panel, .decision-panel > :first-child { margin-top: 0; }
   .decision-panel { display: none; }
-  .chart-frame { position: relative; min-width: 0; border: 1px solid var(--sl-color-hairline); border-radius: .75rem; padding: .75rem .5rem .25rem; background: var(--sl-color-bg-sidebar); overflow: hidden; }
-  .decision-chart { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; }
-  .grid { stroke: var(--sl-color-hairline); stroke-width: 1; }
-  .grid.vertical { stroke-dasharray: 3 5; }
-  .axis { stroke: var(--sl-color-gray-4); stroke-width: 1.5; }
-  .tick, .axis-title { font-family: var(--__sl-font-mono); font-size: 11px; fill: var(--sl-color-gray-3); }
-  .axis-title { font-size: 12px; }
-  .point { fill: var(--vendor-rule); stroke: var(--sl-color-bg-sidebar); stroke-width: 2; }
+  /* Below 36rem the chart scrolls sideways rather than shrinking its labels
+     past reading size; the tooltip already accounts for the scroll offset. */
+  .chart-frame { position: relative; min-width: 0; border: 1px solid var(--ds-line); padding: 1rem .75rem .5rem; background: var(--ds-well); overflow-x: auto; }
+  .decision-chart { display: block; width: 100%; min-width: 36rem; height: auto; }
+  .grid { stroke: var(--ds-line-soft); stroke-width: 1; }
+  .grid.vertical { stroke-dasharray: 2 4; }
+  .axis { stroke: var(--ds-line-strong); stroke-width: 1; }
+  .baseline { stroke: var(--ds-text-3); stroke-width: 1; stroke-dasharray: 6 4; }
+  .baseline-label { font-family: var(--ds-font); font-size: 12px; fill: var(--ds-text-3); }
+  .tick { font-family: var(--ds-font-mono); font-size: 11px; fill: var(--ds-text-3); }
+  .axis-title { font-family: var(--ds-font); font-size: 13px; font-weight: 500; fill: var(--ds-text-2); }
+  .point { fill: var(--vendor-rule); stroke: var(--ds-well); stroke-width: 2; }
+  .leader { stroke: var(--vendor-rule); stroke-width: 1; opacity: .55; }
   .analyzer { cursor: default; outline: none; }
-  .analyzer:is(:hover, :focus-visible) .point { stroke: var(--sl-color-text); stroke-width: 3; }
-  .point-label { font-family: var(--__sl-font-mono); font-size: 12px; font-weight: 650; fill: var(--vendor-rule); paint-order: stroke; stroke: var(--sl-color-bg-sidebar); stroke-width: 4px; stroke-linejoin: round; }
-  .view-note { margin: .65rem 0 0; color: var(--sl-color-gray-3); font-size: var(--sl-text-sm); }
+  .analyzer:is(:hover, :focus-visible) .point { stroke: var(--ds-text); stroke-width: 2.5; }
+  .analyzer:focus-visible .point-label { text-decoration: underline; }
+  .point-label { font-family: var(--ds-font); font-size: 13px; font-weight: 500; fill: var(--vendor-rule); paint-order: stroke; stroke: var(--ds-well); stroke-width: 4px; stroke-linejoin: round; }
+  .view-note { margin: .65rem 0 0; color: var(--ds-text-3); font-size: var(--sl-text-sm); }
   .decision-data { margin-top: .65rem; }
   .table-wrap { overflow-x: auto; }
-  .details-button { font-family: var(--__sl-font-mono); font-size: var(--sl-text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--sl-color-accent-high); background: transparent; border: 1px solid var(--sl-color-hairline); border-radius: .45rem; padding: .3rem .55rem; cursor: pointer; white-space: nowrap; }
-  .details-button:hover { border-color: var(--sl-color-accent); }
-  .details-button:focus-visible { outline: 2px solid var(--sl-color-accent-high); outline-offset: 2px; }
-  .vendor-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; background: var(--vendor-rule); }
+  /* A name and a fraction each read as one unit; the table pans before either
+     splits across lines. */
+  th[scope='row'], .num { white-space: nowrap; }
+  .vendor-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; background: var(--vendor-rule); }
   .v0 { --vendor-rule: var(--sl-color-accent-high); } .v1 { --vendor-rule: var(--sl-color-orange); } .v2 { --vendor-rule: var(--sl-color-purple); } .v3 { --vendor-rule: var(--sl-color-green); }
   .v4 { --vendor-rule: var(--dfb-vendor-4); } .v5 { --vendor-rule: var(--dfb-vendor-5); } .v6 { --vendor-rule: var(--dfb-vendor-6); } .v7 { --vendor-rule: var(--dfb-vendor-7); }
 </style>
diff --git a/docs/src/components/DimensionRates.astro b/docs/src/components/DimensionRates.astro
index ad96ffb89..cb254563c 100644
--- a/docs/src/components/DimensionRates.astro
+++ b/docs/src/components/DimensionRates.astro
@@ -18,7 +18,7 @@ function fraction(rate: RateFraction | null): string {
 }
 ---
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -50,10 +50,10 @@ function fraction(rate: RateFraction | null): string {
             <td>{dimension.counts.inconclusive}</td>
             <td>{dimension.counts.unsupported}</td>
             <td>{dimension.counts.runner_errors}</td>
-            <td>{fraction(dimension.true_positive_rate)}</td>
-            <td>{fraction(dimension.false_positive_rate)}</td>
-            <td>{percentCell(dimension.template_macro.true_positive_rate_percent)}</td>
-            <td>{percentCell(dimension.template_macro.false_positive_rate_percent)}</td>
+            <td class="rate">{fraction(dimension.true_positive_rate)}</td>
+            <td class="rate">{fraction(dimension.false_positive_rate)}</td>
+            <td class="rate">{percentCell(dimension.template_macro.true_positive_rate_percent)}</td>
+            <td class="rate">{percentCell(dimension.template_macro.false_positive_rate_percent)}</td>
           </tr>
         ))
       }
@@ -65,4 +65,8 @@ function fraction(rate: RateFraction | null): string {
   .table-scroll {
     overflow-x: auto;
   }
+  /* A rate reads as one figure; its header wraps over it instead. */
+  .rate {
+    white-space: nowrap;
+  }
 </style>
diff --git a/docs/src/components/LandingResults.astro b/docs/src/components/LandingResults.astro
index df33f336f..9a8f8bb3b 100644
--- a/docs/src/components/LandingResults.astro
+++ b/docs/src/components/LandingResults.astro
@@ -469,54 +469,25 @@ const nativeDecidingAdapters = [
 const snapshotPage = `/snapshots/${snapshot.slug}`;
 ---
 
-<p class="eyebrow">
-  Immutable evaluation · DataFlowBench {snapshot.version}
-</p>
-
-{/* The subtitle the page title used to be. The h1 names the benchmark, which
-    is what a reader arriving from a citation is looking for; the motivation
-    belongs directly under it, stated rather than implied. */}
-<p class="subtitle">
-  BrokkAi's benchmark for semantic data flow: <a
-    href="https://bifrost.brokk.ai">Bifrost</a
-  > measured against {analyzerCount - 1} reference analyzers, from immutable
-  freeze evidence.
-</p>
-
-{/* Starlight's "On this page" nav is built from markdown headings and cannot
-    see the h2s this component emits, so the landing page carries its own
-    section strip. The ids it targets are permanent deep-link anchors: chosen
-    once, never renamed. */}
-<nav class="section-nav" aria-label="Sections on this page">
-  <span class="section-nav-label">On this page</span>
-  <a href="#meaning">What it means</a>
-  <a href="#landscape">Analyzer landscape</a>
-  <a href="#modeling-matrix">Modeling matrix</a>
-  <a href="#tool-native-probes">Tool-native probes</a>
-  <a href="#latency">Latency</a>
-  <a href="#kernels">Kernels</a>
-  <a href="#direct-flow">Direct-flow breadth</a>
-  <a href="#trust">Trust</a>
-</nav>
-
-{/* What the benchmark is, ahead of what this particular freeze found. These
-    two describe the dataset and the conflict of interest behind it, so they
-    belong above the verdict rather than inside it — a reader meeting the page
-    for the first time needs them before the numbers mean anything. Wrapped
-    because they are adjacent: two paragraphs each holding their own pair of
-    columns read in the wrong order (see `.prose-columns` in custom.css). */}
-<div class="prose-columns">
-<p>
-  DataFlowBench is <a href="https://github.com/BrokkAi">BrokkAi</a>'s own
-  benchmark: we build it to measure where <a
-    href="https://bifrost.brokk.ai">Bifrost</a
-  > stands against other analyzers, and to keep ourselves honest while doing
-  it. The methodology is deliberately analyzer-neutral — every number below is
-  generated from digest-bound freeze evidence that we cannot edit after the
-  fact, misses and crashes included — but the motivation is not neutral, and
-  we would rather say so.
+{/* The verdict answers the page title, so it follows it directly, across the
+    full column above the two paragraphs that frame it: how the kernels are
+    read, and who builds the benchmark and why. A reader meeting the page for
+    the first time needs both before the numbers mean anything. */}
+<p class="ds-statement verdict">
+  Nobody is perfect. No analyzer answers a whole core correctly in any of the
+  {kernels.length} languages{spotless.length === 0 ? (
+    <>, and every one of the {analyzerCount} in the field makes at least one
+    decisive mistake.</>
+  ) : (
+    <>, and of the {analyzerCount} in the field only{' '}
+    {spotless.map((tool) => tool.name).join(' and ')} makes no decisive
+    mistake at all — bought by declining{' '}
+    {spotless.reduce((sum, tool) => sum + tool.incomplete, 0)} of the{' '}
+    {coreAssertions} core assertions rather than guessing at them.</>
+  )}
 </p>
 
+<div class="ds-split lead">
 <p>
   Each kernel poses one positive and one negative assertion per semantic
   template, and each language's kernel is its own population — cores of
@@ -529,24 +500,39 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
   dialog. A blank analyzer on a kernel means no report in this freeze: no
   extractor, no frontend, or no adapter, which is coverage rather than a score.
 </p>
+<p>
+  DataFlowBench is <a href="https://slopcop.com">SlopCop</a>'s own
+  benchmark for semantic data flow: we build it to measure where <a
+    href="https://bifrost.brokk.ai">Bifrost</a
+  > stands against {analyzerCount - 1} reference analyzers, and to keep
+  ourselves honest while doing it. The methodology is deliberately
+  analyzer-neutral — every number here is generated from digest-bound freeze
+  evidence that we cannot edit after the fact, misses and crashes included —
+  but the motivation is not neutral, and we would rather say so.
+</p>
 </div>
 
-<aside class="short-answer">
-  <p class="label">Short answer</p>
-  <p class="verdict">
-    Nobody is perfect. No analyzer answers a whole core correctly in any of the
-    {kernels.length} languages{spotless.length === 0 ? (
-      <>, and every one of the {analyzerCount} in the field makes at least one
-      decisive mistake.</>
-    ) : (
-      <>, and of the {analyzerCount} in the field only{' '}
-      {spotless.map((tool) => tool.name).join(' and ')} makes no decisive
-      mistake at all — bought by declining{' '}
-      {spotless.reduce((sum, tool) => sum + tool.incomplete, 0)} of the{' '}
-      {coreAssertions} core assertions rather than guessing at them.</>
-    )}
-  </p>
-  <div class="supporting">
+{/* Starlight's "On this page" nav is built from markdown headings and cannot
+    see the h2s this component emits, so the landing page carries its own
+    section strip. The ids it targets are permanent deep-link anchors: chosen
+    once, never renamed. */}
+<nav class="section-nav" aria-label="Sections on this page">
+  <a class="ds-chip" href="#decisiveness">Decisiveness</a>
+  <a class="ds-chip" href="#meaning">What it means</a>
+  <a class="ds-chip" href="#landscape">Analyzer landscape</a>
+  <a class="ds-chip" href="#modeling-matrix">Modeling matrix</a>
+  <a class="ds-chip" href="#tool-native-probes">Tool-native probes</a>
+  <a class="ds-chip" href="#latency">Latency</a>
+  <a class="ds-chip" href="#kernels">Kernels</a>
+  <a class="ds-chip" href="#direct-flow">Direct-flow breadth</a>
+  <a class="ds-chip" href="#trust">Trust</a>
+</nav>
+
+{/* What this freeze adds, beside what it contains: the release's figures sit
+    next to the paragraphs on a wide screen and under them otherwise. */}
+<h2 id="release">What {snapshot.version} contains</h2>
+<div class="ds-split release">
+  <div class="support">
   {snapshot.version === 'v0.8.0' ? (
     <p>
       This is the first freeze of the expanded recursive-composition kernels:
@@ -620,14 +606,33 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
   </p>
   <p>
     On the direct-flow breadth baseline, Bifrost answered both assertions
-    correctly in <strong>{breadthCorrect} of {breadth.length}</strong>
+    correctly in <strong>{breadthCorrect}&nbsp;of&nbsp;{breadth.length}</strong>
     languages{breadthIncomplete.length > 0
       ? ` (${breadthIncomplete.map((row) => row.language).join(', ')}: inconclusive, which is reported as coverage — not as a wrong answer).`
       : '.'}
   </p>
   </div>
-</aside>
+  <dl class="ds-figures" data-cols="4" aria-label={`DataFlowBench ${snapshot.version} in figures`}>
+    <div>
+      <dt>Frozen case results, across three populations</dt>
+      <dd>{caseCount.toLocaleString('en-US')}</dd>
+    </div>
+    <div>
+      <dt>Kernel languages, {templateSizes} templates each</dt>
+      <dd>{kernels.length}</dd>
+    </div>
+    <div>
+      <dt>Languages in the direct-flow breadth baseline</dt>
+      <dd>{breadth.length}</dd>
+    </div>
+    <div>
+      <dt>Immutable evidence release</dt>
+      <dd>{snapshot.version}</dd>
+    </div>
+  </dl>
+</div>
 
+<h2 id="decisiveness">How decisive, and how correct</h2>
 <DecisionLandscape />
 
 <dialog id="kernel-dialog" aria-labelledby="kernel-dialog-title">
@@ -873,25 +878,6 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
 </p>
 </div>
 
-<div class="tile-grid">
-  <div class="tile">
-    <p class="big">{caseCount}</p>
-    <p class="caption">frozen case results, across three populations</p>
-  </div>
-  <div class="tile">
-    <p class="big">{breadth.length}</p>
-    <p class="caption">languages in the breadth baseline</p>
-  </div>
-  <div class="tile">
-    <p class="big">{kernels.length}</p>
-    <p class="caption">kernel languages ({templateSizes} templates each)</p>
-  </div>
-  <div class="tile">
-    <p class="big">{snapshot.version}</p>
-    <p class="caption">immutable evidence release</p>
-  </div>
-</div>
-
 <AnalyzerLandscape />
 
 <h2 id="modeling-matrix">Modeling matrix — is the model surface load-bearing?</h2>
@@ -915,16 +901,12 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     <div class:list={['summary-card', card.colorClass]}>
       <p class="card-title">
         <span class="vendor-dot" aria-hidden="true"></span>
-        {card.name} <span class="card-version">{card.toolVersion}</span>
+        <span class="card-name">{card.name}</span>
+        <span class="card-version">{card.toolVersion}</span>
       </p>
       {card.rows.map((row) => (
         <div class="tier-row">
-          <p class="tier-head">
-            <code>{row.language}</code>
-            <span class="tier-scored">
-              {row.scored} scored · {row.unsupported} declined of {row.total}
-            </span>
-          </p>
+          <span class="tier-lang">{row.language}</span>
           <div
             class="bar"
             role="img"
@@ -943,9 +925,14 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
               class="seg declined"
               style={`width:${barWidth(row.unsupported, row.total)}`}></span>
           </div>
-          <p class="tier-verdict">
-            {tierVerdict(row)}
-            {row.inconclusive > 0 ? ` · ${row.inconclusive} inconclusive` : ''}
+          <p class="tier-meta">
+            <span class="tier-verdict">
+              {tierVerdict(row)}
+              {row.inconclusive > 0 ? ` · ${row.inconclusive} inconclusive` : ''}
+            </span>
+            <span class="tier-scored">
+              {row.scored} scored · {row.unsupported} declined of {row.total}
+            </span>
           </p>
         </div>
       ))}
@@ -996,16 +983,12 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     <div class:list={['summary-card', card.colorClass]}>
       <p class="card-title">
         <span class="vendor-dot" aria-hidden="true"></span>
-        {card.name} <span class="card-version">{card.toolVersion}</span>
+        <span class="card-name">{card.name}</span>
+        <span class="card-version">{card.toolVersion}</span>
       </p>
       {card.rows.map((row) => (
         <div class="tier-row">
-          <p class="tier-head">
-            <code>{row.language}</code>
-            <span class="tier-scored">
-              {row.scored} scored · {row.unsupported} declined of {row.total}
-            </span>
-          </p>
+          <span class="tier-lang">{row.language}</span>
           <div
             class="bar"
             role="img"
@@ -1024,10 +1007,15 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
               class="seg declined"
               style={`width:${barWidth(row.unsupported, row.total)}`}></span>
           </div>
-          <p class="tier-verdict">
-            {tierVerdict(row)}
-            {row.falsePositives > 0 ? ` · ${row.falsePositives} FP` : ''}
-            {row.falseNegatives > 0 ? ` · ${row.falseNegatives} FN` : ''}
+          <p class="tier-meta">
+            <span class="tier-verdict">
+              {tierVerdict(row)}
+              {row.falsePositives > 0 ? ` · ${row.falsePositives} FP` : ''}
+              {row.falseNegatives > 0 ? ` · ${row.falseNegatives} FN` : ''}
+            </span>
+            <span class="tier-scored">
+              {row.scored} scored · {row.unsupported} declined of {row.total}
+            </span>
           </p>
         </div>
       ))}
@@ -1100,10 +1088,20 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
 <div class="kernel-bars">
   {kernels.map((kernel) => (
     <div class="summary-card kernel-panel">
-      <p class="card-title">
-        {kernel.language}
-        <span class="card-version">{kernel.cases} assertions</span>
-      </p>
+      <div class="kernel-head">
+        <p class="card-title">
+          <span class="card-name">{kernel.language}</span>
+          <span class="card-version">{kernel.cases} assertions</span>
+        </p>
+        <button
+          type="button"
+          class="details-button ds-button"
+          data-kernel={kernel.id}
+          aria-label={`View the confusion matrix for the ${kernel.language} kernel`}
+        >
+          Confusion matrix
+        </button>
+      </div>
       {kernel.vendors.map((vendor, index) => (
         <div class:list={['bar-row', vendorColorClass(vendor.tool, index)]}>
           <p class="bar-name">
@@ -1128,21 +1126,11 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
               class="seg declined"
               style={`width:${barWidth(vendor.unsupported, vendor.total)}`}></span>
           </div>
-          <p class="bar-value">
+          <p class="bar-value ds-num">
             {vendor.correct}<span class="of">/{vendor.total}</span>
           </p>
         </div>
       ))}
-      <p class="card-action">
-        <button
-          type="button"
-          class="details-button"
-          data-kernel={kernel.id}
-          aria-label={`View the confusion matrix for the ${kernel.language} kernel`}
-        >
-          Confusion matrix
-        </button>
-      </p>
     </div>
   ))}
 </div>
@@ -1242,11 +1230,13 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     width: min(64rem, calc(100vw - 2rem));
     max-height: calc(100vh - 4rem);
     overflow-y: auto;
-    border: 1px solid var(--sl-color-accent);
-    border-radius: 0.75rem;
-    padding: 1.25rem 1.5rem 1.5rem;
-    background: var(--sl-color-bg-sidebar);
+    border: 1px solid var(--ds-line-strong);
+    border-radius: var(--ds-cut-panel);
+    corner-shape: bevel;
+    padding: 1.5rem 1.75rem 1.75rem;
+    background: var(--ds-surface);
     color: var(--sl-color-text);
+    box-shadow: var(--ds-shadow-panel);
   }
   /* Starlight's content flow adds margin-top to every sibling block; the
      dialog lays out its own spacing. */
@@ -1254,7 +1244,7 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     margin-top: 0;
   }
   #kernel-dialog::backdrop {
-    background: rgb(0 0 0 / 0.6);
+    background: var(--sl-color-backdrop-overlay);
   }
   #kernel-dialog .dialog-head {
     display: flex;
@@ -1263,39 +1253,48 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     gap: 1rem;
   }
   #kernel-dialog .label {
-    font-family: var(--__sl-font-mono);
     font-size: var(--sl-text-xs);
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    color: var(--sl-color-accent-high);
+    font-weight: 500;
+    color: var(--ds-text-3);
     margin: 0;
   }
   #kernel-dialog h2 {
     font-size: var(--sl-text-2xl);
-    line-height: 1.2;
-    margin: 0.25rem 0 0;
-    color: var(--sl-color-white);
+    font-weight: 500;
+    letter-spacing: -0.03em;
+    line-height: 1.15;
+    margin: 0.3rem 0 0;
+    color: var(--ds-text);
     border: 0;
     padding: 0;
   }
   #kernel-dialog .caption {
     font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-3);
-    margin: 0.25rem 0 0;
+    color: var(--ds-text-3);
+    margin: 0.3rem 0 0;
   }
   #kernel-dialog .dialog-close {
     flex: 0 0 auto;
-    font-size: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    font-size: 1.25rem;
     line-height: 1;
-    padding: 0.25rem 0.6rem;
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.5rem;
-    background: transparent;
-    color: var(--sl-color-text);
+    border: 1px solid var(--ds-line-strong);
+    border-radius: var(--ds-cut-chip);
+    corner-shape: bevel;
+    background: var(--ds-control);
+    color: var(--ds-text-2);
     cursor: pointer;
+    transition:
+      border-color var(--ds-duration) ease,
+      color var(--ds-duration) ease;
   }
   #kernel-dialog .dialog-close:hover {
-    background: var(--sl-color-gray-6);
+    border-color: var(--ds-accent-line);
+    color: var(--ds-text);
   }
   /* A grid rather than a wrapping flex row: with four analyzers the leftover
      panel on the second row keeps its column width instead of stretching to
@@ -1304,57 +1303,78 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
     gap: 1rem;
-    margin-top: 1.25rem;
+    margin-top: 1.5rem;
   }
   #kernel-dialog .panel {
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.75rem;
-    padding: 0.75rem 1rem 1rem;
+    border: 1px solid var(--ds-line);
+    border-radius: var(--ds-cut-control);
+    corner-shape: bevel;
+    background: var(--ds-canvas);
+    padding: 1rem 1.1rem 1.1rem;
+  }
+  #kernel-dialog .panel-head {
+    padding-bottom: 0.6rem;
+    border-bottom: 1px solid var(--ds-line-soft);
   }
   #kernel-dialog .panel .who {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    font-size: var(--sl-text-base);
+    font-weight: 500;
+    letter-spacing: -0.01em;
     margin: 0;
-    color: var(--vendor-color, var(--sl-color-accent-high));
-    border-top: 3px solid var(--vendor-color, var(--sl-color-accent));
-    padding-top: 0.25rem;
+    color: var(--ds-text);
+  }
+  #kernel-dialog .panel .who::before {
+    content: '';
+    flex: none;
+    width: 0.55rem;
+    height: 0.55rem;
+    border-radius: 50%;
+    background: var(--vendor-rule, var(--ds-accent));
+  }
+  #kernel-dialog .panel-head .caption {
+    font-family: var(--ds-font-mono);
+    font-size: var(--sl-text-2xs);
   }
   #kernel-dialog .matrix {
     width: 100%;
-    margin: 0.75rem 0 0;
+    margin: 0.85rem 0 0;
     border-collapse: collapse;
     font-size: var(--sl-text-sm);
   }
   #kernel-dialog .matrix th {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
+    font-family: var(--ds-font-mono);
+    font-size: var(--sl-text-2xs);
     font-weight: 400;
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
     text-align: left;
     padding: 0.25rem 0.4rem;
     border: 0;
     background: transparent;
   }
   #kernel-dialog .matrix td {
-    border: 1px solid var(--sl-color-hairline);
-    padding: 0.4rem 0.5rem;
+    border: 1px solid var(--ds-line);
+    padding: 0.45rem 0.55rem;
     text-align: left;
+    background: transparent;
   }
   #kernel-dialog .matrix .matrix-corner {
     border: 0;
   }
   #kernel-dialog .matrix-count {
-    font-size: 1.5rem;
-    font-weight: 700;
+    font-family: var(--ds-font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: 1.375rem;
+    font-weight: 500;
     line-height: 1.1;
     margin-right: 0.35rem;
   }
   #kernel-dialog .matrix-tag {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
-    color: var(--sl-color-gray-3);
+    font-family: var(--ds-font-mono);
+    font-size: var(--sl-text-2xs);
+    color: var(--ds-text-3);
   }
   #kernel-dialog .matrix-cell.good .matrix-count {
     color: var(--sl-color-green-high);
@@ -1364,34 +1384,32 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
   }
   #kernel-dialog .rates {
     display: flex;
-    gap: 1.5rem;
-    margin-top: 0.75rem;
+    gap: 1.75rem;
+    margin-top: 0.85rem;
   }
   #kernel-dialog .rate-label {
-    font-family: var(--__sl-font-mono);
     font-size: var(--sl-text-xs);
-    letter-spacing: 0.1em;
-    color: var(--sl-color-gray-3);
+    font-weight: 500;
+    color: var(--ds-text-3);
     margin: 0;
   }
   #kernel-dialog .rate-value {
-    font-size: 1.25rem;
-    font-weight: 700;
+    font-family: var(--ds-font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: 1.2rem;
+    font-weight: 500;
     margin: 0;
-    color: var(--vendor-color, var(--sl-color-accent-high));
+    color: var(--vendor-color, var(--ds-accent-text));
   }
   #kernel-dialog .coverage {
-    margin-top: 0.75rem;
-    border: 1px dashed var(--sl-color-orange);
-    border-radius: 0.5rem;
-    padding: 0.5rem 0.75rem;
-    background: var(--sl-color-bg);
+    margin-top: 0.85rem;
+    border: 1px dashed var(--ds-line-strong);
+    padding: 0.55rem 0.75rem;
+    background: transparent;
   }
   #kernel-dialog .coverage-label {
-    font-family: var(--__sl-font-mono);
     font-size: var(--sl-text-xs);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+    font-weight: 500;
     color: var(--sl-color-orange-high);
     margin: 0;
   }
@@ -1407,21 +1425,24 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     margin: 0;
   }
   #kernel-dialog .coverage-count {
-    font-weight: 700;
-    margin-right: 0.25rem;
+    font-family: var(--ds-font-mono);
+    font-weight: 500;
+    color: var(--ds-text);
+    margin-right: 0.3rem;
   }
   #kernel-dialog .coverage-name {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
-    color: var(--sl-color-gray-3);
+    font-family: var(--ds-font-mono);
+    font-size: var(--sl-text-2xs);
+    color: var(--ds-text-3);
   }
   #kernel-dialog .scorecard {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
+    font-family: var(--ds-font-mono);
+    font-size: var(--sl-text-2xs);
     overflow-wrap: anywhere;
   }
   #kernel-dialog .dialog-foot {
-    margin-top: 1rem;
+    margin-top: 1.25rem;
+    max-width: 48rem;
   }
   #kernel-dialog .v0 {
     --vendor-color: var(--sl-color-accent-high);
@@ -1456,330 +1477,59 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     --vendor-color: var(--dfb-vendor-7);
     --vendor-rule: var(--dfb-vendor-7);
   }
-  #kernel-dialog .panel .who {
-    border-top-color: var(--vendor-rule, var(--sl-color-accent));
-  }
 </style>
 
 <style>
-  .eyebrow {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    color: var(--sl-color-accent-high);
+  /* ---- Opening ------------------------------------------------------------
+     The verdict answers the page title, so it follows it directly, across the
+     full column above the two paragraphs it introduces. */
+  .verdict {
+    margin-top: 0 !important;
+    max-width: none;
+  }
+  .lead {
+    margin-top: var(--ds-space-lg) !important;
   }
   /* The section strip: this page's stand-in for the "On this page" nav its
-     component-emitted headings cannot feed. Pills wrap on narrow screens, so
+     component-emitted headings cannot feed. Chips wrap on narrow screens, so
      every section stays one tap away on mobile. */
   .section-nav {
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
-    gap: 0.4rem 0.5rem;
-    margin-top: 0.75rem;
-  }
-  .section-nav-label {
-    margin-right: 0.2rem;
-    font-size: var(--sl-text-sm);
-    font-weight: 600;
-    color: var(--sl-color-gray-2);
-    white-space: nowrap;
+    gap: var(--ds-space-xs);
+    margin-top: var(--ds-space-xl) !important;
   }
-  .section-nav a {
+  .section-nav .ds-chip {
+    min-height: 2rem;
+    padding-inline: 0.7rem;
     font-size: var(--sl-text-xs);
-    line-height: 1;
-    padding: 0.45rem 0.7rem;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 999px;
-    background: var(--sl-color-bg-sidebar);
-    color: var(--sl-color-gray-2);
-    text-decoration: none;
-    white-space: nowrap;
-  }
-  .section-nav a:hover,
-  .section-nav a:focus-visible {
-    border-color: var(--sl-color-accent);
-    color: var(--sl-color-white);
   }
   /* Anchor targets land clear of the sticky site header. */
   h2[id] {
     scroll-margin-top: calc(var(--sl-nav-height, 4rem) + 1rem);
   }
-  .subtitle {
-    font-size: var(--sl-text-lg);
-    line-height: 1.5;
-    color: var(--sl-color-gray-2);
-    margin: 0 0 1.5rem;
-    max-width: none;
-  }
-  .short-answer {
-    border: 1px solid var(--sl-color-accent);
-    border-radius: 0.75rem;
-    padding: 1.25rem 1.75rem;
-    background: var(--sl-color-bg-sidebar);
-  }
-  /* The verdict is the densest prose on the page, and it used to break out of
-     the 45rem content column on its own. The column is now wide on desktop
-     (see `--sl-content-width` in custom.css), so the card simply fills it —
-     and the width buys two columns for the supporting paragraphs instead of
-     one very long line. The verdict itself stays at the prose measure and
-     spans both, so the reader meets it as a single headline block; document
-     order, and so reading order, is unchanged. */
-  @media (min-width: 72rem) {
-    /* Continuous two-column flow, not an aligned grid: grid rows sized by the
-       taller paragraph of each pair left conspicuous gaps under the shorter
-       one, which read as layout rather than prose. Multicol lets the text
-       flow like a newspaper column instead. The verdict paragraphs span the
-       full card above it. */
-    .short-answer > .verdict {
-      max-width: 72rem;
-    }
-    .short-answer > .supporting {
-      columns: 2;
-      column-gap: 2.5rem;
-      margin-top: 1rem;
-    }
-    .short-answer > .supporting > p {
-      max-width: none;
-      margin-block: 0 1rem;
-    }
-  }
-  .short-answer .label,
-  .stat-card .label {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    color: var(--sl-color-accent-high);
-    margin: 0;
-  }
-  .short-answer .verdict {
-    font-size: var(--sl-text-xl);
-    font-weight: 700;
-    line-height: 1.3;
-    margin: 0.5rem 0;
-    color: var(--sl-color-white);
-  }
-  .stat-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
-  }
-  .stat-card {
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.75rem;
-    padding: 1rem 1.25rem;
-  }
-  /* Starlight's content flow adds margin-top to sibling blocks, which
-     offsets every grid item after the first. */
-  .stat-grid > .stat-card,
-  .tile-grid > .tile,
-  .tile p,
-  .stat-card > .label,
-  .stat-card > .caption,
-  .stat-card > .card-action {
-    margin-top: 0 !important;
-  }
-  /* The whole card is the button: the label stretches over the card, so a
-     click anywhere activates it while the markup stays a real <button>. */
-  .kernel-card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-  .kernel-card .card-action {
-    margin-top: auto;
-    padding-top: 0.75rem;
-  }
-  .details-button {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--sl-color-accent-high);
-    background: transparent;
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.5rem;
-    padding: 0.3rem 0.7rem;
-    cursor: pointer;
-  }
-  .details-button::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: 0.75rem;
-  }
-  .kernel-card:hover {
-    border-color: var(--sl-color-accent);
-  }
-  .kernel-card:hover .details-button {
-    border-color: var(--sl-color-accent);
-  }
-  .kernel-card:has(.details-button:focus-visible) {
-    outline: 2px solid var(--sl-color-accent-high);
-    outline-offset: 2px;
-  }
-  .details-button:focus-visible {
-    outline: 2px solid var(--sl-color-accent-high);
-    outline-offset: 2px;
-  }
-  .kernel-card:has(.details-button:focus-visible) .details-button {
-    outline: none;
-  }
-  .stat-pair {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: 0.75rem 2rem;
-    margin: 0.5rem 0;
-  }
-  .stat-pair > div {
-    flex: 0 0 auto;
-    /* Starlight's content flow adds margin-top to sibling blocks. */
-    margin-top: 0 !important;
-  }
-  .stat-pair p {
-    margin-top: 0 !important;
-  }
-  .who {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    margin: 0;
-    color: var(--vendor-color, var(--sl-color-accent-high));
-    border-top: 3px solid var(--vendor-rule, var(--sl-color-accent));
-    padding-top: 0.25rem;
-  }
-  .big {
-    font-size: 2.25rem;
-    font-weight: 700;
-    line-height: 1.1;
-    margin: 0;
-    color: var(--vendor-color, var(--sl-color-accent-high));
-  }
-  /* Three or more analyzers per language: shrink so the row still fits the
-     card without the numbers wrapping mid-fraction. */
-  .stat-card.many .stat-pair {
-    gap: 0.75rem 1.25rem;
-  }
-  .stat-card.many .big {
-    font-size: 1.75rem;
-  }
-  /* Four analyzers on one card: two columns of two rather than a squeezed
-     single row. */
-  .stat-card.dense .stat-pair {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0.75rem 1rem;
-  }
-  .stat-card.dense .big {
-    font-size: 1.5rem;
-  }
-  .decided {
-    font-size: var(--sl-text-xs);
-    font-family: var(--__sl-font-mono);
-    color: var(--sl-color-gray-3);
-    margin: 0.1rem 0 0 !important;
-  }
-  .vendor.v0 {
-    --vendor-color: var(--sl-color-accent-high);
-    --vendor-rule: var(--sl-color-accent);
-  }
-  .vendor.v1 {
-    --vendor-color: var(--sl-color-orange);
-    --vendor-rule: var(--sl-color-orange);
-  }
-  .vendor.v2 {
-    --vendor-color: var(--sl-color-purple);
-    --vendor-rule: var(--sl-color-purple);
-  }
-  .vendor.v3 {
-    --vendor-color: var(--sl-color-green);
-    --vendor-rule: var(--sl-color-green);
-  }
-  /* Slots added in v0.6.0. The four above are untouched. */
-  .vendor.v4 {
-    --vendor-color: var(--dfb-vendor-4);
-    --vendor-rule: var(--dfb-vendor-4);
-  }
-  .vendor.v5 {
-    --vendor-color: var(--dfb-vendor-5);
-    --vendor-rule: var(--dfb-vendor-5);
-  }
-  .vendor.v6 {
-    --vendor-color: var(--dfb-vendor-6);
-    --vendor-rule: var(--dfb-vendor-6);
-  }
-  .vendor.v7 {
-    --vendor-color: var(--dfb-vendor-7);
-    --vendor-rule: var(--dfb-vendor-7);
-  }
-  /* Same fixed vendor→colour mapping as the cards and the dialog, keyed by
-     tool identity rather than row position, so a vendor keeps its colour
-     across the kernel, modeling, and tool-native sections. */
-  .vendor-dot {
-    display: inline-block;
-    width: 0.55rem;
-    height: 0.55rem;
-    border-radius: 50%;
-    margin-right: 0.4rem;
-    vertical-align: baseline;
-    background: var(--vendor-rule, var(--sl-color-accent));
-  }
-  .vendor-dot.v0 {
-    --vendor-rule: var(--sl-color-accent);
-  }
-  .vendor-dot.v1 {
-    --vendor-rule: var(--sl-color-orange);
-  }
-  .vendor-dot.v2 {
-    --vendor-rule: var(--sl-color-purple);
-  }
-  .vendor-dot.v3 {
-    --vendor-rule: var(--sl-color-green);
-  }
-  /* Slots added in v0.6.0. The four above are untouched. */
-  .vendor-dot.v4 {
-    --vendor-rule: var(--dfb-vendor-4);
-  }
-  .vendor-dot.v5 {
-    --vendor-rule: var(--dfb-vendor-5);
-  }
-  .vendor-dot.v6 {
-    --vendor-rule: var(--dfb-vendor-6);
-  }
-  .vendor-dot.v7 {
-    --vendor-rule: var(--dfb-vendor-7);
-  }
-  .big .of {
-    font-size: 1.1rem;
-    color: var(--sl-color-gray-3);
-  }
-  .tile-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
-  }
-  .tile {
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.75rem;
-    padding: 0.75rem 1rem;
+
+  .support > :first-child {
+    margin-top: 0;
   }
-  .tile .big {
-    font-size: 1.75rem;
+  /* Stacked, the figures follow the paragraphs with room to breathe; side by
+     side, the split sets the gap. */
+  .release > .ds-figures {
+    margin-top: var(--ds-space-lg);
   }
+
+  /* ---- Captions and notes --------------------------------------------------- */
   .caption {
     font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
     margin: 0.25rem 0 0;
   }
-  .table-scroll {
-    overflow-x: auto;
+  .takeaway {
+    font-size: var(--sl-text-sm);
+    line-height: 1.6;
+    color: var(--ds-text-3);
   }
+
   /* ---- Compact population summaries -------------------------------------
      One idiom shared by the kernel panels, the modeling cards and the
      tool-native cards: a segmented bar whose segments are always correct,
@@ -1787,25 +1537,27 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
      denominator. No bar ever spans two populations. */
   .card-grid {
     display: grid;
-    /* 15rem rather than 17rem: at the narrow widths the track count is the
-       same (two up at 45rem, one on a phone), and at the wide desktop column
-       it is the difference between three cards and an orphan and a single row
-       of four. These cards stack their bars full-width, so a narrower track
-       costs the bar nothing. */
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
+    /* 17rem: wide enough that a tier's two caption lines never wrap, which at
+       the desktop column gives four cards a row — and so rows of cards that
+       hold the same number of tiers. */
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
+    gap: var(--ds-space-sm);
+    margin-top: var(--ds-space-lg);
   }
   .kernel-bars {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
+    /* 22rem: three panels a row on the desktop column, so the bars — the
+       point of the panel — get a readable length beside their labels. */
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
+    gap: var(--ds-space-sm);
+    margin-top: var(--ds-space-lg);
   }
   .summary-card {
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.75rem;
-    padding: 0.75rem 1rem 0.85rem;
+    border: 1px solid var(--ds-line);
+    border-radius: var(--ds-cut-control);
+    corner-shape: bevel;
+    padding: var(--ds-space-md) var(--ds-card-pad) var(--ds-card-pad);
+    background: var(--ds-surface);
   }
   /* Starlight's content flow adds margin-top to every sibling block, which
      would stagger the grid items and every line inside a card. */
@@ -1822,45 +1574,86 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     position: relative;
     display: flex;
     flex-direction: column;
+    transition: border-color var(--ds-duration) ease;
+  }
+  /* The panel's action sits in its head, beside the name it acts on, so a
+     panel with few analyzers ends where its rows do. */
+  .kernel-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--ds-space-sm);
+    margin: 0 0 var(--ds-space-xs) !important;
   }
-  .kernel-panel .card-action {
-    margin-top: auto !important;
-    padding-top: 0.6rem;
+  .kernel-head .card-title {
+    margin: 0 !important;
+  }
+  .kernel-head .details-button {
+    flex: none;
+    min-height: 1.875rem;
+    padding-inline: 0.65rem;
+    font-size: var(--sl-text-xs);
+  }
+  .details-button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
   }
   .kernel-panel:hover {
-    border-color: var(--sl-color-accent);
+    border-color: var(--ds-accent-line);
   }
   .kernel-panel:hover .details-button {
-    border-color: var(--sl-color-accent);
+    border-color: var(--ds-accent);
+    color: var(--ds-text);
   }
   .kernel-panel:has(.details-button:focus-visible) {
-    outline: 2px solid var(--sl-color-accent-high);
-    outline-offset: 2px;
+    outline: 2px solid var(--ds-accent);
+    outline-offset: 3px;
   }
   .kernel-panel:has(.details-button:focus-visible) .details-button {
     outline: none;
   }
+  /* The card head: its name, and under it one line of identity — a version,
+     a size — in the column the name starts in, whatever marks sit before it.
+     Spacing, not a rule, separates it from the body. */
   .card-title {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--vendor-color, var(--sl-color-accent-high));
-    border-top: 3px solid var(--vendor-rule, var(--sl-color-accent));
-    padding-top: 0.3rem;
-    margin: 0 0 0.5rem !important;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    gap: var(--ds-space-2xs) var(--ds-space-xs);
+    margin: 0 0 var(--ds-space-sm) !important;
+  }
+  .card-title:has(.vendor-dot) {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+  .card-title:has(.vendor-dot) .card-version {
+    grid-column: 2;
+  }
+  .card-name {
+    font-size: var(--sl-text-base);
+    font-weight: 500;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+    color: var(--ds-text);
   }
   .card-version {
-    color: var(--sl-color-gray-3);
-    text-transform: none;
-    letter-spacing: 0;
+    overflow: hidden;
+    font-family: var(--ds-font-mono);
+    font-size: var(--sl-text-2xs);
+    line-height: 1.4;
+    color: var(--ds-text-3);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .card-title .vendor-dot {
+    margin-right: 0;
   }
   .bar {
     display: flex;
-    height: 0.55rem;
-    border-radius: 0.3rem;
+    height: 0.5rem;
     overflow: hidden;
-    background: var(--sl-color-gray-6, var(--sl-color-hairline));
+    background: var(--ds-control);
+    box-shadow: inset 0 0 0 1px var(--ds-line-soft);
   }
   .bar .seg {
     display: block;
@@ -1887,77 +1680,102 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
   .bar .seg.declined {
     background: repeating-linear-gradient(
       45deg,
-      var(--sl-color-gray-4) 0 3px,
-      transparent 3px 6px
+      var(--sl-color-gray-4) 0 2px,
+      transparent 2px 5px
     );
   }
   .bar-row {
     display: grid;
-    grid-template-columns: minmax(4.5rem, auto) 1fr auto;
+    grid-template-columns: 6.25rem minmax(0, 1fr) 3.5rem;
     align-items: center;
-    gap: 0.5rem;
-    margin: 0.3rem 0 0 !important;
+    gap: var(--ds-space-sm);
+    padding-block: 0.3rem;
+    margin: 0 !important;
   }
   .bar-name,
   .bar-value {
-    font-family: var(--__sl-font-mono);
-    font-size: var(--sl-text-xs);
+    font-size: var(--sl-text-sm);
     margin: 0 !important;
     white-space: nowrap;
   }
   .bar-name {
-    color: var(--sl-color-gray-2);
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--ds-text-2);
+  }
+  .bar-name .vendor-dot {
+    margin: 0;
   }
   .bar-value {
-    color: var(--vendor-color, var(--sl-color-accent-high));
-    font-weight: 700;
+    text-align: right;
+    font-size: var(--sl-text-xs);
+    font-weight: 600;
+    color: var(--vendor-color, var(--ds-accent-text));
   }
   .bar-value .of {
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
     font-weight: 400;
   }
+
+  /* A tier row stacks its language, its bar and what the bar says, so the bar
+     gets the card's full width even four cards to a row. */
   .tier-row {
-    margin-top: 0.6rem !important;
+    display: grid;
+    gap: var(--ds-space-xs);
+    margin: 0 !important;
+  }
+  .tier-row + .tier-row {
+    margin-top: var(--ds-space-md) !important;
   }
-  .tier-head {
+  .tier-lang {
+    font-family: var(--ds-font-mono);
+    font-size: var(--sl-text-2xs);
+    color: var(--ds-text-2);
+  }
+  .tier-meta {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 0.25rem 0.75rem;
+    flex-direction: column;
+    gap: 0.15rem;
+    margin: 0 !important;
     font-size: var(--sl-text-xs);
-    margin: 0 0 0.25rem !important;
-  }
-  .tier-scored {
-    font-family: var(--__sl-font-mono);
-    color: var(--sl-color-gray-3);
+    line-height: 1.4;
   }
   .tier-verdict {
-    font-size: var(--sl-text-xs);
-    color: var(--sl-color-gray-2);
-    margin: 0.25rem 0 0 !important;
+    color: var(--ds-text-2);
+  }
+  .tier-scored {
+    font-family: var(--ds-font-mono);
+    font-size: var(--sl-text-2xs);
+    color: var(--ds-text-3);
   }
+
   .bar-legend {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
-    gap: 0.35rem 1.25rem;
-    margin: 0.75rem 0 0;
+    gap: 0.4rem 1.5rem;
+    margin: 1rem 0 0;
     padding: 0;
-    font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-2);
+    font-size: var(--sl-text-xs);
+    color: var(--ds-text-3);
   }
+  /* Inline flow, not flex: as flex items, the longer keys' code terms each
+     shrank to their own narrow box on a phone and broke mid-word. The hanging
+     indent keeps a wrapped key's second line clear of its swatch. */
   .bar-legend li {
     margin: 0;
-    display: flex;
-    align-items: center;
+    padding-left: 1.45rem;
+    text-indent: -1.45rem;
   }
   .bar-legend .swatch {
     display: inline-block;
-    width: 1.1rem;
-    height: 0.55rem;
-    border-radius: 0.2rem;
+    width: 1rem;
+    height: 0.5rem;
     margin-right: 0.45rem;
-    flex: 0 0 auto;
+    vertical-align: 0.05em;
   }
   .bar-legend .key-correct .swatch {
     background: var(--sl-color-green);
@@ -1971,49 +1789,57 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
   .bar-legend .key-declined .swatch {
     background: repeating-linear-gradient(
       45deg,
-      var(--sl-color-gray-4) 0 3px,
-      transparent 3px 6px
+      var(--sl-color-gray-4) 0 2px,
+      transparent 2px 5px
     );
+    box-shadow: inset 0 0 0 1px var(--ds-line-soft);
   }
-  .takeaway {
-    font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-2);
-  }
+
   .breadth-strip {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
-    margin: 1rem 0 0;
+    margin: 1.25rem 0 0;
     padding: 0;
   }
   .breadth-chip {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.5rem;
-    padding: 0.25rem 0.55rem;
+    gap: 0.6rem;
+    min-height: 2.25rem;
+    border: 1px solid var(--ds-line-strong);
+    border-radius: var(--ds-cut-lead) var(--ds-cut-chip) var(--ds-cut-chip)
+      var(--ds-cut-chip);
+    corner-shape: bevel;
+    background: var(--ds-control);
+    padding: 0 0.7rem;
     font-size: var(--sl-text-xs);
   }
+  .breadth-language {
+    font-family: var(--ds-font-mono);
+    font-size: var(--sl-text-2xs);
+    color: var(--ds-text-2);
+  }
+  /* The chip's edge says the pair's verdict; the marks say each assertion's. */
   .breadth-chip.ok {
-    border-color: var(--sl-color-green);
+    border-color: color-mix(in srgb, var(--sl-color-green) 55%, var(--ds-line));
   }
   .breadth-chip.partial {
-    border-color: var(--sl-color-orange);
+    border-color: color-mix(in srgb, var(--sl-color-orange) 60%, var(--ds-line));
   }
   .breadth-chip.miss {
-    border-color: var(--sl-color-red);
+    border-color: color-mix(in srgb, var(--sl-color-red) 60%, var(--ds-line));
   }
   .breadth-marks {
     display: inline-flex;
-    gap: 0.2rem;
+    gap: 0.25rem;
   }
   .breadth-marks .mark {
     display: inline-block;
     width: 0.5rem;
     height: 0.5rem;
-    border-radius: 0.15rem;
+    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
   }
   .breadth-marks .mark.good {
     background: var(--sl-color-green);
@@ -2024,8 +1850,20 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
   .breadth-marks .mark.incomplete {
     background: var(--sl-color-orange);
   }
-  /* The same fixed vendor→colour identity map as the cards, the dialog and the
-     evolution graph, keyed by tool rather than by row position. */
+
+  /* Same fixed vendor→colour mapping as the cards and the dialog, keyed by
+     tool identity rather than row position, so a vendor keeps its colour
+     across the kernel, modeling, and tool-native sections. */
+  .vendor-dot {
+    display: inline-block;
+    flex: none;
+    width: 0.55rem;
+    height: 0.55rem;
+    border-radius: 50%;
+    margin-right: 0.4rem;
+    vertical-align: baseline;
+    background: var(--vendor-rule, var(--ds-accent));
+  }
   .summary-card.v0,
   .bar-row.v0 {
     --vendor-color: var(--sl-color-accent-high);
@@ -2046,6 +1884,7 @@ const snapshotPage = `/snapshots/${snapshot.slug}`;
     --vendor-color: var(--sl-color-green);
     --vendor-rule: var(--sl-color-green);
   }
+  /* Slots added in v0.6.0. The four above are untouched. */
   .summary-card.v4,
   .bar-row.v4 {
     --vendor-color: var(--dfb-vendor-4);
diff --git a/docs/src/components/LanguageMatrix.astro b/docs/src/components/LanguageMatrix.astro
index 24a6adde7..7d709f5b8 100644
--- a/docs/src/components/LanguageMatrix.astro
+++ b/docs/src/components/LanguageMatrix.astro
@@ -50,7 +50,7 @@ rows.sort(
 );
 ---
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -72,18 +72,18 @@ rows.sort(
             <td>
               <code>{row.language}</code>
             </td>
-            <td>
+            <td class="scorecard">
               <code>{row.scorecard}</code>
             </td>
             <td>
               <code>{row.profile}</code>
             </td>
             <td>{row.tier}</td>
-            <td>{row.total}</td>
-            <td>{row.definitive}</td>
-            <td>{row.incomplete}</td>
-            <td>{row.scored ? percentCell(row.tpr) : 'not scored'}</td>
-            <td>{row.scored ? percentCell(row.fpr) : 'not scored'}</td>
+            <td class="num">{row.total}</td>
+            <td class="num">{row.definitive}</td>
+            <td class="num">{row.incomplete}</td>
+            <td class="num">{row.scored ? percentCell(row.tpr) : 'not scored'}</td>
+            <td class="num">{row.scored ? percentCell(row.fpr) : 'not scored'}</td>
           </tr>
         ))
       }
@@ -95,4 +95,14 @@ rows.sort(
   .table-scroll {
     overflow-x: auto;
   }
+  /* A scorecard id wraps at its hyphens, two or three lines to the id; below
+     that the matrix pans instead of stacking one word per line. */
+  .scorecard {
+    min-width: 13rem;
+  }
+  /* A count or a rate — or "not scored" in its place — reads as one figure;
+     its header wraps over it instead. */
+  .num {
+    white-space: nowrap;
+  }
 </style>
diff --git a/docs/src/components/LatencyRanking.astro b/docs/src/components/LatencyRanking.astro
index e93fe6ca8..35f36d0fe 100644
--- a/docs/src/components/LatencyRanking.astro
+++ b/docs/src/components/LatencyRanking.astro
@@ -228,12 +228,14 @@ function layout(view: (typeof ranking.views)[number]) {
     });
     y += mainRowHeight / 2;
     for (const phase of entry.phases) {
+      // A materialization phase says so on its own line rather than in a
+      // second, wider line under it; the figure notes say what it means.
       y += phaseRowHeight / 2;
       rows.push({
         kind: 'phase',
         tool: entry.tool,
-        label: phase.phase,
-        sublabel: phase.includedInAnalyzerTotal ? '' : 'materialization; excluded',
+        label: phase.includedInAnalyzerTotal ? phase.phase : `${phase.phase} · excluded`,
+        sublabel: '',
         d: phase,
         warm: null,
         estimate: null,
@@ -270,21 +272,19 @@ const panels = panelsToRender.map((view) => ({
 // that silently rots the next time a kernel is added — so they are emitted
 // from the same array the panels are, and cannot drift from it.
 //
-// The selected pill takes the accent rather than the evolution toggle's
-// `--sl-color-gray-6`: with two options a subtle fill is enough to find, and
-// in the dark theme gray-6 happens to equal the ribbon's own background, so
-// the only cue left is the label's colour. With fourteen options that is not
-// enough, and the accent reads against the ribbon in both themes.
+// Each option is a chip, and the selected one takes the accent border and
+// fill: with fourteen options, colour of the label alone is not enough to find
+// the current one.
 const toggleCss = panels
   .map(
     (panel) => `
 #${panel.radioId}:checked ~ .lat-ribbon label[for='${panel.radioId}'] {
-  background: var(--sl-color-accent-low);
-  color: var(--sl-color-white);
-  box-shadow: inset 0 0 0 1px var(--sl-color-accent);
+  border-color: var(--ds-accent);
+  background: var(--ds-accent-low);
+  color: var(--ds-text);
 }
 #${panel.radioId}:focus-visible ~ .lat-ribbon label[for='${panel.radioId}'] {
-  outline: 2px solid var(--sl-color-accent-high);
+  outline: 2px solid var(--ds-accent);
   outline-offset: 2px;
 }
 #${panel.radioId}:checked ~ .lat-panels > #${panel.panelId} {
@@ -338,7 +338,7 @@ const belowThreshold = overheadPublished.filter(
   {kernelViews && (
     <div class="lat-ribbon" role="group" aria-label="Latency ranking view">
       {panels.map((panel) => (
-        <label for={panel.radioId}>{panel.view.label}</label>
+        <label class="ds-chip" for={panel.radioId}>{panel.view.label}</label>
       ))}
     </div>
   )}
@@ -413,7 +413,7 @@ const belowThreshold = overheadPublished.filter(
               y={panel.height - padBottom + 39}
               text-anchor="middle"
             >
-              wall-clock per invocation — logarithmic scale
+              Wall-clock per invocation, logarithmic scale
             </text>
 
             {panel.rows.map((row) => {
@@ -431,7 +431,7 @@ const belowThreshold = overheadPublished.filter(
                   <text
                     class={row.kind === 'adapter' ? 'row-label' : 'phase-label'}
                     x={padLeft - 12}
-                    y={row.kind === 'adapter' ? row.y - 1 : row.y + 4}
+                    y={row.kind === 'adapter' || row.sublabel !== '' ? row.y - 1 : row.y + 4}
                     text-anchor="end"
                   >
                     {row.label}
@@ -473,7 +473,7 @@ const belowThreshold = overheadPublished.filter(
                     y={row.y - boxHeight / 2}
                     width={Math.max(1.5, x(row.d.q3) - x(row.d.q1))}
                     height={boxHeight}
-                    rx="2"
+                    
                   />
                   <line
                     class="median"
@@ -610,28 +610,29 @@ const belowThreshold = overheadPublished.filter(
     {drawsWarmMarks && (
       <li class="key-warm">
         <span class="swatch" aria-hidden="true"></span>
-        <strong>measured</strong>&nbsp;warm marginal per case — the range its
-        retained repeats span
+        <span><strong>measured</strong>&nbsp;warm marginal per case — the range
+        its retained repeats span</span>
       </li>
     )}
     {drawsEstimateMarks && (
       <li class="key-estimate">
         <span class="swatch" aria-hidden="true"></span>
-        <strong>estimated</strong>&nbsp;per-invocation overhead (trivial
+        <span><strong>estimated</strong>&nbsp;per-invocation overhead (trivial
         fixture, upper bound), drawn across the range its repeats spanned, where
         that range starts at or above{' '}
-        {Math.round(SIGNIFICANCE_SHARE * 100)}% of the row's median
+        {Math.round(SIGNIFICANCE_SHARE * 100)}% of the row's median</span>
       </li>
     )}
   </ul>
 </div>
 
 {/* The sentence directly below each chart is its caption. The longer reading
-    guidance is ordinary companion prose: title it explicitly so it does not
-    present as one enormous caption, while preserving its evidence and the
-    wrapper that gives adjacent paragraphs one coherent column flow. */}
-<section class="figure-notes" aria-labelledby={`figure-notes-${scope}`}>
-<h3 id={`figure-notes-${scope}`}>How to read this figure</h3>
+    guidance is companion prose under its own title, so it does not present as
+    one enormous caption. On the latency page it is open, since reading the
+    figure closely is what that page is for; on the landing page, where the
+    figure is one of several, it starts closed and is one click away. */}
+<details class="figure-notes" id={`figure-notes-${scope}`} open={kernelViews}>
+<summary>How to read this figure</summary>
 <div class="prose-columns">
   {warmMeasurements.length > 0 && (
     <p>
@@ -814,7 +815,7 @@ const belowThreshold = overheadPublished.filter(
     </p>
   )}
 </div>
-</section>
+</details>
 
 <style is:inline set:html={toggleCss}></style>
 
@@ -837,26 +838,20 @@ const belowThreshold = overheadPublished.filter(
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 0.25rem;
-    margin: 0 0 0.75rem;
-    padding: 0.2rem;
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.6rem;
-    background: var(--sl-color-bg-sidebar);
+    gap: 0.4rem;
+    margin: 0 0 1rem;
   }
   .lat-ribbon label {
     /* The content area's global sibling rule adds margin-top to successive
-       elements; inside the pill row that staggers the labels vertically. */
+       elements; inside the chip row that staggers the labels vertically. */
     margin: 0 !important;
+    min-height: 2rem;
+    padding-inline: 0.65rem;
+    font-size: var(--sl-text-xs);
     cursor: pointer;
-    border-radius: 0.45rem;
-    padding: 0.28rem 0.6rem;
-    font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-2);
-    line-height: 1.3;
   }
-  .lat-ribbon label:hover {
-    color: var(--sl-color-white);
+  .lat-ribbon label:first-child {
+    margin-right: 0.6rem !important;
   }
   .lat-panel {
     display: none;
@@ -870,18 +865,14 @@ const belowThreshold = overheadPublished.filter(
   }
   .figure-notes {
     margin-top: 1.5rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--sl-color-hairline);
   }
-  .figure-notes > h3 {
-    margin: 0 0 0.75rem;
-    font-size: var(--sl-text-lg);
+  .figure-notes > .prose-columns {
+    padding: 0.5rem 0 0.75rem;
   }
   .chart-frame {
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.75rem;
-    padding: 0.75rem 0.5rem 0.25rem;
-    background: var(--sl-color-bg-sidebar);
+    border: 1px solid var(--ds-line);
+    padding: 1rem 0.75rem 0.5rem;
+    background: var(--ds-well);
     overflow-x: auto;
   }
   .ranking-chart {
@@ -891,35 +882,41 @@ const belowThreshold = overheadPublished.filter(
     height: auto;
   }
   .ranking-chart .grid {
-    stroke: var(--sl-color-hairline);
+    stroke: var(--ds-line-soft);
     stroke-width: 1;
   }
   .ranking-chart .axis {
-    stroke: var(--sl-color-gray-4);
-    stroke-width: 1.5;
+    stroke: var(--ds-line-strong);
+    stroke-width: 1;
   }
   .ranking-chart .row-sublabel,
   .ranking-chart .phase-label,
   .ranking-chart .phase-value {
-    font-family: var(--__sl-font-mono);
+    font-family: var(--ds-font-mono);
     font-size: 10px;
-    fill: var(--sl-color-gray-3);
+    fill: var(--ds-text-3);
   }
-  .ranking-chart .tick,
-  .ranking-chart .axis-title {
-    font-family: var(--__sl-font-mono);
+  .ranking-chart .tick {
+    font-family: var(--ds-font-mono);
     font-size: 11px;
-    fill: var(--sl-color-gray-3);
+    fill: var(--ds-text-3);
   }
-  .ranking-chart .row-label {
+  .ranking-chart .axis-title {
+    font-family: var(--ds-font);
     font-size: 13px;
-    font-weight: 600;
-    fill: var(--sl-color-white);
+    font-weight: 500;
+    fill: var(--ds-text-2);
+  }
+  .ranking-chart .row-label {
+    font-family: var(--ds-font);
+    font-size: 13.5px;
+    font-weight: 500;
+    fill: var(--ds-text);
   }
   .ranking-chart .row-value {
-    font-family: var(--__sl-font-mono);
+    font-family: var(--ds-font-mono);
     font-size: 12px;
-    fill: var(--sl-color-gray-2);
+    fill: var(--ds-text-2);
   }
   .ranking-chart .row .whisker {
     stroke: var(--vendor-rule, var(--sl-color-accent));
@@ -988,28 +985,29 @@ const belowThreshold = overheadPublished.filter(
     gap: 0.4rem 1.25rem;
     margin: 0.75rem 0 0;
     padding: 0;
-    font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-2);
+    font-size: var(--sl-text-xs);
+    color: var(--ds-text-3);
   }
+  /* The label is one flex item, so a bold lead word wraps with its sentence
+     instead of being squeezed into a column of its own. */
   .chart-legend li {
     margin: 0;
     display: flex;
-    align-items: center;
+    align-items: baseline;
   }
   .chart-legend .swatch {
+    flex: none;
     display: inline-block;
     width: 1.1rem;
     height: 0.7rem;
     margin-right: 0.45rem;
-    background: var(--sl-color-gray-3);
+    background: var(--ds-text-3);
   }
   .chart-legend .key-median .swatch {
     width: 0.2rem;
-    border-radius: 0.1rem;
   }
   .chart-legend .key-box .swatch {
     opacity: 0.42;
-    border-radius: 0.15rem;
   }
   .chart-legend .key-whisker .swatch {
     height: 0.15rem;
@@ -1018,7 +1016,6 @@ const belowThreshold = overheadPublished.filter(
   .chart-legend .key-phase .swatch {
     height: 0.35rem;
     opacity: 0.28;
-    border-radius: 0.1rem;
   }
   .chart-legend .key-warm .swatch {
     width: 0.7rem;
@@ -1029,13 +1026,13 @@ const belowThreshold = overheadPublished.filter(
     width: 1.1rem;
     height: 0.45rem;
     background: none;
-    border-top: 1.5px dashed var(--sl-color-gray-3);
-    border-left: 1.5px solid var(--sl-color-gray-3);
-    border-right: 1.5px solid var(--sl-color-gray-3);
+    border-top: 1.5px dashed var(--ds-text-3);
+    border-left: 1.5px solid var(--ds-text-3);
+    border-right: 1.5px solid var(--ds-text-3);
   }
   .caption {
     font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
   }
   /* The same fixed vendor→colour identity map every other section uses, keyed
      by tool rather than by row position. Slots v0–v3 keep the definitions they
diff --git a/docs/src/components/LatencyTier.astro b/docs/src/components/LatencyTier.astro
index c822a908c..cefe81351 100644
--- a/docs/src/components/LatencyTier.astro
+++ b/docs/src/components/LatencyTier.astro
@@ -173,7 +173,7 @@ interface Props {
   every number on this page.
 </p>
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -235,7 +235,7 @@ interface Props {
   side by side as though they were.
 </p>
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -329,7 +329,7 @@ interface Props {
     Show the data table — analyzer-invocation wall-clock per adapter, with minima
     and maxima
   </summary>
-  <div class="table-scroll">
+  <div class="table-scroll ds-table">
     <table>
       <thead>
         <tr>
@@ -404,7 +404,7 @@ interface Props {
           adapter.phases.length
         } observable phases against its analyzer total`}
       </summary>
-      <div class="table-scroll">
+      <div class="table-scroll ds-table">
         <table>
           <thead>
             <tr>
@@ -507,7 +507,7 @@ interface Props {
   </p>
 ) : (
   <>
-    <div class="table-scroll">
+    <div class="table-scroll ds-table">
       <table>
         <thead>
           <tr>
@@ -611,7 +611,7 @@ interface Props {
       auditable if it is still legible beside the one that replaced it.
     </p>
 
-    <div class="table-scroll">
+    <div class="table-scroll ds-table">
       <table>
         <thead>
           <tr>
@@ -707,7 +707,7 @@ interface Props {
             measurement.language
           } kernel, all ${measurement.runs.length} retained repeats`}
         </summary>
-        <div class="table-scroll">
+        <div class="table-scroll ds-table">
           <table>
             <thead>
               <tr>
@@ -798,7 +798,7 @@ interface Props {
   runtime or from another adapter's slope.
 </p>
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -816,7 +816,7 @@ interface Props {
               aria-hidden="true"></span>
             {vendorName(measurement.tool)}
           </td>
-          <td><strong>Yes — measured</strong></td>
+          <td class="observable"><strong>Yes — measured</strong></td>
           <td>
             A released multi-case batch that does the same per-case work, timed
             above.
@@ -832,7 +832,7 @@ interface Props {
               aria-hidden="true"></span>
             {vendorName(decline.tool)}
           </td>
-          <td>
+          <td class="observable">
             {decline.verdict === 'deferred' ? (
               <strong>Yes in the CLI — not measured here</strong>
             ) : (
@@ -913,7 +913,7 @@ interface Props {
   one, and never used to order a row.
 </p>
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -1076,7 +1076,7 @@ interface Props {
   selects.
 </p>
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -1185,7 +1185,7 @@ interface Props {
           adapter.slices.length === 1 ? 'slice' : 'slices'
         } for ${vendorName(adapter.tool)}`}
       </summary>
-      <div class="table-scroll">
+      <div class="table-scroll ds-table">
         <table>
           <thead>
             <tr>
@@ -1207,7 +1207,7 @@ interface Props {
             {adapter.slices.map((slice) => (
               <tr>
                 <td><code>{slice.report.replace(/^reports\//, '').replace(/\.json$/, '')}</code></td>
-                <td>{slice.language}</td>
+                <td class="language">{slice.language}</td>
                 <td><code>{slice.modelProfile}</code></td>
                 <td>
                   {slice.timed} / {slice.cases}
@@ -1243,7 +1243,7 @@ interface Props {
   accounted for:
 </p>
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -1306,21 +1306,35 @@ interface Props {
 </>)}
 
 <style>
+  /* An analyzer's name stays on one line beside its dot, in every table
+     here; a two-word name split under its own dot reads as two rows. */
+  td:has(> .vendor-dot:first-child) {
+    white-space: nowrap;
+  }
+  /* The verdict is a short phrase; given a floor, it reads in two lines
+     beside its evidence instead of one word to a line. */
+  .observable {
+    min-width: 10rem;
+  }
+  /* A language, or the smoke slice's "13 languages", is one label. */
+  .language {
+    white-space: nowrap;
+  }
   .vendor-dot {
     display: inline-block;
     width: 0.55rem;
     height: 0.55rem;
     border-radius: 50%;
-    margin-right: 0.4rem;
+    margin-right: 0.45rem;
     vertical-align: baseline;
     background: var(--vendor-rule, var(--sl-color-accent));
   }
   .caption {
     font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
   }
   .muted {
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
   }
   .table-scroll {
     overflow-x: auto;
diff --git a/docs/src/components/ScatterTooltip.astro b/docs/src/components/ScatterTooltip.astro
index 419a1c196..e626c1b8a 100644
--- a/docs/src/components/ScatterTooltip.astro
+++ b/docs/src/components/ScatterTooltip.astro
@@ -71,13 +71,14 @@
     z-index: 2;
     box-sizing: border-box;
     max-width: min(22rem, calc(100% - 1rem));
-    padding: .35rem .5rem;
-    color: var(--sl-color-text);
-    background: var(--sl-color-bg);
-    border-radius: .25rem;
-    font-family: var(--__sl-font-mono);
+    padding: .4rem .6rem;
+    color: var(--ds-text);
+    background: var(--ds-control);
+    border: 1px solid var(--ds-line-strong);
+    box-shadow: var(--ds-shadow-float);
+    font-family: var(--ds-font-mono);
     font-size: 11px;
-    line-height: 1.35;
+    line-height: 1.4;
     opacity: 0;
     pointer-events: none;
     transform: translate(-50%, calc(-100% - .65rem));
diff --git a/docs/src/components/ScorecardSummary.astro b/docs/src/components/ScorecardSummary.astro
index 469a3e134..4ad623f15 100644
--- a/docs/src/components/ScorecardSummary.astro
+++ b/docs/src/components/ScorecardSummary.astro
@@ -29,7 +29,7 @@ const { adapter } = scorecard;
     >
     (<code>{shortDigest(scorecard.report.sha256)}…</code>).
   </p>
-  <div class="table-scroll">
+  <div class="table-scroll ds-table">
     <table>
       <thead>
         <tr>
@@ -60,12 +60,12 @@ const { adapter } = scorecard;
                 <td>{tier.outcome_coverage['inconclusive'] ?? 0}</td>
                 <td>{tier.outcome_coverage['unsupported'] ?? 0}</td>
                 <td>{tier.outcome_coverage['runner-error'] ?? 0}</td>
-                <td>
+                <td class="rate">
                   {tier.scored
                     ? percentCell(tier.dimension_macro.true_positive_rate_percent)
                     : 'not scored'}
                 </td>
-                <td>
+                <td class="rate">
                   {tier.scored
                     ? percentCell(tier.dimension_macro.false_positive_rate_percent)
                     : 'not scored'}
@@ -83,4 +83,15 @@ const { adapter } = scorecard;
   .table-scroll {
     overflow-x: auto;
   }
+  /* A scorecard id that just fits the column as text still overhangs it by
+     its chip's end padding, since the line fits the text alone. As a block of
+     its own width it stays inside, wrapping at its hyphens when it must. */
+  h3 > code {
+    display: inline-block;
+    max-width: 100%;
+  }
+  /* A rate, or "not scored" in its place, reads as one figure. */
+  .rate {
+    white-space: nowrap;
+  }
 </style>
diff --git a/docs/src/components/SnapshotArchive.astro b/docs/src/components/SnapshotArchive.astro
index 55a4fcae3..873a735db 100644
--- a/docs/src/components/SnapshotArchive.astro
+++ b/docs/src/components/SnapshotArchive.astro
@@ -113,11 +113,12 @@ const entries = archived.map((snapshot) => ({
     gap: 1rem;
   }
   .archive-entry {
-    border: 1px solid var(--sl-color-hairline);
-    border-inline-start: 4px solid var(--sl-color-gray-4);
-    border-radius: 0.5rem;
-    padding: 0.75rem 1rem 1rem;
-    background: var(--sl-color-bg-sidebar);
+    border: 1px solid var(--ds-line);
+    border-inline-start: 2px solid var(--ds-line-strong);
+    border-radius: 0 var(--ds-cut-control) var(--ds-cut-control) 0;
+    corner-shape: bevel;
+    padding: 0.9rem 1.1rem 1.1rem;
+    background: var(--ds-surface);
   }
   .archive-entry h3 {
     margin: 0;
@@ -128,12 +129,14 @@ const entries = archived.map((snapshot) => ({
     gap: 0.5rem;
   }
   .archived-pill {
-    padding: 0 0.5rem;
-    border-radius: 999px;
+    padding: 0.05rem 0.45rem;
+    border: 1px solid var(--ds-line-strong);
+    border-radius: var(--ds-cut-badge);
+    corner-shape: bevel;
     font-size: var(--sl-text-xs);
-    font-weight: 400;
-    background: var(--sl-color-gray-6);
-    color: var(--sl-color-gray-2);
+    font-weight: 500;
+    background: var(--ds-control);
+    color: var(--ds-text-2);
   }
   .summary {
     margin: 0.5rem 0 0;
@@ -141,7 +144,7 @@ const entries = archived.map((snapshot) => ({
   .scale {
     margin: 0.5rem 0 0;
     font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-2);
+    color: var(--ds-text-2);
   }
   .identity {
     margin: 0.75rem 0 0;
@@ -151,8 +154,8 @@ const entries = archived.map((snapshot) => ({
     font-size: var(--sl-text-sm);
   }
   .identity dt {
-    font-weight: 600;
-    color: var(--sl-color-gray-2);
+    font-weight: 500;
+    color: var(--ds-text-3);
   }
   .identity dd {
     margin: 0 0 0.4rem;
diff --git a/docs/src/components/SnapshotBanner.astro b/docs/src/components/SnapshotBanner.astro
index 4bf27ad47..7f5413eaf 100644
--- a/docs/src/components/SnapshotBanner.astro
+++ b/docs/src/components/SnapshotBanner.astro
@@ -34,11 +34,12 @@ const { benchmark, manifest, claim } = snapshot.results;
 
 <style>
   .snapshot-banner {
-    border: 1px solid var(--sl-color-hairline);
-    border-inline-start: 4px solid var(--sl-color-accent);
-    border-radius: 0.5rem;
-    padding: 0.75rem 1rem;
-    background: var(--sl-color-bg-sidebar);
+    border: 1px solid var(--ds-line);
+    border-inline-start: 2px solid var(--ds-accent);
+    border-radius: 0 var(--ds-cut-control) var(--ds-cut-control) 0;
+    corner-shape: bevel;
+    padding: 0.85rem 1.1rem;
+    background: var(--ds-surface);
   }
   .snapshot-banner ul {
     margin: 0.25rem 0 0;
@@ -46,10 +47,13 @@ const { benchmark, manifest, claim } = snapshot.results;
   .current-pill {
     display: inline-block;
     margin-inline-start: 0.5rem;
-    padding: 0 0.5rem;
-    border-radius: 999px;
+    padding: 0.05rem 0.45rem;
+    border: 1px solid var(--ds-accent-line);
+    border-radius: var(--ds-cut-badge);
+    corner-shape: bevel;
     font-size: var(--sl-text-xs);
-    background: var(--sl-color-accent-low);
-    color: var(--sl-color-accent-high);
+    font-weight: 500;
+    background: var(--ds-accent-low);
+    color: var(--ds-accent-text);
   }
 </style>
diff --git a/docs/src/components/SnapshotEvolution.astro b/docs/src/components/SnapshotEvolution.astro
index 087c6199c..ee69ff41c 100644
--- a/docs/src/components/SnapshotEvolution.astro
+++ b/docs/src/components/SnapshotEvolution.astro
@@ -377,10 +377,10 @@ const last = columns.at(-1)!;
   />
   <div class="view-toggle" role="group" aria-label="Evolution chart view">
     {heading && (
-      <label class="absolute-label" for={`evolution-view-absolute-${scope}`}>Absolute counts</label>
+      <label class="ds-chip absolute-label" for={`evolution-view-absolute-${scope}`}>Absolute counts</label>
     )}
-    <label class="normalized-label" for={`evolution-view-normalized-${scope}`}>Accuracy on covered kernels</label>
-    <label class="table-label" for={`evolution-view-table-${scope}`}>Data table</label>
+    <label class="ds-chip normalized-label" for={`evolution-view-normalized-${scope}`}>Accuracy on covered kernels</label>
+    <label class="ds-chip table-label" for={`evolution-view-table-${scope}`}>Data table</label>
   </div>
 
 {heading && (
@@ -500,7 +500,7 @@ const last = columns.at(-1)!;
     ))}
 
     <text class="axis-title" x="2" y={padTop - 12} text-anchor="start">
-      assertions
+      Assertions
     </text>
   </svg>
   <ScatterTooltip />
@@ -635,7 +635,7 @@ const last = columns.at(-1)!;
     ))}
 
     <text class="axis-title" x="2" y={padTop - 12} text-anchor="start">
-      % of its covered population
+      Share of its covered population
     </text>
   </svg>
   <ScatterTooltip />
@@ -669,8 +669,8 @@ const last = columns.at(-1)!;
   ))}
   <li class="size-key">
     <span class="swatch" aria-hidden="true"></span>
-    marker size and the <code>k/n</code> label under it: kernels covered of the
-    snapshot's kernels
+    <span>marker size and the <code>k/n</code> label under it: kernels covered
+    of the snapshot's kernels</span>
   </li>
 </ul>
 
@@ -690,7 +690,7 @@ const last = columns.at(-1)!;
   )}
 </p>
 
-<div class="table-scroll view-table">
+<div class="table-scroll ds-table view-table">
   <table>
     <thead>
       <tr>
@@ -763,35 +763,11 @@ const last = columns.at(-1)!;
 <style>
   /* The view toggle is a plain radio group: no JavaScript, keyboard-operable
      by default (Tab into the group, arrows between options), and it degrades
-     to two labelled radios if the stylesheet never arrives. The radios sit as
+     to labelled radios if the stylesheet never arrives. The radios sit as
      direct children of `.evolution` so `:checked ~ …` can reach every element
      that belongs to one view or the other. */
-  .chart-note {
-    max-width: 64rem;
-    margin-inline: auto;
-  }
-  @media (min-width: 72rem) {
-    /* A lone note reads correctly as its own two columns: down the left, then
-       down the right, with nothing else interleaved. The captions do not —
-       they come in adjacent runs — so they are flowed by the `.prose-columns`
-       wrapper around them instead, and must not also column themselves. */
-    .chart-note {
-      columns: 2;
-      column-gap: 2.5rem;
-      max-width: none;
-    }
-    .evolution .caption {
-      max-width: none;
-    }
-  }
   .evolution {
     position: relative;
-    /* The chart itself is capped at 64rem (custom.css); on the wide desktop
-       column an uncapped wrapper leaves a dead margin to the right of the
-       toggle, frame, and captions. Cap and center the whole block so its
-       edges follow the chart's. */
-    max-width: 64rem;
-    margin-inline: auto;
   }
   .view-radio {
     position: absolute;
@@ -805,41 +781,32 @@ const last = columns.at(-1)!;
     white-space: nowrap;
   }
   .view-toggle {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 0.25rem;
-    margin: 0 0 0.75rem;
-    padding: 0.2rem;
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.6rem;
-    background: var(--sl-color-bg-sidebar);
+    gap: 0.4rem;
+    margin: 0 0 1rem;
   }
   .view-toggle label {
     /* The content area's global sibling rule adds margin-top to successive
-       elements; inside the pill row that staggers the labels vertically. */
+       elements; inside the chip row that staggers the labels vertically. */
     margin: 0 !important;
+    min-height: 2rem;
+    padding-inline: 0.7rem;
+    font-size: var(--sl-text-xs);
     cursor: pointer;
-    border-radius: 0.45rem;
-    padding: 0.3rem 0.7rem;
-    font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-2);
-    line-height: 1.3;
-  }
-  .view-toggle label:hover {
-    color: var(--sl-color-white);
   }
   .absolute-radio:checked ~ .view-toggle .absolute-label,
   .normalized-radio:checked ~ .view-toggle .normalized-label,
   .table-radio:checked ~ .view-toggle .table-label {
-    background: var(--sl-color-gray-6, var(--sl-color-hairline));
-    color: var(--sl-color-white);
-    box-shadow: inset 0 0 0 1px var(--sl-color-hairline);
+    border-color: var(--ds-accent);
+    background: var(--ds-accent-low);
+    color: var(--ds-text);
   }
   .absolute-radio:focus-visible ~ .view-toggle .absolute-label,
   .normalized-radio:focus-visible ~ .view-toggle .normalized-label,
   .table-radio:focus-visible ~ .view-toggle .table-label {
-    outline: 2px solid var(--sl-color-accent-high);
+    outline: 2px solid var(--ds-accent);
     outline-offset: 2px;
   }
   /* Each view hides the two it is not. The value table is the third view
@@ -858,14 +825,14 @@ const last = columns.at(-1)!;
   }
   .chart-frame {
     position: relative;
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: 0.75rem;
-    padding: 0.75rem 0.5rem 0.25rem;
-    background: var(--sl-color-bg-sidebar);
+    max-width: 64rem;
+    border: 1px solid var(--ds-line);
+    padding: 1rem 0.75rem 0.5rem;
+    background: var(--ds-well);
     overflow-x: auto;
   }
   .dot { cursor: default; outline: none; }
-  .dot:is(:hover, :focus-visible) { stroke: var(--sl-color-text); stroke-width: 3; }
+  .dot:is(:hover, :focus-visible) { stroke: var(--ds-text); stroke-width: 2.5; }
   .evolution-chart {
     display: block;
     width: 100%;
@@ -876,39 +843,48 @@ const last = columns.at(-1)!;
     height: auto;
   }
   .evolution-chart .grid {
-    stroke: var(--sl-color-hairline);
+    stroke: var(--ds-line-soft);
     stroke-width: 1;
   }
   .evolution-chart .axis {
-    stroke: var(--sl-color-gray-4);
-    stroke-width: 1.5;
+    stroke: var(--ds-line-strong);
+    stroke-width: 1;
   }
   .evolution-chart .tick,
-  .evolution-chart .axis-title,
   .evolution-chart .x-sub {
-    font-family: var(--__sl-font-mono);
+    font-family: var(--ds-font-mono);
     font-size: 11px;
-    fill: var(--sl-color-gray-3);
+    fill: var(--ds-text-3);
+  }
+  .evolution-chart .axis-title {
+    font-family: var(--ds-font);
+    font-size: 13px;
+    font-weight: 500;
+    fill: var(--ds-text-2);
   }
   .evolution-chart .x-label {
-    font-family: var(--__sl-font-mono);
+    font-family: var(--ds-font-mono);
     font-size: 13px;
-    fill: var(--sl-color-accent-high);
+    fill: var(--ds-accent-text);
     text-decoration: underline;
+    text-decoration-color: var(--ds-accent-line);
   }
   .evolution-chart a:hover .x-label {
-    fill: var(--sl-color-white);
+    fill: var(--ds-text);
+  }
+  .evolution-chart a:focus-visible {
+    outline: 2px solid var(--ds-accent);
   }
   .evolution-chart .ceiling {
     fill: none;
-    stroke: var(--sl-color-gray-4);
-    stroke-width: 2;
+    stroke: var(--ds-text-3);
+    stroke-width: 1.5;
     stroke-dasharray: 6 4;
   }
   .evolution-chart .ceiling-label {
-    font-family: var(--__sl-font-mono);
+    font-family: var(--ds-font-mono);
     font-size: 12px;
-    fill: var(--sl-color-gray-2);
+    fill: var(--ds-text-2);
   }
   .evolution-chart .series .line {
     fill: none;
@@ -919,7 +895,7 @@ const last = columns.at(-1)!;
   }
   .evolution-chart .series .dot {
     fill: var(--vendor-rule);
-    stroke: var(--sl-color-bg-sidebar);
+    stroke: var(--ds-well);
     stroke-width: 1.5;
   }
   .evolution-chart .series .uncorrect {
@@ -932,51 +908,53 @@ const last = columns.at(-1)!;
     stroke-width: 2;
     opacity: 0.5;
   }
+  .evolution-chart .coverage-note {
+    font-family: var(--ds-font-mono);
+    font-size: 9px;
+    fill: var(--ds-text-3);
+  }
   .chart-legend {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem 1.25rem;
+    gap: 0.4rem 1.5rem;
     margin: 0.75rem 0 0;
     padding: 0;
-    font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-2);
+    font-size: var(--sl-text-xs);
+    color: var(--ds-text-3);
   }
+  /* Each label is one flex item, so it wraps as a sentence rather than
+     splitting around its inline code. */
   .chart-legend li {
     margin: 0;
     display: flex;
     align-items: center;
   }
   .chart-legend .swatch {
+    flex: none;
     display: inline-block;
     width: 1.1rem;
-    height: 0.25rem;
-    border-radius: 0.125rem;
+    height: 0.2rem;
     margin-right: 0.45rem;
-    background: var(--vendor-rule, var(--sl-color-accent));
+    background: var(--vendor-rule, var(--ds-accent));
   }
   .chart-legend .ceiling-key .swatch {
     background: repeating-linear-gradient(
       to right,
-      var(--sl-color-gray-4) 0 6px,
+      var(--ds-text-3) 0 6px,
       transparent 6px 10px
     );
   }
-  .evolution-chart .coverage-note {
-    font-family: var(--__sl-font-mono);
-    font-size: 9px;
-    fill: var(--sl-color-gray-3);
-  }
   .chart-legend .size-key .swatch {
     height: 0.6rem;
     width: 0.6rem;
     border-radius: 50%;
-    background: var(--sl-color-gray-3);
+    background: var(--ds-text-3);
   }
   .chart-legend .stub-key .swatch {
     height: 0.6rem;
     width: 0.45rem;
-    background: var(--sl-color-gray-3);
+    background: var(--ds-text-3);
     opacity: 0.35;
   }
   .vendor-dot {
@@ -984,9 +962,9 @@ const last = columns.at(-1)!;
     width: 0.55rem;
     height: 0.55rem;
     border-radius: 50%;
-    margin-right: 0.4rem;
+    margin-right: 0.45rem;
     vertical-align: baseline;
-    background: var(--vendor-rule, var(--sl-color-accent));
+    background: var(--vendor-rule, var(--ds-accent));
   }
   /* The fixed vendor→colour identity map, keyed by tool rather than by
      position, matching the kernel cards and the confusion dialog. */
@@ -1016,11 +994,11 @@ const last = columns.at(-1)!;
     --vendor-rule: var(--dfb-vendor-7);
   }
   .muted {
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
   }
   .caption {
     font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-3);
+    color: var(--ds-text-3);
   }
   .table-scroll {
     overflow-x: auto;
diff --git a/docs/src/components/TemplateMatrix.astro b/docs/src/components/TemplateMatrix.astro
index 8a10ac540..07dbc7150 100644
--- a/docs/src/components/TemplateMatrix.astro
+++ b/docs/src/components/TemplateMatrix.astro
@@ -50,7 +50,7 @@ rows.sort(
 );
 ---
 
-<div class="table-scroll">
+<div class="table-scroll ds-table">
   <table>
     <thead>
       <tr>
@@ -67,13 +67,13 @@ rows.sort(
       {
         rows.map((row) => (
           <tr>
-            <td>
+            <td class="template">
               <code>{row.template}</code>
             </td>
             <td>
               <code>{row.language}</code>
             </td>
-            <td>
+            <td class="scorecard">
               <code>{row.scorecard}</code>
             </td>
             <td>
@@ -97,4 +97,18 @@ rows.sort(
   .table-scroll {
     overflow-x: auto;
   }
+  /* Template and scorecard ids wrap at their hyphens, two or three lines to
+     an id; below that the matrix pans instead of stacking one piece per
+     line. */
+  .template {
+    min-width: 9.5rem;
+  }
+  .scorecard {
+    min-width: 10.5rem;
+  }
+  /* Seven columns of short terms: the tighter gap the foundation gives tables
+     of eight or more keeps both id columns their room at 1440px. */
+  table :is(th, td):not(:last-child) {
+    padding-inline-end: 0.7rem;
+  }
 </style>
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index d0eb7f1f6..4dd4ce9a4 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Current overview of DataFlowBench
-description: BrokkAi's benchmark for data-flow analysis — Bifrost measured against reference analyzers, published exclusively from immutable freeze evidence.
+description: SlopCop's benchmark for data-flow analysis — Bifrost measured against reference analyzers, published exclusively from immutable freeze evidence.
 tableOfContents: false
 ---
 
diff --git a/docs/src/data/latency.ts b/docs/src/data/latency.ts
index c2163d024..c9b753e45 100644
--- a/docs/src/data/latency.ts
+++ b/docs/src/data/latency.ts
@@ -735,8 +735,10 @@ export function kernelCorpusDistributions(
 }
 
 export function formatMs(value: number): string {
+  // A no-break space: a figure never parts from its unit, in a table cell or
+  // a sentence.
   const ms = Math.round(value);
-  if (ms < 1000) return `${ms} ms`;
-  if (ms < 10_000) return `${(Math.round(ms / 10) / 100).toFixed(2)} s`;
-  return `${(Math.round(ms / 100) / 10).toFixed(1)} s`;
+  if (ms < 1000) return `${ms}\u00a0ms`;
+  if (ms < 10_000) return `${(Math.round(ms / 10) / 100).toFixed(2)}\u00a0s`;
+  return `${(Math.round(ms / 100) / 10).toFixed(1)}\u00a0s`;
 }
diff --git a/docs/src/data/scatter-layout.test.ts b/docs/src/data/scatter-layout.test.ts
new file mode 100644
index 000000000..b559d66c9
--- /dev/null
+++ b/docs/src/data/scatter-layout.test.ts
@@ -0,0 +1,61 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { percentAxis, placeLabels } from './scatter-layout.ts';
+
+test('the percent axis keeps 50% in view and trims empty space below', () => {
+  assert.deepEqual(percentAxis([78, 86, 100]), { min: 50, max: 100, ticks: [50, 60, 70, 80, 90, 100] });
+  assert.equal(percentAxis([45, 90]).min, 40);
+  // A point just above a tick would sit on the axis; it gets the tick below.
+  assert.equal(percentAxis([41.2, 90]).min, 30);
+  // A value on a tick still gets room beneath it.
+  assert.equal(percentAxis([30]).min, 20);
+  assert.equal(percentAxis([]).min, 50);
+  assert.equal(percentAxis([-5]).min, 0);
+});
+
+const bounds = { left: 0, top: 0, right: 800, bottom: 400 };
+
+function boxes(points: { x: number; y: number; text: string }[]) {
+  return placeLabels(points, { bounds, fontSize: 12, charWidth: 0.6 }).map((label, index) => {
+    const width = points[index].text.length * 7.2;
+    const left = label.anchor === 'start' ? label.x : label.anchor === 'end' ? label.x - width : label.x - width / 2;
+    return { left, right: left + width, top: label.y - 8.6, bottom: label.y + 2.6 };
+  });
+}
+
+test('labels of a tight cluster do not overlap one another', () => {
+  const cluster = [
+    { x: 200, y: 120, text: 'OpenTaint' },
+    { x: 206, y: 124, text: 'FlowDroid' },
+    { x: 212, y: 130, text: 'Semgrep CE' },
+    { x: 222, y: 128, text: 'Infer' },
+  ];
+  const placed = boxes(cluster);
+  for (let a = 0; a < placed.length; a += 1) {
+    for (let b = a + 1; b < placed.length; b += 1) {
+      const overlaps =
+        placed[a].left < placed[b].right &&
+        placed[b].left < placed[a].right &&
+        placed[a].top < placed[b].bottom &&
+        placed[b].top < placed[a].bottom;
+      assert.equal(overlaps, false, `${cluster[a].text} overlaps ${cluster[b].text}`);
+    }
+  }
+});
+
+test('labels stay inside the plot', () => {
+  const corners = [
+    { x: 795, y: 5, text: 'Bifrost' },
+    { x: 5, y: 395, text: 'Pysa' },
+  ];
+  for (const box of boxes(corners)) {
+    assert.ok(box.left >= bounds.left && box.right <= bounds.right, 'horizontal');
+    assert.ok(box.top >= bounds.top && box.bottom <= bounds.bottom, 'vertical');
+  }
+});
+
+test('an isolated point keeps its label beside it', () => {
+  const [label] = placeLabels([{ x: 400, y: 200, text: 'Joern' }], { bounds });
+  assert.equal(label.leader, false);
+  assert.equal(label.anchor, 'start');
+});
diff --git a/docs/src/data/scatter-layout.ts b/docs/src/data/scatter-layout.ts
new file mode 100644
index 000000000..c27575f24
--- /dev/null
+++ b/docs/src/data/scatter-layout.ts
@@ -0,0 +1,155 @@
+// Layout helpers shared by the scatter charts: a value axis fitted to the data
+// it has to show, and point labels placed so that they do not collide.
+//
+// Everything here works in SVG user units and is deterministic, so a chart
+// renders identically on every build and its geometry can be tested without
+// a browser.
+
+export interface PercentAxis {
+  min: number;
+  max: number;
+  ticks: number[];
+}
+
+/** A 0–100 axis trimmed at the bottom to the lowest value it must show.
+ *
+ * The floor never rises above `ceiling` (so a reference line such as the
+ * 50% blind baseline stays inside the plot) and drops to the next multiple of
+ * `step` below the lowest value, so nothing sits on the bottom edge. */
+export function percentAxis(values: number[], ceiling = 50, step = 10): PercentAxis {
+  const min =
+    values.length === 0
+      ? ceiling
+      : Math.max(0, Math.min(ceiling, Math.floor((Math.min(...values) - step / 4) / step) * step));
+  const ticks: number[] = [];
+  for (let tick = min; tick <= 100; tick += step) ticks.push(tick);
+  return { min, max: 100, ticks };
+}
+
+export interface LabelInput {
+  x: number;
+  y: number;
+  text: string;
+}
+
+export interface LabelPlacement {
+  x: number;
+  y: number;
+  anchor: 'start' | 'middle' | 'end';
+  /** True when the label had to move far enough from its point to need a leader line. */
+  leader: boolean;
+}
+
+export interface LabelOptions {
+  /** The rectangle labels must stay inside. */
+  bounds: { left: number; top: number; right: number; bottom: number };
+  /** Point radius, including its stroke. */
+  radius?: number;
+  /** Label font size in user units. */
+  fontSize?: number;
+  /** Average advance per character as a fraction of the font size. */
+  charWidth?: number;
+}
+
+interface Box {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+const overlapArea = (a: Box, b: Box) =>
+  Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left)) *
+  Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));
+
+/** Place one label per point, greedily, avoiding other labels, other points
+ * and the plot edge.
+ *
+ * Points are placed in order of how crowded their neighbourhood is, most
+ * crowded first, so the points with the fewest free positions choose before
+ * the open ones take them. Each label tries the eight compass positions at
+ * increasing distance; the first ring is preferred, and a label that has to go
+ * further out is flagged for a leader line back to its point. */
+export function placeLabels(points: LabelInput[], options: LabelOptions): LabelPlacement[] {
+  const radius = options.radius ?? 8;
+  const fontSize = options.fontSize ?? 12;
+  const charWidth = options.charWidth ?? 0.6;
+  const { bounds } = options;
+  const ascent = fontSize * 0.72;
+  const descent = fontSize * 0.22;
+  const pad = 2;
+
+  const pointBoxes: Box[] = points.map((point) => ({
+    left: point.x - radius,
+    top: point.y - radius,
+    right: point.x + radius,
+    bottom: point.y + radius,
+  }));
+
+  const crowding = points.map((point) =>
+    points.reduce((count, other) => count + (Math.hypot(other.x - point.x, other.y - point.y) < 90 ? 1 : 0), 0),
+  );
+  const order = points.map((_, index) => index).sort((a, b) => crowding[b] - crowding[a] || a - b);
+
+  const directions: { dx: number; dy: number; anchor: LabelPlacement['anchor'] }[] = [
+    { dx: 1, dy: 0, anchor: 'start' },
+    { dx: -1, dy: 0, anchor: 'end' },
+    { dx: 0, dy: -1, anchor: 'middle' },
+    { dx: 0, dy: 1, anchor: 'middle' },
+    { dx: 1, dy: -1, anchor: 'start' },
+    { dx: -1, dy: -1, anchor: 'end' },
+    { dx: 1, dy: 1, anchor: 'start' },
+    { dx: -1, dy: 1, anchor: 'end' },
+  ];
+  const rings = [radius + 4, radius + 18, radius + 34, radius + 54];
+
+  const placed: Box[] = [];
+  const result: LabelPlacement[] = new Array(points.length);
+
+  for (const index of order) {
+    const point = points[index];
+    const width = point.text.length * fontSize * charWidth;
+    let best: { score: number; placement: LabelPlacement; box: Box } | undefined;
+
+    rings.forEach((distance, ring) => {
+      directions.forEach((direction, preference) => {
+        // Diagonals sit on the circle, not on the square around it.
+        const scale = direction.dx !== 0 && direction.dy !== 0 ? Math.SQRT1_2 : 1;
+        const anchorX = point.x + direction.dx * distance * scale;
+        // Vertical offsets are measured to the text's near edge, not its baseline.
+        const edgeY = point.y + direction.dy * distance * scale;
+        const baseline =
+          direction.dy < 0 ? edgeY - descent : direction.dy > 0 ? edgeY + ascent : point.y + (ascent - descent) / 2;
+        const left =
+          direction.anchor === 'start' ? anchorX : direction.anchor === 'end' ? anchorX - width : anchorX - width / 2;
+        const box: Box = {
+          left: left - pad,
+          top: baseline - ascent - pad,
+          right: left + width + pad,
+          bottom: baseline + descent + pad,
+        };
+
+        let score = ring * 1000 + preference;
+        for (const other of placed) score += overlapArea(box, other) * 100;
+        pointBoxes.forEach((other, otherIndex) => {
+          if (otherIndex !== index) score += overlapArea(box, other) * 60;
+        });
+        const outside =
+          Math.max(0, bounds.left - box.left) +
+          Math.max(0, box.right - bounds.right) +
+          Math.max(0, bounds.top - box.top) +
+          Math.max(0, box.bottom - bounds.bottom);
+        score += outside * 5000;
+
+        if (!best || score < best.score) {
+          best = { score, box, placement: { x: anchorX, y: baseline, anchor: direction.anchor, leader: ring > 1 } };
+        }
+      });
+    });
+
+    placed.push(best!.box);
+    result[index] = best!.placement;
+  }
+
+  return result;
+}
diff --git a/docs/src/fonts/ApfelGrotezk-Fett.woff2 b/docs/src/fonts/ApfelGrotezk-Fett.woff2
new file mode 100644
index 000000000..73d6417fb
Binary files /dev/null and b/docs/src/fonts/ApfelGrotezk-Fett.woff2 differ
diff --git a/docs/src/fonts/ApfelGrotezk-Mittel.woff2 b/docs/src/fonts/ApfelGrotezk-Mittel.woff2
new file mode 100644
index 000000000..8440a76e8
Binary files /dev/null and b/docs/src/fonts/ApfelGrotezk-Mittel.woff2 differ
diff --git a/docs/src/fonts/ApfelGrotezk-Regular.woff2 b/docs/src/fonts/ApfelGrotezk-Regular.woff2
new file mode 100644
index 000000000..bfb09859a
Binary files /dev/null and b/docs/src/fonts/ApfelGrotezk-Regular.woff2 differ
diff --git a/docs/src/fonts/JetBrainsMono-wght.woff2 b/docs/src/fonts/JetBrainsMono-wght.woff2
new file mode 100644
index 000000000..cd5102a44
Binary files /dev/null and b/docs/src/fonts/JetBrainsMono-wght.woff2 differ
diff --git a/docs/src/fonts/OFL.txt b/docs/src/fonts/OFL.txt
new file mode 100644
index 000000000..7e1f12541
--- /dev/null
+++ b/docs/src/fonts/OFL.txt
@@ -0,0 +1,100 @@
+Fonts bundled with this site
+============================
+
+Apfel Grotezk (ApfelGrotezk-Regular, -Mittel, -Fett)
+  Collletttivo — https://collletttivo.it
+  Licensed under the SIL Open Font License, Version 1.1.
+
+JetBrains Mono (JetBrainsMono-wght, Latin subset of the variable font)
+  Copyright 2020 The JetBrains Mono Project Authors
+  (https://github.com/JetBrains/JetBrainsMono)
+  Licensed under the SIL Open Font License, Version 1.1.
+
+The licence text follows and applies to each font above.
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/docs/src/pages/robots.txt.ts b/docs/src/pages/robots.txt.ts
new file mode 100644
index 000000000..a971be8d9
--- /dev/null
+++ b/docs/src/pages/robots.txt.ts
@@ -0,0 +1,8 @@
+import type { APIRoute } from 'astro';
+
+// Every page is public; the sitemap Starlight generates lists them. Built
+// from the configured site so a preview build points at its own sitemap.
+export const GET: APIRoute = ({ site }) => {
+  const sitemap = new URL(`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}sitemap-index.xml`, site);
+  return new Response(`User-agent: *\nAllow: /\n\nSitemap: ${sitemap.href}\n`);
+};
diff --git a/docs/src/plugins/rehype-table-scroll.mjs b/docs/src/plugins/rehype-table-scroll.mjs
new file mode 100644
index 000000000..144e4837d
--- /dev/null
+++ b/docs/src/plugins/rehype-table-scroll.mjs
@@ -0,0 +1,99 @@
+// Markdown tables: a scroll box around each, and sensible break points in the
+// long identifiers their cells hold.
+//
+// A table spans the content column, and one with more columns than the
+// column has room for must pan rather than run under the contents list. A
+// table element cannot do both: made a scrolling block (Starlight's default)
+// it shrinks to its content, and made a full-width table it cannot scroll. So
+// the table fills the column and a `<div class="ds-table">` wrapper does the
+// scrolling; see "Tables" in foundation.css.
+//
+// Cells hold identifiers, paths and digests that have no spaces. Left alone
+// they either force their column wide or, allowed to break anywhere, crumble
+// a character at a time. Instead each long token gets a `<wbr>` after its own
+// separators — `_ - / . :` — and a long hex digest splits into even pieces of
+// at most sixteen characters, so it wraps where a reader would split it.
+//
+// Kept identical in the UsageBench repository.
+
+/** Tokens shorter than this never need a break. */
+const LONG = 14;
+const SEPARATOR = /[_\-/.:]/;
+const HEX_RUN = /^[0-9a-f]{16,}$/i;
+
+/** Splits one long token into pieces, each ending where a break belongs. */
+function pieces(token) {
+  if (HEX_RUN.test(token)) {
+    // Even pieces of at most sixteen: a 40-character revision in three, a
+    // 64-character digest in four.
+    const size = Math.ceil(token.length / Math.ceil(token.length / 16));
+    return token.match(new RegExp(`.{1,${size}}`, 'g'));
+  }
+  const out = [];
+  let start = 0;
+  for (let i = 0; i < token.length - 1; i++) {
+    if (SEPARATOR.test(token[i])) {
+      out.push(token.slice(start, i + 1));
+      start = i + 1;
+    }
+  }
+  out.push(token.slice(start));
+  return out;
+}
+
+/** Text node → text and `<wbr>` nodes, or null when nothing is long. */
+function breakText(value) {
+  const parts = value.split(/(\s+)/);
+  if (!parts.some((part) => part.length >= LONG && !/\s/.test(part))) return null;
+  const nodes = [];
+  let pending = '';
+  for (const part of parts) {
+    if (part.length < LONG || /\s/.test(part)) {
+      pending += part;
+      continue;
+    }
+    const split = pieces(part);
+    split.forEach((piece, index) => {
+      pending += piece;
+      if (index < split.length - 1) {
+        nodes.push({ type: 'text', value: pending });
+        nodes.push({ type: 'element', tagName: 'wbr', properties: {}, children: [] });
+        pending = '';
+      }
+    });
+  }
+  if (pending) nodes.push({ type: 'text', value: pending });
+  return nodes;
+}
+
+/** @param {any} node */
+function addBreaks(node) {
+  if (!Array.isArray(node.children)) return;
+  node.children = node.children.flatMap((child) => {
+    if (child.type === 'text') return breakText(child.value) ?? [child];
+    addBreaks(child);
+    return [child];
+  });
+}
+
+/** @param {any} node */
+function wrapTables(node) {
+  if (!Array.isArray(node.children)) return;
+  node.children = node.children.map((child) => {
+    if (child.type === 'element' && child.tagName === 'table') {
+      addBreaks(child);
+      return {
+        type: 'element',
+        tagName: 'div',
+        properties: { className: ['ds-table'] },
+        children: [child],
+      };
+    }
+    wrapTables(child);
+    return child;
+  });
+}
+
+export function rehypeTableScroll() {
+  return (/** @type {any} */ tree) => wrapTables(tree);
+}
diff --git a/docs/src/routeData.ts b/docs/src/routeData.ts
new file mode 100644
index 000000000..66618138d
--- /dev/null
+++ b/docs/src/routeData.ts
@@ -0,0 +1,26 @@
+/// <reference types="@astrojs/starlight/locals" />
+
+import { defineRouteMiddleware } from '@astrojs/starlight/route-data';
+
+// Archived snapshot pages were written before each page named its release in
+// its description, so an early freeze's analyzers page shares one sentence
+// with three others and search results cannot tell them apart. The frozen
+// pages stay as they were published; only the description their <head>
+// carries gains the release it belongs to.
+const SNAPSHOT_PAGE = /^snapshots\/v(\d+)-(\d+)-(\d+)(?:\/|$)/;
+const DESCRIPTION_TAGS = new Set(['description', 'og:description']);
+
+export const onRequest = defineRouteMiddleware((context) => {
+  const route = context.locals.starlightRoute;
+  const match = SNAPSHOT_PAGE.exec(route.entry.id);
+  const description = route.entry.data.description;
+  if (!match || !description) return;
+  const version = `v${match[1]}.${match[2]}.${match[3]}`;
+  if (description.includes(version)) return;
+  for (const tag of route.head) {
+    const name = tag.attrs?.name ?? tag.attrs?.property;
+    if (tag.tag === 'meta' && typeof name === 'string' && DESCRIPTION_TAGS.has(name)) {
+      tag.attrs!.content = `Snapshot ${version}: ${description}`;
+    }
+  }
+});
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 52171a0ad..693642aff 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -1,14 +1,35 @@
-/* DataFlowBench accent styling over Starlight defaults. */
+/* DataFlowBench's own layer over the shared foundation (foundation.css, which
+   is kept identical to UsageBench's copy). This file holds what is particular
+   to this site: its cyan accent, the analyzer palette, and the page widths its
+   charts need. */
+
+/* ---- Accent ---------------------------------------------------------------
+   Two sets of names, on purpose. The `--sl-color-accent*` trio is Bifrost's
+   identity colour on every chart (vendor slot 0) as well as Starlight's
+   accent, so its values are the ones published since v0.1.0 and must not
+   move. The `--ds-accent*` tokens are the interface accent — focus rings,
+   selected controls, list ticks, links — tuned for contrast on the new
+   grounds from the same cyan. */
 :root {
   --sl-color-accent-low: #10222b;
   --sl-color-accent: #0e7490;
   --sl-color-accent-high: #a5f3fc;
+
+  --ds-accent: #2aa7c2;
+  --ds-accent-text: #8fe3f2;
+  --ds-accent-low: #0c1d22;
+  --ds-accent-line: #235d6b;
 }
 
 :root[data-theme='light'] {
   --sl-color-accent-low: #cffafe;
   --sl-color-accent: #0e7490;
   --sl-color-accent-high: #155e75;
+
+  --ds-accent: #0e7490;
+  --ds-accent-text: #0b5f76;
+  --ds-accent-low: #dcf0f3;
+  --ds-accent-line: #7eb8c5;
 }
 
 /* Vendor colour slots 4-7, added for the four analyzers v0.6.0 introduced.
@@ -33,139 +54,64 @@
 :root[data-theme='light'] {
   --dfb-vendor-6: hsl(150, 90%, 28%);
   --dfb-vendor-7: hsl(310, 80%, 42%);
-}
 
-table code {
-  white-space: nowrap;
+  /* Starlight's light orange and green (lightness 60% and 46%) sit near 1.6:1
+     on the light grounds, too faint for the chart labels, counts and legend
+     text set in them. The hues — and so the identities a reader learned —
+     stay; only the lightness drops, to about 4:1 or better on every ground.
+     Red and purple come down with them so no slot reads paler than the rest.
+     The dark theme, the primary one, is untouched. */
+  --sl-color-orange: hsl(38, 95%, 33%);
+  --sl-color-green: hsl(101, 75%, 30%);
+  --sl-color-red: hsl(339, 75%, 46%);
+  --sl-color-purple: hsl(281, 70%, 48%);
 }
 
 :root {
-  /* Roughly 75 characters at the body size: the measure the prose on these
-     pages was written against. */
-  --dfb-measure: 46rem;
+  /* The prose measure: roughly 75 characters at the body size. */
+  --dfb-measure: var(--ds-measure);
 }
 
-/* Desktop content width.
-   ----------------------------------------------------------------------
-   Starlight publishes a 45rem content column, which is the right measure for
-   a page of prose and the wrong one for these pages: almost everything here
-   is a grid of cards, a bar panel or a viewBox chart, and at 45rem those stack
-   into a column several screens tall while two thirds of a desktop display
-   sits empty.
-
-   The fix is the one variable the whole layout is built from rather than a
-   per-component breakout, so every grid, chart and table on every page gets
-   the room at once. The grids are already `auto-fit minmax(...)`, so they
-   spend the extra width on columns without any further help.
-
-   The width is a clamp, not a step, so it grows with the viewport and never
-   shrinks below what Starlight published:
-     - the lower bound is 45rem, so nothing below the 72rem breakpoint — every
-       phone and tablet — is touched, and neither is a narrow desktop window;
-     - the middle term leaves room for the chrome that is actually on the page:
-       the nav sidebar always, plus the table-of-contents sidebar on the pages
-       that have one (Starlight gives the two sidebars equal width), and 6rem
-       of gutter;
-     - the upper bound is 80rem, past which a wider column stops buying
-       columns and starts buying whitespace.
-
-   `screen and` keeps this out of print, where Starlight sets its own
-   full-bleed width on `.main-pane`. */
-@media screen and (min-width: 72rem) {
-  :root[data-has-sidebar] {
-    --sl-content-width: clamp(
-      45rem,
-      calc(100vw - var(--sl-sidebar-width) - 6rem),
-      80rem
-    );
-  }
-
-  /* A page with a table of contents pays for a second sidebar, and Starlight
-     splits whatever is left over between the content pane and the contents
-     pane — so every rem of gutter asked for here costs the column two. The
-     reservation is halved to match: the same gutter, half the price. */
-  :root[data-has-sidebar][data-has-toc] {
-    --sl-content-width: clamp(
-      45rem,
-      calc(100vw - (2 * var(--sl-sidebar-width)) - 3rem),
-      80rem
-    );
-  }
-
-  /* A wider column must widen the grids and the charts, not the sentences.
-     Running text keeps a fixed measure and everything else — grids, tables,
-     charts, card strips, the components' own containers — takes the full
-     width.
-
-     The rule reaches paragraphs at any depth, because the prose that would
-     otherwise run to 130 characters is as often a chart's explanatory
-     paragraph inside a component as it is a top-level one. It is a
-     `max-width`, so on everything already narrower than the measure — every
-     paragraph inside a card, a bar row or a dialog panel — it does nothing.
-     Lists that carry a class are layout (legends, chip strips, coverage
-     lists), not prose, and are left alone. */
-  .sl-markdown-content :where(p, ul:not([class]), ol:not([class]), blockquote, dl) {
-    max-width: var(--dfb-measure);
-  }
+/* A wider column widens the grids and the charts, never the sentences.
+   Running text keeps one fixed measure and everything else — grids, tables,
+   charts, card strips, the components' own containers — takes the full width.
 
-  /* On the landing (recognized by its decision landscape), top-level explanatory
-     paragraphs flow as two newspaper columns instead of a capped single
-     measure that leaves the right third of the wide column dead. Each column
-     is ~half the content width, i.e. the same readable measure the cap
-     enforces — the width is spent on flow, not on line length. Short
-     paragraphs simply occupy the first column; the eyebrow label stays as
-     is. Browsers without :has() keep the capped single column.
+   The rule reaches paragraphs at any depth, because the prose that would
+   otherwise run to 130 characters is as often a chart's explanatory paragraph
+   inside a component as it is a top-level one. It is a `max-width`, so on
+   everything already narrower than the measure — every paragraph inside a
+   card, a bar row or a dialog panel — it does nothing. Lists that carry a
+   class are layout (legends, chip strips, coverage lists), not prose, and are
+   left alone.
 
-     This applies to a paragraph *on its own*, where the two columns are one
-     continuous read: down the left, then down the right, and nothing else is
-     interleaved. It must never be given to two adjacent paragraphs, which
-     would put the tail of the first at the top of the right column and the
-     tail of the second directly beneath it — two half-paragraphs stacked in
-     reading order, which is not the order they are meant to be read in. Runs
-     of adjacent paragraphs use `.prose-columns` below, which flows the whole
-     run through one multicol box instead. */
-  .sl-markdown-content:has(.decision-landscape) > p:not(.eyebrow):not(.subtitle) {
-    columns: 2;
-    column-gap: 2.5rem;
-    max-width: none;
-  }
+   Earlier versions flowed long runs of prose as two newspaper columns to use
+   the width. On a screen that means reading down one column, scrolling back
+   up and reading down the next, so the prose now keeps one column and the
+   width goes to the figures. `.prose-columns` remains as a plain wrapper. */
+.sl-markdown-content :where(p, ul:not([class]), ol:not([class]), blockquote, dl) {
+  max-width: var(--dfb-measure);
+}
+.sl-markdown-content .prose-columns > p {
+  max-width: var(--dfb-measure);
+}
 
-  /* A run of consecutive paragraphs as one newspaper block: every paragraph
-     of the run flows down the left column before any of it appears on the
-     right. The wrapper is what carries the columns, so the paragraphs inside
-     are ordinary block children and the rule above no longer reaches them. */
-  .sl-markdown-content:has(.decision-landscape) .prose-columns {
-    columns: 2;
-    column-gap: 2.5rem;
-    max-width: none;
-  }
-  .sl-markdown-content:has(.decision-landscape) .prose-columns > p {
-    max-width: none;
-  }
-  /* Paragraphs may straddle the column break, and should: the balancer needs
-     to split something, and a run of two or three long paragraphs that each
-     refuse to break leaves one column half-empty. A continuation is legible
-     here in a way it was not under the old per-paragraph rule — the right
-     column carries one text in reading order, so the reader arrives at the
-     top of it from the bottom of the left. Orphans and widows are held at
-     three lines so a break can never strand one line at either end. */
-  .sl-markdown-content:has(.decision-landscape) .prose-columns > * {
-    orphans: 3;
-    widows: 3;
-  }
+/* Tables a step below the prose, as on UsageBench: the evidence tables here
+   hold ids and figures, and the smaller size keeps their identifier columns
+   to two or three lines inside the desktop column instead of one piece to a
+   line. */
+.sl-markdown-content table:not(:where(.not-content *)) {
+  font-size: 0.875rem;
 }
 
 /* The two viewBox charts scale with their container in both axes, so an
    unbounded column would spend the vertical space the grids just gave back on
    taller pictures. Past roughly 64rem the labels have stopped gaining
    legibility and the plot has stopped gaining resolution, so that is where
-   they stop growing, centred in whatever column they are given. Semantics,
-   geometry and every number inside the SVG are untouched — this is the
-   rendered box only. */
+   they stop growing. Semantics, geometry and every number inside the SVG are
+   untouched — this is the rendered box only. */
 .evolution-chart,
 .ranking-chart {
   max-width: 64rem;
-  margin-inline: auto;
 }
 
 /* Collapsed data tables.
@@ -182,70 +128,67 @@ table code {
    latency ribbon use. Those switch between views of one region; there is no
    competing view here, only a table that may be shown or not, and inventing
    a second radio state for that would be a toggle with one meaningful
-   setting. */
-details.data-table {
+   setting.
+
+   The same look serves every "Exact figures" / "Show the data table"
+   disclosure on the site, whatever its class: a hairline row with a plus that
+   turns into a cross. */
+:is(details.data-table, details.decision-data, details.landscape-data, details.historical-progress, details.figure-notes) {
   margin-top: 1rem;
-  border: 1px solid var(--sl-color-hairline);
-  border-radius: 0.75rem;
-  background: var(--sl-color-bg-sidebar);
+  border-top: 1px solid var(--ds-line);
+  border-bottom: 1px solid var(--ds-line);
+  background: transparent;
 }
 
-details.data-table > summary {
+:is(details.data-table, details.decision-data, details.landscape-data, details.historical-progress, details.figure-notes) > summary {
   cursor: pointer;
   list-style: none;
-  padding: 0.45rem 0.75rem;
+  padding: 0.6rem 0;
   font-size: var(--sl-text-sm);
-  color: var(--sl-color-gray-2);
-  border-radius: 0.75rem;
+  font-weight: 500;
+  color: var(--ds-text-2);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: space-between;
+  gap: 0.75rem;
+  transition: color var(--ds-duration) ease;
 }
 
 /* Safari still needs the WebKit pseudo-element to drop the native triangle. */
-details.data-table > summary::-webkit-details-marker {
+:is(details.data-table, details.decision-data, details.landscape-data, details.historical-progress, details.figure-notes) > summary::-webkit-details-marker {
   display: none;
 }
 
-details.data-table > summary::before {
-  content: '';
+:is(details.data-table, details.decision-data, details.landscape-data, details.historical-progress, details.figure-notes) > summary::after {
+  content: '+';
   flex: none;
-  width: 0;
-  height: 0;
-  border-top: 0.3rem solid transparent;
-  border-bottom: 0.3rem solid transparent;
-  border-left: 0.42rem solid currentColor;
-  transition: transform 0.15s ease;
+  font-family: var(--ds-font-mono);
+  font-size: 1.05rem;
+  line-height: 1;
+  color: var(--ds-text-3);
+  transition: transform var(--ds-duration) ease;
 }
 
-details.data-table[open] > summary::before {
-  transform: rotate(90deg);
+:is(details.data-table, details.decision-data, details.landscape-data, details.historical-progress, details.figure-notes)[open] > summary::after {
+  transform: rotate(45deg);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  details.data-table > summary::before {
-    transition: none;
-  }
-}
-
-details.data-table > summary:hover {
-  color: var(--sl-color-white);
+:is(details.data-table, details.decision-data, details.landscape-data, details.historical-progress, details.figure-notes) > summary:hover {
+  color: var(--ds-text);
 }
 
-details.data-table > summary:focus-visible {
-  outline: 2px solid var(--sl-color-accent-high);
+:is(details.data-table, details.decision-data, details.landscape-data, details.historical-progress, details.figure-notes) > summary:focus-visible {
+  outline: 2px solid var(--ds-accent);
   outline-offset: 2px;
 }
 
 details.data-table[open] > summary {
-  border-bottom: 1px solid var(--sl-color-hairline);
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
+  border-bottom: 1px solid var(--ds-line-soft);
 }
 
 details.data-table > .table-scroll {
   overflow-x: auto;
-  padding: 0 0.75rem 0.25rem;
+  padding: 0 0 0.75rem;
 }
 
 /* The content area's global sibling rule adds a top margin to every element
@@ -255,6 +198,13 @@ details.data-table > .table-scroll > table {
   margin-top: 0.75rem;
 }
 
+/* Numbers in the site's tables line up: the mono's figures are tabular. */
+.sl-markdown-content :is(td, th) :is(.num, .ds-num) {
+  font-family: var(--ds-font-mono);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
 /* In-page anchor ergonomics.
    ----------------------------------------------------------------------
    The landing page's section strip and the snapshot pages' "On this page"
diff --git a/docs/src/styles/foundation.css b/docs/src/styles/foundation.css
new file mode 100644
index 000000000..bbddb4c6b
--- /dev/null
+++ b/docs/src/styles/foundation.css
@@ -0,0 +1,1278 @@
+/* ==========================================================================
+   Benchmark site foundation
+   --------------------------------------------------------------------------
+   Shared, byte for byte, by the DataFlowBench and UsageBench documentation
+   sites: edit it in one repository and copy it to the other. Everything
+   site-specific — the accent colour, the analyzer palette, page layout — lives
+   in each site's own stylesheet, which loads after this one and sets the
+   `--ds-accent*` tokens this file reads.
+
+   The language is borrowed from the Brokk SlopCop design system and turned
+   down for reading: a near-black ground, bone-white type, hairline rules and
+   chamfered panels, with one accent per site and nothing rounded, glowing or
+   decorative. Separation comes from hairlines, not from fills. SlopCop's
+   display face and its red are deliberately not carried over: these are
+   reference pages, read for minutes at a time, not a landing page.
+
+   Starlight's own styles live in cascade layers, so every rule here — which is
+   unlayered — wins over them without `!important`.
+   ========================================================================== */
+
+/* ---- Type ---------------------------------------------------------------
+   Apfel Grotezk for everything a reader reads; JetBrains Mono for evidence
+   only — identifiers, digests, paths, code and the numbers in tables and
+   charts (Apfel's figures are proportional and it has no `tnum` feature, so
+   any column of numbers is set in the mono). Both are OFL; see
+   `src/fonts/OFL.txt`. */
+@font-face {
+  font-family: 'Apfel Grotezk';
+  src: url('../fonts/ApfelGrotezk-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Apfel Grotezk';
+  src: url('../fonts/ApfelGrotezk-Mittel.woff2') format('woff2');
+  font-weight: 500 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Apfel Grotezk';
+  src: url('../fonts/ApfelGrotezk-Fett.woff2') format('woff2');
+  font-weight: 700 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('../fonts/JetBrainsMono-wght.woff2') format('woff2-variations');
+  font-weight: 100 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ---- Tokens: dark (the primary theme) ------------------------------------ */
+:root {
+  color-scheme: dark;
+
+  /* Grounds, darkest out. They differ by a few percent on purpose. */
+  --ds-canvas: #07080a;
+  --ds-well: #0b0c0e;
+  --ds-surface: #0e1012;
+  --ds-control: #131517;
+  --ds-surface-hover: #17191c;
+
+  /* Hairlines. */
+  --ds-line-soft: #1f2124;
+  --ds-line: #2e3134;
+  --ds-line-strong: #45484b;
+
+  /* Text. All three clear 4.5:1 on every ground above. */
+  --ds-text: #f2f0eb;
+  --ds-text-2: #c2c0bb;
+  --ds-text-3: #9a9da0;
+
+  /* The accent is the site's. These are neutral fallbacks only. */
+  --ds-accent: #8a8d90;
+  --ds-accent-text: #d6d4cf;
+  --ds-accent-low: #16181a;
+  --ds-accent-line: #5d6063;
+
+  /* Figures and code. */
+  --ds-code-text: #d4d1cb;
+
+  --ds-shadow-panel: 0 18px 40px rgb(0 0 0 / 0.32);
+  --ds-shadow-float: 0 12px 28px rgb(0 0 0 / 0.45);
+
+  --ds-font: 'Apfel Grotezk', ui-sans-serif, system-ui, -apple-system,
+    'Segoe UI', sans-serif;
+  --ds-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
+    Consolas, monospace;
+
+  --ds-duration: 160ms;
+  --ds-measure: 45rem;
+
+  /* One spacing scale for everything the components lay out. Paragraphs keep
+     Starlight's 1rem flow; a figure, grid or statement sits `--ds-space-lg`
+     from its neighbours; a caption sits `--ds-space-sm` under its figure; the
+     inside of a card is padded `--ds-space-md`–`lg` and separated in `sm`s. */
+  --ds-space-2xs: 0.25rem;
+  --ds-space-xs: 0.5rem;
+  --ds-space-sm: 0.75rem;
+  --ds-space-md: 1rem;
+  --ds-space-lg: 1.5rem;
+  --ds-space-xl: 2.5rem;
+  --ds-card-pad: 1.25rem;
+}
+
+/* ---- Tokens: light ------------------------------------------------------
+   Warm paper rather than white, ink rather than black, the same hairline
+   structure. The site stylesheet sets light accents alongside. */
+:root[data-theme='light'] {
+  color-scheme: light;
+
+  --ds-canvas: #f7f6f2;
+  --ds-well: #efeee9;
+  --ds-surface: #fbfaf7;
+  --ds-control: #f1f0eb;
+  --ds-surface-hover: #ebeae4;
+
+  --ds-line-soft: #e4e2dc;
+  --ds-line: #d2d0c9;
+  --ds-line-strong: #a9a7a0;
+
+  --ds-text: #15171a;
+  --ds-text-2: #3a3d41;
+  --ds-text-3: #5c5f63;
+
+  --ds-accent: #5c5f63;
+  --ds-accent-text: #2b2d30;
+  --ds-accent-low: #ebeae4;
+  --ds-accent-line: #a9a7a0;
+
+  --ds-code-text: #2a2c2f;
+
+  --ds-shadow-panel: 0 14px 32px rgb(40 36 28 / 0.08);
+  --ds-shadow-float: 0 10px 24px rgb(40 36 28 / 0.14);
+}
+
+/* ---- The chamfer ---------------------------------------------------------
+   Nothing is rounded. Controls and panels have their corners cut, drawn with
+   `corner-shape: bevel` so the border, the fill, the shadow and the focus
+   ring all follow the cut and nothing inside is clipped (the chart tooltips
+   and the dialog's scroll area both depend on that). A browser without
+   `corner-shape` gets square corners: the cut tokens are zero until the
+   feature query sets them, so no one ever sees a rounded fallback. Use them
+   as `border-radius: var(--ds-cut-…); corner-shape: bevel;`. */
+:root {
+  --ds-cut-tick: 0px;
+  --ds-cut-badge: 0px;
+  --ds-cut-chip: 0px;
+  --ds-cut-control: 0px;
+  --ds-cut-panel: 0px;
+  --ds-cut-lead: 0px;
+}
+@supports (corner-shape: bevel) {
+  :root {
+    --ds-cut-tick: 2px;
+    --ds-cut-badge: 4px;
+    --ds-cut-chip: 6px;
+    --ds-cut-control: 8px;
+    --ds-cut-panel: 14px;
+    /* The longer cut a chip or paper panel takes at its top-left corner. */
+    --ds-cut-lead: 10px;
+  }
+}
+
+/* ---- Starlight's variables, mapped onto the tokens ----------------------
+   Most components on both sites read Starlight's grey ramp and hairlines, so
+   this mapping is what carries the palette into them. The hue ramps (orange,
+   green, purple, red, blue) are deliberately left alone: the analyzer
+   palettes are built from them and must not shift. */
+:root,
+::backdrop {
+  --sl-font: var(--ds-font);
+  --sl-font-mono: var(--ds-font-mono);
+
+  --sl-color-white: var(--ds-text);
+  --sl-color-gray-1: #e2e0db;
+  --sl-color-gray-2: var(--ds-text-2);
+  --sl-color-gray-3: var(--ds-text-3);
+  --sl-color-gray-4: #64676b;
+  --sl-color-gray-5: var(--ds-line-strong);
+  --sl-color-gray-6: var(--ds-control);
+  --sl-color-black: var(--ds-canvas);
+
+  --sl-color-text: var(--ds-text-2);
+  --sl-color-bg: var(--ds-canvas);
+  --sl-color-bg-nav: var(--ds-canvas);
+  --sl-color-bg-sidebar: var(--ds-canvas);
+  --sl-color-bg-inline-code: var(--ds-control);
+  --sl-color-hairline-light: var(--ds-line);
+  --sl-color-hairline: var(--ds-line-soft);
+  --sl-color-hairline-shade: var(--ds-canvas);
+  --sl-color-backdrop-overlay: rgb(3 4 5 / 0.72);
+
+  --sl-shadow-md: var(--ds-shadow-float);
+  --sl-shadow-lg: var(--ds-shadow-panel);
+
+  --sl-text-h1: clamp(2rem, 1.5rem + 1.6vw, 2.625rem);
+  --sl-text-h2: 1.75rem;
+  --sl-text-h3: 1.3125rem;
+  --sl-text-h4: 1.125rem;
+  --sl-text-h5: 1rem;
+  --sl-line-height: 1.65;
+  --sl-line-height-headings: 1.15;
+
+  --sl-nav-height: 4rem;
+}
+
+:root[data-theme='light'],
+[data-theme='light'] ::backdrop {
+  --sl-color-white: var(--ds-text);
+  --sl-color-gray-1: #24272a;
+  --sl-color-gray-2: var(--ds-text-2);
+  --sl-color-gray-3: var(--ds-text-3);
+  --sl-color-gray-4: #8d9094;
+  --sl-color-gray-5: var(--ds-line-strong);
+  --sl-color-gray-6: var(--ds-control);
+  --sl-color-gray-7: var(--ds-surface);
+  --sl-color-black: var(--ds-canvas);
+
+  --sl-color-text: var(--ds-text-2);
+  --sl-color-bg: var(--ds-canvas);
+  --sl-color-bg-nav: var(--ds-canvas);
+  --sl-color-bg-sidebar: var(--ds-canvas);
+  --sl-color-bg-inline-code: var(--ds-control);
+  --sl-color-hairline-light: var(--ds-line);
+  --sl-color-hairline: var(--ds-line-soft);
+  --sl-color-hairline-shade: var(--ds-line);
+  --sl-color-backdrop-overlay: rgb(40 36 28 / 0.35);
+}
+
+/* ---- Base -------------------------------------------------------------- */
+body {
+  background: var(--ds-canvas);
+  color: var(--ds-text-2);
+  font-family: var(--ds-font);
+  font-kerning: normal;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+::selection {
+  background: var(--ds-accent-low);
+  color: var(--ds-text);
+}
+
+/* One focus ring everywhere: 2px of the accent, clear of the shape. */
+:focus-visible {
+  outline: 2px solid var(--ds-accent);
+  outline-offset: 3px;
+}
+
+/* ---- Header -------------------------------------------------------------- */
+/* Starlight names both the bar and its inner row `.header`; only the bar
+   draws the rule. */
+header.header {
+  border-bottom: 1px solid var(--ds-line-soft);
+  background: color-mix(in srgb, var(--ds-canvas) 92%, transparent);
+  backdrop-filter: blur(8px);
+}
+
+.site-title {
+  gap: 0.6rem;
+  font-size: 1.3125rem;
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  color: var(--ds-text);
+}
+.site-title img {
+  height: 1.6rem;
+  width: auto;
+}
+
+button[data-open-modal] {
+  border-radius: var(--ds-cut-control);
+  corner-shape: bevel;
+}
+@media (min-width: 50rem) {
+  button[data-open-modal] {
+    border-color: var(--ds-line-strong);
+    background-color: var(--ds-control);
+    color: var(--ds-text-3);
+    transition:
+      border-color var(--ds-duration) ease,
+      color var(--ds-duration) ease;
+  }
+  button[data-open-modal]:hover {
+    border-color: var(--ds-accent-line);
+    color: var(--ds-text);
+  }
+}
+button[data-open-modal] > kbd {
+  border-radius: var(--ds-cut-badge);
+  corner-shape: bevel;
+  background-color: var(--ds-surface);
+  font-family: var(--ds-font-mono);
+}
+
+site-search dialog {
+  border-radius: var(--ds-cut-panel);
+  corner-shape: bevel;
+  border-color: var(--ds-line-strong);
+  background-color: var(--ds-surface);
+}
+
+starlight-theme-select select,
+starlight-lang-select select {
+  font-family: var(--ds-font);
+}
+
+/* ---- Page geometry -------------------------------------------------------
+   The content and its contents list travel together as one block right of
+   the sidebar: the column of content first, then a narrow contents column
+   beside it. The block is the same width on every page, so the text and the
+   contents list sit in the same place on every page, and anything wide —
+   tables, charts, card grids — fits the column rather than moving it.
+
+   On a large display the room the block leaves is split one part left to
+   two right, so the text lands a little left of centre, where the eye
+   starts, without a wide empty margin beside the sidebar. On a narrower
+   display the block simply fills the room, one gutter each side, and the
+   contents list and its gap narrow before the column does. Pages without a
+   contents list give its room to the content.
+
+   On a large display the whole scale grows a little — 16px at 1440px wide,
+   18px at 2560px — so the sidebars stay readable. Breakpoints are unaffected:
+   media queries resolve rem against the browser default, not this size. */
+html {
+  font-size: clamp(100%, 0.8393rem + 0.1786vw, 112.5%);
+}
+:root {
+  --sl-sidebar-width: 17rem;
+  --ds-column: 56rem;
+  --sl-content-width: var(--ds-column);
+  --ds-toc-width: clamp(11rem, 16vw - 1rem, 14rem);
+  --ds-toc-gap: clamp(2rem, 6vw - 3.5rem, 3rem);
+  --ds-page-pad: clamp(2.5rem, 4vw, 4rem);
+  --ds-page-width: calc(var(--ds-column) + var(--ds-toc-gap) + var(--ds-toc-width));
+  --ds-page-lead: 0.3333;
+}
+@media screen and (min-width: 72rem) {
+  :root[data-has-sidebar] {
+    --sl-content-pad-x: var(--ds-page-pad);
+  }
+  :root[data-has-sidebar] .main-frame > .lg\:sl-flex {
+    --ds-page-start: max(
+      var(--ds-page-pad),
+      (100% - var(--ds-page-width)) * var(--ds-page-lead)
+    );
+    margin-inline-start: var(--ds-page-start);
+    width: min(var(--ds-page-width), 100% - var(--ds-page-start) - var(--ds-page-pad));
+  }
+  /* The content pane takes the block; the panels inside it add no gutter of
+     their own, and their rules span only the content. */
+  :root[data-has-sidebar] .main-pane {
+    order: 1;
+    flex: 1 1 0;
+    min-width: 0;
+    width: auto;
+  }
+  :root[data-has-sidebar] .main-pane .content-panel {
+    padding-inline: 0;
+  }
+  :root[data-has-sidebar] .main-pane .sl-container {
+    max-width: none;
+    margin-inline: 0;
+  }
+  /* Starlight pins the contents pane to the window at full width; here it
+     is a column of the block that follows the reader down the page. */
+  :root[data-has-sidebar] .right-sidebar-container {
+    order: 2;
+    flex: 0 0 var(--ds-toc-width);
+    width: auto;
+    margin-inline-start: var(--ds-toc-gap);
+  }
+  :root[data-has-sidebar] .right-sidebar {
+    position: sticky;
+    top: var(--sl-nav-height);
+    width: auto;
+    height: auto;
+    max-height: calc(100vh - var(--sl-nav-height));
+    padding-top: 0;
+    border-inline-start: 0;
+  }
+  :root[data-has-sidebar] .right-sidebar-panel {
+    padding: 2rem 0;
+  }
+  :root[data-has-sidebar] .right-sidebar-panel .sl-container {
+    width: auto;
+    max-width: none;
+  }
+  /* The search box starts where the content does: the header's first column
+     runs to the sidebar's edge plus the block's offset. The percentage is the
+     header row's width, which is the window's less the bar's own padding. */
+  :root[data-has-sidebar] .header {
+    --__main-column-fr: max(
+      var(--ds-page-pad),
+      (
+          100% + 2 * var(--sl-nav-pad-x) - var(--sl-sidebar-width) -
+            var(--ds-page-width)
+        ) * var(--ds-page-lead)
+    );
+  }
+}
+
+/* ---- Sidebar -------------------------------------------------------------
+   Section labels quiet, links a step quieter, and the current page marked by
+   a short accent rule rather than a filled pill. */
+.sidebar-pane {
+  border-inline-end: 1px solid var(--ds-line-soft);
+}
+.sidebar-content .large,
+.sidebar-content a {
+  font-size: 0.9375rem;
+}
+.sidebar-content .large {
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: var(--ds-text);
+}
+.sidebar-content a {
+  position: relative;
+  border-radius: 0;
+  color: var(--ds-text-3);
+  transition: color var(--ds-duration) ease;
+}
+.sidebar-content a:hover,
+.sidebar-content a:focus-visible {
+  color: var(--ds-text);
+}
+/* The top-level entries sit on the same step as a group label. */
+.sidebar-content .top-level > li > a {
+  color: var(--ds-text-2);
+  font-weight: 500;
+}
+.sidebar-content [aria-current='page'],
+.sidebar-content [aria-current='page']:hover,
+.sidebar-content [aria-current='page']:focus {
+  color: var(--ds-text);
+  background: transparent;
+  font-weight: 500;
+}
+.sidebar-content [aria-current='page']::before {
+  content: '';
+  position: absolute;
+  inset-block: 0.35em;
+  inset-inline-start: -1px;
+  width: 2px;
+  background: var(--ds-accent);
+}
+/* Top-level current pages have no rail to sit on; give them a tick instead. */
+.sidebar-content .top-level > li > a[aria-current='page']::before {
+  inset-inline-start: -0.35rem;
+}
+.sidebar-content ul ul li {
+  border-inline-start-color: var(--ds-line-soft);
+}
+.sidebar-content summary {
+  border-radius: 0;
+}
+.sidebar-content .caret {
+  color: var(--ds-text-3);
+}
+
+/* ---- Right-hand contents --------------------------------------------------- */
+.right-sidebar-panel h2 {
+  font-size: var(--sl-text-sm);
+  font-weight: 500;
+  color: var(--ds-text-3);
+  letter-spacing: 0;
+}
+.right-sidebar-panel a,
+starlight-toc a {
+  font-size: var(--sl-text-sm);
+  line-height: 1.4;
+  border-radius: 0;
+  color: var(--ds-text-3);
+}
+.right-sidebar-panel a:hover {
+  color: var(--ds-text);
+}
+starlight-toc a[aria-current='true'] {
+  color: var(--ds-accent-text);
+  box-shadow: inset 2px 0 0 var(--ds-accent);
+}
+.right-sidebar {
+  border-inline-start-color: var(--ds-line-soft);
+}
+
+/* ---- Page title and content --------------------------------------------- */
+.content-panel {
+  border-top-color: var(--ds-line-soft);
+}
+.content-panel h1,
+#_top {
+  font-weight: 500;
+  letter-spacing: -0.035em;
+  line-height: 1.08;
+  color: var(--ds-text);
+  text-wrap: balance;
+}
+
+.sl-markdown-content {
+  font-size: 1.0625rem;
+}
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) {
+  font-weight: 500;
+  color: var(--ds-text);
+  text-wrap: balance;
+}
+.sl-markdown-content h2 {
+  letter-spacing: -0.03em;
+  line-height: 1.12;
+}
+.sl-markdown-content h3 {
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+.sl-markdown-content h4,
+.sl-markdown-content h5 {
+  letter-spacing: -0.01em;
+}
+/* A section starts with a hairline across the column, not with space alone. */
+.sl-markdown-content :is(h2, .sl-heading-wrapper.level-h2):not(:first-child) {
+  margin-top: 2.75rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--ds-line);
+}
+.sl-markdown-content .sl-heading-wrapper.level-h2 > h2 {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+.sl-markdown-content :is(h3, .sl-heading-wrapper.level-h3):not(:first-child) {
+  margin-top: 2.25rem;
+}
+.sl-markdown-content .sl-anchor-link {
+  color: var(--ds-text-3);
+}
+
+.sl-markdown-content :is(p, li, dd) {
+  text-wrap: pretty;
+}
+.sl-markdown-content strong {
+  color: var(--ds-text);
+  font-weight: 500;
+}
+
+.sl-markdown-content a:not(:where(.not-content *)) {
+  color: var(--ds-accent-text);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
+  transition: text-decoration-color var(--ds-duration) ease;
+}
+.sl-markdown-content a:not(:where(.not-content *)):hover {
+  text-decoration-color: currentColor;
+}
+
+/* Lists: 6px octagon ticks in the accent. Ordered lists keep their numbers. */
+.sl-markdown-content ul:not([class]):not(:where(.not-content *)) {
+  list-style: none;
+  padding-inline-start: 1.25rem;
+}
+.sl-markdown-content ul:not([class]):not(:where(.not-content *)) > li {
+  position: relative;
+}
+.sl-markdown-content ul:not([class]):not(:where(.not-content *)) > li::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: -1.1rem;
+  top: 0.66em;
+  width: 6px;
+  height: 6px;
+  background: var(--ds-accent);
+  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
+}
+.sl-markdown-content ol:not([class]) > li::marker {
+  color: var(--ds-text-3);
+  font-family: var(--ds-font-mono);
+  font-size: 0.85em;
+}
+
+.sl-markdown-content hr {
+  border-color: var(--ds-line);
+}
+
+.sl-markdown-content blockquote {
+  border-inline-start: 1px solid var(--ds-line-strong);
+  color: var(--ds-text-2);
+}
+
+/* Inline code is evidence: mono, a hairline chip, never coloured by kind. */
+.sl-markdown-content :not(pre) > code:not(:where(.not-content *)),
+.sl-markdown-content code:not(:where(pre *, .not-content *)) {
+  font-family: var(--ds-font-mono);
+  font-size: 0.8em;
+  color: var(--ds-code-text);
+  background: var(--ds-control);
+  border: 1px solid var(--ds-line-soft);
+  border-radius: var(--ds-cut-badge);
+  corner-shape: bevel;
+  padding: 0.05em 0.3em;
+  overflow-wrap: anywhere;
+}
+.sl-markdown-content a code:not(:where(pre *, .not-content *)) {
+  color: inherit;
+}
+
+kbd {
+  font-family: var(--ds-font-mono);
+}
+
+/* ---- Tables --------------------------------------------------------------
+   Plain tables on the canvas: a quiet head under a rule, body rows divided by
+   the softest hairline, no zebra, no side borders. */
+.sl-markdown-content table:not(:where(.not-content *)) {
+  border-collapse: collapse;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+/* Every table spans the column, so tables line up with each other and with
+   the rules between sections. A table with more columns than the column has
+   room for pans inside its box (the `.ds-table` wrapper every markdown table
+   gets, from rehype-table-scroll) rather than running under the contents
+   list, and it pans before its cells get too narrow to read: each column is
+   owed about 5rem — 4rem from eight columns up, where they are mostly
+   figures — so a table of many columns keeps a floor of its own, short of
+   the column on a 1440px display.
+   Text wraps between words, and identifiers and digests only at the break
+   points the plugin gives them — after `_ - / . :`, and in even pieces of
+   at most sixteen characters of a hash — never mid-token (inline code
+   elsewhere may break anywhere; in a cell that let the column shrink below
+   its longest token and split `v0.2.0`). Numbers, the right-aligned
+   cells, never break; their headers wrap over them. */
+.sl-markdown-content .ds-table {
+  overflow-x: auto;
+}
+.sl-markdown-content .ds-table > table {
+  display: table;
+  width: 100%;
+  overflow: visible;
+}
+.sl-markdown-content .ds-table > table:has(tr > :nth-child(4)) { min-width: 20rem; }
+.sl-markdown-content .ds-table > table:has(tr > :nth-child(5)) { min-width: 25rem; }
+.sl-markdown-content .ds-table > table:has(tr > :nth-child(6)) { min-width: 30rem; }
+.sl-markdown-content .ds-table > table:has(tr > :nth-child(7)) { min-width: 35rem; }
+.sl-markdown-content .ds-table > table:has(tr > :nth-child(8)) { min-width: 36rem; }
+.sl-markdown-content .ds-table > table:has(tr > :nth-child(10)) { min-width: 42rem; }
+.sl-markdown-content .ds-table > table:has(tr > :nth-child(12)) { min-width: 48rem; }
+.sl-markdown-content .ds-table :is(td, th),
+.sl-markdown-content .ds-table :is(td, th) code {
+  overflow-wrap: normal;
+}
+.sl-markdown-content .ds-table td code {
+  white-space: normal;
+}
+.sl-markdown-content .ds-table td[align='right'] {
+  white-space: nowrap;
+}
+.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+  border: 0;
+  border-bottom: 1px solid var(--ds-line-soft);
+  padding: 0.55rem 1.1rem 0.55rem 0;
+  background: transparent;
+  vertical-align: top;
+}
+.sl-markdown-content :is(th, td):last-child:not(:where(.not-content *)) {
+  padding-inline-end: 0;
+}
+/* Tables of many columns are mostly short figures: a tighter gap between
+   them keeps a twelve-column table inside a 1440px display. */
+.sl-markdown-content .ds-table > table:has(tr > :nth-child(8)) :is(th, td):not(:last-child) {
+  padding-inline-end: 0.7rem;
+}
+.sl-markdown-content thead th:not(:where(.not-content *)) {
+  border-bottom: 1px solid var(--ds-line);
+  color: var(--ds-text-3);
+  font-size: var(--sl-text-xs);
+  font-weight: 500;
+  text-wrap: balance;
+}
+.sl-markdown-content tbody th:not(:where(.not-content *)) {
+  color: var(--ds-text);
+  font-weight: 500;
+}
+.sl-markdown-content tbody tr:not(:where(.not-content *)) {
+  background: transparent;
+}
+.sl-markdown-content td:not(:where(.not-content *)) {
+  color: var(--ds-text-2);
+}
+
+/* ---- Code blocks (Expressive Code) ---------------------------------------- */
+.expressive-code {
+  --ec-brdRad: 0px;
+  font-family: var(--ds-font-mono);
+}
+.expressive-code .frame,
+.expressive-code figure {
+  border-radius: var(--ds-cut-control);
+  corner-shape: bevel;
+}
+.expressive-code pre {
+  border-color: var(--ds-line) !important;
+  background: var(--ds-well) !important;
+}
+.expressive-code .frame.has-title .header,
+.expressive-code .frame.is-terminal .header {
+  background: var(--ds-surface) !important;
+  border-color: var(--ds-line) !important;
+}
+.expressive-code .frame .header::before {
+  border-color: var(--ds-line) !important;
+}
+.expressive-code .copy button {
+  border-radius: var(--ds-cut-badge);
+  corner-shape: bevel;
+}
+
+/* ---- Asides --------------------------------------------------------------
+   A notice, not a banner: a quiet panel with a hairline, the aside's kind in
+   its title, and the colour kept to a 2px rule on the leading edge. */
+.starlight-aside {
+  border: 1px solid var(--ds-line);
+  border-inline-start: 2px solid var(--sl-color-asides-border, var(--ds-accent));
+  border-radius: 0;
+  background: var(--ds-surface);
+  padding: 1rem 1.25rem;
+}
+.starlight-aside--note {
+  --sl-color-asides-border: var(--ds-accent);
+  --sl-color-asides-text-accent: var(--ds-accent-text);
+}
+.starlight-aside__title {
+  font-weight: 500;
+  font-size: var(--sl-text-sm);
+  letter-spacing: 0;
+}
+.starlight-aside__content {
+  color: var(--ds-text-2);
+}
+
+/* ---- Details ---------------------------------------------------------------
+   Native disclosures in running content read as an accordion row: the summary
+   in text, a plus that turns into a cross when open. Components that style
+   their own `details` carry a class and are left alone. */
+.sl-markdown-content details:not([class]) {
+  border-top: 1px solid var(--ds-line);
+  border-bottom: 1px solid var(--ds-line);
+  padding: 0;
+}
+.sl-markdown-content details:not([class]) + details:not([class]) {
+  margin-top: 0;
+  border-top: 0;
+}
+/* Starlight's own disclosure look (a side rule and a chevron) gives way to
+   the hairline row for every disclosure in content, classed or not. */
+.sl-markdown-content details:not(:where(.not-content *)) {
+  border-inline-start: 0;
+  padding-inline-start: 0;
+}
+.sl-markdown-content summary:not(:where(.not-content *)) {
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+}
+.sl-markdown-content summary:not(:where(.not-content *))::before {
+  content: none;
+}
+.sl-markdown-content details:not([class]) > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  cursor: pointer;
+  list-style: none;
+  color: var(--ds-text);
+  font-weight: 500;
+}
+.sl-markdown-content details:not([class]) > summary::-webkit-details-marker {
+  display: none;
+}
+.sl-markdown-content details:not([class]) > summary::after {
+  content: '+';
+  flex: none;
+  font-family: var(--ds-font-mono);
+  font-size: 1.1rem;
+  line-height: 1;
+  color: var(--ds-text-3);
+  transition: transform var(--ds-duration) ease;
+}
+.sl-markdown-content details:not([class])[open] > summary::after {
+  transform: rotate(45deg);
+}
+.sl-markdown-content details:not([class]) > summary:hover {
+  color: var(--ds-accent-text);
+}
+.sl-markdown-content details:not([class]) > :not(summary) {
+  margin-bottom: 1rem;
+}
+
+/* ---- Cards, badges, tabs (Starlight's components) ------------------------- */
+.card {
+  border: 1px solid var(--ds-line);
+  border-radius: var(--ds-cut-panel);
+  corner-shape: bevel;
+  background: var(--ds-surface);
+  box-shadow: none;
+}
+.card .icon {
+  border-radius: 0;
+}
+.sl-badge {
+  border-radius: var(--ds-cut-badge);
+  corner-shape: bevel;
+  font-family: var(--ds-font);
+  font-weight: 500;
+}
+starlight-tabs [role='tablist'] {
+  border-bottom-color: var(--ds-line);
+}
+starlight-tabs [role='tab'][aria-selected='true'] {
+  color: var(--ds-text);
+  border-color: var(--ds-accent);
+}
+
+/* ---- Pagination ------------------------------------------------------------
+   Previous and next take slants: each keeps the corners on its outer side
+   square and cuts the two that point the way it goes, so the pair reads as a
+   pair of arrows. */
+.pagination-links a {
+  border: 1px solid var(--ds-line-strong);
+  background: var(--ds-control);
+  box-shadow: none;
+  color: var(--ds-text-3);
+  font-size: var(--sl-text-sm);
+  transition:
+    border-color var(--ds-duration) ease,
+    color var(--ds-duration) ease;
+}
+.pagination-links a[rel='prev'] {
+  border-radius: var(--ds-cut-panel) 0 0 var(--ds-cut-panel);
+  corner-shape: bevel;
+}
+.pagination-links a[rel='next'] {
+  border-radius: 0 var(--ds-cut-panel) var(--ds-cut-panel) 0;
+  corner-shape: bevel;
+}
+.pagination-links a:hover {
+  border-color: var(--ds-accent-line);
+  color: var(--ds-text-2);
+}
+.pagination-links .link-title {
+  font-size: var(--sl-text-xl);
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  color: var(--ds-text);
+}
+
+/* ---- Footer ---------------------------------------------------------------- */
+footer .meta {
+  color: var(--ds-text-3);
+  font-size: var(--sl-text-sm);
+}
+footer .meta a {
+  color: var(--ds-text-3);
+}
+footer .meta a:hover {
+  color: var(--ds-text);
+}
+
+/* ==========================================================================
+   Shared component vocabulary
+   --------------------------------------------------------------------------
+   Classes the sites' own components compose. Component-scoped styles may add
+   to them, but the look of a label, a panel, a chip or a figure is decided
+   here once.
+   ========================================================================== */
+
+/* A small label above a block: sentence case, never uppercase or tracked. */
+.ds-label {
+  margin: 0;
+  font-size: var(--sl-text-xs);
+  font-weight: 500;
+  line-height: 1.4;
+  letter-spacing: 0;
+  color: var(--ds-text-3);
+}
+
+/* A panel: the one surface that sits on the canvas with its own ground. */
+.ds-panel {
+  border: 1px solid var(--ds-line-strong);
+  border-radius: var(--ds-cut-panel);
+  corner-shape: bevel;
+  background: var(--ds-surface);
+  box-shadow: var(--ds-shadow-panel);
+}
+
+/* A quieter frame for a figure or a card within a grid. */
+.ds-frame {
+  border: 1px solid var(--ds-line);
+  border-radius: var(--ds-cut-control);
+  corner-shape: bevel;
+  background: var(--ds-surface);
+}
+
+/* A chip: a toggle, a filter, an in-page link. */
+.ds-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 2.25rem;
+  padding: 0 0.8rem;
+  border: 1px solid var(--ds-line-strong);
+  border-radius: var(--ds-cut-lead) var(--ds-cut-chip) var(--ds-cut-chip)
+    var(--ds-cut-chip);
+  corner-shape: bevel;
+  background: var(--ds-control);
+  color: var(--ds-text-2);
+  font-size: var(--sl-text-sm);
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    border-color var(--ds-duration) ease,
+    color var(--ds-duration) ease,
+    background-color var(--ds-duration) ease;
+}
+.ds-chip:hover {
+  border-color: var(--ds-accent-line);
+  color: var(--ds-text);
+}
+.ds-chip[aria-pressed='true'],
+.ds-chip[aria-current='true'],
+.ds-chip.is-selected {
+  border-color: var(--ds-accent);
+  background: var(--ds-accent-low);
+  color: var(--ds-text);
+}
+
+/* A small quiet button, e.g. "Confusion matrix". */
+.ds-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.7rem;
+  border: 1px solid var(--ds-line-strong);
+  border-radius: var(--ds-cut-lead) var(--ds-cut-badge) var(--ds-cut-badge)
+    var(--ds-cut-badge);
+  corner-shape: bevel;
+  background: var(--ds-control);
+  color: var(--ds-text-2);
+  font-family: var(--ds-font);
+  font-size: var(--sl-text-xs);
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0;
+  text-transform: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    border-color var(--ds-duration) ease,
+    color var(--ds-duration) ease;
+}
+.ds-button:hover {
+  border-color: var(--ds-accent);
+  color: var(--ds-text);
+}
+
+/* Numbers that sit in rows or columns. */
+.ds-num {
+  font-family: var(--ds-font-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+
+/* A statement: the one sentence a page exists to say, set larger than the
+   prose around it and marked by a rule rather than boxed. */
+.ds-statement {
+  margin: var(--ds-space-lg) 0 0;
+  max-width: var(--ds-measure);
+  padding-inline-start: var(--ds-space-lg);
+  border-inline-start: 2px solid var(--ds-accent);
+  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);
+  font-weight: 500;
+  line-height: 1.4;
+  letter-spacing: -0.015em;
+  color: var(--ds-text);
+  text-wrap: pretty;
+}
+.ds-statement strong {
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--ds-accent-text);
+}
+
+/* Figures: a row of numbers, each above what it counts, divided by hairlines.
+   Written as a <dl> of <div><dt/><dd/></div>; the number is shown first. The
+   column count comes from `--ds-figures-cols` (3 by default), and a row of
+   four folds to two by two on a narrow screen. */
+.ds-figures {
+  --ds-figures-cols: 3;
+  display: grid;
+  grid-template-columns: repeat(var(--ds-figures-cols), minmax(0, 1fr));
+  margin: var(--ds-space-lg) 0 0;
+  padding: 0;
+  border-block: 1px solid var(--ds-line);
+}
+.ds-figures > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-2xs);
+  min-width: 0;
+  margin: 0 !important;
+  padding: var(--ds-space-md) var(--ds-space-md) var(--ds-space-md) 0;
+}
+.ds-figures > div + div {
+  padding-inline-start: var(--ds-space-md);
+  border-inline-start: 1px solid var(--ds-line-soft);
+}
+.ds-figures :is(dt, dd) {
+  margin: 0 !important;
+  padding: 0;
+}
+.ds-figures dt {
+  font-size: var(--sl-text-sm);
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--ds-text-2);
+}
+.ds-figures dd {
+  order: -1;
+  font-family: var(--ds-font-mono);
+  font-size: 1.75rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--ds-text);
+}
+.ds-figures .ds-figure-unit {
+  margin-inline-start: 0.35em;
+  font-family: var(--ds-font);
+  font-size: var(--sl-text-sm);
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--ds-text-3);
+}
+/* A second <dd> under the label: provenance, in small type. */
+.ds-figures dd.ds-figure-meta {
+  order: 0;
+  font-family: var(--ds-font);
+  font-size: var(--sl-text-xs);
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0;
+  color: var(--ds-text-3);
+}
+.ds-figures[data-cols='4'] {
+  --ds-figures-cols: 4;
+}
+@media (max-width: 40rem) {
+  .ds-figures[data-cols='4'] {
+    --ds-figures-cols: 2;
+  }
+  .ds-figures[data-cols='4'] > div:nth-child(odd) {
+    padding-inline-start: 0;
+    border-inline-start: 0;
+  }
+  .ds-figures[data-cols='4'] > div:nth-child(n + 3) {
+    border-top: 1px solid var(--ds-line-soft);
+  }
+}
+/* On a phone a row of three reads as a list: each number beside its label. */
+@media (max-width: 36rem) {
+  .ds-figures:not(.is-compact, [data-cols='4']) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .ds-figures:not(.is-compact, [data-cols='4']) > div {
+    display: grid;
+    grid-template-columns: 6rem minmax(0, 1fr);
+    column-gap: var(--ds-space-sm);
+    align-items: baseline;
+    padding: var(--ds-space-sm) 0;
+    border-inline-start: 0;
+  }
+  .ds-figures:not(.is-compact, [data-cols='4']) > div + div {
+    padding-inline-start: 0;
+    border-inline-start: 0;
+    border-top: 1px solid var(--ds-line-soft);
+  }
+  .ds-figures:not(.is-compact, [data-cols='4']) dd:not(.ds-figure-meta) {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    font-size: 1.5rem;
+  }
+  .ds-figures:not(.is-compact, [data-cols='4']) dt,
+  .ds-figures:not(.is-compact, [data-cols='4']) .ds-figure-meta {
+    grid-column: 2;
+  }
+  .ds-figures:not(.is-compact, [data-cols='4']) .ds-figure-unit {
+    display: block;
+    margin: 0;
+    font-size: var(--sl-text-xs);
+  }
+}
+/* Inside a card: smaller numbers, no closing rule, and the card's own inset. */
+.ds-figures.is-compact {
+  margin-top: var(--ds-space-lg);
+  border-top-color: var(--ds-line-soft);
+  border-bottom: 0;
+}
+.ds-figures.is-compact > div {
+  padding-block: var(--ds-space-sm) 0;
+  padding-inline-end: var(--ds-space-sm);
+}
+.ds-figures.is-compact > div + div {
+  padding-inline-start: var(--ds-space-sm);
+}
+.ds-figures.is-compact dt {
+  font-size: var(--sl-text-xs);
+  color: var(--ds-text-3);
+}
+.ds-figures.is-compact dd {
+  font-size: 1.125rem;
+}
+
+/* A card in a grid: a name, one line of identity under it, then its body.
+   The head has no rule under it; spacing separates it. */
+.ds-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0 !important;
+  padding: var(--ds-space-md) var(--ds-card-pad) var(--ds-card-pad);
+  border: 1px solid var(--ds-line);
+  border-radius: var(--ds-cut-control);
+  corner-shape: bevel;
+  background: var(--ds-surface);
+}
+.ds-card > * {
+  margin-top: 0;
+}
+.ds-card-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--ds-space-2xs);
+  margin: 0 0 var(--ds-space-md) !important;
+}
+.ds-card-name {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-xs);
+  margin: 0 !important;
+  font-size: var(--sl-text-base);
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--ds-text);
+}
+.ds-card-meta {
+  margin: 0 !important;
+  overflow: hidden;
+  font-family: var(--ds-font-mono);
+  font-size: var(--sl-text-2xs);
+  line-height: 1.4;
+  color: var(--ds-text-3);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Bars: label, track, value, on one grid so every row in a card — and every
+   card in a grid — starts its track at the same place. */
+.ds-bars {
+  display: grid;
+  grid-template-columns: var(--ds-bars-label, 7rem) minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--ds-space-xs) var(--ds-space-sm);
+  margin: 0;
+}
+.ds-bars > * {
+  margin: 0 !important;
+}
+.ds-bars-label {
+  overflow: hidden;
+  font-size: var(--sl-text-sm);
+  color: var(--ds-text-2);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ds-bars-value {
+  min-width: 3.25rem;
+  font-family: var(--ds-font-mono);
+  font-size: var(--sl-text-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  white-space: nowrap;
+  color: var(--ds-text);
+}
+.ds-bars-value small {
+  font-size: 1em;
+  color: var(--ds-text-3);
+}
+.ds-track {
+  display: flex;
+  height: 0.5rem;
+  overflow: hidden;
+  background: var(--ds-control);
+  box-shadow: inset 0 0 0 1px var(--ds-line-soft);
+}
+.ds-track > * {
+  height: 100%;
+}
+
+/* A split: two things read side by side once the column has room for both
+   at a readable width — a passage and the figures it introduces, or two
+   independent paragraphs. Each keeps its own reading order; nothing flows from
+   one column into the other. Below the breakpoint they simply stack. */
+@media (min-width: 100rem) {
+  .ds-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: start;
+    gap: var(--ds-space-lg) var(--ds-space-xl);
+  }
+  .ds-split > * {
+    margin-top: 0 !important;
+  }
+  .ds-split > :is(p, ul, ol) + :is(p, ul, ol) {
+    max-width: var(--ds-measure);
+  }
+  /* In the second column a row of four figures folds to two by two. */
+  .ds-split .ds-figures[data-cols='4'] {
+    --ds-figures-cols: 2;
+  }
+  .ds-split .ds-figures[data-cols='4'] > div:nth-child(odd) {
+    padding-inline-start: 0;
+    border-inline-start: 0;
+  }
+  .ds-split .ds-figures[data-cols='4'] > div:nth-child(n + 3) {
+    border-top: 1px solid var(--ds-line-soft);
+  }
+}
+
+/* A figure caption. */
+.ds-caption {
+  margin: var(--ds-space-sm) 0 0;
+  max-width: var(--ds-measure);
+  color: var(--ds-text-3);
+  font-size: var(--sl-text-sm);
+  line-height: 1.55;
+}
+
+/* ---- Motion ------------------------------------------------------------------ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0s !important;
+    animation-duration: 0s !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ---- Print ---------------------------------------------------------------- */
+@media print {
+  .ds-panel,
+  .ds-frame {
+    box-shadow: none;
+  }
+}