.sound-btn {
  position: fixed; top: 80px; right: var(--pad); z-index: 250;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(13,11,46,0.14);
  cursor: pointer; background: rgba(255,255,255,0.55); color: var(--ink-dim);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  transition: background 200ms, border-color 200ms, color 200ms, transform 200ms;
}
.sound-btn:hover { background: rgba(255,255,255,0.9); border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
.sound-btn.playing { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.72); }
.sound-btn .wave { position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; pointer-events: none; }
.sound-btn.playing .wave { animation: ripple 2s ease-out infinite; }
@keyframes ripple { 0%{transform:scale(1);opacity:0.5} 100%{transform:scale(1.8);opacity:0} }

#tweaks {
  position: fixed; left: 20px; bottom: 20px; z-index: 300; width: 260px; padding: 18px;
  background: rgba(245,244,255,0.9); backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(13,11,46,0.12), 0 1px 0 rgba(255,255,255,0.8) inset;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink); display: none;
}
#tweaks.on { display: block; }
#tweaks h3 { margin: 0 0 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-dim); }
#tweaks label { display: block; margin-top: 14px; text-transform: uppercase; font-size: 9px; letter-spacing: 0.15em; color: var(--ink-dim); margin-bottom: 6px; }
#tweaks .swatch { display: flex; gap: 6px; }
#tweaks .sw { flex: 1; height: 28px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: border 150ms; }
#tweaks .sw.active { border-color: var(--ink); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity: 1; transform: none; }