Demo polish: colorblind-safe §6 strand; §5 completion-fold; §1 helix occlusion; §7 score chip; logo SVG; §8 evals refresh

- §6 UMAP: strand palette switched from green/red to Okabe-Ito blue/vermillion
so the +/- coloring survives deuteranopia and protanopia (the previous pair
collapsed to two near-identical grays under both common CVD types).
- §5 Folding: new completion-fold pipeline (75% CDS prompt → 25% predicted →
fold the C-term tail with ESMFold); mrna-info row reads the prompt/predict
ratio for completion-fold genes, falls back to the original
genomic→mRNA→ORF chain for legacy fixtures. genes.json gains the
fold_setup / fold_example fields and a sections[] tag to scope the showcase
set per panel.
- §1 Intro: helix occlusion now splits each strand at depth-zero PEAKS rather
than centerline crossings, so the "behind" arcs alternate between upper and
lower lobes and rungs occlude correctly under the front strand. Edge-touching
arcs render solid (no ghosted 5'/3' label ties).
- §7 Tree: agreement-score chip redesigned as a typographic stat block —
percentage in Carbon green + raw ratio + uppercase caption, no chrome.
- Banner: replaces the inline "C / carbon" glyph stamp with a real
img/logo.svg asset; .logo-card simplified to a 44x44 image holder.
- §8 Results: re-pulled values from HuggingFaceBio/final-paper-evals; lede
and takeaway prose updated to match (Carbon-8B leads 5/8 instead of 6/8).
- Misc: shared/config.js gains genesForSection() so each section can scope
the catalog without polluting siblings.

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

assets/js/sections/completion.js

@@ -310,7 +310,8 @@
   }
 
   // Bootstrap
