:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%;height:100%;overflow-x:hidden}.banner{padding-left:2em;padding-right:2em;padding-bottom:1em;text-align:center;width:100%}.nav-container{margin-top:-1em;display:flex;justify-content:center;gap:5px}.nav-button{border:1px solid black;border-radius:5px;padding:3px;align-self:center}#notation-container,#keyboard-container{display:flex;justify-content:center}#keyboard-parent{background-color:#000;padding:12px;border-radius:15px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px}.keyboard-key{height:5rem}.black{background-color:#000;width:1.5rem;height:6rem;padding-top:2rem;position:absolute;margin-left:-1rem}.white{background-color:#fff;width:2rem;height:10rem}.pressed{background-color:silver}.scale-link{cursor:pointer;list-style:none;background-color:#e6e6e6}#scale-parent{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:50%;margin:auto}#play-scale-parent{display:flex}#play-scale{max-width:25%;margin:auto}body{font-family:Roboto,sans-serif}.exercise-description-container{display:flex;justify-content:center;gap:1em}.notes-container{width:50vw;height:25vh;border:1px solid black;border-radius:5px;margin:1em auto auto}.notes-container>*{width:100%}.notes-shaded{background-color:gray}.exercise-measure-container{display:flex;justify-content:center;margin-top:1em}.exercise-button-container{display:flex;justify-content:center}