:root{
  --ring: rgba(6,182,212,.35);
}
html{ font-size: 16px; }
body{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; }

.qy-surface{
  background:
    radial-gradient(900px 500px at 12% 10%, rgba(79,70,229,.14), transparent 60%),
    radial-gradient(800px 480px at 86% 18%, rgba(6,182,212,.18), transparent 55%),
    radial-gradient(900px 520px at 70% 80%, rgba(251,113,133,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,247,237,1) 0%, rgba(246,248,255,1) 100%);
}

.qy-card{
  position: relative;
  isolation: isolate;
}
.qy-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 1.5rem;
  background: linear-gradient(90deg, rgba(6,182,212,.55), rgba(79,70,229,.55), rgba(251,113,133,.55));
  opacity:.55;
  z-index:-2;
}
.qy-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 1.5rem;
  background: rgba(255,255,255,.75);
  z-index:-1;
}
.qy-focus:focus{
  outline: none;
  box-shadow: 0 0 0 5px var(--ring);
}

.qy-badge{
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(15,26,46,.12);
}

.qy-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,26,46,.18), transparent);
}

.qy-dotgrid{
  background-image:
    radial-gradient(rgba(15,26,46,.10) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 0 0;
}

.qy-raise{
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease;
}
.qy-raise:hover{
  transform: translateY(-4px);
}

.qy-kicker{
  letter-spacing: .14em;
  text-transform: uppercase;
}