/* One design unit = --dnt-unit. Geometry is extracted from Touchfish's ThemeSwitch. */
.dnt {
  --dnt-duration: 650ms;
  appearance: none;
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 76em;
  height: 44em;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 24em;
  background: transparent;
  color: inherit;
  font-size: var(--dnt-unit, 1px);
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dnt *, .dnt *::before, .dnt *::after { box-sizing: border-box; }
.dnt:focus-visible {
  outline: 2px solid var(--dnt-focus, #164caf);
  outline-offset: 3px;
}
.dnt[data-theme="dark"]:focus-visible { outline-color: var(--dnt-focus, #79baff); }
.dnt:disabled { opacity: .55; cursor: not-allowed; }
.dnt__scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76em;
  height: 42em;
  transform: translate(-50%, -50%);
  border: 1em solid var(--dnt-edge, #dce4df);
  border-radius: 24em;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: #258fde;
  box-shadow: inset 0 1em 3em rgb(8 25 45 / 24%), 0 1em 1em rgb(255 255 255 / 50%);
}
.dnt[data-theme="dark"] .dnt__scene { background: #141b32; border-color: var(--dnt-edge, #425046); }
.dnt__ball {
  position: absolute;
  z-index: 3;
  left: 6em;
  top: 5em;
  width: 30em;
  height: 30em;
  border-radius: 50%;
  background: #fff426;
  box-shadow: inset 0 1em 1em #ffffa4, 0 2em 3em rgb(19 50 83 / 16%);
  transform: translateX(0) rotate(0deg);
}
.dnt[data-theme="dark"] .dnt__ball {
  transform: translateX(32em) rotate(14deg);
  background: #e4e6e8;
  box-shadow: inset 0 1em 2em #fff, 0 1em 3em rgb(4 9 25 / 15%);
}
.dnt__ball i {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: #a4a6a8;
  box-shadow: inset 0 1em 1em rgb(45 49 59 / 13%);
}
.dnt__ball i:nth-child(1) { width: 9em; height: 9em; top: 5em; left: 15em; }
.dnt__ball i:nth-child(2) { width: 12em; height: 12em; top: 13em; left: 5em; }
.dnt__ball i:nth-child(3) { width: 4em; height: 4em; top: 23em; left: 21em; }
.dnt[data-theme="dark"] .dnt__ball i { opacity: 1; }
.dnt__halos { position: absolute; inset: 0; transform: translateX(0); }
.dnt__halos i {
  position: absolute;
  top: 50%;
  left: 21em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(225 242 255 / 15%);
}
.dnt__halos i:nth-child(1) { width: 92em; height: 92em; }
.dnt__halos i:nth-child(2) { width: 74em; height: 74em; }
.dnt__halos i:nth-child(3) { width: 55em; height: 55em; }
.dnt[data-theme="dark"] .dnt__halos { transform: translateX(32em); }
.dnt[data-theme="dark"] .dnt__halos i { background: rgb(224 234 255 / 10%); }
.dnt__cloud {
  position: absolute;
  z-index: 2;
  right: -3em;
  bottom: -11em;
  width: 67em;
  height: 24em;
  border-radius: 50%;
  background: #f2f4f5;
  transform: translateY(0);
}
.dnt__cloud i { position: absolute; background: inherit; border-radius: 50%; }
.dnt__cloud i:nth-child(1) { width: 29em; height: 29em; right: -6em; bottom: 15em; }
.dnt__cloud i:nth-child(2) { width: 26em; height: 20em; right: 10em; bottom: 10em; }
.dnt__cloud i:nth-child(3) { width: 25em; height: 18em; right: 26em; bottom: 5em; }
.dnt__cloud i:nth-child(4) { width: 25em; height: 14em; right: 44em; bottom: 1em; }
.dnt__cloud--back { background: #cbd9e6; bottom: -8em; right: 0; transform: translateY(-2em); }
.dnt[data-theme="dark"] .dnt__cloud--front { transform: translateY(43em); }
.dnt[data-theme="dark"] .dnt__cloud--back { transform: translateY(38em); }
.dnt__stars { position: absolute; inset: 0; z-index: 2; opacity: 0; transform: translateY(-23em); }
.dnt[data-theme="dark"] .dnt__stars { opacity: 1; transform: translateY(0); }
.dnt__stars i {
  position: absolute;
  background: #f6f8fe;
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 63% 61%, 50% 100%, 37% 63%, 0 50%, 37% 36%);
}
.dnt__stars i:nth-child(1) { left: 10em; top: 11em; width: 9em; height: 10em; }
.dnt__stars i:nth-child(2) { left: 25em; top: 5em; width: 12em; height: 13em; }
.dnt__stars i:nth-child(3) { left: 22em; top: 29em; width: 7em; height: 8em; }
.dnt__stars i:nth-child(4) { left: 5em; top: 24em; width: 5em; height: 5em; }
.dnt__stars i:nth-child(5) { left: 34em; top: 22em; width: 4em; height: 4em; }
.dnt__stars i:nth-child(6) { left: 16em; top: 4em; width: 3em; height: 3em; }
.dnt__contrast { display: none; }
.dnt[data-ready="true"] .dnt__scene { transition: background 550ms ease; }
.dnt[data-ready="true"] .dnt__ball {
  transition: transform var(--dnt-duration) cubic-bezier(.165,.84,.44,1), background 450ms ease, box-shadow 450ms ease;
}
.dnt[data-ready="true"] .dnt__ball i { transition: opacity 300ms ease 120ms; }
.dnt[data-ready="true"] .dnt__halos { transition: transform var(--dnt-duration) cubic-bezier(.22,1,.36,1); }
.dnt[data-ready="true"] .dnt__cloud { transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.dnt[data-ready="true"] .dnt__stars {
  transition: transform var(--dnt-duration) cubic-bezier(.22,1,.36,1), opacity 300ms ease 80ms;
}
@media (prefers-reduced-motion: reduce) {
  .dnt[data-ready="true"] *, .dnt[data-ready="true"] *::before, .dnt[data-ready="true"] *::after {
    transition: none !important;
    animation: none !important;
  }
}
@media (forced-colors: active) {
  .dnt__scene { border: 2px solid ButtonText; background: Canvas; box-shadow: none; }
  .dnt__scene > :not(.dnt__contrast) { display: none; }
  .dnt__contrast { display: grid; place-items: center; height: 100%; color: ButtonText; font: bold 14px system-ui; }
  .dnt__contrast::after { content: "OFF"; }
  .dnt[data-theme="dark"] .dnt__contrast::after { content: "ON"; }
}