.piano-keys{width:100%;max-width:420px;height:auto;display:block}.piano-key{stroke:var(--ui-night)}.piano-key--white{fill:var(--ui-on-night)}.piano-key--black{fill:var(--ui-night)}.piano-key--white.piano-key--lit{fill:color-mix(in srgb, var(--highlight) 45%, var(--ui-on-night))}.piano-key--black.piano-key--lit{fill:color-mix(in srgb, var(--highlight) 45%, var(--ui-night))}.piano-key.piano-key--root{fill:var(--highlight)}.piano-key-name{fill:var(--ui-night);font-family:var(--mono);text-anchor:middle;font-size:8px;font-weight:600}.piano-key--black+.piano-key-name{fill:var(--ui-on-night)}.piano-key--root+.piano-key-name{fill:var(--ui-on-highlight)}