Input Template

[nobr]
  [div=display: none;]
    [font=Hedvig Letters Sans]@fluticasone[/font]
    [font=Bungee]@fluticasone[/font]
    [font=Pixelify Sans]@fluticasone[/font]
  [/div]
  [div=&Initial Variables \ group&display: block;
  --color1: &Speech Bubble + Border Colors \ text \ #8289bf&;
  --color2: &Boxed Area BG Color \ text \ #fbdbde&;
  --color3: &Name on Front, certain accents \ text \ #eebac4&;
  --bgcolor: &Background Color \ text \ #f0f0f0&;
  --gradcolor1: &Gradient Color Outer \ text \ #d1d6ff&;
  --gradcolor2: &Gradient Color Inner \ text \ #eacde0&;
  --txtcolor: &Text Color \ text \ #565656&;
  &Front Images \ group&
  --img1: url(&Large 3x4 Image \ text \ https://i.imgur.com/lFeUn8N.jpeg&);
  --icon1: url(&Small 1x1 Icon (01) \ text \ https://i.imgur.com/7vYDrQj.jpeg&);
  --icon2: url(&Small 1x1 Icon (02) \ text \ https://i.imgur.com/lU9xpJq.jpeg&);
  --icon3: url(&Small 1x1 Icon (03) \ text \ https://i.imgur.com/5QMmgpg.jpeg&);
  --icon4: url(&Small 1x1 Icon (04) \ text \ https://i.imgur.com/icrdjMg.jpeg&);&end&&Content Images \ group&
  --basicimg: url(&Landscape Image \ text \ https://i.imgur.com/VwtwphH.jpeg&);
  --section1img: url(&Image @ About \ text \ https://i.imgur.com/EErvY5e.jpeg&);
  --section2img: url(&Image @ Timeline \ text \ https://i.imgur.com/fdGC2Dz.jpeg&);&end&
  &Relationship Bars \ group&--bar1color: &Bar 01 \ text \ seagreen&;
  --bar2color: &Bar 02 \ text \ tomato&;
  --bar3color: &Bar 03 \ text \ crimson&;&end&&end&
  --bodyfont: 'Hedvig Letters Sans', sans-serif;
  --titlefont: 'Bungee', sans-serif;
  --accentfont: 'Pixelify Sans', sans-serif;
  position: relative;
  isolation: isolate;
  container-type: size;
  box-sizing: border-box;
  width: clamp(300px,100% - 30px,600px);
  margin: 15px auto;
  margin-top: 15px;
  margin-bottom: 15px;
  aspect-ratio: 9/16;
  font-size: 0px;
  overflow: hidden;
  font-family: var(--bodyfont);
  box-shadow: -6px -6px 0px var(--color2),6px 6px 0px var(--color1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --bubblepos: 48%;
  --bdvar: 1px solid var(--color1);
  --bdrad: 10px;
  --exitbtn: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNpcmNsZS14Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Im0xNSA5LTYgNiIvPjxwYXRoIGQ9Im05IDkgNiA2Ii8+PC9zdmc+);
  --grid: url(https://i.imgur.com/0SOZgZ8.gif);
  --points: url(https://i.imgur.com/HxasS2U.gif);
  --blobs1: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU0MCA5NjAiIHdpZHRoPSI1NDAiIGhlaWdodD0iOTYwIj48cGF0aCBkPSJNNTQwIDM1MWMtNTMuNiAxLjctMTA3LjEgMy40LTEzMy42LTI4LjYtMjYuNC0zMi0yNS43LTk3LjctNTguNy0xMzAuMS0zMy4xLTMyLjQtOTkuOS0zMS41LTEzMi01OFMxODYuMyA1My45IDE4OSAwaDM1MXpNMCA2MDljNDUuMSA1LjEgOTAuMiAxMC4yIDEzNC4zIDI2LjcgNDQuMiAxNi41IDg3LjQgNDQuMyAxMDcuNSA4Mi41IDIwLjIgMzguMSAxNy4zIDg2LjUgMzEuNyAxMjguNSAxNC4zIDQyIDQ1LjkgNzcuNyA3Ny41IDExMy4zSDB6IiBzdHlsZT0iZmlsbDojMDAwIi8+PC9zdmc+); 
  --summicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWhlYXJ0Ij48cGF0aCBkPSJNMTkgMTRjMS40OS0xLjQ2IDMtMy4yMSAzLTUuNUE1LjUgNS41IDAgMCAwIDE2LjUgM2MtMS43NiAwLTMgLjUtNC41IDItMS41LTEuNS0yLjc0LTItNC41LTJBNS41IDUuNSAwIDAgMCAyIDguNWMwIDIuMyAxLjUgNC4wNSAzIDUuNWw3IDdaIi8+PC9zdmc+);
  --likesicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1lc3NhZ2Utc3F1YXJlLWhlYXJ0Ij48cGF0aCBkPSJNMjEgMTVhMiAyIDAgMCAxLTIgMkg3bC00IDRWNWEyIDIgMCAwIDEgMi0yaDE0YTIgMiAwIDAgMSAyIDJ6Ii8+PHBhdGggZD0iTTE0LjggNy41YTEuODQgMS44NCAwIDAgMC0yLjYgMGwtLjIuMy0uMy0uM2ExLjg0IDEuODQgMCAxIDAtMi40IDIuOEwxMiAxM2wyLjctMi43Yy45LS45LjgtMi4xLjEtMi44Ii8+PC9zdmc+);
  --dislikesicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1lc3NhZ2Utc3F1YXJlLXgiPjxwYXRoIGQ9Ik0yMSAxNWEyIDIgMCAwIDEtMiAySDdsLTQgNFY1YTIgMiAwIDAgMSAyLTJoMTRhMiAyIDAgMCAxIDIgMnoiLz48cGF0aCBkPSJtMTQuNSA3LjUtNSA1Ii8+PHBhdGggZD0ibTkuNSA3LjUgNSA1Ii8+PC9zdmc+);
  --relicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1lc3NhZ2Utc3F1YXJlLWRvdCI+PHBhdGggZD0iTTExLjcgM0g1YTIgMiAwIDAgMC0yIDJ2MTZsNC00aDEyYTIgMiAwIDAgMCAyLTJ2LTIuNyIvPjxjaXJjbGUgY3g9IjE4IiBjeT0iNiIgcj0iMyIvPjwvc3ZnPg==);
  --bellicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJlbGwiPjxwYXRoIGQ9Ik0xMC4yNjggMjFhMiAyIDAgMCAwIDMuNDY0IDAiLz48cGF0aCBkPSJNMy4yNjIgMTUuMzI2QTEgMSAwIDAgMCA0IDE3aDE2YTEgMSAwIDAgMCAuNzQtMS42NzNDMTkuNDEgMTMuOTU2IDE4IDEyLjQ5OSAxOCA4QTYgNiAwIDAgMCA2IDhjMCA0LjQ5OS0xLjQxMSA1Ljk1Ni0yLjczOCA3LjMyNiIvPjwvc3ZnPg==);
  --blob1: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDYwNiA1ODQiIHdpZHRoPSI2MDYiIGhlaWdodD0iNTg0Ij48cGF0aCBkPSJNNTgzIDk2LjhjNDQuNyA3Mi40IDE0LjcgMTkxLjctOC45IDI4Ny40UzUzMy4zIDU1MiA0ODguNiA1NzQuN3MtMTE2LjgtNC4xLTE2Ny44LTI1LjNjLTUwLjktMjEuMS04MC44LTM2LjYtMTI1LjMtNTkuM0MxNTEgNDY3LjUgOTEuOSA0MzcuNiA0OC43IDM2NC42cy03MC40LTE4OS4yLTI1LjktMjYxLjVDNjcuMyAzMC43IDE4My41IDIuMyAzMDEuMy43IDQxOS0uOSA1MzguMyAyNC41IDU4MyA5Ni44IiBzdHlsZT0iZmlsbDojMDAwIi8+PC9zdmc+);
  --blob2: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY4MCA3MDgiIHdpZHRoPSI2ODAiIGhlaWdodD0iNzA4Ij48cGF0aCBkPSJNNDQ3LjggMTQxLjNjOTIuMyAzNy4xIDIyNiA2NS4zIDIzMS43IDExMy43UzU2Mi45IDM3MS45IDQ5OS40IDQ2Ny42Yy02My40IDk1LjctNjcuOSAyMTguNS0xMTIuNSAyMzcuM1MyNTcuNyA2MzguNSAxOTQuMyA1NzljLTYzLjQtNTkuNC0xMDUuNi05My4yLTEyNi44LTEzNi4xcy0yMS41LTk1LTM3LjgtMTc1LjRDMTMuNCAxODctMTguOSA3OC4yIDE1LjggMzFjMzQuNi00Ny4yIDEzNi4xLTMyLjkgMjEyLjQtMi43IDc2LjMgMzAuMSAxMjcuMyA3NiAyMTkuNiAxMTMiIHN0eWxlPSJmaWxsOiMwMDAiLz48L3N2Zz4=);
  --blob3: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDczMiA2ODgiIHdpZHRoPSI3MzIiIGhlaWdodD0iNjg4Ij48cGF0aCBkPSJNNTEwLjQgMTY0LjVjNjIgNDIuOSAxNDkuOSA2NC4xIDE5MS44IDEyMC4zIDQxLjggNTYuMSAzNy41IDE0Ny4yLTIuOCAyMTcuOC00MC40IDcwLjYtMTE2LjcgMTIwLjctMjAxLjEgMTUzLjVzLTE3Ni45IDQ4LjEtMjMxLjIgNy4zYy01NC40LTQwLjktNzAuNi0xMzcuOS0xMjAtMjE4LjJDOTcuOCAzNjQuOCAxNS4zIDMwMS4xIDIuMyAyMjcuOGMtMTMtNzMuMiA0My40LTE1NS45IDExNy4zLTE5Ni43IDczLjgtNDAuOCAxNjUuMS0zOS43IDIyOC44LTYuOSA2My44IDMyLjkgOTkuOSA5Ny40IDE2MiAxNDAuMyIgc3R5bGU9ImZpbGw6IzAwMCIvPjwvc3ZnPg==);
  --blob4: url(data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20626%20690%22%20width%3D%22626%22%20height%3D%22690%22%3E%3Cpath%20d%3D%22M480.6%20108.3c24.4%2060.9%2019.3%20126%2023.2%20172.6s16.9%2074.8%2045%20119.2c28.2%2044.4%2071.6%20105%2076.2%20166.4%204.6%2061.3-29.7%20123.3-82.2%20123s-123.4-63-185-78.9c-61.7-15.9-114.2%2015.1-146.2%203.6-32.1-11.5-43.7-65.5-84.1-110.9C87.1%20457.8%2017.8%20420.8%203.6%20375.6c-14.3-45.3%2026.3-98.8%2072.7-134%2046.3-35.2%2098.3-52.2%20144.6-100.4C267.3%2092.9%20307.9%2013.4%20355.2%202c47.2-11.4%20101.1%2045.3%20125.4%20106.3%22%20style%3D%22fill%3A%23000%22%2F%3E%3C%2Fsvg%3E);
  --titlefx: drop-shadow(-2px 0px 0px var(--color2)) drop-shadow(2px 0px 0px var(--color1));
  --secvert: 5cqh;
  --sechor: 7cqw;
  --sectionpadd: var(--secvert) var(--sechor);
  --isize: 2.25;
  border-radius: var(--bdrad);
  border: var(--bdvar);
  background-color: var(--bgcolor);
  background-image: var(--grid),linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
  background-repeat: repeat,no-repeat;
  background-position: center center,center center;
  background-blend-mode: soft-light;]
    [div=display: block;
    transform: rotateZ(90deg) translateY(-100cqw);
    transform-origin: top left; 
    height: calc(100cqw + 2px);
    width: calc(100cqh + 2px);
    visibility: hidden;
    position: relative;]
      [div=display: flex;
      flex-flow: column-reverse nowrap;
      height: 100%;
      width: 100%;
      margin-left: -1px;]
        [accordion=100%]
          {slide=[nobr]
            [div=display: block;
            height: 100cqw;
            width: 100cqh;
            visibility: visible;
            position: relative;
            font-size: 0px;
            z-index: 2;
            font-weight: normal;
            font-variant: normal;
            margin: -6px;]
              [div=position: relative;
              z-index: 2;
              height: calc(100cqh + 1px);
              width: 100cqw;
              transform: rotateZ(-90deg) translateX(-100%);
              transform-origin: top left;
              box-sizing: border-box;
              display: block;
              gap: 15px;
              padding: 15cqw 10cqw;]
                [div=position: absolute; /* blob */
                top: 0px;
                left: 0px;
                height: 100%;
                width: 100%;
                background: linear-gradient(90deg, var(--gradcolor1) 0%, var(--gradcolor2) 50%, var(--gradcolor1) 100%);
                mask: var(--blobs1) no-repeat center center/112% auto;]
                  .
                [/div]
                [div=position: absolute; /* role or title */
                bottom: 2.5cqh;
                right: 8cqw;
                font-size: 2.25rem;
                color: var(--color3);
                font-family: var(--titlefont);
                text-wrap: balance;
                width: 30cqw;
                line-height: 1;
                text-align: right;]
                  &Front Area \ group&&Role or Alias \ text \ nemain&
                [/div]
                [div=position: absolute; /* app name */
                left: 1.25rem;
                top: 1rem;
                font-family: var(--accentfont);
                font-size: .85rem;
                text-transform: uppercase;
                color: var(--color1);]
                  &App Name \ text \ love eater&
                [/div]
                [div=display: block; /* image */
                margin-bottom: 15px;
                width: 100%;
                top: 0px;
                left: 0px;
                position: relative;
                border-radius: var(--bdrad);
                overflow: hidden;
                box-sizing: border-box;
                padding: 10%;]
                  [div=position: absolute;
                  top: 0px;
                  left: 0px;
                  height: 100%;
                  width: 100%;
                  background: var(--points) repeat center center/auto;
                  opacity: .25;]
                    .
                  [/div]
                  [div=display: block;
                  height: 100%;
                  width: 100%;
                  aspect-ratio: 3/4;
                  position: relative;
                  z-index: 5;
                  border-radius: var(--bdrad);
                  overflow: hidden;
                  background-color: var(--color1);
                  background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%),var(--img1);
                  background-blend-mode: soft-light,normal;
                  background-repeat: no-repeat,no-repeat;
                  background-position: center center,center center;
                  background-size: cover,cover;
                  border: 2px solid var(--color1);]
                    .
                  [/div]
                [/div]
                [div=display: flex; /* icons */
                flex-flow: row nowrap;
                justify-content: space-between;
                gap: 5px;
                width: 100%;
                top: 0px;
                left: 0px;
                position: relative;
                border-radius: var(--bdrad);
                overflow: hidden;
                box-sizing: border-box;
                padding: 5% 10%;]
                  [div=position: absolute;
                  top: 0px;
                  left: 0px;
                  height: 100%;
                  width: 100%;
                  background: var(--points) repeat center center/auto;
                  opacity: .25;]
                    .
                  [/div]
                  [div=flex: 1 0 0;
                  aspect-ratio: 1;
                  position: relative;
                  z-index: 4;
                  border-radius: var(--bdrad);
                  overflow: hidden;
                  background-color: var(--color1);
                  background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.5) 100%),var(--icon1);
                  background-blend-mode: soft-light,normal;
                  background-repeat: no-repeat,no-repeat;
                  background-position: center center,center center;
                  background-size: cover,cover;
                  border: var(--bdvar);]
                    .
                  [/div]
                  [div=flex: 1 0 0;
                  aspect-ratio: 1;
                  position: relative;
                  z-index: 4;
                  border-radius: var(--bdrad);
                  overflow: hidden;
                  background-color: var(--color1);
                  background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.5) 100%),var(--icon2);
                  background-blend-mode: soft-light,normal;
                  background-repeat: no-repeat,no-repeat;
                  background-position: center center,center center;
                  background-size: cover,cover;
                  border: var(--bdvar);]
                    .
                  [/div]
                  [div=flex: 1 0 0;
                  aspect-ratio: 1;
                  position: relative;
                  z-index: 4;
                  border-radius: var(--bdrad);
                  overflow: hidden;
                  background-color: var(--color1);
                  background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.5) 100%),var(--icon3);
                  background-blend-mode: soft-light,normal;
                  background-repeat: no-repeat,no-repeat;
                  background-position: center center,center center;
                  background-size: cover,cover;
                  border: var(--bdvar);]
                    .
                  [/div]
                  [div=flex: 1 0 0;
                  aspect-ratio: 1;
                  position: relative;
                  z-index: 4;
                  border-radius: var(--bdrad);
                  overflow: hidden;
                  background-color: var(--color1);
                  background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.5) 100%),var(--icon4);
                  background-blend-mode: soft-light,normal;
                  background-repeat: no-repeat,no-repeat;
                  background-position: center center,center center;
                  background-size: cover,cover;
                  border: var(--bdvar);]
                    .
                  [/div]
                [/div]
                [div=position: absolute; /* text bubble */
                display: block;
                width: clamp(100px,45%,300px);
                z-index: 5;
                top: var(--bubblepos);
                right: 8%;
                filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.15));
                color: var(--bgcolor);]
                  [div=display: block;
                  border-radius: 50%;
                  z-index: 2;
                  aspect-ratio: 1;
                  width: 13px;
                  background: var(--color1);
                  margin-bottom: 3px;]
                    .
                  [/div]
                  [div=display: block;
                  border-radius: 50%;
                  z-index: 2;
                  margin-left: 13px;
                  margin-bottom: -10px;
                  aspect-ratio: 1;
                  width: 20px;
                  background: var(--color1);]
                    .
                  [/div]
                  [div=display: block;
                  border-radius: var(--bdrad);
                  font-size: 1.15rem;
                  background: var(--color1);
                  overflow: hidden;
                  line-height: 1;
                  box-sizing: border-box;
                  padding: 15px 25px;]
                    &Status Message \ text&&end&
                  [/div]
                [/div]
                [div=position: absolute; /* btn */
                top: 0px;
                left: 0px;
                border-radius: var(--bdrad);
                top: .5rem;
                left: -4.5rem;
                font-size: 0px;
                width: 4rem;
                background: var(--color1);
                aspect-ratio: 1;
                mask: var(--exitbtn) no-repeat center center/50% auto;]
                  .
                [/div]
              [/div]
            [/div]
          [/nobr]}[nobr]
            [div=display: block;
            width: 100cqh;
            height: calc(100cqw + 1px);
            box-sizing: border-box;
            font-size: .95rem;
            margin: -6px;
            position: relative;
            visibility: visible;
            font-size: 0px;
            color: var(--txtcolor);
            z-index: 1;]
              [div=display: block;
              overflow: hidden;
              height: calc(100cqh + 1px);
              width: 100cqw;
              transform: rotateZ(-90deg) translateX(-100%);
              transform-origin: top left;]
                [div=display: block;
                box-sizing: border-box;
                height: 100%;
                width: calc(100% + 35px);
                padding-right: 35px;
                overflow-x: visible;
                overflow-y: scroll;
                scrollbar-gutter: none;
                scrollbar-width: none;]
                  [div=display: block;
                  overflow: hidden;
                  position: relative;
                  z-index: 1;
                  width: 100cqw;]
                    [div=display: block; /* image section */
                    position: relative;
                    z-index: 1;
                    width: 100%;
                    height: 33cqh;
                    background: var(--basicimg) no-repeat center center/cover;]
                      .
                    [/div]
                    [div=display: flex; /* intro section */
                    position: relative;
                    flex-flow: row nowrap;
                    align-items: stretch;
                    width: 100%;
                    box-sizing: border-box;
                    padding: var(--sectionpadd);
                    gap: 1.5rem;]
                      [div=position: absolute;
                      z-index: 0;
                      top: -50cqw;
                      left: -50cqw;
                      background: radial-gradient(circle at 75% 63%, var(--gradcolor2) 0%, var(--gradcolor1) 60%);
                      mask: var(--blob1) no-repeat top left/contain;
                      width: 100cqw;
                      aspect-ratio: 606/584;]
                        .
                      [/div]
                      [div=flex: 1 0 35px;
                      max-width: 3rem;
                      position: relative;
                      z-index: 1;
                      display: flex;
                      flex-flow: column nowrap;
                      align-items: center;
                      gap: 1rem;]
                        [div=flex: 0 0 auto;
                        width: 100%;
                        aspect-ratio: 1;
                        filter: drop-shadow(2px 0px 0px var(--color1));]
                          [div=display: block;
                          width: 100%;
                          aspect-ratio: 1;
                          background: var(--bgcolor);
                          mask: var(--summicon) no-repeat center center/contain;]
                            .
                          [/div]
                        [/div]
                        [div=flex: 1 0 auto;
                        width: 1px;
                        background: var(--color1);]
                          border
                        [/div]
                      [/div]
                      [div=flex: 12 0 75px;
                      font-size: .95rem;
                      position: relative;
                      z-index: 1;]
                        [div=display: block; /* name area */
                        width: 100%;
                        text-wrap: balance;
                        font-size: clamp(16px,5cqh,2.65rem);
                        line-height: .95;
                        font-family: var(--titlefont);
                        color: var(--bgcolor);
                        filter: var(--titlefx);
                        margin-bottom: 1rem;
                        box-sizing: border-box;
                        padding: 0px 1rem;]
                          &Introduction \ group&&Character Name \ text & (&Age \ number \ 00&)
                        [/div]
                        [div=display: block; /* blurb area */
                        text-align: justify;
                        box-sizing: border-box;
                        padding-right: 1rem;
                        line-height: 1.25;
                        width: 100%;]
                          &Character Summary \ content&
                        [/div]
                      [/div]
                    [/div]
                    [div=display: block; /* boxed section */
                    position: relative;
                    width: 85%;
                    margin: auto;
                    background: var(--color2);
                    border: var(--bdvar);
                    border-radius: var(--bdrad);
                    text-wrap: pretty;
                    box-sizing: border-box;
                    padding: 1.85rem calc(2rem + 2%);
                    font-size: .95rem;
                    line-height: 1.2;
                    font-family: var(--accentfont);]
                      &Boxed Area (any purpose) \ content&&end&
                    [/div]
                    [div=display: block; /* txt section 01 */
                    width: 100%;
                    overflow: visible;
                    height: auto;
                    position: relative;
                    box-sizing: border-box;
                    padding: var(--sectionpadd);]
                      [div=position: absolute;
                      z-index: 0;
                      top: 2cqh;
                      left: 15cqw;
                      width: 120cqw;
                      aspect-ratio: 680/708;
                      background: radial-gradient(circle at 50% 50%, var(--gradcolor2) 0%, var(--gradcolor1) 100%);
                      mask: var(--blob2) no-repeat top left/contain;]
                        .
                      [/div]
                      [div=display: block; /* section name */
                      text-wrap: balance;
                      width: 100%;
                      position: relative;
                      z-index: 1;
                      text-wrap: balance;
                      box-sizing: border-box;
                      margin-top: 0cqh;]
                        [div=position: absolute;
                        z-index: 0;
                        top: 0px;
                        left: calc(-10cqw + -6px);
                        box-shadow: 6px 6px 0px var(--color1);
                        border-radius: 0px var(--bdrad) var(--bdrad) 0px;
                        border: var(--bdvar);
                        width: 35cqw;
                        height: 100%;
                        background-color: var(--color1);
                        background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%),var(--section1img);
                        background-blend-mode: soft-light,normal;
                        background-repeat: no-repeat,no-repeat;
                        background-position: center center,center center;
                        background-size: cover,cover;]
                          .
                        [/div]
                        [div=display: block;
                        position: relative;
                        z-index: 1;
                        text-align: right;
                        font-size: 5cqh;
                        line-height: .95;
                        font-family: var(--titlefont);
                        color: var(--bgcolor);
                        filter: var(--titlefx);
                        padding: 3rem 0px .75rem 0px;]
                          &Content Section \ group&&Section Title \ text \ about&
                        [/div]
                        [div=display: flex;
                        position: relative;
                        z-index: 1;
                        flex-flow: row wrap;
                        align-items: center;
                        justify-content: flex-end;
                        gap: 5px;
                        font-family: var(--accentfont);
                        font-size: .95rem;
                        box-sizing: border-box;
                        padding-bottom: 1rem;
                        margin-right: 0;
                        margin-left: auto;
                        width: clamp(225px,55cqw - 16px,500px);]
                          &Traits \ group \ repeat&[div=flex: 0 0 auto;
                          background: var(--color2);
                          border: var(--bdvar);
                          border-radius: 5px;
                          padding: 2px 5px;
                          box-sizing: border-box;]
                            &Trait \ text&
                          [/div]&end&
                        [/div]
                      [/div]
                      [div=display: block;
                      font-size: .95rem;
                      line-height: 1.25;
                      text-align: justify;
                      position: relative;
                      z-index: 1;
                      margin-top: 2rem;]
                        [div=display: block;]
                          &Content Section Body Text \ content&&end&
                        [/div]
                      [/div]
                    [/div]
                    [div=display: flex; /* likes section */
                    flex-flow: row wrap;
                    align-items: center;
                    gap: 15px;
                    position: relative;
                    width: 85%;
                    margin: auto;
                    background: var(--color2);
                    border: var(--bdvar);
                    border-radius: var(--bdrad);
                    text-wrap: pretty;
                    box-sizing: border-box;
                    padding: 1.85rem calc(2rem + 2%);
                    font-family: var(--accentfont);]
                      [div=flex: 4 0 20px;
                      font-size: .95rem;
                      line-height: 1.2;]
                        &Preferences \ group&&Likes Content \ content&
                      [/div]
                      [div=flex: 0 0 30px;
                      background: var(--color1);
                      mask: var(--likesicon) no-repeat center center/contain;
                      aspect-ratio: 1;]
                        .
                      [/div]
                    [/div]
                    [div=display: flex; /* dislikes section */
                    flex-flow: row wrap;
                    align-items: stretch;
                    gap: 15px;
                    position: relative;
                    width: 85%;
                    margin: auto;
                    background: var(--color2);
                    border: var(--bdvar);
                    border-radius: var(--bdrad);
                    text-wrap: pretty;
                    box-sizing: border-box;
                    padding: 1.85rem calc(2rem + 2%);
                    font-family: var(--accentfont);
                    margin-top: .5rem;]
                      [div=flex: 1 0 20px;
                      font-size: .95rem;
                      line-height: 1.2;]
                        &Disikes Content \ content&&end&
                      [/div]
                      [div=flex: 0 0 30px;
                      background: var(--color1);
                      mask: var(--dislikesicon) no-repeat center center/contain;
                      aspect-ratio: 1;]
                        .
                      [/div]
                    [/div]
                    [div=display: block; /* timeline section */
                    width: 100%;
                    height: auto;
                    position: relative;
                    z-index: 0;
                    box-sizing: border-box;
                    padding: var(--sectionpadd);]
                      [div=position: absolute;
                      z-index: 0;
                      top: 3cqh;
                      right: -40%;
                      height: 100cqh;
                      aspect-ratio: 680/708;
                      background: radial-gradient(circle at 50% 50%, var(--gradcolor2) 0%, var(--gradcolor1) 100%);
                      mask: var(--blob3) no-repeat top left/contain;]
                        .
                      [/div]
                      [div=display: block;
                      width: clamp(100px,25cqw,200px);
                      aspect-ratio: 1;
                      position: relative;
                      z-index: 1;
                      border-radius: var(--bdrad);
                      overflow: hidden;
                      background-color: var(--color1);
                      background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%),var(--section2img);
                      background-blend-mode: soft-light,normal;
                      background-repeat: no-repeat,no-repeat;
                      background-position: center center,center center;
                      background-size: cover,cover;
                      border: 2px solid var(--color1);
                      margin: 3cqh 0px -13% clamp(10px,5%,300px);]
                        .
                      [/div]
                      [div=display: block;
                      width: calc(90% - 20px);
                      margin: auto;
                      position: relative;
                      z-index: 1;
                      filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.15));
                      color: var(--bgcolor);
                      padding-left: clamp(50px,20cqw,300px);
                      box-sizing: border-box;]
                        [div=position: absolute; /* time stamp */
                        right: 15px;
                        top: 8px;
                        color: var(--txtcolor);
                        font-size: .75rem;
                        line-height: 1.2;
                        font-family: var(--accentfont);
                        text-align: right;
                        box-sizing: border-box;
                        width: calc(100% - 38px);]
                          &Timeline \ group&&Timestamp or Info \ text \ 12:03AM  13 DEC 2024&
                        [/div]
                        [div=display: block;
                        border-radius: 50%;
                        z-index: 2;
                        aspect-ratio: 1;
                        width: 13px;
                        background: var(--color1);
                        margin-bottom: 3px;]
                          .
                        [/div]
                        [div=display: block;
                        border-radius: 50%;
                        z-index: 2;
                        margin-left: 13px;
                        margin-bottom: -10px;
                        aspect-ratio: 1;
                        width: 20px;
                        background: var(--color1);]
                          .
                        [/div]
                        [div=display: block; /* status message */
                        border-radius: var(--bdrad);
                        font-size: 1.15rem;
                        background: var(--color1);
                        overflow: hidden;
                        line-height: 1;
                        box-sizing: border-box;
                        padding: 15px 25px;]
                          [div=display: -webkit-box;
                          line-clamp: 3;
                          -webkit-line-clamp: 3;-webkit-box-orient: vertical;  overflow: hidden;]
                            &Status Message \ text&
                          [/div]
                        [/div]
                      [/div]
                      [div=display: block; /* scroll area */
                      overflow-x: visible;
                      overflow-y: auto;
                      height: 45cqh;
                      position: relative;
                      z-index: 1;
                      margin: 2rem 0px 0px calc(10% - 30px);
                      width: calc(90% + 200px);
                      box-sizing: border-box;
                      padding-right: 200px;
                      container-type: inline-size;]
                        &Timeline Segment \ group \ repeat&[div=display: block; /* segment */
                        position: relative;
                        width: 100cqw;
                        box-sizing: border-box;
                        padding-left: 30px;]
                          [div=position: sticky;
                          width: calc(var(--isize) * 1rem);
                          top: 0px;
                          left: 0px;
                          margin: 1rem 0px 1rem calc((var(--isize) / 2) * -1rem);
                          border-radius: 50%;
                          box-sizing: border-box;
                          padding: 10px;
                          background: var(--color1);
                          aspect-ratio: 1;]
                            [div=display: block;
                            filter: drop-shadow(1px 0px 0px var(--color2));]
                              [div=display: block;
                              width: 100%;
                              aspect-ratio: 1;
                              background: var(--bgcolor);
                              mask: var(--summicon) no-repeat center center/contain;]
                                .
                              [/div]
                            [/div]
                          [/div]
                          [div=display: block;
                          border-left: var(--bdvar);
                          box-sizing: border-box;
                          padding: 0px 0px 1rem 30px;
                          font-size: .95rem;
                          line-height: 1.25;
                          margin-top: calc((var(--isize) * -1rem) + -2rem);
                          text-align: justify;]
                            &Segment Content \ content&
                          [/div]
                        [/div]&end&&end&
                      [/div]
                    [/div]
                    [div=display: block; /* relationships */
                    position: relative;
                    z-index: 0;
                    padding: 0px var(--sechor);]
                      [div=position: absolute;
                      z-index: 0;
                      top: 50%;
                      left: 50%;
                      transform: translateX(-50%);
                      background: radial-gradient(circle at 50% 50%, var(--gradcolor2) 0%, var(--gradcolor1) 100%);
                      mask: var(--blob4) no-repeat top left/contain;
                      height: 100cqh;
                      aspect-ratio: 626/690;]
                        .
                      [/div]
                      [div=display: flex;
                      position: relative;
                      z-index: 1;
                      flex-flow: row nowrap;
                      align-items: center;
                      justify-content: flex-start;
                      gap: 1rem;
                      margin-bottom: 3cqh;]
                        [div=flex: 1 0 35px;
                        max-width: 3rem;
                        position: relative;
                        z-index: 1;
                        aspect-ratio1;]
                          [div=display: block;
                          width: 100%;
                          aspect-ratio: 1;
                          background: var(--color3);
                          mask: var(--relicon) no-repeat center center/contain;]
                            .
                          [/div]
                        [/div]
                        [div=flex: 4 0 100px; /* inbox name */
                        font-size: 5cqh;
                        line-height: .95;
                        font-family: var(--titlefont);
                        color: var(--bgcolor);
                        filter: var(--titlefx);]
                          &Relationships Section \ group&&Section Title \ text \ inbox&
                        [/div]
                      [/div]
                      [div=display: flex;
                      position: relative;
                      z-index: 1;
                      flex-flow: column nowrap;
                      align-items: flex-end;
                      justify-content: flex-start;
                      gap: 5px;]
                        &Person \ group \ repeat&[div=flex: 0 0 auto; /* relationship div */
                        --bar1: &Relationship Bar 01 \ number \  \ 0 \ 100&%;
                        --bar2: &Relationship Bar 02 \ number \  \ 0 \ 100&%;
                        --bar3: &Relationship Bar 03 \ number \  \ 0 \ 100&%;
                        --imgrel: url(&Character Icon URL \ text \ https://i.imgur.com/skxzi7A.jpeg&);
                        width: 85%;
                        background: var(--color2);
                        border-radius: var(--bdrad);
                        border: var(--bdvar);
                        box-sizing: border-box;
                        padding: 1.85rem calc(2rem + 2%) 2rem calc(2rem + 2%);
                        position: relative;]
                          [div=display: block; visibility: hidden;]
                            [accordion=100%]
                              {slide=[div=font-weight: normal;
                                font-variant: normal; color: var(--txtcolor); font-family: var(--accentfont); font-size: .95rem; line-height: 1.2; visibility: visible; box-sizing: border-box; padding: 1rem 0px 0px 1.5rem;]&Short Quip About Character or Last Message Sent \ text&.[/div]}[nobr]
                                  [div=display: flex;
                                  flex-flow: row wrap;
                                  align-items: flex-start;
                                  gap: 1rem;
                                  visibility: visible;
                                  font-size: 0px;]
                                    [div=flex: 1 0 85px;
                                    box-sizing: border-box;
                                    padding-top: .5rem;]
                                      [div=display: block;
                                      overflow: hidden;
                                      background: var(--color3);
                                      height: .85rem;
                                      border-radius: var(--bdrad);
                                      margin-bottom: 2px;] 
                                        [div=display: block;
                                        height: 100%;
                                        background: var(--bar1color);
                                        border-radius: var(--bdrad);
                                        width: var(--bar1);]
                                          .
                                        [/div]
                                      [/div]
                                      [div=display: block;
                                      overflow: hidden;
                                      background: var(--color3);
                                      height: .85rem;
                                      border-radius: var(--bdrad);
                                      margin-bottom: 2px;] 
                                        [div=display: block;
                                        height: 100%;
                                        background: var(--bar2color);
                                        border-radius: var(--bdrad);
                                        width: var(--bar2);]
                                          .
                                        [/div]
                                      [/div]
                                      [div=display: block;
                                      overflow: hidden;
                                      background: var(--color3);
                                      height: .85rem;
                                      border-radius: var(--bdrad);
                                      margin-bottom: 2px;] 
                                        [div=display: block;
                                        height: 100%;
                                        background: var(--bar3color);
                                        border-radius: var(--bdrad);
                                        width: var(--bar3);]
                                          .
                                        [/div]
                                      [/div]
                                    [/div]
                                    [div=flex: 4 0 150px;
                                    font-size: .95rem;
                                    text-align: justify;
                                    line-height: 1.25;]
                                      &Additional Context \ content&
                                    [/div]
                                  [/div]
                                [/nobr]{/slide}
                            [/accordion]
                          [/div]
                          [div=position: absolute;
                          z-index: 1;
                          top: 1.25rem;
                          right: calc(100% - 3rem);
                          width: clamp(85px,15cqw,200px);
                          aspect-ratio: 1;
                          background-color: var(--color1);
                          background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%),var(--imgrel);
                          background-blend-mode: soft-light,normal;
                          background-repeat: no-repeat,no-repeat;
                          background-position: center center,center center;
                          background-size: cover,cover;
                          border-radius: var(--bdrad);
                          border: 2px solid var(--color1);
                          box-sizing: border-box;]
                            .
                          [/div]
                          [div=position: absolute;
                          width: 80%;
                          z-index: 1;
                          filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.15));
                          bottom: calc(100% - 3.5rem);]
                            [div=display: inline-block; /* status message */
                            max-width: 80%;
                            border-radius: var(--bdrad);
                            font-size: 1.15rem;
                            background: var(--color1);
                            overflow: hidden;
                            line-height: 1;
                            box-sizing: border-box;
                            padding: 15px 25px;
                            color: var(--bgcolor);
                            white-space: nowrap;
                            text-overflow: ellipsis;]
                              [div=display: inline; color: var(--color3); margin-right: .6rem; ][fa]&FA Icon That Describes their Relationship \ text \ fa-sparkles&[/fa][/div]&end
                            [/div]
                            [div=display: block;
                            border-radius: 50%;
                            z-index: 2;
                            margin-left: 13px;
                            margin-top: -10px;
                            aspect-ratio: 1;
                            width: 20px;
                            background: var(--color1);]
                              .
                            [/div]
                            [div=display: block;
                            border-radius: 50%;
                            z-index: 2;
                            aspect-ratio: 1;
                            width: 13px;
                            background: var(--color1);
                            margin-bottom: 3px;]
                              .
                            [/div]
                          [/div]
                        [/div]&end&&end&
                      [/div]
                    [/div]
                    [div=display: flex; /* notifications */
                    flex-flow: column nowrap;
                    align-items: stretch;
                    justify-content: flex-start;
                    padding: var(--sectionpadd);
                    gap: 5px;
                    position: relative;
                    z-index: 1;
                    font-size: .95rem;]
                      [div=flex; 0 0 auto;
                      font-family: var(--accentfont);
                      margin-right: 20px;
                      text-transform: uppercase;
                      text-align: right;
                      font-size: .95em;]
                        &Extra Information \ group&&Section Title \ text \ notifications&
                      [/div]
                      &Info Listing \ group \ repeat&[div=flex: 0 0 auto;
                      padding: 1.85rem calc(2rem + 2%);
                      border-radius: var(--bdrad);
                      overflow: hidden;
                      position: relative;
                      z-index: 0;]
                        [div=position: absolute;
                        z-index: 0;
                        top: 0px;
                        left: 0px;
                        height: 100%;
                        width: 100%;
                        background: var(--points) repeat center center/auto;
                        opacity: .25;]
                          .
                        [/div]
                        [div=display: block;
                        position: relative;
                        z-index: 1;]
                          &Information goes here \ content&
                        [/div]
                      [/div]&end&&end&
                    [/div]
                  [/div]
                [/div]
              [/div]
            [/div]
          [/nobr]{/slide}
        [/accordion]
      [/div]
    [/div]
  [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;]\r\n    [font=Hedvig Letters Sans]@fluticasone[/font]\r\n    [font=Bungee]@fluticasone[/font]\r\n    [font=Pixelify Sans]@fluticasone[/font]\r\n  [/div]\r\n  [div=",
  {
    "type": "group",
    "description": "Initial Variables",
    "markerStart": {
      "type": "group",
      "description": "Initial Variables",
      "original": "&Initial Variables \\ group&",
      "repeat": false,
      "indices": [
        183,
        209
      ]
    },
    "repeat": false,
    "originalChildren": [
      "display: block;\r\n  --color1: ",
      {
        "type": "text",
        "description": "Speech Bubble + Border Colors",
        "marker": {
          "type": "text",
          "description": "Speech Bubble + Border Colors",
          "defaultValue": "#8289bf",
          "original": "&Speech Bubble + Border Colors \\ text \\ #8289bf&",
          "indices": [
            239,
            286
          ]
        },
        "value": "#8289bf"
      },
      ";\r\n  --color2: ",
      {
        "type": "text",
        "description": "Boxed Area BG Color",
        "marker": {
          "type": "text",
          "description": "Boxed Area BG Color",
          "defaultValue": "#fbdbde",
          "original": "&Boxed Area BG Color \\ text \\ #fbdbde&",
          "indices": [
            302,
            339
          ]
        },
        "value": "#fbdbde"
      },
      ";\r\n  --color3: ",
      {
        "type": "text",
        "description": "Name on Front, certain accents",
        "marker": {
          "type": "text",
          "description": "Name on Front, certain accents",
          "defaultValue": "#eebac4",
          "original": "&Name on Front, certain accents \\ text \\ #eebac4&",
          "indices": [
            355,
            403
          ]
        },
        "value": "#eebac4"
      },
      ";\r\n  --bgcolor: ",
      {
        "type": "text",
        "description": "Background Color",
        "marker": {
          "type": "text",
          "description": "Background Color",
          "defaultValue": "#f0f0f0",
          "original": "&Background Color \\ text \\ #f0f0f0&",
          "indices": [
            420,
            454
          ]
        },
        "value": "#f0f0f0"
      },
      ";\r\n  --gradcolor1: ",
      {
        "type": "text",
        "description": "Gradient Color Outer",
        "marker": {
          "type": "text",
          "description": "Gradient Color Outer",
          "defaultValue": "#d1d6ff",
          "original": "&Gradient Color Outer \\ text \\ #d1d6ff&",
          "indices": [
            474,
            512
          ]
        },
        "value": "#d1d6ff"
      },
      ";\r\n  --gradcolor2: ",
      {
        "type": "text",
        "description": "Gradient Color Inner",
        "marker": {
          "type": "text",
          "description": "Gradient Color Inner",
          "defaultValue": "#eacde0",
          "original": "&Gradient Color Inner \\ text \\ #eacde0&",
          "indices": [
            532,
            570
          ]
        },
        "value": "#eacde0"
      },
      ";\r\n  --txtcolor: ",
      {
        "type": "text",
        "description": "Text Color",
        "marker": {
          "type": "text",
          "description": "Text Color",
          "defaultValue": "#565656",
          "original": "&Text Color \\ text \\ #565656&",
          "indices": [
            588,
            616
          ]
        },
        "value": "#565656"
      },
      ";\r\n  ",
      {
        "type": "group",
        "description": "Front Images",
        "markerStart": {
          "type": "group",
          "description": "Front Images",
          "original": "&Front Images \\ group&",
          "repeat": false,
          "indices": [
            622,
            643
          ]
        },
        "repeat": false,
        "originalChildren": [
          "\r\n  --img1: url(",
          {
            "type": "text",
            "description": "Large 3x4 Image",
            "marker": {
              "type": "text",
              "description": "Large 3x4 Image",
              "defaultValue": "https://i.imgur.com/lFeUn8N.jpeg",
              "original": "&Large 3x4 Image \\ text \\ https://i.imgur.com/lFeUn8N.jpeg&",
              "indices": [
                660,
                718
              ]
            },
            "value": "https://i.imgur.com/lFeUn8N.jpeg"
          },
          ");\r\n  --icon1: url(",
          {
            "type": "text",
            "description": "Small 1x1 Icon (01)",
            "marker": {
              "type": "text",
              "description": "Small 1x1 Icon (01)",
              "defaultValue": "https://i.imgur.com/7vYDrQj.jpeg",
              "original": "&Small 1x1 Icon (01) \\ text \\ https://i.imgur.com/7vYDrQj.jpeg&",
              "indices": [
                738,
                800
              ]
            },
            "value": "https://i.imgur.com/7vYDrQj.jpeg"
          },
          ");\r\n  --icon2: url(",
          {
            "type": "text",
            "description": "Small 1x1 Icon (02)",
            "marker": {
              "type": "text",
              "description": "Small 1x1 Icon (02)",
              "defaultValue": "https://i.imgur.com/lU9xpJq.jpeg",
              "original": "&Small 1x1 Icon (02) \\ text \\ https://i.imgur.com/lU9xpJq.jpeg&",
              "indices": [
                820,
                882
              ]
            },
            "value": "https://i.imgur.com/lU9xpJq.jpeg"
          },
          ");\r\n  --icon3: url(",
          {
            "type": "text",
            "description": "Small 1x1 Icon (03)",
            "marker": {
              "type": "text",
              "description": "Small 1x1 Icon (03)",
              "defaultValue": "https://i.imgur.com/5QMmgpg.jpeg",
              "original": "&Small 1x1 Icon (03) \\ text \\ https://i.imgur.com/5QMmgpg.jpeg&",
              "indices": [
                902,
                964
              ]
            },
            "value": "https://i.imgur.com/5QMmgpg.jpeg"
          },
          ");\r\n  --icon4: url(",
          {
            "type": "text",
            "description": "Small 1x1 Icon (04)",
            "marker": {
              "type": "text",
              "description": "Small 1x1 Icon (04)",
              "defaultValue": "https://i.imgur.com/icrdjMg.jpeg",
              "original": "&Small 1x1 Icon (04) \\ text \\ https://i.imgur.com/icrdjMg.jpeg&",
              "indices": [
                984,
                1046
              ]
            },
            "value": "https://i.imgur.com/icrdjMg.jpeg"
          },
          ");"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            1049,
            1053
          ]
        }
      },
      "",
      {
        "type": "group",
        "description": "Content Images",
        "markerStart": {
          "type": "group",
          "description": "Content Images",
          "original": "&Content Images \\ group&",
          "repeat": false,
          "indices": [
            1054,
            1077
          ]
        },
        "repeat": false,
        "originalChildren": [
          "\r\n  --basicimg: url(",
          {
            "type": "text",
            "description": "Landscape Image",
            "marker": {
              "type": "text",
              "description": "Landscape Image",
              "defaultValue": "https://i.imgur.com/VwtwphH.jpeg",
              "original": "&Landscape Image \\ text \\ https://i.imgur.com/VwtwphH.jpeg&",
              "indices": [
                1098,
                1156
              ]
            },
            "value": "https://i.imgur.com/VwtwphH.jpeg"
          },
          ");\r\n  --section1img: url(",
          {
            "type": "text",
            "description": "Image @ About",
            "marker": {
              "type": "text",
              "description": "Image @ About",
              "defaultValue": "https://i.imgur.com/EErvY5e.jpeg",
              "original": "&Image @ About \\ text \\ https://i.imgur.com/EErvY5e.jpeg&",
              "indices": [
                1182,
                1238
              ]
            },
            "value": "https://i.imgur.com/EErvY5e.jpeg"
          },
          ");\r\n  --section2img: url(",
          {
            "type": "text",
            "description": "Image @ Timeline",
            "marker": {
              "type": "text",
              "description": "Image @ Timeline",
              "defaultValue": "https://i.imgur.com/fdGC2Dz.jpeg",
              "original": "&Image @ Timeline \\ text \\ https://i.imgur.com/fdGC2Dz.jpeg&",
              "indices": [
                1264,
                1323
              ]
            },
            "value": "https://i.imgur.com/fdGC2Dz.jpeg"
          },
          ");"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            1326,
            1330
          ]
        }
      },
      "\r\n  ",
      {
        "type": "group",
        "description": "Relationship Bars",
        "markerStart": {
          "type": "group",
          "description": "Relationship Bars",
          "original": "&Relationship Bars \\ group&",
          "repeat": false,
          "indices": [
            1335,
            1361
          ]
        },
        "repeat": false,
        "originalChildren": [
          "--bar1color: ",
          {
            "type": "text",
            "description": "Bar 01",
            "marker": {
              "type": "text",
              "description": "Bar 01",
              "defaultValue": "seagreen",
              "original": "&Bar 01 \\ text \\ seagreen&",
              "indices": [
                1375,
                1400
              ]
            },
            "value": "seagreen"
          },
          ";\r\n  --bar2color: ",
          {
            "type": "text",
            "description": "Bar 02",
            "marker": {
              "type": "text",
              "description": "Bar 02",
              "defaultValue": "tomato",
              "original": "&Bar 02 \\ text \\ tomato&",
              "indices": [
                1419,
                1442
              ]
            },
            "value": "tomato"
          },
          ";\r\n  --bar3color: ",
          {
            "type": "text",
            "description": "Bar 03",
            "marker": {
              "type": "text",
              "description": "Bar 03",
              "defaultValue": "crimson",
              "original": "&Bar 03 \\ text \\ crimson&",
              "indices": [
                1461,
                1485
              ]
            },
            "value": "crimson"
          },
          ";"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            1487,
            1491
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        1492,
        1496
      ]
    }
  },
  "\r\n  --bodyfont: 'Hedvig Letters Sans', sans-serif;\r\n  --titlefont: 'Bungee', sans-serif;\r\n  --accentfont: 'Pixelify Sans', sans-serif;\r\n  position: relative;\r\n  isolation: isolate;\r\n  container-type: size;\r\n  box-sizing: border-box;\r\n  width: clamp(300px,100% - 30px,600px);\r\n  margin: 15px auto;\r\n  margin-top: 15px;\r\n  margin-bottom: 15px;\r\n  aspect-ratio: 9/16;\r\n  font-size: 0px;\r\n  overflow: hidden;\r\n  font-family: var(--bodyfont);\r\n  box-shadow: -6px -6px 0px var(--color2),6px 6px 0px var(--color1);\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  --bubblepos: 48%;\r\n  --bdvar: 1px solid var(--color1);\r\n  --bdrad: 10px;\r\n  --exitbtn: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNpcmNsZS14Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Im0xNSA5LTYgNiIvPjxwYXRoIGQ9Im05IDkgNiA2Ii8+PC9zdmc+);\r\n  --grid: url(https://i.imgur.com/0SOZgZ8.gif);\r\n  --points: url(https://i.imgur.com/HxasS2U.gif);\r\n  --blobs1: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU0MCA5NjAiIHdpZHRoPSI1NDAiIGhlaWdodD0iOTYwIj48cGF0aCBkPSJNNTQwIDM1MWMtNTMuNiAxLjctMTA3LjEgMy40LTEzMy42LTI4LjYtMjYuNC0zMi0yNS43LTk3LjctNTguNy0xMzAuMS0zMy4xLTMyLjQtOTkuOS0zMS41LTEzMi01OFMxODYuMyA1My45IDE4OSAwaDM1MXpNMCA2MDljNDUuMSA1LjEgOTAuMiAxMC4yIDEzNC4zIDI2LjcgNDQuMiAxNi41IDg3LjQgNDQuMyAxMDcuNSA4Mi41IDIwLjIgMzguMSAxNy4zIDg2LjUgMzEuNyAxMjguNSAxNC4zIDQyIDQ1LjkgNzcuNyA3Ny41IDExMy4zSDB6IiBzdHlsZT0iZmlsbDojMDAwIi8+PC9zdmc+); \r\n  --summicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWhlYXJ0Ij48cGF0aCBkPSJNMTkgMTRjMS40OS0xLjQ2IDMtMy4yMSAzLTUuNUE1LjUgNS41IDAgMCAwIDE2LjUgM2MtMS43NiAwLTMgLjUtNC41IDItMS41LTEuNS0yLjc0LTItNC41LTJBNS41IDUuNSAwIDAgMCAyIDguNWMwIDIuMyAxLjUgNC4wNSAzIDUuNWw3IDdaIi8+PC9zdmc+);\r\n  --likesicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1lc3NhZ2Utc3F1YXJlLWhlYXJ0Ij48cGF0aCBkPSJNMjEgMTVhMiAyIDAgMCAxLTIgMkg3bC00IDRWNWEyIDIgMCAwIDEgMi0yaDE0YTIgMiAwIDAgMSAyIDJ6Ii8+PHBhdGggZD0iTTE0LjggNy41YTEuODQgMS44NCAwIDAgMC0yLjYgMGwtLjIuMy0uMy0uM2ExLjg0IDEuODQgMCAxIDAtMi40IDIuOEwxMiAxM2wyLjctMi43Yy45LS45LjgtMi4xLjEtMi44Ii8+PC9zdmc+);\r\n  --dislikesicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1lc3NhZ2Utc3F1YXJlLXgiPjxwYXRoIGQ9Ik0yMSAxNWEyIDIgMCAwIDEtMiAySDdsLTQgNFY1YTIgMiAwIDAgMSAyLTJoMTRhMiAyIDAgMCAxIDIgMnoiLz48cGF0aCBkPSJtMTQuNSA3LjUtNSA1Ii8+PHBhdGggZD0ibTkuNSA3LjUgNSA1Ii8+PC9zdmc+);\r\n  --relicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1lc3NhZ2Utc3F1YXJlLWRvdCI+PHBhdGggZD0iTTExLjcgM0g1YTIgMiAwIDAgMC0yIDJ2MTZsNC00aDEyYTIgMiAwIDAgMCAyLTJ2LTIuNyIvPjxjaXJjbGUgY3g9IjE4IiBjeT0iNiIgcj0iMyIvPjwvc3ZnPg==);\r\n  --bellicon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJlbGwiPjxwYXRoIGQ9Ik0xMC4yNjggMjFhMiAyIDAgMCAwIDMuNDY0IDAiLz48cGF0aCBkPSJNMy4yNjIgMTUuMzI2QTEgMSAwIDAgMCA0IDE3aDE2YTEgMSAwIDAgMCAuNzQtMS42NzNDMTkuNDEgMTMuOTU2IDE4IDEyLjQ5OSAxOCA4QTYgNiAwIDAgMCA2IDhjMCA0LjQ5OS0xLjQxMSA1Ljk1Ni0yLjczOCA3LjMyNiIvPjwvc3ZnPg==);\r\n  --blob1: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDYwNiA1ODQiIHdpZHRoPSI2MDYiIGhlaWdodD0iNTg0Ij48cGF0aCBkPSJNNTgzIDk2LjhjNDQuNyA3Mi40IDE0LjcgMTkxLjctOC45IDI4Ny40UzUzMy4zIDU1MiA0ODguNiA1NzQuN3MtMTE2LjgtNC4xLTE2Ny44LTI1LjNjLTUwLjktMjEuMS04MC44LTM2LjYtMTI1LjMtNTkuM0MxNTEgNDY3LjUgOTEuOSA0MzcuNiA0OC43IDM2NC42cy03MC40LTE4OS4yLTI1LjktMjYxLjVDNjcuMyAzMC43IDE4My41IDIuMyAzMDEuMy43IDQxOS0uOSA1MzguMyAyNC41IDU4MyA5Ni44IiBzdHlsZT0iZmlsbDojMDAwIi8+PC9zdmc+);\r\n  --blob2: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY4MCA3MDgiIHdpZHRoPSI2ODAiIGhlaWdodD0iNzA4Ij48cGF0aCBkPSJNNDQ3LjggMTQxLjNjOTIuMyAzNy4xIDIyNiA2NS4zIDIzMS43IDExMy43UzU2Mi45IDM3MS45IDQ5OS40IDQ2Ny42Yy02My40IDk1LjctNjcuOSAyMTguNS0xMTIuNSAyMzcuM1MyNTcuNyA2MzguNSAxOTQuMyA1NzljLTYzLjQtNTkuNC0xMDUuNi05My4yLTEyNi44LTEzNi4xcy0yMS41LTk1LTM3LjgtMTc1LjRDMTMuNCAxODctMTguOSA3OC4yIDE1LjggMzFjMzQuNi00Ny4yIDEzNi4xLTMyLjkgMjEyLjQtMi43IDc2LjMgMzAuMSAxMjcuMyA3NiAyMTkuNiAxMTMiIHN0eWxlPSJmaWxsOiMwMDAiLz48L3N2Zz4=);\r\n  --blob3: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDczMiA2ODgiIHdpZHRoPSI3MzIiIGhlaWdodD0iNjg4Ij48cGF0aCBkPSJNNTEwLjQgMTY0LjVjNjIgNDIuOSAxNDkuOSA2NC4xIDE5MS44IDEyMC4zIDQxLjggNTYuMSAzNy41IDE0Ny4yLTIuOCAyMTcuOC00MC40IDcwLjYtMTE2LjcgMTIwLjctMjAxLjEgMTUzLjVzLTE3Ni45IDQ4LjEtMjMxLjIgNy4zYy01NC40LTQwLjktNzAuNi0xMzcuOS0xMjAtMjE4LjJDOTcuOCAzNjQuOCAxNS4zIDMwMS4xIDIuMyAyMjcuOGMtMTMtNzMuMiA0My40LTE1NS45IDExNy4zLTE5Ni43IDczLjgtNDAuOCAxNjUuMS0zOS43IDIyOC44LTYuOSA2My44IDMyLjkgOTkuOSA5Ny40IDE2MiAxNDAuMyIgc3R5bGU9ImZpbGw6IzAwMCIvPjwvc3ZnPg==);\r\n  --blob4: url(data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20626%20690%22%20width%3D%22626%22%20height%3D%22690%22%3E%3Cpath%20d%3D%22M480.6%20108.3c24.4%2060.9%2019.3%20126%2023.2%20172.6s16.9%2074.8%2045%20119.2c28.2%2044.4%2071.6%20105%2076.2%20166.4%204.6%2061.3-29.7%20123.3-82.2%20123s-123.4-63-185-78.9c-61.7-15.9-114.2%2015.1-146.2%203.6-32.1-11.5-43.7-65.5-84.1-110.9C87.1%20457.8%2017.8%20420.8%203.6%20375.6c-14.3-45.3%2026.3-98.8%2072.7-134%2046.3-35.2%2098.3-52.2%20144.6-100.4C267.3%2092.9%20307.9%2013.4%20355.2%202c47.2-11.4%20101.1%2045.3%20125.4%20106.3%22%20style%3D%22fill%3A%23000%22%2F%3E%3C%2Fsvg%3E);\r\n  --titlefx: drop-shadow(-2px 0px 0px var(--color2)) drop-shadow(2px 0px 0px var(--color1));\r\n  --secvert: 5cqh;\r\n  --sechor: 7cqw;\r\n  --sectionpadd: var(--secvert) var(--sechor);\r\n  --isize: 2.25;\r\n  border-radius: var(--bdrad);\r\n  border: var(--bdvar);\r\n  background-color: var(--bgcolor);\r\n  background-image: var(--grid),linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);\r\n  background-repeat: repeat,no-repeat;\r\n  background-position: center center,center center;\r\n  background-blend-mode: soft-light;]\r\n    [div=display: block;\r\n    transform: rotateZ(90deg) translateY(-100cqw);\r\n    transform-origin: top left; \r\n    height: calc(100cqw + 2px);\r\n    width: calc(100cqh + 2px);\r\n    visibility: hidden;\r\n    position: relative;]\r\n      [div=display: flex;\r\n      flex-flow: column-reverse nowrap;\r\n      height: 100%;\r\n      width: 100%;\r\n      margin-left: -1px;]\r\n        [accordion=100%]\r\n          {slide=[nobr]\r\n            [div=display: block;\r\n            height: 100cqw;\r\n            width: 100cqh;\r\n            visibility: visible;\r\n            position: relative;\r\n            font-size: 0px;\r\n            z-index: 2;\r\n            font-weight: normal;\r\n            font-variant: normal;\r\n            margin: -6px;]\r\n              [div=position: relative;\r\n              z-index: 2;\r\n              height: calc(100cqh + 1px);\r\n              width: 100cqw;\r\n              transform: rotateZ(-90deg) translateX(-100%);\r\n              transform-origin: top left;\r\n              box-sizing: border-box;\r\n              display: block;\r\n              gap: 15px;\r\n              padding: 15cqw 10cqw;]\r\n                [div=position: absolute; /* blob */\r\n                top: 0px;\r\n                left: 0px;\r\n                height: 100%;\r\n                width: 100%;\r\n                background: linear-gradient(90deg, var(--gradcolor1) 0%, var(--gradcolor2) 50%, var(--gradcolor1) 100%);\r\n                mask: var(--blobs1) no-repeat center center/112% auto;]\r\n                  .\r\n                [/div]\r\n                [div=position: absolute; /* role or title */\r\n                bottom: 2.5cqh;\r\n                right: 8cqw;\r\n                font-size: 2.25rem;\r\n                color: var(--color3);\r\n                font-family: var(--titlefont);\r\n                text-wrap: balance;\r\n                width: 30cqw;\r\n                line-height: 1;\r\n                text-align: right;]\r\n                  ",
  {
    "type": "group",
    "description": "Front Area",
    "markerStart": {
      "type": "group",
      "description": "Front Area",
      "original": "&Front Area \\ group&",
      "repeat": false,
      "indices": [
        10825,
        10844
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "text",
        "description": "Role or Alias",
        "marker": {
          "type": "text",
          "description": "Role or Alias",
          "defaultValue": "nemain",
          "original": "&Role or Alias \\ text \\ nemain&",
          "indices": [
            10845,
            10875
          ]
        },
        "value": "nemain"
      },
      "\r\n                [/div]\r\n                [div=position: absolute; /* app name */\r\n                left: 1.25rem;\r\n                top: 1rem;\r\n                font-family: var(--accentfont);\r\n                font-size: .85rem;\r\n                text-transform: uppercase;\r\n                color: var(--color1);]\r\n                  ",
      {
        "type": "text",
        "description": "App Name",
        "marker": {
          "type": "text",
          "description": "App Name",
          "defaultValue": "love eater",
          "original": "&App Name \\ text \\ love eater&",
          "indices": [
            11206,
            11235
          ]
        },
        "value": "love eater"
      },
      "\r\n                [/div]\r\n                [div=display: block; /* image */\r\n                margin-bottom: 15px;\r\n                width: 100%;\r\n                top: 0px;\r\n                left: 0px;\r\n                position: relative;\r\n                border-radius: var(--bdrad);\r\n                overflow: hidden;\r\n                box-sizing: border-box;\r\n                padding: 10%;]\r\n                  [div=position: absolute;\r\n                  top: 0px;\r\n                  left: 0px;\r\n                  height: 100%;\r\n                  width: 100%;\r\n                  background: var(--points) repeat center center/auto;\r\n                  opacity: .25;]\r\n                    .\r\n                  [/div]\r\n                  [div=display: block;\r\n                  height: 100%;\r\n                  width: 100%;\r\n                  aspect-ratio: 3/4;\r\n                  position: relative;\r\n                  z-index: 5;\r\n                  border-radius: var(--bdrad);\r\n                  overflow: hidden;\r\n                  background-color: var(--color1);\r\n                  background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%),var(--img1);\r\n                  background-blend-mode: soft-light,normal;\r\n                  background-repeat: no-repeat,no-repeat;\r\n                  background-position: center center,center center;\r\n                  background-size: cover,cover;\r\n                  border: 2px solid var(--color1);]\r\n                    .\r\n                  [/div]\r\n                [/div]\r\n                [div=display: flex; /* icons */\r\n                flex-flow: row nowrap;\r\n                justify-content: space-between;\r\n                gap: 5px;\r\n                width: 100%;\r\n                top: 0px;\r\n                left: 0px;\r\n                position: relative;\r\n                border-radius: var(--bdrad);\r\n                overflow: hidden;\r\n                box-sizing: border-box;\r\n                padding: 5% 10%;]\r\n                  [div=position: absolute;\r\n                  top: 0px;\r\n                  left: 0px;\r\n                  height: 100%;\r\n                  width: 100%;\r\n                  background: var(--points) repeat center center/auto;\r\n                  opacity: .25;]\r\n                    .\r\n                  [/div]\r\n                  [div=flex: 1 0 0;\r\n                  aspect-ratio: 1;\r\n                  position: relative;\r\n                  z-index: 4;\r\n                  border-radius: var(--bdrad);\r\n                  overflow: hidden;\r\n                  background-color: var(--color1);\r\n                  background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.5) 100%),var(--icon1);\r\n                  background-blend-mode: soft-light,normal;\r\n                  background-repeat: no-repeat,no-repeat;\r\n                  background-position: center center,center center;\r\n                  background-size: cover,cover;\r\n                  border: var(--bdvar);]\r\n                    .\r\n                  [/div]\r\n                  [div=flex: 1 0 0;\r\n                  aspect-ratio: 1;\r\n                  position: relative;\r\n                  z-index: 4;\r\n                  border-radius: var(--bdrad);\r\n                  overflow: hidden;\r\n                  background-color: var(--color1);\r\n                  background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.5) 100%),var(--icon2);\r\n                  background-blend-mode: soft-light,normal;\r\n                  background-repeat: no-repeat,no-repeat;\r\n                  background-position: center center,center center;\r\n                  background-size: cover,cover;\r\n                  border: var(--bdvar);]\r\n                    .\r\n                  [/div]\r\n                  [div=flex: 1 0 0;\r\n                  aspect-ratio: 1;\r\n                  position: relative;\r\n                  z-index: 4;\r\n                  border-radius: var(--bdrad);\r\n                  overflow: hidden;\r\n                  background-color: var(--color1);\r\n                  background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.5) 100%),var(--icon3);\r\n                  background-blend-mode: soft-light,normal;\r\n                  background-repeat: no-repeat,no-repeat;\r\n                  background-position: center center,center center;\r\n                  background-size: cover,cover;\r\n                  border: var(--bdvar);]\r\n                    .\r\n                  [/div]\r\n                  [div=flex: 1 0 0;\r\n                  aspect-ratio: 1;\r\n                  position: relative;\r\n                  z-index: 4;\r\n                  border-radius: var(--bdrad);\r\n                  overflow: hidden;\r\n                  background-color: var(--color1);\r\n                  background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.5) 100%),var(--icon4);\r\n                  background-blend-mode: soft-light,normal;\r\n                  background-repeat: no-repeat,no-repeat;\r\n                  background-position: center center,center center;\r\n                  background-size: cover,cover;\r\n                  border: var(--bdvar);]\r\n                    .\r\n                  [/div]\r\n                [/div]\r\n                [div=position: absolute; /* text bubble */\r\n                display: block;\r\n                width: clamp(100px,45%,300px);\r\n                z-index: 5;\r\n                top: var(--bubblepos);\r\n                right: 8%;\r\n                filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.15));\r\n                color: var(--bgcolor);]\r\n                  [div=display: block;\r\n                  border-radius: 50%;\r\n                  z-index: 2;\r\n                  aspect-ratio: 1;\r\n                  width: 13px;\r\n                  background: var(--color1);\r\n                  margin-bottom: 3px;]\r\n                    .\r\n                  [/div]\r\n                  [div=display: block;\r\n                  border-radius: 50%;\r\n                  z-index: 2;\r\n                  margin-left: 13px;\r\n                  margin-bottom: -10px;\r\n                  aspect-ratio: 1;\r\n                  width: 20px;\r\n                  background: var(--color1);]\r\n                    .\r\n                  [/div]\r\n                  [div=display: block;\r\n                  border-radius: var(--bdrad);\r\n                  font-size: 1.15rem;\r\n                  background: var(--color1);\r\n                  overflow: hidden;\r\n                  line-height: 1;\r\n                  box-sizing: border-box;\r\n                  padding: 15px 25px;]\r\n                    ",
      {
        "type": "text",
        "description": "Status Message",
        "marker": {
          "type": "text",
          "description": "Status Message",
          "defaultValue": "",
          "original": "&Status Message \\ text&",
          "indices": [
            17844,
            17866
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        17867,
        17871
      ]
    }
  },
  "\r\n                  [/div]\r\n                [/div]\r\n                [div=position: absolute; /* btn */\r\n                top: 0px;\r\n                left: 0px;\r\n                border-radius: var(--bdrad);\r\n                top: .5rem;\r\n                left: -4.5rem;\r\n                font-size: 0px;\r\n                width: 4rem;\r\n                background: var(--color1);\r\n                aspect-ratio: 1;\r\n                mask: var(--exitbtn) no-repeat center center/50% auto;]\r\n                  .\r\n                [/div]\r\n              [/div]\r\n            [/div]\r\n          [/nobr]}[nobr]\r\n            [div=display: block;\r\n            width: 100cqh;\r\n            height: calc(100cqw + 1px);\r\n            box-sizing: border-box;\r\n            font-size: .95rem;\r\n            margin: -6px;\r\n            position: relative;\r\n            visibility: visible;\r\n            font-size: 0px;\r\n            color: var(--txtcolor);\r\n            z-index: 1;]\r\n              [div=display: block;\r\n              overflow: hidden;\r\n              height: calc(100cqh + 1px);\r\n              width: 100cqw;\r\n              transform: rotateZ(-90deg) translateX(-100%);\r\n              transform-origin: top left;]\r\n                [div=display: block;\r\n                box-sizing: border-box;\r\n                height: 100%;\r\n                width: calc(100% + 35px);\r\n                padding-right: 35px;\r\n                overflow-x: visible;\r\n                overflow-y: scroll;\r\n                scrollbar-gutter: none;\r\n                scrollbar-width: none;]\r\n                  [div=display: block;\r\n                  overflow: hidden;\r\n                  position: relative;\r\n                  z-index: 1;\r\n                  width: 100cqw;]\r\n                    [div=display: block; /* image section */\r\n                    position: relative;\r\n                    z-index: 1;\r\n                    width: 100%;\r\n                    height: 33cqh;\r\n                    background: var(--basicimg) no-repeat center center/cover;]\r\n                      .\r\n                    [/div]\r\n                    [div=display: flex; /* intro section */\r\n                    position: relative;\r\n                    flex-flow: row nowrap;\r\n                    align-items: stretch;\r\n                    width: 100%;\r\n                    box-sizing: border-box;\r\n                    padding: var(--sectionpadd);\r\n                    gap: 1.5rem;]\r\n                      [div=position: absolute;\r\n                      z-index: 0;\r\n                      top: -50cqw;\r\n                      left: -50cqw;\r\n                      background: radial-gradient(circle at 75% 63%, var(--gradcolor2) 0%, var(--gradcolor1) 60%);\r\n                      mask: var(--blob1) no-repeat top left/contain;\r\n                      width: 100cqw;\r\n                      aspect-ratio: 606/584;]\r\n                        .\r\n                      [/div]\r\n                      [div=flex: 1 0 35px;\r\n                      max-width: 3rem;\r\n                      position: relative;\r\n                      z-index: 1;\r\n                      display: flex;\r\n                      flex-flow: column nowrap;\r\n                      align-items: center;\r\n                      gap: 1rem;]\r\n                        [div=flex: 0 0 auto;\r\n                        width: 100%;\r\n                        aspect-ratio: 1;\r\n                        filter: drop-shadow(2px 0px 0px var(--color1));]\r\n                          [div=display: block;\r\n                          width: 100%;\r\n                          aspect-ratio: 1;\r\n                          background: var(--bgcolor);\r\n                          mask: var(--summicon) no-repeat center center/contain;]\r\n                            .\r\n                          [/div]\r\n                        [/div]\r\n                        [div=flex: 1 0 auto;\r\n                        width: 1px;\r\n                        background: var(--color1);]\r\n                          border\r\n                        [/div]\r\n                      [/div]\r\n                      [div=flex: 12 0 75px;\r\n                      font-size: .95rem;\r\n                      position: relative;\r\n                      z-index: 1;]\r\n                        [div=display: block; /* name area */\r\n                        width: 100%;\r\n                        text-wrap: balance;\r\n                        font-size: clamp(16px,5cqh,2.65rem);\r\n                        line-height: .95;\r\n                        font-family: var(--titlefont);\r\n                        color: var(--bgcolor);\r\n                        filter: var(--titlefx);\r\n                        margin-bottom: 1rem;\r\n                        box-sizing: border-box;\r\n                        padding: 0px 1rem;]\r\n                          ",
  {
    "type": "group",
    "description": "Introduction",
    "markerStart": {
      "type": "group",
      "description": "Introduction",
      "original": "&Introduction \\ group&",
      "repeat": false,
      "indices": [
        22639,
        22660
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "text",
        "description": "Character Name",
        "marker": {
          "type": "text",
          "description": "Character Name",
          "defaultValue": "",
          "original": "&Character Name \\ text &",
          "indices": [
            22661,
            22684
          ]
        }
      },
      " (",
      {
        "type": "number",
        "description": "Age",
        "marker": {
          "type": "number",
          "description": "Age",
          "defaultValue": 0,
          "min": null,
          "max": null,
          "original": "&Age \\ number \\ 00&",
          "indices": [
            22687,
            22705
          ]
        }
      },
      ")\r\n                        [/div]\r\n                        [div=display: block; /* blurb area */\r\n                        text-align: justify;\r\n                        box-sizing: border-box;\r\n                        padding-right: 1rem;\r\n                        line-height: 1.25;\r\n                        width: 100%;]\r\n                          ",
      {
        "type": "content",
        "description": "Character Summary",
        "marker": {
          "type": "content",
          "description": "Character Summary",
          "original": "&Character Summary \\ content&",
          "indices": [
            23054,
            23082
          ]
        }
      },
      "\r\n                        [/div]\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: block; /* boxed section */\r\n                    position: relative;\r\n                    width: 85%;\r\n                    margin: auto;\r\n                    background: var(--color2);\r\n                    border: var(--bdvar);\r\n                    border-radius: var(--bdrad);\r\n                    text-wrap: pretty;\r\n                    box-sizing: border-box;\r\n                    padding: 1.85rem calc(2rem + 2%);\r\n                    font-size: .95rem;\r\n                    line-height: 1.2;\r\n                    font-family: var(--accentfont);]\r\n                      ",
      {
        "type": "content",
        "description": "Boxed Area (any purpose)",
        "marker": {
          "type": "content",
          "description": "Boxed Area (any purpose)",
          "original": "&Boxed Area (any purpose) \\ content&",
          "indices": [
            23782,
            23817
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        23818,
        23822
      ]
    }
  },
  "\r\n                    [/div]\r\n                    [div=display: block; /* txt section 01 */\r\n                    width: 100%;\r\n                    overflow: visible;\r\n                    height: auto;\r\n                    position: relative;\r\n                    box-sizing: border-box;\r\n                    padding: var(--sectionpadd);]\r\n                      [div=position: absolute;\r\n                      z-index: 0;\r\n                      top: 2cqh;\r\n                      left: 15cqw;\r\n                      width: 120cqw;\r\n                      aspect-ratio: 680/708;\r\n                      background: radial-gradient(circle at 50% 50%, var(--gradcolor2) 0%, var(--gradcolor1) 100%);\r\n                      mask: var(--blob2) no-repeat top left/contain;]\r\n                        .\r\n                      [/div]\r\n                      [div=display: block; /* section name */\r\n                      text-wrap: balance;\r\n                      width: 100%;\r\n                      position: relative;\r\n                      z-index: 1;\r\n                      text-wrap: balance;\r\n                      box-sizing: border-box;\r\n                      margin-top: 0cqh;]\r\n                        [div=position: absolute;\r\n                        z-index: 0;\r\n                        top: 0px;\r\n                        left: calc(-10cqw + -6px);\r\n                        box-shadow: 6px 6px 0px var(--color1);\r\n                        border-radius: 0px var(--bdrad) var(--bdrad) 0px;\r\n                        border: var(--bdvar);\r\n                        width: 35cqw;\r\n                        height: 100%;\r\n                        background-color: var(--color1);\r\n                        background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%),var(--section1img);\r\n                        background-blend-mode: soft-light,normal;\r\n                        background-repeat: no-repeat,no-repeat;\r\n                        background-position: center center,center center;\r\n                        background-size: cover,cover;]\r\n                          .\r\n                        [/div]\r\n                        [div=display: block;\r\n                        position: relative;\r\n                        z-index: 1;\r\n                        text-align: right;\r\n                        font-size: 5cqh;\r\n                        line-height: .95;\r\n                        font-family: var(--titlefont);\r\n                        color: var(--bgcolor);\r\n                        filter: var(--titlefx);\r\n                        padding: 3rem 0px .75rem 0px;]\r\n                          ",
  {
    "type": "group",
    "description": "Content Section",
    "markerStart": {
      "type": "group",
      "description": "Content Section",
      "original": "&Content Section \\ group&",
      "repeat": false,
      "indices": [
        26437,
        26461
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "text",
        "description": "Section Title",
        "marker": {
          "type": "text",
          "description": "Section Title",
          "defaultValue": "about",
          "original": "&Section Title \\ text \\ about&",
          "indices": [
            26462,
            26491
          ]
        },
        "value": "about"
      },
      "\r\n                        [/div]\r\n                        [div=display: flex;\r\n                        position: relative;\r\n                        z-index: 1;\r\n                        flex-flow: row wrap;\r\n                        align-items: center;\r\n                        justify-content: flex-end;\r\n                        gap: 5px;\r\n                        font-family: var(--accentfont);\r\n                        font-size: .95rem;\r\n                        box-sizing: border-box;\r\n                        padding-bottom: 1rem;\r\n                        margin-right: 0;\r\n                        margin-left: auto;\r\n                        width: clamp(225px,55cqw - 16px,500px);]\r\n                          ",
      {
        "type": "group",
        "description": "Traits",
        "markerStart": {
          "type": "group",
          "description": "Traits",
          "original": "&Traits \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            27207,
            27231
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 0 auto;\r\n                          background: var(--color2);\r\n                          border: var(--bdvar);\r\n                          border-radius: 5px;\r\n                          padding: 2px 5px;\r\n                          box-sizing: border-box;]\r\n                            ",
          {
            "type": "text",
            "description": "Trait",
            "marker": {
              "type": "text",
              "description": "Trait",
              "defaultValue": "",
              "original": "&Trait \\ text&",
              "indices": [
                27529,
                27542
              ]
            }
          },
          "\r\n                          [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            27577,
            27581
          ]
        }
      },
      "\r\n                        [/div]\r\n                      [/div]\r\n                      [div=display: block;\r\n                      font-size: .95rem;\r\n                      line-height: 1.25;\r\n                      text-align: justify;\r\n                      position: relative;\r\n                      z-index: 1;\r\n                      margin-top: 2rem;]\r\n                        [div=display: block;]\r\n                          ",
      {
        "type": "content",
        "description": "Content Section Body Text",
        "marker": {
          "type": "content",
          "description": "Content Section Body Text",
          "original": "&Content Section Body Text \\ content&",
          "indices": [
            28011,
            28047
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        28048,
        28052
      ]
    }
  },
  "\r\n                        [/div]\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: flex; /* likes section */\r\n                    flex-flow: row wrap;\r\n                    align-items: center;\r\n                    gap: 15px;\r\n                    position: relative;\r\n                    width: 85%;\r\n                    margin: auto;\r\n                    background: var(--color2);\r\n                    border: var(--bdvar);\r\n                    border-radius: var(--bdrad);\r\n                    text-wrap: pretty;\r\n                    box-sizing: border-box;\r\n                    padding: 1.85rem calc(2rem + 2%);\r\n                    font-family: var(--accentfont);]\r\n                      [div=flex: 4 0 20px;\r\n                      font-size: .95rem;\r\n                      line-height: 1.2;]\r\n                        ",
  {
    "type": "group",
    "description": "Preferences",
    "markerStart": {
      "type": "group",
      "description": "Preferences",
      "original": "&Preferences \\ group&",
      "repeat": false,
      "indices": [
        28918,
        28938
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "content",
        "description": "Likes Content",
        "marker": {
          "type": "content",
          "description": "Likes Content",
          "original": "&Likes Content \\ content&",
          "indices": [
            28939,
            28963
          ]
        }
      },
      "\r\n                      [/div]\r\n                      [div=flex: 0 0 30px;\r\n                      background: var(--color1);\r\n                      mask: var(--likesicon) no-repeat center center/contain;\r\n                      aspect-ratio: 1;]\r\n                        .\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: flex; /* dislikes section */\r\n                    flex-flow: row wrap;\r\n                    align-items: stretch;\r\n                    gap: 15px;\r\n                    position: relative;\r\n                    width: 85%;\r\n                    margin: auto;\r\n                    background: var(--color2);\r\n                    border: var(--bdvar);\r\n                    border-radius: var(--bdrad);\r\n                    text-wrap: pretty;\r\n                    box-sizing: border-box;\r\n                    padding: 1.85rem calc(2rem + 2%);\r\n                    font-family: var(--accentfont);\r\n                    margin-top: .5rem;]\r\n                      [div=flex: 1 0 20px;\r\n                      font-size: .95rem;\r\n                      line-height: 1.2;]\r\n                        ",
      {
        "type": "content",
        "description": "Disikes Content",
        "marker": {
          "type": "content",
          "description": "Disikes Content",
          "original": "&Disikes Content \\ content&",
          "indices": [
            30112,
            30138
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        30139,
        30143
      ]
    }
  },
  "\r\n                      [/div]\r\n                      [div=flex: 0 0 30px;\r\n                      background: var(--color1);\r\n                      mask: var(--dislikesicon) no-repeat center center/contain;\r\n                      aspect-ratio: 1;]\r\n                        .\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: block; /* timeline section */\r\n                    width: 100%;\r\n                    height: auto;\r\n                    position: relative;\r\n                    z-index: 0;\r\n                    box-sizing: border-box;\r\n                    padding: var(--sectionpadd);]\r\n                      [div=position: absolute;\r\n                      z-index: 0;\r\n                      top: 3cqh;\r\n                      right: -40%;\r\n                      height: 100cqh;\r\n                      aspect-ratio: 680/708;\r\n                      background: radial-gradient(circle at 50% 50%, var(--gradcolor2) 0%, var(--gradcolor1) 100%);\r\n                      mask: var(--blob3) no-repeat top left/contain;]\r\n                        .\r\n                      [/div]\r\n                      [div=display: block;\r\n                      width: clamp(100px,25cqw,200px);\r\n                      aspect-ratio: 1;\r\n                      position: relative;\r\n                      z-index: 1;\r\n                      border-radius: var(--bdrad);\r\n                      overflow: hidden;\r\n                      background-color: var(--color1);\r\n                      background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%),var(--section2img);\r\n                      background-blend-mode: soft-light,normal;\r\n                      background-repeat: no-repeat,no-repeat;\r\n                      background-position: center center,center center;\r\n                      background-size: cover,cover;\r\n                      border: 2px solid var(--color1);\r\n                      margin: 3cqh 0px -13% clamp(10px,5%,300px);]\r\n                        .\r\n                      [/div]\r\n                      [div=display: block;\r\n                      width: calc(90% - 20px);\r\n                      margin: auto;\r\n                      position: relative;\r\n                      z-index: 1;\r\n                      filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.15));\r\n                      color: var(--bgcolor);\r\n                      padding-left: clamp(50px,20cqw,300px);\r\n                      box-sizing: border-box;]\r\n                        [div=position: absolute; /* time stamp */\r\n                        right: 15px;\r\n                        top: 8px;\r\n                        color: var(--txtcolor);\r\n                        font-size: .75rem;\r\n                        line-height: 1.2;\r\n                        font-family: var(--accentfont);\r\n                        text-align: right;\r\n                        box-sizing: border-box;\r\n                        width: calc(100% - 38px);]\r\n                          ",
  {
    "type": "group",
    "description": "Timeline",
    "markerStart": {
      "type": "group",
      "description": "Timeline",
      "original": "&Timeline \\ group&",
      "repeat": false,
      "indices": [
        33136,
        33153
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "text",
        "description": "Timestamp or Info",
        "marker": {
          "type": "text",
          "description": "Timestamp or Info",
          "defaultValue": "12:03AM  13 DEC 2024",
          "original": "&Timestamp or Info \\ text \\ 12:03AM  13 DEC 2024&",
          "indices": [
            33154,
            33202
          ]
        },
        "value": "12:03AM  13 DEC 2024"
      },
      "\r\n                        [/div]\r\n                        [div=display: block;\r\n                        border-radius: 50%;\r\n                        z-index: 2;\r\n                        aspect-ratio: 1;\r\n                        width: 13px;\r\n                        background: var(--color1);\r\n                        margin-bottom: 3px;]\r\n                          .\r\n                        [/div]\r\n                        [div=display: block;\r\n                        border-radius: 50%;\r\n                        z-index: 2;\r\n                        margin-left: 13px;\r\n                        margin-bottom: -10px;\r\n                        aspect-ratio: 1;\r\n                        width: 20px;\r\n                        background: var(--color1);]\r\n                          .\r\n                        [/div]\r\n                        [div=display: block; /* status message */\r\n                        border-radius: var(--bdrad);\r\n                        font-size: 1.15rem;\r\n                        background: var(--color1);\r\n                        overflow: hidden;\r\n                        line-height: 1;\r\n                        box-sizing: border-box;\r\n                        padding: 15px 25px;]\r\n                          [div=display: -webkit-box;\r\n                          line-clamp: 3;\r\n                          -webkit-line-clamp: 3;-webkit-box-orient: vertical;  overflow: hidden;]\r\n                            ",
      {
        "type": "text",
        "description": "Status Message",
        "marker": {
          "type": "text",
          "description": "Status Message",
          "defaultValue": "",
          "original": "&Status Message \\ text&",
          "indices": [
            34637,
            34659
          ]
        }
      },
      "\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                      [div=display: block; /* scroll area */\r\n                      overflow-x: visible;\r\n                      overflow-y: auto;\r\n                      height: 45cqh;\r\n                      position: relative;\r\n                      z-index: 1;\r\n                      margin: 2rem 0px 0px calc(10% - 30px);\r\n                      width: calc(90% + 200px);\r\n                      box-sizing: border-box;\r\n                      padding-right: 200px;\r\n                      container-type: inline-size;]\r\n                        ",
      {
        "type": "group",
        "description": "Timeline Segment",
        "markerStart": {
          "type": "group",
          "description": "Timeline Segment",
          "original": "&Timeline Segment \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            35301,
            35335
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=display: block; /* segment */\r\n                        position: relative;\r\n                        width: 100cqw;\r\n                        box-sizing: border-box;\r\n                        padding-left: 30px;]\r\n                          [div=position: sticky;\r\n                          width: calc(var(--isize) * 1rem);\r\n                          top: 0px;\r\n                          left: 0px;\r\n                          margin: 1rem 0px 1rem calc((var(--isize) / 2) * -1rem);\r\n                          border-radius: 50%;\r\n                          box-sizing: border-box;\r\n                          padding: 10px;\r\n                          background: var(--color1);\r\n                          aspect-ratio: 1;]\r\n                            [div=display: block;\r\n                            filter: drop-shadow(1px 0px 0px var(--color2));]\r\n                              [div=display: block;\r\n                              width: 100%;\r\n                              aspect-ratio: 1;\r\n                              background: var(--bgcolor);\r\n                              mask: var(--summicon) no-repeat center center/contain;]\r\n                                .\r\n                              [/div]\r\n                            [/div]\r\n                          [/div]\r\n                          [div=display: block;\r\n                          border-left: var(--bdvar);\r\n                          box-sizing: border-box;\r\n                          padding: 0px 0px 1rem 30px;\r\n                          font-size: .95rem;\r\n                          line-height: 1.25;\r\n                          margin-top: calc((var(--isize) * -1rem) + -2rem);\r\n                          text-align: justify;]\r\n                            ",
          {
            "type": "content",
            "description": "Segment Content",
            "marker": {
              "type": "content",
              "description": "Segment Content",
              "original": "&Segment Content \\ content&",
              "indices": [
                37075,
                37101
              ]
            }
          },
          "\r\n                          [/div]\r\n                        [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            37168,
            37172
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        37173,
        37177
      ]
    }
  },
  "\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: block; /* relationships */\r\n                    position: relative;\r\n                    z-index: 0;\r\n                    padding: 0px var(--sechor);]\r\n                      [div=position: absolute;\r\n                      z-index: 0;\r\n                      top: 50%;\r\n                      left: 50%;\r\n                      transform: translateX(-50%);\r\n                      background: radial-gradient(circle at 50% 50%, var(--gradcolor2) 0%, var(--gradcolor1) 100%);\r\n                      mask: var(--blob4) no-repeat top left/contain;\r\n                      height: 100cqh;\r\n                      aspect-ratio: 626/690;]\r\n                        .\r\n                      [/div]\r\n                      [div=display: flex;\r\n                      position: relative;\r\n                      z-index: 1;\r\n                      flex-flow: row nowrap;\r\n                      align-items: center;\r\n                      justify-content: flex-start;\r\n                      gap: 1rem;\r\n                      margin-bottom: 3cqh;]\r\n                        [div=flex: 1 0 35px;\r\n                        max-width: 3rem;\r\n                        position: relative;\r\n                        z-index: 1;\r\n                        aspect-ratio1;]\r\n                          [div=display: block;\r\n                          width: 100%;\r\n                          aspect-ratio: 1;\r\n                          background: var(--color3);\r\n                          mask: var(--relicon) no-repeat center center/contain;]\r\n                            .\r\n                          [/div]\r\n                        [/div]\r\n                        [div=flex: 4 0 100px; /* inbox name */\r\n                        font-size: 5cqh;\r\n                        line-height: .95;\r\n                        font-family: var(--titlefont);\r\n                        color: var(--bgcolor);\r\n                        filter: var(--titlefx);]\r\n                          ",
  {
    "type": "group",
    "description": "Relationships Section",
    "markerStart": {
      "type": "group",
      "description": "Relationships Section",
      "original": "&Relationships Section \\ group&",
      "repeat": false,
      "indices": [
        39203,
        39233
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "text",
        "description": "Section Title",
        "marker": {
          "type": "text",
          "description": "Section Title",
          "defaultValue": "inbox",
          "original": "&Section Title \\ text \\ inbox&",
          "indices": [
            39234,
            39263
          ]
        },
        "value": "inbox"
      },
      "\r\n                        [/div]\r\n                      [/div]\r\n                      [div=display: flex;\r\n                      position: relative;\r\n                      z-index: 1;\r\n                      flex-flow: column nowrap;\r\n                      align-items: flex-end;\r\n                      justify-content: flex-start;\r\n                      gap: 5px;]\r\n                        ",
      {
        "type": "group",
        "description": "Person",
        "markerStart": {
          "type": "group",
          "description": "Person",
          "original": "&Person \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            39654,
            39678
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 0 auto; /* relationship div */\r\n                        --bar1: ",
          {
            "type": "number",
            "description": "Relationship Bar 01",
            "marker": {
              "type": "number",
              "description": "Relationship Bar 01",
              "defaultValue": 0,
              "min": 0,
              "max": 100,
              "original": "&Relationship Bar 01 \\ number \\  \\ 0 \\ 100&",
              "indices": [
                39756,
                39798
              ]
            }
          },
          "%;\r\n                        --bar2: ",
          {
            "type": "number",
            "description": "Relationship Bar 02",
            "marker": {
              "type": "number",
              "description": "Relationship Bar 02",
              "defaultValue": 0,
              "min": 0,
              "max": 100,
              "original": "&Relationship Bar 02 \\ number \\  \\ 0 \\ 100&",
              "indices": [
                39835,
                39877
              ]
            }
          },
          "%;\r\n                        --bar3: ",
          {
            "type": "number",
            "description": "Relationship Bar 03",
            "marker": {
              "type": "number",
              "description": "Relationship Bar 03",
              "defaultValue": 0,
              "min": 0,
              "max": 100,
              "original": "&Relationship Bar 03 \\ number \\  \\ 0 \\ 100&",
              "indices": [
                39914,
                39956
              ]
            }
          },
          "%;\r\n                        --imgrel: url(",
          {
            "type": "text",
            "description": "Character Icon URL",
            "marker": {
              "type": "text",
              "description": "Character Icon URL",
              "defaultValue": "https://i.imgur.com/skxzi7A.jpeg",
              "original": "&Character Icon URL \\ text \\ https://i.imgur.com/skxzi7A.jpeg&",
              "indices": [
                39999,
                40060
              ]
            },
            "value": "https://i.imgur.com/skxzi7A.jpeg"
          },
          ");\r\n                        width: 85%;\r\n                        background: var(--color2);\r\n                        border-radius: var(--bdrad);\r\n                        border: var(--bdvar);\r\n                        box-sizing: border-box;\r\n                        padding: 1.85rem calc(2rem + 2%) 2rem calc(2rem + 2%);\r\n                        position: relative;]\r\n                          [div=display: block; visibility: hidden;]\r\n                            [accordion=100%]\r\n                              {slide=[div=font-weight: normal;\r\n                                font-variant: normal; color: var(--txtcolor); font-family: var(--accentfont); font-size: .95rem; line-height: 1.2; visibility: visible; box-sizing: border-box; padding: 1rem 0px 0px 1.5rem;]",
          {
            "type": "text",
            "description": "Short Quip About Character or Last Message Sent",
            "marker": {
              "type": "text",
              "description": "Short Quip About Character or Last Message Sent",
              "defaultValue": "",
              "original": "&Short Quip About Character or Last Message Sent \\ text&",
              "indices": [
                40831,
                40886
              ]
            }
          },
          ".[/div]}[nobr]\r\n                                  [div=display: flex;\r\n                                  flex-flow: row wrap;\r\n                                  align-items: flex-start;\r\n                                  gap: 1rem;\r\n                                  visibility: visible;\r\n                                  font-size: 0px;]\r\n                                    [div=flex: 1 0 85px;\r\n                                    box-sizing: border-box;\r\n                                    padding-top: .5rem;]\r\n                                      [div=display: block;\r\n                                      overflow: hidden;\r\n                                      background: var(--color3);\r\n                                      height: .85rem;\r\n                                      border-radius: var(--bdrad);\r\n                                      margin-bottom: 2px;] \r\n                                        [div=display: block;\r\n                                        height: 100%;\r\n                                        background: var(--bar1color);\r\n                                        border-radius: var(--bdrad);\r\n                                        width: var(--bar1);]\r\n                                          .\r\n                                        [/div]\r\n                                      [/div]\r\n                                      [div=display: block;\r\n                                      overflow: hidden;\r\n                                      background: var(--color3);\r\n                                      height: .85rem;\r\n                                      border-radius: var(--bdrad);\r\n                                      margin-bottom: 2px;] \r\n                                        [div=display: block;\r\n                                        height: 100%;\r\n                                        background: var(--bar2color);\r\n                                        border-radius: var(--bdrad);\r\n                                        width: var(--bar2);]\r\n                                          .\r\n                                        [/div]\r\n                                      [/div]\r\n                                      [div=display: block;\r\n                                      overflow: hidden;\r\n                                      background: var(--color3);\r\n                                      height: .85rem;\r\n                                      border-radius: var(--bdrad);\r\n                                      margin-bottom: 2px;] \r\n                                        [div=display: block;\r\n                                        height: 100%;\r\n                                        background: var(--bar3color);\r\n                                        border-radius: var(--bdrad);\r\n                                        width: var(--bar3);]\r\n                                          .\r\n                                        [/div]\r\n                                      [/div]\r\n                                    [/div]\r\n                                    [div=flex: 4 0 150px;\r\n                                    font-size: .95rem;\r\n                                    text-align: justify;\r\n                                    line-height: 1.25;]\r\n                                      ",
          {
            "type": "content",
            "description": "Additional Context",
            "marker": {
              "type": "content",
              "description": "Additional Context",
              "original": "&Additional Context \\ content&",
              "indices": [
                44195,
                44224
              ]
            }
          },
          "\r\n                                    [/div]\r\n                                  [/div]\r\n                                [/nobr]{/slide}\r\n                            [/accordion]\r\n                          [/div]\r\n                          [div=position: absolute;\r\n                          z-index: 1;\r\n                          top: 1.25rem;\r\n                          right: calc(100% - 3rem);\r\n                          width: clamp(85px,15cqw,200px);\r\n                          aspect-ratio: 1;\r\n                          background-color: var(--color1);\r\n                          background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%),var(--imgrel);\r\n                          background-blend-mode: soft-light,normal;\r\n                          background-repeat: no-repeat,no-repeat;\r\n                          background-position: center center,center center;\r\n                          background-size: cover,cover;\r\n                          border-radius: var(--bdrad);\r\n                          border: 2px solid var(--color1);\r\n                          box-sizing: border-box;]\r\n                            .\r\n                          [/div]\r\n                          [div=position: absolute;\r\n                          width: 80%;\r\n                          z-index: 1;\r\n                          filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.15));\r\n                          bottom: calc(100% - 3.5rem);]\r\n                            [div=display: inline-block; /* status message */\r\n                            max-width: 80%;\r\n                            border-radius: var(--bdrad);\r\n                            font-size: 1.15rem;\r\n                            background: var(--color1);\r\n                            overflow: hidden;\r\n                            line-height: 1;\r\n                            box-sizing: border-box;\r\n                            padding: 15px 25px;\r\n                            color: var(--bgcolor);\r\n                            white-space: nowrap;\r\n                            text-overflow: ellipsis;]\r\n                              [div=display: inline; color: var(--color3); margin-right: .6rem; ][fa]",
          {
            "type": "text",
            "description": "FA Icon That Describes their Relationship",
            "marker": {
              "type": "text",
              "description": "FA Icon That Describes their Relationship",
              "defaultValue": "fa-sparkles",
              "original": "&FA Icon That Describes their Relationship \\ text \\ fa-sparkles&",
              "indices": [
                46418,
                46481
              ]
            },
            "value": "fa-sparkles"
          },
          "[/fa][/div]&end\r\n                            [/div]\r\n                            [div=display: block;\r\n                            border-radius: 50%;\r\n                            z-index: 2;\r\n                            margin-left: 13px;\r\n                            margin-top: -10px;\r\n                            aspect-ratio: 1;\r\n                            width: 20px;\r\n                            background: var(--color1);]\r\n                              .\r\n                            [/div]\r\n                            [div=display: block;\r\n                            border-radius: 50%;\r\n                            z-index: 2;\r\n                            aspect-ratio: 1;\r\n                            width: 13px;\r\n                            background: var(--color1);\r\n                            margin-bottom: 3px;]\r\n                              .\r\n                            [/div]\r\n                          [/div]\r\n                        [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            47452,
            47456
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        47457,
        47461
      ]
    }
  },
  "\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: flex; /* notifications */\r\n                    flex-flow: column nowrap;\r\n                    align-items: stretch;\r\n                    justify-content: flex-start;\r\n                    padding: var(--sectionpadd);\r\n                    gap: 5px;\r\n                    position: relative;\r\n                    z-index: 1;\r\n                    font-size: .95rem;]\r\n                      [div=flex; 0 0 auto;\r\n                      font-family: var(--accentfont);\r\n                      margin-right: 20px;\r\n                      text-transform: uppercase;\r\n                      text-align: right;\r\n                      font-size: .95em;]\r\n                        ",
  {
    "type": "group",
    "description": "Extra Information",
    "markerStart": {
      "type": "group",
      "description": "Extra Information",
      "original": "&Extra Information \\ group&",
      "repeat": false,
      "indices": [
        48219,
        48245
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "text",
        "description": "Section Title",
        "marker": {
          "type": "text",
          "description": "Section Title",
          "defaultValue": "notifications",
          "original": "&Section Title \\ text \\ notifications&",
          "indices": [
            48246,
            48283
          ]
        },
        "value": "notifications"
      },
      "\r\n                      [/div]\r\n                      ",
      {
        "type": "group",
        "description": "Info Listing",
        "markerStart": {
          "type": "group",
          "description": "Info Listing",
          "original": "&Info Listing \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            48338,
            48368
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 0 auto;\r\n                      padding: 1.85rem calc(2rem + 2%);\r\n                      border-radius: var(--bdrad);\r\n                      overflow: hidden;\r\n                      position: relative;\r\n                      z-index: 0;]\r\n                        [div=position: absolute;\r\n                        z-index: 0;\r\n                        top: 0px;\r\n                        left: 0px;\r\n                        height: 100%;\r\n                        width: 100%;\r\n                        background: var(--points) repeat center center/auto;\r\n                        opacity: .25;]\r\n                          .\r\n                        [/div]\r\n                        [div=display: block;\r\n                        position: relative;\r\n                        z-index: 1;]\r\n                          ",
          {
            "type": "content",
            "description": "Information goes here",
            "marker": {
              "type": "content",
              "description": "Information goes here",
              "original": "&Information goes here \\ content&",
              "indices": [
                49189,
                49221
              ]
            }
          },
          "\r\n                        [/div]\r\n                      [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            49284,
            49288
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        49289,
        49293
      ]
    }
  },
  "\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n              [/div]\r\n            [/div]\r\n          [/nobr]{/slide}\r\n        [/accordion]\r\n      [/div]\r\n    [/div]\r\n  [/div]\r\n[/nobr]"
]

[]

beepbeep.template 1.0

By glucoseguardian

Initial Variables

Speech Bubble + Border Colors

Boxed Area BG Color

Name on Front, certain accents

Background Color

Gradient Color Outer

Gradient Color Inner

Text Color

Front Images

Large 3x4 Image

Small 1x1 Icon (01)

Small 1x1 Icon (02)

Small 1x1 Icon (03)

Small 1x1 Icon (04)

Content Images

Landscape Image

Image @ About

Image @ Timeline

Relationship Bars

Bar 01

Bar 02

Bar 03

Front Area

Role or Alias

App Name

Status Message

Introduction

Character Name

Age

Character Summary

Boxed Area (any purpose)

Content Section

Section Title

Traits

Trait

Content Section Body Text

Preferences

Likes Content

Disikes Content

Timeline

Timestamp or Info

Status Message

Timeline Segment

Segment Content

Relationships Section

Section Title

Person

Relationship Bar 01

Maximum: 100

Relationship Bar 02

Maximum: 100

Relationship Bar 03

Maximum: 100

Character Icon URL

Short Quip About Character or Last Message Sent

Additional Context

FA Icon That Describes their Relationship

Extra Information

Section Title

Info Listing

Information goes here

Output