# Master Design Prompt: Kinetic Rounded-Rectangle Bento Grid & 3D Clay Aesthetic

## Role & Objective
Build a single-file, interactive HTML/CSS/JS website for **[BRAND NAME / TOPIC]**. Use a **"Playful 3D Clay-Character & Kinetic Morphing Bento-Box"** aesthetic with strict rounded-rectangle geometry and a non-overlapping grid architecture.

## 1. Outer Chassis & Connected Navigation Bar
* **Viewport & Chassis:** Center a wide matte-black bento container (`#0B0A0F`, `max-width: 1460px`, `border-radius: 34px`, `padding: 14px`) inside a soft pastel-lilac page background (`#EAE6F8`).
* **Connected Squircle Navigation:** Top header bar with dark matte rounded-rectangle buttons (`border-radius: 14px`, `#14131B`) joined by thin horizontal connector bridges (`width: 14px`, `height: 10px`). Style the active nav item in vibrant golden-yellow (`#FFD24C`) with bold black text.
* **Strict Geometry Rule:** Use rounded rectangles (`border-radius: 6px` to `26px`) for every UI element, button, badge, frame, and swatch. Do not use circles (`50%`) or full pills (`9999px`).

## 2. Smooth 60fps JS Grid-Track Morphing & Strict Anti-Overlap Rules
* **Flush, Non-Overlapping Bento Tiles:** Keep all bento cards completely flat, strictly contained, and flush inside their assigned grid cells with `10px` matte-black gutters (`#0B0A0F`) separating every adjacent box.
* **Strict Anti-Collision & Containment Rules:**
  * **Zero Card Overlap:** Bento boxes must never overlap, collide, or bleed into neighboring cells under any circumstances.
  * **Cell Boundary Enforcement:** Apply `min-width: 0`, `min-height: 0`, `overflow: hidden`, and `box-sizing: border-box` to every grid track, sub-grid, and bento tile so internal content cannot force a track wider than its allocated `fr` or `px` share.
  * **Non-Overlapping Grid Spans:** Explicitly assign non-intersecting `grid-column` and `grid-row` coordinates for all child tiles, and never apply negative margins, outside-of-cell `position: absolute`, `transform: scale()`, or `transform: translate()` on any bento container.
* **Clamped `requestAnimationFrame` Track Engine:** Animate `grid-template-columns` and `grid-template-rows` across the master 3-column grid and nested sub-grids using a single JavaScript `requestAnimationFrame` sinusoidal phase loop (`Math.sin`) updating CSS custom properties (`fr` and `px` values) every frame. Clamp all sinusoidal modulation amplitudes within safe minimum and maximum bounds so adjacent tracks shift fluidly while preserving the exact `10px` gutter separation at all times.

## 3. Master Bento Layout & Key Modules
* **Left Column (Headline & Sliced Avatar Deck):**
  * **Top Card:** Solid off-white surface (`#F8F7FC`, no background stripes) with stacked ultra-condensed uppercase display type (`Anton` or `Impact`, `#331B5E`) aligned left, paired with a pastel right-angle arrow and rotating geometric icon on the right.
  * **Bottom Deck:** A vertical dark rounded-rectangle button (`writing-mode: vertical-rl`) beside 3 horizontally sliced rounded-rectangle character portrait panels (`border-radius: 18px`) in a flex row (`gap: 10px`, `min-width: 0`) that smoothly expand in flex-grow width on hover without overlapping adjacent slices.
* **Center Column (3-Tile Split-Frame 3D Clay Character):**
  * **Top Swipe Banner:** Light lavender bar (`#DCD5F8`) with a horizontal line, centered callout text, and a long right arrow.
  * **Split-Frame Character Matrix:** A 2x2 pastel-lilac sub-grid (`#C9BEF7`, `gap: 10px`) where a single oversized 3D vinyl/clay character illustration (with cursor-tracking eyes, textured knitwear, crossbody tag, and beverage tumbler) spans seamlessly across three separate, non-overlapping bento tiles (`overflow: hidden`) divided by the black grid gutters. Synchronize the lower tile's internal vertical SVG offset (`--char-torso-offset`) inside the `requestAnimationFrame` loop so the character artwork aligns across the `10px` gutter without the tiles themselves ever touching or overlapping.
  * **Metric Frame & Colorway Dock:** Place a thin rounded-rectangle callout border (`border-radius: 26px`) inside the upper-right tile, and a white rounded-rectangle dock (`border-radius: 14px`) anchored cleanly inside the bottom-right tile containing 4 interactive squircle color swatches (`border-radius: 10px`) that live-recolor the character and tiles.
* **Right Column (Secondary Character Stack):**
  * Two stacked vertical cards separated by a `10px` gutter: a dark slate card (`#2B2A33`) on top and a vibrant sky-blue CTA card (`#72CBE8`) on the bottom, each featuring secondary 3D clay characters strictly clipped within their respective card bounds.
* **Bottom Marquee Ribbon:** A full-width golden-yellow (`#FFD24C`, `border-radius: 14px`) infinite horizontal scrolling ticker separated by small black square nodes (`border-radius: 3px`).