.tgl-ios {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-ios input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-ios-track {
  position: relative;
  display: block;
  width: 3.2em;
  height: 1.95em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 13%, transparent);
  transition: background-color 0.25s ease;
}
.tgl-ios-track::before {
  content: "";
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 1.7em;
  height: 1.7em;
  border-radius: 0.85em;
  background: #fff;
  box-shadow: 0 0.15em 0.4em rgb(0 0 0 / 0.18), 0 0.05em 0.08em rgb(0 0 0 / 0.1);
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1), width 0.3s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.tgl-ios input:checked + .tgl-ios-track { background: var(--c); }
.tgl-ios input:checked + .tgl-ios-track::before { transform: translateX(1.25em); }
/* pressed: the knob stretches, anchored on the side it rests on */
.tgl-ios:active .tgl-ios-track::before { width: 2.1em; }
.tgl-ios:active input:checked + .tgl-ios-track::before { transform: translateX(0.85em); }
.tgl-ios input:focus-visible + .tgl-ios-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-material-3 {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-material-3 input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-material-3-track {
  position: relative;
  display: block;
  width: 3.25em;
  height: 2em;
  border: 0.125em solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 8%, transparent);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* a 40dp box centered on the handle: it carries the hover state layer */
.tgl-material-3-handle {
  position: absolute;
  top: -0.375em;
  left: -0.375em;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s ease;
}
/* the handle itself: 16dp off, 24dp on, 28dp pressed, all one scale */
.tgl-material-3-handle::before {
  content: "";
  position: absolute;
  inset: 0.375em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 55%, transparent);
  transform: scale(0.571);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), background-color 0.25s ease;
}
.tgl-material-3-handle svg {
  position: relative;
  width: 1em;
  height: 1em;
  color: var(--c);
  opacity: 0;
  transform: scale(0.3) rotate(-60deg);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.tgl-material-3 input:checked + .tgl-material-3-track {
  border-color: var(--c);
  background: var(--c);
}
.tgl-material-3 input:checked + .tgl-material-3-track .tgl-material-3-handle { transform: translateX(1.25em); }
.tgl-material-3 input:checked + .tgl-material-3-track .tgl-material-3-handle::before {
  background: #fff;
  transform: scale(0.857);
}
.tgl-material-3 input:checked + .tgl-material-3-track svg {
  opacity: 1;
  transform: none;
}
.tgl-material-3:hover .tgl-material-3-handle { background: color-mix(in srgb, currentColor 8%, transparent); }
.tgl-material-3:hover input:checked + .tgl-material-3-track .tgl-material-3-handle { background: color-mix(in srgb, var(--c) 14%, transparent); }
.tgl-material-3:active input + .tgl-material-3-track .tgl-material-3-handle::before { transform: scale(1); }
.tgl-material-3 input:focus-visible + .tgl-material-3-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-on-off-text {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
  font-weight: 700;
}
.tgl-on-off-text input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-on-off-text-track {
  position: relative;
  display: block;
  width: 4.25em;
  height: 2em;
  border-radius: 1em;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 13%, transparent);
  transition: background-color 0.3s ease;
}
.tgl-on-off-text-track::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0.2em;
  left: 0.2em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.25);
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.tgl-on-off-text-on,
.tgl-on-off-text-off {
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 57.6%;
  font-size: 0.6em;
  letter-spacing: 0.08em;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.tgl-on-off-text-on {
  left: 0;
  color: #fff;
  opacity: 0;
  transform: translateX(-1.2em);
}
.tgl-on-off-text-off {
  right: 0;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.tgl-on-off-text input:checked + .tgl-on-off-text-track { background: var(--c); }
.tgl-on-off-text input:checked + .tgl-on-off-text-track::before { transform: translateX(2.25em); }
.tgl-on-off-text input:checked + .tgl-on-off-text-track .tgl-on-off-text-on {
  opacity: 1;
  transform: none;
}
.tgl-on-off-text input:checked + .tgl-on-off-text-track .tgl-on-off-text-off {
  opacity: 0;
  transform: translateX(1.2em);
}
.tgl-on-off-text input:focus-visible + .tgl-on-off-text-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-liquid-glass {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-liquid-glass input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-liquid-glass-track {
  position: relative;
  display: block;
  width: 3.9em;
  height: 1.75em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 13%, transparent);
  transition: background-color 0.3s ease;
}
.tgl-liquid-glass-knob {
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 2.4em;
  height: 1.5em;
  border-radius: 0.75em;
  background: #fff;
  box-shadow:
    0 0.1em 0.35em rgb(0 0 0 / 0.18),
    inset 0 0 0 1px rgb(255 255 255 / 0),
    inset 0.1em 0.15em 0.3em rgb(255 255 255 / 0),
    inset -0.1em -0.15em 0.3em rgb(0 0 0 / 0);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.35, 0.5, 1),
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}
/* the lens highlight, only while pressed */
.tgl-liquid-glass-knob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.05) 55%, rgb(255 255 255 / 0.2));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tgl-liquid-glass:active .tgl-liquid-glass-knob::before { opacity: 1; }
.tgl-liquid-glass input:checked + .tgl-liquid-glass-track { background: var(--c); }
.tgl-liquid-glass input:checked + .tgl-liquid-glass-track .tgl-liquid-glass-knob { transform: translateX(1.25em); }
/* pressed: the knob lifts, grows and turns into a clear lens */
.tgl-liquid-glass:active .tgl-liquid-glass-knob {
  background: rgb(255 255 255 / 0.04);
  box-shadow:
    0 0.3em 0.8em rgb(0 0 0 / 0.16),
    inset 0 0 0 1px rgb(255 255 255 / 0.9),
    inset 0.12em 0.18em 0.25em rgb(255 255 255 / 0.75),
    inset -0.12em -0.18em 0.3em rgb(0 0 0 / 0.12);
  -webkit-backdrop-filter: blur(0.5px) brightness(1.08);
  backdrop-filter: blur(0.5px) brightness(1.08);
  transform: scale(1.3, 1.45);
}
.tgl-liquid-glass:active input:checked + .tgl-liquid-glass-track .tgl-liquid-glass-knob { transform: translateX(1.25em) scale(1.3, 1.45); }
.tgl-liquid-glass input:focus-visible + .tgl-liquid-glass-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-two-labels {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
  font-weight: 600;
}
.tgl-two-labels input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-two-labels-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.25em;
  border-radius: 99em;
  background: color-mix(in srgb, currentColor 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
}
.tgl-two-labels-track::before {
  content: "";
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.25em;
  width: calc(50% - 0.25em);
  border-radius: 99em;
  background: var(--c);
  box-shadow: 0 0.15em 0.45em color-mix(in srgb, var(--c) 40%, transparent);
  transition: transform 0.4s cubic-bezier(0.45, 1.25, 0.5, 1);
}
.tgl-two-labels-opt {
  position: relative;
  padding: 0.6em 1.3em;
  font-size: 0.875em;
  line-height: 1;
  text-align: center;
  color: color-mix(in srgb, currentColor 60%, transparent);
  transition: color 0.3s ease;
}
.tgl-two-labels input:not(:checked) + .tgl-two-labels-track .tgl-two-labels-opt:first-child,
.tgl-two-labels input:checked + .tgl-two-labels-track .tgl-two-labels-opt:last-child { color: #fff; }
.tgl-two-labels input:checked + .tgl-two-labels-track::before { transform: translateX(100%); }
.tgl-two-labels input:focus-visible + .tgl-two-labels-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-neumorphic {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --surface: color-mix(in srgb, var(--c) 5%, #e4e8ef);
  --low: color-mix(in srgb, var(--c) 12%, #a3adbf);
  padding: 1.3em 1.7em;
  border-radius: 1.4em;
  background: var(--surface);
}
.tgl-neumorphic input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-neumorphic-track {
  position: relative;
  display: block;
  width: 4.4em;
  height: 2.2em;
  border-radius: 1.1em;
  background: var(--surface);
  box-shadow:
    inset 0.2em 0.2em 0.45em var(--low),
    inset -0.2em -0.2em 0.45em #fff;
}
.tgl-neumorphic-track::before {
  content: "";
  position: absolute;
  inset: 0.3em;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 0%, transparent));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tgl-neumorphic-knob {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface), #fff 65%), var(--surface));
  box-shadow:
    0.18em 0.18em 0.4em var(--low),
    -0.12em -0.12em 0.3em #fff;
  transition: transform 0.45s cubic-bezier(0.4, 1.25, 0.5, 1);
}
.tgl-neumorphic-knob::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--low) 70%, #fff);
  box-shadow: inset 0.04em 0.05em 0.08em var(--low);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.tgl-neumorphic input:checked + .tgl-neumorphic-track::before { opacity: 1; }
