System Requirements Document for nasa-netflix-bitcoins

1. Introduction

nasa-netflix-bitcoins is an interactive scrolling web app that turns a viral short-form video script about three billion-dollar historical mistakes into a scroll-native, dark-mode, cinematic experience. The product intent is spectacle-driven fact entertainment: a young, curious, mobile-first audience arrives from the video hook and scrolls through three full-height story modules — the 1999 NASA Mars spacecraft lost to a metric/imperial unit mismatch, the 2000 Blockbuster rejection of a $50M Netflix acquisition, and the 2010 purchase of two pizzas for 10,000 Bitcoins — each with a guess-before-reveal quiz, an oversized animated dollar figure, and a live end-of-scroll poll asking "Which mistake was the worst?" followed by a prominent Subscribe CTA.

The audience is the Curious Visitor, the Poll Participant, and the Subscriber Prospect: scroll-native viewers who want counts that land like slot machines, guesses that sting, and a live poll readout. The app is a single anonymous public surface; no account, login, or personalized state is required by the source.

2. System Overview

The current delivery is a single anonymous, first-party, mobile-first scrolling web app. All accepted behavior lives on one public entry surface, Landing, which hosts the hero transmission, the three story modules with their quizzes and animated counters, the end poll with real-time percentage results, and the bottom Subscribe CTA.

Actors:

• Curious Visitor — browses the three story cards, guesses each monetary loss or outcome, and watches the counters land.
• Poll Participant — casts a vote on "Which mistake was the worst?" and sees live aggregate percentages.
• Subscriber Prospect — uses the prominent bottom Subscribe CTA to continue receiving more mind-blowing facts.

Non-persona actors:

• Vote aggregation service — the runtime that tallies poll votes and returns real-time percentages to the Landing surface.
• Subscribe destination — the external channel that receives the Subscribe CTA action.

Narrow exclusions: no accounts, no login, no user profiles, no personalized history, no editorial CMS, no additional story pages beyond the three named mistakes, and no WebGL/particle-field scenes (motion stays at CSS/CSS-3D level).

2a. Product Interpretation and Delivery Boundary

The product is a public, anonymous, single-surface scrolling experience. Access is open: the Landing surface requires no identity, and no protected state exists behind it. The Subscribe CTA hands off to an external subscribe destination; the app does not own subscription management, email capture flows, or account creation. The poll is a live aggregate readout — the app owns the vote interaction and the percentage display, while the tally itself is a runtime service. Everything in this document is current delivery; no future-horizon features are accepted.

2b. Source Content Inventory

The authoritative content source is the provided video script. Its verified factual content is preserved below.

Story 01 — NASA Mars Orbiter (1999)

• Year: 1999
• System: NASA Mars spacecraft
• Cause: one team used metric units while another used imperial units
• Loss: $125 million
• Framing: "total chaos"

Story 02 — Blockbuster vs. Netflix (2000)

• Year: 2000
• Event: Blockbuster had the chance to buy Netflix
• Offered price: $50 million
• Response: they laughed and rejected it
• Current value: Netflix is worth over $200 billion

Story 03 — 10,000 Bitcoin Pizza (2010)

• Year: 2010
• Event: a guy bought two pizzas for 10,000 Bitcoins
• Current value: over $600 million
• Framing: "the most expensive meal in history"

Closing content

• Poll question: "Which mistake was the worst?"
• CTA line: "Subscribe for more mind-blowing facts!"

2c. Page Content and Component Coverage

Landing

Information and state

