Article scope: render an actual sliding toggle, not an ASCII-labelled button

Previous commit took the user's (O-) / (-O) shorthand literally and put
those glyphs as the button label. They were describing the visual states
of a real toggle switch, not text to display.

Now: pill-shaped track with a sliding circular thumb, "default" and
"overwrite" labels flanking it (the active side brightens). The button
carries role="switch" + aria-checked for accessibility. Click anywhere
on the track to flip and mark the score dirty.

static/style.css

@@ -355,3 +355,46 @@
     white-space: pre-wrap;
     font-family: monospace;
 }
+
+/* Two-state toggle (scope: defaults / overwrites). The label preceding the
+   switch tells the user what the two ends mean; the thumb position shows
+   which is active. Click anywhere on the track to flip. */
+.se-toggle {
+    position: relative;
+    width: 2.2rem;
+    height: 1.1rem;
+    flex-shrink: 0;
+    border: 1px solid #555;
+    border-radius: 0.55rem;
+    background: #2a2a2a;
+    cursor: pointer;
+    padding: 0;
+}
+.se-toggle::after {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 0.85rem;
+    height: 0.85rem;
+    border-radius: 50%;
+    background: #999;
+    transition: transform 0.12s ease, background 0.12s ease;
+}
+.se-toggle[aria-checked="true"] {
+    background: #2d4a2d;
+    border-color: #4a7a4a;
+}
+.se-toggle[aria-checked="true"]::after {
+    transform: translateX(1.1rem);
+    background: #b0e0b0;
+}
+.se-toggle-label {
+    font-size: 0.7rem;
+    color: #888;
+    user-select: none;
+    min-width: 4em;
+}
+.se-toggle-label.active {
+    color: #d8d8d8;
+}