.container{display:flex;width:100%;height:100%;overflow-x:scroll;overflow-y:hidden;-ms-overflow-style:none;scrollbar-width:none}.container::-webkit-scrollbar{display:none}.key{display:flex;flex-direction:column;justify-content:end;aspect-ratio:.2;border:1px solid black;border-bottom-left-radius:.7cqh;border-bottom-right-radius:.7cqh;text-align:center;-webkit-user-select:none;user-select:none;font-size:1.5cqh}.key>div{opacity:.5}.key.white{height:calc(100% - 2px);margin-right:-1px;background-color:#fff;vertical-align:text-bottom}.key-black-container{height:calc(100% - 2px);position:relative}.key.black{position:absolute;height:55%;transform:translate(-50%);background-color:#000;color:#fff}.key.active{background-color:green;color:#fff}.center-dot{width:2cqh;aspect-ratio:1;background-color:#000;border-radius:100%;margin-bottom:1cqh;transform:translate(50%) scale(.5);filter:opacity(.5)}.piano-test{height:20vh}