.scaled-lg {
  transform-origin: left top;
  image-rendering: pixelated;
  /* transform: scale(5, 5); */
  --ncs-scale: 8;
}

.scaled {
  transform-origin: left top;
  image-rendering: pixelated;
  /* transform: scale(6, 6); */
  --ncs-scale: 6;
}

.scaled-md {
  transform-origin: left top;
  image-rendering: pixelated;
  /* transform: scale(5, 5); */
  --ncs-scale: 5;
}

.scaled-sm {
  transform-origin: left top;
  image-rendering: pixelated;
  /* transform: scale(3, 3); */
  --ncs-scale: 3;
}

.skin-preview {
  display: flex;
  gap: calc(2px * var(--ncs-scale));
  width: fit-content;
}

.skin-model {
  --ncs-arm-width: 4px;
}

.skin-model-slim {
  --ncs-arm-width: 3px;
}

.face {
  width: calc(8px * var(--ncs-scale));
  height: calc(8px * var(--ncs-scale));
  background-position: calc(56px * var(--ncs-scale))
    calc(56px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  margin-left: calc(var(--ncs-arm-width) * var(--ncs-scale));

  position: relative;
  z-index: 1;
}

.face-overlay {
  width: calc(8px * var(--ncs-scale));
  height: calc(8px * var(--ncs-scale));
  background-position: calc(24px * var(--ncs-scale))
    calc(56px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.12);
}

.scaled-lg .face-overlay {
  transform: scale(1.1);
}

.torso {
  width: calc(8px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(44px * var(--ncs-scale))
    calc(44px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.torso-overlay {
  width: calc(8px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(44px * var(--ncs-scale))
    calc(28px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.05);
}

.left-arm {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(28px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.left-arm-overlay {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(12px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.15, 1.05);
}

.left-arm-slim {
  width: calc(3px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(28px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.left-arm-slim-overlay {
  width: calc(3px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(12px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.2, 1.05);
}

.right-arm {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(20px * var(--ncs-scale))
    calc(44px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.right-arm-overlay {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(20px * var(--ncs-scale))
    calc(28px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.15, 1.05);
}

.right-arm-slim {
  width: calc(3px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(20px * var(--ncs-scale))
    calc(44px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.right-arm-slim-overlay {
  width: calc(3px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(20px * var(--ncs-scale))
    calc(28px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.2, 1.05);
}

.left-leg {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(44px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.left-leg-overlay {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(60px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.15, 1.05);
}

.right-leg {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(60px * var(--ncs-scale))
    calc(44px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));

  margin-left: calc(var(--ncs-arm-width) * var(--ncs-scale));
}

.right-leg-overlay {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(60px * var(--ncs-scale))
    calc(28px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.15, 1.05);
}

.face-back {
  width: calc(8px * var(--ncs-scale));
  height: calc(8px * var(--ncs-scale));
  background-position: calc(40px * var(--ncs-scale))
    calc(56px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  margin-left: calc(4px * var(--ncs-scale));

  position: relative;
  z-index: 1;
}

.face-overlay-back {
  width: calc(8px * var(--ncs-scale));
  height: calc(8px * var(--ncs-scale));
  background-position: calc(8px * var(--ncs-scale))
    calc(56px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.12);
}

.torso-back {
  width: calc(8px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(32px * var(--ncs-scale))
    calc(44px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.torso-overlay-back {
  width: calc(8px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(32px * var(--ncs-scale))
    calc(28px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.05);
}

.left-arm-back {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(20px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.left-arm-overlay-back {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(4px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.15, 1.05);
}

.left-arm-slim-back {
  width: calc(3px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  margin-left: calc(1px * var(--ncs-scale));
  background-position: calc(21px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.left-arm-slim-overlay-back {
  width: calc(3px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(5px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.2, 1.05);
}

.right-arm-back {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(12px * var(--ncs-scale))
    calc(44px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.right-arm-overlay-back {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(12px * var(--ncs-scale))
    calc(28px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.15, 1.05);
}

.right-arm-slim-back {
  width: calc(3px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(13px * var(--ncs-scale))
    calc(44px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.right-arm-slim-overlay-back {
  width: calc(3px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(13px * var(--ncs-scale))
    calc(28px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.2, 1.05);
}

.left-leg-back {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(36px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  margin-left: calc(4px * var(--ncs-scale));
}

.left-leg-overlay-back {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(52px * var(--ncs-scale))
    calc(12px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.15, 1.05);
}

.right-leg-back {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(52px * var(--ncs-scale))
    calc(44px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
}

.right-leg-overlay-back {
  width: calc(4px * var(--ncs-scale));
  height: calc(12px * var(--ncs-scale));
  background-position: calc(52px * var(--ncs-scale))
    calc(28px * var(--ncs-scale));
  background-size: calc(64px * var(--ncs-scale)) calc(64px * var(--ncs-scale));
  transform: scale(1.15, 1.05);
}