• Hero transmission: HUD label "TRANSMISSION 001 — THREE MISTAKES", headline "Humans make mistakes every day." with second line "But these three cost BILLIONS." in cyan, a hairline rule with three live micro-counters (125,000,000 / 200,000,000,000 / 600,000,000) in monospace, and a magenta-outlined "BEGIN" control.
• Story 01 module: HUD header (1999 + NASA Mars spacecraft), oversized numeral $125,000,000, quiz module with three answer chips, reveal state, and the metric-vs-imperial cause line.
• Story 02 module: HUD header (2000 + Blockbuster vs. Netflix), oversized numeral $200,000,000,000+, quiz module with three answer chips, reveal state, and the $50M offer / rejection line.
• Story 03 module: HUD header (2010 + 10,000 Bitcoin Pizza), oversized numeral $600,000,000+, quiz module with three answer chips, reveal state, and the "most expensive meal in history" line.
• End poll module: question "Which mistake was the worst?", three ruled data rows (one per mistake) with animated percentage bars, tabular monospace percentages, and the leader's bar in magenta.
• Subscribe block: "TRANSMISSION" panel with uppercase micro-label, one oversized line of type, and a magenta pill CTA with cyan focus ring.
• Fixed left-edge vertical progress rail with 00 / 01 / 02 / 03 numerals that fills with cyan as the user scrolls.

Primary actions

• Scroll through the three story modules.
• Select a guess chip on each story card to answer before reveal.
• Reveal the correct answer on each story card.
• Cast a vote on the end poll.
• Activate the Subscribe CTA.

Supporting actions

• Activate the "BEGIN" control to scroll-jump to story 01.
• Re-read a story module by scrolling back up.
• Observe live poll percentages update after voting.

Domain entities

• Story (year, system name, cause, loss figure, framing line)
• Quiz question (per story, three answer chips, correct chip)
• Guess (selected chip, correct/incorrect state)
• Poll option (one per mistake)
• Vote (selected option)
• Poll result (per-option percentage, leader)
• Subscribe CTA (destination link)

Component responsibilities

• Hero transmission: renders HUD label, headline, micro-counters, and BEGIN control.
• Progress rail: tracks scroll position and fills 00/01/02/03 numerals with cyan.
• Story module: renders HUD header, oversized numeral, quiz module, and cause line; owns its own reveal state.
• Counter: animates from 0 with ease-out over 1.4s and a 120ms digit flicker before settling.
• Quiz module: renders three answer chips, locks the correct chip cyan on reveal, flashes wrong picks magenta.
• Poll module: renders three ruled data rows, animated percentage bars, tabular monospace percentages, leader bar in magenta.
• Subscribe block: renders micro-label, oversized line, and magenta pill CTA with cyan focus ring.

States

• Loading: hero micro-counters and story numerals begin at 0 and animate on entry; poll percentages render as a loading placeholder until the first aggregate response arrives.
• Empty: before the user has guessed, each quiz module shows three unselected chips and no reveal; before the user has voted, the poll shows current aggregate percentages with no user selection highlighted.
• Success: correct guess locks the chip cyan with a single cyan light sweep across the card; wrong guess flashes magenta on the selected chip while the correct chip locks cyan; vote registers and the user's option is highlighted while percentages re-count; Subscribe CTA activates and hands off to the external destination.
• Error: if the poll aggregate cannot be fetched, the poll module shows a retry affordance and keeps the user's last known percentages; if the Subscribe destination is unreachable, the CTA surfaces a retry state without losing the user's scroll position.
• Recovery: retry re-requests the poll aggregate; the user can re-select a guess only before reveal; scroll position is preserved across all error and recovery states.

3. Functional Requirements

FR-1 — Interactive scrolling web app from the script (explicit) As a Curious Visitor, I should scroll through an interactive web app built from the provided script about three billion-dollar historical mistakes, so that I can consume the three stories as a single continuous experience.

• Trigger: the user opens the Landing surface.
• Observable result: the hero transmission renders, followed by the three story modules in order (NASA Mars Orbiter, Blockbuster vs. Netflix, 10k Bitcoin Pizza).
• Access state: anonymous, no identity required.
• Failure/recovery: if a module fails to render, the remaining modules still render and the failed module shows a retry affordance.
• Continuation: the user scrolls from the hero into story 01.

