diff --git a/landing/README.md b/landing/README.md
index bffda766..b96dc238 100644
--- a/landing/README.md
+++ b/landing/README.md
@@ -6,57 +6,42 @@ The public landing page. A separate Vite project that shares Zuno's look but non
 cd landing
 npm install
 npm run dev      # http://localhost:5173
+npm run check    # the *.check.ts self-checks
 npm run build    # -> landing/dist
 ```
 
-## Why it is its own project
-
-The desktop app's Vite config has fixed Rollup inputs (`index.html`, `mini.html`), a strict dev
-port Tauri depends on, and a `src-tauri` watcher. Adding a third entry point would tie a public
-website's release cadence to the app's, and a stray import could pull `@tauri-apps/*` into a
-bundle that has no Tauri runtime under it.
-
-Nothing here is reachable from the app: its `tsconfig` is `include: ["src"]` and its Rollup
-inputs are the two HTML files above. Running `npm run build` in either directory leaves the
-other untouched.
-
-## What is shared, and how
-
-- **Colour tokens** — `src/styles.css` carries a byte-identical copy of the app's `@theme`
-  block and its `html[data-theme="light"]` overrides. Copied rather than imported, because
-  `src/ui/styles/global.css` also contains window rounding, titlebar heights and Paper-PC rules
-  that a website has no use for. If the brand shifts, change both.
-- **Component shapes** — `src/components/ui.tsx` reproduces the app's primary/secondary pill
-  buttons and its `rounded-2xl bg-card/50` section card, so the page and the product read as one
-  thing.
-- **Icons** — OS marks come from Iconify's `logos` set via `@iconify/react`. Iconify normally
-  fetches at runtime and the full set is 7.4 MB, so the four marks actually used are extracted
-  into `src/components/brandIcons.tsx` and registered up front — no request, no pop-in.
-  `@iconify-json/logos` stays a devDependency as the source of record; regenerate that file from
-  it if a mark changes. The handful of UI glyphs are hand-rolled in `src/components/icons.tsx`.
-- **Screenshots** — copied into `public/` from `docs/`. Re-copy them when the app's shots are
-  refreshed:
-
-  ```bash
-  cp ../assets/img/Logo.png public/logo.png
-  cp ../docs/zuno-d.PNG public/screenshot-dark.png
-  cp ../docs/zuno-l.PNG public/screenshot-light.png
-  ```
+It is its own project so the website can ship on its own schedule, and so no stray import can
+pull `@tauri-apps/*` into a bundle with no Tauri runtime under it.
 
-## Downloads
+## The demo player
+
+The page plays one track (`public/low-tide.mp3`), and only when someone presses play.
+`src/audio/demoPlayer.ts` owns it: one `<audio>` element, a Web Audio graph built on the first
+press, and a store the components read with `useSyncExternalStore`.
+
+- **EQ** — ten peaking filters with the app's bands, Q and presets (`src/audio/eq.ts` mirrors
+  `src/ui/settings/equalizerCurve.ts`). If the app's EQ changes, change both.
+- **Visuals** — an analyser feeds the spectrum ring and writes `--bass`, `--level` and
+  `--progress` on `<html>` every frame; CSS does the rest. Nothing animates under reduced motion.
+- **Mini player** — appears once the hero scrolls away (`data-hero-out`), hides over the footer.
 
-`src/releases.ts` reads the newest release from the GitHub API at page load and points each
-platform button at the matching installer. Asset names carry the version
-(`Zuno_1.1.1_x64-setup.exe`), so there is no stable per-file URL to hardcode.
+## Shared with the app
 
-Every button falls back to the releases page — while the request is in flight, if it fails, and
-if a release is missing an asset for that platform. A rate-limited or offline visitor still gets
-somewhere useful.
+- **Colour tokens** — `src/styles.css` copies the app's `@theme` block byte for byte, plus a
+  few site-only brand tokens (the mascot's colours, the record). If the brand shifts, change both.
+- **Fonts** — Inter (as in the app) and Geist Mono, self-hosted through Fontsource.
+- **Icons** — OS and service marks are extracted from `@iconify-json/logos` into
+  `src/components/brandIcons.tsx`, so nothing is fetched at runtime.
+- **Images** — `ghost.webp` and `theme-{dark,light}.webp` are resized from `logo.png` and the
+  1.2 screenshots; regenerate them if those change.
+
+## Downloads
 
-The visitor's platform is detected only to emphasise one card. Detection is unreliable and
-downloading for another machine is ordinary, so the other three stay fully available.
+`src/releases.ts` reads the newest release from the GitHub API and points each tile at the
+matching installer. Every button falls back to the releases page if the request fails or an
+asset is missing. Repo stats in `src/github.ts` work the same way: no data, no numbers.
 
 ## Deploying
 
-`base` is `"./"`, so the build works from a subpath — including GitHub Pages project sites,
-which serve from `/<repo>/`. Publish `landing/dist` as-is.
+`base` is `"./"`, so the build works from a subpath — including GitHub Pages project sites.
+Publish `landing/dist` as-is.
diff --git a/landing/index.html b/landing/index.html
index 40ac945f..4c726255 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -5,18 +5,19 @@
     <link rel="icon" type="image/png" href="./logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="dark" />
+    <meta name="theme-color" content="#0a0a0a" />
 
     <title>Zuno — a desktop client for YouTube Music</title>
     <meta
       name="description"
-      content="A fast, native desktop client for YouTube Music. Tabs with independent playback, offline downloads, synced lyrics, Last.fm and Discord. Free and open source for Windows, macOS and Linux."
+      content="A native desktop player for YouTube Music. Tabs that each keep playing, synced lyrics, offline downloads, a ten-band EQ, Discord and Last.fm. Free and open source for Windows, macOS and Linux."
     />
 
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Zuno — a desktop client for YouTube Music" />
     <meta
       property="og:description"
-      content="Tabs that each keep playing, offline downloads, synced lyrics. Free and open source for Windows, macOS and Linux."
+      content="Tabs that each keep playing, synced lyrics, offline downloads. Free and open source for Windows, macOS and Linux."
     />
     <meta property="og:image" content="./screenshot-dark.png" />
     <meta name="twitter:card" content="summary_large_image" />
diff --git a/landing/package-lock.json b/landing/package-lock.json
index 6c0ae669..ac95d98a 100644
--- a/landing/package-lock.json
+++ b/landing/package-lock.json
@@ -8,6 +8,8 @@
       "name": "zuno-landing",
       "version": "0.1.0",
       "dependencies": {
+        "@fontsource-variable/geist-mono": "^5.3.0",
+        "@fontsource-variable/inter": "^5.3.0",
         "@iconify/react": "^6.0.2",
         "@vercel/analytics": "^2.0.1",
         "react": "^19.0.0",
@@ -748,6 +750,24 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource-variable/geist-mono": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/geist-mono/-/geist-mono-5.3.0.tgz",
+      "integrity": "sha512-vBbuwDEo9AkrqADMXOrlAR3DFcJi4/JxeuU43FoiQERnNwsfXNnvxvReZG02cQKmyk4DZkZdBZX3oTDvy2zBAw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz",
+      "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@iconify-json/logos": {
       "version": "1.2.11",
       "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.2.11.tgz",
diff --git a/landing/package.json b/landing/package.json
index e9fff2cb..6090d36b 100644
--- a/landing/package.json
+++ b/landing/package.json
@@ -6,9 +6,12 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "check": "node scripts/run-checks.mjs"
   },
   "dependencies": {
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@fontsource-variable/inter": "^5.3.0",
     "@iconify/react": "^6.0.2",
     "@vercel/analytics": "^2.0.1",
     "react": "^19.0.0",
diff --git a/landing/public/ghost.webp b/landing/public/ghost.webp
new file mode 100644
index 00000000..1eff7dd3
Binary files /dev/null and b/landing/public/ghost.webp differ
diff --git a/landing/public/theme-dark.webp b/landing/public/theme-dark.webp
new file mode 100644
index 00000000..127e9b8b
Binary files /dev/null and b/landing/public/theme-dark.webp differ
diff --git a/landing/public/theme-light.webp b/landing/public/theme-light.webp
new file mode 100644
index 00000000..6a36e27c
Binary files /dev/null and b/landing/public/theme-light.webp differ
diff --git a/landing/scripts/run-checks.mjs b/landing/scripts/run-checks.mjs
new file mode 100644
index 00000000..625e7551
--- /dev/null
+++ b/landing/scripts/run-checks.mjs
@@ -0,0 +1,46 @@
+// Runs every `*.check.ts` under landing/src, one process each (same approach as the app's scripts/run-checks.mjs).
+import { build } from "esbuild";
+import { spawnSync } from "node:child_process";
+import { mkdtempSync, readdirSync, rmSync, statSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join, relative, resolve } from "node:path";
+
+const ROOT = resolve(import.meta.dirname, "..");
+
+function findChecks(dir) {
+  return readdirSync(dir).flatMap((entry) => {
+    const path = join(dir, entry);
+    if (statSync(path).isDirectory()) return findChecks(path);
+    return entry.endsWith(".check.ts") ? [path] : [];
+  });
+}
+
+const checks = findChecks(join(ROOT, "src")).sort();
+const outDir = mkdtempSync(join(tmpdir(), "zuno-landing-checks-"));
+let failed = 0;
+
+try {
+  for (const check of checks) {
+    const name = relative(ROOT, check);
+    const bundle = join(outDir, `${name.replace(/[\\/]/g, "_")}.mjs`);
+    try {
+      await build({ entryPoints: [check], bundle: true, platform: "node", format: "esm", outfile: bundle, logLevel: "silent" });
+    } catch (error) {
+      failed += 1;
+      console.error(`FAILED (bundle) ${name}\n${error?.message ?? error}`);
+      continue;
+    }
+    const ran = spawnSync(process.execPath, [bundle], { encoding: "utf8", timeout: 30_000 });
+    if (ran.status === 0) {
+      console.log(`  ok  ${name}`);
+    } else {
+      failed += 1;
+      console.error(`FAILED ${name}\n${(ran.stderr || ran.stdout || "timed out").trim()}`);
+    }
+  }
+} finally {
+  rmSync(outDir, { recursive: true, force: true });
+}
+
+if (checks.length === 0 || failed > 0) process.exit(1);
+console.log(`\n${checks.length} checks passed.`);
diff --git a/landing/src/App.tsx b/landing/src/App.tsx
index 992225a4..c8c65c2f 100644
--- a/landing/src/App.tsx
+++ b/landing/src/App.tsx
@@ -1,90 +1,41 @@
-import { useLatestRelease } from "@/useLatestRelease";
-import { Downloads } from "@/components/Downloads";
-import { Hero } from "@/components/Hero";
-import { MiniPlayer } from "@/components/MiniPlayer";
-import { Mono, Section } from "./components/ui";
-import { GITHUB_REPO, RELEASES_URL } from "./releases";
-
-/**
- * The Zuno character, looping.
- *
- * The one place with room for personality — everything else on the page is doing a job. Muted,
- * looping and `playsInline` so it behaves like a graphic rather than media: no controls, nothing
- * to pause, and it never asks for sound.
- */
-function Character() {
-  return (
-    <video
-      className="size-16 shrink-0 rounded-2xl bg-card/40 object-cover"
-      src="./zuno-character.mp4"
-      autoPlay
-      muted
-      loop
-      playsInline
-      aria-hidden="true"
-    />
-  );
-}
-
-function Footer() {
-  return (
-    <footer className=" bg-black">
-      <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-14 sm:flex-row sm:items-end sm:justify-between">
-        <div className="flex items-end gap-4">
-          <Character />
-          <div className="flex max-w-sm flex-col gap-2">
-            <span className="flex items-center gap-2 text-base font-bold text-foreground">
-              <img className="size-5" src="./logo.png" alt="" />
-              zuno_
-            </span>
-            <Mono className="leading-relaxed">
-              an independent, unofficial project. not affiliated with, authorised by or endorsed
-              by youtube or google.
-            </Mono>
-          </div>
-        </div>
-
-        <nav className="flex flex-wrap items-center gap-5" aria-label="Links">
-          {[
-            ["github", GITHUB_REPO],
-            ["releases", RELEASES_URL],
-            ["issues", `${GITHUB_REPO}/issues`],
-            ["licence", `${GITHUB_REPO}/blob/main/LICENSE`],
-          ].map(([label, href]) => (
-            <a
-              key={href}
-              className="font-mono text-[13px] text-muted-foreground transition-colors hover:text-foreground"
-              href={href}
-              rel="noopener"
-            >
-              {label}
-            </a>
-          ))}
-        </nav>
-      </div>
-    </footer>
-  );
-}
+import { Downloads } from "./components/Downloads";
+import { Features } from "./components/Features";
+import { Film } from "./components/Film";
+import { Footer } from "./components/Footer";
+import { Header } from "./components/Header";
+import { Hero } from "./components/Hero";
+import { MiniPlayer } from "./components/MiniPlayer";
+import { OpenSource } from "./components/OpenSource";
+import { FOCUS_RING, cn } from "./components/ui";
+import { useRepoStats } from "./github";
+import { useLatestRelease } from "./useLatestRelease";
 
 export function App() {
-  const latest = useLatestRelease();
+  const { release, platform } = useLatestRelease();
+  const repo = useRepoStats();
+  const stars = repo?.stars ?? null;
 
   return (
-    <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
-        <Hero release={latest.release} platform={latest.platform} />
-
-        <Section
-          id="download"
-          index="01"
-          title="Get it"
-          lede="Free and open source. Pick your system — the format choice inside each tile is the only decision to make."
-        >
-          <Downloads release={latest.release} platform={latest.platform} />
-        </Section>
+    <>
+      <a
+        href="#download"
+        className={cn(
+          "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[60] focus:rounded-full focus:bg-foreground focus:px-4 focus:py-2 focus:text-background",
+          FOCUS_RING,
+        )}
+      >
+        Skip to download
+      </a>
+      <Header stars={stars} />
+      <main>
+        <Hero release={release} platform={platform} stars={stars} />
+        <Film />
+        <Features />
+        <OpenSource repo={repo} release={release} />
+        <Downloads release={release} platform={platform} />
       </main>
       <Footer />
       <MiniPlayer />
-    </div>
+    </>
   );
 }
