Different colours and polyphony

keyboard.html

@@ -10,7 +10,7 @@
   <!-- Welcome Header -->
   <div class="welcome-header">
     <h1 class="neon-text">🎹 VIRTUAL MIDI KEYBOARD</h1>
-    <p class="subtitle">Play, record, and export your musical ideas • Two octaves • Multiple instruments • Real-time MIDI monitoring</p>
+    <p class="subtitle">Play chords & melodies • Full polyphony (24 voices) • Record & export • Real-time MIDI monitoring</p>
   </div>
   
   <div id="mainContainer">

static/keyboard.js

@@ -85,32 +85,38 @@ const pressedKeys = new Set();
 
 const instruments = {
   synth: () => new Tone.PolySynth(Tone.Synth, {
+    maxPolyphony: 24,
     oscillator: { type: 'sine' },
     envelope: { attack: 0.005, decay: 0.1, sustain: 0.3, release: 1 }
   }).toDestination(),
   
   piano: () => new Tone.PolySynth(Tone.Synth, {
+    maxPolyphony: 24,
     oscillator: { type: 'triangle' },
     envelope: { attack: 0.001, decay: 0.2, sustain: 0.1, release: 2 }
   }).toDestination(),
   
   organ: () => new Tone.PolySynth(Tone.Synth, {
+    maxPolyphony: 24,
     oscillator: { type: 'sine4' },
     envelope: { attack: 0.001, decay: 0, sustain: 1, release: 0.1 }
   }).toDestination(),
   
   bass: () => new Tone.PolySynth(Tone.Synth, {
+    maxPolyphony: 24,
     oscillator: { type: 'sawtooth' },
     envelope: { attack: 0.01, decay: 0.1, sustain: 0.4, release: 1.5 },
     filter: { Q: 2, type: 'lowpass', rolloff: -12 }
   }).toDestination(),
   
   pluck: () => new Tone.PolySynth(Tone.Synth, {
+    maxPolyphony: 24,
     oscillator: { type: 'triangle' },
     envelope: { attack: 0.001, decay: 0.3, sustain: 0, release: 0.3 }
   }).toDestination(),
   
   fm: () => new Tone.PolySynth(Tone.FMSynth, {
+    maxPolyphony: 24,
     harmonicity: 3,
     modulationIndex: 10,
     envelope: { attack: 0.01, decay: 0.2, sustain: 0.2, release: 1 }
@@ -140,7 +146,7 @@ function buildKeyboard() {
       keyEl.dataset.midi = midiNote;
       
       const shortcut = keyShortcuts[midiNote] || '';
-      const shortcutHtml = shortcut ? `<div style="font-size:10px;opacity:0.5;">${shortcut}</div>` : '';
+      const shortcutHtml = shortcut ? `<div class="shortcut-hint">${shortcut}</div>` : '';
       keyEl.innerHTML = `<div style="padding-bottom:6px;font-size:11px">${shortcutHtml}${k.name}${octaveNum}</div>`;
       
       keyboardEl.appendChild(keyEl);
@@ -421,7 +427,12 @@ instrumentSelect.addEventListener('change', () => {
 });
 
 keyboardToggle.addEventListener('change', () => {
-  if (!keyboardToggle.checked) {
+  if (keyboardToggle.checked) {
+    // Show keyboard shortcuts
+    keyboardEl.classList.add('shortcuts-visible');
+  } else {
+    // Hide keyboard shortcuts
+    keyboardEl.classList.remove('shortcuts-visible');
     // Release all currently pressed keyboard keys
     pressedKeys.forEach(key => {
       const midiNote = keyMap[key];

static/styles.css

@@ -91,6 +91,30 @@ body {
   box-shadow: 
     0 4px 8px rgba(0, 0, 0, 0.3),
     inset 0 -2px 5px rgba(0, 0, 0, 0.1);
+  color: #2a0050;
+  font-weight: bold;
+}
+
+.key .shortcut-hint {
+  font-size: 10px;
+  opacity: 0;
+  color: #5a00cc;
+  font-weight: bold;
+  text-shadow: 0 0 2px rgba(90, 0, 204, 0.3);
+  transition: opacity 0.2s ease;
+}
+
+.key.black {
+  color: #00ffff;
+}
+
+.key.black .shortcut-hint {
+  color: #00ffff;
+  text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
+}
+
+.shortcuts-visible .key .shortcut-hint {
+  opacity: 1;
 }
 
 .key:hover {