Integrate whynot-design into Economic Observatory UI

Vendor whynot-design Layer 1 (tokens, CSS) and Layer 2 (<wn-*>
components) via scripts/sync-whynot-design.sh with a pinned ref.
Migrate the observatory shell to canonical web components, keep
observatory-specific layout in styles.css, and add vendor integrity
tests plus correct JS MIME types on the dev server.

projects/coulomb-pricing/ui/vendor/whynot-design/tokens/spacing.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "spacing": {
+    "1":  { "value": "4px",   "type": "dimension" },
+    "2":  { "value": "8px",   "type": "dimension" },
+    "3":  { "value": "12px",  "type": "dimension" },
+    "4":  { "value": "16px",  "type": "dimension" },
+    "5":  { "value": "24px",  "type": "dimension" },
+    "6":  { "value": "32px",  "type": "dimension" },
+    "7":  { "value": "48px",  "type": "dimension" },
+    "8":  { "value": "64px",  "type": "dimension" },
+    "9":  { "value": "96px",  "type": "dimension" },
+    "10": { "value": "128px", "type": "dimension" }
+  },
+  "radius": {
+    "0":    { "value": "0px",   "type": "dimension" },
+    "1":    { "value": "2px",   "type": "dimension" },
+    "2":    { "value": "4px",   "type": "dimension" },
+    "3":    { "value": "8px",   "type": "dimension" },
+    "pill": { "value": "999px", "type": "dimension" }
+  },
+  "shadow": {
+    "0": { "value": "none",                                "type": "shadow" },
+    "1": { "value": "0 1px 0 #E5E5E2",                     "type": "shadow" },
+    "2": { "value": "0 1px 0 #C9C9C5",                     "type": "shadow" },
+    "3": { "value": "0 4px 12px -6px rgba(10,10,10,0.10)", "type": "shadow", "comment": "Floating elements only." }
+  }
+}