§5 Folding + §6 UMAP: editorial polish for prod

§5 Folding
- AA block laid out as two columns (Carbon left, Reference right)
mirroring the 3D viewer grid below, with chips and length tags
on each label so the visitor reads "131 aa carbon vs 147 aa
reference, 96 mismatches" at a glance
- Reference row highlights the same positions as Carbon plus the
trailing residues that Carbon dropped (length asymmetry), in the
same red as §1 mismatches
- mRNA-info strip simplified — the duplicate REFERENCE chip moved
out, Carbon/Reference labels in the columns now disambiguate
- Soft-wrap tightened from 60 to 40 chars so the two columns line
up row-by-row at typical viewport widths

§6 UMAP
- Six-kingdom species palette (27 species) replacing the synthetic
24-species one
- Biotype palette rebalanced: dominant protein_coding desaturated
to sage so minority biotypes (lncRNA, snRNA, misc_RNA) read
through the overplot
- Continuous gc_content gradient replaces the codon-phase pill
- Deterministic Fisher-Yates shuffle on the points before GPU
upload so no category systematically occludes the others
- Premultiplied alpha blending fix in the fragment shader, base
alpha lowered to 0.22 for a softer cloud
- Paper-tone canvas background (#fbfaf6) consistent with the rest
of the demo
- Pan/zoom clamped: min scale = 1, translation bounded to data
extent so the cloud always fills the viewport

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

demo.html

@@ -296,8 +296,11 @@
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 10;
-    background: #fff;
-    border: 1px solid #eee;
+    /* Slight off-white that matches the editorial paper tone (body uses
+       #f7f5ee). Pure white made the desaturated minority biotypes vanish
+       into the page and made the saturated palette look harsh. */
+    background: #fbfaf6;
+    border: 1px solid #e5e3da;
     overflow: hidden;
   }
   .umap-canvas {
@@ -361,6 +364,17 @@
     align-items: center;
     cursor: default;
   }
+  .umap-legend .item.gc-grad {
+    gap: 8px;
+  }
+  .umap-legend .item.gc-grad svg {
+    border-radius: 2px;
+    display: block;
+  }
+  .umap-legend .item.gc-grad .gc-ticks {
+    letter-spacing: 0.5px;
+    color: #888;
+  }
 
   /* --- Gene-completion specifics (§1) --- */
   .gene-info {
@@ -393,6 +407,25 @@
     display: inline-block; width: 8px; height: 8px; vertical-align: middle;
     margin-right: 4px; border-radius: 1px;
   }
