/* Motion stays inside a reserved stage, away from copy and controls. */
body .brand-mascot {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 136px;
  height: 142px;
  min-height: 0;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body .brand-mascot:hover, body .brand-mascot:active { background: transparent; }
body .brand-mascot:focus-visible { outline: 2px dashed #598f9f; outline-offset: 2px; }
body .brand-mascot img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 56%;
}
body.ui-refined.ui-colorful .member-hero.has-brand-mascot::after { display: none; }
body.ui-refined.ui-colorful .member-hero > .brand-mascot {
  position: absolute;
  right: 24px;
  bottom: 16px;
  width: 136px;
  height: 142px;
}
body.ui-refined.ui-colorful .cw-heading > .brand-mascot { width: 100px; height: 106px; padding: 10px; }
body.ui-refined.ui-colorful .cw-heading > .brand-mascot img { width: 100%; height: 100%; }
body .vocab-welcome > .brand-mascot { width: 130px; height: 130px; }
body .vocab-welcome > .brand-mascot img { width: 100%; height: 100%; }
@media (max-width: 760px) {
  body.ui-refined.ui-colorful .member-hero > .brand-mascot { width: 80px; height: 88px; right: 10px; bottom: 16px; padding: 8px; }
  body.ui-refined.ui-colorful .cw-heading > .brand-mascot { width: 78px; height: 84px; padding: 8px; }
  body .vocab-welcome > .brand-mascot { width: 92px; height: 96px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body .brand-mascot img { transform: none !important; }
}