:where([data-support-mascot], #loginMascot, .support-mascot, .login-mascot) {
  --mascot-size: 150px;
  --mascot-look-x: 0px;
  --mascot-look-y: 0px;
  --mascot-tilt: 0deg;
  --mascot-lift: 0px;
  --mascot-motion-scale: 1;
  position: relative;
  display: inline-block;
  width: var(--mascot-size);
  height: var(--mascot-size);
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}

.login-mascot {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 16px);
  transform: translateX(-50%);
  z-index: 1;
}

:where([data-support-mascot], #loginMascot, .support-mascot) :is(.login-mascot-body, .support-mascot-body) {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(calc(var(--mascot-lift) * var(--mascot-motion-scale))) rotate(var(--mascot-tilt));
  transform-origin: 50% 91%;
}

:where([data-support-mascot], #loginMascot, .support-mascot) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:where([data-support-mascot], #loginMascot, .support-mascot) .mascot-eyes {
  position: absolute;
  top: 34%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--mascot-size) * 0.127);
  height: calc(var(--mascot-size) * 0.12);
  transform: translate(calc(-50% + var(--mascot-look-x) * var(--mascot-motion-scale)), calc(-50% + var(--mascot-look-y) * var(--mascot-motion-scale)));
}

:where([data-support-mascot], #loginMascot, .support-mascot) .mascot-eye {
  display: block;
  width: calc(var(--mascot-size) * 0.06);
  height: calc(var(--mascot-size) * 0.1);
  border-radius: calc(var(--mascot-size) * 0.033);
  background: #D8EC76;
  box-shadow: 0 0 7px #D8EC7630;
  transition: height 80ms ease-out, width 80ms ease-out;
}

:where([data-support-mascot], #loginMascot, .support-mascot)[data-mascot-blink="closed"] .mascot-eye,
:where([data-support-mascot], #loginMascot, .support-mascot)[data-mascot-state="private"] .mascot-eye {
  height: max(2px, calc(var(--mascot-size) * 0.02));
  border-radius: 2px;
}

:where([data-support-mascot], #loginMascot, .support-mascot)[data-mascot-state="private"] .mascot-eye {
  width: calc(var(--mascot-size) * 0.08);
}

.support-mascot--compact {
  --mascot-size: 56px;
  --mascot-motion-scale: 0.45;
}

.support-mascot--inline {
  --mascot-size: 80px;
  --mascot-motion-scale: 0.65;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  :where([data-support-mascot], #loginMascot, .support-mascot) :is(.login-mascot-body, .support-mascot-body, .mascot-eyes, .mascot-eye) {
    transition: none;
    animation: none;
  }
}

/* Placement within existing account and operational shells. */
.workspace-mascot { --mascot-size: 56px; }
.account-link-mascot { --mascot-size: 64px; display: block; margin: 0 auto 20px; }
.account-mascot { --mascot-size: 48px; display: block; margin: 0 auto 12px; }
.tool-footer-mascot { --mascot-size: 44px; display: block; margin: 0 auto 8px; }
.social-topbar-mascot { --mascot-size: 46px; margin-left: auto; }
.knowledge-empty-mascot { display: block; margin: 0 auto 16px; }
@media (max-width: 600px) { .workspace-mascot { --mascot-size: 40px; } }

/* Jointed original arms keep their own hands; the seated feet stay planted. */
.login-mascot .login-mascot-body { transform: none; }
.login-mascot .lead-rig { display: block; width: 100%; height: 100%; overflow: visible; }
.login-mascot :is(.lead-torso, .lead-neck, .lead-head, .lead-arm, .lead-forearm, .lead-hand, .lead-keyboard, .lead-envelope) { transform-box: view-box; }
.login-mascot .lead-torso { transform-origin: 70px 110px; }
.login-mascot .lead-neck { transform-origin: 70px 81px; }
.login-mascot .lead-head { transform-origin: 70px 79px; }
.login-mascot .lead-arm--left { transform-origin: 46.8px 90.4px; }
.login-mascot .lead-arm--right { transform-origin: 93.2px 90.4px; }
.login-mascot .lead-forearm--left { transform-origin: 36.7px 104.7px; }
.login-mascot .lead-forearm--right { transform-origin: 103.3px 104.7px; }
.login-mascot .lead-hand--left { transform-origin: 31.5px 121.7px; }
.login-mascot .lead-hand--right { transform-origin: 108.5px 121.7px; }
.login-mascot .lead-eye { transform-box: fill-box; transform-origin: center; }
.login-mascot[data-mascot-state="scared"] .lead-eye { fill: #ff5e57; }
.login-mascot .lead-keyboard { transform-origin: 70px 128px; opacity: 0; }
.login-mascot .lead-envelope { transform-origin: 70px 112px; opacity: 0; }
.login-mascot[data-mascot-motion="still"] :is(.lead-torso, .lead-neck, .lead-head, .lead-arm, .lead-forearm, .lead-hand, .lead-keyboard, .lead-envelope, .lead-eye, .lead-key) { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .login-mascot :is(.lead-torso, .lead-neck, .lead-head, .lead-arm, .lead-forearm, .lead-hand, .lead-keyboard, .lead-envelope, .lead-gaze, .lead-eye, .lead-key) { transition: none; animation: none; }
}