/* Each shell closes the gap between the front and back planes. */
.device-shell {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.solid-wall {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: hsl(240 7% var(--metal-lightness, 35%));
  pointer-events: none;
}
.solid-cap {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(110deg, #393943, #555560 48%, #292932);
}
.solid-cap-front { transform: translateZ(var(--half-depth)); }
.solid-cap-back { transform: rotateY(180deg) translateZ(var(--half-depth)); }
.monitor-shell { height: 90%; }
.monitor-scene { aspect-ratio: 1.25; }
.monitor-neck {
  background: none;
  clip-path: none;
  transform-style: preserve-3d;
  /* The neck's front meets the back of the screen, with vertical overlap. */
  transform: translateZ(-16px);
}
.monitor-foot {
  top: calc(110% - 35px);
  height: 70px;
  border: 0;
  border-radius: 0;
  background: none;
  transform-style: preserve-3d;
  transform: translateZ(-12px) rotateX(90deg);
}