@layer components {
  .shortcuts { padding: var(--space-3); }

  .shortcuts__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .shortcuts__title { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }

  .shortcuts__list { margin: 0; display: flex; flex-direction: column; }

  .shortcuts__row {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space) 0;
    border-top: 1px solid var(--line);
  }

  .shortcuts__row:first-child { border-top: 0; }

  .shortcuts__keys { display: flex; align-items: baseline; gap: var(--space); flex-wrap: wrap; }

  .shortcuts__key {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 0.125rem var(--space);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    color: var(--ink);
    white-space: nowrap;
  }

  .shortcuts__or { font-size: var(--text-xs); color: var(--ink-faint); }
  .shortcuts__meaning { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }
}