.tee {
  --skin: none;
  font-size: 1px;
  width: 96em;
  height: 96em;
  position: relative;
  content-visibility: visible;
  contain-intrinsic-size: 96em;
  display: inline-block;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.tee_rendered {
  opacity: 1;
}

.tee::before,
.tee::after {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  background-image: var(--skin);
  background-size: 256em 128em;
  transform: translate(-50%, calc(-50% - 6em));
  transition: background-image 0.2s ease-in-out;
  pointer-events: none;
}

.tee::before {
  background-position: -96em 0;
  z-index: 0;
}

.tee::after {
  background-position: 0 0;
  z-index: 3;
}

.tee__eyes {
  position: absolute;
  top: 37.5%;
  left: 50%;
  transform: translate(0);
  transition: transform 0.15s ease-out;
  z-index: 4;
}

.tee__eyes::before,
.tee__eyes::after {
  content: "";
  display: block;
  position: absolute;
  width: 32em;
  height: 32em;
  top: -16em;
  background-image: var(--skin);
  background-size: 256em 128em;
  transition: background-image 0.2s ease-in-out;
}

.tee__eyes::before {
  left: -22.72em;
  transform: scale(1.2);
}

.tee__eyes::after {
  left: calc(-16em + 4.8em * 1.4);
  transform: scale(-1.2, 1.2);
}

.tee__eyes::before,
.tee__eyes::after,
.tee[data-eyes="normal"] .tee__eyes::before,
.tee[data-eyes="normal"] .tee__eyes::after {
  background-position: -64em 32em;
}

.tee[data-eyes="angry"] .tee__eyes::before,
.tee[data-eyes="angry"] .tee__eyes::after {
  background-position: -96em 32em;
}

.tee[data-eyes="pain"] .tee__eyes::before,
.tee[data-eyes="pain"] .tee__eyes::after {
  background-position: -128em 32em;
}

.tee[data-eyes="happy"] .tee__eyes::before,
.tee[data-eyes="happy"] .tee__eyes::after {
  background-position: -160em 32em;
}

.tee[data-eyes="dead"] .tee__eyes::before,
.tee[data-eyes="dead"] .tee__eyes::after {
  background-position: -192em 32em;
}

.tee[data-eyes="surprise"] .tee__eyes::before,
.tee[data-eyes="surprise"] .tee__eyes::after {
  background-position: -224em 32em;
}

.tee__foot {
  position: absolute;
  width: 64em;
  height: 32em;
  top: 50%;
  left: 50%;
  background-image: var(--skin);
  background-size: 256em 128em;
  background-position: -192em -32em;
  transition: background-image 0.2s ease-in-out;
}

.tee__foot_outline {
  background-position: -192em -64em;
}

.tee__foot_left {
  transform: translate(calc(-50% - 10.5em), calc(-50% + 15em)) scale(1.43, 1.45);
  z-index: 2;
}

.tee__foot_left.tee__foot_outline {
  z-index: 1;
}

.tee__foot_right {
  transform: translate(calc(-50% + 10.5em), calc(-50% + 15em)) scale(1.43, 1.45);
  z-index: 5;
}

.tee__foot_right.tee__foot_outline {
  z-index: 1;
}