Integrate editorial banner as hero, adopt warm paper palette

The new banner (animated DNA helix + CARBON-0 wordmark + spec line)
replaces the per-tab logo+title hero blocks. Page palette shifts from
cool gray (#fafafa / #1a1a1a / #1a8a3a / #d83a2a) to the banner's
warm paper tone (#f7f5ee / #1f1f1d / #317f3f / #bc2e25) — including
the corresponding RGB tuples used in the JS logprob coloring so the
sequence-rendering colors stay aligned with the page chrome.

Banner is scoped under .carbon-banner with cb-* prefixed selectors
and SVG IDs to avoid collisions; aspect-ratio 2048:620 preserved.
Double frame removed (kept the outer container border, dropped the
inner stroke rect). Per-tab heroes collapsed into a single lede
paragraph since the banner already provides identity.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

demo.html

@@ -11,7 +11,7 @@
   body {
     font-family: "Inter", "Helvetica Neue", sans-serif;
     font-size: 13px; font-weight: 300; line-height: 1.7;
-    color: #1a1a1a; background: #fafafa;
+    color: #1f1f1d; background: #f7f5ee;
     padding: 0;
   }
   .container { max-width: 760px; margin: 0 auto; padding: 48px 32px 96px; }
@@ -22,7 +22,7 @@
     border-bottom: 1px solid #ccc;       /* separator line under the tab strip */
     padding: 24px 32px 0;                /* no bottom padding — tabs sit on the line */
     margin-bottom: 0;
-    background: #fafafa;
+    background: #f7f5ee;
     position: sticky; top: 0; z-index: 10;
   }
   .header-inner {
@@ -58,10 +58,10 @@
     cursor: pointer; transition: background 0.15s, color 0.15s;
   }
   nav#tab-nav .tab + .tab { margin-left: -1px; }   /* shared border between adjacent tabs */
-  nav#tab-nav .tab:hover { color: #1a1a1a; background: #f6f6f6; }
+  nav#tab-nav .tab:hover { color: #1f1f1d; background: #f6f6f6; }
   nav#tab-nav .tab.active {
-    color: #1a1a1a; background: #fafafa;
-    border-bottom-color: #fafafa;                  /* hides bottom border so tab merges into content */
+    color: #1f1f1d; background: #f7f5ee;
+    border-bottom-color: #f7f5ee;                  /* hides bottom border so tab merges into content */
     z-index: 2;
   }
 
@@ -69,33 +69,89 @@
   .tab-panel { display: none; }
   .tab-panel.active { display: block; }
 
