.phone-frame{--phone-frame-width:280px;--phone-frame-bezel:.035;--phone-frame-radius:.14;--phone-frame-body:linear-gradient(150deg, #5c5f66, #2b2d31 22%, #1b1c1f 55%, #3a3d43);width:var(--phone-frame-width);padding:calc(var(--phone-frame-width)*var(--phone-frame-bezel));border-radius:calc(var(--phone-frame-width)*var(--phone-frame-radius));background:var(--phone-frame-body);box-shadow:0 24px 48px color-mix(in srgb,var(--color-dark),transparent 80%),0 4px 10px color-mix(in srgb,var(--color-dark),transparent 86%),inset 0 0 0 1px #ffffff38;position:relative}.phone-frame__screen{aspect-ratio:9/19.5;border-radius:calc(var(--phone-frame-width)*(var(--phone-frame-radius) - var(--phone-frame-bezel)));background:var(--phone-frame-backdrop,#111);position:relative;overflow:hidden}.phone-frame__shot{-o-object-fit:contain;object-fit:contain;width:100%;height:100%;display:block}.phone-frame__island{top:calc(var(--phone-frame-width)*.028);width:32%;height:calc(var(--phone-frame-width)*.093);border-radius:100px}.phone-frame__island,.phone-frame__notch{background:#000;position:absolute;left:50%;translate:-50%}.phone-frame__notch{width:54%;height:calc(var(--phone-frame-width)*.072);border-radius:0 0 calc(var(--phone-frame-width)*.035) calc(var(--phone-frame-width)*.035);top:0}.phone-frame--home{--phone-frame-radius:.1;--phone-frame-chin:.18;--phone-frame-home:.115;padding:calc(var(--phone-frame-width)*.135) calc(var(--phone-frame-width)*.045) calc(var(--phone-frame-width)*var(--phone-frame-chin))}.phone-frame--home .phone-frame__screen{aspect-ratio:9/16;border-radius:calc(var(--phone-frame-width)*.01)}.phone-frame__earpiece{top:calc(var(--phone-frame-width)*.062);width:22%;height:calc(var(--phone-frame-width)*.018);background:#0b0c0d;border-radius:100px;box-shadow:inset 0 1px 1px #0009}.phone-frame__earpiece,.phone-frame__home{position:absolute;left:50%;translate:-50%}.phone-frame__home{bottom:calc(var(--phone-frame-width)*(var(--phone-frame-chin) - var(--phone-frame-home))/2);width:calc(var(--phone-frame-width)*var(--phone-frame-home));aspect-ratio:1;background:#16171a;border-radius:50%;box-shadow:inset 0 0 0 1.5px #ffffff4d,inset 0 2px 4px #0000008c}.phone-frame__button{background:inherit;border-radius:2px;position:absolute}.phone-frame__button--down,.phone-frame__button--silence,.phone-frame__button--up{left:calc(var(--phone-frame-width)*-.008);width:calc(var(--phone-frame-width)*.012)}.phone-frame__button--silence{height:4%;top:18%}.phone-frame__button--up{height:9%;top:26%}.phone-frame__button--down{height:9%;top:37%}.phone-frame__button--side{right:calc(var(--phone-frame-width)*-.008);width:calc(var(--phone-frame-width)*.012);height:13%;top:28%}.phone-frame--home .phone-frame__button--silence{height:3%;top:14%}.phone-frame--home .phone-frame__button--up{height:7%;top:20%}.phone-frame--home .phone-frame__button--down{height:7%;top:29%}.phone-frame--home .phone-frame__button--side{height:8%;top:20%}.phone-mock{flex:none;width:max-content;margin:0}.phone-mock__caption{margin-top:var(--space-s);text-align:center;font-size:var(--font-size-s,.875rem);opacity:.7}