diff --git a/website/app/page.ts b/website/app/page.ts
index bad516a5e..c67541dac 100644
--- a/website/app/page.ts
+++ b/website/app/page.ts
@@ -92,7 +92,7 @@ LikeButton.register('like-button');
 // The panel to the right is this file, server-rendered
 // and upgraded in place. Click it.`;
 
-const WIN = 'flex flex-col flex-1 m-0 min-w-0 max-w-full rounded-2xl overflow-hidden border border-border bg-bg-elev shadow-[var(--shadow)]';
+const WIN = 'flex flex-col flex-1 m-0 min-w-0 max-w-full rounded-2xl overflow-hidden border border-border bg-bg-subtle shadow-[var(--shadow)]';
 const WINBAR = 'flex items-center gap-1.5 h-10 px-3.5 border-b border-border bg-[color-mix(in_oklch,var(--color-bg-sunken)_60%,var(--color-bg-elev))]';
 const WINNAME = 'ml-2 font-mono font-medium text-xs leading-none text-fg-subtle';
 const DOTS = html`<span class="w-2.5 h-2.5 rounded-full bg-[#ff5f57]"></span><span class="w-2.5 h-2.5 rounded-full bg-[#febc2e]"></span><span class="w-2.5 h-2.5 rounded-full bg-[#28c840]"></span>`;
