combined throughput visualization into one file and fixed counting bug

app/src/content/chapters/1-introduction.mdx

@@ -72,7 +72,8 @@ Want to learn how to make GPUs go brrr and generate synthetic tokens at scale li
 <Wide>
 <HtmlEmbed
   id="intro-throughput"
-  src="inference-throughput.html"
+  src="inference-throughput-compare.html"
+  config={{ modelCount: 1 }}
   caption="Drag the slider to scale up GPUs and watch the tokens fly. By the end of this post, you'll know exactly how to set this up."
 />
 </Wide>

app/src/content/chapters/5-infrastructure.mdx

@@ -437,6 +437,7 @@ To get a feel for what these throughput numbers actually mean, pick two models a
 <HtmlEmbed
   id="inference-throughput-compare"
   src="inference-throughput-compare.html"
+  config={{ modelCount: 2 }}
   caption="Side-by-side throughput comparison. Pick two models and adjust the GPU count to see the relative speedup. Scale mapping: 📄 1 page = 500 toks, 📖 1 book = 500 pages, 📚 1 shelf = 500 books."
 />
 </Wide>

app/src/content/embeds/inference-throughput-compare.html

@@ -227,6 +227,17 @@
   .instance-b .output-unit { color: var(--text-muted); }
   .instance-b select { border-color: var(--brand-b); }
 
