.phone{--phone-w:14rem;width:var(--phone-w);aspect-ratio:9/15.5;padding:calc(var(--phone-w) * .035);border-radius:calc(var(--phone-w) * .17);background:linear-gradient(145deg,#3a3f3c 0%,#1b1e1d 40%,#2a2e2c 100%);position:relative;box-shadow:inset 0 0 0 1.5px #ffffff1f,0 2px 4px #1d2a2414,0 22px 44px #1d2a2429}.phone:before,.phone:after{content:"";background:#2a2e2c;border-radius:2px;width:3px;position:absolute}.phone:before{height:12%;top:22%;left:-2px}.phone:after{height:16%;top:28%;right:-2px}.phone__screen{border-radius:calc(var(--phone-w) * .14);height:100%;font-family:var(--font-body);font-size:calc(var(--phone-w) * .055);flex-direction:column;display:flex;position:relative;overflow:hidden}.phone--pocket .phone__screen{background:linear-gradient(180deg, #fffaf4 0%, var(--pk-cream) 100%);color:var(--pk-ink)}.phone--forest .phone__screen{background:linear-gradient(180deg, #1f5340 0%, var(--sp-forest) 60%, #153d2d 100%);color:var(--sp-cream)}.phone__screen img{object-fit:cover;width:100%;height:100%}.phone__status{grid-template-columns:1fr auto 1fr;align-items:center;padding:.75em 1.3em 0;font-size:.72em;font-weight:600;display:grid}.phone__island{background:#0b0d0c;border-radius:1em;width:4.6em;height:1.5em}.phone__icons{justify-content:flex-end;align-items:center;gap:.35em;display:flex}.phone__signal{clip-path:polygon(0 100%,100% 0,100% 100%);opacity:.85;background:linear-gradient(90deg,currentColor 20%,#0000 20% 40%,currentColor 40% 60%,#0000 60% 80%,currentColor 80%);width:1.1em;height:.7em}.phone__battery{opacity:.85;background:linear-gradient(90deg,currentColor 70%,#0000 70%) content-box content-box;border:1.5px solid;border-radius:.25em;width:1.5em;height:.7em;padding:1px;box-shadow:inset 0 0 0 1.5px #0000}.phone__content{flex:1;padding:1.2em 1em .8em}.phone__home{opacity:.35;background:currentColor;border-radius:1em;align-self:center;width:36%;height:.28em;margin-bottom:.55em}.screenshot-placeholder{text-align:center;box-sizing:border-box;flex:1;justify-content:center;align-items:center;width:100%;height:100%;min-height:0;padding:12%;display:flex}.screenshot-placeholder span{letter-spacing:.01em;opacity:.9;font-size:clamp(12px,1em,17px);font-weight:600;line-height:1.5}
