Demo polish: Intro visuals, §3 + §6 charts readability, code-snippet UI

Intro tab (§1–§5)
- §1 Atoms: bold green base letters, two-line label (mono A/C/G/T over
full name).
- §2 Helix: redesign à la 3D banner — letters sit *between* the two
strands (helix–base–base–helix), rungs interrupted around them, faded
at crossings instead of culled so there are no bald gaps; thinner
strands, 5'/3' tags symmetric on both ends, tighter top spacing,
more breathing room at the bottom of the card. New base-pair legend:
A=T / G≡C in big green type with H-bond meta + caption.
- §3 + §4 Gene strip: horizontally centred; track-labels now have a
"LEGEND" prefix and §4 gets a duplicated legend.
- §5 Translate / fold / 3D viewer: codon-AA grid + caption centred,
fold-arrow margins trimmed, 3Dmol viewer 340 → 280 px, three-tier
protein caption (sans-serif title 19px / italic desc / mono meta with
clickable PDB link). Slow editorial spin (0.4 → 0.15), wheel events
on the viewer container forwarded to window scroll so the page no
longer traps when the cursor crosses the molecule. Loading retry on
setTimeout in case 3Dmol's deferred CDN script hasn't landed yet.

§3 Variant-effect chart (vep.js)
- viewBox grown ~1.7× (rowH 32 → 56, fonts +50%), variant names + Δ
values readable without zoom.
- Header on two rows: "LOG-LIKELIHOOD DIFFERENCE" centred above
VARIANT / ← LESS LIKELY / MORE LIKELY → so the captions stop
overlapping at column width.
- Bottom caption split into two lines (pathogenic / benign) so it no
longer truncates on the right edge.

§6 Results chart (results.js)
- Replaced the cramped 32-bar grouped-vertical plot with a horizontal
Cleveland layout: 8 task rows × 4 horizontal bars, full-width task
labels, italic-serif category gutter (Generative / Variant effect /
Perturbation / Long-context) with hairline separators on multi-row
groups.
- Two-family palette: Carbon-8B/3B in green, Evo2-7B / GENERator in
warm-neutral grey — "Carbon vs the rest" reads at a glance.
- Numerical labels only on the leader of each row (chevron tinted
Carbon-green when a Carbon model wins, neutral grey otherwise);
faint guideline behind every bar so n/a rows still read as continuous.
- Chart height doubled (viewBox H 638 → 1250) so each bar gets ~24 px
on screen instead of ~12.
- Legend variant `.chart-legend`: sentence-case Inter 12 px with bigger
rounded swatches (was mono uppercase 9 px). Removed the
"higher is better · all scores in %" trailer (the % tick + bar
direction speak for themselves).
- Generic `.legend-swatch` rule (was scoped to `.seq-label`, which
silently broke every other inline legend in the demo).

§2 / §3 Track + completion handles
- track.js: exon/intron rect 6/16 → 12/16, total H 28 → 40, vertically
centred so the track no longer reads as squashed.
- completion.js: triangular drag handles widened (TRI_HW 4 → 9) and
arrows lengthened (TRACK_TOP 8 → 12, ARROW = 12) so the prompt /
generation handles are easy to grab on touch and read clearly.

§6 UMAP default framing (umap.js)
- DEFAULT_VIEW pinned to the bottom-right pan extreme at MIN_SCALE
(with a small Y_EXTRA slack), so visitors land on the densest
framing and only pan up/left into the rest of the manifold rather
than out into empty space.

Code-snippet shared component (code-snippet.js + .css)
- Disclosure header restyled as a pill button: warm-off-white fill,
green `</>` chip on the left, chevron on the right that rotates 90°
when the panel opens. Border + bg shift to green tints on hover
/ open.
- Copy button lifted into the tabs strip (flex-aligned with the
language pills) instead of absolute-positioned.
- Highlight.js Python syntax highlighting wired in (idempotent, no-ops
if the CDN script is blocked).

Tab-lede copy
- Removed parentheses around §X chip anchors in the DNA Lab and
Carbon Recipe tab-ledes for cleaner inline reading.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/js/sections/completion.js

@@ -46,11 +46,14 @@
   }
 
   function renderTrack() {
-    const W = 1000, H = 40;
+    const W = 1000, H = 52;
     if (!gene) { els.track.innerHTML = ""; return; }
     const scaleX = (bp) => (bp / gene.length) * W;
-    // Track body sits y=8..32; arrows live at y=0..8 (start, top) and y=32..40 (end, bottom).
-    const TRACK_TOP = 8, TRACK_BOT = 32, INTRON_Y = 20, EXON_Y = 14, EXON_H = 12;
+    // Track body sits y=12..40; arrow tips reach y=0 (start/genend, top) and y=52 (end, bottom).
+    const TRACK_TOP = 12, TRACK_BOT = 40, INTRON_Y = 26, EXON_Y = 20, EXON_H = 12;
+    // Triangle half-width and arrow vertical run: bumped so the draggable
+    // handles read clearly without dominating the timeline body.
+    const TRI_HW = 9, ARROW = 12;
     let svg = "";
     // Background line through introns
     svg += `<line class="intron" x1="0" y1="${INTRON_Y}" x2="${W}" y2="${INTRON_Y}"/>`;
@@ -70,20 +73,20 @@
     // START handle: vertical line through the track body + downward triangle on top.
     svg += `<g class="handle${dragging === "start" ? " dragging" : ""}" data-role="start" transform="translate(${xStart.toFixed(1)},0)">`
         +    `<line x1="0" y1="${TRACK_TOP}" x2="0" y2="${TRACK_BOT}"/>`
-        +    `<polygon points="-4,0 4,0 0,${TRACK_TOP}"/>`
-        +    `<rect x="-8" y="0" width="16" height="${H}" fill="transparent"/>`
+        +    `<polygon points="-${TRI_HW},0 ${TRI_HW},0 0,${ARROW}"/>`
+        +    `<rect x="-${TRI_HW + 4}" y="0" width="${(TRI_HW + 4) * 2}" height="${H}" fill="transparent"/>`
         + `</g>`;
     // END handle (prompt end / gen start): vertical line + upward triangle on bottom.
     svg += `<g class="handle${dragging === "end" ? " dragging" : ""}" data-role="end" transform="translate(${xEnd.toFixed(1)},0)">`
         +    `<line x1="0" y1="${TRACK_TOP}" x2="0" y2="${TRACK_BOT}"/>`
-        +    `<polygon points="0,${TRACK_BOT} -4,${H} 4,${H}"/>`
-        +    `<rect x="-8" y="0" width="16" height="${H}" fill="transparent"/>`
+        +    `<polygon points="0,${TRACK_BOT} -${TRI_HW},${H} ${TRI_HW},${H}"/>`
+        +    `<rect x="-${TRI_HW + 4}" y="0" width="${(TRI_HW + 4) * 2}" height="${H}" fill="transparent"/>`
         + `</g>`;
     // GEN-END handle: vertical line + downward triangle on top, green.
     svg += `<g class="handle gen${dragging === "genend" ? " dragging" : ""}" data-role="genend" transform="translate(${xGenEnd.toFixed(1)},0)">`
         +    `<line x1="0" y1="${TRACK_TOP}" x2="0" y2="${TRACK_BOT}"/>`
-        +    `<polygon points="-4,0 4,0 0,${TRACK_TOP}"/>`
-        +    `<rect x="-8" y="0" width="16" height="${H}" fill="transparent"/>`
+        +    `<polygon points="-${TRI_HW},0 ${TRI_HW},0 0,${ARROW}"/>`
+        +    `<rect x="-${TRI_HW + 4}" y="0" width="${(TRI_HW + 4) * 2}" height="${H}" fill="transparent"/>`
         + `</g>`;
     els.track.innerHTML = svg;
   }

assets/js/sections/intro.js

@@ -31,7 +31,7 @@
     return e;
   }
   function text(parent, x, y, str, opts = {}) {
-    const t = el("text", {
+    const attrs = {
       x, y,
       "text-anchor": opts.anchor || "middle",
       "dominant-baseline": opts.baseline || "central",
@@ -39,7 +39,9 @@
       "font-size": opts.size || 11,
       "font-weight": opts.weight || 500,
       fill: opts.fill || STROKE,
-    }, parent);
+    };
+    if (opts.opacity != null) attrs["fill-opacity"] = opts.opacity;
+    const t = el("text", attrs, parent);
     t.textContent = str;
     return t;
   }
