.upcoming-notes-container{justify-content:center;align-items:center;width:100%;height:34px;min-height:30px;padding-top:4px;padding-bottom:4px;font-size:26px;display:flex;overflow:hidden}.upcoming-notes{white-space:nowrap;align-items:center;height:100%;transition:transform .3s;display:flex;overflow-x:hidden}.upcoming-note{font-family:var(--font-museo-sans);align-items:center;height:100%;padding:0 12px;transition:color .3s,opacity .3s,font-size .3s;display:flex}
:root{--background-color-light:#c6ee67;--background-color-dark:#333;-webkit-font-smoothing:antialiased;font-family:var(--font-museo-sans);overscroll-behavior:none;overflow:hidden}body{-webkit-overflow-scrolling:touch;overflow-y:hidden}.version-text{color:#999;-webkit-user-select:none;user-select:none;font-size:8px}.app-container{text-align:center;overscroll-behavior:none;background-color:#c6ee67;max-width:520px;max-height:-webkit-fill-available;max-height:-moz-available;max-height:stretch;position:relative;overflow:hidden}.spinner{z-index:1000;border:4px solid #0000001a;border-left-color:#fff;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin;position:absolute;top:calc(50% - 20px);left:calc(50% - 20px)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.piano-grid{grid-gap:0px;aspect-ratio:1;width:100%;padding:env(safe-area-inset-top)env(safe-area-inset-right)env(safe-area-inset-bottom)env(safe-area-inset-left);box-sizing:border-box;background:linear-gradient(#c6ee67,#28903f);grid-template-columns:repeat(3,1fr);justify-content:center;align-items:center;margin:auto;display:grid;position:relative;top:0}.overlay{color:#000;z-index:100;-webkit-user-select:none;user-select:none;cursor:pointer;background:linear-gradient(#fff0 1%,#fffc 50%);justify-content:center;align-items:center;width:100%;height:100%;font-size:24px;font-weight:700;transition:opacity .3s ease-out;animation:1.5s infinite pulse;display:flex;position:absolute;top:0;left:0}.overlay.fade-out{opacity:0}@keyframes pulse{0%{font-size:24px}50%{font-size:32px}to{font-size:24px}}.piano-button{-webkit-user-select:none;user-select:none;cursor:pointer;width:100%;height:100%;font-size:18px;font-family:var(--font-museo-sans);color:#fff;-webkit-tap-highlight-color:#0000001a;background-color:#0000;border:none;font-weight:700;transition:all .3s,outline .3s;position:relative}.piano-button:active{-webkit-tap-highlight-color:#ffffff1a;background-color:#ffffff1a;outline:none}.piano-button span{opacity:1;transition:opacity .5s}.piano-button.hide-label span{opacity:0}.highlighted{outline-offset:-6px;z-index:80;outline:6px solid #ff7fff;transition:all .3s}.error-flash{background-color:#f00c;transition:background-color .7s}.song-selector-container{font-family:var(--font-museo-sans);height:100%;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;text-align:-webkit-center;background-color:#fff;padding-bottom:80px}.song-selector{appearance:none;font-family:var(--font-museo-sans);color:#1dafec;cursor:pointer;background-color:#fff;background-position:right 10px center;background-repeat:no-repeat;background-size:16px 16px;border:1px solid #d9d9d9;border-radius:6px;outline:none;margin:8px 0;padding:10px 40px 10px 15px;font-size:16px;font-weight:700}.checkbox-container{text-align:right;width:max-content}.show-label-checkbox{font-family:var(--font-museo-sans);-webkit-user-select:none;user-select:none;padding:8px 0;font-size:16px}.switch input{opacity:0;-webkit-user-select:none;user-select:none;width:0;height:0}.switch{vertical-align:middle;width:60px;height:34px;margin-left:12px;display:inline-block;position:relative}.slider{cursor:pointer;background-color:#bcbec0;border-radius:34px;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:26px;height:26px;transition:all .4s;position:absolute;bottom:4px;left:4px}input:checked+.slider{background-color:#1dafec}input:checked+.slider:before{transform:translate(26px)}.rounding-image{pointer-events:none;z-index:40;width:100%;height:fit-content;position:absolute;bottom:0}.checkbox-label{vertical-align:middle;font-size:18px;font-weight:700}@media (min-width:0){.app-container{width:100%;height:100vh}}@media (min-width:510px){:root{--background-color-dark:#ddd;--background-color-light:linear-gradient(135deg,#888,#bbb)!important}.app-container{border:5px solid #333;border-radius:2rem;align-self:center;width:390px;height:760px}.song-selector-container{height:180px}}
