Sandbox card layout, sticky-nav breadcrumb, drop §2/§3 score buttons

- Sandbox: refactor into stacked cards (sb-card with eyebrow/title/hint
headers, Input → Output) plus a Connected-to strip up top, replacing
the flat wall of controls.
- Sticky nav: add a CARBON / huggingfacebio-carbon-3b breadcrumb on the
left of the sticky strip so the "you're on the Carbon page" cue stays
visible after the hero scrolls out.
- §2 (VEP) and §3 (Track): drop the manual ▶ score / score all buttons.
§3 tracks are precomputed (logprobs ship in data/genes.json), so the
toolbar is just a gene selector now; §2 will auto-score on select.
- Misc: app.py, precompute.py, controls.css, layout.css, section-tree.css,
banner.js and data/genes.json picked up along the way.
- Add social-banner.html.

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

app.py

@@ -146,6 +146,15 @@ def sandbox_only():
     return FileResponse(os.path.join(HERE, "index.html"))
 
 
+@app.get("/social-banner")
+def social_banner():
+    # Standalone hero — wordmark + subtitle + specs + animated DNA helix,
+    # sized to fit common social-media canvases (Twitter / OG / LinkedIn /
+    # HF). Used to grab cover-art screenshots without firing up the full
+    # demo page.
+    return FileResponse(os.path.join(HERE, "social-banner.html"))
+
+
 @app.get("/config")
 def config():
     return {"model": MODEL_NAME, "endpoint": ENDPOINT_URL}

assets/js/banner.js

@@ -27,7 +27,7 @@
   // Numbers tuned for a hero that *dominates* the right half of the banner:
   // big amplitude, thick ribbons, oversized ATCG glyphs.
   const helix = {
-    startY: 0, endY: 1100, centerX: 220, amplitude: 165,
+    startY: 0, endY: 1100, centerX: 220, amplitude: 150,
     cycles: 4.0, speed: 0.00015,
     rungCount: 26,
     // Dense sampling: each strand section is rendered as a continuous
@@ -37,14 +37,14 @@
     // 4 fills + 8 stroke calls per frame total (one fill per back/front
     // section per strand, plus the 4 edge polylines).
     segmentCount: 512,
-    // Strand half-thickness in viewBox units. Trimmed 14 → 11 so the ribbon
-    // reads slimmer/more technical and the saturated green edge gets to do
-    // the heavy lifting rather than the cream body fill.
-    bodyRadius: 11,
+    // Strand half-thickness in viewBox units. Trimmed 14 → 11 → 8 so the
+    // ribbon reads slimmer/more technical and the saturated green edge gets
+    // to do the heavy lifting rather than the cream body fill.
+    bodyRadius: 8,
     rungInset: 16, glyphGap: 30,
   };
