Merge branch 'main' of hf.co:spaces/HuggingFaceBio/carbon-demo

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

# Conflicts:
# demo.html

app.py

@@ -76,13 +76,27 @@ def _load_text(path: str) -> str:
 # Templates loaded once at startup. demo.html and social-banner.html are
 # large; reading them on every request would add ~100 us of syscall +
 # parse overhead each time, which adds up under load. The substitution
-# itself (a single str.replace) is cheap. Reloading on edit happens via
-# uvicorn --reload in dev, which restarts the worker.
-_DEMO_HTML = _load_text(os.path.join(HERE, "demo.html"))
-_SOCIAL_BANNER_HTML = _load_text(os.path.join(HERE, "social-banner.html"))
-_ROBOTS_TXT = _load_text(os.path.join(HERE, "robots.txt"))
-_SITEMAP_XML = _load_text(os.path.join(HERE, "sitemap.xml"))
-_LLMS_TXT = _load_text(os.path.join(HERE, "llms.txt"))
+# itself (a single str.replace) is cheap.
+#
+# DEV=1 disables the cache and re-reads from disk on every request so
+# edits to demo.html / social-banner.html / robots / sitemap / llms show
+# up on the next reload without restarting the server.
+DEV = bool(os.environ.get("DEV"))
+
+_TEMPLATE_PATHS = {
+    "demo": os.path.join(HERE, "demo.html"),
+    "social_banner": os.path.join(HERE, "social-banner.html"),
+    "robots": os.path.join(HERE, "robots.txt"),
+    "sitemap": os.path.join(HERE, "sitemap.xml"),
+    "llms": os.path.join(HERE, "llms.txt"),
+}
+_TEMPLATE_CACHE = {name: _load_text(path) for name, path in _TEMPLATE_PATHS.items()}
+
+
+def template(name: str) -> str:
+    if DEV:
+        return _load_text(_TEMPLATE_PATHS[name])
+    return _TEMPLATE_CACHE[name]
 
 
 def render(template: str, site_url: str) -> str:
@@ -177,12 +191,12 @@ async def no_cache_dev_assets(request: Request, call_next):
 
 @app.get("/")
 def root(request: Request):
-    return HTMLResponse(render(_DEMO_HTML, site_url_for(request)))
+    return HTMLResponse(render(template("demo"), site_url_for(request)))
 
 
 @app.get("/demo")
 def demo(request: Request):
-    return HTMLResponse(render(_DEMO_HTML, site_url_for(request)))
+    return HTMLResponse(render(template("demo"), site_url_for(request)))
 
 
 @app.get("/sandbox-only")
@@ -197,7 +211,7 @@ def social_banner(request: Request):
     # sized to fit common social-media canvases (Twitter / OG / LinkedIn /
     # HF). Used to grab cover-art screenshots without firing up the full
     # demo page.
-    return HTMLResponse(render(_SOCIAL_BANNER_HTML, site_url_for(request)))
+    return HTMLResponse(render(template("social_banner"), site_url_for(request)))
 
 
 # ---------------------------------------------------------------------
@@ -209,13 +223,13 @@ def social_banner(request: Request):
 
 @app.get("/robots.txt", response_class=PlainTextResponse)
 def robots_txt(request: Request):
-    return PlainTextResponse(render(_ROBOTS_TXT, site_url_for(request)))
+    return PlainTextResponse(render(template("robots"), site_url_for(request)))
 
 
 @app.get("/sitemap.xml")
 def sitemap_xml(request: Request):
     return Response(
-        content=render(_SITEMAP_XML, site_url_for(request)),
+        content=render(template("sitemap"), site_url_for(request)),
         media_type="application/xml",
     )
 
@@ -226,7 +240,7 @@ def llms_txt():
     # agents that need a compact map of the site without scraping the
     # whole editorial page. No {{SITE_URL}} substitution: links are
     # either site-relative or absolute to canonical external URLs.
-    return PlainTextResponse(_LLMS_TXT, media_type="text/markdown; charset=utf-8")
+    return PlainTextResponse(template("llms"), media_type="text/markdown; charset=utf-8")
 
 
 @app.get("/favicon.ico")
@@ -236,6 +250,14 @@ def favicon():
     return RedirectResponse(url="/img/logo.svg", status_code=301)
 
 
+@app.get("/reel")
+def reel():
+    # Scripted demo tour: loads /demo in an iframe and walks through the
+    # header → sandbox → DNA Lab §1-§7 with title cards and ken-burns
+    # transitions. Screen-record this page for socials.
+    return FileResponse(os.path.join(HERE, "social_reel.html"))
+
+
 @app.get("/config")
 def config():
     return {"model": MODEL_NAME}

assets/js/sections/vep.js

@@ -238,18 +238,18 @@
   function renderForestBars() {
     if (!VARIANTS) return;
     // Layout sized so the SVG renders comfortably tall in the right-hand
-    // column of the §3 two-col layout (~828 px of width). The previous
-    // (W=1000, rowH=32) viewBox was ~3.6:1 wide which scaled down to ~230 px
-    // tall at column width, making the per-row text and bar values squint-
-    // small. Bumping rowH and font sizes here, and padding generously,
-    // gets us to roughly a 2.2:1 viewBox → ~380 px rendered, where the
-    // variant names and ±Δ values are readable without zoom.
+    // column of the §3 two-col layout (~828 px of width). The original
+    // (W=1000, rowH=32) viewBox was ~3.6:1 wide which scaled down too
+    // short at column width, making the per-row text squint-small;
+    // (rowH=56) was the other extreme — readable but tall enough to
+    // overflow a single frame in the social reel. rowH=46 with tighter
+    // top/bottom padding lands at ~2.0:1 → ~415 px rendered, which
+    // still keeps variant names and ±Δ values legible without zoom.
     //
     // padT carries two stacked header lines (axis title above, then
-    // VARIANT / ← LESS LIKELY / MORE LIKELY → row), so it has to be
-    // a bit taller than a single-line caption would need. padB carries
-    // the tick row + a two-line bottom caption.
-    const W = 1000, rowH = 56, padL = 320, padR = 80, padT = 72, padB = 90;
+    // VARIANT / ← LESS LIKELY / MORE LIKELY → row). padB carries the
+    // tick row + a two-line bottom caption.
+    const W = 1000, rowH = 46, padL = 320, padR = 80, padT = 58, padB = 70;
     // Sort variants by Δ ascending (most surprising-to-the-model first), but
     // keep unscored ones at the bottom in their original order.
     const indexed = VARIANTS.map((v, i) => ({ v, idx: i, d: cache[v.rs] ? cache[v.rs].altSum - cache[v.rs].refSum : null }));

assets/styles/layout.css

@@ -48,6 +48,29 @@
   color: #2d2d2a;
   max-width: 760px;
 }