@@ -78,7 +80,7 @@
   }
   function drawAtomLabel(parent, a) {
     el("circle", { cx: a.x, cy: a.y, r: 7, fill: "#fff", stroke: "none" }, parent);
-    text(parent, a.x, a.y, a.label, { size: 9.5, weight: 500 });
+    text(parent, a.x, a.y, a.label, { size: 9.5, weight: 600, fill: GREEN });
   }
   function molecule(spec) {
     const svg = el("svg", { viewBox: spec.viewBox, xmlns: NS });
@@ -163,15 +165,19 @@
   // ======================================================================
   function buildHelix(slot) {
     // 20 bp over 2 turns at ~10 bp / turn (matches real B-DNA scale).
-    const W = 480, H = 142;
-    const yc = 72, amp = 30, period = 240;
+    // Vertical layout: brin paths oscillate between y = yc-amp and y = yc+amp
+    // (= 22..82). 5'/3' end tags add ySpread+2 = 14px of slack above and
+    // below those bounds. H = 96 sits 4px below the lower-most label so the
+    // SVG ends almost flush with the legend underneath instead of leaving
+    // a fat band of whitespace.
+    const W = 480, H = 96;
+    const yc = 52, amp = 30, period = 240;
     const phaseA = 0, phaseB = Math.PI;
     const svg = el("svg", { viewBox: `0 0 ${W} ${H}`, xmlns: NS }, slot);
 
     function yAt(x, phase) { return yc + amp * Math.sin((2 * Math.PI * x) / period + phase); }
 
     const rungSpacing = 24;
-    const minSep = 16;
     const topSeq = "ATCGGCATCGTAGCCAGTCA";
     const comp = { A: "T", T: "A", C: "G", G: "C" };
     const rungs = [];
@@ -179,24 +185,63 @@
     for (let x = rungSpacing / 2; x < W && seqIdx < topSeq.length; x += rungSpacing) {
       const yA = yAt(x, phaseA);
       const yB = yAt(x, phaseB);
-      const sep = Math.abs(yA - yB);
-      if (sep < minSep) continue;
       rungs.push({
         x,
         yTop: Math.min(yA, yB),
         yBot: Math.max(yA, yB),
+        sep: Math.abs(yA - yB),
         top: topSeq[seqIdx],
         bot: comp[topSeq[seqIdx]],
       });
       seqIdx++;
     }
+    // Depth fade: rungs at the helix waist (small sep) tint towards
+    // near-transparent so they read as "behind / out of focus" instead
+    // of as front-and-centre rungs. This fills the otherwise-empty gaps
+    // at the strand crossings (was previously skipping those rungs
+    // outright with a hard minSep filter) while keeping the visible
+    // letters concentrated where the helix is wide. Smoothstep echoes
+    // the depth-tint logic in the banner helix.
+    function fadeForSep(sep) {
+      const lo = 12, hi = 28;
+      const t = Math.max(0, Math.min(1, (sep - lo) / (hi - lo)));
+      // smoothstep, then map to [0.18, 1.0]: the floor stays just visible
+      // even at full crossing so the rung never reads as a hard gap.
+      const ease = t * t * (3 - 2 * t);
+      return 0.18 + 0.82 * ease;
+    }
+
+    // Letter glyphs sit *between* the strands (not on them), echoing the
+    // banner helix's [strand]─letter─letter─[strand] layout. The two letters
+    // along each rung are pinned at 25% / 75% of the rung's vertical span so
+    // they sit clearly inside the rung rather than on either strand.
+    const LETTER_GAP   = 6;  // half-height of the slot punched out around each glyph
+    const STRAND_HALO  = 3;  // pull rungs back from the strand path so they don't kiss it
+    function rungLetterYs(r) {
+      const sep = r.yBot - r.yTop;
+      return [r.yTop + sep * 0.25, r.yTop + sep * 0.75];
+    }
 
-    // 1. Rungs behind strands
+    // 1. Rungs behind strands. Each rung becomes up to three short segments,
+    //    interrupted around each letter so the letter reads as sitting *in*
+    //    the rung. Rungs at the helix waist still get drawn but with their
+    //    opacity tapered via fadeForSep so the crossings don't read as
+    //    bald gaps.
     for (const r of rungs) {
-      el("line", {
-        x1: r.x, y1: r.yTop + 7, x2: r.x, y2: r.yBot - 7,
-        stroke: GREEN, "stroke-width": 1.4, "stroke-opacity": 0.5,
-      }, svg);
+      const fade = fadeForSep(r.sep);
+      const [yA, yB] = rungLetterYs(r);
+      const segs = [
+        [r.yTop + STRAND_HALO, yA - LETTER_GAP],
+        [yA + LETTER_GAP,      yB - LETTER_GAP],
+        [yB + LETTER_GAP,      r.yBot - STRAND_HALO],
+      ];
+      for (const [y1, y2] of segs) {
+        if (y2 - y1 < 1) continue;
+        el("line", {
+          x1: r.x, y1, x2: r.x, y2,
+          stroke: GREEN, "stroke-width": 1.4, "stroke-opacity": 0.55 * fade,
+        }, svg);
+      }
     }
 
     // 2. Strand paths
@@ -208,22 +253,38 @@
       }
       return d;
     }
-    el("path", { d: pathD(phaseA), fill: "none", stroke: STROKE, "stroke-width": 2, "stroke-linecap": "round" }, svg);
-    el("path", { d: pathD(phaseB), fill: "none", stroke: STROKE, "stroke-width": 2, "stroke-linecap": "round" }, svg);
+    el("path", { d: pathD(phaseA), fill: "none", stroke: STROKE, "stroke-width": 1.5, "stroke-linecap": "round" }, svg);
+    el("path", { d: pathD(phaseB), fill: "none", stroke: STROKE, "stroke-width": 1.5, "stroke-linecap": "round" }, svg);
 
-    // 3. Letter haloes + glyphs
+    // 3. Letter glyphs themselves (no haloes, since the rung is already
+    //    interrupted around each letter). fade tracks fadeForSep so the
+    //    glyphs at the crossings sit as ghosted "out of focus" letters
+    //    rather than disappearing entirely — fills the visual gap at the
+    //    helix waist without competing with the rungs at full opacity.
     for (const r of rungs) {
-      el("circle", { cx: r.x, cy: r.yTop, r: 7.5, fill: "#fff", stroke: STROKE, "stroke-width": 0.8 }, svg);
-      text(svg, r.x, r.yTop, r.top, { mono: true, size: 10, weight: 600 });
-      el("circle", { cx: r.x, cy: r.yBot, r: 7.5, fill: "#fff", stroke: STROKE, "stroke-width": 0.8 }, svg);
-      text(svg, r.x, r.yBot, r.bot, { mono: true, size: 10, weight: 600 });
+      const fade = fadeForSep(r.sep);
+      const [yA, yB] = rungLetterYs(r);
+      text(svg, r.x, yA, r.top, { mono: true, size: 10, weight: 600, fill: GREEN, opacity: fade });
+      text(svg, r.x, yB, r.bot, { mono: true, size: 10, weight: 600, fill: GREEN, opacity: fade });
     }
 
-    // 5′ / 3′ end tags
-    text(svg, 6, yAt(6, phaseA) - 12, "5′", { mono: true, size: 9, weight: 500, fill: FAINT });
-    text(svg, W - 6, yAt(W - 6, phaseA) - 12, "3′", { mono: true, size: 9, weight: 500, fill: FAINT });
-    text(svg, 6, yAt(6, phaseB) + 14, "3′", { mono: true, size: 9, weight: 500, fill: FAINT });
-    text(svg, W - 6, yAt(W - 6, phaseB) + 14, "5′", { mono: true, size: 9, weight: 500, fill: FAINT });
+    // 5′ / 3′ end tags. Each label is placed *outside* the higher/lower
+    // strand at that x — i.e. min/max over the two strands at the edge —
+    // rather than tied to one specific strand. The previous logic pinned
+    // 5′ to phaseA (above) and 3′ to phaseB (below), which made the two
+    // labels collapse vertically wherever the strands happened to cross
+    // close to the SVG edge (left side: ~17px apart) while staying nicely
+    // spread on the side where they didn't (right side: ~35px). Using
+    // min/max instead gives a symmetric ~35px gap on both ends regardless
+    // of where in the helix cycle the edge falls.
+    const ySpread = 12;
+    const yA0 = yAt(6, phaseA),     yB0 = yAt(6, phaseB);
+    const yA1 = yAt(W - 6, phaseA), yB1 = yAt(W - 6, phaseB);
+    const endTagOpts = { mono: true, size: 9, weight: 400, fill: FAINT, opacity: 0.55 };
+    text(svg, 6,     Math.min(yA0, yB0) - ySpread,     "5′", endTagOpts);
+    text(svg, W - 6, Math.min(yA1, yB1) - ySpread,     "3′", endTagOpts);
+    text(svg, 6,     Math.max(yA0, yB0) + ySpread + 2, "3′", endTagOpts);
+    text(svg, W - 6, Math.max(yA1, yB1) + ySpread + 2, "5′", endTagOpts);
   }
 
   root.querySelectorAll("[data-helix]").forEach(buildHelix);
@@ -247,7 +308,15 @@
   function init3DViewer() {
     if (viewerInitialised) return;
     const container = root.querySelector("#cd-protein-3d");
-    if (!container || !window.$3Dmol) return;
+    if (!container) return;
+    // 3Dmol is loaded as <script defer> from a CDN, so when intro.js runs
+    // synchronously during the body parse the global may not be ready yet.
+    // Retry on a short timer rather than giving up, otherwise the viewer
+    // never initialises and the panel is stuck on "loading hemoglobin…".
+    if (!window.$3Dmol) {
+      setTimeout(init3DViewer, 50);
+      return;
+    }
     viewerInitialised = true;
 
     const loading = container.querySelector(".cd-protein-3d-loading");
@@ -270,7 +339,11 @@
         viewer.setStyle({ resn: "HEM" }, { stick: { color: "#b8862c", radius: 0.22 } });
         viewer.addStyle({ resn: "HEM", elem: "FE" }, { sphere: { color: "#cd5c2a", radius: 1.0 } });
         viewer.zoomTo();
-        viewer.spin("y", 0.4);
+        // Slow editorial spin: 0.15 deg / tick at 3Dmol's ~30 fps render
+        // = ~4.5 deg/sec, a full rotation every ~80 seconds. Slow enough
+        // that the molecule reads as "alive" in peripheral vision but
+        // never demands attention while the visitor reads the prose.
+        viewer.spin("y", 0.15);
         viewer.render();
         if (loading) loading.remove();
       })
@@ -278,6 +351,18 @@
         console.error("intro: failed to load hemoglobin PDB:", err);
         if (loading) loading.textContent = "failed to load model";
       });
