Demo polish: SEO/AI-agent discoverability + new hexagonal logo + §1 helix per-letter fade + sandbox empty-state

- Discoverability surface: robots.txt, sitemap.xml, llms.txt, JSON-LD/OG/Twitter
metadata in demo.html; app.py templates demo + social-banner with {{SITE_URL}}
resolved per-request from X-Forwarded-*; Dockerfile COPYs the new files.
- New hexagonal Carbon mark (img/logo.svg) plus black square/rectangle lockups
used by the social-banner contact sheet.
- social-banner: noindex, doubles as a brand contact sheet under the stage with
native-size square and rectangle lockups for one-shot screenshots.
- §1 intro helix: per-letter depth-aware fade — front-strand letter at each
crossing stays readable while its back-strand sibling recedes, instead of both
going equally ghosted.
- Sandbox empty-state: centered, white-on-white, lighter contrast so the
placeholder reads as a hint rather than a block.
- New §X efficiency section script wired into demo.html.

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

Dockerfile

@@ -6,6 +6,11 @@ COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
 COPY app.py index.html demo.html social-banner.html ./
+# Discoverability surface (SEO + AI agents + social previews). These are
+# read once at startup by app.py, with {{SITE_URL}} substituted in at
+# request time. Without this COPY the production image 404s on every
+# crawler / answer-engine probe.
+COPY robots.txt llms.txt sitemap.xml ./
 COPY data/ ./data/
 COPY img/ ./img/
 COPY annotations/ ./annotations/

app.py

@@ -6,7 +6,7 @@ import os
 import httpx
 from fastapi import FastAPI, Request
 from fastapi.middleware.gzip import GZipMiddleware
-from fastapi.responses import FileResponse, StreamingResponse
+from fastapi.responses import FileResponse, HTMLResponse, PlainTextResponse, RedirectResponse, Response, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from openai import OpenAI
 
@@ -44,6 +44,50 @@ _FOLD_CACHE_MAX = 256
 
 HERE = os.path.dirname(os.path.abspath(__file__))
 
+# Absolute base URL used to fill {{SITE_URL}} placeholders in demo.html,
+# sitemap.xml and robots.txt (og:image, canonical, sitemap reference…).
+# If unset, we derive it per-request from the X-Forwarded-* headers (HF
+# Spaces sits behind a proxy that sets them) so og:image, canonical and
+# the sitemap stay correct on whatever host the page is served from.
+SITE_URL_ENV = os.environ.get("SITE_URL", "").rstrip("/")
+
+
+def site_url_for(request: Request) -> str:
+    """Return the absolute origin (scheme://host, no trailing slash)."""
+    if SITE_URL_ENV:
+        return SITE_URL_ENV
+    scheme = request.headers.get("x-forwarded-proto") or request.url.scheme or "http"
+    # X-Forwarded-Host may carry a comma-separated chain when multiple
+    # proxies are involved; the original client-visible host is the
+    # first entry. Host header is the fallback.
+    fwd_host = request.headers.get("x-forwarded-host")
+    if fwd_host:
+        host = fwd_host.split(",")[0].strip()
+    else:
+        host = request.headers.get("host") or request.url.netloc
+    return f"{scheme}://{host}"
+
+
+def _load_text(path: str) -> str:
+    with open(path, encoding="utf-8") as f:
+        return f.read()
+
+
+# Templates loaded once at startup. demo.html and social-banner.html are
+# large; reading them on every request would add ~100 us of syscall +
+# parse overhead each time, which adds up under load. The substitution
+# itself (a single str.replace) is cheap. Reloading on edit happens via
+# uvicorn --reload in dev, which restarts the worker.
+_DEMO_HTML = _load_text(os.path.join(HERE, "demo.html"))
+_SOCIAL_BANNER_HTML = _load_text(os.path.join(HERE, "social-banner.html"))
+_ROBOTS_TXT = _load_text(os.path.join(HERE, "robots.txt"))
+_SITEMAP_XML = _load_text(os.path.join(HERE, "sitemap.xml"))
+_LLMS_TXT = _load_text(os.path.join(HERE, "llms.txt"))
+
+
+def render(template: str, site_url: str) -> str:
+    return template.replace("{{SITE_URL}}", site_url)
+
 
 def get_api_key():
     key = os.environ.get("HF_TOKEN")
@@ -132,13 +176,13 @@ async def no_cache_dev_assets(request: Request, call_next):
 
 
 @app.get("/")
-def root():
-    return FileResponse(os.path.join(HERE, "demo.html"))
+def root(request: Request):
+    return HTMLResponse(render(_DEMO_HTML, site_url_for(request)))
 
 
 @app.get("/demo")
-def demo():
-    return FileResponse(os.path.join(HERE, "demo.html"))
+def demo(request: Request):
+    return HTMLResponse(render(_DEMO_HTML, site_url_for(request)))
 
 
 @app.get("/sandbox-only")
@@ -148,12 +192,48 @@ def sandbox_only():
 
 
 @app.get("/social-banner")
-def social_banner():
+def social_banner(request: Request):
     # Standalone hero — wordmark + subtitle + specs + animated DNA helix,
     # sized to fit common social-media canvases (Twitter / OG / LinkedIn /
     # HF). Used to grab cover-art screenshots without firing up the full
     # demo page.
-    return FileResponse(os.path.join(HERE, "social-banner.html"))
+    return HTMLResponse(render(_SOCIAL_BANNER_HTML, site_url_for(request)))
+
+
+# ---------------------------------------------------------------------
+# Discoverability surface: robots.txt, sitemap.xml, llms.txt, favicon.
+# These are tiny files but they are what indexers, AI answer engines
+# (Perplexity, ChatGPT browsing…) and social previews look for first.
+# ---------------------------------------------------------------------
+
+
+@app.get("/robots.txt", response_class=PlainTextResponse)
+def robots_txt(request: Request):
+    return PlainTextResponse(render(_ROBOTS_TXT, site_url_for(request)))
+
+
+@app.get("/sitemap.xml")
+def sitemap_xml(request: Request):
+    return Response(
+        content=render(_SITEMAP_XML, site_url_for(request)),
+        media_type="application/xml",
+    )
+
+
+@app.get("/llms.txt", response_class=PlainTextResponse)
+def llms_txt():
+    # llms.txt (https://llmstxt.org/) — Markdown index aimed at LLM-based
+    # agents that need a compact map of the site without scraping the
+    # whole editorial page. No {{SITE_URL}} substitution: links are
+    # either site-relative or absolute to canonical external URLs.
+    return PlainTextResponse(_LLMS_TXT, media_type="text/markdown; charset=utf-8")
+
+
+@app.get("/favicon.ico")
+def favicon():
+    # Browsers ask for /favicon.ico whether or not the page declared one.
+    # Redirect to the SVG logo so we don't ship a 404 on every cold load.
+    return RedirectResponse(url="/img/logo.svg", status_code=301)
 
 
 @app.get("/config")

assets/js/sections/efficiency.js

