TITLE: MERCURY OS — Liquid Metal Component Specimen

PROMPT: Build a single self-contained HTML page that presents "MERCURY OS", a fictional liquid-metal design system, as a premium component specimen. Canvas is near-black #14151a with two fixed radial glows (ice #c9f2ff at the top right, hot #ff5c8a at the bottom left) plus a 1px repeating-linear-gradient scanline at 2% opacity for metal grain. Hero: a ui-monospace kicker in steel #7c818c with a pulsing hot dot, then a massive display wordmark "MERCURY" (system-ui 800, clamp(3.1rem,12.4vw,10.2rem), line-height .84, letter-spacing -.052em) filled with a 7-stop vertical silver gradient via background-clip:text and a 1px dark text-stroke, with a light 300-weight "OS" superscript. Under it a muted lede and four pill chips, then a 14px chrome rail bar with a repeating specular sweep animation. Layout below: a 190px sticky left rail of component names (ui-monospace uppercase, active state = hot left border + ice dot) beside a 2-column card grid that collapses to 1 column under 760px and to a horizontal scrolling chip rail under 900px. Six cards on a #191b21 panel with 22px radius, hairline border, inset top highlight and a pointer-tracked radial ice sheen. Card 1: chrome buttons — layered 6-stop silver gradients, inset bevel shadows, a skewX(-16deg) specular band that sweeps on hover via mix-blend-mode:screen, an expanding radial ice blob at the pointer on press, a squish transform scale(.965) scaleY(.93), a hold-to-charge fill that sweeps over 900ms then locks with a hot ring, plus a live state readout. Card 2: mercury slider — a 58px inset dark rail, a chrome sphere knob with radial highlight and inset shading, driven by a spring integrator (k=.16, damp=.78) that overshoots and settles, velocity-driven scaleX squash, a percentage + bar readout, and a droplet that detaches and falls when the slider is flicked. Card 3: pour toggle — a 120x48 track with an inner layer filtered blur(5px) contrast(15) containing a liquid fill, a chrome knob and a drip blob, so the parts merge gooey-style; toggling on pours the drip with a keyframed teardrop stretch. Card 4: segmented control — 3 options on an inset track with a chrome highlight indicator that flows between them on a springy cubic-bezier(.22,1.38,.38,1) transition and flips label colour to ink. Card 5: metal ramp — five gradient swatches labelled with hex tokens. Card 6: states & focus — pills with chrome :focus-visible rings (2px ink gap + ice ring) and keyboard support. Footer hairline row. All motion respects prefers-reduced-motion.

DESCRIPTION: A dark, machined component catalogue where every control is treated as an object cast from metal. The page reads like an internal release page for a design system: oversized chrome wordmark, mono labels, a sticky index, and six specimens that each demonstrate a different liquid behaviour. The chrome is built entirely from layered CSS gradients and inset shadows rather than images, and the interactions are physical — springs, squash, gooey merges, and a droplet that falls when you flick the slider.

TECHNIQUES: 7-stop linear-gradient chrome with background-clip:text wordmark; layered inset box-shadow bevels; skewX specular sweep on ::after with mix-blend-mode:screen; radial pointer blob expanding on press; gooey merge via filter:blur(5px) contrast(15) on a single small wrapper; JS spring integrator with velocity-driven scaleX squash; detached droplet particle with CSS keyframes and animationend cleanup; transform-origin scaleX liquid fill; springy cubic-bezier indicator for the segmented control; IntersectionObserver sticky-rail active state; rAF-throttled pointer-tracked card sheen; :focus-visible chrome rings; prefers-reduced-motion media query plus a matchMedia flag that snaps springs.

INTERACTION: Hover any chrome button to slide the specular band across the bevel. Press and hold the primary button — it deforms, an ice blob blooms from the press point, a charge bar sweeps for 900ms, then the button locks with a hot accent ring and the state readout changes from idle to charging to locked. Drag the mercury slider or focus it and use Arrow/Home/End — the knob follows through a spring, squashes by velocity, and sheds a falling droplet if you flick and release it. Click the pour toggle (or Space/Enter) — the knob travels, the gooey liquid rises to fill the track and a drip pours from the knob, with OFF/ON state text. Click a segment or use Arrow keys — the chrome indicator flows between Solid, Liquid and Vapour. Click the state pills to select them; Tab shows the chrome focus ring on every control. Resize keeps the knob, fill, indicator and droplet aligned via a debounced layout pass.