.page-mascot {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: -30px;
  margin-bottom: var(--mascot-bottom-gap, 0px);
  margin-right: var(--mascot-right-gap, 0px);
  z-index: 900;
  display: block;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  appearance: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(0);
  transition: transform 240ms cubic-bezier(.2,.8,.3,1);
}
.page-mascot.is-awake,
.page-mascot:focus-visible { transform: translateY(calc(-36px - env(safe-area-inset-bottom))); }
.page-mascot:focus-visible { outline: 3px solid #188447; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .page-mascot:hover { transform: translateY(calc(-36px - env(safe-area-inset-bottom))); }
}
.page-mascot__squash {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 78%;
}
.page-mascot__layer {
  position: absolute;
  inset: 0;
  background-size: 300% 300%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  pointer-events: none;
}
.page-mascot__reactions { opacity: 0; }
@media (max-width: 600px) {
  .page-mascot { width: 88px; height: 88px; bottom: -22px; right: max(12px, env(safe-area-inset-right)); }
  .page-mascot.is-awake,
  .page-mascot:focus-visible { transform: translateY(calc(-28px - env(safe-area-inset-bottom))); }
}
@media (prefers-reduced-motion: reduce) { .page-mascot { transition: none; } }
@media print { .page-mascot { display: none; } }