.piano-keyboard-shell{margin:1rem 0;position:relative}.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:var(--white);border: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:var(--key-black);border-color:var(--black)}.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%)}
.circle-of-fifths-container{flex-direction:column;align-items:center;gap:.5rem;display:flex}.circle-of-fifths{display:block}.circle-of-fifths-wedge-group{cursor:pointer}.circle-of-fifths-wedge{fill:var(--bg-alt);stroke:var(--border);stroke-width:var(--wedge-stroke-width,1)}.circle-of-fifths-wedge.selected{fill:var(--accent)}.circle-of-fifths-wedge-group text{fill:var(--text);pointer-events:none;font-size:.8rem}.circle-of-fifths-wedge.selected+text{fill:var(--text-on-accent)}.circle-of-fifths-all{fill:var(--bg-alt);stroke:var(--border);stroke-width:var(--wedge-stroke-width,1)}.circle-of-fifths-all.selected{fill:var(--accent)}.circle-of-fifths-all-group text{fill:var(--text);pointer-events:none;font-size:.7rem;font-weight:600}.circle-of-fifths-all.selected+text{fill:var(--text-on-accent)}.circle-of-fifths-prefer{align-items:center;gap:.5rem;display:flex}.circle-of-fifths-prefer-label{color:var(--text-dim);font-size:.8rem}.circle-of-fifths-prefer-segments{gap:.25rem;display:flex}.circle-of-fifths-prefer-segment{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:6px;padding:.3rem .7rem;font-size:.8rem;font-weight:600}.circle-of-fifths-prefer-segment.active{background:var(--bg-alt);border-color:var(--accent);color:var(--text)}