html{font-size:14px;font-family:Helvetica neue}body{--color-background: hsl(210, 65%, 100%);--color-text: hsl(210, 65%, 30%);--color-title: hsl(210, 65%, 20%);--color-highlight: hsl(210, 65%, 90%)}body.dark-theme{--color-background: hsl(210, 65%, 20%);--color-text: hsl(0, 0%, 92%);--color-title: hsl(210, 65%, 80%);--color-highlight: hsl(210, 65%, 25%)}@media (prefers-color-scheme: dark){body{--color-background: hsl(210, 65%, 20%);--color-text: hsl(0, 0%, 92%);--color-title: hsl(210, 65%, 80%);--color-highlight: hsl(210, 65%, 25%)}body.light-theme{--color-background: hsl(210, 65%, 100%);--color-text: hsl(210, 65%, 30%);--color-title: hsl(210, 65%, 20%);--color-highlight: hsl(210, 65%, 90%)}}body{--color-border: hsl(210, 58%, 57%);--color-background-lighter: hsl(210, 65%, 80%);--color-active-button: hsl(210, 65%, 80%);--color-score-highlight: hsl(210, 65%, 25%);--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}body{padding:0;margin:0}#backdrop{position:fixed;display:none;z-index:5;top:0;left:0;width:100vw;height:100vh;background:#00000080}.viewportDiv{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:var(--color-background);height:100vh;height:calc(var(--vh, 1vh) * 100)}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:3px;-moz-column-gap:3px;column-gap:3px;margin-top:5px;margin-bottom:5px}header .title{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:1.5rem;color:var(--color-title);padding-left:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0}header #info{cursor:pointer}header #info path{fill:var(--color-title)}header .header-spacer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}header #scoreswitch,header #recordingswitch,header #darkswitch{cursor:pointer;margin-right:5px}header #scoreswitch path,header #recordingswitch path,header #darkswitch path{fill:var(--color-title)}header #recordinglabel{font-size:.9rem;color:var(--color-title);text-align:right;margin-right:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}header #scoreswitch{position:relative}header .tooltip{position:relative;display:inline-block}header .tooltip .tooltiptext{visibility:hidden;width:120px;top:100%;left:50%;margin-left:-120px;background-color:var(--color-background-lighter);border:2px solid var(--color-border);text-align:center;padding:5px 0;border-radius:10px;position:absolute;z-index:1}header .tooltip:hover .tooltiptext{visibility:visible;opacity:1}#help{display:none;padding:0 5px;border:2px solid var(--color-border);border-radius:10px;position:absolute;background:var(--color-background-lighter);max-width:80%;left:10%;z-index:10}#help em{font-family:cursive;font-size:large}#help th{vertical-align:top;text-align:right;padding-right:5px}#help p{padding:0;margin:5px}#help a{color:var(--color-background);text-decoration:none}#help a:hover{text-decoration:underline}#help #recordings{text-align:left}#help .copyright,#help .version{text-align:right;font-size:smaller}.split-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:80%;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}music-score{resize:none;background-color:#f5f5f5;height:50%;min-height:200px;overflow:auto;cursor:crosshair;margin-left:.2rem;margin-right:.2rem;padding:0 .2rem;border-radius:10px;border-color:hsla(var(--color-c1),80%,55%,1);border-width:4px;border-style:solid;height:300px}music-score svg{height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}music-score svg text{font-family:var(--font),serif}.splitter{height:12px;cursor:row-resize;z-index:10;background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,var(--color-background)),color-stop(0,var(--color-background-lighter))) top/25px 40% repeat-y;background:linear-gradient(to bottom,var(--color-background) 50%,var(--color-background-lighter) 0) top/25px 40% repeat-y}music-canvas{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;cursor:crosshair;width:100%;min-height:150px;overflow:auto}kbd{background-color:#eee;border-radius:3px;border:1px solid #b4b4b4;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2),0 2px 0 0 rgba(255,255,255,.7) inset;box-shadow:0 1px 1px #0003,0 2px #ffffffb3 inset;color:#333;display:inline-block;font-size:.85em;font-weight:700;line-height:1;padding:2px 4px;white-space:nowrap}.footer{-ms-flex-preferred-size:50px;flex-basis:50px;padding:.5rem .2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer music-controls{display:-webkit-box;display:-ms-flexbox;display:flex}.footer music-controls #playpausebutton{padding:3px;margin:3px 5px;height:3rem;width:3rem;background:#fff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:2px solid var(--color-border);border-radius:50%;cursor:pointer}.footer music-controls #playpausebutton:hover,.footer music-controls #playpausebutton:focus{background:var(--color-background-lighter);-webkit-transition:all .2s ease-in-out;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;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.footer music-controls #playpausebutton #spinner{display:none;-webkit-animation:rotator 1.4s linear infinite;animation:rotator 1.4s linear infinite}.footer music-controls #playpausebutton .path{width:50px;stroke-dasharray:24;stroke-dashoffset:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}.footer music-controls #playpausebutton svg{height:2rem;width:2rem}.footer music-controls label{-ms-flex-preferred-size:5rem;flex-basis:5rem;margin:0 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:left;color:var(--color-text)}.footer music-controls label input,.footer music-controls label select{-webkit-box-sizing:border-box;box-sizing:border-box;border:2px solid var(--color-border);height:2rem;padding:2px;margin:0;border-radius:1vh;font-size:1.2rem}.footer .statusspacer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.footer music-canvas-watcher{-ms-flex-preferred-size:5rem;flex-basis:5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:.9rem;text-align:left;text-transform:capitalize;color:var(--color-text)}.footer music-canvas-watcher.hide{-webkit-transition:1.5s;transition:1.5s;color:var(--color-background)}@media screen and (max-width: 25rem){.footer music-canvas-watcher{display:none}}@-webkit-keyframes rotator{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotator{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-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 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%)}}@-webkit-keyframes dash{0%{stroke-dashoffset:24}50%{stroke-dashoffset:6;-webkit-transform:rotate(135deg);transform:rotate(135deg)}to{stroke-dashoffset:24;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}@keyframes dash{0%{stroke-dashoffset:24}50%{stroke-dashoffset:6;-webkit-transform:rotate(135deg);transform:rotate(135deg)}to{stroke-dashoffset:24;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}