Input Template

[nobr]
[div=
  width: 100%;
  position: relative;
  overflow: hidden;
  font-size: initial;
  line-height: initial;]
  [comment]
    Designed and coded by [USER=20950]@Nano[/USER].

Please do not remove the credits or claim the code as your own work.

If you found this code outside of my public workshop, please don't use it.
    I'd greatly appreciate it if you used the version of the code in that thread.

[font=Poppins]sans-serif[/font]
    [font=Hind]serif[/font]
  [/comment]
  [div=
  /* <--------------------------------- general accents ---------------------------------> */

&CS Colors \ group&
  /* colors */
  --Color01: &accent color 1 - dark pink+red in the original \ text&;
  --Color02: &accent color 2 - green in the original \ text&;
  --bgColor: &background color \ text&;
  --textColor: &text color \ text&;
  --White: &white in the original (best to keep as is) \ text \ #fefefe&;
  --Transparent: rgba(255, 255, 255, 0.3); /* must be rbga */
  --TransparentBorder: rgba(255, 255, 255, 0.4); /* rgba */
  --Blur: 4px;
&end&

/* fonts */
  --HeaderFont: 'Poppins', san-serif;
  --BodyFont: 'Hind', serif;

--LinkSize: .9em; /* font size of link text */
  --HeaderSize: 1.2em; /* font size of rp title */
  --SubheaderSize: .9em; /* font size of the section headers */
  --RoleSize: 3em; /* font size of the titles of each role within role images */
  --BodySize: .9em; /* font size of body text */

--BodyLineHeight: 140%;

/* <--------------------------------- images ---------------------------------> */

&Character Images \ group&
  /* character */
  --mainIMG: url(&URL for main image \ text&) left center/cover no-repeat;
  --BasicIcon: url(&profile icon \ text&) center/cover no-repeat;
  --Extra01: url(&extra image 1 \ text&) center/cover no-repeat;
  --Extra02: url(&extra image 2 \ text&) center/cover no-repeat;
&end&

/* <--------------------------------- shell (don't touch) ---------------------------------> */

padding: 100px 0 140px;
  width: 100%;
  min-width: 300px;
  background: var(--bgColor);]
    [div=/* code wrap */
    margin: 0 auto;
    max-width: 800px;
    width: 100%;
    position: relative;]
      [comment] --- start of role title --- [/comment]
      [div=/* wrapper */
      margin-left: 25px;
      width: calc(100% - 50px);
      overflow: hidden;]
        [div=/* song title */
        padding-left: 2px;
        width: fit-content;
        font-family: var(--HeaderFont);
        font-size: 100px;
        line-height: 100%;
        color: var(--bgColor);
        font-weight: 700;
        text-align: right;
        text-transform: uppercase;
        white-space: nowrap;
        text-shadow: -1px -1px 0 var(--White), 1px -1px 0 var(--White), -1px 1px 0 var(--White), 1px 1px 0 var(--White);
        position: relative;
        right: 5px;
        z-index: 2;]
          &name of role (decorative) \ text&
        [/div]
      [/div]
      [comment] --- end of role title --- [/comment]
      [comment] --- start of main image box --- [/comment]
      [div=/* main screen */
      box-sizing: border-box;
      border-radius: 30px;
      border: 16px solid var(--Color01);
      width: 100%;
      height: 400px;
      background: var(--mainIMG);
      position: relative;
      top: -30px;
      z-index: 2;
      pointer-events: none;]
      [/div]
      [comment] --- end of main image box --- [/comment]
      [comment] --- start of tab covers --- [/comment]
      [div=/* tab cover base */
      box-sizing: border-box;
      border-radius: 50px;
      border: 5px solid var(--Color02);
      padding: 15px 0;
      width: 50px;
      background: var(--White);
      font-family: var(--BodyFont);
      font-size: 18px;
      line-height: 100%;
      color: var(--Color02);
      text-align: center;
      position: absolute;
      top: 115px;
      left: -17px;
      z-index: 3;
      pointer-events: none;]
        [div=/* tab cover icon 01 */
        margin-top: 0;]
          [fa]fas fa-house[/fa]
        [/div]
        [div=/* tab cover icon 02 */
        margin-top: 15px;]
          [fa]fas fa-pen-field[/fa]
        [/div]
        [div=/* tab cover icon 03 */
        margin-top: 15px;]
          [fa]fas fa-heart[/fa]
        [/div]
        [div=/* tab cover icon 04 */
        margin-top: 15px;]
          [fa]fas fa-star[/fa]
        [/div]
      [/div]
      [div=/* junk */
      width: 200%;
      height: 200px;
      position: absolute;
      top: 100px;
      left: 25px;
      z-index: 1;]
      [/div]
      [div=/* junk */
      background: var(--bgColor);
      position: absolute;
      pointer-events: none;
      z-index: 1;
      inset: -100%;]
      [/div]
      [comment] --- end of tab covers --- [/comment]
      [comment] --- start of tabs --- [/comment]
      [div=/* tab cut off */
      width: 100%;
      height: 600px;
      position: absolute;
      top: -30px;
      left: 0;]
        [div=/* tab wrapper */
        width: 100%;
        line-height: 30px;
        position: relative;
        top: 160px;
        left: -20px;]
          [tabs]

[tab=0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101]
&Tab 1 Contents \ group&
              [div=/* scrollbox - outer */
              width: calc(100% - 60px);
              height: 600px;
              overflow: hidden;
              position: absolute;
              top: -160px;
              left: 50px;
              z-index: 3;
              line-height: initial;]
                [div=/* scrollbox - inner */
                padding-right: 50px;
                width: 100%;
                height: 600px;
                overflow-y: scroll;
                overflow-x: hidden;]
                  [comment] --- start of basic information section --- [/comment]
                  [div=/* box wrapper */
                  display: flex;
                  justify-content: right;
                  position: relative;]
                    [div=/* box wrapper */
                    width: 100%;
                    max-width: 450px;
                    position: relative;]
                      [div=/* transparent border */
                      box-sizing: border-box;
                      padding: 10px;
                      border-radius: 20px;
                      border: 1px solid var(--TransparentBorder);
                      -webkit-backdrop-filter: blur(var(--Blur));
                      backdrop-filter: blur(var(--Blur));
                      background: var(--Transparent);
                      position: relative;]
                        [div=/* inner box */
                        box-sizing: border-box;
                        padding: 15px;
                        border-radius: 17px;
                        width: 100%;
                        background: var(--White);]
                          [div=/* flexbox */
                          display: flex;
                          justify-content: center;
                          flex-flow: row wrap;
                          justify-content: center;
                          width: calc(100% + 10px);
                          margin-left: -10px;]
                            [comment] --- start of profile icon --- [/comment]
                            [div=/* flex LEFT */
                            margin-left: 10px;
                            flex: 1;
                            width: 100%;
                            min-width: 125px;]
                              [div=/* profile icon */
                              border-radius: 15px;
                              padding-top: 100%;
                              width: 100%;
                              background: var(--BasicIcon);]
                              [/div]
                            [/div]
                            [comment] --- end of profile icon --- [/comment]
&Basic Information \ group&
                            [comment] --- start of basic information --- [/comment]
                            [div=/* flex RIGHT */
                            margin-left: 10px;
                            flex: 2;
                            width: 100%;
                            min-width: 200px;
                            font-family: var(--BodyFont);
                            font-size: var(--BodySize);
                            color: var(--textColor);
                            line-height: 100%;]
                              [comment] --- start of question/answer --- [/comment]
                              [div=/* Q/A wrapper */
                              margin-top: 5px;
                              width: 100%;]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                border-radius: 5px;
                                padding: 4px 5px 3px;
                                background: var(--Color01);
                                color: var(--White);
                                text-transform: lowercase;]
                                  Name
                                [/div]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                padding: 4px 5px 3px;
                                text-transform: lowercase;]
                                  &full name \ text&
                                [/div]
                              [/div]
                              [comment] --- end of question/answer --- [/comment]
                              [comment] --- start of question/answer --- [/comment]
                              [div=/* Q/A wrapper */
                              margin-top: 5px;
                              width: 100%;]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                border-radius: 5px;
                                padding: 4px 5px 3px;
                                background: var(--Color01);
                                color: var(--White);
                                text-transform: lowercase;]
                                  Role
                                [/div]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                padding: 4px 5px 3px;
                                text-transform: lowercase;]
                                  &role \ text&
                                [/div]
                              [/div]
                              [comment] --- end of question/answer --- [/comment]
                              [comment] --- start of question/answer --- [/comment]
                              [div=/* Q/A wrapper */
                              margin-top: 5px;
                              width: 100%;]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                border-radius: 5px;
                                padding: 4px 5px 3px;
                                background: var(--Color01);
                                color: var(--White);
                                text-transform: lowercase;]
                                  Gender
                                [/div]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                padding: 4px 5px 3px;
                                text-transform: lowercase;]
                                  &gender \ text&
                                [/div]
                              [/div]
                              [comment] --- end of question/answer --- [/comment]
                              [comment] --- start of question/answer --- [/comment]
                              [div=/* Q/A wrapper */
                              margin-top: 5px;
                              width: 100%;]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                border-radius: 5px;
                                padding: 4px 5px 3px;
                                background: var(--Color01);
                                color: var(--White);
                                text-transform: lowercase;]
                                  Age
                                [/div]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                padding: 4px 5px 3px;
                                text-transform: lowercase;]
                                  &age \ number \   \ 22 \ 25&
                                [/div]
                              [/div]
                              [comment] --- end of question/answer --- [/comment]
                              [comment] --- start of question/answer --- [/comment]
                              [div=/* Q/A wrapper */
                              margin-top: 5px;
                              width: 100%;]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                border-radius: 5px;
                                padding: 4px 5px 3px;
                                background: var(--Color01);
                                color: var(--White);
                                text-transform: lowercase;]
                                  Birthday
                                [/div]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                padding: 4px 5px 3px;
                                text-transform: lowercase;]
                                  &date of birth \ text&
                                [/div]
                              [/div]
                              [comment] --- end of question/answer --- [/comment]
                              [comment] --- start of question/answer --- [/comment]
                              [div=/* Q/A wrapper */
                              margin-top: 5px;
                              width: 100%;]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                border-radius: 5px;
                                padding: 4px 5px 3px;
                                background: var(--Color01);
                                color: var(--White);
                                text-transform: lowercase;]
                                  Faceclaim
                                [/div]
                                [div=/* Q */
                                display: inline-block;
                                box-sizing: border-box;
                                padding: 4px 5px 3px;
                                text-transform: lowercase;]
                                  &faceclaim \ text&
                                [/div]
                              [/div]
                              [comment] --- end of question/answer --- [/comment]
                            [/div]
                            [comment] --- end of basic information --- [/comment]
                          [/div]
                        [/div]
                      [/div]
                    [/div]
                  [/div]
                  [comment] --- end of basic information section --- [/comment]
                  [comment] --- start of appearance tags --- [/comment]
                  [div=/* wrapper */
                  display: flex;
                  justify-content: right;
                  position: relative;]
                    [div=/* wrapper */
                    margin-top: 15px;
                    margin-right: 15px;
                    width: calc(100% - 15px);
                    max-width: 400px;
                    font-family: var(--BodyFont);
                    font-size: var(--BodySize);
                    line-height: 100%;
                    font-weight: 700;
                    color: var(--White);
                    text-transform: lowercase;
                    position: relative;]
                      [comment] --- start of appearance tag --- [/comment]
                      [div=/* appearance tag */
                      position: relative;]
                        [div=/* speech bubble main */
                        box-sizing: border-box;
                        border: 2px solid var(--White);
                        border-radius: 5px;
                        padding: 6px 12px;
                        width: fit-content;
                        background: var(--Color02);
                        font-size: var(--BodySize);
                        position: relative;
                        float: right;]
                          #&hair color \ text&
                        [/div]
                        [div=/* speech bubble corner */
                        margin-top: -2px;
                        width: 15px;
                        height: 12px;
                        background: var(--White);
                        clip-path: polygon(0 0, 0% 100%, 100% 0);
                        position: relative;
                        right: 10px;
                        float: right;
                        clear: right;]
                          [div=/* speech bubble corner inner */
                          width: 11px;
                          height: 8px;
                          background: var(--Color02);
                          clip-path: polygon(0 0, 0% 100%, 100% 0);
                          position: relative;
                          left: 2px;]
                          [/div]
                        [/div]
                      [/div]
                      [comment] --- end of appearance tag --- [/comment]
                      [div=/* divider */
                      height: 7px;
                      clear: right;]
                      [/div]
                      [comment] --- start of appearance tag --- [/comment]
                      [div=/* appearance tag */
                      position: relative;
                      clear: right;]
                        [div=/* speech bubble main */
                        box-sizing: border-box;
                        border: 2px solid var(--White);
                        border-radius: 5px;
                        padding: 6px 12px;
                        width: fit-content;
                        background: var(--Color02);
                        font-size: var(--BodySize);
                        position: relative;
                        float: right;]
                          #&eye color \ text&
                        [/div]
                        [div=/* speech bubble corner */
                        margin-top: -2px;
                        width: 15px;
                        height: 12px;
                        background: var(--White);
                        clip-path: polygon(0 0, 0% 100%, 100% 0);
                        position: relative;
                        right: 10px;
                        float: right;
                        clear: right;]
                          [div=/* speech bubble corner inner */
                          width: 11px;
                          height: 8px;
                          background: var(--Color02);
                          clip-path: polygon(0 0, 0% 100%, 100% 0);
                          position: relative;
                          left: 2px;]
                          [/div]
                        [/div]
                      [/div]
                      [comment] --- end of appearance tag --- [/comment]
                      [div=/* divider */
                      height: 7px;
                      clear: right;]
                      [/div]
                      [comment] --- start of appearance tag --- [/comment]
                      [div=/* appearance tag */
                      position: relative;
                      clear: right;]
                        [div=/* speech bubble main */
                        box-sizing: border-box;
                        border: 2px solid var(--White);
                        border-radius: 5px;
                        padding: 6px 12px;
                        width: fit-content;
                        background: var(--Color02);
                        font-size: var(--BodySize);
                        position: relative;
                        float: right;]
                          #&height \ text&
                        [/div]