+
+    // 3Dmol installs a wheel listener on its internal canvas that zooms
+    // the camera AND preventDefaults the page scroll, which traps the
+    // page scroll whenever the cursor is over the viewer (the molecule
+    // sits mid-page so this hits constantly). Intercept wheel on the
+    // container in capture phase and stopImmediatePropagation so 3Dmol
+    // never sees the event — no preventDefault → the browser's native
+    // scroll (with trackpad momentum etc.) runs untouched. Pan / rotate
+    // (mouse-drag) are unaffected. Same pattern as §5 folding.
+    container.addEventListener("wheel", (e) => {
+      e.stopImmediatePropagation();
+    }, { capture: true, passive: true });
   }
   function maybeInit() {
     if (root.classList.contains("active")) init3DViewer();

assets/js/sections/results.js

@@ -1,114 +1,196 @@
 // =========================================================================
-// §12, Results: training-free benchmark barplot
+// §12, Results: training-free benchmark — horizontal Cleveland bar chart
 // =========================================================================
 // Numbers come straight from HuggingFaceBio/plots-release-code/barplot/barplot.py
 // (the canonical paper figure source). NIAH @ 393 kbp matches the
 // niah_heatmap CSV (yarn4x · plain · 65,536 tokens).
+//
+// Layout rationale: the previous vertical grouped-bar plot crammed 32 bars
+// into ~750 px of column width; differences were visually crushed and labels
+// were two-line mono at 10 px. The horizontal Cleveland format gives each
+// task its own row with a fully readable label, lets the reader compare
+// models at a glance per row, and keeps the "Carbon vs baselines" message
+// front-and-centre via a two-family palette (greens for Carbon, neutrals
+// for the rest).
 (function initDemo12() {
   const host = document.getElementById("d12-bars");
   if (!host) return;
 
+  // Two-family palette: Carbon variants in editorial green (the demo's brand
+  // hue), baselines in warm neutral grey. The point is that the reader can
+  // tell "Carbon vs the rest" at a glance — the previous brown/beige pair
+  // for Evo2 / GENERator was too close in luminance to the green pair for
+  // that to register.
   const MODELS = [
-    { name: "Carbon 8B",       color: "#1A7A40" },
-    { name: "Carbon 3B",       color: "#6DBF7E" },
-    { name: "Evo2-7B",         color: "#8C7355" },
-    { name: "GENERator-v2 3B", color: "#C8BC99" },
+    { name: "Carbon-8B",       color: "#1A7A40", isCarbon: true  },
+    { name: "Carbon-3B",       color: "#6DBF7E", isCarbon: true  },
+    { name: "Evo2-7B",         color: "#5A5A56", isCarbon: false },
+    { name: "GENERator-v2 3B", color: "#B5B0A6", isCarbon: false },
   ];
 
-  // [task short-label, category, scores by model in same order as MODELS]
-  // null = not evaluated / not applicable
+  // Rows are ordered by capability axis. Category strings group consecutive
+  // rows; the renderer collapses runs of identical category into a single
+  // italic gutter label on the left.
   const ROWS = [
-    { task: "Sequence\nRecovery",   cat: "Generative",       vals: [64.03, 61.50, 59.83, 55.72] },
-    { task: "BRCA2",                cat: "Variant effect",   vals: [85.60, 84.64, 83.52, 80.57] },
-    { task: "TraitGym\nMendelian",  cat: "Variant effect",   vals: [36.81, 34.24, 37.36, 20.68] },
-    { task: "ClinVar\nCoding",      cat: "Variant effect",   vals: [93.43, 93.30, 93.70, 91.98] },
-    { task: "ClinVar\nNon-coding",  cat: "Variant effect",   vals: [91.98, 91.56, 90.03, 90.61] },
-    { task: "Triplet\nExpansion",   cat: "Perturbation",     vals: [65.62, 65.94, 63.78, 49.82] },
-    { task: "Synonymous\nCodons",   cat: "Perturbation",     vals: [92.18, 82.78, 84.90, 74.08] },
-    { task: "Genome-NIAH\n393 kbp", cat: "Long-context",     vals: [86.00, 79.00, 80.00, null] },
+    { task: "Sequence recovery",      cat: "Generative",     vals: [64.03, 61.50, 59.83, 55.72] },
+    { task: "BRCA2",                  cat: "Variant effect", vals: [85.60, 84.64, 83.52, 80.57] },
+    { task: "TraitGym Mendelian",     cat: "Variant effect", vals: [36.81, 34.24, 37.36, 20.68] },
+    { task: "ClinVar coding",         cat: "Variant effect", vals: [93.43, 93.30, 93.70, 91.98] },
+    { task: "ClinVar non-coding",     cat: "Variant effect", vals: [91.98, 91.56, 90.03, 90.61] },
+    { task: "Triplet expansion",      cat: "Perturbation",   vals: [65.62, 65.94, 63.78, 49.82] },
+    { task: "Synonymous codons",      cat: "Perturbation",   vals: [92.18, 82.78, 84.90, 74.08] },
+    { task: "Genome-NIAH · 393 kbp",  cat: "Long-context",   vals: [86.00, 79.00, 80.00, null] },
   ];
 
+  // ---- Render ----------------------------------------------------------
+  // Layout constants. The SVG renders at viewBox W×H but scales to fit the
+  // host width via preserveAspectRatio. Heights are computed from row count
+  // so adding/removing tasks doesn't require manual H tweaks.
+  //
+  // Viewbox aspect ratio: at the previous (1280×638) the rendered chart sat
+  // at ~778×388 px in the two-column layout — readable but cramped. We
+  // double the internal heights (barH, gaps, fonts) so the viewBox grows
+  // to ~1280×1250, which scales to a ~778×760 rendered chart: roughly 2×
+  // taller, which makes individual bars and labels comfortable to read.
   function renderBars() {
-    const W = 1280, H = 540;
-    const padL = 56, padR = 24, padT = 24, padB = 90;
-    const innerW = W - padL - padR;
-    const innerH = H - padT - padB;
-    const groupW = innerW / ROWS.length;
-    const groupBarW = groupW * 0.76;
-    const barGap = 2;
-    const barW = (groupBarW - (MODELS.length - 1) * barGap) / MODELS.length;
-
-    let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMinYMin meet" style="display:block;width:100%;height:auto;background:#fff;border:1px solid #eee">`;
-
-    // y-axis gridlines + ticks (0-100, every 20)
+    const W = 1280;
+    const padL = 24;       // outer left padding (svg edge → category gutter)
+    const catW = 130;      // category gutter width (italic serif label)
+    const taskW = 240;     // task label column width
+    const padR = 90;       // room for value label at end of bar
+    const padT = 60;       // top padding (axis lives here)
+    const padB = 36;       // bottom padding
+
+    const barH = 24;       // bar thickness
+    const barGap = 5;      // gap between bars within a task
+    const rowH = MODELS.length * barH + (MODELS.length - 1) * barGap; // 4*24 + 3*5 = 111
+    const taskGap = 26;    // gap between consecutive tasks in same category
+    const catGap = 42;     // extra gap between category groups
+
+    // Compute total H by walking rows + inserting catGap when category changes.
+    let bodyH = 0;
+    ROWS.forEach((row, i) => {
+      bodyH += rowH;
+      if (i < ROWS.length - 1) {
+        bodyH += (ROWS[i + 1].cat === row.cat) ? taskGap : catGap;
+      }
+    });
+    const H = padT + bodyH + padB;
+
+    const barsX = padL + catW + taskW;             // x where bars start
+    const barsW = W - barsX - padR;                // width of bars zone
+    const xForVal = (v) => barsX + barsW * (v / 100);
+
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMinYMin meet" style="display:block;width:100%;height:auto;background:#fff">`;
+
+    // ---- Axis (top) --------------------------------------------------
+    // Light gridlines every 20%, plus a baseline at the left edge. The
+    // x-axis ticks sit at the top of the chart so they don't get lost in
+    // the row separators below. We skip the "0" label because the strong
+    // baseline at x=0 already conveys it (and the label competed visually
+    // with the row labels just to its left).
+    const axisY = padT - 28;
     for (let tick = 0; tick <= 100; tick += 20) {
-      const y = padT + innerH * (1 - tick / 100);
-      if (tick !== 0) {
-        svg += `<line x1="${padL}" y1="${y}" x2="${W - padR}" y2="${y}" stroke="#eee" stroke-width="1"/>`;
+      const x = xForVal(tick);
+      svg += `<line x1="${x}" y1="${padT - 10}" x2="${x}" y2="${padT + bodyH}" stroke="#eee" stroke-width="1"/>`;
+      if (tick > 0) {
+        svg += `<text x="${x}" y="${axisY}" font-family="JetBrains Mono" font-size="14" fill="#888" text-anchor="middle">${tick}</text>`;
       }
-      svg += `<text x="${padL - 10}" y="${y + 4}" font-family="JetBrains Mono" font-size="10" fill="#888" text-anchor="end">${tick}</text>`;
     }
-    // axes
-    svg += `<line x1="${padL}" y1="${padT}" x2="${padL}" y2="${padT + innerH}" stroke="#1f1f1d" stroke-width="1"/>`;
-    svg += `<line x1="${padL}" y1="${padT + innerH}" x2="${W - padR}" y2="${padT + innerH}" stroke="#1f1f1d" stroke-width="1"/>`;
+    svg += `<text x="${xForVal(100) + 12}" y="${axisY}" font-family="JetBrains Mono" font-size="14" fill="#888" text-anchor="start">%</text>`;
+
+    // Strong baseline at x=0 anchors the bars visually.
+    svg += `<line x1="${xForVal(0)}" y1="${padT - 6}" x2="${xForVal(0)}" y2="${padT + bodyH}" stroke="#1f1f1d" stroke-width="1.5"/>`;
+
+    // ---- Group rows by category for the gutter labels ----------------
+    const groups = [];
+    ROWS.forEach((row, i) => {
+      const last = groups[groups.length - 1];
+      if (last && last.cat === row.cat) last.rows.push(i);
+      else groups.push({ cat: row.cat, rows: [i] });
+    });
+
+    // ---- Render rows --------------------------------------------------
+    let y = padT;
+    const rowYs = []; // remember each task's top y for category bracket pass
 
-    // Group separators + bars + per-task best-star
     ROWS.forEach((row, ri) => {
-      const groupLeft = padL + ri * groupW;
-      if (ri > 0) {
-        svg += `<line x1="${groupLeft}" y1="${padT}" x2="${groupLeft}" y2="${padT + innerH}" stroke="#f0f0f0" stroke-width="1"/>`;
-      }
-      const barsLeft = groupLeft + (groupW - groupBarW) / 2;
+      rowYs.push(y);
+      const rowMid = y + rowH / 2;
       const present = row.vals.filter(v => v !== null);
       const best = Math.max(...present);
 
+      // Task label (left of bars). Sans-serif, slightly bolder so it reads
+      // as the row's title rather than as caption.
+      svg += `<text x="${barsX - 16}" y="${rowMid + 5}" font-family="Inter, sans-serif" font-size="18" font-weight="500" fill="#1f1f1d" text-anchor="end">${escapeXml(row.task)}</text>`;
+
+      // Bars + values for each model in the row.
       MODELS.forEach((m, mi) => {
+        const barY = y + mi * (barH + barGap);
         const v = row.vals[mi];
-        const x = barsLeft + mi * (barW + barGap);
+
+        // Faint guideline behind the bar so the row reads as continuous
+        // even when a model has a short bar or null.
+        svg += `<line x1="${xForVal(0)}" y1="${barY + barH / 2}" x2="${xForVal(100)}" y2="${barY + barH / 2}" stroke="#f5f5f1" stroke-width="1"/>`;
+
         if (v === null) {
-          svg += `<text x="${x + barW / 2}" y="${padT + innerH + 14}" font-family="JetBrains Mono" font-size="9" fill="#aaa" text-anchor="middle">n/a</text>`;
+          // n/a marker: dashed segment + faint label, in line with baseline
+          // grey so it doesn't pop visually.
+          svg += `<line x1="${xForVal(0)}" y1="${barY + barH / 2}" x2="${xForVal(100)}" y2="${barY + barH / 2}" stroke="#d8d4c8" stroke-width="1.5" stroke-dasharray="3 4"/>`;
+          svg += `<text x="${xForVal(100) + 12}" y="${barY + barH / 2 + 5}" font-family="JetBrains Mono" font-size="14" fill="#aaa" text-anchor="start">n/a</text>`;
           return;
         }
-        const h = innerH * (v / 100);
-        const y = padT + innerH - h;
-        svg += `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${barW.toFixed(1)}" height="${h.toFixed(1)}" fill="${m.color}"/>`;
-        // value label on top of bar
-        svg += `<text x="${(x + barW / 2).toFixed(1)}" y="${(y - 4).toFixed(1)}" font-family="JetBrains Mono" font-size="9" fill="${m.color}" text-anchor="middle" font-weight="500">${v.toFixed(1)}</text>`;
-        // tiny ▲ on the best bar in this group
-        if (v === best) {
-          svg += `<text x="${(x + barW / 2).toFixed(1)}" y="${(y - 16).toFixed(1)}" font-family="JetBrains Mono" font-size="9" fill="#1f1f1d" text-anchor="middle">▲</text>`;
-        }
-      });
 
-      // task short label below x-axis (two lines)
-      const labelX = groupLeft + groupW / 2;
-      const lines = row.task.split("\n");
-      lines.forEach((line, li) => {
-        svg += `<text x="${labelX.toFixed(1)}" y="${(padT + innerH + 18 + li * 13).toFixed(1)}" font-family="JetBrains Mono" font-size="10" fill="#1f1f1d" text-anchor="middle">${line}</text>`;
+        const w = xForVal(v) - xForVal(0);
+        svg += `<rect x="${xForVal(0).toFixed(1)}" y="${barY}" width="${w.toFixed(1)}" height="${barH}" fill="${m.color}" rx="2"/>`;
+
+        // Value label at the end of the bar. Best is bold + dark with a
+        // chevron; chevron is tinted Carbon-green when a Carbon model leads
+        // (subtle editorial flair appuying the "Carbon leads on 6/8" line)
+        // and stays neutral grey when Evo2 wins, to read honestly.
+        const isBest = v === best;
+        const valColor = isBest ? "#1f1f1d" : "#999";
+        const valWeight = isBest ? 600 : 400;
+        const chevronColor = isBest ? (m.isCarbon ? "#1A7A40" : "#5A5A56") : null;
+        const chevron = chevronColor ? `<tspan fill="${chevronColor}" font-weight="700">▸ </tspan>` : "";
+        svg += `<text x="${(xForVal(v) + 10).toFixed(1)}" y="${barY + barH / 2 + 5}" font-family="JetBrains Mono" font-size="15" font-weight="${valWeight}" fill="${valColor}" text-anchor="start">${chevron}${v.toFixed(1)}</text>`;
       });
-    });
 
-    // Category brackets along the bottom
-    const cats = [];
-    ROWS.forEach((row, ri) => {
-      const last = cats[cats.length - 1];
-      if (last && last.cat === row.cat) { last.end = ri; }
-      else { cats.push({ cat: row.cat, start: ri, end: ri }); }
+      // Advance y. catGap if next row belongs to a new category.
+      y += rowH;
+      if (ri < ROWS.length - 1) {
+        y += (ROWS[ri + 1].cat === row.cat) ? taskGap : catGap;
+      }
     });
-    const bracketY = padT + innerH + 56;
-    cats.forEach(c => {
-      const x1 = padL + c.start * groupW + 6;
-      const x2 = padL + (c.end + 1) * groupW - 6;
-      svg += `<line x1="${x1}" y1="${bracketY}" x2="${x2}" y2="${bracketY}" stroke="#888" stroke-width="1"/>`;
-      svg += `<line x1="${x1}" y1="${bracketY - 3}" x2="${x1}" y2="${bracketY + 3}" stroke="#888" stroke-width="1"/>`;
-      svg += `<line x1="${x2}" y1="${bracketY - 3}" x2="${x2}" y2="${bracketY + 3}" stroke="#888" stroke-width="1"/>`;
-      const mid = (x1 + x2) / 2;
-      svg += `<text x="${mid.toFixed(1)}" y="${bracketY + 16}" font-family="Georgia, serif" font-size="11" font-style="italic" fill="#666" text-anchor="middle">${c.cat}</text>`;
+
+    // ---- Category gutter labels -------------------------------------
+    // One italic serif label per category, vertically centred on its run
+    // of rows. Pure typographic separator — no boxes, no rules — to keep
+    // the chart calm.
+    groups.forEach(g => {
+      const yTop = rowYs[g.rows[0]];
+      const yBot = rowYs[g.rows[g.rows.length - 1]] + rowH;
+      const yMid = (yTop + yBot) / 2 + 6;
+      svg += `<text x="${padL + 4}" y="${yMid}" font-family="Georgia, serif" font-size="18" font-style="italic" fill="#666" text-anchor="start">${escapeXml(g.cat)}</text>`;
+      // Subtle vertical hairline to bracket the category run when it has
+      // more than one row. Skip for solo-row categories (Generative,
+      // Long-context) — a hairline next to a single row reads as noise.
+      if (g.rows.length > 1) {
+        svg += `<line x1="${padL + catW - 20}" y1="${yTop + 4}" x2="${padL + catW - 20}" y2="${yBot - 4}" stroke="#d8d4c8" stroke-width="1.5"/>`;
+      }
     });
 
     svg += `</svg>`;
     host.innerHTML = svg;
   }
 
+  // SVG-safe text. The dataset is hard-coded so this is mostly defensive,
+  // but cheap insurance if someone later adds a label with "&" or "<".
+  function escapeXml(s) {
+    return String(s).replace(/[<>&"']/g, c => ({
+      "<": "&lt;", ">": "&gt;", "&": "&amp;", '"': "&quot;", "'": "&#39;"
+    }[c]));
+  }
+
   renderBars();
 })();

assets/js/sections/track.js

@@ -26,17 +26,18 @@
   const MAX_WINDOW = 24000;   // matches scripts/precompute.py TRACK_MAX_BP
 
   function renderTrack(scoredLen) {
-    const W = 1000, H = 28;
+    const W = 1000, H = 40;
     if (!gene) { els.track.innerHTML = ""; return; }
     const total = scoredLen || gene.length;
     const scaleX = (bp) => (bp / total) * W;
+    const EXON_H = 16, EXON_Y = (H - EXON_H) / 2;  // vertically centered
     let svg = "";
     svg += `<line class="intron" x1="0" y1="${H/2}" x2="${W}" y2="${H/2}"/>`;
     for (const e of gene.exons) {
       if (e.start > total) continue;
       const x = scaleX(e.start);
       const w = Math.max(1, scaleX(Math.min(e.end, total) - e.start));
-      svg += `<rect class="exon" x="${x.toFixed(1)}" y="6" width="${w.toFixed(1)}" height="16"/>`;
+      svg += `<rect class="exon" x="${x.toFixed(1)}" y="${EXON_Y}" width="${w.toFixed(1)}" height="${EXON_H}"/>`;
     }
     els.track.innerHTML = svg;
   }

assets/js/sections/umap.js

@@ -161,7 +161,18 @@
   // zoom-out (scale ≥ MIN_SCALE in the wheel handler) so visitors can pan
   // around but can never zoom *back* into the empty-margins view.
   const MIN_SCALE = 1.35;
-  const DEFAULT_VIEW = { tx: -0.18, ty: 0.15, scale: MIN_SCALE };
+  // Default framing = the bottom-right *extreme* reachable by pan at MIN_SCALE.
+  // clampPan() allows |tx|, |ty| ≤ 0.92·scale − 1 before whitespace would creep
+  // in at an edge; pinning the default to that exact corner means visitors land
+  // on the densest framing possible, and from the reset state they can only
+  // pan up / left into the rest of the layout — never down / right into empty
+  // space they shouldn't be looking at.
+  // Y_EXTRA: extra downward pan slack (in NDC) so the editorial framing can sit
+  // a touch below the natural bottom clamp — trades a thin sliver of whitespace
+  // along the bottom for a heavier anchor on the bottom-right clusters.
+  const PAN_EDGE = 0.92 * MIN_SCALE - 1;
+  const Y_EXTRA = 0.08;
+  const DEFAULT_VIEW = { tx: -PAN_EDGE, ty: PAN_EDGE + Y_EXTRA, scale: MIN_SCALE };
   let view = { ...DEFAULT_VIEW };
   let dpr = Math.max(1, window.devicePixelRatio || 1);
   let needsRedraw = false;
@@ -721,7 +732,11 @@
       view.tx = 0; view.ty = 0;
     } else {
       view.tx = Math.max(-m, Math.min(m, view.tx));
-      view.ty = Math.max(-m, Math.min(m, view.ty));
+      // Asymmetric Y clamp: +Y_EXTRA of slack on the downward side so the
+      // editorial default framing (ty = PAN_EDGE + Y_EXTRA) survives a redraw
+      // without snapping back to PAN_EDGE. Visitors can also pan that extra
+      // sliver down themselves — accepted whitespace cost.
+      view.ty = Math.max(-m, Math.min(m + Y_EXTRA, view.ty));
     }
   }
 

assets/js/sections/vep.js

@@ -224,7 +224,19 @@
 
   function renderForestBars() {
     if (!VARIANTS) return;
-    const W = 1000, rowH = 32, padL = 280, padR = 60, padT = 36, padB = 50;
+    // Layout sized so the SVG renders comfortably tall in the right-hand
+    // column of the §3 two-col layout (~828 px of width). The previous
+    // (W=1000, rowH=32) viewBox was ~3.6:1 wide which scaled down to ~230 px
+    // tall at column width, making the per-row text and bar values squint-
+    // small. Bumping rowH and font sizes here, and padding generously,
+    // gets us to roughly a 2.2:1 viewBox → ~380 px rendered, where the
+    // variant names and ±Δ values are readable without zoom.
+    //
+    // padT carries two stacked header lines (axis title above, then
+    // VARIANT / ← LESS LIKELY / MORE LIKELY → row), so it has to be
+    // a bit taller than a single-line caption would need. padB carries
+    // the tick row + a two-line bottom caption.
+    const W = 1000, rowH = 56, padL = 320, padR = 80, padT = 72, padB = 90;
     // Sort variants by Δ ascending (most surprising-to-the-model first), but
     // keep unscored ones at the bottom in their original order.
     const indexed = VARIANTS.map((v, i) => ({ v, idx: i, d: cache[v.rs] ? cache[v.rs].altSum - cache[v.rs].refSum : null }));
@@ -260,26 +272,34 @@
       // gray → charcoal
       return `rgb(${lerp(170, 40, t)},${lerp(170, 40, t)},${lerp(170, 40, t)})`;
     }
-    const VALUE_INSIDE_MIN = 44;
+    const VALUE_INSIDE_MIN = 64;
+    const BAR_H = 22;
 
     let svg = "";
 
     // --- Top axis: directional caption ---
-    svg += `<text x="${padL.toFixed(1)}" y="14" font-family="JetBrains Mono" font-size="9" fill="#bc2e25" letter-spacing="1">← MUTATION LESS LIKELY</text>`;
-    svg += `<text x="${(W - padR).toFixed(1)}" y="14" font-family="JetBrains Mono" font-size="9" fill="#317f3f" letter-spacing="1" text-anchor="end">MUTATION MORE LIKELY →</text>`;
-    svg += `<text x="${center.toFixed(1)}" y="14" font-family="JetBrains Mono" font-size="9" fill="#888" text-anchor="middle" letter-spacing="1">log-likelihood difference</text>`;
-    svg += `<text x="${(padL - 12).toFixed(1)}" y="14" font-family="JetBrains Mono" font-size="9" fill="#888" text-anchor="end" letter-spacing="1">VARIANT</text>`;
+    // Two lines: the axis title sits above on its own row, then VARIANT
+    // / ← LESS LIKELY / MORE LIKELY → share the row below. Splitting these
+    // avoids the centre title colliding with the two side-arrow captions
+    // when the chart renders at column width (~778 px on screen, where
+    // viewBox 1000 px squashes everything to ~0.78 of its declared size).
+    const capTopY1 = 20;  // axis title row
+    const capTopY2 = 46;  // VARIANT / arrows row
+    svg += `<text x="${center.toFixed(1)}" y="${capTopY1}" font-family="JetBrains Mono" font-size="13" fill="#666" text-anchor="middle" letter-spacing="2" font-weight="500">LOG-LIKELIHOOD DIFFERENCE</text>`;
+    svg += `<text x="${(padL - 16).toFixed(1)}" y="${capTopY2}" font-family="JetBrains Mono" font-size="12" fill="#888" text-anchor="end" letter-spacing="1">VARIANT</text>`;
+    svg += `<text x="${padL.toFixed(1)}" y="${capTopY2}" font-family="JetBrains Mono" font-size="12" fill="#bc2e25" letter-spacing="1">← MUTATION LESS LIKELY</text>`;
+    svg += `<text x="${(W - padR).toFixed(1)}" y="${capTopY2}" font-family="JetBrains Mono" font-size="12" fill="#317f3f" letter-spacing="1" text-anchor="end">MUTATION MORE LIKELY →</text>`;
 
     // Faint shading: pathogenic-expected zone (left of 0)
-    svg += `<rect x="${padL.toFixed(1)}" y="${(padT - 4).toFixed(1)}" width="${(center - padL).toFixed(1)}" height="${(ordered.length * rowH + 8).toFixed(1)}" fill="#bc2e25" opacity="0.04"/>`;
+    svg += `<rect x="${padL.toFixed(1)}" y="${(padT - 6).toFixed(1)}" width="${(center - padL).toFixed(1)}" height="${(ordered.length * rowH + 12).toFixed(1)}" fill="#bc2e25" opacity="0.04"/>`;
 
     // Center line
-    svg += `<line x1="${center}" y1="${padT - 4}" x2="${center}" y2="${H - padB + 4}" stroke="#bbb" stroke-width="1"/>`;
+    svg += `<line x1="${center}" y1="${padT - 6}" x2="${center}" y2="${H - padB + 6}" stroke="#bbb" stroke-width="1"/>`;
     // Axis ticks
     for (const t of [-absMax, -absMax/2, 0, absMax/2, absMax]) {
       const x = center + t * scale;
-      svg += `<line x1="${x.toFixed(1)}" y1="${(H - padB).toFixed(1)}" x2="${x.toFixed(1)}" y2="${(H - padB + 4).toFixed(1)}" stroke="#aaa"/>`;
-      svg += `<text x="${x.toFixed(1)}" y="${(H - padB + 14).toFixed(1)}" font-family="JetBrains Mono" font-size="9" fill="#888" text-anchor="middle">${t.toFixed(1)}</text>`;
+      svg += `<line x1="${x.toFixed(1)}" y1="${(H - padB).toFixed(1)}" x2="${x.toFixed(1)}" y2="${(H - padB + 6).toFixed(1)}" stroke="#aaa"/>`;
+      svg += `<text x="${x.toFixed(1)}" y="${(H - padB + 20).toFixed(1)}" font-family="JetBrains Mono" font-size="13" fill="#888" text-anchor="middle">${t.toFixed(1)}</text>`;
     }
 
     // --- Rows ---
@@ -287,16 +307,16 @@
       const y = padT + i * rowH + rowH / 2;
 
       // Curated category dot next to the variant name
-      const dotR = 4;
-      const dotX = padL - 12 - dotR;
+      const dotR = 6;
+      const dotX = padL - 16 - dotR;
       svg += `<circle cx="${dotX.toFixed(1)}" cy="${(y - 0.5).toFixed(1)}" r="${dotR}" fill="${sigColor(v.sig)}"><title>${v.sig}</title></circle>`;
 
       // Variant name + tiny category label
-      svg += `<text x="${(dotX - dotR - 6).toFixed(1)}" y="${(y - 1).toFixed(1)}" font-family="JetBrains Mono" font-size="11" fill="#222" text-anchor="end">${v.name}</text>`;
-      svg += `<text x="${(dotX - dotR - 6).toFixed(1)}" y="${(y + 11).toFixed(1)}" font-family="JetBrains Mono" font-size="9" fill="${sigColor(v.sig)}" text-anchor="end">${v.sig.toLowerCase()}</text>`;
+      svg += `<text x="${(dotX - dotR - 8).toFixed(1)}" y="${(y - 1).toFixed(1)}" font-family="JetBrains Mono" font-size="16" fill="#222" text-anchor="end">${v.name}</text>`;
+      svg += `<text x="${(dotX - dotR - 8).toFixed(1)}" y="${(y + 16).toFixed(1)}" font-family="JetBrains Mono" font-size="12" fill="${sigColor(v.sig)}" text-anchor="end">${v.sig.toLowerCase()}</text>`;
 
       if (d == null) {
-        svg += `<text x="${(center + 6).toFixed(1)}" y="${(y + 4).toFixed(1)}" font-family="JetBrains Mono" font-size="10" fill="#ccc">not scored</text>`;
+        svg += `<text x="${(center + 8).toFixed(1)}" y="${(y + 5).toFixed(1)}" font-family="JetBrains Mono" font-size="14" fill="#ccc">not scored</text>`;
         return;
       }
 
@@ -304,24 +324,30 @@
       const color = barColor(d);
       const barX = Math.min(center, x);
       const barW = Math.max(2, Math.abs(x - center));
-      svg += `<rect x="${barX.toFixed(1)}" y="${(y - 8).toFixed(1)}" width="${barW.toFixed(1)}" height="14" fill="${color}" stroke="${v === selected ? '#1f1f1d' : 'none'}" stroke-width="${v === selected ? 1 : 0}"/>`;
+      svg += `<rect x="${barX.toFixed(1)}" y="${(y - BAR_H / 2).toFixed(1)}" width="${barW.toFixed(1)}" height="${BAR_H}" fill="${color}" stroke="${v === selected ? '#1f1f1d' : 'none'}" stroke-width="${v === selected ? 1 : 0}"/>`;
 
       const label = (d >= 0 ? "+" : "") + d.toFixed(2);
       const insideOK = barW >= VALUE_INSIDE_MIN && Math.abs(d) >= 0.5;  // color is dark enough only away from neutral
       if (insideOK) {
-        const tx = x + (d >= 0 ? -5 : 5);
+        const tx = x + (d >= 0 ? -8 : 8);
         const anchor = d >= 0 ? "end" : "start";
-        svg += `<text x="${tx.toFixed(1)}" y="${(y + 3.5).toFixed(1)}" font-family="JetBrains Mono" font-size="10" fill="#fff" text-anchor="${anchor}" font-weight="500">${label}</text>`;
+        svg += `<text x="${tx.toFixed(1)}" y="${(y + 5).toFixed(1)}" font-family="JetBrains Mono" font-size="14" fill="#fff" text-anchor="${anchor}" font-weight="500">${label}</text>`;
       } else {
-        const tx = x + (d >= 0 ? 5 : -5);
+        const tx = x + (d >= 0 ? 8 : -8);
         const anchor = d >= 0 ? "start" : "end";
-        svg += `<text x="${tx.toFixed(1)}" y="${(y + 3.5).toFixed(1)}" font-family="JetBrains Mono" font-size="10" fill="#333" text-anchor="${anchor}">${label}</text>`;
+        svg += `<text x="${tx.toFixed(1)}" y="${(y + 5).toFixed(1)}" font-family="JetBrains Mono" font-size="14" fill="#333" text-anchor="${anchor}">${label}</text>`;
       }
     });
 
     // --- Bottom caption ---
