/* Phone: screen, bezel and rim share one center of curvature. Graphite rim with a soft sheen, no buttons or camera. */
.phone { position: absolute; width: 882px; height: 1916.4px; --phone-bezel: 16px; --phone-rim: 3px; }
.phone .body {
  position: absolute;
  inset: calc(-1 * var(--phone-bezel));
  border-radius: calc(124.3px + var(--phone-bezel));
  background: #000;
  box-shadow: var(--phone-shadow);
}
.phone .body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--phone-rim);
  background: linear-gradient(150deg, #8E8E93 0%, #48484C 18%, #2C2C2E 45%, #232325 70%, #5A5A5F 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.phone .body::after {
  content: "";
  position: absolute;
  inset: var(--phone-rim);
  border-radius: calc(124.3px + var(--phone-bezel) - var(--phone-rim));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 2px 1px rgba(255, 255, 255, .06);
}
.phone { --phone-shadow: 0 2px 3px rgba(0, 0, 0, .14), 0 28px 50px -16px rgba(0, 0, 0, .34), 0 80px 140px -50px rgba(0, 0, 0, .3); }
.card.dark .phone { --phone-shadow: 0 0 0 1.5px rgba(255, 255, 255, .09), 0 40px 90px -30px rgba(0, 0, 0, .7); }
.phone .glass-face { position: absolute; inset: 0; border-radius: 124.3px; overflow: hidden; background: #fff; isolation: isolate; }
.phone .ios { transform: scale(var(--scale)); transform-origin: 0 0; }