:where(html){-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;line-height:1.15}:where(h1){-webkit-margin-after:.67em;-webkit-margin-before:.67em;font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){-webkit-margin-after:0;-webkit-margin-before:0;margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:initial;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:initial}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-webkit-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}:root{--header-height:3rem;--sidebar-button-color:#fff;--sidebar-width:13rem;--staff-height:13.75rem;--piano-key-width:3rem;--active-color:#0af;--text-title-color:#fff;--text-settings-color:#666;--highlight-dark-color:maroon;--highlight-transparent-color:#c2545466}@media screen and (max-height:450px){:root{--header-height:0px;--sidebar-button-color:#000}}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:100%;height:100vh;margin:0}body,button{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.app-view{display:block;position:relative;text-align:center}.header{align-items:center;background-color:#2e2e2e;color:#fff;display:flex;height:3rem;height:var(--header-height);justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:3}.header-title{font-size:1.5rem;font-weight:600}.header .github-link{position:absolute;right:.5rem;top:.5rem}.header .github-link>img{height:2rem;width:2rem}@media screen and (max-height:450px){.header{visibility:hidden}}.main-view{margin-top:3rem;margin-top:var(--header-height);position:absolute;width:100%}.main-view-content{display:flex}.main-view-content>*{align-items:center;display:flex;flex-direction:column}.staff-keyboard-view{flex:1 0 auto;gap:1.5rem}.piano-container,.staff-keyboard-view{align-items:center;display:flex;flex-direction:column;width:100%}.piano-container{--key-width:var(--piano-key-width);--key-focus-color:#c2e4ff;--key-playing-color:var(--active-color);--kbd-background:#f7f7f7;--kbd-shadow:0px 2px 2px 1px #909090;gap:2rem;overflow-x:auto;padding:0 0 6px}.piano,.piano *{box-sizing:initial}.piano{cursor:default;flex-direction:row;margin:0 auto;padding-right:5px;width:-webkit-min-content;width:min-content}.key,.piano{display:flex}.key{align-items:center;background-color:#fff;border:1px solid #000;border-bottom-left-radius:calc(var(--key-width)/7);border-bottom-right-radius:calc(var(--key-width)/7);box-shadow:2px 3px 3px #000;color:#000;flex-direction:column;font-size:calc(var(--key-width)/2.7);height:calc(var(--key-width)*3.9);justify-content:flex-end;margin:0;outline:none;padding:0;width:var(--key-width)}.key.black{background-color:#000;box-shadow:3px 3px 3px #828282;color:#fff;font-size:calc(var(--key-width)/3);height:calc(var(--key-width)*2.5);margin-left:calc(var(--key-width)/-3.333 - 1px);margin-right:calc(var(--key-width)/-3.333 - 1px);width:calc(var(--key-width)/1.667);z-index:2}.key.black:focus,.key.black:hover{color:#000}.key:focus,.key:hover{background-color:var(--key-focus-color);box-shadow:2px 2px 2px #000,0 0 4px 1px var(--key-focus-color)}.key.playing{background-color:var(--key-playing-color);box-shadow:none;color:#000}.key>*{margin:2px}.key-text.hidden{opacity:0}.key-text>.octave{font-size:.7em}.key-kbd{background:var(--kbd-background);border-radius:20%;box-shadow:var(--kbd-shadow);color:#757575;font-family:monospace;font-size:.95em;font-style:italic;height:calc(var(--key-width)/2);line-height:calc(var(--key-width)/2);margin-bottom:10px;text-align:center;width:calc(var(--key-width)/2)}.key-kbd.large{width:calc(var(--key-width)*1.4)}.key-kbd.medium{width:var(--key-width)}.key-kbd.hidden{display:none}.piano-container .other-kbd-shortcuts{display:flex;flex-direction:column;font-size:calc(var(--key-width)/2.7);list-style:none;margin:0;padding:0}.piano-container .other-kbd-shortcuts>li{align-items:baseline;display:flex;gap:8px}.staff{height:13.75rem;height:var(--staff-height);width:17.875rem;width:calc(var(--staff-height)*1.3)}.generator{border:1px solid #000}#toggle-sidebar-button{background:none;border:none;border-radius:50%;color:#fff;color:var(--sidebar-button-color);cursor:pointer;height:2.5rem;left:.25rem;line-height:.5;outline:none;position:fixed;top:.25rem;width:2.5rem;z-index:10}#toggle-sidebar-button:focus,#toggle-sidebar-button:hover{border:2px solid #0af;border:2px solid var(--active-color)}.sidebar{background-color:#fff;bottom:0;box-shadow:0 0 7px #000;color:#666;color:var(--text-settings-color);display:flex;flex-direction:column;font-size:.9rem;height:auto;justify-content:space-between;left:0;margin-top:3rem;margin-top:var(--header-height);overflow-y:auto;position:fixed;right:0;top:0;transition:transform .8s ease;width:13rem;width:var(--sidebar-width);z-index:3}.sidebar.closed{transform:translateX(-105%)}.sidebar hr{background-color:#666;background-color:var(--text-settings-color);border:none;height:2px;margin-block:4px;width:80%}.sidebar-content{cursor:default}.sidebar-content>h2{margin-block:.8rem}.sidebar-content>h3{-webkit-margin-before:1rem;-webkit-margin-after:.2rem;font-size:1rem;margin-block-end:.2rem;margin-block-start:1rem}.sidebar-content>div,.sidebar-content>label{height:1rem;padding:.6rem .5rem}.sidebar-content>div:hover,.sidebar-content>label:hover{background-color:#d3d3d3;color:maroon;color:var(--highlight-dark-color)}.sidebar-bottom>div{margin-block:6px}.toggle-display{align-items:center;display:flex;gap:.8em;justify-content:center}.toggle-label{align-self:flex-start;max-width:9rem}.toggle{--toggle-size:18px;--toggle-highlight-color:var(--highlight-transparent-color);--toggle-off-background-color:#a9a9a9;--toggle-on-background-color:var(--active-color);--toggle-transition-time:0.1s;--slider-color:#fff;--slider-offset:4px;display:inline-block;height:var(--toggle-size);position:relative;width:calc(var(--toggle-size)*2)}.toggle .slider{background-color:var(--toggle-off-background-color);border-radius:calc(var(--toggle-size)/2);bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:background-color var(--toggle-transition-time)}.toggle .slider:before{background-color:var(--slider-color);border-radius:50%;content:"";height:calc(var(--toggle-size) - var(--slider-offset));left:calc(var(--slider-offset)/2);position:absolute;top:calc(var(--slider-offset)/2);transition:transform var(--toggle-transition-time);width:calc(var(--toggle-size) - var(--slider-offset))}.toggle input{height:0;opacity:0;width:0}.toggle input:focus+.slider{box-shadow:0 0 0 .2rem var(--toggle-highlight-color)}.toggle input:checked+.slider{background-color:var(--toggle-on-background-color)}.toggle input:checked+.slider:before{transform:translateX(var(--toggle-size))}.range-display{padding-right:12px}.color-select,.range-display{align-items:center;display:flex;gap:.8em;justify-content:center}.color-select input{background:none;border:none;cursor:pointer}.select{align-items:baseline;display:flex;gap:.8em;justify-content:center}.select input{background:none;border:none;cursor:pointer}.tooltip{border-bottom:1px dotted #000;cursor:help;display:inline-block;position:relative}.tooltip-text{background-color:grey;border-radius:1rem;bottom:100%;color:#fff;font-size:.8em;left:50%;margin-left:-4rem;padding:5px;position:absolute;text-align:center;text-decoration:none;visibility:hidden;width:8rem;z-index:5}.tooltip:hover .tooltip-text{visibility:visible}
/*# sourceMappingURL=main.55233c42.css.map*/