Spaces:

HuggingFaceBio
/

carbon-demo

Running

tfrere HF Staff Cursor commited on 18 days ago

Commit

1cc98cf

1 Parent(s): d759d24

Hero refresh + sticky tab nav + section polish

Banner / hero
- Desaturate the DNA helix palette (banner.js TINT) so the canvas blends
into the paper rather than punching through it.
- Cursor caret trimmed from the top so it stops poking above the N's
cap height while keeping its baseline aligned with the wordmark.

Sticky tab nav
- New strip (#tab-nav-sticky) slides in from the top once the in-banner
#tab-nav scrolls out of view (IntersectionObserver in tabs.js toggling
.is-tabs-stuck on <body>).
- Styled as a slice of the banner: same paper backing, dotted grain +
green vertical stripes, same bottom hairline. Tabs reuse the in-banner
colour scheme with bumped #b8b5a6 borders, sharp corners, top liseré
on the active tab, and a margin-bottom: -1px trick so the active card
bleeds into the page paper underneath.
- Promoted --paper / --ink / --green / --hairline / --muted to :root so
the sticky nav (a sibling of .carbon-banner, not a descendant) can
resolve them.

Section layout
- §1 tokenizer: 1-mer and 6-mer columns stacked vertically, full-width
DNA input pinned next to the 30 bp counter, stats grouped under both
sequences as a single row with 1-mer/6-mer-prefixed labels.
- §3 data: padding-top on the SNR track-axis-label to breathe under the
bar.
- §4 species: row grid collapsed from 3 columns to 2, identity stats
stacked under the species name instead of in their own column.

Status pills
- completion / species / track / vep: hide the status pill entirely
while in "idle" so the toolbar stays clean until something actually
happens. New .status.is-hidden { display:none } in controls.css.

Misc
- app.py: restore /v1/ suffix on the default ENDPOINT_URL so the OpenAI
SDK hits /v1/completions instead of /completions when running locally.

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

Files changed (14) hide show

app.py +8 -1
assets/js/banner.js +379 -130
assets/js/sections/completion.js +6 -1
assets/js/sections/species.js +8 -6
assets/js/sections/track.js +3 -1
assets/js/sections/vep.js +3 -1
assets/js/tabs.js +17 -1
assets/styles/banner.css +435 -74
assets/styles/base.css +6 -18
assets/styles/controls.css +6 -1
assets/styles/header.css +4 -63
assets/styles/layout.css +72 -62
assets/styles/section-species.css +5 -4
demo.html +257 -222

app.py CHANGED Viewed

@@ -11,7 +11,14 @@ from openai import OpenAI
 ENDPOINT_URL = os.environ.get(
     "ENDPOINT_URL",
-    "https://cr2l9w72ys5pp8le.us-east-1.aws.endpoints.huggingface.cloud",
 )
 MODEL_NAME = os.environ.get(
     "MODEL_NAME",

 ENDPOINT_URL = os.environ.get(
     "ENDPOINT_URL",
+    # NOTE: must end in /v1/ — the OpenAI SDK v1+ appends "completions"
+    # directly to base_url with no auto /v1/ prefix. The HF dedicated
+    # endpoint serves the OpenAI-compatible API at /v1/completions, so
+    # without the suffix the SDK hits /completions and the endpoint
+    # returns 404. Upstream commit 2831701 dropped the /v1/ but HF Spaces
+    # masks this via an ENDPOINT_URL secret that includes it; running
+    # locally with the default URL needs the suffix put back.
+    "https://cr2l9w72ys5pp8le.us-east-1.aws.endpoints.huggingface.cloud/v1/",
 )
 MODEL_NAME = os.environ.get(
     "MODEL_NAME",

assets/js/banner.js CHANGED Viewed

@@ -1,11 +1,15 @@
 // =========================================================================
-// Carbon banner — animated DNA helix (Canvas 2D)
 //
-// Original implementation rendered ~960 SVG <path> mutations per frame, which
-// pinned the main thread at ~25% CPU non-stop. Canvas 2D draws the whole
-// scene to a bitmap each frame with no DOM mutations — typically 10-50× cheaper
-// for this kind of frame-by-frame animation. Math/colors are unchanged so the
-// visual is pixel-equivalent.
 // =========================================================================
 (function initCarbonBanner() {
   const banner = document.querySelector(".carbon-banner");
@@ -18,41 +22,77 @@
   const sequence = ["A","T","A","A","C","G","A","C","T","T","C","C","C","T","A","T","T","G"];
   const complement = { A: "T", T: "A", C: "G", G: "C" };
-  // All physical parameters live in the original SVG viewBox coordinate
-  // system. The applyVbTransform() call below maps that system onto the
-  // canvas backing store (DPR-aware), so we can keep the math identical.
   const helix = {
-    startX: 868, endX: 1988, centerY: 318, amplitude: 88,
-    cycles: 3.62, speed: 0.00015,
-    // Doubled vs the original SVG (96 → 192). On <canvas> the per-segment cost
-    // is negligible, and tighter sampling kills the staircasing visible on
-    // the ribbon edges at high DPR.
-    rungCount: 27, segmentCount: 192,
-    bodyRadius: 6.4, shadowRadius: 8.4,
-    // glyphGap is half the punch-through height around each letter. Bumped vs
-    // the SVG-era 13.5 because rounded line caps eat ~0.7px of the visible
-    // gap on each side at this stroke width, making the rung feel cramped.
-    rungInset: 9.2, glyphGap: 16.5,
   };
-  // Helix bbox in viewBox coords. The CSS-positioned <canvas> mirrors this
-  // box exactly (see .cb-helix-canvas in <style>).
-  const VB = { x: 858, y: 220, w: 1140, h: 196 };
   const COLORS = {
-    shadow: "#aeb5ad",
     body: "#e4e5dc",
-    bodyStroke: "rgba(49, 127, 63, 0.14)",
     edge: "#2d332e",
     green: "#317f3f",
   };
-  // Stroke-only ATCG glyphs — same path strings the SVG version used.
-  // Path2D parses an SVG path string directly; ctx.stroke(path2d) is fast.
   const glyphPaths = {
-    A: new Path2D("M -5 8 L 0 -8 L 5 8 M -3.1 2 L 3.1 2"),
-    C: new Path2D("M 5 -6 C 1 -9 -6 -7 -6 0 C -6 7 1 9 5 6"),
-    G: new Path2D("M 5 -6 C 1 -9 -6 -7 -6 0 C -6 7 1 9 5 6 M 5 1 L 1 1 M 5 1 L 5 6"),
-    T: new Path2D("M -6 -7 L 6 -7 M 0 -7 L 0 8"),
   };
   // --- Canvas sizing (DPR + viewBox→pixels mapping) ---------------------
@@ -62,14 +102,16 @@
     if (rect.width === 0 || rect.height === 0) return;
     cssW = rect.width;
     cssH = rect.height;
-    // Use the device's full DPR (typically 2 or 3 on Retina displays).
-    // The banner is small (~600×100 CSS px) so even DPR 3 stays cheap.
     dpr = window.devicePixelRatio || 1;
     canvas.width = Math.round(cssW * dpr);
     canvas.height = Math.round(cssH * dpr);
     const sx = canvas.width / VB.w;
     const sy = canvas.height / VB.h;
-    uniformScale = Math.min(sx, sy);
     offsetX = (canvas.width  - VB.w * uniformScale) / 2;
     offsetY = (canvas.height - VB.h * uniformScale) / 2;
   }
@@ -80,98 +122,213 @@
       -VB.y * uniformScale + offsetY,
     );
   }
-  // Convert a CSS-pixel size to viewBox units (so strokes/fonts stay crisp
-  // regardless of the canvas size — equivalent to vector-effect:non-scaling-stroke).
   function px(cssPx) { return (cssPx * dpr) / uniformScale; }
-  // --- Math (verbatim from the SVG version) -----------------------------
-  function pointAt(x, offset, phase) {
-    const t = (x - helix.startX) / (helix.endX - helix.startX);
     const theta = t * helix.cycles * Math.PI * 2 + phase + offset;
-    const slope = Math.cos(theta) * helix.amplitude * helix.cycles * Math.PI * 2 / (helix.endX - helix.startX);
     const normalLength = Math.hypot(slope, 1);
     return {
-      x,
-      y: helix.centerY + Math.sin(theta) * helix.amplitude,
       z: Math.cos(theta),
-      nx: -slope / normalLength,
-      ny: 1 / normalLength,
     };
   }
-  // Pre-allocate sample buffers — never reallocated per frame.
   const pointsA = new Array(helix.segmentCount + 1);
   const pointsB = new Array(helix.segmentCount + 1);
   function fillSamples(buf, offset, phase) {
-    const span = helix.endX - helix.startX;
     for (let i = 0; i <= helix.segmentCount; i++) {
-      buf[i] = pointAt(helix.startX + (span * i) / helix.segmentCount, offset, phase);
     }
   }
-  // Pre-allocated segment list (avoids GC churn).
-  const segs = new Array(helix.segmentCount * 2);
-  for (let i = 0; i < segs.length; i++) segs[i] = { a: null, b: null, z: 0 };
-  function fillSegments() {
-    const N = helix.segmentCount;
-    for (let i = 0; i < N; i++) {
-      const a0 = pointsA[i], b0 = pointsA[i + 1];
-      const a1 = pointsB[i], b1 = pointsB[i + 1];
-      const s0 = segs[2 * i];     s0.a = a0; s0.b = b0; s0.z = (a0.z + b0.z) * 0.5;
-      const s1 = segs[2 * i + 1]; s1.a = a1; s1.b = b1; s1.z = (a1.z + b1.z) * 0.5;
     }
   }
-  // --- Drawing primitives (operate in viewBox space) --------------------
-  function ribbonPath(a, b, radius) {
     ctx.beginPath();
-    ctx.moveTo(a.x + a.nx * radius, a.y + a.ny * radius);
-    ctx.lineTo(b.x + b.nx * radius, b.y + b.ny * radius);
-    ctx.lineTo(b.x - b.nx * radius, b.y - b.ny * radius);
-    ctx.lineTo(a.x - a.nx * radius, a.y - a.ny * radius);
     ctx.closePath();
   }
-  function lineEdge(a, b, radius) {
     ctx.beginPath();
-    ctx.moveTo(a.x + a.nx * radius, a.y + a.ny * radius);
-    ctx.lineTo(b.x + b.nx * radius, b.y + b.ny * radius);
   }
-  function drawSegment(seg) {
-    const z = seg.z;
-    const front = Math.max(0, Math.min(1, (z + 1) / 2));
-    const a = seg.a, b = seg.b;
-    // Soft outer shadow (depth cue)
-    ctx.globalAlpha = 0.05 + front * 0.12;
-    ctx.fillStyle = COLORS.shadow;
-    ribbonPath(a, b, helix.shadowRadius);
-    ctx.fill();
-    // Body ribbon (fill + thin green outline, same alpha — matches SVG opacity behavior)
-    ctx.globalAlpha = 0.5 + front * 0.42;
-    ribbonPath(a, b, helix.bodyRadius);
-    ctx.fillStyle = COLORS.body;
     ctx.fill();
-    ctx.strokeStyle = COLORS.bodyStroke;
-    ctx.lineWidth = px(0.8);
-    ctx.stroke();
-    // Edges (top + bottom ink lines)
-    ctx.globalAlpha = 0.2 + front * 0.68;
-    ctx.strokeStyle = COLORS.edge;
-    ctx.lineWidth = px(1.15);
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
-    lineEdge(a, b,  helix.bodyRadius + 0.35);
     ctx.stroke();
-    lineEdge(a, b, -(helix.bodyRadius + 0.35));
     ctx.stroke();
   }
-  function drawRung(x, yStart, letterYs, yEnd, gap) {
-    const start = Math.min(yStart, yEnd);
-    const end   = Math.max(yStart, yEnd);
-    // Compute gaps where letters punch through the rung.
     const ranges = [];
-    for (const y of letterYs) {
-      const f = Math.max(start, y - gap);
-      const t = Math.min(end,   y + gap);
       if (t > f) ranges.push([f, t]);
     }
     ranges.sort((u, v) => u[0] - v[0]);
@@ -184,10 +341,10 @@
     ctx.beginPath();
     let cursor = start;
     for (const [f, t] of merged) {
-      if (f - cursor > 0.7) { ctx.moveTo(x, cursor); ctx.lineTo(x, f); }
       cursor = t;
     }
-    if (end - cursor > 0.7) { ctx.moveTo(x, cursor); ctx.lineTo(x, end); }
     ctx.stroke();
   }
   function drawGlyph(letter, x, y) {
@@ -197,77 +354,170 @@
     ctx.restore();
   }
   // --- Frame ------------------------------------------------------------
   function drawFrame(phase) {
     if (cssW === 0 || cssH === 0) return;
-    // Identity transform to clear the raw pixel grid, then re-apply viewBox map.
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     applyVbTransform();
     fillSamples(pointsA, 0, phase);
     fillSamples(pointsB, Math.PI, phase);
-    fillSegments();
-    segs.sort((u, v) => u.z - v.z);
-    // Pass 1: back segments (z < 0) — drawn under rungs/glyphs.
-    let i = 0;
-    for (; i < segs.length && segs[i].z < 0; i++) drawSegment(segs[i]);
-    // Rungs + ATCG glyphs (only those whose rung span makes them visible).
     for (let k = 0; k < helix.rungCount; k++) {
       const t = k / (helix.rungCount - 1);
-      const x = helix.startX + (helix.endX - helix.startX) * t;
-      const a = pointAt(x, 0, phase);
-      const b = pointAt(x, Math.PI, phase);
-      const yTop = Math.min(a.y, b.y);
-      const yBottom = Math.max(a.y, b.y);
-      const span = yBottom - yTop;
       const inset = Math.min(helix.rungInset, Math.max(0, span * 0.5 - 3));
       const visible = Math.max(0, Math.min(1, (span - 34) / 70));
-      const aLetterY = a.y + (b.y - a.y) * 0.34;
-      const bLetterY = b.y + (a.y - b.y) * 0.34;
       const letterGap = Math.min(helix.glyphGap, Math.max(8.5, span * 0.16));
-      ctx.globalAlpha = 0.18 + visible * 0.72;
-      ctx.strokeStyle = COLORS.green;
-      ctx.lineWidth = px(1.35);
       ctx.lineCap = "round";
-      drawRung(x, yTop + inset, [aLetterY, bLetterY], yBottom - inset, letterGap);
-      ctx.globalAlpha = 0.16 + visible * 0.84;
-      ctx.lineWidth = px(1.8);
       ctx.lineCap = "square";
       ctx.lineJoin = "miter";
       const letter = sequence[k % sequence.length];
-      drawGlyph(letter, x, aLetterY);
-      drawGlyph(complement[letter], x, bLetterY);
     }
-    // Pass 2: front segments (z >= 0) — drawn on top of rungs/glyphs.
-    for (; i < segs.length; i++) drawSegment(segs[i]);
     ctx.globalAlpha = 1;
   }
   resize();
-  // Static frame for users who prefer reduced motion.
   if (prefersReduced) {
     drawFrame(0.6);
     return;
   }
   // --- Animation loop, paused off-screen and on hidden tab --------------
-  // 30fps is visually indistinguishable from 60fps at this rotation speed
-  // and halves the paint workload.
   const FRAME_INTERVAL_MS = 1000 / 30;
   let rafId = 0, running = false, inViewport = true, lastFrameTs = 0;
   function tick(ts) {
     if (!running) return;
     if (ts - lastFrameTs >= FRAME_INTERVAL_MS) {
       lastFrameTs = ts;
-      drawFrame(ts * helix.speed);
     }
     rafId = requestAnimationFrame(tick);
   }
@@ -275,6 +525,7 @@
     if (running || !inViewport || document.hidden) return;
     running = true;
     lastFrameTs = 0;
     rafId = requestAnimationFrame(tick);
   }
   function stop() {
@@ -295,14 +546,12 @@
     else start();
   });
