.piano_pianowrapper__tYQQ_{display:flex;justify-content:center;padding:1rem;overflow-x:auto;--white-key-width:30px;font-size:calc(var(--white-key-width) * .35);--white-key-height:calc(var(--white-key-width) * 5);--black-key-width:calc(var(--white-key-width) * 0.6);--black-key-height:calc(var(--white-key-height) * 0.6)}.piano_pianoscalecontainer__kT5ne{position:relative}.piano_piano__UmR1J{position:relative;display:flex;height:var(--white-key-height)}.piano_key__tnRfj.piano_white__EiWgr{background:white;border:1px solid #000}.piano_key__tnRfj.piano_black__uFmIv{background:black;border:1px solid black}.piano_key-container__S7ta2{position:relative}.piano_black-positions__Bvqgs{position:absolute;top:0;left:0;display:flex;width:100%;height:0}.piano_blackspacer__y0Bq6{width:var(--white-key-width);position:relative}.piano_blackspacer__y0Bq6 .piano_key__tnRfj.piano_black__uFmIv{position:absolute;left:calc(var(--white-key-width) * .7)}.piano_blacknotelabel__A0jLt{text-align:center;padding-top:calc(var(--black-key-height) - (var(--white-key-width) * .6));color:#fff}.piano_whitenotelabel__w_pPB{text-align:center;padding-top:calc(var(--white-key-height) - (var(--white-key-width) * .6));color:#000}.piano_notefingering__izcUn{text-align:center;color:var(--color-highlight);border-radius:50%;border:2px solid #5c8a28;height:24px;line-height:19px;width:24px;background-color:#0d0f0b;font-size:13px;margin-top:-40px}.piano_blacknotefingering__EQG3U{margin-left:-3px}.piano_whitenotefingering__NlojX{margin-left:2px}.piano_selected__zoyKQ .piano_blacknotelabel__A0jLt{color:#000}.piano_key__tnRfj.piano_white__EiWgr:not(.piano_selected__zoyKQ):hover{cursor:pointer;background:#eee}.piano_key__tnRfj.piano_black__uFmIv:not(.piano_selected__zoyKQ):hover{cursor:pointer;background:#555}.piano_key__tnRfj.piano_black__uFmIv.piano_selected__zoyKQ:hover,.piano_key__tnRfj.piano_white__EiWgr.piano_selected__zoyKQ:hover{cursor:pointer;background:#a6d8f1}.piano_blackkeyswrapper__pO7yn{margin-top:calc(-1 * var(--white-key-height))}.piano_chordtitle__RGAmh{text-transform:unset}.piano_key__tnRfj.piano_black__uFmIv{width:var(--black-key-width);height:var(--black-key-height);background:linear-gradient(180deg,#111,#333);border:1px solid #000;position:absolute;top:0;z-index:2;border-radius:2px;box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 3px rgba(0,0,0,.4)}.piano_key__tnRfj.piano_black__uFmIv:after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0));pointer-events:none}.piano_key__tnRfj.piano_white__EiWgr{width:var(--white-key-width);height:100%;background:linear-gradient(180deg,#fff,#ddd);border:1px solid #aaa;box-sizing:border-box;z-index:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 4px rgba(0,0,0,.1),0 2px 3px rgba(0,0,0,.1);border-radius:3px;position:relative}.piano_key__tnRfj.piano_white__EiWgr:after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none;border-radius:3px 3px 0 0}.piano_key__tnRfj.piano_selected__zoyKQ{background:#95cce8;font-weight:700}.piano_black__uFmIv.piano_octave__p6qGU{font-size:calc(var(--white-key-width) * .28)}