:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;font-synthesis:none}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:#fff;color:#111}#root{width:100%;min-height:100vh;margin:0;padding:0}.piano{padding-bottom:28.8%;width:100%}.piano__clear{clear:both}.piano__key{float:left;position:relative}.piano__key:first-child{margin-left:20%}.piano__key:last-child{border-right:2px solid black}.piano__key--white{padding-bottom:28.8%;width:8.5714285714%;z-index:1;border-top:2px solid black;border-bottom:2px solid black;border-left:2px solid black;background-color:#fff;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.piano__key--black{padding-bottom:15.84%;width:4.7142857143%;z-index:2;border:2px solid black;background-color:#fff;margin:0 0 0 calc(-2.3571428571% - 2px);border-bottom-left-radius:10px;border-bottom-right-radius:10px}.piano__key--on{background-color:#ffde6a}.a,.b,.d,.e,.g{margin:0 0 0 calc(-2.3571428571% - 2px)}