/* Adapted from the supplied Day-night-toggle-button (Naokuo modification).
   All illustration rules are scoped to this button; no global transitions. */
.r1 .sm-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 76px; width: 76px; min-height: 44px; padding: 0;
  border: 0; border-radius: 24px; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent; color: inherit;
}
.r1 .sm-theme-toggle[hidden] { display: none; }
.sm-theme-toggle .sm-mode-scene {
  position: relative; isolation: isolate; display: block; overflow: hidden;
  width: 72px; height: 30px; border-radius: 30px; background: #4685c0;
  box-shadow: inset 0 1px 3px #16344b4d;
  transition: background-color .5s ease;
}
.sm-theme-toggle .sm-mode-orb {
  position: absolute; left: 3px; top: 3px; z-index: 3; width: 24px; height: 24px;
  border-radius: 50%; background: #ffc323;
  box-shadow: 1px 1px 2px #10253840, inset -1px -2px 2px #b4772240, inset 1px 2px 1px #ffe650;
  transition: transform .55s cubic-bezier(.56,1.25,.52,1), background-color .4s;
}
.sm-theme-toggle .sm-mode-orb i {
  position: absolute; border-radius: 50%; background: #929eb4;
  box-shadow: inset 0 1px 1px #4e5d7040; opacity: 0; transition: opacity .3s;
}
.sm-theme-toggle .sm-mode-orb i:nth-child(1) { width: 6px; height: 6px; top: 4px; left: 11px; }
.sm-theme-toggle .sm-mode-orb i:nth-child(2) { width: 8px; height: 8px; top: 9px; left: 3px; }
.sm-theme-toggle .sm-mode-orb i:nth-child(3) { width: 5px; height: 5px; top: 15px; left: 14px; }
.sm-theme-toggle .sm-mode-glow {
  position: absolute; z-index: 0; border-radius: 50%; background: #ffffff1a;
  transition: transform .55s cubic-bezier(.56,1.25,.52,1);
}
.sm-theme-toggle .sm-mode-glow-1 { width: 46px; height: 46px; top: -8px; left: -8px; background: #ffffff24; }
.sm-theme-toggle .sm-mode-glow-2 { width: 60px; height: 60px; top: -15px; left: -9px; }
.sm-theme-toggle .sm-mode-glow-3 { width: 76px; height: 76px; top: -23px; left: -10px; background: #ffffff0d; }
.sm-theme-toggle .sm-mode-clouds {
  position: absolute; inset: 0; z-index: 2;
  transition: transform .55s cubic-bezier(.56,1.25,.52,1);
}
.sm-theme-toggle .sm-mode-clouds i { position: absolute; border-radius: 50%; background: #fff; }
.sm-theme-toggle .sm-mode-clouds i:nth-child(1) { width: 22px; height: 22px; right: -8px; bottom: 5px; }
.sm-theme-toggle .sm-mode-clouds i:nth-child(2) { width: 25px; height: 25px; right: -4px; bottom: -10px; }
.sm-theme-toggle .sm-mode-clouds i:nth-child(3) { width: 25px; height: 25px; right: 8px; bottom: -16px; }
.sm-theme-toggle .sm-mode-clouds i:nth-child(4) { width: 25px; height: 25px; right: 21px; bottom: -14px; }
.sm-theme-toggle .sm-mode-clouds i:nth-child(5) { width: 31px; height: 31px; right: 32px; bottom: -25px; }
.sm-theme-toggle .sm-mode-clouds i:nth-child(6) { width: 25px; height: 25px; right: 45px; bottom: -21px; }
.sm-theme-toggle .sm-mode-clouds-back { z-index: 1; opacity: .45; transform: translateY(-6px); }
.sm-theme-toggle .sm-mode-stars { position: absolute; inset: 0; transform: translateY(-32px); transition: transform .55s; }
.sm-theme-toggle .sm-mode-stars i {
  position: absolute; width: 5px; height: 5px; background: #fff;
  clip-path: polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%);
}
.sm-theme-toggle .sm-mode-stars i:nth-child(1) { top: 5px; left: 15px; }
.sm-theme-toggle .sm-mode-stars i:nth-child(2) { top: 17px; left: 35px; }
.sm-theme-toggle .sm-mode-stars i:nth-child(3) { top: 12px; left: 7px; width: 4px; height: 4px; }
.sm-theme-toggle .sm-mode-stars i:nth-child(4) { top: 17px; left: 26px; width: 4px; height: 4px; }
.sm-theme-toggle .sm-mode-stars i:nth-child(5) { top: 9px; left: 30px; width: 3px; height: 3px; }
.sm-theme-toggle .sm-mode-stars i:nth-child(6) { top: 23px; left: 16px; width: 3px; height: 3px; }
html[data-theme="dark"] .sm-theme-toggle .sm-mode-scene { background: #20283f; }
html[data-theme="dark"] .sm-theme-toggle .sm-mode-orb {
  transform: translateX(42px); background: #c7ceda;
  box-shadow: 1px 1px 2px #0005, inset -1px -2px 2px #69768c55, inset 1px 2px 1px #f4f2da;
}
html[data-theme="dark"] .sm-theme-toggle .sm-mode-orb i { opacity: 1; }
html[data-theme="dark"] .sm-theme-toggle .sm-mode-glow-1 { transform: translateX(42px); }
html[data-theme="dark"] .sm-theme-toggle .sm-mode-glow-2 { transform: translateX(31px); }
html[data-theme="dark"] .sm-theme-toggle .sm-mode-glow-3 { transform: translateX(20px); }
html[data-theme="dark"] .sm-theme-toggle .sm-mode-clouds { transform: translateY(34px); }
html[data-theme="dark"] .sm-theme-toggle .sm-mode-stars { transform: translateY(0); }
.r1 .sm-theme-toggle:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sm-theme-toggle .sm-mode-scene, .sm-theme-toggle .sm-mode-orb, .sm-theme-toggle .sm-mode-orb i,
  .sm-theme-toggle .sm-mode-glow, .sm-theme-toggle .sm-mode-clouds, .sm-theme-toggle .sm-mode-stars { transition: none; }
}