Restyle the HUD as an observatory instrument

Replaces the generic rounded dark cards floating over the scene with a
single instrument language: hairline frames cut by accent corner ticks, a
viewport frame that reads the whole screen as one panel, and readouts whose
figures are what the eye lands on.

- styles.css: retune the tokens (deeper void/panel, brighter text/muted so
  every label clears 4.5:1 even over the brightest part of the skybox) and
  add two utilities — `hud-brackets` draws the four corner ticks from eight
  background gradients so no panel pays for them in DOM, `hud-acquire` wipes
  a panel down on mount as its one authored moment (reduced-motion aware).
- Drop Orbitron: every string in this UI is a measurement, an identifier, or
  a catalog label, so one readout face carries the hierarchy through weight,
  size, and tracking — and the HUD paints one font request sooner.
- Search: reticle mark instead of a magnifier, transparent field inside a
  framed shell, results as a dense two-column list with a match count, and
  the previously missing empty state.
- Info panel: return rail, name/class header, and a readout table with
  tabular figures and the unit tinted back off the number.
- Star labels: a hairline leader back to the star they name. The offset moved
  from `translate-*` to a margin because CSS2DRenderer overwrites the inline
  transform every frame, which silently beat the old classes.
- Both top-anchored overlays drop below the search field under `sm` so they
  no longer stack on top of it on a phone, and focus moved from a removed
  outline plus ring to real `focus-visible` outlines.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jxMkwA2rbicdGxHosecYi

src/styles.css

@@ -1,19 +1,20 @@
 /* You can add global styles to this file, and also import other style files */
 @import 'tailwindcss';
 
-/* Design tokens for the sci-fi "HUD" look shared across the app. `--color-*`/`--font-*` names
- * automatically become Tailwind utilities (e.g. `--color-accent` -> `bg-accent`/`text-accent`). */
+/* Design tokens for the "observatory instrument" HUD shared across the app. `--color-*`/`--font-*`
+ * names automatically become Tailwind utilities (e.g. `--color-accent` -> `bg-accent`/`text-accent`).
+ *
+ * One family only: every string in this UI is a measurement, an identifier, or a catalog label, so
+ * the readout face carries the whole hierarchy through weight, size, and tracking. */
 @theme {
-  --font-display: 'Orbitron', 'Segoe UI', sans-serif;
-  --font-body: 'JetBrains Mono', 'Segoe UI', monospace;
+  --font-body: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
 
-  --color-void: #05070d;
-  --color-panel: #0b121f;
+  --color-void: #04060c;
+  --color-panel: #070d16;
   --color-accent: #4dd7ff;
-  --color-accent-dim: #1c4f66;
-  --color-text: #dbe6f3;
-  --color-muted: #7f93ab;
-  --color-border: #2a4a5c;
+  --color-text: #e3ecf7;
+  --color-muted: #90a6bd;
+  --color-border: #24455a;
 }
 
 html,
@@ -26,6 +27,62 @@ body {
   font-family: var(--font-body);
 }
 
+/* The HUD's signature: four corner tick brackets cut into a panel's hairline frame. Drawn as
+ * eight background gradients so any panel (or the viewport frame) picks them up without the
+ * eight extra DOM nodes the same mark would otherwise cost. Override `--hud-tick` per element
+ * (e.g. `[--hud-tick:1.75rem]`) to scale the marks with the surface they frame. */
+@utility hud-brackets {
+  --hud-tick: 0.625rem;
+  --hud-mark: color-mix(in oklab, var(--color-accent) 65%, transparent);
+  background-image:
+    linear-gradient(var(--hud-mark) 0 0), linear-gradient(var(--hud-mark) 0 0),
+    linear-gradient(var(--hud-mark) 0 0), linear-gradient(var(--hud-mark) 0 0),
+    linear-gradient(var(--hud-mark) 0 0), linear-gradient(var(--hud-mark) 0 0),
+    linear-gradient(var(--hud-mark) 0 0), linear-gradient(var(--hud-mark) 0 0);
+  background-repeat: no-repeat;
+  background-size:
+    var(--hud-tick) 1px,
+    1px var(--hud-tick),
+    var(--hud-tick) 1px,
+    1px var(--hud-tick),
+    var(--hud-tick) 1px,
+    1px var(--hud-tick),
+    var(--hud-tick) 1px,
+    1px var(--hud-tick);
+  background-position:
+    left top,
+    left top,
+    right top,
+    right top,
+    left bottom,
+    left bottom,
+    right bottom,
+    right bottom;
+}
+
+/* The one authored moment: a panel doesn't fade in, it acquires — wiping down under an
+ * exponential ease-out the way a readout fills once an instrument locks onto a target. */
+@utility hud-acquire {
+  animation: hud-acquire 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes hud-acquire {
+  from {
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+  to {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hud-acquire {
+    animation-duration: 1ms;
+  }
+}
+
 /* Star name labels rendered by CSS2DRenderer (see StarLabelOverlay). These live outside
  * Angular's view encapsulation as plain DOM nodes, so they're styled with Tailwind utility
  * classes assigned directly in TypeScript rather than a scoped component stylesheet. */