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/components/AuthShell.tsx

@@ -0,0 +1,37 @@
+/**
+ * Public auth composition: generated compute field, grain and real form UI.
+ *
+ * The artwork is decoration only. Auth copy and controls stay in the normal
+ * document flow, so a missing image changes the mood rather than the task.
+ */
+import type { ReactNode } from 'react';
+import { PublicHeader } from './PublicHeader';
+
+export function AuthShell({ children, onSignIn }: { children: ReactNode; onSignIn?: () => void }) {
+  return (
+    <div className="auth-shell relative isolate flex min-h-dvh min-w-0 flex-col overflow-hidden bg-bg text-fg">
+      <PublicHeader current="sign-in" onSignIn={onSignIn} />
+      <main className="relative grid min-w-0 flex-1 lg:grid-cols-[minmax(0,1.08fr)_minmax(30rem,0.92fr)]">
+        <div
+          className="auth-visual pointer-events-none absolute inset-0 lg:relative lg:inset-auto"
+          aria-hidden
+        >
+          <div className="auth-field-motion absolute -inset-[4%]">
+            <img
+              src="/images/pig-compute-field.webp"
+              alt=""
+              className="size-full object-cover object-[46%_50%]"
+              decoding="async"
+              fetchPriority="high"
+            />
+          </div>
+          <div className="auth-visual-vignette absolute inset-0" />
+        </div>
+
+        <section className="relative z-10 flex min-w-0 items-center justify-center px-4 py-6 sm:px-8 sm:py-10 lg:border-l lg:border-border/70 lg:bg-bg/90 lg:px-12 xl:px-16">
+          <div className="w-full min-w-0 max-w-lg">{children}</div>
+        </section>
+      </main>
+    </div>
+  );
+}