.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 5.8s cubic-bezier(.4,0,.2,1) both}
.visitor img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 88%;filter:drop-shadow(0 2px 1px #03376522)}
.visitor-settled img{animation:visitor-sway 4.8s 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%,8%{transform:translateY(var(--visitor-start,130px));opacity:0}20%{opacity:1}60%,68%{transform:translateY(var(--visitor-lift,-65px));opacity:1}100%{transform:translateY(0);opacity:1}}
@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}}