The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Constellation Story Map

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], an original single-page celestial story atlas presenting [COLLECTION_NAME] with the headline [HEADLINE]. The default guide contains the six comma-separated constellations in [CONSTELLATION_SET], with original retellings shaped around [STORY_LENS] for [AUDIENCE]. Visitors drag and zoom a code-drawn star field, select constellations to trace their lines and read their stories, shift an explicitly illustrative sky by date, and connect maker stars into named creations saved locally. Use only procedural Canvas 2D, local SVG, and original copy; this is not a reproduction of an existing planetarium or star atlas.

- Audience: Write the introduction, story summaries, and help text for [AUDIENCE]. A first-time visitor should understand the controls without prior astronomy knowledge. Keep the myths accessible without turning them into horoscopes, and make every canvas action available through ordinary DOM controls for keyboard and touch users.
- Goal: Within five seconds, let a visitor see a richly detailed sky, one traced constellation, and a readable story. Make dragging, selection, date changes, and the create-save loop feel immediate and reliable. Preserve selected stories and saved creations across rerenders, keep saved creations across reloads, and deliver the complete experience as a static site with no external data request.
- Tone: Curious, lyrical, precise, and gently editorial. Treat classical myth as cultural storytelling rather than scientific fact or personal prediction. Use concise US English, concrete interaction feedback, and original modern retellings. Clearly call the star geometry and date behavior illustrative; never imply location-aware observing guidance, live ephemeris data, astrology, or fortune-telling.

