TITLE: Neon Sign Shop — Tube Lettering Studio on a Brick Wall

PROMPT: Build a single self-contained HTML page that acts as a live neon-sign customiser. Background is a near-black brick wall (#0b0b0f) drawn entirely in CSS: two repeating-linear-gradients make mortar lines, a third offset copy (background-size 132px 68px, background-position 33px 34px) creates the staggered brick bond, plus a screen-blended radial wash in the live tube colour, a vignette and a faint repeating-conic "grit" overlay. Centre the composition with a flex column: a huge neon sign sitting on a dark metal backboard (rounded 22px, inset highlight, deep drop shadow, thin white border), with a mirrored reflection directly beneath it — the reflection is a second copy of the same text with transform:scaleY(-1), filter:blur(3px), opacity .42 and a mask-image linear-gradient that fades it out at 82%. The neon glow is pure multi-layer text-shadow: 0 0 2px #fff, 0 0 5px #fff, then the tube colour at 11px / 22px / 44px / 88px, then a wide white bloom at 150px. Palette: wall #0b0b0f, pink #ff2fb9, cyan #38e8ff, amber #ffd166, white #f5f5f5; the tube colour is a CSS variable --tube switched at runtime. A small rotated "OPEN" sign sits top-right in cyan with a steps() flicker animation. The control panel is a bottom bar on a blurred dark gradient: a text input (maxlength 18) that re-letters the sign live, four circular colour swatches, four lettering chips (Neon = system-ui 800, Script = "Brush Script MT", Block = Impact, Wide = "Arial Narrow" with .2em tracking), and three effect toggles (Flicker, Buzz, Pulse). Typography: system-ui stack for UI, ui-monospace for the hint line. Font size auto-fits: start at min(190px, containerWidth*0.26) and shrink by 0.93 until the text fits. All JS in one IIFE at the end of body, zero external assets, no @font-face, no SVG namespace URLs.

DESCRIPTION: A dark workshop wall where the visitor becomes the sign-maker. The type is the product: as you type, the tube re-letters itself in layered glow and the reflection shivers underneath. Colour swatches re-light the whole room through the screen-blended wash, lettering chips swap the physical tube style, and the three effect toggles let you make the sign flicker like a dying transformer, wobble on loose mountings, or breathe in a slow halo pulse. The mood is after-hours: one lit sign, one brick wall, one counter.

TECHNIQUES: CSS brick bond from three repeating-linear-gradients with offset background-position; six-stop layered text-shadow tube glow; transform:scaleY(-1) + blur + mask-image reflection; radial-gradient halo behind the sign; screen-blended ambient colour wash driven by a CSS custom property; steps(1,end) keyframe flicker on the corner sign; JS random-interval opacity flicker with randomised short/long delays; steps(2,end) buzz wobble plus a one-shot buzz-hard keyframe on click; scale-and-opacity halo pulse; measured shrink-to-fit font sizing against container width; input sanitisation stripping angle brackets, quotes, slashes and control characters; media query that flattens every animation under prefers-reduced-motion.

INTERACTION: Typing in the input re-letters the sign and its reflection instantly (live, sanitised, 18 characters max). Clicking a colour swatch swaps --tube, which re-lights the sign, the halo, the ambient wall wash, the input focus ring and the active chip colour. Clicking a lettering chip swaps the font stack and re-runs the fit pass. Flicker starts a randomised opacity jitter (0.35-1.0) with variable 60-1140ms gaps; Buzz applies a permanent two-step wobble; Pulse makes the halo breathe over 3.1s. Clicking or pressing Enter/Space on the sign itself fires a stronger one-shot buzz. Resizing re-runs the fit. Under prefers-reduced-motion all of these animations are disabled and flicker never starts.