Fix black key click activating white key in piano UI

This removes CSS :active pseudo-class which propagates to parent
elements, causing white keys to highlight when clicking nested black
keys. It uses JavaScript-controlled .active class exclusively for key
states.

Author: jserv

web/app.js

@@ -112,8 +112,12 @@ function buildKeyboard() {
 
     /* Pointer events for mouse and touch */
     kbd.addEventListener('pointerdown', (e) => {
-        const key = e.target.closest('.key');
+        const target = e.target;
+        /* Black keys take priority - check if clicked element is black key */
+        const blackKey = target.classList.contains('black') ? target : null;
+        const key = blackKey || target.closest('.key');
         if (!key) return;
+        e.stopPropagation();
         kbd.setPointerCapture(e.pointerId);
         playNote(parseInt(key.dataset.midi));
     });

web/style.css

@@ -163,11 +163,11 @@ main {
     border-radius: 2px;
 }
 
-.key.white.active, .key.white:active {
+.key.white.active {
     background: var(--primary);
 }
 
-.key.black.active, .key.black:active {
+.key.black.active {
     background: var(--primary);
 }