&end&
                        [div=/* speech bubble corner */
                        margin-top: -2px;
                        width: 15px;
                        height: 12px;
                        background: var(--White);
                        clip-path: polygon(0 0, 0% 100%, 100% 0);
                        position: relative;
                        right: 10px;
                        float: right;
                        clear: right;]
                          [div=/* speech bubble corner inner */
                          width: 11px;
                          height: 8px;
                          background: var(--Color02);
                          clip-path: polygon(0 0, 0% 100%, 100% 0);
                          position: relative;
                          left: 2px;]
                          [/div]
                        [/div]
                      [/div]
                      [comment] --- end of appearance tag --- [/comment]
                    [/div]
                  [/div]
                  [comment] --- end of appearance tags --- [/comment]
                  [comment] --- start of personality section --- [/comment]
                  [div=/* box wrapper */
                  margin-top: 50px;
                  width: 100%;
                  max-width: 550px;
                  position: relative;]
                    [div=/* transparent border */
                    box-sizing: border-box;
                    padding: 10px;
                    border-radius: 20px;
                    border: 1px solid var(--TransparentBorder);
                    -webkit-backdrop-filter: blur(var(--Blur));
                    backdrop-filter: blur(var(--Blur));
                    background: var(--Transparent);
                    position: relative;]
                      [comment] --- start of section header speech bubble --- [/comment]
                      [div=/* nameplate */
                      position: absolute;
                      top: -5px;
                      right: 30px;
                      font-size: var(--BodySize);]
                        [div=/* speech bubble main */
                        box-sizing: border-box;
                        border: 2px solid var(--White);
                        border-radius: 5px;
                        padding: 6px 12px;
                        width: fit-content;
                        background: var(--Color02);
                        font-family: var(--HeaderFont);
                        font-size: var(--BodySize);
                        line-height: 100%;
                        color: var(--White);
                        text-align: center;
                        text-transform: capitalize;
                        position: relative;
                        float: right;]
                          Personality
                        [/div]
                        [div=/* speech bubble corner */
                        margin-top: -2px;
                        width: 12px;
                        height: 9px;
                        background: var(--White);
                        clip-path: polygon(0 0, 0% 100%, 100% 0);
                        position: relative;
                        right: 7px;
                        float: right;
                        clear: right;]
                          [div=/* speech bubble corner inner */
                          width: 8px;
                          height: 5px;
                          background: var(--Color02);
                          clip-path: polygon(0 0, 0% 100%, 100% 0);
                          position: relative;
                          left: 2px;]
                          [/div]
                        [/div]
                      [/div]
                      [comment] --- end of section header speech bubble --- [/comment]
                      [comment] --- start of content text --- [/comment]
                      [div=/* text box */
                      box-sizing: border-box;
                      padding: 20px;
                      border-radius: 17px;
                      width: 100%;
                      background: var(--White);
                      font-family: var(--BodyFont);
                      font-size: var(--BodySize);
                      line-height: var(--BodyLineHeight);
                      color: var(--textColor);
                      text-align: justify;]
                        [div=white-space: pre-line;]&Personality Description \ content&[/div]
                      [/div]
                      [comment] --- end of content text --- [/comment]
                    [/div]
                  [/div]
                  [comment] --- end of personality section --- [/comment]
                [/div]
              [/div]
              [comment] --- start of tab cover --- [/comment]
              [div=/* wrapper */
              background: var(--White);
              font-family: var(--BodyFont);
              font-size: 18px;
              line-height: 100%;
              color: var(--Color01);
              position: absolute;
              top: 5px;
              left: 18px;
              z-index: 3;]
                [fa]fas fa-home[/fa]
              [/div]
              [comment] --- end of tab cover --- [/comment]
&end&
            [/tab]

[tab=0202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202]
&Tab 2 Contents \ group&
              [div=/* scrollbox - outer */
              width: calc(100% - 60px);
              height: 600px;
              overflow: hidden;
              position: absolute;
              top: -160px;
              left: 50px;
              z-index: 3;]
                [div=/* scrollbox - inner */
                padding-right: 50px;
                width: 100%;
                height: 600px;
                overflow-y: scroll;
                overflow-x: hidden;]
                  [comment] --- start of quote section --- [/comment]
                  [div=/* wrapper */
                  margin-top: 55px;
                  max-width: 500px;
                  width: calc(100% - 8px);
                  position: relative;]
                    [div=/* speech bubble main */
                    box-sizing: border-box;
                    border-radius: 15px;
                    border: 1px solid var(--Color02);
                    padding: 5px 10px;
                    width: fit-content;
                    background: var(--White);
                    font-family: var(--BodyFont);
                    font-size: var(--BodySize);
                    line-height: var(--BodyLineHeight);
                    color: var(--Color01);
                    font-weight: 700;
                    text-align: justify;
                    filter: drop-shadow(8px 8px 0 var(--Color02));]
                      &quote bubble in backstory tab \ text&
                    [/div]
                    [div=/* circle 1 */
                    margin-top: 13px;
                    margin-left: 25px;
                    box-sizing: border-box;
                    border-radius: 50%;
                    border: 1px solid var(--Color02);
                    width: 18px;
                    height: 18px;
                    background: var(--White);
                    filter: drop-shadow(4px 4px 0 var(--Color02));]
                    [/div]
                    [div=/* circle 2 */
                    margin-top: 13px;
                    margin-left: 35px;
                    box-sizing: border-box;
                    border-radius: 50%;
                    border: 1px solid var(--Color02);
                    width: 12px;
                    height: 12px;
                    background: var(--White);
                    filter: drop-shadow(4px 4px 0 var(--Color02));]
                    [/div]
                    [div=/* circle 3 */
                    margin-top: 13px;
                    margin-left: 55px;
                    box-sizing: border-box;
                    border-radius: 50%;
                    border: 1px solid var(--Color02);
                    width: 6px;
                    height: 6px;
                    background: var(--White);
                    filter: drop-shadow(4px 4px 0 var(--Color02));]
                    [/div]
                  [/div]
                  [comment] --- end of quote section --- [/comment]
                  [comment] --- start of backstory section --- [/comment]
                  [div=/* stick to right */
                  margin-top: 150px;
                  display: flex;
                  justify-content: right;]
                    [div=/* box wrapper */
                    width: 100%;
                    max-width: 600px;
                    position: relative;]
                      [div=/* transparent border */
                      box-sizing: border-box;
                      padding: 10px;
                      border-radius: 20px;
                      border: 1px solid var(--TransparentBorder);
                      -webkit-backdrop-filter: blur(var(--Blur));
                      backdrop-filter: blur(var(--Blur));
                      background: var(--Transparent);
                      position: relative;]
                        [comment] --- start of section header speech bubble --- [/comment]
                        [div=/* nameplate */
                        position: absolute;
                        top: -5px;
                        right: 30px;
                        font-size: var(--BodySize);]
                          [div=/* speech bubble main */
                          box-sizing: border-box;
                          border: 2px solid var(--White);
                          border-radius: 5px;
                          padding: 6px 12px;
                          width: fit-content;
                          background: var(--Color02);
                          font-family: var(--HeaderFont);
                          font-size: var(--BodySize);
                          line-height: 100%;
                          color: var(--White);
                          text-align: center;
                          text-transform: capitalize;
                          position: relative;
                          float: right;]
                            Backstory
                          [/div]
                          [div=/* speech bubble corner */
                          margin-top: -2px;
                          width: 12px;
                          height: 9px;
                          background: var(--White);
                          clip-path: polygon(0 0, 0% 100%, 100% 0);
                          position: relative;
                          right: 7px;
                          float: right;
                          clear: right;]
                            [div=/* speech bubble corner inner */
                            width: 8px;
                            height: 5px;
                            background: var(--Color02);
                            clip-path: polygon(0 0, 0% 100%, 100% 0);
                            position: relative;
                            left: 2px;]
                            [/div]
                          [/div]
                        [/div]
                        [comment] --- end of section header speech bubble --- [/comment]
                        [comment] --- start of content text --- [/comment]
                        [div=/* text box */
                        box-sizing: border-box;
                        padding: 20px;
                        border-radius: 17px;
                        width: 100%;
                        background: var(--White);
                        font-family: var(--BodyFont);
                        font-size: var(--BodySize);
                        line-height: var(--BodyLineHeight);
                        color: var(--textColor);
                        text-align: justify;]
                          [div=white-space: pre-line;]&backstory description \ content&[/div]
                        [/div]
                        [comment] --- end of content text --- [/comment]
                      [/div]
                    [/div]
                  [/div]
                  [comment] --- end of backstory section --- [/comment]
                [/div]
              [/div]
              [comment] --- start of tab cover --- [/comment]
              [div=/* wrapper */
              background: var(--White);
              font-family: var(--BodyFont);
              font-size: 18px;
              line-height: 100%;
              color: var(--Color01);
              position: absolute;
              top: 40px;
              left: 17px;
              z-index: 3;]
                [fa]fas fa-pen-field[/fa]
              [/div]
              [comment] --- end of tab cover --- [/comment]
