[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-615-Expo-Luminous-Developer":3},"# SYSTEM PROMPT — Build the \"Expo Luminous Developer\" Landing Page\n\n**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single attempt. All user-facing copy must be written in **English**.\n\n**Design Identity:** Luminous Canvas · Pill Geometry · Strict Monochromatic · Gallery Spacing · Inter Full Range. A cool-white gallery canvas (`#f0f0f3`) with generous vertical rhythm (96px+), a strictly grayscale UI in which product screenshots are the only source of color, pill-derived geometry (24px–9999px radii), massive 64px display headlines with extreme negative tracking (−1.6px to −3px), Inter as the sole typeface (weights 400–900), whisper-soft shadows that barely lift elements, and white cards floating on the Cloud Gray canvas. Black (`#000000`) is reserved for headlines and primary CTAs.\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 Selectors Only:** All design properties, layout rules, and states must be targeted via class selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain semantic and styling-agnostic — changing the look must only require editing `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root`, and override them for dark mode. Required tokens:\n\n| Token | Light Value | Dark Value | Usage |\n|---|---|---|---|\n| `--primary` | `#000000` | `#fefefe` | Primary ink: CTA fill, headlines |\n| `--secondary` | `#fefefe` | `#262b31` | Secondary surface: buttons, cards |\n| `--bg-primary` | `#f0f0f3` | `#1c2024` | Page canvas |\n| `--bg-secondary` | `#fefefe` | `#262b31` | Floating cards, nav, elevated surfaces |\n| `--bg-inverse` | `#000000` | `#fefefe` | Inverted panels (Final CTA) |\n| `--text-primary` | `#1c2024` | `#fefefe` | Body text |\n| `--text-heading` | `#000000` | `#ffffff` | Display headlines |\n| `--text-secondary` | `#60646c` | `#b0b4ba` | Subheads, descriptions |\n| `--text-muted` | `#b0b4ba` | `#878c94` | Meta text, captions |\n| `--text-on-inverse` | `#ffffff` | `#1c2024` | Text on `--bg-inverse` |\n| `--accent` | `#0d74ce` | `#5aa4e6` | Inline text links + focus rings **only** |\n| `--text-success` \u002F `--border-success` | `#1a7f37` | `#4caf7d` | Functional success feedback |\n| `--text-error` \u002F `--border-error` | `#c5221f` | `#f28b82` | Functional error feedback |\n| `--border-default` | `#e0e1e6` | `#343941` | Card\u002Finput borders |\n| `--shadow-sm` | `0 3px 6px rgba(0,0,0,0.08)` | `0 3px 6px rgba(0,0,0,0.45)` | Whisper resting shadow |\n| `--shadow-md` | `0 12px 32px rgba(0,0,0,0.10)` | `0 12px 32px rgba(0,0,0,0.55)` | Hover elevation |\n| `--radius-sm` \u002F `--radius-md` \u002F `--radius-lg` | `6px` \u002F `24px` \u002F `9999px` | same | Buttons \u002F containers & cards \u002F pills |\n| `--spacing-gap` \u002F `--section-gap` | `1.5rem` \u002F `clamp(96px, 10vw, 128px)` | same | Gaps \u002F gallery vertical rhythm |\n| `--transition-fast` \u002F `--transition-normal` \u002F `--ease-standard` | `150ms` \u002F `300ms` \u002F `cubic-bezier(0.4,0,0.2,1)` | same | All state changes |\n| `--z-dropdown` \u002F `--z-modal` \u002F `--z-toast` | `100` \u002F `200` \u002F `300` | same | Layered components |\n| `--font-base` | `'Inter', sans-serif` | same | Sole typeface |\n\n* **Contrast Pairing (mandatory in every theme):** light backgrounds pair with dark text tokens, dark backgrounds pair with light text tokens. Verify this pairing in both Light and Dark modes.\n* **Pure White Exception:** Never use `#ffffff` as a background — near-white surfaces use `#fefefe`. `#ffffff` is permitted only as text color on dark\u002Fblack surfaces.\n* **Monochrome Exception (explicit):** The UI is strictly grayscale; `--accent` is reserved for inline links and focus rings, and success\u002Ferror\u002Fdanger colors are permitted **only** as functional feedback (accessibility requirement), never as decoration.\n\n### 1.3 Mandatory Dark Mode\n* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` (default, prevents flash-of-wrong-theme) and a `.dark` override class placed after the media query in the cascade.\n* **Theme Switching:** Backgrounds and text must flip purely via variables — no HTML restructuring.\n* **Persistence:** `script.js` reads `localStorage` on load; if an explicit choice exists, apply the `.dark`\u002F`.light` override class; otherwise defer to `prefers-color-scheme`.\n* **Toggle Control:** A visible header toggle with `aria-pressed`, a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"), and Material Symbols `dark_mode` \u002F `light_mode` icons.\n* **Luminous-First Exception (explicit):** The source style is luminous-first, but Dark Mode is mandatory; adapt the identity to a Quasi-Black (`#1c2024`) canvas with inverted monochrome surfaces per the token table above.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Every flex container defaults to `align-items: center` unless a layout explicitly justifies an exception.\n* All rows convert to columns on small viewports; **no horizontal scrolling at any breakpoint**.\n* Use a single `.container` (max-width ~1120px, fluid inline padding) and `--section-gap` for gallery rhythm.\n\n### 1.5 Framework: Tailwind CSS\n* Use Tailwind CSS (Play CDN) for layout utilities only (flex, grid, gap, responsive prefixes). Map its config colors\u002Fradii\u002Ffonts to the CSS variables above.\n* All themeable styling lives in `style.css` as a fixed component class set: `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`, `.btn-pill`, `.card`, `.badge`, `.input-group`, `.faq-item`, `.section`, `.container`, `.panel-inverse`, plus `.is-*` state classes. Never mix in BEM or any other naming convention.\n* **Script Exception (explicit):** The Tailwind CDN `\u003Cscript src>` and its minimal inline config object are the sole permitted addition to the single deferred `script.js` entry point.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load Inter (weights 400;500;600;700;800;900) via Google Fonts `\u003Clink>` with preconnect; bind to `--font-base`. Inter is the only typeface.\n* **Icons:** Google Material Symbols (Rounded) via Google Fonts. Inline SVGs, local icon files, and emoji-as-icons are all forbidden.\n* **Type Scale (fluid, weight\u002Ftracking per spec):**\n\n| Class | Size | Weight | Letter-spacing |\n|---|---|---|---|\n| `.display-xl` | `clamp(44px, 7vw, 64px)` | 900 | −3px at 64px (≈ −0.047em) |\n| `.display-lg` | `clamp(36px, 5vw, 48px)` | 800 | −2.4px at 48px |\n| `.display-md` | `clamp(30px, 4vw, 40px)` | 800 | −1.6px at 40px |\n| `.heading-lg` | 28px | 700 | −0.8px |\n| `.heading-md` | 20px | 700 | −0.3px |\n| body | 17px | 400 | normal |\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons\nStyle all states via classes; base `.btn` uses `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` with a 44×44px minimum touch target.\n* **Default:** `.btn-primary` = `--primary` fill + `--text-on-inverse` text, `--radius-sm` (6px). `.btn-secondary` = `--secondary` fill, 1px `--border-default`, `--text-primary` text. `.btn-pill` modifier applies `--radius-lg` (9999px) — hero CTAs use this.\n* **Hover:** Brightness shift + `--shadow-sm`, `cursor: pointer`.\n* **Focus:** Distinct cobalt ring via `box-shadow: 0 0 0 3px` accent-derived ring; keyboard navigable.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** Disables interaction, blocks double-clicks, renders a CSS spinner or animated Material `progress` icon without changing button dimensions.\n* **Disabled (`[disabled]` \u002F `.is-disabled`):** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** Temporary feedback styles driven by `--text-success` \u002F `--text-error`, announced via an `aria-live` region.\n* **Danger:** `.btn-danger` must be visually distinct in **both** themes (functional-color exception).\n\n### 2.2 Cards\n* **Default:** `.card` = `--bg-secondary` fill, `--radius-md` (24px), 1px `--border-default`, `--shadow-sm`, flexbox layout.\n* **Hover:** `transform: translateY(-2px)` + `--shadow-md`.\n* **Focus-within:** Border highlights when a child link\u002Fbutton receives focus.\n* **Loading (`.card--skeleton`):** Shimmer keyframe animation in CSS; no layout shift.\n* **Empty State (`.card--empty`):** Structured fallback with a Material icon and guidance text. Define and ship all state classes in CSS even where the static page doesn't render every state.\n\n### 2.3 Forms & Inputs\nStructure: `.input-group` flex container wrapping a `\u003Clabel>`, an input, and a dedicated error-feedback element.\n* **States to style:** Empty, Focused (cobalt outline ring), Filled, Valid (success border + `check` icon), Invalid (error border, error text + `error` icon, `aria-live=\"polite\"` announcement), Disabled, Read-only.\n* Applied to the email capture in the Final CTA.\n\n### 2.4 FAQ Accordion (in place of modals — no modals are in scope)\n* Each item: `\u003Cbutton class=\"faq-trigger\">` with `aria-expanded` + `aria-controls`, and a panel with `role=\"region\"` + `aria-labelledby`.\n* Material `expand_more` chevron rotates 180° on open; panel animates via the CSS `grid-template-rows: 0fr → 1fr` technique.\n* Fully keyboard operable; respects `prefers-reduced-motion`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid `clamp()` sizing, no horizontal overflow, mobile-first breakpoints.\n* **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; a `prefers-reduced-motion` block disables transforms, shimmer, and smooth scrolling.\n* **Accessibility:** Skip-to-content link; semantic landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); logical heading order; contrast ≥ 4.5:1 in both themes; visible `:focus-visible` rings; never rely on color alone — pair icons with text for every state; `aria-live` regions for form errors, loading, and success feedback.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive\u002FDistinct Actions:** `.btn-danger` and destructive links remain distinct in both themes.\n\n---\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js`. No inline `\u003Cstyle>` blocks; no inline `\u003Cscript>` beyond the sanctioned Tailwind CDN config (see 1.5); `script.js` loaded once with `defer`.\n* **Naming:** One fixed kebab-case component set (Section 1.5) + Tailwind layout utilities. Never mix conventions.\n* **Copy:** Write realistic, specific English copy for a cross-platform developer tool — no lorem ipsum. Placeholder content is permitted **only** for the hero product-screenshot frame (Section 5.2), which must be a neutral, CSS-built monochrome mock (no external images anywhere; testimonial avatars are initial-based pill circles).\n\n---\n\n## 5. PAGE SECTION SPECIFICATIONS\n\n### 5.1 Sticky Navigation\nLogo (Material `deployed_code` icon + wordmark), anchor links (Features, How It Works, Pricing, FAQ), theme toggle (1.3), and a `.btn-primary` CTA. Frosted `--bg-secondary` bar with `--border-default` bottom border. Mobile: hamburger (`menu`\u002F`close` icons) toggling a dropdown panel with `aria-expanded`, `--z-dropdown`, closing on link click and `Esc`.\n\n### 5.2 Hero\nGallery-spaced. A `.badge` pill tag (e.g., \"Now with over-the-air updates\"), a `.display-xl` headline in `--text-heading` (−3px tracking), a `--text-secondary` subhead, and two `.btn-pill` CTAs (`.btn-primary` \"Start building\" + `.btn-secondary` \"Read the docs\" with `arrow_forward` icon). Below: a `.card` containing a CSS-built, monochrome product-screenshot mock (browser dots + gray content blocks) — the only sanctioned placeholder; real screenshots would be the page's sole color source.\n\n### 5.3 Features — 3 Cards\nSection heading (`.display-md`) + intro line. Grid: 1 column mobile → 3 columns desktop. Each `.card`: a pill icon chip (`--radius-lg`, muted surface) with a Material Symbol (`devices`, `bolt`, `cloud_upload`), a `.heading-md` title, and a `--text-secondary` description. Hover\u002Ffocus-within\u002Fskeleton states per 2.2.\n\n### 5.4 How It Works — 3 Steps\nThree steps, each with a black pill number chip (\"01\", \"02\", \"03\"), `.heading-md` title, and short description. Desktop: horizontal row connected by a `--border-default` line; mobile: vertical stack. Suggested copy: create a project → develop with instant previews → ship to app stores with OTA updates.\n\n### 5.5 Testimonials\nThree `.card` quotes: Material `format_quote` icon, quote text, and an author row (initials avatar in a `--radius-lg` circle, name in 600 weight, role in `--text-muted`). Strictly monochrome.\n\n### 5.6 Pricing — 3 Tiers\nThree `.card` tiers (e.g., Hobby $0, Pro $19\u002Fmo, Team $49\u002Fmo). Middle tier is featured: \"Most popular\" `.badge` pill, `--text-heading` border, `--shadow-md`, and a `.btn-primary`; other tiers use `.btn-secondary`. Feature lists use Material `check` icons. Prices use tight tracking and 800 weight.\n\n### 5.7 FAQ\nFive to six realistic questions in the accordion pattern (2.4), e.g., platforms supported, native code requirements, update shipping, offline support, billing.\n\n### 5.8 Final CTA\nAn inverted `.panel-inverse` section (a class that locally flips `--bg-secondary`, `--text-primary`, `--border-default`, so child components adapt automatically): `--bg-inverse` background — black in Light mode, near-white in Dark mode. Contains a `.display-lg` headline, the `.input-group` email capture (2.3), and a `.btn-primary` submit demonstrating the full state flow: idle → `.is-loading` (spinner) → `.is-success` (check icon + confirmation announced via `aria-live`), or inline `.is-error` with message on invalid input. Include a one-line privacy microcopy in `--text-muted`.\n\n### 5.9 Footer\n`--bg-secondary` surface with 3–4 columns of secondary links (Product, Resources, Company, Legal) in `--text-secondary`, hovering to `--accent`. Social presence as text links with `arrow_outward` icons (no brand SVGs). Bottom bar: logo, copyright, and a `--text-muted` note.\n\n---\n\n## 6. JAVASCRIPT BEHAVIORS (`script.js`)\n\nImplement **only** the following: (1) theme toggle with `localStorage` persistence, `prefers-color-scheme` fallback, `aria-pressed`\u002F`aria-label` state, and icon swap; (2) mobile nav open\u002Fclose; (3) FAQ accordion toggling; (4) email validation with inline error, button loading → success flow, and `aria-live` announcements; (5) optional IntersectionObserver scroll-reveal adding `.is-visible` — content must be visible by default without JS and fully disabled under `prefers-reduced-motion`. Use CSS `scroll-behavior: smooth` (with reduced-motion override) for anchor navigation. No other behavioral JS.\n\n---\n\n## 7. DEFINITION OF DONE\n\nZero inline styles; zero inline SVGs; all tokens variable-driven; dark mode complete with persisted toggle; every button\u002Finput\u002Fcard state defined in CSS; all copy real English; keyboard-only operation verified; no horizontal scroll from 320px up; both themes pass contrast checks; only three files delivered.\n",1791954989980]