-  // Helix bbox in viewBox coords. Width gives room for amplitude (±165 around
-  // centerX=220 → wave reaches x=55..385, fits comfortably in 440-wide VB).
+  // Helix bbox in viewBox coords. Width gives room for amplitude (±138 around
+  // centerX=220 → wave reaches x=82..358, fits comfortably in 440-wide VB).
   const VB = { x: 0, y: -30, w: 440, h: 1160 };
 
   const COLORS = {
@@ -311,11 +311,11 @@
     edgePath(points, from, to, -(helix.bodyRadius - 0.2));
     ctx.stroke();
 
-    // Dark forest edge at the outer rim — the primary depth cue. Slightly
-    // wider than before (1.6 → 2.0) so the green reads as a deliberate
-    // outline rather than a hairline.
+    // Dark forest edge at the outer rim — the primary depth cue. Kept on
+    // the bolder side (1.6 → 2.0 → 1.6) so even with the slimmer ribbon
+    // the green outline still reads as a deliberate stroke.
     ctx.strokeStyle = grads.edge;
-    ctx.lineWidth = px(2.0);
+    ctx.lineWidth = px(1.6);
     edgePath(points, from, to,  helix.bodyRadius + 0.4);
     ctx.stroke();
     edgePath(points, from, to, -(helix.bodyRadius + 0.4));

assets/js/sections/sandbox.js

@@ -312,7 +312,12 @@
   }
   function setStatus(text, mode = "") {
     els.statusText.textContent = text;
-    els.status.className = "sb-status" + (mode ? " " + mode : "");
+    // Hide the pill outright in the idle/empty state — same "no idle UI"
+    // pattern used by the other demos in §1–§5. The pill comes back as
+    // soon as setStatus is called with a meaningful state ("connecting…",
+    // "streaming", "done", an error message, etc.).
+    const hide = !text || text === "idle";
+    els.status.className = "sb-status" + (mode ? " " + mode : "") + (hide ? " is-hidden" : "");
   }
 
   els.modeBtns.querySelectorAll(".sb-mode-btn").forEach(b => {

assets/js/sections/track.js

@@ -1,5 +1,10 @@
 // =========================================================================
 // §3 — Likelihood track over a real gene
+//
+// All tracks are precomputed (each gene in data/genes.json ships with
+// its token logprobs under `track`), so this section is read-only: pick
+// a gene, the cached track is rendered instantly. There is no "score"
+// button — rescoring would just replay numbers we already have.
 // =========================================================================
 (function initDemo3() {
   const els = {
@@ -8,9 +13,6 @@
     track: document.getElementById("d3-track"),
     chart: document.getElementById("d3-chart"),
     bpLabel: document.getElementById("d3-bp-label"),
-    go: document.getElementById("d3-go"),
-    status: document.getElementById("d3-status"),
-    statusText: document.querySelector("#d3-status span:last-child"),
     meanExon:   document.getElementById("d3-mean-exon"),
     meanIntron: document.getElementById("d3-mean-intron"),
     delta:      document.getElementById("d3-delta"),
@@ -20,16 +22,9 @@
 
   let gene = null;
   let scoreData = null;  // { tokens, token_logprobs, scoredLength }
-  const cache = {};      // cache scored data by gene symbol so re-clicking is instant
+  const cache = {};      // by gene symbol — hydrated from precomputed tracks
   const MAX_WINDOW = 6000;
 
-  function setStatus(text, mode = "") {
-    els.statusText.textContent = text;
-    // See §1 for the "no idle pill" rationale.
-    const hide = !text || text === "idle";
-    els.status.className = "status" + (mode ? " " + mode : "") + (hide ? " is-hidden" : "");
-  }
-
   function renderTrack(scoredLen) {
     const W = 1000, H = 28;
     if (!gene) { els.track.innerHTML = ""; return; }
@@ -49,7 +44,7 @@
   function renderChart() {
     const W = 1000, H = 140, padT = 6, padB = 16;
     if (!scoreData || !gene) {
-      els.chart.innerHTML = `<text x="${W/2}" y="${H/2}" text-anchor="middle" font-family="JetBrains Mono" font-size="11" fill="#bbb">— score the gene to see the likelihood track —</text>`;
+      els.chart.innerHTML = `<text x="${W/2}" y="${H/2}" text-anchor="middle" font-family="JetBrains Mono" font-size="11" fill="#bbb">— no precomputed track for this gene —</text>`;
       return;
     }
     const tokens = scoreData.tokens;
@@ -188,53 +183,18 @@
     [els.meanExon, els.meanIntron, els.delta, els.tokens, els.mean].forEach(e => e.classList.remove("muted"));
   }
 
-  async function score() {
-    if (!gene) return;
-    const cached = cache[gene.symbol];
-    if (cached) {
-      scoreData = cached;
-      renderTrack(scoreData.scoredLength);
-      renderChart();
-      updateStats();
-      setStatus("cached");
-      return;
-    }
-    setStatus("scoring (cold endpoint takes ~30s)…", "streaming");
-    els.go.disabled = true;
-    try {
-      const seq = gene.seq.slice(0, MAX_WINDOW);
-      const r = await fetch("/score", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ sequence: seq, max_window: MAX_WINDOW }),
-      });
-      const data = await r.json();
-      if (data.error) throw new Error(data.error);
-      data.scoredLength = seq.length;
-      cache[gene.symbol] = data;
-      scoreData = data;
-      renderTrack(data.scoredLength);
-      renderChart();
-      updateStats();
-      setStatus("done");
-    } catch (e) {
-      setStatus(e.message, "error");
-    } finally {
-      els.go.disabled = false;
-    }
-  }
-
   function selectGene(symbol) {
     const g = GENES.find(x => x.symbol === symbol);
     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("en-US")} bp will be scored${gene.length > MAX_WINDOW ? ` (of ${gene.length.toLocaleString("en-US")})` : ""}</span>`;
+    const scoredBp = Math.min(gene.length, MAX_WINDOW).toLocaleString("en-US");
+    const totalBp  = gene.length.toLocaleString("en-US");
+    els.info.innerHTML = `<strong>${gene.symbol}</strong> · ${gene.blurb} · <span style="color:#888">${scoredBp} bp scored${gene.length > MAX_WINDOW ? ` (of ${totalBp})` : ""}</span>`;
     scoreData = cache[symbol] || null;
     renderTrack(scoreData ? scoreData.scoredLength : Math.min(gene.length, MAX_WINDOW));
     renderChart();
     updateStats();
-    setStatus(scoreData ? "cached" : "idle");
   }
 
   loadGenes().then(genes => {
@@ -257,7 +217,5 @@
     });
     selectGene(genes[0].symbol);
   });
-
-  els.go.addEventListener("click", score);
 })();
 

assets/js/sections/vep.js

@@ -1,5 +1,11 @@
 // =========================================================================
 // §2 — VEP: ref vs alt allele likelihood
+//
+// This section runs entirely off the precomputed scores baked into
+// data/variants.json (each variant ships with ref/alt logprobs already).
+// There is no "score" button or live /score call here: rescoring would
+// just replay numbers we already have, so the toolbar is just the
+// variant pills and the bars/result panes render straight from cache.
 // =========================================================================
 (function initDemo2() {
   const els = {
@@ -8,23 +14,12 @@
     window: document.getElementById("d2-window"),
     result: document.getElementById("d2-result"),
     bars:   document.getElementById("d2-bars"),
-    go:     document.getElementById("d2-go"),
-    all:    document.getElementById("d2-all"),
-    status: document.getElementById("d2-status"),
-    statusText: document.querySelector("#d2-status span:last-child"),
   };
 
   let VARIANTS = null;
   let selected = null;
   const cache = {};  // by rs id → { refSum, altSum, refLps, altLps }
 
-  function setStatus(text, mode = "") {
-    els.statusText.textContent = text;
-    // See §1 for the "no idle pill" rationale.
-    const hide = !text || text === "idle";
-    els.status.className = "status" + (mode ? " " + mode : "") + (hide ? " is-hidden" : "");
-  }
-
   function altWindow(v) {
     return v.ref_window.slice(0, v.var_offset) + v.alt + v.ref_window.slice(v.var_offset + 1);
   }
@@ -42,7 +37,7 @@
     if (!v) { els.result.innerHTML = ""; return; }
     const c = cache[v.rs];
     if (!c) {
-      els.result.innerHTML = `<div style="grid-column:1/-1;color:#aaa;font-style:italic">click "score" to compute likelihoods…</div>`;
+      els.result.innerHTML = `<div style="grid-column:1/-1;color:#aaa;font-style:italic">no precomputed score for this variant</div>`;
       return;
     }
     // Map sums to a common scale: take min/max across both for visual ratio.
@@ -81,7 +76,7 @@
     els.bars.setAttribute("height", H);
 
     if (!scored.length) {
-      els.bars.innerHTML = `<text x="${W/2}" y="${H/2}" text-anchor="middle" font-family="JetBrains Mono" font-size="11" fill="#bbb">— score variants to populate the comparison —</text>`;
+      els.bars.innerHTML = `<text x="${W/2}" y="${H/2}" text-anchor="middle" font-family="JetBrains Mono" font-size="11" fill="#bbb">— no precomputed scores available —</text>`;
       return;
     }
     const absMax = Math.max(2, ...scored.map(x => Math.abs(x.d)));
@@ -171,69 +166,6 @@
     els.bars.innerHTML = svg;
   }
 
-  async function scoreOne(v) {
-    if (cache[v.rs]) return cache[v.rs];
-    const ref = v.ref_window;
-    const alt = altWindow(v);
-    // Score both in parallel
-    const [refResp, altResp] = await Promise.all([
-      fetch("/score", { method: "POST", headers: {"Content-Type":"application/json"}, body: JSON.stringify({ sequence: ref }) }).then(r => r.json()),
-      fetch("/score", { method: "POST", headers: {"Content-Type":"application/json"}, body: JSON.stringify({ sequence: alt }) }).then(r => r.json()),
-    ]);
-    if (refResp.error) throw new Error("ref: " + refResp.error);
-    if (altResp.error) throw new Error("alt: " + altResp.error);
-    const sumLp = (lps) => {
-      let s = 0, n = 0;
-      for (const lp of lps) {
-        if (lp != null && !isNaN(lp)) { s += lp; n++; }
-      }
-      return { sum: s, n };
-    };
-    const r = sumLp(refResp.token_logprobs);
-    const a = sumLp(altResp.token_logprobs);
-    const result = {
-      refSum: r.sum, altSum: a.sum, n: r.n,
-      refLps: refResp.token_logprobs, altLps: altResp.token_logprobs,
-    };
-    cache[v.rs] = result;
-    return result;
-  }
-
-  async function scoreSelected() {
-    if (!selected) return;
-    setStatus(`scoring ${selected.name}…`, "streaming");
-    els.go.disabled = true; els.all.disabled = true;
-    try {
-      await scoreOne(selected);
-      renderResult(selected);
-      renderForestBars();
-      setStatus("done");
-    } catch (e) {
-      setStatus(e.message, "error");
-    } finally {
-      els.go.disabled = false; els.all.disabled = false;
-    }
-  }
-
-  async function scoreAll() {
-    setStatus("scoring all…", "streaming");
-    els.go.disabled = true; els.all.disabled = true;
-    try {
-      // Sequential to be polite to the endpoint and to allow incremental UI updates.
-      for (const v of VARIANTS) {
-        if (cache[v.rs]) continue;
-        await scoreOne(v);
-        renderForestBars();
-      }
-      if (selected) renderResult(selected);
-      setStatus("done");
-    } catch (e) {
-      setStatus(e.message, "error");
-    } finally {
-      els.go.disabled = false; els.all.disabled = false;
-    }
-  }
-
   function selectVariant(rs) {
     const v = VARIANTS.find(x => x.rs === rs);
     if (!v) return;
@@ -269,8 +201,5 @@
   }).catch(e => {
     els.info.textContent = "failed to load variants: " + e.message;
   });
-
-  els.go.addEventListener("click", scoreSelected);
-  els.all.addEventListener("click", scoreAll);
 })();
 

assets/styles/banner.css

@@ -112,7 +112,22 @@
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: #8a8a85;
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+a.banner-path,
+a.banner-path:link,
+a.banner-path:visited,
+a.banner-path:hover,
+a.banner-path:active,
+a.banner-path:focus,
+a.banner-path:focus-visible {
+  text-decoration: none;
 }
+a.banner-path { cursor: pointer; }
+a.banner-path:hover,
+a.banner-path:focus-visible { color: var(--green); }
+a.banner-path:focus-visible { outline: none; }
 
 /* --- Headline: oversized wordmark + tagline. Vertically centered in the
        middle row of the grid so it sits dead-center between the identity row
@@ -164,16 +179,14 @@
   margin-left: 0.15em;
   align-self: stretch;
   background: var(--green);
-  /* Keep the caret's box at line height (so the wordmark's flex line
-     doesn't grow) but lift the whole bar visually so its top hits the
-     N's apex and its bottom sits at the baseline rather than below it.
-     margin-top: 0.05em — trim a hair off the top so the caret is just
-     under cap height instead of poking above (the translate then lifts
-     the whole bar up by 0.08em so the trim happens at the right place).
-     transform: translateY(-0.08em) — visual-only shift, no layout
-     impact. Together: caret top ≈ cap-top of N, caret bottom ≈ baseline. */
-  margin-top: 0.15em;
-  transform: translateY(-0.08em);
+  /* Caret stretches to the wordmark's flex line, then drops a hair below
+     the baseline via a small negative bottom margin — reads as a
+     deliberate block caret that hangs slightly under the N rather than
+     being trapped inside the cap-height box. The top sits flush with
+     the flex line (margin-top: 0) so it no longer overshoots the N's
+     apex. */
+  margin-top: 0;
+  margin-bottom: -0.015em;
   animation: cb-cursor-blink 1.05s steps(1) infinite;
 }
 @keyframes cb-cursor-blink {
@@ -337,12 +350,38 @@
 .sticky-nav__inner {
   display: flex;
   align-items: stretch;
+  /* Brand to the left, tab cluster pinned to the right. */
+  justify-content: space-between;
   max-width: 1200px;
   /* Match the container.wide horizontal padding so the strip's tabs sit
      at the same left edge as the content column underneath. */
   margin: 0 auto;
   padding: 0 32px;
 }
+/* Left-side identity: stacked title + breadcrumb path, mirroring the
+   in-banner .banner-breadcrumb verbatim so the two reads as the same
+   model-card identity. Anchored as a link back to the top of the page. */
+.sticky-nav__brand {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  line-height: 1.2;
+  text-decoration: none;
+  color: inherit;
+  /* Sits flush with the tab tops — push the brand down by the same 7px
+     as .sticky-nav padding-top so it's vertically centred against the
+     full tab card, not against the headroom above them. */
+  padding-bottom: 7px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+}
+.sticky-nav__brand .banner-title { font-size: 13px; }
+.sticky-nav__brand .banner-path  { font-size: 10.5px; }
+.sticky-nav__brand:hover .banner-title { color: var(--green); }
+.sticky-nav__tabs {
+  display: flex;
+  align-items: stretch;
+}
 .sticky-nav .tab {
   position: relative;
   display: flex;
@@ -425,7 +464,7 @@
   pointer-events: none;
   /* Slight leftward shift so the helix sits closer to the wordmark instead
      of hugging the right edge of the banner. */
-  transform: translateX(-25px) rotate(4deg);
+  transform: translateX(-25px) rotate(5deg);
   transform-origin: 60% 50%;
 }
 
@@ -445,7 +484,7 @@
   .cb-helix-canvas {
     top: -40px; right: 0; bottom: -40px;
     width: 100%; height: calc(100% + 80px);
-    transform: rotate(3deg);
+    transform: rotate(8deg);
     transform-origin: center;
   }
   .banner-wordmark { font-size: clamp(56px, 16vw, 96px); }
@@ -453,4 +492,28 @@
      without horizontal scroll. */
   .banner-tabs { width: 100%; }
   .banner-tabs .tab { width: auto; flex: 1 1 0; padding: 14px 12px; }
+
+  /* Sticky nav goes mobile too: drop the CARBON/huggingfacebio brand on
+     the left (the in-banner hero has already scrolled away by the time
+     this strip appears, but on narrow viewports the brand + 3×150px tabs
+     simply won't fit on one line). Tabs then expand to fill the row
+     evenly, mirroring the in-banner mobile treatment above. */
+  .sticky-nav__inner {
+    padding: 0 18px;
+  }
+  .sticky-nav__brand {
+    display: none;
+  }
+  .sticky-nav__tabs {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+  .sticky-nav .tab {
+    width: auto;
+    flex: 1 1 0;
+    padding: 14px 12px;
+    /* Slightly tighter tracking so 'SANDBOX' still fits comfortably at
+       narrow widths without truncating. */
+    letter-spacing: 0.12em;
+  }
 }

assets/styles/controls.css

@@ -16,10 +16,15 @@
 }
 .demo-toolbar .spacer { flex: 1; }
 
-/* --- Buttons --- */
+/* --- Buttons ---
+   `.pill` size is the canonical pill size used across every demo (the
+   §7 Species tree toolbar set the precedent: 11px mono / 5px 11px
+   padding / 6px gap reads cleanly without dominating the toolbar).
+   Demo-specific stylesheets only override colour or text-transform,
+   never the size, so the pill rhythm stays identical between sections. */
 button.action, .pill {
   font-family: "JetBrains Mono", monospace;
-  font-size: 10px; font-weight: 400;
+  font-size: 11px; font-weight: 400;
   padding: 5px 11px; border: 1px solid #ccc; border-radius: 3px;
   background: #fff; color: #555; cursor: pointer;
   text-transform: uppercase; letter-spacing: 1.5px;
@@ -31,8 +36,7 @@ button.action.primary:hover { background: #000; }
 button.action:disabled { opacity: 0.4; cursor: not-allowed; }
 button.action.primary:disabled { background: #888; border-color: #888; }
 .pill.active { background: #1f1f1d; color: #fff; border-color: #1f1f1d; }
-.pills { display: inline-flex; gap: 4px; }
-.pills .pill { font-size: 9px; padding: 4px 8px; }
+.pills { display: inline-flex; gap: 6px; }
 
 /* --- Stub placeholder for unbuilt demos --- */
 .stub {

assets/styles/layout.css

@@ -120,9 +120,11 @@ section:last-of-type { border-bottom: none; }
 
    Layout math: container.wide is 1200px max with 32px padding =>
    1136px usable. 280px rail + 28px gap + 828px right column. Below
-   540px we collapse to single-column and unstick the rail — at that
-   point the right column would be too cramped to be useful, so the
-   narrative stacks above the demo + takeaway instead. */
+   960px the right column gets squeezed under ~620px (280 + 28 + ~620
+   ≈ 928px usable inside a ~960px viewport), which is the point where
+   the demos (gene tracks, SVG bars, 3D viewers) start clipping or
+   becoming unreadable. We collapse to single-column and unstick the
+   rail there so the narrative stacks above the demo + takeaway. */
 .section--two-col {
   display: grid;
   grid-template-columns: 280px 1fr;
@@ -167,7 +169,7 @@ section:last-of-type { border-bottom: none; }
   margin: 0;             /* gap on section-body handles vertical rhythm */
   max-width: none;       /* fill the right column rather than capping at 640 */
 }
-@media (max-width: 540px) {
+@media (max-width: 960px) {
   .section--two-col {
     grid-template-columns: 1fr;
     row-gap: 16px;

assets/styles/sandbox.css

@@ -2,12 +2,72 @@
    with #panel-sandbox to avoid leaking onto the Demo / Recipe panels).
    Originally ported from the legacy index.html sandbox. */
 
-#panel-sandbox .sb-section-title {
+/* Extra breathing room between the intro lede and the first card stack
+   so the playground header doesn't feel glued to the paragraph above. */
+#panel-sandbox .tab-lede { margin-bottom: 24px; }
+
+/* --- Connection header strip (model + endpoint at the top of the panel).
+   Same paper/border treatment as the .sb-card panels below so the whole
+   page reads as a stack of layered cards. --- */
+#panel-sandbox .sb-header {
+  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
+  padding: 12px 18px;
+  background: #fbfaf3;
+  border: 1px solid var(--hairline);
+  border-radius: 4px;
+  margin-bottom: 18px;
+}
+#panel-sandbox .sb-header__meta {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px; color: #555; font-weight: 400;
+  letter-spacing: 0.4px; word-break: break-all;
+  flex: 1 1 0; min-width: 0;
+}
+
+/* --- Card panel (Prompt / Sequence). Replaces the old .sb-section-title
+   single-line headers — each section now sits in its own bordered card
+   with an eyebrow/title/hint header on top and a padded body below. */
+#panel-sandbox .sb-card {
+  background: #fbfaf3;
+  border: 1px solid var(--hairline);
+  border-radius: 4px;
+  margin-bottom: 18px;
+  padding: 12px 12px;
+}
+#panel-sandbox .sb-card__header {
+  padding: 0 12px 12px;
+  border-bottom: 1px solid #ece9da;
+}
+#panel-sandbox .sb-card__eyebrow {
+  display: inline-block;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 9px; font-weight: 500;
+  color: var(--green);
+  text-transform: uppercase; letter-spacing: 1.5px;
+  margin-right: 6px;
+}
+#panel-sandbox .sb-card__title {
+  margin: 4px 0 0;
   font-family: "JetBrains Mono", monospace;
-  font-size: 11px; font-weight: 400;
-  text-transform: uppercase; letter-spacing: 2px; color: #444;
-  margin-top: 24px; margin-bottom: 8px;
-  border-bottom: 1px solid #ccc; padding-bottom: 4px;
+  font-size: 15px; font-weight: 500;
+  letter-spacing: 0.04em; text-transform: uppercase;
+  color: var(--ink);
+}
+#panel-sandbox .sb-card__hint {
+  margin: 4px 0 0;
+  font-family: "Inter", sans-serif;
+  font-size: 11.5px; color: #777; font-weight: 300;
+  line-height: 1.5;
+}
+#panel-sandbox .sb-card__hint code {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 10.5px;
+  background: #ece9da;
+  padding: 1px 5px; border-radius: 2px;
+  color: #1f1f1d;
+}
+#panel-sandbox .sb-card__body {
+  padding: 16px 20px 0;
 }
 #panel-sandbox .sb-examples {
   display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px;
@@ -41,11 +101,28 @@
 #panel-sandbox .sb-prompt-area {
   width: 100%; resize: none; overflow: hidden;
   letter-spacing: 1px; line-height: 1.7;
-  min-height: 36px;
+  min-height: 72px;
+  padding: 12px 14px;
+  margin-top: 12px;
 }
+/* Controls row: params on the left (max tokens, temperature, top-p,
+   color mode), action buttons pinned to the right with a divider in
+   between. Wraps cleanly on narrow viewports. */
 #panel-sandbox .sb-controls {
   display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
-  margin-top: 10px;
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid #ece9da;
+}
+#panel-sandbox .sb-controls__params {
+  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
+  flex: 1 1 auto;
+}
+#panel-sandbox .sb-controls__actions {
+  display: flex; gap: 6px;
+  margin-left: auto;
+  padding-left: 16px;
+  border-left: 1px solid #ece9da;
 }
 #panel-sandbox .sb-control {
   display: flex; align-items: center; gap: 6px;
@@ -74,18 +151,20 @@
 #panel-sandbox .sb-mode-btn:hover { color: #1f1f1d; }
 #panel-sandbox .sb-mode-btn.active { background: #1f1f1d; color: #fff; border-color: #1f1f1d; }
 
-#panel-sandbox .sb-button-row { margin-left: auto; display: flex; gap: 6px; }
-
 #panel-sandbox .sb-status {
   font-family: "JetBrains Mono", monospace;
   font-size: 10px; color: #666;
   text-transform: uppercase; letter-spacing: 1.5px;
-  margin-top: 10px; min-height: 14px;
+  margin-top: 12px;
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 10px;
+  background: #fff; border: 1px solid #e6e3d4; border-radius: 12px;
 }
+#panel-sandbox .sb-status.is-hidden { display: none; }
 #panel-sandbox .sb-status.error { color: #b00020; text-transform: none; letter-spacing: 0.3px; }
 #panel-sandbox .sb-status .dot {
   display: inline-block; width: 6px; height: 6px; border-radius: 50%;
-  background: #888; margin-right: 6px; vertical-align: middle;
+  background: #888;
 }
 /* `pulse` keyframe lives in base.css. */
 #panel-sandbox .sb-status.streaming .dot { background: #317f3f; animation: pulse 1.2s ease-in-out infinite; }
@@ -94,13 +173,16 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) 200px;
   gap: 16px;
-  align-items: start;
 }
 @media (max-width: 720px) {
   #panel-sandbox .sb-output-row { grid-template-columns: 1fr; }
 }
 
-#panel-sandbox .sb-seq-wrap { position: relative; }
+#panel-sandbox .sb-seq-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
 #panel-sandbox .sb-copy-btn {
   position: absolute; top: 8px; right: 8px; z-index: 2;
   font-family: "JetBrains Mono", monospace;
@@ -117,10 +199,11 @@
 #panel-sandbox .sb-seq-block {
   font-family: "JetBrains Mono", monospace;
   background: #f4f4f4; border: 1px solid #ddd;
-  padding: 16px 20px; overflow-x: auto;
+  padding: 16px 20px;
   white-space: pre; font-size: 12px; font-weight: 400;
   line-height: 1.85; letter-spacing: 1.5px;
   min-height: 80px;
+  flex: 1 0 auto;
 }
 #panel-sandbox .sb-seq-block.empty { color: #aaa; font-weight: 300; letter-spacing: normal; }
 #panel-sandbox .sb-seq-line { white-space: pre; }

assets/styles/section-tree.css

@@ -13,19 +13,13 @@
   margin-bottom: 14px;
 }
 .tree-toolbar .spacer { flex: 1; }
-.tree-toolbar .pills {
-  display: inline-flex; gap: 0;
-  border: 1px solid #d8d5c8; border-radius: 3px; overflow: hidden;
-}
+/* Pill sizing + spacing live in controls.css now (canonical across demos);
+   we only override the casing here because §7's vocabulary — `ward`,
+   `upgma`, `kingdom-level`, `sister-level` — reads better lowercase than
+   in the global uppercase + tracked treatment. */
 .tree-toolbar .pills .pill {
-  background: #fff; border: 0; padding: 5px 11px;
-  font: inherit; color: #666; cursor: pointer;
-  border-right: 1px solid #d8d5c8;
   text-transform: lowercase;
-}
-.tree-toolbar .pills .pill:last-child { border-right: 0; }
-.tree-toolbar .pills .pill.active {
-  background: #1f1f1d; color: #f7f5ee;
+  letter-spacing: 0;
 }
 /* Big agreement score chip up top — the headline metric for §7. */
 .tree-score {

demo.html

@@ -91,9 +91,19 @@
      IntersectionObserver watching the original #tab-nav. -->
 <nav id="tab-nav-sticky" class="sticky-nav" aria-label="Section navigation (sticky)">
   <div class="sticky-nav__inner">
-    <button class="tab active" data-tab="demo">Demo</button>
-    <button class="tab" data-tab="model">Model</button>
-    <button class="tab" data-tab="sandbox">Sandbox</button>
+    <!-- Mini breadcrumb on the left: same identity as the in-banner
+         .banner-breadcrumb (title + model path stacked) so the sticky
+         strip carries the "you're on the Carbon model card" cue even
+         after the hero has scrolled out of view. -->
+    <a class="sticky-nav__brand" href="#" aria-label="Carbon — go to top">
+      <span class="banner-title">CARBON</span>
+      <span class="banner-path">huggingfacebio/carbon-3b</span>
+    </a>
+    <div class="sticky-nav__tabs">
+      <button class="tab active" data-tab="demo">Demo</button>
+      <button class="tab" data-tab="model">Model</button>
+      <button class="tab" data-tab="sandbox">Sandbox</button>
+    </div>
   </div>
 </nav>
 
@@ -228,11 +238,6 @@
     <div class="demo-toolbar">
       <span>variant</span>
       <span id="d2-pills" class="pills"></span>
-      <span class="spacer"></span>
-      <!-- See §1 toolbar for why status sits before the buttons. -->
-      <span class="status is-hidden" id="d2-status"><span class="dot"></span><span></span></span>
-      <button id="d2-go" class="action primary">▶ score</button>
-      <button id="d2-all" class="action">score all</button>
     </div>
 
     <div class="gene-info" id="d2-info">loading variants…</div>
@@ -283,13 +288,13 @@
 
   <div class="section-body">
   <div class="demo" id="demo3">
+    <!-- Likelihood tracks are precomputed (each gene ships with its
+         token logprobs in data/genes.json), so this toolbar is just
+         the gene selector — selecting a pill renders the track from
+         cache instantly, no live /score call needed. -->
     <div class="demo-toolbar">
       <span>gene</span>
       <span id="d3-pills" class="pills"></span>
-      <span class="spacer"></span>
-      <!-- See §1 toolbar for why status sits before the buttons. -->
-      <span class="status is-hidden" id="d3-status"><span class="dot"></span><span></span></span>
-      <button id="d3-go" class="action primary">▶ score</button>
     </div>
 
     <div class="gene-info" id="d3-info">loading genes…</div>
@@ -854,79 +859,109 @@
 
 <div class="container" style="max-width:1200px">
 
-<div style="margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #ddd">
-  <div id="sb-meta" style="font-family:'JetBrains Mono',monospace;color:#888;font-size:10px;font-weight:300;letter-spacing:0.5px">loading…</div>
-</div>
-
-<div class="sb-section-title">Prompt</div>
-
-<div class="sb-examples">
-  <span class="sb-examples-label">examples</span>
-  <button class="sb-ex-btn" data-ex="">empty<span class="sb-ex-label">unconditional</span></button>
-  <button class="sb-ex-btn" data-ex="ATG">ATG<span class="sb-ex-label">start codon</span></button>
-  <button class="sb-ex-btn" data-ex="TATAAA">TATAAA<span class="sb-ex-label">TATA box</span></button>
-  <button class="sb-ex-btn" data-ex="CGCGCGCGCG">CGCG…<span class="sb-ex-label">CpG island</span></button>
-  <button class="sb-ex-btn" data-ex="ATGGCCAAGCTGACCAGCGAGCTGCTG">ATGGCC…<span class="sb-ex-label">ORF start</span></button>
-  <button class="sb-ex-btn" data-ex="AAAAAAAAAAAAAAAA">A·16<span class="sb-ex-label">poly-A</span></button>
+<!-- Connection strip: tells you which model the playground is talking to.
+     Same eyebrow + value pattern reused by the two card headers below so
+     the whole panel reads as a single layered stack rather than a flat
+     wall of controls. -->
+<div class="sb-header">
+  <span class="sb-card__eyebrow">Connected to</span>
+  <div id="sb-meta" class="sb-header__meta">loading…</div>
 </div>
 
-<textarea id="sb-prompt" class="sb-prompt-area" rows="1" spellcheck="false" autocapitalize="characters">AGT</textarea>
-
-<div class="sb-controls">
-  <label class="sb-control">max tokens
-    <input type="number" id="sb-max-tokens" value="128" min="1" max="2048" step="1">
-  </label>
-  <label class="sb-control">temperature
-    <input type="number" id="sb-temperature" value="1.0" min="0" max="2" step="0.1">
-  </label>
-  <label class="sb-control">top-p
-    <input type="number" id="sb-top-p" value="1.0" min="0" max="1" step="0.05">
-  </label>
+<!-- INPUT card: examples → prompt → controls → status. -->
+<section class="sb-card">
+  <header class="sb-card__header">
+    <span class="sb-card__eyebrow">§ Input</span>
+    <h2 class="sb-card__title">Prompt</h2>
+    <p class="sb-card__hint">DNA prefix in <code>{A, C, G, T}</code> — pick an example or type your own.</p>
+  </header>
+
+  <div class="sb-card__body">
+    <div class="sb-examples">
+      <span class="sb-examples-label">examples</span>
+      <button class="sb-ex-btn" data-ex="">empty<span class="sb-ex-label">unconditional</span></button>
+      <button class="sb-ex-btn" data-ex="ATG">ATG<span class="sb-ex-label">start codon</span></button>
+      <button class="sb-ex-btn" data-ex="TATAAA">TATAAA<span class="sb-ex-label">TATA box</span></button>
+      <button class="sb-ex-btn" data-ex="CGCGCGCGCG">CGCG…<span class="sb-ex-label">CpG island</span></button>
+      <button class="sb-ex-btn" data-ex="ATGGCCAAGCTGACCAGCGAGCTGCTG">ATGGCC…<span class="sb-ex-label">ORF start</span></button>
+      <button class="sb-ex-btn" data-ex="AAAAAAAAAAAAAAAA">A·16<span class="sb-ex-label">poly-A</span></button>
+    </div>
+
+    <textarea id="sb-prompt" class="sb-prompt-area" rows="3" spellcheck="false" autocapitalize="characters">AGT</textarea>
+
+    <!-- Controls split into two visual halves: sampling/display params on
+         the left, action buttons pinned to the right. The vertical rule
+         between them makes the parameter cluster read as one group. -->
+    <div class="sb-controls">
+      <div class="sb-controls__params">
+        <label class="sb-control">max tokens
+          <input type="number" id="sb-max-tokens" value="128" min="1" max="2048" step="1">
+        </label>
+        <label class="sb-control">temperature
+          <input type="number" id="sb-temperature" value="1.0" min="0" max="2" step="0.1">
+        </label>
+        <label class="sb-control">top-p
+          <input type="number" id="sb-top-p" value="1.0" min="0" max="1" step="0.05">
+        </label>
+
+        <div class="sb-mode-group">color
+          <div class="sb-mode-btns" id="sb-mode-btns">
+            <button class="sb-mode-btn active" data-mode="none">none</button>
+            <button class="sb-mode-btn" data-mode="bases">bases</button>
+            <button class="sb-mode-btn" data-mode="logprob">logprob</button>
+          </div>
+        </div>
+      </div>
 
-  <div class="sb-mode-group">color
-    <div class="sb-mode-btns" id="sb-mode-btns">
-      <button class="sb-mode-btn active" data-mode="none">none</button>
-      <button class="sb-mode-btn" data-mode="bases">bases</button>
-      <button class="sb-mode-btn" data-mode="logprob">logprob</button>
+      <div class="sb-controls__actions">
+        <button id="sb-clear-btn" class="action">clear</button>
+        <button id="sb-stop-btn" class="action" disabled>stop</button>
+        <button id="sb-generate-btn" class="action primary">▶ generate</button>
+      </div>
     </div>
-  </div>
 
-  <div class="sb-button-row">
-    <button id="sb-clear-btn" class="action">clear</button>
-    <button id="sb-stop-btn" class="action" disabled>stop</button>
-    <button id="sb-generate-btn" class="action primary">generate</button>
+    <!-- Hidden by setStatus("idle") so the toolbar stays clean until
+         something actually happens (connecting / streaming / done). -->
+    <div class="sb-status is-hidden" id="sb-status"><span class="dot"></span><span id="sb-status-text">idle</span></div>
   </div>
-</div>
-
-<div class="sb-status" id="sb-status"><span class="dot"></span><span id="sb-status-text">idle</span></div>
-
-<div class="sb-section-title">Sequence</div>
+</section>
 
-<div class="sb-output-row">
-  <div class="sb-seq-wrap">
-    <button id="sb-copy-btn" class="sb-copy-btn" disabled>copy</button>
-    <div class="sb-seq-block empty" id="sb-seq">prompt + generated bases will stream here</div>
-  </div>
+<!-- OUTPUT card: streamed sequence + sticky stats sidebar. -->
+<section class="sb-card">
+  <header class="sb-card__header">
+    <span class="sb-card__eyebrow">§ Output</span>
+    <h2 class="sb-card__title">Sequence</h2>
+    <p class="sb-card__hint">Streams as the model generates · live stats on the right.</p>
+  </header>
+
+  <div class="sb-card__body">
+    <div class="sb-output-row">
+      <div class="sb-seq-wrap">
+        <button id="sb-copy-btn" class="sb-copy-btn" disabled>copy</button>
+        <div class="sb-seq-block empty" id="sb-seq">— prompt + generated bases will stream here —</div>
+      </div>
 
-  <div>
-    <div class="sb-stats" id="sb-stats">
-      <div class="sb-stat"><span class="sb-stat-label">prompt</span><span class="sb-stat-value" id="sb-stat-prompt">0<span class="sb-unit">bp</span></span></div>
-      <div class="sb-stat"><span class="sb-stat-label">generated</span><span class="sb-stat-value" id="sb-stat-gen">0<span class="sb-unit">bp</span></span></div>
-      <div class="sb-stat"><span class="sb-stat-label">tokens</span><span class="sb-stat-value" id="sb-stat-tok">0</span></div>
-      <div class="sb-stat"><span class="sb-stat-label">elapsed</span><span class="sb-stat-value" id="sb-stat-time">0.0<span class="sb-unit">s</span></span></div>
-      <div class="sb-stat"><span class="sb-stat-label">throughput</span><span class="sb-stat-value" id="sb-stat-rate">0<span class="sb-unit">bp/s</span></span></div>
-      <div class="sb-stat"><span class="sb-stat-label">GC content</span><span class="sb-stat-value" id="sb-stat-gc">—</span></div>
-      <div class="sb-stat"><span class="sb-stat-label">mean logprob</span><span class="sb-stat-value" id="sb-stat-lp">—</span></div>
-      <div class="sb-stat"><span class="sb-stat-label">perplexity</span><span class="sb-stat-value" id="sb-stat-ppl">—</span></div>
-    </div>
-    <div class="sb-legend" id="sb-legend">
-      <div>token logprob</div>
-      <div class="sb-legend-bar" id="sb-legend-bar"></div>
-      <div class="sb-legend-row"><span id="sb-lp-min">—</span><span id="sb-lp-mid">—</span><span id="sb-lp-max">—</span></div>
-      <svg id="sb-lp-chart" class="sb-lp-chart" preserveAspectRatio="none"></svg>
+      <div>
+        <div class="sb-stats" id="sb-stats">
+          <div class="sb-stat"><span class="sb-stat-label">prompt</span><span class="sb-stat-value" id="sb-stat-prompt">0<span class="sb-unit">bp</span></span></div>
+          <div class="sb-stat"><span class="sb-stat-label">generated</span><span class="sb-stat-value" id="sb-stat-gen">0<span class="sb-unit">bp</span></span></div>
+          <div class="sb-stat"><span class="sb-stat-label">tokens</span><span class="sb-stat-value" id="sb-stat-tok">0</span></div>
+          <div class="sb-stat"><span class="sb-stat-label">elapsed</span><span class="sb-stat-value" id="sb-stat-time">0.0<span class="sb-unit">s</span></span></div>
+          <div class="sb-stat"><span class="sb-stat-label">throughput</span><span class="sb-stat-value" id="sb-stat-rate">0<span class="sb-unit">bp/s</span></span></div>
+          <div class="sb-stat"><span class="sb-stat-label">GC content</span><span class="sb-stat-value" id="sb-stat-gc">—</span></div>
+          <div class="sb-stat"><span class="sb-stat-label">mean logprob</span><span class="sb-stat-value" id="sb-stat-lp">—</span></div>
+          <div class="sb-stat"><span class="sb-stat-label">perplexity</span><span class="sb-stat-value" id="sb-stat-ppl">—</span></div>
+        </div>
+        <div class="sb-legend" id="sb-legend">
+          <div>token logprob</div>
+          <div class="sb-legend-bar" id="sb-legend-bar"></div>
+          <div class="sb-legend-row"><span id="sb-lp-min">—</span><span id="sb-lp-mid">—</span><span id="sb-lp-max">—</span></div>
+          <svg id="sb-lp-chart" class="sb-lp-chart" preserveAspectRatio="none"></svg>
+        </div>
+      </div>
     </div>
   </div>
-</div>
+</section>
 
 </div>
 </div> <!-- /panel-sandbox -->

scripts/precompute.py

@@ -7,9 +7,10 @@ Writes results back into data/genes.json and data/variants.json:
 - per-gene `fold_example` (Carbon /generate + NVIDIA NIM ESMFold)
 
 Usage:
-    python scripts/precompute.py            # everything
-    python scripts/precompute.py --folds    # only the folding fixtures
-    python scripts/precompute.py --no-folds # skip folding fixtures
+    python scripts/precompute.py                       # everything
+    python scripts/precompute.py --folds               # only the folding fixtures
+    python scripts/precompute.py --no-folds            # skip folding fixtures
+    python scripts/precompute.py --folds --only-missing # only genes lacking fold_example
 """
 import json
 import os
@@ -297,7 +298,7 @@ def nim_fold(api_key, sequence):
     }
 
 
-def precompute_folds(client):
+def precompute_folds(client, only_missing=False):
     api_key = os.environ.get("NVIDIA_API_KEY")
     if not api_key:
         raise RuntimeError("NVIDIA_API_KEY missing (set in .env or env)")
@@ -306,6 +307,9 @@ def precompute_folds(client):
     for g in genes:
         if not g.get("exons"):
             continue
+        if only_missing and g.get("fold_example"):
+            print(f"  skipping {g['symbol']} (fold_example already cached)")
+            continue
         last_exon_end = g["exons"][-1]["end"]
         n_tries = FOLD_BEST_OF_LONG if last_exon_end > FOLD_LONG_THRESHOLD else FOLD_BEST_OF_SHORT
         print(f"  folding {g['symbol']} (last exon end {last_exon_end} bp, best-of-{n_tries})…", flush=True)
@@ -376,6 +380,7 @@ def main():
     argv = set(sys.argv[1:])
     only_folds = "--folds" in argv
     skip_folds = "--no-folds" in argv
+    only_missing = "--only-missing" in argv
 
     client = make_client()
     if not only_folds:
@@ -387,7 +392,7 @@ def main():
     if not skip_folds:
         print()
         print("=== precomputing fold fixtures ===")
-        precompute_folds(client)
+        precompute_folds(client, only_missing=only_missing)
 
 
 if __name__ == "__main__":

social-banner.html

@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Carbon · social banner</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap">
+
+<!-- Reuses the same hero stylesheet as demo.html so the banner reads
+     identical to the editorial hero on the main page. -->
+<link rel="stylesheet" href="/assets/styles/base.css">
+<link rel="stylesheet" href="/assets/styles/banner.css">
+
+<style>
+  /* ------------------------------------------------------------------ */
+  /* Standalone page chrome.                                            */
+  /* The banner sits in the middle of the viewport at one of a handful  */
+  /* of fixed social-media canvas sizes (Twitter / OG / LinkedIn / HF). */
+  /* The page paper around it is a touch darker than the banner so the  */
+  /* edges of the social-media canvas read clearly — handy when you're  */
+  /* about to crop a screenshot.                                        */
+  /* ------------------------------------------------------------------ */
+  html, body { height: 100%; }
+  body {
+    background: #e8e5d6;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 28px;
+    padding: 40px 24px;
+    overflow: hidden;
+  }
+
+  /* The social-banner-stage IS the social-media canvas: a fixed width
+     and height drawn at 1:1 device pixels so what you see is exactly
+     what gets exported. Sizes are driven by --sb-w / --sb-h CSS vars
+     set on <html> by the format switcher below. */
+  .social-banner-stage {
+    --sb-w: 1500px;
+    --sb-h: 500px;
+    width: var(--sb-w);
+    height: var(--sb-h);
+    flex-shrink: 0;
+    position: relative;
+    box-shadow:
+      0 1px 0 #cfcdbf inset,
+      0 30px 60px -28px rgba(31, 31, 29, 0.28),
+      0 8px 18px -10px rgba(31, 31, 29, 0.18);
+    /* Auto-scale to fit the viewport when the window is smaller than
+       the social canvas. The factor is set by JS (see fitStage()) so
+       the banner always renders centred and intact, even on a laptop
+       that can't physically fit a 1584-wide canvas. */
+    transform: scale(var(--sb-scale, 1));
+    transform-origin: center center;
+    transition: width 0.22s ease, height 0.22s ease;
+  }
+
+  /* Inside the stage the banner fills it entirely (no max-width cap
+     like on the main page — here the banner IS the canvas). */
+  .social-banner-stage .carbon-banner {
+    width: 100%;
+    height: 100%;
+  }
+  .social-banner-stage .banner-inner {
+    max-width: none;
+    height: 100%;
+    /* Tabs are gone — drop the asymmetric bottom-zero padding from the
+       main hero so the headline sits visually centred top↔bottom. */
+    padding: 36px 56px;
+    /* 2-col grid: headline on the left, helix on the right. The right
+       track is sized as a share of the total stage width so the helix
+       gets more room on a wide LinkedIn cover and less on a tall OG
+       card. */
+    grid-template-columns: minmax(0, 1fr) clamp(280px, 36%, 520px);
+    gap: 32px;
+    min-height: 0;
+  }
+  .social-banner-stage .banner-left {
+    /* No more bottom tab row → 2-row layout: identity strip on top,
+       headline filling the rest. */
+    grid-template-rows: auto 1fr;
+    gap: 14px;
+  }
+
+  /* Headline sizing: tied to the stage height instead of the viewport
+     so the wordmark scales with the social canvas, not the browser
+     window. cqh = container-query-height, falls back to a fixed size
+     on browsers without container queries. */
+  .social-banner-stage { container-type: size; }
+  .social-banner-stage .banner-wordmark {
+    font-size: clamp(64px, 22cqh, 140px);
+  }
+  .social-banner-stage .banner-subtitle {
+    font-size: clamp(11px, 2.6cqh, 16px);
+    margin-top: 10px;
+  }
+  .social-banner-stage .banner-specs {
+    font-size: clamp(10px, 2.2cqh, 13px);
+    margin-top: 10px;
+  }
+  .social-banner-stage .banner-title { font-size: clamp(12px, 2.6cqh, 16px); }
+  .social-banner-stage .banner-path  { font-size: clamp(10px, 2.2cqh, 13px); }
+
+  /* Slightly stronger inset hairline replaces the bottom one we lose
+     with the tabs gone — keeps the banner from looking unfinished. */
+  .social-banner-stage .carbon-banner {
+    box-shadow: inset 0 0 0 1px #cfcdbf;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /* Format switcher — discreet row of pills below the banner. Sets a   */
+  /* CSS var on <html> + a data attribute the JS reads to recompute     */
+  /* the scale-to-fit factor. Excluded from screenshots: the row sits   */
+  /* far enough below the stage that any crop framed on the banner      */
+  /* itself won't catch it.                                             */
+  /* ------------------------------------------------------------------ */
+  .sb-switcher {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #6f6d65;
+  }
+  .sb-switcher__label {
+    margin-right: 8px;
+    color: #8a8a85;
+  }
+  .sb-switcher__btn {
+    appearance: none;
+    border: 1px solid #cfcdbf;
+    background: #f7f5ee;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    padding: 7px 12px;
+    cursor: pointer;
+    transition: background 0.16s, border-color 0.16s, color 0.16s;
+  }
+  .sb-switcher__btn:hover {
+    background: #fff;
+    border-color: #b8b5a6;
+    color: #1f1f1d;
+  }
+  .sb-switcher__btn.is-active {
+    background: #1f1f1d;
+    border-color: #1f1f1d;
+    color: #f7f5ee;
+  }
+  .sb-switcher__dim {
+    margin-left: 8px;
+    color: #b0ada0;
+    font-feature-settings: "tnum";
+  }
+
+  /* Print: hide chrome, show the banner at its true size. */
+  @media print {
+    body { background: white; padding: 0; }
+    .sb-switcher { display: none; }
+    .social-banner-stage { transform: none !important; box-shadow: none; }
+  }
+</style>
+</head>
+<body>
+
+<!-- The social-media canvas. The wrapping .social-banner-stage carries
+     the exact pixel dimensions (1500×500 for Twitter by default); the
+     .carbon-banner inside is the same hero block as on demo.html, minus
+     the logo card and minus the tab strip. -->
+<div class="social-banner-stage" id="sb-stage">
+  <header class="carbon-banner" aria-label="Carbon DNA model banner">
+    <div class="banner-inner">
+      <div class="banner-left">
+
+        <!-- Identity strip — no logo card here, just the model-path
+             breadcrumb so the banner reads as a Hugging Face model
+             card identifier without the square thumbnail. -->
+        <div class="banner-identity">
+          <div class="banner-breadcrumb">
+            <div class="banner-title">CARBON</div>
+            <div class="banner-path">huggingfacebio/carbon-3b</div>
+          </div>
+        </div>
+
+        <!-- Headline: oversized wordmark with blinking caret, then
+             tagline + spec sheet underneath. Same structure as
+             demo.html so the styling carries over verbatim. -->
+        <div class="banner-headline">
+          <h1 class="banner-wordmark"><span>CARBON</span><span class="banner-cursor" aria-hidden="true"></span></h1>
+          <p class="banner-subtitle">Autoregressive Genomic Foundation Model</p>
+          <ul class="banner-specs" aria-label="Model specs">
+            <li class="banner-spec"><strong>49,152</strong> bp context</li>
+            <li class="banner-spec"><strong>6-mer</strong> tokenizer</li>
+            <li class="banner-spec"><strong>1T</strong> train tokens</li>
+          </ul>
+        </div>
+
+      </div>
+
+      <!-- Animated DNA helix, painted by banner.js. -->
+      <div class="banner-helix" aria-hidden="true">
+        <canvas class="cb-helix-canvas"></canvas>
+      </div>
+    </div>
+  </header>
+</div>
+
+<!-- Format switcher. Stays outside the stage so it doesn't show up
+     when you crop the banner. -->
+<div class="sb-switcher" role="group" aria-label="Banner format">
+  <span class="sb-switcher__label">format</span>
+  <button class="sb-switcher__btn is-active" data-format="twitter" data-w="1500" data-h="500">twitter / x · 1500×500</button>
+  <button class="sb-switcher__btn" data-format="og" data-w="1200" data-h="630">og / share · 1200×630</button>
+  <button class="sb-switcher__btn" data-format="linkedin" data-w="1584" data-h="396">linkedin · 1584×396</button>
+  <button class="sb-switcher__btn" data-format="hf" data-w="1280" data-h="640">hugging face · 1280×640</button>
+  <span class="sb-switcher__dim" id="sb-scale-readout">100%</span>
+</div>
+
+<!-- Helix animation. Same script as the main demo — it queries
+     .carbon-banner + .cb-helix-canvas, both of which exist here. -->
+<script src="/assets/js/banner.js"></script>
+
+<script>
+  // ----------------------------------------------------------------
+  // Format switcher + auto-fit-to-viewport.
+  //
+  // The .social-banner-stage carries the EXACT social-media canvas
+  // dimensions (1500×500 for a Twitter header, etc). On a screen that
+  // can't physically fit that many pixels we don't want a scrollbar —
+  // we want the banner to scale down uniformly so it stays centred and
+  // fully visible. We compute the largest scale that fits both axes
+  // inside the viewport (minus some breathing room for the switcher
+  // row) and apply it via CSS transform.
+  // ----------------------------------------------------------------
+  (function initSocialBanner() {
+    const stage = document.getElementById("sb-stage");
+    const readout = document.getElementById("sb-scale-readout");
+    const buttons = document.querySelectorAll(".sb-switcher__btn");
+
+    // Vertical breathing room reserved for the format switcher
+    // (height of the row + body padding + gap). Kept conservative so
+    // the banner always has clear margin around it.
+    const CHROME_V = 160;
+    const CHROME_H = 80;
+
+    function fitStage() {
+      const w = parseFloat(getComputedStyle(stage).getPropertyValue("--sb-w"));
+      const h = parseFloat(getComputedStyle(stage).getPropertyValue("--sb-h"));
+      const availW = Math.max(200, window.innerWidth  - CHROME_H);
+      const availH = Math.max(200, window.innerHeight - CHROME_V);
+      const scale = Math.min(1, availW / w, availH / h);
+      stage.style.setProperty("--sb-scale", scale.toFixed(4));
+      readout.textContent = Math.round(scale * 100) + "%";
+    }
+
+    function setFormat(btn) {
+      buttons.forEach(b => b.classList.toggle("is-active", b === btn));
+      const w = btn.dataset.w + "px";
+      const h = btn.dataset.h + "px";
+      stage.style.setProperty("--sb-w", w);
+      stage.style.setProperty("--sb-h", h);
+      // Reflect in the URL so a chosen format is shareable / bookmarkable.
+      const url = new URL(window.location);
+      url.searchParams.set("format", btn.dataset.format);
+      window.history.replaceState(null, "", url);
+      // Wait one frame so the new --sb-w/--sb-h are applied before we
+      // measure for the fit-to-viewport calculation.
+      requestAnimationFrame(() => {
+        fitStage();
+        // Nudge the canvas to resize against its new CSS box. The
+        // banner.js ResizeObserver should catch this on its own, but
+        // firing a synthetic resize is a cheap belt-and-braces.
+        window.dispatchEvent(new Event("resize"));
+      });
+    }
+
+    buttons.forEach(btn => btn.addEventListener("click", () => setFormat(btn)));
+
+    // Restore from URL query (?format=twitter / og / linkedin / hf).
+    const initial = new URL(window.location).searchParams.get("format");
+    if (initial) {
+      const match = Array.from(buttons).find(b => b.dataset.format === initial);
+      if (match) setFormat(match);
+    }
+
+    fitStage();
+    window.addEventListener("resize", fitStage);
+  })();
+</script>
+
+</body>
+</html>