.piano-full[data-v-51b0fa5b]{align-items:center;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%}.piano-full.pinned[data-v-51b0fa5b]{bottom:0;left:0;position:fixed;right:0;z-index:100}.piano-scroll-container[data-v-51b0fa5b]{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.piano-scroll-container[data-v-51b0fa5b]::-webkit-scrollbar{height:8px}.piano-scroll-container[data-v-51b0fa5b]::-webkit-scrollbar-thumb{background:#bbb;border-radius:4px}.piano-scroll-container[data-v-51b0fa5b]::-webkit-scrollbar-track{background:#f0f0f0}.piano-wrapper[data-v-51b0fa5b]{display:inline-flex;flex-direction:column}.piano-main[data-v-51b0fa5b]{background:#fff;border:4px solid #2e2e2e;border-radius:6px;box-sizing:border-box;margin-bottom:24px}.piano-keys-container[data-v-51b0fa5b]{align-items:flex-end;background:#fff;display:flex;height:120px;list-style:none;margin:0;padding:0;touch-action:none}.piano-keys-container li[data-v-51b0fa5b]{flex-shrink:0;width:44px}.piano-keys-container li[data-v-51b0fa5b],.white[data-v-51b0fa5b]{display:flex;height:100%;position:relative}.white[data-v-51b0fa5b]{align-items:center;background:#f5f5f5;border-radius:3px;box-shadow:0 1px 1px #00000080;box-sizing:border-box;color:#333;cursor:pointer;flex-direction:column;justify-content:flex-end;padding:4px 2px;touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none;width:100%;z-index:1}.white.active[data-v-51b0fa5b],.white[data-v-51b0fa5b]:active{box-shadow:inset -1px 0 15px #000000b3}.white.highlighted[data-v-51b0fa5b]{background:#fde68a}.black.highlighted[data-v-51b0fa5b]{background:#b45309}.black.pulse[data-v-51b0fa5b],.white.pulse[data-v-51b0fa5b]{animation:learn-notes-pulse-51b0fa5b 1.1s ease-in-out infinite}@keyframes learn-notes-pulse-51b0fa5b{0%,to{background-color:#fde68a}50%{background-color:#f59e0b}}.center-dot[data-v-51b0fa5b]{background:#e74c3c;border-radius:50%;box-shadow:0 0 4px #0000004d;height:6px;left:50%;pointer-events:none;position:absolute;top:6px;transform:translate(-50%);width:6px;z-index:5}.black[data-v-51b0fa5b]{align-items:center;background:#000;box-shadow:1px 0 #111,0 2px #111,0 3px #333,0 4px #333,0 5px #333,0 6px 1px #0000001a,0 0 5px #0000001a,0 1px 3px #0000004d,0 3px 5px #0003,0 5px 10px #00000040,0 10px 10px #0003,0 20px 20px #00000026;-webkit-box-shadow:1px 0 #777,0 2px 0 #777,0 3px 0 #666,0 4px 0 #555,0 5px 0 #444,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);box-sizing:border-box;color:#cfcfcf;cursor:pointer;display:flex;flex-direction:column;height:60px;justify-content:flex-end;padding:4px 2px;position:absolute;right:-35%;touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none;white-space:normal;width:70%;word-break:break-word;z-index:2}.black.active[data-v-51b0fa5b],.black[data-v-51b0fa5b]:active{box-shadow:1px 0 #777,0 2px #777,0 3px #666,0 4px #555}.letter-designation[data-v-51b0fa5b],.note-name[data-v-51b0fa5b]{display:none}.show-literal-designation .letter-designation[data-v-51b0fa5b]{display:block;font-size:.75em;font-weight:600;line-height:1.2;margin-bottom:8px;text-align:center}.show-note-name .note-name[data-v-51b0fa5b]{bottom:0;display:block;font-size:.55em;font-style:italic;font-weight:400;left:0;line-height:1.1;padding:0 1px;position:absolute;right:0;text-align:center;white-space:normal}.russian-only .note-name[data-v-51b0fa5b]{align-items:center;bottom:2px;display:flex;flex-direction:column;font-size:.7em;line-height:1;position:relative}.note-name .octave[data-v-51b0fa5b]{display:inline-block;font-size:.85em;font-weight:400;margin-left:1px;vertical-align:baseline}.black .letter-designation[data-v-51b0fa5b]{font-size:.7em;margin-bottom:25px}.black .note-name[data-v-51b0fa5b]{bottom:2px;font-size:.5em}.russian-only .black .note-name[data-v-51b0fa5b]{bottom:4px;font-size:.65em}.alteration-sign-flat[data-v-51b0fa5b],.alteration-sign-sharp[data-v-51b0fa5b]{display:none}[sign=flat] .alteration-sign-flat[data-v-51b0fa5b],[sign=sharp] .alteration-sign-sharp[data-v-51b0fa5b]{align-items:center;display:flex;flex-direction:column}.chromatic-hidden .chromatic-button[data-v-51b0fa5b]{opacity:0!important}.letter-designation[data-v-51b0fa5b],.note-name[data-v-51b0fa5b]{color:var(--key-color,inherit)}.white[data-v-51b0fa5b]:after{background-color:var(--key-color,transparent);border-radius:3px;bottom:5px;content:"";height:3px;left:0;margin:0 auto;opacity:0;position:absolute;right:0;transition:opacity .2s;width:65%}.no-labels .black[data-v-51b0fa5b]:after,.no-labels .white[data-v-51b0fa5b]:after{opacity:1}.action-bar[data-v-51b0fa5b]{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;gap:4px;position:absolute;z-index:10}.action-bar-bottom .action-bar[data-v-51b0fa5b],.action-bar-top .action-bar[data-v-51b0fa5b]{height:var(--action-bar-size);left:0;right:0}.action-bar-top .action-bar[data-v-51b0fa5b]{top:calc(var(--action-bar-size)*-1)}.action-bar-bottom .action-bar[data-v-51b0fa5b]{bottom:calc(var(--action-bar-size)*-1)}.action-bar-left .action-bar[data-v-51b0fa5b],.action-bar-right .action-bar[data-v-51b0fa5b]{bottom:0;flex-direction:column;height:auto;top:0;width:var(--action-bar-size)}.action-bar-left .action-bar[data-v-51b0fa5b]{left:calc(var(--action-bar-size)*-1)}.action-bar-right .action-bar[data-v-51b0fa5b]{right:calc(var(--action-bar-size)*-1)}