html[data-preview="iphone"] {
  background: #f1f1ef;
}

html[data-preview="iphone"] body {
  position: fixed;
  top: 50%;
  left: 50%;
  /* Also keeps full-screen dialogs inside the phone-sized preview. */
  transform: translate(-50%, -50%);
  width: min(390px, 100vw);
  height: min(844px, calc(100dvh - 32px));
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: white;
  box-shadow: 0 0 0 1px #d3d3d0, 0 16px 48px #00000016;
}

@media (max-width: 430px) {
  html[data-preview="iphone"] body {
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}