No Results

<!-- Empty state when no commands match the query -->
<div class="nuda-cmdkno">
  <div class="nuda-cmdkno__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="7" />
      <path d="M21 21 L16 16" />
      <path d="M9 11 L13 11" opacity="0.4" />
    </svg>
  </div>
  <p class="nuda-cmdkno__title">No commands found</p>
  <p class="nuda-cmdkno__hint">Try <kbd>?</kbd> for help</p>
</div>

/* No Results
   Tilting magnifying glass + helper hint for empty palette state.
   Customize: container width, --no-color */

.nuda-cmdkno {
  --no-color: #63636e;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 16px;
  width: 100%;
  max-width: 320px;
}

.nuda-cmdkno__icon {
  width: 36px;
  height: 36px;
  color: var(--no-color);
  animation: nuda-cmdkno-tilt 3s ease-in-out infinite;
}

.nuda-cmdkno__icon svg { width: 100%; height: 100%; }

.nuda-cmdkno__title {
  font: 600 0.875rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  margin: 6px 0 0;
}

.nuda-cmdkno__hint {
  font: 500 0.7rem ui-sans-serif, system-ui, sans-serif;
  color: var(--no-color);
  margin: 0;
}

.nuda-cmdkno__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font: 700 0.65rem ui-monospace, monospace;
  color: #a1a1aa;
}

@keyframes nuda-cmdkno-tilt {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-cmdkno__icon { animation: none; }
}