FR-2 — Modern dark-mode UI with sleek cards for the three mistakes (explicit) As a Curious Visitor, I should see a modern dark-mode UI with a sleek card for each of the three historical mistakes (NASA Mars Orbiter, Blockbuster vs. Netflix, 10k Bitcoin Pizza), so that each story reads as a distinct, premium module.

• Trigger: the user scrolls into each story section.
• Observable result: each mistake renders as its own full-height dark-mode module with a HUD header, oversized numeral, and quiz module.
• Access state: anonymous.
• Failure/recovery: if a module's decorative layer fails, the readable content and controls remain whole and usable.
• Continuation: the user moves to the next story module.

FR-3 — Guess-before-reveal quiz on each story card (explicit) As a Curious Visitor, I should guess the monetary loss or outcome on each story card before the answer is revealed, so that I can test myself against the real figure.

• Trigger: the user selects one of the three answer chips on a story card.
• Observable result: the selected chip is marked; on reveal, the correct chip locks cyan and a wrong pick flashes magenta.
• Access state: anonymous.
• Failure/recovery: if the user has not yet guessed, the reveal control is unavailable; the user can change their guess only before reveal.
• Continuation: after reveal, the user scrolls to the next story module.

FR-4 — Dynamic counters/animations for $125M, $200B+, $600M+ (explicit) As a Curious Visitor, I should see dynamic counters animate the numbers $125M, $200B+, and $600M+ as I reach each story, so that the figures land with impact.

• Trigger: the user scrolls a story module into view.
• Observable result: the numeral counts from 0 with an ease-out over 1.4s and a 120ms digit flicker before settling on the story's figure.
• Access state: anonymous.
• Failure/recovery: under prefers-reduced-motion the numeral renders at its final value instantly.
• Continuation: the settled numeral remains visible while the user reads the story.

FR-5 — End poll with real-time vote percentage results (explicit) As a Poll Participant, I should vote on "Which mistake was the worst?" at the end and see real-time vote percentage results, so that I can see how my pick compares to everyone else's.

• Trigger: the user selects one of the three poll options.
• Observable result: the user's option is highlighted, the percentages re-count, and the leader's bar renders in magenta.
• Access state: anonymous.
• Failure/recovery: if the aggregate cannot be fetched, the poll shows a retry affordance and keeps the last known percentages.
• Continuation: the user scrolls to the Subscribe block.

FR-6 — Prominent Subscribe CTA at the bottom (explicit) As a Subscriber Prospect, I should use a prominent Subscribe CTA at the bottom of the app, so that I can continue receiving more mind-blowing facts.

• Trigger: the user activates the Subscribe CTA.
• Observable result: the CTA hands off to the external subscribe destination.
• Access state: anonymous.
• Failure/recovery: if the destination is unreachable, the CTA surfaces a retry state without losing scroll position.
• Continuation: the user returns to the app or completes the subscribe action on the external destination.

FR-7 — Clean, mobile-friendly, responsive design with smooth animations (explicit) As a Curious Visitor, I should experience a clean, mobile-friendly, responsive design with smooth animations, so that the app reads well and feels fluid on any device.

• Trigger: the user opens the app at any viewport (375px, 768px, 1280px).
• Observable result: headlines, labels, numbers, cards' text and controls stay entirely inside the viewport and their container; sections fade and rise 24px on scroll with a 0.6s stagger.
• Access state: anonymous.
• Failure/recovery: under prefers-reduced-motion all motion collapses to instant state.
• Continuation: the user continues scrolling.

FR-8 — Fixed left-edge progress rail (required_inference) As a Curious Visitor, I should see a fixed left-edge vertical progress rail with 00 / 01 / 02 / 03 numerals that fills with cyan as I scroll, so that I can track my position through the three stories.

• Trigger: the user scrolls the page.
• Observable result: the rail fills with cyan in proportion to scroll position and marks the current story.
• Access state: anonymous.
• Failure/recovery: if the rail cannot render, the stories remain fully usable.
• Continuation: the user continues scrolling.