-    const capY = H - padB + 32;
-    svg += `<text x="${padL.toFixed(1)}" y="${capY}" font-family="JetBrains Mono" font-size="9" fill="#888" letter-spacing="0.5">pathogenic loss-of-function → mutation much less likely  ·  benign / common variants → ≈ even</text>`;
+    // Split across two lines so the full sentence fits at column width
+    // without truncating on the right edge. Each line is one half of the
+    // dichotomy (pathogenic vs benign) so the visual structure mirrors
+    // the meaning.
+    const capY1 = H - padB + 44;
+    const capY2 = H - padB + 60;
+    svg += `<text x="${padL.toFixed(1)}" y="${capY1}" font-family="JetBrains Mono" font-size="12" fill="#888" letter-spacing="0.5">pathogenic loss-of-function → mutation much less likely</text>`;
+    svg += `<text x="${padL.toFixed(1)}" y="${capY2}" font-family="JetBrains Mono" font-size="12" fill="#888" letter-spacing="0.5">benign / common variants → about as likely as the original</text>`;
 
     els.bars.innerHTML = svg;
   }

assets/js/shared/code-snippet.js

@@ -26,11 +26,33 @@
     });
   }
 
+  // Run every <code> block through highlight.js. Every snippet in the demo
+  // is Python, so we hard-tag the language rather than rely on autodetect
+  // (which can mis-call short snippets). hljs is loaded via CDN with the
+  // same `defer` attribute as this script, but in case CSP / network
+  // blocks it we no-op gracefully and the snippets stay plain text.
+  function highlight(snippet) {
+    if (!window.hljs) return;
+    snippet.querySelectorAll(".code-snippet__panel code").forEach(code => {
+      if (code.dataset.highlighted) return;
+      code.classList.add("language-python");
+      try { window.hljs.highlightElement(code); } catch (e) { /* ignore */ }
+      code.dataset.highlighted = "1";
+    });
+  }
+
   function wire(snippet) {
     snippet.querySelectorAll(".code-snippet__tab").forEach(tab => {
       tab.addEventListener("click", () => activate(snippet, tab.dataset.tab));
     });
+    // Lift the copy button into the tabs strip if the markup still has it
+    // as a sibling. Lets the strip's flex layout vertically centre it
+    // against the tab pills instead of fighting absolute `top` pixels.
+    const tabsRow = snippet.querySelector(".code-snippet__tabs");
     const copyBtn = snippet.querySelector(".code-snippet__copy");
+    if (tabsRow && copyBtn && copyBtn.parentNode !== tabsRow) {
+      tabsRow.appendChild(copyBtn);
+    }
     if (copyBtn) {
       copyBtn.addEventListener("click", async () => {
         const panel = snippet.querySelector(".code-snippet__panel.active");
@@ -47,6 +69,7 @@
         } catch (e) { /* clipboard blocked; fail quietly */ }
       });
     }
