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/App.tsx

@@ -11,7 +11,6 @@ import { IdentityProvider, useIdentityQuery } from '@/lib/identity';
 import { LayoutProvider } from '@/lib/layout';
 import { PiggyContextProvider } from '@/lib/piggy-context';
 import { PlatformAudioProvider } from '@/lib/audio';
-import { AudioControl } from '@/components/AudioControl';
 import { Shell } from '@/components/Shell';
 import { SignIn } from '@/pages/SignIn';
 import { CreateProfile } from '@/pages/CreateProfile';
@@ -108,25 +107,14 @@ export function App() {
 }
 
 /**
- * The signed-out screens render outside Shell, so they get no app header — and
- * therefore no way to stop the music. Audio a visitor cannot switch off is the
- * worst version of this feature, so every unauthenticated screen gets the
- * control pinned in a corner.
+ * The signed-out screens render outside Shell. Their shared AuthShell supplies
+ * the public header and its music control; keeping this boundary component
+ * means the auth gate does not need to know anything about that presentation.
  *
  * Learn is not wrapped: it brings its own chrome and already hosts one.
  */
 function SignedOut({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      {children}
-      <div
-        className="fixed right-3 z-50 rounded-full border border-border bg-surface/85 shadow-sm backdrop-blur"
-        style={{ bottom: 'calc(0.75rem + var(--safe-bottom))' }}
-      >
-        <AudioControl />
-      </div>
-    </>
-  );
+  return children;
 }
 
 /**