*{-webkit-tap-highlight-color:#0000}body{-webkit-touch-callout:none;-webkit-text-size-adjust:none;-webkit-user-select:none;text-transform:uppercase;background-color:#4465ad;background-attachment:fixed;width:100%;height:100%;margin:0;padding:0;font-family:HelveticaNeue-Light,HelveticaNeue,Helvetica,Arial,sans-serif;font-size:12px}.app{text-align:center;background:url(/img/logo.png) top no-repeat;width:225px;height:50px;margin:-115px 0 0 -112px;padding:180px 0 0;position:absolute;top:50%;left:50%}@media screen and (aspect-ratio>=1) and (width>=400px){.app{background-position:0;margin:-90px 0 0 -198px;padding:75px 0 75px 170px}}h1{text-align:center;margin:0;padding:0;font-size:24px;font-weight:400;overflow:visible}.event{color:#fff;border-radius:4px;margin:0 30px;padding:2px 0;font-size:12px}@keyframes fade{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.blink{animation:3s infinite fade}.starting_notes_block{margin:10px;font-family:sans-serif;font-size:12px;font-weight:700;display:inline-block}.starting_notes{margin:5px}.interval_block{margin:30px;display:inline-block}.intervalBtn{color:#fff;background:#f58f28;border-radius:28px;padding:10px 20px;font-family:Arial;font-size:20px;text-decoration:none}.intervalBtn.disabled,.intervalBtn.disabled:hover{color:#fff;cursor:not-allowed;background:#f58f28;border-radius:28px;padding:10px 20px;font-family:Arial;font-size:20px;text-decoration:none}.intervalBtn.isplaying,.intervalBtn.isplaying:hover{background:#466995;text-decoration:none}.intervalBtn:hover{background:#7d4600;text-decoration:none}.tune_note_block{display:inline-block}.tuneNote{margin:15px}.flex-container{-webkit-flex-flow:wrap;justify-content:space-around;margin:0;padding:0;list-style:none;display:flex}.intervalBlk{color:#fff;text-align:center;cursor:pointer;background:#f58f29;width:75px;height:50px;margin-top:10px;margin-left:2px;margin-right:2px;padding:5px;font-size:1.5em;font-weight:700;line-height:50px}.intervalBlk.disabled,.intervalBlk.disabled:hover{cursor:not-allowed}.intervalBlk.isplaying,.intervalBlk.isplaying:hover,.intervalBlk:hover{background:#7d4600}#tune-notes-container{width:100%}.tune-note-container{-webkit-flex-flow:wrap;justify-content:space-around;width:100%;margin:0;padding:0;list-style:none;display:flex}.tune-note-block{color:#fff;text-align:center;cursor:pointer;text-transform:none;background:#af3bd4;flex:1;margin-left:1px;margin-right:1px;padding:5px;font-size:1em;font-weight:700;line-height:50px}.tune-note-block.selected{background:#54026e}#tune-notes-section{margin-top:10px}#starting-note-section{text-align:center;margin-top:10px}.scale-key-container{margin:0 0 10px;padding:0;font-size:0;display:inline-block;position:relative}.scale-key{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MwYzFiZCIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZjBmMGYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmFmMGU2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);z-index:1;cursor:pointer;color:#c0c1bd;background:linear-gradient(#c0c1bd,#f0f0f0 10%,linen);border:1px solid #ccc;border-radius:0 0 5px 5px;margin:0;padding:170px 15px 50px;font-size:1rem;transition:all .1s ease-in-out;display:inline-block;position:relative;box-shadow:0 5px 5px #aaa}.scale-key:active{box-shadow:none;color:#333;top:5px}.scale-key.ebony{z-index:2;text-align:center;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVmNjI2NSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMTUxYjE5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTcxYzFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);color:#dcdcdc;background:linear-gradient(#5f6265,#151b19 25%,#171c1a);border-width:0 6px 12px;border-color:#000 #000 #424546;border-radius:0 0 2px 2px;width:32px;margin-left:-16px;padding:130px 0 10px;font-size:.66667rem;position:absolute;top:0;box-shadow:0 3px 5px #ccc,inset 0 0 0 1px #dcdcdc33}.scale-key.selected{color:tomato}.svg-canvas{text-indent:-9999px;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain;width:100%;height:100px;display:block}.scale-key.ebony:active{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVmNjI2NSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMTUxYjE5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTcxYzFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);color:#fff;background:linear-gradient(#5f6265,#151b19 50%,#171c1a);border-bottom-width:8px;padding-top:135px}.playback-error{color:#fff;text-align:center;text-transform:none;background:#b3261e;margin:0;padding:6px 10px;font-size:11px}.offline-download{text-align:center;text-transform:none;margin:18px 0 0;padding:0 20px}.offline-download--muted{color:#fff9;font-size:11px}.offline-download__button{color:#4465ad;text-transform:none;cursor:pointer;background:#fff;border:none;border-radius:20px;padding:8px 20px;font-family:Arial;font-size:12px;font-weight:700}.offline-download__button:hover{background:#eaeff9}.offline-download__hint{color:#ffffffbf;margin:6px 0 0;font-size:11px}.offline-download__hint--error{color:#ffb4a8}.offline-download__hint--done{color:#fff;font-size:12px;font-weight:700}.offline-download__bar{background:#ffffff40;border-radius:5px;width:100%;max-width:260px;height:8px;margin:0 auto;overflow:hidden}.offline-download__bar-fill{background:#fff;height:100%;transition:width .15s}.offline-clear{text-align:center;text-transform:none;margin:10px 0 0;padding:0 20px}.offline-clear__button{color:#ffffffb3;text-transform:none;cursor:pointer;background:0 0;border:none;padding:4px;font-family:Arial;font-size:11px;text-decoration:underline}.offline-clear__button:hover{color:#fff}.offline-clear__hint{color:#ffffffbf;text-align:center;text-transform:none;margin:10px 0 0;font-size:11px}.offline-clear__hint--done{color:#fff;font-weight:700}.offline-clear__hint--error{color:#ffb4a8;margin-top:4px}