.iphone-mockup{--phone-metal:#e7e3bf;--phone-metal-shadow:#c3c3c3;--phone-metal-outline:#524b40;--phone-metal-inner:#fff;--phone-metal-highlight:#fff;--phone-signal-start:#817e73;--phone-signal-end:#c3beac;--phone-button:#f0ece3;--phone-button-tip:#fff;--phone-button-highlight:rgb(255 255 255/.8);--phone-button-shadow:#61605d;--phone-bezel:#000100;--phone-bezel-highlight:#879194;--phone-screen:#3a3a3a;position:relative;isolation:isolate;container-type:inline-size;flex:none;width:min(100%,340px);aspect-ratio:377/785}.iphone-mockup[data-finish=dark]{--phone-metal:#000;--phone-metal-shadow:#7b7b7b;--phone-metal-outline:#000;--phone-metal-inner:#5f5f5f;--phone-metal-highlight:#232323;--phone-signal-start:#393939;--phone-signal-end:#4e4e4e;--phone-button:#373737;--phone-button-tip:#909090;--phone-button-highlight:rgb(85 85 85/.8);--phone-button-shadow:#000}.iphone-mockup__layer{--unit:calc(100cqw / 377);position:absolute;box-sizing:border-box;left:calc(var(--x) * var(--unit));top:calc(var(--y) * var(--unit));width:calc(var(--w) * var(--unit));height:calc(var(--h) * var(--unit));border-radius:calc(var(--r) * var(--unit))}.iphone-mockup__hardware{position:absolute;inset:0;pointer-events:none}.iphone-mockup__metal{overflow:hidden;background:var(--phone-metal)}.iphone-mockup__metal-shadow{border:calc(3 * var(--unit)) solid var(--phone-metal-shadow);filter:blur(calc(2 * var(--unit)))}.iphone-mockup__metal-outline{border:var(--unit) solid var(--phone-metal-outline);filter:blur(var(--unit))}.iphone-mockup__metal-inner{border:var(--unit) solid var(--phone-metal-inner);filter:blur(var(--unit))}.iphone-mockup__metal-highlight{border:calc(.4 * var(--unit)) solid var(--phone-metal-highlight)}.iphone-mockup__signal{background:linear-gradient(to bottom,var(--phone-signal-start),var(--phone-signal-end))}.iphone-mockup__signal--left{background:linear-gradient(to right,var(--phone-signal-start),var(--phone-signal-end))}.iphone-mockup__signal--bottom{background:linear-gradient(to top,var(--phone-signal-start),var(--phone-signal-end))}.iphone-mockup__signal--right{background:linear-gradient(to left,var(--phone-signal-start),var(--phone-signal-end))}.iphone-mockup__bezel{overflow:hidden;background:var(--phone-bezel)}.iphone-mockup__bezel-highlight{border:calc(4 * var(--unit)) solid var(--phone-bezel-highlight);filter:blur(calc(3.5 * var(--unit)))}.iphone-mockup__button{overflow:hidden;border-radius:calc(2 * var(--unit)) 0 0 calc(2 * var(--unit))}.iphone-mockup__button--power{transform:rotate(180deg)}.iphone-mockup__button-base{border-radius:inherit;background:linear-gradient(to bottom,rgb(0 0 0/.76),transparent var(--fade-top)),linear-gradient(to left,#000,rgb(174 174 174/0) 70%),linear-gradient(to bottom,transparent var(--fade-bottom),rgb(0 0 0/.48)),var(--phone-button)}.iphone-mockup__button-tip{background:var(--phone-button-tip);filter:blur(calc(.5 * var(--unit)))}.iphone-mockup[data-finish=dark] .iphone-mockup__button-tip{top:calc(var(--dark-y) * var(--unit));height:calc(var(--dark-h) * var(--unit))}.iphone-mockup__button-highlight{background:var(--phone-button-highlight);filter:blur(calc(.5 * var(--unit)))}.iphone-mockup__button-shadow{background:var(--phone-button-shadow);filter:blur(var(--unit))}.iphone-mockup__screen{overflow:hidden;background:var(--phone-screen);color:#fff}.iphone-mockup .iphone-mockup__image{display:block;width:100%;height:auto;max-width:none;max-height:none;margin:0;border:0;border-radius:0;filter:none;-o-object-fit:contain;object-fit:contain;-o-object-position:center top;object-position:center top}.iphone-mockup[data-fit=contain] .iphone-mockup__image{height:100%;-o-object-position:center;object-position:center}.iphone-mockup[data-fit=cover] .iphone-mockup__image{height:100%;-o-object-fit:cover;object-fit:cover}.iphone-mockup__screen>:not(.iphone-mockup__image){box-sizing:border-box;width:100%;height:100%}.iphone-mockup__island,.iphone-mockup__status{pointer-events:none}.iphone-mockup__island img{display:block;width:calc(111 * var(--unit));height:auto;max-width:none;margin:0;border:0;border-radius:0;filter:none}.iphone-mockup__status{color:color-mix(in srgb,#fff calc(var(--status-tone) * 100%),#000)}.iphone-mockup__time{position:absolute;left:0;top:0;width:calc(35 * var(--unit));font:600 calc(17 * var(--unit)) /calc(22 * var(--unit)) -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:calc(-.8 * var(--unit));text-align:center}.iphone-mockup .iphone-mockup__status-icons{position:absolute;display:block;right:0;top:calc(4 * var(--unit));width:calc(75.401 * var(--unit));height:auto;max-width:none;margin:0;border:0;border-radius:0;filter:invert(calc(1 - var(--status-tone)))}