Input Template

[nobr]
  [div=display: none;]
    [font=Oxanium][USER=32692]@fluticasone[/USER][/font]
    [font=Micro 5][USER=32692]@fluticasone[/USER][/font]
    feel free to replace any FA icons with ones of your choosing
  [/div]
  [div=&Initial Variables \ group&font-size: initial; /* root class */
  --bwFilter: &Filter (leave as is if unsure) \ text \ saturate(0%) contrast(110%)&; /* adjust as needed for your images */
  &Main Images \ group&--charaIMG: url('&Main Character IMG URL \ text&'); /* nav image for first */
  --charaIMGbwp: &Image Position (leave as is if unsure) \ text \ center center&; /* position of desaturated IMG. use 'center center' if unsure */
  --charaIMGbws: &Image Size (leave as is if unsure) \ text \ cover&; /* size of desaturated IMG. use 'cover' if unsure */
  --charaIMG2: url('&Basic Details IMG URL \ text&'); /* image right of basic deets */
  --charaIMG3: url('&End IMG URL \ text&'); /* last image in first tab */&end&&Secondary Images \ group&
  --mechIMG: url('&Secondary Image URL \ text&'); /* main image for second tab */
  --mechIMGbwp: &Image Position (leave as is if unsure) \ text \ center center&; /* position of desaturated IMG. use 'center center' if unsure */
  --mechIMGbws: &Image Size (leave as is if unsure) \ text \ cover&; /* size of desaturated IMG. use 'cover' if unsure */&end&
  &Navigation Images \ group&--navcharapos: &Main Character Image Position (leave as is if unsure) \ text \ center center&; /* position of IMG on navigation button. use 'center center' if unsure */
  --navcharas: &Main Character Image Size (leave as is if unsure) \ text \ cover&; /* size of IMG on navigation button. use 'cover' if unsure */
  --navmechpos: &Secondary Image Position (leave as is if unsure) \ text \ center center&; /* position of IMG on navigation button. use 'center center' if unsure */
  --navmechs: &Secondary Image Size (leave as is if unsure) \ text \ cover&; /* size of IMG on navigation button. use 'cover' if unsure */&end&
  &Colors \ group&--bgColor: &Background Color \ text \ #f3f3f3&; /* main bg color */
  --txtColor: &Text Color \ text \ #1d1d1d&; /* color of text */
  --borderColor: &Border Color \ text \ #a8a8a8&; /* color of grid borders */&end&&end&
  --txtFont: 'Oxanium', sans-serif;
  --accFont: 'Micro 5', sans-serif;
  position: relative;
  overflow: hidden;
  margin: 1rem auto;
  width: clamp(250px,calc(100% - 2rem),1000px);
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  gap: 10px;
  color: var(--txtColor);
  container-type: inline-size;
  --noiseIMG: url('https://i.imgur.com/UdjBt1F.png');
  --gridIMG: url('https://i.imgur.com/6Kp74bp.png');
  --border: 1px solid var(--borderColor);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;]
    [div=flex: 2 300px;
    min-height: 20rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 75px;
    padding-top: calc(15cqw + 2.25rem);
    overflow: hidden;
    line-height: calc(3.4rem + 5px);]
      [tabs]
        [tab=testingforpartonexxxxxx]
          [div=position: absolute; /* first tab container */
          top: 0px;
          height: 100%;
          left: 0px;
          width: 100%;
          line-height: normal;
          pointer-events: none;]
            [div=position: relative;
            display: flex;
            flex-flow: row wrap;
            align-items: stretch;
            gap: 10px;]
              [div=flex: 2 300px;
              min-height: 20rem;
              display: flex;
              flex-flow: row nowrap;
              align-items: stretch;
              gap: 10px;
              position: relative;]
                [div=flex: 0 50px;
                box-sizing: border-box;
                background: var(--bgColor);
                border: var(--border);
                height: 100%;
                position: relative;]
                  [div=display: flex;
                  box-sizing: border-box;
                  width: 100%;
                  height: 100%;
                  flex-flow: column nowrap;
                  align-items: center;
                  padding: 15px 10px;
                  gap: 1rem;]
                    [div=flex: 0 auto; /* FA icon or you can use a mask here */
                    box-sizing: border-box;
                    width: 100%;
                    aspect-ratio: 1;
                    text-align: center;]
                      [div=display: none;] replace with desired FA icon[/div]
                      &Main Tab \ group&[fa]fal &Preferred FA Icon \ text \ fa-sparkles&[/fa]
                    [/div]
                    [div=flex: 1 50px;
                    width: 1px;
                    background: var(--borderColor);]

[/div]
                  [/div]
                [/div]
                [div=flex: 1 200px;
                box-sizing: border-box;
                background: var(--bgColor);
                border: var(--border);]
                  [div=position: absolute;
                  box-sizing: border-box;
                  border: var(--border);
                  left: 70px;
                  top: 10px;
                  width: calc(100% - 80px);
                  height: calc(100% - 20px);
                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='675' height='900'%3E%3Cpath fill='%231d1d1d' d='m0 269 11.3 19.7c11.4 19.6 34 59 56.5 52s44.9-60.4 67.4-57.9c22.5 2.5 45.1 60.9 67.6 79.7 22.5 18.8 44.9-1.8 67.4-18.8 22.5-17 45.1-30.4 67.6 6.5C360.3 387 382.7 474 405 530.5c22.3 56.5 44.7 82.5 67.2 37.3 22.5-45.1 45.1-161.5 67.8-177 22.7-15.5 45.3 69.9 67.8 105.2s44.9 20.7 56 13.3L675 502V0H0Z'/%3E%3C/svg%3E%0A"),var(--gridIMG),linear-gradient(180deg, var(--borderColor), rgba(255,255,255,0) 100%);
                  background-position: center top, center center,center center;
                  background-size: 110% auto,auto,cover;
                  background-repeat: no-repeat,repeat,no-repeat;
                  background-blend-mode: darken;]

[/div]
                  [div=position: absolute;
                  right: 10%;
                  width: 45%;
                  bottom: 15%;
                  height: clamp(12rem,50%,400px);
                  border: var(--border);
                  box-sizing: border-box;
                  background: var(--borderColor);]
                    [div=position: relative;
                    display: block;
                    height: 100%;
                    width: 100%;
                    background-image: var(--charaIMG);
                    background-position: var(--charaIMGbwp);
                    background-size: var(--charaIMGbws);
                    filter: var(--bwFilter);
                    mix-blend-mode: multiply;]

[/div]
                  [/div]
                  [div=position: absolute; /* artist credit */
                  right: calc(10% + 10px);
                  width: 45%;
                  bottom: clamp(12rem + 15%,50% + 15%,400px + 15%);
                  font-size: 18px;
                  font-family: var(--accFont);
                  color: var(--bgColor);
                  text-align: right;
                  text-transform: uppercase;]
                    art: &Artist Name \ text&
                  [/div]
                  [div=position: relative;
                  width: 100%;
                  height: 100%;
                  box-sizing: border-box;
                  display: flex;
                  flex-flow: column nowrap;
                  justify-content: center;
                  gap: 10px;
                  padding-left: 1.75rem;
                  padding-top: 15cqw;
                  padding-right: 50%;]
                    [div=flex: 0 auto;
                    width: 100%;
                    height: 3.5rem;
                    pointer-events: none;
                    background-image: var(--charaIMG);
                    background-position: var(--navcharapos);
                    background-size: var(--navcharas);
                    box-sizing: border-box;
                    border: var(--border);
                    position: relative;]
                      
                    [/div]
                    [div=flex: 0 auto;
                    width: 100%;
                    height: 3.5rem;
                    pointer-events: none;
                    box-sizing: border-box;
                    border: var(--border);
                    background: var(--borderColor);
                    position: relative;]
                      [div=display: block;
                      height: 100%;
                      width: 100%;
                      background-image: var(--mechIMG);
                      background-position: var(--navmechpos);
                      background-size: var(--navmechs);
                      filter: saturate(0%) contrast(110%) blur(2px);
                      mix-blend-mode: multiply;]

[/div]
                      [div=display: block;
                      height: 100%;
                      width: 100%;
                      position: absolute;
                      top: 0px;
                      left: 0px;
                      background: var(--noiseIMG);
                      mix-blend-mode: soft-light;
                      opacity: .4;]

