/* Celular de pré-visualização, igual a um aparelho de verdade:
   barra de status com hora, ilha da câmera e bateria em cima; o app começa ABAIXO dela. */
.device { --bezel: 10px; --radius: 52px; position: relative; flex: none; background: #14161D; border-radius: var(--radius); padding: var(--bezel);
  box-shadow: 0 0 0 1.5px #2C2F3A, 0 30px 70px rgba(27,31,42,.22), inset 0 0 0 1px rgba(255,255,255,.06); }
.device::before, .device::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2C2F3A; }
.device::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 calc(100% + 18px) 0 #2C2F3A; }
.device::after { right: -3px; top: 28%; height: 14%; }
.device-screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--radius) - var(--bezel)); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.device-status { flex: none; height: 46px; display: grid; grid-template-columns: 1fr 112px 1fr; align-items: center; padding: 0 22px 0 30px; background: #fff; color: #111; font: 600 14px/1 -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; letter-spacing: -.01em; }
.device-status .t { justify-self: start; }
.device-status .island { justify-self: center; width: 104px; height: 30px; border-radius: 16px; background: #050506; }
.device-status .icons { justify-self: end; display: flex; gap: 5px; align-items: center; }
.device-status .icons svg { display: block; }
.device-screen iframe { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: #fff; }
.device-home { flex: none; height: 22px; background: #fff; display: grid; place-items: center; }
.device-home::after { content: ""; width: 120px; height: 5px; border-radius: 3px; background: #111; opacity: .85; }

/* Tamanho no painel: o celular inteiro cabe na altura da tela */
.device.fit { height: min(calc(100vh - 118px), 820px); aspect-ratio: 390 / 844; max-width: 100%; }
/* Tamanho na home do site: conteúdo em escala, celular menor */
.device.mini { --bezel: 8px; --radius: 44px; width: 272px; height: 572px; }
.device.mini .device-status { height: 34px; padding: 0 16px 0 22px; font-size: 11px; grid-template-columns: 1fr 78px 1fr; }
.device.mini .device-status .island { width: 74px; height: 22px; border-radius: 12px; }
.device.mini .device-status .icons svg { transform: scale(.8); }
.device.mini .device-home { height: 16px; }
.device.mini .device-home::after { width: 90px; height: 4px; }
.device.mini .scaler { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.device.mini .scaler iframe { position: absolute; left: 0; top: 0; width: 375px; height: 742px; transform: scale(.68); transform-origin: 0 0; }