refactor: consolidate getter functions, event listeners, and polish UI

README.md

@@ -4,7 +4,7 @@ emoji: 🎹
 colorFrom: purple
 colorTo: blue
 sdk: gradio
-sdk_version: 6.5.1
+sdk_version: 5.49.1
 app_file: app.py
 pinned: false
 short_description: Browser-based MIDI keyboard with recording and synthesis
@@ -12,30 +12,9 @@ short_description: Browser-based MIDI keyboard with recording and synthesis
 
 # SYNTHIA
 
-A minimal, responsive browser-based MIDI keyboard. Play live, record performances, and export as MIDI files. 🎹
+Play, record, and let AI continue your musical phrases in real-time. 🎹
 
-This build includes a **Godzilla** engine that can continue a short phrase using the
-Godzilla Piano Transformer.
-
-
-## 🗂️ Project Structure
-
-```
-.
-├── app.py                  # Gradio server & API endpoints
-├── config.py               # Centralized configuration
-├── engines.py              # MIDI processing engines
-├── midi_model.py           # Godzilla model integration
-├── midi.py                 # MIDI file utilities
-├── keyboard.html           # HTML structure
-├── static/
-│   ├── keyboard.js         # Client-side audio (Tone.js)
-│   └── styles.css          # Styling & animations
-├── requirements.txt        # Python dependencies
-└── README.md               # This file
-```
-
-## 🚀 Quick Start
+## � Quick Start
 
 ```bash
 # Install dependencies
@@ -45,30 +24,212 @@ uv pip install -r requirements.txt
 uv run python app.py
 ```
 
-Open **http://127.0.0.1:7861**
+Open **http://127.0.0.1:7860**
 
-## 🎹 Godzilla Engine
+---
 
-Select **Godzilla** in the engine dropdown to generate a short continuation from your
-recorded phrase. The model is downloaded on first use and cached locally.
+## 🏗️ Architecture Overview
 
-Note: the engine filters generated notes to your on-screen keyboard range.
+**SYNTHIA** is a browser-based MIDI keyboard with three main layers:
 
-## 🌐 Deploy to Hugging Face Spaces
+1. **Backend** (Python/Gradio): Configuration, MIDI engines, model loading
+2. **Frontend** (JavaScript/Tone.js): Audio synthesis, keyboard rendering, event handling
+3. **Communication**: Gradio bridge for sending recorded MIDI to backend for processing
+
+### Data Flow
 
-```bash
-git remote add hf git@hf.co:spaces/YOUR_USERNAME/synthia
-git push hf main
 ```
