.knob-wrapper{display:flex;flex-direction:column;align-items:center}.knob-svg{width:70px;height:70px;flex-shrink:0;touch-action:none}.knob-svg:active{cursor:grabbing}.knob-label{font-size:10px;font-weight:500;color:#fff;text-transform:uppercase;white-space:nowrap;letter-spacing:.4px;text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;line-height:1}:root{--spread-factor: .05;--black-key-offset: .62;--black-key-width-factor: .785}.piano-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;padding-bottom:3px}.piano-scroll::-webkit-scrollbar{display:none}.piano-scroll{scrollbar-width:none}.piano{display:flex;width:100%;position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.key{display:flex;align-items:flex-end;justify-content:center;cursor:pointer;border-top:1px solid rgba(32,32,32,.2);border-right:1px solid rgba(32,32,32,.3);border-bottom:1px solid rgba(32,32,32,.3);border-radius:0 0 5px 5px;box-shadow:0 5px 1px #20202033;font-family:Open Sans,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.key:not(.black-key){position:relative;flex:1 1 0;min-width:0;height:130px;background:#fff;box-sizing:border-box}.key *{-webkit-user-select:none;user-select:none;pointer-events:none}.black-key{position:absolute;top:0;left:calc((100% / var(--white-keys)) * var(--index) + (100% / var(--white-keys)) * var(--black-key-offset));width:calc(100% / var(--white-keys) * var(--black-key-width-factor));height:70px;background:#000;border-radius:0 0 4px 4px;margin:0;z-index:5;box-sizing:border-box;pointer-events:auto;color:#fff;transition:background-color .05s,transform .05s}.black-key[data-pos=left]{left:calc((100% / var(--white-keys)) * var(--index) + (100% / var(--white-keys)) * (var(--black-key-offset) - var(--spread-factor)))}.black-key[data-pos=right]{left:calc((100% / var(--white-keys)) * var(--index) + (100% / var(--white-keys)) * (var(--black-key-offset) + var(--spread-factor)))}.key.active{background:linear-gradient(#f2f2f2,#e0e0e0);transform:translateY(3px);box-shadow:0 1px #20202033;animation:key-press 60ms ease-out}.black-key.active{background:#1a1a1a;transform:translateY(3px);box-shadow:0 2px #0009;animation:key-press 60ms ease-out}.key-shortcut{color:#0000008a}.black-key .key-shortcut{color:#fff}.black-key .key-label{display:flex;flex-direction:column;align-items:center;font-weight:600;color:#fff;font-size:14px;text-align:center;line-height:1}.key-content-bottom{display:flex;align-items:center;justify-content:center;margin-bottom:10px}.key .key-marked{position:absolute;bottom:11px;background-color:#72ac51;box-shadow:inset -1px -3px 4px #2020204d;width:20px;height:20px;border-radius:50%;pointer-events:none}@keyframes key-press{0%{filter:brightness(1)}40%{filter:brightness(.92)}to{filter:brightness(1)}}@media(max-width:766px){.piano{min-width:750px}.piano-scroll{overscroll-behavior-x:contain}.key:not(.black-key){height:180px}.black-key{height:60%}}.controls{display:flex;align-items:center;max-width:750px;padding-top:14px;padding-bottom:22px}.controls button{font-family:Open Sans,sans-serif;font-size:14px;background:#f8f8f8;border-radius:4px;border:1px solid #eee;color:#000;transition:.25s ease;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;margin-right:8px;padding:8px 14px;height:37px}.controls button.active{background-color:#e4e4e4;border-color:#dadada}.controls button:hover{border-color:#dadada;box-shadow:0 5px 10px #0003}.controls button:focus,.controls button:focus-visible{outline:none;box-shadow:none}.drop-down *{box-sizing:border-box;-webkit-user-select:none;user-select:none}.drop-down{position:relative}.drop-down ul{min-width:90px;max-height:294px;position:absolute;display:none;z-index:11;left:1px;padding-bottom:0;background-color:#fff;border-radius:4px;box-shadow:0 8px 16px #0003}.drop-down ul.drop-down-scales{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.drop-down ul.drop-down-scales::-webkit-scrollbar{-webkit-appearance:none;width:12px}.drop-down ul.drop-down-scales::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;border:2px solid #ffffff}.drop-down ul.drop-down-scales::-webkit-scrollbar-track{border-radius:10px;background:transparent}.drop-down ul.active{display:block}.drop-down ul li:first-child{border-radius:4px 4px 0 0}.drop-down ul li:last-child{border-radius:0 0 4px 4px}.drop-down ul li{font-size:13px;font-family:Open Sans,sans-serif;padding:10px 14px;cursor:pointer;text-align:left;white-space:nowrap}.drop-down ul li.active{background-color:#eee}.drop-down ul li:hover{background-color:#e4e4e4;transition:all .25s ease}.switch{position:relative;display:inline-block;width:56px;height:28px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#72ac51}input:focus+.slider{box-shadow:0 0 1px #72ac51}input:checked+.slider:before{transform:translate(28px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.modal-title{display:flex;align-items:center;justify-content:space-between;font-weight:600;color:#4e5056;height:60px;padding:0 20px;border-bottom:1px solid #eee;background-color:#f8f8f8;border-top-left-radius:4px;border-top-right-radius:4px}.modal-title svg{width:24px;height:24px;opacity:.8;transition:opacity .3s ease,transform .3s ease}.modal-title svg:hover{opacity:1;cursor:pointer;transition:opacity .3s ease,transform .3s ease}.modal-title span{cursor:pointer;display:inline-block}.modal-title svg{transform:translateY(1px)}.modal-section{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;border-bottom:1px solid #eee;-webkit-user-select:none;user-select:none}.modal-section:last-child{border-bottom:none}.modal-text{color:#4e5056;font-size:1em;font-weight:600;line-height:1.4}.modal-section .slider-container{position:relative;top:2px;display:flex;align-items:center;justify-content:space-around;padding:0 5px;gap:12px}.slider-value{min-width:5ch;text-align:center;font-variant-numeric:tabular-nums}.range{-webkit-appearance:none;appearance:none;width:180px;height:var(--slider-thumb-size, 23px);background:transparent;--min: 0;--max: 100;--value: 0;--fill: calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%);--slider-color: #72ac51;--slider-track: #e5e7eb;--slider-height: 13px;--slider-thumb-size: 23px;--slider-thumb-border: #ffffff}.range::-webkit-slider-runnable-track{height:var(--slider-height);border-radius:999px;background:linear-gradient(var(--slider-color) 0 0) 0 / var(--fill) 100% no-repeat,var(--slider-track)}.range::-webkit-slider-thumb{-webkit-appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:50%;background:var(--slider-color);border:2px solid var(--slider-thumb-border);margin-top:calc((var(--slider-height) - var(--slider-thumb-size)) / 2);box-shadow:0 0 0 2px #0000000d;cursor:pointer}.range::-moz-range-track{height:var(--slider-height);border-radius:999px;background:var(--slider-track)}.range::-moz-range-progress{height:var(--slider-height);border-radius:999px;background:var(--slider-color)}.range::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:50%;background:var(--slider-color);border:2px solid var(--slider-thumb-border);box-shadow:0 0 0 2px #0000000d;cursor:pointer}.range:focus{outline:none}.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #3b82f64d}.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #3b82f64d}.record-button{display:flex;align-items:center;gap:6px;position:relative}.recording-live{display:inline-flex;align-items:center;gap:.4em;font-variant-numeric:tabular-nums}.recording-elapsed{min-width:3ch;text-align:left}.recording-error{background:#ffebee;color:#c62828;padding:8px;border-radius:3px;margin-bottom:8px;font-size:12px}.recording-playing-indicator{animation:recording-pulse 1.5s infinite}@keyframes recording-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.synth-layout{display:grid;background:#292728;grid-row-gap:10px;padding:10px 10px 7px;border-radius:5px}.effects-container{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,110px);grid-column-gap:10px;grid-row-gap:10px}.effects-container>div{position:relative;border-radius:6px;background-color:#6a6d6d}.box-label{position:absolute;height:18px;top:0;left:10px;font-size:12px;color:#fff;pointer-events:none;line-height:1.2;background-color:#292728;padding:2px 6px;border-radius:0 0 5px 5px;-webkit-user-select:none;user-select:none}.box1{grid-area:1 / 1 / 3 / 3}.box2{grid-area:1 / 3 / 3 / 4}.box3{grid-area:1 / 4 / 3 / 5}.box4{grid-area:1 / 5 / 3 / 7}.box5{grid-area:3 / 1 / 4 / 5}.box6{grid-area:3 / 5 / 4 / 7}.box5-header{position:absolute;top:0;left:10px;display:flex;gap:6px;align-items:flex-start;pointer-events:none}.box5-label{height:18px;font-size:12px;color:#fff;pointer-events:none;line-height:1.2;background-color:#292728;padding:2px 6px;border-radius:0 0 5px 5px;-webkit-user-select:none;user-select:none}.box5-wave-indicator{display:flex;align-items:center;background-color:#292728;padding:3px 6px 4px;border-radius:0 0 5px 5px}.box5-wave-svg{width:64px;height:11px;display:block}.box1-knobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto);column-gap:4px;row-gap:20px;padding:24px 8px 8px;height:100%;box-sizing:border-box;align-content:center;align-items:center;justify-items:center}.box2-knobs,.box3-knobs{display:flex;flex-direction:column;gap:20px;padding:24px 8px 8px;height:100%;box-sizing:border-box;align-items:center;justify-content:center}.box4-knobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto);column-gap:4px;row-gap:20px;padding:24px 8px 8px;height:100%;box-sizing:border-box;align-content:center;align-items:center;justify-items:center}.box5-knobs{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 8px 8px;height:100%;box-sizing:border-box;align-items:center;justify-content:center}.box6-knobs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:20px 8px 8px;height:100%;box-sizing:border-box;align-items:center;justify-content:center}@media(max-width:639px){.effects-container{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(110px,auto))}.effects-container>div{width:100%;height:100%}.box1{grid-area:1 / 1 / 2 / 2}.box2{grid-area:1 / 2 / 2 / 3}.box3{grid-area:1 / 3 / 2 / 4}.box5{grid-area:2 / 1 / 3 / 4}.box4{grid-area:3 / 1 / 4 / 3}.box6{grid-area:3 / 3 / 4 / 4}.box6-knobs{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr)}}@media(max-width:550px){.effects-container{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(110px,auto))}.box1{grid-area:1 / 1 / 2 / 3}.box2{grid-area:2 / 1 / 3 / 2}.box3{grid-area:2 / 2 / 3 / 3}.box4{grid-area:3 / 1 / 4 / 3}.box5{grid-area:4 / 1 / 5 / 3}.box6{grid-area:5 / 1 / 6 / 3}.box1-knobs{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr;row-gap:0;column-gap:4px}.box2-knobs,.box3-knobs{flex-direction:row;gap:0;justify-content:space-around;width:100%}.box4-knobs{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;gap:4px}.box6-knobs{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr}}