-  // Re-size the backing store when the banner is resized (responsive layout).
   const ro = new ResizeObserver(() => {
     resize();
-    drawFrame(lastFrameTs * helix.speed);
   });
   ro.observe(canvas);
   drawFrame(0);
   start();
 })();

 // =========================================================================
+// Carbon banner — animated VERTICAL DNA helix (Canvas 2D)
 //
+// The helix is drawn upright (long axis = y). The CSS rotates the canvas
+// by a few degrees for the "technical drawing on a bench" feel; the math
+// here stays axis-aligned to keep the z-sort and rung logic readable.
+//
+// Compared to the original horizontal version, the only change is which
+// coordinate carries the cycles vs the amplitude:
+//   horizontal: y = sin(theta(x)) * amplitude
+//   vertical:   x = sin(theta(y)) * amplitude
+// Everything else (z-sort, rung gaps, glyph shapes) carries over verbatim.
 // =========================================================================
 (function initCarbonBanner() {
   const banner = document.querySelector(".carbon-banner");
   const sequence = ["A","T","A","A","C","G","A","C","T","T","C","C","C","T","A","T","T","G"];
   const complement = { A: "T", T: "A", C: "G", G: "C" };
+  // All physical parameters in viewBox units. The helix is upright: the long
+  // axis runs from startY to endY; sinusoid wiggle is in x around centerX.
+  // 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,
+    cycles: 4.0, speed: 0.00015,
+    rungCount: 26,
+    // Dense sampling: each strand section is rendered as a continuous
+    // polyline with this many samples (≈128 per cycle at 512), so the
+    // curves stay smooth even at the apex of each loop where the tangent
+    // direction changes fastest. Cost is negligible: we still only do
+    // 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,
+    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).
+  const VB = { x: 0, y: -30, w: 440, h: 1160 };
   const COLORS = {
     body: "#e4e5dc",
     edge: "#2d332e",
     green: "#317f3f",
   };
+  // Depth is rendered ENTIRELY through COLOR modulation, not alpha.
+  // Every paint operation runs at alpha = 1, which kills the compositing
+  // artifacts (visible "step" at section boundaries / overlap zones) that
+  // an alpha-based depth model produces.
+  //
+  // Each visual layer (body, green hairline, dark edge) is interpolated
+  // between a "back" tint (z = -1, washed-out toward the paper) and a
+  // "front" tint (z = +1, full ink). At z = 0 the colour is the midpoint —
+  // so a strand section that crosses the back/front boundary has a perfectly
+  // continuous colour curve, no perceptible plateau.
+  //
+  // The whole palette is tuned to sit LOW-contrast against the page paper
+  // (#f7f5ee). The helix should read as a soft watermark / blueprint, not
+  // as a hi-contrast logo: front tints are pulled toward the paper, the
+  // outer edge is desaturated forest rather than saturated forest, and the
+  // green hairline is more sage than brand-green.
+  //
+  // [r, g, b] triplets, NOT strings — we do per-frame linear interpolation
+  // in JS and emit a single rgb() per gradient stop.
+  const TINT = {
+    bodyBack:   [243, 240, 230],   // sits almost on top of the paper
+    bodyFront:  [232, 230, 218],   // gentle cream, reads as a soft ribbon
+    // Inner hairline: muted sage accent, not full brand green.
+    greenBack:  [205, 220, 208],
+    greenFront: [125, 165, 132],
+    // Outer edge: low-contrast desaturated forest. Still green-leaning so
+    // the silhouette reads as a strand rather than a grey shape, but lifted
+    // far enough off black that the ribbon merges with the paper instead of
+    // punching a hole through it.
+    edgeBack:   [195, 215, 198],
+    edgeFront:  [108, 150, 118],
+  };
+  // ATCG glyphs — scaled up so they read at the larger banner size. Stroke
+  // widths bump in drawFrame() to keep the visual weight consistent.
   const glyphPaths = {
+    A: new Path2D("M -11 17 L 0 -17 L 11 17 M -6.6 4 L 6.6 4"),
+    C: new Path2D("M 11 -13 C 2 -19 -13 -15 -13 0 C -13 15 2 19 11 13"),
+    G: new Path2D("M 11 -13 C 2 -19 -13 -15 -13 0 C -13 15 2 19 11 13 M 11 2 L 2 2 M 11 2 L 11 13"),
+    T: new Path2D("M -13 -15 L 13 -15 M 0 -15 L 0 17"),
   };
   // --- Canvas sizing (DPR + viewBox→pixels mapping) ---------------------
     if (rect.width === 0 || rect.height === 0) return;
     cssW = rect.width;
     cssH = rect.height;
     dpr = window.devicePixelRatio || 1;
     canvas.width = Math.round(cssW * dpr);
     canvas.height = Math.round(cssH * dpr);
     const sx = canvas.width / VB.w;
     const sy = canvas.height / VB.h;
+    // Cover-fit: the helix fills the canvas in both dimensions, with overflow
+    // clipped by the parent's overflow:hidden. This makes the helix BLEED
+    // beyond the banner top/bottom for a "spilling out of the frame" feel —
+    // exactly what "much bigger" calls for.
+    uniformScale = Math.max(sx, sy);
     offsetX = (canvas.width  - VB.w * uniformScale) / 2;
     offsetY = (canvas.height - VB.h * uniformScale) / 2;
   }
       -VB.y * uniformScale + offsetY,
     );
   }
+  // viewBox-units helper for stroke widths (mimics vector-effect:non-scaling).
   function px(cssPx) { return (cssPx * dpr) / uniformScale; }
+  // --- Math: vertical helix ---------------------------------------------
+  // tangent at (x, y) along the curve has dy=1 (we parameterize by y);
+  // dx/dy is the slope. The unit normal in 2D is (-dy, dx)/|tangent|, i.e.
+  // (-1, slope) normalised — pointing "outward" perpendicular to the curve.
+  function pointAt(y, offset, phase) {
+    const t = (y - helix.startY) / (helix.endY - helix.startY);
     const theta = t * helix.cycles * Math.PI * 2 + phase + offset;
+    const slope = Math.cos(theta) * helix.amplitude * helix.cycles * Math.PI * 2 / (helix.endY - helix.startY);
     const normalLength = Math.hypot(slope, 1);
     return {
+      x: helix.centerX + Math.sin(theta) * helix.amplitude,
+      y,
       z: Math.cos(theta),
+      nx: 1 / normalLength,
+      ny: -slope / normalLength,
     };
   }
   const pointsA = new Array(helix.segmentCount + 1);
   const pointsB = new Array(helix.segmentCount + 1);
   function fillSamples(buf, offset, phase) {
+    const span = helix.endY - helix.startY;
     for (let i = 0; i <= helix.segmentCount; i++) {
+      buf[i] = pointAt(helix.startY + (span * i) / helix.segmentCount, offset, phase);
     }
   }
+  // --- Drawing primitives -----------------------------------------------
+  //
+  // Each strand is rendered as a series of CONTINUOUS sections (one per
+  // contiguous z-half) so the curve never breaks into small straight
+  // facets — lineJoin: "round" smooths every junction inside a section.
+  //
+  // Depth is conveyed entirely through COLOUR (see TINT / strandColourGradient
+  // below). Sections are still split at the z = 0 crossing so we can draw
+  // back-of-rungs and front-of-rungs in separate passes — that's what
+  // produces the visual occlusion when one strand crosses over a rung.
+  // Because every section of a given strand shares the same colour
+  // gradient, the back↔front handoff is perfectly continuous: at any
+  // pixel y the back section and front section paint the same colour.
+  // Find contiguous ranges of indices in `points` where (z >= 0) === wantFront.
+  // Each range is extended by 1 sample on each side (when possible) so adjacent
+  // back/front sections overlap visually — no hairline gap at the z=0 crossing.
+  function findRanges(points, wantFront) {
+    const ranges = [];
+    let runStart = -1;
+    for (let i = 0; i < points.length; i++) {
+      const isFront = points[i].z >= 0;
+      if (isFront === wantFront) {
+        if (runStart === -1) runStart = i > 0 ? i - 1 : i;
+      } else if (runStart !== -1) {
+        ranges.push([runStart, i]);
+        runStart = -1;
+      }
     }
+    if (runStart !== -1) ranges.push([runStart, points.length - 1]);
+    return ranges;
   }
+  // Trace the OUTLINE of a ribbon section in viewBox space: walk the top
+  // edge from `from` to `to`, then the bottom edge back. Used both to fill
+  // and to stroke the green hairline outline around the body.
+  function ribbonOutlinePath(points, from, to, radius) {
     ctx.beginPath();
+    for (let i = from; i <= to; i++) {
+      const p = points[i];
+      const x = p.x + p.nx * radius;
+      const y = p.y + p.ny * radius;
+      if (i === from) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    }
+    for (let i = to; i >= from; i--) {
+      const p = points[i];
+      ctx.lineTo(p.x - p.nx * radius, p.y - p.ny * radius);
+    }
     ctx.closePath();
   }
+  // Open polyline along ONE edge (top or bottom) of a ribbon section. Used
+  // for the dark ink edge strokes, which look better drawn as a single
+  // continuous path (lineJoin: round smooths every join automatically).
+  function edgePath(points, from, to, signedRadius) {
     ctx.beginPath();
+    for (let i = from; i <= to; i++) {
+      const p = points[i];
+      const x = p.x + p.nx * signedRadius;
+      const y = p.y + p.ny * signedRadius;
+      if (i === from) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    }
   }
+  // Smoothstep eases the back↔front transition so the colour change happens
+  // gradually around z = 0 instead of swinging through that point linearly.
+  // Visually: less time spent in the "ambiguous middle tone", more time in
+  // pure-back / pure-front colour — the eye reads it as two clear depth
+  // zones with a soft crossfade, not as a constant fade.
+  function smoothstep(x) {
+    const t = x < 0 ? 0 : x > 1 ? 1 : x;
+    return t * t * (3 - 2 * t);
+  }
+  // Build a VERTICAL colour gradient that spans the full strand (startY →
+  // endY) and lerps each visual layer between its back-tint and front-tint
+  // based on the local z value at every sample. Returns a CanvasGradient
+  // ready to use as fillStyle / strokeStyle.
+  //
+  // CRITICAL: this gradient is built ONCE per frame per strand and reused
+  // by every section (back AND front) of that strand. The shared spatial
+  // mapping is what makes back↔front transitions perfectly seamless — at
+  // any pixel y, both sections compute the exact same colour.
+  function strandColourGradient(points, tintBack, tintFront) {
+    const y0 = points[0].y;
+    const y1 = points[points.length - 1].y;
+    const g = ctx.createLinearGradient(0, y0, 0, y1);
+    const N = points.length - 1;
+    const dR = tintFront[0] - tintBack[0];
+    const dG = tintFront[1] - tintBack[1];
+    const dB = tintFront[2] - tintBack[2];
+    for (let i = 0; i <= N; i++) {
+      const t = i / N;
+      const front = smoothstep((points[i].z + 1) * 0.5);
+      const r = (tintBack[0] + front * dR) | 0;
+      const gg = (tintBack[1] + front * dG) | 0;
+      const b = (tintBack[2] + front * dB) | 0;
+      g.addColorStop(t, `rgb(${r},${gg},${b})`);
+    }
+    return g;
+  }
+  // Pre-built per-frame gradients for the two strands. Each holds the three
+  // colour gradients used by drawRibbonSection() — body fill, green
+  // hairline, dark ink edge.
+  let gradsA = null, gradsB = null;
+  function rebuildStrandGradients() {
+    gradsA = {
+      body:  strandColourGradient(pointsA, TINT.bodyBack,  TINT.bodyFront),
+      green: strandColourGradient(pointsA, TINT.greenBack, TINT.greenFront),
+      edge:  strandColourGradient(pointsA, TINT.edgeBack,  TINT.edgeFront),
+    };
+    gradsB = {
+      body:  strandColourGradient(pointsB, TINT.bodyBack,  TINT.bodyFront),
+      green: strandColourGradient(pointsB, TINT.greenBack, TINT.greenFront),
+      edge:  strandColourGradient(pointsB, TINT.edgeBack,  TINT.edgeFront),
+    };
+  }
+  // FILL pass for one section. The closed polygon is FILLED ONLY — never
+  // stroked — so the perpendicular caps at the section's two ends stay
+  // invisible. Adjacent sections overlap by 1-2 samples, which guarantees
+  // that the geometric edge of one polygon falls inside the body of the
+  // next, so the anti-aliased polygon outlines never read as a hairline
+  // step either.
+  function drawRibbonFill(points, from, to, grads) {
+    if (to <= from) return;
+    ctx.globalAlpha = 1;
+    ribbonOutlinePath(points, from, to, helix.bodyRadius);
+    ctx.fillStyle = grads.body;
     ctx.fill();
+  }
+  // EDGES pass for one section. Each of the 4 lines (green hairline top,
+  // green hairline bottom, dark ink top, dark ink bottom) is an OPEN
+  // polyline drawn separately. No closed-path stroke anywhere — that's
+  // what eliminates the perpendicular "step" marks across the strand that
+  // a closed-polygon stroke would draw at the cap positions.
+  //
+  // Round caps at the polyline endpoints DO leak a tiny half-disc past the
+  // section boundary, but because adjacent sections overlap and share the
+  // same colour gradient, the leak from one section is overdrawn by the
+  // body fill / edge polyline of the next section in the same XY position
+  // with the same colour. Net visual: a single continuous edge with no
+  // visible joint.
+  function drawRibbonEdges(points, from, to, grads) {
+    if (to <= from) return;
+    ctx.globalAlpha = 1;
+    // Thin green hairline at the inner rim of the body.
+    ctx.strokeStyle = grads.green;
+    ctx.lineWidth = px(0.9);
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
+    edgePath(points, from, to,  helix.bodyRadius - 0.2);
     ctx.stroke();
+    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.
+    ctx.strokeStyle = grads.edge;
+    ctx.lineWidth = px(2.0);
+    edgePath(points, from, to,  helix.bodyRadius + 0.4);
+    ctx.stroke();
+    edgePath(points, from, to, -(helix.bodyRadius + 0.4));
     ctx.stroke();
   }
