Improve web UI styling and accessibility

Piano keyboard:
- Add 3D beveled black keys with gradient highlights and shadows
- Fix black key positioning (right-aligned to white keys)
- Improve white key styling with subtle shadows

Header:
- Style GitHub link as prominent button with icon
- Add aria-hidden and focusable attributes to SVG

Accessibility:
- Add :focus-visible outlines for keyboard navigation
- Add prefers-reduced-motion media query
- Fix universal reset to include pseudo-elements

Author: jserv

Makefile

@@ -97,7 +97,7 @@ distclean: clean wasm-clean
 # Local development server
 serve: wasm
 	@echo "Starting local server at http://127.0.0.1:8080"
-	@cd $(WASM_DIR) && python3 -m http.server 8080
+	@cd $(WASM_DIR) && python3 -m http.server 8080 --bind 127.0.0.1
 
 # List available melodies
 list-melodies:

web/index.html

@@ -12,7 +12,10 @@
             <h1>PicoSynth</h1>
             <span class="subtitle">Lightweight software synthesizer</span>
         </div>
-        <a href="https://github.com/sysprog21/picosynth" target="_blank" rel="noreferrer noopener">GitHub</a>
+        <a href="https://github.com/sysprog21/picosynth" target="_blank" rel="noreferrer noopener" class="github-link">
+            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+            GitHub
+        </a>
     </header>
 
     <main>

web/style.css

@@ -1,4 +1,4 @@
-* { box-sizing: border-box; margin: 0; padding: 0; }
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
     --bg: #1a1a2e;
@@ -37,6 +37,38 @@ header .subtitle {
     font-size: 0.9rem;
 }
 
+header .github-link {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--border);
+    color: var(--text);
+    text-decoration: none;
+    padding: 8px 14px;
+    border-radius: 6px;
+    border: 1px solid var(--primary);
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+}
+
+header .github-link:focus-visible {
+    outline: 2px solid var(--success);
+    outline-offset: 2px;
+}
+
+header .github-link:hover {
+    background: var(--primary);
+    color: var(--bg);
+}
+
+header .github-link svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+}
+
 main {
     max-width: 900px;
     margin: 0 auto;
@@ -61,29 +93,74 @@ main {
 
 .key {
     cursor: pointer;
-    transition: background 0.05s;
+    transition: background-color 0.05s;
     user-select: none;
 }
 
+.key:focus-visible {
+    outline: 2px solid var(--success);
+    outline-offset: 2px;
+    z-index: 10;
+}
+
 .key.white {
     width: 40px;
     height: 100%;
-    background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
-    border: 1px solid #999;
+    background: linear-gradient(180deg, #fff 0%, #f5f5f5 85%, #e0e0e0 100%);
+    border: 1px solid #aaa;
     border-radius: 0 0 5px 5px;
     position: relative;
     z-index: 1;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
 .key.black {
     width: 24px;
-    height: 60%;
-    background: linear-gradient(180deg, #444 0%, #111 100%);
+    height: 58%;
+    background: linear-gradient(180deg,
+        #555 0%,
+        #444 2%,
+        #333 5%,
+        #222 20%,
+        #1a1a1a 80%,
+        #111 95%,
+        #080808 100%);
     border: 1px solid #000;
+    border-top: none;
     border-radius: 0 0 4px 4px;
     position: absolute;
     z-index: 2;
-    margin-left: -12px;
+    left: auto;
+    right: -12px;
+    box-shadow:
+        -1px 0 0 #000,
+        1px 0 0 #000,
+        0 0 3px 1px rgba(0,0,0,0.5),
+        0 4px 6px rgba(0,0,0,0.6),
+        inset 0 -1px 2px rgba(255,255,255,0.05),
+        inset 0 1px 0 rgba(80,80,80,0.3);
+}
+
+.key.black::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 1px;
+    right: 1px;
+    height: 6px;
+    background: linear-gradient(180deg, #777 0%, #555 40%, #333 100%);
+    border-radius: 1px 1px 3px 3px;
+}
+
+.key.black::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 4px;
+    right: 4px;
+    height: 3px;
+    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
+    border-radius: 2px;
 }
 
 .key.white.active, .key.white:active {
@@ -193,7 +270,7 @@ button {
     padding: 8px 14px;
     font-size: 0.85rem;
     cursor: pointer;
-    transition: all 0.15s;
+    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
     display: inline-flex;
     align-items: center;
     gap: 6px;
@@ -252,3 +329,11 @@ button:disabled {
 #status.ready { color: var(--success); }
 #status.error { color: #ff6b6b; }
 #status.playing { color: var(--primary); }
+
+/* Accessibility: Reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        transition: none !important;
+        animation: none !important;
+    }
+}