TITLE: Airlock 03 — a login that behaves like a door

PROMPT: Build a single self-contained HTML page that is a science-fiction airlock entry terminal. Palette: hull #05080d, scan cyan #38e8ff, alert red #ff4d4d, granted mint #7df9c0, panel #1b2a44, ink #dff3ff. Layout: a full-height flex column — a top status bar (vessel MERIDIAN · AIRLOCK 03, DECK 7 · BAY C, pressure 101.3 kPa, monospace 0.3em tracked), a two-column stage (door zone minmax(0,1fr), control panel minmax(0,min(430px,46%))), and a footer log line with a Cycle airlock button that only appears once access is granted. The door zone holds a radial .light bloom (white core to mint to cyan, scaled to 0.16 and opacity 0 until granted), a .door with perspective:1400px, width clamp(170px,23vw,310px), aspect-ratio .74/1, split into two absolutely positioned .half panels with chamfered clip-path polygons that meet on a diagonal seam — left polygon(0 3%,3% 0,52% 0,48% 100%,3% 100%,0 97%), right the mirror — each with a dark navy gradient, an inset cyan hairline, repeating rib gradients and transform-origin on the seam edge; on .granted the left half translates -104% with rotateY(22deg) and the right +104% with rotateY(-22deg) over 1.5s, and the light scales to 1 and fades in. A circular window (clamp(104px,14.6vw,196px)) sits centred inside each half so the seam cuts it exactly in two when the doors open; it carries a rotating dashed ring, a cyan scan line sweeping top to bottom on a 2.9s keyframe, a reticle of four ticks plus a centre circle and a BIO-SCAN label. The right panel stacks: a status plate with a 3px accent bar, a plate head with a live clock, a system-ui 800 uppercase status line at clamp(21px,2.9vw,38px) with a coloured glow, and a sub-line; a four-slot code display whose slots fill with ● and whose next slot blinks; a 3x4 keypad of monospace keys (1-9, Clr, 0, Enter) with hover glow, press translate and focus rings; a hold-to-scan pad with a label, a percentage readout and a 4px progress track whose bar scales from 0 to 1 over 1.5s while held; and a row of eight LED bars on a staggered chase keyframe. Typography is ui-monospace throughout except the system-ui 800 status display. Motion: scan line sweep, dashed ring spin, LED chase, blinking caret, red shake on denial, perspective door split on grant. Interaction: hold the scan pad (pointer or Enter/Space) for 1.5s to complete the biometric handshake, then type any four digits and press Enter to open the hatch; pressing Enter before scanning or with fewer than four digits triggers a red shake, an ACCESS DENIED status and a logged reason; the Cycle airlock button resets to standby. WebAudio is created and resumed only inside the first user gesture, wrapped in try/catch, and plays a short blip per key, a two-tone confirm on scan, a rising three-note chord on grant and a low sawtooth buzz on denial. State machine is idle to ready to granted with an idle fallback on denial. All CSS in one inline <style>, all JS in one IIFE in one inline <script> at the end of body, system fonts only, zero external references, no createElementNS, responsive from 360px (stacked, door above panel) to 1920px, and prefers-reduced-motion disables the sweep, spin, chase, shake and door transition while keeping the full state machine and an immediately open door.

DESCRIPTION: An airlock terminal that treats authentication as a physical act. Two chamfered steel halves seal a hatch with a circular bio-scan window cut across the seam; a cyan line sweeps the glass and a dashed ring turns while you hold your hand on the pad. The panel beside it is pure instrument: a glowing status readout, four code slots, a heavy monospace keypad and a chase of LED bars. Get it right and the two halves swing apart in perspective, a wall of light floods through, every LED goes mint and the log reads ACCESS GRANTED. Get it wrong and the whole console flinches red and tells you exactly why.

TECHNIQUES: Chamfered clip-path door halves with perspective and per-half transform-origin so they swing on the seam; circular window duplicated into each half so the split cuts it cleanly; CSS keyframe scan-line sweep inside the window plus a spinning dashed ring; staggered LED chase via per-element animation-delay custom properties; grid keypad with hover, active and focus-visible states; hold-to-scan progress driven by requestAnimationFrame with inline transform scaling; state machine idle to ready to granted with deny fallback; WebAudio oscillators with gain ramps created only inside gesture handlers and fully try/catch wrapped; red shake keyframe; radial light bloom scaled from 0.16 to 1 on grant; reduced-motion media query that removes every keyframe while preserving state logic.

INTERACTION: Press and hold the scan pad for one and a half seconds — the progress bar fills, the status reads SCANNING then IDENT CONFIRMED, and the log timestamps the biometric match. Type four digits on the keypad or with the number keys; each press blips and fills a slot, Backspace deletes, Clr or Escape clears. Press Enter or the Enter key to submit: with a completed scan and four digits the doors split open in perspective, the light blooms, every LED turns mint and a Cycle airlock button appears; without a scan the console shakes red and logs BIOMETRIC SCAN REQUIRED; with fewer than four digits it shakes and logs INCOMPLETE CODE · 4 DIGITS REQUIRED while staying armed for a retry. Cycle airlock reseals the hatch and returns to standby. With reduced motion the door opens instantly and all ambient animation stops.