.quest-people-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 310px;
}

.quest-character {
  --skin: #f5c7a8;
  --shirt: #6366f1;
  --shirt2: #818cf8;
  --w: 76px;
  --h: 132px;
  --head: 62px;
  --eye-x: 0px;
  --eye-y: 0px;
  --tilt: 0deg;
  position: absolute;
  width: var(--w);
  height: calc(var(--h) + var(--head) + 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transform: translateX(-50%) rotate(var(--tilt));
  transform-origin: 50% 100%;
  transition: transform .18s ease;
  filter: drop-shadow(0 16px 18px rgba(16, 62, 126, .14));
  animation: quest-breathe 3.6s ease-in-out infinite;
}

.quest-head {
  width: var(--head);
  height: var(--head);
  background: var(--skin);
  border-radius: 45% 45% 48% 48%;
  position: relative;
  z-index: 3;
  box-shadow: inset 0 -5px 0 rgba(110, 68, 39, .08);
  transition: transform .22s ease;
}

.quest-hair {
  position: absolute;
  background: #4b2c20;
}

.quest-hair.quest-bowl {
  top: -7px;
  left: 1px;
  right: 1px;
  height: 28px;
  border-radius: 56% 56% 46% 46% / 70% 70% 34% 34%;
}

.quest-hair.quest-bowl::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 12px;
  background: #4b2c20;
  border-radius: 0 0 16px 16px;
}

.quest-hair.quest-bowl::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 3px;
  height: 6px;
  background: rgba(255, 255, 255, .04);
  border-radius: 50%;
}

.quest-hair.quest-crew {
  top: -8px;
  left: 10px;
  right: 10px;
  height: 18px;
  border-radius: 50% 50% 28% 28%;
}

.quest-hair.quest-crew::before,
.quest-hair.quest-crew::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 12px;
  height: 8px;
  background: #4b2c20;
  border-radius: 10px 10px 0 0;
}

.quest-hair.quest-crew::before {
  left: 8px;
  transform: rotate(-8deg);
}

.quest-hair.quest-crew::after {
  right: 8px;
  transform: rotate(8deg);
}

.quest-eyes {
  position: absolute;
  top: 27px;
  left: 15px;
  right: 15px;
  display: flex;
  justify-content: space-between;
}

.quest-eye {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  overflow: hidden;
  transition: height .18s ease, margin-top .18s ease, background-color .18s ease;
}

.quest-eye::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #1b2636;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  top: 4px;
  transform: translate(var(--eye-x), var(--eye-y));
  transition: transform .08s linear;
}

.quest-smile {
  position: absolute;
  top: 45px;
  left: 50%;
  width: 18px;
  height: 8px;
  border-bottom: 3px solid rgba(60, 40, 32, .55);
  border-radius: 0 0 18px 18px;
  transform: translateX(-50%);
  transition: width .18s ease;
}

.quest-body {
  width: var(--w);
  height: var(--h);
  background: linear-gradient(to bottom, var(--shirt) 0 67%, var(--shirt2) 67% 100%);
  border-radius: 28px 28px 14px 14px;
  position: relative;
  z-index: 3;
  border: 3px solid rgba(255, 255, 255, .68);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  color: #fff;
  font-size: calc(var(--w) * .46);
  font-weight: 1000;
  letter-spacing: 1.5px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .14);
}

.quest-body::before,
.quest-body::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 13px;
  height: 52px;
  background: var(--skin);
  border-radius: 999px;
  transition: transform .2s ease, top .2s ease;
}

.quest-body::before {
  left: -12px;
  transform: rotate(8deg);
}

.quest-body::after {
  right: -12px;
  transform: rotate(-8deg);
}

.quest-shorts {
  display: none;
}

.quest-leg {
  position: absolute;
  bottom: -8px;
  width: 16px;
  height: 30px;
  background: #efbf9b;
  border-radius: 0 0 10px 10px;
  z-index: 1;
}

.quest-leg.quest-l {
  left: 22%;
}

