.piano-diagram{flex-direction:column;align-items:center;display:flex}.piano-diagram__svg{width:100%;max-width:400px;height:auto}.piano-diagrams-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.piano-diagram-card{padding:var(--spacing-lg);background:var(--surface-1);border:1px solid var(--border-color);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);flex-direction:column;align-items:center;display:flex}.piano-key--white{fill:#fff;stroke:var(--border-color);stroke-width:1px;cursor:default}.piano-key--black{fill:#1a1a1a;stroke:#000;stroke-width:.5px;cursor:default}.piano-key--pressed{fill:var(--accent-primary)}.piano-key--root{fill:var(--accent-secondary);filter:brightness(1.2)}.piano-key__label{font-size:10px;font-weight:var(--font-weight-semibold);text-anchor:middle;pointer-events:none;-webkit-user-select:none;user-select:none}.piano-key__label--white{fill:var(--text-on-accent)}.piano-key__label--black{fill:#fff}.piano-diagram__inversion-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);fill:var(--text-secondary);text-anchor:middle}