Items-list sparklines, retro CSS, pinned tooling, deploy docs

- Bulk-load recent price points per item and render a sparkline in
  the items list (new LoadRecentPriceHistory query avoids N+1).
- Add retro.css visual layer and refreshed login/items/layout styling.
- Swap the logo from webp to avif.
- Pin htmx/Chart.js/Tailwind/templ versions in the Makefile with
  vendor / tools / update-deps targets; README documents the
  dependency-bump flow and the hardened systemd deploy.

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

static/css/retro.css

@@ -0,0 +1,118 @@
+/* retro.css — optional "retro-arcade identity" layer.
+ *
+ * Entirely additive. To revert, delete this file and remove its <link> tag
+ * from templates/layout.templ. Nothing else depends on it.
+ *
+ * What this adds:
+ *   1. Two independently-animated aurora blobs that drift across the
+ *      viewport on different paths — the real "shifting light" feel,
+ *      not a synchronized slide.
+ *   2. Dot-grid overlay over the whole viewport.
+ *   3. Heavier display headings with a soft accent glow.
+ *
+ * Both blobs live on html pseudo-elements at z-index -2 / -1, sitting
+ * behind everything else so card glassiness still reads on top.
+ */
+
+body {
+  /* Let the html-level aurora show through. app.css set a solid blue here;
+     dropping it here unlocks the gradient. Removing retro.css restores the
+     original solid background automatically. */
+  background: transparent;
+}
+
+html {
+  background-color: var(--bg);
+  /* Static dot-grid baked into the root background so the two pseudo-element
+     slots stay free for the animated blobs. */
+  background-image: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.045) 1px,
+    transparent 1px
+  );
+  background-size: 26px 26px;
+  background-attachment: fixed;
+}
+
+/* Two aurora blobs animated with seven waypoints each (no `alternate`, so
+   the second half doesn't mirror the first) on incommensurate periods —
+   the two cycles drift in and out of phase, so the eye never locks onto a
+   repeating pattern even though each blob is technically on a loop.
+   Opacity also wobbles so the lights "breathe" instead of just sliding. */
+
+html::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  pointer-events: none;
+  background: radial-gradient(
+    closest-side,
+    rgba(0, 164, 228, 0.60),
+    rgba(0, 164, 228, 0.0) 70%
+  );
+  width: 70vmax;
+  height: 70vmax;
+  border-radius: 50%;
+  filter: blur(60px);
+  /* Centered base; keyframes drive all motion from here. */
+  top: 50%; left: 50%;
+  margin-top: -35vmax; margin-left: -35vmax;
+  animation: v-retro-drift-a 41s cubic-bezier(.6,.1,.4,.9) infinite;
+  will-change: transform, opacity;
+}
+
+html::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  pointer-events: none;
+  background: radial-gradient(
+    closest-side,
+    rgba(245, 196, 0, 0.50),
+    rgba(245, 196, 0, 0.0) 70%
+  );
+  width: 55vmax;
+  height: 55vmax;
+  border-radius: 50%;
+  filter: blur(70px);
+  top: 50%; left: 50%;
+  margin-top: -27.5vmax; margin-left: -27.5vmax;
+  animation: v-retro-drift-b 29s cubic-bezier(.5,.2,.3,.8) infinite;
+  will-change: transform, opacity;
+}
+
+@keyframes v-retro-drift-a {
+  0%   { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
+  14%  { transform: translate3d(  5vw, -28vh, 0) scale(1.18); opacity: 1.00; }
+  29%  { transform: translate3d( 32vw, -10vh, 0) scale(0.92); opacity: 0.75; }
+  43%  { transform: translate3d( 18vw,  22vh, 0) scale(1.10); opacity: 0.95; }
+  58%  { transform: translate3d(-15vw,  30vh, 0) scale(1.05); opacity: 0.80; }
+  72%  { transform: translate3d(-38vw,   8vh, 0) scale(0.95); opacity: 1.00; }
+  86%  { transform: translate3d(-20vw, -12vh, 0) scale(1.12); opacity: 0.90; }
+  100% { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
+}
+
+@keyframes v-retro-drift-b {
+  0%   { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
+  17%  { transform: translate3d(  0vw, -10vh, 0) scale(1.20); opacity: 0.95; }
+  33%  { transform: translate3d(-30vw,   8vh, 0) scale(0.90); opacity: 0.80; }
+  48%  { transform: translate3d(-12vw,  28vh, 0) scale(1.10); opacity: 1.00; }
+  64%  { transform: translate3d( 22vw,  18vh, 0) scale(0.95); opacity: 0.75; }
+  80%  { transform: translate3d( 36vw,  -2vh, 0) scale(1.15); opacity: 0.90; }
+  100% { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
+}
+
+/* Display headings: heavier, slightly tighter, with an accent glow that ties
+   into the card border gradient. Class-free selectors so existing Tailwind
+   utilities (text-3xl etc.) stack on top untouched. */
+h1, h2 {
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  text-shadow: 0 2px 14px rgba(0, 164, 228, 0.30);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html::before, html::after { animation: none; }
+}