/* Самостоятельное воспроизведение Reel DdZDn0KooEF, не исходник автора. */
.bulb-switch {
  --bulb-width: 240px;
  --bulb-speed: 450ms;
  --bulb-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: var(--bulb-width);
  max-width: 100%;
  aspect-ratio: 2 / 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #08060a;
  box-shadow: inset 0 8px 12px rgb(0 0 0 / 30%);
  cursor: pointer;
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 650ms ease;
}

.bulb-switch:focus-visible {
  outline: 3px solid #ca841c;
  outline-offset: 10px;
}

.bulb-switch:disabled { cursor: not-allowed; opacity: .55; }

.bulb-switch__mover {
  position: absolute;
  top: 8.333333%;
  left: 4.166667%;
  width: 61.666667%;
  height: 83.333333%;
  pointer-events: none;
  transition: transform var(--bulb-speed) var(--bulb-ease);
}

.bulb-switch__shape {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform var(--bulb-speed) var(--bulb-ease);
}

.bulb-switch__glass {
  fill: #d8d7dc;
  transition: fill 180ms ease, filter 250ms ease;
}

.bulb-switch__contact { fill: #99979c; }
.bulb-switch__base { fill: #a8a7ac; }
.bulb-switch__ridge { fill: #ceccd1; opacity: .65; }
.bulb-switch__base-shade { fill: #131018; opacity: .18; }
.bulb-switch__base, .bulb-switch__contact, .bulb-switch__ridge { transition: fill 250ms ease; }
.bulb-switch__filament {
  stroke: #fff4b8;
  stroke-width: 2;
  opacity: 0;
  transition: opacity 250ms ease;
}
.bulb-switch__core { fill: white; opacity: 0; transition: opacity 200ms ease, filter 250ms ease; }

.bulb-switch[aria-checked="true"] { background: #817b63; }
.bulb-switch[aria-checked="true"] .bulb-switch__mover { transform: translateX(48.648649%); }
.bulb-switch[aria-checked="true"] .bulb-switch__shape { transform: rotateY(180deg); }
.bulb-switch[aria-checked="true"] .bulb-switch__glass {
  fill: #ffe6a0;
  filter: drop-shadow(0 0 12px #ffc529);
}
.bulb-switch[aria-checked="true"] .bulb-switch__core {
  opacity: 1;
  filter: drop-shadow(0 0 5px #fff7ae) drop-shadow(0 0 20px #ffd12c) drop-shadow(0 0 35px #ffb300);
}
.bulb-switch[aria-checked="true"] .bulb-switch__base { fill: #a68a46; }
.bulb-switch[aria-checked="true"] .bulb-switch__ridge { fill: #f5d991; }
.bulb-switch[aria-checked="true"] .bulb-switch__contact { fill: #9a8960; }
.bulb-switch[aria-checked="true"] .bulb-switch__filament { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .bulb-switch, .bulb-switch *, .bulb-room { transition: none; }
}

@media (forced-colors: active) {
  .bulb-switch { border: 2px solid ButtonText; }
  .bulb-switch__glass { fill: ButtonText; }
  .bulb-switch[aria-checked="true"] .bulb-switch__glass { fill: Highlight; filter: none; }
  .bulb-switch[aria-checked="true"] .bulb-switch__core { fill: Highlight; filter: none; }
}