FR-9 — Hero transmission with live micro-counters and BEGIN control (required_inference) As a Curious Visitor, I should see a hero transmission with the HUD label, headline, three live micro-counters, and a BEGIN control, so that I can enter the experience from the video hook.

• Trigger: the user opens the Landing surface.
• Observable result: the hero renders with the HUD label "TRANSMISSION 001 — THREE MISTAKES", the headline, three ticking micro-counters (125,000,000 / 200,000,000,000 / 600,000,000), and a magenta-outlined BEGIN control.
• Access state: anonymous.
• Failure/recovery: if the micro-counters fail, the headline and BEGIN control remain usable.
• Continuation: the user activates BEGIN to scroll-jump to story 01.

4. User Personas

Curious Visitor

• Product context: arrives from the video hook, scroll-native and mobile-first, expecting spectacle and a dark cinematic register.
• Primary goal: browse the three billion-dollar mistakes as sleek dark-mode story cards, guess each monetary loss or outcome before the answer is revealed, and watch the animated counters land on $125M, $200B+, and $600M+.
• Distinct accepted responsibilities: scrolls through the three story modules in order; selects a guess chip on each card before reveal; observes the correct chip lock cyan and any wrong pick flash magenta; watches each numeral count from 0 and settle.
• Relevant inputs or decisions: which answer chip to select on each story card; whether to continue scrolling to the next story.
• Interactions with other accepted participants: the Curious Visitor's guesses are private to their session; their scroll position feeds the progress rail; their arrival is the entry point for the Poll Participant and Subscriber Prospect roles.
• Observable success: finishing all three stories having learned the real numbers.

Poll Participant

• Product context: reaches the end of the stories and encounters the poll module as an instrument readout.
• Primary goal: cast a vote on "Which mistake was the worst?" and see real-time vote percentage results reflecting the aggregate of all votes.
• Distinct accepted responsibilities: selects one of the three poll options; observes the percentages re-count and the leader's bar render in magenta.
• Relevant inputs or decisions: which of the three mistakes to vote for.
• Interactions with other accepted participants: the Poll Participant's vote contributes to the aggregate that every other Poll Participant sees; the Curious Visitor's completed scroll is the precondition for reaching the poll.
• Observable success: seeing their pick reflected in the live percentages.

Subscriber Prospect

• Product context: has consumed the stories and poll and reaches the Subscribe block at the bottom.
• Primary goal: use the prominent Subscribe CTA at the bottom of the app to continue receiving more mind-blowing facts.
• Distinct accepted responsibilities: activates the Subscribe CTA; completes the subscribe action on the external destination.
• Relevant inputs or decisions: whether to subscribe.
• Interactions with other accepted participants: the Subscriber Prospect's action follows the Curious Visitor's and Poll Participant's completed journeys; the external subscribe destination receives the handoff.
• Observable success: completing the subscribe action from the CTA.

5. Core User Flows

Flow 1 — Curious Visitor consumes the three stories

