.piano-keyboard-shell,.piano-keyboard{margin:0;position:relative}.piano-octave-indicator{height:var(--octave-indicator-height,3px);background:var(--accent);pointer-events:none;border-radius:999px;position:absolute;bottom:-.35rem;left:0}.piano-key{background:linear-gradient(180deg, var(--key-white-top) 0%, var(--key-white-mid) 88%, var(--key-white-bottom) 100%);border:none;border-right:1px solid var(--key-white-border);border-radius:0 0 var(--piano-key-radius,4px) var(--piano-key-radius,4px);cursor:pointer;padding:0;position:absolute;top:0}.piano-key.black{background:linear-gradient(180deg, var(--key-black-top) 0%, var(--key-black) 100%);box-shadow:0 3px 5px var(--shadow-raised);border:none}.piano-key.pressed{background:var(--accent)}.piano-key.black.pressed{background:var(--accent-2)}.piano-key.chord-preview{background:var(--key-preview)}.piano-key.black.chord-preview{background:var(--key-preview-dark)}.piano-key.played{background:var(--key-played)}.piano-key.black.played{background:var(--key-played-dark)}.piano-key:disabled{cursor:default;opacity:1}.piano-key-label{color:var(--key-label);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:.65rem;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.piano-keyboard-fullbleed{width:100vw;position:relative;left:50%;transform:translate(-50%)}.piano-felt{background-image:linear-gradient(180deg, var(--accent-deep-hover), var(--accent-deep));height:9px;box-shadow:inset 0 -2px 4px var(--shadow-inset)}