:root{font-family:Noto Sans SC,Microsoft YaHei,system-ui,sans-serif;color:#edf2e9;background:#101817;font-synthesis:none;color-scheme:dark;--key-height:clamp(280px, calc(100dvh - 178px) ,680px)}*{box-sizing:border-box}body{margin:0;min-height:100dvh}button,select,input{font:inherit}button,select,summary{cursor:pointer}button{color:inherit;border:1px solid #3b4942;background:#27342e;border-radius:6px;padding:7px 10px;font-size:12px;white-space:nowrap}button:hover{background:#36483d}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #c8eda5;outline-offset:3px}button:disabled{opacity:.35;cursor:default}main{width:100%;padding:16px}.studio{background:#1b2621;border:1px solid #3a483d;border-radius:10px;overflow:hidden}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:12px 14px}.primary{background:#c6e9a2;color:#263820;border:0;font-weight:600;height:34px}.primary:hover{background:#dbf5be}.instrument-label{display:flex;align-items:center;gap:8px;font-size:11px;color:#a5b3a7}.instrument-label select{width:160px;height:34px;background:#26332b;color:#edf2e9;border:1px solid #455241;border-radius:6px;padding:5px 8px;font-size:12px}.slider-label{width:105px;font-size:10px;color:#a5b3a7}.slider-label span{float:right;color:#d5e2cf}input[type=range]{display:block;width:100%;height:4px;margin:8px 0 3px;accent-color:#c6e9a2}.octave-controls{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:11px;color:#a5b3a7}.octave-row{display:flex;align-items:center;gap:5px}.octave-row button{height:30px;min-width:30px;padding:2px 7px}.octave-row strong{font-size:18px;font-weight:400;min-width:28px;text-align:center;color:#edf2e9}.octave-row .reset{font-size:10px;background:transparent;border:0;color:#acb5a8}.quiet{font-size:11px;background:transparent;color:#adbaac}.status-row{display:flex;justify-content:space-between;gap:12px;padding:0 15px 10px;font-size:10px;color:#91a38e}#status{color:#b3cc9e}.keyboard-scroll{overflow-x:auto;padding:0 10px 5px;scrollbar-color:#64775c #1b2621}.keyboard{position:relative;height:calc(var(--key-height) + 8px);min-width:780px;touch-action:none;-webkit-user-select:none;user-select:none;border-top:6px solid #0c130f;border-radius:4px;background:#0a100d}.key{position:absolute;top:0;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;user-select:none;-webkit-user-select:none}.white{height:220px;background:linear-gradient(90deg,#d8dbcf,#f3f3e8 13%,#f3f3e8 85%,#dce0d2);border:1px solid #889184;border-top:0;border-radius:0 0 5px 5px;box-shadow:inset 0 -6px #bfc5b6;color:#63745e;padding-bottom:20px;z-index:1}.black{height:138px;background:linear-gradient(90deg,#15201c,#26352b 50%,#101914);color:#96ac94;border:1px solid #070e0a;border-radius:0 0 4px 4px;box-shadow:inset 0 -5px #080d0a,2px 4px 5px #0005;padding-bottom:12px;z-index:2}.white.mapped{background:linear-gradient(90deg,#d1ddc6,#edf4e3 15%,#edf4e3 85%,#d1ddc6)}.white.active{background:#c2e897;box-shadow:inset 0 -2px #93bb6d;height:222px}.black.active{background:#80a75f;box-shadow:inset 0 -2px #486b33}.key-shortcut{font-size:12px;font-weight:650;line-height:22px}.key-note{font-size:9px;opacity:.65}.black .key-shortcut{font-size:10px}.black .key-note{font-size:8px}.white{height:var(--key-height);padding-bottom:22px}.white.active{height:var(--key-height)}.black{height:calc(var(--key-height)*.62);padding-bottom:16px}.key-shortcut{font-size:14px;line-height:26px}.key-note{font-size:11px}.black .key-shortcut{font-size:12px}.black .key-note{font-size:10px}.keyboard-footer{display:flex;justify-content:space-between;gap:10px;padding:9px 14px 11px;color:#a2b19c;font-size:10px}.utility-row{display:flex;gap:18px;align-items:flex-start;padding:10px 2px;font-size:11px;color:#94a68f}.text-button{padding:0;background:none;border:0;color:#a6bd92;font-size:11px;line-height:18px}summary{line-height:18px}.help{max-width:540px;padding:12px 0 0;line-height:1.9}.help p{margin:8px 0}.help a{color:#91a783}.modifier-label select{padding:3px;color:#b4c6a8;background:#1c2a21;border:1px solid #3f513e;border-radius:4px;font-size:11px;margin-left:8px}.pad{position:fixed;right:22px;bottom:20px;width:210px;background:#233127f5;border:1px solid #657650;border-radius:13px;box-shadow:0 14px 45px #0005;z-index:10;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.pad-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;color:#bdcea8;font-size:11px}.pad-header span{touch-action:none;cursor:grab;flex:1;padding:5px 0}.pad-header button{border:0;background:transparent;padding:0 5px}.pad-buttons{display:flex;gap:8px;padding:0 10px}.pad-buttons button{flex:1;font-size:25px;background:#34472e;border-color:#536946;touch-action:none;user-select:none;-webkit-user-select:none}.pad-buttons button.pressed{background:#c6e9a2;color:#23301c}.pad-buttons small{display:block;font-size:10px;margin-top:5px}.pad p{text-align:center;font-size:9px;color:#96ad85;margin:9px}#ctrl-warning{font-size:12px;color:#e9c580}[hidden]{display:none!important}@media(min-width:1000px){.pad{display:none}}@media(max-width:760px){:root{--key-height:clamp(260px, calc(100dvh - 240px) ,560px)}main{padding:8px}.toolbar{gap:10px 12px;padding:10px}.instrument-label{flex:1}.instrument-label>span{display:none}.instrument-label select{width:100%}.slider-label{width:calc(50% - 6px)}.octave-controls{margin-left:0;flex:1}.status-row{padding:0 10px 9px;font-size:9px}.keyboard-scroll{padding:0 6px 4px}.keyboard-footer{font-size:9px;padding:8px 9px;align-items:center}.shortcut-extra{display:none}.key-shortcut{font-size:13px}.key-note{font-size:10px}.pad{width:180px}.pad-buttons button{font-size:21px;padding:8px}.pad-header{padding:5px 10px}.pad p{margin:6px}.utility-row{padding-top:9px}}@media(max-height:550px)and (min-width:600px){:root{--key-height:max(180px, calc(100dvh - 172px) )}.toolbar{gap:8px;padding:8px}.slider-label{width:80px}.instrument-label select{width:125px}.pad{width:170px}.pad-buttons button{font-size:18px;padding:6px}}.view-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:0 14px 10px;font-size:11px;color:#a5b3a7}.view-controls label{display:flex;align-items:center;gap:7px}.view-controls select{background:#26332b;color:#edf2e9;border:1px solid #455241;border-radius:6px;font:inherit;padding:6px}.view-controls button{font-size:11px;padding:6px 9px}.view-controls button[aria-pressed=true]{background:#c6e9a2;color:#263820}#layout-hint{font-size:10px;opacity:.8}.keyboard-scroll{overflow:visible}.keyboard{display:flex;flex-direction:column;gap:12px;height:auto;min-width:0;border:0;background:transparent;touch-action:none}.key-row-scroll{overflow-x:auto;padding-bottom:3px;scrollbar-color:#64775c #1b2621}.key-row{position:relative;height:calc(var(--key-height) + 8px);border-top:6px solid #0c130f;background:#0a100d;border-radius:4px}.keyboard.double{--key-height:clamp(160px, calc((100dvh - 252px)/2) ,330px)}:root{--key-height:clamp(260px, calc(100dvh - 222px) ,640px)}:root:not([data-theme=dark]){color-scheme:light;color:#28352e;background:#f4f6f2}:root:not([data-theme=dark]) .studio{background:#fff;border-color:#d4ddd1}:root:not([data-theme=dark]) button{background:#edf2e9;color:#34492d;border-color:#cad5c3}:root:not([data-theme=dark]) button:hover{background:#e0ead9}:root:not([data-theme=dark]) .primary,:root:not([data-theme=dark]) .view-controls button[aria-pressed=true],:root:not([data-theme=dark]) .pad-buttons button.pressed{background:#426c32;color:#fff;border-color:#426c32}:root:not([data-theme=dark]) select{background:#f6f8f3;color:#293e26;border-color:#cbd7c4}:root:not([data-theme=dark]) .instrument-label,:root:not([data-theme=dark]) .slider-label,:root:not([data-theme=dark]) .octave-controls,:root:not([data-theme=dark]) .status-row,:root:not([data-theme=dark]) .keyboard-footer,:root:not([data-theme=dark]) .utility-row,:root:not([data-theme=dark]) .view-controls{color:#56664e}:root:not([data-theme=dark]) .slider-label span,:root:not([data-theme=dark]) .octave-row strong{color:#273924}:root:not([data-theme=dark]) #status,:root:not([data-theme=dark]) .help a,:root:not([data-theme=dark]) .text-button{color:#456936}:root:not([data-theme=dark]) .text-button{background:transparent;border:0}:root:not([data-theme=dark]) input[type=range]{accent-color:#5c8147}:root:not([data-theme=dark]) .key-row{border-color:#a6b19f;background:#b6c0af}:root:not([data-theme=dark]) .key-row-scroll{scrollbar-color:#b4c4a8 #eff3eb}:root:not([data-theme=dark]) .white{background:linear-gradient(90deg,#e6e9e2,#fff 15%,#fff 85%,#e6e9e2);border-color:#aab4a3;color:#56664f;box-shadow:inset 0 -5px #d8ded3}:root:not([data-theme=dark]) .white.mapped{background:linear-gradient(90deg,#dde8d4,#f1f8e9 15%,#f1f8e9 85%,#dde8d4)}:root:not([data-theme=dark]) .white.active{background:#acd780;box-shadow:inset 0 -2px #79a555}:root:not([data-theme=dark]) .pad{background:#fbfdf8f5;border-color:#b3c5a6;box-shadow:0 10px 30px #273e2420}:root:not([data-theme=dark]) .pad-header,:root:not([data-theme=dark]) .pad p{color:#566d48}:root:not([data-theme=dark]) #ctrl-warning{color:#90620d}@media(max-width:760px){:root{--key-height:clamp(240px, calc(100dvh - 300px) ,530px)}.view-controls{gap:8px;padding:0 10px 10px}#layout-hint{display:none}.keyboard.double{--key-height:clamp(155px, calc((100dvh - 310px)/2) ,260px)}.key-row-scroll{scrollbar-width:thin}}@media(max-height:550px)and (min-width:600px){:root{--key-height:max(180px, calc(100dvh - 216px) )}.keyboard.double{--key-height:150px}}