+    highlight(snippet);
   }
 
   function init() {

assets/styles/code-snippet.css

@@ -8,39 +8,72 @@
   font-size: 11px;
 }
 
-/* Disclosure header. We replace the native triangle with a small green +/−
-   chip so the affordance reads as a card-level action rather than a tree
-   node, and we don't lean on em dashes per the writing style. */
+/* Disclosure header. Styled as a pill-button so the affordance reads as
+   a card-level action rather than a faint inline label: warm-off-white
+   fill + outline, a brand-green </> chip on the left to signal "code",
+   and a chevron on the right that rotates 90° when the panel is open.
+   Border + background shift to brand-green tints on hover / open to
+   reinforce state without needing a separate +/− glyph. */
 .code-snippet > summary {
   cursor: pointer;
-  color: #6b7a6e;
-  font-weight: 500;
+  color: #1f1f1d;
+  font-weight: 600;
   letter-spacing: 1.2px;
   text-transform: uppercase;
-  font-size: 10px;
-  padding: 6px 0;
+  font-size: 10.5px;
+  padding: 7px 14px 7px 8px;
   list-style: none;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   user-select: none;
+  background: #f7f5ee;
+  border: 1px solid #c8c2b3;
+  border-radius: 3px;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
 }
 .code-snippet > summary::-webkit-details-marker { display: none; }
