*, *::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; }
.swatches {
  position: fixed; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.75rem;
}
.swatch {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c); border: 2px solid transparent;
  cursor: pointer; transition: transform 0.2s, border-color 0.2s;
}
.swatch:hover { transform: scale(1.15); }
.swatch.active { border-color: #fff; transform: scale(1.2); }