Polish the public auth experience

Replace the stacked sign-in card with a responsive public shell, a local monochrome compute field, restrained grain and reduced-motion-safe drift. Share the anonymous header with Learn so public navigation stays consistent, and carry the corrected spacing through registration and profile setup.

apps/web/src/index.css

@@ -177,6 +177,82 @@
     background-attachment: fixed;
   }
 
+  /*
+   * The auth surface is intentionally monochrome even if a signed-in user has
+   * selected another accent. It is public brand chrome, and forcing the local
+   * dark token set keeps controls legible without changing the stored theme.
+   */
+  .auth-shell {
+    --bg: 240 10% 3%;
+    --surface: 240 7% 6%;
+    --surface-2: 240 5% 11%;
+    --border: 240 4% 22%;
+    --fg: 0 0% 98%;
+    --muted: 240 5% 67%;
+    --accent: 0 0% 98%;
+    --accent-fg: 0 0% 98%;
+    --accent-on: 240 6% 10%;
+    --accent-subtle: 240 4% 16%;
+    color-scheme: dark;
+  }
+
+  .auth-field-motion {
+    animation: auth-field-drift 26s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+
+  .auth-visual {
+    opacity: 0.52;
+  }
+
+  .auth-visual::after {
+    position: absolute;
+    inset: 0;
+    content: '';
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
+    background-size: 180px 180px;
+    mix-blend-mode: soft-light;
+    opacity: 0.14;
+  }
+
+  .auth-visual-vignette {
+    background:
+      linear-gradient(to bottom, hsl(var(--bg) / 0.18), hsl(var(--bg) / 0.72) 34%, hsl(var(--bg)) 100%),
+      linear-gradient(to right, hsl(var(--bg) / 0.18), hsl(var(--bg) / 0.42));
+  }
+
+  @media (min-width: 1024px) {
+    .auth-visual {
+      opacity: 1;
+    }
+
+    .auth-visual-vignette {
+      background:
+        linear-gradient(to right, transparent 48%, hsl(var(--bg) / 0.28) 78%, hsl(var(--bg) / 0.72)),
+        linear-gradient(to bottom, hsl(var(--bg) / 0.06), transparent 18%, hsl(var(--bg) / 0.28));
+    }
+  }
+
+  @keyframes auth-field-drift {
+    0% {
+      transform: translate3d(-1.4%, -0.8%, 0) scale(1.045);
+    }
+    50% {
+      transform: translate3d(0.8%, 0.6%, 0) scale(1.075);
+    }
+    100% {
+      transform: translate3d(-0.3%, 1.1%, 0) scale(1.055);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .auth-field-motion {
+      animation: none;
+      transform: scale(1.045);
+      will-change: auto;
+    }
+  }
+
   /* Tabular figures keep money and percentages from jittering as they
      update, which matters on a dashboard that refreshes. */
   .nums {