feat(web): radial gradient + playlist title overlay + tile-size hierarchy

Second wave of Home visual polish (UI tasks 80/82/84):

- Shell main background gets a 1200x600 radial gradient at the top
  using color-mix on fs-iron so the page reads with subtle depth
  instead of as a flat slab.
- PlaylistCard moves the title onto the cover with a bottom-to-top
  gradient overlay. The server-generated 2x2 collage becomes mood
  texture; the Fraunces playlist name becomes the dominant element.
  Track count and refresh label stay below the art. Mirror albums
  shadow-sm/shadow-lg/ring-accent hover treatment on the art-wrap.
- Tile-size hierarchy: Playlists w-52, Recently added w-44,
  Rediscover w-40. Visual weight tapers as you scroll down the
  page so the freshest content reads as most important.

web/src/lib/components/Shell.svelte

@@ -135,7 +135,16 @@
     </div>
   </header>
 
-  <main class="overflow-y-auto p-4">
+  <!-- Subtle 1200x600 radial highlight at the top of the scroll
+       area fades the slate tone (fs-iron with alpha) into the
+       background. Adds depth so the page doesn't read as a flat
+       slab. color-mix lets the gradient theme-track in case the
+       palette token ever shifts. -->
+  <main
+    class="overflow-y-auto p-4"
+    style="background-image: radial-gradient(ellipse 1200px 600px at 50% -100px,
+      color-mix(in srgb, var(--fs-iron) 60%, transparent), transparent 70%);"
+  >
     {@render children?.()}
   </main>