@charset "UTF-8";.sheet-header{text-align:center;margin-bottom:10px}.sheet-header h3{font-size:32px;margin:10px}.sheet-header p{font-size:18px}.sheet-renderer{z-index:10;position:relative}.sheet-renderer .content-wrapper{position:relative;width:100%;height:100%;overflow-y:auto;width:480px;height:360px;margin:0 auto;padding:10px;background:#fffcf6;border-top:1px solid #fffcf6;border-radius:4px;box-shadow:0 3px 8px #45120a66;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none}.sheet-renderer .content-wrapper::-webkit-scrollbar{display:none}.sheet-renderer .content{text-align:left;display:flex;flex-flow:wrap}.sheet-renderer:before{content:"";z-index:-1;height:320px;width:560px;background:url(/img/bg-with-hole2.png) repeat;box-shadow:0 3px 8px #45120a66;position:absolute;left:50%;margin-left:-280px;bottom:0;border-radius:8px}.sheet-renderer:after{content:"";position:absolute;width:200px;height:20px;background-color:#242424;border-radius:5px 5px 0 0;display:block;z-index:5;bottom:-5px;left:50%;margin-left:-100px}.sheet-renderer em{font-style:normal}.sheet-renderer .bar{width:100px;height:100px;border-right:1px solid #333;display:flex}.sheet-renderer .bar:before{content:"";height:100%;border-left:1px solid #333;left:-1px;position:relative}.sheet-renderer .bar .note_group{flex:1;text-decoration:underline;display:flex;justify-content:center}.sheet-renderer .bar .note_group>.note{flex:0}.sheet-renderer .bar .note{flex:1;position:relative;display:flex;justify-content:center}.sheet-renderer .bar .note p{position:relative;margin:10px 0}.sheet-renderer .note__higher,.sheet-renderer .note__lower{position:relative}.sheet-renderer .note__higher:before,.sheet-renderer .note__lower:before{left:0;content:"\b7";position:absolute;width:100%;text-align:center}.sheet-renderer .note__higher:before{top:-10px}.sheet-renderer .note__lower:before{top:30px}.sheet-renderer .bar span.judger{position:absolute;bottom:10px;left:0;width:10px;height:10px;border-radius:50%}.sheet-renderer .bar span.judger[data-level=off]{background:url(/indicators/close.svg) no-repeat center/contain}.sheet-renderer .bar span.judger[data-level=lower]{background:url(/indicators/caret-down.svg) no-repeat center/contain}.sheet-renderer .bar span.judger[data-level=higher]{background:url(/indicators/caret-up.svg) no-repeat center/contain}.sheet-renderer .bar span.judger[data-level=exact]{background:url(/indicators/check-mark.svg) no-repeat center/contain}.harmonica-helper{width:100%;text-align:center;position:absolute;top:50px;color:#0000004d}*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0}.switch{margin:50px auto;position:relative}.switch label{width:100%;height:100%;position:relative;display:block}.switch input{top:0;right:0;bottom:0;left:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;z-index:100;position:absolute;width:100%;height:100%;cursor:pointer}.switch input:disabled{cursor:not-allowed}.switch.skeuomorphism{width:50px;height:100px}.switch.skeuomorphism label{background:#cbc7bc;margin:0 auto;border-radius:5px;box-shadow:inset 0 1px #fff,0 0 0 1px #999,0 0 5px 1px #0003,0 2px #fff9,inset 0 10px 1px #e5e5e5,inset 0 11px #ffffff80,inset 0 -45px 3px #ddd}.switch.skeuomorphism label:after{content:"";position:absolute;top:-20px;left:-25px;bottom:-20px;right:-25px;background:#ccc;background:-moz-linear-gradient(#ddd,#bbb);background:-ms-linear-gradient(#ddd,#bbb);background:-o-linear-gradient(#ddd,#bbb);background:-webkit-gradient(linear,0 0,0 100%,from(#ddd),to(#bbb));background:-webkit-linear-gradient(#ddd,#bbb);background:linear-gradient(#ddd,#bbb);z-index:-1;border-radius:5px;border:1px solid #bbb;box-shadow:0 0 5px 1px #00000026,0 3px 3px #0000004d,inset 0 1px #ffffff80}.switch.skeuomorphism label:before{content:"";position:absolute;width:8px;height:8px;background:#666;top:-13px;left:20px;border-radius:50%}.switch.skeuomorphism input:checked~label{background:#d2cbc3;box-shadow:inset 0 1px #fff,0 0 0 1px #999,0 0 5px 1px #0003,inset 0 -10px #aaa,0 2px #ffffff1a,inset 0 45px 3px #e0e0e0,0 8px 6px #0000002e}.switch.skeuomorphism input:checked~label:before{background:radial-gradient(40% 35%,#5aef5a,#25d025 60%)}.switch.buttonism{width:100px;height:100px}.switch.buttonism label{border-radius:50%;background:#eaeaea;box-shadow:0 3px 5px #00000040,inset 0 1px #ffffff4d,inset 0 -5px 5px #6464641a,inset 0 5px 5px #ffffff4d}.switch.buttonism label:after{content:"";position:absolute;top:-8%;right:-8%;bottom:-8%;left:-8%;z-index:-1;border-radius:inherit;background:#ddd;background:-moz-linear-gradient(#ccc,#fff);background:-ms-linear-gradient(#ccc,#fff);background:-o-linear-gradient(#ccc,#fff);background:-webkit-gradient(linear,0 0,0 100%,from(#ccc),to(#fff));background:-webkit-linear-gradient(#ccc,#fff);background:linear-gradient(#ccc,#fff);box-shadow:inset 0 2px 1px #00000026,0 2px 5px #c8c8c81a}.switch.buttonism label:before{content:"";position:absolute;width:40%;height:40%;border-radius:inherit;left:30%;top:30%;background:#969696;background:radial-gradient(40% 35%,#ccc,#969696 60%)}.switch.buttonism input:checked~label{background:#dedede;background:-moz-linear-gradient(#dedede,#fdfdfd);background:-ms-linear-gradient(#dedede,#fdfdfd);background:-o-linear-gradient(#dedede,#fdfdfd);background:-webkit-gradient(linear,0 0,0 100%,from(#dedede),to(#fdfdfd));background:-webkit-linear-gradient(#dedede,#fdfdfd);background:linear-gradient(#dedede,#fdfdfd)}.switch.buttonism input:checked~label:before{background:#25d025;background:radial-gradient(40% 35%,#5aef5a,#25d025 60%)}.switch.skeuomorphism{position:relative}.switch.skeuomorphism h3{position:absolute;width:100px;text-align:center;bottom:-90px;left:-25px;font-size:14px}.switch.buttonism{position:relative}.switch.buttonism h3{position:absolute;width:100px;text-align:center;bottom:-90px;font-size:14px;left:50%;margin-left:-50px}#root{width:100vw;height:100vh;position:relative;overflow:hidden;background-color:#242424;z-index:1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.core-app{width:100%;height:100%;position:relative}.player-app{width:100%;height:100%;position:relative;border-radius:8px 8px 0 0;background:url(/img/panel-bg.jpg) repeat;z-index:1}.player-multifunction-keys{display:flex;align-items:center}.player-multifunction-keys .function-key-area{flex:1;width:180px;height:300px;display:flex;align-items:center;justify-content:center}.player-multifunction-keys .function-key-area.column-flex{flex-direction:column}.config-panel-toggler{position:absolute;top:0;right:20px}.config-panel-toggler.playing{opacity:.5}.config-panel-toggler.playing .panel-toggler-label{cursor:not-allowed}.config-panel-toggler .panel-toggler-label{color:#fff;background-color:#242424;padding:5px;border-radius:0 0 5px 5px;width:100px;display:block;text-align:center;cursor:pointer;font-size:0;z-index:20;box-shadow:0 0 5px 1px #00000026,0 3px 3px #0000004d,inset 0 1px #ffffff80}.config-panel-toggler .panel-toggler-label span{font-size:14px;display:inline-block;vertical-align:middle}.config-panel-toggler .panel-toggler-label:before{content:"";width:14px;height:14px;line-height:14px;background:url(/indicators/settings-sharp.svg) no-repeat center/contain;display:inline-block;margin-right:5px;vertical-align:middle}.player-app{display:flex;align-items:center;justify-content:center;flex-direction:column}.player-config{height:0;transition:height linear .3s;overflow:hidden;width:100%;position:relative;background-color:#242424;color:#fff;z-index:10}.player-config .inside-box{display:flex;width:500px;margin:0 auto}.player-config .function-key-area{flex:1;width:180px;height:300px;display:flex;align-items:center;justify-content:center}.player-config .function-key-area.column-flex{flex-direction:column}.player-config .function-key-area.playing-function-key{opacity:.5}.player-config.show{height:300px;animation:slip_in .3s}.player-buttons{display:flex;align-items:center;justify-content:space-between;width:500px;margin:10px auto 0}.player-buttons .function-key-area{display:flex;align-items:center;justify-content:center}.player-buttons .icon-replay-regular label:before{-webkit-mask-image:url(/indicators/replay-20-regular.svg);mask-image:url(/indicators/replay-20-regular.svg)}@keyframes slip_in{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.skeuomorphism-box{z-index:1;height:300px}.dark-tag-like-button{color:#fff;background-color:#242424;padding:5px;border-radius:5px;width:100px;display:block;text-align:center;cursor:pointer;font-size:16px;z-index:20;box-shadow:0 0 5px 1px #00000026,0 3px 3px #0000004d,inset 0 1px #ffffff80}.popup-music-score-switcher{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:100}.popup-music-score-switcher[data-show=false]{display:none!important}.popup-music-score-switcher .box{background-color:#fff;width:600px;height:440px;padding:40px 0 20px;border-radius:8px;overflow:hidden;position:relative;box-sizing:border-box;box-shadow:0 3px 5px #00000040,inset 0 1px #ffffff4d,inset 0 -5px 5px #6464641a,inset 0 5px 5px #ffffff4d}.popup-music-score-switcher .box .title{position:absolute;top:0;left:0;width:100%;height:20px}.popup-music-score-switcher .box .content{position:relative;width:100%;height:100%}.popup-music-score-switcher .box .content:before{display:none;width:100%;height:100%;content:"";position:absolute;left:0;top:0;background-color:#fff;background-image:url(/indicators/Hourglass.gif);background-position:center;background-size:40px 40px;background-repeat:no-repeat}.popup-music-score-switcher .box[data-loading=true]>.content:before{display:block}.popup-music-score-switcher .box[data-loading=true]>.tail{display:none}.button-ico{cursor:pointer;width:40px;height:40px;display:block;position:absolute;right:0;top:0}.icon-close{background:url(/indicators/close.svg) no-repeat center/80%;background-color:#fff}.icon-close:hover{background-color:#eee}ul.content-list{height:100%;padding:0;list-style:none;overflow-y:auto}ul.content-list li{width:90%;margin:10px auto;height:50px;padding:10px;cursor:pointer;box-shadow:0 3px 5px #00000040,inset 0 1px #ffffff4d,inset 0 -5px 5px #6464641a,inset 0 5px 5px #ffffff4d;border-radius:5px}