feat: present theme switch as a segmented control

Join the two theme options into a single rounded container with the active
segment filled and a divider between them, replacing the two separate pills.
Markup and aria-pressed behaviour are unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

styles.css

@@ -63,10 +63,13 @@ body {
   padding: 1.5rem;
 }
 
+/* Segmented control: both options joined in one rounded container,
+   with the active segment filled. */
 .theme-toggle {
-  display: flex;
+  display: inline-flex;
-  gap: 0.5rem;
+  border: 2px solid var(--button-bg);
-  border: none;
+  border-radius: 999px;
+  overflow: hidden;
   margin: 0;
   padding: 0;
 }
@@ -75,19 +78,22 @@ body {
   font-family: inherit;
   font-size: 0.9rem;
   font-weight: 600;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 1.1rem;
-  border: 2px solid var(--button-bg);
+  border: none;
-  border-radius: 999px;
   background: transparent;
   color: var(--text);
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease;
 }
 
+/* Divider between the two segments. */
+.theme-button + .theme-button {
+  border-left: 2px solid var(--button-bg);
+}
+
 .theme-button[aria-pressed="true"] {
   background: var(--button-active-bg);
   color: var(--button-active-text);
-  border-color: var(--button-active-bg);
 }
 
 .stage {