:root{color-scheme:light;--pink:#ffe5e9;--purple:#502c98;--hot-pink:#fc4c80}
*{box-sizing:border-box}
html{min-height:100%;background:var(--pink)}
body{margin:0;min-width:260px;background:linear-gradient(180deg,var(--pink) 0%,#fff0f3 100%);color:var(--purple);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
main{width:100%;min-height:100svh;padding:24px 24px 22px;display:flex;flex-direction:column;align-items:center;text-align:center}
header{flex:none}
.peach{display:block;margin:0 auto;width:94px;height:94px;mix-blend-mode:darken}
h1{font-size:36px;font-weight:750;line-height:1.1;letter-spacing:-1.5px;margin:0 0 20px}
.intro{font-size:18px;font-weight:600;line-height:1.35;margin:0 0 32px}
.preview{width:min(100%,330px);position:relative;padding:0 24px}
.phone{width:100%;height:382px;padding:19px 13px 0;border:3px solid #e6dde5;border-bottom:0;border-radius:35px 35px 0 0;background:#fff;overflow:hidden;box-shadow:0 2px 3px #552c9810;text-align:left}
.speaker{width:42px;height:5px;border-radius:10px;background:#e9e5e9;margin:0 auto 16px}
.screen{height:335px;position:relative;overflow:hidden;background:#fff4ec;border:1px solid #f1e9e8;border-radius:3px 3px 0 0;color:#45404b}
.status{display:flex;justify-content:space-between;padding:7px 10px;background:#fff;font-size:12px;font-weight:700}
.screen-header{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:5px 12px 12px;color:var(--purple);font-size:20px;letter-spacing:-.6px}
.profile{display:flex;align-items:center;gap:9px;background:#fff;margin:9px 7px 0;padding:12px 8px;border:1px solid #efe8e5;border-radius:7px}
.profile div{display:flex;flex-direction:column;gap:3px;min-width:0}
.profile strong,.post strong{font-size:14px;font-weight:600}
.profile div>span{font-size:12px;color:#8c8592}
.chevron{font-size:24px;color:#c5bfca;margin-left:auto}
.avatar{width:29px;height:29px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:20px}
.pink{background:#ffdce7;color:#bd386c}.yellow{background:#ffe9b6;color:#a76907}.lavender{background:#e8dfff;color:#7050ad}.green{background:#d8eee4;color:#458064}.blue{background:#dceafb;color:#5a7fbc}
.friends-label{padding:13px 13px 8px;font-size:12px;letter-spacing:.6px;color:#9b8b8e;font-weight:600}
.feed{background:#fff;margin:0 7px;border:1px solid #efe8e5;border-radius:7px}
.post{display:flex;align-items:center;gap:8px;padding:12px 8px;border-bottom:1px solid #f2eef2;min-height:62px}
.post>div{min-width:0;flex:1}.post p{font-size:12px;line-height:1.4;color:#968b9b;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post time{font-size:12px;color:#a99dae;align-self:center}
.screen-fade{position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(transparent,#fff4ec)}
.coming-soon{position:relative;z-index:1;margin:-1px -24px 0;padding:18px 16px;background:var(--hot-pink);color:#fff;font-size:19px;font-weight:700;border-radius:7px;line-height:1.25;box-shadow:0 2px 0 #e2386c12}
footer p{margin:22px 0 0;font-size:14px;line-height:1.5;color:#78559e;font-weight:400}footer strong{font-weight:600}
@media(min-height:850px){main{padding-top:48px}.intro{margin-bottom:40px}.phone{height:410px}.screen{height:363px}}
@media(max-width:360px){main{padding-inline:16px}.intro{font-size:17px}.wide-break{display:none}.preview{padding-inline:20px}.coming-soon{margin-inline:-20px}.phone{padding-inline:10px}}