+User plays keyboard
+    ↓
+JavaScript captures MIDI events → records to array
+    ↓
+User clicks "Play/Process"
+    ↓
+Backend engine processes recorded events
+    ↓
+Result returned as MIDI events
+    ↓
+JavaScript plays result through Tone.js synth
+```
+
+---
+
+## 📂 File Responsibilities
+
+### Backend Files
+
+| File | Purpose |
+|------|---------|
+| **app.py** | Gradio app setup, UI layout, instrument definitions, API endpoints |
+| **config.py** | Global settings (audio parameters, model paths, inference defaults) |
+| **engines.py** | Three MIDI processing engines: `parrot` (repeat), `reverse_parrot` (reverse), `godzilla_continue` (AI generation) |
+| **midi_model.py** | Godzilla model loading, tokenization, inference |
+| **midi.py** | MIDI file utilities (encode/decode, cleanup, utilities) |
+
+### Frontend Files
+
+| File | Purpose |
+|------|---------|
+| **keyboard.html** | DOM structure (keyboard grid, controls, terminal) |
+| **keyboard.js** | Main application logic: keyboard rendering, audio synthesis (Tone.js), recording, UI event binding, engine communication |
+| **styles.css** | Styling and animations |
+
+### Configuration & Dependencies
+
+| File | Purpose |
+|------|---------|
+| **requirements.txt** | Python dependencies |
+| **pyproject.toml** | Project metadata |
+
+---
 
-## 🔧 Technology
+## 🎹 Core Functionality
+
+### Keyboard Controls
+- **Click keys** or **press computer keys** to play notes
+- **Record button**: Capture MIDI events from keyboard
+- **Play button**: Play back recorded events
+- **Save button**: Download recording as .mid file
+- **Game mode**: Take turns with AI completing phrases
+
+### MIDI Engines
+1. **Parrot**: Repeats your exact melody
+2. **Reverse Parrot**: Plays melody backward
+3. **Godzilla**: AI generates musical continuations using transformer model
+
+### UI Features
+- **Engine selector**: Choose processing method
+- **Style selector**: AI style (melodic, energetic, ornate, etc.)
+- **Response mode**: Control AI generation behavior
+- **Runtime selector**: GPU (fast) vs CPU (reliable)
+- **Instrument selector**: Change synth sound
+- **AI voice selector**: Change AI synth sound
+- **Terminal**: Real-time event logging
+
+---
+
+## 🔧 How to Add New Functionality
+
+### Adding a New MIDI Engine
+
+1. **In `engines.py`**, add a new function:
+   ```python
+   def my_new_engine(events, options):
+       # Process MIDI events
+       return processed_events
+   ```
+
+2. **In `app.py`**, register the engine in `process_events()`:
+   ```python
+   elif engine == 'my_engine':
+       result_events = my_new_engine(events, options)
+   ```
+
+3. **In `app.py`**, add to engine dropdown:
+   ```python
+   with gr.Group(label="Engine"):
+       engine = gr.Dropdown(
+           choices=['parrot', 'reverse_parrot', 'godzilla_continue', 'my_engine'],
+           # ...
+       )
+   ```
+
+4. **In `keyboard.js`**, add tooltip (line ~215 in `populateEngineSelect()`):
+   ```javascript
+   const engineTooltips = {
+       'my_engine': 'Description of what your engine does'
+   };
+   ```
+
+### Adding a New Control Selector
+
+1. **In `app.py`**, create the selector in the UI:
+   ```python
+   my_control = gr.Dropdown(
+       choices=['option1', 'option2'],
+       label="My Control",
+       value='option1'
+   )
+   ```
+
+2. **In `keyboard.js`** (line ~1510), add to `selectControls` array:
+   ```javascript
+   {
+       element: myControlSelect,
+       getter: () => ({ label: myControlSelect.value }),
+       message: (result) => `Control switched to: ${result.label}`
+   }
+   ```
+
+3. **In `keyboard.js`**, pass control to engine via `processEventsThroughEngine()`:
+   ```javascript
+   const engineOptions = {
+       my_control: document.getElementById('myControl').value,
+       // ... other options
+   };
+   ```
+
+### Adding a New Response Mode
+
+1. **In `keyboard.js`** (line ~175), add preset definition:
+   ```javascript
+   const RESPONSE_MODES = {
+       'my_mode': {
+           label: 'My Mode',
+           processFunction: (events) => {
+               // Processing logic
+               return processedEvents;
+           }
+       }
+   };
+   ```
+
+2. **In `app.py`**, add to response mode dropdown
+
+3. **Use in engine logic** via `getSelectedResponseMode()`
+
+---
+
+## 🔄 Recent Refactoring (Feb 2026)
+
+Code consolidation to improve maintainability:
+
+- **Consolidated getter functions**: Single `getSelectedPreset()` replaces 3 similar functions
+- **Unified event listeners**: Loop-based pattern for select controls (runtime, style, mode, length)
+- **Extracted helper functions**: `resetAllNotesAndVisuals()` replaces 3 duplicated blocks
+- **Result**: Reduced redundancy, easier to modify preset logic, consistent patterns
+
+---
+
+## 🛠️ Development Tips
+
+### Debugging
+- **Terminal in UI**: Shows all MIDI events and engine responses
+- **Browser console**: `F12` for JavaScript errors
+- **Python terminal**: Check server-side logs for model loading, inference errors
+
+### Testing New Engines
+1. Record a simple 3-5 note progression
+2. Play back with different engines
+3. Check terminal for processing details
+4. Verify output notes are in valid range (0-127)
+
+### Performance
+- **Recording**: Event capture happens in JavaScript (fast, local)
+- **Processing**: May take 2-5 seconds depending on engine and model
+- **Playback**: Tone.js synthesis is real-time (instant)
+
+---
+
+## 🔧 Technology Stack
 
 - **Frontend**: Tone.js v6+ (Web Audio API)
-- **Backend**: Gradio 6.x + Python 3.10+
+- **Backend**: Gradio 5.49.1 + Python 3.10+
 - **MIDI**: mido library
 - **Model**: Godzilla Piano Transformer (via Hugging Face)
 
+---
+
 ## 📝 License
 
 Open source - free to use and modify.
-

app.py

@@ -10,12 +10,19 @@ A browser-based MIDI keyboard that can:
 """
 
 import base64
-import html
+import json
+import os
+import re
+from threading import Thread
+import traceback
 import gradio as gr
+from huggingface_hub import login
 
 from config import INSTRUMENTS, KEYBOARD_KEYS, KEYBOARD_SHORTCUTS
 from midi import events_to_midbytes
+from midi_model import preload_godzilla_assets, preload_godzilla_model
 from engines import EngineRegistry
+import spaces
 
 
 # =============================================================================
@@ -33,6 +40,15 @@ def save_midi_api(events):
     return {"midi_base64": midi_b64}
 
 
+def _parse_json_payload(payload_text: str | None, default):
+    if payload_text is None or payload_text == "":
+        return default
+    try:
+        return json.loads(payload_text)
+    except json.JSONDecodeError:
+        return default
+
+
 def get_config():
     """Provide frontend with instruments and keyboard layout"""
     return {
@@ -45,26 +61,128 @@ def get_config():
         ],
     }
 
-
-def process_with_engine(engine_id: str, events: list):
+def process_with_engine(
+    engine_id: str,
+    events: list,
+    options: dict | None = None,
+    request: "gr.Request | None" = None,
+    device: str = "auto",
+):
     """Process MIDI events through selected engine"""
     if not engine_id or not events:
         return {"error": "Missing engine_id or events"}
 
+    x_ip_token = (
+        request.headers.get("x-ip-token")
+        if request is not None and hasattr(request, "headers")
+        else None
+    )
+    print(
+        "process_engine auth:",
+        {
+            "engine_id": engine_id,
+            "has_x_ip_token": bool(x_ip_token),
+        },
+    )
+
     try:
         engine = EngineRegistry.get_engine(engine_id)
-        processed = engine.process(events)
+        processed = engine.process(
+            events,
+            options=options,
+            request=request,
+            device=device,
+        )
         return {"success": True, "events": processed}
     except ValueError as e:
+        traceback.print_exc()
         return {"error": str(e)}
     except Exception as e:
+        traceback.print_exc()
         return {"error": f"Processing error: {str(e)}"}
 
 
+def process_engine_payload(
+    payload: dict,
+    request: "gr.Request | None" = None,
+    device: str = "auto",
+):
+    if not isinstance(payload, dict):
+        return {"error": "Invalid payload"}
+    return process_with_engine(
+        payload.get("engine_id"),
+        payload.get("events", []),
+        options=payload.get("options"),
+        request=request,
+        device=device,
+    )
+
+
+def config_event_bridge(_payload_text: str) -> str:
+    return json.dumps(get_config())
+
+
+def save_midi_event_bridge(payload_text: str) -> str:
+    events = _parse_json_payload(payload_text, [])
+    result = save_midi_api(events)
+    return json.dumps(result)
+
+
+def process_engine_event_bridge_cpu(
+    payload_text: str,
+    request: "gr.Request | None" = None,
+) -> str:
+    payload = _parse_json_payload(payload_text, {})
+    result = process_engine_payload(payload, request=request, device="cpu")
+    return json.dumps(result)
+
+
+@spaces.GPU(duration=120)
+def process_engine_event_bridge_gpu(
+    payload_text: str,
+    request: "gr.Request | None" = None,
+) -> str:
+    payload = _parse_json_payload(payload_text, {})
+    result = process_engine_payload(payload, request=request, device="cuda")
+    return json.dumps(result)
+
+
+def start_background_preload() -> None:
+    def _run() -> None:
+        try:
+            checkpoint_path = preload_godzilla_assets()
+            print(f"Godzilla assets preloaded: {checkpoint_path}")
+            model_info = preload_godzilla_model(device="cpu")
+            print(f"Godzilla model warmed in memory: {model_info}")
+        except Exception:
+            print("Godzilla preload failed:")
+            traceback.print_exc()
+
+    Thread(target=_run, daemon=True).start()
+
+
+def login_huggingface_from_env() -> None:
+    """Authenticate with Hugging Face if HF_TOKEN is available."""
+    token = os.environ.get("HF_TOKEN")
+    if not token:
+        print("HF_TOKEN not set; skipping huggingface_hub.login()")
+        return
+
+    try:
+        login(token=token, add_to_git_credential=False)
+        print("Authenticated with Hugging Face using HF_TOKEN")
+    except Exception:
+        print("huggingface_hub login failed:")
+        traceback.print_exc()
+
+
 # =============================================================================
 # GRADIO UI
 # =============================================================================
 
+login_huggingface_from_env()
+start_background_preload()
+
 # Load HTML and CSS
 with open("keyboard.html", "r", encoding="utf-8") as f:
     html_content = f.read()
@@ -75,58 +193,75 @@ with open("static/styles.css", "r", encoding="utf-8") as f:
 with open("static/keyboard.js", "r", encoding="utf-8") as f:
     js_content = f.read()
 
-# Inject CSS and JS into HTML
-keyboard_html = html_content.replace(
-    '<link rel="stylesheet" href="/file=static/styles.css" />',
-    f"<style>{css_content}</style>",
-).replace(
-    '<script src="/file=static/keyboard.js"></script>', f"<script>{js_content}</script>"
-)
+body_match = re.search(r"<body[^>]*>(.*)</body>", html_content, flags=re.IGNORECASE | re.DOTALL)
+keyboard_markup = body_match.group(1) if body_match else html_content
+keyboard_markup = re.sub(r"<script\b[^>]*>.*?</script>", "", keyboard_markup, flags=re.IGNORECASE | re.DOTALL)
+keyboard_markup = re.sub(r"<link\b[^>]*>", "", keyboard_markup, flags=re.IGNORECASE)
 
-iframe_html = (
-    '<iframe srcdoc="'
-    + html.escape(keyboard_html, quote=True)
-    + '" style="width:100%;height:750px;border:0;"></iframe>'
+# Make logo rendering robust by embedding local repo logo bytes directly.
+logo_path = "synthia_logo.png"
+if os.path.exists(logo_path):
+    try:
+        with open(logo_path, "rb") as logo_file:
+            logo_b64 = base64.b64encode(logo_file.read()).decode("ascii")
+        keyboard_markup = keyboard_markup.replace(
+            'src="/file=synthia_logo.png"',
+            f'src="data:image/png;base64,{logo_b64}"',
+        )
+    except Exception:
+        print("Failed to embed synthia_logo.png; keeping original src path.")
+        traceback.print_exc()
+else:
+    print("synthia_logo.png not found; logo image may not render.")
+
+hidden_bridge_css = "\n.vk-hidden { display: none !important; }\n"
+head_html = "\n".join(
+    [
+        '<script src="https://unpkg.com/tone@next/build/Tone.js"></script>',
+        f"<script>{js_content}</script>",
+    ]
 )
 
 # Create Gradio app
-with gr.Blocks(title="Virtual MIDI Keyboard") as demo:
-    gr.HTML(iframe_html)
-
-    # Hidden config API
-    with gr.Group(visible=False):
-        config_input = gr.Textbox(label="_")
-        config_output = gr.JSON(label="_")
-        config_btn = gr.Button("get_config", visible=False)
+with gr.Blocks(title="Virtual MIDI Keyboard", css=css_content + hidden_bridge_css, head=head_html) as demo:
+    gr.HTML(keyboard_markup)
+
+    # Hidden bridges for direct Gradio event calls from frontend JS
+    with gr.Group(elem_classes=["vk-hidden"]):
+        config_input = gr.Textbox(value="{}", elem_id="vk_config_input", show_label=False)
+        config_output = gr.Textbox(elem_id="vk_config_output", show_label=False)
+        config_btn = gr.Button("get_config", elem_id="vk_config_btn")
         config_btn.click(
-            fn=lambda x: get_config(),
+            fn=config_event_bridge,
             inputs=config_input,
             outputs=config_output,
-            api_name="config",
         )
 
-        # MIDI save API
-        midi_input = gr.JSON(label="_")
-        midi_output = gr.JSON(label="_")
-        midi_btn = gr.Button("save_midi", visible=False)
+        midi_input = gr.Textbox(value="[]", elem_id="vk_save_input", show_label=False)
+        midi_output = gr.Textbox(elem_id="vk_save_output", show_label=False)
+        midi_btn = gr.Button("save_midi", elem_id="vk_save_btn")
         midi_btn.click(
-            fn=save_midi_api,
+            fn=save_midi_event_bridge,
             inputs=midi_input,
             outputs=midi_output,
-            api_name="save_midi",
         )
 
-        # Engine processing API
-        engine_input = gr.JSON(label="_")
-        engine_output = gr.JSON(label="_")
-        engine_btn = gr.Button("process_engine", visible=False)
-        engine_btn.click(
-            fn=lambda payload: process_with_engine(
-                payload.get("engine_id"), payload.get("events", [])
-            ),
+        engine_input = gr.Textbox(value="{}", elem_id="vk_engine_input", show_label=False)
+
+        engine_cpu_output = gr.Textbox(elem_id="vk_engine_cpu_output", show_label=False)
+        engine_cpu_btn = gr.Button("process_engine_cpu", elem_id="vk_engine_cpu_btn")
+        engine_cpu_btn.click(
+            fn=process_engine_event_bridge_cpu,
+            inputs=engine_input,
+            outputs=engine_cpu_output,
+        )
+
+        engine_gpu_output = gr.Textbox(elem_id="vk_engine_gpu_output", show_label=False)
+        engine_gpu_btn = gr.Button("process_engine_gpu", elem_id="vk_engine_gpu_btn")
+        engine_gpu_btn.click(
+            fn=process_engine_event_bridge_gpu,
             inputs=engine_input,
-            outputs=engine_output,
-            api_name="process_engine",
+            outputs=engine_gpu_output,
         )
 
 

engines.py

@@ -8,7 +8,7 @@ from typing import List, Dict, Any
 
 from midi_model import (
     count_out_of_range_events,
-    filter_events_to_keyboard_range,
+    fold_events_to_keyboard_range,
     get_model,
 )
 
@@ -28,7 +28,13 @@ class ParrotEngine:
     def __init__(self):
         self.name = "Parrot"
 
-    def process(self, events: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+    def process(
+        self,
+        events: List[Dict[str, Any]],
+        options: Dict[str, Any] | None = None,
+        request: Any | None = None,
+        device: str = "auto",
+    ) -> List[Dict[str, Any]]:
         """Return events unchanged"""
         if not events:
             return []
@@ -60,7 +66,13 @@ class ReverseParrotEngine:
     def __init__(self):
         self.name = "Reverse Parrot"
 
-    def process(self, events: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+    def process(
+        self,
+        events: List[Dict[str, Any]],
+        options: Dict[str, Any] | None = None,
+        request: Any | None = None,
+        device: str = "auto",
+    ) -> List[Dict[str, Any]]:
         """Reverse the sequence of note numbers while keeping timing and event types"""
         if not events:
             return []
@@ -125,20 +137,53 @@ class GodzillaContinuationEngine:
         self.name = "Godzilla"
         self.generate_tokens = generate_tokens
 
-    def process(self, events: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+    def process(
+        self,
+        events: List[Dict[str, Any]],
+        options: Dict[str, Any] | None = None,
+        request: Any | None = None,
+        device: str = "auto",
+    ) -> List[Dict[str, Any]]:
         if not events:
             return []
 
+        generate_tokens = self.generate_tokens
+        seed = None
+        temperature = 0.9
+        top_p = 0.95
+        num_candidates = 3
+        if isinstance(options, dict):
+            requested_tokens = options.get("generate_tokens")
+            if isinstance(requested_tokens, int):
+                generate_tokens = max(8, min(256, requested_tokens))
+            requested_seed = options.get("seed")
+            if isinstance(requested_seed, int):
+                seed = requested_seed
+            requested_temperature = options.get("temperature")
+            if isinstance(requested_temperature, (int, float)):
+                temperature = max(0.2, min(1.5, float(requested_temperature)))
+            requested_top_p = options.get("top_p")
+            if isinstance(requested_top_p, (int, float)):
+                top_p = max(0.5, min(0.99, float(requested_top_p)))
+            requested_candidates = options.get("num_candidates")
+            if isinstance(requested_candidates, int):
+                num_candidates = max(1, min(6, requested_candidates))
+
         model = get_model("godzilla")
         new_events = model.generate_continuation(
             events,
-            tokens=self.generate_tokens,
-            seed=None,
+            tokens=generate_tokens,
+            seed=seed,
+            temperature=temperature,
+            top_p=top_p,
+            num_candidates=num_candidates,
+            request=request,
+            device=device,
         )
         out_of_range = count_out_of_range_events(new_events)
         if out_of_range:
-            print(f"Godzilla: dropped {out_of_range} out-of-range events")
-        return filter_events_to_keyboard_range(new_events)
+            print(f"Godzilla: remapped {out_of_range} out-of-range events by octave folding")
+        return fold_events_to_keyboard_range(new_events)
 
 
 # =============================================================================

keyboard.html

@@ -7,60 +7,189 @@
   <link rel="stylesheet" href="/file=static/styles.css" />
 </head>
 <body>
-  <!-- Welcome Header -->
-  <div class="welcome-header">
-    <h1 class="neon-text">SYNTH<i>IA</i></h1>
-  </div>
-  
-  <div id="mainContainer">
-    <!-- Keyboard Section -->
-    <div class="keyboard-section">
-      <div id="keyboard"></div>
-
-      <div class="controls">
-        <label>
-          Instrument:
-          <select id="instrumentSelect">
-            <option value="synth">Synth</option>
-            <option value="piano">Piano</option>
-            <option value="organ">Organ</option>
-            <option value="bass">Bass</option>
-            <option value="pluck">Pluck</option>
-            <option value="fm">FM Synth</option>
-          </select>
-        </label>
-        
-        <label>
-          Engine:
-          <select id="engineSelect">
-            <option value="parrot">Parrot</option>
-            <option value="reverse_parrot">Reverse Parrot</option>
-            <option value="godzilla_continue">Godzilla</option>
-          </select>
-        </label>
+  <div class="app-shell">
+    <div class="welcome-header">
+      <h1><span class="synth">SYNTH</span><i class="ia">IA</i></h1>
+      
+      <div class="welcome-text">
+        <p class="welcome-intro">
+          Play a short phrase and let the AI respond musically. Choose your instrument, AI voice, and response style.
+        </p>
         
-        <button id="recordBtn">Record</button>
-        <button id="stopBtn" disabled>Stop</button>
-        <button id="playbackBtn" disabled>Playback</button>
-        <button id="saveBtn" disabled>Save MIDI</button>
-        <button id="panicBtn" style="background: #ff4444; color: white;">Panic 🚨</button>
-        
-        <label>
-          <input type="checkbox" id="keyboardToggle">
-          Enable Keyboard Input
-        </label>
-        
-        <span id="status">Idle</span>
+        <div class="features-guide" style="display: none;">
+          <h3>Features</h3>
+          <ul class="features-list">
+            <li><strong>Game Mode:</strong> Start an interactive call-and-response session where the AI listens to your playing and responds musically</li>
+            
+            <li><strong>Instrument:</strong> Choose the synth sound and effects for your keyboard—Synth, Piano, Organ, Bass, Pluck, or FM Synth create different tonal qualities</li>
+            
+            <li><strong>AI Voice:</strong> Select which instrument sound the AI uses when it responds to your playing</li>
+            
+            <li><strong>Engine:</strong> Choose how the AI responds:
+              <ul class="sub-list">
+                <li><em>Parrot:</em> Repeats exactly what you played</li>
+                <li><em>Reverse Parrot:</em> Plays your notes in reverse order (backward)</li>
+                <li><em>Godzilla:</em> Uses AI to generate a musically coherent continuation of your phrase</li>
+              </ul>
+            </li>
+            
+            <li><strong>Runtime:</strong> Select where the AI runs—CPU (slower, always available), ZeroGPU (faster if available), or Auto (prefers GPU, falls back to CPU)</li>
+            
+            <li><strong>AI Style:</strong> Post-processing that shapes the AI's melodic style (Godzilla engine only):
+              <ul class="sub-list">
+                <li><em>Melodic:</em> Smooth, singable melodies with minimal pitch leaps</li>
+                <li><em>Motif Echo:</em> Echoes the first couple notes from your input at the end of the response</li>
+                <li><em>Playful:</em> Adds bouncy alternating pitch shifts for a whimsical character</li>
+              </ul>
+            </li>
+            
+            <li><strong>Response Mode:</strong> Determines the processing pipeline and sampling creativity (Godzilla engine only):
+              <ul class="sub-list">
+                <li><em>Raw Godzilla:</em> Pure AI output with maximum creativity (temperature=1.0, more unpredictable)</li>
+                <li><em>Current Pipeline:</em> Balanced mode applying your AI Style with moderate creativity (temperature=0.9, best of 3 candidates)</li>
+                <li><em>Musical Polish:</em> Refined mode with advanced processing—quantizes pitches to musical scales, adjusts rhythm, blends velocities, and ensures musical coherence (temperature=0.85, picks best of 4)</li>
+              </ul>
+            </li>
+            
+            <li><strong>Response Length:</strong> How many notes the AI generates—Short (8 notes), Medium (14 notes), Long (20 notes), or Extended (28 notes)</li>
+            
+            <li><strong>Record/Playback:</strong> Record your keyboard performance and play it back to hear it again</li>
+            
+            <li><strong>Save MIDI:</strong> Export your recordings as MIDI files for use in DAWs or other music software</li>
+          </ul>
+        </div>
       </div>
     </div>
+    
+    <div id="mainContainer">
+      <div class="keyboard-section card">
+        <div id="keyboard"></div>
+        <div class="keyboard-toggle-row">
+          <label class="keyboard-toggle-pill">
+            <input type="checkbox" id="keyboardToggle">
+            <span class="toggle-track"></span>
+            <span class="toggle-text">Enable Keyboard Input</span>
+          </label>
+          <div class="tooltip-display-area" id="tooltipDisplay"></div>
+        </div>
+
+        <div class="controls card">
+          <div class="control-grid">
+            <label class="control-item" data-control-id="instrument">
+              Instrument
+              <select id="instrumentSelect" data-description="Choose the synth sound for your keyboard">
+                <option value="synth" data-tooltip="Bright, modern electronic sound">Synth</option>
+                <option value="piano" data-tooltip="Classic acoustic piano tone">Piano</option>
+                <option value="organ" data-tooltip="Rich, warm organ pipes">Organ</option>
+                <option value="bass" data-tooltip="Deep, resonant bass tones">Bass</option>
+                <option value="pluck" data-tooltip="Percussive plucked string sound">Pluck</option>
+                <option value="fm" data-tooltip="Complex, bell-like FM synthesis">FM Synth</option>
+              </select>
+            </label>
+
+            <label class="control-item" data-control-id="aiVoice">
+              AI Voice
+              <select id="aiInstrumentSelect" data-description="Select which instrument sound the AI uses when it responds">
+                <option value="synth" data-tooltip="Bright, modern electronic sound">Synth</option>
+                <option value="piano" data-tooltip="Classic acoustic piano tone">Piano</option>
+                <option value="organ" data-tooltip="Rich, warm organ pipes">Organ</option>
+                <option value="bass" data-tooltip="Deep, resonant bass tones">Bass</option>
+                <option value="pluck" data-tooltip="Percussive plucked string sound">Pluck</option>
+                <option value="fm" selected data-tooltip="Complex, bell-like FM synthesis">FM Synth</option>
+              </select>
+            </label>
+            
+            <label class="control-item" data-control-id="engine">
+              Engine
+              <select id="engineSelect" data-description="Your generation model">
+                <option value="parrot" data-tooltip="Repeats your exact melody — useful for practicing or creating canon patterns">Parrot</option>
+                <option value="reverse_parrot" data-tooltip="Plays your melody backward — creates mirror images and harmonic inversions">Reverse Parrot</option>
+                <option value="godzilla_continue" data-tooltip="MIDI transformer that generates new musical continuations">Godzilla</option>
+              </select>
+            </label>
+
+            <label class="control-item" id="runtimeControl" data-control-id="runtime">
+              Runtime
+              <select id="runtimeSelect" data-description="Choose where the AI runs for faster or more reliable performance">
+                <option value="cpu" data-tooltip="Slower but always available, runs on CPU">CPU</option>
+                <option value="gpu" data-tooltip="Faster when available, uses ZeroGPU for inference">ZeroGPU</option>
+                <option value="auto" data-tooltip="Automatically prefers GPU if available, falls back to CPU" selected>Auto (GPU then CPU)</option>
+              </select>
+            </label>
+
+            <label class="control-item" data-control-id="aiStyle">
+              AI Style
+              <select id="responseStyleSelect" data-description="Applies post-processing styling to shape the AI's melodic character">
+                <option value="melodic" data-tooltip="Smooth, singable melodies with minimal pitch leaps">Melodic</option>
+                <option value="motif_echo" data-tooltip="Echoes the first couple notes from your input at the end of the response">Motif Echo</option>
+                <option value="playful" data-tooltip="Bouncy alternating pitch shifts for a whimsical, playful character">Playful</option>
+              </select>
+            </label>
+
+            <label class="control-item" data-control-id="responseMode">
+              Response Mode
+              <select id="responseModeSelect" data-description="Processing pipeline & creativity level">
+                <option value="raw_godzilla" data-tooltip="Pure AI output, maximum creativity (temperature=1.0, unpredictable)" selected>Raw Godzilla</option>
+                <option value="current_pipeline" data-tooltip="Balanced mode with AI Style applied, moderate creativity (temperature=0.9)">Current Pipeline</option>
+                <option value="musical_polish" data-tooltip="Refined with scale quantization and rhythm adjustment (temperature=0.85)">Musical Polish</option>
+              </select>
+            </label>
+
+            <label class="control-item" data-control-id="responseLength">
+              Response Length
+              <select id="responseLengthSelect" data-description="How many notes the AI generates in each response">
+                <option value="short" data-tooltip="8 notes - quick, snappy responses" selected>Short</option>
+                <option value="medium" data-tooltip="14 notes - balanced response length">Medium</option>
+                <option value="long" data-tooltip="20 notes - longer, more developed phrases">Long</option>
+                <option value="extended" data-tooltip="28 notes - extended musical conversations">Extended</option>
+              </select>
+            </label>
+          </div>
+
+          <div class="action-row">
+            <div class="btn-tooltip-wrapper">
+              <button id="recordBtn" class="btn btn-primary">Record</button>
+              <div class="btn-tooltip">Record your playing to MIDI. Click Record, play, then Stop.</div>
+            </div>
+            <div class="btn-tooltip-wrapper">
+              <button id="stopBtn" class="btn btn-secondary" disabled>Stop</button>
+              <div class="btn-tooltip">Stop recording your performance.</div>
+            </div>
+            <div class="btn-tooltip-wrapper">
+              <button id="playbackBtn" class="btn btn-secondary" disabled>Playback</button>
+              <div class="btn-tooltip">Play back your recorded performance.</div>
+            </div>
+            <div class="btn-tooltip-wrapper">
+              <button id="gameStartBtn" class="btn btn-game">Start Game</button>
+              <div class="btn-tooltip">Start call & response: play a phrase, AI responds, repeat.</div>
+            </div>
+            <div class="btn-tooltip-wrapper">
+              <button id="gameStopBtn" class="btn btn-secondary" disabled>Stop Game</button>
+              <div class="btn-tooltip">Stop the ongoing game session.</div>
+            </div>
+            <div class="btn-tooltip-wrapper">
+              <button id="saveBtn" class="btn btn-secondary" disabled>Save MIDI</button>
+              <div class="btn-tooltip">Export your recording as a MIDI file.</div>
+            </div>
+            <div class="btn-tooltip-wrapper">
+              <button id="panicBtn" class="btn btn-danger">Panic</button>
+              <div class="btn-tooltip">Stop all playing notes immediately.</div>
+            </div>
+            <span id="status">Idle</span>
+          </div>
+        </div>
+      </div>
 
-    <!-- MIDI Monitor Section -->
-    <div class="monitor-section">
-      <div class="terminal-header">
-        <h4>MIDI MONITOR</h4>
-        <button id="clearTerminal">Clear</button>
+      <div class="monitor-section card">
+        <div class="terminal-header">
+          <h4>MIDI MONITOR</h4>
+          <div class="btn-tooltip-wrapper">
+            <button id="clearTerminal" class="btn btn-secondary">Clear</button>
+            <div class="btn-tooltip">Clear all MIDI events from the monitor.</div>
+          </div>
+        </div>
+        <div id="terminal"></div>
       </div>
-      <div id="terminal"></div>
     </div>
   </div>
 

midi_model.py

@@ -3,20 +3,37 @@ from __future__ import annotations
 
 import subprocess
 import sys
+import inspect
+import re
+import time
 from dataclasses import dataclass
 from pathlib import Path
-from typing import Iterable, Optional
+from typing import Any, Iterable, Optional
 
 from config import MIDI_DEFAULTS, KEYBOARD_BASE_MIDI, KEYBOARD_OCTAVES
 
-
 DEFAULT_REPO = "asigalov61/Godzilla-Piano-Transformer"
 DEFAULT_FILENAME = (
-    "Godzilla_Piano_Chords_Texturing_Transformer_Trained_Model_22708_steps_"
-    "0.7515_loss_0.7853_acc.pth"
+    "Godzilla_Piano_Transformer_No_Velocity_Trained_Model_21113_steps_"
+    "0.3454_loss_0.895_acc.pth"
 )
+KNOWN_GODZILLA_CHECKPOINTS = [
+    "Godzilla_Piano_Transformer_No_Velocity_Trained_Model_21113_steps_0.3454_loss_0.895_acc.pth",
+    "Godzilla_Piano_Transformer_No_Velocity_Trained_Model_14903_steps_0.4874_loss_0.8571_acc.pth",
+    "Godzilla_Piano_Transformer_No_Velocity_Trained_Model_32503_steps_0.6553_loss_0.8065_acc.pth",
+    "Godzilla_Piano_Chords_Texturing_Transformer_Trained_Model_22708_steps_0.7515_loss_0.7853_acc.pth",
+]
 
 _MODEL_CACHE: dict[str, object] = {}
+PROMPT_MAX_SECONDS = 18.0
+PROMPT_PHRASE_GAP_SEC = 0.6
+PROMPT_TARGET_CENTER_MIDI = 67
+PROMPT_MAX_TRANSPOSE = 12
+DEFAULT_MODEL_DIM = 2048
+DEFAULT_MODEL_DEPTH = 8
+DEFAULT_MODEL_HEADS = 32
+DEFAULT_SEQ_LEN = 1536
+DEFAULT_PAD_IDX = 708
 
 
 @dataclass(frozen=True)
@@ -30,6 +47,11 @@ class MidiModel:
         *,
         tokens: int = 32,
         seed: Optional[int] = None,
+        temperature: float = 0.9,
+        top_p: float = 0.95,
+        num_candidates: int = 1,
+        request: Any | None = None,
+        device: str = "auto",
     ) -> list[dict]:
         raise NotImplementedError
 
@@ -59,6 +81,99 @@ def ensure_tegridy_tools(base_dir: Path) -> tuple[Path, Path]:
     return tools_dir, x_transformer_dir
 
 
+def preload_godzilla_assets(
+    *,
+    repo: str = DEFAULT_REPO,
+    filename: str = DEFAULT_FILENAME,
+    cache_dir: Path = Path(".cache/godzilla"),
+    tegridy_dir: Path = Path("external"),
+) -> Path:
+    """
+    Download model checkpoint and Tegridy tools during app startup.
+    """
+    from huggingface_hub import hf_hub_download
+
+    cache_dir.mkdir(parents=True, exist_ok=True)
+    checkpoint_path = download_checkpoint_with_fallback(
+        repo=repo,
+        filename=filename,
+        cache_dir=cache_dir,
+    )
+    ensure_tegridy_tools(tegridy_dir)
+    return checkpoint_path
+
+
+def preload_godzilla_model(
+    *,
+    repo: str = DEFAULT_REPO,
+    filename: str = DEFAULT_FILENAME,
+    cache_dir: Path = Path(".cache/godzilla"),
+    tegridy_dir: Path = Path("external"),
+    seq_len: int = DEFAULT_SEQ_LEN,
+    pad_idx: int = DEFAULT_PAD_IDX,
+    device: str = "cpu",
+) -> dict[str, Any]:
+    model, resolved_device, _, resolved_seq_len, resolved_pad_idx = load_model_cached(
+        repo=repo,
+        filename=filename,
+        cache_dir=cache_dir,
+        tegridy_dir=tegridy_dir,
+        seq_len=seq_len,
+        pad_idx=pad_idx,
+        device=device,
+    )
+    return {
+        "model_loaded": model is not None,
+        "device": resolved_device,
+        "seq_len": resolved_seq_len,
+        "pad_idx": resolved_pad_idx,
+    }
+
+
+def candidate_checkpoint_filenames(primary: str) -> list[str]:
+    ordered = [primary]
+    for checkpoint in KNOWN_GODZILLA_CHECKPOINTS:
+        if checkpoint not in ordered:
+            ordered.append(checkpoint)
+    return ordered
+
+
+def download_checkpoint_with_fallback(
+    *,
+    repo: str,
+    filename: str,
+    cache_dir: Path,
+) -> Path:
+    from huggingface_hub import hf_hub_download
+
+    cache_dir.mkdir(parents=True, exist_ok=True)
+    attempted: list[str] = []
+    last_error: Exception | None = None
+
+    for candidate in candidate_checkpoint_filenames(filename):
+        try:
+            return Path(
+                hf_hub_download(
+                    repo_id=repo,
+                    filename=candidate,
+                    local_dir=str(cache_dir),
+                    repo_type="model",
+                )
+            )
+        except Exception as exc:
+            attempted.append(candidate)
+            last_error = exc
+            message = str(exc)
+            if "Entry Not Found" in message or "404" in message:
+                continue
+            raise
+
+    raise RuntimeError(
+        f"Could not download any Godzilla checkpoint. Tried: {attempted}. "
+        f"Last error: {last_error}"
+    )
+
+
 def add_sys_path(*paths: Path) -> None:
     for path in paths:
         path_str = str(path.resolve())
@@ -66,16 +181,23 @@ def add_sys_path(*paths: Path) -> None:
             sys.path.insert(0, path_str)
 
 
-def build_model(seq_len: int, pad_idx: int):
+def build_model(
+    seq_len: int,
+    pad_idx: int,
+    *,
+    dim: int = DEFAULT_MODEL_DIM,
+    depth: int = DEFAULT_MODEL_DEPTH,
+    heads: int = DEFAULT_MODEL_HEADS,
+):
     from x_transformer_2_3_1 import AutoregressiveWrapper, Decoder, TransformerWrapper
 
     model = TransformerWrapper(
         num_tokens=pad_idx + 1,
         max_seq_len=seq_len,
         attn_layers=Decoder(
-            dim=2048,
-            depth=8,
-            heads=32,
+            dim=dim,
+            depth=depth,
+            heads=heads,
             rotary_pos_emb=True,
             attn_flash=True,
         ),
@@ -91,18 +213,193 @@ def resolve_device(requested: str) -> str:
     return requested
 
 
-def load_checkpoint(model, checkpoint_path: Path, device: str) -> None:
+def load_checkpoint_state(checkpoint_path: Path, device: str) -> dict[str, Any]:
     import torch
 
     state = torch.load(checkpoint_path, map_location=device)
-    model.load_state_dict(state)
+    if isinstance(state, dict) and "state_dict" in state and isinstance(state["state_dict"], dict):
+        state = state["state_dict"]
+    if not isinstance(state, dict):
+        raise RuntimeError(f"Unexpected checkpoint format at {checkpoint_path}")
+    return state
+
+
+def infer_layer_entries_from_state(state: dict[str, Any]) -> int:
+    layer_ids: set[int] = set()
+    pattern = re.compile(r"^net\.attn_layers\.layers\.(\d+)\.")
+    for key in state.keys():
+        match = pattern.match(key)
+        if match:
+            layer_ids.add(int(match.group(1)))
+    if not layer_ids:
+        return DEFAULT_MODEL_DEPTH * 2
+    return max(layer_ids) + 1
+
+
+def infer_model_shape_from_state(
+    state: dict[str, Any],
+    *,
+    fallback_seq_len: int,
+    fallback_pad_idx: int,
+) -> tuple[int, int, int, list[int]]:
+    emb = state.get("net.token_emb.emb.weight")
+    if emb is not None and hasattr(emb, "shape") and len(emb.shape) == 2:
+        num_tokens = int(emb.shape[0])
+        dim = int(emb.shape[1])
+    else:
+        num_tokens = fallback_pad_idx + 1
+        dim = DEFAULT_MODEL_DIM
+
+    pad_idx = max(0, num_tokens - 1)
+    seq_len = 4096 if num_tokens <= 385 else fallback_seq_len
+
+    layer_entries = infer_layer_entries_from_state(state)
+    depth_candidates: list[int] = []
+    for candidate in [max(1, layer_entries // 2), layer_entries]:
+        if candidate not in depth_candidates:
+            depth_candidates.append(candidate)
+
+    return seq_len, pad_idx, dim, depth_candidates
+
+
+def adapt_state_for_model(
+    raw_state: dict[str, Any],
+    model_state: dict[str, Any],
+) -> dict[str, Any]:
+    adapted: dict[str, Any] = {}
+    model_keys = set(model_state.keys())
+
+    for key, value in raw_state.items():
+        if key in model_keys:
+            adapted[key] = value
+            continue
+        if key.endswith(".weight"):
+            gamma_key = key[:-7] + ".gamma"
+            if gamma_key in model_keys:
+                adapted[gamma_key] = value
+                continue
+        if key.endswith(".gamma"):
+            weight_key = key[:-6] + ".weight"
+            if weight_key in model_keys:
+                adapted[weight_key] = value
+                continue
+
+    # Fill optional affine params when norm conventions differ.
+    for key, tensor in model_state.items():
+        if key in adapted:
+            continue
+        if key.endswith(".bias"):
+            adapted[key] = tensor.new_zeros(tensor.shape)
+        elif key.endswith(".gamma"):
+            adapted[key] = tensor.new_ones(tensor.shape)
+
+    return adapted
+
+
+def sanitize_events(events: list[dict]) -> list[dict]:
+    cleaned: list[dict] = []
+    for event in events:
+        if not isinstance(event, dict):
+            continue
+        ev_type = event.get("type")
+        if ev_type not in {"note_on", "note_off"}:
+            continue
+        note = max(0, min(127, int(event.get("note", 0))))
+        velocity = max(0, min(127, int(event.get("velocity", 0))))
+        time_sec = max(0.0, float(event.get("time", 0.0)))
+        cleaned.append(
+            {
+                "type": ev_type,
+                "note": note,
+                "velocity": velocity,
+                "time": time_sec,
+                "channel": int(event.get("channel", 0)),
+            }
+        )
+    cleaned.sort(key=lambda e: float(e.get("time", 0.0)))
+    return cleaned
+
+
+def extract_prompt_window(
+    events: list[dict],
+    *,
+    max_seconds: float = PROMPT_MAX_SECONDS,
+    phrase_gap_sec: float = PROMPT_PHRASE_GAP_SEC,
+) -> list[dict]:
+    cleaned = sanitize_events(events)
+    if not cleaned:
+        return []
+
+    last_time = max(float(e.get("time", 0.0)) for e in cleaned)
+    recent_cut = max(0.0, last_time - max_seconds)
+
+    note_on_times = [
+        float(e.get("time", 0.0))
+        for e in cleaned
+        if e.get("type") == "note_on" and int(e.get("velocity", 0)) > 0
+    ]
+    if len(note_on_times) < 2:
+        return [e for e in cleaned if float(e.get("time", 0.0)) >= recent_cut]
+
+    phrase_starts = [note_on_times[0]]
+    for i in range(1, len(note_on_times)):
+        if note_on_times[i] - note_on_times[i - 1] >= phrase_gap_sec:
+            phrase_starts.append(note_on_times[i])
+
+    # Keep the last 1-2 phrases for coherent continuation.
+    phrase_cut = phrase_starts[-2] if len(phrase_starts) >= 2 else phrase_starts[-1]
+    cut = max(recent_cut, phrase_cut)
+    return [e for e in cleaned if float(e.get("time", 0.0)) >= cut]
+
+
+def estimate_input_velocity(events: list[dict], default: int = 100) -> int:
+    velocities = [
+        int(e.get("velocity", 0))
+        for e in events
+        if e.get("type") == "note_on" and int(e.get("velocity", 0)) > 0
+    ]
+    if not velocities:
+        return default
+    avg = round(sum(velocities) / len(velocities))
+    return max(40, min(120, avg))
+
+
+def compute_transpose_shift(
+    events: list[dict],
+    *,
+    target_center_midi: int = PROMPT_TARGET_CENTER_MIDI,
+    max_transpose: int = PROMPT_MAX_TRANSPOSE,
+) -> int:
+    pitches = [
+        int(e.get("note", 0))
+        for e in events
+        if e.get("type") == "note_on" and int(e.get("velocity", 0)) > 0
+    ]
+    if not pitches:
+        return 0
+    pitches.sort()
+    median_pitch = pitches[len(pitches) // 2]
+    shift = int(round(target_center_midi - median_pitch))
+    return max(-max_transpose, min(max_transpose, shift))
+
+
+def transpose_events(events: list[dict], semitones: int) -> list[dict]:
+    if semitones == 0:
+        return [dict(event) for event in events]
+    out: list[dict] = []
+    for event in events:
+        copied = dict(event)
+        if copied.get("type") in {"note_on", "note_off"}:
+            copied["note"] = max(0, min(127, int(copied.get("note", 0)) + semitones))
+        out.append(copied)
+    return out
 
 
 def events_to_score_tokens(events: list[dict]) -> list[int]:
     if not events:
         return []
 
-    active: dict[int, float] = {}
+    active: dict[int, list[tuple[float, int]]] = {}
     notes: list[tuple[float, float, int]] = []
     sorted_events = sorted(events, key=lambda e: e.get("time", 0.0))
 
@@ -113,11 +410,11 @@ def events_to_score_tokens(events: list[dict]) -> list[int]:
         time_sec = float(event.get("time", 0.0))
 
         if ev_type == "note_on" and velocity > 0:
-            active[note] = time_sec
+            active.setdefault(note, []).append((time_sec, velocity))
         elif ev_type in {"note_off", "note_on"}:
-            if note in active:
-                start = active.pop(note)
-                duration = max(0.0, time_sec - start)
+            if note in active and active[note]:
+                start, _ = active[note].pop(0)
+                duration = max(0.05, time_sec - start)
                 notes.append((start, duration, note))
 
     if not notes:
@@ -212,14 +509,139 @@ def filter_events_to_keyboard_range(events: list[dict]) -> list[dict]:
     ]
 
 
-def build_prime_tokens(score_tokens: list[int], seq_len: int) -> list[int]:
-    prime = [705, 384, 706]
-    if score_tokens:
-        max_score = max(0, seq_len - len(prime))
-        prime.extend(score_tokens[-max_score:])
+def fold_note_to_keyboard_range(note: int) -> int:
+    min_note, max_note = keyboard_note_range()
+    folded = int(note)
+    while folded < min_note:
+        folded += 12
+    while folded > max_note:
+        folded -= 12
+    return max(min_note, min(max_note, folded))
+
+
+def fold_events_to_keyboard_range(events: list[dict]) -> list[dict]:
+    out: list[dict] = []
+    for event in events:
+        copied = dict(event)
+        if copied.get("type") in {"note_on", "note_off"}:
+            copied["note"] = fold_note_to_keyboard_range(int(copied.get("note", 0)))
+        out.append(copied)
+    return out
+
+
+def resolve_eos_token(pad_idx: int) -> int:
+    # Legacy Godzilla checkpoints use 707 as EOS with 708 pad.
+    if pad_idx >= 708:
+        return 707
+    return pad_idx
+
+
+def build_prime_tokens(score_tokens: list[int], seq_len: int, pad_idx: int) -> list[int]:
+    num_tokens = pad_idx + 1
+    if pad_idx >= 708:
+        prime = [705, 384, 706]
+        if score_tokens:
+            max_score = max(0, seq_len - len(prime))
+            prime.extend(score_tokens[-max_score:])
+        else:
+            prime.extend([0, 129, 316])
     else:
-        prime.extend([0, 129, 316])
-    return prime
+        if score_tokens:
+            prime = score_tokens[-max(1, seq_len) :]
+        else:
+            prime = [0, 129, 316]
+
+    # Keep prime tokens valid for current vocabulary.
+    return [max(0, min(num_tokens - 1, int(tok))) for tok in prime]
+
+
+def build_generate_kwargs(
+    model,
+    temperature: float,
+    top_p: float,
+    eos_token: int,
+) -> dict[str, Any]:
+    kwargs: dict[str, Any] = {
+        "return_prime": True,
+        "eos_token": eos_token,
+    }
+    try:
+        signature = inspect.signature(model.generate)
+    except (TypeError, ValueError):
+        return kwargs
+
+    params = signature.parameters
+    safe_temperature = max(0.2, min(1.5, float(temperature)))
+    safe_top_p = max(0.5, min(0.99, float(top_p)))
+
+    if "temperature" in params:
+        kwargs["temperature"] = safe_temperature
+    if "top_p" in params:
+        kwargs["top_p"] = safe_top_p
+    elif "filter_thres" in params:
+        kwargs["filter_thres"] = safe_top_p
+    return kwargs
+
+
+def generate_tokens_sample(
+    model,
+    prime_tensor,
+    generate_tokens: int,
+    *,
+    temperature: float,
+    top_p: float,
+    eos_token: int,
+) -> list[int]:
+    kwargs = build_generate_kwargs(model, temperature, top_p, eos_token)
+    try:
+        out = model.generate(
+            prime_tensor,
+            generate_tokens,
+            **kwargs,
+        )
+    except TypeError:
+        out = model.generate(
+            prime_tensor,
+            generate_tokens,
+            return_prime=True,
+            eos_token=eos_token,
+        )
+    return out.detach().cpu().tolist()
+
+
+def score_candidate_events(events: list[dict], prompt_events: list[dict]) -> float:
+    notes = [
+        int(e.get("note", 0))
+        for e in events
+        if e.get("type") == "note_on" and int(e.get("velocity", 0)) > 0
+    ]
+    if not notes:
+        return -1e6
+
+    prompt_notes = [
+        int(e.get("note", 0))
+        for e in prompt_events
+        if e.get("type") == "note_on" and int(e.get("velocity", 0)) > 0
+    ]
+
+    min_note, max_note = keyboard_note_range()
+    out_of_range = sum(1 for note in notes if note < min_note or note > max_note)
+    repeats = sum(1 for i in range(1, len(notes)) if notes[i] == notes[i - 1])
+    big_leaps = sum(max(0, abs(notes[i] - notes[i - 1]) - 7) for i in range(1, len(notes)))
+
+    score = 0.0
+    score += min(len(notes), 24) * 0.25
+    score -= out_of_range * 3.5
+    score -= repeats * 0.2
+    score -= big_leaps * 0.08
+
+    if prompt_notes:
+        prompt_center = sum(prompt_notes) / len(prompt_notes)
+        notes_center = sum(notes) / len(notes)
+        score -= abs(notes_center - prompt_center) * 0.04
+        score -= abs(notes[0] - prompt_notes[-1]) * 0.03
+
+    return score
 
 
 def load_model_cached(
@@ -231,28 +653,16 @@ def load_model_cached(
     seq_len: int,
     pad_idx: int,
     device: str,
-) -> tuple[object, str, Path]:
-    from huggingface_hub import hf_hub_download
+) -> tuple[object, str, Path, int, int]:
     import torch
 
     cache_dir.mkdir(parents=True, exist_ok=True)
     resolved_device = resolve_device(device)
-    cache_key = f"{repo}:{filename}:{seq_len}:{pad_idx}:{resolved_device}"
 
-    if _MODEL_CACHE.get("key") == cache_key:
-        return (
-            _MODEL_CACHE["model"],
-            _MODEL_CACHE["device"],
-            _MODEL_CACHE["tools_dir"],
-        )
-
-    checkpoint_path = Path(
-        hf_hub_download(
-            repo_id=repo,
-            filename=filename,
-            local_dir=str(cache_dir),
-            repo_type="model",
-        )
+    checkpoint_path = download_checkpoint_with_fallback(
+        repo=repo,
+        filename=filename,
+        cache_dir=cache_dir,
     )
 
     tools_dir, x_transformer_dir = ensure_tegridy_tools(tegridy_dir)
@@ -263,18 +673,91 @@ def load_model_cached(
         torch.backends.cuda.matmul.allow_tf32 = True
         torch.backends.cudnn.allow_tf32 = True
 
-    model = build_model(seq_len, pad_idx)
-    load_checkpoint(model, checkpoint_path, resolved_device)
+    raw_state = load_checkpoint_state(checkpoint_path, "cpu")
+    inferred_seq_len, inferred_pad_idx, inferred_dim, depth_candidates = infer_model_shape_from_state(
+        raw_state,
+        fallback_seq_len=seq_len,
+        fallback_pad_idx=pad_idx,
+    )
+
+    cache_key = (
+        f"{repo}:{filename}:{resolved_device}:{inferred_seq_len}:{inferred_pad_idx}:"
+        f"{inferred_dim}:{'-'.join(str(d) for d in depth_candidates)}"
+    )
+    if _MODEL_CACHE.get("key") == cache_key:
+        return (
+            _MODEL_CACHE["model"],
+            _MODEL_CACHE["device"],
+            _MODEL_CACHE["tools_dir"],
+            _MODEL_CACHE["seq_len"],
+            _MODEL_CACHE["pad_idx"],
+        )
+
+    selected_model = None
+    selected_depth = None
+    last_error: RuntimeError | None = None
+    for depth in depth_candidates:
+        try:
+            model = build_model(
+                inferred_seq_len,
+                inferred_pad_idx,
+                dim=inferred_dim,
+                depth=depth,
+                heads=DEFAULT_MODEL_HEADS,
+            )
+            adapted_state = adapt_state_for_model(raw_state, model.state_dict())
+            missing, _ = model.load_state_dict(adapted_state, strict=False)
+            critical_missing = [
+                key
+                for key in missing
+                if not (key.endswith(".bias") or key.endswith(".gamma"))
+            ]
+            if critical_missing:
+                raise RuntimeError(
+                    f"critical missing keys for depth={depth}: {critical_missing[:5]}"
+                )
+            selected_model = model
+            selected_depth = depth
+            break
+        except RuntimeError as exc:
+            last_error = exc
+
+    if selected_model is None:
+        raise RuntimeError(
+            f"Could not load checkpoint {filename} with inferred configs. "
+            f"Tried depths={depth_candidates}. Last error: {last_error}"
+        )
+
+    model = selected_model
     model.to(resolved_device)
     model.eval()
+    if resolved_device == "cuda":
+        first_param = next(model.parameters(), None)
+        if first_param is None or not first_param.is_cuda:
+            raise RuntimeError("Godzilla model failed to move to CUDA device")
+
+    print(
+        "Loaded Godzilla checkpoint config:",
+        {
+            "filename": filename,
+            "seq_len": inferred_seq_len,
+            "pad_idx": inferred_pad_idx,
+            "dim": inferred_dim,
+            "depth": selected_depth,
+            "device": resolved_device,
+            "cuda_available": torch.cuda.is_available(),
+        },
+    )
 
     _MODEL_CACHE["key"] = cache_key
     _MODEL_CACHE["model"] = model
     _MODEL_CACHE["device"] = resolved_device
     _MODEL_CACHE["tools_dir"] = tools_dir
     _MODEL_CACHE["checkpoint_path"] = checkpoint_path
+    _MODEL_CACHE["seq_len"] = inferred_seq_len
+    _MODEL_CACHE["pad_idx"] = inferred_pad_idx
 
-    return model, resolved_device, tools_dir
+    return model, resolved_device, tools_dir, inferred_seq_len, inferred_pad_idx
 
 
 def generate_from_events(
@@ -282,6 +765,9 @@ def generate_from_events(
     *,
     generate_tokens: int,
     seed: int | None,
+    temperature: float,
+    top_p: float,
+    num_candidates: int,
     repo: str,
     filename: str,
     cache_dir: Path,
@@ -292,7 +778,7 @@ def generate_from_events(
 ) -> tuple[list[dict], list[int]]:
     import torch
 
-    model, resolved_device, _ = load_model_cached(
+    model, resolved_device, _, resolved_seq_len, resolved_pad_idx = load_model_cached(
         repo=repo,
         filename=filename,
         cache_dir=cache_dir,
@@ -302,31 +788,79 @@ def generate_from_events(
         device=device,
     )
 
-    if seed is not None:
-        torch.manual_seed(seed)
-        if resolved_device == "cuda":
-            torch.cuda.manual_seed_all(seed)
-
-    score_tokens = events_to_score_tokens(events)
-    prime = build_prime_tokens(score_tokens, seq_len)
+    prompt_events = extract_prompt_window(events)
+    transpose_shift = compute_transpose_shift(prompt_events)
+    transposed_prompt_events = transpose_events(prompt_events, transpose_shift)
+    score_tokens = events_to_score_tokens(transposed_prompt_events)
+    prime = build_prime_tokens(score_tokens, resolved_seq_len, resolved_pad_idx)
     prime_tensor = torch.tensor(prime, dtype=torch.long, device=resolved_device)
-
-    out = model.generate(
-        prime_tensor,
-        generate_tokens,
-        return_prime=True,
-        eos_token=707,
-    )
-
-    tokens = out.detach().cpu().tolist()
-    new_tokens = tokens[len(prime) :]
+    eos_token = resolve_eos_token(resolved_pad_idx)
 
     last_time_ms = 0.0
     if events:
         last_time_ms = max(float(e.get("time", 0.0)) for e in events) * 1000.0
 
-    new_events = tokens_to_events(new_tokens, offset_ms=last_time_ms)
-    return new_events, new_tokens
+    input_velocity = estimate_input_velocity(prompt_events)
+    best_events: list[dict] = []
+    best_tokens: list[int] = []
+    best_score = -1e9
+
+    candidate_count = max(1, min(6, int(num_candidates)))
+    generation_started = time.perf_counter()
+    candidate_timings_ms: list[float] = []
+    for idx in range(candidate_count):
+        if seed is not None:
+            sample_seed = int(seed) + idx
+            torch.manual_seed(sample_seed)
+            if resolved_device == "cuda":
+                torch.cuda.manual_seed_all(sample_seed)
+
+        candidate_started = time.perf_counter()
+        tokens = generate_tokens_sample(
+            model,
+            prime_tensor,
+            generate_tokens,
+            temperature=temperature,
+            top_p=top_p,
+            eos_token=eos_token,
+        )
+        if resolved_device == "cuda":
+            torch.cuda.synchronize()
+        candidate_timings_ms.append((time.perf_counter() - candidate_started) * 1000.0)
+        new_tokens = tokens[len(prime) :]
+
+        candidate_events = tokens_to_events(
+            new_tokens,
+            offset_ms=last_time_ms,
+            velocity=input_velocity,
+        )
+        candidate_events = transpose_events(candidate_events, -transpose_shift)
+        candidate_score = score_candidate_events(candidate_events, prompt_events)
+
+        if candidate_score > best_score or idx == 0:
+            best_score = candidate_score
+            best_events = candidate_events
+            best_tokens = new_tokens
+
+    generation_total_ms = (time.perf_counter() - generation_started) * 1000.0
+    avg_candidate_ms = (
+        sum(candidate_timings_ms) / len(candidate_timings_ms)
+        if candidate_timings_ms
+        else 0.0
+    )
+    print(
+        "Godzilla generation timing (model load excluded):",
+        {
+            "device": resolved_device,
+            "generate_tokens": generate_tokens,
+            "candidates": candidate_count,
+            "candidate_ms": [round(ms, 2) for ms in candidate_timings_ms],
+            "avg_candidate_ms": round(avg_candidate_ms, 2),
+            "total_generation_ms": round(generation_total_ms, 2),
+        },
+    )
+
+    return best_events, best_tokens
 
 
 def generate_godzilla_continuation(
@@ -334,12 +868,19 @@ def generate_godzilla_continuation(
     *,
     generate_tokens: int = 32,
     seed: int | None = None,
+    temperature: float = 0.9,
+    top_p: float = 0.95,
+    num_candidates: int = 1,
     device: str = "auto",
+    request: Any | None = None,
 ) -> tuple[list[dict], list[int]]:
     return generate_from_events(
         events,
         generate_tokens=generate_tokens,
         seed=seed,
+        temperature=temperature,
+        top_p=top_p,
+        num_candidates=num_candidates,
         repo=DEFAULT_REPO,
         filename=DEFAULT_FILENAME,
         cache_dir=Path(".cache/godzilla"),
@@ -349,7 +890,6 @@ def generate_godzilla_continuation(
         device=device,
     )
 
-
 class GodzillaMidiModel(MidiModel):
     def __init__(self) -> None:
         super().__init__(model_id="godzilla", name="Godzilla")
@@ -360,12 +900,21 @@ class GodzillaMidiModel(MidiModel):
         *,
         tokens: int = 32,
         seed: Optional[int] = None,
+        temperature: float = 0.9,
+        top_p: float = 0.95,
+        num_candidates: int = 1,
+        request: Any | None = None,
+        device: str = "auto",
     ) -> list[dict]:
         new_events, _ = generate_godzilla_continuation(
             events,
             generate_tokens=tokens,
             seed=seed,
-            device="auto",
+            temperature=temperature,
+            top_p=top_p,
+            num_candidates=num_candidates,
+            device=device,
+            request=request,
         )
         return new_events
 

pyproject.toml

@@ -5,6 +5,6 @@ description = "Add your description here"
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "gradio>=6.5.1",
+    "gradio==5.49.1",
     "mido>=1.3.3",
 ]

requirements.txt

@@ -3,4 +3,5 @@ mido
 torch
 huggingface_hub
 einops>=0.6
-einx
+einx
+spaces

static/keyboard.js

@@ -65,30 +65,105 @@ const keyShortcuts = {
 // DOM ELEMENTS
 // =============================================================================
 
-const keyboardEl = document.getElementById('keyboard');
-const statusEl = document.getElementById('status');
-const recordBtn = document.getElementById('recordBtn');
-const stopBtn = document.getElementById('stopBtn');
-const playbackBtn = document.getElementById('playbackBtn');
-const saveBtn = document.getElementById('saveBtn');
-const panicBtn = document.getElementById('panicBtn');
-const keyboardToggle = document.getElementById('keyboardToggle');
-const instrumentSelect = document.getElementById('instrumentSelect');
-const engineSelect = document.getElementById('engineSelect');
-const terminal = document.getElementById('terminal');
-const clearTerminal = document.getElementById('clearTerminal');
+let keyboardEl = null;
+let statusEl = null;
+let recordBtn = null;
+let stopBtn = null;
+let playbackBtn = null;
+let gameStartBtn = null;
+let gameStopBtn = null;
+let saveBtn = null;
+let panicBtn = null;
+let keyboardToggle = null;
+let instrumentSelect = null;
+let aiInstrumentSelect = null;
+let engineSelect = null;
+let runtimeSelect = null;
+let responseStyleSelect = null;
+let responseModeSelect = null;
+let responseLengthSelect = null;
+let terminal = null;
+let clearTerminal = null;
 
 // =============================================================================
 // STATE
 // =============================================================================
 
 let synth = null;
+let aiSynth = null;
 let recording = false;
 let startTime = 0;
 let events = [];
 const pressedKeys = new Set();
 let selectedEngine = 'parrot'; // Default engine
 let serverConfig = null; // Will hold instruments and keyboard config from server
+let gameActive = false;
+let gameTurn = 0;
+let gameTurnTimerId = null;
+let gameTurnTimeoutId = null;
+
+const USER_TURN_LIMIT_SEC = 6;
+const GAME_NEXT_TURN_DELAY_MS = 800;
+
+const RESPONSE_MODES = {
+  raw_godzilla: { label: 'Raw Godzilla' },
+  current_pipeline: { label: 'Current Pipeline' },
+  musical_polish: { label: 'Musical Polish' }
+};
+
+const RESPONSE_LENGTH_PRESETS = {
+  short: {
+    label: 'Short',
+    generateTokens: 32,
+    maxNotes: 8,
+    maxDurationSec: 4.0
+  },
+  medium: {
+    label: 'Medium',
+    generateTokens: 64,
+    maxNotes: 14,
+    maxDurationSec: 6.0
+  },
+  long: {
+    label: 'Long',
+    generateTokens: 96,
+    maxNotes: 20,
+    maxDurationSec: 8.0
+  },
+  extended: {
+    label: 'Extended',
+    generateTokens: 128,
+    maxNotes: 28,
+    maxDurationSec: 11.0
+  }
+};
+
+const RESPONSE_STYLE_PRESETS = {
+  melodic: {
+    label: 'Melodic',
+    maxNotes: 8,
+    maxDurationSec: 4.0,
+    smoothLeaps: true,
+    addMotifEcho: false,
+    playfulShift: false
+  },
+  motif_echo: {
+    label: 'Motif Echo',
+    maxNotes: 10,
+    maxDurationSec: 4.3,
+    smoothLeaps: true,
+    addMotifEcho: true,
+    playfulShift: false
+  },
+  playful: {
+    label: 'Playful',
+    maxNotes: 9,
+    maxDurationSec: 3.8,
+    smoothLeaps: true,
+    addMotifEcho: false,
+    playfulShift: true
+  }
+};
 
 // =============================================================================
 // INSTRUMENT FACTORY
@@ -128,16 +203,28 @@ let instruments = {}; // Will be populated after config is fetched
 function populateEngineSelect(engines) {
   if (!engineSelect || !Array.isArray(engines)) return;
 
+  // Tooltip map for engine options
+  const engineTooltips = {
+    'parrot': 'Repeats your exact melody',
+    'reverse_parrot': 'Plays your melody backward',
+    'godzilla_continue': 'MIDI transformer'
+  };
+
   engineSelect.innerHTML = '';
   engines.forEach(engine => {
     const option = document.createElement('option');
     option.value = engine.id;
     option.textContent = engine.name || engine.id;
+    // Add tooltip attribute for hover display
+    if (engineTooltips[engine.id]) {
+      option.setAttribute('data-tooltip', engineTooltips[engine.id]);
+    }
     engineSelect.appendChild(option);
   });
 
   if (engines.length > 0) {
-    selectedEngine = engines[0].id;
+    const hasGodzilla = engines.some(engine => engine.id === 'godzilla_continue');
+    selectedEngine = hasGodzilla ? 'godzilla_continue' : engines[0].id;
     engineSelect.value = selectedEngine;
   }
 }
@@ -151,10 +238,10 @@ async function initializeFromConfig() {
    * Fetch configuration from Python server and initialize UI
    */
   try {
-    const response = await fetch('/gradio_api/api/config');
-    if (!response.ok) throw new Error(`Config fetch failed: ${response.status}`);
-    
-    serverConfig = await response.json();
+    serverConfig = await callGradioBridge('config', {});
+    if (!serverConfig || typeof serverConfig !== 'object') {
+      throw new Error('Invalid config payload');
+    }
     
     // Build instruments from config
     instruments = buildInstruments(serverConfig.instruments);
@@ -203,6 +290,14 @@ function loadInstrument(type) {
   synth = instruments[type]();
 }
 
+function loadAIInstrument(type) {
+  if (aiSynth) {
+    aiSynth.releaseAll();
+    aiSynth.dispose();
+  }
+  aiSynth = instruments[type]();
+}
+
 // =============================================================================
 // KEYBOARD RENDERING
 // =============================================================================
@@ -247,6 +342,557 @@ function nowSec() {
   return performance.now() / 1000;
 }
 
+function getBridgeButton(buttonId) {
+  return document.getElementById(buttonId) || document.querySelector(`#${buttonId} button`);
+}
+
+function getBridgeField(fieldId) {
+  const root = document.getElementById(fieldId);
+  if (!root) return null;
+  if (root instanceof HTMLTextAreaElement || root instanceof HTMLInputElement) {
+    return root;
+  }
+  return root.querySelector('textarea, input');
+}
+
+function setFieldValue(field, value) {
+  const setter = field instanceof HTMLTextAreaElement
+    ? Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set
+    : Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+  if (setter) {
+    setter.call(field, value);
+  } else {
+    field.value = value;
+  }
+  field.dispatchEvent(new Event('input', { bubbles: true }));
+  field.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+function waitForFieldUpdate(field, previousValue, timeoutMs = 120000) {
+  return new Promise((resolve, reject) => {
+    const deadline = Date.now() + timeoutMs;
+
+    const check = () => {
+      const nextValue = field.value || '';
+      if (nextValue !== previousValue && nextValue !== '') {
+        resolve(nextValue);
+        return;
+      }
+      if (Date.now() > deadline) {
+        reject(new Error('Timed out waiting for Gradio response'));
+        return;
+      }
+      setTimeout(check, 80);
+    };
+
+    check();
+  });
+}
+
+async function waitForBridgeElements(timeoutMs = 20000) {
+  const required = [
+    { kind: 'field', id: 'vk_config_input' },
+    { kind: 'field', id: 'vk_config_output' },
+    { kind: 'button', id: 'vk_config_btn' },
+    { kind: 'field', id: 'vk_save_input' },
+    { kind: 'field', id: 'vk_save_output' },
+    { kind: 'button', id: 'vk_save_btn' },
+    { kind: 'field', id: 'vk_engine_input' },
+    { kind: 'field', id: 'vk_engine_cpu_output' },
+    { kind: 'button', id: 'vk_engine_cpu_btn' },
+    { kind: 'field', id: 'vk_engine_gpu_output' },
+    { kind: 'button', id: 'vk_engine_gpu_btn' }
+  ];
+
+  const started = Date.now();
+  while (Date.now() - started < timeoutMs) {
+    const allReady = required.every(item => (
+      item.kind === 'button'
+        ? Boolean(getBridgeButton(item.id))
+        : Boolean(getBridgeField(item.id))
+    ));
+    if (allReady) return;
+    await new Promise(resolve => setTimeout(resolve, 100));
+  }
+  throw new Error('Gradio bridge elements were not ready in time');
+}
+
+function cacheUIElements() {
+  keyboardEl = document.getElementById('keyboard');
+  statusEl = document.getElementById('status');
+  recordBtn = document.getElementById('recordBtn');
+  stopBtn = document.getElementById('stopBtn');
+  playbackBtn = document.getElementById('playbackBtn');
+  gameStartBtn = document.getElementById('gameStartBtn');
+  gameStopBtn = document.getElementById('gameStopBtn');
+  saveBtn = document.getElementById('saveBtn');
+  panicBtn = document.getElementById('panicBtn');
+  keyboardToggle = document.getElementById('keyboardToggle');
+  instrumentSelect = document.getElementById('instrumentSelect');
+  aiInstrumentSelect = document.getElementById('aiInstrumentSelect');
+  engineSelect = document.getElementById('engineSelect');
+  runtimeSelect = document.getElementById('runtimeSelect');
+  responseStyleSelect = document.getElementById('responseStyleSelect');
+  responseModeSelect = document.getElementById('responseModeSelect');
+  responseLengthSelect = document.getElementById('responseLengthSelect');
+  terminal = document.getElementById('terminal');
+  clearTerminal = document.getElementById('clearTerminal');
+}
+
+async function waitForKeyboardUIElements(timeoutMs = 20000) {
+  const requiredIds = [
+    'keyboard',
+    'status',
+    'recordBtn',
+    'stopBtn',
+    'playbackBtn',
+    'gameStartBtn',
+    'gameStopBtn',
+    'saveBtn',
+    'panicBtn',
+    'keyboardToggle',
+    'instrumentSelect',
+    'engineSelect',
+    'runtimeSelect',
+    'terminal',
+    'clearTerminal'
+  ];
+
+  const started = Date.now();
+  while (Date.now() - started < timeoutMs) {
+    const allReady = requiredIds.every(id => Boolean(document.getElementById(id)));
+    if (allReady) return;
+    await new Promise(resolve => setTimeout(resolve, 100));
+  }
+  throw new Error('Keyboard UI elements were not ready in time');
+}
+
+const BRIDGE_ACTIONS = {
+  config: {
+    inputId: 'vk_config_input',
+    outputId: 'vk_config_output',
+    buttonId: 'vk_config_btn'
+  },
+  save_midi: {
+    inputId: 'vk_save_input',
+    outputId: 'vk_save_output',
+    buttonId: 'vk_save_btn'
+  },
+  process_engine_cpu: {
+    inputId: 'vk_engine_input',
+    outputId: 'vk_engine_cpu_output',
+    buttonId: 'vk_engine_cpu_btn'
+  },
+  process_engine_gpu: {
+    inputId: 'vk_engine_input',
+    outputId: 'vk_engine_gpu_output',
+    buttonId: 'vk_engine_gpu_btn'
+  }
+};
+
+async function callGradioBridge(action, payload) {
+  const bridge = BRIDGE_ACTIONS[action];
+  if (!bridge) {
+    throw new Error(`Unknown bridge action: ${action}`);
+  }
+
+  const inputField = getBridgeField(bridge.inputId);
+  const outputField = getBridgeField(bridge.outputId);
+  const button = getBridgeButton(bridge.buttonId);
+  if (!inputField || !outputField || !button) {
+    throw new Error(`Bridge controls missing for action: ${action}`);
+  }
+
+  const requestPayload = payload === undefined ? {} : payload;
+  setFieldValue(inputField, JSON.stringify(requestPayload));
+
+  const previousOutput = outputField.value || '';
+  setFieldValue(outputField, '');
+  button.click();
+
+  const outputText = await waitForFieldUpdate(outputField, previousOutput);
+  try {
+    return JSON.parse(outputText);
+  } catch (err) {
+    throw new Error(`Invalid bridge JSON for ${action}: ${outputText}`);
+  }
+}
+
+function sortEventsChronologically(eventsToSort) {
+  return [...eventsToSort].sort((a, b) => {
+    const ta = Number(a.time) || 0;
+    const tb = Number(b.time) || 0;
+    if (ta !== tb) return ta - tb;
+    if (a.type === b.type) return 0;
+    if (a.type === 'note_off') return -1;
+    if (b.type === 'note_off') return 1;
+    return 0;
+  });
+}
+
+function normalizeEventsToZero(rawEvents) {
+  if (!Array.isArray(rawEvents) || rawEvents.length === 0) {
+    return [];
+  }
+
+  const cleaned = rawEvents
+    .filter(e => e && (e.type === 'note_on' || e.type === 'note_off'))
+    .map(e => ({
+      type: e.type,
+      note: Number(e.note) || 0,
+      velocity: Number(e.velocity) || 0,
+      time: Number(e.time) || 0,
+      channel: Number(e.channel) || 0
+    }));
+
+  if (cleaned.length === 0) {
+    return [];
+  }
+
+  const minTime = Math.min(...cleaned.map(e => e.time));
+  return sortEventsChronologically(
+    cleaned.map(e => ({
+      ...e,
+      time: Math.max(0, e.time - minTime)
+    }))
+  );
+}
+
+function clampMidiNote(note) {
+  const minNote = baseMidi;
+  const maxNote = baseMidi + (numOctaves * 12) - 1;
+  return Math.max(minNote, Math.min(maxNote, note));
+}
+
+function eventsToNotePairs(rawEvents) {
+  const pairs = [];
+  const activeByNote = new Map();
+  const sorted = sortEventsChronologically(rawEvents);
+
+  sorted.forEach(event => {
+    const note = Number(event.note) || 0;
+    const time = Number(event.time) || 0;
+    const velocity = Number(event.velocity) || 100;
+
+    if (event.type === 'note_on' && velocity > 0) {
+      if (!activeByNote.has(note)) activeByNote.set(note, []);
+      activeByNote.get(note).push({ start: time, velocity });
+      return;
+    }
+
+    if (event.type === 'note_off' || (event.type === 'note_on' && velocity <= 0)) {
+      const stack = activeByNote.get(note);
+      if (!stack || stack.length === 0) return;
+      const active = stack.shift();
+      const end = Math.max(active.start + 0.05, time);
+      pairs.push({
+        note: clampMidiNote(note),
+        start: active.start,
+        end,
+        velocity: Math.max(1, Math.min(127, active.velocity))
+      });
+    }
+  });
+
+  return pairs.sort((a, b) => a.start - b.start);
+}
+
+function notePairsToEvents(pairs) {
+  const eventsOut = [];
+  pairs.forEach(pair => {
+    const note = clampMidiNote(Math.round(pair.note));
+    const start = Math.max(0, Number(pair.start) || 0);
+    const end = Math.max(start + 0.05, Number(pair.end) || start + 0.2);
+    const velocity = Math.max(1, Math.min(127, Math.round(Number(pair.velocity) || 100)));
+
+    eventsOut.push({
+      type: 'note_on',
+      note,
+      velocity,
+      time: start,
+      channel: 0
+    });
+    eventsOut.push({
+      type: 'note_off',
+      note,
+      velocity: 0,
+      time: end,
+      channel: 0
+    });
+  });
+  return sortEventsChronologically(eventsOut);
+}
+
+function trimNotePairs(pairs, maxNotes, maxDurationSec) {
+  const out = [];
+  for (let i = 0; i < pairs.length; i++) {
+    if (out.length >= maxNotes) break;
+    if (pairs[i].start > maxDurationSec) break;
+    const boundedEnd = Math.min(pairs[i].end, maxDurationSec);
+    out.push({
+      ...pairs[i],
+      end: Math.max(pairs[i].start + 0.05, boundedEnd)
+    });
+  }
+  return out;
+}
+
+function smoothPairLeaps(pairs, maxLeapSemitones = 7) {
+  if (pairs.length <= 1) return pairs;
+  const smoothed = [{ ...pairs[0], note: clampMidiNote(pairs[0].note) }];
+  for (let i = 1; i < pairs.length; i++) {
+    const prev = smoothed[i - 1].note;
+    let current = pairs[i].note;
+    while (Math.abs(current - prev) > maxLeapSemitones) {
+      current += current > prev ? -12 : 12;
+    }
+    smoothed.push({
+      ...pairs[i],
+      note: clampMidiNote(current)
+    });
+  }
+  return smoothed;
+}
+
+function appendMotifEcho(pairs, callEvents, maxDurationSec) {
+  const callPitches = normalizeEventsToZero(callEvents)
+    .filter(e => e.type === 'note_on' && e.velocity > 0)
+    .map(e => clampMidiNote(Number(e.note) || 0))
+    .slice(0, 2);
+
+  if (callPitches.length === 0) return pairs;
+
+  let nextStart = pairs.length > 0 ? pairs[pairs.length - 1].end + 0.1 : 0.2;
+  const out = [...pairs];
+  callPitches.forEach((pitch, idx) => {
+    const start = nextStart + (idx * 0.28);
+    if (start >= maxDurationSec) return;
+    out.push({
+      note: pitch,
+      start,
+      end: Math.min(maxDurationSec, start + 0.22),
+      velocity: 96
+    });
+  });
+  return out;
+}
+
+function applyPlayfulShift(pairs) {
+  return pairs.map((pair, idx) => {
+    if (idx % 2 === 0) return pair;
+    const direction = idx % 4 === 1 ? 2 : -2;
+    return {
+      ...pair,
+      note: clampMidiNote(pair.note + direction)
+    };
+  });
+}
+
+// Generic preset getter - consolidates 3 similar functions
+function getSelectedPreset(selectElement, presetMap, defaultKey, idKey) {
+  const id = selectElement ? selectElement.value : defaultKey;
+  return {
+    [idKey]: id,
+    ...(presetMap[id] || presetMap[defaultKey])
+  };
+}
+
+function getSelectedStylePreset() {
+  return getSelectedPreset(responseStyleSelect, RESPONSE_STYLE_PRESETS, 'melodic', 'styleId');
+}
+
+function getSelectedResponseMode() {
+  return getSelectedPreset(responseModeSelect, RESPONSE_MODES, 'raw_godzilla', 'modeId');
+}
+
+function getSelectedResponseLengthPreset() {
+  return getSelectedPreset(responseLengthSelect, RESPONSE_LENGTH_PRESETS, 'short', 'lengthId');
+}
+
+function getDecodingOptionsForMode(modeId) {
+  if (modeId === 'raw_godzilla') {
+    return { temperature: 1.0, top_p: 0.98, num_candidates: 1 };
+  }
+  if (modeId === 'musical_polish') {
+    return { temperature: 0.85, top_p: 0.93, num_candidates: 4 };
+  }
+  return { temperature: 0.9, top_p: 0.95, num_candidates: 3 };
+}
+
+function getSelectedDecodingOptions() {
+  const mode = getSelectedResponseMode();
+  return getDecodingOptionsForMode(mode.modeId);
+}
+
+function getSelectedRuntime() {
+  if (!runtimeSelect || !runtimeSelect.value) return 'auto';
+  return runtimeSelect.value;
+}
+
+function quantizeToStep(value, step) {
+  if (!Number.isFinite(value) || !Number.isFinite(step) || step <= 0) {
+    return value;
+  }
+  return Math.round(value / step) * step;
+}
+
+function moveByOctaveTowardTarget(note, target) {
+  let candidate = note;
+  while (candidate + 12 <= target) {
+    candidate += 12;
+  }
+  while (candidate - 12 >= target) {
+    candidate -= 12;
+  }
+  const up = clampMidiNote(candidate + 12);
+  const down = clampMidiNote(candidate - 12);
+  const current = clampMidiNote(candidate);
+  const best = [current, up, down].reduce((winner, value) => {
+    return Math.abs(value - target) < Math.abs(winner - target) ? value : winner;
+  }, current);
+  return clampMidiNote(best);
+}
+
+function getCallProfile(callEvents) {
+  const normalizedCall = normalizeEventsToZero(callEvents);
+  const pitches = normalizedCall
+    .filter(e => e.type === 'note_on' && e.velocity > 0)
+    .map(e => clampMidiNote(Number(e.note) || baseMidi));
+  const velocities = normalizedCall
+    .filter(e => e.type === 'note_on' && e.velocity > 0)
+    .map(e => Math.max(1, Math.min(127, Number(e.velocity) || 100)));
+
+  const keyboardCenter = baseMidi + Math.floor((numOctaves * 12) / 2);
+  const center = pitches.length > 0
+    ? pitches.reduce((sum, value) => sum + value, 0) / pitches.length
+    : keyboardCenter;
+  const finalPitch = pitches.length > 0 ? pitches[pitches.length - 1] : keyboardCenter;
+  const avgVelocity = velocities.length > 0
+    ? velocities.reduce((sum, value) => sum + value, 0) / velocities.length
+    : 100;
+
+  return { pitches, center, finalPitch, avgVelocity };
+}
+
+function applyResponseStyle(rawResponseEvents, callEvents, lengthPreset) {
+  const preset = getSelectedStylePreset();
+  const targetMaxNotes = Math.max(preset.maxNotes, lengthPreset.maxNotes);
+  const targetMaxDuration = Math.max(preset.maxDurationSec, lengthPreset.maxDurationSec);
+  let notePairs = eventsToNotePairs(normalizeEventsToZero(rawResponseEvents));
+  notePairs = trimNotePairs(notePairs, targetMaxNotes, targetMaxDuration);
+  if (preset.playfulShift) {
+    notePairs = applyPlayfulShift(notePairs);
+  }
+  if (preset.smoothLeaps) {
+    notePairs = smoothPairLeaps(notePairs);
+  }
+  if (preset.addMotifEcho) {
+    notePairs = appendMotifEcho(notePairs, callEvents, targetMaxDuration);
+    notePairs = trimNotePairs(notePairs, targetMaxNotes, targetMaxDuration);
+  }
+  return {
+    styleLabel: preset.label,
+    events: notePairsToEvents(notePairs)
+  };
+}
+
+function applyMusicalPolish(rawResponseEvents, callEvents, lengthPreset) {
+  const stylePreset = getSelectedStylePreset();
+  const callProfile = getCallProfile(callEvents);
+  let notePairs = eventsToNotePairs(normalizeEventsToZero(rawResponseEvents));
+
+  if (notePairs.length === 0) {
+    const fallbackPitches = callProfile.pitches.slice(0, 4);
+    if (fallbackPitches.length === 0) {
+      return [];
+    }
+    notePairs = fallbackPitches.map((pitch, idx) => {
+      const start = idx * 0.28;
+      return {
+        note: clampMidiNote(pitch),
+        start,
+        end: start + 0.24,
+        velocity: Math.round(callProfile.avgVelocity)
+      };
+    });
+  }
+
+  const polished = [];
+  let previousStart = -1;
+  for (let i = 0; i < notePairs.length; i++) {
+    const source = notePairs[i];
+    let note = moveByOctaveTowardTarget(source.note, callProfile.center);
+    if (polished.length > 0) {
+      const prev = polished[polished.length - 1].note;
+      while (Math.abs(note - prev) > 7) {
+        note += note > prev ? -12 : 12;
+      }
+      note = clampMidiNote(note);
+    }
+
+    const quantizedStart = Math.max(0, quantizeToStep(source.start, 0.125));
+    const start = Math.max(quantizedStart, previousStart + 0.06);
+    previousStart = start;
+
+    const rawDur = Math.max(0.1, source.end - source.start);
+    const duration = Math.max(0.12, Math.min(0.9, quantizeToStep(rawDur, 0.0625)));
+    const velocity = Math.round(
+      (Math.max(1, Math.min(127, source.velocity)) * 0.6)
+      + (callProfile.avgVelocity * 0.4)
+    );
+
+    polished.push({
+      note,
+      start,
+      end: start + duration,
+      velocity: Math.max(1, Math.min(127, velocity))
+    });
+  }
+
+  if (polished.length > 0) {
+    polished[polished.length - 1].note = moveByOctaveTowardTarget(
+      polished[polished.length - 1].note,
+      callProfile.finalPitch
+    );
+  }
+
+  let out = trimNotePairs(polished, lengthPreset.maxNotes, lengthPreset.maxDurationSec);
+  if (stylePreset.addMotifEcho) {
+    out = appendMotifEcho(out, callEvents, lengthPreset.maxDurationSec);
+  }
+  if (stylePreset.playfulShift) {
+    out = applyPlayfulShift(out);
+  }
+  out = smoothPairLeaps(out, 6);
+  out = trimNotePairs(out, lengthPreset.maxNotes, lengthPreset.maxDurationSec);
+  return out;
+}
+
+function buildProcessedAIResponse(rawResponseEvents, callEvents) {
+  const mode = getSelectedResponseMode();
+  const lengthPreset = getSelectedResponseLengthPreset();
+
+  if (mode.modeId === 'raw_godzilla') {
+    return {
+      label: `${mode.label} (${lengthPreset.label})`,
+      events: normalizeEventsToZero(rawResponseEvents || [])
+    };
+  }
+
+  if (mode.modeId === 'musical_polish') {
+    return {
+      label: `${mode.label} (${lengthPreset.label})`,
+      events: notePairsToEvents(applyMusicalPolish(rawResponseEvents || [], callEvents, lengthPreset))
+    };
+  }
+
+  const styled = applyResponseStyle(rawResponseEvents || [], callEvents, lengthPreset);
+  return {
+    label: `${mode.label} / ${styled.styleLabel} (${lengthPreset.label})`,
+    events: styled.events
+  };
+}
+
 // =============================================================================
 // TERMINAL LOGGING
 // =============================================================================
@@ -362,37 +1008,39 @@ function getKeyElement(midiNote) {
   return keyboardEl.querySelector(`.key[data-midi="${midiNote}"]`);
 }
 
-document.addEventListener('keydown', async (ev) => {
-  if (!keyboardToggle.checked) return;
-  const key = ev.key.toLowerCase();
-  const keyMap = window.keyMapFromServer || keyMap; // Use server config if available, fallback to hardcoded
-  if (!keyMap[key] || pressedKeys.has(key)) return;
-  
-  ev.preventDefault();
-  pressedKeys.add(key);
-  
-  await Tone.start();
-  
-  const midiNote = keyMap[key];
-  const keyEl = getKeyElement(midiNote);
-  if (keyEl) keyEl.style.filter = 'brightness(0.85)';
-  noteOn(midiNote, 100);
-});
-
-document.addEventListener('keyup', (ev) => {
-  if (!keyboardToggle.checked) return;
-  const key = ev.key.toLowerCase();
-  const keyMap = window.keyMapFromServer || keyMap; // Use server config if available, fallback to hardcoded
-  if (!keyMap[key] || !pressedKeys.has(key)) return;
-  
-  ev.preventDefault();
-  pressedKeys.delete(key);
-  
-  const midiNote = keyMap[key];
-  const keyEl = getKeyElement(midiNote);
-  if (keyEl) keyEl.style.filter = '';
-  noteOff(midiNote);
-});
+function bindGlobalKeyboardHandlers() {
+  document.addEventListener('keydown', async (ev) => {
+    if (!keyboardToggle || !keyboardToggle.checked) return;
+    const key = ev.key.toLowerCase();
+    const activeKeyMap = window.keyMapFromServer || keyMap; // Use server config if available, fallback to hardcoded
+    if (!activeKeyMap[key] || pressedKeys.has(key)) return;
+    
+    ev.preventDefault();
+    pressedKeys.add(key);
+    
+    await Tone.start();
+    
+    const midiNote = activeKeyMap[key];
+    const keyEl = getKeyElement(midiNote);
+    if (keyEl) keyEl.style.filter = 'brightness(0.85)';
+    noteOn(midiNote, 100);
+  });
+
+  document.addEventListener('keyup', (ev) => {
+    if (!keyboardToggle || !keyboardToggle.checked) return;
+    const key = ev.key.toLowerCase();
+    const activeKeyMap = window.keyMapFromServer || keyMap; // Use server config if available, fallback to hardcoded
+    if (!activeKeyMap[key] || !pressedKeys.has(key)) return;
+    
+    ev.preventDefault();
+    pressedKeys.delete(key);
+    
+    const midiNote = activeKeyMap[key];
+    const keyEl = getKeyElement(midiNote);
+    if (keyEl) keyEl.style.filter = '';
+    noteOff(midiNote);
+  });
+}
 
 // =============================================================================
 // MOUSE/TOUCH INPUT
@@ -451,36 +1099,7 @@ async function saveMIDI() {
   saveBtn.disabled = true;
   
   try {
-    const startResp = await fetch('/gradio_api/call/save_midi', {
-      method: 'POST',
-      headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({data: [events]})
-    });
-    
-    if (!startResp.ok) {
-      const txt = await startResp.text();
-      throw new Error('Server error: ' + txt);
-    }
-    
-    const startJson = await startResp.json();
-    if (!startJson || !startJson.event_id) {
-      throw new Error('Invalid API response');
-    }
-    
-    const resultResp = await fetch(`/gradio_api/call/save_midi/${startJson.event_id}`);
-    if (!resultResp.ok) {
-      const txt = await resultResp.text();
-      throw new Error('Server error: ' + txt);
-    }
-    
-    const resultText = await resultResp.text();
-    const dataLine = resultText.split('\n').find(line => line.startsWith('data:'));
-    if (!dataLine) {
-      throw new Error('Invalid API response');
-    }
-    
-    const payloadList = JSON.parse(dataLine.replace('data:', '').trim());
-    const payload = Array.isArray(payloadList) ? payloadList[0] : null;
+    const payload = await callGradioBridge('save_midi', events);
     if (!payload || payload.error || !payload.midi_base64) {
       throw new Error(payload && payload.error ? payload.error : 'Invalid API response');
     }
@@ -507,214 +1126,568 @@ async function saveMIDI() {
   }
 }
 
-// =============================================================================
-// EVENT LISTENERS
-// =============================================================================
+function clearGameTimers() {
+  if (gameTurnTimerId !== null) {
+    clearInterval(gameTurnTimerId);
+    gameTurnTimerId = null;
+  }
+  if (gameTurnTimeoutId !== null) {
+    clearTimeout(gameTurnTimeoutId);
+    gameTurnTimeoutId = null;
+  }
+}
 
-instrumentSelect.addEventListener('change', () => {
-  loadInstrument(instrumentSelect.value);
-});
+async function processEventsThroughEngine(inputEvents, options = {}) {
+  const selectedEngineId = engineSelect.value;
+  if (!selectedEngineId || selectedEngineId === 'parrot') {
+    return { events: inputEvents };
+  }
 
-keyboardToggle.addEventListener('change', () => {
-  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];
-      const keyEl = getKeyElement(midiNote);
-      if (keyEl) keyEl.style.filter = '';
-      noteOff(midiNote);
-    });
-    pressedKeys.clear();
+  const requestOptions = { ...options };
+  const runtimeMode = getSelectedRuntime();
+  if (
+    selectedEngineId === 'godzilla_continue'
+    && typeof requestOptions.generate_tokens !== 'number'
+  ) {
+    requestOptions.generate_tokens = RESPONSE_LENGTH_PRESETS.medium.generateTokens;
   }
-});
 
