feat(web): crossfade between tracks (Tier C11)

Operator-tunable 0-12s crossfade in Settings → Playback. Default 0
(off). Most albums sound best at 0 — gapless masters, classical, and
live recordings all suffer noticeable crossfades.

Implementation: pure-function position-derived volume scalar.
`deriveFadeScalar(position, duration, crossfadeSec)` ramps from 0 to
1 over the leading X seconds, 1 to 0 over the trailing X seconds,
and stays at 1 in between. Tracks shorter than 2X don't fade.

The layout's audio-volume effect now multiplies player.volume by
the fade scalar — no timers, no AudioContext, no element swapping.
Re-renders at the ~4Hz `timeupdate` cadence give 16 discrete steps
over a 4s fade, audibly close to smooth. Smoothing to per-frame
ramps via rAF is a follow-up if needed.

Setting persists to localStorage as `minstrel.crossfade` (matches
the existing volume-storage convention).

Tests cover the pure derivation (off, too-short track, fade-in,
fade-out) + clamp/persist on setCrossfade + invalid-input recovery
on readStoredCrossfade.

web/src/routes/+layout.svelte

@@ -18,7 +18,8 @@
     reportStateFromAudio,
     player,
     closeQueueDrawer,
-    consumePendingRestorePosition
+    consumePendingRestorePosition,
+    deriveFadeScalar
   } from '$lib/player/store.svelte';
   import { useMediaSession } from '$lib/player/mediaSession.svelte';
   import { useEventsDispatcher } from '$lib/player/events.svelte';
@@ -89,7 +90,12 @@
   });
 
   $effect(() => {
-    if (audioEl) audioEl.volume = player.volume;
+    if (!audioEl) return;
+    // Per-position fade scalar: 1 normally, ramping in/out of the
+    // crossfade window at track boundaries. Pure function of position
+    // + duration + the operator's chosen crossfade duration.
+    const scalar = deriveFadeScalar(player.position, player.duration, player.crossfadeSec);
+    audioEl.volume = player.volume * scalar;
   });
 
   $effect(() => {

web/src/routes/settings/+page.svelte

@@ -9,6 +9,7 @@
     type LBStatus
   } from '$lib/api/listenbrainz';
   import { theme, setTheme, type ThemePreference } from '$lib/stores/theme.svelte';
+  import { player, setCrossfade } from '$lib/player/store.svelte';
   import {
     updateProfile,
     changePassword,
@@ -175,6 +176,34 @@
     </p>
   </section>
 
+  <section class="space-y-3 rounded border border-border bg-surface p-4">
+    <h2 class="text-lg font-semibold">Playback</h2>
+
+    <div class="space-y-2">
+      <div class="flex items-center justify-between">
+        <label for="crossfade-slider" class="text-sm text-text-secondary">Crossfade</label>
+        <span class="text-sm tabular-nums text-text-primary">
+          {player.crossfadeSec === 0 ? 'Off' : `${player.crossfadeSec}s`}
+        </span>
+      </div>
+      <input
+        id="crossfade-slider"
+        type="range"
+        min="0"
+        max="12"
+        step="1"
+        value={player.crossfadeSec}
+        oninput={(e) => setCrossfade(Number((e.currentTarget as HTMLInputElement).value))}
+        aria-label="Crossfade duration in seconds"
+        class="w-full accent-accent"
+      />
+      <p class="text-xs text-text-secondary">
+        Fades the end of one track into the start of the next.
+        0 = off · most albums sound best at 0.
+      </p>
+    </div>
+  </section>
+
   <section class="space-y-4 rounded border border-border bg-surface p-4">
     <h2 class="text-lg font-semibold">ListenBrainz</h2>