.flare{width:500px;height:500px;background:radial-gradient(circle,rgb(236,24,137) 0%,transparent 70%);opacity:.2;position:absolute;z-index:-1}.dropdown-container{width:fit-content;text-align:left}.dropdown-container div{font-weight:600}.dropdown{width:fit-content;text-align:left}.dropdown.full{width:100%}.dropdown>select:disabled{opacity:.4;cursor:not-allowed}.dropdown-label-container span{max-height:20px;max-width:15px}select,::picker(select){appearance:base-select}select{border:none;background:#24242480;padding:10px 15px;transition:.4s;cursor:pointer;display:flex;justify-content:space-between;height:45px;color:#fff;font-size:14px}select.small{min-width:50px;height:40px;padding:10px}select.small::picker-icon{margin-left:0rem}select.medium{min-width:100px}select.full{width:100%}select:hover,select:focus{background:#242424}select::picker-icon{content:"‸";font-weight:900;position:relative;top:7px;rotate:180deg;margin-left:1rem}::picker(select){border:none;border-radius:5px;margin:3px 0;padding:1rem}option:nth-of-type(odd){background:#24242480}option{border-radius:5px;margin-bottom:5px}option:hover,option:focus{background:#f821ad;color:#000}option::checkmark{content:"✔️"}#appContainer{align-items:center;max-width:1280px;margin:0 auto;text-align:center;display:flex;flex-direction:column;position:relative;overflow:hidden}header{width:100vw;border-bottom:1px solid var(--light-black)}header .header__container{padding:.3rem 1rem;display:flex;justify-content:space-between}header section{justify-content:center;align-items:center}header .back-navigation{font-weight:bolder}.mobile-menu-button{display:none}.builder-actions{display:flex;gap:.25rem}@media(max-width:768px){.mobile-menu-button{display:inline-flex}.builder-actions{display:none;flex-direction:column;position:absolute;top:60px;right:1rem;background:var(--medium-black);border:1px solid #2e2e2e;border-radius:.75rem;padding:1rem;z-index:200}.builder-actions button{justify-content:start}.builder-actions.open{display:flex}}.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;width:550px;min-width:350px;max-width:50%;background:var(--medium-black);border:1px solid #2e2e2e;border-radius:.75rem;padding:2rem;border:1px solid var(--pink-purple);animation:backdrop-in .14s ease-out forwards}.modal-backdrop{position:fixed;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#000000b3}.modal-header h3{margin-bottom:.5rem}.modal-close{position:absolute;top:0;right:15px;font-size:24px;cursor:pointer}.modal-footer{margin-top:2rem}footer{margin-top:4rem;padding:2rem;display:flex;justify-content:center;font-size:12px}.badge{border-radius:20px;background-color:#321221;color:var(--pink-purple);padding:.25rem 2rem;border:1px solid var(--pink-purple);font-size:12px;align-items:center}.badge span svg{width:18px}.big-button{border-radius:.75rem;background-color:var(--light-gray);border:1px solid var(--light-black);max-width:36rem;width:100%;align-items:center;cursor:pointer;transition:all .2s ease}.big-button .big-button__container{padding:1.75rem}.big-button .left{background-color:var(--light-black);padding:1rem;border-radius:.75rem;display:flex;align-items:center;max-height:30px}.big-button .right{text-align:left}.big-button:hover{transform:translate(2px,2px);border:1px solid var(--pink-purple);opacity:.9;box-shadow:0 0 20px 1px #f821ada6}.big-button:hover .left{background-color:#28161e}.big-button:hover .left svg{stroke:var(--pink-purple)}.big-button:active{transform:translate(4px,4px)}.home__container{width:100%;position:relative}.home__container .home__container__top{border-bottom:1px solid var(--light-black);padding:1rem 0 2rem}section.home__header h1{font-size:48px}section.home__header h1 span{color:var(--pink-purple)}.home__navigation{display:flex;margin:1rem;flex-direction:column;align-items:center}#root{margin:0 auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none}input[type=color],input[type=date],input[type=datetime],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select:focus,textarea{font-size:16px}.metronome__outer-container{margin:0 auto;padding-top:2rem}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.spinner-container{display:flex;justify-content:center;margin-top:1.5rem}svg.note-svg{max-width:40px;max-height:40px}svg.note-svg path{fill:#fff!important;stroke:#fff!important}.settings-toggle-row{display:flex;justify-content:center;gap:2rem;margin:1rem 0 .5rem}.settings-row{display:flex;justify-content:center;align-items:flex-end;gap:1rem;flex-direction:row;margin-bottom:1rem}.polyrhythm-container{width:100%;display:flex;justify-content:center}button.active{outline:2px auto #f821ad}button.inactive{color:#666}button.wide{padding:1rem 6rem}button.full{width:100%}button.outline{outline:1px solid #f821ad}button:disabled{cursor:not-allowed;color:#666!important;background-color:inherit!important}button.filled{background-color:var(--pink-purple);color:#fff}button.filled:hover{background-color:inherit;color:var(--pink-purple)}button.small{padding:.3 .9rem;font-size:.8rem}.polyrhythm-header-container{display:flex;justify-content:center;align-items:center;gap:2rem;margin-bottom:1rem;margin-top:2rem}.polyrhtyhm-beatcount-container{display:flex}.absolute-note-container{position:absolute;border-radius:5px;padding:5px;top:-45px;left:50%;transform:translate(-50%,-50%)}.flex{display:flex}.flex-1{flex:1}.flex-col{flex-direction:column}.f-gap1{gap:.25rem}.f-gap2{gap:.5rem}.f-gap3{gap:.75rem}.f-gap4{gap:1rem}.f-gap8{gap:2rem}.justify-center{justify-content:center}.space-between{justify-content:space-between}.justify-end{justify-content:end}.width-100{width:100%}.flex-dir-col{flex-direction:column}.align-center{align-items:center}.font-weight-bold{font-weight:700}.font-size-12{font-size:12px}.font-size-13{font-size:13px}.font-size-14{font-size:14px}.font-size-15{font-size:15px}.font-size-16{font-size:16px}.text-left{text-align:left}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.font-weight-600{font-weight:600}.indented{border-left:2px solid var(--pink-purple);padding-left:1rem}.text-light{opacity:.75}.color-extra-light-gray{color:var(--extra-light-gray)}.color-pink-purple{color:var(--pink-purple)}.bg-pink-purple{background-color:var(--pink-purple)!important}.metronome{--width-lg: 390px;--height-lg: 390px;--width-sm: 320px;--height-sm: 320px;--z: 10;position:relative;width:var(--width-lg);height:var(--height-lg)}.metronome .metronome__inner-container{display:flex;justify-content:center;align-items:center;height:var(--height-lg)}@media(max-width:1500px){.metronome{width:var(--width-sm)!important;height:var(--height-sm)!important}.metronome .metronome__inner-container{height:var(--height-sm)!important}}.grid-container{display:flex;justify-content:center;width:var(--width-lg);height:var(--height-lg);border-radius:50%;border:3px solid var(--light-black);position:relative;z-index:5;position:absolute;pointer-events:none}.grid-container__clock-arm{width:3px;height:50%;background:var(--pink-purple);transform-origin:bottom center;position:absolute;z-index:3;top:0;will-change:transform}.grid-container__clock-arm.running{animation:var(--tempo) linear infinite rotate}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.grid-container.ghost .dot{border:4px solid var(--muted-light-purple);background-color:transparent;left:45.6%;top:46%}.grid-container .dot{position:absolute;top:47%;left:46.8%;width:25px;height:25px;background-color:var(--pink-purple);border-radius:50%;transform:rotate(calc(360deg / var(--beats) * var(--i) - 90deg)) translate(199px) rotate(calc(-360deg / var(--beats) * var(--i)));transform-origin:center;z-index:6;pointer-events:auto}.grid-container .dot.off{background-color:var(--dark-gray)!important}.grid-container>.dot.off.active,.grid-container.small>.dot.off.active{background-color:#8b8b8b!important}.grid-container .dot.active:hover,.dot:hover,.grid-container.small>.dot.active:hover{cursor:pointer}.grid-container.ghost>.dot.subdivision{top:48%;left:47.8%;background:transparent}.grid-container .dot.subdivision{width:10px;height:10px;background-color:var(--light-purple);left:48.8%;top:49%;transform:rotate(calc(360deg / var(--beats) * var(--i) - 90deg)) translate(197px) rotate(calc(-360deg / var(--beats) * var(--i)))}.grid-container .dot.active,.grid-container.small .dot.active{background-color:var(--white)!important}.metronome__inner-container .grid-container.small{position:absolute}.grid-container.small{display:flex;justify-content:center;width:350px;height:350px;border-radius:50%;border:3px solid var(--light-black);z-index:5}.grid-container.small.ghost .dot{border:4px solid var(--muted-light-purple);background-color:transparent;left:46.6%;top:46.9%}.grid-container.small .dot{position:absolute;top:48%;left:47.8%;width:15px;height:15px;background-color:var(--pink-purple);border-radius:50%;transform:rotate(calc(360deg / var(--beats) * var(--i) - 90deg)) translate(175px) rotate(calc(-360deg / var(--beats) * var(--i)));transform-origin:center;z-index:8}.grid-container.small .dot.subdivision{width:10px;height:10px;background-color:var(--light-purple);left:49%;top:49%;transform:rotate(calc(360deg / var(--beats) * var(--i) - 90deg)) translate(177px) rotate(calc(-360deg / var(--beats) * var(--i)))}.grid-container.small.ghost .dot.subdivision{left:47.8%!important;background-color:transparent!important;top:48%!important}@media(max-width:1500px){.grid-container{width:320px!important;height:320px!important}.grid-container .dot{left:46%;transform:rotate(calc(360deg / var(--beats) * var(--i) - 90deg)) translate(160px) rotate(calc(-360deg / var(--beats) * var(--i)))}.grid-container.ghost .dot{left:44.7%!important;top:45.7%!important}.grid-container .dot.subdivision{width:10px;height:10px;background-color:var(--light-purple);left:48%;top:48%;transform:rotate(calc(360deg / var(--beats) * var(--i) - 90deg)) translate(162px) rotate(calc(-360deg / var(--beats) * var(--i)))}.grid-container.ghost>.dot.subdivision{left:46.7%!important;top:46.7%!important}.grid-container.small.ghost .dot.subdivsion{left:46.5%!important;top:46.5%!important}.grid-container.small{width:270px!important;height:270px!important}.grid-container.small.ghost div.dot:not(.subdivision){left:45.4%!important;top:46.5%!important}.grid-container.small>.dot{left:47%;transform:rotate(calc(360deg / var(--beats) * var(--i) - 90deg)) translate(135px) rotate(calc(-360deg / var(--beats) * var(--i)))}.grid-container.small .dot.subdivision{background-color:var(--light-purple);left:48%;top:48%;transform:rotate(calc(360deg / var(--beats) * var(--i) - 90deg)) translate(137px) rotate(calc(-360deg / var(--beats) * var(--i)))}.grid-container.small.ghost .dot.subdivision{left:46.5%!important;top:46.5%!important}.bpm-spinner__rotary{width:240px!important;height:240px!important}.bpm-spinner__button{width:150px!important;height:150px!important;top:48%!important}.bpm-spinner__button h4{font-size:28px!important}.bpm-spinner__button h5{font-size:13px!important}.display-container{position:relative;top:-4px}.play-button{width:65px!important;height:65px!important}.play-button svg{position:relative}.bpm-spinner__rotary>.circle{padding-bottom:45%!important;left:118px!important}.bpm-spinner__rotary>.circle.small{height:42%}.metronome__inner-container{height:325px}}.subdivision-modal{width:fit-content;height:fit-content;position:absolute;z-index:20}.bpm-spinner{position:relative;display:flex;justify-content:center;width:fit-content;touch-action:none;z-index:4}.bpm-spinner__rotary{--rotary-width-lg: 340px;--rotary-height-lg: 340px;width:var(--rotary-width-lg);height:var(--rotary-height-lg);position:relative;overflow:hidden;border-radius:50%;cursor:grab;-webkit-user-select:none;user-select:none;background:#000;border:3px solid #242424}.bpm-spinner__rotary.small{width:320px;height:320px}.bpm-spinner__rotary:active{cursor:grabbing}.bpm-spinner__button{position:absolute;width:250px;height:250px;top:48%;left:50%;transform:translate(-50%,-50%);border:4px solid rgba(248,33,173,1);background:#000;border-radius:50%;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;will-change:width,height;flex-direction:column;transition:background-color .3s linear;cursor:pointer}.bpm-spinner__button:active{background-color:#f821ad}.tap-indicator{position:absolute;top:5px;font-size:12px;font-weight:600}.bpm-spinner__button.small{width:230px;height:230px}.bpm-spinner__button.running{animation:var(--tempo) linear infinite alternate pulse}@keyframes pulse{0%{box-shadow:0 0 5px 5px #f821ad}to{box-shadow:0 1px #f821ad1a}}.bpm-spinner__button:active{box-shadow:none}.bpm-spinner__button h4{position:relative;top:10px;font-size:60px;margin:0 10px}.bpm-spinner__button h5{font-size:30px;margin:0}.circle.small{padding-bottom:46%;left:157px;height:44%}.circle{position:absolute;width:1.5%;padding-bottom:50%;z-index:1;top:17px;left:166px;height:40%}.circle div{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(306deg)}.circle:before,.circle div:before{content:"";position:absolute;top:0;left:0;width:100%;padding-bottom:100%;border-radius:100%;background:#f821ad}.play-button svg{width:30px;height:30px;fill:#f821ad}.play-button__container{position:absolute;display:flex;bottom:5px;background:#000;border-radius:50%;width:100px;height:100px;justify-content:center;align-items:center}.play-button{border-radius:50%;width:85px;height:85px}.note-container{position:absolute;top:55px;left:50%;transform:translate(-50%,-50%)}@media(max-width:1500px){.note-container{top:42px}.note-container svg.note-svg{max-width:25px;max-height:25px}}.range-container{text-align:left;width:100%}.range-container .range{min-height:15px;padding:.3rem;display:flex;align-items:center;justify-content:center;border-radius:8px}.range-container input[type=range]{width:100%;cursor:pointer;outline:none;border:none;accent-color:#f821ad}input[type=range]::-webkit-slider-runnable-track{height:5px;background-color:var(--pink-purple);border-radius:999px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;background:#d31eed;border-radius:50%;margin-top:-6px;cursor:pointer}.tabs{max-width:390px;border-radius:.75rem;border:1px solid #2e2e2e;background-color:var(--medium-black);margin-bottom:1rem}.tabs__inner-container{padding:1rem}.tab-list{display:flex;justify-content:space-between}.tab-panel{padding:1rem;min-height:120px}.tab-panel>div{display:flex;flex-wrap:wrap;gap:15px}.tab-button{margin-right:10px;border:none;flex:1}button.tab-button.active{outline:none;border-bottom:3px solid #f821ad;border-radius:0}button.tab-button.active svg path{fill:#f821ad;stroke:#f821ad}button.tab-button:hover{outline:none;border-top:transparent;border-left:transparent;border-right:transparent;border-bottom:3px solid #f821ad;border-radius:0}.tab-button>svg{max-height:30px;width:auto}.tab-button>svg path{fill:#fff;stroke:#fff}.toggle-container{font-weight:600;text-align:left}.switch{position:relative;display:inline-block;width:70px;height:45px}.switch.small{height:20px;width:35px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#24242480;-webkit-transition:.4s;transition:.4s}.switch.small .slider:before{height:15px;width:15px;bottom:3px}.slider:before{position:absolute;content:"";height:30px;width:30px;left:4px;bottom:8px;background-color:#242424;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#f821ad}input:checked+.slider:before{background-color:#f5f5f5}.switch.small input:checked+.slider:before{-webkit-transform:translateX(13px);-ms-transform:translateX(13px);transform:translate(13px)}input:checked+.slider:before{-webkit-transform:translateX(32px);-ms-transform:translateX(32px);transform:translate(32px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.vertical-button{display:flex;flex-direction:column;min-height:100px;width:80px;align-items:center;transition:box-shadow .2s ease;align-self:normal}.vertical-button button{display:flex;flex-direction:column;height:100%;width:100%;border:2px dotted var(--extra-light-gray);color:var(--extra-light-gray)}.vertical-button:hover{box-shadow:0 0 20px 1px #f821ad59}.rhythm-builder-card{min-width:300px;max-width:500px;border-radius:.75rem;border:1px solid #2e2e2e;background:var(--medium-black);min-height:120px;transition:all .2s ease;flex:0 0 auto;padding:1rem;-webkit-user-select:none;user-select:none}.rhythm-builder-card:hover{border:1px solid var(--pink-purple);cursor:pointer;opacity:.9;box-shadow:0 0 20px 1px #f821ad59}.action-row{display:flex;justify-content:space-between;align-items:center;color:var(--pink-purple);font-size:14px}.action-row .drag-container{display:flex;align-items:center}.action-row .drag-container .drag-icon{touch-action:none;cursor:grab;color:var(--extra-light-gray)}.action-row .drag-container .drag-icon:hover{color:var(--pink-purple)}.action-row .trash-icon{color:var(--extra-light-gray)}.action-row .trash-icon:hover{color:var(--pink-purple)}.input-number{border:none;background:#24242480;transition:.4s;cursor:pointer;display:flex;justify-content:space-between;color:#fff;font-size:14px;width:50px;border-radius:.5rem;text-align:center}.input-number:focus-visible{border:1px solid var(--pink-purple);outline:none}.beat-row{display:flex;justify-content:center;gap:.25rem;height:fit-content;align-items:center;width:100%}.beat-row span.beat{background-color:var(--muted-pink-purple);border-radius:.5rem;width:100%;height:35px}.beat-row span.beat.active{background-color:var(--pink-purple)}.beat-row span.beat.subdivided.active{background-color:var(--light-purple)}.beat-row span.beat.subdivided{background-color:var(--muted-light-purple)}.input-text{background:#24242480;padding:5px 15px;transition:.4s;cursor:pointer;display:flex;justify-content:space-between;height:25px;color:#fff;font-size:14px;border-radius:.5rem;border:1px solid transparent}.input-text:focus-visible{border:1px solid var(--pink-purple);outline:none}.builder-header{border-bottom:1px solid var(--light-black);width:100%;min-height:1rem;margin-bottom:.5rem}.builder-header__inner{padding:1rem 2rem}.builder-subheader{width:98%;margin-bottom:1rem}.builder-subheader .sequence-bar-container{display:flex;gap:.25rem;flex-wrap:wrap}.builder-subheader .sequence-bar-container .sequence-bar{max-width:100%;height:30px;border-radius:7px;background:var(--muted-pink-purple);color:var(--pink-purple);display:flex;justify-content:center;align-items:center;font-weight:700;position:relative;min-width:30px;font-size:10px;flex:1}.builder-subheader .sequence-bar-container .sequence-bar .progress{background:var(--muted-pink-purple);height:100%;width:0;position:absolute;left:0;z-index:-1;border-radius:7px}.builder-subheader .sequence-bar-container .sequence-bar .progress.active{animation:animateProgress var(--animationLength) linear infinite}.builder-subheader .sequence-bar-container .sequence-bar.poly{background:var(--muted-light-purple);color:var(--light-purple)}.builder-subheader .sequence-bar-description{display:flex;justify-content:space-between}.builder-card-container{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.builder-card-container .builder-card-inner-container{display:flex;gap:1rem;padding:2rem;align-items:flex-start;width:max-content;min-width:100%}.builder-card-inner-container>*{flex:0 0 auto}@keyframes animateProgress{0%{width:0}to{width:100%}}:root{font-family:Space Grotesk,sans-serif;line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light dark;background-color:#000;--light-black: #242424;--medium-black: #090909;--pink-purple: #f821ad;--light-gray: #141414;--dark-gray: #393439ff;--extra-light-gray: #8b8b8b;--light-purple: #9045e6ff;--white: #fff;--muted-pink-purple: #c21c8884;--muted-light-purple: #7233bb93;--max-width-breakpoint: 1500px}.color-secondary{color:#8c8c8c}.color-purple{color:var(--light-purple)}.color-white{color:var(--white)}body{margin:0;height:100vh}@media(max-width:1500px){body{height:auto!important}}h1,h2,h3,h4,h5,h6,p{margin:.25rem 0}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#090909;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center;gap:.5rem;transition:all .2s ease}button:not(.outline):hover{border-color:var(--pink-purple)}button:active,button:focus-visible{outline:4px auto var(--pink-purple)}hr{border:1px solid var(--muted-pink-purple)}a{color:var(--light-purple);text-decoration:none}table{text-align:left;width:100%;border-collapse:collapse;margin:1rem 0}thead th{border-bottom:1px solid var(--dark-gray);color:var(--extra-light-gray);text-transform:uppercase;font-size:13px;padding:.5rem .5rem .5rem 0}tbody td{padding:.5rem .5rem .5rem 0;font-size:12px;border-top:1px solid var(--dark-gray);color:var(--extra-light-gray);padding:.25rem;cursor:pointer}tbody td:first-child{color:#fff;font-size:13px}tbody tr:hover{background:var(--pink-purple)}tbody tr:hover td{color:#fff}