TITLE: Kinetic Type Clock — the time of day, spelled out and reassembled every second

PROMPT: Build a single self-contained HTML page that is a full-viewport kinetic-type clock. Palette: charcoal #111114 ground, bone #f2f2ef, vermilion #ff5c39, cobalt #3a86ff, sun #ffd166. Layout: one stage filling 100dvh as a three-row grid (topbar / rows / baseline) with clamp padding. Behind the type, a huge conic-gradient progress ring — background: conic-gradient(from -90deg, #3a86ff calc(var(--sweep,0) * 1turn), rgba(242,242,239,.055) 0) — cut into an annulus with mask: radial-gradient(closest-side, transparent 73.5%, #000 74%); two sibling rings give a hairline circle and a sun-coloured tick dot that rotates with the sweep, all centred with translate(-50%,-50%). The three stacked rows are HOUR / MINUTES / SECONDS: a right-aligned mono .56rem uppercase label and an overflow-hidden stage of height clamp(2.9rem,13.5vw,9.6rem) for the hour, clamp(1.9rem,8.8vw,6.1rem) for minutes and clamp(1.35rem,5.9vw,3.5rem) for seconds, each coloured bone / sun / vermilion. Each stage holds absolutely-positioned .word spans in a flex row, white-space nowrap, font-size calc(var(--h) * .86). Time is spelled in English words (zero…fifty-nine, hyphenated tens); hour honours 12/24h. Four type styles selectable with keys 1–4: data-style="1" forces "Arial Narrow" condensed grotesk everywhere, "2" forces Georgia 900 slab, "3" forces ui-monospace, "4" is the mixed default (hour condensed, minutes slab, seconds mono). Motion: per-letter spans carry transition-delay: var(--ld) and slide on transform translate3d(0,118%,0) → 0 with a .5s cubic-bezier(.2,.86,.2,1) inside an overflow-hidden mask; the outgoing word slides to translate3d(0,-118%,0) and is removed after 700ms; the initial paint never animates so a frozen render is complete. The loop is a drift-corrected requestAnimationFrame reading the real clock every frame, writing --sweep to the ring and updating only the row that changed; an hour rollover recomposes all three rows with staggered delays. The numeric HH:MM:SS readout is deliberately held back 620ms after a word swap so it never contradicts the word mid-transition. Baseline shows the long date (Intl), the numeric readout, the resolved IANA timezone and pill chips for 24H and styles 1–4. Click anywhere on the stage toggles 12/24h; hover the stage slows the tick (transition-duration 1.15s and a larger letter stagger); space pauses the ambient motion and flips the status line. prefers-reduced-motion: reduce kills all letter transitions and the row entrance animation. One inline style block, one inline script IIFE at the end of body, zero external references, and the substring "http" must never appear.

DESCRIPTION: A clock with no numerals. The hour, minutes and seconds of the real time are spelled as words and hold still for exactly as long as their unit lasts, then the word that changed is replaced by a new one that slides up through an invisible mask, letter by letter, each letter arriving a few hundredths of a second after the last. The hour is the loudest thing on the page — condensed grotesk, bone white, up to 9.6rem — with the minutes in sun-coloured Georgia slab and the seconds in a small vermilion mono, so the hierarchy reads at a glance even though the content is entirely verbal. Behind them a cobalt conic ring sweeps one full revolution per minute with a sun-coloured tick travelling its rim, giving the whole composition a slow mechanical pulse. The page is a single charcoal field, so the ring reads as light rather than chrome. Pressing 1–4 re-cuts the entire typographic system live, space freezes the clock mid-breath, hovering the stage slows every letter's arrival so the mechanism becomes visible, and clicking anywhere swaps between a 24-hour and 12-hour reading.

TECHNIQUES:
- Per-letter inline spans with transition-delay from a --ld custom property, sliding inside an overflow-hidden mask
- Transform-only word swap: incoming translate3d(0,118%,0) → 0, outgoing translate3d(0,-118%,0), node removal after 700ms, with the numeric readout held back 620ms so it never contradicts the word mid-swap
- JS-driven conic-gradient progress ring via a --sweep custom property (no @property needed), masked into an annulus with radial-gradient
- Rotating sun tick marker positioned by transform on a separate ring element
- Drift-corrected requestAnimationFrame loop reading the system clock each frame and writing only what changed
- data-style attribute switching four complete type systems (condensed grotesk / Georgia 900 slab / mono / mixed)
- Intl.DateTimeFormat for the long date and the resolved IANA timezone with try/catch fallbacks
- clamp() stage heights driving calc()-derived font sizes, so the type scales with the row box
- pointerenter/pointerleave slow-tick state, space-to-pause state machine, pill chips with aria-pressed

INTERACTION:
- Click anywhere on the stage: toggles 12-hour / 24-hour spelling and re-renders the hour row
- Press keys 1–4: force the condensed, slab, mono or mixed type system across all three rows
- Press space: pause or resume the ambient ticking; the status line reads "Paused — hold your breath"
- Hover the stage: every letter transition slows to 1.15s with a wider stagger, exposing the mechanism
- Click the 24H / 1 Cond / 2 Slab / 3 Mono / 4 Mixed chips: same toggles with visible aria-pressed state
- Watch the minute: the cobalt ring sweeps one full turn, the sun tick travels the rim, and on the hour all three rows recompose in a staggered cascade
- prefers-reduced-motion: reduce removes letter transitions and the entrance animation, so words simply change in place