@layer components {
  /* Keyboard: the ⌘K palette over the workspace, and the ring on the screen J and K select. */
  .command-hint { display: none; height: 3.6rem; padding: 0 .6rem; border: 0; border-radius: var(--r-control); background: transparent; cursor: pointer; }
  .command-hint kbd { min-width: 3.4rem; font-family: var(--sans); font-size: 1.15rem; font-weight: 600; }
  .command-hint:hover kbd { border-color: var(--ink-3); color: var(--ink); }
  @media (hover: hover) and (pointer: fine) { .command-hint { display: inline-grid; place-items: center; } }
  .command-menu { width: min(62rem, calc(100vw - 3.2rem)); max-height: min(58rem, 76vh); margin: 12vh auto auto; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-section); background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px rgb(var(--shade) / .08), 0 24px 64px rgb(var(--shade) / .22); }
  .command-menu[open] { display: flex; flex-direction: column; }
  .command-menu::backdrop { background: rgb(var(--shade) / .24); }
  .command-search { display: flex; align-items: center; gap: 1rem; padding: 0 1.6rem; border-bottom: 1px solid var(--line); }
  .command-search > .icon { width: 1.7rem; height: 1.7rem; color: var(--ink-3); }
  .command-input { flex: 1; min-width: 0; height: 5.4rem; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.6rem; }
  .command-input::placeholder { color: var(--placeholder); }
  .command-input:focus-visible { outline: none; }
  .command-list { flex: 1; min-height: 0; padding: .6rem; overflow-y: auto; overscroll-behavior: contain; scroll-padding: .6rem; }
  .command-group + .command-group { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--line); }
  .command-heading { margin: 0; padding: .7rem 1rem .4rem; color: var(--ink-3); font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; }
  .command-row { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 3.8rem; padding: .6rem 1rem; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; font-size: 1.4rem; text-align: left; text-decoration: none; cursor: pointer; }
  .command-row .icon { width: 1.6rem; height: 1.6rem; }
  .command-row .icon:not(.kind-icon) { color: var(--ink-3); }
  .command-row kbd { margin-left: auto; }
  .command-row.is-active { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
  .command-row.is-active .icon:not(.kind-icon) { color: var(--ink); }
  .command-row:focus-visible { outline-offset: -2px; }
  .command-id { flex: none; font-family: var(--mono); font-size: 1.3rem; font-weight: 600; }
  .command-copy { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-3); font-size: 1.3rem; text-overflow: ellipsis; white-space: nowrap; }
  .command-copy.is-id { font-family: var(--mono); }
  .command-empty { margin: 0; padding: 2.8rem 1.6rem; color: var(--ink-3); text-align: center; }
  .command-keys { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem; margin: 0; padding: .8rem 1.6rem; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font-size: 1.2rem; }
  .command-keys span { display: inline-flex; align-items: center; gap: .4rem; }
  .command-keys kbd { min-width: 1.8rem; height: 1.8rem; font-size: 1rem; }
  .command-keys kbd:last-of-type { margin-right: .2rem; }
  .command-keys-aside { margin-left: auto; }
}