html{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px}body{--color-background:#123354;--color-text:#ebebeb;--color-title:#abcced;--color-highlight:#164069}body[data-branch]:not([data-branch=""]):before{content:attr(data-branch);background:var(--color-title);max-width:calc(100vw - 220px);color:var(--color-background);text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;z-index:9999;opacity:.8;pointer-events:none;border-bottom-left-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;position:fixed;top:0;left:200px;overflow:hidden}body.light-theme{--color-background:#fff;--color-text:#1b4d7e;--color-title:#123354;--color-highlight:#d5e6f6}body{--color-border:#5291d1;--color-background-lighter:#abcced;--color-active-button:#abcced;--color-score-highlight:#164069;--color-c1:360;--color-c2:320;--color-c3:30;--color-c4:50;--color-c5:110;--color-c6:150;--color-c7:190;--color-c8:220;--font:Alegreya;margin:0;padding:0}#backdrop{z-index:11;background:#00000080;width:100vw;height:100vh;display:none;position:fixed;top:0;left:0}.viewportDiv{box-sizing:border-box;background:var(--color-background);height:100vh;height:calc(var(--vh,1vh) * 100);visibility:visible;flex-direction:column;display:flex}header{-webkit-column-gap:3px;-moz-column-gap:3px;align-items:center;column-gap:3px;margin-top:5px;margin-bottom:5px;display:flex}header .title-group{white-space:nowrap;flex-shrink:0;align-items:center;display:flex}header .logo{border-radius:6px;width:28px;height:28px;margin-left:10px}header .title{color:var(--color-title);white-space:nowrap;align-items:center;margin:0;padding-left:6px;font-family:Macondo Swash Caps,cursive;font-size:2rem;display:inline-flex}header #info{cursor:pointer;margin-left:12px}header #info #help-icon{vertical-align:middle;display:inline-block}header #info #help-icon path,header #info #help-icon circle{stroke:var(--color-title)}header .header-spacer{flex-grow:1}header #scoreswitch,header #recordingswitch,header #darkswitch{cursor:pointer;margin-right:5px}header #scoreswitch path,header #recordingswitch path{fill:var(--color-title)}header #darkswitch path{stroke:var(--color-title)}header #recordinglabel{color:var(--color-title);text-align:right;align-items:center;margin-right:5px;font-size:.9rem;display:flex}header #scoreswitch{position:relative}header .tooltip{display:inline-block;position:relative}header .tooltip .tooltiptext{visibility:hidden;background-color:var(--color-background-lighter);border:2px solid var(--color-border);text-align:center;z-index:1;border-radius:10px;width:120px;padding:5px 0;position:absolute;top:100%;left:50%;transform:translate(-50%)}header .tooltip:hover .tooltiptext{visibility:visible;opacity:1}#help{border:2px solid var(--color-border);box-sizing:border-box;background:var(--color-background-lighter);z-index:12;border-radius:10px;max-width:min(80%,480px);padding:0 5px;display:none;position:absolute;top:50px;left:10%}#help em{font-family:cursive;font-size:large}#help th{vertical-align:top;text-align:right;padding-right:5px}#help p{margin:5px;padding:0}#help a{color:var(--color-background);text-decoration:none}#help a:hover{text-decoration:underline}#help #recordings{text-align:left}#help .help-footer{justify-content:space-between;align-items:center;margin-top:.5rem;display:flex}#help .help-footer .bmc-wrapper{transform-origin:0;flex-shrink:0;width:220px;min-width:0;overflow:hidden;transform:scale(.75)}#help .help-footer .help-footer-right{text-align:right;min-width:0;overflow:hidden}#help .copyright,#help .version{margin:0;font-size:smaller}#help .version{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.split-container{box-sizing:border-box;flex-direction:column;flex-grow:1;width:100%;height:80%;display:flex}music-score{resize:none;cursor:crosshair;border-color:hsla(var(--color-c1), 80%, 55%, 1);background-color:#f5f5f5;border-style:solid;border-width:4px;border-radius:10px;height:350px;min-height:200px;margin-left:.2rem;margin-right:.2rem;padding:0 .2rem;position:relative;overflow:hidden}music-score .score-scroll-area{overscroll-behavior-y:none;width:100%;height:100%;overflow:auto hidden}music-score .score-scroll-area svg{-webkit-user-select:none;user-select:none;height:100%}music-score .score-scroll-area svg text{font-family:var(--font), serif}music-score .score-clef-overlay{pointer-events:none;z-index:10;background-color:inherit;cursor:default;height:100%;position:absolute;top:0;left:0;overflow:hidden}music-score .score-clef-overlay svg{-webkit-user-select:none;user-select:none;height:100%}.splitter{cursor:row-resize;z-index:10;background:linear-gradient(to bottom, var(--color-background) 50%, var(--color-background-lighter) 0) top/25px 40% repeat-y;height:12px}music-canvas{cursor:crosshair;overscroll-behavior-y:none;flex-grow:1;width:100%;min-height:150px;overflow:auto hidden}kbd{color:#333;white-space:nowrap;background-color:#eee;border:1px solid #b4b4b4;border-radius:3px;padding:2px 4px;font-size:.85em;font-weight:700;line-height:1;display:inline-block;box-shadow:0 1px 1px #0003,inset 0 2px #ffffffb3}.footer{flex-flow:wrap;flex-basis:50px;align-items:center;padding:.5rem .2rem;display:flex}.footer music-controls{display:flex}.footer music-controls #playpausebutton{border:2px solid var(--color-border);cursor:pointer;background:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:3rem;height:3rem;margin:3px 5px;padding:3px;display:inline-flex}.footer music-controls #playpausebutton:hover,.footer music-controls #playpausebutton:focus{background:var(--color-background-lighter);transition:all .2s ease-in-out}.footer music-controls #playpausebutton:active{background:var(--color-active-button);border:2px solid var(--color-background);padding:4px 2px 2px 4px;transition:all .2s ease-in-out}.footer music-controls #playpausebutton #spinner{animation:1.4s linear infinite rotator;display:none}.footer music-controls #playpausebutton .path{stroke-dasharray:24;stroke-dashoffset:0;transform-origin:50%;width:50px;animation:1.4s ease-in-out infinite dash,5.6s ease-in-out infinite colors}.footer music-controls #playpausebutton svg{width:2rem;height:2rem}.footer music-controls label{text-align:left;color:var(--color-text);flex-direction:column;flex-basis:5rem;margin:0 5px;display:flex}.footer music-controls label input,.footer music-controls label select{box-sizing:border-box;border:2px solid var(--color-border);border-radius:1vh;height:2rem;margin:0;padding:2px;font-size:1.2rem}.footer .statusspacer{flex-grow:1}.footer music-canvas-watcher{text-align:left;text-transform:capitalize;color:var(--color-text);flex-direction:column;flex-basis:5rem;font-size:.9rem;display:flex}.footer music-canvas-watcher.hide{color:var(--color-background);transition:all 1.5s}@media screen and (width<=25rem){.footer music-canvas-watcher{display:none}}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes colors{0%{stroke:hsl(var(--color-c1), 50%, 50%)}25%{stroke:hsl(var(--color-c3), 50%, 50%)}50%{stroke:hsl(var(--color-c5), 50%, 50%)}75%{stroke:hsl(var(--color-c8), 50%, 50%)}to{stroke:hsl(var(--color-c1), 50%, 50%)}}@keyframes dash{0%{stroke-dashoffset:24px}50%{stroke-dashoffset:6px;transform:rotate(135deg)}to{stroke-dashoffset:24px;transform:rotate(450deg)}}#feedback-trigger{cursor:pointer;margin-left:6px}#feedback-trigger svg path{stroke:var(--color-title)}#feedback-modal{border:2px solid var(--color-border);background:var(--color-background-lighter);z-index:12;border-radius:10px;max-width:80%;padding:0 10px 10px;font-family:inherit;font-size:1rem;display:none;position:absolute;top:50px;left:10%}#feedback-modal label,#feedback-modal legend,#feedback-modal input,#feedback-modal select,#feedback-modal button{font-family:inherit;font-size:inherit}#feedback-modal h2{border-bottom:2px solid var(--color-border);margin:10px 0;padding-bottom:4px;font-size:1.2rem}#feedback-modal fieldset{border:none;margin:0 0 10px;padding:0}#feedback-modal fieldset legend{margin-bottom:4px;font-weight:700}#feedback-modal fieldset label{cursor:pointer;margin-right:12px;display:inline-block}#feedback-modal fieldset label input[type=radio]{margin-right:4px}#feedback-modal textarea{box-sizing:border-box;border:2px solid var(--color-border);resize:vertical;border-radius:6px;width:100%;padding:6px;font-family:inherit;font-size:1rem}#feedback-modal #feedback-rating{margin-bottom:1rem}#feedback-modal #feedback-result{justify-content:center;align-items:center;min-height:140px;font-size:1.2rem;display:flex}#feedback-modal .feedback-context-note{opacity:.8;margin:6px 0;font-size:.8rem}#feedback-modal .feedback-footer{justify-content:space-between;align-items:center;margin-top:.5rem;display:flex}#feedback-modal .feedback-footer .bmc-wrapper{transform-origin:0;transform:scale(.75)}#feedback-modal .feedback-actions{gap:10px;display:flex}#feedback-modal .feedback-actions button{border:2px solid var(--color-border);cursor:pointer;border-radius:6px;padding:6px 16px;font-family:inherit;font-size:1rem}#feedback-modal .feedback-actions button[type=submit]{background:var(--color-active-button);color:var(--color-background)}#feedback-modal .feedback-actions button[type=button]{color:var(--color-background);background:0 0}#feedback-modal .feedback-actions button:hover{opacity:.85}@media screen and (width<=35rem){#feedback-modal{box-sizing:border-box;max-width:calc(100% - 20px);left:10px}#feedback-modal .feedback-footer{flex-direction:column;align-items:flex-start;gap:.5rem}#feedback-modal .bmc-wrapper{transform-origin:0;max-width:100%;overflow:hidden;transform:scale(.65)}}.star-rating{flex-direction:row-reverse;gap:10px;display:inline-flex}.star-rating input{display:none}.star-rating label{cursor:pointer;color:var(--color-background);opacity:.4;font-size:2rem}.star-rating label:before{content:"★"}.star-rating input:checked~label,.star-rating label:hover,.star-rating label:hover~label{opacity:1;color:#9b6508}.pwa-update-toast{z-index:1000;background:var(--color-highlight);color:var(--color-text);border-radius:6px;align-items:center;gap:12px;padding:12px 16px;font-size:14px;display:flex;position:fixed;bottom:16px;right:16px;box-shadow:0 4px 12px #0000004d}.pwa-update-toast .pwa-update-toast-message{font-weight:500}.pwa-update-toast button{cursor:pointer;border:none;border-radius:4px;padding:6px 12px;font-family:inherit;font-size:13px}.pwa-update-toast .pwa-update-toast-refresh{background:var(--color-title);color:var(--color-background)}.pwa-update-toast .pwa-update-toast-dismiss{color:var(--color-text);opacity:.7;background:0 0}.pwa-update-toast .pwa-update-toast-dismiss:hover{opacity:1}