[/div]
                    [/div]
                  [/div]
                [/div]
              [/div]
              [div=flex: 3 300px;
              height: 33rem;
              min-height: 33rem;
              box-sizing: border-box;
              background: var(--bgColor);
              border: var(--border);
              position: relative;
              overflow: hidden;
              box-sizing: border-box;
              padding: 5cqw;
              pointer-events: auto;]
                [div=position: relative;
                width: 100%;
                container-type: inline-size;
                height: 100%;
                box-sizing: border-box;
                border: var(--border);
                overflow: hidden;]
                  [div=position: absolute;
                  height: 100%;
                  width: calc(100% + 25px);
                  top: 0px;
                  left: 0px;
                  box-sizing: border-box;
                  background: var(--txtColor);
                  overflow-x: hidden;
                  overflow-y: scroll;
                  pointer-events: auto;
                  padding-right: 25px;
                  scroll-snap-type: y proximity;]
                    [div=display: flex;
                    scroll-snap-align: start;
                    flex-flow: row wrap-reverse;
                    align-items: stretch;
                    gap: 1px;
                    background: var(--borderColor);
                    border-bottom: var(--border);]
                      [div=flex: 2 150px;
                      background: var(--bgColor);
                      padding: 1rem 1.25rem;
                      font-size: .9rem;
                      color: var(--txtColor);
                      display: flex;
                      flex-flow: column nowrap;
                      align-items: flex-start;
                      justify-content: center;
                      gap: 8px;]
                        &Basic Details \ group \ repeat&[div=flex: 0 auto;]
                          [div=display: block;
                          font-family: var(--accFont);
                          text-transform: uppercase;
                          font-size: 16px;]
                            &Detail (ex. Full Name) \ text&
                          [/div]
                          [div=display: block;
                          font-family: var(--txtFont);]
                            &Detail Answer (Ex. John Smith) \ text&
                          [/div]
                        [/div]&end&
                      [/div]
                      [div=flex: 1 125px;
                      min-height: 15rem;
                      background: var(--bgColor);
                      position: relative;
                      box-sizing: border-box;]
                        [div=position: absolute;
                        box-sizing: border-box;
                        border: var(--border);
                        background: var(--charaIMG2) no-repeat center center/cover;
                        top: 10px;
                        left: 10px;
                        height: calc(100% - 20px);
                        width: calc(100% - 20px);]

[/div]
                      [/div]
                    [/div]
                    [div=display: flex;
                    scroll-snap-align: start;
                    flex-flow: row wrap-reverse;
                    align-items: stretch;
                    gap: 1px;
                    background: var(--borderColor);
                    border-bottom: var(--border);]
                      [div=flex: 0 2.5rem;
                      background: var(--bgColor);
                      padding: 1rem 1.25rem;
                      font-size: .9rem;
                      color: var(--txtColor);
                      display: flex;
                      flex-flow: column nowrap;
                      align-items: center;
                      justify-content: center;]
                        [div=flex: 0 auto;
                        text-align: center;
                        color: var(--borderColor);]
                          [fa]&Preferred FA Icon \ text \fa-search&[/fa]
                        [/div]
                      [/div]
                      [div=flex: 1 150px; /* appearance section */
                      background: var(--bgColor);
                      padding: 1rem 1.25rem;
                      font-size: .9rem;
                      color: var(--txtColor);
                      font-family: var(--txtFont);
                      box-sizing: border-box;
                      text-align: justify;]
                        &Phsical Description \ content&
                      [/div]
                    [/div]
                    [div=display: block; /* personality section */
                    scroll-snap-align: start;
                    box-sizing: border-box;
                    background: var(--bgColor);
                    border-bottom: var(--border);
                    padding: 1rem 1.25rem;
                    font-size: .9rem;
                    color: var(--txtColor);
                    font-family: var(--txtFont);
                    text-align: justify;]
                      &Personality Content \ content&
                    [/div]
                    [div=display: flex;
                    width: 100%;
                    flex-flow: column nowrap;
                    justify-content: flex-start;
                    box-sizing: border-box;
                    scroll-snap-align: start;
                    background: var(--bgColor);
                    border-bottom: var(--border);
                    padding: 1rem;]
                      [div=display: block;
                      visibility: hidden;]
                        [accordion=100%]
                          &Accordion Slide \ group \ repeat& {slide=[div=display: flex; width: 100%; flex-flow: row wrap; visibility: visible; align-items: center; font-weight: normal; font-variant: normal; gap: 1rem; box-sizing: border-box;][div=flex: 0 4rem; aspect-ratio: 1; border: var(--border); box-sizing: border-box; position: relative; color: var(--borderColor); display: flex; flex-flow: row wrap; align-items: center; justify-content: center;font-size: 1.5rem;][fa]fal &Preferred FA Icon \ text \ fa-fingerprint&[/fa][/div][div=flex: 5 5rem; color: var(--txtColor); font-family: var(--accFont); text-transform: uppercase; font-size: 32px; padding: 0px .5rem; white-space: normal;]&Heading \ text \ advanced record&[div=display: block; font-size: .9rem; font-family: var(--txtFont);]&Subheading \ text \ additional information&[/div][/div][/div]}[div=display: block; line-height: 0px;visibility: visible; white-space: normal; padding-bottom: 1rem;]
                            [div=display: block;
                            box-sizing: border-box;
                            padding: .5rem 1.25rem;
                            position: relative;
                            margin-left: 2rem;
                            width: calc(100% - 2rem);
                            border-left: var(--border);
                            text-align: justify;]
                              [div=display: block; font-size: .9rem;text-align: justify; line-height: normal;font-family: var(--txtFont); position: relative;]&Slide Content \ content&[/div]
                            [/div]
                          [/div]{/slide}&end&&end&
                        [/accordion]
                      [/div]
                    [/div]
                    [div=display: block;
                    padding: 10px;
                    height: 100%;
                    box-sizing: border-box;
                    scroll-snap-align: start;
                    background: var(--bgColor);]
                      [div=display: block;
                      height: 100%;
                      border: var(--border);
                      background: var(--charaIMG3) no-repeat center center/cover;]

[/div]
                    [/div]
                  [/div]
                [/div]
              [/div]
            [/div]
          [/div]
        [/tab]
        [tab=testingforparttwoxxxxxx]
          [div=position: absolute; /* second tab container */
          top: 0px;
          height: 100%;
          left: 0px;
          width: 100%;
          line-height: normal;
          pointer-events: none;]
            [div=position: relative;
            display: flex;
            flex-flow: row wrap;
            align-items: stretch;
            gap: 10px;]
              [div=flex: 2 300px;
              min-height: 20rem;
              display: flex;
              flex-flow: row nowrap;
              align-items: stretch;
              gap: 10px;
              position: relative;]
                [div=flex: 0 50px;
                box-sizing: border-box;
                background: var(--bgColor);
                border: var(--border);
                height: 100%;
                position: relative;]
                  [div=display: flex;
                  width: 100%;
                  height: 100%;
                  flex-flow: column nowrap;
                  align-items: center;
                  box-sizing: border-box;
                  padding: 15px 10px;
                  gap: 1rem;]
                    [div=flex: 0 auto; /* FA icon or you can use a mask here */
                    box-sizing: border-box;
                    width: 100%;
                    aspect-ratio: 1;
                    text-align: center;]
                      [div=display: none;] replace with desired FA icon[/div]
                      [fa]fal &Secondary Tab \ group&&Preferred FA Icon \ text \ fa-wrench&[/fa]
                    [/div]
                    [div=flex: 1 50px;
                    width: 1px;
                    background: var(--borderColor);]

[/div]
                  [div=position: absolute;
                  right: 10%;
                  width: 45%;
                  bottom: 15%;
                  height: clamp(12rem,50%,400px);
                  border: var(--border);
                  box-sizing: border-box;
                  background: var(--borderColor);]
                    [div=position: relative;
                    display: block;
                    height: 100%;
                    width: 100%;
                    background-image: var(--mechIMG);
                    background-size: var(--mechIMGbws);
                    background-position: var(--mechIMGbwp);
                    filter: var(--bwFilter);
                    mix-blend-mode: multiply;]