1. The Curious Visitor opens the Landing surface anonymously.
2. The hero transmission renders: HUD label "TRANSMISSION 001 — THREE MISTAKES", headline "Humans make mistakes every day." with "But these three cost BILLIONS." in cyan, three live micro-counters ticking (125,000,000 / 200,000,000,000 / 600,000,000), and a magenta-outlined BEGIN control.
3. The Curious Visitor activates BEGIN; the page scroll-jumps to story 01.
4. Story 01 (1999, NASA Mars spacecraft) renders: HUD header, oversized numeral counting from 0 to $125,000,000 with a digit flicker, and a quiz module with three answer chips.
5. The Curious Visitor selects a guess chip; the chip is marked.
6. The Curious Visitor reveals the answer; the correct chip locks cyan with a single cyan light sweep, and if the guess was wrong the selected chip flashes magenta. The metric-vs-imperial cause line is shown.
7. The Curious Visitor scrolls to story 02 (2000, Blockbuster vs. Netflix); the numeral counts to $200,000,000,000+; the quiz module presents three chips; the Curious Visitor guesses and reveals; the $50M offer and rejection line is shown.
8. The Curious Visitor scrolls to story 03 (2010, 10,000 Bitcoin Pizza); the numeral counts to $600,000,000+; the quiz module presents three chips; the Curious Visitor guesses and reveals; the "most expensive meal in history" line is shown.
9. The progress rail fills with cyan as the Curious Visitor scrolls, marking 00 / 01 / 02 / 03.
10. Failure/recovery: if a module fails to render, the remaining modules still render and the failed module shows a retry affordance; under prefers-reduced-motion all motion collapses to instant state.
11. Continuation: the Curious Visitor reaches the end poll module.

Flow 2 — Poll Participant votes and sees live results

1. The Poll Participant reaches the end poll module after completing the three stories.
2. The poll module renders the question "Which mistake was the worst?" with three ruled data rows (one per mistake), animated percentage bars, and tabular monospace percentages.
3. The Poll Participant selects one of the three options.
4. The vote registers; the selected option is highlighted, the percentages re-count, and the leader's bar renders in magenta.
5. Failure/recovery: if the aggregate cannot be fetched, the poll shows a retry affordance and keeps the last known percentages; retry re-requests the aggregate.
6. Continuation: the Poll Participant scrolls to the Subscribe block.

Flow 3 — Subscriber Prospect subscribes

1. The Subscriber Prospect reaches the Subscribe block at the bottom of the app.
2. The block renders as a "TRANSMISSION" panel with an uppercase micro-label, one oversized line of type, and a magenta pill CTA with a cyan focus ring.
3. The Subscriber Prospect activates the Subscribe CTA.
4. The CTA hands off to the external subscribe destination.
5. Failure/recovery: if the destination is unreachable, the CTA surfaces a retry state without losing scroll position.
6. Continuation: the Subscriber Prospect completes the subscribe action on the external destination or returns to the app.

6. Visuals Colors and Theme

Muse: Gleb Kuznetsov. Headline direction: Cinematic future-tech where the numbers are the monument.

Color tokens (dark mode)

• Background (void): #05060A — 70% of every screen.
• Surface (glass panel): #0C0E15 with 1px rgba(255,255,255,0.10) luminous borders and 8–12% white fills.
• Text: #EDF1F7 (body, passes AA on void).
• Primary (instrument cyan): #19E3FF — counters, gauges, active states, thin strokes.
• Accent (loss magenta): #FF3D6E — reserved exclusively for the wrong-guess state, the "worst mistake" winner bar, and the subscribe button.
• Muted: #7C8798 — used only at 14px+ uppercase labels, never for paragraphs.
• Tertiary (Bitcoin-era amber): #FFB347 — marks Bitcoin-era telemetry only.

Typography

• Headings: Space Grotesk 700 at display scale, tight negative tracking (-0.03em), sentence case.
• Micro-labels: Space Grotesk 500, uppercase 11px / 0.22em, sitting above every section like HUD readouts.
• Numerals: Space Grotesk 700 with tabular figures, clamp(64px, 18vw, 190px) — the loudest element on the page.
• Body: IBM Plex Sans, 17px / 1.6.
• Mono data: 14px.
• Scale: 1.5 modular — display numerals clamp(64px→190px), H1 clamp(40px→84px), H2 clamp(28px→44px), body 17px/1.6, micro-label 11px uppercase, mono data 14px. Mobile sizes are the clamp floor; nothing below 16px for reading text.

Shape language

• Thin luminous strokes (1px cyan at 40% opacity) over dark glass panels with 20px radii.
• Gauges and rings, not rounded rectangles.
• Every card is a "module": a numbered micro-label top-left, a hairline rule, then content.
• Data rows behave like instrument readouts.
• Zero drop shadows — depth comes from glow, blur, and layered opacity, never from soft grey elevation.

