.theme-toggle {
  width: 44px;
  height: 44px;
  position: relative;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line, #e5e3e9);
  border-radius: 50%;
  color: var(--ink, #191820);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.theme-toggle svg {
  position: absolute;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 160ms ease, transform 240ms cubic-bezier(.23,1,.32,1);
}
.theme-moon { opacity: 0; transform: rotate(-70deg) scale(.7); }
.theme-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme='dark'] .theme-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme='dark'] .theme-sun { opacity: 0; transform: rotate(70deg) scale(.7); }
.theme-toggle:focus-visible { outline: 3px solid var(--purple, var(--lime, #675397)); outline-offset: 4px; }
.theme-toggle:active { transform: scale(.96); transition-duration: 100ms; }
[data-input='keyboard'] .theme-toggle svg { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { background: var(--surface, var(--surf, #f8f7fa)); }
}
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transform: none !important; transition: opacity 100ms ease; }
  .theme-toggle:active { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}