Site map: line-art SVG icons + unified arrows in place of 01–04 numbers

Replace the mono "01/02/03/04" labels in the "What's inside" band with
small line-art SVG glyphs that match the rest of the page's editorial
visual language (1.2-stroke round, no fills, no frames — same DNA as the
skeletal molecule formulas and the cd-helix diagram in §1–§2):

• Intro — open book / primer
• DNA Lab — short double helix with 6 base-pair rungs
• Carbon Recipe — labelled flask with bubbles
• Sandbox — terminal with prompt + cursor

Each icon is monochrome (var(--ink) at rest, var(--green) on hover) via
currentColor. The down/right arrows are now the same SVG; the first
card rotates its glyph 90deg so the Intro card points down while the
other three point right, giving every card identical arrow weight and
geometry. Hover state preserved: arrow slides in its direction, label +
icon + arrow shift to green together.

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

assets/styles/section-intro.css

@@ -255,19 +255,30 @@
   margin-right: 0;
   padding-right: 0;
 }
-.intro-sitemap__num {
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.18em;
-  color: var(--ink-faint);
-  margin-bottom: 28px;
-  transition: color 0.18s ease;
+/* Icon — small free-floating line-art diagram above the label.
+   No tile, no background: aligned with the rest of the site's visual
+   language (skeletal molecule formulas, helix diagram), all rendered
+   as pure line-art with thin 1.2 strokes. The icon is fully monochrome:
+   ink at rest, green on hover (cascade via `currentColor`). */
+.intro-sitemap__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  margin-bottom: 20px;
+  color: var(--ink);
+  transition: color 0.22s ease;
+}
+.intro-sitemap__icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
 }
 .intro-sitemap__label {
   display: flex;
-  align-items: baseline;
-  justify-content: space-between;
+  align-items: center;
   gap: 12px;
   margin-bottom: 14px;
   font-family: "JetBrains Mono", ui-monospace, monospace;
@@ -278,13 +289,28 @@
   color: var(--ink);
   transition: color 0.18s ease;
 }
-.intro-sitemap__title { white-space: nowrap; }
+.intro-sitemap__title { white-space: nowrap; margin-right: auto; }
+/* Arrow — same SVG glyph for every card so the visual weight is identical
+   across the row. The first card (Intro → in-page primer) rotates 90° to
+   point down; nothing else differs. currentColor lets it inherit the
+   green / hover colour from the cascade above. */
 .intro-sitemap__arrow {
-  font-size: 18px;
-  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
   color: var(--green);
   transition: transform 0.18s ease, color 0.18s ease;
-  flex-shrink: 0;
+}
+.intro-sitemap__arrow svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.intro-sitemap__step:first-child .intro-sitemap__arrow svg {
+  transform: rotate(90deg);
 }
 .intro-sitemap__desc {
   margin: 0;
@@ -296,14 +322,16 @@
 }
 .intro-sitemap__link:hover,
 .intro-sitemap__link:focus-visible { outline: none; }
-.intro-sitemap__link:hover .intro-sitemap__num,
-.intro-sitemap__link:focus-visible .intro-sitemap__num,
 .intro-sitemap__link:hover .intro-sitemap__label,
 .intro-sitemap__link:focus-visible .intro-sitemap__label,
 .intro-sitemap__link:hover .intro-sitemap__arrow,
 .intro-sitemap__link:focus-visible .intro-sitemap__arrow {
   color: var(--green);
 }
+.intro-sitemap__link:hover .intro-sitemap__icon,
+.intro-sitemap__link:focus-visible .intro-sitemap__icon {
+  color: var(--green);
+}
 /* Move the arrow on the directional axis: → slides right, ↓ slides down.
    Each step's nth-child sets which one applies — the first card has the
    ↓ (in-page primer), the rest are cross-tab → links. */
@@ -331,7 +359,8 @@
     margin-right: 0;
     padding-right: 0;
   }
