feat(web-player): rebuild Inicio and Buscar to the design handoff

Applies the handoff's layout and image shapes while keeping the current
Musify design system (Inter, colors, tokens) — no font or palette swap.

Inicio now stacks distinct shelves instead of repeated square grids:
recently played rows, a rail of recently listened albums with an "Álbum"
badge, a "Hecho para ti" bento of mixes, a rail of playlists with a
trailing dashed "Ver todas" tile, tall "Canciones nuevas" posters with a
"Nuevo" badge, a rail of circular top-artist avatars, and a recommended
rail. Buscar splits into Álbumes (square cards + badge), Usuarios (a
circular-avatar directory) and a flat Canciones list.

Top artists and the search user directory are filler data until the
backend exposes them. New shared pieces: Rail, CoverBadge, ArtistAvatar,
MixBentoTile. The orphaned TrackTile and MixCard are removed.

web-player/src/lib/components/ui/ArtistAvatar.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { gradientForHue, hueFor } from '$lib/theme/color';
+
+	interface Props {
+		id: string;
+		name: string;
+		size?: number;
+	}
+
+	let { id, name, size = 108 }: Props = $props();
+
+	const initials = $derived(
+		name
+			.split(/\s+/)
+			.filter(Boolean)
+			.slice(0, 2)
+			.map((part) => part[0]?.toUpperCase() ?? '')
+			.join('')
+	);
+</script>
+
+<div class="flex flex-col items-center gap-2.5 text-center" style="width:{size}px">
+	<div
+		class="relative grid shrink-0 place-items-center overflow-hidden rounded-full shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/artist:-translate-y-1 group-hover/artist:shadow-art-lg"
+		style="width:{size}px;height:{size}px;background:{gradientForHue(hueFor(id))}"
+	>
+		<div
+			class="pointer-events-none absolute inset-0"
+			style="background:repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 10px)"
+		></div>
+		<span class="relative text-lg font-semibold text-white/90">{initials}</span>
+	</div>
+	<div class="w-full truncate text-sm text-fg">{name}</div>
+</div>