&end&
            [/tab]

[tab=0303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303]
&Tab 3 Contents \ group&
              [div=/* scrollbox - outer */
              width: calc(100% - 60px);
              height: 600px;
              overflow: hidden;
              position: absolute;
              top: -160px;
              left: 50px;
              z-index: 3;]
                [div=/* scrollbox - inner */
                padding-right: 50px;
                width: 100%;
                height: 600px;
                overflow-y: scroll;
                overflow-x: hidden;]
                  [comment] --- start of relationships section --- [/comment]
                  [div=/* wrapper */
                  display: flex;
                  flex-direction: column;
                  align-items: end;
                  width: 100%;]
&Character Relationship (repeat as many as needed) \ group \ repeat&
                    [comment] --- start of relationship box --- [/comment]
                    [div=/* wrapper */
                    display: flex;
                    flex-flow: row-reverse wrap;
                    justify-content: center;
                    margin-top: 25px;
                    max-width: 600px;
                    width: 100%;
                    position: relative;]
                      [div=/* flex RIGHT */
                      display: flex;
                      align-items: center;
                      margin-left: -20px;
                      flex: 2;
                      width: 100%;
                      min-width: 150px;
                      position: relative;
                      z-index: 5;]
                        [div=/* proficon */
                        box-sizing: border-box;
                        border-radius: 20px;
                        border: 10px solid var(--Color02);
                        width: 100%;
                        padding-top: calc(100% - 20px);
                        background: url(&URL for relationship image \ text&) center/cover no-repeat;;
                        position: relative;]
                          [comment] --- start of rs character name speech bubble --- [/comment]
                          [div=/* nameplate */
                          position: absolute;
                          top: -20px;
                          right: 3px;
                          font-size: var(--BodySize);]
                            [div=/* speech bubble main */
                            box-sizing: border-box;
                            border: 2px solid var(--White);
                            border-radius: 5px;
                            padding: 5px 10px;
                            width: fit-content;
                            background: var(--Color01);
                            font-family: var(--HeaderFont);
                            font-size: var(--BodySize);
                            line-height: 100%;
                            color: var(--White);
                            text-align: center;
                            text-transform: capitalize;
                            position: relative;
                            float: right;]
                              &character name \ text&
                            [/div]
                            [div=/* speech bubble corner */
                            margin-top: -2px;
                            width: 12px;
                            height: 9px;
                            background: var(--White);
                            clip-path: polygon(0 0, 0% 100%, 100% 0);
                            position: relative;
                            right: 7px;
                            float: right;
                            clear: right;]
                              [div=/* speech bubble corner inner */
                              width: 8px;
                              height: 5px;
                              background: var(--Color01);
                              clip-path: polygon(0 0, 0% 100%, 100% 0);
                              position: relative;
                              left: 2px;]
                              [/div]
                            [/div]
                          [/div]
                          [comment] --- end of rs character name speech bubble --- [/comment]
                          [comment] --- start of rs symbol + cs link --- [/comment]
                          [div=/* wrapper */
                          display: flex;
                          flex-flow: row nowrap;
                          width: 100%;
                          position: absolute;
                          bottom: -19px;
                          left: 3px;]
                            [div=/* rs symbol */
                            box-sizing: border-box;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-top: 2px;
                            border-radius: 50%;
                            border: 2px solid var(--White);
                            background: var(--Color01);
                            line-height: 100%;
                            width: 28px;
                            height: 28px;
                            font-family: var(--BodyFont);
                            font-size: 12px;
                            color: var(--White);
                            font-weight: 700;]
                              [fa]fas fa-heart[/fa]
                            [/div]
                            [div=/* cs link symbol */
                            box-sizing: border-box;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-left: 4px;
                            padding-top: 2px;
                            border-radius: 50%;
                            border: 2px solid var(--White);
                            background: var(--Color01);
                            line-height: 100%;
                            width: 28px;
                            height: 28px;
                            font-family: var(--BodyFont);
                            font-size: 10px;
                            color: var(--White);
                            font-weight: 700;
                            text-transform: uppercase;
                            position: relative;]
                              [div=position: absolute;]
                                CS
                              [/div]
                              [URL=&link to character sheet&][div=/* clicker */ position: absolute; inset: 0;][/div][/URL]
                            [/div]
                          [/div]
                          [comment] --- end of rs symbol + cs link --- [/comment]
                        [/div]
                      [/div]
                      [div=/* flex-LEFT - transparent border */
                      box-sizing: border-box;
                      padding: 10px;
                      border-radius: 20px;
                      border: 1px solid var(--TransparentBorder);
                      -webkit-backdrop-filter: blur(var(--Blur));
                      backdrop-filter: blur(var(--Blur));
                      flex: 5;
                      min-width: 200px;
                      background: var(--Transparent);
                      position: relative;]
                        [comment] --- start of content text --- [/comment]
                        [div=/* text box */
                        box-sizing: border-box;
                        padding: 20px;
                        border-radius: 17px;
                        width: 100%;
                        height: 210px;
                        background: var(--White);
                        font-family: var(--BodyFont);
                        font-size: var(--BodySize);
                        line-height: var(--BodyLineHeight);
                        color: var(--textColor);
                        text-align: justify;
                        overflow: hidden;]
                          [div=
                          box-sizing: content-box;
                          padding-right: 50px;
                          width: 100%;
                          height: 170px;
                          overflow-y: scroll;
                          overflow-x: hidden;]
                            [div=white-space: pre-line;]&character relationship description \ content&[/div]
                          [/div]
                        [/div]
                        [comment] --- end of content text --- [/comment]
                      [/div]
                    [/div]
                    [comment] --- end of relationship box --- [/comment]
&end&
                  [/div]
                  [comment] --- end of relationships section --- [/comment]
                [/div]
              [/div]
              [comment] --- start of tab cover --- [/comment]
              [div=/* wrapper */
              background: var(--White);
              font-family: var(--BodyFont);
              font-size: 18px;
              line-height: 100%;
              color: var(--Color01);
              position: absolute;
              top: 76px;
              left: 19px;
              z-index: 3;]
                [fa]fas fa-heart[/fa]
              [/div]
              [comment] --- end of tab cover --- [/comment]
&end&
            [/tab]

[tab=0404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404]
&Tab 4 Contents \ group&
              [div=/* scrollbox - outer */
              width: calc(100% - 60px);
              height: 600px;
              overflow: hidden;
              position: absolute;
              top: -160px;
              left: 50px;
              z-index: 3;]
                [div=/* scrollbox - inner */
                padding-right: 50px;
                width: 100%;
                height: 600px;
                overflow-y: scroll;
                overflow-x: hidden;]
                  [comment] --- start of image gallery --- [/comment]
                  [div=/* wrapper */
                  box-sizing: border-box;
                  display: flex;
                  justify-content: end;
                  width: 100%;]
                    [div=/* for spacing purposes - also affects size of images */
                    max-width: 200px;
                    width: 60%;
                    min-width: 150px;
                    position: relative;]
                      [div=/* transparent border */
                      box-sizing: border-box;
                      margin-bottom: 20%;
                      padding: 10px;
                      border-radius: 20px;
                      border: 1px solid var(--TransparentBorder);
                      width: 100%;
                      -webkit-backdrop-filter: blur(var(--Blur));
                      backdrop-filter: blur(var(--Blur));
                      background: var(--Transparent);
                      position: relative;]
                        [div=/* image 1 */
                        border-radius: 15px;
                        width: 100%;
                        padding-top: calc(100%*(2/3));
                        background: var(--Extra01);]
                          [div=/* transparent border */
                          box-sizing: border-box;
                          padding: 10px;
                          border-radius: 20px;
                          border: 1px solid var(--TransparentBorder);
                          width: 100%;
                          -webkit-backdrop-filter: blur(var(--Blur));
                          backdrop-filter: blur(var(--Blur));
                          background: var(--Transparent);
                          position: absolute;
                          top: 50%;
                          left: -50%;]
                            [div=/* image 2 */
                            border-radius: 15px;
                            width: 100%;
                            padding-top: calc(100%*(2/3));
                            background: var(--Extra02);]
                            [/div]
                          [/div]
                        [/div]
                      [/div]
                    [/div]
                  [/div]
                  [comment] --- end of image gallery --- [/comment]
                  [comment] --- start of quote section --- [/comment]
                  [div=/* wrapper */
                  display: flex;
                  flex-direction: column;
                  align-items: end;
                  margin-right: 8px;
                  width: calc(100% - 8px);
                  position: relative;]
                    [div=/* circle 1 */
                    margin-bottom: 13px;
                    margin-right: 55px;
                    box-sizing: border-box;
                    border-radius: 50%;
                    border: 1px solid var(--Color02);
                    width: 6px;
                    height: 6px;
                    background: var(--White);
                    filter: drop-shadow(4px 4px 0 var(--Color02));]
                    [/div]
                    [div=/* circle 2 */
                    margin-bottom: 13px;
                    margin-right: 35px;
                    box-sizing: border-box;
                    border-radius: 50%;
                    border: 1px solid var(--Color02);
                    width: 12px;
                    height: 12px;
                    background: var(--White);
                    filter: drop-shadow(4px 4px 0 var(--Color02));]
                    [/div]
                    [div=/* circle 3 */
                    margin-bottom: 13px;
                    margin-right: 25px;
                    box-sizing: border-box;
                    border-radius: 50%;
                    border: 1px solid var(--Color02);
                    width: 18px;
                    height: 18px;
                    background: var(--White);
                    filter: drop-shadow(4px 4px 0 var(--Color02));]
                    [/div]
                    [div=/* speech bubble main */
                    box-sizing: border-box;
                    border-radius: 15px;
                    border: 1px solid var(--Color02);
                    padding: 5px 10px;
                    max-width: 500px;
                    width: fit-content;
                    background: var(--White);
                    font-family: var(--BodyFont);
                    font-size: var(--BodySize);
                    line-height: var(--BodyLineHeight);
                    color: var(--Color01);
                    font-weight: 700;
                    text-align: justify;
                    filter: drop-shadow(8px 8px 0 var(--Color02));]
                      &extra+notes tab quote \ text&
                    [/div]
                  [/div]
                  [comment] --- end of quote section --- [/comment]
                  [comment] --- start of notes section --- [/comment]
                  [div=/* box wrapper */
                  margin-top: 100px;
                  width: 100%;
                  max-width: 550px;
                  position: relative;]
                    [div=/* transparent border */
                    box-sizing: border-box;
                    padding: 10px;
                    border-radius: 20px;
                    border: 1px solid var(--TransparentBorder);
                    -webkit-backdrop-filter: blur(var(--Blur));
                    backdrop-filter: blur(var(--Blur));
                    background: var(--Transparent);
                    position: relative;]
                      [comment] --- start of section header speech bubble --- [/comment]
                      [div=/* nameplate */
                      position: absolute;
                      top: -5px;
                      right: 30px;
                      font-size: var(--BodySize);]
                        [div=/* speech bubble main */
                        box-sizing: border-box;
                        border: 2px solid var(--White);
                        border-radius: 5px;
                        padding: 6px 12px;
                        width: fit-content;
                        background: var(--Color02);
                        font-family: var(--HeaderFont);
                        font-size: var(--BodySize);
                        line-height: 100%;
                        color: var(--White);
                        text-align: center;
                        text-transform: capitalize;
                        position: relative;
                        float: right;]
                          Notes
                        [/div]
                        [div=/* speech bubble corner */
                        margin-top: -2px;
                        width: 12px;
                        height: 9px;
                        background: var(--White);
                        clip-path: polygon(0 0, 0% 100%, 100% 0);
                        position: relative;
                        right: 7px;
                        float: right;
                        clear: right;]
                          [div=/* speech bubble corner inner */
                          width: 8px;
                          height: 5px;
                          background: var(--Color02);
                          clip-path: polygon(0 0, 0% 100%, 100% 0);
                          position: relative;
                          left: 2px;]
                          [/div]
                        [/div]
                      [/div]
                      [comment] --- end of section header speech bubble --- [/comment]
                      [comment] --- start of content text --- [/comment]
                      [div=/* text box */
                      box-sizing: border-box;
                      padding: 20px 20px 20px 0;
                      border-radius: 17px;
                      width: 100%;
                      background: var(--White);
                      font-family: var(--BodyFont);
                      font-size: var(--BodySize);
                      line-height: var(--BodyLineHeight);
                      color: var(--textColor);
                      text-align: justify;]
                        [div=/* list position */
                        width: calc(100% + 5px);
                        position: relative;
                        left: -5px;]
                          [LIST=1]
