Add a dark theme, default, with a switch in the top bar

Colours move into theme tokens (light values in :root, dark in
[data-theme=dark]); the closing contact band inverts on each theme. The
choice is stored in localStorage and applied by a head script before the
first paint. Voxel covers and image shadows follow the theme.

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

components/topbar.module.css

@@ -7,7 +7,7 @@
 }
 
 .solid {
-  background: rgba(244, 246, 248, 0.86);
+  background: var(--topbar-bg);
   border-bottom-color: var(--line);
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
@@ -48,6 +48,7 @@
 }
 
 .mail {
+  margin-left: -12px;
   padding: 10px 18px;
   border-radius: var(--radius-control);
   background: var(--ink);
@@ -67,3 +68,32 @@
     display: none;
   }
 }
+
+.toggle {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: var(--ink);
+  box-shadow: inset 0 0 0 1px var(--line);
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+
+.toggle:hover {
+  box-shadow: inset 0 0 0 1.5px var(--ink);
+}
+
+.toggle svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}