body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.button-container{background-color:#333;margin:auto;min-height:221px;padding:0 0 30px 60px;position:relative}.bank-sample-btn{background-color:#53b4fdd4;border:none;border-radius:3px;color:#d3d3d3;cursor:grab;margin:15px 10px;padding:0;position:relative;transition:background-color .8s ease}.bank-sample-btn span{background-color:#01587680;font-size:x-small;padding:2px 5px;position:absolute;right:0;top:0}.bank-sample-btn:hover{background-color:#53b4fd;transition:background-color .3s ease}.bank-sample-btn:active{background-color:#53b4fd54;transition:background-color .3s ease}.sample-type{background-color:#01587680;bottom:0;font-size:small;left:0;padding:2px 5px;position:absolute}.remove-sample-btn{background-color:#333;cursor:pointer;height:11px;left:0;position:absolute;top:0;width:7px;z-index:13}.remove-sample-btn.aws{background-color:#58618d;opacity:.8}.remove-sample-btn:after{color:#bbb;content:"\2716";font-size:12px;left:4px;position:absolute;text-align:center;top:0}.recording-item{border-radius:3px;display:flex;height:100%;margin-bottom:10px;padding:10px;position:relative;width:100%}.recording-item,.save-upload-button{align-items:center;justify-content:center}.save-upload-button{background-color:#235176;border:none;border-radius:3px;bottom:0;color:#fff;font-size:x-small;margin:5px;padding:5px 10px;position:absolute;right:0;transition:background-color .3s ease,box-shadow .3s ease,transform .2s ease}.save-upload-container{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.error-message{background-color:#ff000080;color:#fff;font-size:small}.error-message span{font-weight:700}.sample-uploader{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:0;padding:0}input[type=file]{background-color:#53b4fdd4;border:none;border-radius:3px;color:#000;content:"select file";cursor:pointer}input[type=file]::-webkit-file-upload-button{background-color:#53b4fdd4;border:none;border-radius:3px;color:#000;cursor:pointer}input[type=file]::-webkit-file-upload-button:hover{background-color:#53b4fd;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}button.upload-button{align-items:center;background-color:#53b4fd;border:none;border-radius:3px;color:#000;font-size:x-small;justify-content:center;margin:5px;padding:5px 10px;transition:background-color .3s ease,box-shadow .3s ease,transform .2s ease}button.upload-button:hover{box-shadow:0 0 6px #000c;cursor:pointer}.vu-group{left:0;padding-left:25px;padding-top:60px;position:absolute;top:0}.vu-icon{margin:121px 0 0 -7px;position:absolute}.vu-meter{background:#a8a8a8;border-radius:3px;box-shadow:0 1px 3px #0000002e;height:118px;margin:0 auto;width:11px}.vu-meter,.vu-meter-bar{overflow:hidden;position:absolute}.vu-meter-bar{bottom:0;left:0;width:100%}.mic-icon{transition:fill .3s ease}.bank-tabs{margin:0 auto;text-align:center;width:80%}.bank-tabs .tab{background-color:#333;border:1px solid #333;border-bottom:0;border-radius:8px 8px 0 0;color:#fff;line-height:30px;margin:5px 0 0;padding:0 15px;top:0;transition:all .3s ease;vertical-align:bottom}.bank-tabs .tab.selected{border:1px solid #555;border-bottom:none;margin:0;padding:5px 15px;transition:all .3s ease}.record-btn-wrapper{background:none;border:none;cursor:pointer;left:8px;outline:none;position:absolute;top:8px}.track-btn-wrapper{position:absolute}.track-sample-btn{background-color:#53b4fdd4;border:1px solid #000;border-radius:5px;color:#000;height:53px;left:0;margin:0;position:absolute;top:0;white-space:nowrap;width:100%;z-index:11}.remove-track-btn{background-color:#333;height:15px;left:0;position:absolute;top:0;width:15px;z-index:13}.remove-track-btn:after{color:#bbb;content:"\2716";font-size:14px;position:absolute;text-align:center;transform:translate(-6px,-8px)}.track-sample-btn span{background-color:#0000004d;color:#fff;font-size:x-small;height:13px;padding:2px 3px 0 18px;text-align:right;width:calc(100% - 21px)}.track-sample-btn canvas,.track-sample-btn span{left:0;position:absolute;top:0}.knob{display:inline-block;position:relative}.knob-outline{background-color:#53b4fdd4;border:2px solid #000;border-radius:50%;box-sizing:border-box;height:100%;width:100%}.knob-indicator{background:#000;height:50%;left:50%;position:absolute;top:0;transform-origin:bottom center;width:2px}.knob input[type=range]{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.knob-label{text-wrap:nowrap;font-size:.5rem;padding-bottom:3px;width:100%}.track-container{display:flex;flex-direction:column;width:100%}.track-row{height:53px;margin:0 auto;width:93vw}.track-row,.track-toggle-btn{align-items:center;display:flex}.track-toggle-btn{background:none;border:none;color:#ccc;cursor:pointer;font-size:1rem;justify-content:center;opacity:.5;transition:all .8s ease;width:40px}.track-toggle-btn:hover{color:#fff}.track-toggle-btn.active{opacity:1;transition:all .8s ease}.drop-zone{align-items:center;background-color:#d3d3d3;border:1px solid #000;border-radius:5px;display:flex;font-weight:700;height:53px;justify-content:center;margin:0 auto;position:relative;width:93vw}.track-name{color:#838185;left:8px;position:absolute}.track.drop-zone.track--selected>span{color:#000;font-weight:700}.track--selected{background-color:#fff;border:1px solid #ffffff1a;height:140px}.beat-line{background-color:#0003;bottom:0;pointer-events:none;position:absolute;top:0;width:2px}.track{color:#fff;flex:1 1;height:53px;position:relative;width:88vw}.track,.track-control{font-size:.875rem;margin:0 auto;overflow:hidden;padding:0 12px;transition:height .8s ease}.track-control{background:hsla(0,0%,100%,.334);border-radius:5px;color:#ccc;height:0;width:81vw}.track-control.expanded{height:210px;padding-top:8px}.track-control p{transition:opacity .4s ease}.track-control-panel{align-items:flex-end;display:flex;gap:12px;justify-content:center}.control-item{align-items:center;display:flex;flex-direction:column}.control-item label{font-size:.5rem;margin-top:4px;text-transform:uppercase}.knob-strip{-webkit-user-select:none;user-select:none;width:20px}.slider-strip{align-items:center;color:#fff;display:flex;flex-direction:column;font-size:.75rem;gap:8px;width:20px}.vertical-slider{-webkit-appearance:none;appearance:none;background:#0000;cursor:pointer;transform:rotate(180deg);width:24px;writing-mode:vertical-lr}.vertical-slider::-webkit-slider-runnable-track{background:#ffb6b6cc;border-radius:2px;height:100%;margin:0 auto;width:4px}.vertical-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#3ea6ff;border:none;border-radius:50%;box-shadow:0 0 4px #000;height:18px;left:50%;margin-top:-7px;position:relative;transform:translateX(-50%);-webkit-transition:box-shadow .2s ease;transition:box-shadow .2s ease;width:18px;z-index:1}.vertical-slider:active::-webkit-slider-thumb{border:1px solid #000;box-shadow:0 0 10px #000}.vertical-slider::-moz-range-track{background:#ffb6b6cc;border-radius:2px;height:100%;width:4px}.vertical-slider::-moz-range-thumb{background:#3ea6ff;border:none;border-radius:50%;box-shadow:0 0 4px #000;height:18px;-moz-transition:box-shadow .2s ease;transition:box-shadow .2s ease;width:18px}.vertical-slider:active::-moz-range-thumb{box-shadow:0 0 10px #000}.bypass-toggle{font-size:.875rem;line-height:.7;padding:0}.track-toggle-icon{background-color:#3ea6ff;color:#fff;display:flex;transition:background-color .3s ease,transform .2s ease;width:20px}.track-toggle-icon:hover{background-color:#60bfff;transform:scale(1.3)}.track-toggle-icon.active{background-color:#000;transform:scale(1.1)}.track-toggle-icon.active:hover{background-color:#000;transform:scale(.8)}.bpm-slider{display:block;margin:10px auto}.track-sample-listing{border:1px solid #555;color:#bbb;font-size:x-small;height:24px;line-height:5px;overflow-y:scroll;position:absolute;right:0;scrollbar-color:#333;text-align:left;top:0;transition:height .3s ease;width:300px;z-index:13}.track-sample-listing.selected{height:240px;transition:height .3s ease}.track-status{color:#fff;display:block;margin:10px auto 0;text-align:left;width:80%}.track-status span{margin:0 20px}.button-group{margin:20px auto;text-align:center;width:80%}.waveform-preview-wrapper{background:#0e1122;border-radius:8px;margin-top:1rem;padding:1rem}.control-panel{background-color:#2c2c2c;border-radius:8px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;margin:0 auto 1rem;padding:0 1rem;width:90%}.control-buttons{gap:8px}.beats-selector,.control-buttons{align-items:center;display:flex;justify-content:center}.beats-selector,button.lc{color:#fff}button.lc{align-items:center;border:none;border-radius:50%;display:flex;height:40px;justify-content:center;margin:0;min-height:40px;min-width:40px;padding:0;transition:background-color .3s ease,box-shadow .3s ease,transform .2s ease;width:40px}button.lc:hover{box-shadow:0 0 6px #000c;cursor:pointer}button.play-button{background-color:#0a0;transform:rotate(180deg)}button.play-button:hover{background-color:#0f0}button.stop-button{background-color:#852020}button.stop-button:hover{background-color:#ff3d3d}button.clear-button{background-color:#6e6e6e}button.clear-button:hover{background-color:red;box-shadow:0 0 6px #fffc}button.save-button{background-color:#1976d2}button.save-button:hover{background-color:#3ea6ff}button.save-button:disabled{background-color:grey;box-shadow:none;color:#3b3b3b;pointer-events:none}button.load-button{background-color:#1976d2}button.load-button:hover{background-color:#3ea6ff}button.delete-button{background-color:#d32f2f}button.delete-button:hover{background-color:#ff3d3d;box-shadow:0 0 6px #fffc}button.lc svg{height:32px;width:32px}.tooltip-wrapper{display:inline-block;position:relative}.tooltip-text{background-color:#b3b3b3;border-radius:4px;bottom:120%;color:#000;font-size:.75rem;left:50%;opacity:0;padding:4px 8px;position:absolute;transform:translateY(10px) rotateX(-90deg);transform:translateX(-50%) translateY(10px) rotateX(-90deg);transform-origin:bottom center;transition:opacity .3s ease,transform .4s ease;visibility:hidden;white-space:nowrap;z-index:10}.tooltip-wrapper:hover .tooltip-text{opacity:1;transform:translateX(-50%) translateY(0) rotateX(0deg);visibility:visible}.tooltip-text:after{border:5px solid #0000;border-top-color:#b3b3b3;content:"";left:50%;margin-left:-5px;position:absolute;top:100%}select#beats-select{-webkit-appearance:none;appearance:none;background-color:#1e1e1e;border:1px solid #444;border-radius:4px;color:#fff;font-size:1rem;margin-right:3rem;padding:.3rem .6rem;transition:border-color .2s,background-color .2s}select#beats-select:focus,select#beats-select:hover{border-color:#888;outline:none}.bpm-slider{color:#1976d2;margin:2rem 1rem 0 0;width:30%}.bpm-slider.MuiSlider-root{margin:2rem 0 0;width:30%}.bpm-slider .MuiSlider-thumb{background-color:#1976d2;border:2px solid #fff;height:16px;width:16px}.bpm-slider .MuiSlider-track{background-color:#1976d2;height:4px}.bpm-slider .MuiSlider-rail{background-color:#b0b0b0;height:4px;opacity:.5}.bpm-slider .MuiSlider-valueLabel{background-color:#1976d2;border-radius:4px;color:#fff;font-size:.75rem;padding:2px 6px}.loop-stats-container{color:#fff;font-family:sans-serif;margin:auto;position:relative;width:-webkit-fit-content;width:fit-content}.loop-stats-header{background-color:#222;border-radius:4px;cursor:pointer;padding:6px 12px;text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}.loop-stats-header:hover{background-color:#000}.loop-stats-drawer{background-color:#1a1a1a;border-radius:4px;max-height:0;min-width:210px;opacity:0;overflow:hidden;padding:0 12px;position:absolute;right:0;transition:max-height .4s ease,opacity .3s ease;z-index:18}.loop-stats-drawer p{text-wrap:nowrap;color:#ccc;font-size:.8rem;line-height:.6rem;margin:0;padding:4px 0;text-align:left;white-space:nowrap}.loop-stats-drawer.open{max-height:300px;opacity:1;padding:8px 12px}.App{height:100vh;text-align:center}h1{color:grey;margin:8px auto}.app-icon{filter:invert(100%) brightness(80%) contrast(80%);height:28px;margin-left:3px;transform:scaleX(-1);vertical-align:bottom;width:28px}.track-add-remove{padding-left:8%;text-align:left}.track-add-remove button{font-size:1.5rem}.version{color:#b5b5ff;font-size:.5rem;left:56%;position:absolute;top:0}