/* VICE Guardian: the established character, isolated from page styling. */
.guardian {
  --guardian-look: 0px;
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 132px;
  height: 153px;
  padding: 0;
  appearance: none;
  border: 2px solid #fff1c9;
  border-radius: 47% 47% 38% 38%;
  background: linear-gradient(145deg, #f6df9e, #d0a643);
  box-shadow: inset -9px -8px 14px #b98d2825, 0 18px 28px #ab882b25;
  cursor: pointer;
  isolation: isolate;
  transform: rotate(5deg);
  -webkit-tap-highlight-color: transparent;
}
.guardian,
.guardian *,
.guardian *::before,
.guardian *::after { box-sizing: border-box; }
.guardian:focus-visible { outline: 3px solid #947020; outline-offset: 9px; }
.guardian .guardian-top {
  position: absolute;
  left: 58px;
  top: -23px;
  width: 6px;
  height: 23px;
  background: #b79441;
}
.guardian .guardian-top::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #fff0bd;
  border-radius: 50%;
  background: #e2c16c;
}
.guardian .guardian-face {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 26px;
  height: 66px;
  border-radius: 30px;
  background: #fff6d9;
}
.guardian .eye {
  position: absolute;
  top: 24px;
  width: 8px;
  height: 12px;
  border-radius: 50%;
  background: #675634;
  transform: translateX(var(--guardian-look));
  animation: vice-guardian-blink 5s infinite;
}
.guardian .eye.left { left: 24px; }
.guardian .eye.right { right: 24px; }
.guardian .cheek {
  position: absolute;
  top: 39px;
  width: 14px;
  height: 6px;
  border-radius: 50%;
  background: #e8b89988;
}
.guardian .c-left { left: 12px; }
.guardian .c-right { right: 12px; }
.guardian .smile {
  position: absolute;
  left: 41px;
  top: 36px;
  width: 13px;
  height: 8px;
  border-bottom: 2px solid #8f7137;
  border-radius: 50%;
}
.guardian .guardian-v {
  position: absolute;
  bottom: 17px;
  left: 0;
  right: 0;
  color: #a37b27;
  font: 29px Georgia, serif;
  text-align: center;
}
.guardian .arm {
  position: absolute;
  top: 81px;
  z-index: -1;
  width: 19px;
  height: 45px;
  border: 2px solid #f6dda0;
  border-radius: 20px;
  background: #e2bf66;
}
.guardian .arm-left { left: -15px; transform: rotate(30deg); }
.guardian .arm-right { right: -15px; transform: rotate(-30deg); transform-origin: top; }
.guardian .foot {
  position: absolute;
  bottom: -10px;
  width: 37px;
  height: 19px;
  border-radius: 50%;
  background: #d3ae54;
}
.guardian .foot-left { left: 12px; }
.guardian .foot-right { right: 12px; }
.guardian.hello { animation: vice-guardian-hop .5s ease-in-out 2; }
.guardian.hello .arm-right { animation: vice-guardian-wave .4s ease-in-out 4; }
@keyframes vice-guardian-blink {
  0%, 44%, 48%, 100% { scale: 1 1; }
  46% { scale: 1 .1; }
}
@keyframes vice-guardian-wave {
  0%, 100% { transform: rotate(-40deg); }
  50% { transform: rotate(-115deg); }
}
@keyframes vice-guardian-hop {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .guardian, .guardian * { animation: none !important; transition: none !important; }
  .guardian .eye { transform: none; }
}