-clearTerminal.addEventListener('click', () => {
-  terminal.innerHTML = '';
-  logToTerminal('╔═══════════════════════════════════════════════════════╗', 'timestamp');
-  logToTerminal('║         🎹 MIDI MONITOR INITIALIZED 🎹              ║', 'timestamp');
-  logToTerminal('╚═══════════════════════════════════════════════════════╝', 'timestamp');
-  logToTerminal('Ready to capture MIDI events...', 'timestamp');
-  logToTerminal('', '');
-});
+  let bridgeAction = 'process_engine_cpu';
+  if (selectedEngineId === 'godzilla_continue') {
+    if (runtimeMode === 'gpu' || runtimeMode === 'auto') {
+      bridgeAction = 'process_engine_gpu';
+    }
+  }
 
-recordBtn.addEventListener('click', async () => {
-  await Tone.start();
-  beginRecord();
-});
+  const requestPayload = {
+    engine_id: selectedEngineId,
+    events: inputEvents,
+    options: requestOptions
+  };
 
-stopBtn.addEventListener('click', () => stopRecord());
+  let result;
+  try {
+    result = await callGradioBridge(bridgeAction, requestPayload);
+  } catch (err) {
+    if (
+      selectedEngineId === 'godzilla_continue'
+      && runtimeMode === 'auto'
+      && bridgeAction === 'process_engine_gpu'
+    ) {
+      logToTerminal('Runtime auto: ZeroGPU failed, retrying on CPU.', 'timestamp');
+      result = await callGradioBridge('process_engine_cpu', requestPayload);
+    } else {
+      throw err;
+    }
+  }
 
