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