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

# Mars Colony Builder Game

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

## Brief
Build [BRAND], a single-screen turn-based colony game in [CRATER], founded by [EXPEDITION]. The player places habitats, solar arrays, greenhouses, and ice drills on a code-drawn isometric crater, then advances one sol at a time. Oxygen, power, water, and morale tick together. Dust storms last four sols and cut solar yield. Colonists increase only when beds and all four stocks allow it, up to 50. The grid and stocks persist in localStorage. Default tagline: [TAGLINE]. The crater, one habitat, and a dust haze are already on screen between glass columns that hold the title and the HUD.

- Audience: People who enjoy short planning puzzles, including [AUDIENCE], plus indie hackers and front-end developers who want a self-contained canvas game with keyboard and touch controls. The help text stays short, the first storm is on a known sol, and a failed sol can be retried.
- Goal: Ship one complete loop: a title column over a live crater, one structure change per sol, a preview that uses the same tick as Advance sol, storms, growth to 50, a win overlay, a failed-expedition overlay, resume from localStorage, and equivalent play at 1440x900 and 390x844.
- Tone: Calm, practical, and a little dry, like a field log from a small survey. Short US English, concrete yields, no exclamation marks, no epic colonization slogans, and no jokes about abandoning anyone on a planet.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react 18 (MIT), react-dom 18 (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/outfit (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:
  - Scaffold Vite 5 with the React TypeScript template. Scripts: dev=vite, build=tsc --noEmit && vite build, preview=vite preview. Package name is the slug of BRAND. Install react 18, react-dom 18, lucide-react, and the three fontsource packages as runtime dependencies. Install vite 5, typescript 5, tailwindcss 3.4, postcss, and autoprefixer as dev dependencies. Do not add a game engine, router, physics library, canvas helper, tween library, or audio files.
  - vite.config.ts sets base to './', build.outDir to dist, build.emptyOutDir to true, and build.sourcemap to false. tsconfig strict is true. Tailwind content covers index.html and src. Extend colors and font families from the Design section. All custom CSS, the glass panel rule, and prefers-reduced-motion live in src/styles.css.
  - Import Fraunces variable and Outfit variable in src/main.tsx from @fontsource-variable/fraunces and @fontsource-variable/outfit. Import IBM Plex Mono 500 from @fontsource/ibm-plex-mono/500.css. Map them to font-display, font-sans, and font-mono. Never load a font CDN.
  - Use src/content.ts, sim.ts, draw.ts, audio.ts, save.ts, App.tsx, main.tsx, and styles.css. sim.ts is pure TypeScript with no React and no Math.random. draw.ts owns the canvas and the seeded dust. App.tsx owns tool choice, the pending action, overlays, and keyboard focus. Every player-facing sentence lives in content.ts.
  - If BRAND, CRATER, EXPEDITION, TAGLINE, or AUDIENCE differ from the defaults, rewrite the roster, title body, win and fail sentences, and log lines so the new proper nouns read naturally. Keep building names, yields, the grid, colors, and the storm calendar. For the Saltmere set exactly, the roster is Imani Okonkwo, Leo Hart, and June Pell. For any other non-default set, invent three new people and drop Nia Calder, Omar Voss, Priya Sen, Tallow, and Amberline. Never render raw bracket placeholders.
  - The document title is BRAND + ' — ' + CRATER. Ship public/favicon.svg as a copper ring around a small isometric diamond, using the copper and basalt hexes, and link it with a relative href. One index.html, no router, no second page.
  - Cap device pixel ratio at 2. Pause the dust animation when the document is hidden. Dispose the audio context and animation frame on unmount. The production dist has no source maps, no copied src, and stays under 20 MB.

## Variables
- [BRAND] — Colony name (default: "Hearthline"). An invented colony and game title. Never a real agency, company, rover, or mission.
- [CRATER] — Crater name (default: "Tallow Crater"). An invented basin name used in the title column, forecast toasts, and win copy.
- [EXPEDITION] — Founding expedition (default: "the Amberline Survey"). A short invented group name. The eyebrow drops a leading 'the' and uppercases the rest.
- [TAGLINE] — Colony tagline (default: "Fifty beds against the dust."). One short original line under the colony name in the title column and on the win dialog.
- [AUDIENCE] — Player audience (default: "players who like short planning puzzles"). Used once, in the help introduction.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/mars-colony-builder-game 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
- Basalt `#14110F` — Page background, canvas void, and dialog scrim base
- Glass `#1C1814` — HUD panels at 90 percent opacity with a 14px backdrop blur
- Copper `#E39B54` — The single accent: habitat dome, primary button, selection, focus ring, panel border at 35 percent
- Copper deep `#A86B38` — Habitat skirt, pressed button, and dome shadow
- Regolith `#C4784E` — Lightest basin floor tile
- Regolith mid `#B56545` — Middle basin floor tile
- Regolith dark `#A85A3C` — Darkest basin floor tile
- Rim `#5C3428` — Crater wall top
- Rim face `#3F241C` — Crater wall south face, doors, and greenhouse base
- Dust `#C4A574` — Haze particles, storm veil, and boulder highlight
- Parchment `#F3E6D4` — Primary text and habitat window
- Clay `#B7A394` — Secondary text, solar mast, and inactive tool labels
- Sage `#8FB573` — Oxygen bar and greenhouse panes
- Ice `#B7D0D6` — Water bar and drill bore
- Morale clay `#D9896A` — Morale bar
- Warning `#E07A5F` — Stocks under 25, invalid cells, and Advance anyway
- Panel ink `#1C120C` — Text on copper buttons
- Array cell `#3E4C55` — Solar panel fill

### Typography
- Colony name, win and fail headlines, sol numeral: Fraunces (OFL), weights 600/700
- HUD labels, help, buttons, and body: Outfit (OFL), weights 400/500/600
- Stock numbers, forecast, and bed counts: IBM Plex Mono (OFL), weights 500

### Layout & motion
- Spacing: A 4px unit. The page is 100dvh and does not scroll. Desktop at 1100px and wider uses two 320px glass columns over a full-bleed canvas, with 20px column padding and 24px top and bottom crater insets. Below 1100px, including 390px, the canvas is the top region and a bottom sheet holds the HUD, with 12px sheet padding, 48px button heights, and safe-area insets. The center habitat stays in the open canvas between the columns.
- Radius: 12px glass panels, 14px dialogs, 10px buttons, 999px forecast chips and stock tracks. The canvas is square-cornered and full bleed. World shapes are diamonds, domes, and masts, not rounded app icons.
- Motion: Dust is the only continuous motion: 32 seeded particles drift right at 0.6 CSS pixels per frame and wrap the crater bounds. A storm raises the count to 64 and adds a flat Dust veil at 0.18 alpha.
- Motion: When motion is allowed, stock fills ease width over 160ms. Overlays fade opacity over 140ms with no travel greater than 8px. Buttons do not bounce.
- Motion: With prefers-reduced-motion, draw no particles, snap stock fills, use instant overlays, and keep a storm as the flat Dust veil only. Placement, removal, and sol resolution stay immediate.
- Motion: Stop the animation frame while the tab is hidden. Do not shake the canvas, flash the veil, or autoplay sound.
- Imagery: Draw the crater, rim, boulders, four structure types, selection, dust, storm veil, favicon, and build-bar glyphs in canvas and inline SVG. No photographs, generated images, downloaded textures, or sprites. The first screen's anchor is the centered habitat dome on the rust basin, with the glass HUD already readable around it.

## Pages & Sections
### [BRAND] — [CRATER] (`index.html`)
1. **Title column over the live crater** — The document title is [BRAND] — [CRATER]. Title and play share one frame: a full-bleed canvas and, at 1100px and wider, two 320px glass columns. Do not add a second card on top of the columns. Before Open or Resume, the left column leads with the eyebrow, [BRAND], [CRATER], [TAGLINE], the body, Open the basin, and Resume survey, then still shows SOL 1, the forecast Storm in 7 sols, the population line, and the four starting stocks. The right column shows the four build cards, Remove, and Advance sol, visible and aria-disabled at 55 percent opacity. The center canvas is the new-game crater, with the habitat at column 5, row 6 in the open gap between the columns. Below 1100px the canvas stays on top so the dome remains visible, and the bottom sheet leads with the same title block, then the compact stocks and the disabled thumb bar. The eyebrow is the expedition name without a leading the, in uppercase Outfit with 0.16em tracking. For the default that is AMBERLINE SURVEY. Body: Place one structure a sol. Keep oxygen, power, water, and morale above empty until 50 colonists have beds. Resume survey is always visible and disabled when no save exists. If a save exists, Open the basin asks Replace the saved survey of [BRAND]? with Replace and Keep it. After Open or Resume, remove the title actions and the body, keep the brand block, and enable the build controls. If a credit string is supplied by the build, show it as quiet Clay text under the title buttons and at the bottom of help. Otherwise omit it. Do not invent a credit, a date, or a price.
   Layout: Desktop columns are absolute, full viewport height, Glass at 90 percent opacity, 20px padding, and a 1px copper border at 35 percent on the edge that faces the crater. The primary button is copper with Panel ink text and 48px tall. The secondary button is a transparent copper outline. Focus rings are 2px copper with a 2px offset. The mobile sheet is full width, with 12px radius on the top corners only, and it does not cover the center of the canvas.
   Motion: The columns fade in over 140ms after the first crater paint. They do not float or slide. Reduced motion shows them on the first paint.
2. **Isometric crater grid** — The grid is 12 by 12, columns c and rows r from 0 through 11. Column increases east and row increases south. For each cell, d2 = (c * 2 - 11) squared plus (r * 2 - 11) squared. If d2 is greater than 128 the cell is void and is not drawn. If d2 is greater than 84 it is rim and cannot be built on. Otherwise it is floor, except the boulder cells (2,4), (8,3), (4,9), (9,7), (3,7), and (7,8), which are blocked floor. That is 62 buildable floor cells, 6 boulders, and 28 rim cells. A correct terrain function must match those counts. The new game places one habitat at (5,6) and nothing else. Tile width is 72 and tile height is 36 before fit. Screen position before offset is x = (c - r) * 36, y = (c + r) * 18. Draw non-void cells in ascending (c + r) order. Floor fill cycles by (c * 3 + r) modulo 3 through Regolith, Regolith mid, and Regolith dark, with a 1px stroke at rgba(62,32,24,0.45). Rim uses Rim for the top diamond and a south face 7px lower in pre-scale pixels filled Rim face. A boulder draws the floor diamond, then three circles around the tile center: radius 10 at (-6,-4) in #6A3E30, radius 8 at (7,-1) in Rim, radius 7 at (0,6) in #4A2C22, plus a Dust highlight on the first circle. The canvas behind the grid is a vertical gradient from #2A1A14 to Basalt and a wide ellipse of #6E3B2C at 20 percent alpha. Fit the bounding box of non-void diamonds into the playable canvas rect with 16px padding, uniform scale capped at 1.35, centered. At 1100px and wider the rect is the viewport inset 320px on the left and right and 24px on the top and bottom. Below that, the rect is the canvas element.
   Layout: One canvas element fills the viewport and sits under the HTML HUD. Set its bitmap size to the CSS size times the capped device pixel ratio and scale the context. Rebuild the fit on resize. Hit testing inverts the fit: fx = x / 36, fy = y / 18, c = round((fx + fy) / 2), r = round((fy - fx) / 2). Ignore void. The status line reports the cell under the pointer or the keyboard cursor.
   Motion: The grid itself does not animate. Only dust, the storm veil, and the selection stroke change between paints.
3. **Four structures and adjacency** — Each structure occupies one floor cell. Orthogonal neighbors count. Diagonals, rim, void, and boulders do not. Shade on a solar is the number of orthogonal habitats and greenhouses. Clear solar yield is max(2, 10 - 3 * shade). Storm solar yield is max(1, 5 - 2 * shade). An open array is 10 clear and 5 in dust. One tall neighbor makes 7 and 3. Two make 4 and 1. Three or four stay at the minimum, 2 and 1. A greenhouse makes 16 oxygen if at least one orthogonal neighbor is a habitat, otherwise 8. It always costs 4 power, 2 water, and gives 2 morale when the grid is powered. A drill makes 20 water, costs 3 power, and costs 1 morale plus 2 more for every orthogonal habitat, when powered. A habitat sleeps 8, costs 2 power and 1 water, and gives 1 morale. Drills do not shade solars. Draw at tile-local pixels for a 72-wide tile, then multiply by the fit scale. Habitat: skirt ellipse (0,6, rx 20, ry 8) in Copper deep, dome (0,-2, rx 18, ry 12) in Copper, door rect (-3,2, 6 by 8) in Rim face, window (-6,-6, 12 by 3) in Parchment. Solar: mast from (0,4) to (0,-14) in Clay, panel through (-16,-18), (10,-18), (18,-8), (-8,-8) filled Array cell and stroked Copper. Greenhouse: base ellipse (0,6, rx 18, ry 7) in Rim face, vault ellipse (0,-2, rx 16, ry 11) in Sage at 85 percent with an Array cell stroke, pane lines at x -5 and 5. Drill: base ellipse (0,8, rx 14, ry 6) in Rim, tower rect (-4,-16, 8 by 24) in Clay, collar (-6,-6, 12 by 4) in Copper, bore ellipse (0,-16, rx 4, ry 3) in Ice. A pending placement draws at 50 percent alpha. The selected cell is a 2px Copper diamond. An illegal cell is a 2px Warning diamond and does not spend the action.
   Layout: Build-bar glyphs are inline SVG in the same silhouettes and hexes, 28px, not Lucide pictures of unrelated objects. The HUD status line uses the keyboard cursor or the hovered cell. Examples: Column 5, row 6 · Habitat. Column 2, row 4 · Boulder. Open floor · Solar yield 10 clear / 5 dust. Rim and void never show a yield.
   Motion: Ghosts and selection have no pulse. Reduced motion does not change the drawings.
4. **Sol tick, storms, growth, win and fail** — Keep all of this in sim.ts and call it for both the preview and Advance sol. Stocks are integers from 0 to 100. New game: sol 1, population 6, oxygen 74, power 46, water 64, morale 68, one habitat at (5,6). A storm is active on sols 8 through 11, 18 through 21, 30 through 33, 44 through 47, 60 through 63, and 78 through 81, then on every run of four sols that starts at 96, 114, 132, and so on, stepping by 18. Supply is the sum of storm yields during a storm and clear yields otherwise. Demand is habitats * 2 + greenhouses * 4 + drills * 3, counted after the pending action. The grid is powered when power + supply is at least demand. If powered, power changes by supply minus demand, water by drill water minus habitat and greenhouse water minus population, oxygen by greenhouse oxygen minus population, and morale by habitat and greenhouse morale minus drill penalties. If not powered, greenhouses and drills idle: they add nothing and cost nothing that sol, power changes by supply minus habitats * 2, water by minus habitats minus population, oxygen by minus population, and morale by habitats minus 6. Then, using population before growth and housing after the action, add 2 morale when population is less than or equal to housing - 8, subtract 4 when population equals housing and housing is positive, and subtract 8 during a storm. Clamp each stock to 0 through 100. If any stock is 0, the tick fails and population does not grow. Otherwise, if the grid was powered and every stock is at least 35 and population is below both housing and 50, population grows by min(2, housing - population, 50 - population). Sol then increases by 1. A failed tick is not committed. The fail dialog shows the clamped outcome and the sol that was just attempted. Retry and Leave discard it. Retry also clears the pending action and returns to the start-of-sol snapshot. Leave deletes the save and returns to the title on the new-game crater. A successful tick commits, replaces the snapshot, clears the pending action, and saves. If population is now at least 50 and the win has not been dismissed this run, open the win dialog. Further sols do not open it again. Required checks for a new game: passing sol 1 lands on oxygen 68, power 44, water 57, morale 69, population 8, sol 2. Placing an unshaded solar and advancing lands on oxygen 68, power 54, water 57, morale 69, population 8, sol 2. A solar orthogonal to the starting habitat, such as (6,6), yields 7 clear, so power lands on 51 with the same other results.
   Layout: The preview row reads O2 74 to 68, PWR 46 to 54, the matching water and morale figures, and population 6 to 8, using the pending action. An unshaded solar shows power 46 to 54. A pass shows power 46 to 44. Numbers that will fall use Clay; a result under 25 uses Warning and the suffix LOW; a result of 0 turns Advance sol into Advance anyway in Warning. The button still works. Do not duplicate the formulas inside the component.
   Motion: Resolution is a single state change plus the stock ease. No sol-by-sol animation and no automatic extra ticks.
5. **HUD, forecast, log, win and fail** — After the run starts, the left column is the play column. During the title, those same readouts sit under the title actions, and the right column stays disabled. Play column, top to bottom: the copper-ring mark, [BRAND], [CRATER], the sol label SOL in tracked uppercase over a Fraunces numeral, the forecast chip, the population line, four stocks, and the latest log line. Population reads 6 colonists · 8 beds · goal 50 at the start, with live numbers after that. Forecast on sol 1 is Storm in 7 sols. Inside a storm it is Dust storm · N sols left, counting the current sol, so sol 8 says 4 sols left and sol 11 says 1 sol left. Use sol, not sols, when the count is 1. Stocks are Oxygen, Power, Water, and Morale, each with a mono integer, an 8px track in #3A2A22, and a fill in Sage, Copper, Ice, or Morale clay. Right column: four build cards and Remove. Subtitles: Habitat, Sleeps 8 · power -2 · water -1. Solar array, 10 power · 5 in dust · shade cuts both. Greenhouse, 8 oxygen · 16 beside a habitat. Ice drill, 20 water · quieter away from beds. Remove, Clear one structure this sol. Then Undo, shown only while a pending action exists, and Advance sol. Until the first advance of a new run, the hint is Place a solar on open ground, then advance. After that it is One change per sol, or none. One toast after each successful sol, 2.2 seconds, in this priority: a brownout says Power ran short. Drills and greenhouses sat this sol out. Else if that sol started a storm, Dust fills [CRATER]. Arrays are on their storm yield. Else if that sol ended a storm, The dust thins over [CRATER]. Arrays return to clear yield. Else if population grew, [BRAND] adds N. Population P. Else if beds are full and population is under 50, Beds are full. Place a habitat before the next arrivals. Else if growth waited on a stock, name the lowest of Oxygen, Power, Water, and Morale that is under 35, in that tie order, as in Oxygen is under 35. Growth waits. Else Sol N closes quiet. The win heading is The basin holds. Body: [BRAND] houses 50 colonists. [CRATER] still has air, current, water, and a crew that will stay. Then [TAGLINE] and Sol N from [EXPEDITION], where N is the sol that was resolved. Buttons: Keep surveying and Found again. Found again confirms, then resets to the new game. Fail heading: The expedition folds. Oxygen: Oxygen hit zero. The domes go quiet. Power: Power hit zero and the batteries are flat. Water: The cistern hit zero. Morale: Morale hit zero. The crew will not work another sol. Then Sol N is the last one logged for [BRAND]. Buttons: Retry this sol and Leave the crater. If more than one stock is zero, name them in oxygen, power, water, morale order. Toast and dialogs name the sol that just resolved. The SOL numeral shows the sol now being planned, which is one higher after a successful tick.
   Layout: Desktop columns are 320px glass, full height, over the canvas. The advance button is 52px tall and full width of the right column. Mobile, under 1100px: a 48px top bar with [BRAND] and the sol numeral, the canvas beneath it, then a sheet with a 2 by 2 stock grid, the population and forecast on one line, the hint, a 48px advance button, and a five-button thumb bar labeled Habitat, Solar, Greenhouse, Drill, and Remove. The sheet plus top bar must leave the canvas at least 240px tall at 390x844. Dialogs are 440px glass cards centered, or bottom sheets at most 70dvh on mobile, with a Basalt scrim at 45 percent so the crater remains visible. Help and fail and win trap focus and return focus to the button that opened them.
   Motion: Toasts fade only. The win and fail dialogs fade over 140ms. Reduced motion is instant. The storm veil is the canvas, not a CSS flash.
6. **Build actions, pointer, keyboard, and touch** — A sol allows one successful place, one successful remove, or a pass. Choosing a tool does not spend it. A legal place or remove stores a pending action and spends it. Undo, or clicking the pending structure again, clears it. Advance resolves whatever is pending, or passes. Tools are 1 habitat, 2 solar, 3 greenhouse, 4 drill, X remove, U or Backspace undo, Escape clears the tool, N advances, H opens help, M toggles sound. Arrow keys move a Copper cell cursor that stays hidden until the first arrow, then wraps only among non-void cells. Enter places or removes on that cursor. Ignore these keys while a dialog is open or while a button is focused, and prevent page scroll for them. Pointer: click a floor cell with a build tool to place, click a structure with Remove to remove, right-click clears the tool. Illegal clicks do not spend the action. Status copy: Crater wall. Build on the basin floor. A boulder sits on this cell. That cell is already built. Remove it on its own sol. People still need those beds. Nothing to remove. One change per sol. Undo it or advance. Removal of a habitat is blocked when population would exceed the beds that remain. Touch uses the thumb bar. The selected tool stays selected until another tool, a successful pending action, or Escape. After a pending place, further taps do not add a second structure. Targets are at least 48px. Pointer, keyboard, and touch all call the same place and remove functions.
   Layout: Desktop build cards stack in the right column with 8px gaps and a 3px Copper left border on the selected card. Mobile tools share one row, equal width, 68px tall, with a 3px Copper top border on the selected tool. The keyboard cursor and the hover status never cover the advance button. Hide the desktop key hint 1-4 build · X remove · arrows · Enter place · N advance on coarse pointers.
   Motion: Selection color changes on the same frame as the input. No delay and no sticky hover on touch.
7. **Save, help, audio, and accessibility** — Save key is colony-save: plus the slug of BRAND, lowercase, non-alphanumerics collapsed to single hyphens. The default key is colony-save:hearthline. Save after every successful tick, when the win is dismissed, and when Found again resets. Do not save a failed tick or a pending action. Shape version 1: sol, population, oxygen, power, water, morale, buildings as c, r, and kind, wonDismissed, and version. A missing or mismatched version is ignored. Sound preference is a separate boolean colony-sound: plus the same slug, default false. Resume survey loads the save into the HUD and closes the title actions without resetting the sol. Help heading: One sol, one change. Intro: Built for [AUDIENCE]. Then the roster sentence. Default roster: Nia Calder leads the survey, Omar Voss runs the drills, and Priya Sen keeps the greenhouse bench. Saltmere roster: Imani Okonkwo leads the survey, Leo Hart runs the drills, and June Pell keeps the greenhouse bench. Help then lists the yields, shade examples, the storm calendar, the growth rule, the fail rule, and the controls, using the same numbers as sim.ts. Include the worked pass for sol 1 so a player can check the preview: oxygen 68, power 44, water 57, morale 69, population 8. Sound stays off until the player turns it on. On the next gesture, create one AudioContext. Cues are short oscillators at gain 0.04 or lower: place a 740Hz sine for 50ms, remove a 196Hz sine for 70ms, advance a triangle from 330Hz to 440Hz over 90ms, growth two sines at 523Hz and 659Hz for 80ms with a 40ms gap, win 523, 659, 784, and 1046Hz for 100ms each, fail 220Hz then 146Hz for 140ms, and a storm start as 280ms of a seeded noise buffer through a bandpass at 400Hz. Ramp gain over 20ms. No audio files and no autoplay. Every cue also has visible feedback. The canvas is aria-hidden. A polite live region speaks the toast, the fail heading, and the win heading. Dialogs are real HTML, labeled, and Escape closes help. If the canvas context cannot be created, show a Glass panel reading This browser could not start the crater view. and keep the help button usable, without throwing in a loop.
   Layout: Help is a 560px sheet. On mobile it is a bottom sheet with internal scroll. Live region and help text are available on the title screen as well as in a run. The optional credit line, if supplied, also sits at the bottom of help.
   Motion: Audio does not depend on dust motion. Reduced motion still allows the cues when sound is on, because each cue is a single short tone and the veil does not flash.
8. **Dust, responsive fit, and reduced motion** — Seed dust with mulberry32 starting at 0xC1A0E11 and place 32 particles once inside the crater bounds. Each particle is an ellipse of radius 4 to 12 in Dust at 0.12 alpha. Drift them by 0.6 CSS pixels to the right per frame and wrap. During a storm, draw 64 particles at 0.22 alpha and then a full-canvas Dust fill at 0.18 alpha above the structures. Draw order is background, terrain, boulders, structures, selection, particles, storm veil. The HTML HUD is not drawn into the canvas. At 1440x900 the center habitat is fully visible between the columns and no column text overflows. At 390x844 the dome is in the canvas, the thumb bar is in the thumb zone, and there is no horizontal page scroll. Stocks show integers, names, and LOW, so color is never the only signal. Storm state is always the forecast sentence.
   Layout: At 1440x900 the habitat at column 5, row 6 sits in the open canvas between the columns, fully visible, not underneath them. Mobile sheet order is fixed: title block only while the run has not started, then stocks, forecast and beds, hint, advance, tools, and the safe area.
   Motion: With prefers-reduced-motion, skip particle placement and the animation frame. The storm is only the 0.18 veil. Resize still redraws once.

## Assets
- image: No downloaded or generated image files. Draw the crater, rim, boulders, habitats, solar arrays, greenhouses, ice drills, dust, storm veil, selection, and public/favicon.svg in canvas and SVG using the hexes in Design. Record in ASSETS.md that scene art and the favicon are code-drawn and that no external image was used.
- icon: Build-bar glyphs are original inline SVG silhouettes of the four structures and a simple removal slash, in the Design hexes. Use only CircleHelp, Volume2, VolumeX, Undo2, and X from the locally installed lucide-react package (ISC) for help, sound, undo, and close. In ASSETS.md list those icon modules, https://www.npmjs.com/package/lucide-react, Lucide contributors, and the ISC license.
- font: Self-host Fraunces and Outfit through @fontsource-variable/fraunces and @fontsource-variable/outfit, and IBM Plex Mono 500 through @fontsource/ibm-plex-mono (OFL-1.1). Import only those weights. In ASSETS.md list the local files the packages emit, the npm package pages, the copyright holders from the bundled OFL notices, and the OFL license. No request to fonts.googleapis.com or any other font host.
- video: No video and no audio files. Optional cues are synthesized in the browser with Web Audio after the player turns sound on.

## Don'ts
- Do not add a backend, server routes, accounts, a database, analytics, a leaderboard, multiplayer, or any network call. The only persistence is the colony save and the sound flag in localStorage.
- Do not change the stack. No Unity, Godot, Phaser, three.js, Pixi, a physics engine, GSAP, Motion, or a second page. The build is Vite 5, React 18, TypeScript, Tailwind CSS 3.4, and one canvas.
- Ship static files in dist/ only. Vite base is './', links use file names, assets are relative, the build is minified, source maps are off, src is not copied, and dist stays under 20 MB.
- Do not load scripts, fonts, icons, images, audio, or tiles from a CDN. Do not hotlink or download Mars photography, maps, or textures. The crater, structures, and storm are drawn in code.
- Do not use commercial fonts or a font CDN. Fraunces, Outfit, and IBM Plex Mono come from the Fontsource packages only.
- Do not copy existing colony, terraforming, or survival-city games: no Surviving Mars, Per Aspera, Terraforming Mars, Oxygen Not Included, or Frostpunk names, logos, dome kits, drones, sponsor crests, breakthrough cards, or interface layouts.
- Do not use NASA, ESA, JPL, SpaceX, or any real agency or company mark, patch, rover, lander, or mission name as the colony, the crater, or the expedition. Do not quote film or book lines about Mars, including The Martian, and do not draw a real astronaut or any celebrity.
- Do not add individual colonist AI, portraits, a research tree, drones, combat, weapons, a money cost, random events, or procedural maps. Storms, growth, and the crater are the fixed rules in sim.ts.
- Do not hard-code Hearthline, Tallow Crater, the Amberline Survey, the default tagline, or the default roster outside src/content.ts. Building names and yields stay stable when the variables change.
- Do not let the preview use a second copy of the economy. Advance sol, the preview, and the fail check call one tick function. A new game must pass the sol-1 checks in the tick section.
- Do not autoplay audio, require a pointer lock, or ignore prefers-reduced-motion. Dust and the storm veil must not hide the habitat or the selection diamond.
- Do not make phones depend on hover or keyboard shortcuts. The thumb bar, tap to place, and 48px targets work at 390x844 with no horizontal overflow, and desktop play works at 1440x900.
- Do not show dates, prices, accounts, or a marketing page in front of the crater. The only optional credit is the supplied credit string. Do not mention VibeFather, a template license, or a member count.
- Do not add SEO metadata, Open Graph tags, JSON-LD, a sitemap, or keyword-stuffed headings. A plain title and the favicon are enough.
- Do not throw on a missing canvas context or a bad save. Ignore an unknown save version, and if the canvas cannot start, show the fallback panel once.

---
— Prompt by VibeFather · https://vibefather.ai/t/mars-colony-builder-game · 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.