[/div]
                  [/div]
                  [div=position: absolute; /* artist credit */
                  right: calc(10% + 10px);
                  width: 45%;
                  bottom: clamp(12rem + 15%,50% + 15%,400px + 15%);
                  font-size: 18px;
                  font-family: var(--accFont);
                  color: var(--bgColor);
                  text-align: right;
                  text-transform: uppercase;]
                    art: &Artist Name \ text&
                  [/div]
                  [div=position: relative;
                  width: 100%;
                  height: 100%;
                  box-sizing: border-box;
                  display: flex;
                  flex-flow: column nowrap;
                  justify-content: center;
                  gap: 10px;
                  padding-left: 1.75rem;
                  padding-top: 15cqw;
                  padding-right: 50%;]
                    [div=flex: 0 auto;
                    width: 100%;
                    height: 3.5rem;
                    pointer-events: none;
                    box-sizing: border-box;
                    border: var(--border);
                    background: var(--borderColor);
                    position: relative;]
                      [div=display: block;
                      height: 100%;
                      width: 100%;
                      background-image: var(--charaIMG);
                      background-position: var(--navcharapos);
                      background-size: var(--navcharas);
                      filter: saturate(0%) contrast(110%) blur(2px);
                      mix-blend-mode: multiply;]

[/div]
                    [/div]
                    [div=flex: 0 auto;
                    width: 100%;
                    height: 3.5rem;
                    pointer-events: none;
                    box-sizing: border-box;
                    border: var(--border);
                    background-image: var(--mechIMG);
                    background-position: var(--navmechpos);
                    background-size: var(--navmechs);
                    position: relative;]
                    [/div]
                  [/div]
                [/div]
              [/div]
              [div=flex: 3 300px;
              height: 33rem;
              min-height: 33rem;
              box-sizing: border-box;
              background: var(--bgColor);
              border: var(--border);
              position: relative;
              overflow: hidden;
              box-sizing: border-box;
              padding: 5cqw;
              pointer-events: auto;]
                [div=position: relative;
                width: 100%;
                container-type: inline-size;
                height: 100%;
                box-sizing: border-box;
                border: var(--border);
                overflow: hidden;]
                  [div=position: absolute;
                  height: 100%;
                  width: calc(100% + 25px);
                  top: 0px;
                  left: 0px;
                  box-sizing: border-box;
                  background: var(--txtColor);
                  overflow-x: hidden;
                  overflow-y: scroll;
                  pointer-events: auto;
                  padding-right: 25px;
                  scroll-snap-type: y proximity;]
                    [div=display: flex;
                    width: 100%;
                    height: 100%;
                    flex-flow: column nowrap;
                    align-items: stretch;
                    gap: 1px;
                    background: var(--borderColor);
                    border-bottom: var(--border);]
                      [div=flex: 1 100px;
                      box-sizing: border-box;
                      background: var(--bgColor);
                      position: relative;
                      scroll-snap-align: start;]
                        [div=position: absolute;
                        top: 10px;
                        left: 10px;
                        box-sizing: border-box;
                        border: var(--border);
                        height: calc(100% - 20px);
                        width: calc(100% - 20px);
                        background: var(--mechIMG) no-repeat center center/cover;]