.quest-leg.quest-r {
  right: 22%;
}

.quest-char-l {
  --skin: #f6cdae;
  --shirt: #ff8a19;
  --shirt2: #ffc46b;
  --w: 98px;
  --h: 96px;
  --head: 66px;
  left: 50%;
  bottom: 0;
  z-index: 7;
}

.quest-char-z {
  --skin: #e7b08e;
  --shirt: #27c363;
  --shirt2: #7ee4a0;
  --w: 74px;
  --h: 82px;
  --head: 58px;
  left: 34%;
  bottom: 4px;
  z-index: 8;
}

.quest-char-d {
  --skin: #f6cdae;
  --shirt: #6366f1;
  --shirt2: #818cf8;
  --w: 72px;
  --h: 92px;
  --head: 58px;
  left: 58%;
  bottom: 72px;
  z-index: 3;
}

.quest-char-f {
  --skin: #cf9374;
  --shirt: #8b5cf6;
  --shirt2: #c1a7ff;
  --w: 70px;
  --h: 90px;
  --head: 58px;
  left: 43%;
  bottom: 62px;
  z-index: 4;
}

.quest-char-w {
  --skin: #f3c4a4;
  --shirt: #ff5ea8;
  --shirt2: #ffa1cb;
  --w: 74px;
  --h: 88px;
  --head: 60px;
  left: 66%;
  bottom: 4px;
  z-index: 6;
}

.quest-people-scene.is-attentive .quest-character {
  animation-duration: 2.4s;
}

.quest-people-scene.is-attentive .quest-head {
  transform: translateY(-2px);
}

.quest-people-scene.is-attentive .quest-body::before {
  transform: rotate(-18deg);
}

.quest-people-scene.is-attentive .quest-body::after {
  transform: rotate(18deg);
}

.quest-people-scene.is-private .quest-character {
  transform: translateX(-50%) rotate(-7deg);
}

.quest-people-scene.is-private .quest-head {
  transform: rotate(-7deg) translateX(-4px);
}

.quest-people-scene.is-private .quest-eye {
  height: 3px;
  margin-top: 5px;
  border-radius: 999px;
  background: #28384e;
}

.quest-people-scene.is-private .quest-eye::after {
  display: none;
}

.quest-people-scene.is-private .quest-smile {
  width: 12px;
}

.quest-people-scene.is-private .quest-body::after {
  transform: rotate(48deg);
  top: 8px;
}

.quest-people-scene.is-compact {
  position: relative;
  height: 240px;
  left: auto;
  right: auto;
  bottom: auto;
}

.quest-people-scene.is-compact .quest-character {
  transform: translateX(-50%) scale(.66) rotate(var(--tilt));
}

.quest-people-scene.is-compact.is-attentive .quest-character {
  transform: translateX(-50%) scale(.66) translateY(-8px) rotate(var(--tilt));
}

.quest-people-scene.is-compact.is-private .quest-character {
  transform: translateX(-50%) scale(.66) translateY(8px) rotate(-7deg);
}

@keyframes quest-breathe {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }
}

@media (max-width: 860px) {
  .quest-people-scene {
    height: 210px;
    bottom: 4px;
  }

  .quest-character {
    transform: translateX(-50%) scale(.72) rotate(var(--tilt));
  }

  .quest-char-l {
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%) scale(.76) rotate(var(--tilt));
  }

  .quest-char-z {
    left: 31%;
    bottom: 2px;
  }

  .quest-char-w {
    left: 68%;
    bottom: 2px;
  }

  .quest-char-f {
    left: 42%;
    bottom: 44px;
  }

  .quest-char-d {
    left: 59%;
    bottom: 46px;
  }

  .quest-people-scene.is-private .quest-character {
    transform: translateX(-50%) scale(.72) rotate(-7deg);
  }

  .quest-people-scene.is-private .quest-char-l {
    transform: translateX(-50%) scale(.76) rotate(-7deg);
  }
}