.site-photo > img {
  transition: filter .5s ease;
}

.light-spill {
  position: absolute;
  left: 13%;
  top: 16%;
  width: 57%;
  height: 77%;
  background: radial-gradient(ellipse, #9fffd145 0, #6dffd222 42%, transparent 72%);
  opacity: 0;
  filter: blur(15px);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .5s ease;
}

.mockup-panel {
  clip-path: polygon(1.2% 0, 99.1% .8%, 100% 99%, 0 100%);
  transition: filter .5s ease, box-shadow .5s ease;
}

.mockup-panel,
.mockup-panel-a {
  left: 19.5%;
  width: 44.8%;
}

.mockup-panel-a {
  top: 21.7%;
  height: 27.6%;
}

.mockup-panel-b {
  top: 49.7%;
  height: 34.9%;
  clip-path: polygon(.5% 0, 99.5% .4%, 100% 99%, 0 100%);
}

.excluded {
  left: 64.6%;
  width: 16.9%;
}

.excluded-duct {
  top: 21.7%;
  height: 27.6%;
}

.excluded-door {
  top: 49.7%;
  height: 34.9%;
}

.photo-mockup:has(#nightMode:checked) .site-photo > img {
  filter: saturate(.55) brightness(.28) contrast(1.15);
}

.photo-mockup:has(#nightMode:checked) .light-spill {
  opacity: 1;
}

.photo-mockup:has(#nightMode:checked) .mockup-panel {
  filter: brightness(1.3) saturate(1.25);
  box-shadow: inset 0 0 22px #fff3, 0 0 25px #83ffd0cc, 0 0 65px #55e7b877;
}

.photo-mockup:has(#nightMode:checked) .excluded {
  filter: brightness(.55);
}

.mockup-controls .night-control {
  margin-left: auto;
  border-color: #203c32;
}

.photo-mockup:has(#nightMode:checked) label[for="nightMode"] {
  background: #17382e;
  border-color: #17382e;
  color: white;
}

@media (max-width: 560px) {
  .mockup-controls .night-control {
    flex-basis: 100%;
    margin-left: 0;
  }
}