.preview-stage { --phone-width: 252px; }
.device-composition {
  position: relative;
  width: 100%;
  height: calc(var(--phone-width) * 3000 / 1470);
  display: flex;
  justify-content: center;
  isolation: isolate;
}
.device-composition > .iphone-device { z-index: 2; }
.duo-layer { position: absolute; z-index: 1; inset: 0 0 0 50%; overflow: hidden; pointer-events: none; }
:root[data-secondary-device="hidden"] .duo-layer { display: none; }
.duo-device {
  position: absolute;
  right: 8px;
  top: 50%;
  height: 50%;
  aspect-ratio: 3093 / 2247;
  transform: translateY(-50%);
  opacity: 0.7;
  filter: drop-shadow(0 10px 18px #0005);
}
.duo-screen {
  position: absolute;
  left: 3.879728%;
  top: 5.340454%;
  width: 92.240543%;
  height: 89.319092%;
  overflow: hidden;
  border-radius: 7% / 10%;
  background: #0e0f0d;
}
.duo-screen img { display: block; width: 100%; height: 100%; }
.iphone-device {
  position: relative;
  flex-shrink: 0;
  width: var(--phone-width, 252px);
  aspect-ratio: 1470 / 3000;
  filter: drop-shadow(0 18px 24px #0006);
}
.camera-frame {
  position: absolute;
  left: 5.102041%;
  top: 2.2%;
  width: 89.795918%;
  height: 95.6%;
  overflow: hidden;
  border-radius: 15.151515% / 6.973501%;
  background: #0e0f0d;
}
.camera-frame img { display: block; width: 100%; height: auto; }
.camera-transition { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.device-bezel {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 960px) { .preview-stage { --phone-width: 232px; } }
@media (max-width: 700px) { .preview-stage { --phone-width: 246px; } }
@media (max-width: 360px) { .preview-stage { --phone-width: 222px; } }