[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-472-Silkpunk":3},"# BUILD PROMPT — SILKPUNK LANDING PAGE\n\n**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page on the first attempt, following every rule in this specification without exception.\n\n---\n\n## 1. Project Brief & Theme Direction\n\n**Theme:** \"Silkpunk\" — East-Asian retrofuturism in the lineage of Ken Liu's *The Grace of Kings*. Visual language: bamboo, silk, washi paper, and lacquer materials; organic bio-mechanical technology (kites, airships); classical Chinese\u002FAsian motifs; elegant, flowing, nature-integrated tech. Era: 2015–present.\n\n**Signature moves (mandatory, repeated across the page):**\n- A lacquer-red vertical bar (`--lacquer-bar`) on the leading edge of the nav, every card, every button, and every input.\n- A diagonal silk-sheen gradient (`--silk-sheen`) layered over surfaces.\n- Asymmetric, brush-stroke corner radii (`--radius-lg: 32px 8px 32px 8px`) — never uniform rounding.\n\n**Product concept:** Invent one coherent fictional product (suggested: a workflow-automation platform branded around kite\u002Fairship engineering, e.g., \"Silkwind\"). All copy must be real, polished marketing copy written in **English** — lorem ipsum is prohibited. Suggested thematic vocabulary: *unfurl, chart the winds, bamboo frame, lacquer finish, ride the current*.\n\n**Sections required (in this order):** Hero; Features (3 cards); How It Works (3 steps); Testimonials; Pricing (3 tiers); FAQ; Final CTA; Footer with secondary links.\n\n**Copy locale note:** The source specification contains non-English guidance; all user-facing copy, labels, ARIA attributes, and code comments must be written in English. The source's mode directive translates to: *\"The source does not declare light\u002Fdark modes; validate in both light and dark before publishing\"* — treat this as a mandatory QA gate (see §2.3 and §5).\n\n---\n\n## 2. Strict Rules & Architecture\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- Style exclusively via class\u002FID selectors.\n- HTML must remain semantic and visually agnostic — changing the theme must never require touching markup.\n\n**2.2 Design Tokens**\n- The provided Silkpunk `:root` token block is **canonical**. Include it verbatim as the foundation of `style.css`, then extend it with these mandatory additions:\n\n```css\n:root {\n  \u002F* semantic aliases *\u002F\n  --bg-primary: var(--color-bg);\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --primary: var(--color-primary);\n  --secondary: var(--color-accent);\n  --border-default: var(--color-border);\n  \u002F* feedback *\u002F\n  --text-success: #3d6b52;\n  --text-error: #a3282c;\n  --border-success: #4f7a67;\n  --border-error: #a3282c;\n  \u002F* motion *\u002F\n  --transition-fast: 150ms var(--ease-standard);\n  --transition-normal: 300ms var(--ease-standard);\n  \u002F* layout *\u002F\n  --spacing-gap: var(--space-4);\n  \u002F* elevation *\u002F\n  --z-dropdown: 100;\n  --z-modal: 200;\n  --z-toast: 300;\n}\n```\n\n- **Contrast pairing:** every light surface token must pair with dark text tokens and every dark surface with light text tokens — enforced in both themes, not only the default.\n- The light background is warm paper `#f3ead9` (never pure white; use `#fefefe` if a near-white is ever required).\n\n**2.3 Mandatory Dark Mode**\n- Define dark token overrides **twice**: once under a `.dark` class on `\u003Chtml>`, and once under `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` — so system-preference users receive the correct theme with zero flash and zero HTML restructuring.\n- Suggested starting dark palette (verify ≥ 4.5:1 text contrast; adjust lightness as needed):\n  - `--color-bg: #191410; --color-surface: #221c15; --color-surface-strong: #2d251b; --color-border: #4a3e2c; --color-text: #f3ead9; --color-text-muted: #c2b394; --color-primary: #d05a54; --color-accent: #8fbfa6; --color-lacquer: #c44b42;`\n  - Dark feedback tokens: `--text-success: #9cc9ac; --text-error: #e8837c; --border-success: #8fbfa6; --border-error: #e8837c;`\n  - Dark silk-sheen: same diagonal gradient with white overlays reduced to 0.04–0.08 alpha.\n- **Persistence:** store the user's choice in `localStorage` (key `silkpunk-theme`, values `\"light\"`\u002F`\"dark\"`); absent a stored value, defer to `prefers-color-scheme`.\n- **Toggle:** a visible button in the nav with a Material Symbol (`dark_mode`\u002F`light_mode`), correct `aria-pressed` state, and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout container with Flexbox. Default every flex container to `align-items: center` unless an exception is explicitly justified in a code comment.\n- Mobile-first: rows convert to columns at small breakpoints; zero horizontal scrolling at any viewport ≥ 320px.\n- Card rows (Features, Pricing, Testimonials) use `flex-wrap` with fluid flex growth (e.g., `flex: 1 1 280px`).\n\n**2.5 CSS Approach**\n- The provided custom-CSS design system **is** the framework for this build — extend it; never rename or replace its tokens or component classes.\n- If you introduce Tailwind, do so only via `@layer`\u002F`@apply` mapped back to these tokens; component styling must remain in `style.css`. Pure custom CSS is acceptable and preferred here.\n\n**2.6 Typography & Icons (Google Only)**\n- Load `Noto Serif SC` (display, weights 600\u002F700) and `Noto Sans SC` (body, 400\u002F500\u002F700) via Google Fonts `\u003Clink>` tags with `preconnect`; bind them to `--font-display` and `--font-sans`.\n- Icons: Google Material Symbols (Rounded variant preferred) loaded via the Google Fonts stylesheet. **Inline SVGs and local icon files are forbidden.** Use only valid symbol names (e.g., `air`, `sailing`, `explore`, `precision_manufacturing`, `check`, `star`, `expand_more`, `menu`, `close`, `dark_mode`, `light_mode`, `send`, `error`, `check_circle`, `progress_activity`). Note: `send` (paper plane) works beautifully as a kite motif.\n\n---\n\n## 3. Component Design Specifications\n\n**3.1 Buttons** — base `.btn` and `.btn--primary` per the provided spec; extend with:\n- **Default:** flex layout, centered content, `gap: 0.5rem`, minimum 44×44px touch target.\n- **Hover:** the spec's brush-stroke nudge (`translateX(2px)`) plus `--shadow-md`, `cursor: pointer`.\n- **Focus-visible:** 2px accent outline, 2px offset — distinct in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)` (merge with the spec's active rule).\n- **Loading:** `.btn--loading` \u002F `aria-busy=\"true\"` — block pointer events, prevent double submission, and render a rotating `progress_activity` symbol or CSS border spinner without shifting button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary feedback states driven by `--text-success` \u002F `--text-error`.\n- **Danger:** define `.btn--danger` in the design system — visually distinct in both light and dark themes — even if unused on this page.\n\n**3.2 Cards** — `.card` per the provided spec; extend with:\n- **Hover:** `translateY(-2px)` plus an elevation shift (`--shadow-md` → `--shadow-lg`).\n- **Focus-within:** border color shifts to the accent when any child control receives focus.\n- **Skeleton:** define `.skeleton` shimmer keyframes in CSS (layout-stable, `--radius-lg`) as part of the design system, even though this page's content is static.\n- **Empty state:** define an `.empty-state` pattern (Material Symbol + guidance text) in CSS.\n\n**3.3 Forms & Inputs** — `.input` per the provided spec; extend with:\n- **States:** empty, focused (accent ring per spec), filled, valid (`.input--valid`: success border + `check_circle` icon), invalid (`.input--invalid`: `--border-error`, red helper text + `error` icon), disabled, read-only.\n- **Structure:** a flex `.form-group` wrapping a `\u003Clabel>`, the input, and a dedicated feedback container (`.form__feedback`, `role=\"status\"`, `aria-live=\"polite\"`); wire `aria-describedby` and `aria-invalid` correctly.\n\n**3.4 Accordion (FAQ)**\n- Each item: an `\u003Ch3>` wrapping a `\u003Cbutton class=\"faq-item__toggle\">` with `aria-expanded` and `aria-controls`; the panel carries `role=\"region\"` and `aria-labelledby`.\n- Animate open\u002Fclose purely in CSS (prefer `grid-template-rows: 0fr → 1fr`); the `expand_more` symbol rotates 180°.\n- Fully keyboard operable (Enter\u002FSpace); no mouse-only behavior.\n\n**3.5 Modal (mandatory spec for any dialog you implement)** — e.g., a \"Watch the demo\" or plan-confirmation dialog:\n- **States:** opening, open, loading, success\u002Ferror, closing — all CSS-transitioned.\n- **UX:** centered flex overlay (`align-items: center`) with backdrop, `--z-modal` stacking, a `close` symbol button, closing via `Esc` and overlay click, keyboard focus trapped inside, focus returned to the trigger on close, `role=\"dialog\"`, `aria-modal=\"true\"`, labelled by its heading.\n\n**3.6 Navigation & Theme Toggle**\n- Sticky `.nav` per the spec (lacquer bar + silk sheen).\n- Brand: text wordmark + Material Symbol; nav links with visible `:focus-visible` rings; a primary CTA button.\n- Theme toggle per §2.3.\n- **Mobile:** a `menu` button with `aria-expanded` + `aria-controls` toggling a dropdown panel at `--z-dropdown`; closes on `Esc` and on link activation; entirely keyboard operable.\n\n---\n\n## 4. Page Section Requirements\n\n**4.1 Hero** — spacious section on `--bg-primary` with a silk-sheen wash:\n- `.badge` eyebrow (e.g., \"Now unfurling\"), a single `\u003Ch1>` in `--font-display` (largest type on the page, `--text-4xl`\u002F`--text-5xl`), a supporting subhead in `--text-secondary`, and dual CTAs (`.btn--primary` + `.btn`).\n- Decorative kite\u002Fairship motif built **purely from CSS** — layered gradients, the silk-sheen, borders, and an oversized translucent Material Symbol. No SVG, no images.\n- Trust strip: three short stat lines (flex row → column on mobile).\n\n**4.2 Features — 3 `.card`s** in a flex-wrap row (→ column on mobile):\n- Each card: a Material Symbol inside a circular lacquer\u002Fjade badge, an `\u003Ch3>`, and a description. Thematic angles: wind-powered automation, bamboo-modular pipelines, lacquer-grade reliability.\n- Card states per §3.2.\n\n**4.3 How It Works — 3 steps** connected by a flowing CSS line (gradient border or pseudo-element):\n- Each step: a number in `--font-display`, a Material Symbol, an `\u003Ch3>`, and copy.\n- Desktop: horizontal flex row; mobile: vertical column with the connecting line continuing vertically.\n\n**4.4 Testimonials — 3 quote cards:**\n- Quote in `--font-display` (semantic `\u003Cblockquote>`\u002F`\u003Cfigure>` welcome), a five-star row (`star` symbols with `aria-label=\"Rated 5 out of 5 stars\"`), a monogram avatar (circular badge with initials — no external images), name, and role.\n- Hover\u002Ffocus-within per §3.2.\n\n**4.5 Pricing — 3 tiers** (suggested names: Paper \u002F Bamboo \u002F Lacquer):\n- Middle tier highlighted: `.badge` \"Most popular\", stronger lacquer bar, `--shadow-lg`, subtle desktop `scale(1.02)`.\n- Each tier: name, price in `--font-display`, feature list with `check` symbols, and a CTA button (highlighted tier gets `.btn--primary`).\n- Buttons fully wired per §3.1 — a loading → success feedback simulation on click is acceptable.\n\n**4.6 FAQ — 5–6 accordion items** per §3.4, with real themed Q&A copy.\n\n**4.7 Final CTA — lacquer band:**\n- Full-width section on `--color-lacquer` background (light text tokens — verify contrast pairing) with a silk-sheen overlay, an `\u003Ch2>`, short copy, and an email-capture form per §3.3: inline email validation, submit button with loading → success (`check_circle` + confirmation copy) \u002F error states, and `aria-live` feedback.\n\n**4.8 Footer — secondary links:**\n- Multi-column flex layout (→ column on mobile): Product, Company, Resources, and Legal link groups; brand recap; copyright line with a dynamic year.\n- Sits on `--color-surface-strong` with correct text pairing in both themes; all links have visible `:focus-visible` styles.\n\n---\n\n## 5. Core UX & Micro-Interaction Rules\n\n- **Responsive by default:** fluid sizing, no horizontal overflow at any width ≥ 320px.\n- **Smooth animations:** CSS transitions on all state changes using `--transition-fast` \u002F `--transition-normal` with `--ease-standard`; extend the spec's `prefers-reduced-motion` block to disable **every** transform, shimmer, and accordion animation.\n- **Accessibility:** semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`footer`), a skip link, a single `\u003Ch1>`, logical heading order, full keyboard operability, visible focus everywhere, ARIA per §3–4, `aria-live` regions for all dynamic feedback, and ≥ 4.5:1 text contrast (≥ 3:1 for large text) in **both** themes. Never rely on color alone — pair icons or text with every color-coded state.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **QA gate:** before publishing, validate the full page in light AND dark mode — the source specification explicitly requires this.\n\n---\n\n## 6. Deliverables & Output Format\n\n- **Files:** exactly three — `index.html`, `style.css`, `script.js`. A single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference; no inline script blocks; no inline styles.\n- **Naming:** BEM throughout (`.block__element--modifier`), consistent with the spec's `.btn--primary`; never mix conventions.\n- **`style.css` structure:** open with the provided Silkpunk token block (extended per §2.2–2.3), then base components, then section styles.\n- **Copy:** all real English marketing copy; no lorem ipsum; no unrequested placeholders.\n- **Assets:** no inline SVGs, no local icon or font files, no external images — all decoration via CSS and Google Material Symbols.\n",1791954987711]