TITLE: The Meridian Job — A Film Noir Serial

PROMPT: Build a single self-contained HTML page as a film-noir landing page for a fictional detective serial. Ground is near-black #0a0a0c with a faint brass #b9a779 wash top-left and a case-red #8c1c13 wash bottom-right. Masthead: mono kicker "Chapter one · serial no. 9", a Georgia 700 uppercase tracked h1 "The Meridian Job" with the middle word in case red, right-hand typewriter meta lines and a LAMP ON/OFF toggle button. Below, a two-column stage (1.18fr / .82fr, collapsing to one column under 900px). Left is the hero: a dark scene with a rain-lashed window (62% x 74%, 10px frame, a vertical mullion and a horizontal rail made from ::before/::after), two rain layers built from repeating-linear-gradient(180deg, streak 0-20px, gap to 118px) with background-size 100% 118px/196px inside a skewX(-11deg) container, each translated by exactly one background tile height so the loop is seamless; venetian-blind shadows across the whole scene as a repeating-linear-gradient of 9px dark bands every 25px, rotated -3.4deg, skewX(-7deg), masked to fade toward the floor and swaying ±7px over 13s; a desk-lamp glow (640px radial gradient in brass) that follows the pointer via translate3d set in a rAF-throttled handler, and flickers once on load with a steps(1,end) keyframe; three blurred smoke blobs (44-88px, static blur 9px) curling upward on 7.8-12s keyframes; a clip-path detective silhouette; a desk edge with a glowing pen; and a mono caption line that types itself at the bottom. Right column is the case file: a stamped sheet with a dashed inner rule, a typewriter h2, a dt/dd case row grid (victim, found, missing, lead), a 16:9 evidence photo plate with a red EVIDENCE stamp, a "who did it?" input plus FILE button, and a scrolling transcript that types the detective's replies. Below, three evidence cards (3 cols to 1) that expand a hidden case note on click. Bottom is a seamless marquee of six clues (content duplicated and translated -50%). Palette: #0a0a0c, bone #d8d4c8, case red #8c1c13, shadow #4a4a52, brass #b9a779. Type: Georgia 700 uppercase tracked display, Georgia body, "Courier New" case notes, ui-monospace captions and tickers. All CSS in one inline style, all JS in one IIFE at the end of body, zero external assets.

DESCRIPTION: A rain-soaked night office. The blinds cut the light into stripes across the wall and sway when the building settles; smoke climbs from an ashtray out of frame; the desk lamp is a warm pool that you can drag around the scene or switch off entirely. The case file reads like a real docket — stamped, ruled, typewritten — and the serial's narration types itself out one sentence at a time. Three exhibits wait below, each with a redacted bar that opens into a handwritten-feeling case note, and the clue ticker keeps circling the facts you already missed.

TECHNIQUES: seamless two-layer CSS rain using repeating-linear-gradient tiles translated by exactly one background-size period inside a skewed container; venetian-blind shadow via repeating-linear-gradient with rotate + skewX, masked with mask-image and animated on transform only; pointer-tracked radial lamp glow written once per frame inside requestAnimationFrame with the hero rect cached on resize, not per frame; steps(1,end) one-shot lamp flicker that returns to the un-animated opacity so the toggle still works; three small statically-blurred smoke blobs animated purely on transform/opacity; clip-path polygon silhouette; character-by-character typewriter with per-character punctuation pauses and a cancellable token; deterministic reply selection from a string hash; duplicated marquee content translated -50% for a seamless loop; disclosure cards animated with max-height plus opacity; full prefers-reduced-motion fallback that freezes all keyframes and prints text instantly.

INTERACTION: Moving the pointer over the hero drags the lamp pool with it; leaving the scene returns it to the desk corner. The masthead toggle switches the lamp off (glow drops to 12%) and relabels itself. The caption cycles through three narration lines, typing each one and pausing on full stops. Clicking or pressing Enter on any exhibit card opens its case note with an easing max-height reveal and flips its label between Read the note and Close the note. Typing a suspect's name and pressing FILE appends your line and a typewritten reply chosen deterministically from the name. The clue ticker scrolls continuously. Under prefers-reduced-motion the rain, blinds, smoke, lamp flicker and marquee are frozen and all typed text appears instantly.