.page-fox{
  position:fixed;right:16px;bottom:12px;width:110px;height:131px;z-index:19;
  pointer-events:none;user-select:none;opacity:1;
  transition:opacity .3s ease,visibility .3s ease;contain:layout style;
}
.page-fox.fox-hidden{opacity:0;visibility:hidden}
.fox-art{width:110px;height:119px;overflow:visible;position:absolute;bottom:0;right:0;
  transform-origin:50% 90%}
.fox-tail{transform-origin:112px 125px;animation:fox-wag 2.4s ease-in-out infinite}
.fox-head{transform-box:fill-box;transform-origin:50% 70%;transition:transform .12s ease-out}
.fox-pupils{transition:transform .055s linear}
.fox-shadow{position:absolute;bottom:-4px;left:25px;width:63px;height:7px;border-radius:50%;background:rgba(70,94,119,.09);filter:blur(4px)}
.fox-greeting{
  position:absolute;right:70px;top:1px;white-space:nowrap;background:#fff;color:#6d6470;
  padding:9px 13px;border-radius:12px 12px 4px 12px;
  box-shadow:0 6px 20px rgba(36,51,74,.13);border:1px solid #f2e7e1;
  font:800 11px/1.2 Inter,system-ui,sans-serif;animation:fox-greet 5.5s both;
}
.fox-greeting span{color:#e79a64}
.fox-greeting:after{content:"";position:absolute;right:-5px;bottom:3px;width:10px;height:10px;background:#fff;transform:rotate(45deg);border-right:1px solid #f2e7e1}
@keyframes fox-wag{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes fox-greet{0%{opacity:0;transform:translateY(8px)}10%,65%{opacity:1;transform:translateY(0)}82%,100%{opacity:0;transform:translateY(4px)}}
@media(max-width:820px){.page-fox{width:98px;height:125px;right:5px;bottom:4px}.fox-art{width:98px;height:110px}.fox-greeting{display:none}}
@media(hover:none),(pointer:coarse){.page-fox{display:none}}
@media(prefers-reduced-motion:reduce){.fox-art,.fox-tail,.fox-greeting{animation:none}.fox-greeting{display:none}.fox-head,.fox-pupils{transition:none}}