.tgl-neumorphic input:checked + .tgl-neumorphic-track .tgl-neumorphic-knob { transform: translateX(2.2em); }
.tgl-neumorphic input:checked + .tgl-neumorphic-track .tgl-neumorphic-knob::before {
  background: var(--c);
  box-shadow: 0 0 0.12em var(--c), 0 0 0.45em var(--c);
}
.tgl-neumorphic input:focus-visible + .tgl-neumorphic-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-rocker {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-rocker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-rocker-bezel {
  display: block;
  padding: 0.3em;
  border-radius: 0.6em;
  background: linear-gradient(#3b3e46, #1c1e23);
  box-shadow: 0 0.25em 0.6em rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.14);
  perspective: 6em;
}
.tgl-rocker-paddle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 5em;
  height: 2.5em;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 30%, #2b2d33);
  transform: rotateY(20deg);
  transition: transform 0.22s cubic-bezier(0.5, 0, 0.3, 1.5), background-color 0.2s ease, box-shadow 0.3s ease;
}
/* two shading layers, crossfaded: the pressed half always reads darker */
.tgl-rocker-paddle::before,
.tgl-rocker-paddle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.22s ease;
}
.tgl-rocker-paddle::before { background: linear-gradient(90deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.05) 49.5%, rgb(0 0 0 / 0.25) 50.5%, rgb(0 0 0 / 0.45)); }
.tgl-rocker-paddle::after {
  background: linear-gradient(90deg, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.25) 49.5%, rgb(255 255 255 / 0.05) 50.5%, rgb(255 255 255 / 0.28));
  opacity: 0;
}
.tgl-rocker-i,
.tgl-rocker-o {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
.tgl-rocker-i::before {
  content: "";
  width: 0.18em;
  height: 0.95em;
  border-radius: 0.1em;
  background: rgb(255 255 255 / 0.9);
}
.tgl-rocker-o::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 0.17em solid rgb(255 255 255 / 0.9);
  border-radius: 50%;
}
.tgl-rocker input:checked + .tgl-rocker-bezel .tgl-rocker-paddle {
  background: var(--c);
  box-shadow: 0 0 0.9em color-mix(in srgb, var(--c) 55%, transparent);
  transform: rotateY(-20deg);
}
.tgl-rocker input:checked + .tgl-rocker-bezel .tgl-rocker-paddle::before { opacity: 0; }
.tgl-rocker input:checked + .tgl-rocker-bezel .tgl-rocker-paddle::after { opacity: 1; }
.tgl-rocker input:focus-visible + .tgl-rocker-bezel {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-skeuomorphic {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
  font-weight: 700;
}
.tgl-skeuomorphic input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
/* the window: 4.8em wide, the knob is 1.8em, so the strip travels 3em */
.tgl-skeuomorphic-track {
  position: relative;
  isolation: isolate;
  display: block;
  width: 4.8em;
  height: 1.8em;
  border-radius: 0.9em;
  overflow: hidden;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5);
}
.tgl-skeuomorphic-track::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.3), inset 0 0.12em 0.25em rgb(0 0 0 / 0.35);
  pointer-events: none;
}
.tgl-skeuomorphic-strip {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 3.9em 3.9em;
  height: 100%;
  transform: translateX(-3em);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tgl-skeuomorphic-on,
.tgl-skeuomorphic-off {
  display: grid;
  place-items: center;
  font-size: 0.8em;
  letter-spacing: 0.04em;
}
.tgl-skeuomorphic-on {
  padding-right: 1.125em;
  background: linear-gradient(color-mix(in srgb, var(--c) 70%, #000), var(--c) 55%, color-mix(in srgb, var(--c) 80%, #fff));
  color: #fff;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.35);
}
.tgl-skeuomorphic-off {
  padding-left: 1.125em;
  background: linear-gradient(#d4d4d4, #f2f2f2 55%, #fff);
  color: #858585;
  text-shadow: 0 1px 0 #fff;
}
.tgl-skeuomorphic-knob {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 3em;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: linear-gradient(#cacaca, #fbfbfb);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgb(0 0 0 / 0.28),
    0 0.06em 0.2em rgb(0 0 0 / 0.35);
}
.tgl-skeuomorphic input:checked + .tgl-skeuomorphic-track .tgl-skeuomorphic-strip { transform: none; }
.tgl-skeuomorphic input:focus-visible + .tgl-skeuomorphic-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-yes-no {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
  font-weight: 800;
}
.tgl-yes-no input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-yes-no-track {
  position: relative;
  display: block;
  width: 5em;
  height: 2.2em;
  border-radius: 1.1em;
  background: color-mix(in srgb, currentColor 13%, transparent);
  transition: background-color 0.3s ease;
}
.tgl-yes-no-knob {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 2.6em;
  height: 1.7em;
  border-radius: 0.85em;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.22);
  transition: transform 0.4s cubic-bezier(0.4, 1.3, 0.5, 1);
}
.tgl-yes-no-words {
  display: grid;
  grid-auto-rows: 1.7em;
  transition: transform 0.4s cubic-bezier(0.4, 1.3, 0.5, 1) 0.05s;
}
.tgl-yes-no-words span {
  display: grid;
  place-items: center;
  font-size: 0.68em;
  letter-spacing: 0.08em;
  color: #6b7280;
}
.tgl-yes-no-words span + span { color: var(--c); }
.tgl-yes-no input:checked + .tgl-yes-no-track { background: var(--c); }
.tgl-yes-no input:checked + .tgl-yes-no-track .tgl-yes-no-knob { transform: translateX(1.9em); }
.tgl-yes-no input:checked + .tgl-yes-no-track .tgl-yes-no-words { transform: translateY(-1.7em); }
.tgl-yes-no input:focus-visible + .tgl-yes-no-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-simple {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  gap: 0.75em;
  font-family: system-ui, sans-serif;
  font-weight: 500;
  white-space: nowrap;
}
.tgl-simple input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-simple-track {
  position: relative;
  width: 2.75em;
  height: 1.5em;
  border-radius: 0.75em;
  background: color-mix(in srgb, currentColor 22%, transparent);
  transition: background-color 0.2s ease;
}
.tgl-simple-track::after {
  content: "";
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.05em 0.15em rgb(0 0 0 / 0.3);
  transition: transform 0.2s ease;
}
.tgl-simple input:checked + .tgl-simple-track { background: var(--c); }
.tgl-simple input:checked + .tgl-simple-track::after { transform: translateX(1.25em); }
.tgl-simple input:focus-visible + .tgl-simple-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-check-cross {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-check-cross input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-check-cross-track {
  position: relative;
  display: block;
  width: 3.5em;
  height: 2em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 13%, transparent);
  transition: background-color 0.3s ease;
}
.tgl-check-cross-knob {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.22);
  transition: transform 0.4s cubic-bezier(0.4, 1.3, 0.5, 1);
}
.tgl-check-cross-knob svg {
  width: 1.1em;
  height: 1.1em;
  overflow: visible;
}
.tgl-check-cross-x {
  stroke: #9ca3af;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.tgl-check-cross-tick {
  stroke: var(--c);
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transition: stroke-dashoffset 0.15s ease;
}
.tgl-check-cross input:checked + .tgl-check-cross-track { background: var(--c); }
.tgl-check-cross input:checked + .tgl-check-cross-track .tgl-check-cross-knob { transform: translateX(1.5em); }
.tgl-check-cross input:checked + .tgl-check-cross-track .tgl-check-cross-x {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}
.tgl-check-cross input:checked + .tgl-check-cross-track .tgl-check-cross-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.tgl-check-cross input:focus-visible + .tgl-check-cross-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-neon {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 1.1em 1.4em;
  border-radius: 1em;
  background: #0d0d14;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}
.tgl-neon input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-neon-track {
  position: relative;
  display: block;
  width: 4em;
  height: 2em;
  border: 0.14em solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 1em;
  transition: border-color 0.2s ease, box-shadow 0.3s ease;
}
.tgl-neon-track::before {
  content: "";
  position: absolute;
  top: 0.21em;
  left: 0.21em;
  width: 1.3em;
  height: 1.3em;
  border: 0.14em solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 50%;
  transition:
    transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1),
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.tgl-neon input:checked + .tgl-neon-track {
  border-color: var(--c);
  box-shadow: 0 0 0.3em var(--c), 0 0 1em color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 0.4em color-mix(in srgb, var(--c) 55%, transparent);
  animation: tgl-neon-flicker 0.8s linear;
}
.tgl-neon input:checked + .tgl-neon-track::before {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 45%, #fff);
  box-shadow: 0 0 0.25em var(--c), 0 0 0.8em var(--c);
  transform: translateX(2em);
}
.tgl-neon input:focus-visible + .tgl-neon-track {
  outline: 2px solid var(--c);
  outline-offset: 0.25em;
}
@keyframes tgl-neon-flicker {
  0% { opacity: 0.3; }
  8% { opacity: 1; }
  14% { opacity: 0.35; }
  22% { opacity: 1; }
  30% { opacity: 0.55; }
  38%, 100% { opacity: 1; }
}

.tgl-gradient {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-gradient input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-gradient-track {
  position: relative;
  display: block;
  width: 3.8em;
  height: 2em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 13%, transparent);
}
.tgl-gradient-track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    var(--c),
    color-mix(in oklch, var(--c) 45%, #d946ef),
    color-mix(in oklch, var(--c) 30%, #fb7185),
    var(--c)) 0 0 / 300% 100%;
  box-shadow: 0 0.35em 0.9em -0.25em color-mix(in srgb, var(--c) 80%, transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.tgl-gradient-track::after {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.25);
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.tgl-gradient input:checked + .tgl-gradient-track::before {
  opacity: 1;
  animation: tgl-gradient-drift 3s ease-in-out infinite alternate;
}
.tgl-gradient input:checked + .tgl-gradient-track::after { transform: translateX(1.8em); }
.tgl-gradient input:focus-visible + .tgl-gradient-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
@keyframes tgl-gradient-drift {
  to { background-position: 100% 0; }
}

.tgl-liquid-stretch {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-liquid-stretch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-liquid-stretch-track {
  position: relative;
  display: block;
  width: 4em;
  height: 2em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  transition: background-color 0.3s ease;
}
/* going left the left edge leads; going right the right edge leads */
.tgl-liquid-stretch-track::before {
  content: "";
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.25em;
  right: 2.25em;
  border-radius: 0.75em;
  background: color-mix(in srgb, var(--c) 60%, transparent);
  transition:
    left 0.32s cubic-bezier(0.6, 0, 0.2, 1),
    right 0.32s cubic-bezier(0.6, 0, 0.2, 1) 0.1s,
    background-color 0.3s ease;
}
.tgl-liquid-stretch input:checked + .tgl-liquid-stretch-track { background: color-mix(in srgb, var(--c) 24%, transparent); }
.tgl-liquid-stretch input:checked + .tgl-liquid-stretch-track::before {
  left: 2.25em;
  right: 0.25em;
  background: var(--c);
  transition:
    right 0.32s cubic-bezier(0.6, 0, 0.2, 1),
    left 0.32s cubic-bezier(0.6, 0, 0.2, 1) 0.1s,
    background-color 0.3s ease;
}
.tgl-liquid-stretch input:focus-visible + .tgl-liquid-stretch-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-spring {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-spring input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-spring-track {
  position: relative;
  display: block;
  width: 3.8em;
  height: 2em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 13%, transparent);
  transition: background-color 0.3s ease;
}
.tgl-spring-knob {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.22);
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition: transform 0.55s linear(0, 0.077, 0.256, 0.474, 0.685, 0.863, 0.993, 1.076, 1.117, 1.126, 1.114, 1.09, 1.062, 1.036, 1.015, 0.999, 0.989, 0.985, 0.984, 0.986, 0.989, 0.993, 1);
}
/* the dot rides a looser spring than the knob, so it lags and wobbles */
.tgl-spring-dot {
  position: absolute;
  top: 0.8em;
  left: 0.8em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: #cbd5e1;
  transition: transform 0.7s cubic-bezier(0.3, 1.8, 0.5, 1), background-color 0.3s ease;
  transition: transform 1s linear(0, 0.177, 0.565, 0.962, 1.233, 1.332, 1.287, 1.163, 1.028, 0.931, 0.89, 0.9, 0.94, 0.986, 1.02, 1.036, 1.034, 1.022, 1.007, 0.994, 0.988, 0.988, 0.992, 0.997, 1.001, 1.004, 1), background-color 0.3s ease;
}
.tgl-spring input:checked + .tgl-spring-track { background: var(--c); }
.tgl-spring input:checked + .tgl-spring-track .tgl-spring-knob { transform: translateX(1.8em); }
.tgl-spring input:checked + .tgl-spring-track .tgl-spring-dot {
  background: var(--c);
  transform: translateX(1.8em);
}
.tgl-spring input:focus-visible + .tgl-spring-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-fill {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-fill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-fill-track {
  position: relative;
  isolation: isolate;
  display: block;
  width: 3.8em;
  height: 2em;
  border-radius: 1em;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 13%, transparent);
}
/* a full-width pill whose right end always hugs the knob */
.tgl-fill-bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  transform: translateX(-1.8em);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.tgl-fill-track::after {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.25);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.tgl-fill input:checked + .tgl-fill-track .tgl-fill-bar { transform: none; }
.tgl-fill input:checked + .tgl-fill-track::after { transform: translateX(1.8em); }
.tgl-fill input:focus-visible + .tgl-fill-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-loading {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-loading input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-loading-track {
  position: relative;
  display: block;
  width: 3.8em;
  height: 2em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 13%, transparent);
  transition: background-color 0.3s ease;
}
.tgl-loading-track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tgl-loading-knob {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.22);
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.tgl-loading-spinner,
.tgl-loading-check {
  grid-area: 1 / 1;
  width: 1em;
  height: 1em;
}
.tgl-loading-spinner {
  border: 0.14em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  opacity: 0;
}
.tgl-loading-check {
  stroke: var(--c);
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transition: stroke-dashoffset 0.15s ease;
}
/* on: pale track and a spinner first, then the fill and the check */
.tgl-loading input:checked + .tgl-loading-track { background: color-mix(in srgb, var(--c) 28%, transparent); }
.tgl-loading input:checked + .tgl-loading-track::before {
  opacity: 1;
  transition-delay: 1.1s;
}
.tgl-loading input:checked + .tgl-loading-track .tgl-loading-knob { transform: translateX(1.8em); }
.tgl-loading input:checked + .tgl-loading-track .tgl-loading-spinner { animation: tgl-loading-spin 1.2s linear forwards; }
.tgl-loading input:checked + .tgl-loading-track .tgl-loading-check {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease 1.15s;
}
.tgl-loading input:focus-visible + .tgl-loading-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
@keyframes tgl-loading-spin {
  0% { opacity: 0; transform: rotate(0deg); }
  8%, 88% { opacity: 1; }
  100% { opacity: 0; transform: rotate(720deg); }
}

.tgl-with-label {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  gap: 0.7em;
  font-family: system-ui, sans-serif;
  font-weight: 500;
  white-space: nowrap;
}
.tgl-with-label input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-with-label-track {
  position: relative;
  width: 3em;
  height: 1.65em;
  border-radius: 0.825em;
  background: color-mix(in srgb, currentColor 20%, transparent);
  transition: background-color 0.25s ease;
}
.tgl-with-label-track::after {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.08em 0.2em rgb(0 0 0 / 0.25);
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.tgl-with-label-chip {
  height: 1.8em;
  padding: 0 0.6em;
  border-radius: 0.9em;
  overflow: hidden;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: color-mix(in srgb, currentColor 65%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tgl-with-label-roll {
  display: grid;
  grid-auto-rows: 1.8em;
  align-items: center;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.4, 1.3, 0.5, 1);
}
.tgl-with-label input:checked + .tgl-with-label-track { background: var(--c); }
.tgl-with-label input:checked + .tgl-with-label-track::after { transform: translateX(1.35em); }
.tgl-with-label input:checked ~ .tgl-with-label-chip {
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
}
.tgl-with-label input:checked ~ .tgl-with-label-chip .tgl-with-label-roll { transform: translateY(-1.8em); }
.tgl-with-label input:focus-visible + .tgl-with-label-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-settings-row {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: flex;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  width: 17.5em;
  padding: 0.85em 1em;
  border-radius: 0.9em;
  font-family: system-ui, sans-serif;
  text-align: left;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.tgl-settings-row input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-settings-row:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.tgl-settings-row:has(input:checked) {
  background: color-mix(in srgb, var(--c) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
}
.tgl-settings-row-text {
  display: grid;
  gap: 0.2em;
}
.tgl-settings-row-title {
  font-size: 0.95em;
  font-weight: 600;
}
.tgl-settings-row-hint {
  font-size: 0.78em;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.tgl-settings-row-track {
  position: relative;
  flex: none;
  width: 2.8em;
  height: 1.7em;
  border-radius: 0.85em;
  background: color-mix(in srgb, currentColor 16%, transparent);
  transition: background-color 0.25s ease;
}
.tgl-settings-row-track::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.2);
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.tgl-settings-row input:checked + .tgl-settings-row-track { background: var(--c); }
.tgl-settings-row input:checked + .tgl-settings-row-track::before { transform: translateX(1.1em); }
.tgl-settings-row input:focus-visible + .tgl-settings-row-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-pricing {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  gap: 0.7em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  white-space: nowrap;
}
.tgl-pricing input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-pricing-month { order: -1; }
.tgl-pricing-month,
.tgl-pricing-year {
  font-size: 0.95em;
  transition: opacity 0.3s ease;
}
.tgl-pricing-year { opacity: 0.45; }
.tgl-pricing-track {
  position: relative;
  width: 2.9em;
  height: 1.6em;
  border-radius: 0.8em;
  background: var(--c);
}
.tgl-pricing-track::after {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.08em 0.2em rgb(0 0 0 / 0.25);
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.tgl-pricing-badge {
  padding: 0.4em 0.75em;
  border-radius: 99em;
  font-size: 0.7em;
  font-weight: 700;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  opacity: 0.6;
  transform: scale(0.9);
  transition:
    transform 0.45s cubic-bezier(0.3, 1.8, 0.5, 1),
    opacity 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}
.tgl-pricing input:checked + .tgl-pricing-track::after { transform: translateX(1.3em); }
.tgl-pricing input:checked ~ .tgl-pricing-month { opacity: 0.45; }
.tgl-pricing input:checked ~ .tgl-pricing-year { opacity: 1; }
.tgl-pricing input:checked ~ .tgl-pricing-badge {
  background: var(--c);
  color: #fff;
  opacity: 1;
  transform: rotate(-4deg) scale(1.05);
}
.tgl-pricing input:focus-visible + .tgl-pricing-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-vertical {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.55em;
  font-family: system-ui, sans-serif;
  font-weight: 700;
}
.tgl-vertical input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-vertical-track {
  position: relative;
  width: 2em;
  height: 3.6em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 13%, transparent);
  transition: background-color 0.3s ease;
}
.tgl-vertical-track::before {
  content: "";
  position: absolute;
  bottom: 0.2em;
  left: 0.2em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.25);
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.tgl-vertical-marks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.85em 0;
  font-size: 0.6em;
  letter-spacing: 0.1em;
}
.tgl-vertical-marks span {
  color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color 0.3s ease;
}
.tgl-vertical input:not(:checked) ~ .tgl-vertical-marks span:last-child { color: inherit; }
.tgl-vertical input:checked ~ .tgl-vertical-marks span:first-child { color: var(--c); }
.tgl-vertical input:checked + .tgl-vertical-track { background: var(--c); }
.tgl-vertical input:checked + .tgl-vertical-track::before { transform: translateY(-1.6em); }
.tgl-vertical input:focus-visible + .tgl-vertical-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-windows-11 {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  gap: 0.75em;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}
.tgl-windows-11 input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-windows-11-state {
  order: -1;
  width: 1.8em;
  font-size: 0.875em;
  text-align: right;
}
.tgl-windows-11-state::before { content: "Off"; }
.tgl-windows-11-track {
  position: relative;
  width: 2.5em;
  height: 1.25em;
  border: 1px solid color-mix(in srgb, currentColor 62%, transparent);
  border-radius: 0.625em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tgl-windows-11-track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.19em;
  width: 0.75em;
  height: 0.75em;
  margin-top: -0.375em;
  border-radius: 0.375em;
  background: color-mix(in srgb, currentColor 75%, transparent);
  transition:
    transform 0.25s cubic-bezier(0.1, 0.9, 0.2, 1),
    width 0.2s cubic-bezier(0.1, 0.9, 0.2, 1),
    scale 0.15s ease,
    background-color 0.15s ease;
}
.tgl-windows-11:hover .tgl-windows-11-track { background: color-mix(in srgb, currentColor 9%, transparent); }
.tgl-windows-11:hover .tgl-windows-11-track::before { scale: 1.17; }
.tgl-windows-11:active .tgl-windows-11-track::before { width: 1.06em; }
.tgl-windows-11 input:checked + .tgl-windows-11-track {
  border-color: var(--c);
  background: var(--c);
}
.tgl-windows-11 input:checked + .tgl-windows-11-track::before {
  background: #fff;
  transform: translateX(calc(1.37em - 2px));
}
.tgl-windows-11:active input:checked + .tgl-windows-11-track::before { transform: translateX(calc(1.06em - 2px)); }
.tgl-windows-11 input:checked ~ .tgl-windows-11-state::before { content: "On"; }
.tgl-windows-11 input:focus-visible + .tgl-windows-11-track {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.tgl-android {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 2.5em;
  height: 1.5em;
}
.tgl-android input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-android-track {
  position: absolute;
  top: 0.3125em;
  left: 0.125em;
  right: 0.125em;
  height: 0.875em;
  border-radius: 0.4375em;
  background: color-mix(in srgb, currentColor 32%, transparent);
  transition: background-color 0.2s ease;
}
.tgl-android-thumb {
  position: absolute;
  top: 0.125em;
  left: 0;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: #f5f5f5;
  box-shadow: 0 0.06em 0.2em rgb(0 0 0 / 0.4), 0 0 0 0 color-mix(in srgb, currentColor 14%, transparent);
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s ease,
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tgl-android input:checked + .tgl-android-track { background: color-mix(in srgb, var(--c) 45%, transparent); }
.tgl-android input:checked ~ .tgl-android-thumb {
  background: var(--c);
  box-shadow: 0 0.06em 0.2em rgb(0 0 0 / 0.4), 0 0 0 0 color-mix(in srgb, var(--c) 22%, transparent);
  transform: translateX(1.25em);
}
.tgl-android:active .tgl-android-thumb,
.tgl-android input:focus-visible ~ .tgl-android-thumb { box-shadow: 0 0.06em 0.2em rgb(0 0 0 / 0.4), 0 0 0 0.6em color-mix(in srgb, currentColor 14%, transparent); }
.tgl-android:active input:checked ~ .tgl-android-thumb,
.tgl-android input:checked:focus-visible ~ .tgl-android-thumb { box-shadow: 0 0.06em 0.2em rgb(0 0 0 / 0.4), 0 0 0 0.6em color-mix(in srgb, var(--c) 22%, transparent); }

.tgl-bootstrap {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  white-space: nowrap;
}
.tgl-bootstrap input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-bootstrap-track {
  position: relative;
  width: 2em;
  height: 1em;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 1em;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.tgl-bootstrap-track::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.375em);
  left: 0.1em;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 28%, transparent);
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.tgl-bootstrap input:checked + .tgl-bootstrap-track {
  border-color: var(--c);
  background: var(--c);
}
.tgl-bootstrap input:checked + .tgl-bootstrap-track::after {
  background: #fff;
  transform: translateX(calc(1.05em - 2px));
}
.tgl-bootstrap input:focus-visible + .tgl-bootstrap-track {
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--c) 25%, transparent);
}
.tgl-bootstrap input:focus-visible:not(:checked) + .tgl-bootstrap-track::after { background: color-mix(in srgb, var(--c) 55%, transparent); }

.tgl-square {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-square input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-square-track {
  position: relative;
  display: block;
  width: 3.6em;
  height: 1.9em;
  border-radius: 0.3em;
  background: color-mix(in srgb, currentColor 16%, transparent);
  transition: background-color 0.25s ease;
}
.tgl-square-knob {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.18em;
  background: #fff;
  box-shadow: 0 0.08em 0.2em rgb(0 0 0 / 0.25);
  transition: transform 0.25s cubic-bezier(0.7, 0, 0.3, 1);
}
.tgl-square-knob::before {
  content: "";
  width: 0.5em;
  height: 0.6em;
  background: repeating-linear-gradient(90deg, #cbd5e1 0 0.09em, transparent 0.09em 0.2em);
}
.tgl-square input:checked + .tgl-square-track { background: var(--c); }
.tgl-square input:checked + .tgl-square-track .tgl-square-knob { transform: translateX(1.7em); }
.tgl-square input:focus-visible + .tgl-square-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-outline {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-outline input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-outline-track {
  position: relative;
  display: block;
  width: 3.6em;
  height: 2em;
  border: 0.125em solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 1em;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tgl-outline-track::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  width: 1.35em;
  height: 1.35em;
  border: 0.125em solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0 var(--c), 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent);
  transition:
    transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.35s ease 0.1s;
}
.tgl-outline input:checked + .tgl-outline-track {
  border-color: var(--c);
  box-shadow: 0 0 0.6em color-mix(in srgb, var(--c) 30%, transparent);
}
.tgl-outline input:checked + .tgl-outline-track::before {
  border-color: var(--c);
  box-shadow: inset 0 0 0 0.7em var(--c), 0 0 0.5em color-mix(in srgb, var(--c) 60%, transparent);
  transform: translateX(1.6em);
}
.tgl-outline input:focus-visible + .tgl-outline-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-3d {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

}
.tgl-3d input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-3d-track {
  position: relative;
  display: block;
  width: 4.2em;
  height: 2.1em;
  border-radius: 1.05em;
  background: #cfd5de;
  box-shadow:
    inset 0 0.2em 0.3em rgb(0 0 0 / 0.2),
    0 0.3em 0 #a3acb9,
    0 0.45em 0.5em rgb(0 0 0 / 0.18);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.tgl-3d-knob {
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 1.8em;
  height: 1.5em;
  border-radius: 0.9em / 0.75em;
  background: linear-gradient(#fff, #eceff3);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0.3em 0 #b3bbc7,
    0 0.4em 0.45em rgb(0 0 0 / 0.3);
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1.2), box-shadow 0.12s ease;
}
.tgl-3d input:checked + .tgl-3d-track {
  background: var(--c);
  box-shadow:
    inset 0 0.2em 0.3em rgb(0 0 0 / 0.25),
    0 0.3em 0 color-mix(in srgb, var(--c) 65%, #000),
    0 0.45em 0.5em rgb(0 0 0 / 0.18);
}
.tgl-3d input:checked + .tgl-3d-track .tgl-3d-knob { transform: translateX(2.1em); }
/* pressed: the puck sinks, so its side shrinks */
.tgl-3d:active .tgl-3d-knob {
  box-shadow:
    inset 0 1px 0 #fff,
    0 0.1em 0 #b3bbc7,
    0 0.15em 0.2em rgb(0 0 0 / 0.3);
  transform: translateY(0.2em);
}
.tgl-3d:active input:checked + .tgl-3d-track .tgl-3d-knob { transform: translate(2.1em, 0.2em); }
.tgl-3d input:focus-visible + .tgl-3d-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-flip {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
  font-weight: 800;
}
.tgl-flip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-flip-track {
  position: relative;
  display: block;
  width: 4.6em;
  height: 2.4em;
  border-radius: 1.2em;
  background: color-mix(in srgb, currentColor 13%, transparent);
  perspective: 10em;
  transition: background-color 0.35s ease;
}
.tgl-flip-coin {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  width: 2em;
  height: 2em;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.45, 1.25, 0.5, 1);
}
.tgl-flip-off,
.tgl-flip-on {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.2);
  font-size: 0.56em;
  letter-spacing: 0.04em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tgl-flip-off { color: #6b7280; }
.tgl-flip-on {
  color: var(--c);
  transform: rotateY(180deg);
}
.tgl-flip input:checked + .tgl-flip-track { background: var(--c); }
.tgl-flip input:checked + .tgl-flip-track .tgl-flip-coin { transform: translateX(2.2em) rotateY(180deg); }
.tgl-flip input:focus-visible + .tgl-flip-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-retro-slide {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}
.tgl-retro-slide input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-retro-slide-panel {
  display: grid;
  gap: 0.4em;
  padding: 0.6em 0.8em 0.8em;
  border-radius: 0.45em;
  background: linear-gradient(#f1ebdc, #e0d7c2);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    inset 0 0 0 1px rgb(0 0 0 / 0.08),
    0 0.15em 0.4em rgb(0 0 0 / 0.25);
}
.tgl-retro-slide-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.55em;
  letter-spacing: 0.14em;
  color: #6b6252;
}
.tgl-retro-slide-legend span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.tgl-retro-slide-legend span:last-child::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: #a39a88;
  box-shadow: inset 0 0.1em 0.15em rgb(0 0 0 / 0.35);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.tgl-retro-slide-slot {
  position: relative;
  display: block;
  width: 4.4em;
  height: 1.5em;
  border-radius: 0.3em;
  background: #26231f;
  box-shadow: inset 0 0.12em 0.25em rgb(0 0 0 / 0.6), 0 1px 0 rgb(255 255 255 / 0.6);
}
.tgl-retro-slide-nub {
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 2em;
  height: 1.2em;
  border-radius: 0.2em;
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.2) 0 0.08em, transparent 0.08em 0.22em) center / 1.1em 0.75em no-repeat,
    linear-gradient(#f6f3ec, #c8c0b0);
  box-shadow: inset 0 1px 0 #fff, 0 0.1em 0.15em rgb(0 0 0 / 0.5);
  transition: transform 0.18s cubic-bezier(0.5, 0, 0.2, 1.25);
}
.tgl-retro-slide input:checked + .tgl-retro-slide-panel .tgl-retro-slide-nub { transform: translateX(2.1em); }
.tgl-retro-slide input:checked + .tgl-retro-slide-panel .tgl-retro-slide-legend span:last-child::before {
  background: var(--c);
  box-shadow: 0 0 0.3em var(--c), 0 0 0.8em var(--c);
}
.tgl-retro-slide input:focus-visible + .tgl-retro-slide-panel {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.tgl-pixel {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0.2em;
}
.tgl-pixel input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
/* one pixel is 0.2em: the track is 22 by 10 pixels */
.tgl-pixel-track {
  position: relative;
  display: block;
  width: 4.4em;
  height: 2em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  box-shadow:
    0 -0.2em 0 currentColor,
    0 0.2em 0 currentColor,
    -0.2em 0 0 currentColor,
    0.2em 0 0 currentColor;
}
.tgl-pixel-track::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0.4em;
  width: 1.2em;
  height: 1.2em;
  background: #fff;
  box-shadow:
    inset -0.2em -0.2em 0 #b8c0cc,
    0 -0.2em 0 currentColor,
    0 0.2em 0 currentColor,
    -0.2em 0 0 currentColor,
    0.2em 0 0 currentColor;
  transition: transform 0.32s steps(4, jump-end);
}
.tgl-pixel input:checked + .tgl-pixel-track {
  background: var(--c);
  box-shadow:
    inset 0.2em 0.2em 0 rgb(255 255 255 / 0.3),
    0 -0.2em 0 currentColor,
    0 0.2em 0 currentColor,
    -0.2em 0 0 currentColor,
    0.2em 0 0 currentColor;
}
.tgl-pixel input:checked + .tgl-pixel-track::before { transform: translateX(2.4em); }
.tgl-pixel input:focus-visible + .tgl-pixel-track {
  outline: 0.2em dashed var(--c);
  outline-offset: 0.4em;
}

.tgl-day-night-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-day-night-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-day-night-toggle-sky {
  --ease: cubic-bezier(0.6, -0.2, 0.3, 1.15);
  position: relative;
  display: block;
  width: 7em;
  height: 3em;
  border-radius: 3em;
  overflow: hidden;
  isolation: isolate;
  background-color: color-mix(in srgb, var(--c) 70%, #7dd3fc);
  transition: background-color 0.7s ease;
}
/* inner shadow drawn on top of the scene */
.tgl-day-night-toggle-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0.15em 0.3em rgba(0, 0, 0, 0.35), inset 0 -0.06em 0.12em rgba(255, 255, 255, 0.3);
}
.tgl-day-night-toggle-orb {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  z-index: 2;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  overflow: hidden;
  background: #fbbf24;
  box-shadow:
    inset 0.12em 0.12em 0.2em rgba(255, 255, 255, 0.55),
    inset -0.12em -0.14em 0.25em rgba(146, 64, 14, 0.45),
    0.06em 0.12em 0.3em rgba(0, 0, 0, 0.35),
    0 0 0 0.9em rgba(255, 255, 255, 0.1),
    0 0 0 1.8em rgba(255, 255, 255, 0.07),
    0 0 0 2.7em rgba(255, 255, 255, 0.05);
  transition: transform 0.7s var(--ease);
}
.tgl-day-night-toggle-moon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 32%, #94a3b8 0 0.28em, transparent 0.3em),
    radial-gradient(circle at 68% 44%, #94a3b8 0 0.2em, transparent 0.22em),
    radial-gradient(circle at 44% 74%, #94a3b8 0 0.32em, transparent 0.34em),
    #cbd5e1;
  box-shadow: inset 0.12em 0.12em 0.2em rgba(255, 255, 255, 0.6), inset -0.12em -0.14em 0.25em rgba(51, 65, 85, 0.5);
  transform: translateX(110%);
  transition: transform 0.7s var(--ease) 0.05s;
}
.tgl-day-night-toggle-clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: transform 0.7s var(--ease);
}
.tgl-day-night-toggle-clouds::before,
.tgl-day-night-toggle-clouds::after {
  content: "";
  position: absolute;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
}
.tgl-day-night-toggle-clouds::before {
  left: 3em;
  top: 1.5em;
  --cloud: color-mix(in srgb, var(--c) 22%, #fff);
  background: var(--cloud);
  box-shadow:
    0.9em -0.2em 0 0.05em var(--cloud),
    1.85em -0.45em 0 0.12em var(--cloud),
    2.75em -0.75em 0 0.2em var(--cloud),
    3.5em -0.15em 0 0.3em var(--cloud);
}
.tgl-day-night-toggle-clouds::after {
  left: 3.4em;
  top: 2.05em;
  background: #fff;
  box-shadow:
    0.85em -0.25em 0 0.08em #fff,
    1.8em -0.05em 0 0.02em #fff,
    2.6em -0.55em 0 0.2em #fff,
    3.3em 0.15em 0 0.25em #fff,
    1.3em 0.55em 0 0.2em #fff;
}
.tgl-day-night-toggle-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(-2em);
  transition: transform 0.7s var(--ease), opacity 0.5s ease;
}
.tgl-day-night-toggle-stars::before,
.tgl-day-night-toggle-stars::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: tgl-day-night-toggle-twinkle 2.6s ease-in-out infinite;
}
.tgl-day-night-toggle-stars::before {
  top: 0.55em;
  left: 0.8em;
  width: 0.16em;
  height: 0.16em;
  box-shadow: 0.9em 0.75em 0 0.02em #fff, 1.9em 0.1em 0 #fff, 2.6em 1.15em 0 0.03em #fff, 0.3em 1.45em 0 #fff, 3.4em 0.45em 0 0.02em #fff;
}
.tgl-day-night-toggle-stars::after {
  top: 0.9em;
  left: 1.3em;
  width: 0.11em;
  height: 0.11em;
  box-shadow: 1.1em -0.35em 0 #fff, 0.5em 0.95em 0 0.01em #fff, 2.2em 0.6em 0 #fff, 3.1em 1.3em 0 0.01em #fff, -0.6em 0.4em 0 #fff;
  animation-delay: -1.3s;
}
@keyframes tgl-day-night-toggle-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
/* night */
.tgl-day-night-toggle input:checked + .tgl-day-night-toggle-sky {
  background-color: color-mix(in srgb, var(--c) 22%, #0b1120);
}
.tgl-day-night-toggle input:checked + .tgl-day-night-toggle-sky .tgl-day-night-toggle-orb { transform: translateX(4em); }
.tgl-day-night-toggle input:checked + .tgl-day-night-toggle-sky .tgl-day-night-toggle-moon { transform: translateX(0); }
.tgl-day-night-toggle input:checked + .tgl-day-night-toggle-sky .tgl-day-night-toggle-clouds { transform: translateY(2.2em); }
.tgl-day-night-toggle input:checked + .tgl-day-night-toggle-sky .tgl-day-night-toggle-stars {
  opacity: 1;
  transform: translateY(0);
}
/* the orb leans toward the other side on hover */
.tgl-day-night-toggle:hover .tgl-day-night-toggle-orb { transform: translateX(0.2em); }
.tgl-day-night-toggle:hover input:checked + .tgl-day-night-toggle-sky .tgl-day-night-toggle-orb { transform: translateX(3.8em); }
.tgl-day-night-toggle input:focus-visible + .tgl-day-night-toggle-sky {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-dark-mode-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.9em;
}
.tgl-dark-mode-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-dark-mode-toggle-track {
  position: relative;
  display: block;
  width: 3.6em;
  height: 2em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--c) 22%, #fff);
  box-shadow: inset 0 0.08em 0.2em rgba(15, 23, 42, 0.2);
  transition: background-color 0.5s ease;
}
/* the sun is a full inset shadow; the moon is the same shadow pushed off-center */
.tgl-dark-mode-toggle-knob {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.75em #f59e0b, 0 0 0.45em rgba(245, 158, 11, 0.55);
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.2, 1.2), box-shadow 0.5s ease;
}
.tgl-dark-mode-toggle-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  box-sizing: border-box;
  width: 6em;
  height: 4.2em;
  padding: 0.55em 0.6em;
  border-radius: 0.55em;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 0.3em 0.8em rgba(15, 23, 42, 0.14);
}
/* night layer, revealed in a circle that grows from the switch side */
.tgl-dark-mode-toggle-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0f172a;
  clip-path: circle(0% at 0% 50%);
  transition: clip-path 0.7s cubic-bezier(0.6, 0, 0.3, 1);
}
.tgl-dark-mode-toggle-bar,
.tgl-dark-mode-toggle-line {
  position: relative;
  display: block;
  border-radius: 0.2em;
}
.tgl-dark-mode-toggle-bar {
  width: 55%;
  height: 0.55em;
  margin-bottom: 0.1em;
  background: var(--c);
}
.tgl-dark-mode-toggle-line {
  height: 0.28em;
  background: #e2e8f0;
  transition: background-color 0.3s ease 0.15s;
}
.tgl-dark-mode-toggle-line:nth-child(3) { width: 80%; }
.tgl-dark-mode-toggle-line:nth-child(4) { width: 64%; }
.tgl-dark-mode-toggle input:checked + .tgl-dark-mode-toggle-track {
  background: color-mix(in srgb, var(--c) 18%, #0f172a);
}
.tgl-dark-mode-toggle input:checked + .tgl-dark-mode-toggle-track .tgl-dark-mode-toggle-knob {
  transform: translateX(1.6em) rotate(-20deg);
  box-shadow: inset 0.45em -0.28em 0 0 #e2e8f0, 0 0 0.45em rgba(226, 232, 240, 0);
}
.tgl-dark-mode-toggle input:checked ~ .tgl-dark-mode-toggle-page { border-color: rgba(255, 255, 255, 0.14); }
.tgl-dark-mode-toggle input:checked ~ .tgl-dark-mode-toggle-page::before { clip-path: circle(150% at 0% 50%); }
.tgl-dark-mode-toggle input:checked ~ .tgl-dark-mode-toggle-page .tgl-dark-mode-toggle-line { background: #334155; }
.tgl-dark-mode-toggle input:focus-visible + .tgl-dark-mode-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
/* to theme a real page: :root:has(#theme-toggle:checked) { --bg: #0f172a; --text: #e2e8f0; } */

.tgl-sun-moon-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-sun-moon-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-sun-moon-toggle-btn {
  --bg: color-mix(in srgb, var(--c) 12%, #fff);
  position: relative;
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  overflow: hidden;
  color: #f59e0b;
  background: var(--bg);
  box-shadow: 0 0.12em 0.35em rgba(15, 23, 42, 0.18), inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: background-color 0.5s ease, color 0.5s ease;
}
.tgl-sun-moon-toggle-rays,
.tgl-sun-moon-toggle-core,
.tgl-sun-moon-toggle-bite {
  position: absolute;
  border-radius: 50%;
}
/* eight rays: a conic gradient masked down to a ring */
.tgl-sun-moon-toggle-rays {
  width: 2.1em;
  height: 2.1em;
  background: repeating-conic-gradient(from -6deg, currentColor 0 12deg, transparent 0 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0.66em, #000 0.68em 1em, transparent 1.02em);
  mask: radial-gradient(circle, transparent 0.66em, #000 0.68em 1em, transparent 1.02em);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}
.tgl-sun-moon-toggle-core {
  width: 1em;
  height: 1em;
  background: currentColor;
  transition: transform 0.5s cubic-bezier(0.4, 1.5, 0.5, 1);
}
.tgl-sun-moon-toggle-bite {
  width: 1.15em;
  height: 1.15em;
  background: var(--bg);
  transform: translate(1.7em, -1.7em);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease;
}
.tgl-sun-moon-toggle input:checked + .tgl-sun-moon-toggle-btn {
  --bg: color-mix(in srgb, var(--c) 25%, #0f172a);
  color: #fde68a;
}
.tgl-sun-moon-toggle input:checked + .tgl-sun-moon-toggle-btn .tgl-sun-moon-toggle-rays {
  transform: rotate(90deg) scale(0.5);
  opacity: 0;
}
.tgl-sun-moon-toggle input:checked + .tgl-sun-moon-toggle-btn .tgl-sun-moon-toggle-core { transform: scale(1.55); }
.tgl-sun-moon-toggle input:checked + .tgl-sun-moon-toggle-btn .tgl-sun-moon-toggle-bite { transform: translate(0.42em, -0.38em); }
.tgl-sun-moon-toggle:hover .tgl-sun-moon-toggle-rays { transform: rotate(22.5deg); }
.tgl-sun-moon-toggle input:focus-visible + .tgl-sun-moon-toggle-btn {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-sunset-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-sunset-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-sunset-toggle-scene {
  position: relative;
  display: block;
  width: 7.2em;
  height: 3.2em;
  border-radius: 1.6em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 60%, #bae6fd), #fef3c7);
  box-shadow: inset 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
}
.tgl-sunset-toggle-night {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #0b1026, color-mix(in srgb, var(--c) 35%, #1e1b4b));
  opacity: 0;
  transition: opacity 0.9s ease 0.1s;
}
.tgl-sunset-toggle-night::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 2.6em;
  width: 0.12em;
  height: 0.12em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0.9em 0.4em 0 #fff, 1.8em -0.1em 0 0.02em #fff, 2.7em 0.6em 0 #fff, 3.5em 0.15em 0 0.02em #fff, 1.2em 1.1em 0 #fff, -1.2em 0.8em 0 #fff;
}
/* the arm pivots under the middle of the horizon */
.tgl-sunset-toggle-arm {
  position: absolute;
  left: 50%;
  top: 4.2em;
  width: 0;
  height: 0;
  transform: rotate(-30deg);
  transition: transform 1.1s cubic-bezier(0.55, 0, 0.25, 1);
}
.tgl-sunset-toggle-sun,
.tgl-sunset-toggle-moon {
  position: absolute;
  border-radius: 50%;
}
.tgl-sunset-toggle-sun {
  left: -0.55em;
  top: -3.55em;
  width: 1.1em;
  height: 1.1em;
  background: radial-gradient(circle at 40% 40%, #fff7cc, #fcd34d 55%, #f59e0b);
  box-shadow: 0 0 0.6em 0.15em rgba(252, 211, 77, 0.6);
}
.tgl-sunset-toggle-moon {
  left: -0.5em;
  top: 2.5em;
  width: 1em;
  height: 1em;
  background:
    radial-gradient(circle at 35% 40%, #cbd5e1 0 0.12em, transparent 0.14em),
    radial-gradient(circle at 62% 65%, #cbd5e1 0 0.16em, transparent 0.18em),
    #f1f5f9;
  box-shadow: 0 0 0.5em 0.05em rgba(241, 245, 249, 0.45);
}
.tgl-sunset-toggle-hills::before,
.tgl-sunset-toggle-hills::after {
  content: "";
  position: absolute;
  height: 3em;
  border-radius: 50%;
  transition: background-color 0.9s ease;
}
.tgl-sunset-toggle-hills::before {
  left: -1.2em;
  top: 2.2em;
  width: 5.4em;
  background-color: #86d99b;
}
.tgl-sunset-toggle-hills::after {
  right: -1.5em;
  top: 2.45em;
  width: 6.2em;
  background-color: #3fae63;
}
.tgl-sunset-toggle input:checked + .tgl-sunset-toggle-scene .tgl-sunset-toggle-night { opacity: 1; }
.tgl-sunset-toggle input:checked + .tgl-sunset-toggle-scene .tgl-sunset-toggle-arm { transform: rotate(150deg); }
.tgl-sunset-toggle input:checked + .tgl-sunset-toggle-scene .tgl-sunset-toggle-hills::before { background-color: #23364f; }
.tgl-sunset-toggle input:checked + .tgl-sunset-toggle-scene .tgl-sunset-toggle-hills::after { background-color: #15253a; }
.tgl-sunset-toggle input:focus-visible + .tgl-sunset-toggle-scene {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-light-bulb-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.4em;
}
.tgl-light-bulb-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-light-bulb-toggle-track {
  position: relative;
  display: block;
  width: 3.2em;
  height: 1.8em;
  border-radius: 0.9em;
  background: color-mix(in srgb, currentColor 18%, transparent);
  transition: background-color 0.3s ease;
}
.tgl-light-bulb-toggle-track::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.3);
  transition: transform 0.35s cubic-bezier(0.4, 1.5, 0.5, 1);
}
.tgl-light-bulb-toggle-bulb {
  display: block;
  width: 3.4em;
  height: 3.4em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: filter 0.4s ease;
}
.tgl-light-bulb-toggle-glass {
  fill: color-mix(in srgb, currentColor 7%, transparent);
  transition: fill 0.3s ease;
}
.tgl-light-bulb-toggle-filament {
  stroke: color-mix(in srgb, currentColor 45%, transparent);
  stroke-width: 1.2;
  transition: stroke 0.3s ease;
}
.tgl-light-bulb-toggle-ray {
  stroke: #facc15;
  stroke-width: 2;
  stroke-dasharray: 4 6;
  stroke-dashoffset: 5;
  transition: stroke-dashoffset 0.25s ease;
}
.tgl-light-bulb-toggle input:checked + .tgl-light-bulb-toggle-track { background: var(--c); }
.tgl-light-bulb-toggle input:checked + .tgl-light-bulb-toggle-track::before { transform: translateX(1.4em); }
.tgl-light-bulb-toggle input:checked ~ .tgl-light-bulb-toggle-bulb { filter: drop-shadow(0 0 0.35em rgba(250, 204, 21, 0.75)); }
.tgl-light-bulb-toggle input:checked ~ .tgl-light-bulb-toggle-bulb .tgl-light-bulb-toggle-glass { fill: #fde047; }
.tgl-light-bulb-toggle input:checked ~ .tgl-light-bulb-toggle-bulb .tgl-light-bulb-toggle-filament { stroke: #b45309; }
.tgl-light-bulb-toggle input:checked ~ .tgl-light-bulb-toggle-bulb .tgl-light-bulb-toggle-ray {
  stroke-dashoffset: 0;
  transition-delay: calc(0.12s + var(--i) * 0.05s);
}
.tgl-light-bulb-toggle input:focus-visible + .tgl-light-bulb-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-wall-light-switch {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-wall-light-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-wall-light-switch-plate {
  position: relative;
  display: block;
  width: 3.4em;
  height: 5.4em;
  border-radius: 0.45em;
  background: linear-gradient(150deg, #fafaf9, #e7e5e4);
  box-shadow:
    0 0.25em 0.5em rgba(0, 0, 0, 0.2),
    0 0.04em 0.1em rgba(0, 0, 0, 0.25),
    inset 0 0.05em 0 #fff,
    inset 0 -0.08em 0.12em rgba(0, 0, 0, 0.08),
    0 0 0 0 rgba(253, 224, 71, 0);
  transition: box-shadow 0.4s ease;
}
/* two screws */
.tgl-wall-light-switch-plate::before,
.tgl-wall-light-switch-plate::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.2em);
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background:
    linear-gradient(35deg, transparent 43%, #78716c 43% 57%, transparent 57%),
    radial-gradient(circle at 35% 35%, #f5f5f4, #a8a29e);
  box-shadow: 0 0.03em 0.05em rgba(0, 0, 0, 0.3);
}
.tgl-wall-light-switch-plate::before { top: 0.45em; }
.tgl-wall-light-switch-plate::after { bottom: 0.45em; transform: rotate(80deg); }
.tgl-wall-light-switch-slot {
  position: absolute;
  inset: 0;
  display: block;
  width: 1.2em;
  height: 2.5em;
  margin: auto;
  border-radius: 0.3em;
  background: linear-gradient(#d6d3d1, #f5f5f4);
  box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.35), 0 0.04em 0 #fff;
}
/* locator LED: lit while the light is off */
.tgl-wall-light-switch-slot::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.1em);
  top: calc(100% + 0.28em);
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0.25em var(--c);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.tgl-wall-light-switch-lever {
  position: absolute;
  left: 0.25em;
  top: 0.625em;
  width: 0.7em;
  height: 1.25em;
  border-radius: 0.35em;
  background: linear-gradient(#fff, #d6d3d1);
  box-shadow: 0 0.35em 0.25em rgba(0, 0, 0, 0.3), inset 0 -0.06em 0.06em rgba(0, 0, 0, 0.15);
  transform: perspective(3em) translateY(0.45em) rotateX(45deg);
  transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.28s ease;
}
/* the underside is darker: fades in when the lever points up */
.tgl-wall-light-switch-lever::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(#a8a29e, #e7e5e4);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tgl-wall-light-switch input:checked + .tgl-wall-light-switch-plate {
  box-shadow:
    0 0.25em 0.5em rgba(0, 0, 0, 0.2),
    0 0.04em 0.1em rgba(0, 0, 0, 0.25),
    inset 0 0.05em 0 #fff,
    inset 0 -0.08em 0.12em rgba(0, 0, 0, 0.08),
    0 0 1em 0.2em rgba(253, 224, 71, 0.55);
}
.tgl-wall-light-switch input:checked + .tgl-wall-light-switch-plate .tgl-wall-light-switch-lever {
  transform: perspective(3em) translateY(-0.45em) rotateX(-45deg);
  box-shadow: 0 0.12em 0.2em rgba(0, 0, 0, 0.25), inset 0 -0.06em 0.06em rgba(0, 0, 0, 0.15);
}
.tgl-wall-light-switch input:checked + .tgl-wall-light-switch-plate .tgl-wall-light-switch-lever::before { opacity: 1; }
.tgl-wall-light-switch input:checked + .tgl-wall-light-switch-plate .tgl-wall-light-switch-slot::after {
  background: #d6d3d1;
  box-shadow: 0 0 0 transparent;
}
.tgl-wall-light-switch input:focus-visible + .tgl-wall-light-switch-plate {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-pull-cord-lamp {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-pull-cord-lamp input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-pull-cord-lamp-lamp {
  position: relative;
  display: block;
  width: 7em;
  height: 7.4em;
}
/* ceiling cable and cap */
.tgl-pull-cord-lamp-lamp::before {
  content: "";
  position: absolute;
  left: calc(50% - 0.05em);
  top: 0.1em;
  width: 0.1em;
  height: 1.1em;
  background: color-mix(in srgb, currentColor 55%, transparent);
}
.tgl-pull-cord-lamp-lamp::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.4em);
  top: 1em;
  width: 0.8em;
  height: 0.4em;
  border-radius: 0.2em 0.2em 0 0;
  background: color-mix(in srgb, var(--c) 60%, #000);
}
.tgl-pull-cord-lamp-shade {
  position: absolute;
  left: 1.4em;
  top: 1.3em;
  width: 4.2em;
  height: 1.8em;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c) 65%, #000),
    var(--c) 35%,
    color-mix(in srgb, var(--c) 55%, #fff) 50%,
    var(--c) 65%,
    color-mix(in srgb, var(--c) 65%, #000));
}
.tgl-pull-cord-lamp-bulb {
  position: absolute;
  left: calc(50% - 0.55em);
  top: 2.5em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: #d6d3d1;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.tgl-pull-cord-lamp-beam {
  position: absolute;
  left: 0.2em;
  right: 0.2em;
  top: 3em;
  height: 4.3em;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(253, 224, 71, 0.6), rgba(253, 224, 71, 0));
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* the cord starts behind the shade, so pulling it down never shows a gap */
.tgl-pull-cord-lamp-cord {
  position: absolute;
  left: 4.85em;
  top: 2.3em;
  width: 0.08em;
  height: 2.4em;
  background: color-mix(in srgb, currentColor 60%, transparent);
  transition: transform 0.55s cubic-bezier(0.3, 1.9, 0.5, 1);
}
.tgl-pull-cord-lamp-cord::after {
  content: "";
  position: absolute;
  left: -0.2em;
  bottom: -0.55em;
  width: 0.48em;
  height: 0.62em;
  border-radius: 45% 45% 50% 50%;
  background: color-mix(in srgb, var(--c) 70%, #000);
}
.tgl-pull-cord-lamp:hover .tgl-pull-cord-lamp-cord { transform: translateY(0.12em); }
.tgl-pull-cord-lamp:active .tgl-pull-cord-lamp-cord {
  transform: translateY(0.6em);
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}
.tgl-pull-cord-lamp input:checked + .tgl-pull-cord-lamp-lamp .tgl-pull-cord-lamp-bulb {
  background: #fef9c3;
  box-shadow: 0 0 0.6em 0.2em rgba(253, 224, 71, 0.75);
}
.tgl-pull-cord-lamp input:checked + .tgl-pull-cord-lamp-lamp .tgl-pull-cord-lamp-beam {
  opacity: 1;
  animation: tgl-pull-cord-lamp-flicker 0.6s linear;
}
@keyframes tgl-pull-cord-lamp-flicker {
  0% { opacity: 0; }
  10% { opacity: 0.8; }
  20% { opacity: 0.15; }
  35% { opacity: 1; }
  45% { opacity: 0.5; }
  60%, 100% { opacity: 1; }
}
.tgl-pull-cord-lamp input:focus-visible + .tgl-pull-cord-lamp-lamp {
  outline: 2px solid var(--c);
  outline-offset: 0.1em;
  border-radius: 0.6em;
}

.tgl-power-lever-switch {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-power-lever-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-power-lever-switch-rig {
  position: relative;
  display: block;
  width: 7.6em;
  height: 5em;
}
/* base block and the hinge post */
.tgl-power-lever-switch-rig::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0.3em;
  bottom: 0.2em;
  height: 1.3em;
  border-radius: 0.4em;
  background: linear-gradient(#475569, #1e293b);
  box-shadow: 0 0.2em 0.35em rgba(0, 0, 0, 0.3), inset 0 0.08em 0 rgba(255, 255, 255, 0.18);
}
.tgl-power-lever-switch-rig::after {
  content: "";
  position: absolute;
  left: 0.7em;
  bottom: 1.5em;
  z-index: 1;
  width: 0.55em;
  height: 1.1em;
  border-radius: 0.12em 0.12em 0 0;
  background: linear-gradient(90deg, #92400e, #f59e0b, #92400e);
}
.tgl-power-lever-switch-clip {
  position: absolute;
  left: 5.05em;
  bottom: 1.5em;
  z-index: 3;
  width: 0.7em;
  height: 1.1em;
  border-radius: 0.12em 0.12em 0 0;
  background: linear-gradient(90deg, #92400e, #fbbf24 28%, #451a03 40% 60%, #fbbf24 72%, #92400e);
}
.tgl-power-lever-switch-blade {
  position: absolute;
  left: 0.82em;
  bottom: 2.18em;
  z-index: 2;
  width: 4.9em;
  height: 0.34em;
  border-radius: 0.17em;
  background: linear-gradient(#fcd34d, #d97706 55%, #92400e);
  transform-origin: 0.15em 50%;
  transform: rotate(-20deg);
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.tgl-power-lever-switch-blade::before {
  content: "";
  position: absolute;
  left: -0.05em;
  top: -0.05em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: #fde68a;
  box-shadow: inset 0 0 0 0.08em #b45309;
}
/* the handle takes the accent color */
.tgl-power-lever-switch-blade::after {
  content: "";
  position: absolute;
  left: 100%;
  top: calc(50% - 0.31em);
  width: 1.1em;
  height: 0.62em;
  border-radius: 0.31em;
  background: linear-gradient(color-mix(in srgb, var(--c) 70%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 60%, #000));
  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.3);
}
.tgl-power-lever-switch-lamp {
  position: absolute;
  left: 2.7em;
  bottom: 0.55em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #52525b;
  box-shadow: inset 0 0.06em 0.1em rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.tgl-power-lever-switch-spark {
  position: absolute;
  left: 4.6em;
  bottom: 1.55em;
  z-index: 4;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: repeating-conic-gradient(from -6deg, #fde047 0 12deg, transparent 0 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0.2em, #000 0.22em 0.75em, transparent 0.77em);
  mask: radial-gradient(circle, transparent 0.2em, #000 0.22em 0.75em, transparent 0.77em);
  filter: drop-shadow(0 0 0.15em #f59e0b);
  opacity: 0;
}
.tgl-power-lever-switch input:checked + .tgl-power-lever-switch-rig .tgl-power-lever-switch-blade {
  transform: rotate(0deg);
  transition: none;
  animation: tgl-power-lever-switch-close 0.55s both;
}
.tgl-power-lever-switch input:checked + .tgl-power-lever-switch-rig .tgl-power-lever-switch-spark {
  animation: tgl-power-lever-switch-spark 0.45s ease-out 0.28s both;
}
.tgl-power-lever-switch input:checked + .tgl-power-lever-switch-rig .tgl-power-lever-switch-lamp {
  background: var(--c);
  box-shadow: 0 0 0.5em 0.1em var(--c);
  transition-delay: 0.3s;
}
@keyframes tgl-power-lever-switch-close {
  0% { transform: rotate(-20deg); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  55% { transform: rotate(1deg); animation-timing-function: ease-out; }
  72% { transform: rotate(-3deg); animation-timing-function: ease-in-out; }
  88% { transform: rotate(0.5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes tgl-power-lever-switch-spark {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) rotate(25deg); }
}
.tgl-power-lever-switch input:focus-visible + .tgl-power-lever-switch-rig {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
  border-radius: 0.4em;
}

.tgl-power-button-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-power-button-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-power-button-toggle-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: linear-gradient(145deg, #3f3f46, #18181b);
  box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.35), inset 0 0.06em 0.04em rgba(255, 255, 255, 0.18);
}
/* the light groove, and a glow layer that breathes when on */
.tgl-power-button-toggle-ring::before,
.tgl-power-button-toggle-ring::after {
  content: "";
  position: absolute;
  inset: 0.18em;
  border-radius: 50%;
}
.tgl-power-button-toggle-ring::before {
  border: 0.12em solid color-mix(in srgb, var(--c) 22%, #27272a);
  transition: border-color 0.3s ease;
}
.tgl-power-button-toggle-ring::after {
  box-shadow: 0 0 0.55em var(--c), inset 0 0 0.35em var(--c);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tgl-power-button-toggle-cap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.1em;
  height: 3.1em;
  border-radius: 50%;
  background: linear-gradient(160deg, #52525b, #27272a 70%);
  box-shadow: 0 0.18em 0.25em rgba(0, 0, 0, 0.55), inset 0 0.07em 0.05em rgba(255, 255, 255, 0.22), inset 0 -0.1em 0.2em rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tgl-power-button-toggle-icon {
  display: block;
  width: 1.45em;
  height: 1.45em;
  fill: none;
  stroke: #71717a;
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: stroke 0.3s ease, filter 0.3s ease;
}
.tgl-power-button-toggle-arc { stroke-dasharray: 100; }
.tgl-power-button-toggle:active .tgl-power-button-toggle-cap { transform: scale(0.93); }
.tgl-power-button-toggle input:checked + .tgl-power-button-toggle-ring::before { border-color: var(--c); }
.tgl-power-button-toggle input:checked + .tgl-power-button-toggle-ring::after {
  opacity: 1;
  animation: tgl-power-button-toggle-breathe 2.4s ease-in-out infinite;
}
.tgl-power-button-toggle input:checked + .tgl-power-button-toggle-ring .tgl-power-button-toggle-cap {
  transform: translateY(0.04em) scale(0.96);
  box-shadow: 0 0.06em 0.12em rgba(0, 0, 0, 0.55), inset 0 0.07em 0.05em rgba(255, 255, 255, 0.12), inset 0 -0.1em 0.2em rgba(0, 0, 0, 0.4);
}
.tgl-power-button-toggle input:checked + .tgl-power-button-toggle-ring .tgl-power-button-toggle-icon {
  stroke: var(--c);
  filter: drop-shadow(0 0 0.2em var(--c));
}
.tgl-power-button-toggle input:checked + .tgl-power-button-toggle-ring .tgl-power-button-toggle-arc {
  animation: tgl-power-button-toggle-draw 0.7s cubic-bezier(0.6, 0, 0.2, 1);
}
@keyframes tgl-power-button-toggle-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes tgl-power-button-toggle-draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.tgl-power-button-toggle input:focus-visible + .tgl-power-button-toggle-ring {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-wifi-toggle-tile {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
}
.tgl-wifi-toggle-tile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-wifi-toggle-tile-tile {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 1.4em 0.45em 0.45em;
  border-radius: 1.6em;
  background: color-mix(in srgb, currentColor 10%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tgl-wifi-toggle-tile-icon {
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 16%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.4, 1.8, 0.5, 1);
}
.tgl-wifi-toggle-tile-icon svg {
  display: block;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.tgl-wifi-toggle-tile-arc {
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.tgl-wifi-toggle-tile-dot {
  fill: currentColor;
  stroke: none;
}
.tgl-wifi-toggle-tile-text {
  display: grid;
  line-height: 1.2;
}
.tgl-wifi-toggle-tile-title {
  font-size: 0.72em;
  font-weight: 600;
}
.tgl-wifi-toggle-tile-status {
  display: grid;
  height: 1.2em;
  overflow: hidden;
  font-size: 0.62em;
  opacity: 0.75;
}
.tgl-wifi-toggle-tile-off,
.tgl-wifi-toggle-tile-on {
  grid-area: 1 / 1;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.tgl-wifi-toggle-tile-on { transform: translateY(110%); }
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile {
  background: var(--c);
  color: #fff;
}
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile .tgl-wifi-toggle-tile-icon {
  background: #fff;
  color: var(--c);
  transform: scale(1.06);
}
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile .tgl-wifi-toggle-tile-arc {
  opacity: 1;
  transition-delay: calc(0.1s + var(--i) * 0.1s);
}
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile .tgl-wifi-toggle-tile-off { transform: translateY(-110%); }
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile .tgl-wifi-toggle-tile-on { transform: translateY(0); }
.tgl-wifi-toggle-tile:active .tgl-wifi-toggle-tile-tile { transform: scale(0.97); }
.tgl-wifi-toggle-tile input:focus-visible + .tgl-wifi-toggle-tile-tile {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-airplane-mode-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-airplane-mode-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-airplane-mode-toggle-track {
  position: relative;
  display: block;
  width: 6em;
  height: 2.6em;
  border-radius: 1.3em;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 0.4s ease;
}
/* two clouds drift past while flying */
.tgl-airplane-mode-toggle-track::before,
.tgl-airplane-mode-toggle-track::after {
  content: "";
  position: absolute;
  left: 100%;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  --cloud: color-mix(in srgb, var(--c) 45%, #fff);
  background: var(--cloud);
  box-shadow: 0.35em -0.18em 0 0.06em var(--cloud), 0.7em 0 0 0 var(--cloud);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tgl-airplane-mode-toggle-track::before { top: 0.5em; }
.tgl-airplane-mode-toggle-track::after { top: 1.65em; }
.tgl-airplane-mode-toggle-trail {
  position: absolute;
  left: 0.8em;
  top: calc(50% - 0.06em);
  width: 3.4em;
  height: 0.12em;
  background: repeating-linear-gradient(90deg, #fff 0 0.3em, transparent 0 0.55em);
  opacity: 0.8;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.6, 0, 0.3, 1);
}
.tgl-airplane-mode-toggle-plane {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  color: color-mix(in srgb, currentColor 65%, transparent);
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.3, 1), color 0.3s ease;
}
.tgl-airplane-mode-toggle-plane svg {
  display: block;
  width: 1.6em;
  height: 1.6em;
  fill: currentColor;
  filter: drop-shadow(0 0.04em 0.04em rgba(0, 0, 0, 0.25));
}
.tgl-airplane-mode-toggle input:checked + .tgl-airplane-mode-toggle-track { background: var(--c); }
.tgl-airplane-mode-toggle input:checked + .tgl-airplane-mode-toggle-track::before,
.tgl-airplane-mode-toggle input:checked + .tgl-airplane-mode-toggle-track::after {
  opacity: 1;
  animation: tgl-airplane-mode-toggle-drift 2.6s linear infinite;
}
.tgl-airplane-mode-toggle input:checked + .tgl-airplane-mode-toggle-track::after { animation-delay: -1.3s; }
.tgl-airplane-mode-toggle input:checked + .tgl-airplane-mode-toggle-track .tgl-airplane-mode-toggle-trail {
  transform: scaleX(1);
  transition-delay: 0.1s;
}
.tgl-airplane-mode-toggle input:checked + .tgl-airplane-mode-toggle-track .tgl-airplane-mode-toggle-plane {
  transform: translateX(3.4em);
  color: #fff;
}
.tgl-airplane-mode-toggle input:checked + .tgl-airplane-mode-toggle-track .tgl-airplane-mode-toggle-plane svg {
  animation: tgl-airplane-mode-toggle-climb 0.7s cubic-bezier(0.4, 0, 0.3, 1);
}
@keyframes tgl-airplane-mode-toggle-climb {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0.04em 0.04em rgba(0, 0, 0, 0.25)); }
  50% { transform: scale(1.3); filter: drop-shadow(0.15em 0.35em 0.1em rgba(0, 0, 0, 0.2)); }
}
@keyframes tgl-airplane-mode-toggle-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-8em); }
}
.tgl-airplane-mode-toggle input:focus-visible + .tgl-airplane-mode-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-sound-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-sound-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-sound-toggle-track {
  position: relative;
  display: block;
  width: 6em;
  height: 2.6em;
  border-radius: 1.3em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 0.35s ease;
}
.tgl-sound-toggle-bars {
  position: absolute;
  left: 1.05em;
  top: 0.7em;
  display: flex;
  align-items: center;
  gap: 0.2em;
  height: 1.2em;
}
.tgl-sound-toggle-bar {
  display: block;
  width: 0.22em;
  height: 100%;
  border-radius: 0.11em;
  background: #fff;
  opacity: 0;
  transform: scaleY(0.2);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tgl-sound-toggle-knob {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #fff;
  color: #6b7280;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
  transition: transform 0.45s cubic-bezier(0.5, 1.3, 0.4, 1), color 0.3s ease;
}
.tgl-sound-toggle-knob svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tgl-sound-toggle-speaker { fill: currentColor; }
.tgl-sound-toggle-x {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.tgl-sound-toggle-wave {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.05;
  transition: stroke-dashoffset 0.3s ease;
}
.tgl-sound-toggle input:checked + .tgl-sound-toggle-track { background: var(--c); }
.tgl-sound-toggle input:checked + .tgl-sound-toggle-track .tgl-sound-toggle-knob {
  transform: translateX(3.4em);
  color: var(--c);
}
.tgl-sound-toggle input:checked + .tgl-sound-toggle-track .tgl-sound-toggle-x {
  opacity: 0;
  transform: scale(0.3);
}
.tgl-sound-toggle input:checked + .tgl-sound-toggle-track .tgl-sound-toggle-wave {
  stroke-dashoffset: 0;
  transition-delay: calc(0.2s + var(--i) * 0.12s);
}
.tgl-sound-toggle input:checked + .tgl-sound-toggle-track .tgl-sound-toggle-bar {
  opacity: 1;
  animation: tgl-sound-toggle-eq calc(0.5s + var(--i) * 0.11s) ease-in-out calc(var(--i) * -0.29s) infinite alternate;
}
@keyframes tgl-sound-toggle-eq {
  from { transform: scaleY(0.25); }
  to { transform: scaleY(1); }
}
.tgl-sound-toggle input:focus-visible + .tgl-sound-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-mic-mute-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-mic-mute-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-mic-mute-toggle-btn {
  --bg: #ef4444;
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  color: #fff;
  background: var(--bg);
  box-shadow: 0 0.2em 0.5em color-mix(in srgb, var(--bg) 40%, transparent);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* ripples while the mic is live */
.tgl-mic-mute-toggle-btn::before,
.tgl-mic-mute-toggle-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.12em solid var(--c);
  opacity: 0;
}
.tgl-mic-mute-toggle-btn svg {
  position: relative;
  display: block;
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.tgl-mic-mute-toggle-capsule {
  fill: currentColor;
  stroke: none;
}
.tgl-mic-mute-toggle-cut,
.tgl-mic-mute-toggle-slash {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
}
.tgl-mic-mute-toggle-cut {
  stroke: var(--bg);
  stroke-width: 5.5;
}
.tgl-mic-mute-toggle input:checked + .tgl-mic-mute-toggle-btn { --bg: var(--c); }
.tgl-mic-mute-toggle input:checked + .tgl-mic-mute-toggle-btn::before,
.tgl-mic-mute-toggle input:checked + .tgl-mic-mute-toggle-btn::after {
  animation: tgl-mic-mute-toggle-ripple 2s cubic-bezier(0, 0.4, 0.4, 1) infinite;
}
.tgl-mic-mute-toggle input:checked + .tgl-mic-mute-toggle-btn::after { animation-delay: -1s; }
.tgl-mic-mute-toggle input:checked + .tgl-mic-mute-toggle-btn .tgl-mic-mute-toggle-cut,
.tgl-mic-mute-toggle input:checked + .tgl-mic-mute-toggle-btn .tgl-mic-mute-toggle-slash {
  stroke-dashoffset: -1.05;
}
@keyframes tgl-mic-mute-toggle-ripple {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}
.tgl-mic-mute-toggle:active .tgl-mic-mute-toggle-btn { transform: scale(0.95); }
.tgl-mic-mute-toggle input:focus-visible + .tgl-mic-mute-toggle-btn {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-notification-bell-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-notification-bell-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-notification-bell-toggle-track {
  position: relative;
  display: block;
  width: 5.6em;
  height: 2.6em;
  border-radius: 1.3em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 0.35s ease;
}
.tgl-notification-bell-toggle-knob {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #fff;
  color: #9ca3af;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
  transition: transform 0.45s cubic-bezier(0.5, 1.3, 0.4, 1), color 0.3s ease;
}
.tgl-notification-bell-toggle-knob svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.tgl-notification-bell-toggle-bell {
  fill: currentColor;
  stroke: none;
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.tgl-notification-bell-toggle-clapper {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.tgl-notification-bell-toggle-cut,
.tgl-notification-bell-toggle-slash {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease;
}
.tgl-notification-bell-toggle-cut {
  stroke: #fff;
  stroke-width: 5;
}
.tgl-notification-bell-toggle-badge {
  position: absolute;
  top: 0.2em;
  right: 0.22em;
  width: 0.48em;
  height: 0.48em;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0.09em #fff;
  transform: scale(0);
  transition: transform 0.2s ease;
}
.tgl-notification-bell-toggle input:checked + .tgl-notification-bell-toggle-track { background: var(--c); }
.tgl-notification-bell-toggle input:checked + .tgl-notification-bell-toggle-track .tgl-notification-bell-toggle-knob {
  transform: translateX(3em);
  color: var(--c);
}
.tgl-notification-bell-toggle input:checked + .tgl-notification-bell-toggle-track .tgl-notification-bell-toggle-cut,
.tgl-notification-bell-toggle input:checked + .tgl-notification-bell-toggle-track .tgl-notification-bell-toggle-slash {
  stroke-dashoffset: -1.05;
}
.tgl-notification-bell-toggle input:checked + .tgl-notification-bell-toggle-track .tgl-notification-bell-toggle-bell {
  animation: tgl-notification-bell-toggle-ring 1s ease-in-out 0.3s;
}
.tgl-notification-bell-toggle input:checked + .tgl-notification-bell-toggle-track .tgl-notification-bell-toggle-clapper {
  animation: tgl-notification-bell-toggle-clap 1s ease-in-out 0.34s;
}
.tgl-notification-bell-toggle input:checked + .tgl-notification-bell-toggle-track .tgl-notification-bell-toggle-badge {
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.4, 2, 0.5, 1) 0.35s;
}
@keyframes tgl-notification-bell-toggle-ring {
  0%, 80%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(22deg); }
  20% { transform: rotate(-18deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(6deg); }
  60% { transform: rotate(-3deg); }
  70% { transform: rotate(1deg); }
}
@keyframes tgl-notification-bell-toggle-clap {
  0%, 70%, 100% { transform: translateX(0); }
  10% { transform: translateX(-45%); }
  20% { transform: translateX(45%); }
  30% { transform: translateX(-35%); }
  40% { transform: translateX(25%); }
  50% { transform: translateX(-12%); }
  60% { transform: translateX(5%); }
}
.tgl-notification-bell-toggle input:focus-visible + .tgl-notification-bell-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-lock-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-lock-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-lock-toggle-track {
  position: relative;
  display: block;
  width: 5.6em;
  height: 2.6em;
  border-radius: 1.3em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 0.35s ease;
}
.tgl-lock-toggle-knob {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #fff;
  color: #9ca3af;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
  transition: transform 0.45s cubic-bezier(0.5, 1.3, 0.4, 1), color 0.3s ease;
}
.tgl-lock-toggle-knob svg {
  display: block;
  width: 1.2em;
  height: 1.2em;
  overflow: visible;
}
.tgl-lock-toggle-shackle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 0% 100%;
  transform: translateY(-10%) rotate(-24deg);
  transition: transform 0.3s ease;
}
.tgl-lock-toggle-body { fill: currentColor; }
.tgl-lock-toggle-hole {
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.tgl-lock-toggle input:checked + .tgl-lock-toggle-track { background: var(--c); }
.tgl-lock-toggle input:checked + .tgl-lock-toggle-track .tgl-lock-toggle-knob {
  transform: translateX(3em);
  color: var(--c);
}
/* the shackle snaps shut once the knob has arrived */
.tgl-lock-toggle input:checked + .tgl-lock-toggle-track .tgl-lock-toggle-shackle {
  transform: none;
  transition: transform 0.4s cubic-bezier(0.3, 1.8, 0.5, 1) 0.25s;
}
.tgl-lock-toggle input:focus-visible + .tgl-lock-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-show-password-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.tgl-show-password-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-show-password-toggle-field {
  display: flex;
  align-items: center;
  gap: 0.5em;
  box-sizing: border-box;
  width: 10.5em;
  height: 2.6em;
  padding: 0 0.35em 0 0.9em;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 0.6em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  transition: border-color 0.3s ease;
}
.tgl-show-password-toggle-value {
  position: relative;
  display: grid;
  flex: 1;
  align-items: center;
  height: 1.4em;
  overflow: hidden;
  font-size: 0.95em;
}
.tgl-show-password-toggle-dots,
.tgl-show-password-toggle-text {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: clip-path 0.55s cubic-bezier(0.6, 0, 0.3, 1);
}
.tgl-show-password-toggle-dots {
  letter-spacing: 0.1em;
  clip-path: inset(0 0 0 0);
}
.tgl-show-password-toggle-text {
  letter-spacing: 0.02em;
  clip-path: inset(0 100% 0 0);
}
/* the scan line rides the edge of the wipe */
.tgl-show-password-toggle-value::after {
  content: "";
  position: absolute;
  inset: 0.1em 0;
  background: linear-gradient(90deg, var(--c) 0 0.12em, transparent 0);
  opacity: 0;
}
.tgl-show-password-toggle-eye {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.45em;
  color: color-mix(in srgb, currentColor 60%, transparent);
  transition: color 0.3s ease, background-color 0.2s ease;
}
.tgl-show-password-toggle-eye svg {
  display: block;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tgl-show-password-toggle-open {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(0.1);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.tgl-show-password-toggle-shut { transition: opacity 0.2s ease; }
.tgl-show-password-toggle:hover .tgl-show-password-toggle-eye { background: color-mix(in srgb, currentColor 8%, transparent); }
.tgl-show-password-toggle input:checked + .tgl-show-password-toggle-field .tgl-show-password-toggle-dots { clip-path: inset(0 0 0 100%); }
.tgl-show-password-toggle input:checked + .tgl-show-password-toggle-field .tgl-show-password-toggle-text { clip-path: inset(0 0 0 0); }
.tgl-show-password-toggle input:checked + .tgl-show-password-toggle-field .tgl-show-password-toggle-value::after {
  animation: tgl-show-password-toggle-scan 0.55s cubic-bezier(0.6, 0, 0.3, 1);
}
@keyframes tgl-show-password-toggle-scan {
  0% { transform: translateX(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(96%); opacity: 0; }
}
.tgl-show-password-toggle input:checked + .tgl-show-password-toggle-field .tgl-show-password-toggle-eye { color: var(--c); }
.tgl-show-password-toggle input:checked + .tgl-show-password-toggle-field .tgl-show-password-toggle-open {
  transform: scaleY(1);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.3, 1.8, 0.5, 1), opacity 0.1s ease;
}
.tgl-show-password-toggle input:checked + .tgl-show-password-toggle-field .tgl-show-password-toggle-shut { opacity: 0; }
.tgl-show-password-toggle input:focus-visible + .tgl-show-password-toggle-field {
  border-color: var(--c);
  outline: 2px solid color-mix(in srgb, var(--c) 35%, transparent);
  outline-offset: 0.15em;
}

.tgl-emoji-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-emoji-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-emoji-toggle-track {
  position: relative;
  display: block;
  width: 5.6em;
  height: 2.6em;
  border-radius: 1.3em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 0.35s ease;
}
.tgl-emoji-toggle-face {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fef08a, #facc15 60%, #eab308);
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25), inset 0 -0.1em 0.15em rgba(161, 98, 7, 0.35);
  transition: transform 0.5s cubic-bezier(0.5, 1.3, 0.4, 1);
}
.tgl-emoji-toggle-face > span { position: absolute; }
.tgl-emoji-toggle-eyes,
.tgl-emoji-toggle-brows,
.tgl-emoji-toggle-cheeks {
  left: 0.5em;
  right: 0.5em;
}
.tgl-emoji-toggle-eyes::before,
.tgl-emoji-toggle-eyes::after,
.tgl-emoji-toggle-brows::before,
.tgl-emoji-toggle-brows::after,
.tgl-emoji-toggle-cheeks::before,
.tgl-emoji-toggle-cheeks::after {
  content: "";
  position: absolute;
  top: 0;
}
.tgl-emoji-toggle-eyes::after,
.tgl-emoji-toggle-brows::after,
.tgl-emoji-toggle-cheeks::after { right: 0; }
.tgl-emoji-toggle-eyes { top: 0.66em; }
.tgl-emoji-toggle-eyes::before,
.tgl-emoji-toggle-eyes::after {
  width: 0.22em;
  height: 0.3em;
  border-radius: 50%;
  background: #713f12;
  animation: tgl-emoji-toggle-blink 4s infinite;
}
.tgl-emoji-toggle-brows { top: 0.46em; }
.tgl-emoji-toggle-brows::before,
.tgl-emoji-toggle-brows::after {
  width: 0.34em;
  height: 0.08em;
  border-radius: 0.04em;
  background: #713f12;
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.tgl-emoji-toggle-brows::before { left: -0.06em; transform: rotate(-22deg); }
.tgl-emoji-toggle-brows::after { right: -0.06em; transform: rotate(22deg); }
.tgl-emoji-toggle-cheeks { top: 1.08em; left: 0.28em; right: 0.28em; }
.tgl-emoji-toggle-cheeks::before,
.tgl-emoji-toggle-cheeks::after {
  width: 0.34em;
  height: 0.2em;
  border-radius: 50%;
  background: #fb7185;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tgl-emoji-toggle-mouth {
  left: calc(50% - 0.43em);
  top: 1.02em;
  width: 0.86em;
  height: 0.44em;
  box-sizing: border-box;
  border: 0.1em solid transparent;
  border-bottom-color: #713f12;
  border-radius: 0 0 0.8em 0.8em / 0 0 0.55em 0.55em;
  transform: translateY(0.3em) scale(0.7, -0.6);
  transition: transform 0.4s cubic-bezier(0.5, 1.6, 0.4, 1);
}
.tgl-emoji-toggle-tear {
  top: 0.95em;
  left: 0.52em;
  width: 0.16em;
  height: 0.24em;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #38bdf8;
  animation: tgl-emoji-toggle-drip 1.8s ease-in infinite;
}
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track { background: var(--c); }
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-face { transform: translateX(3em); }
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-mouth { transform: none; }
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-brows::before,
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-brows::after {
  opacity: 0;
  transform: translateY(-0.1em);
}
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-cheeks::before,
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-cheeks::after { opacity: 0.7; }
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-tear {
  opacity: 0;
  animation: none;
}
@keyframes tgl-emoji-toggle-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
}
@keyframes tgl-emoji-toggle-drip {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  20% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(0.6em); opacity: 0; }
}
.tgl-emoji-toggle input:focus-visible + .tgl-emoji-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-heart-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-heart-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-heart-toggle-track {
  position: relative;
  display: block;
  width: 5.6em;
  height: 2.6em;
  border-radius: 1.3em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 0.35s ease;
}
.tgl-heart-toggle-knob {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
  transition: transform 0.45s cubic-bezier(0.5, 1.3, 0.4, 1);
}
.tgl-heart-toggle-knob svg {
  display: block;
  width: 1.2em;
  height: 1.2em;
  overflow: visible;
}
.tgl-heart-toggle-heart {
  fill: transparent;
  stroke: #9ca3af;
  stroke-width: 2;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.tgl-heart-toggle-burst {
  position: absolute;
  top: calc(50% - 0.11em);
  left: calc(50% - 0.11em);
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  --dot: color-mix(in srgb, var(--c) 45%, #fbbf24);
  box-shadow:
    0 -1.25em 0 var(--c), 0.88em -0.88em 0 var(--dot),
    1.25em 0 0 var(--c), 0.88em 0.88em 0 var(--dot),
    0 1.25em 0 var(--c), -0.88em 0.88em 0 var(--dot),
    -1.25em 0 0 var(--c), -0.88em -0.88em 0 var(--dot);
  opacity: 0;
}
.tgl-heart-toggle input:checked + .tgl-heart-toggle-track { background: color-mix(in srgb, var(--c) 35%, transparent); }
.tgl-heart-toggle input:checked + .tgl-heart-toggle-track .tgl-heart-toggle-knob { transform: translateX(3em); }
.tgl-heart-toggle input:checked + .tgl-heart-toggle-track .tgl-heart-toggle-heart {
  fill: var(--c);
  stroke: var(--c);
  transition-delay: 0.3s;
  animation: tgl-heart-toggle-pop 0.45s cubic-bezier(0.3, 0.7, 0.4, 1) 0.3s;
}
.tgl-heart-toggle input:checked + .tgl-heart-toggle-track .tgl-heart-toggle-burst {
  animation: tgl-heart-toggle-burst 0.6s ease-out 0.38s both;
}
@keyframes tgl-heart-toggle-pop {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(0.6); }
  65% { transform: scale(1.3); }
}
@keyframes tgl-heart-toggle-burst {
  0% { transform: scale(0.35); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
.tgl-heart-toggle input:focus-visible + .tgl-heart-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-thumbs-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-thumbs-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-thumbs-toggle-track {
  position: relative;
  display: block;
  width: 5.6em;
  height: 2.6em;
  border-radius: 1.3em;
  background: #f87171;
  transition: background-color 0.4s ease;
}
.tgl-thumbs-toggle-knob {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #fff;
  color: #ef4444;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
  transform: rotate(180deg);
  transition: transform 0.55s cubic-bezier(0.5, 1.4, 0.4, 1), color 0.3s ease;
}
.tgl-thumbs-toggle-knob svg {
  display: block;
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}
.tgl-thumbs-toggle input:checked + .tgl-thumbs-toggle-track { background: var(--c); }
.tgl-thumbs-toggle input:checked + .tgl-thumbs-toggle-track .tgl-thumbs-toggle-knob {
  transform: translateX(3em) rotate(360deg);
  color: var(--c);
}
.tgl-thumbs-toggle:active .tgl-thumbs-toggle-knob svg { transform: scale(0.85); }
.tgl-thumbs-toggle input:focus-visible + .tgl-thumbs-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-cat-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-cat-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-cat-toggle-track {
  position: relative;
  display: block;
  width: 6em;
  height: 2.6em;
  border-radius: 1.3em;
  background: color-mix(in srgb, var(--c) 25%, #1e293b);
  transition: background-color 0.4s ease;
}
.tgl-cat-toggle-cat {
  position: absolute;
  top: 0.35em;
  left: 0.3em;
  z-index: 0;
  width: 2em;
  height: 1.9em;
  transition: transform 0.55s cubic-bezier(0.5, 1.4, 0.4, 1);
}
.tgl-cat-toggle-cat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(ellipse 0.8em 0.5em at 50% 80%, #fed7aa 98%, transparent), #fb923c;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.3);
}
.tgl-cat-toggle-cat > span { position: absolute; }
/* ears sit behind the head */
.tgl-cat-toggle-ears {
  inset: 0;
  z-index: -1;
}
.tgl-cat-toggle-ears::before,
.tgl-cat-toggle-ears::after {
  content: "";
  position: absolute;
  top: -0.32em;
  width: 0.8em;
  height: 0.9em;
  clip-path: polygon(0 100%, 35% 0, 100% 100%);
  background: linear-gradient(#ea580c, #fb923c);
  transform-origin: 50% 100%;
  transition: transform 0.35s cubic-bezier(0.4, 1.8, 0.5, 1);
}
.tgl-cat-toggle-ears::before { left: 0.05em; transform: rotate(-38deg); }
.tgl-cat-toggle-ears::after { right: 0.05em; transform: scaleX(-1) rotate(-38deg); }
.tgl-cat-toggle-eyes {
  top: 0.72em;
  left: 0.48em;
  right: 0.48em;
  height: 0.34em;
}
.tgl-cat-toggle-eyes::before,
.tgl-cat-toggle-eyes::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.3em;
  height: 0.34em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 0.05em, #1f2937 0.06em);
  transform: scaleY(0.15);
  transition: transform 0.25s ease;
}
.tgl-cat-toggle-eyes::after { right: 0; }
.tgl-cat-toggle-nose {
  left: calc(50% - 0.12em);
  top: 1.12em;
  width: 0.24em;
  height: 0.16em;
  background: #f472b6;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tgl-cat-toggle-whiskers {
  top: 1.2em;
  left: -0.18em;
  right: -0.18em;
}
.tgl-cat-toggle-whiskers::before,
.tgl-cat-toggle-whiskers::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.45em;
  height: 0.05em;
  background: #7c2d12;
  box-shadow: 0 0.16em 0 #7c2d12;
}
.tgl-cat-toggle-whiskers::before { left: 0; }
.tgl-cat-toggle-whiskers::after { right: 0; }
.tgl-cat-toggle-zzz {
  position: absolute;
  top: -0.2em;
  left: 2.1em;
  font: 700 0.6em/1 system-ui, sans-serif;
  color: currentColor;
  transition: opacity 0.2s ease;
}
.tgl-cat-toggle-zzz::before,
.tgl-cat-toggle-zzz::after {
  content: "z";
  position: absolute;
  top: 0;
  left: 0;
  animation: tgl-cat-toggle-float 2.6s ease-out infinite;
}
.tgl-cat-toggle-zzz::after {
  content: "Z";
  animation-delay: -1.3s;
}
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track { background: var(--c); }
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-cat { transform: translateX(3.4em); }
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-zzz { opacity: 0; }
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-eyes::before,
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-eyes::after {
  transform: scaleY(1);
  transition-delay: 0.3s;
}
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-ears::before {
  transform: rotate(-6deg);
  transition-delay: 0.25s;
}
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-ears::after {
  transform: scaleX(-1) rotate(-6deg);
  transition-delay: 0.3s;
}
@keyframes tgl-cat-toggle-float {
  0% { transform: translate(0, 0.6em) scale(0.5); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(1.2em, -1.6em) scale(1.1); opacity: 0; }
}
.tgl-cat-toggle input:focus-visible + .tgl-cat-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-googly-eyes-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-googly-eyes-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-googly-eyes-toggle-track {
  position: relative;
  display: block;
  width: 6.8em;
  height: 2.6em;
  border-radius: 1.3em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 0.35s ease;
}
.tgl-googly-eyes-toggle-knob {
  position: absolute;
  top: 0.35em;
  left: 0.35em;
  display: flex;
  transition: transform 0.5s cubic-bezier(0.6, 0, 0.3, 1);
}
.tgl-googly-eyes-toggle-eye {
  position: relative;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 0.06em #d1d5db, inset 0 -0.12em 0.2em rgba(0, 0, 0, 0.12), 0 0.08em 0.2em rgba(0, 0, 0, 0.25);
}
.tgl-googly-eyes-toggle-eye + .tgl-googly-eyes-toggle-eye { margin-left: 0.05em; }
.tgl-googly-eyes-toggle-eye::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.475em);
  left: calc(50% - 0.475em);
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff 0 0.1em, #111827 0.11em);
  transform: translate(-0.3em, 0.22em);
  transition: transform 0.7s cubic-bezier(0.3, 1.8, 0.4, 1);
}
.tgl-googly-eyes-toggle-eye + .tgl-googly-eyes-toggle-eye::after { transition-delay: 0.05s; }
.tgl-googly-eyes-toggle input:checked + .tgl-googly-eyes-toggle-track { background: var(--c); }
.tgl-googly-eyes-toggle input:checked + .tgl-googly-eyes-toggle-track .tgl-googly-eyes-toggle-knob { transform: translateX(2.25em); }
.tgl-googly-eyes-toggle input:checked + .tgl-googly-eyes-toggle-track .tgl-googly-eyes-toggle-eye::after {
  transform: translate(0.3em, 0.22em);
  transition: none;
  animation: tgl-googly-eyes-toggle-swing 0.9s ease-out;
}
.tgl-googly-eyes-toggle input:checked + .tgl-googly-eyes-toggle-track .tgl-googly-eyes-toggle-eye + .tgl-googly-eyes-toggle-eye::after {
  animation-duration: 1s;
}
/* the pupil lags as the eyes set off, swings past, then settles */
@keyframes tgl-googly-eyes-toggle-swing {
  0% { transform: translate(-0.3em, 0.22em); }
  25% { transform: translate(-0.36em, -0.05em); }
  55% { transform: translate(0.36em, 0.04em); }
  75% { transform: translate(0.14em, 0.3em); }
  100% { transform: translate(0.3em, 0.22em); }
}
.tgl-googly-eyes-toggle input:focus-visible + .tgl-googly-eyes-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-fire-ice-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-fire-ice-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-fire-ice-toggle-track {
  position: relative;
  display: block;
  width: 6em;
  height: 2.6em;
  border-radius: 1.3em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #e0f2fe), var(--c));
  box-shadow: 0 0 0 transparent;
  transition: box-shadow 0.5s ease;
}
/* the fire layer fades in over the ice */
.tgl-fire-ice-toggle-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fbbf24, #f97316 45%, #dc2626);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tgl-fire-ice-toggle-frost,
.tgl-fire-ice-toggle-embers {
  position: absolute;
  transition: opacity 0.4s ease;
}
.tgl-fire-ice-toggle-frost {
  right: 0.6em;
  top: 0.45em;
  width: 2.6em;
  height: 1.7em;
}
.tgl-fire-ice-toggle-frost::before,
.tgl-fire-ice-toggle-frost::after {
  content: "";
  position: absolute;
  width: 0.45em;
  height: 0.45em;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: tgl-fire-ice-toggle-twinkle 2.2s ease-in-out infinite;
}
.tgl-fire-ice-toggle-frost::before { left: 0.4em; top: 0.1em; }
.tgl-fire-ice-toggle-frost::after { left: 1.8em; top: 0.95em; animation-delay: -1.1s; }
.tgl-fire-ice-toggle-embers {
  left: 0.7em;
  bottom: 0.2em;
  width: 2.4em;
  height: 2.2em;
  opacity: 0;
}
.tgl-fire-ice-toggle-embers::before,
.tgl-fire-ice-toggle-embers::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.5em;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: #fef08a;
  box-shadow: 0 0 0.15em #fde047;
  animation: tgl-fire-ice-toggle-rise 1.6s linear infinite;
}
.tgl-fire-ice-toggle-embers::after { left: 1.6em; animation-delay: -0.8s; }
.tgl-fire-ice-toggle-knob {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  z-index: 1;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
  transition: transform 0.5s cubic-bezier(0.5, 1.3, 0.4, 1);
}
.tgl-fire-ice-toggle-ice,
.tgl-fire-ice-toggle-fire {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.tgl-fire-ice-toggle-ice svg,
.tgl-fire-ice-toggle-fire svg {
  display: block;
  width: 1.3em;
  height: 1.3em;
  overflow: visible;
}
.tgl-fire-ice-toggle-ice svg {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tgl-fire-ice-toggle-fire {
  opacity: 0;
  transform: scale(0.3) rotate(-90deg);
}
.tgl-fire-ice-toggle-outer { fill: #f97316; }
.tgl-fire-ice-toggle-inner { fill: #fde047; }
.tgl-fire-ice-toggle-flame {
  transform-box: fill-box;
  transform-origin: 50% 95%;
  animation: tgl-fire-ice-toggle-flicker 1.1s ease-in-out infinite;
}
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track { box-shadow: 0 0 0.8em rgba(249, 115, 22, 0.45); }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track::before { opacity: 1; }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-frost { opacity: 0; }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-embers { opacity: 1; }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-knob { transform: translateX(3.4em); }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-ice {
  opacity: 0;
  transform: scale(0.3) rotate(180deg);
}
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-fire {
  opacity: 1;
  transform: none;
}
@keyframes tgl-fire-ice-toggle-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.4) rotate(45deg); opacity: 0.4; }
}
@keyframes tgl-fire-ice-toggle-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(0.3em, -2em); opacity: 0; }
}
@keyframes tgl-fire-ice-toggle-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(0.94, 1.06) skewX(-3deg); }
  50% { transform: scale(1.04, 0.95) skewX(2deg); }
  75% { transform: scale(0.97, 1.04) skewX(-1deg); }
}
.tgl-fire-ice-toggle input:focus-visible + .tgl-fire-ice-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-rocket-launch-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-rocket-launch-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-rocket-launch-toggle-track {
  position: relative;
  display: block;
  width: 2.8em;
  height: 6em;
  border-radius: 1.4em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(color-mix(in srgb, var(--c) 15%, #020617), color-mix(in srgb, var(--c) 40%, #1e1b4b));
  box-shadow: inset 0 0.1em 0.3em rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* a star field that tiles every 3em, so it can stream forever */
.tgl-rocket-launch-toggle-stars {
  position: absolute;
  left: 0;
  right: 0;
  top: -3em;
  height: 9em;
  background-image:
    radial-gradient(circle at 22% 20%, #fff 0 0.05em, transparent 0.07em),
    radial-gradient(circle at 74% 46%, rgba(255, 255, 255, 0.7) 0 0.045em, transparent 0.065em),
    radial-gradient(circle at 40% 82%, #fff 0 0.035em, transparent 0.055em);
  background-size: 100% 3em;
  animation: tgl-rocket-launch-toggle-warp 0.45s linear infinite paused;
}
/* launch pad */
.tgl-rocket-launch-toggle-track::after {
  content: "";
  position: absolute;
  left: 0.55em;
  right: 0.55em;
  bottom: 0.3em;
  height: 0.12em;
  border-radius: 0.06em;
  background: rgba(255, 255, 255, 0.35);
}
.tgl-rocket-launch-toggle-smoke {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.4em;
}
.tgl-rocket-launch-toggle-smoke::before,
.tgl-rocket-launch-toggle-smoke::after {
  content: "";
  position: absolute;
  bottom: 0.15em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: rgba(226, 232, 240, 0.85);
  box-shadow: 0.5em 0.15em 0 -0.12em rgba(226, 232, 240, 0.85);
  opacity: 0;
}
.tgl-rocket-launch-toggle-smoke::before { left: 0.15em; }
.tgl-rocket-launch-toggle-smoke::after { right: 0.65em; }
.tgl-rocket-launch-toggle-rocket {
  position: absolute;
  left: 0.3em;
  bottom: 0.4em;
  z-index: 1;
  width: 2.2em;
  height: 2.2em;
  transition: transform 0.8s cubic-bezier(0.6, 0, 0.2, 1);
}
.tgl-rocket-launch-toggle-rocket svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tgl-rocket-launch-toggle-body { fill: #f1f5f9; }
.tgl-rocket-launch-toggle-fins,
.tgl-rocket-launch-toggle-window { fill: var(--c); }
.tgl-rocket-launch-toggle-window {
  stroke: #cbd5e1;
  stroke-width: 0.8;
}
.tgl-rocket-launch-toggle-flame {
  transform-box: fill-box;
  transform-origin: 50% 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tgl-rocket-launch-toggle input:checked + .tgl-rocket-launch-toggle-track .tgl-rocket-launch-toggle-rocket { transform: translateY(-3.1em); }
.tgl-rocket-launch-toggle input:checked + .tgl-rocket-launch-toggle-track .tgl-rocket-launch-toggle-flame {
  opacity: 1;
  animation: tgl-rocket-launch-toggle-flicker 0.14s ease-in-out infinite alternate;
}
.tgl-rocket-launch-toggle input:checked + .tgl-rocket-launch-toggle-track .tgl-rocket-launch-toggle-stars { animation-play-state: running; }
.tgl-rocket-launch-toggle input:checked + .tgl-rocket-launch-toggle-track .tgl-rocket-launch-toggle-smoke::before,
.tgl-rocket-launch-toggle input:checked + .tgl-rocket-launch-toggle-track .tgl-rocket-launch-toggle-smoke::after {
  animation: tgl-rocket-launch-toggle-puff 1s ease-out both;
}
.tgl-rocket-launch-toggle input:checked + .tgl-rocket-launch-toggle-track .tgl-rocket-launch-toggle-smoke::after { animation-delay: 0.08s; }
@keyframes tgl-rocket-launch-toggle-warp {
  from { transform: translateY(0); }
  to { transform: translateY(3em); }
}
@keyframes tgl-rocket-launch-toggle-flicker {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.7); }
}
@keyframes tgl-rocket-launch-toggle-puff {
  0% { transform: scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-0.4em) scale(1.5); opacity: 0; }
}
.tgl-rocket-launch-toggle input:focus-visible + .tgl-rocket-launch-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-planet-orbit-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-planet-orbit-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-planet-orbit-toggle-track {
  position: relative;
  display: block;
  width: 7em;
  height: 2.8em;
  border-radius: 1.4em;
  background: color-mix(in srgb, var(--c) 15%, #0b1026);
  box-shadow: inset 0 0.1em 0.3em rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.tgl-planet-orbit-toggle-track::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 1em;
  width: 0.1em;
  height: 0.1em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 1.2em 0.95em 0 rgba(255, 255, 255, 0.6), 2.3em 0.2em 0 #fff, 3.4em 1.5em 0 rgba(255, 255, 255, 0.7), 4.6em 0.35em 0 #fff, 0.4em 1.6em 0 rgba(255, 255, 255, 0.6), 5.3em 1.35em 0 #fff;
  animation: tgl-planet-orbit-toggle-twinkle 3s ease-in-out infinite;
}
.tgl-planet-orbit-toggle-planet {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  z-index: 0;
  width: 2.2em;
  height: 2.2em;
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.25, 1);
}
.tgl-planet-orbit-toggle-planet > span { position: absolute; }
.tgl-planet-orbit-toggle-ball {
  left: 0.35em;
  top: 0.35em;
  z-index: 2;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  overflow: hidden;
  background:
    repeating-linear-gradient(160deg, transparent 0 0.22em, rgba(255, 255, 255, 0.14) 0 0.34em),
    linear-gradient(160deg, #e2e8f0, #64748b);
  box-shadow: inset -0.22em -0.16em 0.3em rgba(0, 0, 0, 0.4);
}
.tgl-planet-orbit-toggle-ball::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(160deg, transparent 0 0.22em, rgba(255, 255, 255, 0.16) 0 0.34em),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: inset -0.22em -0.16em 0.3em rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* the ring is drawn twice: the back half under the planet, the front half over it */
.tgl-planet-orbit-toggle-ring-back,
.tgl-planet-orbit-toggle-ring-front {
  left: calc(50% - 1.15em);
  top: calc(50% - 0.3em);
  box-sizing: border-box;
  width: 2.3em;
  height: 0.6em;
  border: 0.13em solid #cbd5e1;
  border-radius: 50%;
  transform: rotate(-18deg);
  transition: border-color 0.5s ease;
}
.tgl-planet-orbit-toggle-ring-back { z-index: 1; }
.tgl-planet-orbit-toggle-ring-front {
  z-index: 3;
  clip-path: inset(50% 0 0 0);
}
.tgl-planet-orbit-toggle-orbit {
  left: 50%;
  top: 50%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tgl-planet-orbit-toggle-moon {
  position: absolute;
  left: -0.17em;
  top: -0.17em;
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  background: #e2e8f0;
  box-shadow: inset -0.06em -0.05em 0.08em rgba(0, 0, 0, 0.35);
}
.tgl-planet-orbit-toggle input:checked + .tgl-planet-orbit-toggle-track .tgl-planet-orbit-toggle-planet { transform: translateX(4.2em); }
.tgl-planet-orbit-toggle input:checked + .tgl-planet-orbit-toggle-track .tgl-planet-orbit-toggle-ball::before { opacity: 1; }
.tgl-planet-orbit-toggle input:checked + .tgl-planet-orbit-toggle-track .tgl-planet-orbit-toggle-ring-back,
.tgl-planet-orbit-toggle input:checked + .tgl-planet-orbit-toggle-track .tgl-planet-orbit-toggle-ring-front {
  border-color: color-mix(in srgb, var(--c) 35%, #fde68a);
}
/* y and front/back on the wrapper, x on the moon: together they trace an ellipse */
.tgl-planet-orbit-toggle input:checked + .tgl-planet-orbit-toggle-track .tgl-planet-orbit-toggle-orbit {
  opacity: 1;
  transition-delay: 0.5s;
  animation:
    tgl-planet-orbit-toggle-y 2s ease-in-out -1s infinite alternate,
    tgl-planet-orbit-toggle-z 4s linear infinite;
}
.tgl-planet-orbit-toggle input:checked + .tgl-planet-orbit-toggle-track .tgl-planet-orbit-toggle-moon {
  animation: tgl-planet-orbit-toggle-x 2s ease-in-out infinite alternate;
}
@keyframes tgl-planet-orbit-toggle-x {
  from { transform: translateX(-1.25em); }
  to { transform: translateX(1.25em); }
}
@keyframes tgl-planet-orbit-toggle-y {
  from { transform: translateY(-0.42em); }
  to { transform: translateY(0.42em); }
}
@keyframes tgl-planet-orbit-toggle-z {
  0%, 49.9% { z-index: 4; }
  50%, 100% { z-index: 1; }
}
@keyframes tgl-planet-orbit-toggle-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.tgl-planet-orbit-toggle input:focus-visible + .tgl-planet-orbit-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-bouncing-ball-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-bouncing-ball-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-bouncing-ball-toggle-track {
  position: relative;
  display: block;
  width: 6em;
  height: 2.4em;
  border-radius: 1.2em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 0.4s ease;
}
.tgl-bouncing-ball-toggle-shadow {
  position: absolute;
  left: 0.45em;
  bottom: 0.2em;
  width: 1.5em;
  height: 0.35em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.25, 1);
}
/* the ball squashes from its base; the painted ball inside rolls around its center */
.tgl-bouncing-ball-toggle-ball {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  width: 1.8em;
  height: 1.8em;
  transform-origin: 50% 100%;
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.25, 1);
}
.tgl-bouncing-ball-toggle-ball::before,
.tgl-bouncing-ball-toggle-ball::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.tgl-bouncing-ball-toggle-ball::before {
  background:
    radial-gradient(circle, #fff 0 0.17em, transparent 0.19em),
    conic-gradient(from 15deg, var(--c) 0 60deg, #fff 0 120deg, #facc15 0 180deg, #fff 0 240deg, #ef4444 0 300deg, #fff 0);
  transform: rotate(-360deg);
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.25, 1);
}
.tgl-bouncing-ball-toggle-ball::after {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.8) 0 0.12em, rgba(255, 255, 255, 0) 0.55em);
  box-shadow: inset -0.15em -0.2em 0.3em rgba(0, 0, 0, 0.25), 0 0.06em 0.12em rgba(0, 0, 0, 0.25);
}
.tgl-bouncing-ball-toggle input:checked + .tgl-bouncing-ball-toggle-track { background: color-mix(in srgb, var(--c) 30%, transparent); }
.tgl-bouncing-ball-toggle input:checked + .tgl-bouncing-ball-toggle-track .tgl-bouncing-ball-toggle-ball {
  transform: translateX(3.6em);
  transition: none;
  animation: tgl-bouncing-ball-toggle-hop 0.8s both;
}
.tgl-bouncing-ball-toggle input:checked + .tgl-bouncing-ball-toggle-track .tgl-bouncing-ball-toggle-ball::before { transform: rotate(0deg); }
.tgl-bouncing-ball-toggle input:checked + .tgl-bouncing-ball-toggle-track .tgl-bouncing-ball-toggle-shadow {
  transform: translateX(3.6em);
  transition: none;
  animation: tgl-bouncing-ball-toggle-shade 0.8s both;
}
@keyframes tgl-bouncing-ball-toggle-hop {
  0% { transform: translate(0, 0) scale(1, 1); animation-timing-function: ease-out; }
  12% { transform: translate(0, 0) scale(1.18, 0.82); animation-timing-function: ease-out; }
  25% { transform: translate(0.55em, -0.9em) scale(0.9, 1.12); animation-timing-function: ease-out; }
  50% { transform: translate(1.8em, -1.5em) scale(1, 1); animation-timing-function: ease-in; }
  80% { transform: translate(3.25em, -0.45em) scale(0.92, 1.1); animation-timing-function: ease-in; }
  88% { transform: translate(3.6em, 0) scale(1.22, 0.78); animation-timing-function: ease-out; }
  95% { transform: translate(3.6em, -0.12em) scale(0.96, 1.04); animation-timing-function: ease-in; }
  100% { transform: translate(3.6em, 0) scale(1, 1); }
}
@keyframes tgl-bouncing-ball-toggle-shade {
  0%, 12% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(1.8em) scale(0.5); opacity: 0.4; }
  88% { transform: translateX(3.6em) scale(1.15); opacity: 1; }
  100% { transform: translateX(3.6em) scale(1); opacity: 1; }
}
.tgl-bouncing-ball-toggle input:focus-visible + .tgl-bouncing-ball-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

@property --tgl-rainbow-toggle-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.tgl-rainbow-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-rainbow-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-rainbow-toggle-sky {
  position: relative;
  display: block;
  width: 6.4em;
  height: 2.8em;
  border-radius: 1.4em;
  overflow: hidden;
  isolation: isolate;
  background: #64748b;
  box-shadow: inset 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
  transition: background-color 0.6s ease;
}
/* six bands in one radial gradient, revealed by a conic mask that sweeps left to right */
.tgl-rainbow-toggle-arc {
  --tgl-rainbow-toggle-sweep: 0deg;
  position: absolute;
  left: calc(50% - 2.5em);
  bottom: -0.4em;
  width: 5em;
  height: 2.5em;
  background: radial-gradient(circle at 50% 100%,
    transparent 1.3em,
    #ef4444 1.3em 1.5em,
    #f59e0b 1.5em 1.7em,
    #facc15 1.7em 1.9em,
    #22c55e 1.9em 2.1em,
    #3b82f6 2.1em 2.3em,
    #8b5cf6 2.3em 2.5em,
    transparent 2.5em);
  -webkit-mask: conic-gradient(from 270deg at 50% 100%, #000 var(--tgl-rainbow-toggle-sweep), transparent 0);
  mask: conic-gradient(from 270deg at 50% 100%, #000 var(--tgl-rainbow-toggle-sweep), transparent 0);
  transition: --tgl-rainbow-toggle-sweep 0.5s ease-in;
}
/* clouds are pills with a puff on top, filled with currentColor so one color transition recolors them */
.tgl-rainbow-toggle-cloud,
.tgl-rainbow-toggle-puff {
  position: absolute;
  color: #cbd5e1;
}
.tgl-rainbow-toggle-cloud::before,
.tgl-rainbow-toggle-cloud::after,
.tgl-rainbow-toggle-puff::before,
.tgl-rainbow-toggle-puff::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.tgl-rainbow-toggle-cloud {
  top: 0.75em;
  left: 0.3em;
  z-index: 1;
  width: 2.3em;
  height: 1.6em;
  transition: transform 0.8s cubic-bezier(0.5, 0, 0.25, 1), color 0.6s ease;
}
.tgl-rainbow-toggle-cloud::before {
  left: 0;
  bottom: 0.3em;
  width: 2.3em;
  height: 0.8em;
  border-radius: 0.4em;
}
.tgl-rainbow-toggle-cloud::after {
  left: 0.45em;
  bottom: 0.6em;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  box-shadow: 0.72em 0.22em 0 -0.18em currentColor;
}
.tgl-rainbow-toggle-puff {
  top: 1.65em;
  left: 0.35em;
  width: 1.5em;
  height: 1em;
  color: #fff;
  opacity: 0;
  transform: translateX(-1em);
  transition: opacity 0.4s ease, transform 0.6s ease;
}
.tgl-rainbow-toggle-puff::before {
  left: 0;
  bottom: 0;
  width: 1.5em;
  height: 0.6em;
  border-radius: 0.3em;
}
.tgl-rainbow-toggle-puff::after {
  left: 0.35em;
  bottom: 0.3em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
}
.tgl-rainbow-toggle-rain {
  position: absolute;
  left: 0.55em;
  top: 1.3em;
  width: 1.3em;
  height: 1em;
  transition: opacity 0.2s ease;
}
.tgl-rainbow-toggle-rain::before,
.tgl-rainbow-toggle-rain::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.08em;
  height: 0.28em;
  border-radius: 0.04em;
  background: #93c5fd;
  box-shadow: 0.55em 0.1em 0 #93c5fd, 1.1em -0.05em 0 #93c5fd;
  animation: tgl-rainbow-toggle-fall 0.7s linear infinite;
}
.tgl-rainbow-toggle-rain::after {
  left: 0.28em;
  animation-delay: -0.35s;
}
.tgl-rainbow-toggle input:checked + .tgl-rainbow-toggle-sky { background: color-mix(in srgb, var(--c) 40%, #e0f2fe); }
.tgl-rainbow-toggle input:checked + .tgl-rainbow-toggle-sky .tgl-rainbow-toggle-arc {
  --tgl-rainbow-toggle-sweep: 180deg;
  transition: --tgl-rainbow-toggle-sweep 0.9s cubic-bezier(0.5, 0, 0.3, 1) 0.1s;
}
.tgl-rainbow-toggle input:checked + .tgl-rainbow-toggle-sky .tgl-rainbow-toggle-cloud {
  transform: translateX(3.5em);
  color: #fff;
}
.tgl-rainbow-toggle input:checked + .tgl-rainbow-toggle-sky .tgl-rainbow-toggle-rain { opacity: 0; }
.tgl-rainbow-toggle input:checked + .tgl-rainbow-toggle-sky .tgl-rainbow-toggle-puff {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}
@keyframes tgl-rainbow-toggle-fall {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(0.7em); opacity: 0; }
}
.tgl-rainbow-toggle input:focus-visible + .tgl-rainbow-toggle-sky {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-open-closed-sign-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
}
.tgl-open-closed-sign-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-open-closed-sign-toggle-rig {
  position: relative;
  display: block;
  width: 6.4em;
  height: 4.1em;
  transform-origin: 50% 0.26em;
}
/* the nail */
.tgl-open-closed-sign-toggle-rig::before {
  content: "";
  position: absolute;
  left: calc(50% - 0.18em);
  top: 0.08em;
  z-index: 2;
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e5e7eb, #6b7280);
}
/* two diagonal strings, drawn with gradients */
.tgl-open-closed-sign-toggle-string {
  position: absolute;
  left: calc(50% - 1.9em);
  top: 0.26em;
  width: 3.8em;
  height: 1.15em;
  --line: color-mix(in srgb, currentColor 60%, transparent);
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.05em), var(--line) calc(50% - 0.04em) calc(50% + 0.04em), transparent calc(50% + 0.05em)) left / 50% 100% no-repeat,
    linear-gradient(to top right, transparent calc(50% - 0.05em), var(--line) calc(50% - 0.04em) calc(50% + 0.04em), transparent calc(50% + 0.05em)) right / 50% 100% no-repeat;
}
.tgl-open-closed-sign-toggle-board {
  position: absolute;
  left: calc(50% - 2.9em);
  top: 1.35em;
  width: 5.8em;
  height: 2.5em;
  transform-style: preserve-3d;
  transform: perspective(25em) rotateY(0deg);
  transition: transform 0.8s cubic-bezier(0.4, 1.4, 0.5, 1);
}
.tgl-open-closed-sign-toggle-closed,
.tgl-open-closed-sign-toggle-open {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 0.45em;
  font-size: 0.9em;
  font-weight: 800;
  letter-spacing: 0.12em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tgl-open-closed-sign-toggle-closed {
  color: #dc2626;
  background: #fff;
  box-shadow: inset 0 0 0 0.18em #fff, inset 0 0 0 0.29em #dc2626, 0 0.2em 0.4em rgba(0, 0, 0, 0.25);
}
.tgl-open-closed-sign-toggle-open {
  color: #fff;
  background: var(--c);
  box-shadow: inset 0 0 0 0.18em var(--c), inset 0 0 0 0.29em #fff, 0 0.2em 0.4em rgba(0, 0, 0, 0.25);
  transform: rotateY(180deg);
}
.tgl-open-closed-sign-toggle input:checked + .tgl-open-closed-sign-toggle-rig {
  animation: tgl-open-closed-sign-toggle-swing 1.4s ease-in-out 0.2s;
}
.tgl-open-closed-sign-toggle input:checked + .tgl-open-closed-sign-toggle-rig .tgl-open-closed-sign-toggle-board {
  transform: perspective(25em) rotateY(180deg);
}
@keyframes tgl-open-closed-sign-toggle-swing {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(7deg); }
  35% { transform: rotate(-5deg); }
  55% { transform: rotate(3deg); }
  75% { transform: rotate(-1.5deg); }
}
.tgl-open-closed-sign-toggle input:focus-visible + .tgl-open-closed-sign-toggle-rig .tgl-open-closed-sign-toggle-board {
  outline: 2px solid var(--c);
  outline-offset: 0.25em;
  border-radius: 0.45em;
}

.tgl-plug-socket-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-plug-socket-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-plug-socket-toggle-rig {
  position: relative;
  display: block;
  width: 7.8em;
  height: 2.8em;
}
.tgl-plug-socket-toggle-cable {
  position: absolute;
  left: 0.1em;
  top: 1.32em;
  width: 1.85em;
  height: 0.16em;
  border-radius: 0.08em;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 60%, transparent) 0.6em);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.6, 0, 0.4, 1);
}
.tgl-plug-socket-toggle-plug {
  position: absolute;
  left: 1.1em;
  top: 0.65em;
  z-index: 1;
  width: 1.7em;
  height: 1.5em;
  border-radius: 0.4em 0.2em 0.2em 0.4em;
  background: linear-gradient(color-mix(in srgb, var(--c) 65%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 65%, #000));
  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.25);
  transition: transform 0.45s cubic-bezier(0.6, 0, 0.4, 1);
}
/* grip ridges and the two prongs */
.tgl-plug-socket-toggle-plug::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.25em;
  bottom: 0.25em;
  width: 0.5em;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 0.08em, transparent 0 0.18em);
}
.tgl-plug-socket-toggle-plug::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0.31em;
  width: 0.6em;
  height: 0.2em;
  border-radius: 0 0.06em 0.06em 0;
  background: linear-gradient(#e2e8f0, #94a3b8);
  box-shadow: 0 0.68em 0 #a8b3c2;
}
.tgl-plug-socket-toggle-socket {
  position: absolute;
  left: 5.5em;
  top: 0;
  z-index: 2;
  width: 2.3em;
  height: 2.8em;
  border-radius: 0.5em;
  background: linear-gradient(90deg, #cbd5e1, #f1f5f9 40%, #e2e8f0);
  box-shadow: 0 0.15em 0.3em rgba(0, 0, 0, 0.2), inset 0.08em 0 0 rgba(255, 255, 255, 0.6);
}
/* the two slots on its face */
.tgl-plug-socket-toggle-socket::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.3em;
  height: 0.22em;
  border-radius: 0 0.08em 0.08em 0;
  background: #334155;
  box-shadow: 0 0.68em 0 #334155;
}
.tgl-plug-socket-toggle-led {
  position: absolute;
  left: 1.2em;
  top: calc(50% - 0.18em);
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  background: #94a3b8;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.tgl-plug-socket-toggle-spark {
  position: absolute;
  left: 4.95em;
  top: 0.5em;
  z-index: 3;
  width: 1.1em;
  height: 1.8em;
  background:
    radial-gradient(circle, #fef9c3 0 0.08em, transparent 0.1em) 50% 30% / 100% 1em no-repeat,
    repeating-conic-gradient(from -6deg, #fde047 0 12deg, transparent 0 45deg) 50% 0 / 1.1em 1.1em no-repeat;
  -webkit-mask: radial-gradient(circle at 50% 0.55em, #000 0.5em, transparent 0.52em);
  mask: radial-gradient(circle at 50% 0.55em, #000 0.5em, transparent 0.52em);
  opacity: 0;
}
.tgl-plug-socket-toggle input:checked + .tgl-plug-socket-toggle-rig .tgl-plug-socket-toggle-plug { transform: translateX(2.7em); }
.tgl-plug-socket-toggle input:checked + .tgl-plug-socket-toggle-rig .tgl-plug-socket-toggle-cable { transform: scaleX(2.46); }
.tgl-plug-socket-toggle input:checked + .tgl-plug-socket-toggle-rig .tgl-plug-socket-toggle-socket {
  animation: tgl-plug-socket-toggle-jolt 0.25s ease-out 0.42s;
}
.tgl-plug-socket-toggle input:checked + .tgl-plug-socket-toggle-rig .tgl-plug-socket-toggle-led {
  background: var(--c);
  box-shadow: 0 0 0.4em 0.08em var(--c);
  transition-delay: 0.45s;
}
.tgl-plug-socket-toggle input:checked + .tgl-plug-socket-toggle-rig .tgl-plug-socket-toggle-spark {
  animation: tgl-plug-socket-toggle-spark 0.4s ease-out 0.4s both;
}
@keyframes tgl-plug-socket-toggle-jolt {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(0.08em); }
}
@keyframes tgl-plug-socket-toggle-spark {
  0% { opacity: 0; transform: scale(0.3); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3) rotate(20deg); }
}
.tgl-plug-socket-toggle input:focus-visible + .tgl-plug-socket-toggle-rig .tgl-plug-socket-toggle-plug {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-car-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-car-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-car-toggle-track {
  position: relative;
  display: block;
  width: 6.4em;
  height: 2.6em;
  border-radius: 1.3em;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition: background-color 0.4s ease;
}
/* the road */
.tgl-car-toggle-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.72em;
  background: #374151;
}
.tgl-car-toggle-lane {
  position: absolute;
  left: 0;
  right: -1em;
  top: 2.22em;
  height: 0.09em;
  background: repeating-linear-gradient(90deg, #fde047 0 0.5em, transparent 0 1em);
}
.tgl-car-toggle-car {
  position: absolute;
  left: 0.35em;
  bottom: 0.45em;
  width: 2.7em;
  height: 1.55em;
  transition: transform 0.9s cubic-bezier(0.55, 0, 0.3, 1);
}
.tgl-car-toggle-car svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
}
.tgl-car-toggle-body { fill: var(--c); }
.tgl-car-toggle-glass { fill: rgba(224, 242, 254, 0.9); }
.tgl-car-toggle-wheel {
  position: absolute;
  bottom: 0.14em;
  left: 0.473em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background:
    radial-gradient(circle, #d1d5db 0 0.07em, transparent 0.08em),
    repeating-conic-gradient(#4b5563 0 45deg, #111827 0 90deg);
  box-shadow: 0 0 0 0.05em #111827;
  transform: rotate(-540deg);
  transition: transform 0.9s cubic-bezier(0.55, 0, 0.3, 1);
}
.tgl-car-toggle-wheel + .tgl-car-toggle-wheel { left: 1.775em; }
.tgl-car-toggle-beam {
  position: absolute;
  left: 2.55em;
  top: 0.55em;
  width: 1.4em;
  height: 0.8em;
  clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%);
  background: linear-gradient(90deg, rgba(253, 224, 71, 0.75), rgba(253, 224, 71, 0));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tgl-car-toggle input:checked + .tgl-car-toggle-track { background: color-mix(in srgb, var(--c) 22%, transparent); }
.tgl-car-toggle input:checked + .tgl-car-toggle-track .tgl-car-toggle-car { transform: translateX(3em); }
.tgl-car-toggle input:checked + .tgl-car-toggle-track .tgl-car-toggle-car svg {
  animation:
    tgl-car-toggle-pitch 0.9s ease-in-out,
    tgl-car-toggle-bob 0.3s ease-in-out 0.9s infinite alternate;
}
.tgl-car-toggle input:checked + .tgl-car-toggle-track .tgl-car-toggle-wheel {
  transform: rotate(0deg);
  animation: tgl-car-toggle-spin 0.35s linear 0.9s infinite;
}
.tgl-car-toggle input:checked + .tgl-car-toggle-track .tgl-car-toggle-lane {
  animation: tgl-car-toggle-road 0.45s linear 0.6s infinite;
}
.tgl-car-toggle input:checked + .tgl-car-toggle-track .tgl-car-toggle-beam {
  opacity: 1;
  transition-delay: 0.3s;
}
@keyframes tgl-car-toggle-pitch {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  65% { transform: rotate(-1deg); }
  82% { transform: rotate(3deg); }
}
@keyframes tgl-car-toggle-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-0.04em); }
}
@keyframes tgl-car-toggle-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes tgl-car-toggle-road {
  from { transform: translateX(0); }
  to { transform: translateX(-1em); }
}
.tgl-car-toggle input:focus-visible + .tgl-car-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.tgl-candle-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-candle-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-candle-toggle-candle {
  position: relative;
  display: block;
  width: 3.4em;
  height: 5.8em;
}
.tgl-candle-toggle-candle > span { position: absolute; }
/* the dish */
.tgl-candle-toggle-candle::after {
  content: "";
  position: absolute;
  left: calc(50% - 1.3em);
  bottom: 0;
  width: 2.6em;
  height: 0.5em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 28%, transparent);
  box-shadow: inset 0 -0.08em 0 color-mix(in srgb, currentColor 25%, transparent);
}
.tgl-candle-toggle-glow {
  left: calc(50% - 1.9em);
  top: -0.5em;
  width: 3.8em;
  height: 3.8em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.5), rgba(253, 224, 71, 0) 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tgl-candle-toggle-wax {
  left: calc(50% - 0.7em);
  bottom: 0.25em;
  width: 1.4em;
  height: 3em;
  border-radius: 0.2em 0.2em 0.3em 0.3em;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c) 70%, #000),
    var(--c) 30%,
    color-mix(in srgb, var(--c) 45%, #fff) 45%,
    var(--c) 65%,
    color-mix(in srgb, var(--c) 70%, #000));
}
.tgl-candle-toggle-wax::before,
.tgl-candle-toggle-wax::after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--c) 50%, #fff);
}
/* the top of the candle, and a drip */
.tgl-candle-toggle-wax::before {
  left: 0;
  right: 0;
  top: -0.18em;
  height: 0.36em;
  border-radius: 50%;
}
.tgl-candle-toggle-wax::after {
  left: 0.25em;
  top: 0;
  width: 0.28em;
  height: 0.9em;
  border-radius: 0 0 0.14em 0.14em;
}
.tgl-candle-toggle-wick {
  left: calc(50% - 0.045em);
  bottom: 3.3em;
  z-index: 1;
  width: 0.09em;
  height: 0.38em;
  border-radius: 0.04em;
  background: #292524;
  transition: background-color 1.8s ease, box-shadow 1.8s ease;
}
.tgl-candle-toggle-flame {
  left: calc(50% - 0.3em);
  bottom: 3.5em;
  z-index: 2;
  width: 0.6em;
  height: 1.3em;
  transform-origin: 50% 100%;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.25s ease-in, opacity 0.25s ease;
}
/* a teardrop: a square with one sharp corner, turned to point up */
.tgl-candle-toggle-flame::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.3em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50% 0 50% 50%;
  background: radial-gradient(circle at 38% 62%, #fff 0 15%, #fef08a 32%, #fb923c 62%, #f97316 85%);
  box-shadow: 0 0 0.35em 0.08em rgba(251, 146, 60, 0.6);
  transform: scale(1, 1.45) rotate(-45deg);
  animation: tgl-candle-toggle-flicker 1.6s ease-in-out infinite;
}
.tgl-candle-toggle input:checked + .tgl-candle-toggle-candle .tgl-candle-toggle-glow {
  opacity: 1;
  animation: tgl-candle-toggle-breathe 2.4s ease-in-out infinite;
}
.tgl-candle-toggle input:checked + .tgl-candle-toggle-candle .tgl-candle-toggle-flame {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.1s, opacity 0.2s ease 0.1s;
}
.tgl-candle-toggle input:checked + .tgl-candle-toggle-candle .tgl-candle-toggle-wick {
  background: #7c2d12;
  box-shadow: 0 -0.05em 0.15em #fb923c;
  transition-duration: 0.2s;
}
@keyframes tgl-candle-toggle-flicker {
  0%, 100% { transform: scale(1, 1.45) rotate(-45deg); }
  30% { transform: scale(0.94, 1.55) rotate(-42deg); }
  55% { transform: scale(1.04, 1.38) rotate(-48deg); }
  80% { transform: scale(0.97, 1.5) rotate(-44deg); }
}
@keyframes tgl-candle-toggle-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.tgl-candle-toggle input:focus-visible + .tgl-candle-toggle-candle .tgl-candle-toggle-wax {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}