-engineSelect.addEventListener('change', (e) => {
-  selectedEngine = e.target.value;
-  logToTerminal(`Engine switched to: ${selectedEngine}`, 'timestamp');
-});
+  if (
+    result
+    && result.error
+    && selectedEngineId === 'godzilla_continue'
+    && runtimeMode === 'auto'
+    && bridgeAction === 'process_engine_gpu'
+  ) {
+    logToTerminal(`Runtime auto: ZeroGPU error (${result.error}), retrying on CPU.`, 'timestamp');
+    result = await callGradioBridge('process_engine_cpu', requestPayload);
+  }
 
-playbackBtn.addEventListener('click', async () => {
-  if (events.length === 0) return alert('No recording to play back');
-  
-  // Ensure all notes are off before starting playback
-  if (synth) {
-    synth.releaseAll();
+  if (result && result.error) {
+    throw new Error(result.error);
+  }
+  if (!result || !Array.isArray(result.events)) {
+    throw new Error('Engine returned no events');
+  }
+  if (result.warning) {
+    logToTerminal(`ENGINE WARNING: ${result.warning}`, 'timestamp');
   }
-  keyboardEl.querySelectorAll('.key').forEach(k => {
-    k.style.filter = '';
-  });
-  
-  statusEl.textContent = 'Playing back...';
-  playbackBtn.disabled = true;
-  recordBtn.disabled = true;
-  
-  logToTerminal('', '');
-  logToTerminal('♫♫♫ PLAYBACK STARTED ♫♫♫', 'timestamp');
-  logToTerminal('', '');
-  
-  try {
-    // Process events through the selected engine
-    let processedEvents = events;
-    const selectedEngine = engineSelect.value;
-    
-    if (selectedEngine && selectedEngine !== 'parrot') {
-      // Step 1: Start the engine processing call
-      const startResp = await fetch('/gradio_api/call/process_engine', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          data: [{
-            engine_id: selectedEngine,
-            events: events
-          }]
-        })
-      });
-      
-      if (!startResp.ok) {
-        console.error('Engine API start failed:', startResp.status);
-      } else {
-        const startJson = await startResp.json();
 
-        
-        // Step 2: Poll for the result
-        if (startJson && startJson.event_id) {
-          const resultResp = await fetch(`/gradio_api/call/process_engine/${startJson.event_id}`);
-          if (resultResp.ok) {
-            const resultText = await resultResp.text();
-            const dataLine = resultText.split('\n').find(line => line.startsWith('data:'));
-            if (dataLine) {
-              const payloadList = JSON.parse(dataLine.replace('data:', '').trim());
-              const result = Array.isArray(payloadList) ? payloadList[0] : null;
-              
-              if (result && result.events) {
-                processedEvents = result.events;
-              }
-            }
-          }
-        }
-      }
+  return result;
+}
+
+function playEvents(eventsToPlay, { logSymbols = true, useAISynth = false } = {}) {
+  return new Promise((resolve) => {
+    if (!Array.isArray(eventsToPlay) || eventsToPlay.length === 0) {
+      resolve();
+      return;
     }
-    
-    // Play back the recorded events
-    statusEl.textContent = 'Playing back...';
+
+    const playbackSynth = useAISynth && aiSynth ? aiSynth : synth;
     let eventIndex = 0;
-    
+
     const playEvent = () => {
-      if (eventIndex >= processedEvents.length) {
-        // Playback complete - ensure all notes are off
-        if (synth) {
-          synth.releaseAll();
-        }
-        
-        // Clear all key highlights
+      if (eventIndex >= eventsToPlay.length) {
+        if (playbackSynth) playbackSynth.releaseAll();
         keyboardEl.querySelectorAll('.key').forEach(k => {
           k.style.filter = '';
         });
-        
-        statusEl.textContent = 'Playback complete';
-        playbackBtn.disabled = false;
-        recordBtn.disabled = false;
-        
-        logToTerminal('', '');
-        logToTerminal('♫♫♫ PLAYBACK FINISHED ♫♫♫', 'timestamp');
-        logToTerminal('', '');
+        resolve();
         return;
       }
-      
-      const event = processedEvents[eventIndex];
-      const nextTime = eventIndex + 1 < processedEvents.length
-        ? processedEvents[eventIndex + 1].time
+
+      const event = eventsToPlay[eventIndex];
+      const nextTime = eventIndex + 1 < eventsToPlay.length
+        ? eventsToPlay[eventIndex + 1].time
         : event.time;
-      
+
       if (event.type === 'note_on') {
         const freq = Tone.Frequency(event.note, "midi").toFrequency();
-        synth.triggerAttack(freq, undefined, event.velocity / 127);
-        
-        const noteName = midiToNoteName(event.note);
-        logToTerminal(
-          `[${event.time.toFixed(3)}s] ► ${noteName} (${event.note})`,
-          'note-on'
-        );
-        
-        // Highlight the key being played
+        if (playbackSynth) {
+          playbackSynth.triggerAttack(freq, undefined, event.velocity / 127);
+        }
+        if (logSymbols) {
+          const noteName = midiToNoteName(event.note);
+          logToTerminal(
+            `[${event.time.toFixed(3)}s] ► ${noteName} (${event.note})`,
+            'note-on'
+          );
+        }
         const keyEl = getKeyElement(event.note);
         if (keyEl) keyEl.style.filter = 'brightness(0.7)';
       } else if (event.type === 'note_off') {
         const freq = Tone.Frequency(event.note, "midi").toFrequency();
-        synth.triggerRelease(freq);
-        
-        const noteName = midiToNoteName(event.note);
-        logToTerminal(
-          `[${event.time.toFixed(3)}s] ◄ ${noteName}`,
-          'note-off'
-        );
-        
-        // Remove key highlight
+        if (playbackSynth) {
+          playbackSynth.triggerRelease(freq);
+        }
+        if (logSymbols) {
+          const noteName = midiToNoteName(event.note);
+          logToTerminal(
+            `[${event.time.toFixed(3)}s] ◄ ${noteName}`,
+            'note-off'
+          );
+        }
         const keyEl = getKeyElement(event.note);
         if (keyEl) keyEl.style.filter = '';
       }
-      
+
       eventIndex++;
       const deltaTime = Math.max(0, nextTime - event.time);
       setTimeout(playEvent, deltaTime * 1000);
     };
-    
+
     playEvent();
-  } catch (err) {
-    console.error('Playback error:', err);
-    statusEl.textContent = 'Playback error: ' + err.message;
-    playbackBtn.disabled = false;
-    recordBtn.disabled = false;
-    
-    // Ensure all notes are off on error
-    if (synth) {
-      synth.releaseAll();
+  });
+}
+
+async function startGameLoop() {
+  if (gameActive) return;
+  await Tone.start();
+
+  if (engineSelect.querySelector('option[value="godzilla_continue"]')) {
+    engineSelect.value = 'godzilla_continue';
+    selectedEngine = 'godzilla_continue';
+  }
+
+  gameActive = true;
+  gameTurn = 0;
+  gameStartBtn.disabled = true;
+  gameStopBtn.disabled = false;
+  recordBtn.disabled = true;
+  stopBtn.disabled = true;
+  playbackBtn.disabled = true;
+  saveBtn.disabled = true;
+  statusEl.textContent = 'Game started';
+
+  logToTerminal('', '');
+  logToTerminal('🎮 CALL & RESPONSE GAME STARTED', 'timestamp');
+  logToTerminal(
+    `Flow: ${USER_TURN_LIMIT_SEC}s call, AI response, repeat until you stop.`,
+    'timestamp'
+  );
+  const stylePreset = getSelectedStylePreset();
+  const modePreset = getSelectedResponseMode();
+  const lengthPreset = getSelectedResponseLengthPreset();
+  const decodingPreset = getSelectedDecodingOptions();
+  logToTerminal(
+    `AI mode: ${modePreset.label} | length: ${lengthPreset.label} | style: ${stylePreset.label}`,
+    'timestamp'
+  );
+  logToTerminal(
+    `Decoding: temp=${decodingPreset.temperature} top_p=${decodingPreset.top_p} candidates=${decodingPreset.num_candidates}`,
+    'timestamp'
+  );
+  logToTerminal('', '');
+
+  await startUserTurn();
+}
+
+function stopGameLoop(reason = 'Game stopped') {
+  clearGameTimers();
+  if (recording) {
+    stopRecord();
+  }
+  gameActive = false;
+  gameStartBtn.disabled = false;
+  gameStopBtn.disabled = true;
+  recordBtn.disabled = false;
+  stopBtn.disabled = true;
+  playbackBtn.disabled = events.length === 0;
+  saveBtn.disabled = events.length === 0;
+  statusEl.textContent = reason;
+  if (synth) synth.releaseAll();
+  if (aiSynth) aiSynth.releaseAll();
+  keyboardEl.querySelectorAll('.key').forEach(k => {
+    k.style.filter = '';
+  });
+  logToTerminal(`🎮 ${reason}`, 'timestamp');
+}
+
+async function startUserTurn() {
+  if (!gameActive) return;
+  clearGameTimers();
+
+  gameTurn += 1;
+  beginRecord();
+  gameStartBtn.disabled = true;
+  gameStopBtn.disabled = false;
+  recordBtn.disabled = true;
+  stopBtn.disabled = true;
+  playbackBtn.disabled = true;
+  saveBtn.disabled = true;
+
+  let remaining = USER_TURN_LIMIT_SEC;
+  statusEl.textContent = `Turn ${gameTurn}: your call (${remaining}s)`;
+  logToTerminal(`Turn ${gameTurn}: your call starts now`, 'timestamp');
+
+  gameTurnTimerId = setInterval(() => {
+    if (!gameActive) return;
+    remaining -= 1;
+    if (remaining > 0) {
+      statusEl.textContent = `Turn ${gameTurn}: your call (${remaining}s)`;
     }
-    keyboardEl.querySelectorAll('.key').forEach(k => {
-      k.style.filter = '';
-    });
+  }, 1000);
+
+  gameTurnTimeoutId = setTimeout(() => {
+    void finishUserTurn();
+  }, USER_TURN_LIMIT_SEC * 1000);
+}
+
+async function finishUserTurn() {
+  if (!gameActive) return;
+  clearGameTimers();
+  if (recording) stopRecord();
+  recordBtn.disabled = true;
+  stopBtn.disabled = true;
+  playbackBtn.disabled = true;
+  saveBtn.disabled = true;
+
+  const callEvents = [...events];
+  if (callEvents.length === 0) {
+    statusEl.textContent = `Turn ${gameTurn}: no notes, try again`;
+    logToTerminal('No notes captured, restarting your turn...', 'timestamp');
+    setTimeout(() => {
+      void startUserTurn();
+    }, GAME_NEXT_TURN_DELAY_MS);
+    return;
   }
-});
 
-saveBtn.addEventListener('click', () => saveMIDI());
+  try {
+    statusEl.textContent = `Turn ${gameTurn}: AI thinking...`;
+    logToTerminal(`Turn ${gameTurn}: AI is thinking...`, 'timestamp');
 
-panicBtn.addEventListener('click', () => {
-  // Stop all notes immediately
-  if (synth) {
-    synth.releaseAll();
+    const lengthPreset = getSelectedResponseLengthPreset();
+    const promptEvents = normalizeEventsToZero(callEvents);
+    const decodingOptions = getSelectedDecodingOptions();
+    const result = await processEventsThroughEngine(promptEvents, {
+      generate_tokens: lengthPreset.generateTokens,
+      ...decodingOptions
+    });
+    const processedResponse = buildProcessedAIResponse(result.events || [], callEvents);
+    const aiEvents = processedResponse.events;
+
+    if (!gameActive) return;
+
+    statusEl.textContent = `Turn ${gameTurn}: AI responds`;
+    logToTerminal(
+      `Turn ${gameTurn}: AI response (${processedResponse.label})`,
+      'timestamp'
+    );
+    await playEvents(aiEvents, { useAISynth: true });
+
+    if (!gameActive) return;
+    setTimeout(() => {
+      void startUserTurn();
+    }, GAME_NEXT_TURN_DELAY_MS);
+  } catch (err) {
+    console.error('Game turn error:', err);
+    logToTerminal(`ENGINE ERROR: ${err.message}`, 'timestamp');
+    stopGameLoop(`Game stopped: ${err.message}`);
   }
-  
-  // Clear all pressed keys
-  pressedKeys.clear();
-  
-  // Reset all visual key highlights
+}
+
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+
+// Reset all audio synthesis and visual key states
+function resetAllNotesAndVisuals() {
+  if (synth) synth.releaseAll();
+  if (aiSynth) aiSynth.releaseAll();
   keyboardEl.querySelectorAll('.key').forEach(k => {
     k.style.filter = '';
   });
-  
-  logToTerminal('🚨 PANIC - All notes stopped', 'timestamp');
-});
+}
+
+// =============================================================================
+// EVENT LISTENERS
+// =============================================================================
+
+let listenersBound = false;
+
+function bindUIEventListeners() {
+  if (listenersBound) return;
+  listenersBound = true;
+
+  bindGlobalKeyboardHandlers();
+
+  if (instrumentSelect) {
+    instrumentSelect.addEventListener('change', () => {
+      loadInstrument(instrumentSelect.value);
+    });
+  }
+
+  if (aiInstrumentSelect) {
+    aiInstrumentSelect.addEventListener('change', () => {
+      loadAIInstrument(aiInstrumentSelect.value);
+      logToTerminal(`AI voice switched to: ${aiInstrumentSelect.value}`, 'timestamp');
+    });
+  }
+
+  if (keyboardToggle) {
+    keyboardToggle.addEventListener('change', () => {
+      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 activeKeyMap = window.keyMapFromServer || keyMap;
+          const midiNote = activeKeyMap[key];
+          const keyEl = getKeyElement(midiNote);
+          if (keyEl) keyEl.style.filter = '';
+          noteOff(midiNote);
+        });
+        pressedKeys.clear();
+      }
+    });
+  }
+
+  if (clearTerminal) {
+    clearTerminal.addEventListener('click', () => {
+      terminal.innerHTML = '';
+      logToTerminal('╔═══════════════════════════════════════════════════════╗', 'timestamp');
+      logToTerminal('║         🎹 MIDI MONITOR INITIALIZED 🎹              ║', 'timestamp');
+      logToTerminal('╚═══════════════════════════════════════════════════════╝', 'timestamp');
+      logToTerminal('Ready to capture MIDI events...', 'timestamp');
+      logToTerminal('', '');
+    });
+  }
+
+  if (recordBtn) {
+    recordBtn.addEventListener('click', async () => {
+      if (gameActive) return;
+      await Tone.start();
+      beginRecord();
+    });
+  }
+
+  if (stopBtn) {
+    stopBtn.addEventListener('click', () => {
+      if (gameActive) return;
+      stopRecord();
+    });
+  }
+
+  if (engineSelect) {
+    engineSelect.addEventListener('change', (e) => {
+      selectedEngine = e.target.value;
+      logToTerminal(`Engine switched to: ${selectedEngine}`, 'timestamp');
+    });
+  }
+
+  // Consolidated select control listeners
+  const selectControls = [
+    {
+      element: runtimeSelect,
+      getter: () => {
+        const mode = getSelectedRuntime();
+        const label = mode === 'gpu' ? 'ZeroGPU' : (mode === 'auto' ? 'Auto (GPU->CPU)' : 'CPU');
+        return { label };
+      },
+      message: (result) => `Runtime switched to: ${result.label}`
+    },
+    {
+      element: responseStyleSelect,
+      getter: getSelectedStylePreset,
+      message: (result) => `AI style switched to: ${result.label}`
+    },
+    {
+      element: responseModeSelect,
+      getter: () => {
+        const mode = getSelectedResponseMode();
+        const decode = getSelectedDecodingOptions();
+        return { label: `${mode.label} (temp=${decode.temperature}, top_p=${decode.top_p}, candidates=${decode.num_candidates})` };
+      },
+      message: (result) => `Response mode switched to: ${result.label}`
+    },
+    {
+      element: responseLengthSelect,
+      getter: () => {
+        const preset = getSelectedResponseLengthPreset();
+        return { label: `${preset.label} (${preset.generateTokens} tokens)` };
+      },
+      message: (result) => `Response length switched to: ${result.label}`
+    }
+  ];
+
+  selectControls.forEach(({ element, getter, message }) => {
+    if (element) {
+      element.addEventListener('change', () => {
+        const result = getter();
+        logToTerminal(message(result), 'timestamp');
+      });
+    }
+  });
+
+  // Setup hover tooltips for control items
+  const setupControlItemHoverListeners = () => {
+    const controlIdToName = {
+      'engine': 'Engine',
+      'runtime': 'Runtime',
+      'aiStyle': 'AI Style',
+      'responseMode': 'Response Mode',
+      'responseLength': 'Response Length',
+      'instrument': 'Instrument',
+      'aiVoice': 'AI Voice'
+    };
+    
+    const updateTooltipDisplay = (html) => {
+      const tooltipDisplay = document.getElementById('tooltipDisplay');
+      if (tooltipDisplay) {
+        tooltipDisplay.innerHTML = html;
+      }
+    };
+    
+    const controlItems = document.querySelectorAll('[data-control-id]');
+    controlItems.forEach(label => {
+      const select = label.querySelector('select');
+      if (!select) return;
+      
+      const controlId = label.getAttribute('data-control-id');
+      const controlName = controlIdToName[controlId] || controlId;
+      const description = select.getAttribute('data-description');
+      const showOption = ['engine', 'runtime', 'aiStyle', 'responseMode', 'responseLength'].includes(controlId);
+      
+      const updateDisplay = () => {
+        if (showOption) {
+          const selectedOption = select.querySelector(`option[value="${select.value}"]`);
+          if (selectedOption) {
+            const optionName = selectedOption.textContent;
+            const tooltip = selectedOption.getAttribute('data-tooltip');
+            if (tooltip && description) {
+              updateTooltipDisplay(`<b>${controlName}</b>: ${description} - <b>${optionName}</b>: ${tooltip}`);
+            } else if (description) {
+              updateTooltipDisplay(`<b>${controlName}</b>: ${description}`);
+            }
+          }
+        } else if (description) {
+          updateTooltipDisplay(`<b>${controlName}</b>: ${description}`);
+        }
+      };
+      
+      label.addEventListener('mouseenter', updateDisplay);
+      label.addEventListener('mouseleave', () => {
+        updateTooltipDisplay('');
+      });
+    });
+  };
+  setupControlItemHoverListeners();
+
+  if (gameStartBtn) {
+    gameStartBtn.addEventListener('click', () => {
+      void startGameLoop();
+    });
+  }
+
+  if (gameStopBtn) {
+    gameStopBtn.addEventListener('click', () => {
+      stopGameLoop('Game stopped');
+    });
+  }
+
+  if (playbackBtn) {
+    playbackBtn.addEventListener('click', async () => {
+      if (gameActive) return alert('Stop the game first.');
+      if (events.length === 0) return alert('No recording to play back');
+      
+      // Ensure all notes are off before starting playback
+      resetAllNotesAndVisuals();
+      
+      statusEl.textContent = 'Playing back...';
+      playbackBtn.disabled = true;
+      recordBtn.disabled = true;
+      
+      logToTerminal('', '');
+      logToTerminal('♫♫♫ PLAYBACK STARTED ♫♫♫', 'timestamp');
+      logToTerminal('', '');
+      
+      try {
+        let engineOptions = {};
+        if (engineSelect.value === 'godzilla_continue') {
+          const lengthPreset = getSelectedResponseLengthPreset();
+          engineOptions = {
+            generate_tokens: lengthPreset.generateTokens,
+            ...getSelectedDecodingOptions()
+          };
+        }
+        const result = await processEventsThroughEngine(events, engineOptions);
+        let processedEvents = result.events || [];
+        if (engineSelect.value === 'godzilla_continue') {
+          const processedResponse = buildProcessedAIResponse(processedEvents, events);
+          processedEvents = processedResponse.events;
+          logToTerminal(`Playback response mode: ${processedResponse.label}`, 'timestamp');
+        }
+        await playEvents(processedEvents, {
+          useAISynth: engineSelect.value !== 'parrot'
+        });
+
+        statusEl.textContent = 'Playback complete';
+        playbackBtn.disabled = false;
+        recordBtn.disabled = false;
+        logToTerminal('', '');
+        logToTerminal('♫♫♫ PLAYBACK FINISHED ♫♫♫', 'timestamp');
+        logToTerminal('', '');
+      } catch (err) {
+        console.error('Playback error:', err);
+        statusEl.textContent = 'Playback error: ' + err.message;
+        logToTerminal(`ENGINE ERROR: ${err.message}`, 'timestamp');
+        playbackBtn.disabled = false;
+        recordBtn.disabled = false;
+        
+        // Ensure all notes are off on error
+        resetAllNotesAndVisuals();
+      }
+    });
+  }
+
+  if (saveBtn) {
+    saveBtn.addEventListener('click', () => saveMIDI());
+  }
+
+  if (panicBtn) {
+    panicBtn.addEventListener('click', () => {
+      // Stop all notes immediately and reset visuals
+      resetAllNotesAndVisuals();
+      
+      // Clear all pressed keys
+      pressedKeys.clear();
+      
+      logToTerminal('🚨 PANIC - All notes stopped', 'timestamp');
+    });
+  }
+}
 
 // =============================================================================
 // =============================================================================