@@ -0,0 +1,151 @@
+// =========================================================================
+// §13, Efficiency: inference throughput vs number of prompts
+// =========================================================================
+// Numbers come from the public release dataset:
+//   HuggingFaceBio/carbon-inference-evals (data/train-00000-of-00001.parquet),
+//   filtered to non-remote prompt-scan runs through 512 prompts. Carbon and
+//   GENERator runs use vLLM dynamic batching (so batch ≡ num_prompts).
+//   Evo2 caps batch size to fit a single H100: Evo2 1B caps at 34 prompts,
+//   7B at 13, 20B and 40B at 4. Past those caps the throughput curve flattens
+//   because additional prompts spill into a second sequential mini-batch
+//   instead of widening the live one.
+//
+// Two-family palette: cool greens for the Carbon checkpoints (light → dark
+// = small → large), warm browns for the Evo2 baselines. Echoes the rest of
+// the demo so "Carbon vs Evo2" reads at a glance even when several lines
+// stack inside the lower decade of the log axis.
+(function initDemo13() {
+  const host = document.getElementById("d13-throughput");
+  if (!host) return;
+
+  const PROMPTS = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512];
+
+  // throughput in output bp/s, indexed positionally against PROMPTS above.
+  // Source: carbon-inference-evals · output_bp_per_second column.
+  const SERIES = [
+    { name: "Carbon-500M", color: "#A8DCB4", weight: 2.8,
+      throughput: [3416.78, 5395.16, 11071.54, 21723.72, 43443.40, 74971.36, 110803.57, 161581.87, 146471.03, 152044.37] },
+    { name: "Carbon-3B",   color: "#6DBF7E", weight: 3.0,
+      throughput: [1489.33, 2916.85,  5561.60, 11309.62, 20109.93, 40027.81,  65218.26, 100126.89, 125130.82, 122840.91] },
+    { name: "Carbon-8B",   color: "#1A7A40", weight: 3.2,
+      throughput: [ 811.71, 1737.51,  3274.83,  6576.03, 12675.68, 22560.89,  39248.04,  46435.76,  76582.70,  85084.69] },
+    { name: "Evo2 1B",     color: "#C9A06A", weight: 2.6, capLabel: "min(n, 34)",
+      throughput: [  42.32,   86.48,   176.82,   351.63,   705.34,  1409.67,   1436.89,   1435.27,   1342.48,   1400.36] },
+    { name: "Evo2 7B",     color: "#8C7355", weight: 2.6, capLabel: "min(n, 13)",
+      throughput: [  33.28,   68.78,   132.86,   269.00,   267.13,   360.91,    441.94,    432.32,    453.76,    444.48] },
+    { name: "Evo2 20B",    color: "#5A4A38", weight: 2.6, capLabel: "min(n, 4)",
+      throughput: [  43.97,   86.04,   169.45,   175.90,   176.45,   177.16,    177.88,    180.47,    177.46,    177.17] },
+    { name: "Evo2 40B",    color: "#2A211A", weight: 2.6, capLabel: "min(n, 4)",
+      throughput: [  21.75,   43.01,    85.12,    85.74,    84.94,    87.20,     87.93,     85.63,     87.07,     86.78] },
+  ];
+
+  // ----- Layout ----------------------------------------------------------
+  // Right gutter is wider than longcontext.js's NIAH chart because we have
+  // 7 lines to label end-on (instead of 3) and Evo2 capLabels add a second
+  // line under each model name. Font sizes are bumped one notch above the
+  // §6 NIAH chart because this figure renders inside the same ~828 px
+  // section column as a 1000 px viewBox, so the type optically lands at
+  // ~10–11 px on screen — too small for a 7-series log–log plot. Sticking
+  // with the 1000×460 viewBox keeps the section grid intact and just
+  // restyles the contents.
+  const W = 1000, H = 460;
+  const padL = 86, padR = 178, padT = 30, padB = 64;
+  const innerW = W - padL - padR;
+  const innerH = H - padT - padB;
+
+  const xLo = Math.log2(1), xHi = Math.log2(512);
+  const yLo = Math.log10(10), yHi = Math.log10(300000);
+  const xFor = n => padL + ((Math.log2(n) - xLo) / (xHi - xLo)) * innerW;
+  const yFor = v => padT + ((yHi - Math.log10(v)) / (yHi - yLo)) * innerH;
+
+  // ----- Render ----------------------------------------------------------
+  function render() {
+    let svg = "";
+
+    // y-axis gridlines + labels (1-3-1-3 log decades, matches the source ref)
+    const Y_TICKS = [10, 30, 100, 300, 1000, 3000, 10000, 30000, 100000, 300000];
+    Y_TICKS.forEach(v => {
+      const y = yFor(v);
+      const isMajor = v === 10 || v === 100 || v === 1000 || v === 10000 || v === 100000;
+      svg += `<line x1="${padL}" y1="${y.toFixed(1)}" x2="${(W - padR).toFixed(1)}" y2="${y.toFixed(1)}" stroke="${isMajor ? "#e5e5e5" : "#f4f4f1"}" stroke-width="1"/>`;
+      svg += `<text x="${padL - 10}" y="${(y + 4).toFixed(1)}" font-family="JetBrains Mono" font-size="13" fill="${isMajor ? "#666" : "#b5b5b5"}" text-anchor="end">${formatY(v)}</text>`;
+    });
+    // Axis title (rotated, left side)
+    svg += `<text x="22" y="${(padT + innerH / 2).toFixed(1)}" font-family="JetBrains Mono" font-size="12" fill="#666" text-anchor="middle" transform="rotate(-90 22 ${(padT + innerH / 2).toFixed(1)})" letter-spacing="1.2">THROUGHPUT · BP/S · LOG</text>`;
+
+    // x-axis ticks + labels
+    PROMPTS.forEach(n => {
+      const x = xFor(n);
+      svg += `<line x1="${x.toFixed(1)}" y1="${(padT + innerH).toFixed(1)}" x2="${x.toFixed(1)}" y2="${(padT + innerH + 5).toFixed(1)}" stroke="#666" stroke-width="1"/>`;
+      svg += `<text x="${x.toFixed(1)}" y="${(padT + innerH + 22).toFixed(1)}" font-family="JetBrains Mono" font-size="13" fill="#1f1f1d" text-anchor="middle">${n}</text>`;
+    });
+    // x-axis title
+    svg += `<text x="${(padL + innerW / 2).toFixed(1)}" y="${(padT + innerH + 50).toFixed(1)}" font-family="JetBrains Mono" font-size="12" fill="#666" text-anchor="middle" letter-spacing="1.2">NUMBER OF PROMPTS · LOG</text>`;
+
+    // baseline at the bottom of the plot zone
+    svg += `<line x1="${padL}" y1="${(padT + innerH).toFixed(1)}" x2="${(W - padR).toFixed(1)}" y2="${(padT + innerH).toFixed(1)}" stroke="#1f1f1d" stroke-width="1.2"/>`;
+
+    // lines (drawn lightest → darkest so the dark Carbon-8B sits on top of
+    // its lighter Carbon siblings where the curves cross at low n)
+    const drawOrder = [
+      "Carbon-500M", "Evo2 1B", "Evo2 20B", "Evo2 40B", "Evo2 7B",
+      "Carbon-3B", "Carbon-8B"
+    ];
+    drawOrder.forEach(name => {
+      const s = SERIES.find(s => s.name === name);
+      let d = "";
+      s.throughput.forEach((v, i) => {
+        const x = xFor(PROMPTS[i]);
+        const y = yFor(v);
+        d += (i === 0 ? "M" : "L") + x.toFixed(1) + " " + y.toFixed(1);
+      });
+      svg += `<path d="${d}" fill="none" stroke="${s.color}" stroke-width="${s.weight}" stroke-linejoin="round" stroke-linecap="round"/>`;
+      s.throughput.forEach((v, i) => {
+        const x = xFor(PROMPTS[i]);
+        const y = yFor(v);
+        svg += `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="3.6" fill="${s.color}" stroke="#fff" stroke-width="1.2"/>`;
+      });
+    });
+
+    // End-of-line labels in the right gutter. Each label sits at the y of
+    // the n=512 data point; we then nudge overlapping labels apart so the
+    // 7-line stack stays legible (Carbon-500M / Carbon-3B are within 0.09
+    // log-decades of each other).
+    const xEnd = xFor(512) + 14;
+    const labels = SERIES.map(s => {
+      const last = s.throughput[s.throughput.length - 1];
+      return { name: s.name, color: s.color, capLabel: s.capLabel, value: last, y: yFor(last) };
+    }).sort((a, b) => a.y - b.y);
+
+    const minGap = 36;        // px, room for two text lines per label
+    for (let i = 1; i < labels.length; i++) {
+      if (labels[i].y - labels[i - 1].y < minGap) {
+        labels[i].y = labels[i - 1].y + minGap;
+      }
+    }
+
+    labels.forEach(l => {
+      svg += `<text x="${xEnd.toFixed(1)}" y="${l.y.toFixed(1)}" font-family="JetBrains Mono" font-size="14" fill="${l.color}" font-weight="600">${l.name}</text>`;
+      const sub = l.capLabel
+        ? `<tspan fill="#aaa">batch </tspan>${l.capLabel}`
+        : `<tspan fill="#aaa">${formatBp(l.value)} bp/s</tspan>`;
+      svg += `<text x="${xEnd.toFixed(1)}" y="${(l.y + 16).toFixed(1)}" font-family="JetBrains Mono" font-size="11" fill="#888">${sub}</text>`;
+    });
+
+    host.setAttribute("viewBox", `0 0 ${W} ${H}`);
+    host.innerHTML = svg;
+  }
+
+  // 10 → "10", 1000 → "1k", 30000 → "30k", 100000 → "100k"
+  function formatY(v) {
+    if (v >= 1000) return (v / 1000) + "k";
+    return String(v);
+  }
+  function formatBp(v) {
+    if (v >= 10000) return Math.round(v / 1000) + "k";
+    if (v >= 1000)  return (v / 1000).toFixed(1) + "k";
+    return Math.round(v).toLocaleString();
+  }
+
+  render();
+})();

assets/js/sections/intro.js

@@ -192,6 +192,11 @@
         sep: Math.abs(yA - yB),
         top: topSeq[seqIdx],
         bot: comp[topSeq[seqIdx]],
+        // Which strand currently sits visually higher? Used by letterFade
+        // to map each glyph to its attaching strand's depth. The flag flips
+        // every time the strands cross, which is what drives the alternating
+        // bright/dim pattern of adjacent rungs around the helix waist.
+        topOnA: yA <= yB,
       });
       seqIdx++;
     }
@@ -357,15 +362,38 @@
     }
 
     // 4. Letter glyphs themselves (no haloes, since the rung is already
-    //    interrupted around each letter). fade tracks fadeForSep so the
-    //    glyphs at the crossings sit as ghosted "out of focus" letters
-    //    rather than disappearing entirely — fills the visual gap at the
-    //    helix waist without competing with the rungs at full opacity.
+    //    interrupted around each letter). Each glyph fades independently
+    //    of its rung-mate via letterFade: the rung-wide sep fade still
+    //    sets the baseline, but each letter is then biased by the depth
+    //    (z) of the strand it attaches to. Net result: instead of two
+    //    equally-ghosted letters stacked on top of each other at the
+    //    crossings, the front-strand letter holds clearly readable while
+    //    the back-strand letter recedes to a barely-there ghost. And
+    //    because the "front" strand flips at every half-period, the
+    //    bright letter alternates between the upper and lower rung
+    //    position from one rung to the next around the helix waist —
+    //    echoes the strand back-arc gradients painted in step 1.
+    function letterFade(r, isTop) {
+      const onA = isTop ? r.topOnA : !r.topOnA;
+      const z = zAt(r.x, onA ? phaseA : phaseB);     // -1 (back) … +1 (front)
+      const lo = 12, hi = 28;
+      const t = Math.max(0, Math.min(1, (r.sep - lo) / (hi - lo)));
+      const ease = t * t * (3 - 2 * t);
+      const sepFade = 0.18 + 0.82 * ease;
+      // Bias only kicks in around the crossings; wide rungs (where the
+      // strands sit symmetric and z ≈ 0 anyway) keep both letters at
+      // full opacity. Amplitude 0.37 lands the front letter near 0.55
+      // and the back letter at the 0.08 floor when |z| = 1.
+      const bias = z * (1 - ease) * 0.37;
+      return Math.max(0.08, Math.min(1, sepFade + bias));
+    }
+
     for (const r of rungs) {
-      const fade = fadeForSep(r.sep);
       const [yA, yB] = rungLetterYs(r);
-      text(svg, r.x, yA, r.top, { mono: true, size: 10, weight: 600, fill: GREEN, opacity: fade });
-      text(svg, r.x, yB, r.bot, { mono: true, size: 10, weight: 600, fill: GREEN, opacity: fade });
+      const topFade = letterFade(r, true);
+      const botFade = letterFade(r, false);
+      text(svg, r.x, yA, r.top, { mono: true, size: 10, weight: 600, fill: GREEN, opacity: topFade });
+      text(svg, r.x, yB, r.bot, { mono: true, size: 10, weight: 600, fill: GREEN, opacity: botFade });
     }
 
     // 5′ / 3′ end tags. Each label is placed *outside* the higher/lower

assets/styles/sandbox.css

@@ -230,7 +230,16 @@
   min-height: 80px;
   flex: 1 0 auto;
 }
-#panel-sandbox .sb-seq-block.empty { color: #aaa; font-weight: 300; letter-spacing: normal; }
+#panel-sandbox .sb-seq-block.empty {
+  color: #cfcfcf;
+  font-weight: 300;
+  letter-spacing: normal;
+  background: #fff;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 #panel-sandbox .sb-seq-line { white-space: pre; }
 #panel-sandbox .sb-pos { color: #bbb; user-select: none; font-weight: 300; }
 #panel-sandbox .sb-seq-line.tail::after {

demo.html

