diff --git a/.npmrc b/.npmrc
index cc0db93..201d08a 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1 @@
 @poolsideai:registry=https://registry.npmjs.org/
-@hugeicons-pro:registry=https://npm.hugeicons.com/
-//npm.hugeicons.com/:_authToken=${HUGEICONS_TOKEN}
\ No newline at end of file
diff --git a/README.md b/README.md
index 0328c10..491a9b4 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,45 @@ Numbers count up, bars rise from the floor. Hover any column for the model name.
 
 ## Examples
 
+### Base + thinking results
+
+Pass `stacked` to coalesce a base model and its thinking variant into one column.
+The thinking result is automatically 40% darker. The larger value stays above the
+full bar, while the smaller value is shown inside the inset bar. Stacked charts
+apply the same minimum width to every column so decimal labels remain readable.
+Their tooltips put the model name on its own line, followed by color-keyed Base
+and Thinking values.
+
+```svelte
+<PoolEval
+  data={[
+    { value: 46.3, provider: 'poolside', label: 'Poolside Nova', highlight: true },
+    { value: 57.9, provider: 'poolside', label: 'Poolside Nova Thinking' },
+    { value: 55.4, provider: 'deepseek', label: 'DeepSeek V4' },
+  ]}
+  stacked
+  max={100}
+  title="SWE-bench Pro"
+/>
+```
+
+Matching is case-insensitive and recognizes these suffixes by default:
+`Thinking`, `Reasoning`, `Reasoner`, and `Extended Thinking` (with spaces,
+hyphens, underscores, or parentheses). Override them with `stackSuffixes`:
+
+```svelte
+<PoolEval {data} stacked stackSuffixes={['deliberate', 'thinking']} />
+```
+
+For model names that do not share a suffix convention, pair them explicitly:
+
+```js
+const data = [
+  { value: 46, provider: 'acme', label: 'Acme Fast', stackKey: 'acme-v2', stackRole: 'base' },
+  { value: 58, provider: 'acme', label: 'Acme Deep', stackKey: 'acme-v2', stackRole: 'thinking' },
+];
+```
+
 ### Monochromatic mode + theming
 
 Pass `monochromatic` to drop the canonical brand colors and let icons inherit your theme. The highlighted icon picks up `--pe-icon-highlight` alongside its bar.
