[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-065-Sumi-e-Tech-Scroll":3},"# System Prompt: Build \"Sumi-e Tech Scroll\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Sumi-e Tech Scroll** — a Traditional\u002FModern fusion aesthetic combining East Asian sumi-e ink wash painting with isometric technical diagrams, aged rice paper grain, ink bleed effects, and a bold red seal accent.\n\n**Sections Required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling must live in a dedicated `style.css` file. The `style=\"...\"` attribute is **forbidden** in HTML.\n* Target all design properties, layout rules, and states exclusively via class or ID selectors.\n* HTML must remain clean, semantic, and style-agnostic — changing the site's look must require editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root` (and the dark theme class) using CSS variables:\n* **Colors:** `--primary: #8A1C15` (red seal accent), `--secondary: #808080` (wash grey), `--bg-primary: #F4F1E8` (paper cream), `--bg-secondary`, `--text-primary: #0D0D0D`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, plus `--ink-black: #000000` for sumi-e ink elements.\n* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa, in both themes.\n* **Light Mode Background:** Use `#F4F1E8` (paper cream) as the page background — never pure white; use `#fefefe` only if a near-white surface is genuinely needed.\n* **Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`. Shadows should be soft and diffuse, evoking ink bleeding into paper rather than hard drop shadows.\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode Support**\n* The source spec is light-first, but dark mode **must still be defined** as an explicit exception to the \"no dark mode\" preference: provide dark tokens under `@media (prefers-color-scheme: dark)` and a `.dark` class selector. Dark mode should evoke *night ink* — deep charcoal backgrounds (`#121212`-range, not pure black) with cream text (`#F4F1E8`) and the same red accent `#8A1C15` (verify contrast; lighten to `#B33A2E`-range if contrast fails).\n* Theme switching must work purely through CSS variable swaps — no HTML restructuring.\n* Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle control with correct `aria-pressed` and `aria-label` state.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox. Every flex container must default to `align-items: center` unless explicitly justified otherwise.\n* All layouts must be mobile-responsive out of the box: card rows, pricing tiers, and step sequences convert from row to column on small viewports. No horizontal scrolling at any breakpoint.\n\n**1.5 Framework Default**\n* Use Tailwind CSS (or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply` directives). All utility classes must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`, `.section-title`, `.ink-divider`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Text: Load **Noto Serif JP** from Google Fonts as the primary typeface, bound to `--font-base`. You may pair it with a clean sans (e.g., Noto Sans JP or Inter) bound to `--font-accent` for technical\u002Fisometric diagram labels and UI micro-copy, reinforcing the traditional\u002Ftech fusion.\n* Icons: Use Google Material Symbols\u002FIcons exclusively. Raw inline SVGs and local icon files are **forbidden**.\n* All user-facing copy must be written in **English**.\n\n---\n\n## 2. THEME-SPECIFIC VISUAL DIRECTION\n\n* **Rice Paper Grain:** Apply the texture via CSS: `background-image: url('https:\u002F\u002Fwww.transparenttextures.com\u002Fpatterns\u002Frice-paper.png')` layered over `background-color: #F4F1E8` on the body. In dark mode, keep the texture but layer it over the dark base color.\n* **Red Seal Accent:** Use `#8A1C15` as the signature accent — section markers, the hero CTA, the pricing \"recommended\" tier, and a decorative seal-style stamp element (a square red block with rounded corners containing a Material Symbol, styled purely in CSS). Never let red exceed ~10% of visual surface area; it is a seal, not a background.\n* **Ink Bleed Borders:** Use `border-left: 5px solid #8A1C15` on key content blocks (feature cards, FAQ items, section headers) as the recurring motif. Soften hard borders elsewhere with low-opacity ink-black edges.\n* **Isometric Tech Details:** Decorate the Hero and How It Works sections with CSS-drawn isometric elements (transformed grid planes, thin-line diagrams using borders and `transform: rotateX\u002FrotateY\u002FrotateZ`) suggesting technical blueprints rendered in ink wash. These must be decorative `aria-hidden` elements that never block interaction or cause overflow.\n* **Ink Wash Landscapes:** Suggest mountain\u002Flandscape silhouettes using layered CSS gradients and low-opacity ink-black shapes (no external images required; if images are used, they must be freely hosted and have descriptive `alt` text).\n* **Section Flow:** Treat the page as a vertical scroll — a hand scroll painting. Use subtle vertical ink divider lines between sections and consistent vertical rhythm via `--spacing-gap`.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons**\nStyle all states via CSS classes (`.btn`, `.btn-primary`, `.btn-outline`, `.btn-danger`):\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum touch target 44x44px. Primary buttons use the red seal accent with cream text.\n* **Hover:** Brightness\u002Fshadow shift with `cursor: pointer`.\n* **Focus:** Distinct focus ring using CSS variables (`outline` \u002F `box-shadow`) for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** Disables interaction, prevents double-clicks, renders an animated Google Icon or CSS spinner without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback states driven by `--text-success` \u002F `--text-error`.\n\n**3.2 Cards (Features, Pricing, Testimonials)**\n* **Default:** Flexible Flexbox layout with `--bg-secondary` surfaces, subtle ink borders, and soft elevation. Feature cards carry the `border-left: 5px solid #8A1C15` motif.\n* **Hover:** Elevation shift or `transform: translateY(-2px)`.\n* **Focus-within:** Card borders highlight when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Shimmer animation defined in CSS to prevent layout jumps.\n* **Empty State:** Structured fallback with a Google Icon and guidance text.\n* **Pricing:** The recommended tier must be visually distinct (red seal border, seal stamp badge) in both light and dark themes. Include per-tier CTA buttons with full state coverage.\n\n**3.3 Forms & Inputs (Final CTA \u002F newsletter capture, FAQ search if included)**\n* **States:** Empty, Focused (outline ring), Filled, Valid (success border\u002Ficon), Invalid (error border, error text, error icon), Disabled, Read-only.\n* **Structure:** Flex container wrapping a label, input field, and a dedicated error feedback container.\n\n**3.4 FAQ Accordion**\n* Build with semantic HTML (`\u003Cdetails>`\u002F`\u003Csummary>` or button + region with correct `aria-expanded` \u002F `aria-controls`). Smooth CSS height\u002Fopacity transitions, full keyboard operability, and a rotating Material Symbol chevron. Never rely on color alone to indicate open state.\n\n**3.5 Modal \u002F Popup (if any interactive element requires one)**\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX:** Centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, standard breakpoints, zero horizontal overflow.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` by disabling transforms and the shimmer\u002Fink animations.\n* **Accessibility:** Sufficient contrast in both light and dark modes. Semantic HTML5 (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cfooter>`, `\u003Cnav>`), correct ARIA roles\u002Flabels on custom widgets, logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, toasts, loading states).\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive\u002FDistinct Actions:** Any `.btn-danger` or de-emphasized action must be visually distinct in both themes.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference. No inline CSS.\n* **Naming Convention:** One consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.\n* **Copy:** Write all user-facing copy in English. Copy must be thematically coherent with the sumi-e\u002Ftech fusion (e.g., features framed as \"brushstrokes\" of engineering, steps as a scroll journey). No lorem ipsum — write real, polished marketing copy for every section.\n* **Footer:** Include secondary navigation links (About, Contact, Privacy, Terms, Social) with visible focus states and hover feedback.\n* **Output:** Generate the complete, final code immediately — all three files in full, ready to run.\n",1791954981152]