Honor user's preference for light/dark mode.

style.css

@@ -73,6 +73,22 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
   --code-text: #f5eee5;
   --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :root[data-theme="auto"] {
+    color-scheme: dark;
+    --bg: #171615;
+    --surface: #22201e;
+    --text: #eee8e1;
+    --muted: #b9afa5;
+    --line: #4a4540;
+    --accent: #f07a3c;
+    --accent-hover: #ff9d6a;
+    --code-bg: #0e0e0d;
+    --code-text: #f5eee5;
+    --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+  }
+}
 * {
   box-sizing: border-box;
 }
@@ -183,7 +199,7 @@ button {
   margin: 0.1rem 0 0;
   color: var(--muted);
   font-family: "Berkeley Mono", monospace;
-  font-size: 0.64rem;
+  font-size: 1rem;
   letter-spacing: 0.07em;
 }
 .primary-menu {
@@ -194,7 +210,7 @@ button {
   padding: 0;
   list-style: none;
   font-family: "Berkeley Mono", monospace;
-  font-size: 0.7rem;
+  font-size: 1rem;
   letter-spacing: 0.04em;
 }
 .primary-menu a {
@@ -742,6 +758,14 @@ h4 {
 .primary-menu > li.menu-item-has-children > a::after {
   vertical-align: -0.2em;
 }
+body.admin-bar .site-header {
+  top: 32px;
+}
+@media (max-width: 782px) {
+  body.admin-bar .site-header {
+    top: 46px;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,