<figure class="cbq-aurora">
  <span class="cbq-aurora-blob" aria-hidden="true"></span>
  <div class="cbq-aurora-card">
    <blockquote><p>"Beauty in software is honesty rendered visible."</p></blockquote>
    <figcaption>— Lin Wei</figcaption>
  </div>
</figure>

.cbq-aurora {
  position: relative;
  max-width: 340px;
  padding: 28px;
  border-radius: 18px;
  background: #0d0d16;
  overflow: hidden;
  isolation: isolate;
  font-family: system-ui, sans-serif;
}

.cbq-aurora-blob {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(124, 108, 255, 0.55), transparent 70%),
    radial-gradient(40% 40% at 70% 60%, rgba(255, 108, 138, 0.45), transparent 70%),
    radial-gradient(35% 35% at 50% 80%, rgba(46, 184, 138, 0.4), transparent 70%);
  filter: blur(8px);
  animation: cbq-aurora-drift 14s linear infinite;
  z-index: 0;
}

.cbq-aurora-card {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 14px;
  background: rgba(13, 13, 22, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0eeff;
}

.cbq-aurora blockquote {
  margin: 0;
}

.cbq-aurora p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
}

.cbq-aurora figcaption {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(240, 238, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .cbq-aurora-blob {
    animation: none !important;
  }
}
@keyframes cbq-aurora-drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(4%, -4%) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}