.compact-piano,.compact-piano *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;touch-action:manipulation}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--natural{height:140px!important;background:#fff!important;border:1px solid #E2E8F0!important}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--accidental{height:85px!important}.compact-piano:not(.compact-piano-v2) .ReactPiano__NoteLabelContainer{display:none!important}.compact-piano.compact-piano-v2 .ReactPiano__Key{position:relative}.compact-piano.compact-piano-v2{width:100%;height:100%;min-height:140px}.compact-piano.compact-piano-v2 .ReactPiano__Keyboard{width:100%!important;height:100%!important}.compact-piano.compact-piano-v2 .ReactPiano__NoteLabelContainer{display:block!important;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.compact-piano.compact-piano-v2 .ReactPiano__Key--accidental{border:1px solid #ffffff!important;border-top:1px solid transparent!important}.compact-piano.compact-piano-v2 .ReactPiano__Key--natural{background:#fff!important;border:1px solid #E2E8F0!important}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--active{background:#319795!important;border:1px solid #0d7377!important;box-shadow:inset 0 0 0 1px #0d7377!important}.compact-piano .ReactPiano__Key[aria-label*=C4]{position:relative}.compact-piano .ReactPiano__Key[aria-label*=C4]:before{content:"";position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:12px;height:12px;border-radius:50%;background-color:#cbd5e1;opacity:.6;z-index:10;pointer-events:none}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--wrong{background:#f87171!important;border:1px solid #991b1b!important;box-shadow:inset 0 0 0 1px #991b1b!important}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--wrong.ReactPiano__Key--active{background:#f87171!important;border:1px solid #991b1b!important;box-shadow:inset 0 0 0 1px #991b1b!important}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--wrong.ReactPiano__Key--accidental{background:#dc2626!important;border:1px solid #991b1b!important;box-shadow:inset 0 0 0 1px #991b1b!important}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--target{box-shadow:inset 0 0 0 2px #10b981!important;border:1px solid transparent!important}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--target.ReactPiano__Key--accidental{box-shadow:inset 0 0 0 2px #10b981!important;border:1px solid transparent!important}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--target.ReactPiano__Key--active{background:#319795!important;border:1px solid #0d7377!important;box-shadow:inset 0 0 0 1px #0d7377!important}.compact-piano:not(.compact-piano-v2) .ReactPiano__Key--target.ReactPiano__Key--wrong{background:#f87171!important;border:1px solid #991b1b!important;box-shadow:inset 0 0 0 1px #991b1b!important}.PianoKeysV2{width:100%}.PianoKeysV2__keyboard{position:relative;border:1px solid #E2E8F0;border-radius:12px;background:#fff}.PianoKeysV2__whites{display:flex;height:100%}.PianoKeysV2__blacks{position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none}.PianoKeysV2__key{box-sizing:border-box;border-radius:0 0 6px 6px;position:relative}.PianoKeysV2__key--natural{background:#fff;border:1px solid #E2E8F0}.PianoKeysV2__key--accidental{position:absolute;background:#555;border:1px solid #ffffff;border-top:1px solid transparent;border-radius:0 0 4px 4px;z-index:2}.PianoKeysV2__key--active-correct{background:#319795;border:1px solid #0d7377;box-shadow:inset 0 0 0 1px #0d7377}.PianoKeysV2__key--active-unknown{background:#90cdf4;border:1px solid #2b6cb0;box-shadow:inset 0 0 0 1px #2c5282}.PianoKeysV2__key--active-wrong{background:#f87171;border:1px solid #991b1b;box-shadow:inset 0 0 0 1px #991b1b}.PianoKeysV2__key--accidental.PianoKeysV2__key--active-wrong{background:#dc2626}.PianoKeysV2__key--accidental.PianoKeysV2__key--active-unknown{background:#4299e1;border:1px solid #2b6cb0}.PianoKeysV2__key--target{box-shadow:inset 0 0 0 2px #10b981;border:1px solid transparent}.PianoKeysV2__key--middle-c:after{content:"";position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:12px;height:12px;border-radius:50%;background-color:#cbd5e1;opacity:.6;pointer-events:none}@font-face{font-family:Noto;src:local("Noto"),url(/assets/noto-BNWX-blu.ttf) format("truetype");font-weight:400}@font-face{font-family:Bravura;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/bravura/bravura.woff2) format("woff2");font-weight:400}@font-face{font-family:Academico;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/academico/academico.woff2) format("woff2");font-weight:400}@font-face{font-family:Edwin;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/edwin/edwin.woff2) format("woff2");font-weight:400}@font-face{font-family:Finaleash;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/finaleash/finaleash.woff2) format("woff2");font-weight:400}@font-face{font-family:Finalebroadway;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/finalebroadway/finalebroadway.woff2) format("woff2");font-weight:400}@font-face{font-family:Finalejazz;src:url(/assets/finalejazz-8JzSrruI.woff2) format("woff2"),url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/finalejazz/finalejazz.woff2) format("woff2");font-weight:400}@font-face{font-family:Finalemaestro;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/finalemaestro/finalemaestro.woff2) format("woff2");font-weight:400}@font-face{font-family:Gonville;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/gonville/gonville.woff2) format("woff2");font-weight:400}@font-face{font-family:Gootville;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/gootville/gootville.woff2) format("woff2");font-weight:400}@font-face{font-family:Leipzig;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/leipzig/leipzig.woff2) format("woff2");font-weight:400}@font-face{font-family:Leland;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/leland/leland.woff2) format("woff2");font-weight:400}@font-face{font-family:Musejazz;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/musejazz/musejazz.woff2) format("woff2");font-weight:400}@font-face{font-family:Nepomuk;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/nepomuk/nepomuk.woff2) format("woff2");font-weight:400}@font-face{font-family:Petaluma;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/petaluma/petaluma.woff2) format("woff2");font-weight:400}@font-face{font-family:Petalumascript;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/petalumascript/petalumascript.woff2) format("woff2");font-weight:400}@font-face{font-family:Sebastian;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/sebastian/sebastian.woff2) format("woff2");font-weight:400}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}