[/div]
                      [/div]
                      [div=flex: 0 auto; /* title area */
                      box-sizing: border-box;
                      background: var(--bgColor);
                      padding: 1rem 1.5rem;
                      display: flex;
                      flex-flow: row wrap;
                      align-items: center;
                      color: var(--txtColor);
                      gap: 3px 1rem;
                      scroll-snap-align: start;]
                        [div=flex: 0 auto; /* heading */
                        font-family: var(--accFont);
                        font-size: 24px;
                        text-transform: uppercase;]
                          &Heading \ text&
                        [/div]
                        [div=flex: 0 auto; /* subheading */
                        font-family: var(--txtFont);
                        font-size: .85rem;
                        text-transform: uppercase;]
                          [i]&Subheading \ text&[/i]
                        [/div]
                      [/div]
                    [/div]
                    [div=display: flex; /* equip list */
                    scroll-snap-align: start;
                    flex-flow: column nowrap;
                    align-items: stretch;
                    gap: 1px;
                    background: var(--borderColor);
                    border-bottom: var(--border);
                    border-left: 10cqw solid var(--txtColor);]
                      &Equip \ group \ repeat&[div=flex: 0 auto; /* equip */
                      display: flex;
                      flex-flow: row wrap;
                      align-items: stretch;
                      gap: 1px;]
                        [div=flex: 0 2rem;
                        font-family: var(--accFont);
                        color: var(--txtColor);
                        display: flex;
                        flex-flow: row nowrap;
                        align-items: center;
                        justify-content: center;]
                          [div=display: none;]you can use numbers or FA icons[/div]
                          [fa]fal &Preferred FA Icon \ text \ fa-stars&[/fa]
                        [/div]
                        [div=flex: 1 100px;
                        font-family: var(--txtFont);
                        color: var(--txtColor);
                        padding: 10px;
                        background: var(--bgColor);
                        font-size: .85rem;
                        display: grid;
                        align-items: center;]
                          &Equip Detail \ text&
                        [/div]
                      [/div]&end&
                    [/div]
                    [div=display: flex;
                    scroll-snap-align: start;
                    flex-flow: row nowrap;
                    align-items: stretch;
                    gap: 1px;
                    background: var(--borderColor);]
                      [div=flex: 1 150px; /* text area */
                      background: var(--bgColor);
                      padding: 1rem 1.25rem;
                      font-size: .9rem;
                      color: var(--txtColor);
                      font-family: var(--txtFont);
                      box-sizing: border-box;
                      text-align: justify;]
                        &Additional Information / Description \ content&
                      [/div]
                      [div=flex: 0 2.5rem;
                      background: var(--bgColor);
                      padding: 1rem 1.25rem;
                      font-size: .9rem;
                      color: var(--txtColor);
                      display: flex;
                      flex-flow: column nowrap;
                      align-items: center;
                      justify-content: center;]
                        [div=flex: 0 auto;
                        text-align: center;
                        color: var(--borderColor);]
                          [fa]far &Preferred FA Icon \ text \ fa-cog&&end&[/fa]
                        [/div]
                      [/div]
                    [/div]
                  [/div]
                [/div]
              [/div]
            [/div]
          [/div]
        [/tab]
      [/tabs]
    [/div]
    [div=flex: 3 300px;
    height: 33rem;
    min-height: 33rem;]
      
    [/div]
  [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;]\r\n    [font=Oxanium][USER=32692]@fluticasone[/USER][/font]\r\n    [font=Micro 5][USER=32692]@fluticasone[/USER][/font]\r\n    feel free to replace any FA icons with ones of your choosing\r\n  [/div]\r\n  [div=",
  {
    "type": "group",
    "description": "Initial Variables",
    "markerStart": {
      "type": "group",
      "description": "Initial Variables",
      "original": "&Initial Variables \\ group&",
      "repeat": false,
      "indices": [
        231,
        257
      ]
    },
    "repeat": false,
    "originalChildren": [
      "font-size: initial; /* root class */\r\n  --bwFilter: ",
      {
        "type": "text",
        "description": "Filter (leave as is if unsure)",
        "marker": {
          "type": "text",
          "description": "Filter (leave as is if unsure)",
          "defaultValue": "saturate(0%) contrast(110%)",
          "original": "&Filter (leave as is if unsure) \\ text \\ saturate(0%) contrast(110%)&",
          "indices": [
            310,
            378
          ]
        },
        "value": "saturate(0%) contrast(110%)"
      },
      "; /* adjust as needed for your images */\r\n  ",
      {
        "type": "group",
        "description": "Main Images",
        "markerStart": {
          "type": "group",
          "description": "Main Images",
          "original": "&Main Images \\ group&",
          "repeat": false,
          "indices": [
            423,
            443
          ]
        },
        "repeat": false,
        "originalChildren": [
          "--charaIMG: url('",
          {
            "type": "text",
            "description": "Main Character IMG URL",
            "marker": {
              "type": "text",
              "description": "Main Character IMG URL",
              "defaultValue": "",
              "original": "&Main Character IMG URL \\ text&",
              "indices": [
                461,
                491
              ]
            }
          },
          "'); /* nav image for first */\r\n  --charaIMGbwp: ",
          {
            "type": "text",
            "description": "Image Position (leave as is if unsure)",
            "marker": {
              "type": "text",
              "description": "Image Position (leave as is if unsure)",
              "defaultValue": "center center",
              "original": "&Image Position (leave as is if unsure) \\ text \\ center center&",
              "indices": [
                540,
                602
              ]
            },
            "value": "center center"
          },
          "; /* position of desaturated IMG. use 'center center' if unsure */\r\n  --charaIMGbws: ",
          {
            "type": "text",
            "description": "Image Size (leave as is if unsure)",
            "marker": {
              "type": "text",
              "description": "Image Size (leave as is if unsure)",
              "defaultValue": "cover",
              "original": "&Image Size (leave as is if unsure) \\ text \\ cover&",
              "indices": [
                688,
                738
              ]
            },
            "value": "cover"
          },
          "; /* size of desaturated IMG. use 'cover' if unsure */\r\n  --charaIMG2: url('",
          {
            "type": "text",
            "description": "Basic Details IMG URL",
            "marker": {
              "type": "text",
              "description": "Basic Details IMG URL",
              "defaultValue": "",
              "original": "&Basic Details IMG URL \\ text&",
              "indices": [
                815,
                844
              ]
            }
          },
          "'); /* image right of basic deets */\r\n  --charaIMG3: url('",
          {
            "type": "text",
            "description": "End IMG URL",
            "marker": {
              "type": "text",
              "description": "End IMG URL",
              "defaultValue": "",
              "original": "&End IMG URL \\ text&",
              "indices": [
                903,
                922
              ]
            }
          },
          "'); /* last image in first tab */"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            956,
            960
          ]
        }
      },
      "",
      {
        "type": "group",
        "description": "Secondary Images",
        "markerStart": {
          "type": "group",
          "description": "Secondary Images",
          "original": "&Secondary Images \\ group&",
          "repeat": false,
          "indices": [
            961,
            986
          ]
        },
        "repeat": false,
        "originalChildren": [
          "\r\n  --mechIMG: url('",
          {
            "type": "text",
            "description": "Secondary Image URL",
            "marker": {
              "type": "text",
              "description": "Secondary Image URL",
              "defaultValue": "",
              "original": "&Secondary Image URL \\ text&",
              "indices": [
                1007,
                1034
              ]
            }
          },
          "'); /* main image for second tab */\r\n  --mechIMGbwp: ",
          {
            "type": "text",
            "description": "Image Position (leave as is if unsure)",
            "marker": {
              "type": "text",
              "description": "Image Position (leave as is if unsure)",
              "defaultValue": "center center",
              "original": "&Image Position (leave as is if unsure) \\ text \\ center center&",
              "indices": [
                1088,
                1150
              ]
            },
            "value": "center center"
          },
          "; /* position of desaturated IMG. use 'center center' if unsure */\r\n  --mechIMGbws: ",
          {
            "type": "text",
            "description": "Image Size (leave as is if unsure)",
            "marker": {
              "type": "text",
              "description": "Image Size (leave as is if unsure)",
              "defaultValue": "cover",
              "original": "&Image Size (leave as is if unsure) \\ text \\ cover&",
              "indices": [
                1235,
                1285
              ]
            },
            "value": "cover"
          },
          "; /* size of desaturated IMG. use 'cover' if unsure */"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            1340,
            1344
          ]
        }
      },
      "\r\n  ",
      {
        "type": "group",
        "description": "Navigation Images",
        "markerStart": {
          "type": "group",
          "description": "Navigation Images",
          "original": "&Navigation Images \\ group&",
          "repeat": false,
          "indices": [
            1349,
            1375
          ]
        },
        "repeat": false,
        "originalChildren": [
          "--navcharapos: ",
          {
            "type": "text",
            "description": "Main Character Image Position (leave as is if unsure)",
            "marker": {
              "type": "text",
              "description": "Main Character Image Position (leave as is if unsure)",
              "defaultValue": "center center",
              "original": "&Main Character Image Position (leave as is if unsure) \\ text \\ center center&",
              "indices": [
                1391,
                1468
              ]
            },
            "value": "center center"
          },
          "; /* position of IMG on navigation button. use 'center center' if unsure */\r\n  --navcharas: ",
          {
            "type": "text",
            "description": "Main Character Image Size (leave as is if unsure)",
            "marker": {
              "type": "text",
              "description": "Main Character Image Size (leave as is if unsure)",
              "defaultValue": "cover",
              "original": "&Main Character Image Size (leave as is if unsure) \\ text \\ cover&",
              "indices": [
                1561,
                1626
              ]
            },
            "value": "cover"
          },
          "; /* size of IMG on navigation button. use 'cover' if unsure */\r\n  --navmechpos: ",
          {
            "type": "text",
            "description": "Secondary Image Position (leave as is if unsure)",
            "marker": {
              "type": "text",
              "description": "Secondary Image Position (leave as is if unsure)",
              "defaultValue": "center center",
              "original": "&Secondary Image Position (leave as is if unsure) \\ text \\ center center&",
              "indices": [
                1708,
                1780
              ]
            },
            "value": "center center"
          },
          "; /* position of IMG on navigation button. use 'center center' if unsure */\r\n  --navmechs: ",
          {
            "type": "text",
            "description": "Secondary Image Size (leave as is if unsure)",
            "marker": {
              "type": "text",
              "description": "Secondary Image Size (leave as is if unsure)",
              "defaultValue": "cover",
              "original": "&Secondary Image Size (leave as is if unsure) \\ text \\ cover&",
              "indices": [
                1872,
                1932
              ]
            },
            "value": "cover"
          },
          "; /* size of IMG on navigation button. use 'cover' if unsure */"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            1996,
            2000
          ]
        }
      },
      "\r\n  ",
      {
        "type": "group",
        "description": "Colors",
        "markerStart": {
          "type": "group",
          "description": "Colors",
          "original": "&Colors \\ group&",
          "repeat": false,
          "indices": [
            2005,
            2020
          ]
        },
        "repeat": false,
        "originalChildren": [
          "--bgColor: ",
          {
            "type": "text",
            "description": "Background Color",
            "marker": {
              "type": "text",
              "description": "Background Color",
              "defaultValue": "#f3f3f3",
              "original": "&Background Color \\ text \\ #f3f3f3&",
              "indices": [
                2032,
                2066
              ]
            },
            "value": "#f3f3f3"
          },
          "; /* main bg color */\r\n  --txtColor: ",
          {
            "type": "text",
            "description": "Text Color",
            "marker": {
              "type": "text",
              "description": "Text Color",
              "defaultValue": "#1d1d1d",
              "original": "&Text Color \\ text \\ #1d1d1d&",
              "indices": [
                2104,
                2132
              ]
            },
            "value": "#1d1d1d"
          },
          "; /* color of text */\r\n  --borderColor: ",
          {
            "type": "text",
            "description": "Border Color",
            "marker": {
              "type": "text",
              "description": "Border Color",
              "defaultValue": "#a8a8a8",
              "original": "&Border Color \\ text \\ #a8a8a8&",
              "indices": [
                2173,
                2203
              ]
            },
            "value": "#a8a8a8"
          },
          "; /* color of grid borders */"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            2233,
            2237
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        2238,
        2242
      ]
    }
  },
  "\r\n  --txtFont: 'Oxanium', sans-serif;\r\n  --accFont: 'Micro 5', sans-serif;\r\n  position: relative;\r\n  overflow: hidden;\r\n  margin: 1rem auto;\r\n  width: clamp(250px,calc(100% - 2rem),1000px);\r\n  display: flex;\r\n  flex-flow: row wrap;\r\n  align-items: stretch;\r\n  gap: 10px;\r\n  color: var(--txtColor);\r\n  container-type: inline-size;\r\n  --noiseIMG: url('https://i.imgur.com/UdjBt1F.png');\r\n  --gridIMG: url('https://i.imgur.com/6Kp74bp.png');\r\n  --border: 1px solid var(--borderColor);\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;]\r\n    [div=flex: 2 300px;\r\n    min-height: 20rem;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    padding-left: 75px;\r\n    padding-top: calc(15cqw + 2.25rem);\r\n    overflow: hidden;\r\n    line-height: calc(3.4rem + 5px);]\r\n      [tabs]\r\n        [tab=testingforpartonexxxxxx]\r\n          [div=position: absolute; /* first tab container */\r\n          top: 0px;\r\n          height: 100%;\r\n          left: 0px;\r\n          width: 100%;\r\n          line-height: normal;\r\n          pointer-events: none;]\r\n            [div=position: relative;\r\n            display: flex;\r\n            flex-flow: row wrap;\r\n            align-items: stretch;\r\n            gap: 10px;]\r\n              [div=flex: 2 300px;\r\n              min-height: 20rem;\r\n              display: flex;\r\n              flex-flow: row nowrap;\r\n              align-items: stretch;\r\n              gap: 10px;\r\n              position: relative;]\r\n                [div=flex: 0 50px;\r\n                box-sizing: border-box;\r\n                background: var(--bgColor);\r\n                border: var(--border);\r\n                height: 100%;\r\n                position: relative;]\r\n                  [div=display: flex;\r\n                  box-sizing: border-box;\r\n                  width: 100%;\r\n                  height: 100%;\r\n                  flex-flow: column nowrap;\r\n                  align-items: center;\r\n                  padding: 15px 10px;\r\n                  gap: 1rem;]\r\n                    [div=flex: 0 auto; /* FA icon or you can use a mask here */\r\n                    box-sizing: border-box;\r\n                    width: 100%;\r\n                    aspect-ratio: 1;\r\n                    text-align: center;]\r\n                      [div=display: none;] replace with desired FA icon[/div]\r\n                      ",
  {
    "type": "group",
    "description": "Main Tab",
    "markerStart": {
      "type": "group",
      "description": "Main Tab",
      "original": "&Main Tab \\ group&",
      "repeat": false,
      "indices": [
        4636,
        4653
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[fa]fal ",
      {
        "type": "text",
        "description": "Preferred FA Icon",
        "marker": {
          "type": "text",
          "description": "Preferred FA Icon",
          "defaultValue": "fa-sparkles",
          "original": "&Preferred FA Icon \\ text \\ fa-sparkles&",
          "indices": [
            4662,
            4701
          ]
        },
        "value": "fa-sparkles"
      },
      "[/fa]\r\n                    [/div]\r\n                    [div=flex: 1 50px;\r\n                    width: 1px;\r\n                    background: var(--borderColor);]\r\n\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n                [div=flex: 1 200px;\r\n                box-sizing: border-box;\r\n                background: var(--bgColor);\r\n                border: var(--border);]\r\n                  [div=position: absolute;\r\n                  box-sizing: border-box;\r\n                  border: var(--border);\r\n                  left: 70px;\r\n                  top: 10px;\r\n                  width: calc(100% - 80px);\r\n                  height: calc(100% - 20px);\r\n                  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='675' height='900'%3E%3Cpath fill='%231d1d1d' d='m0 269 11.3 19.7c11.4 19.6 34 59 56.5 52s44.9-60.4 67.4-57.9c22.5 2.5 45.1 60.9 67.6 79.7 22.5 18.8 44.9-1.8 67.4-18.8 22.5-17 45.1-30.4 67.6 6.5C360.3 387 382.7 474 405 530.5c22.3 56.5 44.7 82.5 67.2 37.3 22.5-45.1 45.1-161.5 67.8-177 22.7-15.5 45.3 69.9 67.8 105.2s44.9 20.7 56 13.3L675 502V0H0Z'/%3E%3C/svg%3E%0A\"),var(--gridIMG),linear-gradient(180deg, var(--borderColor), rgba(255,255,255,0) 100%);\r\n                  background-position: center top, center center,center center;\r\n                  background-size: 110% auto,auto,cover;\r\n                  background-repeat: no-repeat,repeat,no-repeat;\r\n                  background-blend-mode: darken;]\r\n\r\n                  [/div]\r\n                  [div=position: absolute;\r\n                  right: 10%;\r\n                  width: 45%;\r\n                  bottom: 15%;\r\n                  height: clamp(12rem,50%,400px);\r\n                  border: var(--border);\r\n                  box-sizing: border-box;\r\n                  background: var(--borderColor);]\r\n                    [div=position: relative;\r\n                    display: block;\r\n                    height: 100%;\r\n                    width: 100%;\r\n                    background-image: var(--charaIMG);\r\n                    background-position: var(--charaIMGbwp);\r\n                    background-size: var(--charaIMGbws);\r\n                    filter: var(--bwFilter);\r\n                    mix-blend-mode: multiply;]\r\n\r\n                    [/div]\r\n                  [/div]\r\n                  [div=position: absolute; /* artist credit */\r\n                  right: calc(10% + 10px);\r\n                  width: 45%;\r\n                  bottom: clamp(12rem + 15%,50% + 15%,400px + 15%);\r\n                  font-size: 18px;\r\n                  font-family: var(--accFont);\r\n                  color: var(--bgColor);\r\n                  text-align: right;\r\n                  text-transform: uppercase;]\r\n                    art: ",
      {
        "type": "text",
        "description": "Artist Name",
        "marker": {
          "type": "text",
          "description": "Artist Name",
          "defaultValue": "",
          "original": "&Artist Name \\ text&",
          "indices": [
            7483,
            7502
          ]
        }
      },
      "\r\n                  [/div]\r\n                  [div=position: relative;\r\n                  width: 100%;\r\n                  height: 100%;\r\n                  box-sizing: border-box;\r\n                  display: flex;\r\n                  flex-flow: column nowrap;\r\n                  justify-content: center;\r\n                  gap: 10px;\r\n                  padding-left: 1.75rem;\r\n                  padding-top: 15cqw;\r\n                  padding-right: 50%;]\r\n                    [div=flex: 0 auto;\r\n                    width: 100%;\r\n                    height: 3.5rem;\r\n                    pointer-events: none;\r\n                    background-image: var(--charaIMG);\r\n                    background-position: var(--navcharapos);\r\n                    background-size: var(--navcharas);\r\n                    box-sizing: border-box;\r\n                    border: var(--border);\r\n                    position: relative;]\r\n                      \r\n                    [/div]\r\n                    [div=flex: 0 auto;\r\n                    width: 100%;\r\n                    height: 3.5rem;\r\n                    pointer-events: none;\r\n                    box-sizing: border-box;\r\n                    border: var(--border);\r\n                    background: var(--borderColor);\r\n                    position: relative;]\r\n                      [div=display: block;\r\n                      height: 100%;\r\n                      width: 100%;\r\n                      background-image: var(--mechIMG);\r\n                      background-position: var(--navmechpos);\r\n                      background-size: var(--navmechs);\r\n                      filter: saturate(0%) contrast(110%) blur(2px);\r\n                      mix-blend-mode: multiply;]\r\n\r\n                      [/div]\r\n                      [div=display: block;\r\n                      height: 100%;\r\n                      width: 100%;\r\n                      position: absolute;\r\n                      top: 0px;\r\n                      left: 0px;\r\n                      background: var(--noiseIMG);\r\n                      mix-blend-mode: soft-light;\r\n                      opacity: .4;]\r\n\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n              [/div]\r\n              [div=flex: 3 300px;\r\n              height: 33rem;\r\n              min-height: 33rem;\r\n              box-sizing: border-box;\r\n              background: var(--bgColor);\r\n              border: var(--border);\r\n              position: relative;\r\n              overflow: hidden;\r\n              box-sizing: border-box;\r\n              padding: 5cqw;\r\n              pointer-events: auto;]\r\n                [div=position: relative;\r\n                width: 100%;\r\n                container-type: inline-size;\r\n                height: 100%;\r\n                box-sizing: border-box;\r\n                border: var(--border);\r\n                overflow: hidden;]\r\n                  [div=position: absolute;\r\n                  height: 100%;\r\n                  width: calc(100% + 25px);\r\n                  top: 0px;\r\n                  left: 0px;\r\n                  box-sizing: border-box;\r\n                  background: var(--txtColor);\r\n                  overflow-x: hidden;\r\n                  overflow-y: scroll;\r\n                  pointer-events: auto;\r\n                  padding-right: 25px;\r\n                  scroll-snap-type: y proximity;]\r\n                    [div=display: flex;\r\n                    scroll-snap-align: start;\r\n                    flex-flow: row wrap-reverse;\r\n                    align-items: stretch;\r\n                    gap: 1px;\r\n                    background: var(--borderColor);\r\n                    border-bottom: var(--border);]\r\n                      [div=flex: 2 150px;\r\n                      background: var(--bgColor);\r\n                      padding: 1rem 1.25rem;\r\n                      font-size: .9rem;\r\n                      color: var(--txtColor);\r\n                      display: flex;\r\n                      flex-flow: column nowrap;\r\n                      align-items: flex-start;\r\n                      justify-content: center;\r\n                      gap: 8px;]\r\n                        ",
      {
        "type": "group",
        "description": "Basic Details",
        "markerStart": {
          "type": "group",
          "description": "Basic Details",
          "original": "&Basic Details \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            11679,
            11710
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 auto;]\r\n                          [div=display: block;\r\n                          font-family: var(--accFont);\r\n                          text-transform: uppercase;\r\n                          font-size: 16px;]\r\n                            ",
          {
            "type": "text",
            "description": "Detail (ex. Full Name)",
            "marker": {
              "type": "text",
              "description": "Detail (ex. Full Name)",
              "defaultValue": "",
              "original": "&Detail (ex. Full Name) \\ text&",
              "indices": [
                11963,
                11993
              ]
            }
          },
          "\r\n                          [/div]\r\n                          [div=display: block;\r\n                          font-family: var(--txtFont);]\r\n                            ",
          {
            "type": "text",
            "description": "Detail Answer (Ex. John Smith)",
            "marker": {
              "type": "text",
              "description": "Detail Answer (Ex. John Smith)",
              "defaultValue": "",
              "original": "&Detail Answer (Ex. John Smith) \\ text&",
              "indices": [
                12163,
                12201
              ]
            }
          },
          "\r\n                          [/div]\r\n                        [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            12268,
            12272
          ]
        }
      },
      "\r\n                      [/div]\r\n                      [div=flex: 1 125px;\r\n                      min-height: 15rem;\r\n                      background: var(--bgColor);\r\n                      position: relative;\r\n                      box-sizing: border-box;]\r\n                        [div=position: absolute;\r\n                        box-sizing: border-box;\r\n                        border: var(--border);\r\n                        background: var(--charaIMG2) no-repeat center center/cover;\r\n                        top: 10px;\r\n                        left: 10px;\r\n                        height: calc(100% - 20px);\r\n                        width: calc(100% - 20px);]\r\n\r\n                        [/div]\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: flex;\r\n                    scroll-snap-align: start;\r\n                    flex-flow: row wrap-reverse;\r\n                    align-items: stretch;\r\n                    gap: 1px;\r\n                    background: var(--borderColor);\r\n                    border-bottom: var(--border);]\r\n                      [div=flex: 0 2.5rem;\r\n                      background: var(--bgColor);\r\n                      padding: 1rem 1.25rem;\r\n                      font-size: .9rem;\r\n                      color: var(--txtColor);\r\n                      display: flex;\r\n                      flex-flow: column nowrap;\r\n                      align-items: center;\r\n                      justify-content: center;]\r\n                        [div=flex: 0 auto;\r\n                        text-align: center;\r\n                        color: var(--borderColor);]\r\n                          [fa]",
      {
        "type": "text",
        "description": "Preferred FA Icon",
        "marker": {
          "type": "text",
          "description": "Preferred FA Icon",
          "defaultValue": "fa-search",
          "original": "&Preferred FA Icon \\ text \\fa-search&",
          "indices": [
            13931,
            13967
          ]
        },
        "value": "fa-search"
      },
      "[/fa]\r\n                        [/div]\r\n                      [/div]\r\n                      [div=flex: 1 150px; /* appearance section */\r\n                      background: var(--bgColor);\r\n                      padding: 1rem 1.25rem;\r\n                      font-size: .9rem;\r\n                      color: var(--txtColor);\r\n                      font-family: var(--txtFont);\r\n                      box-sizing: border-box;\r\n                      text-align: justify;]\r\n                        ",
      {
        "type": "content",
        "description": "Phsical Description",
        "marker": {
          "type": "content",
          "description": "Phsical Description",
          "original": "&Phsical Description \\ content&",
          "indices": [
            14458,
            14488
          ]
        }
      },
      "\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: block; /* personality section */\r\n                    scroll-snap-align: start;\r\n                    box-sizing: border-box;\r\n                    background: var(--bgColor);\r\n                    border-bottom: var(--border);\r\n                    padding: 1rem 1.25rem;\r\n                    font-size: .9rem;\r\n                    color: var(--txtColor);\r\n                    font-family: var(--txtFont);\r\n                    text-align: justify;]\r\n                      ",
      {
        "type": "content",
        "description": "Personality Content",
        "marker": {
          "type": "content",
          "description": "Personality Content",
          "original": "&Personality Content \\ content&",
          "indices": [
            15052,
            15082
          ]
        }
      },
      "\r\n                    [/div]\r\n                    [div=display: flex;\r\n                    width: 100%;\r\n                    flex-flow: column nowrap;\r\n                    justify-content: flex-start;\r\n                    box-sizing: border-box;\r\n                    scroll-snap-align: start;\r\n                    background: var(--bgColor);\r\n                    border-bottom: var(--border);\r\n                    padding: 1rem;]\r\n                      [div=display: block;\r\n                      visibility: hidden;]\r\n                        [accordion=100%]\r\n                          ",
      {
        "type": "group",
        "description": "Accordion Slide",
        "markerStart": {
          "type": "group",
          "description": "Accordion Slide",
          "original": "&Accordion Slide \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            15670,
            15703
          ]
        },
        "repeat": true,
        "originalChildren": [
          " {slide=[div=display: flex; width: 100%; flex-flow: row wrap; visibility: visible; align-items: center; font-weight: normal; font-variant: normal; gap: 1rem; box-sizing: border-box;][div=flex: 0 4rem; aspect-ratio: 1; border: var(--border); box-sizing: border-box; position: relative; color: var(--borderColor); display: flex; flex-flow: row wrap; align-items: center; justify-content: center;font-size: 1.5rem;][fa]fal ",
          {
            "type": "text",
            "description": "Preferred FA Icon",
            "marker": {
              "type": "text",
              "description": "Preferred FA Icon",
              "defaultValue": "fa-fingerprint",
              "original": "&Preferred FA Icon \\ text \\ fa-fingerprint&",
              "indices": [
                16124,
                16166
              ]
            },
            "value": "fa-fingerprint"
          },
          "[/fa][/div][div=flex: 5 5rem; color: var(--txtColor); font-family: var(--accFont); text-transform: uppercase; font-size: 32px; padding: 0px .5rem; white-space: normal;]",
          {
            "type": "text",
            "description": "Heading",
            "marker": {
              "type": "text",
              "description": "Heading",
              "defaultValue": "advanced record",
              "original": "&Heading \\ text \\ advanced record&",
              "indices": [
                16335,
                16368
              ]
            },
            "value": "advanced record"
          },
          "[div=display: block; font-size: .9rem; font-family: var(--txtFont);]",
          {
            "type": "text",
            "description": "Subheading",
            "marker": {
              "type": "text",
              "description": "Subheading",
              "defaultValue": "additional information",
              "original": "&Subheading \\ text \\ additional information&",
              "indices": [
                16437,
                16480
              ]
            },
            "value": "additional information"
          },
          "[/div][/div][/div]}[div=display: block; line-height: 0px;visibility: visible; white-space: normal; padding-bottom: 1rem;]\r\n                            [div=display: block;\r\n                            box-sizing: border-box;\r\n                            padding: .5rem 1.25rem;\r\n                            position: relative;\r\n                            margin-left: 2rem;\r\n                            width: calc(100% - 2rem);\r\n                            border-left: var(--border);\r\n                            text-align: justify;]\r\n                              [div=display: block; font-size: .9rem;text-align: justify; line-height: normal;font-family: var(--txtFont); position: relative;]",
          {
            "type": "content",
            "description": "Slide Content",
            "marker": {
              "type": "content",
              "description": "Slide Content",
              "original": "&Slide Content \\ content&",
              "indices": [
                17178,
                17202
              ]
            }
          },
          "[/div]\r\n                            [/div]\r\n                          [/div]{/slide}"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            17287,
            17291
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        17292,
        17296
      ]
    }
  },
  "\r\n                        [/accordion]\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: block;\r\n                    padding: 10px;\r\n                    height: 100%;\r\n                    box-sizing: border-box;\r\n                    scroll-snap-align: start;\r\n                    background: var(--bgColor);]\r\n                      [div=display: block;\r\n                      height: 100%;\r\n                      border: var(--border);\r\n                      background: var(--charaIMG3) no-repeat center center/cover;]\r\n\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        [/tab]\r\n        [tab=testingforparttwoxxxxxx]\r\n          [div=position: absolute; /* second tab container */\r\n          top: 0px;\r\n          height: 100%;\r\n          left: 0px;\r\n          width: 100%;\r\n          line-height: normal;\r\n          pointer-events: none;]\r\n            [div=position: relative;\r\n            display: flex;\r\n            flex-flow: row wrap;\r\n            align-items: stretch;\r\n            gap: 10px;]\r\n              [div=flex: 2 300px;\r\n              min-height: 20rem;\r\n              display: flex;\r\n              flex-flow: row nowrap;\r\n              align-items: stretch;\r\n              gap: 10px;\r\n              position: relative;]\r\n                [div=flex: 0 50px;\r\n                box-sizing: border-box;\r\n                background: var(--bgColor);\r\n                border: var(--border);\r\n                height: 100%;\r\n                position: relative;]\r\n                  [div=display: flex;\r\n                  width: 100%;\r\n                  height: 100%;\r\n                  flex-flow: column nowrap;\r\n                  align-items: center;\r\n                  box-sizing: border-box;\r\n                  padding: 15px 10px;\r\n                  gap: 1rem;]\r\n                    [div=flex: 0 auto; /* FA icon or you can use a mask here */\r\n                    box-sizing: border-box;\r\n                    width: 100%;\r\n                    aspect-ratio: 1;\r\n                    text-align: center;]\r\n                      [div=display: none;] replace with desired FA icon[/div]\r\n                      [fa]fal ",
  {
    "type": "group",
    "description": "Secondary Tab",
    "markerStart": {
      "type": "group",
      "description": "Secondary Tab",
      "original": "&Secondary Tab \\ group&",
      "repeat": false,
      "indices": [
        19585,
        19607
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "text",
        "description": "Preferred FA Icon",
        "marker": {
          "type": "text",
          "description": "Preferred FA Icon",
          "defaultValue": "fa-wrench",
          "original": "&Preferred FA Icon \\ text \\ fa-wrench&",
          "indices": [
            19608,
            19645
          ]
        },
        "value": "fa-wrench"
      },
      "[/fa]\r\n                    [/div]\r\n                    [div=flex: 1 50px;\r\n                    width: 1px;\r\n                    background: var(--borderColor);]\r\n\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n                [div=flex: 1 200px;\r\n                box-sizing: border-box;\r\n                background: var(--bgColor);\r\n                border: var(--border);]\r\n                  [div=position: absolute;\r\n                  box-sizing: border-box;\r\n                  border: var(--border);\r\n                  left: 70px;\r\n                  top: 10px;\r\n                  width: calc(100% - 80px);\r\n                  height: calc(100% - 20px);\r\n                  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='675' height='900'%3E%3Cpath fill='%231d1d1d' d='m0 269 11.3 19.7c11.4 19.6 34 59 56.5 52s44.9-60.4 67.4-57.9c22.5 2.5 45.1 60.9 67.6 79.7 22.5 18.8 44.9-1.8 67.4-18.8 22.5-17 45.1-30.4 67.6 6.5C360.3 387 382.7 474 405 530.5c22.3 56.5 44.7 82.5 67.2 37.3 22.5-45.1 45.1-161.5 67.8-177 22.7-15.5 45.3 69.9 67.8 105.2s44.9 20.7 56 13.3L675 502V0H0Z'/%3E%3C/svg%3E%0A\"),var(--gridIMG),linear-gradient(180deg, var(--borderColor), rgba(255,255,255,0) 100%);\r\n                  background-position: center top, center center,center center;\r\n                  background-size: 110% auto,auto,cover;\r\n                  background-repeat: no-repeat,repeat,no-repeat;\r\n                  background-blend-mode: darken;]\r\n\r\n                  [/div]\r\n                  [div=position: absolute;\r\n                  right: 10%;\r\n                  width: 45%;\r\n                  bottom: 15%;\r\n                  height: clamp(12rem,50%,400px);\r\n                  border: var(--border);\r\n                  box-sizing: border-box;\r\n                  background: var(--borderColor);]\r\n                    [div=position: relative;\r\n                    display: block;\r\n                    height: 100%;\r\n                    width: 100%;\r\n                    background-image: var(--mechIMG);\r\n                    background-size: var(--mechIMGbws);\r\n                    background-position: var(--mechIMGbwp);\r\n                    filter: var(--bwFilter);\r\n                    mix-blend-mode: multiply;]\r\n\r\n                    [/div]\r\n                  [/div]\r\n                  [div=position: absolute; /* artist credit */\r\n                  right: calc(10% + 10px);\r\n                  width: 45%;\r\n                  bottom: clamp(12rem + 15%,50% + 15%,400px + 15%);\r\n                  font-size: 18px;\r\n                  font-family: var(--accFont);\r\n                  color: var(--bgColor);\r\n                  text-align: right;\r\n                  text-transform: uppercase;]\r\n                    art: ",
      {
        "type": "text",
        "description": "Artist Name",
        "marker": {
          "type": "text",
          "description": "Artist Name",
          "defaultValue": "",
          "original": "&Artist Name \\ text&",
          "indices": [
            22424,
            22443
          ]
        }
      },
      "\r\n                  [/div]\r\n                  [div=position: relative;\r\n                  width: 100%;\r\n                  height: 100%;\r\n                  box-sizing: border-box;\r\n                  display: flex;\r\n                  flex-flow: column nowrap;\r\n                  justify-content: center;\r\n                  gap: 10px;\r\n                  padding-left: 1.75rem;\r\n                  padding-top: 15cqw;\r\n                  padding-right: 50%;]\r\n                    [div=flex: 0 auto;\r\n                    width: 100%;\r\n                    height: 3.5rem;\r\n                    pointer-events: none;\r\n                    box-sizing: border-box;\r\n                    border: var(--border);\r\n                    background: var(--borderColor);\r\n                    position: relative;]\r\n                      [div=display: block;\r\n                      height: 100%;\r\n                      width: 100%;\r\n                      background-image: var(--charaIMG);\r\n                      background-position: var(--navcharapos);\r\n                      background-size: var(--navcharas);\r\n                      filter: saturate(0%) contrast(110%) blur(2px);\r\n                      mix-blend-mode: multiply;]\r\n\r\n                      [/div]\r\n                      [div=display: block;\r\n                      height: 100%;\r\n                      width: 100%;\r\n                      position: absolute;\r\n                      top: 0px;\r\n                      left: 0px;\r\n                      background: var(--noiseIMG);\r\n                      mix-blend-mode: soft-light;\r\n                      opacity: .4;]\r\n\r\n                      [/div]\r\n                    [/div]\r\n                    [div=flex: 0 auto;\r\n                    width: 100%;\r\n                    height: 3.5rem;\r\n                    pointer-events: none;\r\n                    box-sizing: border-box;\r\n                    border: var(--border);\r\n                    background-image: var(--mechIMG);\r\n                    background-position: var(--navmechpos);\r\n                    background-size: var(--navmechs);\r\n                    position: relative;]\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n              [/div]\r\n              [div=flex: 3 300px;\r\n              height: 33rem;\r\n              min-height: 33rem;\r\n              box-sizing: border-box;\r\n              background: var(--bgColor);\r\n              border: var(--border);\r\n              position: relative;\r\n              overflow: hidden;\r\n              box-sizing: border-box;\r\n              padding: 5cqw;\r\n              pointer-events: auto;]\r\n                [div=position: relative;\r\n                width: 100%;\r\n                container-type: inline-size;\r\n                height: 100%;\r\n                box-sizing: border-box;\r\n                border: var(--border);\r\n                overflow: hidden;]\r\n                  [div=position: absolute;\r\n                  height: 100%;\r\n                  width: calc(100% + 25px);\r\n                  top: 0px;\r\n                  left: 0px;\r\n                  box-sizing: border-box;\r\n                  background: var(--txtColor);\r\n                  overflow-x: hidden;\r\n                  overflow-y: scroll;\r\n                  pointer-events: auto;\r\n                  padding-right: 25px;\r\n                  scroll-snap-type: y proximity;]\r\n                    [div=display: flex;\r\n                    width: 100%;\r\n                    height: 100%;\r\n                    flex-flow: column nowrap;\r\n                    align-items: stretch;\r\n                    gap: 1px;\r\n                    background: var(--borderColor);\r\n                    border-bottom: var(--border);]\r\n                      [div=flex: 1 100px;\r\n                      box-sizing: border-box;\r\n                      background: var(--bgColor);\r\n                      position: relative;\r\n                      scroll-snap-align: start;]\r\n                        [div=position: absolute;\r\n                        top: 10px;\r\n                        left: 10px;\r\n                        box-sizing: border-box;\r\n                        border: var(--border);\r\n                        height: calc(100% - 20px);\r\n                        width: calc(100% - 20px);\r\n                        background: var(--mechIMG) no-repeat center center/cover;]\r\n\r\n                        [/div]\r\n                      [/div]\r\n                      [div=flex: 0 auto; /* title area */\r\n                      box-sizing: border-box;\r\n                      background: var(--bgColor);\r\n                      padding: 1rem 1.5rem;\r\n                      display: flex;\r\n                      flex-flow: row wrap;\r\n                      align-items: center;\r\n                      color: var(--txtColor);\r\n                      gap: 3px 1rem;\r\n                      scroll-snap-align: start;]\r\n                        [div=flex: 0 auto; /* heading */\r\n                        font-family: var(--accFont);\r\n                        font-size: 24px;\r\n                        text-transform: uppercase;]\r\n                          ",
      {
        "type": "text",
        "description": "Heading",
        "marker": {
          "type": "text",
          "description": "Heading",
          "defaultValue": "",
          "original": "&Heading \\ text&",
          "indices": [
            27547,
            27562
          ]
        }
      },
      "\r\n                        [/div]\r\n                        [div=flex: 0 auto; /* subheading */\r\n                        font-family: var(--txtFont);\r\n                        font-size: .85rem;\r\n                        text-transform: uppercase;]\r\n                          [i]",
      {
        "type": "text",
        "description": "Subheading",
        "marker": {
          "type": "text",
          "description": "Subheading",
          "defaultValue": "",
          "original": "&Subheading \\ text&",
          "indices": [
            27838,
            27856
          ]
        }
      },
      "[/i]\r\n                        [/div]\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: flex; /* equip list */\r\n                    scroll-snap-align: start;\r\n                    flex-flow: column nowrap;\r\n                    align-items: stretch;\r\n                    gap: 1px;\r\n                    background: var(--borderColor);\r\n                    border-bottom: var(--border);\r\n                    border-left: 10cqw solid var(--txtColor);]\r\n                      ",
      {
        "type": "group",
        "description": "Equip",
        "markerStart": {
          "type": "group",
          "description": "Equip",
          "original": "&Equip \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            28369,
            28392
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 auto; /* equip */\r\n                      display: flex;\r\n                      flex-flow: row wrap;\r\n                      align-items: stretch;\r\n                      gap: 1px;]\r\n                        [div=flex: 0 2rem;\r\n                        font-family: var(--accFont);\r\n                        color: var(--txtColor);\r\n                        display: flex;\r\n                        flex-flow: row nowrap;\r\n                        align-items: center;\r\n                        justify-content: center;]\r\n                          [div=display: none;]you can use numbers or FA icons[/div]\r\n                          [fa]fal ",
          {
            "type": "text",
            "description": "Preferred FA Icon",
            "marker": {
              "type": "text",
              "description": "Preferred FA Icon",
              "defaultValue": "fa-stars",
              "original": "&Preferred FA Icon \\ text \\ fa-stars&",
              "indices": [
                29037,
                29073
              ]
            },
            "value": "fa-stars"
          },
          "[/fa]\r\n                        [/div]\r\n                        [div=flex: 1 100px;\r\n                        font-family: var(--txtFont);\r\n                        color: var(--txtColor);\r\n                        padding: 10px;\r\n                        background: var(--bgColor);\r\n                        font-size: .85rem;\r\n                        display: grid;\r\n                        align-items: center;]\r\n                          ",
          {
            "type": "text",
            "description": "Equip Detail",
            "marker": {
              "type": "text",
              "description": "Equip Detail",
              "defaultValue": "",
              "original": "&Equip Detail \\ text&",
              "indices": [
                29511,
                29531
              ]
            }
          },
          "\r\n                        [/div]\r\n                      [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            29594,
            29598
          ]
        }
      },
      "\r\n                    [/div]\r\n                    [div=display: flex;\r\n                    scroll-snap-align: start;\r\n                    flex-flow: row nowrap;\r\n                    align-items: stretch;\r\n                    gap: 1px;\r\n                    background: var(--borderColor);]\r\n                      [div=flex: 1 150px; /* text area */\r\n                      background: var(--bgColor);\r\n                      padding: 1rem 1.25rem;\r\n                      font-size: .9rem;\r\n                      color: var(--txtColor);\r\n                      font-family: var(--txtFont);\r\n                      box-sizing: border-box;\r\n                      text-align: justify;]\r\n                        ",
      {
        "type": "content",
        "description": "Additional Information / Description",
        "marker": {
          "type": "content",
          "description": "Additional Information / Description",
          "original": "&Additional Information / Description \\ content&",
          "indices": [
            30301,
            30348
          ]
        }
      },
      "\r\n                      [/div]\r\n                      [div=flex: 0 2.5rem;\r\n                      background: var(--bgColor);\r\n                      padding: 1rem 1.25rem;\r\n                      font-size: .9rem;\r\n                      color: var(--txtColor);\r\n                      display: flex;\r\n                      flex-flow: column nowrap;\r\n                      align-items: center;\r\n                      justify-content: center;]\r\n                        [div=flex: 0 auto;\r\n                        text-align: center;\r\n                        color: var(--borderColor);]\r\n                          [fa]far ",
      {
        "type": "text",
        "description": "Preferred FA Icon",
        "marker": {
          "type": "text",
          "description": "Preferred FA Icon",
          "defaultValue": "fa-cog",
          "original": "&Preferred FA Icon \\ text \\ fa-cog&",
          "indices": [
            30966,
            31000
          ]
        },
        "value": "fa-cog"
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        31001,
        31005
      ]
    }
  },
  "[/fa]\r\n                        [/div]\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        [/tab]\r\n      [/tabs]\r\n    [/div]\r\n    [div=flex: 3 300px;\r\n    height: 33rem;\r\n    min-height: 33rem;]\r\n      \r\n    [/div]\r\n  [/div]\r\n[/nobr]"
]

[]

absolutezero.template 1.0

By glucoseguardian

Initial Variables

Filter (leave as is if unsure)

Main Images

Main Character IMG URL

Image Position (leave as is if unsure)

Image Size (leave as is if unsure)

Basic Details IMG URL

End IMG URL

Secondary Images

Secondary Image URL

Image Position (leave as is if unsure)

Image Size (leave as is if unsure)

Navigation Images

Main Character Image Position (leave as is if unsure)

Main Character Image Size (leave as is if unsure)

Secondary Image Position (leave as is if unsure)

Secondary Image Size (leave as is if unsure)

Colors

Background Color

Text Color

Border Color

Main Tab

Preferred FA Icon

Artist Name

Basic Details

Detail (ex. Full Name)

Detail Answer (Ex. John Smith)

Preferred FA Icon

Phsical Description

Personality Content

Accordion Slide

Preferred FA Icon

Heading

Subheading

Slide Content

Secondary Tab

Preferred FA Icon

Artist Name

Heading

Subheading

Equip

Preferred FA Icon

Equip Detail

Additional Information / Description

Preferred FA Icon

Output