:root{--panel: #1c1d21;--raised: #26282e;--raised-2: #2b2e35;--line: #393d46;--label: #969aa4;--text: #edeef2;--amber: #e0a23c;--green: #57c98a;--red: #d8473a;--muted: #6b6f78;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;--radius: 7px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(120% 80% at 50% -10%,#25272d,#141519 60%,#0e0f12);color:var(--text);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:clamp(12px,4vw,48px) 12px}.face{width:100%;max-width:600px;background:linear-gradient(180deg,#232529 0%,var(--panel) 12%,var(--panel) 100%);border:1px solid #0c0d0f;border-top-color:#3a3d44;border-radius:var(--radius);box-shadow:0 1px #3d4047 inset,0 18px 40px -20px #000,0 2px 8px -4px #000;padding:16px}.face-top{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}.brand{display:flex;flex-direction:column;line-height:1.1;margin-right:auto}.brand-logo{margin:0;font-family:var(--mono);color:var(--amber);font-size:8.5px;line-height:1.08;white-space:pre;letter-spacing:0}.brand-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:3px}.bpm{display:flex;align-items:center;gap:6px}.bpm input{width:58px;font-family:var(--mono);font-size:14px;color:var(--amber);background:#15161a;border:1px solid var(--line);border-radius:4px;padding:3px 6px;text-align:center}.help-btn{width:28px;height:28px;border-radius:50%;background:var(--raised);color:var(--label);border:1px solid var(--line);font-weight:700;cursor:pointer}.help-btn:hover{color:var(--text);border-color:var(--amber)}.bay{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line)}.bay-select{min-width:180px}.bay-msg{font-size:12.5px;color:var(--label)}.bay-err{color:var(--red)}.link{background:none;border:none;color:var(--amber);cursor:pointer;text-decoration:underline;padding:0;font:inherit}.diag{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted);padding:7px 4px;border-bottom:1px solid var(--line)}.diag b{color:var(--label);font-weight:600}.kbd-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 4px;border-bottom:1px solid var(--line)}.kbd-info{font-family:var(--mono);font-size:11px;color:var(--amber)}.kbd-hint{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.04em}.warn-bar{margin:10px 0;padding:9px 12px;font-size:12.5px;color:#f2d09a;background:#2a2316;border:1px solid #5c4a25;border-left:3px solid var(--amber);border-radius:5px}.fx-note{font-size:11.5px;color:var(--muted);line-height:1.5;border-top:1px solid #24262c;padding-top:8px;margin-top:4px}.start-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0;padding:10px 12px;background:#20232a;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:5px}.start-bar.has-error{border-left-color:var(--red)}.start-btn{background:var(--amber);color:#1a1407;border:none;border-radius:5px;font-weight:700;padding:9px 16px;cursor:pointer;letter-spacing:.02em}.start-btn:disabled{opacity:.6;cursor:default}.start-msg{font-size:12.5px;color:var(--label)}.rows{margin-top:4px}.row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}.row-name{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;width:62px;color:var(--text)}.row-spacer,.fx-row-spacer{margin-left:auto}.row-ch{display:flex;align-items:center;gap:5px}.row-ch input{width:42px;font-family:var(--mono);font-size:13px;color:var(--amber);background:#15161a;border:1px solid var(--line);border-radius:4px;padding:3px 4px;text-align:center}.row-master{border-bottom:none;padding-top:14px}.ctl-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);white-space:nowrap}.ctl-readout{font-family:var(--mono);font-size:12px;color:var(--amber);min-width:38px;text-align:right}.ctl-slider{display:flex;align-items:center;gap:8px;flex:1;min-width:120px}.ctl-slider input[type=range]{flex:1;accent-color:var(--amber);min-width:60px}.ctl-select{display:flex;align-items:center;gap:6px}select,.ctl-select select{background:#15161a;color:var(--text);border:1px solid var(--line);border-radius:4px;padding:5px 8px;font:inherit;font-size:13px;cursor:pointer;max-width:200px}input[type=number]{background:#15161a;color:var(--text)}.ctl-toggle{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:4px;background:var(--raised);color:var(--muted);border:1px solid var(--line);cursor:pointer}.ctl-toggle.is-on{background:#3a2f17;color:var(--amber);border-color:var(--amber)}.led{width:9px;height:9px;border-radius:50%;flex:none;background:#2a2d33;border:1px solid #000;transition:background .14s ease}.led-idle{background:#34373d}.led-on{background:var(--green)}.led-active{background:#8effc0}.led-error{background:var(--red)}.fx-btn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:5px 10px;border-radius:4px;cursor:pointer;background:var(--raised);color:var(--label);border:1px solid var(--line)}.fx-btn.is-open{background:#2c2f36;color:var(--amber);border-color:var(--amber)}.panic{font-family:var(--mono);font-weight:700;letter-spacing:.1em;background:linear-gradient(180deg,#e2564a,var(--red));color:#fff;border:1px solid #7c1d15;border-radius:5px;padding:8px 16px;cursor:pointer;box-shadow:0 2px #6e1a13,0 0 0 1px #00000040}.panic:active{transform:translateY(1px);box-shadow:0 1px #6e1a13}.fx{background:#181a1e;border:1px solid var(--line);border-radius:5px;padding:10px 12px;margin:2px 0 10px}.fx-hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.fx-row{border-top:1px solid #24262c;padding:7px 0}.fx-row:first-of-type{border-top:none}.fx-row-head{display:flex;align-items:center;gap:10px}.fx-row-name{font-size:13px;color:var(--text)}.fx-row.is-on .fx-row-name{color:var(--amber)}.fx-badge{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 4px}.fx-move button,.fx-expand{background:var(--raised);border:1px solid var(--line);color:var(--label);border-radius:4px;cursor:pointer;font-size:11px;padding:3px 7px}.fx-move{display:inline-flex;gap:2px}.fx-move button{padding:2px 5px;line-height:1}.fx-reset,.fx-reset-all,.settings-reset{font-family:var(--mono);font-size:10px;letter-spacing:.08em;background:var(--raised);color:var(--label);border:1px solid var(--line);border-radius:4px;padding:4px 9px;cursor:pointer}.fx-reset-all{margin-top:10px}.fx-reset:hover,.fx-reset-all:hover{color:var(--text)}.fx-editor-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#0009}.fx-editor{min-width:280px;max-width:90vw;padding:16px;background:var(--panel);border:1px solid var(--amber);border-radius:10px;box-shadow:0 0 30px color-mix(in srgb,var(--amber) 22%,transparent)}.fx-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.fx-editor-title{font-size:14px;font-weight:700;color:var(--amber)}.fx-editor-close{font-size:16px;background:none;border:none;cursor:pointer;color:var(--amber);opacity:.7}.fx-editor-close:hover{opacity:1}.fx-editor-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fx-editor-seg{flex-wrap:wrap}.fx-editor-label{min-width:60px;font-size:11px;font-weight:700;color:var(--amber);opacity:.7}.fx-editor-slider{flex:1;min-width:60px;accent-color:var(--amber)}.fx-editor-value{min-width:50px;text-align:right;font-size:10px;color:var(--amber);opacity:.7}.fx-vis{display:block;width:100%;max-width:200px;height:auto;margin:4px auto 8px;border-radius:4px}.fx-editor-btn{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:5px;cursor:pointer;background:var(--raised);color:var(--label);border:1px solid var(--line)}.fx-editor-btn:hover:not(:disabled){color:var(--text)}.fx-editor-btn.active{background:var(--amber);color:#1a1407;border-color:var(--amber)}.fx-editor-btn:disabled{opacity:.4;cursor:not-allowed}.fx-editor-select{margin-left:4px}.fx-editor-reset{margin-top:4px;font-family:var(--mono);font-size:11px;background:none;border:none;color:var(--muted);cursor:pointer}.fx-editor-reset:hover{color:var(--text)}.strip-group{border-top:1px solid #24262c;padding:8px 0}.strip-group:first-of-type{border-top:none}.strip-group-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}.strip-group-head>span:first-child{color:var(--label)}.settings{margin-top:12px;background:#181a1e;border:1px solid var(--line);border-radius:6px;padding:14px 16px}.settings-head{display:flex;align-items:center;margin-bottom:6px}.settings-head h2{font-size:15px;margin:0 auto 0 0}.settings-close{background:none;border:none;color:var(--label);cursor:pointer;font-size:16px}.settings-block{border-top:1px solid var(--line);padding:12px 0}.settings-block h3{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin:0 0 7px}.settings-block p,.settings-block li{font-size:13px;color:#c7cad1;line-height:1.5}.settings-block ul{margin:6px 0;padding-left:18px}.settings-block code{font-family:var(--mono);font-size:12px;color:var(--amber)}.settings-foot{font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}.drum-map{width:100%;border-collapse:collapse;margin-top:6px;font-size:12.5px}.drum-map th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px 6px;border-bottom:1px solid var(--line)}.drum-map td{padding:4px 6px;border-bottom:1px solid #24262c;color:#c7cad1}.drum-map input{width:56px;font-family:var(--mono);padding:2px 4px;border:1px solid var(--line);border-radius:3px}.drum-silent{color:var(--red)}.ed-btn{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:5px 9px;border-radius:4px;cursor:pointer;background:var(--raised);color:var(--label);border:1px solid var(--line)}.ed-btn:hover{color:var(--text);border-color:var(--amber)}.row-mod{color:var(--amber);font-size:12px;margin-left:-4px}.editor-view{padding-top:4px}.editor-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0 10px;border-bottom:1px solid var(--line);margin-bottom:10px}.editor-back,.editor-btn{font-family:var(--mono);font-size:11px;background:var(--raised);color:var(--label);border:1px solid var(--line);border-radius:4px;padding:5px 10px;cursor:pointer}.editor-back:hover,.editor-btn:hover{color:var(--text);border-color:var(--amber)}.editor-title{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}.editor-spacer{margin-left:auto}.editor-preset select{min-width:130px}.editor-mod{color:var(--amber);font-size:14px}.editor-test{color:var(--amber);border-color:var(--amber)}.ed-section{border-top:1px solid var(--line);padding:10px 0}.ed-section:first-of-type{border-top:none}.ed-section-h{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}.ed-osc-icon,.ed-model-icon{display:inline-flex;align-items:center;width:28px;height:14px;color:var(--amber)}.ed-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:6px}.ed-knobs{display:flex;flex-wrap:wrap;gap:10px 12px;padding:6px 0}.knob{display:flex;flex-direction:column;align-items:center;gap:2px;width:60px}.knob-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}.knob input[type=range]{width:100%;accent-color:var(--amber)}.knob-value{font-family:var(--mono);font-size:10px;color:var(--amber)}.adsr-curve,.filter-curve,.lfo-curve{display:block;color:var(--amber);background:#131418;border:1px solid var(--line);border-radius:4px;margin:6px 0}.adsr-curve{width:100%;max-width:240px;height:50px}.filter-curve{width:100%;max-width:160px;height:42px}.lfo-curve{width:140px;height:36px}.ed-voice-picker{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.ed-voice{font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:4px;background:var(--raised);color:var(--label);border:1px solid var(--line);cursor:pointer}.ed-voice.is-sel{background:#3a2f17;color:var(--amber);border-color:var(--amber)}.ed-voice-head{justify-content:space-between}.ed-voice-name{font-family:var(--mono);font-size:12px;color:var(--text)}.ed-test{font-family:var(--mono);font-size:11px;background:var(--raised);color:var(--amber);border:1px solid var(--amber);border-radius:4px;padding:4px 10px;cursor:pointer}:focus-visible{outline:2px solid var(--amber);outline-offset:1px}@media(max-width:480px){.row{flex-wrap:wrap;gap:8px 10px}.row-name{width:auto}.bay{flex-wrap:wrap}.bay-select{min-width:140px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}