+  .mode-single .instance-b,
+  .mode-single .speedup-badge { display: none; }
+
+  .mode-single .instance-a .instance-label { display: none; }
+  .mode-single .instance-a .control-group label { display: block; }
+  .mode-single .instance-a .canvas-wrap { border-color: var(--border); }
+  .mode-single .instance-a select { border-color: var(--border); }
+
+  .mode-compare .instance-a .control-group label,
+  .mode-compare .instance-b .control-group label { display: none; }
+
   .instance-label {
     font-size: 11px;
     font-weight: 700;
@@ -302,10 +313,11 @@
       <div class="side-panel">
         <div class="instance-label">Model A</div>
         <div class="control-group">
+          <label data-role="modelLabelA">Model</label>
           <select data-role="modelA">
             <option value="45540">SmolLM2-135M</option>
             <option value="8086">Qwen3-4B</option>
-            <option value="6443" selected>Qwen3-8B</option>
+            <option value="6443">Qwen3-8B</option>
             <option value="6117">GPT-OSS-120B</option>
             <option value="1724">Gemma-3-27B</option>
           </select>
@@ -317,7 +329,7 @@
         </div>
         <div class="bottom-strip">
           <div class="throughput-strip">
-            <span data-role="booksRateA">0 pages/sec</span>
+            <span data-role="booksRateA">0 books/sec</span>
             <span class="tps" data-role="tpsInlineA">(0 TPS)</span>
           </div>
           <div class="output-panel">
@@ -330,7 +342,7 @@
         </div>
       </div>
       <div class="datasets">
-        <div class="datasets-title">Time to generate dataset</div>
+        <div class="datasets-title" data-role="datasetsTitleA">Time to generate dataset</div>
         <div class="dataset-bars" data-role="datasetBarsA"></div>
       </div>
     </div>
@@ -345,12 +357,13 @@
       <div class="side-panel">
         <div class="instance-label">Model B</div>
         <div class="control-group">
+          <label data-role="modelLabelB">Model</label>
           <select data-role="modelB">
             <option value="45540">SmolLM2-135M</option>
             <option value="8086">Qwen3-4B</option>
             <option value="6443">Qwen3-8B</option>
             <option value="6117">GPT-OSS-120B</option>
-            <option value="1724" selected>Gemma-3-27B</option>
+            <option value="1724">Gemma-3-27B</option>
           </select>
         </div>
       </div>
@@ -373,7 +386,7 @@
         </div>
       </div>
       <div class="datasets">
-        <div class="datasets-title">Time to generate dataset</div>
+        <div class="datasets-title" data-role="datasetsTitleB">Time to generate dataset</div>
         <div class="dataset-bars" data-role="datasetBarsB"></div>
       </div>
     </div>
@@ -388,6 +401,27 @@
   root.setAttribute('data-init', '1');
   const $ = (role) => root.querySelector('[data-role="' + role + '"]');
 
+  function readEmbedConfig() {
+    let mountEl = root;
+    while (mountEl && !mountEl.getAttribute?.('data-config')) {
+      mountEl = mountEl.parentElement;
+    }
+    try {
+      const rawConfig = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null;
+      return rawConfig ? JSON.parse(rawConfig) : {};
+    } catch (error) {
+      console.error('Error parsing embed config:', error);
+      return {};
+    }
+  }
+
+  const embedConfig = readEmbedConfig();
+  const modelCount = Number(embedConfig.modelCount) === 2 ? 2 : 1;
+  const isCompareMode = modelCount === 2;
+  const defaultModelA = String(embedConfig.modelA || (isCompareMode ? 6443 : 45540));
+  const defaultModelB = String(embedConfig.modelB || 1724);
+  root.classList.add(isCompareMode ? 'mode-compare' : 'mode-single');
+
   const TOKENS_PER_PAGE = 500;
   const PAGES_PER_BOOK = 500;
   const BOOKS_PER_SHELF = 500;
@@ -400,7 +434,28 @@
   const MIN_GPUS = 1, MAX_GPUS = 1_000_000;
   const LOG_MIN = Math.log(MIN_GPUS), LOG_MAX = Math.log(MAX_GPUS);
 
-  const TRAINING_RUNS = [
+  const TRAINING_RUNS_SINGLE = [
+    { gpus: 8,       name: 'BERT',       row: 'a1',
+      desc: '<b>BERT</b> (Google, 2018)<br>16 TPU v3 chips. 340M params.<br>Trained on BooksCorpus + Wikipedia. Introduced masked language modeling. Changed NLP forever.' },
+    { gpus: 32,      name: 'GPT-2',      row: 'a1',
+      desc: '<b>GPT-2</b> (OpenAI, 2019)<br>\u224832 V100 GPUs. 1.5B params.<br>"Too dangerous to release." Trained on 40 GB of internet text (WebText). Showed scaling up autoregressive LMs produces strong zero-shot results.' },
+    { gpus: 384,     name: 'BLOOM',      row: 'a1',
+      desc: '<b>BLOOM</b> (BigScience, 2022)<br>384 A100 80GB GPUs on Jean Zay (48 nodes). 176B params.<br>One of the first major open large-model training runs.' },
+    { gpus: 2_048,   name: 'Llama 1',    row: 'a2',
+      desc: '<b>Llama 1</b> (Meta, 2023)<br>2,048 A100 GPUs. 65B params.<br>Trained on 1.4T tokens of public data only. Llama-13B outperformed GPT-3 (175B). Open-sourced and ignited the open LLM movement.' },
+    { gpus: 2_788,   name: 'DeepSeek',   row: 'a1',
+      desc: '<b>DeepSeek V3</b> (DeepSeek, 2024)<br>2,048 H800 GPUs. 671B MoE params (37B active).<br>Only 2.8M GPU-hours using FP8 mixed precision. One of the most cost-efficient frontier model training runs ever (\u2248$5.6M).' },
+    { gpus: 10_000,  name: 'GPT-3',      row: 'a1',
+      desc: '<b>GPT-3</b> (OpenAI, 2020)<br>10,000 V100 GPUs. 175B params.<br>Trained on 300B tokens. Demonstrated few-shot learning. Sparked the LLM revolution. Training cost estimated at $4.6M.' },
+    { gpus: 16_384,  name: 'Llama 3',    row: 'a2',
+      desc: '<b>Llama 3</b> (Meta, 2024)<br>16,384 H100 GPUs. 405B params.<br>Trained on 15T tokens. Meta\u2019s largest open model. Used two 24K-GPU clusters with custom Tectonic filesystem for checkpointing.' },
+    { gpus: 25_000,  name: 'GPT-4',      row: 'a1',
+      desc: '<b>GPT-4</b> (OpenAI, 2023, estimated)<br>\u224825K A100 GPUs. \u22481.8T MoE params.<br>Trained on \u224813T tokens over \u2248100 days. Estimated cost $63M. First GPT model to use mixture-of-experts (16 experts).' },
+    { gpus: 50_000,  name: 'GPT-5',      row: 'a1',
+      desc: '<b>GPT-5</b> (OpenAI, 2025, estimated)<br>\u224850K H100-equiv GPUs (est.).<br>Used less training compute than GPT-4.5 due to focus on post-training scaling. Trained on Stargate infrastructure.' },
+  ];
+
+  const TRAINING_RUNS_COMPARE = [
     { gpus: 8,       name: 'BERT',       row: 'a1',
       desc: '<b>BERT</b> (Google, 2018)<br>16 TPU v3 chips. 340M params.<br>Trained on BooksCorpus + Wikipedia.' },
     { gpus: 32,      name: 'GPT-2',      row: 'a1',
@@ -421,7 +476,34 @@
       desc: '<b>GPT-5</b> (OpenAI, 2025, estimated)<br>\u224850K H100-equiv GPUs.' },
   ];
 
-  const INFRA_LANDMARKS = [
+  const INFRA_LANDMARKS_SINGLE = [
+    { gpus: 1,       name: '1 GPU',       row: 'b1',
+      desc: '<b>NVIDIA H100 SXM</b><br>80 GB HBM3, 3.96 PFLOPS FP8.<br>The workhorse of modern AI training and inference.' },
+    { gpus: 8,       name: '1 node',      row: 'b1',
+      desc: '<b>DGX H100</b> \u2014 8\u00d7H100 SXM<br>640 GB HBM3, NVLink 900 GB/s, 32 PFLOPS FP8.<br>NVIDIA\u2019s flagship AI server, fits in a single 10U chassis.' },
+    { gpus: 32,      name: '1 rack',      row: 'b1',
+      desc: '<b>DGX SuperPOD rack</b> \u2014 4\u00d7DGX H100<br>32 GPUs, 2.5 TB HBM3, 40+ kW per rack.<br>The building block of enterprise AI clusters.' },
+    { gpus: 256,     name: 'SuperPOD',    row: 'b1',
+      desc: '<b>DGX SuperPOD (1 SU)</b> \u2014 32 nodes, 256 GPUs<br>NDR400 InfiniBand, 256 PFLOPS FP8.<br>NVIDIA\u2019s reference architecture for large-scale AI.' },
+    { gpus: 10_752,  name: 'ALPS',        row: 'b1',
+      desc: '<b>ALPS</b> \u2014 CSCS, Lugano, Switzerland<br>10,752 GH200 Grace-Hopper superchips, 270 PFLOPS.<br>#7 on TOP500. Used by Swiss AI Initiative to pre-train 70B-parameter LLMs.' },
+    { gpus: 12_288,  name: 'ByteDance',   row: 'b2',
+      desc: '<b>ByteDance MegaScale</b><br>12,288 GPUs (A100/H800 mix).<br>Trained a 175B model at 55.2% MFU (1.34\u00d7 Megatron-LM). Published at NSDI \u201924. Full-stack optimization for 10K+ GPU training.' },
+    { gpus: 64_000,  name: 'Stargate',    row: 'b1',
+      desc: '<b>Stargate</b> \u2014 OpenAI / Oracle, Abilene, TX<br>64K GB200 GPUs (planned end 2026), 1.2 GW.<br>$500B joint venture (OpenAI, Oracle, SoftBank, MGX). 875-acre campus, 8 AI factory buildings.' },
+    { gpus: 100_000, name: 'Tencent',     row: 'b2',
+      desc: '<b>Tencent Xingmai 2.0</b><br>100K GPUs (H800/A800 mix) in a single cluster.<br>60% comms efficiency gain over v1. 3.2 TB/s inter-server bandwidth. Supports training and fine-tuning at scale.' },
+    { gpus: 200_000, name: 'Colossus',    row: 'b1',
+      desc: '<b>Colossus</b> \u2014 xAI, Memphis, TN<br>200K H100/H200 GPUs, 250 MW.<br>Built in 122 days (vs 18\u201324 months typical). Powered by 35 gas turbines + 208 Tesla Megapacks.' },
+    { gpus: 250_000, name: 'CoreWeave',   row: 'b2',
+      desc: '<b>CoreWeave</b> \u2014 250K+ GPUs across 32 data centers<br>Mix of H100, H200, GB200, GB300.<br>Largest GPU-native cloud. IPO\u2019d 2025. Clients: OpenAI, Microsoft, Meta.' },
+    { gpus: 600_000, name: 'Meta',        row: 'b2',
+      desc: '<b>Meta AI fleet</b> \u2014 600K H100-equivalent GPUs<br>\u2248350K H100 + A100s. $12B+ GPU investment.<br>Organized into 24K-GPU clusters (RoCE + InfiniBand). Trained Llama 3 405B.' },
+    { gpus: 1_000_000, name: 'Colossus 2', row: 'b1',
+      desc: '<b>Colossus 2</b> \u2014 xAI (planned)<br>1M+ H100-equivalent GPUs, 2 GW power.<br>$20B Series E from NVIDIA, Cisco, and others. Expanding across Memphis-area facilities.' },
+  ];
+
+  const INFRA_LANDMARKS_COMPARE = [
     { gpus: 1,       name: '1 GPU',       row: 'b1',
       desc: '<b>NVIDIA H100 SXM</b><br>80 GB HBM3, 3.96 PFLOPS FP8.' },
     { gpus: 8,       name: '1 node',      row: 'b1',
@@ -454,6 +536,32 @@
   const gpuSlider = $('gpus');
   const gpuLabelEl = $('gpuLabel');
   const speedupRatioEl = $('speedupRatio');
+  const modelASelect = $('modelA');
+  const modelBSelect = $('modelB');
+  const datasetsTitleAEl = $('datasetsTitleA');
+  const datasetsTitleBEl = $('datasetsTitleB');
+  const booksRateAEl = $('booksRateA');
+  const booksRateBEl = $('booksRateB');
+
+  function applyModelDefault(selectEl, modelValue) {
+    const hasOption = Array.from(selectEl.options).some((option) => option.value === modelValue);
+    if (hasOption) {
+      selectEl.value = modelValue;
+    }
+  }
+
+  applyModelDefault(modelASelect, defaultModelA);
+  applyModelDefault(modelBSelect, defaultModelB);
+
+  if (isCompareMode) {
+    datasetsTitleAEl.textContent = 'Time to generate dataset';
+    datasetsTitleBEl.textContent = 'Time to generate dataset';
+    booksRateAEl.textContent = '0 pages/sec';
+    booksRateBEl.textContent = '0 pages/sec';
+  } else {
+    datasetsTitleAEl.innerHTML = 'Time to generate dataset<br>at current throughput';
+    booksRateAEl.textContent = '0 books/sec';
+  }
 
   const themeTokens = {};
   function refreshThemeTokens() {
@@ -512,10 +620,25 @@
     el.addEventListener('click', () => { gpuSlider.value = gpusToSlider(lm.gpus); updateSliderGradient(); updateGpuLabel(); instances.forEach(inst => inst.reset()); });
     rowEls[lm.row].appendChild(el);
   }
-  TRAINING_RUNS.forEach(addLandmark);
-  INFRA_LANDMARKS.forEach(addLandmark);
+  (isCompareMode ? TRAINING_RUNS_COMPARE : TRAINING_RUNS_SINGLE).forEach(addLandmark);
+  (isCompareMode ? INFRA_LANDMARKS_COMPARE : INFRA_LANDMARKS_SINGLE).forEach(addLandmark);
 
-  const DATASETS = [
+  const DATASETS_SINGLE = [
+    { name: 'BookCorpus', tokens: 1e9,
+      desc: '<b>BookCorpus</b> (2015)<br>11K unpublished books scraped from smashwords.com. Used to train the original BERT and GPT-1.' },
+    { name: 'Wikipedia', tokens: 6e9,
+      desc: '<b>Multilingual Wikipedia</b><br>All articles across all 300+ language editions. ~4.7B words, ~6B tokens. A staple ingredient in virtually every LLM pretraining mix.' },
+    { name: 'FinePhrase', tokens: 1e12,
+      desc: '<b>FinePhrase</b> (Hugging Face, 2026)<br>1T tokens of LLM-rephrased web text. Synthetic data that teaches small models to punch above their weight.' },
+    { name: 'RedPajama', tokens: 100e12,
+      desc: '<b>RedPajama v2</b> (Together AI, 2023)<br>100T raw tokens from 84 Common Crawl snapshots with quality signals. Covers 5 languages.' },
+    { name: 'Common Crawl', tokens: 3e15,
+      desc: '<b>Common Crawl</b> (ongoing since 2008)<br>The raw web archive. Petabytes of HTML from billions of pages. The upstream source for most web-text datasets.' },
+    { name: 'The Internet', tokens: 100e15,
+      desc: '<b>The entire Internet</b> (estimate)<br>Rough estimate of all text ever published online. Nobody has actually tokenized it all.' },
+  ];
+
+  const DATASETS_COMPARE = [
     { name: 'BookCorpus', tokens: 1e9,
       desc: '<b>BookCorpus</b> (2015)<br>11K unpublished books scraped from smashwords.com.' },
     { name: 'Wikipedia', tokens: 6e9,
@@ -530,6 +653,8 @@
       desc: '<b>The entire Internet</b> (estimate)<br>Rough estimate of all text ever published online.' },
   ];
 
+  const DATASETS = isCompareMode ? DATASETS_COMPARE : DATASETS_SINGLE;
+
   // --- Utility functions ---
   function formatNum(n) {
     if (n >= 1e15) return (n / 1e15).toFixed(1) + 'Q';
@@ -891,14 +1016,12 @@
       const pagesPerShelf = PAGES_PER_BOOK * BOOKS_PER_SHELF;
       const rate = mode === 'shelf' ? pps / pagesPerShelf : mode === 'book' ? pps / PAGES_PER_BOOK : pps;
       const bs = 0.8 + Math.log10(Math.max(1, rate)) * 0.8;
-      const tokens = mode === 'shelf' ? TOKENS_PER_SHELF : mode === 'book' ? TOKENS_PER_BOOK : TOKENS_PER_PAGE;
       const scale = 0.85 + Math.random() * 0.3;
       const bobAmp = 3 + Math.random() * 5;
       const bobPhase = Math.random() * Math.PI * 2;
       const wobbleAmp = mode === 'page' ? 0.15 + Math.random() * 0.25 : 0.08 + Math.random() * 0.15;
       const wobblePhase = Math.random() * Math.PI * 2;
       const depthSpeed = (bs + Math.random() * bs) * (0.7 + scale * 0.6);
-      totalTokens += tokens;
       floatingItems.push({
         x: spawnX + Math.random() * 20, y, speed: depthSpeed,
         type: mode, scale, bobAmp, bobPhase, wobbleAmp, wobblePhase
@@ -908,10 +1031,14 @@
     function frame(now, dt) {
       const W = getW(), H = getH();
       _fNow = now;
-      _fPps = getPps();
+      const tps = getTps();
+      _fPps = tps / TOKENS_PER_PAGE;
       _fFanPhase = (now / 200) * Math.min(_fPps, 100);
       _fBlinkSpeed = Math.min(_fPps, 200);
 
+      // Keep dataset timers accurate at any throughput, independent of capped visual spawn rate.
+      totalTokens += tps * dt;
+
       ctx.clearRect(0, 0, W, H);
       ctx.fillStyle = themeTokens.canvasBg; ctx.fillRect(0, 0, W, H);
 
@@ -1007,15 +1134,18 @@
     totalItemUnit: $('totalItemUnitA'),
   });
 
-  const instB = createInstance('cB', 'modelB', 'datasetBarsB', {
-    booksRate: $('booksRateB'),
-    tpsInline: $('tpsInlineB'),
-    totalTokensNum: $('totalTokensNumB'),
-    totalItemNum: $('totalItemNumB'),
-    totalItemUnit: $('totalItemUnitB'),
-  });
-
-  const instances = [instA, instB];
+  const instances = [instA];
+  let instB = null;
+  if (isCompareMode) {
+    instB = createInstance('cB', 'modelB', 'datasetBarsB', {
+      booksRate: $('booksRateB'),
+      tpsInline: $('tpsInlineB'),
+      totalTokensNum: $('totalTokensNumB'),
+      totalItemNum: $('totalItemNumB'),
+      totalItemUnit: $('totalItemUnitB'),
+    });
+    instances.push(instB);
+  }
 
   let lastTime = performance.now(), lastMetricUpdate = 0;
 
@@ -1023,27 +1153,31 @@
     const dt = Math.min((now - lastTime) / 1000, 0.1);
     lastTime = now;
 
-    instA.frame(now, dt);
-    instB.frame(now, dt);
+    for (let i = 0; i < instances.length; i++) {
+      instances[i].frame(now, dt);
+    }
 
     if (now - lastMetricUpdate > 100) {
       lastMetricUpdate = now;
       instA.updateMetrics(now);
-      instB.updateMetrics(now);
-
-      const tpsA = instA.getTps();
-      const tpsB = instB.getTps();
-      if (tpsA === tpsB) {
-        speedupRatioEl.textContent = 'Same throughput';
-        speedupRatioEl.className = 'ratio';
-      } else if (tpsA > tpsB) {
-        const ratio = tpsA / tpsB;
-        speedupRatioEl.textContent = 'Model A is ' + ratio.toFixed(1) + '\u00d7 faster';
-        speedupRatioEl.className = 'ratio a-faster';
-      } else {
-        const ratio = tpsB / tpsA;
-        speedupRatioEl.textContent = 'Model B is ' + ratio.toFixed(1) + '\u00d7 faster';
-        speedupRatioEl.className = 'ratio b-faster';
+
+      if (instB) {
+        instB.updateMetrics(now);
+
+        const tpsA = instA.getTps();
+        const tpsB = instB.getTps();
+        if (tpsA === tpsB) {
+          speedupRatioEl.textContent = 'Same throughput';
+          speedupRatioEl.className = 'ratio';
+        } else if (tpsA > tpsB) {
+          const ratio = tpsA / tpsB;
+          speedupRatioEl.textContent = 'Model A is ' + ratio.toFixed(1) + '\u00d7 faster';
+          speedupRatioEl.className = 'ratio a-faster';
+        } else {
+          const ratio = tpsB / tpsA;
+          speedupRatioEl.textContent = 'Model B is ' + ratio.toFixed(1) + '\u00d7 faster';
+          speedupRatioEl.className = 'ratio b-faster';
+        }
       }
     }
 

app/src/content/embeds/inference-throughput.html

@@ -1,945 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<title>GPU Page Generator</title>
-<style>
-  :root {
-    color-scheme: light dark;
-    --bg: #ffffff;
-    --surface: #f9fafb;
-    --canvas-bg: #fafafa;
-    --canvas-grid: #d8dbe0;
-    --text: #1f2937;
-    --text-strong: #111827;
-    --text-muted: #4b5563;
-    --text-faint: #6b7280;
-    --border: #111827;
-    --brand: #2e5f7e;
-    --training: #b45309;
-    --success: #16a34a;
-    --tooltip-bg: #111827;
-    --tooltip-text: #f8fafc;
-    --slider-start: #2e5f7e;
-    --slider-mid: #c0392b;
-    --slider-end: #c4a020;
-    --slider-rest: #d1d5db;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --bg: #020617;
-      --surface: #0b1324;
-      --canvas-bg: #f8fafc;
-      --canvas-grid: #d4d7dd;
-      --text: #e2e8f0;
-      --text-strong: #f8fafc;
-      --text-muted: #cbd5e1;
-      --text-faint: #94a3b8;
-      --border: #475569;
-      --brand: #7dd3fc;
-      --training: #f59e0b;
-      --success: #22c55e;
-      --tooltip-bg: #020617;
-      --tooltip-text: #f8fafc;
-      --slider-start: #38bdf8;
-      --slider-mid: #fb7185;
-      --slider-end: #facc15;
-      --slider-rest: #334155;
-    }
-    .bottom-strip { color: #e2e8f0; }
-    .bottom-strip .tps { color: #cbd5e1; }
-  }
-
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 16px 0; }
-
-  .viz { width: 100%; max-width: 1200px; }
-
-  .control-group { display: flex; flex-direction: column; gap: 4px; }
-  .control-group label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }
-  select {
-    -webkit-appearance: none;
-    appearance: none;
-    color: var(--text-strong);
-    font-size: 15px;
-    font-family: inherit;
-    padding: 7px 28px 7px 10px;
-    border: 2px solid var(--border);
-    border-radius: 8px;
-    background-color: var(--surface);
-    background-image:
-      linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
-      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
-    background-position:
-      calc(100% - 14px) calc(50% - 2px),
-      calc(100% - 9px) calc(50% - 2px);
-    background-size: 5px 5px, 5px 5px;
-    background-repeat: no-repeat;
-    cursor: pointer;
-  }
-  .canvas-row { display: flex; gap: 8px; align-items: stretch; position: relative; z-index: 1; }
-  .canvas-row .side-panel { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
-  .canvas-wrap {
-    position: relative;
-    flex: 1;
-    min-width: 0;
-    border: 2px solid var(--border);
-    background: var(--canvas-bg);
-  }
-  .canvas-stage { position: relative; }
-  .canvas-wrap canvas {
-    width: 100%;
-    height: auto;
-    display: block;
-    border: 0;
-    background: transparent;
-  }
-  .slider-area { position: relative; width: 100%; margin-bottom: 8px; z-index: 9999; }
-  .gpu-label {
-    text-align: center;
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--brand);
-    margin-bottom: 2px;
-    font-variant-numeric: tabular-nums;
-  }
-  .slider-area input[type=range] { position: relative; z-index: 3; width: 100%; margin: 0; display: block; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; outline: none; cursor: pointer; }
-  .slider-area input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand); cursor: pointer; margin-top: -5px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
-  .slider-area input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
-
-  .landmark-row { position: relative; width: 100%; height: 16px; }
-  .landmark { position: absolute; transform: translateX(-50%); cursor: pointer; display: flex; flex-direction: column; align-items: center; }
-  .landmark-row.top .landmark { bottom: 0; }
-  .landmark-row.bottom .landmark { top: 0; }
-  .landmark .tick { width: 2px; height: 5px; flex-shrink: 0; }
-  .landmark .name { font-size: 10px; font-weight: 700; white-space: nowrap; letter-spacing: 0.2px; line-height: 1.15; }
-  .landmark:hover .name { color: var(--text-strong) !important; }
-
-  .landmark-row.top .tick { background: var(--training); }
-  .landmark-row.top .name { color: var(--training); }
-  .landmark-row.bottom .tick { background: var(--brand); }
-  .landmark-row.bottom .name { color: var(--brand); }
-  #row-a1 .landmark, #row-b1 .landmark { z-index: 2; }
-  #row-a2 .landmark, #row-b2 .landmark { z-index: 1; }
-  #row-a2 .landmark .tick,
-  #row-b2 .landmark .tick { position: relative; }
-  #row-a2 .landmark .tick::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 100%;
-    width: 1px;
-    height: 18px;
-    background: var(--training);
-    opacity: 0.35;
-    z-index: -1;
-  }
-  #row-b2 .landmark .tick::before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 100%;
-    width: 1px;
-    height: 18px;
-    background: var(--brand);
-    opacity: 0.35;
-    z-index: -1;
-  }
-
-  .landmark .tooltip { display: none; position: absolute; left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 12px; padding: 10px 14px; border-radius: 8px; width: 300px; white-space: normal; z-index: 2147483647; pointer-events: none; line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
-  .landmark-row.top .tooltip { top: calc(100% + 4px); }
-  .landmark-row.bottom .tooltip { top: calc(100% + 4px); }
-  .landmark .tooltip::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 5px solid transparent; }
-  .landmark .tooltip.tip-right::after { left: auto; right: 16px; transform: none; }
-  .landmark .tooltip.tip-left::after { left: 16px; transform: none; }
-  .landmark-row.top .tooltip::after { bottom: 100%; border-bottom-color: var(--tooltip-bg); }
-  .landmark-row.bottom .tooltip::after { bottom: 100%; border-bottom-color: var(--tooltip-bg); }
-  .landmark-row:has(.landmark:hover) { z-index: 99999; position: relative; }
-  .landmark:hover .tooltip { display: block; }
-
-  .bottom-strip {
-    position: absolute;
-    bottom: 4px;
-    left: 10px;
-    right: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 11px;
-    font-weight: 700;
-    font-variant-numeric: tabular-nums;
-    line-height: 1.2;
-    color: #1f2937;
-    pointer-events: none;
-    z-index: 4;
-  }
-  .throughput-strip {
-    padding: 0;
-    text-align: center;
-  }
-  .throughput-strip .tps {
-    color: var(--text-muted);
-    font-weight: 600;
-  }
-
-  .output-panel {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    text-align: center;
-  }
-  .output-heading {
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.4px;
-    font-weight: 700;
-    font-size: 10px;
-  }
-  .output-num {
-    font-weight: 700;
-    color: var(--brand);
-    font-variant-numeric: tabular-nums;
-    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
-    font-size: 11px;
-  }
-  .output-unit {
-    font-size: 11px;
-    color: var(--text-muted);
-    font-weight: 700;
-  }
-  .output-unit-emoji {
-    font-size: 13px;
-    line-height: 1;
-  }
-
-  .datasets { min-width: 180px; display: flex; flex-direction: column; justify-content: center; }
-  .datasets-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
-  .dataset-bars { display: flex; flex-direction: column; gap: 4px; }
-  .dataset-item { display: flex; align-items: center; gap: 5px; font-size: 12px; position: relative; cursor: pointer; }
-  .dataset-item .ds-check { font-size: 15px; width: 18px; text-align: center; }
-  .dataset-item .ds-name { font-weight: 600; color: var(--text-strong); }
-  .dataset-item .ds-time { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }
-  .dataset-item .ds-size { color: var(--text-faint); font-size: 11px; }
-  .dataset-item.done .ds-name { color: var(--success); }
-  .dataset-item.done .ds-time { color: var(--success); }
-  .dataset-item .ds-tip { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 12px; padding: 10px 14px; border-radius: 8px; width: 260px; white-space: normal; z-index: 2147483647; pointer-events: none; line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
-  .dataset-item .ds-tip::after { content: ''; position: absolute; bottom: 100%; left: 20px; border: 5px solid transparent; border-bottom-color: var(--tooltip-bg); }
-  .dataset-item:hover { z-index: 99999; }
-  .dataset-item:hover .ds-tip { display: block; }
-
-  @media (max-width: 980px) {
-    .canvas-row { flex-direction: column; }
-    .canvas-row .side-panel { align-items: flex-start; }
-    .landmark .name { font-size: 9px; }
-    .bottom-strip {
-      left: 6px;
-      right: 6px;
-      font-size: 10px;
-    }
-    .output-num { font-size: 10px; }
-    .output-unit { font-size: 10px; }
-    .output-unit-emoji { font-size: 12px; }
-    .output-heading { font-size: 9px; }
-    .datasets { max-width: 100%; min-width: 0; }
-    .dataset-bars { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
-    .dataset-item { font-size: 12px; }
-  }
-</style>
-</head>
-<body>
-<div class="viz">
-  <div class="slider-area">
-    <div class="gpu-label" data-role="gpuLabel">1 GPU</div>
-    <div class="landmark-row top" data-role="row-a2"></div>
-    <div class="landmark-row top" data-role="row-a1"></div>
-    <input type="range" data-role="gpus" min="0" max="1" step="0.001" value="0">
-    <div class="landmark-row bottom" data-role="row-b1"></div>
-    <div class="landmark-row bottom" data-role="row-b2"></div>
-  </div>
-
-  <div class="canvas-row">
-    <div class="side-panel">
-      <div class="control-group">
-        <label>Model</label>
-        <select data-role="model">
-          <option value="45540">SmolLM2-135M</option>
-          <option value="8086">Qwen3-4B</option>
-          <option value="6443">Qwen3-8B</option>
-          <option value="6117">GPT-OSS-120B</option>
-          <option value="1724">Gemma-3-27B</option>
-        </select>
-      </div>
-    </div>
-    <div class="canvas-wrap">
-      <div class="canvas-stage">
-        <canvas data-role="c"></canvas>
-      </div>
-      <div class="bottom-strip">
-        <div class="throughput-strip">
-          <span data-role="booksRate">0 books/sec</span>
-          <span class="tps" data-role="tpsInline">(0 TPS)</span>
-        </div>
-        <div class="output-panel">
-          <span class="output-heading">Generated</span>
-          <span class="output-num" data-role="totalTokensNum">0</span>
-          <span class="output-unit output-unit-text">toks</span>
-          <span class="output-num" data-role="totalItemNum">0</span>
-          <span class="output-unit output-unit-emoji" data-role="totalItemUnit">📄</span>
-        </div>
-      </div>
-    </div>
-    <div class="datasets">
-      <div class="datasets-title">Time to generate dataset<br>at current throughput</div>
-      <div class="dataset-bars" data-role="datasetBars"></div>
-    </div>
-  </div>
-</div>
-
-<script>
-(function() {
-  const allViz = document.querySelectorAll('.viz:not([data-init])');
-  const root = allViz[allViz.length - 1];
-  if (!root) return;
-  root.setAttribute('data-init', '1');
-  const $ = (role) => root.querySelector('[data-role="' + role + '"]');
-  const canvas = $('c');
-  let ctx = canvas.getContext('2d');
-
-  function resizeCanvas() {
-    const w = canvas.clientWidth;
-    canvas.width = w * 2;
-    canvas.height = Math.round(w * 0.28) * 2;
-    canvas.style.height = Math.round(w * 0.28) + 'px';
-  }
-  resizeCanvas();
-  window.addEventListener('resize', resizeCanvas);
-
-  const TOKENS_PER_PAGE = 500;
-  const PAGES_PER_BOOK = 500;
-  const BOOKS_PER_SHELF = 500;
-  const TOKENS_PER_BOOK = TOKENS_PER_PAGE * PAGES_PER_BOOK;
-  const TOKENS_PER_SHELF = TOKENS_PER_BOOK * BOOKS_PER_SHELF;
-  const GPUS_PER_NODE = 8;
-  const GPUS_PER_RACK = 32;
-  const GPUS_PER_SUPERPOD = 256;
-
-  const MIN_GPUS = 1, MAX_GPUS = 1_000_000;
-  const LOG_MIN = Math.log(MIN_GPUS), LOG_MAX = Math.log(MAX_GPUS);
-
-  const DATASETS = [
-    { name: 'BookCorpus', tokens: 1e9,
-      desc: '<b>BookCorpus</b> (2015)<br>11K unpublished books scraped from smashwords.com. Used to train the original BERT and GPT-1.' },
-    { name: 'Wikipedia', tokens: 6e9,
-      desc: '<b>Multilingual Wikipedia</b><br>All articles across all 300+ language editions. ~4.7B words, ~6B tokens. A staple ingredient in virtually every LLM pretraining mix.' },
-    { name: 'FinePhrase', tokens: 1e12,
-      desc: '<b>FinePhrase</b> (Hugging Face, 2026)<br>1T tokens of LLM-rephrased web text. Synthetic data that teaches small models to punch above their weight.' },
-    { name: 'RedPajama', tokens: 100e12,
-      desc: '<b>RedPajama v2</b> (Together AI, 2023)<br>100T raw tokens from 84 Common Crawl snapshots with quality signals. Covers 5 languages.' },
-    { name: 'Common Crawl', tokens: 3e15,
-      desc: '<b>Common Crawl</b> (ongoing since 2008)<br>The raw web archive. Petabytes of HTML from billions of pages. The upstream source for most web-text datasets.' },
-    { name: 'The Internet', tokens: 100e15,
-      desc: '<b>The entire Internet</b> (estimate)<br>Rough estimate of all text ever published online. Nobody has actually tokenized it all.' },
-  ];
-
-  let dsDone = DATASETS.map(() => false);
-
-  const TRAINING_RUNS = [
-    { gpus: 8,       name: 'BERT',       row: 'a1',
-      desc: '<b>BERT</b> (Google, 2018)<br>16 TPU v3 chips. 340M params.<br>Trained on BooksCorpus + Wikipedia. Introduced masked language modeling. Changed NLP forever.' },
-    { gpus: 32,      name: 'GPT-2',      row: 'a1',
-      desc: '<b>GPT-2</b> (OpenAI, 2019)<br>\u224832 V100 GPUs. 1.5B params.<br>"Too dangerous to release." Trained on 40 GB of internet text (WebText). Showed scaling up autoregressive LMs produces strong zero-shot results.' },
-    { gpus: 384,     name: 'BLOOM',      row: 'a1',
-      desc: '<b>BLOOM</b> (BigScience, 2022)<br>384 A100 80GB GPUs on Jean Zay (48 nodes). 176B params.<br>One of the first major open large-model training runs.' },
-    { gpus: 2_048,   name: 'Llama 1',    row: 'a2',
-      desc: '<b>Llama 1</b> (Meta, 2023)<br>2,048 A100 GPUs. 65B params.<br>Trained on 1.4T tokens of public data only. Llama-13B outperformed GPT-3 (175B). Open-sourced and ignited the open LLM movement.' },
-    { gpus: 2_788,   name: 'DeepSeek',   row: 'a1',
-      desc: '<b>DeepSeek V3</b> (DeepSeek, 2024)<br>2,048 H800 GPUs. 671B MoE params (37B active).<br>Only 2.8M GPU-hours using FP8 mixed precision. One of the most cost-efficient frontier model training runs ever (\u2248$5.6M).' },
-    { gpus: 10_000,  name: 'GPT-3',      row: 'a1',
-      desc: '<b>GPT-3</b> (OpenAI, 2020)<br>10,000 V100 GPUs. 175B params.<br>Trained on 300B tokens. Demonstrated few-shot learning. Sparked the LLM revolution. Training cost estimated at $4.6M.' },
-    { gpus: 16_384,  name: 'Llama 3',    row: 'a2',
-      desc: '<b>Llama 3</b> (Meta, 2024)<br>16,384 H100 GPUs. 405B params.<br>Trained on 15T tokens. Meta\u2019s largest open model. Used two 24K-GPU clusters with custom Tectonic filesystem for checkpointing.' },
-    { gpus: 25_000,  name: 'GPT-4',      row: 'a1',
-      desc: '<b>GPT-4</b> (OpenAI, 2023, estimated)<br>\u224825K A100 GPUs. \u22481.8T MoE params.<br>Trained on \u224813T tokens over \u2248100 days. Estimated cost $63M. First GPT model to use mixture-of-experts (16 experts).' },
-    { gpus: 50_000,  name: 'GPT-5',      row: 'a1',
-      desc: '<b>GPT-5</b> (OpenAI, 2025, estimated)<br>\u224850K H100-equiv GPUs (est.).<br>Used less training compute than GPT-4.5 due to focus on post-training scaling. Trained on Stargate infrastructure.' },
-  ];
-
-  const INFRA_LANDMARKS = [
-    { gpus: 1,       name: '1 GPU',       row: 'b1',
-      desc: '<b>NVIDIA H100 SXM</b><br>80 GB HBM3, 3.96 PFLOPS FP8.<br>The workhorse of modern AI training and inference.' },
-    { gpus: 8,       name: '1 node',      row: 'b1',
-      desc: '<b>DGX H100</b> \u2014 8\u00d7H100 SXM<br>640 GB HBM3, NVLink 900 GB/s, 32 PFLOPS FP8.<br>NVIDIA\u2019s flagship AI server, fits in a single 10U chassis.' },
-    { gpus: 32,      name: '1 rack',      row: 'b1',
-      desc: '<b>DGX SuperPOD rack</b> \u2014 4\u00d7DGX H100<br>32 GPUs, 2.5 TB HBM3, 40+ kW per rack.<br>The building block of enterprise AI clusters.' },
-    { gpus: 256,     name: 'SuperPOD',    row: 'b1',
-      desc: '<b>DGX SuperPOD (1 SU)</b> \u2014 32 nodes, 256 GPUs<br>NDR400 InfiniBand, 256 PFLOPS FP8.<br>NVIDIA\u2019s reference architecture for large-scale AI.' },
-    { gpus: 10_752,  name: 'ALPS',        row: 'b1',
-      desc: '<b>ALPS</b> \u2014 CSCS, Lugano, Switzerland<br>10,752 GH200 Grace-Hopper superchips, 270 PFLOPS.<br>#7 on TOP500. Used by Swiss AI Initiative to pre-train 70B-parameter LLMs.' },
-    { gpus: 12_288,  name: 'ByteDance',   row: 'b2',
-      desc: '<b>ByteDance MegaScale</b><br>12,288 GPUs (A100/H800 mix).<br>Trained a 175B model at 55.2% MFU (1.34\u00d7 Megatron-LM). Published at NSDI \u201924. Full-stack optimization for 10K+ GPU training.' },
-    { gpus: 64_000,  name: 'Stargate',    row: 'b1',
-      desc: '<b>Stargate</b> \u2014 OpenAI / Oracle, Abilene, TX<br>64K GB200 GPUs (planned end 2026), 1.2 GW.<br>$500B joint venture (OpenAI, Oracle, SoftBank, MGX). 875-acre campus, 8 AI factory buildings.' },
-    { gpus: 100_000, name: 'Tencent',     row: 'b2',
-      desc: '<b>Tencent Xingmai 2.0</b><br>100K GPUs (H800/A800 mix) in a single cluster.<br>60% comms efficiency gain over v1. 3.2 TB/s inter-server bandwidth. Supports training and fine-tuning at scale.' },
-    { gpus: 200_000, name: 'Colossus',    row: 'b1',
-      desc: '<b>Colossus</b> \u2014 xAI, Memphis, TN<br>200K H100/H200 GPUs, 250 MW.<br>Built in 122 days (vs 18\u201324 months typical). Powered by 35 gas turbines + 208 Tesla Megapacks.' },
-    { gpus: 250_000, name: 'CoreWeave',   row: 'b2',
-      desc: '<b>CoreWeave</b> \u2014 250K+ GPUs across 32 data centers<br>Mix of H100, H200, GB200, GB300.<br>Largest GPU-native cloud. IPO\u2019d 2025. Clients: OpenAI, Microsoft, Meta.' },
-    { gpus: 600_000, name: 'Meta',        row: 'b2',
-      desc: '<b>Meta AI fleet</b> \u2014 600K H100-equivalent GPUs<br>\u2248350K H100 + A100s. $12B+ GPU investment.<br>Organized into 24K-GPU clusters (RoCE + InfiniBand). Trained Llama 3 405B.' },
-    { gpus: 1_000_000, name: 'Colossus 2', row: 'b1',
-      desc: '<b>Colossus 2</b> \u2014 xAI (planned)<br>1M+ H100-equivalent GPUs, 2 GW power.<br>$20B Series E from NVIDIA, Cisco, and others. Expanding across Memphis-area facilities.' },
-  ];
-
-  function gpusToSlider(gpus) { return (Math.log(Math.max(gpus, 1)) - LOG_MIN) / (LOG_MAX - LOG_MIN); }
-  function sliderToGpus(val) { return Math.round(Math.exp(LOG_MIN + val * (LOG_MAX - LOG_MIN))); }
-
-  const modelSelect = $('model');
-  const gpuSlider = $('gpus');
-  const gpuLabelEl = $('gpuLabel');
-  const booksRateEl = $('booksRate');
-  const tpsInlineEl = $('tpsInline');
-  const totalTokensNumEl = $('totalTokensNum');
-  const totalItemNumEl = $('totalItemNum');
-  const totalItemUnitEl = $('totalItemUnit');
-  const themeTokens = {};
-
-  function refreshThemeTokens() {
-    const styles = getComputedStyle(document.documentElement);
-    themeTokens.sliderStart = styles.getPropertyValue('--slider-start').trim();
-    themeTokens.sliderMid = styles.getPropertyValue('--slider-mid').trim();
-    themeTokens.sliderEnd = styles.getPropertyValue('--slider-end').trim();
-    themeTokens.sliderRest = styles.getPropertyValue('--slider-rest').trim();
-    themeTokens.brand = styles.getPropertyValue('--brand').trim();
-    themeTokens.canvasBg = styles.getPropertyValue('--canvas-bg').trim();
-    themeTokens.canvasGrid = styles.getPropertyValue('--canvas-grid').trim();
-  }
-
-  refreshThemeTokens();
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    refreshThemeTokens();
-    updateSliderGradient();
-  });
-
-  let floatingItems = [], totalTokens = 0, spawnAccum = 0, lastTime = performance.now(), lastMetricUpdate = 0;
-
-  function getGpuCount() { return sliderToGpus(parseFloat(gpuSlider.value)); }
-  function getTps() { return parseInt(modelSelect.value) * getGpuCount(); }
-  function getPps() { return getTps() / TOKENS_PER_PAGE; }
-
-  function updateSliderGradient() {
-    const val = parseFloat(gpuSlider.value) * 100;
-    gpuSlider.style.background = 'linear-gradient(to right, '
-      + themeTokens.sliderStart + ' 0%, '
-      + themeTokens.sliderMid + ' ' + (val * 0.5) + '%, '
-      + themeTokens.sliderEnd + ' ' + val + '%, '
-      + themeTokens.sliderRest + ' ' + val + '%)';
-  }
-  updateSliderGradient();
-  function updateGpuLabel() { gpuLabelEl.textContent = formatGpuLabel(getGpuCount()); }
-  gpuSlider.addEventListener('input', () => { updateSliderGradient(); updateGpuLabel(); });
-
-  function formatGpuLabel(gpus) {
-    if (gpus >= 1_000_000) return (gpus / 1_000_000).toFixed(gpus >= 10_000_000 ? 0 : 1) + 'M GPUs';
-    if (gpus >= 1000) return (gpus / 1000).toFixed(gpus >= 10000 ? 0 : 1) + 'K GPUs';
-    return gpus + ' GPU' + (gpus > 1 ? 's' : '');
-  }
-
-  const rowEls = { a2: $('row-a2'), a1: $('row-a1'), b1: $('row-b1'), b2: $('row-b2') };
-
-  function addLandmark(lm) {
-    const pct = gpusToSlider(lm.gpus) * 100;
-    const isAbove = lm.row.startsWith('a');
-    const el = document.createElement('div');
-    el.className = 'landmark';
-    el.style.left = pct + '%';
-    let tipClass = 'tooltip';
-    let tipStyle = '';
-    if (pct > 80) { tipClass += ' tip-right'; tipStyle = 'left:auto;right:0;transform:none;'; }
-    else if (pct < 20) { tipClass += ' tip-left'; tipStyle = 'left:0;transform:none;'; }
-    const tip = '<div class="' + tipClass + '" style="' + tipStyle + '">' + lm.desc + '</div>';
-    el.innerHTML = isAbove
-      ? '<div class="name">' + lm.name + '</div><div class="tick"></div>' + tip
-      : '<div class="tick"></div><div class="name">' + lm.name + '</div>' + tip;
-    el.addEventListener('click', () => { gpuSlider.value = gpusToSlider(lm.gpus); updateSliderGradient(); updateGpuLabel(); resetCountdown(); });
-    rowEls[lm.row].appendChild(el);
-  }
-  TRAINING_RUNS.forEach(addLandmark);
-  INFRA_LANDMARKS.forEach(addLandmark);
-
-  const datasetBarsEl = $('datasetBars');
-  const dsEls = DATASETS.map(ds => {
-    const el = document.createElement('div');
-    el.className = 'dataset-item';
-
-    el.innerHTML = '<span class="ds-check">\u23f3</span><span class="ds-name">' + ds.name + '</span><span class="ds-time">-</span><span class="ds-size">(' + formatNumInt(ds.tokens) + ' toks)</span><div class="ds-tip">' + ds.desc + '</div>';
-    datasetBarsEl.appendChild(el);
-    return el;
-  });
-
-  function resetCountdown() {
-    dsDone = DATASETS.map(() => false);
-    totalTokens = 0;
-    floatingItems = [];
-    spawnAccum = 0;
-    dsEls.forEach(el => { el.classList.remove('done'); el.querySelector('.ds-check').textContent = '\u23f3'; el.querySelector('.ds-time').textContent = '-'; });
-  }
-
-  gpuSlider.addEventListener('input', () => { resetCountdown(); });
-  modelSelect.addEventListener('change', resetCountdown);
-
-  function formatNum(n) {
-    if (n >= 1e15) return (n / 1e15).toFixed(1) + 'Q';
-    if (n >= 1e12) return (n / 1e12).toFixed(1) + 'T';
-    if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
-    if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
-    if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
-    return Math.round(n).toString();
-  }
-
-  function formatNumInt(n) {
-    const fmt = (v, s) => (v % 1 === 0 ? v.toFixed(0) : v.toFixed(1)) + s;
-    if (n >= 1e15) return fmt(n / 1e15, 'Q');
-    if (n >= 1e12) return fmt(n / 1e12, 'T');
-    if (n >= 1e9) return fmt(n / 1e9, 'B');
-    if (n >= 1e6) return fmt(n / 1e6, 'M');
-    if (n >= 1e3) return fmt(n / 1e3, 'K');
-    return Math.round(n).toString();
-  }
-
-  function formatDuration(seconds) {
-    if (!isFinite(seconds) || seconds < 0) return '\u221e';
-    if (seconds < 1) return '<1s';
-    if (seconds < 60) return Math.round(seconds) + 's';
-    if (seconds < 3600) return Math.round(seconds / 60) + 'm';
-    if (seconds < 86400) return (seconds / 3600).toFixed(1) + 'h';
-    if (seconds < 86400 * 365) return (seconds / 86400).toFixed(1) + 'd';
-    const years = seconds / (86400 * 365);
-    if (years < 1000) return years.toFixed(1) + 'y';
-    if (years < 1e6) return (years / 1e3).toFixed(1) + 'Ky';
-    if (years < 1e9) return (years / 1e6).toFixed(1) + 'My';
-    return (years / 1e9).toFixed(1) + 'By';
-  }
-
-  function getW() { return canvas.width; }
-  function getH() { return canvas.height; }
-
-  // Per-frame cached state to avoid recomputing in nested draw calls
-  let _fNow = 0, _fPps = 0, _fFanPhase = 0, _fBlinkSpeed = 0;
-
-  function getHardwareLevel(gpus) {
-    if (gpus < GPUS_PER_NODE) return 'gpu';
-    if (gpus < GPUS_PER_RACK) return 'node';
-    if (gpus < GPUS_PER_SUPERPOD) return 'rack';
-    return 'cluster';
-  }
-
-  // Offscreen buffer for hardware rendering
-  const hwCanvas = document.createElement('canvas');
-  const hwCtx = hwCanvas.getContext('2d');
-  let hwDirty = true, hwLastGpus = -1, hwLastW = 0, hwLastH = 0;
-  gpuSlider.addEventListener('input', () => { hwDirty = true; });
-  modelSelect.addEventListener('change', () => { hwDirty = true; });
-
-  function drawHardware() {
-    const W = getW(), H = getH();
-    const gpus = getGpuCount();
-
-    // Only re-render hardware if config or size changed, or animation needs update
-    const needsAnim = _fPps > 0;
-    if (hwCanvas.width !== W * 0.34 || hwCanvas.height !== H) {
-      hwCanvas.width = Math.ceil(W * 0.34);
-      hwCanvas.height = H;
-      hwDirty = true;
-    }
-    // Animated hardware (fans/LEDs) redraws every frame when running
-    if (gpus !== hwLastGpus || hwDirty || needsAnim) {
-      hwLastGpus = gpus; hwDirty = false;
-      const prevCtx = ctx;
-      ctx = hwCtx;
-      ctx.clearRect(0, 0, hwCanvas.width, hwCanvas.height);
-
-      const pad = 10;
-      const aw = hwCanvas.width - 2 * pad, ax = pad;
-      const level = getHardwareLevel(gpus);
-
-      const ah = hwCanvas.height * 0.75;
-      const ay = (hwCanvas.height - ah) / 2;
-      ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic';
-
-      if (level === 'gpu') drawGpuGrid(gpus, ax, ay, aw, ah);
-      else if (level === 'node') drawNodeGrid(Math.max(1, Math.round(gpus / GPUS_PER_NODE)), ax, ay, aw, ah);
-      else if (level === 'rack') drawRackGrid(Math.max(1, Math.round(gpus / GPUS_PER_RACK)), ax, ay, aw, ah);
-      else drawPodGrid(Math.round(gpus / GPUS_PER_SUPERPOD), ax, ay, aw, ah);
-
-      ctx = prevCtx;
-    }
-    ctx.drawImage(hwCanvas, 0, 0);
-  }
-
-  function drawGpuGrid(count, ax, ay, aw, ah) {
-    let cols, rows;
-    if (count === 1) { cols = 1; rows = 1; }
-    else if (count === 2) { cols = 2; rows = 1; }
-    else if (count <= 4) { cols = 2; rows = 2; }
-    else { cols = 4; rows = 2; }
-    const gap = 3;
-    const gw = Math.min((aw - gap * (cols - 1)) / cols, ((ah - gap * (rows - 1)) / rows) * 0.6);
-    const gh = gw / 0.6;
-    const offX = ax + (aw - (cols * gw + (cols - 1) * gap)) / 2;
-    const offY = ay + (ah - (rows * gh + (rows - 1) * gap)) / 2;
-    const fanSpeed = _fFanPhase;
-    for (let i = 0; i < count; i++) {
-      const c = i % cols, r = Math.floor(i / cols);
-      drawSingleGpu(offX + c * (gw + gap), offY + r * (gh + gap), gw, gh, fanSpeed + i * 0.5);
-    }
-  }
-
-  function drawSingleGpu(x, y, gw, gh, fanPhase) {
-    ctx.fillStyle = '#2a2a2a'; ctx.fillRect(x, y, gw, gh);
-    ctx.strokeStyle = '#000'; ctx.lineWidth = 1.5; ctx.strokeRect(x, y, gw, gh);
-    if (gw < 12) { ctx.fillStyle = '#1a1a1a'; ctx.fillRect(x + gw * 0.15, y + gw * 0.08, gw * 0.7, gw * 0.7); return; }
-    const fs = gw * 0.7, fx = x + (gw - fs) / 2, fy = y + gw * 0.08;
-    ctx.fillStyle = '#1a1a1a'; ctx.fillRect(fx, fy, fs, fs);
-    const cx = fx + fs / 2, cy = fy + fs / 2, fr = fs / 2 - 2;
-    ctx.beginPath(); ctx.arc(cx, cy, fr, 0, Math.PI * 2); ctx.fillStyle = '#333'; ctx.fill();
-    if (gw >= 20) {
-      const br = fr - 2; ctx.save(); ctx.translate(cx, cy); ctx.rotate(fanPhase);
-      const n = gw >= 40 ? 7 : 5;
-      for (let b = 0; b < n; b++) {
-        ctx.rotate(Math.PI * 2 / n); ctx.beginPath(); ctx.moveTo(0, 0);
-        ctx.quadraticCurveTo(br * 0.5, br * 0.3, br * 0.85, 0);
-        ctx.quadraticCurveTo(br * 0.5, -br * 0.3, 0, 0);
-        ctx.fillStyle = '#555'; ctx.fill();
-      }
-      ctx.restore();
-    }
-    const hy = fy + fs + 2, hh = gh - (hy - y) - gw * 0.15;
-    if (hh > 4) { const lh = Math.max(1, Math.min(4, hh / 6)), lg = lh * 1.5;
-      for (let i = 0; i * lg < hh; i++) { ctx.fillStyle = i % 2 === 0 ? '#444' : '#383838'; ctx.fillRect(x + gw * 0.1, hy + i * lg, gw * 0.8, lh); } }
-    if (gw >= 30) { ctx.fillStyle = '#c4a020'; const pw = Math.max(1, gw * 0.06), pc = Math.floor(gw * 0.7 / (pw * 2)), ps = x + (gw - pc * pw * 2) / 2;
-      for (let p = 0; p < pc; p++) ctx.fillRect(ps + p * pw * 2, y + gh, pw, Math.max(2, gw * 0.08)); }
-  }
-
-  // Grid of DGX nodes
-  function drawNodeGrid(count, ax, ay, aw, ah) {
-    const gap = 6;
-    const cols = count <= 2 ? 1 : 2;
-    const rows = Math.ceil(count / cols);
-    const nw = (aw - gap * (cols - 1)) / cols;
-    const nh = Math.min((ah - gap * (rows - 1)) / rows, aw * 0.35);
-    const tw = cols * nw + (cols - 1) * gap;
-    const th = rows * nh + (rows - 1) * gap;
-    const ox = ax + (aw - tw) / 2, oy = ay + (ah - th) / 2;
-    for (let i = 0; i < count; i++) {
-      const c = i % cols, r = Math.floor(i / cols);
-      drawSingleNode(ox + c * (nw + gap), oy + r * (nh + gap), nw, nh);
-    }
-  }
-
-  function drawSingleNode(nx, ny, nw, nh) {
-    ctx.fillStyle = '#1a1a2e';
-    ctx.beginPath(); ctx.roundRect(nx, ny, nw, nh, 4); ctx.fill();
-    ctx.strokeStyle = '#555'; ctx.lineWidth = 2;
-    ctx.beginPath(); ctx.roundRect(nx, ny, nw, nh, 4); ctx.stroke();
-    const slotW = (nw - 20) / 8, slotH = nh * 0.6;
-    const slotY = ny + (nh - slotH) / 2;
-    for (let i = 0; i < 8; i++) {
-      const sx = nx + 10 + i * slotW;
-      drawSingleGpu(sx + 1, slotY, slotW - 2, slotH, _fFanPhase + i * 0.5);
-    }
-    const ledAlpha = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(_fNow / (300 - _fBlinkSpeed * 1.2)));
-    ctx.globalAlpha = ledAlpha;
-    ctx.fillStyle = '#4ade80';
-    ctx.beginPath(); ctx.arc(nx + 8, ny + 8, 3, 0, Math.PI * 2); ctx.fill();
-    ctx.globalAlpha = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(_fNow / (400 - _fBlinkSpeed) + 1.5));
-    ctx.fillStyle = '#60a5fa';
-    ctx.beginPath(); ctx.arc(nx + 18, ny + 8, 3, 0, Math.PI * 2); ctx.fill();
-    ctx.globalAlpha = 1;
-  }
-
-  // Grid of racks
-  function drawRackGrid(count, ax, ay, aw, ah) {
-    const gap = 4;
-    const cols = count <= 3 ? count : Math.min(4, Math.ceil(Math.sqrt(count)));
-    const rows = Math.ceil(count / cols);
-    const rw = (aw - gap * (cols - 1)) / cols;
-    const rh = Math.min((ah - gap * (rows - 1)) / rows, ah * 0.95);
-    const tw = cols * rw + (cols - 1) * gap;
-    const th = rows * rh + (rows - 1) * gap;
-    const ox = ax + (aw - tw) / 2, oy = ay + (ah - th) / 2;
-    for (let i = 0; i < count; i++) {
-      const c = i % cols, r = Math.floor(i / cols);
-      drawSingleRack(ox + c * (rw + gap), oy + r * (rh + gap), rw, rh);
-    }
-  }
-
-  function drawSingleRack(rx, ry, rw, rh) {
-    ctx.fillStyle = '#111'; ctx.beginPath(); ctx.roundRect(rx, ry, rw, rh, 4); ctx.fill();
-    ctx.strokeStyle = '#555'; ctx.lineWidth = 2;
-    ctx.beginPath(); ctx.roundRect(rx, ry, rw, rh, 4); ctx.stroke();
-    const nodeCount = 4, pad = 4, gap = 3;
-    const nodeH = (rh - 2 * pad - (nodeCount - 1) * gap) / nodeCount;
-    const nodeW = rw - 2 * pad;
-    for (let n = 0; n < nodeCount; n++) {
-      const ny = ry + pad + n * (nodeH + gap), nx = rx + pad;
-      ctx.fillStyle = '#1a1a2e';
-      ctx.beginPath(); ctx.roundRect(nx, ny, nodeW, nodeH, 2); ctx.fill();
-      ctx.strokeStyle = '#444'; ctx.lineWidth = 1;
-      ctx.beginPath(); ctx.roundRect(nx, ny, nodeW, nodeH, 2); ctx.stroke();
-      const slotCount = 8, slotW = (nodeW - 6) / slotCount;
-      for (let g = 0; g < slotCount; g++) {
-        const gx = nx + 3 + g * slotW, gy = ny + 2;
-        ctx.fillStyle = '#2a2a2a'; ctx.fillRect(gx, gy, slotW - 1, nodeH - 4);
-        const fcx = gx + (slotW - 1) / 2, fcy = gy + (nodeH - 4) * 0.35;
-        const fr = Math.min((slotW - 1) * 0.35, (nodeH - 4) * 0.25);
-        if (fr > 1) {
-          ctx.beginPath(); ctx.arc(fcx, fcy, fr, 0, Math.PI * 2); ctx.fillStyle = '#444'; ctx.fill();
-          ctx.save(); ctx.translate(fcx, fcy); ctx.rotate(_fFanPhase + g * 0.3 + n);
-          for (let b = 0; b < 4; b++) { ctx.rotate(Math.PI / 2); ctx.beginPath(); ctx.moveTo(0, 0);
-            ctx.lineTo(fr * 0.8, fr * 0.3); ctx.lineTo(fr * 0.8, -fr * 0.3); ctx.fillStyle = '#666'; ctx.fill(); }
-          ctx.restore();
-        }
-      }
-      const rackLedAlpha = 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(_fNow / (350 - _fBlinkSpeed) + n * 1.2));
-      ctx.globalAlpha = rackLedAlpha;
-      ctx.fillStyle = '#4ade80';
-      ctx.beginPath(); ctx.arc(nx + nodeW - 6, ny + nodeH / 2, Math.min(2, nodeH * 0.15), 0, Math.PI * 2); ctx.fill();
-      ctx.globalAlpha = 1;
-    }
-  }
-
-  // SuperPod grid: draw abstract pods
-  function drawPodGrid(pods, ax, ay, aw, ah) {
-    const vn = Math.min(pods, 1024);
-    let cols, rows;
-    if (vn <= 2) { cols = 1; rows = vn; } else if (vn <= 4) { cols = 2; rows = 2; }
-    else if (vn <= 8) { cols = 2; rows = 4; } else if (vn <= 16) { cols = 4; rows = 4; }
-    else if (vn <= 32) { cols = 4; rows = 8; } else if (vn <= 64) { cols = 8; rows = 8; }
-    else if (vn <= 128) { cols = 8; rows = 16; } else if (vn <= 256) { cols = 16; rows = 16; }
-    else if (vn <= 512) { cols = 16; rows = 32; } else { cols = 32; rows = 32; }
-    const gap = vn <= 16 ? 3 : vn <= 64 ? 2 : 1;
-    const cw = (aw - gap * (cols - 1)) / cols, ch = (ah - gap * (rows - 1)) / rows;
-    const tw = cols * cw + (cols - 1) * gap, th = rows * ch + (rows - 1) * gap;
-    const ox = ax + (aw - tw) / 2, oy = ay + (ah - th) / 2;
-    for (let i = 0; i < vn; i++) {
-      const c = i % cols, r = Math.floor(i / cols);
-      drawPodUnit(ox + c * (cw + gap), oy + r * (ch + gap), cw, ch, vn);
-    }
-    if (pods > vn) {
-      ctx.fillStyle = 'rgba(0,0,0,0.7)';
-      const lh = 24, lw = aw - 20, lx = ax + (aw - lw) / 2, ly = ay + ah - lh - 5;
-      ctx.fillRect(lx, ly, lw, lh); ctx.fillStyle = '#fff';
-      ctx.font = 'bold 12px system-ui, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-      const ns = pods >= 1000 ? (pods / 1000).toFixed(pods >= 10000 ? 0 : 1) + 'K' : pods.toLocaleString();
-      ctx.fillText(ns + ' SuperPODs', lx + lw / 2, ly + lh / 2);
-      ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic';
-    }
-  }
-
-  function drawPodUnit(x, y, nw, nh, total) {
-    const r = Math.min(2, nw * 0.1);
-    ctx.fillStyle = '#1a1a2e'; ctx.beginPath(); ctx.roundRect(x, y, nw, nh, r); ctx.fill();
-    ctx.strokeStyle = '#444'; ctx.lineWidth = total <= 16 ? 1 : 0.5;
-    ctx.beginPath(); ctx.roundRect(x, y, nw, nh, r); ctx.stroke();
-    if (nw < 4) return;
-    const lr = Math.max(0.8, Math.min(2, nw * 0.06)), ly = y + nh * 0.2;
-    // Skip per-unit LED animation for large grids (> 64 pods) to save draw calls
-    if (total > 64) {
-      ctx.fillStyle = '#4ade80'; ctx.beginPath(); ctx.arc(x + nw * 0.2, ly, lr, 0, Math.PI * 2); ctx.fill();
-    } else {
-      const podHash = (x * 31 + y * 17) & 0xffff;
-      ctx.globalAlpha = 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(_fNow / (400 - _fBlinkSpeed) + podHash));
-      ctx.fillStyle = '#4ade80'; ctx.beginPath(); ctx.arc(x + nw * 0.2, ly, lr, 0, Math.PI * 2); ctx.fill();
-      if (nw >= 8) {
-        ctx.globalAlpha = 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(_fNow / (350 - _fBlinkSpeed) + podHash + 2));
-        ctx.fillStyle = '#60a5fa'; ctx.beginPath(); ctx.arc(x + nw * 0.4, ly, lr, 0, Math.PI * 2); ctx.fill();
-      }
-      if (nw >= 6) {
-        ctx.globalAlpha = 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(_fNow / (300 - _fBlinkSpeed) + podHash + 4));
-        ctx.fillStyle = '#c4a020'; ctx.beginPath(); ctx.arc(x + nw * 0.6, ly, lr, 0, Math.PI * 2); ctx.fill();
-      }
-      ctx.globalAlpha = 1;
-    }
-    if (nw >= 10) {
-      const vy = y + nh * 0.45, vh = nh * 0.4, lc = Math.min(6, Math.floor(nw / 4));
-      ctx.strokeStyle = '#333'; ctx.lineWidth = 0.5;
-      for (let i = 0; i < lc; i++) { const lx = x + nw * 0.2 + (nw * 0.6) * i / lc; ctx.beginPath(); ctx.moveTo(lx, vy); ctx.lineTo(lx, vy + vh); ctx.stroke(); }
-    }
-  }
-
-  function getVisualMode() {
-    const bps = getPps() / PAGES_PER_BOOK;
-    if (bps >= BOOKS_PER_SHELF) return 'shelf';
-    if (bps >= 1) return 'book';
-    return 'page';
-  }
-
-  const EMOJI = { page: '\u{1F4C4}', book: '\u{1F4D6}', shelf: '\u{1F4DA}' };
-  const EMOJI_SIZE = { page: 28, book: 34, shelf: 40 };
-
-  // Pre-render emojis at multiple scales to offscreen canvases
-  const emojiCache = {};
-  function getEmojiCanvas(type, scale) {
-    const sz = Math.round(EMOJI_SIZE[type] * scale);
-    const key = type + '_' + sz;
-    if (emojiCache[key]) return emojiCache[key];
-    const off = document.createElement('canvas');
-    off.width = sz + 4; off.height = sz + 4;
-    const octx = off.getContext('2d');
-    octx.font = sz + 'px system-ui, sans-serif';
-    octx.textBaseline = 'top';
-    octx.fillText(EMOJI[type], 2, 2);
-    emojiCache[key] = off;
-    return off;
-  }
-
-  function drawItem(p, now, fadeStart, fadeRange) {
-    const off = getEmojiCanvas(p.type, p.scale);
-    const bobY = p.y + Math.sin(now / 600 + p.bobPhase) * p.bobAmp;
-    const angle = Math.sin(now / 400 + p.wobblePhase) * p.wobbleAmp;
-    const needsAlpha = p.x > fadeStart;
-    if (needsAlpha) ctx.globalAlpha = 1 - (p.x - fadeStart) / fadeRange;
-    if (Math.abs(angle) < 0.01) {
-      ctx.drawImage(off, p.x, bobY);
-    } else {
-      ctx.save();
-      ctx.translate(p.x + off.width / 2, bobY + off.height / 2);
-      ctx.rotate(angle);
-      ctx.drawImage(off, -off.width / 2, -off.height / 2);
-      ctx.restore();
-    }
-    if (needsAlpha) ctx.globalAlpha = 1;
-  }
-
-  function spawnItem() {
-    const H = getH(), W = getW();
-    const spawnX = W * 0.34;
-    const margin = H * 0.12;
-    const yMin = margin + H * 0.04, yMax = H - margin + H * 0.04, y = yMin + Math.random() * (yMax - yMin);
-    const mode = getVisualMode();
-    const pps = getPps();
-    const pagesPerShelf = PAGES_PER_BOOK * BOOKS_PER_SHELF;
-    const rate = mode === 'shelf' ? pps / pagesPerShelf : mode === 'book' ? pps / PAGES_PER_BOOK : pps;
-    const bs = 0.8 + Math.log10(Math.max(1, rate)) * 0.8;
-    const tokens = mode === 'shelf' ? TOKENS_PER_SHELF : mode === 'book' ? TOKENS_PER_BOOK : TOKENS_PER_PAGE;
-    const scale = 0.85 + Math.random() * 0.3;
-    const bobAmp = 3 + Math.random() * 5;
-    const bobPhase = Math.random() * Math.PI * 2;
-    const wobbleAmp = mode === 'page' ? 0.15 + Math.random() * 0.25 : 0.08 + Math.random() * 0.15;
-    const wobblePhase = Math.random() * Math.PI * 2;
-    const depthSpeed = (bs + Math.random() * bs) * (0.7 + scale * 0.6);
-    totalTokens += tokens;
-    floatingItems.push({
-      x: spawnX + Math.random() * 20, y, speed: depthSpeed,
-      type: mode, scale, bobAmp, bobPhase, wobbleAmp, wobblePhase
-    });
-  }
-
-  function frame(now) {
-    const dt = Math.min((now - lastTime) / 1000, 0.1); lastTime = now;
-    const W = getW(), H = getH();
-
-    // Cache per-frame values for nested draw calls
-    _fNow = now;
-    _fPps = getPps();
-    _fFanPhase = (now / 200) * Math.min(_fPps, 100);
-    _fBlinkSpeed = Math.min(_fPps, 200);
-
-    ctx.clearRect(0, 0, W, H);
-    ctx.fillStyle = themeTokens.canvasBg; ctx.fillRect(0, 0, W, H);
-
-    const spawnX = W * 0.34;
-    ctx.strokeStyle = themeTokens.canvasGrid; ctx.lineWidth = 1; ctx.setLineDash([4, 8]);
-    const gridMargin = H * 0.12;
-    const gridOffset = H * 0.04;
-    for (let y = gridMargin + gridOffset; y < H - gridMargin + gridOffset; y += 40) { ctx.beginPath(); ctx.moveTo(spawnX, y); ctx.lineTo(W - 20, y); ctx.stroke(); }
-    ctx.setLineDash([]);
-
-    const pps = _fPps, mode = getVisualMode();
-    const pagesPerShelf = PAGES_PER_BOOK * BOOKS_PER_SHELF;
-    const spawnRate = mode === 'shelf' ? Math.min(pps / pagesPerShelf, 60) : mode === 'book' ? Math.min(pps / PAGES_PER_BOOK, 120) : Math.min(pps, 400);
-    spawnAccum += spawnRate * dt;
-    while (spawnAccum >= 1) { spawnItem(); spawnAccum -= 1; }
-
-    const fadeStart = W * 0.9;
-    const fadeRange = W - fadeStart;
-    const cullX = W + 40;
-
-    // Update positions and cull off-screen items
-    let writeIdx = 0;
-    for (let i = 0; i < floatingItems.length; i++) {
-      const p = floatingItems[i];
-      p.x += p.speed;
-      if (p.x > cullX) continue;
-      floatingItems[writeIdx++] = p;
-    }
-    floatingItems.length = writeIdx;
-
-    // Sort by cache key so repeated drawImage calls hit the same source texture
-    floatingItems.sort((a, b) => {
-      const ka = EMOJI_SIZE[a.type] * 100 + Math.round(a.scale * 30);
-      const kb = EMOJI_SIZE[b.type] * 100 + Math.round(b.scale * 30);
-      return ka - kb;
-    });
-
-    for (let i = 0; i < floatingItems.length; i++) {
-      drawItem(floatingItems[i], now, fadeStart, fadeRange);
-    }
-
-    drawHardware();
-
-    // Throttle DOM metric updates to ~4 Hz to prevent flickering
-    if (now - lastMetricUpdate > 100) {
-      lastMetricUpdate = now;
-      const tps = getTps();
-      const booksPerSecond = pps / PAGES_PER_BOOK;
-      const shelvesPerSecond = booksPerSecond / BOOKS_PER_SHELF;
-      if (shelvesPerSecond >= 1) {
-        booksRateEl.textContent = formatNum(shelvesPerSecond) + ' shelves/sec';
-      } else if (booksPerSecond >= 1) {
-        booksRateEl.textContent = formatNum(booksPerSecond) + ' books/sec';
-      } else {
-        booksRateEl.textContent = formatNum(pps) + ' pages/sec';
-      }
-      tpsInlineEl.textContent = '(' + formatNum(tps) + ' TPS)';
-      totalTokensNumEl.textContent = formatNum(totalTokens);
-      const totalShelves = totalTokens / TOKENS_PER_SHELF;
-      const totalBooks = totalTokens / TOKENS_PER_BOOK;
-      const totalPages = totalTokens / TOKENS_PER_PAGE;
-      if (totalShelves >= 1) {
-        totalItemNumEl.textContent = formatNum(totalShelves);
-        totalItemUnitEl.textContent = '📚';
-      } else if (totalBooks >= 1) {
-        totalItemNumEl.textContent = formatNum(totalBooks);
-        totalItemUnitEl.textContent = '📖';
-      } else {
-        totalItemNumEl.textContent = formatNum(totalPages);
-        totalItemUnitEl.textContent = '📄';
-      }
-
-      for (let i = 0; i < DATASETS.length; i++) {
-        if (dsDone[i]) continue;
-        const remaining = DATASETS[i].tokens - totalTokens;
-        if (remaining <= 0) {
-          dsDone[i] = true;
-          dsEls[i].classList.add('done');
-          dsEls[i].querySelector('.ds-check').textContent = '\u2705';
-          dsEls[i].querySelector('.ds-time').textContent = 'done';
-        } else {
-          dsEls[i].querySelector('.ds-time').textContent = formatDuration(remaining / tps);
-        }
-      }
-    }
-
-    requestAnimationFrame(frame);
-  }
-
-  requestAnimationFrame(frame);
-})();
-</script>
-</body>
-</html>