add another suggestion for a banner visualization

app/src/content/embeds/banner-library.html

@@ -0,0 +1,756 @@
+<div class="babel-library" style="width:100%;margin:0;aspect-ratio:2.5/1;min-height:300px;position:relative;overflow:hidden;cursor:grab;"></div>
+<script>
+(() => {
+  const bootstrap = () => {
+    const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+    const container = (mount && mount.classList.contains('babel-library') && mount) ||
+      Array.from(document.querySelectorAll('.babel-library')).find(el => el.dataset.mounted !== 'true');
+    if (!container || container.dataset.mounted === 'true') return;
+    container.dataset.mounted = 'true';
+
+    const canvas = document.createElement('canvas');
+    canvas.style.display = 'block';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    container.appendChild(canvas);
+    let ctx = canvas.getContext('2d');
+
+    // --- Constants ---
+    const TOKENS_PER_BOOK = 125_000;
+    const BOOKS_PER_SHELF = 250;
+    const SHELVES_PER_WALL = 50;
+    const WALLS_PER_CORRIDOR = 20;
+    const TOTAL_TOKENS = 1_056_095_620_280;
+    const TOTAL_BOOKS = Math.round(TOTAL_TOKENS / TOKENS_PER_BOOK);
+
+    // Prompt labels and canonical mapping
+    const PROMPT_LABELS = {
+      article: 'Article', commentary: 'Commentary', discussion: 'Discussion',
+      explanation: 'Explanation', faq: 'FAQ', math: 'Math', narrative: 'Narrative',
+      table: 'Table', tutorial: 'Tutorial', distill: 'Distill',
+      diverse_qa_pairs: 'Diverse QA', extract_knowledge: 'Extract Knowledge',
+      knowledge_list: 'Knowledge List', wikipedia_style_rephrasing: 'Wikipedia Style',
+      guided_rewrite_original: 'Guided Rewrite', guided_rewrite_improved: 'Guided Rewrite+',
+      continue: 'Continue', summarize: 'Summarize'
+    };
+
+    function toCanonical(promptPath) {
+      let base = promptPath.split('/').pop().replace('.md', '');
+      // Strip model-specific suffixes like -1b-hq, -falcon3-1b-hq, -smollm2-1.7b-hq, etc.
+      return base.replace(/-([\w.]+-)?\d+(\.\d+)?[bm]-\w+$/, '');
+    }
+
+    // --- State ---
+    let W = 800, H = 320, dpr = 1;
+    let zoom = 0.0, targetZoom = 1.0;
+    let autoPlaying = true, autoStartTime = 0, autoResumeZoom = 0;
+    const AUTO_DURATION = 60000;
+    let scrollResumeTimer = null;
+    let promptDistribution = null; // [{name, label, tokens, fraction, color}]
+    let shelfTextures = []; // offscreen canvases for shelf strips
+    let isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+
+    // Seeded RNG for deterministic book colors
+    function mulberry32(a) {
+      return () => { a |= 0; a = a + 0x6D2B79F5 | 0;
+        let t = Math.imul(a ^ a >>> 15, 1 | a);
+        t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+        return ((t ^ t >>> 14) >>> 0) / 4294967296; };
+    }
+    // Tooltip
+    const tip = document.createElement('div');
+    Object.assign(tip.style, {
+      position: 'absolute', pointerEvents: 'none', padding: '8px 12px', borderRadius: '8px',
+      fontSize: '12px', lineHeight: '1.4', border: '1px solid var(--border-color)',
+      background: 'var(--surface-bg)', color: 'var(--text-color)',
+      boxShadow: '0 4px 24px rgba(0,0,0,.18)', opacity: '0', transition: 'opacity .12s ease',
+      whiteSpace: 'nowrap', zIndex: '10', fontFamily: "'Inter', system-ui, sans-serif"
+    });
+    container.appendChild(tip);
+
+    // --- Colors ---
+    function getColors() {
+      isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+      // Curated palette that works in both light and dark mode
+      return {
+        bg: isDark ? '#1a1a2e' : '#faf9f6',
+        shelfWood: isDark ? '#3d2b1f' : '#c8a882',
+        shelfEdge: isDark ? '#2a1d14' : '#a08060',
+        wallBg: isDark ? '#141424' : '#f0ece4',
+        text: isDark ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.85)',
+        textMuted: isDark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.4)',
+        shadow: isDark ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.15)',
+        vignette: isDark ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.06)',
+      };
+    }
+    let colors = getColors();
+    const observer = new MutationObserver(() => {
+      colors = getColors();
+      rebuildShelfTextures();
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
+    // Prompt colors: use ColorPalettes if available, otherwise fall back
+    function getPromptColors(n) {
+      if (window.ColorPalettes) return window.ColorPalettes.getColors('categorical', n);
+      // Tableau-inspired fallback
+      return ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc949',
+              '#af7aa1','#ff9da7','#9c755f','#bab0ab','#5fa2ce','#fc7d0b',
+              '#a3cce9','#ffc428','#c85200','#8cd17d'].slice(0, n);
+    }
+
+    // --- Data loading ---
+    const JSON_PATHS = ['/data/rephrasing_metadata.json', './assets/data/rephrasing_metadata.json',
+                        '../assets/data/rephrasing_metadata.json'];
+    async function fetchFirst(paths) {
+      for (const p of paths) {
+        try { const r = await fetch(p, { cache: 'no-cache' }); if (r.ok) return r.json(); } catch(_) {}
+      }
+      throw new Error('Data not found');
+    }
+
+    function buildDistribution(raw) {
+      const byPrompt = {};
+      for (const entry of raw) {
+        const key = toCanonical(entry.prompt);
+        byPrompt[key] = (byPrompt[key] || 0) + entry.output_tokens;
+      }
+      const totalTokens = Object.values(byPrompt).reduce((a, b) => a + b, 0);
+      const keys = Object.keys(byPrompt).sort((a, b) => byPrompt[b] - byPrompt[a]);
+      const palette = getPromptColors(keys.length);
+      return keys.map((key, i) => ({
+        name: key,
+        label: PROMPT_LABELS[key] || key,
+        tokens: byPrompt[key],
+        fraction: byPrompt[key] / totalTokens,
+        color: palette[i]
+      }));
+    }
+
+    // Weighted random prompt selection using precomputed CDF
+    let cdf = [];
+    function buildCdf() {
+      if (!promptDistribution) return;
+      cdf = [];
+      let acc = 0;
+      for (const p of promptDistribution) { acc += p.fraction; cdf.push(acc); }
+    }
+    function randomPrompt(rand) {
+      const r = rand();
+      for (let i = 0; i < cdf.length; i++) { if (r <= cdf[i]) return promptDistribution[i]; }
+      return promptDistribution[promptDistribution.length - 1];
+    }
+
+    // --- Shelf texture generation ---
+    // Each shelf texture is a thin offscreen canvas filled with book spines
+    function makeShelfTexture(shelfWidth, shelfHeight, seed) {
+      const oc = document.createElement('canvas');
+      oc.width = shelfWidth; oc.height = shelfHeight;
+      const octx = oc.getContext('2d');
+      const localRng = mulberry32(seed);
+      let x = 0;
+      while (x < shelfWidth) {
+        const p = randomPrompt(localRng);
+        const spineW = 2 + localRng() * 4;
+        octx.fillStyle = p.color;
+        octx.fillRect(x, 0, spineW, shelfHeight);
+        // Subtle spine highlight
+        octx.fillStyle = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.25)';
+        octx.fillRect(x, 0, 1, shelfHeight);
+        x += spineW + 0.5;
+      }
+      return oc;
+    }
+    function rebuildShelfTextures() {
+      if (!promptDistribution) return;
+      shelfTextures = [];
+      for (let i = 0; i < 60; i++) {
+        shelfTextures.push(makeShelfTexture(400, 20, 1000 + i));
+      }
+    }
+
+    // --- Zoom mapping ---
+    // Each level has a core range and overlapping fade zones for crossfade transitions.
+    // Format: [start, end, fadeWidth]
+    const LEVEL_BOUNDS = [
+      { name: 'book',     start: 0.00, end: 0.30, fade: 0.06 },
+      { name: 'shelf',    start: 0.24, end: 0.52, fade: 0.06 },
+      { name: 'wall',     start: 0.46, end: 0.72, fade: 0.06 },
+      { name: 'corridor', start: 0.66, end: 0.90, fade: 0.06 },
+      { name: 'library',  start: 0.84, end: 1.00, fade: 0.06 },
+    ];
+
+    function getLevelAlpha(z, bound) {
+      const fadeIn = Math.min(1, (z - bound.start) / bound.fade);
+      // Last level (library) doesn't fade out; first level (book) doesn't fade in
+      if (bound.end >= 1.0) return Math.max(0, Math.min(1, fadeIn));
+      const fadeOut = Math.min(1, (bound.end - z) / bound.fade);
+      if (bound.start <= 0.0) return Math.max(0, Math.min(1, fadeOut));
+      return Math.max(0, Math.min(1, fadeIn, fadeOut));
+    }
+
+    // Returns the primary level info (used for scale indicator, tooltips, etc.)
+    function getScaleInfo(z) {
+      if (z < 0.30) return { level: 'book', t: z / 0.30, booksVisible: Math.round(20 + (z / 0.30) * 480) };
+      if (z < 0.52) return { level: 'shelf', t: (z - 0.24) / 0.28, shelvesVisible: Math.round(1 + ((z - 0.24) / 0.28) * 49) };
+      if (z < 0.72) return { level: 'wall', t: (z - 0.46) / 0.26, wallsVisible: Math.round(2 + ((z - 0.46) / 0.26) * 18) };
+      if (z < 0.90) return { level: 'corridor', t: (z - 0.66) / 0.24, corridorsVisible: Math.round(2 + ((z - 0.66) / 0.24) * 14) };
+      return { level: 'library', t: (z - 0.84) / 0.16, corridorsVisible: 33 };
+    }
+
+    // Build per-level info for crossfade rendering
+    function getLevelInfoForBound(b, z) {
+      const t = Math.max(0, Math.min(1, (z - b.start) / (b.end - b.start)));
+      switch (b.name) {
+        case 'book': return { level: 'book', t, booksVisible: Math.round(20 + t * 480) };
+        case 'shelf': return { level: 'shelf', t, shelvesVisible: Math.round(1 + t * 49) };
+        case 'wall': return { level: 'wall', t, wallsVisible: Math.round(2 + t * 18) };
+        case 'corridor': return { level: 'corridor', t, corridorsVisible: Math.round(2 + t * 14) };
+        case 'library': return { level: 'library', t, corridorsVisible: 33 };
+      }
+    }
+
+    // --- Drawing functions ---
+
+    function drawBookLevel(info) {
+      const n = info.booksVisible;
+      const bookW = W / (n * 1.05);
+      const bookH = H * 0.7;
+      const startY = (H - bookH) / 2;
+      const shelfY = startY + bookH;
+      const localRng = mulberry32(7);
+
+      // Shelf board
+      ctx.fillStyle = colors.shelfWood;
+      ctx.fillRect(0, shelfY, W, H * 0.06);
+      ctx.fillStyle = colors.shelfEdge;
+      ctx.fillRect(0, shelfY, W, 2);
+      // Shadow under shelf
+      const grad = ctx.createLinearGradient(0, shelfY + H * 0.06, 0, shelfY + H * 0.06 + 10);
+      grad.addColorStop(0, colors.shadow);
+      grad.addColorStop(1, 'transparent');
+      ctx.fillStyle = grad;
+      ctx.fillRect(0, shelfY + H * 0.06, W, 10);
+
+      for (let i = 0; i < n; i++) {
+        const p = randomPrompt(localRng);
+        const x = i * (W / n) + (W / n - bookW) / 2;
+        const heightVar = 0.85 + localRng() * 0.15;
+        const bh = bookH * heightVar;
+        const by = shelfY - bh;
+        const bw = bookW * (0.7 + localRng() * 0.3);
+
+        ctx.fillStyle = p.color;
+        ctx.fillRect(x, by, bw, bh);
+
+        if (bw > 3) {
+          // 3D edge highlight (left)
+          ctx.fillStyle = isDark ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.35)';
+          ctx.fillRect(x, by, Math.max(1, bw * 0.08), bh);
+          // 3D shadow (right)
+          ctx.fillStyle = isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.15)';
+          ctx.fillRect(x + bw - Math.max(1, bw * 0.06), by, Math.max(1, bw * 0.06), bh);
+          // Top edge
+          ctx.fillStyle = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.2)';
+          ctx.fillRect(x, by, bw, Math.max(1, bh * 0.02));
+        }
+
+        if (bw > 16) {
+          ctx.save();
+          ctx.translate(x + bw / 2, by + bh / 2);
+          ctx.rotate(-Math.PI / 2);
+          ctx.fillStyle = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.6)';
+          ctx.font = `600 ${Math.min(bw * 0.5, 11)}px 'Inter', system-ui, sans-serif`;
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'middle';
+          ctx.fillText(p.label, 0, 0);
+          ctx.restore();
+        }
+      }
+    }
+
+    function drawShelfLevel(info) {
+      const nShelves = info.shelvesVisible;
+      const shelfH = H / (nShelves + 1);
+      const bookAreaH = shelfH * 0.78;
+      const woodH = shelfH * 0.08;
+      const gapH = shelfH - bookAreaH - woodH;
+
+      for (let s = 0; s < nShelves; s++) {
+        const y = s * shelfH + gapH / 2;
+        // Draw books as texture strip
+        const texIdx = s % shelfTextures.length;
+        if (shelfTextures[texIdx]) {
+          ctx.drawImage(shelfTextures[texIdx], 0, 0, shelfTextures[texIdx].width, shelfTextures[texIdx].height,
+                        0, y, W, bookAreaH);
+        }
+        // Shelf board
+        ctx.fillStyle = colors.shelfWood;
+        ctx.fillRect(0, y + bookAreaH, W, woodH);
+        ctx.fillStyle = colors.shelfEdge;
+        ctx.fillRect(0, y + bookAreaH, W, 1);
+      }
+    }
+
+    function drawWallLevel(info) {
+      const nWalls = info.wallsVisible;
+      const wallW = W / Math.min(nWalls, 6);
+      const wallH = H * 0.85;
+      const startY = (H - wallH) / 2;
+      const cols = Math.min(nWalls, 6);
+      const rows = Math.ceil(nWalls / cols);
+
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const idx = r * cols + c;
+          if (idx >= nWalls) break;
+          const wx = c * wallW + 2;
+          const wy = startY + r * (wallH / rows);
+          const ww = wallW - 4;
+          const wh = wallH / rows - 4;
+
+          // Wall background
+          ctx.fillStyle = colors.wallBg;
+          ctx.fillRect(wx, wy, ww, wh);
+
+          // Mini shelves as horizontal stripes (show ~12 visible, implying many more)
+          const nStripes = 12;
+          const stripeH = wh / nStripes;
+          for (let s = 0; s < nStripes; s++) {
+            const texIdx = (idx * nStripes + s) % shelfTextures.length;
+            if (shelfTextures[texIdx]) {
+              ctx.drawImage(shelfTextures[texIdx], 0, 0, shelfTextures[texIdx].width, shelfTextures[texIdx].height,
+                            wx, wy + s * stripeH, ww, stripeH * 0.85);
+            }
+            // Tiny shelf line
+            ctx.fillStyle = colors.shelfEdge;
+            ctx.fillRect(wx, wy + (s + 1) * stripeH - 1, ww, 1);
+          }
+
+          // Wall border
+          ctx.strokeStyle = colors.shelfEdge;
+          ctx.lineWidth = 1;
+          ctx.strokeRect(wx, wy, ww, wh);
+        }
+      }
+    }
+
+    function drawCorridorLevel(info) {
+      const nCorridors = info.corridorsVisible;
+      const cols = Math.min(nCorridors, 8);
+      const rows = Math.ceil(nCorridors / cols);
+      const cellW = W / cols;
+      const cellH = H / rows;
+
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const idx = r * cols + c;
+          if (idx >= nCorridors) break;
+          const cx_ = c * cellW;
+          const cy = r * cellH;
+
+          // Background
+          ctx.fillStyle = colors.wallBg;
+          ctx.fillRect(cx_, cy, cellW, cellH);
+
+          // Perspective tunnel: nested rectangles with shelf textures on sides
+          const depth = 5;
+          const inset = Math.min(cellW, cellH) * 0.15;
+          for (let d = depth; d >= 0; d--) {
+            const t = d / depth;
+            const dx = cx_ + inset * t;
+            const dy = cy + inset * t * 0.5;
+            const dw = cellW - inset * t * 2;
+            const dh = cellH - inset * t;
+
+            // Left wall strip with shelf texture
+            const wallW = dw * 0.1;
+            const texIdx = (idx * depth + d) % shelfTextures.length;
+            if (shelfTextures[texIdx]) {
+              ctx.globalAlpha = 0.25 + (1 - t) * 0.5;
+              ctx.drawImage(shelfTextures[texIdx], 0, 0, shelfTextures[texIdx].width, shelfTextures[texIdx].height,
+                            dx, dy, wallW, dh);
+              // Right wall
+              ctx.drawImage(shelfTextures[(texIdx + 7) % shelfTextures.length], 0, 0, shelfTextures[0].width, shelfTextures[0].height,
+                            dx + dw - wallW, dy, wallW, dh);
+            }
+            ctx.globalAlpha = 1;
+          }
+
+          // Corridor border
+          ctx.strokeStyle = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';
+          ctx.lineWidth = 1;
+          ctx.strokeRect(cx_, cy, cellW, cellH);
+        }
+      }
+    }
+
+    function drawLibraryLevel(info) {
+      // Grand cathedral: one-point perspective with vanishing point
+      const vpX = W / 2, vpY = H * 0.38;
+      const localRng = mulberry32(2026);
+
+      // Floor gradient
+      const floorGrad = ctx.createLinearGradient(0, H * 0.5, 0, H);
+      floorGrad.addColorStop(0, isDark ? '#1a1520' : '#e8e0d4');
+      floorGrad.addColorStop(1, isDark ? '#0d0a12' : '#d4cab8');
+      ctx.fillStyle = floorGrad;
+      ctx.fillRect(0, H * 0.5, W, H * 0.5);
+
+      // Ceiling
+      const ceilGrad = ctx.createLinearGradient(0, 0, 0, H * 0.38);
+      ceilGrad.addColorStop(0, isDark ? '#0d0a18' : '#f5f0e8');
+      ceilGrad.addColorStop(1, isDark ? '#151020' : '#ece4d8');
+      ctx.fillStyle = ceilGrad;
+      ctx.fillRect(0, 0, W, H * 0.38);
+
+      // Rows of shelving walls receding toward vanishing point
+      const nRows = 12;
+      for (let i = nRows; i >= 0; i--) {
+        const t = i / nRows; // 0 = closest, 1 = farthest
+        const perspective = 1 - t * 0.92;
+
+        const rowW = W * perspective;
+        const rowH = H * 0.7 * perspective;
+        const rowX = vpX - rowW / 2;
+        const rowY = vpY - rowH * 0.4 + (1 - perspective) * H * 0.1;
+
+        // Left wall
+        const wallW = rowW * 0.08;
+        ctx.fillStyle = isDark ? `rgba(30,20,40,${0.3 + t * 0.5})` : `rgba(180,160,130,${0.2 + t * 0.4})`;
+        ctx.fillRect(rowX, rowY, wallW, rowH);
+        // Book colors on wall
+        const stripes = 12;
+        const sH = rowH / stripes;
+        for (let s = 0; s < stripes; s++) {
+          const p = randomPrompt(localRng);
+          ctx.fillStyle = p.color;
+          ctx.globalAlpha = 0.15 + perspective * 0.35;
+          ctx.fillRect(rowX + 1, rowY + s * sH, wallW - 2, sH * 0.8);
+        }
+        ctx.globalAlpha = 1;
+
+        // Right wall (mirror)
+        const rwX = rowX + rowW - wallW;
+        ctx.fillStyle = isDark ? `rgba(30,20,40,${0.3 + t * 0.5})` : `rgba(180,160,130,${0.2 + t * 0.4})`;
+        ctx.fillRect(rwX, rowY, wallW, rowH);
+        for (let s = 0; s < stripes; s++) {
+          const p = randomPrompt(localRng);
+          ctx.fillStyle = p.color;
+          ctx.globalAlpha = 0.15 + perspective * 0.35;
+          ctx.fillRect(rwX + 1, rowY + s * sH, wallW - 2, sH * 0.8);
+        }
+        ctx.globalAlpha = 1;
+
+        // Floor tile line
+        ctx.strokeStyle = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)';
+        ctx.lineWidth = 1;
+        const floorY = rowY + rowH;
+        ctx.beginPath();
+        ctx.moveTo(rowX, floorY);
+        ctx.lineTo(rowX + rowW, floorY);
+        ctx.stroke();
+      }
+
+      // Vanishing point glow
+      const vpGrad = ctx.createRadialGradient(vpX, vpY, 0, vpX, vpY, H * 0.3);
+      vpGrad.addColorStop(0, isDark ? 'rgba(180,160,220,0.25)' : 'rgba(255,240,200,0.4)');
+      vpGrad.addColorStop(1, 'transparent');
+      ctx.fillStyle = vpGrad;
+      ctx.beginPath();
+      ctx.arc(vpX, vpY, H * 0.3, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    const drawFns = { book: drawBookLevel, shelf: drawShelfLevel, wall: drawWallLevel, corridor: drawCorridorLevel, library: drawLibraryLevel };
+
+    // --- Scale indicator & annotations ---
+    function drawScaleIndicator(z) {
+      const info = getScaleInfo(z);
+      let line1 = '', line2 = '';
+      if (info.level === 'book') {
+        line1 = `~${info.booksVisible} books in view`;
+        line2 = `1 book = ${(TOKENS_PER_BOOK).toLocaleString()} tokens`;
+      } else if (info.level === 'shelf') {
+        line1 = `~${info.shelvesVisible} shelves`;
+        line2 = `1 shelf = ${BOOKS_PER_SHELF} books = ${(BOOKS_PER_SHELF * TOKENS_PER_BOOK / 1e6).toFixed(1)}M tokens`;
+      } else if (info.level === 'wall') {
+        line1 = `~${info.wallsVisible} walls`;
+        line2 = `1 wall = ${SHELVES_PER_WALL} shelves = ${(SHELVES_PER_WALL * BOOKS_PER_SHELF * TOKENS_PER_BOOK / 1e9).toFixed(2)}B tokens`;
+      } else if (info.level === 'corridor') {
+        line1 = `~${info.corridorsVisible} corridors`;
+        line2 = `1 corridor = ${WALLS_PER_CORRIDOR} walls = ${(WALLS_PER_CORRIDOR * SHELVES_PER_WALL * BOOKS_PER_SHELF * TOKENS_PER_BOOK / 1e9).toFixed(0)}B tokens`;
+      } else {
+        line1 = 'The Full Library';
+        line2 = `${TOTAL_BOOKS.toLocaleString()} books \u00B7 ${(TOTAL_TOKENS / 1e12).toFixed(2)}T tokens \u00B7 16 prompt formats`;
+      }
+
+      const fs1 = Math.max(10, Math.min(14, W * 0.014));
+      const fs2 = Math.max(9, Math.min(12, W * 0.012));
+      const pad = 10;
+
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'top';
+
+      // Background pill
+      ctx.font = `600 ${fs1}px 'Inter', system-ui, sans-serif`;
+      const w1 = ctx.measureText(line1).width;
+      ctx.font = `400 ${fs2}px 'Inter', system-ui, sans-serif`;
+      const w2 = ctx.measureText(line2).width;
+      const boxW = Math.max(w1, w2) + pad * 2;
+      const boxH = fs1 + fs2 + 8 + pad * 2;
+
+      ctx.fillStyle = isDark ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.7)';
+      ctx.beginPath();
+      const bx = 8, by = 8, br = 6;
+      ctx.moveTo(bx + br, by);
+      ctx.lineTo(bx + boxW - br, by);
+      ctx.quadraticCurveTo(bx + boxW, by, bx + boxW, by + br);
+      ctx.lineTo(bx + boxW, by + boxH - br);
+      ctx.quadraticCurveTo(bx + boxW, by + boxH, bx + boxW - br, by + boxH);
+      ctx.lineTo(bx + br, by + boxH);
+      ctx.quadraticCurveTo(bx, by + boxH, bx, by + boxH - br);
+      ctx.lineTo(bx, by + br);
+      ctx.quadraticCurveTo(bx, by, bx + br, by);
+      ctx.fill();
+
+      ctx.font = `600 ${fs1}px 'Inter', system-ui, sans-serif`;
+      ctx.fillStyle = colors.text;
+      ctx.fillText(line1, bx + pad, by + pad);
+
+      ctx.font = `400 ${fs2}px 'Inter', system-ui, sans-serif`;
+      ctx.fillStyle = colors.textMuted;
+      ctx.fillText(line2, bx + pad, by + pad + fs1 + 6);
+    }
+
+    function drawFullZoomAnnotation(z) {
+      if (z < 0.8) return;
+      const alpha = Math.min(1, (z - 0.8) / 0.2);
+      ctx.globalAlpha = alpha;
+
+      const bigFS = Math.min(W * 0.06, H * 0.14, 56);
+      const subFS = Math.max(10, bigFS * 0.28);
+
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+
+      // Main number
+      ctx.font = `900 ${bigFS}px 'Inter', system-ui, sans-serif`;
+      ctx.fillStyle = colors.text;
+      ctx.fillText('1,056,095,620,280 tokens', W / 2, H * 0.5);
+
+      // Subtitle
+      ctx.font = `500 ${subFS}px 'Inter', system-ui, sans-serif`;
+      ctx.fillStyle = colors.textMuted;
+      ctx.fillText(`${TOTAL_BOOKS.toLocaleString()} books across 16 prompt formats`, W / 2, H * 0.5 + bigFS * 0.75);
+
+      ctx.globalAlpha = 1;
+    }
+
+    // Scroll hint at bottom
+    function drawScrollHint(z) {
+      if (z > 0.05 || !autoPlaying) return;
+      const alpha = 1 - z / 0.05;
+      ctx.globalAlpha = alpha * 0.4;
+      const fs = Math.max(10, Math.min(12, W * 0.012));
+      ctx.font = `400 ${fs}px 'Inter', system-ui, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'bottom';
+      ctx.fillStyle = colors.text;
+      ctx.fillText('scroll to zoom out', W / 2, H - 8);
+      ctx.globalAlpha = 1;
+    }
+
+    // Offscreen canvas for crossfade compositing
+    const offCanvas = document.createElement('canvas');
+    const offCtx = offCanvas.getContext('2d');
+
+    // --- Main render ---
+    function resize() {
+      dpr = window.devicePixelRatio || 1;
+      W = container.clientWidth || 800;
+      H = container.clientHeight || 320;
+      canvas.width = W * dpr;
+      canvas.height = H * dpr;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      offCanvas.width = canvas.width;
+      offCanvas.height = canvas.height;
+    }
+
+    function render(timestamp) {
+      if (!promptDistribution) { requestAnimationFrame(render); return; }
+
+      // Auto-play animation (supports resuming from arbitrary zoom via autoResumeZoom)
+      if (autoPlaying) {
+        if (!autoStartTime) autoStartTime = timestamp;
+        const elapsed = timestamp - autoStartTime;
+        const remaining = 1.0 - autoResumeZoom;
+        const duration = AUTO_DURATION * remaining;
+        let t = duration > 0 ? Math.min(1, elapsed / duration) : 1;
+        t = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+        zoom = autoResumeZoom + t * remaining;
+        if (elapsed >= duration) {
+          autoPlaying = false;
+          zoom = 1.0;
+        }
+      } else {
+        // Smooth interpolation toward target
+        const diff = targetZoom - zoom;
+        if (Math.abs(diff) > 0.0005) {
+          zoom += diff * 0.02;
+        } else {
+          zoom = targetZoom;
+        }
+      }
+      zoom = Math.max(0, Math.min(1, zoom));
+
+      // Clear
+      ctx.fillStyle = colors.bg;
+      ctx.fillRect(0, 0, W, H);
+
+      // Draw all active levels with crossfade blending
+      const info = getScaleInfo(zoom);
+      for (const b of LEVEL_BOUNDS) {
+        const alpha = getLevelAlpha(zoom, b);
+        if (alpha <= 0) continue;
+        if (alpha >= 0.999) {
+          drawFns[b.name](getLevelInfoForBound(b, zoom));
+        } else {
+          // Render to offscreen buffer, then composite with crossfade alpha
+          offCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          offCtx.clearRect(0, 0, W, H);
+          const savedCtx = ctx;
+          ctx = offCtx;
+          drawFns[b.name](getLevelInfoForBound(b, zoom));
+          ctx = savedCtx;
+          ctx.globalAlpha = alpha;
+          ctx.drawImage(offCanvas, 0, 0);
+          ctx.globalAlpha = 1;
+        }
+      }
+
+      // Vignette overlay
+      const vigGrad = ctx.createRadialGradient(W/2, H/2, Math.min(W,H)*0.3, W/2, H/2, Math.max(W,H)*0.7);
+      vigGrad.addColorStop(0, 'transparent');
+      vigGrad.addColorStop(1, colors.vignette);
+      ctx.fillStyle = vigGrad;
+      ctx.fillRect(0, 0, W, H);
+
+      drawScaleIndicator(zoom);
+      drawFullZoomAnnotation(zoom);
+      drawScrollHint(zoom);
+
+      requestAnimationFrame(render);
+    }
+
+    // --- Interaction ---
+    function pauseAutoPlay() {
+      if (autoPlaying) {
+        autoPlaying = false;
+        targetZoom = zoom;
+      }
+      clearTimeout(scrollResumeTimer);
+      scrollResumeTimer = setTimeout(() => {
+        if (!autoPlaying && zoom < 0.99) {
+          autoPlaying = true;
+          autoStartTime = 0;
+          autoResumeZoom = zoom;
+        }
+      }, 10);
+    }
+
+    container.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      pauseAutoPlay();
+      const raw = e.deltaMode === 1 ? e.deltaY * 20 : e.deltaY;
+      const delta = raw * 0.0002;
+      targetZoom = Math.max(0, Math.min(1, targetZoom + delta));
+    }, { passive: false });
+
+    // Touch pinch zoom
+    let lastTouchDist = 0;
+    container.addEventListener('touchstart', (e) => {
+      if (e.touches.length === 2) {
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        lastTouchDist = Math.sqrt(dx * dx + dy * dy);
+        pauseAutoPlay();
+      }
+    }, { passive: true });
+    container.addEventListener('touchmove', (e) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const delta = (lastTouchDist - dist) * 0.003;
+        targetZoom = Math.max(0, Math.min(1, targetZoom + delta));
+        lastTouchDist = dist;
+      }
+    }, { passive: false });
+
+    // Click to restart auto-play from the beginning
+    container.addEventListener('click', () => {
+      clearTimeout(scrollResumeTimer);
+      autoPlaying = true;
+      autoStartTime = 0;
+      autoResumeZoom = 0;
+      zoom = 0;
+      targetZoom = 1;
+    });
+
+    // Cursor style
+    container.addEventListener('mousedown', () => { container.style.cursor = 'grabbing'; });
+    container.addEventListener('mouseup', () => { container.style.cursor = 'grab'; });
+
+    // Hover tooltip for book level
+    container.addEventListener('mousemove', (e) => {
+      if (!promptDistribution) return;
+      const info = getScaleInfo(zoom);
+      if (info.level !== 'book') {
+        tip.style.opacity = '0';
+        return;
+      }
+      const rect = container.getBoundingClientRect();
+      const mx = e.clientX - rect.left;
+      const n = info.booksVisible;
+      const bookIdx = Math.floor(mx / (W / n));
+      const localRng = mulberry32(7);
+      let p = null;
+      for (let i = 0; i <= bookIdx && i < n; i++) {
+        p = randomPrompt(localRng);
+        localRng(); localRng(); // consume height + width variance to stay in sync with drawBookLevel
+      }
+      if (p) {
+        tip.innerHTML = `<strong>${p.label}</strong><br><span style="opacity:0.5">${(p.tokens / 1e9).toFixed(1)}B tokens total (${(p.fraction * 100).toFixed(1)}%)</span>`;
+        tip.style.opacity = '1';
+        let tx = e.clientX - rect.left + 14;
+        let ty = e.clientY - rect.top - 40;
+        if (tx + 180 > W) tx = e.clientX - rect.left - 190;
+        if (ty < 4) ty = 4;
+        tip.style.left = tx + 'px';
+        tip.style.top = ty + 'px';
+      }
+    });
+    container.addEventListener('mouseleave', () => { tip.style.opacity = '0'; });
+
+    // --- Init ---
+    resize();
+    if (window.ResizeObserver) new ResizeObserver(resize).observe(container);
+    else window.addEventListener('resize', resize);
+
+    fetchFirst(JSON_PATHS).then(raw => {
+      promptDistribution = buildDistribution(raw);
+      buildCdf();
+      rebuildShelfTextures();
+      requestAnimationFrame(render);
+    }).catch(err => {
+      container.innerHTML = `<pre style="color:red;padding:12px">${err.message}</pre>`;
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  } else { bootstrap(); }
+})();
+</script>