body {
    margin: 0;
    height: 100vh;
    background: radial-gradient(circle at center, #0a0a0a 0%, #000000 70%);
    overflow: hidden;
    font-family: Arial, sans-serif;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
  }

  .word {
    position: absolute;
    color: rgba(255,255,255,0.9);
    font-weight: bold;
    white-space: nowrap;
    user-select: none;
    animation: float 6s ease-in-out infinite, flicker 3s infinite;
    will-change: transform, opacity;
  }

  .inner {
    display: inline-block;
    transform: rotate(var(--rot));
    text-shadow: 0 0 8px rgba(255,255,255,0.15),
                 0 0 20px rgba(255,255,255,0.05);
  }

  @keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-1vh); }
    100% { transform: translateY(0px); }
  }

  @keyframes flicker {
    0%,100% { opacity: 0.9; }
    50% { opacity: 1; }
  }

  .audio {
    position: fixed;
    bottom: 8px;
    left: 8px;
    width: 140px;
    height: 28px;
    opacity: 0;              
    transform: scale(0.7);
    transform-origin: bottom left;
    z-index: 9999;
  }

  .audio:hover {
    opacity: 0.6;    
  }

.floating-text {
  position: fixed;
  color: white;
  opacity: 0.05;
  pointer-events: none;
  font-family: sans-serif;
  animation: fadeOut 3s forwards;
  white-space: nowrap;
}

@keyframes fadeOut {
  0%   { opacity: 0.05; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(-40px); }
}