Aurora Cosmos

Build a personal home page set under a night sky, with an orrery as its centrepiece: the portrait glows as a sun in the middle, and the site's five sections (Writing, AI, Projects, Patterns, About) are labelled planets moving slowly around it on tilted elliptical orbits. The animation should feel calm and alive, and it doubles as navigation because every planet is a link.

Centre the hero in a wrap of `min(1240px, 100% - 2 * gutter)`: a mono eyebrow, a large centred headline, and a row of buttons, then the orrery as a box about 1040px wide with an aspect ratio near 2.2:1, then a glass console that overlaps the orrery's lower edge and holds the lede beside a three-cell stat strip. Below the hero, sections use 3, 2 and 4-column grids with 24px gaps. A glass dock nav floats at the top, and each link carries a small dot in its planet's colour.

Set the headline in **Geist** near `clamp(2.6rem, 6vw, 5rem)` at weight 600 with tight tracking, ending in one **Instrument Serif** italic word filled with a soft teal-to-violet glow gradient. Use **Geist Mono** for eyebrows, planet captions, dates and the star magnitude labels.

The default theme is night: ground `#03050d` fading to `#070d20`, text `#e3e9f5`, a pale blue primary button and dark glass panels (translucent navy with `backdrop-filter: blur(18px)` and a faint teal-to-violet rim). Paint the sky as fixed layers: a starfield of tiny white dots from several `radial-gradient` layers at different tile sizes, an aurora of blurred teal `#2de2c4`, violet `#8b6cff` and pink `#ff5ca8` bands across the top that sway slowly, and a dark mountain ridge silhouette (an inline SVG path) along the bottom of the hero. A light blue-hour theme lifts the ground to `#eef3fb` with ink `#0c1626` and multiplies the aurora softly. Persist the theme in `localStorage` wrapped in try/catch, defaulting to night.

Build the orrery from three concentric elliptical rings (bordered ellipses with 1px dashed or hairline strokes, flattened to about 38% height) around a 120px circular portrait with a warm gold ring and a large radial glow. Each planet is an absolutely positioned link holding a small sphere (a radial-gradient ball in its section colour: Writing teal, AI violet, Projects amber with a ring, Patterns blue, About pink), a mono name and a one-line caption, all inside a small dark glass pill. Store each planet's ring, starting phase and period in data attributes (periods of 64, 96 and 140 seconds for the inner, middle and outer rings) and move them with `requestAnimationFrame`, computing `left` and `top` as percentages from `cos` and `sin` of the current angle on the ellipse; planets on the far side of the sun get a `far` class that dims and shrinks them slightly so the orbit reads as depth. A `Pause orbits` button toggles the animation and its `aria-pressed` state. Server-render each planet's initial position so the scene is complete before any script runs.

Below the hero, Start here shows three glass cards whose meta line opens with a star magnitude (a glowing gold dot sized 14, 11 or 8px with `Magnitude 1` to `3`), then AI and Garden panels listing articles with right-aligned dates, four experiment tiles with gradient orb icons, two link lists beside a work-with-me card washed with an aurora gradient, and a dark glass footer.

Keep the motion slow: orbits as above, aurora sway over 30 seconds or more, and 200ms hover lifts. Under `prefers-reduced-motion`, do not start the orbit loop at all, leave the planets at their initial positions, and stop the aurora. At 400px the orrery becomes nearly square, captions hide so only planet names show, the console stacks lede above stats, and grids become one column. The orrery is the one showpiece; keep everything else on the page quiet so it does not compete.