@import url(https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap);:root{--color-main:#fff;--color-secondary:#f6f7f8;--color-tertiary:#2e2e3b;--color-primary:#ff0078;--color-border:#2e2e3b;--color-spot:#1ed760;--text-light:#fff;--text-dark:#2e2e3b;--box-shadow:0 10px 20px rgba(0,0,0,.5);--box-shadow-sm:0 10px 20px rgba(0,0,0,.1);--transition-duration:.3s;--border-radius:14px;--border-radius-sm:8px;--color-1:#ff0078;--color-2:#6f34f2;--color-3:#011627;--color-4:#ffbd2c;--color-5:#ff5e59;--color-6:#24cb3c;--color-7:#ff76b6;--color-8:#cbc024;--color-9:#996aff;--color-10:#193a55;--color-11:#b6342f;--color-12:#24b2cb;--color-13:#ff0078;--color-14:#6f34f2;--color-15:#e43a3a;--color-16:#a9f2ff;--color-17:#8a194e;--color-18:#3b1392;--color-19:#19598d}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f6f7f8;background:var(--color-secondary);cursor:pointer}::-webkit-scrollbar-thumb{background-color:#2e2e3b;background-color:var(--color-border);border:1px solid #2e2e3b;border:1px solid var(--color-border);border-radius:14px;border-radius:var(--border-radius);cursor:pointer;min-height:65px}body{-webkit-font-smoothing:antialiased;background-color:#fff;background-color:var(--color-main);font-family:Rubik,sans-serif;font-weight:400;min-height:100vh;padding-bottom:5vh}*,body{margin:0}*{-webkit-tap-highlight-color:transparent;padding:0}.btn{align-items:center;background-color:#011627;background-color:var(--color-3);border:1px solid #2e2e3b;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--border-radius-sm);color:#fff;cursor:pointer;display:flex;gap:8px;justify-content:center;padding:6px 8px;transition-duration:.3s;transition-duration:var(--transition-duration)}.btn:hover{background-color:#2e2e3b;background-color:var(--color-border)}.btn:active{background-color:#011627;background-color:var(--color-3)}.section-container{background-color:#f6f7f8;background-color:var(--color-secondary);border-radius:14px;border-radius:var(--border-radius);padding:8px 8px 0}.btn-icon{align-items:center;border-radius:50%;display:flex;height:35px;justify-content:center;transition-duration:.3s;width:35px}.btn-icon:hover{background-color:#2e2e2e;-webkit-filter:brightness(95%);filter:brightness(95%)}.btn-icon:active svg{fill:#000;color:#000}.btn-icon:active{background-color:#f5f5f5}.spinner svg{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.flex{display:flex}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-no-wrap{flex-wrap:nowrap}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:.1rem}.flex-grow-1{flex-grow:1}.flex-grow-2{flex-grow:2}.flex-grow-3{flex-grow:3}.flex-grow-4{flex-grow:4}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.align-start{align-items:flex-start}.grid{display:grid}.grid-row-auto{grid-row:auto}.grid-col-1{grid-template-columns:repeat(1,1fr)}.grid-col-2{grid-template-columns:repeat(2,1fr)}.grid-col-3{grid-template-columns:repeat(3,1fr)}.grid-col-4{grid-template-columns:repeat(4,1fr)}.grid-col-5{grid-template-columns:repeat(5,1fr)}.grid-col-min-1{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}.grid-col-min-2{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.grid-col-min-3{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.grid-col-min-4{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.grid-col-min-5{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}.grid-col-1-n-2{grid-column:1/-2}.grid-col-gap-1{grid-column-gap:.25rem}.grid-col-gap-2{grid-column-gap:.5rem}.grid-col-gap-3{grid-column-gap:.75rem}.grid-col-gap-4{grid-column-gap:1rem}.grid-row-gap-1{grid-row-gap:.25rem}.grid-row-gap-2{grid-row-gap:.5rem}.grid-row-gap-3{grid-row-gap:.75rem}.grid-row-gap-4{grid-row-gap:1rem}.grid-row-1-1{grid-row:1/1}.grid-row-2-2{grid-row:2/2}.grid-row-3-3{grid-row:3/3}.grid-row-4-4{grid-row:4/4}.grid-row-5-5{grid-row:5/5}.grid-row-1-3{grid-row:1/3}.grid-row-2-4{grid-row:2/4}.grid-row-3-5{grid-row:3/5}.grid-row-4-6{grid-row:4/6}.grid-row-5-7{grid-row:5/7}.grid-row-6-8{grid-row:6/8}.grid-row-7-9{grid-row:7/9}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.user-select-none{-webkit-user-select:none;user-select:none}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.pos-absolute{position:absolute}.pos-relative{position:relative}.pos-fixed{position:fixed}.d-none{display:none}.d-block{display:block}.container{margin:0 auto;padding:0 20px}@media (max-width:1400px){.container{max-width:1320px}}@media (max-width:1200px){.container{max-width:1140px}}@media (max-width:992px){.container{max-width:960px}}@media (max-width:768px){.container{max-width:720px}}@media (max-width:576px){.container{margin:0 auto;max-width:540px}}.form-control{display:flex;flex-direction:column;gap:.5rem}.form-group,.form-groups{display:flex;width:100%}.form-groups{gap:.5rem}.bg-main{background-color:var(--color-main)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-tertiary{background-color:var(--color-tertiary)}.bg-success{background-color:var(--color-success)}.bg-danger{background-color:var(--color-danger)}.bg-info{background-color:var(--color-info)}.border-radius{border-radius:var(--border-radius)}.border-radius-sm{border-radius:var(--border-radius-sm)}.text-wrap{word-wrap:break-word;white-space:pre-wrap}.text-center{text-align:center}.text-end{text-align:end}.text-start{text-align:start}.fs-1{font-size:3rem!important}.fs-2{font-size:1.5rem!important}.fs-3{font-size:1.25rem!important}.fs-4{font-size:1rem!important}.fs-5{font-size:.75rem!important}.fs-6{font-size:.5rem!important}.text-1-line-title{font-size:16px;max-height:18px;overflow:hidden}.text-2-line-title{font-size:16px;max-height:44px;overflow:hidden}.text-hover{border-radius:var(--border-radius);font-weight:500}.text-hover:hover{color:var(--color-primary)}.text-secondary{opacity:.5}.m-0{margin:0!important}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-3{margin:1rem}.m-4{margin:1.5rem}.m-5{margin:3rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}.ms-0{margin-left:0}.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.ms-3{margin-left:1rem}.ms-4{margin-left:1.5rem}.ms-5{margin-left:3rem}.me-0{margin-right:0}.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:1rem}.me-4{margin-right:1.5rem}.me-5{margin-right:3rem}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:1rem;margin-right:1rem}.mx-4{margin-left:1.5rem;margin-right:1.5rem}.mx-5{margin-left:3rem;margin-right:3rem}.my-0{margin-bottom:0;margin-top:0}.my-1{margin-bottom:.25rem;margin-top:.25rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-3{margin-bottom:1rem;margin-top:1rem}.my-4{margin-bottom:1.5rem;margin-top:1.5rem}.my-5{margin-bottom:3rem;margin-top:3rem}.p-0{padding:0!important}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}.p-5{padding:3rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:1rem}.pt-4{padding-top:1.5rem}.pt-5{padding-top:3rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:1rem}.pb-4{padding-bottom:1.5rem}.pb-5{padding-bottom:3rem}.ps-0{padding-left:0}.ps-1{padding-left:.25rem}.ps-2{padding-left:.5rem}.ps-3{padding-left:1rem}.ps-4{padding-left:1.5rem}.ps-5{padding-left:3rem}.pe-0{padding-right:0}.pe-1{padding-right:.25rem}.pe-2{padding-right:.5rem}.pe-3{padding-right:1rem}.pe-4{padding-right:1.5rem}.pe-5{padding-right:3rem}.px-0{padding-left:0!important;padding-right:0!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}.px-5{padding-left:3rem!important;padding-right:3rem!important}.py-0{padding-bottom:0;padding-top:0}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:1rem;padding-top:1rem}.py-4{padding-bottom:1.5rem;padding-top:1.5rem}.py-5{padding-bottom:3rem;padding-top:3rem}.h-0{height:0}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.w-0{width:0}.w-25{width:25%}.w-50{width:50%}.w-75{width:75%}.w-100{width:100%}.w-min-0{min-width:0}.max-w{max-width:1100px}.box-sm{align-items:center;display:flex;font-size:20px;font-weight:700;height:40px;justify-content:center;width:40px}.tabs{margin-bottom:16px;margin-left:8px;margin-right:8px;min-width:0;overflow-x:scroll;position:relative}.tabs::-webkit-scrollbar{display:none}.tabs-container{align-items:center;display:flex;flex-grow:1;gap:12px}.tabs-indicator{background-color:var(--color-border);bottom:0;color:#fff;height:1px;height:43px;height:-webkit-fill-available;position:absolute}.tab,.tabs-indicator{border-radius:var(--border-radius);transition-duration:var(--transition-duration)}.tab{fill:var(--text-dark);align-items:center;color:var(--text-dark);cursor:pointer;display:flex;flex-grow:1;flex-wrap:nowrap;font-size:16px;font-weight:500;justify-content:center;opacity:.5;padding:12px 16px;position:relative;text-align:center;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}.tab.active,.tab:hover{color:#fff;opacity:1}.tab:hover{background-color:var(--color-border)}.tab-icon{align-items:center;display:flex;justify-content:center;margin-right:10px}.tab-icon svg{height:16px;width:16px}.bpm-menu,.bpm-wrapper{display:flex;position:relative}.bpm-wrapper{align-items:center;flex-grow:1;gap:8px;height:55px;overflow-x:scroll;overflow-y:hidden;overscroll-behavior:contain;scroll-behavior:smooth;-webkit-user-select:none;user-select:none}.bpm-wrapper::-webkit-scrollbar{display:none}.bpm-item{border-radius:var(--border-radius-sm);cursor:pointer;padding:2px 4px;transition-duration:var(--transition-duration)}.bpm-item-active,.bpm-item:hover{background-color:var(--color-tertiary);color:#fff}.play-bar{background-color:var(--color-primary);box-shadow:0 0 10px rgba(0,0,0,.5);height:97.8%;left:50px;position:absolute;top:0;transition-timing-function:ease-out;width:3px;z-index:1}.instrument{overflow-x:scroll;overscroll-behavior:contain;padding-bottom:16px;position:relative}.instrument-notes{flex-direction:column;-webkit-user-select:none;user-select:none}.instrument-note-container,.instrument-notes{display:flex;gap:8px}.instrument-note{align-items:center;background-color:var(--color-tertiary);border-radius:var(--border-radius-sm);color:#fff;cursor:pointer;display:flex;font-size:22px;height:50px;justify-content:center;min-width:50px;transition-duration:var(--transition-duration);width:50px}.instrument-note:hover{opacity:.5}.instrument-note:active{opacity:1}.note-cell{align-items:center;background-color:var(--color-main);border-radius:var(--border-radius-sm);cursor:pointer;display:flex;height:50px;justify-content:center;min-width:50px;transition-duration:var(--transition-duration);width:50px}.note-cell-active,.note-cell:hover{background-color:var(--cell-note-index);color:#fff}.animate-cell{-webkit-animation:animate-cell .3s ease-in-out;animation:animate-cell .3s ease-in-out}@media (max-width:768px){.instrument{overscroll-behavior:unset}}@-webkit-keyframes animate-cell{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes animate-cell{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}
/*# sourceMappingURL=main.abb9cd27.css.map*/