.v2pk-wrap{background:var(--color-retro-surface);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border:2px solid #2a2640;border-radius:.625rem;padding:1.125rem;overflow:auto hidden;box-shadow:0 6px #0006,inset 0 -3px #0003}.v2pk-piano{--v2pk-whites:14;--v2pk-accent:var(--v2g-accent,#a855f7);--v2pk-accent-deep:var(--v2g-accent-deep,#6d28d9);--v2pk-glow:var(--v2g-glow,#a855f773);background:#050409;border:2px solid #0a0812;border-radius:.625rem;width:100%;min-width:max-content;height:12.5rem;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 6px 12px #0009}@media (width<=640px){.v2pk-wrap{scrollbar-width:none;border-radius:.5rem;padding:.5rem 0}.v2pk-wrap::-webkit-scrollbar{display:none}.v2pk-piano{border-radius:.375rem;height:11.25rem}}.v2pk-white{cursor:pointer;background:linear-gradient(#f5f3f7 0%,#e2dfe7 90%,#c5c0cf 100%);border-right:1px solid #1a1825;flex-direction:column;flex:1 0 2.5rem;justify-content:flex-end;align-items:center;padding-bottom:.625rem;transition:filter 80ms,background 80ms;display:flex;position:relative}.v2pk-white:last-child{border-right:0}.v2pk-white:hover{background:linear-gradient(#fff 0%,#ede9f5 90%,#d4cee0 100%)}.v2pk-white.is-played{background:linear-gradient(180deg, color-mix(in srgb, var(--v2pk-accent) 55%, #fff) 0%, var(--v2pk-accent) 90%, var(--v2pk-accent-deep) 100%);box-shadow:inset 0 -4px 0 color-mix(in srgb, var(--v2pk-accent-deep) 60%, transparent), inset 0 6px 12px var(--v2pk-glow)}.v2pk-white.is-correct{background:linear-gradient(#86efac 0%,#22c55e 90%,#15803d 100%);box-shadow:inset 0 -4px #15803d80}.v2pk-white.is-wrong{background:linear-gradient(#fca5a5 0%,#ef4444 90%,#991b1b 100%);animation:.32s ease-in-out v2pkShake;box-shadow:inset 0 -4px #7f1d1d80}@media (prefers-reduced-motion:reduce){.v2pk-white.is-wrong{animation:none}}@keyframes v2pkShake{0%,to{transform:translate(0)}20%{transform:translate(-2px)}40%{transform:translate(2px)}60%{transform:translate(-1px)}80%{transform:translate(1px)}}.v2pk-piano.is-disabled .v2pk-white,.v2pk-piano.is-disabled .v2pk-black{cursor:default}.v2pk-piano.is-disabled .v2pk-white:hover{background:linear-gradient(#f5f3f7 0%,#e2dfe7 90%,#c5c0cf 100%)}.v2pk-label{color:#4c1d95;letter-spacing:.04em;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:"Press Start 2P",monospace;font-size:.5rem}.v2pk-white.is-played .v2pk-label,.v2pk-white.is-correct .v2pk-label,.v2pk-white.is-wrong .v2pk-label{color:#fff;text-shadow:0 1px #0000004d}.v2pk-black{width:calc(100% / var(--v2pk-whites) * .62);cursor:pointer;z-index:2;background:linear-gradient(#1f1c2e 0%,#050407 100%);border:1px solid #000;border-radius:0 0 .25rem .25rem;flex-direction:column;justify-content:flex-end;align-items:center;height:60%;padding-bottom:.375rem;transition:background 80ms;display:flex;position:absolute;top:0;box-shadow:0 4px 6px #0009,inset 0 -3px #00000080}.v2pk-black:hover{background:linear-gradient(#2a2640 0%,#0a0812 100%)}.v2pk-black.is-played{background:linear-gradient(180deg, var(--v2pk-accent-deep) 0%, color-mix(in srgb, var(--v2pk-accent-deep) 70%, #000) 100%);box-shadow:0 0 14px var(--v2pk-glow), inset 0 -3px 0 #00000080}.v2pk-black.is-correct{background:linear-gradient(#15803d 0%,#047857 100%)}.v2pk-black.is-wrong{background:linear-gradient(#991b1b 0%,#7f1d1d 100%);animation:.32s ease-in-out v2pkShake}@media (prefers-reduced-motion:reduce){.v2pk-black.is-wrong{animation:none}}.v2pk-black .v2pk-label{color:#ffffff80;font-size:.4375rem}.v2pk-black.is-played .v2pk-label,.v2pk-black.is-correct .v2pk-label,.v2pk-black.is-wrong .v2pk-label{color:#fff}.v2pk-black-hit{pointer-events:auto;background:0 0;border-radius:.375rem;position:absolute;inset:-.25rem}.v2pk-white.t-bass{background:linear-gradient(#86efac 0%,#22c55e 90%,#15803d 100%);box-shadow:inset 0 -4px #15803d80}.v2pk-white.t-root{background:linear-gradient(#d8b4fe 0%,#a855f7 90%,#6d28d9 100%);box-shadow:inset 0 -4px #6d28d98c}.v2pk-white.t-chord{background:linear-gradient(#c4b5fd 0%,#8b5cf6 90%,#5b21b6 100%);box-shadow:inset 0 -4px #5b21b673}.v2pk-white.t-seventh{background:linear-gradient(#67e8f9 0%,#06b6d4 90%,#0e7490 100%);box-shadow:inset 0 -4px #0e749080}.v2pk-white.t-tension{background:linear-gradient(#f0abfc 0%,#d946ef 90%,#a21caf 100%);box-shadow:inset 0 -4px #a21caf80}.v2pk-white.t-bass .v2pk-label,.v2pk-white.t-root .v2pk-label,.v2pk-white.t-chord .v2pk-label,.v2pk-white.t-seventh .v2pk-label,.v2pk-white.t-tension .v2pk-label{color:#fff;text-shadow:0 1px #00000059}.v2pk-black.t-bass{background:linear-gradient(#15803d 0%,#064e3b 100%)}.v2pk-black.t-root{background:linear-gradient(#7e22ce 0%,#4c1d95 100%)}.v2pk-black.t-chord{background:linear-gradient(#6d28d9 0%,#3b1178 100%)}.v2pk-black.t-seventh{background:linear-gradient(#0e7490 0%,#083344 100%)}.v2pk-black.t-tension{background:linear-gradient(#a21caf 0%,#611066 100%)}.v2pk-black.t-bass,.v2pk-black.t-root,.v2pk-black.t-chord,.v2pk-black.t-seventh,.v2pk-black.t-tension{box-shadow:0 4px 6px #0009,inset 0 -3px #00000073}.v2pk-white,.v2pk-black{gap:.25rem}.v2pk-hint{font-family:var(--font-pixel);letter-spacing:.02em;color:#14101c;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap;background:#fff;border:1px solid #00000059;border-radius:.25rem;padding:.1875rem .25rem;font-size:.5rem;line-height:1;box-shadow:0 1px 2px #00000059}.v2pk-black .v2pk-hint{padding:.125rem .1875rem;font-size:.4375rem}@media (width<=640px){.v2pk-hint{padding:.125rem .1875rem;font-size:.4375rem}.v2pk-white{flex-basis:2.25rem}}