Quote Reply

<article class="nuda-quote-reply">
  <blockquote class="nuda-quote-reply__quote">
    <svg class="nuda-quote-reply__mark" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M7 7h4v4H8c0 2 1 3 3 3v3c-3 0-5-2-5-5V7zm8 0h4v4h-3c0 2 1 3 3 3v3c-3 0-5-2-5-5V7z"
        fill="currentColor" />
    </svg>
    <span class="nuda-quote-reply__name">Priya Iyer</span>
    <p class="nuda-quote-reply__text">Hot take: animations don't need JS frameworks.</p>
  </blockquote>
  <p class="nuda-quote-reply__reply">
    Fully agree — CSS keyframes carry 90% of what people actually ship.
  </p>
</article>

/* Quote Reply
   Reply that excerpts an original comment in a quoted block.
   Hover swaps the accent to lime. */

.nuda-quote-reply {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #0c0c10;
  border: 1px solid #1c1c22;
  border-radius: 12px;
  max-width: 440px;
}

.nuda-quote-reply__quote {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 32px;
  background: #111114;
  border-left: 2px solid #62b6ff;
  border-radius: 0 8px 8px 0;
  transition: border-color 0.3s, background 0.3s;
}

.nuda-quote-reply:hover .nuda-quote-reply__quote {
  border-color: #e4ff54;
  background: #13131a;
}

.nuda-quote-reply__mark {
  position: absolute;
  left: 8px;
  top: 10px;
  width: 16px;
  height: 16px;
  color: #62b6ff;
  opacity: 0.7;
  transition: color 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nuda-quote-reply:hover .nuda-quote-reply__mark {
  color: #e4ff54;
  transform: scale(1.1) rotate(-6deg);
}

.nuda-quote-reply__name {
  display: block;
  color: #a0a0a8;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.nuda-quote-reply__text {
  color: #a0a0a8;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

.nuda-quote-reply__reply {
  color: #fafafa;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-quote-reply__quote,
  .nuda-quote-reply__mark { transition: none; }
  .nuda-quote-reply:hover .nuda-quote-reply__mark { transform: none; }
}