@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap";:root{--bgColor: #242424;--bgPulseColor1: radial-gradient(circle, rgba(255,95,240,1) 0%, rgba(245,77,177,1) 22%, rgba(156,37,122,1) 77%, rgba(96,38,79,1) 100%);--bgPulseColor2: radial-gradient(circle, rgba(255,237,115,1) 0%, rgba(243,214,74,1) 22%, rgba(185,159,52,1) 77%, rgba(172,150,67,1) 100%);--bgPulseColor3: radial-gradient(circle, rgba(67,255,173,1) 0%, rgba(40,215,124,1) 22%, rgba(38,172,98,1) 77%, rgba(38,136,83,1) 100%);--bgPulseColor4: radial-gradient(circle, rgba(255,186,126,1) 0%, rgba(255,149,88,1) 22%, rgba(203,111,63,1) 77%, rgba(155,89,61,1) 100%);--bgPulseColor5: radial-gradient(circle, rgba(125,181,255,1) 0%, rgba(90,165,255,1) 22%, rgba(46,111,182,1) 77%, rgba(69,110,154,1) 100%);--bgPulseColor6: radial-gradient(circle, rgba(255,145,125,1) 0%, rgba(254,87,85,1) 22%, rgba(173,58,60,1) 77%, rgba(164,57,63,1) 100%)}.trackerContainer{overflow-x:auto;white-space:nowrap;border:0px solid #111;margin:0 2rem 50px;position:relative}.pulseCount{display:flex;width:100%;min-width:650px;justify-content:space-between;background-color:#1a1a1a;padding-top:3px}.pulseCount .pulseNumber{display:flex;width:100%;justify-content:center;font-family:bebas;color:#fb8138}.pulseCount .pulseNumber.on{color:#ffba7e}.tracker{display:flex;min-width:650px;flex-direction:column;border-radius:10px}.track{display:flex;flex-direction:row}.beat{aspect-ratio:1;border-radius:8%;margin:0;display:flex;flex-basis:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-left:1px solid #242424;border-right:1px solid #242424;border-top:2px solid #00000050;border-bottom:2px solid #ffffff30;background:#fff;background:radial-gradient(circle,#ffffff4d,#ffffff26);position:relative}.beat:after{content:"";display:block;position:absolute;top:-2px;left:0;width:100%;height:calc(100% + 4px);background-color:#ffffff50;opacity:0;transition:all linear .1s}.beat.playing{background:#666;transition-duration:.1s}.track .beat.playing:checked:after{opacity:1;transition:all linear .1s}.beat:nth-child(4n+1){background-color:#000}.track:nth-child(6n+1) .beat:checked{background:var(--bgPulseColor1)}.track:nth-child(6n+2) .beat:checked{background:var(--bgPulseColor2)}.track:nth-child(6n+3) .beat:checked{background:var(--bgPulseColor3)}.track:nth-child(6n+4) .beat:checked{background:var(--bgPulseColor4)}.track:nth-child(6n+5) .beat:checked{background:var(--bgPulseColor5)}.track:nth-child(6n+6) .beat:checked{background:var(--bgPulseColor6)}.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-bottom:50px}.bpmControls{display:flex;justify-content:center;border-radius:10px;box-shadow:0 0 5px #000}.playbackControls{display:flex;align-items:center;gap:20px;height:100px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.bpmDisplayBox{position:relative;height:100px}.bpmDisplayBox input{width:200px;padding-right:20px;text-align:right;font-family:digital;font-size:100px;border-radius:10px 0 0 10px;height:100%}.bpmDisplayBox input:focus{outline:0}.bpmDisplayBox input.bpmDisplay{background-color:transparent;border:0px;position:absolute;color:#efa14c}.bpmDisplayBox input.bpmDisplayBg{background-color:#111;border:0px;color:#efa14c15}.bpmAdjust{display:flex;flex-direction:column}.bpmAdjust button{cursor:pointer;display:block;border:0;height:50%;width:50px;background-color:#666;box-shadow:inset 0 0 8px #000;color:#fff}.bpmAdjust button:active{background-color:#5a5a5a;box-shadow:inset 0 0 12px #000}.bpmAdjust button.plus{border-radius:0 10px 0 0}.bpmAdjust button.minus{border-radius:0 0 10px}.controlBtn{width:125px;height:100px;font-family:bebas;display:block;font-size:34px;border-radius:5px;text-transform:uppercase;color:#242424;padding:4px 10px;cursor:pointer}.controlBtn.play{background:radial-gradient(circle,#7dc81b,#5e9812);border:2px solid #7dc81b;box-shadow:0 0 10px #7dc81b50}.controlBtn.play:active{background:#5e9812;box-shadow:inset 0 0 10px #000;border:0}.controlBtn.stop{background:radial-gradient(circle,#fb3838,#981512);border:2px solid #fb3838;box-shadow:0 0 10px #fb383850}.controlBtn.stop:active{background:#981512;box-shadow:inset 0 0 10px #000;border:0}.controlBtn.clear{background:radial-gradient(circle,#fb8138,#c65f16);border:2px solid #fb8138;box-shadow:0 0 10px #fb813850}.controlBtn.clear:active{background:#c65f16;box-shadow:inset 0 0 10px #000;border:0}@keyframes helperAnimation{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}.trackerHelper{position:absolute;width:100%;height:100%;left:0;top:0;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;animation:helperAnimation 3s linear;animation-fill-mode:forwards;--size-multiplier: 2}.trackerScrollIco{width:calc(5em * var(--size-multiplier));height:calc(2em * var(--size-multiplier));border:calc(.25em * var(--size-multiplier)) solid #fb8138;border-radius:calc(40px * var(--size-multiplier));display:flex;align-items:center}@keyframes dotAnimation{0%{transform:translate(calc(3.5em * var(--size-multiplier)))}80%{transform:translate(calc(1em * var(--size-multiplier)));opacity:1}to{transform:translate(calc(1em * var(--size-multiplier)));opacity:0}}.trackerScrollIcoDot{width:calc(.75em * var(--size-multiplier));height:calc(.75em * var(--size-multiplier));background-color:#fb8138;border-radius:50%;animation:dotAnimation 1.5s ease-in-out infinite}.trackerHelperText{font-family:bebas;font-size:2em;color:#fff}@font-face{font-family:digital;src:url(./../fonts/digital7.ttf)}@font-face{font-family:bebas;src:url(./../fonts/bebasneue.ttf)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--header-height: 180px;--footer-height: 30px}body{min-height:100vh;margin:0}#root{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:100vh}.header{height:var(--header-height);display:flex;flex-direction:column;justify-content:center}.header .logo{width:50px}.header h1{font-family:bebas;font-size:75px;line-height:1;margin:0}.header h2{margin:0;font-size:16px;line-height:1.2;font-weight:300}.app{width:100%;max-width:1280px;min-height:calc(100vh - (var(--header-height) + var(--footer-height)))}.footer{height:var(--footer-height);display:flex;justify-content:center;background-color:#333;font-size:12px;width:100%}.footer .footerLinks{display:flex;justify-content:center;align-items:center;gap:20px;list-style:none;margin:0;padding:0}.footer .footerLinks li{display:inline-block}.footer .footerLinks li a{text-decoration:none;color:#ddd;transition:color linear .15s}.footer .footerLinks li a:hover{text-decoration:none;color:#fb8138;transition:color linear .15s}