@@ -3,7 +3,92 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Carbon · what the model learned</title>
+<title>Carbon · an open-source autoregressive genomic foundation model</title>
+
+<!-- ============================================================ -->
+<!-- Discoverability: SEO + social previews + AI-agent metadata.  -->
+<!-- {{SITE_URL}} is substituted at request time by app.py with   -->
+<!-- the absolute base URL (scheme + host) the page was served    -->
+<!-- under, so og:image / og:url stay correct whether we're on    -->
+<!-- the HF Space, a preview deploy, or localhost.                -->
+<!-- ============================================================ -->
+<meta name="description" content="Carbon is Hugging Face's open-source family of autoregressive genomic foundation models for DNA. Explore an interactive demo of what the 3B checkpoint learned: streaming continuation, variant effect prediction, ESMFold structure prediction, a UMAP of half a million gene embeddings, and the full training recipe.">
+<meta name="keywords" content="Carbon, DNA, genomics, foundation model, Hugging Face, autoregressive, language model, bioinformatics, variant effect prediction, ESMFold, UMAP, gene embeddings, open source">
+<meta name="author" content="Hugging Face Bio">
+<meta name="theme-color" content="#f7f5ee">
+<meta name="color-scheme" content="light">
+<link rel="canonical" href="{{SITE_URL}}/">
+
+<!-- Favicon. Modern browsers honour SVG; we keep the PNG as a   -->
+<!-- raster fallback for the few that don't (Safari < 14 etc.). -->
+<link rel="icon" type="image/svg+xml" href="/img/logo.svg">
+<link rel="icon" type="image/png" href="/img/logo.png">
+<link rel="apple-touch-icon" href="/img/logo.png">
+
+<!-- Open Graph (Facebook, LinkedIn, Slack, Discord, iMessage…). -->
+<!-- og:image points at /img/logo.png, which is the wide Carbon  -->
+<!-- wordmark+helix lockup (1153x634, ~OG-shaped). Swap with a   -->
+<!-- proper 1200x630 screenshot of /social-banner once exported. -->
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="Carbon">
+<meta property="og:title" content="Carbon · an open-source autoregressive genomic foundation model">
+<meta property="og:description" content="An interactive editorial demo of Carbon, Hugging Face's open-source DNA foundation model. Streaming continuation, variant scoring, protein folding, gene-embedding UMAP, and the full training recipe.">
+<meta property="og:url" content="{{SITE_URL}}/">
+<meta property="og:image" content="{{SITE_URL}}/img/logo.png">
+<meta property="og:image:width" content="1153">
+<meta property="og:image:height" content="634">
+<meta property="og:image:alt" content="Carbon — the wordmark wrapped in a four-strand DNA helix.">
+<meta property="og:locale" content="en_US">
+
+<!-- Twitter / X card. summary_large_image renders the OG image  -->
+<!-- as a full-bleed preview tile.                               -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="@huggingface">
+<meta name="twitter:creator" content="@huggingface">
+<meta name="twitter:title" content="Carbon · an open-source autoregressive genomic foundation model">
+<meta name="twitter:description" content="An interactive editorial demo of Carbon, Hugging Face's open-source DNA foundation model. Streaming continuation, variant scoring, protein folding, gene-embedding UMAP, and the full training recipe.">
+<meta name="twitter:image" content="{{SITE_URL}}/img/logo.png">
+<meta name="twitter:image:alt" content="Carbon — the wordmark wrapped in a four-strand DNA helix.">
+
+<!-- JSON-LD structured data. Helps search engines and LLM-      -->
+<!-- powered answer engines (Perplexity, ChatGPT browsing, etc.) -->
+<!-- understand what this page is: a tech article about an open- -->
+<!-- source software model, with links back to its model card,   -->
+<!-- code, and dataset.                                          -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "TechArticle",
+      "@id": "{{SITE_URL}}/#article",
+      "headline": "Carbon · an open-source autoregressive genomic foundation model",
+      "description": "An interactive editorial walkthrough of Carbon, Hugging Face's open-source DNA foundation model: streaming continuation, variant effect prediction, ESMFold-based protein structure prediction, a UMAP of ~500k gene embeddings, and the full training recipe (tokenizer, loss, dataset, results).",
+      "url": "{{SITE_URL}}/",
+      "image": "{{SITE_URL}}/img/logo.png",
+      "inLanguage": "en",
+      "author": { "@type": "Organization", "name": "Hugging Face Bio", "url": "https://huggingface.co/HuggingFaceBio" },
+      "publisher": { "@type": "Organization", "name": "Hugging Face", "url": "https://huggingface.co" },
+      "about": {
+        "@type": "SoftwareApplication",
+        "name": "Carbon-3B",
+        "applicationCategory": "ScienceApplication",
+        "operatingSystem": "Any",
+        "url": "https://huggingface.co/HuggingFaceBio/Carbon-3B",
+        "description": "Autoregressive genomic foundation model. 3B parameters, 393,216 bp context, 6-mer tokenizer, trained on 1T tokens of DNA across the tree of life.",
+        "license": "https://huggingface.co/HuggingFaceBio/Carbon-3B",
+        "isAccessibleForFree": true
+      },
+      "isPartOf": {
+        "@type": "WebSite",
+        "name": "Carbon",
+        "url": "{{SITE_URL}}/"
+      }
+    }
+  ]
+}
+</script>
+
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap">
@@ -1871,11 +1956,43 @@ print(f"log P(alt) - log P(ref) at pos 20: {delta:+.3f}")</code></pre></div>
 
   <div class="section-body">
   <div class="demo" id="demo13">
-    <!-- TODO: drop in the real efficiency figure once it's exported. Placeholder
-         below holds the slot so the section reads cleanly at full layout. -->
-    <div style="padding:48px 24px;border:1px dashed #c7c2b3;background:#fafaf6;color:#888;font-family:'JetBrains Mono',monospace;font-size:11px;text-align:center;letter-spacing:1px">
-      EFFICIENCY FIGURE · COMING SOON<br>
-      <span style="font-size:10px;color:#aaa;text-transform:none;letter-spacing:0">throughput / memory vs Evo2 across context lengths</span>
+    <!-- Caption stack:
+           - eyebrow (mono, green)  : "what is this chart"
+           - rule line              : a thin neutral hairline that separates
+                                      eyebrow from secondary meta, lifting
+                                      the title above an undifferentiated
+                                      string of bullet-separated notes
+           - meta line (mono, grey) : units, hardware, axes
+         The implementation detail (vLLM / Evo2 native runner) was previously
+         crammed into the same line as the title; it now lives next to the
+         legend at the bottom where the reader actually looks for "how was
+         this measured" once they've parsed the curves. -->
+    <div class="fig-caption" style="display:flex;align-items:baseline;gap:14px;flex-wrap:nowrap;margin-top:0;margin-bottom:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap">
+      <span style="color:#317f3f;font-weight:600">Fig · Inference throughput</span>
+      <span aria-hidden="true" style="flex:1;min-width:24px;height:1px;background:#e5e5e5;align-self:center"></span>
+      <span style="color:#1f1f1d">Output bp/s</span>
+      <span style="color:#aaa">·</span>
+      <span style="color:#888">Single H100</span>
+    </div>
+    <svg id="d13-throughput" preserveAspectRatio="xMinYMin meet" style="display:block;width:100%;background:#fff;border:1px solid #eee"></svg>
+    <!-- Bigger sentence-case legend (.chart-legend variant from sequence.css)
+         to make the 7-model key feel like a proper colour reference rather
+         than a caption strip. The "Legend" prefix uses the same mono-uppercase
+         editorial-label register as .seq-label / .sb-examples-label so it
+         reads as a section gutter rather than as another item in the row. -->
+    <div class="track-axis-label chart-legend" style="justify-content:flex-start">
+      <span style="font-family:'JetBrains Mono',monospace;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1.5px;font-weight:500">Legend</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#1A7A40"></span>Carbon-8B</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#6DBF7E"></span>Carbon-3B</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#A8DCB4"></span>Carbon-500M</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#C9A06A"></span>Evo2 1B</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#8C7355"></span>Evo2 7B</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#5A4A38"></span>Evo2 20B</span>
+      <span class="chart-legend__item"><span class="legend-swatch" style="background:#2A211A"></span>Evo2 40B</span>
+    </div>
+    <div style="margin-top:14px;padding-top:10px;border-top:1px solid #eee;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#888;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px">
+      <span>Source · <a href="https://huggingface.co/datasets/HuggingFaceBio/carbon-inference-evals" style="color:#1f1f1d;text-decoration:underline">carbon-inference-evals</a></span>
+      <span style="color:#aaa">vLLM for Carbon · Evo2 native runner</span>
     </div>
   </div>
 
@@ -2045,6 +2162,7 @@ print(f"log P(alt) - log P(ref) at pos 20: {delta:+.3f}")</code></pre></div>
 <script src="/assets/js/sections/architecture.js"></script>
 <script src="/assets/js/sections/longcontext.js"></script>
 <script src="/assets/js/sections/results.js"></script>
+<script src="/assets/js/sections/efficiency.js"></script>
 <script src="/assets/js/sections/sandbox.js"></script>
 <script src="/assets/js/sections/umap.js"></script>
 <script src="/assets/js/sections/tree.js"></script>

img/Group 2.eps

