.maple-eye-tracker {
  --maple-size: 28rem;
  --maple-rotation: 0deg;
  display: block;
  width: min(100%, var(--maple-size));
  max-width: 100%;
  transform: rotate(var(--maple-rotation));
  transform-origin: 50% 58%;
  contain: layout paint;
}

.maple-eye-tracker__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1179 / 1167;
}

.maple-eye-tracker__face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.maple-eye {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.maple-eye__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.maple-eye__track {
  will-change: transform;
  transform-box: fill-box;
  transform-origin: center;
}

.maple-eye__svg image {
  image-rendering: auto;
}