@@ -140,6 +179,8 @@ const data = [
 | `monochromatic` | `boolean` | `false` | Use single-color icons that follow `--pe-icon-color` / `--pe-icon-highlight`. |
 | `labels` | `boolean` | `false` | Show rotated text labels below provider icons. |
 | `counts` | `boolean` | `true` | Show the numeric value above each bar. |
+| `stacked` | `boolean` | `false` | Coalesce matching base/thinking results into one column. |
+| `stackSuffixes` | `string[]` | thinking/reasoning defaults | Suffixes used to infer thinking variants when `stacked` is enabled. |
 | `chartHeight` | `number` | `150` | Bar lane height in pixels. |
 | `providerIcons` | `Record<string, Component>` | `{}` | Custom Svelte components keyed by provider. Used before built-in SVG lookup. |
 | `title` | `string` | `"Model evaluation chart"` | Accessible title. |
@@ -159,6 +200,8 @@ type Datum = {
   label?: string;       // model name shown in the tooltip and rotated label
   highlight?: boolean;  // marks this row as the highlighted (accent) bar
   unit?: string;        // appended to the count, e.g. "ms" or "%"
+  stackKey?: string;    // explicit pairing key for a base/thinking result
+  stackRole?: 'base' | 'thinking'; // explicit role within the pair
 };
 ```
 
@@ -188,6 +231,9 @@ All visual controls go through CSS variables on the root element. Pass them eith
 |---|---|---|
 | `bar-color` | `#d6d6d6` | Default bar fill. |
 | `bar-highlight` | `#7c3aed` | Highlighted bar fill and focus ring. |
+| `stack-color` | 40% darker `bar-color` | Thinking variant fill. |
+| `stack-highlight` | 40% darker `bar-highlight` | Highlighted thinking variant fill. |
+| `stack-count-color` | `#fff` | Value label inside the inset bar. |
 | `bar-width` | `22px` | Width of each bar column. |
 | `bar-radius` | `0px` | Corner radius for bars. |
 | `bar-gap` | `18px` | Space between bar columns. |
diff --git a/package.json b/package.json
index f5c50d2..6b2bc83 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "@chenglou/pretext": "^0.0.6"
   },
   "devDependencies": {
-    "@hugeicons-pro/core-stroke-standard": "^4.1.0",
+    "@hugeicons/core-free-icons": "^3.1.1",
     "@pierre/diffs": "^1.1.19",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e332067..f7c15f3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,9 +12,9 @@ importers:
         specifier: ^0.0.6
         version: 0.0.6
     devDependencies:
-      '@hugeicons-pro/core-stroke-standard':
-        specifier: ^4.1.0
-        version: 4.1.0
+      '@hugeicons/core-free-icons':
+        specifier: ^3.1.1
+        version: 3.3.0
       '@pierre/diffs':
         specifier: ^1.1.19
         version: 1.1.19(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
@@ -198,8 +198,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@hugeicons-pro/core-stroke-standard@4.1.0':
-    resolution: {integrity: sha512-JtBxAlwDpq6JS1/aOKTTzdHF0hO6eDNnwqN0eus3XuLeafiAzQCcdK303qoIRD/dNp6fLvMWAeUQ6livBpDkuQ==}
+  '@hugeicons/core-free-icons@3.3.0':
+    resolution: {integrity: sha512-qYyr4JQ2eQIHTSTbITvnJvs6ERNK64D9gpwZnf2IyuG0exzqfyABLO/oTB71FB3RZPfu1GbwycdiGSo46apjMQ==}
 
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -1005,7 +1005,7 @@ snapshots:
   '@esbuild/win32-x64@0.25.12':
     optional: true
 
-  '@hugeicons-pro/core-stroke-standard@4.1.0': {}
+  '@hugeicons/core-free-icons@3.3.0': {}
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
diff --git a/src/HomePage.svelte b/src/HomePage.svelte
index 07c332b..53b6958 100644
--- a/src/HomePage.svelte
+++ b/src/HomePage.svelte
@@ -11,7 +11,7 @@
   import {
     SparklesIcon,
     Chart01Icon,
-    ChartColumnBigIcon,
+    ChartColumnBig as ChartColumnBigIcon,
     HashtagIcon,
     Tag01Icon,
     TextFontIcon,
@@ -30,7 +30,7 @@
     Tick02Icon,
     Download01Icon,
     File01Icon,
-  } from '@hugeicons-pro/core-stroke-standard';
+  } from '@hugeicons/core-free-icons';
 
   // Beautiful eval charts — illustrative numbers
   const sweBench = [
@@ -84,6 +84,15 @@
     { value: 80, provider: 'gemini', label: 'Atlas 2.5 Pro' },
   ];
 
+  const thinkingComparison = [
+    { value: 46.3, provider: 'poolside', label: 'Poolside Nova', highlight: true },
+    { value: 57.9, provider: 'poolside', label: 'Poolside Nova Thinking' },
+    { value: 55.4, provider: 'deepseek', label: 'DeepSeek V4' },
+    { value: 57.5, provider: 'gemini', label: 'Gemini 2.5 Pro' },
+    { value: 60.6, provider: 'openai', label: 'GPT-5' },
+    { value: 62.1, provider: 'grok', label: 'Grok 5' },
+  ];
+
   const providerIcons = {
     acme: AcmeProviderIcon,
   };
@@ -147,6 +156,31 @@
 
 <PoolEval {data} {providerIcons} max={100} title="Custom provider icon" />`;
 
+  const thinkingCode = `<script>
+  import PoolEval from '@poolsideai/pooleval';
+
+  const data = [
+    { value: 46.3, provider: 'poolside', label: 'Poolside Nova', highlight: true },
+    { value: 57.9, provider: 'poolside', label: 'Poolside Nova Thinking' },
+    { value: 55.4, provider: 'deepseek', label: 'DeepSeek V4' },
+    { value: 57.5, provider: 'gemini', label: 'Gemini 2.5 Pro' },
+    { value: 60.6, provider: 'openai', label: 'GPT-5' },
+    { value: 62.1, provider: 'grok', label: 'Grok 5' },
+  ];
+<\/script>
+
+<PoolEval
+  {data}
+  stacked
+  max={100}
+  title="SWE-bench Pro — base + thinking"
+  theme={{
+    'bar-highlight': '#2455ff',
+    'text-highlight': '#2455ff',
+    'bar-radius': '4px',
+  }}
+/>`;
+
   const latencyCode = `<PoolEval
   data={[
     { value: 142, provider: 'claude', label: 'Claude Haiku 4.5', highlight: true, unit: 'ms' },
@@ -163,10 +197,18 @@
 />`;
 
   const sandboxPresets = {
+    thinking: {
+      title: 'SWE-bench Pro',
+      max: 100,
+      unit: '',
+      stacked: true,
+      rows: thinkingComparison.map((row) => ({ ...row, enabled: true })),
+    },
     quality: {
       title: 'Live Benchmark',
       max: 100,
       unit: '',
+      stacked: false,
       rows: [
         { value: 76, provider: 'poolside', label: 'Poolside Nova', enabled: true },
         { value: 71, provider: 'openai', label: 'GPT-5', enabled: true },
@@ -184,6 +226,7 @@
       title: 'Latency test',
       max: 400,
       unit: 'ms',
+      stacked: false,
       rows: [
         { value: 135, provider: 'claude', label: 'Claude Haiku 4.5', enabled: true },
         { value: 166, provider: 'openai', label: 'GPT-5 mini', enabled: true },
@@ -203,12 +246,13 @@
     return sandboxPresets[key].rows.map((row) => ({ ...row }));
   }
 
-  let sandboxPreset = $state('quality');
-  let sandboxTitle = $state(sandboxPresets.quality.title);
-  let sandboxMax = $state(sandboxPresets.quality.max);
-  let sandboxUnit = $state(sandboxPresets.quality.unit);
-  let sandboxRows = $state(clonePresetRows('quality'));
-  let sandboxHighlight = $state('poolside');
+  let sandboxPreset = $state('thinking');
+  let sandboxTitle = $state(sandboxPresets.thinking.title);
+  let sandboxMax = $state(sandboxPresets.thinking.max);
+  let sandboxUnit = $state(sandboxPresets.thinking.unit);
+  let sandboxRows = $state(clonePresetRows('thinking'));
+  let sandboxHighlight = $state(sandboxPresets.thinking.rows[0].label);
+  let sandboxStacked = $state(true);
   let sandboxMonochrome = $state(false);
   let sandboxAnimate = $state(true);
   let sandboxDuration = $state(900);
@@ -219,7 +263,7 @@
   let sandboxHeight = $state(170);
   let sandboxBarWidth = $state(22);
   let sandboxBarGap = $state(18);
-  let sandboxRadius = $state(2);
+  let sandboxRadius = $state(4);
   let sandboxIconSize = $state(20);
   let sandboxLineWidth = $state(1);
   let sandboxLinePadding = $state(10);
@@ -315,7 +359,7 @@
         ...row,
         value: Number(row.value) || 0,
         unit: sandboxUnit,
-        highlight: row.provider === sandboxHighlight,
+        highlight: row.label === sandboxHighlight,
       }))
   );
 
@@ -399,6 +443,9 @@
     // Bars
     { name: 'bar-color', default: '#d6d6d6', description: 'Default bar fill.', category: 'Bars' },
     { name: 'bar-highlight', default: '#7c3aed', description: 'Highlighted bar fill and focus ring.', category: 'Bars' },
+    { name: 'stack-color', default: 'bar-color −40%', description: 'Thinking variant fill; defaults to a 40% darker bar color.', category: 'Bars' },
+    { name: 'stack-highlight', default: 'bar-highlight −40%', description: 'Highlighted thinking variant fill.', category: 'Bars' },
+    { name: 'stack-count-color', default: '#fff', description: 'Count shown inside the inset stacked bar.', category: 'Bars' },
     { name: 'bar-width', default: '22px', description: 'Width of each bar column.', category: 'Bars' },
     { name: 'bar-radius', default: '0px', description: 'Corner radius for bars.', category: 'Bars' },
     { name: 'bar-gap', default: '18px', description: 'Space between bar columns.', category: 'Bars' },
@@ -487,7 +534,8 @@
     sandboxMax = preset.max;
     sandboxUnit = preset.unit;
     sandboxRows = clonePresetRows(sandboxPreset);
-    sandboxHighlight = preset.rows[0].provider;
+    sandboxHighlight = preset.rows[0].label;
+    sandboxStacked = !!preset.stacked;
   }
 
   const panelBg = 'bg-[#f6f6f5] dark:bg-[#161616]';
@@ -503,6 +551,7 @@
   ];
 
   const presetOptions = [
+    { value: 'thinking', label: 'Thinking vs Base' },
     { value: 'quality', label: 'Quality Benchmark' },
     { value: 'latency', label: 'Latency Benchmark' },
   ];
@@ -581,6 +630,7 @@
     if (sandboxMonochrome) props.push(`  monochromatic`);
     if (sandboxLabels) props.push(`  labels`);
     if (!sandboxCounts) props.push(`  counts={false}`);
+    if (sandboxStacked) props.push(`  stacked`);
 
     const themeKeys = Object.keys(sandboxTheme);
     if (themeKeys.length) props.push(`  theme={${indentObject(sandboxTheme, 2)}}`);
@@ -841,6 +891,47 @@ ${props.join('\n')}
 
   <section class="grid grid-cols-[40px_minmax(0,1fr)] gap-x-6 gap-y-8 items-start max-[560px]:grid-cols-1">
     <div class="mono text-muted text-[13px] pt-1.5">06</div>
+    <div>
+      <h2 class="text-2xl tracking-[-0.01em] m-0 mb-2 font-semibold">Base + thinking, together</h2>
+      <p class="text-muted m-0 max-w-[560px]">
+        Pass <code>stacked</code> to pair base and thinking variants in one column.
+        The thinking result is 40% darker, while both scores stay visible. Hover
+        the pair for color-keyed Base and Thinking values beneath the model name.
+      </p>
+      <p class="text-muted m-0 mt-3 max-w-[680px]">
+        Matching is provider-scoped and case-insensitive. A base name pairs with
+        <code>Thinking</code>, <code>Reasoning</code>, <code>Reasoner</code>, or
+        <code>Extended Thinking</code> suffixes, including hyphens, underscores,
+        and parentheses. For irregular names, set <code>stackKey</code> and
+        <code>stackRole</code> explicitly.
+      </p>
+    </div>
+    <div class="col-start-2 grid grid-cols-[minmax(260px,0.9fr)_minmax(0,1.1fr)] gap-[22px] items-stretch mt-2 max-[560px]:col-start-1 max-[560px]:grid-cols-1">
+      <div class="min-w-0 pt-6 px-1 pb-2">
+        <PoolEval
+          data={thinkingComparison}
+          stacked
+          max={100}
+          title="SWE-bench Pro — base + thinking"
+          theme={{
+            'bar-highlight': '#2455ff',
+            'text-highlight': '#2455ff',
+            'bar-radius': '4px',
+          }}
+        />
+      </div>
+      <CodeFile
+        code={thinkingCode}
+        filename="thinking.svelte"
+        ariaLabel="Base and thinking PoolEval code example"
+      />
+    </div>
+  </section>
+
+  <hr class="border-0 border-t border-dashed border-rule my-20" />
+
+  <section class="grid grid-cols-[40px_minmax(0,1fr)] gap-x-6 gap-y-8 items-start max-[560px]:grid-cols-1">
+    <div class="mono text-muted text-[13px] pt-1.5">07</div>
     <div>
       <h2 class="text-2xl tracking-[-0.01em] m-0 mb-2 font-semibold">Interactive sandbox</h2>
       <p class="text-muted m-0 max-w-[520px]">
@@ -940,6 +1031,7 @@ ${props.join('\n')}
                 monochromatic={sandboxMonochrome}
                 labels={sandboxLabels}
                 counts={sandboxCounts}
+                stacked={sandboxStacked}
                 chartHeight={sandboxHeight}
                 title={sandboxTitle}
                 theme={sandboxTheme}
@@ -1138,6 +1230,17 @@ ${props.join('\n')}
           {:else if sandboxTab === 'data'}
             <SandboxSection icon={DatabaseIcon} title="Type">
               <SandboxSelect label="Preset" token="prop.data" bind:value={sandboxPreset} options={presetOptions} onchange={loadSandboxPreset} />
+              <SandboxTile
+                bind:enabled={sandboxStacked}
+                label="Coalesce thinking variants"
+                token="prop.stacked"
+              />
+              {#if sandboxStacked}
+                <p class="m-0 text-[11px] leading-relaxed text-muted">
+                  Within each provider, matches Thinking, Reasoning, Reasoner, and
+                  Extended Thinking suffixes. Use stackKey/stackRole for custom names.
+                </p>
+              {/if}
             </SandboxSection>
 
             <SandboxSection icon={ArrowExpand01Icon} title="Metrics">
@@ -1147,8 +1250,8 @@ ${props.join('\n')}
             <SandboxSection icon={AppleIntelligenceIcon} title="Models">
               <SandboxSelect label="Highlighted Model" token="data[].highlight" bind:value={sandboxHighlight}>
                 {#snippet children()}
-                  {#each sandboxRows.filter((row) => row.enabled !== false) as row (row.provider)}
-                    <option value={row.provider}>{row.label}</option>
+                  {#each sandboxRows.filter((row) => row.enabled !== false) as row (row.label)}
+                    <option value={row.label}>{row.label}</option>
                   {/each}
                 {/snippet}
               </SandboxSelect>
@@ -1156,7 +1259,7 @@ ${props.join('\n')}
               <div class="grid gap-1.5 text-xs">
                 <span class="text-fg font-medium">Values</span>
                 <div class="grid gap-1.5 text-xs text-muted">
-                  {#each sandboxRows as row (row.provider)}
+                  {#each sandboxRows as row (row.label)}
                     <SandboxTile
                       bind:enabled={row.enabled}
                       label={row.label}
@@ -1191,7 +1294,7 @@ ${props.join('\n')}
   <hr class="border-0 border-t border-dashed border-rule my-20" />
 
   <section class="grid grid-cols-[40px_1fr] gap-x-6 gap-y-8 items-start max-[560px]:grid-cols-1">
-    <div class="mono text-muted text-[13px] pt-1.5">07</div>
+    <div class="mono text-muted text-[13px] pt-1.5">08</div>
     <div>
       <h2 class="text-2xl tracking-[-0.01em] m-0 mb-2 font-semibold">Design tokens</h2>
       <p class="text-muted m-0 max-w-[520px]">
diff --git a/src/docs-ui/SandboxSelect.svelte b/src/docs-ui/SandboxSelect.svelte
index de2a946..febe0f8 100644
--- a/src/docs-ui/SandboxSelect.svelte
+++ b/src/docs-ui/SandboxSelect.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <script>
-  import { ArrowDown01Icon } from '@hugeicons-pro/core-stroke-standard';
+  import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
   import { renderIcon } from './render-icon.js';
 
   let {
diff --git a/src/docs-ui/render-icon.js b/src/docs-ui/render-icon.js
index 4803aec..f9039ed 100644
--- a/src/docs-ui/render-icon.js
+++ b/src/docs-ui/render-icon.js
@@ -1,4 +1,4 @@
-// Hugeicons-pro exports each icon as `[ [tag, attrs], ... ]`. Serialize the
+// Hugeicons exports each icon as `[ [tag, attrs], ... ]`. Serialize the
 // array to an inline SVG string so callers can drop them into UI chrome via
 // `{@html}` without importing a wrapper component.
 export function renderIcon(arr, size = 16) {
diff --git a/src/lib/PoolEval.svelte b/src/lib/PoolEval.svelte
index 7d380b7..9dd7baf 100644
--- a/src/lib/PoolEval.svelte
+++ b/src/lib/PoolEval.svelte
@@ -2,6 +2,7 @@
   import { onMount, untrack } from 'svelte';
   import { prepare, measureLineStats } from '@chenglou/pretext';
   import { getIcon } from './icons.js';
+  import { coalesceStackedData, DEFAULT_STACK_SUFFIXES } from './stacking.js';
 
   let {
     data = [],
@@ -11,6 +12,8 @@
     monochromatic = false,
     labels = false,
     counts = true,
+    stacked = false,
+    stackSuffixes = DEFAULT_STACK_SUFFIXES,
     duration = 900,
     chartHeight = 150,
     providerIcons = {},
@@ -27,6 +30,11 @@
   const titleId = `pe-${uid}-t`;
   const descId = `pe-${uid}-d`;
 
+  const chartData = $derived(
+    stacked ? coalesceStackedData(data, stackSuffixes) : data
+  );
+  const hasStacks = $derived(chartData.some((d) => !!d._stack));
+
   const computedMax = $derived(
     max ?? Math.max(...data.map((d) => Number(d.value) || 0), 1)
   );
@@ -36,15 +44,20 @@
   // before tabbing through individual bars.
   const summary = $derived.by(() => {
     if (description) return description;
-    const n = data.length;
+    const n = chartData.length;
     if (!n) return '';
     const unit = data[0]?.unit ?? '';
-    const highlighted = data.find((d) => d.highlight);
-    const sorted = [...data].sort(
+    const highlighted = chartData.find((d) => d.highlight);
+    const sorted = [...chartData].sort(
       (a, b) => (Number(b.value) || 0) - (Number(a.value) || 0)
     );
     const top = sorted[0];
-    const parts = [`Bar chart with ${n} bar${n === 1 ? '' : 's'}.`];
+    const resultCount = data.length;
+    const parts = [
+      `Bar chart with ${n} column${n === 1 ? '' : 's'}${
+        resultCount !== n ? ` representing ${resultCount} results` : ''
+      }.`,
+    ];
     if (highlighted) {
       parts.push(
         `${highlighted.label || highlighted.provider} highlighted at ${highlighted.value}${unit}.`
@@ -58,6 +71,13 @@
   });
 
   function ariaLabelFor(d) {
+    if (d._stack) {
+      const { base, thinking } = d._stack;
+      const baseName = base.label || base.provider || 'Base model';
+      const thinkingName = thinking.label || thinking.provider || 'Thinking model';
+      const suffix = d.highlight ? ', highlighted' : '';
+      return `${baseName}: ${base.value}${base.unit ?? ''}; ${thinkingName}: ${thinking.value}${thinking.unit ?? ''}${suffix}`;
+    }
     const name = d.label || d.provider || 'Unknown';
     const value = `${d.value}${d.unit ?? ''}`;
     return d.highlight ? `${name}: ${value}, highlighted` : `${name}: ${value}`;
@@ -71,6 +91,41 @@
     return providerIcons?.[provider] ?? providerIcons?.[normalized] ?? null;
   }
 
+  function tooltipInfoFor(d) {
+    if (!d._stack) {
+      return { text: d.label || d.provider || '', stacked: null };
+    }
+
+    const { base, thinking } = d._stack;
+    return {
+      text: base.label || d.label || d.provider || '',
+      stacked: {
+        base: `${base.value}${base.unit ?? ''}`,
+        thinking: `${thinking.value}${thinking.unit ?? ''}`,
+        order: [d._stack.outerRole, d._stack.innerRole],
+      },
+    };
+  }
+
+  function tooltipInfoFromCol(col) {
+    if (!col) return null;
+    const text = col.dataset.tip;
+    if (!text) return null;
+    return {
+      text,
+      stacked:
+        col.dataset.tipStacked === 'true'
+          ? {
+              base: col.dataset.tipBase ?? '',
+              thinking: col.dataset.tipThinking ?? '',
+              order: (col.dataset.tipOrder ?? 'thinking,base')
+                .split(',')
+                .filter((role) => role === 'base' || role === 'thinking'),
+            }
+          : null,
+    };
+  }
+
   // Seed progress/played from the initial `animate` prop. Chart instances
   // are meant to remount on replay (see `{#key}` wrapping in the sandbox),
   // so the seed doesn't need to react to later prop flips — `untrack`
@@ -83,6 +138,7 @@
     x: 0,
     y: 0,
     text: '',
+    stacked: null,
     width: 0,
     placement: 'top',
     visible: false,
@@ -116,11 +172,27 @@
     if (!size || !family) return TIP_FONT_FALLBACK;
     return `${size} ${family}`;
   }
-  function measureTipWidth(text) {
+  function measuredTipLine(text) {
     if (!text) return 0;
     const prepared = prepare(text, tipFont());
-    const { maxLineWidth } = measureLineStats(prepared, Infinity);
-    return Math.ceil(maxLineWidth) + TIP_PAD_X;
+    return measureLineStats(prepared, Infinity).maxLineWidth;
+  }
+  function measureTipWidth(info) {
+    if (!info?.text) return 0;
+    const titleWidth = measuredTipLine(info.text);
+    if (!info.stacked) return Math.ceil(titleWidth) + TIP_PAD_X;
+
+    // Each metric row has an 8px swatch, two 8px grid gaps, and 4px of
+    // separation before its value. Measure the label and value independently
+    // so grid spacing cannot clip the last characters.
+    const rowChrome = 28;
+    const baseWidth =
+      measuredTipLine('Base') + measuredTipLine(info.stacked.base) + rowChrome;
+    const thinkingWidth =
+      measuredTipLine('Thinking') +
+      measuredTipLine(info.stacked.thinking) +
+      rowChrome;
+    return Math.ceil(Math.max(titleWidth, baseWidth, thinkingWidth)) + TIP_PAD_X;
   }
 
   const LABEL_FONT =
@@ -147,7 +219,9 @@
   const labelLaneHeight = $derived.by(() => {
     if (!labels) return 0;
     const maxLabelWidth = Math.max(
-      ...data.map((d) => measureTextWidth(d.label || d.provider || '', LABEL_FONT)),
+      ...chartData.map((d) =>
+        measureTextWidth(d.label || d.provider || '', LABEL_FONT)
+      ),
       0
     );
     return Math.ceil(maxLabelWidth * LABEL_SIN + 12);
@@ -213,10 +287,10 @@
   //   colDuration = duration / 2
   // so column 0 starts at t=0 and the last column ends exactly at `duration`.
   const barStagger = $derived(
-    data.length > 1 ? duration / (2 * (data.length - 1)) : 0
+    chartData.length > 1 ? duration / (2 * (chartData.length - 1)) : 0
   );
   const colDuration = $derived(
-    duration - Math.max(0, data.length - 1) * barStagger
+    duration - Math.max(0, chartData.length - 1) * barStagger
   );
 
   // Icons share the column timing so each icon's entrance kicks off with
@@ -282,18 +356,34 @@
   // a teardown/remount.
   const TIP_SHOW_DELAY = 300;
   const TIP_HEIGHT_EST = 28;
+  const STACKED_TIP_HEIGHT_EST = 54;
   const TIP_ARROW = 8;
 
-  function setTipForCol(col, text, visible) {
-    if (!tooltip || !text) return;
+  function setTipForCol(col, info, visible) {
+    if (!tooltip || !info?.text) return;
     clearTimeout(hideTimer);
 
+    const stacked = info.stacked
+      ? {
+          ...info.stacked,
+          baseColor:
+            getComputedStyle(
+              col.querySelector('.pooleval__bar:not(.is-thinking)')
+            ).backgroundColor,
+          thinkingColor: getComputedStyle(
+            col.querySelector('.pooleval__bar.is-thinking')
+          ).backgroundColor,
+        }
+      : null;
+    const measuredInfo = { ...info, stacked };
+
     const topAnchor = col.querySelector('.pooleval__label') ?? col;
     const bottomAnchor = col.querySelector('.pooleval__icon') ?? col;
     const topRect = topAnchor.getBoundingClientRect();
     const bottomRect = bottomAnchor.getBoundingClientRect();
     const gap = 10;
-    const needed = TIP_HEIGHT_EST + TIP_ARROW + gap;
+    const tipHeight = stacked ? STACKED_TIP_HEIGHT_EST : TIP_HEIGHT_EST;
+    const needed = tipHeight + TIP_ARROW + gap;
     const placement = topRect.top >= needed ? 'top' : 'bottom';
     const anchorRect = placement === 'top' ? topRect : bottomRect;
     let x = anchorRect.left + anchorRect.width / 2;
@@ -301,11 +391,11 @@
 
     // Rough horizontal viewport clamp (refined width comes from the rendered
     // tip itself; this prevents the tip drifting off the edge for long names).
-    const halfEst = Math.max(40, text.length * 4);
+    const width = measureTipWidth(measuredInfo);
+    const halfEst = Math.max(40, width / 2);
     if (x - halfEst < 8) x = 8 + halfEst;
     if (x + halfEst > window.innerWidth - 8) x = window.innerWidth - 8 - halfEst;
 
-    const width = measureTipWidth(text);
     // Only mask while the box is *expanding* — when shrinking, the text
     // already fits the new (smaller) width and the mask would be useless.
     const isExpanding = tip.visible && visible && width > tip.width;
@@ -313,7 +403,8 @@
     tip = {
       x,
       y,
-      text,
+      text: info.text,
+      stacked,
       width,
       placement,
       visible,
@@ -336,14 +427,14 @@
     }
   }
 
-  function showTipForCol(col, text) {
+  function showTipForCol(col, info) {
     clearTimeout(showTimer);
     showTimer = null;
-    setTipForCol(col, text, true);
+    setTipForCol(col, info, true);
   }
 
-  function primeTipForCol(col, text) {
-    setTipForCol(col, text, false);
+  function primeTipForCol(col, info) {
+    setTipForCol(col, info, false);
   }
 
   function closestColumnAt(x, y) {
@@ -370,29 +461,29 @@
 
   function showTipAtPoint(x, y) {
     const col = closestColumnAt(x, y);
-    const text = col?.dataset?.tip;
-    if (!col || !text) {
+    const info = tooltipInfoFromCol(col);
+    if (!col || !info) {
       hideTip();
       return;
     }
-    showTipForCol(col, text);
+    showTipForCol(col, info);
   }
 
   function queueTipAtPoint(e) {
     latestHoverPoint = { x: e.clientX, y: e.clientY };
     const col = closestColumnAt(e.clientX, e.clientY);
-    const text = col?.dataset?.tip;
-    if (!col || !text) {
+    const info = tooltipInfoFromCol(col);
+    if (!col || !info) {
       hideTip();
       return;
     }
 
     if (tip.visible) {
-      showTipForCol(col, text);
+      showTipForCol(col, info);
       return;
     }
 
-    primeTipForCol(col, text);
+    primeTipForCol(col, info);
     attachDismiss();
     if (showTimer) return;
     showTimer = setTimeout(() => {
@@ -402,13 +493,13 @@
     }, TIP_SHOW_DELAY);
   }
 
-  function showTip(e, text) {
+  function showTip(e, info) {
     if (e.type === 'focus') {
-      showTipForCol(e.currentTarget, text);
+      showTipForCol(e.currentTarget, info);
     } else if ('clientX' in e && 'clientY' in e) {
       queueTipAtPoint(e);
     } else {
-      showTipForCol(e.currentTarget, text);
+      showTipForCol(e.currentTarget, info);
     }
   }
 
@@ -493,6 +584,7 @@
   class="pooleval {className}"
   class:is-monochromatic={monochromatic}
   class:has-labels={labels}
+  class:has-stacks={hasStacks}
   class:is-pending={animate && !played}
   data-pe-scheme={forceDark ? 'dark' : null}
   style={themeStyle}
@@ -514,18 +606,24 @@
     onpointerleave={hideTip}
   >
     <span class="pooleval__base-line" aria-hidden="true"></span>
-    {#each data as d, i (i)}
+    {#each chartData as d, i (i)}
       {@const ProviderIcon = componentIconFor(d)}
+      {@const tipInfo = tooltipInfoFor(d)}
       <div role="listitem">
         <button
           type="button"
           class="pooleval__col"
           class:is-highlight={d.highlight}
-          style="--pe-stagger-i: {i}{d.accent ? `; --pe-col-highlight: ${d.accent}` : ''}"
+          class:is-stacked={!!d._stack}
+          style="--pe-stagger-i: {i}{d.accent ? `; --pe-col-highlight: ${d.accent}; --pe-col-stack: color-mix(in srgb, ${d.accent} 60%, #000)` : ''}"
           aria-label={ariaLabelFor(d)}
-          data-tip={d.label}
-          onmouseenter={(e) => showTip(e, d.label)}
-          onfocus={(e) => showTip(e, d.label)}
+          data-tip={tipInfo.text}
+          data-tip-stacked={tipInfo.stacked ? 'true' : null}
+          data-tip-base={tipInfo.stacked?.base ?? null}
+          data-tip-thinking={tipInfo.stacked?.thinking ?? null}
+          data-tip-order={tipInfo.stacked?.order.join(',') ?? null}
+          onmouseenter={(e) => showTip(e, tipInfo)}
+          onfocus={(e) => showTip(e, tipInfo)}
           onblur={hideTip}
           tabindex={d.label || d.provider ? 0 : -1}
         >
@@ -539,8 +637,23 @@
             {/if}
             <div
               class="pooleval__bar"
+              class:is-thinking={d._stack?.outerRole === 'thinking'}
               style="height: {barHeight(d.value, i)}px"
             ></div>
+            {#if d._stack}
+              <div
+                class="pooleval__bar pooleval__bar--inner"
+                class:is-thinking={d._stack.innerRole === 'thinking'}
+                style="height: {barHeight(d._stack.inner.value, i)}px"
+              ></div>
+              {#if counts}
+                <span
+                  class="pooleval__label pooleval__label--inner"
+                  style="bottom: max(4px, calc({barHeight(d._stack.inner.value, i)}px - var(--pe-count-font-size) - 6px))"
+                  >{display(d._stack.inner.value, i)}{d._stack.inner.unit ?? ''}</span
+                >
+              {/if}
+            {/if}
           </div>
           <div class="pooleval__icon" aria-hidden="true">
             {#if ProviderIcon}
@@ -576,7 +689,25 @@
     style="--pe-tip-x: {tip.x}px; --pe-tip-y: {tip.y}px; --pe-tip-w: {tip.width}px"
     aria-hidden="true"
   >
-    <span class="pooleval__tip-text">{tip.text}</span>
+    {#if tip.stacked}
+      <span class="pooleval__tip-text pooleval__tip-text--stacked">
+        <span class="pooleval__tip-model">{tip.text}</span>
+        {#each tip.stacked.order as role}
+          <span class="pooleval__tip-metric">
+            <span
+              class="pooleval__tip-swatch"
+              style="background: {role === 'thinking'
+                ? tip.stacked.thinkingColor
+                : tip.stacked.baseColor}"
+            ></span>
+            <span>{role === 'thinking' ? 'Thinking' : 'Base'}</span>
+            <span class="pooleval__tip-value">{tip.stacked[role]}</span>
+          </span>
+        {/each}
+      </span>
+    {:else}
+      <span class="pooleval__tip-text">{tip.text}</span>
+    {/if}
   </div>
 </div>
 
@@ -584,6 +715,15 @@
   .pooleval {
     --pe-bar-color: var(--pe-theme-bar-color, #d6d6d6);
     --pe-bar-highlight: var(--pe-theme-bar-highlight, #7c3aed);
+    --pe-stack-color: var(
+      --pe-theme-stack-color,
+      color-mix(in srgb, var(--pe-bar-color) 60%, #000)
+    );
+    --pe-stack-highlight: var(
+      --pe-theme-stack-highlight,
+      color-mix(in srgb, var(--pe-bar-highlight) 60%, #000)
+    );
+    --pe-stack-count-color: var(--pe-theme-stack-count-color, #fff);
     --pe-text-color: var(--pe-theme-text-color, #b0b0b0);
     --pe-text-highlight: var(--pe-theme-text-highlight, #7c3aed);
     --pe-icon-color: var(--pe-theme-icon-color, #d6d6d6);
@@ -657,6 +797,24 @@
         --pe-dark-bar-highlight,
         var(--pe-theme-bar-highlight, #a78bfa)
       );
+      --pe-stack-color: var(
+        --pe-dark-stack-color,
+        var(
+          --pe-theme-stack-color,
+          color-mix(in srgb, var(--pe-bar-color) 60%, #000)
+        )
+      );
+      --pe-stack-highlight: var(
+        --pe-dark-stack-highlight,
+        var(
+          --pe-theme-stack-highlight,
+          color-mix(in srgb, var(--pe-bar-highlight) 60%, #000)
+        )
+      );
+      --pe-stack-count-color: var(
+        --pe-dark-stack-count-color,
+        var(--pe-theme-stack-count-color, #fff)
+      );
       --pe-text-color: var(--pe-dark-text-color, var(--pe-theme-text-color, #6e6e6e));
       --pe-text-highlight: var(
         --pe-dark-text-highlight,
@@ -766,6 +924,24 @@
       --pe-dark-bar-highlight,
       var(--pe-theme-bar-highlight, #a78bfa)
     );
+    --pe-stack-color: var(
+      --pe-dark-stack-color,
+      var(
+        --pe-theme-stack-color,
+        color-mix(in srgb, var(--pe-bar-color) 60%, #000)
+      )
+    );
+    --pe-stack-highlight: var(
+      --pe-dark-stack-highlight,
+      var(
+        --pe-theme-stack-highlight,
+        color-mix(in srgb, var(--pe-bar-highlight) 60%, #000)
+      )
+    );
+    --pe-stack-count-color: var(
+      --pe-dark-stack-count-color,
+      var(--pe-theme-stack-count-color, #fff)
+    );
     --pe-text-color: var(--pe-dark-text-color, var(--pe-theme-text-color, #6e6e6e));
     --pe-text-highlight: var(
       --pe-dark-text-highlight,
@@ -924,6 +1100,12 @@
     font: inherit;
     outline: none;
   }
+  .pooleval.has-stacks .pooleval__col {
+    /* Four-character decimal scores (for example 46.3) remain legible without
+       shrinking just one label. Applying the floor chart-wide keeps every
+       column and tabular count aligned. */
+    width: max(var(--pe-bar-width), 5ch);
+  }
 
   .pooleval__col:focus-visible {
     outline: 2px solid var(--pe-bar-highlight);
@@ -946,6 +1128,13 @@
     border-radius: var(--pe-bar-radius);
     will-change: height;
   }
+  .pooleval__bar.is-thinking {
+    background: var(--pe-stack-color);
+  }
+  .pooleval__bar--inner {
+    z-index: 1;
+    border-radius: 0 0 var(--pe-bar-radius) var(--pe-bar-radius);
+  }
 
   .pooleval__label {
     position: absolute;
@@ -967,6 +1156,10 @@
   .pooleval.is-pending .pooleval__label {
     opacity: 0;
   }
+  .pooleval__label--inner {
+    z-index: 2;
+    color: var(--pe-stack-count-color);
+  }
 
   .pooleval__icon {
     margin-top: var(--pe-icon-gap);
@@ -1033,9 +1226,15 @@
   .pooleval__col.is-highlight .pooleval__bar {
     background: var(--pe-col-highlight, var(--pe-bar-highlight));
   }
+  .pooleval__col.is-highlight .pooleval__bar.is-thinking {
+    background: var(--pe-col-stack, var(--pe-stack-highlight));
+  }
   .pooleval__col.is-highlight .pooleval__label {
     color: var(--pe-col-highlight, var(--pe-count-highlight));
   }
+  .pooleval__col.is-highlight .pooleval__label--inner {
+    color: var(--pe-stack-count-color);
+  }
   .pooleval.is-monochromatic .pooleval__col.is-highlight .pooleval__icon {
     color: var(--pe-col-highlight, var(--pe-icon-highlight));
   }
@@ -1123,6 +1322,32 @@
        box-width transition so the fade exits in step with the box. */
     transition: --pe-tip-slide 280ms cubic-bezier(0.32, 0.72, 0, 1);
   }
+  .pooleval__tip-text--stacked {
+    display: grid;
+    gap: 5px;
+    text-align: left;
+    line-height: 1.2;
+  }
+  .pooleval__tip-model {
+    display: block;
+    padding-bottom: 2px;
+    font-weight: 600;
+  }
+  .pooleval__tip-metric {
+    display: grid;
+    grid-template-columns: 8px 1fr auto;
+    align-items: center;
+    gap: 8px;
+  }
+  .pooleval__tip-swatch {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+  }
+  .pooleval__tip-value {
+    padding-left: 4px;
+    font-variant-numeric: tabular-nums;
+  }
   .pooleval__tip.is-morphing .pooleval__tip-text {
     --pe-tip-slide: 0px;
     transition: none;
diff --git a/src/lib/stacking.js b/src/lib/stacking.js
new file mode 100644
index 0000000..a8d608e
--- /dev/null
+++ b/src/lib/stacking.js
@@ -0,0 +1,128 @@
+export const DEFAULT_STACK_SUFFIXES = [
+  'extended thinking',
+  'thinking',
+  'reasoning',
+  'reasoner',
+];
+
+function normalize(value) {
+  return String(value ?? '')
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_-]+/g, ' ');
+}
+
+function stripVariantSuffix(label, suffixes) {
+  const source = String(label ?? '').trim();
+  const normalizedSource = normalize(source);
+
+  for (const suffix of suffixes) {
+    const normalizedSuffix = normalize(suffix);
+    if (!normalizedSuffix) continue;
+
+    const candidates = [
+      ` ${normalizedSuffix}`,
+      ` (${normalizedSuffix})`,
+      ` [${normalizedSuffix}]`,
+    ];
+    const match = candidates.find((candidate) =>
+      normalizedSource.endsWith(candidate)
+    );
+    if (!match) continue;
+
+    const base = normalizedSource.slice(0, -match.length).trim();
+    if (base) return base;
+  }
+
+  return null;
+}
+
+function stackMeta(datum, suffixes) {
+  const provider = normalize(datum?.provider);
+  const explicitKey = normalize(datum?.stackKey);
+  const inferredBase = stripVariantSuffix(datum?.label, suffixes);
+  const explicitRole = datum?.stackRole;
+  const role =
+    explicitRole === 'thinking' || explicitRole === 'base'
+      ? explicitRole
+      : inferredBase
+        ? 'thinking'
+        : 'base';
+  const key = explicitKey || inferredBase || normalize(datum?.label);
+
+  return {
+    key: key ? `${provider}::${key}` : '',
+    role,
+  };
+}
+
+function pairData(base, thinking) {
+  const baseValue = Number(base?.value) || 0;
+  const thinkingValue = Number(thinking?.value) || 0;
+  const outer = thinkingValue >= baseValue ? thinking : base;
+  const inner = outer === thinking ? base : thinking;
+
+  return {
+    ...base,
+    value: outer.value,
+    unit: outer.unit ?? base.unit ?? thinking.unit,
+    highlight: !!(base.highlight || thinking.highlight),
+    accent: base.accent ?? thinking.accent,
+    _stack: {
+      base,
+      thinking,
+      outer,
+      inner,
+      outerRole: outer === thinking ? 'thinking' : 'base',
+      innerRole: inner === thinking ? 'thinking' : 'base',
+    },
+  };
+}
+
+/**
+ * Coalesce base/thinking result pairs while preserving their first-seen order.
+ * Explicit `stackKey` / `stackRole` metadata wins over suffix inference.
+ */
+export function coalesceStackedData(data = [], suffixes = DEFAULT_STACK_SUFFIXES) {
+  const rows = Array.isArray(data) ? data : [];
+  const activeSuffixes = Array.isArray(suffixes)
+    ? suffixes
+    : DEFAULT_STACK_SUFFIXES;
+  const metas = rows.map((datum) => stackMeta(datum, activeSuffixes));
+  const groups = new Map();
+
+  metas.forEach((meta, index) => {
+    if (!meta.key) return;
+    const group = groups.get(meta.key) ?? { base: [], thinking: [] };
+    group[meta.role].push(index);
+    groups.set(meta.key, group);
+  });
+
+  const counterpart = new Map();
+  for (const group of groups.values()) {
+    const pairCount = Math.min(group.base.length, group.thinking.length);
+    for (let i = 0; i < pairCount; i += 1) {
+      counterpart.set(group.base[i], group.thinking[i]);
+      counterpart.set(group.thinking[i], group.base[i]);
+    }
+  }
+
+  const used = new Set();
+  const result = [];
+  rows.forEach((datum, index) => {
+    if (used.has(index)) return;
+    const otherIndex = counterpart.get(index);
+    if (otherIndex == null) {
+      result.push(datum);
+      return;
+    }
+
+    const baseIndex = metas[index].role === 'base' ? index : otherIndex;
+    const thinkingIndex = baseIndex === index ? otherIndex : index;
+    used.add(index);
+    used.add(otherIndex);
+    result.push(pairData(rows[baseIndex], rows[thinkingIndex]));
+  });
+
+  return result;
+}