body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

footer {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
}

footer > div {
  position: relative;
  justify-content: flex-start;
  text-align: left;
  padding-right: 150px;
  padding-left: 150px;
}

footer .footer-brand {
  margin-right: 14px;
}

footer .footer-links { margin-left: auto; justify-content: flex-end; }

.footer-panda {
  position: absolute;
  z-index: 2;
  top: -103px;
  left: max(18px, calc(50% - 610px));
  width: 154px;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .42));
}

.footer-panda img {
  display: block;
  width: 100%;
  height: auto;
}

.panda-state {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 55ms linear;
}

.footer-panda.is-blinking .panda-blink-state,
.footer-panda.is-mouth-closed .panda-mouth-state { opacity: 1; }

.panda-cookie {
  position: absolute;
  z-index: 4;
  right: 16.5%;
  bottom: calc(-12% - 30px);
  width: 21%;
  aspect-ratio: 1.28;
  padding: 0;
  border: 1px solid #78461f;
  border-radius: 49% 44% 47% 43% / 52% 48% 45% 55%;
  background: radial-gradient(circle at 36% 27%, rgba(255,255,255,.22) 0 4%, transparent 5%), radial-gradient(ellipse at 42% 35%, #dda35e 0 22%, #bd7534 65%, #8d4e24 100%);
  box-shadow: inset 3px 3px 0 rgba(255, 213, 147, .22), inset -4px -5px 0 rgba(87, 43, 18, .3), 0 7px 10px rgba(0, 0, 0, .42);
  cursor: pointer;
  pointer-events: auto;
  transform: rotate(-19deg) skewX(-5deg);
  animation: cookie-tumble 1.8s ease-in-out infinite alternate;
}

.panda-cookie::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: radial-gradient(circle at 18% 25%, #402014 0 6%, #6b3520 7% 9%, transparent 10%), radial-gradient(circle at 70% 19%, #3b1d12 0 7%, #704027 8% 10%, transparent 11%), radial-gradient(circle at 47% 52%, #402014 0 8%, #704027 9% 11%, transparent 12%), radial-gradient(circle at 79% 70%, #3b1d12 0 6%, #704027 7% 9%, transparent 10%), radial-gradient(circle at 22% 78%, #4b2617 0 5%, transparent 6%);
}

.panda-cookie::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: inherit;
  border-top: 1px dashed rgba(255, 224, 168, .35);
  border-left: 1px solid rgba(255, 224, 168, .16);
}

.cookie-crumbs,
.cookie-speed {
  position: absolute;
  display: block;
  pointer-events: none;
}

.cookie-crumbs {
  left: 23%;
  top: -45%;
  width: 8px;
  height: 8px;
  border-radius: 44%;
  background: #b86f32;
  box-shadow: 13px 9px 0 -2px #d19a58, 5px 21px 0 -3px #75401f, 20px 27px 0 -3px #bf7938;
}

.cookie-speed {
  left: 2%;
  top: -54%;
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: rgba(180, 196, 188, .5);
  box-shadow: 9px -7px 0 -0.4px rgba(180, 196, 188, .3), 18px 4px 0 -0.6px rgba(180, 196, 188, .23);
  transform: rotate(-9deg);
}

@keyframes cookie-tumble {
  from { translate: 0 -2px; rotate: -2deg; }
  to { translate: 1px 4px; rotate: 5deg; }
}

.panda-cookie:hover,
.panda-cookie:focus-visible { animation-play-state: paused; transform: rotate(-8deg) skewX(-3deg) scale(1.12); }
.panda-cookie:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; }
.panda-cookie .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  .panda-state { transition: none; }
  .panda-cookie { animation: none; }
}

@media (max-width: 900px) {
  footer > div {
    padding-right: 112px;
    padding-left: 112px;
  }

  .footer-panda {
    top: -78px;
    width: 118px;
  }
}

@media (max-width: 720px) {
  footer > div {
    justify-content: center;
    text-align: center;
    padding: 38px 78px 28px;
  }

  footer .footer-brand {
    width: 100%;
    justify-content: center;
  }

  .footer-panda {
    top: -61px;
    left: 8px;
    width: 94px;
  }
}

@media (max-width: 430px) {
  footer > div {
    padding-right: 28px;
    padding-left: 28px;
  }

  .footer-panda {
    top: -48px;
    width: 76px;
  }
}