Pareto chart: rebuild as inline SVG, add Dataset link to banner

Replaces /img/pareto.png with a self-contained SVG built from
pareto/pareto_data.csv. Geometry mirrors the matplotlib reference
(log-scale throughput, linear win-rate %, family badges, 275×
speedup arrow, "better/faster" indicator) but the chrome is pulled
back to fit the editorial blog tone: hairline frame + tick lines,
JetBrains Mono tabular tick labels, mono-uppercase indicator
eyebrows, and plain text data labels with a paint-order halo
instead of pill boxes. Carbon points scale up + use a heavier
label per the source script's HIGHLIGHT_LOGO_SCALE.

Also adds a "Dataset" link (HuggingFaceBio/carbon-pretraining-corpus)
to the banner resources row, between Models and Tech report so the
two HF-hub resources sit together.

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

assets/styles/section-intro.css

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

demo.html

@@ -199,6 +199,11 @@
               Models<span class="arrow" aria-hidden="true">↗</span>
             </a>
           </li>
+          <li>
+            <a href="https://huggingface.co/datasets/HuggingFaceBio/carbon-pretraining-corpus" target="_blank" rel="noopener">
+              Dataset<span class="arrow" aria-hidden="true">↗</span>
+            </a>
+          </li>
           <li>
             <a href="#" target="_blank" rel="noopener">
               Tech report<span class="arrow" aria-hidden="true">↗</span>
@@ -275,8 +280,161 @@
         shipping with the full training code, the data pipeline, and the model weights.
         Everything is open source on the Hugging Face Hub.
       </p>
