/*!
 * Library Name: comiCSS.art
 * Version: 1.0.0
 * Description: A web component library (JS/CSS) to help generate comics in HTML.
 * Author: Alvaro Montoro
 *
 * Copyright (c) 2025 Alvaro Montoro
 * All rights reserved.
 */
css-comic {
  --bg: #0000;
  display: grid;
  font-size: 1vmin;
  gap: 1.5em;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  width: fit-content;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  h1 {
    font-size: 3em;
    grid-column: 1 / 3;
    margin: 0;
    translate: 0 0.35em;
  }

  footer {
    align-items: center;
    font-size: 2em;
    grid-column: 1 / 3;
    display: flex;
    justify-content: space-between;
    translate: 0 -0.5em;

    .red { color: red; }
    a { text-decoration: none; color: #939;}
    a:hover { text-decoration: underline; }

    h2, p, a {
      display: inline;
      margin: 0;
      font-size: 1em;
    }

    section:last-child {
      text-align: right;

      h2 { font-size: 1.1em; }
    }
  }
}

css-panel {
  aspect-ratio: 1;
  background: linear-gradient(var(--bg), #0000 70%);
  border: 0.35em solid #000;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  width: 44.25em;

  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: absolute;
  }

  * {
    &[center] {
      left: 50%;
      translate: -50%;
    }
    
    &[facing="left"] { scale: -1 1; }

    &[left="5"]  { left:  5%; }
    &[left="10"] { left: 10%; }
    &[left="15"] { left: 15%; }
    &[left="20"] { left: 20%; }
    &[left="25"] { left: 25%; }
    &[left="30"] { left: 30%; }
    &[left="35"] { left: 35%; }
    &[left="40"] { left: 40%; }
    &[left="45"] { left: 45%; }
    &[left="50"] { left: 50%; }
    &[left="55"] { left: 55%; }
    &[left="60"] { left: 60%; }
    &[left="65"] { left: 65%; }
    &[left="70"] { left: 70%; }
    &[left="75"] { left: 75%; }
    &[left="80"] { left: 80%; }
    &[left="85"] { left: 85%; }
    &[left="90"] { left: 90%; }
    &[left="95"] { left: 95%; }

    &[right="5"]  { right:  5%; }
    &[right="10"] { right: 10%; }
    &[right="15"] { right: 15%; }
    &[right="20"] { right: 20%; }
    &[right="25"] { right: 25%; }
    &[right="30"] { right: 30%; }
    &[right="35"] { right: 35%; }
    &[right="40"] { right: 40%; }
    &[right="45"] { right: 45%; }
    &[right="50"] { right: 50%; }
    &[right="55"] { right: 55%; }
    &[right="60"] { right: 60%; }
    &[right="65"] { right: 65%; }
    &[right="70"] { right: 70%; }
    &[right="75"] { right: 75%; }
    &[right="80"] { right: 80%; }
    &[right="85"] { right: 85%; }
    &[right="90"] { right: 90%; }
    &[right="95"] { right: 95%; }

    &[top="5"]  { top:  5%; }
    &[top="10"] { top: 10%; }
    &[top="15"] { top: 15%; }
    &[top="20"] { top: 20%; }
    &[top="25"] { top: 25%; }
    &[top="30"] { top: 30%; }
    &[top="35"] { top: 35%; }
    &[top="40"] { top: 40%; }
    &[top="45"] { top: 45%; }
    &[top="50"] { top: 50%; }
    &[top="55"] { top: 55%; }
    &[top="60"] { top: 60%; }
    &[top="65"] { top: 65%; }
    &[top="70"] { top: 70%; }
    &[top="75"] { top: 75%; }
    &[top="80"] { top: 80%; }
    &[top="85"] { top: 85%; }
    &[top="90"] { top: 90%; }
    &[top="95"] { top: 95%; }

    &[width="5"]  { width:  5%; }
    &[width="10"] { width: 10%; }
    &[width="15"] { width: 15%; }
    &[width="20"] { width: 20%; }
    &[width="25"] { width: 25%; }
    &[width="30"] { width: 30%; }
    &[width="35"] { width: 35%; }
    &[width="40"] { width: 40%; }
    &[width="45"] { width: 45%; }
    &[width="50"] { width: 50%; }
    &[width="55"] { width: 55%; }
    &[width="60"] { width: 60%; }
    &[width="65"] { width: 65%; }
    &[width="70"] { width: 70%; }
    &[width="75"] { width: 75%; }
    &[width="80"] { width: 80%; }
    &[width="85"] { width: 85%; }
    &[width="90"] { width: 90%; }
    &[width="95"] { width: 95%; }

    &[rotate="1"]   { rotate:   1deg; }
    &[rotate="2"]   { rotate:   2deg; }
    &[rotate="3"]   { rotate:   3deg; }
    &[rotate="4"]   { rotate:   4deg; }
    &[rotate="5"]   { rotate:   5deg; }
    &[rotate="6"]   { rotate:   6deg; }
    &[rotate="7"]   { rotate:   7deg; }
    &[rotate="8"]   { rotate:   8deg; }
    &[rotate="9"]   { rotate:   9deg; }
    &[rotate="10"]  { rotate:  10deg; }
    &[rotate="-1"]  { rotate:  -1deg; }
    &[rotate="-2"]  { rotate:  -2deg; }
    &[rotate="-3"]  { rotate:  -3deg; }
    &[rotate="-4"]  { rotate:  -4deg; }
    &[rotate="-5"]  { rotate:  -5deg; }
    &[rotate="-6"]  { rotate:  -6deg; }
    &[rotate="-7"]  { rotate:  -7deg; }
    &[rotate="-8"]  { rotate:  -8deg; }
    &[rotate="-9"]  { rotate:  -9deg; }
    &[rotate="-10"] { rotate: -10deg; }
  }
}

css-title {
  background: #fff;
  border-bottom: 0.15em solid;
  font-size: 2em;
  left: 0;
  padding: 0.5em 0.5em;
  text-wrap: balance;
  top: 0;
  width: 100%;
  z-index: 1;
}

css-speech {
  --bg: #fff;
  background: var(--bg);
  border: 0.15em solid;
  border-radius: 1em;
  font-size: 1.75em;
  line-height: 1.25;
  margin: 1em;
  padding: 0.5em 1em;
  text-align: center;
  text-wrap: balance;
  width: fit-content;

  * { position: relative; }

  &::before {
    background: linear-gradient(to bottom right, var(--bg) calc(50% - 0.15em), #000 0 50%, #0000 0);
    border-left: 0.15em solid;
    content:"";
    height: 3em;
    left: 20%;
    top: 100%;
    transform: skew(-15deg);
    width: 1em;
  }

  &[type="whisper"] {
    background: #0000;
    border: 0;
    font-size: 1.125em;
    padding: 0;

    &::before { content: none; }
  }

  &[line~="short"]::before { height: 2em; }
  &[line~="long"]::before { height: 4em; }
  &[line~="longer"]::before { height: 6em; }
  &[line~="longest"]::before { height: 8em; }

  &[line~="skew"]::before { transform: skew(-20deg); }
  &[line~="skewer"]::before { transform: skew(-25deg); }
  &[line~="skewest"]::before { transform: skew(-30deg); }

  &[line~="left-5"]::before  { left:  5%; }
  &[line~="left-10"]::before { left: 10%; }
  &[line~="left-15"]::before { left: 15%; }
  &[line~="left-20"]::before { left: 20%; }
  &[line~="left-25"]::before { left: 25%; }
  &[line~="left-30"]::before { left: 30%; }
  &[line~="left-35"]::before { left: 35%; }
  &[line~="left-40"]::before { left: 40%; }
  &[line~="left-45"]::before { left: 45%; }
  &[line~="left-50"]::before { left: 50%; }
  &[line~="left-55"]::before { left: 55%; }
  &[line~="left-60"]::before { left: 60%; }
  &[line~="left-65"]::before { left: 65%; }
  &[line~="left-70"]::before { left: 70%; }
  &[line~="left-75"]::before { left: 75%; }
  &[line~="left-80"]::before { left: 80%; }
  &[line~="left-85"]::before { left: 85%; }
  &[line~="left-90"]::before { left: 90%; }
  &[line~="left-95"]::before { left: 95%; }

  &[no-line]::before {
    content: none;
  }

  &[right-line]::before {
    scale: -1 1;
  }
}

/* adding class so it's easier to customize later */
css-person,
.css-person {
  --hair: #000;
  --skin-color: #fff;
  --skin: linear-gradient(45deg, #fff0 0 0.25em, #000 0 0.5em, #fff0 0) 0 0 / 100% 0.6em, var(--skin-color);
  aspect-ratio: 2 / 3;
  bottom: -1%;
  width: 20em;
  font-size: 0.75em;

  &[skin="light"] { --skin-color: #e8e8e8; }
  &[skin="medium"] { --skin-color: #ccc; }
  &[skin="deep"] { --skin-color: #aaa; }
  &[skin="dark"] { --skin-color: #999; }

  &[facing="left"] { scale: -1 1; }

  &[height="short"] { bottom: -2%; }
  &[height="tall"] { bottom: 4%; }

  .body {
    height: 55%;
    left: 49%;
    top: 57%;
    translate: -50%;
    width: 40%;

    .chest {
      background: #000;
      border-radius: 4em 4em 0 0;
      height: 100%;
      left: 50%;
      translate: -50%;
      width: 100%;

      [chest="thin"] & {
        width: 90%;
      }

      [chest="medium"] & {
        width: 95%;
      }
    }

    .hand {
      aspect-ratio: 1;
      background: var(--skin);
      border: 0.4em solid;
      border-radius: 50%;
      top: 150%;
      translate: -50% -50%;
      width: 3em;
    }

    .arm {
      height: 9em;
      left: calc(100% - 1.35em);
      /*       mix-blend-mode: difference; */
      rotate: -18deg;
      top: 3.25em;
      transform-origin: 0 0;
      width: 1.25em;

      [chest="thin"] & {
        left: calc(100% - 1.6em);    
      }

      [arms~="right-0"]   & { rotate:   0deg; }
      [arms~="right--0"]  & { rotate:   0deg; }
      [arms~="right--5"]  & { rotate:  -5deg; }
      [arms~="right--8"]  & { rotate:  -8deg; }
      [arms~="right--10"] & { rotate: -10deg; }
      [arms~="right--12"] & { rotate: -12deg; }
      [arms~="right--15"] & { rotate: -15deg; }
      [arms~="right--18"] & { rotate: -18deg; }
      [arms~="right--20"] & { rotate: -20deg; }
      [arms~="right--25"] & { rotate: -25deg; }
      [arms~="right--30"] & { rotate: -30deg; }
      [arms~="right--40"] & { rotate: -40deg; }
      [arms~="right--45"] & { rotate: -45deg; }
      [arms~="right--50"] & { rotate: -50deg; }
      [arms~="right--55"] & { rotate: -55deg; }
      [arms~="right--60"] & { rotate: -60deg; }
      [arms~="right--65"] & { rotate: -65deg; }
      [arms~="right--70"] & { rotate: -70deg; }
      [arms~="right--75"] & { rotate: -75deg; }
      [arms~="right--80"] & { rotate: -80deg; }
      [arms~="right--85"] & { rotate: -85deg; }
      [arms~="right--90"] & { rotate: -90deg; }

      [arms~="left-0"]   & ~ & { rotate:   0deg; }
      [arms~="left-5"]   & ~ & { rotate:   5deg; }
      [arms~="left-8"]   & ~ & { rotate:   8deg; }
      [arms~="left-10"]  & ~ & { rotate:  10deg; }
      [arms~="left-12"]  & ~ & { rotate:  12deg; }
      [arms~="left-15"]  & ~ & { rotate:  15deg; }
      [arms~="left-18"]  & ~ & { rotate:  18deg; }
      [arms~="left-20"]  & ~ & { rotate:  20deg; }
      [arms~="left-25"]  & ~ & { rotate:  25deg; }
      [arms~="left-30"]  & ~ & { rotate:  30deg; }
      [arms~="left--0"]  & ~ & { rotate:   0deg; }
      [arms~="left--5"]  & ~ & { rotate:  -5deg; }
      [arms~="left--10"] & ~ & { rotate: -10deg; }
      [arms~="left--15"] & ~ & { rotate: -15deg; }
      [arms~="left--20"] & ~ & { rotate: -20deg; }
      [arms~="left--25"] & ~ & { rotate: -25deg; }
      [arms~="left--30"] & ~ & { rotate: -30deg; }
      [arms~="left--35"] & ~ & { rotate: -35deg; }
      [arms~="left--40"] & ~ & { rotate: -40deg; }
      [arms~="left--45"] & ~ & { rotate: -45deg; }
      [arms~="left--50"] & ~ & { rotate: -50deg; }
      [arms~="left--55"] & ~ & { rotate: -55deg; }
      [arms~="left--60"] & ~ & { rotate: -60deg; }
      [arms~="left--65"] & ~ & { rotate: -65deg; }
      [arms~="left--70"] & ~ & { rotate: -70deg; }
      [arms~="left--75"] & ~ & { rotate: -75deg; }
      [arms~="left--80"] & ~ & { rotate: -80deg; }
      [arms~="left--85"] & ~ & { rotate: -85deg; }
      [arms~="left--90"] & ~ & { rotate: -90deg; }

      [arms~="right-fold--0"]  &::after { rotate:   0deg; }
      [arms~="right-fold--5"]  &::after { rotate:  -5deg; }
      [arms~="right-fold--10"] &::after { rotate: -10deg; }
      [arms~="right-fold--15"] &::after { rotate: -15deg; }
      [arms~="right-fold--20"] &::after { rotate: -20deg; }
      [arms~="right-fold--25"] &::after { rotate: -25deg; }
      [arms~="right-fold--30"] &::after { rotate: -30deg; }
      [arms~="right-fold--35"] &::after { rotate: -35deg; }
      [arms~="right-fold--40"] &::after { rotate: -40deg; }
      [arms~="right-fold--45"] &::after { rotate: -45deg; }
      [arms~="right-fold--50"] &::after { rotate: -50deg; }
      [arms~="right-fold--55"] &::after { rotate: -55deg; }
      [arms~="right-fold--60"] &::after { rotate: -60deg; }
      [arms~="right-fold--65"] &::after { rotate: -65deg; }
      [arms~="right-fold--70"] &::after { rotate: -70deg; }
      [arms~="right-fold--75"] &::after { rotate: -75deg; }
      [arms~="right-fold--80"] &::after { rotate: -80deg; }
      [arms~="right-fold--85"] &::after { rotate: -85deg; }
      [arms~="right-fold--90"] &::after { rotate: -90deg; }

      [arms*="right-fold"] & ~ &::after { rotate: 0deg; }

      [arms~="left-fold--0"]  & ~ &::after { rotate:   0deg; }
      [arms~="left-fold--5"]  & ~ &::after { rotate:  -5deg; }
      [arms~="left-fold--10"] & ~ &::after { rotate: -10deg; }
      [arms~="left-fold--15"] & ~ &::after { rotate: -15deg; }
      [arms~="left-fold--20"] & ~ &::after { rotate: -20deg; }
      [arms~="left-fold--25"] & ~ &::after { rotate: -25deg; }
      [arms~="left-fold--30"] & ~ &::after { rotate: -30deg; }
      [arms~="left-fold--35"] & ~ &::after { rotate: -35deg; }
      [arms~="left-fold--40"] & ~ &::after { rotate: -40deg; }
      [arms~="left-fold--45"] & ~ &::after { rotate: -45deg; }
      [arms~="left-fold--50"] & ~ &::after { rotate: -50deg; }
      [arms~="left-fold--55"] & ~ &::after { rotate: -55deg; }
      [arms~="left-fold--60"] & ~ &::after { rotate: -60deg; }
      [arms~="left-fold--65"] & ~ &::after { rotate: -65deg; }
      [arms~="left-fold--70"] & ~ &::after { rotate: -70deg; }
      [arms~="left-fold--75"] & ~ &::after { rotate: -75deg; }
      [arms~="left-fold--80"] & ~ &::after { rotate: -80deg; }
      [arms~="left-fold--85"] & ~ &::after { rotate: -85deg; }
      [arms~="left-fold--90"] & ~ &::after { rotate: -90deg; }

      &::before, &::after {
        background: #000;
        inset: 0;
        content: "";
        height: 100%;
        width: 100%;
        box-shadow: -0.25em 0 #fff, 0.25em 0 #fff;
      }

      &::after {
        transform-origin: 0% 0;
        translate: 0 99%;
        rotate: 0deg;
        mix-blend-mode: darken;
      }

      & ~ & {  
        left: 0em;
        rotate: 18deg;

        [chest="thin"] & {
          left: 0.4em; 
        }

        [chest="medium"] & {
          left: 0.2em;
        }

        &::before {
          clip-path: polygon(-20% 0, 20% 0, 120% 40%, 120% 100%, -20% 100%);
        }

        [arms~="left-25"] &::before,
        [arms~="left-30"] &::before {
          clip-path: unset;
        }
      }
    }
  }

  .head {
    height: 50%;
    left: 50%;
    translate: -50%;
    width: 45%;

    .hair-back {
      [hair~="curly"] & {
        --base: -7.5em -1em,
          -7.75em 0.5em 0 -0.25em,
          0.75em -1.25em 0 -0.6em;
        aspect-ratio: 1;
        background: var(--hair);
        border-radius: 50%;
        box-shadow: var(--base);
        left: 70%;
        top: 10%;
        width: 40%;

        [hair~="long"] & {
          box-shadow:
            var(--base),
            -8.25em 2.5em,
            -8.75em 4.25em 0 -0.25em,
            -8.5em 6.75em 0 0.1em,
            -8em 8.5em 0 -0.1em,
            -8.4em 10.75em 0 -0.25em,
            -7.1em 11.5em,
            -5em 12.25em 0 -0.5em,
            -2.5em 11.5em 0 -0.25em,
            -1em 11em 0 -0.5em
            ;
        }
      }
    }

    .hair {
      [hair~="curly"] & {
        --base:  -2.5em -0.5em,
          2em -0.75em 0 0.25em,
          0.5em -2em,
          -2em -2em,
          -4em -1em,
          -5em 0.5em 0 -0.25em;
        aspect-ratio: 1;
        background: var(--hair);
        border-radius: 50%;
        box-shadow: var(--base);
        left: 40%;
        width: 40%;

        [hair~="long"] & {
          box-shadow: 
            var(--base), 
            -5.5em 2.75em 0 -0.5em;
        }
      }
    }

    .neck {
      background: var(--skin);
      border: 0.4em solid;
      border-radius: 2em;
      height: 30%;
      left: 49%;
      top: 90%;
      translate: -50%;
      width: 15%;
    }

    .face {
      background: var(--skin);
      border: 0.4em solid;
      border-radius: 3em;
      height: 100%;
      width: 100%;

      [head="bald"] & {
        border-radius: 5em 5em 3em 3em;
      }

      [facial-hair="beard"] & {
        background:
          conic-gradient(at 0 45%, #0000 162deg, #000 0),
          radial-gradient(120% 50% at 56% 100%, #000 49%, #0000 calc(49% + 1px)),
          var(--skin);
      }

      [facial-hair~="beard"][facial-hair~="short"] & {
        background:
          radial-gradient(120% 50% at 56% 100%, #000 49%, #0000 calc(49% + 1px)),
          var(--skin);
      }

      [facial-hair="goatee"] & {
        background:
          radial-gradient(75% 50% at 59% 100%, #000 49%, #0000 calc(49% + 1px)),
          var(--skin);
      }

      [facial-hair="mustache"] & {
        background:
          radial-gradient(75% 40% at 59% 100%, #000 49%, #0000 calc(49% + 1px)) 62% 73% / 50% 35% no-repeat,
          var(--skin);
      }

      [facial-hair="sideburns"] & {
        background:
          linear-gradient(#000 0 0) 0 80% / 1em 4em no-repeat,
          var(--skin);
      }

      [facial-hair="unshaven"] & {
        background:
          radial-gradient(120% 50% at 56% 100%, #0002 49%, #0000 calc(49% + 1px)),
          var(--skin);
      }

      .mouth {
        /*         background: #fff; */
        background: #000;
        border-radius: 50% / 0 0 100% 100%;
        height: 7%;
        left: 60%;
        /*         mix-blend-mode: multiply; */
        top: 82%;
        translate: -50%;
        width: 30%;

        [mouth~="no-mouth"] & {
          display: none;
        }
        
        [mouth~="smile"] & {
          border: 0.4em solid;
          border-top: 0;
          background: #0000;
          
          [mouth~="small"] & {
            border: 0.5em solid;
            border-top: 0;
          }
        }
        
        [mouth~="sad"] & {
          aspect-ratio: 3.33;
          height: auto;
          border: 0.4em solid;
          border-top: 0;
          background: #0000;
          scale: 1 -1;
          top: 83%;
          
          [mouth~="small"] & {
            scale: -0.75;
            border: 0.5em solid;
            border-top: 0;
          }
        }

        [mouth~="flat"] & {
          border-radius: 0;
          height: 0.35em;
          top: 85%;
        }

        [mouth~="sided"] & {
          translate: -65%;
        }

        [mouth~="side-right"] & {
          rotate: 5deg;
        }

        [mouth~="side-righter"] & {
          rotate: 10deg;
        }

        [mouth~="side-left"] & {
          rotate: -5deg;
        }

        [mouth~="side-lefter"] & {
          rotate: -10deg;
        }

        [mouth~="small"] & {
          scale: 0.75;
        }

        [mouth~="frown"] & {
          transform: scaleY(-1);
        }

        [mouth~="disappointed"] & {
          transform: scale(1, -1);
          border: 0.5em solid #000;
          background: #0000;
          border-top: 0;
        }

        [mouth~="surprise"] & {
          aspect-ratio: 1;
          border-radius: 50%;
          height: auto;
          width: 18%;
        }

        [mouth~="yawn"] & {
          aspect-ratio: 0.85;
          border-radius: 50%;
          height: auto;
          width: 18%;
        }

        [mouth~="yawn"][mouth~="small"] &,
        [mouth~="surprise"][mouth~="small"] & {
          width: 15%;
        }

        [mouth~="smirk"] & {
          background: #fff0;
          border: 0.5em solid #000;
          border-top: 0;
          clip-path: polygon(0 100%, 50% 0, 100% 100%);
        }
      }

      .ear {
        --skin: repeating-linear-gradient(45deg, #fff0 0 0.25em, #000 0 0.5em, #fff0 0) 0 0 / 100% 0.6em, var(--skin-color);
        aspect-ratio: 1;
        background: var(--skin);
        border: 0.4em solid;
        border-radius: 50%;
        clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
        left: 0;
        top: 59.5%;
        translate: -50%;
        width: 30%;
      }

      .eye {
        background: #000;
        border-radius: 6em;
        height: 13%;
        left: 40%;
        top: 50%;
        width: 8%;

        [shocked] & {
          scale: 1.15;
        }

        & + & {
          left: 80%;

          [shocked] & {
            scale: 1;
          }
        }
      }

      .eyebrow {
        --diff: ;
        background: #000;
        border-radius: 6em;
        height: 5%;
        left: 45%;
        top: 45%;
        transform: translate(-50%, -50%) var(--diff);
        width: 25%;

        [eyebrows~="low"] & {
          top: 48%;
        }

        [eyebrows~="high"] & {
          top: 40%;
        }

        [eyebrows~="angry"] & {
          --diff: rotate(10deg);
        }

        [eyebrows~="sad"] & {
          --diff: rotate(-10deg);
        }

        [eyebrows~="suspicious"] & {
          --diff: rotate(2deg);

          & + & {
            --diff: rotate(20deg);
            translate: 0 -0.66em;
          }
        }

        [eyebrows~="suspicious"][eyebrows~=surprised] & {
          --diff: rotate(-5deg);

          & + & {
            --diff: rotate(-15deg);
            translate: 0 -1em;
          }
        }

        [eyebrows~="suspicious"][eyebrows~=angry] & {
          --diff: rotate(10deg);
          translate: 0 -0.25em;

          & + & {
            --diff: rotate(4deg);
            translate: 0;
          }
        }

        & + & {
          left: 85%;
          transform: translate(-50%, -50%) scaleX(-1) var(--diff);
        }
      }

      .nose {
        aspect-ratio: 0.8;
        border: 0.4em solid;
        border-left: 0;
        border-radius: 0 10em 10em 0;
        left: 60%;
        top: 66%;
        width: 15%;
      }
    }
  }

  &[character="al"i] {
    .head {
      .face {
        .eyebrow {
          translate: 0 -0.125em;
        }

        .hair {
          width: 135%;
          height: 20%;
          background: #000;
          border-radius: 50% / 100% 100% 0 0;
          left: -0.3em;
          top: -5%;
          transform-origin: 0 100%;
          transform: rotate(-5deg);

          &::before,
          &::after {
            content: "";
            width: 105%;
            height: 100%;
            border-radius: 50% / 100% 100% 0 0;
            transform-origin: 0 100%;
            transform: rotate(10deg);
            background: #000;
          }

          &::after {
            width: 100%;
            transform: rotate(16deg);
          }
        }
      }
    }
  }

  &[character="john"i] {
    aspect-ratio: 2/3.15;

    .head {
      .face {
        border-radius: 5em 5em 3em 3em;

        .ear {
          top: 65%;
        }

        .eyebrow {
          height: 4%;
        }

        .hair {
          width: 140%;
          height: 25%;
          border-radius: 10em 0 10em 0;
          left: -0.4em;
          top: -0.4em;

          &::before {
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: #000;
            border-radius: 10em 0 10em 0;
            mask: radial-gradient(35% 20% at 75% -10%, #0000 calc(99% - 1px), #000)
          }

          &::after {
            content: "";
            width: 100%;
            height: 100%;
            top: -20%;
            left: 0;
            background: conic-gradient(at 90% 10%, #0000 220deg, #000 221deg 254deg, #0000 255deg) 100% 0 / 50% 100% no-repeat;
          }
        }
      }
    }
  }

  &[character="jill"i] {
    --skin-color: 
      radial-gradient(20% 50% at 0 0, #000 99%, #0000 ),
      #e8e8e8;
    bottom: -2%;

    .body {
      .chest {
        width: 90%;
      }

      .arm {
        left: calc(100% - 1.6em);    

        & ~ & {
          left: 0.5em;
          top: 2.75em;
        }
      }
    }

    .head {
      .face {
        .ear {
          top: 51%;
        }

        .eyebrow {
          height: 4%;
        }

        .hair {
          width: 119%;
          height: 30%;
          top: -0.4em;
          left: 50%;
          transform: translate(-50%);
          border-radius: 3em 4em 0 0;
          background:
            radial-gradient(70% 100% at 0 0, #000 99%, #0000 ),
            radial-gradient(40% 100% at 100% 0, #000 99%, #0000 );
        }
      }

      .hair-back {
        left: 50%;
        top: -5%;
        transform: translate(-55%, 0);
        width: 120%;
        height: 115%;
        background: 
          radial-gradient(20% 114% at 0 0, #0000 calc(100% - 1px), #000) 0 100% / 52% 80%,
          radial-gradient(20% 115% at 100% 0, #0000 calc(100% - 1px), #000) 100% 100% / 52% 80%
          #f000;
        border-radius: 100% / 18%;
        background-repeat: no-repeat;

      }
    }
  }
}

css-prop {
  &[type~="counter"] {
    background:
      repeating-linear-gradient(45deg, #0000 0 0.25em, #000 0 0.375em) 0 0 / 100% 1.25em repeat-x,
      #fff;
    border: 0.3em solid;
    border-bottom: 0;
    bottom: 0;
    height: 8%;
    width: 40%;

    &[type~="high"] {
      height: 12%;
    }

    &::after {
      width: 106%;
      height: 1.25em;
      border: 0.3em solid;
      left: 50%;
      background: #fff;
      content: "";
      translate: -50% -50%;
    }

    &[type~="desk"] {
      background: #0000;
      border: 0;

      &::before {
        content: "";
        width: 3em;
        height: 100%;
        border: 0.3em solid;
        border-bottom: 0;
        left: 35%;
        background: repeating-linear-gradient(45deg, #fff0 0 0.25em, #000 0 0.375em, #fff0 0) 0 0 / 100% 1.2em repeat-x, repeating-linear-gradient(45deg, #fff0 0 0.25em, #000 0 0.375em, #fff0 0) 0 0 / 34% 0.6em repeat-y, #fff;
      }
    }
  }

  &[type~="laptop"] {
    width: 12em;
    height: 1.2em;
    border: 0.3em solid;
    background: repeating-linear-gradient(45deg, #fff0 0 0.25em, #000 0 0.375em, #fff0 0) 100% 0 / 40% 0.6em repeat-y, silver;
    translate: 0 calc(-100% - 0.5em);

    &::before{
      content: "";
      width: 63%;
      height: 1050%;
      border: 0.3em solid;
      translate: 0 -100%;
      left: -0.3em;
      top: -0.3em;
      border-bottom: 0;
      transform-origin: 50% 100%;
      transform: skew(10deg);
      background: radial-gradient(circle, #fff8 1em, #0000 0), repeating-linear-gradient(45deg, #fff0 0 0.25em, #000 0 0.375em, #fff0 0) 100% 0 / 0.3em 0.5em repeat-y, silver;
    }
  }
  
  &[type="chair"] {
    width: 11em;
    height: 16em;
    border-radius: 100% 60% 60% 50%;
    border: 0.3em solid;
    box-shadow: inset -0.15em 0 0 1.2em #ccc, inset -0.15em 0 0 1.5em;
    background:
      repeating-linear-gradient(45deg, #0000 0 2px, #0003 0 4px),
      repeating-linear-gradient(-45deg, #0000 0 2px, #0003 0 4px);
    transform-origin: 45% 100%;
  }
}