Glass Isometric

Build a personal home page where each major section is a glass vitrine: a frosted display case holding a text card on one side and a small isometric diorama on the other. The dioramas turn the site's structure into objects (the site as a city, the writing as a bookcase, the person as a staircase of buildings) so visitors read the information architecture at a glance. Run the three vitrines one after another near the top, each under a short labelled heading, then follow with ordinary glass content sections.

Use a wrap of `min(1240px, 100% - 2 * gutter)`. Each vitrine is a large glass panel with 28px radius and a two-column grid of `minmax(0, 0.9fr) minmax(0, 1.1fr)`: a strong-glass copy card on the left, padded `clamp(24px, 3.4vw, 44px)`, and the diorama filling the right with its aspect ratio set from the SVG's viewBox. Below 900px the grid becomes one column with the diorama under the card. A glass dock nav floats at the top; content sections use 3, 2 and 4-column grids with 24px gaps.

Set type in **Geist**, with vitrine titles around `clamp(2.5rem, 4.6vw, 4.3rem)` at weight 600, `-0.04em` tracking and a line height of 1. One accent word per headline is **Instrument Serif** italic. Eyebrows, stat captions and dates are **Geist Mono** uppercase, and each eyebrow starts with a tiny isometric cube glyph instead of a dash.

The ground is pale blue-grey `#e6ecf6` with ink `#0c1626` and slate `#364f6a` for the primary button; dark mode is `#060a13` with `#a9c8ea` accents. Behind everything sits a fixed mesh of four blurred blobs whose colours come from a precomputed palette of the page's main image. Ship a small table of swatches per image (hex plus coverage share) rather than reading pixels with canvas, pick four by coverage and saturation, push hues at least 24 degrees apart, and clamp lightness and saturation separately per theme: blobs into a soft band that keeps text on glass at AA, and diorama faces (`--d1` to `--d4`) into a mid band so top and side shading still reads. Each vitrine can override `--d1` to `--d4` from its own image. Glass is translucent white at about 70% with `backdrop-filter: blur(20px) saturate(160%)`, an inset white rim and a soft shadow. Persist the theme in `localStorage` wrapped in try/catch.

Draw the dioramas as inline SVG from isometric blocks. Every block is three polygons (top, left and right faces) filled from the same face colour, with the top lightened about 18% and the right side darkened about 22% using `color-mix`, plus thin window rows on the side faces. All three scenes stand on a frosted glass plinth with a faint isometric floor grid. The city has a library tower for Writing, a workshop with a crane for Projects, a glass tower with a lit core for AI, a building wearing the portrait as an SVG `<image>` on its side face for About, and a plaza of small tiles for Patterns. The bookcase has three shelves of books in green, amber and violet for the three collections, with an open glass book on a reading table. The staircase is four buildings rising left to right with the portrait in a glass frame on the top step. Over each scene, position HTML pill labels absolutely with percentage `--x` and `--y` custom properties; each is a link, and hovering or focusing it lifts the matching blocks 6px with a 200ms transform.

The copy cards carry the eyebrow, headline, lede, a three-cell mono stat strip divided by hairlines, and buttons; the bookcase card has collection chips with coloured dots instead of stats. After the vitrines, add a Start here row of three glass cards with images, AI and Garden glass panels listing articles with right-aligned dates, four experiment tiles, two link lists beside a dark slate work-with-me card, and a strong-glass footer.

Animate gently: the mesh blobs drift over 40 seconds or more, two small glass slabs bob above each diorama on a 6 second loop, and labels raise their buildings on hover. Under `prefers-reduced-motion` stop the drift and the bobbing. At 400px, the vitrines stack, the diorama labels flow into a wrapped row of pills under the scene instead of floating over it, and every grid is a single column. Keep the dioramas simple: the charm is in clean faces and correct shading, and extra detail quickly turns them into noise.