+/* Release-hero figure (pareto frontier). Sits below the lede rail,
+   left-aligned with the text column so the figure feels anchored to the
+   announcement rather than floating. Caption mirrors the secondary-note
+   typography for visual continuity. */
+.tab-lede__figure {
+  margin: 28px 0 0;
+  max-width: 640px;
+  padding: 0;
+}
+.tab-lede__figure img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--hairline);
+}
+.tab-lede__figure figcaption {
+  margin-top: 10px;
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+  font-size: 13px;
+  line-height: 1.55;
+  color: #5b5b56;
+}
+
 /* Secondary "navigator" paragraph that follows the lede. Drops a step
    in size + weight + saturation so the eye reads it as a follow-up /
    table of contents rather than another full lede paragraph; the inline

assets/styles/section-intro.css

@@ -507,3 +507,148 @@
   }
   .cd-splice-arrows { width: 100%; }
 }
+
+/* ------------------------------------------------------------------ */
+/* §0 release lede · native Pareto chart.                             */
+/* Replaces /img/pareto.png with an inline SVG built from             */
+/* pareto/pareto_data.csv. Geometry mirrors the matplotlib reference, */
+/* but the chrome is pulled back to fit the editorial blog tone:      */
+/* hairline frame + tick lines instead of the 3px black box, mono     */
+/* tabular tick labels, plain text data labels with a paper-coloured  */
+/* paint-order halo (no pill box around each marker), and the         */
+/* "better/faster" indicator styled as a small mono uppercase eyebrow */
+/* the same way as the section labels elsewhere on the page. Carbon   */
+/* points still scale up + use a bolder label so the eye lands on     */
+/* them first.                                                         */
+/* ------------------------------------------------------------------ */
+.tab-lede__figure--pareto {
+  /* Wider than the default tab-lede__figure so the long x-axis
+     (decade ticks 200 → 200k) doesn't squash the right-edge labels. */
+  max-width: 760px;
+}
+.pareto-chart {
+  display: block;
+  width: 100%;
+  height: auto;
+  background: #ffffff;
+  border: 1px solid #cfcdbf;
+}
+.pareto-bg {
+  fill: #ffffff;
+}
+
+/* Hairline frame at the same weight as the rest of the demo's
+   section borders — the chart reads as another paper card rather
+   than a heavy matplotlib export. */
+.pareto-frame {
+  fill: none;
+  stroke: #cfcdbf;
+  stroke-width: 1;
+}
+
+/* Tick marks at the same hairline weight. Tick labels in JetBrains
+   Mono with tabular nums so the decade ticks line up tabularly and
+   the chart picks up the page's technical-mono register. Dimmed so
+   they read as scale references, not primary content. */
+.pareto-axis line {
+  stroke: #cfcdbf;
+  stroke-width: 1;
+}
+.pareto-axis text {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 13px;
+  fill: var(--ink-soft);
+  font-feature-settings: "tnum";
+}
+.pareto-axis--y text {
+  text-anchor: end;
+  dominant-baseline: middle;
+}
+.pareto-axis--x text {
+  text-anchor: middle;
+  dominant-baseline: hanging;
+}
+
+/* Axis titles in Inter to match the page body; italic subtitle under
+   "Throughput" carries the units in the muted ink-soft tone. */
+.pareto-axis-title {
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  fill: var(--ink);
+  text-anchor: middle;
+}
+.pareto-axis-subtitle {
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+  font-size: 13px;
+  font-style: italic;
+  fill: var(--ink-soft);
+  text-anchor: middle;
+}
+
+/* "Better/faster" axes-of-improvement indicator in the lower-left.
+   Arrows in muted ink, labels in the same mono-uppercase eyebrow
+   style as the section labels (banner-links, section-num, etc.)
+   so the chart's chrome doesn't read as a foreign matplotlib glyph. */
+.pareto-indicator line {
+  stroke: var(--ink-faint);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+.pareto-indicator polygon {
+  fill: var(--ink-faint);
+}
+.pareto-indicator-text {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  fill: var(--ink-faint);
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+/* 275× speedup arrow — the editorial headline. Solid ink, slightly
+   thinner than before so it doesn't overpower the chart. The label
+   gets a paper-coloured paint-order halo so it reads cleanly where
+   it crosses the arrow line behind it. */
+.pareto-speedup line {
+  stroke: var(--ink);
+  stroke-width: 2.5;
+  stroke-linecap: round;
+}
+.pareto-speedup polygon {
+  fill: var(--ink);
+}
+.pareto-speedup-label {
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+  font-size: 26px;
+  font-weight: 700;
+  fill: var(--ink);
+  text-anchor: middle;
+  paint-order: stroke;
+  stroke: #ffffff;
+  stroke-width: 6px;
+  stroke-linejoin: round;
+}
+
+/* Data labels: plain text, no pill box. The paint-order stroke acts
+   as a paper-coloured halo so the text always reads cleanly — even
+   when it sits next to a logo or crosses a tick line. Carbon labels
+   step up in size + weight so the highlighted models still pop. */
+.pareto-label {
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+  font-size: 13px;
+  fill: var(--ink);
+  text-anchor: middle;
+  dominant-baseline: middle;
+  paint-order: stroke;
+  stroke: #ffffff;
+  stroke-width: 4px;
+  stroke-linejoin: round;
+}
+.pareto-point--highlight .pareto-label {
+  font-size: 15px;
+  font-weight: 600;
+}

assets/styles/section-vep.css

@@ -7,6 +7,7 @@
 
 /* --- VEP demo (§3): two-row sequence display + inline scores --- */
 .vep-window {
+  position: relative;                       /* anchors the .status pill below */
   background: #f7f7f7; border: 1px solid #e0e0e0;
   padding: 16px 20px; margin: 12px 0;
   text-align: left;
@@ -18,6 +19,16 @@
      arrow row, and mutation row stay character-for-character aligned. */
   overflow-x: auto;
 }
+/* "pending" pill in the top-right corner, aligned with the edit-hint row.
+   Lives as a direct child of .vep-window (outside the JS-rebuilt content
+   div) so it persists across re-renders. */
+.vep-window > .status {
+  position: absolute;
+  top: 16px; right: 20px;
+  margin-left: 0;
+  background: #f7f7f7;                      /* occludes any wrapped edit-hint */
+  z-index: 1;
+}
 .vep-window .vep-stack {
   display: inline-grid;
   grid-template-columns: auto auto auto;

demo.html

@@ -193,10 +193,15 @@
         </ul>
         <ul class="banner-links" aria-label="Resources">
           <li>
-            <a href="https://huggingface.co/HuggingFaceBio/Carbon-3B" target="_blank" rel="noopener">
+            <a href="https://huggingface.co/collections/HuggingFaceBio/carbon" target="_blank" rel="noopener">
               Models<span class="arrow" aria-hidden="true">↗</span>
             </a>
           </li>
+          <li>
+            <a href="https://huggingface.co/datasets/HuggingFaceBio/carbon-pretraining-corpus" target="_blank" rel="noopener">
+              Dataset<span class="arrow" aria-hidden="true">↗</span>
+            </a>
+          </li>
           <li>
             <a href="https://paperswithcode.co/paper/83340" target="_blank" rel="noopener">
               Tech report<span class="arrow" aria-hidden="true">↗</span>
@@ -273,6 +278,163 @@
         shipping with the full training code, the data pipeline, and the model weights.
         Everything is open source on the Hugging Face Hub.
       </p>
+      <!-- Pareto chart, drawn natively as inline SVG so the figure scales
+           sharply, picks up the page's typography, and can be tuned in
+           CSS without a matplotlib re-export. Source data lives in
+           pareto/pareto_data.csv; geometry mirrors the matplotlib
+           reference (scratch/plot_pareto_winrate_throughput_8b_32k_hf.py):
+           log-scale throughput on x, linear win-rate % on y, family
+           badges sitting on each data point with a plain text label
+           below. Chrome is pulled back to match the editorial blog
+           tone — hairline frame + tick lines, mono tabular tick
+           labels, mono-uppercase "better/faster" eyebrow indicator —
+           and the data labels use a paint-order halo (see
+           .pareto-label in section-intro.css) instead of pill boxes.
+           Carbon points scale up + use a heavier label per the source
+           script's HIGHLIGHT_LOGO_SCALE so the eye lands on them. -->
+      <figure class="tab-lede__figure tab-lede__figure--pareto">
+        <svg
+          class="pareto-chart"
+          viewBox="0 0 1000 600"
+          xmlns="http://www.w3.org/2000/svg"
+          role="img"
+          aria-labelledby="pareto-title pareto-desc"
+        >
+          <title id="pareto-title">Throughput vs win rate across open DNA foundation models</title>
+          <desc id="pareto-desc">Log-scale throughput in base pairs per second on the x-axis and win-rate percentage on the y-axis. Carbon 3B and 8B sit at roughly 275 times the throughput of Arc Evo2 7B at comparable or better win rates.</desc>
+
+          <!-- Plot interior. -->
+          <rect class="pareto-bg" x="100" y="30" width="870" height="470"/>
+
+          <!-- Y axis: linear win-rate %, ticks at 0/20/40/60/80/100. The
+               plot range runs −12..108 (matches matplotlib padding) so
+               the data points have headroom above 100 and below 0 for
+               labels; only the canonical 0..100 ticks are drawn. -->
+          <g class="pareto-axis pareto-axis--y">
+            <line x1="94" y1="61.3"  x2="100" y2="61.3"/>
+            <line x1="94" y1="139.7" x2="100" y2="139.7"/>
+            <line x1="94" y1="218.0" x2="100" y2="218.0"/>
+            <line x1="94" y1="296.3" x2="100" y2="296.3"/>
+            <line x1="94" y1="374.7" x2="100" y2="374.7"/>
+            <line x1="94" y1="453.0" x2="100" y2="453.0"/>
+            <text x="86" y="61.3">100</text>
+            <text x="86" y="139.7">80</text>
+            <text x="86" y="218.0">60</text>
+            <text x="86" y="296.3">40</text>
+            <text x="86" y="374.7">20</text>
+            <text x="86" y="453.0">0</text>
+          </g>
+
+          <!-- X axis: log10 base pairs/s. x-range chosen to mirror the
+               matplotlib auto-padding (left_pad/right_pad in the source);
+               ticks drop at decade + half-decade boundaries that fall
+               inside the range. -->
+          <g class="pareto-axis pareto-axis--x">
+            <line x1="163.4" y1="500" x2="163.4" y2="506"/>
+            <line x1="263.9" y1="500" x2="263.9" y2="506"/>
+            <line x1="339.9" y1="500" x2="339.9" y2="506"/>
+            <line x1="415.9" y1="500" x2="415.9" y2="506"/>
+            <line x1="516.4" y1="500" x2="516.4" y2="506"/>
+            <line x1="592.4" y1="500" x2="592.4" y2="506"/>
+            <line x1="668.5" y1="500" x2="668.5" y2="506"/>
+            <line x1="768.9" y1="500" x2="768.9" y2="506"/>
+            <line x1="844.9" y1="500" x2="844.9" y2="506"/>
+            <line x1="920.9" y1="500" x2="920.9" y2="506"/>
+            <text x="163.4" y="520">200</text>
+            <text x="263.9" y="520">500</text>
+            <text x="339.9" y="520">1k</text>
+            <text x="415.9" y="520">2k</text>
+            <text x="516.4" y="520">5k</text>
+            <text x="592.4" y="520">10k</text>
+            <text x="668.5" y="520">20k</text>
+            <text x="768.9" y="520">50k</text>
+            <text x="844.9" y="520">100k</text>
+            <text x="920.9" y="520">200k</text>
+          </g>
+
+          <!-- Plot frame drawn after the axis grid so the thick black
+               border sits cleanly on top of the tick lines. -->
+          <rect class="pareto-frame" x="100" y="30" width="870" height="470"/>
+
+          <!-- Axes-of-improvement indicator: a small ⌐ of grey arrows in
+               the lower-left labelled "better"/"faster", same as the
+               matplotlib reference. Placed at the 0-winrate gridline,
+               just inside the y-axis. -->
+          <g class="pareto-indicator" transform="translate(170 450)">
+            <line x1="0" y1="0" x2="0" y2="-70"/>
+            <polygon points="0,-78 -7,-66 7,-66"/>
+            <text class="pareto-indicator-text" transform="translate(-14 -35) rotate(-90)">better</text>
+            <line x1="0" y1="0" x2="70" y2="0"/>
+            <polygon points="78,0 66,-7 66,7"/>
+            <text class="pareto-indicator-text" x="35" y="20">faster</text>
+          </g>
+
+          <!-- 275× speedup arrow: starts just right of the Evo2 7B label
+               pill and lands just left of the Carbon 3B logo. y placed
+               between the two points (Evo2 7B at 64.3%, Carbon 3B at
+               59.5%) so it reads as level with both. -->
+          <g class="pareto-speedup">
+            <line x1="290" y1="215" x2="822" y2="215"/>
+            <polygon points="836,215 820,206 820,224"/>
+            <text class="pareto-speedup-label" x="556" y="200">275×</text>
+          </g>
+
+          <!-- Data points. Coordinates baked in from pareto_data.csv:
+               x = 100 + (log10(T) − 2.0499) / 3.4452 × 870
+               y = 500 − (win_rate + 12) × 3.9167
+               Logos sit centered on each point (32×32 for non-highlight,
+               43×43 for Carbon). Labels are pinned below the logo. -->
+
+          <!-- Evo2 20B · 177.5 bp/s, 95.24% -->
+          <g class="pareto-point">
+            <image href="/img/arc.webp" x="134.3" y="64.0" width="32" height="32"/>
+            <text class="pareto-label" x="150.3" y="110">Evo2 20B</text>
+          </g>
+
+          <!-- Evo2 7B · 453.8 bp/s, 64.29% -->
+          <g class="pareto-point">
+            <image href="/img/arc.webp" x="237.3" y="185.2" width="32" height="32"/>
+            <text class="pareto-label" x="253.3" y="231">Evo2 7B</text>
+          </g>
+
+          <!-- Evo2 1B · 1342.5 bp/s, 2.38% -->
+          <g class="pareto-point">
+            <image href="/img/arc.webp" x="356.2" y="427.7" width="32" height="32"/>
+            <text class="pareto-label" x="372.2" y="473">Evo2 1B</text>
+          </g>
+
+          <!-- GENERator-v2 3B · 98494.4 bp/s, 35.71% -->
+          <g class="pareto-point">
+            <image href="/img/generator.webp" x="828.7" y="297.1" width="32" height="32"/>
+            <text class="pareto-label" x="844.7" y="343">GENERator-v2 3B</text>
+          </g>
+
+          <!-- GENERator-v2 1.2B · 123219.2 bp/s, 14.29% -->
+          <g class="pareto-point">
+            <image href="/img/generator.webp" x="853.3" y="381.0" width="32" height="32"/>
+            <text class="pareto-label" x="869.3" y="427">GENERator-v2 1.2B</text>
+          </g>
+
+          <!-- Carbon 8B · 76582.7 bp/s, 78.57% (highlighted) -->
+          <g class="pareto-point pareto-point--highlight">
+            <image href="/img/logo.svg" x="795.6" y="123.7" width="43" height="43"/>
+            <text class="pareto-label" x="817.1" y="180">Carbon 8B</text>
+          </g>
+
+          <!-- Carbon 3B · 125130.8 bp/s, 59.52% (highlighted) -->
+          <g class="pareto-point pareto-point--highlight">
+            <image href="/img/logo.svg" x="849.5" y="198.3" width="43" height="43"/>
+            <text class="pareto-label" x="871.0" y="255">Carbon 3B</text>
+          </g>
+
+          <!-- Axis titles. Y title rotated -90 along the left margin, X
+               title + italic "Base pairs per second" subtitle below. -->
+          <text class="pareto-axis-title" transform="translate(34 265) rotate(-90)">Win rate (%)</text>
+          <text class="pareto-axis-title" x="535" y="558">Throughput</text>
+          <text class="pareto-axis-subtitle" x="535" y="582">Base pairs per second</text>
+        </svg>
+        <figcaption>Throughput (base pairs per second, log scale) vs win rate across open DNA foundation models. Carbon 3B matches Evo2 7B's win rate at roughly 275× the throughput.</figcaption>
+      </figure>
     </div>
   </div>
 
@@ -480,7 +642,7 @@
     <div class="section--two-col intro-subsection">
       <div class="section-narrative">
         <div class="section-num">§6 · Applications</div>
-        <div class="section-title">From bases to outcomes</div>
+        <div class="section-title">What can the model do in the real world?</div>
         <p class="lede">
           A model that understands and writes DNA is useful wherever DNA is the
           input or the output. There are three interesting use-cases for such
@@ -543,16 +705,16 @@
   <div class="tab-lede__rail">
     <span class="tab-lede__eyebrow">Intro</span>
     <p>
-      <strong>Carbon-3B</strong> is a 3-billion-parameter language model for DNA. We trained it
-      on roughly 1&nbsp;trillion tokens (6&nbsp;trillion base pairs) of genomic sequence with a
-      single objective: given some DNA, predict what comes next (six bases at a time,
-      autoregressively). That's it: no annotations, no labels, no biology curriculum.
-      Just <em>read DNA, predict more DNA</em>.
+      <strong>Carbon-3B</strong> is a 3-billion-parameter language model for DNA. It is trained on
+      roughly 1&nbsp;trillion tokens (6&nbsp;trillion base pairs) of genomic sequence with a simple
+      objective: given some DNA, predict what comes next (six bases at a time, autoregressively).
+      Even though the objective is simple the resulting model is versatile. In the DNA lab you can
+      explore all the cool things we can do with a DNA model.
     </p>
     <p class="tab-lede__note">
-      The interesting question is what else falls out of that. We didn't tell Carbon-3B what an
-      exon is. We didn't tell it which mutations are pathogenic. We didn't tell it how genes
-      differ between species. The sections below are ways to read what it picked up
+      Carbon-3B was trained unsupervised besides some simple tags for species and gene biotypes.
+      It wasn't trained to tell which mutations are pathogenic or how genes differ between species.
+      The sections below highlight what it picked up
       anyway: autocomplete a gene <a class="lede-chip" href="#completion">§1</a>, see
       structure emerge in its confidence <a class="lede-chip" href="#track">§2</a>, score
       a disease variant against a healthy one <a class="lede-chip" href="#vep">§3</a>,
@@ -576,11 +738,12 @@
   <div class="section-num">§1 · Autocomplete</div>
   <div class="section-title">Autocomplete for the genome</div>
   <p class="lede">
-    Same idea as GPT completing a sentence, but for DNA. By default we feed Carbon the
-    intron just before the 2nd exon plus the first 35 bp of that exon, and ask it to
-    <em>finish the exon</em>. The model streams the remaining bases one 6-base token at a
-    time. Exons are the protein-coding parts of a gene and are under strong evolutionary
-    constraint, so they should be the most predictable stretches of DNA. We overlay the
+    Same idea as GPT completing a sentence, but for DNA. We feed the model a DNA sequence
+    as input and the model produces an output sequence. The model streams the bases one
+    6-base token at a time. The model is better at predicting sequences of a gene's exons
+    because they are the protein-coding parts of a gene and are under strong evolutionary
+    constraint. As such they should be the most predictable stretches of DNA. The introns
+    serve regulatory purposes on the other hand and are harder to predict. We overlay the
     <em>real</em> exon/intron annotations on top of the output so you can compare what
     Carbon produces to what's actually there.
   </p>
@@ -740,14 +903,14 @@ print(tok.decode(new_ids))</code></pre></div>
 <section id="track" class="section--two-col">
   <div class="section-narrative">
   <div class="section-num">§2 · Structure</div>
-  <div class="section-title">It sees structure without being told</div>
+  <div class="section-title">Recognizing gene structure</div>
   <p class="lede">
-    Carbon assigns every 6-base chunk a log-probability under the surrounding context: how
-    "expected" that stretch of DNA is. Plot that score along a real gene and the curve dips
-    and rises. We overlay the exon/intron annotation on top: confidence reliably climbs in
-    protein-coding regions and falls in repetitive or unconstrained intronic stretches,
-    even though the model never saw a single label. The same score, summed up, is what
-    powers the variant-effect call in §3 below.
+    The Carbon model assigns every 6-base chunk a log-probability under the surrounding
+    context: how "expected" or "likely" that stretch of DNA is. The plot with the scores
+    along a real gene shows the curve dips and rises. We overlay the exon/intron annotation
+    on top: confidence reliably climbs in protein-coding regions and falls in repetitive or
+    unconstrained intronic stretches, even though the model never saw a single label. The
+    same score, summed up, is what powers the variant-effect call in §3 below.
   </p>
   </div>
 
@@ -862,16 +1025,15 @@ for t, lp in zip(tok.convert_ids_to_tokens(ids[0, 1:].tolist()),
 <section id="vep" class="section--two-col">
   <div class="section-narrative">
   <div class="section-num">§3 · Variant effect</div>
-  <div class="section-title">It knows what's broken</div>
+  <div class="section-title">Predicting mutation effects</div>
   <p class="lede">
     §2 showed that Carbon's per-base confidence rises and falls in step with gene structure.
-    Now we use the <em>same</em> log-likelihood, but as a yardstick for individual mutations.
-    For a real ClinVar variant we score a ~4&nbsp;kb window of human DNA <em>two ways</em>
-    (once with the original base, once with the mutation), and ask: which version looks more
-    like real, functioning human sequence? Carbon was never told what "pathogenic" means; it
-    just learned what natural DNA looks like. Variants that disrupt protein-coding or
-    regulatory function show up as <em>less likely</em> sequence under the model's
-    distribution.
+    Now we use the same log-likelihood, but as a measure for individual mutations. For a
+    real ClinVar variant we score a ~4&nbsp;kb window of human DNA two ways: once with the
+    original base, once with the mutation. Then we check which version looks more like
+    real, functioning human sequence. Carbon was never trained on what "pathogenic" means;
+    it just learned what natural DNA looks like. Variants that disrupt protein-coding or
+    regulatory function show up as less likely sequence under the model's distribution.
   </p>
   </div>
 
@@ -880,16 +1042,18 @@ for t, lp in zip(tok.convert_ids_to_tokens(ids[0, 1:].tolist()),
     <div class="demo-toolbar">
       <span>variant</span>
       <span id="d2-pills" class="pills"></span>
-      <span class="spacer"></span>
-      <!-- Status pill: hidden by default, surfaces when an edit triggers
-           a live rescore (or on the initial auto-score for a variant that
-           isn't yet in the precomputed cache). -->
-      <span class="status is-hidden" id="d2-status"><span class="dot"></span><span></span></span>
     </div>
 
     <div class="vep-gene-box" id="d2-gene-box">loading variants…</div>
 
-    <div class="vep-window" id="d2-window"></div>
+    <div class="vep-window">
+      <!-- Status pill: hidden by default, surfaces when an edit triggers
+           a live rescore (or on the initial auto-score for a variant that
+           isn't yet in the precomputed cache). Lives outside the content
+           div below so it survives the innerHTML rebuilds in vep.js. -->
+      <span class="status is-hidden" id="d2-status"><span class="dot"></span><span></span></span>
+      <div id="d2-window"></div>
+    </div>
 
     <svg id="d2-bars" style="display:block;width:100%;height:auto;background:#fff;border:1px solid #eee;margin-top:12px" preserveAspectRatio="xMinYMin meet"></svg>
   </div>
@@ -973,16 +1137,15 @@ print(f"delta = {delta:+.2f}  (less likely if negative)")</code></pre></div>
 <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>
+  <div class="section-title">Species specific generation</div>
   <p class="lede">
-    The same gene (insulin, p53) exists in mouse and chicken, but the surrounding sequence
-    has accumulated different mutations along each lineage for hundreds of millions of
-    years. For each species we hand Carbon up to ~400 bp leading into the 2nd exon and
-    ask it to continue inside the exon. Each continuation should match <em>that species'</em>
-    real DNA better than another species' would. The model handles closely-related species
-    well (mouse, chicken, even though they're ~300 My from human); the further you go back
-    in evolutionary time, the more the surrounding sequence drifts and the harder this
-    setup becomes.
+    The same gene (insulin, p53) exists in humans, mouse and chicken, but the surrounding
+    sequence has accumulated different mutations along each lineage for hundreds of millions
+    of years. For each species we feed Carbon up to ~400 bp and ask it to continue. Each
+    continuation should match that species' real DNA better than another species' would.
+    The model handles closely-related species well (mouse, chicken, even though they're
+    ~300 My from human); the further you go back in evolutionary time, the more the
+    surrounding sequence drifts and the harder this setup becomes.
   </p>
   </div>
 
@@ -1104,13 +1267,13 @@ for name, ids in zip(species_prefixes, new_ids):
 <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>
+  <div class="section-title">From DNA to proteins</div>
   <p class="lede">
-    Show Carbon the first <em>75%</em> of a coding sequence, ask it to predict the remaining
-    <em>25%</em>, then translate and fold the resulting C-terminal stretch with ESMFold. Each
-    panel below pairs Carbon's predicted protein against the reference fold for the same
-    residues, so you can read at a glance whether the bases the model emitted assemble into a
-    biologically plausible structure or collapse into noise.
+    When Carbon completes a protein coding region in a gene, the resulting bases translate
+    to a protein: a protein that folds. We feed the resulting sequence into ESMFold
+    (similar to AlphaFold) 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 similar.
   </p>
   </div>
 
@@ -1203,13 +1366,13 @@ for name, ids in zip(species_prefixes, new_ids):
 <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>
+  <div class="section-title">Mapping out genomes</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.
+    We embed 571,810 genes from 27 species across six kingdoms (vertebrates,
+    invertebrates, plants, fungi, bacteria, viruses) with Carbon, project to 2D with UMAP,
+    color by attributes. Depending on the attribute, different kinds of organizations
+    emerge from the same points: the model's embedding space encodes multiple axes of
+    biology at once, most of which were never labeled.
   </p>
   </div>
 
@@ -1272,14 +1435,14 @@ for name, ids in zip(species_prefixes, new_ids):
 <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>
+  <div class="section-title">Reconstructing the tree of life</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
+    If we take the same 571,810 sequences from §6 and average each species' embeddings into
+    a single 3072-dim vector, then cluster those 27 centroids with hierarchical clustering,
+    we can find species the model regards as closely related. Carbon was never trained on
+    what the relation between organisms 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.
+    primates, rodents with rodents, monocots with monocots).
   </p>
   </div>
 
@@ -1365,12 +1528,14 @@ for name, ids in zip(species_prefixes, new_ids):
     <span class="tab-lede__eyebrow">Intro</span>
     <p>
       Carbon's architecture is deliberately vanilla. What's <em>not</em> vanilla, and what
-      gets the headline numbers in the DNA Lab tab, is two things: a <strong>6-mer
+      gets the headline numbers in the DNA Lab tab, is three things: a <strong>6-mer
       tokenizer</strong> that lets the model see ~6&times; more genomic context per
-      forward pass, and a <strong>Factorized Nucleotide Supervision (FNS)</strong> loss
+      forward pass, a <strong>Factorized Nucleotide Supervision (FNS)</strong> loss
       that gives the model partial credit for near-miss tokens once cross-entropy
-      training starts to wobble. Everything else (architecture, data mix, optimizer) is
-      standard recipe.
+      training starts to wobble, and a <strong>multi-stage curated data mixture</strong>,
+      biased toward functional genomic regions. Everything else (architecture, optimizer)
+      is standard recipe. The technical report details each choice and the ablations
+      behind it.
     </p>
     <p class="tab-lede__note">
       The sections below walk through each of those choices: how the tokenizer changes

social_reel.html

@@ -0,0 +1,639 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Carbon · social reel</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&family=Inter:wght@300;400;500;600&display=swap">
+<style>
+  :root {
+    --ink: #1a1a1a;
+    --ink-soft: #5b5b56;
+    --paper: #fafafa;
+    --green: #1a8a3a;
+    --rule: #e3e1d6;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    height: 100%;
+    background: #000;
+    color: #fff;
+    font-family: "Inter", system-ui, sans-serif;
+    overflow: hidden;
+  }
+
+  /* Frameless: the stage fills the entire viewport. Resize the
+     browser window to whatever aspect ratio you want to record. */
+  .stage {
+    position: absolute;
+    inset: 0;
+    background: #f7f5ee;
+  }
+  .stage-frame {
+    position: absolute;
+    inset: 0;
+    background: #f7f5ee;  /* matches the demo body so a clipped iframe
+                             blends seamlessly with the stage frame. */
+    overflow: hidden;
+  }
+
+  iframe.demo {
+    position: absolute; inset: 0;
+    width: 100%; height: 100%;
+    border: 0;
+  }
+
+  /* Scene-to-scene slide animation lives on .stage-frame (which carries
+     both iframes). The previous frame slides up off the top, content
+     swaps off-screen, the new frame slides in from below. */
+  .stage-frame { will-change: transform; }
+  .stage-frame.slide-out {
+    transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
+    transform: translateY(-100%);
+  }
+  .stage-frame.slide-prep {
+    transition: none;
+    transform: translateY(100%);
+  }
+  .stage-frame.slide-in {
+    transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
+    transform: translateY(0);
+  }
+
+  /* Two iframes share the stage; we toggle which one is visible per
+     scene. The banner one points at /social-banner — a dedicated hero
+     page that already centers the banner inside its own viewport, so
+     we don't have to crop or scale anything ourselves. */
+  iframe.demo { z-index: 1; }
+  /* Banner/demo swap is hidden behind the .stage-frame slide (the
+     change happens off-screen between slide-out and slide-in), so the
+     opacity flip can be instant — a cross-fade here would overlap the
+     slide motion and read as a double animation. */
+  iframe.banner-iframe { z-index: 2; opacity: 0; pointer-events: none; }
+  iframe.banner-iframe.active { opacity: 1; pointer-events: auto; }
+  iframe.demo:not(.banner-iframe).hidden { opacity: 0; }
+
+  /* "Now playing" progress dots at the top. */
+  .timeline {
+    position: absolute;
+    top: 18px; left: 32px; right: 32px;
+    z-index: 5;
+    display: flex; gap: 6px;
+    pointer-events: none;
+  }
+  .timeline .dot {
+    flex: 1; height: 2px; background: rgba(0,0,0,0.12); border-radius: 1px;
+    overflow: hidden;
+  }
+  .timeline .dot::before {
+    content: ""; display: block; height: 100%; width: 0%;
+    background: var(--ink);
+    transition: width .2s linear;
+  }
+  .timeline .dot.done::before { width: 100% !important; }
+
+  /* Quiet "→" hint that fades in once the scene has settled, telling
+     the recorder they can advance whenever ready. */
+  .ready-hint {
+    position: absolute; right: 24px; bottom: 18px; z-index: 5;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 20px; color: rgba(0,0,0,0.45);
+    opacity: 0; transition: opacity .8s ease;
+    pointer-events: none;
+    animation: nudge 1.8s ease-in-out infinite;
+  }
+  .ready-hint.show { opacity: 1; }
+  @keyframes nudge {
+    0%, 100% { transform: translateX(0); }
+    50%      { transform: translateX(4px); }
+  }
+
+  /* Controls (hidden during recording with H). */
+  .controls {
+    position: fixed; top: 12px; right: 12px; z-index: 50;
+    display: flex; gap: 8px; align-items: center;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 11px; color: #ccc;
+    background: rgba(0,0,0,0.55);
+    padding: 8px 10px; border-radius: 6px;
+    border: 1px solid rgba(255,255,255,0.1);
+    backdrop-filter: blur(6px);
+  }
+  .controls.hidden { opacity: 0; pointer-events: none; }
+  .controls button, .controls select {
+    font-family: inherit; font-size: 11px;
+    background: #1a1a1a; color: #eee;
+    border: 1px solid #444; border-radius: 3px;
+    padding: 4px 8px; cursor: pointer;
+  }
+  .controls button:hover { border-color: #888; }
+  .controls .hint { color: #888; font-size: 10px; }
+  .controls label.auto {
+    display: flex; align-items: center; gap: 5px;
+    color: #ccc; font-size: 11px;
+    padding: 4px 8px; border: 1px solid #444; border-radius: 3px;
+    cursor: pointer;
+  }
+  .controls label.auto input { margin: 0; cursor: pointer; }
+
+  /* Hint banner shown briefly on load. */
+  .toast {
+    position: fixed; left: 50%; bottom: 20px;
+    transform: translateX(-50%);
+    z-index: 60;
+    background: rgba(0,0,0,0.7);
+    color: #fff; padding: 8px 14px; border-radius: 4px;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 11px; letter-spacing: 0.06em;
+    opacity: 0; transition: opacity .4s ease;
+    pointer-events: none;
+  }
+  .toast.show { opacity: 1; }
+</style>
+</head>
+<body data-aspect="16-9">
+
+<div class="controls" id="controls">
+  <button id="play">▶ play</button>
+  <button id="restart">↺ restart</button>
+  <label class="auto"><input type="checkbox" id="auto-toggle"> auto</label>
+  <span class="hint">H: hide · ←/→: scene · space: pause</span>
+</div>
+
+<div class="toast" id="toast">press H to hide controls · → advances scenes</div>
+
+<div class="stage">
+  <div class="stage-frame">
+    <iframe class="demo" id="demo" src="/demo" title="Carbon demo"></iframe>
+    <iframe class="demo banner-iframe" id="banner" src="/social-banner?format=og" title="Carbon hero"></iframe>
+
+    <div class="timeline" id="timeline"></div>
+    <div class="ready-hint" id="ready-hint">→</div>
+  </div>
+</div>
+
+<script>
+// =============================================================
+// Scene list — each entry drives one beat of the reel: switch to a
+// tab, scroll to a target element, hold for `duration` ms, then
+// slide-transition to the next scene.
+// =============================================================
+// useBanner: show the dedicated /social-banner iframe (a centred hero
+// with no surrounding chrome) instead of the full demo. Used for the
+// opening scene so the title shot is purpose-built and centred in the
+// frame rather than cropped from the live demo.
+//
+// scrollOffset: extra whitespace above the scrolled-to section so the
+// widget below sits comfortably in the lower part of the frame instead
+// of being flush against the top edge.
+const SCENES = [
+  { kind: "scene", useBanner: true,                          duration: 6000 },
+  { kind: "scene", tab: "dna-lab", scrollTo: "#completion",  scrollOffset: 120, duration: 6000 },
+  { kind: "scene", tab: "dna-lab", scrollTo: "#track",       scrollOffset: 120, duration: 6000 },
+  { kind: "scene", tab: "dna-lab", scrollTo: "#vep",         scrollOffset: 120, duration: 6000 },
+  { kind: "scene", tab: "dna-lab", scrollTo: "#species",     scrollOffset: 120, duration: 6000 },
+  { kind: "scene", tab: "dna-lab", scrollTo: "#folding",     scrollOffset: 120, duration: 6000 },
+  { kind: "scene", tab: "dna-lab", scrollTo: "#umap",        scrollOffset: 120, duration: 6000 },
+  { kind: "scene", tab: "dna-lab", scrollTo: "#speciesTree", scrollOffset: 120, duration: 6000 },
+];
+
+// Default to manual advance so the recorder can interact with each
+// widget for as long as they want before moving on. Flip to true (or
+// toggle "auto" in the controls) for hands-free playback.
+let autoAdvance = false;
+
+// --- helpers --------------------------------------------------
+const $ = (id) => document.getElementById(id);
+const iframe = $("demo");
+const banner = $("banner");
+const timeline = $("timeline");
+
+// Once /social-banner has loaded: hide its format switcher, drop the
+// outer cream "canvas" framing (body bg, body padding, box-shadow),
+// and override the scale so the banner fills the iframe edge-to-edge
+// instead of being clamped to its natural pixel size. Same-origin so
+// direct DOM access is allowed.
+banner.addEventListener("load", () => {
+  try {
+    const doc = banner.contentDocument;
+    const win = banner.contentWindow;
+    if (!doc || !win) return;
+
+    const sw = doc.querySelector(".sb-switcher");
+    if (sw) sw.style.display = "none";
+
+    const style = doc.createElement("style");
+    style.textContent = `
+      html, body {
+        background: #f7f5ee !important;
+        padding: 0 !important;
+        gap: 0 !important;
+        overflow: hidden !important;
+      }
+      /* Banner is the only body child in the reel; center it vertically
+         so any leftover slack (when the iframe aspect ratio doesn't match
+         the banner's) reads as symmetric letterbox margins rather than a
+         lone blank rectangle stacked below the banner. */
+      body { justify-content: center !important; }
+      .social-banner-stage { box-shadow: none !important; }
+      /* The reel only frames the banner stage; the brand contact-sheet
+         and OG thumbnail strip below it are out of scope for the tour. */
+      .sb-section-label,
+      .sb-logos,
+      .sb-thumbs { display: none !important; }
+    `;
+    doc.head.appendChild(style);
+
+    // Reel mode: instead of scaling a fixed-ratio stage into the
+    // iframe (which either letterboxes or crops, depending on Math.min
+    // vs Math.max), we override the stage dimensions to match the
+    // iframe exactly and keep scale at 1×. The banner's internal grid
+    // (wordmark left, helix right) reflows to the iframe's actual
+    // aspect ratio, so the helix and dot-paper background extend to
+    // every edge without cropping the wordmark.
+    const stage = doc.getElementById("sb-stage");
+    if (stage) {
+      const fit = () => {
+        stage.style.setProperty("--sb-w", win.innerWidth + "px");
+        stage.style.setProperty("--sb-h", win.innerHeight + "px");
+        stage.style.setProperty("--sb-scale", "1");
+      };
+      fit();
+      win.addEventListener("resize", fit);
+      // The parent reel page can also change the iframe size (e.g. when
+      // the browser window is resized); listen there too.
+      window.addEventListener("resize", fit);
+    }
+  } catch {}
+});
+
+// Inject reel-only styles into the demo iframe. Two jobs:
+//   1. Hide the "Try it / What to look for" callouts (.takeaway) and
+//      "Run this from code" expandables (details.code-snippet) site-
+//      wide so each scene shows just the widget.
+//   2. When body.reel-mode is active, hide *everything* except the
+//      one section flagged with .reel-current, and centre that
+//      section vertically in the viewport. This stops the next
+//      section peeking in below and keeps the widget on-screen.
+// Only this iframe instance is affected — the live demo at /demo is
+// untouched if you navigate there directly.
+iframe.addEventListener("load", () => {
+  try {
+    const d = iframe.contentDocument;
+    if (!d) return;
+    const style = d.createElement("style");
+    style.textContent = `
+      .takeaway,
+      details.code-snippet { display: none !important; }
+
+      /* --- reel-mode: single-widget viewport ----------------------- */
+      body.reel-mode {
+        padding: 0 !important;
+        margin: 0 !important;
+      }
+      body.reel-mode > header.carbon-banner,
+      body.reel-mode > #tab-nav-sticky,
+      body.reel-mode > footer { display: none !important; }
+      body.reel-mode > .tab-panel { display: none !important; }
+      body.reel-mode > .tab-panel.active { display: block !important; }
+
+      body.reel-mode .tab-panel.active > .tab-lede { display: none !important; }
+      body.reel-mode .tab-panel.active .container.wide {
+        min-height: 100vh;
+        max-width: none;
+        /* Generous side padding so the section narrative + widget have
+           breathing room from the viewport edges. */
+        padding: 32px 96px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+      }
+      body.reel-mode section.section--two-col { display: none !important; }
+      body.reel-mode section.section--two-col.reel-current {
+        display: grid !important;
+        width: 100%;
+        margin: 0 !important;
+        scroll-margin-top: 0 !important;
+        /* Optical-centre nudge: the section's narrative + widget reads
+           better seated slightly above true centre, with a touch more
+           paper visible below. */
+        transform: translateY(-50px);
+      }
+      /* The narrative rail is normally sticky under the page header;
+         in reel-mode there is no scroll, so park it back to static so
+         it sits next to the demo body instead of jumping to top:104px. */
+      body.reel-mode .section--two-col.reel-current .section-narrative {
+        position: static !important;
+        top: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+      }
+    `;
+    d.head.appendChild(style);
+  } catch {}
+});
+
+let idx = -1;
+let timer = null;
+let progressTimer = null;
+let paused = false;
+let progressStart = 0;
+let progressDur = 0;
+let started = false;
+
+function buildTimeline() {
+  timeline.innerHTML = SCENES.map(() => `<div class="dot"></div>`).join("");
+}
+
+const stageFrame = document.querySelector(".stage-frame");
+const SLIDE_MS = 420;
+
+// Slide transition. Drives .stage-frame (which holds both iframes) up
+// off the top, applies the new scene's content while off-screen,
+// snaps to translateY(100%), then slides back to translateY(0).
+// applyScene runs after the slide-out, so the user only sees the new
+// content emerge from the bottom.
+function slideToNext(applyScene, then) {
+  stageFrame.classList.remove("slide-prep", "slide-in");
+  stageFrame.classList.add("slide-out");
+  setTimeout(() => {
+    applyScene();
+    // Brief settle window so the iframe's tab swap + scrollTo finish
+    // off-screen before the slide-in starts — otherwise the new scene
+    // re-lays-out mid-slide and reads as a layout flash.
+    setTimeout(() => {
+      stageFrame.classList.remove("slide-out");
+      stageFrame.classList.add("slide-prep");
+      void stageFrame.offsetWidth;
+      requestAnimationFrame(() => {
+        stageFrame.classList.remove("slide-prep");
+        stageFrame.classList.add("slide-in");
+        if (then) setTimeout(then, SLIDE_MS);
+      });
+    }, 180);
+  }, SLIDE_MS);
+}
+
+// Drive the iframe: switch tabs, scroll to an element, trigger actions.
+function driveIframe(scene) {
+  const win = iframe.contentWindow;
+  const doc = iframe.contentDocument;
+  if (!doc || !win) return;
+
+  // Tab switch. The demo exposes window.setTab; fall back to clicking
+  // the tab button if it isn't there for any reason.
+  if (scene.tab) {
+    if (typeof win.setTab === "function") {
+      // scroll:false so the demo doesn't snap to top; we drive scroll
+      // ourselves a tick later. updateHash:false so we don't churn URL
+      // history with every scene.
+      win.setTab(scene.tab, { scroll: false, updateHash: false });
+    } else {
+      const btn = doc.querySelector(`#tab-nav .tab[data-tab="${scene.tab}"]`);
+      if (btn) btn.click();
+    }
+  }
+
+  // Give the tab a tick to render before scrolling.
+  setTimeout(() => {
+    if (scene.scrollTo === "top") {
+      // Used by intro scenes (which are now served by the banner
+      // iframe, so this branch is just a safety net).
+      doc.body.classList.remove("reel-mode");
+      win.scrollTo({ top: 0, behavior: "auto" });
+    } else if (typeof scene.scrollTo === "string" && scene.scrollTo.startsWith("#")) {
+      // Single-widget viewport: hide every other section and centre
+      // this one. No actual scrolling — the CSS centres it in 100vh.
+      doc.body.classList.add("reel-mode");
+      doc.querySelectorAll("section.section--two-col.reel-current")
+         .forEach(s => s.classList.remove("reel-current"));
+      const el = doc.querySelector(scene.scrollTo);
+      if (el) {
+        el.classList.add("reel-current");
+        win.scrollTo({ top: 0, behavior: "auto" });
+        // Nudge widgets whose layout depends on a ResizeObserver /
+        // window resize — e.g. the §6 UMAP WebGL canvas — to re-fit
+        // against their newly-visible bounding rect.
+        win.dispatchEvent(new Event("resize"));
+      }
+    }
+
+  }, 60);
+}
+
+function startProgress(durMs) {
+  const dot = timeline.children[idx];
+  if (!dot) return;
+  progressStart = performance.now();
+  progressDur = durMs;
+  const inner = dot.firstElementChild || dot; // dot uses ::before; animate inline
+  // We can't drive ::before width via JS, so apply width to the dot itself
+  // through a CSS variable + a child element.
+  dot.style.setProperty("--p", "0%");
+  // Use a real child for fill so it animates.
+  if (!dot.querySelector(".fill")) {
+    dot.innerHTML = `<div class="fill" style="height:100%;width:0%;background:#1a1a1a"></div>`;
+  }
+  const fill = dot.querySelector(".fill");
+  clearInterval(progressTimer);
+  progressTimer = setInterval(() => {
+    if (paused) return;
+    const t = Math.min(1, (performance.now() - progressStart) / progressDur);
+    fill.style.width = (t * 100).toFixed(1) + "%";
+    if (t >= 1) {
+      clearInterval(progressTimer);
+      dot.classList.add("done");
+    }
+  }, 33);
+}
+
+function pauseProgress() {
+  paused = true;
+  clearTimeout(timer);
+}
+function resumeProgress() {
+  if (!paused) return;
+  paused = false;
+  // Resume the remaining slice of the current scene.
+  const elapsed = performance.now() - progressStart;
+  const remaining = Math.max(0, progressDur - elapsed);
+  timer = setTimeout(nextScene, remaining);
+}
+
+// Move to the next scene.
+function nextScene() {
+  clearTimeout(timer);
+  clearInterval(progressTimer);
+  idx++;
+  if (idx >= SCENES.length) { finish(); return; }
+  const s = SCENES[idx];
+
+  // Hide the "ready, press → " hint from the previous scene.
+  $("ready-hint").classList.remove("show");
+
+  // Swap iframe / drive scene state. Called from inside the slide
+  // transition so the content change is hidden off-screen.
+  const applyScene = () => {
+    if (s.useBanner) {
+      banner.classList.add("active");
+    } else {
+      banner.classList.remove("active");
+      driveIframe(s);
+    }
+  };
+
+  // First scene: no previous frame to slide out — just apply and
+  // start counting. Subsequent scenes use the up-then-from-below slide.
+  const onLanded = () => {
+    startProgress(s.duration);
+    if (autoAdvance) {
+      timer = setTimeout(nextScene, s.duration);
+    } else {
+      // Subtle "press → for next" hint, surfaces once the scene has
+      // had a moment to settle so the recorder knows it can advance.
+      setTimeout(() => {
+        if (!autoAdvance) $("ready-hint").classList.add("show");
+      }, s.duration);
+    }
+  };
+
+  if (idx === 0) {
+    applyScene();
+    // Give the iframe content one tick to lay out before timing starts.
+    setTimeout(onLanded, 200);
+  } else {
+    slideToNext(applyScene, onLanded);
+  }
+}
+
+function finish() {
+  // End of reel: leave the last scene on screen. User can hit restart.
+}
+
+function restart() {
+  clearTimeout(timer);
+  clearInterval(progressTimer);
+  // Reset all dots
+  Array.from(timeline.children).forEach(d => {
+    d.classList.remove("done");
+    d.innerHTML = "";
+  });
+  stageFrame.classList.remove("slide-out", "slide-prep", "slide-in");
+  idx = -1;
+  paused = false;
+  nextScene();
+}
+
+function skipForward() {
+  clearTimeout(timer);
+  clearInterval(progressTimer);
+  if (idx >= 0 && idx < timeline.children.length) {
+    timeline.children[idx].classList.add("done");
+  }
+  nextScene();
+}
+
+function skipBackward() {
+  clearTimeout(timer);
+  clearInterval(progressTimer);
+  idx = Math.max(-1, idx - 2);
+  nextScene();
+}
+
+// --- wiring ---------------------------------------------------
+buildTimeline();
+
+$("play").addEventListener("click", () => {
+  if (!started) {
+    started = true;
+    restart();
+    $("play").textContent = "⏸ pause";
+  } else if (paused) {
+    resumeProgress();
+    $("play").textContent = "⏸ pause";
+  } else {
+    pauseProgress();
+    $("play").textContent = "▶ resume";
+  }
+});
+
+$("restart").addEventListener("click", () => {
+  started = true;
+  $("play").textContent = "⏸ pause";
+  restart();
+});
+
+$("auto-toggle").addEventListener("change", (e) => {
+  autoAdvance = e.target.checked;
+  // If enabling mid-scene, kick off an auto-advance for the remainder
+  // of this scene's duration. (Cheap implementation: just nudge to the
+  // next scene immediately — fancier would resume from the elapsed
+  // ken-burns position.)
+  if (autoAdvance && idx >= 0) {
+    $("ready-hint").classList.remove("show");
+    clearTimeout(timer);
+    timer = setTimeout(skipForward, 600);
+  }
+});
+
+// Keyboard: H toggles chrome, arrows skip, space pauses, R restarts.
+function handleKey(e) {
+  if (e.key === "h" || e.key === "H") {
+    $("controls").classList.toggle("hidden");
+  } else if (e.key === "ArrowRight") {
+    e.preventDefault(); skipForward();
+  } else if (e.key === "ArrowLeft") {
+    e.preventDefault(); skipBackward();
+  } else if (e.key === " ") {
+    // Ignore space when the user is typing in an input/textarea —
+    // otherwise pressing space in a sandbox prompt would pause the
+    // reel instead of inserting a space.
+    const t = e.target;
+    const tag = t && t.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || (t && t.isContentEditable)) return;
+    e.preventDefault();
+    $("play").click();
+  } else if (e.key === "r" || e.key === "R") {
+    restart(); started = true;
+  }
+}
+document.addEventListener("keydown", handleKey);
+
+// Mirror the same handler inside each iframe so shortcuts keep working
+// after the user has clicked into the iframe (which moves keyboard
+// focus down into its document). Re-attached on every load() in case
+// the iframe navigates.
+function attachKeysToIframe(frame) {
+  frame.addEventListener("load", () => {
+    try {
+      frame.contentDocument?.addEventListener("keydown", handleKey);
+    } catch {}
+  });
+}
+attachKeysToIframe(iframe);
+attachKeysToIframe(banner);
+
+// Show the recording hint briefly.
+window.addEventListener("load", () => {
+  const t = $("toast");
+  t.classList.add("show");
+  setTimeout(() => t.classList.remove("show"), 3500);
+});
+
+// Auto-start once the iframe content has had a moment to settle.
+iframe.addEventListener("load", () => {
+  // Small delay so fonts, helix canvas, and tab JS are ready.
+  setTimeout(() => {
+    if (!started) {
+      started = true;
+      $("play").textContent = "⏸ pause";
+      restart();
+    }
+  }, 800);
+});
+</script>
+</body>
+</html>