:root{--paino-height:4rem;--paino-white-key-width:1.2rem;--paino-black-key-width:0.8rem;--paino-border-color:rgba(0,0,0,.4);--piano-white-key-color:#fff;--piano-black-key-color:#232323;--paino-white-key-highlight-color:#1e90ff;--paino-black-key-highlight-color:#1e90ff;--paino-white-key-left-hand-highlight-color:#f08080;--paino-black-key-left-hand-highlight-color:#f08080;--paino-white-key-soprano-highlight-color:#1e90ff;--paino-black-key-soprano-highlight-color:#1e90ff;--paino-white-key-alto-highlight-color:gold;--paino-black-key-alto-highlight-color:gold;--paino-white-key-tenor-highlight-color:#90ee90;--paino-black-key-tenor-highlight-color:#90ee90;--paino-white-key-bass-highlight-color:#f08080;--paino-black-key-bass-highlight-color:#f08080}.paino{border:1px solid rgba(0,0,0,.4);border:1px solid var(--paino-border-color);display:flex;height:4rem;height:var(--paino-height);overflow-x:auto;width:-moz-fit-content;width:fit-content}.paino .key:not(:last-child){border-right:1px solid rgba(0,0,0,.4);border-right:1px solid var(--paino-border-color)}.paino .key.color-white{background-color:#fff;background-color:var(--piano-white-key-color);width:1.2rem;width:var(--paino-white-key-width)}.paino .key.color-black{background-color:#232323;background-color:var(--piano-black-key-color);border-bottom:1px solid rgba(0,0,0,.4);border-bottom:1px solid var(--paino-border-color);border-left:1px solid rgba(0,0,0,.4);border-left:1px solid var(--paino-border-color);border-right:1px solid rgba(0,0,0,.4);border-right:1px solid var(--paino-border-color);height:60%;height:var(--paino-black-key-height);width:.8rem;width:var(--paino-black-key-width);z-index:1}.paino .key.color-black,.paino .key.color-white:nth-of-type(12n+10),.paino .key.color-white:nth-of-type(12n+12),.paino .key.color-white:nth-of-type(12n+3),.paino .key.color-white:nth-of-type(12n+5),.paino .key.color-white:nth-of-type(12n+8){margin:0 0 0 -.4rem;margin:0 0 0 calc(var(--paino-black-key-width)/-2)}.paino .key.color-white.key-on{background-color:#1e90ff;background-color:var(--paino-white-key-highlight-color)}.paino .key.color-black.key-on{background-color:#1e90ff;background-color:var(--paino-black-key-highlight-color)}.paino .key.color-white.key-on.left{background-color:#f08080;background-color:var(--paino-white-key-left-hand-highlight-color)}.paino .key.color-black.key-on.left{background-color:#f08080;background-color:var(--paino-black-key-left-hand-highlight-color)}.paino .key.color-white.key-on.soprano{background-color:#1e90ff;background-color:var(--paino-white-key-soprano-highlight-color)}.paino .key.color-black.key-on.soprano{background-color:#1e90ff;background-color:var(--paino-black-key-soprano-highlight-color)}.paino .key.color-white.key-on.alto{background-color:gold;background-color:var(--paino-white-key-alto-highlight-color)}.paino .key.color-black.key-on.alto{background-color:gold;background-color:var(--paino-black-key-alto-highlight-color)}.paino .key.color-white.key-on.tenor{background-color:#90ee90;background-color:var(--paino-white-key-tenor-highlight-color)}.paino .key.color-black.key-on.tenor{background-color:#90ee90;background-color:var(--paino-black-key-tenor-highlight-color)}.paino .key.color-white.key-on.bass{background-color:#f08080;background-color:var(--paino-white-key-bass-highlight-color)}.paino .key.color-black.key-on.bass{background-color:#f08080;background-color:var(--paino-black-key-bass-highlight-color)}*{box-sizing:border-box}:root{--main-color:#fff;--header-bg-color:#0f0f0f;--header-color:#888;--footer-bg-color:#0f0f0f;--footer-color:#888;--paino-height:6rem;--paino-white-key-width:1.5rem;--paino-black-key-width:1rem;--paino-black-key-height:60%;--icon-size:2rem}html{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:16px}body{height:100%;margin:0}.app{flex-direction:column;min-height:100vh}.app,main{display:flex}main{flex:1 1}.main-header{align-items:center;background-color:#0f0f0f;background-color:var(--header-bg-color);color:#888;color:var(--header-color);display:flex;font-family:Futura,sans-serif;line-height:3rem;padding:0 1rem}.main-header .logo{font-size:1.2rem;font-weight:700;margin-left:auto}.main-header nav{display:flex;gap:1rem}.main-header nav a{color:#fff}.home h1{font-size:4rem;line-height:5rem;margin-bottom:2rem}.hero,.home{flex:1 1}.hero{align-items:center;background-color:#cdb5da;display:flex;font-family:Futura,sans-serif;gap:5rem;justify-content:center;padding:5rem 0}.hero img{box-shadow:0 0 1rem rgba(0,0,0,.4);width:50%}.hero-content{text-align:right}.hero>*{flex:1 1}.hero p{font-size:2rem;line-height:3rem;margin-bottom:2rem}.home .container{margin:0 auto;max-width:960px;padding:2rem 1rem}.home .caption p{font-size:2rem;line-height:3rem;margin-bottom:2rem}.sketch{flex:1 1}.columns{display:flex;flex:1 1}.sketch .container{display:flex;flex-direction:column;overflow:auto}.editor-container{width:44.44444%}.score-container{width:55.55556%}.music-score-wrapper{border-left:.5px solid hsla(0,0%,100%,.3);flex:1 1}.app>footer{background-color:#0f0f0f;background-color:var(--footer-bg-color);font-size:.8rem;line-height:2rem;text-align:center}.app>footer,.app>footer a{color:#888;color:var(--footer-color)}.paino{margin:0}.abcjs-container>div{margin-bottom:3rem}.abcjs-note.current{fill:#1e90ff}.piano-wrapper{background-color:#242424;border-bottom:.5px solid hsla(0,0%,100%,.3);display:none;overflow:auto}.piano-wrapper.is-visible{display:block}.paino{margin:0 auto}.controls{background-color:#242424;gap:1rem;height:3rem;overflow:auto;padding:0 .5rem}.controls,.controls label{align-items:center;display:flex}.controls label{color:#888;color:var(--header-color);font-weight:700;gap:.5rem;height:2rem;height:var(--icon-size)}.controls label input{height:100%;width:3rem}.icon-button{align-items:center;aspect-ratio:1;border:none;border-radius:50%;display:flex;height:2rem;height:var(--icon-size);justify-content:center;padding:0;width:2rem;width:var(--icon-size)}.icon-button img{height:1rem;height:calc(var(--icon-size)*.5);width:1rem;width:calc(var(--icon-size)*.5)}.icon-button.toggable{opacity:.5}.icon-button.toggable.toggled{opacity:1}
/*# sourceMappingURL=main.1af559a0.css.map*/