@@ -0,0 +1,971 @@
+%!PS-Adobe-3.0 EPSF-3.0
+%APL_DSC_Encoding: UTF8
+%APLProducer: (Version 26.2 (Build 25C56) Quartz PS Context)
+%%Title: (Unknown)
+%%Creator: (Unknown)
+%%CreationDate: (Unknown)
+%%For: (Unknown)
+%%DocumentData: Clean7Bit
+%%LanguageLevel: 2
+%%Pages: 1
+%%BoundingBox: 0 0 145 144
+%%EndComments
+%%BeginProlog
+%%BeginFile: cg-pdf.ps
+%%Copyright: Copyright 2000-2004 Apple Computer Incorporated.
+%%Copyright: All Rights Reserved.
+currentpacking true setpacking
+/cg_md 141 dict def
+cg_md begin
+/L3? languagelevel 3 ge def
+/bd{bind def}bind def
+/ld{load def}bd
+/xs{exch store}bd
+/xd{exch def}bd
+/cmmtx matrix def
+mark
+/sc/setcolor
+/scs/setcolorspace
+/dr/defineresource
+/fr/findresource
+/T/true
+/F/false
+/d/setdash
+/w/setlinewidth
+/J/setlinecap
+/j/setlinejoin
+/M/setmiterlimit
+/i/setflat
+/rc/rectclip
+/rf/rectfill
+/rs/rectstroke
+/f/fill
+/f*/eofill
+/sf/selectfont
+/s/show
+%/as/ashow
+/xS/xshow
+/yS/yshow
+/xyS/xyshow
+/S/stroke
+/m/moveto
+/l/lineto
+/c/curveto
+/h/closepath
+/n/newpath
+/q/gsave
+/Q/grestore
+counttomark 2 idiv
+%dup (number of ld's = )print == flush	% *** how many 
+{ld}repeat pop
+/SC{	% CSname
+    /ColorSpace fr scs
+}bd
+/sopr /setoverprint where{pop/setoverprint}{/pop}ifelse ld
+/soprm /setoverprintmode where{pop/setoverprintmode}{/pop}ifelse ld
+/cgmtx matrix def
+/sdmtx{cgmtx currentmatrix pop}bd
+/CM {cgmtx setmatrix}bd		% pop the ctm: our gstate ctm on host is now identity
+/cm {cmmtx astore CM concat}bd	% reset the matrix and then concat
+/W{clip newpath}bd
+/W*{eoclip newpath}bd
+
+statusdict begin product end dup (HP) anchorsearch{
+    pop pop pop	% pop off the search results
+    true
+}{
+    pop	% previous search result
+   (hp) anchorsearch{
+	pop pop true
+    }{
+	pop false
+    }ifelse
+}ifelse
+
+{	% HP is the product: we use this method of stroking because of a bug in their clone printers with certain T3 fonts
+    { 
+	{ % charCode Wx Wy
+	    pop pop % charCode
+	    (0)dup 0 4 -1 roll put
+	    F charpath
+	}cshow
+    }
+}{
+    {F charpath}
+}ifelse
+/cply exch bd
+/cps {cply stroke}bd
+/pgsave 0 def
+/bp{/pgsave save store}bd
+/ep{pgsave restore showpage}def		% dont' bind
+/re{4 2 roll m 1 index 0 rlineto 0 exch rlineto neg 0 rlineto h}bd
+
+/scrdict 10 dict def
+/scrmtx matrix def
+/patarray 0 def
+/createpat{patarray 3 1 roll put}bd
+/makepat{
+scrmtx astore pop
+gsave
+initgraphics
+CM 
+patarray exch get
+scrmtx
+makepattern
+grestore
+setpattern
+}bd
+
+/cg_BeginEPSF{
+    userdict save/cg_b4_Inc_state exch put
+    userdict/cg_endepsf/cg_EndEPSF load put
+    count userdict/cg_op_count 3 -1 roll put 
+    countdictstack dup array dictstack userdict/cg_dict_array 3 -1 roll put
+    3 sub{end}repeat
+    /showpage {} def
+    0 setgray 0 setlinecap 1 setlinewidth 0 setlinejoin
+    10 setmiterlimit [] 0 setdash newpath
+    false setstrokeadjust false setoverprint	% don't use F
+}bd
+/cg_EndEPSF{
+  countdictstack 3 sub { end } repeat
+  cg_dict_array 3 1 index length 3 sub getinterval
+  {begin}forall
+  count userdict/cg_op_count get sub{pop}repeat
+  userdict/cg_b4_Inc_state get restore
+  F setpacking
+}bd
+
+/cg_biproc{currentfile/RunLengthDecode filter}bd
+/cg_aiproc{currentfile/ASCII85Decode filter/RunLengthDecode filter}bd
+/ImageDataSource 0 def
+L3?{
+    /cg_mibiproc{pop pop/ImageDataSource{cg_biproc}def}bd
+    /cg_miaiproc{pop pop/ImageDataSource{cg_aiproc}def}bd
+}{
+    /ImageBandMask 0 def
+    /ImageBandData 0 def
+    /cg_mibiproc{
+	string/ImageBandMask xs
+	string/ImageBandData xs
+	/ImageDataSource{[currentfile/RunLengthDecode filter dup ImageBandMask/readstring cvx
+	    /pop cvx dup ImageBandData/readstring cvx/pop cvx]cvx bind}bd
+    }bd
+    /cg_miaiproc{	
+	string/ImageBandMask xs
+	string/ImageBandData xs
+	/ImageDataSource{[currentfile/ASCII85Decode filter/RunLengthDecode filter
+	    dup ImageBandMask/readstring cvx
+	    /pop cvx dup ImageBandData/readstring cvx/pop cvx]cvx bind}bd
+    }bd
+}ifelse
+/imsave 0 def
+/BI{save/imsave xd mark}bd
+/EI{imsave restore}bd
+/ID{
+counttomark 2 idiv
+dup 2 add	% leave room for imagetype and imagematrix
+dict begin
+{def} repeat
+pop		% remove mark
+/ImageType 1 def
+/ImageMatrix[Width 0 0 Height neg 0 Height]def
+currentdict dup/ImageMask known{ImageMask}{F}ifelse exch
+% currentdict on stack
+L3?{
+    dup/MaskedImage known
+    { 
+	pop
+	<<
+	    /ImageType 3
+	    /InterleaveType 2
+	    /DataDict currentdict
+	    /MaskDict
+	    <<  /ImageType 1
+		/Width Width
+		/Height Height
+		/ImageMatrix ImageMatrix
+		/BitsPerComponent 1
+		/Decode [0 1]
+		currentdict/Interpolate known
+		{/Interpolate Interpolate}if
+	    >>
+	>>
+    }if
+}if
+exch
+{imagemask}{image}ifelse	
+end	% pop imagedict from dict stack
+}bd
+
+/cguidfix{statusdict begin mark version end
+{cvr}stopped{cleartomark 0}{exch pop}ifelse
+2012 lt{dup findfont dup length dict begin
+{1 index/FID ne 2 index/UniqueID ne and
+{def} {pop pop} ifelse}forall
+currentdict end definefont pop
+}{pop}ifelse
+}bd
+/t_array 0 def
+/t_i 0 def
+/t_c 1 string def
+/x_proc{ % x y
+    exch t_array t_i get add exch moveto
+    /t_i t_i 1 add store
+}bd
+/y_proc{ % x y
+    t_array t_i get add moveto
+    /t_i t_i 1 add store
+}bd
+/xy_proc{
+        % x y
+	t_array t_i 2 copy 1 add get 3 1 roll get 
+	4 -1 roll add 3 1 roll add moveto
+	/t_i t_i 2 add store
+}bd
+/sop 0 def		% don't bind sop
+/cp_proc/x_proc ld 	% default moveto proc is for xwidths only
+/base_charpath		% string array
+{
+    /t_array xs
+    /t_i 0 def
+    { % char
+	t_c 0 3 -1 roll put
+        currentpoint
+	t_c cply sop
+        cp_proc
+    }forall
+    /t_array 0 def
+}bd
+/sop/stroke ld		% default sop is stroke. Done here so we don't bind in /base_charpath 
+
+% default sop is stroke
+/nop{}def
+/xsp/base_charpath ld
+/ysp{/cp_proc/y_proc ld base_charpath/cp_proc/x_proc ld}bd
+/xysp{/cp_proc/xy_proc ld base_charpath/cp_proc/x_proc ld}bd
+/xmp{/sop/nop ld /cp_proc/x_proc ld base_charpath/sop/stroke ld}bd
+/ymp{/sop/nop ld /cp_proc/y_proc ld base_charpath/sop/stroke ld}bd
+/xymp{/sop/nop ld /cp_proc/xy_proc ld base_charpath/sop/stroke ld}bd
+/refnt{ % newname encoding fontname
+findfont dup length dict copy dup
+/Encoding 4 -1 roll put 
+definefont pop
+}bd
+/renmfont{ % newname fontname
+findfont dup length dict copy definefont pop
+}bd
+
+L3? dup dup{save exch}if
+
+% languagelevel2 ONLY code goes here
+
+/Range 0 def
+/DataSource 0 def
+/val 0 def
+/nRange 0 def
+/mulRange 0 def
+/d0 0 def
+/r0 0 def
+/di 0 def
+/ri 0 def
+/a0 0 def
+/a1 0 def
+/r1 0 def
+/r2 0 def
+/dx 0 def
+/Nsteps 0 def
+/sh3tp 0 def
+/ymax 0 def
+/ymin 0 def
+/xmax 0 def
+/xmin 0 def
+
+/setupFunEval % funDict -- 	% this calculates and sets up a function dict for evaulation.
+{
+    begin
+	/nRange Range length 2 idiv store
+	/mulRange   % precompute the range data needed to map a sample value from the table to a range value
+		    % this data looks like [ range0mul range0min range1mul range1min ... rangeN-1mul rangeN-1min ]
+	[ 
+	    0 1 nRange 1 sub
+	    { % index
+		    2 mul/nDim2 xd		% 2*dimension# we are dealing with
+		    Range nDim2 get		% ymin
+		    Range nDim2 1 add get	% ymin ymax 
+		    1 index sub			% ymin (ymax-ymin)
+						% xmin = 0, xmax = 255 (2^bitspersample - 1)
+		    255 div			% ymin (ymax-ymin)/(xmax - xmin)
+		    exch			% (ymax-ymin)/(xmax - xmin) ymin
+	    }for
+	]store
+    end
+}bd
+
+/FunEval % val1 fundict -> comp1 comp2 ... compN
+{
+    begin
+	% the value passed in is the base index into the table
+	nRange mul /val xd	% compute the actual index to the table
+				% since there are nRange entries per base index
+	0 1 nRange 1 sub
+	{
+	    dup 2 mul/nDim2 xd % dim
+	    val	% base value to use to do our lookup
+	    add DataSource exch get %  lookedupval
+	    mulRange nDim2 get mul 	% lookedupval*(ymax-ymin)/(xmax-xmin)
+	    mulRange nDim2 1 add get % lookedupval*(ymax-ymin)/(xmax-xmin) ymin
+	    add % interpolated result
+	}for	% comp1 comp2 ... compN
+    end
+}bd
+
+/max % a b -> max(a, b)
+{
+	2 copy lt
+	{exch pop}{pop}ifelse
+}bd
+
+/sh2
+{	% emulation of shading type 2. Assumes shading dictionary is top dictionary on the dict stack
+	/Coords load aload pop 	% x0 y0 x1 y1
+	3 index 3 index translate	% origin is now at beginning point of shading
+					% x0 y0 x1 y1
+	3 -1 roll sub	% x0 x1 y1-y0
+	3 1 roll exch 	% y1-y0 x1 x0
+	sub				% y1-y0 x1-x0
+	2 copy
+	dup mul exch dup mul add sqrt	% length of segment between two points
+	dup
+	scale  
+	atan	% atan (dy/dx)
+	%dup (rotation angle = )print ==
+	rotate		% now line between 0,0 and 1,0 is the line perpendicular to which the axial lines are drawn					
+	
+	/Function load setupFunEval	% may need to setup function dictionary by calling setupFunEval
+	
+	% this is now specific to axial shadings. Compute the maximum bounds to fill
+	clippath {pathbbox}stopped {0 0 0 0}if newpath 	% x0 y0 x1 y1
+	/ymax xs
+	/xmax xs
+	/ymin xs
+	/xmin xs
+	currentdict/Extend known
+	{
+		/Extend load 0 get
+		{	
+			0/Function load FunEval sc	% evaluate the function to get a color and set it
+			xmin ymin xmin abs ymax ymin sub rectfill
+		}if
+	}if
+	% paint the rects. The sampling frequency is that of our table
+	/Nsteps/Function load/Size get 0 get 1 sub store
+	/dx 1 Nsteps div store
+	gsave
+		/di ymax ymin sub store
+		/Function load
+		% loop Nsteps + 1 times, incrementing the index by 1 each time
+		0 1 Nsteps
+		{
+			1 index FunEval sc
+			0 ymin dx di rectfill
+			dx 0 translate
+		}for
+		pop	% pop our function
+	grestore	% origin is back to start point
+	currentdict/Extend known
+	{
+		/Extend load 1 get
+		{	
+			Nsteps/Function load FunEval sc	% last element
+			1 ymin xmax 1 sub abs ymax ymin sub rectfill
+		}if
+	}if
+}bd
+
+/shp	% this paints our shape for shading type 3
+{	% x1 r1 x0 r0 -
+	4 copy
+
+	% fill interior arc
+	dup 0 gt{
+		0 exch a1 a0 arc
+	}{
+		pop 0 moveto
+	}ifelse
+
+	dup 0 gt{
+		0 exch a0 a1 arcn
+	}{
+		pop 0 lineto
+	}ifelse
+	
+	fill
+
+	% fill exterior arc
+	dup 0 gt{
+		0 exch a0 a1 arc
+	}{
+		pop 0 moveto
+	}ifelse
+
+	dup 0 gt{
+		0 exch a1 a0 arcn
+	}{
+		pop 0 lineto
+	}ifelse
+	
+	fill
+}bd
+
+/calcmaxs
+{	% calculate maximum distance vector from origin to corner points
+	% of bbox
+	xmin dup mul ymin dup mul add sqrt		% (xmin2 + ymin2)
+	xmax dup mul ymin dup mul add sqrt		% (xmax2 + ymin2)
+	xmin dup mul ymax dup mul add sqrt		% (xmin2 + ymax2)
+	xmax dup mul ymax dup mul add sqrt		% (xmax2 + ymax2)
+	max max max								% maximum value
+}bd
+
+/sh3
+{	% emulation of shading type 3. Assumes shading dictionary is top dictionary on the dict stack
+	/Coords load aload pop 	% x0 y0 r1 x1 y1 r2
+	5 index 5 index translate	% origin is now at first circle origin
+	3 -1 roll 6 -1 roll sub		% y0 r1 y1 r2 dx
+	3 -1 roll 5 -1 roll sub		% r1 r2 dx dy
+	2 copy dup mul exch dup mul add sqrt
+	/dx xs						% r1 r2 dx dy
+	2 copy 0 ne exch 0 ne or
+	{
+		% r1 r2 dx dy
+		exch atan rotate	% we are now rotated so dy is zero and positive values of dx move us as expected
+	}{
+		pop pop
+	}ifelse
+	% r1 r2		
+	/r2 xs
+	/r1 xs
+	/Function load 
+	dup/Size get 0 get 1 sub	% this is the size of our table minus 1
+	/Nsteps xs		% at some point we should optimize this better so NSteps is based on needed steps for the device
+	setupFunEval		% may need to setup function dictionary by calling setupFunEval
+	% determine the case:
+	% case 0: circle1 inside circle2
+	% case 1: circle 2 inside circle 1
+	% case 2: r1 = r2 
+	% case 3: r1 != r2
+	dx r2 add r1 lt{
+		% circle 2 inside of circle 1
+		0 
+	}{
+		dx r1 add r2 le
+		{ % circle 1 inside of circle 2
+			1
+		}{ % circles don't contain each other
+			r1 r2 eq
+			{	% equal
+				2
+			}{ % r1 != r2
+				3
+			}ifelse		
+		}ifelse
+	}ifelse
+	/sh3tp xs		% sh3tp has the number of our different cases
+	clippath {pathbbox}stopped {0 0 0 0}if 
+	newpath 	% x0 y0 x1 y1
+	/ymax xs
+	/xmax xs
+	/ymin xs
+	/xmin xs
+
+	% Arc angle atan( sqrt((dx*dx + dy*dy) - dr*dr), dr)
+	dx dup mul r2 r1 sub dup mul sub dup 0 gt
+	{
+		sqrt r2 r1 sub atan
+		/a0 exch 180 exch sub store 
+		/a1 a0 neg store 
+	}{
+		pop
+		/a0 0 store
+		/a1 360 store		
+	}ifelse		
+
+	currentdict/Extend known
+	{
+		/Extend load 0 get r1 0 gt and	% no need to extend if the radius of the first end is 0
+		{	
+			0/Function load FunEval sc	% evaluate the function to get a color and set it
+			% case 0: circle1 inside circle2
+			% case 1: circle 2 inside circle 1
+			% case 2: circles don't contain each other and r1 == r2
+			% case 3: circles don't contain each other and r1 != r2
+			{ 
+				{	% case 0
+					dx 0 r1 360 0 arcn
+					xmin ymin moveto
+					xmax ymin lineto
+					xmax ymax lineto
+					xmin ymax lineto
+					xmin ymin lineto
+					eofill		% for the bigger radius we fill everything except our circle
+				}
+				{	% case 1
+					r1 0 gt{0 0 r1 0 360 arc fill}if
+				}
+				{	% case 2
+					% r1 == r2, extend 0
+					% r3 = r, x3 = -(abs(minx) + r), x1 = 0
+				
+					% x(i+1) r(i+1) x(i) r(i) shp
+					0 r1 xmin abs r1 add neg r1 shp
+				}
+				{	% case 3
+					% no containment, r1 != r2
+				
+					r2 r1 gt{	% the endpoint we are drawing is that with a circle of zero radius
+						% x(i+1) r(i+1) x(i) r(i) shp
+						0 r1
+						r1 neg r2 r1 sub div dx mul	% this is point of beginning circle
+						0	% point of ending circle
+						shp	% takes x(i+1) r(i+1) x(i) r(i)
+					}{	% the first circle is the bigger of the two
+						% we find a circle on our line which is outside the bbox in the
+						% negative direction
+						% x(i+1) r(i+1) x(i) r(i) shp
+						0 r1 calcmaxs	% 0 r1 maxs
+						dup
+						% calculating xs: (-(maxs+r2)*x2)/(x2-(r1-r2))
+						r2 add dx mul dx r1 r2 sub sub div
+						neg				% maxs xs'
+						exch 1 index	% xs' maxs xs'
+						abs exch sub
+						shp
+					}ifelse
+				} 
+			}sh3tp get exec	% execute the extend at beginning proc for our shading type
+		}if
+	}if
+
+	% now do the shading
+	/d0 0 store
+	/r0 r1 store
+	/di dx Nsteps div store
+	/ri r2 r1 sub Nsteps div store 
+	/Function load 
+	0 1 Nsteps
+	{	% function t(i)
+		1 index FunEval sc
+		d0 di add r0 ri add d0 r0 shp
+		{
+		% fill interior arc
+		d0 0 r0 a1 a0 arc
+		d0 di add 0 r0 ri add a0 a1 arcn
+		fill
+		
+		% fill exterior arc
+		d0 0 r0 a0 a1 arc
+		d0 di add 0 r0 ri add a1 a0 arcn
+		fill
+		}pop
+		
+		% advance to next
+		/d0 d0 di add store
+		/r0 r0 ri add store
+	}for
+	pop	% pop our function dict
+
+	% handle Extend
+	currentdict/Extend known
+	{
+		/Extend load 1 get r2 0 gt and	% no need to extend if the radius of the last end is 0
+		{	
+			Nsteps/Function load FunEval sc	% last element
+			% case 0: circle1 inside circle2
+			% case 1: circle 2 inside circle 1
+			% case 2: circles don't contain each other and r1 == r2
+			% case 3: circles don't contain each other and r1 != r2
+			{ 
+				{
+					dx 0 r2 0 360 arc fill
+				} 
+				{
+					dx 0 r2 360 0 arcn
+					xmin ymin moveto
+					xmax ymin lineto
+					xmax ymax lineto
+					xmin ymax lineto
+					xmin ymin lineto
+					eofill		% for the bigger radius we fill everything except our circle
+				} 
+				{	% r1 == r2, extend 1
+					% r3 = r, x3 = (abs(xmax) + r), x1 = dx
+					% x(i+1) r(i+1) x(i) r(i) shp
+					xmax abs r1 add r1 dx r1 shp
+				}	
+				{	% no containment, r1 != r2
+			
+					r2 r1 gt{
+						% we find a circle on our line which is outside the bbox in the
+						% positive direction
+						% x(i+1) r(i+1) x(i) r(i) shp
+						calcmaxs dup	% maxs maxs
+						% calculating xs: ((maxs+r1)*x2)/(x2-(r2-r1))
+						r1 add dx mul dx r2 r1 sub sub div	% maxs xs
+						exch 1 index	% xs maxs xs
+						exch sub
+						dx r2
+						shp
+					}{	% the endpoint we are drawing is that with a circle of zero radius
+						% x(i+1) r(i+1) x(i) r(i) shp
+						r1 neg r2 r1 sub div dx mul	% this is point of ending circle
+						0		% radius of ending circle
+						dx 		% point of starting circle
+						r2		% radius of starting circle
+						shp
+					}ifelse
+				}
+			}			
+			sh3tp get exec	% execute the extend at end proc for our shading type
+		}if
+	}if
+}bd
+/sh		% emulation of shfill operator for type 2 and type 3 shadings based on type 0 functions
+{	% shadingDict --
+	begin
+		/ShadingType load dup dup 2 eq exch 3 eq or
+		{	% shadingtype
+			gsave
+				newpath
+				/ColorSpace load scs
+				currentdict/BBox known
+				{
+					/BBox load aload pop	% llx lly urx ury
+					2 index sub				% llx lly urx ury-lly
+					3 index					% llx lly urx ury-lly llx
+					3 -1 roll exch sub 
+					exch rectclip
+				}if
+				2 eq
+				{sh2}{sh3}ifelse
+			grestore
+		}{
+			% shadingtype
+			pop 
+			(DEBUG: shading type unimplemented\n)print flush
+		}ifelse
+	end
+}bd
+
+% end of language level 2 ONLY code
+
+{restore}if not dup{save exch}if
+% languagelevel3 ONLY code goes here
+	L3?{	% we do these loads conditionally or else they will fail on a level 2 printer
+		/sh/shfill ld
+		/csq/clipsave ld
+		/csQ/cliprestore ld
+	}if
+{restore}if
+
+%currentdict dup maxlength exch length sub (number of extra slots in md = )print == flush	% *** how many entries are free
+end
+setpacking
+% count 0 ne { pstack(***extras on stack during prolog execution***\n)print flush}if	% *** BARK if anything is left on stack
+%%EndFile
+%%EndProlog
+%%BeginSetup
+%%EndSetup
+%%Page: 1 1
+%%PageBoundingBox: 0 0 145 144
+%%BeginPageSetup
+cg_md begin
+bp
+sdmtx
+[ /CIEBasedABC 4 dict dup begin 
+/WhitePoint [ 0.9505 1.0000 1.0891 ] def 
+/DecodeABC [ 
+{ 1.0 0.0 3 -1 roll 1 index 1 index le { exch pop} { pop } ifelse 
+ 1 index 1 index ge { exch pop } { pop } ifelse < 
+0000000000000000000000000000000000000000000000000000000000000000
+0000000000000000000000000000000000000001010101010101010101010101
+0101010101010101010101010101010101010101010101020202020202020202
+0202020202020202020202020202020202030303030303030303030303030303
+0303030303030304040404040404040404040404040404040404050505050505
+0505050505050505050506060606060606060606060606060607070707070707
+0707070707070708080808080808080808080808090909090909090909090909
+0a0a0a0a0a0a0a0a0a0a0a0b0b0b0b0b0b0b0b0b0b0b0c0c0c0c0c0c0c0c0c0c
+0d0d0d0d0d0d0d0d0d0d0e0e0e0e0e0e0e0e0e0f0f0f0f0f0f0f0f0f10101010
+1010101010111111111111111112121212121212121313131313131313141414
+1414141414151515151515151616161616161616171717171717171818181818
+18181919191919191a1a1a1a1a1a1a1b1b1b1b1b1b1c1c1c1c1c1c1c1d1d1d1d
+1d1d1e1e1e1e1e1e1f1f1f1f1f1f202020202020212121212121222222222223
+2323232323242424242425252525252526262626262727272727282828282829
+292929292a2a2a2a2a2b2b2b2b2b2c2c2c2c2c2d2d2d2d2d2e2e2e2e2e2f2f2f
+2f2f303030303131313131323232323333333333343434343535353535363636
+36373737373838383839393939393a3a3a3a3b3b3b3b3c3c3c3c3d3d3d3d3e3e
+3e3e3f3f3f3f4040404041414141424242424343434444444445454545464646
+4647474748484848494949494a4a4a4b4b4b4b4c4c4c4d4d4d4d4e4e4e4f4f4f
+4f50505051515151525252535353535454545555555656565657575758585859
+59595a5a5a5a5b5b5b5c5c5c5d5d5d5e5e5e5f5f5f6060606061616162626263
+63636464646565656666666767676868686969696a6a6a6b6b6b6c6c6d6d6d6e
+6e6e6f6f6f707070717171727273737374747475757576767677777878787979
+797a7a7b7b7b7c7c7c7d7d7e7e7e7f7f7f808081818182828283838484848585
+86868687878888888989898a8a8b8b8b8c8c8d8d8d8e8e8f8f90909091919292
+9293939494949595969697979798989999999a9a9b9b9c9c9c9d9d9e9e9f9f9f
+a0a0a1a1a2a2a3a3a3a4a4a5a5a6a6a6a7a7a8a8a9a9aaaaabababacacadadae
+aeafafb0b0b0b1b1b2b2b3b3b4b4b5b5b6b6b6b7b7b8b8b9b9bababbbbbcbcbd
+bdbebebebfbfc0c0c1c1c2c2c3c3c4c4c5c5c6c6c7c7c8c8c9c9cacacbcbcccc
+cdcdcececfcfd0d0d1d1d2d2d3d3d4d4d5d5d6d6d7d7d8d8d9d9dadadbdcdcdd
+dddededfdfe0e0e1e1e2e2e3e3e4e4e5e6e6e7e7e8e8e9e9eaeaebebecededee
+eeefeff0f0f1f1f2f3f3f4f4f5f5f6f6f7f8f8f9f9fafafbfcfcfdfdfefeffff
+>  dup length 1 sub 3 -1 roll mul dup dup floor cvi exch ceiling 
+ cvi 3 index exch get 4 -1 roll 3 -1 roll get
+ dup 3 1 roll sub 3 -1 roll dup floor cvi sub mul add 255 div } bind 
+
+{ 1.0 0.0 3 -1 roll 1 index 1 index le { exch pop} { pop } ifelse 
+ 1 index 1 index ge { exch pop } { pop } ifelse < 
+0000000000000000000000000000000000000000000000000000000000000000
+0000000000000000000000000000000000000001010101010101010101010101
+0101010101010101010101010101010101010101010101020202020202020202
+0202020202020202020202020202020202030303030303030303030303030303
+0303030303030304040404040404040404040404040404040404050505050505
+0505050505050505050506060606060606060606060606060607070707070707
+0707070707070708080808080808080808080808090909090909090909090909
+0a0a0a0a0a0a0a0a0a0a0a0b0b0b0b0b0b0b0b0b0b0b0c0c0c0c0c0c0c0c0c0c
+0d0d0d0d0d0d0d0d0d0d0e0e0e0e0e0e0e0e0e0f0f0f0f0f0f0f0f0f10101010
+1010101010111111111111111112121212121212121313131313131313141414
+1414141414151515151515151616161616161616171717171717171818181818
+18181919191919191a1a1a1a1a1a1a1b1b1b1b1b1b1c1c1c1c1c1c1c1d1d1d1d
+1d1d1e1e1e1e1e1e1f1f1f1f1f1f202020202020212121212121222222222223
+2323232323242424242425252525252526262626262727272727282828282829
+292929292a2a2a2a2a2b2b2b2b2b2c2c2c2c2c2d2d2d2d2d2e2e2e2e2e2f2f2f
+2f2f303030303131313131323232323333333333343434343535353535363636
+36373737373838383839393939393a3a3a3a3b3b3b3b3c3c3c3c3d3d3d3d3e3e
+3e3e3f3f3f3f4040404041414141424242424343434444444445454545464646
+4647474748484848494949494a4a4a4b4b4b4b4c4c4c4d4d4d4d4e4e4e4f4f4f
+4f50505051515151525252535353535454545555555656565657575758585859
+59595a5a5a5a5b5b5b5c5c5c5d5d5d5e5e5e5f5f5f6060606061616162626263
+63636464646565656666666767676868686969696a6a6a6b6b6b6c6c6d6d6d6e
+6e6e6f6f6f707070717171727273737374747475757576767677777878787979
+797a7a7b7b7b7c7c7c7d7d7e7e7e7f7f7f808081818182828283838484848585
+86868687878888888989898a8a8b8b8b8c8c8d8d8d8e8e8f8f90909091919292
+9293939494949595969697979798989999999a9a9b9b9c9c9c9d9d9e9e9f9f9f
+a0a0a1a1a2a2a3a3a3a4a4a5a5a6a6a6a7a7a8a8a9a9aaaaabababacacadadae
+aeafafb0b0b0b1b1b2b2b3b3b4b4b5b5b6b6b6b7b7b8b8b9b9bababbbbbcbcbd
+bdbebebebfbfc0c0c1c1c2c2c3c3c4c4c5c5c6c6c7c7c8c8c9c9cacacbcbcccc
+cdcdcececfcfd0d0d1d1d2d2d3d3d4d4d5d5d6d6d7d7d8d8d9d9dadadbdcdcdd
+dddededfdfe0e0e1e1e2e2e3e3e4e4e5e6e6e7e7e8e8e9e9eaeaebebecededee
+eeefeff0f0f1f1f2f3f3f4f4f5f5f6f6f7f8f8f9f9fafafbfcfcfdfdfefeffff
+>  dup length 1 sub 3 -1 roll mul dup dup floor cvi exch ceiling 
+ cvi 3 index exch get 4 -1 roll 3 -1 roll get
+ dup 3 1 roll sub 3 -1 roll dup floor cvi sub mul add 255 div } bind 
+
+{ 1.0 0.0 3 -1 roll 1 index 1 index le { exch pop} { pop } ifelse 
+ 1 index 1 index ge { exch pop } { pop } ifelse < 
+0000000000000000000000000000000000000000000000000000000000000000
+0000000000000000000000000000000000000001010101010101010101010101
+0101010101010101010101010101010101010101010101020202020202020202
+0202020202020202020202020202020202030303030303030303030303030303
+0303030303030304040404040404040404040404040404040404050505050505
+0505050505050505050506060606060606060606060606060607070707070707
+0707070707070708080808080808080808080808090909090909090909090909
+0a0a0a0a0a0a0a0a0a0a0a0b0b0b0b0b0b0b0b0b0b0b0c0c0c0c0c0c0c0c0c0c
+0d0d0d0d0d0d0d0d0d0d0e0e0e0e0e0e0e0e0e0f0f0f0f0f0f0f0f0f10101010
+1010101010111111111111111112121212121212121313131313131313141414
+1414141414151515151515151616161616161616171717171717171818181818
+18181919191919191a1a1a1a1a1a1a1b1b1b1b1b1b1c1c1c1c1c1c1c1d1d1d1d
+1d1d1e1e1e1e1e1e1f1f1f1f1f1f202020202020212121212121222222222223
+2323232323242424242425252525252526262626262727272727282828282829
+292929292a2a2a2a2a2b2b2b2b2b2c2c2c2c2c2d2d2d2d2d2e2e2e2e2e2f2f2f
+2f2f303030303131313131323232323333333333343434343535353535363636
+36373737373838383839393939393a3a3a3a3b3b3b3b3c3c3c3c3d3d3d3d3e3e
+3e3e3f3f3f3f4040404041414141424242424343434444444445454545464646
+4647474748484848494949494a4a4a4b4b4b4b4c4c4c4d4d4d4d4e4e4e4f4f4f
+4f50505051515151525252535353535454545555555656565657575758585859
+59595a5a5a5a5b5b5b5c5c5c5d5d5d5e5e5e5f5f5f6060606061616162626263
+63636464646565656666666767676868686969696a6a6a6b6b6b6c6c6d6d6d6e
+6e6e6f6f6f707070717171727273737374747475757576767677777878787979
+797a7a7b7b7b7c7c7c7d7d7e7e7e7f7f7f808081818182828283838484848585
+86868687878888888989898a8a8b8b8b8c8c8d8d8d8e8e8f8f90909091919292
+9293939494949595969697979798989999999a9a9b9b9c9c9c9d9d9e9e9f9f9f
+a0a0a1a1a2a2a3a3a3a4a4a5a5a6a6a6a7a7a8a8a9a9aaaaabababacacadadae
+aeafafb0b0b0b1b1b2b2b3b3b4b4b5b5b6b6b6b7b7b8b8b9b9bababbbbbcbcbd
+bdbebebebfbfc0c0c1c1c2c2c3c3c4c4c5c5c6c6c7c7c8c8c9c9cacacbcbcccc
+cdcdcececfcfd0d0d1d1d2d2d3d3d4d4d5d5d6d6d7d7d8d8d9d9dadadbdcdcdd
+dddededfdfe0e0e1e1e2e2e3e3e4e4e5e6e6e7e7e8e8e9e9eaeaebebecededee
+eeefeff0f0f1f1f2f3f3f4f4f5f5f6f6f7f8f8f9f9fafafbfcfcfdfdfefeffff
+>  dup length 1 sub 3 -1 roll mul dup dup floor cvi exch ceiling 
+ cvi 3 index exch get 4 -1 roll 3 -1 roll get
+ dup 3 1 roll sub 3 -1 roll dup floor cvi sub mul add 255 div } bind 
+] def 
+/MatrixABC [ 0.4124 0.2126 0.0193 0.3576 0.7151 0.1192 0.1805 0.0722 0.9508 ] def 
+/RangeLMN [ 0.0 0.9505 0.0 1.0000 0.0 1.0891 ] def 
+end ] /Cs1 exch/ColorSpace dr pop
+%%EndPageSetup
+0.60000002 i
+/Cs1 SC
+0.19215687 0.50196081 0.24705882 sc
+q
+107.81159 97.479164 m
+107.70937 97.318977 107.6055 97.16069 107.49998 97.004311 c
+105.73492 94.38842 102.64958 90.816887 99.963394 89.267845 c
+94.390419 86.056587 88.16684 85.510155 82.133011 85.425964 c
+80.360062 85.399292 78.461891 85.222542 76.881088 85.076981 c
+74.223763 84.832245 71.583275 84.33358 68.959625 83.580986 c
+68.066261 83.325096 67.04287 82.908684 65.889458 82.331726 c
+64.58416 81.678329 63.463833 80.832115 62.528469 79.793068 c
+62.503223 79.764771 62.49094 79.726929 62.495075 79.690193 c
+62.499214 79.65345 62.519321 79.62178 62.549747 79.60408 c
+84.089394 67.168159 l
+84.118233 67.151718 84.15358 67.150269 84.185539 67.164215 c
+84.217499 67.178162 84.24263 67.206009 84.253891 67.23996 c
+84.800957 68.883072 84.952927 70.5756 84.709808 72.317543 c
+84.701675 72.380081 84.667191 72.433487 84.615746 72.463181 c
+79.435493 75.455322 70.91024 80.378036 70.142578 80.821251 c
+74.395477 81.717239 l
+78.583549 79.292633 83.475731 76.463501 83.87587 76.229836 c
+83.894463 76.218201 83.918961 76.220802 83.936653 76.236275 c
+83.954346 76.251755 83.961258 76.276634 83.953796 76.298012 c
+83.269753 78.37262 82.458595 80.492157 81.52034 82.656616 c
+81.508797 82.682777 81.511681 82.714195 81.527977 82.739838 c
+81.544273 82.76548 81.571701 82.781769 81.600647 82.782982 c
+87.057648 82.97187 l
+87.083649 82.972557 87.106491 82.957031 87.115677 82.932411 c
+88.154175 80.357338 88.956558 78.015862 89.559402 75.191978 c
+90.097984 72.663963 90.122963 70.157173 89.634338 67.671593 c
+89.305534 65.995125 88.631523 64.334641 87.612282 62.690151 c
+85.797989 59.760822 82.732033 57.478695 79.625153 56.312176 c
+76.374931 55.091423 73.000679 54.354588 69.502396 54.101673 c
+67.25396 53.93853 63.718658 54.002148 60.815487 53.859646 c
+55.699306 53.60899 50.585567 53.009476 46.171291 49.772522 c
+46.141224 49.749836 46.123119 49.713654 46.123283 49.676563 c
+46.123444 49.639473 46.141846 49.606606 46.172085 49.589401 c
+66.34536 37.94236 l
+66.366119 37.930351 66.39344 37.938282 66.407135 37.960297 c
+66.439926 38.012844 66.45974 38.071552 66.466583 38.136429 c
+66.616646 39.562687 66.584175 41.035431 66.369186 42.554649 c
+66.354828 42.651142 66.300346 42.733353 66.220001 42.779762 c
+65.341606 43.283207 61.58448 45.45034 59.110184 46.878483 c
+57.155937 48.006458 55.080814 49.20525 53.480167 50.131138 c
+57.70182 50.979649 l
+58.31049 50.663971 61.808525 48.64835 65.242722 46.637821 c
+65.256119 46.63026 65.272957 46.631359 65.28643 46.640671 c
+65.299904 46.649982 65.307793 46.66597 65.306892 46.682171 c
+65.285988 46.915287 65.235031 47.131336 65.154022 47.330322 c
+64.360596 49.264248 63.895523 50.372593 63.758812 50.655357 c
+63.689651 50.798531 63.578194 50.973404 63.424431 51.179981 c
+63.407581 51.202202 63.405197 51.233398 63.418304 51.26017 c
+63.431408 51.286942 63.457664 51.304527 63.485802 51.305367 c
+69.062767 51.498455 l
+69.095558 51.498917 69.124481 51.479904 69.137321 51.449455 c
+70.08194 49.211174 70.769211 47.108231 71.199158 45.140621 c
+72.139458 40.838387 71.897247 35.775063 69.736961 31.646093 c
+69.65992 31.498837 67.861 28.374626 67.779045 28.229824 c
+63.466091 30.715939 l
+65.724426 34.866062 l
+65.747192 34.913773 65.73143 34.96954 65.68821 34.994186 c
+43.896503 47.57563 l
+43.849712 47.602848 43.788166 47.586426 43.75539 47.537979 c
+41.296982 43.515282 l
+37.014671 45.987675 l
+37.087574 46.118549 38.888317 49.232536 38.978039 49.373341 c
+39.177372 49.686165 39.418217 50.023487 39.700573 50.385311 c
+43.244904 54.930614 48.118938 57.211201 53.350811 58.298428 c
+55.762325 58.80024 58.08091 59.087009 60.306557 59.158741 c
+61.328564 59.192108 63.216022 59.234741 65.968933 59.286633 c
+67.805626 59.320854 69.851242 59.482624 72.105797 59.77195 c
+73.521057 59.954178 74.675316 60.175255 75.568558 60.435181 c
+78.122505 61.178383 80.95903 62.280609 82.667351 64.536514 c
+82.683975 64.558952 82.691216 64.586975 82.687256 64.613533 c
+82.683296 64.640099 82.66851 64.662659 82.646614 64.675552 c
+61.09182 77.120224 l
+61.072231 77.131241 61.048443 77.132599 61.02655 77.123932 c
+61.004662 77.115273 60.986801 77.097435 60.977558 77.075005 c
+60.333374 75.51709 60.208103 73.68737 60.376854 72.071091 c
+60.38942 71.948601 60.456219 71.843254 60.557571 71.786079 c
+62.952961 70.415016 70.361839 66.143448 74.123955 63.971394 c
+70.150085 62.926216 l
+66.804855 64.868179 62.681252 67.246956 61.243378 68.062553 c
+61.227962 68.072044 61.20771 68.069565 61.193394 68.056442 c
+61.179081 68.043312 61.17403 68.022583 61.180935 68.005287 c
+61.978542 65.792313 62.828018 63.77309 63.729362 61.947613 c
+63.740822 61.924011 63.738827 61.89497 63.724125 61.871479 c
+63.709427 61.847988 63.684269 61.833633 63.658173 61.833851 c
+61.785522 61.877308 59.955116 61.792473 58.166954 61.579342 c
+58.061222 61.566261 57.963032 61.623745 57.921261 61.723179 c
+57.349731 63.082924 56.801182 64.594856 56.275604 66.25898 c
+55.780033 67.82769 55.475639 69.46669 55.283581 70.90583 c
+54.659359 75.572617 56.044724 80.310135 59.354027 83.821716 c
+61.780403 86.395676 65.323822 88.060646 68.675797 88.932777 c
+70.46209 89.397148 71.866837 89.713844 72.890022 89.882866 c
+75.994705 90.393478 79.956833 90.665154 83.582916 90.771492 c
+84.893387 90.810387 86.144226 90.876427 87.335449 90.969612 c
+91.598228 91.303978 96.271645 92.578621 99.77639 95.344009 c
+99.788483 95.353035 99.795479 95.367683 99.794945 95.382866 c
+99.794418 95.398041 99.78643 95.411667 99.773766 95.418991 c
+79.223083 107.28393 l
+79.20314 107.29511 79.178452 107.29479 79.157288 107.28307 c
+79.136131 107.27135 79.121307 107.24979 79.117783 107.2256 c
+78.896484 105.77561 78.880066 104.30727 79.068535 102.82057 c
+79.086639 102.68067 79.164726 102.5612 79.28112 102.49532 c
+79.560493 102.33667 87.516136 97.750099 92.755722 94.735611 c
+88.659622 93.784828 l
+88.63942 93.796494 84.163239 96.384789 79.87014 98.871353 c
+79.856552 98.879875 79.838844 98.877953 79.825706 98.866531 c
+79.812576 98.85511 79.806763 98.836586 79.811134 98.820045 c
+79.970955 98.248619 80.193474 97.606583 80.478683 96.893944 c
+81.025894 95.521759 81.513702 94.38176 81.942108 93.47393 c
+81.96048 93.435539 81.957031 93.388542 81.933044 93.350243 c
+81.90905 93.311951 81.868057 93.288033 81.82518 93.287308 c
+80.025665 93.258095 78.262054 93.142632 76.534355 92.940926 c
+76.414925 92.927559 76.30468 92.991997 76.256981 93.10305 c
+74.592598 96.992493 73.533508 101.53908 73.830086 105.94624 c
+73.999916 108.48585 74.681496 110.94965 75.874825 113.33765 c
+75.951622 113.49133 76.890251 115.13376 76.971291 115.28681 c
+81.304047 112.78728 l
+80.60321 111.52448 80.220871 110.82555 80.157028 110.69051 c
+80.113869 110.59922 80.049133 110.46229 79.962822 110.27972 c
+79.941872 110.23676 79.955956 110.18616 79.995079 110.16381 c
+101.84601 97.548172 l
+101.889 97.523132 101.94555 97.53801 101.97594 97.582352 c
+102.13994 97.82048 102.26295 97.999077 102.34495 98.118134 c
+102.40427 98.204262 102.77982 98.829819 103.4716 99.994789 c
+107.81159 97.479164 l
+h
+W
+17 17 110 110 rc
+54.347878 147.30881 m
+146.8744 93.888588 l
+90.478394 -3.7921684 l
+-2.0481343 49.628044 l
+h
+f
+Q
+12 w
+0 0 0 sc
+q
+117.96633 45.75 m
+72.5 19.5 l
+27.033667 45.75 l
+27.033667 98.25 l
+72.5 124.5 l
+117.96633 98.25 l
+117.96633 45.75 l
+h
+W*
+17 17 110 110 rc
+-0.5 -0.86602539 -0.86602539 0.5 144.21634 91.216331 cm
+52.5 0 m
+97.966331 26.25 l
+97.966331 78.75 l
+52.5 105 l
+7.0336661 78.75 l
+7.0336661 26.25 l
+52.5 0 l
+h
+S
+ep
+end
+%%Trailer
+%%EOF

llms.txt

@@ -0,0 +1,38 @@
+# Carbon
+
+> Carbon is Hugging Face's open-source family of autoregressive genomic foundation models for DNA. Three sizes (500M, 3B, and 8B parameters), a 393,216 bp context window, a 6-mer BPE tokenizer, and 1 trillion training tokens spanning the tree of life. Model weights, training code, and the data pipeline are all open source on the Hugging Face Hub.
+
+This site is the interactive editorial walkthrough of what the 3B checkpoint learned. It is organised into four tabs:
+
+- **Intro** — a short primer on what the model reads (the four bases of DNA, helices, genes, splicing, translation) and a guided tour of the rest of the page.
+- **DNA Lab** — five live sections that hit the deployed 3B model: streaming continuation of an arbitrary DNA prefix, per-token likelihood scoring, in-silico variant effect prediction (VEP), ESMFold-based protein folding over Carbon-decoded ORFs, and a UMAP scatter of ~500,000 gene embeddings.
+- **Carbon Recipe** — the training story: tokenizer design, the hybrid loss, the dataset mixture, the species tree learned from per-species mean embeddings, the long-context training schedule, and the headline results.
+- **Sandbox** — a minimal prompt-and-stream UI for running Carbon on arbitrary DNA sequences without leaving the page.
+
+## Demo
+
+- [Live interactive demo (this site)](/): Editorial scrollytell across Intro / DNA Lab / Carbon Recipe / Sandbox.
+- [Standalone sandbox](/sandbox-only): The DNA continuation UI without the surrounding editorial.
+
+## Models
+
+- [HuggingFaceBio/Carbon-3B](https://huggingface.co/HuggingFaceBio/Carbon-3B): The default 3B checkpoint used by every live interaction on this page.
+- [HuggingFaceBio organisation page](https://huggingface.co/HuggingFaceBio): Full list of Carbon model sizes (500M, 3B, 8B) and related artefacts.
+
+## Code
+
+- [github.com/huggingface/carbon](https://github.com/huggingface/carbon): Training and inference code.
+
+## Data
+
+- [HuggingFaceBio/carbon-inference-evals](https://huggingface.co/datasets/HuggingFaceBio/carbon-inference-evals): The evaluation dataset behind the headline numbers shown in the Results section.
+
+## API
+
+The demo's FastAPI backend exposes a small set of JSON endpoints that crawlers and agents may find useful. They are designed for the frontend but are not gated:
+
+- `POST /generate` — streaming DNA continuation. Body: `{"prompt": "ACGT...", "max_tokens": 128, "temperature": 0.5, "top_p": 0.9}`. Returns Server-Sent Events.
+- `POST /score` — per-token log-probabilities over a forced sequence. Body: `{"sequence": "ACGT...", "max_window": 24000}`.
+- `POST /fold` — ESMFold-based protein structure prediction. Body: `{"sequence": "<AMINO_ACIDS>"}`. Returns PDB plus mean pLDDT.
+- `GET /config` — the model identifier currently served.
+- `GET /umap`, `GET /umap_labels`, `GET /umap_names`, `GET /highlights`, `GET /species_tree`, `GET /genes`, `GET /variants`, `GET /species` — static data payloads powering the visualisations.

robots.txt

@@ -0,0 +1,74 @@
+# robots.txt for the Carbon demo.
+#
+# Policy: explicitly welcome every crawler — including LLM-training and
+# answer-engine bots — to read the page. The whole point of the demo is
+# to make the model's behaviour and the surrounding write-up easy to
+# discover and to cite. The only path we keep out of the index is the
+# /social-banner utility page, which is a screenshot rig, not content.
+#
+# The Sitemap line below is rewritten with an absolute URL at request
+# time by app.py (it has to be absolute per the sitemaps protocol).
+
+User-agent: *
+Allow: /
+Disallow: /social-banner
+
+# AI / LLM crawlers, called out by name so it's unambiguous that this
+# site opts IN to training and to live answer-engine retrieval.
+User-agent: GPTBot
+Allow: /
+Disallow: /social-banner
+
+User-agent: ChatGPT-User
+Allow: /
+Disallow: /social-banner
+
+User-agent: OAI-SearchBot
+Allow: /
+Disallow: /social-banner
+
+User-agent: ClaudeBot
+Allow: /
+Disallow: /social-banner
+
+User-agent: Claude-Web
+Allow: /
+Disallow: /social-banner
+
+User-agent: anthropic-ai
+Allow: /
+Disallow: /social-banner
+
+User-agent: PerplexityBot
+Allow: /
+Disallow: /social-banner
+
+User-agent: Perplexity-User
+Allow: /
+Disallow: /social-banner
+
+User-agent: Google-Extended
+Allow: /
+Disallow: /social-banner
+
+User-agent: Applebot-Extended
+Allow: /
+Disallow: /social-banner
+
+User-agent: CCBot
+Allow: /
+Disallow: /social-banner
+
+User-agent: Bytespider
+Allow: /
+Disallow: /social-banner
+
+User-agent: cohere-ai
+Allow: /
+Disallow: /social-banner
+
+User-agent: Meta-ExternalAgent
+Allow: /
+Disallow: /social-banner
+
+Sitemap: {{SITE_URL}}/sitemap.xml

sitemap.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- {{SITE_URL}} is substituted with the absolute base URL at request -->
+<!-- time by app.py so the sitemap stays valid wherever it's served.  -->
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>{{SITE_URL}}/</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>{{SITE_URL}}/sandbox-only</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.4</priority>
+  </url>
+</urlset>

social-banner.html

@@ -4,6 +4,11 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Carbon · social banner</title>
+<!-- Internal screenshot tool — keep it out of search results and AI    -->
+<!-- training crawls. The canonical page is demo.html (served at /).    -->
+<meta name="robots" content="noindex, nofollow">
+<link rel="icon" type="image/svg+xml" href="/img/logo.svg">
+<link rel="icon" type="image/png" href="/img/logo.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap">
@@ -22,16 +27,21 @@
   /* edges of the social-media canvas read clearly — handy when you're  */
   /* about to crop a screenshot.                                        */
   /* ------------------------------------------------------------------ */
-  html, body { height: 100%; }
+  html, body { min-height: 100%; }
   body {
     background: #e8e5d6;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     gap: 28px;
-    padding: 40px 24px;
-    overflow: hidden;
+    /* Top padding sized so the banner stage sits roughly where it used
+       to (centred-ish in a 1080p window) while leaving room for the
+       logo contact-sheet below without forcing a scrollbar on common
+       screens. Falls back to scroll when there's genuinely more
+       content than fits. */
+    padding: clamp(28px, 6vh, 80px) 24px 80px;
+    overflow-x: hidden;
   }
 
   /* The social-banner-stage IS the social-media canvas: a fixed width
@@ -165,6 +175,147 @@
     body { background: white; padding: 0; }
     .sb-switcher { display: none; }
     .social-banner-stage { transform: none !important; box-shadow: none; }
+    .sb-logos { page-break-before: always; }
+  }
+
+  /* ------------------------------------------------------------------ */
+  /* Logo showcase.                                                     */
+  /* Sits below the banner stage so the same page doubles as a brand    */
+  /* contact-sheet: the square mark, the square lockup with wordmark,   */
+  /* and the wide rectangular lockup, each painted at its native pixel  */
+  /* size on a paper card. Screenshot one tile and you have the asset   */
+  /* at the exact dimensions of the source SVG, ready to drop into a    */
+  /* deck or a README without any re-export step.                       */
+  /* ------------------------------------------------------------------ */
+  .sb-section-label {
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: #6f6d65;
+    margin-top: 24px;
+    /* Hairline tick under the label, matching the section dividers used
+       on demo.html so the chrome reads as part of the same family. */
+    border-bottom: 1px solid #d6d3c4;
+    padding-bottom: 6px;
+    width: 100%;
+    max-width: 1100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+  .sb-section-label__hint {
+    color: #b0ada0;
+    text-transform: none;
+    letter-spacing: 0.06em;
+    font-size: 10px;
+  }
+
+  .sb-logos {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 24px;
+    /* Auto-scale row when the viewport is too narrow for both stages
+       side-by-side, mirroring the auto-fit behaviour the banner stage
+       already does for itself (see fitStage in the script below). The
+       JS sets --sb-logo-scale on this wrapper. */
+    transform: scale(var(--sb-logo-scale, 1));
+    transform-origin: center top;
+  }
+  .sb-logo-card {
+    background: #f7f5ee;
+    box-shadow:
+      0 1px 0 #cfcdbf inset,
+      0 14px 28px -18px rgba(31, 31, 29, 0.22),
+      0 6px 14px -10px rgba(31, 31, 29, 0.14);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+  }
+  /* The .sb-logo-stage IS the export canvas: width × height pinned to the
+     SVG's native viewBox in pixels so a screenshot of the stage matches
+     the source 1:1. The inner <img> fills the stage. */
+  .sb-logo-stage {
+    --w: 230px;
+    --h: 230px;
+    width: var(--w);
+    height: var(--h);
+    box-shadow: inset 0 0 0 1px #cfcdbf;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f7f5ee;
+  }
+  .sb-logo-stage img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: contain;
+  }
+  /* Per-variant sizes, sourced from each SVG's viewBox so the stage
+     matches the asset 1:1 on screen. */
+  .sb-logo-stage--square    { --w: 230px; --h: 230px; }
+  .sb-logo-stage--rectangle { --w: 487px; --h: 230px; }
+
+  .sb-logo-meta {
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #6f6d65;
+    padding: 10px 12px 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 12px;
+    border-top: 1px solid #cfcdbf;
+    background: #fbf9f2;
+    /* Constrain the row to the stage width so the long filename has
+       to truncate (with --name min-width:0) instead of pushing the
+       dim+copy chips off the right edge of the card. */
+    min-width: 0;
+  }
+  .sb-logo-meta__name {
+    color: #1f1f1d;
+    font-weight: 500;
+    /* Flex item with min-width:0 so the JetBrains Mono filename can
+       shrink and ellipsize instead of forcing the meta row wider than
+       its stage (most visible on the square tile, whose 230px width
+       is barely enough for the full "logo-black-square.svg"). */
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* Discreet "copy path" affordance so the SVG file name can be grabbed
+     without leaving the page. The button replaces itself with a "copied"
+     pill for ~1s on success. */
+  .sb-logo-meta__copy {
+    appearance: none;
+    border: 1px solid #cfcdbf;
+    background: #fff;
+    color: #6f6d65;
+    font-family: inherit;
+    font-size: 9px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    padding: 3px 7px;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+    flex-shrink: 0;
+  }
+  .sb-logo-meta__copy:hover {
+    background: #1f1f1d;
+    border-color: #1f1f1d;
+    color: #f7f5ee;
+  }
+  .sb-logo-meta__copy.is-copied {
+    background: #317f3f;
+    border-color: #317f3f;
+    color: #f7f5ee;
   }
 </style>
 </head>
@@ -179,10 +330,14 @@
     <div class="banner-inner">
       <div class="banner-left">
 
-        <!-- Identity strip — no logo card here, just the model-path
-             breadcrumb so the banner reads as a Hugging Face model
-             card identifier without the square thumbnail. -->
+        <!-- Identity strip — square brand mark (img/logo.svg, the latest
+             black-hex stamp) sitting flush with the model-card breadcrumb,
+             same composition as the hero on demo.html. The SVG ships with
+             its own black frame so .logo-card stays chrome-free here too. -->
         <div class="banner-identity">
+          <a class="logo-card" href="#" aria-label="Carbon, go to top">
+            <img class="logo-img" src="/img/logo.svg" alt="" width="44" height="44">
+          </a>
           <div class="banner-breadcrumb">
             <div class="banner-title">CARBON</div>
             <div class="banner-path">huggingfacebio/carbon-3b</div>
@@ -223,6 +378,42 @@
   <span class="sb-switcher__dim" id="sb-scale-readout">100%</span>
 </div>
 
+<!-- ------------------------------------------------------------------ -->
+<!-- Logo contact-sheet.                                                -->
+<!-- Two tiles, each a 1:1 export stage for one of the SVG lockups      -->
+<!-- shipped in img/. Sized to match the source viewBox so screenshots  -->
+<!-- come out at exactly the right pixel dimensions. Order: square      -->
+<!-- lockup → wide rectangular lockup.                                  -->
+<!-- ------------------------------------------------------------------ -->
+<div class="sb-section-label">
+  <span>logo · brand marks</span>
+  <span class="sb-section-label__hint">img/logo-black-*.svg · screenshot at 100% for 1:1 export</span>
+</div>
+
+<div class="sb-logos" id="sb-logos">
+
+  <figure class="sb-logo-card">
+    <div class="sb-logo-stage sb-logo-stage--square">
+      <img src="/img/logo-black-square.svg" alt="Carbon square lockup, symbol over wordmark">
+    </div>
+    <figcaption class="sb-logo-meta">
+      <span class="sb-logo-meta__name" title="logo-black-square.svg">logo-black-square.svg</span>
+      <button type="button" class="sb-logo-meta__copy" data-copy="/img/logo-black-square.svg">copy</button>
+    </figcaption>
+  </figure>
+
+  <figure class="sb-logo-card">
+    <div class="sb-logo-stage sb-logo-stage--rectangle">
+      <img src="/img/logo-black-rectangle.svg" alt="Carbon horizontal lockup, symbol next to wordmark">
+    </div>
+    <figcaption class="sb-logo-meta">
+      <span class="sb-logo-meta__name" title="logo-black-rectangle.svg">logo-black-rectangle.svg</span>
+      <button type="button" class="sb-logo-meta__copy" data-copy="/img/logo-black-rectangle.svg">copy</button>
+    </figcaption>
+  </figure>
+
+</div>
+
 <!-- Helix animation. Same script as the main demo — it queries
      .carbon-banner + .cb-helix-canvas, both of which exist here. -->
 <script src="/assets/js/banner.js"></script>
@@ -243,12 +434,16 @@
     const stage = document.getElementById("sb-stage");
     const readout = document.getElementById("sb-scale-readout");
     const buttons = document.querySelectorAll(".sb-switcher__btn");
+    const logos = document.getElementById("sb-logos");
 
-    // Vertical breathing room reserved for the format switcher
-    // (height of the row + body padding + gap). Kept conservative so
-    // the banner always has clear margin around it.
-    const CHROME_V = 160;
+    // Horizontal breathing room (body padding both sides).
     const CHROME_H = 80;
+    // Vertical breathing room reserved for the format switcher row +
+    // body padding + the section label above the logo contact-sheet.
+    // The fit-to-viewport cap aims at making the banner sit comfortably
+    // above the logos without forcing a scrollbar on a 1080p screen,
+    // while still letting tall windows render at native 100%.
+    const CHROME_V = 160;
 
     function fitStage() {
       const w = parseFloat(getComputedStyle(stage).getPropertyValue("--sb-w"));
@@ -258,6 +453,21 @@
       const scale = Math.min(1, availW / w, availH / h);
       stage.style.setProperty("--sb-scale", scale.toFixed(4));
       readout.textContent = Math.round(scale * 100) + "%";
+      fitLogos();
+    }
+
+    // Scale the logo contact-sheet down when the viewport is narrower
+    // than the row at 100%. The three tiles together are roughly
+    // 230 + 230 + 487 + (gaps) ≈ 1015px wide; on a 1024-ish window we
+    // want them to shrink to fit so they sit centred under the banner
+    // instead of overflowing the page horizontally.
+    function fitLogos() {
+      if (!logos) return;
+      logos.style.setProperty("--sb-logo-scale", "1");
+      const natural = logos.scrollWidth;
+      const avail = Math.max(200, window.innerWidth - CHROME_H);
+      const s = Math.min(1, avail / natural);
+      logos.style.setProperty("--sb-logo-scale", s.toFixed(4));
     }
 
     function setFormat(btn) {
@@ -292,6 +502,29 @@
 
     fitStage();
     window.addEventListener("resize", fitStage);
+
+    // Wire up the discreet "copy" buttons under each logo tile so the
+    // asset path can be grabbed in one click. Falls back gracefully on
+    // browsers / contexts where the async clipboard API is unavailable
+    // (e.g. http:// origins) by showing a "failed" pill briefly.
+    document.querySelectorAll(".sb-logo-meta__copy").forEach(btn => {
+      btn.addEventListener("click", async () => {
+        const value = btn.dataset.copy || "";
+        if (!value) return;
+        const original = btn.textContent;
+        try {
+          await navigator.clipboard.writeText(value);
+          btn.textContent = "copied";
+          btn.classList.add("is-copied");
+        } catch {
+          btn.textContent = "failed";
+        }
+        setTimeout(() => {
+          btn.textContent = original;
+          btn.classList.remove("is-copied");
+        }, 1100);
+      });
+    });
   })();
 </script>