@font-face {
  font-family: ArchitectsDaughter;
  src: url('assets/fonts/ArchitectsDaughter-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.room-footer .motion-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.room-footer .motion-tape {
  display: block;
  padding: 4px 12px 6px;
  background: linear-gradient(100deg, #e4d9bde8, #efe5cce8 48%, #e0d4b9e8);
  clip-path: polygon(2% 0, 97% 3%, 100% 14%, 98% 29%, 100% 44%, 98% 60%, 100% 80%, 97% 98%, 2% 100%, 0 87%, 2% 72%, 0 57%, 2% 40%, 0 23%);
  color: #3e443a;
  font: 400 17px/1.25 ArchitectsDaughter, cursive;
  text-shadow: none;
  transform: rotate(-3deg);
  user-select: none;
}

/* Keep the usable button larger than its small ceramic faceplate. */
.room-footer button.motion-switch {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 64px;
  min-height: 64px;
  padding: 3px 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.motion-switch .switch-plate {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 58px;
  border: 1px solid #b5b1a3;
  border-radius: 3px;
  background: linear-gradient(115deg, #f6f2e8, #e7e3d7);
  box-shadow: inset 1px 1px 1px #fff9, inset -1px -1px 1px #c8c4b5, 1px 2px 3px #30372b26;
  pointer-events: none;
}

.switch-plate::before,
.switch-plate::after {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  border: .5px solid #b3b0a4;
  border-radius: 50%;
  background: linear-gradient(110deg, transparent 38%, #a39f91 42%, #a39f91 55%, transparent 59%), #dfdcd1;
  box-shadow: inset 0 1px 1px #fff8;
  content: '';
  transform: translateX(-50%);
}

.switch-plate::before { top: 5px; }
.switch-plate::after { bottom: 5px; }

.motion-switch .switch-rocker {
  display: block;
  width: 16px;
  height: 28px;
  border: 1px solid #b0ad9f;
  border-radius: 2px;
  background: linear-gradient(#ddd9cd 0%, #f0ecdf 30%, #fffbee 91%, #d4d0c2 92%);
  box-shadow: 0 -1px 2px #595d4440, inset 0 2px 2px #918e7f30, 0 2px 1px #676a5240;
  transform: translateY(1px);
  transition: transform .12s ease, box-shadow .12s ease;
}

.motion-switch[aria-checked=false] .switch-rocker {
  background: linear-gradient(#fffbee 0%, #f0ecdf 68%, #d0cdbf 100%);
  box-shadow: 0 1px 2px #595d4440, inset 0 -2px 2px #918e7f30, 0 -2px 1px #676a5230;
  transform: translateY(-1px);
}

.room-footer button.motion-switch:focus-visible {
  outline: 2px solid #895e25;
  outline-offset: 4px;
}