TITLE: Split-Flap Board — Departures

PROMPT: Build a single self-contained HTML page (system fonts only, no external assets) titled "Split-Flap Board — Departures": a physical Solari airport departure board on a near-black stage (#0b0c0e with radial #23262c and #1a1c21 washes and a fixed vignette). Centered shell max-width 880px, 20px radius, 14px padding, brushed-metal gradient frame (#33373e to #0a0b0d) with two 9px radial screw heads in opposite corners and a deep inset shadow. Inside, a #111214 board with 12px radius, inset ring shadow and a top-highlight/bottom-shade overlay. Header row: an amber pulsing 7px status dot (2.4s steps blink) beside "DEPARTURES" in 700 uppercase .34em tracking #9aa1ac; a live 8-cell flip clock (HH:MM:SS) with larger cells (--cw clamp(15px,2.6vw,25px)); a right-aligned monospace sub block ("gate 07 · sector b / split-flap · 12 module"). Seven departure rows, each a flex row (time 5 cells, destination N cells flexible, gate 3 cells, status 10 or 3 cells) with 1px rgba(255,255,255,.045) separators, 8px radius, hover background rgba(245,165,36,.07) and a 2px translateX nudge. Every character is a split-flap cell: a 1.62:1 box with perspective 260px containing four halves — a static top half and bottom half (rounded 2px, #f4f4f0 to #dedcd5 gradients, inset highlights) plus two animated panels (top panel transform-origin bottom, base rotateX(-90deg); bottom panel transform-origin top, base rotateX(90deg)) whose inner <b> is 200% tall and clipped so the glyph sits on the cell's centre line; a 1px dark seam with a white under-line sits at 50%. Keyframes: flapA 0%→50% rotateX(0→-90deg) hold to 100%, flapB 0/50% rotateX(90deg)→100% rotateX(0), both linear over var(--fd). Monospace 700 uppercase glyphs at var(--fs). JS in one IIFE: an ALPHA alphabet table (A–Z, 0–9, space, dot, colon) drives a glyphPath() that steps a cell through at most four intermediate glyphs to its target; each cell keeps its own queue and busy flag, swaps .up/.fa text to the old char and .fb/.dn to the new, restarts the CSS animation with a forced reflow and commits the char after the flip duration; boot renders the whole board instantly (frozen-clock safe, no entrance clatter, so the very first paint is a complete legible board); the clock ticks each second through the same flappers; a 9s interval reroutes a random row; clicking a row scrambles its destination through random letters then settles on a new city; SHUFFLE reroutes everything with an 80ms wave; hover sets --fd to 420ms so the clatter slows; a SOUND toggle lazily creates an AudioContext, caches a 45ms exponential-decay noise buffer and plays a bandpassed clack (1100–3200Hz, throttled to one per 22ms) on every flip; a monospace marquee ticker loops in the footer. Status colours: neutral, #3b82f6 for BOARDING/GATE OPEN, #f5a524 for FINAL CALL/DELAYED. Layout measures itself: --cw clamps 11–22px from the board width, destination length recomputed 6–14 chars and status shortened to 3 letters under 430px. Reduced motion sets --fd to 1ms and stops the ticker and blink. No console errors; every DOM lookup guarded.

DESCRIPTION: A mechanical departure board rebuilt as a living instrument. Every character is a genuine two-panel split-flap module — static top and bottom halves with a dark seam, plus a falling top panel and a rising bottom panel that pass each other in 3D — so text never simply appears, it clatters into place one glyph at a time through a short alphabet path. The board paints fully legible on the first frame, then stays alive: the monospace clock in the header ticks through the same mechanism every second, rows reroute on a schedule, a click scrambles a destination through random letters, SHUFFLE sets the whole hall flipping, and hovering slows the flip duration so you can watch the mechanism work. Optional WebAudio clacks, synthesised from a decaying noise burst through a bandpass filter, sell the physicality.

TECHNIQUES:
- Two-panel 3D split-flap per character (rotateX with bottom/top transform-origin, preserve-3d perspective per cell)
- 200%-tall clipped inner glyph so each half shows the correct slice of the letter
- Per-cell queue + busy flag with glyphPath() alphabet stepping (max 4 intermediate glyphs)
- Forced-reflow animation restart; commit callback timed to the CSS variable flip duration
- Instant first paint then a staggered decoy clatter (frozen-clock-safe entrance, no opacity tricks)
- Self-measuring layout: --cw clamped from board width, adaptive destination/status character counts
- Lazy WebAudio: cached noise buffer through a randomised bandpass filter, throttled clacks
- Hover-driven --fd slowdown, CSS marquee ticker, 3D screw details and metal frame gradients

INTERACTION: Click any departure row — its destination scrambles through random letters and settles on a new city with a fresh time, gate and status. Hover the board — the flip duration lengthens from 150ms to 420ms so you can watch each character fall. Press SHUFFLE to reroute every row at once in an 80ms wave. Press SOUND to enable synthesised clacks (the AudioContext is created on the first gesture and the toggle resumes it if suspended). The header clock flips every second; a background timer reroutes a random row every 9 seconds; resizing re-measures the board and rebuilds the rows only when the character counts actually change.