.key-ruler{background:var(--surface);box-shadow:0 0 0 1px var(--line);border-radius:10px;display:flex;overflow-x:auto}.key-ruler-column{text-align:center;flex:1 0 auto;min-width:44px}.key-ruler-column--neighbour{background:color-mix(in srgb, var(--highlight) 18%, var(--surface))}.key-ruler-column--current{background:var(--ink)}.key-ruler-signature,.key-ruler-key{padding:6px 4px;line-height:20px;display:block}.key-ruler-signature{color:var(--muted);font-family:var(--mono);font-size:10px}.key-ruler-key{color:var(--ink);text-decoration:none}.key-ruler-column--current .key-ruler-signature,.key-ruler-column--current .key-ruler-key{color:var(--surface)}.key-ruler-key--major{font-family:var(--display);font-size:17px;font-weight:700}.key-ruler-key--minor{border-top:1px solid var(--line);font-family:var(--sans);font-size:13px}.key-ruler--roomy .key-ruler-key--major{font-size:1.125rem}.key-ruler--roomy .key-ruler-signature,.key-ruler--roomy .key-ruler-key{padding-block:.5rem}