feat(ui): warm-graphite design system and particle background

Reworks the console's look away from generic dark-mode defaults: the
neutral ramp carries a faint violet cast, and the signal palette now
distinguishes connection topology by colour — mint for live agents,
iris for direct connections, copper for consent-required machines.

Type contrast comes from pairing the platform mono against the platform
sans rather than a webfont, since the box this runs on has no internet.

particles.js draws a proximity-linked node field: full strength on the
login and public pages, frozen static in the console, and entirely
absent from the viewer, where every frame belongs to the remote desktop.
It caps DPR at 2, scales node count to viewport area, throttles to 30fps,
cancels rAF when the tab is hidden, and honours prefers-reduced-motion.

app.js and viewer.js are unchanged; the particle layer mounts itself and
tracks the console via MutationObserver on #app.

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

public/styles.css

@@ -100,8 +100,10 @@ body:not(.viewer-body)::after {
     radial-gradient(90% 60% at 50% 108%, rgba(233,160,92,.045), transparent 65%);
 }
 
-/* Everything real sits above the ambient layers. */
-#login, #app, #modal-root, .center-shell, #toast { position: relative; z-index: 1; }
+/* Everything real sits above the ambient layers. #modal-root and #toast are
+   deliberately left out: their children are fixed with their own z-index and
+   must stack against the root, not inside a container's stacking context. */
+#login, #app, .center-shell { position: relative; z-index: 1; }
 
 a {
   color: var(--mint);
@@ -215,7 +217,8 @@ input, select, textarea {
   color: var(--text);
   transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
 }
-input::placeholder, textarea::placeholder { color: #635e73; }
+/* --text-faint keeps placeholders at ~5:1 on the input well, not decorative mush */
+input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }
 input:hover:not(:focus), select:hover:not(:focus) { border-color: var(--line-strong); }
 input:focus, select:focus, textarea:focus {
   outline: none;
@@ -544,6 +547,8 @@ main {
   border: 1px solid var(--line);
   border-radius: 20px;
 }
+/* app.js blanks this when there are no machines — don't leave an empty pill */
+#machines-count:empty { display: none; }
 
 /* ------------------------------------------------------------------ cards */