From e24a499008b24c3ecbbfb4b55ae7d0c90584f936 Mon Sep 17 00:00:00 2001
From: stuffbucket <231133237+stuffbucket@users.noreply.github.com>
Date: Wed, 24 Jun 2026 03:56:15 -0700
Subject: [PATCH 1/7] design(site): god-rays backdrop + brand-red hero +
 OS-aware download

- Add a subtle WebGL god-rays background (inlined GLSL; no Three.js / no shader dependency). Dark mode only; light mode keeps the warm-paper background. Brand jewel tones (turquoise -> indigo -> magenta), light source positioned behind the hero wordmark, prefers-reduced-motion renders a single frame, paused on hidden tab, DPR-capped.
- Hero is now a solid brand-red card (drops the per-section top accent rule), cream ink.
- Hero download button detects the OS: Windows -> inert "coming soon" chip; macOS/other -> the macOS download (server-rendered default, no-JS safe).
---
 site/src/components/GodRays.astro      | 220 +++++++++++++++++++++++++
 site/src/components/markdoc/Hero.astro |  38 ++++-
 site/src/pages/index.astro             |   4 +
 3 files changed, 261 insertions(+), 1 deletion(-)
 create mode 100644 site/src/components/GodRays.astro

diff --git a/site/src/components/GodRays.astro b/site/src/components/GodRays.astro
new file mode 100644
index 0000000..bdcf3b1
--- /dev/null
+++ b/site/src/components/GodRays.astro
@@ -0,0 +1,220 @@
+---
+// God rays — a subtle volumetric light-shaft backdrop.
+//
+// - Inlined GLSL (no third-party shader library) + raw WebGL (no Three.js) to
+//   keep the page lean.
+// - DARK MODE ONLY: light shafts read on the black dark-theme background; on the
+//   light (warm paper) theme the canvas is hidden via CSS and the render loop
+//   stays paused.
+// - Reduced motion is a contract: under prefers-reduced-motion we draw a single
+//   static frame, never an animation loop.
+// - Pauses when the tab is hidden. pointer-events:none, z-index 0 — it sits
+//   behind every card, peeking through the card gaps and the page margins.
+---
+
+<canvas class="godrays" aria-hidden="true"></canvas>
+
+<script>
+  const canvas = document.querySelector<HTMLCanvasElement>("canvas.godrays")
+  if (canvas) initGodRays(canvas)
+
+  function initGodRays(canvas: HTMLCanvasElement): void {
+    const gl = canvas.getContext("webgl", {
+      antialias: false,
+      alpha: false,
+      depth: false,
+      powerPreference: "low-power",
+    })
+    if (!gl) return // No WebGL → the black page background is a fine fallback.
+
+    const vert = `
+      attribute vec2 p;
+      void main() { gl_Position = vec4(p, 0.0, 1.0); }
+    `
+
+    // Light source just above top-center; rays fan downward. The ray field is
+    // built from layered sines of the angle (each inherently 2π-periodic, so
+    // there's no seam) at irrational-ish frequencies for an irregular look,
+    // scrolled slowly over time. Radial falloff + a soft central glow shape it
+    // into shafts. Output is additive gold-on-black.
+    const frag = `
+      precision highp float;
+      uniform vec2 uRes;
+      uniform float uTime;
+      uniform float uIntensity;
+      uniform vec3 uColorA;
+      uniform vec3 uColorB;
+      uniform vec3 uColorC;
+
+      void main() {
+        vec2 uv = gl_FragCoord.xy / uRes;
+        float aspect = uRes.x / uRes.y;
+        vec2 p = vec2((uv.x - 0.5) * aspect + 0.5, uv.y);
+
+        vec2 light = vec2(0.5, 0.8);
+        vec2 d = p - light;
+        float dist = length(d);
+        float ang = atan(d.y, d.x);
+
+        float t = uTime * 0.16;
+        float r = 0.45
+          + 0.30 * sin(ang * 7.0  + t)
+          + 0.22 * sin(ang * 13.0 - t * 1.4 + 2.1)
+          + 0.16 * sin(ang * 23.0 + t * 0.8 + 4.2)
+          + 0.10 * sin(ang * 41.0 - t * 0.6 + 1.3);
+        r = max(r, 0.0);
+        r = pow(r, 2.6);
+
+        float falloff = smoothstep(1.5, 0.05, dist);
+        float beams = r * falloff;
+        float glow = smoothstep(0.85, 0.0, dist) * 0.16;
+
+        float v = (beams * 0.85 + glow) * uIntensity;
+        // Cyclic blend across the brand jewel tones by ray angle, so adjacent
+        // shafts differ in hue; drifts slowly over time.
+        float g = fract(ang / 6.28318 * 1.2 + uTime * 0.02);
+        vec3 col;
+        if (g < 0.33333) col = mix(uColorA, uColorB, g * 3.0);
+        else if (g < 0.66667) col = mix(uColorB, uColorC, (g - 0.33333) * 3.0);
+        else col = mix(uColorC, uColorA, (g - 0.66667) * 3.0);
+        col *= v;
+        gl_FragColor = vec4(col, 1.0);
+      }
+    `
+
+    function compile(type: number, src: string): WebGLShader | null {
+      const s = gl!.createShader(type)
+      if (!s) return null
+      gl!.shaderSource(s, src)
+      gl!.compileShader(s)
+      if (!gl!.getShaderParameter(s, gl!.COMPILE_STATUS)) {
+        console.warn("godrays shader:", gl!.getShaderInfoLog(s))
+        return null
+      }
+      return s
+    }
+
+    const vs = compile(gl.VERTEX_SHADER, vert)
+    const fs = compile(gl.FRAGMENT_SHADER, frag)
+    if (!vs || !fs) return
+    const prog = gl.createProgram()
+    if (!prog) return
+    gl.attachShader(prog, vs)
+    gl.attachShader(prog, fs)
+    gl.linkProgram(prog)
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+      console.warn("godrays link:", gl.getProgramInfoLog(prog))
+      return
+    }
+    gl.useProgram(prog)
+
+    // Single full-screen triangle covering clip space.
+    const buf = gl.createBuffer()
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 3, -1, -1, 3]),
+      gl.STATIC_DRAW,
+    )
+    const loc = gl.getAttribLocation(prog, "p")
+    gl.enableVertexAttribArray(loc)
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)
+
+    const uRes = gl.getUniformLocation(prog, "uRes")
+    const uTime = gl.getUniformLocation(prog, "uTime")
+    const uIntensity = gl.getUniformLocation(prog, "uIntensity")
+    const uColorA = gl.getUniformLocation(prog, "uColorA")
+    const uColorB = gl.getUniformLocation(prog, "uColorB")
+    const uColorC = gl.getUniformLocation(prog, "uColorC")
+    gl.uniform1f(uIntensity, 0.62)
+    // Brand jewel tones (dark-mode tints): turquoise → indigo → magenta. No
+    // gold — these coordinate with the teal cards and complement the red hero.
+    gl.uniform3f(uColorA, 0.31, 0.7, 0.75) // turquoise
+    gl.uniform3f(uColorB, 0.55, 0.48, 0.82) // indigo
+    gl.uniform3f(uColorC, 0.85, 0.42, 0.63) // magenta
+
+    // The shader is cheap; render at 0.85× and DPR-capped — soft enough that
+    // the upscale never shows, and easy on integrated GPUs / battery.
+    const scale = 0.85
+    const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
+    function resize(): void {
+      const w = Math.max(1, Math.round(window.innerWidth * scale * dpr))
+      const h = Math.max(1, Math.round(window.innerHeight * scale * dpr))
+      canvas.width = w
+      canvas.height = h
+      canvas.style.width = window.innerWidth + "px"
+      canvas.style.height = window.innerHeight + "px"
+      gl!.viewport(0, 0, w, h)
+      gl!.uniform2f(uRes, w, h)
+    }
+
+    const start = performance.now()
+    let running = false
+    let rafId = 0
+    function frame(now: number): void {
+      gl!.uniform1f(uTime, (now - start) / 1000)
+      gl!.drawArrays(gl!.TRIANGLES, 0, 3)
+      if (running) rafId = requestAnimationFrame(frame)
+    }
+    function play(): void {
+      if (running) return
+      running = true
+      rafId = requestAnimationFrame(frame)
+    }
+    function pause(): void {
+      running = false
+      if (rafId) cancelAnimationFrame(rafId)
+    }
+
+    const darkMM = window.matchMedia("(prefers-color-scheme: dark)")
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+
+    // Active only in dark mode. In light mode CSS hides the canvas and we keep
+    // the loop paused.
+    function sync(): void {
+      if (!darkMM.matches) {
+        pause()
+        return
+      }
+      if (reduced) {
+        pause()
+        frame(performance.now()) // single static frame
+      } else if (document.visibilityState === "visible") {
+        play()
+      }
+    }
+
+    resize()
+    window.addEventListener(
+      "resize",
+      () => {
+        resize()
+        if (!running && darkMM.matches) frame(performance.now())
+      },
+      { passive: true },
+    )
+    darkMM.addEventListener?.("change", sync)
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) pause()
+      else sync()
+    })
+
+    sync()
+  }
+</script>
+
+<style>
+  canvas.godrays {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    display: block;
+  }
+  /* Light theme keeps its warm-paper background — no shafts there. */
+  @media (prefers-color-scheme: light) {
+    canvas.godrays {
+      display: none;
+    }
+  }
+</style>
diff --git a/site/src/components/markdoc/Hero.astro b/site/src/components/markdoc/Hero.astro
index 54ccc9c..4a9bff0 100644
--- a/site/src/components/markdoc/Hero.astro
+++ b/site/src/components/markdoc/Hero.astro
@@ -46,6 +46,21 @@ const { macDmg: downloadUrl, releasesUrl } = await getDownloadInfo();
 </header>
 
 <style>
+  /* The hero is a solid brand-red card (a fixed brand statement in both
+     themes), so it drops the per-section top accent rule and carries cream
+     ink directly — matching the maximal app-icon tile. */
+  .hero {
+    background: #c8334a;
+    color: #f4ead4;
+  }
+  .hero::before {
+    display: none;
+  }
+  .wordmark,
+  .tagline {
+    color: #f4ead4;
+  }
+
   .hero-typed {
     /* Reserve a stable two-line height so the typing effect doesn't reflow the
        layout beneath it as characters appear. */
@@ -74,7 +89,7 @@ const { macDmg: downloadUrl, releasesUrl } = await getDownloadInfo();
   .hero-cta__secondary {
     font-family: var(--mono);
     font-size: 0.9rem;
-    color: var(--ink-cream);
+    color: #f4ead4;
     text-decoration: underline;
     text-underline-offset: 3px;
     text-decoration-color: var(--ink-gold);
@@ -116,3 +131,24 @@ const { macDmg: downloadUrl, releasesUrl } = await getDownloadInfo();
     tick();
   })();
 </script>
