TITLE: HOLO HUD — Orbital Telemetry Console

PROMPT: Build a single self-contained HTML page that is a full-viewport holographic sci-fi HUD. Palette: space #04070f, cyan #38e8ff, amber #ffb020, mint #7df9c0, panel #1b2a44; the whole console re-themes from a single --accent custom property. Body is fixed, overflow hidden, with a CSS-grid HUD: a top bar spanning three columns, then a 212px status column / fluid centre / 232px telemetry column, then a full-width ticker. Background is layered: two soft radial glows, a 42px cyan grid via two repeating-linear-gradients, and a 3px scanline overlay at 55% opacity. Four hairline corner brackets frame the viewport. Top bar: cyan "SYS·04 HUD CORE", a centred mission string, and a LIVE row with a pulsing amber dot plus a real clock ticking every second. Left column: five subsystem rows with glowing LED dots (mint nominal, amber drift, dim standby), a "Bus load" panel with 14 bars scaled on transform, and a boot log panel bottom-aligned in mono. Centre: a square core gauge built from three concentric conic-gradient rings masked into annuli, each spinning at a different speed and direction (34s / 22s reverse / 13s), over an inline SVG drawn at runtime by assigning an innerHTML string to an existing <svg> element — 73 radial ticks across a 270° sweep with major/minor weights, 40 micro ticks on an inner rail, three faint concentric rails, a dashed-glow value arc plus a solid value arc whose stroke-dashoffset is driven by the live value, MIN/NOM/MAX labels, end caps and four corner registration marks. A 2px needle rotates from -135° to +135° with transform-origin at the dial centre, and a radial-gradient hub caps it. Below the dial: an oversized tabular-numeral readout with unit and label, then three pill mode buttons. Right column: three telemetry gauges, each a conic-gradient ring masked to an annulus whose fill is set with calc(var(--v) * 1%), a tracked label, a tabular value, and a hover/focus detail card that slides up; below them a 60-second flux-history sparkline rebuilt by innerHTML as a filled polygon plus polyline plus a dashed midline. Bottom: an infinite mono ticker of ◆-separated telemetry tokens (content duplicated so translateX(-50%) loops seamlessly) with a mask fade at both edges. A cyan scan band sweeps down every 9s. A pointer-following targeting reticle — two counter-rotating rings, four corner brackets, crosshair, dot, and a live AZ/EL readout — is spring-damped (k=.17, damp=.74) toward the cursor. Clicking locks the target: the reticle turns amber, the dot flashes twice and "TARGET LOCKED" appears for 1.4s. Keys 1-3 or the mode buttons switch between Orbital/THz, Thermal/K and Signal/dB, re-tinting every accent, SVG stroke and glow. A single rAF loop eases all values and stops when settled (targets are refreshed on a 900ms pump), so idle means zero style writes. Responsive: below 700px the grid stacks and scrolls; below 560px height the log hides and the dial shrinks. prefers-reduced-motion stops ring rotation, the scan sweep and the lock flash.

DESCRIPTION: A deep-space telemetry console rendered entirely in vector-free CSS and runtime-built SVG. Everything is monospaced, tracked, and labelled like real avionics: status LEDs, bus bars, a boot log, a spinning multi-ring core dial with a needle and a dash-driven value arc, side gauges, a scrolling ticker and a reticle that chases the pointer with spring physics. The single accent variable lets the whole instrument re-tint when the operator switches between orbital, thermal and signal modes, and the numbers keep easing toward live values so the console always feels switched on.

TECHNIQUES: conic-gradient rings masked into annuli with radial-gradient masks; runtime SVG generated as an innerHTML string (no namespace URL); polar tick generation and SVG arc path construction; stroke-dasharray/stroke-dashoffset value arc; transform-origin needle rotation; spring-damped pointer reticle; single dirty-gated rAF loop with a 900ms target pump; CSS custom property theming (--accent) driving SVG currentColor strokes and glows; conic-gradient dials with calc(var(--v) * 1%); innerHTML sparkline; duplicated-content infinite ticker with mask fades; scan sweep via transform keyframes; tabular-nums readouts; :focus-visible rings; prefers-reduced-motion media query plus a matchMedia flag.

INTERACTION: Move the pointer anywhere over the console — the targeting reticle springs toward it and its AZ/EL readout updates live. Click (not on a button) to lock a target: the reticle flashes amber, the dot pulses twice and a TARGET LOCKED message appears for 1.4s. Press 1, 2 or 3 — or click the mode pills — to switch between Orbital, Thermal and Signal: the accent colour, every glow, the SVG stroke colour, the unit and the label all re-tint, and the needle and readout re-range. Hover or focus a side gauge to raise its detail card with peak, mean and setpoint values. The core needle, value arc, gauges and bus bars continuously ease toward new telemetry targets, the ring layers rotate at three different speeds, the scan band sweeps top to bottom, the ticker scrolls and the clock advances. Resizing re-kicks the render loop; below 700px the console reflows to a single scrollable column.