.site-switches {
  position: fixed !important;
  top: auto !important;
  bottom: 1.25rem !important;
  right: 1rem !important;
  left: auto !important;
  z-index: 999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.55rem !important;
  margin: 0 !important;
}

.switch-group {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.switch-btn {
  appearance: none;
  border: 0;
  margin: 0;
  min-width: 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.switch-btn:hover {
  color: var(--ink);
  transform: scale(1.06);
}

.switch-btn.is-active {
  background: var(--btn);
  color: var(--btn-ink);
}

.switch-btn[data-theme-set="light"] {
  background: #fff;
  color: #111;
  box-shadow: inset 0 0 0 1px var(--line);
}

.switch-btn[data-theme-set="dark"] {
  background: #1a1a1a;
  color: #f5f5f5;
}

.switch-btn[data-theme-set="sand"] {
  background: #e8d9bc;
  color: #3a301f;
}

.switch-btn[data-theme-set].is-active {
  outline: 2px solid var(--btn);
  outline-offset: 1px;
}