:root{--primaryHex: #117BFF;--primaryRGB: 17, 23, 255;--backgroundColor: black;--backgroundColorAlt: #222;--textColor: white;--errorColor: #F85284}:root{--maxWidth: 750px;--fontWeightBold: 800;--zBury: -1;--zElevate: 1;--zElevateStrong: 100;--zModal: 1000;--space: 8px;--space2x: calc(var(--space) * 2);--space3x: calc(var(--space) * 3);--space4x: calc(var(--space) * 4);--radius: 8px}*{-webkit-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0}::-webkit-scrollbar{display:none}html,body{position:fixed;overflow:hidden}@font-face{font-family:RobotoFlex;font-style:normal;src:url(/assets/RobotoFlex-aacc203a.ttf)}html,body,input,textarea{font-family:RobotoFlex,Helvetica Neue,Helvetica,sans-serif;-webkit-text-size-adjust:100%}html{font-size:62.5%}body{font-size:1.5rem}input,textarea{font-variation-settings:"wght" 500,"wdth" 100,"GRAD" -100}h1,h2,h3,a,strong{font-variation-settings:"wght" 800,"wdth" 150,"GRAD" -200}h1{font-size:1.8rem}h2{font-size:1.5rem}h3{font-size:1.3rem}a{color:inherit;text-decoration:none}.text-light{color:#666}small,.text-small{font-size:1.2rem}.text-uppercase{text-transform:uppercase}#page{position:relative;width:100vw;height:100vh;background:linear-gradient(0deg,rgba(0,0,0,1) 10%,#111 100%)}#container{position:relative;z-index:var(--zElevate)}.wrapper{position:relative;margin:0 auto;max-width:var(--maxWidth)}.flex{display:flex}.flex-v{display:flex;flex-direction:column}.flex-grow{flex-grow:1}.flex-center{justify-content:center;align-items:center}.flex-center-block{justify-content:center;align-content:center}.gap-1{gap:var(--space)}.gap-2{gap:var(--space2x)}.pad-1{padding:var(--space)}.pad-2{padding:var(--space2x)}.pad-3{padding:var(--space3x)}.hidden{display:none!important}.only-touch{display:block}.only-click{display:none}@media (hover: hover){.only-touch{display:none}.only-click{display:block}}@media (orientation: portrait){.only-landscape{display:none}.only-portrait{display:block}}@media (orientation: landscape){.only-landscape{display:block}.only-portrait{display:none}}ul{list-style-position:inside;list-style-type:none}input,textarea{width:100%;padding:1rem;font-size:1.4rem;color:#fff;background-color:#111;border:1px solid #222;border-radius:var(--radius)}input::placeholder,textarea::placeholder{color:#888}input:focus,textarea:focus{background-color:#222;border:1px solid white;box-shadow:0 0 5px 5px #fff3}input:user-invalid,textarea:user-invalid{border:1px solid var(--errorColor)}#kalimba{position:relative;height:85vh}#tines{--tineSize: 28px;--tineGap: 8px;--tineRadius: 40px;display:flex;justify-content:center;flex-wrap:nowrap;position:relative;top:-10px;height:100%;gap:var(--tineGap)}@media screen and (max-width: 820px){#tines{--tineSize: 22px}}@media screen and (max-width: 760px){#tines{--tineSize: 3vw}}.tine{position:relative;flex-basis:var(--tineSize);min-width:var(--tineSize);max-width:var(--tineSize);font-size:1.6rem;font-weight:var(--fontWeightBold);font-variation-settings:"wght" 800,"wdth" 250,"GRAD" 88}.tine,.tine *{-webkit-user-select:none;user-select:none}.tinetouch{position:absolute;width:calc(100% + var(--tineGap));left:calc(var(--tineGap) * -.5);height:calc(100% + calc(var(--tineGap) * .5));z-index:var(--zElevateStrong);background-color:transparent;border-bottom-left-radius:var(--tineRadius);border-bottom-right-radius:var(--tineRadius)}.playback{position:absolute;width:100%;height:100%;z-index:var(--zElevate);transition:opacity .2s ease;opacity:1;--padding: 2px;--size: calc(var(--tineSize) - calc(var(--padding) * 2))}.playback.stopping{opacity:0}.node{--height: calc(var(--size) * 1);--heightExtended: calc(var(--height) * 2);--color: hsl(var(--hue) 100% 10%);position:absolute;display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;overflow:hidden;left:50%;transform:translate(-50%);width:var(--size);height:var(--heightExtended);line-height:1;border-radius:40px;color:var(--color);border:1px solid hsl(var(--hue) 100% 40%);background:linear-gradient(0deg,hsl(var(--hue) 100% 60% / 90%) 0%,hsl(var(--hue) 100% 60%) 80%,hsl(var(--hue) 100% 60% / 30%));animation:moveNode var(--playbackDuration) forwards linear}@keyframes moveNode{0%{bottom:100%}1%{bottom:80%}85%{bottom:var(--padding);height:var(--heightExtended)}90%{animation-timing-function:ease;color:var(--color);height:var(--height)}95%{height:var(--height);opacity:1;color:transparent;transform:translate(-50%) scale(1)}to{height:var(--height);opacity:0;color:transparent;transform:translate(-50%) scale(3);bottom:var(--padding)}}.node.together:after{--size: 10px;content:"✦";display:block;font-size:9px;animation:removeTogetherMark var(--playbackDuration) forwards linear}@keyframes removeTogetherMark{0%{opacity:1;max-height:1em}85%{opacity:1;max-height:1em}90%{opacity:0;max-height:0}}.threshold{display:none;position:absolute;left:var(--l);width:calc(var(--r) - var(--l));bottom:calc(100% - var(--b));background-color:currentColor;min-width:3px;height:100%;z-index:1000}.threshold.in{color:#00f}.threshold.out{color:red}.tinnui{height:100%;display:flex;position:relative;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:50px;overflow:hidden;border-bottom-left-radius:var(--tineRadius);border-bottom-right-radius:var(--tineRadius);background:linear-gradient(180deg,#FFF 0%,#FFF 88%,#DDD 93%,#FFF 100%)}.tine.active .tinnui{transform:scale(.99);background:linear-gradient(180deg,#FFF 0%,#EEE 50%,#CCC 75%,#BBB 90%,#EEE 100%)}.notation{--size: 5px;display:flex;flex-direction:column;justify-content:center;min-height:calc(var(--size) * 2)}.notation.below{order:99}.notation .dot{flex-grow:0;height:var(--size);width:var(--size);margin:2px 0;background:black;border-radius:var(--size)}#nav{position:fixed;left:0;bottom:0;right:0;z-index:var(--zElevateStrong)}#nav .inner{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0 auto;max-width:var(--maxWidth);padding:0rem 0rem 3rem}#menu{position:relative}#menu-button{display:flex;gap:4px;padding:12px;border-radius:var(--radius);color:#fff}#menu-button>*{--size: 4px;display:block;height:var(--size);width:var(--size);border-radius:var(--size);background-color:currentColor}#menu.open #menu-button{background-color:#222}#menu-list{display:flex;flex-direction:column;gap:1px;position:absolute;max-width:400px;border-radius:12px;background-color:#111;overflow:hidden;bottom:calc(100% + var(--space));right:0;opacity:0;transform:scale(.5);transform-origin:bottom right;transition:all .2s ease}#menu.open #menu-list{opacity:1;transform:scale(1)}.action{display:block;padding:1rem 1.5rem;background-color:#222;font-variation-settings:"wght" 800,"wdth" 150,"GRAD" -200;white-space:nowrap;color:#fff}.action:hover{background-color:#ffffff1a}#status{color:#fff;font-size:1.2rem;opacity:.7;transition:opacity .1s ease}#status.updated{opacity:1}#status i{opacity:.5}.button{--color: #111;--h: 360;--s: 0%;--l: 95%;display:inline-block;padding:1.2rem 2.2rem;line-height:1;text-align:center;font-variation-settings:"wght" 800,"wdth" 150,"GRAD" -200;border-radius:100px;color:var(--color);background:linear-gradient(180deg,hsla(var(--h),var(--s),var(--l),1) 60%,hsla(var(--h),var(--s),calc(var(--l) * .9),1) 90%,hsla(var(--h),var(--s),calc(var(--l) * 1),1) 100%);border:2px solid hsla(var(--h),var(--s),var(--l),1);box-shadow:0 0 0 3px hsla(var(--h),var(--s),var(--l),.2)}.button.outline{--color: white;background:transparent}.button.small{font-size:1.2rem;padding:.5rem 1rem}.button.selected{color:#fff;background:rgba(var(--primaryRGB),1);border-color:rgba(var(--primaryRGB),1);box-shadow:none}.button.unselected{color:#fff;background:var(--backgroundColor);border-color:var(--backgroundColor);box-shadow:none}.button.active,.button:active{opacity:.8}.button.disabled{opacity:.5;color:#fff;background:transparent}.toast{--top: 2rem;position:absolute;top:calc(var(--top) * -1);left:50%;transform:translate(-50%);padding:1rem 1.5rem;color:#fff;border-radius:100px;background-color:#00b85c;border:2px solid white;box-shadow:0 2px 5px #0000004d;z-index:var(--zElevateStrong);font-weight:600;animation:burn 3s ease forwards}@keyframes burn{0%{top:calc(var(--top) * -1)}15%{top:var(--top)}90%{opacity:1;top:var(--top)}to{opacity:0;top:calc(var(--top) - 5px)}}.select{font-size:1.2rem;font-variation-settings:"wght" 800,"wdth" 150,"GRAD" -200;position:relative}.select .list-item{padding:6px}.select .list{position:absolute;left:0;width:100%;bottom:130%;overflow:scroll;display:flex;flex-direction:column-reverse;background-color:#000;max-height:0;opacity:0;border-radius:var(--radius);border:2px solid rgba(255,255,255,.1);transition:all .2s ease}.select .list.open{opacity:1;max-height:280px;box-shadow:0 20px 30px 10px #00000080}.select .list-item{border-bottom:1px solid #222}.select .list-item:first-child{border-bottom:none}.promo{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-radius:var(--radius);border:2px solid hsla(360,0%,10%,1);box-shadow:0 0 0 3px #1a1a1a33}.modal,.modal-bg{--time: .2s;position:absolute;display:flex;align-items:center;justify-content:center;z-index:var(--zModal)}.modal{top:0;bottom:0;left:-10000px;right:auto}.modal-bg{top:0;bottom:0;left:0;right:0;background-color:#00000080}.modal-box{--bgColor: #000;position:relative;flex-grow:1;display:flex;align-items:stretch;flex-direction:column;max-height:90vh;max-width:var(--modalWidth);color:#fff;text-align:center;background-color:var(--bgColor);overflow:hidden;border-radius:2rem;z-index:calc(var(--zModal) + 1);box-shadow:0 20px 200px 30px #fff3}.modal-content{display:flex;flex-direction:column;gap:.5rem;height:100%;overflow:scroll;padding:var(--space4x)}.modal.open{animation:openModal var(--time) ease-out forwards}.modal.closed{animation:closeModal var(--time) ease-out forwards}.modal.open .modal-box{animation:scaleBounceUp var(--time) ease-out forwards}.modal.closed .modal-box{animation:scaleDown var(--time) ease-out forwards}@keyframes scaleBounceUp{0%{transform:scale(.5)}70%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(.9)}}@keyframes openModal{0%{left:0;right:0;opacity:0}to{left:0;right:0;opacity:1}}@keyframes closeModal{0%{left:0;right:0;opacity:1}99%{opacity:0;left:0;right:0}to{opacity:0;left:-10000px;right:auto}}#reminder{font-size:1.2rem}.divider{text-transform:uppercase;font-size:10px;font-weight:var(--fontWeightBold);display:flex;align-items:center;justify-content:center;gap:var(--space);margin-top:var(--space);margin-bottom:var(--space)}.divider:before,.divider:after{content:"";display:inline-block;height:1px;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 50%)}.divider:after{background:linear-gradient(90deg,rgba(255,255,255,.1) 50%,transparent)}#modal-songs .modal-content{padding-bottom:100px}#modal-songs .modal-box:after{content:"";display:block;position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(0deg,var(--bgColor) 10%,transparent 100%)}#songs-list{margin:2rem 0}.song{--rgb: 20, 20, 20;display:flex;justify-content:space-between;padding:1.5rem;border-radius:1rem;text-align:left;background-color:rgba(var(--rgb),.8)}.song:hover{background-color:rgba(var(--rgb),1)}.song .meta{text-align:right}.song .bpm.override{color:#fff}#modal-songs .modal-actions-bar{position:absolute;display:flex;align-items:center;gap:1rem;padding:var(--space2x) var(--space4x);bottom:0;left:0;right:0;z-index:calc(var(--zModal) + 2);background-color:#000c;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -1px 10px #00000080}#modal-songs .modal-actions-bar .label{padding:0 1rem}#modal-feedback .modal-box{height:100vh}#feedback-form{position:relative;margin-top:2rem;display:flex;flex-direction:column;justify-content:stretch;align-content:stretch;height:100%;gap:1.5rem}#textarea-container{display:flex;flex-grow:1;position:relative}#count-container{position:absolute;color:#999;font-size:1.2rem;bottom:1rem;right:1rem}#char-count.invalid{color:var(--errorColor)}#feedback-form .error{font-weight:600;margin-top:-1rem;font-size:1.2rem;text-align:left;padding-left:1rem;color:var(--errorColor)}#feedback-form .error:empty{display:none}#debug{position:absolute;bottom:0;height:10px;left:50%;transform:translate(-50%);margin:0 auto;width:var(--maxWidth);z-index:var(--zElevate);font-family:monospace;font-size:7px}#logger{position:absolute;z-index:var(--zElevateStrong);bottom:10rem;left:0;display:flex;flex-direction:column;justify-content:flex-end;width:180px;height:3rem;padding:1rem;border-radius:.5rem;overflow:hidden;color:#fff;transition:all .3s ease;border:1px solid #111}#logger.focus{z-index:var(--zElevateStrong);overflow:scroll;justify-content:initial;height:60vh;border-radius:12px;background-color:#111;box-shadow:0 20px 200px 30px #fff3}.log{visibility:hidden;color:#fff;opacity:.5;min-height:1.2em}.log:last-child{visibility:visible}#logger.focus .log{color:#fff;visibility:visible}.log:nth-last-child(-n+1){opacity:1}.log.error,#logger.focus .log.error{opacity:1;color:#dc143c}#speedometer{--adjustment: 5px;position:absolute;left:0;bottom:8rem;display:flex;gap:2rem}.gauge{position:relative;width:80px;display:flex;flex-wrap:nowrap;align-items:flex-end;align-content:flex-end;justify-content:flex-end;border-bottom:1px solid blue}.gauge:before{content:"";position:absolute;display:block;height:1px;width:100%;left:0;bottom:calc(var(--average) * var(--adjustment));background-color:#fff3}.gauge:after{content:attr(data-label);display:block;position:absolute;bottom:-2em;left:0;right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff}.gauge>*{width:1px;height:calc(var(--speed) * var(--adjustment));background-color:var(--color)}#portrait-info{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;color:#555}