.radio-button{display:inline-flex;background-color:hsla(0,0%,100%,.1);border-radius:6px;box-sizing:border-box}.radio-button .radio-button__option{display:inline-block;background-color:rgba(0,0,0,.1);border-radius:20px;border:1px solid #ccc;cursor:pointer;color:#fff}.radio-button .radio-button__option.checked{background-color:rgba(0,0,0,.7)}.radio-button .radio-button__option:hover{background-color:rgba(0,0,0,.5)}.drum-visual{position:relative}.drum-visual svg{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;height:100%}.drum-visual svg *{pointer-events:none}.drum-visual svg [id*=highlight]{pointer-events:fill;cursor:pointer;transition:fill .25s,filter .25s}.drum-visual svg [id*=highlight]:hover{filter:brightness(.7)}.drum-visual svg .hit{transition:fill 0s;fill:#636363}.drum-visual .analog #kick #highlight.hit,.drum-visual .analog [id*=crash] [id*=highlight].hit,.drum-visual .analog [id*=drum] [id*=highlight].hit{fill:#80dbff}.drum-visual .analog [id*=crash] [id*=highlight]{fill:#6e6e6e}.drum-visual .analog [id*=drum] path{fill:#aaa}.drum-visual .analog [id*=drum] [id*=highlight]{fill:#fff}.drum-visual .analog #kick path{fill:#7c7c7c}.drum-visual .analog #kick #highlight{fill:#fff}.drum-visual .latin #kick #highlight.hit,.drum-visual .latin [id*=crash] [id*=highlight].hit,.drum-visual .latin [id*=drum] [id*=highlight].hit{fill:#fe4444}.drum-visual .latin [id*=crash] [id*=highlight]{fill:#77ba38}.drum-visual .latin [id*=drum] path{fill:#8b580c}.drum-visual .latin [id*=drum] [id*=highlight]{fill:#fff7cb}.drum-visual .latin #kick path{fill:#7a3b00}.drum-visual .latin #kick #highlight{fill:#fff7cb}.settings{padding:10px;box-sizing:border-box;width:100%;max-width:600px;margin:0 auto;color:#fff}.settings.disabled{pointer-events:none;opacity:.4}.settings .settings__item{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.settings .settings__item input{width:60%;margin:0;cursor:pointer;opacity:.7}.settings .settings__item input:hover{opacity:1}.settings .magnitude{display:flex;align-items:baseline;justify-content:space-between;color:#fff}.settings .magnitude>span{opacity:.5}.settings .magnitude .bar{position:relative;display:block;height:4px;background-color:hsla(0,0%,100%,.5);width:60%;overflow:hidden}.settings .magnitude .bar span{position:absolute;top:0;left:0;height:100%;background-color:red;opacity:1}.settings .magnitude .bar .mark{width:2px;background-color:#333}.toggle-button{display:inline-block;color:#fff;text-align:center}.toggle-button span{display:inline-block;vertical-align:middle;margin-right:5px}.toggle-button .label:last-of-type,.toggle-button.checked .label:first-of-type{opacity:.5}.toggle-button.checked .label:last-of-type{opacity:1}.toggle-button.checked .toggle:before{left:calc(100% - 24px)}.toggle-button .toggle{position:relative;display:inline-block;width:50px;height:25px;background-color:#fff;border-radius:25px;cursor:pointer}.toggle-button .toggle:hover:before{opacity:1}.toggle-button .toggle:before{content:"";position:absolute;opacity:.5;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background-color:gray;left:4px;transition:opacity .2s,left .2s}.demo-view{display:flex;flex-direction:column}.demo-view .drum-visual{height:100%;width:100%;max-width:600px;margin:20px auto 80px;overflow:hidden}.demo-view .option{position:absolute;bottom:20px;width:100%;z-index:0}.demo-view .option .option-content{margin:0 auto;max-width:600px}.demo-view .option .option-content .radio-button{display:grid;grid-template-columns:1fr 1fr 1fr;text-transform:capitalize;background-color:unset;width:100%;gap:10px}.demo-view .option .option-content .radio-button .radio-button__option{text-align:center;padding:15px 15px;font-size:25px;line-height:1;background-color:#111;transition:background-color .2s}.demo-view .option .option-content .radio-button .radio-button__option.checked,.demo-view .option .option-content .radio-button .radio-button__option.checked:hover,.demo-view .option .option-content .radio-button .radio-button__option:hover{background-color:#333}.data-visual{position:relative}.data-visual .legend{position:absolute;right:5px;top:5px}.data-visual .legend p{display:inline;padding-right:10px;font-size:14px}.data-visual .legend p span{display:inline-block;width:10px;height:10px}.generic-button{padding:6px 20px;border-radius:20px;color:#fff;background-color:hsla(0,0%,62%,.5);cursor:pointer}.generic-button:hover{background-color:#9e9e9e}.data-collection-view{color:#fff;display:flex;flex-direction:column}.data-collection-view .captures{height:100%;overflow-y:hidden;display:flex;flex-direction:column}.data-collection-view .captures .captures__header{padding:10px;box-sizing:border-box}.data-collection-view .captures .captures__header .disabled,.data-collection-view .captures .captures__header.disabled{opacity:.4;cursor:default;pointer-events:none}.data-collection-view .captures .captures__header>*{display:inline-block;margin:0;margin-right:10px}.data-collection-view .captures .captures__header a{color:#d1e1ff;text-decoration:none;border-bottom:2px dotted #d1e1ff;cursor:pointer;opacity:.9}.data-collection-view .captures .captures__header a.disabled{opacity:.4}.data-collection-view .captures .captures__header a:hover{opacity:1;border-bottom:2px solid #d1e1ff}.data-collection-view .captures .captures__records{display:flex;height:100%;overflow-y:hidden}.data-collection-view .captures .captures__records .captures__records__wrapper{height:100%;min-width:300px;flex:1;overflow-y:hidden;background-color:#fff;overflow-y:auto}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__view-toggle{position:relative}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__view-toggle .radio-button__option{background-color:transparent;border:none;color:#333;opacity:.5;border-radius:0;padding:5px 10px 3px}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__view-toggle .radio-button__option.checked{opacity:1;border-bottom:2px solid #333}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__view-toggle .radio-button__option:hover{opacity:.8}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list>*{background-color:#e8e8e8}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list>:nth-child(2n){background-color:#d5d5d5}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item{position:relative;color:#333;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:10px;cursor:pointer;box-sizing:border-box}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item.selected,.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item.selected:hover{background-color:#111;color:#fff}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item.disabled{pointer-events:none;opacity:.5}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item .time{font-size:13px}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item .delete,.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item .filter-capture{position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:transform .2s;cursor:pointer}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item .delete:hover,.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item .filter-capture:hover{transform:translateY(-50%) scale(1.2)}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item .filter-capture:active{color:red}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item:hover{background-color:#cbcbcb}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item.isUnknown .filter-capture{color:red}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item.isUnknown .filter-capture:hover{color:gray}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .captures__records__item .filter-capture{right:40px;line-height:1;color:gray}.data-collection-view .captures .captures__records .captures__records__wrapper .capture__records__list .new-capture-indicator{color:#333;box-sizing:border-box;pointer-events:none;overflow-x:hidden;height:40px}.data-collection-view .captures .captures__records .capture-visual{position:relative;flex:2;height:100%;background-color:#111}.data-collection-view .captures .captures__records .capture-visual h4{position:absolute;top:0;left:0;margin:0;padding:10px 20px 0;font-size:22px}.data-collection-view .captures .captures__records .capture-visual h4 span{font-size:17px;font-weight:400}.data-collection-view .captures .captures__records .capture-visual .data-visual{position:absolute;width:100%;height:100%;top:0;left:0}.device-panel{position:fixed;top:10px;left:0}.device-panel .device-panel-container{position:absolute;z-index:1;top:0;left:0;transform:translateX(calc(-100% + 32px));display:flex;align-items:flex-start;transition:transform .2s}.device-panel .device-panel-container.inView{transform:translateX(0)}.device-panel .device-panel-container.inView .device-panel__entry{box-shadow:3px 1px 2px #000}.device-panel .device-panel-container .device-panel__entry{left:0;transform:translateY(15px);color:#fff;line-height:1;width:30px;height:35px;padding-right:5px;background-color:#0082fc;display:flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;transition:filter .2s}.device-panel .device-panel-container .device-panel__entry:hover{filter:brightness(.8)}.device-panel .device-panel-container .device-panel__entry>*{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.device-panel .device-panel-container .device-panel__entry svg{width:20px}.device-panel .device-panel-container .device-panel__entry span{font-size:15px}.device-panel .device-panel-container .device-panel__content{padding:18px 35px 18px 42px;background-color:#002b53;border-right:3px solid #0082fc}.device-panel .device-panel-container .device-panel__content>*{position:relative;text-align:center;vertical-align:middle;line-height:1;white-space:nowrap;transition:background-color .15s,border .15s}.device-panel .device-panel-container .device-panel__content>:not(:last-child){margin-bottom:10px}.device-panel .device-panel-container .device-panel__content>.connected{position:relative;border:3px solid #0063c0;background-color:#0082fc;box-sizing:border-box}.device-panel .device-panel-container .device-panel__content>.connected:hover{border:3px solid #3e3e3e;background-color:#616161;color:transparent}.device-panel .device-panel-container .device-panel__content>.connected:hover:after{display:block;content:"Disconnect";position:absolute;color:#fff;font-size:20px;font-family:sans-serif;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;line-height:32px}body{font-family:sans-serif;font-size:18px;padding:0;margin:0;background-color:#000;height:100vh;overflow:hidden}.v-enter-active,.v-leave-active{transition:opacity .5s ease}.v-enter-from,.v-leave-to{opacity:0}.drum-web-app{position:relative;max-width:1200px;height:100vh;margin:0 auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column}.drum-web-app .navbar{display:flex;width:100%;color:#fff;justify-content:center;gap:30px;padding:10px;box-sizing:border-box;font-size:21px}.drum-web-app .navbar>*{opacity:.3;cursor:pointer;transition:opacity .2s}.drum-web-app .navbar>.current{opacity:1;cursor:none;pointer-events:none}.drum-web-app .navbar>:hover{opacity:.9}.drum-web-app .view-container{height:100%;overflow-y:hidden}.drum-web-app .view-container>*{width:100%;height:100%;overflow-y:hidden}.drum-web-app .loader{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.95)}.drum-web-app .loader .loader__button{position:absolute;color:#333;font-size:25px;font-weight:700;line-height:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 20px;border-radius:30px;background-color:#fff;cursor:pointer;white-space:nowrap;transition:transform .2s,background-color .2s,color .2s,padding .2s}.drum-web-app .loader .loader__button:hover{transform:translate(-50%,-50%) scale(1.05);background-color:#555;color:#fff;padding:15px 25px}.drum-web-app .loader .loader__visual{position:absolute;color:#fff;top:50%;left:50%;transform:translate(-50%,-50%)}