@@ -722,22 +1695,54 @@ panicBtn.addEventListener('click', () => {
 // =============================================================================
 
 async function init() {
+  await waitForKeyboardUIElements();
+  await waitForBridgeElements();
+  cacheUIElements();
+  bindUIEventListeners();
+
   // First, load configuration from server
   await initializeFromConfig();
+
+  if (responseStyleSelect && !responseStyleSelect.value) {
+    responseStyleSelect.value = 'melodic';
+  }
+  if (responseModeSelect && !responseModeSelect.value) {
+    responseModeSelect.value = 'raw_godzilla';
+  }
+  if (responseLengthSelect && !responseLengthSelect.value) {
+    responseLengthSelect.value = 'short';
+  }
+  if (runtimeSelect && !runtimeSelect.value) {
+    runtimeSelect.value = 'auto';
+  }
+  if (aiInstrumentSelect && !aiInstrumentSelect.value) {
+    aiInstrumentSelect.value = 'fm';
+  }
   
   // Then load default instrument (synth)
   loadInstrument('synth');
+  loadAIInstrument(aiInstrumentSelect ? aiInstrumentSelect.value : 'fm');
   
   // Setup keyboard event listeners and UI
   attachPointerEvents();
   initTerminal();
-  
+  const runtimeMode = getSelectedRuntime();
+  const runtimeLabel = runtimeMode === 'gpu' ? 'ZeroGPU' : (runtimeMode === 'auto' ? 'Auto (GPU->CPU)' : 'CPU');
+  logToTerminal(`Runtime mode: ${runtimeLabel}`, 'timestamp');
   // Set initial button states
   recordBtn.disabled = false;
   stopBtn.disabled = true;
   saveBtn.disabled = true;
   playbackBtn.disabled = true;
+  gameStartBtn.disabled = false;
+  gameStopBtn.disabled = true;
 }
 
 // Start the application when DOM is ready
-document.addEventListener('DOMContentLoaded', init);
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    void init();
+  });
+} else {
+  void init();
+}

