#root{max-width:1280px;margin:0 auto;margin-top:2rem;text-align:center;display:flex;flex-direction:column;position:relative}.metronome__outer-container{margin:0 auto}.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-bottom:2rem}.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}.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%)}.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: 563px){.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}.grid-container__clock-arm.running{animation:var(--tempo) linear infinite rotate}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.grid-container .dot{position:absolute;top:47%;left:46.8%;width:25px;height:25px;background-color:var(--pink-purple);transition:all .1s linear;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 .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 .dot{position:absolute;top:48%;left:47.8%;width:15px;height:15px;transition:all .1s linear;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)))}@media (max-width: 563px){.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 .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.small{width:270px!important;height:270px!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)))}.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;left:-4px}.bpm-spinner__rotary>.circle{padding-bottom:45%!important;left:118px!important}.bpm-spinner__rotary>.circle.small{height:42%}.metronome__inner-container{height:325px}}.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) ease-in 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: 563px){.note-container{top:42px}.note-container svg.note-svg{max-width:25px;max-height:25px}}.dropdown-container{width:fit-content;text-align:left}.dropdown-container div{font-weight:600}.dropdown-label-container span{max-height:20px;max-width:15px}select,::picker(select){appearance:base-select}select{min-width:100px;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: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:"✔️"}.range-container{text-align:left;font-weight:600}.range-container .range{min-height:33px;background:#24242480;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}.toggle-container{font-weight:600;text-align:left}.switch{position:relative;display:inline-block;width:70px;height:45px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#24242480;-webkit-transition:.4s;transition:.4s}.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}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%}:root{font-family:system-ui,Avenir,Helvetica,Arial,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;--pink-purple: #f821ad;--dark-gray: #393439ff;--light-purple: #9045e6ff;--white: #fff}body{display:flex}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}button:hover{border-color:var(--pink-purple)}button:focus,button:focus-visible{outline:4px auto var(--pink-purple)}