-.code-snippet > summary::before {
-  content: "+";
-  display: inline-block;
-  width: 14px; height: 14px;
-  text-align: center;
+.code-snippet > summary:hover {
+  border-color: var(--green);
   background: #f4f8f4;
-  border: 1px solid #d4dcc9;
+}
+.code-snippet[open] > summary {
+  border-color: var(--green);
+  background: #f4f8f4;
+}
+/* "</>" code chip on the left: solid green pill, white glyph. Same
+   visual weight as the brand chips used elsewhere in the page. */
+.code-snippet > summary::before {
+  content: "</>";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+  padding: 0 5px;
+  background: var(--green);
+  color: #ffffff;
+  font-family: "JetBrains Mono", monospace;
+  font-weight: 700;
+  font-size: 10px;
+  letter-spacing: -0.5px;
   border-radius: 2px;
-  color: var(--green);
+}
+/* Chevron on the right, pivots on open via CSS transform. */
+.code-snippet > summary::after {
+  content: "›";
+  margin-left: 2px;
+  color: #6b7a6e;
+  font-size: 14px;
   font-weight: 700;
-  font-size: 11px;
-  line-height: 12px;
+  line-height: 0;
+  transition: transform 0.15s, color 0.15s;
 }
-.code-snippet[open] > summary::before {
-  content: "−";
+.code-snippet > summary:hover::after,
+.code-snippet[open] > summary::after {
+  color: var(--green);
+}
+.code-snippet[open] > summary::after {
+  transform: rotate(90deg);
 }
 
 .code-snippet__body {
@@ -48,13 +81,14 @@
   border: 1px solid #d4dcc9;
   border-radius: 3px;
   overflow: hidden;
-  background: #fbfaf3;
+  background: #ffffff;
   position: relative;
 }
 
 .code-snippet__tabs {
   display: flex;
-  background: #f1ece0;
+  align-items: center;
+  background: #f7f5ee;
   border-bottom: 1px solid #d4dcc9;
 }
 .code-snippet__tab {
@@ -77,7 +111,7 @@
   border-bottom-color: var(--green);
 }
 
-.code-snippet__panel { display: none; }
+.code-snippet__panel { display: none; background: #ffffff; }
 .code-snippet__panel.active { display: block; }
 .code-snippet__panel pre {
   margin: 0;
@@ -86,18 +120,79 @@
   font-size: 12px;
   line-height: 1.55;
   color: #1f1f1d;
+  background: #ffffff;
   overflow-x: auto;
   white-space: pre;
   tab-size: 4;
 }
+/* highlight.js sets `background` on the `.hljs` class once it's done
+   processing a block. Force-override to transparent so our pure-white
+   panel background shows through regardless of which hljs theme (if any)
+   gets loaded. */
+.code-snippet__panel pre code,
+.code-snippet__panel pre code.hljs {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+
+/* --- highlight.js token palette --------------------------------------
+   We intentionally don't load a hljs theme stylesheet. Instead, define
+   token colours here so the Python snippets stay on-brand: brand green
+   for keywords / builtins, warm amber for strings, blue for numbers,
+   italic muted gray for comments. Everything else falls through to the
+   default ink colour set on <pre>. */
+.code-snippet__panel .hljs-comment,
+.code-snippet__panel .hljs-quote {
+  color: #9a958a;
+  font-style: italic;
+}
+.code-snippet__panel .hljs-keyword,
+.code-snippet__panel .hljs-built_in,
+.code-snippet__panel .hljs-literal,
+.code-snippet__panel .hljs-type {
+  color: #317f3f;
+}
+.code-snippet__panel .hljs-string,
+.code-snippet__panel .hljs-regexp,
+.code-snippet__panel .hljs-doctag {
+  color: #a9762f;
+}
+.code-snippet__panel .hljs-number {
+  color: #2c5aa0;
+}
+.code-snippet__panel .hljs-meta,
+.code-snippet__panel .hljs-meta .hljs-string {
+  color: #7a6242;
+}
+.code-snippet__panel .hljs-title,
+.code-snippet__panel .hljs-title.function_,
+.code-snippet__panel .hljs-title.class_,
+.code-snippet__panel .hljs-class .hljs-title,
+.code-snippet__panel .hljs-section {
+  color: #1f1f1d;
+  font-weight: 500;
+}
+.code-snippet__panel .hljs-attr,
+.code-snippet__panel .hljs-params,
+.code-snippet__panel .hljs-variable,
+.code-snippet__panel .hljs-symbol,
+.code-snippet__panel .hljs-operator,
+.code-snippet__panel .hljs-punctuation {
+  color: #1f1f1d;
+}
 
-/* Copy button (anchored to top-right of the body, above whichever panel
-   is active). Uses navigator.clipboard.writeText() from the JS helper. */
+/* Copy button. Lives inside .code-snippet__tabs (the JS lifts it there
+   on init) so the flex `align-items: center` on the strip handles
+   vertical centring against the tab pills. `margin-left: auto` shoves
+   it to the right edge. On a pure-white panel background we lean on a
+   faint warm fill + border so the chip stays visible without competing
+   with the code. */
 .code-snippet__copy {
-  position: absolute;
-  top: 8px; right: 12px;
+  margin-left: auto;
+  margin-right: 12px;
   padding: 4px 10px;
-  background: rgba(255, 255, 255, 0.85);
+  background: #f7f5ee;
   border: 1px solid #d4dcc9;
   border-radius: 3px;
   font-family: inherit;
@@ -107,8 +202,7 @@
   text-transform: uppercase;
   color: #6b7a6e;
   cursor: pointer;
-  z-index: 1;
-  transition: color 0.12s, border-color 0.12s;
+  transition: color 0.12s, border-color 0.12s, background 0.12s;
 }
-.code-snippet__copy:hover { color: #1f1f1d; }
-.code-snippet__copy.copied { color: var(--green); border-color: var(--green); }
+.code-snippet__copy:hover { color: #1f1f1d; background: #f1ece0; }
+.code-snippet__copy.copied { color: var(--green); border-color: var(--green); background: #ffffff; }

assets/styles/section-intro.css

@@ -134,33 +134,87 @@
 }
 .cd-mol-svg { width: 100%; max-width: 130px; }
 .cd-mol-svg svg { display: block; width: 100%; height: auto; }
+/* Two-line label: big mono letter (A / C / G / T) sits above the full
+   name. The <b> is the only element in the source — the trailing text
+   node "adenine"/etc. becomes an anonymous flex item, so flex column +
+   align-items: center stacks them automatically without touching the
+   HTML. */
 .cd-mol-label {
+  display: flex; flex-direction: column;
+  align-items: center; gap: 2px;
   font-family: "JetBrains Mono", monospace;
   font-size: 11px; letter-spacing: 0.06em;
   color: var(--ink-soft);
+  text-align: center;
+}
+.cd-mol-label b {
+  display: block;
+  margin: 0;
+  font-size: 22px; font-weight: 700;
+  letter-spacing: 0.02em; line-height: 1;
+  color: var(--ink);
 }
-.cd-mol-label b { color: var(--ink); font-weight: 600; margin-right: 6px; }
 
 /* --- row 2 : DNA helix ------------------------------------------------- */
 /* No background/border on the wrapper; the parent .demo card carries
    the white frame. The wrapper is just here to host the SVG. */
 .cd-helix-wrap svg { display: block; width: 100%; height: auto; }
+/* Pairing legend under the helix. Two centred A=T / G≡C tiles + an
+   H-bond sub-label that turns the typographic difference between
+   = and ≡ into actual chemistry. Caption below, mono uppercase, faint,
+   matching the .cd-protein-caption / .cd-track-labels treatment so the
+   primer reads with one consistent caption voice. */
 .cd-helix-rules {
-  margin-top: 16px;
-  display: flex; gap: 22px;
+  /* Tighter gap to the helix above so the legend reads as a caption to
+     the diagram, plus extra slack below to push the whole pair-block
+     further from the bottom edge of the .demo card. The .demo's own
+     padding-bottom (24px from controls.css) sits underneath this margin
+     for ~40px of total breathing room below the caption. */
+  margin: 12px 0 16px;
+  display: flex; flex-direction: column;
+  align-items: center; gap: 12px;
   font-family: "JetBrains Mono", monospace;
-  font-size: 11px; letter-spacing: 0.06em;
+}
+.cd-helix-rules-pairs {
+  display: flex; gap: 56px; align-items: flex-start;
+}
+.cd-pair {
+  display: flex; flex-direction: column;
+  align-items: center; gap: 8px;
+}
+.cd-pair-formula {
+  display: inline-flex; align-items: center; gap: 10px;
+  font-size: 24px; font-weight: 700;
+  letter-spacing: 0.04em; line-height: 1;
+  color: var(--green);
+}
+.cd-pair-bond {
   color: var(--ink-soft);
+  font-weight: 500;
 }
-.cd-helix-rules .pair {
-  display: inline-flex; align-items: center; gap: 4px;
-  color: var(--ink);
+.cd-pair-meta {
+  font-size: 9.5px; letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.cd-pair-caption {
+  margin-top: 2px;
+  font-size: 10px; letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
 }
-.cd-helix-rules .pair b { font-weight: 600; color: var(--green); }
 
 /* --- rows 3 + 4 : gene strip (per-segment bar + letters) --------------- */
+/* Strip is centred in its parent .demo card, not left-aligned: the gene
+   sketch is a self-contained diagram and reads better with breathing room
+   on both sides than tucked against the card's left edge. justify-content
+   handles the in-flow case (segments fit in one line); margin: 0 auto with
+   width: max-content + max-width: 100% covers the inline-block-style
+   centring when the strip is shorter than the parent. */
 .cd-gene-strip {
-  display: flex; flex-wrap: wrap; align-items: flex-start;
+  display: flex; flex-wrap: wrap;
+  align-items: flex-start; justify-content: center;
+  width: max-content; max-width: 100%; margin: 0 auto;
   font-family: "JetBrains Mono", monospace;
   font-size: 14px; font-weight: 400;
   letter-spacing: 0.06em; line-height: 1.9;
@@ -189,8 +243,11 @@
 .cd-genex:last-child  .cd-genex-bar { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
 
 .cd-track-labels {
-  display: flex; align-items: center; gap: 14px;
-  margin-top: 12px;
+  /* margin-top bumped 12 → 28 so the legend reads as a separate caption
+     row under the gene strip rather than sitting flush against the
+     letters of the sequence. */
+  display: flex; align-items: center; justify-content: center; gap: 14px;
+  margin-top: 28px;
   font-family: "JetBrains Mono", monospace;
   font-size: 10px;
   letter-spacing: 0.14em; text-transform: uppercase;
@@ -201,24 +258,45 @@
   width: 18px; height: 8px; border-radius: 1px;
   vertical-align: 1px; margin-right: 6px;
 }
+/* "LEGEND" prefix that labels the row as a key. Slightly darker + tighter
+   tracking than the items themselves so the eye groups it as the title
+   of the row rather than another item. The margin-right adds a wider
+   gap between "LEGEND" and the first swatch on top of the row's gap, so
+   the title visually detaches from the items. */
+.cd-track-labels__title {
+  color: var(--ink-soft);
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  margin-right: 6px;
+}
 
 /* --- row 4 specific : splicing (top strip → arrows → bottom mRNA) ----- */
+/* Splice block hosts pre-mRNA + arrow svg + spliced mRNA. We centre the
+   whole stack so the three rows line up on a single vertical axis inside
+   the parent card. The inner .cd-gene-strip rules above already do the
+   centring for the two strips themselves; this block centres the
+   transcribe-arrow svg between them too. */
 .cd-splice {
-  display: inline-block;
-  vertical-align: top;
+  display: block;
+  width: max-content;
   max-width: 100%;
+  margin: 0 auto;
 }
 .cd-splice .cd-gene-strip { flex-wrap: nowrap; margin-bottom: 0; }
 .cd-splice-arrows { display: block; width: 100%; }
-.cd-mrna-strip { justify-content: center; }
 
 /* --- row 5 : protein, codon → AA translation table -------------------- */
+/* Grid sized to its content (label + 10 codon columns) and centred in the
+   parent card. The grid itself stays a fixed width regardless of the card
+   width, so margin: 0 auto picks up the leftover space symmetrically on
+   both sides. */
 .cd-translate {
   display: grid;
   grid-template-columns: max-content repeat(10, max-content);
   align-items: center; justify-items: center;
   column-gap: 6px; row-gap: 4px;
-  margin-bottom: 14px;
+  width: max-content; max-width: 100%;
+  margin: 0 auto 14px;
 }
 .cd-trow-label {
   justify-self: end;
@@ -280,7 +358,7 @@
 .cd-fold-arrow {
   display: flex; flex-direction: column;
   align-items: center;
-  margin: 14px 0 16px;
+  margin: 8px 0 10px;
 }
 .cd-fold-arrow-icon {
   font-family: "JetBrains Mono", monospace;
@@ -297,10 +375,12 @@
 
 /* Container for the 3Dmol.js viewer (id="cd-protein-3d"). The .demo
    parent provides the white card; this just supplies a height for the
-   WebGL canvas. */
+   WebGL canvas. Height trimmed (340 → 280) so the viewer doesn't dwarf
+   the rest of the row; 3Dmol's zoomTo() refits the molecule to whatever
+   container size it gets, so the molecule still fills the frame. */
 .cd-protein-3d {
   width: 100%;
-  height: 340px;
+  height: 280px;
   position: relative;
   overflow: hidden;
 }
@@ -313,13 +393,53 @@
   color: var(--ink-faint);
   pointer-events: none;
 }
+/* Three-tier caption under the 3D viewer:
+     · title (sans, medium): the protein's common name, page-voice
+     · desc (sans, light, italic): one-line plain-language gloss
+     · meta (mono, uppercase, faint): chain count + clickable PDB ID
+   Mirrors the editorial pattern used by museum / journal captions:
+   name → what it is in plain English → the technical reference.
+   The mono meta line ties this row back to the rest of the primer's
+   captions (cd-pair-caption, cd-track-labels) so the page still has
+   one consistent caption voice. */
 .cd-protein-caption {
-  margin-top: 12px;
+  margin-top: 10px;
+  text-align: center;
+  display: flex; flex-direction: column;
+  align-items: center; gap: 4px;
+}
+.cd-protein-caption__title {
+  font-family: "Inter", sans-serif;
+  font-size: 19px; font-weight: 500;
+  letter-spacing: -0.01em; line-height: 1.2;
+  color: var(--ink);
+}
+.cd-protein-caption__desc {
+  font-family: "Inter", sans-serif;
+  font-size: 13px; font-weight: 300;
+  line-height: 1.45;
+  color: var(--ink-soft);
+}
+.cd-protein-caption__meta {
+  margin-top: 6px;
   font-family: "JetBrains Mono", monospace;
   font-size: 10px;
   letter-spacing: 0.14em; text-transform: uppercase;
   color: var(--ink-faint);
 }
+.cd-protein-caption__meta a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: rgba(138, 138, 131, 0.4);
+  text-underline-offset: 2px;
+  transition: color 0.15s ease, text-decoration-color 0.15s ease;
+}
+.cd-protein-caption__meta a:hover,
+.cd-protein-caption__meta a:focus-visible {
+  color: var(--green);
+  text-decoration-color: var(--green);
+  outline: none;
+}
 
 @media (max-width: 720px) {
   .cd-mols { grid-template-columns: repeat(2, 1fr); }

assets/styles/sequence.css

@@ -13,10 +13,10 @@
 }
 .gene-info strong { color: #1f1f1d; font-weight: 500; }
 .gene-track {
-  width: 100%; height: 28px; display: block;
+  width: 100%; height: 40px; display: block;
   margin: 4px 0 8px;
 }
-.gene-track.draggable { height: 40px; touch-action: none; }
+.gene-track.draggable { height: 52px; touch-action: none; }
 .gene-track .exon { fill: #317f3f; }
 .gene-track .intron { stroke: #aaa; stroke-width: 1; }
 .gene-track .playhead { stroke: #bc2e25; stroke-width: 2; }
@@ -85,10 +85,44 @@
   font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1.5px;
   margin-top: 14px; margin-bottom: 4px; display: flex; gap: 12px; align-items: center;
 }
-.seq-label .legend-swatch {
+/* Generic colour-swatch chip used in inline legends across the demo
+   (.seq-label, .track-axis-label, etc.). The class is the obvious
+   semantic hook, so the selector is intentionally global rather than
+   nested under a single parent — having the rule scoped to .seq-label
+   broke every other legend that reused the pattern (e.g. the §6 results
+   chart legend), which all rendered as zero-width invisible spans. */
+.legend-swatch {
   display: inline-block; width: 8px; height: 8px; vertical-align: middle;
   margin-right: 4px; border-radius: 1px;
 }
+
+/* Chart legend variant of .track-axis-label (used by the §6 results
+   bars chart). The base class is mono uppercase 9px which suits a thin
+   axis caption; for a 4-model legend that pattern was hard to read.
+   The variant keeps the demo's typographic system but bumps the legend
+   to sentence-case 12px Inter and gives the swatches more visual weight
+   so they read as a proper colour key rather than caption text. */
+.chart-legend {
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--ink, #1f1f1d);
+  padding-top: 16px;
+  gap: 22px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+.chart-legend__item {
+  display: inline-flex; align-items: center;
+  font-weight: 500;
+}
+.chart-legend__item .legend-swatch {
+  width: 14px; height: 14px;
+  margin-right: 7px;
+  border-radius: 2px;
+}
 /* Inline tag chips used in §5 to disambiguate carbon vs reference rows.
    Same shape/size, different colour band so the eye instantly maps a
    row of AAs to the correct identity without re-reading the full label. */

demo.html

@@ -10,6 +10,15 @@
 <!-- 3Dmol.js: lightweight WebGL molecular viewer, used by §5 (folding) to
      render ESMFold-predicted protein cartoons. Pinned for reproducibility. -->
 <script defer src="https://cdn.jsdelivr.net/npm/3dmol@2.5.1/build/3Dmol-min.js"></script>
+<!-- highlight.js: syntax-highlights the Python snippets inside every
+     <details class="code-snippet"> "Run this from code" block. We load
+     the official browser distribution from the `cdn-release` repo (the
+     /npm/ path serves CommonJS modules that throw `require is not
+     defined` in the browser). Bundle ships Python pre-registered. We
+     intentionally do NOT load a hljs theme stylesheet, code-snippet.css
+     defines our own token colours so the snippets stay on-brand with
+     the editorial palette. -->
+<script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
 
 <!-- Modular CSS, served from /assets/styles/. Order matters because
      several keyframes (pulse) and shared atoms (.seq-block, .seq-label,
@@ -225,10 +234,22 @@
       <div class="section-body">
         <div class="demo">
           <div class="cd-helix-wrap" data-helix></div>
+          <!-- Pairing legend: two big A=T / G≡C tiles with an H-bond
+               sub-label that turns the visual difference between =
+               and ≡ into the actual chemistry (2 vs 3 hydrogen bonds).
+               Caption sits below the pair row, centred. -->
           <div class="cd-helix-rules">
-            <span class="pair"><b>A</b> = <b>T</b></span>
-            <span class="pair"><b>G</b> ≡ <b>C</b></span>
-            <span style="color: var(--ink-faint)">complementary base pairing</span>
+            <div class="cd-helix-rules-pairs">
+              <div class="cd-pair">
+                <div class="cd-pair-formula"><span class="cd-pair-letter">A</span><span class="cd-pair-bond">═</span><span class="cd-pair-letter">T</span></div>
+                <div class="cd-pair-meta">2 H bonds</div>
+              </div>
+              <div class="cd-pair">
+                <div class="cd-pair-formula"><span class="cd-pair-letter">G</span><span class="cd-pair-bond">≡</span><span class="cd-pair-letter">C</span></div>
+                <div class="cd-pair-meta">3 H bonds</div>
+              </div>
+            </div>
+            <div class="cd-pair-caption">complementary base pairing</div>
           </div>
         </div>
       </div>
@@ -249,6 +270,7 @@
         <div class="demo">
           <div class="cd-gene-strip"><span class="cd-genex cd-genex--promoter"><span class="cd-genex-bar"></span><span class="cd-genex-text">TATAAA</span></span><span class="cd-genex cd-genex--exon"><span class="cd-genex-bar"></span><span class="cd-genex-text">ATGGCCGAACTG</span></span><span class="cd-genex cd-genex--intron"><span class="cd-genex-bar"></span><span class="cd-genex-text">GTAAGCATATAG</span></span><span class="cd-genex cd-genex--exon"><span class="cd-genex-bar"></span><span class="cd-genex-text">CCCGGGTGGTTC</span></span><span class="cd-genex cd-genex--intron"><span class="cd-genex-bar"></span><span class="cd-genex-text">GTACGCCATTAG</span></span><span class="cd-genex cd-genex--exon"><span class="cd-genex-bar"></span><span class="cd-genex-text">AGCCGT</span></span></div>
           <div class="cd-track-labels">
+            <span class="cd-track-labels__title">Legend</span>
             <span><span class="sw" style="background: var(--promoter)"></span>promoter</span>
             <span><span class="sw" style="background: var(--green)"></span>exon</span>
             <span><span class="sw" style="background: transparent; border-top: 1px solid var(--intron); height: 1px; margin-top: 4px;"></span>intron</span>
@@ -288,6 +310,12 @@
             </svg>
             <div class="cd-gene-strip cd-mrna-strip"><span class="cd-genex cd-genex--exon"><span class="cd-genex-bar"></span><span class="cd-genex-text">AUGGCCGAACUG</span></span><span class="cd-genex cd-genex--exon"><span class="cd-genex-bar"></span><span class="cd-genex-text">CCCGGGUGGUUC</span></span><span class="cd-genex cd-genex--exon"><span class="cd-genex-bar"></span><span class="cd-genex-text">AGCCGU</span></span></div>
           </div>
+          <div class="cd-track-labels">
+            <span class="cd-track-labels__title">Legend</span>
+            <span><span class="sw" style="background: var(--promoter)"></span>promoter</span>
+            <span><span class="sw" style="background: var(--green)"></span>exon</span>
+            <span><span class="sw" style="background: transparent; border-top: 1px solid var(--intron); height: 1px; margin-top: 4px;"></span>intron</span>
+          </div>
         </div>
       </div>
     </div>
@@ -326,7 +354,11 @@
           <div class="cd-protein-3d" id="cd-protein-3d">
             <div class="cd-protein-3d-loading">loading hemoglobin…</div>
           </div>
-          <div class="cd-protein-caption">human hemoglobin · 4 chains · the molecule that carries oxygen in your blood · PDB 1A3N</div>
+          <div class="cd-protein-caption">
+            <div class="cd-protein-caption__title">Human hemoglobin</div>
+            <div class="cd-protein-caption__desc">the molecule that carries oxygen in your blood</div>
+            <div class="cd-protein-caption__meta">4 chains · PDB <a href="https://www.rcsb.org/structure/1A3N" target="_blank" rel="noopener">1A3N</a></div>
+          </div>
         </div>
       </div>
     </div>
@@ -349,14 +381,14 @@
       The interesting question is what else falls out of that. We didn't tell Carbon what an
       exon is. We didn't tell it which mutations are pathogenic. We didn't tell it how genes
       differ between species. The sections below are ways to read what it picked up
-      anyway: autocomplete a gene (<a class="lede-chip" href="#completion">§1</a>), see
-      structure emerge in its confidence (<a class="lede-chip" href="#track">§2</a>), score
-      a disease variant against a healthy one (<a class="lede-chip" href="#vep">§3</a>),
-      recognise a gene's species of origin (<a class="lede-chip" href="#species">§4</a>),
+      anyway: autocomplete a gene <a class="lede-chip" href="#completion">§1</a>, see
+      structure emerge in its confidence <a class="lede-chip" href="#track">§2</a>, score
+      a disease variant against a healthy one <a class="lede-chip" href="#vep">§3</a>,
+      recognise a gene's species of origin <a class="lede-chip" href="#species">§4</a>,
       and then push further into folded protein structure
-      (<a class="lede-chip" href="#folding">§5</a>), the embedding manifold
-      (<a class="lede-chip" href="#umap">§6</a>), and the species tree
-      (<a class="lede-chip" href="#speciesTree">§7</a>). Each demo runs against the public
+      <a class="lede-chip" href="#folding">§5</a>, the embedding manifold
+      <a class="lede-chip" href="#umap">§6</a>, and the species tree
+      <a class="lede-chip" href="#speciesTree">§7</a>. Each demo runs against the public
       <code>HuggingFaceBio/Carbon-3B</code> checkpoint behind a live inference endpoint.
     </p>
   </div>
@@ -376,11 +408,9 @@
     intron just before the 2nd exon plus the first 35 bp of that exon, and ask it to
     <em>finish the exon</em>. The model streams the remaining bases one 6-base token at a
     time. Exons are the protein-coding parts of a gene and are under strong evolutionary
-    constraint, so they should be the most predictable stretches of DNA. The
-    draggable&nbsp;▼ ▲ markers on the track let you move the prompt and generation windows
-    anywhere along the gene to try a different stretch. We overlay the <em>real</em>
-    exon/intron annotations on top of the output so you can compare what Carbon produces to
-    what's actually there.
+    constraint, so they should be the most predictable stretches of DNA. We overlay the
+    <em>real</em> exon/intron annotations on top of the output so you can compare what
+    Carbon produces to what's actually there.
   </p>
   </div>
 
@@ -400,7 +430,7 @@
     </div>
 
     <div class="gene-info" id="d1-info">loading genes…</div>
-    <svg class="gene-track draggable" id="d1-track" viewBox="0 0 1000 40" preserveAspectRatio="none"></svg>
+    <svg class="gene-track draggable" id="d1-track" viewBox="0 0 1000 52" preserveAspectRatio="none"></svg>
     <div class="track-axis-label" style="justify-content:flex-end;gap:20px;align-items:center">
       <span class="legend-tip"
             data-tip="Exon: coding segment of the gene. Stays in the mature mRNA and gets translated into protein."
@@ -460,9 +490,10 @@
   <div class="takeaway">
     <p>
       <strong>Try it</strong>
-      Drag the prompt window so the green generated region lands on an exon (the dark green
-      blocks) and count the green underlines you get. Then try the same length over an
-      intron and compare.
+      Drag the dark&nbsp;▼ ▲ markers to slide the prompt window and the green&nbsp;▼ to set
+      where generation stops, then hit&nbsp;▶&nbsp;generate. Land the green-shaded region
+      inside an exon (dark green block) and note the count of green-underlined matches;
+      repeat with a similar-length window over an intron and compare.
     </p>
     <p>
       <strong>What to look for</strong>
@@ -560,9 +591,9 @@ print(tok.decode(new_ids))</code></pre></div>
     </div>
 
     <div class="gene-info" id="d3-info">loading genes…</div>
-    <svg class="gene-track" id="d3-track" viewBox="0 0 1000 28" preserveAspectRatio="none"></svg>
+    <svg class="gene-track" id="d3-track" viewBox="0 0 1000 40" preserveAspectRatio="none"></svg>
     <svg id="d3-chart" style="display:block;width:100%;height:140px;background:#fff;border:1px solid #eee;margin-top:6px" preserveAspectRatio="none" viewBox="0 0 1000 140"></svg>
-    <div class="track-axis-label">
+    <div class="track-axis-label" style="padding-top:8px">
       <span><span class="legend-swatch" style="background:#317f3f"></span>exon (shaded)</span>
       <span style="color:#aaa">y-axis: log P per 6-bp token (higher = more confident)</span>
       <span id="d3-bp-label" style="color:#888">0 bp</span>
@@ -787,7 +818,6 @@ print(f"delta = {delta:+.2f}  (less likely if negative)")</code></pre></div>
     <div class="demo-toolbar">
       <span>gene</span>
       <span id="d4-pills" class="pills"></span>
-      <span class="spacer"></span>
       <span>prefix</span>
       <span id="d4-prefix-pills" class="pills">
         <button class="pill" data-prefix="200">200</button>
@@ -799,6 +829,7 @@ print(f"delta = {delta:+.2f}  (less likely if negative)")</code></pre></div>
         <button class="pill active" data-gen="60">60</button>
         <button class="pill" data-gen="200">200</button>
       </span>
+      <span class="spacer"></span>
       <button id="d4-go" class="action primary">▶ run all</button>
       <span class="status is-hidden" id="d4-status"><span class="dot"></span><span></span></span>
     </div>
@@ -1158,15 +1189,15 @@ for name, ids in zip(species_prefixes, new_ids):
     </p>
     <p class="tab-lede__note">
       The sections below walk through each of those choices: how the tokenizer changes
-      what a "token" means in DNA (<a class="lede-chip" href="#tokenizer">§1</a>), how
-      FNS rescues training in the BF16 regime (<a class="lede-chip" href="#loss">§2</a>),
-      what's in the training corpus (<a class="lede-chip" href="#data">§3</a>),
-      what the architecture looks like (<a class="lede-chip" href="#architecture">§4</a>),
+      what a "token" means in DNA <a class="lede-chip" href="#tokenizer">§1</a>, how
+      FNS rescues training in the BF16 regime <a class="lede-chip" href="#loss">§2</a>,
+      what's in the training corpus <a class="lede-chip" href="#data">§3</a>,
+      what the architecture looks like <a class="lede-chip" href="#architecture">§4</a>,
       how 8k-token pretraining reaches 786 kbp at inference
-      (<a class="lede-chip" href="#longcontext">§5</a>), how Carbon stacks up against
+      <a class="lede-chip" href="#longcontext">§5</a>, how Carbon stacks up against
       Evo2-7B and GENERator-v2 on the full training-free suite
-      (<a class="lede-chip" href="#results">§6</a>), and why the model runs so fast
-      (<a class="lede-chip" href="#efficiency">§7</a>).
+      <a class="lede-chip" href="#results">§6</a>, and why the model runs so fast
+      <a class="lede-chip" href="#efficiency">§7</a>.
     </p>
   </div>
 </div>
@@ -1425,12 +1456,11 @@ for name, ids in zip(species_prefixes, new_ids):
   <div class="section-body">
   <div class="demo" id="demo12">
     <div id="d12-bars"></div>
-    <div class="track-axis-label" style="padding-top:14px">
-      <span><span class="legend-swatch" style="background:#1A7A40"></span>Carbon 8B</span>
-      <span><span class="legend-swatch" style="background:#6DBF7E"></span>Carbon 3B</span>
-      <span><span class="legend-swatch" style="background:#8C7355"></span>Evo2-7B</span>
-      <span><span class="legend-swatch" style="background:#C8BC99"></span>GENERator-v2 3B</span>
-      <span style="color:#888">higher is better · all scores in %</span>
+    <div class="track-axis-label chart-legend">
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#1A7A40"></span>Carbon 8B</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#6DBF7E"></span>Carbon 3B</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#5A5A56"></span>Evo2-7B</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#B5B0A6"></span>GENERator-v2 3B</span>
     </div>
   </div>