:root {
  color-scheme: dark;
}
html, body {
  background: radial-gradient(
      1200px 600px at 80% -10%,
      rgba(168, 85, 247, 0.15),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at -10% 10%,
      rgba(168, 85, 247, 0.12),
      transparent 50%
    ),
    #0b0f0e;
}
.grid-bg:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px
    );
  background-size: 40px 40px;
  mask-image: radial-gradient(60% 60% at 50% 10%, black, transparent 75%);
  animation: pulse 12s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.35; }
}
.glass {
  backdrop-filter: blur(10px);
  background: linear-gradient(
    180deg,
    rgba(168, 85, 247, 0.06),
    rgba(168, 85, 247, 0.02)
  );
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}
.btn {
  transition: transform 0.08s ease;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.linkish {
  position: relative;
}
.linkish:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a855f7, transparent);
  opacity: 0.5;
  transition: opacity 0.2s;
}
.linkish:hover:after {
  opacity: 1;
}
pre {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* small tweak for mobile readability */
@media (max-width: 640px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.5rem; }
  .btn { width: 100%; text-align: center; }
}