.phone{--pw: var(--phone-w, 300px);--u: calc(var(--pw) / 402);--band-r: calc(64 * var(--u));position:relative;width:var(--pw);aspect-ratio:426 / 898;flex:none;border-radius:var(--band-r);padding:calc(12 * var(--u));background:linear-gradient(155deg,#edf0f3,#b9c0c8 14%,#e4e8ec 30%,#8e969f,#d5dae0,#98a0a9 84%,#c4cad1);box-shadow:0 calc(50 * var(--u)) calc(110 * var(--u)) calc(-30 * var(--u)) #050c148c,0 calc(16 * var(--u)) calc(36 * var(--u)) calc(-14 * var(--u)) #050c1459,inset 0 0 0 calc(1 * var(--u)) #ffffff8c}.phone:before{content:"";position:absolute;inset:calc(4 * var(--u));border-radius:calc(60 * var(--u));background:#07090c;box-shadow:inset 0 0 0 calc(1 * var(--u)) #ffffff0f}.phone:after{content:"";position:absolute;inset:0;border-radius:var(--band-r);pointer-events:none;z-index:4;background:linear-gradient(118deg,#ffffff47,#ffffff0f 16%,#fff0 30% 70%,#ffffff0d 88%,#ffffff29);mix-blend-mode:screen;opacity:.9}.phone__keys{position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:var(--band-r);background:linear-gradient(90deg,#6e7680,#b7bec6) calc(-3 * var(--u)) calc(178 * var(--u)) / calc(4 * var(--u)) calc(34 * var(--u)) no-repeat,linear-gradient(90deg,#6e7680,#b7bec6) calc(-3 * var(--u)) calc(238 * var(--u)) / calc(4 * var(--u)) calc(64 * var(--u)) no-repeat,linear-gradient(90deg,#6e7680,#b7bec6) calc(-3 * var(--u)) calc(318 * var(--u)) / calc(4 * var(--u)) calc(64 * var(--u)) no-repeat,linear-gradient(270deg,#6e7680,#b7bec6) calc(100% + 3 * var(--u)) calc(262 * var(--u)) / calc(4 * var(--u)) calc(100 * var(--u)) no-repeat}.phone__screen{position:relative;z-index:1;height:100%;border-radius:calc(52 * var(--u));overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--body);isolation:isolate}.phone__screen>img{width:100%;height:100%;object-fit:cover;object-position:top}.phone{--pt: calc(var(--u) * 378 / 402)}.phone__island{position:absolute;z-index:5;top:calc(11 * var(--pt));left:50%;transform:translate(-50%);width:calc(126 * var(--pt));height:calc(37 * var(--pt));border-radius:calc(18.5 * var(--pt));background:#000;box-shadow:inset 0 0 0 calc(1 * var(--u)) #ffffff0a}.phone>.phone__island{top:calc(12 * var(--u) + 11 * var(--pt))}.phone__island:after{content:"";position:absolute;right:calc(14 * var(--pt));top:50%;transform:translateY(-50%);width:calc(10 * var(--pt));height:calc(10 * var(--pt));border-radius:50%;background:radial-gradient(circle at 35% 35%,#1b2c3d,#050810 70%)}.phone__home{position:absolute;z-index:5;bottom:calc(8 * var(--pt));left:50%;transform:translate(-50%);width:calc(139 * var(--pt));height:calc(5 * var(--pt));border-radius:100px;background:var(--text);opacity:.7}.phone>.phone__home{bottom:calc(12 * var(--u) + 8 * var(--pt))}[data-theme=platinum] .phone{box-shadow:0 calc(50 * var(--u)) calc(110 * var(--u)) calc(-30 * var(--u)) #0f223759,0 calc(16 * var(--u)) calc(36 * var(--u)) calc(-14 * var(--u)) #0f223738,inset 0 0 0 calc(1 * var(--u)) #ffffffb3}