+  // Rungs are now HORIZONTAL lines (perpendicular to the vertical helix axis).
+  function drawRung(y, xStart, letterXs, xEnd, gap) {
+    const start = Math.min(xStart, xEnd);
+    const end   = Math.max(xStart, xEnd);
     const ranges = [];
+    for (const x of letterXs) {
+      const f = Math.max(start, x - gap);
+      const t = Math.min(end,   x + gap);
       if (t > f) ranges.push([f, t]);
     }
     ranges.sort((u, v) => u[0] - v[0]);
     ctx.beginPath();
     let cursor = start;
     for (const [f, t] of merged) {
+      if (f - cursor > 0.7) { ctx.moveTo(cursor, y); ctx.lineTo(f, y); }
       cursor = t;
     }
+    if (end - cursor > 0.7) { ctx.moveTo(cursor, y); ctx.lineTo(end, y); }
     ctx.stroke();
   }
   function drawGlyph(letter, x, y) {
     ctx.restore();
   }
+  // Lerp helper for rungs / glyphs — local point in time, doesn't deserve a
+  // gradient. Pass two RGB triplets and a `front` value in [0, 1]; returns
+  // a CSS rgb() string.
+  function tintAt(tintBack, tintFront, front) {
+    const f = smoothstep(front);
+    const r = (tintBack[0] + f * (tintFront[0] - tintBack[0])) | 0;
+    const g = (tintBack[1] + f * (tintFront[1] - tintBack[1])) | 0;
+    const b = (tintBack[2] + f * (tintFront[2] - tintBack[2])) | 0;
+    return `rgb(${r},${g},${b})`;
+  }
   // --- Frame ------------------------------------------------------------
   function drawFrame(phase) {
     if (cssW === 0 || cssH === 0) return;
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     applyVbTransform();
     fillSamples(pointsA, 0, phase);
     fillSamples(pointsB, Math.PI, phase);
+    rebuildStrandGradients();
+    // Section the strands so we can draw back-of-rungs and front-of-rungs
+    // in separate passes (only way to get the visual crossing). All
+    // sections of the same strand share that strand's colour gradient, so
+    // the back↔front handoff is perfectly continuous.
+    const backA  = findRanges(pointsA, false);
+    const backB  = findRanges(pointsB, false);
+    const frontA = findRanges(pointsA, true);
+    const frontB = findRanges(pointsB, true);
+    // Pass 1a: back BODY FILLS of both strands.
+    for (const [f, t] of backA) drawRibbonFill(pointsA, f, t, gradsA);
+    for (const [f, t] of backB) drawRibbonFill(pointsB, f, t, gradsB);
+    // Pass 1b: back EDGES (separate open polylines per side — no caps).
+    for (const [f, t] of backA) drawRibbonEdges(pointsA, f, t, gradsA);
+    for (const [f, t] of backB) drawRibbonEdges(pointsB, f, t, gradsB);
+    // Rungs + ATCG glyphs. The rung connects strand A's point and strand
+    // B's point, which sit at OPPOSITE z values at any given y (the strands
+    // are π out of phase). We exploit that: the rung's colour fades along
+    // its length via a horizontal gradient — bright green near whichever
+    // strand is in front, soft sage near whichever strand is in back.
+    // Glyphs follow the same logic but as a single-tone tint per letter.
     for (let k = 0; k < helix.rungCount; k++) {
       const t = k / (helix.rungCount - 1);
+      const y = helix.startY + (helix.endY - helix.startY) * t;
+      const a = pointAt(y, 0, phase);
+      const b = pointAt(y, Math.PI, phase);
+      const xLeft = Math.min(a.x, b.x);
+      const xRight = Math.max(a.x, b.x);
+      const span = xRight - xLeft;
       const inset = Math.min(helix.rungInset, Math.max(0, span * 0.5 - 3));
       const visible = Math.max(0, Math.min(1, (span - 34) / 70));
+      const aLetterX = a.x + (b.x - a.x) * 0.34;
+      const bLetterX = b.x + (a.x - b.x) * 0.34;
       const letterGap = Math.min(helix.glyphGap, Math.max(8.5, span * 0.16));
+      // Horizontal gradient along the rung. tA/tB are the colour tints at
+      // strand A's and strand B's ends, derived from their respective z.
+      const frontA01 = (a.z + 1) * 0.5;
+      const frontB01 = (b.z + 1) * 0.5;
+      const colA = tintAt(TINT.greenBack, TINT.greenFront, frontA01);
+      const colB = tintAt(TINT.greenBack, TINT.greenFront, frontB01);
+      const rungGrad = ctx.createLinearGradient(a.x, y, b.x, y);
+      rungGrad.addColorStop(0, colA);
+      rungGrad.addColorStop(1, colB);
+      ctx.globalAlpha = 0.35 + visible * 0.55;     // taper rungs at the cycle apex
+      ctx.strokeStyle = rungGrad;
+      ctx.lineWidth = px(1.9);
       ctx.lineCap = "round";
+      drawRung(y, xLeft + inset, [aLetterX, bLetterX], xRight - inset, letterGap);
+      // Glyphs: each letter takes the strand-local tint (sage for back,
+      // green for front). The letter sitting on strand A's side uses A's
+      // z, the complement on B's side uses B's z.
+      // Stroke bumped to px(3.6) so the ATCG glyphs read as bold/poster
+      // weight rather than a technical line drawing — they have to hold
+      // their own next to a JetBrains Mono 800 wordmark.
+      ctx.globalAlpha = 0.35 + visible * 0.6;
+      ctx.lineWidth = px(4.6);
       ctx.lineCap = "square";
       ctx.lineJoin = "miter";
       const letter = sequence[k % sequence.length];
+      ctx.strokeStyle = colA;
+      drawGlyph(letter, aLetterX, y);
+      ctx.strokeStyle = colB;
+      drawGlyph(complement[letter], bLetterX, y);
     }
     ctx.globalAlpha = 1;
+    // Pass 3a: front BODY FILLS — drawn on top of rungs so the front
+    // strand visually OCCLUDES rungs it passes in front of.
+    for (const [f, t] of frontA) drawRibbonFill(pointsA, f, t, gradsA);
+    for (const [f, t] of frontB) drawRibbonFill(pointsB, f, t, gradsB);
+    // Pass 3b: front EDGES on top.
+    for (const [f, t] of frontA) drawRibbonEdges(pointsA, f, t, gradsA);
+    for (const [f, t] of frontB) drawRibbonEdges(pointsB, f, t, gradsB);
   }
   resize();
   if (prefersReduced) {
     drawFrame(0.6);
     return;
   }
   // --- Animation loop, paused off-screen and on hidden tab --------------
   const FRAME_INTERVAL_MS = 1000 / 30;
   let rafId = 0, running = false, inViewport = true, lastFrameTs = 0;
+  // Phase is now ACCUMULATED frame-by-frame instead of being computed from
+  // raw timestamps. That lets us multiply the per-frame phase delta by a
+  // dynamic speed factor — specifically a scroll-driven "boost" — without
+  // losing the smooth continuity of the animation.
+  let phase = 0;
+  let lastTickTs = 0;
+  // Scroll-driven energy:
+  //   boostTarget — set by the scroll listener from instantaneous velocity,
+  //                  decays toward 0 every frame (half-life ≈ 700ms).
+  //   boost       — lerps toward boostTarget every frame (factor 0.18).
+  //
+  // Two-stage smoothing gives a clean ramp-UP when the user starts
+  // scrolling AND a clean ramp-DOWN once they stop, without ever cutting
+  // speed abruptly.
+  let boost = 0;
+  let boostTarget = 0;
+  let scrollLastY = window.scrollY;
+  let scrollLastTs = performance.now();
+  window.addEventListener("scroll", () => {
+    const now = performance.now();
+    const dy = Math.abs(window.scrollY - scrollLastY);
+    const dt = Math.max(1, now - scrollLastTs);
+    const velocity = dy / dt;                       // px per ms
+    // Map velocity to an additional speed multiplier on top of the base
+    // rotation speed. Capped so very fast scrolls don't turn the hero
+    // into a blender.
+    boostTarget = Math.max(boostTarget, Math.min(9, velocity * 1.5));
+    scrollLastY = window.scrollY;
+    scrollLastTs = now;
+  }, { passive: true });
   function tick(ts) {
     if (!running) return;
     if (ts - lastFrameTs >= FRAME_INTERVAL_MS) {
+      const dt = lastTickTs ? Math.min(64, ts - lastTickTs) : FRAME_INTERVAL_MS;
+      lastTickTs = ts;
       lastFrameTs = ts;
+      // Smooth ramp toward the current target. Lerp factor tuned so the
+      // helix RESPONDS visibly within a handful of frames (~2–3 frames at
+      // 30 fps to reach 75% of the target) rather than easing in slowly,
+      // while still avoiding any hard cut.
+      boost += (boostTarget - boost) * 0.4;
+      // Slightly faster decay of the target so the return-to-rest is also
+      // less drawn out (half-life ≈ 450 ms).
+      boostTarget *= Math.pow(0.25, dt / 1000);
+      phase += dt * helix.speed * (1 + boost);
+      drawFrame(phase);
     }
     rafId = requestAnimationFrame(tick);
   }
     if (running || !inViewport || document.hidden) return;
     running = true;
     lastFrameTs = 0;
+    lastTickTs = 0;             // reset so the first dt after a pause is sane
     rafId = requestAnimationFrame(tick);
   }
   function stop() {
     else start();
   });
   const ro = new ResizeObserver(() => {
     resize();
+    drawFrame(phase);
   });
   ro.observe(canvas);
   drawFrame(0);
   start();
 })();

assets/js/sections/completion.js CHANGED Viewed

