*, *::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; }
.controls {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1.5rem; align-items: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(10px);
  padding: 0.9rem 1.5rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}
label {
  color: #aaa; font-size: 0.78rem;
  display: flex; align-items: center; gap: 0.4rem;
}
input[type=color] { width: 32px; height: 24px; border: none; background: none; cursor: pointer; padding: 0; }
input[type=range] { accent-color: #fff; cursor: pointer; width: 80px; }