*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0a0a0a; overflow: hidden; font-family: monospace; }
nav { position: fixed; top: 0; left: 0; z-index: 10; padding: 1rem 1.5rem; }
nav a { color: #aaa; text-decoration: none; font-size: 0.85rem; }
nav a:hover { color: #fff; }
canvas { display: block; width: 100vw; height: 100vh; }
.effects {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.5rem;
}
.effects button {
  padding: 0.4rem 0.9rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #555; border-radius: 6px; cursor: pointer;
  font-family: monospace; font-size: 0.78rem;
  transition: all 0.2s;
}
.effects button.active {
  color: #fff;
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
}