-  .intro-sitemap__num { margin-bottom: 18px; }
+  .intro-sitemap__label { gap: 10px; font-size: 17px; }
+  .intro-sitemap__icon { width: 40px; height: 40px; margin-bottom: 16px; }
 }
 @media (max-width: 600px) {
   .intro-sitemap__steps {
@@ -355,35 +384,119 @@
   .intro-sitemap__step:first-child .intro-sitemap__link {
     padding-top: 4px;
   }
-  .intro-sitemap__num { margin-bottom: 12px; }
+  .intro-sitemap__label { font-size: 18px; gap: 12px; }
+  .intro-sitemap__icon { width: 38px; height: 38px; margin-bottom: 14px; }
 }
 
-/* --- Primer header: visually delimits where the optional background
-       primer starts, beneath the guide cards. Styled like a small
-       section-title so it sits at the same typographic weight as the
-       headings inside each sub-row. */
+/* --- Primer header — centered editorial module
+       Reads as a proper standalone section between the site map above
+       and the §1 sub-rows below: centered axis, generous vertical
+       padding, a tiny green accent bar at the top to anchor the module
+       on the page without competing with the §-headings that follow.
+       Eyebrow + h2 + standfirst + kicker all share the same centerline. */
 .intro-primer-heading {
-  /* No top border / padding here: the .intro-sitemap band above already
-     provides a hairline bottom border + breathing room as the visual
-     separator between the site map and the primer below. */
-  margin: 24px 0 28px;
+  position: relative;
+  margin: 32px auto 40px;
+  padding: 40px 0 36px;
+  text-align: center;
 }
-.intro-primer-heading .section-num { margin-bottom: 8px; }
+/* Centred 2px green accent bar above the eyebrow. It's the only
+   structural element of the module: short enough to read as a mark
+   (40px wide), in --green so it ties into the page accent palette
+   without shouting. Replaces the previous left-rail rule since the
+   module is now axis-centered. */
+.intro-primer-heading::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40px;
+  height: 2px;
+  background: var(--green);
+}
+.intro-primer-heading .section-num { margin-bottom: 10px; }
 .intro-primer-heading h2 {
   font-family: "JetBrains Mono", monospace;
-  font-size: 22px; font-weight: 400;
+  font-size: 26px; font-weight: 400;
   letter-spacing: -0.3px;
   color: var(--ink);
-  margin-bottom: 12px;
+  margin-bottom: 20px;
 }
-.intro-primer-heading p {
-  font-size: 14px;
-  line-height: 1.55;
-  color: var(--ink-soft);
-  max-width: 760px;
+/* Standfirst block: centred editorial lede. The max-width keeps the
+   measure readable (~62 chars at 17px) so the centred axis doesn't
+   produce an awkwardly wide single line. */
+.intro-primer-heading .intro-primer-lede {
+  max-width: 640px;
+  margin: 0 auto;
+}
+.intro-primer-heading .intro-primer-lede p {
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.65;
+  color: var(--ink);
+}
+/* Kicker: the thesis line gets its own beat. Mono register echoes the
+   .section-num eyebrow at the top of the module, so the kicker reads
+   as the closing bookend of the editorial block. A short centred
+   hairline (via ::before) sits above it as the visual beat — no full
+   border across the column, which would fight with the centred axis. */
+.intro-primer-heading .intro-primer-lede .intro-primer-lede__kicker {
+  position: relative;
+  margin-top: 22px;
+  padding-top: 20px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  color: var(--ink);
+}
+.intro-primer-heading .intro-primer-lede .intro-primer-lede__kicker::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 1px;
+  background: var(--rule);
 }
 .intro-primer-heading em { color: var(--ink); font-style: normal; font-weight: 500; }
 
