/* Copied from the D4U Store shell (apps/shell/css/shell.css) by tools/build.py. Do not edit. */
/* ───── Devices: the one phone and the one tablet every D4U page draws ─────
   A generic device, the same for every app: dark frame, even bezel, a camera dot (no Apple island:
   Apple's marketing rules don't allow drawing its products). The screen inside is a real capture
   with no frame or rounded corners of its own. Set the size with --sh-phone-w / --sh-tablet-w.
   <span class="sh-phone"><img src="img/screen-home.jpg" alt="…" width="660" height="1434"></span> */
.sh-phone, .sh-tablet { position: relative; display: block; max-width: 100%; box-sizing: border-box; background: #0E1014; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -24px rgba(0, 0, 0, .55); }
.sh-phone { --sh-phone-w: 240px; width: var(--sh-phone-w); aspect-ratio: 660 / 1434; padding: calc(var(--sh-phone-w) * .03); border-radius: calc(var(--sh-phone-w) * .16); }
.sh-phone > img, .sh-phone > .sh-screen { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--sh-phone-w) * .13); }
.sh-phone::after { content: ""; position: absolute; top: calc(var(--sh-phone-w) * .06); left: 50%; width: calc(var(--sh-phone-w) * .045); aspect-ratio: 1; border-radius: 50%; background: #0E1014; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); transform: translateX(-50%); }
.sh-tablet { --sh-tablet-w: 560px; width: var(--sh-tablet-w); aspect-ratio: 2388 / 1668; padding: calc(var(--sh-tablet-w) * .02); border-radius: calc(var(--sh-tablet-w) * .045); }
.sh-tablet > img, .sh-tablet > .sh-screen { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--sh-tablet-w) * .028); }