@import"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";@import"https://fonts.cdnfonts.com/css/segoe-ui-4";@import"https://fonts.cdnfonts.com/css/arial";@import"https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap";body{font:20pt "Noto Sans","Segoe UI",Arial,sans-serif}body code,body pre{font:1em "Fira Code"}body table{width:100%}body table tr th{font-size:1.5em;text-align:center;columns:100%}body table tr td{white-space:pre;background-color:#ddd;text-align:center;padding:0}body table tr td abbr{text-decoration:none}body table tr td.key{border-radius:5%;box-shadow:-0.125em -0.125em .125em 0 rgba(0,0,0,.125),-0.125em 0em .125em 0 rgba(0,0,0,.125),-0.125em .125em .125em 0 rgba(0,0,0,.125),0em -0.125em .125em 0 rgba(0,0,0,.125),0em .125em .125em 0 rgba(0,0,0,.125),.125em -0.125em .125em 0 rgba(0,0,0,.125),.125em 0em .125em 0 rgba(0,0,0,.125),.125em .125em .125em 0 rgba(0,0,0,.125)}body table tr td.key.tap{color:red}body table tr td.key.hold{color:green}body table tr td.key.flick{color:blue}body table tr td:not(.key){background-color:rgba(0,0,0,0) !important}