static/styles.css

@@ -1,418 +1,894 @@
-/* Virtual MIDI Keyboard - Retro Synth Theme */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Space+Mono:wght@400;700&display=swap');
+
+:root {
+  --bg-night: #090511;
+  --bg-deep: #150b2e;
+  --panel: rgba(18, 10, 38, 0.75);
+  --panel-border: rgba(255, 67, 176, 0.4);
+  --panel-glow: 0 0 42px rgba(255, 67, 176, 0.24);
+  --text-main: #f4deff;
+  --text-soft: #c89cff;
+  --neon-pink: #ff3fb0;
+  --neon-cyan: #3ef4ff;
+  --neon-blue: #55a4ff;
+  --neon-violet: #8b40ff;
+  --neon-green: #8affc7;
+  --danger: #ff5f7a;
+  --keyboard-white-top: #fef0ff;
+  --keyboard-white-bottom: #f1d6ff;
+  --keyboard-black-top: #321355;
+  --keyboard-black-bottom: #120727;
+  --radius-l: 20px;
+  --radius-m: 14px;
+  --radius-s: 10px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: clip;
+}
 
-/* Layout */
-body { 
-  font-family: 'Courier New', 'Consolas', monospace; 
-  padding: 0;
+body {
   margin: 0;
-  background: linear-gradient(180deg, #0a0a0f 0%, #1a0a1f 100%);
-  color: #e0e0ff;
   min-height: 100vh;
-  overflow-x: hidden;
+  position: relative;
+  overflow-x: clip;
+  color: var(--text-main);
+  font-family: 'Space Mono', monospace;
+  background:
+    radial-gradient(1000px 500px at 10% -5%, rgba(139, 64, 255, 0.35), transparent 60%),
+    radial-gradient(800px 480px at 100% 0%, rgba(62, 244, 255, 0.2), transparent 60%),
+    linear-gradient(175deg, var(--bg-night), var(--bg-deep));
+}
+
+body::before,
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+body::before {
+  background:
+    radial-gradient(circle at 50% 12%, rgba(255, 112, 190, 0.22) 0 18%, transparent 42%),
+    repeating-linear-gradient(
+      90deg,
+      rgba(62, 244, 255, 0.06) 0 2px,
+      transparent 2px 90px
+    );
+  opacity: 0.9;
+  animation: skyPulse 7s ease-in-out infinite alternate;
+}
+
+body::after {
+  top: 52%;
+  height: 62%;
+  background:
+    linear-gradient(180deg, rgba(139, 64, 255, 0.08), rgba(9, 5, 17, 0.8)),
+    repeating-linear-gradient(
+      0deg,
+      rgba(62, 244, 255, 0.15) 0 2px,
+      transparent 2px 28px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgba(255, 63, 176, 0.18) 0 1px,
+      transparent 1px 62px
+    );
+  transform-origin: top center;
+  transform: perspective(650px) rotateX(62deg);
+  animation: gridRush 9s linear infinite;
+}
+
+.app-shell {
+  max-width: 1360px;
+  margin: 0 auto;
+  padding: 20px 18px 30px;
+  position: relative;
+  z-index: 1;
+  overflow-x: clip;
+}
+
+.app-shell::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 118px;
+  height: 120px;
+  background:
+    radial-gradient(closest-side, rgba(62, 244, 255, 0.42), transparent 72%),
+    radial-gradient(closest-side, rgba(255, 63, 176, 0.36), transparent 76%);
+  filter: blur(22px);
+  opacity: 0.6;
+  animation: waveDrift 6.5s ease-in-out infinite;
+  transform: scaleX(1.15);
+  pointer-events: none;
 }
 
-/* Welcome Header */
 .welcome-header {
   text-align: center;
-  padding: 30px 20px 20px;
-  background: linear-gradient(180deg, rgba(138, 43, 226, 0.1) 0%, transparent 100%);
-  border-bottom: 2px solid rgba(138, 43, 226, 0.3);
+  margin-bottom: 18px;
+  position: relative;
 }
 
-.neon-text {
-  font-size: 2.5em;
-  font-weight: bold;
-  margin: 0 0 10px;
-  color: #ff00ff;
-  text-shadow: 
-    0 0 10px #ff00ff,
-    0 0 20px #ff00ff,
-    0 0 30px #ff00ff,
-    0 0 40px #8b00ff,
-    0 0 70px #8b00ff;
-  letter-spacing: 2px;
-}
-
-#mainContainer { 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 30px;
-  padding: 20px;
-  max-width: 1400px;
-  margin: 0 auto;
+.welcome-header h1 {
+  font-size: 3.2rem;
+  font-weight: 900;
+  margin: 0 0 12px 0;
+  letter-spacing: 3px;
+  font-family: 'Orbitron', monospace;
 }
 
-.keyboard-section {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 15px;
+.welcome-header .synth {
+  color: var(--neon-cyan);
+  text-shadow: 0 0 20px rgba(62, 244, 255, 0.8), 0 0 40px rgba(62, 244, 255, 0.5);
 }
 
-.monitor-section {
+.welcome-header .ia {
+  color: #da00ff;
+  text-shadow: 0 0 20px rgba(218, 0, 255, 0.8), 0 0 40px rgba(218, 0, 255, 0.5);
+  font-style: italic;
+  font-weight: 700;
+}
+
+.welcome-header::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -14px;
+  width: min(640px, 88%);
+  height: 10px;
+  transform: translateX(-50%);
+  background:
+    radial-gradient(circle at 10% 50%, rgba(62, 244, 255, 0.7), transparent 35%),
+    radial-gradient(circle at 50% 50%, rgba(255, 63, 176, 0.65), transparent 34%),
+    radial-gradient(circle at 90% 50%, rgba(139, 64, 255, 0.7), transparent 35%);
+  filter: blur(8px);
+  border-radius: 999px;
+  animation: waveDrift 5.8s ease-in-out infinite;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.24em;
+  font-size: 11px;
+  color: var(--neon-cyan);
+  text-shadow: 0 0 12px rgba(62, 244, 255, 0.7);
+}
+
+.logo-wrap {
+  width: min(700px, 96%);
+  margin: 0 auto 2px;
+  padding: 0;
+  border: 0;
+  background: none;
+  box-shadow: none;
+}
+
+.logo-image {
+  display: block;
   width: 100%;
-  max-width: 1200px;
+  max-height: 186px;
+  object-fit: contain;
+  filter:
+    drop-shadow(0 0 8px rgba(255, 63, 176, 0.72))
+    drop-shadow(0 0 26px rgba(62, 244, 255, 0.52))
+    drop-shadow(0 0 50px rgba(139, 64, 255, 0.42));
+  animation: logoFloat 4.2s ease-in-out infinite;
+}
+
+.welcome-text {
+  max-width: 900px;
+  margin: 20px auto;
+  padding: 0 20px;
+  text-align: left;
 }
 
-/* Keyboard */
-#keyboard { 
-  display: flex; 
+.welcome-intro {
+  font-size: clamp(1rem, 2.5vw, 1.15rem);
+  color: var(--text-main);
+  text-align: center;
+  margin-bottom: 24px;
+  line-height: 1.6;
+}
+
+.features-guide {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 63, 176, 0.2);
+  border-radius: 12px;
+  padding: 20px 24px;
+  margin-top: 16px;
+}
+
+.features-guide h3 {
+  margin: 0 0 14px 0;
+  color: var(--neon-cyan);
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  text-shadow: 0 0 10px rgba(62, 244, 255, 0.6);
+}
+
+.features-list {
+  margin: 0;
+  padding: 0 0 0 20px;
+  list-style: none;
+}
+
+.features-list li {
+  margin-bottom: 10px;
+  color: var(--text-soft);
+  font-size: clamp(0.88rem, 2vw, 0.98rem);
+  line-height: 1.5;
+  position: relative;
+}
+
+.features-list li::before {
+  content: '▸';
+  position: absolute;
+  left: -20px;
+  color: var(--neon-magenta);
+  text-shadow: 0 0 8px rgba(255, 63, 176, 0.7);
+}
+
+.features-list li strong {
+  color: var(--neon-magenta);
+  font-weight: 600;
+  text-shadow: 0 0 6px rgba(255, 63, 176, 0.4);
+}
+
+.sub-list {
+  margin: 8px 0 0 20px;
+  padding: 0 0 0 20px;
+  list-style: none;
+  color: var(--text-soft);
+  font-size: 0.95em;
+}
+
+.sub-list li {
+  margin-bottom: 5px;
+  padding-left: 0;
+}
+
+.sub-list li::before {
+  content: '○';
+  position: absolute;
+  left: -20px;
+  color: var(--neon-cyan);
+  text-shadow: 0 0 6px rgba(62, 244, 255, 0.5);
+  font-weight: bold;
+}
+
+.sub-list li em {
+  color: var(--neon-cyan);
+  font-style: italic;
+  text-shadow: 0 0 4px rgba(62, 244, 255, 0.3);
+}
+
+.subtitle {
+  margin: 4px 0 0;
+  color: var(--text-soft);
+  font-size: clamp(0.92rem, 2.2vw, 1.04rem);
+}
+
+#mainContainer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 20px;
+}
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--panel-border);
+  border-radius: var(--radius-l);
+  box-shadow:
+    var(--panel-glow),
+    inset 0 0 20px rgba(139, 64, 255, 0.17),
+    0 0 0 1px rgba(62, 244, 255, 0.12);
+  backdrop-filter: blur(6px);
+}
+
+.keyboard-section {
+  padding: 18px;
+}
+
+#keyboard {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 20px 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(62, 244, 255, 0.38);
+  background:
+    linear-gradient(180deg, rgba(21, 10, 43, 0.92), rgba(10, 4, 23, 0.92)),
+    radial-gradient(circle at 50% 0, rgba(62, 244, 255, 0.14), transparent 60%);
+  box-shadow:
+    inset 0 0 20px rgba(62, 244, 255, 0.16),
+    0 0 22px rgba(62, 244, 255, 0.2),
+    0 0 34px rgba(255, 63, 176, 0.18);
   user-select: none;
   touch-action: none;