-      <figure class="tab-lede__figure">
-        <img src="/img/pareto.png" alt="Throughput vs win rate pareto frontier: Carbon 3B/8B sit at high win rate and ~275× the throughput of Arc Evo2 7B, well ahead of GENERator-v2.">
+      <!-- Pareto chart, drawn natively as inline SVG so the figure scales
+           sharply, picks up the page's typography, and can be tuned in
+           CSS without a matplotlib re-export. Source data lives in
+           pareto/pareto_data.csv; geometry mirrors the matplotlib
+           reference (scratch/plot_pareto_winrate_throughput_8b_32k_hf.py):
+           log-scale throughput on x, linear win-rate % on y, family
+           badges sitting on each data point with a plain text label
+           below. Chrome is pulled back to match the editorial blog
+           tone — hairline frame + tick lines, mono tabular tick
+           labels, mono-uppercase "better/faster" eyebrow indicator —
+           and the data labels use a paint-order halo (see
+           .pareto-label in section-intro.css) instead of pill boxes.
+           Carbon points scale up + use a heavier label per the source
+           script's HIGHLIGHT_LOGO_SCALE so the eye lands on them. -->
+      <figure class="tab-lede__figure tab-lede__figure--pareto">
+        <svg
+          class="pareto-chart"
+          viewBox="0 0 1000 600"
+          xmlns="http://www.w3.org/2000/svg"
+          role="img"
+          aria-labelledby="pareto-title pareto-desc"
+        >
+          <title id="pareto-title">Throughput vs win rate across open DNA foundation models</title>
+          <desc id="pareto-desc">Log-scale throughput in base pairs per second on the x-axis and win-rate percentage on the y-axis. Carbon 3B and 8B sit at roughly 275 times the throughput of Arc Evo2 7B at comparable or better win rates.</desc>
+
+          <!-- Plot interior. -->
+          <rect class="pareto-bg" x="100" y="30" width="870" height="470"/>
+
+          <!-- Y axis: linear win-rate %, ticks at 0/20/40/60/80/100. The
+               plot range runs −12..108 (matches matplotlib padding) so
+               the data points have headroom above 100 and below 0 for
+               labels; only the canonical 0..100 ticks are drawn. -->
+          <g class="pareto-axis pareto-axis--y">
+            <line x1="94" y1="61.3"  x2="100" y2="61.3"/>
+            <line x1="94" y1="139.7" x2="100" y2="139.7"/>
+            <line x1="94" y1="218.0" x2="100" y2="218.0"/>
+            <line x1="94" y1="296.3" x2="100" y2="296.3"/>
+            <line x1="94" y1="374.7" x2="100" y2="374.7"/>
+            <line x1="94" y1="453.0" x2="100" y2="453.0"/>
+            <text x="86" y="61.3">100</text>
+            <text x="86" y="139.7">80</text>
+            <text x="86" y="218.0">60</text>
+            <text x="86" y="296.3">40</text>
+            <text x="86" y="374.7">20</text>
+            <text x="86" y="453.0">0</text>
+          </g>
+
+          <!-- X axis: log10 base pairs/s. x-range chosen to mirror the
+               matplotlib auto-padding (left_pad/right_pad in the source);
+               ticks drop at decade + half-decade boundaries that fall
+               inside the range. -->
+          <g class="pareto-axis pareto-axis--x">
+            <line x1="163.4" y1="500" x2="163.4" y2="506"/>
+            <line x1="263.9" y1="500" x2="263.9" y2="506"/>
+            <line x1="339.9" y1="500" x2="339.9" y2="506"/>
+            <line x1="415.9" y1="500" x2="415.9" y2="506"/>
+            <line x1="516.4" y1="500" x2="516.4" y2="506"/>
+            <line x1="592.4" y1="500" x2="592.4" y2="506"/>
+            <line x1="668.5" y1="500" x2="668.5" y2="506"/>
+            <line x1="768.9" y1="500" x2="768.9" y2="506"/>
+            <line x1="844.9" y1="500" x2="844.9" y2="506"/>
+            <line x1="920.9" y1="500" x2="920.9" y2="506"/>
+            <text x="163.4" y="520">200</text>
+            <text x="263.9" y="520">500</text>
+            <text x="339.9" y="520">1k</text>
+            <text x="415.9" y="520">2k</text>
+            <text x="516.4" y="520">5k</text>
+            <text x="592.4" y="520">10k</text>
+            <text x="668.5" y="520">20k</text>
+            <text x="768.9" y="520">50k</text>
+            <text x="844.9" y="520">100k</text>
+            <text x="920.9" y="520">200k</text>
+          </g>
+
+          <!-- Plot frame drawn after the axis grid so the thick black
+               border sits cleanly on top of the tick lines. -->
+          <rect class="pareto-frame" x="100" y="30" width="870" height="470"/>
+
+          <!-- Axes-of-improvement indicator: a small ⌐ of grey arrows in
+               the lower-left labelled "better"/"faster", same as the
+               matplotlib reference. Placed at the 0-winrate gridline,
+               just inside the y-axis. -->
+          <g class="pareto-indicator" transform="translate(170 450)">
+            <line x1="0" y1="0" x2="0" y2="-70"/>
+            <polygon points="0,-78 -7,-66 7,-66"/>
+            <text class="pareto-indicator-text" transform="translate(-14 -35) rotate(-90)">better</text>
+            <line x1="0" y1="0" x2="70" y2="0"/>
+            <polygon points="78,0 66,-7 66,7"/>
+            <text class="pareto-indicator-text" x="35" y="20">faster</text>
+          </g>
+
+          <!-- 275× speedup arrow: starts just right of the Evo2 7B label
+               pill and lands just left of the Carbon 3B logo. y placed
+               between the two points (Evo2 7B at 64.3%, Carbon 3B at
+               59.5%) so it reads as level with both. -->
+          <g class="pareto-speedup">
+            <line x1="290" y1="215" x2="822" y2="215"/>
+            <polygon points="836,215 820,206 820,224"/>
+            <text class="pareto-speedup-label" x="556" y="200">275×</text>
+          </g>
+
+          <!-- Data points. Coordinates baked in from pareto_data.csv:
+               x = 100 + (log10(T) − 2.0499) / 3.4452 × 870
+               y = 500 − (win_rate + 12) × 3.9167
+               Logos sit centered on each point (32×32 for non-highlight,
+               43×43 for Carbon). Labels are pinned below the logo. -->
+
+          <!-- Evo2 20B · 177.5 bp/s, 95.24% -->
+          <g class="pareto-point">
+            <image href="/img/arc.webp" x="134.3" y="64.0" width="32" height="32"/>
+            <text class="pareto-label" x="150.3" y="110">Evo2 20B</text>
+          </g>
+
+          <!-- Evo2 7B · 453.8 bp/s, 64.29% -->
+          <g class="pareto-point">
+            <image href="/img/arc.webp" x="237.3" y="185.2" width="32" height="32"/>
+            <text class="pareto-label" x="253.3" y="231">Evo2 7B</text>
+          </g>
+
+          <!-- Evo2 1B · 1342.5 bp/s, 2.38% -->
+          <g class="pareto-point">
+            <image href="/img/arc.webp" x="356.2" y="427.7" width="32" height="32"/>
+            <text class="pareto-label" x="372.2" y="473">Evo2 1B</text>
+          </g>
+
+          <!-- GENERator-v2 3B · 98494.4 bp/s, 35.71% -->
+          <g class="pareto-point">
+            <image href="/img/generator.webp" x="828.7" y="297.1" width="32" height="32"/>
+            <text class="pareto-label" x="844.7" y="343">GENERator-v2 3B</text>
+          </g>
+
+          <!-- GENERator-v2 1.2B · 123219.2 bp/s, 14.29% -->
+          <g class="pareto-point">
+            <image href="/img/generator.webp" x="853.3" y="381.0" width="32" height="32"/>
+            <text class="pareto-label" x="869.3" y="427">GENERator-v2 1.2B</text>
+          </g>
+
+          <!-- Carbon 8B · 76582.7 bp/s, 78.57% (highlighted) -->
+          <g class="pareto-point pareto-point--highlight">
+            <image href="/img/logo.svg" x="795.6" y="123.7" width="43" height="43"/>
+            <text class="pareto-label" x="817.1" y="180">Carbon 8B</text>
+          </g>
+
+          <!-- Carbon 3B · 125130.8 bp/s, 59.52% (highlighted) -->
+          <g class="pareto-point pareto-point--highlight">
+            <image href="/img/logo.svg" x="849.5" y="198.3" width="43" height="43"/>
+            <text class="pareto-label" x="871.0" y="255">Carbon 3B</text>
+          </g>
+
+          <!-- Axis titles. Y title rotated -90 along the left margin, X
+               title + italic "Base pairs per second" subtitle below. -->
+          <text class="pareto-axis-title" transform="translate(34 265) rotate(-90)">Win rate (%)</text>
+          <text class="pareto-axis-title" x="535" y="558">Throughput</text>
+          <text class="pareto-axis-subtitle" x="535" y="582">Base pairs per second</text>
+        </svg>
         <figcaption>Throughput (base pairs per second, log scale) vs win rate across open DNA foundation models. Carbon 3B matches Evo2 7B's win rate at roughly 275× the throughput.</figcaption>
       </figure>
     </div>
@@ -486,7 +644,7 @@
     <div class="section--two-col intro-subsection">
       <div class="section-narrative">
         <div class="section-num">§6 · Applications</div>
-        <div class="section-title">From bases to outcomes</div>
+        <div class="section-title">What can the model do in the real world?</div>
         <p class="lede">
           A model that understands and writes DNA is useful wherever DNA is the
           input or the output. There are three interesting use-cases for such