-  loadGenes().then(genes => {
+  loadGenes().then(allGenes => {
+    const genes = genesForSection(allGenes, "completion");
     els.pills.innerHTML = genes.map((g, i) =>
       `<button class="pill${i === 0 ? " active" : ""}" data-gene="${g.symbol}">${g.symbol}</button>`
     ).join("");

assets/js/sections/folding.js

@@ -195,6 +195,28 @@
   function renderMRNAInfo() {
     const g = GENES_LOCAL?.find(x => x.symbol === currentGeneSymbol);
     if (!g) { els.mrna.textContent = "·"; return; }
+
+    // "completion-fold" genes ship as a CDS-only fixture (no genomic
+    // intron annotation): the prompt is the first ~75% of the CDS, Carbon
+    // is asked to predict the remaining ~25%, and only that C-terminal
+    // tail is folded. Render a reading of THAT pipeline rather than the
+    // genomic→mRNA→ORF chain that suits the original §5 fixtures.
+    if (g.fold_setup?.mode === "completion-fold") {
+      const fs = g.fold_setup;
+      const totalBP = g.length;
+      const promptBP = fs.prompt_bp;
+      const genBP    = fs.generated_bp;
+      const promptPct = Math.round((promptBP / totalBP) * 100);
+      const genPct    = 100 - promptPct;
+      const aaLen     = g.fold_example?.ref_aa?.length ?? Math.floor(genBP / 3);
+      els.mrna.innerHTML =
+        `<strong>${totalBP.toLocaleString("en-US")} bp</strong> CDS` +
+        ` <span class="arrow">→</span> prompt <strong>${promptBP.toLocaleString("en-US")} bp</strong> (${promptPct}%)` +
+        ` <span class="arrow">→</span> predict <strong>${genBP.toLocaleString("en-US")} bp</strong> (${genPct}%)` +
+        ` <span class="arrow">→</span> fold <strong>${aaLen} aa</strong> C-term`;
+      return;
+    }
+
     const mrna = spliceExons(g.seq, g.exons);
     const orf  = findLongestORF(mrna, 30);
     const genomicBP = g.length;
@@ -629,7 +651,8 @@
   }
 
   // --- Bootstrap ---------------------------------------------------------
-  loadGenes().then(genes => {
+  loadGenes().then(allGenes => {
+    const genes = genesForSection(allGenes, "folding");
     GENES_LOCAL = genes;
     els.pills.innerHTML = genes.map((g, i) =>
       `<button class="pill${i === 0 ? " active" : ""}" data-gene="${g.symbol}">${g.symbol}</button>`

assets/js/sections/intro.js

@@ -222,11 +222,102 @@
       return [r.yTop + sep * 0.25, r.yTop + sep * 0.75];
     }
 
-    // 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.
+    // Split each strand at its DEPTH transitions (z = 0) rather than at
+    // its y=yc crossings. In a 3D helix the depth coord is 90° out of
+    // phase with the visible y, so z(x) = cos(2πx/T + phase). z hits
+    // zero — i.e. the strand is exactly mid-depth, neither front nor
+    // back — at the visual PEAKS of the wave (x = T/4, 3T/4, 5T/4, …).
+    // Between two consecutive peaks the strand sits entirely on one
+    // side of the camera plane: front if z > 0, back if z < 0. Each
+    // "back" arc therefore runs diagonally from one peak to the next
+    // (bottom-peak → top-peak, or vice versa), passing THROUGH the
+    // centerline crossing in its middle. That's exactly where the
+    // strand crosses behind the other strand, which is also where we
+    // want the strongest fade — STROKE at the peak ends of each arc,
+    // STRAND_BACK in the middle, smoothly back to STROKE at the next
+    // peak. Net effect: the fade alternates between the upper-going
+    // strand and the lower-going strand as we walk along the helix,
+    // instead of always tagging the below-centerline lobes as the
+    // back (the bug the previous "split at y=yc" version had — both
+    // bottom lobes were faded, both top lobes were full ink). The
+    // same gradient also handles the strand extremities cleanly: the
+    // edge segments are clipped to x=6 / x=W-6 but their gradient
+    // still anchors at STROKE there, so the 5'/3' label ties never
+    // look ghosted.
+    const STRAND_BACK = "rgb(185, 185, 175)";  // ~25% contrast vs paper — clearly recessed
+
+    // Boundaries: the strand extremities plus every depth-zero peak
+    // (x = T/4, 3T/4, …) that falls inside the SVG.
+    const boundaries = [0];
+    for (let k = 0; ; k++) {
+      const x = period / 4 + k * (period / 2);
+      if (x >= W) break;
+      boundaries.push(x);
+    }
+    boundaries.push(W);
+
+    const defs = el("defs", {}, svg);
+    let backGradCount = 0;
+    function backGradId(x0, x1) {
+      const id = `cd-helix-back-${backGradCount++}`;
+      const grad = el("linearGradient", {
+        id, gradientUnits: "userSpaceOnUse",
+        x1: x0, y1: 0, x2: x1, y2: 0,
+      }, defs);
+      el("stop", { offset: "0%",   "stop-color": STROKE      }, grad);
+      el("stop", { offset: "50%",  "stop-color": STRAND_BACK }, grad);
+      el("stop", { offset: "100%", "stop-color": STROKE      }, grad);
+      return id;
+    }
+
+    function zAt(x, phase) { return Math.cos((2 * Math.PI * x) / period + phase); }
+
+    function buildSegments(phase) {
+      const out = [];
+      for (let i = 0; i < boundaries.length - 1; i++) {
+        const b0 = boundaries[i], b1 = boundaries[i + 1];
+        const x0 = Math.max(b0, 6);
+        const x1 = Math.min(b1, W - 6);
+        if (x1 - x0 < 1) continue;
+        // Classify against the UN-clipped segment centre so edge-clipped
+        // segments still pick up the right sign of z.
+        const isFront = zAt((b0 + b1) / 2, phase) > 0;
+        let d = "";
+        for (let x = x0; x <= x1; x += 2) {
+          d += (d ? " L " : "M ") + x.toFixed(2) + " " + yAt(x, phase).toFixed(2);
+        }
+        // Make sure the path reaches x1 exactly: the 2-px sampling
+        // can otherwise leave a hairline gap right at the join.
+        const lastX = x0 + Math.floor((x1 - x0) / 2) * 2;
+        if (lastX < x1) d += " L " + x1.toFixed(2) + " " + yAt(x1, phase).toFixed(2);
+        out.push({ d, isFront, x0, x1 });
+      }
+      return out;
+    }
+    const allSegs = buildSegments(phaseA).concat(buildSegments(phaseB));
+
+    // 1. Back arcs — drawn first so the rungs sit on top of them.
+    //    Arcs that touch a strand extremity (the very-left or very-right
+    //    edge of the rendered range) skip the fade gradient entirely and
+    //    render in solid STROKE: the 5'/3' label ties should land on a
+    //    fully-inked stretch of strand, not on a half-ghosted segment.
+    //    They still draw in the back z-layer so they sit BEHIND the
+    //    rungs like any other recessed arc.
+    for (const s of allSegs) {
+      if (s.isFront) continue;
+      const touchesEdge = s.x0 <= 6 || s.x1 >= W - 6;
+      el("path", {
+        d: s.d, fill: "none",
+        stroke: touchesEdge ? STROKE : `url(#${backGradId(s.x0, s.x1)})`,
+        "stroke-width": 2, "stroke-linecap": "round",
+      }, svg);
+    }
+
+    // 2. Rungs. 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) {
       const fade = fadeForSep(r.sep);
       const [yA, yB] = rungLetterYs(r);
@@ -244,19 +335,18 @@
       }
     }
 
-    // 2. Strand paths
-    function pathD(phase) {
-      let d = "";
-      for (let x = 6; x <= W - 6; x += 2) {
-        const y = yAt(x, phase);
-        d += (d ? " L " : "M ") + x.toFixed(2) + " " + y.toFixed(2);
-      }
-      return d;
+    // 3. Front arcs — on top of the rungs so they visually OCCLUDE
+    //    the rungs they pass in front of, completing the depth illusion.
+    for (const s of allSegs) {
+      if (!s.isFront) continue;
+      el("path", {
+        d: s.d, fill: "none",
+        stroke: STROKE,
+        "stroke-width": 2, "stroke-linecap": "round",
+      }, svg);
     }
-    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);
 
-    // 3. Letter glyphs themselves (no haloes, since the rung is already
+    // 4. 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

assets/js/sections/results.js

@@ -31,14 +31,18 @@
   // 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.
+  // Values from the final-paper-evals dataset (HuggingFaceBio/final-paper-evals).
+  // Synonymous codons is the mean of syn_human and syn_mouse (the dataset
+  // ships an "avg" column that already does this). Column order in `vals`
+  // mirrors MODELS above: [Carbon-8B, Carbon-3B, Evo2-7B, GENERator-v2 3B].
   const ROWS = [
-    { 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: "Sequence recovery",      cat: "Generative",     vals: [64.05, 61.54, 59.86, 58.56] },
+    { task: "BRCA2",                  cat: "Variant effect", vals: [85.72, 84.63, 83.52, 81.93] },
+    { task: "TraitGym Mendelian",     cat: "Variant effect", vals: [36.43, 33.65, 37.78, 27.91] },
+    { task: "ClinVar coding",         cat: "Variant effect", vals: [93.11, 92.89, 93.33, 91.55] },
+    { task: "ClinVar non-coding",     cat: "Variant effect", vals: [91.63, 91.14, 89.79, 90.13] },
+    { task: "Triplet expansion",      cat: "Perturbation",   vals: [89.05, 85.20, 88.43, 83.06] },
+    { task: "Synonymous codons",      cat: "Perturbation",   vals: [91.46, 88.89, 91.59, 87.03] },
     { task: "Genome-NIAH · 393 kbp",  cat: "Long-context",   vals: [86.00, 79.00, 80.00, null] },
   ];
 

assets/js/sections/track.js

@@ -198,7 +198,8 @@
     updateStats();
   }
 
-  loadGenes().then(genes => {
+  loadGenes().then(allGenes => {
+    const genes = genesForSection(allGenes, "track");
     // Hydrate cache from precomputed tracks
     for (const g of genes) {
       if (g.track) {

assets/js/sections/tree.js

@@ -46,6 +46,7 @@
     rows:     document.getElementById("dtree-rows"),
     info:     document.getElementById("dtree-info"),
     score:    document.getElementById("dtree-score"),
+    scorePct: document.getElementById("dtree-score-pct"),
     scoreSx:  document.getElementById("dtree-score-suffix"),
     nSp:      document.getElementById("dtree-n"),
     nSeq:     document.getElementById("dtree-nseq"),
@@ -97,6 +98,8 @@
   }
 
   // -------- score chip --------
+  // Three pieces of typography: headline % (Carbon green), raw ratio
+  // (m of total, muted), uppercase caption naming the comparison.
   function updateScore() {
     let m = 0, total = 0;
     Object.values(agreement).forEach(v => {
@@ -105,8 +108,9 @@
       if (v === "match") m += 1;
     });
     const pct = total ? Math.round(100 * m / total) : 0;
-    els.score.textContent = `${m} / ${total}`;
-    els.scoreSx.textContent = `match ncbi ${state.scope} (${pct}%)`;
+    if (els.scorePct) els.scorePct.textContent = `${pct}%`;
+    els.score.textContent = `${m} of ${total}`;
+    els.scoreSx.textContent = `match · ncbi ${state.scope}`;
   }
 
   // -------- SVG dendrogram spine --------

assets/js/sections/umap.js

@@ -62,9 +62,14 @@
     [40,100,200],  // snRNA          , vivid blue
     [240,160,30],  // misc_RNA       , amber (was gray, invisible)
   ];
+  // Forward / reverse strand. Bleu / orange dérivés de la palette Okabe-Ito,
+  // standard en visu scientifique pour les oppositions binaires : reste
+  // lisible en deutéranopie et protanopie (les deux formes les plus courantes
+  // de daltonisme), là où le couple vert/reverse-rouge typique s'effondre en
+  // deux gris indistincts.
   const STRAND_PALETTE = [
-    [49,127,63],   // + (forward)
-    [188,46,37],   // - (reverse)
+    [0,114,178],   // + (forward), Okabe-Ito blue
+    [213,94,0],    // - (reverse), Okabe-Ito vermillion
   ];
   // Continuous gradient for gc_content (uint8 0..255 → [0, 1]).
   // 3-stop: low GC (AT-rich) reads as cool steel, mid as neutral, high

assets/js/sections/vep.js

@@ -120,14 +120,19 @@
         : `<span class="seq-char arrow-char">&nbsp;</span>`
     ).join("");
 
-    // Scores. While a rescore is pending (editedScore == null) the original
-    // score still shows from cache (it doesn't depend on the edit) but the
-    // mutation score blanks to "·".
+    // Scores + verdict. While a rescore is pending after a user edit
+    // (editedScore == null but cache[v.rs] is set), we fall back to the
+    // cached canonical score so the verdict sentence and both score cells
+    // keep rendering instead of collapsing to "computing model likelihoods…"
+    // — that swap shrank the multi-line verdict to a single line and made
+    // the whole demo box jump in height on every click. The "pending"
+    // state is communicated by the toolbar status pill (set in
+    // onBaseClick) instead. On a first-time load of an unscored variant
+    // (no cache yet) s is null and we keep the original placeholder.
     let origVal = "·", mutVal = "·", origCls = "", mutCls = "";
     let verdictHtml = `<span style="color:#888">computing model likelihoods…</span>`;
-    const s = editedScore;
     const cached = cache[v.rs];
-    if (cached) origVal = cached.refSum.toFixed(2);
+    const s = editedScore || cached;
     if (s) {
       const delta = s.altSum - s.refSum;
       origVal = s.refSum.toFixed(2);
@@ -188,13 +193,17 @@
     const next = cycleBase(cur);
     mutationSlice = mutationSlice.slice(0, idx) + next + mutationSlice.slice(idx + 1);
     editedScore = null;            // pending refetch
+    // Surface the pending state in the toolbar pill right away (before the
+    // 500 ms debounce kicks in). The verdict block keeps the previous
+    // sentence visible so the box height stays put while we wait.
+    setStatus("pending", "streaming");
     renderWindowDisplay(v);
     clearTimeout(rescoreTimer);
     rescoreTimer = setTimeout(() => rescoreEdited(v), 500);
   }
 
   async function rescoreEdited(v) {
-    setStatus(`scoring ${v.name}…`, "streaming");
+    setStatus("pending", "streaming");
     try {
       const altFull = altWindow(v);
       const [refResp, altResp] = await Promise.all([

assets/js/shared/config.js

@@ -30,3 +30,12 @@ function loadGenes() {
   }
   return GENES_PROMISE;
 }
+
+// Filter the gene catalog down to those declared as belonging to a given
+// section ("completion" / "track" / "folding"). Genes that don't ship a
+// `sections` field are visible everywhere (legacy behaviour); genes that
+// do are scoped to the named sections only. Lets §5 swap in a "Carbon
+// works well here" showcase set without polluting §1 / §3, and vice-versa.
+function genesForSection(genes, name) {
+  return genes.filter(g => !g.sections || g.sections.includes(name));
+}

assets/styles/banner.css

@@ -59,37 +59,24 @@
   align-items: center;
   gap: 10px;
 }
+/* The SVG ships with its own black frame + white fill (see img/logo.svg),
+   so the parent .logo-card no longer paints a border or a background of
+   its own — the previous cream chip + 1px hairline doubled up with the
+   SVG's own stamp. We keep the fixed 44x44 footprint and a subtle
+   opacity dip on hover so the link still has an affordance. */
 .logo-card {
   width: 44px;
   height: 44px;
-  border: 1px solid var(--hairline);
-  border-radius: 0;          /* sharp corners, feels more "stamp" than "chip" */
-  background: #fbfaf3;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  color: var(--ink);
+  display: block;
   flex-shrink: 0;
-  position: relative;
-  transition: border-color 0.18s, background 0.18s;
-}
-.logo-card:hover { border-color: #1f1f1d; background: #fff; }
-.logo-glyph {
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 1;
-  letter-spacing: -0.02em;
+  text-decoration: none;
+  transition: opacity 0.18s;
 }
-.logo-label {
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  font-size: 7px;
-  font-weight: 400;
-  color: #8a8a85;
-  margin-top: 2px;
-  letter-spacing: 0.04em;
+.logo-card:hover { opacity: 0.78; }
+.logo-img {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 .banner-breadcrumb {
   display: flex;

assets/styles/section-tree.css

@@ -21,21 +21,34 @@
   text-transform: lowercase;
   letter-spacing: 0;
 }
-/* Big agreement score chip up top, the headline metric for §7. */
+/* Headline agreement metric for §7: a percentage in Carbon green next to
+   the raw ratio, with a discrete uppercase caption underneath naming what
+   the score compares against (e.g. "match · ncbi kingdom"). Pure typography,
+   no chrome, no progress bar — sits in the toolbar as a quiet stat block. */
 .tree-score {
-  display: inline-flex; align-items: baseline; gap: 8px;
-  background: #f0eee5; border: 1px solid #d8d5c8;
-  padding: 6px 12px; border-radius: 3px;
+  display: inline-flex; flex-direction: column;
+  align-items: flex-end; gap: 2px;
   font-family: "JetBrains Mono", monospace;
   color: #1f1f1d;
 }
-.tree-score-num {
-  font-size: 15px; font-weight: 600;
-  font-variant-numeric: tabular-nums;
+.tree-score-headline {
+  display: flex; align-items: baseline; gap: 8px;
+}
+.tree-score-pct {
+  font-size: 17px; font-weight: 700;
+  line-height: 1;
   color: #317f3f;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
 }
-.tree-score-suffix {
-  font-size: 10px; color: #888;
+.tree-score-ratio {
+  font-size: 11px;
+  color: #888;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.tree-score-label {
+  font-size: 9px; color: #888;
   text-transform: uppercase; letter-spacing: 1.2px;
 }
 /* Main grid : SVG spine on the left, aligned tracks on the right.

demo.html

@@ -57,8 +57,7 @@
            path beside it functions as a breadcrumb / model identifier. -->
       <div class="banner-identity">
         <a class="logo-card" href="#" aria-label="Carbon, go to top">
-          <span class="logo-glyph" aria-hidden="true">C</span>
-          <span class="logo-label">carbon</span>
+          <img class="logo-img" src="/img/logo.svg" alt="" width="44" height="44">
         </a>
         <div class="banner-breadcrumb">
           <div class="banner-title">CARBON</div>
@@ -91,7 +90,7 @@
             </a>
           </li>
           <li>
-            <a href="#" target="_blank" rel="noopener">
+            <a href="https://github.com/huggingface/carbon" target="_blank" rel="noopener">
               Code<span class="arrow" aria-hidden="true">↗</span>
             </a>
           </li>
@@ -935,10 +934,11 @@ for name, ids in zip(species_prefixes, new_ids):
   <div class="section-num">§5 · Folding</div>
   <div class="section-title">From sequence to structure</div>
   <p class="lede">
-    When Carbon completes an open reading frame, the resulting bases translate to a protein:
-    a protein that folds. We feed the resulting ORF into ESMFold and render the
-    3D structure inline, alongside the same protein folded from the reference sequence so you
-    can see whether Carbon's continuation produced something biologically plausible.
+    Show Carbon the first <em>75%</em> of a coding sequence, ask it to predict the remaining
+    <em>25%</em>, then translate and fold the resulting C-terminal stretch with ESMFold. Each
+    panel below pairs Carbon's predicted protein against the reference fold for the same
+    residues, so you can read at a glance whether the bases the model emitted assemble into a
+    biologically plausible structure or collapse into noise.
   </p>
   </div>
 
@@ -955,10 +955,10 @@ for name, ids in zip(species_prefixes, new_ids):
     </div>
 
     <div class="gene-info" id="dfold-info">loading genes…</div>
-    <!-- Materialises the §5 lede's "DNA → mRNA → protein → 3D" arrow:
-         shows the genomic→mature-mRNA→protein progression for the
-         currently selected gene, so the splicing step (which both the
-         reference and Carbon's continuation go through) isn't invisible. -->
+    <!-- Materialises the §5 lede's "75% prompt → 25% prediction → fold"
+         pipeline for the currently selected gene, so the visitor sees how
+         many bp Carbon was given vs how many it had to predict before any
+         folding happens. -->
     <div class="mrna-info" id="dfold-mrna">·</div>
 
     <div class="fold-aa-grid">
@@ -1015,10 +1015,12 @@ for name, ids in zip(species_prefixes, new_ids):
 
   <div class="takeaway">
     <strong>What to look for</strong>
-    A high <em>pLDDT</em> means ESMFold is confident the predicted structure
-    is correct for that residue. When Carbon's completion diverges at the
-    base level but still produces a sequence whose 3D fold matches the
-    reference, the model has captured something deeper than memorization.
+    A high <em>pLDDT</em> means ESMFold is confident in the predicted structure
+    at that residue. The interesting case is when Carbon's completion <em>diverges
+    at the base level</em> &mdash; sometimes drastically, like CFTR at ~22% identity &mdash;
+    but still folds with high confidence into a shape that mirrors the reference
+    backbone. That's the model reaching past memorization for the structural
+    grammar underneath the sequence.
   </div>
   </div>
 </section>
@@ -1123,10 +1125,13 @@ for name, ids in zip(species_prefixes, new_ids):
         <button class="pill" data-scope="sister">sister-level</button>
       </span>
       <span class="spacer"></span>
-      <span class="tree-score">
-        <span class="tree-score-num" id="dtree-score">/</span>
-        <span class="tree-score-suffix" id="dtree-score-suffix">match ncbi</span>
-      </span>
+      <div class="tree-score">
+        <div class="tree-score-headline">
+          <span class="tree-score-pct" id="dtree-score-pct">·</span>
+          <span class="tree-score-ratio" id="dtree-score">·</span>
+        </div>
+        <div class="tree-score-label" id="dtree-score-suffix">match · ncbi kingdom</div>
+      </div>
     </div>
 
     <div class="gene-info" id="dtree-info">hover a row to see its top neighbours · toggle linkage / scope above</div>
@@ -1699,7 +1704,7 @@ print(tok.decode(new_ids, skip_special_tokens=True))</code></pre></div>
     perturbation (synthetic motif insertion and synonymous codon shuffling), and long-context
     retrieval (Genome-NIAH at 393&nbsp;kbp). No fine-tuning, no head training, all four frozen
     pretrained models scored under the same protocol. Carbon-3B is competitive with Evo2-7B
-    despite less than half the parameters; Carbon-8B is ahead on six of eight.
+    despite less than half the parameters; Carbon-8B is ahead on five of eight.
   </p>
   </div>
 
@@ -1716,12 +1721,12 @@ print(tok.decode(new_ids, skip_special_tokens=True))</code></pre></div>
 
   <div class="takeaway">
     <strong>How to read it</strong>
-    Carbon-8B leads on BRCA2, both ClinVar splits, both perturbation tasks, and Genome-NIAH at
-    393 kbp. Evo2-7B remains stronger on TraitGym Mendelian (a hard non-coding variant set) and
-    on sequence recovery, where its single-nucleotide tokenizer has an inherent advantage at the
-    same context length. The pattern is broad rather than peaky: Carbon's gains come from data,
-    tokenizer, and objective design, distributed across tasks, not from a single specialised
-    benchmark.
+    Carbon-8B leads on sequence recovery, BRCA2, ClinVar non-coding, triplet expansion, and
+    Genome-NIAH at 393 kbp. Evo2-7B holds onto TraitGym Mendelian (a hard non-coding variant set),
+    and edges Carbon-8B on ClinVar coding and synonymous codon shuffling by a fraction of a point
+    each &mdash; small enough to be effectively a tie. The pattern is broad rather than peaky:
+    Carbon's gains come from data, tokenizer, and objective design, distributed across tasks,
+    not from a single specialised benchmark.
   </div>
   </div>
 </section>