feat(ui): rework every page for comfort, and make a seeded Vibe play its seed

A pass over the whole app against the Ethos laws, then a focused pass on
Vibe with the operator reviewing each change.

Across the app:
- The player bar restores the last track it played, paused at zero, so a
  fresh tab opens on where the listener was instead of "nothing playing".
- Track titles link to their album, matching the artist links beside them.
  Playback stays on the artwork tile; a title that played was the surprise.
- The search field is bg-bg2. Tailwind cannot alpha-modify these var()
  colors, so bg-surface0/70 emitted no rule at all and the input fell back
  to the UA's white.
- Row hover is light falling off to the right, not a flat slab.
- The artwork placeholder can drop its note glyph, so TrackRow no longer
  layers a play icon on top of one.

Vibe:
- A seeded Vibe plays its seed first. The seed sits in front of the durable
  plan without being part of it, so the first advance consumes it locally
  and reports no plan feedback.
- The queue drops a second recording of a song it already holds — same
  title, different track id, which id-based dedup let through.
- Up next is read from the queue rather than the plan preview, since the
  seed is not a plan item.
- The header carries the live profile (energy, discovery, goal) and both
  verbs. Keep is gone: letting a track finish already reports `completed`,
  which the director weighs the same.
- The aura is one warm diffuse blob in the page background, warm-hued only
  and quieter on mobile.
- Compact artwork is 32px. It was h-8 w-8, which this remapped spacing
  scale renders as 64px inside a 44px row, and that overflow was the
  "stacked" look.

Verified by render at 1440x900 and 390x844, no horizontal overflow at
either. 26 frontend and 122 backend tests pass.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/index.css

@@ -68,6 +68,9 @@
   --ethos-secondary: #B4AA98;
   --ethos-muted: #756C5C;
   --ethos-disabled: #5a5347;
+  /* Mono default (Ethos law 1) — machine values sit a step above `muted` so a
+     count or a duration stays legible without competing with the human label. */
+  --ethos-machine: #9C917D;
 
   /* muzick fingerprint: honey amber */
   --ethos-accent: #EDA24E;
@@ -241,8 +244,27 @@ html { scroll-behavior: smooth; }
 .vibe-aura-spark { width: 4px; height: 4px; animation: vibe-aura-spark 2.1s ease-in-out infinite; }
 .vibe-aura-spark-one { left: -4px; top: 5px; }
 .vibe-aura-spark-two { right: -3px; bottom: 7px; animation-delay: -1s; }
+/* Ambient variant: one soft organic blob of warm light behind the page. The
+   scaled-up creature read as concentric rings at that size, which fought the
+   content instead of sitting behind it. Gradient goes on the sized element —
+   no inset-0 fill layer. */
+@keyframes vibe-aura-drift {
+  from { transform: scale(var(--vibe-scale)) translate3d(-2%, -1%, 0) rotate(-4deg); }
+  to   { transform: scale(calc(var(--vibe-scale) * 1.12)) translate3d(3%, 2%, 0) rotate(5deg); }
+}
+.vibe-aura-blob {
+  border-radius: 46% 54% 62% 38% / 55% 43% 57% 45%;
+  background:
+    radial-gradient(closest-side at 40% 36%, hsl(var(--vibe-hue) 92% 60% / .55), transparent 72%),
+    radial-gradient(closest-side at 66% 64%, hsl(calc(var(--vibe-hue) + 28) 86% 52% / .4), transparent 74%);
+  filter: blur(44px);
+  animation: vibe-aura-drift var(--vibe-orbit) ease-in-out infinite alternate;
+}
+@media (min-width: 640px) {
+  .vibe-aura-blob { filter: blur(72px); }
+}
 @media (prefers-reduced-motion: reduce) {
-  .vibe-aura-halo, .vibe-aura-core, .vibe-aura-orbit, .vibe-aura-spark { animation: none; }
+  .vibe-aura-halo, .vibe-aura-core, .vibe-aura-orbit, .vibe-aura-spark, .vibe-aura-blob { animation: none; }
 }
 
 /* ── Component base classes ────────────────────────────────────────────────── */
@@ -263,6 +285,25 @@ html { scroll-behavior: smooth; }
   border-color: color-mix(in srgb, var(--ethos-accent) 40%, transparent);
 }
 
+/* Track list — one dense, hairline-separated column everywhere a list of tracks
+   appears. Replaces the per-page `space-y-1` around bordered row cards, which
+   cost 90px per track and fit only 7 rows on a 900px screen. */
+.track-list > * + * {
+  border-top: 1px solid color-mix(in srgb, var(--ethos-border) 60%, transparent);
+}
+
+/* Row hover: light falling off to the right, not a filled slab. A flat
+   770px-wide rectangle with a hard right edge is the ugly version, and it also
+   squares off the Vibe timeline's stacked artwork. */
+.track-row:hover {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--ethos-surface1) 85%, transparent) 0%,
+    color-mix(in srgb, var(--ethos-surface1) 40%, transparent) 38%,
+    transparent 78%
+  );
+}
+
 /* Artwork frame */
 .artwork-frame {
   aspect-ratio: 1 / 1;