diff --git a/apps/web/src/styles/themes/boocode-classic.css b/apps/web/src/styles/themes/boocode-classic.css
index 62fd36f..23c9095 100644
--- a/apps/web/src/styles/themes/boocode-classic.css
+++ b/apps/web/src/styles/themes/boocode-classic.css
@@ -55,3 +55,13 @@ html.theme-boocode-classic {
 .theme-boocode-classic body {
   background-color: transparent !important;
 }
+
+/* The AppShell root (.h-dvh.bg-background) is a full-viewport element carrying
+   the translucent --background panel token; at ~86% opacity that sheet would
+   occlude the rain canvas (z-0) behind it. Make the root transparent so the rain
+   shows through — the html backstop (#0a0604) is the opaque base, and individual
+   panels (sidebar/cards/composer) keep their own translucent bg for legibility.
+   The compound .h-dvh.bg-background selector targets only the AppShell root. */
+.theme-boocode-classic .h-dvh.bg-background {
+  background-color: transparent !important;
+}
diff --git a/apps/web/src/styles/themes/boocode-override.css b/apps/web/src/styles/themes/boocode-override.css
index 55b357e..c56a101 100644
--- a/apps/web/src/styles/themes/boocode-override.css
+++ b/apps/web/src/styles/themes/boocode-override.css
@@ -57,3 +57,13 @@ html.theme-boocode-override {
 .theme-boocode-override body {
   background-color: transparent !important;
 }
+
+/* The AppShell root (.h-dvh.bg-background) is a full-viewport element carrying
+   the translucent --background panel token; at ~86% opacity that sheet would
+   occlude the NeonField canvas (z-0) behind it. Make the root transparent so the
+   field shows through — the html backstop (#0a0604) is the opaque base, and
+   individual panels (sidebar/cards/composer) keep their own translucent bg for
+   legibility. The compound .h-dvh.bg-background selector targets only the root. */
+.theme-boocode-override .h-dvh.bg-background {
+  background-color: transparent !important;
+}