TITLE: Modular Type Scale — A Live Specimen Ladder

PROMPT: Build a single-file, dependency-free "modular type scale" designer tool on paper-white #faf9f6 with ink #111111, accent #2563eb, meta grey #9ca3af and hairline rules #e5e7eb. Two-column studio layout inside a 1460px max-width wrap: a sticky left control column (ratio chips 1.125 / 1.25 / 1.333 / 1.5 / 1.618 with ratio names beneath, a base-size range slider 12-24px with a tabular-numeral output readout, a three-way specimen-face segmented toggle Grotesk / Serif / Mono, and a baseline-grid switch) and a right specimen ladder listing eight steps — caption, body-s, body, lead, h3, h2, h1, display — computed as base x ratio^n. Every ladder row shows the step name plus px, rem, line-height and tracking hints in ui-monospace uppercase micro-type with tabular numerals, then the live specimen line (system-ui grotesk by default, Georgia or ui-monospace on toggle) whose font-size, line-height and letter-spacing are written inline by JS. Line-height eases from 1.75 at 12px down to 1.05 at display sizes; tracking runs from +0.04em on small type to -0.03em on display. Changing a ratio runs a FLIP pass: measure each specimen's rect, write new sizes, measure again, then Web-Animate each inline-block specimen from translate(dx,dy) scale(old/new) back to identity with a 560ms cubic-bezier(.22,.8,.2,1) ease. Numeric labels count up through a single shared rAF tween list. A repeating-linear-gradient baseline grid (1px line every 8px at rgba(37,99,235,.16)) overlays the ladder and fades in from 16% to 50% opacity. Clicking or pressing Enter on a row opens a full-screen paper modal with the specimen at clamp(40px,min(19vw,15rem),15rem) plus a five-column meta strip (size, rem, line-height, tracking, ratio). Arrow Left/Right cycles ratios, Arrow Up/Down nudges the base size, Escape or Enter closes the modal. Mobile below 880px stacks the controls into a two-column grid above the ladder. Respect prefers-reduced-motion by disabling reveals, FLIP and the counter tween.

DESCRIPTION: A designer's utility that behaves like a printed specimen sheet: a disciplined paper-and-ink canvas where the typographic scale itself is the hero. The left rail is deliberately quiet — micro-type labels, hairline borders, one blue accent — so the eye lands on the ladder, where eight steps of real type sit on a faint blue baseline grid. Every interaction recomposes the whole ladder with a FLIP motion that makes the sizes feel physical rather than swapped, and the px/rem readouts tick up like an instrument. It reads as a professional foundry tool but is beautiful enough to leave open on a second monitor.

TECHNIQUES:
- Modular scale computed in JS as base x ratio^n and written to inline font-size / line-height / letter-spacing per specimen
- FLIP animation with Web Animations API: rect measurement, transform translate+scale inverse, ease back to identity
- Single shared rAF tween list for all counting labels (dirty-gated, stops when idle)
- CSS custom properties for the specimen font stack, swapped live by the face toggle
- Repeating-linear-gradient baseline grid overlay with opacity fade-in keyframe (never starts hidden)
- Tabular numerals via font-variant-numeric for all measurements
- Full-screen specimen modal with clamp()-based fluid display size
- Entrance reveals by transform translateY only, so a frozen-clock render still shows the complete page
- Media queries at 880px and 520px; prefers-reduced-motion disables motion

INTERACTION:
- Click a ratio chip (or press Left/Right arrows) to change the scale ratio; the whole ladder FLIPs to the new sizes and all px/rem labels count up
- Drag the base-size slider (or press Up/Down arrows) from 12 to 24px; the readout and every step recompute live
- Toggle Grotesk / Serif / Mono to re-render the specimens in system-ui, Georgia or ui-monospace
- Toggle the baseline grid on and off
- Click a ladder row, or focus it and press Enter/Space, to open the full-screen specimen with its size, rem, line-height, tracking and ratio; click the backdrop, press Escape or Enter to close
- Hover a row for a soft blue wash; focus shows a left accent bar