:root {
  --bg-0: #0a0612;
  --bg-1: #150a24;
  --accent-teal: #2dd4bf;
  --accent-fuchsia: #e879f9;
  --accent-blue: #60a5fa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(96,165,250,0.18), transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 10%, rgba(232,121,249,0.16), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(45,212,191,0.14), transparent 60%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1));
  background-attachment: fixed;
  min-height: 100vh;
  color: #fff;
}

.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

.gradient-text {
  background: linear-gradient(100deg, var(--accent-blue), var(--accent-teal) 45%, var(--accent-fuchsia));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% auto;
  animation: shimmer-text 6s linear infinite;
}
@keyframes shimmer-text {
  to { background-position: 200% center; }
}

.transmute-btn {
  background: linear-gradient(100deg, var(--accent-blue), var(--accent-teal), var(--accent-fuchsia));
  background-size: 200% auto;
  color: #08040f;
  box-shadow: 0 6px 30px rgba(45,212,191,0.25);
  animation: shimmer-text 5s linear infinite;
  border: none;
  cursor: pointer;
}

.btn-secondary {
  font-size: 0.8rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.6rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.font-mono, textarea, input[type="range"] { font-family: 'JetBrains Mono', monospace; }
textarea { font-family: 'Bricolage Grotesque', sans-serif; }

.pulse-badge { animation: pulse-glow 2.5s ease-in-out infinite; }
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(45,212,191,0.0); opacity: 0.85; }
  50% { box-shadow: 0 0 16px 2px rgba(45,212,191,0.25); opacity: 1; }
}

.shimmer {
  background-size: 200% 100%;
  animation: slide 1.4s linear infinite;
}
@keyframes slide {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.cauldron { filter: drop-shadow(0 0 20px rgba(45,212,191,0.5)); }

.fade-in { animation: fade 0.5s ease; }
@keyframes fade { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

.header-in { animation: drop 0.7s cubic-bezier(.2,.8,.2,1); }
@keyframes drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }

.toast-in { animation: toast 0.3s cubic-bezier(.2,.9,.3,1); }
@keyframes toast { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.carousel::-webkit-scrollbar-track { background: transparent; }

input[type="range"] {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-teal);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(45,212,191,0.6);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--accent-teal);
  cursor: pointer;
}