body{background:transparent;color:#0B1221;padding:10px 6px 12px}.phone{width:350px;box-shadow:0 18px 35px #0b122122}.device-label{color:#52606e;font-size:10px}.hint{color:#0B1221;font-size:12px;font-weight:800;background:#F5B841;padding:12px 14px;border-radius:12px;text-align:center;line-height:1.6;max-width:340px}.notice{color:#52606e}.profile-trigger:after{content:'';position:absolute;inset:-3px;border:2px solid #F5B841;border-radius:16px;animation:bt-attention 1.6s ease-out 5;pointer-events:none}.interacted .profile-trigger:after{display:none}@keyframes bt-attention{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.09)}}@media(prefers-reduced-motion:reduce){.profile-trigger:after{animation:none}}@media(max-width:340px){.phone{width:100%}.hint{font-size:11px}}
.device-label,.notice{color:#bdc9da}

html{overflow:hidden;background:#0B1221}body{background:#0B1221}
.hint{background:#152238;color:#c5d2e5;border:1px solid #34465f;border-radius:9px;font-weight:600;padding:10px 12px}
.profile-trigger:after{animation:bt-attention 2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.profile-trigger:after{animation:none}}
.compact-phone .phone{width:320px;container-type:inline-size}
.compact-phone #profile{height:calc(216.8cqw - 110px);overflow:hidden}
.compact-phone .profile-image{transform:translateY(-110px)}
.compact-phone .profile-trigger{top:calc(175.61cqw - 110px);height:14.31cqw}
.compact-phone .owner-call{top:calc(193.17cqw - 110px);height:14.31cqw}
.compact-phone .device-label{margin-bottom:10px}
.compact-phone .hint{margin-top:10px;font-size:11px}
.compact-phone .call{padding:22px 16px 16px}
.compact-phone .call-avatar{width:56px;height:56px;font-size:36px;margin:12px 0 8px}
.compact-phone .call h2{font-size:26px;margin:6px 0 10px}
.compact-phone .call-bottom{gap:5px}
.compact-phone .another{margin-top:4px;padding:9px}

/* Show the complete phone, scaled to the mobile viewport instead of cropping it. */
.compact-phone .phone{width:320px;max-width:none;container-type:normal;zoom:var(--bt-phone-scale,1)}
.compact-phone #profile{height:auto;overflow:visible}
.compact-phone .profile-image{transform:none}
.compact-phone .profile-trigger{top:81%;height:6.6%}
.compact-phone .owner-call{top:89.1%;height:6.6%}
.compact-phone .hint{max-width:290px;font-size:10px;padding:8px 10px}

/* A readable instruction underneath the demo, including scaled mobile phones. */
.hint,.compact-phone .hint{
 box-sizing:border-box;max-width:290px;width:fit-content;margin:12px auto 4px;
 padding:8px 12px;background:#eaf4ff;color:#101522;border:0;
 border-radius:6px;font-size:14px;font-weight:600;line-height:1.45;text-align:center;
}