:root{--bg:#e7e7e7;--primary-accent: #fdad66;--secondary-accent: #9e5b20;--tertiary-accent: #da7f30;--err-colour:#cd1d1d;--warning-colour:#ff0;--success-colour:#4fa74f;--select-colour:#63a7ff;--primary-text:white;--secondary-text:#646464;--tertiary-text: #9e5b20;--text-highlight:#6464648c;--disabled-colour:#693a11}@font-face{font-family:Bravura;src:url(/Bravura.woff2)format("woff2")}@font-face{font-family:Elms Sans;src:url(/ElmsSans-VariableFont_wght.ttf)format("truetype-variations");font-weight:100 900}html,body{background-color:var(--bg);color:#fff;word-spacing:-2px;letter-spacing:1.5px;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:100%;height:100%;margin:0;font-family:Elms Sans,sans-serif;font-size:large;font-weight:400}button{all:unset;cursor:pointer;transition:transform .3s}button:hover{transform:scale(1.05)}button:active{transform:scale(.9)}input{border:3px solid var(--primary-text);color:var(--primary-text);letter-spacing:1.5px;box-sizing:border-box;background-color:#0000;border-radius:20px;width:100%;padding:20px;font-family:Elms Sans,sans-serif;font-size:medium;font-weight:500}input:focus{outline:none}input::placeholder{color:#ffffffbf}input::selection{background-color:var(--text-highlight)}input::-webkit-selection{background-color:var(--text-highlight)}*,:before,:after{box-sizing:border-box}.dashboard-wrapper-song-container{--dashboard-height:163px;flex-direction:column;display:flex;overflow:hidden}.dashboard{background-color:var(--bg);height:var(--dashboard-height);z-index:100;flex-direction:row;justify-content:space-between;align-items:center;gap:30px;padding:40px;transition:box-shadow .1s ease-in;display:flex;position:sticky;top:0;left:0}.empty-dashboard{flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:40px;display:flex;position:absolute;inset:0}.empty-dashboard .text{color:var(--secondary-accent);white-space:pre-wrap;text-align:center;margin-bottom:30px}.dashboard.shadowed{background-color:var(--bg);box-shadow:0 0 50px #000}.dashboard.inverted-color{background-color:var(--primary-accent)}.user{width:fit-content;min-width:0;color:var(--tertiary-text);transform-origin:50%;cursor:pointer;flex-direction:row;align-items:center;gap:10px;padding:0 20px;transition:transform .3s;display:flex}.user:hover{transform:scale(1.1)}.user:active{transform:scale(.9)}.username-text{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:xx-large;display:block;overflow:hidden}.add-button,.sign-out-button{background-color:var(--pink);cursor:default;cursor:pointer;background-color:var(--secondary-accent);border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;gap:20px;width:fit-content;padding:30px;transition:transform .2s,box-shadow .2s,background-colour .2s;display:flex;box-shadow:0 0 30px #0006}.sign-out-button{box-shadow:none;background-color:#0000}.sign-out-button svg{width:30px;height:30px;transform:rotate(180deg)}.add-button:hover{background-color:var(--primary-accent);transform:scale(1.05)}.sign-out-button:hover{color:var(--tertiary-text);transform:scale(1.05)}.add-button:active{transform:scale(.95)}.sign-out-button:active{color:var(--tertiary-text);transform:scale(.95)}.song-container{box-sizing:border-box;height:calc(100vh - var(--dashboard-height));grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px;margin-right:20px;padding:40px;display:grid;overflow-y:auto}.song-container::-webkit-scrollbar-thumb{background-color:var(--secondary-text);cursor:pointer;border-radius:999px}.song-container::-webkit-scrollbar-track{background:color-mix(var(--secondary-text) 20%, white 80%);border-radius:999px;margin-top:40px;margin-bottom:40px;box-shadow:0 0 20px #000000b3}.song-container::-webkit-scrollbar{width:10px}.song-pad{background-color:var(--primary-accent);cursor:default;-webkit-user-select:none;user-select:none;aspect-ratio:.75;box-sizing:border-box;border-radius:30px;flex-direction:column;justify-content:flex-start;align-items:center;gap:20px;max-width:500px;padding:30px;transition:transform .2s,background-color .3s;display:flex;position:relative;box-shadow:0 0 55px -20px #000c}.song-pad:hover{background-color:var(--secondary-accent);cursor:pointer;transform:scale(1.05)}.song-pad:hover .stat-button{background-color:var(--pink)}.song-pad:hover .can-scroll .scrolling-text{animation:12s linear infinite marquee}.scroll-window{white-space:nowrap;width:100%;display:flex;overflow:hidden}.scroll-window.no-scroll{justify-content:center}.scroll-window.can-scroll{justify-content:flex-start}.scrolling-text{word-spacing:normal;font-size:larger;display:inline-block}@keyframes marquee{0%{transform:translate(0%)}to{transform:translate(-100%)}}.trophy-border{aspect-ratio:1;background-color:var(--primary-text);opacity:.8;width:60%;color:var(--secondary-text);border-radius:999px;flex:1;justify-content:center;align-items:center;padding:30px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 25px #0009}.trophy-border img{flex-shrink:0;width:100%;height:100%}.trophy-border svg{flex-shrink:0;width:70%;height:70%}.loading-container-dashboard{justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex;overflow:hidden}.terminal{background-color:color-mix(in srgb, #7e7e7e 35%, var(--tertiary-accent) 65%);border-radius:50px;flex-direction:row;align-items:center;gap:80px;width:75%;min-width:260px;max-width:800px;height:68%;padding:0;transition:padding .2s;display:flex;overflow:hidden}.terminal.scroll{padding-right:20px}.options,.auto-builder-setup,.auto-builder-post-render{flex-direction:column;justify-content:space-between;align-items:center;gap:3%;width:100%;min-width:100%;height:100%;padding:40px;transition:transform 1s ease-in-out,scale 1.2s ease-in-out .2s,opacity .6s ease-out,padding .2s;display:flex;overflow-x:hidden}.options.scroller,.auto-builder-setup.scroller,.auto-builder-post-render.scroller{padding-right:20px}.auto-builder-post-render{padding:0 20px 0 0}.non-loader-container{flex-direction:column;justify-content:space-between;align-items:center;gap:12px;width:100%;min-width:100%;height:100%;padding:40px 20px 40px 40px;transition:transform 1s ease-in-out,scale 1.2s ease-in-out .2s,opacity .6s ease-out;display:flex;overflow:hidden visible}.options::-webkit-scrollbar-thumb{background-color:var(--primary-accent);cursor:pointer;border-radius:999px}.auto-builder-setup::-webkit-scrollbar-thumb{background-color:var(--primary-accent);cursor:pointer;border-radius:999px}.non-loader-container::-webkit-scrollbar-thumb{background-color:var(--primary-accent);cursor:pointer;border-radius:999px}.options::-webkit-scrollbar-track{background:var(--tertiary-text);border-radius:999px;max-height:80%;margin:40px 30px 40px 0}.auto-builder-setup::-webkit-scrollbar-track{background:var(--tertiary-text);border-radius:999px;max-height:80%;margin:40px 30px 40px 0}.non-loader-container::-webkit-scrollbar-track{background:var(--tertiary-text);border-radius:999px;max-height:80%;margin:40px 30px 40px 0}.options::-webkit-scrollbar{width:8px}.auto-builder-setup::-webkit-scrollbar{width:8px}.non-loader-container::-webkit-scrollbar{width:8px}.auto-builder-post-render::-webkit-scrollbar{width:0}.auto-builder-post-render{gap:15px}.options[class*=\ -1]{opacity:1;transform:translate(0%)}.options[class*=\ 1],.options[class*=\ 2]{opacity:0;transform:translate(calc(-100% - 80px))}.auto-builder-setup[class*=\ -1]{opacity:0;transform:translate(0%)}.auto-builder-setup[class*=\ 1]{opacity:1;transform:translate(calc(-100% - 80px))}.auto-builder-setup[class*=\ 2]{opacity:0;transform:translate(calc(-200% - 160px))}.auto-builder-post-render[class*=\ 2]{opacity:1;transform:translate(calc(-200% - 160px))}.auto-builder-post-render[class*=\ -1],.auto-builder-post-render[class*=\ 1]{opacity:0;scale:.9;transform:translateX(-100% - 80px)}.terminal-option{background-color:var(--tertiary-accent);aspect-ratio:1.5;cursor:pointer;border-radius:20px;flex:1;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:175px;padding:30px;transition:transform .3s;display:flex;position:relative;box-shadow:0 0 30px #000000b3}.terminal-option:hover{transform:scale(1.05)}.terminal-option:active{transform:scale(.95)}.terminal-option svg{aspect-ratio:1;width:auto;height:30%}.testing-tag{font-weight:bolder;position:absolute;bottom:30px;right:30px}.auto-builder-setup-img-uploader{background-color:var(--tertiary-accent);cursor:pointer;width:100%;min-height:150px;max-height:100%;color:var(--primary-text);text-align:center;border-radius:20px;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;gap:30px;margin-bottom:5px;padding:40px;font-size:medium;transition:transform .3s,background-color .3s;display:flex;position:relative;box-shadow:0 0 30px #000000b3}.auto-builder-setup-img-uploader.err{border:3px solid var(--err-colour);background-color:color-mix(in srgb, var(--err-colour) 40%, transparent 60%);animation:.4s ease-in-out shake}.auto-builder-setup-img-uploader.img{padding:0;overflow:hidden}.auto-builder-setup-img-uploader img{object-fit:cover;object-position:top;border-radius:20px;min-width:100%;height:110%}.auto-builder-setup-img-uploader.err img{animation:.4s ease-in-out shake}.auto-builder-setup-img-uploader:after{content:"";pointer-events:none;border-radius:0;transition:opacity .3s;position:absolute;inset:0}.auto-builder-setup-img-uploader.img.err:after{opacity:1;background-color:color-mix(in srgb, var(--err-colour) 40%, transparent 60%);animation:.4s ease-in-out shake}.auto-builder-setup-img-uploader.img.err:hover:after{opacity:1;background-color:color-mix(in srgb, var(--err-colour) 80%, transparent 20%);animation:.4s ease-in-out shake}.auto-builder-setup-img-uploader.img:after{opacity:0;background-color:#000000b3}.auto-builder-setup-img-uploader.img:hover:after{opacity:1}.auto-builder-setup-img-uploader:hover{transform:scale(1.05)}.auto-builder-setup-img-uploader:active{transform:scale(.95)}.auto-builder-setup-img-uploader:not(.img) svg{flex:1;width:auto}.auto-builder-setup-img-uploader.img svg{opacity:0;z-index:1;width:100px;height:100px;transition:opacity .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.auto-builder-setup-img-uploader.img:hover svg{opacity:1}.auto-builder-setup-img-uploader-notif{z-index:999;background-color:#000000b3;border-radius:20px;justify-content:center;align-items:center;width:80%;height:fit-content;padding:10px;transition:background-color .15s;display:flex;position:absolute;bottom:20px}.auto-builder-setup-img-uploader.img.err .auto-builder-setup-img-uploader-notif{background-color:var(--err-colour)}.auto-builder-setup-img-uploader.img:hover .auto-builder-setup-img-uploader-notif{background-color:#0000}.auto-builder-setup-button,.auto-builder-post-render-button,.on-load-cancel-render{background-color:var(--tertiary-accent);cursor:pointer;text-align:center;border-radius:20px;width:100%;padding:15px;transition:transform .3s,box-shadow .2s,opacity .2s;box-shadow:0 0 30px #000000b3}.on-load-cancel-render{margin-bottom:30px}.auto-builder-setup-button.disabled,.auto-builder-post-render-button.disabled{background-color:var(--disabled-colour);box-shadow:none;cursor:not-allowed}.auto-builder-setup-button:hover:not(.disabled),.auto-builder-post-render-button:hover:not(.disabled),.on-load-cancel-render:hover{transform:scale(1.05)}.auto-builder-setup-button:active:not(.disabled),.auto-builder-post-render-button:active:not(.disabled),.on-load-cancel-render:active{transform:scale(.95)}.auto-builder-post-render-button.continue{justify-content:center;align-items:center;height:73px;display:flex}.on-load-cancel-render{opacity:1;pointer-events:all;width:calc(100% - 80px);position:absolute;bottom:0;left:40px;transform:scale(1)}.on-load-cancel-render.closed{opacity:0;pointer-events:none;transform:scale(.5)}.terminal-loader-container{opacity:1;pointer-events:all;flex-direction:column;justify-content:space-between;align-items:center;width:80%;margin-bottom:20px;transition:width .5s,opacity .2s;display:flex;position:absolute;top:40px;bottom:40px;left:50%;transform:translate(-50%)}.terminal-loader-container.closed{opacity:0;pointer-events:none;width:50%}.terminal-loader-container *{color:#fff}.non-loader-container.closed{opacity:0;transform:scale(.5)}.auto-builder-post-render-disclaimer-trigger{justify-content:space-between;align-items:center;width:100%;padding-left:20px;font-size:larger;display:flex}.auto-builder-post-render-disclaimer-trigger svg{cursor:pointer;min-width:25px;min-height:25px;transition:transform .3s}.auto-builder-post-render-disclaimer-trigger svg:hover{transform:scale(1.2)}.auto-builder-post-render-disclaimer-trigger svg:active{transform:scale(.8)}.auto-builder-post-render-disclaimer{white-space:pre-wrap;text-align:justify;background-color:var(--primary-accent);border-radius:20px;flex-direction:column;gap:40px;width:70%;min-width:247px;max-width:760px;min-height:30%;margin:0 20px;padding:60px 40px 40px;font-size:medium;display:flex;box-shadow:0 0 30px #000000b3}.loading-disclaimer-wrapper{justify-self:flex-end;width:100%;margin-top:20px;margin-bottom:35px;overflow-y:auto}.loading-disclaimer-wrapper::-webkit-scrollbar-thumb{background-color:var(--secondary-accent);cursor:pointer;border-radius:999px}.loading-disclaimer-wrapper::-webkit-scrollbar-track{background:var(--bg-purple);border-radius:999px}.loading-disclaimer-wrapper::-webkit-scrollbar{width:8px}.loading-disclaimer-wrapper .auto-builder-post-render-disclaimer{width:100%;box-shadow:none;background-color:#0000;margin:0;padding:20px}.auto-builder-post-render-disclaimer .text-block{flex-direction:column;gap:5px;display:flex}.auto-builder-post-render-disclaimer .text-block .text-emphasis{color:var(--tertiary-text);text-align:left;font-weight:bolder}.auto-builder-post-render-disclaimer .text-block .text-title{color:var(--tertiary-text);border-bottom:2px solid var(--tertiary-text);text-align:left;padding-bottom:10px;font-size:large;font-weight:bolder}.terminal-loader-container .auto-builder-post-render-disclaimer .text-block .text-emphasis{color:var(--primary-text)}.terminal-loader-container .auto-builder-post-render-disclaimer .text-block .text-title{color:var(--primary-text);border-color:var(--primary-text)}.disclaimer-button{background-color:var(--tertiary-text);pointer-events:all;cursor:pointer;border-radius:10px;width:fit-content;margin-left:auto;padding:20px 40px;transition:transform .3s}.disclaimer-button:hover{transform:scale(1.1)}.disclaimer-button:active{transform:scale(.9)}.terminal-wave-form-wrapper{flex:1;justify-content:center;align-items:center;width:100%;display:flex}.song-meta-data{background-color:var(--primary-accent);white-space:pre-wrap;border-radius:20px;flex-direction:column;gap:15px;width:100%;margin-bottom:auto;padding:20px;font-size:medium;display:flex;box-shadow:0 0 30px #000000b3}.meta-data-extraction-qual{justify-content:space-between;align-items:center;gap:20px;width:100%;display:flex}.terminal-music-player-wrapper{border-radius:20px;width:100%;box-shadow:0 0 30px #000000b3}.sign-in-pad{background-color:var(--primary-accent);box-sizing:border-box;border-radius:30px;justify-content:flex-start;align-items:center;gap:80px;width:500px;padding:30px;transition:transform 1s ease-in-out;display:flex;overflow:hidden;transform:translate(0%);box-shadow:0 0 50px #000}.sign-in-pad form{flex-direction:column;gap:10px;width:100%;display:flex}.sign-in-pad .inner-field-mssg{color:var(--tertiary-text);opacity:1;align-self:flex-start;margin-top:-15px;padding-left:10px;font-size:small;font-weight:700;transition:transform .3s,opacity .2s}.sign-in-pad .inner-field-mssg.not-visible{opacity:0;transform:translate(-110%)}.sign-in-layout{flex-direction:column;justify-content:center;align-items:center;gap:10px;min-width:100%;max-height:550px;transition:transform 1s ease-in-out,scale 1.2s ease-in-out .2s,opacity .6s ease-out;display:flex}.sign-in-layout.sign-in{opacity:1;transform:translate(0%)}.sign-in-layout.sign-in.switch{opacity:0;transform:translate(calc(-100% - 80px))}.sign-in-layout.sign-up{opacity:0;transform:translate(0%)}.sign-in-layout.sign-up.switch{opacity:1;transform:translate(calc(-100% - 80px))}.input-sxn{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;width:100%;height:40px;display:flex;position:relative}.input-container{width:100%;position:relative}.input-container label{pointer-events:none;background-color:var(--primary-accent);height:25px;margin-left:10px;padding:0 8px;transition:transform .3s;position:absolute;top:50%;left:5px;transform:translateY(-50%)}.input-container input:-webkit-autofill{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0px 1000px var(--primary-accent) inset!important;-webkit-text-fill-color:var(--primary-text)!important}.input-container input:-webkit-autofill:hover{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0px 1000px var(--primary-accent) inset!important;-webkit-text-fill-color:var(--primary-text)!important}.input-container input:-webkit-autofill:focus{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0px 1000px var(--primary-accent) inset!important;-webkit-text-fill-color:var(--primary-text)!important}.input-container input:-webkit-autofill:active{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0px 1000px var(--primary-accent) inset!important;-webkit-text-fill-color:var(--primary-text)!important}.input-container input:focus+label,.input-container input:not(:placeholder-shown)+label{font-size:small;transform:translateY(-150%)}.input-sxn.err{color:var(--err-colour)}.input-sxn.err input{color:var(--err-colour);border:3px solid var(--err-colour)}.input-sxn.err{animation:.4s ease-in-out shake}.input-sxn.warn{color:var(--warning-colour)}.input-sxn.warn input{color:var(--warning-colour);border:3px solid var(--warning-colour)}.input-sxn.warn{animation:.4s ease-in-out shake}.eye-lid{cursor:pointer;transform-origin:top;justify-content:center;align-items:center;width:25px;height:25px;margin:auto 0;transition:scale .3s;display:flex;position:absolute;top:50%;bottom:0;right:20px;transform:translateY(-50%)}.eye-lid:hover{scale:1.3}.eye-lid:active{scale:.8}.eye-lid svg{width:25px;height:25px}.eye-lid.err:after{background-color:var(--err-colour)}.eye-lid.warn:after{background-color:var(--warning-colour)}.eye-lid:after{content:"";background-color:var(--primary-text);transform-origin:100%;pointer-events:none;width:0;height:2px;transition:width .3s ease-in-out;position:absolute;top:0;right:0;transform:translateY(-50%)rotate(-45deg)}.eye-lid.closed:after{width:35px}@keyframes shake{0%,to{transform:scale(1)translate(0)}15%,45%,75%{transform:scale(1)translate(-4px)}30%,60%,90%{transform:scale(1)translate(4px)}}.primary-option.disabled{background-color:var(--disabled-colour);color:var(--disabled-text);box-shadow:none;cursor:not-allowed}.primary-option{all:unset;box-sizing:border-box;cursor:default;-webkit-user-select:none;user-select:none;border-radius:999px;justify-content:center;align-items:center;gap:20px;width:100%;margin-top:20px;padding:20px 30px;transition:transform .2s,background-color .3s;display:flex;box-shadow:0 0 50px #000}.primary-option:hover:not(.disabled){cursor:pointer;transform:scale(1.05)}.primary-option:active:not(.disabled){transform:scale(.95)}.primary-option:focus-visible{outline:2px solid var(--primary-text);outline-offset:4px}.secondary-option{text-underline-offset:4px;color:var(--primary-text);margin-top:20px;margin-bottom:0;font-size:smaller;text-decoration:underline;transition:color .3s,transform .2s}.secondary-option:hover{cursor:pointer;color:var(--tertiary-text);transform:scale(1.05)}.secondary-option:focus{color:var(--tertiary-text);transform:scale(1.05)}.loading-container-signin{justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex;overflow:hidden}@keyframes wonky-spin{0%{transform:rotate(0)translate(0)}25%{transform:rotate(90deg)translate(1px,-1px)}50%{transform:rotate(180deg)translate(-1px,1px)}75%{transform:rotate(270deg)translate(1px,1px)}to{transform:rotate(360deg)translate(0)}}.loading-container{width:100%;max-width:400px;position:relative}.record-wrapper{aspect-ratio:1;filter:drop-shadow(0 0 40px #000);transform-origin:51% 49%;min-width:100%;max-width:50px;animation:12s linear infinite wonky-spin}.wonky-record{background-color:var(--primary-accent);transform-origin:51% 49%;width:100%;height:100%;animation:2s linear infinite wonky-spin;-webkit-mask:url(/loading_pics/loading_record.png) 50%/contain no-repeat;mask:url(/loading_pics/loading_record.png) 50%/contain no-repeat}.needle-wrapper{pointer-events:none;filter:drop-shadow(0 0 4px #000c)drop-shadow(0 0 16px #0009)drop-shadow(0 0 32px #0006);width:100%;height:100%;position:absolute;top:-20%;left:10%}.needle{background-color:var(--primary-accent);width:100%;height:100%;-webkit-mask:url(/loading_pics/loading_needle.png) 50%/contain no-repeat;mask:url(/loading_pics/loading_needle.png) 50%/contain no-repeat}.mssg-container{width:100%;color:var(--secondary-accent);justify-content:center;display:flex}.dots{position:absolute;bottom:0;left:100%}.dots:after{content:"";animation:1.5s steps(4,end) infinite loading-dots}@keyframes loading-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}.loading-spinner{display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.line-restricted-container{max-height:calc(1.4em * var(--line-clamp,2));text-overflow:clip;line-height:1.4em;display:block;overflow:hidden}.instrument-picker-container{justify-content:center;align-items:center;margin:-60px 0 -40px;display:flex}.instrument-picker{color:var(--primary-text);box-sizing:border-box;justify-content:safe center;align-items:center;padding:20px;display:flex;overflow:auto hidden}.instrument-picker:after{content:"";background-color:var(--tertiary-accent);pointer-events:none;z-index:1;border-radius:20px;position:absolute;inset:0}.instrument-picker-shadow{box-sizing:border-box;border-radius:20px;width:100%;padding-top:20px;position:relative}.instrument-picker-shadow:after{content:"";pointer-events:none;z-index:2;border-radius:20px;position:absolute;inset:0;box-shadow:inset 0 0 20px #000}.instrument-picker::-webkit-scrollbar{display:none}.instrument-picker{-ms-overflow-style:none;scrollbar-width:none}.instrument-picker img{aspect-ratio:1;z-index:2;cursor:pointer;border-radius:20px;width:120px;margin:0 7.5px;padding:20px;transition:transform .2s;box-shadow:0 0 20px #000}.instrument-picker img:first-child{margin-left:15px}.instrument-picker img:last-child{margin-right:15px}.instrument-picker img:hover{background-color:var(--secondary-accent);transform:scale(1.05)}.instrument-picker img:active{transform:scale(.95)}.instrument-picker img.selected{border:2px solid var(--primary-text)}.selected-instrument{z-index:2;background-color:var(--disabled-colour);border-radius:20px;justify-content:center;align-items:center;width:80%;margin-bottom:20px;padding:10px 30px;display:flex}.instrument-picker-label{color:var(--primary-text);text-align:center;z-index:2;font-size:large;position:relative}.delete-modal{background-color:var(--err-colour);text-align:center;width:70%;min-width:400px;max-width:600px;height:30%;min-height:200px;color:var(--primary-text);border-radius:30px;flex-direction:column;justify-content:space-evenly;align-items:center;gap:30px;padding:30px;font-size:medium;display:flex;position:relative;box-shadow:0 0 30px #0009}.delete-modal-cancel-button{cursor:pointer;width:25px;min-width:25px;height:25px;min-height:25px;transition:transform .3s;position:absolute;top:20px;right:20px}.delete-modal-cancel-button:hover{transform:scale(1.3)}.delete-modal-cancel-button:active{transform:scale(.8)}.delete-modal-header{font-size:x-large;font-weight:bolder}.delete-modal-text{flex-direction:column;justify-content:flex-start;align-items:center;gap:30px;max-height:125px;transition:padding .2s;display:flex;overflow-y:auto}.delete-modal-text.scrolling{padding-right:20px}.delete-modal-text::-webkit-scrollbar-thumb{background-color:var(--primary-text);cursor:pointer;border-radius:999px}.delete-modal-text::-webkit-scrollbar-track{background:0 0;border-radius:999px}.delete-modal-text::-webkit-scrollbar{width:5px}.delete-modal-button-group{flex-direction:column;justify-content:center;align-items:center;gap:20px;width:80%;margin-top:20px;display:flex}.delete-modal-button{background-color:color-mix(in srgb, var(--err-colour) 90%, pink 10%);cursor:pointer;border-radius:10px;width:100%;padding:20px 40px;transition:transform .3s;box-shadow:0 0 30px #0009}.delete-modal-button:hover{transform:scale(1.1)}.delete-modal-button:active{transform:scale(.9)}.delete-modal-button-group .cancel-txt{cursor:pointer;color:color-mix(in srgb, var(--tertiary-text) 30%, var(--primary-text) 70%);will-change:transform, color;font-size:small;transition:transform .2s,color .2s;display:inline-block;position:relative}.delete-modal-button-group .cancel-txt:after{content:"";opacity:.85;background-color:currentColor;width:calc(100% + 8px);height:1px;transition:width .25s,opacity .25s;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}.delete-modal-button-group .cancel-txt:hover{color:var(--primary-text);transform:scale(1.05)}.delete-modal-button-group .cancel-txt:active{transform:scale(.95)}.delete-modal-button-group .cancel-txt:hover:after{opacity:1;width:calc(100% + 40px)}.sheet-music-container{all:unset;justify-content:center;width:100%;display:flex;position:relative}.measure-number{font-size:50px}.note{fill:var(--note-colour);stroke:#000;cursor:pointer;will-change:transform;transform-box:fill-box;transform-origin:50%;font-family:Bravura;font-size:100px;font-weight:lighter}.clef,.time-sig{pointer-events:none;fill:#000;stroke:#000;font-family:Bravura;font-size:100px;font-weight:lighter}.note.accidental{font-size:70px}.note-hitbox{cursor:pointer;--note-colour:black;transition:transform .2s ease-in-out,filter .2s,fill .1s}.note-hitbox.selected .note{filter:drop-shadow(0 8px 20px #fff9);fill:var(--tertiary-accent)!important}.note-hitbox.emphasis .note{transform:scale(1.5)translate(-5px)}.note-hitbox.left-facing.emphasis .note{transform:scale(1.5)translate(5px)}.note-hitbox.with-err .note{fill:red!important}.note-hitbox:hover .note{filter:drop-shadow(0 8px 20px #fff9);transform:scale(1.2)translate(-3px)}.note-hitbox.disabled:hover .note{transform:none}.note-hitbox.left-facing:hover .note{transform:scale(1.2)translate(3px)}.cursor{stroke:var(--primary-accent);fill:var(--primary-accent);stroke-width:10px;stroke-linecap:round;stroke-linejoin:round;stroke-linecap:round}.cursor.select{stroke:var(--select-colour);fill:var(--select-colour)}.cursor.tip{will-change:transform;transform-box:fill-box;transform-origin:50%;cursor:pointer;transform:translate(var(--x), var(--y));transition:filter .2s,fill .1s}.cursor.tip:hover{transform:translate(var(--x), var(--y)) scale(1.2)}.cursor.tip:active{transform:translate(var(--x), var(--y)) scale(.8)}.select-region{fill:color-mix(in srgb, var(--select-colour) 40%, transparent)}.popup-backdrop{z-index:299;background-color:#0000;width:100vw;height:100dvh;position:fixed;top:0;left:0}.add-note-btn-group{cursor:pointer;transform-box:fill-box;transform-origin:50%;transition:transform .25s cubic-bezier(.4,0,.2,1)}.add-note-btn-group:hover{transform:scale(1.04)}.add-note-btn-group:active{transform:scale(.97)}.add-note-button{fill:var(--primary-accent);transition:fill .2s}.screen-overlay{width:100vw;height:100dvh;position:fixed;inset:0}.popup{transform-origin:top middle;pointer-events:all;--arrow-width:0;--arrow-height:0;--arrow-x-recalc:0;--arrow-y-recalc:0;--bg-colour:var(--tertiary-accent);background-color:var(--bg-colour);border-radius:20px;justify-content:center;padding:20px;display:flex;position:absolute;box-shadow:0 0 50px #000000b3}.popup:after{content:"";border-left:var(--arrow-width) solid transparent;border-right:var(--arrow-width) solid transparent;width:0;height:0;position:absolute}.popup.top:after{border-left:var(--arrow-width) solid transparent;border-right:var(--arrow-width) solid transparent;border-bottom:var(--arrow-height) solid var(--bg-colour);left:var(--arrow-x-recalc);top:calc(-1 * var(--arrow-height));transform:translate(-50%)}.popup.bottom:after{border-left:var(--arrow-width) solid transparent;border-right:var(--arrow-width) solid transparent;border-top:var(--arrow-height) solid var(--bg-colour);left:var(--arrow-x-recalc);bottom:calc(-1 * var(--arrow-height));transform:translate(-50%)}.popup.left:after{border-top:var(--arrow-width) solid transparent;border-bottom:var(--arrow-width) solid transparent;border-right:var(--arrow-height) solid var(--bg-colour);left:calc(-2 * var(--arrow-height));top:var(--arrow-y-recalc);transform:translateY(-50%)}.popup.right:after{border-top:var(--arrow-width) solid transparent;border-bottom:var(--arrow-width) solid transparent;border-left:var(--arrow-height) solid var(--bg-colour);right:calc(-2 * var(--arrow-height));top:var(--arrow-y-recalc);transform:translateY(-50%)}.popover-inner{flex-direction:column;gap:20px;width:530px;max-height:510px;padding:20px;display:flex;overflow:hidden auto}.popover-inner::-webkit-scrollbar-thumb{background-color:var(--secondary-accent);cursor:pointer;border-radius:999px}.popover-inner::-webkit-scrollbar-track{background:var(--bg-purple);border-radius:999px}.popover-inner::-webkit-scrollbar{width:8px}.duration-control,.voice-control,.note-control{align-items:center;gap:20px;width:100%;min-width:100%;height:60px;display:flex}.duration-control,.voice-control{justify-content:space-between}.note-control svg{width:20px;height:20px}.pitch-control-button,.duration-control-button,.voice-control-button,.clef-control-button,.note-control-button,.chord-button{color:#fff;background-color:var(--tertiary-accent);cursor:pointer;white-space:nowrap;border-radius:20px;justify-content:center;align-items:center;height:100%;padding:20px;font-size:small;transition:transform .3s,color .3s;display:flex;box-shadow:0 0 20px #000}.chord-button{width:100%}.note-control-button{color:var(--tertiary-text);background-color:#fff}.note-control-button:not(:has(svg)){width:100%}.pitch-control-button.disabled,.duration-control-button.disabled,.voice-control-button.disabled,.clef-control-button.disabled,.note-control-button.disabled,.chord-button.disabled{background-color:var(--tertiary-text);box-shadow:none;cursor:auto}.pitch-control-button:not(.disabled):hover,.duration-control-button:not(.disabled):hover,.voice-control-button:not(.disabled):hover,.clef-control-button:not(.disabled):hover,.note-control-button:not(.disabled):hover,.chord-button:not(.disabled):hover{transform:scale(1.1)}.pitch-control-button:not(.disabled):hover,.duration-control-button:not(.disabled):hover,.voice-control-button:not(.disabled):not(.add-new):hover{transform:scale(1.3)}.pitch-control-button:not(.disabled):active,.duration-control-button:not(.disabled):active,.voice-control-button:not(.disabled):active,.clef-control-button:not(.disabled):active,.note-control-button:not(.disabled):active,.chord-button:not(.disabled):active{transform:scale(.8)}.pitch-control-button,.duration-control-button,.voice-control-button:not(.add-new),.clef-control-button{aspect-ratio:1;border-radius:999px;height:fit-content;padding:10px}.voice-control-button.add-new{width:100%}.clef-control-button.top{box-shadow:none;border-radius:10px 10px 0 0}.clef-control-button.bottom{box-shadow:none;border-radius:0 0 10px 10px}.clef-control-button:hover{background-color:var(--tertiary-text)}.voice-clef{flex-direction:row;justify-content:space-between;align-items:center;gap:20px;width:100%;display:flex}.clef-list-container{border:2px solid #fff;border-radius:20px;flex-direction:column;align-items:center;max-height:40px;padding:20px;display:flex;overflow:hidden}.clef-list{flex-direction:column;justify-content:flex-start;gap:20px;margin-top:-10px;transition:transform .3s;display:flex}.clef-list-control-buttons{background-color:var(--tertiary-text);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;display:flex;box-shadow:0 0 10px #000000b3}.duration-adder,.time-sig-option{flex-direction:row;justify-content:center;align-items:center;gap:20px;display:flex}.duration-adder svg,.time-sig-option svg{color:#fff;width:20px;height:20px}.time-sig-option .time-sig{dominant-baseline:central;font-size:30px;line-height:1}.time-sig-container{flex-direction:column;justify-content:center;align-items:center;gap:30px;display:flex}.duration-container,.voice-container{flex-direction:column;align-items:flex-start;display:flex}.voice-container{gap:20px;margin-top:-20px;font-size:medium}.voice-name{border-radius:999px;justify-content:center;align-items:center;width:30px;height:30px;padding:20px;display:flex}.duration-options-control{justify-content:space-between;align-items:center;width:100%;margin:20px 0;padding-left:20px;padding-right:10px;font-size:medium;display:flex}.pitch-option,.checkbox{cursor:pointer;border:2px solid #fff;border-radius:5px;justify-content:center;align-items:center;width:30px;height:30px;transition:transform .3s,border .2s,background-color .2s;display:flex}.pitch-option{aspect-ratio:1;width:50px;height:50px;font-family:Bravura;font-size:xx-large;font-weight:100}.pitch-option:hover{transform:scale(1.3)}.checkbox:hover{transform:scale(1.1)}.pitch-option:active,.checkbox:active{transform:scale(.8)}.pitch-option.selected,.checkbox.checked{color:var(--tertiary-text);background-color:#fff;border:none;box-shadow:0 0 20px #000}.pitch-option.disabled{border-color:var(--tertiary-text);color:var(--tertiary-text);cursor:auto}.pitch-option.disabled:hover{transform:scale(1)}.pitch-container{justify-content:space-between;align-items:center;gap:20px;padding:0 10px;display:flex}.pitch-adder{flex-direction:column;align-items:center;gap:15px;height:115px;display:flex}.pitch-options-control{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);gap:10px;height:115px;display:grid}.non-editor-styler{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;flex-direction:column;align-items:center;gap:20px;width:100%;min-width:0;padding:0;font-size:16px;line-height:1.4;display:flex}.picture-container{width:100%;display:inline-block;position:relative}.picture-container.trumpet img{background-color:#fff!important}.picture-container img{object-fit:contain;display:block;border-radius:10px!important;box-shadow:0 0 15px -5px #000!important}.picture-container img.overlay-key{box-shadow:none;pointer-events:none;background-color:#0000;position:absolute;top:0;left:0}.picture-container img.overlay-key .piano{box-shadow:0 0 15px -5px #000!important}.picture-container img .advanced-options-button{cursor:pointer;border-bottom:none;align-items:center;gap:10px;width:100%;margin-top:20px;padding-bottom:10px;display:flex;position:relative}.advanced-options-button:after{content:"";transform-origin:0;background-color:#fff;width:100%;height:1px;transition:transform 1s;position:absolute;bottom:0;left:0;transform:scaleX(0)}.advanced-options-button.open:after{transform:scaleX(1)}.advanced-options-svg{width:20px;height:20px;margin-left:auto}.advanced-options-button-caret{transition:transform .5s;transform:rotate(-90deg)}.advanced-options-button .advanced-options-button-caret{transform:rotate(-90deg)}.advanced-options-button.open .advanced-options-button-caret{transform:rotate(0)}.chord-button-container{justify-content:center;align-items:center;gap:20px;display:flex}.advanced-options-container{flex-direction:column;justify-content:center;align-items:center;min-width:100%;display:flex}.advanced-options-wrapper{grid-template-rows:0fr;min-width:100%;height:0%;transition:grid-template-rows 1s,height 1s;display:grid;overflow:hidden}.advanced-options-wrapper.open{grid-template-rows:1fr;height:100%}.advanced-options{flex-direction:column;justify-content:flex-start;gap:20px;min-width:100%;min-height:0;padding:20px;display:flex;overflow:hidden}.advanced-options.header{flex-direction:row;justify-content:space-between;align-items:center;width:100%;padding:5px 5px 15px 0;display:flex}.snap-to-range-button{background-color:color-mix(var(--err-colour) 80%, white 20%);cursor:pointer;border:3px solid var(--err-colour);border-radius:20px;padding:20px;font-size:small;transition:transform .3s;box-shadow:0 0 10px #000000b3}.snap-to-range-button:hover{transform:scale(1.1)}.snap-to-range-button:active{transform:scale(.8)}.player{background-color:var(--primary-accent);cursor:pointer;border-radius:20px;justify-content:center;align-items:center;gap:clamp(10px,20%,40px);padding:20px 40px;display:flex;box-shadow:0 0 15px #00000080}.player svg{min-width:25px;min-height:25px;transition:transform .2s}.player svg.disabled{color:var(--tertiary-text);cursor:auto}.player svg:hover:not(.disabled){transform:scale(1.5)}.player svg:active:not(.disabled){transform:scale(.5)}.player div{align-items:center;display:flex}.player svg.metronome,.player svg.microphone{border:2px var(--primary-text) solid;border-radius:6px;min-width:40px;min-height:40px;padding:5px;transition:transform .2s,background-color .1s,color .1s;transform:scale(1)}.player svg.metronome:hover,.player svg.microphone:not(.disabled):hover{transform:scale(1.25)}.player svg.metronome:active,.player svg.microphone:not(.disabled):active{transform:scale(.5)}.player svg.metronome.on,.player svg.microphone.on{background-color:var(--primary-text);color:var(--primary-accent)}.player svg.microphone.disabled{color:var(--tertiary-accent);border:2px var(--tertiary-accent) solid}.volume-container{align-items:center;gap:10px;width:150px;min-width:150px;display:flex}.volume-slider{appearance:none;box-shadow:none;cursor:pointer;outline:none;height:4px;padding:0}.volume-slider::-webkit-slider-runnable-track{background-color:var(--primary-text);border-radius:3px;height:2px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--primary-text);border-radius:999px;width:14px;height:14px;margin-top:-5px;transition:transform .1s}.volume-slider::-webkit-slider-thumb:hover{background:var(--primary-text);margin-top:-5px;transform:scale(1.2)}.button-group{justify-content:center;align-items:center;gap:10px;display:flex}.err-container{justify-content:center;align-items:center;width:100%;margin-top:0;padding:0 10px;font-size:small;font-weight:700;transition:height .5s,min-height .5s;display:flex;overflow:hidden}.err-mssg{color:var(--err-colour);width:100%;min-height:max-content;transition:transform var(--err-transition-dur) ease, color calc(var(--err-transition-dur) + .2s) ease;align-items:center;gap:10px;font-size:small;font-weight:700;display:flex;transform:translate(0%)}.err-mssg.warn{color:var(--warning-colour)}.err-msgg.plain{color:var(--tertiary-text)}.err-mssg svg{width:20px;min-width:20px;height:20px;min-height:20px}.err-mssg.disappear{transform:translate(-100%)}.drawer{background-color:var(--primary-accent);pointer-events:all;transition:transform .6s;box-shadow:0 0 30px #000000b3}.fallback-err-display{background-color:var(--bg);width:100vw;height:100vh;color:var(--err-colour);text-align:center;z-index:1500;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:10%;display:flex}.fallback-err-display button{border:2px solid var(--err-colour);border-radius:10px;margin-top:20px;padding:15px;transition:background-color .2s,color .2s,transform .3s}.fallback-err-display button:hover{background-color:var(--err-colour);color:var(--primary-text)}.on-air-svg{--glow-colour:color-mix(in srgb, var(--err-colour) 40%, white 50%);color:var(--err-colour);border:3px solid var(--err-colour);box-shadow:0 0 20px var(--err-colour), inset 0 0 10px var(--err-colour);text-shadow:0 0 5px var(--glow-colour), 0 0 15px var(--glow-colour), 0 0 30px var(--glow-colour);border-radius:10px;margin-bottom:80px;padding:15px 30px;font-size:4em;font-weight:700;animation:3.5s ease-in-out forwards on-air-anim}@keyframes on-air-anim{0%,30%{opacity:1}34%{opacity:.3}37%{opacity:1}40%{opacity:.3}42%{opacity:1}45%,to{opacity:.3}}.song-pg{flex-direction:column;align-items:center;gap:20px;height:100vh;max-height:100vh;display:flex}.song-pg .can-scroll .scrolling-text{animation:12s linear infinite marquee}.song-pg .dashboard.top{flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;min-height:280.5px;padding:20px;display:flex;position:relative}.control-tab{background-color:#0000;justify-content:space-evenly;align-items:center;gap:30px;width:100%;display:flex}.control-tab .player{flex:1 1 0;min-width:0;max-width:800px!important}.control-tab-svg{background-color:var(--primary-accent);cursor:pointer;border-radius:20px;justify-content:center;align-items:center;width:60px;height:60px;transition:transform .3s;display:flex;box-shadow:0 0 7px #00000080}.control-tab-svg.disabled{background-color:var(--tertiary-text);box-shadow:none;cursor:auto}.control-tab-svg:not(.disabled):hover{transform:scale(1.1)}.control-tab-svg svg{color:#fff;width:40%;height:40%}.song-wrapper{flex-direction:column;width:100%;margin-right:20px;padding:20px 0 20px 40px;display:flex;overflow-y:auto}.song-wrapper::-webkit-scrollbar-thumb{background-color:var(--secondary-text);cursor:pointer;border-radius:999px}.song-wrapper::-webkit-scrollbar-track{background:color-mix(var(--secondary-text) 20%, white 80%);border-radius:999px;margin-top:60px;margin-bottom:60px;box-shadow:0 0 20px #000000b3}.song-wrapper::-webkit-scrollbar{width:10px}.toaster{z-index:999;background-color:var(--err-colour);border-radius:10px;align-items:center;gap:10px;width:500px;padding:0 10px 0 20px;font-size:medium;display:flex;position:absolute;right:20px;box-shadow:0 0 60px #000}.toaster svg{cursor:pointer;width:40px;height:40px;transition:transform .2s;transform:scale(1)}.toaster svg:hover{transform:scale(1.5)}.toaster svg:active{transform:scale(.5)}.text{white-space:pre-wrap;width:100%;overflow:hidden}.recording-score-container{background-color:var(--bg);color:var(--secondary-text);border-radius:20px;flex-direction:column;align-items:center;gap:30px;width:90%;max-width:600px;min-height:300px;max-height:922px;padding:30px 20px 20px;font-size:larger;display:flex;box-shadow:0 0 20px #000000b3}.attempts-container{flex-direction:column;align-items:center;gap:20px;width:100%;padding:20px;display:flex;overflow:hidden auto}.attempts-container::-webkit-scrollbar-thumb{background-color:var(--secondary-text);cursor:pointer;border-radius:999px}.attempts-container::-webkit-scrollbar-track{background:color-mix(var(--secondary-text) 20%, white 80%);border-radius:999px;margin-top:10px;margin-bottom:10px;box-shadow:0 0 20px #000000b3}.attempts-container::-webkit-scrollbar{width:10px}.attempts-container .card{background-color:#0000;border-radius:10px;align-items:center;gap:30px;width:100%;min-height:100px;padding:20px;transition:background-color .3s;display:flex;box-shadow:0 0 10px #000000b3}.attempts-container .card.last-attempt{background-color:var(--tertiary-accent);color:var(--primary-text)}.attempts-container .card.best-attempt{background-color:var(--secondary-text);color:var(--primary-text)}.attempts-container .card:has(svg:hover){background-color:color-mix(in srgb, var(--err-colour) 30%, white 70%)}.attempts-container .card svg{background-color:color-mix(var(--err-colour) 90%, white 10%);color:var(--primary-text);cursor:pointer;border-radius:10px;min-width:50px;min-height:50px;padding:15px;transition:transform .3s;box-shadow:0 0 20px #0006}.attempts-container .card svg:hover{transform:scale(1.3)}.attempts-container .card svg:active{transform:scale(.8)}.attempts-container .description{flex-direction:column;width:100%;height:100%;margin-top:-3px;display:flex}.attempts-container .description:not(.score-first){flex-direction:column-reverse}.attempts-container .description div{font-size:.7rem}.attempts-container .description div.selected{font-size:1rem;font-weight:700}.sort-by-buttons{justify-content:space-between;align-items:center;width:100%;padding-left:20px;display:flex}.dec-inc-button{background-color:var(--tertiary-accent);color:var(--primary-text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:10px;transition:transform .2s;display:flex}.dec-inc-button:hover{transform:scale(1.3)}.dec-inc-button:active{transform:scale(.8)}.dec-inc-button svg{transition:transform .5s;transform:rotateX(180deg)}.dec-inc-button.dec svg{transform:rotateX(0)}.recording-stats-container{gap:10px;width:100%;font-size:medium;display:flex}.recording-stats{border-radius:10px;flex-direction:column;flex:1;gap:8px;padding:20px;display:flex}.recording-stats div{justify-content:space-between;align-items:flex-end;display:flex}.recording-stats div span{max-width:100px}.stat-spinner-bg{aspect-ratio:1;border-radius:50%;width:80%;height:80%;margin:20px;position:relative;box-shadow:0 0 20px #000000b3}@property --arc-deg{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes load-spinner{0%{--arc-deg:0deg}}.stat-spinner{aspect-ratio:1;--arc-deg:0deg;--arc-colour:color-mix(var(--secondary-text) 70%, white 30%);background:conic-gradient(var(--arc-colour) 0deg, var(--arc-colour) var(--arc-deg), transparent var(--arc-deg), transparent 360deg);border-radius:50%;width:100.5%;height:100.5%;animation:1s ease-in-out forwards load-spinner;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stat-spinner.last-score{-webkit-mask:radial-gradient(farthest-side,#0000 85%,#000 85%);mask:radial-gradient(farthest-side,#0000 85%,#000 85%)}.stat-spinner.high-score{width:85.5%;height:85.5%}.stat-spinner-bg .stats{aspect-ratio:1;background-color:var(--bg);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:20px;width:70%;padding-bottom:5%;font-size:min(1.5rem,3cqw);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px #000000b3}.stat-spinner-bg .stats div{flex-direction:column;align-items:center;gap:5px;min-width:2.5em;display:flex}@property --num{syntax:"<integer>";inherits:false;initial-value:0}.stat-spinner-bg .stats div div{counter-reset:num var(--num);border-bottom:.05em solid;animation:1s ease-in-out forwards count-up}.stat-spinner-bg .stats div div:after{content:counter(num)}@keyframes count-up{0%{--num:0}}.stat-spinner-bg .stats div span{font-size:max(1rem,.8em)}.recording-score-container .button-group{justify-content:flex-end;align-items:stretch;gap:20px;width:100%;margin-top:30px;display:flex}.recording-score-container .button-group div{cursor:pointer;color:var(--primary-text);background-color:var(--tertiary-accent);border-radius:10px;justify-content:center;align-items:center;padding:20px;font-size:large;transition:transform .2s,background-color .2s,color .2s;display:flex;box-shadow:0 0 20px #000000b3}.recording-score-container .button-group div.secondary-button{box-shadow:none;color:var(--secondary-text);background-color:var(--bg);border:2px solid}.recording-score-container .button-group div:hover{transform:scale(1.1)}.spinner-container{flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:30px 30px 0;display:flex}.drop-down-trigger{background-color:var(--tertiary-accent);color:var(--primary-text);cursor:pointer;border-radius:10px;justify-content:space-between;align-items:center;min-width:7em;padding:10px;font-size:1em;transition:transform .2s;display:flex}.drop-down-trigger:hover{transform:scale(1.1)}.drop-down-trigger svg{transition:transform .2s}.drop-down-trigger.opened svg{transform:rotate(90deg)}.drop-down-container{background-color:var(--tertiary-accent);opacity:0;transform-origin:top;color:var(--primary-text);border-radius:10px;flex-direction:column;margin-top:10px;transition:transform .3s,opacity .2s;display:flex;position:absolute;transform:scale(.5);box-shadow:0 0 10px #000000b3}.drop-down-container.opened{opacity:1;transform:scale(1)}.drop-down-container div{cursor:pointer;padding:10px;transition:background-color .2s}.drop-down-container div:hover{background-color:var(--secondary-accent);border-radius:5px}.drop-down-container div.selected{background-color:var(--primary-accent);border-radius:5px}.loading-editor-container{justify-content:center;align-items:center;height:100dvh;display:flex;overflow:hidden}.full-container{z-index:0;justify-content:center;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;display:flex;overflow:hidden}.sub-container{--dashboard-height:165px;z-index:0;flex-direction:column;width:100%;height:100%;display:flex}.sub-container .dashboard{min-height:var(--dashboard-height)}.sub-container .dashboard.top{min-height:calc(1.7 * var(--dashboard-height));flex-direction:column;justify-content:center;align-items:center;gap:0;padding:0;display:flex;position:relative}.player-container{justify-content:center;align-items:center;width:100%;display:flex;position:relative}.dir-panel-trigger{position:absolute;bottom:10px;right:20px}.dir-panel-trigger svg{width:30px;min-width:30px;height:30px;min-height:30px;color:var(--secondary-text);cursor:pointer;transition:transform .3s}.dir-panel-trigger svg:hover{transform:scale(1.2)}.dir-panel-trigger svg:active{transform:scale(.8)}.player-wrapper{width:70%;max-width:800px}.title-container{width:100%;min-width:0;transition:background-color .2s;position:relative}.title-container.highlight-bg{cursor:text;background-color:var(--text-highlight)}.title-container .can-scroll .scrolling-text{animation:12s linear infinite marquee}.title-container.paused .can-scroll .scrolling-text{animation:none;transform:translate(0)}.editor-input{word-spacing:0;text-align:center;color:var(--tertiary-text);text-transform:uppercase;border:none;border-radius:0;width:100%;padding:0;font-weight:400;position:absolute;top:50%;left:0;transform:translateY(-50%)}.part-key{width:100%;color:var(--secondary-text);justify-content:center;align-items:center;gap:40px;padding:20px;display:flex}.part-key-display{justify-content:center;align-items:center;gap:20px;display:flex}.center-piece{box-sizing:border-box;--drawer-width:0px;justify-content:flex-end;align-items:center;width:100%;height:100%;padding:0 20px;display:flex;position:relative;overflow:hidden;container:centerpiece/inline-size}.sheet-music-wrapper{width:calc(100% - var(--drawer-width) - 20px);flex-direction:column;justify-content:flex-start;align-items:center;gap:20px;min-width:460px;height:100%;padding:40px 5px 40px 20px;transition:width .5s;display:flex;overflow-y:auto}.sheet-music-wrapper .instructions{color:var(--secondary-text);width:100%;padding-left:30px}@container centerpiece (width<=1100px){.sheet-music-wrapper{width:100%;min-width:0}}.sheet-music-wrapper::-webkit-scrollbar-thumb{background-color:var(--secondary-text);cursor:pointer;border-radius:999px}.sheet-music-wrapper::-webkit-scrollbar-track{background:color-mix(var(--secondary-text) 20%, white 80%);border-radius:999px;margin-top:60px;margin-bottom:60px;box-shadow:0 0 20px #000000b3}.sheet-music-wrapper::-webkit-scrollbar{width:10px}.err-notif{background-color:var(--err-colour);cursor:pointer;opacity:0;pointer-events:none;will-change:width;border-radius:999px;justify-content:flex-start;align-items:center;gap:20px;max-width:70px;max-height:70px;padding:20px;transition:max-width .4s,transform .3s,opacity .15s;display:flex;position:absolute;bottom:40px;right:40px;overflow:hidden;transform:scale(0)}.err-notif.visible{pointer-events:all;opacity:1;transform:scale(1);box-shadow:0 0 10px #0000}.err-notif svg{width:30px;min-width:30px;height:30px;min-height:30px}.err-notif .notif-txt{white-space:nowrap;opacity:0;transition:opacity .2s}.err-notif .notif-txt.sub{margin-top:2px;font-size:small;display:block}.err-notif.expanded .notif-txt{opacity:1}.err-notif.expanded{max-width:400px}.err-notif:active{transform:scale(.9)}.editor-drawer{width:100%;height:100%;display:flex;overflow:auto}.editor-interior{width:100%;height:100%;padding:130px 40px 40px;position:relative;overflow:hidden}.editor-interior .img-err{justify-content:center;align-items:center;width:100%;height:calc(100% - 80px);display:flex}.editor-drawer img{transform-origin:0 0;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;border-radius:20px;width:100%;height:auto;box-shadow:0 5px 20px #000}.mag-button-group,.upload-container,.collapse-button{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000000b3;border-radius:999px;justify-content:center;align-items:center;gap:20px;max-height:65px;padding:20px;transition:transform .3s,width .2s;display:flex;position:absolute;bottom:40px;right:40px}.upload-img-title{text-shadow:-1px -1px 40px #fff,1px -1px 40px #fff,-1px 1px 40px #fff,1px 1px 40px #fff,0 -1px 40px #fff,0 1px 40px #fff,-1px 0 40px #fff,1px 0 40px #fff;white-space:nowrap;text-overflow:ellipsis;width:calc(100% - 100px);max-width:calc(100% - 100px);color:var(--secondary-text);padding:40px;font-size:larger;font-weight:600;position:absolute;top:20px;left:0;overflow:hidden}.upload-container{right:unset;left:40px}.collapse-button{bottom:unset;max-width:60px;max-height:60px;top:40px}.mag-button-group svg,.upload-container svg,.collapse-button svg{min-width:25px;min-height:25px;max-height:25px;transition:transform .3s}.mag-button-group svg:not(.mag):not(.disabled),.upload-container,.collapse-button{cursor:pointer}.mag-button-group svg.disabled{color:var(--secondary-text)}.upload-container svg{pointer-events:none}.mag-button-group svg.mag{margin-right:20px}.mag-button-group svg:hover:not(.mag):not(.disabled),.upload-container:hover,.collapse-button:hover{transform:scale(1.2)}.mag-button-group svg:active:not(.mag):not(.disabled),.upload-container:active,.collapse-button:active{transform:scale(.8)}.tool-group{justify-content:center;align-items:center;gap:20px;transition:gap .2s;display:flex}.tool-group.ref-img-collapsed{gap:0}.instrument-selector-icon{cursor:pointer;width:100px;min-width:100px;max-width:100px;height:100px;min-height:100px;max-height:100px;transition:transform .3s}.ref-img-selector-icon{cursor:pointer;border-radius:20px;width:100px;height:100px;transition:width .3s,height .3s,transform .3s;overflow:hidden;box-shadow:0 5px 20px #000}.ref-img-selector-icon.add-ref{justify-content:center;align-items:center;display:flex}.ref-img-selector-icon.closed{pointer-events:none;width:0;min-width:0;height:0;min-height:0}.instrument-selector-icon:hover,.ref-img-selector-icon:hover:not(.closed),.ref-img-selector-icon.add-ref:hover{transform:scale(1.2)}.instrument-selector-icon:active,.ref-img-selector-icon:active:not(.closed),.ref-img-selector-icon.add-ref:active{transform:scale(.8)}.instrument-selector-icon img{background-color:#0000;border-radius:20px;min-width:100%;max-width:50%;min-height:100%;box-shadow:0 5px 20px #000}.ref-img-selector-icon img{object-position:top;object-fit:contain;width:200%;min-width:200%;max-width:200%;height:200%;min-height:200%;max-height:200%;box-shadow:none;transform:translate(-25%)}.ref-img-selector-icon svg{width:60%;height:60%;color:var(--secondary-text)}.editor-control-button-group{flex-direction:row;justify-content:flex-end;align-items:center;gap:20px;width:100%;height:100%;display:flex}.build-button-editor{background-color:var(--tertiary-accent);width:300px;color:var(--primary-text);cursor:pointer;white-space:nowrap;will-change:width;border-radius:20px;justify-content:center;align-items:center;gap:20px;height:100px;padding:20px;transition:width .3s,min-width .3s,transform .2s,background-color .3s;display:flex;overflow:hidden;box-shadow:0 0 30px #0006}.build-button-editor.err{background-color:var(--err-colour);cursor:not-allowed}.build-button-editor.collapsed{width:76.5px}.build-button-editor.cancel{color:var(--tertiary-text);background-color:#0000;font-weight:700;scale:.9}.build-button-editor svg{width:30px;min-width:30px;height:30px;min-height:30px}.build-button-editor:not(.err):hover{transform:scale(1.05)}.build-button-editor:not(.err):active{transform:scale(.95)}.scroll-container{width:100%;height:100%;overflow:auto}.scroll-container::-webkit-scrollbar-thumb{all:unset}.scroll-container::-webkit-scrollbar-track{all:unset}.scroll-container::-webkit-scrollbar{width:0;height:0}.main-container{background-color:color-mix(in srgb, #7e7e7e 35%, var(--tertiary-accent) 65%);border-radius:50px;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:75%;min-width:260px;max-width:800px;height:50%;min-height:400px;padding:20px 20px 30px;transition:padding .2s;display:flex;overflow:auto}.main-container svg{cursor:pointer;transition:transform .2s}.main-container svg:hover{transform:scale(1.5)}.main-container svg:active{transform:scale(.8)}.main-container .header{border-bottom:3px solid #ffffffb3;justify-content:space-between;align-items:flex-start;width:100%;padding:10px 10px 10px 15px;font-size:larger;display:flex}.main-container .header svg{width:25px;height:25px;margin-top:5px}.body{border-bottom-right-radius:30px;border-bottom-left-radius:0;width:100%;height:100%;position:relative;overflow:hidden}.open-directory-icon{background-color:color-mix(in srgb, #7e7e7e 35%, var(--tertiary-accent) 65%);border-radius:999px;width:45px;height:45px;padding:10px;position:absolute;top:25px;left:15px;box-shadow:0 0 10px #000000b3}.main-container svg.open-directory-icon:hover{transform:scale(1.2)}.main-container svg.open-directory-icon:active{transform:scale(.8)}.sxns-list-container{flex-direction:column;width:100%;height:100%;margin-right:14px;padding-top:105px;padding-left:0;padding-right:15px;display:flex;overflow:auto}.sxns-list-container::-webkit-scrollbar-thumb{background-color:var(--primary-accent);cursor:pointer;border-radius:999px}.sxns-list-container::-webkit-scrollbar-track{background:var(--tertiary-text);border-radius:999px;margin-top:110px;margin-bottom:10px}.sxns-list-container::-webkit-scrollbar{width:8px}.sxns-list-container .header{all:unset;background-color:color-mix(in srgb, #7e7e7e 35%, var(--tertiary-accent) 65%);z-index:10;justify-content:space-between;align-items:center;gap:10px;padding:20px 8px;display:flex;position:absolute;top:0;left:0;right:0;box-shadow:0 10px 10px #0000004d}.close-directory-icon{width:20px;height:20px}.search{border:2px solid #fff;border-radius:999px;flex:1;align-items:center;width:calc(100% - 30px);padding:0 5px;display:flex;overflow:hidden}.sxns-list .title{cursor:pointer;border-radius:10px;align-items:center;gap:8px;width:100%;margin-bottom:5px;padding:10px;transition:background-color .2s;display:flex}.sxns-list .title svg{border-radius:999px;min-width:25px;min-height:25px;padding:5px;transition:rotate .2s,scale .2s;rotate:90deg}.sxns-list .title:not(.selected):hover{background-color:var(--primary-accent)}.sxns-list .title.selected{background-color:var(--tertiary-text)}.sxns-list .title:not(.selected):hover svg{scale:1.5}.sxns-list .title:not(.selected):active svg{scale:.8}.sxns-list .title.collapsed svg{rotate:0deg}.sxns-list .title.contains-selected-sxn{font-weight:bolder}.sxns-list .title.collapsed.contains-selected-sxn svg{background-color:var(--tertiary-text)}.sxns-list .group{opacity:1;grid-template-rows:1fr;transition:grid-template-rows .3s,opacity .2s;display:grid}.sxns-list .group>div{min-height:0;overflow:hidden}.sxns-list .group.collapsed{opacity:0;grid-template-rows:0fr}.playback-cursor-tip{transform-box:fill-box;transform-origin:50%;transition:scale .2s;scale:1}.playback-cursor-tip.inactive{scale:1}.playback-cursor-tip.active{scale:.8}.playback-cursor-tip.hovered{scale:1.2}.instructions-container{box-sizing:border-box;--anim-time:2s;--pause-time:1s;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex}.description{white-space:pre-wrap;width:100%;height:fit-content;margin-top:10px;font-size:medium}.instructions-container .svg-wrapper{flex:1;width:100%;min-height:0;display:flex;overflow-y:hidden}.svg-wrapper svg,.svg-wrapper svg:hover,.svg-wrapper svg:active{all:unset;width:100%;height:100%;display:block}.instructions-container.add-note-with-no-notes{--moveDistX:0;--moveDistY:0}.instructions-container.add-note-with-notes{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0}@keyframes cursor-float-add-note-with-no-notes{0%,to{transform:translate(0)scale(1)}40%{transform:translate(calc(var(--moveDistX) * -1px), calc(var(--moveDistY) * -1px)) scale(1)}50%{transform:translate(calc(var(--moveDistX) * -1px), calc(var(--moveDistY) * -1px)) scale(.7)}60%{transform:translate(calc(var(--moveDistX) * -1px), calc(var(--moveDistY) * -1px)) scale(1)}}svg .cursor,svg .mock-note{transform-box:fill-box;transform-origin:50%}.instructions-container.add-note-with-no-notes .cursor{animation:cursor-float-add-note-with-no-notes var(--anim-time,3s) ease-in-out infinite}@keyframes click-button{0%,40%,60%,to{transform:scale(1)}50%{transform:scale(.92)}}svg .button.no-notes,svg .button-text.no-notes{transform-box:fill-box;transform-origin:50%;animation:click-button var(--anim-time,3s) ease-in-out infinite}@keyframes cursor-float-add-note-with-notes{0%{transform:translate(0)scale(1)}10%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}14%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(.6)}18%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}30%,45%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}60%,72%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}80%{transform:translate(0)scale(1)}84%{transform:translate(0)scale(.6)}88%{transform:translate(0)scale(1)}90%,to{transform:translate(0)scale(1)}}.instructions-container.add-note-with-notes .cursor{animation:6s ease-in-out infinite cursor-float-add-note-with-notes}@keyframes hover-add-left{0%,26%,58%,to{scale:1}30%,54%{scale:1.1}}@keyframes hover-add-right{0%,56%,78%,to{scale:1}60%,74%{scale:1.1}}.instructions-container.add-note-with-notes .mock-add-left{transform-box:fill-box;transform-origin:50%;animation:6s ease-in-out infinite hover-add-left}.instructions-container.add-note-with-notes .mock-add-right{transform-box:fill-box;transform-origin:50%;animation:6s ease-in-out infinite hover-add-right}@keyframes click-note-add-note{0%,10%{fill:#000;transform:scale(1)}12%{fill:#000;transform:scale(1.2)}14%,18%{fill:var(--tertiary-accent);transform:scale(1.2)}20%,82%{fill:var(--tertiary-accent);transform:scale(1.2)}86%{fill:#000;transform:scale(1)}to{fill:#000;transform:scale(1)}}.instructions-container.add-note-with-notes .mock-note{animation:6s ease-in-out infinite click-note-add-note}@keyframes expand-popup-add-note-with-notes{0%,12%{opacity:0;transform:scale(.5)}16%,84%{opacity:1;transform:scale(1)}88%,to{opacity:0;transform:scale(.5)}}.instructions-container.add-note-with-notes .mock-popup-container{transform-box:fill-box;transform-origin:top;animation:6s ease-in-out infinite expand-popup-add-note-with-notes}.mock-popup-container .button-type1 text{fill:var(--tertiary-text)}.mock-popup-container .button-type2 text{fill:var(--primary-text)}.mock-popup-container text{text-anchor:middle;dominant-baseline:central}.mock-popup-container .mock-dotted-button rect{fill:var(--tertiary-accent);transition:fill .2s}.mock-popup-container .mock-dotted-button.dotted rect{fill:var(--primary-text)}.mock-popup-container .mock-dotted-button svg{fill:#0000}.mock-popup-container .mock-dotted-button.dotted svg{fill:var(--tertiary-accent)}.mock-popup-container .mock-type-rect rect{fill:var(--tertiary-accent);stroke:var(--primary-text);transition:fill .2s,stroke .2s}.mock-popup-container .mock-type-rect.selected rect{stroke:var(--primary-text);fill:var(--primary-text)}.mock-popup-container .mock-type-rect.disabled rect{stroke:var(--tertiary-text);fill:var(--tertiary-accent)}.mock-popup-container .mock-type-rect text{fill:var(--primary-text)}.mock-popup-container .mock-type-rect.selected text{fill:var(--tertiary-accent)}.mock-popup-container .mock-type-rect.disabled text{fill:var(--tertiary-text)}.instructions-container.edit-note-duration{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0;--moveDistX4:0;--moveDistY4:0;--scrollDist:0;--animDur:0s}@keyframes scroll-screen-edit-note-duration{0%,43.48%{transform:translate(0)}52.17%,54%{transform:translate(0, calc(var(--scrollDist) * -1px))}62.69%,78.27%{transform:translate(0)}86.96%{transform:translate(0, calc(var(--scrollDist) * -1px))}to{transform:translate(0)}}.instructions-container.edit-note-duration .scroll-group{animation:scroll-screen-edit-note-duration var(--animDur) ease-in-out infinite}@keyframes cursor-float-edit-note-duration{0%{transform:translate(0)scale(1)}14.08%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}16.9%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}18.31%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(.6)}19.72%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}29.58%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}30.99%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(.6)}32.39%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}39.44%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}40.85%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(.6)}42.25%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}49.3%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4) * -1px)) scale(1)}50.7%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4) * -1px)) scale(.6)}52.11%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4) * -1px)) scale(1)}80.28%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4) * -1px)) scale(1)}81.69%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4) * -1px)) scale(.6)}83.1%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4) * -1px)) scale(1)}97.18%{transform:translate(0)scale(1)}98.59%{transform:translate(0)scale(.6)}to{transform:translate(0)scale(1)}}.instructions-container.edit-note-duration .cursor{animation:cursor-float-edit-note-duration var(--animDur) ease-in-out infinite}@keyframes click-note-edit-note-dur{0%,14.08%{fill:#000;transform:scale(1)}14.79%,17.61%{fill:#000;transform:scale(1.2)}18.31%,97.18%{fill:var(--tertiary-accent);transform:scale(1.2)}98.59%,to{fill:#000;transform:scale(1)}}.instructions-container.edit-note-duration .mock-note{animation:click-note-edit-note-dur var(--animDur) ease-in-out infinite}@keyframes click-decrease-edit-note-dur{0%,28.99%{transform:scale(1)}30.43%{transform:scale(1.2)}33.33%{transform:scale(1.1)}36.23%{transform:scale(1.2)}39.13%,to{transform:scale(1)}}.instructions-container.edit-note-duration .mock-dec-dur{transform-origin:50%;transform-box:fill-box;animation:click-decrease-edit-note-dur var(--animDur) ease-in-out infinite}@keyframes click-increase-edit-note-dur{0%,39.13%{transform:scale(1)}40.58%{transform:scale(1.2)}44.93%{transform:scale(1.1)}47.83%{transform:scale(1.2)}50.72%,to{transform:scale(1)}}.instructions-container.edit-note-duration .mock-inc-dur{transform-origin:50%;transform-box:fill-box;animation:click-increase-edit-note-dur var(--animDur) ease-in-out infinite}@keyframes expand-popup-edit-note-duration{0%,16.9%{opacity:0;transform:scale(.5)}18.31%,98.59%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.instructions-container.edit-note-duration .mock-popup-container{transform-box:fill-box;transform-origin:top;animation:expand-popup-edit-note-duration var(--animDur) ease-in-out infinite}.instructions-container.edit-note-pitch{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0;--moveDistX4:0;--moveDistY4:0;--scrollDist:0;--animDur:0s}@keyframes scroll-screen-edit-note-pitch{0%,9.9%{transform:translate(0)}26.56%,30.73%{transform:translate(0, calc(var(--scrollDist) * -1px))}47.4%,52.6%{transform:translate(0)}77.08%,80.73%{transform:translate(0, calc(var(--scrollDist) * -1px))}94.79%,to{transform:translate(0)}}.instructions-container.edit-note-pitch .scroll-group{animation:scroll-screen-edit-note-pitch var(--animDur) ease-in-out infinite}@keyframes cursor-float-edit-note-pitch{0%{transform:translate(0)scale(1)}7.81%,8.85%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}9.38%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(.6)}9.9%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}26.56%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}27.08%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(.6)}27.6%,29.17%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}30.21%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(.6)}30.73%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}47.4%,52.6%{transform:translate(0)scale(1)}77.08%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}77.6%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(.6)}78.12%,79.69%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}80.21%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(.6)}80.73%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}94.79%{transform:translate(0)scale(1)}95.31%{transform:translate(0)scale(.6)}95.83%,to{transform:translate(0)scale(1)}}.instructions-container.edit-note-pitch .cursor{animation:cursor-float-edit-note-pitch var(--animDur) ease-in-out infinite}@keyframes click-note-edit-note-pitch{0%,7.81%{fill:#000;transform:scale(1)}8.33%,9.38%{fill:#000;transform:scale(1.2)}9.9%,94.79%{fill:var(--tertiary-accent);transform:scale(1.2)}95.31%,to{fill:#000;transform:scale(1)}}.instructions-container.edit-note-pitch .mock-note{animation:click-note-edit-note-pitch var(--animDur) ease-in-out infinite}@keyframes click-increase-edit-note-pitch{0%,25.52%{transform:scale(1)}26.56%{transform:scale(1.2)}27.08%{transform:scale(1)}27.6%,29.17%{transform:scale(1.2)}30.21%{transform:scale(1)}30.73%{transform:scale(1.2)}31.77%,to{transform:scale(1)}}.instructions-container.edit-note-pitch .mock-inc-pitch{transform-origin:50%;transform-box:fill-box;animation:click-increase-edit-note-pitch var(--animDur) ease-in-out infinite}@keyframes click-decrease-edit-note-pitch{0%,76.04%{transform:scale(1)}77.08%{transform:scale(1.2)}77.6%{transform:scale(1)}78.12%,79.69%{transform:scale(1.2)}80.73%{transform:scale(1)}81.25%{transform:scale(1.2)}82.29%,to{transform:scale(1)}}.instructions-container.edit-note-pitch .mock-dec-pitch{transform-origin:50%;transform-box:fill-box;animation:click-decrease-edit-note-pitch var(--animDur) ease-in-out infinite}@keyframes expand-popup-edit-note-pitch{0%,8.85%{opacity:0;transform:scale(.5)}9.38%,95.31%{opacity:1;transform:scale(1)}95.83%,to{opacity:0;transform:scale(.5)}}.instructions-container.edit-note-pitch .mock-popup-container{transform-box:fill-box;transform-origin:top;animation:expand-popup-edit-note-pitch var(--animDur) ease-in-out infinite}.instructions-container.edit-note-type{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0;--moveDistX4:0;--moveDistY4:0;--scrollDist:0;--animDur:0s}@keyframes scroll-screen-edit-note-type{0%,7.14%{transform:translate(0)}19.17%,20.3%{transform:translate(0, calc(var(--scrollDist) * -1px))}32.33%,34.21%{transform:translate(0)}46.24%,53.76%{transform:translate(0, calc(var(--scrollDist) * -1px))}67.67%,69.55%{transform:translate(0)}83.46%,84.59%{transform:translate(0, calc(var(--scrollDist) * -1px))}99.25%,to{transform:translate(0)}}.instructions-container.edit-note-type .scroll-group{animation:scroll-screen-edit-note-type var(--animDur) ease-in-out infinite}@keyframes cursor-float-edit-note-type{1.88%{transform:translate(0)scale(1)}5.64%,6.39%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}6.77%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(.6)}7.14%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}19.17%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}19.55%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(.6)}19.92%,20.3%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}32.33%,34.21%{transform:translate(0)scale(1)}46.24%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}46.62%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(.6)}46.99%,48.87%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}52.63%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}53.01%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(.6)}53.38%,53.76%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}67.67%,69.55%{transform:translate(0)scale(1)}83.46%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}83.83%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(.6)}84.21%,84.59%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}98.5%{transform:translate(0)scale(1)}98.87%{transform:translate(0)scale(.6)}99.25%,to{transform:translate(0)scale(1)}}.instructions-container.edit-note-type .cursor{animation:cursor-float-edit-note-type var(--animDur) ease-in-out infinite}@keyframes click-note-edit-note-type{0%,5.64%{fill:#000;transform:scale(1)}6.02%,6.77%{fill:#000;transform:scale(1.2)}7.14%,98.87%{fill:var(--tertiary-accent);transform:scale(1.2)}99.25%,to{fill:#000;transform:scale(1)}}.instructions-container.edit-note-type .mock-note{animation:click-note-edit-note-type var(--animDur) ease-in-out infinite}@keyframes click-sharp-button-edit-note-type{0%,18.05%{transform:scale(1)}18.8%{transform:scale(1.2)}19.55%{transform:scale(1.1)}20.3%,22.18%{transform:scale(1.2)}22.93%,45.49%{transform:scale(1)}45.86%{transform:scale(1.2)}46.62%{transform:scale(1.1)}47.37%,50%{transform:scale(1.2)}50.75%,to{transform:scale(1)}}.instructions-container.edit-note-type .mock-sharp{animation:click-sharp-button-edit-note-type var(--animDur) ease-in-out infinite;transform-origin:50%;transform-box:fill-box}@keyframes click-rest-button-edit-note-type{0%,51.5%{transform:scale(1)}52.26%{transform:scale(1.2)}53.01%{transform:scale(1.1)}53.76%,55.64%{transform:scale(1.2)}56.39%,82.33%{transform:scale(1)}83.08%{transform:scale(1.2)}83.83%{transform:scale(1.1)}84.59%,87.22%{transform:scale(1.2)}87.97%,to{transform:scale(1)}}.instructions-container.edit-note-type .mock-rest{animation:click-rest-button-edit-note-type var(--animDur) ease-in-out infinite;transform-origin:50%;transform-box:fill-box}@keyframes expand-popup-edit-note-type{0%,6.02%{opacity:0;transform:scale(.5)}6.77%,98.12%{opacity:1;transform:scale(1)}98.87%,to{opacity:0;transform:scale(.5)}}.instructions-container.edit-note-type .mock-popup-container{transform-box:fill-box;transform-origin:top;animation:expand-popup-edit-note-type var(--animDur) ease-in-out infinite}.instructions-container.keyboard-shortcuts{--moveDistX1:0;--moveDistX2:0;--moveDistX3:0;--moveDistY1:0;--moveDistY2:0;--moveDistY3:0}@keyframes keyboard-mouse-movement{0%{transform:translate(0)scale(1)}9.8%,11.11%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}11.76%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(.6)}12.42%,15.03%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}19.61%,20.92%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}21.57%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(.6)}22.22%,24.84%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}29.41%,30.72%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}32.03%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(.6)}32.68%,35.29%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}39.87%,41.18%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}41.83%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(.6)}42.48%,45.1%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}49.02%,50.33%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}50.98%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(.6)}51.63%,88.89%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}98.69%,to{transform:translate(0)scale(1)}}.instructions-container.keyboard-shortcuts .cursor{animation:keyboard-mouse-movement var(--animDur) ease-in-out infinite}@keyframes a-key-anim{0%,12.42%{scale:1}13.73%{scale:.6}15.03%,to{scale:1}}.instructions-container.keyboard-shortcuts .key.A{animation:a-key-anim var(--animDur) ease-in-out infinite}@keyframes d-key-anim{0%,32.68%{scale:1}33.99%{scale:.6}35.29%,to{scale:1}}.instructions-container.keyboard-shortcuts .key.D{animation:d-key-anim var(--animDur) ease-in-out infinite}@keyframes backspace-key-anim{0%,22.22%{scale:1}23.53%{scale:.6}24.84%,42.48%{scale:1}43.79%{scale:.6}45.1%,to{scale:1}}.instructions-container.keyboard-shortcuts .key.backspace{animation:backspace-key-anim var(--animDur) ease-in-out infinite}@keyframes w-key-anim{0%,51.63%{scale:1}52.94%{scale:.6}54.25%,55.56%{scale:1}56.86%{scale:.6}58.17%,to{scale:1}}.instructions-container.keyboard-shortcuts .key.W{animation:w-key-anim var(--animDur) ease-in-out infinite}@keyframes s-key-anim{0%,61.44%{scale:1}62.75%{scale:.6}64.05%,65.36%{scale:1}66.67%{scale:.6}67.97%,to{scale:1}}.instructions-container.keyboard-shortcuts .key.S{animation:s-key-anim var(--animDur) ease-in-out infinite}@keyframes q-key-anim{0%,71.24%{scale:1}72.55%{scale:.6}73.86%,to{scale:1}}.instructions-container.keyboard-shortcuts .key.Q{animation:q-key-anim var(--animDur) ease-in-out infinite}@keyframes e-key-anim{0%,77.12%{scale:1}78.43%{scale:.6}79.74%,to{scale:1}}.instructions-container.keyboard-shortcuts .key.E{animation:e-key-anim var(--animDur) ease-in-out infinite}@keyframes r-key-anim{0%,80.39%{scale:1}81.7%{scale:.6}83.01%,86.27%{scale:1}87.58%{scale:.6}88.89%,to{scale:1}}.instructions-container.keyboard-shortcuts .key.R{animation:r-key-anim var(--animDur) ease-in-out infinite}@keyframes left-note-anim{0%,13.73%{opacity:0;fill:#000;scale:1}13.79%,19.54%{opacity:1;fill:#000;scale:1}19.61%,21.57%{opacity:1;fill:#000;scale:1.2}21.63%,24.77%{opacity:1;fill:var(--tertiary-accent);scale:1.2}24.84%,to{opacity:0;fill:#000;scale:1}}.instructions-container.keyboard-shortcuts .mock-note.L{animation:left-note-anim var(--animDur) ease-in-out infinite}@keyframes right-note-anim{0%,35.29%{opacity:0;fill:#000;scale:1}35.36%,39.87%{opacity:1;fill:#000;scale:1}39.93%,41.76%{opacity:1;fill:#000;scale:1.2}41.83%,45.03%{opacity:1;fill:var(--tertiary-accent);scale:1.2}45.1%,to{opacity:0;fill:#000;scale:1}}.instructions-container.keyboard-shortcuts .mock-note.R{animation:right-note-anim var(--animDur) ease-in-out infinite}@keyframes middle-note-anim{0%,9.8%{fill:#000;scale:1}9.87%,11.7%{fill:#000;scale:1.2}11.76%,21.5%{fill:var(--tertiary-accent);scale:1.2}21.57%,29.35%{fill:#000;scale:1}29.41%,31.96%{fill:#000;scale:1.2}32.03%,41.76%{fill:var(--tertiary-accent);scale:1.2}41.83%,48.95%{fill:#000;scale:1}49.02%,50.92%{fill:#000;scale:1.2}50.98%,98.95%{fill:var(--tertiary-accent);scale:1.2}99.02%,to{fill:#000;scale:1}}.instructions-container.keyboard-shortcuts .mock-note.M{animation:middle-note-anim var(--animDur) ease-in-out infinite}.key{transform-origin:50%;transform-box:fill-box}.key text{text-anchor:middle;dominant-baseline:central;fill:var(--primary-text)}.instructions-container.music-player-playback{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0;--moveDistX4:0;--moveDistY4:0;--animDur:0s}@keyframes cursor-float-player-playback{0%{transform:translate(0)scale(1)}16.48%,18.68%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}19.78%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(.6)}20.88%,31.87%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}32.97%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(.6)}34.07%,36.26%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1) * -1px)) scale(1)}41.76%,43.96%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}45.05%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(.6)}46.15%,48.35%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2) * -1px)) scale(1)}59.34%,61.54%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}62.64%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(.6)}63.74%,65.93%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3) * -1px)) scale(1)}71.43%,73.63%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4) * -1px)) scale(1)}74.73%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4) * -1px)) scale(.6)}75.82%,78.02%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4) * -1px)) scale(1)}97.8%,to{transform:translate(0)scale(1)}}.instructions-container.music-player-playback .cursor{animation:cursor-float-player-playback var(--animDur) ease-in-out infinite}.mock-music-player svg{fill:var(--primary-text)}.mock-music-player line{stroke:var(--primary-text)}.mock-music-player .player-button{fill:var(--primary-text);transform-origin:50%;transform-box:fill-box;transition:scale .2s;scale:1}.mock-music-player .player-button.clicked{scale:.8}.mock-music-player .player-button.hovered{scale:1.5}.metronome .player-button.hovered{scale:1.2}.mock-music-player .metronome rect{fill:#0000;transition:fill .2s}.mock-music-player .metronome.selected rect,.mock-music-player .metronome svg{fill:var(--primary-text)}.mock-music-player .metronome.selected svg{fill:var(--tertiary-accent)}.instructions-container.music-player-volume{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0;--animDur:0s}@keyframes cursor-float-player-volume{0%{transform:translate(0)scale(1)}18.29%,20.73%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}21.95%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}23.17%,28.05%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}29.27%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}30.49%,32.93%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}45.12%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}47.56%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(.6)}57.32%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(.6)}67.07%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(.6)}68.29%,70.73%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}85.37%,to{transform:translate(0)scale(1)}}.instructions-container.music-player-volume .cursor{animation:cursor-float-player-volume var(--animDur) linear infinite}.instructions-container.music-player-metronome{--moveDistX1:0;--moveDistY1:0;--animDur:0s}@keyframes cursor-float-player-metronome{0%{transform:translate(0)scale(1)}27.78%,33.33%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}36.11%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}38.89%,55.56%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}58.33%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}61.11%,66.67%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}94.44%,to{transform:translate(0)scale(1)}}.instructions-container.music-player-metronome .cursor{animation:cursor-float-player-metronome var(--animDur) ease-in-out infinite}.instructions-container.cursor-playback{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--animDur:0s}@keyframes cursor-float-cursor-playback{0%{transform:translate(0)scale(1)}19.48%,22.08%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}23.38%,24.68%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}44.16%,46.75%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(.6)}49.35%,51.95%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}71.43%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}72.73%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}74.03%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}75.32%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}76.62%,79.22%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}97.4%,to{transform:translate(0)scale(1)}}.instructions-container.cursor-playback .cursor{animation:cursor-float-cursor-playback var(--animDur) linear infinite}.instructions-container.cursor-regions{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0;--animDur:0s}@keyframes cursor-float-cursor-regions{0%{transform:translate(0)scale(1)}22.06%,25%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}26.47%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}27.94%,29.41%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}30.88%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}32.35%,35.29%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}45.59%,48.53%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}50%,51.47%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(.6)}61.76%,64.71%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(.6)}75%,77.94%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(.6)}79.41%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}91.18%,94.12%{transform:translate(0)scale(1)}95.59%{transform:translate(0)scale(.6)}97.06%,to{transform:translate(0)scale(1)}}.instructions-container.cursor-regions .cursor{animation:cursor-float-cursor-regions var(--animDur) linear infinite}.instructions-container.no-ref-img{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0;--animDur:0s}.instructions-container.no-ref-img .upload-button,.instructions-container.ref-img .upload-button{fill:var(--primary-text);transform-origin:50%;transform-box:fill-box;filter:url(#drop-shadow);opacity:1;transition:scale .2s,opacity .2s;position:relative;scale:1}.instructions-container.no-ref-img .upload-button svg,.instructions-container.ref-img .upload-button svg{fill:var(--secondary-text)}.instructions-container.no-ref-img .upload-button.hovered,.instructions-container.ref-img .upload-button.hovered{scale:1.1}.instructions-container.no-ref-img .upload-button.clicked,.instructions-container.ref-img .upload-button.clicked{scale:.8}.instructions-container.ref-img .upload-button.hidden{opacity:0;scale:.5}.instructions-container.no-ref-img .mock-file-input,.instructions-container.ref-img .mock-file-input{opacity:0;transform-origin:50%;transform-box:fill-box;transition:opacity .2s,transform .2s;transform:scale(.5)}.instructions-container.no-ref-img .mock-file-input.open,.instructions-container.ref-img .mock-file-input.open{opacity:1;transform:scale(1)}@keyframes cursor-float-no-ref-img{0%{transform:translate(0)scale(1)}30%,34%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}36%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}38%,40%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}70%,74%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}76%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(.6)}78%,82%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}96%,to{transform:translate(0)scale(1)}}.instructions-container.no-ref-img .cursor{animation:cursor-float-no-ref-img var(--animDur) ease-in-out infinite}.instructions-container.ref-img{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0;--moveDistX4:0;--moveDistY4:0;--moveDistX5:0;--moveDistY5:0;--moveDistX6:0;--moveDistY6:0;--animDur:0s}@keyframes cursor-float-ref-img{0%{transform:translate(0)scale(1)}12.3%,13.93%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}14.75%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}15.57%,16.39%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}22.13%,23.77%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(1)}24.59%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(.6)}25.41%,27.05%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(1)}31.15%,32.79%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}33.61%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(.6)}34.43%,36.07%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}44.26%,45.9%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4)* -1px)) scale(1)}46.72%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4)* -1px)) scale(.6)}47.54%,49.18%{transform:translate(calc(var(--moveDistX4) * -1px), calc(var(--moveDistY4)* -1px)) scale(1)}65.57%,66.39%{transform:translate(calc(var(--moveDistX5) * -1px), calc(var(--moveDistY5)* -1px)) scale(1)}67.21%{transform:translate(calc(var(--moveDistX5) * -1px), calc(var(--moveDistY5)* -1px)) scale(.6)}68.03%,69.67%{transform:translate(calc(var(--moveDistX5) * -1px), calc(var(--moveDistY5)* -1px)) scale(1)}81.97%,83.61%{transform:translate(calc(var(--moveDistX6) * -1px), calc(var(--moveDistY6)* -1px)) scale(1)}84.43%{transform:translate(calc(var(--moveDistX6) * -1px), calc(var(--moveDistY6)* -1px)) scale(.6)}85.25%,86.89%{transform:translate(calc(var(--moveDistX6) * -1px), calc(var(--moveDistY6)* -1px)) scale(1)}99.18%,to{transform:translate(0)scale(1)}}.instructions-container.ref-img .cursor{animation:cursor-float-ref-img var(--animDur) ease-in-out infinite}.mock-ref-img-tab{opacity:0;transition:scale .2s,opacity .2s;scale:.5}.mock-ref-img-tab.open{opacity:1;scale:1}.mock-ref-img-tab .mock-ref-img-button{transform-origin:50%;transform-box:fill-box;transition:scale .1s;scale:1}.mock-ref-img-tab .mock-ref-img-button svg,.mock-ref-img-tab .mock-ref-img-button text{fill:var(--primary-text)}.mock-ref-img-tab .mock-ref-img-button.clicked{transform-origin:50%;transform-box:fill-box;transition:scale .1s;scale:.8}.mock-ref-img-tab .mock-ref-img-button.hovered{transform-origin:50%;transform-box:fill-box;transition:scale .1s;scale:1.3}.instructions-container.instrument-picker-instructions{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--animDur:0s}@keyframes cursor-float-picker{0%{transform:translate(0)scale(1)}28.85%,32.69%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}34.62%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(.6)}36.54%,38.46%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}57.69%,61.54%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}90.38%,94.23%{transform:translate(0)scale(1)}96.15%{transform:translate(0)scale(.6)}98.08%,to{transform:translate(0)scale(1)}}.instructions-container.instrument-picker-instructions .cursor{animation:cursor-float-picker var(--animDur) ease-in-out infinite}.instructions-container.instrument-picker-instructions .upload-button{fill:var(--primary-text);transform-origin:50%;transform-box:fill-box;filter:url(#drop-shadow);opacity:1;transition:scale .2s,opacity .2s;position:relative;scale:1}.instructions-container.instrument-picker-instructions .upload-button svg{fill:var(--secondary-text)}.instructions-container.instrument-picker-instructions .upload-button.hovered{scale:1.1}.instructions-container.instrument-picker-instructions .upload-button.clicked{scale:.8}.instructions-container.dealing-with-errs{--moveDistX1:0;--moveDistY1:0;--moveDistX2:0;--moveDistY2:0;--moveDistX3:0;--moveDistY3:0;--animDur:0s}@keyframes cursor-float-errs{0%{transform:translate(0)scale(1)}15.96%,31.91%{transform:translate(calc(var(--moveDistX1) * -1px), calc(var(--moveDistY1)* -1px)) scale(1)}47.87%,50%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}51.06%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(.6)}52.13%,54.26%{transform:translate(calc(var(--moveDistX2) * -1px), calc(var(--moveDistY2)* -1px)) scale(1)}59.57%,64.89%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(1)}65.96%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(.6)}67.02%,72.34%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(1)}73.4%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(.6)}74.47%,79.79%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(1)}80.85%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(.6)}81.91%,87.23%{transform:translate(calc(var(--moveDistX3) * -1px), calc(var(--moveDistY3)* -1px)) scale(1)}97.87%,to{transform:translate(0)}}.instructions-container.dealing-with-errs .cursor{animation:cursor-float-errs var(--animDur) ease-in-out infinite}.instructions-container.dealing-with-errs .warning-button,.instructions-container.dealing-with-errs .add-button{transform-origin:50%;transform-box:fill-box;transition:scale .2s;scale:1}.instructions-container.dealing-with-errs .warning-button.hovered{scale:1.2}.instructions-container.dealing-with-errs .warning-button.clicked{scale:.8}