# Master Design Prompt: Y2K Editorial Collage & Interactive Vector-Canvas Aesthetic

## Role & Objective
Build a single-file, interactive HTML/CSS/JS website for **[PROJECT NAME / TOPIC]**. Design the entire interface using a **"Y2K Editorial Collage meets Interactive Vector Design-Canvas"** aesthetic.

---

## 1. Outer Viewport & Environment (The Frame)
* **Background Backdrop:** The full-bleed page background must resemble a realistic outdoor photograph or rich gradient transitioning from a moody blue cloudy sky in the top half to a vibrant green grass meadow in the bottom half.
* **8-Bit Pixel Cloud Overlays:** Scatter decorative, blocky 8-bit pixel clusters (`24px` to `32px` grid squares) in baby blue (`#9BC5FF`) and pastel lavender (`#C9B3FF`) around the outer edges of the viewport so they bleed both behind and slightly over the edges of the central website container.

---

## 2. Central Artboard Container (The Canvas)
* **Artboard Box:** House the main content inside a centered, wide rectangular container (`max-width: 1200px`) with a crisp white/off-white background (`#FAF8FF`) overlaid with a subtle, fine lavender/blue graph-paper grid (`background-size: 24px 24px`).
* **Neon Bounding Box:** Frame the container with a `2px` solid or dashed bright neon lime-green border (`#59FF00`).
* **Corner Anchor Nodes:** Place solid neon-green square resize handles (`12px x 12px`, `#59FF00`) directly on all four outer corners of the container so it looks like an active, selected vector artboard.
* **Soft Ambient Graphic:** In the center of the artboard behind the main typography, place a soft, blurred pastel-lavender geometric glow (`#C9B3FF` with `filter: blur(40px)`) shaped like an inverted triangle or funnel.

---

## 3. Typography & Text-Selection Motifs
* **Top Editorial Lockup:** Top-left branding featuring a high-contrast classic serif title paired with a bold geometric sans-serif co-title separated by a forward slash (e.g., `PRIMARY / STUDIO`).
* **Blue Text-Selection Highlight Box:** Above the main headline, style the kicker text in clean white uppercase sans-serif (`letter-spacing: 0.08em`) inside a sky-blue highlight rectangle (`#8AB8FE`). Add `2px` vertical blue selection bars on the left and right edges, complete with circular blue drag-handle nodes (`14px` diameter) attached to the top-left and bottom-right corners (mimicking digital text-selection handles).
* **Mixed-Typography Hero Stack:**
  1. **Main Headline:** Massive, tight-tracked, lowercase geometric sans-serif (`font-weight: 700`, `letter-spacing: -0.04em`, color `#111111`).
  2. **Neon Superscript Tag:** Attach a rectangular bright lime-green badge (`#7CFF00`) with regular black sans-serif text in parentheses—like `(part II)` or `(v2.0)`—floating at the top-right shoulder of the headline.
  3. **Expressive Script Sub-Headline:** Directly underneath, contrast the geometric type with a large, flowing italic calligraphy/serif script for the hook question (e.g., *"What now?"*).

---

## 4. Cutout Stickers & Collage Micro-Scene
* **Floating Portrait Cutouts:** Scatter 4 to 5 sharp-edged, magazine-style cutout portraits and objects around the headline. Give them a clean white sticker outline or crisp drop-shadow, and make them **interactive and draggable** via mouse/touch.
* **Bottom-Right Micro-Collage:** Create a small cluster of full-body editorial/product cutouts paired with tiny pill-shaped purple (`#9B6BFF`) speech bubbles and tags in bold white sans-serif text (e.g., `SALE! SALE! SALE!`, `#FOMO`).

---

## 5. Minimalist Corner UI Controls
* **Top-Right:** A solid black circular button (`44px x 44px`) with white hamburger menu lines inside.
* **Bottom-Right:** A transparent circular button (`44px x 44px`) with a `1.5px` solid black border containing a share/network node icon.