.phone {
  position: relative;
  box-sizing: content-box;
  height: calc(100% - 2 * var(--phone-inset));
  width: auto;
  aspect-ratio: var(--video-aspect);
  min-height: 0;
  padding: 7px;
  border: 2px solid #b9b0aa;
  border-radius: 16% / 7.7%;
  background: #302c30;
  box-shadow: 0 2px 0 1px #ded5ce, 0 18px 36px -18px #78462c3b;
}

.phone::before,
.phone::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: #aaa09a;
}

.phone::before { left: -4px; top: 23%; height: 12%; }
.phone::after { right: -4px; top: 29%; height: 9%; }

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 13.4% / 6.5%;
  background: #fff5eb;
  isolation: isolate;
}

.phone-island {
  position: absolute;
  z-index: 2;
  top: 2%;
  left: 35%;
  width: 30%;
  height: 4.5%;
  border-radius: 999px;
  background: #242326;
  pointer-events: none;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.video-placeholder img { width: 12%; height: auto; opacity: .2; }
.app-video { display: none; width: 100%; height: 100%; object-fit: contain; background: #fff5eb; }
.phone-screen:has(video[src], video source[src]) .app-video { display: block; }
.phone-screen:has(video[src], video source[src]) .video-placeholder { display: none; }
.phone-screen:has(video[src], video source[src]) .phone-island { display: none; }