Spacing rhythm

• 24px gutters at 375px; text column maxes at 62ch and never sits under the numeral's glow.

Imagery style

• No stock photography. Imagery is procedural and diagrammatic: a wireframe Mars globe with an orbital arc that breaks at the unit-conversion point, a Blockbuster-era storefront reduced to a glowing line schematic, two pizza circles rendered as a Bitcoin transaction diagram.
• Backgrounds carry a faint 32px technical grid at 4% white plus two blurred volumetric glow orbs.
• All decorative layers are aria-hidden and never overlap readable text.

7. Signature Design Concept

The public entry is a full-bleed void (#05060A) with a faint technical grid and one blurred cyan orb bleeding off the top-right. The composition is left-aligned, not centred: an 11px uppercase HUD label "TRANSMISSION 001 — THREE MISTAKES", then a headline in Space Grotesk 700 at clamp(40px, 9vw, 118px) reading "Humans make mistakes every day." with the second line "But these three cost BILLIONS." set in cyan, spanning roughly 9 of 12 columns. Beneath it, a horizontal hairline rule with three live micro-counters ticking (125,000,000 / 200,000,000,000 / 600,000,000) in monospace, and a single magenta-outlined "BEGIN" control that scroll-jumps to story 01. No gradient blob, no centred stack, no blue button.

The signature moves that carry through the whole scroll:

• A fixed left-edge vertical progress rail with 00 / 01 / 02 / 03 numerals that fills with cyan as you scroll — the page's navigation is a mission timeline, not a navbar.
• Each story's dollar figure is an oversized Space Grotesk numeral (up to 190px) that counts up from zero with a digit-flicker, sitting directly on the void with a cyan glow, never inside a card.
• Quiz modules are glass HUD panels: three answer chips with monospace values, a 1px cyan border, and on reveal a single light sweep plus the correct chip locking cyan while wrong picks flash magenta #FF3D6E.
• The end poll renders as an instrument readout — each option a ruled data row with a thin animated percentage bar, the leader's bar in magenta, all numbers in tabular monospace that re-counts when votes land.
• A subscribe block built as a "TRANSMISSION" panel: uppercase micro-label, one oversized line of type, and a magenta pill CTA with a cyan focus ring — the only magenta-filled element on the page.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: the three live micro-counters (125,000,000 / 200,000,000,000 / 600,000,000) ticking in monospace beneath the headline, with the magenta-outlined BEGIN control as the single actionable element.
• Input → transformation → outcome thesis: as the user opens the Landing surface, the hero's micro-counters tick upward from zero and the headline settles into place; the user's activation of BEGIN scroll-jumps the page to story 01, where the first oversized numeral begins its own count.
• Motion vocabulary: counters animate from 0 with an ease-out over 1.4s and a 120ms digit flicker before settling; sections fade and rise 24px on scroll with a 0.6s stagger; a slow 40s parallax drift moves the background grid and glow orbs 2–4% against scroll; quiz reveal triggers a single cyan light sweep across the card.
• Composed first frame: full-bleed void with faint technical grid and one blurred cyan orb bleeding off the top-right; left-aligned HUD label, headline with cyan second line, hairline rule with three ticking micro-counters, and the magenta-outlined BEGIN control.
• Reduced-motion state: all motion collapses to instant state under prefers-reduced-motion; marquees stop and wrap; counters render at their final values immediately.

9. Non-Functional Requirements

• NFR-1 — Dark-mode UI (explicit): the entire app renders in dark mode using the palette in Section 6; no light-mode variant is required.
• NFR-2 — Mobile-friendly, responsive design (explicit): headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit; no other element covers any part of them.
• NFR-3 — Smooth animations (explicit): motion follows the vocabulary in Section 8 and collapses to instant state under prefers-reduced-motion.
• NFR-4 — Subscribe CTA prominence and placement (explicit): the Subscribe CTA is prominent and located at the bottom of the app.
• NFR-5 — Poll placement and real-time results (explicit): the poll is at the end of the scroll and shows real-time vote percentage results.
• NFR-6 — Readable text and controls stay whole (explicit, from creative direction): readable text and controls stay whole at every viewport; imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control.
• NFR-7 — No WebGL or particle fields (explicit, from creative direction): motion stays at CSS/CSS-3D level; continuous particle fields and WebGL scenes are excluded.
• NFR-8 — No indigo/blue-on-white SaaS template (explicit, from creative direction): Bootstrap-blue or indigo (#2563EB, #4F46E5, #7C3AED) is forbidden anywhere; the accent set is cyan and magenta only.
• NFR-9 — No forbidden typefaces (explicit, from creative direction): Inter, Roboto, Arial, Poppins, and system-ui are forbidden for any heading or body text.
• NFR-10 — Magenta reserved (explicit, from creative direction): magenta #FF3D6E is used only for loss, the poll leader, and the subscribe CTA.
• NFR-11 — Anonymous access (required_inference): the Landing surface requires no identity; no account, login, or personalized state is introduced.

10. Tech Stack

• Frontend: React (single-page scrolling app).
• Styling: CSS with the tokens in Section 6; CSS/CSS-3D motion only (no WebGL, no particle fields).
• Backend: Python / FastAPI for the poll aggregate endpoint that returns real-time vote percentages.
• Storage: a lightweight persistent store for poll votes (e.g., a relational or key-value store) sufficient to tally and return percentages.
• Deployment: Docker / docker-compose for local and single-host deployment. Kubernetes is not required by the source.

11. Assumptions and Constraints

• A-1 (assumption): The three story modules, the end poll, and the Subscribe block all live on the single anonymous Landing surface; no additional pages are introduced.
• A-2 (assumption): The Subscribe CTA hands off to an external subscribe destination; the app does not own subscription management, email capture, or account creation.
• A-3 (assumption): The poll aggregate is served by a first-party runtime endpoint; the app owns the vote interaction and the percentage display.
• A-4 (constraint): No accounts, login, user profiles, or personalized history are introduced.
• A-5 (constraint): No editorial CMS or additional story pages beyond the three named mistakes.
• A-6 (constraint): Motion stays at CSS/CSS-3D level; no WebGL or continuous particle fields.
• A-7 (constraint): The palette, typography, shape language, and motion vocabulary in Sections 6 and 8 are authoritative for this project.
• A-8 (constraint): The generic indigo/blue-on-white SaaS template is forbidden.

12. Glossary

• Landing — the single anonymous public surface that hosts the hero transmission, the three story modules, the end poll, and the Subscribe block.
• Story module — a full-height dark-mode section presenting one historical mistake with a HUD header, an oversized animated numeral, and a quiz module.
• Quiz module — the glass HUD panel on each story card with three answer chips, a reveal action, and the correct/wrong chip states.
• Micro-counter — the small monospace ticking figures in the hero transmission (125,000,000 / 200,000,000,000 / 600,000,000).
• Oversized numeral — the story's dollar figure rendered in Space Grotesk 700 at up to 190px, counting from 0 with a digit flicker.
• Progress rail — the fixed left-edge vertical rail with 00 / 01 / 02 / 03 numerals that fills with cyan as the user scrolls.
• Poll module — the end-of-scroll instrument readout asking "Which mistake was the worst?" with three ruled data rows and live percentage bars.
• Subscribe block — the "TRANSMISSION" panel at the bottom with an uppercase micro-label, one oversized line of type, and a magenta pill CTA.
• HUD label — the 11px uppercase Space Grotesk 500 micro-label that sits above every section like an instrument readout.
• Void — the deep black-blue background #05060A that occupies roughly 70% of every screen.