[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-096-Hand-Drawn-Sketch-Note":3},"# CODING AGENT PROMPT — \"HAND-DRAWN SKETCH-NOTE\" LANDING PAGE (ART & ILLUSTRATION)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt — no stubs, no TODOs, no clarifying questions. Generate the final code immediately after internalizing every rule below.\n\n## PROJECT BRIEF\n\n- **Deliverable:** A single-page marketing landing page for a fictional product in the **Art & Illustration** category. Suggested concept (you may refine the name, not the category): **\"SketchNote Studio\"** — a playful web app that turns plain notes into illustrated, hand-drawn sketch-notes. Author all user-facing copy yourself in **English**, in a casual, fun, sketch-note voice. **Lorem ipsum is forbidden.**\n- **Theme:** Hand-Drawn Sketch-Note — authentic, informal, creative. Keywords: sketch, note, hand-drawn, doodle, paper, notebook, pencil, casual, fun. Era: Modern Casual.\n- **North-star visual direction:** hand-drawn landing page, notebook paper background, sketch style, doodles, handwriting font, casual and fun design.\n- **Required sections, in order:** Header\u002FNav (page shell — hosts the mandatory theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- Keep all styling strictly inside `style.css`.\n- **No Inline CSS:** the `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID Selectors Only:** every design property, layout rule, and state is applied via class or ID selectors.\n- **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic — re-theming the page must require editing CSS only, never markup.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\nStore all visual tokens in `:root` and override per theme:\n- **Colors (light theme — mandatory mapping):** `--primary: #D12828` (red pencil — primary CTAs, emphasis), `--secondary: #0000FF` (ballpoint blue — links, secondary actions), `--bg-primary: #F4F1EA` (matte paper), `--bg-secondary: #FFFFA5` (highlighter yellow — emphasis washes, featured pricing card), `--text-primary: #0E2A5C` (ink navy), `--text-secondary: #333333` (graphite grey), `--text-success: #2E7D32` (pencil green — the palette lacks a success hue; pick a sketch-friendly green passing 4.5:1 on paper), `--text-error: #D12828`, `--border-default: #333333` (graphite pencil lines), `--border-error: #D12828`, `--border-success: #2E7D32`. Also tokenize the ruled-line color (e.g., `--paper-line: #ccc`).\n- **Contrast Pairing:** every light background token must pair with a dark text token and every dark background token with a light text token — enforced in every theme, not just the default.\n- **Light Mode Background:** never pure white; the paper tone is `#F4F1EA`. Where a near-white panel is needed, use `#fefefe`, never `#ffffff`.\n- **Border Radius & Shadows:** define `--radius-sm`, `--radius-md`, `--radius-lg` for standard radii — but sketch components use the hand-drawn wobble radius technique (§5.1) instead of uniform rounding. `--shadow-sm` \u002F `--shadow-md` must be hard-offset \"pencil\" shadows (e.g., `3px 3px 0 var(--border-default)`), no blur.\n- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard`.\n- **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts between layered components.\n\n### 1.3 Mandatory Dark Mode Support\n- Dark mode must always be defined: provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`.\n- **Dark theme concept — \"Midnight Sketchbook\":** dark graphite paper (e.g., `--bg-primary: #1B1B23`), paper-white ink (`--text-primary: #F4F1EA`), brightened red (e.g., `#FF7A7A` — never raw `#D12828` as text on dark), periwinkle blue replacing raw `#0000FF` (raw ballpoint blue is unreadable on dark backgrounds), highlighter yellow retained, ruled lines switched to a low-opacity light grey. All doodles, grain, and stains must remain visible in dark mode.\n- **Theme Switching:** background and text variables must flip seamlessly with no HTML restructuring.\n- **Persistence:** store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and render a visible toggle button in the header (Google Material Symbol `light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` state.\n- **Exception clause:** the source style spec declares this theme light-only; per mandatory architecture, dark mode must still be fully implemented as the Midnight Sketchbook variant — do not omit or stub it.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build every layout structure with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n- **Default Alignment Rule:** every flex container must default to `align-items: center` (`items-center`) unless an explicitly justified exception is documented in a CSS comment.\n- **Mobile-Friendly First:** all flex layouts must be responsive out of the box — rows convert to columns on small viewports, zero horizontal scrolling down to 320px, fluid type and spacing.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n- Use Tailwind CSS (CDN or compiled) or clean custom CSS organized with `@layer` \u002F `@apply` directives (custom CSS in `@layer base, components, utilities` is acceptable given the heavy sketch effects).\n- All utility classes must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`, `.section`, `.container`, `.paper`).\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** load **Patrick Hand** from Google Fonts and bind it to `--font-base` (`font-family: 'Patrick Hand', cursive;` per the spec). You may add exactly one accent handwriting Google Font (e.g., Caveat) for annotations and quotes. No other font sources.\n- **Icons:** Google Material Symbols only (e.g., `draw`, `gesture`, `check`, `close`, `menu`, `format_quote`, `light_mode`, `dark_mode`). **Raw inline SVGs and local icon files are explicitly forbidden.** Emoji must not be used as icons.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\nStyle every state via CSS classes; JavaScript only toggles state classes and ARIA attributes.\n\n### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; 2px graphite wobble border + hard pencil shadow; Patrick Hand label.\n- **Hover:** visual shift — shadow offset grows and\u002For the button translates 1–2px; `cursor: pointer`.\n- **Focus:** distinct focus ring via CSS variables (`outline` + `box-shadow` offset ring in `--secondary`), clearly visible on paper in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)` (or translate into its shadow for a \"stamped\" feel).\n- **Loading:** `aria-busy=\"true\"`, pointer events disabled to prevent double-clicks, CSS spinner (rotating dashed hand-drawn circle) or animated Material Symbol — button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (border + icon swap), announced via an `aria-live` region.\n- **Danger:** `.btn-danger` must be visually distinct in both light and dark themes (red pencil styling).\n\n### 2.2 Card Component (`.card`, `.card--featured`)\n- **Default:** flexible flexbox layout (column), subtle 2px wobble border and hard-offset elevation; body panels use `#fefefe` or `--bg-primary`; featured states may use `--bg-secondary` (highlighter wash).\n- **Hover (interactive cards):** elevation\u002Fshadow shift plus `transform: translateY(-2px)`.\n- **Focus-within:** card border shifts to `--secondary` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** `.card--skeleton` shimmer animation defined in CSS, preserving exact card dimensions to prevent layout jumps.\n- **Empty State:** structured fallback layout featuring a Google Material Symbol and clear guidance text.\n\n### 2.3 Form & Input (`.input-group`)\n- **States:** Empty, Focused (ballpoint-blue wobble outline ring), Filled, Valid (success border + check icon), Invalid (`--border-error` border, red helper text, error icon), Disabled, Read-only.\n- **Structure:** flex container wrapping a `\u003Clabel for>`, the input (hand-drawn style: transparent background, 2px graphite bottom border), and a dedicated error feedback element wired with `aria-describedby` + `aria-live=\"polite\"`.\n- Applied to the Final CTA email capture (§6.7).\n\n### 2.4 Modal \u002F Popup (only if you add one, e.g., \"See full plan details\")\n- **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions (fade + slight wobble scale).\n- **UX Features:** centered flex container (`align-items: center`), backdrop overlay, Google Material Symbol close button, keyboard focus trapping, close via `Esc` or overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`, focus restored to the trigger on close, layered with `--z-modal`.\n- The FAQ must NOT be a modal — build it as an accessible accordion (§6.6).\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n- **Responsive by Default:** fluid sizing and responsive breakpoints; zero horizontal overflow.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms, shimmer, spinner rotation, and doodle wiggles — fall back to opacity changes).\n- **Accessibility (a11y):** sufficient contrast in both Light and Dark modes; never rely on color alone to communicate state (pair color with icons\u002Ftext); semantic HTML5 elements (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles\u002Flabels on custom widgets (accordion, theme toggle, mobile nav); logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, loading, toasts).\n- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive Actions:** `.btn-danger` \u002F delete actions must be visually distinct in both light and dark themes.\n- **Decorations:** all doodles, arrows, stains, spirals, and stick figures must be `aria-hidden=\"true\"` with `pointer-events: none` so they never obscure content or interactions.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n- **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`).\n- **Naming Convention:** BEM throughout (`.card`, `.card__title`, `.card--featured`) — never mix conventions.\n- **No Unrequested Placeholders:** author real English copy for every section in the sketch-note voice; placeholders are permitted only where content was genuinely left unspecified (e.g., social URLs may use `#`).\n\n## 5. HAND-DRAWN SKETCH-NOTE DESIGN SYSTEM (Theme Implementation)\nAll effects are pure CSS — no image assets, no inline SVG.\n\n### 5.1 Signature Techniques\n- **Base paper (from the spec):** body\u002Fsection base is `background-color: #F4F1EA; color: #0E2A5C; font-family: 'Patrick Hand', cursive; background-image: linear-gradient(var(--paper-line) 1px, transparent 1px); background-size: 100% 1.5em;` — expose as a `.paper` utility; `--paper-line: #ccc` in light mode, low-opacity light grey in dark mode.\n- **Wobble borders (hand-drawn boxes):** `border: 2px solid var(--border-default); border-radius: 255px 15px 225px 15px \u002F 15px 225px 15px 255px;` — vary the values slightly per component for an organic feel.\n- **Spiral binding:** a vertical strip of rings built from repeating radial-gradients (or stacked pseudo-element circles) along the left edge of notebook-style cards \u002F the hero panel; decorative only.\n- **Coffee ring stains:** absolutely positioned double radial-gradient rings at low opacity, slightly rotated, placed in the Hero and one later section.\n- **Doodle arrows:** CSS-composed arrows (thin rotated rectangle shaft + border-triangle head) or Material Symbol arrows, pointing at CTAs and connecting steps; gentle wiggle on hover (reduced-motion safe).\n- **Stick figures:** composed from CSS shapes — `border-radius: 50%` circle head plus thin rotated rectangles for torso and limbs — inside `aria-hidden` decorative wrappers (Hero illustration).\n- **Speech bubbles:** wobble-radius box with a pseudo-element triangle tail; used for annotations and testimonial cards.\n- **Matte paper grain:** layered low-opacity repeating gradients (or `background-blend-mode`) for subtle paper tooth; keep opacity ≤ ~4% so text contrast is unaffected.\n- **Ink bleed:** on select display words, `text-shadow: 0 0 1px currentColor`; on borders, a 1px outer box-shadow in the border color.\n- **Highlighter marker:** key words get `background-image: linear-gradient(transparent 55%, var(--bg-secondary) 55%, var(--bg-secondary) 90%, transparent 90%)` with a slight `-1deg` rotation for a hand-swept feel.\n- **Pencil shadows:** hard offset only (e.g., `box-shadow: 4px 4px 0 var(--border-default)`), no blur — this is the theme's elevation language.\n\n### 5.2 Color & Mood Rules\n- Paper `#F4F1EA` dominates; ink navy is the reading color; red pencil is reserved for primary CTAs and emphasis; ballpoint blue for links and secondary actions; highlighter yellow only as a wash behind dark text (never behind light text).\n- Dark mode keeps the same doodle language with the Midnight Sketchbook tokens (§1.3).\n\n## 6. PAGE SECTIONS & CONTENT REQUIREMENTS\n\n### 6.0 Header \u002F Nav\n- Sticky bar on paper background with a 2px graphite bottom rule; flex row (`align-items: center`): sketch wordmark logo (Patrick Hand + a small Material Symbol such as `draw`), anchor links (Features, How It Works, Pricing, FAQ), the theme toggle (§1.3), and a compact `.btn--primary` CTA.\n- Mobile: links collapse behind a Material Symbol `menu` button opening a dropdown panel — keyboard operable, `aria-expanded`, layered with `--z-dropdown`.\n\n### 6.1 Hero\n- Two-column flex (stacks on mobile). Left: small kicker annotation (accent font), `\u003Ch1>` with the highlighter-marker effect on the key phrase, playful subhead, dual CTAs (`.btn--primary` + `.btn--secondary`), one-line social proof. Right: CSS-composed doodle illustration (stick figure at a desk, speech bubble annotation) with a doodle arrow pointing toward the primary CTA and a coffee-ring stain behind it.\n\n### 6.2 Features — 3 Cards\n- Section heading with a doodle underline; flex row of three `.card`s (column on mobile).\n- Each card: Material Symbol icon inside a hand-drawn wobble circle, card title, 2–3 sentence description; hover lift + shadow shift; focus-within border highlight.\n- Topics must fit the Art & Illustration product (e.g., instant doodle library, ink-to-clean-vector cleanup, shareable sketch-notes).\n\n### 6.3 How It Works — 3 Steps\n- Flex row of three steps (column on mobile): oversized hand-drawn circled numbers (1, 2, 3), step title, short description; dashed pencil arrows connect the steps horizontally (reoriented or hidden on mobile).\n- Give step cards alternating slight rotations (−1° \u002F +1°) for a casual pinned-note feel.\n\n### 6.4 Testimonials\n- Three quote cards styled as speech bubbles \u002F torn notebook pages: wobble borders, oversized hand-drawn quote mark (Material Symbol `format_quote`), quote copy, and an author row with a CSS initials avatar (wobble circle + Patrick Hand initials), name, and role.\n- Vary each card's rotation slightly; hover lifts or straightens the card.\n\n### 6.5 Pricing — 3 Tiers\n- Flex row of three `.card`s (column on mobile): Doodler (free), Sketcher (featured), Studio (pro) — names may be refined.\n- Featured middle card: `--bg-secondary` highlighter wash (or thick highlighter top strip), rotated \"Most Popular\" sticker badge, slightly larger scale\u002Felevation.\n- Each card: tier name, price, feature list with Material Symbol `check` in `--text-success` (and `close` in `--text-secondary` for excluded items), and a CTA (featured tier `.btn--primary`; others `.btn--secondary`).\n- Optional per-tier \"Full details\" link: if it reveals content, use the modal pattern (§2.4); otherwise link to the FAQ anchor.\n\n### 6.6 FAQ\n- Accessible accordion: each item is an `\u003Ch3>` + `\u003Cbutton aria-expanded=\"false\" aria-controls=\"...\">` controlling a panel; animate open\u002Fclose via CSS; a Material Symbol chevron\u002Fplus rotates on expand.\n- 5–6 real Q&As about the product; keyboard operable; expanded state must be communicated by more than color (icon rotation + border emphasis).\n\n### 6.7 Final CTA\n- Full-bleed section on a highlighter-yellow wash (light) \u002F its dark equivalent: big handwriting headline (accent font), one supporting line, and an email-capture `.input-group` (label + email input + `.btn--primary`).\n- JS behavior: validate the email format; invalid → inline error state (§2.3) announced via `aria-live`; valid → button loading state → simulated success (check icon + \"You're on the list!\" confirmation) announced via `aria-live`. No backend — simulate with a timeout; prevent double submission.\n\n### 6.8 Footer\n- Paper background with a top graphite rule; multi-column layout: brand wordmark + one-liner, secondary link groups (Product, Company, Support) with real short labels, a social row of Material Symbol icon links (doodle-underline hover + visible focus ring), and a copyright line.\n- Link hover: hand-drawn wavy underline (bottom border or gradient) + color shift to `--secondary`.\n",1791954981625]