diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index da15d4c..d53a38e 100644
--- a/internal/web/static/app.css
+++ b/internal/web/static/app.css
@@ -7,6 +7,7 @@
 
 :root {
   --bg: #f5f6f8;
+  --dot: rgba(60, 70, 95, 0.16);
   --surface: #ffffff;
   --surface-2: #eff1f4;
   --surface-hover: #f7f8fa;
@@ -79,6 +80,7 @@
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --bg: #0f1115;
+    --dot: rgba(148, 156, 180, 0.26);
     --surface: #1a1e26;
     --surface-2: #232834;
     --surface-hover: #20252e;
@@ -114,6 +116,7 @@
 }
 :root[data-theme="dark"] {
   --bg: #0f1115;
+  --dot: rgba(148, 156, 180, 0.26);
   --surface: #1a1e26;
   --surface-2: #232834;
   --surface-hover: #20252e;
@@ -163,6 +166,17 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+/* Dot grid behind everything, fading out down the screen. z-index -1 sits above
+   the canvas background but below all in-flow content, so no wrapper element
+   is needed. */
+body::before {
+  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+  background-image: radial-gradient(circle, var(--dot) 1.25px, transparent 1.75px);
+  background-size: 28px 28px;
+  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 88%);
+  mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 88%);
+}
+
 a { color: inherit; text-decoration: none; }
 button, input, textarea, select { font: inherit; color: inherit; }
 code { font-family: var(--mono); font-size: 0.9em; }