html{min-width:667px}body{color:#fff;background-color:#222;flex-direction:column;min-height:calc(100dvh - 1rem);font-family:Lucida Grande,Lucida Sans Unicode,sans-serif;display:flex}a{color:orange;text-decoration:none}.computer_keys .key{box-sizing:border-box;width:var(--key-width);height:var(--key-height);border:2px solid #222;flex-shrink:0;display:inline-block}.computer_keys .row{height:var(--key-height);width:calc(var(--key-width) * 10);display:flex}.computer_keys .row_1{margin-left:var(--key-width)}.computer_keys .row_2{margin-left:calc(var(--key-width) * .5)}.computer_keys .row_3{margin-left:calc(var(--key-width) * .25)}.computer_keys .row_4{margin-left:0}.computer_keys .row_5{margin-left:calc(var(--key-width) * .5)}.computer_keys{--key-width:min(4rem, calc((max(667px, 100vw) - 2rem) / 11));--key-height:max(3rem, var(--key-width));width:calc(var(--key-width) * 11);line-height:var(--key-height);text-align:center;margin:2rem auto 0}.computer_keys .key{background-color:purple;border-radius:6px;transition:background-color 6s}.computer_keys .kc{font-weight:700}.computer_keys .row_5 .kc{font-size:.625rem}.computer_keys .key_1_4,.computer_keys .key_2_5,.computer_keys .key_5_5,.computer_keys .key_8_5,.computer_keys .key_1_1,.computer_keys .key_2_2,.computer_keys .key_3_3,.computer_keys .key_4_4,.computer_keys .key_4_1,.computer_keys .key_5_2,.computer_keys .key_6_3,.computer_keys .key_7_4,.computer_keys .key_7_1,.computer_keys .key_8_2,.computer_keys .key_9_3,.computer_keys .key_10_4,.computer_keys .key_11_5,.computer_keys .key_10_1{background-color:#9400d3}.computer_keys .key_1_3,.computer_keys .key_2_4,.computer_keys .key_3_5,.computer_keys .key_6_5,.computer_keys .key_2_1,.computer_keys .key_3_2,.computer_keys .key_4_3,.computer_keys .key_5_4,.computer_keys .key_5_1,.computer_keys .key_6_2,.computer_keys .key_7_3,.computer_keys .key_8_4,.computer_keys .key_9_5,.computer_keys .key_8_1,.computer_keys .key_9_2,.computer_keys .key_10_3{background-color:#483d8b}.computer_keys .black_key{background:#333}.computer_keys .black_key.key_inactive{background:#483d8b}.computer_keys .white_key{background:#999}.computer_keys .white_key.key_inactive{background:#9400d3}.computer_keys .key_inactive{transition:background-color 1s}.computer_keys .key_active{background-color:orange;transition:background-color .1s;transform:translateY(2px)}.computer_keys .key{position:relative}.computer_keys .hz,.computer_keys .note{font-size:.5rem;line-height:1rem}.computer_keys .hz{color:#202020a8;position:absolute;top:0;right:.5rem}.computer_keys .note{border-radius:4px;padding:0 .2rem;line-height:.9rem;position:absolute;bottom:.2rem;left:.2rem}.computer_keys .black_key .note{color:#fff;background:#00000054}.computer_keys .white_key .note{color:#000;background:#ffffff80}.piano_keys{white-space:nowrap;width:max-content;margin:.8rem auto 0;position:relative}.piano_keys .key{box-sizing:border-box;background-color:#999;border:1px solid #222;border-radius:4px;width:1rem;height:4rem;display:inline-block}.piano_keys .white_key{background-color:#fff}.piano_keys .black_key{background-color:#000}.piano_keys .raised_key,.piano_keys .key_42,.piano_keys .key_44,.piano_keys .key_56,.piano_keys .key_90,.piano_keys .key_92,.piano_keys .key_94,.piano_keys .key_97{border-width:2px;width:.6rem;height:3.5rem;margin-top:-.8rem;margin-left:-.25rem;position:absolute}.piano_keys .key_inactive{transition:background-color 3s}.piano_keys .key_active{background-color:orange;transition:background-color}.midi_ports{box-sizing:border-box;color:#999;opacity:.5;flex-wrap:wrap;justify-content:center;gap:1rem 2rem;max-width:34rem;margin:2rem auto 0;padding:0 1rem;font-size:.8125rem;display:flex}.midi_port{flex:1 1 0;align-items:center;gap:.75rem;min-width:0;display:flex}.midi_port label{font-size:inherit;font-weight:700}.midi_select{flex:1;min-width:0;position:relative}.midi_select:after{content:"";pointer-events:none;border-bottom:2px solid;border-right:2px solid;width:.4rem;height:.4rem;position:absolute;top:50%;right:.75rem;transform:translateY(-75%)rotate(45deg)}.midi_select select{appearance:none;box-sizing:border-box;color:#fff;width:100%;font:inherit;text-align:center;cursor:pointer;background:#222;border:1px solid #eee;border-radius:.375rem;padding:.5rem 2rem .5rem .75rem;line-height:1.25rem}.midi_select select:focus-visible{outline-offset:3px;outline:3px solid orange}[hidden]{display:none!important}#instrument{outline:none;flex-shrink:0;margin-block:auto;padding-block:1rem;display:flow-root}.mode_switch{opacity:.5;width:min(16rem,100% - 2rem);margin:0 auto;display:flex}.mode_switch button{color:#fff;font:inherit;cursor:pointer;background:#222;border:1px solid #eee;flex:1;padding:.5rem .75rem;font-size:.8125rem;font-weight:700;line-height:1.25rem}.mode_switch button:first-child{border-radius:.375rem 0 0 .375rem}.mode_switch button:last-child{border-radius:0 .375rem .375rem 0;margin-left:-2px}.mode_switch button[aria-pressed=true]{color:#000;background:#eee}.mode_switch button[aria-disabled=true]{color:#999;cursor:not-allowed}.mode_switch button:focus-visible{outline-offset:3px;z-index:1;outline:3px solid orange}.overlay{z-index:999;background:#000000e6;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#enabler{color:#000;cursor:pointer;background:orange;border:none;border-radius:.25rem;padding:1rem;font-weight:700}.keys .key{touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.piano_scroll{max-width:100%;margin:1rem auto 0;overflow-x:auto}.piano_scroll:focus-visible{outline-offset:-2px;outline:2px solid orange}@media (width>667px){.midi_ports[hidden]{visibility:hidden;display:flex!important}}@media (width<=667px){.mode_switch{display:none}.computer_keys{margin-top:0}.piano_scroll{margin-top:1.5rem}.midi_ports{margin-top:1rem}.midi_port select,.mode_switch button{min-height:44px}.computer_keys .hz{font-size:.4375rem;right:.2rem}.computer_keys .note{padding:0 .1rem;left:0}}