Your browser
Works in any browser. The newer features below sit on top; here is what yours has.
The features
Baseline newly available: every major browser has it. Widely: for 30 months. Data from MDN, 12 October 2026.
Your browser has of these in full.
sqrt()andpow()Computes φ, and the scale from it.Baseline widely available · since Dec 2023–@propertyLets the design page show the φ your browser computed.Baseline newly available · Jul 2024–- Container queries and unitsStands the tiles on end when narrow, and sizes text to each tile.Baseline widely available · since Feb 2023–
:has()Runs the theme switch without JavaScript.Baseline widely available · since Dec 2023–light-dark()and relativeoklch()coloursServes both themes from one palette, and turns the gold into tints.Baseline newly available · Sep 2024–text-wrap: balanceandprettyEvens out heading lines and avoids a lone last word.balance: Baseline newly available · May 2024 · pretty: limited (Chrome 117, Safari 26)–- Popover and
@starting-styleShows the φ note on the home page, and fades it in.Baseline newly available · Jan 2025– - Invoker commands (
commandfor)Opens the φ note from its tile without script.Baseline newly available · Dec 2025– - Anchor positioningTies the φ note to its tile.Baseline limited, though Chrome 125, Firefox 147 and Safari 26 have the core of it–
- View transitionsSweeps a new theme in as a circle.Baseline newly available · Oct 2025–
- Cross-document view transitionsHolds the header still between pages while the rest cross-fades.Limited: Chrome 126, Safari 18.2–
- Speculation rulesPrefetches a page while you hover its link.Limited: Chrome 109–
- Scroll-driven animationsDraws the reading line at the top, and eases sections in.Limited: Chrome 115, Safari 26–
sibling-index()Staggers the tiles in, and numbers the cards for their tints.Baseline newly available · Aug 2026–<details name>and::details-contentKeeps one role in Work open at a time, and slides it open.Baseline newly available · Sep 2024 and Sep 2025–interpolate-sizeLets a role slide open to its full height.Limited: Chrome 129–field-sizing: contentGrows the Ask box as you type.Baseline newly available · Jun 2026–text-boxTrims headings to cap height, so they sit square.Limited: Chrome 133, Safari 18.2–contrast-color()Picks black or white for the φ on the gold tile.Baseline newly available · Apr 2026–corner-shape: squircleGives the tiles, cards and boxes squircle corners.Limited: Chrome 139–- TemporalTells the time in Melbourne, at the foot of every page.Limited: Chrome 144, Firefox 139–
How it’s done
Progressive enhancement.
Plain CSS any browser from the last decade reads. Newer features sit behind @supports or a script check, or are simply ignored. Without them you get the same words in a simpler layout.
No framework, build step, web fonts, cookies or trackers.