body{background:#bbb;overflow-x:hidden;margin:0;padding:0;width:100%}header{display:flex;justify-content:flex-end;margin:0;padding:0}.hd_l{margin:0;padding:0}.hd_r{margin:0;padding:0;display:flex;justify-content:flex-end}a{color:#666;text-decoration:none}a:hover{text-decoration:underline}a.btn,.btn_scale{margin:0 0em;padding:0 0.2em;font-size:80%}.btn_scale{background:linear-gradient(#bbb, #fff)}.reset_button,button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0 0.1em;appearance:none;font-size:100%;font-family:initial}@keyframes push-on{from{transform:translate(0, 0px)}to{transform:translate(0, 3px)}}@keyframes push-off{from{transform:translate(0, 3px)}to{transform:translate(0, 0px)}}button{background:#fff;box-shadow:0 3px 5px 0px rgba(0,0,0,0.5);color:#666;border-radius:4px;margin:0.2em 0.2em;padding:0.2em 1em;font-size:80%;animation:push-off 0.1s}button:hover{background:#eee;color:#444}button:active{background:#eee;box-shadow:0 1px 5px 0px rgba(0,0,0,0.5);transform:translate(0, 3px);animation:push-on 0.1s}.bw1,.sfbtn{padding:0.2em 0.5em}canvas{user-select:none;touch-action:none;height:1}.keysig{display:flex;flex-wrap:nowrap;justify-content:space-between;width:100%}.hd{white-space:nowrap}.hd2{display:flex;text-align:center;flex-shrink:2;overflow:hidden}.keyname0{flex-shrink:2;display:flex;font-family:serif;font-weight:bold;font-style:italic;overflow:hidden;white-space:nowrap;text-shadow:5px 5px 4px rgba(0,0,0,0.5)}#keyname{font-size:150%;margin-right:0.5em}#scalename{flex-shrink:2;font-size:120%;vertical-align:middle;overflow:hidden;white-space:nowrap;padding-right:0.1em;margin-right:0.3em}.page{background:#fff;margin:1em 0;padding:0em 1em 0 1em;box-shadow:0 5px 20px 0px rgba(0,0,0,0.5);overflow:hidden}@keyframes page_out2{from{transform:scale(1)}to{transform:scale(0)}}.page_out{transform-origin:top right;animation:page_out2 0.25s;transform:scale(0)}.f1,.cv{width:100%;margin:0.5em 0 0.5em 0;padding:0}.f1{display:flex;flex-wrap:wrap;justify-content:center;overflow:hidden}.sfbtn{border-radius:1em}.hd0{display:flex;justify-content:space-between}@keyframes wipe-in{from{height:0px}to{height:10em}}@keyframes wipe-out{from{height:10em}to{height:0px}}.config{background:#fff;overflow:auto;margin:1em 0;padding:1em;box-shadow:0 5px 20px 0px rgba(0,0,0,0.5);animation:wipe-in 0.15s;height:10em;transform-origin:top;display:flex;justify-content:space-between;flex-direction:row}.exit{animation:wipe-out 0.15s;height:0px}.cfg_column{border:1px #888 solid}.scalemenu{box-shadow:0 10px 20px 0px rgba(0,0,0,0.5);border-radius:10px;overflow-y:auto;background:#ffffff;position:fixed;top:2em;bottom:1em;right:1em}.scalemenu_header{position:fixed}.scalemenu_table{padding:2em 2em 1em 2em;border-bottom:1px #888 dotted;top:2em;bottom:0;right:0;left:0}#bottom{display:flex;justify-content:space-between}@media print{header{display:none}button{display:none}.page{box-shadow:none;border-bottom:1px #888 dotted}}footer{width:100%;bottom:1em;font-size:80%;text-align:center;color:#666}