#ambient-controls[hidden] { display: none; }
#ambient-controls {
  position: fixed; inset: 16px 24px auto; z-index: 30;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none; gap: 16px;
  font-family: 'Inter', sans-serif;
}
#ambient-controls button {
  min-height: 44px; border: 0; font: inherit; font-size: 12px;
  font-weight: 500; color: #eae4d6; cursor: pointer;
  touch-action: manipulation; pointer-events: auto;
}
.ambient-modes {
  display: flex; padding: 3px; border-radius: 8px;
  background: rgba(8, 8, 10, 0.9); pointer-events: auto;
  border: 1px solid rgba(234, 228, 214, 0.2);
}
#ambient-controls [data-light] { width: 92px; border-radius: 5px; background: transparent; }
#ambient-controls [aria-pressed="true"] { color: #111112; background: #eae4d6; }
#ambient-controls button:hover { box-shadow: inset 0 0 0 1px rgba(234, 228, 214, 0.45); }
#ambient-controls button:focus-visible { outline: 2px solid #eae4d6; outline-offset: 3px; }
#ambient-controls .ambient-close {
  position: absolute; right: 0; padding: 0 14px;
  border-radius: 8px; background: rgba(8, 8, 10, 0.9);
  border: 1px solid rgba(234, 228, 214, 0.2);
}
.ambient-close span { margin-left: 10px; font-size: 18px; }
@media (max-width: 600px) {
  #ambient-controls { inset: auto 12px 12px; }
  #ambient-controls [data-light] { width: 88px; }
  #ambient-controls .ambient-close { position: fixed; top: 12px; right: 12px; }
}