Glass Orbit

Build a single-page personal site in frosted glass over a faint starfield, opening on a small solar system. The portrait is the sun, and the site's sections are frosted planet pills circling it on dashed orbits. Each section owns a stellar-class colour from the Harvard sequence, and that colour follows it everywhere on the page, so the orbit hero doubles as the legend for the rest of the design.

Lay the hero out as a two-column grid at `minmax(0, 1fr) minmax(0, 1.05fr)` with a `clamp(20px, 3vw, 36px)` gap and a minimum height of `min(760px, 100vh - 140px)`, inside a centred wrap of about 1200px. On the left: a mono eyebrow led by a small sun-coloured planet dot, the headline at about `clamp(3rem, 6.6vw, 6rem)` with one Instrument Serif italic word, and a strong glass card holding the lede, a row of three stats and three buttons. On the right: the system, a square `min(620px, 100%)` wide with 11% padding, and under it a `Pause orbits` toggle with a short hint.

Use Geist at an 18px base for body and UI, Instrument Serif italic for the one accent word, and Geist Mono for labels, class letters and class stamps. The ground is `#e6ecf6` in light and `#060a13` in dark with ink `#0c1626` and `#eef3fb`, under the four-blob drifting mesh with grain. Between the mesh and the grain lay a starfield made of tiled radial-gradient dots of 1 to 2.5px at several deliberately mismatched tile sizes (457, 521, 733px) so the repeat never shows; one layer twinkles over 7s in dark mode and sits at 35% without twinkling in light. Assign the classes: AI is O (`#3d7fe0` light, `#8fc3ff` dark), Patterns B (`#6a6cf0`), Projects A (`#8aa2c4`), About F (`#e0b63c`), Writing G (`#d9a21c`), and the sun `#f0a92a` (`#ffcf6e` dark). Glass is about 60% white in light and deep navy in dark with `backdrop-filter: blur(18px) saturate(170%)`, a rim highlight and a long soft shadow; buttons use the brand slate `#364f6a`. Provide a light/dark toggle that honours the system preference.

Build the system from four concentric rings, each an absolutely positioned circle with a 1px dashed border in a soft ink colour: inset 23%, 14%, 6% and -3% for Writing, AI, Projects plus Patterns, and About, the outermost one solid at reduced opacity. Rotate each ring with `animation: spin linear infinite` at 80s, 120s, 170s and 240s from a different starting angle (205, 320, 60 and 145 degrees). Pin each planet to its ring at `top: 50%; left: 0` (or `left: 100%` for the second body on a ring) and counter-rotate the pill inside at the same duration so its label always stays upright. Each pill is a real link at least 46px tall: strong glass with a 14px blur, a rim and a shadow, a 22px class-coloured planet dot (16px on the innermost ring), the section name in 600 weight and the class letter in mono. On hover the pill gains a 2px outline in its class colour and its planet grows a tilted Saturn ring. Place the portrait in the centre at `inset: 34%` as a circle, with a 1px white ring, an 8px halo at 22% of the sun colour, and two wide soft glows in a corona colour (`0 0 70px 18px` and `0 0 160px 40px`), capped by a glass lens: a radial specular highlight top-left and an inset shadow at the bottom. Behind it spin a conic-gradient corona at `inset: 27%`, blurred 6px, over 60 seconds.

Carry the classes through the page: dock links each get their class planet and all sit on one dashed orbit line, the current link gets a solid glass pill, a heavier weight and a tilted ring on its planet so colour never carries the state alone; every section head carries a small orbit mark (a sun, a dashed arc and a class planet); cards and rows show their collection's planet next to the date, and their hover glow takes the class colour. After the hero come Start-here image cards, two columns of latest writing, an AI experiments grid and a three-panel contact band, then a glass footer.

Pause every ring, pill and the corona while the pointer is over the system or focus is inside it, and when the toggle is pressed, so a reader can actually click a moving planet. The motion should feel slow and ambient; don't speed the orbits up or add more bodies, because a busy system stops reading as navigation. Below 900px stack the hero, put the system below the copy, and below 560px shrink it to 84% of the column and clip it horizontally so the outer pills never push the page sideways as they orbit; keep every pill at least 44px tall. With `prefers-reduced-motion` stop the orbits, corona, twinkle and mesh drift and leave every planet at its starting angle; with `prefers-reduced-transparency` make panels and pills near-solid.