.simple-piano-container[data-v-581c0544]{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;justify-content:center;width:100%;display:flex;position:relative}@media only screen and (width>=1024px){.simple-piano-container[data-v-581c0544]{width:auto;max-width:none}}.piano[data-v-581c0544]{align-items:center;padding:3px 0;overflow:hidden;touch-action:none!important}@media only screen and (width<=1023px){.piano[data-v-581c0544]{max-width:100%;overflow:hidden}}@media only screen and (width>=1024px){.piano[data-v-581c0544]{overflow-x:auto}}.piano-scroll-btn[data-v-581c0544]{color:#fff;cursor:pointer;z-index:1;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:1.2em;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.piano-scroll-btn.left[data-v-581c0544]{left:8px}.piano-scroll-btn.right[data-v-581c0544]{right:8px}.piano-scroll-btn[data-v-581c0544]:hover{background:#000000b3}.simple-piano-container.is-selectable .black-keys>div,.simple-piano-container.is-selectable .white-keys>div{cursor:pointer}.simple-piano-container.is-selectable .black-keys>div:after,.simple-piano-container.is-selectable .white-keys>div:after{display:none}.simple-piano-container.is-selectable .black-keys>div:focus-visible,.simple-piano-container.is-selectable .white-keys>div:focus-visible{outline:2px solid var(--positive);outline-offset:2px;z-index:2}.simple-piano-container.is-selectable .black-keys>div.highlighted,.simple-piano-container.is-selectable .white-keys>div.highlighted{color:var(--on-positive);background:var(--positive)!important}.simple-piano-container.is-selectable .white-keys>div{color:#000}.simple-piano-container.is-selectable .black-keys>div{color:#fff}.simple-piano-container.is-selectable .piano-selection-label{text-align:center;pointer-events:none;font-size:12px;font-weight:600;position:absolute;bottom:8px;left:0;right:0}.simple-piano-container .piano-key-clicked{filter:brightness(.9);transform:scale(.95)}.simple-piano-container .piano-key-clicked.white{border:4px solid var(--positive)!important}.simple-piano-container .piano-key-clicked.black{transform:scale(.9)translateY(-4px);border:2px solid var(--positive)!important}.simple-piano-container .white-keys>div{transition:transform .1s;box-shadow:inset 0 -2px 4px #00000014,0 1px 2px #0000000d}.simple-piano-container .black-keys>div{transition:transform .1s;box-shadow:0 3px 6px #0006,inset 0 -1px 2px #ffffff14}.simple-piano-container .white-keys>div.highlighted:after,.simple-piano-container .white-keys>div.root:after{content:"";pointer-events:none;border-radius:50%;width:1em;height:1em;position:absolute;bottom:10%;left:50%;transform:translate(-50%)}.simple-piano-container .black-keys>div.highlighted:after,.simple-piano-container .black-keys>div.root:after{content:"";pointer-events:none;border-radius:50%;width:.75em;height:.75em;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.simple-piano-container .white-keys>div.root:after{background-color:var(--positive);content:"R";color:#000;justify-content:center;align-items:center;width:1.6em;height:1.6em;font-weight:700;display:flex}.simple-piano-container .black-keys>div.root:after{background-color:var(--positive);content:"R";color:#000;width:1em;height:1.5em;font-weight:700;bottom:30%}.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%}