-  padding: 20px;
-  background: rgba(0, 0, 0, 0.4);
-  border-radius: 15px;
-  border: 2px solid rgba(138, 43, 226, 0.5);
-  box-shadow: 
-    0 0 20px rgba(138, 43, 226, 0.3),
-    inset 0 0 30px rgba(0, 0, 0, 0.5);
-}
-
-.key { 
-  width: 42px; 
-  height: 180px; 
-  border: 2px solid #ff00ff; 
-  margin: 0 1px; 
-  background: linear-gradient(180deg, #fff 0%, #f0f0ff 100%); 
-  position: relative; 
-  display: flex; 
-  align-items: flex-end; 
-  justify-content: center; 
+  overflow-x: auto;
+}
+
+.key {
+  width: 44px;
+  height: 190px;
+  margin: 0 1px;
+  border: 1px solid rgba(255, 63, 176, 0.45);
+  border-bottom-width: 4px;
+  border-radius: 0 0 11px 11px;
+  background: linear-gradient(180deg, var(--keyboard-white-top), var(--keyboard-white-bottom));
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
   cursor: pointer;
-  touch-action: none;
-  transition: all 0.1s ease;
-  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;
+  color: #51176e;
+  font-size: 11px;
+  font-weight: 700;
+  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
 }
 
-.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:hover {
+  transform: translateY(1px);
+  box-shadow: inset 0 -5px 12px rgba(255, 63, 176, 0.16);
 }
 
 .key.black {
-  color: #00ffff;
+  width: 30px;
+  height: 118px;
+  margin-left: -15px;
+  margin-right: -15px;
+  z-index: 3;
+  border-radius: 0 0 9px 9px;
+  border-color: rgba(62, 244, 255, 0.55);
+  border-bottom-width: 3px;
+  background: linear-gradient(180deg, var(--keyboard-black-top), var(--keyboard-black-bottom));
+  color: #bdf6ff;
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.55);
+}
+
+.key.black:hover {
+  box-shadow: 0 0 16px rgba(62, 244, 255, 0.4);
+}
+
+.key .shortcut-hint {
+  display: block;
+  opacity: 0;
+  font-size: 10px;
+  color: var(--neon-violet);
+  text-shadow: 0 0 9px rgba(139, 64, 255, 0.8);
+  transition: opacity 160ms ease;
 }
 
 .key.black .shortcut-hint {
-  color: #00ffff;
-  text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
+  color: var(--neon-cyan);
+  text-shadow: 0 0 9px rgba(62, 244, 255, 0.95);
 }
 
 .shortcuts-visible .key .shortcut-hint {
   opacity: 1;
 }
 
