.custom-toggle {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;

  perspective-origin: calc(50% + 10rem) calc(50% - 10rem);
  perspective: 32em;

  transform: scale(0.6); /* scales everything by 60% → 40% smaller */
  transform-origin: bottom right; /* keep it anchored to bottom-right */
}

/* hide checkbox */
#c3d {
  display: none;
}

/* toggle track */
#c3d + label {
  --s: 0;
  position: relative;
  border: solid 0.625rem #f0f0f0;
  width: 176px;
  height: 100px;
  border-radius: 5rem;

  transform-style: preserve-3d;
  transform: rotatex(90deg) rotate(22.5deg) rotatey(22.5deg);

  box-shadow:
    0.5rem 0.875rem 0 -0.25rem #73ad6b,
    0.625rem 0.625rem 0 -0.25rem #b9d6ac,
    0.5rem 0.875rem 0.625rem -0.125rem rgba(44, 161, 60, 0.75),
    inset 0.125rem -0.125rem 0.5rem rgba(196, 192, 192, 0.5),
    inset 0.75rem 0.75rem #51754d,
    inset 0.75rem 0.75rem 0.75rem rgba(66, 129, 82, 0.85),
    inset 0 1rem 0.75rem rgba(93, 201, 93, 0.65);

  cursor: pointer;
  color: transparent;
  font-size: 0;
  -webkit-tap-highlight-color: transparent;
}

/* shared knob + shadow */
#c3d + label:before,
#c3d + label:after {
  position: absolute;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  transition: 2s cubic-bezier(0.21,0.61,0.35,1);
  content: "";
}

/* shadow under knob */
#c3d + label:before {
  top: calc(50% + 0.875rem);
  transform-origin: 100% 0;
  transform: translate(calc(var(--s)*(100% + 1rem))) scale(0.8) skewx(-22.5deg);
  background: radial-gradient(at 50% 25%, rgba(160,160,160,0.65), transparent 70%);
  filter: blur(3px);
}

/* sphere knob */
#c3d + label:after {
  top: 0.875rem;
  left: 0.75rem;

  transform: translate(calc(var(--s)*(100% + 1rem)))
            rotatey(-22.5deg) rotate(-22.5deg) rotatex(-90deg)
            translatey(-50%) rotate(45deg);

  background: radial-gradient(circle at 30% 30%, #52a066 0%, #88d1a0 60%, #66b47b 100%);
  box-shadow: -1px 1px 0.125rem rgba(206,255,206,0.5),
              inset 0 0 12px rgba(0,0,0,.25);

  filter: grayscale(calc(1 - var(--s)));
}

/* knob moves when checked */
#c3d:checked + label {
  --s: 1;
}