Apply section--two-col to all Demo-tab sections (§1-§7)

§5 Folding has been running on section--two-col since the rebuild and
the layout works: narrative + takeaway live in a sticky 248px rail on
the left, demo claims the rest. With every demo card surrounded by a
much-smaller block of words, the visitor was constantly scrolling
between "what is this" copy and "what to interact with" demo content.
Folding it back into a single grid keeps both visible at once and
turns the takeaway into a live margin note instead of a postscript.

Sections converted:
§1 Autocomplete (id=completion)
§2 Variant effect (id=vep)
§3 Structure (id=track)
§4 Species (id=species)
§5 Folding (id=folding) — already done
§6 Embedding space (id=umap)
§7 Species tree (id=speciesTree)

For each: added section--two-col on <section>, wrapped section-num +
section-title + lede + takeaway in a new <div class="section-narrative">,
and removed the takeaway from its old position after the demo card.

Recipe-tab sections (§7-§10 tokenizer/loss/data/architecture) stay
single-column on purpose: their narratives are short, demos are
compact, the case for sticky narration is weak, and the page rhythm
already works.

The §5-specific comment about "2-column prototype" inside <section
id="folding"> is removed now that the pattern is the default.

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

demo.html

@@ -121,15 +121,27 @@
 <!-- ============================================================ -->
 <!-- §1 — GENE COMPLETION + ANNOTATION OVERLAY                    -->
 <!-- ============================================================ -->
-<section id="completion">
-  <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>
+<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">
@@ -198,30 +210,35 @@
       <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>
 </section>
 
 <!-- ============================================================ -->
 <!-- §2 — VEP: ref vs alt likelihood                              -->
 <!-- ============================================================ -->
-<section id="vep">
-  <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>
+<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">
@@ -248,33 +265,29 @@
       <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>
 </section>
 
 <!-- ============================================================ -->
 <!-- §3 — LIKELIHOOD TRACK ACROSS A REAL GENE                     -->
 <!-- ============================================================ -->
-<section id="track">
-  <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>
+<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">
@@ -302,26 +315,28 @@
       <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>
 </section>
 
 <!-- ============================================================ -->
 <!-- §4 — SAME GENE, DIFFERENT SPECIES                            -->
 <!-- ============================================================ -->
-<section id="species">
-  <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>
+<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">
@@ -353,23 +368,12 @@
       <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>
 </section>
 
 <!-- ============================================================ -->
 <!-- §5 — FOLDING (DNA → protein → 3D structure via ESMFold)      -->
 <!-- ============================================================ -->
 <section id="folding" class="section--two-col">
-  <!-- 2-column prototype: narrative (eyebrow + title + lede + takeaway)
-       sits in a sticky rail on the left, demo claims the full main
-       column on the right. Below 900px the rail unsticks and stacks
-       above the demo (see .section--two-col rules in the head). -->
   <div class="section-narrative">
     <div class="section-num">§5 · Folding</div>
     <div class="section-title">From sequence to structure</div>
@@ -462,16 +466,29 @@
 <!-- ============================================================ -->
 <!-- §6 — UMAP (interactive scatter)                              -->
 <!-- ============================================================ -->
-<section id="umap">
-  <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>
+<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">
@@ -505,33 +522,36 @@
       <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>
 </section>
 
 <!-- ============================================================ -->
 <!-- §7 — SPECIES TREE (Carbon-derived phylogeny)                  -->
 <!-- ============================================================ -->
-<section id="speciesTree">
-  <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>
+<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">
@@ -585,18 +605,6 @@
       <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>
 </section>
 
 </div>