:root{--bg:#070a0f;--panel:#101720;--panel2:#151f29;--line:#263440;--text:#dbe7ef;--muted:#718493;--cyan:#4de5ff;--purple:#a779ff;--amber:#ffc868;--pink:#ff6ebc}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#172638,#070a0f 48%);color:var(--text);font:12px Arial,sans-serif;min-height:100vh}.app-shell{max-width:1540px;margin:auto;background:#090d12e8;min-height:100vh;border-inline:1px solid #1c2832}button,select,input{font:inherit}button,select{color:#a9bbc7;background:#121c25;border:1px solid #2b3b48;padding:7px 9px}button{cursor:pointer}.topbar{height:66px;display:flex;align-items:center;gap:18px;padding:8px 14px;background:#0c1218;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;min-width:260px}.logo{display:grid;place-items:center;width:38px;height:38px;color:#061016;background:var(--cyan);clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);font-size:20px;font-weight:900;box-shadow:0 0 16px #4de5ff88}.brand strong{font-size:16px;letter-spacing:3px}.brand em{color:var(--cyan);font-size:10px}.brand small{display:block;color:var(--muted);font-size:7px;letter-spacing:1.5px;margin-top:4px}.preset-tools{display:flex;align-items:center;gap:5px;flex:1}.preset-select{min-width:270px;padding:5px 9px;background:#111a23;border:1px solid #293a47}.preset-select small{display:block;color:var(--cyan);font-size:7px;letter-spacing:1px}.preset-select select{width:100%;padding:2px 0;border:0;background:transparent;color:#e0e8ee;font-weight:bold}.action{font-size:9px;letter-spacing:1px}.primary{border-color:#348b9a;color:var(--cyan)}.status{color:var(--muted);font-size:8px;letter-spacing:1px;white-space:nowrap}.status-dot,.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}main{padding:10px}.hero-row{display:flex;align-items:center;padding:7px 12px 11px;background:linear-gradient(90deg,#111d27,#0d131a);border:1px solid var(--line);margin-bottom:8px}.hero-row h1{font-size:15px;letter-spacing:4px;margin:0;color:#e7f8fb}.hero-row p{color:var(--muted);margin:5px 0 0}.hero-row canvas{margin-left:auto;width:460px;height:74px;background:#091016;border:1px solid #243541}.panel{background:linear-gradient(145deg,#111a23,#0d131a);border:1px solid var(--line);box-shadow:0 5px 14px #0004}.panel header{height:38px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#121c25;border-bottom:1px solid #24323d}.panel h2{margin:0;font-size:10px;letter-spacing:1.6px}.panel header select{margin-left:auto;padding:4px;font-size:9px}.tag{margin-left:auto;color:var(--muted);font-size:8px;letter-spacing:1px}.purple{background:var(--purple);box-shadow:0 0 9px var(--purple)}.amber{background:var(--amber);box-shadow:0 0 9px var(--amber)}.osc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.osc-card .osc-body{padding:9px}.osc-card canvas{display:block;width:100%;height:75px;background:#091219;border:1px solid #233541;margin-bottom:9px}.osc-head{display:flex;gap:6px;align-items:center}.osc-head select{margin-left:auto;padding:4px;font-size:9px}.enabled{accent-color:var(--cyan)}.control-grid{display:grid;gap:8px}.control-grid.four{grid-template-columns:repeat(4,1fr)}.control-grid.two{grid-template-columns:repeat(2,1fr)}label{display:block;color:var(--muted);font-size:8px;letter-spacing:1px}output{float:right;color:#dbe6eb;font-size:8px}input[type=range]{appearance:none;width:100%;height:3px;background:#2b3b47;margin-top:8px;accent-color:var(--cyan)}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:12px;border-radius:2px;background:var(--cyan);box-shadow:0 0 6px #4de5ff99}.engine-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.filter-body,.envelope-panel{min-height:206px}.filter-body{padding:8px}.filter-body canvas,.envelope-panel canvas{display:block;width:100%;height:120px;background:#091016;border:1px solid #22333f;margin-bottom:10px}.envelope-panel canvas{width:calc(100% - 16px);margin:8px}.envelope-panel .control-grid{padding:0 8px 8px}.lower{grid-template-columns:1.2fr .8fr}.lfo-layout{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:8px}.lfo-layout canvas{width:100%;height:112px;background:#0a1118;border:1px solid #253542}.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 8px 8px}.matrix div{padding:7px;background:#121c25;border:1px solid #273642;color:#8295a3;font-size:8px;letter-spacing:.8px}.matrix b{display:block;color:#c9d7df;margin-bottom:4px}.fx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:8px}.switch-card{padding:9px;background:#121b24;border:1px solid #293a47}.switch-card span{color:#dce7ee;font-weight:bold;margin-left:4px}.switch-card small{display:block;color:#778b99;margin:7px 0 2px}.performance-grid{display:grid;grid-template-columns:1fr 260px;gap:8px;margin-top:8px}.macro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:8px}.macro-grid label{padding:7px;border:1px solid #293b48;background:#121b24}.macro-grid span{display:inline-grid;place-items:center;width:19px;height:19px;border:1px solid #388b9b;color:var(--cyan);margin-right:7px}.macro-grid b{color:#dae6ec;font-size:9px}.master-panel>label{padding:16px 12px}.keyboard-panel{margin-top:8px}.keyboard-panel header button{padding:4px 8px;font-size:8px}.key-hint{margin-left:auto;color:#8093a0;font-size:8px;letter-spacing:1px}.keyboard{display:flex;position:relative;height:112px;padding:0 7px 7px;user-select:none}.key{border:1px solid #1f2c34;border-radius:0 0 3px 3px}.key.white{height:100%;flex:1;background:linear-gradient(#d9e2e5,#aebbc0);margin-right:2px}.key.black{z-index:2;width:3.5%;height:64%;margin:0 -1.85%;background:linear-gradient(#1d2931,#07090b);border-color:#31424d}.key.active{background:linear-gradient(#75edff,#268aa0);box-shadow:0 0 13px #4de5ffaa}footer{padding:9px 13px;color:#61727e;border-top:1px solid #1d2932;font-size:8px;letter-spacing:1.2px}footer span{color:#8fa0aa}@media(max-width:1000px){.osc-grid{grid-template-columns:1fr}.engine-grid,.performance-grid{grid-template-columns:1fr}.status{display:none}}@media(max-width:700px){.topbar{height:auto;flex-wrap:wrap}.brand{min-width:100%}.preset-select{min-width:170px;flex:1}.action{display:none}.hero-row canvas{display:none}.control-grid.four{grid-template-columns:repeat(2,1fr)}.lfo-layout{grid-template-columns:1fr}.key-hint{display:none}.macro-grid{grid-template-columns:repeat(2,1fr)}}

.record-tools{display:flex;align-items:center;gap:5px;margin-left:auto;margin-right:12px}.record-tools button{font-size:8px;letter-spacing:.8px;padding:6px 8px}.record-tools button:disabled{cursor:not-allowed;opacity:.42}.record-button{color:#ff90ae;border-color:#804454}.record-status{display:flex;align-items:center;gap:6px;color:#7f929e;font-size:8px;letter-spacing:.8px;margin-right:4px}.record-status i{width:8px;height:8px;border-radius:50%;background:#60717b}.record-status i.live{background:#ff527e;box-shadow:0 0 10px #ff527e;animation:pulse 1s infinite}.record-status time{min-width:34px;color:#b9c8cf}.preset-loader{width:min(920px,calc(100vw - 28px));height:min(650px,calc(100vh - 28px));padding:0;color:var(--text);background:#0d141b;border:1px solid #3a5260;box-shadow:0 20px 80px #000c}.preset-loader::backdrop{background:#020407b8;backdrop-filter:blur(4px)}.preset-loader header{height:62px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #2b3e4a;background:#111c25}.preset-loader header small{display:block;color:var(--cyan);font-size:7px;letter-spacing:1.6px}.preset-loader h2{margin:5px 0 0;font-size:14px;letter-spacing:2px}.preset-loader header button{margin-left:auto;font-size:22px;padding:2px 10px}.loader-toolbar{display:flex;gap:7px;padding:10px;border-bottom:1px solid #263844}.loader-toolbar input{flex:1;color:#d7e4e9;background:#111b24;border:1px solid #2b414e;padding:8px 10px}.loader-toolbar span{display:flex;align-items:center;color:#80939e;font-size:9px;letter-spacing:1px}.loader-layout{display:grid;grid-template-columns:180px 1fr;height:calc(100% - 112px)}.loader-layout aside{padding:8px;border-right:1px solid #263844;background:#0b1117}.library-tab{width:100%;text-align:left;margin-bottom:5px;color:#8395a0;font-size:8px;letter-spacing:.8px}.library-tab.active{color:var(--cyan);border-color:#348b9a;background:#10252d}.loader-layout aside p{color:#60727e;font-size:9px;line-height:1.6;padding:8px}.preset-list{padding:8px;overflow:auto}.preset-row{display:grid;grid-template-columns:54px 1fr 84px 64px 52px;align-items:center;gap:8px;padding:8px 9px;margin-bottom:5px;background:#111b24;border:1px solid #263945}.preset-row:hover{border-color:#3d6877}.preset-row small{color:#78909d;font-size:8px}.preset-row b{font-size:10px;letter-spacing:.5px}.preset-row em{color:#8fa5b0;font-size:8px;font-style:normal}.preset-row button{padding:5px;font-size:8px}.preset-row .delete-patch{color:#ff8cab;border-color:#704454}.toast{position:fixed;right:18px;bottom:18px;z-index:5;padding:10px 13px;color:#dffaff;background:#12303a;border:1px solid #3e92a0;box-shadow:0 7px 18px #0008;font-size:10px;letter-spacing:.7px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}@keyframes pulse{50%{opacity:.45}}@media(max-width:850px){.record-status{display:none}.hero-row{flex-wrap:wrap;gap:8px}.record-tools{margin-left:0}.loader-layout{grid-template-columns:1fr}.loader-layout aside{display:flex;gap:4px;border-right:0;border-bottom:1px solid #263844}.loader-layout aside p{display:none}.preset-row{grid-template-columns:45px 1fr 55px 46px}.preset-row em{display:none}}

.loader-action{display:inline-block!important;color:var(--cyan);border-color:#3b94a2;background:#10252d;box-shadow:0 0 12px #4de5ff20;font-weight:bold}.loader-layout aside h3{margin:12px 5px 7px;color:#8095a0;font-size:8px;letter-spacing:1.2px}.instrument-folders{display:grid;gap:4px}.folder-button{display:flex;align-items:center;width:100%;padding:6px 7px;text-align:left;border-color:#243642;color:#8fa2ad;background:#101820;font-size:8px;letter-spacing:.7px}.folder-button span{margin-left:auto;color:#607783}.folder-button.active{color:#dffbff;border-color:#3b8998;background:#10252d}.folder-button.active span{color:var(--cyan)}@media(max-width:850px){.loader-layout aside{display:block;overflow:auto;max-height:190px}.instrument-folders{grid-template-columns:repeat(3,1fr)}.folder-button{padding:5px}.loader-layout{grid-template-rows:auto 1fr;height:calc(100% - 112px)}}@media(max-width:520px){.preset-tools{flex-wrap:wrap}.loader-action{order:5;width:100%}.instrument-folders{grid-template-columns:repeat(2,1fr)}}

#save-patch{display:inline-block!important}

.loader-toolbar button{white-space:nowrap;padding:7px 8px;color:#a7dbe2;border-color:#326775;font-size:8px;letter-spacing:.6px}.loader-layout{height:calc(100% - 184px)}.preset-row{grid-template-columns:54px 1fr 74px 58px 58px 52px}.preset-row .audition-patch{color:#bba5ff;border-color:#654f8f}.loader-preview{display:flex;align-items:center;gap:16px;height:72px;padding:8px 12px;border-top:1px solid #2b414d;background:#101a22}.loader-preview div:first-child{min-width:200px}.loader-preview small,.loader-preview b,.loader-preview span{display:block}.loader-preview small{color:var(--purple);font-size:7px;letter-spacing:1.2px}.loader-preview b{margin:4px 0;color:#e3edf0;font-size:10px}.loader-preview span{color:#748793;font-size:8px}.preview-keyboard{display:flex;position:relative;width:min(520px,100%);height:54px;margin-left:auto;user-select:none}.preview-keyboard .key.white{height:100%}.preview-keyboard .key.black{height:64%;width:6%;margin:0 -3.1%}@media(max-width:850px){.loader-toolbar{flex-wrap:wrap}.loader-toolbar input[type=search]{min-width:100%}.loader-layout{height:calc(100% - 230px)}.loader-preview{height:72px}.loader-preview div:first-child{display:none}.preset-row{grid-template-columns:40px 1fr 48px 48px 44px}.preset-row em{display:none}.preset-row .delete-patch{display:none}}

.key span{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);color:#34444b;font-size:7px;font-weight:bold;pointer-events:none}.key.black span{bottom:4px;color:#9cb1b9;font-size:6px}.key.active span{color:#073944}.preset-row.auditioning{border-color:#9271dc;background:#1b1730;box-shadow:inset 3px 0 #a779ff}.preview-keyboard{min-width:420px;overflow:hidden}.preview-keyboard .key span{font-size:6px}@media(max-width:850px){.preview-keyboard{min-width:0;width:100%}.preview-keyboard .key span{font-size:5px}}

/* Keyboard labels need each piano key as their positioning context. */
.key{position:relative;overflow:hidden}.key span{z-index:4;display:block;min-width:100%;color:#132a33!important;font-size:8px!important;line-height:1;text-align:center;text-shadow:0 1px #ffffff99}.key.black span{color:#e7f7fb!important;font-size:7px!important;text-shadow:0 1px 2px #000}.key.active span{color:#052c35!important}.preview-keyboard .key span{font-size:7px!important}.preview-keyboard .key.black span{font-size:6px!important}.preset-row .protected-patch{cursor:help;color:#6e8089;border-color:#33434c;opacity:.72}@media(max-width:850px){.preview-keyboard .key span{font-size:6px!important}.preview-keyboard .key.black span{font-size:5px!important}.preset-row .delete-patch{display:block}}