/* An iPhone 17 Pro, drawn: silver rim, black bezel, a 402×874 pt screen with the Dynamic Island.
   Everything inside the screen is sized in cqw (1cqw = 1% of the screen's width), so the
   island, status bar and video keep the real phone's proportions at any size.
   Used by / and /scorington/. Each page sets the phone's width and the toggle's colors:
   --demo-shadow, --demo-font, --demo-ink, --demo-hover. */
.iphone { --app: #041119; position: relative; width: clamp(236px, 26vw, 300px); padding: 3.4%; border-radius: 17% / 7.9%;
  background: #000;
  box-shadow: 0 0 0 1.5px #c9ccd1, 0 0 0 3px #8d9197, 0 0 0 4px #e4e6e9,
              var(--demo-shadow, 0 30px 50px -18px rgb(20 33 61 / .35), 0 12px 20px -10px rgb(20 33 61 / .25)); }
.iphone > i { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #9a9ea4, #d6d9dc 60%, #a5a9ae); }
.iphone .k-act { left: -7px; top: 18%; height: 5.5%; }
.iphone .k-up { left: -7px; top: 26%; height: 10%; }
.iphone .k-dn { left: -7px; top: 38%; height: 10%; }
.iphone .k-pwr { right: -7px; top: 30%; height: 15%; }
.iphone .k-cam { right: -7px; top: 58%; height: 7%; }
.iphone .screen { position: relative; container-type: inline-size; aspect-ratio: 402 / 874; border-radius: 13.5% / 6.2%; overflow: hidden; background: var(--app); }
.iphone .island { position: absolute; z-index: 2; left: 50%; top: 2.7cqw; width: 31cqw; height: 9.2cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.iphone .sbar { position: absolute; inset: 0 0 auto; height: 14cqw; display: flex; justify-content: space-between; align-items: center; padding: 0 7.5cqw 0 10.5cqw;
  color: #fff; font: 600 4.3cqw/1 -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -.01em; }
.iphone .sbar svg { height: 3.2cqw; width: auto; display: block; }
.iphone .sbar .icons { display: flex; gap: 1.4cqw; align-items: center; }
/* The recording has no status bar, so it sits under the drawn one, on the app's own background. */
.iphone video { position: absolute; left: 4.3cqw; top: 14cqw; width: 91.4cqw; height: auto; aspect-ratio: 600 / 1300; }
.iphone .home-ind { position: absolute; left: 50%; bottom: 2cqw; width: 35cqw; height: 1.3cqw; transform: translateX(-50%); border-radius: 99px; background: rgb(255 255 255 / .85); }
.iphone .glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgb(255 255 255 / .07) 0 22%, transparent 38%); }

.vid-toggle { display: inline-flex; align-items: center; gap: 8px; font: 600 .875rem var(--demo-font, system-ui, sans-serif); color: var(--demo-ink, currentColor);
  background: none; border: 0; padding: 8px 10px; cursor: pointer; }
.vid-toggle:hover { color: var(--demo-hover, currentColor); }
.vid-toggle svg { width: 12px; height: 12px; }
.vid-toggle[hidden] { display: none; }