:root{--bg: #1b1d23;--panel: #262933;--panel-border: #3a3f4d;--accent: #6ea8ff;--text: #e8e9ee;--muted: #9aa0ad;--ok: #6ee7a8;--warn: #ffb86e;--err: #ff8080;--white-key: #f7f7f7;--white-key-active: #cfe0ff;--black-key: #202127;--black-key-active: #5580d8}*{box-sizing:border-box}html,body{height:100%}body{margin:0;padding:14px 0 12px;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;height:100dvh;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:12px}.app-header,.panel{width:100%;max-width:1100px;margin-inline:auto}.app-header{flex:0 0 auto;padding-inline:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.keyboard-area{flex:0 0 auto;width:100%;display:flex;flex-direction:column;gap:8px;padding-inline:10px}h1{font-size:20px;font-weight:600;margin:0}.subtitle{font-size:12px;color:var(--muted);margin:0;text-align:right}.header-right{display:flex;align-items:center;gap:12px}.install-btn{font-size:12px;padding:5px 10px;white-space:nowrap;border-color:var(--accent);color:var(--accent)}.install-btn.installed{color:var(--muted);border-color:var(--panel-border)}.install-hint{display:block;text-align:right;font-size:11px;color:var(--muted);padding:2px 24px 0}.install-hint[hidden]{display:none}.header-shift{display:flex;gap:6px;flex-wrap:wrap}.shift-btn{font-size:12px;padding:5px 9px;white-space:nowrap}.field.toggle-group{flex-direction:row;align-items:flex-start;gap:16px;min-width:auto}.toggle-field{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.toggle-field.disabled{opacity:.4}.keyboard-resize{height:14px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;flex:0 0 auto}.keyboard-resize .grip{width:46px;height:5px;border-radius:3px;background:#464c60;transition:background .15s}.keyboard-resize:hover .grip,.keyboard-resize.dragging .grip,.keyboard-resize:focus-visible .grip{background:var(--accent)}.keyboard-resize:focus-visible{outline:none}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:16px 20px;width:100%;max-width:1100px;display:flex;flex-direction:column;gap:16px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--panel-border) transparent}.panel::-webkit-scrollbar{width:10px}.panel::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:5px}.panel::-webkit-scrollbar-track{background:transparent}.panel-sticky{position:sticky;top:-16px;z-index:5;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:var(--panel);padding:12px 0;margin:-16px -20px 4px;padding-inline:20px;border-bottom:1px solid var(--panel-border);box-shadow:0 6px 10px -6px #00000080}.sticky-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.sticky-group{display:flex;align-items:center;gap:8px}.sticky-label{font-size:12px;color:var(--muted)}.sticky-group input[type=number]{width:66px}.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.toggle input{position:absolute;width:1px;height:1px;opacity:0}.toggle-track{position:relative;width:34px;height:18px;border-radius:9px;background:#3a3f4d;transition:background .12s ease;flex:0 0 auto}.toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text);transition:transform .12s ease}.toggle input:checked+.toggle-track{background:var(--accent)}.toggle input:checked+.toggle-track .toggle-thumb{transform:translate(16px);background:#10131a}.toggle input:focus-visible+.toggle-track{outline:2px solid var(--accent);outline-offset:2px}.toggle-text{font-size:13px;color:var(--text)}.row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end}.row:empty{display:none}.field{display:flex;flex-direction:column;gap:6px;min-width:140px}.field label{font-size:12px;color:var(--muted)}select,input[type=number]{background:#1b1d23;color:var(--text);border:1px solid var(--panel-border);border-radius:6px;padding:6px 8px;font-size:14px}button{background:#1b1d23;color:var(--text);border:1px solid var(--panel-border);border-radius:6px;padding:7px 12px;font-size:13px;cursor:pointer}button:hover{border-color:var(--accent)}.checkbox-field{flex-direction:row;align-items:center;gap:8px}.checkbox-field label{font-size:13px;color:var(--text)}.rs{position:relative;height:34px;width:100%;min-width:280px;touch-action:none}.rs-track{position:absolute;top:15px;left:0;right:0;height:4px;border-radius:2px;background:#3a3f4d;pointer-events:none}.rs-fill{position:absolute;top:8px;height:18px;background:transparent;cursor:grab}.rs-fill:after{content:"";position:absolute;inset:7px 0;background:var(--accent);border-radius:2px}.rs-fill:hover:after{inset:6px 0}.rs-fill.dragging{cursor:grabbing}.rs-fill:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}.rs-thumb{position:absolute;top:9px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--accent);cursor:grab}.rs-thumb:active{cursor:grabbing}.range-field{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;align-items:center;gap:16px}.range-label{font-size:12px;color:var(--muted);display:inline-flex;gap:6px;white-space:nowrap}.range-sep{opacity:.5}section{display:flex;flex-direction:column;gap:16px}.field-label{font-size:12px;color:var(--muted)}.field.grow{flex:1;min-width:260px;justify-content:flex-end}.section-title{font-size:12px;font-weight:600;margin:-2px 0 0;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-top:1px solid var(--panel-border);padding-top:12px}.section-title.collapsible{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}.section-title.collapsible:before{content:"▾";font-size:9px;color:var(--muted);transition:transform .12s ease}section.collapsed>.section-title.collapsible:before{transform:rotate(-90deg)}.section-title.collapsible:hover{color:var(--text)}.section-title.collapsible:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}section.collapsed>:not(.section-title){display:none!important}.plain-range{width:160px}.knob-field{align-items:center;min-width:76px}.knob{width:64px;height:64px}.knob-value{font-size:11px;color:var(--muted);text-align:center;width:64px}.piano-scroll{width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:6px}.hint,.status{max-width:1100px;margin-inline:auto}.piano{display:flex;flex-direction:column;align-items:center;gap:6px;touch-action:none}.piano-row{position:relative}.key{position:absolute;top:0;border-radius:0 0 6px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px;user-select:none;cursor:pointer;overflow:hidden}.key.white{background:var(--white-key);border:1px solid #b8bcc4;color:#222;z-index:1}.key.white.active{background:var(--white-key-active)}.key.black{background:var(--black-key);border:1px solid #000;color:#ddd;z-index:2}.key.black.active{background:var(--black-key-active)}.key .keychar{font-size:12px;font-weight:700;text-transform:uppercase;line-height:1.1;pointer-events:none}.key .notename{font-size:10px;font-weight:600;opacity:.95;line-height:1.15;pointer-events:none}.key .octave{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:11px;font-weight:700;line-height:1;opacity:1;pointer-events:none}.key.compact .notename,.key.compact .octave{display:none}.key.compact .keychar{font-size:9px}.hint{font-size:12px;color:var(--muted);max-width:1100px;text-align:center;margin:0}.hint.left{text-align:left}kbd{font-family:ui-monospace,monospace;font-size:.9em;background:#1b1d23;border:1px solid var(--panel-border);border-radius:4px;padding:1px 5px}.status{font-size:12px;color:var(--muted);max-width:1100px;margin:0}.status:empty{display:none}#samplerStatusField{min-width:200px;padding-bottom:6px}#samplerStatusField:has(.status:empty){display:none}.status.ok{color:var(--ok)}.status.warn{color:var(--warn)}.status.err{color:var(--err)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.knob:focus-visible,.rs-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:50%}.pulse{width:18px;height:18px;border-radius:50%;background:#3a3f4d;transition:background .09s linear}.sticky-group.metronome{flex-wrap:wrap;row-gap:6px}.bpm-stepper{display:inline-flex;align-items:center;gap:4px}.step-btn{padding:4px 9px;font-size:15px;line-height:1;min-width:28px}.bpm-stepper input[type=number]{width:54px;text-align:center}#meter{max-width:220px}.meter-custom{display:inline-flex;align-items:center;gap:6px}.meter-custom[hidden]{display:none}.meter-pulses{display:inline-flex;gap:3px;flex-wrap:wrap}.pulse-dot{padding:2px 5px;font-size:14px;line-height:1;min-width:24px;color:var(--muted)}.pulse-dot[data-level="2"]{color:var(--accent);border-color:var(--accent)}.pulse-dot[data-level="1"]{color:#9aa4bf}.keyboard-area{position:relative}.keyboard-area.gated .piano{opacity:.4;pointer-events:none;filter:grayscale(.6)}.keyboard-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;color:var(--text);background:#14161c8c;border-radius:8px;pointer-events:none}.keyboard-overlay[hidden]{display:none}.keyboard-overlay.error{color:#ff9d9d}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.keyboard-overlay.error .spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}.knob-reset-field{justify-content:center;margin-left:auto;min-width:0}.reset-instrument{font-size:12px;padding:6px 10px;max-width:110px;white-space:normal;line-height:1.2;color:var(--muted)}.offline-bar{height:6px;border-radius:3px;background:#2a2e3a;overflow:hidden;margin-bottom:6px}.offline-bar:before{content:"";display:block;height:100%;width:var(--p, 0%);background:var(--accent);transition:width .2s linear}#effectsContainer{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.effect-field{border:1px solid var(--panel-border);border-radius:8px;padding:8px 10px 10px;min-width:0;gap:8px}.effect-field .mini-slider{width:100%;min-width:40px}.effect-field .mini-label{min-width:0}.effect-field.on{border-color:var(--accent)}.effect-field .checkbox-row{display:flex;align-items:center;gap:6px}.effect-field .checkbox-row label{font-size:12px;color:var(--text);font-weight:600}.effect-field .mini-row{display:flex;align-items:center;gap:10px}.mini-slider{width:90px}.mini-label{font-size:11px;color:var(--muted);min-width:60px}#presetField,#waveformField{min-width:0}.icon-strip{display:flex;flex-wrap:wrap;gap:4px}.icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;min-width:0}.icon-glyph{font-size:17px;line-height:1}.wave-icon{width:22px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.icon-btn.active{border-color:var(--accent);background:#2f3646}.icon-btn.active .wave-icon{stroke:var(--accent)}.extra-param-field{display:flex;flex-direction:column;gap:6px;min-width:160px}[hidden]{display:none!important}