/* Cinematic-switch adaptation: native CSS, gold thumb and grape track.
   Scope is limited to the control. Host light/dark skins are separate. */
button.andre-theme-switch[data-andre-theme-switch] {
  --andre-switch-grape: #341539;
  --andre-switch-gold: #c8a15a;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 78px;
  min-width: 78px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 4px;
  overflow: hidden;
  border: 2px solid var(--andre-switch-grape);
  border-radius: 999px;
  background: var(--andre-switch-grape);
  color: #f2d9a9;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .18), inset 0 -2px 5px rgb(17 14 19 / .28), 0 3px 8px rgb(52 21 57 / .12);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  vertical-align: middle;
  isolation: isolate;
}
button.andre-theme-switch[data-andre-theme-switch]:focus-visible {
  outline: 3px solid var(--andre-switch-gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--andre-switch-grape);
}
button.andre-theme-switch[data-andre-theme-switch]:hover {
  background: var(--andre-switch-grape);
  color: #f2d9a9;
  border-color: var(--andre-switch-grape);
}
button.andre-theme-switch[data-andre-theme-switch]:disabled { cursor: default; opacity: 1; }
.andre-theme-switch > span { box-sizing: border-box; pointer-events: none; }
.andre-theme-switch__track-icons {
  position: absolute;
  inset: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.andre-theme-switch__sun,
.andre-theme-switch__moon {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: inherit;
}
.andre-theme-switch__sun::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.andre-theme-switch__sun::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 -8px currentColor, 0 8px currentColor, -8px 0 currentColor, 8px 0 currentColor, -6px -6px currentColor, 6px -6px currentColor, -6px 6px currentColor, 6px 6px currentColor;
}
.andre-theme-switch__moon::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  top: 1px;
  left: 1px;
  border-radius: 50%;
  box-shadow: 4px 3px 0 0 currentColor;
}
.andre-theme-switch__thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid #e8c88e;
  border-radius: 50%;
  color: var(--andre-switch-grape);
  background: linear-gradient(145deg, #eed5a5, var(--andre-switch-gold) 65%, #b28a42);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), inset 0 -1px 2px rgb(91 57 20 / .22), 0 2px 5px rgb(17 14 19 / .35);
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
  z-index: 1;
}
.andre-theme-switch__thumb > .andre-theme-switch__moon { display: none; }
.andre-theme-switch[aria-checked='true'] .andre-theme-switch__thumb { transform: translateX(34px); }
.andre-theme-switch[aria-checked='true'] .andre-theme-switch__thumb > .andre-theme-switch__sun { display: none; }
.andre-theme-switch[aria-checked='true'] .andre-theme-switch__thumb > .andre-theme-switch__moon { display: block; }
@media (prefers-reduced-motion: reduce) {
  .andre-theme-switch, .andre-theme-switch * { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .andre-theme-switch { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
  .andre-theme-switch__thumb { background: Highlight; color: HighlightText; border-color: HighlightText; box-shadow: none; }
  .andre-theme-switch:focus-visible { outline-color: Highlight; box-shadow: none; }
}