Build a single-file HTML landing page for "Cosmos", a fictional peptide skincare brand that lists every peptide at its exact dose. The look is a quiet premium beauty store: warm cream ground, near-black ink, Wix Madefor type set tight, IBM Plex Mono for every number, glass pills, soft studio shadows and one amber accent. Every image on the page is an SVG drawn from code; there are no photos. Fictional brand, products, prices and journal issues; the peptide INCI names are real ingredients but doses and claims are illustrative.

STACK
- GSAP 3.12.5 and ScrollTrigger from cdnjs, then one inline script. Google Fonts: Wix Madefor Display 500-800 (headlines, buttons), Wix Madefor Text 400-600 (body), IBM Plex Mono 400-500 (eyebrows, doses, specs).
- Every visual is generated: a MODULES map of functions (u, r) => SVG markup, where u is a per-instance id prefix and r a seeded mulberry32 random. moduleSVG(name, seed, hue, viewBox) wraps it in an <svg preserveAspectRatio="xMidYMid slice">. Any element with data-module is filled on load.

THE SYSTEM
- Tokens on :root: bg #f4f2ec, bg-soft #faf8f1, surface #fff, ink #0a0a0a, ink-2 #3d3b36, muted #6f6c64, line #dedad0, amber #a85a22, glass rgba(190,184,170,.45) with a 45% white border. Safe-area gutters max(24px, env(safe-area-inset-*)), 16px under 720px.
- body::before is a fixed layer of three soft radial washes (white centre, peach lower-left, blue upper-right).
- Headlines Wix Madefor Display, letter-spacing -0.025em, line-height 1.02, text-wrap balance. Pill buttons 48px: a black primary, a 1px ghost. Mono eyebrows 12px, 0.08em, uppercase.

SECTIONS
1. nav: sticky, a 60px glass pill (72% cream, blur 18px), the logo (a ringed planet mark + "Cosmos" at 800), four links, a black "Bag" pill with a white mono count badge that pops (GSAP back.out) when items are added.
2. hero: a two-column head ("Peptides, by the percent." at clamp(48px, 8vw, 112px)/800, an intro and two buttons), then a 16:9 stage (max 760px tall):
   - a 540px white sphere with overflow hidden and an inner vignette, holding a rotated 4x4 grid of 16 small generative tiles (serum bottle, peptide bead chain, orbit, jar, faceted crystal, linen bag, kit, tube, blurred blob, drop, arch) at inset -8%. GSAP turns the grid 360deg over 200s; clicking the sphere spins it 90deg, pulses the tiles and reshuffles them with new seeds.
   - a 620x78 glass search bar centred on top: white icon, a blinking 1px caret divider, a readonly input whose placeholder types and erases a cycle of queries ("Copper peptides", "Matrixyl for firmness", "Argireline for lines"...), and a 60px white round button with a 3x2 dot grid that spins and pulses the cards. Clicking the input scrolls to the formulas.
   - six float cards around the sphere (rotated -4 to 4deg, 14px radius, a white 4px halo, a glass sheen and a bottom fade), each a cropped product render (data-vb is the viewBox) with a "Name | dose" mono label. They bob, follow the mouse with parallax, scale on hover, spin and re-render on click, and scatter outward as the stage scrolls (ScrollTrigger scrub).
   - Intro timeline: the sphere scales and rotates in, tiles pop from the centre, the bar stretches in, the cards land at random. .js-ready hides these only when GSAP loaded and motion is allowed.
