:root {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.25), transparent 35%),
    radial-gradient(circle at right center, rgba(59, 130, 246, 0.22), transparent 28%),
    linear-gradient(135deg, #020617 0%, #0f172a 48%, #111827 100%);
}

.ambient {
  position: absolute;
  inset: auto;
  width: 28rem;
  height: 28rem;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}

.ambient-left {
  top: -7rem;
  left: -8rem;
  background: rgba(34, 211, 238, 0.35);
}

.ambient-right {
  right: -7rem;
  bottom: -8rem;
  background: rgba(99, 102, 241, 0.28);
}

.question-card {
  animation: fadeUp 220ms ease-out;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.option-input:checked + .option-box {
  border-color: rgba(34, 211, 238, 0.7);
  background: rgba(34, 211, 238, 0.12);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.22);
}

.option-box {
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.option-box:hover {
  transform: translateY(-1px);
}