:root{--keyboard-width:95vw;--key-width:calc(100%/12)}body{background-color:#282c35;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;margin:0;display:flex}.controls-container{flex-direction:row;justify-content:center;align-items:center;gap:10px;width:100%;display:flex}.keyboard{height:calc(var(--keyboard-width)/12*4);width:var(--keyboard-width);flex-direction:row;justify-content:center;margin:10px 0;display:flex}.key{width:var(--key-width);background-color:#fff;border-radius:0 0 calc(.2vw + 5px) calc(.2vw + 5px);height:100%;margin:0 2px;position:relative;box-shadow:1px 10px 8px #0000004d}.key.sharp{z-index:1;margin-left:calc(var(--key-width)*-.3);margin-right:calc(var(--key-width)*-.3);width:calc(var(--key-width)*.6);background-color:#000;height:60%;position:relative;box-shadow:1px 4px 8px #0000004d}.key.pressed{box-shadow:none;background-color:#e1f1ff}.key.sharp.pressed{box-shadow:none;background-color:#002341}.hint{text-align:center;width:100%;font-size:calc(1.5vw + 10px);display:none;position:absolute;bottom:calc(1vw + 5px)}.sharp .hint{color:#fff}.show-hint .hint{display:initial}
/*# sourceMappingURL=path0.0857572b.css.map */