3. ticker: a mono marquee of peptide INCI names, each dose in amber, duplicated group with aria-hidden, 50s loop.
4. how-it-works: three steps with a 1px ink top rule, mono numbers 01-03, 26px titles.
5. formulas: "Six peptide formulas. No filler." Filter chips (All, Fine lines, Firmness, Barrier, Recovery; aria-pressed) with a live mono count and an empty state. Six product cards in a 3/2/1 grid: a 26px-radius card with a 10px inset media plate (4:4.2, 18px radius, studio light overlay) holding an animated render, a mono "No. 0X" index, a glass class pill (Carrier, Signal, Neuropeptide...), a big white dose ("10%" + mono label); then name and price, a one-line description, a three-column spec ledger (Peptide / pH / Size) with hairlines, concern tags and an "Add" pill whose + icon turns 90deg on hover and swaps to a check on amber for 1.6s.
6. dose-lab: "Slide the vial. Meet the formula." A 30px-radius deep-teal slab (radial #2c6a8c → #1B4965 → #0F2939, cream #FFFCF9 ink, 8% noise): on the left an 800x420 SVG scale from 0 to 10% with ticks, a cream rail, a progress line and five coloured stop dots (1% GHK-Cu, 2% Tripeptide-8, 3% Matrixyl 3000, 5% Matrixyl, 10% Argireline); a big graduated test-tube vial rides the rail as a role="slider" handle. Dragging it moves a spring follower (velocity += (target - x) * .3, then *= .82) so the tube swings, the liquid tilts with velocity and its level rises with the dose, bubbles stream off it, a ghost 230px dose watermark changes behind, and on release it elastic-snaps to the nearest stop and pops a value bubble. Arrow keys, Home and End step between stops. On the right a readout (dose at up to 104px, class pill, INCI, trade name, what it does, "Found in" formula, a cream button) that restaggers in on each stop. On first view the vial slides in from 10% to 5%.
7. ingredients: a sticky labelled peptide figure beside a table (Peptide INCI + trade name, Class, What it does, Found in, Dose right-aligned tabular) in an 18px-radius box that scrolls sideways on its own at min-width 680px. Each dose cell becomes a small outlined vial filled to the dose in its class colour, with rising bubbles; the vials drop in with an elastic settle when the table scrolls into view and slosh when a row is hovered.
8. routine: a black 28px-radius slab: an animated plinth render on the left, then "Four peptide formulas, already in order.", Morning and Evening numbered lists, a cream "Add the routine" button and $148 with $170 struck through.
9. journal-footer: one dark 36px-radius card (#0c0b0a, amber and blue radial glows, a noise overlay): a pulsing-dot eyebrow, a gradient-clipped headline, an email pill form with an inline mail icon and a validating submit (amber note, aria-live), three check perks; a fanned stack of three journal covers (renders with masthead, issue number, title) that floats and spreads on hover; four link columns; a base row with a back-to-top link; a giant clipped "Cosmos" wordmark with a sweeping shine.

THE PRODUCT RENDERS (SMIL, each in a 0-100 viewBox)
- The six product cards use a lab style that matches the Dose lab vial: cream outlines, flat cel-shaded fills with a darker side band, a long offset drop shadow (feOffset dy 3.6), a graduated measuring shelf, dashed shines, rising bubbles with a dashed highlight arc, a slow dotted ring behind. Each product sits in a .tilt group with its liquid in a clipped .slosh group (data-cy = the surface), so script can tilt and slosh it.
- Each card has data-accent. Moving the cursor across the media drives the same spring follower: the bottle tilts up to 7deg, the liquid sloshes up to 24deg and fast moves stream accent bubbles; it settles back when the pointer leaves.
- Shared studio helpers: a radial backdrop, a floor glow, a top spotlight, a vignette and 6% fractal grain on top; an animated contact shadow that shrinks as the product bobs; a skewed light sweep clipped to the product; glossy radial beads; twinkling dust; and an orbit() helper that draws beads on a tilted ellipse twice, once behind and once clipped to the near half in front, so they pass around the bottle.
- pCopper: a dropper bottle of blue serum with a sloshing surface, copper ions orbiting, blue spheres floating. pMatrixyl: a cream jar under a floating gold lid, a collagen triple helix scrolling behind. pArgireline: an amber bottle while three expression lines smooth flat and return, and a drop falls and ripples. pEyeGel: a tube in a field of rising gel bubbles with cooling floor ripples. pBarrier: a green-lidded jar under a hexagon lattice that lights up in waves from the centre. pBooster: a gold-serum bottle with six coloured peptide beads orbiting. pPeptide: Pal-KTTKS as five glossy labelled amino acids on a bobbing backbone with a wavy C16 tail, dimension brackets and a scanning line. pRoutine: four products on a plinth while a sun then a crescent moon cross a dotted arc, the sky shifts from warm to night over 16s, MORNING/EVENING swap and the AM or PM products brighten.

FX LAYER
- A fixed, pointer-events-none SVG overlay (z-index 80) with a long soft shadow filter. Helpers: bubbleCloud (small circles that drift up with expo.out and shrink away), valueBubble (a coloured circle with a dashed arc and a label that squash-and-stretches in with two elastic eases, rises, then pops) and popBurst (eight radial strokes that travel outward and vanish). "Add" fires a "+1" bubble in the card's accent from the button, the routine button an amber one, the search button a bubble cloud, a valid signup a burst.

MOTION AND PERFORMANCE
- An IntersectionObserver pauses each render's SMIL clock (pauseAnimations) when it is off screen.
- Reduced motion: renders jump to 2s and pause, the CSS spins, ticker, caret and wordmark shine stop, and the GSAP intro, parallax, bobbing and scroll scatter are skipped.

RESPONSIVE
- Under 1100px the sphere is 460px, cards shrink and lose labels, the ingredient figure and routine stack. Under 860px the nav links hide and steps stack. Under 720px the stage drops its aspect ratio, the sphere is 320px, only two float cards remain, tucked into opposite corners. No horizontal scroll at 390px.

THINGS THAT BREAK
- Every gradient, clip and filter id inside a render must start with u, or two copies of the same module on the page steal each other's defs.
- The float cards are absolutely placed inside the stage; keep only two under 720px or they push the page wider than the viewport.
- Don't hide the hero in CSS alone: only add .js-ready once GSAP has loaded, or a CDN failure leaves a blank stage.