[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-496-Sumi-e-Japanese-Ink-Wash":3},"# SYSTEM PROMPT — SUMI-E (JAPANESE INK WASH) LANDING PAGE\n\n**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, strictly following this specification. Every rule below is mandatory unless explicitly marked optional.\n\n**Project Brief:**\n\n* **Theme:** Sumi-e (Japanese Ink Wash) — monochrome black ink gradients (*bokashi*) on cream rice-paper backgrounds, visible brush-stroke texture and ink-bleed edges, deliberate negative space (*ma*) as a compositional element, asymmetric organic compositions, and a single red seal (*hanko*) accent. Era: 14th century–present. Visual references: Sesshu Toyo's landscape scrolls; Hasegawa Tohaku's \"Pine Trees\" screen.\n* **Sections (in this order):** Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links. A slim navigation bar is required page chrome (it hosts the mandatory theme toggle and anchor links).\n* **Source note (translated from Portuguese):** \"The source does not declare light\u002Fdark modes; validate in both light and dark before publishing.\" Dark Mode is therefore **mandatory**, not optional.\n* **Copy:** All user-facing copy must be written in **English**. Invent one coherent product concept consistent with the Sumi-e theme (e.g., a mindful ink-journaling studio or a digital sumi-e painting atelier) and write real, polished copy for every section. Lorem ipsum is forbidden.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n\n* Keep **all** styling inside a dedicated `style.css` file. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n* Target every design property, layout rule, and state via **class or ID selectors only**.\n* HTML must remain clean, semantic (HTML5 landmarks: `header`, `nav`, `main`, `section`, `footer`), and agnostic of visual styling — changing the site's look must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\n\nStore all visual tokens in `:root` and override them inside a `.dark` class scope. Use the canonical token names below, populated with the Sumi-e palette. Suggested dark-mode values are provided — you must verify every text\u002Fbackground pair meets WCAG AA (4.5:1 body text, 3:1 large text and UI borders) and adjust values if any pair fails, preserving the Sumi-e character.\n\n```css\n:root {\n  \u002F* canonical color tokens — LIGHT (rice-paper ground, sumi ink) *\u002F\n  --primary: #232323;            \u002F* sumi ink black *\u002F\n  --secondary: #3d3a33;          \u002F* ink-wash *\u002F\n  --bg-primary: #f4efe4;         \u002F* rice-paper page ground *\u002F\n  --bg-secondary: #faf6ec;       \u002F* card surface *\u002F\n  --bg-tertiary: #ede5d3;        \u002F* recessed surface *\u002F\n  --text-primary: #1c1c1c;\n  --text-secondary: #5a564c;     \u002F* muted ink *\u002F\n  --text-success: #4f6045;       \u002F* desaturated moss-ink green *\u002F\n  --text-error: #b13d2c;         \u002F* hanko red *\u002F\n  --border-default: #8c8676;     \u002F* ink-grey *\u002F\n  --border-error: #b13d2c;\n  --border-success: #4f6045;\n  --accent: #b13d2c;             \u002F* hanko seal red — the ONLY accent *\u002F\n  --text-on-primary: #faf6ec;    \u002F* text paired onto --primary surfaces *\u002F\n  --text-on-accent: #faf6ec;     \u002F* text paired onto --accent surfaces *\u002F\n\n  \u002F* radius *\u002F\n  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 14px; --radius-pill: 999px;\n\n  \u002F* shadow (ink-bleed) *\u002F\n  --shadow-sm: 0 2px 8px rgba(28,28,28,0.10);\n  --shadow-md: 0 6px 18px rgba(28,28,28,0.14);\n\n  \u002F* spacing *\u002F\n  --spacing-gap: 24px;\n  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;\n  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n\n  \u002F* motion *\u002F\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);\n\n  \u002F* elevation\u002Fstacking *\u002F\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n\n  \u002F* typography *\u002F\n  --font-base: 'Shippori Mincho', 'Noto Serif JP', serif;\n  --font-display: 'Zen Old Mincho', 'Shippori Mincho', serif;\n\n  \u002F* sumi-e extended tokens *\u002F\n  --ink-grey: #8c8676;\n  --ink-wash: #3d3a33;\n  --ink-gradient: linear-gradient(160deg, #232323 0%, #5a564c 55%, transparent 100%);\n  --seal-stamp: 0 0 0 2px #b13d2c;\n}\n\n.dark {\n  \u002F* DARK — deep ink ground, cream \"ink\" *\u002F\n  --bg-primary: #191817;\n  --bg-secondary: #232220;\n  --bg-tertiary: #2b2925;\n  --text-primary: #f4efe4;\n  --text-secondary: #a89f8b;\n  --primary: #f4efe4;            \u002F* primary button inverts to cream ink *\u002F\n  --secondary: #cfc6b0;\n  --accent: #e06a52;             \u002F* brightened hanko red for dark ground *\u002F\n  --text-on-primary: #1c1c1c;\n  --text-on-accent: #1c1c1c;\n  --text-error: #e06a52;\n  --border-error: #e06a52;\n  --text-success: #9db08c;\n  --border-success: #9db08c;\n  --border-default: #75705f;\n  --ink-grey: #75705f;\n  --ink-wash: #a89f8b;\n  --ink-gradient: linear-gradient(160deg, #f4efe4 0%, #a89f8b 55%, transparent 100%);\n  --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);\n  --shadow-md: 0 6px 18px rgba(0,0,0,0.55);\n}\n```\n\n* **Contrast Pairing (mandatory in every theme):** any light background token must pair with a dark text token, and any dark background token must pair with a light text token. Never pair two lights or two darks.\n* **Light Mode Background:** never default to pure white. The page ground is `#f4efe4`; where a near-white is genuinely needed, use `#fefefe`, never `#ffffff`.\n* Redefine `--ink-gradient`, `--seal-stamp`, and both shadows inside each theme scope so bokashi washes and ink bleeds read correctly on both grounds.\n\n**1.3 Mandatory Dark Mode Support**\n\n* Implement dark tokens both under `@media (prefers-color-scheme: dark)` (as first-visit fallback) and a `.dark` class on `\u003Chtml>` (user override). Add `\u003Cmeta name=\"color-scheme\" content=\"light dark\">`.\n* Provide a **visible theme toggle** in the navigation: a button containing a Google Material Symbol (`dark_mode` \u002F `light_mode`), with correct `aria-pressed` state and an `aria-label` such as \"Toggle dark mode\".\n* Persist the user's choice in `localStorage` (key: `sumi-e-theme`); on first visit fall back to `prefers-color-scheme`. Theme switching must swap CSS variables only — **no HTML restructuring, no duplicate markup**.\n* Before considering the page finished, visually validate both modes: ink gradients, seal accent, borders, and all text must remain legible and on-theme.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n\n* Build all layout structures with Flexbox (`display: flex`).\n* **Every flex container must default to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment (e.g., stretch for equal-height pricing cards).\n* Mobile-first: all row layouts must collapse to columns on small viewports (`flex-direction: column` under an appropriate breakpoint). **No horizontal scrolling at any viewport width.**\n\n**1.5 CSS Approach & Component Classes**\n\n* Use **clean custom CSS** in `style.css` (no framework needed for this build), organized with `@layer tokens, base, layout, components, utilities;` in that order.\n* Adopt the base component classes from the reference spec — `.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge` — and extend them per the rules below. All component styling must consume the tokens from 1.2, never hard-coded hex values (the token definitions themselves excepted).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n\n* Load via Google Fonts `\u003Clink>` tags: **Shippori Mincho** (400, 500, 600, 700) bound to `--font-base`, and **Zen Old Mincho** (400, 700, 900) bound to `--font-display` for headlines. **Noto Serif JP** serves as fallback.\n* Icons: **Google Material Symbols** (choose one variant — Rounded recommended for the organic theme — and use it consistently). Load the icon stylesheet via Google Fonts link.\n* **Inline SVGs and local icon files are forbidden.** Every icon is a Material Symbol glyph or a styled text glyph.\n* The *hanko* seal element must be built from CSS only: a small red square (filled `--accent` or outlined via `--seal-stamp`) containing a cream\u002Fink text glyph (e.g., the kanji 印) or a Material Symbol, using `--text-on-accent` for its glyph color.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (` .btn`, `.btn--primary`, `.btn--danger`)**\n\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` with `min-height: 44px` (touch target). Serif font per `--font-base`, `cursor: pointer`, transitions on `box-shadow`, `border-color`, and `transform` using `var(--transition-normal) var(--ease-standard)`.\n* **Hover:** ink-bleed shadow shift (`--shadow-sm` → `--shadow-md`) and border darkening toward `--primary`.\n* **Focus:** distinct `:focus-visible` ring using `outline: 2px solid var(--accent); outline-offset: 3px;` for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n* **Loading:** a `.is-loading` state that disables interaction (prevents double-clicks), swaps the label for a **CSS-only spinner** (animated border ring in `--text-on-primary`), and preserves the button's exact dimensions — no layout shift.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no shadow.\n* **Success\u002FError:** temporary `.is-success` \u002F `.is-error` feedback states driven by `--text-success` \u002F `--text-error`, always paired with a Material Symbol (`check_circle` \u002F `error`) so state is never color-only.\n* **Primary variant:** background blends `--ink-gradient` over `--primary` with `color: var(--text-on-primary)` — this pairing must invert correctly in dark mode via the tokens.\n* **Danger variant:** `.btn--danger` styled from `--text-error` \u002F `--border-error`, visually distinct in **both** light and dark themes.\n\n**2.2 Card Component (`.card`)**\n\n* **Default:** flexible Flexbox layout (`align-items: center` unless justified), `background: var(--bg-secondary)`, `border-radius: var(--radius-lg)`, padding from the space scale, subtle ink-bleed elevation `--shadow-sm`.\n* **Hover (interactive cards only):** `transform: translateY(-2px)` plus shadow shift to `--shadow-md`.\n* **Focus-within:** card border\u002Foutline highlights when a child link or button receives focus.\n* **Loading (Skeleton):** a `.card--skeleton` variant with a CSS shimmer animation (gradient sweep) sized to the card's real content blocks to prevent layout jumps.\n* **Empty State:** a structured fallback layout with a Google Material Symbol and clear guidance text, available as `.card--empty`.\n\n**2.3 Form & Input (`.input`, `.input-group`)**\n\n* **Structure:** a Flex container (`.input-group`) wrapping a `\u003Clabel>`, the input, and a **dedicated error\u002Fsuccess feedback container** (`\u003Cp>` with `aria-live=\"polite\"`).\n* **States, all class-driven:** Empty, Focused (2px bottom border in `--primary` per the reference underline style), Filled, Valid (`--border-success` + `check` Material Symbol), Invalid (`--border-error`, error text in `--text-error`, `error` icon — never color alone), Disabled, Read-only.\n* Inputs use the reference spec's underline aesthetic: transparent background, no border except a 1px `--border-default` bottom border, `border-radius: 0`.\n\n**2.4 FAQ Accordion & Modal\u002FPopup**\n\n* **FAQ Accordion:** prefer native `\u003Cdetails>` \u002F `\u003Csummary>` for accessibility. Style with BEM classes; the summary shows a rotating Material Symbol (`expand_more`) and a clear underline hover state. If a custom button-based accordion is used instead, it must implement `aria-expanded`, `aria-controls`, full keyboard operability, and animated open\u002Fclose via CSS transitions.\n* **Modal (only if you implement one, e.g., a pricing details or newsletter confirmation dialog):** states for Opening, Open, Loading, Success\u002FError, and Closing — all animated via CSS transitions. Centered Flex overlay (`align-items: center`), backdrop with blur, close button using a Material Symbol (`close`), keyboard **focus trapping**, closure via `Esc` and overlay click, and `role=\"dialog\"` with `aria-modal=\"true\"` and an accessible name.\n\n---\n\n## 3. CORE UX, MICRO-INTERACTIONS & SUMI-E ART DIRECTION\n\n**3.1 Global UX Rules**\n\n* **Responsive by default:** fluid type via `clamp()`, responsive breakpoints, zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; entrance reveals via CSS classes toggled by an IntersectionObserver in `script.js`. Everything must respect `prefers-reduced-motion: reduce` (all transitions\u002Fanimations disabled).\n* **Accessibility:** AA contrast in both modes; never rely on color alone; semantic HTML5 elements; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions** (if any appear) must be visually distinct in both themes.\n\n**3.2 Sumi-e Visual Direction (CSS-only — no external images, no base64 assets)**\n\n* **Bokashi gradients:** grade a single ink value from wet to dry using layered `linear-gradient` \u002F `radial-gradient` backgrounds built from `--primary`, `--ink-wash`, and transparency — the signature move, repeated on the hero panel, primary buttons, and section dividers.\n* **Ink-bleed edges:** soft `box-shadow` bleeds and `filter: blur()` on decorative pseudo-elements to simulate ink soaking into paper.\n* **Brush-stroke texture:** suggest texture through layered gradients and irregular border radii on decorative elements — organic, never geometrically uniform.\n* **Ma (negative space):** deliberate emptiness is a compositional element. Section padding of at least `var(--space-24)`; the hero must retain roughly 30% empty ground; resist filling every region.\n* **Asymmetry:** offset compositions (e.g., a 60\u002F40 hero split, staggered feature cards, off-center seal placement). Avoid perfectly centered, symmetric stacks except where the design explicitly calls for calm (e.g., Final CTA).\n* **Effects:** employ shadow and blur as stated above; keep motion restrained and meditative — slow fades and gentle lifts, never bouncy easing.\n\n**3.3 The Hanko Seal Accent Discipline**\n\n* Red (`--accent`) is the **single** accent color and must be used sparingly: the hanko seal element, the `.badge`, focus rings, error states, and the featured pricing marker. Everything else stays monochrome ink-on-paper. Never introduce a second accent hue.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n**4.1 File Structure**\n\n* Three separate files: `index.html`, `style.css`, `script.js`. The HTML references exactly **one** `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no other inline `\u003Cscript>` blocks. All Google Fonts\u002FMaterial Symbols links live in `\u003Chead>`.\n* `script.js` contains only: theme toggle + persistence, IntersectionObserver reveals, FAQ behavior (if not native `\u003Cdetails>`), and form validation\u002Ffeedback wiring. No libraries, no build step.\n\n**4.2 Naming Convention**\n\n* **BEM only**, consistently across the entire deliverable: `block__element--modifier` (e.g., `.hero__title`, `.pricing__card--featured`, `.btn--primary`). Never mix conventions; never invent classes for elements that don't exist.\n\n**4.3 Copy Rules**\n\n* Write real, theme-appropriate English copy for every section, consistent with your chosen product concept. Placeholders are permitted only where content was genuinely left unspecified by this spec — and there are almost none: invent coherent names, testimonials, prices, and FAQ answers in the Sumi-e voice (calm, spare, considered).\n\n---\n\n## 5. SECTION-BY-SECTION REQUIREMENTS\n\n**5.1 Navigation (`header` \u002F `.nav`)**\n\nSlim sticky bar per the reference `.nav` spec: Flex row (`align-items: center`), wordmark in `--font-display`, anchor links to each section, the **theme toggle** (rule 1.3), and a `.btn--primary` CTA. Collapses to a mobile-friendly layout (wrap or column) without horizontal scroll.\n\n**5.2 Hero**\n\nAsymmetric two-part composition (content offset left or right, ~60\u002F40). Display headline in `--font-display` at `--text-5xl` (fluid via `clamp()`), one short subheadline in `--text-secondary`, primary + secondary CTAs, a bokashi ink-wash backdrop (CSS gradients + blurred bleed pseudo-elements), one **hanko seal** placed asymmetrically in the negative space, and a `.badge` announcing the concept in one phrase. Generous *ma* around all content.\n\n**5.3 Features — 3 `.card`s**\n\nEach card: Material Symbol icon, title, two-line description. Staggered\u002Fasymmetric arrangement on desktop, stacked column on mobile. Hover lift + shadow shift; `:focus-within` highlight; define the `.card--skeleton` shimmer in CSS.\n\n**5.4 How It Works — 3 steps**\n\nNumbered 01 \u002F 02 \u002F 03 in `--font-display`, connected by a dashed ink line (CSS border), each step with a Material Symbol and short copy. Asymmetric vertical offsets encouraged on desktop.\n\n**5.5 Testimonials**\n\n3 quote `.card`s: quotation glyph or Material Symbol (`format_quote`), quote, name, role. Circular ink-wash avatar built in CSS (initials in `--font-display` on a `--bg-tertiary` circle) — no images.\n\n**5.6 Pricing — 3 tiers**\n\nCards with tier name, price, feature list (Material Symbol `check` per item), and a CTA. The featured tier uses `.pricing__card--featured`: heavier ink border or bokashi panel, a `.badge` reading e.g. \"Most chosen\", **and** a text label — never color alone — plus the hanko seal as its marker. Featured CTA is `.btn--primary`; others are `.btn`.\n\n**5.7 FAQ**\n\n4–6 items per rule 2.4. Underline-style summaries matching the `.input` aesthetic; smooth height animation; fully keyboard operable.\n\n**5.8 Final CTA**\n\nA calm, centered bokashi panel (the one sanctioned symmetric moment): display headline, one line of copy, and an email capture `.input-group` (label, underline input, `.btn--primary` submit). The submit button must implement the **loading** spinner state, then a temporary success state with `check_circle` icon and an `aria-live` confirmation message; invalid email shows the error state with icon and message.\n\n**5.9 Footer**\n\nSecondary links grouped (Product, Company, Resources), each a real in-page anchor or clearly-labeled `href=\"#\"` placeholder; theme-appropriate muted styling in `--text-secondary`; small hanko seal; copyright line. Links show visible hover\u002Ffocus feedback.\n\n---\n\n## 6. ACCEPTANCE CHECKLIST (verify before delivering)\n\n* Zero `style=\"...\"` attributes; zero inline SVGs; zero inline scripts beyond the single deferred `script.js`.\n* All tokens from 1.2 defined in `:root` and `.dark`; toggle persists via `localStorage`; `aria-pressed`\u002F`aria-label` correct.\n* Every flex container defaults to `align-items: center` or documents its justified exception.\n* All button states (hover, focus-visible, active, loading, disabled, success, error) implemented and dimension-stable.\n* No horizontal scroll from 320px up; rows collapse to columns on mobile.\n* `prefers-reduced-motion` disables all animation.\n* Both light and dark modes validated: AA contrast everywhere, red accent legible, bokashi gradients intact.\n* BEM naming consistent; all copy real English; complete on the first attempt.\n",1791954988159]