Add light/dark theme switch to all pages

style.css

@@ -8,8 +8,9 @@
   color-scheme: light dark;
 }
 
+/* Dark palette: follows the OS unless the switch pinned a theme (data-theme on <html>). */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme="light"]) {
     --bg: #111;
     --fg: #e6e6e6;
     --muted: #999;
@@ -19,6 +20,20 @@
   }
 }
 
+:root[data-theme="dark"] {
+  --bg: #111;
+  --fg: #e6e6e6;
+  --muted: #999;
+  --line: #333;
+  --code-bg: #1c1c1c;
+  --link: #7ab7ff;
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] { color-scheme: light; }
+
+[hidden] { display: none !important; }
+
 * { box-sizing: border-box; }
 
 body {
@@ -47,6 +62,22 @@ h2 {
 a { color: var(--link); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
+/* Theme switch */
+.topbar { display: flex; justify-content: flex-end; margin: -1.5rem 0 1.5rem; }
+.theme-toggle {
+  padding: .25rem .7rem;
+  background: transparent;
+  color: var(--fg);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: .85rem;
+  line-height: 1.4;
+  cursor: pointer;
+}
+.theme-toggle:hover { border-color: var(--muted); }
+.theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
+
 /* Contact list */
 dl {
   display: grid;