Restyle UI with a channel-strip console look and brand icon

Adds a pink/purple/blue SVG brand mark (favicon + header) and reworks
the visual language around the app's actual interaction - fader-driven
device control - via LED-style indicators, mono instrument readouts,
hairline-framed cards, console-tab nav, and an oscilloscope-style
session timeline. Leaves components/ui/* untouched, restyling only via
design tokens and the app's own composed components. Also fixes a
proxy.ts matcher gap that was gating /icon.svg behind auth.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb

components/control/ActuatorSlider.tsx

@@ -12,20 +12,17 @@ interface ActuatorSliderProps {
 
 export function ActuatorSlider({ actuator, value, transmitting, onChange }: ActuatorSliderProps) {
   return (
-    <div className="flex flex-col gap-1.5">
+    <div className="flex flex-col gap-2 rounded-md border border-border/70 bg-background/40 p-3">
       <div className="flex items-center justify-between text-xs">
-        <span className="font-medium text-foreground">{actuator.descriptor}</span>
-        <span className={transmitting ? "bp-gradient-text font-semibold" : "text-muted-foreground"}>
+        <span className="flex items-center gap-2 font-medium text-foreground">
+          <span className="bp-led" data-on={transmitting} aria-hidden />
+          {actuator.descriptor}
+        </span>
+        <span className="bp-readout text-sm text-muted-foreground data-[on=true]:text-primary" data-on={transmitting}>
           {Math.round(value * 100)}%
         </span>
       </div>
-      <Slider
-        value={[value * 100]}
-        min={0}
-        max={100}
-        step={1}
-        onValueChange={([v]) => onChange(v / 100)}
-      />
+      <Slider value={[value * 100]} min={0} max={100} step={1} onValueChange={([v]) => onChange(v / 100)} />
     </div>
   );
 }

components/control/DeviceCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { ActuatorSlider } from "./ActuatorSlider";
 import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";
@@ -22,13 +22,14 @@ export function DeviceCard({
 }: DeviceCardProps) {
   return (
     <Card className="bp-glass">
-      <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle>{device.displayName ?? device.name}</CardTitle>
+      <CardHeader className="flex flex-row items-center justify-between pb-3">
+        <span className="text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
         <Button variant="outline" size="sm" onClick={onStop}>
           Stop
         </Button>
       </CardHeader>
-      <CardContent className="flex flex-col gap-4">
+      <div className="bp-hairline mx-4" />
+      <CardContent className="flex flex-col gap-3 pt-3">
         {device.actuators.length === 0 ? (
           <p className="text-sm text-muted-foreground">No controllable actuators reported.</p>
         ) : (