@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap);
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}ol{list-style:none;margin:0;padding:0}input{height:0;opacity:0;width:0}button{border:0}h1,p{margin:0}.BeatPickers{align-items:center;display:flex;justify-content:space-between;width:10rem}.BeatPicker{position:relative}.BeatPicker:after,.BeatPicker:before{content:" ";height:calc(50% - 1.5rem);pointer-events:none;position:absolute;width:100%}.BeatPicker:before{background:linear-gradient(180deg,#fff 25%,transparent)}.BeatPicker:after{background:linear-gradient(0deg,#fff 25%,transparent);bottom:0}.BeatPicker__beats{font-size:3.5rem;font-weight:lighter;max-block-size:15rem;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}.BeatPicker__beats::-webkit-scrollbar{display:none}.BeatPicker__item{align-items:center;display:flex;height:3rem;scroll-snap-align:center}.BeatPicker__item:first-of-type{margin-top:6rem}.BeatPicker__item:nth-last-child(2){margin-bottom:6rem}.BeatPicker__dots{font-size:3rem}.BeatPicker__aim{border:.0625rem solid #d1d1d1;border-radius:.375rem;box-sizing:content-box;display:none;height:3rem;left:calc(50% - 1.5rem);position:absolute;top:calc(50% - 1.5rem);width:3rem}.-focus .BeatPicker__aim{display:block}.BeatPicker__aim:after,.BeatPicker__aim:before{background:#fff;content:" ";height:2.5rem;position:absolute;top:.25rem;width:.125rem}.BeatPicker__aim:before{left:-.0625rem}.BeatPicker__aim:after{right:-.0625rem}.BpmKnob-container{display:flex;justify-content:center}.BpmKnob{border:.0625rem solid #151515;height:15.625rem;width:15.625rem}.BpmKnob,.BpmKnob__track{border-radius:50%;position:relative}.BpmKnob__track{height:16.25rem;left:-.3125rem;top:-.3125rem;width:16.25rem}.BpmKnob__track:after{background:#fff;border-radius:inherit;content:"";height:calc(100% - 1.25rem);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - 1.25rem)}.BpmKnob__ball{border-radius:50%;padding:1.25rem;position:absolute;z-index:1}.BpmKnob__text{align-items:center;display:flex;flex-direction:column;font-size:3rem;height:6rem;justify-content:center;left:calc(50% - 3rem);line-height:.8;position:absolute;top:calc(50% - 3rem);width:6rem}.BpmKnob__text span{font-size:2rem}.Canvas-container{padding:0 2.5rem}.Canvas-container canvas{padding:.15625rem}.CanvasPicker{display:flex;justify-content:space-between}.CanvasPicker__button{align-items:center;background:#fff;display:flex;flex-direction:column;font-size:.75rem;height:4rem;justify-content:center;width:4rem}.CanvasPicker__button img{margin-bottom:.5rem}.CanvasPicker__button.-selected span{border-bottom:.125rem solid #151515;margin-bottom:-.125rem}.Chip{border-radius:.375rem;color:#515151;padding:.25rem 1rem}.ControllerPanel{margin:1rem 0}.ControllerPanel__buttons{display:flex;justify-content:space-evenly;margin-bottom:1rem}.ControllerPanel__button{background:#fff;min-width:5rem;padding:.5rem 1rem;text-transform:uppercase}.ControllerPanel__button.-active{border-bottom:.3125rem solid #151515;margin-bottom:-.3125rem}.ControllerPanel__panel{display:none}.ControllerPanel__panel.-show{height:23rem;justify-content:space-evenly}.ControllerPanel__panel.-show,.Logo{align-items:center;display:flex;flex-direction:column}.Logo{font-size:2rem;font-weight:700;justify-content:center;text-transform:uppercase}.Logo span{font-size:1.5rem;position:relative;top:-.625rem}.Modal{display:none;position:absolute}.Modal.-show,.Modal.-show .Modal__overlay{display:block}.Modal__overlay{background:#151515;display:none;height:100vh;opacity:70%;position:absolute;width:100vw}.Modal__content{background:#d62617;border-radius:.375rem;color:#fff;display:flex;flex-direction:column;height:30vh;justify-content:space-between;left:10vw;padding:1.25rem;position:relative;top:35vh;width:80vw}.Modal__message{margin-bottom:1rem}.Modal__message:last-of-type{margin-bottom:0}.Modal__button{align-self:flex-end;background-color:inherit;border:.0625rem solid #fff;border-radius:.375rem;color:#fff;padding:.25rem 1.25rem;text-transform:uppercase}.Mute{background:#fff}.Play{align-items:center;background:#151515;border-radius:50%;display:flex;height:4rem;justify-content:center;justify-self:center;width:4rem}.Play__icon-play,.Play__icon-stop{display:none;width:1.5rem}.Play__icon-play.-show,.Play__icon-stop.-show{display:flex}:root{--color-gray-100:#eee;--color-gray-200:#d1d1d1;--color-black:#151515}body{font-family:Inter,sans-serif}body *{box-sizing:border-box}.app,section{flex-direction:column}.app{display:flex;height:100vh;justify-content:space-between;overflow-y:hidden}header{border-bottom:.0625rem solid #151515;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;box-shadow:0 .0625rem .25rem rgba(0,0,0,.25);margin-bottom:2rem;padding:1rem 1.5rem}section{display:flex;justify-content:center;padding:0 1.5rem}.Footer{display:grid;grid-template-columns:repeat(3,1fr);padding:0 1.5rem 2rem}