diff --git a/web/src/App.tsx b/web/src/App.tsx
index 8900f47..d63cd46 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -35,7 +35,7 @@ import { playPop } from "./lib/pop";
 import { targetForAlbum } from "./lib/remote";
 import type { Group, Results, SongHit } from "./lib/search";
 import { buildSearchIndex, categoryMatches, groupOf, results as computeResults } from "./lib/search";
-import { SHOW_AMBIENCE, SHOW_GLASS_BLUR } from "./lib/theme";
+import { SHOW_AMBIENCE, SHOW_CARD_BLUR, SHOW_GLASS_BLUR } from "./lib/theme";
 
 /** How long an armed "A" waits for the digit that completes the shortcut. */
 const ASSIGN_PENDING_TIMEOUT_MS = 4000;
@@ -412,7 +412,11 @@ export function App() {
     setUi((previous) => ({ ...previous, page: previous.page === page ? "music" : page }));
 
   return (
-    <div className="stage" data-blur={SHOW_GLASS_BLUR ? undefined : "off"}>
+    <div
+      className="stage"
+      data-blur={SHOW_GLASS_BLUR ? undefined : "off"}
+      data-cardblur={SHOW_CARD_BLUR ? undefined : "off"}
+    >
       {state && SHOW_AMBIENCE && (
         <Ambience
           album={currentAlbum}
diff --git a/web/src/lib/theme.ts b/web/src/lib/theme.ts
index f8ba247..90f6261 100644
--- a/web/src/lib/theme.ts
+++ b/web/src/lib/theme.ts
@@ -11,6 +11,7 @@
 
 import type { CSSProperties } from "react";
 
+import { LOW_POWER } from "./lowPower";
 import type { Group } from "./search";
 import type { UiState } from "./keyboard";
 
@@ -52,6 +53,17 @@ export const SHOW_GLASS_BLUR = true;
  * half the frames) rather than making it go away. */
 export const SHOW_AMBIENCE = true;
 
+/** Frost the *repeated* glass surfaces - every album card in the grid, every row in a
+ * track list - as opposed to the handful of panels wrapped around them.
+ *
+ * Separate from `SHOW_GLASS_BLUR` because the two behave nothing alike, and lumping
+ * them together is what made the first attempt at a Pi profile five times slower. A
+ * panel is one live backdrop copy that buys its whole subtree a compositing layer. A
+ * card is one live backdrop copy out of three hundred sitting directly over the
+ * animated canvas, so every canvas frame re-blurs all of them. Measured on the Pi with
+ * a full album grid on screen, Chromium: see lib/lowPower.ts. */
+export const SHOW_CARD_BLUR = !LOW_POWER;
+
 /** Run the purely decorative CSS animation loops: the room page's bubble field and
  * the dolphin mascot's bob/swim. Left on even under `?pi=1`: switching them off on the
  * Pi moved the idle figure by 0.4 percentage points, which is noise, and they are the
diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index c7bb6e1..55ff3fb 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -157,6 +157,17 @@ button {
   box-shadow: 0 4px 14px var(--shadow);
 }
 
+/* `SHOW_CARD_BLUR` (`lib/theme.ts`) off sets `data-cardblur="off"` - drop the backdrop
+   blur from the surfaces there are *many* of, and only those. An album grid is up to
+   343 cards, each one a live backdrop copy sitting directly over the animated canvas,
+   so every canvas frame re-blurs all of them. The panels below keep their blur: a
+   panel is one copy, and it is what gives its whole subtree a compositing layer. */
+.stage[data-cardblur="off"] .card,
+.stage[data-cardblur="off"] .list-row {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
 /* `SHOW_GLASS_BLUR` (`lib/theme.ts`) off sets `data-blur="off"` on `.stage` - drop
    the (GPU-expensive) backdrop blur everywhere below and fall back to each
    element's own plain translucent background. */
@@ -199,6 +210,27 @@ button {
   margin: 0 auto;
 }
 
+/* Searching "e" over a real library puts 340 cards in this grid at once, each one a
+   cover image, a shadow and a backdrop blur, all of them live whether or not they are
+   on screen. On the Pi that saturated the renderer so completely that a DevTools
+   evaluate could not be scheduled on the main thread inside 30 seconds - which is
+   exactly what "sluggish" felt like.
+
+   `content-visibility: auto` is the browser's own answer to this and costs nothing
+   elsewhere: off-screen cards skip layout, paint and compositing entirely, and come
+   back the moment they scroll near the viewport. The grid's tracks are sized by
+   `minmax(180px, 1fr)` rather than by card content, so skipping that content cannot
+   change the column layout; `contain-intrinsic-size` supplies the block-axis guess
+   (a card measured 185x289 on the device) and `auto` then remembers each card's real
+   size once it has been rendered once, so scroll height and `offsetTop` - which the
+   keep-the-selection-on-screen effect in BrowseView reads - stay honest.
+
+   Deliberately not behind ?pi=1: there is no visual difference to trade away. */
+.grid > .card {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 289px;
+}
+
 .shelf-row {
   display: flex;
   gap: 12px;