&Extras+Notes (add as needed) \ group \ repeat&
                            [*] &extra+note block 1, 2, 3...etc \ content&
&end&
                          [/LIST]
                        [/div]
                      [/div]
                      [comment] --- end of content text --- [/comment]
                    [/div]
                  [/div]
                  [comment] --- end of notes section --- [/comment]
                [/div]
              [/div]
              [comment] --- start of tab cover --- [/comment]
              [div=/* wrapper */
              background: var(--White);
              font-family: var(--BodyFont);
              font-size: 18px;
              line-height: 100%;
              color: var(--Color01);
              position: absolute;
              top: 111px;
              left: 18px;
              z-index: 3;]
                [fa]fas fa-star[/fa]
              [/div]
              [comment] --- end of tab cover --- [/comment]
&end&
            [/tab]

[/tabs]
        [/div]
      [/div]
      [comment] --- end of tabs --- [/comment]
    [/div]
  [/div]
[/div]
[div=margin-top: 5px; width: 100%; font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n[div=\r\n  width: 100%;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-size: initial;\r\n  line-height: initial;]\r\n  [comment]\r\n    Designed and coded by [USER=20950]@Nano[/USER].\r\n\r\n    Please do not remove the credits or claim the code as your own work.\r\n\r\n    If you found this code outside of my public workshop, please don't use it.\r\n    I'd greatly appreciate it if you used the version of the code in that thread.\r\n\r\n    [font=Poppins]sans-serif[/font]\r\n    [font=Hind]serif[/font]\r\n  [/comment]\r\n  [div=\r\n  /* <--------------------------------- general accents ---------------------------------> */\r\n\r\n",
  {
    "type": "group",
    "description": "CS Colors",
    "markerStart": {
      "type": "group",
      "description": "CS Colors",
      "original": "&CS Colors \\ group&",
      "repeat": false,
      "indices": [
        619,
        637
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n  /* colors */\r\n  --Color01: ",
      {
        "type": "text",
        "description": "accent color 1 - dark pink+red in the original",
        "marker": {
          "type": "text",
          "description": "accent color 1 - dark pink+red in the original",
          "defaultValue": "",
          "original": "&accent color 1 - dark pink+red in the original \\ text&",
          "indices": [
            669,
            723
          ]
        }
      },
      ";\r\n  --Color02: ",
      {
        "type": "text",
        "description": "accent color 2 - green in the original",
        "marker": {
          "type": "text",
          "description": "accent color 2 - green in the original",
          "defaultValue": "",
          "original": "&accent color 2 - green in the original \\ text&",
          "indices": [
            740,
            786
          ]
        }
      },
      ";\r\n  --bgColor: ",
      {
        "type": "text",
        "description": "background color",
        "marker": {
          "type": "text",
          "description": "background color",
          "defaultValue": "",
          "original": "&background color \\ text&",
          "indices": [
            803,
            827
          ]
        }
      },
      ";\r\n  --textColor: ",
      {
        "type": "text",
        "description": "text color",
        "marker": {
          "type": "text",
          "description": "text color",
          "defaultValue": "",
          "original": "&text color \\ text&",
          "indices": [
            846,
            864
          ]
        }
      },
      ";\r\n  --White: ",
      {
        "type": "text",
        "description": "white in the original (best to keep as is)",
        "marker": {
          "type": "text",
          "description": "white in the original (best to keep as is)",
          "defaultValue": "#fefefe",
          "original": "&white in the original (best to keep as is) \\ text \\ #fefefe&",
          "indices": [
            879,
            939
          ]
        },
        "value": "#fefefe"
      },
      ";\r\n  --Transparent: rgba(255, 255, 255, 0.3); /* must be rbga */\r\n  --TransparentBorder: rgba(255, 255, 255, 0.4); /* rgba */\r\n  --Blur: 4px;\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        1083,
        1087
      ]
    }
  },
  "\r\n\r\n  /* fonts */\r\n  --HeaderFont: 'Poppins', san-serif;\r\n  --BodyFont: 'Hind', serif;\r\n\r\n  --LinkSize: .9em; /* font size of link text */\r\n  --HeaderSize: 1.2em; /* font size of rp title */\r\n  --SubheaderSize: .9em; /* font size of the section headers */\r\n  --RoleSize: 3em; /* font size of the titles of each role within role images */\r\n  --BodySize: .9em; /* font size of body text */\r\n\r\n  --BodyLineHeight: 140%;\r\n\r\n  /* <--------------------------------- images ---------------------------------> */\r\n\r\n",
  {
    "type": "group",
    "description": "Character Images",
    "markerStart": {
      "type": "group",
      "description": "Character Images",
      "original": "&Character Images \\ group&",
      "repeat": false,
      "indices": [
        1596,
        1621
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n  /* character */\r\n  --mainIMG: url(",
      {
        "type": "text",
        "description": "URL for main image",
        "marker": {
          "type": "text",
          "description": "URL for main image",
          "defaultValue": "",
          "original": "&URL for main image \\ text&",
          "indices": [
            1660,
            1686
          ]
        }
      },
      ") left center/cover no-repeat;\r\n  --BasicIcon: url(",
      {
        "type": "text",
        "description": "profile icon",
        "marker": {
          "type": "text",
          "description": "profile icon",
          "defaultValue": "",
          "original": "&profile icon \\ text&",
          "indices": [
            1738,
            1758
          ]
        }
      },
      ") center/cover no-repeat;\r\n  --Extra01: url(",
      {
        "type": "text",
        "description": "extra image 1",
        "marker": {
          "type": "text",
          "description": "extra image 1",
          "defaultValue": "",
          "original": "&extra image 1 \\ text&",
          "indices": [
            1803,
            1824
          ]
        }
      },
      ") center/cover no-repeat;\r\n  --Extra02: url(",
      {
        "type": "text",
        "description": "extra image 2",
        "marker": {
          "type": "text",
          "description": "extra image 2",
          "defaultValue": "",
          "original": "&extra image 2 \\ text&",
          "indices": [
            1869,
            1890
          ]
        }
      },
      ") center/cover no-repeat;\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        1918,
        1922
      ]
    }
  },
  "\r\n\r\n  /* <--------------------------------- shell (don't touch) ---------------------------------> */\r\n\r\n  padding: 100px 0 140px;\r\n  width: 100%;\r\n  min-width: 300px;\r\n  background: var(--bgColor);]\r\n    [div=/* code wrap */\r\n    margin: 0 auto;\r\n    max-width: 800px;\r\n    width: 100%;\r\n    position: relative;]\r\n      [comment] --- start of role title --- [/comment]\r\n      [div=/* wrapper */\r\n      margin-left: 25px;\r\n      width: calc(100% - 50px);\r\n      overflow: hidden;]\r\n        [div=/* song title */\r\n        padding-left: 2px;\r\n        width: fit-content;\r\n        font-family: var(--HeaderFont);\r\n        font-size: 100px;\r\n        line-height: 100%;\r\n        color: var(--bgColor);\r\n        font-weight: 700;\r\n        text-align: right;\r\n        text-transform: uppercase;\r\n        white-space: nowrap;\r\n        text-shadow: -1px -1px 0 var(--White), 1px -1px 0 var(--White), -1px 1px 0 var(--White), 1px 1px 0 var(--White);\r\n        position: relative;\r\n        right: 5px;\r\n        z-index: 2;]\r\n          ",
  {
    "type": "text",
    "description": "name of role (decorative)",
    "marker": {
      "type": "text",
      "description": "name of role (decorative)",
      "defaultValue": "",
      "original": "&name of role (decorative) \\ text&",
      "indices": [
        2946,
        2979
      ]
    }
  },
  "\r\n        [/div]\r\n      [/div]\r\n      [comment] --- end of role title --- [/comment]\r\n      [comment] --- start of main image box --- [/comment]\r\n      [div=/* main screen */\r\n      box-sizing: border-box;\r\n      border-radius: 30px;\r\n      border: 16px solid var(--Color01);\r\n      width: 100%;\r\n      height: 400px;\r\n      background: var(--mainIMG);\r\n      position: relative;\r\n      top: -30px;\r\n      z-index: 2;\r\n      pointer-events: none;]\r\n      [/div]\r\n      [comment] --- end of main image box --- [/comment]\r\n      [comment] --- start of tab covers --- [/comment]\r\n      [div=/* tab cover base */\r\n      box-sizing: border-box;\r\n      border-radius: 50px;\r\n      border: 5px solid var(--Color02);\r\n      padding: 15px 0;\r\n      width: 50px;\r\n      background: var(--White);\r\n      font-family: var(--BodyFont);\r\n      font-size: 18px;\r\n      line-height: 100%;\r\n      color: var(--Color02);\r\n      text-align: center;\r\n      position: absolute;\r\n      top: 115px;\r\n      left: -17px;\r\n      z-index: 3;\r\n      pointer-events: none;]\r\n        [div=/* tab cover icon 01 */\r\n        margin-top: 0;]\r\n          [fa]fas fa-house[/fa]\r\n        [/div]\r\n        [div=/* tab cover icon 02 */\r\n        margin-top: 15px;]\r\n          [fa]fas fa-pen-field[/fa]\r\n        [/div]\r\n        [div=/* tab cover icon 03 */\r\n        margin-top: 15px;]\r\n          [fa]fas fa-heart[/fa]\r\n        [/div]\r\n        [div=/* tab cover icon 04 */\r\n        margin-top: 15px;]\r\n          [fa]fas fa-star[/fa]\r\n        [/div]\r\n      [/div]\r\n      [div=/* junk */\r\n      width: 200%;\r\n      height: 200px;\r\n      position: absolute;\r\n      top: 100px;\r\n      left: 25px;\r\n      z-index: 1;]\r\n      [/div]\r\n      [div=/* junk */\r\n      background: var(--bgColor);\r\n      position: absolute;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n      inset: -100%;]\r\n      [/div]\r\n      [comment] --- end of tab covers --- [/comment]\r\n      [comment] --- start of tabs --- [/comment]\r\n      [div=/* tab cut off */\r\n      width: 100%;\r\n      height: 600px;\r\n      position: absolute;\r\n      top: -30px;\r\n      left: 0;]\r\n        [div=/* tab wrapper */\r\n        width: 100%;\r\n        line-height: 30px;\r\n        position: relative;\r\n        top: 160px;\r\n        left: -20px;]\r\n          [tabs]\r\n\r\n\r\n\r\n\r\n\r\n            [tab=0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101]\r\n",
  {
    "type": "group",
    "description": "Tab 1 Contents",
    "markerStart": {
      "type": "group",
      "description": "Tab 1 Contents",
      "original": "&Tab 1 Contents \\ group&",
      "repeat": false,
      "indices": [
        5387,
        5410
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n              [div=/* scrollbox - outer */\r\n              width: calc(100% - 60px);\r\n              height: 600px;\r\n              overflow: hidden;\r\n              position: absolute;\r\n              top: -160px;\r\n              left: 50px;\r\n              z-index: 3;\r\n              line-height: initial;]\r\n                [div=/* scrollbox - inner */\r\n                padding-right: 50px;\r\n                width: 100%;\r\n                height: 600px;\r\n                overflow-y: scroll;\r\n                overflow-x: hidden;]\r\n                  [comment] --- start of basic information section --- [/comment]\r\n                  [div=/* box wrapper */\r\n                  display: flex;\r\n                  justify-content: right;\r\n                  position: relative;]\r\n                    [div=/* box wrapper */\r\n                    width: 100%;\r\n                    max-width: 450px;\r\n                    position: relative;]\r\n                      [div=/* transparent border */\r\n                      box-sizing: border-box;\r\n                      padding: 10px;\r\n                      border-radius: 20px;\r\n                      border: 1px solid var(--TransparentBorder);\r\n                      -webkit-backdrop-filter: blur(var(--Blur));\r\n                      backdrop-filter: blur(var(--Blur));\r\n                      background: var(--Transparent);\r\n                      position: relative;]\r\n                        [div=/* inner box */\r\n                        box-sizing: border-box;\r\n                        padding: 15px;\r\n                        border-radius: 17px;\r\n                        width: 100%;\r\n                        background: var(--White);]\r\n                          [div=/* flexbox */\r\n                          display: flex;\r\n                          justify-content: center;\r\n                          flex-flow: row wrap;\r\n                          justify-content: center;\r\n                          width: calc(100% + 10px);\r\n                          margin-left: -10px;]\r\n                            [comment] --- start of profile icon --- [/comment]\r\n                            [div=/* flex LEFT */\r\n                            margin-left: 10px;\r\n                            flex: 1;\r\n                            width: 100%;\r\n                            min-width: 125px;]\r\n                              [div=/* profile icon */\r\n                              border-radius: 15px;\r\n                              padding-top: 100%;\r\n                              width: 100%;\r\n                              background: var(--BasicIcon);]\r\n                              [/div]\r\n                            [/div]\r\n                            [comment] --- end of profile icon --- [/comment]\r\n",
      {
        "type": "group",
        "description": "Basic Information",
        "markerStart": {
          "type": "group",
          "description": "Basic Information",
          "original": "&Basic Information \\ group&",
          "repeat": false,
          "indices": [
            8145,
            8171
          ]
        },
        "repeat": false,
        "originalChildren": [
          "\r\n                            [comment] --- start of basic information --- [/comment]\r\n                            [div=/* flex RIGHT */\r\n                            margin-left: 10px;\r\n                            flex: 2;\r\n                            width: 100%;\r\n                            min-width: 200px;\r\n                            font-family: var(--BodyFont);\r\n                            font-size: var(--BodySize);\r\n                            color: var(--textColor);\r\n                            line-height: 100%;]\r\n                              [comment] --- start of question/answer --- [/comment]\r\n                              [div=/* Q/A wrapper */\r\n                              margin-top: 5px;\r\n                              width: 100%;]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                border-radius: 5px;\r\n                                padding: 4px 5px 3px;\r\n                                background: var(--Color01);\r\n                                color: var(--White);\r\n                                text-transform: lowercase;]\r\n                                  Name\r\n                                [/div]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                padding: 4px 5px 3px;\r\n                                text-transform: lowercase;]\r\n                                  ",
          {
            "type": "text",
            "description": "full name",
            "marker": {
              "type": "text",
              "description": "full name",
              "defaultValue": "",
              "original": "&full name \\ text&",
              "indices": [
                9768,
                9785
              ]
            }
          },
          "\r\n                                [/div]\r\n                              [/div]\r\n                              [comment] --- end of question/answer --- [/comment]\r\n                              [comment] --- start of question/answer --- [/comment]\r\n                              [div=/* Q/A wrapper */\r\n                              margin-top: 5px;\r\n                              width: 100%;]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                border-radius: 5px;\r\n                                padding: 4px 5px 3px;\r\n                                background: var(--Color01);\r\n                                color: var(--White);\r\n                                text-transform: lowercase;]\r\n                                  Role\r\n                                [/div]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                padding: 4px 5px 3px;\r\n                                text-transform: lowercase;]\r\n                                  ",
          {
            "type": "text",
            "description": "role",
            "marker": {
              "type": "text",
              "description": "role",
              "defaultValue": "",
              "original": "&role \\ text&",
              "indices": [
                11013,
                11025
              ]
            }
          },
          "\r\n                                [/div]\r\n                              [/div]\r\n                              [comment] --- end of question/answer --- [/comment]\r\n                              [comment] --- start of question/answer --- [/comment]\r\n                              [div=/* Q/A wrapper */\r\n                              margin-top: 5px;\r\n                              width: 100%;]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                border-radius: 5px;\r\n                                padding: 4px 5px 3px;\r\n                                background: var(--Color01);\r\n                                color: var(--White);\r\n                                text-transform: lowercase;]\r\n                                  Gender\r\n                                [/div]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                padding: 4px 5px 3px;\r\n                                text-transform: lowercase;]\r\n                                  ",
          {
            "type": "text",
            "description": "gender",
            "marker": {
              "type": "text",
              "description": "gender",
              "defaultValue": "",
              "original": "&gender \\ text&",
              "indices": [
                12255,
                12269
              ]
            }
          },
          "\r\n                                [/div]\r\n                              [/div]\r\n                              [comment] --- end of question/answer --- [/comment]\r\n                              [comment] --- start of question/answer --- [/comment]\r\n                              [div=/* Q/A wrapper */\r\n                              margin-top: 5px;\r\n                              width: 100%;]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                border-radius: 5px;\r\n                                padding: 4px 5px 3px;\r\n                                background: var(--Color01);\r\n                                color: var(--White);\r\n                                text-transform: lowercase;]\r\n                                  Age\r\n                                [/div]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                padding: 4px 5px 3px;\r\n                                text-transform: lowercase;]\r\n                                  ",
          {
            "type": "number",
            "description": "age",
            "marker": {
              "type": "number",
              "description": "age",
              "defaultValue": 0,
              "min": 22,
              "max": 25,
              "original": "&age \\ number \\   \\ 22 \\ 25&",
              "indices": [
                13496,
                13523
              ]
            }
          },
          "\r\n                                [/div]\r\n                              [/div]\r\n                              [comment] --- end of question/answer --- [/comment]\r\n                              [comment] --- start of question/answer --- [/comment]\r\n                              [div=/* Q/A wrapper */\r\n                              margin-top: 5px;\r\n                              width: 100%;]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                border-radius: 5px;\r\n                                padding: 4px 5px 3px;\r\n                                background: var(--Color01);\r\n                                color: var(--White);\r\n                                text-transform: lowercase;]\r\n                                  Birthday\r\n                                [/div]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                padding: 4px 5px 3px;\r\n                                text-transform: lowercase;]\r\n                                  ",
          {
            "type": "text",
            "description": "date of birth",
            "marker": {
              "type": "text",
              "description": "date of birth",
              "defaultValue": "",
              "original": "&date of birth \\ text&",
              "indices": [
                14755,
                14776
              ]
            }
          },
          "\r\n                                [/div]\r\n                              [/div]\r\n                              [comment] --- end of question/answer --- [/comment]\r\n                              [comment] --- start of question/answer --- [/comment]\r\n                              [div=/* Q/A wrapper */\r\n                              margin-top: 5px;\r\n                              width: 100%;]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                border-radius: 5px;\r\n                                padding: 4px 5px 3px;\r\n                                background: var(--Color01);\r\n                                color: var(--White);\r\n                                text-transform: lowercase;]\r\n                                  Faceclaim\r\n                                [/div]\r\n                                [div=/* Q */\r\n                                display: inline-block;\r\n                                box-sizing: border-box;\r\n                                padding: 4px 5px 3px;\r\n                                text-transform: lowercase;]\r\n                                  ",
          {
            "type": "text",
            "description": "faceclaim",
            "marker": {
              "type": "text",
              "description": "faceclaim",
              "defaultValue": "",
              "original": "&faceclaim \\ text&",
              "indices": [
                16009,
                16026
              ]
            }
          },
          "\r\n                                [/div]\r\n                              [/div]\r\n                              [comment] --- end of question/answer --- [/comment]\r\n                            [/div]\r\n                            [comment] --- end of basic information --- [/comment]\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n                  [comment] --- end of basic information section --- [/comment]\r\n                  [comment] --- start of appearance tags --- [/comment]\r\n                  [div=/* wrapper */\r\n                  display: flex;\r\n                  justify-content: right;\r\n                  position: relative;]\r\n                    [div=/* wrapper */\r\n                    margin-top: 15px;\r\n                    margin-right: 15px;\r\n                    width: calc(100% - 15px);\r\n                    max-width: 400px;\r\n                    font-family: var(--BodyFont);\r\n                    font-size: var(--BodySize);\r\n                    line-height: 100%;\r\n                    font-weight: 700;\r\n                    color: var(--White);\r\n                    text-transform: lowercase;\r\n                    position: relative;]\r\n                      [comment] --- start of appearance tag --- [/comment]\r\n                      [div=/* appearance tag */\r\n                      position: relative;]\r\n                        [div=/* speech bubble main */\r\n                        box-sizing: border-box;\r\n                        border: 2px solid var(--White);\r\n                        border-radius: 5px;\r\n                        padding: 6px 12px;\r\n                        width: fit-content;\r\n                        background: var(--Color02);\r\n                        font-size: var(--BodySize);\r\n                        position: relative;\r\n                        float: right;]\r\n                          #",
          {
            "type": "text",
            "description": "hair color",
            "marker": {
              "type": "text",
              "description": "hair color",
              "defaultValue": "",
              "original": "&hair color \\ text&",
              "indices": [
                17967,
                17985
              ]
            }
          },
          "\r\n                        [/div]\r\n                        [div=/* speech bubble corner */\r\n                        margin-top: -2px;\r\n                        width: 15px;\r\n                        height: 12px;\r\n                        background: var(--White);\r\n                        clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                        position: relative;\r\n                        right: 10px;\r\n                        float: right;\r\n                        clear: right;]\r\n                          [div=/* speech bubble corner inner */\r\n                          width: 11px;\r\n                          height: 8px;\r\n                          background: var(--Color02);\r\n                          clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                          position: relative;\r\n                          left: 2px;]\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                      [comment] --- end of appearance tag --- [/comment]\r\n                      [div=/* divider */\r\n                      height: 7px;\r\n                      clear: right;]\r\n                      [/div]\r\n                      [comment] --- start of appearance tag --- [/comment]\r\n                      [div=/* appearance tag */\r\n                      position: relative;\r\n                      clear: right;]\r\n                        [div=/* speech bubble main */\r\n                        box-sizing: border-box;\r\n                        border: 2px solid var(--White);\r\n                        border-radius: 5px;\r\n                        padding: 6px 12px;\r\n                        width: fit-content;\r\n                        background: var(--Color02);\r\n                        font-size: var(--BodySize);\r\n                        position: relative;\r\n                        float: right;]\r\n                          #",
          {
            "type": "text",
            "description": "eye color",
            "marker": {
              "type": "text",
              "description": "eye color",
              "defaultValue": "",
              "original": "&eye color \\ text&",
              "indices": [
                19867,
                19884
              ]
            }
          },
          "\r\n                        [/div]\r\n                        [div=/* speech bubble corner */\r\n                        margin-top: -2px;\r\n                        width: 15px;\r\n                        height: 12px;\r\n                        background: var(--White);\r\n                        clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                        position: relative;\r\n                        right: 10px;\r\n                        float: right;\r\n                        clear: right;]\r\n                          [div=/* speech bubble corner inner */\r\n                          width: 11px;\r\n                          height: 8px;\r\n                          background: var(--Color02);\r\n                          clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                          position: relative;\r\n                          left: 2px;]\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                      [comment] --- end of appearance tag --- [/comment]\r\n                      [div=/* divider */\r\n                      height: 7px;\r\n                      clear: right;]\r\n                      [/div]\r\n                      [comment] --- start of appearance tag --- [/comment]\r\n                      [div=/* appearance tag */\r\n                      position: relative;\r\n                      clear: right;]\r\n                        [div=/* speech bubble main */\r\n                        box-sizing: border-box;\r\n                        border: 2px solid var(--White);\r\n                        border-radius: 5px;\r\n                        padding: 6px 12px;\r\n                        width: fit-content;\r\n                        background: var(--Color02);\r\n                        font-size: var(--BodySize);\r\n                        position: relative;\r\n                        float: right;]\r\n                          #",
          {
            "type": "text",
            "description": "height",
            "marker": {
              "type": "text",
              "description": "height",
              "defaultValue": "",
              "original": "&height \\ text&",
              "indices": [
                21766,
                21780
              ]
            }
          },
          "\r\n                        [/div]\r\n"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            21815,
            21819
          ]
        }
      },
      "\r\n                        [div=/* speech bubble corner */\r\n                        margin-top: -2px;\r\n                        width: 15px;\r\n                        height: 12px;\r\n                        background: var(--White);\r\n                        clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                        position: relative;\r\n                        right: 10px;\r\n                        float: right;\r\n                        clear: right;]\r\n                          [div=/* speech bubble corner inner */\r\n                          width: 11px;\r\n                          height: 8px;\r\n                          background: var(--Color02);\r\n                          clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                          position: relative;\r\n                          left: 2px;]\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                      [comment] --- end of appearance tag --- [/comment]\r\n                    [/div]\r\n                  [/div]\r\n                  [comment] --- end of appearance tags --- [/comment]\r\n                  [comment] --- start of personality section --- [/comment]\r\n                  [div=/* box wrapper */\r\n                  margin-top: 50px;\r\n                  width: 100%;\r\n                  max-width: 550px;\r\n                  position: relative;]\r\n                    [div=/* transparent border */\r\n                    box-sizing: border-box;\r\n                    padding: 10px;\r\n                    border-radius: 20px;\r\n                    border: 1px solid var(--TransparentBorder);\r\n                    -webkit-backdrop-filter: blur(var(--Blur));\r\n                    backdrop-filter: blur(var(--Blur));\r\n                    background: var(--Transparent);\r\n                    position: relative;]\r\n                      [comment] --- start of section header speech bubble --- [/comment]\r\n                      [div=/* nameplate */\r\n                      position: absolute;\r\n                      top: -5px;\r\n                      right: 30px;\r\n                      font-size: var(--BodySize);]\r\n                        [div=/* speech bubble main */\r\n                        box-sizing: border-box;\r\n                        border: 2px solid var(--White);\r\n                        border-radius: 5px;\r\n                        padding: 6px 12px;\r\n                        width: fit-content;\r\n                        background: var(--Color02);\r\n                        font-family: var(--HeaderFont);\r\n                        font-size: var(--BodySize);\r\n                        line-height: 100%;\r\n                        color: var(--White);\r\n                        text-align: center;\r\n                        text-transform: capitalize;\r\n                        position: relative;\r\n                        float: right;]\r\n                          Personality\r\n                        [/div]\r\n                        [div=/* speech bubble corner */\r\n                        margin-top: -2px;\r\n                        width: 12px;\r\n                        height: 9px;\r\n                        background: var(--White);\r\n                        clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                        position: relative;\r\n                        right: 7px;\r\n                        float: right;\r\n                        clear: right;]\r\n                          [div=/* speech bubble corner inner */\r\n                          width: 8px;\r\n                          height: 5px;\r\n                          background: var(--Color02);\r\n                          clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                          position: relative;\r\n                          left: 2px;]\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                      [comment] --- end of section header speech bubble --- [/comment]\r\n                      [comment] --- start of content text --- [/comment]\r\n                      [div=/* text box */\r\n                      box-sizing: border-box;\r\n                      padding: 20px;\r\n                      border-radius: 17px;\r\n                      width: 100%;\r\n                      background: var(--White);\r\n                      font-family: var(--BodyFont);\r\n                      font-size: var(--BodySize);\r\n                      line-height: var(--BodyLineHeight);\r\n                      color: var(--textColor);\r\n                      text-align: justify;]\r\n                        [div=white-space: pre-line;]",
      {
        "type": "content",
        "description": "Personality Description",
        "marker": {
          "type": "content",
          "description": "Personality Description",
          "original": "&Personality Description \\ content&",
          "indices": [
            26383,
            26417
          ]
        }
      },
      "[/div]\r\n                      [/div]\r\n                      [comment] --- end of content text --- [/comment]\r\n                    [/div]\r\n                  [/div]\r\n                  [comment] --- end of personality section --- [/comment]\r\n                [/div]\r\n              [/div]\r\n              [comment] --- start of tab cover --- [/comment]\r\n              [div=/* wrapper */\r\n              background: var(--White);\r\n              font-family: var(--BodyFont);\r\n              font-size: 18px;\r\n              line-height: 100%;\r\n              color: var(--Color01);\r\n              position: absolute;\r\n              top: 5px;\r\n              left: 18px;\r\n              z-index: 3;]\r\n                [fa]fas fa-home[/fa]\r\n              [/div]\r\n              [comment] --- end of tab cover --- [/comment]\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        27226,
        27230
      ]
    }
  },
  "\r\n            [/tab]\r\n\r\n  \r\n\r\n\r\n\r\n            [tab=0202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202]\r\n",
  {
    "type": "group",
    "description": "Tab 2 Contents",
    "markerStart": {
      "type": "group",
      "description": "Tab 2 Contents",
      "original": "&Tab 2 Contents \\ group&",
      "repeat": false,
      "indices": [
        27397,
        27420
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n              [div=/* scrollbox - outer */\r\n              width: calc(100% - 60px);\r\n              height: 600px;\r\n              overflow: hidden;\r\n              position: absolute;\r\n              top: -160px;\r\n              left: 50px;\r\n              z-index: 3;]\r\n                [div=/* scrollbox - inner */\r\n                padding-right: 50px;\r\n                width: 100%;\r\n                height: 600px;\r\n                overflow-y: scroll;\r\n                overflow-x: hidden;]\r\n                  [comment] --- start of quote section --- [/comment]\r\n                  [div=/* wrapper */\r\n                  margin-top: 55px;\r\n                  max-width: 500px;\r\n                  width: calc(100% - 8px);\r\n                  position: relative;]\r\n                    [div=/* speech bubble main */\r\n                    box-sizing: border-box;\r\n                    border-radius: 15px;\r\n                    border: 1px solid var(--Color02);\r\n                    padding: 5px 10px;\r\n                    width: fit-content;\r\n                    background: var(--White);\r\n                    font-family: var(--BodyFont);\r\n                    font-size: var(--BodySize);\r\n                    line-height: var(--BodyLineHeight);\r\n                    color: var(--Color01);\r\n                    font-weight: 700;\r\n                    text-align: justify;\r\n                    filter: drop-shadow(8px 8px 0 var(--Color02));]\r\n                      ",
      {
        "type": "text",
        "description": "quote bubble in backstory tab",
        "marker": {
          "type": "text",
          "description": "quote bubble in backstory tab",
          "defaultValue": "",
          "original": "&quote bubble in backstory tab \\ text&",
          "indices": [
            28871,
            28908
          ]
        }
      },
      "\r\n                    [/div]\r\n                    [div=/* circle 1 */\r\n                    margin-top: 13px;\r\n                    margin-left: 25px;\r\n                    box-sizing: border-box;\r\n                    border-radius: 50%;\r\n                    border: 1px solid var(--Color02);\r\n                    width: 18px;\r\n                    height: 18px;\r\n                    background: var(--White);\r\n                    filter: drop-shadow(4px 4px 0 var(--Color02));]\r\n                    [/div]\r\n                    [div=/* circle 2 */\r\n                    margin-top: 13px;\r\n                    margin-left: 35px;\r\n                    box-sizing: border-box;\r\n                    border-radius: 50%;\r\n                    border: 1px solid var(--Color02);\r\n                    width: 12px;\r\n                    height: 12px;\r\n                    background: var(--White);\r\n                    filter: drop-shadow(4px 4px 0 var(--Color02));]\r\n                    [/div]\r\n                    [div=/* circle 3 */\r\n                    margin-top: 13px;\r\n                    margin-left: 55px;\r\n                    box-sizing: border-box;\r\n                    border-radius: 50%;\r\n                    border: 1px solid var(--Color02);\r\n                    width: 6px;\r\n                    height: 6px;\r\n                    background: var(--White);\r\n                    filter: drop-shadow(4px 4px 0 var(--Color02));]\r\n                    [/div]\r\n                  [/div]\r\n                  [comment] --- end of quote section --- [/comment]\r\n                  [comment] --- start of backstory section --- [/comment]\r\n                  [div=/* stick to right */\r\n                  margin-top: 150px;\r\n                  display: flex;\r\n                  justify-content: right;]\r\n                    [div=/* box wrapper */\r\n                    width: 100%;\r\n                    max-width: 600px;\r\n                    position: relative;]\r\n                      [div=/* transparent border */\r\n                      box-sizing: border-box;\r\n                      padding: 10px;\r\n                      border-radius: 20px;\r\n                      border: 1px solid var(--TransparentBorder);\r\n                      -webkit-backdrop-filter: blur(var(--Blur));\r\n                      backdrop-filter: blur(var(--Blur));\r\n                      background: var(--Transparent);\r\n                      position: relative;]\r\n                        [comment] --- start of section header speech bubble --- [/comment]\r\n                        [div=/* nameplate */\r\n                        position: absolute;\r\n                        top: -5px;\r\n                        right: 30px;\r\n                        font-size: var(--BodySize);]\r\n                          [div=/* speech bubble main */\r\n                          box-sizing: border-box;\r\n                          border: 2px solid var(--White);\r\n                          border-radius: 5px;\r\n                          padding: 6px 12px;\r\n                          width: fit-content;\r\n                          background: var(--Color02);\r\n                          font-family: var(--HeaderFont);\r\n                          font-size: var(--BodySize);\r\n                          line-height: 100%;\r\n                          color: var(--White);\r\n                          text-align: center;\r\n                          text-transform: capitalize;\r\n                          position: relative;\r\n                          float: right;]\r\n                            Backstory\r\n                          [/div]\r\n                          [div=/* speech bubble corner */\r\n                          margin-top: -2px;\r\n                          width: 12px;\r\n                          height: 9px;\r\n                          background: var(--White);\r\n                          clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                          position: relative;\r\n                          right: 7px;\r\n                          float: right;\r\n                          clear: right;]\r\n                            [div=/* speech bubble corner inner */\r\n                            width: 8px;\r\n                            height: 5px;\r\n                            background: var(--Color02);\r\n                            clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                            position: relative;\r\n                            left: 2px;]\r\n                            [/div]\r\n                          [/div]\r\n                        [/div]\r\n                        [comment] --- end of section header speech bubble --- [/comment]\r\n                        [comment] --- start of content text --- [/comment]\r\n                        [div=/* text box */\r\n                        box-sizing: border-box;\r\n                        padding: 20px;\r\n                        border-radius: 17px;\r\n                        width: 100%;\r\n                        background: var(--White);\r\n                        font-family: var(--BodyFont);\r\n                        font-size: var(--BodySize);\r\n                        line-height: var(--BodyLineHeight);\r\n                        color: var(--textColor);\r\n                        text-align: justify;]\r\n                          [div=white-space: pre-line;]",
      {
        "type": "content",
        "description": "backstory description",
        "marker": {
          "type": "content",
          "description": "backstory description",
          "original": "&backstory description \\ content&",
          "indices": [
            34168,
            34200
          ]
        }
      },
      "[/div]\r\n                        [/div]\r\n                        [comment] --- end of content text --- [/comment]\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n                  [comment] --- end of backstory section --- [/comment]\r\n                [/div]\r\n              [/div]\r\n              [comment] --- start of tab cover --- [/comment]\r\n              [div=/* wrapper */\r\n              background: var(--White);\r\n              font-family: var(--BodyFont);\r\n              font-size: 18px;\r\n              line-height: 100%;\r\n              color: var(--Color01);\r\n              position: absolute;\r\n              top: 40px;\r\n              left: 17px;\r\n              z-index: 3;]\r\n                [fa]fas fa-pen-field[/fa]\r\n              [/div]\r\n              [comment] --- end of tab cover --- [/comment]\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        35047,
        35051
      ]
    }
  },
  "\r\n            [/tab]\r\n\r\n\r\n\r\n\r\n\r\n            [tab=0303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303]\r\n",
  {
    "type": "group",
    "description": "Tab 3 Contents",
    "markerStart": {
      "type": "group",
      "description": "Tab 3 Contents",
      "original": "&Tab 3 Contents \\ group&",
      "repeat": false,
      "indices": [
        35216,
        35239
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n              [div=/* scrollbox - outer */\r\n              width: calc(100% - 60px);\r\n              height: 600px;\r\n              overflow: hidden;\r\n              position: absolute;\r\n              top: -160px;\r\n              left: 50px;\r\n              z-index: 3;]\r\n                [div=/* scrollbox - inner */\r\n                padding-right: 50px;\r\n                width: 100%;\r\n                height: 600px;\r\n                overflow-y: scroll;\r\n                overflow-x: hidden;]\r\n                  [comment] --- start of relationships section --- [/comment]\r\n                  [div=/* wrapper */\r\n                  display: flex;\r\n                  flex-direction: column;\r\n                  align-items: end;\r\n                  width: 100%;]\r\n",
      {
        "type": "group",
        "description": "Character Relationship (repeat as many as needed)",
        "markerStart": {
          "type": "group",
          "description": "Character Relationship (repeat as many as needed)",
          "original": "&Character Relationship (repeat as many as needed) \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            35993,
            36060
          ]
        },
        "repeat": true,
        "originalChildren": [
          "\r\n                    [comment] --- start of relationship box --- [/comment]\r\n                    [div=/* wrapper */\r\n                    display: flex;\r\n                    flex-flow: row-reverse wrap;\r\n                    justify-content: center;\r\n                    margin-top: 25px;\r\n                    max-width: 600px;\r\n                    width: 100%;\r\n                    position: relative;]\r\n                      [div=/* flex RIGHT */\r\n                      display: flex;\r\n                      align-items: center;\r\n                      margin-left: -20px;\r\n                      flex: 2;\r\n                      width: 100%;\r\n                      min-width: 150px;\r\n                      position: relative;\r\n                      z-index: 5;]\r\n                        [div=/* proficon */\r\n                        box-sizing: border-box;\r\n                        border-radius: 20px;\r\n                        border: 10px solid var(--Color02);\r\n                        width: 100%;\r\n                        padding-top: calc(100% - 20px);\r\n                        background: url(",
          {
            "type": "text",
            "description": "URL for relationship image",
            "marker": {
              "type": "text",
              "description": "URL for relationship image",
              "defaultValue": "",
              "original": "&URL for relationship image \\ text&",
              "indices": [
                37158,
                37192
              ]
            }
          },
          ") center/cover no-repeat;;\r\n                        position: relative;]\r\n                          [comment] --- start of rs character name speech bubble --- [/comment]\r\n                          [div=/* nameplate */\r\n                          position: absolute;\r\n                          top: -20px;\r\n                          right: 3px;\r\n                          font-size: var(--BodySize);]\r\n                            [div=/* speech bubble main */\r\n                            box-sizing: border-box;\r\n                            border: 2px solid var(--White);\r\n                            border-radius: 5px;\r\n                            padding: 5px 10px;\r\n                            width: fit-content;\r\n                            background: var(--Color01);\r\n                            font-family: var(--HeaderFont);\r\n                            font-size: var(--BodySize);\r\n                            line-height: 100%;\r\n                            color: var(--White);\r\n                            text-align: center;\r\n                            text-transform: capitalize;\r\n                            position: relative;\r\n                            float: right;]\r\n                              ",
          {
            "type": "text",
            "description": "character name",
            "marker": {
              "type": "text",
              "description": "character name",
              "defaultValue": "",
              "original": "&character name \\ text&",
              "indices": [
                38414,
                38436
              ]
            }
          },
          "\r\n                            [/div]\r\n                            [div=/* speech bubble corner */\r\n                            margin-top: -2px;\r\n                            width: 12px;\r\n                            height: 9px;\r\n                            background: var(--White);\r\n                            clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                            position: relative;\r\n                            right: 7px;\r\n                            float: right;\r\n                            clear: right;]\r\n                              [div=/* speech bubble corner inner */\r\n                              width: 8px;\r\n                              height: 5px;\r\n                              background: var(--Color01);\r\n                              clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                              position: relative;\r\n                              left: 2px;]\r\n                              [/div]\r\n                            [/div]\r\n                          [/div]\r\n                          [comment] --- end of rs character name speech bubble --- [/comment]\r\n                          [comment] --- start of rs symbol + cs link --- [/comment]\r\n                          [div=/* wrapper */\r\n                          display: flex;\r\n                          flex-flow: row nowrap;\r\n                          width: 100%;\r\n                          position: absolute;\r\n                          bottom: -19px;\r\n                          left: 3px;]\r\n                            [div=/* rs symbol */\r\n                            box-sizing: border-box;\r\n                            display: flex;\r\n                            align-items: center;\r\n                            justify-content: center;\r\n                            padding-top: 2px;\r\n                            border-radius: 50%;\r\n                            border: 2px solid var(--White);\r\n                            background: var(--Color01);\r\n                            line-height: 100%;\r\n                            width: 28px;\r\n                            height: 28px;\r\n                            font-family: var(--BodyFont);\r\n                            font-size: 12px;\r\n                            color: var(--White);\r\n                            font-weight: 700;]\r\n                              [fa]fas fa-heart[/fa]\r\n                            [/div]\r\n                            [div=/* cs link symbol */\r\n                            box-sizing: border-box;\r\n                            display: flex;\r\n                            align-items: center;\r\n                            justify-content: center;\r\n                            margin-left: 4px;\r\n                            padding-top: 2px;\r\n                            border-radius: 50%;\r\n                            border: 2px solid var(--White);\r\n                            background: var(--Color01);\r\n                            line-height: 100%;\r\n                            width: 28px;\r\n                            height: 28px;\r\n                            font-family: var(--BodyFont);\r\n                            font-size: 10px;\r\n                            color: var(--White);\r\n                            font-weight: 700;\r\n                            text-transform: uppercase;\r\n                            position: relative;]\r\n                              [div=position: absolute;]\r\n                                CS\r\n                              [/div]\r\n                              [URL=&link to character sheet&][div=/* clicker */ position: absolute; inset: 0;][/div][/URL]\r\n                            [/div]\r\n                          [/div]\r\n                          [comment] --- end of rs symbol + cs link --- [/comment]\r\n                        [/div]\r\n                      [/div]\r\n                      [div=/* flex-LEFT - transparent border */\r\n                      box-sizing: border-box;\r\n                      padding: 10px;\r\n                      border-radius: 20px;\r\n                      border: 1px solid var(--TransparentBorder);\r\n                      -webkit-backdrop-filter: blur(var(--Blur));\r\n                      backdrop-filter: blur(var(--Blur));\r\n                      flex: 5;\r\n                      min-width: 200px;\r\n                      background: var(--Transparent);\r\n                      position: relative;]\r\n                        [comment] --- start of content text --- [/comment]\r\n                        [div=/* text box */\r\n                        box-sizing: border-box;\r\n                        padding: 20px;\r\n                        border-radius: 17px;\r\n                        width: 100%;\r\n                        height: 210px;\r\n                        background: var(--White);\r\n                        font-family: var(--BodyFont);\r\n                        font-size: var(--BodySize);\r\n                        line-height: var(--BodyLineHeight);\r\n                        color: var(--textColor);\r\n                        text-align: justify;\r\n                        overflow: hidden;]\r\n                          [div=\r\n                          box-sizing: content-box;\r\n                          padding-right: 50px;\r\n                          width: 100%;\r\n                          height: 170px;\r\n                          overflow-y: scroll;\r\n                          overflow-x: hidden;]\r\n                            [div=white-space: pre-line;]",
          {
            "type": "content",
            "description": "character relationship description",
            "marker": {
              "type": "content",
              "description": "character relationship description",
              "original": "&character relationship description \\ content&",
              "indices": [
                43883,
                43928
              ]
            }
          },
          "[/div]\r\n                          [/div]\r\n                        [/div]\r\n                        [comment] --- end of content text --- [/comment]\r\n                      [/div]\r\n                    [/div]\r\n                    [comment] --- end of relationship box --- [/comment]\r\n"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            44209,
            44213
          ]
        }
      },
      "\r\n                  [/div]\r\n                  [comment] --- end of relationships section --- [/comment]\r\n                [/div]\r\n              [/div]\r\n              [comment] --- start of tab cover --- [/comment]\r\n              [div=/* wrapper */\r\n              background: var(--White);\r\n              font-family: var(--BodyFont);\r\n              font-size: 18px;\r\n              line-height: 100%;\r\n              color: var(--Color01);\r\n              position: absolute;\r\n              top: 76px;\r\n              left: 19px;\r\n              z-index: 3;]\r\n                [fa]fas fa-heart[/fa]\r\n              [/div]\r\n              [comment] --- end of tab cover --- [/comment]\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        44890,
        44894
      ]
    }
  },
  "\r\n            [/tab]\r\n\r\n\r\n\r\n\r\n\r\n            [tab=0404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404]\r\n",
  {
    "type": "group",
    "description": "Tab 4 Contents",
    "markerStart": {
      "type": "group",
      "description": "Tab 4 Contents",
      "original": "&Tab 4 Contents \\ group&",
      "repeat": false,
      "indices": [
        45059,
        45082
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n              [div=/* scrollbox - outer */\r\n              width: calc(100% - 60px);\r\n              height: 600px;\r\n              overflow: hidden;\r\n              position: absolute;\r\n              top: -160px;\r\n              left: 50px;\r\n              z-index: 3;]\r\n                [div=/* scrollbox - inner */\r\n                padding-right: 50px;\r\n                width: 100%;\r\n                height: 600px;\r\n                overflow-y: scroll;\r\n                overflow-x: hidden;]\r\n                  [comment] --- start of image gallery --- [/comment]\r\n                  [div=/* wrapper */\r\n                  box-sizing: border-box;\r\n                  display: flex;\r\n                  justify-content: end;\r\n                  width: 100%;]\r\n                    [div=/* for spacing purposes - also affects size of images */\r\n                    max-width: 200px;\r\n                    width: 60%;\r\n                    min-width: 150px;\r\n                    position: relative;]\r\n                      [div=/* transparent border */\r\n                      box-sizing: border-box;\r\n                      margin-bottom: 20%;\r\n                      padding: 10px;\r\n                      border-radius: 20px;\r\n                      border: 1px solid var(--TransparentBorder);\r\n                      width: 100%;\r\n                      -webkit-backdrop-filter: blur(var(--Blur));\r\n                      backdrop-filter: blur(var(--Blur));\r\n                      background: var(--Transparent);\r\n                      position: relative;]\r\n                        [div=/* image 1 */\r\n                        border-radius: 15px;\r\n                        width: 100%;\r\n                        padding-top: calc(100%*(2/3));\r\n                        background: var(--Extra01);]\r\n                          [div=/* transparent border */\r\n                          box-sizing: border-box;\r\n                          padding: 10px;\r\n                          border-radius: 20px;\r\n                          border: 1px solid var(--TransparentBorder);\r\n                          width: 100%;\r\n                          -webkit-backdrop-filter: blur(var(--Blur));\r\n                          backdrop-filter: blur(var(--Blur));\r\n                          background: var(--Transparent);\r\n                          position: absolute;\r\n                          top: 50%;\r\n                          left: -50%;]\r\n                            [div=/* image 2 */\r\n                            border-radius: 15px;\r\n                            width: 100%;\r\n                            padding-top: calc(100%*(2/3));\r\n                            background: var(--Extra02);]\r\n                            [/div]\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n                  [comment] --- end of image gallery --- [/comment]\r\n                  [comment] --- start of quote section --- [/comment]\r\n                  [div=/* wrapper */\r\n                  display: flex;\r\n                  flex-direction: column;\r\n                  align-items: end;\r\n                  margin-right: 8px;\r\n                  width: calc(100% - 8px);\r\n                  position: relative;]\r\n                    [div=/* circle 1 */\r\n                    margin-bottom: 13px;\r\n                    margin-right: 55px;\r\n                    box-sizing: border-box;\r\n                    border-radius: 50%;\r\n                    border: 1px solid var(--Color02);\r\n                    width: 6px;\r\n                    height: 6px;\r\n                    background: var(--White);\r\n                    filter: drop-shadow(4px 4px 0 var(--Color02));]\r\n                    [/div]\r\n                    [div=/* circle 2 */\r\n                    margin-bottom: 13px;\r\n                    margin-right: 35px;\r\n                    box-sizing: border-box;\r\n                    border-radius: 50%;\r\n                    border: 1px solid var(--Color02);\r\n                    width: 12px;\r\n                    height: 12px;\r\n                    background: var(--White);\r\n                    filter: drop-shadow(4px 4px 0 var(--Color02));]\r\n                    [/div]\r\n                    [div=/* circle 3 */\r\n                    margin-bottom: 13px;\r\n                    margin-right: 25px;\r\n                    box-sizing: border-box;\r\n                    border-radius: 50%;\r\n                    border: 1px solid var(--Color02);\r\n                    width: 18px;\r\n                    height: 18px;\r\n                    background: var(--White);\r\n                    filter: drop-shadow(4px 4px 0 var(--Color02));]\r\n                    [/div]\r\n                    [div=/* speech bubble main */\r\n                    box-sizing: border-box;\r\n                    border-radius: 15px;\r\n                    border: 1px solid var(--Color02);\r\n                    padding: 5px 10px;\r\n                    max-width: 500px;\r\n                    width: fit-content;\r\n                    background: var(--White);\r\n                    font-family: var(--BodyFont);\r\n                    font-size: var(--BodySize);\r\n                    line-height: var(--BodyLineHeight);\r\n                    color: var(--Color01);\r\n                    font-weight: 700;\r\n                    text-align: justify;\r\n                    filter: drop-shadow(8px 8px 0 var(--Color02));]\r\n                      ",
      {
        "type": "text",
        "description": "extra+notes tab quote",
        "marker": {
          "type": "text",
          "description": "extra+notes tab quote",
          "defaultValue": "",
          "original": "&extra+notes tab quote \\ text&",
          "indices": [
            50508,
            50537
          ]
        }
      },
      "\r\n                    [/div]\r\n                  [/div]\r\n                  [comment] --- end of quote section --- [/comment]\r\n                  [comment] --- start of notes section --- [/comment]\r\n                  [div=/* box wrapper */\r\n                  margin-top: 100px;\r\n                  width: 100%;\r\n                  max-width: 550px;\r\n                  position: relative;]\r\n                    [div=/* transparent border */\r\n                    box-sizing: border-box;\r\n                    padding: 10px;\r\n                    border-radius: 20px;\r\n                    border: 1px solid var(--TransparentBorder);\r\n                    -webkit-backdrop-filter: blur(var(--Blur));\r\n                    backdrop-filter: blur(var(--Blur));\r\n                    background: var(--Transparent);\r\n                    position: relative;]\r\n                      [comment] --- start of section header speech bubble --- [/comment]\r\n                      [div=/* nameplate */\r\n                      position: absolute;\r\n                      top: -5px;\r\n                      right: 30px;\r\n                      font-size: var(--BodySize);]\r\n                        [div=/* speech bubble main */\r\n                        box-sizing: border-box;\r\n                        border: 2px solid var(--White);\r\n                        border-radius: 5px;\r\n                        padding: 6px 12px;\r\n                        width: fit-content;\r\n                        background: var(--Color02);\r\n                        font-family: var(--HeaderFont);\r\n                        font-size: var(--BodySize);\r\n                        line-height: 100%;\r\n                        color: var(--White);\r\n                        text-align: center;\r\n                        text-transform: capitalize;\r\n                        position: relative;\r\n                        float: right;]\r\n                          Notes\r\n                        [/div]\r\n                        [div=/* speech bubble corner */\r\n                        margin-top: -2px;\r\n                        width: 12px;\r\n                        height: 9px;\r\n                        background: var(--White);\r\n                        clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                        position: relative;\r\n                        right: 7px;\r\n                        float: right;\r\n                        clear: right;]\r\n                          [div=/* speech bubble corner inner */\r\n                          width: 8px;\r\n                          height: 5px;\r\n                          background: var(--Color02);\r\n                          clip-path: polygon(0 0, 0% 100%, 100% 0);\r\n                          position: relative;\r\n                          left: 2px;]\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                      [comment] --- end of section header speech bubble --- [/comment]\r\n                      [comment] --- start of content text --- [/comment]\r\n                      [div=/* text box */\r\n                      box-sizing: border-box;\r\n                      padding: 20px 20px 20px 0;\r\n                      border-radius: 17px;\r\n                      width: 100%;\r\n                      background: var(--White);\r\n                      font-family: var(--BodyFont);\r\n                      font-size: var(--BodySize);\r\n                      line-height: var(--BodyLineHeight);\r\n                      color: var(--textColor);\r\n                      text-align: justify;]\r\n                        [div=/* list position */\r\n                        width: calc(100% + 5px);\r\n                        position: relative;\r\n                        left: -5px;]\r\n                          [LIST=1]\r\n",
      {
        "type": "group",
        "description": "Extras+Notes (add as needed)",
        "markerStart": {
          "type": "group",
          "description": "Extras+Notes (add as needed)",
          "original": "&Extras+Notes (add as needed) \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            54285,
            54331
          ]
        },
        "repeat": true,
        "originalChildren": [
          "\r\n                            [*] ",
          {
            "type": "content",
            "description": "extra+note block 1, 2, 3...etc",
            "marker": {
              "type": "content",
              "description": "extra+note block 1, 2, 3...etc",
              "original": "&extra+note block 1, 2, 3...etc \\ content&",
              "indices": [
                54366,
                54407
              ]
            }
          },
          "\r\n"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            54410,
            54414
          ]
        }
      },
      "\r\n                          [/LIST]\r\n                        [/div]\r\n                      [/div]\r\n                      [comment] --- end of content text --- [/comment]\r\n                    [/div]\r\n                  [/div]\r\n                  [comment] --- end of notes section --- [/comment]\r\n                [/div]\r\n              [/div]\r\n              [comment] --- start of tab cover --- [/comment]\r\n              [div=/* wrapper */\r\n              background: var(--White);\r\n              font-family: var(--BodyFont);\r\n              font-size: 18px;\r\n              line-height: 100%;\r\n              color: var(--Color01);\r\n              position: absolute;\r\n              top: 111px;\r\n              left: 18px;\r\n              z-index: 3;]\r\n                [fa]fas fa-star[/fa]\r\n              [/div]\r\n              [comment] --- end of tab cover --- [/comment]\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        55280,
        55284
      ]
    }
  },
  "\r\n            [/tab]\r\n\r\n\r\n\r\n\r\n\r\n          [/tabs]\r\n        [/div]\r\n      [/div]\r\n      [comment] --- end of tabs --- [/comment]\r\n    [/div]\r\n  [/div]\r\n[/div]\r\n[div=margin-top: 5px; width: 100%; font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[/div]\r\n[/nobr]"
]

[]

Cupid.CS.TTcode

By mochiroll

CS Colors

accent color 1 - dark pink+red in the original

accent color 2 - green in the original

background color

text color

white in the original (best to keep as is)

Character Images

URL for main image

profile icon

extra image 1

extra image 2

name of role (decorative)

Tab 1 Contents

Basic Information

full name

role

gender

age

Minimum: 22 Maximum: 25

date of birth

faceclaim

hair color

eye color

height

Personality Description

Tab 2 Contents

quote bubble in backstory tab

backstory description

Tab 3 Contents

Character Relationship (repeat as many as needed)

URL for relationship image

character name

character relationship description

Tab 4 Contents

extra+notes tab quote

Extras+Notes (add as needed)

extra+note block 1, 2, 3...etc

Output