feat(03-03): Rams shell stylesheet + MapLibre v6 bootstrap, position marker, follow controller

- shell.css: token-only chrome (zero hex, zero transition/animation), dark-slot activation, machined geometry (8px lamp/notch, 40x40 plate, data-map=absent field)
- map.ts: setWorkerUrl + ?worker&url, build-time-inlined liberty-rams.json, GPUInitializationError -> null gate, RAMS-BASEMAP-READY signal
- marker.ts: dot + accuracy circle (100m display cap) + heading cone hidden on null, DOM Marker SVG namespace discipline
- follow.ts: 96px camera padding, 400ms flyTo, user-gesture-only free mode
- UI-SPEC: planner amendments verified (Pitfall 4 present; Open Question 1 appended)

web/src/shell.css

@@ -0,0 +1,86 @@
+/*
+ * shell.css — the Rams chrome (UI-SPEC §Shell Layout & Register Bands).
+ * -----------------------------------------------------------------------
+ * Every value is a token reference (var(--color-*) / var(--spacing-*) /
+ * var(--type-*)); the only literals are the machined-border geometry the
+ * UI-SPEC enumerates (1px/2px rules, 8px lamp/gantry/notch, 40x40 plate,
+ -2px hit slop, 320px card max-width, 20px dot as SVG r=10). Zero
+ * roundedness (the one `border-radius: 0` reset pins MapLibre's chrome),
+ * zero transition/animation — state changes are instant hard swaps.
+ *
+ * D-10 / PX-02: NO MapLibre rule participates in theme slots. The map
+ * style is Rams-constant; only --shell-bg / --shell-on-surface re-slot
+ * behind [data-tg-theme].
+ */
+
+/* tokens.css wins; mockups lose. Value discipline per theme/src/components.css lines 9-15. */
+@import "@araharah/theme/dist/rams.css";
+
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body {
+  background: var(--shell-bg);
+  color: var(--shell-on-surface);
+  font: var(--type-body-md);
+  overflow: hidden;
+}
+
+/* PX-02 dark-slot activation (extends theme.css's media-query default) */
+[data-tg-theme="light"] { --shell-bg: var(--color-surface); --shell-on-surface: var(--color-on-surface); }
+[data-tg-theme="dark"]  { --shell-bg: var(--color-surface-dark); --shell-on-surface: var(--color-inverse-on-surface); }
+[data-tg-theme="dark"] .card { background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); border-color: var(--color-inverse-on-surface); }
+[data-tg-theme="dark"] .card-header { border-bottom-color: var(--color-inverse-on-surface); color: var(--color-inverse-on-surface); }
+/* NO MapLibre rule here, by design (D-10 / RESEARCH Pitfall 7). */
+
+/* Research Open Question 1 — WebGL2 absent: shell renders over a Rams-tinted field */
+body[data-map="absent"] main { background: var(--color-surface-dim); }
+
+/* map register: full-bleed, the dominant surface */
+main { position: fixed; inset: 0; }
+#map { position: absolute; inset: 0; }
+.maplibregl-ctrl-attrib { border-radius: 0; background: var(--color-matte-black); color: var(--color-pure-white); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); text-transform: uppercase; }
+
+/* top register: status strip */
+.strip {
+  position: absolute; top: calc(var(--safe-top, 0px) + var(--spacing-space-sm)); left: 0; right: 0;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--spacing-space-sm) var(--spacing-space-md);
+  min-height: 32px;
+  background: var(--color-matte-black); color: var(--color-inverse-on-surface);
+  font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); text-transform: uppercase;
+}
+.strip .lamp { width: 8px; height: 8px; border: 1px solid var(--color-pure-white); }
+.strip .lamp[data-state="acquiring"], .strip .lamp[data-state="validating"], .strip .lamp[data-state="awaiting"] { background: var(--color-signal-orange); }
+.strip .lamp[data-state="live"] { background: var(--color-olive-green); }
+.strip .lamp[data-state="lost"], .strip .lamp[data-state="denied"] { background: var(--color-functional-red); }
+.strip .telemetry { font: var(--type-label-sm); }
+
+/* center register: boot / denied / lost card */
+.card-stack { position: absolute; left: var(--spacing-margin); right: var(--spacing-margin); top: 50%; transform: translateY(-50%); max-width: 320px; margin-inline: auto; }
+.card .gantry { width: 8px; height: 8px; border: 1px solid var(--color-matte-black); }
+.card .gantry[data-fill="on"] { background: var(--color-signal-orange); }
+.card-actions { display: flex; gap: var(--spacing-space-sm); padding-top: var(--spacing-space-sm); }
+
+/* bottom register: recenter control (40x40 plate, >=44x44 hit target) */
+.recenter {
+  position: absolute; right: var(--spacing-margin); bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm));
+  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0;
+  background: var(--color-matte-black); color: var(--color-pure-white);
+  display: flex; align-items: center; justify-content: center;
+}
+.recenter::after { content: ""; position: absolute; inset: -2px; }
+.recenter .notch { width: 8px; height: 8px; background: var(--color-signal-orange); }
+.recenter[data-follow="free"] .notch { display: none; }
+/* UI-SPEC §Follow/Recenter Control, third notch state: live-but-LOST (no fix).
+   soft-beige, NOT red — red is reserved for the strip/degraded registers; the notch
+   reads "unlocked, not error" (RESEARCH Pitfall 8 orange discipline). */
+.recenter[data-fix="lost"] .notch { background: var(--color-soft-beige); }
+.recenter:active { background: var(--color-signal-orange); color: var(--color-matte-black); }
+
+/* position marker (DOM Marker children) */
+.pos-accuracy { fill: var(--color-matte-black); fill-opacity: 0.06; stroke: var(--color-matte-black); stroke-opacity: 0.30; stroke-width: 1; }
+.pos-dot { fill: var(--color-matte-black); }
+.pos-cone { fill: var(--color-signal-orange); }
+.pos-group[data-stale="true"] { opacity: 0.4; }
+
+/* No CSS transition or animation anywhere — state changes are instant hard swaps. */