/* The hero uses the same profile card as authenticated discovery and the sandbox. */
/* Device chrome stays outside animated screens, below the island and above content. */
.hero-phone>.hero-status-bar{inset:7px 7px auto;height:var(--demo-safe-top,44px);padding:10px 20px 16px;background:#fff;border-radius:37px 37px 0 0;z-index:7}
.hero-phone [data-hero-screen="1"].active{display:flex;flex-direction:column;padding-top:var(--demo-safe-top,44px);padding-bottom:10px}
.hero-phone .hero-profile-deck{position:relative;flex:1;min-height:0;margin:0;overflow:hidden;border-radius:24px}
.hero-phone .hero-profile-deck .fc-profile{height:100%;min-height:0}
.hero-phone .hero-card-actions{height:78px;flex:0 0 78px;gap:20px}
.hero-phone .hero-card-actions button:disabled{opacity:.45;cursor:wait}
.hero-phone .fc-summary{left:16px;right:16px;bottom:16px}
.hero-phone .fc-summary h2{font-size:28px;letter-spacing:-.04em}
.hero-phone .fc-details{padding:12px 16px 24px}
.hero-phone .hero-match-avatar{display:block;flex:none;width:95px;height:95px;margin:0 -6px;border:5px solid #fff;border-radius:50%;overflow:hidden;box-shadow:0 8px 25px #310b182b;transform:rotate(7deg);background:#f8e8eb}
.hero-phone .hero-match-avatar>img,.hero-phone .hero-match-avatar>svg{display:block;width:100%;height:100%;margin:0;border:0;border-radius:0;object-fit:cover;transform:translateZ(0)}