+
+<script is:inline>
+  // OS-aware primary download: macOS is the live build; Windows is "coming
+  // soon", so Windows visitors get an honest inert chip instead of a Mac
+  // download. The server-rendered default is the macOS download (no-JS safe).
+  (function () {
+    var nav = navigator;
+    var uad = nav.userAgentData;
+    var plat = (uad && uad.platform) || nav.platform || "";
+    var isWindows = /win/i.test(plat) || /windows/i.test(nav.userAgent || "");
+    if (!isWindows) return;
+    var btn = document.querySelector(".hero-cta__primary");
+    if (!btn) return;
+    btn.classList.remove("btn--primary");
+    btn.classList.add("btn--soon");
+    btn.removeAttribute("href");
+    btn.setAttribute("aria-disabled", "true");
+    var label = btn.querySelector(".btn-label span:last-child");
+    if (label) label.textContent = "Windows — coming soon";
+  })();
+</script>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 0237497..fd6daa4 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import { getEntry, render } from "astro:content";
 
+import GodRays from "../components/GodRays.astro";
 import "../styles/global.css";
 
 const REPO = "stuffbucket/maximal";
@@ -52,6 +53,9 @@ const { Content } = await render(entry);
   <body>
     <a href="#main" class="skip-link">Skip to content</a>
 
+    <!-- Background: god-rays shader (dark mode only, behind all content) -->
+    <GodRays />
+
     <main id="main">
       <Content />
 

From ba14174c5bbade3c5fbd60f5b79e4befd64e157e Mon Sep 17 00:00:00 2001
From: stuffbucket <231133237+stuffbucket@users.noreply.github.com>
Date: Wed, 24 Jun 2026 13:00:48 -0700
Subject: [PATCH 2/7] =?UTF-8?q?fix(shell):=20windows=20startup=20notificat?=
 =?UTF-8?q?ion=20=E2=80=94=20system=20tray=20+=20down=20arrow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

macOS copy (menu bar ↑) is unchanged; only the non-macOS branch gets
"Maximal is running in your system tray ↓".
---
 shell/src-tauri/src/lib.rs | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/shell/src-tauri/src/lib.rs b/shell/src-tauri/src/lib.rs
index d01667a..034cf37 100644
--- a/shell/src-tauri/src/lib.rs
+++ b/shell/src-tauri/src/lib.rs
@@ -1483,11 +1483,19 @@ fn dismiss_splash(app: &AppHandle) {
 /// denial or a dev (`cargo run`) no-op must not matter.
 fn fire_startup_notification(app: &AppHandle) {
     use tauri_plugin_notification::NotificationExt;
+    // Where the icon lives — and which way to point — is platform-specific:
+    // macOS puts it in the top menu bar (↑); Windows puts it in the
+    // bottom-right system tray (↓). Leave the macOS copy exactly as-is.
+    let body = if cfg!(target_os = "macos") {
+        "Look for the Maximal icon in your menu bar ↑"
+    } else {
+        "Maximal is running in your system tray ↓"
+    };
     if let Err(err) = app
         .notification()
         .builder()
         .title("Maximal is running")
-        .body("Look for the Maximal icon in your menu bar ↑")
+        .body(body)
         .show()
     {
         eprintln!("[shell] startup notification failed: {err}");

From c881305e69dd2af6b6e4dd76ae69f357b01acb20 Mon Sep 17 00:00:00 2001
From: stuffbucket <231133237+stuffbucket@users.noreply.github.com>
Date: Wed, 24 Jun 2026 13:00:51 -0700
Subject: [PATCH 3/7] feat(shell): warn to restart Claude Code when disabling
 routing on Windows

On Windows a running Claude Code session keeps routing through the proxy
until restarted (it reads its base URL at launch); macOS picks the change
up live. Show a modal (reusing ConfirmDialog) before disabling, Windows
only, telling the user to /exit and relaunch. Closes #178.
---
 shell/src/ui/features/apps/AppCard.tsx | 54 +++++++++++++++++++++++++-
 shell/src/ui/platform.ts               | 18 +++++++++
 2 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 shell/src/ui/platform.ts

diff --git a/shell/src/ui/features/apps/AppCard.tsx b/shell/src/ui/features/apps/AppCard.tsx
index 069aa80..88677d8 100644
--- a/shell/src/ui/features/apps/AppCard.tsx
+++ b/shell/src/ui/features/apps/AppCard.tsx
@@ -2,8 +2,10 @@ import { useState } from "react";
 
 import type { AppEntry } from "../../../proxy/client";
 import { Button } from "../../components/Button";
+import { ConfirmDialog } from "../../components/ConfirmDialog";
 import { Switch } from "../../components/Switch";
 import { cx } from "../../components/cx";
+import { isWindows } from "../../platform";
 
 import type { MutationResult } from "./useApps";
 
@@ -36,6 +38,13 @@ function conflictCopy(app: AppEntry): { title: string; detail: string } | null {
 export function AppCard({ app, onToggle, onRescan }: AppCardProps): JSX.Element {
   const [copied, setCopied] = useState(false);
   const [rescanning, setRescanning] = useState(false);
+  // Windows-only: disabling Claude Code routing doesn't take effect in an
+  // already-running session (Claude Code reads its base URL at launch on
+  // Windows; macOS picks it up live). Warn before disabling so the user
+  // knows to /exit and relaunch. See issue #178.
+  const [restartWarnOpen, setRestartWarnOpen] = useState(false);
+  const [disabling, setDisabling] = useState(false);
+  const needsWindowsRestartWarning = app.id === "claude-code" && isWindows();
 
   const comingSoon = app.kind === "coming-soon";
   const notInstalled = app.status === "not-installed";
@@ -64,6 +73,23 @@ export function AppCard({ app, onToggle, onRescan }: AppCardProps): JSX.Element
     setRescanning(false);
   };
 
+  // Intercept only the Claude-Code-disable-on-Windows case; everything else
+  // (enabling, other apps, macOS) toggles straight through.
+  const handleToggle = (next: boolean): void => {
+    if (!next && needsWindowsRestartWarning) {
+      setRestartWarnOpen(true);
+      return;
+    }
+    void onToggle(next);
+  };
+
+  const confirmDisable = async (): Promise<void> => {
+    setDisabling(true);
+    await onToggle(false);
+    setDisabling(false);
+    setRestartWarnOpen(false);
+  };
+
   return (
     <article
       className={cx("app-card", comingSoon && "app-card--soon")}
@@ -79,7 +105,7 @@ export function AppCard({ app, onToggle, onRescan }: AppCardProps): JSX.Element
             <Switch
               checked={app.enabled}
               disabled={notInstalled}
-              onCheckedChange={(next) => void onToggle(next)}
+              onCheckedChange={handleToggle}
               label={app.enabled ? "On" : "Off"}
             />
           )}
@@ -158,6 +184,32 @@ export function AppCard({ app, onToggle, onRescan }: AppCardProps): JSX.Element
           </span>
         </div>
       )}
+
+      {/* Windows-only heads-up before disabling Claude Code routing: a
+          running session keeps using the proxy until it's restarted. */}
+      {needsWindowsRestartWarning && (
+        <ConfirmDialog
+          open={restartWarnOpen}
+          title="Restart Claude Code to finish"
+          body={
+            <>
+              <p>
+                On Windows, a Claude Code session that's already running keeps
+                routing through maximal until you restart it.
+              </p>
+              <p>
+                After you disable this, run <code className="mono">/exit</code>{" "}
+                in Claude Code and start it again for the change to take effect.
+              </p>
+            </>
+          }
+          confirmLabel="Disable routing"
+          cancelLabel="Keep on"
+          busy={disabling}
+          onConfirm={confirmDisable}
+          onCancel={() => setRestartWarnOpen(false)}
+        />
+      )}
     </article>
   );
 }
diff --git a/shell/src/ui/platform.ts b/shell/src/ui/platform.ts
new file mode 100644
index 0000000..27667dc
--- /dev/null
+++ b/shell/src/ui/platform.ts
@@ -0,0 +1,18 @@
+/**
+ * Best-effort OS detection for the settings webview.
+ *
+ * The embedded UI is the SAME bundle on every platform, so anything that
+ * must differ by OS (e.g. the Windows-only "restart Claude Code" caveat)
+ * has to branch at runtime. We have no `tauri-plugin-os` registered, and
+ * the UI can also be opened in a plain browser, so the dependency-free
+ * signal is the user-agent: WebView2 on Windows reports "Windows NT",
+ * WKWebView on macOS reports "Macintosh". Prefer the structured
+ * `userAgentData.platform` when present, fall back to the UA string.
+ */
+export function isWindows(): boolean {
+  if (typeof navigator === "undefined") return false;
+  const uaData = (navigator as { userAgentData?: { platform?: string } })
+    .userAgentData;
+  if (uaData?.platform) return /windows/i.test(uaData.platform);
+  return /windows/i.test(navigator.userAgent);
+}

From f0104990b4f9b81f3f9f6f36d40d3fd8ba6c797d Mon Sep 17 00:00:00 2001
From: stuffbucket <231133237+stuffbucket@users.noreply.github.com>
Date: Wed, 24 Jun 2026 13:48:37 -0700
Subject: [PATCH 4/7] fix(windows): correct Claude Desktop 3P dir to
 %LOCALAPPDATA% + fix detection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two Windows-only bugs surfaced by hands-on testing (macOS unaffected):

1. getClaude3pDir wrote the 3P configLibrary to %APPDATA%\Claude-3p
   (Roaming), but Anthropic's docs locate it under %LOCALAPPDATA%\Claude-3p
   (Local) — so the config landed where Claude Desktop never reads it. On
   macOS both halves share ~/Library/Application Support; on Windows the
   consumer config (Roaming %APPDATA%\Claude) and the 3P dir (Local) diverge.

2. The settings Apps route detected Claude Desktop via getClaude3pDir()
   existence — circular, since that dir only exists after maximal writes it,
   so Claude read as not-installed until configured. Switch to the existing
   claudeAppInstalled() (probes %LOCALAPPDATA%\AnthropicClaude + the
   WindowsApps launcher shim; /Applications/Claude.app on macOS — same as
   before there).

