Map the home page's font sizes, gaps, and padding onto the Utopia
--step-*/--space-* scales instead of the fixed px lifted from the
design prototype, per the design system. Structural px (border widths,
icon and tap-target dimensions, container max-widths, breakpoints)
stay as-is, matching existing conventions.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0147qRctyhELxJgGs3nHizEM

diff --git a/public/app.css b/public/app.css
index 624df19..7f54531 100644
--- a/public/app.css
+++ b/public/app.css
@@ -363,8 +363,8 @@ body {
 .add-btn {
   display: inline-flex;
   align-items: center;
-  gap: 9px;
-  padding: 10px 18px;
+  gap: var(--space-2xs);
+  padding: var(--space-2xs) var(--space-s);
   border: 1px solid var(--w-accent);
   border-radius: calc(var(--radius) - 6px);
   background: var(--w-accent);
@@ -438,8 +438,8 @@ body {
 .entry {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 13px 16px;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-s);
   border-top: 1px solid var(--w-line);
   cursor: pointer;
   transition: background .12s ease;
@@ -467,15 +467,15 @@ body {
 }
 .entry .meta {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--step--2);
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--w-ink-3);
-  margin-top: 2px;
+  margin-top: var(--space-3xs);
 }
 .entry .time {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--step--2);
   color: var(--w-ink-3);
   flex: none;
 }
@@ -506,7 +506,7 @@ body {
 }
 .foot .fm {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--step--2);
   letter-spacing: 0.04em;
   color: var(--w-ink-3);
 }
@@ -527,8 +527,8 @@ body {
     display: flex;
     flex-direction: column-reverse;
     align-items: center;
-    gap: 12px;
-    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 8px));
+    gap: var(--space-xs);
+    padding: var(--space-s) var(--space-s) calc(var(--space-s) + env(safe-area-inset-bottom, 8px));
     background: linear-gradient(to top, var(--w-bg) 72%, transparent);
   }
   .dock .add-btn {
@@ -537,8 +537,6 @@ body {
     justify-content: center;
     border-radius: calc(var(--radius) - 2px);
     font-weight: 650;
-    font-size: 16px;
     box-shadow: 0 1px 2px rgba(60,52,36,.10), 0 10px 24px -12px rgba(154,90,60,.6);
   }
-  .dock .browse { font-size: 14px; }
 }