:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg-color: #1a1a1a;--container-bg: #2a2a2a;--panel-bg: #222;--text-color: #e0e0e0;--text-muted: #aaa;--accent-color: #ff9800;--accent-hover: #ffb74d;--border-color: #444;--input-bg: #333;--input-border: #555;--shadow-color: rgba(0, 0, 0, .5);--font-family: "Courier New", Courier, monospace}[data-theme=light]{--bg-color: #f0f2f5;--container-bg: #ffffff;--panel-bg: #f8f9fa;--text-color: #2c3e50;--text-muted: #666;--accent-color: #007bff;--accent-hover: #0056b3;--border-color: #dee2e6;--input-bg: #ffffff;--input-border: #ced4da;--shadow-color: rgba(0, 0, 0, .1)}[data-theme=contrast]{--bg-color: #000000;--container-bg: #000000;--panel-bg: #000000;--text-color: #ffffff;--text-muted: #ffffff;--accent-color: #ffff00;--accent-hover: #ffcc00;--border-color: #ffffff;--input-bg: #000000;--input-border: #ffffff;--shadow-color: none}[data-theme=cyber]{--bg-color: #050505;--container-bg: #0a0a12;--panel-bg: #11111a;--text-color: #00ff9f;--text-muted: #00b8ff;--accent-color: #ff0055;--accent-hover: #ff0080;--border-color: #00ff9f;--input-bg: #0f0f1a;--input-border: #ff0055;--shadow-color: rgba(0, 255, 159, .2)}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-family);display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;transition:background-color .3s,color .3s}.app-container{background-color:var(--container-bg);padding:2rem;border-radius:10px;box-shadow:0 0 20px var(--shadow-color);border:1px solid var(--border-color);width:600px;transition:all .3s}h1{text-align:center;color:var(--accent-color);text-shadow:0 0 10px var(--shadow-color);margin-bottom:2rem}.control-panel{display:flex;flex-direction:column;gap:2rem;background:var(--panel-bg);padding:1.5rem;border-radius:8px;border:1px solid var(--border-color)}.main-controls{display:flex;justify-content:center}.play-button{width:100%;padding:1rem;font-size:1.2rem;letter-spacing:2px}.play-button.playing{background-color:#f44336;color:#fff}.play-button.playing:hover{background-color:#d32f2f}.sliders{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.knob-group{display:flex;flex-direction:column;gap:.5rem}.knob-group label{font-weight:700;color:var(--text-muted)}input[type=range]{width:100%;accent-color:var(--accent-color)}.prompt-group{display:flex;flex-direction:column;gap:1rem}.mode-toggle{display:flex;gap:.5rem;margin-bottom:.5rem}.toggle-btn{flex:1;background-color:var(--input-bg);color:var(--text-muted);border:1px solid var(--border-color)}.toggle-btn.active{background-color:var(--accent-color);color:var(--bg-color);border-color:var(--accent-color);box-shadow:0 0 10px var(--shadow-color)}.pad-controls{background:var(--panel-bg);padding:1rem;border-radius:6px;border:1px solid var(--border-color);display:flex;flex-direction:column;gap:1rem}.pad-slider-group{display:flex;flex-direction:column;gap:.5rem}.pad-slider-group label{font-size:.9rem;color:var(--accent-color)}.pad-slider-group .labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted)}.update-pad-btn{margin-top:.5rem;background-color:#4caf50;color:#fff}.update-pad-btn:hover{background-color:#66bb6a}input[type=text]{flex:1;padding:.5rem;background-color:var(--input-bg);border:1px solid var(--input-border);color:var(--text-color);border-radius:4px}button{padding:.5rem 1rem;background-color:var(--accent-color);color:var(--bg-color);border:none;border-radius:4px;cursor:pointer;font-weight:700;text-transform:uppercase;transition:background-color .2s}button:hover{background-color:var(--accent-hover)}.status{margin-top:2rem;text-align:center;font-size:.8rem;color:var(--text-muted);display:flex;align-items:center;justify-content:center}.status-indicator{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.status-connected{background-color:#4caf50;box-shadow:0 0 5px #4caf50}.status-connecting{background-color:var(--accent-color)}.status-disconnected{background-color:#f44336}.selectors{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.selector-group{display:flex;flex-direction:column;gap:.5rem}.selector-group label{font-weight:700;color:var(--text-muted)}select{padding:.5rem;background-color:var(--input-bg);border:1px solid var(--input-border);color:var(--text-color);border-radius:4px;cursor:pointer}select:focus{outline:none;border-color:var(--accent-color)}.preset-select{width:160px;flex-shrink:0}.admin-toggle{margin-left:1rem;font-size:.7rem;padding:.2rem .5rem;background-color:var(--border-color);color:var(--text-muted)}.admin-panel{margin-top:2rem;background:var(--panel-bg);padding:1rem;border-radius:8px;border:1px solid var(--border-color);font-size:.8rem}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.admin-col pre{background:var(--input-bg);padding:.5rem;border-radius:4px;overflow-x:auto;color:#0f0;border:1px solid var(--border-color)}.tooltip-container{position:relative;display:inline-block;width:100%}.tooltip-bubble{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--panel-bg);color:var(--text-color);padding:.5rem;border-radius:4px;font-size:.8rem;width:200px;text-align:center;z-index:100;box-shadow:0 4px 6px var(--shadow-color);border:1px solid var(--accent-color);margin-bottom:5px;pointer-events:none}.tooltip-bubble:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--accent-color) transparent transparent transparent}.debug-table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.85rem}.debug-table th,.debug-table td{padding:.5rem;border:1px solid var(--border-color);text-align:left}.debug-table th{background-color:var(--input-bg);color:var(--accent-color)}.debug-table tr:nth-child(2n){background-color:#ffffff0d}.debug-diff{background-color:#f4433633!important;color:#ff8a80}.debug-match{color:#69f0ae}