TITLE: The Horological Room — Six Live Clock Faces in a Museum Gallery

PROMPT: Build a single-file, self-contained HTML page titled "The Horological Room — Six Live Clock Faces in a Museum Gallery": a museum wall of six framed analog clocks, all running on real time, each designed in a different decade's design language. Palette: #f2efe9 wall, #1b1b1b ink, #c9a227 brass, #8c1c13 accent red, #4a5568 slate. Typography: Georgia small-caps wall labels, system-ui 700 header, ui-monospace kickers and controls. Structure: a fixed top-right control cluster (a pill segmented control with TICK / SWEEP and a LIGHTS toggle with a glowing brass dot), a centered museum plaque header (mono kicker "The Horological Room · Room VI", system-ui 700 uppercase h1 "Six faces, all running" with the last two words in red italic Georgia, a serif sub-paragraph, hairline rules above and below), then a responsive CSS grid of six figures — 3 columns above 1000px, 2 columns to 600px, 1 column below — each figure a brass-bordered frame (3px #c9a227, cream mat gradient, layered box-shadow) holding a round clock, plus a wall label (Georgia small-caps name and year over a mono caption). The six faces, all built from divs and transforms with no SVG: Bauhaus (radial-gradient dial with a thick black outer band, 12 bars with the quarter marks red, black hour and minute bars, red second hand), Art Deco (repeating-conic-gradient brass sunburst over a dark centre, 12 counter-rotated Georgia numerals, gilt hands with counterweight tails), Minimal (hairline ring, four slate marks, one brass dot at twelve, hairline hands, no numerals), Skeleton (wide rim, three spinning repeating-conic-gradient gears visible through the open dial, brass second hand), Railway (bold Arabic numerals in Arial Narrow, a 60-tick minute track with a red 12, black spade hands, red second hand with a tail), Brutalist (concrete-grey dial with a thick black rim, 12 heavy black blocks, four oversized 900-weight numerals, square-capped black bars). Every dial is drawn with proportional radial-gradient rings and every mark is a full-inset span rotated about the dial centre, so nothing depends on px measurements. Hands are absolutely positioned spans at left:50%, bottom:50%, transform-origin 50% 100%, animated by transform: translateX(-50%) rotate(deg) from real Date values: tick mode snaps the second hand to whole seconds and steps the minute hand 0.1deg per second, sweep mode interpolates milliseconds. Hovering a frame lifts it 8px and scales it 1.032 with a brass glow and a screen-blended spotlight overlay; a cast shadow drifts under each frame with a slow alternate transform keyframe. Clicking a frame opens a full-screen viewer that rebuilds the same clock at large scale in an overlay with a plaque (case number, name and year, description, spec line), closable by the close button, backdrop click, or Escape, with focus restored afterwards. A LIGHTS toggle dims the wall with a fixed #0d0c0a overlay. All JS in one IIFE in a single inline <script> at the end of body; every null guarded; no external references; the substring "http" absent everywhere.

DESCRIPTION: A quiet museum room for six clock faces from six decades, all wound to the same moment. Each case has its own typographic and graphic system — geometric bars, gilt sunburst, hairline minimalism, exposed gears, a railway minute track, concrete blocks — but they all tick off the same real time. The wall stays bright; hovering a case lifts it into a spotlight, and opening one fills the screen with a single dial and its catalogue plate.

TECHNIQUES:
- Proportional dial graphics built entirely from layered radial-gradient and repeating-conic-gradient rings (no SVG, no px-dependent borders)
- Radial marks and numerals as full-inset spans rotated about the centre, with nested counter-rotation to keep numerals upright
- Real-time hands driven by Date with two movement models (steps of whole seconds vs millisecond sweep) and a dirty-gated rAF loop that only writes styles when the second or half-frame changes
- Per-face design systems: Bauhaus geometry, Deco sunburst, Minimal hairlines, Skeleton gears with CSS spin, Railway 60-tick track, Brutalist blocks
- Gallery lighting: screen-blended spotlight overlay, brass glow box-shadow, drifting cast shadow
- Full-screen viewer that rebuilds a face at large scale from the same generator, with focus management and scroll lock
- CSS custom properties, clamp() sizing, container-query units for numerals, small-caps Georgia labels

INTERACTION: Hovering a clock lifts the frame, scales it slightly, brightens its brass ring and raises the spotlight; the cast shadow under every frame drifts slowly. Clicking (or pressing Enter/Space on) a frame opens a full-screen single view with the same live clock, its case number, name, year, description and spec; close it with the close button, a backdrop click, or Escape. The TICK / SWEEP segmented control switches every hand in the room between snapping whole seconds and a smooth sweep. The LIGHTS button dims or raises the whole gallery. All six clocks keep running on real local time at all times.