/* Phone frames and a fan of three phones, drawn only in CSS. Copy this file into any OpenApp.
   Needs no other stylesheet and no scripts. Plain screenshots go inside, the frame is drawn around them.

   <div class="pf-fan" style="--pw: 300px">
     <figure class="pf pf-left">  <div class="pf-screen"><img src="a.webp" alt="..."><span class="pf-island"></span><span class="pf-status"><b>9:41</b><i class="pf-signal"></i><i class="pf-wifi"></i><i class="pf-battery"></i></span></div></figure>
     <figure class="pf pf-mid">   ... </figure>
     <figure class="pf pf-right"> ... </figure>
   </div>

   --pw is the width of the front phone. Everything else scales from it.
   A single phone: give one .pf a width with style="--pw: 240px" and no .pf-fan.
   Screenshots should be about 390 x 844 (or twice that); the top 20 px or so should be empty. The frame adds a white band above the screenshot for the status bar. */

.pf {
  --u: calc(var(--pw, 300px) / 100);
  position: relative;
  width: var(--pw, 300px);
  margin: 0;
  padding: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 14);
  background: #15171b;
  box-shadow:
    inset 0 0 0 calc(var(--u) * .4) #3a3d44,
    0 calc(var(--u) * 1) calc(var(--u) * 2) #0b0d1226,
    0 calc(var(--u) * 7) calc(var(--u) * 14) calc(var(--u) * -3) #0b0d1259,
    0 calc(var(--u) * 20) calc(var(--u) * 30) calc(var(--u) * -8) #1f2a4a40;
}
.pf-screen { position: relative; overflow: hidden; padding-top: calc(var(--u) * 5); border-radius: calc(var(--u) * 11.6); background: #fff; line-height: 0; }
.pf-screen img { display: block; width: 100%; height: auto; }

.pf-island {
  position: absolute; z-index: 2; left: 50%; top: calc(var(--u) * 2.3); transform: translateX(-50%);
  width: calc(var(--u) * 27); height: calc(var(--u) * 7.4); border-radius: 999px; background: #0b0b0c;
}
.pf-status {
  position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--u) * 2.3); height: calc(var(--u) * 7.4);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 9);
  display: flex; align-items: center; gap: calc(var(--u) * 1.5);
  color: #15171b; line-height: 1; pointer-events: none;
}
.pf-status b {
  margin-right: auto; font: 600 calc(var(--u) * 4.2)/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.01em;
}
.pf-signal, .pf-wifi, .pf-battery { display: block; flex: none; background: currentColor; }
.pf-signal {
  width: calc(var(--u) * 5.4); height: calc(var(--u) * 3.6); background: none;
  background-image:
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 18% 35%, 18% 55%, 18% 78%, 18% 100%;
  background-position: 0 100%, 27% 100%, 54% 100%, 81% 100%;
}
.pf-wifi {
  width: calc(var(--u) * 5.2); height: calc(var(--u) * 3.8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M10 3.2c2.6 0 5 1 6.800 2.700l1.300-1.400C15.900 2.400 13.100 1.200 10 1.200S4.100 2.400 1.900 4.500l1.300 1.400C5 4.200 7.400 3.2 10 3.2Zm0 4c1.500 0 2.800.6 3.900 1.500l1.300-1.400C13.800 6.100 12 5.200 10 5.200S6.200 6.100 4.800 7.300l1.300 1.400C7.200 7.800 8.500 7.200 10 7.200Zm0 4c.7 0 1.300.3 1.800.7L10 14l-1.800-2.100c.5-.4 1.100-.7 1.800-.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M10 3.2c2.600 0 5 1 6.800 2.700l1.300-1.400C15.900 2.400 13.100 1.200 10 1.200S4.100 2.400 1.900 4.500l1.300 1.400C5 4.200 7.400 3.2 10 3.2Zm0 4c1.500 0 2.800.6 3.900 1.500l1.300-1.400C13.800 6.100 12 5.200 10 5.200S6.200 6.100 4.800 7.300l1.300 1.400C7.200 7.800 8.500 7.200 10 7.200Zm0 4c.7 0 1.300.3 1.800.7L10 14l-1.800-2.100c.5-.4 1.100-.7 1.800-.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pf-battery {
  position: relative; width: calc(var(--u) * 7.4); height: calc(var(--u) * 3.6); box-sizing: border-box;
  background: none; border: calc(var(--u) * .45) solid #15171b66; border-radius: calc(var(--u) * 1.2); padding: calc(var(--u) * .45);
}
.pf-battery::before { content: ""; display: block; width: 100%; height: 100%; border-radius: calc(var(--u) * .6); background: currentColor; }
.pf-battery::after {
  content: ""; position: absolute; right: calc(var(--u) * -1.3); top: 50%; transform: translateY(-50%);
  width: calc(var(--u) * .8); height: calc(var(--u) * 1.4); border-radius: 0 calc(var(--u) * .6) calc(var(--u) * .6) 0; background: #15171b66;
}

/* The fan: the middle phone in front and biggest, the other two tucked behind it, a little lower. */
.pf-fan {
  --side: .82;
  position: relative;
  width: calc(var(--pw, 300px) * 2.1);
  max-width: 100%;
  height: calc(var(--pw, 300px) * 2.36);
  margin-inline: auto;
}
.pf-fan .pf { position: absolute; top: 0; left: 50%; }
.pf-fan .pf-mid { --pw: var(--fan-pw, 300px); z-index: 3; transform: translateX(-50%); }
.pf-fan .pf-left, .pf-fan .pf-right { --pw: calc(var(--fan-pw, 300px) * var(--side)); z-index: 1; top: calc(var(--fan-pw, 300px) * .3); }
.pf-fan .pf-left { transform: translateX(-50%) translateX(calc(var(--fan-pw, 300px) * var(--fan-off, .62) * -1)) rotate(-4deg); transform-origin: 50% 100%; }
.pf-fan .pf-right { transform: translateX(-50%) translateX(calc(var(--fan-pw, 300px) * var(--fan-off, .62))) rotate(4deg); transform-origin: 50% 100%; }
.pf-fan { --fan-pw: var(--pw, 300px); }