[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-380-Resume-Journey-Oregon-Trail":3},"# SYSTEM PROMPT — CODING AGENT BRIEF\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a **complete, production-ready landing page on the first attempt**. No partial code, no stubs, no TODOs.\n\n**Project Brief:**\n- **Theme:** \"Resume Journey: Oregon Trail\" — a personal resume\u002Fcareer landing page styled as a 1980s–90s educational retro game. The visitor travels a winding pixel trail where each section is a career milestone (\"trail stop\").\n- **Style Keywords:** Oregon Trail, retro game, pixel art, career journey, timeline, milestones, 8-bit, adventure, resume, path, parallax landscape, terminal typography.\n- **Sections (in order):** Header (global chrome), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n- **Dual Mode:** \"Day on the Trail\" (light) \u002F \"Night on the Trail\" (dark) — both fully designed.\n- All user-facing copy must be written in **English**.\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`. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n- All design properties, layout rules, and states are targeted exclusively via class or ID selectors.\n- HTML stays clean, semantic, and agnostic of visual styling — reskinning the page must require editing only `style.css`.\n- JavaScript may never inject inline styles. Where dynamic values are unavoidable (wagon position, parallax offset), JS must only set CSS custom properties (e.g., `element.style.setProperty('--wagon-y', ...)`) while the actual `transform` is defined in CSS consuming that variable.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (Day mode) and override under `html.dark` (Night mode). Derived tints of the palette are permitted; pure white is not.\n\n| Token | Day (Light) | Night (Dark) | Notes |\n|---|---|---|---|\n| `--primary` | `#8B4513` Trail Brown | `#FF8C00` Campfire Orange | Button\u002FCTA fill; paired text `#FEFEFE` (light) \u002F `#1A1A1A` (dark) |\n| `--secondary` | `#556B2F` Prairie Green | `#6B8E3D` Lantern Green | Paired text `#FEFEFE` \u002F `#1A1A1A` |\n| `--bg-primary` | `#F2E8D5` sun-bleached parchment (Wagon Tan tint) | `#1A1A1A` Night Black | Never pure white; use `#FEFEFE` only where a near-white is required |\n| `--bg-secondary` | `#D2B48C` Wagon Tan | `#26211B` charred timber | Cards, panels, header |\n| `--text-primary` | `#1A1A1A` | `#F2E8D5` | |\n| `--text-secondary` | `#6B4423` deep trail brown | `#D2B48C` | |\n| `--text-success` | `#556B2F` | `#9CC069` | |\n| `--text-error` | `#C62828` Ember Red (functional addition) | `#FF7A70` | |\n| `--border-default` | `#8B4513` | `#D2B48C` lantern-edge frames | Retro frames are `3px solid var(--border-default)` |\n| `--border-success` \u002F `--border-error` | `#556B2F` \u002F `#C62828` | `#9CC069` \u002F `#FF7A70` | |\n\nTheme extension tokens (also required): `--accent: #DAA520` Dust Yellow (waypoints, focus rings, featured badge — same value both modes); `--info: #4682B4` River Blue (light) \u002F `#7EB3D9` (dark) for links; `--sky: #87CEEB` (light) \u002F `#0E1420` night sky (dark) for the parallax sky layer.\n\nStructural tokens:\n- `--radius-sm: 0; --radius-md: 0; --radius-lg: 0` — the pixel aesthetic is intentionally square; **never round corners**.\n- `--shadow-sm: 2px 2px 0 #000; --shadow-md: 4px 4px 0 #000` — pixel depth (source directive `box-shadow: 4px 4px 0 #000` maps to `--shadow-md`).\n- `--spacing-gap: 1.5rem`.\n- `--transition-fast: 120ms; --transition-normal: 200ms; --ease-standard: steps(4, end)` — chunky 8-bit easing; apply consistently.\n- `--z-dropdown: 10; --z-modal: 100; --z-toast: 200;` plus `--z-header: 50`.\n- `--font-display: 'Press Start 2P'; --font-base: 'VT323'`.\n\n**Contrast pairing is mandatory in both modes:** every light background token pairs with a dark text token and vice versa. Verify ≥ 4.5:1 for text and ≥ 3:1 for borders\u002FUI components in Day AND Night mode.\n\n**1.3 Mandatory Dark Mode Support**\n- Define Night tokens under `html.dark` **and** provide `@media (prefers-color-scheme: dark)` as the first-visit fallback.\n- Theme switching swaps variables\u002Fclasses only — **zero HTML restructuring**.\n- Persist the user's choice via `localStorage` (key: `trail-theme`), falling back to `prefers-color-scheme` on first visit.\n- Header contains a visible toggle (Material Symbols `light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` (\"Switch to night mode\" \u002F \"Switch to day mode\").\n- Set a themed `background-color` on `html` for both modes so the pre-JS first paint never flashes white.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n- Every flex container **defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., timeline stop text blocks may use `flex-start`).\n- Mobile-first: single column at base; expand to rows\u002Fgrids at `≥768px` and `≥1024px`. **No horizontal overflow at any viewport width down to 320px.** The winding trail simplifies to a straight dashed left-gutter spine below 768px.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (CDN or compiled) for layout utilities (`flex`, `items-center`, `gap-*`, responsive prefixes), plus custom CSS in `style.css` organized with `@layer` for all pixel-art components.\n- Every custom value must reference a CSS variable. Reusable semantic classes required: `.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`, `.card`, `.input-group`, `.stat-bar`, `.waypoint`, `.dialog-box`.\n- **BEM naming only** — never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Google Fonts** via `\u003Clink>`: `Press Start 2P` (headings, buttons, badges, prices — bind to `--font-display`) and `VT323` (body\u002Fterminal copy — bind to `--font-base`, base size ≥ 1.25rem for readability).\n- Icons: **Google Material Symbols** only. Suggested set: `hiking`, `flag`, `terrain`, `landscape`, `local_fire_department`, `water_drop`, `inventory_2`, `workspace_premium`, `military_tech`, `check_circle`, `error`, `close`, `menu`, `light_mode`, `dark_mode`, `mail`, `arrow_forward`, `expand_more`, `star`.\n- **Inline SVGs and local icon\u002Fimage files are forbidden.** Decorative pixel art (wagon sprite, waypoint flags, mesa silhouettes, starfield) must be CSS-drawn: single-element box-shadow pixel grids or layered CSS gradients — no SVG, no emoji, no raster files. Apply `image-rendering: pixelated` to all `img` elements and sprite containers.\n- **Exception clause:** the source direction permits \"clip-path or SVG path\" for the winding trail — implement the **CSS clip-path \u002F dashed-border \u002F pseudo-element option only**; inline SVG remains forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target; `font-family: var(--font-display)` at ~0.75rem; `3px solid var(--border-default)`; `box-shadow: var(--shadow-md)`; square corners.\n- **Hover:** brightness shift + pixel shadow grows (e.g., 4px→6px offset) + `cursor: pointer`.\n- **Focus-visible:** distinct pixel focus ring — `outline: 3px solid var(--accent); outline-offset: 3px`. Never remove it.\n- **Active\u002FPressed:** `transform: scale(0.97)` (may be accompanied by a shadow-collapse-to-zero pixel-press effect).\n- **Loading (`.is-loading`):** blocks interaction and double-clicks (`pointer-events: none` + `aria-disabled=\"true\"` + `aria-busy=\"true\"`); renders a CSS pixel-block spinner (stepped `steps()` animation) or animated Material Symbol; **button dimensions must not change** — reserve spinner space.\n- **Disabled (`[disabled]` \u002F `.is-disabled`):** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback styles driven by `--text-success` \u002F `--text-error`, always with icon + text (never color-only).\n\n**2.2 Card Component (`.card`)**\n- **Default:** flexible Flexbox layout, `background: var(--bg-secondary)`, `3px solid var(--border-default)`, `box-shadow: var(--shadow-md)`.\n- **Hover:** elevation shift (shadow offset grows) or subtle `transform: translateY(-2px)`.\n- **Focus-within:** border-color shifts to `var(--accent)` when a child link\u002Fbutton receives focus.\n- **Loading (`.card--skeleton`):** shimmer animation via animated `repeating-linear-gradient`, with fixed min-heights to prevent layout jumps. Apply to testimonial cards during a simulated initial load (~600ms, `aria-busy=\"true\"`), then reveal.\n- **Empty state (`.card--empty`):** structured fallback — centered flex, Material Symbol inside a pixel-framed slot, clear guidance text (e.g., locked inventory slots: \"?\" icon + \"Undiscovered milestone — keep scrolling the trail\").\n\n**2.3 Form & Input Requirements (Final CTA \"telegraph\" form)**\n- `.input-group` is a flex container wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error feedback element (`\u003Cp class=\"input-group__error\">`).\n- **States:** Empty, Focused (accent ring), Filled, Valid (`--border-success` + `check_circle` icon), Invalid (`--border-error` + red text + `error` icon + message in the error container), Disabled, Read-only.\n- Validate email on submit; announce errors and success via an `aria-live=\"polite\"` region. Never rely on color alone.\n\n**2.4 Modal \u002F Popup Requirements (conditional)**\nNo modal is required by the requested sections — prefer inline feedback. If you introduce any overlay (e.g., a plan-confirmation dialog), it must: animate Opening\u002FOpen\u002FClosing via CSS transitions; center with a flex container (`align-items: center`); dim the backdrop; provide a Google Icon close button; trap keyboard focus; close via `Esc` and backdrop click; and include Loading and Success\u002FError states.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, responsive breakpoints, zero horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes. Under `@media (prefers-reduced-motion: reduce)`: disable parallax, the marching trail animation, wagon travel, skeleton shimmer, blinking cursor, and smooth scrolling — keep instant state changes only.\n- **Accessibility (a11y):** sufficient contrast in Day and Night modes; never communicate state by color alone; semantic HTML5 (`header`, `nav`, `main`, `section`, `article`, `footer`, one `h1`, logical heading order); correct ARIA on custom widgets (nav toggle `aria-expanded`, theme toggle `aria-pressed`, stat bars exposed as `role=\"progressbar\"` with `aria-valuenow` or visible text labels, `aria-live` regions for form\u002Floading feedback); logical DOM\u002Ffocus order; full keyboard operability (FAQ via native `\u003Cdetails>\u002F\u003Csummary>`; `Escape` closes the mobile nav); a skip-to-content link as the first focusable element.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** `.btn-danger` must be defined and visually distinct in both themes (e.g., a footer \"Reset trail progress\" control, if included).\n\n---\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. The only inline `\u003Cscript>` permitted is the single deferred entry-point reference to `script.js`. Zero `style=\"...\"` attributes.\n- **Naming:** BEM strictly and consistently across the entire deliverable.\n- **Copy:** the user supplied no copy, so author realistic, themed English copy for a sample persona (e.g., \"Avery Wagoner — Senior Frontend Engineer\") with plausible dates, milestones, quotes, and prices. **Lorem ipsum is forbidden.** Placeholders are allowed only where content is genuinely unknowable.\n- **Completeness:** all requested sections plus header, trail spine, and footer delivered fully functional on the first attempt.\n\n---\n\n## 5. PAGE STRUCTURE & SECTION-BY-SECTION DIRECTIONS\n\n**5.1 Header (global chrome):** sticky, `--bg-secondary`, 3px bottom border. Logo \"RESUME TRAIL\" in Press Start 2P; nav links (Supplies \u002F The Trail \u002F Travelers \u002F Depot \u002F Guide); theme toggle (per 1.3); mobile hamburger (`menu` icon, `aria-expanded`, `Escape` closes, focus returns to the toggle).\n\n**5.2 The Winding Trail Spine:** a decorative pixel trail runs down the entire page connecting every section as milestone stops. Build with CSS only — per-section pseudo-element connectors using dashed 4px borders \u002F `repeating-linear-gradient` segments with alternating horizontal offsets to wind left and right; waypoint markers are pixel-framed diamonds with the `flag` Material Symbol at each section start. `@keyframes scroll-trail` animates the dash `background-position` for a \"traveling\" feel. Below 768px: straight dashed spine in the left gutter. Reduced motion: static dashes.\n\n**5.3 Traveling Wagon & Parallax:** one CSS-drawn pixel wagon sprite (box-shadow pixel grid) travels along the gutter based on scroll progress (JS sets `--wagon-y`; CSS applies the transform; rAF-throttled; hidden below 768px; parked at the first waypoint under reduced motion). Parallax landscape layers in the hero: sky gradient (`--sky`; Night adds a CSS radial-gradient starfield), distant mesa\u002Fmountain silhouettes via `clip-path` polygons in `--secondary`\u002F`--primary` tones, foreground prairie strip. Transform-based parallax, max ±20px, disabled under reduced motion and simplified on coarse pointers.\n\n**5.4 Hero:** full-height parallax scene with the pixel wagon; `h1` in Press Start 2P (e.g., \"FORD THE RIVER. SHIP THE PRODUCT.\"); a VT323 terminal sub-panel with blinking cursor (CSS blink; static under reduced motion); primary CTA \"START THE JOURNEY\" + secondary \"VIEW SUPPLIES\" (smooth-scroll); retro HUD strip: \"CAREER HEALTH\" 8-bit bar (labeled, e.g., 92% — never color-only), an inventory slot row of achievement Material Symbols in pixel slots including 1–2 locked\u002Fempty slots (empty-state pattern), and a fun stat (\"MILES TRAVELED: 12 YEARS\").\n\n**5.5 Features — \"TRAIL SUPPLIES\" (3 cards):** each pixel card has a Material Symbol in a pixel-framed slot, Press Start 2P title, VT323 description, and one 8-bit stat bar (segmented fill via `repeating-linear-gradient`, labeled, animating to its value on scroll into view). All states per 2.2.\n\n**5.6 How It Works — \"THE TRAIL\" (3 steps):** three milestone stops along the winding trail, each a trail-stop card: pixel flag waypoint, date badge (Press Start 2P), milestone title, description — e.g., 2016 \"Independence — First Dev Role\", 2019 \"Chimney Rock — Senior Engineer\", 2023 \"Willamette Valley — Team Lead\". Connected by animated trail segments; an 8-bit progress indicator advances 33% → 66% → 100% on scroll. Scroll-reveal via IntersectionObserver (reduced motion: content immediately visible).\n\n**5.7 Testimonials — \"FELLOW TRAVELERS\":** three NPC dialogue boxes — retro speech-box styling (pixel border, Press Start 2P name plate, portrait slot with a Material Symbol avatar), quote in VT323. Skeleton shimmer on first load (~600ms, `aria-busy`), then reveal. One column on mobile → three columns on desktop.\n\n**5.8 Pricing — \"SUPPLY DEPOT\" (3 tiers):** pixel crate cards \"GREENHORN\", \"WAGON MASTER\" (featured: `--accent` frame + \"MOST POPULAR\" badge + slight elevation), \"TRAILBLAZER\". Each: price in Press Start 2P, feature list with `check_circle` icons, `.btn` CTA. The featured tier must be distinct in both modes.\n\n**5.9 FAQ — \"TRAIL GUIDE\":** 5–6 native `\u003Cdetails>\u002F\u003Csummary>` entries styled as ledger rows: pixel frame, `expand_more` icon rotating via CSS, Press Start 2P question, VT323 answer. Natively keyboard accessible; first entry open by default.\n\n**5.10 Final CTA — \"WESTWARD, HO!\":** terminal-style departure panel with the email signup form per 2.3 and the full button state machine: default → loading (spinner, double-submit prevented) → success (button success state + inline `check_circle` message, `aria-live`) or invalid (error border, icon, message). Inline feedback only — no modal.\n\n**5.11 Footer — \"CREDITS\":** Oregon-Trail-style credits screen: secondary links (About, Journal, Contact, Privacy, Terms), social icon links (Material Symbols), copyright line, and an optional easter-egg line (\"0 travelers lost to dysentery this season\").\n\n---\n\n## 6. SCRIPT.JS SCOPE (single deferred file)\n\nTheme init\u002Ftoggle\u002Fpersistence; mobile nav toggle; IntersectionObserver (reveals, stat-bar animation, waypoint activation); scroll-driven wagon and parallax (rAF-throttled, reduced-motion guarded, custom-property technique per 1.1); FAQ needs no JS (native `\u003Cdetails>`); form validation plus simulated submit state machine. JS toggles classes, ARIA attributes, and custom properties only — never inline styles. Keep the script lean and commented.\n\n---\n\n## 7. ACCEPTANCE CHECKLIST (self-verify before delivering)\n\n- [ ] Zero `style=\"...\"` attributes; all styling in `style.css` via class\u002FID selectors.\n- [ ] Day and Night token sets complete; toggle persists via `localStorage`; `aria-pressed` correct; first visit honors `prefers-color-scheme`.\n- [ ] Every flex container defaults to `align-items: center` (exceptions commented).\n- [ ] No horizontal scroll at 320px; rows collapse to columns on mobile.\n- [ ] All button states (hover \u002F focus-visible \u002F active \u002F loading \u002F disabled \u002F success \u002F error) implemented; 44×44px minimum.\n- [ ] Card hover, focus-within, skeleton, and empty states present.\n- [ ] Form states + `aria-live` feedback; FAQ fully keyboard accessible.\n- [ ] `prefers-reduced-motion` disables parallax, trail animation, wagon travel, shimmer, and blink.\n- [ ] Contrast ≥ 4.5:1 (text) and ≥ 3:1 (UI) in both modes; no color-only state communication.\n- [ ] Google Fonts (Press Start 2P, VT323) + Material Symbols only; no inline SVG; no local icon\u002Fimage files.\n- [ ] Separate `index.html` \u002F `style.css` \u002F `script.js`; single deferred script tag; BEM naming only.\n- [ ] Realistic English copy throughout; no lorem ipsum.\n- [ ] All requested sections plus header, winding trail spine, and footer delivered complete on the first attempt.\n",1791954985767]