article {
    --skin: #fca;
    --skin-dark: #ea8;
    --skin-dark-semi: #ea84;
    --skin-light: #fec;
    --hair: #963;
    --hair-dark: #741;
    --hair-light: #b85;
    --shirt: #9cf;
    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%;
          }
        }
      }
    }
  }