[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-460-Steampunk":3},"# SYSTEM PROMPT — STEAMPUNK LANDING PAGE: COMPLETE BUILD SPECIFICATION\n\n**Your role:** Senior Frontend Engineer & Expert UI Designer. Build a complete, production-ready Steampunk landing page and deliver the final code in a **single response** — no partial builds, no follow-ups required. The page must run by opening `index.html` directly (no build step).\n\n**Product & copy anchor:** All user-facing copy is written in **English** for one coherent fictional brand: **Aetherworks Foundry** — \"steam-powered automation machinery for the modern workshop\" (a Victorian-flavored SaaS). Diction may be lightly Victorian but must stay clear and readable. **Lorem ipsum is forbidden** — write real, thematic copy for every section.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No inline CSS:** the `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID selectors only:** every visual property, layout rule, and state must be targeted via class or ID selectors defined in `style.css`.\n- **Semantic, agnostic markup:** HTML stays clean and structural (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`, correct `h1`–`h3` hierarchy, single `h1` in the hero). Restyling the entire page must never require touching the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root`; dark theme overrides under `html.dark`. Define exactly:\n\n```css\n:root {\n  \u002F* Color *\u002F\n  --primary: #B5A642;        \u002F* Brass Gold *\u002F\n  --secondary: #B87333;      \u002F* Copper *\u002F\n  --bg-primary: #E8D5B0;     \u002F* Aged Parchment — never pure white *\u002F\n  --bg-secondary: #F3E8CE;   \u002F* Parchment panel *\u002F\n  --bg-elevated: #FEFEFE;    \u002F* near-white surface — use #FEFEFE, never #FFFFFF *\u002F\n  --text-primary: #3C1F0A;   \u002F* Dark Leather *\u002F\n  --text-secondary: #5A5148;  \u002F* darkened Steam Grey — AA on parchment *\u002F\n  --text-success: #17605B;   \u002F* deep Verdigris — AA on parchment *\u002F\n  --text-error: #8E2A1C;     \u002F* Oxblood *\u002F\n  --border-default: #B5A642;\n  --border-success: #17605B;\n  --border-error: #8E2A1C;\n  \u002F* Extended steampunk tokens *\u002F\n  --copper: #B87333; --steam-grey: #6B6B6B; --rivet-silver: #A0A0A0;\n  --mahogany: #4E1A0A; --leather: #3C1F0A; --verdigris: #43B3AE; --brass-deep: #8A7A2E;\n  \u002F* Shape & depth *\u002F\n  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;\n  --shadow-sm: 2px 2px 0 var(--steam-grey);\n  --shadow-md: 4px 4px 0 var(--steam-grey);\n  --shadow-inset: inset 0 0 20px rgba(60, 31, 10, 0.2);\n  --text-emboss: 1px 1px 2px rgba(0, 0, 0, 0.3);\n  \u002F* Rhythm & motion *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  \u002F* Elevation *\u002F\n  --z-header: 50; --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  \u002F* Type *\u002F\n  --font-heading: 'Cinzel', 'Times New Roman', serif;\n  --font-accent: 'Special Elite', 'Courier New', monospace;\n  --font-base: 'EB Garamond', Georgia, serif;\n}\n\nhtml.dark {\n  --bg-primary: #2B1407;      \u002F* deepened Dark Leather *\u002F\n  --bg-secondary: #3C1F0A;    \u002F* Dark Leather panels *\u002F\n  --bg-elevated: #4E1A0A;     \u002F* Deep Mahogany cards *\u002F\n  --text-primary: #E8D5B0;    \u002F* Aged Parchment *\u002F\n  --text-secondary: #A0A0A0; \u002F* Rivet Silver *\u002F\n  --text-success: #43B3AE;    \u002F* Verdigris *\u002F\n  --text-error: #E58A63;     \u002F* bright copper-red *\u002F\n  --border-success: #43B3AE;\n  --border-error: #E58A63;\n  --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.55);\n  --shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.55);\n  --shadow-inset: inset 0 0 20px rgba(0, 0, 0, 0.45);\n}\n```\n\n- **Contrast pairing (mandatory in both themes):** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens. Pre-validated pairings you must not break: leather-on-parchment ≈ 10.4:1; parchment-on-leather ≈ 10.4:1; leather-on-brass ≈ 6.1:1; brass-on-dark-leather ≈ 6.1:1; rivet-silver-on-dark-leather ≈ 5.8:1; verdigris-on-dark ≈ 5.9:1.\n- **Metallic color restriction:** raw brass\u002Fcopper fails contrast for body-size text on parchment — reserve metallics for large display type on dark surfaces, borders, and shadows; body text always uses `--text-primary`\u002F`--text-secondary`.\n\n### 1.3 Mandatory Dark Mode Support\n- Dark mode is **not optional**. Tokens switch purely via `html.dark` — zero HTML restructuring.\n- **Resolution order:** on load, `script.js` reads `localStorage` key `aetherworks-theme`; if absent, fall back to `prefers-color-scheme`; apply the class as the script's very first task.\n- **Visible toggle** in the header: a brass, gauge-styled button using Material Symbols `dark_mode`\u002F`light_mode`, with `aria-pressed` reflecting the active theme and a dynamically updated `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"). Choice persists across reloads.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with **Flexbox** (Tailwind flex utilities).\n- **Every flex container defaults to `align-items: center`** unless an exception is justified in a CSS comment. Permitted exceptions: equal-height card grids and form input groups may use `align-items: stretch`.\n- **Mobile-first:** rows collapse to columns below 768px; fluid `clamp()` typography (h1: `clamp(2.25rem, 5vw, 4rem)`); centered max-width container (~72rem); **no horizontal scrolling at any viewport width** (`overflow-x: clip` on body).\n\n### 1.5 Framework Default & Tailwind CSS Integration\n- Include Tailwind via Play CDN (`\u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>`). Do **not** add an inline `tailwind.config` script.\n- Tailwind utilities are allowed **only for structural layout** (flex, alignment, gap, wrap, responsive prefixes, visibility). All colors, typography, borders, shadows, and component skins live in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, `.modal`) driven by the CSS variables. Never skin a component with ad-hoc utility strings.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text fonts** via Google Fonts `\u003Clink>` (with `display=swap`): **Cinzel** (400\u002F700\u002F900) for headings, **Special Elite** (400) for eyebrow labels, buttons, and accents, **EB Garamond** (400\u002F500\u002F600 + italic) for body copy — bound to `--font-heading`, `--font-accent`, `--font-base`.\n- **Icons:** Google Material Symbols (Outlined). Every functional icon (checks, locks, chevrons, close, stars, menu, theme glyphs, spinners) must be a Material Symbols glyph. **Raw inline SVGs and local icon files are forbidden.**\n- **Exception:** the requested rotating gear\u002Fcog ornaments are thematic decoration, not iconography — they may be inline SVGs or CSS-drawn shapes animated with CSS rotation; all functional icons must still be Material Symbols glyphs.\n- All decorative elements (gears, steam, textures, gauge dials) carry `aria-hidden=\"true\"` and never intercept clicks.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons (`.btn` family)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; Special Elite uppercase label; `border-radius: var(--radius-md)`; `transition: all var(--transition-normal) var(--ease-standard)`.\n- **`.btn--primary`:** brass gradient (`linear-gradient(180deg, #C9BA5E, #B5A642 55%, #8A7A2E)`), 3px solid `--brass-deep` border, Dark Leather text, `--shadow-sm`. **Hover:** brightness lift + shadow grows to `--shadow-md`, `cursor: pointer`.\n- **`.btn--secondary`:** transparent background, 3px solid `--border-default`, label in `--text-primary` (never raw brass text on parchment).\n- **Focus-visible:** distinct 3px `--secondary` outline with 2px offset, visible in both themes.\n- **Active\u002Fpressed:** `transform: scale(0.97)` plus collapsing offset shadow for a \"pressed rivet\" feel.\n- **Loading (`.is-loading`):** disables interaction and double-submits; Material Symbols `progress_activity` spinner rotating via CSS, with button dimensions preserved (no layout shift).\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback tinted by `--text-success` \u002F `--text-error` with a check\u002Ferror glyph **and text**, announced via `aria-live`.\n- **`.btn--danger`:** oxblood\u002Fcopper-red, visually distinct in both themes — define it even if unused.\n\n### 2.2 Cards (`.card` family)\n- **Default:** `--bg-elevated` surface, 3px solid `--border-default`, `--radius-md`, `--shadow-sm` + `--shadow-inset`, brass rivet dots at corners via pseudo-elements, generous `clamp()` padding.\n- **Hover:** `transform: translateY(-2px)`, shadow to `--shadow-md`, border brightens; any gear medallion on the card spins faster.\n- **Focus-within:** border shifts to `--secondary` with a ring when a child link\u002Fbutton is focused.\n- **Skeleton:** define a `.skeleton` shimmer utility (gradient sweep keyframes) so async slots never jump layout.\n- **Empty state:** define an `.empty-state` pattern — large Material Symbol + short guidance text.\n\n### 2.3 Forms & Inputs (`.input-group`)\n- **Structure:** flex column (`align-items: stretch` — justified exception) wrapping a `\u003Clabel>` bound to the input, the input, a status icon span (Material Symbols, `aria-hidden=\"true\"`), and a dedicated error-message container with `aria-live=\"polite\"`.\n- **States — all required:** empty (`:placeholder-shown`), focused (copper ring + brass border), filled, valid (`.is-valid`: `--border-success`, check icon, optional message), invalid (`.is-invalid`: `--border-error`, error icon, **text message — never color alone**), disabled (opacity, `not-allowed`), read-only (dashed brass border).\n- Inputs: 3px brass borders, `--radius-md`, min-height 44px, parchment\u002Fdark surfaces per theme.\n\n### 2.4 Modal (`.modal` — \"Bespoke Commission\" quote dialog)\n- **Trigger:** a \"Request a bespoke quote\" link beneath the pricing grid.\n- **States:** opening (fade + scale 0.95→1 over `--transition-normal`), open, loading (spinner while \"sending\"), success (check + confirmation, then auto-close), closing (reverse transition).\n- **UX:** fixed overlay as a flex container with `align-items: center` + `justify-content: center`; leather-tinted backdrop with blur; `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; Material Symbols `close` button with `aria-label`; close via `Esc` and overlay click; keyboard focus trapped (Tab\u002FShift+Tab cycle); focus restored to the trigger on close; body scroll locked; `z-index: var(--z-modal)`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n- **Responsive by default:** fluid `clamp()` sizing, wrapping flex rows, zero horizontal overflow from 320px up.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes. Gears idle-rotate slowly (≥20s linear) and wind up on hover (rotate 360° over ~1.2s); steam layers drift; gauge needles sweep on hover. **All motion disabled under `@media (prefers-reduced-motion: reduce)`** — keep only instant opacity feedback.\n- **Accessibility:** semantic landmarks and `aria-label` on the nav; a skip-link as the first focusable element; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `:focus-visible` rings everywhere; `aria-live` regions for form feedback, modal status, and any toast (`--z-toast`); never communicate state by color alone (pair icons + text + chevron rotation); star ratings carry `aria-label` (\"Rated 5 out of 5\") plus a visible \"5\u002F5\".\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n\n---\n\n## 4. STEAMPUNK VISUAL SYSTEM & EFFECTS\n- **Leather texture:** CSS-only layered gradients (repeating-radial speckles + low-alpha diagonal grain) on leather surfaces. **No external image files anywhere on the page.**\n- **Brass rivets:** pseudo-element `radial-gradient` dot rows along panel top\u002Fbottom edges with rivet-silver highlights.\n- **Victorian ornamental frames (`.ornate-frame`):** 3px brass border + inset 1px secondary border (double frame) + brass corner accents via pseudo-elements — used on the hero plaque, featured pricing tier, and section headings.\n- **Steam\u002Ffog overlays:** hero and final-CTA `::before`\u002F`::after` layers of translucent radial gradients with slow horizontal drift keyframes; `pointer-events: none`.\n- **Mechanical gauges (`.gauge`):** circular dial with 3px brass ring, tick marks via `repeating-conic-gradient`, Cinzel Roman-numeral center, needle pseudo-element that sweeps on hover — used for the hero social-proof gauge (\"12,438 workshops stoked\") and the three step dials.\n- **Copper metallic text (`.text-metal`):** brass→copper→brass gradient with `background-clip: text` and `filter: drop-shadow` — **permitted only on dark surfaces** (dark-mode headings, dark leather plaques, CTA band) where large-text contrast ≥3:1 holds; on parchment, headings use `--text-primary` with `var(--text-emboss)`.\n\n---\n\n## 5. PAGE STRUCTURE & SECTION SPECIFICATIONS\nOrder: Header → Hero → Features → How It Works → Testimonials → Pricing → FAQ → Final CTA → Footer. Every `\u003Csection>` has an `id`, an `h2`, a Special Elite eyebrow label, and `scroll-margin-top` for the sticky header; `html { scroll-behavior: smooth }` only inside `@media (prefers-reduced-motion: no-preference)`.\n\n- **Header (sticky):** \"Aetherworks\" wordmark in Cinzel, anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (§1.3), and a mobile `menu` button (`aria-expanded`) toggling a dropdown panel (`--z-dropdown`) that closes on link click or `Esc`. Brass bottom border with rivet dots.\n- **Hero:** two-column flex (copy left, gauge apparatus right; stacks on mobile). Eyebrow: \"Est. 1888 — Precision Steam Automation\". H1 sits on a dark-leather `.ornate-frame` plaque with `.text-metal` (e.g., \"Machinery that keeps pace with your ambition.\"), EB Garamond subcopy, and dual CTAs: `.btn--primary` \"Stoke the Engines\" (→ `#pricing`) and `.btn--secondary` \"See the Machinery\" (→ `#how-it-works`). Decorative rotating gears + steam overlay + pressure-gauge social proof with caption.\n- **Features:** 3 `.card` grid (flex-wrap; stretch exception). Each card: brass gear medallion with a Material Symbols glyph (`precision_manufacturing` \u002F `security` \u002F `bolt`), Cinzel title, copy. Suggested themes: \"Pressure-Tested Reliability\", \"Brass-Bound Security\", \"Aetheric Velocity\".\n- **How It Works:** 3 steps in a flex row (column on mobile) joined by a dotted brass pipeline; each step is a `.gauge` dial with Roman numerals — \"I. Stoke the Boiler — connect your tools\", \"II. Calibrate the Gears — configure your workflows\", \"III. Release the Steam — automate and monitor\".\n- **Testimonials:** 3 quote cards — oversized Cinzel quotation mark, EB Garamond italic quote, monogram medallion avatar (initials in a brass ring, no images), name + role in Special Elite, star rating (Material Symbols `star` + \"5\u002F5\" + `aria-label`). Victorian personas, e.g., \"Cornelia Ashworth — Chief Engineer, Ironclad Textiles Co.\"\n- **Pricing:** 3 tiers — Apprentice $0\u002Fmo, Journeyman $29\u002Fmo (featured: `.ornate-frame`, rivets, \"Most Fortunate Choice\" brass plaque badge, visually elevated), Master Artisan $99\u002Fmo. Feature lists with verdigris Material Symbols `check` glyphs; `.btn--primary` on the featured tier, `.btn--secondary` elsewhere. Below the grid: \"Need a full-foundry commission? Request a bespoke quote →\" opening the modal (§2.4) containing a mini contact form exercising all §2.3 states.\n- **FAQ:** 5–6 native `\u003Cdetails>`\u002F`\u003Csummary>` items (keyboard-accessible by default): brass dividers, Cinzel question, Material Symbols `expand_more` chevron rotating 180° on `[open]`, `:focus-visible` ring, content fade-in. Topics: setup time, integrations, aether-safety compliance, The Foundry Guarantee (refunds), support hours, team plans.\n- **Final CTA:** full-width dark-leather band (both themes) with steam overlay and gears; `.text-metal` Cinzel headline; email-capture `.input-group` (label \"Wire your address\", email input, error container) + `.btn--primary` \"Join the Guild\": validate → loading spinner → success (verdigris check + \"Your application has been received by the Foundry.\") or error (oxblood message), all announced via `aria-live`, with no button resize during any state.\n- **Footer:** dark leather panel in both themes; columns for brand + tagline and secondary links (About the Foundry, The Gazette, Careers, Contact, Privacy, Terms — text links only, no brand\u002Fsocial icons); copyright in Special Elite (\"© 1888–2025 Aetherworks Foundry. All gears reserved.\"); links get a brass underline hover animation and focus rings.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n- **Files:** separate, complete `index.html`, `style.css`, `script.js`. The HTML head includes `lang=\"en\"`, viewport meta, title, meta description, the Google Fonts links, the Material Symbols stylesheet, and the Tailwind CDN. The only script references are the Tailwind CDN and exactly one `\u003Cscript defer src=\"script.js\">` — **zero inline script blocks, zero `style` attributes**.\n- **Naming:** strict BEM for all authored classes (`.btn--primary`, `.card__title`, `.card--featured`, `.input-group__error`, `.modal__panel`); transient states use a consistent `.is-*` prefix (`.is-loading`, `.is-open`, `.is-invalid`). Never mix conventions.\n- **No unrequested placeholders:** all copy is final, thematic English per Section 5; no TODOs, no stub handlers, no lorem ipsum.\n- **Single response:** deliver all three files complete and final on the first attempt.\n- **Self-verify before delivering:** (1) no `style` attributes; (2) no inline SVGs except decorative gears; (3) theme toggle persists across reload and respects OS preference on first visit; (4) full keyboard pass — skip link → nav → CTAs → FAQ → modal (open\u002FEsc\u002Fclose, focus returns) → form; (5) no horizontal scroll from 320px to 1440px; (6) all text ≥4.5:1 (≥3:1 large) in both themes; (7) reduced-motion disables gear\u002Fsteam\u002Fneedle animation; (8) every button state (hover, focus, active, loading, disabled) is visibly distinct.\n\nWhere any instruction conflicts with Sections 1–3, Sections 1–3 prevail.\n",1791954987514]