## Stack
- Framework: Vite 6 + React 18 + TypeScript
- Styling: Vanilla CSS with custom properties
- Libraries: react and react-dom (MIT), vite (MIT), typescript (Apache-2.0), lucide-react (ISC), @fontsource/newsreader (OFL-1.1), @fontsource/manrope (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create package.json with scripts dev = vite, build = tsc --noEmit && vite build, and preview = vite preview. Configure vite.config.ts with base './', build.outDir 'dist', build.sourcemap false, build.target 'es2020', and minification enabled. Use one index.html entry, no router, and no backend.
  - Organize the project as src/content.ts for all variable values and visible strings, src/data/sky.ts for typed pattern geometry and deterministic star generation, src/components/SkyCanvas.tsx for canvas rendering and pointer input, src/components/StoryPanel.tsx, src/components/CreatePanel.tsx, src/App.tsx for UI state, and src/styles.css for tokens and responsive rules. When variables change, rewrite every dependent story, label, storage namespace, and instruction to fit the new values; leave no default-brand or default-story remnants.
  - Self-host Newsreader 400, 500, and 600, Manrope 400, 500, 600, and 700, and IBM Plex Mono 400 and 500 through the listed Fontsource Latin packages. Wait for document.fonts.ready before drawing any canvas labels. Set lang en, a plain document title '[BRAND] — [COLLECTION_NAME]', theme-color #080D1F, and an original local four-point-star favicon.svg.
  - Parse CONSTELLATION_SET on commas into exactly six trimmed display names. Keep the six geometry records in the same order and replace their names, epithets, stories, and notes when the set changes. Use a 1600 × 1000 world with centers in listed order at (260,250), (810,220), (1320,270), (390,735), (930,700), and (1370,710). Use these local point arrays and undirected edge index pairs exactly: Lyra points [[0,-72],[48,-4],[30,64],[-42,54],[-48,-10]], edges [[0,1],[1,2],[2,3],[3,1],[0,4]]; Cygnus [[0,-115],[0,-48],[0,15],[0,105],[-105,-12],[-52,-25],[52,-15],[105,5]], edges [[0,1],[1,2],[2,3],[4,5],[5,2],[2,6],[6,7]]; Cassiopeia [[-110,40],[-55,-45],[0,30],[55,-50],[110,35]], edges [[0,1],[1,2],[2,3],[3,4]]; Orion [[-65,-85],[65,-80],[0,-135],[-45,0],[0,5],[45,10],[-55,105],[65,100]], edges [[2,0],[2,1],[0,3],[1,5],[3,4],[4,5],[3,6],[5,7],[6,7]]; Ursa Major [[-125,-25],[-75,-65],[-15,-50],[15,5],[70,35],[130,5],[180,-50]], edges [[0,1],[1,2],[2,3],[3,0],[3,4],[4,5],[5,6]]; Corona Borealis [[-120,25],[-85,-35],[-35,-65],[15,-70],[60,-45],[95,0],[110,55]], edges [[0,1],[1,2],[2,3],[3,4],[4,5],[5,6]]. These are intentionally simplified illustrative figures, not astronomical coordinates.
  - Generate 420 background stars once with a local mulberry32 generator seeded 48271, uniformly distributed through the 1600 × 1000 world. Give each a deterministic radius from 0.55–1.75, opacity from 0.18–0.68, and phase for restrained twinkle; make every seventeenth star slightly brighter with a short code-drawn diffraction cross. Add the guide stars separately with radii 2.5–4.2 and small radial halos. Generate 28 maker stars with mulberry32 seed 90217 inside x 260–1340 and y 180–820, rejecting positions closer than 72 world units to another maker star; their ids and positions must remain stable.
  - Render in this order: a #080D1F to #101A36 radial/linear sky gradient; a faint 100-world-unit grid and two broad dashed atlas arcs; background stars; inactive constellation hairlines at rgba(228,188,114,.16); guide stars and halos; the active traced lines at 1.6 CSS pixels in #E4BC72; selected-star rings; then maker points and lines. Keep story cards, buttons, date controls, and readable labels in DOM rather than painting paragraphs into canvas. Use no bitmap texture, glow filter stack, or image asset.
  - Keep selected mode, selected constellation, zoom, date, maker name, maker points, saved collection, and guide-open state in React. Keep pan velocity, pointer gesture, animation progress, and per-frame transforms in refs. Fit the full world into the canvas with 60 CSS pixels initial padding, allow zoom 0.75–2.2 around the canvas center, clamp panning so some sky always remains visible, and use ResizeObserver to recompute the transform without resetting state. Cap device pixel ratio at 1.75 desktop and 1.5 mobile.
  - Implement pointer capture and a 6 CSS-pixel movement threshold. A press-move-release above the threshold pans with direct 1:1 movement and at most 550ms of damped momentum; below the threshold it performs hit testing. In Explore mode, accept a guide star or constellation segment within 20 CSS pixels and select the nearest candidate. In Create mode, accept only a maker star within 22 CSS pixels and append it if fewer than eight points are selected and that star is not already present in the polyline. Set touch-action none only on the canvas, never on the surrounding page or form controls.
  - Initialize Explore mode with the first constellation selected and its trace completed so the first screen contains a visible story and gold geometry. Selecting another constellation sets trace progress to 0 and animates all edges together from 0 to 1 over 700ms with easeOutCubic; the story panel updates immediately and a polite status announces '[name] traced'. Trace again replays the same 700ms sequence without changing the story. Under reduced motion, all traces appear completed immediately.
  - For the date control, use a fixed non-leap 2026 atlas with native date input min 2026-01-01, max 2026-12-31, default 2026-09-21, synchronized with a 0–364 range input. Convert dates with an explicit local-noon parser, never Date.parse on a bare YYYY-MM-DD string. Rotate the background field and atlas together by sin(day/365 × 2π) × 18 degrees around world center and translate them vertically by cos(day/365 × 2π) × 55 world units. Interpolate changes over 160ms, or immediately for reduced motion. This deterministic decorative transformation must be labeled illustrative and must not be presented as actual visibility.
  - In Create mode, dim atlas lines and guide stars to 25% opacity and raise the 28 maker stars. Maintain an ordered polyline of up to eight distinct points; allow a nonconsecutive point to be revisited only after Clear. Undo removes one point, Clear empties the polyline, and Save requires at least three points and a trimmed nonempty name of at most 24 UTF-16 characters. Store up to six creations in localStorage under a versioned key derived from a slug of [BRAND], including name and maker-star ids only. Validate restored data, discard unknown ids, recover silently from malformed storage, and provide Load and Delete for each saved item. Never store pointer coordinates, dates, or analytics.
  - Provide keyboard-equivalent DOM controls for every canvas action: six constellation buttons, zoom and reset buttons, native date inputs, and in Create mode a labeled maker-star select with Star 1 through Star 28 plus an Add point button. The focusable canvas also supports arrow-key panning by 40 CSS pixels, + and - zoom, and Escape to return to Explore; never intercept keys inside inputs, selects, textareas, or buttons. Use visible focus, accessible canvas text, aria-pressed on modes, and a polite status region that announces completed actions rather than animation frames.
  - Use requestAnimationFrame at full rate only during gestures and transitions; at idle, cap subtle star twinkle to 24 frames per second and pause it while document.hidden. Do not rerender React each frame, allocate star arrays in the render loop, or run an autonomous camera. For prefers-reduced-motion, remove twinkle, momentum, smooth date interpolation, trace animation, and decorative UI movement while retaining all functions. Listen for preference changes and clean up observers, listeners, and animation frames on unmount.
  - Write ASSETS.md at the project root covering original procedural star data, Canvas rendering, SVG marks and diagrams, Lucide ISC, and all three Fontsource packages with OFL-1.1 licenses. Keep every runtime request local and dist/ below 20 MB. No generated images are required for this template.

## Variables
- [BRAND] — Atlas brand (default: "Asterwyn"). An invented short name for the wordmark, document title, local-storage namespace, and guide; never a real brand.
- [COLLECTION_NAME] — Sky collection name (default: "The Lantern Sky"). A short invented title for the current collection of six constellation stories.
- [HEADLINE] — Welcome headline (default: "Find the stories between the stars."). A clear five-to-ten-word invitation; adapt supporting copy if its meaning changes.
- [AUDIENCE] — Audience (default: "curious stargazers and families reading together"). A plain-language phrase used to adapt the welcome, stories, and help copy.
- [CONSTELLATION_SET] — Six constellation names (default: "Lyra, Cygnus, Cassiopeia, Orion, Ursa Major, Corona Borealis"). Exactly six comma-separated public-domain constellation names in the order of the six supplied geometry records; write original stories for each.
- [STORY_LENS] — Story themes (default: "wonder, courage, and connection"). Three broad themes used to shape the original retellings without prophecy or advice.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/constellation-story-map in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Midnight `#080D1F` — Page background, canvas deep field, and scrims.
- Atlas indigo `#101A36` — Canvas glow, header, and primary raised surfaces.
- Story panel `#151E38` — Story, creation, and guide surfaces.
- Hover navy `#1D2948` — Selected fields and hover states.
- Parchment `#F3E9D2` — Primary text, story titles, and bright guide stars.
- Muted blue `#AAB5CD` — Secondary copy and inactive controls with readable contrast.
- Antique gold `#E4BC72` — Active constellation lines, focus rings, selected outlines, and primary-button fill.
- Gold ink `#241A0D` — Text on antique-gold buttons.
- Atlas line `#35415E` — Hairline borders, coordinate grid, and dividers.
- Star blue `#B9CBFF` — Cool star halos and subtle secondary diagram accents.

### Typography
- Wordmark, H1, story names, and large guide quotations: Newsreader (OFL), weights 400/500/600
- Body, buttons, fields, story text, help, and status messages: Manrope (OFL), weights 400/500/600/700
- Date readout, story numbers, field labels, and coordinate captions: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use an 8px base unit. The desktop shell is max-width 1504px with 24px side padding; header is 64px high. Main uses 20px top padding and a 256px / minmax(480px, 1fr) / 320px grid with 16px gaps. The central canvas is 620px high at 1440 × 900, with a separate 76px control bar below. Left introduction uses 48–58px H1 at 1.02 line height; story prose stays near 58–66 characters per line. At 390 × 844 use a 56px header with 16px padding, a compact 120px introduction, a 360px canvas, and normal-flow controls and story below. All interactive targets are at least 44 by 44px, and page content never causes horizontal overflow.
- Radius: Use 18px for the sky stage and large panels, 12px for the guide dialog and story diagram, 10px for fields and primary buttons, 8px for constellation rows, and 999px only for compact mode tabs and status pills. Use 1px Atlas line borders and broad soft shadows. Parchment and gold are solid editorial accents; do not turn every surface into translucent glass.
- Motion: Render the complete star field and first selected story immediately, with no splash, loading gate, or blocking intro. The first constellation is already traced; only explicit selection or Trace again starts the 700ms line reveal.
- Motion: Dragging follows the pointer directly. Release may continue for at most 550ms with rapidly damped velocity, then stop without overshooting the pan bounds. Zoom changes use a 140ms ease-out transform centered on the canvas.
- Motion: Constellation lines reveal as one coherent 700ms easeOutCubic sequence, not a random star chase. The selected guide stars receive one restrained halo expansion over 500ms and the story text crossfades over 160ms.
- Motion: Date changes interpolate the illustrative sky over 160ms. Maker points appear with a 160ms radius-and-opacity pulse, while saved and loaded polylines draw over 420ms. No automatic pan follows a selection.
- Motion: Buttons, tabs, panels, and dialogs use 120–180ms color, opacity, or at most 4px movement transitions. Reduced motion removes twinkle, momentum, interpolation, line drawing, and nonessential transforms while keeping immediate state feedback.
- Imagery: The high-craft interactive Canvas 2D sky is the visual anchor; use no photographs, generated bitmap images, downloaded atlas maps, image textures, or external constellation art. Layer a deep indigo gradient, fine atlas grid, dashed arcs, 420 deterministic background stars, six original simplified gold figures, cool halos, and 28 maker stars. Use the same point and edge data to draw local SVG diagrams in story cards. The original brand mark and favicon are a simple asymmetric four-point star with one offset dot, not a logo copied from an astronomy product. No people, faces, mascots, zodiac characters, real institutions, or branded telescope imagery.

## Pages & Sections
### [BRAND] — [COLLECTION_NAME] (`index.html`)
1. **Content model and exact default stories** — Keep every visible string and all geometry metadata in the declared content/data modules. Default intro eyebrow is '[COLLECTION_NAME] · SIX STORIES'; H1 is '[HEADLINE]'; body is 'A field guide for [AUDIENCE]. Wander the night, follow six old patterns, and leave a new one of your own.' The theme line is 'Original retellings shaped by [STORY_LENS].' Default constellation records in order are: 01 Lyra, epithet 'The listening harp', story 'Orpheus carried a lyre whose music made even stones seem to listen. In this retelling, the instrument remains after the player is gone, holding not a spell but a reminder: careful listening can change the shape of a room. The small harp becomes an invitation to make something worth remembering.', note 'Five guide points form a small harp-like frame. Vega is the brightest anchor in this simplified map.'; 02 Cygnus, epithet 'The traveling swan', story 'A swan circles the old stories in more than one disguise. Here, its long wings are read as a sign of safe passage rather than a literal transformation. The bird carries a traveler over dark water, asking them to trust the next small stretch of sky.', note 'A long central line and crossbar give this pattern its swan and Northern Cross associations.'; 03 Cassiopeia, epithet 'The borrowed crown', story 'A queen speaks too proudly and finds her place in the heavens turned upside down. This version keeps the lesson modest: praise is fleeting, but generosity can outlast a throne. Her five bright points rise and dip like a crown passed from hand to hand.', note 'Five points make the familiar W-shaped rhythm used for this illustrative pattern.'; 04 Orion, epithet 'The winter walker', story 'A hunter strides through many ancient tales, forever followed by his dogs and the coming winter. Our telling imagines him less as a conqueror than a watchful walker, learning the season by footprints and frost. His belt becomes three pauses on a long journey home.', note 'Three closely spaced belt points sit between four corner stars in this simplified figure.'; 05 Ursa Major, epithet 'The northern bear', story 'A mother and child are set among the stars as bears in a story told across generations. Here the great bear guards a familiar path rather than a treasure. Follow the bowl to its two outer stars, and the night offers a way to begin finding north.', note 'Seven points form the Big Dipper asterism, part of the larger Ursa Major constellation.'; 06 Corona Borealis, epithet 'The kindness arc', story 'A crown shines after the wedding feast has ended. This retelling treats each jewel as a promise kept by someone who helped its wearer begin again. The arc is less a royal ornament than a small constellation of kindness, bright enough to follow without needing a throne.', note 'Seven guide points form a compact arc; real constellations occupy three-dimensional space, not flat connect-the-dots figures.' For alternate variables, write six new original stories and notes of similar length for the supplied names and STORY_LENS; do not retain these default texts.
   Layout: This section defines the content model rather than a separate visible marketing block. Each story record supplies name, number, epithet, 40–70 word story, one-sentence pattern note, geometry id, and theme-aware summary. The six geometry records remain in the exact variable order. Classical names may be real; all brand, collection, epithet, and narrative wording must be original.
   Motion: Announce a newly selected story once through a polite status region. Do not animate or announce individual body-text words.
2. **Header and compact atlas introduction** — Header left contains the original four-point-star mark and [BRAND] in Newsreader 500 at 23px. Header right contains a quiet pill 'An imaginative night atlas' and a CircleHelp button labeled 'How to explore'. The left introduction contains the eyebrow, H1, body, and theme line exactly as defined above. Below it place a small two-row legend: solid gold line 'Selected story'; faint gold line 'Unselected pattern'. Do not add marketing navigation, pricing, accounts, testimonials, or a separate large landing-page hero.
   Layout: The header spans the shell with a bottom Atlas line border. On desktop the introduction occupies the top of the left grid column, with 16px between text groups and 24px before the legend. On mobile keep the brand and How to explore visible, hide only the quiet pill, and shorten the introduction to eyebrow, 38px H1, and one sentence; do not let it cover the canvas. No hamburger menu is needed.
   Motion: Intro copy is present at first paint. Only the help button and focus rings animate; no headline reveal, floating ornaments, or moving eyebrow.
3. **Six-story constellation index** — Title the left index 'Stories in this sky' with a small '06' mono count. Each row is a button containing the two-digit number, constellation name, and epithet from the content records. The selected row uses an antique-gold left rule, Hover navy fill, and a small Check icon, never color alone. Below the index add 'Prefer a blank page?' and a secondary PencilRuler button 'Make your own'. Activating any row returns to Explore, selects that pattern, starts its trace, and updates the story panel without scrolling the page.
   Layout: Desktop rows are 64px high with 10px gaps and 12px horizontal padding, stacked beneath the introduction and legend. The Make your own button spans the column. At tablet widths below 1120px, collapse the outer layout to a 220px index / flexible stage arrangement and place story below. At 390px, replace the six full rows with a labeled native select 'Choose a constellation' above the stage, retaining all six names and the same selection behavior; put Make your own in the mode tabs rather than leaving a duplicate button.
   Motion: Rows use a 140ms border and background transition. Selection does not move the list, auto-scroll the document, or steal focus from the invoking control.
4. **Interactive night-sky stage** — Center the large canvas inside a bordered stage with top-left mono label 'FIELD 01 / [COLLECTION_NAME]' and top-right mode tabs 'Explore' and 'Create'. Initial helper text at bottom-left is 'Drag to wander · Tap a pattern to trace'; on touch use 'Drag to wander · Tap a star or pattern'. Bottom-right shows Plus, Minus, and RotateCcw icon buttons with accessible names Zoom in, Zoom out, and Reset view. A narrow lower strip always reads 'Simplified patterns · Illustrative sky, not a live ephemeris'. Explore shows all six patterns, background stars, and the selected gold trace. Create dims the atlas and reveals 28 brighter maker stars with helper 'Tap up to 8 stars to connect your shape'. The canvas accessible description names the current mode and directs users to the equivalent DOM controls.
   Layout: The canvas fills the desktop 620px-high stage with an 18px radius and 1px Atlas line border; captions sit in small solid Midnight-at-82% strips so they remain readable over stars. Zoom controls stack vertically at lower-right without covering the initial selected figure. On mobile the stage is 360px high, the mode tabs remain at top-right, field label shortens to 'FIELD 01', and the helper uses one line with 12px type. Set touch-action none only on the canvas; the mode tabs and zoom buttons remain ordinary DOM elements outside its pointer handler.
   Motion: Implement the exact pan, hit-test, zoom, trace, twinkle, and reduced-motion behavior from Setup. Input feedback begins within one rendered frame. Selection never triggers a camera flight. Pause ambient rendering while hidden and avoid layout movement when labels change.
5. **Story panel and constellation maker** — In Explore mode the right panel shows the selected number and 'CONSTELLATION STORY', its Newsreader name, epithet, a local SVG of the same point/edge geometry, the full original story, a 'Pattern note' label with the note, and a secondary 'Trace again' button. Finish with a quiet text button 'Make a constellation instead'. In Create mode replace the story with a panel titled 'Name a new pattern' and helper 'Connect three to eight maker stars. Your creation stays in this browser.' Include a visible name input labeled 'Constellation name', maxlength 24, placeholder 'For example, The Quiet Harbor'; a live '{n}/8 stars' count; Undo and Clear buttons; the keyboard-equivalent maker-star select and Add point button; and a primary Save constellation button disabled until valid. Below, title the saved area 'Your small sky'. Empty text is 'No saved patterns yet. Connect at least three stars to begin.' Each saved row shows its name and point count with Load and Delete actions. Loading restores the ordered points and name; Delete requires one inline confirmation and does not affect the built-in stories.
   Layout: Desktop Explore is one 320px Story panel with 22px padding, a 150px-high SVG diagram, 16px group gaps, and Trace again aligned to the bottom where content allows. The SVG uses actual record coordinates fitted with 18px padding, antique-gold lines, parchment points, and no text inside. Create controls use full-width 44px fields and buttons, Undo and Clear in a two-column row, and saved rows separated by hairlines. On mobile the active panel follows the date controls in normal flow, with no fixed height and no overlapping canvas. The keyboard star selector remains visible rather than hidden in an accessibility-only stylesheet.
   Motion: Story content crossfades over 160ms after selection; diagram lines share the canvas trace duration. Maker points and loaded polylines use the specified short reveals. Save shows inline 'Saved to this browser' for 2.4 seconds without a toast library or layout shift. Reduced motion shows all states immediately.
6. **Sky-at-date controls and guide footer** — Below the canvas place a control bar labeled 'Sky at date' with CalendarDays icon, a native date input, and a synchronized range slider. The mono readout uses Intl.DateTimeFormat en-US with month short, day numeric, year numeric; default visible value is 'Sep 21, 2026'. A Reset date button restores that fixed default without resetting the selected story or creations. Four poetic quarter labels are 'Chapter I · The listening sky', 'Chapter II · The turning sky', 'Chapter III · The wandering sky', and 'Chapter IV · The homeward sky'; show the appropriate label as decoration only, never as seasonal observing advice. How to explore opens a guide titled 'A few ways to wander' with four items: 'Drag' / 'Move across the field, or use the arrow keys on the focused canvas.'; 'Trace' / 'Choose a pattern in the sky or story index to draw its lines and read an original retelling.'; 'Make' / 'Connect three to eight maker stars, name the pattern, and save it locally. The star selector offers the same action without a pointer.'; 'Change the date' / 'Move through the fixed 2026 atlas to shift the illustrative field. This is not an astronomical forecast or an astrology reading.' Add 'Star patterns are simplified. Classical names belong to old stories; every retelling here is newly written.' Footer text is 'Six old patterns. One small sky of your own.' with the optional [CREDIT] link.
   Layout: The 76px date bar is a three-column grid: label/readout, flexible range input, and date input with Reset date. On mobile use two rows with label/readout first, range second, and date/reset third if height permits; all inputs stay at least 44px high. The guide is a centered 520px-max-width dialog with 24px padding, Midnight scrim, focus trap, Escape close, and focus return; at mobile use a bottom sheet with safe-area padding and max-height 82svh. Footer is a quiet flex row below the app, stacked on mobile, with no extra site sections.
   Motion: Date changes use the 160ms sky interpolation and update the readout immediately. Guide entry uses 140ms opacity and 4px rise, or immediate opacity under reduced motion. No dialog opens automatically.

## Assets
- image: Use no external or generated image files. Author the star field, atlas grid, constellation lines, maker points, halos, story diagrams, four-point brand mark, and favicon entirely with local Canvas 2D and SVG from the declared original data. Record this original procedural authorship in ASSETS.md; no downloaded maps, textures, photographs, or placeholder images.
- icon: Bundle lucide-react locally for CircleHelp, Check, PencilRuler, Plus, Minus, RotateCcw, CalendarDays, Undo2, Trash2, Save, X, BookOpen, and MousePointer2 at 18–20px with currentColor. Use only familiar utility meanings; do not import brand, zodiac, or third-party constellation icons. Record Lucide's ISC license in ASSETS.md.
- font: Install and self-host @fontsource/newsreader, importing only Latin woff2 files for weights 400, 500, and 600. Record package path, source, author, and OFL-1.1 license in ASSETS.md; no font CDN.
- font: Install and self-host @fontsource/manrope, importing only Latin woff2 files for weights 400, 500, 600, and 700. Record package path, source, author, and OFL-1.1 license in ASSETS.md; no font CDN.
- font: Install and self-host @fontsource/ibm-plex-mono, importing only Latin woff2 files for weights 400 and 500. Record package path, source, author, and OFL-1.1 license in ASSETS.md; no font CDN.

## Don'ts
- Do not copy, trace, recolor, or closely imitate an existing planetarium, star atlas, educational website, or astronomy product, including its code, prompt text, map projection, interface composition, illustrations, icons, copy, slogans, names, logos, or mascot. The procedural layout and visual treatment here must remain original.
- Do not use third-party star-atlas artwork, photographs, sky textures, constellation illustrations, downloaded map tiles, proprietary zodiac art, licensed characters, real people's likenesses, or any brand logo. Use only the declared original Canvas and SVG geometry and local utility icons.
- Do not copy mythology passages, guidebook entries, educational copy, or story-panel text from another source. Classical constellation names and broad public-domain myths may inform the six records, but every retelling, epithet, note, and instruction must be newly written.
- Do not present the toy as a live astronomical catalog, location-aware sky forecast, scientific ephemeris, astrology reading, horoscope, or source of personal predictions. Keep the illustrative-sky disclosure visible and do not invent precise coordinates, visibility claims, or observing conditions.
- No backend, server code, API routes, database, authentication, astronomy API, geolocation request, remote form submission, analytics, third-party API, runtime fetch, tracking pixel, social widget, or account. Saved creations stay in validated localStorage and contain only names and maker-star ids.
- No CDN scripts or styles, Google Fonts URLs, hotlinked assets, externally hosted icons, placeholder-image services, Unsplash, Pexels, Pixabay, Google Images, or assets with unclear, noncommercial, or share-alike licenses. Use Vite base './', relative paths, locally bundled packages, and self-hosted Fontsource fonts.
- Do not add image generation, Three.js, WebGL, a canvas helper library, a state-management library, an animation framework, a router, or external astronomy data. Native Canvas 2D, SVG, CSS, React state, and the declared packages are sufficient.
- Do not hard-code default brand, collection, headline, audience, constellation set, story themes, story text, or storage namespace outside the content/data modules. Alternate values must produce six coherent new stories and interface copy with no default remnants or unresolved [VARIABLE] placeholders.
- Do not confuse taps with drags, attach touch-action none to the whole page, hide creation behind pointer-only input, or let a date change erase the selected story, view, or saved collection. Follow movement thresholds, hit areas, state rules, and keyboard-equivalent controls exactly.
- Do not run unbounded animation, per-frame React rendering, per-frame star-array allocation, uncapped device pixel ratio, animation while hidden, automatic camera movement, or motion that ignores prefers-reduced-motion. Keep the fixed star counts, frame caps, and cleanup requirements.
- Do not use a splash screen, autoplay audio, scroll-jacking, pinned sections, a custom cursor, excessive bloom, glass-card decoration, fake testimonials, visitor counts, pricing, newsletter forms, or marketing sections. The toy itself is the first screen.
- Do not add extra pages, bare-directory links, SEO markup, structured data, Open Graph work, sitemap code, or metadata beyond the plain title, theme color, and original favicon. The only page is index.html.
- Production npm run build must emit minified static dist/ below 20 MB with no source maps and no src/ copied into dist/. It must run without console errors at 1440 × 900 and 390 × 844, keep all tap targets at least 44px, and leave no horizontal page overflow.
- Use visible focus, semantic buttons and form labels, accessible canvas instructions, polite status messages, dialog focus trapping and focus return, and selected states that do not rely on color alone. Never hide the keyboard star selector or required disclosures from mobile users.
- Never mention VibeFather in the rendered site except the optional [CREDIT] link, and never use VibeFather or a real brand as a variable default. All copy, labels, sample data, and alt text must be US English.

---
— Prompt by VibeFather · https://vibefather.ai/t/constellation-story-map · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.