Aurora Mesh Gradients

Build a personal blog home page that reads like a night sky: a dark-first page with large, soft aurora color fields drifting slowly behind glass cards, a gradient-ink italic phrase in each headline, and one angled full-color band for the call to action. The aurora is a single `position: fixed` layer behind the whole page, so the colors stay put while content scrolls over them.

Center content in a shell of about 1200px with 24px gutters. Open with a two-column hero (`minmax(0, 1.25fr) minmax(0, .9fr)`): headline, lede, a gradient primary button with two quieter buttons, and a three-cell stat strip on the left; a tall glass-framed portrait with a caption bar on the right. Then stack a three-column numbered Start-here row whose cells are separated by 1px hairline gaps, a six-column bento of AI writing with one large feature card beside two stacked image cards and a row of three below, a ruled Digital Garden list (mono date column, title and summary, arrow on the right), a three-column grid of experiment cards, full-width project rows that alternate image and text sides, a two-column connect block, and the call-to-action band. Give sections about 120px of vertical space between them.

Set everything in **Geist**: body at 17 to 18px, headlines at 600 weight with `-0.035em` tracking up to about 4.5rem. Use **Instrument Serif italic** for one accent phrase per headline and for the big `01 02 03` numerals in Start here. Use **Geist Mono** at 12 to 13px uppercase for eyebrows, dates and stat labels, and prefix each eyebrow with a 22px teal-to-violet gradient dash.

The dark ground is `#05060c` with raised surfaces at `#0e1120` and ink `#eff1fa`. The aurora hues are teal `#2de2c4`, cyan `#3ab8ff`, violet `#8b6cff`, magenta `#ff5ca8` and amber `#ffb86b`. Build the field from four blurred `radial-gradient(closest-side, color, transparent)` blobs sized 40 to 62vmax, at 0.72 opacity with `mix-blend-mode: screen`, plus a blurred skewed ribbon, an SVG `feTurbulence` grain at low opacity, and a fade to the background color across the bottom 60vh so the lower page goes calm. In light mode switch to a pale `#f7f6fb` ground, drop the blobs to 0.5 opacity and change the blend to `multiply` so the colors tint rather than glow. Fill the accent phrase with a 100-degree gradient through all five hues using `background-clip: text`, and sweep its `background-position` slowly.

The nav is a sticky glass pill 12px from the top: an outlined gradient `Aj` mark and wordmark, plain links with a raised surface pill for the active one, the AI link wrapped in a thin gradient hairline ring instead of a filled pill, a compact search field and a round theme button. Below 860px it collapses into a glass sheet behind a menu button. Track the section in view and move the active pill to its link.

Cards are dark glass at about 70% of the raised surface with `backdrop-filter: blur(18px) saturate(140%)`, a 1px hairline border, and a conic lit rim along one edge. On fine pointers, track the pointer into `--mx`/`--my` and paint a soft radial spotlight inside the card. The portrait frame gets a blurred multicolor glow behind it. The Work-with-me band is the only full-color surface: a moving multi-radial mesh under a `clip-path` skew of a few degrees, with white text on a darkening scrim.

Drift the blobs on 23 to 41 second alternating keyframes that translate, rotate and scale them, and keep every other motion short (180 to 240ms hovers). Resist adding more color: the aurora only works because cards and text stay neutral over it. Under `prefers-reduced-motion`, freeze the blobs, ribbon and gradient sweep. At 400px wide everything stacks to one column, the stat strip stays three narrow cells, the portrait moves below the copy, and nothing scrolls sideways.