*,:before,:after{box-sizing:border-box}*{font:inherit;line-height:inherit;margin:0;padding:0;color:inherit;border-color:currentcolor}html{-webkit-text-size-adjust:none;text-size-adjust:none;font-synthesis:none;font-size:100%;line-height:1.25;font-family:system-ui;overflow-wrap:break-word;text-box-trim:trim-both;text-box-edge:cap alphabetic}b,strong{font-weight:700}i,em{font-style:italic}code,kbd,samp,pre{font-family:ui-monospace,monospace}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img,picture,svg,canvas{max-inline-size:100%;block-size:auto;display:block}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}html{color-scheme:light dark;color:light-dark(black,white);background-color:light-dark(white,black)}body{display:grid;padding:calc(.125rlh + 5vmin) calc(.125rlh + 3vmin);margin:0;gap:2rlh}body>*{display:grid;gap:1rlh}form{display:grid;gap:1rlh}label{display:grid;gap:.25rlh}fieldset{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rlh,max-content));align-items:start;gap:1rlh;border:none;border-top:1px solid;padding-top:.25rlh}legend{font-weight:700;padding:.25rlh .25rlh .25rlh 0;font-size:123.6%}form button{justify-self:start;padding:.25rlh}input[type=range]::-webkit-slider-runnable-track{appearance:none;background-color:light-dark(black,#333);border-radius:.5rlh;border:1px solid black}.key-checkboxes{display:grid;grid-template-columns:repeat(auto-fill,1.5rlh);gap:.25rlh;margin-top:.25rlh}.key-checkboxes input{display:none}.key-checkboxes label{background:light-dark(white,black);color:#666;outline:1px solid;text-align:center;border-radius:.25rlh;line-height:1.5rlh;cursor:pointer}.key-checkboxes label:has(input:checked){filter:invert(100%);color:light-dark(black,white);outline-color:transparent}pre{white-space:normal}code{font-size:75%;line-height:.75rlh}cite{font-style:italic}#visualizer{gap:.25rlh;border:1px solid black}#visualizer canvas{height:7rlh;width:100%;display:block}.keys{--key-width: 2.5rlh;--key-height: 2.5rlh;--slot: minmax(0, calc(var(--key-width) / 2));display:grid;grid-template-columns:repeat(auto-fit,var(--octave-grid-track));align-items:end;gap:1rlh 0rlh}@media (min-width: 40rlh) and (min-height: 40rlh){.keys{--key-width: 3rlh;--key-height: 4rlh}}@media (min-width: 60rlh) and (min-height: 40rlh){.keys{--key-width: 3rlh;--key-height: 5rlh}}.keys:has(.white:first-child~.black:last-child,.black:first-child~.white:last-child){padding-right:calc(var(--key-width) / 2)}.keys,.keys *{-webkit-user-select:none;user-select:none}.key{width:100%;height:var(--key-height);pointer-events:none;box-shadow:0 0 .25rlh #6669,0 0 .5rlh #6667,0 0 1rlh #6665}.black{width:200%;margin-bottom:var(--key-height)}.white{z-index:0;width:200%}.white:has(+.white),.black:has(+.black){width:100%;grid-column-end:span 2}.key button{cursor:pointer;width:100%;height:100%;border:none;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:.25rlh;padding-bottom:.5rlh;touch-action:none;pointer-events:all;font-weight:300;transition:none;outline:none}.white button{background-color:#fff;color:#000}.black button{background-color:#000;color:#fff}.key .fading{transition:box-shadow 2s ease-in}.key button.active{box-shadow:inset 0 0 2rlh #666!important}.key button *{pointer-events:none}h1{font-size:195%;line-height:2rlh;font-weight:900}h2{font-size:162%;line-height:1.5rlh;font-weight:600}p{max-width:33rlh}