.key-why-compare{gap:.5rem;padding-block-end:.25rem;display:grid;overflow-x:auto}.key-why-row{grid-template-columns:6.5rem auto;align-items:center;gap:.75rem;inline-size:max-content;display:grid}.key-why-name{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ui-muted,var(--muted));font-size:.6875rem}.key-why-notes{gap:.375rem;margin:0;padding:0;list-style:none;display:flex}.key-why-note{box-sizing:border-box;border:1px solid var(--line);background:var(--surface);block-size:2.75rem;inline-size:2.75rem;font-family:var(--sans);color:var(--ui-ink,var(--ink));border-radius:8px;place-items:center;font-size:1.0625rem;font-weight:700;display:grid}.key-why-note--root{border-color:var(--ink);background:var(--ink);color:var(--surface)}.key-why-note--changed{border-color:var(--warn);background:var(--warn);color:var(--ground)}.key-why-note--replaced{color:var(--warn);text-decoration:line-through;text-decoration-thickness:2px}@media (max-width:30rem){.key-why-row{grid-template-columns:auto;gap:.375rem}}.key-why-note--now{border-color:var(--highlight);background:var(--highlight);color:var(--ui-on-highlight)}.mode-note--colour,.penta-note--blue{border-color:var(--warn);background:var(--warn);color:var(--ground)}.penta-note--gap{block-size:2.75rem;inline-size:2.75rem}@media (max-width:30rem){.note-comparison--compact .key-why-notes{gap:.25rem}.note-comparison--compact .key-why-note,.note-comparison--compact .penta-note--gap{block-size:2.25rem;inline-size:2rem;font-size:.9375rem}}.note-comparison--fluid .key-why-row{inline-size:auto}.note-comparison--fluid .key-why-note{aspect-ratio:1;flex:1 1 0;block-size:auto;inline-size:auto;min-inline-size:0;max-inline-size:2.75rem}