Style guide
Live components from assets/site.css and assets/lib.js. Rationale, voice and the five-step learning design are in STYLE.md. Toggle the theme (top right) to check both surfaces: notebook (light) and blackboard (dark).
Tokens
Model colours: blue = student / true quantity · red = character's claim · green = added / correct · amber = unknown (x).
Bricolage Grotesque for headings
Atkinson Hyperlegible for body and all maths: 1 l I 0 O · 3x − 4 = 2x + 5 · ₹96 · 56
Kalam for characters and red-pen marks only.
Highlight the one key phrase per screen.
The overconfident cast
fractions
percentages
equations
Stepper, choices, buttons
What happened → why → what to try
Yes! 36 + 26 = 56. Same-size pieces can be counted together.
That's Turbo's trick — adding tops and bottoms. Is your answer even bigger than 12?
Enter your answer first.
Callout: for a key takeaway or score.
claimChecker() and quiz()
- Missions tick themselves.Found: sixths fit!
- Unfinished mission.