/* iPhone status bar (brand sheet: every phone shows one, identical). 9:41, full signal, Wi-Fi, full battery, Dynamic Island.
   It sits above the app's screen like on a real iPhone; the screen (image or loop) changes beneath it. Sized in container
   units so it scales with the phone. The screens carry their own top strip (the screen's top color, built into each image
   and loop), so the bar is see-through and dims along with the screen. .dark-screen switches to light symbols. */
.phone .screen { container-type: inline-size; position: relative; overflow: hidden; border-radius: 37px; }
.phone .screen > img, .phone .screen > video { display: block; width: 100%; height: auto; border-radius: 0 !important; }
.sbar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 13.2cqw; display: flex; align-items: center; justify-content: space-between; padding: 1.4cqw 7.4cqw 0 10.2cqw; color: #000; }
.dark-screen .sbar { color: #fff; }
.sbar time { font: 600 4.35cqw/1 -apple-system, "SF Pro Text", "Figtree", system-ui, sans-serif; letter-spacing: -.01em; }
.sbar .island { position: absolute; left: 50%; top: 2.9cqw; transform: translateX(-50%); width: 31.5cqw; height: 9.4cqw; border-radius: 999px; background: #000; }
.sbar .icons { display: flex; align-items: center; gap: 1.6cqw; }
.sbar svg { display: block; fill: currentColor; }
.sbar .sig { width: 4.6cqw; height: 3cqw; } .sbar .wifi { width: 4.3cqw; height: 3.1cqw; } .sbar .batt { width: 7cqw; height: 3.3cqw; }