@import"https://fonts.googleapis.com/css2?family=Nunito&display=swap";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--row-template: 1.4vh}*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}body{font-family:Nunito,sans-serif;background-image:url(/assets/paperBackground-CGm88MTq.jpg);background-size:cover}@media screen and (max-width: 1049px){body{display:flex;justify-content:center;align-items:center;height:100vh;text-align:center;background-color:#f8f8f8}#mobile-message{display:block;font-size:300%;color:#333}#content{display:none}}@media screen and (min-width: 1050px){#mobile-message{display:none}#content{width:100%;height:100%;display:flex;align-items:center;flex-direction:column}}.hidden{visibility:hidden}.position{grid-row:E4;grid-column:3}#note-lines{display:grid;width:100%;height:70vh;align-content:center;grid-template-columns:repeat(23,1fr);grid-template-rows:repeat(32,var(--row-template))}.line{border:.5px solid black;height:1px}.staff-1{grid-column:1 / -1;grid-row:12}.staff-2{grid-column:1 / -1;grid-row:14}.staff-3{grid-column:1 / -1;grid-row:16}.staff-4{grid-column:1 / -1;grid-row:18}.staff-5{grid-column:1 / -1;grid-row:20}#loader{position:absolute;margin-top:10px;top:2%;right:2%;border:4px solid #cacaca;border-top:4px solid #000;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.paint-blue{grid-area:8 / 1 / 25 / 2;background:linear-gradient(135deg,#74baf3,#42a5f5);border-radius:15px;box-shadow:0 4px 10px #0003;transition:transform .3s ease,box-shadow .3s ease;opacity:.5}#bass-clef{grid-area:8 / 1 / 25 / 2;height:93%;transform:translate(-18%,-1%);-webkit-user-select:none;user-select:none}#violin-clef{grid-area:8 / 1 / 25 / 2;height:93%;transform:translate(-18%,3%);-webkit-user-select:none;user-select:none}.note{background:#000;justify-self:center;height:192%;aspect-ratio:3/2;border-radius:50%;transform:rotate(-13deg) translateY(-49%)}.ledger-line{background:#000;width:calc(var(--row-template) * 4.5);transform:translate(-5%);justify-self:center}.note-stem-up{position:absolute;transform:rotate(13deg) translate(816%,-90%);height:316%;width:9%;background-color:#000}.note-stem-down{position:absolute;height:312%;width:9%;transform:rotate(13deg) translate(-185%,15%);background-color:#000}.fade-out{animation:fadeOut .55s ease-out forwards}.fade-out-slow{animation:fadeOut .85s ease-out forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-in{animation:fadeIn .55s ease-out forwards}.fade-in-slow{animation:fadeIn .85s ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:100}}.blur-out{animation:blurOut .55s ease-out forwards}@keyframes blurOut{0%{filter:blur(0px)}to{filter:blur(40px)}}.blur-in{animation:blurIn .55s ease-out forwards}@keyframes blurIn{0%{filter:blur(40px)}to{filter:blur(0px)}}.bottom-section{display:flex;height:30vh;flex-direction:column;gap:1%}#piano{position:relative;display:flex;border:3px solid black;border-radius:12px;height:73%}#piano:after,#piano:before{content:"";position:absolute;height:125%;width:101%;top:49%;left:50%;background-color:gray;transform:translate(-50%,-57%);padding:3px;border-radius:10px;border:3px solid #262626;z-index:-1}.piano:before{filter:blur(1.5rem);opacity:1}.first-key{border-radius:8px 0 0 8px}.last-key{border-radius:0 8px 8px 0}.white-key{position:relative;height:100%;aspect-ratio:1/6;background:#fff;border:1px solid black}.white-key:hover:not(:has(.black-key:hover)){background:#ffffffdc}.white-key:active:not(:has(.black-key:active)){background-color:#ffffffb6}.black-key{position:absolute;z-index:1;right:-43%;height:54%;aspect-ratio:1/4;background:#111}.black-key:hover{background:#000}.black-key:active{border-left:1px solid grey;border-right:1px solid grey;border-bottom:1px solid grey;border-top:none}#stopwatch{position:absolute;font-size:400%;left:101%;height:100%;width:auto;border:1px solid black;visibility:hidden}.control-panel{display:flex;gap:1%;border:solid #bab6b6;width:auto;height:4vh;border-radius:8px}.control-panel-element{height:auto;width:auto;padding-left:1%;padding-right:1%;gap:5px;background-color:#e9e9ed;border-radius:5px;border:1px solid #808080;font-size:1.5vh;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}#clef-switch-btn{width:6vw;white-space:nowrap}.custom-btn:hover{background-color:#ddd}.custom-btn:active{background-color:#bebebe}.control-panel-element-left-align{margin-left:auto;margin-right:0}#note-control-form{display:flex;justify-content:space-evenly;background:#bab6b6;flex:1;border-radius:6px}#lowest-note-form{border-radius:5px 2px 2px 5px}#highest-note-form{border-radius:2px 5px 5px 2px}.note-control-form-element{flex:1;gap:5%;background-color:#e9e9ed;border:1px solid #808080;font-size:1.5vh;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE3SURBVFiF7ddNSsNQFMXxnzrxcwdKxUn3oSiup7iB6j7EiQNLwbGKK9BBB4q4BbVCqzM/6iANaC3xJSavIP7hjN7jnkNyk3cfxVnFNW5R+0WdQszhEoOhOpiPGeDgk3mqw1jmO2PMUzWqNt/AS0aAV2xXZV7DfYZ5qi7WyjYfbbqf1MFCmQGaOcxTNUMKTwcGmMqXN5zQwjPYxFLg/iec4a1IqH9CWEEb/aGOUY9p3vW96x+Ha5XTHmOeqhUjQD8jQC9vsdD/QCiDGAHOM9ZOCtTLTV3ScKOP/wHLMQKQdHtL8s57OIpp/rfIcxhtYTFw/zNOlXgY7ck/D+yGFA79DN/z5S2fiY9kJEPpXYB5JUNpyroJjuUpjYwAlV9MUvbHmEe7msEsLnxtuqiXU5KmvMGV5KpeiA9IzKWHWjpPzQAAAABJRU5ErkJggg==) 16 16,auto}.note-control-form-element:hover{background-color:#d1d1d1}.note-box{height:85%;aspect-ratio:1/1;padding-right:-50px;display:flex;justify-content:center;align-items:center;background-color:#fff;border:1px solid #808080;border-radius:5px}.white-key-label{position:absolute;bottom:.5vh;left:50%;transform:translate(-50%);font-size:1.5vh;color:#000;pointer-events:none;-webkit-user-select:none;user-select:none}.grey-color{color:gray}#c4-key-label{visibility:visible}.note-label{position:absolute;bottom:.5vh;left:50%;transform:rotate(13deg) translate(-50%,10%);font-size:1.5vh;color:#fff;pointer-events:none;-webkit-user-select:none;user-select:none}.black-key-label{position:absolute;bottom:.5vh;left:50%;transform:translate(-50%);font-size:1.3vh;color:#fff;pointer-events:none;-webkit-user-select:none;user-select:none}.paint-red{background:linear-gradient(135deg,#f37474,#f54242);box-shadow:0 4px 10px #0003;transition:transform .3s ease,box-shadow .3s ease;opacity:.8;grid-row:E4;grid-column:3}/*!
 * Toastify js 1.12.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */.toastify{padding:12px 20px;color:#fff;display:inline-block;box-shadow:0 3px 6px -1px #0000001f,0 10px 36px -4px #4d60e84d;background:-webkit-linear-gradient(315deg,#73a5ff,#5477f5);background:linear-gradient(135deg,#73a5ff,#5477f5);position:fixed;opacity:0;transition:all .4s cubic-bezier(.215,.61,.355,1);border-radius:2px;cursor:pointer;text-decoration:none;max-width:calc(50% - 20px);z-index:2147483647}.toastify.on{opacity:1}.toast-close{background:transparent;border:0;color:#fff;cursor:pointer;font-family:inherit;font-size:1em;opacity:.4;padding:0 5px}.toastify-right{right:15px}.toastify-left{left:15px}.toastify-top{top:-150px}.toastify-bottom{bottom:-150px}.toastify-rounded{border-radius:25px}.toastify-avatar{width:1.5em;height:1.5em;margin:-7px 5px;border-radius:2px}.toastify-center{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content;max-width:-moz-fit-content}@media only screen and (max-width: 360px){.toastify-right,.toastify-left{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content}}