:root{
  --bg:#050814;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.6);
}

html,body{ height:100% }
body{
  margin:0;
  background: var(--bg);
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}

.word{
  font-size: clamp(44px, 7vw, 92px);
  letter-spacing: -0.03em;
  color: var(--text);
  text-shadow:
    0 8px 60px rgba(0,0,0,.55),
    0 0 18px rgba(255,255,255,.18);
  transform: translateZ(0);
}

.glow{
  position:absolute;
  width:min(620px, 80vw);
  height:min(260px, 38vh);
  border-radius: 999px;
  filter: blur(28px);
  background:
    radial-gradient(circle at 30% 30%, rgba(90,140,255,.32), transparent 60%),
    radial-gradient(circle at 70% 40%, rgba(210,80,255,.26), transparent 60%),
    radial-gradient(circle at 45% 70%, rgba(70,255,210,.14), transparent 62%);
  opacity:.85;
  animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{ transform: scale(1); opacity:.82 }
  50%{ transform: scale(1.05); opacity:.95 }
}

@media (prefers-reduced-motion: reduce){
  .glow{ animation:none }
}