:root {
  --rf-theme-p: 0;
  --rf-theme-q: 1;
  --rf-theme-thumb-x: 0px;
  --rf-theme-ring-x: 0px;
  --rf-theme-cloud-x: 0px;
  --rf-theme-cloud-y: 0px;
  --rf-theme-star-x: 28px;
}

.rf-theme-toggle {
  --rf-switch-w: 118px;
  --rf-switch-h: 47.2px;
  --rf-thumb-size: calc(var(--rf-switch-h) * .78);
  --rf-thumb-gap: calc(var(--rf-switch-h) * .11);
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--rf-switch-w);
  height: var(--rf-switch-h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  vertical-align: middle;
  justify-self: center;
  align-self: center;
  -webkit-tap-highlight-color: transparent;
}

.rf-theme-toggle:focus-visible {
  outline: 3px solid rgba(91, 155, 255, .72);
  outline-offset: 4px;
}

.rf-theme-toggle[aria-busy="true"] { cursor: progress; }

.rf-theme-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
  background: #357cbb;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .16),
    inset 0 13px 17px rgba(255, 255, 255, .16),
    inset 0 -13px 18px rgba(0, 0, 0, .34),
    inset 8px 0 13px rgba(8, 20, 42, .14),
    inset -8px 0 9px rgba(255, 255, 255, .06),
    inset 0 -2px 0 rgba(225, 233, 244, .16);
}

.rf-theme-shell::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 19;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .12);
}

.rf-theme-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(221, 231, 244, .32),
    inset 0 0 0 3px rgba(20, 43, 80, .26),
    inset 0 0 14px 4px rgba(4, 17, 39, .22);
}

.rf-theme-sky { position: absolute; inset: 0; border-radius: inherit; }
.rf-theme-day-sky {
  z-index: 0;
  opacity: var(--rf-theme-q);
  background: linear-gradient(90deg, #4da0d7 0%, #4495cf 47%, #2f82bf 72%, #2473b5 100%);
}
.rf-theme-night-sky {
  z-index: 1;
  opacity: var(--rf-theme-p);
  background: linear-gradient(90deg, #07152f 0%, #12213b 46%, #333946 100%);
}

.rf-theme-rings {
  position: absolute;
  left: var(--rf-thumb-gap);
  top: 50%;
  z-index: 3;
  width: var(--rf-thumb-size);
  height: var(--rf-thumb-size);
  transform: translate3d(var(--rf-theme-ring-x), -50%, 0);
  pointer-events: none;
}
.rf-theme-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .11); mix-blend-mode: screen; }
.rf-theme-ring.one { width: 150%; height: 150%; opacity: .82; }
.rf-theme-ring.two { width: 205%; height: 205%; opacity: .62; }
.rf-theme-ring.three { width: 260%; height: 260%; opacity: .38; }
.rf-theme-night-tint { position: absolute; inset: -12%; opacity: calc(var(--rf-theme-p) * .55); border-radius: 50%; background: radial-gradient(circle, rgba(18, 24, 42, .34), rgba(18, 24, 42, .26) 58%, rgba(18, 24, 42, .1) 78%, transparent); mix-blend-mode: multiply; filter: blur(1px); }

.rf-theme-clouds,
.rf-theme-stars { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; }
.rf-theme-clouds { left: -7%; width: 118%; opacity: var(--rf-theme-q); transform: translate3d(var(--rf-theme-cloud-x), var(--rf-theme-cloud-y), 0); filter: drop-shadow(0 4px 2px rgba(62, 104, 143, .11)); }
.rf-theme-stars { opacity: var(--rf-theme-p); transform: translate3d(var(--rf-theme-star-x), 0, 0); }

.rf-theme-thumb {
  position: absolute;
  left: var(--rf-thumb-gap);
  top: 50%;
  z-index: 12;
  width: var(--rf-thumb-size);
  height: var(--rf-thumb-size);
  border-radius: 50%;
  transform: translate3d(var(--rf-theme-thumb-x), -50%, 0);
  filter: drop-shadow(3px 5px 4px rgba(0, 0, 0, .38));
}
.rf-theme-disc { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; box-shadow: inset 5px -7px 5px rgba(0, 0, 0, .25), inset -3px 4px 4px rgba(255, 255, 255, .18), 0 0 0 1px rgba(255, 255, 255, .22); }
.rf-theme-sun { opacity: var(--rf-theme-q); background: #ffc01a; }
.rf-theme-moon { opacity: var(--rf-theme-p); background: #e2e8ef; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset -6px -3px 0 rgba(160, 170, 185, .18); }
.rf-theme-crater { position: absolute; border-radius: 50%; background: #aeb8c6; box-shadow: inset 2px 2px 3px rgba(89, 102, 119, .2); }
.rf-theme-crater.a { width: 20%; height: 20%; left: 44%; top: 14%; }
.rf-theme-crater.b { width: 34%; height: 34%; left: 20%; top: 45%; }
.rf-theme-crater.c { width: 22%; height: 22%; left: 66%; top: 59%; }
.rf-theme-shine { position: absolute; left: 8%; right: 8%; top: 7%; z-index: 16; height: 18%; border-radius: 999px; opacity: .34; background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .12) 55%, transparent); filter: blur(1.7px); pointer-events: none; }

html.rf-theme-animating body,
html.rf-theme-animating body *:not(.rf-theme-toggle):not(.rf-theme-toggle *) {
  transition-property: color, background-color, border-color, box-shadow, fill, stroke;
  transition-duration: var(--rf-theme-duration, 800ms);
  transition-timing-function: cubic-bezier(.45, 0, .55, 1);
}

@media (max-width: 760px) {
  .rf-theme-toggle { --rf-switch-w: 100px; --rf-switch-h: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html.rf-theme-animating body,
  html.rf-theme-animating body * { transition-duration: 0ms !important; }
}