The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Carbon Cycle Scroll Explainer

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A single-page illustrated scroll story by [BRAND], a small independent science explainer studio, about [TOPIC]. One large code-drawn SVG cross-section (sky, land with forest and mountains, open ocean, rock strata with fossil seams) is moving from the first frame: glowing particles stream between the four reservoirs ([RESERVOIRS]) along curved paths, with speed and density showing the size of each flow ([FLOWS]). The scene stays pinned while text steps scroll past and the camera pans and zooms from reservoir to reservoir. The fourth, human-driven flow starts as a thin thread and thickens through the industrial era. A yearly ledger follows, then a scenario lab: a slider with three stops ([SCENARIOS]) that smoothly redraws a curve of [OUTCOME], updates a big readout and shifts the sky tint. Every figure is tagged Illustrative and a closing sources note explains the rounding.

- Audience: High-school and early-university classes, curious adult readers, and the teachers, museum educators, nonprofits and newsrooms who would link to or project this page.
- Goal: Make one system story understandable in about four minutes of scrolling, let the reader feel the imbalance before it is stated, and end with an interaction (the scenario slider) that makes the choice between futures tangible. Secondary goal: easy reuse in class (print button, discussion prompts).
- Tone: Plain, warm and exact. Short sentences, concrete round numbers, no alarmism and no jokes about the subject. Poster-bold visuals, calm text. Write all copy for the default values below and keep it in src/content.ts; if the variables change, rewrite every headline, step, ledger row, FAQ answer and sources line to fit the new topic with the same length and rhythm.

