.simple-piano-container[data-v-a5deadc8]{display:flex;justify-content:center;position:relative;width:100%}@media only screen and (min-width:1024px){.simple-piano-container[data-v-a5deadc8]{max-width:none;width:auto}}.piano[data-v-a5deadc8]{align-items:center;overflow:hidden;padding:3px 0;touch-action:none!important}@media only screen and (max-width:1023px){.piano[data-v-a5deadc8]{max-width:100%;overflow:hidden}}@media only screen and (min-width:1024px){.piano[data-v-a5deadc8]{overflow-x:auto}}.piano-scroll-btn[data-v-a5deadc8]{align-items:center;background:#0009;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.2em;height:52px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:52px;z-index:1}.piano-scroll-btn.left[data-v-a5deadc8]{left:8px}.piano-scroll-btn.right[data-v-a5deadc8]{right:8px}.piano-scroll-btn[data-v-a5deadc8]:hover{background:#000000b3}.simple-piano-container .piano-key-clicked{filter:brightness(.9);transform:scale(.95)}.simple-piano-container .white-keys>div{box-shadow:inset 0 -2px 4px #00000014,0 1px 2px #0000000d;transition:transform .1s ease,filter .1s ease}.simple-piano-container .white-keys>div:active{filter:brightness(.85)}.simple-piano-container .black-keys>div{box-shadow:0 3px 6px #0006,inset 0 -1px 2px #ffffff14;transition:transform .1s ease,filter .1s ease}.simple-piano-container .black-keys>div:active{filter:brightness(.85)}.simple-piano-container .white-keys>div.highlighted:after,.simple-piano-container .white-keys>div.root:after{border-radius:50%;bottom:10%;content:"";height:1em;left:50%;pointer-events:none;position:absolute;transform:translate(-50%);width:1em}.simple-piano-container .black-keys>div.highlighted:after,.simple-piano-container .black-keys>div.root:after{border-radius:50%;bottom:0;content:"";height:.75em;left:50%;pointer-events:none;position:absolute;transform:translate(-50%);width:.75em}.simple-piano-container .white-keys>div.root:after{background-color:var(--positive);color:#000;content:"R";font-weight:700;height:1.5em;width:1.5em}.simple-piano-container .black-keys>div.root:after{background-color:var(--positive);bottom:30%;color:#000;content:"R";font-weight:700;height:1.5em;width:1em}.simple-piano-container .white-keys>div.highlighted:after{background-color:var(--positive-d1);border:2px solid #019b6f}.simple-piano-container .black-keys>div.highlighted:after{background-color:var(--positive);border:2px solid #00ffd5;bottom:20%}