A pixel-for-pixel website clone

Rebuild https://morphowater.com/ pixel for pixel, motion and 3D included, making every asset yourself.

Context you should know: this is going into a video watched by a large audience. Your clone is put on screen next to the real site and next to other frontier models given this identical prompt, at the same viewport.

The comparison is blind. Never put your model name, your company's name, or any mention of which AI made it anywhere in what you build: not in on-screen text, credits, the page title, file names, code comments, or metadata.

**First, read the methodology.** Clone `https://github.com/per-simmons/clone-app-pat-pro-public` and read `SKILL.md` and `references/00-contract.md` before anything else, then each stage reference as you reach it. Follow its workspace layout, artifacts, verification gate and convergence loop. `scripts/assert-styles.mjs` is the gate.

Two overrides, and they win where they conflict with the repo:

- **Do not stop to check in.** You are running unattended. Run the whole pipeline start to finish without asking for approval or asking questions.
- **Use your own browser automation**, headless Playwright or Puppeteer, anywhere the repo says to use the Claude Chrome extension. Computed styles read off the live page through the CSSOM are ground truth. Screenshots and screen recordings are visual reference only, never the gate.

You have two creative tools: **Blender**, driven headless with Python scripts and rendered on a GPU render machine, and an **image generator** you call from the command line. Every raster image in your clone comes from the image generator. Every 3D model and every video loop comes from Blender or your own code.

**The graphics must be hyper-realistic and match the original exactly. This is judged strictly, side by side.** The MORPHO can must read as a real brushed-aluminum can: accurate proportions, printed label, anisotropic metal highlights, condensation where the original has it, real studio lighting and soft shadows. The coast, forest and mist footage must read as real places, with water that moves like water. Every image you generate must match the original's subject, framing, lighting and color so closely that a viewer has to look twice. No cartoon, low-poly, flat or placeholder art, no plastic-looking defaults, no "close enough" substitutes.

Requirements:

1. **Recon the whole page before writing code.** Every section top to bottom at desktop and mobile widths, the intro and "Skip the introduction", the section counter and side navigation, every hover, click and scroll-triggered state, the Blue Zones selector, the video sections, and the footer.

2. **Extract, don't guess.** Pull real computed values off the live page: type scale, exact colors, spacing, radii, borders, grid and container widths, breakpoints, easing curves and durations, font families and weights.

3. **The can and the motion are the site.** The opening can reveal, the scroll-driven transitions between the seven sections, the Blue Zones selector, the looping landscape footage and every hover must all work and feel like the original.

4. **No lifted assets.** Do not hotlink, download, or trace the original's images, video, 3D files, or fonts. Make the can in Blender or code, the footage in Blender or code, and every image with the image generator. Fonts come from an open CDN with metrics matched as closely as you can. List every substitution in the README.

5. **Rebuild it all.** Every section, every component, every interactive state, at desktop and mobile. A static skin over a site whose identity is the can and the motion is a failed clone.

6. **Prove the match.** Run `assert-styles.mjs` against your extracted tokens and iterate until there are zero failures and the project builds clean. Then compare your clone to the real site at the same viewport, desktop and mobile, section by section, and fix what your eye catches that the assertions missed, until the two are indistinguishable.

7. **Ship it runnable**, with a documented run command and a README covering what you substituted, how you made the 3D, the footage and the imagery, and your final assertion results.

8. **Depth over breadth.** If you have to choose, an opening can reveal, Pacific section and Blue Zones section that are indistinguishable from the original beat a whole page that is approximately right.

DONE when: the clone passes the style gate with zero failures, runs from a documented command, its can reveal, scroll transitions and Blue Zones selector work like the original's, and it holds up next to the real site at full screen.