@layer properties {
    @property --elh {
    /* eye left height   */
      syntax: '<number>';
      inherits: true;
      initial-value: 1;
    }
    
    @property --erx {
    /* eye right x pos   */
      syntax: '<percentage>';
      inherits: true;
      initial-value: 0%;
    }
    @property --fx {
    /* face x pos   */
      syntax: '<percentage>';
      inherits: true;
      initial-value: 0%;
    }
    @property --ealw {
    /* ear left w    */
      syntax: '<number>';
      inherits: true;
      initial-value: 1;
    }@property --earw {
    /* ear right w    */
      syntax: '<number>';
      inherits: true;
      initial-value: 1;
    }
    
    
    @property --erh {
    /* eye right height   */
      syntax: '<number>';
      inherits: true;
      initial-value: 1;
    }
    @property --mh {
    /* mouth height   */
      syntax: '<number>';
      inherits: true;
      initial-value: 1;
    }
    @property --mw {
    /* mouth width   */
      syntax: '<number>';
      inherits: true;
      initial-value: 1;
    }
      }
    
    :root {
      --surface: #111;
        --c: white;
      --c2: #9ae3dc;
      --c3: magenta;
    }
    
    .ai-bot {
      scale: 4.2;
      width: 34px;
      aspect-ratio: 1;
      position: relative;
      display: grid;
      place-items: center;
      animation: blink 2.4s ease infinite, move-head 4.2s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%)  infinite, mouth 1.2s ease-in infinite;
      
      .head {
        background: linear-gradient(var(--c) 80%,color-mix(in srgb, var(--c), black 30%), var(--c) );
        border-radius: .375rem;
        position: absolute;
        width: 28px;
        height: 20px;
        
        
        &:before, &:after {
          content: '';
          position: absolute;
          left: -4px;
          top: 6px;
          width: 2px;
          height: 8px;
          background: var(--c,1);
          border-radius: 2px 0 0 2px;
          scale: var(--ealw, 1) 1;
        }
        &:after {
          right: -4px;
          left: unset;
           border-radius: 0 2px 2px 0;
          scale: var(--earw, 1) 1;
        }
        
        .face {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          inset: 0 3px;
          background: var(--surface);
          translate: var(--fx) 0;
          border-radius: 4px;
          padding: 4px 4px 2px 4px;
          gap: 3px;
          
          &:before {
            content: '';
            background: var(--c);
            position: absolute;
            height: 1px;
            width: 10px;
            top: -2px;
            border-radius: 2px 2px 0 0;
    mask:        radial-gradient(circle at 50% 100%, transparent 45%, black 45%)
          }
         
          
          .eyes {
            display: flex;
            height: 8px;
            gap: 6px;
            &:before, &:after {
              content: '';
              width: 5px;
              height:  8px;
              scale: 1 var(--elh);
              filter: drop-shadow( 0 0 2px var(--c2));
              background: repeating-linear-gradient(to bottom, var(--c), var(--c) .25px, transparent .25px, transparent .6px), linear-gradient(to bottom, var(--c3), transparent 60%), var(--c2);
              border-radius: 1px;
              translate: var(--erx) 0;
            }
            
            &:after {
               scale: 1 var(--erh);
                    translate: var(--erx) 0;
            }
          }
          
          .mouth  {
              width: 10px;
            height: 2px;
            background: var(--c2);
            border-radius: 0 0 1px 1px;
            filter: drop-shadow( 0 0 2px var(--c2));
            scale: var(--mw, 1) var(--mh, 1);
          }
        }
      }
    }
    
    @layer animations {
      
    @keyframes blink {
      from,10%, to { 
        --elh: 1;
        --erh: 1;
      }
      
      2% {
        --elh: .2;
      }
      
      8% {
        --erh: .1;
      }
    }
    
    @keyframes mouth {
      from, 30%,70%, to { 
      --mh: 1;
        --mw: 1;
      }
      
      20% {
        --mh: .5;
      }
      
      60%{ 
          --mw: .7;
      }
    }
    
    @keyframes move-head {
      from, 20%, 40% to{ 
        --erx: 0%
          --fx: 0%;
        --ealw: 1;
            --earw: 1;
      }
      
      10% {
        --erx: 20%;
              --fx: 10%;
        --ealw: 1.5;
            --earw: .5;
      }
      
      30% {
        --erx: -20%;
              --fx: -10%;
      --ealw: .5;
            --earw: 1.5;
      }
      
    }
    }
    
    
    * {
      box-sizing: border-box;
    }
    
    body {
      display: grid;
      place-items: center;
      height: 100dvh;
      background: var(--surface);
    }