diff --git a/src/app/globals.css b/src/app/globals.css
index bd48280..0b9746c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -127,3 +127,32 @@
     @apply bg-muted-foreground/30;
   }
 }
+
+/* ─── Form-factor shell visibility ──────────────────────────────────────────
+ * Two shells (desktop + mobile) render to the DOM on every page; CSS reveals
+ * one and hides the other. The data-form-factor body attribute is set
+ * server-side from User-Agent (see src/lib/form-factor.ts). The media-query
+ * fallback handles desktop browsers resized below lg (1024px), or stripped UAs.
+ */
+[data-shell='desktop'] {
+  display: block;
+}
+[data-shell='mobile'] {
+  display: none;
+}
+
+@media (max-width: 1023.98px) {
+  [data-shell='desktop'] {
+    display: none;
+  }
+  [data-shell='mobile'] {
+    display: block;
+  }
+}
+
+body[data-form-factor='mobile'] [data-shell='desktop'] {
+  display: none;
+}
+body[data-form-factor='mobile'] [data-shell='mobile'] {
+  display: block;
+}