:root{--black-key: #111010;--white-key: #ecece8}.black_key{position:absolute;top:0px;background:var(--black-key);z-index:1;border:1.5px solid var(--black-key);user-select:none;border-radius:0 0 3px 3px}.white_key{position:relative;background:var(--white-key);border:1px solid var(--black-key);user-select:none;border-radius:0 0 3px 3px}.highlight{background:var(--color-highlight)}.white_key.highlight .label{color:var(--white-key)}.black_key.highlight .label{color:var(--white-key)}.label{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);-webkit-user-select:none;user-select:none}.white_key .label{color:var(--black-key)}.black_key .label{color:var(--white-key);font-size:75%}.octave_label{font-size:75%;vertical-align:bottom}.label_hidden{display:none}