@@ -36,7 +36,12 @@
   function setStatus(text, mode = "") {
     els.statusText.textContent = text;
-    els.status.className = "status" + (mode ? " " + mode : "");
   }
   function renderTrack() {

   function setStatus(text, mode = "") {
     els.statusText.textContent = text;
+    // No "idle" UI: an empty or "idle" text means the demo hasn't done
+    // anything meaningful yet → hide the pill entirely so the toolbar
+    // stays clean. setStatus("done · 432 bp", ...) or any non-idle text
+    // brings it back via the className reset.
+    const hide = !text || text === "idle";
+    els.status.className = "status" + (mode ? " " + mode : "") + (hide ? " is-hidden" : "");
   }
   function renderTrack() {

assets/js/sections/species.js CHANGED Viewed

@@ -22,7 +22,9 @@
   function setStatus(text, mode = "") {
     els.statusText.textContent = text;
-    els.status.className = "status" + (mode ? " " + mode : "");
   }
   function basesPerLine(el) {
@@ -59,16 +61,16 @@
         <div class="species-name" style="border-left-color:${s.color}">${s.common}</div>
         <div class="species-sub">${s.ortholog_symbol}</div>
         <div class="species-sub">chr${s.chrom} · strand ${s.strand}</div>
       </div>
       <div>
         <div class="species-seq" data-role="output">— click "run all" to generate —</div>
         <div class="species-seq" data-role="ref" style="margin-top:4px"></div>
       </div>
-      <div class="species-stats">
-        <div class="stat-id">${idPct}</div>
-        <div class="stat-sub">${total > 0 ? `${match}/${total} bases` : "not run"}</div>
-        ${meanLp == null ? "" : `<div class="stat-sub">logP ${meanLp.toFixed(2)}</div>`}
-      </div>
     `;
     const outEl = wrap.querySelector('[data-role="output"]');

   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 basesPerLine(el) {
         <div class="species-name" style="border-left-color:${s.color}">${s.common}</div>
         <div class="species-sub">${s.ortholog_symbol}</div>
         <div class="species-sub">chr${s.chrom} · strand ${s.strand}</div>
+        <div class="species-stats">
+          <div class="stat-id">${idPct}</div>
+          <div class="stat-sub">${total > 0 ? `${match}/${total} bases` : "not run"}</div>
+          ${meanLp == null ? "" : `<div class="stat-sub">logP ${meanLp.toFixed(2)}</div>`}
+        </div>
       </div>
       <div>
         <div class="species-seq" data-role="output">— click "run all" to generate —</div>
         <div class="species-seq" data-role="ref" style="margin-top:4px"></div>
       </div>
     `;
     const outEl = wrap.querySelector('[data-role="output"]');

assets/js/sections/track.js CHANGED Viewed

@@ -25,7 +25,9 @@
   function setStatus(text, mode = "") {
     els.statusText.textContent = text;
-    els.status.className = "status" + (mode ? " " + mode : "");
   }
   function renderTrack(scoredLen) {

   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) {

assets/js/sections/vep.js CHANGED Viewed

@@ -20,7 +20,9 @@
   function setStatus(text, mode = "") {
     els.statusText.textContent = text;
-    els.status.className = "status" + (mode ? " " + mode : "");
   }
   function altWindow(v) {

   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) {

assets/js/tabs.js CHANGED Viewed

@@ -3,7 +3,10 @@
 // =========================================================================
 (function initTabs() {
   const TABS = ["demo", "model", "sandbox"];
-  const tabButtons = document.querySelectorAll("#tab-nav .tab");
   const panels = document.querySelectorAll(".tab-panel");
   function setTab(name, opts = {}) {
@@ -47,6 +50,19 @@
   });
   window.addEventListener("hashchange", applyHash);
   applyHash();
 })();
 loadConfig();

 // =========================================================================
 (function initTabs() {
   const TABS = ["demo", "model", "sandbox"];
+  // Wire BOTH the in-banner nav (#tab-nav) and the sticky-on-scroll copy
+  // (#tab-nav-sticky). Same data-tab values → setTab() syncs active state
+  // across both NodeLists in one shot, and click on either invokes setTab.
+  const tabButtons = document.querySelectorAll("#tab-nav .tab, #tab-nav-sticky .tab");
   const panels = document.querySelectorAll(".tab-panel");
   function setTab(name, opts = {}) {
   });
   window.addEventListener("hashchange", applyHash);
   applyHash();
+  // Sticky tab strip: when the in-banner #tab-nav scrolls out of view,
+  // toggle .is-tabs-stuck on <body> to slide the duplicate strip down from
+  // the top of the viewport. Uses the in-banner nav itself as the sentinel
+  // — no extra DOM element needed — and IntersectionObserver so the toggle
+  // costs nothing on scroll (no scroll listener / no layout reads).
+  const inBannerNav = document.getElementById("tab-nav");
+  if (inBannerNav && "IntersectionObserver" in window) {
+    const obs = new IntersectionObserver(([entry]) => {
+      document.body.classList.toggle("is-tabs-stuck", !entry.isIntersecting);
+    }, { threshold: 0 });
+    obs.observe(inBannerNav);
+  }
 })();
 loadConfig();

assets/styles/banner.css CHANGED Viewed

@@ -1,95 +1,456 @@
-/* banner.css — editorial Carbon hero banner.
-   Scoped to .carbon-banner. The SVG self-sizes from its viewBox aspect
-   ratio (drives the banner height); the animated DNA helix is rendered
-   on a Canvas overlay positioned to mirror the original helix bbox. */
-.banner-wrap {
-  /* Full-bleed banner: matches the page-wide layout adopted everywhere
-     else. The CARBON-0 SVG inside has a fixed aspect ratio so it
-     simply scales up; nothing breaks at 4K. */
-  max-width: none;
-  margin: 0;
-  padding: 24px 48px 0;
-}
-.carbon-banner {
   --paper: #f7f5ee;
   --ink: #1f1f1d;
   --muted: #8c918b;
-  --hairline: #b9bcb7;
   --green: #317f3f;
-  --red: #bc2e25;
-  display: block;
-  width: 100%;
   position: relative;
-  overflow: hidden;
   background:
-    radial-gradient(circle at 22% 32%, rgba(0, 0, 0, 0.035), transparent 1px),
-    radial-gradient(circle at 78% 64%, rgba(0, 0, 0, 0.03), transparent 1px),
     linear-gradient(90deg, rgba(49, 127, 63, 0.025), transparent 34%, transparent 66%, rgba(49, 127, 63, 0.025)),
     var(--paper);
   background-size: 7px 7px, 11px 11px, auto, auto;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
-/* SVG self-sizes from its viewBox aspect ratio — drives the banner height. */
-.carbon-banner .carbon-art { display: block; width: 100%; height: auto; }
-/* Canvas overlay for the animated DNA helix.
-   Positioned to mirror the original helix bbox in viewBox space:
-     x ∈ [858, 1998] of [40, 2010] → left 41.52%, width 57.87%
-     y ∈ [220, 416] of [50, 590]   → top  31.48%, height 36.30% */
-.carbon-banner .cb-helix-canvas {
   position: absolute;
-  left: 41.52%;
-  top: 31.48%;
-  width: 57.87%;
-  height: 36.30%;
   pointer-events: none;
-  display: block;
 }
-.carbon-banner .cb-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  letter-spacing: 0.24em;
   text-transform: uppercase;
 }
-.carbon-banner .cb-rule { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
-.carbon-banner .cb-label { fill: var(--ink); font-size: 17px; letter-spacing: 0.24em; }
-.carbon-banner .cb-label-green { fill: var(--green); }
-.carbon-banner .cb-label-red   { fill: var(--red); }
-.carbon-banner .cb-carbon-word {
-  fill: var(--ink);
-  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
-  font-size: 255px;
-  font-stretch: condensed;
-  font-weight: 900;
-  letter-spacing: -0.02em;
 }
-.carbon-banner .cb-paper-grain { mix-blend-mode: multiply; opacity: 0.62; pointer-events: none; }
-.carbon-banner .cb-helix-shadow { fill: #aeb5ad; opacity: 0.15; }
-.carbon-banner .cb-helix-body {
-  fill: #e4e5dc;
-  stroke: rgba(49, 127, 63, 0.14);
-  stroke-width: 0.8;
-}
-.carbon-banner .cb-helix-edge {
-  fill: none; stroke: #2d332e; stroke-width: 1.15;
-  stroke-linecap: round; stroke-linejoin: round;
-  vector-effect: non-scaling-stroke;
-}
-.carbon-banner .cb-helix-texture { fill: url(#cb-helixGrain); opacity: 0.46; }
-.carbon-banner .cb-base-pair {
-  fill: none; stroke: var(--green); stroke-width: 1.35;
-  stroke-linecap: round; vector-effect: non-scaling-stroke;
-}
-.carbon-banner .cb-base-letter-node {
-  will-change: transform, opacity;
-  transform-box: fill-box; transform-origin: 0 0;
-}
-.carbon-banner .cb-base-glyph {
-  fill: none; stroke: var(--green); stroke-width: 1.8;
-  stroke-linecap: square; stroke-linejoin: miter;
-  vector-effect: non-scaling-stroke;
-}
-.carbon-banner .cb-tiny-bars rect { fill: var(--green); }
 @media (max-width: 720px) {
-  .banner-wrap { padding: 12px 16px 0; }
 }

+/* banner.css — Carbon editorial hero.
+   Layout: 2-column grid (banner-left / banner-helix). Left column stacks
+   identity row → giant wordmark → tabs along the baseline. Right column hosts
+   a tall, slightly-tilted DNA helix rendered onto a <canvas>.
+   All ink colors live in vars so the helix JS can mirror them. */
+/* Brand tokens promoted to :root so anything outside .carbon-banner
+   (notably .sticky-nav, which is a sibling of the banner, not a child)
+   can reference them. Without this, var(--paper) etc. fall back to
+   nothing and the sticky strip ends up transparent. */
+:root {
   --paper: #f7f5ee;
   --ink: #1f1f1d;
   --muted: #8c918b;
+  --hairline: #d6d3c4;
   --green: #317f3f;
+}
+.carbon-banner {
   position: relative;
+  display: block;
   background:
+    radial-gradient(circle at 22% 32%, rgba(0, 0, 0, 0.065), transparent 1px),
+    radial-gradient(circle at 78% 64%, rgba(0, 0, 0, 0.06), transparent 1px),
     linear-gradient(90deg, rgba(49, 127, 63, 0.025), transparent 34%, transparent 66%, rgba(49, 127, 63, 0.025)),
     var(--paper);
   background-size: 7px 7px, 11px 11px, auto, auto;
+  /* Bottom hairline drawn via inset shadow rather than border-bottom so it
+     sits *inside* the banner's content area (1px from the bottom). With
+     overflow:hidden the tab's negative margin can't escape into a real
+     border, but an inset shadow lives at the same y as the tab's flush
+     bottom edge and can be covered by the tab's background — which is
+     how the active tab "opens onto" the panel below cleanly. */
+  box-shadow: inset 0 -1px 0 #cfcdbf;
+  overflow: hidden;                    /* clip the tilted helix on the right */
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
+.banner-inner {
+  position: relative;
+  max-width: 1200px;     /* matches the site-wide content cap */
+  margin: 0 auto;
+  padding: 20px 32px 0;
+  display: grid;
+  /* Right column dedicated to the DNA helix. */
+  grid-template-columns: minmax(0, 1fr) 460px;
+  gap: 28px;
+  min-height: 440px;     /* compact hero */
+}
+.banner-left {
+  display: grid;
+  grid-template-rows: auto 1fr auto;   /* identity / headline (flexes) / tabs */
+  gap: 18px;
+  min-width: 0;
+}
+/* --- Identity row: square model-card thumbnail + breadcrumb path --- */
+.banner-identity {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.logo-card {
+  width: 44px;
+  height: 44px;
+  border: 1px solid var(--hairline);
+  border-radius: 0;          /* sharp corners — feels more "stamp" than "chip" */
+  background: #fbfaf3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: var(--ink);
+  flex-shrink: 0;
+  position: relative;
+  transition: border-color 0.18s, background 0.18s;
+}
+.logo-card:hover { border-color: #1f1f1d; background: #fff; }
+.logo-glyph {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+.logo-label {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 7px;
+  font-weight: 400;
+  color: #8a8a85;
+  margin-top: 2px;
+  letter-spacing: 0.04em;
+}
+.banner-breadcrumb {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.2;
+}
+.banner-title {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink);
+}
+.banner-path {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #8a8a85;
+}
+/* --- Headline: oversized wordmark + tagline. Vertically centered in the
+       middle row of the grid so it sits dead-center between the identity row
+       at the top and the tabs at the bottom. --- */
+.banner-headline {
+  align-self: center;
+  min-width: 0;
+}
+.banner-wordmark {
+  margin: 0;
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: clamp(48px, 6.8vw, 96px);
+  font-weight: 800;
+  /* JetBrains Mono is monospace, so it reads wider than Arial Narrow at the
+     same size — tighten the tracking so the wordmark keeps its dense slab feel
+     and the green caret still hugs the right edge of the N. */
+  letter-spacing: -0.04em;
+  line-height: 0.92;
+  display: inline-flex;
+  align-items: stretch;
+  /* Lets the cursor pulse hug the right edge of the N without an extra wrap. */
+  gap: 0;
+}
+/* Left → right ink → green ramp, painted into the glyphs via background-clip.
+   The C anchors in ink black; each letter to the right picks up more of the
+   brand green so the wordmark visually "warms up" toward the blinking caret,
+   which is already solid --green. Mirrors the per-letter <tspan fill> ramp
+   the editorial mock uses (#1f1f1d → #2a5931 in 6 steps) but tuned to land on
+   the brighter brand green so the handoff to the cursor is seamless. */
+.banner-wordmark > span:first-child {
+  display: inline-block;
+  background-image: linear-gradient(
+    90deg,
+    var(--ink) 0%,        /* #1f1f1d — the C reads as pure ink */
+    #233625 35%,          /* slow desaturated step, barely shifts off black */
+    #2a5931 70%,          /* muted forest, matches the editorial wordmark */
+    var(--green) 100%     /* #317f3f — locks the N to the cursor's green */
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+/* Autoregressive cursor: stocky green caret pulsing just past the wordmark.
+   The caret is sized as a fraction of the wordmark font-size (em units) so
+   it scales 1:1 when the title resizes responsively. */
+.banner-cursor {
+  display: inline-block;
+  width: 0.20em;          /* wider — reads as a deliberate block caret */
+  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);
+  animation: cb-cursor-blink 1.05s steps(1) infinite;
+}
+@keyframes cb-cursor-blink {
+  0%, 55%   { opacity: 0.85; }
+  55.01%, 100% { opacity: 0;    }
+}
+@media (prefers-reduced-motion: reduce) {
+  .banner-cursor { animation: none; opacity: 0.5; }
+}
+.banner-subtitle {
+  margin: 8px 0 0;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 12.5px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: #5a5a55;
+}
+/* --- Model specs row: small mono datapoints sitting just under the subtitle.
+       Reads as a fiche-technique extension of the tagline — same family but
+       darker ink (concrete numbers vs editorial label) and tighter tracking
+       so the digits stay legible. The numerical value of each spec is wrapped
+       in a <strong> and inked in --green so the row gets a beat of accent
+       colour that echoes the wordmark caret and the active tab liseré, while
+       the unit/label stays neutral. Dots between items use --muted so they
+       feel like spec-sheet separators, not periods. --- */
+.banner-specs {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #5a5a55;
+}
+.banner-spec {
+  display: inline;
+}
+.banner-spec strong {
+  font-weight: 500;
+  color: var(--green);
+}
+.banner-spec + .banner-spec::before {
+  content: "·";
+  margin: 0 12px;
+  color: var(--muted);
+}
+/* --- Tabs anchored at the bottom of the banner. Their bottom edge sits flush
+       with the banner's inset hairline (see box-shadow on .carbon-banner) —
+       inactive tabs cover it with their darker paper, the active tab covers
+       it with --paper so the bottom dissolves into the panel below.
+       Active state is marked by a 2px green liseré on the top edge (an
+       ::before sitting over the hairline border), same green as the wordmark
+       caret and the takeaway rail. --- */
+.banner-tabs {
+  display: flex;
+  position: relative;
+  z-index: 1;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+}
+.banner-tabs .tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 150px;
+  padding: 18px 18px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  text-align: left;
+  /* One paper-shade darker than --paper so inactive tabs read as "filed
+     behind" the active one (which sits on top, in --paper). */
+  color: #6f6d65;
+  background: #ece9da;
+  border: 1px solid var(--hairline);
+  border-radius: 3px 3px 0 0;
+  cursor: pointer;
+  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
+}
+.banner-tabs .tab + .tab { margin-left: -1px; }
+/* Hover: no transform, no shadow — just a tonal lift so neighbouring tabs
+   feel reachable without anything moving. */
+.banner-tabs .tab:hover {
+  background: #f2efe2;
+  border-color: #c8c5b4;
+  color: var(--ink);
+  z-index: 2;
+}
+.banner-tabs .tab.active {
+  /* Match the panel background below so the bottom edge dissolves into
+     the page — the active tab reads as "open onto" the content. */
+  color: var(--ink);
+  background: var(--paper);
+  border-bottom-color: var(--paper);  /* covers the banner's inset hairline */
+  z-index: 3;
+}
+/* Green liseré along the top edge — sits over the 1px hairline border so
+   it reads as a deliberate marker rather than a thickened border. */
+.banner-tabs .tab.active::before {
+  content: "";
   position: absolute;
+  top: -1px; left: -1px; right: -1px;
+  height: 2px;
+  background: var(--green);
+}
+/* ============================================================================
+   Sticky section nav — STANDALONE styles, no inheritance from .banner-tabs.
+   The strip slides down from the top of the viewport once the user scrolls
+   past the in-banner tab row. Visibility is driven by .is-tabs-stuck on
+   <body>, toggled by an IntersectionObserver in tabs.js watching the
+   in-banner #tab-nav.
+   Design — restate the in-banner tab row verbatim (same colours, same
+   hairline, same active-tab "dissolve into the panel below" trick), then
+   add a small headroom on top so the cards visibly poke up from the strip
+   like file dividers — that's what keeps the "onglet" / folder-tab read
+   even though the strip itself is just a thin horizontal bar.
+============================================================================ */
+.sticky-nav {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 100;
+  /* Reproduce the .carbon-banner backing verbatim — same dotted grain
+     + symmetric green vertical stripes over the same --paper base — so
+     the sticky strip reads as a slice of the banner pinned to the
+     viewport top, not as a foreign UI bar. The inactive cards (#ece9da)
+     stay one shade darker than this paper so they still pop, exactly
+     like in the banner. */
+  background:
+    radial-gradient(circle at 22% 32%, rgba(0, 0, 0, 0.065), transparent 1px),
+    radial-gradient(circle at 78% 64%, rgba(0, 0, 0, 0.06), transparent 1px),
+    linear-gradient(90deg, rgba(49, 127, 63, 0.025), transparent 34%, transparent 66%, rgba(49, 127, 63, 0.025)),
+    var(--paper);
+  background-size: 7px 7px, 11px 11px, auto, auto;
+  /* Bottom hairline (inset shadow) same colour as the banner's
+     own bottom rule so the two lines visually align. No outer drop
+     shadow — the strip sits flush against the page paper. */
+  box-shadow: inset 0 -1px 0 #cfcdbf;
+  /* Tiny headroom above the tabs — the strip is taller than the tab cards
+     so the cards visibly stand up from it, keeping the "onglet" feel even
+     once it's detached from the banner. */
+  padding-top: 7px;
+  /* Hidden state: lifted above the viewport; transform animates cheaply
+     (compositor-only, no reflow). */
+  transform: translateY(-100%);
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
 }
+.is-tabs-stuck .sticky-nav {
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.sticky-nav__inner {
+  display: flex;
+  align-items: stretch;
+  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;
+}
+.sticky-nav .tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 150px;
+  padding: 18px 18px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.16em;
   text-transform: uppercase;
+  text-align: left;
+  /* Sharp corners on the sticky variant — the strip is a thin slab so
+     the cards read better as squared "file dividers" than as the rounded
+     index cards used in the larger in-banner row. */
+  color: #6f6d65;
+  background: #ece9da;
+  border: 1px solid #b8b5a6;
+  border-radius: 0;
+  cursor: pointer;
+  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
 }
+/* Overlap adjacent borders so the inter-tab divider is a single 1px line
+   (no double-hairline / no gap). */
+.sticky-nav .tab + .tab { margin-left: -1px; }
+.sticky-nav .tab:hover:not(.active) {
+  background: #f2efe2;
+  border-color: #9c9989;
+  color: var(--ink);
+  z-index: 2;
+}
+.sticky-nav .tab.active {
+  color: var(--ink);
+  background: var(--paper);
+  /* Drop the bottom border outright — combined with margin-bottom: -1px,
+     the active card bleeds one pixel beyond the strip's bottom hairline
+     and dissolves directly into the page paper underneath, same trick
+     the in-banner active tab uses against the panel below. */
+  border-bottom: none;
+  margin-bottom: -1px;
+  z-index: 3;
+}
+/* Green liseré along the TOP edge of the active card — sits over its own
+   1px top hairline, same green as the wordmark caret and the in-banner
+   active marker. */
+.sticky-nav .tab.active::before {
+  content: "";
+  position: absolute;
+  top: -1px; left: -1px; right: -1px;
+  height: 2px;
+  background: var(--green);
 }
+/* --- Helix column. The canvas is positioned absolutely so its natural ratio
+       isn't constrained by the grid track; we let it bleed slightly above and
+       below the banner for a "spilling out of the bench" effect. The CSS
+       rotate gives the technical tilt that the user asked for. --- */
+.banner-helix {
+  position: relative;
+  min-width: 0;
+  align-self: stretch;
+  /* No clip-path here: we want the canvas to bleed up to the banner's top
+     edge (= top of the page) so the helix isn't trapped below the 20px
+     padding-top of .banner-inner. Clipping at the banner boundary is
+     handled by .carbon-banner's overflow:hidden — which trims the rotated
+     corners cleanly at the banner's outer top/bottom/sides. */
+}
+/* The canvas overshoots the banner top/bottom so the helix appears to spill
+   beyond the editorial frame. .carbon-banner has overflow: hidden which clips
+   the overshoot cleanly. The tilt is a subtle clockwise lean — the "blueprint
+   on the lab bench" feel. */
+.cb-helix-canvas {
+  position: absolute;
+  top: -90px;
+  bottom: -90px;
+  right: -48px;
+  width: calc(100% + 48px);
+  height: calc(100% + 180px);
+  display: block;
+  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-origin: 60% 50%;
+}
+/* --- Responsive ---------------------------------------------------------
+   < 900px : collapse the grid so the helix moves below the headline. We
+   give it a fixed aspect so the canvas keeps its proportions. */
 @media (max-width: 720px) {
+  .banner-inner {
+    grid-template-columns: 1fr;
+    min-height: auto;
+    padding: 18px 18px 0;
+  }
+  .banner-helix {
+    height: 460px;
+    order: -1;        /* helix above headline on narrow viewports */
+  }
+  .cb-helix-canvas {
+    top: -40px; right: 0; bottom: -40px;
+    width: 100%; height: calc(100% + 80px);
+    transform: rotate(3deg);
+    transform-origin: center;
+  }
+  .banner-wordmark { font-size: clamp(56px, 16vw, 96px); }
+  /* Let the three tabs split the row evenly so they fit a narrow viewport
+     without horizontal scroll. */
+  .banner-tabs { width: 100%; }
+  .banner-tabs .tab { width: auto; flex: 1 1 0; padding: 14px 12px; }
 }

assets/styles/base.css CHANGED Viewed

@@ -8,26 +8,14 @@ body {
   font-family: "Inter", "Helvetica Neue", sans-serif;
   font-size: 13px; font-weight: 300; line-height: 1.7;
   color: #1f1f1d;
-  background:
-    radial-gradient(circle at 22% 32%, rgba(0, 0, 0, 0.035), transparent 1px),
-    radial-gradient(circle at 78% 64%, rgba(0, 0, 0, 0.03), transparent 1px),
-    linear-gradient(90deg, rgba(49, 127, 63, 0.025), transparent 34%, transparent 66%, rgba(49, 127, 63, 0.025)),
-    #f7f5ee;
-  background-size: 7px 7px, 11px 11px, auto, auto;
   padding: 0;
 }
-.container { max-width: 760px; margin: 0 auto; padding: 48px 32px 96px; }
-/* .container.wide is the wrapper for every Demo / Recipe section. We
-   used to cap it at 1080px which gave a centred reading column flanked
-   by big paper margins — fine when the demos sat under their narrative
-   in a single column, claustrophobic now that section--two-col puts
-   them side by side. Going full bleed lets the demos (UMAP scatter,
-   tree, 3D viewers) breathe; the 248px sticky narrative rail keeps the
-   line-length on prose under control regardless of viewport width. */
-.container.wide { max-width: none; padding: 48px 48px 96px; }
-@media (max-width: 720px) {
-  .container.wide { padding: 32px 16px 64px; }
-}
 @keyframes pulse { 50% { opacity: 0.3; } }

   font-family: "Inter", "Helvetica Neue", sans-serif;
   font-size: 13px; font-weight: 300; line-height: 1.7;
   color: #1f1f1d;
+  /* Plain paper background — the dotted texture + green vertical stripes
+     are reserved for the .carbon-banner hero so the editorial pattern
+     reads as a deliberate hero accent, not page-wide noise. */
+  background: #f7f5ee;
   padding: 0;
 }
+.container { max-width: 760px; margin: 0 auto; padding: 24px 32px 96px; }
+.container.wide { max-width: 1200px; }
 @keyframes pulse { 50% { opacity: 0.3; } }

assets/styles/controls.css CHANGED Viewed

@@ -47,7 +47,11 @@ button.action.primary:disabled { background: #888; border-color: #888; }
   font-size: 9px; color: #aaa; margin-bottom: 8px;
 }
-/* --- Status pill (idle / streaming / error) shared by demo toolbars --- */
 .status {
   font-family: "JetBrains Mono", monospace;
   font-size: 10px; color: #666;
@@ -55,6 +59,7 @@ button.action.primary:disabled { background: #888; border-color: #888; }
   display: inline-flex; align-items: center; gap: 6px;
   margin-left: 8px;
 }
 .status .dot {
   display: inline-block; width: 6px; height: 6px; border-radius: 50%;
   background: #888;

   font-size: 9px; color: #aaa; margin-bottom: 8px;
 }
+/* --- Status pill (streaming / error / done · X bp) shared by demo
+       toolbars. Hidden by default until a real state happens — there's
+       no "idle" UI; before the user has done anything, no pill at all.
+       setStatus() in each demo adds/removes .is-hidden based on whether
+       it has something meaningful to show. --- */
 .status {
   font-family: "JetBrains Mono", monospace;
   font-size: 10px; color: #666;
   display: inline-flex; align-items: center; gap: 6px;
   margin-left: 8px;
 }
+.status.is-hidden { display: none; }
 .status .dot {
   display: inline-block; width: 6px; height: 6px; border-radius: 50%;
   background: #888;

assets/styles/header.css CHANGED Viewed

@@ -1,66 +1,7 @@
-/* header.css — sticky page header (CARBON title + tagline + tab strip)
-   and the tab-panel show/hide toggles driven by .active. */
-header {
-  border-bottom: 1px solid #ccc;       /* separator line under the tab strip */
-  /* 48px lateral padding mirrors .container.wide / .banner-wrap so the
-     CARBON title, banner edge and every section's left edge all share
-     one vertical alignment line. No bottom padding — tabs sit on the
-     border line below. */
-  padding: 24px 48px 0;
-  margin-bottom: 0;
-  background:
-    radial-gradient(circle at 22% 32%, rgba(0, 0, 0, 0.035), transparent 1px),
-    radial-gradient(circle at 78% 64%, rgba(0, 0, 0, 0.03), transparent 1px),
-    linear-gradient(90deg, rgba(49, 127, 63, 0.025), transparent 34%, transparent 66%, rgba(49, 127, 63, 0.025)),
-    #f7f5ee;
-  background-size: 7px 7px, 11px 11px, auto, auto;
-  position: sticky; top: 0; z-index: 10;
-  /* Promote to its own compositing layer so the gradient pattern doesn't
-     force the entire viewport to repaint on every scroll event. */
-  will-change: transform;
-}
-.header-inner {
-  /* Match the full-bleed page layout: header strip stretches edge to
-     edge, with title pinned left and tab strip pushed flush right. */
-  max-width: none;
-  display: flex; justify-content: space-between; align-items: flex-end;
-  flex-wrap: wrap; gap: 16px 32px;
-}
-.header-title { padding-bottom: 14px; }
-h1 {
-  font-family: "JetBrains Mono", monospace;
-  font-size: 16px; font-weight: 400; letter-spacing: 2px;
-}
-.tagline {
-  font-family: "JetBrains Mono", monospace;
-  color: #888; font-size: 10px; font-weight: 300;
-  letter-spacing: 1px; margin-top: 4px; text-transform: uppercase;
-}
-nav#tab-nav {
-  display: flex;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
-  margin-bottom: -1px;       /* tabs overlap header's bottom border by 1px */
-  position: relative;
-  z-index: 1;
-}
-nav#tab-nav .tab {
-  width: 130px;
-  padding: 10px 14px;
-  font-family: inherit; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
-  color: #888; background: #f0f0f0;
-  border: 1px solid #ccc;
-  border-radius: 3px 3px 0 0;
-  cursor: pointer; transition: background 0.15s, color 0.15s;
-}
-nav#tab-nav .tab + .tab { margin-left: -1px; }   /* shared border between adjacent tabs */
-nav#tab-nav .tab:hover { color: #1f1f1d; background: #f6f6f6; }
-nav#tab-nav .tab.active {
-  color: #1f1f1d; background: #f7f5ee;
-  border-bottom-color: #f7f5ee;                  /* hides bottom border so tab merges into content */
-  z-index: 2;
-}
 /* --- Tab panels --- */
 .tab-panel { display: none; }

+/* header.css — tab-panel show/hide toggles driven by .active.
+   The CARBON title, tagline and tab strip used to live here; they're now
+   part of the editorial hero in banner.css. This file only retains the
+   class that gates panel visibility based on the active tab. */
 /* --- Tab panels --- */
 .tab-panel { display: none; }

assets/styles/layout.css CHANGED Viewed

@@ -4,21 +4,49 @@
    lede / takeaway typography, and the .section--two-col layout that
    parks narrative in a sticky rail next to the demo. */
-/* --- Tab lede (short narrative paragraph below the banner) --- */
 .tab-lede {
-  /* Full-bleed wrapper, padded to match .container.wide so the lede
-     paragraph aligns under the banner and section bodies. The
-     paragraph itself is still capped at 760px so prose stays
-     readable on a 32" monitor. */
-  max-width: none; margin: 4px 0 0;
-  padding: 14px 48px 0;
 }
 .tab-lede p {
-  color: #555; font-size: 14px; line-height: 1.7;
-  max-width: 760px; margin: 0;
-}
-@media (max-width: 720px) {
-  .tab-lede { padding: 12px 16px 0; }
 }
 /* --- Sections --- */
@@ -83,23 +111,22 @@ section:last-of-type { border-bottom: none; }
    The default layout stacks vertically: title → lede → demo → takeaway.
    For demo-heavy sections that means narrative and visualization never
    share visual space — by the time the visitor is mid-demo, the lede
-   is scrolled away, and the takeaway only appears after they've
-   finished. .section--two-col places the narrative (eyebrow + title +
-   lede + takeaway) in a sticky rail on the left and lets the demo
-   claim the bulk of the width on the right. Narration stays in view
-   while the visitor scrolls through the demo, turning the takeaway
-   into a live margin note rather than a post-mortem.
-   Layout math: container.wide is 1080px max with 32px padding =>
-   320px rail + 40px gap + demo claims the rest. The rail width was
-   bumped from 248 → 320px so the narrative breathes (~50-55 chars per
-   line of body text vs ~36 before) — at 248 every lede was wrapping
-   on awkward stop-words and the takeaway felt cramped. Below 900px we
-   collapse to single-column and unstick the rail. */
 .section--two-col {
   display: grid;
-  grid-template-columns: 320px 1fr;
-  column-gap: 40px;
   align-items: start;
   /* Land cleanly under the sticky header on anchor jumps (#folding). */
   scroll-margin-top: 104px;
@@ -117,37 +144,30 @@ section:last-of-type { border-bottom: none; }
   overflow-y: auto;
   scrollbar-width: thin;
 }
-/* The 640px cap on .lede / .takeaway exists to keep line length
-   readable in the single-column layout. Inside a 320px rail that cap
-   is moot — drop it so the text fills the rail. */
-.section--two-col .section-narrative .lede,
-.section--two-col .section-narrative .takeaway {
-  max-width: none;
-}
 .section--two-col .section-narrative .lede {
   font-size: 13px;
-  margin-bottom: 20px;
-}
-/* In 2-col mode the takeaway sits next to the demo as a margin note,
-   so the heavy green-bar treatment becomes too loud. Soften to a
-   calm hairline + neutral type. */
-.section--two-col .section-narrative .takeaway {
-  margin-top: 0;
-  padding: 14px 16px;
-  border-left: 2px solid #d8d5c8;
-  background: transparent;
-  font-size: 12px;
-  color: #555;
-}
-.section--two-col .section-narrative .takeaway strong {
-  color: #1f1f1d;
 }
-/* The demo claims its full grid track. The default 24px y-margin
-   was for the single-column rhythm and isn't needed here. */
 .section--two-col .demo {
-  margin: 0;
 }
-@media (max-width: 900px) {
   .section--two-col {
     grid-template-columns: 1fr;
     row-gap: 16px;
@@ -157,14 +177,4 @@ section:last-of-type { border-bottom: none; }
     max-height: none;
     overflow: visible;
   }
-  .section--two-col .section-narrative .takeaway {
-    /* Restore a touch of the editorial green band on mobile, since
-       it's no longer competing with a sticky sibling. */
-    margin-top: 8px;
-    border-left-color: #317f3f;
-    background: #f4f8f4;
-  }
-  .section--two-col .demo {
-    margin: 8px 0 0;
-  }
 }

    lede / takeaway typography, and the .section--two-col layout that
    parks narrative in a sticky rail next to the demo. */
+/* --- Tab lede ------------------------------------------------------------
+   Short narrative paragraph that opens each tab. Treated as an editorial
+   "lede" (the deck under a magazine headline): one design accent (a thin
+   green left-rail that echoes the green caret in the wordmark above) plus a
+   typographic step-up to make it clearly *the entry point* rather than just
+   the first body paragraph.
+   Structure:
+     .tab-lede           — outer wrapper, centers the block at page width
+       .tab-lede__rail   — green left-rail + padding + max-width on the text
+         .tab-lede__eyebrow — small mono "§ Intro" label up top
+         p                  — the lede text itself (large, light, dark ink)
+--------------------------------------------------------------------------- */
 .tab-lede {
+  max-width: 1200px; margin: 56px auto 0;
+  padding: 0 32px;
+}
+.tab-lede__rail {
+  /* The accent. 3px is just thick enough to read as a deliberate rail and
+     not a stray border; the green matches --green / the wordmark caret. */
+  border-left: 3px solid #317f3f;
+  padding: 4px 0 4px 22px;
+  max-width: 820px;
+}
+.tab-lede__eyebrow {
+  display: block;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: #317f3f;
+  margin-bottom: 12px;
 }
 .tab-lede p {
+  margin: 0;
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+  font-size: 19px;
+  font-weight: 300;
+  line-height: 1.5;
+  letter-spacing: -0.005em;
+  color: #2d2d2a;
+  max-width: 760px;
 }
 /* --- Sections --- */
    The default layout stacks vertically: title → lede → demo → takeaway.
    For demo-heavy sections that means narrative and visualization never
    share visual space — by the time the visitor is mid-demo, the lede
+   is scrolled away. .section--two-col places the eyebrow + title +
+   lede in a sticky rail on the left and stacks the demo + takeaway
+   in the right column. Narration stays in view while the visitor
+   scrolls through the demo; the takeaway then appears right under
+   the demo, on the right column, as a "now that you've played with
+   it…" debrief — same flow on both the Demo and Model tabs.
+   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. */
 .section--two-col {
   display: grid;
+  grid-template-columns: 280px 1fr;
+  column-gap: 28px;
   align-items: start;
   /* Land cleanly under the sticky header on anchor jumps (#folding). */
   scroll-margin-top: 104px;
   overflow-y: auto;
   scrollbar-width: thin;
 }
+/* The 640px cap on .lede exists to keep line length readable in the
+   single-column layout. Inside a 280px rail that cap is moot — drop
+   it so the text fills the rail. */
 .section--two-col .section-narrative .lede {
+  max-width: none;
   font-size: 13px;
+  margin-bottom: 0;
+}
+/* Right column: demo stacked over takeaway, flex-column with a clear
+   visual beat between them. */
+.section--two-col .section-body {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-width: 0;          /* let inner svg/canvas shrink instead of overflowing */
 }
 .section--two-col .demo {
+  margin: 0;             /* default 24px y-margin is for single-column rhythm */
 }
+.section--two-col .takeaway {
+  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) {
   .section--two-col {
     grid-template-columns: 1fr;
     row-gap: 16px;
     max-height: none;
     overflow: visible;
   }
 }

assets/styles/section-species.css CHANGED Viewed

@@ -1,10 +1,10 @@
 /* section-species.css — §4 Same gene across species. Each species gets
-   a row with three columns: meta (kingdom-coloured name), aligned
-   sequence block, and identity stats. */
 .species-row {
   display: grid;
-  grid-template-columns: 140px 1fr 110px;
   gap: 16px;
   align-items: start;
   padding: 14px 0;
@@ -23,8 +23,9 @@
 }
 .species-sub { color: #888; font-size: 10px; margin-top: 4px; padding-left: 12px; }
 .species-stats {
-  text-align: right; font-family: "JetBrains Mono", monospace;
   font-size: 11px; color: #666;
 }
 .species-stats .stat-id { font-size: 16px; color: #1f1f1d; font-weight: 500; font-variant-numeric: tabular-nums; }
 .species-stats .stat-sub { font-size: 10px; color: #999; margin-top: 2px; }

 /* section-species.css — §4 Same gene across species. Each species gets
+   a row with two columns: meta (kingdom-coloured name + identity stats
+   stacked underneath) and the aligned sequence block. */
 .species-row {
   display: grid;
+  grid-template-columns: 140px 1fr;
   gap: 16px;
   align-items: start;
   padding: 14px 0;
 }
 .species-sub { color: #888; font-size: 10px; margin-top: 4px; padding-left: 12px; }
 .species-stats {
+  text-align: left; font-family: "JetBrains Mono", monospace;
   font-size: 11px; color: #666;
+  padding-left: 12px; margin-top: 10px;
 }
 .species-stats .stat-id { font-size: 16px; color: #1f1f1d; font-weight: 500; font-variant-numeric: tabular-nums; }
 .species-stats .stat-sub { font-size: 10px; color: #999; margin-top: 2px; }

demo.html CHANGED Viewed

@@ -6,7 +6,7 @@
 <title>Carbon · what the model learned</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&family=Inter:wght@300;400;500;600&display=swap">
 <!-- 3Dmol.js: lightweight WebGL molecular viewer, used by §5 (folding) to
      render ESMFold-predicted protein cartoons. Pinned for reproducibility. -->
 <script defer src="https://cdn.jsdelivr.net/npm/3dmol@2.5.1/build/3Dmol-min.js"></script>
@@ -32,88 +32,78 @@
 </head>
 <body>
-<header>
-  <div class="header-inner">
-    <div class="header-title">
-      <h1>CARBON</h1>
-      <div class="tagline" id="meta">3B · hybrid-loss · 1T · loading…</div>
     </div>
-    <nav id="tab-nav">
       <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>
     </nav>
   </div>
 </header>
-<div class="banner-wrap">
-<section class="carbon-banner" aria-label="Carbon DNA model banner">
-  <svg class="carbon-art" viewBox="40 50 1970 540" role="img" aria-labelledby="cb-carbonTitle cb-carbonDesc">
-    <title id="cb-carbonTitle">Carbon genomic language model banner</title>
-    <desc id="cb-carbonDesc">A technical editorial banner with the CARBON-0 model name and an adjacent animated DNA strand.</desc>
-    <defs>
-      <pattern id="cb-paperDot" width="12" height="12" patternUnits="userSpaceOnUse">
-        <circle cx="2" cy="2" r="0.8" fill="#1f1f1d" opacity="0.045" />
-        <circle cx="9" cy="8" r="0.55" fill="#317f3f" opacity="0.035" />
-      </pattern>
-      <pattern id="cb-helixGrain" width="9" height="9" patternUnits="userSpaceOnUse">
-        <rect width="9" height="9" fill="transparent" />
-        <circle cx="1.4" cy="1.7" r="0.7" fill="#263128" opacity="0.34" />
-        <circle cx="6.2" cy="5.5" r="0.45" fill="#263128" opacity="0.24" />
-        <line x1="3" y1="8" x2="7" y2="8" stroke="#263128" stroke-width="0.45" opacity="0.18" />
-      </pattern>
-    </defs>
-    <rect class="cb-paper-grain" x="25" y="25" width="1998" height="570" fill="url(#cb-paperDot)" />
-    <g class="cb-mono">
-      <text class="cb-label" x="63" y="76">CARBON-0</text>
-      <text class="cb-label cb-label-green" x="240" y="76">3B Autoregressive Genomic Foundation Model</text>
-      <text class="cb-label" x="1162" y="76">49,152 BP Context</text>
-      <circle cx="1456" cy="70" r="4" fill="#317f3f" />
-      <text class="cb-label" x="1490" y="76">6-Mer Tokenizer</text>
-      <circle cx="1760" cy="70" r="4" fill="#317f3f" />
-      <text class="cb-label" x="1795" y="76">1T Train Tokens</text>
-    </g>
-    <line class="cb-rule" x1="40" y1="110" x2="2010" y2="110" />
-    <g class="cb-mono">
-      <text class="cb-carbon-word" x="60" y="405" textLength="795" lengthAdjust="spacingAndGlyphs">CARBON-0</text>
-    </g>
-    <!-- Helix is now drawn on a <canvas> overlay positioned via CSS — much
-         cheaper than mutating ~960 SVG paths every frame. See .cb-helix-canvas
-         and initCarbonBanner() below. -->
-    <line class="cb-rule" x1="40" y1="545" x2="2010" y2="545" />
-    <g class="cb-mono">
-      <text class="cb-label" x="64" y="578">Carbon Labs</text>
-      <line x1="240" y1="570" x2="266" y2="570" stroke="#317f3f" stroke-width="2" />
-      <text class="cb-label" x="294" y="578">Building Foundational Models For Genomic Sequences</text>
-      <text class="cb-label" x="1378" y="578">CLB-2026-05-11</text>
-      <text class="cb-label" x="1638" y="578">DNA-LM-49K</text>
-      <text class="cb-label" x="1784" y="578">CARBON-0 v0</text>
-      <g class="cb-tiny-bars" transform="translate(1956 562)">
-        <rect x="0" y="0" width="3" height="20" />
-        <rect x="8" y="0" width="3" height="20" />
-        <rect x="16" y="0" width="3" height="20" />
-        <rect x="24" y="0" width="3" height="20" />
-        <rect x="32" y="0" width="3" height="20" />
-        <rect x="40" y="0" width="3" height="20" />
-      </g>
-    </g>
-  </svg>
-  <canvas class="cb-helix-canvas" aria-hidden="true"></canvas>
-</section>
-</div>
 <div class="tab-panel active" id="panel-demo" data-tab="demo">
 <div class="tab-lede">
-  <p>We didn't tell Carbon what an exon is. We didn't tell it which mutations are pathogenic. We didn't tell it how genes differ between species. Four ways to see what it picked up anyway.</p>
 </div>
 <div class="container wide">
@@ -123,34 +113,29 @@
 <!-- ============================================================ -->
 <section id="completion" class="section--two-col">
   <div class="section-narrative">
-    <div class="section-num">§1 · Autocomplete</div>
-    <div class="section-title">Autocomplete for the genome</div>
-    <p class="lede">
-      Like GPT can complete the start of a sentence, Carbon completes the start of a gene.
-      Pick a famous one — we feed the first <code>200 bp</code>, the model streams a continuation,
-      and we overlay the <em>real</em> exon/intron annotations on top so you can see where the model
-      decided structure should change.
-    </p>
-    <div class="takeaway">
-      <strong>What to look for</strong>
-      Try dragging the prompt window so the green generated region lands on an exon (the dark
-      green blocks) and see how many green underlines you get — exons are under selection
-      pressure, so getting them right takes real biological understanding, not just DNA
-      statistics. Then try the same length over an intron and compare. Boundaries between
-      high- and low-confidence stretches in Carbon's output also tend to fall near real
-      exon/intron edges, even though the model has never seen a single annotation.
-    </div>
   </div>
   <div class="demo" id="demo1">
     <div class="demo-toolbar">
       <span>gene</span>
       <span id="d1-pills" class="pills"></span>
       <span class="spacer"></span>
       <button id="d1-go" class="action primary">▶ generate</button>
       <button id="d1-stop" class="action" disabled>stop</button>
-      <span class="status" id="d1-status"><span class="dot"></span><span>idle</span></span>
     </div>
     <div class="gene-info" id="d1-info">loading genes…</div>
@@ -210,6 +195,17 @@
       <div class="stat-pair"><span class="stat-pair-label">perplexity</span><span class="stat-pair-val muted" id="d1-ppl">—</span></div>
     </div>
   </div>
 </section>
 <!-- ============================================================ -->
@@ -217,37 +213,26 @@
 <!-- ============================================================ -->
 <section id="vep" class="section--two-col">
   <div class="section-narrative">
-    <div class="section-num">§2 · Variant effect</div>
-    <div class="section-title">It knows what's broken</div>
-    <p class="lede">
-      For a real ClinVar variant, the alternate allele lives at one specific base in the genome.
-      We score the exact same 60-bp window two ways — once with the reference base, once with the alt —
-      and compare the model's likelihood. The strongest loss-of-function variants stand out clearly;
-      others show smaller signals. Raw likelihood is a partial proxy for pathogenicity, not a perfect one.
-    </p>
-    <div class="takeaway">
-      <strong>What to look for</strong>
-      Read each row two ways: the <em>dot color</em> is what ClinVar says
-      (red = pathogenic, orange = risk, green = benign); the <em>bar color and direction</em> is
-      what Carbon says (red bar pointing left = surprised by the alt; charcoal bar pointing right
-      = alt looks fine). When the dot and bar agree on "left of zero" — like HBB c.20A>T sickle
-      cell — Carbon has independently picked up the pathogenicity signal. When they disagree, the
-      likely culprit is allele frequency: alt alleles common enough in human populations look
-      perfectly normal to a model trained on natural sequence. For sharper variant effect
-      prediction, Carbon can be fine-tuned (see the
-      <a href="https://huggingface.co/spaces/hf-carbon/dna-vep-explainer" style="color:#317f3f">dna-vep-explainer</a>).
-    </div>
   </div>
   <div class="demo" id="demo2">
     <div class="demo-toolbar">
       <span>variant</span>
       <span id="d2-pills" class="pills"></span>
       <span class="spacer"></span>
       <button id="d2-go" class="action primary">▶ score</button>
       <button id="d2-all" class="action">score all</button>
-      <span class="status" id="d2-status"><span class="dot"></span><span>idle</span></span>
     </div>
     <div class="gene-info" id="d2-info">loading variants…</div>
@@ -265,6 +250,20 @@
       <span style="color:#888">dot = ClinVar label · bar = model signal</span>
     </div>
   </div>
 </section>
 <!-- ============================================================ -->
@@ -272,30 +271,25 @@
 <!-- ============================================================ -->
 <section id="track" class="section--two-col">
   <div class="section-narrative">
-    <div class="section-num">§3 · Structure</div>
-    <div class="section-title">It sees structure without being told</div>
-    <p class="lede">
-      For each token (a 6-base chunk), Carbon emits a log-probability under the surrounding context.
-      Plot that along a real gene and the curve dips and rises. We overlay the exon/intron map on top —
-      confidence rises in coding regions and falls in repetitive or unconstrained stretches, even
-      though the model never saw a single exon label.
-    </p>
-    <div class="takeaway">
-      <strong>What to look for</strong>
-      Exons, especially the protein-coding portions, tend to score noticeably higher than introns —
-      because exons are evolutionarily conserved and full of constrained patterns the model has learned
-      to predict. The Δ tells you how strongly Carbon "noticed" the difference for this gene.
-    </div>
   </div>
   <div class="demo" id="demo3">
     <div class="demo-toolbar">
       <span>gene</span>
       <span id="d3-pills" class="pills"></span>
       <span class="spacer"></span>
       <button id="d3-go" class="action primary">▶ score</button>
-      <span class="status" id="d3-status"><span class="dot"></span><span>idle</span></span>
     </div>
     <div class="gene-info" id="d3-info">loading genes…</div>
@@ -315,6 +309,14 @@
       <div class="stat-pair"><span class="stat-pair-label">mean (overall)</span><span class="stat-pair-val muted" id="d3-mean">—</span></div>
     </div>
   </div>
 </section>
 <!-- ============================================================ -->
@@ -322,22 +324,16 @@
 <!-- ============================================================ -->
 <section id="species" class="section--two-col">
   <div class="section-narrative">
-    <div class="section-num">§4 · Species</div>
-    <div class="section-title">It knows who's who</div>
-    <p class="lede">
-      Feed the first few bases of a homologous gene from human, mouse, and zebrafish.
-      Each continuation diverges along its species' lineage — and matches that species' real
-      reference sequence more closely than the others'.
-    </p>
-    <div class="takeaway">
-      <strong>What to look for</strong>
-      Each species' generation should match its own reference better than another species' would.
-      Identity drops dramatically on mouse/zebrafish/chicken when the prompt is from a different
-      lineage — the model conditions on species context from just a few bases.
-    </div>
   </div>
   <div class="demo" id="demo4">
     <div class="demo-toolbar">
       <span>gene</span>
@@ -355,7 +351,7 @@
         <button class="pill" data-gen="400">400</button>
       </span>
       <button id="d4-go" class="action primary">▶ run all</button>
-      <span class="status" id="d4-status"><span class="dot"></span><span>idle</span></span>
     </div>
     <div class="gene-info" id="d4-info">loading species…</div>
@@ -368,6 +364,14 @@
       <span style="color:#b00020">mismatches in reference highlighted</span>
     </div>
   </div>
 </section>
 <!-- ============================================================ -->
@@ -375,23 +379,17 @@
 <!-- ============================================================ -->
 <section id="folding" class="section--two-col">
   <div class="section-narrative">
-    <div class="section-num">§5 · Folding</div>
-    <div class="section-title">From sequence to structure</div>
-    <p class="lede">
-      When Carbon completes an open reading frame, the resulting bases translate to a protein —
-      a protein that folds. We feed the resulting ORF into ESMFold and render the
-      3D structure inline, alongside the same protein folded from the reference sequence so you
-      can see whether Carbon's continuation produced something biologically plausible.
-    </p>
-    <div class="takeaway">
-      <strong>What to look for</strong>
-      A high <em>pLDDT</em> means ESMFold is confident the predicted structure
-      is correct for that residue. When Carbon's completion diverges at the
-      base level but still produces a sequence whose 3D fold matches the
-      reference, the model has captured something deeper than memorization.
-    </div>
   </div>
   <div class="demo" id="demoFold">
     <!-- Cached-only UI: live fold UI (prefix selector, ▶ fold button,
          status indicator) is intentionally not rendered. The pipeline
@@ -461,6 +459,15 @@
       <div class="stat-pair"><span class="stat-pair-label">identity (1D)</span><span class="stat-pair-val muted" id="dfold-id">—</span></div>
     </div>
   </div>
 </section>
 <!-- ============================================================ -->
@@ -468,28 +475,18 @@
 <!-- ============================================================ -->
 <section id="umap" class="section--two-col">
   <div class="section-narrative">
-    <div class="section-num">§6 · Embedding space</div>
-    <div class="section-title">The genome, organized</div>
-    <p class="lede">
-      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.
-    </p>
-    <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 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>
   </div>
   <div class="demo" id="demoUmap">
     <div class="demo-toolbar">
       <span>color by</span>
@@ -522,6 +519,18 @@
       <div class="stat-pair"><span class="stat-pair-label">render</span><span class="stat-pair-val muted" id="dumap-fps">—</span></div>
     </div>
   </div>
 </section>
 <!-- ============================================================ -->
@@ -529,30 +538,19 @@
 <!-- ============================================================ -->
 <section id="speciesTree" class="section--two-col">
   <div class="section-narrative">
-    <div class="section-num">§7 · Species tree</div>
-    <div class="section-title">Did Carbon learn the tree of life on its own?</div>
-    <p class="lede">
-      Take the same 571,810 sequences from §6, average each species' embeddings into a
-      single 3072-dim vector, then cluster those 27 centroids with hierarchical clustering.
-      Carbon was never told what an "organism" is. Yet the resulting tree groups vertebrates
-      together, separates bacteria from fungi, and pairs sister clades — primates with
-      primates, rodents with rodents, monocots with monocots — without ever being shown a
-      single taxonomic label.
-    </p>
-    <div class="takeaway">
-      <strong>What to look for</strong>
-      Toggle <em>kingdom-level</em> vs <em>sister-level</em>: at the kingdom scale the
-      embedding is nearly perfect — vertebrates cluster with vertebrates, bacteria with
-      bacteria. At the sister scale (primate-with-primate, etc.) it's lower because
-      distances inside a kingdom are extremely tight (~0.0001) and the strict nearest
-      neighbour bounces around — the model nails the broad strokes but blurs the fine
-      branches at this resolution. Switch <em>linkage</em> from Ward to UPGMA to see how
-      much of the structure is method-independent. <em>Tree built from species centroids
-      of mean-pooled Carbon-3B embeddings.</em>
-    </div>
   </div>
   <div class="demo" id="demoSpeciesTree">
     <div class="tree-toolbar">
       <span>linkage</span>
@@ -605,6 +603,19 @@
       <div class="stat-pair"><span class="stat-pair-label">distance</span><span class="stat-pair-val">cosine</span></div>
     </div>
   </div>
 </section>
 </div>
@@ -614,7 +625,10 @@
 <div class="tab-panel" id="panel-model" data-tab="model">
 <div class="tab-lede">
-  <p>Three places where the recipe needed adjustment for biology: the way DNA gets tokenized, how the loss handles near-miss tokens, and which sequence ends up in the corpus. Plus a deliberately vanilla architecture so any improvement can be attributed to the recipe rather than custom blocks.</p>
 </div>
 <div class="container wide">
@@ -622,7 +636,8 @@
 <!-- ============================================================ -->
 <!-- §7 — TOKENIZER                                                -->
 <!-- ============================================================ -->
-<section id="tokenizer">
   <div class="section-num">§1 · Tokenizer</div>
   <div class="section-title">Read DNA in 6-base chunks</div>
   <p class="lede">
@@ -633,41 +648,45 @@
     BPE was a tempting middle ground, but its variable-length tokens collide badly with
     autoregressive next-token prediction — DNA doesn't have stable "words."
   </p>
   <div class="demo" id="demo7">
     <div class="demo-toolbar">
       <span>type DNA</span>
       <input id="d7-input" type="text" spellcheck="false" autocapitalize="characters"
              value="ATGGCCAAGCTGACCAGCGAGCTGCTGGCC"
-             style="font-family:'JetBrains Mono',monospace;font-size:12px;padding:6px 10px;border:1px solid #ccc;border-radius:3px;flex:1 1 280px;letter-spacing:1px;text-transform:uppercase">
-      <span class="spacer"></span>
       <span class="status"><span class="dot" style="background:#317f3f"></span><span id="d7-len">30 bp</span></span>
     </div>
-    <div id="d7-cols" style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px">
       <div>
         <div class="seq-label" style="margin-top:0">1-mer  ·  one token per base</div>
         <div class="seq-block" id="d7-1mer" style="min-height:60px"></div>
-        <div class="stat-row" style="margin-top:8px;padding-top:8px">
-          <div class="stat-pair"><span class="stat-pair-label">tokens</span><span class="stat-pair-val" id="d7-1mer-tok">—</span></div>
-          <div class="stat-pair"><span class="stat-pair-label">attention cost</span><span class="stat-pair-val" id="d7-1mer-att">—</span></div>
-          <div class="stat-pair"><span class="stat-pair-label">vocab</span><span class="stat-pair-val">4</span></div>
-        </div>
       </div>
       <div>
         <div class="seq-label" style="margin-top:0">6-mer (carbon)  ·  one token per 6 bases</div>
         <div class="seq-block" id="d7-6mer" style="min-height:60px"></div>
-        <div class="stat-row" style="margin-top:8px;padding-top:8px">
-          <div class="stat-pair"><span class="stat-pair-label">tokens</span><span class="stat-pair-val" id="d7-6mer-tok">—</span></div>
-          <div class="stat-pair"><span class="stat-pair-label">attention cost</span><span class="stat-pair-val" id="d7-6mer-att">—</span></div>
-          <div class="stat-pair"><span class="stat-pair-label">vocab</span><span class="stat-pair-val">4,096</span></div>
-        </div>
       </div>
     </div>
     <svg id="d7-bars" preserveAspectRatio="xMinYMin meet" style="display:block;width:100%;background:#fff;border:1px solid #eee;margin-top:14px"></svg>
-    <div class="track-axis-label">
       <span>same DNA span</span>
       <span style="color:#317f3f">▼ shorter token sequence = cheaper attention</span>
       <span id="d7-speedup" style="color:#317f3f;font-weight:500">36× cheaper</span>
@@ -682,12 +701,14 @@
     a valid <em>prefix</em> of the target token. 6-mer is a deterministic, neutral compression
     that avoids this trap.
   </div>
 </section>
 <!-- ============================================================ -->
 <!-- §8 — TRAINING OBJECTIVE (CE → FNS)                           -->
 <!-- ============================================================ -->
-<section id="loss">
   <div class="section-num">§2 · Training objective</div>
   <div class="section-title">Partial credit for near-misses</div>
   <p class="lede">
@@ -698,7 +719,9 @@
     six parallel 4-way nucleotide marginals derived from the same logits. Near-miss tokens
     get partial credit proportional to how many bases they got right.
   </p>
   <div class="demo" id="demo8">
     <div class="demo-toolbar">
       <span>target 6-mer</span>
@@ -729,12 +752,14 @@
     (the "loss staircase," and BF16 inference starts diverging from FP32), FNS smooths the
     objective and restores numerical robustness without giving up the joint prior CE built.
   </div>
 </section>
 <!-- ============================================================ -->
 <!-- §9 — DATA                                                     -->
 <!-- ============================================================ -->
-<section id="data">
   <div class="section-num">§3 · Data</div>
   <div class="section-title">Genomes are mostly background</div>
   <p class="lede">
@@ -745,7 +770,9 @@
     and bacterial sequence — so the model spends more of its gradient updates on biologically
     meaningful sequence.
   </p>
   <div class="demo" id="demo9">
     <div style="display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:center;margin-bottom:18px">
       <div>
@@ -757,7 +784,7 @@
     <div class="seq-label">signal-to-noise · raw genome vs annotation-aware curation</div>
     <svg id="d9-snr" viewBox="0 0 1000 100" preserveAspectRatio="none" style="display:block;width:100%;height:90px;background:#fff;border:1px solid #eee"></svg>
-    <div class="track-axis-label">
       <span><span class="legend-swatch" style="background:#317f3f"></span>functional / annotated</span>
       <span><span class="legend-swatch" style="background:#ddd"></span>background</span>
       <span style="color:#888">curating raises the density of biological signal in the gradient</span>
@@ -773,12 +800,14 @@
     discarding 95% of background, the effective informative fraction jumps from 5% to ≈ 46%.
     Same training compute, ~9× more learning signal per gradient step.
   </div>
 </section>
 <!-- ============================================================ -->
 <!-- §10 — ARCHITECTURE                                            -->
 <!-- ============================================================ -->
-<section id="architecture">
   <div class="section-num">§4 · Architecture</div>
   <div class="section-title">A deliberately vanilla transformer</div>
   <p class="lede">
@@ -787,7 +816,9 @@
     that any improvement Carbon shows on genomic tasks is attributable to the data, the
     tokenizer, and the loss — not to a custom block or a hand-crafted attention variant.
   </p>
   <div class="demo" id="demo10">
     <table id="d10-arch" style="width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:12px"></table>
     <div style="margin-top:14px;font-size:11px;color:#666;font-family:'JetBrains Mono',monospace">
@@ -802,6 +833,7 @@
     come from changes that <em>aren't</em> the architecture. That's where the room for genomic
     foundation models still is.
   </div>
 </section>
 </div>
@@ -814,10 +846,13 @@
 <div class="tab-panel" id="panel-sandbox" data-tab="sandbox">
 <div class="tab-lede">
-  <p>Open-ended DNA continuation. Type any prefix in {A, C, G, T}, watch the model continue token by token. Toggle base-coloring or per-token logprob coloring to see where Carbon is confident and where it's guessing. Track GC content, perplexity, and throughput live.</p>
 </div>
-<div class="container" style="max-width:1280px">
 <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>

 <title>Carbon · what the model learned</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">
 <!-- 3Dmol.js: lightweight WebGL molecular viewer, used by §5 (folding) to
      render ESMFold-predicted protein cartoons. Pinned for reproducibility. -->
 <script defer src="https://cdn.jsdelivr.net/npm/3dmol@2.5.1/build/3Dmol-min.js"></script>
 </head>
 <body>
+<!-- Carbon banner. Combines the model-card identity (logo + path + wordmark +
+     subtitle) with the section navigation (Demo / Model / Sandbox tabs) into a
+     single editorial hero. The DNA helix is rendered on a <canvas> positioned
+     to the right, rotated for a slight technical tilt; see banner.js. -->
+<header class="carbon-banner" aria-label="Carbon DNA model banner">
+  <div class="banner-inner">
+    <div class="banner-left">
+      <!-- Top row: HF-style model-card identity. The square logo card mirrors
+           the thumbnail you'd find on a Hugging Face model page; the title +
+           path beside it functions as a breadcrumb / model identifier. -->
+      <div class="banner-identity">
+        <a class="logo-card" href="#" aria-label="Carbon — go to top">
+          <span class="logo-glyph" aria-hidden="true">C</span>
+          <span class="logo-label">carbon</span>
+        </a>
+        <div class="banner-breadcrumb">
+          <div class="banner-title">CARBON</div>
+          <div class="banner-path" id="meta">huggingfacebio/carbon-3b</div>
     </div>
+      </div>
+      <!-- Headline: oversized wordmark + tagline. The blinking caret after the
+           "N" is the visual echo of the §1 demo (model streaming a continuation
+           token by token). -->
+      <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>
+      <!-- Tabs anchored to the bottom of the banner; they sit on the hairline
+           that separates the banner from the page content (margin-bottom: -1px). -->
+      <nav id="tab-nav" class="banner-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>
     </nav>
   </div>
+    <!-- Big vertical DNA helix on the right. The canvas paints upright; CSS
+         applies a small clockwise tilt for a "blueprint-on-the-bench" feel. -->
+    <div class="banner-helix" aria-hidden="true">
+      <canvas class="cb-helix-canvas"></canvas>
+    </div>
+  </div>
 </header>
+<!-- Sticky tab strip: a duplicate of the in-banner nav that slides down from
+     the top once the user has scrolled past the original tabs. Kept in sync
+     with the in-banner set via tabs.js (both NodeLists are wired to the same
+     setTab() handler). The body gets .is-tabs-stuck toggled by an
+     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>
+  </div>
+</nav>
 <div class="tab-panel active" id="panel-demo" data-tab="demo">
 <div class="tab-lede">
+  <div class="tab-lede__rail">
+    <span class="tab-lede__eyebrow">Intro</span>
+    <p>We didn't tell Carbon what an exon is. We didn't tell it which mutations are pathogenic. We didn't tell it how genes differ between species. Six ways to see what it picked up anyway.</p>
+  </div>
 </div>
 <div class="container wide">
 <!-- ============================================================ -->
 <section id="completion" class="section--two-col">
   <div class="section-narrative">
+  <div class="section-num">§1 · Autocomplete</div>
+  <div class="section-title">Autocomplete for the genome</div>
+  <p class="lede">
+    Like GPT can complete the start of a sentence, Carbon completes the start of a gene.
+    Pick a famous one — we feed the first <code>200 bp</code>, the model streams a continuation,
+    and we overlay the <em>real</em> exon/intron annotations on top so you can see where the model
+    decided structure should change.
+  </p>
   </div>
+  <div class="section-body">
   <div class="demo" id="demo1">
     <div class="demo-toolbar">
       <span>gene</span>
       <span id="d1-pills" class="pills"></span>
       <span class="spacer"></span>
+      <!-- Status sits BEFORE the buttons so that when its text width changes
+           (idle → generating… → done · 432 bp), the slack is absorbed by the
+           flex spacer to its left rather than shifting the buttons leftward
+           on every state transition. Buttons stay pinned to the right edge. -->
+      <span class="status is-hidden" id="d1-status"><span class="dot"></span><span></span></span>
       <button id="d1-go" class="action primary">▶ generate</button>
       <button id="d1-stop" class="action" disabled>stop</button>
     </div>
     <div class="gene-info" id="d1-info">loading genes…</div>
       <div class="stat-pair"><span class="stat-pair-label">perplexity</span><span class="stat-pair-val muted" id="d1-ppl">—</span></div>
     </div>
   </div>
+  <div class="takeaway">
+    <strong>What to look for</strong>
+    Try dragging the prompt window so the green generated region lands on an exon (the dark
+    green blocks) and see how many green underlines you get — exons are under selection
+    pressure, so getting them right takes real biological understanding, not just DNA
+    statistics. Then try the same length over an intron and compare. Boundaries between
+    high- and low-confidence stretches in Carbon's output also tend to fall near real
+    exon/intron edges, even though the model has never seen a single annotation.
+  </div>
+  </div>
 </section>
 <!-- ============================================================ -->
 <!-- ============================================================ -->
 <section id="vep" class="section--two-col">
   <div class="section-narrative">
+  <div class="section-num">§2 · Variant effect</div>
+  <div class="section-title">It knows what's broken</div>
+  <p class="lede">
+    For a real ClinVar variant, the alternate allele lives at one specific base in the genome.
+    We score the exact same 60-bp window two ways — once with the reference base, once with the alt —
+    and compare the model's likelihood. The strongest loss-of-function variants stand out clearly;
+    others show smaller signals. Raw likelihood is a partial proxy for pathogenicity, not a perfect one.
+  </p>
   </div>
+  <div class="section-body">
   <div class="demo" id="demo2">
     <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>
       <span style="color:#888">dot = ClinVar label · bar = model signal</span>
     </div>
   </div>
+  <div class="takeaway">
+    <strong>What to look for</strong>
+    Read each row two ways: the <em>dot color</em> is what ClinVar says
+    (red = pathogenic, orange = risk, green = benign); the <em>bar color and direction</em> is
+    what Carbon says (red bar pointing left = surprised by the alt; charcoal bar pointing right
+    = alt looks fine). When the dot and bar agree on "left of zero" — like HBB c.20A>T sickle
+    cell — Carbon has independently picked up the pathogenicity signal. When they disagree, the
+    likely culprit is allele frequency: alt alleles common enough in human populations look
+    perfectly normal to a model trained on natural sequence. For sharper variant effect
+    prediction, Carbon can be fine-tuned (see the
+    <a href="https://huggingface.co/spaces/hf-carbon/dna-vep-explainer" style="color:#317f3f">dna-vep-explainer</a>).
+  </div>
+  </div>
 </section>
 <!-- ============================================================ -->
 <!-- ============================================================ -->
 <section id="track" class="section--two-col">
   <div class="section-narrative">
+  <div class="section-num">§3 · Structure</div>
+  <div class="section-title">It sees structure without being told</div>
+  <p class="lede">
+    For each token (a 6-base chunk), Carbon emits a log-probability under the surrounding context.
+    Plot that along a real gene and the curve dips and rises. We overlay the exon/intron map on top —
+    confidence rises in coding regions and falls in repetitive or unconstrained stretches, even
+    though the model never saw a single exon label.
+  </p>
   </div>
+  <div class="section-body">
   <div class="demo" id="demo3">
     <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>
       <div class="stat-pair"><span class="stat-pair-label">mean (overall)</span><span class="stat-pair-val muted" id="d3-mean">—</span></div>
     </div>
   </div>
+  <div class="takeaway">
+    <strong>What to look for</strong>
+    Exons, especially the protein-coding portions, tend to score noticeably higher than introns —
+    because exons are evolutionarily conserved and full of constrained patterns the model has learned
+    to predict. The Δ tells you how strongly Carbon "noticed" the difference for this gene.
+  </div>
+  </div>
 </section>
 <!-- ============================================================ -->
 <!-- ============================================================ -->
 <section id="species" class="section--two-col">
   <div class="section-narrative">
+  <div class="section-num">§4 · Species</div>
+  <div class="section-title">It knows who's who</div>
+  <p class="lede">
+    Feed the first few bases of a homologous gene from human, mouse, and zebrafish.
+    Each continuation diverges along its species' lineage — and matches that species' real
+    reference sequence more closely than the others'.
+  </p>
   </div>
+  <div class="section-body">
   <div class="demo" id="demo4">
     <div class="demo-toolbar">
       <span>gene</span>
         <button class="pill" data-gen="400">400</button>
       </span>
       <button id="d4-go" class="action primary">▶ run all</button>
+      <span class="status is-hidden" id="d4-status"><span class="dot"></span><span></span></span>
     </div>
     <div class="gene-info" id="d4-info">loading species…</div>
       <span style="color:#b00020">mismatches in reference highlighted</span>
     </div>
   </div>
+  <div class="takeaway">
+    <strong>What to look for</strong>
+    Each species' generation should match its own reference better than another species' would.
+    Identity drops dramatically on mouse/zebrafish/chicken when the prompt is from a different
+    lineage — the model conditions on species context from just a few bases.
+  </div>
+  </div>
 </section>
 <!-- ============================================================ -->
 <!-- ============================================================ -->
 <section id="folding" class="section--two-col">
   <div class="section-narrative">
+  <div class="section-num">§5 · Folding</div>
+  <div class="section-title">From sequence to structure</div>
+  <p class="lede">
+    When Carbon completes an open reading frame, the resulting bases translate to a protein —
+    a protein that folds. We feed the resulting ORF into ESMFold and render the
+    3D structure inline, alongside the same protein folded from the reference sequence so you
+    can see whether Carbon's continuation produced something biologically plausible.
+  </p>
   </div>
+  <div class="section-body">
   <div class="demo" id="demoFold">
     <!-- Cached-only UI: live fold UI (prefix selector, ▶ fold button,
          status indicator) is intentionally not rendered. The pipeline
       <div class="stat-pair"><span class="stat-pair-label">identity (1D)</span><span class="stat-pair-val muted" id="dfold-id">—</span></div>
     </div>
   </div>
+  <div class="takeaway">
+    <strong>What to look for</strong>
+    A high <em>pLDDT</em> means ESMFold is confident the predicted structure
+    is correct for that residue. When Carbon's completion diverges at the
+    base level but still produces a sequence whose 3D fold matches the
+    reference, the model has captured something deeper than memorization.
+  </div>
+  </div>
 </section>
 <!-- ============================================================ -->
 <!-- ============================================================ -->
 <section id="umap" class="section--two-col">
   <div class="section-narrative">
+  <div class="section-num">§6 · Embedding space</div>
+  <div class="section-title">The genome, organized</div>
+  <p class="lede">
+    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.
+  </p>
   </div>
+  <div class="section-body">
   <div class="demo" id="demoUmap">
     <div class="demo-toolbar">
       <span>color by</span>
       <div class="stat-pair"><span class="stat-pair-label">render</span><span class="stat-pair-val muted" id="dumap-fps">—</span></div>
     </div>
   </div>
+  <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 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>
+  </div>
 </section>
 <!-- ============================================================ -->
 <!-- ============================================================ -->
 <section id="speciesTree" class="section--two-col">
   <div class="section-narrative">
+  <div class="section-num">§7 · Species tree</div>
+  <div class="section-title">Did Carbon learn the tree of life on its own?</div>
+  <p class="lede">
+    Take the same 571,810 sequences from §6, average each species' embeddings into a
+    single 3072-dim vector, then cluster those 27 centroids with hierarchical clustering.
+    Carbon was never told what an "organism" is. Yet the resulting tree groups vertebrates
+    together, separates bacteria from fungi, and pairs sister clades — primates with
+    primates, rodents with rodents, monocots with monocots — without ever being shown a
+    single taxonomic label.
+  </p>
   </div>
+  <div class="section-body">
   <div class="demo" id="demoSpeciesTree">
     <div class="tree-toolbar">
       <span>linkage</span>
       <div class="stat-pair"><span class="stat-pair-label">distance</span><span class="stat-pair-val">cosine</span></div>
     </div>
   </div>
+  <div class="takeaway">
+    <strong>What to look for</strong>
+    Toggle <em>kingdom-level</em> vs <em>sister-level</em>: at the kingdom scale the
+    embedding is nearly perfect — vertebrates cluster with vertebrates, bacteria with
+    bacteria. At the sister scale (primate-with-primate, etc.) it's lower because
+    distances inside a kingdom are extremely tight (~0.0001) and the strict nearest
+    neighbour bounces around — the model nails the broad strokes but blurs the fine
+    branches at this resolution. Switch <em>linkage</em> from Ward to UPGMA to see how
+    much of the structure is method-independent. <em>Tree built from species centroids
+    of mean-pooled Carbon-3B embeddings.</em>
+  </div>
+  </div>
 </section>
 </div>
 <div class="tab-panel" id="panel-model" data-tab="model">
 <div class="tab-lede">
+  <div class="tab-lede__rail">
+    <span class="tab-lede__eyebrow">Intro</span>
+    <p>Three places where the recipe needed adjustment for biology: the way DNA gets tokenized, how the loss handles near-miss tokens, and which sequence ends up in the corpus. Plus a deliberately vanilla architecture so any improvement can be attributed to the recipe rather than custom blocks.</p>
+  </div>
 </div>
 <div class="container wide">
 <!-- ============================================================ -->
 <!-- §7 — TOKENIZER                                                -->
 <!-- ============================================================ -->
+<section id="tokenizer" class="section--two-col">
+  <div class="section-narrative">
   <div class="section-num">§1 · Tokenizer</div>
   <div class="section-title">Read DNA in 6-base chunks</div>
   <p class="lede">
     BPE was a tempting middle ground, but its variable-length tokens collide badly with
     autoregressive next-token prediction — DNA doesn't have stable "words."
   </p>
+  </div>
+  <div class="section-body">
   <div class="demo" id="demo7">
     <div class="demo-toolbar">
       <span>type DNA</span>
       <input id="d7-input" type="text" spellcheck="false" autocapitalize="characters"
              value="ATGGCCAAGCTGACCAGCGAGCTGCTGGCC"
+             style="font-family:'JetBrains Mono',monospace;font-size:12px;padding:6px 10px;border:1px solid #ccc;border-radius:3px;flex:1 1 auto;min-width:0;letter-spacing:1px;text-transform:uppercase">
       <span class="status"><span class="dot" style="background:#317f3f"></span><span id="d7-len">30 bp</span></span>
     </div>
+    <div id="d7-cols" style="display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px">
       <div>
         <div class="seq-label" style="margin-top:0">1-mer  ·  one token per base</div>
         <div class="seq-block" id="d7-1mer" style="min-height:60px"></div>
       </div>
       <div>
         <div class="seq-label" style="margin-top:0">6-mer (carbon)  ·  one token per 6 bases</div>
         <div class="seq-block" id="d7-6mer" style="min-height:60px"></div>
       </div>
     </div>
+    <!-- Stats for both tokenisers, grouped under the two sequences so the
+         eye can compare them in one glance. Labels are prefixed with
+         "1-mer" / "6-mer" since the row no longer sits directly below its
+         own sequence block. -->
+    <div class="stat-row" style="margin-top:14px;padding-top:12px">
+      <div class="stat-pair"><span class="stat-pair-label">1-mer tokens</span><span class="stat-pair-val" id="d7-1mer-tok">—</span></div>
+      <div class="stat-pair"><span class="stat-pair-label">1-mer attention</span><span class="stat-pair-val" id="d7-1mer-att">—</span></div>
+      <div class="stat-pair"><span class="stat-pair-label">1-mer vocab</span><span class="stat-pair-val">4</span></div>
+      <div class="stat-pair"><span class="stat-pair-label">6-mer tokens</span><span class="stat-pair-val" id="d7-6mer-tok">—</span></div>
+      <div class="stat-pair"><span class="stat-pair-label">6-mer attention</span><span class="stat-pair-val" id="d7-6mer-att">—</span></div>
+      <div class="stat-pair"><span class="stat-pair-label">6-mer vocab</span><span class="stat-pair-val">4,096</span></div>
+    </div>
     <svg id="d7-bars" preserveAspectRatio="xMinYMin meet" style="display:block;width:100%;background:#fff;border:1px solid #eee;margin-top:14px"></svg>
+    <div class="track-axis-label" style="padding-top:10px">
       <span>same DNA span</span>
       <span style="color:#317f3f">▼ shorter token sequence = cheaper attention</span>
       <span id="d7-speedup" style="color:#317f3f;font-weight:500">36× cheaper</span>
     a valid <em>prefix</em> of the target token. 6-mer is a deterministic, neutral compression
     that avoids this trap.
   </div>
+  </div>
 </section>
 <!-- ============================================================ -->
 <!-- §8 — TRAINING OBJECTIVE (CE → FNS)                           -->
 <!-- ============================================================ -->
+<section id="loss" class="section--two-col">
+  <div class="section-narrative">
   <div class="section-num">§2 · Training objective</div>
   <div class="section-title">Partial credit for near-misses</div>
   <p class="lede">
     six parallel 4-way nucleotide marginals derived from the same logits. Near-miss tokens
     get partial credit proportional to how many bases they got right.
   </p>
+  </div>
+  <div class="section-body">
   <div class="demo" id="demo8">
     <div class="demo-toolbar">
       <span>target 6-mer</span>
     (the "loss staircase," and BF16 inference starts diverging from FP32), FNS smooths the
     objective and restores numerical robustness without giving up the joint prior CE built.
   </div>
+  </div>
 </section>
 <!-- ============================================================ -->
 <!-- §9 — DATA                                                     -->
 <!-- ============================================================ -->
+<section id="data" class="section--two-col">
+  <div class="section-narrative">
   <div class="section-num">§3 · Data</div>
   <div class="section-title">Genomes are mostly background</div>
   <p class="lede">
     and bacterial sequence — so the model spends more of its gradient updates on biologically
     meaningful sequence.
   </p>
+  </div>
+  <div class="section-body">
   <div class="demo" id="demo9">
     <div style="display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:center;margin-bottom:18px">
       <div>
     <div class="seq-label">signal-to-noise · raw genome vs annotation-aware curation</div>
     <svg id="d9-snr" viewBox="0 0 1000 100" preserveAspectRatio="none" style="display:block;width:100%;height:90px;background:#fff;border:1px solid #eee"></svg>
+    <div class="track-axis-label" style="padding-top:10px">
       <span><span class="legend-swatch" style="background:#317f3f"></span>functional / annotated</span>
       <span><span class="legend-swatch" style="background:#ddd"></span>background</span>
       <span style="color:#888">curating raises the density of biological signal in the gradient</span>
     discarding 95% of background, the effective informative fraction jumps from 5% to ≈ 46%.
     Same training compute, ~9× more learning signal per gradient step.
   </div>
+  </div>
 </section>
 <!-- ============================================================ -->
 <!-- §10 — ARCHITECTURE                                            -->
 <!-- ============================================================ -->
+<section id="architecture" class="section--two-col">
+  <div class="section-narrative">
   <div class="section-num">§4 · Architecture</div>
   <div class="section-title">A deliberately vanilla transformer</div>
   <p class="lede">
     that any improvement Carbon shows on genomic tasks is attributable to the data, the
     tokenizer, and the loss — not to a custom block or a hand-crafted attention variant.
   </p>
+  </div>
+  <div class="section-body">
   <div class="demo" id="demo10">
     <table id="d10-arch" style="width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:12px"></table>
     <div style="margin-top:14px;font-size:11px;color:#666;font-family:'JetBrains Mono',monospace">
     come from changes that <em>aren't</em> the architecture. That's where the room for genomic
     foundation models still is.
   </div>
+  </div>
 </section>
 </div>
 <div class="tab-panel" id="panel-sandbox" data-tab="sandbox">
 <div class="tab-lede">
+  <div class="tab-lede__rail">
+    <span class="tab-lede__eyebrow">Intro</span>
+    <p>Open-ended DNA continuation. Type any prefix in {A, C, G, T}, watch the model continue token by token. Toggle base-coloring or per-token logprob coloring to see where Carbon is confident and where it's guessing. Track GC content, perplexity, and throughput live.</p>
+  </div>
 </div>
+<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>