-.key:hover {
-  box-shadow: 
-    0 0 15px rgba(255, 0, 255, 0.5),
-    inset 0 -2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.key.black { 
-  width: 30px; 
-  height: 110px; 
-  background: linear-gradient(180deg, #1a0a2e 0%, #0a0a1f 100%);
-  border: 2px solid #8b00ff;
-  color: #00ffff; 
-  margin-left: -15px; 
-  margin-right: -15px; 
-  z-index: 2; 
+.keyboard-toggle-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 2px;
+  gap: 12px;
+}
+
+.tooltip-display-area {
+  flex: 1;
+  padding: 8px 12px;
+  background: rgba(62, 244, 255, 0.1);
+  border: 1px solid rgba(62, 244, 255, 0.4);
+  border-radius: var(--radius-s);
+  color: var(--neon-cyan);
+  font-size: 12px;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  text-shadow: 0 0 8px rgba(62, 244, 255, 0.5);
+  box-shadow: 0 0 12px rgba(62, 244, 255, 0.15);
+}
+
+.keyboard-toggle-pill {
   position: relative;
-  box-shadow: 
-    0 4px 8px rgba(0, 0, 0, 0.5),
-    inset 0 -2px 5px rgba(138, 43, 226, 0.3);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(62, 244, 255, 0.36);
+  background: linear-gradient(160deg, rgba(22, 10, 46, 0.9), rgba(10, 6, 26, 0.92));
+  box-shadow:
+    0 0 16px rgba(62, 244, 255, 0.16),
+    inset 0 0 12px rgba(255, 63, 176, 0.12);
+  cursor: pointer;
+  user-select: none;
 }
 
-.key.black:hover {
-  box-shadow: 
-    0 0 15px rgba(0, 255, 255, 0.5),
-    inset 0 -2px 5px rgba(138, 43, 226, 0.3);
+.keyboard-toggle-pill input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
 }
 
-/* Controls */
-.controls { 
-  display: flex; 
-  gap: 10px; 
-  align-items: center; 
-  flex-wrap: wrap;
-  justify-content: center;
-  padding: 15px;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
-  border: 1px solid rgba(138, 43, 226, 0.3);
+.toggle-track {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 63, 176, 0.5);
+  background: rgba(10, 8, 25, 0.95);
+  box-shadow: inset 0 0 8px rgba(255, 63, 176, 0.22);
+  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.toggle-track::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #ff77d0, #ff3fb0);
+  box-shadow: 0 0 10px rgba(255, 63, 176, 0.6);
+  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
 }
 
-.controls label {
-  color: #00ffff;
-  font-weight: bold;
+.keyboard-toggle-pill input[type='checkbox']:checked + .toggle-track {
+  border-color: rgba(62, 244, 255, 0.8);
+  background: linear-gradient(90deg, rgba(255, 63, 176, 0.32), rgba(62, 244, 255, 0.38));
+  box-shadow:
+    inset 0 0 10px rgba(62, 244, 255, 0.3),
+    0 0 14px rgba(62, 244, 255, 0.25);
+}
+
+.keyboard-toggle-pill input[type='checkbox']:checked + .toggle-track::before {
+  transform: translateX(20px);
+  background: linear-gradient(180deg, #9ffcff, #3ef4ff);
+  box-shadow: 0 0 11px rgba(62, 244, 255, 0.8);
+}
+
+.keyboard-toggle-pill input[type='checkbox']:focus-visible + .toggle-track {
+  outline: 2px solid rgba(62, 244, 255, 0.75);
+  outline-offset: 2px;
+}
+
+.toggle-text {
+  color: #d9e3ff;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-shadow: 0 0 8px rgba(62, 244, 255, 0.25);
+}
+
+.controls {
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: var(--radius-m);
+  border: 1px solid rgba(62, 244, 255, 0.35);
+  background: rgba(11, 6, 24, 0.72);
+}
+
+.control-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
+  gap: 10px;
+}
+
+.control-item {
   display: flex;
+  flex-direction: column;
+  gap: 7px;
+  padding: 10px;
+  border-radius: var(--radius-s);
+  border: 1px solid rgba(255, 63, 176, 0.32);
+  background: linear-gradient(160deg, rgba(31, 15, 62, 0.88), rgba(16, 8, 34, 0.9));
+  color: #f5d4ff;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  position: relative;
+}
+
+.control-item-toggle {
+  flex-direction: row;
   align-items: center;
-  gap: 5px;
+  justify-content: flex-start;
+  gap: 10px;
+  font-size: 13px;
+}
+
+.btn-tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.btn-tooltip {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 6px;
+  padding: 8px 12px;
+  background: rgba(62, 244, 255, 0.15);
+  border: 1px solid rgba(62, 244, 255, 0.6);
+  border-radius: var(--radius-s);
+  color: var(--neon-cyan);
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 100;
+  box-shadow: 0 0 20px rgba(62, 244, 255, 0.3);
+  text-shadow: 0 0 8px rgba(62, 244, 255, 0.5);
+  pointer-events: none;
+}
+
+.btn-tooltip-wrapper:hover .btn-tooltip {
+  display: block;
+  animation: tooltipAppear 0.2s ease-out;
+}
+
+.runtime-tooltip.show {
+  display: block;
+  animation: tooltipAppear 0.2s ease-out;
+}
+
+@keyframes tooltipAppear {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
 }
 
 select,
-button { 
-  padding: 8px 16px;
-  background: linear-gradient(180deg, #8b00ff 0%, #5a00cc 100%);
-  color: #00ffff;
-  border: 2px solid #ff00ff;
+button {
+  font-family: 'Space Mono', monospace;
+}
+
+select {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid rgba(62, 244, 255, 0.42);
+  border-radius: 9px;
+  background: rgba(10, 6, 22, 0.92);
+  color: var(--neon-cyan);
+  font-size: 13px;
+}
+
+select:focus,
+button:focus,
+input[type='checkbox']:focus {
+  outline: 2px solid rgba(62, 244, 255, 0.6);
+  outline-offset: 1px;
+}
+
+input[type='checkbox'] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
   border-radius: 5px;
-  font-family: 'Courier New', monospace;
-  font-weight: bold;
+  border: 2px solid var(--neon-pink);
+  background: rgba(11, 6, 24, 0.95);
+  position: relative;
   cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
+  box-shadow: inset 0 0 8px rgba(255, 63, 176, 0.2);
 }
 
-select:hover,
-button:hover:not(:disabled) { 
-  background: linear-gradient(180deg, #a000ff 0%, #7000ee 100%);
-  box-shadow: 
-    0 0 20px rgba(255, 0, 255, 0.6),
-    0 0 30px rgba(138, 43, 226, 0.4);
-  transform: translateY(-1px);
+input[type='checkbox']::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--neon-cyan);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg) scale(0);
+  transition: transform 90ms ease;
+  filter: drop-shadow(0 0 5px rgba(62, 244, 255, 0.8));
 }
 
-button:active:not(:disabled) {
-  transform: translateY(0);
-  box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
+input[type='checkbox']:checked {
+  background: rgba(255, 63, 176, 0.26);
+  box-shadow:
+    inset 0 0 10px rgba(255, 63, 176, 0.6),
+    0 0 10px rgba(255, 63, 176, 0.45);
 }
 
-button:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
+input[type='checkbox']:checked::after {
+  transform: rotate(45deg) scale(1);
+}
+
+.action-row {
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
 }
 
-input[type="checkbox"] {
+.btn {
+  border: 0;
+  border-radius: 10px;
+  padding: 9px 14px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #fff;
   cursor: pointer;
-  width: 18px;
-  height: 18px;
-  accent-color: #ff00ff;
+  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
+  text-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
 }
 
-#status { 
-  color: #00ff00;
-  font-weight: bold;
-  text-shadow: 0 0 5px #00ff00;
-  padding: 5px 10px;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 5px;
+.btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  filter: saturate(1.1) brightness(1.08);
+}
+
+.btn:disabled {
+  opacity: 0.42;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: linear-gradient(180deg, #ff4fbd, #d42f8e);
+  box-shadow: 0 0 18px rgba(255, 79, 189, 0.45);
+}
+
+.btn-secondary {
+  background: linear-gradient(180deg, #5464ff, #383fbc);
+  box-shadow: 0 0 15px rgba(84, 100, 255, 0.38);
+}
+
+.btn-game {
+  background: linear-gradient(180deg, #43d3ff, #2f9bff);
+  color: #041322;
+  text-shadow: none;
+  box-shadow: 0 0 18px rgba(67, 211, 255, 0.45);
+}
+
+.btn-danger {
+  background: linear-gradient(180deg, #ff6688, #e9385f);
+  box-shadow: 0 0 18px rgba(255, 102, 136, 0.42);
+}
+
+#status {
+  margin-left: auto;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(62, 244, 255, 0.6);
+  background: rgba(10, 9, 28, 0.8);
+  color: var(--neon-green);
+  text-shadow: 0 0 8px rgba(138, 255, 199, 0.75);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.monitor-section {
+  overflow: hidden;
 }
 
-/* MIDI Terminal */
-.terminal-header { 
-  display: flex; 
-  justify-content: space-between; 
-  align-items: center; 
-  padding: 10px 15px;
-  background: linear-gradient(90deg, rgba(138, 43, 226, 0.2) 0%, rgba(0, 255, 255, 0.1) 100%);
-  border: 2px solid rgba(138, 43, 226, 0.5);
-  border-bottom: none;
-  border-radius: 10px 10px 0 0;
+.terminal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(62, 244, 255, 0.28);
+  background: linear-gradient(180deg, rgba(33, 16, 70, 0.85), rgba(20, 9, 40, 0.75));
 }
 
 .terminal-header h4 {
   margin: 0;
-  color: #ff00ff;
-  font-size: 1.1em;
-  letter-spacing: 2px;
-  text-shadow: 0 0 10px #ff00ff;
-}
-
-.terminal-header button { 
-  padding: 6px 12px;
-  font-size: 0.85em;
-}
-
-#terminal { 
-  background: #0a0a0f;
-  color: #00ff00; 
-  font-family: 'Courier New', monospace; 
-  font-size: 13px; 
-  padding: 15px; 
-  height: 250px; 
-  overflow-y: auto; 
-  border: 2px solid rgba(138, 43, 226, 0.5);
-  border-top: 1px solid rgba(138, 43, 226, 0.3);
-  border-radius: 0 0 10px 10px;
+  font-family: 'Orbitron', sans-serif;
+  font-size: 14px;
+  letter-spacing: 0.08em;
+  color: var(--neon-pink);
+  text-shadow: 0 0 12px rgba(255, 63, 176, 0.8);
+}
+
+#terminal {
+  margin: 0;
+  min-height: 220px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 14px;
   white-space: pre-wrap;
   word-wrap: break-word;
-  box-shadow: 
-    inset 0 0 30px rgba(0, 0, 0, 0.8),
-    0 0 20px rgba(138, 43, 226, 0.2);
+  background:
+    radial-gradient(700px 220px at 100% 0, rgba(62, 244, 255, 0.18), transparent 62%),
+    #07040f;
+  color: #a5ffd2;
+  font-family: 'Space Mono', monospace;
+  font-size: 12px;
+  line-height: 1.35;
 }
 
-#terminal .note-on { 
-  color: #00ff00;
-  text-shadow: 0 0 5px #00ff00;
+#terminal .note-on {
+  color: #8affc7;
+  text-shadow: 0 0 8px rgba(138, 255, 199, 0.75);
 }
 
-#terminal .note-off { 
-  color: #ff00ff;
-  text-shadow: 0 0 5px #ff00ff;
+#terminal .note-off {
+  color: #8dc5ff;
+  text-shadow: 0 0 8px rgba(141, 197, 255, 0.7);
 }
 
-#terminal .timestamp { 
-  color: #00ffff;
-  text-shadow: 0 0 3px #00ffff;
+#terminal .timestamp {
+  color: #ffdd84;
+  text-shadow: 0 0 8px rgba(255, 221, 132, 0.7);
 }
 
-/* Scrollbar styling */
 #terminal::-webkit-scrollbar {
   width: 10px;
 }
 
 #terminal::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(8, 5, 18, 0.7);
 }
 
 #terminal::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, #ff00ff 0%, #8b00ff 100%);
-  border-radius: 5px;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #ff3fb0, #8b40ff);
 }
 
-#terminal::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, #ff33ff 0%, #aa00ff 100%);
+@keyframes logoFloat {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-4px) scale(1.01);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+  }
 }
-/* =============================================================================
-   RESPONSIVE DESIGN - MOBILE & TABLET
-   ============================================================================= */
 
-/* Tablet (landscape) */
-@media (max-width: 1024px) {
-  .welcome-header h1 {
-    font-size: 2em;
+@keyframes waveDrift {
+  0% {
+    transform: translateX(-2%) translateY(0);
   }
-  
-  .key {
-    width: 35px;
-    height: 150px;
+  50% {
+    transform: translateX(2%) translateY(6px);
   }
-  
-  .key.black {
-    width: 25px;
-    height: 95px;
-    margin-left: -12px;
-    margin-right: -12px;
+  100% {
+    transform: translateX(-2%) translateY(0);
   }
 }
 
-/* Mobile (portrait and small screens) */
-@media (max-width: 768px) {
-  body {
-    padding: 10px;
+@keyframes skyPulse {
+  0% {
+    opacity: 0.82;
+    filter: hue-rotate(0deg);
   }
-  
-  .welcome-header {
-    padding: 15px;
-    margin-bottom: 15px;
+  100% {
+    opacity: 1;
+    filter: hue-rotate(12deg);
   }
-  
-  .welcome-header h1 {
-    font-size: 1.8em;
-    letter-spacing: 3px;
+}
+
+@keyframes gridRush {
+  0% {
+    background-position: 0 0, 0 0, 0 0;
   }
-  
-  #mainContainer {
-    gap: 10px;
+  100% {
+    background-position: 0 0, 0 220px, 62px 0;
   }
-  
-  #keyboard {
-    padding: 10px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 980px) {
+  .app-shell {
+    padding: 16px 12px 24px;
+  }
+
+  .keyboard-section {
+    padding: 12px;
   }
-  
+
+  .controls {
+    padding: 12px;
+  }
+
   .key {
-    width: 28px;
-    height: 120px;
+    width: 35px;
+    height: 158px;
     font-size: 9px;
   }
-  
+
   .key.black {
-    width: 20px;
-    height: 75px;
-    margin-left: -10px;
-    margin-right: -10px;
+    width: 24px;
+    height: 98px;
+    margin-left: -12px;
+    margin-right: -12px;
   }
-  
-  .key .shortcut-hint {
-    font-size: 8px;
+
+  .control-grid {
+    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
   }
-  
-  .controls {
-    gap: 8px;
-    padding: 10px;
-    font-size: 14px;
+}
+
+@media (max-width: 640px) {
+  .welcome-header {
+    margin-bottom: 12px;
   }
-  
-  button, select {
-    font-size: 12px;
-    padding: 6px 10px;
+
+  .logo-wrap {
+    width: min(560px, 98%);
+    padding: 0;
   }
-  
-  #status {
-    font-size: 12px;
+
+  .logo-image {
+    max-height: 132px;
+  }
+
+  .control-grid {
+    grid-template-columns: 1fr 1fr;
   }
-  
-  .terminal-header h4 {
-    font-size: 14px;
+
+  .keyboard-toggle-row {
+    justify-content: center;
+    margin-top: 12px;
   }
-  
+
+  #status {
+    margin-left: 0;
+    width: 100%;
+    text-align: center;
+  }
+
   #terminal {
-    height: 150px;
+    min-height: 180px;
     font-size: 11px;
   }
 }
 
-/* Very small mobile (portrait) */
 @media (max-width: 480px) {
-  .welcome-header h1 {
-    font-size: 1.5em;
-    letter-spacing: 2px;
+  .app-shell::before {
+    top: 90px;
+    height: 80px;
+  }
+
+  .control-grid {
+    grid-template-columns: 1fr;
+  }
+
+  #keyboard {
+    justify-content: flex-start;
   }
-  
+
   .key {
-    width: 22px;
-    height: 100px;
+    width: 27px;
+    height: 126px;
     font-size: 8px;
   }
-  
+
   .key.black {
-    width: 16px;
-    height: 65px;
-    margin-left: -8px;
-    margin-right: -8px;
-  }
-  
-  .key .shortcut-hint {
-    font-size: 7px;
+    width: 18px;
+    height: 76px;
+    margin-left: -9px;
+    margin-right: -9px;
   }
-  
-  .controls {
-    gap: 6px;
-    padding: 8px;
-    font-size: 12px;
-  }
-  
-  button, select {
-    font-size: 11px;
-    padding: 5px 8px;
-  }
-  
-  #terminal {
-    height: 120px;
-    font-size: 10px;
-  }
-}
+}