-  /* --- Hero --- */
-  .hero {
-    padding: 64px 32px 48px;
-    border-bottom: 1px solid #eee;
-  }
-  .hero-inner {
-    max-width: 1080px; margin: 0 auto;
-    display: flex; align-items: center; gap: 48px;
-    flex-wrap: wrap;
-  }
-  .hero-logo {
+  /* ====================================================================== */
+  /* Carbon banner — editorial hero (scoped to .carbon-banner)              */
+  /* ====================================================================== */
+  .carbon-banner {
+    --paper: #f7f5ee;
+    --ink: #1f1f1d;
+    --muted: #8c918b;
+    --hairline: #b9bcb7;
+    --green: #317f3f;
+    --red: #bc2e25;
+
     display: block;
-    flex: 0 0 auto;
-    max-width: 320px; width: 38%; min-width: 220px;
-    height: auto;
-    mix-blend-mode: multiply;
-  }
-  .hero-text { flex: 1 1 320px; min-width: 280px; }
-  .hero h2 {
-    font-family: "JetBrains Mono", monospace;
-    font-size: 26px; font-weight: 300; letter-spacing: -0.5px;
-    margin: 0 0 16px;
-    line-height: 1.3;
-  }
-  .hero h2 em { font-style: normal; color: #1a8a3a; font-weight: 400; }
-  .hero p {
-    color: #666; font-size: 14px; margin: 0;
+    margin: 28px auto;
+    width: min(1280px, calc(100vw - 32px));
+    aspect-ratio: 2048 / 620;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid #8f928d;
+    background:
+      radial-gradient(circle at 22% 32%, rgba(0, 0, 0, 0.035), transparent 1px),
+      radial-gradient(circle at 78% 64%, rgba(0, 0, 0, 0.03), transparent 1px),
+      linear-gradient(90deg, rgba(49, 127, 63, 0.025), transparent 34%, transparent 66%, rgba(49, 127, 63, 0.025)),
+      var(--paper);
+    background-size: 7px 7px, 11px 11px, auto, auto;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  }
+  .carbon-banner .carbon-art { width: 100%; height: 100%; display: block; }
+  .carbon-banner .cb-mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+  }
+  .carbon-banner .cb-rule { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
+  .carbon-banner .cb-label { fill: var(--ink); font-size: 17px; letter-spacing: 0.24em; }
+  .carbon-banner .cb-label-green { fill: var(--green); }
+  .carbon-banner .cb-label-red   { fill: var(--red); }
+  .carbon-banner .cb-carbon-word {
+    fill: var(--ink);
+    font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
+    font-size: 255px;
+    font-stretch: condensed;
+    font-weight: 900;
+    letter-spacing: -0.02em;
+  }
+  .carbon-banner .cb-paper-grain { mix-blend-mode: multiply; opacity: 0.62; pointer-events: none; }
+  .carbon-banner .cb-helix-shadow { fill: #aeb5ad; opacity: 0.15; }
+  .carbon-banner .cb-helix-body {
+    fill: #e4e5dc;
+    stroke: rgba(49, 127, 63, 0.14);
+    stroke-width: 0.8;
+  }
+  .carbon-banner .cb-helix-edge {
+    fill: none; stroke: #2d332e; stroke-width: 1.15;
+    stroke-linecap: round; stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+  }
+  .carbon-banner .cb-helix-texture { fill: url(#cb-helixGrain); opacity: 0.46; }
+  .carbon-banner .cb-base-pair {
+    fill: none; stroke: var(--green); stroke-width: 1.35;
+    stroke-linecap: round; vector-effect: non-scaling-stroke;
+  }
+  .carbon-banner .cb-base-letter-node {
+    will-change: transform, opacity;
+    transform-box: fill-box; transform-origin: 0 0;
+  }
+  .carbon-banner .cb-base-glyph {
+    fill: none; stroke: var(--green); stroke-width: 1.8;
+    stroke-linecap: square; stroke-linejoin: miter;
+    vector-effect: non-scaling-stroke;
+  }
+  .carbon-banner .cb-tiny-bars rect { fill: var(--green); }
+  @media (max-width: 760px) {
+    .carbon-banner { width: calc(100vw - 20px); margin: 16px auto; }
+  }
+
+  /* --- Tab lede (short narrative paragraph below the banner) --- */
+  .tab-lede {
+    max-width: 1080px; margin: 4px auto 0;
+    padding: 14px 32px 0;
+  }
+  .tab-lede p {
+    color: #555; font-size: 14px; line-height: 1.7;
+    max-width: 760px; margin: 0;
   }
 
   /* --- Sections --- */
@@ -111,11 +167,11 @@
     padding: 80px 32px 48px;
     border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
-    background: linear-gradient(to bottom, rgba(26,138,58,0.04), transparent);
+    background: linear-gradient(to bottom, rgba(49,127,63,0.04), transparent);
   }
   .part-divider .part-eyebrow {
     font-family: "JetBrains Mono", monospace;
-    font-size: 10px; color: #1a8a3a;
+    font-size: 10px; color: #317f3f;
     letter-spacing: 4px; text-transform: uppercase;
     margin-bottom: 6px;
   }
@@ -130,7 +186,7 @@
 
   .section-num {
     font-family: "JetBrains Mono", monospace;
-    font-size: 10px; color: #1a8a3a;
+    font-size: 10px; color: #317f3f;
     letter-spacing: 2px; text-transform: uppercase;
     margin-bottom: 8px;
   }
@@ -138,7 +194,7 @@
     font-family: "JetBrains Mono", monospace;
     font-size: 22px; font-weight: 400; letter-spacing: -0.3px;
     margin-bottom: 24px;
-    color: #1a1a1a;
+    color: #1f1f1d;
   }
   .lede {
     color: #444; font-size: 14px; margin-bottom: 32px;
@@ -146,14 +202,14 @@
   }
   .takeaway {
     margin-top: 32px;
-    padding: 16px 20px; border-left: 3px solid #1a8a3a;
+    padding: 16px 20px; border-left: 3px solid #317f3f;
     background: #f4f8f4; color: #333;
     font-size: 13px; max-width: 640px;
   }
   .takeaway strong {
     font-family: "JetBrains Mono", monospace;
     font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
-    font-size: 10px; color: #1a8a3a; display: block; margin-bottom: 4px;
+    font-size: 10px; color: #317f3f; display: block; margin-bottom: 4px;
   }
 
   /* --- Demo card (the interactive box inside each section) --- */
@@ -178,12 +234,12 @@
     text-transform: uppercase; letter-spacing: 1.5px;
     transition: all 0.15s;
   }
-  button.action:hover, .pill:hover { border-color: #888; color: #1a1a1a; }
-  button.action.primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
+  button.action:hover, .pill:hover { border-color: #888; color: #1f1f1d; }
+  button.action.primary { background: #1f1f1d; color: #fff; border-color: #1f1f1d; }
   button.action.primary:hover { background: #000; }
   button.action:disabled { opacity: 0.4; cursor: not-allowed; }
   button.action.primary:disabled { background: #888; border-color: #888; }
-  .pill.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
+  .pill.active { background: #1f1f1d; color: #fff; border-color: #1f1f1d; }
   .pills { display: inline-flex; gap: 4px; }
   .pills .pill { font-size: 9px; padding: 4px 8px; }
 
@@ -207,15 +263,15 @@
     margin: 4px 0 12px;
     min-height: 14px;
   }
-  .gene-info strong { color: #1a1a1a; font-weight: 500; }
+  .gene-info strong { color: #1f1f1d; font-weight: 500; }
   .gene-track {
     width: 100%; height: 28px; display: block;
     margin: 4px 0 8px;
   }
-  .gene-track .exon { fill: #1a8a3a; }
+  .gene-track .exon { fill: #317f3f; }
   .gene-track .intron { stroke: #aaa; stroke-width: 1; }
-  .gene-track .playhead { stroke: #d83a2a; stroke-width: 2; }
-  .gene-track .gen-region { fill: #d83a2a; opacity: 0.10; }
+  .gene-track .playhead { stroke: #bc2e25; stroke-width: 2; }
+  .gene-track .gen-region { fill: #bc2e25; opacity: 0.10; }
   .gene-track text { font-family: "JetBrains Mono", monospace; font-size: 9px; fill: #888; }
   .track-axis-label {
     font-family: "JetBrains Mono", monospace; font-size: 9px;
@@ -238,11 +294,11 @@
   }
   .stat-pair { display: flex; flex-direction: column; gap: 2px; }
   .stat-pair-label { font-size: 9px; color: #999; text-transform: uppercase; letter-spacing: 1.2px; }
-  .stat-pair-val { color: #1a1a1a; font-variant-numeric: tabular-nums; }
+  .stat-pair-val { color: #1f1f1d; font-variant-numeric: tabular-nums; }
   .stat-pair-val.muted { color: #aaa; }
 
   /* Mismatch highlighting in reference row */
-  .ref-mismatch { background: rgba(216, 58, 42, 0.18); color: #b00020; }
+  .ref-mismatch { background: rgba(188, 46, 37, 0.18); color: #b00020; }
   .ref-match { color: #999; }
 
   /* Model section responsive overrides */
@@ -277,19 +333,19 @@
     background: #fff; color: #666; cursor: pointer;
     transition: all 0.15s;
   }
-  #panel-sandbox .sb-ex-btn:hover { border-color: #888; color: #1a1a1a; }
+  #panel-sandbox .sb-ex-btn:hover { border-color: #888; color: #1f1f1d; }
   #panel-sandbox .sb-ex-btn .sb-ex-label {
     color: #aaa; font-size: 9px; margin-left: 6px; text-transform: uppercase;
     letter-spacing: 0.5px;
   }
   #panel-sandbox .sb-prompt-area, #panel-sandbox input[type=number] {
     font-family: "JetBrains Mono", monospace;
-    font-size: 12px; font-weight: 300; color: #1a1a1a;
+    font-size: 12px; font-weight: 300; color: #1f1f1d;
     background: #fff; border: 1px solid #ddd; border-radius: 3px;
     padding: 8px 12px; outline: none; transition: border 0.15s;
   }
   #panel-sandbox .sb-prompt-area:focus,
-  #panel-sandbox input[type=number]:focus { border-color: #1a1a1a; }
+  #panel-sandbox input[type=number]:focus { border-color: #1f1f1d; }
   #panel-sandbox .sb-prompt-area {
     width: 100%; resize: none; overflow: hidden;
     letter-spacing: 1px; line-height: 1.7;
@@ -323,8 +379,8 @@
   }
   #panel-sandbox .sb-mode-btn:first-child { border-radius: 3px 0 0 3px; }
   #panel-sandbox .sb-mode-btn:last-child { border-right: 1px solid #ccc; border-radius: 0 3px 3px 0; }
-  #panel-sandbox .sb-mode-btn:hover { color: #1a1a1a; }
-  #panel-sandbox .sb-mode-btn.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
+  #panel-sandbox .sb-mode-btn:hover { color: #1f1f1d; }
+  #panel-sandbox .sb-mode-btn.active { background: #1f1f1d; color: #fff; border-color: #1f1f1d; }
 
   #panel-sandbox .sb-button-row { margin-left: auto; display: flex; gap: 6px; }
 
@@ -339,7 +395,7 @@
     display: inline-block; width: 6px; height: 6px; border-radius: 50%;
     background: #888; margin-right: 6px; vertical-align: middle;
   }
-  #panel-sandbox .sb-status.streaming .dot { background: #1a8a3a; animation: pulse 1.2s ease-in-out infinite; }
+  #panel-sandbox .sb-status.streaming .dot { background: #317f3f; animation: pulse 1.2s ease-in-out infinite; }
 
   #panel-sandbox .sb-output-row {
     display: grid;
@@ -361,9 +417,9 @@
     text-transform: uppercase; letter-spacing: 1px;
     transition: all 0.15s;
   }
-  #panel-sandbox .sb-copy-btn:hover { border-color: #888; color: #1a1a1a; }
+  #panel-sandbox .sb-copy-btn:hover { border-color: #888; color: #1f1f1d; }
   #panel-sandbox .sb-copy-btn:disabled { opacity: 0; pointer-events: none; }
-  #panel-sandbox .sb-copy-btn.copied { background: #1a8a3a; color: #fff; border-color: #1a8a3a; }
+  #panel-sandbox .sb-copy-btn.copied { background: #317f3f; color: #fff; border-color: #317f3f; }
 
   #panel-sandbox .sb-seq-block {
     font-family: "JetBrains Mono", monospace;
@@ -379,7 +435,7 @@
   #panel-sandbox .sb-seq-line.tail::after {
     content: "";
     display: inline-block; width: 7px; height: 14px;
-    background: #1a1a1a; vertical-align: text-bottom;
+    background: #1f1f1d; vertical-align: text-bottom;
     margin-left: 2px;
     animation: blink 1s step-end infinite;
   }
@@ -401,7 +457,7 @@
     text-transform: uppercase; letter-spacing: 1.2px; font-weight: 300;
   }
   #panel-sandbox .sb-stat-value {
-    font-size: 12px; font-weight: 400; color: #1a1a1a;
+    font-size: 12px; font-weight: 400; color: #1f1f1d;
     font-variant-numeric: tabular-nums;
   }
   #panel-sandbox .sb-stat-value .sb-unit { font-size: 9px; color: #999; margin-left: 3px; font-weight: 300; }
@@ -418,7 +474,7 @@
   #panel-sandbox .sb-legend.show { display: block; }
   #panel-sandbox .sb-legend-bar {
     height: 6px; margin: 4px 0 3px;
-    background: linear-gradient(to right, #d83a2a, #888, #1a1a1a);
+    background: linear-gradient(to right, #bc2e25, #888, #1f1f1d);
     border-radius: 1px;
   }
   #panel-sandbox .sb-legend-row { display: flex; justify-content: space-between; }
@@ -437,8 +493,8 @@
     text-align: center;
   }
   .vep-window .ctx { color: #888; }
-  .vep-window .var-ref { background: rgba(26, 138, 58, 0.18); color: #1a6a2a; padding: 0 4px; border-radius: 2px; font-weight: 500; }
-  .vep-window .var-alt { background: rgba(216, 58, 42, 0.20); color: #b00020; padding: 0 4px; border-radius: 2px; font-weight: 500; }
+  .vep-window .var-ref { background: rgba(49, 127, 63, 0.18); color: #215a2a; padding: 0 4px; border-radius: 2px; font-weight: 500; }
+  .vep-window .var-alt { background: rgba(188, 46, 37, 0.20); color: #b00020; padding: 0 4px; border-radius: 2px; font-weight: 500; }
   .vep-result {
     display: grid; grid-template-columns: 100px 1fr 80px;
     gap: 8px 12px; align-items: center;
@@ -447,14 +503,14 @@
   .vep-result .row-label { color: #666; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; }
   .vep-result .row-bar { height: 14px; background: #f0f0f0; border-radius: 2px; position: relative; overflow: hidden; }
   .vep-result .row-bar .fill { position: absolute; top: 0; bottom: 0; left: 0; }
-  .vep-result .row-bar.ref .fill { background: #1a8a3a; }
-  .vep-result .row-bar.alt .fill { background: #d83a2a; }
-  .vep-result .row-val { text-align: right; color: #1a1a1a; font-variant-numeric: tabular-nums; }
+  .vep-result .row-bar.ref .fill { background: #317f3f; }
+  .vep-result .row-bar.alt .fill { background: #bc2e25; }
+  .vep-result .row-val { text-align: right; color: #1f1f1d; font-variant-numeric: tabular-nums; }
   .vep-result .row-delta { font-weight: 500; }
 
-  .pill.sig-Pathogenic { border-left: 3px solid #d83a2a; }
+  .pill.sig-Pathogenic { border-left: 3px solid #bc2e25; }
   .pill.sig-Risk       { border-left: 3px solid #e69500; }
-  .pill.sig-Benign     { border-left: 3px solid #1a8a3a; }
+  .pill.sig-Benign     { border-left: 3px solid #317f3f; }
 
   /* --- Species rows (§4) --- */
   .species-row {
@@ -471,7 +527,7 @@
     font-size: 11px;
   }
   .species-name {
-    font-weight: 500; color: #1a1a1a;
+    font-weight: 500; color: #1f1f1d;
     text-transform: uppercase; letter-spacing: 1px; font-size: 11px;
     border-left: 4px solid;
     padding-left: 8px;
@@ -481,11 +537,11 @@
     text-align: right; font-family: "JetBrains Mono", monospace;
     font-size: 11px; color: #666;
   }
-  .species-stats .stat-id { font-size: 16px; color: #1a1a1a; font-weight: 500; font-variant-numeric: tabular-nums; }
+  .species-stats .stat-id { font-size: 16px; color: #1f1f1d; font-weight: 500; font-variant-numeric: tabular-nums; }
   .species-stats .stat-sub { font-size: 10px; color: #999; margin-top: 2px; }
   .species-seq {
     font-family: "JetBrains Mono", monospace;
-    background: #fafafa; border: 1px solid #eee;
+    background: #f7f5ee; border: 1px solid #eee;
     padding: 8px 12px; overflow-x: auto;
     white-space: pre; font-size: 11px;
     line-height: 1.7; letter-spacing: 0.5px;
@@ -501,7 +557,7 @@
     border-top: 1px solid #eee;
   }
   footer a { color: #666; text-decoration: none; }
-  footer a:hover { color: #1a1a1a; }
+  footer a:hover { color: #1f1f1d; }
 
   /* --- Sequence display (shared with sandbox) --- */
   .seq-block {
@@ -526,7 +582,7 @@
     display: inline-block; width: 6px; height: 6px; border-radius: 50%;
     background: #888;
   }
-  .status.streaming .dot { background: #1a8a3a; animation: pulse 1.2s ease-in-out infinite; }
+  .status.streaming .dot { background: #317f3f; animation: pulse 1.2s ease-in-out infinite; }
   .status.error { color: #b00020; }
   @keyframes pulse { 50% { opacity: 0.3; } }
 
@@ -551,16 +607,73 @@
   </div>
 </header>
 
+<section class="carbon-banner" aria-label="Carbon DNA model banner">
+  <svg class="carbon-art" viewBox="0 0 2048 620" role="img" aria-labelledby="cb-carbonTitle cb-carbonDesc">
+    <title id="cb-carbonTitle">Carbon genomic language model banner</title>
+    <desc id="cb-carbonDesc">A technical editorial banner with the CARBON-0 model name and an adjacent animated DNA strand.</desc>
+
+    <defs>
+      <pattern id="cb-paperDot" width="12" height="12" patternUnits="userSpaceOnUse">
+        <circle cx="2" cy="2" r="0.8" fill="#1f1f1d" opacity="0.045" />
+        <circle cx="9" cy="8" r="0.55" fill="#317f3f" opacity="0.035" />
+      </pattern>
+      <pattern id="cb-helixGrain" width="9" height="9" patternUnits="userSpaceOnUse">
+        <rect width="9" height="9" fill="transparent" />
+        <circle cx="1.4" cy="1.7" r="0.7" fill="#263128" opacity="0.34" />
+        <circle cx="6.2" cy="5.5" r="0.45" fill="#263128" opacity="0.24" />
+        <line x1="3" y1="8" x2="7" y2="8" stroke="#263128" stroke-width="0.45" opacity="0.18" />
+      </pattern>
+    </defs>
+
+    <rect class="cb-paper-grain" x="25" y="25" width="1998" height="570" fill="url(#cb-paperDot)" />
+
+    <g class="cb-mono">
+      <text class="cb-label" x="63" y="76">CARBON-0</text>
+      <text class="cb-label cb-label-green" x="240" y="76">3B Autoregressive Genomic Foundation Model</text>
+      <text class="cb-label" x="1162" y="76">49,152 BP Context</text>
+      <circle cx="1456" cy="70" r="4" fill="#317f3f" />
+      <text class="cb-label" x="1490" y="76">6-Mer Tokenizer</text>
+      <circle cx="1760" cy="70" r="4" fill="#317f3f" />
+      <text class="cb-label" x="1795" y="76">1T Train Tokens</text>
+    </g>
+
+    <line class="cb-rule" x1="40" y1="110" x2="2010" y2="110" />
+
+    <g class="cb-mono">
+      <text class="cb-carbon-word" x="60" y="405" textLength="795" lengthAdjust="spacingAndGlyphs">CARBON-0</text>
+    </g>
+
+    <g id="cb-helix" aria-hidden="true">
+      <g id="cb-strandBackLayer"></g>
+      <g id="cb-rungs"></g>
+      <g id="cb-baseLetters" class="cb-mono"></g>
+      <g id="cb-strandFrontLayer"></g>
+    </g>
+
+    <line class="cb-rule" x1="40" y1="545" x2="2010" y2="545" />
+    <g class="cb-mono">
+      <text class="cb-label" x="64" y="578">Carbon Labs</text>
+      <line x1="240" y1="570" x2="266" y2="570" stroke="#317f3f" stroke-width="2" />
+      <text class="cb-label" x="294" y="578">Building Foundational Models For Genomic Sequences</text>
+      <text class="cb-label" x="1378" y="578">CLB-2026-05-11</text>
+      <text class="cb-label" x="1638" y="578">DNA-LM-49K</text>
+      <text class="cb-label" x="1784" y="578">CARBON-0 v0</text>
+      <g class="cb-tiny-bars" transform="translate(1956 562)">
+        <rect x="0" y="0" width="3" height="20" />
+        <rect x="8" y="0" width="3" height="20" />
+        <rect x="16" y="0" width="3" height="20" />
+        <rect x="24" y="0" width="3" height="20" />
+        <rect x="32" y="0" width="3" height="20" />
+        <rect x="40" y="0" width="3" height="20" />
+      </g>
+    </g>
+  </svg>
+</section>
+
 <div class="tab-panel active" id="panel-demo" data-tab="demo">
 
-<div class="hero">
-  <div class="hero-inner">
-    <img src="/img/logo.png" alt="Carbon" class="hero-logo">
-    <div class="hero-text">
-      <h2>A model that learned <em>biology</em> from raw DNA — no labels, no annotations, just sequence.</h2>
-      <p>Carbon is a 3B-parameter autoregressive model trained on a trillion bases of genomic DNA. We didn't tell it what an exon is. We didn't tell it which mutations are pathogenic. We didn't tell it how genes differ between species. Below, four ways to see what it picked up anyway.</p>
-    </div>
-  </div>
+<div class="tab-lede">
+  <p>We didn't tell Carbon what an exon is. We didn't tell it which mutations are pathogenic. We didn't tell it how genes differ between species. Four ways to see what it picked up anyway.</p>
 </div>
 
 <div class="container wide">
@@ -604,10 +717,10 @@
     <div class="gene-info" id="d1-info">loading genes…</div>
     <svg class="gene-track" id="d1-track" viewBox="0 0 1000 28" preserveAspectRatio="none"></svg>
     <div class="track-axis-label">
-      <span><span class="legend-swatch" style="background:#1a8a3a"></span>exon</span>
+      <span><span class="legend-swatch" style="background:#317f3f"></span>exon</span>
       <span><span class="legend-swatch" style="background:#aaa;height:2px;border-radius:0"></span>intron</span>
-      <span><span class="legend-swatch" style="background:rgba(216,58,42,0.20)"></span>generated region</span>
-      <span style="color:#d83a2a">│ prompt end</span>
+      <span><span class="legend-swatch" style="background:rgba(188,46,37,0.20)"></span>generated region</span>
+      <span style="color:#bc2e25">│ prompt end</span>
     </div>
 
     <div class="seq-label">model output  ·  <span style="color:#aaa">prompt in gray</span>  ·  <span>generated colored by logprob (red=uncertain)</span></div>
@@ -666,9 +779,9 @@
     <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 class="track-axis-label">
-      <span><span class="legend-swatch" style="background:#d83a2a;border-radius:50%"></span>pathogenic (curated)</span>
+      <span><span class="legend-swatch" style="background:#bc2e25;border-radius:50%"></span>pathogenic (curated)</span>
       <span><span class="legend-swatch" style="background:#e69500;border-radius:50%"></span>risk</span>
-      <span><span class="legend-swatch" style="background:#1a8a3a;border-radius:50%"></span>benign</span>
+      <span><span class="legend-swatch" style="background:#317f3f;border-radius:50%"></span>benign</span>
       <span style="color:#888">dot = ClinVar label · bar = model signal</span>
     </div>
   </div>
@@ -683,7 +796,7 @@
     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:#1a8a3a">dna-vep-explainer</a>).
+    <a href="https://huggingface.co/spaces/hf-carbon/dna-vep-explainer" style="color:#317f3f">dna-vep-explainer</a>).
   </div>
 </section>
 
@@ -713,7 +826,7 @@
     <svg class="gene-track" id="d3-track" viewBox="0 0 1000 28" preserveAspectRatio="none"></svg>
     <svg id="d3-chart" style="display:block;width:100%;height:140px;background:#fff;border:1px solid #eee;margin-top:6px" preserveAspectRatio="none" viewBox="0 0 1000 140"></svg>
     <div class="track-axis-label">
-      <span><span class="legend-swatch" style="background:#1a8a3a"></span>exon (shaded)</span>
+      <span><span class="legend-swatch" style="background:#317f3f"></span>exon (shaded)</span>
       <span style="color:#aaa">y-axis: log P per 6-bp token (higher = more confident)</span>
       <span id="d3-bp-label" style="color:#888">0 bp</span>
     </div>
@@ -773,7 +886,7 @@
 
     <div class="track-axis-label" style="margin-top:14px">
       <span style="color:#aaa">prompt in gray</span>
-      <span style="color:#1a1a1a">generated colored by logprob</span>
+      <span style="color:#1f1f1d">generated colored by logprob</span>
       <span style="color:#b00020">mismatches in reference highlighted</span>
     </div>
   </div>
@@ -831,14 +944,8 @@
 
 <div class="tab-panel" id="panel-model" data-tab="model">
 
-<div class="hero">
-  <div class="hero-inner">
-    <img src="/img/logo.png" alt="Carbon" class="hero-logo">
-    <div class="hero-text">
-      <h2>How Carbon was <em>built</em> — what's specific to DNA, not the standard LLM playbook.</h2>
-      <p>Three places where the recipe needed adjustment for biology: the way DNA gets tokenized, how the loss handles near-miss tokens, and which sequence ends up in the corpus. Plus a deliberately vanilla architecture so any improvement can be attributed to the recipe rather than custom blocks.</p>
-    </div>
-  </div>
+<div class="tab-lede">
+  <p>Three places where the recipe needed adjustment for biology: the way DNA gets tokenized, how the loss handles near-miss tokens, and which sequence ends up in the corpus. Plus a deliberately vanilla architecture so any improvement can be attributed to the recipe rather than custom blocks.</p>
 </div>
 
 <div class="container wide">
@@ -865,7 +972,7 @@
              value="ATGGCCAAGCTGACCAGCGAGCTGCTGGCC"
              style="font-family:'JetBrains Mono',monospace;font-size:12px;padding:6px 10px;border:1px solid #ccc;border-radius:3px;flex:1 1 280px;letter-spacing:1px;text-transform:uppercase">
       <span class="spacer"></span>
-      <span class="status"><span class="dot" style="background:#1a8a3a"></span><span id="d7-len">30 bp</span></span>
+      <span class="status"><span class="dot" style="background:#317f3f"></span><span id="d7-len">30 bp</span></span>
     </div>
 
     <div id="d7-cols" style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px">
@@ -893,8 +1000,8 @@
 
     <div class="track-axis-label">
       <span>same DNA span</span>
-      <span style="color:#1a8a3a">▼ shorter token sequence = cheaper attention</span>
-      <span id="d7-speedup" style="color:#1a8a3a;font-weight:500">36× cheaper</span>
+      <span style="color:#317f3f">▼ shorter token sequence = cheaper attention</span>
+      <span id="d7-speedup" style="color:#317f3f;font-weight:500">36× cheaper</span>
     </div>
   </div>
 
@@ -982,7 +1089,7 @@
     <div class="seq-label">signal-to-noise · raw genome vs annotation-aware curation</div>
     <svg id="d9-snr" viewBox="0 0 1000 100" preserveAspectRatio="none" style="display:block;width:100%;height:90px;background:#fff;border:1px solid #eee"></svg>
     <div class="track-axis-label">
-      <span><span class="legend-swatch" style="background:#1a8a3a"></span>functional / annotated</span>
+      <span><span class="legend-swatch" style="background:#317f3f"></span>functional / annotated</span>
       <span><span class="legend-swatch" style="background:#ddd"></span>background</span>
       <span style="color:#888">curating raises the density of biological signal in the gradient</span>
     </div>
@@ -1037,14 +1144,8 @@
 <!-- ============================================================ -->
 <div class="tab-panel" id="panel-sandbox" data-tab="sandbox">
 
-<div class="hero">
-  <div class="hero-inner">
-    <img src="/img/logo.png" alt="Carbon" class="hero-logo">
-    <div class="hero-text">
-      <h2>Run Carbon <em>yourself</em>.</h2>
-      <p>Open-ended DNA continuation. Type any prefix in {A, C, G, T}, watch the model continue token by token. Toggle base-coloring or per-token logprob coloring to see where the model is confident and where it's guessing. Track GC content, perplexity, and throughput live.</p>
-    </div>
-  </div>
+<div class="tab-lede">
+  <p>Open-ended DNA continuation. Type any prefix in {A, C, G, T}, watch the model continue token by token. Toggle base-coloring or per-token logprob coloring to see where Carbon is confident and where it's guessing. Track GC content, perplexity, and throughput live.</p>
 </div>
 
 <div class="container" style="max-width:1280px">
@@ -1134,9 +1235,9 @@
 // =========================================================================
 // Shared helpers
 // =========================================================================
-const DARK_RGB = [26, 26, 26];
+const DARK_RGB = [31, 31, 29];
 const MID_RGB  = [136, 136, 136];
-const RED_RGB  = [216, 58, 42];
+const RED_RGB  = [188, 46, 37];
 const PROMPT_RGB = [170, 170, 170];
 
 function lerp(a, b, t) { return Math.round(a + (b - a) * t); }
@@ -1346,7 +1447,7 @@ async function loadGenes() {
       const matches = genText[genIdx] === base;
       return matches
         ? { style: "color:#bbb" }
-        : { style: "color:#b00020;background:rgba(216,58,42,0.18)" };
+        : { style: "color:#b00020;background:rgba(188,46,37,0.18)" };
     };
     renderSeq(els.ref, refSeq, bpl, colorRef);
   }
@@ -1557,7 +1658,7 @@ async function loadGenes() {
     const wRef = (Math.abs(c.refSum) / range) * 100;
     const wAlt = (Math.abs(c.altSum) / range) * 100;
     const delta = c.altSum - c.refSum;
-    const dColor = delta < -0.5 ? "#d83a2a" : (delta > 0.5 ? "#1a8a3a" : "#888");
+    const dColor = delta < -0.5 ? "#bc2e25" : (delta > 0.5 ? "#317f3f" : "#888");
     els.result.innerHTML = `
       <div class="row-label">ref · ${v.ref}</div>
       <div class="row-bar ref"><div class="fill" style="width:${wRef.toFixed(1)}%"></div></div>
@@ -1592,7 +1693,7 @@ async function loadGenes() {
     const innerW = W - padL - padR;
     const center = padL + innerW / 2;
     const scale = (innerW / 2) / absMax;
-    const sigColor = (s) => s === "Pathogenic" ? "#d83a2a" : s === "Benign" ? "#1a8a3a" : "#e69500";
+    const sigColor = (s) => s === "Pathogenic" ? "#bc2e25" : s === "Benign" ? "#317f3f" : "#e69500";
 
     // Bar color: encode the *model's* opinion of the alt allele
     // - Δ < 0 : red (model finds alt unusual). Saturation ~ |Δ|.
@@ -1614,13 +1715,13 @@ async function loadGenes() {
     let svg = "";
 
     // --- Top axis: directional caption ---
-    svg += `<text x="${padL.toFixed(1)}" y="14" font-family="JetBrains Mono" font-size="9" fill="#d83a2a" letter-spacing="1">← MODEL SURPRISED BY ALT</text>`;
+    svg += `<text x="${padL.toFixed(1)}" y="14" font-family="JetBrains Mono" font-size="9" fill="#bc2e25" letter-spacing="1">← MODEL SURPRISED BY ALT</text>`;
     svg += `<text x="${(W - padR).toFixed(1)}" y="14" font-family="JetBrains Mono" font-size="9" fill="#333" letter-spacing="1" text-anchor="end">MODEL FINE WITH ALT →</text>`;
     svg += `<text x="${center.toFixed(1)}" y="14" font-family="JetBrains Mono" font-size="9" fill="#888" text-anchor="middle" letter-spacing="1">Δ (alt − ref)</text>`;
     svg += `<text x="${(padL - 12).toFixed(1)}" y="14" font-family="JetBrains Mono" font-size="9" fill="#888" text-anchor="end" letter-spacing="1">VARIANT</text>`;
 
     // Faint shading: pathogenic-expected zone (left of 0)
-    svg += `<rect x="${padL.toFixed(1)}" y="${(padT - 4).toFixed(1)}" width="${(center - padL).toFixed(1)}" height="${(ordered.length * rowH + 8).toFixed(1)}" fill="#d83a2a" opacity="0.04"/>`;
+    svg += `<rect x="${padL.toFixed(1)}" y="${(padT - 4).toFixed(1)}" width="${(center - padL).toFixed(1)}" height="${(ordered.length * rowH + 8).toFixed(1)}" fill="#bc2e25" opacity="0.04"/>`;
 
     // Center line
     svg += `<line x1="${center}" y1="${padT - 4}" x2="${center}" y2="${H - padB + 4}" stroke="#bbb" stroke-width="1"/>`;
@@ -1653,7 +1754,7 @@ async function loadGenes() {
       const color = barColor(d);
       const barX = Math.min(center, x);
       const barW = Math.max(2, Math.abs(x - center));
-      svg += `<rect x="${barX.toFixed(1)}" y="${(y - 8).toFixed(1)}" width="${barW.toFixed(1)}" height="14" fill="${color}" stroke="${v === selected ? '#1a1a1a' : 'none'}" stroke-width="${v === selected ? 1 : 0}"/>`;
+      svg += `<rect x="${barX.toFixed(1)}" y="${(y - 8).toFixed(1)}" width="${barW.toFixed(1)}" height="14" fill="${color}" stroke="${v === selected ? '#1f1f1d' : 'none'}" stroke-width="${v === selected ? 1 : 0}"/>`;
 
       const label = (d >= 0 ? "+" : "") + d.toFixed(2);
       const insideOK = barW >= VALUE_INSIDE_MIN && Math.abs(d) >= 0.5;  // color is dark enough only away from neutral
@@ -1876,7 +1977,7 @@ async function loadGenes() {
       if (e.start > scoredLen) continue;
       const x = xScale(e.start);
       const w = xScale(Math.min(e.end, scoredLen)) - x;
-      svg += `<rect x="${x.toFixed(1)}" y="0" width="${Math.max(1, w).toFixed(1)}" height="${H}" fill="#1a8a3a" opacity="0.08"/>`;
+      svg += `<rect x="${x.toFixed(1)}" y="0" width="${Math.max(1, w).toFixed(1)}" height="${H}" fill="#317f3f" opacity="0.08"/>`;
     }
 
     // Smoothed line: a moving average over the points (window=5)
@@ -1901,7 +2002,7 @@ async function loadGenes() {
     smoothed.forEach((p, i) => {
       d += (i === 0 ? "M" : "L") + xScale(p.pos).toFixed(1) + " " + yScale(p.lp).toFixed(1);
     });
-    svg += `<path d="${d}" fill="none" stroke="#1a1a1a" stroke-width="1.2" stroke-linejoin="round"/>`;
+    svg += `<path d="${d}" fill="none" stroke="#1f1f1d" stroke-width="1.2" stroke-linejoin="round"/>`;
 
     // Y-axis ticks
     const tickLps = [yMin + (yMax - yMin) * 0.1, yMin + (yMax - yMin) * 0.5, yMin + (yMax - yMin) * 0.9];
@@ -2151,7 +2252,7 @@ async function loadGenes() {
           const matches = genText[genIdx] === base;
           return matches
             ? { style: "color:#bbb" }
-            : { style: "color:#b00020;background:rgba(216,58,42,0.18)" };
+            : { style: "color:#b00020;background:rgba(188,46,37,0.18)" };
         };
         const bpl2 = basesPerLine(refEl);
         renderSeq(refEl, refSeq, bpl2, colorRef);
@@ -2297,7 +2398,7 @@ async function loadGenes() {
     speedup: document.getElementById("d7-speedup"),
   };
   // 8-color palette for 6-mer tokens (cycle); 1-mer uses base coloring.
-  const TOKEN_PALETTE = ["#1a8a3a","#2c5aa0","#c08030","#7a4baa","#2a8a8a","#b03b6e","#5a6e30","#a87a30"];
+  const TOKEN_PALETTE = ["#317f3f","#2c5aa0","#c08030","#7a4baa","#2a8a8a","#b03b6e","#5a6e30","#a87a30"];
   const BASE_FILL = { A:"#3a8a3e", C:"#2e6bb8", G:"#b5891e", T:"#b53a3a", N:"#888" };
 
   function clean(s) { return (s || "").toUpperCase().replace(/[^ACGTN]/g, ""); }
@@ -2340,7 +2441,7 @@ async function loadGenes() {
     let svg = "";
     const rows = [
       { label: "1-mer", n: n1, cost: n1 * n1, color: "#888" },
-      { label: "6-mer", n: n6, cost: n6 * n6, color: "#1a8a3a" },
+      { label: "6-mer", n: n6, cost: n6 * n6, color: "#317f3f" },
     ];
     rows.forEach((r, i) => {
       const y = padT + i * (rowH + 8);
@@ -2404,8 +2505,8 @@ async function loadGenes() {
     html += `<div style="display:grid;grid-template-columns:140px 1fr 1fr;gap:8px 14px;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px">`;
     // Header
     html += `<div></div>`;
-    html += `<div style="font-size:9px;color:${mode==='fns'?'#aaa':'#1a1a1a'};text-transform:uppercase;letter-spacing:1.5px">${mode==='fns'?'cross-entropy':'cross-entropy'} <span style="font-weight:500">${mode==='ce'||mode==='both'?'· active':''}</span></div>`;
-    html += `<div style="font-size:9px;color:${mode==='ce'?'#aaa':'#1a1a1a'};text-transform:uppercase;letter-spacing:1.5px">FNS <span style="font-weight:500">${mode==='fns'||mode==='both'?'· active':''}</span></div>`;
+    html += `<div style="font-size:9px;color:${mode==='fns'?'#aaa':'#1f1f1d'};text-transform:uppercase;letter-spacing:1.5px">${mode==='fns'?'cross-entropy':'cross-entropy'} <span style="font-weight:500">${mode==='ce'||mode==='both'?'· active':''}</span></div>`;
+    html += `<div style="font-size:9px;color:${mode==='ce'?'#aaa':'#1f1f1d'};text-transform:uppercase;letter-spacing:1.5px">FNS <span style="font-weight:500">${mode==='fns'||mode==='both'?'· active':''}</span></div>`;
 
     cands.forEach(c => {
       const isTarget = c === t1Equal(c, target);
@@ -2413,25 +2514,25 @@ async function loadGenes() {
       let badges = "";
       for (let i = 0; i < 6; i++) {
         const match = c[i] === target[i];
-        const color = match ? "#1a8a3a" : "#d83a2a";
-        const bg = match ? "rgba(26,138,58,0.10)" : "rgba(216,58,42,0.08)";
+        const color = match ? "#317f3f" : "#bc2e25";
+        const bg = match ? "rgba(49,127,63,0.10)" : "rgba(188,46,37,0.08)";
         badges += `<span style="display:inline-block;background:${bg};color:${color};padding:2px 5px;margin:1px;border-radius:2px;font-weight:${match?500:400}">${c[i]}</span>`;
       }
       const isExact = c === target;
       const labelText = isExact ? "exact target" : `${nMatches(c, target)}/6 match`;
       html += `<div style="display:flex;flex-direction:column;gap:2px">
         <div>${badges}</div>
-        <div style="font-size:9px;color:${isExact?'#1a8a3a':'#888'};letter-spacing:1px;text-transform:uppercase;padding-left:4px">${labelText}</div>
+        <div style="font-size:9px;color:${isExact?'#317f3f':'#888'};letter-spacing:1px;text-transform:uppercase;padding-left:4px">${labelText}</div>
       </div>`;
 
       // CE column
       const ceVal = ceCredit(c, target);
-      html += creditCell(ceVal, mode === "fns", c === target ? "credit = 1" : "credit = 0", "#1a8a3a", "#d83a2a");
+      html += creditCell(ceVal, mode === "fns", c === target ? "credit = 1" : "credit = 0", "#317f3f", "#bc2e25");
 
       // FNS column
       const fnsVal = fnsCredit(c, target);
       const fnsLabel = c === target ? "credit = 1" : `credit = ${fnsVal.toFixed(2)}  (${nMatches(c, target)}/6)`;
-      html += creditCell(fnsVal, mode === "ce", fnsLabel, "#1a8a3a", "#d83a2a");
+      html += creditCell(fnsVal, mode === "ce", fnsLabel, "#317f3f", "#bc2e25");
     });
     html += `</div>`;
     canvas.innerHTML = html;
@@ -2462,8 +2563,8 @@ async function loadGenes() {
     let svg = "";
 
     // Background two-tone (CE phase + FNS phase)
-    svg += `<rect x="${padL}" y="${padT}" width="${(switchX - padL).toFixed(1)}" height="${H - padT - padB}" fill="#1a1a1a" opacity="0.04"/>`;
-    svg += `<rect x="${switchX.toFixed(1)}" y="${padT}" width="${(W - padR - switchX).toFixed(1)}" height="${H - padT - padB}" fill="#1a8a3a" opacity="0.06"/>`;
+    svg += `<rect x="${padL}" y="${padT}" width="${(switchX - padL).toFixed(1)}" height="${H - padT - padB}" fill="#1f1f1d" opacity="0.04"/>`;
+    svg += `<rect x="${switchX.toFixed(1)}" y="${padT}" width="${(W - padR - switchX).toFixed(1)}" height="${H - padT - padB}" fill="#317f3f" opacity="0.06"/>`;
 
     // Mock loss curve: smooth descent then a "staircase" that gets cleaned by the FNS switch
     const points = [];
@@ -2486,20 +2587,20 @@ async function loadGenes() {
     }
     let d = "";
     points.forEach(([x, y], i) => { d += (i === 0 ? "M" : "L") + x.toFixed(1) + " " + y.toFixed(1); });
-    svg += `<path d="${d}" fill="none" stroke="#1a1a1a" stroke-width="1.4"/>`;
+    svg += `<path d="${d}" fill="none" stroke="#1f1f1d" stroke-width="1.4"/>`;
 
     // Switch marker
-    svg += `<line x1="${switchX.toFixed(1)}" y1="${padT}" x2="${switchX.toFixed(1)}" y2="${H - padB}" stroke="#1a8a3a" stroke-width="1.5" stroke-dasharray="3,3"/>`;
-    svg += `<text x="${switchX.toFixed(1)}" y="${(padT - 4)}" font-family="JetBrains Mono" font-size="9" fill="#1a8a3a" text-anchor="middle" letter-spacing="1">CE → FNS</text>`;
+    svg += `<line x1="${switchX.toFixed(1)}" y1="${padT}" x2="${switchX.toFixed(1)}" y2="${H - padB}" stroke="#317f3f" stroke-width="1.5" stroke-dasharray="3,3"/>`;
+    svg += `<text x="${switchX.toFixed(1)}" y="${(padT - 4)}" font-family="JetBrains Mono" font-size="9" fill="#317f3f" text-anchor="middle" letter-spacing="1">CE → FNS</text>`;
 
     // Phase labels
     svg += `<text x="${(padL + (switchX - padL) / 2).toFixed(1)}" y="${(H - padB + 14).toFixed(1)}" font-family="JetBrains Mono" font-size="10" fill="#666" text-anchor="middle" letter-spacing="1">CROSS-ENTROPY · learn joint structure</text>`;
-    svg += `<text x="${(switchX + (W - padR - switchX) / 2).toFixed(1)}" y="${(H - padB + 14).toFixed(1)}" font-family="JetBrains Mono" font-size="10" fill="#1a8a3a" text-anchor="middle" letter-spacing="1">FNS · smooth, BF16-stable refinement</text>`;
+    svg += `<text x="${(switchX + (W - padR - switchX) / 2).toFixed(1)}" y="${(H - padB + 14).toFixed(1)}" font-family="JetBrains Mono" font-size="10" fill="#317f3f" text-anchor="middle" letter-spacing="1">FNS · smooth, BF16-stable refinement</text>`;
     // y-axis label
     svg += `<text x="${padL}" y="${(padT - 4)}" font-family="JetBrains Mono" font-size="9" fill="#aaa" letter-spacing="0.5">training loss</text>`;
     // staircase callout
     const staircaseX = padL + innerW * (switchAt - 0.04);
-    svg += `<text x="${staircaseX.toFixed(1)}" y="${(H - padB - 4).toFixed(1)}" font-family="JetBrains Mono" font-size="9" fill="#d83a2a" text-anchor="end">↑ staircase</text>`;
+    svg += `<text x="${staircaseX.toFixed(1)}" y="${(H - padB - 4).toFixed(1)}" font-family="JetBrains Mono" font-size="9" fill="#bc2e25" text-anchor="end">↑ staircase</text>`;
 
     schedule.innerHTML = svg;
   }
@@ -2534,7 +2635,7 @@ async function loadGenes() {
   const tplEl     = document.getElementById("d9-templates");
 
   const COMPOSITION = [
-    { label: "GENERator-v2",  pct: 70, color: "#1a8a3a", desc: "annotation-aware functional genomic backbone (eukaryotic, gene-centric)" },
+    { label: "GENERator-v2",  pct: 70, color: "#317f3f", desc: "annotation-aware functional genomic backbone (eukaryotic, gene-centric)" },
     { label: "mRNA",          pct: 16, color: "#2c5aa0", desc: "OpenGenome2 mature transcripts · RNA-level functional context" },
     { label: "GTDB",          pct: 10, color: "#c08030", desc: "OpenGenome2 prokaryotic genomes · compact bacterial structure" },
     { label: "mRNA-splice",   pct:  4, color: "#7a4baa", desc: "OpenGenome2 transcript-derived · splice-related signal" },
@@ -2569,8 +2670,8 @@ async function loadGenes() {
       }
     }
     // Inner hole for donut
-    svg += `<circle cx="${cx}" cy="${cy}" r="${r * 0.42}" fill="#fafafa"/>`;
-    svg += `<text x="${cx}" y="${cy - 2}" font-family="JetBrains Mono" font-size="11" fill="#1a1a1a" text-anchor="middle" font-weight="500">CARBON</text>`;
+    svg += `<circle cx="${cx}" cy="${cy}" r="${r * 0.42}" fill="#f7f5ee"/>`;
+    svg += `<text x="${cx}" y="${cy - 2}" font-family="JetBrains Mono" font-size="11" fill="#1f1f1d" text-anchor="middle" font-weight="500">CARBON</text>`;
     svg += `<text x="${cx}" y="${cy + 12}" font-family="JetBrains Mono" font-size="9" fill="#888" text-anchor="middle">corpus</text>`;
     pieEl.innerHTML = svg;
   }
@@ -2580,7 +2681,7 @@ async function loadGenes() {
       <div style="display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid #f0f0f0">
         <span style="display:inline-block;flex:0 0 12px;height:12px;background:${s.color};border-radius:2px;margin-top:3px"></span>
         <div style="flex:1">
-          <div><strong style="color:#1a1a1a">${s.label}</strong> <span style="color:#888">· ${s.pct}%</span></div>
+          <div><strong style="color:#1f1f1d">${s.label}</strong> <span style="color:#888">· ${s.pct}%</span></div>
           <div style="color:#888;font-size:10px;margin-top:1px">${s.desc}</div>
         </div>
       </div>
@@ -2602,7 +2703,7 @@ async function loadGenes() {
       const rowW = W - padL - 12;
       for (const seg of segs) {
         const w = (seg.frac * rowW);
-        svg += `<rect x="${cursor.toFixed(1)}" y="${y}" width="${Math.max(0.5, w).toFixed(1)}" height="${segH}" fill="${seg.func ? '#1a8a3a' : '#ddd'}"/>`;
+        svg += `<rect x="${cursor.toFixed(1)}" y="${y}" width="${Math.max(0.5, w).toFixed(1)}" height="${segH}" fill="${seg.func ? '#317f3f' : '#ddd'}"/>`;
         cursor += w;
       }
     }
@@ -2627,8 +2728,8 @@ async function loadGenes() {
   function renderTemplates() {
     let html = "";
     for (const t of TEMPLATES) {
-      html += `<div style="text-align:right;color:#1a8a3a;font-weight:500">${t.pct}</div>`;
-      html += `<div><span style="background:#f4f4f4;padding:2px 6px;border-radius:2px;color:#1a1a1a">${t.body.replace(/</g,"&lt;").replace(/>/g,"&gt;")}</span> <span style="color:#888;font-size:10px;margin-left:8px">${t.note}</span></div>`;
+      html += `<div style="text-align:right;color:#317f3f;font-weight:500">${t.pct}</div>`;
+      html += `<div><span style="background:#f4f4f4;padding:2px 6px;border-radius:2px;color:#1f1f1d">${t.body.replace(/</g,"&lt;").replace(/>/g,"&gt;")}</span> <span style="color:#888;font-size:10px;margin-left:8px">${t.note}</span></div>`;
     }
     tplEl.innerHTML = html;
   }
@@ -2660,16 +2761,16 @@ async function loadGenes() {
   let html = `<thead>
     <tr>
       <th style="text-align:left;padding:10px 6px 8px;border-bottom:1px solid #ddd;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1.5px;font-weight:400"></th>
-      <th style="text-align:left;padding:10px 12px 8px;border-bottom:1px solid #ddd;font-size:11px;color:#1a1a1a;letter-spacing:1px">Carbon · 3B</th>
-      <th style="text-align:left;padding:10px 12px 8px;border-bottom:1px solid #ddd;font-size:11px;color:#1a1a1a;letter-spacing:1px">Carbon · 8B</th>
+      <th style="text-align:left;padding:10px 12px 8px;border-bottom:1px solid #ddd;font-size:11px;color:#1f1f1d;letter-spacing:1px">Carbon · 3B</th>
+      <th style="text-align:left;padding:10px 12px 8px;border-bottom:1px solid #ddd;font-size:11px;color:#1f1f1d;letter-spacing:1px">Carbon · 8B</th>
     </tr>
   </thead><tbody>`;
   ROWS.forEach((r, i) => {
-    const bg = i % 2 === 0 ? "#fafafa" : "#fff";
+    const bg = i % 2 === 0 ? "#f7f5ee" : "#fff";
     html += `<tr style="background:${bg}">
       <td style="padding:6px;color:#666;font-size:10px;text-transform:uppercase;letter-spacing:1px">${r[0]}</td>
-      <td style="padding:6px 12px;color:#1a1a1a">${r[1]}</td>
-      <td style="padding:6px 12px;color:#1a1a1a">${r[2]}</td>
+      <td style="padding:6px 12px;color:#1f1f1d">${r[1]}</td>
+      <td style="padding:6px 12px;color:#1f1f1d">${r[2]}</td>
     </tr>`;
   });
   html += `</tbody>`;
@@ -2709,9 +2810,9 @@ async function loadGenes() {
     A: [58, 138, 62], C: [46, 107, 184], G: [181, 137, 30], T: [181, 58, 58], N: [136, 136, 136],
   };
   const PROMPT_RGB_S = [170, 170, 170];
-  const DARK_RGB_S = [26, 26, 26];
+  const DARK_RGB_S = [31, 31, 29];
   const MID_RGB_S  = [136, 136, 136];
-  const RED_RGB_S  = [216, 58, 42];
+  const RED_RGB_S  = [188, 46, 37];
   const BG_ALPHA = 0.12;
 
   let promptBases = "";
@@ -2744,14 +2845,14 @@ async function loadGenes() {
     const bar   = document.getElementById("sb-legend-bar");
     if (!lpRange) {
       minEl.textContent = midEl.textContent = maxEl.textContent = "—";
-      bar.style.background = "linear-gradient(to right, #d83a2a, #888, #1a1a1a)";
+      bar.style.background = "linear-gradient(to right, #bc2e25, #888, #1f1f1d)";
     } else {
       const { min, mid, max } = lpRange;
       minEl.textContent = min.toFixed(1);
       midEl.textContent = mid.toFixed(1);
       maxEl.textContent = max.toFixed(1);
       const midPct = max > min ? ((mid - min) / (max - min)) * 100 : 50;
-      bar.style.background = `linear-gradient(to right, #d83a2a 0%, #888 ${midPct.toFixed(1)}%, #1a1a1a 100%)`;
+      bar.style.background = `linear-gradient(to right, #bc2e25 0%, #888 ${midPct.toFixed(1)}%, #1f1f1d 100%)`;
     }
     updateLpChart();
   }
@@ -2787,9 +2888,9 @@ async function loadGenes() {
     svg.innerHTML = `
       <defs>
         <linearGradient id="sb-lp-grad" gradientUnits="userSpaceOnUse" x1="0" y1="${H - pad}" x2="0" y2="${pad}">
-          <stop offset="0%" stop-color="#d83a2a"/>
+          <stop offset="0%" stop-color="#bc2e25"/>
           <stop offset="${midPct.toFixed(1)}%" stop-color="#888"/>
-          <stop offset="100%" stop-color="#1a1a1a"/>
+          <stop offset="100%" stop-color="#1f1f1d"/>
         </linearGradient>
       </defs>
       <path d="${d}" fill="none" stroke="url(#sb-lp-grad)" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round"/>
@@ -3140,6 +3241,193 @@ async function loadGenes() {
   }
 })();
 
+// =========================================================================
+// Carbon banner — animated DNA helix
+// =========================================================================
+(function initCarbonBanner() {
+  const banner = document.querySelector(".carbon-banner");
+  if (!banner) return;
+  const svgNS = "http://www.w3.org/2000/svg";
+  const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const sequence = ["A","T","A","A","C","G","A","C","T","T","C","C","C","T","A","T","T","G"];
+  const complement = { A: "T", T: "A", C: "G", G: "C" };
+
+  const helix = {
+    startX: 868, endX: 1988, centerY: 318, amplitude: 88,
+    cycles: 3.62, speed: 0.00015,
+    rungCount: 27, segmentCount: 96,
+    bodyRadius: 6.4, shadowRadius: 8.4,
+    rungInset: 9.2, glyphGap: 13.5,
+  };
+
+  const $ = (id) => banner.querySelector("#" + id);
+  const els = {
+    strandBackLayer:  $("cb-strandBackLayer"),
+    strandFrontLayer: $("cb-strandFrontLayer"),
+    rungs:            $("cb-rungs"),
+    baseLetters:      $("cb-baseLetters"),
+  };
+
+  function makeEl(name, attrs = {}) {
+    const node = document.createElementNS(svgNS, name);
+    for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, v);
+    return node;
+  }
+  function makeBaseGlyph(letter) {
+    const glyph = makeEl("g", { class: "cb-base-glyph" });
+    const paths = {
+      A: "M -5 8 L 0 -8 L 5 8 M -3.1 2 L 3.1 2",
+      C: "M 5 -6 C 1 -9 -6 -7 -6 0 C -6 7 1 9 5 6",
+      G: "M 5 -6 C 1 -9 -6 -7 -6 0 C -6 7 1 9 5 6 M 5 1 L 1 1 M 5 1 L 5 6",
+      T: "M -6 -7 L 6 -7 M 0 -7 L 0 8",
+    };
+    glyph.appendChild(makeEl("path", { d: paths[letter] }));
+    return glyph;
+  }
+
+  const segmentNodes = [];
+  const rungNodes = [];
+  const letterNodes = [];
+
+  function makeSegmentNode(strandOffset, index) {
+    const group = makeEl("g");
+    const shadow = makeEl("path", { class: "cb-helix-shadow" });
+    const body   = makeEl("path", { class: "cb-helix-body" });
+    const texture= makeEl("path", { class: "cb-helix-texture" });
+    const edgeA  = makeEl("path", { class: "cb-helix-edge" });
+    const edgeB  = makeEl("path", { class: "cb-helix-edge" });
+    group.append(shadow, body, texture, edgeA, edgeB);
+    return { group, shadow, body, texture, edgeA, edgeB, strandOffset, index, z: 0 };
+  }
+
+  for (let i = 0; i < helix.segmentCount; i++) {
+    segmentNodes.push(makeSegmentNode(0, i));
+    segmentNodes.push(makeSegmentNode(Math.PI, i));
+  }
+  for (let i = 0; i < helix.rungCount; i++) {
+    const path = makeEl("path", { class: "cb-base-pair" });
+    els.rungs.appendChild(path);
+    rungNodes.push(path);
+    const pair = sequence[i % sequence.length];
+    const mate = complement[pair];
+    const groupA = makeEl("g", { class: "cb-base-letter-node" });
+    const groupB = makeEl("g", { class: "cb-base-letter-node" });
+    groupA.appendChild(makeBaseGlyph(pair));
+    groupB.appendChild(makeBaseGlyph(mate));
+    els.baseLetters.append(groupA, groupB);
+    letterNodes.push([groupA, groupB]);
+  }
+
+  function pointAt(x, offset, phase) {
+    const t = (x - helix.startX) / (helix.endX - helix.startX);
+    const theta = t * helix.cycles * Math.PI * 2 + phase + offset;
+    const slope = Math.cos(theta) * helix.amplitude * helix.cycles * Math.PI * 2 / (helix.endX - helix.startX);
+    const normalLength = Math.hypot(slope, 1);
+    return {
+      x,
+      y: helix.centerY + Math.sin(theta) * helix.amplitude,
+      z: Math.cos(theta),
+      nx: -slope / normalLength,
+      ny: 1 / normalLength,
+    };
+  }
+  function samplesFor(offset, phase) {
+    const points = [];
+    for (let i = 0; i <= helix.segmentCount; i++) {
+      const x = helix.startX + ((helix.endX - helix.startX) * i) / helix.segmentCount;
+      points.push(pointAt(x, offset, phase));
+    }
+    return points;
+  }
+  const shiftedPoint = (p, r) => ({ x: p.x + p.nx * r, y: p.y + p.ny * r });
+  function lineSegmentPath(a, b, radius) {
+    const p0 = shiftedPoint(a, radius), p1 = shiftedPoint(b, radius);
+    return `M ${p0.x.toFixed(2)} ${p0.y.toFixed(2)} L ${p1.x.toFixed(2)} ${p1.y.toFixed(2)}`;
+  }
+  function ribbonSegmentPath(a, b, radius) {
+    const a0 = shiftedPoint(a, radius);
+    const b0 = shiftedPoint(b, radius);
+    const b1 = shiftedPoint(b, -radius);
+    const a1 = shiftedPoint(a, -radius);
+    return `M ${a0.x.toFixed(2)} ${a0.y.toFixed(2)} L ${b0.x.toFixed(2)} ${b0.y.toFixed(2)} L ${b1.x.toFixed(2)} ${b1.y.toFixed(2)} L ${a1.x.toFixed(2)} ${a1.y.toFixed(2)} Z`;
+  }
+  function setPath(el, d, opacity = 1) {
+    el.setAttribute("d", d);
+    el.style.opacity = opacity;
+  }
+  function updateSegment(node, points) {
+    const a = points[node.index];
+    const b = points[node.index + 1];
+    const z = (a.z + b.z) / 2;
+    const front = Math.max(0, Math.min(1, (z + 1) / 2));
+    node.z = z;
+    setPath(node.shadow,  ribbonSegmentPath(a, b, helix.shadowRadius), 0.05 + front * 0.12);
+    setPath(node.body,    ribbonSegmentPath(a, b, helix.bodyRadius),   0.5  + front * 0.42);
+    setPath(node.texture, ribbonSegmentPath(a, b, helix.bodyRadius - 0.8), 0.14 + front * 0.22);
+    setPath(node.edgeA,   lineSegmentPath(a, b, helix.bodyRadius + 0.35), 0.2 + front * 0.68);
+    setPath(node.edgeB,   lineSegmentPath(a, b, -helix.bodyRadius - 0.35), 0.2 + front * 0.68);
+  }
+  function brokenRungPath(x, yStart, letterYs, yEnd, gap) {
+    const start = Math.min(yStart, yEnd);
+    const end   = Math.max(yStart, yEnd);
+    const gaps = letterYs
+      .map(y => [Math.max(start, y - gap), Math.min(end, y + gap)])
+      .filter(([f, t]) => t > f)
+      .sort((a, b) => a[0] - b[0]);
+    const merged = [];
+    for (const r of gaps) {
+      const last = merged[merged.length - 1];
+      if (!last || r[0] > last[1]) merged.push(r);
+      else last[1] = Math.max(last[1], r[1]);
+    }
+    const parts = [];
+    const addPart = (f, t) => { if (t - f > 0.7) parts.push(`M ${x.toFixed(2)} ${f.toFixed(2)} L ${x.toFixed(2)} ${t.toFixed(2)}`); };
+    let cursor = start;
+    for (const [f, t] of merged) { addPart(cursor, f); cursor = t; }
+    addPart(cursor, end);
+    return parts.join(" ");
+  }
+  function draw(ts = 0) {
+    const phase = prefersReduced ? 0.6 : ts * helix.speed;
+    const pointsByOffset = new Map([
+      [0,        samplesFor(0, phase)],
+      [Math.PI,  samplesFor(Math.PI, phase)],
+    ]);
+    for (const node of segmentNodes) {
+      updateSegment(node, pointsByOffset.get(node.strandOffset));
+    }
+    els.strandBackLayer.replaceChildren();
+    els.strandFrontLayer.replaceChildren();
+    for (const node of segmentNodes.slice().sort((a, b) => a.z - b.z)) {
+      const target = node.z >= 0 ? els.strandFrontLayer : els.strandBackLayer;
+      target.appendChild(node.group);
+    }
+    for (let i = 0; i < helix.rungCount; i++) {
+      const t = i / (helix.rungCount - 1);
+      const x = helix.startX + (helix.endX - helix.startX) * t;
+      const a = pointAt(x, 0, phase);
+      const b = pointAt(x, Math.PI, phase);
+      const yTop = Math.min(a.y, b.y);
+      const yBottom = Math.max(a.y, b.y);
+      const span = yBottom - yTop;
+      const inset = Math.min(helix.rungInset, Math.max(0, span * 0.5 - 3));
+      const visible = Math.max(0, Math.min(1, (span - 34) / 70));
+      const aLetterY = a.y + (b.y - a.y) * 0.34;
+      const bLetterY = b.y + (a.y - b.y) * 0.34;
+      const letterGap = Math.min(helix.glyphGap, Math.max(7, span * 0.13));
+      rungNodes[i].setAttribute("d", brokenRungPath(x, yTop + inset, [aLetterY, bLetterY], yBottom - inset, letterGap));
+      rungNodes[i].style.opacity = 0.18 + visible * 0.72;
+      const [sA, sB] = letterNodes[i];
+      sA.setAttribute("transform", `translate(${x} ${aLetterY})`);
+      sB.setAttribute("transform", `translate(${x} ${bLetterY})`);
+      sA.style.opacity = 0.16 + visible * 0.84;
+      sB.style.opacity = 0.16 + visible * 0.84;
+    }
+    if (!prefersReduced) requestAnimationFrame(draw);
+  }
+  draw();
+})();
+
 // =========================================================================
 // Tab switching + hash routing
 // =========================================================================