.key-pattern{justify-items:start;gap:.875rem;display:grid}.key-pattern+.key-pattern{margin-block-start:1.75rem}.key-pattern-text{color:var(--ui-muted);margin:0;font-size:1rem;line-height:1.6}.key-pattern-text strong{color:var(--ui-ink);font-weight:700}.key-anchor-shapes,.key-top-places{flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.key-anchor-shape{border:1px solid var(--line);background:var(--ground2);border-radius:10px;justify-items:center;gap:.25rem;inline-size:4.75rem;padding:.5rem .375rem .625rem;display:grid}.key-anchor-shape svg{block-size:auto;inline-size:100%}.key-anchor-name{font-family:var(--display);color:var(--ui-ink);font-size:.9375rem;font-weight:700}.key-top-places{grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));inline-size:100%;display:grid}.key-top-place{border:1px solid var(--line);background:var(--ground2);border-radius:10px;gap:.125rem;padding:.625rem .75rem;display:grid}.key-top-place strong{font-family:var(--display);color:var(--ui-ink);font-size:.9375rem;font-weight:700}.key-top-place span{color:var(--ui-muted);font-size:.8125rem}.key-progressions{border-block-start:1px solid var(--line);margin:0;padding:0;list-style:none}.key-progression{border-block-end:1px solid var(--line);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.25rem 1rem;padding-block:.875rem;display:grid}.key-progression:last-child{border-block-end:0}.key-progression .play-button--round{grid-row:1/span 2}.key-progression-name{color:var(--ui-ink);grid-column:2;align-self:end;font-size:1rem;font-weight:600}.key-progression .ui-chips{display:contents}.key-progression .ui-label{grid-column:2;align-self:start;min-inline-size:0}.key-progression .ui-chips__list{grid-area:1/3/span 2;justify-content:flex-end;gap:.375rem}@media (max-width:40rem){.key-progression .ui-chips__list{grid-area:3/2/auto/-1;justify-content:flex-start;margin-block-start:.5rem}}.key-why-sentence,.key-harmonic-sentence{color:var(--ui-muted);margin:1rem 0 0;font-size:1rem;line-height:1.6}.key-harmonic-sentence{margin:0}.key-piano{margin-block-start:1.25rem;overflow-x:auto}.key-piano .piano-keys{min-inline-size:20rem}