Refs the Claude Desktop 3P config path investigation (Anthropic admin-deploy
docs: configLibrary under Local; managed config is registry HKLM/HKCU).
---
 src/lib/claude-desktop-3p-config.ts    | 18 +++++++++++++----
 src/routes/settings/apps.ts            | 12 ++---------
 tests/claude-desktop-3p-config.test.ts | 28 ++++++++++++++------------
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/lib/claude-desktop-3p-config.ts b/src/lib/claude-desktop-3p-config.ts
index 3c0e7c2..3370de1 100644
--- a/src/lib/claude-desktop-3p-config.ts
+++ b/src/lib/claude-desktop-3p-config.ts
@@ -99,22 +99,32 @@ export function gatewayProfile(
  * where the Cowork-3P build actually reads it:
  *
  *   - macOS:   `~/Library/Application Support/Claude-3p`
- *   - Windows: `%APPDATA%\Claude-3p`  (Electron's Windows userData base is
- *              Roaming AppData — NOT Local — so this is `…\Roaming\Claude-3p`).
+ *   - Windows: `%LOCALAPPDATA%\Claude-3p`  (Anthropic's docs locate the 3P
+ *              `configLibrary` under Local AppData, NOT Roaming. Note this
+ *              diverges from the consumer `claude_desktop_config.json`, which
+ *              IS under Roaming `%APPDATA%\Claude` — on Windows the two halves
+ *              live on different drives, unlike macOS where both share
+ *              `~/Library/Application Support`.)
  *
  * The `configLibrary/` subdir (added by callers) is where the applied
  * inference profile lives; the historically-wrong target was the standard-
  * mode `…\Claude\claude_desktop_config.json` (no `-3p`), which the 3P build
  * ignores. `platform` is injectable so the Windows branch is unit-testable
  * on a POSIX host.
+ *
+ * NOTE: an MSIX/Store install virtualizes this under
+ * `%LOCALAPPDATA%\Packages\Claude_pzs8sxrjxfjjc\LocalState\Claude-3p`; this
+ * returns the plain `.exe`-install path (the common case). See
+ * docs/spec / the Claude-Desktop-3P memory for the MSIX wrinkle.
  */
 export function getClaude3pDir(
   home: string = os.homedir(),
   platform: NodeJS.Platform = process.platform,
 ): string {
   if (platform === "win32") {
-    const appData = process.env.APPDATA ?? path.join(home, "AppData", "Roaming")
-    return path.join(appData, `Claude${USERDATA_3P_SUFFIX}`)
+    const localAppData =
+      process.env.LOCALAPPDATA ?? path.join(home, "AppData", "Local")
+    return path.join(localAppData, `Claude${USERDATA_3P_SUFFIX}`)
   }
   return path.join(
     home,
diff --git a/src/routes/settings/apps.ts b/src/routes/settings/apps.ts
index 4c05d44..7f2206b 100644
--- a/src/routes/settings/apps.ts
+++ b/src/routes/settings/apps.ts
@@ -16,8 +16,8 @@
 import type { Context } from "hono"
 
 import { Hono } from "hono"
-import fs from "node:fs"
 
+import { claudeAppInstalled } from "~/configure-claude-desktop"
 import {
   type ClaudeInstall,
   detectClaudeInstalls,
@@ -29,7 +29,6 @@ import {
 } from "~/lib/claude-code-settings"
 import {
   applyConfigLibraryProfile,
-  getClaude3pDir,
   isConfigLibraryApplied,
   revertConfigLibraryProfile,
 } from "~/lib/claude-desktop-3p-config"
@@ -54,13 +53,6 @@ function httpError(message: string, status: number): HTTPError {
   return new HTTPError(message, new Response(message, { status }))
 }
 
-/** Is Claude Desktop present? True when the macOS app bundle is installed
- *  or its third-party (Claude-3p) userData dir exists. */
-function claudeDesktopInstalled(): boolean {
-  if (fs.existsSync("/Applications/Claude.app")) return true
-  return fs.existsSync(getClaude3pDir())
-}
-
 function buildClaudeCodeApp(
   precomputedInstalls?: ReadonlyArray<ClaudeInstall>,
   conflict: AppEntryT["conflict"] = null,
@@ -92,7 +84,7 @@ function buildClaudeCodeApp(
 }
 
 function buildClaudeDesktopApp(): AppEntryT {
-  const installed = claudeDesktopInstalled()
+  const installed = claudeAppInstalled()
   const configured = isConfigLibraryApplied()
   return {
     id: "claude-desktop",
diff --git a/tests/claude-desktop-3p-config.test.ts b/tests/claude-desktop-3p-config.test.ts
index 94fb35f..91edcf4 100644
--- a/tests/claude-desktop-3p-config.test.ts
+++ b/tests/claude-desktop-3p-config.test.ts
@@ -50,35 +50,37 @@ function topConfig(): Record<string, unknown> {
 }
 
 describe("getClaude3pDir — Windows (platform injected)", () => {
-  let savedAppData: string | undefined
+  let savedLocalAppData: string | undefined
 
   beforeEach(() => {
-    savedAppData = process.env.APPDATA
+    savedLocalAppData = process.env.LOCALAPPDATA
   })
 
   afterEach(() => {
-    if (savedAppData === undefined) delete process.env.APPDATA
-    else process.env.APPDATA = savedAppData
+    if (savedLocalAppData === undefined) delete process.env.LOCALAPPDATA
+    else process.env.LOCALAPPDATA = savedLocalAppData
   })
 
-  it("targets %APPDATA%/Claude-3p (the -3p suffix, in Roaming)", () => {
-    process.env.APPDATA = path.join(home, "AppData", "Roaming")
+  it("targets %LOCALAPPDATA%/Claude-3p (the -3p suffix, in Local — not Roaming)", () => {
+    process.env.LOCALAPPDATA = path.join(home, "AppData", "Local")
     const dir = getClaude3pDir(home, "win32")
-    // The -3p suffix is what the Cowork-3P build reads; the historically-
-    // wrong target was the standard-mode `…\Claude\` (no -3p suffix).
-    expect(dir).toBe(path.join(home, "AppData", "Roaming", "Claude-3p"))
+    // Anthropic's docs locate the 3P configLibrary under Local AppData, not
+    // Roaming. This diverges from the consumer `claude_desktop_config.json`
+    // (which IS under Roaming %APPDATA%\Claude) — on Windows the two halves
+    // live on different drives, unlike macOS.
+    expect(dir).toBe(path.join(home, "AppData", "Local", "Claude-3p"))
     expect(path.basename(dir)).toBe("Claude-3p")
     // configLibrary is the subdir the applied inference profile lands in.
     const lib = path.join(dir, "configLibrary")
     expect(lib).toBe(
-      path.join(home, "AppData", "Roaming", "Claude-3p", "configLibrary"),
+      path.join(home, "AppData", "Local", "Claude-3p", "configLibrary"),
     )
   })
 
-  it("falls back to ~/AppData/Roaming/Claude-3p when %APPDATA% is unset", () => {
-    delete process.env.APPDATA
+  it("falls back to ~/AppData/Local/Claude-3p when %LOCALAPPDATA% is unset", () => {
+    delete process.env.LOCALAPPDATA
     const dir = getClaude3pDir(home, "win32")
-    expect(dir).toBe(path.join(home, "AppData", "Roaming", "Claude-3p"))
+    expect(dir).toBe(path.join(home, "AppData", "Local", "Claude-3p"))
   })
 
   it("still resolves the macOS path when platform is darwin", () => {

From e62e542a7cadb75f1fe3f9c5919fd1e2860b5bf2 Mon Sep 17 00:00:00 2001
From: stuffbucket <231133237+stuffbucket@users.noreply.github.com>
Date: Wed, 24 Jun 2026 14:19:54 -0700
Subject: [PATCH 5/7] design(site): glossy paint shaders, unified primary
 buttons, cursor reflection

- Unify the primary button into one glossy clear-coat treatment shared by the hero and Get Started, with a chromed spark and a version-number meta
- Generalize the WebGL paint into Paint.astro (candy / coat / clearcoat / chrome modes); apply it to the hero card, the secondary islands (translucent coat with depth), the primary buttons, and the chrome spark icon
- Add a 1:1 cursor-shaped reflection on the secondary islands that follows the browser's actual cursor (arrow / hand / I-beam), fixed pixel size, reduced-motion safe
- Simplify the Why-try-maximal lede (engine-swap), scrub em-dashes, Fraunces-bold inline 'maximal', unify island body-text color
- Remove the in-scroll footer, Cursor mentions, and the hero 'Other ways to install' link; update the hero byline
- Subtle click-celebration micro-interaction on primary buttons
---
 site/src/components/GodRays.astro            |  46 +-
 site/src/components/Paint.astro              | 471 +++++++++++++++++++
 site/src/components/Spark.astro              |  34 ++
 site/src/components/markdoc/GetStarted.astro |  36 +-
 site/src/components/markdoc/Hero.astro       |  57 ++-
 site/src/components/markdoc/ShowTell.astro   |  43 +-
 site/src/content/landing/index.mdoc          |   2 +-
 site/src/pages/index.astro                   |  42 +-
 site/src/styles/global.css                   | 160 +++++--
 9 files changed, 778 insertions(+), 113 deletions(-)
 create mode 100644 site/src/components/Paint.astro
 create mode 100644 site/src/components/Spark.astro

diff --git a/site/src/components/GodRays.astro b/site/src/components/GodRays.astro
index bdcf3b1..d151856 100644
--- a/site/src/components/GodRays.astro
+++ b/site/src/components/GodRays.astro
@@ -42,6 +42,7 @@
       uniform vec2 uRes;
       uniform float uTime;
       uniform float uIntensity;
+      uniform float uLightY;
       uniform vec3 uColorA;
       uniform vec3 uColorB;
       uniform vec3 uColorC;
@@ -51,12 +52,12 @@
         float aspect = uRes.x / uRes.y;
         vec2 p = vec2((uv.x - 0.5) * aspect + 0.5, uv.y);
 
-        vec2 light = vec2(0.5, 0.8);
+        vec2 light = vec2(0.5, uLightY);
         vec2 d = p - light;
         float dist = length(d);
         float ang = atan(d.y, d.x);
 
-        float t = uTime * 0.16;
+        float t = uTime * 0.55;
         float r = 0.45
           + 0.30 * sin(ang * 7.0  + t)
           + 0.22 * sin(ang * 13.0 - t * 1.4 + 2.1)
@@ -67,12 +68,15 @@
 
         float falloff = smoothstep(1.5, 0.05, dist);
         float beams = r * falloff;
+        // Fade the beams out around the center so the convergence reads as a
+        // soft glow, not a hard point.
+        beams *= smoothstep(0.0, 0.26, dist);
         float glow = smoothstep(0.85, 0.0, dist) * 0.16;
 
         float v = (beams * 0.85 + glow) * uIntensity;
         // Cyclic blend across the brand jewel tones by ray angle, so adjacent
         // shafts differ in hue; drifts slowly over time.
-        float g = fract(ang / 6.28318 * 1.2 + uTime * 0.02);
+        float g = fract(ang / 6.28318 * 1.2 + uTime * 0.06);
         vec3 col;
         if (g < 0.33333) col = mix(uColorA, uColorB, g * 3.0);
         else if (g < 0.66667) col = mix(uColorB, uColorC, (g - 0.33333) * 3.0);
@@ -126,6 +130,7 @@
     const uColorA = gl.getUniformLocation(prog, "uColorA")
     const uColorB = gl.getUniformLocation(prog, "uColorB")
     const uColorC = gl.getUniformLocation(prog, "uColorC")
+    const uLightY = gl.getUniformLocation(prog, "uLightY")
     gl.uniform1f(uIntensity, 0.62)
     // Brand jewel tones (dark-mode tints): turquoise → indigo → magenta. No
     // gold — these coordinate with the teal cards and complement the red hero.
@@ -148,11 +153,29 @@
       gl!.uniform2f(uRes, w, h)
     }
 
+    // The light source is anchored to the hero card's center: it tracks the
+    // card as the page scrolls, and pins at the top of the viewport once the
+    // card's center scrolls off the top — so the bright convergence never
+    // floats in the gaps between cards.
+    const hero = document.querySelector<HTMLElement>(".hero")
+    function lightY(): number {
+      if (!hero) return 0.8
+      const r = hero.getBoundingClientRect()
+      const vh = window.innerHeight || 1
+      const centerY = r.top + r.height / 2
+      // Track the hero card's center, but never let the source rise above 48px
+      // off the top — so the glowing convergence is fully off-screen by the
+      // time the card has scrolled past, never floating between the lower cards.
+      const pinned = Math.max(centerY, -48)
+      return 1 - pinned / vh
+    }
+
     const start = performance.now()
     let running = false
     let rafId = 0
     function frame(now: number): void {
       gl!.uniform1f(uTime, (now - start) / 1000)
+      gl!.uniform1f(uLightY, lightY())
       gl!.drawArrays(gl!.TRIANGLES, 0, 3)
       if (running) rafId = requestAnimationFrame(frame)
     }
@@ -199,6 +222,23 @@
       else sync()
     })
 
+    // When animating, the rAF loop re-anchors the light every frame. Under
+    // reduced motion we draw only a single frame, so redraw it on scroll so the
+    // anchored light still tracks the hero card.
+    let scrollPending = false
+    window.addEventListener(
+      "scroll",
+      () => {
+        if (running || !reduced || !darkMM.matches || scrollPending) return
+        scrollPending = true
+        requestAnimationFrame((now) => {
+          scrollPending = false
+          frame(now)
+        })
+      },
+      { passive: true },
+    )
+
     sync()
   }
 </script>
diff --git a/site/src/components/Paint.astro b/site/src/components/Paint.astro
new file mode 100644
index 0000000..ee13054
--- /dev/null
+++ b/site/src/components/Paint.astro
@@ -0,0 +1,471 @@
+---
+// Glossy candy-paint background, shared across the page. Raw WebGL + inlined
+// GLSL (no dependency). A single hoisted script initializes EVERY `.paint`
+// canvas on the page from its data-* config, so the hero card, the painted
+// content cards, the primary button and the footer all share one shader.
+//
+// Modes:
+//   candy     — hero: vertical candy gradient + metal flake (animated twinkle)
+//               + a broad top-down sheen. The full muscle-car paint job.
+//   matte     — content cards: same paint, but the flake is toned down and
+//               static (no twinkle), rendered as a single frame. Cheap.
+//   clearcoat — button / footer: a flat base + sheen only. No flake, no
+//               gradient — just a glossy clear coat.
+//
+// Sized to its own box via ResizeObserver. Reduced motion / hidden tab /
+// off-screen → paused. pointer-events:none, behind the content. No WebGL → it
+// simply doesn't draw and the element's own background shows.
+interface Props {
+  base?: string;
+  mode?: "candy" | "matte" | "clearcoat";
+  class?: string;
+}
+const { base = "#c8334a", mode = "candy", class: cls = "" } = Astro.props;
+
+// flake · flake-animates · vertical gradient · sheen · coat-depth · loop
+const CFG = {
+  candy: { flake: 1.0, anim: 1, gradient: 1, sheen: 0.32, coat: 0, animate: 1 },
+  matte: { flake: 0.32, anim: 0, gradient: 1, sheen: 0.22, coat: 0, animate: 0 },
+  clearcoat: { flake: 0.0, anim: 0, gradient: 0, sheen: 0.34, coat: 0, animate: 0 },
+  // Polished metal: a strong top→bottom value ramp + bright sheen, no flake.
+  // Meant to be masked to a shape (see Spark.astro) for a chromed icon.
+  chrome: { flake: 0.0, anim: 0, gradient: 1, sheen: 0.6, coat: 0, animate: 0 },
+  // Secondary islands: a clear coat with DEPTH — a smooth height field, shaded
+  // against the top light, reads as a thick translucent coating with broad
+  // soft reflections. No flake; subtle enough not to fight the copy.
+  coat: { flake: 0.0, anim: 0, gradient: 1, sheen: 0.24, coat: 1, animate: 0 },
+}[mode];
+---
+
+<canvas
+  class:list={["paint", cls]}
+  aria-hidden="true"
+  data-base={base}
+  data-flake={CFG.flake}
+  data-anim={CFG.anim}
+  data-gradient={CFG.gradient}
+  data-sheen={CFG.sheen}
+  data-coat={CFG.coat}
+  data-animate={CFG.animate}></canvas>
+
+<script>
+  type PaintCfg = {
+    base: [number, number, number]
+    flake: number
+    anim: number
+    gradient: number
+    sheen: number
+    coat: number
+    animate: number
+  }
+
+  function hexToRgb(h: string): [number, number, number] {
+    let s = h.replace("#", "").trim()
+    if (s.length === 3)
+      s = s
+        .split("")
+        .map((c) => c + c)
+        .join("")
+    const n = parseInt(s, 16)
+    return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
+  }
+
+  // Which cursor is the browser actually showing here? → 0 arrow, 1 hand, 2 text.
+  function cursorTypeAt(x: number, y: number): number {
+    const el = document.elementFromPoint(x, y) as HTMLElement | null
+    if (!el) return 0
+    if (el.closest("a, button, [role='button'], .btn, label")) return 1
+    const cur = getComputedStyle(el).cursor
+    if (cur === "pointer") return 1
+    if (cur === "text") return 2
+    // Text-bearing elements resolve to the I-beam under the default `auto`.
+    if (el.matches("p, li, h1, h2, h3, h4, figcaption, span, strong, em, code"))
+      return 2
+    return 0
+  }
+
+  const VERT = `
+    attribute vec2 p;
+    void main() { gl_Position = vec4(p, 0.0, 1.0); }
+  `
+
+  const FRAG = `
+    precision highp float;
+    uniform vec2 uRes;
+    uniform float uTime;
+    uniform vec3 uBase;
+    uniform float uFlake;
+    uniform float uAnim;
+    uniform float uGradient;
+    uniform float uSheen;
+    uniform float uCoat;
+    uniform vec2 uMouse;
+    uniform float uHasMouse;
+    uniform float uCursorSz;
+    uniform float uCursorType;
+
+    const vec3 SHEEN = vec3(1.0, 0.95, 0.9);
+
+    float hash(vec2 p) {
+      return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+    }
+
+    // Smooth, large-scale height field for the translucent clear coat. A few
+    // low-frequency sines → broad gentle lobes across the panel.
+    float coatH(vec2 x) {
+      return sin(x.x * 1.7 + 1.3) * 0.5
+        + sin(x.y * 2.0 - 0.7) * 0.5
+        + sin((x.x + x.y) * 1.15 + 2.1) * 0.35;
+    }
+
+    // Signed distance to an arrow-cursor polygon (iq's polygon SDF, unrolled).
+    // Negative inside. Tip at the origin; body extends down-right (y-down).
+    void polyEdge(vec2 p, vec2 a, vec2 b, inout float d, inout float s) {
+      vec2 e = b - a;
+      vec2 w = p - a;
+      vec2 bcl = w - e * clamp(dot(w, e) / dot(e, e), 0.0, 1.0);
+      d = min(d, dot(bcl, bcl));
+      bvec3 c = bvec3(p.y >= a.y, p.y < b.y, e.x * w.y > e.y * w.x);
+      if (all(c) || all(not(c))) s = -s;
+    }
+    float sdCursor(vec2 p) {
+      vec2 v0 = vec2(0.0, 0.0);
+      vec2 v1 = vec2(0.0, 1.0);
+      vec2 v2 = vec2(0.25, 0.75);
+      vec2 v3 = vec2(0.43, 1.14);
+      vec2 v4 = vec2(0.61, 1.07);
+      vec2 v5 = vec2(0.36, 0.68);
+      vec2 v6 = vec2(0.79, 0.68);
+      float d = dot(p - v0, p - v0);
+      float s = 1.0;
+      polyEdge(p, v0, v1, d, s);
+      polyEdge(p, v1, v2, d, s);
+      polyEdge(p, v2, v3, d, s);
+      polyEdge(p, v3, v4, d, s);
+      polyEdge(p, v4, v5, d, s);
+      polyEdge(p, v5, v6, d, s);
+      polyEdge(p, v6, v0, d, s);
+      return s * sqrt(d);
+    }
+
+    float sdRoundBox(vec2 p, vec2 b, float r) {
+      vec2 d = abs(p) - b + r;
+      return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;
+    }
+    // I-beam (text cursor): a thin vertical bar with top + bottom serifs,
+    // centered on the origin so its hotspot (the caret midpoint) sits exactly
+    // on the mouse point.
+    float sdIBeam(vec2 p) {
+      float bar = sdRoundBox(p, vec2(0.07, 0.55), 0.03);
+      float top = sdRoundBox(p - vec2(0.0, -0.53), vec2(0.24, 0.06), 0.03);
+      float bot = sdRoundBox(p - vec2(0.0, 0.53), vec2(0.24, 0.06), 0.03);
+      return min(bar, min(top, bot));
+    }
+    // Link (pointer) cursor: a simplified pointing hand — index finger + fist.
+    float sdHand(vec2 p) {
+      float finger = sdRoundBox(p - vec2(0.0, 0.4), vec2(0.16, 0.42), 0.14);
+      float fist = sdRoundBox(p - vec2(0.08, 1.0), vec2(0.34, 0.32), 0.17);
+      return min(finger, fist);
+    }
+    vec2 hash2(vec2 p) {
+      return fract(sin(vec2(
+        dot(p, vec2(127.1, 311.7)),
+        dot(p, vec2(269.5, 183.3))
+      )) * 43758.5453);
+    }
+
+    // One coat of metal flake. Each cell seeds a fleck at a JITTERED position
+    // (not the cell center), sampled across the 3x3 neighborhood, so flecks
+    // scatter freely instead of snapping to a regular lattice. Random presence,
+    // size and facing give the candy coat its depth and twinkle.
+    float flakeCoat(vec2 q, float scale, float seed) {
+      vec2 g = q * scale + seed;
+      vec2 id = floor(g);
+      vec2 f = fract(g);
+      float m = 0.0;
+      for (int j = -1; j <= 1; j++) {
+        for (int i = -1; i <= 1; i++) {
+          vec2 cell = vec2(float(i), float(j));
+          vec2 c = id + cell;
+          vec2 rnd = hash2(c);
+          float present = step(0.55, hash(c + 7.0));
+          float sz = 0.18 + 0.22 * hash(c + 3.0);
+          float d = length(f - (cell + rnd));
+          float shape = smoothstep(sz, 0.0, d);
+          float facing = 0.5 + 0.5 * sin(rnd.x * 6.2831 + uAnim * uTime * 1.6);
+          m += present * shape * pow(facing, 8.0);
+        }
+      }
+      return m;
+    }
+
+    void main() {
+      vec2 uv = gl_FragCoord.xy / uRes;
+      float aspect = uRes.x / uRes.y;
+      vec2 q = vec2(uv.x * aspect, uv.y); // aspect-corrected → round flecks
+
+      // Light from ABOVE: a broad top-down sheen BAND (not a disc / spotlight),
+      // with a faint horizontal drift so it reads as directional but never
+      // resolves into a circle.
+      float drift = sin(uTime * 0.12) * 0.5;
+      float sheen = pow(
+        smoothstep(-0.15, 1.05, uv.y + drift * (uv.x - 0.5) * 0.12), 1.5);
+
+      // Candy base: deep shade → base, top-lit (gradient optional), with a faint
+      // low-freq richness variation (candy-over-metal depth).
+      vec3 dark = uBase * 0.45;
+      float grad = smoothstep(-1.1, 1.3, uv.y);
+      float gradMix = mix(1.0, grad, uGradient);
+      // Low-freq richness only on gradient/coat surfaces; the flat clear-coat
+      // (button) stays perfectly even so it reads as a clean panel, no ripples.
+      float depthAmt = 0.06 * max(uGradient, uCoat);
+      float depth = (1.0 - depthAmt)
+        + depthAmt * (0.5 + 0.5 * sin(q.x * 3.0 + q.y * 5.0 + 1.3));
+      vec3 col = mix(dark, uBase, gradMix) * depth;
+
+      // Translucent clear coat with depth: treat coatH as a height field, derive
+      // a normal, and shade it against the top light. Valleys pool slightly
+      // darker (depth); the slopes catch broad soft reflections — a thick,
+      // ray-marched-looking coating rather than a flat fill.
+      if (uCoat > 0.5) {
+        float e = 0.05;
+        float hx = coatH(q + vec2(e, 0.0)) - coatH(q - vec2(e, 0.0));
+        float hy = coatH(q + vec2(0.0, e)) - coatH(q - vec2(0.0, e));
+        vec3 n = normalize(vec3(-hx * 1.4, -hy * 1.4, 1.0));
+        vec3 L = normalize(vec3(0.12, 0.9, 0.55));
+        float spec = pow(max(dot(n, L), 0.0), 3.0);
+        float body = 0.5 + 0.5 * n.z;
+        col = mix(col * 0.9, col, body);
+        col += SHEEN * spec * 0.12;
+
+        // Reflection of a mouse pointer hovering just above the glossy coat:
+        // the actual arrow silhouette, dim and soft, warped a little by the
+        // coat surface so it reads as a reflection in paint rather than a decal.
+        // A thin dark rim (the pointer's outline) sells the shape; a faint tip
+        // highlight adds gloss. Toned right down so it's a quiet detail.
+        // Hotspot maps 1:1 to the real cursor point (no offset); only a hint of
+        // gloss warp so the shape stays locked to the mouse.
+        vec2 rel = q - vec2(uMouse.x * aspect, uMouse.y);
+        vec2 cp = vec2(rel.x, -rel.y) / uCursorSz; // cursor-local, fixed px size
+        cp += n.xy * 0.08;                          // subtle gloss distortion
+        // Match the shape the browser is actually showing under the cursor.
+        float sd = uCursorType < 0.5
+          ? sdCursor(cp)
+          : (uCursorType < 1.5 ? sdHand(cp) : sdIBeam(cp));
+        float aa = 0.12;
+        float fillC = smoothstep(aa, -aa, sd);            // soft white body
+        float rimC = smoothstep(0.15, 0.0, abs(sd));      // thin dark outline
+        float fres = 0.6 + 0.4 * pow(1.0 - n.z, 1.5);
+        col += vec3(1.0, 0.99, 0.97) * fillC * 0.17 * fres * uHasMouse;
+        col -= vec3(0.45, 0.48, 0.52) * rimC * 0.1 * uHasMouse;
+      }
+
+      // Broad clear-coat sheen from the top light.
+      col += SHEEN * sheen * uSheen;
+
+      // Metal flake across two coats — soft + varied, brighter where the clear
+      // coat catches the light. Scaled by uFlake (0 → clear coat, no flake).
+      float flake = 0.0;
+      flake += flakeCoat(q, 60.0, 0.0) * 0.6;
+      flake += flakeCoat(q, 110.0, 17.3) * 0.4;
+      col += vec3(1.0, 0.96, 0.92) * flake * uFlake * (0.3 + sheen * 0.8);
+
+      gl_FragColor = vec4(col, 1.0);
+    }
+  `
+
+  function initPaint(canvas: HTMLCanvasElement): void {
+    const d = canvas.dataset
+    const cfg: PaintCfg = {
+      base: hexToRgb(d.base || "#c8334a"),
+      flake: parseFloat(d.flake || "1"),
+      anim: parseFloat(d.anim || "0"),
+      gradient: parseFloat(d.gradient || "1"),
+      sheen: parseFloat(d.sheen || "0.3"),
+      coat: parseFloat(d.coat || "0"),
+      animate: parseFloat(d.animate || "0"),
+    }
+
+    const gl = canvas.getContext("webgl", {
+      antialias: false,
+      alpha: false,
+      depth: false,
+      powerPreference: "low-power",
+    })
+    if (!gl) return // No WebGL → the element's own background is the fallback.
+
+    function compile(type: number, src: string): WebGLShader | null {
+      const s = gl!.createShader(type)
+      if (!s) return null
+      gl!.shaderSource(s, src)
+      gl!.compileShader(s)
+      if (!gl!.getShaderParameter(s, gl!.COMPILE_STATUS)) {
+        console.warn("paint shader:", gl!.getShaderInfoLog(s))
+        return null
+      }
+      return s
+    }
+
+    const vs = compile(gl.VERTEX_SHADER, VERT)
+    const fs = compile(gl.FRAGMENT_SHADER, FRAG)
+    if (!vs || !fs) return
+    const prog = gl.createProgram()
+    if (!prog) return
+    gl.attachShader(prog, vs)
+    gl.attachShader(prog, fs)
+    gl.linkProgram(prog)
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+      console.warn("paint link:", gl.getProgramInfoLog(prog))
+      return
+    }
+    gl.useProgram(prog)
+
+    const buf = gl.createBuffer()
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 3, -1, -1, 3]),
+      gl.STATIC_DRAW,
+    )
+    const loc = gl.getAttribLocation(prog, "p")
+    gl.enableVertexAttribArray(loc)
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)
+
+    const uRes = gl.getUniformLocation(prog, "uRes")
+    const uTime = gl.getUniformLocation(prog, "uTime")
+    gl.uniform3f(gl.getUniformLocation(prog, "uBase"), ...cfg.base)
+    gl.uniform1f(gl.getUniformLocation(prog, "uFlake"), cfg.flake)
+    gl.uniform1f(gl.getUniformLocation(prog, "uAnim"), cfg.anim)
+    gl.uniform1f(gl.getUniformLocation(prog, "uGradient"), cfg.gradient)
+    gl.uniform1f(gl.getUniformLocation(prog, "uSheen"), cfg.sheen)
+    gl.uniform1f(gl.getUniformLocation(prog, "uCoat"), cfg.coat)
+    const uMouse = gl.getUniformLocation(prog, "uMouse")
+    const uHasMouse = gl.getUniformLocation(prog, "uHasMouse")
+    const uCursorSz = gl.getUniformLocation(prog, "uCursorSz")
+    const uCursorType = gl.getUniformLocation(prog, "uCursorType")
+    gl.uniform2f(uMouse, 0.5, 0.5)
+    gl.uniform1f(uHasMouse, 0)
+    gl.uniform1f(uCursorType, 0)
+
+    const dpr = Math.min(window.devicePixelRatio || 1, 2)
+    function resize(): void {
+      const w = Math.max(1, Math.round(canvas.clientWidth * dpr))
+      const h = Math.max(1, Math.round(canvas.clientHeight * dpr))
+      if (canvas.width === w && canvas.height === h) return
+      canvas.width = w
+      canvas.height = h
+      gl!.viewport(0, 0, w, h)
+      gl!.uniform2f(uRes, w, h)
+      // Keep the reflected cursor a fixed ~px size regardless of card height,
+      // so it reads the same on the tall and short islands. (uv = px / height.)
+      gl!.uniform1f(uCursorSz, 17 / Math.max(1, canvas.clientHeight))
+    }
+
+    const start = performance.now()
+    const wantsLoop = cfg.animate === 1
+    let running = false
+    let rafId = 0
+    let onScreen = true
+    function frame(now: number): void {
+      gl!.uniform1f(uTime, (now - start) / 1000)
+      gl!.drawArrays(gl!.TRIANGLES, 0, 3)
+      if (running) rafId = requestAnimationFrame(frame)
+    }
+    function play(): void {
+      if (running) return
+      running = true
+      rafId = requestAnimationFrame(frame)
+    }
+    function pause(): void {
+      running = false
+      if (rafId) cancelAnimationFrame(rafId)
+    }
+
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    function sync(): void {
+      if (!wantsLoop || reduced) {
+        pause()
+        frame(performance.now()) // single static frame
+      } else if (onScreen && document.visibilityState === "visible") {
+        play()
+      } else {
+        pause()
+      }
+    }
+
+    resize()
+    const ro = new ResizeObserver(() => {
+      resize()
+      if (!running) frame(performance.now())
+    })
+    ro.observe(canvas)
+
+    if ("IntersectionObserver" in window) {
+      new IntersectionObserver((entries) => {
+        onScreen = entries[0]?.isIntersecting ?? true
+        sync()
+      }).observe(canvas)
+    }
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) pause()
+      else sync()
+    })
+
+    // Coat islands: track the cursor over the card and redraw a single frame so
+    // the imaginary pointer's reflection follows the mouse. The canvas is
+    // pointer-events:none, so listen on the host card. rAF-throttled; skipped
+    // under reduced motion. Live frames already re-read the uniforms each tick.
+    const host = canvas.parentElement
+    if (cfg.coat === 1 && host && !reduced) {
+      let queued = false
+      host.addEventListener(
+        "pointermove",
+        (e) => {
+          const r = canvas.getBoundingClientRect()
+          if (!r.width || !r.height) return
+          gl!.uniform2f(
+            uMouse,
+            (e.clientX - r.left) / r.width,
+            1 - (e.clientY - r.top) / r.height,
+          )
+          gl!.uniform1f(uHasMouse, 1)
+          gl!.uniform1f(uCursorType, cursorTypeAt(e.clientX, e.clientY))
+          if (!running && !queued) {
+            queued = true
+            requestAnimationFrame((now) => {
+              queued = false
+              frame(now)
+            })
+          }
+        },
+        { passive: true },
+      )
+      host.addEventListener(
+        "pointerleave",
+        () => {
+          gl!.uniform1f(uHasMouse, 0)
+          if (!running) frame(performance.now())
+        },
+        { passive: true },
+      )
+    }
+
+    sync()
+  }
+
+  document
+    .querySelectorAll<HTMLCanvasElement>("canvas.paint")
+    .forEach(initPaint)
+</script>
+
+<style>
+  .paint {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+</style>
diff --git a/site/src/components/Spark.astro b/site/src/components/Spark.astro
new file mode 100644
index 0000000..d413681
--- /dev/null
+++ b/site/src/components/Spark.astro
@@ -0,0 +1,34 @@
+---
+// A chromed spark icon: a Paint canvas in "chrome" mode (polished-metal GLSL)
+// masked to the four-point spark shape, so the star itself is a glossy metal
+// reflection rather than a flat fill. Used on primary buttons.
+import Paint from "./Paint.astro";
+interface Props {
+  class?: string;
+}
+const { class: cls = "" } = Astro.props;
+---
+
+<span class:list={["chrome-spark", cls]} aria-hidden="true">
+  <Paint base="#d8dde0" mode="chrome" />
+</span>
+
+<style>
+  .chrome-spark {
+    position: relative;
+    flex: 0 0 auto;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    /* Clip the shader canvas to the spark silhouette. */
+    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M11 1 L13 9 L21 11 L13 13 L11 21 L9 13 L1 11 L9 9 Z" fill="black"/></svg>')
+      center / contain no-repeat;
+    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M11 1 L13 9 L21 11 L13 13 L11 21 L9 13 L1 11 L9 9 Z" fill="black"/></svg>')
+      center / contain no-repeat;
+    filter: drop-shadow(0 1px 1px rgba(0, 18, 22, 0.55));
+  }
+  .chrome-spark :global(canvas.paint) {
+    position: absolute;
+    inset: 0;
+  }
+</style>
diff --git a/site/src/components/markdoc/GetStarted.astro b/site/src/components/markdoc/GetStarted.astro
index 9ce2eee..7b194eb 100644
--- a/site/src/components/markdoc/GetStarted.astro
+++ b/site/src/components/markdoc/GetStarted.astro
@@ -2,15 +2,18 @@
 // Get started in 3 steps. Step 1 carries the actual download (macOS live,
 // Windows "coming soon"); the standalone download section folded in here.
 // Homebrew + other install options live in the repo README.
+import Paint from "../Paint.astro";
+import Spark from "../Spark.astro";
 import { getDownloadInfo } from "../../lib/downloads";
 
 const { macDmg, versionLabel, releasesUrl, repoUrl } = await getDownloadInfo();
 const readmeUrl = `${repoUrl}#readme`;
 
+const M = `<span class="brandword">maximal</span>`;
 const steps = [
   {
     title: "Install maximal",
-    body: "Grab the macOS app — it lives quietly in your menu bar. Windows is coming soon.",
+    body: "Grab the macOS app. It lives quietly in your menu bar; Windows is coming soon.",
   },
   {
     title: "Sign in with GitHub",
@@ -18,16 +21,14 @@ const steps = [
   },
   {
     title: "Pick your tools",
-    body: "Claude Code, Codex, opencode, Cursor — point them at maximal and they run on your Copilot models. Switch anytime; no re-signing-in.",
+    body: `Point Claude Code, Codex, opencode, or GitHub Copilot at ${M} and they run on your Copilot models. Switch anytime; no re-signing-in.`,
   },
 ];
 ---
 
-<section id="start" class="card card--indigo getstarted">
+<section id="start" class="card card--indigo card--painted getstarted">
+  <Paint base="#43357f" mode="coat" />
   <header class="getstarted__head">
-    <svg class="getstarted__spark" viewBox="0 0 22 22" aria-hidden="true">
-      <path d="M11 1 L13 9 L21 11 L13 13 L11 21 L9 13 L1 11 L9 9 Z"></path>
-    </svg>
     <h2>Get started</h2>
     <p class="getstarted__sub">Up and running in three steps.</p>
   </header>
@@ -55,15 +56,9 @@ const steps = [
                     href={macDmg}
                     rel="noopener"
                   >
+                    <Paint base="#15656f" mode="clearcoat" class="btn-paint" />
                     <span class="btn-label">
-                      <svg
-                        class="btn-spark"
-                        viewBox="0 0 22 22"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path d="M11 1 L13 9 L21 11 L13 13 L11 21 L9 13 L1 11 L9 9 Z" />
-                      </svg>
+                      <Spark class="btn-spark" />
                       <span>macOS</span>
                     </span>
                     {versionLabel && <span class="btn-meta">{versionLabel}</span>}
@@ -112,16 +107,9 @@ const steps = [
     margin-bottom: 1.75rem;
   }
 
-  .getstarted__spark {
-    width: 1.25rem;
-    height: 1.25rem;
-    fill: var(--accent-gold);
-    align-self: center;
-  }
-
   .getstarted__sub {
     font-family: var(--sans);
-    color: var(--text-muted);
+    color: var(--text);
     margin: 0;
     flex-basis: 100%;
   }
@@ -167,7 +155,7 @@ const steps = [
 
   .step__text {
     font-family: var(--sans);
-    color: var(--text-muted);
+    color: var(--text);
     line-height: 1.55;
     margin: 0;
   }
@@ -179,7 +167,7 @@ const steps = [
   .step__readme {
     margin: 0.7rem 0 0;
     font-size: 0.85rem;
-    color: var(--text-muted);
+    color: var(--text);
   }
 
   @media (max-width: 640px) {
diff --git a/site/src/components/markdoc/Hero.astro b/site/src/components/markdoc/Hero.astro
index 4a9bff0..f437485 100644
--- a/site/src/components/markdoc/Hero.astro
+++ b/site/src/components/markdoc/Hero.astro
@@ -3,6 +3,8 @@
 // typed in on load. The full tagline is server-rendered (SEO + no-JS +
 // prefers-reduced-motion all get the complete sentence); JS only replays it as
 // a typing effect when motion is allowed.
+import Paint from "../Paint.astro";
+import Spark from "../Spark.astro";
 import { getDownloadInfo } from "../../lib/downloads";
 interface Props {
   tagline: string;
@@ -11,10 +13,11 @@ interface Props {
 const { tagline, downloadLabel = "Download for macOS" } = Astro.props;
 // Markdoc doesn't forward $variables into tag attributes, so pull the resolved
 // release straight from the shared (memoized) build-time module.
-const { macDmg: downloadUrl, releasesUrl } = await getDownloadInfo();
+const { macDmg: downloadUrl, versionLabel } = await getDownloadInfo();
 ---
 
 <header class="card card--scarlet hero" aria-labelledby="title">
+  <Paint base="#c8334a" mode="candy" />
   <h1 id="title" class="wordmark">maximal</h1>
   <p class="tagline hero-typed">
     <span class="hero-typed__text" data-typed-target>{tagline}</span><span
@@ -26,19 +29,12 @@ const { macDmg: downloadUrl, releasesUrl } = await getDownloadInfo();
     {
       downloadUrl && (
         <a class="btn btn--primary hero-cta__primary" href={downloadUrl} rel="noopener">
+          <Paint base="#15656f" mode="clearcoat" class="btn-paint" />
           <span class="btn-label">
-            <svg class="btn-spark" viewBox="0 0 22 22" fill="currentColor" aria-hidden="true">
-              <path d="M11 1 L13 9 L21 11 L13 13 L11 21 L9 13 L1 11 L9 9 Z" />
-            </svg>
+            <Spark class="btn-spark" />
             <span>{downloadLabel}</span>
           </span>
-        </a>
-      )
-    }
-    {
-      releasesUrl && (
-        <a class="hero-cta__secondary" href={releasesUrl} rel="noopener">
-          Other ways to install
+          {versionLabel && <span class="btn-meta">{versionLabel}</span>}
         </a>
       )
     }
@@ -56,9 +52,28 @@ const { macDmg: downloadUrl, releasesUrl } = await getDownloadInfo();
   .hero::before {
     display: none;
   }
+  /* Lift the hero content above the paint canvas (which is positioned, so it
+     would otherwise paint over the non-positioned content). A soft shadow keeps
+     the cream type crisp over the moving gloss highlights. */
   .wordmark,
+  .tagline,
+  .hero-cta {
+    position: relative;
+    z-index: 1;
+  }
+  /* Cream type, shaded as if lit from above the card: a top-bright gradient
+     fill on the wordmark + a soft shadow cast down onto the paint. */
+  .wordmark {
+    background: linear-gradient(180deg, #fcf5e6 0%, #f1e5cb 55%, #d6c4a0 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    filter: drop-shadow(0 5px 9px rgba(26, 0, 4, 0.5));
+  }
   .tagline {
     color: #f4ead4;
+    text-shadow: 0 2px 5px rgba(26, 0, 4, 0.45);
   }
 
   .hero-typed {
@@ -83,20 +98,10 @@ const { macDmg: downloadUrl, releasesUrl } = await getDownloadInfo();
     margin: 1.5rem 0 1.25rem;
   }
   .hero-cta__primary {
-    /* Let the primary CTA size to its content rather than stretch. */
+    /* Size to content rather than stretch. The glossy primary-button effect
+       (clear-coat Paint + lit label) is shared from global.css .btn--primary. */
     flex: 0 0 auto;
   }
-  .hero-cta__secondary {
-    font-family: var(--mono);
-    font-size: 0.9rem;
-    color: #f4ead4;
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    text-decoration-color: var(--ink-gold);
-  }
-  .hero-cta__secondary:hover {
-    text-decoration-thickness: 2px;
-  }
 
   @keyframes hero-caret-blink {
     50% {
@@ -148,7 +153,11 @@ const { macDmg: downloadUrl, releasesUrl } = await getDownloadInfo();
     btn.classList.add("btn--soon");
     btn.removeAttribute("href");
     btn.setAttribute("aria-disabled", "true");
+    var paint = btn.querySelector(".btn-paint");
+    if (paint) paint.style.display = "none";
     var label = btn.querySelector(".btn-label span:last-child");
-    if (label) label.textContent = "Windows — coming soon";
+    if (label) label.textContent = "Windows";
+    var meta = btn.querySelector(".btn-meta");
+    if (meta) meta.textContent = "coming soon";
   })();
 </script>
diff --git a/site/src/components/markdoc/ShowTell.astro b/site/src/components/markdoc/ShowTell.astro
index 0141cfd..bf83e40 100644
--- a/site/src/components/markdoc/ShowTell.astro
+++ b/site/src/components/markdoc/ShowTell.astro
@@ -2,6 +2,7 @@
 // "Show, don't tell": the tools you use  }  maximal  {  your Copilot models.
 // Labels sit in a row ABOVE the braces; the tall braces wrap only the lists
 // (gather → route → fan out). Brand marks aid scanning. Presentational.
+import Paint from "../Paint.astro";
 
 // Brand marks from Simple Icons (CC0). `fill: true` = solid logo whose path
 // carries its own fill="currentColor"; `fill: false` = a monoline stroke glyph.
@@ -61,15 +62,15 @@ const BRACE = `M5 1C10 1 10 6 10 16L10 42C10 47 12 50 15 50C12 50 10 53 10 58L10
 const shot = `${import.meta.env.BASE_URL.replace(/\/$/, "")}/screenshots/app-dashboard.png`;
 ---
 
-<section id="how" class="card card--turquoise showtell">
+<section id="how" class="card card--turquoise card--painted showtell">
+  <Paint base="#1b6f7a" mode="coat" />
   <h2>Why try maximal</h2>
 
   <p class="why__lede">
-    maximal runs on your own machine. The tools you already use point at
-    maximal, and it does the work of connecting them to the models you want —
-    all on the GitHub Copilot subscription you already pay for, with Copilot's
-    privacy and security guarantees. No hosted gateway to wire up, no per-token
-    bill to track — none of what a service like OpenRouter asks of you.
+    <span class="brandword">maximal</span> swaps out the engine your AI tools use
+    with the models that power GitHub Copilot. You get all of the agility and
+    creativity without sacrificing the power, privacy, and security of GitHub
+    Copilot.
   </p>
 
   <div class="flow">
@@ -161,7 +162,7 @@ const shot = `${import.meta.env.BASE_URL.replace(/\/$/, "")}/screenshots/app-das
     <div class="appshot__frame">
       <img
         src={shot}
-        alt="maximal's usage dashboard — token usage broken down by model across your tools over the last 30 days"
+        alt="maximal's usage dashboard showing token usage broken down by model across your tools over the last 30 days"
         width="1600"
         height="1105"
         loading="lazy"
@@ -169,7 +170,7 @@ const shot = `${import.meta.env.BASE_URL.replace(/\/$/, "")}/screenshots/app-das
       />
     </div>
     <figcaption class="appshot__cap">
-      Every tool, every model, every token — see exactly where your Copilot
+      Every tool, every model, every token. See exactly where your Copilot
       subscription goes.
     </figcaption>
   </figure>
@@ -193,14 +194,17 @@ const shot = `${import.meta.env.BASE_URL.replace(/\/$/, "")}/screenshots/app-das
   }
 
   /* Two rows: labels on top (row 1), then the braced lists + node (row 2),
-     so the braces wrap only the lists — not the labels. */
+     so the braces wrap only the lists — not the labels. Columns are content-
+     sized and the whole group is centered, so each list hugs its brace and the
+     left/right blocks stay symmetric around the node (no stranded whitespace). */
   .flow {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 22px auto 22px minmax(0, 1fr);
+    grid-template-columns: auto 24px auto 24px auto;
     grid-template-rows: auto 1fr;
+    justify-content: center;
     align-items: stretch;
-    column-gap: 1.25rem;
-    row-gap: 1rem;
+    column-gap: 1.5rem;
+    row-gap: 1.1rem;
     margin-top: 1.75rem;
   }
 
@@ -213,6 +217,12 @@ const shot = `${import.meta.env.BASE_URL.replace(/\/$/, "")}/screenshots/app-das
     color: var(--text);
     margin: 0;
     align-self: end;
+    justify-self: start;
+  }
+  /* The models label hugs the right block's left edge so it sits above its
+     first list item, mirroring the tools label on the left. */
+  .flow__label--models {
+    justify-self: start;
   }
   .flow__label--tools {
     grid-column: 1;
@@ -311,9 +321,14 @@ const shot = `${import.meta.env.BASE_URL.replace(/\/$/, "")}/screenshots/app-das
   }
 
   .flow__mark {
+    /* Match the hero wordmark's cut exactly (weight + variable-font axes +
+       tracking), just smaller — so the island "maximal" reads as the same
+       wordmark, not a different font. */
     font-family: var(--serif);
-    font-size: 2.2rem;
-    font-weight: 600;
+    font-size: 2.4rem;
+    font-weight: 900;
+    font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 144;
+    letter-spacing: -0.04em;
     color: var(--text);
     line-height: 1;
     margin: 0;
diff --git a/site/src/content/landing/index.mdoc b/site/src/content/landing/index.mdoc
index 50e2b55..26ea4d3 100644
--- a/site/src/content/landing/index.mdoc
+++ b/site/src/content/landing/index.mdoc
@@ -1,5 +1,5 @@
 {% hero
-   tagline="Connect the AI tools you use to the models in your GitHub Copilot subscription."
+   tagline="Connect the AI tools you use to the models in GitHub Copilot."
    downloadLabel="Download for macOS" /%}
 
 {% showtell /%}
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index fd6daa4..5755615 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -28,10 +28,10 @@ const { Content } = await render(entry);
       href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400..900,0..100,0..1&display=swap"
     />
 
-    <title>maximal — your AI tools, your Copilot models, one connection</title>
+    <title>maximal · your AI tools, your Copilot models, one connection</title>
     <meta
       name="description"
-      content="maximal is the easy way to connect the AI coding tools you use — Claude Code, Codex, opencode, Cursor — to the models in your GitHub Copilot subscription."
+      content="maximal swaps the engine inside the AI coding tools you use, like Claude Code, Codex, and opencode, so they run on the models in your GitHub Copilot subscription."
     />
     <link
       rel="icon"
@@ -58,22 +58,6 @@ const { Content } = await render(entry);
 
     <main id="main">
       <Content />
-
-      <footer
-        id="footer"
-        class="card card--console site-footer"
-        aria-label="Site footer"
-      >
-        <span>
-          MIT license ·
-          <a href={`${REPO_URL}/blob/main/LICENSE`} rel="noopener">LICENSE</a>
-          ·
-          <a href={`${REPO_URL}/blob/main/THIRD-PARTY-LICENSE`} rel="noopener"
-            >third-party</a
-          >
-        </span>
-        <a href={REPO_URL} rel="noopener">github.com/{REPO}</a>
-      </footer>
     </main>
 
     <!-- Foreground layer: bottom-pinned glass dock -->
@@ -116,5 +100,27 @@ const { Content } = await render(entry);
         });
       })();
     </script>
+
+    <script is:inline>
+      // Subtle click celebration on primary buttons: a soft light bloom from
+      // the click point + a tiny press (see .btn--celebrate in global.css).
+      (function () {
+        if (
+          window.matchMedia &&
+          window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        )
+          return;
+        document.addEventListener("click", function (e) {
+          var btn = e.target.closest && e.target.closest(".btn--primary");
+          if (!btn) return;
+          var r = btn.getBoundingClientRect();
+          btn.style.setProperty("--rx", e.clientX - r.left + "px");
+          btn.style.setProperty("--ry", e.clientY - r.top + "px");
+          btn.classList.remove("btn--celebrate");
+          void btn.offsetWidth; // restart the animation on rapid re-clicks
+          btn.classList.add("btn--celebrate");
+        });
+      })();
+    </script>
   </body>
 </html>
diff --git a/site/src/styles/global.css b/site/src/styles/global.css
index fdb4070..56be1f0 100644
--- a/site/src/styles/global.css
+++ b/site/src/styles/global.css
@@ -203,14 +203,41 @@ main > article {
   --card-accent: var(--brand-ochre);
 }
 
-/* Footer reads as a quiet base, not a section. */
-.card--console {
-  background: var(--surface);
-  color: var(--text-muted);
+/* ===== Painted cards =====
+   Cards that carry the candy-paint shader (a <canvas class="paint">) read as
+   saturated brand surfaces, like the hero. Drop the top accent rule, lift the
+   content above the canvas, and locally re-point the neutral text/border tokens
+   to a cream palette so copy stays legible on the deep brand base in both
+   themes. (--accent is left alone so the live download button keeps its fill.) */
+.card--painted {
+  --text: #f4ead4;
+  --text-muted: #d9ccad;
+  --border: rgb(244 234 212 / 0.18);
+  --border-strong: rgb(244 234 212 / 0.32);
+  --link: #f3d886;
+  --accent-gold: #f0d27a;
+  color: var(--text);
+  /* Subtle "lit from above" elevation so the cream copy lifts off the deep
+     brand base. Inherited by all descendant text. */
+  text-shadow: 0 1px 2px rgb(8 16 22 / 0.38);
 }
-.card--console::before {
+.card--painted::before {
   display: none;
 }
+.card--painted > .paint {
+  z-index: 0;
+}
+.card--painted > :not(.paint) {
+  position: relative;
+  z-index: 1;
+}
+/* Brand-tone fallback (and the silhouette behind the paint) if WebGL is off. */
+.card--turquoise.card--painted {
+  background: #1b6f7a;
+}
+.card--indigo.card--painted {
+  background: #43357f;
+}
 
 /* ===== Hero ===== */
 
@@ -248,6 +275,16 @@ main > article {
   font-size: 1.19em;
 }
 
+/* Inline brand wordmark for body copy: Fraunces bold at the running text size,
+   so "maximal" reads as the product name wherever it appears in a sentence. */
+.brandword {
+  font-family: var(--serif);
+  font-weight: 700;
+  font-style: normal;
+  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
+  letter-spacing: -0.01em;
+}
+
 .tagline {
   font-family: var(--serif);
   font-weight: 500;
@@ -396,21 +433,103 @@ pre code {
   font-weight: 400;
 }
 
+/* Primary button: one shared glossy clear-coat treatment used everywhere a
+   primary CTA appears (hero download, get-started download). A clear-coat Paint
+   canvas (<Paint mode="clearcoat" class="btn-paint">) sits behind a label that
+   is lit from above like the wordmark — top-bright gradient fill + soft cast
+   shadow. Fixed deep-teal base (matching the Paint) so the cream label keeps
+   contrast in both themes; the bg is also the no-WebGL fallback. */
 .btn--primary {
-  background: var(--accent);
-  color: var(--accent-ink);
-  border-color: var(--accent);
+  position: relative;
+  overflow: hidden;
+  background: #15656f;
+  color: #fcf5e6;
+  border-color: #15656f;
   font-weight: 600;
 }
 
 .btn--primary:hover {
-  filter: brightness(1.06);
-  border-color: var(--accent);
+  filter: brightness(1.05);
+  border-color: #15656f;
 }
 
+.btn--primary .btn-label,
 .btn--primary .btn-meta {
-  color: var(--accent-ink);
-  opacity: 0.8;
+  position: relative;
+  z-index: 1;
+}
+
+/* Light the label text from above. The gradient can't tint the SVG (it uses
+   currentColor), so only the text span gets the clip; the spark stays solid.
+   A tight dark shadow plus a soft drop separates the cream label from the
+   glossy teal coat so it pops. */
+.btn--primary .btn-label > span:last-child {
+  background: linear-gradient(180deg, #ffffff 0%, #f2e6cb 58%, #d4c099 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  filter: drop-shadow(0 1px 1px rgba(0, 14, 18, 0.7))
+    drop-shadow(0 2px 5px rgba(0, 14, 18, 0.45));
+}
+
+.btn--primary .btn-spark {
+  color: #ffffff;
+  filter: drop-shadow(0 1px 1px rgba(0, 14, 18, 0.7))
+    drop-shadow(0 2px 4px rgba(0, 14, 18, 0.4));
+}
+
+.btn--primary .btn-meta {
+  color: #f6efda;
+  opacity: 0.95;
+  filter: drop-shadow(0 1px 2px rgba(0, 14, 18, 0.5));
+}
+
+/* Click celebration: a soft light bloom from the click point + a tiny press.
+   Subtle and quick. JS sets --rx/--ry to the click coords and toggles
+   .btn--celebrate; skipped under prefers-reduced-motion (the JS bails). */
+.btn--primary::after {
+  content: "";
+  position: absolute;
+  left: var(--rx, 50%);
+  top: var(--ry, 50%);
+  width: 10px;
+  height: 10px;
+  margin: -5px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.6),
+    rgba(255, 255, 255, 0)
+  );
+  transform: scale(0);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.btn--celebrate {
+  animation: btn-press 260ms ease;
+}
+.btn--celebrate::after {
+  animation: btn-bloom 560ms ease-out;
+}
+
+@keyframes btn-press {
+  40% {
+    transform: scale(0.975);
+  }
+}
+
+@keyframes btn-bloom {
+  0% {
+    transform: scale(0);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(20);
+    opacity: 0;
+  }
 }
 
 .btn-spark {
@@ -452,23 +571,6 @@ pre code {
   pointer-events: none;
 }
 
-/* ===== Footer ===== */
-
-.site-footer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem 1.5rem;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 0.88rem;
-}
-
-.site-footer a {
-  color: var(--link);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
 /* ===== Bottom-pinned glass dock ===== */
 
 .dock {

From aba5850cedc8054d5475598c406e6453cd8ce3f1 Mon Sep 17 00:00:00 2001
From: stuffbucket <231133237+stuffbucket@users.noreply.github.com>
Date: Wed, 24 Jun 2026 14:20:08 -0700
Subject: [PATCH 6/7] fix(windows): detect MSIX/Store Claude Desktop install
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New Windows installs are MSIX, not Squirrel — they don't create
%LOCALAPPDATA%\AnthropicClaude or always drop the WindowsApps alias, so
the Apps card showed 'Not installed' on a real install. Add the known
MSIX package dir (Packages\Claude_pzs8sxrjxfjjc) as a candidate and scan
the Packages dir for the Claude_/AnthropicPBC.Claude family prefix
(hashed family names mean no fixed path catches every install). macOS
and the unknown-platform 'can't tell → don't block' path are untouched.
---
 src/configure-claude-desktop.ts        | 51 +++++++++++++++++++++-----
 tests/configure-claude-desktop.test.ts | 38 +++++++++++++++++++
 2 files changed, 80 insertions(+), 9 deletions(-)

diff --git a/src/configure-claude-desktop.ts b/src/configure-claude-desktop.ts
index dba0e2e..1258ea6 100644
--- a/src/configure-claude-desktop.ts
+++ b/src/configure-claude-desktop.ts
@@ -46,12 +46,15 @@ const MANAGED_PROFILE_OUT = "maximal-claude-3p.mobileconfig"
  * Candidate Claude Desktop install locations to probe, per platform.
  *
  *  - macOS: the app bundle in `/Applications`.
- *  - Windows: the per-user Squirrel install dir (`%LOCALAPPDATA%\\AnthropicClaude`)
- *    and the launcher alias the installer drops on PATH
- *    (`%LOCALAPPDATA%\\Microsoft\\WindowsApps\\Claude.exe`). Either present
- *    means Claude Desktop is installed. (The MSIX / Microsoft-Store build
- *    lives under `%LOCALAPPDATA%\\Packages\\Claude_*` — we don't enumerate
- *    that package-family dir here; `--force` covers it.)
+ *  - Windows: the per-user Squirrel install dir (`%LOCALAPPDATA%\\AnthropicClaude`),
+ *    the launcher alias the installer drops on PATH
+ *    (`%LOCALAPPDATA%\\Microsoft\\WindowsApps\\Claude.exe`), and the MSIX /
+ *    Microsoft-Store build's known package dir
+ *    (`%LOCALAPPDATA%\\Packages\\Claude_pzs8sxrjxfjjc`). Any present means
+ *    Claude Desktop is installed. New Windows installs are MSIX, which does
+ *    NOT create the Squirrel dir or always drop the alias, so the Packages
+ *    signal — plus the prefix scan in `claudeAppInstalled` — is what catches
+ *    a modern install.
  *
  * Returns an empty list on unsupported platforms (caller treats that as
  * "can't tell" and only blocks on darwin/win32).
@@ -62,16 +65,41 @@ function claudeAppCandidates(
 ): Array<string> {
   if (platform === "darwin") return [CLAUDE_APP_PATH]
   if (platform === "win32") {
-    const localAppData =
-      process.env.LOCALAPPDATA ?? path.join(home, "AppData", "Local")
+    const localAppData = windowsLocalAppData(home)
     return [
       path.join(localAppData, "AnthropicClaude"),
       path.join(localAppData, "Microsoft", "WindowsApps", "Claude.exe"),
+      path.join(localAppData, "Packages", "Claude_pzs8sxrjxfjjc"),
     ]
   }
   return []
 }
 
+/** `%LOCALAPPDATA%`, or its default location under `home` when unset. */
+function windowsLocalAppData(home: string): string {
+  return process.env.LOCALAPPDATA ?? path.join(home, "AppData", "Local")
+}
+
+/**
+ * MSIX package family names mutate (`Claude_<publisherhash>`,
+ * `AnthropicPBC.Claude_<hash>`), so an exact path can't catch every install.
+ * Scan `%LOCALAPPDATA%\\Packages` for any entry in the Claude family. No-ops
+ * (returns false) when the Packages dir is absent or unreadable.
+ */
+function windowsMsixClaudeInstalled(home: string): boolean {
+  const packages = path.join(windowsLocalAppData(home), "Packages")
+  try {
+    return fs
+      .readdirSync(packages)
+      .some(
+        (name) =>
+          name.startsWith("Claude_") || name.startsWith("AnthropicPBC.Claude"),
+      )
+  } catch {
+    return false
+  }
+}
+
 interface ConfigureOptions {
   force: boolean
   revert: boolean
@@ -177,7 +205,7 @@ export function claudeAppInstalled(
   const candidates = claudeAppCandidates(platform, home)
   // Unsupported platform: nothing to probe → can't tell, don't block.
   if (candidates.length === 0) return true
-  return candidates.some((p) => {
+  const hasCandidate = candidates.some((p) => {
     try {
       // Accept either a directory (macOS .app bundle, Windows Squirrel dir)
       // or a file (Windows launcher alias) — any existing candidate counts.
@@ -187,6 +215,11 @@ export function claudeAppInstalled(
       return false
     }
   })
+  if (hasCandidate) return true
+  // Windows MSIX installs use a hashed package-family dir that no fixed path
+  // can pin down — scan the Packages dir for the Claude family as a fallback.
+  if (platform === "win32") return windowsMsixClaudeInstalled(home)
+  return false
 }
 
 export const configureClaudeDesktop = defineCommand({
diff --git a/tests/configure-claude-desktop.test.ts b/tests/configure-claude-desktop.test.ts
index 4c37a50..8f30810 100644
--- a/tests/configure-claude-desktop.test.ts
+++ b/tests/configure-claude-desktop.test.ts
@@ -58,6 +58,44 @@ describe("claudeAppInstalled — Windows (platform injected)", () => {
     expect(claudeAppInstalled("win32", home)).toBe(true)
   })
 
+  it("detects the MSIX package dir (Packages/Claude_pzs8sxrjxfjjc)", () => {
+    fs.mkdirSync(
+      path.join(home, "AppData", "Local", "Packages", "Claude_pzs8sxrjxfjjc"),
+      { recursive: true },
+    )
+    expect(claudeAppInstalled("win32", home)).toBe(true)
+  })
+
+  it("detects a Claude-family MSIX package by prefix (hashed family name)", () => {
+    // The publisher-hash suffix mutates between installs, so detection scans
+    // the Packages dir for the family prefix rather than an exact name.
+    fs.mkdirSync(
+      path.join(
+        home,
+        "AppData",
+        "Local",
+        "Packages",
+        "AnthropicPBC.Claude_1a2b3c4d5e6f7",
+      ),
+      { recursive: true },
+    )
+    expect(claudeAppInstalled("win32", home)).toBe(true)
+  })
+
+  it("does not false-positive on an unrelated Packages entry", () => {
+    fs.mkdirSync(
+      path.join(
+        home,
+        "AppData",
+        "Local",
+        "Packages",
+        "Microsoft.SomethingElse",
+      ),
+      { recursive: true },
+    )
+    expect(claudeAppInstalled("win32", home)).toBe(false)
+  })
+
   it("returns true on unsupported platforms (can't tell → don't block)", () => {
     expect(claudeAppInstalled("linux", home)).toBe(true)
   })

From 6fdb0fcb17d2202fb901852a1ed619a25702a094 Mon Sep 17 00:00:00 2001
From: stuffbucket <231133237+stuffbucket@users.noreply.github.com>
Date: Wed, 24 Jun 2026 14:20:19 -0700
Subject: [PATCH 7/7] fix(shell): show splash only once the webview has painted
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On Windows/WebView2 the native surface is presented before the
compositor draws its first frame, so the transparent splash showed an
empty outline for hundreds of ms–seconds before the brand-red fill
popped in. Build the splash hidden and .show() it from on_page_load once
the DOM reports Finished. macOS/WKWebView paints in lockstep with show
so this fires immediately there — no regression.

Also broaden the macOS Reopen handler: clicking the 'Maximal is running'
banner (or the Dock icon) with no visible windows now opens Settings —
account section when signed out, plain Settings otherwise. Desktop
notifications can't carry a routable click (plugin show() is
fire-and-forget), so Reopen is the lever on macOS. On Windows the
plugin (2.3.3) exposes no toast-activation callback; tray left-click
already opens Settings and the toast body points there.
---
 shell/src-tauri/src/lib.rs | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/shell/src-tauri/src/lib.rs b/shell/src-tauri/src/lib.rs
index 034cf37..52e23e9 100644
--- a/shell/src-tauri/src/lib.rs
+++ b/shell/src-tauri/src/lib.rs
@@ -49,6 +49,7 @@ use tauri::{
     ipc::Channel,
     menu::{IsMenuItem, Menu, MenuItem, PredefinedMenuItem},
     tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
+    webview::PageLoadEvent,
     AppHandle, Emitter, Manager, RunEvent, State, WebviewUrl, WebviewWindowBuilder,
     WindowEvent,
 };
@@ -660,21 +661,26 @@ pub fn run() {
             kill_sidecar(app_handle);
         }
         // macOS delivers Reopen when the app is re-activated — clicking its
-        // notification banner, its Dock icon, etc. Desktop notifications
-        // can't carry a routable button (the plugin's show() is
-        // fire-and-forget), so this is how the sign-in nudge's "click here"
-        // lands somewhere: if we're up but not signed in and nothing's on
-        // screen, bring up Settings → account.
+        // notification banner ("Maximal is running"), its Dock icon, etc.
+        // Desktop notifications can't carry a routable button (the plugin's
+        // show() is fire-and-forget), so Reopen is how a banner click lands
+        // somewhere: if nothing's on screen, open Settings. Route to the
+        // account section when we're up but not signed in (the sign-in
+        // nudge), otherwise plain Settings.
         #[cfg(target_os = "macos")]
         RunEvent::Reopen {
             has_visible_windows,
             ..
         } => {
-            if !has_visible_windows
-                && app_handle.state::<AppStatus>().get()
+            if !has_visible_windows {
+                let section = if app_handle.state::<AppStatus>().get()
                     == SidecarState::RunningUnauthenticated
-            {
-                open_settings_window(app_handle, Some("account"));
+                {
+                    Some("account")
+                } else {
+                    None
+                };
+                open_settings_window(app_handle, section);
             }
         }
         _ => {}
@@ -1406,6 +1412,18 @@ fn create_splash(app: &AppHandle) {
     .transparent(true)
     .always_on_top(true)
     .skip_taskbar(true)
+    // Build hidden and only show once the webview reports the DOM has
+    // loaded. On Windows/WebView2 the native surface is presented before
+    // the compositor draws its first frame, so a visible-from-launch
+    // transparent window shows an empty outline for hundreds of ms–seconds
+    // before the brand-red `.splash` div pops in. macOS/WKWebView paints in
+    // lockstep with show, so this fires immediately there — no regression.
+    .visible(false)
+    .on_page_load(|window, payload| {
+        if payload.event() == PageLoadEvent::Finished {
+            let _ = window.show();
+        }
+    })
     .center()
     .build();
     match result {