#load-overlay{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#f5f4f8;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;justify-content:center;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:10000}#load-overlay img{height:100px;width:100px}body,html{margin:0;padding:0}body,button,input,option,select,textarea{font:14px Fira Sans,Arial,Helvetica,sans-serif}body{-webkit-box-orient:vertical;-webkit-box-direction:normal;background:#f5f4f8;color:#7e818d;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}h1,h2,h3,h4,h5,h6,li,ul{margin:0;padding:0}p{margin:0 0 10px;padding:0}footer,header,section{padding:5px 10px}body>header{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#282b30;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}body>header h1{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;font-size:30px}body>header #user{-webkit-box-flex:0;color:#f5f4f8;display:none;-ms-flex:0 1 auto;flex:0 1 auto;margin:0 20px}body>header #user.visible{display:block}body>header #user b{color:#fff;font-weight:400}body>header .buttons{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}main h1{color:#282b30;font-size:24px}main h2{font-size:20px}main h3{font-size:18px}a{color:#0064b4;text-decoration:none}a:hover{color:#00a2c8}button{background:#0064b4;border:none;border-radius:5px;color:#fff;cursor:pointer;margin-right:5px;outline:none;padding:5px 10px;-webkit-transition:background-color .3s;-o-transition:background-color .3s;transition:background-color .3s}button:hover{background:#00a2c8}button:active{background:#00467e}button:disabled{background:#7e818d;cursor:auto}label{font-weight:700}input[type=text],select,textarea{border:1px solid #7e818d;outline:none}input[type=text]:focus,select:focus,textarea:focus{border:1px solid #0064b4}.toolbar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.toolbar button,.toolbar hr{margin:0 5px}.toolbar hr{background:#7e818d;border:none;height:18px;padding:0;width:1px}.window{background:rgba(0,0,0,.2);bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:1000}.window.visible{display:block}.window .content{background:#fff;-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.8);box-shadow:0 0 10px 0 rgba(0,0,0,.8);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.window header{background:#0d7903;font-size:24px;font-weight:700}.window header h1{color:#fff}.window>section{margin:5px 0}.window footer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-pack:end;-ms-flex-pack:end;background:#f5f4f8;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;justify-content:flex-end}#settings .settings{width:400px}#settings .settings>div{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:30px;margin-bottom:5px}#settings .settings label{-webkit-box-flex:0;-ms-flex:0 0 150px;flex:0 0 150px}#share #ed-share-title{margin-bottom:5px}#share #ed-share-title,#share textarea{-webkit-box-sizing:border-box;box-sizing:border-box;padding:4px;width:100%}#share textarea{height:100px;resize:none}.error-message{background-color:#fdd6d8;border:1px solid #ca0a15;display:none;padding:5px}.error-message.visible{display:block}#share-load section{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:400px;overflow-y:auto;width:600px}#share-load .explanation{-webkit-box-flex:0;background:#282b30;color:#fff;-ms-flex:0 0 auto;flex:0 0 auto;padding:10px}#share-load ul{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;list-style:none;overflow-y:auto;padding:5px 0}#share-load a{color:inherit;display:block;padding:2px 5px;text-decoration:none}#share-load a:hover{background:#8dc700;color:#282b30}#help{line-height:1.6}#help .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:80%;width:75%}#help .content>section{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:20px;position:relative}#help .content>section h1,#help .content>section h2,#help .content>section h3,#help .content>section h4,#help .content>section h5,#help .content>section h6,#help .content>section p{margin:0 0 10px}#help .spinner{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#f5f4f8;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}#help .spinner img{height:100px;width:100px}#help table{border-collapse:collapse;margin:0 0 20px;table-layout:fixed;width:100%}#help thead{background:#0064b4;color:#fff}#help tbody tr:nth-child(2n){background:#def0ff}#help tbody tr:nth-child(odd){background:#eff8ff}#help table.settings th:first-child{width:15%}#help table.settings th:nth-child(2){width:25%}#help table.settings th:nth-child(3){width:auto}#help table.settings th:nth-child(4){width:20%}#help table.settings th:nth-child(5){width:10%}#help td,#help th{padding:5px;vertical-align:top}#help th{font-weight:400;text-align:left}#help pre{padding:5px}#help code,#help pre{background:#e5e6e8;color:#282b30}#help pre code{padding:0}#help code{border-radius:2px;padding:2px}#help .help-example{background:#e5e6e8;border-radius:5px;color:#282b30;margin-bottom:20px;padding:5px}#help .help-example pre{padding:0 10px 5px}#help .tab-links{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;list-style:none;margin:0 0 20px;padding:0}#help .tab-links li a{border-bottom:4px solid transparent;display:block;padding:5px 10px;text-align:center;white-space:no-wrap}#help .tab-links li.active a{border-color:#0064b4}#help .tabs>section{display:none;padding:0}#help .tabs>section.visible{display:block}.piano{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-bottom:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.piano .key{position:relative;-webkit-transition:background .2s;-o-transition:background .2s;transition:background .2s}.piano .key.highlight-show{background:#8dc700}.piano .key.highlight-show,.piano .key.highlight-wrong{-webkit-transition:none;-o-transition:none;transition:none}.piano .key.highlight-wrong{background:#ca0a15}.piano .key.highlight-playback{background:#00a2c8}.piano .key.highlight-play,.piano .key.highlight-playback{-webkit-transition:none;-o-transition:none;transition:none}.piano .key.highlight-play{background:#ffba00}.piano .key.pressed{-webkit-transition:none;-o-transition:none;transition:none}.piano .a,.piano .b,.piano .c,.piano .d,.piano .e,.piano .f,.piano .g{-webkit-box-flex:0;-ms-flex-positive:0;-ms-flex-negative:0;background:#fffff6;border-bottom:1px solid #7e818d;border-left:1px solid #7e818d;border-radius:0 0 4px 4px;-webkit-box-sizing:border-box;box-sizing:border-box;flex-grow:0;flex-shrink:0;height:150px}.piano .a:last-child,.piano .b:last-child,.piano .c:last-child,.piano .d:last-child,.piano .e:last-child,.piano .f:last-child,.piano .g:last-child{border-right:1px solid #7e818d}.piano .a.imperial,.piano .b.imperial,.piano .c.imperial,.piano .d.imperial,.piano .e.imperial,.piano .f.imperial,.piano .g.imperial{background:#282b30}.piano .a.highlight-show,.piano .b.highlight-show,.piano .c.highlight-show,.piano .d.highlight-show,.piano .e.highlight-show,.piano .f.highlight-show,.piano .g.highlight-show{background:#8dc700;-webkit-transition:none;-o-transition:none;transition:none}.piano .a.highlight-wrong,.piano .b.highlight-wrong,.piano .c.highlight-wrong,.piano .d.highlight-wrong,.piano .e.highlight-wrong,.piano .f.highlight-wrong,.piano .g.highlight-wrong{background:#ca0a15;-webkit-transition:none;-o-transition:none;transition:none}.piano .a.highlight-playback,.piano .b.highlight-playback,.piano .c.highlight-playback,.piano .d.highlight-playback,.piano .e.highlight-playback,.piano .f.highlight-playback,.piano .g.highlight-playback{background:#00a2c8;-webkit-transition:none;-o-transition:none;transition:none}.piano .a.highlight-play,.piano .b.highlight-play,.piano .c.highlight-play,.piano .d.highlight-play,.piano .e.highlight-play,.piano .f.highlight-play,.piano .g.highlight-play{background:#ffba00;-webkit-transition:none;-o-transition:none;transition:none}.piano .a:after,.piano .b:after,.piano .c:after,.piano .d:after,.piano .e:after,.piano .f:after,.piano .g:after{bottom:10px;content:attr(data-name);display:none;position:absolute;text-align:center;width:100%}.piano .a.highlight-play:after,.piano .a.highlight-show:after,.piano .a.highlight-wrong:after,.piano .a.pressed:after,.piano .b.highlight-play:after,.piano .b.highlight-show:after,.piano .b.highlight-wrong:after,.piano .b.pressed:after,.piano .c.highlight-play:after,.piano .c.highlight-show:after,.piano .c.highlight-wrong:after,.piano .c.pressed:after,.piano .d.highlight-play:after,.piano .d.highlight-show:after,.piano .d.highlight-wrong:after,.piano .d.pressed:after,.piano .e.highlight-play:after,.piano .e.highlight-show:after,.piano .e.highlight-wrong:after,.piano .e.pressed:after,.piano .f.highlight-play:after,.piano .f.highlight-show:after,.piano .f.highlight-wrong:after,.piano .f.pressed:after,.piano .g.highlight-play:after,.piano .g.highlight-show:after,.piano .g.highlight-wrong:after,.piano .g.pressed:after{color:#000}.piano .a.pressed,.piano .b.pressed,.piano .c.pressed,.piano .d.pressed,.piano .e.pressed,.piano .f.pressed,.piano .g.pressed{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);box-shadow:inset 0 0 3px rgba(0,0,0,.4);height:148px}.piano.key-names-all .a:after,.piano.key-names-all .b:after,.piano.key-names-all .c:after,.piano.key-names-all .d:after,.piano.key-names-all .e:after,.piano.key-names-all .f:after,.piano.key-names-all .g:after,.piano.key-names-highlighted .a.highlight-show:after,.piano.key-names-highlighted .b.highlight-show:after,.piano.key-names-highlighted .c.highlight-show:after,.piano.key-names-highlighted .d.highlight-show:after,.piano.key-names-highlighted .e.highlight-show:after,.piano.key-names-highlighted .f.highlight-show:after,.piano.key-names-highlighted .g.highlight-show:after,.piano.key-names-middle-c .c[data-key=C4]:after{display:block}.piano .a-flat,.piano .b-flat,.piano .c-sharp,.piano .e-flat,.piano .f-sharp{background:#24272b;border-color:#24272b #191b1e #121316 #1f2125;border-radius:0 0 4px 4px;border-style:solid;border-width:1px 2px 7px;-webkit-box-shadow:inset 0 -1px 2px rgba(0,0,0,.4),0 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 -1px 2px rgba(0,0,0,.4),0 0 1px 1px rgba(0,0,0,.1);height:90px;z-index:2}.piano .a-flat.highlight-show,.piano .b-flat.highlight-show,.piano .c-sharp.highlight-show,.piano .e-flat.highlight-show,.piano .f-sharp.highlight-show{border-color:#8dc700 #638b00 #476400 #79ab00}.piano .a-flat.highlight-wrong,.piano .b-flat.highlight-wrong,.piano .c-sharp.highlight-wrong,.piano .e-flat.highlight-wrong,.piano .f-sharp.highlight-wrong{border-color:#ca0a15 #8d070f #65050b #ae0912}.piano .a-flat.highlight-playback,.piano .b-flat.highlight-playback,.piano .c-sharp.highlight-playback,.piano .e-flat.highlight-playback,.piano .f-sharp.highlight-playback{border-color:#00a2c8 #00718c #005164 #008bac}.piano .a-flat.highlight-play,.piano .b-flat.highlight-play,.piano .c-sharp.highlight-play,.piano .e-flat.highlight-play,.piano .f-sharp.highlight-play{border-color:#ffba00 #b38200 #805d00 #dba000}.piano .a-flat.pressed,.piano .b-flat.pressed,.piano .c-sharp.pressed,.piano .e-flat.pressed,.piano .f-sharp.pressed{border-bottom-width:3px;height:93px}.sheet{stroke:#000;fill:#000;cursor:default;margin:10px 10px 20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sheet svg{width:100%}.sheet text{stroke:none;line-height:0}.sheet .slur,.sheet .tie{stroke:none}.sheet g{-webkit-transition:stroke .1s,fill .1s;-o-transition:stroke .1s,fill .1s;transition:stroke .1s,fill .1s}.sheet .highlight-show{stroke:#4da002;fill:#4da002;text-shadow:0 0 5px rgba(77,160,2,.5);-webkit-transition:none;-o-transition:none;transition:none}.sheet .highlight-show text,.sheet text.highlight-show{stroke:none}.sheet .highlight-wrong{stroke:#ca0a15;fill:#ca0a15;text-shadow:0 0 5px rgba(202,10,21,.5);-webkit-transition:none;-o-transition:none;transition:none}.sheet .highlight-wrong text,.sheet text.highlight-wrong{stroke:none}.sheet .highlight-play{stroke:#00a2c8;fill:#00a2c8;text-shadow:0 0 5px rgba(0,162,200,.5);-webkit-transition:none;-o-transition:none;transition:none}.sheet .highlight-play text,.sheet text.highlight-play{stroke:none}.sheet .hidden{visibility:hidden}.sheet .text-line{font:.375em Fira Sans,sans-serif}