article {
  --skin: #fca;
  --skin-dark: #ea8;
  --skin-dark-semi: #ea84;
  --skin-light: #fec;
  --hair: #963;
  --hair-dark: #741;
  --hair-light: #b85;
  --shirt: #9cf;
  --mouth-curve: 40%;
  --eye-size: 15%;
  --hair-fluff: 1;
  --face-shape: 120%;
  font-size: 0.66vmin;
  width: 90em;
  aspect-ratio: 1;
  position: relative;

  & *,
  & *::before,
  & *::after {
    position: absolute;
    box-sizing: border-box;
  }
}

.body {
  width: 100%;
  height: 40%;
  bottom: 0;

  .chest {
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 90%;
    height: 73%;
    background: var(--skin);
    border-radius: 50% / 125% 125% 0 0;
    background:
      radial-gradient(110% 120% at 50% 0, var(--skin) 12%, var(--skin-dark) 25%);
  }

  .shirt {
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 91%;
    height: 74%;
    background: var(--shirt);
    border-radius: 50% / 125% 125% 0 0;
    mask: radial-gradient(80% 120% at 50% 0, #0000 20%, #000 0);

    &::before {
      content: "";
      width: 39%;
      height: 33%;
      background: red;
      border-radius: 50% / 0 0 100% 100%;
      left: 50%;
      transform: translate(-50%);
      box-shadow: inset 0 0 0 100vmax #0001;
      filter:
        drop-shadow(-0.2em 0 0.1em #0002) drop-shadow(0.1em 0.1em 0.2em #fff2) drop-shadow(0.1em 0.2em 0.3em #fff4);
      background:
        repeating-conic-gradient(at 50% -65%, #0000 0 5deg, #0002 0 5.5deg, #fff4 6.5deg),
        var(--shirt);
    }
  }
}

.head {
  width: 50%;
  height: 60%;
  left: 50%;
  transform: translate(-50%);

  .hair {
    --b: ;
    --hair-light2: var(--hair-light);
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      var(--b) radial-gradient(at 30% 30%, var(--hair-light) 10%, #0000 50%),
      var(--hair);
    transform: translate(-50%, -50%);
    box-shadow:
      inset 0 0 1em 0.25em var(--hair),
      inset -1em -1em 2em var(--hair-dark),
      inset 1em 1em 1em 0.25em var(--hair-light2);

    &.hair-1 {
      left: 50%;
      top: 5%;
      width: 25%;
    }

    &.hair-2 {
      left: 33%;
      top: 2%;
      --b: radial-gradient(100% 100% at 95% 65%, var(--hair-dark) 05%, #0000 50%),
    }

    &.hair-3 {
      --hair-light: #b85;
      --hair-light2: #0000;
      width: 21%;
      left: 66%;
      top: 3%;
      --b: radial-gradient(110% 120% at 10% 55%, var(--hair-dark) 0%, #0000 40%),
    }

    &.hair-5 {
      --hair-light: #b856;
      width: 24%;
      left: 46%;
      top: -3%;
      --b:
        radial-gradient(100% 100% at 60% 60%, var(--hair-dark) 0%, #0000 50%),
        radial-gradient(100% 100% at 10% 40%, var(--hair-dark) 0, #0000 30%),
    }

    &.hair-4 {
      --hair-light: #b855;
      width: 17%;
      left: 63%;
      top: -3%;
      --b: radial-gradient(100% 100% at 10% 60%, var(--hair-dark) 5%, #0000 50%),
    }

    &.hair-6 {
      --hair-light: #b85c;
      left: 21%;
      top: 8%;
      --b: radial-gradient(120% 200% at 80% 10%, var(--hair-dark) 0%, #0000 30%), ;
    }

    &.hair-7 {
      --hair-light: #b858;
      width: 22%;
      left: 11%;
      top: 18%;
      --b: radial-gradient(200% 150% at 80% 10%, var(--hair-dark) 5%, #0000 30%), ;
    }

    &.hair-8 {
      --hair-light: #b858;
      left: 4%;
      top: 31%;
      width: 18%;
      --b: radial-gradient(200% 150% at 80% -10%, var(--hair-dark) 15%, #0000 30%), ;
    }

    &.hair-9 {
      --hair-light: #b85c;
      left: 5%;
      top: 45%;
      height: 23%;
      --b: radial-gradient(at 30% 0, var(--hair-dark) 15%, #0000 30%), ;
    }

    &.hair-6b {
      --hair-light: #b855;
      left: 77%;
      width: 25%;
      --b: radial-gradient(120% 200% at 20% 10%, var(--hair-dark) 10%, #0000 30%), ;
    }

    &.hair-7b {
      --hair-light: #b854;
      left: 89%;
      --b: radial-gradient(200% 150% at 20% 10%, var(--hair-dark) 5%, #0000 30%), radial-gradient(200% 150% at 30% 90%, var(--hair-dark) 5%, #0000 30%), ;
    }

    &.hair-8b {
      --hair-light: #b854;
      left: 94%;
      --b: radial-gradient(150% 250% at 30% 40%, var(--hair-dark) 5%, #0000 30%), ;
    }

    &.hair-9b {
      --hair-light: #b854;
      left: 95%;
      --b: radial-gradient(200% 200% at 20% 10%, var(--hair-dark) 10%, #0000 30%), ;
    }
  }

  .neck {
    width: 60%;
    height: 30%;
    left: 50%;
    top: 96%;
    transform: translate(-50%);
    mask:
      radial-gradient(80% 100% at 0 45%, #0000 50%, #000 0) 0 0 / 55% 80% no-repeat,
      radial-gradient(80% 100% at 100% 45%, #0000 50%, #000 0) 100% 0 / 55% 80% no-repeat,
      linear-gradient(#0000 76%, #000 0, #0000);
    background:
      linear-gradient(var(--skin-dark), #0000 30%),
      linear-gradient(var(--skin-dark), var(--skin) 55%) var(--skin);
  }

  .ear {
    --p: -3%;
    --r: rotate(-8deg);
    width: 26%;
    height: 26%;
    background: var(--skin);
    border-radius: 100% / 80% 80% 120% 120%;
    transform: translate(-50%) var(--r);
    left: var(--p);
    top: 48%;
    box-shadow:
      inset 1em 1em 1em -1em var(--skin-light),
      inset 1em 1em 1em -0.75em var(--skin);
    background:
      radial-gradient(80% 80% at 100% 65%, var(--skin-dark), #0000 80%),
      linear-gradient(90deg, var(--skin-light), var(--skin)),
      var(--skin);

    &::before {
      content: "";
      width: 65%;
      height: 70%;
      top: 18%;
      left: 15%;
      border-radius: 100% / 80% 80% 120% 120%;
      box-shadow:
        inset 0em 1em 1em var(--skin);
      background: radial-gradient(circle at 85% 75%, var(--skin-dark-semi) 20%, #3001 0, #0000 30%);
    }

    &~& {
      --r: scaleX(-1) rotate(-8deg);
      left: calc(100% - var(--p));

      background:
        radial-gradient(80% 80% at 100% 65%, var(--skin-dark), #0000 80%),
        linear-gradient(90deg, var(--skin), var(--skin-dark)),
        var(--skin);

      &::before {
        box-shadow:
          inset 0em 1em 1em var(--skin-dark);
        background: radial-gradient(circle at 85% 75%, var(--skin-dark) 20%, var(--skin-dark-semi) 0, #0000 30%);
      }
    }
  }

  .face {
    width: 100%;
    height: 100%;
    background:
      radial-gradient(100% 100% at 50% 0, var(--skin-dark) 15%, #0000 25%),
      radial-gradient(100% 100% at 30% 0, var(--skin-dark) 10%, #0000 20%),
      radial-gradient(100% 100% at 70% 0, var(--skin-dark) 10%, #0000 23%),
      linear-gradient(90deg, var(--skin-light), var(--skin), var(--skin), var(--skin-dark)),
      var(--skin);
    border-radius: 100% / 120% 120% 60% 60%;
    box-shadow:
      inset -1em 22em 2em -17em var(--skin-dark),
      inset 1.5em 1.5em 2em -0.25em var(--skin-light),
      inset 0 -1em 2em 0.5em var(--skin-dark),
      inset -3em 0 7em var(--skin-dark);



    .mouth {
      width: 40%;
      height: 18%;
      border: 0.25em solid #0000;
      border-bottom: 0.35em solid #000a;
      border-radius: 50%;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);
      filter:
        drop-shadow(0 -0.2em var(--skin-dark)) drop-shadow(0.1em 0.1em 0.1em #fff8) drop-shadow(0.1em 0.2em 0.1em #fffc);

      &::before,
      &::after {
        content: "";
        width: 20%;
        height: 30%;
        border-radius: 50%;
        border: 0.25em solid #0000;
        border-right: 0.35em solid #000a;
        transform: rotate(-20deg);
        top: 70%;
        left: 74%;
      }

      &::after {
        border: 0.25em solid #0000;
        border-left: 0.35em solid #000a;
        transform: rotate(30deg);
        top: 73%;
        left: 6%;
      }
    }

    .eye {
      --p: 29%;
      --t: rotate(8deg);
      width: 15%;
      height: 15%;

      border-radius: 50%;
      top: 43%;
      left: var(--p);
      transform: translate(-50%) var(--t);
      background:
        radial-gradient(circle at 35% 35%, #fff3, #0000 40%),
        #222;
      box-shadow:
        inset 0 0 1.5em 0.5em #000,
        inset 1.5em 2em 1em -1em #fffa,
        -0.25em -0.25em 0.5em var(--skin-dark);
      filter:
        drop-shadow(0.1em 0.1em 0.1em #fff8) drop-shadow(0.1em 0.2em 0.1em #fffc) drop-shadow(0 -0.2em var(--skin-dark)) drop-shadow(0 0 2em var(--skin-dark));

      &~& {
        --t: rotate(-9deg);
        left: calc(100% - var(--p));
      }


      /* ALTERNATIVE */
      /*       background: 
          radial-gradient(circle at 35% 35%, #fff3, #0000 40%),
          #fff;
        box-shadow:
          inset 0 0 1.5em 0.5em #ddd,
          inset 1.5em 2em 1em -1em #fffa,
           -0.25em -0.25em 0.5em var(--skin-dark);
        width: 18%;
        &::before {
          content: "";
          width: 60%;
          height: 60%;
          top: 55%;
          left: 56%;
          border-radius: 50%;
          transform: translate(-50%, -50%) rotate(-5deg);
          background: 
            radial-gradient(circle at 35% 35%, #fff3, #0000 40%),
            #222;
          box-shadow:
            inset 0 0 1.5em 0.5em #000,
            inset 1.5em 2em 1em -1em #fff;
          filter: 
            drop-shadow(0.1em 0.1em 0.1em #fff8)
            drop-shadow(0.1em 0.2em 0.1em #fffc)
          ;
        }
        
        & ~ & {
          &::before {
            left: 44%;
            transform: translate(-50%, -50%) rotate(5deg);
          }
        } */
    }

    .nose {
      width: 15%;
      aspect-ratio: 1;
      top: 55%;
      left: 50%;
      transform: translate(-50%);
      border-radius: 50%;
      background:
        radial-gradient(var(--skin-light), #0000 25%),
        conic-gradient(var(--skin), var(--skin-dark) 45%, var(--skin), var(--skin-light) 80%, var(--skin));
      filter: blur(0.5em)
    }

    .eyebrow {
      --p: 29%;
      --t: rotate(-5deg);
      width: 24%;
      height: 15%;
      border-radius: 100% / 60% 90% 60% 100%;
      top: 33%;
      left: var(--p);
      transform: translate(-50%) var(--t);
      filter:
        drop-shadow(0.1em 0.1em 0.1em #fff8) drop-shadow(0.1em 0.1em 0.1em #0004) drop-shadow(0.25em 0.25em 0.3em #0004) drop-shadow(0.1em 0.2em 0.1em var(--skin-dark)) drop-shadow(0.2em 0.2em 0.25em var(--skin-dark));

      &::before {
        content: "";
        width: 100%;
        height: 100%;
        mask: radial-gradient(100% 100% at 50% 100%, #0000 calc(70% - 1px), #000 70%);
        background: var(--hair);
        border-radius: 100% / 60% 90% 60% 100%;
        box-shadow:
          inset 0 0 0.5em 0.5em var(--hair),
          inset 0.25em 0.5em 0.5em 0.1em var(--hair-light),
          inset -0.25em 2em 1em 0.1em var(--hair),
          inset -0.5em 4em 1em 0.1em var(--hair-dark)
      }

      &~& {
        --t: rotate(6deg);
        left: calc(100% - var(--p));

        &::before {
          border-radius: 100% / 80% 70% 60% 100%;
        }
      }
    }
  }
}
.customizer-container {
  display: flex;
  gap: 2rem;
  max-height: 80dvh;
}

.control-panel {
  background: linear-gradient(145deg, #151515, #171717);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.control-section {
  margin-bottom: 2rem;
}

.control-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #b4caee;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.color-picker-wrapper {
  position: relative;
  background: #202020;
  padding: 0.75rem;
  border-radius: 8px;
  transition: all 0.2s;
}

.color-picker-wrapper:hover {
  background: #28292c;
}

.color-picker-label {
  font-size: 0.875rem;
  color: #acc1de;
  margin-bottom: 0.5rem;
}

input[type="color"] {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #2b2b2b;
}

.slider-control {
  margin-bottom: 1.25rem;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.slider-label {
  font-size: 0.875rem;
  color: #aabbd3;
}

.value-display {
  font-size: 0.875rem;
  color: #6b7280;
  font-family: monospace;
}

input[type="range"] {
  width: 100%;
  height: 6px;
  background: #2c2d30;
  border-radius: 3px;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #2563eb;
  transform: scale(1.1);
}

.toggle-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e7eb;
  transition: .4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #3b82f6;
}

input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.action-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-secondary {
  background: #e5e7eb;
  color: #374151;
}

.btn-secondary:hover {
  background: #d1d5db;
}

.preset-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.preset-btn {
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.preset-btn:hover {
  background: #f3f4f6;
}