Input Template

[nobr]
   [div=display: none;]
      ui assets by cup nooble (https://cupnooble.itch.io/) with modifications
      please keep above credit i don't care about my own
      [font='Jersey 15']@fluticasone[/font]
      [font='Nunito']@fluticasone[/font]
      [font='PT Mono']@fluticasone[/font]
   [/div]
   [div=display: flex; /* main variables */
   --tFont: 'Jersey 15', monospace;
   --bfont: 'Nunito', sans-serif;
   --sfont: 'PT Mono', monospace;
   &Main Variables \ group&--bcolor: &Body Text Color \ text \ #212121&; /* body text color */
   --inner: &Inner Border Color \ text \ #f3f4e7&; /* inner border color */
   --mcolor: &Main Box Color \ text \ #bfd5e2&; /* main color of box */
   --shadow: &Shadow and Subtitle Color \ text \ #54b5e5&; /* shadow seen at the bottom + subtitle */
   --lborder: &Top Border and Name Color \ text \ #e33863&; /* top side border + name */
   --dborder: &Bottom Border Color \ text \ #a12253&; /* bottom side border */
   --aratio: &Aspect Ratio of Image (1, 3/4, 16/9, etc.) \ text \ 1&; /* aspect ratio of image */
   --icon: url(&URL of Image \ text \ https://i.imgur.com/eUpPVHu.jpeg&) center center/cover; /* image */
   --heartnumber: &Total Number of Hearts (must be whole) \ number \ 5&; /* total number of hearts */
   --filledhearts: &Number of Filled Hearts (can have decimal) \ text \ 2.5&;&end& /* number of filled hearts with decimals accepted*/
   flex-flow: row nowrap;
   align-items: flex-start;
   gap: 5px;
   position: relative;
   box-sizing: border-box;
   font-size: 0;
   margin: 1rem auto;
   width: clamp(250px,100% - 2rem,650px);
   height: auto;
   overflow: hidden; /* DO NOT TOUCH ANY VARIABLES PAST THIS POINT */
   --tcBorder: url(https://i.imgur.com/BONdqXn.gif) left top / 4px 4px no-repeat;
   --tcInner: url(https://i.imgur.com/40B4xZK.gif) left top / 4px 4px no-repeat;
   --tcColor: url(https://i.imgur.com/QzifRY2.gif) left top / 4px 4px no-repeat;
   --icon_mask: url(https://i.imgur.com/6gjxUkc.gif) left top / 4px 4px no-repeat;
   --tBorder: url(https://i.imgur.com/UF3iEsA.gif) left top / 4px 4px repeat-x;
   --tInner: url(https://i.imgur.com/1V92zJ3.gif) left top / 4px 4px repeat-x;
   --tColor: url(https://i.imgur.com/TqYdcZL.gif) left top / 4px 4px repeat-x;
   --vBorder: url(https://i.imgur.com/XHm31Pv.gif) left top / 4px 2px repeat-y;
   --vInner: url(https://i.imgur.com/gFEPyyj.gif) left top / 4px 2px repeat-y;
   --vColor: url(https://i.imgur.com/4DHwKzQ.gif) left top / 4px 2px repeat-y;
   --bcBorder: url(https://i.imgur.com/60PPtAo.gif) left top / 4px 6px no-repeat;
   --bcInner: url(https://i.imgur.com/NAiuiqS.gif) left top / 4px 6px no-repeat;
   --bcColor: url(https://i.imgur.com/UlpJcSL.gif) left top / 4px 6px no-repeat;
   --bcShadow: url(https://i.imgur.com/rk8zYNW.gif) left top / 4px 6px no-repeat;
   --bBorder: url(https://i.imgur.com/zLZK1eM.gif) left top / 6px 6px repeat-x;
   --bInner: url(https://i.imgur.com/xaOk8Tj.gif) left top / 6px 6px repeat-x;
   --bShadow: url(https://i.imgur.com/SUgivm7.gif) left top / 6px 6px repeat-x;
   --sdBorder: url(https://i.imgur.com/0cPAyoP.gif) left top / 10px 14px no-repeat;
   --slBorder: url(https://i.imgur.com/QPtPipL.gif) left top / 10px 14px no-repeat;
   --sInner: url(https://i.imgur.com/KoSJFDO.gif) left top / 10px 14px no-repeat;
   --sColor: url(https://i.imgur.com/cKin38I.gif) left top / 10px 14px no-repeat;
   --sShadow: url(https://i.imgur.com/E48sOAM.gif) left top / 10px 14px no-repeat;
   --eHeart: url(https://i.imgur.com/Fh7mDOr.gif) left top / 12px 12px repeat-x;
   --Heart: url(https://i.imgur.com/n9wQcqb.gif) left top / 12px 12px repeat-x;
   --dialborder: url(https://i.imgur.com/rl4kJWL.gif) left top / 8px 10px no-repeat;
   --diadborder: url(https://i.imgur.com/8xHHqMG.gif) left top / 8px 10px no-repeat;
   --diainner: url(https://i.imgur.com/N7HuEjd.gif) left top / 8px 10px no-repeat;
   --diacolor: url(https://i.imgur.com/mZyxh4K.gif) left top / 8px 10px no-repeat;
   --diashadow: url(https://i.imgur.com/vLs5XVw.gif) left top / 8px 10px no-repeat;
   --diacorner: url(https://i.imgur.com/rQ87mwz.gif) left top / 4px 2px repeat-y;]
      [div=flex: 0 10px;
      height: auto;]
         [div=display: block;
         position: relative;
         margin-top: 35px;
         height: 15px;
         width: 100%;]
            [div=position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            image-rendering: pixelated;
            mask: var(--sdBorder);
            background: var(--dborder);]
               select dark border
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            image-rendering: pixelated;
            mask: var(--slBorder);
            background: var(--lborder);]
               select light border
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            image-rendering: pixelated;
            mask: var(--sInner);
            background: var(--inner);]
               select inner
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            image-rendering: pixelated;
            mask: var(--sColor);
            background: var(--mcolor);]
               select main color
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            image-rendering: pixelated;
            mask: var(--sShadow);
            background: var(--shadow);]
               select shadow
            [/div]
         [/div]
      [/div]
      [div=flex: 1 85px;
      max-width: 250px;
      height: auto;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      align-items: flex-end;]
         [div=flex: 0 auto;
         position: relative;
         container-type: inline-size;
         width: 100%;
         height: auto;]
            [div=position: absolute;
            top: 0px;
            left: 0px;
            height: 4px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--tcBorder);
            background-color: var(--lborder);]
               top left border
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 0px;
            height: 4px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--tcInner);
            background: var(--inner);]
               top left inner
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 0px;
            height: 4px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--tcColor);
            background: var(--mcolor);]
               top left color
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 4px;
            height: 4px;
            width: calc(100% - 8px);
            image-rendering: pixelated;
            mask: var(--tBorder);
            background-color: var(--lborder);]
               top center border
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 4px;
            height: 4px;
            width: calc(100% - 8px);
            image-rendering: pixelated;
            mask: var(--tInner);
            background: var(--inner);]
               top center inner
            [/div]
            [div=position: absolute;
            top: 0px;
            right: 0px;
            height: 4px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--tcBorder);
            background-color: var(--lborder);]
               top right border
            [/div]
            [div=position: absolute;
            top: 0px;
            right: 0px;
            height: 4px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--tcInner);
            background: var(--inner);]
               top right inner
            [/div]
            [div=position: absolute;
            top: 0px;
            right: 0px;
            height: 4px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--tcColor);
            background: var(--mcolor);]
               top right color
            [/div]
            [div=position: absolute;
            top: 4px;
            left: 0px;
            height: calc(100% - 10px);
            width: 4px;
            image-rendering: pixelated;
            mask: var(--vBorder);
            background-color: var(--lborder);]
               left center border
            [/div]
            [div=position: absolute;
            top: 4px;
            left: 0px;
            height: calc(100% - 10px);
            width: 4px;
            image-rendering: pixelated;
            mask: var(--vInner);
            background: var(--inner);]
               left center Inner
            [/div]
            [div=position: absolute;
            top: 4px;
            right: 0px;
            height: calc(100% - 10px);
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--vBorder);
            background-color: var(--lborder);]
               right center border
            [/div]
            [div=position: absolute;
            top: 4px;
            right: 0px;
            height: calc(100% - 10px);
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--vInner);
            background: var(--inner);]
               right center inner
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 0px;
            height: 6px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--bcBorder);
            background-color: var(--dborder);]
               bottom right corner border
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 0px;
            height: 6px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--bcInner);
            background-color: var(--inner);]
               bottom right corner inner
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 0px;
            height: 6px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--bcColor);
            background-color: var(--mcolor);]
               bottom left corner color
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 0px;
            height: 6px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--bcShadow);
            background-color: var(--shadow);]
               bottom right corner shadow
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 0px;
            width: 4px;
            height: 6px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--bcBorder);
            background-color: var(--dborder);]
               bottom left corner border
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 0px;
            height: 6px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--bcInner);
            background-color: var(--inner);]
               bottom left corner inner
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 0px;
            height: 6px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--bcShadow);
            background-color: var(--shadow);]
               bottom left corner shadow
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 0px;
            height: 6px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--bcColor);
            background-color: var(--mcolor);]
               bottom left corner color
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 4px;
            width: calc(100% - 8px);
            height: 6px;
            image-rendering: pixelated;
            mask: var(--bBorder);
            background-color: var(--dborder);]
               bottom center border
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 4px;
            width: calc(100% - 8px);
            height: 6px;
            image-rendering: pixelated;
            mask: var(--bInner);
            background-color: var(--inner);]
               bottom center inner
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 4px;
            width: calc(100% - 8px);
            height: 6px;
            image-rendering: pixelated;
            mask: var(--bShadow);
            background-color: var(--shadow);]
               bottom center shadow
            [/div]
            [div=display: block;
            position: relative;
            z-index: 3;
            width: calc(100% - 6px);
            aspect-ratio: var(--aratio);
            background: var(--icon);
            margin: 3px auto;
            margin-bottom: 5px;
            clip-path: polygon(1px 0,calc(100% - 1px) 0,100% 1px,100% calc(100% - 1px),calc(100% - 1px) 100%,1px 100%,0 calc(100% - 1px), 0 1px);]
               main image
            [/div]
         [/div]
         [div=flex: 0 12px;
         margin-top: 8px;
         width: calc(12px * var(--heartnumber));
         position: relative;
         right: clamp(5px,5%,15px);
         background: var(--eHeart);
         image-rendering: pixelated;]
            [div=display: block;
            top: 0px;
            left: 0px;
            height: 12px;
            width: calc(12px * var(--filledhearts));
            background: var(--Heart);
            image-rendering: pixelated;]
            [/div]
         [/div]
         [div=flex: 0 auto;
         margin-top: 4px;
         font-family: var(--sfont);
         text-transform: uppercase;
         font-size: .55rem;
         padding: 0px clamp(7px,7%,15px);
         box-sizing: border-box;
         letter-spacing: .25em;
         line-height: 1;
         text-align: right;]
            &Under Icon \ group&
            &Tiny Text (use 'br' to create new lines) \ content&
         [/div]
         [div=flex: 0 auto;
         margin-top: 7px;
         text-transform: uppercase;
         padding: 0px clamp(7px,7%,15px);
         box-sizing: border-box;
         display: flex;
         flex-flow: row wrap;
         align-items: center;
         justify-content: space-evenly;
         gap: 2px;]
            tags / wrap each tag in the div
            &Tags \ group \ repeat&[div=flex: 0 auto;]@&Tag (include @) \ text \ @fluticasone&[/div]&end&&end&
         [/div]
      [/div]
      [div=flex: 4 150px;
      height: auto;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      align-items: flex-start;
      justify-coontent: flex-start;
      gap: clamp(15px,1cqw,100px);
      container-type: inline-size;
      padding: clamp(15px,1cqw,100px) 0px;]
         [div=flex: 0 auto;
         width: 100%;
         font-size: clamp(14px,10cqw,80px);
         text-transform: uppercase;
         font-family: var(--tFont);
         color: var(--lborder);
         padding: 0px calc(8px + .5em);
         box-sizing: inherit;
         line-height: .75;]
            &Main Content Area \ group&&Name \ text \ hatsune miku&
            [div=display: block;
            color: var(--shadow);
            font-size: 75%;
            box-sizing: inherit;]
               &Subtitle \ text \ idol senshi (18)&
            [/div]
         [/div]
         [div=flex: 0 auto;
         height: auto;
         display: block;
         width: 100%;
         position: relative;
         padding: 4px 4px 6px 4px;
         box-sizing: border-box;]
            [div=position: absolute;
            top: 0px;
            left: 4px;
            height: 4px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--tcBorder);
            background-color: var(--lborder);]
               top left border
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 4px;
            height: 4px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--tcInner);
            background: var(--inner);]
               top left inner
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 4px;
            height: 4px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--tcColor);
            background: var(--mcolor);]
               top left color
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 8px;
            height: 4px;
            width: calc(100% - 12px);
            image-rendering: pixelated;
            mask: var(--tBorder);
            background-color: var(--lborder);]
               top center border
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 8px;
            height: 4px;
            width: calc(100% - 12px);
            image-rendering: pixelated;
            mask: var(--tInner);
            background: var(--inner);]
               top center inner
            [/div]
            [div=position: absolute;
            top: 0px;
            left: 8px;
            height: 4px;
            width: calc(100% - 12px);
            image-rendering: pixelated;
            mask: var(--tColor);
            background: var(--mcolor);]
               top center color
            [/div]
            [div=position: absolute;
            top: 0px;
            right: 0px;
            height: 4px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--tcBorder);
            background-color: var(--lborder);]
               top right border
            [/div]
            [div=position: absolute;
            top: 0px;
            right: 0px;
            height: 4px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--tcInner);
            background: var(--inner);]
               top right inner
            [/div]
            [div=position: absolute;
            top: 0px;
            right: 0px;
            height: 4px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--tcColor);
            background: var(--mcolor);]
               top right color
            [/div]
            [div=position: absolute;
            top: 4px;
            right: 0px;
            height: calc(100% - 10px);
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--vBorder);
            background-color: var(--lborder);]
               right center border
            [/div]
            [div=position: absolute;
            top: 4px;
            right: 0px;
            height: calc(100% - 10px);
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--vInner);
            background: var(--inner);]
               right center inner
            [/div]
            [div=position: absolute;
            top: 4px;
            right: 0px;
            height: calc(100% - 10px);
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--vColor);
            background: var(--mcolor);]
               right center color
            [/div]
            [div=position: absolute;
            top: 4px;
            left: 4px;
            height: 20px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--vBorder);
            background-color: var(--lborder);]
               left center border
            [/div]
            [div=position: absolute;
            top: 4px;
            left: 4px;
            height: calc(100% - 10px);
            width: 4px;
            image-rendering: pixelated;
            mask: var(--vInner);
            background: var(--inner);]
               left center Inner
            [/div]
            [div=position: absolute;
            top: 4px;
            left: 4px;
            height: calc(100% - 10px);
            width: 4px;
            image-rendering: pixelated;
            mask: var(--vColor);
            background: var(--mcolor);]
               left center color
            [/div]
            [div=position: absolute;
            top: 24px;
            left: 0px;
            height: 10px;
            width: 8px;
            image-rendering: pixelated;
            mask: var(--dialborder);
            background-color: var(--lborder);]
               dialogue light border
            [/div]
            [div=position: absolute;
            top: 24px;
            left: 0px;
            height: 10px;
            width: 8px;
            image-rendering: pixelated;
            mask: var(--diadborder);
            background-color: var(--dborder);]
               dialogue dark border
            [/div]
            [div=position: absolute;
            top: 24px;
            left: 0px;
            height: 10px;
            width: 8px;
            image-rendering: pixelated;
            mask: var(--diainner);
            background-color: var(--inner);]
               dialogue inner
            [/div]
            [div=position: absolute;
            top: 24px;
            left: 0px;
            height: 10px;
            width: 8px;
            image-rendering: pixelated;
            mask: var(--diashadow);
            background-color: var(--shadow);]
               dialogue shadow
            [/div]
            [div=position: absolute;
            top: 24px;
            left: 0px;
            height: 10px;
            width: 8px;
            image-rendering: pixelated;
            mask: var(--diacolor);
            background-color: var(--mcolor);]
               dialogue color
            [/div]
            [div=position: absolute;
            top: 34px;
            left: 4px;
            height: calc(100% - 40px);
            width: 8px;
            image-rendering: pixelated;
            mask: var(--diacorner);
            background-color: var(--dborder);]
               dialogue lower border
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 0px;
            height: 6px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--bcBorder);
            background-color: var(--dborder);]
               bottom right corner border
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 0px;
            height: 6px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--bcInner);
            background-color: var(--inner);]
               bottom right corner inner
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 0px;
            height: 6px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--bcColor);
            background-color: var(--mcolor);]
               bottom right corner color
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 0px;
            height: 6px;
            width: 4px;
            image-rendering: pixelated;
            mask: var(--bcShadow);
            background-color: var(--shadow);]
               bottom right corner shadow
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 4px;
            width: 4px;
            height: 6px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--bcBorder);
            background-color: var(--dborder);]
               bottom left corner border
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 4px;
            height: 6px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--bcInner);
            background-color: var(--inner);]
               bottom left corner inner
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 4px;
            height: 6px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--bcColor);
            background-color: var(--mcolor);]
               bottom left corner color
            [/div]
            [div=position: absolute;
            bottom: 0px;
            left: 4px;
            height: 6px;
            width: 4px;
            transform: scaleX(-1);
            image-rendering: pixelated;
            mask: var(--bcShadow);
            background-color: var(--shadow);]
               bottom left corner shadow
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 4px;
            width: calc(100% - 12px);
            height: 6px;
            image-rendering: pixelated;
            mask: var(--bShadow);
            background-color: var(--shadow);]
               bottom center shadow
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 4px;
            width: calc(100% - 12px);
            height: 6px;
            image-rendering: pixelated;
            mask: var(--bBorder);
            background-color: var(--dborder);]
               bottom center border
            [/div]
            [div=position: absolute;
            bottom: 0px;
            right: 4px;
            width: calc(100% - 12px);
            height: 6px;
            image-rendering: pixelated;
            mask: var(--bInner);
            background-color: var(--inner);]
               bottom center inner
            [/div]
            [div=position: absolute;
            bottom: 5px;
            right: 4px;
            height: 1px;
            width: calc(100% - 12px);
            background-color: var(--mcolor);]
               bottom center color
            [/div]
            [div=display: block;
            width: 100%;
            height: auto;
            background: var(--mcolor);
            container-type: inline-size;
            box-sizing: border-box;
            padding: calc(6px + 8cqw);
            padding-bottom: calc(8px + 8cqw);
            overflow: hidden;]
               [div=display: block;
               box-sizing: border-box;
               position: relative;
               width: 100%;
               height: auto;
               container-type: inline-size;
               overflow: hidden;]
                  [div=display: block;
                  box-sizing: border-box;
                  width: calc(100cqw + 75px);
                  padding-right: 75px;
                  height: auto;
                  overflow-x: hidden;
                  overflow-y: auto;
                  font-size: .975rem;
                  font-family: var(--bfont);
                  color: var(--bcolor);
                  text-align: justify;
                  max-height: 400px;]
                     &Text Area (use 'br' or 'display: block' to make new lines) \ content&
                     &end&
                  [/div]
               [/div]
            [/div]
         [/div]
      [/div]
   [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n   [div=display: none;]\r\n      ui assets by cup nooble (https://cupnooble.itch.io/) with modifications\r\n      please keep above credit i don't care about my own\r\n      [font='Jersey 15']@fluticasone[/font]\r\n      [font='Nunito']@fluticasone[/font]\r\n      [font='PT Mono']@fluticasone[/font]\r\n   [/div]\r\n   [div=display: flex; /* main variables */\r\n   --tFont: 'Jersey 15', monospace;\r\n   --bfont: 'Nunito', sans-serif;\r\n   --sfont: 'PT Mono', monospace;\r\n   ",
  {
    "type": "group",
    "description": "Main Variables",
    "markerStart": {
      "type": "group",
      "description": "Main Variables",
      "original": "&Main Variables \\ group&",
      "repeat": false,
      "indices": [
        466,
        489
      ]
    },
    "repeat": false,
    "originalChildren": [
      "--bcolor: ",
      {
        "type": "text",
        "description": "Body Text Color",
        "marker": {
          "type": "text",
          "description": "Body Text Color",
          "defaultValue": "#212121",
          "original": "&Body Text Color \\ text \\ #212121&",
          "indices": [
            500,
            533
          ]
        },
        "value": "#212121"
      },
      "; /* body text color */\r\n   --inner: ",
      {
        "type": "text",
        "description": "Inner Border Color",
        "marker": {
          "type": "text",
          "description": "Inner Border Color",
          "defaultValue": "#f3f4e7",
          "original": "&Inner Border Color \\ text \\ #f3f4e7&",
          "indices": [
            571,
            607
          ]
        },
        "value": "#f3f4e7"
      },
      "; /* inner border color */\r\n   --mcolor: ",
      {
        "type": "text",
        "description": "Main Box Color",
        "marker": {
          "type": "text",
          "description": "Main Box Color",
          "defaultValue": "#bfd5e2",
          "original": "&Main Box Color \\ text \\ #bfd5e2&",
          "indices": [
            649,
            681
          ]
        },
        "value": "#bfd5e2"
      },
      "; /* main color of box */\r\n   --shadow: ",
      {
        "type": "text",
        "description": "Shadow and Subtitle Color",
        "marker": {
          "type": "text",
          "description": "Shadow and Subtitle Color",
          "defaultValue": "#54b5e5",
          "original": "&Shadow and Subtitle Color \\ text \\ #54b5e5&",
          "indices": [
            722,
            765
          ]
        },
        "value": "#54b5e5"
      },
      "; /* shadow seen at the bottom + subtitle */\r\n   --lborder: ",
      {
        "type": "text",
        "description": "Top Border and Name Color",
        "marker": {
          "type": "text",
          "description": "Top Border and Name Color",
          "defaultValue": "#e33863",
          "original": "&Top Border and Name Color \\ text \\ #e33863&",
          "indices": [
            826,
            869
          ]
        },
        "value": "#e33863"
      },
      "; /* top side border + name */\r\n   --dborder: ",
      {
        "type": "text",
        "description": "Bottom Border Color",
        "marker": {
          "type": "text",
          "description": "Bottom Border Color",
          "defaultValue": "#a12253",
          "original": "&Bottom Border Color \\ text \\ #a12253&",
          "indices": [
            916,
            953
          ]
        },
        "value": "#a12253"
      },
      "; /* bottom side border */\r\n   --aratio: ",
      {
        "type": "text",
        "description": "Aspect Ratio of Image (1, 3/4, 16/9, etc.)",
        "marker": {
          "type": "text",
          "description": "Aspect Ratio of Image (1, 3/4, 16/9, etc.)",
          "defaultValue": "1",
          "original": "&Aspect Ratio of Image (1, 3/4, 16/9, etc.) \\ text \\ 1&",
          "indices": [
            995,
            1049
          ]
        },
        "value": "1"
      },
      "; /* aspect ratio of image */\r\n   --icon: url(",
      {
        "type": "text",
        "description": "URL of Image",
        "marker": {
          "type": "text",
          "description": "URL of Image",
          "defaultValue": "https://i.imgur.com/eUpPVHu.jpeg",
          "original": "&URL of Image \\ text \\ https://i.imgur.com/eUpPVHu.jpeg&",
          "indices": [
            1096,
            1151
          ]
        },
        "value": "https://i.imgur.com/eUpPVHu.jpeg"
      },
      ") center center/cover; /* image */\r\n   --heartnumber: ",
      {
        "type": "number",
        "description": "Total Number of Hearts (must be whole)",
        "marker": {
          "type": "number",
          "description": "Total Number of Hearts (must be whole)",
          "defaultValue": 5,
          "min": null,
          "max": null,
          "original": "&Total Number of Hearts (must be whole) \\ number \\ 5&",
          "indices": [
            1206,
            1258
          ]
        },
        "value": 5
      },
      "; /* total number of hearts */\r\n   --filledhearts: ",
      {
        "type": "text",
        "description": "Number of Filled Hearts (can have decimal)",
        "marker": {
          "type": "text",
          "description": "Number of Filled Hearts (can have decimal)",
          "defaultValue": "2.5",
          "original": "&Number of Filled Hearts (can have decimal) \\ text \\ 2.5&",
          "indices": [
            1310,
            1366
          ]
        },
        "value": "2.5"
      },
      ";"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        1368,
        1372
      ]
    }
  },
  " /* number of filled hearts with decimals accepted*/\r\n   flex-flow: row nowrap;\r\n   align-items: flex-start;\r\n   gap: 5px;\r\n   position: relative;\r\n   box-sizing: border-box;\r\n   font-size: 0;\r\n   margin: 1rem auto;\r\n   width: clamp(250px,100% - 2rem,650px);\r\n   height: auto;\r\n   overflow: hidden; /* DO NOT TOUCH ANY VARIABLES PAST THIS POINT */\r\n   --tcBorder: url(https://i.imgur.com/BONdqXn.gif) left top / 4px 4px no-repeat;\r\n   --tcInner: url(https://i.imgur.com/40B4xZK.gif) left top / 4px 4px no-repeat;\r\n   --tcColor: url(https://i.imgur.com/QzifRY2.gif) left top / 4px 4px no-repeat;\r\n   --icon_mask: url(https://i.imgur.com/6gjxUkc.gif) left top / 4px 4px no-repeat;\r\n   --tBorder: url(https://i.imgur.com/UF3iEsA.gif) left top / 4px 4px repeat-x;\r\n   --tInner: url(https://i.imgur.com/1V92zJ3.gif) left top / 4px 4px repeat-x;\r\n   --tColor: url(https://i.imgur.com/TqYdcZL.gif) left top / 4px 4px repeat-x;\r\n   --vBorder: url(https://i.imgur.com/XHm31Pv.gif) left top / 4px 2px repeat-y;\r\n   --vInner: url(https://i.imgur.com/gFEPyyj.gif) left top / 4px 2px repeat-y;\r\n   --vColor: url(https://i.imgur.com/4DHwKzQ.gif) left top / 4px 2px repeat-y;\r\n   --bcBorder: url(https://i.imgur.com/60PPtAo.gif) left top / 4px 6px no-repeat;\r\n   --bcInner: url(https://i.imgur.com/NAiuiqS.gif) left top / 4px 6px no-repeat;\r\n   --bcColor: url(https://i.imgur.com/UlpJcSL.gif) left top / 4px 6px no-repeat;\r\n   --bcShadow: url(https://i.imgur.com/rk8zYNW.gif) left top / 4px 6px no-repeat;\r\n   --bBorder: url(https://i.imgur.com/zLZK1eM.gif) left top / 6px 6px repeat-x;\r\n   --bInner: url(https://i.imgur.com/xaOk8Tj.gif) left top / 6px 6px repeat-x;\r\n   --bShadow: url(https://i.imgur.com/SUgivm7.gif) left top / 6px 6px repeat-x;\r\n   --sdBorder: url(https://i.imgur.com/0cPAyoP.gif) left top / 10px 14px no-repeat;\r\n   --slBorder: url(https://i.imgur.com/QPtPipL.gif) left top / 10px 14px no-repeat;\r\n   --sInner: url(https://i.imgur.com/KoSJFDO.gif) left top / 10px 14px no-repeat;\r\n   --sColor: url(https://i.imgur.com/cKin38I.gif) left top / 10px 14px no-repeat;\r\n   --sShadow: url(https://i.imgur.com/E48sOAM.gif) left top / 10px 14px no-repeat;\r\n   --eHeart: url(https://i.imgur.com/Fh7mDOr.gif) left top / 12px 12px repeat-x;\r\n   --Heart: url(https://i.imgur.com/n9wQcqb.gif) left top / 12px 12px repeat-x;\r\n   --dialborder: url(https://i.imgur.com/rl4kJWL.gif) left top / 8px 10px no-repeat;\r\n   --diadborder: url(https://i.imgur.com/8xHHqMG.gif) left top / 8px 10px no-repeat;\r\n   --diainner: url(https://i.imgur.com/N7HuEjd.gif) left top / 8px 10px no-repeat;\r\n   --diacolor: url(https://i.imgur.com/mZyxh4K.gif) left top / 8px 10px no-repeat;\r\n   --diashadow: url(https://i.imgur.com/vLs5XVw.gif) left top / 8px 10px no-repeat;\r\n   --diacorner: url(https://i.imgur.com/rQ87mwz.gif) left top / 4px 2px repeat-y;]\r\n      [div=flex: 0 10px;\r\n      height: auto;]\r\n         [div=display: block;\r\n         position: relative;\r\n         margin-top: 35px;\r\n         height: 15px;\r\n         width: 100%;]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 0px;\r\n            height: 100%;\r\n            width: 100%;\r\n            image-rendering: pixelated;\r\n            mask: var(--sdBorder);\r\n            background: var(--dborder);]\r\n               select dark border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 0px;\r\n            height: 100%;\r\n            width: 100%;\r\n            image-rendering: pixelated;\r\n            mask: var(--slBorder);\r\n            background: var(--lborder);]\r\n               select light border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 0px;\r\n            height: 100%;\r\n            width: 100%;\r\n            image-rendering: pixelated;\r\n            mask: var(--sInner);\r\n            background: var(--inner);]\r\n               select inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 0px;\r\n            height: 100%;\r\n            width: 100%;\r\n            image-rendering: pixelated;\r\n            mask: var(--sColor);\r\n            background: var(--mcolor);]\r\n               select main color\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 0px;\r\n            height: 100%;\r\n            width: 100%;\r\n            image-rendering: pixelated;\r\n            mask: var(--sShadow);\r\n            background: var(--shadow);]\r\n               select shadow\r\n            [/div]\r\n         [/div]\r\n      [/div]\r\n      [div=flex: 1 85px;\r\n      max-width: 250px;\r\n      height: auto;\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      flex-flow: column nowrap;\r\n      align-items: flex-end;]\r\n         [div=flex: 0 auto;\r\n         position: relative;\r\n         container-type: inline-size;\r\n         width: 100%;\r\n         height: auto;]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 0px;\r\n            height: 4px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--tcBorder);\r\n            background-color: var(--lborder);]\r\n               top left border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 0px;\r\n            height: 4px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--tcInner);\r\n            background: var(--inner);]\r\n               top left inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 0px;\r\n            height: 4px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--tcColor);\r\n            background: var(--mcolor);]\r\n               top left color\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 4px;\r\n            height: 4px;\r\n            width: calc(100% - 8px);\r\n            image-rendering: pixelated;\r\n            mask: var(--tBorder);\r\n            background-color: var(--lborder);]\r\n               top center border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 4px;\r\n            height: 4px;\r\n            width: calc(100% - 8px);\r\n            image-rendering: pixelated;\r\n            mask: var(--tInner);\r\n            background: var(--inner);]\r\n               top center inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            right: 0px;\r\n            height: 4px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--tcBorder);\r\n            background-color: var(--lborder);]\r\n               top right border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            right: 0px;\r\n            height: 4px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--tcInner);\r\n            background: var(--inner);]\r\n               top right inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            right: 0px;\r\n            height: 4px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--tcColor);\r\n            background: var(--mcolor);]\r\n               top right color\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            left: 0px;\r\n            height: calc(100% - 10px);\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--vBorder);\r\n            background-color: var(--lborder);]\r\n               left center border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            left: 0px;\r\n            height: calc(100% - 10px);\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--vInner);\r\n            background: var(--inner);]\r\n               left center Inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            right: 0px;\r\n            height: calc(100% - 10px);\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--vBorder);\r\n            background-color: var(--lborder);]\r\n               right center border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            right: 0px;\r\n            height: calc(100% - 10px);\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--vInner);\r\n            background: var(--inner);]\r\n               right center inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bcBorder);\r\n            background-color: var(--dborder);]\r\n               bottom right corner border\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bcInner);\r\n            background-color: var(--inner);]\r\n               bottom right corner inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bcColor);\r\n            background-color: var(--mcolor);]\r\n               bottom left corner color\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bcShadow);\r\n            background-color: var(--shadow);]\r\n               bottom right corner shadow\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 0px;\r\n            width: 4px;\r\n            height: 6px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--bcBorder);\r\n            background-color: var(--dborder);]\r\n               bottom left corner border\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--bcInner);\r\n            background-color: var(--inner);]\r\n               bottom left corner inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--bcShadow);\r\n            background-color: var(--shadow);]\r\n               bottom left corner shadow\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--bcColor);\r\n            background-color: var(--mcolor);]\r\n               bottom left corner color\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 4px;\r\n            width: calc(100% - 8px);\r\n            height: 6px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bBorder);\r\n            background-color: var(--dborder);]\r\n               bottom center border\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 4px;\r\n            width: calc(100% - 8px);\r\n            height: 6px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bInner);\r\n            background-color: var(--inner);]\r\n               bottom center inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 4px;\r\n            width: calc(100% - 8px);\r\n            height: 6px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bShadow);\r\n            background-color: var(--shadow);]\r\n               bottom center shadow\r\n            [/div]\r\n            [div=display: block;\r\n            position: relative;\r\n            z-index: 3;\r\n            width: calc(100% - 6px);\r\n            aspect-ratio: var(--aratio);\r\n            background: var(--icon);\r\n            margin: 3px auto;\r\n            margin-bottom: 5px;\r\n            clip-path: polygon(1px 0,calc(100% - 1px) 0,100% 1px,100% calc(100% - 1px),calc(100% - 1px) 100%,1px 100%,0 calc(100% - 1px), 0 1px);]\r\n               main image\r\n            [/div]\r\n         [/div]\r\n         [div=flex: 0 12px;\r\n         margin-top: 8px;\r\n         width: calc(12px * var(--heartnumber));\r\n         position: relative;\r\n         right: clamp(5px,5%,15px);\r\n         background: var(--eHeart);\r\n         image-rendering: pixelated;]\r\n            [div=display: block;\r\n            top: 0px;\r\n            left: 0px;\r\n            height: 12px;\r\n            width: calc(12px * var(--filledhearts));\r\n            background: var(--Heart);\r\n            image-rendering: pixelated;]\r\n            [/div]\r\n         [/div]\r\n         [div=flex: 0 auto;\r\n         margin-top: 4px;\r\n         font-family: var(--sfont);\r\n         text-transform: uppercase;\r\n         font-size: .55rem;\r\n         padding: 0px clamp(7px,7%,15px);\r\n         box-sizing: border-box;\r\n         letter-spacing: .25em;\r\n         line-height: 1;\r\n         text-align: right;]\r\n            ",
  {
    "type": "group",
    "description": "Under Icon",
    "markerStart": {
      "type": "group",
      "description": "Under Icon",
      "original": "&Under Icon \\ group&",
      "repeat": false,
      "indices": [
        15349,
        15368
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n            ",
      {
        "type": "content",
        "description": "Tiny Text (use 'br' to create new lines)",
        "marker": {
          "type": "content",
          "description": "Tiny Text (use 'br' to create new lines)",
          "original": "&Tiny Text (use 'br' to create new lines) \\ content&",
          "indices": [
            15383,
            15434
          ]
        }
      },
      "\r\n         [/div]\r\n         [div=flex: 0 auto;\r\n         margin-top: 7px;\r\n         text-transform: uppercase;\r\n         padding: 0px clamp(7px,7%,15px);\r\n         box-sizing: border-box;\r\n         display: flex;\r\n         flex-flow: row wrap;\r\n         align-items: center;\r\n         justify-content: space-evenly;\r\n         gap: 2px;]\r\n            tags / wrap each tag in the div\r\n            ",
      {
        "type": "group",
        "description": "Tags",
        "markerStart": {
          "type": "group",
          "description": "Tags",
          "original": "&Tags \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            15830,
            15852
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 auto;]@",
          {
            "type": "text",
            "description": "Tag (include @)",
            "marker": {
              "type": "text",
              "description": "Tag (include @)",
              "defaultValue": "@fluticasone",
              "original": "&Tag (include @) \\ text \\ @fluticasone&",
              "indices": [
                15873,
                15911
              ]
            },
            "value": "@fluticasone"
          },
          "[/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            15918,
            15922
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        15923,
        15927
      ]
    }
  },
  "\r\n         [/div]\r\n      [/div]\r\n      [div=flex: 4 150px;\r\n      height: auto;\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      flex-flow: column nowrap;\r\n      align-items: flex-start;\r\n      justify-coontent: flex-start;\r\n      gap: clamp(15px,1cqw,100px);\r\n      container-type: inline-size;\r\n      padding: clamp(15px,1cqw,100px) 0px;]\r\n         [div=flex: 0 auto;\r\n         width: 100%;\r\n         font-size: clamp(14px,10cqw,80px);\r\n         text-transform: uppercase;\r\n         font-family: var(--tFont);\r\n         color: var(--lborder);\r\n         padding: 0px calc(8px + .5em);\r\n         box-sizing: inherit;\r\n         line-height: .75;]\r\n            ",
  {
    "type": "group",
    "description": "Main Content Area",
    "markerStart": {
      "type": "group",
      "description": "Main Content Area",
      "original": "&Main Content Area \\ group&",
      "repeat": false,
      "indices": [
        16598,
        16624
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "text",
        "description": "Name",
        "marker": {
          "type": "text",
          "description": "Name",
          "defaultValue": "hatsune miku",
          "original": "&Name \\ text \\ hatsune miku&",
          "indices": [
            16625,
            16652
          ]
        },
        "value": "hatsune miku"
      },
      "\r\n            [div=display: block;\r\n            color: var(--shadow);\r\n            font-size: 75%;\r\n            box-sizing: inherit;]\r\n               ",
      {
        "type": "text",
        "description": "Subtitle",
        "marker": {
          "type": "text",
          "description": "Subtitle",
          "defaultValue": "idol senshi (18)",
          "original": "&Subtitle \\ text \\ idol senshi (18)&",
          "indices": [
            16803,
            16838
          ]
        },
        "value": "idol senshi (18)"
      },
      "\r\n            [/div]\r\n         [/div]\r\n         [div=flex: 0 auto;\r\n         height: auto;\r\n         display: block;\r\n         width: 100%;\r\n         position: relative;\r\n         padding: 4px 4px 6px 4px;\r\n         box-sizing: border-box;]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 4px;\r\n            height: 4px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--tcBorder);\r\n            background-color: var(--lborder);]\r\n               top left border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 4px;\r\n            height: 4px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--tcInner);\r\n            background: var(--inner);]\r\n               top left inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 4px;\r\n            height: 4px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--tcColor);\r\n            background: var(--mcolor);]\r\n               top left color\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 8px;\r\n            height: 4px;\r\n            width: calc(100% - 12px);\r\n            image-rendering: pixelated;\r\n            mask: var(--tBorder);\r\n            background-color: var(--lborder);]\r\n               top center border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 8px;\r\n            height: 4px;\r\n            width: calc(100% - 12px);\r\n            image-rendering: pixelated;\r\n            mask: var(--tInner);\r\n            background: var(--inner);]\r\n               top center inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            left: 8px;\r\n            height: 4px;\r\n            width: calc(100% - 12px);\r\n            image-rendering: pixelated;\r\n            mask: var(--tColor);\r\n            background: var(--mcolor);]\r\n               top center color\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            right: 0px;\r\n            height: 4px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--tcBorder);\r\n            background-color: var(--lborder);]\r\n               top right border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            right: 0px;\r\n            height: 4px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--tcInner);\r\n            background: var(--inner);]\r\n               top right inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 0px;\r\n            right: 0px;\r\n            height: 4px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--tcColor);\r\n            background: var(--mcolor);]\r\n               top right color\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            right: 0px;\r\n            height: calc(100% - 10px);\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--vBorder);\r\n            background-color: var(--lborder);]\r\n               right center border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            right: 0px;\r\n            height: calc(100% - 10px);\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--vInner);\r\n            background: var(--inner);]\r\n               right center inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            right: 0px;\r\n            height: calc(100% - 10px);\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--vColor);\r\n            background: var(--mcolor);]\r\n               right center color\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            left: 4px;\r\n            height: 20px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--vBorder);\r\n            background-color: var(--lborder);]\r\n               left center border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            left: 4px;\r\n            height: calc(100% - 10px);\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--vInner);\r\n            background: var(--inner);]\r\n               left center Inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 4px;\r\n            left: 4px;\r\n            height: calc(100% - 10px);\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--vColor);\r\n            background: var(--mcolor);]\r\n               left center color\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 24px;\r\n            left: 0px;\r\n            height: 10px;\r\n            width: 8px;\r\n            image-rendering: pixelated;\r\n            mask: var(--dialborder);\r\n            background-color: var(--lborder);]\r\n               dialogue light border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 24px;\r\n            left: 0px;\r\n            height: 10px;\r\n            width: 8px;\r\n            image-rendering: pixelated;\r\n            mask: var(--diadborder);\r\n            background-color: var(--dborder);]\r\n               dialogue dark border\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 24px;\r\n            left: 0px;\r\n            height: 10px;\r\n            width: 8px;\r\n            image-rendering: pixelated;\r\n            mask: var(--diainner);\r\n            background-color: var(--inner);]\r\n               dialogue inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 24px;\r\n            left: 0px;\r\n            height: 10px;\r\n            width: 8px;\r\n            image-rendering: pixelated;\r\n            mask: var(--diashadow);\r\n            background-color: var(--shadow);]\r\n               dialogue shadow\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 24px;\r\n            left: 0px;\r\n            height: 10px;\r\n            width: 8px;\r\n            image-rendering: pixelated;\r\n            mask: var(--diacolor);\r\n            background-color: var(--mcolor);]\r\n               dialogue color\r\n            [/div]\r\n            [div=position: absolute;\r\n            top: 34px;\r\n            left: 4px;\r\n            height: calc(100% - 40px);\r\n            width: 8px;\r\n            image-rendering: pixelated;\r\n            mask: var(--diacorner);\r\n            background-color: var(--dborder);]\r\n               dialogue lower border\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bcBorder);\r\n            background-color: var(--dborder);]\r\n               bottom right corner border\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bcInner);\r\n            background-color: var(--inner);]\r\n               bottom right corner inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bcColor);\r\n            background-color: var(--mcolor);]\r\n               bottom right corner color\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 0px;\r\n            height: 6px;\r\n            width: 4px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bcShadow);\r\n            background-color: var(--shadow);]\r\n               bottom right corner shadow\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 4px;\r\n            width: 4px;\r\n            height: 6px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--bcBorder);\r\n            background-color: var(--dborder);]\r\n               bottom left corner border\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 4px;\r\n            height: 6px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--bcInner);\r\n            background-color: var(--inner);]\r\n               bottom left corner inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 4px;\r\n            height: 6px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--bcColor);\r\n            background-color: var(--mcolor);]\r\n               bottom left corner color\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            left: 4px;\r\n            height: 6px;\r\n            width: 4px;\r\n            transform: scaleX(-1);\r\n            image-rendering: pixelated;\r\n            mask: var(--bcShadow);\r\n            background-color: var(--shadow);]\r\n               bottom left corner shadow\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 4px;\r\n            width: calc(100% - 12px);\r\n            height: 6px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bShadow);\r\n            background-color: var(--shadow);]\r\n               bottom center shadow\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 4px;\r\n            width: calc(100% - 12px);\r\n            height: 6px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bBorder);\r\n            background-color: var(--dborder);]\r\n               bottom center border\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 0px;\r\n            right: 4px;\r\n            width: calc(100% - 12px);\r\n            height: 6px;\r\n            image-rendering: pixelated;\r\n            mask: var(--bInner);\r\n            background-color: var(--inner);]\r\n               bottom center inner\r\n            [/div]\r\n            [div=position: absolute;\r\n            bottom: 5px;\r\n            right: 4px;\r\n            height: 1px;\r\n            width: calc(100% - 12px);\r\n            background-color: var(--mcolor);]\r\n               bottom center color\r\n            [/div]\r\n            [div=display: block;\r\n            width: 100%;\r\n            height: auto;\r\n            background: var(--mcolor);\r\n            container-type: inline-size;\r\n            box-sizing: border-box;\r\n            padding: calc(6px + 8cqw);\r\n            padding-bottom: calc(8px + 8cqw);\r\n            overflow: hidden;]\r\n               [div=display: block;\r\n               box-sizing: border-box;\r\n               position: relative;\r\n               width: 100%;\r\n               height: auto;\r\n               container-type: inline-size;\r\n               overflow: hidden;]\r\n                  [div=display: block;\r\n                  box-sizing: border-box;\r\n                  width: calc(100cqw + 75px);\r\n                  padding-right: 75px;\r\n                  height: auto;\r\n                  overflow-x: hidden;\r\n                  overflow-y: auto;\r\n                  font-size: .975rem;\r\n                  font-family: var(--bfont);\r\n                  color: var(--bcolor);\r\n                  text-align: justify;\r\n                  max-height: 400px;]\r\n                     ",
      {
        "type": "content",
        "description": "Text Area (use 'br' or 'display: block' to make new lines)",
        "marker": {
          "type": "content",
          "description": "Text Area (use 'br' or 'display: block' to make new lines)",
          "original": "&Text Area (use 'br' or 'display: block' to make new lines) \\ content&",
          "indices": [
            29040,
            29109
          ]
        }
      },
      "\r\n                     "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        29133,
        29137
      ]
    }
  },
  "\r\n                  [/div]\r\n               [/div]\r\n            [/div]\r\n         [/div]\r\n      [/div]\r\n   [/div]\r\n[/nobr]"
]

[]

idolsenshi.template 1.1

By glucoseguardian

Main Variables

Body Text Color

Inner Border Color

Main Box Color

Shadow and Subtitle Color

Top Border and Name Color

Bottom Border Color

Aspect Ratio of Image (1, 3/4, 16/9, etc.)

URL of Image

Total Number of Hearts (must be whole)

Number of Filled Hearts (can have decimal)

Under Icon

Tiny Text (use 'br' to create new lines)

Main Content Area

Name

Subtitle

Text Area (use 'br' or 'display: block' to make new lines)

Output