diff --git a/dist/index.css b/dist/index.css
index 39703e0b..ad315342 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -1,29 +1,27 @@
 /* src/base.css */
-@media (display-mode: browser) {
+#home-page {
+  --background-transparent: hsla(0, 0%, 100%, 40%);
+  --surface: hsla(0, 0%, 100%, 40%);
+  --surface-hover: hsla(0, 0%, 91%, 40%);
+  --surface-active: hsla(0, 0%, 78%, 40%);
+}
+@media (display-mode: browser) and (prefers-color-scheme: dark) {
   #home-page {
-    --background-transparent: hsla(0, 0%, 100%, 40%);
-    --surface: hsla(0, 0%, 100%, 40%);
-    --surface-hover: hsla(0, 0%, 91%, 40%);
-    --surface-active: hsla(0, 0%, 78%, 40%);
-  }
-  @media (prefers-color-scheme: dark) {
-    #home-page {
-      --background-transparent: hsla(0, 0%, 5%, 30%);
-      --surface: hsla(0, 0%, 5%, 30%);
-      --surface-hover: hsla(0, 0%, 20%, 30%);
-      --surface-active: hsla(0, 0%, 44%, 30%);
-    }
+    --background-transparent: hsla(0, 0%, 5%, 30%);
+    --surface: hsla(0, 0%, 5%, 30%);
+    --surface-hover: hsla(0, 0%, 20%, 30%);
+    --surface-active: hsla(0, 0%, 44%, 30%);
   }
 }
 #background {
   position: fixed;
-  top: -120px;
-  left: -120px;
-  right: -120px;
-  bottom: -120px;
+  top: 0px;
+  left: var(--safe-area-left);
+  right: var(--safe-area-right);
+  bottom: 0px;
   z-index: 1;
   pointer-events: none;
-  filter: blur(60px);
+  overflow: hidden;
   opacity: 0.2;
 }
 main {
@@ -32,9 +30,10 @@ main {
 #background::after,
 #background::before {
   content: "";
-  position: fixed;
+  position: absolute;
   z-index: -1;
   pointer-events: none;
+  filter: blur(60px);
 }
 @media (prefers-color-scheme: dark) {
   #background {
diff --git a/src/base.css b/src/base.css
index 458db3dc..3f7f82d9 100644
--- a/src/base.css
+++ b/src/base.css
@@ -1,33 +1,32 @@
-@media (display-mode: browser) {
-  #home-page {
-    --background-transparent: hsla(0, 0%, 100%, 40%);
-    --surface: hsla(0, 0%, 100%, 40%);
-    --surface-hover: hsla(0, 0%, 91%, 40%);
-    --surface-active: hsla(0, 0%, 78%, 40%);
-  }
+#home-page {
+  --background-transparent: hsla(0, 0%, 100%, 40%);
+  --surface: hsla(0, 0%, 100%, 40%);
+  --surface-hover: hsla(0, 0%, 91%, 40%);
+  --surface-active: hsla(0, 0%, 78%, 40%);
+}
 
-  @media (prefers-color-scheme: dark) {
-    #home-page {
-      --background-transparent: hsla(0, 0%, 5%, 30%);
-      --surface: hsla(0, 0%, 5%, 30%);
-      --surface-hover: hsla(0, 0%, 20%, 30%);
-      --surface-active: hsla(0, 0%, 44%, 30%);
-    }
+@media (display-mode: browser) and (prefers-color-scheme: dark) {
+  #home-page {
+    --background-transparent: hsla(0, 0%, 5%, 30%);
+    --surface: hsla(0, 0%, 5%, 30%);
+    --surface-hover: hsla(0, 0%, 20%, 30%);
+    --surface-active: hsla(0, 0%, 44%, 30%);
   }
 }
 
 #background {
   position: fixed;
 
-  top: -120px;
-  left: -120px;
-  right: -120px;
-  bottom: -120px;
+  top: 0px;
+  left: var(--safe-area-left);
+  right: var(--safe-area-right);
+  bottom: 0px;
 
   z-index: 1;
   pointer-events: none;
 
-  filter: blur(60px);
+  overflow: hidden;
+
   opacity: 0.2;
 }
 
@@ -39,10 +38,12 @@ main {
 #background::before {
   content: "";
 
-  position: fixed;
+  position: absolute;
 
   z-index: -1;
   pointer-events: none;
+
+  filter: blur(60px);
 }
 
 @media (prefers-color-scheme: dark) {