Improve readability and randomize guest landing pet.

Pair Share Tech Mono body text with Press Start 2P display accents, and show a randomized dressed pixel character for signed-out homepage previews.

components/landing/landing-pet-preview.tsx

@@ -9,6 +9,7 @@ import {
   getAvatarCustomization,
   type AvatarCustomization,
 } from "@/lib/avatar-customization-storage";
+import { getGuestLandingPetCustomization } from "@/lib/landing-random-pet";
 import { routes } from "@/lib/routes";
 import { createClient } from "@/lib/supabase/client";
 import { cn } from "@/lib/utils";
@@ -76,7 +77,7 @@ export function LandingPetPreview() {
 
     if (!user) {
       setIsSignedIn(false);
-      setCustomization(defaultAvatarCustomization);
+      setCustomization(getGuestLandingPetCustomization());
       setIsLoading(false);
       return;
     }

components/layout/app-nav.tsx

@@ -93,7 +93,7 @@ export const AppNav = forwardRef<HTMLElement, AppNavProps>(function AppNav(
               onPointerEnter={() => prefetchByRoute[item.href]?.()}
               onFocus={() => prefetchByRoute[item.href]?.()}
               className={cn(
-                "bottom-nav-item flex flex-col items-center justify-center gap-1.5 overflow-hidden border-2 px-1 py-2 text-[9px] leading-none transition-colors duration-75",
+                "bottom-nav-item flex flex-col items-center justify-center gap-1.5 overflow-hidden border-2 px-1 py-2 font-pixel text-[8px] leading-none transition-colors duration-75",
                 isActive
                   ? "border-secondary bg-primary text-primary-foreground shadow-[var(--retro-shadow-sm)]"
                   : "border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground",

components/layout/app-page-header.tsx

@@ -16,9 +16,9 @@ export function AppPageHeader({
           {eyebrow}
         </p>
       ) : null}
-      <h1 className="text-sm">{title}</h1>
+      <h1 className="text-base">{title}</h1>
       {description ? (
-        <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
           {description}
         </p>
       ) : null}

components/layout/auth-bottom-nav.tsx

@@ -28,7 +28,7 @@ export function AuthBottomNav() {
               key={item.href}
               href={item.href}
               className={cn(
-                "flex flex-col items-center gap-1 rounded-lg px-1 py-2 text-[9px] font-medium leading-tight transition-colors",
+                "flex flex-col items-center gap-1 rounded-lg px-1 py-2 font-pixel text-[8px] font-normal leading-tight transition-colors",
                 isActive
                   ? "bg-primary text-primary-foreground"
                   : "text-muted-foreground hover:bg-muted hover:text-foreground",

components/layout/habit-brand.tsx

@@ -41,7 +41,7 @@ export function HabitBrand({
         />
       ) : (
         <span
-          className="select-none text-[10px] uppercase tracking-widest text-primary"
+          className="font-pixel select-none text-[10px] uppercase tracking-widest text-primary"
           aria-hidden="true"
         >
           HaBit

components/layout/site-header.tsx

@@ -11,7 +11,7 @@ export function SiteHeader() {
   return (
     <header className="w-full border-b border-b-foreground/10">
       <div className="mx-auto flex h-16 w-full max-w-5xl items-center justify-between px-5 text-sm">
-        <Link href={routes.home} className="font-semibold tracking-tight">
+        <Link href={routes.home} className="font-pixel text-xs tracking-tight">
           Habit Pet
         </Link>
         {!hasEnvVars ? (

components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-none border-2 border-border px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 shadow-[var(--retro-shadow-sm)]",
+  "inline-flex items-center rounded-none border-2 border-border px-2 py-0.5 text-[10px] font-normal uppercase tracking-wide transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 shadow-[var(--retro-shadow-sm)]",
   {
     variants: {
       variant: {

components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap border-2 border-border text-xs font-normal transition-[transform,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap border-2 border-border font-pixel text-[10px] font-normal uppercase tracking-wide transition-[transform,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

components/ui/card.tsx

@@ -35,7 +35,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn("font-pixel text-sm font-normal leading-snug tracking-tight", className)}
     {...props}
   />
 ));
@@ -47,7 +47,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm leading-relaxed text-muted-foreground", className)}
     {...props}
   />
 ));

components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-none border-2 border-input bg-muted/30 px-3 py-1 text-xs shadow-[var(--retro-shadow-sm)] transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-none border-2 border-input bg-muted/30 px-3 py-1 text-sm leading-normal shadow-[var(--retro-shadow-sm)] transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

components/ui/label.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "text-sm font-normal leading-snug peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<