.mini-piano{left:.4rem;top:.6rem;width:15.5rem;height:2.5rem;position:absolute;cursor:pointer}.mini-piano-white-layer{height:100%;display:flex;position:absolute}.mini-piano-black-layer{display:flex;position:absolute}.mini-piano-white-key{width:.52rem;height:100%;background-color:#fff;border:1px solid black}.mini-piano-black-key{width:.37rem;height:1.5rem;margin-left:.37rem;background-color:#000}.mini-piano-out-of-range-low{position:absolute;top:0;left:0;width:10%;height:100%;background-color:#060a1bcc}.mini-piano-out-of-range-high{position:absolute;top:0;right:0;width:10%;height:100%;background-color:#060a1bcc}.piano-container{left:.4rem;top:5rem;width:98%;position:absolute;display:flex;overflow-y:hidden}.piano-keyblock-third{width:3rem}.piano-keyblock-fourth{width:4rem}.piano-white-layer{display:flex}.piano-white-key{width:1rem;height:6rem;background-color:#fff;border:1px solid black;font-size:.7rem;display:flex;align-items:flex-end;cursor:pointer;-webkit-user-select:none;user-select:none}.piano-white-key.out-of-range{background-color:#343a40}.piano-white-key.last-of-range{background-color:#f90}.piano-black-layer{position:absolute;top:0;display:flex;justify-content:space-between;margin-left:.5rem}.piano-black-layer.third{width:2rem}.piano-black-layer.fourth{width:3rem}.piano-black-layer.final{width:1rem}.piano-black-key{width:.8rem;height:3.5rem;background-color:#000;cursor:pointer}.piano-black-key.last-of-range{background-color:#f90;border:1px solid black}:root{--color-lightest: #fff4e6;--color-light: #ffe8cc;--color-medium: #ffa94d;--color-dark: #ff922b}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh;color:#495057;display:flex;justify-content:center}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1{margin-top:5px;margin-bottom:16px}button{background-color:var(--color-medium);color:#343a40;font-family:inherit;padding:.8rem 1.2rem;margin-right:.8rem;border:none;border-radius:7px;font-weight:700;cursor:pointer;transition:.3s}button:hover{background-color:var(--color-dark)}input{font-family:inherit;color:inherit;font-size:1.5rem;text-align:center;border:1px solid var(--color-light);border-radius:4px;transition:.3s}select{width:15rem;border-radius:7px;min-width:50px;font-family:inherit;font-size:1.3rem;padding:.5rem;text-align:center;border:1px solid var(--color-light);background-color:#3b578a;transition:.3s;cursor:pointer}.direct-midi-panel ul{list-style:none;display:flex;flex-direction:column;gap:.4rem;font-size:1.4rem;margin-bottom:2rem}.direct-midi-panel li{display:flex;height:7rem;width:17rem;position:relative;align-items:center;border-radius:7px;transition:.5s}.direct-midi-panel li:hover{background-color:var(--color-lightest)}.direct-midi-panel li select{position:absolute;left:.4rem;top:3.5rem}input:focus,select:focus{outline:none;border:1px solid var(--color-dark)}.midi-input-selector{position:absolute;border-radius:10px;left:-100%;width:300%;height:220px;background-color:#343a40;z-index:1}.button-panel-close{position:absolute;right:4px;top:4px;font-size:2rem;padding:1px 10px}