nook: show the full feature set on the landing page

The landing page sold eight features from around 0.6 and summed up the
rest in one line, while 0.6–0.10 shipped most of the island's modules. It
also said twelve agents (Muse made thirteen) and marked phone approvals
"coming soon" although the iPhone companion is in TestFlight beta.

Adds live demos for terminal replies, the volume mixer, Capture with its
Wings, and floating actions; a bento of module tiles behind a two-way
feature marquee; and an iPhone/Watch beta section whose request form
posts the same email-only report the app's Settings > Phone card sends.
The approval flow, remote sessions and setup, timer, temperatures and
Capture mocks are rebuilt from the app's own views, so the site shows
what the island actually draws.

Tests: report.test.ts pins the landing page's beta request against the
/report schema (red when the schema demands a machine snapshot); nook and
subdomain suites pass.

NOOK-334

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

src/app.css

@@ -755,3 +755,114 @@ a.hover-underline-animation:hover::after {
   0%, 100% { opacity: 1; }
   50%      { opacity: 0.35; }
 }
+
+/* ── Nook landing: newer demos ─────────────────────────────────── */
+.nook-caret {
+  animation: nook-pulse 0.8s steps(2, jump-none) infinite;
+}
+
+/* Live signal inside a mixer fader */
+.nook-meter {
+  transform-origin: left center;
+  animation: nook-meter 0.6s ease-in-out infinite alternate;
+}
+@keyframes nook-meter {
+  0%   { transform: scaleX(0.35); }
+  40%  { transform: scaleX(0.8); }
+  100% { transform: scaleX(0.55); }
+}
+
+/* Waveform slot bars */
+.nook-wave {
+  height: 100%;
+  transform-origin: center;
+  animation: nook-wave 0.8s ease-in-out infinite alternate;
+}
+@keyframes nook-wave {
+  0%   { transform: scaleY(0.25); }
+  100% { transform: scaleY(1); }
+}
+
+/* Now Playing progress and artwork sheen */
+.nook-progress {
+  animation: nook-progress 14s linear infinite;
+}
+@keyframes nook-progress {
+  from { width: 8%; }
+  to   { width: 100%; }
+}
+.nook-art {
+  animation: nook-art 9s linear infinite;
+}
+@keyframes nook-art {
+  to { filter: hue-rotate(360deg); }
+}
+
+/* A ringing timer's tape breathes between 35 % and full */
+.nook-tape-ring {
+  animation: nook-tape-ring 0.9s ease-in-out infinite alternate;
+}
+@keyframes nook-tape-ring {
+  from { opacity: 0.35; }
+  to   { opacity: 1; }
+}
+
+/* Keep Awake coffee steam */
+.nook-steam path {
+  animation: nook-steam 1.8s ease-in-out infinite;
+}
+@keyframes nook-steam {
+  0%   { transform: translateY(2px); opacity: 0; }
+  40%  { opacity: 1; }
+  100% { transform: translateY(-4px); opacity: 0; }
+}
+
+/* Two-way feature marquee; edges fade, hover pauses */
+.nook-marquee {
+  overflow: hidden;
+  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+}
+.nook-marquee-track {
+  display: flex;
+  gap: 0.625rem;
+  width: max-content;
+  padding-right: 0.625rem;
+  animation: nook-marquee 60s linear infinite;
+}
+.nook-marquee-track.reverse {
+  animation-direction: reverse;
+}
+.nook-marquee:hover .nook-marquee-track {
+  animation-play-state: paused;
+}
+@keyframes nook-marquee {
+  to { transform: translateX(-50%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nook-meter,
+  .nook-wave,
+  .nook-progress,
+  .nook-art,
+  .nook-tape-ring,
+  .nook-steam path,
+  .nook-caret {
+    animation: none;
+  }
+
+  .nook-marquee {
+    mask-image: none;
+  }
+
+  .nook-marquee-track {
+    animation: none;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: auto;
+    padding: 0 1rem;
+  }
+
+  .nook-marquee-track > [aria-hidden="true"] {
+    display: none;
+  }
+}