Quick Answer Row

<!-- Quick Answer Row — inline calculator / quick-answer result -->
<div class="nuda-cp2-quick-answer" role="dialog" aria-label="Command palette">
  <div class="nuda-cp2-quick-answer__row" role="option" aria-selected="true">
    <span class="nuda-cp2-quick-answer__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="4" y="3" width="16" height="18" rx="2" />
        <path d="M8 8 L16 8 M8 12 L16 12 M8 16 L12 16" />
      </svg>
    </span>
    <span class="nuda-cp2-quick-answer__expr">42 * 12</span>
    <span class="nuda-cp2-quick-answer__eq" aria-hidden="true">=</span>
    <span class="nuda-cp2-quick-answer__result">504</span>
    <button class="nuda-cp2-quick-answer__copy" type="button">Copy</button>
  </div>
</div>

.nuda-cp2-quick-answer {
  width: 300px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 4px;
  animation: nuda-cp2-quick-answer-in .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.6);
}

.nuda-cp2-quick-answer__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(228,255,84,.06);
}

.nuda-cp2-quick-answer__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #e4ff54;
}

.nuda-cp2-quick-answer__icon svg {
  width: 100%;
  height: 100%;
}

.nuda-cp2-quick-answer__expr {
  font: 500 12px ui-monospace,monospace;
  color: #cfcfcf;
}

.nuda-cp2-quick-answer__eq {
  font: 600 12px ui-sans-serif,system-ui;
  color: #777;
}

.nuda-cp2-quick-answer__result {
  font: 700 13px ui-monospace,monospace;
  color: #fafafa;
  animation: nuda-cp2-quick-answer-pop .4s cubic-bezier(.34,1.56,.64,1);
}

.nuda-cp2-quick-answer__copy {
  margin-left: auto;
  appearance: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 4px 8px;
  font: 600 10px ui-sans-serif,system-ui;
  color: #a1a1aa;
  cursor: pointer;
  transition: background .15s,color .15s;
  min-height: 22px;
}

.nuda-cp2-quick-answer__copy:hover {
  background: rgba(255,255,255,.1);
  color: #fafafa;
}

.nuda-cp2-quick-answer__copy:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

@keyframes nuda-cp2-quick-answer-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nuda-cp2-quick-answer-pop {
  0% {
    opacity: 0;
    transform: scale(.6);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cp2-quick-answer,.nuda-cp2-quick-answer__result {
    animation: none !important;
  }
}