body{background-color:#999;font-family:sans-serif;font-size:.8em}body{background-color:#a9b}*{-webkit-user-select:none;user-select:none}h1{margin-top:0;text-align:left;font-weight:400;font-style:italic;font-size:2em}dd{font-size:1.2em;line-height:1.5em}dd .label{display:inline-block;width:2em}.options{margin-left:20px;text-align:left}.inlined{display:inline-block;margin-left:20px;vertical-align:top}.kybd{display:inline-block;vertical-align:middle;position:relative;overflow:hidden;white-space:nowrap;padding-bottom:1em;margin:0}.key{border-radius:0 0 1em 1em;color:#000;display:inline-block;height:16em;margin-right:.3em;text-align:center;vertical-align:top;width:3.5em;box-shadow:.3em .3em .3em #0003;border:solid .2em black;background-color:#fff;position:relative;z-index:1}.accidental{background-color:#000;color:#fff;position:absolute;z-index:2;height:10em;margin-left:-1.5em;width:2.5em}.key.highlight{background:linear-gradient(to bottom,#fff 50%,#0ff 80%)}.key.highlight.accidental{background:linear-gradient(to bottom,#000 30%,#0ff 70%);color:#000}.key p{margin:0;position:absolute;bottom:1em;width:100%;text-align:center}.info{display:inline-block;position:relative;vertical-align:top;margin-left:20px;padding:0 20px;background-color:#fff3;border-radius:.5em;min-width:20em;min-height:10em}button{margin:10px;padding:6px 20px;border-radius:20px;border:solid 3px #666}