/* The app in Apple's iPhone bezel: a loop (LoopPhone) or a still (ShotPhone). The screens are
   the app's dark theme on either site theme, so only the shadow follows the page.
   The bezel is 1470 x 3000; its screen window sits at these insets. */
.loop-phone {
  --phone-shadow: rgba(0, 0, 0, 0.55);
  position: relative;
  aspect-ratio: 1470 / 3000;
  width: 300px;
}
[data-theme="light"] .loop-phone {
  --phone-shadow: rgba(40, 33, 28, 0.22);
}
.loop-phone .loop-screen {
  position: absolute;
  left: 5.102%;
  top: 2.2%;
  width: 89.796%;
  height: 95.6%;
  object-fit: cover;
  border-radius: 12.9% / 5.93%;
  background: #1f2024;
  /* the screen's edge sits a hair inside the bezel's window: a black rim under the bezel closes
     the seam, which on a light page would show as a pale sliver */
  box-shadow: 0 0 0 2px #000;
}
.loop-phone .loop-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* the phone's shadow is its own layer under the body, not a CSS filter: Chrome can stop
   painting a video inside a filtered element after the window is resized */
.loop-phone::before {
  content: "";
  position: absolute;
  inset: 3% 6% 2%;
  border-radius: 14% / 7%;
  box-shadow: 0 40px 70px var(--phone-shadow);
  pointer-events: none;
}