.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 the checkbox without removing it from the tab order. */
#c3d {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: 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 — a gold sun when unchecked (light), a pale moon when checked (dark).
   The colour carries the meaning; the geometry is unchanged. */
#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%, #ffe08a 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow: -1px 1px 0.125rem rgba(255, 240, 200, 0.6),
              inset 0 0 12px rgba(0, 0, 0, 0.25);

  transition: 2s cubic-bezier(0.21, 0.61, 0.35, 1), background 0.6s ease;
}

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

#c3d:checked + label:after {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d5d9e0 55%, #9aa3b0 100%);
  box-shadow: -1px 1px 0.125rem rgba(255, 255, 255, 0.5),
              inset 0 0 12px rgba(0, 0, 0, 0.35);
}

/* Keyboard focus needs to be visible: the checkbox itself is hidden. */
#c3d:focus-visible + label {
  outline: 3px solid var(--green);
  outline-offset: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}