diff --git "a/MS12 - Copy.html" "b/MS12 - Copy.html"
new file mode 100644--- /dev/null
+++ "b/MS12 - Copy.html"
@@ -0,0 +1,2852 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MS1-X MOUSE MODULATION INDEX</title>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
+    <style>
+        :root {
+            --synth-green: #39ff14;
+            --synth-red: #ff3939;
+            --bg-primary: #0a0c0e;
+            --bg-secondary: #1a1e23;
+            --bg-tertiary: #111417;
+            --bg-button: #141719;
+            --bg-gradient-start: #0f1419;
+            --bg-gradient-end: #080a0c;
+            --glow-primary: rgba(57, 255, 20, 0.2);
+            --glow-secondary: rgba(57, 255, 20, 0.1);
+            --glow-strong: rgba(57, 255, 20, 0.8);
+            --text-shadow: 0 0 8px var(--synth-green);
+            --box-shadow-primary: 0 0 8px var(--glow-primary);
+            --box-shadow-inset: inset 0 0 15px rgba(57, 255, 20, 0.1);
+            --border-radius: 8px;
+            --border-radius-small: 4px;
+            --transition: all 0.3s;
+        }
+
+        body {
+            margin: 0;
+            background: radial-gradient(circle at center, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
+            color: var(--synth-green);
+            font-family: 'Share Tech Mono', monospace;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            overflow: hidden;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1400px;
+            padding: 15px;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 20px;
+            position: relative;
+        }
+
+        .header:after {
+            content: '';
+            position: absolute;
+            bottom: -8px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 250px;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, var(--synth-green), transparent);
+        }
+
+        .title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 60px;
+            margin: 0;
+            text-shadow: var(--text-shadow);
+            letter-spacing: 3px;
+            background: linear-gradient(180deg, var(--synth-green), #2ba80d);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .subtitle {
+            font-size: 20px;
+            opacity: 0.8;
+            margin: 3px 0;
+            letter-spacing: 2px;
+        }
+
+        .main-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .control-layout {
+            display: grid;
+            grid-template-columns: 280px 480px 280px;
+            grid-template-rows: auto auto auto auto;
+            gap: 12px;
+            align-items: start;
+        }
+
+        .top-left {
+            grid-column: 1;
+            grid-row: 1;
+        }
+
+        .top-center {
+            grid-column: 2;
+            grid-row: 1;
+        }
+
+        .top-right {
+            grid-column: 3;
+            grid-row: 1;
+        }
+
+        .center {
+            grid-column: 2;
+            grid-row: 2;
+        }
+
+        .left-container {
+            grid-column: 1;
+            grid-row: 2;
+        }
+
+        .right-container {
+            grid-column: 3;
+            grid-row: 2;
+        }
+
+        .bottom-left {
+            grid-column: 1;
+            grid-row: 3;
+        }
+
+        .bottom-center {
+            grid-column: 1 / -1;
+            grid-row: 3;
+        }
+
+        .bottom-right {
+            grid-column: 3;
+            grid-row: 3;
+        }
+
+        .recording-full {
+            grid-column: 1 / -1;
+            grid-row: 4;
+        }
+
+        .control-panel {
+            background: linear-gradient(45deg, var(--bg-tertiary), var(--bg-secondary));
+            border: 1px solid var(--synth-green);
+            border-radius: var(--border-radius);
+            padding: 6px;
+            box-shadow: var(--box-shadow-primary);
+        }
+
+        .panel-title {
+            margin: 0 0 8px 0;
+            color: var(--synth-green);
+            text-shadow: var(--text-shadow);
+            font-size: 14px;
+            text-align: center;
+        }
+
+        .sound-selector {
+            min-height: 300px;
+        }
+
+        .wave-selector {
+            min-height: 120px;
+        }
+
+        .synth-controls {
+            min-height: 428px;
+        }
+
+        .effects-controls {
+            min-height: 200px;
+        }
+
+        .recording-controls {
+            min-height: 150px;
+        }
+
+        .sound-buttons {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .sound-btn {
+            background: linear-gradient(180deg, var(--bg-secondary), var(--bg-button));
+            border: 1px solid var(--synth-green);
+            color: var(--synth-green);
+            padding: 6px 12px;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            transition: var(--transition);
+            border-radius: var(--border-radius-small);
+            font-size: 11px;
+            flex: 1;
+            min-width: 70px;
+        }
+
+        .sound-btn:hover {
+            background: linear-gradient(180deg, var(--synth-green), #2ba80d);
+            color: var(--bg-primary);
+        }
+
+        .sound-btn.active {
+            background: var(--synth-green);
+            color: var(--bg-primary);
+        }
+
+        .wave-buttons {
+            display: flex;
+            gap: 12px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .wave-btn {
+            background: linear-gradient(180deg, var(--bg-secondary), var(--bg-button));
+            border: 1px solid var(--synth-green);
+            color: var(--synth-green);
+            padding: 8px;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            transition: var(--transition);
+            border-radius: var(--border-radius-small);
+            font-size: 11px;
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .wave-btn:hover {
+            background: linear-gradient(180deg, var(--synth-green), #2ba80d);
+            color: var(--bg-primary);
+        }
+
+        .wave-btn.active {
+            background: var(--synth-green);
+            color: var(--bg-primary);
+        }
+
+        .wave-icon {
+            width: 30px;
+            height: 30px;
+        }
+
+        .sine-wave {
+            stroke: currentColor;
+            stroke-width: 2;
+            fill: none;
+        }
+
+        .sawtooth-wave {
+            stroke: currentColor;
+            stroke-width: 2;
+            fill: none;
+        }
+
+        .square-wave {
+            stroke: currentColor;
+            stroke-width: 2;
+            fill: none;
+        }
+
+        .triangle-wave {
+            stroke: currentColor;
+            stroke-width: 2;
+            fill: none;
+        }
+
+        .control-group {
+            flex: 1;
+        }
+
+        .control-label {
+            font-size: 11px;
+            margin-bottom: 4px;
+            opacity: 0.8;
+            text-align: center;
+        }
+
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .slider {
+            flex: 1;
+            -webkit-appearance: none;
+            height: 5px;
+            background: linear-gradient(90deg, #1a1e23, #39ff14);
+            border-radius: 2px;
+            outline: none;
+        }
+
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 14px;
+            height: 14px;
+            background: #39ff14;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 0 8px #39ff14;
+        }
+
+        .slider-value {
+            min-width: 35px;
+            text-align: right;
+            font-size: 11px;
+        }
+
+        .xy-container {
+            position: relative;
+            width: 400px;
+            height: 445px;
+            margin: 0 auto;
+            padding: 15px;
+            background: linear-gradient(45deg, #111417, #1a1e23);
+            border-radius: 15px;
+            box-shadow:
+                inset 0 0 40px rgba(57, 255, 20, 0.1),
+                0 0 15px rgba(0,0,0,0.5);
+        }
+
+        .xy-pad {
+            width: 100%;
+            height: 100%;
+            background: #0a0c0e;
+            border: 2px solid #39ff14;
+            border-radius: 12px;
+            position: relative;
+            box-shadow:
+                0 0 15px #39ff1440,
+                inset 0 0 40px rgba(57, 255, 20, 0.1);
+            overflow: hidden;
+        }
+
+        .xy-cursor {
+            width: 14px;
+            height: 14px;
+            background: #39ff14;
+            border-radius: 50%;
+            position: absolute;
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            box-shadow:
+                0 0 15px #39ff14,
+                0 0 30px #39ff14,
+                0 0 45px #39ff14;
+            z-index: 10;
+        }
+
+        .grid-lines {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-image:
+                radial-gradient(circle, rgba(57, 255, 20, 0.1) 1px, transparent 1px),
+                linear-gradient(rgba(57, 255, 20, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(57, 255, 20, 0.1) 1px, transparent 1px);
+            background-size:
+                15px 15px,
+                40px 40px,
+                40px 40px;
+            opacity: 0.4;
+        }
+
+        .oscilloscope {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 5;
+        }
+
+        .scanline {
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            background: rgba(57, 255, 20, 0.1);
+            animation: scanline 2s linear infinite;
+            z-index: 4;
+            pointer-events: none;
+        }
+
+        @keyframes scanline {
+            0% {
+                transform: translateY(0);
+            }
+            100% {
+                transform: translateY(100%);
+            }
+        }
+
+        .effects-grid {
+            display: flex;
+            gap: 12px;
+            justify-content: center;
+        }
+
+        .effect-group {
+            background: linear-gradient(45deg, #111417, #1a1e23);
+            border: 1px solid #39ff14;
+            border-radius: 8px;
+            padding: 10px;
+            box-shadow: 0 0 8px rgba(57, 255, 20, 0.2);
+            min-height: 80px;
+            flex: 1;
+        }
+
+        .effect-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+
+        .toggle {
+            background: linear-gradient(180deg, #1a1e23, #141719);
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            padding: 4px 8px;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-radius: 4px;
+            text-shadow: 0 0 4px #39ff14;
+            box-shadow:
+                0 0 8px rgba(57, 255, 20, 0.2),
+                inset 0 0 15px rgba(57, 255, 20, 0.1);
+            font-size: 10px;
+        }
+
+        .toggle:hover {
+            background: linear-gradient(180deg, #39ff14, #2ba80d);
+            color: #0a0c0e;
+            text-shadow: none;
+        }
+
+        .toggle.active {
+            background: #39ff14;
+            color: #0a0c0e;
+            box-shadow:
+                0 0 15px #39ff14,
+                inset 0 0 8px rgba(0,0,0,0.2);
+        }
+
+        .record-btn {
+            background: linear-gradient(180deg, #ff3939, #b82b2b);
+            border: 1px solid #ff3939;
+            color: white;
+            padding: 10px 20px;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-radius: 4px;
+            text-shadow: 0 0 4px #ff3939;
+            box-shadow:
+                0 0 8px rgba(255, 57, 57, 0.2),
+                inset 0 0 15px rgba(255, 57, 57, 0.1);
+            font-size: 12px;
+            width: 100%;
+            margin-bottom: 15px;
+        }
+
+        .record-btn:hover {
+            background: linear-gradient(180deg, #ff6b6b, #e63939);
+        }
+
+        .record-btn.recording {
+            background: linear-gradient(180deg, #ff3939, #b82b2b);
+            animation: pulse 1s infinite;
+        }
+
+        @keyframes pulse {
+            0% { box-shadow: 0 0 8px rgba(255, 57, 57, 0.2), inset 0 0 15px rgba(255, 57, 57, 0.1); }
+            50% { box-shadow: 0 0 25px rgba(255, 57, 57, 0.8), inset 0 0 25px rgba(255, 57, 57, 0.3); }
+            100% { box-shadow: 0 0 8px rgba(255, 57, 57, 0.2), inset 0 0 15px rgba(255, 57, 57, 0.1); }
+        }
+
+        .waveform-container {
+            height: 80px;
+            background: #0a0c0e;
+            border: 1px solid #39ff14;
+            border-radius: 4px;
+            position: relative;
+            margin-bottom: 8px;
+        }
+
+        .waveform {
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
+
+        .playhead {
+            position: absolute;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background: #39ff14;
+            z-index: 10;
+            cursor: ew-resize;
+        }
+
+        .playhead-handle {
+            position: absolute;
+            top: -6px;
+            left: -6px;
+            width: 14px;
+            height: 14px;
+            background: #39ff14;
+            border-radius: 50%;
+            cursor: ew-resize;
+            box-shadow: 0 0 8px #39ff14;
+            z-index: 15;
+        }
+
+        .playhead-handle:hover {
+            box-shadow: 0 0 12px #39ff14;
+        }
+
+        .selection {
+            position: absolute;
+            top: 0;
+            height: 100%;
+            background: rgba(57, 255, 20, 0.2);
+            border-left: 1px solid #39ff14;
+            border-right: 1px solid #39ff14;
+        }
+
+        /* Recording Layout */
+        .recording-layout {
+            position: relative;
+            width: 100%;
+        }
+
+        .waveform-section {
+            position: relative;
+            width: 100%;
+        }
+
+        .control-icons {
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            display: flex;
+            flex-direction: row;
+            gap: 6px;
+            align-items: center;
+        }
+
+        .icon-btn {
+            background: linear-gradient(180deg, #1a1e23, #141719);
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            width: 30px;
+            height: 24px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 0 8px rgba(57, 255, 20, 0.2);
+            font-size: 12px;
+        }
+
+        .icon-btn:hover {
+            background: linear-gradient(180deg, #39ff14, #2ba80d);
+            color: #0a0c0e;
+            box-shadow: 0 0 15px #39ff14;
+        }
+
+        .icon-btn:active {
+            transform: scale(0.95);
+        }
+
+        .record-icon {
+            background: linear-gradient(180deg, #ff3939, #b82b2b);
+            border-color: #ff3939;
+            color: white;
+            box-shadow: 0 0 8px rgba(255, 57, 57, 0.2);
+        }
+
+        .record-icon:hover {
+            background: linear-gradient(180deg, #ff6b6b, #e63939);
+            box-shadow: 0 0 15px #ff3939;
+        }
+
+        .record-icon.recording {
+            animation: pulse 1s infinite;
+        }
+
+        /* ADSR Editor Styles */
+        .adsr-window {
+            background: #0a0c0e;
+            border: 2px solid #39ff14;
+            border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 10px;
+            box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
+        }
+
+        .link-btn {
+            background: linear-gradient(180deg, #1a1e23, #141719);
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            padding: 4px 8px;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-radius: 4px;
+            font-size: 10px;
+            margin-left: 10px;
+        }
+
+        .link-btn:hover {
+            background: linear-gradient(180deg, #39ff14, #2ba80d);
+            color: #0a0c0e;
+        }
+
+        .link-btn.active {
+            background: #ff8c00;
+            color: #0a0c0e;
+            box-shadow: 0 0 15px #ff8c00;
+        }
+
+        .adsr-tabs {
+            display: flex;
+            margin-bottom: 10px;
+        }
+
+        .adsr-tab {
+            background: #1a1e23;
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            padding: 4px 8px;
+            cursor: pointer;
+            flex: 1;
+            text-align: center;
+            font-size: 10px;
+            font-family: 'Share Tech Mono', monospace;
+        }
+
+        .adsr-tab:hover {
+            background: linear-gradient(180deg, #39ff14, #2ba80d);
+            color: #0a0c0e;
+        }
+
+        .adsr-tab.active {
+            background: #39ff14;
+            color: #0a0c0e;
+        }
+
+        .adsr-tab.hidden {
+            display: none;
+        }
+
+        .adsr-editor {
+            background: #000;
+            border: 1px solid #39ff14;
+            padding: 10px;
+        }
+
+        .adsr-canvas {
+            width: 100%;
+            height: 80px;
+            background: #000;
+            border: 1px solid #39ff14;
+            margin-bottom: 10px;
+        }
+
+        .adsr-controls {
+            display: flex;
+            gap: 5px;
+            justify-content: space-between;
+        }
+
+        .adsr-slider {
+            width: 40px;
+            height: 10px;
+            writing-mode: bt-lr;
+            -webkit-appearance: none;
+            background: linear-gradient(to top, #1a1e23, #093f04);
+            border-radius: 2px;
+            outline: none;
+        }
+
+        .adsr-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 16px;
+            height: 8px;
+            background: #39ff14;
+            border-radius: 0px;
+            cursor: pointer;
+            box-shadow: 0 0 8px #39ff14;
+        }
+
+        .filter-type-selector {
+            margin-top: 10px;
+        }
+
+        .filter-type-selector select {
+            background: #1a1e23;
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            padding: 2px;
+            font-size: 10px;
+            font-family: 'Share Tech Mono', monospace;
+            width: 100%;
+        }
+
+        .filter-controls {
+            /* Inherits from control-group styles */
+        }
+
+        .param-select {
+            background: #1a1e23;
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            padding: 2px 4px;
+            font-size: 10px;
+            font-family: 'Share Tech Mono', monospace;
+            width: 100%;
+            margin-bottom: 4px;
+        }
+
+        .param-select:focus {
+            outline: none;
+            box-shadow: 0 0 8px #39ff14;
+        }
+
+        .modulation-controls {
+            margin-top: 10px;
+        }
+
+        .compressor-attack-release {
+            display: flex;
+            gap: 5px;
+            justify-content: space-between;
+        }
+
+        .compressor-slider-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 2px;
+        }
+
+        .compressor-slider-container .control-label {
+            font-size: 10px;
+            margin-bottom: 0;
+        }
+
+        .compressor-slider-container .slider {
+            width: 100%;
+        }
+
+        .compressor-value {
+            font-size: 9px;
+            color: #39ff14;
+            opacity: 0.8;
+            text-align: center;
+        }
+
+        .slider:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .effect-group.effect-off {
+            opacity: 0.5;
+        }
+
+        /* MIDI Editor Styles */
+        .midi-editor {
+            background: #0a0c0e;
+            border: 2px solid #39ff14;
+            border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 10px;
+            box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
+        }
+
+        .midi-tabs {
+            display: flex;
+            margin-bottom: 10px;
+        }
+
+        .midi-tab {
+            background: #1a1e23;
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            padding: 4px 8px;
+            cursor: pointer;
+            flex: 1;
+            text-align: center;
+            font-size: 10px;
+            font-family: 'Share Tech Mono', monospace;
+        }
+
+        .midi-tab:hover {
+            background: linear-gradient(180deg, #39ff14, #2ba80d);
+            color: #0a0c0e;
+        }
+
+        .midi-tab.active {
+            background: #39ff14;
+            color: #0a0c0e;
+        }
+
+        .midi-controls {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 10px;
+            flex-wrap: wrap;
+        }
+
+        .midi-control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            min-width: 60px;
+        }
+
+        .midi-control-group label {
+            font-size: 9px;
+            color: #39ff14;
+            opacity: 0.8;
+            text-align: center;
+        }
+
+        .midi-select {
+            background: #1a1e23;
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            padding: 2px 4px;
+            font-size: 10px;
+            font-family: 'Share Tech Mono', monospace;
+            border-radius: 3px;
+        }
+
+        .midi-transport {
+            display: flex;
+            gap: 6px;
+            justify-content: center;
+            margin-bottom: 10px;
+        }
+
+        .midi-transport-btn {
+            background: linear-gradient(180deg, #1a1e23, #141719);
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            width: 24px;
+            height: 24px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 0 8px rgba(57, 255, 20, 0.2);
+            font-size: 10px;
+        }
+
+        .midi-transport-btn:hover {
+            background: linear-gradient(180deg, #39ff14, #2ba80d);
+            color: #0a0c0e;
+            box-shadow: 0 0 15px #39ff14;
+        }
+
+        .midi-transport-btn.playing {
+            background: #39ff14;
+            color: #0a0c0e;
+            animation: pulse 1s infinite;
+        }
+
+        .piano-roll-container {
+            position: relative;
+            background: #000;
+            border: 1px solid #39ff14;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .piano-roll-canvas {
+            background: #0a0c0e;
+            display: block;
+        }
+
+        .piano-roll-grid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                linear-gradient(rgba(57, 255, 20, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(57, 255, 20, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+            pointer-events: none;
+        }
+
+        .piano-roll-navigation {
+            display: flex;
+            gap: 8px;
+            margin-top: 8px;
+        }
+
+        .nav-slider-container {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            flex: 1;
+        }
+
+        .nav-slider-container.vertical {
+            flex-direction: column;
+            width: 20px;
+            height: 120px;
+        }
+
+        .nav-slider-container.horizontal {
+            flex-direction: row;
+            height: 20px;
+            width: 100%;
+        }
+
+        .nav-slider {
+            flex: 1;
+            -webkit-appearance: none;
+            background: linear-gradient(90deg, #1a1e23, #39ff14);
+            border-radius: 2px;
+            outline: none;
+        }
+
+        .nav-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 12px;
+            height: 12px;
+            background: #39ff14;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 0 6px #39ff14;
+        }
+
+        .nav-slider.vertical {
+            width: 8px;
+            height: 100px;
+            writing-mode: bt-lr;
+        }
+
+        .nav-slider.horizontal {
+            width: 100%;
+            height: 8px;
+        }
+
+        .nav-label {
+            font-size: 8px;
+            color: #39ff14;
+            opacity: 0.7;
+            text-align: center;
+            min-width: 30px;
+        }
+
+        .midi-generation {
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px solid rgba(57, 255, 20, 0.3);
+        }
+
+        .midi-generation-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 8px;
+            margin-bottom: 8px;
+        }
+
+        .midi-generation-btn {
+            background: linear-gradient(180deg, #1a1e23, #141719);
+            border: 1px solid #39ff14;
+            color: #39ff14;
+            padding: 4px 8px;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-radius: 4px;
+            font-size: 9px;
+            text-align: center;
+        }
+
+        .midi-generation-btn:hover {
+            background: linear-gradient(180deg, #39ff14, #2ba80d);
+            color: #0a0c0e;
+        }
+
+        .midi-generation-btn.active {
+            background: #39ff14;
+            color: #0a0c0e;
+        }
+
+
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1 class="title">MS1-BX</h1>
+        </div>
+
+        <div class="main-content">
+            <div class="control-layout">
+                <!-- Top Left: Sound Selector -->
+                <div class="control-panel top-left">
+                    <h3 class="panel-title">SOUND GENERATION</h3>
+                    <div class="sound-buttons">
+                        <button class="sound-btn active" data-sound="fm">FM SYNTH</button>
+                        <button class="sound-btn" data-sound="additive">ADDITIVE</button>
+                    </div>
+                </div>
+
+                <!-- Top Center: Wave Selector -->
+                <div class="control-panel top-center">
+                    <h3 class="panel-title">OSCILLATOR WAVEFORM</h3>
+                    <div class="wave-buttons">
+                        <button class="wave-btn active" data-wave="sine">
+                            <svg class="wave-icon" viewBox="0 0 30 30">
+                                <path class="sine-wave" d="M2,15 C8,5 12,25 18,15 C24,5 28,25 32,15" />
+                            </svg>
+                        </button>
+                        <button class="wave-btn" data-wave="sawtooth">
+                            <svg class="wave-icon" viewBox="0 0 30 30">
+                                <path class="sawtooth-wave" d="M2,25 L15,5 L15,25 L28,5" />
+                            </svg>
+                        </button>
+                        <button class="wave-btn" data-wave="square">
+                            <svg class="wave-icon" viewBox="0 0 30 30">
+                                <path class="square-wave" d="M2,25 L2,5 L15,5 L15,25 L28,25 L28,5" />
+                            </svg>
+                        </button>
+                        <button class="wave-btn" data-wave="triangle">
+                            <svg class="wave-icon" viewBox="0 0 30 30">
+                                <path class="triangle-wave" d="M2,25 L15,5 L28,25" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Top Right: Note Controls -->
+                <div class="control-panel top-right">
+                    <h3 class="panel-title">NOTE CONTROLS</h3>
+                    <div class="note-controls">
+                        <div class="note-control-group">
+                            <div class="control-label">GLIDE TIME [FM ONLY]</div>
+                            <div class="slider-container">
+                                <input type="range" class="slider" id="glideTime" min="0" max="5" step="0.01" value="0">
+                                <span class="slider-value" id="glideTimeValue">0.00s</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Center: XY Pad -->
+                <div class="control-panel center">
+                    <div class="xy-container">
+                        <div class="xy-pad">
+                            <div class="grid-lines"></div>
+                            <div class="scanline"></div>
+                            <canvas class="oscilloscope"></canvas>
+                            <div class="xy-cursor"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Left Container -->
+                <div class="control-panel left-container synth-controls">
+                    <h3 class="panel-title">ENVELOPE/MODULATION</h3>
+
+                    <!-- ADSR Window -->
+                    <div class="adsr-window">
+                        <div class="adsr-tabs">
+                            <button class="adsr-tab active" data-envelope="amp">AMP</button>
+                            <button class="adsr-tab" data-envelope="filter">FILTER</button>
+                            <button class="adsr-tab" data-envelope="modulation">MOD</button>
+                            <button class="link-btn" id="linkBtn">LINK</button>
+                        </div>
+                        <div class="adsr-editor">
+                            <canvas class="adsr-canvas" width="200" height="80"></canvas>
+                            <div class="adsr-controls">
+                                <div class="control-group">
+                                    <div class="control-label">A</div>
+                                    <input type="range" class="adsr-slider" id="attack" min="0.01" max="2" step="0.01" value="0.01">
+                                </div>
+                                <div class="control-group">
+                                    <div class="control-label">D</div>
+                                    <input type="range" class="adsr-slider" id="decay" min="0.01" max="2" step="0.01" value="0.2">
+                                </div>
+                                <div class="control-group">
+                                    <div class="control-label">S</div>
+                                    <input type="range" class="adsr-slider" id="sustain" min="0" max="1" step="0.01" value="0.8">
+                                </div>
+                                <div class="control-group">
+                                    <div class="control-label">R</div>
+                                    <input type="range" class="adsr-slider" id="release" min="0.01" max="4" step="0.01" value="1">
+                                </div>
+                            </div>
+                            <div class="filter-type-selector">
+                                <select id="filterType">
+                                    <option value="lowpass">Lowpass</option>
+                                    <option value="highpass">Highpass</option>
+                                    <option value="bandpass">Bandpass</option>
+                                    <option value="notch">Notch</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Filter Controls -->
+                    <div class="filter-controls">
+                        <div class="control-group">
+                            <div class="control-label">CUTOFF</div>
+                            <div class="slider-container">
+                                <input type="range" class="slider" id="filterCutoff" min="20" max="20000" value="1000">
+                                <span class="slider-value" id="filterCutoffValue">1000Hz</span>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <div class="control-label">RESONANCE</div>
+                            <div class="slider-container">
+                                <input type="range" class="slider" id="filterResonance" min="0.1" max="20" step="0.1" value="1">
+                                <span class="slider-value" id="filterResonanceValue">1.0</span>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <div class="control-label">ENVELOPE AMOUNT</div>
+                            <div class="slider-container">
+                                <input type="range" class="slider" id="filterEnvelopeAmount" min="0" max="100" value="100">
+                                <span class="slider-value" id="filterEnvelopeAmountValue">100%</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- X/Y Modulation Controls -->
+                    <div class="modulation-controls">
+                        <div class="control-group">
+                            <div class="control-label">X MODULATION</div>
+                            <select class="param-select" id="xParamSelect">
+                                <option value="modulationIndex">Modulation Index</option>
+                            </select>
+                            <div class="slider-container">
+                                <input type="range" class="slider" id="xModulation" min="0" max="100" value="10">
+                                <span class="slider-value" id="xModulationValue">10</span>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <div class="control-label">Y MODULATION</div>
+                            <select class="param-select" id="yParamSelect">
+                                <option value="harmonicity">Harmonicity</option>
+                            </select>
+                            <div class="slider-container">
+                                <input type="range" class="slider" id="yModulation" min="0" max="10" value="3">
+                                <span class="slider-value" id="yModulationValue">3.0</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Right Container -->
+                <div class="control-panel right-container">
+                    <h3 class="panel-title">RIGHT CONTROLS</h3>
+                </div>
+
+                <!-- Bottom Center: Effects -->
+                <div class="control-panel bottom-center">
+                    <h3 class="panel-title">EFFECTS</h3>
+                    <div class="effects-grid">
+                        <div class="effect-group">
+                            <div class="effect-header">
+                                <span id="distortionHeader">DISTORTION: Clean</span>
+                                <button class="toggle" data-effect="distortion">OFF</button>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">PRESET</span>
+                                <input type="range" class="slider" id="distortionPreset" min="1" max="8" value="1">
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">MIX</span>
+                                <input type="range" class="slider" id="distortionMix" min="0" max="100" value="20">
+                                <span class="slider-value" id="distortionMixValue">20%</span>
+                            </div>
+                        </div>
+
+                        <div class="effect-group">
+                            <div class="effect-header">
+                                <span>CHORUS</span>
+                                <button class="toggle" data-effect="chorus">OFF</button>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">MIX</span>
+                                <input type="range" class="slider" id="chorusMix" min="0" max="100" value="40">
+                                <span class="slider-value" id="chorusMixValue">40%</span>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">DEPTH</span>
+                                <input type="range" class="adsr-slider" id="chorusDepth" min="0" max="1" step="0.01" value="0.5">
+                                <span class="slider-value" id="chorusDepthValue">0.50</span>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">SPREAD</span>
+                                <input type="range" class="adsr-slider" id="chorusSpread" min="0" max="180" step="1" value="180">
+                                <span class="slider-value" id="chorusSpreadValue">180°</span>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">FREQUENCY</span>
+                                <input type="range" class="adsr-slider" id="chorusFrequency" min="0.1" max="10" step="0.1" value="4">
+                                <span class="slider-value" id="chorusFrequencyValue">4.0Hz</span>
+                            </div>
+                        </div>
+
+                        <div class="effect-group">
+                            <div class="effect-header">
+                                <span>REVERB</span>
+                                <button class="toggle" data-effect="reverb">OFF</button>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">MIX</span>
+                                <input type="range" class="slider" id="reverbMix" min="0" max="100" value="50">
+                                <span class="slider-value" id="reverbMixValue">50%</span>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">DECAY</span>
+                                <input type="range" class="adsr-slider" id="reverbDecay" min="0.1" max="10" step="0.1" value="2">
+                                <span class="slider-value" id="reverbDecayValue">2.0s</span>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">PRE DELAY</span>
+                                <input type="range" class="adsr-slider" id="reverbPreDelay" min="0" max="1" step="0.01" value="0.01">
+                                <span class="slider-value" id="reverbPreDelayValue">0.01s</span>
+                            </div>
+                        </div>
+
+                        <div class="effect-group">
+                            <div class="effect-header">
+                                <span>COMPRESSOR</span>
+                                <button class="toggle" data-effect="compressor">OFF</button>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">RATIO</span>
+                                <input type="range" class="slider" id="compressorRatio" min="1" max="20" step="0.1" value="4">
+                                <span class="slider-value" id="compressorRatioValue">4:1</span>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">THRESHOLD</span>
+                                <input type="range" class="slider" id="compressorThreshold" min="-100" max="0" step="1" value="-24">
+                                <span class="slider-value" id="compressorThresholdValue">-24dB</span>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">ATTACK</span>
+                                <input type="range" class="adsr-slider" id="compressorAttack" min="0.001" max="1" step="0.001" value="0.1">
+                                <span class="slider-value" id="compressorAttackValue">0.10s</span>
+                            </div>
+                            <div class="slider-container">
+                                <span class="control-label">RELEASE</span>
+                                <input type="range" class="adsr-slider" id="compressorRelease" min="0.05" max="1" step="0.01" value="0.2">
+                                <span class="slider-value" id="compressorReleaseValue">0.20s</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Full Width Recording -->
+                <div class="control-panel recording-full">
+                    <h3 class="panel-title">RECORDING</h3>
+                    <div class="recording-layout">
+                        <div class="waveform-section">
+                            <div class="waveform-container">
+                                <canvas class="waveform" id="waveformCanvas"></canvas>
+                                <div class="playhead" id="playhead" style="left: 0%;"></div>
+                                <div class="playhead-handle" id="playheadHandle"></div>
+                                <div class="selection" id="selection" style="display: none;"></div>
+                            </div>
+                        </div>
+                        <div class="control-icons">
+                            <button class="icon-btn record-icon" id="recordBtn" title="Start/Stop Recording">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <circle cx="12" cy="12" r="10"/>
+                                    <circle cx="12" cy="12" r="3"/>
+                                </svg>
+                            </button>
+                            <button class="icon-btn play-icon" id="playSample" title="Play Sample">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <polygon points="8,5 19,12 8,19"/>
+                                </svg>
+                            </button>
+                            <button class="icon-btn export-icon" id="exportWav" title="Export WAV">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M19,9h-4V3H9v6H5l7,7L19,9z M5,18v2h14v-2H5z"/>
+                                </svg>
+                            </button>
+                            <button class="icon-btn slice-icon" id="sliceBtn" title="Slice Audio">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M9.64,7.64c0.23-0.5,0.36-1.05,0.36-1.64c0-2.21-1.79-4-4-4S2,3.79,2,6s1.79,4,4,4c0.59,0,1.14-0.13,1.64-0.36L10,12l-2.36,2.36 C7.14,14.13,6.59,14,6,14c-2.21,0-4,1.79-4,4s1.79,4,4,4s4-1.79,4-4c0-0.59-0.13-1.14-0.36-1.64L12,14l7,7h3v-2L9.64,7.64z"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // ===========================================
+        // AUDIO ENGINE SETUP
+        // ===========================================
+
+        let currentSynth = null;
+        let isRecording = false;
+        let waveformData = [];
+        let sampleBuffer = null;
+        let currentWaveform = 'sine';
+        let glideTime = 0;
+
+        // Initialize FM Synth
+        const fmSynth = new Tone.FMSynth({
+            modulationIndex: 10,
+            harmonicity: 3,
+            envelope: {
+                attack: 0.01,
+                decay: 0.2,
+                sustain: 0.8,
+                release: 1
+            },
+            modulationEnvelope: {
+                attack: 0.01,
+                decay: 0.2,
+                sustain: 0.8,
+                release: 1
+            }
+        });
+
+        // Initialize Additive Synth with DuoSynth
+        const additiveSynth = new Tone.PolySynth(Tone.DuoSynth, {
+            vibratoAmount: 0,
+            vibratoRate: 5,
+            harmonicity: 1,
+            voice0: {
+                oscillator: { type: 'sine' },
+                envelope: {
+                    attack: 0.01,
+                    decay: 0.2,
+                    sustain: 0.8,
+                    release: 1
+                }
+            },
+            voice1: {
+                oscillator: { type: 'sine' },
+                envelope: {
+                    attack: 0.01,
+                    decay: 0.2,
+                    sustain: 0.8,
+                    release: 1
+                }
+            },
+            maxPolyphony: 16
+        });
+
+        const filter = new Tone.Filter({
+            frequency: 1000,
+            type: 'lowpass',
+            Q: 1,
+            gain: 0
+        });
+
+        const filterEnvelope = new Tone.FrequencyEnvelope({
+            attack: 0.01,
+            decay: 0.2,
+            sustain: 0.8,
+            release: 1,
+            baseFrequency: 1000,
+            octaves: 4
+        });
+
+        filterEnvelope.connect(filter.frequency);
+
+        // ===========================================
+        // EFFECTS CHAIN
+        // ===========================================
+
+        const compressor = new Tone.Compressor({
+            ratio: 4,
+            threshold: -24,
+            attack: 0.1,
+            release: 0.2
+        });
+
+        const chorus = new Tone.Chorus({
+            frequency: 4,
+            delayTime: 2.5,
+            depth: 0.5,
+            wet: 0
+        }).start();
+
+        const reverb = new Tone.Reverb({
+            decay: 2,
+            wet: 0
+        });
+
+        // Guitar Amp Distortion Presets
+        const distortionPresets = [
+            { name: 'Clean', chebyshev1: null, chebyshev2: null, gain: 1, feedback: false },
+            { name: 'Crunch', chebyshev1: { order: 2, wet: 0.3 }, chebyshev2: null, gain: 1.2, feedback: false },
+            { name: 'OD', chebyshev1: { order: 4, wet: 0.4 }, chebyshev2: null, gain: 1.5, feedback: false },
+            { name: 'Blood', chebyshev1: { order: 6, wet: 0.6 }, chebyshev2: { order: 2, wet: 0.2 }, gain: 2, feedback: false },
+            { name: 'Heavy', chebyshev1: { order: 8, wet: 0.7 }, chebyshev2: { order: 4, wet: 0.3 }, gain: 2.5, feedback: false },
+            { name: 'Fuzz', chebyshev1: { order: 10, wet: 0.8 }, chebyshev2: { order: 6, wet: 0.4 }, gain: 3, feedback: false },
+            { name: 'Scream', chebyshev1: { order: 12, wet: 0.9 }, chebyshev2: { order: 8, wet: 0.5 }, gain: 3.5, feedback: true },
+            { name: 'Extreme', chebyshev1: { order: 14, wet: 1.0 }, chebyshev2: { order: 10, wet: 0.6 }, gain: 4, feedback: true }
+        ];
+
+        // Initialize distortion effects
+        let currentDistortionPreset = 0;
+        const chebyshev1 = new Tone.Chebyshev({ order: 2, wet: 0 });
+        const chebyshev2 = new Tone.Chebyshev({ order: 4, wet: 0 });
+        const distortionGain = new Tone.Gain(1);
+        const distortionFeedback = new Tone.FeedbackDelay({
+            delayTime: 0.01,
+            feedback: 0.3,
+            wet: 0
+        });
+
+        // Distortion chain: input -> gain -> chebyshev1 -> chebyshev2 -> feedback -> output
+        const distortionChain = [distortionGain, chebyshev1, chebyshev2, distortionFeedback];
+
+        // Effects chain
+        const effectsChain = [...distortionChain, chorus, reverb, compressor];
+
+        // Compressor bypass flag
+        let compressorBypassed = true;
+
+        // Analyzer for oscilloscope
+        const analyzer = new Tone.Analyser('waveform', 256);
+
+        // Initialize with FM Synth
+        currentSynth = fmSynth;
+        currentSynth.chain(filter, ...effectsChain, analyzer, Tone.Destination);
+
+        // Initially bypass compressor
+        compressor.disconnect(analyzer);
+        reverb.connect(analyzer);
+
+        // ===========================================
+        // RECORDING SETUP
+        // ===========================================
+
+        // Create Tone.Recorder and connect to last effect in chain (reverb)
+        const toneRecorder = new Tone.Recorder();
+        reverb.connect(toneRecorder);
+
+        // MIDI Support
+        let activeMIDINotes = [];
+
+        if (navigator.requestMIDIAccess) {
+            navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
+        }
+
+        function onMIDISuccess(midiAccess) {
+            for (let input of midiAccess.inputs.values()) {
+                input.onmidimessage = onMIDIMessage;
+            }
+        }
+
+        function onMIDIFailure() {
+            console.log('MIDI access failed');
+        }
+
+        function fmMidiHandler(command, note, velocity) {
+            if (command === 144 && velocity > 0) { // Note on
+                if (!activeMIDINotes.includes(note)) {
+                    activeMIDINotes.push(note);
+                }
+                const freq = Tone.Frequency(note, 'midi').toFrequency();
+                if (activeMIDINotes.length === 1) {
+                    fmSynth.triggerAttack(freq);
+                    filterEnvelope.triggerAttack();
+                } else if (glideTime > 0) {
+                    fmSynth.frequency.rampTo(freq, glideTime);
+                } else {
+                    fmSynth.frequency.setValueAtTime(freq, Tone.now());
+                }
+            } else if (command === 128 || (command === 144 && velocity === 0)) { // Note off
+                const index = activeMIDINotes.indexOf(note);
+                if (index !== -1) {
+                    activeMIDINotes.splice(index, 1);
+                    if (activeMIDINotes.length === 0) {
+                        fmSynth.triggerRelease();
+                        filterEnvelope.triggerRelease();
+                    } else {
+                        // Set to first held note
+                        const firstNote = activeMIDINotes[0];
+                        const firstFreq = Tone.Frequency(firstNote, 'midi').toFrequency();
+                        if (glideTime > 0) {
+                            fmSynth.frequency.rampTo(firstFreq, glideTime);
+                        } else {
+                            fmSynth.frequency.setValueAtTime(firstFreq, Tone.now());
+                        }
+                    }
+                }
+            }
+        }
+
+        function additiveMidiHandler(command, note, velocity) {
+            const freq = Tone.Frequency(note, 'midi').toFrequency();
+            if (command === 144 && velocity > 0) { // Note on
+                if (activeMIDINotes.length === 0) {
+                    filterEnvelope.triggerAttack();
+                }
+                activeMIDINotes.push(note);
+                additiveSynth.triggerAttack(freq, Tone.now(), velocity / 127);
+            } else if (command === 128 || (command === 144 && velocity === 0)) { // Note off
+                const index = activeMIDINotes.indexOf(note);
+                if (index !== -1) {
+                    activeMIDINotes.splice(index, 1);
+                }
+                additiveSynth.triggerRelease(freq, Tone.now());
+                if (activeMIDINotes.length === 0) {
+                    filterEnvelope.triggerRelease();
+                }
+            }
+        }
+
+        function fmKeyboardHandler(key, freq) {
+            if (!pressedKeys.includes(key)) {
+                pressedKeys.push(key);
+                if (pressedKeys.length === 1) {
+                    fmSynth.triggerAttack(freq);
+                    filterEnvelope.triggerAttack();
+                } else if (glideTime > 0) {
+                    fmSynth.frequency.rampTo(freq, glideTime);
+                } else {
+                    fmSynth.frequency.setValueAtTime(freq, Tone.now());
+                }
+            }
+        }
+
+        function additiveKeyboardHandler(key, freq) {
+            if (!pressedKeys.includes(key)) {
+                pressedKeys.push(key);
+                if (pressedKeys.length === 1) {
+                    filterEnvelope.triggerAttack();
+                }
+                additiveSynth.triggerAttack(freq, Tone.now());
+            }
+        }
+
+        function fmKeyboardKeyup(key, freq) {
+            if (pressedKeys.includes(key)) {
+                const index = pressedKeys.indexOf(key);
+                pressedKeys.splice(index, 1);
+                if (pressedKeys.length === 0) {
+                    fmSynth.triggerRelease();
+                    filterEnvelope.triggerRelease();
+                } else {
+                    const firstKey = pressedKeys[0];
+                    const firstNote = keyMap[firstKey];
+                    const firstFreq = Tone.Frequency(firstNote).toFrequency();
+                    if (glideTime > 0) {
+                        fmSynth.frequency.rampTo(firstFreq, glideTime);
+                    } else {
+                        fmSynth.frequency.setValueAtTime(firstFreq, Tone.now());
+                    }
+                }
+            }
+        }
+
+        function additiveKeyboardKeyup(key, freq) {
+            if (pressedKeys.includes(key)) {
+                const index = pressedKeys.indexOf(key);
+                pressedKeys.splice(index, 1);
+                additiveSynth.triggerRelease(freq, Tone.now());
+                if (pressedKeys.length === 0) {
+                    filterEnvelope.triggerRelease();
+                }
+            }
+        }
+
+        function onMIDIMessage(message) {
+            const [command, note, velocity] = message.data;
+            if (currentSynth === fmSynth) {
+                fmMidiHandler(command, note, velocity);
+            } else {
+                additiveMidiHandler(command, note, velocity);
+            }
+        }
+
+        // Full chromatic keyboard mapping
+        const keyMap = {
+            'z': 'C2', 's': 'C#2', 'x': 'D2', 'd': 'D#2', 'c': 'E2', 'v': 'F2', 'g': 'F#2', 'b': 'G2', 'h': 'G#2', 'n': 'A2', 'j': 'A#2', 'm': 'B2',
+            'q': 'C3', '2': 'C#3', 'w': 'D3', '3': 'D#3', 'e': 'E3', 'r': 'F3', '5': 'F#3', 't': 'G3', '6': 'G#3', 'y': 'A3', '7': 'A#3', 'u': 'B3',
+            'i': 'C4', '9': 'C#4', 'o': 'D4', '0': 'D#4', 'p': 'E4', '[': 'F4', '=': 'F#4', ']': 'G4'
+        };
+
+        const pressedKeys = [];
+
+        // Oscilloscope
+        const canvas = document.querySelector('.oscilloscope');
+        const ctx = canvas.getContext('2d');
+
+        function resizeCanvas() {
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+        }
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+
+        function drawOscilloscope() {
+            requestAnimationFrame(drawOscilloscope);
+            const values = analyzer.getValue();
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            ctx.beginPath();
+            ctx.strokeStyle = '#39ff14';
+            ctx.lineWidth = 2;
+
+            for(let i = 0; i < values.length; i++) {
+                const x = (i / values.length) * canvas.width;
+                const y = ((values[i] + 1) / 2) * canvas.height;
+
+                if(i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+
+            ctx.stroke();
+            ctx.strokeStyle = '#39ff1440';
+            ctx.lineWidth = 1;
+            ctx.stroke();
+        }
+        drawOscilloscope();
+
+        // ===========================================
+        // SYNTH CONTROLS
+        // ===========================================
+
+        let currentEnvelopeMode = 'amp'; // 'amp', 'filter', or 'modulation'
+        let isLinked = false; // Whether envelopes are linked to synth
+
+        // ADSR Canvas
+        const adsrCanvas = document.querySelector('.adsr-canvas');
+        const adsrCtx = adsrCanvas.getContext('2d');
+
+        function drawADSR() {
+            adsrCtx.clearRect(0, 0, adsrCanvas.width, adsrCanvas.height);
+            adsrCtx.strokeStyle = '#39ff14';
+            adsrCtx.lineWidth = 2;
+            adsrCtx.beginPath();
+
+            const attack = parseFloat(document.getElementById('attack').value);
+            const decay = parseFloat(document.getElementById('decay').value);
+            const sustain = parseFloat(document.getElementById('sustain').value);
+            const release = parseFloat(document.getElementById('release').value);
+
+            const totalTime = attack + decay + 1 + release; // 1 second sustain
+            const width = adsrCanvas.width;
+            const height = adsrCanvas.height;
+
+            // Attack
+            const attackX = (attack / totalTime) * width;
+            adsrCtx.moveTo(0, height);
+            adsrCtx.lineTo(attackX, 0);
+
+            // Decay
+            const decayX = ((attack + decay) / totalTime) * width;
+            const sustainY = height - (sustain * height);
+            adsrCtx.lineTo(decayX, sustainY);
+
+            // Sustain
+            const sustainEndX = ((attack + decay + 1) / totalTime) * width;
+            adsrCtx.lineTo(sustainEndX, sustainY);
+
+            // Release
+            adsrCtx.lineTo(width, height);
+
+            adsrCtx.stroke();
+        }
+
+        // ADSR Tabs
+        document.querySelectorAll('.adsr-tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                document.querySelectorAll('.adsr-tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                currentEnvelopeMode = tab.dataset.envelope;
+
+                // Update slider values to current envelope
+                updateADSRSliders();
+            });
+        });
+
+        // Link Button
+        document.getElementById('linkBtn').addEventListener('click', () => {
+            isLinked = !isLinked;
+            const linkBtn = document.getElementById('linkBtn');
+            if (isLinked) {
+                linkBtn.classList.add('active');
+                // When linking, sync all envelopes to synth values
+                syncEnvelopesToSynth();
+            } else {
+                linkBtn.classList.remove('active');
+                // When unlinking, allow independent control
+                updateADSRSliders();
+            }
+        });
+
+        function syncEnvelopesToSynth() {
+            // Get current synth envelope values
+            const attackVal = fmSynth.envelope.attack;
+            const decayVal = fmSynth.envelope.decay;
+            const sustainVal = fmSynth.envelope.sustain;
+            const releaseVal = fmSynth.envelope.release;
+
+            // Sync all envelopes to synth values
+            filterEnvelope.attack = attackVal;
+            filterEnvelope.decay = decayVal;
+            filterEnvelope.sustain = sustainVal;
+            filterEnvelope.release = releaseVal;
+
+            // Update additive synth envelopes too
+            additiveSynth.set({
+                voice0: { envelope: { attack: attackVal, decay: decayVal, sustain: sustainVal, release: releaseVal } },
+                voice1: { envelope: { attack: attackVal, decay: decayVal, sustain: sustainVal, release: releaseVal } }
+            });
+        }
+
+        function updateADSRSliders() {
+            let envelope;
+            if (currentEnvelopeMode === 'amp') {
+                envelope = fmSynth.envelope; // Use FM synth envelope as reference
+            } else if (currentEnvelopeMode === 'filter') {
+                envelope = filterEnvelope;
+            } else if (currentEnvelopeMode === 'modulation') {
+                envelope = fmSynth.modulationEnvelope;
+            }
+
+            // Disable sliders if linked and not in amp mode, or if modulation mode and not FM synth
+            const sliders = document.querySelectorAll('.adsr-slider');
+            const isDisabled = (isLinked && currentEnvelopeMode !== 'amp') || (currentEnvelopeMode === 'modulation' && currentSynth !== fmSynth);
+
+            sliders.forEach(slider => {
+                slider.disabled = isDisabled;
+                if (isDisabled) {
+                    slider.style.opacity = '0.5';
+                    slider.style.cursor = 'not-allowed';
+                } else {
+                    slider.style.opacity = '1';
+                    slider.style.cursor = 'pointer';
+                }
+            });
+
+            document.getElementById('attack').value = envelope.attack;
+            document.getElementById('decay').value = envelope.decay;
+            document.getElementById('sustain').value = envelope.sustain;
+            document.getElementById('release').value = envelope.release;
+            drawADSR();
+        }
+
+        // ADSR Sliders
+        document.querySelectorAll('.adsr-slider').forEach(slider => {
+            slider.addEventListener('input', () => {
+                if (currentEnvelopeMode === 'amp') {
+                    // Set both synth envelopes
+                    const attackVal = parseFloat(document.getElementById('attack').value);
+                    const decayVal = parseFloat(document.getElementById('decay').value);
+                    const sustainVal = parseFloat(document.getElementById('sustain').value);
+                    const releaseVal = parseFloat(document.getElementById('release').value);
+
+                    fmSynth.envelope.attack = attackVal;
+                    fmSynth.envelope.decay = decayVal;
+                    fmSynth.envelope.sustain = sustainVal;
+                    fmSynth.envelope.release = releaseVal;
+
+                    additiveSynth.set({
+                        voice0: { envelope: { attack: attackVal, decay: decayVal, sustain: sustainVal, release: releaseVal } },
+                        voice1: { envelope: { attack: attackVal, decay: decayVal, sustain: sustainVal, release: releaseVal } }
+                    });
+
+                    // If linked, sync all envelopes to these values
+                    if (isLinked) {
+                        filterEnvelope.attack = attackVal;
+                        filterEnvelope.decay = decayVal;
+                        filterEnvelope.sustain = sustainVal;
+                        filterEnvelope.release = releaseVal;
+                    }
+                } else if (currentEnvelopeMode === 'filter') {
+                    if (!isLinked) {
+                        filterEnvelope.attack = parseFloat(document.getElementById('attack').value);
+                        filterEnvelope.decay = parseFloat(document.getElementById('decay').value);
+                        filterEnvelope.sustain = parseFloat(document.getElementById('sustain').value);
+                        filterEnvelope.release = parseFloat(document.getElementById('release').value);
+                    }
+                } else if (currentEnvelopeMode === 'modulation') {
+                    // Set modulation envelope for FM synth
+                    fmSynth.modulationEnvelope.attack = parseFloat(document.getElementById('attack').value);
+                    fmSynth.modulationEnvelope.decay = parseFloat(document.getElementById('decay').value);
+                    fmSynth.modulationEnvelope.sustain = parseFloat(document.getElementById('sustain').value);
+                    fmSynth.modulationEnvelope.release = parseFloat(document.getElementById('release').value);
+                }
+                drawADSR();
+            });
+        });
+
+        // Filter Type Selector (for filter envelope tab)
+        document.getElementById('filterType').addEventListener('change', (e) => {
+            filter.type = e.target.value;
+        });
+
+        // Filter Controls
+        document.getElementById('filterCutoff').addEventListener('input', (e) => {
+            const sliderValue = parseFloat(e.target.value);
+            let frequency;
+
+            if (sliderValue <= 10000) {
+                // First half: Linear mapping from 20Hz to 1000Hz
+                frequency = 20 + (sliderValue / 10000) * (1000 - 20);
+            } else {
+                // Second half: Exponential mapping from 1000Hz to 20000Hz
+                const normalizedValue = (sliderValue - 10000) / 10000; // 0 to 1
+                frequency = 1000 * Math.pow(20000 / 1000, normalizedValue);
+            }
+
+            filterEnvelope.baseFrequency = frequency;
+            document.getElementById('filterCutoffValue').textContent = Math.round(frequency) + 'Hz';
+
+            // Recalculate octaves based on current envelope amount
+            const amount = parseInt(document.getElementById('filterEnvelopeAmount').value);
+            const targetMax = 20000;
+            const octaves = (amount / 100) * Math.log2(targetMax / frequency);
+            filterEnvelope.octaves = octaves;
+        });
+
+        document.getElementById('filterResonance').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            filter.Q.value = value;
+            document.getElementById('filterResonanceValue').textContent = value.toFixed(1);
+        });
+
+        document.getElementById('filterEnvelopeAmount').addEventListener('input', (e) => {
+            const amount = parseInt(e.target.value);
+            document.getElementById('filterEnvelopeAmountValue').textContent = amount + '%';
+
+            // Calculate octaves based on envelope amount
+            const baseFreq = filterEnvelope.baseFrequency;
+            const targetMax = 20000;
+            const octaves = (amount / 100) * Math.log2(targetMax / baseFreq);
+
+            filterEnvelope.octaves = octaves;
+        });
+
+
+
+        // Initialize ADSR display
+        drawADSR();
+
+        // ===========================================
+        // MODULATION CONTROLS
+        // ===========================================
+
+        // Parameter options for different synth types
+        const parameterOptions = {
+            fm: {
+                modulationIndex: { name: 'Modulation Index', min: 0, max: 100 },
+                harmonicity: { name: 'Harmonicity', min: 0, max: 10 },
+                oscillatorDetune: { name: 'Oscillator Detune', min: -100, max: 100 },
+                modulationDetune: { name: 'Modulation Detune', min: -100, max: 100 }
+            },
+            additive: {
+                harmonicity: { name: 'Harmonicity', min: 0.5, max: 3.5 },
+                vibratoAmount: { name: 'Vibrato Amount', min: 0, max: 1 },
+                vibratoRate: { name: 'Vibrato Rate', min: 0, max: 10 },
+                detune: { name: 'Detune', min: -100, max: 100 }
+            }
+        };
+
+        // Parameter accessors for dynamic property access
+        const parameterAccessors = {
+            fm: {
+                modulationIndex: {
+                    get: () => fmSynth.modulationIndex.value,
+                    set: (value) => fmSynth.modulationIndex.value = value
+                },
+                harmonicity: {
+                    get: () => fmSynth.harmonicity.value,
+                    set: (value) => fmSynth.harmonicity.value = value
+                },
+                oscillatorDetune: {
+                    get: () => fmSynth.oscillator.detune.value,
+                    set: (value) => fmSynth.oscillator.detune.value = value
+                },
+                modulationDetune: {
+                    get: () => fmSynth.modulation.detune.value,
+                    set: (value) => fmSynth.modulation.detune.value = value
+                }
+            },
+            additive: {
+                harmonicity: {
+                    get: () => additiveSynth.get().harmonicity || 1,
+                    set: (value) => additiveSynth.set({ harmonicity: value })
+                },
+                vibratoAmount: {
+                    get: () => additiveSynth.get().vibratoAmount || 0,
+                    set: (value) => additiveSynth.set({ vibratoAmount: value })
+                },
+                vibratoRate: {
+                    get: () => additiveSynth.get().vibratoRate || 5,
+                    set: (value) => additiveSynth.set({ vibratoRate: value })
+                },
+                detune: {
+                    get: () => additiveSynth.get().detune || 0,
+                    set: (value) => additiveSynth.set({ detune: value })
+                }
+            }
+        };
+
+        // Current modulation parameters
+        let currentXParam = 'modulationIndex';
+        let currentYParam = 'harmonicity';
+
+        // Function to synchronize cursor position and parameter values
+        function syncCursorAndParameters(updateCursor = false) {
+            const cursor = document.querySelector('.xy-cursor');
+            const xyPad = document.querySelector('.xy-pad');
+            const rect = xyPad.getBoundingClientRect();
+
+            if (updateCursor) {
+                // Update cursor position based on current parameter values
+                const synthType = currentSynth === fmSynth ? 'fm' : 'additive';
+                const xParam = parameterOptions[synthType][currentXParam];
+                const yParam = parameterOptions[synthType][currentYParam];
+
+                const xValue = getCurrentParameterValue(currentXParam);
+                const yValue = getCurrentParameterValue(currentYParam);
+
+                // Normalize to 0-1 range
+                const xNormalized = (xValue - xParam.min) / (xParam.max - xParam.min);
+                const yNormalized = (yValue - yParam.min) / (yParam.max - yParam.min);
+
+                cursor.style.left = `${xNormalized * rect.width}px`;
+                cursor.style.top = `${yNormalized * rect.height}px`;
+            } else {
+                // Update parameters based on current cursor position
+                const cursorLeft = parseFloat(cursor.style.left) || 0;
+                const cursorTop = parseFloat(cursor.style.top) || 0;
+
+                const x = Math.max(0, Math.min(1, cursorLeft / rect.width));
+                const y = Math.max(0, Math.min(1, cursorTop / rect.height));
+
+                // Update synth parameters based on selected modulation parameters
+                const synthType = currentSynth === fmSynth ? 'fm' : 'additive';
+                const xParam = parameterOptions[synthType][currentXParam];
+                const yParam = parameterOptions[synthType][currentYParam];
+
+                const xValue = xParam.min + x * (xParam.max - xParam.min);
+                const yValue = yParam.min + y * (yParam.max - yParam.min);
+
+                setParameterValue(currentXParam, xValue);
+                setParameterValue(currentYParam, yValue);
+
+                // Update slider values
+                document.getElementById('xModulation').value = xValue;
+                document.getElementById('xModulationValue').textContent = xValue.toFixed(1);
+                document.getElementById('yModulation').value = yValue;
+                document.getElementById('yModulationValue').textContent = yValue.toFixed(1);
+            }
+        }
+
+        // Populate parameter dropdowns based on current synth
+        function populateParameterDropdowns(updateSliders = true) {
+            const synthType = currentSynth === fmSynth ? 'fm' : 'additive';
+            const options = parameterOptions[synthType];
+
+            // Populate X parameter dropdown
+            const xSelect = document.getElementById('xParamSelect');
+            xSelect.innerHTML = '';
+            Object.keys(options).forEach(key => {
+                const option = document.createElement('option');
+                option.value = key;
+                option.textContent = options[key].name;
+                if (key === currentXParam) option.selected = true;
+                xSelect.appendChild(option);
+            });
+
+            // Populate Y parameter dropdown
+            const ySelect = document.getElementById('yParamSelect');
+            ySelect.innerHTML = '';
+            Object.keys(options).forEach(key => {
+                const option = document.createElement('option');
+                option.value = key;
+                option.textContent = options[key].name;
+                if (key === currentYParam) option.selected = true;
+                ySelect.appendChild(option);
+            });
+
+            // Update slider ranges and values (skip during synth switching to avoid redundancy)
+            if (updateSliders) {
+                updateModulationSliders();
+            }
+        }
+
+        // Update modulation sliders based on selected parameters
+        function updateModulationSliders() {
+            const synthType = currentSynth === fmSynth ? 'fm' : 'additive';
+            const xParam = parameterOptions[synthType][currentXParam];
+            const yParam = parameterOptions[synthType][currentYParam];
+
+            // Update X slider
+            const xSlider = document.getElementById('xModulation');
+            xSlider.min = xParam.min;
+            xSlider.max = xParam.max;
+            xSlider.value = getCurrentParameterValue(currentXParam);
+            document.getElementById('xModulationValue').textContent = xSlider.value;
+
+            // Update Y slider
+            const ySlider = document.getElementById('yModulation');
+            ySlider.min = yParam.min;
+            ySlider.max = yParam.max;
+            ySlider.value = getCurrentParameterValue(currentYParam);
+            document.getElementById('yModulationValue').textContent = ySlider.value;
+        }
+
+        // Get current value of a parameter
+        function getCurrentParameterValue(param) {
+            const synthType = currentSynth === fmSynth ? 'fm' : 'additive';
+            const accessor = parameterAccessors[synthType][param];
+            return accessor ? accessor.get() : 0;
+        }
+
+        // Set parameter value
+        function setParameterValue(param, value) {
+            const synthType = currentSynth === fmSynth ? 'fm' : 'additive';
+            const accessor = parameterAccessors[synthType][param];
+            if (accessor) accessor.set(value);
+        }
+
+
+
+        // ===========================================
+        // UI CONTROLS
+        // ===========================================
+
+        // XY Pad
+        const xyPad = document.querySelector('.xy-pad');
+        const cursor = document.querySelector('.xy-cursor');
+        let isDrawing = false;
+
+        function updateXY(e) {
+            const rect = xyPad.getBoundingClientRect();
+            const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+
+            cursor.style.left = `${x * rect.width}px`;
+            cursor.style.top = `${y * rect.height}px`;
+
+            // Update synth parameters based on selected modulation parameters
+            const synthType = currentSynth === fmSynth ? 'fm' : 'additive';
+            const xParam = parameterOptions[synthType][currentXParam];
+            const yParam = parameterOptions[synthType][currentYParam];
+
+            const xValue = xParam.min + x * (xParam.max - xParam.min);
+            const yValue = yParam.min + y * (yParam.max - yParam.min);
+
+            setParameterValue(currentXParam, xValue);
+            setParameterValue(currentYParam, yValue);
+
+            // Update slider values
+            document.getElementById('xModulation').value = xValue;
+            document.getElementById('xModulationValue').textContent = xValue.toFixed(1);
+            document.getElementById('yModulation').value = yValue;
+            document.getElementById('yModulationValue').textContent = yValue.toFixed(1);
+        }
+
+        xyPad.addEventListener('mousedown', (e) => {
+            isDrawing = true;
+            updateXY(e);
+        });
+
+        window.addEventListener('mousemove', (e) => {
+            if (isDrawing) updateXY(e);
+        });
+
+        window.addEventListener('mouseup', () => {
+            isDrawing = false;
+        });
+
+        // Glide Time Control
+        document.getElementById('glideTime').addEventListener('input', (e) => {
+            glideTime = parseFloat(e.target.value);
+            document.getElementById('glideTimeValue').textContent = glideTime.toFixed(2) + 's';
+        });
+
+        // Function to switch between synth types
+        function switchSynth(soundType) {
+            // Disconnect current synth
+            currentSynth.disconnect();
+
+            // Set new synth
+            currentSynth = getSynthByType(soundType);
+            currentSynth.chain(filter, ...effectsChain, analyzer, Tone.Destination);
+
+            // Maintain compressor bypass state
+            if (compressorBypassed) {
+                compressor.disconnect(analyzer);
+                reverb.connect(analyzer);
+            }
+
+            // Update waveform for new synth
+            updateWaveform(currentWaveform);
+
+            // Handle modulation tab visibility and envelope mode
+            const modulationTab = document.querySelector('.adsr-tab[data-envelope="modulation"]');
+            if (soundType === 'fm') {
+                modulationTab.classList.remove('hidden');
+            } else if (soundType === 'additive') {
+                modulationTab.classList.add('hidden');
+                // If currently in modulation mode, switch to amp mode
+                if (currentEnvelopeMode === 'modulation') {
+                    currentEnvelopeMode = 'amp';
+                    document.querySelectorAll('.adsr-tab').forEach(t => t.classList.remove('active'));
+                    document.querySelector('.adsr-tab[data-envelope="amp"]').classList.add('active');
+                }
+            }
+
+            // Update ADSR sliders if in amp mode
+            if (currentEnvelopeMode === 'amp') {
+                updateADSRSliders();
+            }
+
+            // Set correct default parameters for the new synth
+            if (soundType === 'fm') {
+                currentXParam = 'modulationIndex';
+                currentYParam = 'harmonicity';
+            } else if (soundType === 'additive') {
+                currentXParam = 'vibratoAmount';
+                currentYParam = 'vibratoRate';
+            }
+
+            // Update parameter dropdowns for new synth (skip redundant slider updates)
+            populateParameterDropdowns(false);
+
+            // Update parameters based on current cursor position
+            syncCursorAndParameters();
+
+            // Handle polyphony for additive synth
+            if (soundType === 'additive') {
+                currentSynth.maxPolyphony = 16;
+            }
+        }
+
+        // Sound Generation Selection
+        document.querySelectorAll('.sound-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.sound-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+
+                const soundType = btn.dataset.sound;
+                switchSynth(soundType);
+            });
+        });
+
+        // Waveform Selection
+        document.querySelectorAll('.wave-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.wave-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                
+                currentWaveform = btn.dataset.wave;
+                updateWaveform(currentWaveform);
+            });
+        });
+
+        function updateWaveform(waveform) {
+            if (currentSynth === fmSynth) {
+                // FM synth has modulation oscillator
+                fmSynth.oscillator.type = waveform;
+                fmSynth.modulation.type = waveform;
+            } else if (currentSynth === additiveSynth) {
+                // DuoSynth has two voices, update both oscillators
+                additiveSynth.set({
+                    voice0: { oscillator: { type: waveform } },
+                    voice1: { oscillator: { type: waveform } }
+                });
+            }
+        }
+
+        function getSynthByType(type) {
+            switch(type) {
+                case 'fm': return fmSynth;
+                case 'additive': return additiveSynth;
+                default: return fmSynth;
+            }
+        }
+
+        // Effect Mix Controls
+        document.getElementById('reverbMix').addEventListener('input', (e) => {
+            const value = parseInt(e.target.value) / 100;
+            document.getElementById('reverbMixValue').textContent = e.target.value + '%';
+            reverb.wet.value = value;
+        });
+
+        document.getElementById('compressorRatio').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            document.getElementById('compressorRatioValue').textContent = value.toFixed(1) + ':1';
+            compressor.ratio = value;
+        });
+
+        document.getElementById('compressorThreshold').addEventListener('input', (e) => {
+            const value = parseInt(e.target.value);
+            document.getElementById('compressorThresholdValue').textContent = value + 'dB';
+            compressor.threshold = value;
+        });
+
+        document.getElementById('compressorAttack').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            document.getElementById('compressorAttackValue').textContent = value.toFixed(2) + 's';
+            compressor.attack = value;
+        });
+
+        document.getElementById('compressorRelease').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            document.getElementById('compressorReleaseValue').textContent = value.toFixed(2) + 's';
+            compressor.release = value;
+        });
+
+        // Function to switch distortion preset
+        function switchDistortionPreset(presetIndex) {
+            const preset = distortionPresets[presetIndex];
+            currentDistortionPreset = presetIndex;
+
+            // Update UI
+            document.getElementById('distortionHeader').textContent = 'DISTORTION: ' + preset.name;
+
+            // Configure first Chebyshev
+            if (preset.chebyshev1) {
+                chebyshev1.order = preset.chebyshev1.order;
+                chebyshev1.wet.value = preset.chebyshev1.wet;
+            } else {
+                chebyshev1.wet.value = 0;
+            }
+
+            // Configure second Chebyshev
+            if (preset.chebyshev2) {
+                chebyshev2.order = preset.chebyshev2.order;
+                chebyshev2.wet.value = preset.chebyshev2.wet;
+            } else {
+                chebyshev2.wet.value = 0;
+            }
+
+            // Configure gain
+            distortionGain.gain.value = preset.gain;
+
+            // Configure feedback
+            if (preset.feedback) {
+                distortionFeedback.wet.value = 0.1; // Subtle feedback
+            } else {
+                distortionFeedback.wet.value = 0;
+            }
+        }
+
+        document.getElementById('distortionPreset').addEventListener('input', (e) => {
+            const presetIndex = parseInt(e.target.value) - 1; // Convert 1-8 to 0-7
+            switchDistortionPreset(presetIndex);
+        });
+
+        document.getElementById('distortionMix').addEventListener('input', (e) => {
+            const mixValue = parseInt(e.target.value) / 100;
+            document.getElementById('distortionMixValue').textContent = e.target.value + '%';
+
+            // Apply mix to the distortion chain
+            const preset = distortionPresets[currentDistortionPreset];
+
+            // Scale the wet values based on mix
+            if (preset.chebyshev1) {
+                chebyshev1.wet.value = preset.chebyshev1.wet * mixValue;
+            }
+            if (preset.chebyshev2) {
+                chebyshev2.wet.value = preset.chebyshev2.wet * mixValue;
+            }
+
+            // Activate feedback at high mix levels (70%+)
+            if (preset.feedback && mixValue > 0.7) {
+                distortionFeedback.wet.value = 0.1 * (mixValue - 0.7) / 0.3; // Fade in feedback
+            } else if (preset.feedback) {
+                distortionFeedback.wet.value = 0;
+            }
+        });
+
+        document.getElementById('chorusMix').addEventListener('input', (e) => {
+            const value = parseInt(e.target.value) / 100;
+            document.getElementById('chorusMixValue').textContent = e.target.value + '%';
+            chorus.wet.value = value;
+        });
+
+        document.getElementById('reverbDecay').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            document.getElementById('reverbDecayValue').textContent = value.toFixed(1) + 's';
+            reverb.decay = value;
+        });
+
+        document.getElementById('reverbPreDelay').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            document.getElementById('reverbPreDelayValue').textContent = value.toFixed(2) + 's';
+            reverb.preDelay = value;
+        });
+
+        document.getElementById('chorusDepth').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            document.getElementById('chorusDepthValue').textContent = value.toFixed(2);
+            chorus.depth.value = value;
+        });
+
+        document.getElementById('chorusSpread').addEventListener('input', (e) => {
+            const value = parseInt(e.target.value);
+            document.getElementById('chorusSpreadValue').textContent = value + '°';
+            chorus.spread.value = value;
+        });
+
+        document.getElementById('chorusFrequency').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            document.getElementById('chorusFrequencyValue').textContent = value.toFixed(1) + 'Hz';
+            chorus.frequency.value = value;
+        });
+
+        // Effect slider IDs for disabling when toggled off
+        const effectSliders = {
+            distortion: ['distortionPreset', 'distortionMix'],
+            chorus: ['chorusMix', 'chorusDepth', 'chorusSpread', 'chorusFrequency'],
+            reverb: ['reverbMix', 'reverbDecay', 'reverbPreDelay']
+        };
+
+        // Effect Toggles
+        document.querySelectorAll('.toggle').forEach(btn => {
+            if (btn.dataset.effect) {
+                btn.addEventListener('click', () => {
+                    btn.classList.toggle('active');
+                    const effect = btn.dataset.effect;
+                    const isActive = btn.classList.contains('active');
+                    btn.textContent = isActive ? 'ON' : 'OFF';
+
+                    switch(effect) {
+                        case 'reverb':
+                            reverb.wet.value = isActive ? parseInt(document.getElementById('reverbMix').value) / 100 : 0;
+                            break;
+                case 'compressor':
+                    if (isActive) {
+                        if (compressorBypassed) {
+                            // Re-enable compressor: connect through compressor
+                            reverb.disconnect(analyzer);
+                            compressor.connect(analyzer);
+                            compressorBypassed = false;
+                        }
+                    } else {
+                        if (!compressorBypassed) {
+                            // Bypass: disconnect compressor, connect reverb directly
+                            compressor.disconnect(analyzer);
+                            reverb.connect(analyzer);
+                            compressorBypassed = true;
+                        }
+                    }
+                    break;
+                        case 'distortion':
+                            // For distortion, we need to handle the mix differently since it's now a complex chain
+                            const mixValue = isActive ? parseInt(document.getElementById('distortionMix').value) / 100 : 0;
+                            const preset = distortionPresets[currentDistortionPreset];
+
+                            if (preset.chebyshev1) {
+                                chebyshev1.wet.value = preset.chebyshev1.wet * mixValue;
+                            }
+                            if (preset.chebyshev2) {
+                                chebyshev2.wet.value = preset.chebyshev2.wet * mixValue;
+                            }
+
+                            // Handle feedback for presets that support it
+                            if (preset.feedback && mixValue > 0.7) {
+                                distortionFeedback.wet.value = 0.1 * (mixValue - 0.7) / 0.3;
+                            } else if (preset.feedback) {
+                                distortionFeedback.wet.value = 0;
+                            }
+                            break;
+                        case 'chorus':
+                            chorus.wet.value = isActive ? parseInt(document.getElementById('chorusMix').value) / 100 : 0;
+                            break;
+                    }
+
+                    // Disable/enable sliders for effects with MIX sliders
+                    const sliders = effectSliders[effect];
+                    if (sliders) {
+                        sliders.forEach(id => {
+                            const slider = document.getElementById(id);
+                            slider.disabled = !isActive;
+                        });
+                    }
+
+                    // Add/remove visual indicator for off state
+                    const effectGroup = btn.closest('.effect-group');
+                    if (isActive) {
+                        effectGroup.classList.remove('effect-off');
+                    } else {
+                        effectGroup.classList.add('effect-off');
+                    }
+                });
+            }
+        });
+
+
+
+        // ===========================================
+        // RECORDING FUNCTIONALITY
+        // ===========================================
+
+        const recordBtn = document.getElementById('recordBtn');
+        const waveformCanvas = document.getElementById('waveformCanvas');
+        const waveformCtx = waveformCanvas.getContext('2d');
+        const waveformContainer = document.querySelector('.waveform-container');
+        const selectionDiv = document.getElementById('selection');
+        const sliceBtn = document.getElementById('sliceBtn');
+        const playhead = document.getElementById('playhead');
+        const playheadHandle = document.getElementById('playheadHandle');
+        const playSampleBtn = document.getElementById('playSample');
+
+        // Playback state
+        let isPlaying = false;
+        let audioElement = null;
+        let isDraggingPlayhead = false;
+
+        // Selection state
+        let isSelecting = false;
+        let selectionStart = 0;
+        let selectionEnd = 0;
+
+        recordBtn.addEventListener('click', async () => {
+            try {
+                if (!isRecording) {
+                    // Start recording synth output
+                    await toneRecorder.start();
+                    isRecording = true;
+                    recordBtn.classList.add('recording');
+                } else {
+                    // Stop recording and process the result
+                    const recording = await toneRecorder.stop();
+                    isRecording = false;
+                    recordBtn.classList.remove('recording');
+
+                    // Clean up previous URL to prevent memory leaks
+                    if (sampleBuffer) {
+                        URL.revokeObjectURL(sampleBuffer);
+                    }
+
+                    // Convert recording to blob and create URL
+                    const blob = new Blob([recording], { type: 'audio/wav' });
+                    const url = URL.createObjectURL(blob);
+                    sampleBuffer = url;
+
+                    // Generate waveform data from the recording
+                    generateWaveform(blob);
+                }
+            } catch (error) {
+                console.error('Recording error:', error);
+                isRecording = false;
+                recordBtn.classList.remove('recording');
+            }
+        });
+
+        function generateWaveform(blob) {
+            try {
+                const audioContext = new AudioContext();
+                blob.arrayBuffer().then(arrayBuffer => {
+                    audioContext.decodeAudioData(arrayBuffer).then(audioBuffer => {
+                        const channelData = audioBuffer.getChannelData(0);
+                        waveformData = channelData;
+
+                        // Draw waveform
+                        drawWaveform(channelData);
+                    }).catch(error => {
+                        console.error('Error decoding audio data:', error);
+                    });
+                }).catch(error => {
+                    console.error('Error reading blob array buffer:', error);
+                });
+            } catch (error) {
+                console.error('Error creating audio context:', error);
+            }
+        }
+
+        function drawWaveform(data) {
+            waveformCanvas.width = waveformCanvas.offsetWidth;
+            waveformCanvas.height = waveformCanvas.offsetHeight;
+
+            waveformCtx.clearRect(0, 0, waveformCanvas.width, waveformCanvas.height);
+            waveformCtx.strokeStyle = '#39ff14';
+            waveformCtx.lineWidth = 1;
+            waveformCtx.beginPath();
+
+            const step = Math.ceil(data.length / waveformCanvas.width);
+            for (let i = 0; i < waveformCanvas.width; i++) {
+                const sampleIndex = i * step;
+                const amplitude = data[sampleIndex] || 0;
+                const y = (amplitude + 1) * waveformCanvas.height / 2;
+
+                if (i === 0) {
+                    waveformCtx.moveTo(i, y);
+                } else {
+                    waveformCtx.lineTo(i, y);
+                }
+            }
+            waveformCtx.stroke();
+        }
+
+        // Sample controls
+        playSampleBtn.addEventListener('click', () => {
+            if (!sampleBuffer) return;
+
+            if (isPlaying) {
+                // Pause playback
+                if (audioElement) {
+                    audioElement.pause();
+                    audioElement = null;
+                }
+                isPlaying = false;
+                updatePlayButtonIcon(false);
+            } else {
+                // Start playback
+                audioElement = new Audio(sampleBuffer);
+                audioElement.currentTime = 0; // Reset to start
+
+                // Update playhead position during playback
+                audioElement.addEventListener('timeupdate', () => {
+                    if (audioElement && audioElement.duration) {
+                        const progress = audioElement.currentTime / audioElement.duration;
+                        playhead.style.left = `${progress * 100}%`;
+                        playheadHandle.style.left = `${progress * 100}%`;
+                    }
+                });
+
+                // Handle playback end
+                audioElement.addEventListener('ended', () => {
+                    isPlaying = false;
+                    audioElement = null;
+                    playhead.style.left = '0%';
+                    playheadHandle.style.left = '0%';
+                    updatePlayButtonIcon(false);
+                });
+
+                audioElement.play();
+                isPlaying = true;
+                updatePlayButtonIcon(true);
+            }
+        });
+
+        function updatePlayButtonIcon(playing) {
+            const svg = playSampleBtn.querySelector('svg');
+            if (playing) {
+                // Change to pause icon (two bars)
+                svg.innerHTML = `
+                    <rect x="6" y="4" width="3" height="16"/>
+                    <rect x="13" y="4" width="3" height="16"/>
+                `;
+            } else {
+                // Change to play icon (triangle)
+                svg.innerHTML = '<polygon points="8,5 19,12 8,19"/>';
+            }
+        }
+
+        document.getElementById('exportWav').addEventListener('click', () => {
+            if (sampleBuffer) {
+                const a = document.createElement('a');
+                a.href = sampleBuffer;
+                a.download = 'ms1x_sample.wav';
+                a.click();
+            }
+        });
+
+        // Playhead drag functionality
+        playheadHandle.addEventListener('mousedown', (e) => {
+            e.stopPropagation(); // Prevent triggering selection
+            isDraggingPlayhead = true;
+        });
+
+        window.addEventListener('mousemove', (e) => {
+            if (isDraggingPlayhead && sampleBuffer) {
+                const rect = waveformContainer.getBoundingClientRect();
+                const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+                const positionPercent = x * 100;
+
+                playhead.style.left = `${positionPercent}%`;
+                playheadHandle.style.left = `${positionPercent}%`;
+
+                // Seek audio if playing
+                if (audioElement && audioElement.duration) {
+                    audioElement.currentTime = x * audioElement.duration;
+                }
+            } else if (!isSelecting || !waveformData.length) return;
+
+            const rect = waveformContainer.getBoundingClientRect();
+            selectionEnd = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+
+            updateSelection();
+        });
+
+        window.addEventListener('mouseup', () => {
+            isDraggingPlayhead = false;
+            isSelecting = false;
+        });
+
+        // Waveform selection functionality
+        waveformContainer.addEventListener('mousedown', (e) => {
+            if (!waveformData.length) return;
+
+            isSelecting = true;
+            const rect = waveformContainer.getBoundingClientRect();
+            selectionStart = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            selectionEnd = selectionStart;
+
+            updateSelection();
+        });
+
+        function updateSelection() {
+            if (!waveformData.length) return;
+
+            const startPercent = Math.min(selectionStart, selectionEnd) * 100;
+            const endPercent = Math.max(selectionStart, selectionEnd) * 100;
+            const widthPercent = endPercent - startPercent;
+
+            selectionDiv.style.display = widthPercent > 0 ? 'block' : 'none';
+            selectionDiv.style.left = `${startPercent}%`;
+            selectionDiv.style.width = `${widthPercent}%`;
+        }
+
+        // Slice functionality
+        sliceBtn.addEventListener('click', () => {
+            if (!waveformData.length || selectionDiv.style.display === 'none') return;
+
+            const startPercent = parseFloat(selectionDiv.style.left) / 100;
+            const widthPercent = parseFloat(selectionDiv.style.width) / 100;
+            const endPercent = startPercent + widthPercent;
+
+            const startIndex = Math.floor(startPercent * waveformData.length);
+            const endIndex = Math.floor(endPercent * waveformData.length);
+
+            // Extract selected portion of audio data
+            const slicedData = waveformData.slice(startIndex, endIndex);
+
+            // Update waveform data and redraw
+            waveformData = slicedData;
+            drawWaveform(slicedData);
+
+            // Create new audio buffer from sliced data
+            const audioContext = new AudioContext();
+            const audioBuffer = audioContext.createBuffer(1, slicedData.length, audioContext.sampleRate);
+
+            audioBuffer.copyFromChannel(slicedData, 0);
+
+            // Convert back to WAV blob
+            audioBufferToWav(audioBuffer).then(blob => {
+                // Clean up previous URL to prevent memory leaks
+                if (sampleBuffer) {
+                    URL.revokeObjectURL(sampleBuffer);
+                }
+
+                // Replace the original audio with the trimmed version
+                const url = URL.createObjectURL(blob);
+                sampleBuffer = url;
+
+                // Stop any current playback and reset playhead
+                if (isPlaying && audioElement) {
+                    audioElement.pause();
+                    audioElement = null;
+                    isPlaying = false;
+                    updatePlayButtonIcon(false);
+                }
+
+                // Reset playhead position
+                playhead.style.left = '0%';
+                playheadHandle.style.left = '0%';
+
+                // Hide selection after slicing
+                selectionDiv.style.display = 'none';
+            });
+        });
+
+        function audioBufferToWav(buffer) {
+            return new Promise((resolve, reject) => {
+                try {
+                    const length = buffer.length;
+                    const sampleRate = buffer.sampleRate;
+                    const numChannels = buffer.numberOfChannels;
+
+                    const arrayBuffer = new ArrayBuffer(44 + length * numChannels * 2);
+                    const view = new DataView(arrayBuffer);
+
+                    // WAV header
+                    const writeString = (offset, string) => {
+                        for (let i = 0; i < string.length; i++) {
+                            view.setUint8(offset + i, string.charCodeAt(i));
+                        }
+                    };
+
+                    writeString(0, 'RIFF');
+                    view.setUint32(4, 36 + length * numChannels * 2, true);
+                    writeString(8, 'WAVE');
+                    writeString(12, 'fmt ');
+                    view.setUint32(16, 16, true);
+                    view.setUint16(20, 1, true);
+                    view.setUint16(22, numChannels, true);
+                    view.setUint32(24, sampleRate, true);
+                    view.setUint32(28, sampleRate * numChannels * 2, true);
+                    view.setUint16(32, numChannels * 2, true);
+                    view.setUint16(34, 16, true);
+                    writeString(36, 'data');
+                    view.setUint32(40, length * numChannels * 2, true);
+
+                    // Audio data
+                    let offset = 44;
+                    for (let i = 0; i < length; i++) {
+                        for (let channel = 0; channel < numChannels; channel++) {
+                            const sample = Math.max(-1, Math.min(1, buffer.getChannelData(channel)[i]));
+                            view.setInt16(offset, sample * 0x7FFF, true);
+                            offset += 2;
+                        }
+                    }
+
+                    resolve(new Blob([arrayBuffer], { type: 'audio/wav' }));
+                } catch (error) {
+                    reject(error);
+                }
+            });
+        }
+
+        // ===========================================
+        // MODULATION EVENT LISTENERS
+        // ===========================================
+
+        // Parameter dropdown change events
+        document.getElementById('xParamSelect').addEventListener('change', (e) => {
+            currentXParam = e.target.value;
+            updateModulationSliders();
+            syncCursorAndParameters(true);
+        });
+
+        document.getElementById('yParamSelect').addEventListener('change', (e) => {
+            currentYParam = e.target.value;
+            updateModulationSliders();
+            syncCursorAndParameters(true);
+        });
+
+        // Modulation slider events
+        document.getElementById('xModulation').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            setParameterValue(currentXParam, value);
+            document.getElementById('xModulationValue').textContent = value.toFixed(1);
+            syncCursorAndParameters(true);
+        });
+
+        document.getElementById('yModulation').addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value);
+            setParameterValue(currentYParam, value);
+            document.getElementById('yModulationValue').textContent = value.toFixed(1);
+            syncCursorAndParameters(true);
+        });
+
+        // Initialize modulation controls
+        populateParameterDropdowns();
+
+        // ===========================================
+        // CLEANUP AND MEMORY MANAGEMENT
+        // ===========================================
+
+        // Clean up resources when page unloads
+        window.addEventListener('beforeunload', () => {
+            if (sampleBuffer) {
+                URL.revokeObjectURL(sampleBuffer);
+            }
+            // Stop any ongoing recording
+            if (isRecording) {
+                try {
+                    toneRecorder.stop();
+                } catch (e) {
+                    // Ignore errors during cleanup
+                }
+            }
+        });
+
+        // Keyboard Events
+        window.addEventListener('keydown', (e) => {
+            const key = e.key.toLowerCase();
+            if (keyMap[key]) {
+                const note = keyMap[key];
+                const freq = Tone.Frequency(note).toFrequency();
+                if (currentSynth === fmSynth) {
+                    fmKeyboardHandler(key, freq);
+                } else {
+                    additiveKeyboardHandler(key, freq);
+                }
+            }
+        });
+
+        window.addEventListener('keyup', (e) => {
+            const key = e.key.toLowerCase();
+            if (keyMap[key]) {
+                const note = keyMap[key];
+                const freq = Tone.Frequency(note).toFrequency();
+                if (currentSynth === fmSynth) {
+                    fmKeyboardKeyup(key, freq);
+                } else {
+                    additiveKeyboardKeyup(key, freq);
+                }
+            }
+        });
+
+        // Initialize effect sliders as disabled since effects start off
+        document.querySelectorAll('.toggle').forEach(btn => {
+            if (btn.dataset.effect && !btn.classList.contains('active')) {
+                const effect = btn.dataset.effect;
+                const sliders = effectSliders[effect];
+                if (sliders) {
+                    sliders.forEach(id => {
+                        const slider = document.getElementById(id);
+                        slider.disabled = true;
+                    });
+                }
+                // Add visual indicator for off state
+                const effectGroup = btn.closest('.effect-group');
+                effectGroup.classList.add('effect-off');
+            }
+        });
+
+        // Start audio context on first interaction
+        document.body.addEventListener('click', () => {
+            Tone.start();
+        }, { once: true });
+    </script>
+</body>
+</html>
