.companion-band{position:relative;display:grid;grid-template-columns:.85fr 1fr;align-items:center;gap:44px;padding:36px 42px;background:#edf2ed;border:1px solid #dce6dc;border-radius:24px;margin-block:26px 20px;overflow:hidden}
.companion-band h2{font-size:clamp(28px,3vw,40px);margin:0 0 15px}
.companion-band p{font-size:16px;max-width:480px;margin-bottom:12px}
.companion-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:210px}
.companion-stage:before{content:'';position:absolute;inset:20px 30px;border-radius:50%;background:radial-gradient(ellipse,#ebdabe90,transparent 70%)}
.companion-stage img{position:relative;width:50%;max-width:205px;height:auto;object-fit:contain}
.companion-band>.motion-toggle{position:absolute;bottom:14px;left:20px;font-size:12px}
.motion-toggle{font-size:13px;white-space:nowrap}
.mascot-float{animation:mascot-float 4s ease-in-out 3 both}
.mascot-walk{animation:mascot-walk 6s ease-in-out 2 both}
.mascot-float,.mascot-walk{animation-play-state:paused}
.mascot-in-view{animation-play-state:running}
.mascot-feedback{display:flex;align-items:center;gap:12px;min-height:70px;margin:8px 0 0;border-radius:12px;padding:6px 12px;background:#eef4ee;max-width:360px;pointer-events:none}
.mascot-feedback img{width:64px;height:64px;object-fit:contain;animation:mascot-pop .45s ease-out both}
.mascot-feedback span{color:#315b4a;font-size:14px;font-weight:650}
.mascot-celebration{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:155px;border-radius:18px;background:linear-gradient(120deg,#eef4ec,#fff3dd);margin:0 0 24px;overflow:hidden}
.mascot-celebration img{width:145px;height:145px;object-fit:contain;position:relative;z-index:1;animation:mascot-cheer .8s ease-in-out 2 both}
.mascot-celebration img+img{animation-delay:.14s}
.mascot-confetti{position:absolute;left:var(--left);top:10px;width:6px;height:10px;background:var(--color);border-radius:2px;opacity:0;animation:mascot-confetti 1.6s ease-out var(--delay) both;pointer-events:none}
@keyframes mascot-float{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(7px,-9px) rotate(2deg)}}
@keyframes mascot-walk{0%,100%{transform:translateX(-6px) rotate(-2deg)}50%{transform:translateX(6px) rotate(2deg)}}
@keyframes mascot-pop{0%{transform:scale(.88) rotate(-7deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes mascot-cheer{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px) rotate(4deg)}}
@keyframes mascot-confetti{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(150px) rotate(210deg);opacity:0}}
html[data-motion="off"] *,html[data-motion="off"] *:before,html[data-motion="off"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:760px){.companion-band{grid-template-columns:1fr;padding:24px 24px 45px;gap:10px}.companion-stage{min-height:155px}.companion-stage img{max-width:150px}.companion-band h2{font-size:30px}.mascot-celebration img{width:115px;height:115px}.mascot-celebration{min-height:130px}}
@media(prefers-reduced-motion:reduce){.mascot-float,.mascot-walk,.mascot-feedback img,.mascot-celebration img,.mascot-confetti{animation:none!important}.mascot-confetti{display:none}}