## Stack
- Framework: Vite 5 + vanilla TypeScript
- Styling: Vanilla CSS
- Libraries: vite 5 (MIT), typescript 5 (Apache-2.0), gsap 3.12 (core + ScrollTrigger) (GSAP Standard License (free, commercial use allowed)), lucide 0.4x (vanilla package) (ISC), @fontsource-variable/bricolage-grotesque (OFL-1.1), @fontsource/atkinson-hyperlegible (OFL-1.1), @fontsource/jetbrains-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with the Vite vanilla-ts template; package.json scripts: dev = vite, build = tsc && vite build, preview = vite preview.
  - vite.config.ts: base './', build.outDir 'dist', build.sourcemap false, build.assetsInlineLimit 0. Single entry index.html.
  - File layout: src/main.ts (boot, fonts, icons), src/content.ts (every string and number on the page, typed), src/scene.ts (builds the inline SVG scene and exposes named groups), src/flows.ts (particle clock), src/story.ts (ScrollTrigger steps and camera), src/scenario.ts (slider, curve paths, readout, tint), src/styles.css (tokens, layout, keyframes, reduced-motion and print rules).
  - In main.ts import '@fontsource-variable/bricolage-grotesque', '@fontsource/atkinson-hyperlegible/400.css', '@fontsource/atkinson-hyperlegible/700.css', '@fontsource/jetbrains-mono/500.css'.
  - Register GSAP once: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger).
  - Icons: import only the needed icons from 'lucide' and call createIcons({ icons: { Wind, Waves, Trees, Layers, Flame, Thermometer, Info, ArrowDown, Printer, Plus, Minus } }) after the DOM is built; elements use data-lucide attributes.
  - Build the scene SVG in TypeScript (scene.ts) from content.ts data and inject it into #scene; do not ship it as an external image. viewBox origin 0 0 1600 1000, preserveAspectRatio 'xMidYMid slice'.
  - Define all colors as CSS custom properties on :root in styles.css and reference the same values from the SVG via fill='var(--name)' where possible.
  - <title> is '[BRAND] · [TOPIC], explained'. Favicon: public/favicon.svg, a 32x32 indigo (#160F3D) rounded square with two curved arrows forming a ring, one acid lime (#C6FF3D), one molten orange (#FF6A1A).
  - Gate all motion on window.matchMedia('(prefers-reduced-motion: reduce)'); the reduced path is described in Design > motion.

## Variables
- [BRAND] — Studio or publication name (default: "Lowtide Lab"). Who publishes the explainer. Used in the header wordmark, title and footer.
- [TOPIC] — System the story explains (default: "The carbon cycle"). Any system that moves one quantity between four stores.
- [RESERVOIRS] — Four reservoirs, in story order (default: "Atmosphere, Land, Ocean, Fossil reserves"). Comma-separated, exactly four. Mapped onto sky, land, ocean and rock strata in the scene.
- [FLOWS] — Four flows, in story order (default: "Photosynthesis, Respiration and decay, Ocean exchange, Fossil fuel burning"). Comma-separated, exactly four. The last one is the human-driven flow that thickens in the industrial-era step.
- [SCENARIOS] — Three slider stops, best to worst (default: "Rapid cuts, Current path, High emissions"). Plain invented labels; never official scenario codes.
- [OUTCOME] — What the scenario curve shows (default: "Warming by 2100, in °C"). Y-axis label and readout unit of the scenario curve.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/carbon-cycle-scroll-explainer in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Night Indigo `#160F3D` — Page background, upper sky, card fill (at 90% opacity over the scene)
- Dusk Violet `#3B1F7A` — Mid sky gradient stop, section bands, slider track
- Horizon Ember `#FF8A3D` — Low sky glow band just above the horizon, sun disk rim
- Deep Teal `#06535F` — Ocean surface layer, ledger section background
- Abyss `#03252C` — Deep ocean layer, footer background
- Molten Orange `#FF6A1A` — Human-driven flow (fossil burning) particles and stroke, primary CTA fill, High-emissions curve
- Acid Lime `#C6FF3D` — Biosphere flows (photosynthesis), slider thumb, active step marker, Rapid-cuts curve, focus rings
- Glow Cyan `#5CE1E6` — Ocean exchange particles, links, Current-path curve
- Ember Pink `#FF3D7F` — Warming tint target for the sky in the scenario lab, warning highlight on the net-change bar
- Forest `#0E6B4A` — Hills and tree bodies (trees use Forest with Acid Lime tops)
- Strata Rust `#7A3A1E` — Upper rock band
- Strata Umber `#4A2418` — Middle rock band
- Coal Black `#120B0A` — Fossil seams and lower rock band
- Mist `#F3EEFF` — Body and heading text on dark grounds (AA+ on Night Indigo and Deep Teal)
- Lavender Gray `#B9B0E0` — Secondary text, axis labels, captions (AA on Night Indigo)

### Typography
- Display: hero headline, step titles, section headings, big readout. Tight tracking -0.02em, line-height 0.95 for hero, 1.05 for others.: Bricolage Grotesque (variable) (OFL), weights 700/800
- Body text, card copy, FAQ, buttons. 18px desktop / 17px mobile, line-height 1.55.: Atkinson Hyperlegible (OFL), weights 400/700
- Numbers, stock labels, year counter, Illustrative tags, axis ticks. Uppercase for tags with 0.08em tracking.: JetBrains Mono (OFL), weights 500

### Layout & motion
- Spacing: 8px base grid. Content max-width 1200px with 6vw side padding on desktop and 16px gutters on mobile. Sections are separated by 160px (desktop) / 96px (mobile). Hero headline 112px desktop / 52px mobile (clamp(52px, 8vw, 112px)); section headings clamp(36px, 5vw, 64px); step titles 40px desktop / 28px mobile.
- Radius: Cards and step panels 20px; buttons and chips fully rounded (999px); slider track 999px; ledger bars 6px. The scene itself is full-bleed with no radius.
- Motion: Load: the scene fades in from Night Indigo over 600ms, then the hero headline lines rise 24px and fade in with a 90ms stagger (power3.out, 700ms). Particles start immediately; there is no static first frame.
- Motion: Particle clock: one requestAnimationFrame loop in flows.ts drives every flow. Each flow is an SVG path sampled once into 240 points (Float32Array, via getPointAtLength at init). Each particle i of a flow sits at u = (time * speed + i / count) mod 1 and is drawn as a circle of radius 2.5 to 4px with a soft glow (an feGaussianBlur stdDeviation 2 filter on the flow group). count = clamp(round(value / 3), 3, 44); speed = 0.05 + value / 1500 cycles per second. Every guide path is also stroked at 25% opacity, 1.5px, dash 2 6.
- Motion: The loop pauses when the story section is fully offscreen (IntersectionObserver) and when document.hidden is true.
- Motion: Camera: a GSAP timeline scrubbed across the story track (scrub 0.6) tweens a proxy {x, y, w, h} through one keyframe per step and writes it to the scene's viewBox in onUpdate. Keyframes are listed in the story section.
- Motion: Step activation: each step panel has a ScrollTrigger (start 'top 60%', end 'bottom 40%'); the active panel is opacity 1, inactive panels 0.3; the active reservoir in the scene gets a 3px Acid Lime outline glow that fades in over 400ms, and its row in the reservoir gauge highlights.
- Motion: Industrial era: a second scrubbed tween drives a value industry 0 to 1 across step 5; the fossil-burning flow's stroke width goes 1px to 7px, its particle count 3 to 40, its speed x3, and the year counter interpolates 1850 to 2025 (rounded to whole years).
- Motion: Counters: the atmosphere stock in step 6 counts 600 to 900 with the scroll (scrubbed, whole numbers, tabular-nums).
- Motion: Ledger bars grow from 0 to their width over 900ms (power2.out) with a 120ms stagger when the ledger enters the viewport (once).
- Motion: Scenario curve: dragging the slider interpolates the projection path between the two neighbouring scenario point arrays every input event; on release the thumb snaps to the nearest stop and the path tweens to that scenario over 500ms (power2.inOut) using the same interpolation. The readout number tweens with it; the sky tint variable --heat (0, 0.45, 1 for the three stops) tweens alongside.
- Motion: Buttons: hover lifts 2px and brightens 8%; press scales 0.97. FAQ items expand with a 280ms height transition and the plus icon rotates 45 degrees.
- Motion: prefers-reduced-motion: no camera tweens and no scrub. Each step snaps the viewBox to its keyframe instantly when it becomes active (stepped static scenes). Particles are not animated: each flow is drawn as a static dashed stroke with arrowheads, width scaled by value. Counters show their end values. Slider updates the curve instantly without tweening. Load fade-ins are removed.
- Imagery: No photographs and no bitmap images. Everything is drawn in code as flat, layered vector shapes with a visible grain: one SVG feTurbulence (baseFrequency 0.9, numOctaves 2) noise rect over the whole scene at 9% opacity with mix-blend-mode overlay, plus a CSS grain overlay on section backgrounds using the same SVG filter as a data URL. Shapes are poster-like: bold silhouettes, no outlines, at most three tones per object, no gradients except the sky and the ocean depth. Icons are Lucide at 20px, stroke 1.75, in Mist or the flow color. No mascots, no characters, no people, no recognizable landmarks or real facilities; the factory is a generic block with two chimneys.

## Pages & Sections
### [BRAND] · [TOPIC], explained (`index.html`)
1. **Header (shared, fixed)** — Left: wordmark 'Lowtide Lab' in Bricolage Grotesque 800 at 20px, preceded by a 22px code-drawn ring mark (two curved arrows, one Acid Lime, one Molten Orange). Center (desktop only): anchor links 'Story', 'Ledger', 'Scenarios', 'Sources' pointing to #story, #ledger, #scenarios, #sources. Right: a chip with the Lucide Info icon and the mono text 'ILLUSTRATIVE FIGURES' that scrolls to #sources on click.
   Layout: Fixed top bar, height 64px, full width, 6vw side padding (16px mobile). Transparent over the hero; after 80px of scroll it gets a Night Indigo background at 85% opacity with a 1px bottom border rgba(198,255,61,0.18). On mobile the center links hide and the chip shrinks to icon plus 'ILLUSTRATIVE'.
   Motion: Background fades in over 200ms when the scroll threshold is crossed.
2. **Hero + pinned story scene (#story)** — The scene, built in scene.ts on a 1600x1000 canvas: (1) Sky 0-520: vertical gradient Night Indigo (top) to Dusk Violet (y 340) to Horizon Ember (y 515); a low sun disk r=70 at (1190, 470) in Molten Orange with an Horizon Ember rim; three flat clouds in Dusk Violet lightened 12%. (2) Land, x 0-840: two rolling hill silhouettes in Forest and a darker Forest shade, a mountain ridge between x 160 and 430 peaking at y 250 with a Mist-colored cap, 18 triangular trees (Forest trunks, Acid Lime tops, heights 40-90px) across x 440-760, and a small generic factory block at (650, 470) with two chimneys. (3) Ocean, x 820-1600, y 520-770: surface band Deep Teal, deep band Abyss, four thin wave lines in Glow Cyan at 30% opacity, a sloping seabed. (4) Rock strata y 770-1000 across the full width: bands Strata Rust, Strata Umber, Coal Black, with five black lens-shaped fossil seams and one rounded oil pocket at (420, 900). (5) Flow paths (cubic curves): Photosynthesis from sky (500, 160) down into the forest canopy (600, 440), Acid Lime; Respiration and decay from soil (560, 520) back up to sky (420, 180), Acid Lime at 60%; Ocean exchange as two parallel arcs between sky (1150, 200) and ocean surface (1250, 560), one down and one up, Glow Cyan; Fossil fuel burning from the oil pocket (420, 900) up through the factory chimney (665, 430) into the sky (760, 140), Molten Orange. Flow values (Gt C per year, illustrative): 120, 120, 90 each way, and 1 rising to 10. (6) Reservoir hit areas: invisible rects per reservoir used for the active outline. Over the scene, the hero text (step 0): eyebrow in mono 'AN ILLUSTRATED STORY · 4 MIN'; headline 'Where the carbon goes.'; subline 'Follow one atom of carbon through sky, sea, soil and stone, then choose the century it lands in.'; buttons 'Start the story' (Molten Orange fill, Night Indigo text, Lucide ArrowDown) scrolling to step 1, and 'Jump to the scenarios' (outline, 1.5px Mist border) scrolling to #scenarios. Under the buttons, three mono chips: '4 RESERVOIRS', '4 FLOWS', '3 FUTURES'.
   Layout: The section is a scroll track 800svh tall containing a sticky scene container (position: sticky; top: 0; height: 100svh; full width) holding the SVG at 100% width and height, and an overlay column of seven step panels that scroll over it. Hero text (step 0) sits bottom-left: left 6vw, bottom 12svh, max-width 640px, no panel background, with a radial Night Indigo shade behind it at 70% so text stays AA. Mobile (<768px): the sticky scene is 58svh tall and the steps flow below it (not overlaid), so panels scroll up underneath the sticky scene; hero text then sits in the first panel below the scene.
   Motion: Camera keyframe for step 0 is the full canvas (0 0 1600 1000). Particles run from load. Hero text fades out (opacity to 0, y -30px) as step 1 approaches.
3. **Story steps 1-6 (inside #story)** — Each panel: mono tag with Lucide icon and stock, Bricolage title, 2-3 sentence body, and a small 'ILLUSTRATIVE' tag. Step 1 Atmosphere (icon Wind, tag 'ATMOSPHERE · ~900 GT C'): title 'The smallest vault.' body 'Of the four places that hold carbon, the air holds the least. That is exactly why it is sensitive: add a little, and its share changes fast.' Step 2 Land (icon Trees, tag 'LAND · ~2,000 GT C IN PLANTS AND SOIL'): title 'The forest breathes.' body 'Leaves pull about 120 billion tonnes of carbon out of the air each year. Roots, microbes and fires send about the same back. In, out, in, out, like a slow tide.' Step 3 Ocean (icon Waves, tag 'OCEAN · ~40,000 GT C'): title 'The quiet giant.' body 'The ocean holds more carbon than everything else combined. Its surface trades about 90 billion tonnes with the air each year, and slow currents carry some of it down to water that will not see the sky for centuries.' Step 4 Fossil reserves (icon Layers, tag 'FOSSIL RESERVES · ~5,000 GT C'): title 'The sealed basement.' body 'Coal, oil and gas are ancient plants and plankton, pressed for millions of years. Left alone, this vault leaks almost nothing: a thin thread from volcanoes and weathering rock.' Step 5 Industrial era (icon Flame, tag 'FOSSIL FUEL BURNING · 1 → 10 GT C / YR'): title 'Then we opened it.' body 'Burning fuel now moves about 10 billion tonnes a year from rock to air. That is small next to the forest and ocean trades. The difference is that it only flows one way.' plus a large mono year counter 'YEAR 1850' that runs to 'YEAR 2025'. Step 6 Imbalance (icon Thermometer, tag 'ATMOSPHERE · 600 → 900 GT C'): title 'Half stays up.' body 'Land and ocean soak up about half of what we add. The rest stays in the air, and the air is the vault that sets the temperature.' plus a large counter of the atmosphere stock and a button 'See where it leads' scrolling to #scenarios. Reservoir gauge HUD: four rows (icon, reservoir name, mono stock, a 120px bar scaled on a log scale), the active row in Acid Lime.
   Layout: Desktop: panels are 420px wide, left 6vw, each in its own 100svh slot, vertically centered; panel fill Night Indigo at 90%, 1px border rgba(198,255,61,0.2), radius 20px, padding 28px. The reservoir gauge HUD is fixed inside the sticky container at top 96px, right 6vw, 260px wide, same panel style; it hides during step 0. The year counter and atmosphere counter render at 72px in JetBrains Mono inside their panels. Mobile: panels full width minus 16px gutters, min-height 70svh slots, HUD hidden and replaced by a single-line mono stock under each panel tag.
   Motion: Camera keyframes (x y w h): step 1 Atmosphere 300 0 1000 625; step 2 Land 120 220 900 563; step 3 Ocean 760 300 840 525; step 4 Fossil reserves 120 375 1000 625 (bottom edge at 1000, strata fill the lower half of the view); step 5 back out to 200 60 1300 813 so chimney, oil pocket and sky are all visible; step 6 full canvas 0 0 1600 1000. Step 5 drives the industry value 0 to 1; step 6 drives the atmosphere counter and slightly darkens the sky (sky gradient top toward Dusk Violet, 20%).
4. **Yearly ledger (#ledger)** — Eyebrow 'THE YEARLY LEDGER'. Heading 'Big trades, one leak.' Intro 'Each year carbon moves in four main streams. Three of them nearly balance. The fourth does not.' Four rows: 'Photosynthesis' Acid Lime bar, 'Air → land', '120 Gt C / yr'; 'Respiration and decay' Acid Lime 60% bar, 'Land → air', '120 Gt C / yr'; 'Ocean exchange' Glow Cyan double bar, 'Air ⇄ ocean', '90 in · 90 out'; 'Fossil fuel burning' Molten Orange bar, 'Rock → air', '10 Gt C / yr, one way'. Below, a net row with an Ember Pink bar: 'Net change in the air', '+5 Gt C every year'. Every value carries a tiny mono 'ILLUSTRATIVE' superscript tag.
   Layout: Full-width band on Deep Teal with grain overlay. Content max-width 1200px: heading block on the left 4 columns, rows on the right 8 columns (desktop 12-column grid, 24px gaps). Each row: icon, name (Atkinson 700, 20px), direction label in Lavender Gray, a bar track 100% width with the bar width proportional to value (120 = 100%), value in mono right-aligned. The net row is separated by a 1px Mist 20% rule. Mobile: single column, rows stack name over bar over value.
   Motion: Bars grow on first view (see Design motion). The fossil bar pulses its glow every 2.4s (opacity 0.7 to 1).
5. **Scenario lab (#scenarios)** — Eyebrow 'SCENARIO LAB'. Heading 'Pick the century.' Intro 'Drag the slider to choose how fast emissions fall. Every curve starts from the same place: today.' Slider with three labeled stops 'Rapid cuts', 'Current path', 'High emissions' and a one-line description under the active stop: Rapid cuts 'Emissions halve by 2040 and reach near zero by 2060.'; Current path 'Emissions plateau, then drift down slowly after 2050.'; High emissions 'Emissions keep rising until late in the century.' Big readout: '+2.5 °C' (default stop Current path) with caption 'Warming by 2100 compared with the late 1800s · illustrative'. Readouts per stop: +1.5, +2.5, +4.0. Chart: x axis 1850-2100 with ticks every 50 years, y axis 0 to 5 °C with gridlines every 1 °C, a solid Mist history line 1850-2025 from 0.0 rising to 1.3 (hand-set points: 1850 0.0, 1875 0.0, 1900 0.1, 1925 0.2, 1950 0.3, 1975 0.4, 2000 0.8, 2025 1.3), a vertical dashed 'Today' marker at 2025, and one projection path 2025-2100 with 16 points every 5 years. Scenario arrays (2025 to 2100): Rapid cuts 1.3,1.38,1.45,1.5,1.53,1.55,1.56,1.56,1.56,1.55,1.55,1.54,1.53,1.52,1.51,1.5; Current path 1.3,1.4,1.5,1.6,1.7,1.8,1.9,2.0,2.1,2.2,2.25,2.3,2.35,2.4,2.45,2.5; High emissions 1.3,1.42,1.55,1.7,1.85,2.0,2.2,2.4,2.6,2.8,3.0,3.2,3.4,3.6,3.8,4.0. Projection stroke color interpolates Acid Lime → Glow Cyan → Molten Orange across the slider, with a soft 18% fill under the curve in the same color. Beside the chart, a horizon strip: a 16:5 crop of the scene's sky, sun, hills and sea (reused symbols) whose sky gradient blends toward Ember Pink and Molten Orange as --heat rises.
   Layout: Night Indigo background. Two columns on desktop (7/5): left the chart card (radius 20px, Dusk Violet at 35% fill, padding 32px, chart SVG viewBox 0 0 800 400, responsive width), right a stack of readout (Bricolage 800, 120px, color follows the curve), caption, the stop description and the horizon strip (radius 16px). The slider spans the full content width under both columns: 10px track in Dusk Violet with a filled part in the curve color, 32px Acid Lime thumb with a 4px Night Indigo ring, stop labels below at 0%, 50%, 100% as clickable buttons. Mobile: everything stacks: readout, chart, slider, description, horizon strip; thumb stays 32px for touch.
   Motion: Slider is a native input type range (min 0, max 100, step 1, default 50) styled with CSS; position 0-50 interpolates Rapid cuts→Current path, 50-100 Current path→High emissions; snap on change; Left/Right keys move 1, PageUp/PageDown and clicking a stop label jumps between stops. aria-valuetext reads e.g. 'Current path, about 2.5 degrees of warming by 2100'. Curve path is rebuilt each frame from the interpolated points as a Catmull-Rom spline converted to cubic Bezier commands (tension 0.5), never morphed with a plugin.
6. **Quick questions** — Heading 'Quick questions'. Four accordion items. 'If plants absorb carbon, can we just plant trees?' → 'Trees help, but the forest trade is a loop: what grows also decays or burns. Planting adds a one-time store; it cannot keep up with a one-way flow from rock that runs every year.' 'Will the ocean fill up?' → 'Not fill, but slow down. Warmer water holds less gas, and the extra carbon makes seawater more acidic, which is hard on shells and reefs.' 'How long does added carbon stay in the air?' → 'A large share moves into land and ocean within decades. A smaller share stays for centuries, and some for many thousands of years.' 'Why are all the numbers rounded?' → 'So the story stays readable. The sizes and directions are right; the exact values change from year to year and between studies. See the sources note below.'
   Layout: Max-width 820px centered. Each item a full-width button row (Atkinson 700, 20px, Mist) with a Lucide Plus icon on the right, 1px bottom border Mist 15%, padding 22px 0. Answer text Lavender Gray 18px, max 64ch.
   Motion: Height transition 280ms, icon rotates 45deg when open. Only one item open at a time.
7. **Use it in class** — Eyebrow 'FOR TEACHERS'. Heading 'Use it in class.' Three cards. Card 1 '15-minute walkthrough': ordered list 'Scroll steps 1-4 together (5 min)', 'Pause on step 5 and ask what changed (3 min)', 'Let pairs try each scenario and note the readout (5 min)', 'Close with one question from the list (2 min)'. Card 2 'Three discussion prompts': 'Which flow surprised you most, and why?', 'Why does a small one-way flow matter more than a big two-way one?', 'What would have to change to move the slider left?'. Card 3 'Print-friendly version': text 'A clean, one-column version with all steps, the ledger and all three curves.' and a button 'Print the story' with the Lucide Printer icon that calls window.print().
   Layout: Three equal cards in a row (desktop), stacked on mobile, 24px gap. Card fill Dusk Violet at 40%, 1px border Mist 12%, radius 20px, padding 28px; each card has a 40px top icon tile in its flow color (Acid Lime, Glow Cyan, Molten Orange). A @media print stylesheet hides the header, slider and scene, shows every story step as plain text, renders the chart with all three scenario curves at once, and uses black text on white.
   Motion: Cards fade up 24px with a 100ms stagger when entering (once).
8. **Sources note (#sources)** — Eyebrow 'ILLUSTRATIVE FIGURES'. Heading 'Where the numbers come from.' Paragraph: 'Every figure on this page is illustrative and rounded so the story stays readable. The values sit in the range reported by recent global carbon budget syntheses and international physical-science assessments, but none is copied from a single chart, and the curves are hand-drawn shapes, not model output. Check the latest published assessments before you cite a number.' List: 'Reservoir sizes: rounded to the nearest 100 or 1,000 Gt C.' 'Yearly flows: rounded to the nearest 10 Gt C, except the fossil flow.' 'Temperature curves: drawn to show direction and spread between futures.' 'Scenario names: plain labels written for this page, not official pathway names.' Credits line: 'Story by Mara Okafor · Illustration and code by Teo Lindqvist · Science review by Dr. Inés Carvalho · Version 1.3'. Correction note: 'Spotted an error? Tell us at [email protected]' (plain text, not a form).
   Layout: Abyss background with grain, max-width 820px centered, 120px vertical padding. Mono eyebrow in Acid Lime, list with Lucide Info icons in Glow Cyan, credits in Lavender Gray 15px.
   Motion: None beyond the shared fade-up.
9. **Footer** — Wordmark 'Lowtide Lab' and line 'Small studio, big systems. Illustrated explainers for classrooms and curious people.' Links back to '#story', '#scenarios', '#sources'. Bottom row: '© Lowtide Lab · Figures are illustrative' and, only if provided, the optional [CREDIT] link aligned right.
   Layout: Abyss background, 1px top border Mist 10%, two columns desktop (wordmark + line left, links right), stacked on mobile, 64px vertical padding.
   Motion: None.

## Assets
- image: No bitmap images. The whole scene, the horizon strip, the chart, the logo ring mark and the favicon are drawn in code as inline SVG built in TypeScript (scene.ts, scenario.ts) and public/favicon.svg. Grain comes from an SVG feTurbulence filter. Nothing is downloaded.
- icon: Lucide icons from the npm package 'lucide' (ISC): Wind, Trees, Waves, Layers, Flame, Thermometer, Info, ArrowDown, Printer, Plus, Minus. Imported individually and rendered with createIcons. List 'lucide (ISC), https://lucide.dev' in ASSETS.md.
- font: Self-hosted via Fontsource npm packages: @fontsource-variable/bricolage-grotesque (OFL-1.1), @fontsource/atkinson-hyperlegible weights 400 and 700 (OFL-1.1), @fontsource/jetbrains-mono weight 500 (OFL-1.1). List each in ASSETS.md with its license.

## Don'ts
- No backend: no server code, API routes, databases, auth, analytics, third-party APIs, and no forms that submit anywhere (the corrections address is plain text).
- No CDN script or link tags; every font, icon and script is bundled locally. Never load fonts from fonts.googleapis.com, fonts.gstatic.com or any other font CDN; use the Fontsource packages listed.
- Production build must be minified, with no source maps and no src/ files copied into dist/; vite base must be './' so all asset paths are relative.
- Internal links are in-page anchors (#story, #ledger, #scenarios, #sources) or point to ./index.html; never link to a bare directory.
- Keep dist/ under 20 MB; no bitmap images at all.
- Must work at 1440x900 and 390x844 with zero console errors and no horizontal scroll; the slider must be fully usable by touch and keyboard.
- Respect prefers-reduced-motion with the stepped static fallback described in Design.
- Do not reproduce any chart or diagram from a real report or textbook, and do not lay out carbon figures as a known published cycle diagram; all numbers are round illustrative values tagged Illustrative.
- No logos, seals or insignia of climate bodies, space agencies, universities, newsrooms or energy companies, and no brand logos of any kind.
- No RCP, SSP or other official scenario names or codes; the slider stops use only the plain labels from [SCENARIOS].
- No mascots, characters, or the signature illustration style of any known science video channel or scroll-story publication; keep the flat layered poster style described here.
- No copy, headlines or data labels taken from existing explainers; all text is the invented copy in this prompt or rewritten for new variable values.
- No real people's likeness (including scientists and activists), no recognizable landmarks and no real company facilities; the factory is a generic two-chimney block.
- No commercial fonts and no source code from restricted UI libraries (Aceternity UI, Tailwind Plus / Tailwind UI, purchased templates); build every effect from scratch.
- Do not add a framework (React, Vue, Svelte) or a CSS framework; the stack is Vite + vanilla TypeScript + vanilla CSS + GSAP.
- Do not mention VibeFather anywhere on the site except the optional [CREDIT] footer link.
- Keep every string and number in src/content.ts; when the variables change, rewrite all copy and data for the new topic instead of leaving carbon-specific text behind.

---
— Prompt by VibeFather · https://vibefather.ai/t/carbon-cycle-scroll-explainer · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.