[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-801-E-Ink-Paper":3},"# CODING AGENT PROMPT — Build a Complete \"E-Ink \u002F Paper\" Landing Page (First Attempt, Production-Ready)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page in one attempt. No follow-up questions, no TODOs, no partial output. The deliverable must run by simply opening `index.html`.\n\n**Theme — E-Ink \u002F Paper:** Paper-like, matte, high-contrast, monochrome, reading-focused, calm \"slow tech\" aesthetic (2020s digital well-being era). The page must feel like a beautifully typeset document printed on matte paper: ink-black text on off-white stock, hairline 1px rules, serif reading typography, subtle grain, sharp instant state changes, minimal UI chrome, zero decorative motion, no gradients, no glow, no shadows-as-decoration — elevation is expressed with 1px borders and inversion.\n\n**Sections to build (in order):** Header\u002Fnav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA (email capture), Footer with secondary links.\n\n**Copy direction:** Invent one coherent fictional product that fits the theme (e.g., a distraction-free e-ink reading tablet or slow-tech reading app). All user-facing copy must be in English — realistic headlines, feature names, step titles, testimonial names + roles, plausible pricing values, and at least 6 real FAQ questions. Lorem-ipsum-only submissions are rejected.\n\n**Explicit exceptions to mandatory rules (do not drop the rules — apply them as follows):**\n1. **Motion exception:** The mandatory transition declarations (`transition: var(--transition-normal)` on all state changes) are retained in the code, but the transition tokens resolve to **0ms** — every state snaps instantly, like an e-ink screen refresh. No fades, no smooth scrolling, no continuous animation.\n2. **Texture exception:** The mandatory \"no inline SVG\" rule stands for HTML. The grain overlay may use an inline SVG `feTurbulence` data-URI **defined only inside `style.css` as a `background-image` value** — this is the sole permitted SVG usage in the project.\n3. **Palette exception:** The monochrome palette is extended with the mandatory success\u002Ferror tokens, themed as \"pen ink\" colors (a green grading pen and a red editing pen). They are reserved exclusively for validation and feedback states — never used decoratively.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. Forbidden: `style=\"...\"` attributes, `\u003Cstyle>` blocks in `index.html`, and presentational markup.\n* Every design property, layout rule, and state is targeted via class or ID selectors only.\n* HTML must remain semantic and style-agnostic — restyling the site later requires touching only `style.css`, never the markup.\n* The only permitted external references are Google Fonts, Google Material Symbols, and one deferred `script.js`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (light theme) with these exact values:\n* **Colors:** `--primary: #1A1A1A;` `--secondary: #4A4A4A;` `--bg-primary: #FDFBF7;` `--bg-secondary: #F5F5F5;` `--text-primary: #1A1A1A;` `--text-secondary: #4A4A4A;` `--accent: #FFFF00;` (Highlighter Yellow) `--text-success: #1F6E43;` `--text-error: #B3261E;` `--border-default: #E0E0E0;` `--border-success: #1F6E43;` `--border-error: #B3261E;`\n* **Contrast pairing (enforced in every theme):** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens. Pure `#ffffff` is forbidden anywhere — the paper whites are `#FDFBF7` and `#F5F5F5` only.\n* **Accent rule:** `--accent` (#FFFF00) is used exclusively as a marker-style background highlight behind `--text-primary` text (semantic `\u003Cmark>` or a `.hl` class), never as text or border color on light backgrounds, and the yellow highlight keeps black text on it in dark mode. Use it sparingly: one hero phrase, the featured pricing badge, at most one phrase per testimonial.\n* **Shape & elevation:** `--radius-sm: 0;` `--radius-md: 2px;` `--radius-lg: 4px;` (never exceed 4px anywhere — paper corners are cut, not rounded); `--shadow-sm: none;` `--shadow-md: 0 2px 0 var(--border-default);` (prefer 1px borders over shadows for all elevation).\n* **Spacing:** `--spacing-gap: 1.5rem;` plus a consistent 0.25rem-based scale used throughout.\n* **Motion:** `--transition-fast: 0ms;` `--transition-normal: 0ms;` `--ease-standard: steps(1, end);`\n* **Stacking:** `--z-dropdown: 100;` `--z-modal: 200;` `--z-toast: 300;` plus a dedicated `--z-noise` for the grain overlay.\n* **No gradients anywhere** — solid fills only.\n\n**1.3 Mandatory Dark Mode (Full Inversion)**\n* Dark mode is a **strict inversion** of the paper theme. Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>` (the class takes precedence; the media query is the no-JS \u002F first-paint fallback).\n* **Dark tokens:** `--bg-primary: #1A1A1A;` `--bg-secondary: #242424;` `--text-primary: #FDFBF7;` `--text-secondary: #B8B8B8;` `--primary: #FDFBF7;` `--secondary: #B8B8B8;` `--border-default: #3D3D3D;` Lighten the pen tokens for dark paper so feedback text keeps ≥ 4.5:1 contrast on `#1A1A1A` (e.g., success ≈ `#8FD3A8`, error ≈ `#F0A69B` — verify with a contrast check). Set `color-scheme` correctly so native form controls invert.\n* Verify the pairing in dark mode: light text on dark backgrounds everywhere; the yellow highlight remains black-on-yellow.\n* **Toggle:** a visible theme toggle button in the header using Material Symbols (`light_mode` \u002F `dark_mode`), with correct `aria-label` and `aria-pressed` state. The choice persists via `localStorage` (e.g., key `\"theme\"`), falls back to `prefers-color-scheme` on first visit, and must not flash on load (the media query handles the pre-JS paint; `script.js` syncs the stored preference immediately).\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox.\n* **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., prose-heavy card interiors may use `align-items: flex-start` with left-aligned text for readability — document each such exception).\n* Mobile-first: all multi-column rows (Features, How It Works, Pricing) stack into single columns below your breakpoint; no horizontal scrolling at any viewport from 320px up; prose blocks capped to a reading measure of ~65–75ch; page shell wrapped in a max-width `.container` (~72rem).\n* **\"Page turn\" rhythm:** separate every section with a full-width `1px solid var(--border-default)` rule, like the pages of a book, and number sections with mono eyebrows (\"01 — Features\").\n\n**1.5 CSS Architecture**\n* Use clean custom CSS in `style.css` (no Tailwind CDN, no frameworks, no build step), organized with `@layer`: `reset`, `tokens`, `base`, `layout`, `components`, `utilities`.\n* Component classes must be generic and reusable (`.btn`, `.card`, `.input-group`, `.section`, `.container`); every utility must map back to CSS variables, never raw values.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via Google Fonts `\u003Clink>` tags (with `preconnect`): **Newsreader** (serif — body and headings) and **IBM Plex Mono** (labels, buttons, nav, numbers, small print). Bind `--font-base: \"Newsreader\", Georgia, serif;` and `--font-mono: \"IBM Plex Mono\", monospace;`.\n* Body line-height 1.6–1.7; headings large and tight via `clamp()`; mono labels uppercase with letterspacing.\n* Icons: Google Material Symbols (Outlined variant) via `\u003Clink>`, rendered as `\u003Cspan class=\"material-symbols-outlined\" aria-hidden=\"true\">icon_name\u003C\u002Fspan>`. Forbidden: inline `\u003Csvg>` elements, local icon files, emoji-as-icons, and any other icon font.\n* Imagery: the hero is purely typographic (like a printed front page). If any image is used elsewhere, it must be grayscale-filtered (`filter: grayscale(1)`) to match the e-ink look.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons (`.btn`, `.btn--solid`, `.btn--outline`, `.btn--danger`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` mono uppercase label; minimum touch target 44×44px; `1px solid var(--primary)` border; transparent background; `var(--text-primary)` text; radius `var(--radius-md)`.\n* **Hover:** instant full inversion — `background: var(--primary); color: var(--bg-primary);` with `cursor: pointer` (no fade).\n* **Focus-visible:** `2px solid var(--primary)` outline with 3px offset (reads like a text-selection bracket) — distinct in both themes; never suppress focus outlines.\n* **Active\u002Fpressed:** `transform: scale(0.97)` applied instantly.\n* **Loading (`.is-loading` + `aria-busy=\"true\"`):** disables interaction and prevents double-clicks, keeps the exact button dimensions, and renders the Material Symbol `hourglass_empty` with a `steps(2)` blink (e-ink cursor style) or static \"Sending…\" text — no smooth spinners.\n* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`\n* **Success\u002FError:** post-submit feedback swaps border\u002Flabel color to `--text-success`\u002F`--text-error` and pairs a `check_circle`\u002F`error` Material Symbol — never color alone — with the message rendered in an adjacent `aria-live=\"polite\"` region.\n* **`.btn--danger`:** `1px solid var(--text-error)` with `var(--text-error)` text; hover inverts to an error background with light text. It must remain visually distinct in both light and dark themes.\n\n**2.2 Cards (`.card`, `.card--featured`)**\n* **Default:** `background: var(--bg-secondary); 1px solid var(--border-default);` radius `var(--radius-md)`; flex column layout; center-aligned content per the default rule (prose-heavy interiors may use the documented `flex-start` exception); generous padding from the spacing scale.\n* **Hover (interactive cards only):** instant `border-color: var(--primary)` shift plus `transform: translateY(-2px)` — applied with no easing.\n* **Focus-within:** `border-color: var(--primary)` whenever a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** define `.card--skeleton` with grey placeholder blocks animated only by a `steps()` blink between two greys (an e-ink refresh, not a smooth shimmer); fixed dimensions to prevent layout jumps.\n* **Empty state:** a `.card--empty` pattern featuring one large Material Symbol plus one line of clear guidance copy.\n* **Featured (middle pricing tier):** fully inverted — `background: var(--primary); color: var(--bg-primary); border-color: var(--primary);` with a mono badge (e.g., a yellow `\u003Cmark>` \"Most highlighted\") — visually distinct in both themes.\n\n**2.3 Forms & Inputs (`.input-group`)**\n* **Structure:** a flex column with `align-items: stretch` (a documented exception to the center default) wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a dedicated `.input-group__error` feedback container.\n* **States (all class-driven):** empty; focused (`2px solid var(--primary)` ring); filled; valid (success border + `check_circle` icon + text confirmation); invalid (error border, error icon, error message in `--text-error`, `aria-invalid=\"true\"`, message linked via `aria-describedby`); disabled (opacity 0.5, not-allowed); read-only (dashed border).\n* **Behavior:** the Final CTA email capture is wired in `script.js` — prevent default, validate the email format, trigger the button's loading state, then render success\u002Ferror feedback in an `aria-live=\"polite\"` region.\n\n**2.4 FAQ & Modal\u002FDialog**\n* **FAQ must use native `\u003Cdetails>`\u002F`\u003Csummary>`** — no modal, no JavaScript: full-width items separated by `1px solid var(--border-default)` rules; the custom marker is a Material Symbol (`add`) that swaps to `remove` via the `[open]` attribute in pure CSS — instantly, with no height animation; `summary` receives the standard focus-visible ring.\n* **Modal (conditional):** no modal is required for this build. If you introduce any overlay anyway, it must implement: opening\u002Fopen\u002Floading\u002Fsuccess-error\u002Fclosing states (all instant, 0ms), a centered fixed overlay (`align-items: center`), a backdrop, a Material Symbol `close` button, keyboard focus trapping, close via `Esc` and backdrop click, `role=\"dialog\"`\u002F`aria-modal`, and `z-index: var(--z-modal)`.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography, breakpoint-driven stacking, zero horizontal overflow from 320px up.\n* **Instant, always-visible feedback:** every hover, click, focus, and submission triggers an immediate visible state change (inversion, border shift, icon, or message). Never leave an interaction silent.\n* **Motion policy:** keep the mandatory `transition: var(--transition-normal)` declarations on all state changes, but the tokens resolve to 0ms — states snap like an e-ink refresh. Set `scroll-behavior: auto` so anchor navigation jumps instantly (page-flip feel). No fades, no smooth scrolling, no continuous animations.\n* **Reduced motion:** `@media (prefers-reduced-motion: reduce)` sets `animation: none !important` globally (this also disables the `steps()` blinks).\n* **Grain texture:** implement as `body::before` — `position: fixed; inset: 0; pointer-events: none; z-index: var(--z-noise);` — with a `background-image` set to an SVG `feTurbulence` data-URI defined only inside `style.css`; opacity ≈ 0.04 in light mode and ≈ 0.06 in dark mode. It must never intercept interaction or harm readability.\n* **Accessibility:** semantic landmarks (`header`, `nav`, `main`, `section`, `footer`), exactly one `h1`, logical heading order, a skip-to-content link, visible keyboard focus on every interactive element, and full keyboard operability (nav, theme toggle, FAQ, form). Contrast ≥ 4.5:1 for all text in both themes (ink-on-paper is ~16:1; explicitly verify the grey secondaries and the dark-mode pen tokens). Never communicate state by color alone — always pair color with an icon, border change, or text. All dynamic feedback uses `aria-live` regions. The theme toggle exposes correct `aria-pressed`\u002F`aria-label`.\n* **Destructive actions:** any `.btn-danger` or delete\u002Funsubscribe-style link must be visually distinct in both light and dark themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** exactly three — `index.html`, `style.css`, `script.js`. The HTML contains only one script reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline `\u003Cscript>` blocks, no inline styles, no external assets beyond Google Fonts and Google Material Symbols.\n* **`script.js` scope (vanilla JS only):** theme toggle + `localStorage` persistence; mobile nav toggle (hamburger with correct `aria-expanded`); CTA email validation with the loading\u002Fsuccess\u002Ferror flow. FAQ stays CSS-native. No libraries, no analytics, no dead code.\n* **Naming convention:** strict BEM (`.block__element--modifier`) across the entire deliverable — never mix conventions, and never use value-based class names (`.text-yellow` is forbidden — use the semantic `.hl` or `\u003Cmark>`).\n* **Section map (build all, in order):**\n  1. **Header (sticky):** wordmark, anchor nav (Features \u002F How It Works \u002F Pricing \u002F FAQ), theme toggle, compact CTA; `1px solid var(--border-default)` bottom rule; collapses to a Material Symbol `menu` hamburger below the breakpoint.\n  2. **Hero:** mono eyebrow, one large serif `h1` with a yellow `\u003Cmark>` on the key phrase, subcopy within reading measure, a `.btn--solid` + `.btn--outline` pair — purely typographic, no photos.\n  3. **Features:** `h2` plus three `.card`s, each with a Material Symbol, serif title, and left-aligned prose.\n  4. **How It Works:** three numbered steps (`01 \u002F 02 \u002F 03` in mono) joined by `1px` rules, stacking vertically on mobile.\n  5. **Testimonials:** serif `\u003Cblockquote>` cards with large typographic quotation marks (CSS `content`), mono attribution (name + role), at most one yellow `\u003Cmark>` phrase per quote.\n  6. **Pricing:** three tier cards with plausible values; the middle tier uses `.card--featured` (inverted) with a highlighted badge; every tier gets a `.btn`.\n  7. **FAQ:** six or more native `\u003Cdetails>` items with real, thematic questions.\n  8. **Final CTA:** a large serif statement plus the `.input-group` email capture with the full loading\u002Fsuccess\u002Ferror flow.\n  9. **Footer:** `border-top` rule, secondary link columns, small print in mono, and copyright — all links must be real in-page anchors or plausible hrefs.\n* **Copy:** all English, coherent with the invented product, specific and human. Placeholders are only allowed where content is genuinely unspecified — none are expected here.\n* **Completion:** every section built, every component state styled, and both themes verified — complete on the first attempt.\n",1791954993242]