feat(web): redesign FALLBACK_COVER as a beamed-pair glyph

The previous placeholder was a single off-tilt eighth-note silhouette in
muted pewter on slate — readable but plain. Replaces it with two filled
note heads connected by a slanted beam (bolder, more recognisable as
'this is a music placeholder'). Keeps it muted enough to read as
placeholder rather than real content, in line with the FabledSword
understated palette.

Same inline SVG data URL pattern (no extra HTTP round-trip), same
100x100 viewBox so all existing call sites are unaffected.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/src/lib/media/covers.ts

@@ -1,13 +1,24 @@
-// Fallback cover — an inline SVG data URL showing a music-note glyph on the
-// surface color. Used by AlbumCard's onerror handler when the real cover
-// fails (e.g. scanner didn't pick up an embedded image and there's no
-// sidecar). Data URL avoids an extra HTTP round-trip.
+// Fallback cover — an inline SVG data URL showing a beamed-eighth-notes
+// glyph on a slate field. Used by AlbumCard / CompactTrackCard / PlayerBar's
+// onerror handler when the real cover fails (e.g. scanner didn't pick up
+// embedded art and there's no sidecar). Data URL avoids an extra HTTP
+// round-trip; SVG keeps it crisp at any size we render.
+//
+// The glyph is two filled note heads connected by a slanted beam — bolder
+// and more recognisable than a single-note silhouette, while staying muted
+// enough to read as a placeholder rather than real content.
 export const FALLBACK_COVER =
   'data:image/svg+xml;utf8,' +
   encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
        <rect width="100" height="100" fill="#1f1f23"/>
-       <path d="M40 30v35a7 7 0 1 1-7-7 7 7 0 0 1 3 .7V35h22v8h-18z" fill="#6b6b70"/>
+       <g fill="#7a7a82">
+         <ellipse cx="30" cy="72" rx="10" ry="8"/>
+         <rect x="38" y="34" width="4" height="40"/>
+         <ellipse cx="68" cy="64" rx="10" ry="8"/>
+         <rect x="76" y="26" width="4" height="40"/>
+         <polygon points="38,34 80,26 80,34 38,42"/>
+       </g>
      </svg>`
   );