#grid{position:relative;isolation:isolate}
#kc-fox-hopper{
  position:absolute;z-index:5;
  width:clamp(96px,26vw,128px);height:auto;aspect-ratio:220/160;
  pointer-events:auto;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  opacity:0;left:0;top:0;will-change:left,top,transform;
  transform:translate3d(-50%,-50%,0) scaleX(1);
  transform-origin:center center;
  filter:drop-shadow(0 7px 6px rgba(110,67,42,.18));
}
#kc-fox-hopper.kc-ready{
  opacity:1;
  transition:opacity .28s ease,left 1.85s cubic-bezier(.33,.06,.4,.98),top 1.85s cubic-bezier(.33,.06,.4,.98),transform .25s ease;
}
#kc-fox-hopper.kc-face-left{ transform:translate3d(-50%,-50%,0) scaleX(-1); }
#kc-fox-hopper .kc-fox-stage{ position:relative; width:100%; height:100%; }
#kc-fox-hopper .kc-fox-sit,
#kc-fox-hopper .kc-fox-run{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
}
#kc-fox-hopper .kc-fox-sit{ opacity:0; }
#kc-fox-hopper .kc-fox-run{ opacity:0; }
#kc-fox-hopper.kc-sitting .kc-fox-sit{ opacity:1; animation:kc-fox-idle 2.1s ease-in-out infinite; }
#kc-fox-hopper.kc-sitting .kc-fox-run{ opacity:0; animation:none; }
#kc-fox-hopper.kc-running.kc-step-sit .kc-fox-sit{ opacity:1; animation:kc-move-sit .64s ease-in-out infinite; }
#kc-fox-hopper.kc-running.kc-step-sit .kc-fox-run{ opacity:0; animation:none; }
#kc-fox-hopper.kc-running.kc-step-run .kc-fox-sit{ opacity:0; animation:none; }
#kc-fox-hopper.kc-running.kc-step-run .kc-fox-run{ opacity:1; animation:kc-run-bob .64s ease-in-out infinite; }
@keyframes kc-fox-idle{
  0%,100%{transform:translateY(0) scale(1.01,.99)}
  35%{transform:translateY(1px) scale(.99,1.01)}
  65%{transform:translateY(-2px) scale(1.01,.99)}
}
@keyframes kc-move-sit{
  0%,100%{transform:translateY(0) rotate(-1deg) scale(1.01,.99)}
  50%{transform:translateY(-5px) rotate(1deg) scale(.99,1.01)}
}
@keyframes kc-run-bob{
  0%{transform:translateY(-1px) rotate(-2deg)}
  25%{transform:translateY(-8px) rotate(1deg)}
  50%{transform:translateY(-3px) rotate(2deg)}
  75%{transform:translateY(-9px) rotate(-1deg)}
  100%{transform:translateY(-1px) rotate(-2deg)}
}
@media(prefers-reduced-motion:reduce){
  #kc-fox-hopper,#kc-fox-hopper.kc-ready{transition:none!important}
  #kc-fox-hopper .kc-fox-sit,#kc-fox-hopper .kc-fox-run{animation:none!important}
}

/* Tap-to-talk bubble, kept outside the mirrored fox element. */
#kc-fox-hopper:focus-visible{outline:2px solid #b95a42;outline-offset:4px;border-radius:22px}
#kc-fox-bubble{position:absolute;z-index:8;transform:translate(-50%,-100%) translateY(-5px);width:max-content;max-width:min(240px,calc(100% - 20px));min-width:150px;padding:10px 13px;border-radius:17px;background:#fffdf7;border:1px solid #dfbea1;color:#634433;box-shadow:0 6px 18px rgba(80,49,28,.17);text-align:center;font:600 13px/1.4 system-ui,-apple-system,sans-serif;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease;white-space:normal}
#kc-fox-bubble.kc-visible{opacity:1;visibility:visible}
#kc-fox-bubble small{display:block;margin-top:4px;font-size:11px;font-weight:400;color:#92725f}
#kc-fox-bubble:after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:#fffdf7;border-right:1px solid #dfbea1;border-bottom:1px solid #dfbea1;transform:translateX(-50%) rotate(45deg)}