/* 真实比例的 iPhone / iPad 外框。--w 是整机宽度。 */
.iphone { --w: 300px; position: relative; width: var(--w); padding: calc(var(--w) * 0.034); border-radius: calc(var(--w) * 0.175);
  background: #121214; box-shadow: inset 0 0 0 calc(var(--w) * 0.007) #3c3c40, inset 0 0 0 calc(var(--w) * 0.012) #19191b,
  0 calc(var(--w) * 0.16) calc(var(--w) * 0.3) calc(var(--w) * -0.1) rgba(20, 16, 10, .38); flex: none; }
.iphone .scr { position: relative; border-radius: calc(var(--w) * 0.142); overflow: hidden; aspect-ratio: 1320 / 2868; background: #fff; }
.iphone .scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.iphone .scr::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--w) * 0.024);
  width: calc(var(--w) * 0.27); height: calc(var(--w) * 0.08); border-radius: 999px; background: #0a0a0b; }
.iphone.no-island .scr::after { display: none; }

.ipad { --w: 640px; position: relative; width: var(--w); padding: calc(var(--w) * 0.024); border-radius: calc(var(--w) * 0.05);
  background: #121214; box-shadow: inset 0 0 0 calc(var(--w) * 0.003) #3c3c40,
  0 calc(var(--w) * 0.08) calc(var(--w) * 0.16) calc(var(--w) * -0.05) rgba(20, 16, 10, .32); flex: none; }
.ipad .scr { border-radius: calc(var(--w) * 0.028); overflow: hidden; aspect-ratio: 4 / 3; background: #fff; }
.ipad .scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.appicon { display: block; border-radius: 22.5%; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px -14px rgba(30, 20, 5, .35); }