@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
html,body{margin:0;height:100%;background:transparent;overflow:hidden}
@media (prefers-reduced-motion:reduce){.phone{animation:none}}
body{font-family:Inter,system-ui,sans-serif}
/* The shared device extends beyond the iframe; the hero owns the bottom crop. */
#stage{position:absolute;left:50%;top:0;z-index:2;width:415px;height:auto;transform-origin:top center;
  transform:translateX(-50%) scale(var(--s,1));display:flex;justify-content:center;overflow:visible;}
@keyframes bob{to{transform:translateY(-8px)}}

*{box-sizing:border-box;margin:0}





/* ---------- visual ---------- */

/* conveyor of creatives behind the phone (flat, no perspective) */


.layer .ph{position:absolute;inset:0}


/* flat phone — realistic metal frame */
.phone{position:relative;z-index:5;width:409px;min-height:868px;height:auto;border-radius:58px;padding:3px;
  /* Frame variants: --frame-silver (active) or --frame-red (set background:var(--frame-red) to switch) */
  --frame-red:conic-gradient(from var(--a),#5a000c,#ff5a5a 12%,#b3001b 25%,#4a000a 40%,#e0283c 55%,#6e0010 70%,#ff6b6b 82%,#5a000c);
  --frame-silver:conic-gradient(from var(--a),#0b0b0d 0deg,#0b0b0d 210deg,#2a2b2f 235deg,#8d9098 252deg,#2a2b2f 270deg,#0b0b0d 295deg,#0b0b0d 360deg);
  background:var(--frame-silver);animation:spin 6s linear infinite;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.08)}
.phone::before{content:"";position:absolute;inset:3px;border-radius:55px;background:#050505;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.phone .bezel{position:relative;width:100%;height:100%;border-radius:55px;padding:5px}
.btn-side{position:absolute;width:3px;background:#1c1c1f}
.btn-side.a,.btn-side.v1,.btn-side.v2{left:-3px;border-radius:2px 0 0 2px}.btn-side.a{top:120px;height:32px}.btn-side.v1{top:180px;height:64px}.btn-side.v2{top:260px;height:64px}
.btn-side.p{right:-3px;top:220px;height:100px;border-radius:0 2px 2px 0}
.status{position:absolute;top:0;left:0;right:0;height:54px;z-index:5;display:block;
  padding:0;color:#fff;font:600 17px/1 -apple-system,Inter,system-ui,sans-serif;pointer-events:none}
.status .ic{display:flex;gap:4px;align-items:center;position:absolute;left:327px;top:28px;transform:translate(-50%,-50%)}.status #clock{position:absolute;left:66px;top:28px;transform:translate(-50%,-50%);letter-spacing:-.2px}
.screen{position:relative;width:100%;height:100%;border-radius:50px;overflow:hidden;background:#111}
.island{position:absolute;top:11px;left:50%;width:118px;height:34px;margin-left:-59px;border-radius:17px;background:#000;z-index:6}
.layer{position:absolute;inset:0;transition:opacity .9s ease,filter .9s ease,transform .9s ease}
.layer.out{opacity:0;filter:blur(14px);transform:scale(1.04)}
#phone-sizing-reference .screen{background:#f4f2ee!important;color:#191919;font:13px/1.35 -apple-system,Inter,system-ui,sans-serif}
#phone-sizing-reference .status{color:#000!important}

#phone-sizing-reference .appbar{position:absolute;top:52px;left:0;right:0;height:46px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;z-index:4;border-bottom:1px solid #e8e6e1}
#phone-sizing-reference .appbar .me{width:28px;height:28px;border-radius:50%;background:#cfcfcf center/cover}
#phone-sizing-reference .appbar .search{flex:1;height:30px;border-radius:6px;background:#edf3f8;display:flex;align-items:center;gap:6px;padding:0 10px;color:#5e5e5e;font-size:13px}
#phone-sizing-reference .appbar .msg{width:22px;height:22px;border:2px solid #5e5e5e;border-radius:6px}
#phone-sizing-reference .feed{position:absolute;inset:0;padding-top:54px;overflow:hidden;background:#f4f2ee;z-index:4}#phone-sizing-reference .track{will-change:transform}#phone-sizing-reference .post{position:relative;background:#f3f2ef;display:flex;flex-direction:column;margin-bottom:8px}#phone-sizing-reference .media .ph{position:absolute;inset:0}#phone-sizing-reference .status{background:#fff}
#phone-sizing-reference .ph-head{display:flex;gap:9px;padding:12px 14px 8px;align-items:flex-start;background:#fff}
#phone-sizing-reference .logo{width:44px;height:44px;border-radius:6px;background:#000 center/cover;flex:none;display:grid;place-items:center;color:#fff;font:600 22px/1 Inter,system-ui,sans-serif}
#phone-sizing-reference .who{flex:1;min-width:0}
#phone-sizing-reference .who b{display:block;font-weight:600;font-size:14px;color:#191919}
#phone-sizing-reference .who span{display:block;color:#666;font-size:12px}
#phone-sizing-reference .follow{color:#0a66c2;font-weight:600;font-size:14px;white-space:nowrap}
#phone-sizing-reference .
.body .more{color:#666}
#phone-sizing-reference .media{position:relative;aspect-ratio:1/1;flex:none;overflow:hidden;background:#ddd}
#phone-sizing-reference .media .layer{position:absolute;inset:0}
#phone-sizing-reference .lead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:#eef3f8}
#phone-sizing-reference .lead .hl{font-weight:600;font-size:13px;color:#191919}
#phone-sizing-reference .lead .hl small{display:block;font-weight:400;color:#666;font-size:12px}
#phone-sizing-reference .lead .btn{flex:none;height:30px;padding:0 14px;border-radius:999px;border:1.5px solid #0a66c2;color:#0a66c2;font-weight:600;font-size:13px;display:grid;place-items:center}
#phone-sizing-reference .social{display:flex;justify-content:space-between;padding:10px 14px 8px;color:#666;font-size:12px;background:#fff}
#phone-sizing-reference .actions{display:flex;justify-content:space-around;padding:8px 6px 10px;color:#666;font-size:12px;font-weight:600}
#phone-sizing-reference .actions span{display:flex;flex-direction:column;align-items:center;gap:3px}
#phone-sizing-reference .actions i{width:18px;height:18px;border:2px solid #666;border-radius:4px}


#phone-sizing-reference{position:absolute;top:54px;left:0;right:0;visibility:hidden;pointer-events:none;z-index:-1;font:13px/1.35 -apple-system,Inter,system-ui,sans-serif}
.bfade{position:fixed;bottom:0;height:140px;pointer-events:none;z-index:50;display:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.85) 100%)}
.bfade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;backdrop-filter:blur(6px);mask-image:linear-gradient(to bottom,transparent,#000 40%)}