make verbosity analysis take data from rephrasing_metadata.json instead

app/src/content/chapters/analyses.mdx

@@ -75,5 +75,6 @@ Different prompt formats produce wildly different output lengths. <FigRef target
 <HtmlEmbed
   id="verbosity"
   src="verbosity.html"
+  data="rephrasing_metadata.json"
   desc="Output tokens per document across prompt types and model families. Hover over dots to see detailed statistics for each experiment."
 />

app/src/content/embeds/verbosity.html

@@ -1,4 +1,4 @@
-<div class="d3-synth-banner" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
+<div class="d3-verbosity" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
 <script>
     (() => {
         const ensureD3 = (cb) => {
@@ -16,487 +16,470 @@
         };
 
         const bootstrap = () => {
-            const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-            const container = (mount && mount.querySelector && mount.querySelector('.d3-synth-banner')) ||
-                Array.from(document.querySelectorAll('.d3-synth-banner')).find(el => el.dataset.mounted !== 'true');
-            if (!container) return;
-            if (container.dataset) {
-                if (container.dataset.mounted === 'true') return;
-                container.dataset.mounted = 'true';
+            const scriptEl = document.currentScript;
+            let container = scriptEl ? scriptEl.previousElementSibling : null;
+            if (!(container && container.classList && container.classList.contains('d3-verbosity'))) {
+                const cs = Array.from(document.querySelectorAll('.d3-verbosity'))
+                    .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+                container = cs[cs.length - 1] || null;
             }
-
-            // ═══════════════════════════════════════════════════════════════
-            // DATA — 65 rephrasing experiments
-            // [cat, prompt, model, source, compTokensB, promptTokensB,
-            //  numDocsM, dclmDiff, outDclm, inDclm, eduDiff, outEdu, inEdu]
-            // ═══════════════════════════════════════════════════════════════
-            const raw = [
-                ['Format','Article','Gemma-3 1B','FW-Edu HQ',4.00,5.66,19.7,-0.018,0.080,0.098,-0.432,1.484,1.679],
-                ['Format','Commentary','Qwen3 1.7B','FW-Edu HQ',1.64,5.94,20.1,0.630,0.847,0.217,-0.229,3.533,3.762],
-                ['Format','Commentary','Gemma-3 1B','DCLM',1.46,5.52,29.5,0.202,0.344,0.142,0.359,1.943,1.584],
-                ['Format','Commentary','Gemma-3 1B','FW-Edu HQ',0.64,2.42,20.1,0.055,0.109,0.054,-0.517,0.793,0.921],
-                ['Format','Discussion','Qwen3 1.7B','FW-Edu HQ',2.90,7.20,20.1,0.715,0.932,0.217,-0.122,3.640,3.762],
-                ['Format','Discussion','Gemma-3 1B','FW-Edu HQ',3.96,6.25,20.1,0.036,0.161,0.125,-0.574,1.862,2.197],
-                ['Format','FAQ','Gemma-3 12B','FW-Edu HQ',3.22,4.06,20.1,0.712,0.930,0.217,-0.295,3.467,3.762],
-                ['Format','FAQ','Gemma-3 12B','FW-Edu LQ',1.91,1.90,32.9,0.799,0.828,0.029,0.357,1.263,0.906],
-                ['Format','FAQ','Gemma-3 1B','Cosmopedia',1.33,1.31,31.1,0.329,0.906,0.578,-0.264,2.226,2.490],
-                ['Format','FAQ','Gemma-3 1B','DCLM',1.52,2.08,29.5,0.709,0.851,0.142,0.346,1.930,1.585],
-                ['Format','FAQ','Gemma-3 1B','FW-Edu HQ',17.67,22.21,20.1,0.711,0.929,0.218,-0.346,3.416,3.762],
-                ['Format','FAQ','Gemma-3 1B','FW-Edu LQ',1.84,1.75,32.9,0.690,0.719,0.029,0.369,1.275,0.905],
-                ['Format','FAQ','Falcon3 1B','FW-Edu HQ',3.41,4.84,20.1,0.691,0.909,0.217,-0.249,3.512,3.762],
-                ['Format','FAQ','Granite3 1B','FW-Edu HQ',2.55,4.17,20.1,0.680,0.898,0.218,-0.166,3.596,3.762],
-                ['Format','FAQ','Llama-3.2 1B','FW-Edu HQ',6.29,11.62,20.1,0.735,0.952,0.217,-0.375,3.387,3.762],
-                ['Format','FAQ','Qwen3 1.7B','FW-Edu HQ',2.88,4.77,20.1,0.632,0.850,0.218,-0.219,3.543,3.762],
-                ['Format','FAQ','SmolLM2 1.7B','FW-Edu HQ',0.89,2.00,20.1,0.648,0.867,0.219,-0.406,3.355,3.762],
-                ['Format','Math','Gemma-3 12B','FW-Edu HQ',2.51,5.93,20.1,0.755,0.972,0.217,-0.370,3.392,3.762],
-                ['Format','Math','Gemma-3 1B','FW-Edu HQ',2.46,5.08,20.1,0.620,0.838,0.218,-0.174,3.587,3.762],
-                ['Format','Math','Gemma-3 270M','FW-Edu HQ',1.21,1.33,20.1,0.600,0.818,0.218,-0.406,3.357,3.762],
-                ['Format','Math','Gemma-3 27B','FW-Edu HQ',1.05,2.62,20.1,0.754,0.971,0.217,-0.429,3.333,3.762],
-                ['Format','Math','Gemma-3 4B','FW-Edu HQ',0.68,1.75,20.1,0.743,0.960,0.217,-0.335,3.427,3.762],
-                ['Format','Math','Falcon3 1B','FW-Edu HQ',1.42,2.17,20.1,0.704,0.921,0.217,-0.156,3.606,3.762],
-                ['Format','Math','Granite3 1B','FW-Edu HQ',1.57,3.35,20.1,0.698,0.916,0.218,-0.324,3.438,3.762],
-                ['Format','Math','Llama-3.2 1B','FW-Edu HQ',0.86,2.17,20.1,0.737,0.955,0.218,-0.384,3.378,3.762],
-                ['Format','Math','Qwen3 1.7B','FW-Edu HQ',0.56,2.00,20.1,0.742,0.959,0.218,-0.310,3.452,3.762],
-                ['Format','Math','SmolLM2 1.7B','FW-Edu HQ',0.64,2.28,20.1,0.657,0.875,0.218,-0.669,3.093,3.762],
-                ['Format','Table','Gemma-3 12B','FW-Edu HQ',0.76,2.49,20.1,0.719,0.937,0.217,-0.774,2.988,3.762],
-                ['Format','Table','Gemma-3 1B','FW-Edu HQ',1.68,5.62,20.1,0.715,0.932,0.217,-0.776,2.985,3.762],
-                ['Format','Table','Falcon3 1B','FW-Edu HQ',0.65,2.00,20.1,0.722,0.940,0.218,-0.748,3.015,3.763],
-                ['Format','Table','Granite3 1B','FW-Edu HQ',1.44,3.90,20.1,0.726,0.944,0.218,-0.597,3.165,3.762],
-                ['Format','Table','Llama-3.2 1B','FW-Edu HQ',0.88,2.73,20.1,0.772,0.989,0.217,-0.815,2.947,3.762],
-                ['Format','Table','Qwen3 1.7B','FW-Edu HQ',0.80,2.69,20.1,0.751,0.969,0.218,-0.638,3.123,3.762],
-                ['Format','Table','SmolLM2 1.7B','FW-Edu HQ',0.41,1.52,20.1,0.668,0.885,0.218,-0.943,2.818,3.762],
-                ['Format','Tutorial','Gemma-3 12B','FW-Edu HQ',5.33,6.57,20.1,0.398,0.553,0.155,-0.077,2.612,2.667],
-                ['Format','Tutorial','Gemma-3 12B','FW-Edu LQ',2.35,2.57,32.9,0.189,0.210,0.020,0.379,0.869,0.613],
-                ['Format','Tutorial','Gemma-3 1B','Cosmopedia',1.02,1.47,31.1,-0.049,0.529,0.578,-0.080,2.415,2.495],
-                ['Format','Tutorial','Gemma-3 1B','DCLM',1.67,3.30,29.5,0.371,0.514,0.142,0.528,2.113,1.585],
-                ['Format','Tutorial','Gemma-3 1B','FW-Edu HQ',1.51,2.70,19.4,0.074,0.112,0.038,-0.077,0.632,0.646],
-                ['Format','Tutorial','Gemma-3 1B','FW-Edu LQ',1.90,2.51,32.9,0.172,0.193,0.021,0.413,0.917,0.630],
-                ['Format','Tutorial','Gemma-3 270M','FW-Edu HQ',1.64,1.71,20.1,0.514,0.731,0.217,-0.337,3.425,3.762],
-                ['Format','Tutorial','Gemma-3 27B','FW-Edu HQ',2.55,3.29,20.1,0.485,0.702,0.218,-0.057,3.705,3.762],
-                ['Format','Tutorial','Gemma-3 4B','FW-Edu HQ',1.50,2.02,20.1,0.404,0.621,0.217,-0.049,3.713,3.762],
-                ['Format','Tutorial','Falcon3 1B','FW-Edu HQ',4.97,7.58,20.1,0.447,0.665,0.218,-0.145,3.617,3.762],
-                ['Format','Tutorial','Granite3 1B','FW-Edu HQ',3.51,6.42,20.1,0.449,0.666,0.218,-0.072,3.690,3.762],
-                ['Format','Tutorial','Llama-3.2 1B','FW-Edu HQ',2.36,4.88,20.1,0.557,0.774,0.217,-0.031,3.731,3.762],
-                ['Format','Tutorial','Qwen1.5 1.8B','FW-Edu HQ',2.22,2.40,20.1,0.647,0.864,0.218,0.072,3.834,3.762],
-                ['Format','Tutorial','Qwen2 1.5B','FW-Edu HQ',3.09,8.00,20.1,0.527,0.746,0.218,-0.010,3.751,3.762],
-                ['Format','Tutorial','Qwen2.5 1.5B','FW-Edu HQ',2.27,4.87,20.1,0.576,0.794,0.218,-0.083,3.678,3.762],
-                ['Format','Tutorial','Qwen3 1.7B','FW-Edu HQ',3.56,5.69,20.1,0.281,0.497,0.217,0.056,3.818,3.762],
-                ['Format','Tutorial','SmolLM2 1.7B','FW-Edu HQ',1.52,3.38,20.1,0.439,0.658,0.219,-0.244,3.518,3.762],
-                ['Nemotron','Distill','Gemma-3 1B','FW-Edu HQ',2.12,5.37,20.1,0.331,0.549,0.217,-0.132,3.629,3.762],
-                ['Nemotron','Diverse QA','Gemma-3 1B','FW-Edu HQ',1.97,7.01,20.1,0.779,0.996,0.217,-0.208,3.554,3.762],
-                ['Nemotron','Extract Knowledge','Gemma-3 1B','FW-Edu HQ',2.41,6.59,20.1,0.254,0.472,0.218,0.025,3.787,3.762],
-                ['Nemotron','Knowledge List','Gemma-3 1B','FW-Edu HQ',2.90,9.15,20.1,0.589,0.806,0.217,-0.193,3.569,3.762],
-                ['Nemotron','Wikipedia Style','Gemma-3 1B','FW-Edu HQ',3.43,8.37,20.1,0.297,0.515,0.217,-0.193,3.568,3.762],
-                ['REWIRE','Guided Rewrite+','Gemma-3 12B','FW-Edu HQ',1.45,2.14,20.1,0.222,0.439,0.217,-0.102,3.660,3.762],
-                ['REWIRE','Guided Rewrite+','Gemma-3 1B','FW-Edu HQ',1.63,3.42,20.1,0.097,0.315,0.217,-0.428,3.334,3.762],
-                ['REWIRE','Guided Rewrite','Gemma-3 12B','FW-Edu HQ',1.78,1.72,20.1,0.607,0.824,0.217,-1.214,2.547,3.762],
-                ['REWIRE','Guided Rewrite','Gemma-3 1B','FW-Edu HQ',8.69,10.30,20.1,0.278,0.495,0.217,-1.012,2.750,3.762],
-                ['REWIRE','Guided Rewrite','Gemma-3 270M','FW-Edu HQ',0.78,1.71,20.1,0.755,0.972,0.217,-2.407,1.355,3.762],
-                ['REWIRE','Guided Rewrite','Gemma-3 4B','FW-Edu HQ',0.91,1.10,20.1,0.436,0.654,0.218,-0.919,2.843,3.762],
-                ['REWIRE','Guided Rewrite','Gemma-3 27B','FW-Edu HQ',8.43,8.64,19.95,0.546,0.763,0.217,-1.228,2.533,3.762],
-                ['Format','Tutorial','SmolLM2 135M','FW-Edu HQ',4.51,6.99,20.1,0.423,0.641,0.218,-0.572,3.190,3.762],
-                ['Format','Tutorial','SmolLM2 360M','FW-Edu HQ',3.14,6.52,20.1,0.441,0.659,0.218,-0.565,3.197,3.762]
-            ];
-
-            const experiments = raw.map((r, i) => ({
-                idx: i, cat: r[0], prompt: r[1], model: r[2], source: r[3],
-                compTokens: r[4], promptTokens: r[5], numDocs: r[6],
-                dclmDiff: r[7], outDclm: r[8], inDclm: r[9],
-                eduDiff: r[10], outEdu: r[11], inEdu: r[12],
-                compPerDoc: r[4] * 1000 / r[6],
-                phase: Math.random() * Math.PI * 2
-            }));
-
-            // ════════════════════════════════════════════════════���══════
-            // MODEL FAMILIES
-            // ═══════════════════════════════════════════════════════════
-            const getFamily = (m) => {
-                if (m.includes('SmolLM')) return 'SmolLM2';
-                if (m.includes('Gemma'))  return 'Gemma';
-                if (m.includes('Qwen'))   return 'Qwen';
-                if (m.includes('Falcon')) return 'Falcon';
-                if (m.includes('Granite')) return 'Granite';
-                if (m.includes('Llama'))  return 'Llama';
-                return 'Other';
-            };
-            const familyColors = {
-                'Gemma':   '#4EA5B7',
-                'Qwen':    '#8B7BE8',
-                'SmolLM2': '#E8C44A',
-                'Falcon':  '#E889AB',
-                'Granite': '#5BC0A4',
-                'Llama':   '#D09090',
+            if (!container) return;
+            if (container.dataset.mounted === 'true') return;
+            container.dataset.mounted = 'true';
+
+            // Read data path from HtmlEmbed attribute
+            let mountEl = container;
+            while (mountEl && !mountEl.getAttribute?.('data-datafiles')) mountEl = mountEl.parentElement;
+            const dataAttr = mountEl?.getAttribute?.('data-datafiles');
+            const dataPaths = dataAttr
+                ? [dataAttr.includes('/') ? dataAttr : `/data/${dataAttr}`]
+                : ['/data/rephrasing_metadata.json', './assets/data/rephrasing_metadata.json'];
+
+            const fetchFirst = async (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');
             };
-            const familyOrder = ['Gemma','Qwen','SmolLM2','Falcon','Granite','Llama'];
-            experiments.forEach(d => { d.family = getFamily(d.model); });
-
-            // ═══════════════════════════════════════════════════════════
-            // FILTER: Only prompts tested across 6 model families
-            // (keep multi-source Gemma variants for Tutorial/FAQ)
-            // ═══════════════════════════════════════════════════════════
-            const focusPrompts = ['Math', 'Table', 'FAQ', 'Tutorial'];
-            const filtered = experiments.filter(d => focusPrompts.includes(d.prompt));
-
-            // Sort rows by median compPerDoc (most verbose on top)
-            const promptStats = {};
-            focusPrompts.forEach(p => {
-                const vals = filtered.filter(d => d.prompt === p).map(d => d.compPerDoc).sort((a,b) => a - b);
-                const mid = Math.floor(vals.length / 2);
-                promptStats[p] = {
-                    median: vals.length % 2 ? vals[mid] : (vals[mid-1] + vals[mid]) / 2,
-                    count: vals.length
-                };
-            });
-            const sortedPrompts = [...focusPrompts].sort((a, b) => promptStats[b].median - promptStats[a].median);
-
-            // ═══════════════════════════════════════════════════════════
-            // TOOLTIP
-            // ═══════════════════════════════════════════════════════════
-            const fmtB = (v) => v >= 10 ? v.toFixed(0) + 'B' : v.toFixed(1) + 'B';
-            const fmtSign = (v, p) => (v >= 0 ? '+' : '') + v.toFixed(p || 3);
-            const dCol = (v) => v >= 0 ? '#5BC0A4' : '#E889AB';
-            const buildTip = (d) =>
-                `<div style="font-weight:800;font-size:13px;">${d.prompt}</div>` +
-                `<div style="font-size:11px;color:var(--muted-color);margin-top:-2px;margin-bottom:4px;">` +
-                `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${familyColors[d.family]};margin-right:4px;vertical-align:middle;"></span>` +
-                `${d.model} \u00b7 ${d.source}</div>` +
-                `<div style="padding-top:5px;border-top:1px solid var(--border-color);display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:11.5px;">` +
-                `<span style="color:var(--muted-color);">Total output</span><span>${fmtB(d.compTokens)}</span>` +
-                `<span style="color:var(--muted-color);">Output/doc</span><span>${Math.round(d.compPerDoc)} tokens</span>` +
-                `<span style="color:var(--muted-color);">Docs</span><span>${d.numDocs.toFixed(1)}M</span>` +
-                `</div>` +
-                `<div style="margin-top:5px;padding-top:5px;border-top:1px solid var(--border-color);display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:11.5px;">` +
-                `<span style="color:var(--muted-color);">DCLM</span>` +
-                `<span>${d.inDclm.toFixed(3)} \u2192 ${d.outDclm.toFixed(3)} <b style="color:${dCol(d.dclmDiff)};">${fmtSign(d.dclmDiff)}</b></span>` +
-                `<span style="color:var(--muted-color);">Edu</span>` +
-                `<span>${d.inEdu.toFixed(2)} \u2192 ${d.outEdu.toFixed(2)} <b style="color:${dCol(d.eduDiff)};">${fmtSign(d.eduDiff, 2)}</b></span>` +
-                `</div>`;
-
-            // ═══════════════════════════════════════════════════════════
-            // SVG
-            // ═══════════════════════════════════════════════════════════
-            const svg = d3.select(container).append('svg')
-                .attr('width', '100%')
-                .style('display', 'block')
-                .style('cursor', 'crosshair');
-
-            let animFrame = null;
-
-            const render = () => {
-                const width = container.clientWidth || 800;
-                const height = Math.max(260, Math.round(width / 3));
-                svg.attr('width', width).attr('height', height);
-
-                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-                const textColor = isDark ? 'rgba(255,255,255,0.72)' : 'rgba(0,0,0,0.62)';
-                const mutedText = isDark ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.18)';
-                const subtleText = isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)';
-                const refLine = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.07)';
-                const bandEven = isDark ? 'rgba(255,255,255,0.022)' : 'rgba(0,0,0,0.018)';
-                const glowColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
-                const smolHighlight = isDark ? 'rgba(232,196,74,0.18)' : 'rgba(232,196,74,0.12)';
-
-                const fontSize = Math.max(8, Math.min(12, width / 80));
-
-                // ─── LAYOUT ───
-                const labelW = Math.max(68, width * 0.085);
-                const pl = labelW + 12;
-                const pr = width * 0.965;
-                const pt = height * 0.20;
-                const pb = height * 0.86;
-                const plotH = pb - pt;
-                const rowH = plotH / sortedPrompts.length;
-
-                const rowCenter = {};
-                sortedPrompts.forEach((p, i) => { rowCenter[p] = pt + (i + 0.5) * rowH; });
-
-                // ─── X SCALE: completion tokens per document (log) ───
-                const xScale = d3.scaleLog().base(10)
-                    .domain([15, 1000])
-                    .range([pl, pr]);
-
-                const rBase = Math.max(3.5, Math.min(8, width * 0.007));
-
-                // ─── FORCE SIMULATION ───
-                filtered.forEach(d => {
-                    d.tx = xScale(Math.max(15, d.compPerDoc));
-                    d.ty = rowCenter[d.prompt];
-                    d.x = d.tx + (Math.random() - 0.5) * 6;
-                    d.y = d.ty + (Math.random() - 0.5) * rowH * 0.3;
-                });
 
-                const sim = d3.forceSimulation(filtered)
-                    .force('x', d3.forceX(d => d.tx).strength(0.72))
-                    .force('y', d3.forceY(d => d.ty).strength(0.55))
-                    .force('collide', d3.forceCollide(rBase + 1.5).iterations(5))
-                    .stop();
-                for (let i = 0; i < 250; i++) sim.tick();
-
-                filtered.forEach(d => {
-                    d.x = Math.max(pl + rBase, Math.min(pr - rBase, d.x));
-                    const yMin = rowCenter[d.prompt] - rowH * 0.46;
-                    const yMax = rowCenter[d.prompt] + rowH * 0.46;
-                    d.y = Math.max(yMin, Math.min(yMax, d.y));
-                });
+            fetchFirst(dataPaths).then(data => buildChart(data)).catch(err => {
+                container.innerHTML = `<pre style="color:red;padding:12px;">Error loading data: ${err.message}</pre>`;
+            });
 
-                // ─── BG STARS ───
-                const bgCol = (() => {
-                    const i01 = d3.interpolateRgb(d3.rgb(78,165,183), d3.rgb(206,192,250));
-                    const i12 = d3.interpolateRgb(d3.rgb(206,192,250), d3.rgb(232,137,171));
-                    return (v) => { const t = Math.max(0, Math.min(1, v)); return t <= 0.5 ? i01(t / 0.5) : i12((t - 0.5) / 0.5); };
-                })();
-                const gBg = svg.selectAll('g.bg').data([0]).join('g').attr('class', 'bg');
-                if (!gBg.selectAll('circle').size()) {
-                    const stars = d3.range(50).map(() => ({
-                        x: Math.random() * width, y: Math.random() * height,
-                        z: Math.random(), r: 0.3 + Math.random() * 0.6
-                    }));
-                    gBg.selectAll('circle').data(stars).join('circle')
-                        .attr('cx', d => d.x).attr('cy', d => d.y).attr('r', d => d.r)
-                        .attr('fill', d => bgCol(d.z)).attr('fill-opacity', d => 0.03 + d.z * 0.04);
-                }
+            function buildChart(rawData) {
+                // ═══════════════════════════════════════════════════════════
+                // PARSE JSON into chart-ready objects
+                // ═══════════════════════════════════════════════════════════
+                const SOURCE_MAP = {
+                    'fineweb-edu-hq-20BT': 'FW-Edu HQ',
+                    'fineweb-edu-lq-20BT': 'FW-Edu LQ',
+                    'dclm-37BT': 'DCLM',
+                    'cosmopedia-25BT': 'Cosmopedia'
+                };
+                const PROMPT_LABELS = {
+                    'article': 'Article', 'commentary': 'Commentary', 'discussion': 'Discussion',
+                    'faq': 'FAQ', 'math': 'Math', '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_improved': 'Guided Rewrite+',
+                    'guided_rewrite_original': 'Guided Rewrite'
+                };
+                const CAT_MAP = { 'format': 'Format', 'nemotron': 'Nemotron', 'rewire': 'REWIRE' };
+
+                const getFamily = (m) => {
+                    const ml = m.toLowerCase();
+                    if (ml.includes('smollm')) return 'SmolLM2';
+                    if (ml.includes('gemma'))  return 'Gemma';
+                    if (ml.includes('qwen'))   return 'Qwen';
+                    if (ml.includes('falcon')) return 'Falcon';
+                    if (ml.includes('granite')) return 'Granite';
+                    if (ml.includes('llama'))  return 'Llama';
+                    return 'Other';
+                };
 
-                // ─── ROW BANDS & LABELS ───
-                const gRows = svg.selectAll('g.rows').data([0]).join('g').attr('class', 'rows');
-                gRows.selectAll('*').remove();
+                const experiments = rawData.map((d, i) => {
+                    const [cat, promptFile] = d.prompt.split('/');
+                    const promptKey = promptFile.replace('.md', '');
+                    return {
+                        idx: i,
+                        cat: CAT_MAP[cat] || cat,
+                        prompt: PROMPT_LABELS[promptKey] || promptKey,
+                        model: d.model.split('/').pop(),
+                        source: SOURCE_MAP[d.source_dataset] || d.source_dataset,
+                        family: getFamily(d.model),
+                        compTokens: d.output_tokens / 1e9,
+                        promptTokens: d.input_tokens / 1e9,
+                        numDocs: d.num_documents / 1e6,
+                        dclmDiff: d.dclm_score_difference,
+                        outDclm: d.output_dclm_score,
+                        inDclm: d.input_dclm_score,
+                        eduDiff: d.edu_score_difference,
+                        outEdu: d.output_edu_score,
+                        inEdu: d.input_edu_score,
+                        compPerDoc: d.output_token_count_mean,
+                        phase: Math.random() * Math.PI * 2
+                    };
+                });
 
-                sortedPrompts.forEach((p, i) => {
-                    const y = rowCenter[p];
+                // ═══════════════════════════════════════════════════════════
+                // MODEL FAMILIES
+                // ═══════════════════════════════════════════════════════════
+                const familyColors = {
+                    'Gemma':   '#4EA5B7',
+                    'Qwen':    '#8B7BE8',
+                    'SmolLM2': '#E8C44A',
+                    'Falcon':  '#E889AB',
+                    'Granite': '#5BC0A4',
+                    'Llama':   '#D09090',
+                };
+                const familyOrder = ['Gemma','Qwen','SmolLM2','Falcon','Granite','Llama'];
+
+                // ═══════════════════════════════════════════════════════════
+                // FILTER: Only prompts tested across multiple model families
+                // ═════��═════════════════════════════════════════════════════
+                const focusPrompts = ['Math', 'Table', 'FAQ', 'Tutorial'];
+                const filtered = experiments.filter(d => focusPrompts.includes(d.prompt));
+
+                // Sort rows by median compPerDoc (most verbose on top)
+                const promptStats = {};
+                focusPrompts.forEach(p => {
+                    const vals = filtered.filter(d => d.prompt === p).map(d => d.compPerDoc).sort((a,b) => a - b);
+                    const mid = Math.floor(vals.length / 2);
+                    promptStats[p] = {
+                        median: vals.length % 2 ? vals[mid] : (vals[mid-1] + vals[mid]) / 2,
+                        count: vals.length
+                    };
+                });
+                const sortedPrompts = [...focusPrompts].sort((a, b) => promptStats[b].median - promptStats[a].median);
+
+                // ═══════════════════════════════════════════════════════════
+                // TOOLTIP
+                // ═══════════════════════════════════════════════════════════
+                const fmtB = (v) => v >= 10 ? v.toFixed(0) + 'B' : v.toFixed(1) + 'B';
+                const fmtSign = (v, p) => (v >= 0 ? '+' : '') + v.toFixed(p || 3);
+                const dCol = (v) => v >= 0 ? '#5BC0A4' : '#E889AB';
+                const buildTip = (d) =>
+                    `<div style="font-weight:800;font-size:13px;">${d.prompt}</div>` +
+                    `<div style="font-size:11px;color:var(--muted-color);margin-top:-2px;margin-bottom:4px;">` +
+                    `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${familyColors[d.family]};margin-right:4px;vertical-align:middle;"></span>` +
+                    `${d.model} \u00b7 ${d.source}</div>` +
+                    `<div style="padding-top:5px;border-top:1px solid var(--border-color);display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:11.5px;">` +
+                    `<span style="color:var(--muted-color);">Total output</span><span>${fmtB(d.compTokens)}</span>` +
+                    `<span style="color:var(--muted-color);">Output/doc</span><span>${Math.round(d.compPerDoc)} tokens</span>` +
+                    `<span style="color:var(--muted-color);">Docs</span><span>${d.numDocs.toFixed(1)}M</span>` +
+                    `</div>` +
+                    `<div style="margin-top:5px;padding-top:5px;border-top:1px solid var(--border-color);display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:11.5px;">` +
+                    `<span style="color:var(--muted-color);">DCLM</span>` +
+                    `<span>${d.inDclm.toFixed(3)} \u2192 ${d.outDclm.toFixed(3)} <b style="color:${dCol(d.dclmDiff)};">${fmtSign(d.dclmDiff)}</b></span>` +
+                    `<span style="color:var(--muted-color);">Edu</span>` +
+                    `<span>${d.inEdu.toFixed(2)} \u2192 ${d.outEdu.toFixed(2)} <b style="color:${dCol(d.eduDiff)};">${fmtSign(d.eduDiff, 2)}</b></span>` +
+                    `</div>`;
+
+                // ═══════════════════════════════════════════════════════════
+                // SVG
+                // ═══════════════════════════════════════════════════════════
+                const svg = d3.select(container).append('svg')
+                    .attr('width', '100%')
+                    .style('display', 'block')
+                    .style('cursor', 'crosshair');
+
+                let animFrame = null;
+
+                const render = () => {
+                    const width = container.clientWidth || 800;
+                    const height = Math.max(260, Math.round(width / 3));
+                    svg.attr('width', width).attr('height', height);
+
+                    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                    const textColor = isDark ? 'rgba(255,255,255,0.72)' : 'rgba(0,0,0,0.62)';
+                    const mutedText = isDark ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.18)';
+                    const subtleText = isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)';
+                    const refLine = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.07)';
+                    const bandEven = isDark ? 'rgba(255,255,255,0.022)' : 'rgba(0,0,0,0.018)';
+                    const glowColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
+                    const smolHighlight = isDark ? 'rgba(232,196,74,0.18)' : 'rgba(232,196,74,0.12)';
+
+                    const fontSize = Math.max(8, Math.min(12, width / 80));
+
+                    // ─── LAYOUT ───
+                    const labelW = Math.max(68, width * 0.085);
+                    const pl = labelW + 12;
+                    const pr = width * 0.965;
+                    const pt = height * 0.20;
+                    const pb = height * 0.86;
+                    const plotH = pb - pt;
+                    const rowH = plotH / sortedPrompts.length;
+
+                    const rowCenter = {};
+                    sortedPrompts.forEach((p, i) => { rowCenter[p] = pt + (i + 0.5) * rowH; });
+
+                    // ─── X SCALE: completion tokens per document (log) ───
+                    const xScale = d3.scaleLog().base(10)
+                        .domain([15, 1000])
+                        .range([pl, pr]);
+
+                    const rBase = Math.max(3.5, Math.min(8, width * 0.007));
+
+                    // ─── FORCE SIMULATION ───
+                    filtered.forEach(d => {
+                        d.tx = xScale(Math.max(15, d.compPerDoc));
+                        d.ty = rowCenter[d.prompt];
+                        d.x = d.tx + (Math.random() - 0.5) * 6;
+                        d.y = d.ty + (Math.random() - 0.5) * rowH * 0.3;
+                    });
 
-                    if (i % 2 === 0) {
-                        gRows.append('rect')
-                            .attr('x', pl - 6).attr('y', y - rowH / 2)
-                            .attr('width', pr - pl + 12).attr('height', rowH)
-                            .attr('fill', bandEven).attr('rx', 4);
-                    }
-                    if (i > 0) {
-                        gRows.append('line')
-                            .attr('x1', pl - 2).attr('x2', pr + 2)
-                            .attr('y1', y - rowH / 2).attr('y2', y - rowH / 2)
-                            .attr('stroke', refLine).attr('stroke-width', 0.5);
-                    }
+                    const sim = d3.forceSimulation(filtered)
+                        .force('x', d3.forceX(d => d.tx).strength(0.72))
+                        .force('y', d3.forceY(d => d.ty).strength(0.55))
+                        .force('collide', d3.forceCollide(rBase + 1.5).iterations(5))
+                        .stop();
+                    for (let i = 0; i < 250; i++) sim.tick();
+
+                    filtered.forEach(d => {
+                        d.x = Math.max(pl + rBase, Math.min(pr - rBase, d.x));
+                        const yMin = rowCenter[d.prompt] - rowH * 0.46;
+                        const yMax = rowCenter[d.prompt] + rowH * 0.46;
+                        d.y = Math.max(yMin, Math.min(yMax, d.y));
+                    });
 
-                    // SmolLM2 highlight zone — show where SmolLM2 dots land
-                    const smolExp = filtered.filter(d => d.prompt === p && d.family === 'SmolLM2');
-                    if (smolExp.length) {
-                        const smolX = smolExp[0].x;
-                        gRows.append('rect')
-                            .attr('x', smolX - rBase * 2.5).attr('y', y - rowH * 0.42)
-                            .attr('width', rBase * 5).attr('height', rowH * 0.84)
-                            .attr('fill', smolHighlight).attr('rx', rBase * 2);
+                    // ─── BG STARS ───
+                    const bgCol = (() => {
+                        const i01 = d3.interpolateRgb(d3.rgb(78,165,183), d3.rgb(206,192,250));
+                        const i12 = d3.interpolateRgb(d3.rgb(206,192,250), d3.rgb(232,137,171));
+                        return (v) => { const t = Math.max(0, Math.min(1, v)); return t <= 0.5 ? i01(t / 0.5) : i12((t - 0.5) / 0.5); };
+                    })();
+                    const gBg = svg.selectAll('g.bg').data([0]).join('g').attr('class', 'bg');
+                    if (!gBg.selectAll('circle').size()) {
+                        const stars = d3.range(50).map(() => ({
+                            x: Math.random() * width, y: Math.random() * height,
+                            z: Math.random(), r: 0.3 + Math.random() * 0.6
+                        }));
+                        gBg.selectAll('circle').data(stars).join('circle')
+                            .attr('cx', d => d.x).attr('cy', d => d.y).attr('r', d => d.r)
+                            .attr('fill', d => bgCol(d.z)).attr('fill-opacity', d => 0.03 + d.z * 0.04);
                     }
 
-                    // Label
-                    gRows.append('text')
-                        .attr('x', pl - 10).attr('y', y)
-                        .attr('text-anchor', 'end')
-                        .attr('dominant-baseline', 'central')
-                        .attr('fill', textColor)
-                        .attr('font-size', fontSize + 'px')
-                        .attr('font-weight', '700')
-                        .attr('font-family', 'system-ui, -apple-system, sans-serif')
-                        .attr('letter-spacing', '-0.2px')
-                        .text(p);
-                });
-
-                // ─── X AXIS TICKS ───
-                const gRef = svg.selectAll('g.ref').data([0]).join('g').attr('class', 'ref');
-                gRef.selectAll('*').remove();
-
-                [20, 50, 100, 200, 500].forEach(v => {
-                    const x = xScale(v);
-                    if (x > pl && x < pr) {
-                        gRef.append('line')
-                            .attr('x1', x).attr('x2', x)
-                            .attr('y1', pb).attr('y2', pb + 3)
-                            .attr('stroke', mutedText).attr('stroke-width', 0.7);
-                        gRef.append('text')
-                            .attr('x', x).attr('y', pb + 5)
-                            .attr('text-anchor', 'middle')
-                            .attr('dominant-baseline', 'hanging')
-                            .attr('fill', mutedText)
-                            .attr('font-size', (fontSize * 0.65) + 'px')
+                    // ─── ROW BANDS & LABELS ───
+                    const gRows = svg.selectAll('g.rows').data([0]).join('g').attr('class', 'rows');
+                    gRows.selectAll('*').remove();
+
+                    sortedPrompts.forEach((p, i) => {
+                        const y = rowCenter[p];
+
+                        if (i % 2 === 0) {
+                            gRows.append('rect')
+                                .attr('x', pl - 6).attr('y', y - rowH / 2)
+                                .attr('width', pr - pl + 12).attr('height', rowH)
+                                .attr('fill', bandEven).attr('rx', 4);
+                        }
+                        if (i > 0) {
+                            gRows.append('line')
+                                .attr('x1', pl - 2).attr('x2', pr + 2)
+                                .attr('y1', y - rowH / 2).attr('y2', y - rowH / 2)
+                                .attr('stroke', refLine).attr('stroke-width', 0.5);
+                        }
+
+                        // SmolLM2 highlight zone
+                        const smolExp = filtered.filter(d => d.prompt === p && d.family === 'SmolLM2');
+                        if (smolExp.length) {
+                            const smolX = smolExp[0].x;
+                            gRows.append('rect')
+                                .attr('x', smolX - rBase * 2.5).attr('y', y - rowH * 0.42)
+                                .attr('width', rBase * 5).attr('height', rowH * 0.84)
+                                .attr('fill', smolHighlight).attr('rx', rBase * 2);
+                        }
+
+                        // Label
+                        gRows.append('text')
+                            .attr('x', pl - 10).attr('y', y)
+                            .attr('text-anchor', 'end')
+                            .attr('dominant-baseline', 'central')
+                            .attr('fill', textColor)
+                            .attr('font-size', fontSize + 'px')
+                            .attr('font-weight', '700')
                             .attr('font-family', 'system-ui, -apple-system, sans-serif')
-                            .text(v);
-                        // Subtle grid line
-                        gRef.append('line')
-                            .attr('x1', x).attr('x2', x)
-                            .attr('y1', pt).attr('y2', pb)
-                            .attr('stroke', subtleText).attr('stroke-width', 0.4)
-                            .attr('stroke-dasharray', '2,6');
-                    }
-                });
+                            .attr('letter-spacing', '-0.2px')
+                            .text(p);
+                    });
+
+                    // ─── X AXIS TICKS ───
+                    const gRef = svg.selectAll('g.ref').data([0]).join('g').attr('class', 'ref');
+                    gRef.selectAll('*').remove();
+
+                    [20, 50, 100, 200, 500].forEach(v => {
+                        const x = xScale(v);
+                        if (x > pl && x < pr) {
+                            gRef.append('line')
+                                .attr('x1', x).attr('x2', x)
+                                .attr('y1', pb).attr('y2', pb + 3)
+                                .attr('stroke', mutedText).attr('stroke-width', 0.7);
+                            gRef.append('text')
+                                .attr('x', x).attr('y', pb + 5)
+                                .attr('text-anchor', 'middle')
+                                .attr('dominant-baseline', 'hanging')
+                                .attr('fill', mutedText)
+                                .attr('font-size', (fontSize * 0.65) + 'px')
+                                .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                                .text(v);
+                            gRef.append('line')
+                                .attr('x1', x).attr('x2', x)
+                                .attr('y1', pt).attr('y2', pb)
+                                .attr('stroke', subtleText).attr('stroke-width', 0.4)
+                                .attr('stroke-dasharray', '2,6');
+                        }
+                    });
 
-                // Axis label
-                gRef.append('text')
-                    .attr('x', pr).attr('y', pb + 16)
-                    .attr('text-anchor', 'end')
-                    .attr('fill', mutedText)
-                    .attr('font-size', (fontSize * 0.72) + 'px')
-                    .attr('font-weight', '600')
-                    .attr('font-family', 'system-ui, -apple-system, sans-serif')
-                    .text('Output tokens / document \u2192');
-
-                // "Less verbose" / "More verbose" labels
-                gRef.append('text')
-                    .attr('x', pl + 6).attr('y', pt - 5)
-                    .attr('text-anchor', 'start')
-                    .attr('fill', subtleText)
-                    .attr('font-size', (fontSize * 0.62) + 'px')
-                    .attr('font-style', 'italic')
-                    .attr('font-family', 'system-ui, -apple-system, sans-serif')
-                    .text('\u2190 concise');
-
-                gRef.append('text')
-                    .attr('x', pr - 6).attr('y', pt - 5)
-                    .attr('text-anchor', 'end')
-                    .attr('fill', subtleText)
-                    .attr('font-size', (fontSize * 0.62) + 'px')
-                    .attr('font-style', 'italic')
-                    .attr('font-family', 'system-ui, -apple-system, sans-serif')
-                    .text('verbose \u2192');
-
-                // ─── MODEL FAMILY LEGEND ───
-                const gLeg = svg.selectAll('g.legend').data([0]).join('g').attr('class', 'legend');
-                gLeg.selectAll('*').remove();
-                const legDotR = Math.max(3, fontSize * 0.35);
-                const legGap = Math.max(68, width * 0.082);
-                const totalLegW = familyOrder.length * legGap;
-                const legStartX = Math.max(pl, (width - totalLegW) / 2);
-                const legY = height * 0.055;
-
-                familyOrder.forEach((fam, i) => {
-                    const lx = legStartX + i * legGap;
-                    gLeg.append('circle')
-                        .attr('cx', lx).attr('cy', legY)
-                        .attr('r', legDotR)
-                        .attr('fill', familyColors[fam]).attr('fill-opacity', 0.85);
-                    gLeg.append('text')
-                        .attr('x', lx + legDotR + 4).attr('y', legY)
-                        .attr('dominant-baseline', 'central')
-                        .attr('fill', isDark ? 'rgba(255,255,255,0.48)' : 'rgba(0,0,0,0.42)')
+                    // Axis label
+                    gRef.append('text')
+                        .attr('x', pr).attr('y', pb + 16)
+                        .attr('text-anchor', 'end')
+                        .attr('fill', mutedText)
                         .attr('font-size', (fontSize * 0.72) + 'px')
-                        .attr('font-weight', fam === 'SmolLM2' ? '700' : '500')
+                        .attr('font-weight', '600')
                         .attr('font-family', 'system-ui, -apple-system, sans-serif')
-                        .text(fam);
-                });
+                        .text('Output tokens / document \u2192');
+
+                    // "concise" / "verbose" labels
+                    gRef.append('text')
+                        .attr('x', pl + 6).attr('y', pt - 5)
+                        .attr('text-anchor', 'start')
+                        .attr('fill', subtleText)
+                        .attr('font-size', (fontSize * 0.62) + 'px')
+                        .attr('font-style', 'italic')
+                        .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                        .text('\u2190 concise');
 
-                // ─── TOOLTIP ───
-                container.style.position = container.style.position || 'relative';
-                let tip = container.querySelector('.d3-tooltip');
-                let tipInner;
-                if (!tip) {
-                    tip = document.createElement('div');
-                    tip.className = 'd3-tooltip';
-                    Object.assign(tip.style, {
-                        position: 'absolute', top: '0px', left: '0px',
-                        transform: 'translate(-9999px, -9999px)',
-                        pointerEvents: 'none',
-                        padding: '10px 14px', borderRadius: '12px',
-                        fontSize: '12px', lineHeight: '1.4',
-                        border: '1px solid var(--border-color)',
-                        background: 'var(--surface-bg)',
-                        color: 'var(--text-color)',
-                        boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
-                        opacity: '0', transition: 'opacity .12s ease',
-                        backdropFilter: 'saturate(1.12) blur(8px)',
-                        zIndex: '20', maxWidth: '320px'
-                    });
-                    tipInner = document.createElement('div');
-                    tipInner.className = 'd3-tooltip__inner';
-                    Object.assign(tipInner.style, {
-                        textAlign: 'left', display: 'flex', flexDirection: 'column',
-                        gap: '4px', minWidth: '220px'
+                    gRef.append('text')
+                        .attr('x', pr - 6).attr('y', pt - 5)
+                        .attr('text-anchor', 'end')
+                        .attr('fill', subtleText)
+                        .attr('font-size', (fontSize * 0.62) + 'px')
+                        .attr('font-style', 'italic')
+                        .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                        .text('verbose \u2192');
+
+                    // ─── MODEL FAMILY LEGEND ───
+                    const gLeg = svg.selectAll('g.legend').data([0]).join('g').attr('class', 'legend');
+                    gLeg.selectAll('*').remove();
+                    const legDotR = Math.max(3, fontSize * 0.35);
+                    const legGap = Math.max(68, width * 0.082);
+                    const totalLegW = familyOrder.length * legGap;
+                    const legStartX = Math.max(pl, (width - totalLegW) / 2);
+                    const legY = height * 0.055;
+
+                    familyOrder.forEach((fam, i) => {
+                        const lx = legStartX + i * legGap;
+                        gLeg.append('circle')
+                            .attr('cx', lx).attr('cy', legY)
+                            .attr('r', legDotR)
+                            .attr('fill', familyColors[fam]).attr('fill-opacity', 0.85);
+                        gLeg.append('text')
+                            .attr('x', lx + legDotR + 4).attr('y', legY)
+                            .attr('dominant-baseline', 'central')
+                            .attr('fill', isDark ? 'rgba(255,255,255,0.48)' : 'rgba(0,0,0,0.42)')
+                            .attr('font-size', (fontSize * 0.72) + 'px')
+                            .attr('font-weight', fam === 'SmolLM2' ? '700' : '500')
+                            .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                            .text(fam);
                     });
-                    tip.appendChild(tipInner);
-                    container.appendChild(tip);
-                } else {
-                    tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
-                }
 
-                // ─── DOTS ───
-                const gDots = svg.selectAll('g.dots').data([0]).join('g').attr('class', 'dots');
-
-                const handleEnter = function (ev, d) {
-                    gDots.selectAll('circle').attr('fill-opacity', 0.12).attr('stroke-opacity', 0.05);
-                    // Highlight same family across all prompts
-                    gDots.selectAll('circle')
-                        .filter(c => c.family === d.family)
-                        .attr('fill-opacity', 0.60).attr('stroke-opacity', 0.4);
-                    d3.select(this)
-                        .raise()
-                        .attr('fill-opacity', 1)
-                        .attr('stroke-opacity', 1)
-                        .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
-                        .transition().duration(90).ease(d3.easeCubicOut)
-                        .attr('r', rBase * 1.5);
-                    tipInner.innerHTML = buildTip(d);
-                    tip.style.opacity = '1';
-                };
-                const handleMove = (ev) => {
-                    const [mx, my] = d3.pointer(ev, container);
-                    const bw = tip.offsetWidth || 260;
-                    const bh = tip.offsetHeight || 180;
-                    const ox = (mx + bw + 20 > width) ? -(bw + 12) : 12;
-                    const oy = (my + bh + 20 > height) ? -(bh + 12) : 14;
-                    tip.style.transform = `translate(${Math.round(mx + ox)}px, ${Math.round(my + oy)}px)`;
-                };
-                const handleLeave = function (ev, d) {
-                    gDots.selectAll('circle')
-                        .attr('fill-opacity', 0.82)
-                        .attr('stroke-opacity', 0.30);
-                    d3.select(this)
-                        .style('filter', null)
-                        .transition().duration(90).ease(d3.easeCubicOut)
-                        .attr('r', rBase);
-                    tip.style.opacity = '0';
-                    tip.style.transform = 'translate(-9999px, -9999px)';
-                };
+                    // ─── TOOLTIP ───
+                    container.style.position = container.style.position || 'relative';
+                    let tip = container.querySelector('.d3-tooltip');
+                    let tipInner;
+                    if (!tip) {
+                        tip = document.createElement('div');
+                        tip.className = 'd3-tooltip';
+                        Object.assign(tip.style, {
+                            position: 'absolute', top: '0px', left: '0px',
+                            transform: 'translate(-9999px, -9999px)',
+                            pointerEvents: 'none',
+                            padding: '10px 14px', borderRadius: '12px',
+                            fontSize: '12px', lineHeight: '1.4',
+                            border: '1px solid var(--border-color)',
+                            background: 'var(--surface-bg)',
+                            color: 'var(--text-color)',
+                            boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
+                            opacity: '0', transition: 'opacity .12s ease',
+                            backdropFilter: 'saturate(1.12) blur(8px)',
+                            zIndex: '20', maxWidth: '320px'
+                        });
+                        tipInner = document.createElement('div');
+                        tipInner.className = 'd3-tooltip__inner';
+                        Object.assign(tipInner.style, {
+                            textAlign: 'left', display: 'flex', flexDirection: 'column',
+                            gap: '4px', minWidth: '220px'
+                        });
+                        tip.appendChild(tipInner);
+                        container.appendChild(tip);
+                    } else {
+                        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+                    }
 
-                gDots.selectAll('circle').data(filtered, d => d.idx)
-                    .join(
-                        enter => enter.append('circle')
-                            .attr('cx', d => d.x).attr('cy', d => d.y)
-                            .attr('r', rBase)
-                            .attr('fill', d => familyColors[d.family] || '#aaa')
-                            .attr('fill-opacity', 0.82)
-                            .attr('stroke', d => d.family === 'SmolLM2' ? '#fff' : (familyColors[d.family] || '#aaa'))
-                            .attr('stroke-width', d => d.family === 'SmolLM2' ? 1.5 : 0.9)
-                            .attr('stroke-opacity', d => d.family === 'SmolLM2' ? 0.5 : 0.30)
-                            .on('mouseenter', handleEnter)
-                            .on('mousemove', handleMove)
-                            .on('mouseleave', handleLeave),
-                        update => update
-                            .attr('cx', d => d.x).attr('cy', d => d.y)
-                            .attr('r', rBase)
-                            .attr('fill', d => familyColors[d.family] || '#aaa')
+                    // ─── DOTS ───
+                    const gDots = svg.selectAll('g.dots').data([0]).join('g').attr('class', 'dots');
+
+                    const handleEnter = function (ev, d) {
+                        gDots.selectAll('circle').attr('fill-opacity', 0.12).attr('stroke-opacity', 0.05);
+                        gDots.selectAll('circle')
+                            .filter(c => c.family === d.family)
+                            .attr('fill-opacity', 0.60).attr('stroke-opacity', 0.4);
+                        d3.select(this)
+                            .raise()
+                            .attr('fill-opacity', 1)
+                            .attr('stroke-opacity', 1)
+                            .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
+                            .transition().duration(90).ease(d3.easeCubicOut)
+                            .attr('r', rBase * 1.5);
+                        tipInner.innerHTML = buildTip(d);
+                        tip.style.opacity = '1';
+                    };
+                    const handleMove = (ev) => {
+                        const [mx, my] = d3.pointer(ev, container);
+                        const bw = tip.offsetWidth || 260;
+                        const bh = tip.offsetHeight || 180;
+                        const ox = (mx + bw + 20 > width) ? -(bw + 12) : 12;
+                        const oy = (my + bh + 20 > height) ? -(bh + 12) : 14;
+                        tip.style.transform = `translate(${Math.round(mx + ox)}px, ${Math.round(my + oy)}px)`;
+                    };
+                    const handleLeave = function () {
+                        gDots.selectAll('circle')
                             .attr('fill-opacity', 0.82)
-                            .attr('stroke', d => d.family === 'SmolLM2' ? '#fff' : (familyColors[d.family] || '#aaa'))
-                            .attr('stroke-width', d => d.family === 'SmolLM2' ? 1.5 : 0.9)
-                            .attr('stroke-opacity', d => d.family === 'SmolLM2' ? 0.5 : 0.30)
-                            .on('mouseenter', handleEnter)
-                            .on('mousemove', handleMove)
-                            .on('mouseleave', handleLeave)
-                    );
-
-                // ─── BREATHING ───
-                if (animFrame) cancelAnimationFrame(animFrame);
-                const breathe = () => {
-                    const now = Date.now() * 0.001;
-                    gDots.selectAll('circle').each(function (d) {
-                        d3.select(this).attr('r', rBase + Math.sin(now * 0.5 + d.phase) * rBase * 0.03);
-                    });
-                    animFrame = requestAnimationFrame(breathe);
+                            .attr('stroke-opacity', 0.30);
+                        d3.select(this)
+                            .style('filter', null)
+                            .transition().duration(90).ease(d3.easeCubicOut)
+                            .attr('r', rBase);
+                        tip.style.opacity = '0';
+                        tip.style.transform = 'translate(-9999px, -9999px)';
+                    };
+
+                    gDots.selectAll('circle').data(filtered, d => d.idx)
+                        .join(
+                            enter => enter.append('circle')
+                                .attr('cx', d => d.x).attr('cy', d => d.y)
+                                .attr('r', rBase)
+                                .attr('fill', d => familyColors[d.family] || '#aaa')
+                                .attr('fill-opacity', 0.82)
+                                .attr('stroke', d => d.family === 'SmolLM2' ? '#fff' : (familyColors[d.family] || '#aaa'))
+                                .attr('stroke-width', d => d.family === 'SmolLM2' ? 1.5 : 0.9)
+                                .attr('stroke-opacity', d => d.family === 'SmolLM2' ? 0.5 : 0.30)
+                                .on('mouseenter', handleEnter)
+                                .on('mousemove', handleMove)
+                                .on('mouseleave', handleLeave),
+                            update => update
+                                .attr('cx', d => d.x).attr('cy', d => d.y)
+                                .attr('r', rBase)
+                                .attr('fill', d => familyColors[d.family] || '#aaa')
+                                .attr('fill-opacity', 0.82)
+                                .attr('stroke', d => d.family === 'SmolLM2' ? '#fff' : (familyColors[d.family] || '#aaa'))
+                                .attr('stroke-width', d => d.family === 'SmolLM2' ? 1.5 : 0.9)
+                                .attr('stroke-opacity', d => d.family === 'SmolLM2' ? 0.5 : 0.30)
+                                .on('mouseenter', handleEnter)
+                                .on('mousemove', handleMove)
+                                .on('mouseleave', handleLeave)
+                        );
+
+                    // ─── BREATHING ───
+                    if (animFrame) cancelAnimationFrame(animFrame);
+                    const breathe = () => {
+                        const now = Date.now() * 0.001;
+                        gDots.selectAll('circle').each(function (d) {
+                            d3.select(this).attr('r', rBase + Math.sin(now * 0.5 + d.phase) * rBase * 0.03);
+                        });
+                        animFrame = requestAnimationFrame(breathe);
+                    };
+                    breathe();
                 };
-                breathe();
-            };
 
-            if (window.ResizeObserver) {
-                new ResizeObserver(() => render()).observe(container);
-            } else {
-                window.addEventListener('resize', render);
+                if (window.ResizeObserver) {
+                    new ResizeObserver(() => render()).observe(container);
+                } else {
+                    window.addEventListener('resize', render);
+                }
+                render();
             }
-            render();
         };
 
         if (document.readyState === 'loading') {