# HTML / Data / Typography Demo Prompt

## Build the landing page

Use $scroll-world-storytelling in **HTML / data / type** mode to create a responsive standalone landing page titled The Contract: Evidence Ledger.

### Story and data

Use six chapters: Destination, Fence, Bar, Loop, Route, and Proof. Show one clearly labeled illustrative series—18, 31, 48, 63, 81, 94—to demonstrate how evidence accumulates across the journey. Do not present demo values as real customer claims.

### Implementation requirements

- Use semantic HTML, CSS, JavaScript, and one inline SVG chart.
- Do not use Canvas, WebGL, video, a chart library, a framework, a CDN, or a build step.
- Keep a sticky evidence stage with a large live value, one line chart, six bars, kinetic chapter words, a progress rail, and one final CTA.
- Drive CSS custom properties, chart stroke offset, bar scale, active copy, and displayed value from one normalized native-scroll value.
- Keep chart labels selectable and include the exact series in an accessible table.
- Preserve useful reading order with JavaScript disabled.
- Reverse scrolling must restore prior values and chapter states exactly.
- Reduced motion removes interpolation while keeping the complete story and chart legible.

### Art direction

Evidence-led editorial report: warm limestone paper, near-black type, vermilion proof marks, cobalt data lines, strong typographic scale, hairline rules, compact mono labels, no cards, no glass, no gradients behind copy. The page should feel like a designed annual report, not a dashboard.

### Verification bar

- Prove there is no canvas, video, WebGL, remote script, or failed request.
- All six chapters activate at correct scroll positions and reverse correctly.
- Chart values and accessible table agree.
- Verify desktop and 390px mobile, keyboard focus, one working CTA, reduced motion, and zero console errors.

## Remix prompt

Use $scroll-world-storytelling in HTML/data/type mode for my supplied story and dataset. First define the 5–7 beat ledger and choose one truthful chart grammar. Then build a semantic landing page with native scroll, selectable labels, accessible values, deterministic reverse states, responsive typography, reduced motion, one CTA, and a real-browser verification pass.