*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;background:#101722;color:#f7f8fb}button,input,select{font:inherit}button{min-height:42px;border:1px solid #3b485d;border-radius:8px;background:#1c2738;color:#f7f8fb;font-weight:750;cursor:pointer}button:hover{border-color:#5eead4}.app{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:32px 0}.studio-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:28px 0 24px}.eyebrow{color:#5eead4;font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}h1{margin-top:8px;color:#fff;font-size:clamp(2.6rem,7vw,5.5rem);line-height:.92;letter-spacing:0}h2{color:#fff;font-size:1.1rem;letter-spacing:0}.status-strip{display:grid;gap:8px;min-width:250px;color:#c8d0df;font-size:.92rem}.status-strip span,.status-strip small{padding:10px 12px;border:1px solid #2c394d;border-radius:8px;background:#151f2e}.status-strip small{color:#9eb0c7;line-height:1.35}.studio-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:16px}.panel,.keyboard-panel{border:1px solid #2c394d;border-radius:8px;background:#172232;box-shadow:0 18px 44px #00000038}.panel{display:grid;gap:20px;padding:22px}.panel-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}.panel-heading button,.pedal-row button{padding:0 16px}label{display:grid;grid-template-columns:128px minmax(140px,1fr) 58px;gap:14px;align-items:center;color:#d9e2f2}label span{color:#5eead4;font-variant-numeric:tabular-nums;text-align:right}input[type=range]{accent-color:#5eead4;width:100%}h3{color:#c8d0df;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase}.editor-section{display:grid;gap:12px}.knob-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px}.knob-control{display:grid;grid-template-columns:1fr;justify-items:center;gap:8px;min-width:92px;padding:12px 8px;border:1px solid #2c394d;border-radius:8px;background:#101722;color:#d9e2f2}.knob-control span,.knob-control strong{text-align:center}.knob-control strong{color:#5eead4;font-size:.82rem;font-variant-numeric:tabular-nums}.knob-control input[type=range]{width:62px;height:62px;border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:radial-gradient(circle at center,#172232 0 45%,transparent 47%),conic-gradient(#5eead4 0 var(--knob-value),#35445a var(--knob-value) 100%);cursor:pointer}.knob-control input[type=range]::-webkit-slider-thumb{width:14px;height:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 4px #f59e0b2e}.knob-control input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#f59e0b}select{min-height:38px;border:1px solid #3b485d;border-radius:8px;background:#101722;color:#f7f8fb;padding:0 10px}input[type=search]{min-height:38px;border:1px solid #3b485d;border-radius:8px;background:#101722;color:#f7f8fb;padding:0 12px}.waveform-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.waveform-row label,.select-row{grid-template-columns:1fr;gap:8px}.filter-row{display:grid;grid-template-columns:minmax(150px,1.4fr) 1fr 1fr;gap:12px}.filter-row>label{grid-template-columns:1fr;gap:8px;padding:12px;border:1px solid #2c394d;border-radius:8px;background:#101722}.envelope-editor{display:grid;gap:10px}.envelope-editor svg{width:100%;min-height:150px;border:1px solid #2c394d;border-radius:8px;background:linear-gradient(rgba(94,234,212,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(94,234,212,.08) 1px,transparent 1px),#101722;background-size:36px 36px;touch-action:none}.envelope-editor polyline{fill:none;stroke:#5eead4;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.envelope-editor circle{fill:#f59e0b;stroke:#101722;stroke-width:3;cursor:grab}.envelope-values{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;color:#c8d0df;font-size:.86rem}.envelope-values span{padding:8px;border:1px solid #2c394d;border-radius:8px;background:#101722;text-align:center}.preset-panel{grid-column:1 / -1}.preset-panel .panel-heading span{color:#5eead4;font-weight:800;text-transform:uppercase}.preset-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,220px);gap:12px}.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;max-height:520px;overflow:auto;padding-right:4px}.preset-card{display:grid;gap:6px;min-height:104px;padding:12px;text-align:left;align-content:start}.preset-card span{color:#5eead4;font-size:.76rem;font-weight:900}.preset-card strong{color:#fff}.preset-card small{color:#9eb0c7;line-height:1.35}.preset-card.active{border-color:#f59e0b;background:#302617}.performance-panel{align-content:start}.pedal-row{display:flex;gap:10px;flex-wrap:wrap}.toggle.active{border-color:#f59e0b;background:#3a2a13;color:#ffd596}.active-readout{display:flex;justify-content:space-between;gap:16px;padding:14px;border:1px solid #2c394d;border-radius:8px;background:#101722;color:#c8d0df}.active-readout strong{color:#fff;font-variant-numeric:tabular-nums}.performance-panel label span{min-width:58px}.keyboard-panel{grid-column:1 / -1;display:grid;grid-template-columns:repeat(13,minmax(54px,1fr));gap:8px;padding:16px;min-height:180px}.piano-key{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:150px;padding:12px 8px;background:#f7f8fb;color:#111827}.piano-key.sharp{min-height:112px;background:#111827;color:#f7f8fb}.piano-key[aria-pressed=true]{border-color:#5eead4;box-shadow:inset 0 -10px #5eead4}.piano-key small{color:#64748b;font-weight:800}.piano-key.sharp small{color:#93a4ba}@media(max-width:840px){.studio-header,.studio-shell{grid-template-columns:1fr}.studio-header{display:grid;align-items:start}label{grid-template-columns:1fr;gap:8px}label span{text-align:left}.keyboard-panel{grid-template-columns:repeat(7,minmax(42px,1fr))}.filter-row,.waveform-row,.preset-toolbar{grid-template-columns:1fr}.envelope-values{grid-template-columns:repeat(2,1fr)}}