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/routes/+page.svelte

@@ -142,7 +142,9 @@
       ariaLabel="Playlists"
     >
       {#snippet item(rowItem: PlaylistRowItem)}
-        <div class="w-44">
+        <!-- Playlists at the page anchor: largest of the carousels.
+             Recently added stays at w-44; Rediscover steps down. -->
+        <div class="w-52">
           {#if rowItem.kind === 'real'}
             <PlaylistCard playlist={rowItem.playlist} />
           {:else}
@@ -195,7 +197,9 @@
             ariaLabel="Rediscover albums"
           >
             {#snippet item(album: import('$lib/api/types').AlbumRef)}
-              <div class="w-44"><AlbumCard {album} /></div>
+              <!-- Rediscover steps down vs Recently added to make the
+                   tile-size hierarchy read top-to-bottom. -->
+              <div class="w-40"><AlbumCard {album} /></div>
             {/snippet}
           </HorizontalScrollRow>
         {/if}