@@ -117,7 +117,7 @@ export default function LandingPage() {
          the three syntax hues need a dark override. */
       :root {
         --editor-bg: var(--bg-elev);
-        --editor-sidebar-bg: var(--bg-sunken);
+        --editor-sidebar-bg: var(--bg-subtle);
         --editor-tab-bg: var(--bg-sunken);
         --editor-active-tab-bg: var(--bg-elev);
         --editor-status-bg: var(--bg-sunken);
@@ -158,20 +158,6 @@ export default function LandingPage() {
          the page a reader is invited to click, so it is sized as a control
          rather than as an inline badge, and it is the single surface where the
          brand accent appears as a hover state. */
-      .stage-code { background: oklch(0.09 0.005 60); }
-      .stage-code > div:first-child {
-        background: oklch(0.13 0.006 60);
-        border-color: oklch(1 0 0 / 0.09);
-      }
-      .stage-code > div:first-child span:last-child { color: oklch(0.62 0.01 60); }
-      .stage-code pre {
-        color: oklch(0.95 0.005 70);
-        --code-tag: oklch(0.78 0.13 250);
-        --code-attr: oklch(0.66 0.16 150);
-        --code-str: oklch(0.80 0.15 145);
-        --code-text: oklch(0.95 0.005 70);
-        --code-punc: oklch(0.68 0.01 60);
-      }
       .hero-stage like-button button {
         gap: 0.5rem;
         padding: 0.7rem 1.25rem;
@@ -227,8 +213,8 @@ export default function LandingPage() {
           </p>
         </div>
 
-        <div class="hero-stage max-w-6xl mx-auto grid grid-cols-1 wide:grid-cols-[1.12fr_0.88fr] rounded-2xl overflow-hidden border border-border-strong bg-bg-sunken shadow-[var(--shadow)]">
-          <div class="stage-code min-w-0 border-b wide:border-b-0 wide:border-r border-border">
+        <div class="hero-stage max-w-5xl mx-auto grid grid-cols-1 wide:grid-cols-2 rounded-2xl overflow-hidden border border-border-strong bg-bg-sunken shadow-[var(--shadow)]">
+          <div class="min-w-0 border-b wide:border-b-0 wide:border-r border-border bg-bg-subtle">
             <div class=${WINBAR}>${DOTS}<span class=${WINNAME}>components/like-button.ts</span></div>
             <pre class="scroll-thin m-0 p-5 overflow-x-auto font-mono text-xs leading-[1.72] [tab-size:2] text-left" tabindex="0" aria-label="like-button component source"><code>${highlight(HERO_SAMPLE)}</code></pre>
           </div>
@@ -398,7 +384,7 @@ export default function LandingPage() {
             <span class="text-xs font-medium leading-none text-fg-subtle">Full-stack</span>
             <h3 class="font-display font-bold text-lg leading-[1.25] m-0">Pages + API + components</h3>
             <p class="m-0 text-sm leading-[1.6] text-fg-muted">SSR pages, web components, server actions, Drizzle, streaming, and a browsable feature gallery. Auth (login, sessions, a protected route) ships as a gallery card. The default.</p>
-            <pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-sunken font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/page.ts
+            <pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-subtle font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/page.ts
 components/counter.ts
 actions/posts.server.ts</pre>
             <div class="cmd-foot pt-2 mt-auto font-mono text-xs leading-[1.6] text-fg-muted max-w-full min-w-0"><copy-cmd>npm create webjs@latest my-app</copy-cmd></div>
@@ -407,7 +393,7 @@ actions/posts.server.ts</pre>
             <span class="text-xs font-medium leading-none text-fg-subtle">Backend (API)</span>
             <h3 class="font-display font-bold text-lg leading-[1.25] m-0">Route handlers + Database</h3>
             <p class="m-0 text-sm leading-[1.6] text-fg-muted">A backend-only app, no UI or SSR. File-based route handlers, modules, middleware, rate limiting, WebSockets, a database, and a backend-features gallery.</p>
-            <pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-sunken font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/api/users/route.ts
+            <pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-subtle font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/api/users/route.ts
 app/api/chat/route.ts
 middleware.ts</pre>
             <div class="cmd-foot pt-2 mt-auto font-mono text-xs leading-[1.6] text-fg-muted max-w-full min-w-0"><copy-cmd>npm create webjs@latest my-api -- --template api</copy-cmd></div>
diff --git a/website/lib/design/recipes.ts b/website/lib/design/recipes.ts
index 1221b95a7..957ac708d 100644
--- a/website/lib/design/recipes.ts
+++ b/website/lib/design/recipes.ts
@@ -64,7 +64,7 @@ export const BTN_GHOST = `${BTN_BASE} text-fg border-border-strong bg-[color-mix
  * proportionally right for something 10px taller.
  */
 export const INSTALL =
-  `flex items-center gap-2 w-fit max-w-full mx-auto px-4 py-3.5 text-left font-mono text-sm leading-[1.6] text-fg-muted rounded-2xl border border-border bg-[color-mix(in_oklch,var(--color-bg-sunken)_70%,transparent)] backdrop-blur-sm shadow-[var(--shadow-sm)]`;
+  `flex items-center gap-2 w-fit max-w-full mx-auto px-4 py-3.5 text-left font-mono text-sm leading-[1.6] text-fg-muted rounded-2xl border border-border bg-[color-mix(in_oklch,var(--color-bg-subtle)_70%,transparent)] backdrop-blur-sm shadow-[var(--shadow-sm)]`;
 
 /* ---------------------------------------------------------------------------
    Layout.
diff --git a/website/public/input.css b/website/public/input.css
index fa01a6c05..cf541f2aa 100644
--- a/website/public/input.css
+++ b/website/public/input.css
@@ -255,17 +255,6 @@
 .t-num { color: oklch(0.55 0.12 215); }
 .t-punc{ color: var(--fg-muted); }
 .t-id  { color: var(--fg); }
- /* The hero stage's source pane is a dark editor in BOTH themes, so it takes
-    the dark token set unconditionally (the theme-scoped rules below cannot
-    reach it in light mode). */
-.stage-code .t-str { color: oklch(0.80 0.14 150); }
-.stage-code .t-kw  { color: oklch(0.76 0.14 295); }
-.stage-code .t-fn  { color: oklch(0.75 0.13 250); }
-.stage-code .t-type{ color: oklch(0.80 0.10 200); }
-.stage-code .t-num { color: oklch(0.72 0.12 215); }
-.stage-code .t-id  { color: oklch(0.95 0.005 70); }
-.stage-code .t-punc{ color: oklch(0.68 0.01 60); }
-.stage-code .t-com { color: oklch(0.55 0.01 60); font-style: italic; }
 
 :root[data-theme='dark'] .t-str { color: oklch(0.80 0.14 150); }
 :root[data-theme='dark'] .t-kw  { color: oklch(0.76 0.14 295); }