TITLE: Constellation Maker — name your own night sky
PROMPT: Hand-author one self-contained HTML page (no external assets, no occurrence of the substring "http") that turns the viewport into a night sky you can draw on. Ground: fixed full-screen sky (#050810) layered with two soft radial glows and a rotated, blurred milky-way band, plus 74 CSS-only dust specks with staggered twinkle animations generated once via an innerHTML string. A fixed glass panel (rgba(30,41,59,.72) + backdrop-filter blur, 14px radius, 1px #94a3b8/18 border) sits top-right with the title "Constellation Maker", a tracked mono subtitle, a text input and a cyan Save button, a "Named figures" list, and a footer showing how many stars are placed. The sky itself holds an absolutely-positioned star layer and an SVG link layer (viewBox 0 0 100 100, preserveAspectRatio none, all strokes vector-effect non-scaling-stroke) with an edges group rebuilt by assigning an innerHTML string and a static dashed temp line used during dragging. Clicking empty sky drops a star: a 30px transparent hit box with a radial-gradient core whose size, twinkle duration and delay are inline custom properties; stars twinkle between scale .7/.6 and scale 1.14/1.0. Dragging from one star to another draws an edge as two paths — a 5px translucent glow and a 1.15px bright line in #7dd3fc — animated in with stroke-dashoffset from 12000 to 0 (a dash far longer than any on-screen line, so the visible stroke stays solid under non-scaling-stroke) over .75s cubic-bezier. Typing a name and pressing Enter or Save assigns every unassigned star and its edges to a new group, turns them amber #fde68a, and adds a list entry with a 38px auto-normalised SVG glyph that rotates 360deg over 48s. Clicking a list entry highlights that figure (its stars scale to 1.4 with an amber halo, its lines turn amber, everything else drops to .26 opacity); Escape or a second click clears it. Double-clicking a star removes it and its edges. Respect prefers-reduced-motion by stopping the glyph rotation, star scaling and edge draw animation. All CSS in one inline style block, all JS in one IIFE at the end of body, state is session-only.
DESCRIPTION: A quiet, personal star atlas. You click to place stars, drag between them to draw the figure, and type a name to make it permanent in the panel, where each named constellation gets a tiny auto-generated chart of itself that turns slowly. Saved figures glow amber against the cyan of the working lines, and selecting one dims the rest of the sky so only that figure survives. The panel is a floating pane of frosted glass over a hand-lit sky of drifting dust, and the hint line at the bottom fades back to a whisper once the first star lands.
TECHNIQUES: session-only star and edge model with hit-testing in CSS pixels against fractional coordinates; runtime SVG built by assigning innerHTML strings to an existing group (never createElementNS); stroke-dashoffset draw-on animation using an oversized dash length so non-scaling-stroke lines stay solid, paired with a translucent glow path for the halo; auto-normalised glyph generation that fits each constellation's bounding box into a 100x100 viewBox; CSS-only dust field and star twinkle via transform/opacity keyframes with per-element custom properties; frosted-glass panel with backdrop-filter; pointer-capture-free drag with a window-level pointerup and a skyDown guard so panel clicks never place stars; double-click removal that prunes edges and refreshes glyphs; class-based highlight state (lit/faded/named) with a slow 48s glyph rotation; prefers-reduced-motion branch.
INTERACTION: Click any empty sky to place a star (the hint fades after the first). Press and drag from one star to another to connect them — a dashed preview line follows the pointer and the new edge draws itself in. Type a name and press Enter or Save to name the figure: its stars turn amber and a rotating glyph appears in the panel list. Click a saved name to highlight it (its lines and stars light amber while the rest of the sky dims), click again or press Escape to clear. Double-click a star to delete it along with its connections. Hovering a star scales it 1.7x, dragging scales it 1.9x, and saving with fewer than two stars shakes the input.