.hero{position:relative;border-radius:23px 23px 0 0;grid-template-columns:minmax(0,1fr) auto}
.collection{overflow:visible}
.collection>.next-frame{border-radius:0 0 23px 23px;background:white}
.collection:has(.visitor){margin-top:0}
.hero-profile,.hero.has-visitor .hero-profile{padding-top:0;max-width:none;position:relative;z-index:2}
.hero-profile .avatar-frame .avatar{width:120px;height:120px;font-size:42px;border-width:4px}
.hero-profile .avatar-frame:not(.normal){padding:7px}
.hero-profile .frame-label{font-size:.875rem;line-height:1.6;margin-top:12px}
.hero>div:first-of-type{position:relative;z-index:2;min-width:0}
.visitor{position:absolute;top:-60px;right:46px;width:76px;height:76px;padding:0;border:0;background:transparent;border-radius:50%;z-index:1;visibility:hidden;isolation:isolate}
.visitor.visitor-ready{visibility:visible;animation:visitor-peek var(--visitor-duration,5000ms) cubic-bezier(.4,0,.2,1) var(--visitor-elapsed,0ms) both}
.visitor img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 88%;filter:drop-shadow(0 2px 1px #03376522)}
.visitor-ready img{animation:visitor-sway 2.4s ease-in-out infinite}
.visitor.visitor-react img{animation:visitor-hop .85s ease-in-out}
.visitor-rare img{filter:drop-shadow(0 0 5px #ffe9a3) drop-shadow(0 0 10px #ffd76d66)}
.visitor-rare.visitor-react:after{content:'';position:absolute;inset:0;border:1px solid #ffedb5;border-radius:50%;animation:visitor-glow .9s ease-out;pointer-events:none}
.visitor-note{position:absolute;top:18px;right:12px;padding:14px 16px;background:#fffdf4;color:#725624;border:1px solid #e6d59e;border-radius:14px;box-shadow:0 8px 24px #083b6830;z-index:3;max-width:calc(100% - 24px);pointer-events:none}
.visitor-note strong{display:block;font-size:.75rem;letter-spacing:1.5px;margin-bottom:7px}.visitor-note span{font-size:.875rem;line-height:1.7}
@keyframes visitor-peek{0%{transform:translateY(var(--visitor-start,130px));opacity:0}18%{opacity:1}38%,78%{transform:translateY(var(--visitor-lift,-65px));opacity:1}100%{transform:translateY(var(--visitor-start,130px));opacity:0}}
@keyframes visitor-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes visitor-hop{0%,100%{transform:none}18%{transform:scaleY(.94)}45%{transform:translateY(-12px) rotate(-4deg)}75%{transform:translateY(0) scaleY(.96)}}
@keyframes visitor-glow{from{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(1.8)}}
@media(max-width:700px){.hero-profile .avatar-frame .avatar{width:112px;height:112px;font-size:36px}.hero{gap:12px}.hero-count{flex-wrap:wrap;gap:0 8px}.hero-count span{min-width:0}.hero-count span small{letter-spacing:.2px}}
@media(max-width:360px){.hero-profile .avatar-frame .avatar{width:92px;height:92px;font-size:32px}.hero{gap:10px}.hero-profile .frame-label{letter-spacing:.5px}.hero .eyebrow{letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.visitor.visitor-ready,.visitor img,.visitor-react img,.visitor-rare.visitor-react:after{animation:none}.visitor-react{background:#ffffff22}}


/* Leave a small lane beside the greeting for the arrival arc. */
.greeting:has(+ .collection .visitor)>div{width:100%;padding-right:136px}
@media(prefers-reduced-motion:reduce){.visitor-settled img,.visitor.visitor-react img{animation:none}}


/* Companions belong to one portrait. Decorative layers never intercept taps. */
.frame-company{display:inline-flex;position:relative;isolation:isolate;vertical-align:middle}
.frame-company>.avatar-frame{z-index:2}
.company-members{display:contents}
.frame-companion{display:block;position:absolute;left:var(--x);top:var(--y);width:var(--size);aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--tilt));z-index:var(--depth);pointer-events:none}
.frame-companion img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 88%;filter:drop-shadow(0 2px 1px #1834531f);animation:companion-breathe 6.6s ease-in-out var(--phase) infinite}
.frame-companion.motion-1 img{animation-name:companion-nod;animation-duration:9.4s}
.frame-companion.motion-2 img{animation-name:companion-peek;animation-duration:11.3s}
.companion-premium img{filter:drop-shadow(0 0 6px #fff0b8) drop-shadow(0 0 15px #e5c369a0)}
.company-decoration{position:absolute;inset:-30%;border-radius:50%;pointer-events:none;z-index:0;overflow:clip}
.decor-aura .company-decoration,.decor-halo .company-decoration,.decor-radiant .company-decoration{background:radial-gradient(circle,#ffeac22e 30%,#dbcdf438 50%,transparent 71%)}
.decor-halo .company-decoration::before,.decor-radiant .company-decoration::before{content:'';position:absolute;inset:5%;border:1px solid #f8d987b3;border-radius:50%;box-shadow:0 0 0 5px #fff4d216,0 0 18px #f5d89455}
.decor-radiant .company-decoration::after{content:'';position:absolute;inset:-5%;border-radius:50%;background:repeating-conic-gradient(from 4deg,transparent 0deg 12deg,#fff0be26 13deg 16deg,transparent 17deg 24deg);mask-image:radial-gradient(circle,transparent 35%,#000 55%,transparent 71%);animation:company-rays 80s linear infinite}
.company-decoration i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;background:#fff1bf;border-radius:1px;box-shadow:0 0 7px #ffe6a4;transform:rotate(var(--angle)) translateY(-98px) rotate(45deg);animation:company-spark 5.6s ease-in-out var(--phase) infinite}
.hero-profile:has(.frame-company){margin-inline:18px}
.hero:has(.frame-company){padding-top:50px;padding-bottom:28px}
.hero .frame-company{margin:14px 0 28px}.hero .company-decoration{inset:-22%}
.hero:has(.companion-premium){padding-top:90px}
.profile-top:has(.frame-company){padding-top:55px}
.profile-top:has(.companion-premium){padding-top:126px}
.profile-top .frame-company{margin:0 28px 46px}
.profile-top .frame-company .avatar{width:166px;height:166px;font-size:3.5rem;border-width:5px}
.profile-top .frame-company>.avatar-frame{padding:9px}
.profile-top .company-decoration i{transform:rotate(var(--angle)) translateY(-133px) rotate(45deg)}
@keyframes companion-breathe{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes companion-nod{0%,62%,100%{transform:rotate(0)}72%,82%{transform:rotate(-7deg) translateY(-2px)}77%{transform:rotate(3deg)}}
@keyframes companion-peek{0%,70%,100%{transform:translateY(0)}78%,86%{transform:translateY(6px) rotate(4deg)}92%{transform:translateY(-3px) rotate(-3deg)}}
@keyframes company-rays{to{transform:rotate(360deg)}}
@keyframes company-spark{0%,100%{opacity:.25}50%{opacity:.95}}
@media(max-width:700px){.hero-profile:has(.frame-company){margin-inline:12px}.hero:has(.frame-company){column-gap:20px}.hero:has(.frame-company) .hero-count strong{font-size:3.5rem}.hero .company-decoration i{transform:rotate(var(--angle)) translateY(-87px) rotate(45deg)}}
@media(max-width:360px){.hero-profile:has(.frame-company){margin-inline:9px}.hero:has(.frame-company){column-gap:16px}.hero:has(.frame-company) .hero-count strong{font-size:3rem}.hero .company-decoration i{transform:rotate(var(--angle)) translateY(-73px) rotate(45deg)}.profile-top .frame-company .avatar{width:148px;height:148px}.profile-top .company-decoration i{transform:rotate(var(--angle)) translateY(-119px) rotate(45deg)}}
@media(prefers-reduced-motion:reduce){.visitor-ready{transform:translateY(var(--visitor-lift,0))}.frame-companion img,.company-decoration i,.company-decoration::after{animation:none!important}}