redesign(site): rebuild the landing page mobile-first with a restrained visual identity

[isaaclins]

Complete redesign of the GitHub Pages site in docs/, mobile and desktop.

Why

On a real iPhone the old page was a desktop layout crammed into a phone: "Liked Songs", "Deep Focus", "Midnight Drive", "Lo-Fi Beats" and "Floating Points" each wrapped onto two lines, the now-playing title wrapped, and the bottom feature row was clipped mid-word.

The responsive layer was patches rather than design:

• .hero forced to display:block with max-width:100vw; overflow:hidden — suppressing overflow instead of fixing what overflowed
• .hero__copy / .hero__stage sized by width: calc(100vw - 2.2rem), redone at 480px with a magic min(20.75rem, …)
• .window__body{ grid-template-columns: minmax(118px, 42%) … } kept the desktop two-pane mockup on phones; at ~118px that sidebar cannot fit its own labels

The root error: the app mockup was a desktop artifact being shrunk rather than reconsidered.

What changed

• Light-first, restrained identity replacing the near-black + neon pink/orange gradient — deep burgundy used sparingly as an accent, generous whitespace, strong typographic hierarchy. color-scheme: light by default with a prefers-color-scheme: dark variant.
• Mobile gets a focused single-panel player instead of a squeezed two-pane window.
• Layout rebuilt with container queries (5) and intrinsic sizing (37 clamp() uses) rather than a ladder of viewport breakpoints.
• Copy kept truthful to shipped features — ⌘K palette, 10-band EQ, pins.
• No build step and no dependencies: still plain static HTML/CSS/JS from docs/, per the debt concerns in Tech-debt audit: the debt is 124 allowlisted exemptions and a 1064-line view, not the file tree #351.

Verified

Objectively confirmed on this branch:

• zero 100vw arithmetic (was the sizing hack)
• zero overflow:hidden / overflow-x (was the overflow suppression)
• 5 @container queries, 37 clamp(), light-first color-scheme

Rendered and read at ~574pt: hero, stats and CTA are clean, nothing wraps awkwardly, nothing clips.

⚠️ One verification gap

I could not independently confirm the layout at a true 390px viewport. Arc enforces a minimum window width of 470pt and Safari 574pt, so neither browser can render a real iPhone viewport by window resizing alone. The agent reported 390px screenshots; that number should be treated as unconfirmed until checked in device emulation or on a real phone.

Given 390px is exactly the width that was broken before, please sanity-check this on your phone before merging.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.