+  /* 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. */
+  .seq-label .seq-tag {
+    display: inline-block;
+    font-size: 9px; letter-spacing: 1.5px;
+    padding: 1px 6px; margin-right: 8px;
+    border-radius: 2px;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+  .seq-label .seq-tag.carbon { background: #1f1f1d; color: #f7f5ee; }
+  .seq-label .seq-tag.ref    { background: #f0eee5; color: #555; border: 1px solid #d8d5c8; }
+  .seq-label .aa-len-tag {
+    color: #1f1f1d;
+    font-variant-numeric: tabular-nums;
+    text-transform: none;
+    letter-spacing: 0.3px;
+  }
   .stat-row {
     display: flex; flex-wrap: wrap; gap: 24px;
     margin-top: 14px; padding-top: 12px; border-top: 1px solid #eee;
@@ -448,6 +481,12 @@
   }
   .fold-viewer.running .fold-overlay { display: flex; }
   .fold-viewer.running canvas { opacity: 0.28; }
+  /* Same overlay reused for genes whose precomputed fixture isn't ready
+     yet (HF endpoint downtime, fresh symbol added to the list, etc.).
+     Canvas fades almost fully so the empty WebGL frame doesn't read as
+     a bug — the overlay carries the explanation instead. */
+  .fold-viewer.pending .fold-overlay { display: flex; }
+  .fold-viewer.pending canvas { opacity: 0.08; }
   .fold-legend {
     font-family: "JetBrains Mono", monospace;
     font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1.2px;
@@ -470,8 +509,43 @@
     padding: 1px 6px;
     border-radius: 2px;
   }
+  /* Materialises the DNA → mRNA → protein arrow under the gene info,
+     using the same monospace family/colour family as the rest of the
+     metadata strip. The chevron is drawn with → to read as a flow,
+     not a list. */
+  .mrna-info {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 11px;
+    color: #888;
+    margin: 4px 0 16px;
+    letter-spacing: 0.3px;
+  }
+  .mrna-info .arrow { color: #b8b8b6; padding: 0 6px; }
+  .mrna-info strong { color: #555; font-weight: 500; }
+  .mrna-info .mrna-trunc {
+    color: #b00020;
+    background: rgba(188, 46, 37, 0.08);
+    padding: 0 4px;
+    margin-left: 6px;
+    border-radius: 2px;
+  }
+  /* Two-column AA grid: Carbon (left) / Reference (right), mirroring the
+     fold-grid below so the eye lines up "carbon prediction → carbon
+     fold" on one side and "reference truth → reference fold" on the
+     other. Stacks on narrow screens to keep each line readable. */
+  .fold-aa-grid {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
+    margin-top: 4px;
+  }
+  .fold-aa-col { display: flex; flex-direction: column; min-width: 0; }
+  /* Soft-wrap as a safety net if the wrapped 40-char line ever still
+     overflows (very narrow viewport, big font-size override, etc.).
+     The JS still inserts \n every 40 chars so Carbon and Reference
+     line up row-by-row in the common case. */
+  .fold-aa-col .seq-block { white-space: pre-wrap; word-break: break-all; overflow-x: visible; }
   @media (max-width: 720px) {
     .fold-grid { grid-template-columns: 1fr; }
+    .fold-aa-grid { grid-template-columns: 1fr; }
   }
 
   /* Mismatch highlighting in reference row */
@@ -1091,27 +1165,39 @@
   </p>
 
   <div class="demo" id="demoFold">
+    <!-- Cached-only UI: live fold UI (prefix selector, ▶ fold button,
+         status indicator) is intentionally not rendered. The pipeline
+         JS (runFold/streamGenerate/postFold) and the backend /fold
+         endpoint are still in place — see commit history or app.py if
+         you want to wire interactivity back in. -->
     <div class="demo-toolbar">
       <span>gene</span>
       <span id="dfold-pills" class="pills"></span>
-      <span class="spacer"></span>
-      <span>prompt</span>
-      <span id="dfold-prefix-pills" class="pills">
-        <button class="pill" data-prefix="100">100</button>
-        <button class="pill active" data-prefix="200">200</button>
-        <button class="pill" data-prefix="400">400</button>
-      </span>
-      <button id="dfold-go" class="action primary">▶ fold</button>
-      <span class="status" id="dfold-status"><span class="dot"></span><span>idle</span></span>
     </div>
 
     <div class="gene-info" id="dfold-info">loading genes…</div>
-
-    <div class="seq-label">
-      carbon-translated protein
-      <span style="color:#b00020">· mismatches vs reference highlighted</span>
+    <!-- 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. -->
+    <div class="mrna-info" id="dfold-mrna">—</div>
+
+    <div class="fold-aa-grid">
+      <div class="fold-aa-col">
+        <div class="seq-label" id="dfold-aa-label">
+          carbon-translated protein
+          <span style="color:#b00020">· mismatches vs reference highlighted</span>
+        </div>
+        <div class="seq-block" id="dfold-aa">— click fold —</div>
+      </div>
+      <div class="fold-aa-col">
+        <div class="seq-label" id="dfold-ref-aa-label">
+          reference protein
+          <span style="color:#b00020">· same positions highlighted</span>
+        </div>
+        <div class="seq-block" id="dfold-ref-aa">—</div>
+      </div>
     </div>
-    <div class="seq-block" id="dfold-aa">— click fold —</div>
 
     <div class="fold-grid">
       <div class="fold-viewer-col">
@@ -1131,7 +1217,7 @@
     <div class="fold-legend">
       pLDDT
       <span class="fold-legend-bar" aria-hidden="true"></span>
-      low → high · drag to rotate · scroll to zoom
+      low → high · drag to rotate
     </div>
 
     <div class="stat-row" id="dfold-stats">
@@ -1158,7 +1244,8 @@
   <div class="section-num">§6 · Embedding space</div>
   <div class="section-title">The genome, organized</div>
   <p class="lede">
-    Embed half a million sequences from 24 eukaryotes with Carbon, project to 2D
+    Embed 571,810 sequences from 27 species across six kingdoms — vertebrates,
+    invertebrates, plants, fungi, bacteria, viruses — with Carbon, project to 2D
     with UMAP, color by anything. Switch the coloring and a completely different
     organization emerges from the same points — the model's embedding space
     carries multiple axes of biology at once, none of which were ever labeled.
@@ -1171,11 +1258,10 @@
         <button class="pill active" data-color="species">species</button>
         <button class="pill" data-color="biotype">biotype</button>
         <button class="pill" data-color="strand">strand</button>
-        <button class="pill" data-color="phase">codon phase</button>
+        <button class="pill" data-color="gc">gc content</button>
       </span>
       <span class="spacer"></span>
-      <button id="dumap-reset" class="action">↺ reset view</button>
-      <span class="status" id="dumap-status"><span class="dot"></span><span>idle</span></span>
+      <button id="dumap-reset" class="action" disabled>↺ reset view</button>
     </div>
 
     <div class="gene-info" id="dumap-info">scroll to zoom · drag to pan · hover for details</div>
@@ -1183,7 +1269,7 @@
     <div class="umap-frame">
       <canvas class="umap-canvas" id="dumap-canvas"></canvas>
       <div class="umap-tooltip" id="dumap-tooltip"></div>
-      <div class="umap-status-overlay" id="dumap-overlay">loading 500K points · ~2 MB gzipped</div>
+      <div class="umap-status-overlay" id="dumap-overlay">loading 571K points · ~5.8 MB gzipped</div>
     </div>
 
     <div class="umap-legend" id="dumap-legend"></div>
@@ -1199,10 +1285,12 @@
   <div class="takeaway">
     <strong>What to look for</strong>
     Switch coloring from <em>species</em> to <em>biotype</em>: same points, completely
-    different organization emerges. The five rough macro-clusters trace the eukaryotic
-    kingdoms — vertebrates, invertebrates, plants, fungi, protozoa — discovered from
-    raw sequence alone. <em>The current 500K dataset is synthetic, awaiting the real
-    Carbon 3B embeddings.</em>
+    different organization emerges. The macro-clusters trace six kingdoms — vertebrates,
+    invertebrates, plants, fungi, bacteria, viruses — discovered from raw sequence alone.
+    Switch again to <em>gc content</em> and a perpendicular axis appears: AT-rich (cool
+    blue) vs GC-rich (warm amber) regions cut across the species clusters, revealing the
+    composition gradient the model has internalised. <em>Points: 571,810 real Carbon 3B
+    embeddings, projected to 2D via UMAP.</em>
   </div>
 </section>
 
@@ -1673,7 +1761,7 @@ function loadGenes() {
 
   function renderInfo() {
     if (!gene) { els.info.textContent = "loading genes…"; return; }
-    els.info.innerHTML = `<strong>${gene.symbol}</strong> · ${gene.blurb} · <span style="color:#888">${gene.length.toLocaleString()} bp</span>`;
+    els.info.innerHTML = `<strong>${gene.symbol}</strong> · ${gene.blurb} · <span style="color:#888">${gene.length.toLocaleString("en-US")} bp</span>`;
   }
 
   function basesPerLine() {
@@ -2124,7 +2212,7 @@ function loadGenes() {
     if (!v) return;
     selected = v;
     els.pills.querySelectorAll(".pill").forEach(p => p.classList.toggle("active", p.dataset.rs === rs));
-    els.info.innerHTML = `<strong>${v.name}</strong> · ${v.blurb} · <span style="color:#888">chr${v.chrom}:${v.pos.toLocaleString()} · ${v.ref}>${v.alt} (gene strand)</span>`;
+    els.info.innerHTML = `<strong>${v.name}</strong> · ${v.blurb} · <span style="color:#888">chr${v.chrom}:${v.pos.toLocaleString("en-US")} · ${v.ref}>${v.alt} (gene strand)</span>`;
     renderWindowDisplay(v, "ref");
     renderResult(v);
     renderForestBars();
@@ -2293,7 +2381,7 @@ function loadGenes() {
     }
 
     els.chart.innerHTML = svg;
-    els.bpLabel.textContent = `${scoredLen.toLocaleString()} bp scored`;
+    els.bpLabel.textContent = `${scoredLen.toLocaleString("en-US")} bp scored`;
   }
 
   function updateStats() {
@@ -2388,7 +2476,7 @@ function loadGenes() {
     if (!g) return;
     gene = g;
     els.pills.querySelectorAll(".pill").forEach(p => p.classList.toggle("active", p.dataset.gene === symbol));
-    els.info.innerHTML = `<strong>${gene.symbol}</strong> · ${gene.blurb} · <span style="color:#888">${Math.min(gene.length, MAX_WINDOW).toLocaleString()} bp will be scored${gene.length > MAX_WINDOW ? ` (of ${gene.length.toLocaleString()})` : ""}</span>`;
+    els.info.innerHTML = `<strong>${gene.symbol}</strong> · ${gene.blurb} · <span style="color:#888">${Math.min(gene.length, MAX_WINDOW).toLocaleString("en-US")} bp will be scored${gene.length > MAX_WINDOW ? ` (of ${gene.length.toLocaleString("en-US")})` : ""}</span>`;
     scoreData = cache[symbol] || null;
     renderTrack(scoreData ? scoreData.scoredLength : Math.min(gene.length, MAX_WINDOW));
     renderChart();
@@ -2810,7 +2898,11 @@ function loadGenes() {
     pills:       document.getElementById("dfold-pills"),
     prefixPills: document.getElementById("dfold-prefix-pills"),
     info:        document.getElementById("dfold-info"),
+    mrna:        document.getElementById("dfold-mrna"),
     aa:          document.getElementById("dfold-aa"),
+    aaLabel:     document.getElementById("dfold-aa-label"),
+    refAa:       document.getElementById("dfold-ref-aa"),
+    refAaLabel:  document.getElementById("dfold-ref-aa-label"),
     go:          document.getElementById("dfold-go"),
     status:      document.getElementById("dfold-status"),
     statusText:  document.querySelector("#dfold-status span:last-child"),
@@ -2822,38 +2914,122 @@ function loadGenes() {
     identity:    document.getElementById("dfold-id"),
   };
 
+  // No-ops gracefully when the status indicator isn't rendered (current
+  // cached-only UI doesn't ship one). All call sites are kept so the
+  // live-fold path stays a drop-in restore.
   function setStatus(text, cls) {
+    if (!els.status) return;
     els.status.className = "status" + (cls ? " " + cls : "");
-    els.statusText.textContent = text;
+    if (els.statusText) els.statusText.textContent = text;
   }
 
   function renderInfo(extra = "") {
     const g = GENES_LOCAL?.find(x => x.symbol === currentGeneSymbol);
     if (!g) { els.info.textContent = "—"; return; }
     const blurb = g.blurb ? ` · ${g.blurb}` : "";
-    const f = geneFeasibility(g);
-    const tooLong = !f.feasible
-      ? ` · <span class="fold-warn">${f.lastExonEnd.toLocaleString()} bp to last exon — too long for live fold</span>`
-      : "";
-    els.info.innerHTML = `<strong>${g.symbol}</strong> · ${g.length} bp${blurb}${tooLong}` + (extra ? ` · ${extra}` : "");
-  }
-
-  // Render Carbon's translated protein with mismatches vs the reference AA
-  // highlighted in red — mirrors §1's reference-row mismatch styling so the
-  // visual grammar carries over.
+    els.info.innerHTML = `<strong>${g.symbol}</strong> · ${g.length.toLocaleString("en-US")} bp${blurb}` + (extra ? ` · ${extra}` : "");
+  }
+
+  // Render the "DNA → mRNA → protein" progression for the current gene
+  // by reusing the same splicing + ORF logic the rest of the pipeline
+  // runs on the reference side. The numbers shown are gene-intrinsic
+  // (architecture of the gene + canonical reference protein), so they
+  // hold whether the user has clicked fold yet or not — they materialise
+  // the splicing step that's otherwise invisible between the toolbar
+  // and the AA block.
+  //
+  // Prefix is "reference:" because every number here comes from the canonical
+  // sequence in genes.json, NOT from Carbon's prediction. Without the prefix
+  // it's easy to read the strip, scroll past it, and assume the AA block
+  // below shows that same length — but Carbon's ORF is usually shorter
+  // (e.g. HBB ref 147 aa vs Carbon 131 aa).
+  function renderMRNAInfo() {
+    const g = GENES_LOCAL?.find(x => x.symbol === currentGeneSymbol);
+    if (!g) { els.mrna.textContent = "—"; return; }
+    const mrna = spliceExons(g.seq, g.exons);
+    const orf  = findLongestORF(mrna, 30);
+    const genomicBP = g.length;
+    const mrnaBP    = mrna.length;
+    const nExons    = g.exons.length;
+    if (!orf) {
+      els.mrna.innerHTML =
+        `<strong>${genomicBP.toLocaleString("en-US")} bp</strong> genomic` +
+        ` · <strong>${nExons}</strong> exon${nExons === 1 ? "" : "s"}` +
+        ` <span class="arrow">→</span> <strong>${mrnaBP.toLocaleString("en-US")} bp</strong> mRNA` +
+        ` <span class="arrow">→</span> no ORF ≥30 aa`;
+      return;
+    }
+    const trunc = orf.truncated
+      ? `<span class="mrna-trunc">truncated · no stop codon</span>` : "";
+    els.mrna.innerHTML =
+      `<strong>${genomicBP.toLocaleString("en-US")} bp</strong> genomic` +
+      ` · <strong>${nExons}</strong> exon${nExons === 1 ? "" : "s"}` +
+      ` <span class="arrow">→</span> <strong>${mrnaBP.toLocaleString("en-US")} bp</strong> mRNA` +
+      ` <span class="arrow">→</span> <strong>${orf.aa.length} aa</strong>` +
+      ` from ATG @ ${orf.startBP + 1}${trunc}`;
+  }
+
+  // Render Carbon's translated protein AND the reference protein side by
+  // side, with mismatches highlighted in red on both rows so the visitor
+  // can read the divergence in either direction. Mirrors §1's two-row
+  // model-output / reference layout so the visual grammar carries over.
+  //
+  // Length asymmetry handling:
+  //  - When Carbon's ORF is shorter than the reference (typical case),
+  //    positions past Carbon's end are highlighted on the reference row
+  //    only — they materialise "Carbon stopped early".
+  //  - When Carbon's ORF is longer than the reference (rarer), positions
+  //    past the reference's end are highlighted on Carbon's row — they
+  //    materialise "Carbon kept reading past the real stop codon".
   function renderAAComparison(carbonAA, refAA) {
-    const n = carbonAA.length;
-    const parts = new Array(n);
-    for (let i = 0; i < n; i++) {
-      const c = carbonAA[i];
-      const r = refAA[i];
-      if (r === undefined || c !== r) parts[i] = `<span class="ref-mismatch">${c}</span>`;
-      else parts[i] = c;
+    const nC = carbonAA.length;
+    const nR = refAA.length;
+
+    // Carbon row: render every position of carbon, highlight when c[i] != r[i]
+    // (or when ref ran out at i — extra Carbon residue).
+    const cParts = new Array(nC);
+    for (let i = 0; i < nC; i++) {
+      const c = carbonAA[i], r = refAA[i];
+      cParts[i] = (r === undefined || c !== r)
+        ? `<span class="ref-mismatch">${c}</span>` : c;
     }
-    // Soft-wrap at 60 chars to match the §1 sequence blocks.
-    let html = "";
-    for (let i = 0; i < n; i += 60) html += parts.slice(i, i + 60).join("") + "\n";
-    els.aa.innerHTML = html;
+    // Reference row: symmetric — render every position of ref, highlight
+    // when r[i] != c[i] (or when carbon ran out — Carbon stopped early).
+    const rParts = new Array(nR);
+    for (let i = 0; i < nR; i++) {
+      const r = refAA[i], c = carbonAA[i];
+      rParts[i] = (c === undefined || r !== c)
+        ? `<span class="ref-mismatch">${r}</span>` : r;
+    }
+    // Soft-wrap at 40 chars — the two columns are narrower than §1's
+    // single-column block, so a tighter wrap keeps lines from spilling
+    // and lets the eye scan Carbon ↔ Reference at the same y position.
+    const wrap = parts => {
+      let out = "";
+      for (let i = 0; i < parts.length; i += 40) out += parts.slice(i, i + 40).join("") + "\n";
+      return out;
+    };
+    els.aa.innerHTML    = wrap(cParts);
+    els.refAa.innerHTML = wrap(rParts);
+
+    // Length-aware labels — the visitor sees that 131 ≠ 147 at a glance and
+    // doesn't have to cross-reference with the stat row at the bottom.
+    const lenTag = (n, prefix) =>
+      `<span class="aa-len-tag">${prefix}${n} aa</span>`;
+    const mismatches = (() => {
+      const k = Math.min(nC, nR);
+      let m = 0;
+      for (let i = 0; i < k; i++) if (carbonAA[i] !== refAA[i]) m++;
+      return m;
+    })();
+    els.aaLabel.innerHTML =
+      `<span class="seq-tag carbon">carbon</span>translated protein ` +
+      lenTag(nC, "") +
+      ` <span style="color:#b00020">· ${mismatches}/${Math.min(nC,nR)} mismatches highlighted</span>`;
+    els.refAaLabel.innerHTML =
+      `<span class="seq-tag ref">reference</span>protein ` +
+      lenTag(nR, "") +
+      ` <span style="color:#888">· same positions highlighted for alignment</span>`;
   }
 
   // Hydrate the viewers and stat row from a precomputed `fold_example`
@@ -2862,6 +3038,7 @@ function loadGenes() {
   // can still trigger a fresh run with the ▶ fold button.
   function hydrateFoldExample(ex) {
     if (!ensureViewers()) return false;
+    setPending(false);  // clear any leftover "fixture pending" state
     renderStructure(viewerCarbon, ex.carbon_pdb);
     renderStructure(viewerRef,    ex.ref_pdb);
     els.nRes.textContent     = `${ex.carbon_aa.length} / ${ex.ref_aa.length}`;
@@ -2872,18 +3049,25 @@ function loadGenes() {
       el.classList.remove("muted");
     }
     renderAAComparison(ex.carbon_aa, ex.ref_aa);
-    setStatus("cached example · click fold to run fresh", "");
+    setStatus("cached example", "");
     return true;
   }
 
+  // Used when a gene has no precomputed fold_example. In the shipped
+  // cached-only build this happens for genes whose fixture is still
+  // queued for precompute (e.g. when the Carbon HF endpoint was in
+  // error during the last `python scripts/precompute.py --folds` run).
+  // We surface that state explicitly via an overlay on both viewers so
+  // it doesn't read as a bug.
   function resetFoldUI() {
-    els.aa.innerHTML = "— click fold —";
+    els.aa.innerHTML = "— fixture pending · precompute hasn't run yet for this gene —";
     for (const el of [els.nRes, els.plddtC, els.plddtR, els.identity]) {
       el.textContent = "—";
       el.classList.add("muted");
     }
     if (viewerCarbon) { viewerCarbon.removeAllModels(); viewerCarbon.render(); }
     if (viewerRef)    { viewerRef.removeAllModels();    viewerRef.render();    }
+    if (ensureViewers()) setPending(true, "fixture pending");
   }
 
   function selectGene(symbol) {
@@ -2892,6 +3076,7 @@ function loadGenes() {
       p.classList.toggle("active", p.dataset.gene === symbol)
     );
     renderInfo();
+    renderMRNAInfo();
     const g = GENES_LOCAL?.find(x => x.symbol === symbol);
     if (g?.fold_example) {
       // 3Dmol might not be loaded on the very first paint; retry shortly.
@@ -2904,7 +3089,11 @@ function loadGenes() {
     }
   }
 
+  // No-ops in the cached-only build — the prefix selector isn't rendered.
+  // Kept here so re-adding the .pills element in the toolbar wires it
+  // back up without a JS change.
   function bindPrefixPills() {
+    if (!els.prefixPills) return;
     els.prefixPills.querySelectorAll(".pill").forEach(p => {
       p.addEventListener("click", () => {
         prefixLen = +p.dataset.prefix;
@@ -2926,14 +3115,80 @@ function loadGenes() {
   function makeViewer(host) {
     if (!window.$3Dmol) return null;
     host.innerHTML = "";
-    return $3Dmol.createViewer(host, { backgroundColor: "#fafaf7", antialias: true });
-  }
-
-  // Create both viewers (idempotent) and link them so a drag/zoom on one
-  // propagates to the other. Mirrors the side-by-side "synced cameras"
-  // setup PyMOL/ChimeraX use for structure comparison — the visitor sees
-  // the same orientation of both proteins, which is what makes the
-  // visual comparison meaningful.
+    const v = $3Dmol.createViewer(host, { backgroundColor: "#fafaf7", antialias: true });
+    // 3Dmol installs a wheel listener on its internal canvas that zooms
+    // the camera AND preventDefaults the page scroll. We only want orbit
+    // controls; scroll should keep scrolling the page. Intercept wheel
+    // events at the host in capture phase and stopImmediatePropagation
+    // so 3Dmol never sees them. No preventDefault → browser scroll runs.
+    // We also use this hook to bump the idle-rotation timer below so
+    // ambient spin pauses the instant the visitor touches a viewer.
+    host.addEventListener("wheel", (e) => {
+      e.stopImmediatePropagation();
+      bumpInteraction();
+    }, { capture: true, passive: true });
+    for (const ev of ["pointerdown", "touchstart"]) {
+      host.addEventListener(ev, bumpInteraction, { capture: true, passive: true });
+    }
+    return v;
+  }
+
+  // ── Idle auto-rotation ────────────────────────────────────────────
+  // Gentle constant-velocity Y-spin while the visitor isn't interacting,
+  // to give the side-by-side comparison some life without forcing them
+  // to drag every time. Any pointer/wheel input pauses immediately;
+  // after IDLE_DELAY_MS of silence we ramp the spin back in over RAMP_MS
+  // with an ease-in-out so the resume isn't jarring. We rotate only
+  // viewerCarbon — linkViewer mirrors it onto viewerRef in the same
+  // frame, so the two cartoons stay perfectly in sync.
+  const IDLE_ROT_DELAY_MS = 2500;
+  const IDLE_ROT_RAMP_MS  = 900;
+  const IDLE_ROT_MAX_DPS  = 1;   // ~one revolution per minute
+  const PREFERS_REDUCED_MOTION = window.matchMedia
+    ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    : false;
+  let lastInteractionAt = performance.now();
+  let idleRotRAF = 0;
+  let idleRotLastT = 0;
+  let idleRotSectionVisible = true;
+  function bumpInteraction() { lastInteractionAt = performance.now(); }
+  function idleRotStep(now) {
+    idleRotRAF = 0;
+    if (!viewerCarbon || !viewerRef) return;
+    const dt = idleRotLastT ? Math.min(100, now - idleRotLastT) : 16;
+    idleRotLastT = now;
+    const idle = now - lastInteractionAt;
+    if (idle >= IDLE_ROT_DELAY_MS && idleRotSectionVisible && !PREFERS_REDUCED_MOTION) {
+      const k = Math.min(1, (idle - IDLE_ROT_DELAY_MS) / IDLE_ROT_RAMP_MS);
+      const eased = k < 0.5 ? 2 * k * k : 1 - Math.pow(-2 * k + 2, 2) / 2;
+      const deg = IDLE_ROT_MAX_DPS * eased * (dt / 1000);
+      if (deg > 0) viewerCarbon.rotate(deg, "y", 0, false);
+    }
+    idleRotRAF = requestAnimationFrame(idleRotStep);
+  }
+  function startIdleRotation() {
+    if (idleRotRAF || PREFERS_REDUCED_MOTION) return;
+    idleRotLastT = 0;
+    idleRotRAF = requestAnimationFrame(idleRotStep);
+  }
+
+  // Pause the rAF loop when the §5 section is offscreen — no point
+  // burning frames on cartoons the visitor can't see.
+  function watchFoldingVisibility() {
+    const section = document.getElementById("folding");
+    if (!section || !window.IntersectionObserver) return;
+    new IntersectionObserver((entries) => {
+      for (const e of entries) idleRotSectionVisible = e.isIntersecting;
+    }, { threshold: 0.01 }).observe(section);
+  }
+  watchFoldingVisibility();
+
+  // Create both viewers (idempotent) and link them so an orbit drag on
+  // one propagates to the other. Mirrors the side-by-side "synced
+  // cameras" setup PyMOL/ChimeraX use for structure comparison — the
+  // visitor sees the same orientation of both proteins, which is what
+  // makes the visual comparison meaningful. (Wheel zoom is intentionally
+  // disabled in makeViewer so scroll keeps scrolling the page.)
   let viewersLinked = false;
   function ensureViewers() {
     if (!window.$3Dmol) return false;
@@ -2945,6 +3200,7 @@ function loadGenes() {
       viewerRef.linkViewer(viewerCarbon);
       viewersLinked = true;
     }
+    startIdleRotation();
     return !!(viewerCarbon && viewerRef);
   }
 
@@ -2964,13 +3220,28 @@ function loadGenes() {
   function setRunning(running, label = "computing") {
     for (const host of [els.vCarbon, els.vRef]) {
       host.classList.toggle("running", running);
-      const t = host.querySelector(".fold-overlay-label");
-      if (t) t.textContent = label;
+      if (running) {
+        const t = host.querySelector(".fold-overlay-label");
+        if (t) t.textContent = label;
+      }
     }
     for (const el of [els.nRes, els.plddtC, els.plddtR, els.identity]) {
       el.classList.toggle("muted", running);
     }
-    els.go.textContent = running ? "running…" : "▶ fold";
+    if (els.go) els.go.textContent = running ? "running…" : "▶ fold";
+  }
+
+  // Mirror of setRunning for the "fixture not ready" state. Reuses the
+  // same overlay markup but a different CSS class, so the two states
+  // can never visually conflict.
+  function setPending(pending, label = "fixture pending") {
+    for (const host of [els.vCarbon, els.vRef]) {
+      host.classList.toggle("pending", pending);
+      if (pending) {
+        const t = host.querySelector(".fold-overlay-label");
+        if (t) t.textContent = label;
+      }
+    }
   }
 
   // Editorial pLDDT palette. The three anchor colours match the legend
@@ -3032,7 +3303,7 @@ function loadGenes() {
     const f = geneFeasibility(gene);
     if (!f.feasible) {
       setStatus(
-        `${gene.symbol} spans ${f.lastExonEnd.toLocaleString()} bp of genomic DNA — ` +
+        `${gene.symbol} spans ${f.lastExonEnd.toLocaleString("en-US")} bp of genomic DNA — ` +
         `outside what Carbon can generate live. Try HBB or INS.`,
         "error"
       );
@@ -3041,7 +3312,7 @@ function loadGenes() {
 
     abortCtrl?.abort();
     abortCtrl = new AbortController();
-    els.go.disabled = true;
+    if (els.go) els.go.disabled = true;
     ensureViewers();  // overlay must exist before we toggle .running on it
 
     try {
@@ -3105,7 +3376,7 @@ function loadGenes() {
     } finally {
       setRunning(false);
       abortCtrl = null;
-      els.go.disabled = false;
+      if (els.go) els.go.disabled = false;
     }
   }
 
@@ -3120,7 +3391,7 @@ function loadGenes() {
     );
     selectGene(genes[0].symbol);
     bindPrefixPills();
-    els.go.addEventListener("click", runFold);
+    els.go?.addEventListener("click", runFold);
   }).catch(e => {
     els.info.textContent = "failed to load genes: " + (e.message || e);
   });
@@ -3175,10 +3446,10 @@ function loadGenes() {
 
     const n1 = seq.length;
     const n6 = Math.ceil(seq.length / 6);
-    els.oneTok.textContent = n1.toLocaleString();
-    els.sixTok.textContent = n6.toLocaleString();
-    els.oneAtt.innerHTML = `${(n1*n1).toLocaleString()}<span style="color:#999;font-size:9px;margin-left:3px">L²</span>`;
-    els.sixAtt.innerHTML = `${(n6*n6).toLocaleString()}<span style="color:#999;font-size:9px;margin-left:3px">L²</span>`;
+    els.oneTok.textContent = n1.toLocaleString("en-US");
+    els.sixTok.textContent = n6.toLocaleString("en-US");
+    els.oneAtt.innerHTML = `${(n1*n1).toLocaleString("en-US")}<span style="color:#999;font-size:9px;margin-left:3px">L²</span>`;
+    els.sixAtt.innerHTML = `${(n6*n6).toLocaleString("en-US")}<span style="color:#999;font-size:9px;margin-left:3px">L²</span>`;
 
     // Speedup bars: visualize attention cost ratio
     const maxCost = n1 * n1 || 1;
@@ -3193,7 +3464,7 @@ function loadGenes() {
       svg += `<text x="${padL - 8}" y="${y + 13}" font-family="JetBrains Mono" font-size="11" fill="#333" text-anchor="end">${r.label}</text>`;
       const w = (r.cost / maxCost) * (W - padL - padR);
       svg += `<rect x="${padL}" y="${y}" width="${Math.max(2, w)}" height="${rowH}" fill="${r.color}"/>`;
-      svg += `<text x="${padL + w + 6}" y="${y + 13}" font-family="JetBrains Mono" font-size="10" fill="#333">${r.cost.toLocaleString()}</text>`;
+      svg += `<text x="${padL + w + 6}" y="${y + 13}" font-family="JetBrains Mono" font-size="10" fill="#333">${r.cost.toLocaleString("en-US")}</text>`;
     });
     els.bars.setAttribute("viewBox", `0 0 ${W} ${H}`);
     els.bars.style.height = `${H}px`;
@@ -3988,14 +4259,15 @@ function loadGenes() {
 })();
 
 // =========================================================================
-// §6 — UMAP scatter (WebGL, 500K points)
+// §6 — UMAP scatter (WebGL, 571K points)
 //
-// Loads a binary-packed scatter (int16 quantized positions + 4 uint8 category
-// columns) and renders it via WebGL gl.POINTS with a 1D palette texture for
-// coloring. Toggle between coloring axes (species / biotype / strand / phase)
-// rebinds a single byte-attribute buffer and swaps the palette texture — no
-// re-upload of the 500K vertex stream. Hover lookup uses a flat grid index
-// so picking stays O(small) regardless of total point count.
+// Loads a binary-packed scatter (int16 quantized 2D positions + 4 uint8 category
+// columns — species, biotype, strand, gc_content) and renders it via WebGL
+// gl.POINTS with a 1D palette texture for coloring. Toggle between coloring axes
+// (species / biotype / strand / gc) rebinds a single byte-attribute buffer and
+// swaps the palette texture — no re-upload of the 571K vertex stream. Hover
+// lookup uses a flat grid index so picking stays O(small) regardless of total
+// point count.
 // =========================================================================
 (function initDemoUmap() {
   const canvas = document.getElementById("dumap-canvas");
@@ -4005,61 +4277,94 @@ function loadGenes() {
   const info    = document.getElementById("dumap-info");
   const legend  = document.getElementById("dumap-legend");
   const resetBtn = document.getElementById("dumap-reset");
-  const status   = document.getElementById("dumap-status");
-  const statusText = status.querySelector("span:last-child");
+  // The UMAP toolbar used to ship a `<span class="status">` indicator that
+  // showed "loading…" / "loaded 571k pts · 1274 ms" / "error" next to the
+  // pills. Removed because (a) loading is already explained by the fullscreen
+  // overlay, (b) the post-load metric was telemetry-grade detail not visitor-
+  // grade insight. Calls into setStatus below survive as no-ops so the live
+  // load path doesn't have to be rewritten.
+  const status     = null;
+  const statusText = null;
   const colorPills = document.querySelectorAll("#dumap-color-pills .pill");
   const elN   = document.getElementById("dumap-n");
   const elNsp = document.getElementById("dumap-nsp");
   const elFps = document.getElementById("dumap-fps");
 
   // ---- Palettes ----------------------------------------------------------
-  // 24 species are grouped into 5 kingdoms — each kingdom gets a hue band.
+  // 27 species grouped into 6 kingdoms — each kingdom gets a hue band.
   // Within a band, lightness varies to keep adjacent species distinguishable.
+  // Order MUST match labels.species (= the order from scripts/build_real_umap.py).
   const SPECIES_PALETTE = [
-    // vertebrates (9) — blue/indigo band
-    [69,117,180],[97,144,200],[125,170,220],[153,194,240],
-    [120,90,170],[140,110,190],
-    [80,90,150],[100,110,170],[120,130,190],
-    // invertebrates (5) — orange band
-    [217,95,2],[230,120,30],[240,150,60],[250,180,90],[253,210,120],
+    // vertebrates (10) — blue/indigo/violet band
+    [40,80,160], [60,100,180], [80,120,195], [100,140,210], [120,160,225],
+    [140,100,200], [160,120,215], [125,90,170], [105,75,150], [85,60,130],
+    // invertebrates (2) — orange band
+    [220,110,30], [240,160,70],
     // plants (5) — olive/lime band (intentionally different from Carbon's
     // signal-green #317f3f so the UI chrome doesn't blend with the data)
-    [85,140,55],[115,165,75],[145,195,100],[175,220,135],[205,240,170],
-    // fungi (3) — magenta/rose band
-    [200,40,120],[220,80,140],[240,130,170],
-    // protozoa (2) — gold band
-    [200,150,30],[230,180,60],
+    [85,140,55], [115,170,75], [145,200,100], [175,220,135], [205,240,170],
+    // fungi (5) — magenta/rose band
+    [180,40,110], [200,70,140], [220,100,160], [235,130,175], [245,160,190],
+    // bacteria (3) — ochre/amber band
+    [180,140,40], [200,160,60], [220,180,80],
+    // viruses (2) — deep red band (outliers, intentionally dramatic)
+    [160,30,40], [200,50,55],
   ];
+  // protein_coding is ~80% of the points — using a saturated colour for it
+  // floods the canvas and erases the three minority biotypes. We give it a
+  // washed-out sage instead (still readable as "the green class") and crank
+  // the saturation on the rare classes so they pop on top of the carpet.
   const BIOTYPE_PALETTE = [
-    [49,127,63],   // protein_coding — Carbon green
-    [188,46,37],   // lncRNA          — Carbon red
-    [70,90,140],   // miRNA           — slate blue
-    [170,170,170], // pseudogene      — neutral gray
+    [180,205,180], // protein_coding — washed sage (volume class)
+    [210,55,45],   // lncRNA          — vivid Carbon red
+    [40,100,200],  // snRNA           — vivid blue
+    [240,160,30],  // misc_RNA        — amber (was gray, invisible)
   ];
   const STRAND_PALETTE = [
     [49,127,63],   // + (forward)
     [188,46,37],   // - (reverse)
   ];
-  // 3-step ordinal palette (viridis-ish endpoints) — codon phase 0/1/2.
-  const PHASE_PALETTE = [
-    [68,1,84], [33,144,140], [253,231,37],
-  ];
+  // Continuous gradient for gc_content (uint8 0..255 → [0, 1]).
+  // 3-stop: low GC (AT-rich) reads as cool steel, mid as neutral, high
+  // GC (GC-rich) as warm amber — natural "density" feel without
+  // colliding with the categorical palettes.
+  function buildGCPalette() {
+    const out = [];
+    for (let i = 0; i < 256; i++) {
+      const t = i / 255;
+      let r, g, b;
+      if (t < 0.5) {
+        const u = t * 2;
+        r = Math.round(60  + (170 - 60)  * u);
+        g = Math.round(90  + (170 - 90)  * u);
+        b = Math.round(160 + (170 - 160) * u);
+      } else {
+        const u = (t - 0.5) * 2;
+        r = Math.round(170 + (230 - 170) * u);
+        g = Math.round(170 + (190 - 170) * u);
+        b = Math.round(170 + (50  - 170) * u);
+      }
+      out.push([r, g, b]);
+    }
+    return out;
+  }
+  const GC_PALETTE = buildGCPalette();
   const PALETTES = {
     species: SPECIES_PALETTE,
     biotype: BIOTYPE_PALETTE,
     strand:  STRAND_PALETTE,
-    phase:   PHASE_PALETTE,
+    gc:      GC_PALETTE,
   };
 
   // ---- State -------------------------------------------------------------
   let gl, program;
   let posBuf;                          // int16 interleaved x,y
-  let catBufs = {};                    // { species|biotype|strand|phase: GLBuffer of uint8 }
+  let catBufs = {};                    // { species|biotype|strand|gc: GLBuffer of uint8 }
   let paletteTex;
   let n = 0;
-  let labels = null;                   // { species:[], biotypes:[], strands:[], phases:[], bounds:[xmin,xmax,ymin,ymax] }
+  let labels = null;                   // { species:[], biotypes:[], strands:[] } — see scripts/build_real_umap.py for the full schema
   // Raw category bytes — kept on CPU side too for tooltip lookups.
-  let cats = { species: null, biotype: null, strand: null, phase: null };
+  let cats = { species: null, biotype: null, strand: null, gc: null };
   // World bounds + current colorBy axis.
   let bounds = [0,0,0,0];
   let colorBy = "species";
@@ -4072,6 +4377,7 @@ function loadGenes() {
   let grid = null;
 
   function setStatus(state, text) {
+    if (!status) return;
     status.classList.remove("streaming", "error");
     if (state === "streaming") status.classList.add("streaming");
     if (state === "error")     status.classList.add("error");
@@ -4103,9 +4409,13 @@ function loadGenes() {
       float r = length(d);
       float aa = smoothstep(0.50, 0.42, r);
       if (aa <= 0.001) discard;
+      float a = aa * u_alpha;
       float t = (v_cat + 0.5) / u_paletteN;
       vec3 color = texture2D(u_palette, vec2(t, 0.5)).rgb;
-      gl_FragColor = vec4(color, aa * u_alpha);
+      // Pre-multiplied output matches blendFunc(ONE, ONE_MINUS_SRC_ALPHA)
+      // and prevents the dense-overlap brightening you get with straight
+      // alpha (which would need blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)).
+      gl_FragColor = vec4(color * a, a);
     }
   `;
   function compile(type, src) {
@@ -4136,7 +4446,9 @@ function loadGenes() {
     // the paper background and over each other cleanly at dense overlaps.
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-    gl.clearColor(1, 1, 1, 0);
+    // Transparent clear — the .umap-frame CSS background (paper tone) shows
+    // through, keeping the canvas in tune with the rest of the page.
+    gl.clearColor(0, 0, 0, 0);
 
     paletteTex = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, paletteTex);
@@ -4160,6 +4472,36 @@ function loadGenes() {
   }
 
   // ---- Data load ---------------------------------------------------------
+  // Mulberry32: tiny seeded PRNG, ~10 lines, good enough for visual shuffling.
+  // Picked over Math.random() because we want the same layout across reloads
+  // (so users can describe what they see and we can reproduce it).
+  function mulberry32(seed) {
+    return function() {
+      seed = (seed + 0x6D2B79F5) | 0;
+      let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  }
+
+  // Fisher-Yates over N parallel arrays: pos16 (2 entries / point, x then y)
+  // and catArrays (1 entry / point, e.g. species / biotype / strand / gc).
+  // Mutating the typed arrays in place avoids allocating a 16 MB reshuffled
+  // buffer — important at 571 K points.
+  function shuffleParallel(pos16, catArrays, n, seed) {
+    const rand = mulberry32(seed);
+    for (let i = n - 1; i > 0; i--) {
+      const j = (rand() * (i + 1)) | 0;
+      if (i === j) continue;
+      const xi = pos16[2*i],     yi = pos16[2*i + 1];
+      pos16[2*i] = pos16[2*j];   pos16[2*i + 1] = pos16[2*j + 1];
+      pos16[2*j] = xi;           pos16[2*j + 1] = yi;
+      for (const a of catArrays) {
+        const t = a[i]; a[i] = a[j]; a[j] = t;
+      }
+    }
+  }
+
   async function loadData() {
     setStatus("streaming", "loading…");
     const t0 = performance.now();
@@ -4171,27 +4513,55 @@ function loadGenes() {
     const buf = await binResp.arrayBuffer();
     labels = await labelsResp.json();
 
-    // Parse header (matches scripts/gen_fake_umap.py).
+    // Parse header (matches scripts/build_real_umap.py — 64-byte header).
+    // Layout:
+    //   u32 [magic, n_points, n_species, n_biotypes, n_strands, flags]   (24 b)
+    //   f32 [x2d_min, x2d_max, y2d_min, y2d_max]                          (16 b)
+    //   f32 [x3d_min, x3d_max, y3d_min, y3d_max, z3d_min, z3d_max]        (24 b)
+    // flags bit0 = has_3D positions, bit1 = has gc_content column.
     const hdrU32 = new Uint32Array(buf, 0, 6);
-    const magic = hdrU32[0];
+    const magic  = hdrU32[0];
     if (magic !== 0xCAB0FA1D) throw new Error("bad magic: " + magic.toString(16));
     n = hdrU32[1];
-    const nSp = hdrU32[2], nBt = hdrU32[3], nSt = hdrU32[4], nPh = hdrU32[5];
-    const hdrF32 = new Float32Array(buf, 24, 4);
+    const flags = hdrU32[5];
+    const has3D = (flags & 0b01) !== 0;
+    const hasGC = (flags & 0b10) !== 0;
+    const hdrF32 = new Float32Array(buf, 24, 10);
     bounds = [hdrF32[0], hdrF32[1], hdrF32[2], hdrF32[3]];
+    // bounds_3d (hdrF32[4..10]) is parsed but unused — the v1 viewer
+    // renders the 2D projection only. Kept in the binary so a future
+    // 3D mode can switch attribute streams without re-fetching.
 
-    let off = 40;
+    let off = 64;
     const pos16 = new Int16Array(buf, off, n * 2);  off += n * 2 * 2;
+    if (has3D) {
+      // Skip pos_3d (int16 × 3 × n). Loaded into RAM is unnecessary
+      // for v1 — the binary stays small enough that re-fetching for
+      // a 3D mode is fine, and skipping keeps GPU memory tight.
+      off += n * 3 * 2;
+    }
     cats.species = new Uint8Array(buf, off, n);     off += n;
     cats.biotype = new Uint8Array(buf, off, n);     off += n;
     cats.strand  = new Uint8Array(buf, off, n);     off += n;
-    cats.phase   = new Uint8Array(buf, off, n);     off += n;
+    if (hasGC) {
+      cats.gc    = new Uint8Array(buf, off, n);     off += n;
+    }
+    const catKeys = ["species", "biotype", "strand"];
+    if (hasGC) catKeys.push("gc");
+
+    // Deterministic shuffle of the parallel arrays. The binary is sorted by
+    // species (= order of viz.csv), so without this protein_coding (≈80% of
+    // points) systematically lands on top of the minority biotypes/rare
+    // species and visually erases them. A fixed seed keeps the layout stable
+    // across reloads — same dot in the same place every time. Mulberry32 is
+    // good enough and one line; Fisher-Yates over 571 K entries is ~30 ms.
+    shuffleParallel(pos16, catKeys.map(k => cats[k]), n, 0xC4B0FA1D);
 
     // Upload to GPU.
     posBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
     gl.bufferData(gl.ARRAY_BUFFER, pos16, gl.STATIC_DRAW);
-    for (const key of ["species", "biotype", "strand", "phase"]) {
+    for (const key of catKeys) {
       const b = gl.createBuffer();
       gl.bindBuffer(gl.ARRAY_BUFFER, b);
       gl.bufferData(gl.ARRAY_BUFFER, cats[key], gl.STATIC_DRAW);
@@ -4216,7 +4586,7 @@ function loadGenes() {
 
     const ms = (performance.now() - t0) | 0;
     setStatus("idle", `loaded ${(n/1000)|0}k pts · ${ms} ms`);
-    info.textContent = `${n.toLocaleString("en-US")} sequences · ${labels.species.length} eukaryotic species · drag to pan, wheel to zoom`;
+    info.textContent = `${n.toLocaleString("en-US")} sequences · ${labels.species.length} species · drag to pan, wheel to zoom`;
     overlay.classList.add("hidden");
 
     return pos16;
@@ -4274,8 +4644,9 @@ function loadGenes() {
     // but the dots get visibly bigger when you zoom in.
     const ps = Math.min(8.0, Math.max(1.4, 1.4 + 0.6 * Math.log2(view.scale + 1))) * dpr;
     gl.uniform1f(gl.getUniformLocation(program, "u_pointSize"), ps);
-    // Alpha falls off slightly with zoom-out so the dense cloud doesn't burn.
-    const alpha = Math.min(0.85, Math.max(0.35, 0.35 + 0.18 * Math.log2(view.scale + 1)));
+    // Alpha rises with zoom so individual dots stay readable, but starts low
+    // so the dense 571 K cloud doesn't blow out at zoom 1.
+    const alpha = Math.min(0.85, Math.max(0.22, 0.22 + 0.20 * Math.log2(view.scale + 1)));
     gl.uniform1f(gl.getUniformLocation(program, "u_alpha"), alpha);
 
     gl.drawArrays(gl.POINTS, 0, n);
@@ -4314,11 +4685,28 @@ function loadGenes() {
   // ---- Legend ------------------------------------------------------------
   function renderLegend() {
     if (!labels) return;
+    // gc_content is continuous — render a horizontal gradient bar with
+    // 0.0 / 0.5 / 1.0 ticks instead of one swatch per value (would be
+    // 256 entries, useless visually).
+    if (colorBy === "gc") {
+      const stops = GC_PALETTE
+        .filter((_, i) => i % 8 === 0)  // 32 stops is plenty for a 1D bar
+        .map((c, i, a) => `<stop offset="${(i / (a.length - 1)) * 100}%" stop-color="rgb(${c[0]},${c[1]},${c[2]})"/>`)
+        .join("");
+      legend.innerHTML =
+        `<span class="item gc-grad">
+           <svg width="160" height="10" aria-hidden="true">
+             <defs><linearGradient id="umap-gc-grad" x1="0" x2="1">${stops}</linearGradient></defs>
+             <rect width="160" height="10" fill="url(#umap-gc-grad)"/>
+           </svg>
+           <span class="gc-ticks">0.0 &middot; 0.5 &middot; 1.0</span>
+         </span>`;
+      return;
+    }
     const palette = PALETTES[colorBy];
     const itemLabels = (colorBy === "species") ? labels.species
                      : (colorBy === "biotype") ? labels.biotypes
-                     : (colorBy === "strand")  ? labels.strands
-                     :                            labels.phases;
+                     :                            labels.strands;
     legend.innerHTML = itemLabels.map((name, i) => {
       const [r, g, b] = palette[i % palette.length];
       return `<span class="item"><span class="swatch" style="background:rgb(${r},${g},${b})"></span>${name}</span>`;
@@ -4326,7 +4714,37 @@ function loadGenes() {
   }
 
   // ---- Pan / zoom / hover ------------------------------------------------
-  function resetView() { view = { tx: 0, ty: 0, scale: 1 }; requestRedraw(); }
+  // Reset is a no-op when we're already at the fit-the-data view, so the
+  // button switches to a disabled state in that case — same affordance as
+  // a back-button greying out at the top of the history stack. Avoids a
+  // distracting always-active control on first paint.
+  function updateResetEnabled() {
+    if (!resetBtn) return;
+    const atDefault = view.tx === 0 && view.ty === 0 && view.scale === 1;
+    resetBtn.disabled = atDefault;
+  }
+  function resetView() {
+    view = { tx: 0, ty: 0, scale: 1 };
+    updateResetEnabled();
+    requestRedraw();
+  }
+
+  // Keep the viewport always full of data. The data spans [-0.92, 0.92]·scale
+  // in world space; the viewport spans [-1, 1]. As long as 0.92·scale ≥ 1
+  // (zoom ≥ ~1.087), there's "slack" we can pan within: |tx| ≤ 0.92·scale-1.
+  // Below that — i.e. at minimum zoom where the UMAP fits the viewport with
+  // margin — we snap to (0, 0) so the data stays centered and no white edge
+  // creeps in. Paired with the scale clamp in the wheel handler, this means
+  // "fully zoomed out" = "UMAP exactly fit, perfectly centered".
+  function clampPan() {
+    const m = Math.max(0, 0.92 * view.scale - 1);
+    if (m === 0) {
+      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));
+    }
+  }
 
   // Convert a clientX/Y to NDC (-1..1) and to normalized data space ([-1, 1]).
   function clientToNDC(e) {
@@ -4358,6 +4776,8 @@ function loadGenes() {
       const dx =  ((e.clientX - panLast.x) / rect.width)  * 2;
       const dy = -((e.clientY - panLast.y) / rect.height) * 2;
       view.tx += dx; view.ty += dy;
+      clampPan();
+      updateResetEnabled();
       panLast = { x: e.clientX, y: e.clientY };
       requestRedraw();
     } else {
@@ -4379,13 +4799,19 @@ function loadGenes() {
     const ndc = clientToNDC(e);
     // Zoom factor — natural feeling on both trackpad and mouse wheel.
     const factor = Math.exp(-e.deltaY * 0.0018);
-    const newScale = Math.min(50, Math.max(0.5, view.scale * factor));
+    // Min scale = 1 means "fully zoomed out = UMAP fits the viewport". We
+    // intentionally don't let the visitor zoom out further: there's no
+    // information past the data bounds, and the empty margin makes the
+    // dataset feel small. Max 50× keeps individual points pickable.
+    const newScale = Math.min(50, Math.max(1, view.scale * factor));
     const k = newScale / view.scale;
     // Zoom around the cursor: shift translate so the point under the cursor
     // stays under the cursor.
     view.tx = ndc.x - (ndc.x - view.tx) * k;
     view.ty = ndc.y - (ndc.y - view.ty) * k;
     view.scale = newScale;
+    clampPan();
+    updateResetEnabled();
     requestRedraw();
     hideTooltip();
   }, { passive: false });
@@ -4397,11 +4823,11 @@ function loadGenes() {
     const sp = labels.species[cats.species[idx]];
     const bt = labels.biotypes[cats.biotype[idx]];
     const st = labels.strands[cats.strand[idx]];
-    const ph = labels.phases[cats.phase[idx]];
+    const gc = cats.gc ? (cats.gc[idx] / 255).toFixed(2) : "—";
     tooltip.innerHTML =
       `<div><span class="t-label">species</span>${sp}</div>` +
       `<div><span class="t-label">biotype</span>${bt}</div>` +
-      `<div><span class="t-label">strand</span>${st} &nbsp; <span class="t-label">phase</span>${ph}</div>`;
+      `<div><span class="t-label">strand</span>${st} &nbsp; <span class="t-label">gc</span>${gc}</div>`;
     tooltip.style.left = x + "px";
     tooltip.style.top  = y + "px";
     tooltip.classList.add("visible");
@@ -4468,7 +4894,7 @@ function loadGenes() {
     });
   });
 
-  // Defer loading until the umap section is near the viewport — 500K points
+  // Defer loading until the umap section is near the viewport — 571K points
   // doesn't need to fight for bandwidth on first paint.
   const io = new IntersectionObserver(async (entries) => {
     if (!entries[0].isIntersecting) return;