/* The header stays dark in both themes so the original logo remains legible. */
.alchemy-ui .al-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 2.75rem; padding: .25rem .125rem;
  border: 0; color: #fff; background: transparent;
  font: 500 .875rem/1.4 var(--al-font-body); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.alchemy-ui .al-theme-toggle:focus-visible { outline: 3px solid var(--al-brand-yellow); outline-offset: 3px; }
.alchemy-ui .al-theme-track { position: relative; width: 2.25rem; height: 1.25rem; border: 1px solid #bab6b4; border-radius: 1rem; background: #615d5b; }
.alchemy-ui .al-theme-track::after { content: ''; position: absolute; width: .875rem; height: .875rem; top: .125rem; left: .125rem; border-radius: 50%; background: white; transition: transform var(--al-motion); }
.alchemy-ui .al-theme-toggle[aria-checked="true"] .al-theme-track { background: #176f36; border-color: #60bb46; }
.alchemy-ui .al-theme-toggle[aria-checked="true"] .al-theme-track::after { transform: translateX(1rem); background: #ffe600; }
@media (max-width: 40rem) { .alchemy-ui .al-theme-toggle > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (forced-colors: active) { .alchemy-ui .al-theme-track { border-color: ButtonText; } .alchemy-ui .al-theme-track::after { background: ButtonText; } }