+/* Inline base tokens: A / C / G / T rendered as small filled chips
+   using the conventional sequence-viewer palette (mirrors BASE_FILL
+   in tokenizer.js so the same four colours read consistently across
+   the primer and the §3 tokenizer demo).
+   Sizing notes:
+   - font-size 0.78em (drops the 17px body text to ~13px inside the
+     chip) gives the chips their own typographic register without
+     making them shout louder than the surrounding prose.
+   - line-height 1 + symmetrical 1px/6px padding pins the chip box
+     to ~15px tall, well inside the parent's 28px line-box (17px ×
+     1.65), so the chips never push the line apart even when several
+     of them sit on the same line.
+   - min-width 1.4em keeps the four chips optically the same width
+     even though M-width letters differ in mono (A/G/T are wider
+     than C). */
+.intro-primer-heading .intro-base {
+  display: inline-block;
+  min-width: 1.4em;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.78em;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  text-align: center;
+  color: #fff;
+  vertical-align: 1px;
+}
+.intro-primer-heading .intro-base[data-letter="A"] { background: #15803d; }
+.intro-primer-heading .intro-base[data-letter="C"] { background: #0369a1; }
+.intro-primer-heading .intro-base[data-letter="G"] { background: #a16207; }
+.intro-primer-heading .intro-base[data-letter="T"] { background: #be185d; }
+
 /* --- One sub-row per central-dogma level. Each one wraps its narrative
        + visual in section--two-col, which we get "for free" from the
        demo's existing layout system. The padding + bottom border just

demo.html

@@ -496,40 +496,96 @@
       <ol class="intro-sitemap__steps">
         <li class="intro-sitemap__step">
           <a class="intro-sitemap__link" href="#primer">
-            <span class="intro-sitemap__num">01</span>
+            <span class="intro-sitemap__icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 5.5h6.5a2.5 2.5 0 0 1 2.5 2.5V20"/>
+                <path d="M21 5.5h-6.5A2.5 2.5 0 0 0 12 8"/>
+                <path d="M3 5.5V18a1 1 0 0 0 1 1h6"/>
+                <path d="M21 5.5V18a1 1 0 0 1-1 1h-6"/>
+                <path d="M6 9h3.5"/>
+                <path d="M6 12h3.5"/>
+                <path d="M14.5 9H18"/>
+                <path d="M14.5 12H18"/>
+              </svg>
+            </span>
             <span class="intro-sitemap__label">
               <span class="intro-sitemap__title">Intro</span>
-              <span class="intro-sitemap__arrow" aria-hidden="true">↓</span>
+              <span class="intro-sitemap__arrow" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M5 12h14"/>
+                  <path d="M13 6l6 6-6 6"/>
+                </svg>
+              </span>
             </span>
             <span class="intro-sitemap__desc">A short primer on the basics of genetics — the alphabet Carbon reads.</span>
           </a>
         </li>
         <li class="intro-sitemap__step">
           <a class="intro-sitemap__link" href="#dna-lab">
-            <span class="intro-sitemap__num">02</span>
+            <span class="intro-sitemap__icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M8 3c0 4 8 4.5 8 9s-8 5-8 9"/>
+                <path d="M16 3c0 4-8 4.5-8 9s8 5 8 9"/>
+                <path d="M9 5h6"/>
+                <path d="M10 7.5h4"/>
+                <path d="M8.5 10.5h7"/>
+                <path d="M8.5 13.5h7"/>
+                <path d="M10 16.5h4"/>
+                <path d="M9 19h6"/>
+              </svg>
+            </span>
             <span class="intro-sitemap__label">
               <span class="intro-sitemap__title">DNA Lab</span>
-              <span class="intro-sitemap__arrow" aria-hidden="true">→</span>
+              <span class="intro-sitemap__arrow" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M5 12h14"/>
+                  <path d="M13 6l6 6-6 6"/>
+                </svg>
+              </span>
             </span>
             <span class="intro-sitemap__desc">Live interactions with the 3B checkpoint: explore what the model can do.</span>
           </a>
         </li>
         <li class="intro-sitemap__step">
           <a class="intro-sitemap__link" href="#recipe">
-            <span class="intro-sitemap__num">03</span>
+            <span class="intro-sitemap__icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 3h6"/>
+                <path d="M10 3v6.4L4.7 18.5a1.5 1.5 0 0 0 1.3 2.3h12a1.5 1.5 0 0 0 1.3-2.3L14 9.4V3"/>
+                <path d="M7.3 14h9.4"/>
+                <circle cx="10" cy="17" r="0.9" fill="currentColor" stroke="none"/>
+                <circle cx="13.6" cy="17.8" r="0.9" fill="currentColor" stroke="none"/>
+              </svg>
+            </span>
             <span class="intro-sitemap__label">
               <span class="intro-sitemap__title">Carbon Recipe</span>
-              <span class="intro-sitemap__arrow" aria-hidden="true">→</span>
+              <span class="intro-sitemap__arrow" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M5 12h14"/>
+                  <path d="M13 6l6 6-6 6"/>
+                </svg>
+              </span>
             </span>
             <span class="intro-sitemap__desc">How Carbon was trained: tokenizer, loss, dataset, and results.</span>
           </a>
         </li>
         <li class="intro-sitemap__step">
           <a class="intro-sitemap__link" href="#sandbox">
-            <span class="intro-sitemap__num">04</span>
+            <span class="intro-sitemap__icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="4.5" width="18" height="15" rx="2"/>
+                <path d="M7 10l3 2-3 2"/>
+                <path d="M13 14h4"/>
+              </svg>
+            </span>
             <span class="intro-sitemap__label">
               <span class="intro-sitemap__title">Sandbox</span>
-              <span class="intro-sitemap__arrow" aria-hidden="true">→</span>
+              <span class="intro-sitemap__arrow" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M5 12h14"/>
+                  <path d="M13 6l6 6-6 6"/>
+                </svg>
+              </span>
             </span>
             <span class="intro-sitemap__desc">Run Carbon on your own DNA sequences, end-to-end.</span>
           </a>
@@ -547,12 +603,35 @@
     <div class="intro-primer-heading" id="primer">
       <div class="section-num">Background</div>
       <h2>What Carbon reads</h2>
-      <p>
-        The model is fed long strings of four letters: A, C, G, T. Those letters are the
-        bases of DNA. Stretches of it are genes, which cells copy into RNA and translate
-        into proteins. A century of molecular biology has been spent working out how.
-        Carbon is given only the letters. What they mean is what it has to learn.
-      </p>
+      <!-- Standfirst: editorial lede framed by a green left-rule (same motif
+           as .takeaway in layout.css). The four bases are surfaced as mono
+           tokens using the conventional sequence-viewer palette shared with
+           tokenizer.js (A green / C blue / G amber / T pink) so the primer
+           opens with the same visual vocabulary used throughout the demo.
+           The final sentence is isolated as a kicker — it carries the thesis
+           of the whole tab ("what they mean is what it has to learn") and
+           deserves its own visual beat. -->
+      <div class="intro-primer-lede">
+        <p>
+          <!-- data-letter (not data-base): intro.js auto-injects the
+               skeletal-formula molecule SVGs into every [data-base]
+               element it finds inside the intro root. We just want
+               coloured mono glyphs here, not the full molecule
+               diagrams that live in the §1 demo card below. -->
+          The model is fed long strings of four letters:
+          <span class="intro-base" data-letter="A">A</span>,
+          <span class="intro-base" data-letter="C">C</span>,
+          <span class="intro-base" data-letter="G">G</span>,
+          <span class="intro-base" data-letter="T">T</span>.
+          Those letters are the bases of <em>DNA</em>. Stretches of it are <em>genes</em>,
+          which cells copy into <em>RNA</em> and translate into <em>proteins</em>.
+          A century of molecular biology has been spent working out how.
+          Carbon is given only the letters.
+        </p>
+        <p class="intro-primer-lede__kicker">
+          What they mean is what it has to learn.
+        </p>
+      </div>
     </div>
 
     <!-- §0.1 · BASES -->