/*
 * Hardware adapted from LiquidFrame (MIT), Copyright (c) 2026 liquidframe contributors.
 * Source: https://github.com/CVERInc/liquidframe/tree/e0353c13f19bb5b48b567fc1e47f3d7ebf42d8ea
 * License: ./liquidframe-LICENSE.txt
 * Adapted to the existing 390 x 844 app canvas, with one scale for the entire device.
 * Native app presentation: no Safari chrome, script, remote asset, or nested scrolling.
 */
.phone { --s: .69; --b: calc(6.5px * var(--s)); --titanium-outer: #a69f96; --titanium-inner: #625d57; position: relative; flex-shrink: 0; width: calc(403px * var(--s)); height: calc(857px * var(--s)); padding: var(--b); border-radius: calc(55px * var(--s)); background: #050506; box-shadow: 0 24px 48px -20px rgba(27,36,54,.38), 0 5px 12px -6px rgba(0,0,0,.4), 0 0 0 calc(1px * var(--s)) var(--titanium-outer), 0 0 0 calc(2.5px * var(--s)) var(--titanium-inner), inset 0 0 0 calc(1px * var(--s)) rgba(255,255,255,.3); }
.phone-scr { position: relative; width: calc(390px * var(--s)); height: calc(844px * var(--s)); border-radius: calc(48.5px * var(--s)); overflow: hidden; background: #12100e; }
.scr { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--s)); transform-origin: 0 0; }
.phone-hardware { position: absolute; inset: 0; pointer-events: none; color: #fff; }
.phone-btn { position: absolute; width: calc(3px * var(--s)); background: var(--titanium-outer); box-shadow: inset 0 0 calc(1px * var(--s)) #fff8; border-radius: calc(2px * var(--s)); }
.phone-btn-action, .phone-btn-up, .phone-btn-down { left: calc(-4.5px * var(--s)); }
.phone-btn-action { top: calc(114px * var(--s)); height: calc(28px * var(--s)); }
.phone-btn-up { top: calc(168px * var(--s)); height: calc(58px * var(--s)); }
.phone-btn-down { top: calc(242px * var(--s)); height: calc(58px * var(--s)); }
.phone-btn-power { right: calc(-4.5px * var(--s)); top: calc(184px * var(--s)); height: calc(88px * var(--s)); }
.island { position: absolute; top: calc(17.5px * var(--s)); left: 50%; width: calc(112px * var(--s)); height: calc(32px * var(--s)); transform: translateX(-50%); border-radius: 999px; background: #000; box-shadow: inset 0 0 calc(2px * var(--s)) #ffffff18; }
.island::after { content: ""; position: absolute; right: calc(13px * var(--s)); top: calc(11px * var(--s)); width: calc(10px * var(--s)); height: calc(10px * var(--s)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1f3041, #0b1017 45%, #000 75%); box-shadow: inset 0 0 calc(1px * var(--s)) #54718b; }
.phone-status { position: absolute; left: calc(6.5px * var(--s)); top: calc(6.5px * var(--s)); width: 390px; height: 54px; padding: 0 30px 0 38px; display: flex; align-items: center; justify-content: space-between; font: 600 15px/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.3px; transform: scale(var(--s)); transform-origin: 0 0; }
.phone-status svg { width: 68px; height: 14px; }
.phone-home { position: absolute; width: calc(134px * var(--s)); height: calc(5px * var(--s)); bottom: calc(14px * var(--s)); left: 50%; transform: translateX(-50%); border-radius: 99px; background: #fff; opacity: .8; }