replace the banner with Thibaud's design

app/src/content/embeds/banner.html

@@ -1,15 +1,10 @@
-<div class="d3-galaxy" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
+<div class="d3-synth-scale" style="width:100%;margin:0;aspect-ratio:2.5/1;min-height:300px;"></div>
 <script>
     (() => {
         const ensureD3 = (cb) => {
             if (window.d3 && typeof window.d3.select === 'function') return cb();
             let s = document.getElementById('d3-cdn-script');
-            if (!s) {
-                s = document.createElement('script');
-                s.id = 'd3-cdn-script';
-                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
-                document.head.appendChild(s);
-            }
+            if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
             const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
             s.addEventListener('load', onReady, { once: true });
             if (window.d3) onReady();
@@ -17,234 +12,327 @@
 
         const bootstrap = () => {
             const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-            const container = (mount && mount.querySelector && mount.querySelector('.d3-galaxy')) || document.querySelector('.d3-galaxy');
+            const container = (mount && mount.querySelector && mount.querySelector('.d3-synth-scale')) ||
+                Array.from(document.querySelectorAll('.d3-synth-scale')).find(el => el.dataset.mounted !== 'true');
             if (!container) return;
-            if (container.dataset) {
                 if (container.dataset.mounted === 'true') return;
                 container.dataset.mounted = 'true';
-            }
-            // Scene params (match previous Plotly ranges)
-            const cx = 1.5, cy = 0.5;
-            const a = 1.3, b = 0.45;
-            const numPoints = 3000;
-            const numArms = 3;
-            const numTurns = 2.1;
-            const angleJitter = 0.12;
-            const posNoise = 0.015;
+            container.style.background = 'transparent';
+            container.style.overflow = 'visible';
+            container.style.position = 'relative';
 
-            // Circle size settings
-            const minCircleSize = 4;  // minimum diameter in pixels
-            const maxCircleSize = 12; // maximum diameter in pixels
+            const raw = [
+                ["Faq","Format","FW-Edu HQ","gemma-3-1b-it","Gemma",17.674,22.215,20.15,0.711,-0.346],
+                ["Guided Rewrite","REWIRE","FW-Edu HQ","gemma-3-1b-it","Gemma",8.690,10.303,20.15,0.278,-1.012],
+                ["Guided Rewrite","REWIRE","FW-Edu HQ","gemma-3-27b-it","Gemma",8.429,8.644,19.95,0.546,-1.228],
+                ["Faq","Format","FW-Edu HQ","Llama-3.2-1B-Instruct","Llama",6.290,11.620,20.15,0.735,-0.375],
+                ["Tutorial","Format","FW-Edu HQ","gemma-3-12b-it","Gemma",5.326,6.568,20.15,0.398,-0.077],
+                ["Tutorial","Format","FW-Edu HQ","Falcon3-1B-Instruct","Falcon",4.965,7.578,20.15,0.447,-0.145],
+                ["Tutorial","Format","FW-Edu HQ","SmolLM2-135M-Instruct","SmolLM2",4.510,6.987,20.15,0.423,-0.572],
+                ["Article","Format","FW-Edu HQ","gemma-3-1b-it","Gemma",3.999,5.659,19.74,-0.018,-0.432],
+                ["Discussion","Format","FW-Edu HQ","gemma-3-1b-it","Gemma",3.958,6.248,20.15,0.036,-0.574],
+                ["Tutorial","Format","FW-Edu HQ","Qwen3-1.7B","Qwen",3.555,5.695,20.15,0.281,0.056],
+                ["Tutorial","Format","FW-Edu HQ","granite-3.1-1b-a400m-instruct","Granite",3.512,6.417,20.15,0.449,-0.072],
+                ["Wikipedia Style","Nemotron","FW-Edu HQ","gemma-3-1b-it","Gemma",3.426,8.366,20.15,0.297,-0.193],
+                ["Faq","Format","FW-Edu HQ","Falcon3-1B-Instruct","Falcon",3.412,4.842,20.15,0.691,-0.249],
+                ["Faq","Format","FW-Edu HQ","gemma-3-12b-it","Gemma",3.220,4.062,20.15,0.712,-0.295],
+                ["Tutorial","Format","FW-Edu HQ","SmolLM2-360M-Instruct","SmolLM2",3.145,6.521,20.15,0.441,-0.565],
+                ["Tutorial","Format","FW-Edu HQ","Qwen2-1.5B-Instruct","Qwen",3.093,8.000,20.15,0.527,-0.010],
+                ["Knowledge List","Nemotron","FW-Edu HQ","gemma-3-1b-it","Gemma",2.901,9.154,20.15,0.589,-0.193],
+                ["Discussion","Format","FW-Edu HQ","Qwen3-1.7B","Qwen",2.896,7.202,20.15,0.715,-0.122],
+                ["Faq","Format","FW-Edu HQ","Qwen3-1.7B","Qwen",2.880,4.775,20.15,0.632,-0.219],
+                ["Faq","Format","FW-Edu HQ","granite-3.1-1b-a400m-instruct","Granite",2.554,4.173,20.15,0.680,-0.166],
+                ["Tutorial","Format","FW-Edu HQ","gemma-3-27b-it","Gemma",2.545,3.289,20.15,0.485,-0.057],
+                ["Math","Format","FW-Edu HQ","gemma-3-12b-it","Gemma",2.506,5.926,20.15,0.755,-0.370],
+                ["Math","Format","FW-Edu HQ","gemma-3-1b-it","Gemma",2.455,5.081,20.15,0.620,-0.174],
+                ["Extract Knowledge","Nemotron","FW-Edu HQ","gemma-3-1b-it","Gemma",2.412,6.592,20.15,0.254,0.025],
+                ["Tutorial","Format","FW-Edu HQ","Llama-3.2-1B-Instruct","Llama",2.361,4.884,20.15,0.557,-0.031],
+                ["Tutorial","Format","FW-Edu LQ","gemma-3-12b-it","Gemma",2.352,2.574,32.89,0.189,0.379],
+                ["Tutorial","Format","FW-Edu HQ","Qwen2.5-1.5B-Instruct","Qwen",2.269,4.874,20.15,0.576,-0.083],
+                ["Tutorial","Format","FW-Edu HQ","Qwen1.5-1.8B-Chat","Qwen",2.222,2.404,20.15,0.647,0.072],
+                ["Distill","Nemotron","FW-Edu HQ","gemma-3-1b-it","Gemma",2.115,5.375,20.15,0.331,-0.132],
+                ["Diverse QA","Nemotron","FW-Edu HQ","gemma-3-1b-it","Gemma",1.973,7.013,20.15,0.779,-0.208],
+                ["Faq","Format","FW-Edu LQ","gemma-3-12b-it","Gemma",1.909,1.902,32.89,0.799,0.357],
+                ["Tutorial","Format","FW-Edu LQ","gemma-3-1b-it","Gemma",1.903,2.513,32.89,0.172,0.413],
+                ["Faq","Format","FW-Edu LQ","gemma-3-1b-it","Gemma",1.838,1.747,32.89,0.690,0.369],
+                ["Guided Rewrite","REWIRE","FW-Edu HQ","gemma-3-12b-it","Gemma",1.776,1.718,20.15,0.607,-1.214],
+                ["Table","Format","FW-Edu HQ","gemma-3-1b-it","Gemma",1.682,5.619,20.15,0.715,-0.776],
+                ["Tutorial","Format","DCLM","gemma-3-1b-it","Gemma",1.668,3.305,29.48,0.371,0.528],
+                ["Tutorial","Format","FW-Edu HQ","gemma-3-270m-it","Gemma",1.639,1.709,20.15,0.514,-0.337],
+                ["Commentary","Format","FW-Edu HQ","Qwen3-1.7B","Qwen",1.636,5.944,20.15,0.630,-0.229],
+                ["Guided Rewrite+","REWIRE","FW-Edu HQ","gemma-3-1b-it","Gemma",1.634,3.421,20.15,0.097,-0.428],
+                ["Math","Format","FW-Edu HQ","granite-3.1-1b-a400m-instruct","Granite",1.575,3.347,20.15,0.698,-0.324],
+                ["Tutorial","Format","FW-Edu HQ","SmolLM2-1.7B-Instruct","SmolLM2",1.521,3.380,20.15,0.439,-0.244],
+                ["Faq","Format","DCLM","gemma-3-1b-it","Gemma",1.519,2.084,29.48,0.709,0.346],
+                ["Tutorial","Format","FW-Edu HQ","gemma-3-1b-it","Gemma",1.507,2.705,19.37,0.074,-0.077],
+                ["Tutorial","Format","FW-Edu HQ","gemma-3-4b-it","Gemma",1.496,2.021,20.15,0.404,-0.049],
+                ["Commentary","Format","DCLM","gemma-3-1b-it","Gemma",1.456,5.523,29.48,0.202,0.359],
+                ["Guided Rewrite+","REWIRE","FW-Edu HQ","gemma-3-12b-it","Gemma",1.449,2.139,20.15,0.222,-0.102],
+                ["Table","Format","FW-Edu HQ","granite-3.1-1b-a400m-instruct","Granite",1.440,3.898,20.15,0.726,-0.597],
+                ["Math","Format","FW-Edu HQ","Falcon3-1B-Instruct","Falcon",1.422,2.166,20.15,0.704,-0.156],
+                ["Faq","Format","Cosmopedia","gemma-3-1b-it","Gemma",1.328,1.314,31.06,0.329,-0.264],
+                ["Math","Format","FW-Edu HQ","gemma-3-270m-it","Gemma",1.209,1.331,20.15,0.600,-0.406],
+                ["Math","Format","FW-Edu HQ","gemma-3-27b-it","Gemma",1.052,2.621,20.15,0.754,-0.429],
+                ["Tutorial","Format","Cosmopedia","gemma-3-1b-it","Gemma",1.016,1.468,31.06,-0.049,-0.080],
+                ["Guided Rewrite","REWIRE","FW-Edu HQ","gemma-3-4b-it","Gemma",0.911,1.097,20.15,0.436,-0.919],
+                ["Faq","Format","FW-Edu HQ","SmolLM2-1.7B-Instruct","SmolLM2",0.886,2.002,20.15,0.648,-0.406],
+                ["Table","Format","FW-Edu HQ","Llama-3.2-1B-Instruct","Llama",0.877,2.734,20.15,0.772,-0.815],
+                ["Math","Format","FW-Edu HQ","Llama-3.2-1B-Instruct","Llama",0.864,2.170,20.15,0.737,-0.384],
+                ["Table","Format","FW-Edu HQ","Qwen3-1.7B","Qwen",0.796,2.692,20.15,0.751,-0.638],
+                ["Guided Rewrite","REWIRE","FW-Edu HQ","gemma-3-270m-it","Gemma",0.775,1.708,20.15,0.755,-2.407],
+                ["Table","Format","FW-Edu HQ","gemma-3-12b-it","Gemma",0.764,2.491,20.15,0.719,-0.774],
+                ["Math","Format","FW-Edu HQ","gemma-3-4b-it","Gemma",0.676,1.749,20.15,0.743,-0.335],
+                ["Table","Format","FW-Edu HQ","Falcon3-1B-Instruct","Falcon",0.655,2.000,20.15,0.722,-0.748],
+                ["Math","Format","FW-Edu HQ","SmolLM2-1.7B-Instruct","SmolLM2",0.642,2.277,20.15,0.657,-0.669],
+                ["Commentary","Format","FW-Edu HQ","gemma-3-1b-it","Gemma",0.640,2.417,20.15,0.055,-0.517],
+                ["Math","Format","FW-Edu HQ","Qwen3-1.7B","Qwen",0.560,1.997,20.15,0.742,-0.310],
+                ["Table","Format","FW-Edu HQ","SmolLM2-1.7B-Instruct","SmolLM2",0.407,1.520,20.15,0.668,-0.943]
+            ];
 
-            // Generate spiral + bulge
-            const twoPi = Math.PI * 2;
-            const t = Float64Array.from({ length: numPoints }, () => Math.random() * (twoPi * numTurns));
-            const armIndices = Int16Array.from({ length: numPoints }, () => Math.floor(Math.random() * numArms));
-            const armOffsets = Float64Array.from(armIndices, (k) => k * (twoPi / numArms));
-            const theta = Float64Array.from(t, (tv, i) => tv + armOffsets[i] + d3.randomNormal.source(Math.random)(0, angleJitter)());
-            const rNorm = Float64Array.from(t, (tv) => Math.pow(tv / (twoPi * numTurns), 0.9));
-            const noiseScale = (rn) => posNoise * (0.8 + 0.6 * rn);
-            const noiseX = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
-            const noiseY = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
+            let animFrame = null;
 
-            const xSpiral = Float64Array.from(theta, (th, i) => cx + a * rNorm[i] * Math.cos(th) + noiseX[i]);
-            const ySpiral = Float64Array.from(theta, (th, i) => cy + b * rNorm[i] * Math.sin(th) + noiseY[i]);
+            const render = () => {
+                const W = container.clientWidth || 900;
+                const H = container.clientHeight || 360;
+                if (animFrame) { cancelAnimationFrame(animFrame); animFrame = null; }
+                container.innerHTML = '';
 
-            const bulgePoints = Math.floor(0.18 * numPoints);
-            const phiB = Float64Array.from({ length: bulgePoints }, () => twoPi * Math.random());
-            const rB = Float64Array.from({ length: bulgePoints }, () => Math.pow(Math.random(), 2.2) * 0.22);
-            const noiseXB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
-            const noiseYB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
-            const xBulge = Float64Array.from(phiB, (ph, i) => cx + a * rB[i] * Math.cos(ph) + noiseXB[i]);
-            const yBulge = Float64Array.from(phiB, (ph, i) => cy + b * rB[i] * Math.sin(ph) + noiseYB[i]);
+                const canvas = d3.select(container).append('svg')
+                    .attr('width', W).attr('height', H)
+                    .style('font-family', "'Inter', system-ui, -apple-system, sans-serif");
 
-            // Concatenate
-            const X = Array.from(xSpiral).concat(Array.from(xBulge));
-            const Y = Array.from(ySpiral).concat(Array.from(yBulge));
-            const lenSpiral = xSpiral.length;
+                // Color by model family — more meaningful for readers
+                const col = {
+                    Gemma: '#5b9bd5',
+                    Qwen: '#e07b54',
+                    Llama: '#8bc474',
+                    Falcon: '#c9a046',
+                    Granite: '#9a8ec2',
+                    SmolLM2: '#e06b9e'
+                };
+                const fillAlpha = 0.22;
 
-            const zSpiral = Array.from(rNorm, (rn) => 1 - rn);
-            const maxRB = rB && rB.length ? (window.d3 && d3.max ? d3.max(rB) : Math.max.apply(null, Array.from(rB))) : 1;
-            const zBulge = Array.from(rB, (rb) => 1 - (maxRB ? rb / maxRB : 0));
-            const Zraw = zSpiral.concat(zBulge);
-            const sizesPx = Zraw.map((z) => minCircleSize + z * (maxCircleSize - minCircleSize)); // diameter in pixels
+                const data = raw.map((d, i) => ({
+                    id: i, prompt: d[0], cat: d[1], source: d[2],
+                    model: d[3], family: d[4],
+                    compB: d[5], promptB: d[6], docsM: d[7],
+                    dclm: d[8], edu: d[9],
+                    phase: (i * 2.399) % (Math.PI * 2)
+                }));
 
-            // Labels (same categories as Python version)
-            const labelOf = (i) => {
-                const z = Zraw[i];
-                if (z < 0.25) return 'tiny star';
-                if (z < 0.5) return 'small star';
-                if (z < 0.75) return 'medium star';
-                return 'large star';
-            };
+                // ─── LAYOUT — unified composition centered at one point ───
+                const cx = W / 2;
 
-            // Sort by size ascending for z-index: small first, big last
-            const idx = d3.range(X.length).sort((i, j) => sizesPx[i] - sizesPx[j]);
+                // Sizing — slightly bigger
+                const packR = Math.min(W * 0.28, H * 0.34);
+                const maxR = Math.min(packR * 0.37, 56);
+                const minR = Math.max(4, W * 0.005);
+                const rScale = d3.scaleSqrt()
+                    .domain([0, d3.max(data, d => d.compB)])
+                    .range([minR, maxR]);
 
-            // Colors: piecewise gradient [0 -> 0.5 -> 1]
-            const c0 = d3.rgb(78, 165, 183);    // rgb(78, 165, 183)
-            const c1 = d3.rgb(206, 192, 250);   // rgb(206, 192, 250)
-            const c2 = d3.rgb(232, 137, 171);   // rgb(232, 137, 171)
-            const interp01 = d3.interpolateRgb(c0, c1);
-            const interp12 = d3.interpolateRgb(c1, c2);
-            const colorFor = (v) => {
-                const t = Math.max(0, Math.min(1, v));
-                return t <= 0.5 ? interp01(t / 0.5) : interp12((t - 0.5) / 0.5);
-            };
+                // Mega text metrics
+                const megaFS = Math.min(W * 0.15, H * 0.24, 150);
+                const subFS = Math.max(8, megaFS * 0.1);
+                // Mega number is the anchor — slightly below center
+                // Bubbles gravitate around it, subtitle sits below
+                const megaY = H * 0.48;
+                const subY = H * 0.87;
+                const packCY = megaY;
 
-            // Create SVG
-            const svg = d3.select(container).append('svg')
-                .attr('width', '100%')
-                .style('display', 'block')
-                .style('cursor', 'crosshair');
+                data.forEach(d => {
+                    d.r = rScale(d.compB);
+                    d.x = cx;
+                    d.y = packCY;
+                });
 
-            const render = () => {
-                const width = container.clientWidth || 800;
-                const height = Math.max(260, Math.round(width / 3)); // keep ~3:1, min height
-                svg.attr('width', width).attr('height', height);
+                // Two focal points for oval spread — wider
+                const spread = Math.min(W * 0.13, 110);
+                const focalL = cx - spread;
+                const focalR = cx + spread;
 
-                const xScale = d3.scaleLinear().domain([0, 3]).range([0, width]);
-                const yScale = d3.scaleLinear().domain([0, 1]).range([height, 0]);
+                const sim = d3.forceSimulation(data)
+                    .alphaDecay(0.012)
+                    .velocityDecay(0.32)
+                    .force('x', d3.forceX(d => (d.id % 2 === 0) ? focalL : focalR).strength(0.02))
+                    .force('y', d3.forceY(packCY).strength(0.05))
+                    .force('collide', d3.forceCollide(d => d.r + 1.5).strength(0.8).iterations(3))
+                    .stop();
 
-                // Subtle stroke color depending on theme
-                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-                const strokeColor = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.12)';
-                const glowColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
+                for (let i = 0; i < 250; i++) sim.tick();
 
+                // ─── Now render with already-settled positions ───
+                const gB = canvas.append('g');
 
-                // Group for points (no blend mode for better print/PDF visibility)
-                const g = svg.selectAll('g.points').data([0]).join('g').attr('class', 'points');
+                const circles = gB.selectAll('circle')
+                    .data(data).join('circle')
+                    .attr('cx', d => d.x).attr('cy', d => d.y)
+                    .attr('r', d => d.r)
+                    .attr('fill', d => col[d.family])
+                    .attr('fill-opacity', fillAlpha)
+                    .attr('stroke', d => col[d.family])
+                    .attr('stroke-width', 0.7)
+                    .attr('stroke-opacity', 0.12)
+                    .style('cursor', 'pointer');
 
-                // Ensure container can host an absolute 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 12px',
-                        borderRadius: '12px',
-                        fontSize: '12px',
-                        lineHeight: '1.35',
-                        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'
-                    });
-                    tipInner = document.createElement('div');
-                    tipInner.className = 'd3-tooltip__inner';
-                    Object.assign(tipInner.style, {
-                        textAlign: 'left',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '6px',
-                        minWidth: '220px'
-                    });
-                    tip.appendChild(tipInner);
-                    container.appendChild(tip);
-                } else {
-                    tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
-                }
+                // Resume remaining simulation live
+                sim.on('tick', () => {
+                        circles
+                            .attr('cx', d => d.x)
+                            .attr('cy', d => d.y);
+                    })
+                    .restart();
 
-                // Final filter: remove small dots very close to the galaxy center (after placement)
-                const centerHoleRadius = 0.48; // elliptical radius threshold
-                const smallSizeThreshold = 7.5; // same notion as Python size cut
-                const rTotal = idx.map((i) => Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2));
-                const idxFiltered = idx.filter((i, k) => !(rTotal[k] <= centerHoleRadius && sizesPx[i] < smallSizeThreshold));
+                // After sim settles, start gentle float
+                sim.on('end', () => {
+                    data.forEach(d => { d.ox = d.x; d.oy = d.y; });
+                    const drift = () => {
+                        const t = Date.now() * 0.001;
+                        circles.each(function(d) {
+                            const dy = Math.sin(t * 0.22 + d.phase) * 1.2;
+                            d3.select(this).attr('cy', d.oy + dy);
+                        });
+                        animFrame = requestAnimationFrame(drift);
+                    };
+                    drift();
+                });
 
-                const sel = g.selectAll('circle').data(idxFiltered, (i) => i);
-                sel.join(
-                    (enter) => enter.append('circle')
-                        .attr('cx', (i) => xScale(X[i]))
-                        .attr('cy', (i) => yScale(Y[i]))
-                        .attr('r', (i) => sizesPx[i] / 2)
-                        .attr('fill', (i) => colorFor(Zraw[i]))
-                        .attr('fill-opacity', 0.9)
-                        .on('mouseenter', function (ev, i) {
-                            d3.select(this).raise()
-                                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (sizesPx[i] / 2) * 1.25)
-                                .attr('fill-opacity', 1);
-                            const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
-                            const type = i < lenSpiral ? 'spiral' : 'bulge';
-                            const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-                            tipInner.innerHTML =
-                                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
-                                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
-                                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
-                                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
-                                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
-                            tip.style.opacity = '1';
-                        })
-                        .on('mousemove', (ev, i) => {
-                            const [mx, my] = d3.pointer(ev, container);
-                            const offsetX = 10, offsetY = 12;
-                            tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
-                        })
-                        .on('mouseleave', function () {
-                            tip.style.opacity = '0';
-                            tip.style.transform = 'translate(-9999px, -9999px)';
-                            d3.select(this)
-                                .style('filter', null)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (i2) => sizesPx[i2] / 2)
-                                .attr('fill-opacity', 0.9);
-                        }),
-                    (update) => update
-                        .attr('cx', (i) => xScale(X[i]))
-                        .attr('cy', (i) => yScale(Y[i]))
-                        .attr('r', (i) => sizesPx[i] / 2)
-                        .attr('fill', (i) => colorFor(Zraw[i]))
-                        .attr('fill-opacity', 0.9)
-                        .on('mouseenter', function (ev, i) {
-                            d3.select(this).raise()
-                                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (sizesPx[i] / 2) * 1.25)
-                                .attr('fill-opacity', 1);
-                            const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
-                            const type = i < lenSpiral ? 'spiral' : 'bulge';
-                            const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-                            tipInner.innerHTML =
-                                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
-                                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
-                                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
-                                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
-                                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
-                            tip.style.opacity = '1';
-                        })
-                        .on('mousemove', (ev, i) => {
-                            const [mx, my] = d3.pointer(ev, container);
-                            const offsetX = 10, offsetY = 12;
-                            tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
-                        })
-                        .on('mouseleave', function () {
-                            tip.style.opacity = '0';
-                            tip.style.transform = 'translate(-9999px, -9999px)';
-                            d3.select(this)
-                                .style('filter', null)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (i2) => sizesPx[i2] / 2)
-                                .attr('fill-opacity', 0.9);
-                        })
-                );
+                // ─── MEGA NUMBER — centered on same X as pack ───
+                canvas.append('text')
+                    .attr('x', cx).attr('y', megaY)
+                    .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+                    .attr('fill', '#1a1a1a')
+                    .attr('font-size', megaFS)
+                    .attr('font-weight', 900)
+                    .attr('letter-spacing', '-0.04em')
+                    .text('164.8B');
+
+                // "tokens generated" right below the number
+                const labelFS = Math.max(10, megaFS * 0.15);
+                canvas.append('text')
+                    .attr('x', cx).attr('y', megaY + megaFS * 0.44)
+                    .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+                    .attr('fill', '#999')
+                    .attr('font-size', labelFS)
+                    .attr('font-weight', 600)
+                    .attr('letter-spacing', '0.18em')
+                    .text('TOKENS GENERATED');
+
+                // Bottom stats line
+                const subText = '65 EXPERIMENTS \u00B7 1.41B DOCUMENTS';
+                const subEl = canvas.append('text')
+                    .attr('x', cx).attr('y', subY)
+                    .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+                    .attr('fill', '#555')
+                    .attr('font-size', subFS)
+                    .attr('font-weight', 500)
+                    .attr('letter-spacing', '0.14em')
+                    .text(subText);
+                // ─── LEGEND — below subtitle ───
+                const legFS = Math.max(7, subFS * 0.95);
+                const dotR = Math.max(2.5, legFS * 0.38);
+                const legY = subY + subFS * 2.6;
+                const familyCounts = {};
+                data.forEach(d => { familyCounts[d.family] = (familyCounts[d.family] || 0) + 1; });
+                const families = Object.entries(familyCounts)
+                    .sort((a, b) => b[1] - a[1])
+                    .map(([n, c]) => ({ n, c }));
+
+                const legG = canvas.append('g');
+                let tw = 0;
+                families.forEach(it => { tw += dotR * 2 + 4 + (it.n.length + 4) * legFS * 0.55 + 12; });
+                tw -= 12;
+                let lx = cx - tw / 2;
+                families.forEach(it => {
+                    legG.append('circle')
+                        .attr('cx', lx + dotR).attr('cy', legY)
+                        .attr('r', dotR).attr('fill', col[it.n]).attr('fill-opacity', 0.5);
+                    const t = legG.append('text')
+                        .attr('x', lx + dotR * 2 + 4).attr('y', legY)
+                        .attr('dominant-baseline', 'middle')
+                        .attr('fill', '#555').attr('font-size', legFS)
+                        .attr('font-weight', 500)
+                        .text(`${it.n} (${it.c})`);
+                    lx += dotR * 2 + 4 + t.node().getComputedTextLength() + 12;
+                });
+
+                // Background pill behind subtitle (per line)
+                const subBBox = subEl.node().getBBox();
+                canvas.insert('rect', 'text:first-of-type')
+                    .attr('x', subBBox.x - 8).attr('y', subBBox.y - 3)
+                    .attr('width', subBBox.width + 16).attr('height', subBBox.height + 6)
+                    .attr('rx', 4).attr('ry', 4)
+                    .attr('fill', 'white').attr('fill-opacity', 0.75);
+                // Background pill behind legend (per line)
+                const legBBox = legG.node().getBBox();
+                canvas.insert('rect', 'text:first-of-type')
+                    .attr('x', legBBox.x - 8).attr('y', legBBox.y - 3)
+                    .attr('width', legBBox.width + 16).attr('height', legBBox.height + 6)
+                    .attr('rx', 4).attr('ry', 4)
+                    .attr('fill', 'white').attr('fill-opacity', 0.75);
+
+                // ─── TOOLTIP ───
+                const tip = d3.select(container).append('div')
+                    .style('position', 'absolute').style('pointer-events', 'none')
+                    .style('background', 'rgba(255,255,255,0.96)')
+                    .style('backdrop-filter', 'blur(10px)')
+                    .style('color', '#2c3e50')
+                    .style('border', '1px solid rgba(0,0,0,0.08)')
+                    .style('border-radius', '10px').style('padding', '12px 16px')
+                    .style('font-size', Math.max(10, W * 0.011) + 'px')
+                    .style('font-family', "'Inter', system-ui, sans-serif")
+                    .style('line-height', '1.55').style('white-space', 'nowrap')
+                    .style('opacity', 0).style('transition', 'opacity .1s ease')
+                    .style('z-index', 10)
+                    .style('box-shadow', '0 4px 24px rgba(0,0,0,0.08)');
+
+                circles
+                    .on('mouseenter', function(event, d) {
+                        d3.select(this)
+                            .transition().duration(80)
+                            .attr('fill-opacity', 0.55)
+                            .attr('stroke-opacity', 0.5)
+                            .attr('stroke-width', 1.5);
+                        gB.selectAll('circle')
+                            .filter(o => o.id !== d.id)
+                            .transition().duration(80)
+                            .attr('fill-opacity', 0.06).attr('stroke-opacity', 0.03);
+                        const c = col[d.family];
+                        const dc = d.dclm >= 0 ? '#16a34a' : '#dc2626';
+                        const ec = d.edu >= 0 ? '#16a34a' : '#dc2626';
+                        tip.html(
+                            `<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">` +
+                            `<span style="width:8px;height:8px;border-radius:50%;background:${c};opacity:.6;display:inline-block"></span>` +
+                            `<span style="font-weight:700;font-size:1.05em;color:#111">${d.model}</span></div>` +
+                            `<div style="opacity:.4;font-size:.88em;margin-bottom:7px">${d.prompt} · ${d.cat} · ${d.source}</div>` +
+                            `<div style="display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:.9em">` +
+                            `<span style="opacity:.35">Output</span><span style="font-weight:600;color:#111">${d.compB.toFixed(2)}B tokens</span>` +
+                            `<span style="opacity:.35">Input</span><span>${d.promptB.toFixed(2)}B</span>` +
+                            `<span style="opacity:.35">Docs</span><span>${d.docsM.toFixed(1)}M</span>` +
+                            `<span style="opacity:.35">DCLM</span><span style="color:${dc}">${d.dclm >= 0 ? '+' : ''}${d.dclm.toFixed(3)}</span>` +
+                            `<span style="opacity:.35">Edu</span><span style="color:${ec}">${d.edu >= 0 ? '+' : ''}${d.edu.toFixed(3)}</span></div>`
+                        ).style('opacity', 1);
+                    })
+                    .on('mousemove', function(event) {
+                        const r = container.getBoundingClientRect();
+                        let tx = event.clientX - r.left + 14;
+                        let ty = event.clientY - r.top - 10;
+                        if (tx + 260 > W) tx = event.clientX - r.left - 270;
+                        if (ty < 8) ty = 8;
+                        tip.style('left', tx + 'px').style('top', ty + 'px');
+                    })
+                    .on('mouseleave', function() {
+                        gB.selectAll('circle')
+                            .transition().duration(160)
+                            .attr('fill-opacity', fillAlpha)
+                            .attr('stroke-opacity', 0.12)
+                            .attr('stroke-width', 0.7);
+                        tip.style('opacity', 0);
+                    });
             };
 
-            // First render + resize
             if (window.ResizeObserver) {
-                const ro = new ResizeObserver(() => render());
-                ro.observe(container);
+                new ResizeObserver(() => render()).observe(container);
             } else {
                 window.addEventListener('resize', render);
             }
@@ -255,4 +343,4 @@
             document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
         } else { ensureD3(bootstrap); }
     })();
-</script>
+</script>