diff --git a/landing/src/audio/demoPlayer.ts b/landing/src/audio/demoPlayer.ts
new file mode 100644
index 00000000..f71859d9
--- /dev/null
+++ b/landing/src/audio/demoPlayer.ts
@@ -0,0 +1,234 @@
+import { useSyncExternalStore } from "react";
+import { EQ_BANDS_HZ, EQ_PRESETS, EQ_Q, autoPreampDb, presetFor, snapGain } from "./eq";
+import { bandLevels, follow, logBandEdges, meanLevel, onset } from "./levels";
+import { scrobbleAt } from "./track";
+
+/*
+ * The page's one audio player: the hero deck, the floating mini player, the EQ and the Discord
+ * card all drive this. It also writes --bass, --level and --progress on <html> every frame, which
+ * is how the rest of the page moves with the music without re-rendering.
+ */
+
+export const TRACK = {
+  src: "./low-tide.mp3",
+  title: "Low Tide",
+  artist: "Tom Rhodes, Hustle Standard",
+  cover: "./ghost.webp",
+} as const;
+
+/** Half the visualiser ring; the other half mirrors it. */
+export const SPECTRUM_BANDS = 40;
+const EDGES = logBandEdges(SPECTRUM_BANDS, 40, 14_000);
+const BASS_BANDS = 7;
+
+export interface PlayerState {
+  playing: boolean;
+  started: boolean;
+  time: number;
+  duration: number;
+  scrobbles: number;
+}
+
+export interface EqState {
+  bands: readonly number[];
+  preset: string | null;
+}
+
+const root = document.documentElement;
+let player: PlayerState = { playing: false, started: false, time: 0, duration: 0, scrobbles: 0 };
+let eq: EqState = { bands: EQ_PRESETS[0].bands, preset: EQ_PRESETS[0].name };
+const listeners = new Set<() => void>();
+
+let audio: HTMLAudioElement | null = null;
+let context: AudioContext | null = null;
+let analyser: AnalyserNode | null = null;
+let preamp: GainNode | null = null;
+let filters: BiquadFilterNode[] = [];
+let scrobbled = false;
+
+function notify() {
+  for (const listener of listeners) listener();
+}
+
+function update(next: Partial<PlayerState>) {
+  player = { ...player, ...next };
+  notify();
+}
+
+function media(): HTMLAudioElement {
+  if (audio) return audio;
+  const element = new Audio(TRACK.src);
+  element.preload = "metadata";
+  element.loop = true;
+  element.addEventListener("play", () => {
+    root.dataset.playing = "true";
+    update({ playing: true, started: true });
+    startMeter();
+  });
+  element.addEventListener("pause", () => {
+    root.dataset.playing = "false";
+    update({ playing: false });
+  });
+  element.addEventListener("loadedmetadata", () => update({ duration: element.duration }));
+  element.addEventListener("timeupdate", () => onTime(element.currentTime));
+  audio = element;
+  return element;
+}
+
+function onTime(time: number) {
+  // Looping back to the start is a new play, so it may scrobble again.
+  if (time < player.time - 1) scrobbled = false;
+  const threshold = scrobbleAt(player.duration);
+  const due = !scrobbled && threshold !== null && time >= threshold;
+  if (due) scrobbled = true;
+  root.style.setProperty("--progress", player.duration > 0 ? (time / player.duration).toFixed(4) : "0");
+  update({ time, scrobbles: player.scrobbles + (due ? 1 : 0) });
+}
+
+// Built on the first press: audio only starts from a gesture, and an element can feed one graph, once.
+function connect(element: HTMLAudioElement) {
+  if (context || typeof AudioContext === "undefined") return;
+  try {
+    const graph = new AudioContext();
+    const source = graph.createMediaElementSource(element);
+    const gain = graph.createGain();
+    const chain = EQ_BANDS_HZ.map((hz, band) => {
+      const filter = graph.createBiquadFilter();
+      filter.type = "peaking";
+      filter.frequency.value = hz;
+      filter.Q.value = EQ_Q;
+      filter.gain.value = eq.bands[band];
+      return filter;
+    });
+    const meter = graph.createAnalyser();
+    meter.fftSize = 2048;
+    meter.smoothingTimeConstant = 0.7;
+    const nodes: AudioNode[] = [source, gain, ...chain, meter];
+    nodes.reduce((from, to) => from.connect(to));
+    meter.connect(graph.destination);
+    context = graph;
+    analyser = meter;
+    preamp = gain;
+    filters = chain;
+    applyEq();
+  } catch {
+    // No Web Audio: the track still plays, without the EQ or the visualiser.
+  }
+}
+
+export function togglePlayback() {
+  const element = media();
+  if (!element.paused) {
+    element.pause();
+    return;
+  }
+  connect(element);
+  void context?.resume();
+  if ("mediaSession" in navigator) {
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: TRACK.title,
+      artist: TRACK.artist,
+      album: "zuno_",
+      artwork: [{ src: TRACK.cover, sizes: "256x256", type: "image/webp" }],
+    });
+  }
+  element.play().catch(() => update({ playing: false }));
+}
+
+export function seek(seconds: number) {
+  media().currentTime = seconds;
+}
+
+function applyEq() {
+  const now = context?.currentTime ?? 0;
+  filters.forEach((filter, band) => filter.gain.setTargetAtTime(eq.bands[band], now, 0.02));
+  preamp?.gain.setTargetAtTime(10 ** (autoPreampDb(eq.bands) / 20), now, 0.02);
+  notify();
+}
+
+export function setEqBand(band: number, db: number) {
+  const bands = eq.bands.map((gain, index) => (index === band ? snapGain(db) : gain));
+  eq = { bands, preset: presetFor(bands) };
+  applyEq();
+}
+
+export function applyEqPreset(name: string) {
+  const preset = EQ_PRESETS.find((candidate) => candidate.name === name);
+  if (!preset) return;
+  eq = { bands: preset.bands, preset: preset.name };
+  applyEq();
+}
+
+// ── Meter ────────────────────────────────────────────────────────────────
+
+type SpectrumListener = (levels: Float32Array) => void;
+const spectrumListeners = new Set<SpectrumListener>();
+const raw = new Float32Array(SPECTRUM_BANDS);
+const smoothed = new Float32Array(SPECTRUM_BANDS);
+const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+let bins: Uint8Array | null = null;
+let frame = 0;
+let bassFast = 0;
+let bassSlow = 0;
+let bass = 0;
+let level = 0;
+
+function startMeter() {
+  if (frame === 0) frame = requestAnimationFrame(tick);
+}
+
+function tick() {
+  frame = 0;
+  const live = analyser !== null && context !== null && audio !== null && !audio.paused && !reducedMotion.matches;
+  if (live && analyser && context) {
+    bins ??= new Uint8Array(analyser.frequencyBinCount);
+    analyser.getByteFrequencyData(bins);
+    bandLevels(bins, EDGES, context.sampleRate, raw);
+  } else {
+    raw.fill(0);
+  }
+
+  let loudest = 0;
+  for (let band = 0; band < SPECTRUM_BANDS; band += 1) {
+    smoothed[band] = follow(smoothed[band], raw[band], 0.55, 0.14);
+    loudest = Math.max(loudest, smoothed[band]);
+  }
+  // --bass follows kicks, not loudness: a steady bass line would otherwise pin it at the top.
+  const low = meanLevel(raw, 0, BASS_BANDS);
+  bassFast = follow(bassFast, low, 0.7, 0.3);
+  bassSlow = follow(bassSlow, low, 0.04, 0.04);
+  bass = follow(bass, onset(bassFast, bassSlow), 0.85, 0.12);
+  level = follow(level, meanLevel(raw, 0, SPECTRUM_BANDS), 0.4, 0.08);
+
+  root.style.setProperty("--bass", bass.toFixed(3));
+  root.style.setProperty("--level", level.toFixed(3));
+  for (const listener of spectrumListeners) listener(smoothed);
+
+  // Keeps going after a pause until everything has fallen, so the bars settle instead of freezing.
+  if (live || loudest > 0.003 || level > 0.003) frame = requestAnimationFrame(tick);
+}
+
+// ── React ────────────────────────────────────────────────────────────────
+
+function subscribe(listener: () => void) {
+  media();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function usePlayer(): PlayerState {
+  return useSyncExternalStore(subscribe, () => player);
+}
+
+export function useEq(): EqState {
+  return useSyncExternalStore(subscribe, () => eq);
+}
+
+export function subscribeSpectrum(listener: SpectrumListener): () => void {
+  spectrumListeners.add(listener);
+  return () => {
+    spectrumListeners.delete(listener);
+  };
+}
diff --git a/landing/src/audio/eq.check.ts b/landing/src/audio/eq.check.ts
new file mode 100644
index 00000000..c992bc6d
--- /dev/null
+++ b/landing/src/audio/eq.check.ts
@@ -0,0 +1,35 @@
+export {};
+
+import {
+  EQ_BANDS_HZ,
+  EQ_PRESETS,
+  autoPreampDb,
+  formatHz,
+  presetFor,
+  responseCurveDb,
+  responsePath,
+  snapGain,
+} from "./eq";
+
+function check(condition: boolean, message: string): void {
+  if (!condition) throw new Error(`FAILED: ${message}`);
+}
+
+check(responseCurveDb(EQ_PRESETS[0].bands).every((db) => Math.abs(db) < 1e-9), "flat is flat");
+
+const peak = Math.max(...responseCurveDb([0, 0, 0, 0, 0, 12, 0, 0, 0, 0]));
+check(Math.abs(peak - 12) < 0.25, `one +12 dB band peaks near 12 dB (got ${peak})`);
+
+check(autoPreampDb(EQ_PRESETS[0].bands) === 0, "flat needs no preamp");
+check(autoPreampDb(EQ_PRESETS[1].bands) < 0, "a bass boost is pulled down so it cannot clip");
+
+check(snapGain(13) === 12 && snapGain(-0.26) === -0.5 && snapGain(Number.NaN) === 0, "gains clamp and snap");
+check(EQ_PRESETS.every((preset) => preset.bands.length === EQ_BANDS_HZ.length), "every preset has ten bands");
+check(presetFor([6, 5, 4, 2, 0, 0, 0, 0, 0, 0]) === "Bass", "a preset curve is recognised");
+check(presetFor([1, 0, 0, 0, 0, 0, 0, 0, 0, 0]) === null, "a custom curve is not a preset");
+check(formatHz(31) === "31" && formatHz(1000) === "1k" && formatHz(16000) === "16k", "band labels");
+
+const flat = responsePath(EQ_PRESETS[0].bands, 200, 100);
+check(flat.startsWith("M0.0 50.0") && flat.endsWith("L200.0 50.0"), "a flat curve runs along the midline");
+
+console.log("eq: ok");
diff --git a/landing/src/audio/eq.ts b/landing/src/audio/eq.ts
new file mode 100644
index 00000000..f4b30a02
--- /dev/null
+++ b/landing/src/audio/eq.ts
@@ -0,0 +1,94 @@
+// The app's equaliser maths (src/ui/settings/equalizerCurve.ts): same bands, Q and presets, so the curve drawn is the one Zuno plays.
+
+export const EQ_BANDS_HZ = [31, 62, 125, 250, 500, 1000, 2000, 4000, 8000, 16000] as const;
+export const EQ_MAX_DB = 12;
+export const EQ_STEP_DB = 0.5;
+/** `BAND_Q` in equalizer.rs; Web Audio's peaking filter uses the same RBJ definition. */
+export const EQ_Q = 1.4142136;
+
+const SAMPLE_RATE = 48_000;
+const LOWEST_HZ = 1000 * 2 ** -5.5;
+const OCTAVES = 10;
+const POINTS_PER_OCTAVE = 12;
+
+export interface EqPreset {
+  name: string;
+  bands: readonly number[];
+}
+
+export const EQ_PRESETS: readonly EqPreset[] = [
+  { name: "Flat", bands: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
+  { name: "Bass", bands: [6, 5, 4, 2, 0, 0, 0, 0, 0, 0] },
+  { name: "Warm", bands: [2, 3, 3, 2, 1, 0, -1, -1, -2, -2] },
+  { name: "Vocal", bands: [-2, -2, -1, 1, 3, 4, 3, 1, 0, 0] },
+  { name: "Treble", bands: [0, 0, 0, 0, 0, 1, 2, 4, 5, 5] },
+  { name: "Loudness", bands: [5, 4, 2, 0, -1, -1, 0, 2, 4, 4] },
+];
+
+export function snapGain(db: number): number {
+  if (!Number.isFinite(db)) return 0;
+  const clamped = Math.min(EQ_MAX_DB, Math.max(-EQ_MAX_DB, db));
+  return Math.round(clamped / EQ_STEP_DB) * EQ_STEP_DB;
+}
+
+export function presetFor(bands: readonly number[]): string | null {
+  const match = EQ_PRESETS.find((preset) => preset.bands.every((gain, band) => gain === bands[band]));
+  return match?.name ?? null;
+}
+
+export function formatHz(hz: number): string {
+  return hz >= 1000 ? `${hz / 1000}k` : String(hz);
+}
+
+const CURVE_HZ = Array.from(
+  { length: OCTAVES * POINTS_PER_OCTAVE + 1 },
+  (_, index) => LOWEST_HZ * 2 ** (index / POINTS_PER_OCTAVE),
+);
+
+/** 0 at the graph's left edge, 1 at its right, on a log axis; band i sits at (i + 0.5) / 10. */
+function frequencyPosition(hz: number): number {
+  return Math.log2(hz / LOWEST_HZ) / OCTAVES;
+}
+
+/** One peaking biquad's gain at `hz`, from the RBJ coefficients. */
+function peakingDb(centreHz: number, gainDb: number, hz: number): number {
+  const amplitude = 10 ** (gainDb / 40);
+  const omega = (2 * Math.PI * centreHz) / SAMPLE_RATE;
+  const alpha = Math.sin(omega) / (2 * EQ_Q);
+  const a0 = 1 + alpha / amplitude;
+  const b0 = (1 + alpha * amplitude) / a0;
+  const b1 = (-2 * Math.cos(omega)) / a0; // a1 is the same value for a peaking filter
+  const b2 = (1 - alpha * amplitude) / a0;
+  const a2 = (1 - alpha / amplitude) / a0;
+
+  const w = (2 * Math.PI * hz) / SAMPLE_RATE;
+  const [cos1, sin1, cos2, sin2] = [Math.cos(w), Math.sin(w), Math.cos(2 * w), Math.sin(2 * w)];
+  const numerator = (b0 + b1 * cos1 + b2 * cos2) ** 2 + (b1 * sin1 + b2 * sin2) ** 2;
+  const denominator = (1 + b1 * cos1 + a2 * cos2) ** 2 + (b1 * sin1 + a2 * sin2) ** 2;
+  return 10 * Math.log10(numerator / denominator);
+}
+
+/** The bands' combined gain in dB along `CURVE_HZ`. Neighbours overlap, so two +6s peak above 6. */
+export function responseCurveDb(bands: readonly number[]): number[] {
+  return CURVE_HZ.map((hz) =>
+    bands.reduce((sum, gain, band) => (gain === 0 ? sum : sum + peakingDb(EQ_BANDS_HZ[band], gain, hz)), 0),
+  );
+}
+
+/** The preamp that puts the curve's peak at 0 dB, so a boost cannot clip. */
+export function autoPreampDb(bands: readonly number[]): number {
+  const peak = Math.max(...responseCurveDb(bands));
+  return snapGain(Math.floor(-peak / EQ_STEP_DB + 1e-6) * EQ_STEP_DB);
+}
+
+/** The response as an SVG path, 0 dB at mid-height and ±EQ_MAX_DB at the edges. */
+export function responsePath(bands: readonly number[], width: number, height: number): string {
+  return responseCurveDb(bands)
+    .map((db, index) => {
+      const x = frequencyPosition(CURVE_HZ[index]) * width;
+      const clamped = Math.max(-EQ_MAX_DB, Math.min(EQ_MAX_DB, db));
+      const y = height / 2 - (clamped / EQ_MAX_DB) * (height / 2);
+      return `${index === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`;
+    })
+    .join(" ");
+}
diff --git a/landing/src/audio/levels.check.ts b/landing/src/audio/levels.check.ts
new file mode 100644
index 00000000..ba2e96ae
--- /dev/null
+++ b/landing/src/audio/levels.check.ts
@@ -0,0 +1,33 @@
+export {};
+
+import { bandLevels, follow, hzToBin, logBandEdges, meanLevel, onset } from "./levels";
+
+function check(condition: boolean, message: string): void {
+  if (!condition) throw new Error(`FAILED: ${message}`);
+}
+
+const edges = logBandEdges(4, 40, 640);
+check(edges.length === 5 && Math.abs(edges[2] - 160) < 1e-9 && Math.abs(edges[4] - 640) < 1e-9, "edges double per band");
+
+check(hzToBin(0, 48000, 1024) === 0 && hzToBin(30000, 48000, 1024) === 1023, "bins clamp to the range");
+check(hzToBin(12000, 48000, 1024) === 512, "half of Nyquist is the middle bin");
+
+const bins = new Uint8Array(1024);
+const out = new Float32Array(4);
+check(bandLevels(bins, edges, 48000, out).every((level) => level === 0), "silence reads zero");
+
+bins.fill(255);
+check(bandLevels(bins, edges, 48000, out).every((level) => level === 1), "full scale reads one");
+
+bins.fill(0);
+bins[hzToBin(200, 48000, 1024)] = 255;
+bandLevels(bins, edges, 48000, out);
+check(out[2] === 1 && out[0] === 0 && out[1] === 0 && out[3] === 0, "a 200 Hz tone lands in 160–320 Hz only");
+
+check(follow(0, 1, 0.5, 0.1) === 0.5 && Math.abs(follow(1, 0, 0.5, 0.1) - 0.9) < 1e-9, "rises fast, falls slow");
+check(meanLevel([0, 1, 1, 0], 1, 3) === 1 && meanLevel([1], 0, 0) === 0, "mean of a range");
+check(onset(0.5, 0.5) === 0 && onset(0.4, 0.5) === 0, "a held or falling note is not a hit");
+check(Math.abs(onset(0.55, 0.5) - 0.5) < 1e-9 && onset(1, 0.5) === 1, "a jump above the average reads as a hit");
+check(onset(0.5, 0.01) === 0, "silence never hits");
+
+console.log("levels: ok");
diff --git a/landing/src/audio/levels.ts b/landing/src/audio/levels.ts
new file mode 100644
index 00000000..b07ca387
--- /dev/null
+++ b/landing/src/audio/levels.ts
@@ -0,0 +1,47 @@
+// Spectrum maths for the visualisers: log-spaced bands over an AnalyserNode's FFT bins.
+
+/** `count + 1` edges from `minHz` to `maxHz`, evenly spaced on a log axis. */
+export function logBandEdges(count: number, minHz: number, maxHz: number): number[] {
+  const ratio = (maxHz / minHz) ** (1 / count);
+  return Array.from({ length: count + 1 }, (_, index) => minHz * ratio ** index);
+}
+
+/** The FFT bin holding `hz`, clamped to the bins that exist. */
+export function hzToBin(hz: number, sampleRate: number, binCount: number): number {
+  const bin = Math.round((hz / (sampleRate / 2)) * binCount);
+  return Math.min(binCount - 1, Math.max(0, bin));
+}
+
+/** Each band's loudest bin, 0–1. A band narrower than one bin still reads the bin it sits in. */
+export function bandLevels(
+  bins: Uint8Array,
+  edges: readonly number[],
+  sampleRate: number,
+  out: Float32Array,
+): Float32Array {
+  for (let band = 0; band < out.length; band += 1) {
+    const from = hzToBin(edges[band], sampleRate, bins.length);
+    const to = Math.max(from, hzToBin(edges[band + 1], sampleRate, bins.length) - 1);
+    let loudest = 0;
+    for (let bin = from; bin <= to; bin += 1) loudest = Math.max(loudest, bins[bin]);
+    out[band] = loudest / 255;
+  }
+  return out;
+}
+
+/** Envelope follower: moves `attack` of the way up, `release` of the way down, per frame. */
+export function follow(current: number, target: number, attack: number, release: number): number {
+  return current + (target - current) * (target > current ? attack : release);
+}
+
+export function meanLevel(levels: ArrayLike<number>, from: number, to: number): number {
+  let sum = 0;
+  for (let index = from; index < to; index += 1) sum += levels[index];
+  return to > from ? sum / (to - from) : 0;
+}
+
+/** How far a fast envelope sits above a slow one: near 0 on a held note, near 1 on a hit. */
+export function onset(fast: number, slow: number): number {
+  if (slow < 0.02) return 0;
+  return Math.min(1, Math.max(0, ((fast - slow) / slow) * 5));
+}
diff --git a/landing/src/audio/track.check.ts b/landing/src/audio/track.check.ts
new file mode 100644
index 00000000..197435d8
--- /dev/null
+++ b/landing/src/audio/track.check.ts
@@ -0,0 +1,14 @@
+export {};
+
+import { formatTime, scrobbleAt } from "./track";
+
+function check(condition: boolean, message: string): void {
+  if (!condition) throw new Error(`FAILED: ${message}`);
+}
+
+check(scrobbleAt(20) === null && scrobbleAt(Number.NaN) === null, "short or unknown tracks never scrobble");
+check(scrobbleAt(238) === 119, "half the track");
+check(scrobbleAt(600) === 240, "or four minutes, whichever comes first");
+check(formatTime(0) === "0:00" && formatTime(238.9) === "3:58" && formatTime(-1) === "0:00", "m:ss");
+
+console.log("track: ok");
diff --git a/landing/src/audio/track.ts b/landing/src/audio/track.ts
new file mode 100644
index 00000000..c6cc359c
--- /dev/null
+++ b/landing/src/audio/track.ts
@@ -0,0 +1,11 @@
+/** Last.fm's rule: a track over 30 s scrobbles once half of it, or four minutes, has played. */
+export function scrobbleAt(durationSec: number): number | null {
+  if (!(durationSec > 30)) return null;
+  return Math.min(durationSec / 2, 240);
+}
+
+export function formatTime(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+  const whole = Math.floor(seconds);
+  return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`;
+}
diff --git a/landing/src/components/Deck.tsx b/landing/src/components/Deck.tsx
new file mode 100644
index 00000000..9c701628
--- /dev/null
+++ b/landing/src/components/Deck.tsx
@@ -0,0 +1,125 @@
+import type { CSSProperties } from "react";
+import { Spectrum } from "./Spectrum";
+import { PauseIcon, PlayIcon } from "./icons";
+import { FOCUS_RING, cn } from "./ui";
+import { TRACK, seek, togglePlayback, usePlayer } from "../audio/demoPlayer";
+import { formatTime } from "../audio/track";
+import { useReducedMotion } from "../useReducedMotion";
+
+/** Pivot at (88, 14) in the deck's 0–100 box; the arm rotates about it in styles.css. */
+function Tonearm() {
+  return (
+    <svg className="pointer-events-none absolute inset-0 size-full overflow-visible" viewBox="0 0 100 100" aria-hidden="true">
+      <circle cx="88" cy="14" r="6.5" className="arm-base" />
+      <g className="tonearm">
+        <line x1="88" y1="14" x2="90.3" y2="6.2" className="arm-weight" />
+        <line x1="88" y1="14" x2="70.6" y2="73.5" className="arm-rod" />
+        <line x1="70.6" y1="73.5" x2="67.8" y2="81.6" className="arm-head" />
+      </g>
+      <circle cx="88" cy="14" r="2.6" className="arm-pivot" />
+    </svg>
+  );
+}
+
+function Record() {
+  return (
+    // A mouse shortcut for the play button below, which is the accessible control.
+    <div className="record" onClick={togglePlayback} aria-hidden="true">
+      <div className="record-spin">
+        <div className="record-grooves" />
+        <svg className="record-text" viewBox="0 0 100 100">
+          <path id="deck-label-ring" d="M50 50m-23.5 0a23.5 23.5 0 1 1 47 0a23.5 23.5 0 1 1-47 0" fill="none" />
+          <text>
+            <textPath href="#deck-label-ring">
+              LOW TIDE · TOM RHODES · HUSTLE STANDARD · ZUNO_ · LOW TIDE · TOM RHODES · HUSTLE STANDARD ·
+            </textPath>
+          </text>
+        </svg>
+        {/* Text above and below the spindle, the way a real label keeps clear of the hole. */}
+        <div className="record-label">
+          <span className="text-[19cqi] font-bold leading-none tracking-[-0.04em]">zuno_</span>
+          <span className="spindle" />
+          <span className="font-mono text-[6.5cqi] uppercase tracking-[0.16em] opacity-80">side a · 33 rpm</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function NowPlaying() {
+  const { playing, started, time, duration } = usePlayer();
+  const progress = duration > 0 ? (time / duration) * 100 : 0;
+
+  return (
+    <div className="relative mx-auto -mt-3 w-full max-w-[22rem]">
+      {started ? null : (
+        <p className="nudge pointer-events-none absolute -top-8 left-0 right-0 text-center font-mono text-[12px] text-primary">
+          press play
+        </p>
+      )}
+      <div className="flex items-center gap-3.5 rounded-[1.4rem] bg-card/50 p-2.5 pr-4 backdrop-blur-xl">
+        <button
+          type="button"
+          onClick={togglePlayback}
+          aria-label={playing ? `Pause ${TRACK.title}` : `Play ${TRACK.title} by ${TRACK.artist}`}
+          className={cn(
+            "grid size-12 shrink-0 place-items-center rounded-full bg-foreground text-background transition-transform hover:scale-105 active:scale-95",
+            FOCUS_RING,
+          )}
+        >
+          {playing ? <PauseIcon size={18} /> : <PlayIcon size={18} className="translate-x-px" />}
+        </button>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-baseline justify-between gap-3">
+            <p className="truncate text-[15px] font-semibold tracking-[-0.01em]">{TRACK.title}</p>
+            <p className="shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground">
+              {formatTime(time)} / {formatTime(duration)}
+            </p>
+          </div>
+          <p className="truncate text-[13px] text-muted-foreground">{TRACK.artist}</p>
+          <input
+            type="range"
+            min={0}
+            max={duration || 1}
+            step="any"
+            value={time}
+            onChange={(event) => {
+              if (!started) togglePlayback();
+              seek(Number(event.currentTarget.value));
+            }}
+            aria-label="Seek"
+            aria-valuetext={`${formatTime(time)} of ${formatTime(duration)}`}
+            className={cn("seek mt-1 w-full", FOCUS_RING)}
+            style={{ "--seek": `${progress}%` } as CSSProperties}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Deck() {
+  const reduced = useReducedMotion();
+
+  return (
+    <div className="relative mx-auto w-full max-w-[24rem] lg:mr-6">
+      <div className="deck">
+        <div className="deck-glow" aria-hidden="true" />
+        <Spectrum className="spectrum" />
+        <Record />
+        <Tonearm />
+        <div className="screen-ghost deck-ghost" aria-hidden="true">
+          <video
+            className="float size-full object-cover"
+            src="./zuno-character.mp4"
+            autoPlay={!reduced}
+            muted
+            loop
+            playsInline
+          />
+        </div>
+      </div>
+      <NowPlaying />
+    </div>
+  );
+}
diff --git a/landing/src/components/Downloads.tsx b/landing/src/components/Downloads.tsx
index 0bb93e58..651a81b8 100644
--- a/landing/src/components/Downloads.tsx
+++ b/landing/src/components/Downloads.tsx
@@ -1,28 +1,13 @@
-import { useState } from "react";
+import { useState, type KeyboardEvent } from "react";
 import { BrandIcon, OS_ICON } from "./brandIcons";
-import { CheckIcon, DownloadIcon, ShieldIcon } from "./icons";
-import { LinkButton, Mono, cn } from "./ui";
-import {
-  RELEASES_URL,
-  formatSize,
-  type LatestRelease,
-  type PlatformId,
-} from "../releases";
+import { ArrowUpRightIcon, DownloadIcon, ShieldIcon } from "./icons";
+import { CopyBlock, FOCUS_RING, LinkButton, SectionHeading, cn } from "./ui";
+import { RELEASES_URL, formatSize, timeAgo, type LatestRelease, type PlatformId } from "../releases";
 
-/**
- * One tile per operating system, each with its own format choice.
- *
- * A flat list of every asset makes the reader do the matching: four `.dmg`-ish names, two of
- * which are wrong for their machine. Grouping by OS and putting the variants behind a small
- * segmented control means there is exactly one decision per tile, and it is one the reader can
- * actually answer — "Apple Silicon or Intel" is a question about their laptop, not about a
- * filename.
- */
 interface Variant {
   label: string;
-  /** Which resolved platform build this maps to. */
   platform: PlatformId;
-  /** Narrows further within a platform's assets — Linux ships two formats under one id. */
+  /** Narrows within a platform's assets: Linux ships three formats under one id. */
   match?: RegExp;
   note?: string;
 }
@@ -30,18 +15,17 @@ interface Variant {
 interface OsTile {
   id: "windows" | "macos" | "linux";
   name: string;
-  icon: string;
-  /** Which detected platforms should light this tile up. */
   detects: readonly PlatformId[];
   requirement: string;
   variants: readonly Variant[];
 }
 
+const MAC_NOTE = "Unsigned: right-click → Open the first time.";
+
 const TILES: readonly OsTile[] = [
   {
     id: "windows",
     name: "Windows",
-    icon: OS_ICON.windows,
     detects: ["windows"],
     requirement: "Windows 10 and 11 · 64-bit",
     variants: [
@@ -52,188 +36,152 @@ const TILES: readonly OsTile[] = [
   {
     id: "macos",
     name: "macOS",
-    icon: OS_ICON.macos,
     detects: ["macos-arm", "macos-intel"],
     requirement: "macOS 12 and later",
     variants: [
-      {
-        label: "Apple Silicon",
-        platform: "macos-arm",
-        note: "unsigned — right-click → Open on first launch",
-      },
-      {
-        label: "Intel",
-        platform: "macos-intel",
-        note: "unsigned — right-click → Open on first launch",
-      },
+      { label: "Apple Silicon", platform: "macos-arm", note: MAC_NOTE },
+      { label: "Intel", platform: "macos-intel", note: MAC_NOTE },
     ],
   },
   {
     id: "linux",
     name: "Linux",
-    icon: OS_ICON.linux,
     detects: ["linux"],
     requirement: "x86_64 · glibc 2.31+",
     variants: [
-      { label: "AppImage", platform: "linux", match: /\.AppImage$/i, note: "needs chmod +x" },
-      { label: ".deb", platform: "linux", match: /\.deb$/i, note: "apt-based distributions" },
-      { label: ".rpm", platform: "linux", match: /\.rpm$/i, note: "fedora and opensuse" },
+      { label: "AppImage", platform: "linux", match: /\.AppImage$/i, note: "chmod +x, then run it." },
+      { label: ".deb", platform: "linux", match: /\.deb$/i, note: "Debian, Ubuntu, Mint." },
+      { label: ".rpm", platform: "linux", match: /\.rpm$/i, note: "Fedora, openSUSE." },
     ],
   },
 ];
 
-function Tile({
-  tile,
-  release,
-  detected,
-}: {
-  tile: OsTile;
-  release: LatestRelease | null;
-  detected: PlatformId | null;
-}) {
+function Tile({ tile, release, detected }: { tile: OsTile; release: LatestRelease | null; detected: PlatformId | null }) {
   const isYours = detected !== null && tile.detects.includes(detected);
-  /* Open on the variant that matches the reader's machine, not always the first. */
-  const [variantIndex, setVariantIndex] = useState(() => {
-    const index = tile.variants.findIndex((variant) => variant.platform === detected);
-    return index >= 0 ? index : 0;
-  });
-
+  const [variantIndex, setVariantIndex] = useState(() => Math.max(0, tile.variants.findIndex((variant) => variant.platform === detected)));
   const variant = tile.variants[variantIndex];
   const build = release?.downloads[variant.platform];
-  /*
-   * Linux ships two formats behind one platform id, so the resolved asset may be the AppImage
-   * when the reader asked for the .deb. Rather than link the wrong file, the variant falls back
-   * to the releases page — a correct extra click beats a confident wrong download.
-   */
+  // Linux resolves one asset per id; if it is not the chosen format, the releases page beats a wrong file.
   const asset = build && (!variant.match || variant.match.test(build.name)) ? build : undefined;
 
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const delta = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+    if (delta === 0) return;
+    event.preventDefault();
+    const next = (variantIndex + delta + tile.variants.length) % tile.variants.length;
+    setVariantIndex(next);
+    event.currentTarget.querySelectorAll<HTMLButtonElement>("[role=radio]")[next]?.focus();
+  };
+
   return (
     <article
       className={cn(
-        "group relative flex flex-col gap-5 rounded-2xl p-6 ring-1 transition-colors",
-        isYours ? "bg-card/70 ring-primary/30" : "bg-card/30 ring-border hover:bg-card/50",
+        "spotlight reveal relative flex flex-col gap-6 overflow-hidden rounded-3xl p-6 sm:p-7",
+        isYours ? "bg-card/70" : "bg-card/35",
       )}
     >
+      {isYours ? (
+        <span
+          className="pointer-events-none absolute -top-24 left-1/2 h-48 w-3/4 -translate-x-1/2 rounded-full bg-primary/25 blur-3xl"
+          aria-hidden="true"
+        />
+      ) : null}
+
       <div className="flex items-start justify-between gap-3">
-        <BrandIcon icon={tile.icon} width={34} height={34} className="text-foreground" />
+        <BrandIcon icon={OS_ICON[tile.id]} width={36} height={36} className="text-foreground" />
         {isYours ? (
-          <span className="rounded-full bg-primary/10 px-2 py-0.5 font-mono text-[11px] uppercase tracking-wider text-primary">
-            your system
-          </span>
+          <span className="rounded-full bg-primary/15 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wider text-primary">your system</span>
         ) : null}
       </div>
 
       <div className="flex flex-col gap-1">
-        <h3 className="text-xl font-semibold text-foreground">{tile.name}</h3>
-        <Mono>{tile.requirement}</Mono>
+        <h3 className="text-2xl font-semibold tracking-[-0.03em]">{tile.name}</h3>
+        <span className="font-mono text-[12px] text-muted-foreground">{tile.requirement}</span>
       </div>
 
-      {tile.variants.length > 1 ? (
-        <div
-          className="flex items-center gap-0.5 rounded-full bg-background/60 p-0.5 ring-1 ring-border"
-          role="tablist"
-          aria-label={`${tile.name} format`}
-        >
-          {tile.variants.map((option, index) => (
-            <button
-              key={option.label}
-              type="button"
-              role="tab"
-              aria-selected={index === variantIndex}
-              onClick={() => setVariantIndex(index)}
-              className={cn(
-                "flex-1 rounded-full px-3 py-2 font-mono text-[13px] transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                index === variantIndex
-                  ? "bg-card text-foreground"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      ) : null}
+      <div className="flex gap-1 rounded-full bg-background/70 p-1" role="radiogroup" aria-label={`${tile.name} format`} onKeyDown={onKeyDown}>
+        {tile.variants.map((option, index) => (
+          <button
+            key={option.label}
+            type="button"
+            role="radio"
+            aria-checked={index === variantIndex}
+            tabIndex={index === variantIndex ? 0 : -1}
+            onClick={() => setVariantIndex(index)}
+            className={cn(
+              "flex-1 rounded-full px-2 py-2 font-mono text-[12px] transition-colors",
+              FOCUS_RING,
+              "focus-visible:ring-inset",
+              index === variantIndex ? "bg-card text-foreground" : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
 
       <div className="mt-auto flex flex-col gap-3">
-        <LinkButton
-          href={asset?.url ?? RELEASES_URL}
-          rel="noopener"
-          variant={isYours ? "solid" : "muted"}
-          className="w-full"
-        >
+        <LinkButton href={asset?.url ?? RELEASES_URL} rel="noopener" variant={isYours ? "solid" : "ghost"} className="w-full">
           <DownloadIcon size={18} />
           Download
         </LinkButton>
-
-        <div className="flex min-h-8 flex-col gap-0.5">
-          <Mono className="truncate">
+        <div className="flex min-h-10 flex-col gap-0.5">
+          <span className="truncate font-mono text-[12px] text-muted-foreground">
             {asset ? `${asset.name} · ${formatSize(asset.size)}` : "see all releases"}
-          </Mono>
-          {variant.note ? (
-            <span className="text-[13px] leading-relaxed text-muted-foreground/70">
-              {variant.note}
-            </span>
-          ) : null}
+          </span>
+          {variant.note ? <span className="text-[13px] text-muted-foreground/75">{variant.note}</span> : null}
         </div>
       </div>
     </article>
   );
 }
 
-const ASSURANCES: readonly string[] = [
-  "No telemetry — no analytics, crash reporting or usage pings",
-  "Your own Google sign-in — Zuno has no account to create",
-  "Apache 2.0, built from the public tree by CI",
-];
-
-export function Downloads({
-  release,
-  platform,
-}: {
-  release: LatestRelease | null;
-  platform: PlatformId | null;
-}) {
+export function Downloads({ release, platform }: { release: LatestRelease | null; platform: PlatformId | null }) {
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-        <span className="flex items-baseline gap-2">
-          <span className="text-lg font-semibold text-foreground">
-            {release ? `v${release.version}` : "Latest release"}
+    <section id="download">
+      <div className="mx-auto max-w-6xl px-6 py-20 lg:py-28">
+        <SectionHeading
+          index="03"
+          label="download"
+          title="Get Zuno."
+          lede="Updates install themselves."
+        />
+
+        <div className="mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 font-mono text-[12px] text-muted-foreground">
+          <span className="text-foreground">{release ? `v${release.version}` : "latest"}</span>
+          {release ? <span>released {timeAgo(release.publishedAt)}</span> : null}
+          <span className="flex items-center gap-1.5 text-primary">
+            <ShieldIcon size={14} />
+            signed updates
           </span>
-          <Mono>· updates install themselves after the first run</Mono>
-        </span>
-        <span className="ml-auto flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-primary">
-          <ShieldIcon size={13} />
-          <span className="font-mono text-[13px]">signed</span>
-        </span>
-      </div>
+        </div>
 
-      <div className="grid gap-4 md:grid-cols-3">
-        {TILES.map((tile) => (
-          <Tile key={tile.id} tile={tile} release={release} detected={platform} />
-        ))}
-      </div>
+        <div className="mt-12 grid grid-cols-1 gap-4 md:grid-cols-3">
+          {TILES.map((tile) => (
+            <Tile key={tile.id} tile={tile} release={release} detected={platform} />
+          ))}
+        </div>
 
-      <div className="flex flex-col gap-3 rounded-2xl bg-card/30 p-6 ring-1 ring-border">
-        {ASSURANCES.map((line) => (
-          <div key={line} className="flex items-start gap-3">
-            <span
-              className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary/10 text-primary"
-              aria-hidden="true"
-            >
-              <CheckIcon size={12} />
-            </span>
-            <span className="text-base text-muted-foreground">{line}</span>
+        <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-[1fr_auto]">
+          <div className="flex flex-col gap-3 rounded-3xl bg-card/35 p-5 sm:flex-row sm:items-center sm:gap-5">
+            <span className="shrink-0 pl-1 text-[15px] font-medium">On Arch?</span>
+            <div className="min-w-0 flex-1">
+              <CopyBlock label="the AUR install command" lines={["yay -S zuno"]} />
+            </div>
           </div>
-        ))}
-        <p className="mt-1">
-          <Mono>
-            no subscription · no upsell · no bundled software · no ad blocking or DRM
-            circumvention — it plays what your account can already play
-          </Mono>
-        </p>
+          <a
+            href={RELEASES_URL}
+            rel="noopener"
+            className={cn(
+              "flex items-center justify-between gap-6 rounded-3xl bg-card/35 px-6 py-5 text-[15px] font-medium transition-colors hover:bg-card/60",
+              FOCUS_RING,
+            )}
+          >
+            All releases & changelogs
+            <ArrowUpRightIcon size={18} className="text-muted-foreground" />
+          </a>
+        </div>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/landing/src/components/Equalizer.tsx b/landing/src/components/Equalizer.tsx
new file mode 100644
index 00000000..b3750a04
--- /dev/null
+++ b/landing/src/components/Equalizer.tsx
@@ -0,0 +1,80 @@
+import { useMemo, type CSSProperties } from "react";
+import { PlayIcon } from "./icons";
+import { FOCUS_RING, cn } from "./ui";
+import { applyEqPreset, setEqBand, togglePlayback, useEq, usePlayer } from "../audio/demoPlayer";
+import { EQ_BANDS_HZ, EQ_MAX_DB, EQ_PRESETS, EQ_STEP_DB, formatHz, responsePath } from "../audio/eq";
+
+const signed = (db: number) => `${db > 0 ? "+" : ""}${db} dB`;
+
+/** The app's ten-band EQ, wired to Web Audio filters on the demo track: it really changes the sound. */
+export function Equalizer() {
+  const { bands, preset } = useEq();
+  const { playing } = usePlayer();
+  const curve = useMemo(() => responsePath(bands, 300, 100), [bands]);
+
+  return (
+    <div className="flex flex-col gap-5">
+      <svg viewBox="0 0 300 100" preserveAspectRatio="none" className="h-32 w-full overflow-visible" aria-hidden="true">
+        <line x1="0" y1="50" x2="300" y2="50" className="eq-zero" />
+        <path d={`${curve} L300 50 L0 50 Z`} className="eq-fill" />
+        <path d={curve} className="eq-curve" />
+      </svg>
+
+      <div className="grid grid-cols-10 justify-items-center gap-1">
+        {EQ_BANDS_HZ.map((hz, band) => {
+          const position = ((bands[band] + EQ_MAX_DB) / (EQ_MAX_DB * 2)) * 100;
+          return (
+            <div key={hz} className="flex flex-col items-center gap-2">
+              <div className="h-28">
+                <input
+                  type="range"
+                  min={-EQ_MAX_DB}
+                  max={EQ_MAX_DB}
+                  step={EQ_STEP_DB}
+                  value={bands[band]}
+                  onChange={(event) => setEqBand(band, Number(event.currentTarget.value))}
+                  aria-label={`${formatHz(hz)} Hz`}
+                  aria-valuetext={signed(bands[band])}
+                  className={cn("eq-slider rounded-full", FOCUS_RING)}
+                  style={{ "--lo": `${Math.min(50, position)}%`, "--hi": `${Math.max(50, position)}%` } as CSSProperties}
+                />
+              </div>
+              <span className="font-mono text-[10px] text-muted-foreground">{formatHz(hz)}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-1.5" role="group" aria-label="Presets">
+        {EQ_PRESETS.map((option) => (
+          <button
+            key={option.name}
+            type="button"
+            aria-pressed={preset === option.name}
+            onClick={() => applyEqPreset(option.name)}
+            className={cn(
+              "rounded-full px-3 py-1.5 text-[13px] transition-colors",
+              FOCUS_RING,
+              preset === option.name ? "bg-primary/15 text-foreground" : "text-muted-foreground hover:bg-card hover:text-foreground",
+            )}
+          >
+            {option.name}
+          </button>
+        ))}
+        {playing ? null : (
+          <button
+            type="button"
+            onClick={togglePlayback}
+            className={cn(
+              "ml-auto flex items-center gap-1.5 rounded-full bg-foreground px-3 py-1.5 text-[13px] font-medium text-background",
+              FOCUS_RING,
+            )}
+          >
+            <PlayIcon size={12} />
+            Play to hear it
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/landing/src/components/Features.tsx b/landing/src/components/Features.tsx
index 62080c69..bf398f1a 100644
--- a/landing/src/components/Features.tsx
+++ b/landing/src/components/Features.tsx
@@ -1,312 +1,123 @@
-import { useState, type ReactNode } from "react";
-import { TabsDemo } from "./TabsDemo";
-import { Mono, cn } from "./ui";
+import type { PointerEvent, ReactNode } from "react";
+import { Equalizer } from "./Equalizer";
+import { Presence } from "./Presence";
+import { ThemeCompare } from "./ThemeCompare";
+import { CheckIcon, DownloadIcon, FolderIcon, PauseIcon, PlayIcon, SkipIcon } from "./icons";
+import { SectionHeading, cn } from "./ui";
+import { TRACK, usePlayer } from "../audio/demoPlayer";
 
-/** Download rows mid-flight: one done, one in progress, one queued. */
-function OfflineVisual() {
-  const rows = [
-    { name: "Am I Dreaming", state: "done" as const, pct: 100 },
-    { name: "Creepin'", state: "active" as const, pct: 62 },
-    { name: "Superhero", state: "queued" as const, pct: 0 },
-    { name: "Around Me", state: "queued" as const, pct: 0 },
-  ];
+function Cell({ className, title, body, children }: { className?: string; title: string; body: string; children: ReactNode }) {
+  return (
+    <article className={cn("spotlight reveal flex flex-col gap-6 rounded-3xl bg-card/40 p-5 sm:p-6", className)}>
+      <div className="flex flex-col gap-1 px-1">
+        <h3 className="text-[17px] font-semibold tracking-[-0.015em]">{title}</h3>
+        <p className="text-[15px] text-muted-foreground">{body}</p>
+      </div>
+      <div className="mt-auto">{children}</div>
+    </article>
+  );
+}
 
+const DOWNLOADS = [
+  { name: "Low Tide", state: "done" },
+  { name: "Anticipating", state: "active" },
+  { name: "Promise", state: "queued" },
+] as const;
+
+function OfflineQueue() {
   return (
-    <div className="flex flex-col gap-4">
-      {rows.map((row) => (
-        <div key={row.name} className="flex items-center gap-3">
+    <div className="flex flex-col gap-1 rounded-2xl bg-background/80 p-2">
+      {DOWNLOADS.map((row) => (
+        <div key={row.name} className="flex items-center gap-3 rounded-xl px-2.5 py-2">
           <span
             className={cn(
-              "grid size-6 shrink-0 place-items-center rounded-full text-[11px]",
-              row.state === "done" && "bg-primary/15 text-primary",
-              row.state === "active" && "bg-primary/10 text-primary",
-              row.state === "queued" && "bg-muted text-muted-foreground",
+              "grid size-7 shrink-0 place-items-center rounded-full",
+              row.state === "queued" ? "bg-muted text-muted-foreground" : "bg-primary/15 text-primary",
             )}
             aria-hidden="true"
           >
-            {row.state === "done" ? "✓" : row.state === "active" ? "↓" : "·"}
+            {row.state === "done" ? <CheckIcon size={14} /> : <DownloadIcon size={14} />}
           </span>
           <span className="min-w-0 flex-1">
-            <span className="mb-1.5 block truncate text-base text-muted-foreground">{row.name}</span>
-            <span className="block h-1 w-full overflow-hidden rounded-full bg-muted">
+            <span className="block truncate text-sm">{row.name}</span>
+            <span className="mt-1.5 block h-1 overflow-hidden rounded-full bg-muted">
               <span
-                className="block h-full rounded-full bg-primary transition-[width] duration-700"
-                style={{ width: `${row.pct}%` }}
+                className={cn(
+                  "block h-full origin-left rounded-full bg-primary",
+                  row.state === "active" && "dl-bar",
+                  row.state === "queued" && "scale-x-0",
+                )}
               />
             </span>
           </span>
         </div>
       ))}
-      <Mono>1 of 4 · 128 kbps AAC · 8 GB cap</Mono>
-    </div>
-  );
-}
-
-/** Three lyric lines with the current one lit. */
-function LyricsVisual() {
-  const lines = [
-    "I've been so lost since you've been gone",
-    "Am I dreaming?",
-    "Or is this real now",
-    "Tell me what you want",
-  ];
-  return (
-    <div className="flex flex-col gap-3">
-      {lines.map((line, index) => (
-        <span
-          key={line}
-          className={cn(
-            "text-xl transition-colors",
-            index === 1
-              ? "font-medium text-foreground"
-              : index === 0
-                ? "text-muted-foreground/40"
-                : "text-muted-foreground/60",
-          )}
-        >
-          {line}
-        </span>
-      ))}
-      <Mono className="mt-1">synced · not available on the web client</Mono>
-    </div>
-  );
-}
-
-/** The mini player pill, at rest and expanded. */
-function MiniPlayerVisual() {
-  return (
-    <div className="flex flex-col gap-5">
-      <div className="flex items-center gap-3 self-start rounded-full bg-background/80 py-2 pl-2 pr-5 ring-1 ring-border">
-        <span className="size-9 shrink-0 rounded-full bg-muted" aria-hidden="true" />
-        <span className="flex flex-col">
-          <span className="text-base font-medium text-foreground">Am I Dreaming</span>
-          <span className="text-sm text-muted-foreground">Metro Boomin</span>
+      <div className="flex items-center gap-3 rounded-xl px-2.5 py-2">
+        <span className="grid size-7 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground" aria-hidden="true">
+          <FolderIcon size={14} />
         </span>
+        <span className="min-w-0 truncate font-mono text-[12px] text-muted-foreground">~/Music/FLAC</span>
       </div>
-      <div className="flex items-center gap-2 self-start rounded-full bg-background/60 p-2 ring-1 ring-border">
-        <span className="size-7 rounded-full bg-muted" aria-hidden="true" />
-      </div>
-      <Mono>appears when you tab away · drag it anywhere</Mono>
-    </div>
-  );
-}
-
-/** Local paths sitting in the same library. */
-function LocalVisual() {
-  return (
-    <div className="flex flex-col gap-4">
-      {["~/Music/FLAC", "D:\\Rips\\2024", "~/Downloads/live-sets"].map((path) => (
-        <div key={path} className="flex items-center gap-3">
-          <span className="grid size-6 shrink-0 place-items-center rounded-md bg-muted text-[11px] text-muted-foreground" aria-hidden="true">
-            ♪
-          </span>
-          <span className="truncate font-mono text-sm text-muted-foreground">{path}</span>
-        </div>
-      ))}
-      <Mono>same rows, same queue, same player · tag editor included</Mono>
     </div>
   );
 }
 
-/** The two integration toggles, as they appear in the toolbar. */
-function IntegrationsVisual() {
+/** The app's capsule; hover the card to open it. */
+function MiniPreview() {
+  const { playing } = usePlayer();
   return (
-    <div className="flex flex-col gap-5">
-      {[
-        { label: "Discord Rich Presence", on: true, detail: "shows the artist, not the app" },
-        { label: "Last.fm scrobbling", on: false, detail: "one click to stop broadcasting" },
-      ].map((item) => (
-        <div key={item.label} className="flex items-start justify-between gap-4">
-          <span className="flex flex-col gap-0.5">
-            <span className="text-base text-foreground">{item.label}</span>
-            <Mono>{item.detail}</Mono>
-          </span>
-          <span
-            className={cn(
-              "mt-1 flex h-6 w-11 shrink-0 items-center rounded-full p-0.5 transition-colors",
-              item.on ? "bg-primary" : "bg-muted",
-            )}
-            aria-hidden="true"
-          >
-            <span
-              className={cn(
-                "size-5 rounded-full bg-background transition-transform",
-                item.on && "translate-x-5",
-              )}
-            />
+    <div className="grid min-h-[13.5rem] place-items-center rounded-2xl bg-background/80 p-6">
+      <div className="flex h-11 w-40 items-center gap-2 overflow-hidden rounded-[22px] bg-popover pl-1.5 pr-3 shadow-xl transition-[width,height,border-radius] duration-300 [transition-timing-function:var(--ease-out-expo)] group-hover/cell:h-24 group-hover/cell:w-64 group-hover/cell:flex-wrap group-hover/cell:rounded-3xl group-hover/cell:py-2">
+        <img src={TRACK.cover} alt="" className="size-8 shrink-0 rounded-full bg-card p-0.5" />
+        <span className="min-w-0 flex-1">
+          <span className="block truncate text-[12px] font-semibold">{TRACK.title}</span>
+          <span className="block truncate text-[10px] text-muted-foreground">{TRACK.artist}</span>
+        </span>
+        <span className="hidden w-full items-center justify-center gap-2 group-hover/cell:flex" aria-hidden="true">
+          <SkipIcon back size={14} className="text-muted-foreground" />
+          <span className="grid size-7 place-items-center rounded-full bg-foreground text-background">
+            {playing ? <PauseIcon size={12} /> : <PlayIcon size={12} />}
           </span>
-        </div>
-      ))}
+          <SkipIcon size={14} className="text-muted-foreground" />
+        </span>
+      </div>
     </div>
   );
 }
 
-interface Feature {
-  id: string;
-  title: string;
-  body: string;
-  visual: ReactNode;
-}
-
-const FEATURES: readonly Feature[] = [
-  {
-    id: "tabs",
-    title: "Tabs that each keep playing",
-    body:
-      "Open a second tab and the first carries on. Each holds its own queue, volume and position, and the player bar follows whichever is playing — not whichever you are looking at.",
-    visual: <TabsDemo />,
-  },
-  {
-    id: "offline",
-    title: "Offline downloads",
-    body:
-      "A song, a selection, or a whole album or playlist. Its own quality setting, its own size cap, and a queue you can watch.",
-    visual: <OfflineVisual />,
-  },
-  {
-    id: "lyrics",
-    title: "Synced lyrics",
-    body: "Line by line and in time with the track, which the official web client does not offer.",
-    visual: <LyricsVisual />,
-  },
-  {
-    id: "mini",
-    title: "A mini player",
-    body:
-      "Click away from the window and a small pill appears. Hover to expand it, drag it anywhere, click through to come back.",
-    visual: <MiniPlayerVisual />,
-  },
-  {
-    id: "local",
-    title: "Your local files, in the same list",
-    body:
-      "Point Zuno at folders on your machine and they sit alongside your library — nothing uploaded, and a tag editor for fixing metadata.",
-    visual: <LocalVisual />,
-  },
-  {
-    id: "integrations",
-    title: "Last.fm and Discord",
-    body:
-      "Scrobbling and Rich Presence, each one click away in the toolbar for when you would rather not broadcast what you are playing.",
-    visual: <IntegrationsVisual />,
-  },
-];
-
-/**
- * Features as an explorer, not an inventory.
- *
- * A grid of six cards gives every feature identical weight and asks the reader to evaluate all
- * of them at once. This shows one at a time, at full size, with the list acting as a table of
- * contents — the reader picks what they care about and gets a real look at it rather than a
- * thumbnail of everything.
- *
- * It is a proper tablist: arrow keys move between features, and the panel is labelled by the tab
- * that opened it. On narrow screens the same data renders as a stack, because a two-column
- * explorer on a phone is a column of buttons above a column of panels.
- */
 export function Features() {
-  const [activeId, setActiveId] = useState(FEATURES[0].id);
-  const active = FEATURES.find((feature) => feature.id === activeId) ?? FEATURES[0];
-
-  const move = (delta: number) => {
-    const index = FEATURES.findIndex((feature) => feature.id === activeId);
-    const next = FEATURES[(index + delta + FEATURES.length) % FEATURES.length];
-    setActiveId(next.id);
-    document.getElementById(`feature-tab-${next.id}`)?.focus();
+  // One listener for the grid: it moves the light inside whichever card the pointer is on.
+  const moveSpotlight = (event: PointerEvent<HTMLDivElement>) => {
+    const cell = (event.target as Element).closest<HTMLElement>(".spotlight");
+    if (!cell) return;
+    const box = cell.getBoundingClientRect();
+    cell.style.setProperty("--mx", `${event.clientX - box.left}px`);
+    cell.style.setProperty("--my", `${event.clientY - box.top}px`);
   };
 
   return (
-    <div className="grid gap-8 lg:grid-cols-[minmax(0,22rem)_minmax(0,1fr)] lg:gap-12">
-      <div
-        className="flex flex-col max-lg:hidden"
-        role="tablist"
-        aria-orientation="vertical"
-        aria-label="Features"
-        onKeyDown={(event) => {
-          if (event.key === "ArrowDown") {
-            event.preventDefault();
-            move(1);
-          }
-          if (event.key === "ArrowUp") {
-            event.preventDefault();
-            move(-1);
-          }
-        }}
-      >
-        {FEATURES.map((feature, index) => {
-          const isActive = feature.id === activeId;
-          return (
-            <button
-              key={feature.id}
-              id={`feature-tab-${feature.id}`}
-              type="button"
-              role="tab"
-              aria-selected={isActive}
-              aria-controls={`feature-panel-${feature.id}`}
-              tabIndex={isActive ? 0 : -1}
-              onClick={() => setActiveId(feature.id)}
-              className={cn(
-                "group relative flex items-start gap-4 rounded-xl px-4 py-4 text-left transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                isActive ? "bg-card/60" : "hover:bg-card/30",
-              )}
-            >
-              <span
-                className={cn(
-                  "absolute inset-y-3 left-0 w-0.5 rounded-full transition-colors",
-                  isActive ? "bg-primary" : "bg-transparent",
-                )}
-                aria-hidden="true"
-              />
-              <Mono className={cn("pt-0.5 transition-colors", isActive && "text-primary")}>
-                {String(index + 1).padStart(2, "0")}
-              </Mono>
-              <span className="flex min-w-0 flex-col gap-1">
-                <span
-                  className={cn(
-                    "text-base font-medium transition-colors",
-                    isActive ? "text-foreground" : "text-muted-foreground",
-                  )}
-                >
-                  {feature.title}
-                </span>
-                {isActive ? (
-                  <span className="text-pretty text-base leading-relaxed text-muted-foreground">
-                    {feature.body}
-                  </span>
-                ) : null}
-              </span>
-            </button>
-          );
-        })}
-      </div>
-
-      <div
-        id={`feature-panel-${active.id}`}
-        role="tabpanel"
-        aria-labelledby={`feature-tab-${active.id}`}
-        className="flex min-h-[26rem] flex-col justify-center rounded-2xl bg-card/30 p-6 ring-1 ring-border max-lg:hidden sm:p-8"
-      >
-        {active.visual}
-      </div>
+    <section id="features">
+      <div className="mx-auto max-w-6xl px-6 py-20 lg:py-28">
+        <SectionHeading index="01" label="the details" title="Everything a browser tab can't do." />
 
-      {/* Narrow screens get the same content as a stack; an explorer needs two columns. */}
-      <div className="flex flex-col gap-10 lg:hidden">
-        {FEATURES.map((feature, index) => (
-          <div key={feature.id} className="flex flex-col gap-4">
-            <div className="flex items-start gap-3">
-              <Mono className="pt-1">{String(index + 1).padStart(2, "0")}</Mono>
-              <div className="flex flex-col gap-1.5">
-                <h3 className="text-lg font-medium text-foreground">{feature.title}</h3>
-                <p className="text-pretty text-base leading-relaxed text-muted-foreground">
-                  {feature.body}
-                </p>
-              </div>
-            </div>
-            <div className="rounded-2xl bg-card/30 p-5 ring-1 ring-border">{feature.visual}</div>
-          </div>
-        ))}
+        <div className="mt-14 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-6" onPointerMove={moveSpotlight}>
+          <Cell className="lg:col-span-3" title="Ten-band EQ" body="The app's own curve. Press play, then drag.">
+            <Equalizer />
+          </Cell>
+          <Cell className="lg:col-span-3" title="Light or dark" body="Drag to compare.">
+            <ThemeCompare />
+          </Cell>
+          <Cell className="lg:col-span-2" title="Discord & Last.fm" body="Both follow the song.">
+            <Presence />
+          </Cell>
+          <Cell className="lg:col-span-2" title="Offline & local files" body="Playlists, albums, your own folders.">
+            <OfflineQueue />
+          </Cell>
+          <Cell className="group/cell md:col-span-2 lg:col-span-2" title="Mini player" body="Floats on top when you look away.">
+            <MiniPreview />
+          </Cell>
+        </div>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/landing/src/components/Film.tsx b/landing/src/components/Film.tsx
new file mode 100644
index 00000000..d14aeef2
--- /dev/null
+++ b/landing/src/components/Film.tsx
@@ -0,0 +1,31 @@
+import { useReducedMotion } from "../useReducedMotion";
+
+const DEMO_VIDEO = "https://pub-493a5d4ea10b45dcaa83917aa3856a32.r2.dev/zunodem.mp4";
+
+/** The app itself, recorded. It pins and grows to full bleed while the page scrolls past (styles.css). */
+export function Film() {
+  const reduced = useReducedMotion();
+
+  return (
+    <section aria-label="Zuno, recorded" className="film-stage">
+      <div className="film-sticky">
+        <div className="film-glow" aria-hidden="true" />
+        <div className="film-frame">
+          <video
+            className="absolute inset-0 size-full object-cover"
+            width={1234}
+            height={922}
+            src={DEMO_VIDEO}
+            poster="./theme-dark.webp"
+            autoPlay={!reduced}
+            muted
+            loop
+            playsInline
+            preload="metadata"
+            aria-hidden="true"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/landing/src/components/Footer.tsx b/landing/src/components/Footer.tsx
new file mode 100644
index 00000000..3715f683
--- /dev/null
+++ b/landing/src/components/Footer.tsx
@@ -0,0 +1,76 @@
+import { useEffect, useRef } from "react";
+import { ArrowDownIcon } from "./icons";
+import { FOCUS_RING, LinkButton, cn } from "./ui";
+import { GITHUB_REPO, RELEASES_URL } from "../releases";
+import { useReducedMotion } from "../useReducedMotion";
+
+const LINKS = [
+  ["GitHub", GITHUB_REPO],
+  ["Releases", RELEASES_URL],
+  ["Issues", `${GITHUB_REPO}/issues`],
+  ["Licence", `${GITHUB_REPO}/blob/main/LICENSE`],
+] as const;
+
+export function Footer() {
+  const reduced = useReducedMotion();
+  const footerRef = useRef<HTMLElement>(null);
+
+  // The floating mini player steps aside here, so it never sits on the last lines of the page.
+  useEffect(() => {
+    const footer = footerRef.current;
+    if (!footer) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      document.documentElement.dataset.footerIn = String(entry.isIntersecting);
+    });
+    observer.observe(footer);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <footer ref={footerRef} className="grain relative isolate overflow-hidden">
+      <div className="mx-auto flex max-w-6xl flex-col gap-12 px-6 pt-24 sm:flex-row sm:items-end sm:justify-between">
+        <div className="max-w-md">
+          <p className="text-balance text-[clamp(1.9rem,3.4vw,2.75rem)] font-semibold leading-[1.05] tracking-[-0.04em]">
+            Close the tab. Keep the music<span className="text-primary">_</span>
+          </p>
+          <div className="mt-7 flex flex-wrap gap-3">
+            <LinkButton href="#download">Download Zuno</LinkButton>
+            <LinkButton href={GITHUB_REPO} rel="noopener" variant="ghost">
+              View the source
+            </LinkButton>
+          </div>
+        </div>
+
+        <nav aria-label="Links" className="flex flex-wrap gap-x-6 gap-y-3">
+          {LINKS.map(([label, href]) => (
+            <a
+              key={label}
+              href={href}
+              rel="noopener"
+              className={cn("rounded-md text-[15px] text-muted-foreground transition-colors hover:text-foreground", FOCUS_RING)}
+            >
+              {label}
+            </a>
+          ))}
+        </nav>
+      </div>
+
+      <div className="relative mt-16 select-none overflow-hidden" aria-hidden="true">
+        <p className="wordmark-xl text-center font-semibold">zuno</p>
+        <div className="screen-ghost absolute bottom-0 right-[6%] w-[17%] max-w-52">
+          <video className="float aspect-square w-full object-cover" src="./zuno-character.mp4" autoPlay={!reduced} muted loop playsInline />
+        </div>
+      </div>
+
+      <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 pb-10 pt-6 font-mono text-[12px] text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+        <p className="max-w-xl text-pretty">
+          Unofficial. Not affiliated with YouTube or Google.
+        </p>
+        <a href="#top" className={cn("flex shrink-0 items-center gap-1.5 rounded-md hover:text-foreground", FOCUS_RING)}>
+          Back to top
+          <ArrowDownIcon size={14} className="rotate-180" />
+        </a>
+      </div>
+    </footer>
+  );
+}
diff --git a/landing/src/components/Header.tsx b/landing/src/components/Header.tsx
index 2e9f0c16..347d1bb1 100644
--- a/landing/src/components/Header.tsx
+++ b/landing/src/components/Header.tsx
@@ -1,55 +1,56 @@
-import { useEffect, useState } from "react";
-import { LinkButton, cn } from "./ui";
+import { BrandIcon, SERVICE_ICON } from "./brandIcons";
+import { PlayingBars } from "./PlayingBars";
+import { FOCUS_RING, LinkButton, cn } from "./ui";
+import { formatCount } from "../github";
+import { GITHUB_REPO } from "../releases";
 
-/**
- * One header for the whole page.
- *
- * Its own file rather than living in App: Hero renders it, and App renders Hero, so importing
- * it from App made the two modules import each other. That resolves today only because of
- * hoisting, and stops resolving the moment either file grows a top-level constant the other
- * needs.
- *
- * A floating pill rather than a full-width bar. The hero is a single continuous surface, and a
- * bar spanning it cuts the composition in two before the eye reaches the product.
- */
-export function Header() {
-  const [scrolled, setScrolled] = useState(false);
-
-  useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 40);
-    onScroll();
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
-  }, []);
+const NAV = [
+  ["Features", "#features"],
+  ["Open source", "#open-source"],
+] as const;
 
+export function Header({ stars }: { stars: number | null }) {
   return (
-    <header className="sticky top-0 z-50 px-4 pt-4">
-      <div
-        className={cn(
-          "mx-auto flex h-14 max-w-3xl items-center gap-3 rounded-full px-4",
-
-          // Transparent over the hero, solid once there is content behind it — a bar with its
-          // own fill on top of the hero reads as a second surface stacked on the first.
-          scrolled
-            ? "border border-white/10 bg-background/70 shadow-lg shadow-black/20 backdrop-blur-xl"
-            : "border border-transparent bg-transparent",
-        )}
-      >
+    <header className="fixed inset-x-0 top-0 z-40 px-3 pt-3 sm:px-4 sm:pt-4">
+      <div className="header-glass mx-auto flex h-14 max-w-6xl items-center gap-2 rounded-full pl-2.5 pr-2">
         <a
-          className="flex items-center gap-2 text-xl font-semibold tracking-tight text-foreground"
           href="#top"
+          className={cn("flex items-center gap-2 rounded-full py-1 pl-0.5 pr-2 text-[17px] font-semibold tracking-tight", FOCUS_RING)}
         >
-          <img className="size-8" src="./logo.png" alt="" />
-          zuno_
+          <img src="./ghost.webp" alt="" width={30} height={30} className="size-[30px]" />
+          <span>
+            zuno<span className="text-primary">_</span>
+          </span>
+          <PlayingBars className="now-bars h-3" />
         </a>
 
-        <div className="ml-auto flex items-center gap-1">
+        <nav aria-label="Sections" className="mx-auto hidden items-center md:flex">
+          {NAV.map(([label, href]) => (
+            <a
+              key={href}
+              href={href}
+              className={cn(
+                "rounded-full px-3.5 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground",
+                FOCUS_RING,
+              )}
+            >
+              {label}
+            </a>
+          ))}
+        </nav>
+
+        <div className="ml-auto flex items-center gap-1 md:ml-0">
           <a
-            className="rounded-full px-3 py-2 font-mono text-[13px] text-foreground/60 transition-colors hover:text-foreground"
-            href="https://github.com/nofayz/zuno"
+            href={GITHUB_REPO}
             rel="noopener"
+            aria-label={stars === null ? "Zuno on GitHub" : `Zuno on GitHub, ${stars} stars`}
+            className={cn(
+              "hidden h-9 items-center gap-2 rounded-full px-3 text-sm text-muted-foreground transition-colors hover:text-foreground sm:flex",
+              FOCUS_RING,
+            )}
           >
-            source
+            <BrandIcon icon={SERVICE_ICON.github} width={17} height={17} />
+            {stars === null ? null : <span className="font-mono text-[13px] tabular-nums">{formatCount(stars)}</span>}
           </a>
           <LinkButton href="#download" size="sm">
             Download
diff --git a/landing/src/components/Hero.tsx b/landing/src/components/Hero.tsx
index edf93efe..01f34715 100644
--- a/landing/src/components/Hero.tsx
+++ b/landing/src/components/Hero.tsx
@@ -1,8 +1,10 @@
-import type { CSSProperties } from "react";
+import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
 import { BrandIcon, OS_ICON, SERVICE_ICON } from "./brandIcons";
+import { Deck } from "./Deck";
 import { ArrowDownIcon, ArrowRightIcon } from "./icons";
-import { LinkButton, Mono } from "./ui";
-import { GITHUB_REPO, type LatestRelease, type PlatformId } from "../releases";
+import { FOCUS_RING, LinkButton, cn } from "./ui";
+import { formatCount } from "../github";
+import { GITHUB_REPO, RELEASES_URL, timeAgo, type LatestRelease, type PlatformId } from "../releases";
 
 const PLATFORM_LABEL: Record<PlatformId, string> = {
   windows: "Windows",
@@ -11,73 +13,15 @@ const PLATFORM_LABEL: Record<PlatformId, string> = {
   linux: "Linux",
 };
 
-const DEMO_VIDEO = "https://pub-493a5d4ea10b45dcaa83917aa3856a32.r2.dev/zunodem.mp4";
-const DEMO_POSTER = "./zuno-d1-1.2.PNG";
-/** Read off the file's own header. Reserves the box before a byte arrives, and sets the frame's
- *  aspect — the stage is cut to the footage rather than the footage cropped to the stage. */
-const DEMO_W = 1234;
-const DEMO_H = 922;
+const step = (index: number): CSSProperties => ({ animationDelay: `${0.08 + index * 0.08}s` });
 
-/** Six features, one clean row. The hero itself stays pure type, so they sit under the film. */
-const FEATURES = [
-  "tabs, one queue each",
-  "line-synced lyrics",
-  "offline downloads",
-  "your local files",
-  "discord presence",
-  "last.fm scrobbling",
-];
-
-/**
- * Entrance cascade.
- *
- * Every line of the hero arrives on the same curve, a beat apart, top to bottom — which is what
- * makes a stack of centred text read as composed rather than as a page that finished loading.
- * The delay is the only thing that differs, so it is the only thing passed.
- *
- * Under reduced motion the global rule in styles.css collapses the duration, and because
- * `reveal-in` ends at the resting state that leaves everything simply visible.
- */
-const step = (i: number): CSSProperties => ({ animationDelay: `${i * 0.09}s` });
-
-/**
- * A floating service badge.
- *
- * Decorative, hence `aria-hidden`: both of these already appear in the feature index below, and
- * announcing them twice buys a screen reader nothing. Hidden outright below `lg`, where the
- * centred column takes the full width and there are no margins left to float in.
- *
- * Two elements rather than one, because the two motions have nothing to do with each other: the
- * outer box carries the position and the scroll-driven fade, the inner pill carries the bob. A
- * single element would need one `animation` list with mismatched timelines to do both.
- *
- * The negative delay starts the bob already in progress, so the pair does not rise and fall in
- * lockstep for the first cycle.
- */
-function ServiceBadge({
-  className,
-  tilt,
-  delay,
-  duration,
-  children,
-}: {
-  className: string;
-  tilt: string;
-  delay: string;
-  duration: string;
-  children: React.ReactNode;
-}) {
+// Decorative and wide-screen only: both services are named again further down the page.
+function ServiceBadge({ className, tilt, delay, children }: { className: string; tilt: string; delay: string; children: ReactNode }) {
   return (
-    <span className={`scroll-fade absolute hidden lg:block ${className}`} aria-hidden="true">
+    <span className={cn("scroll-fade pointer-events-none absolute z-10 hidden lg:block", className)} aria-hidden="true">
       <span
-        className="float flex items-center gap-2.5 rounded-full border border-white/10 bg-white/[0.05] py-2 pl-3 pr-3.5 backdrop-blur-md"
-        style={
-          {
-            "--tilt": tilt,
-            animationDelay: delay,
-            animationDuration: duration,
-          } as CSSProperties
-        }
+        className="float flex items-center gap-2.5 rounded-full bg-card/60 py-2 pl-3 pr-3.5 shadow-lg backdrop-blur-md"
+        style={{ rotate: tilt, animationDelay: delay, animationDuration: "7.5s" }}
       >
         {children}
       </span>
@@ -85,200 +29,104 @@ function ServiceBadge({
   );
 }
 
-/**
- * The hero.
- *
- * Type first, product second — the two are not fighting over the same viewport. The fold is the
- * wordmark and the claim, centred, with nothing behind it; then the demo takes over completely
- * as a frame that pins to the viewport and grows to fill it while you scroll past.
- *
- * That split is the whole idea. A hero that runs copy beside a screenshot gives each half of the
- * frame to a different job and does neither at full size. Sequencing them means the words get a
- * clean page and the footage gets the entire screen.
- */
+function ReleaseChip({ release }: { release: LatestRelease | null }) {
+  return (
+    <a
+      href={release ? `${GITHUB_REPO}/releases/tag/v${release.version}` : RELEASES_URL}
+      rel="noopener"
+      className={cn(
+        "rise group inline-flex items-center gap-2.5 rounded-full bg-card/50 py-1.5 pl-1.5 pr-3.5 text-[13px] text-muted-foreground backdrop-blur transition-colors hover:bg-card hover:text-foreground",
+        FOCUS_RING,
+      )}
+      style={step(0)}
+    >
+      <span className="rounded-full bg-primary/15 px-2 py-0.5 font-mono text-[11px] font-medium text-primary">
+        {release ? `v${release.version}` : "new"}
+      </span>
+      {release ? timeAgo(release.publishedAt) : "Latest release"}
+      <ArrowRightIcon size={14} className="transition-transform duration-200 group-hover:translate-x-0.5" />
+    </a>
+  );
+}
+
 export function Hero({
   release,
   platform,
+  stars,
 }: {
   release: LatestRelease | null;
   platform: PlatformId | null;
+  stars: number | null;
 }) {
-  const label = platform ? PLATFORM_LABEL[platform] : "your system";
+  const heroRef = useRef<HTMLElement>(null);
+
+  // Out of view, the floating mini player takes over, the way the app's appears when you look away.
+  useEffect(() => {
+    const hero = heroRef.current;
+    if (!hero) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        document.documentElement.dataset.heroOut = String(!entry.isIntersecting);
+      },
+      { rootMargin: "-35% 0px 0px 0px" },
+    );
+    observer.observe(hero);
+    return () => observer.disconnect();
+  }, []);
 
   return (
-    <>
-
-
-      {/*
-        Sized to the viewport minus the header, so the film frame below starts exactly at the
-        fold rather than a header's height past it.
-      */}
-      <section
-        id="top"
-        className="grain relative isolate flex flex-col items-center justify-center px-6 pt-30 pb-20 text-center"
-      >
-        {/*
-          Wider than the viewport and lifted until only the foot of the limb is in frame, so what
-          reads is an arc across the top of the page rather than a circle behind the words.
-        */}
-        <div
-          className="moon-arc pointer-events-none absolute left-1/2 top-0 -z-10 aspect-square w-[min(78rem,170vw)] -translate-x-1/2 -translate-y-[82%] rounded-full"
-          aria-hidden="true"
-        />
-
-        {/*
-          Flanking the column diagonally, offset from the centre line rather than from the
-          viewport edge — the text is centred, so anything measured from the edge drifts away from
-          it as the window widens. This keeps the same gap at every width.
-        */}
-        <ServiceBadge
-          className="left-[calc(50%-23rem)] top-[27%]"
-          tilt="-7deg"
-          delay="-2.4s"
-          duration="7.5s"
-        >
+    <section id="top" ref={heroRef} className="grain relative isolate overflow-x-clip">
+      <div className="hero-aurora" aria-hidden="true" />
+      <div className="relative mx-auto grid min-h-svh max-w-6xl grid-cols-1 items-center gap-x-10 gap-y-16 px-6 pb-20 pt-32 lg:grid-cols-[1.25fr_0.75fr] lg:pb-16 lg:pt-28">
+        <ServiceBadge className="left-[36%] top-[31%]" tilt="-7deg" delay="-2.4s">
           <BrandIcon icon={SERVICE_ICON.discord} width={19} height={15} />
-          <span className="font-mono text-[12px] text-foreground/55">rich presence</span>
+          <span className="font-mono text-[12px] text-muted-foreground">rich presence</span>
         </ServiceBadge>
-
-        <ServiceBadge
-          className="right-[calc(50%-24rem)] top-[49%]"
-          tilt="6deg"
-          delay="-5.1s"
-          duration="8.5s"
-        >
+        <ServiceBadge className="left-[40%] top-[51%]" tilt="6deg" delay="-5.1s">
           <BrandIcon icon={SERVICE_ICON.lastfm} width={48} height={12} />
-          <span className="font-mono text-[12px] text-foreground/55">scrobbling</span>
+          <span className="font-mono text-[12px] text-muted-foreground">scrobbling</span>
         </ServiceBadge>
 
-        {/*
-          The wordmark is the headline.
-
-          It can be, because the line under it says what the thing is inside twelve words. Set as
-          a mark rather than as a sentence: heavier, tighter, and ending in the underscore it is
-          already named after — which the blinking block simply admits is a prompt.
-        */}
-        <img
-          className="hero-in mb-5 size-20 sm:size-24"
-          src="./logo.png"
-          alt=""
-          width={96}
-          height={96}
-          style={step(0)}
-        />
-
-        <h1
-          className="hero-in relative text-[clamp(56px,9vw,96px)] font-bold leading-none tracking-[-0.045em] text-foreground"
-          style={step(1)}
-        >
-          zuno_
-          {release ? (
-            <span className="absolute left-[calc(100%+0.5rem)] top-1 whitespace-nowrap rounded-full border border-primary/40 px-2.5 py-1 font-mono text-[11px] font-semibold uppercase tracking-[0.08em] text-primary max-sm:hidden">
-              v{release.version}
-            </span>
-          ) : null}
-        </h1>
-
-        {/* Two deliberate lines: what it is, then the one thing no browser tab does. */}
-        <p
-          className="hero-in mt-5 max-w-[36ch] text-balance text-xl leading-[1.5] tracking-[-0.01em] text-foreground/60"
-          style={step(2)}
-        >
-          A desktop client for the YouTube Music.
-          <br className="max-sm:hidden" />Downloads, Lyrics & No Ads.
-        </p>
-
-        <p className="hero-in mt-3 text-[15px] text-foreground/40" style={step(3)}>
-          Free and open source. No telemetry, and no account to create.
-        </p>
-
-        <div
-          className="hero-in mt-9 flex w-full flex-col items-stretch gap-3 sm:w-auto sm:flex-row sm:items-center"
-          style={step(4)}
-        >
-          {/* Down to the tiles rather than straight at the asset: the format choice (msi vs exe,
-              deb vs rpm vs AppImage) lives there, and a hero button cannot make it for you. */}
-          <LinkButton href="#download" size="lg">
-            Download for {label}
-            <ArrowDownIcon
-              size={18}
-              className="transition-transform duration-200 group-hover:translate-y-0.5"
-            />
-          </LinkButton>
+        <div className="flex flex-col items-start">
+          <ReleaseChip release={release} />
+
+          <h1 className="rise mt-6 text-[clamp(4.5rem,10vw,8.5rem)] font-bold leading-[0.9] tracking-[-0.06em]" style={step(1)}>
+            zuno<span className="caret text-primary" aria-hidden="true">_</span>
+          </h1>
+
+          <p className="rise mt-6 max-w-[36ch] text-balance text-xl leading-[1.5] tracking-[-0.01em] text-muted-foreground" style={step(2)}>
+            A desktop client for the YouTube Music.
+            <br className="max-sm:hidden" /> Downloads, Lyrics & No Ads.
+          </p>
+
+          <div className="rise mt-10 flex w-full flex-col gap-3 sm:w-auto sm:flex-row" style={step(3)}>
+            <LinkButton href="#download" size="lg">
+              Download{platform ? ` for ${PLATFORM_LABEL[platform]}` : ""}
+              <ArrowDownIcon size={17} className="transition-transform duration-200 group-hover:translate-y-0.5" />
+            </LinkButton>
+            <LinkButton href={GITHUB_REPO} rel="noopener" variant="ghost" size="lg">
+              <BrandIcon icon={SERVICE_ICON.github} width={18} height={18} />
+              Star on GitHub
+              {stars === null ? null : (
+                <span className="rounded-full bg-background/60 px-2 py-0.5 font-mono text-[12px] tabular-nums text-muted-foreground">
+                  {formatCount(stars)}
+                </span>
+              )}
+            </LinkButton>
+          </div>
 
-          <LinkButton variant="outline" size="lg" href={GITHUB_REPO} rel="noopener">
-            Read the source
-            <ArrowRightIcon
-              size={18}
-              className="transition-transform duration-200 group-hover:translate-x-0.5"
-            />
-          </LinkButton>
+          <ul className="rise mt-8 flex items-center gap-4 font-mono text-[12px] text-muted-foreground" style={step(4)} aria-label="Platforms">
+            {(["windows", "macos", "linux"] as const).map((os) => (
+              <li key={os} className="flex items-center gap-1.5">
+                <BrandIcon icon={OS_ICON[os]} width={14} height={14} className="text-foreground" />
+                {os === "macos" ? "macOS" : os === "windows" ? "Windows" : "Linux"}
+              </li>
+            ))}
+          </ul>
         </div>
 
-        {/* The same three marks the download tiles use, so the promise here and the choice there
-            read as one row. Apple's glyph ships unfilled, so it takes the text colour. */}
-        <ul
-          className="hero-in mt-7 flex flex-wrap items-center justify-center gap-2"
-          style={step(5)}
-        >
-          {(["windows", "macos", "linux"] as const).map((os) => (
-            <li
-              key={os}
-              className="flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] py-1.5 pl-2.5 pr-3.5 font-mono text-[13px] font-medium tracking-[0.06em] text-foreground/50 backdrop-blur-md"
-            >
-              {/* Apple and Tux are silhouettes on currentColor; the Windows mark carries its
-                  own blue and ignores this. */}
-              <BrandIcon icon={OS_ICON[os]} width={15} height={15} className="text-foreground" />
-              {PLATFORM_LABEL[os === "macos" ? "macos-arm" : os]}
-            </li>
-          ))}
-        </ul>
-      </section>
-
-      {/*
-        The film stage.
-
-        Taller than the viewport, with the frame pinned inside it: the demo holds still and grows
-        to fill the screen while the page scrolls behind it, then releases. The video is the only
-        thing in it — no chrome, no transport, no play button, because it is already playing.
-      */}
-      <div className="film-stage">
-        <div className="film-sticky">
-          <div className="film-frame">
-            <video
-              className="absolute inset-0 size-full object-cover"
-              width={DEMO_W}
-              height={DEMO_H}
-              src={DEMO_VIDEO}
-              poster={DEMO_POSTER}
-              /* Muted and inline because every mobile engine requires both before it will honour
-                 autoplay at all. Decoration, hence `aria-hidden` — there is nothing to operate
-                 here and the copy above carries the meaning. */
-              autoPlay
-              muted
-              loop
-              playsInline
-              preload="metadata"
-              aria-hidden="true"
-            />
-            {/* The footage is lit brighter than the page. A flat tint settles it into the
-                surrounding dark without touching the video's own colour. */}
-            <div className="pointer-events-none absolute inset-0 bg-black/25" aria-hidden="true" />
-          </div>
-        </div>
+        <Deck />
       </div>
-
-      {/* The features, as a quiet index under the film rather than as a claim inside the hero. */}
-      <ol className="mx-auto grid w-full max-w-6xl grid-cols-2 gap-x-8 gap-y-3 px-6 pb-4 pt-14 sm:grid-cols-3 lg:grid-cols-6">
-        {FEATURES.map((feature, i) => (
-          <li key={feature} className="flex items-baseline gap-2.5">
-            <Mono className="tabular-nums text-foreground/25">
-              {String(i + 1).padStart(2, "0")}
-            </Mono>
-            <span className="text-pretty text-sm leading-6 text-foreground/60">{feature}</span>
-          </li>
-        ))}
-      </ol>
-    </>
+    </section>
   );
 }
diff --git a/landing/src/components/MiniPlayer.tsx b/landing/src/components/MiniPlayer.tsx
index 5e8e7df0..6fd84bd2 100644
--- a/landing/src/components/MiniPlayer.tsx
+++ b/landing/src/components/MiniPlayer.tsx
@@ -1,263 +1,122 @@
 import { useEffect, useRef, useState, type CSSProperties, type PointerEvent } from "react";
 import { PauseIcon, PlayIcon, SkipIcon } from "./icons";
-import { cn } from "./ui";
+import { FOCUS_RING, cn } from "./ui";
+import { TRACK, seek, togglePlayback, usePlayer } from "../audio/demoPlayer";
 
-/**
- * The app's mini player, on the page.
- *
- * A copy of `src/ui/components/mini-player/MiniPlayer.tsx` in shape and materials — same capsule,
- * same collapsed/expanded geometry, same progress ring around a spinning record, same glass. The
- * app's version exists to control a window: it drags, it hit-tests the cursor against the OS, it
- * resizes its own Tauri window to match the capsule. None of that has a meaning in a browser, so
- * what is left is the part a visitor can see — hover expands it, and the buttons drive an
- * `<audio>` element instead of an IPC bus.
- *
- * Expansion is CSS rather than state: the capsule is the hover target and every animated property
- * is a class on it, so nothing here re-renders on mouse-over.
- */
+// The app's mini player capsule (src/ui/components/mini-player), driving the page's demo track.
+const WIDTH = 160;
+const HEIGHT = 44;
 
-/* The demo track. One object, so swapping the song is one edit. */
-const TRACK = {
-  src: "./low-tide.mp3",
-  title: "Low Tide",
-  artist: "Tom Rhodes",
-  /** The Zuno character loop stands in for cover art; the still tints the glass behind it. */
-  avatar: "./zuno-character.mp4",
-  artwork: "./logo.png",
-};
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), Math.max(min, max));
 
-/** Matching the app's capsule: 44px collapsed, 96px expanded. */
-const COLLAPSED_HEIGHT = 44;
-const PROGRESS_RING_WIDTH = 2;
-
-/** Where it parks before anyone moves it: clear of the header, in from the left edge. */
-const HOME = { x: 24, y: 88 };
-
-const clamp = (value: number, min: number, max: number) =>
-  Math.min(Math.max(value, min), Math.max(min, max));
-
-const MINI_BUTTON =
-  "flex size-7 shrink-0 items-center justify-center rounded-full text-neutral-300 transition-all " +
-  "hover:bg-white/10 hover:text-white active:scale-90 disabled:opacity-40 " +
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50";
+const BUTTON = cn(
+  "flex size-7 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground disabled:opacity-40",
+  FOCUS_RING,
+);
 
 export function MiniPlayer() {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const [playing, setPlaying] = useState(false);
-  const [time, setTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [position, setPosition] = useState(HOME);
+  const { playing, time, duration } = usePlayer();
+  // Anchored by its bottom edge, so opening grows it upward instead of off the bottom of the screen.
+  const [position, setPosition] = useState({ left: 20, bottom: 20 });
   const [dragging, setDragging] = useState(false);
+  const grab = useRef<{ x: number; y: number } | null>(null);
+  const progress = duration > 0 ? Math.min(100, (time / duration) * 100) : 0;
 
-  const toggle = () => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    if (audio.paused) void audio.play();
-    else audio.pause();
-  };
-
-  const seek = (seconds: number) => {
-    const audio = audioRef.current;
-    if (audio) audio.currentTime = seconds;
-  };
-
-  /* The element is the source of truth for `playing`: pausing can come from the OS media keys or
-     from another tab taking the audio focus, neither of which goes through the button. */
+  // A resize must never strand the capsule off-screen, where nothing could bring it back.
   useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    const sync = () => setPlaying(!audio.paused);
-    audio.addEventListener("play", sync);
-    audio.addEventListener("pause", sync);
-
-    return () => {
-      audio.removeEventListener("play", sync);
-      audio.removeEventListener("pause", sync);
-    };
+    const keepInView = () =>
+      setPosition((current) => ({
+        left: clamp(current.left, 8, window.innerWidth - WIDTH - 8),
+        bottom: clamp(current.bottom, 8, window.innerHeight - HEIGHT - 8),
+      }));
+    window.addEventListener("resize", keepInView);
+    return () => window.removeEventListener("resize", keepInView);
   }, []);
 
-  /*
-   * Drag, the browser's version.
-   *
-   * The app moves an OS window; here the capsule moves itself. Pointer capture is what makes the
-   * grab survive the cursor outrunning the element, which it will — the capsule is small and the
-   * pointer is not obliged to stay inside it.
-   */
-  const grabRef = useRef<{ x: number; y: number } | null>(null);
-
   const startDrag = (event: PointerEvent<HTMLDivElement>) => {
-    // Buttons and the slider own their own presses; only the bare capsule is a handle.
     if (event.target instanceof Element && event.target.closest("button, input")) return;
-
     const box = event.currentTarget.getBoundingClientRect();
-    grabRef.current = { x: event.clientX - box.left, y: event.clientY - box.top };
+    grab.current = { x: event.clientX - box.left, y: box.bottom - event.clientY };
     event.currentTarget.setPointerCapture(event.pointerId);
     setDragging(true);
   };
 
-  const onDrag = (event: PointerEvent<HTMLDivElement>) => {
-    const grab = grabRef.current;
-    if (!grab) return;
-
-    // Clamped so it can never be parked off-screen, where nothing would bring it back.
+  const drag = (event: PointerEvent<HTMLDivElement>) => {
+    if (!grab.current) return;
     const box = event.currentTarget.getBoundingClientRect();
     setPosition({
-      x: clamp(event.clientX - grab.x, 8, window.innerWidth - box.width - 8),
-      y: clamp(event.clientY - grab.y, 8, window.innerHeight - box.height - 8),
+      left: clamp(event.clientX - grab.current.x, 8, window.innerWidth - box.width - 8),
+      bottom: clamp(window.innerHeight - event.clientY - grab.current.y, 8, window.innerHeight - box.height - 8),
     });
   };
 
   const endDrag = () => {
-    grabRef.current = null;
+    grab.current = null;
     setDragging(false);
   };
 
-  const progress = duration > 0 ? Math.min(100, (time / duration) * 100) : 0;
-
   return (
-    <div className="pointer-events-none fixed inset-0 z-50">
-      {/*
-        Silent until the play button is pressed.
-
-        It used to autoplay, and fall back to starting on the first pointerdown or keydown
-        anywhere on the document when the browser refused — so a visitor clicking a download
-        link got music they never asked for, from a control they may not have noticed. `metadata`
-        rather than `auto` for the same reason: nothing is fetched beyond the duration the
-        progress ring needs until someone actually wants to hear it.
-      */}
-      <audio
-        ref={audioRef}
-        src={TRACK.src}
-        preload="metadata"
-        onTimeUpdate={(event) => setTime(event.currentTarget.currentTime)}
-        onLoadedMetadata={(event) => setDuration(event.currentTarget.duration)}
-      />
-
-      {/*
-        One capsule that morphs, rather than two stacked pills. Width and height are the animated
-        properties, so the transport row is revealed by the container growing around it rather
-        than by a second element appearing.
-      */}
+    <div className="mini-dock fixed z-50 max-sm:hidden" style={position}>
       <div
         className={cn(
-          "group pointer-events-auto absolute flex h-11 w-40 flex-col overflow-hidden p-0",
+          "group flex h-11 w-40 flex-col overflow-hidden rounded-[22px] bg-popover/90 shadow-2xl backdrop-blur-xl",
+          "transition-[height,width,padding] duration-300 [transition-timing-function:var(--ease-out-expo)]",
+          "hover:h-24 hover:w-[260px] hover:p-1.5 focus-within:h-24 focus-within:w-[260px] focus-within:p-1.5",
           dragging ? "cursor-grabbing select-none" : "cursor-grab",
-          "bg-neutral-900/80 ring-1 ring-white/10 backdrop-blur-xl",
-          "transition-[height,width,padding,background-color] duration-200",
-          "[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
-          /* h-11 → h-24 and w-40 → 260px are the app's 44/96 and 160/260, to the pixel. */
-          "hover:h-24 hover:w-[260px] hover:p-1.5 hover:bg-neutral-900/95 hover:ring-white/15",
-          "focus-within:h-24 focus-within:w-[260px] focus-within:p-1.5 focus-within:bg-neutral-900/95",
         )}
-        /* Half the collapsed height: a true stadium collapsed, a squircle expanded. */
-        style={{ left: position.x, top: position.y, borderRadius: COLLAPSED_HEIGHT / 2 }}
         onPointerDown={startDrag}
-        onPointerMove={onDrag}
+        onPointerMove={drag}
         onPointerUp={endDrag}
         onPointerCancel={endDrag}
       >
-        {/* Album-reactive backdrop: the artwork blown up and blurred past recognition, tinting
-            the glass with the record's own palette. No extra request, no colour extraction. */}
-        <span
-          className="pointer-events-none absolute inset-0 -z-10 scale-150 bg-cover bg-center opacity-30 blur-2xl"
-          style={{ backgroundImage: `url("${TRACK.artwork}")` }}
-          aria-hidden="true"
-        />
-
-        {/* Specular top edge — the highlight a real glass material catches. */}
-        <span
-          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/25 to-transparent"
-          aria-hidden="true"
-        />
-
-        {/* ── Identity row: always visible ─────────────────────────────── */}
-        <div
-          className="flex h-11 shrink-0 items-center gap-2 pl-1.5 pr-2 transition-[padding] duration-300 group-hover:pr-3"
-        >
+        <div className="flex h-11 shrink-0 items-center gap-2 pl-1.5 pr-3">
           <button
             type="button"
-            onClick={toggle}
-            className="group/art relative grid size-11 shrink-0 place-items-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
-            aria-label={playing ? "Pause" : "Play"}
+            onClick={togglePlayback}
+            aria-label={playing ? `Pause ${TRACK.title}` : `Play ${TRACK.title}`}
+            className={cn("relative grid size-9 shrink-0 place-items-center rounded-full", FOCUS_RING)}
           >
-            {/* Position, drawn as a ring rather than a bar — the collapsed pill has no width to
-                spend on one. The conic gradient fills the disc; a radial mask cuts the centre
-                out, so thickness is one constant instead of a gap between two elements. */}
+            {/* Progress as a ring: the collapsed pill has no width to spare for a bar. */}
             <span
-              className="absolute inset-0 rounded-full"
+              className="progress-ring absolute inset-0 rounded-full"
               style={{
-                background: `conic-gradient(rgba(255,255,255,0.92) ${progress}%, rgba(255,255,255,0.16) 0)`,
-                maskImage: `radial-gradient(closest-side, transparent calc(100% - ${PROGRESS_RING_WIDTH}px), #000 calc(100% - ${PROGRESS_RING_WIDTH}px))`,
-                WebkitMaskImage: `radial-gradient(closest-side, transparent calc(100% - ${PROGRESS_RING_WIDTH}px), #000 calc(100% - ${PROGRESS_RING_WIDTH}px))`,
+                background: `conic-gradient(var(--color-foreground) ${progress}%, color-mix(in oklch, var(--color-foreground) 16%, transparent) 0)`,
               }}
               aria-hidden="true"
             />
-            {/* The character loop rather than a sleeve. It carries its own motion, so the app's
-                record spin is left off — two rotations at once reads as a glitch. */}
-            <video
-              src={TRACK.avatar}
-              className="relative size-[34px] shrink-0 rounded-full bg-neutral-800 object-cover transition-transform duration-300 group-hover/art:scale-90"
-              autoPlay
-              muted
-              loop
-              playsInline
-              aria-hidden="true"
-            />
+            <img src={TRACK.cover} alt="" className="size-7 rounded-full bg-card p-0.5" />
           </button>
-
-          {/* Takes whatever the chrome leaves. `min-w-0` is what lets it actually shrink. */}
-          <div className="min-w-0 flex-1 overflow-hidden">
-            <span className="block truncate text-[12px] font-semibold leading-tight tracking-[-0.01em] text-white">
-              {TRACK.title}
-            </span>
-            <p className="truncate text-[10px] leading-tight text-white/55">{TRACK.artist}</p>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-[12px] font-semibold leading-tight">{TRACK.title}</p>
+            <p className="truncate text-[10px] leading-tight text-muted-foreground">{TRACK.artist}</p>
           </div>
         </div>
 
-        {/* ── Control row ───────────────────────────────────────────────
-            Collapsed it is clamped to zero width so it cannot hold the capsule open past the
-            collapsed cap; expanding releases it and the capsule grows to fit. */}
-        <div
-          className={cn(
-            "pointer-events-none flex h-10 w-0 items-center gap-2 overflow-hidden px-0 opacity-0",
-            "transition-[opacity,width,padding] duration-300",
-            "group-hover:pointer-events-auto group-hover:w-auto group-hover:px-3 group-hover:opacity-100 group-hover:delay-75",
-          )}
-        >
-          <div className="flex shrink-0 items-center gap-0.5">
-            {/* One track, so "previous" is a restart and "next" has nowhere to go. */}
-            <button
-              type="button"
-              className={MINI_BUTTON}
-              onClick={() => seek(0)}
-              aria-label="Restart"
-            >
-              <SkipIcon back size={15} />
-            </button>
-            <button
-              type="button"
-              className="flex size-8 shrink-0 items-center justify-center rounded-full bg-white text-neutral-900 transition-transform duration-150 hover:scale-105 active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
-              onClick={toggle}
-              aria-label={playing ? "Pause" : "Play"}
-            >
-              {playing ? <PauseIcon size={15} /> : <PlayIcon size={15} />}
-            </button>
-            <button type="button" className={MINI_BUTTON} disabled aria-label="Next">
-              <SkipIcon size={15} />
-            </button>
-          </div>
-
+        <div className="pointer-events-none flex h-10 items-center gap-2 px-3 opacity-0 transition-opacity duration-200 group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100">
+          <button type="button" className={BUTTON} onClick={() => seek(0)} aria-label="Restart the track">
+            <SkipIcon back size={14} />
+          </button>
+          <button
+            type="button"
+            onClick={togglePlayback}
+            aria-label={playing ? "Pause" : "Play"}
+            className={cn("grid size-8 shrink-0 place-items-center rounded-full bg-foreground text-background", FOCUS_RING)}
+          >
+            {playing ? <PauseIcon size={14} /> : <PlayIcon size={14} />}
+          </button>
+          <button type="button" className={BUTTON} disabled aria-label="Next track">
+            <SkipIcon size={14} />
+          </button>
           <input
             type="range"
             min={0}
-            max={duration || 100}
+            max={duration || 1}
             step="any"
             value={time}
             onChange={(event) => seek(Number(event.currentTarget.value))}
-            aria-label="Song position"
-            className="h-1 min-w-24 flex-1 cursor-pointer appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,#fff_var(--slider-progress),rgba(255,255,255,0.18)_var(--slider-progress))] [&::-webkit-slider-thumb]:-mt-[3px] [&::-webkit-slider-thumb]:size-2.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-125"
-            style={{ "--slider-progress": `${progress}%` } as CSSProperties}
+            aria-label="Seek"
+            className={cn("seek min-w-0 flex-1", FOCUS_RING)}
+            style={{ "--seek": `${progress}%` } as CSSProperties}
           />
         </div>
       </div>
diff --git a/landing/src/components/OpenSource.tsx b/landing/src/components/OpenSource.tsx
new file mode 100644
index 00000000..b4285330
--- /dev/null
+++ b/landing/src/components/OpenSource.tsx
@@ -0,0 +1,98 @@
+import { BrandIcon, SERVICE_ICON } from "./brandIcons";
+import { CodeIcon, ShieldIcon, StarIcon, UserIcon } from "./icons";
+import { CopyBlock, FOCUS_RING, LinkButton, SectionHeading, cn } from "./ui";
+import { formatCount, type RepoStats } from "../github";
+import { GITHUB_REPO, type LatestRelease } from "../releases";
+
+const PRINCIPLES = [
+  { icon: ShieldIcon, label: "No telemetry" },
+  { icon: UserIcon, label: "No Zuno account" },
+  { icon: CodeIcon, label: "Apache-2.0" },
+] as const;
+
+function Stat({ value, label }: { value: string; label: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-[clamp(1.4rem,3vw,2.5rem)] font-semibold tabular-nums tracking-[-0.04em]">{value}</span>
+      <span className="font-mono text-[12px] text-muted-foreground">{label}</span>
+    </div>
+  );
+}
+
+export function OpenSource({ repo, release }: { repo: RepoStats | null; release: LatestRelease | null }) {
+  return (
+    <section id="open-source">
+      <div className="mx-auto max-w-6xl px-6 py-20 lg:py-28">
+        <SectionHeading index="02" label="open source" title="Zuno collects nothing." />
+
+        <ul className="mt-8 flex flex-wrap gap-2">
+          {PRINCIPLES.map(({ icon: Icon, label }) => (
+            <li key={label} className="flex items-center gap-2 rounded-full bg-card/50 py-2 pl-3 pr-4 text-[15px]">
+              <Icon size={17} className="text-primary" />
+              {label}
+            </li>
+          ))}
+        </ul>
+
+        <div className="mt-12 grid grid-cols-1 gap-4 lg:grid-cols-[1.15fr_0.85fr]">
+          <div className="reveal flex flex-col gap-8 rounded-3xl bg-card/40 p-6 sm:p-8">
+            <a
+              href={GITHUB_REPO}
+              rel="noopener"
+              className={cn("flex w-fit items-center gap-3 rounded-xl text-lg font-semibold tracking-[-0.01em] hover:text-primary", FOCUS_RING)}
+            >
+              <BrandIcon icon={SERVICE_ICON.github} width={26} height={26} />
+              noFAYZ/zuno
+            </a>
+
+            <div className="grid grid-cols-3 gap-4">
+              <Stat value={repo ? formatCount(repo.stars) : "—"} label="stars" />
+              <Stat value={repo ? formatCount(repo.forks) : "—"} label="forks" />
+              <Stat value={release ? `v${release.version}` : "—"} label="latest" />
+            </div>
+
+            {repo && repo.contributors.length > 0 ? (
+              <ul className="flex -space-x-2" aria-label="Contributors">
+                {repo.contributors.slice(0, 10).map((person) => (
+                  <li key={person.login}>
+                    <a href={person.url} rel="noopener" className={cn("block rounded-full", FOCUS_RING)} title={person.login}>
+                      <img
+                        src={person.avatar}
+                        alt={person.login}
+                        width={36}
+                        height={36}
+                        loading="lazy"
+                        className="size-9 rounded-full bg-card ring-2 ring-background"
+                      />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+
+            <div className="mt-auto flex flex-wrap gap-3">
+              <LinkButton href={GITHUB_REPO} rel="noopener" variant="light">
+                <StarIcon size={17} />
+                Star on GitHub
+              </LinkButton>
+              <LinkButton href={`${GITHUB_REPO}/issues`} rel="noopener" variant="ghost">
+                Report a bug
+              </LinkButton>
+            </div>
+          </div>
+
+          <div className="reveal flex flex-col gap-5 rounded-3xl bg-card/40 p-6 sm:p-8">
+            <div>
+              <h3 className="text-lg font-semibold tracking-[-0.01em]">Build it yourself</h3>
+              <p className="mt-1 text-[15px] text-muted-foreground">Needs Node.js and Rust.</p>
+            </div>
+            <CopyBlock
+              label="build commands"
+              lines={["git clone https://github.com/noFAYZ/zuno", "cd zuno && npm install", "npm run tauri dev"]}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/landing/src/components/PlayingBars.tsx b/landing/src/components/PlayingBars.tsx
new file mode 100644
index 00000000..b8e04fc1
--- /dev/null
+++ b/landing/src/components/PlayingBars.tsx
@@ -0,0 +1,16 @@
+import { cn } from "./ui";
+
+/** The app's playing indicator; the bars only move while the demo track is playing. */
+export function PlayingBars({ className }: { className?: string }) {
+  return (
+    <span className={cn("flex items-end gap-[2px]", className)} aria-hidden="true">
+      {[0, 1, 2].map((bar) => (
+        <span
+          key={bar}
+          className="equaliser-bar w-[2.5px] rounded-full bg-primary"
+          style={{ animationDelay: `${bar * -0.37}s` }}
+        />
+      ))}
+    </span>
+  );
+}
diff --git a/landing/src/components/Presence.tsx b/landing/src/components/Presence.tsx
new file mode 100644
index 00000000..039cea92
--- /dev/null
+++ b/landing/src/components/Presence.tsx
@@ -0,0 +1,42 @@
+import { BrandIcon, SERVICE_ICON } from "./brandIcons";
+import { TRACK, usePlayer } from "../audio/demoPlayer";
+import { formatTime } from "../audio/track";
+import { cn } from "./ui";
+
+/** Discord and Last.fm, following the demo track: the card's clock and the scrobble count are live. */
+export function Presence() {
+  const { playing, time, duration, scrobbles } = usePlayer();
+  const progress = duration > 0 ? (time / duration) * 100 : 0;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className={cn("rounded-2xl bg-background/80 p-4 transition-opacity duration-500", playing ? "opacity-100" : "opacity-55")}>
+        <p className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
+          <BrandIcon icon={SERVICE_ICON.discord} width={14} height={11} />
+          {playing ? "Listening to Zuno" : "Paused"}
+        </p>
+        <div className="mt-3 flex items-center gap-3">
+          <img src={TRACK.cover} alt="" className="size-14 shrink-0 rounded-xl bg-card p-1.5" />
+          <div className="min-w-0">
+            <p className="truncate text-[15px] font-semibold">{TRACK.title}</p>
+            <p className="truncate text-[13px] text-muted-foreground">by {TRACK.artist}</p>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center gap-2.5 font-mono text-[11px] tabular-nums text-muted-foreground">
+          <span>{formatTime(time)}</span>
+          <span className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
+            <span className="block h-full rounded-full bg-foreground" style={{ width: `${progress}%` }} />
+          </span>
+          <span>{formatTime(duration)}</span>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between gap-3 rounded-2xl bg-background/80 px-4 py-3.5">
+        <BrandIcon icon={SERVICE_ICON.lastfm} width={52} height={13} />
+        <span className="font-mono text-[12px] tabular-nums text-muted-foreground" role="status" aria-live="polite">
+          {scrobbles === 0 ? "scrobbles at halfway" : `${scrobbles} scrobbled`}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/landing/src/components/Spectrum.tsx b/landing/src/components/Spectrum.tsx
new file mode 100644
index 00000000..bdc35d91
--- /dev/null
+++ b/landing/src/components/Spectrum.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useRef } from "react";
+import { SPECTRUM_BANDS, subscribeSpectrum } from "../audio/demoPlayer";
+
+const BARS = SPECTRUM_BANDS * 2;
+
+/** A ring of bars around the record, mirrored so bass sits at the top. Idle, it is a faint dial. */
+export function Spectrum({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+
+    const styles = getComputedStyle(canvas);
+    const from = styles.getPropertyValue("--color-primary").trim();
+    const to = styles.getPropertyValue("--color-headphone").trim();
+    let size = 0;
+    let stroke: CanvasGradient | string = from;
+    let last: Float32Array | null = null;
+
+    const draw = (levels: Float32Array | null) => {
+      last = levels;
+      context.clearRect(0, 0, size, size);
+      const centre = size / 2;
+      const inner = size * 0.445;
+      const reach = size * 0.05;
+      context.lineCap = "round";
+      context.lineWidth = Math.max(1.5, size * 0.0065);
+      context.strokeStyle = stroke;
+      for (let bar = 0; bar < BARS; bar += 1) {
+        const band = bar < SPECTRUM_BANDS ? bar : BARS - 1 - bar;
+        const level = levels ? levels[band] : 0;
+        const angle = (bar / BARS) * Math.PI * 2 - Math.PI / 2;
+        const length = size * 0.008 + level * reach;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        context.globalAlpha = 0.22 + level * 0.78;
+        context.beginPath();
+        context.moveTo(centre + cos * inner, centre + sin * inner);
+        context.lineTo(centre + cos * (inner + length), centre + sin * (inner + length));
+        context.stroke();
+      }
+      context.globalAlpha = 1;
+    };
+
+    const resize = () => {
+      const box = canvas.getBoundingClientRect();
+      const ratio = Math.min(2, window.devicePixelRatio || 1);
+      size = box.width;
+      canvas.width = Math.round(box.width * ratio);
+      canvas.height = Math.round(box.height * ratio);
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+      const gradient = context.createConicGradient(-Math.PI / 2, size / 2, size / 2);
+      gradient.addColorStop(0, from);
+      gradient.addColorStop(0.5, to);
+      gradient.addColorStop(1, from);
+      stroke = gradient;
+      draw(last);
+    };
+
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(canvas);
+    const unsubscribe = subscribeSpectrum(draw);
+    return () => {
+      observer.disconnect();
+      unsubscribe();
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} className={className} aria-hidden="true" />;
+}
diff --git a/landing/src/components/TabsDemo.tsx b/landing/src/components/TabsDemo.tsx
deleted file mode 100644
index cc802d8f..00000000
--- a/landing/src/components/TabsDemo.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useState } from "react";
-import { Mono, cn } from "./ui";
-
-interface DemoTab {
-  id: string;
-  label: string;
-  heading: string;
-  rows: string[];
-}
-
-const TABS: readonly DemoTab[] = [
-  {
-    id: "a",
-    label: "Am I Dreaming",
-    heading: "Metro Boomin · Heroes & Villains",
-    rows: ["Am I Dreaming", "Creepin'", "Superhero", "Around Me", "Trance"],
-  },
-  {
-    id: "b",
-    label: "New tab",
-    heading: "A$AP Rocky · Popular",
-    rows: ["Praise The Lord", "F**kin' Problems", "Fashion Killa", "L$D", "Sundress"],
-  },
-  {
-    id: "c",
-    label: "Browse",
-    heading: "Made for you",
-    rows: ["Late night drive", "Focus, no lyrics", "2019 chill mix", "Discover weekly"],
-  },
-];
-
-/** Three animated bars. The app uses the same treatment to mark the row that is playing. */
-function PlayingBars({ className }: { className?: string }) {
-  return (
-    <span className={cn("flex items-end gap-[2px]", className)} aria-hidden="true">
-      {[0, 1, 2].map((bar) => (
-        <span
-          key={bar}
-          className="equaliser-bar w-[2px] rounded-full bg-primary"
-          style={{ animationDelay: `${bar * 0.18}s` }}
-        />
-      ))}
-    </span>
-  );
-}
-
-/**
- * A working miniature of the tab model.
- *
- * The feature is genuinely hard to describe and trivial to show: switch tabs and the playing
- * indicator stays pinned to the first one while the content underneath changes completely.
- * A paragraph claiming "each tab keeps its own playback" asks to be believed; this just does it,
- * and the player bar at the bottom never changes song no matter which tab you are looking at.
- *
- * Deliberately not a video or a GIF — it is a handful of divs, so it is sharp at any size, it
- * costs nothing to load, and it cannot drift out of date the way a recording does.
- */
-export function TabsDemo() {
-  const [activeId, setActiveId] = useState(TABS[0].id);
-  /** The tab that owns playback. Fixed to the first, which is the entire point. */
-  const playingId = TABS[0].id;
-  const active = TABS.find((tab) => tab.id === activeId) ?? TABS[0];
-
-  return (
-    <div className="overflow-hidden rounded-2xl bg-card/40 ring-1 ring-border">
-      {/* Window chrome, so it reads as an app rather than a web widget. */}
-      <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-        <span className="flex gap-1.5" aria-hidden="true">
-          {["bg-[#ff5f57]", "bg-[#febc2e]", "bg-[#28c840]"].map((colour) => (
-            <span key={colour} className={cn("size-2.5 rounded-full", colour)} />
-          ))}
-        </span>
-
-        <div className="ml-3 flex min-w-0 items-center gap-1" role="tablist" aria-label="Demo tabs">
-          {TABS.map((tab) => {
-            const isActive = tab.id === activeId;
-            const isPlaying = tab.id === playingId;
-
-            return (
-              <button
-                key={tab.id}
-                type="button"
-                role="tab"
-                aria-selected={isActive}
-                onClick={() => setActiveId(tab.id)}
-                className={cn(
-                  "flex min-w-0 items-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-colors",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                  isActive
-                    ? "bg-background text-foreground"
-                    : "text-muted-foreground hover:text-foreground",
-                )}
-              >
-                {/* Present whether or not the tab is focused — that is the whole demonstration. */}
-                {isPlaying ? <PlayingBars className="h-2.5" /> : null}
-                <span className="truncate">{tab.label}</span>
-              </button>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Content changes with the tab. */}
-      <div className="min-h-[248px] px-6 py-6">
-        <Mono className="mb-4 block">{active.heading}</Mono>
-        <ol className="flex flex-col">
-          {active.rows.map((row, index) => {
-            const isNowPlaying = active.id === playingId && index === 0;
-            return (
-              <li
-                key={row}
-                className={cn(
-                  "flex items-center gap-3 rounded-lg px-2 py-2.5 text-base transition-colors",
-                  isNowPlaying ? "text-primary" : "text-muted-foreground",
-                )}
-              >
-                <span className="w-4 shrink-0 text-center">
-                  {isNowPlaying ? <PlayingBars className="h-3" /> : <Mono>{index + 1}</Mono>}
-                </span>
-                <span className="truncate">{row}</span>
-              </li>
-            );
-          })}
-        </ol>
-      </div>
-
-      {/* The player bar. Bound to the playing tab, never to the visible one. */}
-      <div className="flex items-center gap-3 border-t border-border bg-background/60 px-6 py-4">
-        <span className="size-9 shrink-0 rounded-md bg-muted" aria-hidden="true" />
-        <span className="flex min-w-0 flex-1 flex-col">
-          <span className="truncate text-base font-medium text-foreground">Am I Dreaming</span>
-          <span className="truncate text-sm text-muted-foreground">
-            Metro Boomin, A$AP Rocky, Roisee
-          </span>
-        </span>
-        <PlayingBars className="h-3.5" />
-        <Mono className="hidden sm:block">
-          still playing from “{TABS[0].label}”
-        </Mono>
-      </div>
-    </div>
-  );
-}
diff --git a/landing/src/components/ThemeCompare.tsx b/landing/src/components/ThemeCompare.tsx
new file mode 100644
index 00000000..10554f8e
--- /dev/null
+++ b/landing/src/components/ThemeCompare.tsx
@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { ArrowsHorizontalIcon } from "./icons";
+
+/** Before/after of the same screen in both themes; a native range input does the dragging and the keys. */
+export function ThemeCompare() {
+  const [split, setSplit] = useState(52);
+
+  return (
+    <div className="group relative aspect-[1405/1014] overflow-hidden rounded-2xl bg-background">
+      <img
+        src="./theme-dark.webp"
+        alt="Zuno's home screen in the dark theme"
+        width={1405}
+        height={1014}
+        loading="lazy"
+        decoding="async"
+        className="absolute inset-0 size-full object-cover"
+      />
+      <img
+        src="./theme-light.webp"
+        alt="The same screen in the light theme"
+        width={1405}
+        height={1014}
+        loading="lazy"
+        decoding="async"
+        className="absolute inset-0 size-full object-cover"
+        style={{ clipPath: `inset(0 0 0 ${split}%)` }}
+      />
+      <div className="pointer-events-none absolute inset-y-0 w-0.5 -translate-x-1/2 bg-foreground" style={{ left: `${split}%` }} aria-hidden="true">
+        <span className="absolute left-1/2 top-1/2 grid size-9 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-foreground text-background shadow-lg group-has-[input:focus-visible]:ring-2 group-has-[input:focus-visible]:ring-ring">
+          <ArrowsHorizontalIcon size={16} />
+        </span>
+      </div>
+      <span className="pointer-events-none absolute left-3 top-3 rounded-full bg-background/75 px-2.5 py-1 font-mono text-[11px] backdrop-blur">dark</span>
+      <span className="pointer-events-none absolute right-3 top-3 rounded-full bg-background/75 px-2.5 py-1 font-mono text-[11px] backdrop-blur">light</span>
+      <input
+        type="range"
+        min={0}
+        max={100}
+        value={split}
+        onChange={(event) => setSplit(Number(event.currentTarget.value))}
+        aria-label="Compare the dark and light themes"
+        className="absolute inset-0 size-full cursor-ew-resize opacity-0"
+      />
+    </div>
+  );
+}
diff --git a/landing/src/components/brandIcons.tsx b/landing/src/components/brandIcons.tsx
index 0a174075..81e40b3d 100644
--- a/landing/src/components/brandIcons.tsx
+++ b/landing/src/components/brandIcons.tsx
@@ -1,18 +1,7 @@
 import { Icon, addIcon } from "@iconify/react";
 import type { ComponentProps } from "react";
 
-/*
- * Six Iconify glyphs, inlined.
- *
- * Iconify normally fetches icons from its API at runtime, which means a network round trip and
- * a visible pop-in for the first paint of a download section — the one place on this page where
- * the icons *are* the wayfinding. The full `@iconify-json/logos` set is 7.4 MB, so bundling it
- * is not an option either.
- *
- * These six are extracted from that package and registered up front, so they render on the
- * first frame with no request. Regenerate by re-running the extraction if a mark changes; the
- * package stays a devDependency purely as the source of record.
- */
+// Iconify marks extracted from @iconify-json/logos and registered up front: no runtime fetch, no pop-in.
 const ICONS: Record<string, { body: string; width: number; height: number }> = {
   "microsoft-windows-icon": {"body":"<path fill=\"#0078d4\" d=\"M0 0h121.329v121.329H0zm134.671 0H256v121.329H134.671zM0 134.671h121.329V256H0zm134.671 0H256V256H134.671z\"/>","width":256,"height":256},
   // Apple's mark is a solid silhouette with no fill in the source, which SVG resolves to black —
@@ -28,7 +17,12 @@ for (const [name, data] of Object.entries(ICONS)) {
   addIcon(`logos:${name}`, data);
 }
 
-/** Brand marks keep their own colours; `color: unset` stops a parent text colour flattening them. */
+// GitHub's mark ships near-black, invisible on this page; this copy takes the text colour.
+addIcon("logos:github-mono", {
+  ...ICONS["github-icon"],
+  body: ICONS["github-icon"].body.replace('fill="#161614"', 'fill="currentColor"'),
+});
+
 export function BrandIcon(props: ComponentProps<typeof Icon>) {
   return <Icon {...props} />;
 }
@@ -37,16 +31,11 @@ export const OS_ICON = {
   windows: "logos:microsoft-windows-icon",
   macos: "logos:apple",
   linux: "logos:linux-tux",
-  github: "logos:github-icon",
 } as const;
 
-/**
- * The two services Zuno talks to, for the hero's floating badges.
- *
- * Aspect ratios differ wildly and both are wrong to guess at: the Discord mark is 256×199 and
- * the Last.fm one is the wordmark at 512×131, so each call site sizes its own.
- */
+// Aspect ratios differ (Discord 256×199, Last.fm 512×131), so each call site sizes its own.
 export const SERVICE_ICON = {
   discord: "logos:discord-icon",
   lastfm: "logos:lastfm",
+  github: "logos:github-mono",
 } as const;
diff --git a/landing/src/components/icons.tsx b/landing/src/components/icons.tsx
index c60947f3..342198b2 100644
--- a/landing/src/components/icons.tsx
+++ b/landing/src/components/icons.tsx
@@ -1,13 +1,6 @@
 import type { SVGProps } from "react";
 
-/**
- * Icons, hand-rolled rather than pulled from Solar.
- *
- * The app routes every icon through `@/ui/icons` and pays for ~1.2k modules of Solar to do it.
- * This page needs six glyphs; a dependency and a barrel import for that would be the tail
- * wagging the dog. Sized and stroked to match Solar Linear (24px box, 1.5 stroke) so they sit
- * correctly beside the app's own screenshots.
- */
+// Hand-rolled to match Solar Linear (24px box, 1.5 stroke); a dozen glyphs do not justify an icon package.
 type IconProps = SVGProps<SVGSVGElement> & { size?: number };
 
 function Icon({ size = 20, children, ...props }: IconProps) {
@@ -40,13 +33,6 @@ export function DownloadIcon(props: IconProps) {
   );
 }
 
-/*
- * Bare direction arrows, for the two hero actions.
- *
- * `DownloadIcon` has a tray under it, which promises a file. Both hero buttons only move you —
- * one down the page to the tiles, one out to the repository — so both get an arrow and nothing
- * else, and the direction is the whole message.
- */
 export function ArrowDownIcon(props: IconProps) {
   return (
     <Icon {...props}>
@@ -65,7 +51,25 @@ export function ArrowRightIcon(props: IconProps) {
   );
 }
 
-/* Transport glyphs are solid — a hairline triangle reads as an arrow, not a play button. */
+export function ArrowUpRightIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M7 17 17 7" />
+      <path d="M8 7h9v9" />
+    </Icon>
+  );
+}
+
+export function ArrowsHorizontalIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="m8 7-5 5 5 5" />
+      <path d="m16 7 5 5-5 5" />
+    </Icon>
+  );
+}
+
+// Transport glyphs are solid: a hairline triangle reads as an arrow, not a play button.
 export function PlayIcon(props: IconProps) {
   return (
     <Icon fill="currentColor" stroke="none" {...props}>
@@ -83,31 +87,6 @@ export function PauseIcon(props: IconProps) {
   );
 }
 
-/** One glyph, two states: the waves are dropped when muted rather than drawing a second icon. */
-export function SpeakerIcon({ muted, ...props }: IconProps & { muted?: boolean }) {
-  return (
-    <Icon {...props}>
-      <path
-        d="M4 9.5h3l4.3-3.6a.8.8 0 0 1 1.3.6v11a.8.8 0 0 1-1.3.6L7 14.5H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1Z"
-        fill="currentColor"
-        stroke="none"
-      />
-      {muted ? (
-        <>
-          <path d="m17 10 4 4" />
-          <path d="m21 10-4 4" />
-        </>
-      ) : (
-        <>
-          <path d="M16.5 9.5a3.5 3.5 0 0 1 0 5" />
-          <path d="M19 7a7 7 0 0 1 0 10" />
-        </>
-      )}
-    </Icon>
-  );
-}
-
-/** One glyph mirrored by the caller — a skip is the same shape pointed the other way. */
 export function SkipIcon({ back, ...props }: IconProps & { back?: boolean }) {
   return (
     <Icon fill="currentColor" stroke="none" {...props}>
@@ -127,6 +106,23 @@ export function CheckIcon(props: IconProps) {
   );
 }
 
+export function CopyIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <rect x="8.5" y="8.5" width="12" height="12" rx="2.5" />
+      <path d="M15.5 8.5V6a2.5 2.5 0 0 0-2.5-2.5H6A2.5 2.5 0 0 0 3.5 6v7A2.5 2.5 0 0 0 6 15.5h2.5" />
+    </Icon>
+  );
+}
+
+export function StarIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9L12 3.5Z" />
+    </Icon>
+  );
+}
+
 export function ShieldIcon(props: IconProps) {
   return (
     <Icon {...props}>
@@ -135,3 +131,30 @@ export function ShieldIcon(props: IconProps) {
     </Icon>
   );
 }
+
+export function UserIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <circle cx="12" cy="8" r="3.5" />
+      <path d="M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5" />
+    </Icon>
+  );
+}
+
+export function CodeIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="m8 8-4 4 4 4" />
+      <path d="m16 8 4 4-4 4" />
+      <path d="m13.5 5-3 14" />
+    </Icon>
+  );
+}
+
+export function FolderIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M3.5 7.5A2 2 0 0 1 5.5 5.5h3.6l2 2.2h7.4a2 2 0 0 1 2 2v7.8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V7.5Z" />
+    </Icon>
+  );
+}
diff --git a/landing/src/components/ui.tsx b/landing/src/components/ui.tsx
index 84b7a003..2492db74 100644
--- a/landing/src/components/ui.tsx
+++ b/landing/src/components/ui.tsx
@@ -1,148 +1,103 @@
-import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { useState, type AnchorHTMLAttributes, type ReactNode } from "react";
+import { CheckIcon, CopyIcon } from "./icons";
 
-/**
- * Class merger.
- *
- * The app uses clsx + tailwind-merge, which exist there because components take a `className`
- * override and have to resolve conflicts. Nothing on this page does, so a join is the whole
- * requirement — two dependencies for a filter would not earn their place.
- */
+/** A plain join: nothing here overrides classes, so tailwind-merge would not earn its bytes. */
 export function cn(...classes: Array<string | false | null | undefined>): string {
   return classes.filter(Boolean).join(" ");
 }
 
-/**
- * Geometry, type and behaviour shared by every weight — only colour differs, so only colour
- * lives in the variants.
- *
- * Nothing glows and nothing floats. A tinted shadow spilling out from under a saturated pill,
- * a `brightness` filter on hover, an inset top highlight faking a lit edge — those are the
- * default settings of a button that nobody decided anything about. The press is the whole
- * interaction: colour shifts on hover, and the pill moves a single pixel *down* when it is
- * actually clicked, because that is the direction a pressed thing goes.
- *
- * `group` is in the base because the buttons carry icons that react to the button's own hover,
- * and a variant that forgot it would silently kill the nudge.
- */
+export const FOCUS_RING = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
 const BASE =
   "group inline-flex shrink-0 select-none items-center justify-center gap-2 rounded-full font-semibold tracking-[-0.01em] " +
-  "transition-[background-color,border-color,color,transform] duration-150 ease-out " +
-  "active:translate-y-px " +
-  /* Offset colour set once here: Tailwind defaults it to white, which on this page draws a white
-     gap around every focused button. `background` is right for the hero and the sections both. */
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+  "transition-[background-color,color,transform] duration-150 ease-out active:translate-y-px " +
+  FOCUS_RING;
 
-/**
- * Size is a prop, not a `className` override.
- *
- * `cn` is a plain join, so a caller passing `px-7` did not replace the variant's `px-5` — both
- * landed on the element and Tailwind's stylesheet order picked the winner. That resolves the way
- * you want today only because `px-7` happens to be emitted after `px-5`. Naming the three sizes
- * that actually exist means padding is set once, by whoever knows which one they want.
- */
 const SIZES = {
-  sm: "px-4 py-2 text-sm",
-  md: "px-5 py-2.5 text-base",
-  /* Wide rather than tall: the label is the shape, so the horizontal padding carries the weight
-     and the type stays at reading size instead of growing with the button. */
-  lg: "px-8 py-4 text-base",
+  sm: "h-9 px-4 text-sm",
+  md: "h-11 px-5 text-[15px]",
+  lg: "h-13 px-7 text-[15px]",
 } as const;
 
-export type ButtonSize = keyof typeof SIZES;
-
-/*
- * The primary action, matching the app's primary button — same accent fill, same hover step.
- *
- * The download buttons are the one place the page and the product are the same object, so they
- * wear the product's colour rather than the page's neutral.
- */
-const SOLID = "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary";
-
-/*
- * The secondary weight, for actions sitting on top of the video.
- *
- * Nothing opaque works there — a card fill punches a hole in the footage — and nothing fully
- * transparent works either, because the label would compete with whatever frame happens to be
- * underneath. A hairline over blur is the least that stays legible over moving colour.
- */
-const OUTLINE =
-  "border border-white/15 bg-white/[0.06] text-white backdrop-blur-xl " +
-  "hover:border-white/25 hover:bg-white/[0.12] focus-visible:ring-white";
-
-/* Same weight, on an opaque surface — the blurred variant needs something behind it to blur. */
-const MUTED =
-  "border border-border text-foreground hover:border-white/20 hover:bg-white/[0.05] " +
-  "focus-visible:ring-ring";
-
-/*
- * Borders, not rings, on the two bordered weights.
- *
- * `ring-1 ring-border` plus `focus-visible:ring-2 focus-visible:ring-ring` is two rules fighting
- * over one property, settled by whichever variant Tailwind emitted last. Using `border` for the
- * resting outline leaves the ring to mean exactly one thing: focus.
- */
-const VARIANTS = { solid: SOLID, outline: OUTLINE, muted: MUTED } as const;
-export type ButtonVariant = keyof typeof VARIANTS;
+const VARIANTS = {
+  solid: "bg-primary text-primary-foreground hover:bg-primary/88",
+  light: "bg-foreground text-background hover:bg-foreground/88",
+  ghost: "bg-card/50 text-foreground hover:bg-card",
+} as const;
 
 export function LinkButton({
   variant = "solid",
   size = "md",
   className,
   ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-}) {
+}: AnchorHTMLAttributes<HTMLAnchorElement> & { variant?: keyof typeof VARIANTS; size?: keyof typeof SIZES }) {
   return <a className={cn(BASE, SIZES[size], VARIANTS[variant], className)} {...props} />;
 }
 
-/** Small monospace label. Used for versions, sizes, counts — anything machine-ish. */
-export function Mono({ className, children }: { className?: string; children: ReactNode }) {
-  return (
-    <span className={cn("font-mono text-[13px] tracking-tight text-muted-foreground", className)}>
-      {children}
-    </span>
-  );
-}
-
-/**
- * Section shell.
- *
- * Everything is on one measure and left-aligned. Centred columns read as a template; a single
- * consistent left edge running the length of the page is what makes it read as designed.
- */
-export function Section({
-  id,
+export function SectionHeading({
   index,
+  label,
   title,
   lede,
-  children,
 }: {
-  id?: string;
-  /** Two-digit marker in the margin — the page reads as a numbered document. */
-  index?: string;
-  title?: string;
+  index: string;
+  label: string;
+  title: ReactNode;
   lede?: ReactNode;
-  children?: ReactNode;
 }) {
   return (
-    <section id={id} className="reveal">
-      <div className="mx-auto w-full max-w-6xl px-6 py-20 sm:py-28">
-        <div className="flex flex-col gap-4 sm:flex-row sm:gap-10">
-          <Mono className="shrink-0 pt-1.5 sm:w-16">{index}</Mono>
-          <div className="flex min-w-0 flex-1 flex-col gap-4">
-            <h2 className="max-w-2xl text-pretty text-3xl font-semibold tracking-[-0.025em] text-foreground sm:text-4xl">
-              {title}
-            </h2>
-            {lede ? (
-              <p className="max-w-2xl text-pretty text-base leading-relaxed text-muted-foreground sm:text-lg">
-                {lede}
-              </p>
-            ) : null}
-            {children ? <div className="mt-6">{children}</div> : null}
-          </div>
-        </div>
-      </div>
-    </section>
+    <div className="flex flex-col gap-5">
+      <p className="flex items-center gap-3 font-mono text-[12px] uppercase tracking-[0.16em] text-muted-foreground">
+        <span className="text-primary">{index}</span>
+        <span className="h-px w-8 bg-muted-foreground/40" aria-hidden="true" />
+        {label}
+      </p>
+      <h2 className="max-w-[20ch] text-balance text-[clamp(2.25rem,4.6vw,4rem)] font-semibold leading-[1.02] tracking-[-0.042em]">
+        {title}
+      </h2>
+      {lede ? <p className="max-w-[46ch] text-pretty text-lg leading-relaxed text-muted-foreground">{lede}</p> : null}
+    </div>
+  );
+}
+
+/** Shell commands with one copy button; still selectable by hand where the clipboard is blocked. */
+export function CopyBlock({ lines, label }: { lines: readonly string[]; label: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(lines.join("\n"));
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      // Blocked clipboard: the text is still there to select.
+    }
+  };
+
+  return (
+    <div className="flex items-start gap-3 rounded-2xl bg-background/70 py-3 pl-4 pr-2">
+      <pre className="min-w-0 flex-1 overflow-x-auto py-1 font-mono text-[13px] leading-6">
+        {lines.map((line) => (
+          <span key={line} className="block whitespace-pre">
+            <span className="select-none text-primary">$ </span>
+            {line}
+          </span>
+        ))}
+      </pre>
+      <button
+        type="button"
+        onClick={copy}
+        className={cn(
+          "grid size-9 shrink-0 place-items-center rounded-xl text-muted-foreground transition-colors hover:bg-card hover:text-foreground",
+          FOCUS_RING,
+        )}
+        aria-label={`Copy ${label}`}
+      >
+        {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+      </button>
+      <span className="sr-only" role="status" aria-live="polite">
+        {copied ? "Copied to clipboard" : ""}
+      </span>
+    </div>
   );
 }
diff --git a/landing/src/format.check.ts b/landing/src/format.check.ts
new file mode 100644
index 00000000..5f55e090
--- /dev/null
+++ b/landing/src/format.check.ts
@@ -0,0 +1,19 @@
+export {};
+
+import { formatCount } from "./github";
+import { timeAgo } from "./releases";
+
+function check(condition: boolean, message: string): void {
+  if (!condition) throw new Error(`FAILED: ${message}`);
+}
+
+check(formatCount(633) === "633" && formatCount(1000) === "1k", "small counts and round thousands");
+check(formatCount(1234) === "1.2k" && formatCount(12_500) === "13k", "one decimal below ten thousand");
+
+const now = Date.parse("2026-10-07T12:00:00Z");
+check(timeAgo("2026-10-07T09:00:00Z", now) === "today", "same day");
+check(timeAgo("2026-10-04T12:00:00Z", now) === "3 days ago", "days");
+check(timeAgo("2026-09-23T12:00:00Z", now) === "2 weeks ago", "weeks");
+check(timeAgo(null, now) === "recently" && timeAgo("not a date", now) === "recently", "no date");
+
+console.log("format: ok");
diff --git a/landing/src/github.ts b/landing/src/github.ts
new file mode 100644
index 00000000..7d71e95b
--- /dev/null
+++ b/landing/src/github.ts
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+
+const REPO_API = "https://api.github.com/repos/noFAYZ/zuno";
+
+export interface Contributor {
+  login: string;
+  avatar: string;
+  url: string;
+}
+
+export interface RepoStats {
+  stars: number;
+  forks: number;
+  contributors: Contributor[];
+}
+
+async function getJson<T>(url: string, signal: AbortSignal): Promise<T> {
+  const response = await fetch(url, { headers: { Accept: "application/vnd.github+json" }, signal });
+  if (!response.ok) throw new Error(`GitHub returned HTTP ${response.status}`);
+  return (await response.json()) as T;
+}
+
+async function fetchRepoStats(signal: AbortSignal): Promise<RepoStats> {
+  const [repo, people] = await Promise.all([
+    getJson<{ stargazers_count?: number; forks_count?: number }>(REPO_API, signal),
+    // Contributors are a nice-to-have; a failure here should not cost the star count.
+    getJson<Array<{ login: string; avatar_url: string; html_url: string; type: string }>>(
+      `${REPO_API}/contributors?per_page=24`,
+      signal,
+    ).catch(() => []),
+  ]);
+  return {
+    stars: repo.stargazers_count ?? 0,
+    forks: repo.forks_count ?? 0,
+    contributors: people
+      .filter((person) => person.type === "User")
+      .map((person) => ({ login: person.login, avatar: `${person.avatar_url}&s=80`, url: person.html_url })),
+  };
+}
+
+/** Live repo numbers; null until they arrive, and for good if GitHub says no (rate limit, offline). */
+export function useRepoStats(): RepoStats | null {
+  const [stats, setStats] = useState<RepoStats | null>(null);
+  useEffect(() => {
+    const controller = new AbortController();
+    fetchRepoStats(controller.signal).then(setStats, () => {});
+    return () => controller.abort();
+  }, []);
+  return stats;
+}
+
+export function formatCount(count: number): string {
+  if (count < 1000) return String(count);
+  const thousands = count / 1000;
+  return `${thousands < 10 ? thousands.toFixed(1).replace(/\.0$/, "") : Math.round(thousands)}k`;
+}
diff --git a/landing/src/main.tsx b/landing/src/main.tsx
index c4d61a6e..d991cc4b 100644
--- a/landing/src/main.tsx
+++ b/landing/src/main.tsx
@@ -1,16 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Analytics } from "@vercel/analytics/react";
+import "@fontsource-variable/inter/opsz.css";
+import "@fontsource-variable/geist-mono";
 import { App } from "./App";
 import "./styles.css";
 
-/*
- * Dark, always.
- *
- * The site ships one theme, so this is set once here rather than read from a preference. The
- * token layer still keys off `data-theme`, which keeps the light values one attribute away if
- * that ever changes.
- */
+// One theme on the site; the token layer still keys off data-theme.
 document.documentElement.dataset.theme = "dark";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
diff --git a/landing/src/releases.ts b/landing/src/releases.ts
index fb6c0446..3960c3dc 100644
--- a/landing/src/releases.ts
+++ b/landing/src/releases.ts
@@ -146,3 +146,14 @@ export function formatSize(bytes: number): string {
   const megabytes = bytes / 1024 / 1024;
   return `${megabytes.toFixed(1)} MB`;
 }
+
+/** "3 days ago", "last week" — or "recently" when GitHub gave no date. */
+export function timeAgo(iso: string | null, now = Date.now()): string {
+  const then = iso ? Date.parse(iso) : Number.NaN;
+  if (!Number.isFinite(then)) return "recently";
+  const days = Math.round((then - now) / 86_400_000);
+  const format = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  if (Math.abs(days) < 7) return format.format(days, "day");
+  if (Math.abs(days) < 60) return format.format(Math.round(days / 7), "week");
+  return format.format(Math.round(days / 30), "month");
+}
diff --git a/landing/src/styles.css b/landing/src/styles.css
index f9f68651..0c40884e 100644
--- a/landing/src/styles.css
+++ b/landing/src/styles.css
@@ -1,14 +1,6 @@
 @import "tailwindcss";
 
-/*
- * The app's token layer, copied rather than imported.
- *
- * `src/ui/styles/global.css` is full of things a website has no use for — window rounding,
- * titlebar heights, Paper-PC overrides, scrollbar hiding — and importing across project
- * boundaries would make the site's build depend on the desktop app's stylesheet staying
- * website-safe. These are the colour tokens only, byte-identical to the app's, so the two
- * genuinely match. If the brand shifts, both change together by hand.
- */
+/* The app's colour tokens, copied byte-for-byte; the brand block below is site-only. */
 @theme {
   --color-background: oklch(0.145 0 0);
   --color-foreground: oklch(0.985 0 0);
@@ -21,7 +13,6 @@
   --color-muted: oklch(0.269 0 0);
   --color-muted-foreground: oklch(0.708 0 0);
 
-  /* Brand accent — the one colour carried over from the old identity. */
   --color-primary: #ff0033;
   --color-primary-foreground: oklch(0.985 0 0);
 
@@ -35,8 +26,24 @@
   --color-input: oklch(1 0 0 / 15%);
   --color-ring: #ff0033;
 
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+  /* The mascot's palette and the record on the hero deck. */
+  --color-ghost: oklch(0.985 0.012 95);
+  --color-headphone: oklch(0.76 0.135 50);
+  --color-vinyl: oklch(0.2 0 0);
+  --color-groove: oklch(0.13 0 0);
+  --color-shadow: oklch(0 0 0);
+
+  /* Third-party marks, in their own brand values. */
+  --color-discord: #5865f2;
+  --color-lastfm: #d51007;
+
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
+    sans-serif;
+  --font-mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
     monospace;
+
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
 }
 
 html[data-theme="light"] {
@@ -64,105 +71,129 @@ html[data-theme="dark"] {
   color-scheme: dark;
 }
 
-html,
-body,
-#root {
-  min-height: 100%;
-  background: var(--color-background);
-  color: var(--color-foreground);
-  font-family: "Inter Variable", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
-    Arial, "Apple Color Emoji", "Segoe UI Emoji";
-  /* Same numeral treatment as the app, so version strings and sizes do not jitter. */
-  font-feature-settings: "cv11", "tnum";
+/* Written every frame by the demo player (src/audio/demoPlayer.ts); registered so calc() sees numbers. */
+@property --bass {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
 }
 
-/* The accent earns its keep in the small places too. */
-::selection {
-  background: color-mix(in oklch, var(--color-primary) 28%, transparent);
-  color: var(--color-foreground);
+@property --level {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --progress {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
 }
 
-/* Anchors land below the sticky header rather than under it. */
 html {
+  background: var(--color-background);
   scroll-behavior: smooth;
   scroll-padding-top: 6rem;
 }
 
-/*
- * Sections reveal as they arrive.
- *
- * `animation-timeline: view()` does this with no observer, no state and no JS — the browser
- * drives it off scroll position. Unsupported engines simply see the finished state, because
- * the rule only applies where the timeline resolves.
- */
-@supports (animation-timeline: view()) {
-  @media (prefers-reduced-motion: no-preference) {
-    .reveal {
-      animation: reveal-in linear both;
-      animation-timeline: view();
-      animation-range: entry 0% cover 22%;
-    }
-  }
+body {
+  min-height: 100svh;
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-sans);
+  font-feature-settings: "cv11";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: clip;
+}
+
+::selection {
+  background: color-mix(in oklch, var(--color-primary) 32%, transparent);
+  color: var(--color-foreground);
 }
 
-/*
- * Film grain over the hero.
- *
- * A single tiling `feTurbulence` as a data URI — no image request, no canvas, no library. It is
- * what stops a large dark surface from banding, and what stops the whole thing from reading as
- * a stock gradient. Kept faint enough to be felt rather than seen.
- */
+/* ── Texture ─────────────────────────────────────────────────────────── */
+
+/* Faint film grain: stops large dark fields banding. */
 .grain::after {
   content: "";
   position: absolute;
   inset: 0;
+  z-index: 1;
   pointer-events: none;
-  opacity: 0.055;
+  opacity: 0.05;
+  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
+  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
 }
 
-/*
- * The hero's entrance cascade.
- *
- * Shares `reveal-in` with the scroll-revealed sections, so the page has one arrival motion rather
- * than two. Time-based here rather than scroll-driven, because the hero is already on screen when
- * the page loads and has no entry to animate.
- */
-.hero-in {
-  animation: reveal-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-
-/*
- * The moon, as an arc across the top.
- *
- * A circle far wider than the viewport, pushed up until only the bottom of its limb is in frame.
- * Nothing sits behind the type — the light arrives from above it and falls away, which is the
- * whole difference between a light source and a blurred blob parked behind a headline.
- *
- * The border is what draws the arc: on a `border-radius: 50%` box it follows the curve for free,
- * and because the top of the circle is out of frame only the bottom of the ring ever shows. The
- * outer shadow is the spill below it. The mask then fades both towards the ends, so the arc has
- * no visible termination — it simply stops being bright.
- */
-.moon-arc {
-  border: 1px solid oklch(1 0 0 / 0.14);
-  box-shadow:
-    0 0 90px 6px color-mix(in oklch, var(--color-primary) 20%, transparent),
-    0 0 36px 0 oklch(1 0 0 / 0.05);
-  /* Prefixed as well as standard: Safari shipped `-webkit-mask-image`, and a dropped mask here
-     would leave a hard-edged 1px circle drawn across the top of the page. */
-  -webkit-mask-image: radial-gradient(38% 34% at 50% 100%, #5e0606 0%, transparent 74%);
-  mask-image: radial-gradient(38% 34% at 50% 100%, #000 0%, transparent 74%);
-}
-
-/*
- * Decorations that get out of the way once you start reading.
- *
- * `scroll(root block)` is the document's own scroll position rather than the element's view
- * progress — which is what "fade as the page moves" actually means, and it does not care where
- * in the hero the element happens to sit. Lengths rather than percentages in the range, because
- * the interesting distance is the first screen of scrolling, not a fraction of the page.
- */
+/* ── Header ──────────────────────────────────────────────────────────── */
+
+.header-glass {
+  background-color: color-mix(in oklch, var(--color-background) 72%, transparent);
+  backdrop-filter: blur(18px) saturate(1.4);
+  box-shadow: 0 12px 40px -16px color-mix(in oklch, var(--color-shadow) 80%, transparent);
+}
+
+/* Clear over the hero, glass once there is content behind it: driven by scroll, no listener. */
+@supports (animation-timeline: scroll()) {
+  .header-glass {
+    animation: header-glass linear both;
+    animation-timeline: scroll(root block);
+    animation-range: 0 160px;
+  }
+}
+
+@keyframes header-glass {
+  from {
+    background-color: transparent;
+    backdrop-filter: blur(0) saturate(1);
+    box-shadow: none;
+  }
+}
+
+html:not([data-playing="true"]) .now-bars {
+  display: none;
+}
+
+/* ── Hero ────────────────────────────────────────────────────────────── */
+
+.hero-aurora {
+  position: absolute;
+  inset: -20% -10% auto;
+  height: 120%;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(42% 38% at 78% 42%, color-mix(in oklch, var(--color-primary) 22%, transparent), transparent 70%),
+    radial-gradient(30% 30% at 64% 70%, color-mix(in oklch, var(--color-headphone) 12%, transparent), transparent 70%),
+    radial-gradient(40% 30% at 12% 8%, color-mix(in oklch, var(--color-foreground) 5%, transparent), transparent 70%);
+  opacity: calc(0.7 + var(--level) * 0.6);
+}
+
+.rise {
+  animation: rise 1.1s var(--ease-out-expo) both;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(0.4em);
+    filter: blur(8px);
+  }
+}
+
+.caret {
+  animation: caret-blink 1.2s steps(1) infinite;
+}
+
+@keyframes caret-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* Fades out over the first screen of scrolling, driven by the page scroll itself. */
 @supports (animation-timeline: scroll()) {
   @media (prefers-reduced-motion: no-preference) {
     .scroll-fade {
@@ -174,63 +205,239 @@ html {
 }
 
 @keyframes fade-away {
-  from {
-    opacity: 1;
-  }
   to {
     opacity: 0;
   }
 }
 
-/*
- * The floating badges.
- *
- * Rotation is carried in `--tilt` rather than in a class, because a `transform` inside keyframes
- * replaces the whole property — a `rotate-3` utility beside this would simply be overwritten the
- * moment the animation started. Each badge sets its own tilt, duration and a negative delay, so
- * they start out of phase instead of bobbing in unison.
- */
-.float {
-  animation: float-y 7s ease-in-out infinite alternate;
+/* ── Deck: record, tonearm, spectrum ─────────────────────────────────── */
+
+.deck {
+  position: relative;
+  aspect-ratio: 1;
+  width: 100%;
+}
+
+.deck-glow {
+  position: absolute;
+  inset: 6%;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(
+    closest-side,
+    color-mix(in oklch, var(--color-primary) 75%, transparent),
+    color-mix(in oklch, var(--color-headphone) 30%, transparent) 55%,
+    transparent 75%
+  );
+  filter: blur(56px);
+  opacity: calc(0.16 + var(--level) * 0.6);
+  scale: calc(0.94 + var(--bass) * 0.2);
+  will-change: opacity, scale;
 }
 
-@keyframes float-y {
-  from {
-    transform: translateY(-0.4rem) rotate(var(--tilt, 0deg));
-  }
-  to {
-    transform: translateY(0.4rem) rotate(var(--tilt, 0deg));
-  }
+.spectrum {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .float {
-    animation: none;
-    transform: rotate(var(--tilt, 0deg));
-  }
-}
-
-/*
- * The film stage.
- *
- * Taller than the viewport, with a `position: sticky` child that pins for a screen's worth of
- * scrolling. Inside it the frame grows from a rounded card to a full-bleed one — so the demo
- * takes the whole screen without the page ever handing it a separate route or a lightbox.
- *
- * `animation-timeline: view()` drives the growth off the stage's own position, which means no
- * scroll listener, no rAF loop and no state — the same trick the sections already use to reveal.
- * Where it is unsupported the frame renders at its finished size and simply sits there, which is
- * also exactly what the narrow layout does on purpose.
- */
+.record {
+  position: absolute;
+  inset: 8%;
+  border-radius: 50%;
+  background: var(--color-groove);
+  box-shadow:
+    0 40px 80px -30px var(--color-shadow),
+    inset 0 0 0 1px color-mix(in oklch, var(--color-foreground) 6%, transparent);
+  cursor: pointer;
+  scale: calc(1 + var(--bass) * 0.012);
+}
+
+/* The light stays put while the grooves turn, which is what makes the spin read as real. */
+.record::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+  background: conic-gradient(
+    from 200deg,
+    transparent 0 6%,
+    color-mix(in oklch, var(--color-foreground) 9%, transparent) 13%,
+    transparent 21% 49%,
+    color-mix(in oklch, var(--color-foreground) 6%, transparent) 61%,
+    transparent 70%
+  );
+}
+
+.record-spin {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+}
+
+.record-grooves {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle, transparent 0 36%, var(--color-groove) 36% 37.2%, transparent 37.2% 57%,
+      var(--color-groove) 57% 58.2%, transparent 58.2% 78%, var(--color-groove) 78% 79.2%, transparent 79.2%),
+    repeating-radial-gradient(circle, var(--color-vinyl) 0 1px, var(--color-groove) 1px 3px);
+}
+
+.record-text {
+  position: absolute;
+  inset: 0;
+  font-family: var(--font-mono);
+  font-size: 3px;
+  letter-spacing: 0.6px;
+  fill: color-mix(in oklch, var(--color-foreground) 34%, transparent);
+}
+
+.record-label {
+  position: absolute;
+  inset: 33%;
+  container-type: size;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  row-gap: 15%;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, color-mix(in oklch, var(--color-primary) 80%, var(--color-foreground)), var(--color-primary) 60%);
+  color: var(--color-primary-foreground);
+}
+
+.spindle {
+  position: absolute;
+  inset: 47%;
+  border-radius: 50%;
+  background: var(--color-groove);
+}
+
+.arm-base {
+  fill: var(--color-card);
+}
+
+.arm-pivot {
+  fill: var(--color-muted-foreground);
+}
+
+.arm-weight {
+  stroke: var(--color-muted-foreground);
+  stroke-width: 4.5;
+  stroke-linecap: round;
+}
+
+.arm-rod {
+  stroke: var(--color-ghost);
+  stroke-width: 1.3;
+  stroke-linecap: round;
+}
+
+.arm-head {
+  stroke: var(--color-headphone);
+  stroke-width: 3.4;
+  stroke-linecap: round;
+}
+
+/* Off the record at rest; on it while playing, creeping inward as the song runs, like a real one. */
+.tonearm {
+  transform-box: view-box;
+  transform-origin: 88px 14px;
+  rotate: -25deg;
+  transition: rotate 1.2s var(--ease-spring);
+}
+
+html[data-playing="true"] .tonearm {
+  rotate: calc(var(--progress) * 20deg);
+}
+
+/* The character clip is on pure black, so `screen` drops the black and keeps the ghost. */
+.screen-ghost {
+  mix-blend-mode: screen;
+  pointer-events: none;
+  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
+  mask-image: radial-gradient(closest-side, #000 72%, transparent);
+}
+
+.deck-ghost {
+  position: absolute;
+  left: -9%;
+  bottom: -7%;
+  width: 46%;
+  aspect-ratio: 1;
+  translate: 0 calc(var(--bass) * -0.75rem);
+}
+
+/* ── Seek bars (hero, mini player) ───────────────────────────────────── */
+
+.seek {
+  --fill: var(--color-foreground);
+  appearance: none;
+  height: 1rem;
+  background: transparent;
+  cursor: pointer;
+}
+
+.seek::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    var(--fill) var(--seek, 0%),
+    color-mix(in oklch, var(--color-foreground) 18%, transparent) var(--seek, 0%)
+  );
+}
+
+.seek::-moz-range-track {
+  height: 4px;
+  border-radius: 9999px;
+  background: color-mix(in oklch, var(--color-foreground) 18%, transparent);
+}
+
+.seek::-moz-range-progress {
+  height: 4px;
+  border-radius: 9999px;
+  background: var(--fill);
+}
+
+.seek::-webkit-slider-thumb {
+  appearance: none;
+  margin-top: -4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 9999px;
+  background: var(--color-foreground);
+  transition: scale 0.15s;
+}
+
+.seek::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--color-foreground);
+}
+
+.seek:hover::-webkit-slider-thumb {
+  scale: 1.25;
+}
+
+/* Cuts the conic fill down to a 2px ring. */
+.progress-ring {
+  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+}
+
+/* ── Film stage ──────────────────────────────────────────────────────── */
+
+/* Taller than the viewport; the frame pins inside it and grows to full bleed. */
 .film-stage {
   position: relative;
   height: 185svh;
-  /*
-   * The timeline is named on the stage and consumed by the frame inside it, rather than the frame
-   * reading its own `view()`. A sticky element stops moving relative to the scrollport the moment
-   * it pins, so its own view progress freezes exactly when the growth is supposed to happen. The
-   * stage never pins, so its progress is the honest one.
-   */
   view-timeline-name: --film;
 }
 
@@ -243,34 +450,46 @@ html {
   justify-content: center;
 }
 
-/*
- * Cut to the footage, not the other way round.
- *
- * The capture is 4:3, so the frame is too — a 16:9 stage would crop the app's own titlebar and
- * player bar off the top and bottom, which are the parts that make it read as a desktop window.
- * At full size that makes the height the limiting dimension, hence the width ceiling.
- */
+/* Cut to the 4:3 capture, so the app's titlebar and player bar stay in frame. */
 .film-frame {
   position: relative;
-  width: min(70%, calc(100svh * 4 / 3));
+  width: min(72%, calc(100svh * 4 / 3));
   aspect-ratio: 4 / 3;
   overflow: hidden;
   border-radius: 20px;
-  background: #000;
-  box-shadow: 0 8px 40px rgb(0 0 0 / 0.45);
+  background: var(--color-shadow);
+  box-shadow:
+    0 30px 120px -40px color-mix(in oklch, var(--color-primary) 45%, transparent),
+    inset 0 0 0 1px color-mix(in oklch, var(--color-foreground) 8%, transparent);
+}
+
+/* Phones: the frame cannot grow much, so it starts wide and the pin is short. */
+@media (max-width: 640px) {
+  .film-stage {
+    height: 125svh;
+  }
+
+  .film-frame {
+    width: 92%;
+  }
+}
+
+.film-glow {
+  position: absolute;
+  inset: 25% 20%;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(closest-side, color-mix(in oklch, var(--color-primary) 40%, transparent), transparent);
+  filter: blur(80px);
+  opacity: calc(0.35 + var(--level) * 0.5);
 }
 
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
+    /* The stage never pins, so its view progress keeps moving while the frame is held still. */
     .film-frame {
       animation: film-grow linear both;
       animation-timeline: --film;
-      /*
-       * `contain` is the phase where the stage completely covers the viewport — which, because the
-       * stage is taller than the viewport, is precisely the span during which the frame is pinned.
-       * So the frame stays small while it slides up into place and grows only once it is holding
-       * still, over the first half of the pin.
-       */
       animation-range: contain 0% contain 45%;
     }
   }
@@ -278,8 +497,8 @@ html {
 
 @keyframes film-grow {
   from {
-    transform: scale(0.68);
-    border-radius: 24px;
+    transform: scale(0.7);
+    border-radius: 28px;
   }
   to {
     transform: scale(1);
@@ -287,71 +506,236 @@ html {
   }
 }
 
-/*
- * The wordmark's cursor.
- *
- * `zuno_` ends in an underscore, so it is already a prompt — this just admits it. The one
- * piece of motion in the hero, and it belongs to the logo rather than being applied to it.
- * Steady rather than absent under reduced motion, since the block is part of the mark.
- */
-.caret {
-  animation: caret-blink 1.2s steps(1) infinite;
+/* ── Bento ───────────────────────────────────────────────────────────── */
+
+/* A soft light that follows the pointer; --mx/--my are set by Features. */
+.spotlight {
+  position: relative;
+  isolation: isolate;
 }
 
-@keyframes caret-blink {
-  0%,
-  50% {
-    opacity: 1;
+.spotlight::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  background: radial-gradient(
+    26rem circle at var(--mx, 50%) var(--my, 0%),
+    color-mix(in oklch, var(--color-foreground) 7%, transparent),
+    transparent 65%
+  );
+  opacity: 0;
+  transition: opacity 0.35s;
+}
+
+.spotlight:hover::before {
+  opacity: 1;
+}
+
+/* Vertical EQ faders. The 4px rail is painted, so the thumb needs no centring offset. */
+.eq-slider {
+  appearance: none;
+  writing-mode: vertical-lr;
+  direction: rtl;
+  width: 16px;
+  height: 100%;
+  background: transparent;
+  cursor: ns-resize;
+}
+
+.eq-slider::-webkit-slider-runnable-track {
+  width: 16px;
+  border-radius: 9999px;
+  background: linear-gradient(
+      to top,
+      var(--color-muted) var(--lo),
+      var(--color-primary) var(--lo) var(--hi),
+      var(--color-muted) var(--hi)
+    )
+    center / 4px 100% no-repeat;
+}
+
+.eq-slider::-moz-range-track {
+  width: 4px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    to top,
+    var(--color-muted) var(--lo),
+    var(--color-primary) var(--lo) var(--hi),
+    var(--color-muted) var(--hi)
+  );
+}
+
+.eq-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  background: var(--color-foreground);
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-primary) 22%, transparent);
+}
+
+.eq-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--color-foreground);
+}
+
+.eq-zero {
+  stroke: color-mix(in oklch, var(--color-foreground) 14%, transparent);
+  stroke-dasharray: 3 4;
+  vector-effect: non-scaling-stroke;
+}
+
+.eq-curve {
+  fill: none;
+  stroke: var(--color-primary);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.eq-fill {
+  fill: color-mix(in oklch, var(--color-primary) 16%, transparent);
+}
+
+/* ── Footer ──────────────────────────────────────────────────────────── */
+
+.wordmark-xl {
+  font-size: clamp(6rem, 26vw, 24rem);
+  line-height: 0.78;
+  letter-spacing: -0.065em;
+  background: linear-gradient(
+    to bottom,
+    color-mix(in oklch, var(--color-foreground) 16%, transparent),
+    transparent 82%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* ── Mini player dock ────────────────────────────────────────────────── */
+
+/* Appears once the hero's player scrolls away, the way the app's appears when you look away. */
+.mini-dock {
+  opacity: 0;
+  translate: 0 1rem;
+  pointer-events: none;
+  transition:
+    opacity 0.4s,
+    translate 0.6s var(--ease-out-expo);
+}
+
+html[data-hero-out="true"]:not([data-footer-in="true"]) .mini-dock {
+  opacity: 1;
+  translate: 0 0;
+  pointer-events: auto;
+}
+
+/* ── Shared motion ───────────────────────────────────────────────────── */
+
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .reveal {
+      animation: reveal-in linear both;
+      animation-timeline: view();
+      animation-range: entry 0% cover 20%;
+    }
   }
-  50.01%,
-  100% {
+}
+
+@keyframes reveal-in {
+  from {
     opacity: 0;
+    transform: translateY(1.5rem);
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .caret {
-    animation: none;
-    opacity: 1;
+/* Decorative loops exist only when motion is welcome: collapsing them to 0ms would strobe. */
+@media (prefers-reduced-motion: no-preference) {
+  .record-spin {
+    animation: spin 1.8s linear infinite;
+    animation-play-state: paused;
+  }
+
+  html[data-playing="true"] .record-spin {
+    animation-play-state: running;
+  }
+
+  .float {
+    animation: float-y 3.4s ease-in-out infinite alternate;
+  }
+
+  .equaliser-bar {
+    animation: equalise 1.1s ease-in-out infinite alternate;
+    animation-play-state: paused;
+  }
+
+  html[data-playing="true"] .equaliser-bar {
+    animation-play-state: running;
+  }
+
+  .dl-bar {
+    animation: dl-fill 4.8s var(--ease-out-expo) infinite;
+  }
+
+  .nudge {
+    animation: nudge 1.6s var(--ease-out-expo) infinite;
   }
 }
 
-/*
- * The playing indicator, shared by the tab demo and the bento cells.
- *
- * Three bars on staggered delays. Paused rather than removed under reduced motion, so the mark
- * still reads as "this is the one playing" without the movement.
- */
 .equaliser-bar {
   height: 100%;
-  animation: equalise 1.1s ease-in-out infinite alternate;
   transform-origin: bottom;
+  scale: 1 0.6;
+}
+
+@keyframes spin {
+  to {
+    rotate: 360deg;
+  }
+}
+
+@keyframes float-y {
+  from {
+    translate: 0 -0.35rem;
+  }
+  to {
+    translate: 0 0.35rem;
+  }
 }
 
 @keyframes equalise {
   from {
-    transform: scaleY(0.35);
+    scale: 1 0.3;
   }
   to {
-    transform: scaleY(1);
+    scale: 1 1;
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .equaliser-bar {
-    animation: none;
-    transform: scaleY(0.7);
+@keyframes dl-fill {
+  0% {
+    scale: 0 1;
+  }
+  75%,
+  100% {
+    scale: 1 1;
   }
 }
 
-@keyframes reveal-in {
-  from {
-    opacity: 0;
-    transform: translateY(1.25rem);
+@keyframes nudge {
+  0%,
+  100% {
+    translate: 0 0;
   }
-  to {
-    opacity: 1;
-    transform: none;
+  50% {
+    translate: 0 0.25rem;
   }
 }
 
@@ -360,10 +744,12 @@ html {
     scroll-behavior: auto;
   }
 
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.001ms !important;
-    transition-duration: 0.001ms !important;
+  .rise,
+  .caret {
+    animation: none;
+  }
+
+  .tonearm {
+    transition: none;
   }
 }