Pinned Comment

<article class="nuda-pinned">
  <div class="nuda-pinned__tag">
    <svg class="nuda-pinned__pin" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M14 3l7 7-4 1-3 6-3-3-5 5 1-7-3-3 6-3 1-4z" fill="currentColor" />
    </svg>
    <span>Pinned by author</span>
  </div>
  <div class="nuda-pinned__row">
    <div class="nuda-pinned__avatar" aria-hidden="true">SM</div>
    <div>
      <div class="nuda-pinned__name">Sam Miyake</div>
      <p class="nuda-pinned__text">Quick note: v2 ships next Friday. Stay tuned.</p>
    </div>
  </div>
</article>

/* Pinned Comment
   Highlighted card with a wobbling pin icon and accent stripe.
   Customize: --pin-accent */

.nuda-pinned {
  --pin-accent: #e4ff54;
  position: relative;
  padding: 14px;
  background: linear-gradient(
    135deg,
    rgba(228, 255, 84, 0.08),
    rgba(228, 255, 84, 0.02)
  );
  border: 1px solid rgba(228, 255, 84, 0.35);
  border-radius: 12px;
  max-width: 420px;
  overflow: hidden;
}

.nuda-pinned::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pin-accent);
}

.nuda-pinned__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pin-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.nuda-pinned__pin {
  width: 12px;
  height: 12px;
  animation: nuda-pin-wobble 4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 50% 30%;
}

.nuda-pinned__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.nuda-pinned__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4ff54, #6ee7b7);
  color: #09090b;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.nuda-pinned__name {
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.nuda-pinned__text {
  color: #a0a0a8;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

@keyframes nuda-pin-wobble {
  0%, 90%, 100% { transform: rotate(0); }
  93% { transform: rotate(-15deg); }
  96% { transform: rotate(12deg); }
}

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