Input Template

[nobr]
  [div=display: none;]
    [font=Share Tech Mono]fluticasone[/font]
    [font=Archivo Black]fluticasone[/font]
    [font=Inter]fluticasone[/font]
  [/div]
  [div=
  &Background and Accent Colors \ group&&--color1: &Hexcode of Leftmost Color \ text&; /* leftmost color */
  --color2: &Hexcode of Main Accent and Middle Color \ text&; /* main accent + middle color */
  --color3: &Hexcode of Rightmost Color \ text&; /* rightmost color */
  --mainbgcolor: &Window Background Color (use RGBA for transparency) \ text&; /* main bg color, use RGBA for transparency */&end&
  &Text Colors \ group&--txtcolor: &Hexcode of Subtitle Text and Border Color \ text&; /* text color */
  --bodycolor: &Hexcode of Body Text Color \ text&; /* body text color */ &end&
  --boxbg: linear-gradient(135deg, var(--color1) 0%, var(--color2) 50%, var(--color3) 100%); /* gradient */
  --accentfont: 'Share Tech Mono', monospace; /* accent font */
  --titlefont: 'Archivo Black', sans-serif; /* title font */
  --txtfont: 'Inter', sans-serif; /* body text font */
  &Main Tab Images \ group&--homeIMG: url(&First Tab Main Image URL \ text&) no-repeat 40% center/auto 95%; /* main large image on first tab */
  --physIMG: url(&Second Tab Main Image URL \ text&) no-repeat center center/cover; /* main image on 2nd tab */
  --homeICON: url(&Third Tab Main Image and User Icon URL \ text&) no-repeat center center/cover; /* tiny icon image next to name on home tab */
  --miscIMG: url(&Fourth Tab Main Image URL \ text&) no-repeat left center/contain;
  --imgFILTER: &Optional Image Filter (write 'none' if inapplicable) \ text&; /* optional filter for IMG */&end&
  --bwFILTER: saturate(0);
  display: block;
  container-type: inline-size;
  width: clamp(250px,100%,1100px);
  margin: auto;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 1rem;
  --titlepadding: 1rem 4rem .75rem 1.25rem;
  --itempadding: .55rem 1.25rem .45rem 1.25rem;
  --boxborder: 1px solid var(--txtcolor);
  --btnrad: 5px;
  --mainrad: 15px;
  --bdf: blur(3px);
  --circleclip: polygon(0 0, 100% 0, 100% 35%, 50% 50%, 35% 100%, 0 100%);]
    [div=display: block; /* bg box div */
    position: relative;
    overflow: hidden;
    margin: .5rem auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
    box-sizing: border-box;
    border: var(--boxborder);
    border-radius: var(--mainrad);
    background: var(--boxbg);
    width: clamp(250px,100%,1000px);
    height: 35rem;
    font-size: 0px;]
      [comment]this div is the bg[/comment]
    [/div]
    [div=display: block; /* main content div */
    position: absolute;
    width: calc(35rem + 6rem);
    height: 100cqw;
    box-sizing: border-box;
    container-type: inline-size;  
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: left top;
    top: 0px;
    left: 0px;
    overflow: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;]
      &Tab One \ group&[div=display: block; /* home tab */
      position: relative;
      width: 100%;
      height: 100%;
      overflow-x: visible;
      overflow-y: hidden;
      container-type: size;
      scroll-snap-align: start;]
        [div=position: absolute;
        width: 100cqb;
        height: 100cqw;
        transform: translateX(100cqw) rotate(90deg) translateZ(0);
        transform-origin: top left;]
          [div=position: relative;
          top: 0px;
          left: 0px;
          height: 100%;
          width: 100%;]
            [div=position: absolute; top: -5rem; left: 100px;][a=homeTAB][/a][/div]
            [div=display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: var(--homeIMG); filter: var(--imgFILTER);] [/div]
            &Music Window \ group&[div=display: flex; /* music info container */
            pointer-events: none;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-evenly;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 94%;]
              [div=flex: 4 1rem;][comment]this is a spacer[/comment][/div]
              [div=flex: 1 150px; /* music info */
              font-family: var(--accentfont);
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--mainrad);
              box-sizing: border-box;
              line-height: 1;
              color: var(--txtcolor);
              font-size: 85%;
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              justify-content: space-between;
              gap: 1rem;
              padding: .55rem calc(10px + 1.25rem) .45rem calc(10px + 1.25rem);]
                [div=flex: 1 auto;]
                  [div=display: block;
                  font-family: var(--titlefont);
                  font-size: 1.25rem;
                  line-height: .9;
                  padding-top: .5rem;]
                    &Song Title \ text&
                  [/div]
                  [div=display: block;
                  padding-top: 8px;
                  padding-bottom: .5rem;]
                    &Song Artist \ text&
                  [/div]
                [/div]
                [url=&Song Url \ text&][div=flex: 0 auto;
                font-size: 1.65rem;
                box-sizing: border-box;
                color: var(--txtcolor);
                pointer-events: auto;]
                  [fa]fal fa-list-music[/fa]
                [/div][/url]
              [/div]
              [div=flex: 1.25 1rem;][comment]this is a spacer[/comment][/div]
            [/div]&end&
            &Navigation Window \ group&[div=display: flex; /* home nav container */
            pointer-events: none;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-evenly;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 75%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;]
              [div=flex: 1 .5rem;] [comment]this is a spacer[/comment] [/div]
              [div=flex: 0 auto; /* homepage nav bar */
              font-family: var(--accentfont);
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--mainrad);
              box-sizing: border-box;
              line-height: 1;
              color: var(--txtcolor);
              font-size: 85%;
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);
              pointer-events: auto;]
                [div=display: block;
                padding: var(--titlepadding);
                font-family: var(--titlefont);
                font-size: 1.25rem;
                border-bottom: var(--boxborder);
                color: var(--color2);]
                  &Username \ text&
                [/div]
                [goto=tabONE][div=display: block;
                padding: var(--itempadding);
                border-bottom: var(--boxborder);
                color: var(--txtcolor);]
                  &Tab One Title \ text&
                [/div][/goto]
                [goto=tabTWO][div=display: block;
                padding: var(--itempadding);
                border-bottom: var(--boxborder);
                color: var(--txtcolor);]
                  &Tab Two Title \ text&
                [/div][/goto]
                [goto=tabTHREE][div=display: block;
                padding: var(--itempadding);
                border-bottom: var(--boxborder);
                color: var(--txtcolor);]
                  &Tab Three Title \ text&
                [/div][/goto]
                [goto=tabFOUR][div=display: block;
                padding: .55rem 1.25rem .75rem 1.25rem;
                color: var(--txtcolor)]
                  &Tab Four Title \ text&
                [/div][/goto]
              [/div]
              [div=flex: 9 .5rem;] [comment]this is a spacer[/comment] [/div]
            [/div]&end&
            &Basic Information \ group&[div=display: flex; /* basic info container */
            pointer-events: none;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-evenly;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 70%;]
              [div=flex: 3 1rem;][comment]this is a spacer[/comment][/div]
              [div=flex: 1 200px; /* basic info */
              font-family: var(--accentfont);
              background: var(--mainbgcolor);
              font-size: 85%;
              border: var(--boxborder);
              border-radius: var(--mainrad);
              box-sizing: border-box;
              line-height: 1;
              color: var(--txtcolor);
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              justify-content: center;
              gap: 10px;
              padding: var(--itempadding);]
                [div=flex: 0 5.5rem;
                aspect-ratio: 1;
                position: relative;
                box-sizing: border-box;
                padding: 2px;]
                  [div=display: block;
                  height: calc(100% - 4px);
                  aspect-ratio: 1;
                  border-radius: 50%;
                  box-sizing: border-box;
                  border: var(--boxborder);
                  position: relative;
                  overflow: hidden;]
                    [div=display: block;
                    width: 100%;
                    aspect-ratio: 1;
                    overflow: hidden;
                    filter: drop-shadow(1px 1px var(--txtcolor));]
                      [div=position: absolute;
                      left: -4px;
                      top: -4px;
                      width: calc(100% + 8px);
                      aspect-ratio: 1;
                      background: var(--boxbg);
                      clip-path: var(--circleclip);
                      z-index: 1;]
                      [/div]
                    [/div]
                    [div=position: absolute;
                    position: absolute;
                    left: 6px;
                    top: 6px;
                    aspect-ratio: 1;
                    width: calc(100% - 12px);
                    border-radius: 50%;
                    z-index: 2;
                    box-sizing: border-box;
                    border: var(--boxborder);
                    background: var(--mainbgcolor) var(--homeICON);]
                      [comment]small img[/comment]
                    [/div]
                  [/div]
                [/div]
                [div=flex: 1 auto;]
                  [div=display: block;
                  font-family: var(--titlefont);
                  font-size: 1.75rem;
                  color: var(--color2);
                  line-height: .9;
                  padding-top: .5rem;]
                    &Full Name \ text&
                  [/div]
                  [div=display: block;
                  padding-top: 8px;
                  padding-bottom: .5rem;]
                    &Pronouns \ text& - &Age in Text \ text& (&Age in Digits \ number \  \ 16 \ 18&)
                  [/div]
                [/div]
              [/div]
              [div=flex: 1.75 1rem;][comment]this is a spacer[/comment][/div]
            [/div]&end&
          [/div]
        [/div]
      [/div]&end&
      &Tab Two \ group&[div=display: block; /* physical tab */
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      container-type: size;
      scroll-snap-align: start;]
        [div=position: absolute;
        width: 100cqb;
        height: 100cqw;
        transform: translateX(100cqw) rotate(90deg) translateZ(0);
        transform-origin: top left;]
          [div=position: relative;
          z-index: 0;
          top: 0px;
          left: 0px;
          height: 100%;
          width: 100%;]
            [div=position: absolute; top: -5rem; left: 100px;][a=tabONE][/a][/div]
            &Image Gallery Window \ group&[div=position: absolute; /* big physical window */
            z-index: 1;
            height: calc(100% - 3rem);
            top: 1.5rem;
            width: clamp(100px,100%,700px);
            right: 0px;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: stretch;
            background: var(--mainbgcolor);
            border: var(--boxborder);
            border-radius: var(--mainrad);
            box-sizing: border-box;
            backdrop-filter: var(--bdf);
            -webkit-backdrop-filter: var(--bdf);
            overflow: hidden;
            font-family: var(--accentfont);
            background: var(--mainbgcolor);
            line-height: 1;
            color: var(--txtcolor);
            font-size: 85%;]
              [div=flex: 0 auto; 
              width: calc(100% + 3px);
              display: flex;
              flex-flow: row nowrap;
              align-items: flex-start;
              gap: .5rem;
              padding: var(--titlepadding);
              border-bottom: var(--boxborder);
              background: var(--color3);
              font-size: 1rem;]
                [goto=homeTAB][div=flex: 0 auto; color: var(--txtcolor);][fa]fal fa-window-close[/fa][/div][/goto]
                [div=flex: 0 auto;][fa]fal fa-window-minimize[/fa][/div]
                [div=flex: 0 auto;][fa]fal fa-window-maximize[/fa][/div]
              [/div]
              [div=flex: 1 0px;
              overflow: hidden;
              font-size: 0px;
              width: 100%;]
                [div=display: flex;
                flex-flow: row wrap;
                width: calc(100% + 1px);
                height: 100%;
                margin-right: -1px;
                align-items: stretch;]
                  [div=flex: 4 250px; /* large img div */
                  border-right: var(--boxborder);
                  height: 100%;
                  box-sizing: border-box;
                  padding: 1rem;
                  position: relative;
                  overflow: hidden;]
                    [div=display: block;
                    width: 100%;
                    overflow: hidden;
                    height: 100%;
                    border-radius: 5px;
                    box-sizing: border-box;
                    border: var(--boxborder);
                    position: relative;]
                      [div=position: absolute;
                      left: 0px;
                      top: 0px;
                      height: calc(100% + 1px);
                      width: calc(100% + 1px);
                      background: var(--physIMG);
                      filter: var(--imgFILTER);]
                        [comment]main phys img[/comment]
                      [/div]
                    [/div]
                  [/div]
                  [div=flex: 1 125px; /* small images div */
                  box-sizing: border-box;
                  position: relative;
                  overflow: hidden;]
                    [div=position: absolute;
                    top: 1rem;
                    left: .5rem;
                    display: block;
                    width: calc((100% - 1rem) + 50px);
                    height: calc(100% - 2rem);
                    padding-right: 50px;
                    box-sizing: border-box;
                    scrollbar-gutter: stable both-edges;
                    overflow-x: hidden;
                    overflow-y: scroll;
                    scroll-snap-type: y proximity;]
                      &Image \ group \ repeat&[div=display: block; /* image div */
                      border-radius: 5px;
                      margin-bottom: 1px;
                      box-sizing: border-box;
                      border: var(--boxborder);
                      overflow: hidden;
                      scroll-snap-align: start;]
                        [img]&Image URL \ text&[/img]
                      [/div]
                      &\ end&
                      [comment]insert image div BEFORE this comment tag[/comment]
                    [/div]
                  [/div]
                [/div]
              [/div]
            [/div]&end&
            &Information Window \ group&[div=position: absolute; /* small physical window */
            box-sizing: border-box;
            z-index: 1;
            height: calc(100% - 3rem);
            width: 100%;
            top: 1.5rem;
            left: 0px;
            pointer-events: none;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;
            overflow: hidden;]
              [div=flex: 1.5 1.25rem;][comment]spacer[/comment][/div]
              [div=flex: 2 225px;
              position: relative;
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--mainrad);
              box-sizing: border-box;
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);
              font-size: 1rem;]
                [div=display: block; /* file name */
                border-bottom: var(--boxborder);
                padding: var(--titlepadding);
                font-family: var(--titlefont);
                font-size: .95rem;
                color: var(--txtcolor);
                white-space: nowrap;
                text-overflow: ellipsis;
                pointer-events: auto;
                position: relative;]
                  [goto=homeTAB][div=display: inline;  font-size: 1rem; margin-right: 5px; font-size: 1rem; color: var(--txtcolor);] [fa]fal fa-window-close[/fa][/div][/goto]
                  &Name \ text&.jpg
                [/div]
                [div=display: block; /* small window image */
                aspect-ratio: 16/9;
                width: 100%;
                font-size: 0px;
                background: var(--physIMG);
                filter: var(--imgFILTER) var(--bwFILTER);]
                  [comment]smaller ver of main phys image[/comment]
                [/div]
                [div=display: block; /* phys details */
                padding: var(--titlepadding);
                padding-right: 1.25rem;
                padding-bottom: 1rem;
                box-sizing: border-box;
                border-top: var(--boxborder);
                font-size: 85%;
                font-family: var(--accentfont);
                color: var(--txtcolor);
                line-height: 1.1;
                width: 100%;
                position: relative;]
                  &Details \ group \ repeat&[div=display: flex;
                  flex-flow: row wrap;
                  align-items: flex-start;
                  box-sizing: border-box;
                  width: 100%; ]
                    [div=flex: 1 3.75rem; text-align: right;]
                      &Detail \ text&
                    [/div]
                    [div=flex: 4 4rem; box-sizing: border-box; padding-left: 5px; font-family: var(--txtfont); color: var(--bodycolor);]
                      &Detail Description \ text&
                    [/div]
                  [/div]&\ end&
                  [comment]insert detail copypaste BEFORE this comment tag[/comment]
                [/div]
              [/div]
              [div=flex: 11 .5rem;][comment]spacer[/comment][/div]
            [/div]&end&
          [/div]
        [/div]
      [/div]&end&
      &Tab Three \ group&[div=display: block; /* personal tab */
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      container-type: size;
      scroll-snap-align: start;]
        [div=position: absolute;
        width: 100cqb;
        height: 100cqw;
        transform: translateX(100cqw) rotate(90deg) translateZ(0);
        transform-origin: top left;]
          [div=position: relative;
          margin: auto;
          top: 3.5rem;
          height: calc(100% - 7rem);
          width: clamp(250px,100%,calc(1000px - 2rem));
          padding: 1rem;
          overflow: hidden;
          box-sizing: border-box;
          display: flex;
          flex-flow: row wrap;
          align-items: stretch;
          align-content: stretch;
          gap: 1rem;]
            [div=position: absolute; top: -8.5rem; left: 100px;][a=tabTWO][/a][/div]
            &Sidebar \ group&[div=flex: 1 200px; /* sidebar area */
            background: var(--mainbgcolor);
            border: var(--boxborder);
            border-radius: var(--mainrad);
            box-sizing: border-box;
            backdrop-filter: var(--bdf);
            -webkit-backdrop-filter: var(--bdf);
            position: relative;]
              [div=position: absolute;
              top: 1rem;
              left: 1rem;
              width: calc(100% - 2rem);
              height: calc(100% - 2rem);
              display: flex;
              gap: 1rem;
              flex-flow: column wrap;
              align-items: stretch;
              align-content: stretch;
              overflow: hidden;]
                [div=flex: 3 85px; /* profile image */
                border: var(--boxborder);
                border-radius: var(--btnrad);
                background: var(--homeICON)]
                  [comment]user profile image[/comment]
                [/div]
                [div=flex: 1 100px; /* sidebar text */
                box-sizing: border-box;
                padding: 0px .35rem;
                font-size: 1rem;
                color: var(--txtcolor);
                overflow: hidden;
                position: relative;
                font-family: var(--txtfont);
                box-sizing: border-box;
                display: flex;
                flex-flow: column nowrap;]     
                  [div=flex: 0 auto; /* sidebar name */
                  font-family: var(--titlefont);
                  font-size: 1.75rem;
                  line-height: .9;
                  color: var(--color2);
                  line-height: .9;
                  padding-top: .5rem;]
                    &Full Name \ text&
                  [/div]
                  [div=flex: 0 auto;  /* sidebar username */
                  box-sizing: border-box;
                  font-size: 85%;
                  padding-top: 2px;
                  color: var(--bodycolor);
                  padding-left: 5px;
                  font-family: var(--accentfont);]
                    [div=display: inline; margin-right: 2px;]@[i][/i][/div]&Username \ text&
                  [/div]
                  [div=flex: 1 3rem; 
                  box-sizing: border-box;
                  padding-top: 5px;
                  color: var(--bodycolor);
                  font-size: 93%;
                  position: relative;
                  overflow: hidden;]
                    [div=position: absolute; /* sidebar text */
                    height: 100%;
                    width: calc(100% + 50px);
                    box-sizing: border-box;
                    padding-right: 50px;
                    padding-bottom: 5px;
                    overflow-x: hidden;
                    overflow-y: auto;
                    line-height: 1.2;]
                      &Sidebar Text (Keep Brief) \ content&
                    [/div]
                  [/div]
                [/div]
              [/div]
              [goto=homeTAB][div=position: absolute;
              width: 2rem;
              top: 1.5rem;
              right: 1.5rem;
              aspect-ratio: 1;
              text-transform: uppercase;
              line-height: 1;
              font-size: 1.25rem;
              color: var(--txtcolor);]
                [div=position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);][fa]fal fa-times[/fa][/div]
              [/div][/goto]
            [/div]&end&
            [div=flex: 3 200px;
            min-height: 175px;
            overflow: hidden;
            position: relative;]
              [div=position: absolute;
              box-sizing: border-box;
              top: 0px;
              height: 100%;
              left: 0px;
              width: calc(100% + 30px);
              padding-right: 30px;
              overflow-x: hidden;
              overflow-y: scroll;
              scrollbar-gutter: stable both-edges;
              display: flex;
              flex-flow: column nowrap;
              gap: 1rem;]
                &Pinned Text Post \ group&[div=flex: 0 auto; /* pinned post */
                margin-bottom: 1px;
                display: flex;
                flex-flow: row nowrap;
                align-items: flex-start;
                justify-content: center;
                gap: 10px;
                font-family: var(--accentfont);
                background: var(--mainbgcolor);
                border: var(--boxborder);
                border-radius: var(--mainrad);
                box-sizing: border-box;
                line-height: 1;
                color: var(--txtcolor);
                backdrop-filter: var(--bdf);
                -webkit-backdrop-filter: var(--bdf);
                padding: var(--itempadding);]
                  [div=flex: 0 5.5rem;
                  aspect-ratio: 1;
                  top: 1rem;
                  position: sticky;
                  box-sizing: border-box;
                  padding: 2px;]
                    [div=display: block;
                    height: calc(100% - 4px);
                    aspect-ratio: 1;
                    border-radius: 50%;
                    box-sizing: border-box;
                    border: var(--boxborder);
                    position: relative;
                    overflow: hidden;]
                      [div=display: block;
                      width: 100%;
                      aspect-ratio: 1;
                      overflow: hidden;
                      filter: drop-shadow(1px 1px var(--txtcolor));]
                        [div=position: absolute;
                        left: -4px;
                        top: -4px;
                        width: calc(100% + 8px);
                        aspect-ratio: 1;
                        background: var(--boxbg);
                        clip-path: var(--circleclip);
                        z-index: 1;]
                        [/div]
                      [/div]
                      [div=position: absolute;
                      position: absolute;
                      left: 6px;
                      top: 6px;
                      aspect-ratio: 1;
                      width: calc(100% - 12px);
                      border-radius: 50%;
                      z-index: 2;
                      box-sizing: border-box;
                      border: var(--boxborder);
                      background: var(--mainbgcolor) var(--homeICON);]
                        [comment]small img[/comment]
                      [/div]
                    [/div]
                  [/div]
                  [div=flex: 1 100px;]
                    [div=display: block; /* username */
                    line-height: .9;
                    padding-top: 1rem;
                    box-sizing: border-box;
                    padding-left: .25rem;
                    font-size: 85%;]
                      [fa]fal fa-thumbtack[/fa]
                      [div=display: inline; 
                      font-family: var(--titlefont);
                      font-size: 1.25rem;
                      color: var(--color2);
                      margin-left: 2px;]
                        [div=display: inline; margin-right: 2px;]@[i][/i][/div]&Username \ text&
                      [/div]
                    [/div]
                    [div=display: block; /* text content */
                    font-family: var(--txtfont);
                    color: var(--bodycolor);
                    line-height: 1.3;
                    font-size: 93%;
                    margin: .5rem 0px 1rem 0px;]
                      &Pinned Text Post Content \ content&
                    [/div]
                  [/div]
                [/div]&end&
                &Text Post \ group \ repeat&[div=flex: 0 auto; /* text post */
                margin-bottom: 1px;
                display: flex;
                flex-flow: row nowrap;
                align-items: flex-start;
                justify-content: center;
                gap: 10px;
                font-family: var(--accentfont);
                background: var(--mainbgcolor);
                border: var(--boxborder);
                border-radius: var(--mainrad);
                box-sizing: border-box;
                line-height: 1;
                color: var(--txtcolor);
                backdrop-filter: var(--bdf);
                -webkit-backdrop-filter: var(--bdf);
                padding: var(--itempadding);]
                  [div=flex: 0 5.5rem;
                  aspect-ratio: 1;
                  top: 1rem;
                  position: sticky;
                  box-sizing: border-box;
                  padding: 2px;]
                    [div=display: block;
                    height: calc(100% - 4px);
                    aspect-ratio: 1;
                    border-radius: 50%;
                    box-sizing: border-box;
                    border: var(--boxborder);
                    position: relative;
                    overflow: hidden;]
                      [div=display: block;
                      width: 100%;
                      aspect-ratio: 1;
                      overflow: hidden;
                      filter: drop-shadow(1px 1px var(--txtcolor));]
                        [div=position: absolute;
                        left: -4px;
                        top: -4px;
                        width: calc(100% + 8px);
                        aspect-ratio: 1;
                        background: var(--boxbg);
                        clip-path: var(--circleclip);
                        z-index: 1;]
                        [/div]
                      [/div]
                      [div=position: absolute;
                      position: absolute;
                      left: 6px;
                      top: 6px;
                      aspect-ratio: 1;
                      width: calc(100% - 12px);
                      border-radius: 50%;
                      z-index: 2;
                      box-sizing: border-box;
                      border: var(--boxborder);
                      background: var(--mainbgcolor) var(--homeICON);]
                        [comment]small img[/comment]
                      [/div]
                    [/div]
                  [/div]
                  [div=flex: 1 100px;]
                    [div=display: block; /* username */
                    line-height: .9;
                    padding-top: 1rem;
                    box-sizing: border-box;
                    padding-left: .25rem;
                    font-size: 85%;]
                      [div=display: inline; 
                      font-family: var(--titlefont);
                      font-size: 1.25rem;
                      color: var(--color2);]
                        [div=display: inline; margin-right: 2px;]@[i][/i][/div]&Username \ text&
                      [/div]
                    [/div]
                    [div=display: block; /* text content */
                    font-family: var(--txtfont);
                    color: var(--bodycolor);
                    line-height: 1.3;
                    font-size: 93%;
                    margin: .5rem 0px 1rem 0px;]
                      &Text Post Content \ content&
                    [/div]
                  [/div]
                [/div]&\ end&
                [comment]insert text of image post dive BEFORE this comment[/comment]
              [/div]
            [/div]
          [/div]
        [/div]
      [/div]&end&
      &Tab Four \ group&[div=display: block; /* misc tab */
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      container-type: size;
      scroll-snap-align: start;]
        [div=position: absolute;
        width: 100cqb;
        height: 100cqw;
        transform: translateX(100cqw) rotate(90deg) translateZ(0);
        transform-origin: top left;
        overflow: hidden;]
          [div=position: absolute; top: -5rem; left: 100px;][a=tabTHREE][/a][/div]
          [div=position: relative;
          display: block;
          z-index: 0;
          top: 5px;
          left: 0px;
          height: calc(100% - 10px);
          box-sizing: border-box;
          width: calc(100% + 50px);
          padding-right: 50px;
          overflow-x: hidden;
          overflow-y: auto;
          scrollbar-gutter: stable both-edges;]
            &Decorative Elements \ group&[div=position: absolute; /* random background text */
            left: 0px;
            bottom: 0rem;
            z-index: 0;
            font-size: 70px;
            width: 80%;
            left: 10%;
            font-family: var(--titlefont);
            color: var(--mainbgcolor);
            line-height: .75;
            text-transform: uppercase;]
              &Background Text (Linebreak With BR BBCode) \ content&
            [/div]
            [div=position: absolute; /* image float */
            left: 0px;
            top: 1rem;
            z-index: 3;
            width: clamp(250px,40cqi,600px);
            filter: var(--imgFILTER);
            height: 60cqb;
            left: 5%;
            background: var(--miscIMG);]
              [comment]floating img[/comment]
            [/div]
            [div=display: block; /* random text box */
            position: relative;
            z-index: 1;
            font-family: var(--accentfont);
            background: var(--mainbgcolor);
            font-size: 85%;
            border: var(--boxborder);
            border-radius: var(--mainrad);
            box-sizing: border-box;
            line-height: 1;
            color: var(--txtcolor);
            backdrop-filter: var(--bdf);
            -webkit-backdrop-filter: var(--bdf);
            padding: var(--titlepadding);
            padding-right: 1.25rem;
            width: clamp(275px,60%,500px);
            margin-right: 1rem auto;
            margin-left: 1rem;]
              &Quote Box \ content&
            [/div]&end&
            &Misc Box \ group&[div=display: flex; /* preferences */
            position: relative;
            z-index: 4;
            font-size: 93%;
            flex-flow: row wrap;
            align-items: stretch;
            gap: 10px;
            width: clamp(275px,75%,700px);
            margin-left: auto;
            margin-right: 1rem;
            box-sizing: border-box;
            line-height: 1;
            margin-top: 10px;]
              &Misc Box \ group \ repeat&[div=flex: 1 150px; /* filler box */
              position: relative;
              font-family: var(--txtfont);
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--mainrad);
              box-sizing: border-box;
              line-height: 1;
              color: var(--bodycolor);
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);]
                [div=display: block; 
                padding: var(--titlepadding);
                font-family: var(--titlefont);
                font-size: 1rem;
                border-bottom: var(--boxborder);
                color: var(--color2);]
                  &Box Name \ text&
                [/div]
                [div=display: block;
                padding: var(--itempadding);
                padding-bottom: .75rem;]
                  &Box Content \ content&
                [/div]
              [/div]&\ end&
            [/div]&end&
            &Stat Bar Window \ group&[div=display: flex; /* powers block */
            flex-flow: row wrap;
            align-items: flex-start;
            justify-content: center;
            gap: 10px;
            box-sizing: border-box;
            position: relative;
            z-index: 4;
            box-sizing: border-box;
            width: clamp(200px,100%,625px);
            margin: 2rem auto;
            margin-top: 0px;
            padding: 10px;
            padding-bottom: 2rem;]
              [div=flex: 1 200px; /* power stats */
              font-family: var(--accentfont);
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--mainrad);
              box-sizing: border-box;
              line-height: 1;
              color: var(--txtcolor);
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);]
                [div=display: block; /* powers title */
                border-bottom: var(--boxborder);
                padding: var(--titlepadding);
                font-family: var(--titlefont);
                font-size: .95rem;
                color: var(--txtcolor);
                white-space: nowrap;
                text-overflow: ellipsis;
                pointer-events: auto;
                position: relative;]
                  [goto=homeTAB][div=display: inline;  font-size: 1rem; margin-right: 5px; font-size: 1rem; color: var(--txtcolor);] [fa]fal fa-window-close[/fa][/div][/goto]
                  &Window Name \ text&.txt
                [/div]
                [div=display: flex;
                flex-flow: column nowrap;
                gap: 5px;
                padding: var(--titlepadding);
                padding-right: 1.25rem;
                padding-bottom: 1rem;
                box-sizing: border-box;
                font-size: 85%;
                font-family: var(--accentfont);
                color: var(--txtcolor);
                line-height: 1.1;
                width: 100%;
                position: relative;]
                  &Stat Bar \ group \ repeat&[div=flex: 0 auto;
                  display: flex;
                  gap: 3px;
                  flex-flow: row wrap;
                  align-items: stretch;
                  box-sizing: border-box;
                  width: 100%;]
                    [div=flex: 1 3.75rem; text-align: right;]&Stat Bar Name \ text&[/div]
                    [div=flex: 4 4rem; position: relative; min-height: .75rem; max-height: 1rem;]
                      [div=--stat: 
                      &Stat Bar Value \ number \ 00 \ 0 \ 100&%;
                      position: absolute;
                      left: 0px;
                      width: 100%;
                      top: 0px;
                      height: 100%;
                      background: var(--boxbg);
                      clip-path: polygon(5px 0, var(--stat) 0, calc(var(--stat) - 5px) 100%, 0% 100%);]
                      [/div]
                    [/div]
                  [/div]&\ end&
                  [comment]insert stat copypaste BEFORE this comment tag[/comment]
                [/div]
              [/div]
              [div=flex: 1.5 200px; /* power desc */
              position: relative;
              font-family: var(--txtfont);
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--mainrad);
              box-sizing: border-box;
              line-height: 1.2;
              color: var(--bodycolor);
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);
              padding: var(--titlepadding);
              padding-right: 1.25rem;
              text-align: justify;
              font-size: 93%;]
                [div=display: block;]
                  &Text Box Content \ content&
                [/div]
              [/div]
            [/div]&end&
          [/div]
        [/div]
      [/div]&end&
      &Tab Five \ group&[div=display: block; /* rel tab */
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      container-type: size;
      scroll-snap-align: start;]
        [div=position: absolute;
        width: 100cqb;
        height: 100cqw;
        transform: translateX(100cqw) rotate(90deg);
        transform-origin: top left;
        overflow: hidden;]
          [div=position: absolute; top: -5rem; left: 100px;][a=tabFOUR][/a][/div]
          [div=position: relative;
          margin: auto;
          margin-top: 4rem;
          height: calc(100% - 8rem);
          width: clamp(200px,calc(100% - 3rem),900px);
          overflow: hidden;]
            [div=position: relative;
            display: flex;
            flex-flow: column nowrap;
            gap: 1.5rem;
            font-size: 1rem;
            z-index: 0;
            height: 100%;
            box-sizing: border-box;
            width: calc(100% + 50px);
            padding-right: 50px;
            overflow-x: hidden;
            overflow-y: auto;
            scrollbar-gutter: stable both-edges;]
              &Contact \ group \ repeat&[div=--contactIMG: url(&Image URL \ text&) no-repeat center center/cover; /* relationship div */
              flex: 0 auto;
              display: flex;
              flex-flow: row wrap;
              align-items: flex-start;
              gap: 10px 1rem;]
                [div=flex: 1 11rem;
                position: relative;]
                  [div=display: block;
                  width: calc(100% - 1.5rem);
                  box-sizing: border-box;                  
                  background: var(--mainbgcolor);
                  border: var(--boxborder);
                  border-radius: var(--mainrad);
                  line-height: 1;
                  color: var(--txtcolor);
                  backdrop-filter: var(--bdf);
                  -webkit-backdrop-filter: var(--bdf);
                  padding: 1rem 15%;]
                    [div=display: block; /* contact image */
                    height: calc(100% - 4px);
                    max-height: 8rem;
                    aspect-ratio: 1;
                    margin: auto;
                    border-radius: 50%;
                    box-sizing: border-box;
                    border: var(--boxborder);
                    position: relative;
                    overflow: hidden;]
                      [div=display: block;
                      width: 100%;
                      aspect-ratio: 1;
                      overflow: hidden;
                      filter: drop-shadow(1px 1px var(--txtcolor));]
                        [div=position: absolute;
                        left: -4px;
                        top: -4px;
                        width: calc(100% + 8px);
                        aspect-ratio: 1;
                        background: var(--boxbg);
                        clip-path: var(--circleclip);
                        z-index: 1;]
                        [/div]
                      [/div]
                      [div=position: absolute;
                      position: absolute;
                      left: 6px;
                      top: 6px;
                      aspect-ratio: 1;
                      width: calc(100% - 12px);
                      border-radius: 50%;
                      z-index: 2;
                      box-sizing: border-box;
                      border: var(--boxborder);
                      background: var(--mainbgcolor) var(--contactIMG);]
                        [comment]small img[/comment]
                      [/div]
                    [/div]
                    [div=display: block; /* contact name */
                    font-family: var(--titlefont);
                    text-align: center;
                    font-size: 1.5rem;
                    color: var(--color2);
                    text-transform: lowercase;
                    margin-top: .75rem;]
                      &Contact Name \ text&
                    [/div]
                    [div=display: block; /* contact username */
                    font-family: var(--accentfont);
                    text-align: center;
                    font-size: 85%;
                    color: var(--bodycolor);
                    text-transform: lowercase;
                    margin-top: 3px;
                    margin-bottom: .5rem;]
                      [div=display: inline; margin-right: 2px;]@[i][/i][/div]&Contact Username \ text&
                    [/div]
                  [/div]
                  [div=display: flex;
                  flex-flow: column nowrap;
                  width: 3rem;
                  align-items: center;
                  justify-content: space-evenly;
                  position: absolute;
                  top: 1rem;
                  right: 0px;
                  height: calc(100% - 2rem);]
                    [div=flex: 0 3rem;
                    width: 3rem;
                    aspect-ratio: 1;
                    backdrop-filter: var(--bdf);
                    -webkit-backdrop-filter: var(--bdf);
                    background: var(--mainbgcolor);
                    border: var(--boxborder);
                    border-radius: var(--btnrad);
                    box-sizing: border-box;
                    position: relative;
                    text-transform: uppercase;
                    background: var(--mainbgcolor);
                    line-height: 1;
                    font-size: 80%;
                    color: var(--txtcolor);]
                      [div=position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%,-50%);][fa]fal fa-phone[/fa][/div]
                    [/div]
                    [div=flex: 0 3rem;
                    width: 3rem;
                    aspect-ratio: 1;
                    backdrop-filter: var(--bdf);
                    -webkit-backdrop-filter: var(--bdf);
                    background: var(--mainbgcolor);
                    border: var(--boxborder);
                    border-radius: var(--btnrad);
                    box-sizing: border-box;
                    position: relative;
                    text-transform: uppercase;
                    background: var(--mainbgcolor);
                    line-height: 1;
                    font-size: 80%;
                    color: var(--bodycolor);]
                      [div=position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%,-50%);][fa]&Favorited? (fal No, fas Yes) \ select \ fal \ fas& fa-heart[/fa][/div]
                    [/div]
                    [div=flex: 0 3rem;
                    width: 3rem;
                    aspect-ratio: 1;
                    backdrop-filter: var(--bdf);
                    -webkit-backdrop-filter: var(--bdf);
                    background: var(--mainbgcolor);
                    border: var(--boxborder);
                    border-radius: var(--btnrad);
                    box-sizing: border-box;
                    position: relative;
                    text-transform: uppercase;
                    background: var(--mainbgcolor);
                    line-height: 1;
                    font-size: 80%;
                    color: var(--txtcolor);]
                      [div=position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%,-50%);][fa]fal fa-comment-alt[/fa][/div]
                    [/div]
                  [/div]
                [/div]
                [div=flex: 4 250px;
                position: relative;]
                  [div=display: block; /* last sent message */
                  position: relative;
                  z-index: 1;
                  box-sizing: border-box;                  
                  background: var(--color3);
                  border: var(--boxborder);
                  border-radius: var(--btnrad);
                  font-size: 85%;
                  font-family: var(--accentfont);
                  padding: var(--itempadding);
                  width: calc(80% - 1.75rem);
                  margin: 0px 1.75rem 0px 20%;
                  color: var(--txtcolor);]
                    &Last Sent Message \ content&     
                  [/div]
                  [div=display: block; /* relationship description */
                  position: relative;
                  top: -1rem;
                  z-index: 0;
                  box-sizing: border-box;                  
                  background: var(--mainbgcolor);
                  border: var(--boxborder);
                  border-radius: var(--mainrad);
                  color: var(--txtcolor);
                  backdrop-filter: var(--bdf);
                  -webkit-backdrop-filter: var(--bdf);
                  padding: var(--titlepadding);
                  padding-right: 1.25rem;
                  padding-top: 1.25rem;
                  line-height: 1.25;
                  font-size: 93%;
                  text-align: justify;
                  font-famiy: var(--txtfont);]
                    &Relationship Description \ content&
                  [/div]
                [/div]
              [/div]&\ end&
              [comment]insert relationship copypaste BEFORE this comment tag[/comment]
            [/div]
          [/div]
        [/div]
      [/div]&end&
    [/div]
    [div=display: flex; /* nav area div */
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-end;
    box-sizing: border-box;
    width: clamp(250px,calc(100% - 3rem),1000px);
    padding: 0px 8%;
    gap: .65rem;
    position: absolute;
    bottom: 1.5rem;
    font-size: 80%;
    font-family: var(--accentfont);
    left: 50%;
    transform: translate(-50%);]
    [div=flex: 1 0px;]
      [comment]this is a spacer[/comment]
    [/div]
    [div=flex: 0 auto;
    font-size: 0px;
    transform: rotate(180deg);
    position: relative;
    visibility: hidden;]
        [accordion=100%]
          {slide=[div=background: var(--mainbgcolor); /* subtitle div */
            border: var(--boxborder);
            border-radius: var(--btnrad);
            box-sizing: border-box;
            position: relative;
            text-transform: uppercase;
            background: var(--mainbgcolor);
            padding: var(--itempadding);
            line-height: 1;
            color: var(--txtcolor);
            text-align: center;
            font-size: 85%;
            font-weight: normal;
            font-variant: normal;
            margin-bottom: -.5rem;
            transform: rotate(180deg);
            backdrop-filter: var(--bdf);
            -webkit-backdrop-filter: var(--bdf);
            visibility: visible;]&Nav Bar Text \ text&[/div]|open}
            [div=display: flex; /* nav btn */
            flex-flow: row wrap;
            align-items: center;
            gap: 0px 2px;
            justify-content: space-evenly;
            width: 100%;
            visibility: visible;
            transform: rotate(180deg);
            font-size: initial;]
              [goto=tabONE][div=flex: 0 3rem;
              width: 3rem;
              aspect-ratio: 1;
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--btnrad);
              box-sizing: border-box;
              position: relative;
              text-transform: uppercase;
              background: var(--mainbgcolor);
              line-height: 1;
              font-size: 80%;
              color: var(--txtcolor);]
                [div=position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);][fa]fal fa-camera-polaroid[/fa][/div]
              [/div][/goto]
              [goto=tabTWO][div=flex: 0 3rem;
              width: 3rem;
              aspect-ratio: 1;
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--btnrad);
              box-sizing: border-box;
              position: relative;
              text-transform: uppercase;
              background: var(--mainbgcolor);
              line-height: 1;
              font-size: 80%;
              color: var(--txtcolor);]
                [div=position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);][fa]fal fa-user[/fa][/div]
              [/div][/goto]
              [goto=tabTHREE][div=flex: 0 3rem;
              width: 3rem;
              aspect-ratio: 1;
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--btnrad);
              box-sizing: border-box;
              position: relative;
              text-transform: uppercase;
              background: var(--mainbgcolor);
              line-height: 1;
              font-size: 80%;
              color: var(--txtcolor);]
                [div=position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);][fa]fal fa-paper-plane[/fa][/div]
              [/div][/goto]
              [goto=tabFOUR][div=flex: 0 3rem;
              width: 3rem;
              aspect-ratio: 1;
              backdrop-filter: var(--bdf);
              -webkit-backdrop-filter: var(--bdf);
              background: var(--mainbgcolor);
              border: var(--boxborder);
              border-radius: var(--btnrad);
              box-sizing: border-box;
              position: relative;
              text-transform: uppercase;
              background: var(--mainbgcolor);
              line-height: 1;
              font-size: 80%;
              color: var(--txtcolor);]
                [div=position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);][fa]fal fa-envelope[/fa][/div]
              [/div][/goto]
            [/div]
          {/slide}
        [/accordion]
    [/div]
    [/div]
  [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;]\r\n    [font=Share Tech Mono]fluticasone[/font]\r\n    [font=Archivo Black]fluticasone[/font]\r\n    [font=Inter]fluticasone[/font]\r\n  [/div]\r\n  [div=\r\n  ",
  {
    "type": "group",
    "description": "Background and Accent Colors",
    "markerStart": {
      "type": "group",
      "description": "Background and Accent Colors",
      "original": "&Background and Accent Colors \\ group&",
      "repeat": false,
      "indices": [
        179,
        216
      ]
    },
    "repeat": false,
    "originalChildren": [
      "&--color1: ",
      {
        "type": "text",
        "description": "Hexcode of Leftmost Color",
        "marker": {
          "type": "text",
          "description": "Hexcode of Leftmost Color",
          "defaultValue": "",
          "original": "&Hexcode of Leftmost Color \\ text&",
          "indices": [
            228,
            261
          ]
        }
      },
      "; /* leftmost color */\r\n  --color2: ",
      {
        "type": "text",
        "description": "Hexcode of Main Accent and Middle Color",
        "marker": {
          "type": "text",
          "description": "Hexcode of Main Accent and Middle Color",
          "defaultValue": "",
          "original": "&Hexcode of Main Accent and Middle Color \\ text&",
          "indices": [
            298,
            345
          ]
        }
      },
      "; /* main accent + middle color */\r\n  --color3: ",
      {
        "type": "text",
        "description": "Hexcode of Rightmost Color",
        "marker": {
          "type": "text",
          "description": "Hexcode of Rightmost Color",
          "defaultValue": "",
          "original": "&Hexcode of Rightmost Color \\ text&",
          "indices": [
            394,
            428
          ]
        }
      },
      "; /* rightmost color */\r\n  --mainbgcolor: ",
      {
        "type": "text",
        "description": "Window Background Color (use RGBA for transparency)",
        "marker": {
          "type": "text",
          "description": "Window Background Color (use RGBA for transparency)",
          "defaultValue": "",
          "original": "&Window Background Color (use RGBA for transparency) \\ text&",
          "indices": [
            471,
            530
          ]
        }
      },
      "; /* main bg color, use RGBA for transparency */"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        579,
        583
      ]
    }
  },
  "\r\n  ",
  {
    "type": "group",
    "description": "Text Colors",
    "markerStart": {
      "type": "group",
      "description": "Text Colors",
      "original": "&Text Colors \\ group&",
      "repeat": false,
      "indices": [
        588,
        608
      ]
    },
    "repeat": false,
    "originalChildren": [
      "--txtcolor: ",
      {
        "type": "text",
        "description": "Hexcode of Subtitle Text and Border Color",
        "marker": {
          "type": "text",
          "description": "Hexcode of Subtitle Text and Border Color",
          "defaultValue": "",
          "original": "&Hexcode of Subtitle Text and Border Color \\ text&",
          "indices": [
            621,
            670
          ]
        }
      },
      "; /* text color */\r\n  --bodycolor: ",
      {
        "type": "text",
        "description": "Hexcode of Body Text Color",
        "marker": {
          "type": "text",
          "description": "Hexcode of Body Text Color",
          "defaultValue": "",
          "original": "&Hexcode of Body Text Color \\ text&",
          "indices": [
            706,
            740
          ]
        }
      },
      "; /* body text color */ "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        765,
        769
      ]
    }
  },
  "\r\n  --boxbg: linear-gradient(135deg, var(--color1) 0%, var(--color2) 50%, var(--color3) 100%); /* gradient */\r\n  --accentfont: 'Share Tech Mono', monospace; /* accent font */\r\n  --titlefont: 'Archivo Black', sans-serif; /* title font */\r\n  --txtfont: 'Inter', sans-serif; /* body text font */\r\n  ",
  {
    "type": "group",
    "description": "Main Tab Images",
    "markerStart": {
      "type": "group",
      "description": "Main Tab Images",
      "original": "&Main Tab Images \\ group&",
      "repeat": false,
      "indices": [
        1066,
        1090
      ]
    },
    "repeat": false,
    "originalChildren": [
      "--homeIMG: url(",
      {
        "type": "text",
        "description": "First Tab Main Image URL",
        "marker": {
          "type": "text",
          "description": "First Tab Main Image URL",
          "defaultValue": "",
          "original": "&First Tab Main Image URL \\ text&",
          "indices": [
            1106,
            1138
          ]
        }
      },
      ") no-repeat 40% center/auto 95%; /* main large image on first tab */\r\n  --physIMG: url(",
      {
        "type": "text",
        "description": "Second Tab Main Image URL",
        "marker": {
          "type": "text",
          "description": "Second Tab Main Image URL",
          "defaultValue": "",
          "original": "&Second Tab Main Image URL \\ text&",
          "indices": [
            1226,
            1259
          ]
        }
      },
      ") no-repeat center center/cover; /* main image on 2nd tab */\r\n  --homeICON: url(",
      {
        "type": "text",
        "description": "Third Tab Main Image and User Icon URL",
        "marker": {
          "type": "text",
          "description": "Third Tab Main Image and User Icon URL",
          "defaultValue": "",
          "original": "&Third Tab Main Image and User Icon URL \\ text&",
          "indices": [
            1340,
            1386
          ]
        }
      },
      ") no-repeat center center/cover; /* tiny icon image next to name on home tab */\r\n  --miscIMG: url(",
      {
        "type": "text",
        "description": "Fourth Tab Main Image URL",
        "marker": {
          "type": "text",
          "description": "Fourth Tab Main Image URL",
          "defaultValue": "",
          "original": "&Fourth Tab Main Image URL \\ text&",
          "indices": [
            1485,
            1518
          ]
        }
      },
      ") no-repeat left center/contain;\r\n  --imgFILTER: ",
      {
        "type": "text",
        "description": "Optional Image Filter (write 'none' if inapplicable)",
        "marker": {
          "type": "text",
          "description": "Optional Image Filter (write 'none' if inapplicable)",
          "defaultValue": "",
          "original": "&Optional Image Filter (write 'none' if inapplicable) \\ text&",
          "indices": [
            1568,
            1628
          ]
        }
      },
      "; /* optional filter for IMG */"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        1660,
        1664
      ]
    }
  },
  "\r\n  --bwFILTER: saturate(0);\r\n  display: block;\r\n  container-type: inline-size;\r\n  width: clamp(250px,100%,1100px);\r\n  margin: auto;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n  font-size: 1rem;\r\n  --titlepadding: 1rem 4rem .75rem 1.25rem;\r\n  --itempadding: .55rem 1.25rem .45rem 1.25rem;\r\n  --boxborder: 1px solid var(--txtcolor);\r\n  --btnrad: 5px;\r\n  --mainrad: 15px;\r\n  --bdf: blur(3px);\r\n  --circleclip: polygon(0 0, 100% 0, 100% 35%, 50% 50%, 35% 100%, 0 100%);]\r\n    [div=display: block; /* bg box div */\r\n    position: relative;\r\n    overflow: hidden;\r\n    margin: .5rem auto;\r\n    margin-top: 3rem;\r\n    margin-bottom: 3rem;\r\n    box-sizing: border-box;\r\n    border: var(--boxborder);\r\n    border-radius: var(--mainrad);\r\n    background: var(--boxbg);\r\n    width: clamp(250px,100%,1000px);\r\n    height: 35rem;\r\n    font-size: 0px;]\r\n      [comment]this div is the bg[/comment]\r\n    [/div]\r\n    [div=display: block; /* main content div */\r\n    position: absolute;\r\n    width: calc(35rem + 6rem);\r\n    height: 100cqw;\r\n    box-sizing: border-box;\r\n    container-type: inline-size;  \r\n    transform: rotate(-90deg) translateX(-100%);\r\n    transform-origin: left top;\r\n    top: 0px;\r\n    left: 0px;\r\n    overflow: hidden;\r\n    scroll-behavior: smooth;\r\n    scroll-snap-type: y mandatory;]\r\n      ",
  {
    "type": "group",
    "description": "Tab One",
    "markerStart": {
      "type": "group",
      "description": "Tab One",
      "original": "&Tab One \\ group&",
      "repeat": false,
      "indices": [
        2994,
        3010
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display: block; /* home tab */\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow-x: visible;\r\n      overflow-y: hidden;\r\n      container-type: size;\r\n      scroll-snap-align: start;]\r\n        [div=position: absolute;\r\n        width: 100cqb;\r\n        height: 100cqw;\r\n        transform: translateX(100cqw) rotate(90deg) translateZ(0);\r\n        transform-origin: top left;]\r\n          [div=position: relative;\r\n          top: 0px;\r\n          left: 0px;\r\n          height: 100%;\r\n          width: 100%;]\r\n            [div=position: absolute; top: -5rem; left: 100px;][a=homeTAB][/a][/div]\r\n            [div=display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: var(--homeIMG); filter: var(--imgFILTER);] [/div]\r\n            ",
      {
        "type": "group",
        "description": "Music Window",
        "markerStart": {
          "type": "group",
          "description": "Music Window",
          "original": "&Music Window \\ group&",
          "repeat": false,
          "indices": [
            3813,
            3834
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=display: flex; /* music info container */\r\n            pointer-events: none;\r\n            flex-flow: row nowrap;\r\n            align-items: center;\r\n            justify-content: space-evenly;\r\n            position: absolute;\r\n            bottom: 0px;\r\n            left: 0px;\r\n            width: 100%;\r\n            height: 94%;]\r\n              [div=flex: 4 1rem;][comment]this is a spacer[/comment][/div]\r\n              [div=flex: 1 150px; /* music info */\r\n              font-family: var(--accentfont);\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--mainrad);\r\n              box-sizing: border-box;\r\n              line-height: 1;\r\n              color: var(--txtcolor);\r\n              font-size: 85%;\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);\r\n              display: flex;\r\n              flex-flow: row nowrap;\r\n              align-items: center;\r\n              justify-content: space-between;\r\n              gap: 1rem;\r\n              padding: .55rem calc(10px + 1.25rem) .45rem calc(10px + 1.25rem);]\r\n                [div=flex: 1 auto;]\r\n                  [div=display: block;\r\n                  font-family: var(--titlefont);\r\n                  font-size: 1.25rem;\r\n                  line-height: .9;\r\n                  padding-top: .5rem;]\r\n                    ",
          {
            "type": "text",
            "description": "Song Title",
            "marker": {
              "type": "text",
              "description": "Song Title",
              "defaultValue": "",
              "original": "&Song Title \\ text&",
              "indices": [
                5234,
                5252
              ]
            }
          },
          "\r\n                  [/div]\r\n                  [div=display: block;\r\n                  padding-top: 8px;\r\n                  padding-bottom: .5rem;]\r\n                    ",
          {
            "type": "text",
            "description": "Song Artist",
            "marker": {
              "type": "text",
              "description": "Song Artist",
              "defaultValue": "",
              "original": "&Song Artist \\ text&",
              "indices": [
                5421,
                5440
              ]
            }
          },
          "\r\n                  [/div]\r\n                [/div]\r\n                [url=",
          {
            "type": "text",
            "description": "Song Url",
            "marker": {
              "type": "text",
              "description": "Song Url",
              "defaultValue": "",
              "original": "&Song Url \\ text&",
              "indices": [
                5514,
                5530
              ]
            }
          },
          "][div=flex: 0 auto;\r\n                font-size: 1.65rem;\r\n                box-sizing: border-box;\r\n                color: var(--txtcolor);\r\n                pointer-events: auto;]\r\n                  [fa]fal fa-list-music[/fa]\r\n                [/div][/url]\r\n              [/div]\r\n              [div=flex: 1.25 1rem;][comment]this is a spacer[/comment][/div]\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            5906,
            5910
          ]
        }
      },
      "\r\n            ",
      {
        "type": "group",
        "description": "Navigation Window",
        "markerStart": {
          "type": "group",
          "description": "Navigation Window",
          "original": "&Navigation Window \\ group&",
          "repeat": false,
          "indices": [
            5925,
            5951
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=display: flex; /* home nav container */\r\n            pointer-events: none;\r\n            flex-flow: row nowrap;\r\n            align-items: center;\r\n            justify-content: space-evenly;\r\n            position: absolute;\r\n            top: 0px;\r\n            left: 0px;\r\n            width: 100%;\r\n            height: 75%;\r\n            -webkit-backface-visibility: hidden;\r\n            backface-visibility: hidden;]\r\n              [div=flex: 1 .5rem;] [comment]this is a spacer[/comment] [/div]\r\n              [div=flex: 0 auto; /* homepage nav bar */\r\n              font-family: var(--accentfont);\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--mainrad);\r\n              box-sizing: border-box;\r\n              line-height: 1;\r\n              color: var(--txtcolor);\r\n              font-size: 85%;\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);\r\n              pointer-events: auto;]\r\n                [div=display: block;\r\n                padding: var(--titlepadding);\r\n                font-family: var(--titlefont);\r\n                font-size: 1.25rem;\r\n                border-bottom: var(--boxborder);\r\n                color: var(--color2);]\r\n                  ",
          {
            "type": "text",
            "description": "Username",
            "marker": {
              "type": "text",
              "description": "Username",
              "defaultValue": "",
              "original": "&Username \\ text&",
              "indices": [
                7241,
                7257
              ]
            }
          },
          "\r\n                [/div]\r\n                [goto=tabONE][div=display: block;\r\n                padding: var(--itempadding);\r\n                border-bottom: var(--boxborder);\r\n                color: var(--txtcolor);]\r\n                  ",
          {
            "type": "text",
            "description": "Tab One Title",
            "marker": {
              "type": "text",
              "description": "Tab One Title",
              "defaultValue": "",
              "original": "&Tab One Title \\ text&",
              "indices": [
                7491,
                7512
              ]
            }
          },
          "\r\n                [/div][/goto]\r\n                [goto=tabTWO][div=display: block;\r\n                padding: var(--itempadding);\r\n                border-bottom: var(--boxborder);\r\n                color: var(--txtcolor);]\r\n                  ",
          {
            "type": "text",
            "description": "Tab Two Title",
            "marker": {
              "type": "text",
              "description": "Tab Two Title",
              "defaultValue": "",
              "original": "&Tab Two Title \\ text&",
              "indices": [
                7753,
                7774
              ]
            }
          },
          "\r\n                [/div][/goto]\r\n                [goto=tabTHREE][div=display: block;\r\n                padding: var(--itempadding);\r\n                border-bottom: var(--boxborder);\r\n                color: var(--txtcolor);]\r\n                  ",
          {
            "type": "text",
            "description": "Tab Three Title",
            "marker": {
              "type": "text",
              "description": "Tab Three Title",
              "defaultValue": "",
              "original": "&Tab Three Title \\ text&",
              "indices": [
                8017,
                8040
              ]
            }
          },
          "\r\n                [/div][/goto]\r\n                [goto=tabFOUR][div=display: block;\r\n                padding: .55rem 1.25rem .75rem 1.25rem;\r\n                color: var(--txtcolor)]\r\n                  ",
          {
            "type": "text",
            "description": "Tab Four Title",
            "marker": {
              "type": "text",
              "description": "Tab Four Title",
              "defaultValue": "",
              "original": "&Tab Four Title \\ text&",
              "indices": [
                8242,
                8264
              ]
            }
          },
          "\r\n                [/div][/goto]\r\n              [/div]\r\n              [div=flex: 9 .5rem;] [comment]this is a spacer[/comment] [/div]\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            8417,
            8421
          ]
        }
      },
      "\r\n            ",
      {
        "type": "group",
        "description": "Basic Information",
        "markerStart": {
          "type": "group",
          "description": "Basic Information",
          "original": "&Basic Information \\ group&",
          "repeat": false,
          "indices": [
            8436,
            8462
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=display: flex; /* basic info container */\r\n            pointer-events: none;\r\n            flex-flow: row nowrap;\r\n            align-items: center;\r\n            justify-content: space-evenly;\r\n            position: absolute;\r\n            bottom: 0px;\r\n            left: 0px;\r\n            width: 100%;\r\n            height: 70%;]\r\n              [div=flex: 3 1rem;][comment]this is a spacer[/comment][/div]\r\n              [div=flex: 1 200px; /* basic info */\r\n              font-family: var(--accentfont);\r\n              background: var(--mainbgcolor);\r\n              font-size: 85%;\r\n              border: var(--boxborder);\r\n              border-radius: var(--mainrad);\r\n              box-sizing: border-box;\r\n              line-height: 1;\r\n              color: var(--txtcolor);\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);\r\n              display: flex;\r\n              flex-flow: row nowrap;\r\n              align-items: center;\r\n              justify-content: center;\r\n              gap: 10px;\r\n              padding: var(--itempadding);]\r\n                [div=flex: 0 5.5rem;\r\n                aspect-ratio: 1;\r\n                position: relative;\r\n                box-sizing: border-box;\r\n                padding: 2px;]\r\n                  [div=display: block;\r\n                  height: calc(100% - 4px);\r\n                  aspect-ratio: 1;\r\n                  border-radius: 50%;\r\n                  box-sizing: border-box;\r\n                  border: var(--boxborder);\r\n                  position: relative;\r\n                  overflow: hidden;]\r\n                    [div=display: block;\r\n                    width: 100%;\r\n                    aspect-ratio: 1;\r\n                    overflow: hidden;\r\n                    filter: drop-shadow(1px 1px var(--txtcolor));]\r\n                      [div=position: absolute;\r\n                      left: -4px;\r\n                      top: -4px;\r\n                      width: calc(100% + 8px);\r\n                      aspect-ratio: 1;\r\n                      background: var(--boxbg);\r\n                      clip-path: var(--circleclip);\r\n                      z-index: 1;]\r\n                      [/div]\r\n                    [/div]\r\n                    [div=position: absolute;\r\n                    position: absolute;\r\n                    left: 6px;\r\n                    top: 6px;\r\n                    aspect-ratio: 1;\r\n                    width: calc(100% - 12px);\r\n                    border-radius: 50%;\r\n                    z-index: 2;\r\n                    box-sizing: border-box;\r\n                    border: var(--boxborder);\r\n                    background: var(--mainbgcolor) var(--homeICON);]\r\n                      [comment]small img[/comment]\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n                [div=flex: 1 auto;]\r\n                  [div=display: block;\r\n                  font-family: var(--titlefont);\r\n                  font-size: 1.75rem;\r\n                  color: var(--color2);\r\n                  line-height: .9;\r\n                  padding-top: .5rem;]\r\n                    ",
          {
            "type": "text",
            "description": "Full Name",
            "marker": {
              "type": "text",
              "description": "Full Name",
              "defaultValue": "",
              "original": "&Full Name \\ text&",
              "indices": [
                11589,
                11606
              ]
            }
          },
          "\r\n                  [/div]\r\n                  [div=display: block;\r\n                  padding-top: 8px;\r\n                  padding-bottom: .5rem;]\r\n                    ",
          {
            "type": "text",
            "description": "Pronouns",
            "marker": {
              "type": "text",
              "description": "Pronouns",
              "defaultValue": "",
              "original": "&Pronouns \\ text&",
              "indices": [
                11775,
                11791
              ]
            }
          },
          " - ",
          {
            "type": "text",
            "description": "Age in Text",
            "marker": {
              "type": "text",
              "description": "Age in Text",
              "defaultValue": "",
              "original": "&Age in Text \\ text&",
              "indices": [
                11795,
                11814
              ]
            }
          },
          " (",
          {
            "type": "number",
            "description": "Age in Digits",
            "marker": {
              "type": "number",
              "description": "Age in Digits",
              "defaultValue": 0,
              "min": 16,
              "max": 18,
              "original": "&Age in Digits \\ number \\  \\ 16 \\ 18&",
              "indices": [
                11817,
                11853
              ]
            }
          },
          ")\r\n                  [/div]\r\n                [/div]\r\n              [/div]\r\n              [div=flex: 1.75 1rem;][comment]this is a spacer[/comment][/div]\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            12026,
            12030
          ]
        }
      },
      "\r\n          [/div]\r\n        [/div]\r\n      [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        12079,
        12083
      ]
    }
  },
  "\r\n      ",
  {
    "type": "group",
    "description": "Tab Two",
    "markerStart": {
      "type": "group",
      "description": "Tab Two",
      "original": "&Tab Two \\ group&",
      "repeat": false,
      "indices": [
        12092,
        12108
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display: block; /* physical tab */\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      container-type: size;\r\n      scroll-snap-align: start;]\r\n        [div=position: absolute;\r\n        width: 100cqb;\r\n        height: 100cqw;\r\n        transform: translateX(100cqw) rotate(90deg) translateZ(0);\r\n        transform-origin: top left;]\r\n          [div=position: relative;\r\n          z-index: 0;\r\n          top: 0px;\r\n          left: 0px;\r\n          height: 100%;\r\n          width: 100%;]\r\n            [div=position: absolute; top: -5rem; left: 100px;][a=tabONE][/a][/div]\r\n            ",
      {
        "type": "group",
        "description": "Image Gallery Window",
        "markerStart": {
          "type": "group",
          "description": "Image Gallery Window",
          "original": "&Image Gallery Window \\ group&",
          "repeat": false,
          "indices": [
            12743,
            12772
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=position: absolute; /* big physical window */\r\n            z-index: 1;\r\n            height: calc(100% - 3rem);\r\n            top: 1.5rem;\r\n            width: clamp(100px,100%,700px);\r\n            right: 0px;\r\n            display: flex;\r\n            flex-flow: column nowrap;\r\n            align-items: flex-start;\r\n            justify-content: stretch;\r\n            background: var(--mainbgcolor);\r\n            border: var(--boxborder);\r\n            border-radius: var(--mainrad);\r\n            box-sizing: border-box;\r\n            backdrop-filter: var(--bdf);\r\n            -webkit-backdrop-filter: var(--bdf);\r\n            overflow: hidden;\r\n            font-family: var(--accentfont);\r\n            background: var(--mainbgcolor);\r\n            line-height: 1;\r\n            color: var(--txtcolor);\r\n            font-size: 85%;]\r\n              [div=flex: 0 auto; \r\n              width: calc(100% + 3px);\r\n              display: flex;\r\n              flex-flow: row nowrap;\r\n              align-items: flex-start;\r\n              gap: .5rem;\r\n              padding: var(--titlepadding);\r\n              border-bottom: var(--boxborder);\r\n              background: var(--color3);\r\n              font-size: 1rem;]\r\n                [goto=homeTAB][div=flex: 0 auto; color: var(--txtcolor);][fa]fal fa-window-close[/fa][/div][/goto]\r\n                [div=flex: 0 auto;][fa]fal fa-window-minimize[/fa][/div]\r\n                [div=flex: 0 auto;][fa]fal fa-window-maximize[/fa][/div]\r\n              [/div]\r\n              [div=flex: 1 0px;\r\n              overflow: hidden;\r\n              font-size: 0px;\r\n              width: 100%;]\r\n                [div=display: flex;\r\n                flex-flow: row wrap;\r\n                width: calc(100% + 1px);\r\n                height: 100%;\r\n                margin-right: -1px;\r\n                align-items: stretch;]\r\n                  [div=flex: 4 250px; /* large img div */\r\n                  border-right: var(--boxborder);\r\n                  height: 100%;\r\n                  box-sizing: border-box;\r\n                  padding: 1rem;\r\n                  position: relative;\r\n                  overflow: hidden;]\r\n                    [div=display: block;\r\n                    width: 100%;\r\n                    overflow: hidden;\r\n                    height: 100%;\r\n                    border-radius: 5px;\r\n                    box-sizing: border-box;\r\n                    border: var(--boxborder);\r\n                    position: relative;]\r\n                      [div=position: absolute;\r\n                      left: 0px;\r\n                      top: 0px;\r\n                      height: calc(100% + 1px);\r\n                      width: calc(100% + 1px);\r\n                      background: var(--physIMG);\r\n                      filter: var(--imgFILTER);]\r\n                        [comment]main phys img[/comment]\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n                  [div=flex: 1 125px; /* small images div */\r\n                  box-sizing: border-box;\r\n                  position: relative;\r\n                  overflow: hidden;]\r\n                    [div=position: absolute;\r\n                    top: 1rem;\r\n                    left: .5rem;\r\n                    display: block;\r\n                    width: calc((100% - 1rem) + 50px);\r\n                    height: calc(100% - 2rem);\r\n                    padding-right: 50px;\r\n                    box-sizing: border-box;\r\n                    scrollbar-gutter: stable both-edges;\r\n                    overflow-x: hidden;\r\n                    overflow-y: scroll;\r\n                    scroll-snap-type: y proximity;]\r\n                      ",
          {
            "type": "group",
            "description": "Image",
            "markerStart": {
              "type": "group",
              "description": "Image",
              "original": "&Image \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                16433,
                16456
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[div=display: block; /* image div */\r\n                      border-radius: 5px;\r\n                      margin-bottom: 1px;\r\n                      box-sizing: border-box;\r\n                      border: var(--boxborder);\r\n                      overflow: hidden;\r\n                      scroll-snap-align: start;]\r\n                        [img]",
              {
                "type": "text",
                "description": "Image URL",
                "marker": {
                  "type": "text",
                  "description": "Image URL",
                  "defaultValue": "",
                  "original": "&Image URL \\ text&",
                  "indices": [
                    16797,
                    16814
                  ]
                }
              },
              "[/img]\r\n                      [/div]\r\n                      "
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "",
              "original": "&\\ end&",
              "indices": [
                16875,
                16881
              ]
            }
          },
          "\r\n                      [comment]insert image div BEFORE this comment tag[/comment]\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n              [/div]\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            17085,
            17089
          ]
        }
      },
      "\r\n            ",
      {
        "type": "group",
        "description": "Information Window",
        "markerStart": {
          "type": "group",
          "description": "Information Window",
          "original": "&Information Window \\ group&",
          "repeat": false,
          "indices": [
            17104,
            17131
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=position: absolute; /* small physical window */\r\n            box-sizing: border-box;\r\n            z-index: 1;\r\n            height: calc(100% - 3rem);\r\n            width: 100%;\r\n            top: 1.5rem;\r\n            left: 0px;\r\n            pointer-events: none;\r\n            display: flex;\r\n            flex-flow: row nowrap;\r\n            align-items: center;\r\n            justify-content: center;\r\n            overflow: hidden;]\r\n              [div=flex: 1.5 1.25rem;][comment]spacer[/comment][/div]\r\n              [div=flex: 2 225px;\r\n              position: relative;\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--mainrad);\r\n              box-sizing: border-box;\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);\r\n              font-size: 1rem;]\r\n                [div=display: block; /* file name */\r\n                border-bottom: var(--boxborder);\r\n                padding: var(--titlepadding);\r\n                font-family: var(--titlefont);\r\n                font-size: .95rem;\r\n                color: var(--txtcolor);\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                pointer-events: auto;\r\n                position: relative;]\r\n                  [goto=homeTAB][div=display: inline;  font-size: 1rem; margin-right: 5px; font-size: 1rem; color: var(--txtcolor);] [fa]fal fa-window-close[/fa][/div][/goto]\r\n                  ",
          {
            "type": "text",
            "description": "Name",
            "marker": {
              "type": "text",
              "description": "Name",
              "defaultValue": "",
              "original": "&Name \\ text&",
              "indices": [
                18637,
                18649
              ]
            }
          },
          ".jpg\r\n                [/div]\r\n                [div=display: block; /* small window image */\r\n                aspect-ratio: 16/9;\r\n                width: 100%;\r\n                font-size: 0px;\r\n                background: var(--physIMG);\r\n                filter: var(--imgFILTER) var(--bwFILTER);]\r\n                  [comment]smaller ver of main phys image[/comment]\r\n                [/div]\r\n                [div=display: block; /* phys details */\r\n                padding: var(--titlepadding);\r\n                padding-right: 1.25rem;\r\n                padding-bottom: 1rem;\r\n                box-sizing: border-box;\r\n                border-top: var(--boxborder);\r\n                font-size: 85%;\r\n                font-family: var(--accentfont);\r\n                color: var(--txtcolor);\r\n                line-height: 1.1;\r\n                width: 100%;\r\n                position: relative;]\r\n                  ",
          {
            "type": "group",
            "description": "Details",
            "markerStart": {
              "type": "group",
              "description": "Details",
              "original": "&Details \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                19557,
                19582
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[div=display: flex;\r\n                  flex-flow: row wrap;\r\n                  align-items: flex-start;\r\n                  box-sizing: border-box;\r\n                  width: 100%; ]\r\n                    [div=flex: 1 3.75rem; text-align: right;]\r\n                      ",
              {
                "type": "text",
                "description": "Detail",
                "marker": {
                  "type": "text",
                  "description": "Detail",
                  "defaultValue": "",
                  "original": "&Detail \\ text&",
                  "indices": [
                    19850,
                    19864
                  ]
                }
              },
              "\r\n                    [/div]\r\n                    [div=flex: 4 4rem; box-sizing: border-box; padding-left: 5px; font-family: var(--txtfont); color: var(--bodycolor);]\r\n                      ",
              {
                "type": "text",
                "description": "Detail Description",
                "marker": {
                  "type": "text",
                  "description": "Detail Description",
                  "defaultValue": "",
                  "original": "&Detail Description \\ text&",
                  "indices": [
                    20055,
                    20081
                  ]
                }
              },
              "\r\n                    [/div]\r\n                  [/div]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "",
              "original": "&\\ end&",
              "indices": [
                20136,
                20142
              ]
            }
          },
          "\r\n                  [comment]insert detail copypaste BEFORE this comment tag[/comment]\r\n                [/div]\r\n              [/div]\r\n              [div=flex: 11 .5rem;][comment]spacer[/comment][/div]\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            20363,
            20367
          ]
        }
      },
      "\r\n          [/div]\r\n        [/div]\r\n      [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        20416,
        20420
      ]
    }
  },
  "\r\n      ",
  {
    "type": "group",
    "description": "Tab Three",
    "markerStart": {
      "type": "group",
      "description": "Tab Three",
      "original": "&Tab Three \\ group&",
      "repeat": false,
      "indices": [
        20429,
        20447
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display: block; /* personal tab */\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      container-type: size;\r\n      scroll-snap-align: start;]\r\n        [div=position: absolute;\r\n        width: 100cqb;\r\n        height: 100cqw;\r\n        transform: translateX(100cqw) rotate(90deg) translateZ(0);\r\n        transform-origin: top left;]\r\n          [div=position: relative;\r\n          margin: auto;\r\n          top: 3.5rem;\r\n          height: calc(100% - 7rem);\r\n          width: clamp(250px,100%,calc(1000px - 2rem));\r\n          padding: 1rem;\r\n          overflow: hidden;\r\n          box-sizing: border-box;\r\n          display: flex;\r\n          flex-flow: row wrap;\r\n          align-items: stretch;\r\n          align-content: stretch;\r\n          gap: 1rem;]\r\n            [div=position: absolute; top: -8.5rem; left: 100px;][a=tabTWO][/a][/div]\r\n            ",
      {
        "type": "group",
        "description": "Sidebar",
        "markerStart": {
          "type": "group",
          "description": "Sidebar",
          "original": "&Sidebar \\ group&",
          "repeat": false,
          "indices": [
            21351,
            21367
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=flex: 1 200px; /* sidebar area */\r\n            background: var(--mainbgcolor);\r\n            border: var(--boxborder);\r\n            border-radius: var(--mainrad);\r\n            box-sizing: border-box;\r\n            backdrop-filter: var(--bdf);\r\n            -webkit-backdrop-filter: var(--bdf);\r\n            position: relative;]\r\n              [div=position: absolute;\r\n              top: 1rem;\r\n              left: 1rem;\r\n              width: calc(100% - 2rem);\r\n              height: calc(100% - 2rem);\r\n              display: flex;\r\n              gap: 1rem;\r\n              flex-flow: column wrap;\r\n              align-items: stretch;\r\n              align-content: stretch;\r\n              overflow: hidden;]\r\n                [div=flex: 3 85px; /* profile image */\r\n                border: var(--boxborder);\r\n                border-radius: var(--btnrad);\r\n                background: var(--homeICON)]\r\n                  [comment]user profile image[/comment]\r\n                [/div]\r\n                [div=flex: 1 100px; /* sidebar text */\r\n                box-sizing: border-box;\r\n                padding: 0px .35rem;\r\n                font-size: 1rem;\r\n                color: var(--txtcolor);\r\n                overflow: hidden;\r\n                position: relative;\r\n                font-family: var(--txtfont);\r\n                box-sizing: border-box;\r\n                display: flex;\r\n                flex-flow: column nowrap;]     \r\n                  [div=flex: 0 auto; /* sidebar name */\r\n                  font-family: var(--titlefont);\r\n                  font-size: 1.75rem;\r\n                  line-height: .9;\r\n                  color: var(--color2);\r\n                  line-height: .9;\r\n                  padding-top: .5rem;]\r\n                    ",
          {
            "type": "text",
            "description": "Full Name",
            "marker": {
              "type": "text",
              "description": "Full Name",
              "defaultValue": "",
              "original": "&Full Name \\ text&",
              "indices": [
                23122,
                23139
              ]
            }
          },
          "\r\n                  [/div]\r\n                  [div=flex: 0 auto;  /* sidebar username */\r\n                  box-sizing: border-box;\r\n                  font-size: 85%;\r\n                  padding-top: 2px;\r\n                  color: var(--bodycolor);\r\n                  padding-left: 5px;\r\n                  font-family: var(--accentfont);]\r\n                    [div=display: inline; margin-right: 2px;]@[i][/i][/div]",
          {
            "type": "text",
            "description": "Username",
            "marker": {
              "type": "text",
              "description": "Username",
              "defaultValue": "",
              "original": "&Username \\ text&",
              "indices": [
                23554,
                23570
              ]
            }
          },
          "\r\n                  [/div]\r\n                  [div=flex: 1 3rem; \r\n                  box-sizing: border-box;\r\n                  padding-top: 5px;\r\n                  color: var(--bodycolor);\r\n                  font-size: 93%;\r\n                  position: relative;\r\n                  overflow: hidden;]\r\n                    [div=position: absolute; /* sidebar text */\r\n                    height: 100%;\r\n                    width: calc(100% + 50px);\r\n                    box-sizing: border-box;\r\n                    padding-right: 50px;\r\n                    padding-bottom: 5px;\r\n                    overflow-x: hidden;\r\n                    overflow-y: auto;\r\n                    line-height: 1.2;]\r\n                      ",
          {
            "type": "content",
            "description": "Sidebar Text (Keep Brief)",
            "marker": {
              "type": "content",
              "description": "Sidebar Text (Keep Brief)",
              "original": "&Sidebar Text (Keep Brief) \\ content&",
              "indices": [
                24292,
                24328
              ]
            }
          },
          "\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n              [/div]\r\n              [goto=homeTAB][div=position: absolute;\r\n              width: 2rem;\r\n              top: 1.5rem;\r\n              right: 1.5rem;\r\n              aspect-ratio: 1;\r\n              text-transform: uppercase;\r\n              line-height: 1;\r\n              font-size: 1.25rem;\r\n              color: var(--txtcolor);]\r\n                [div=position: absolute;\r\n                top: 50%;\r\n                left: 50%;\r\n                transform: translate(-50%,-50%);][fa]fal fa-times[/fa][/div]\r\n              [/div][/goto]\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            24973,
            24977
          ]
        }
      },
      "\r\n            [div=flex: 3 200px;\r\n            min-height: 175px;\r\n            overflow: hidden;\r\n            position: relative;]\r\n              [div=position: absolute;\r\n              box-sizing: border-box;\r\n              top: 0px;\r\n              height: 100%;\r\n              left: 0px;\r\n              width: calc(100% + 30px);\r\n              padding-right: 30px;\r\n              overflow-x: hidden;\r\n              overflow-y: scroll;\r\n              scrollbar-gutter: stable both-edges;\r\n              display: flex;\r\n              flex-flow: column nowrap;\r\n              gap: 1rem;]\r\n                ",
      {
        "type": "group",
        "description": "Pinned Text Post",
        "markerStart": {
          "type": "group",
          "description": "Pinned Text Post",
          "original": "&Pinned Text Post \\ group&",
          "repeat": false,
          "indices": [
            25582,
            25607
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=flex: 0 auto; /* pinned post */\r\n                margin-bottom: 1px;\r\n                display: flex;\r\n                flex-flow: row nowrap;\r\n                align-items: flex-start;\r\n                justify-content: center;\r\n                gap: 10px;\r\n                font-family: var(--accentfont);\r\n                background: var(--mainbgcolor);\r\n                border: var(--boxborder);\r\n                border-radius: var(--mainrad);\r\n                box-sizing: border-box;\r\n                line-height: 1;\r\n                color: var(--txtcolor);\r\n                backdrop-filter: var(--bdf);\r\n                -webkit-backdrop-filter: var(--bdf);\r\n                padding: var(--itempadding);]\r\n                  [div=flex: 0 5.5rem;\r\n                  aspect-ratio: 1;\r\n                  top: 1rem;\r\n                  position: sticky;\r\n                  box-sizing: border-box;\r\n                  padding: 2px;]\r\n                    [div=display: block;\r\n                    height: calc(100% - 4px);\r\n                    aspect-ratio: 1;\r\n                    border-radius: 50%;\r\n                    box-sizing: border-box;\r\n                    border: var(--boxborder);\r\n                    position: relative;\r\n                    overflow: hidden;]\r\n                      [div=display: block;\r\n                      width: 100%;\r\n                      aspect-ratio: 1;\r\n                      overflow: hidden;\r\n                      filter: drop-shadow(1px 1px var(--txtcolor));]\r\n                        [div=position: absolute;\r\n                        left: -4px;\r\n                        top: -4px;\r\n                        width: calc(100% + 8px);\r\n                        aspect-ratio: 1;\r\n                        background: var(--boxbg);\r\n                        clip-path: var(--circleclip);\r\n                        z-index: 1;]\r\n                        [/div]\r\n                      [/div]\r\n                      [div=position: absolute;\r\n                      position: absolute;\r\n                      left: 6px;\r\n                      top: 6px;\r\n                      aspect-ratio: 1;\r\n                      width: calc(100% - 12px);\r\n                      border-radius: 50%;\r\n                      z-index: 2;\r\n                      box-sizing: border-box;\r\n                      border: var(--boxborder);\r\n                      background: var(--mainbgcolor) var(--homeICON);]\r\n                        [comment]small img[/comment]\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n                  [div=flex: 1 100px;]\r\n                    [div=display: block; /* username */\r\n                    line-height: .9;\r\n                    padding-top: 1rem;\r\n                    box-sizing: border-box;\r\n                    padding-left: .25rem;\r\n                    font-size: 85%;]\r\n                      [fa]fal fa-thumbtack[/fa]\r\n                      [div=display: inline; \r\n                      font-family: var(--titlefont);\r\n                      font-size: 1.25rem;\r\n                      color: var(--color2);\r\n                      margin-left: 2px;]\r\n                        [div=display: inline; margin-right: 2px;]@[i][/i][/div]",
          {
            "type": "text",
            "description": "Username",
            "marker": {
              "type": "text",
              "description": "Username",
              "defaultValue": "",
              "original": "&Username \\ text&",
              "indices": [
                28821,
                28837
              ]
            }
          },
          "\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: block; /* text content */\r\n                    font-family: var(--txtfont);\r\n                    color: var(--bodycolor);\r\n                    line-height: 1.3;\r\n                    font-size: 93%;\r\n                    margin: .5rem 0px 1rem 0px;]\r\n                      ",
          {
            "type": "content",
            "description": "Pinned Text Post Content",
            "marker": {
              "type": "content",
              "description": "Pinned Text Post Content",
              "original": "&Pinned Text Post Content \\ content&",
              "indices": [
                29203,
                29238
              ]
            }
          },
          "\r\n                    [/div]\r\n                  [/div]\r\n                [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            29317,
            29321
          ]
        }
      },
      "\r\n                ",
      {
        "type": "group",
        "description": "Text Post",
        "markerStart": {
          "type": "group",
          "description": "Text Post",
          "original": "&Text Post \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            29340,
            29367
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 auto; /* text post */\r\n                margin-bottom: 1px;\r\n                display: flex;\r\n                flex-flow: row nowrap;\r\n                align-items: flex-start;\r\n                justify-content: center;\r\n                gap: 10px;\r\n                font-family: var(--accentfont);\r\n                background: var(--mainbgcolor);\r\n                border: var(--boxborder);\r\n                border-radius: var(--mainrad);\r\n                box-sizing: border-box;\r\n                line-height: 1;\r\n                color: var(--txtcolor);\r\n                backdrop-filter: var(--bdf);\r\n                -webkit-backdrop-filter: var(--bdf);\r\n                padding: var(--itempadding);]\r\n                  [div=flex: 0 5.5rem;\r\n                  aspect-ratio: 1;\r\n                  top: 1rem;\r\n                  position: sticky;\r\n                  box-sizing: border-box;\r\n                  padding: 2px;]\r\n                    [div=display: block;\r\n                    height: calc(100% - 4px);\r\n                    aspect-ratio: 1;\r\n                    border-radius: 50%;\r\n                    box-sizing: border-box;\r\n                    border: var(--boxborder);\r\n                    position: relative;\r\n                    overflow: hidden;]\r\n                      [div=display: block;\r\n                      width: 100%;\r\n                      aspect-ratio: 1;\r\n                      overflow: hidden;\r\n                      filter: drop-shadow(1px 1px var(--txtcolor));]\r\n                        [div=position: absolute;\r\n                        left: -4px;\r\n                        top: -4px;\r\n                        width: calc(100% + 8px);\r\n                        aspect-ratio: 1;\r\n                        background: var(--boxbg);\r\n                        clip-path: var(--circleclip);\r\n                        z-index: 1;]\r\n                        [/div]\r\n                      [/div]\r\n                      [div=position: absolute;\r\n                      position: absolute;\r\n                      left: 6px;\r\n                      top: 6px;\r\n                      aspect-ratio: 1;\r\n                      width: calc(100% - 12px);\r\n                      border-radius: 50%;\r\n                      z-index: 2;\r\n                      box-sizing: border-box;\r\n                      border: var(--boxborder);\r\n                      background: var(--mainbgcolor) var(--homeICON);]\r\n                        [comment]small img[/comment]\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n                  [div=flex: 1 100px;]\r\n                    [div=display: block; /* username */\r\n                    line-height: .9;\r\n                    padding-top: 1rem;\r\n                    box-sizing: border-box;\r\n                    padding-left: .25rem;\r\n                    font-size: 85%;]\r\n                      [div=display: inline; \r\n                      font-family: var(--titlefont);\r\n                      font-size: 1.25rem;\r\n                      color: var(--color2);]\r\n                        [div=display: inline; margin-right: 2px;]@[i][/i][/div]",
          {
            "type": "text",
            "description": "Username",
            "marker": {
              "type": "text",
              "description": "Username",
              "defaultValue": "",
              "original": "&Username \\ text&",
              "indices": [
                32489,
                32505
              ]
            }
          },
          "\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: block; /* text content */\r\n                    font-family: var(--txtfont);\r\n                    color: var(--bodycolor);\r\n                    line-height: 1.3;\r\n                    font-size: 93%;\r\n                    margin: .5rem 0px 1rem 0px;]\r\n                      ",
          {
            "type": "content",
            "description": "Text Post Content",
            "marker": {
              "type": "content",
              "description": "Text Post Content",
              "original": "&Text Post Content \\ content&",
              "indices": [
                32871,
                32899
              ]
            }
          },
          "\r\n                    [/div]\r\n                  [/div]\r\n                [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "",
          "original": "&\\ end&",
          "indices": [
            32978,
            32984
          ]
        }
      },
      "\r\n                [comment]insert text of image post dive BEFORE this comment[/comment]\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        [/div]\r\n      [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        33162,
        33166
      ]
    }
  },
  "\r\n      ",
  {
    "type": "group",
    "description": "Tab Four",
    "markerStart": {
      "type": "group",
      "description": "Tab Four",
      "original": "&Tab Four \\ group&",
      "repeat": false,
      "indices": [
        33175,
        33192
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display: block; /* misc tab */\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      container-type: size;\r\n      scroll-snap-align: start;]\r\n        [div=position: absolute;\r\n        width: 100cqb;\r\n        height: 100cqw;\r\n        transform: translateX(100cqw) rotate(90deg) translateZ(0);\r\n        transform-origin: top left;\r\n        overflow: hidden;]\r\n          [div=position: absolute; top: -5rem; left: 100px;][a=tabTHREE][/a][/div]\r\n          [div=position: relative;\r\n          display: block;\r\n          z-index: 0;\r\n          top: 5px;\r\n          left: 0px;\r\n          height: calc(100% - 10px);\r\n          box-sizing: border-box;\r\n          width: calc(100% + 50px);\r\n          padding-right: 50px;\r\n          overflow-x: hidden;\r\n          overflow-y: auto;\r\n          scrollbar-gutter: stable both-edges;]\r\n            ",
      {
        "type": "group",
        "description": "Decorative Elements",
        "markerStart": {
          "type": "group",
          "description": "Decorative Elements",
          "original": "&Decorative Elements \\ group&",
          "repeat": false,
          "indices": [
            34078,
            34106
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=position: absolute; /* random background text */\r\n            left: 0px;\r\n            bottom: 0rem;\r\n            z-index: 0;\r\n            font-size: 70px;\r\n            width: 80%;\r\n            left: 10%;\r\n            font-family: var(--titlefont);\r\n            color: var(--mainbgcolor);\r\n            line-height: .75;\r\n            text-transform: uppercase;]\r\n              ",
          {
            "type": "content",
            "description": "Background Text (Linebreak With BR BBCode)",
            "marker": {
              "type": "content",
              "description": "Background Text (Linebreak With BR BBCode)",
              "original": "&Background Text (Linebreak With BR BBCode) \\ content&",
              "indices": [
                34487,
                34540
              ]
            }
          },
          "\r\n            [/div]\r\n            [div=position: absolute; /* image float */\r\n            left: 0px;\r\n            top: 1rem;\r\n            z-index: 3;\r\n            width: clamp(250px,40cqi,600px);\r\n            filter: var(--imgFILTER);\r\n            height: 60cqb;\r\n            left: 5%;\r\n            background: var(--miscIMG);]\r\n              [comment]floating img[/comment]\r\n            [/div]\r\n            [div=display: block; /* random text box */\r\n            position: relative;\r\n            z-index: 1;\r\n            font-family: var(--accentfont);\r\n            background: var(--mainbgcolor);\r\n            font-size: 85%;\r\n            border: var(--boxborder);\r\n            border-radius: var(--mainrad);\r\n            box-sizing: border-box;\r\n            line-height: 1;\r\n            color: var(--txtcolor);\r\n            backdrop-filter: var(--bdf);\r\n            -webkit-backdrop-filter: var(--bdf);\r\n            padding: var(--titlepadding);\r\n            padding-right: 1.25rem;\r\n            width: clamp(275px,60%,500px);\r\n            margin-right: 1rem auto;\r\n            margin-left: 1rem;]\r\n              ",
          {
            "type": "content",
            "description": "Quote Box",
            "marker": {
              "type": "content",
              "description": "Quote Box",
              "original": "&Quote Box \\ content&",
              "indices": [
                35657,
                35677
              ]
            }
          },
          "\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            35698,
            35702
          ]
        }
      },
      "\r\n            ",
      {
        "type": "group",
        "description": "Misc Box",
        "markerStart": {
          "type": "group",
          "description": "Misc Box",
          "original": "&Misc Box \\ group&",
          "repeat": false,
          "indices": [
            35717,
            35734
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=display: flex; /* preferences */\r\n            position: relative;\r\n            z-index: 4;\r\n            font-size: 93%;\r\n            flex-flow: row wrap;\r\n            align-items: stretch;\r\n            gap: 10px;\r\n            width: clamp(275px,75%,700px);\r\n            margin-left: auto;\r\n            margin-right: 1rem;\r\n            box-sizing: border-box;\r\n            line-height: 1;\r\n            margin-top: 10px;]\r\n              ",
          {
            "type": "group",
            "description": "Misc Box",
            "markerStart": {
              "type": "group",
              "description": "Misc Box",
              "original": "&Misc Box \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                36175,
                36201
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[div=flex: 1 150px; /* filler box */\r\n              position: relative;\r\n              font-family: var(--txtfont);\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--mainrad);\r\n              box-sizing: border-box;\r\n              line-height: 1;\r\n              color: var(--bodycolor);\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);]\r\n                [div=display: block; \r\n                padding: var(--titlepadding);\r\n                font-family: var(--titlefont);\r\n                font-size: 1rem;\r\n                border-bottom: var(--boxborder);\r\n                color: var(--color2);]\r\n                  ",
              {
                "type": "text",
                "description": "Box Name",
                "marker": {
                  "type": "text",
                  "description": "Box Name",
                  "defaultValue": "",
                  "original": "&Box Name \\ text&",
                  "indices": [
                    36936,
                    36952
                  ]
                }
              },
              "\r\n                [/div]\r\n                [div=display: block;\r\n                padding: var(--itempadding);\r\n                padding-bottom: .75rem;]\r\n                  ",
              {
                "type": "content",
                "description": "Box Content",
                "marker": {
                  "type": "content",
                  "description": "Box Content",
                  "original": "&Box Content \\ content&",
                  "indices": [
                    37123,
                    37145
                  ]
                }
              },
              "\r\n                [/div]\r\n              [/div]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "",
              "original": "&\\ end&",
              "indices": [
                37192,
                37198
              ]
            }
          },
          "\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            37219,
            37223
          ]
        }
      },
      "\r\n            ",
      {
        "type": "group",
        "description": "Stat Bar Window",
        "markerStart": {
          "type": "group",
          "description": "Stat Bar Window",
          "original": "&Stat Bar Window \\ group&",
          "repeat": false,
          "indices": [
            37238,
            37262
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=display: flex; /* powers block */\r\n            flex-flow: row wrap;\r\n            align-items: flex-start;\r\n            justify-content: center;\r\n            gap: 10px;\r\n            box-sizing: border-box;\r\n            position: relative;\r\n            z-index: 4;\r\n            box-sizing: border-box;\r\n            width: clamp(200px,100%,625px);\r\n            margin: 2rem auto;\r\n            margin-top: 0px;\r\n            padding: 10px;\r\n            padding-bottom: 2rem;]\r\n              [div=flex: 1 200px; /* power stats */\r\n              font-family: var(--accentfont);\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--mainrad);\r\n              box-sizing: border-box;\r\n              line-height: 1;\r\n              color: var(--txtcolor);\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);]\r\n                [div=display: block; /* powers title */\r\n                border-bottom: var(--boxborder);\r\n                padding: var(--titlepadding);\r\n                font-family: var(--titlefont);\r\n                font-size: .95rem;\r\n                color: var(--txtcolor);\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                pointer-events: auto;\r\n                position: relative;]\r\n                  [goto=homeTAB][div=display: inline;  font-size: 1rem; margin-right: 5px; font-size: 1rem; color: var(--txtcolor);] [fa]fal fa-window-close[/fa][/div][/goto]\r\n                  ",
          {
            "type": "text",
            "description": "Window Name",
            "marker": {
              "type": "text",
              "description": "Window Name",
              "defaultValue": "",
              "original": "&Window Name \\ text&",
              "indices": [
                38810,
                38829
              ]
            }
          },
          ".txt\r\n                [/div]\r\n                [div=display: flex;\r\n                flex-flow: column nowrap;\r\n                gap: 5px;\r\n                padding: var(--titlepadding);\r\n                padding-right: 1.25rem;\r\n                padding-bottom: 1rem;\r\n                box-sizing: border-box;\r\n                font-size: 85%;\r\n                font-family: var(--accentfont);\r\n                color: var(--txtcolor);\r\n                line-height: 1.1;\r\n                width: 100%;\r\n                position: relative;]\r\n                  ",
          {
            "type": "group",
            "description": "Stat Bar",
            "markerStart": {
              "type": "group",
              "description": "Stat Bar",
              "original": "&Stat Bar \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                39379,
                39405
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[div=flex: 0 auto;\r\n                  display: flex;\r\n                  gap: 3px;\r\n                  flex-flow: row wrap;\r\n                  align-items: stretch;\r\n                  box-sizing: border-box;\r\n                  width: 100%;]\r\n                    [div=flex: 1 3.75rem; text-align: right;]",
              {
                "type": "text",
                "description": "Stat Bar Name",
                "marker": {
                  "type": "text",
                  "description": "Stat Bar Name",
                  "defaultValue": "",
                  "original": "&Stat Bar Name \\ text&",
                  "indices": [
                    39707,
                    39728
                  ]
                }
              },
              "[/div]\r\n                    [div=flex: 4 4rem; position: relative; min-height: .75rem; max-height: 1rem;]\r\n                      [div=--stat: \r\n                      ",
              {
                "type": "number",
                "description": "Stat Bar Value",
                "marker": {
                  "type": "number",
                  "description": "Stat Bar Value",
                  "defaultValue": 0,
                  "min": 0,
                  "max": 100,
                  "original": "&Stat Bar Value \\ number \\ 00 \\ 0 \\ 100&",
                  "indices": [
                    39895,
                    39934
                  ]
                }
              },
              "%;\r\n                      position: absolute;\r\n                      left: 0px;\r\n                      width: 100%;\r\n                      top: 0px;\r\n                      height: 100%;\r\n                      background: var(--boxbg);\r\n                      clip-path: polygon(5px 0, var(--stat) 0, calc(var(--stat) - 5px) 100%, 0% 100%);]\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "",
              "original": "&\\ end&",
              "indices": [
                40358,
                40364
              ]
            }
          },
          "\r\n                  [comment]insert stat copypaste BEFORE this comment tag[/comment]\r\n                [/div]\r\n              [/div]\r\n              [div=flex: 1.5 200px; /* power desc */\r\n              position: relative;\r\n              font-family: var(--txtfont);\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--mainrad);\r\n              box-sizing: border-box;\r\n              line-height: 1.2;\r\n              color: var(--bodycolor);\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);\r\n              padding: var(--titlepadding);\r\n              padding-right: 1.25rem;\r\n              text-align: justify;\r\n              font-size: 93%;]\r\n                [div=display: block;]\r\n                  ",
          {
            "type": "content",
            "description": "Text Box Content",
            "marker": {
              "type": "content",
              "description": "Text Box Content",
              "original": "&Text Box Content \\ content&",
              "indices": [
                41181,
                41208
              ]
            }
          },
          "\r\n                [/div]\r\n              [/div]\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            41275,
            41279
          ]
        }
      },
      "\r\n          [/div]\r\n        [/div]\r\n      [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        41328,
        41332
      ]
    }
  },
  "\r\n      ",
  {
    "type": "group",
    "description": "Tab Five",
    "markerStart": {
      "type": "group",
      "description": "Tab Five",
      "original": "&Tab Five \\ group&",
      "repeat": false,
      "indices": [
        41341,
        41358
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display: block; /* rel tab */\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      container-type: size;\r\n      scroll-snap-align: start;]\r\n        [div=position: absolute;\r\n        width: 100cqb;\r\n        height: 100cqw;\r\n        transform: translateX(100cqw) rotate(90deg);\r\n        transform-origin: top left;\r\n        overflow: hidden;]\r\n          [div=position: absolute; top: -5rem; left: 100px;][a=tabFOUR][/a][/div]\r\n          [div=position: relative;\r\n          margin: auto;\r\n          margin-top: 4rem;\r\n          height: calc(100% - 8rem);\r\n          width: clamp(200px,calc(100% - 3rem),900px);\r\n          overflow: hidden;]\r\n            [div=position: relative;\r\n            display: flex;\r\n            flex-flow: column nowrap;\r\n            gap: 1.5rem;\r\n            font-size: 1rem;\r\n            z-index: 0;\r\n            height: 100%;\r\n            box-sizing: border-box;\r\n            width: calc(100% + 50px);\r\n            padding-right: 50px;\r\n            overflow-x: hidden;\r\n            overflow-y: auto;\r\n            scrollbar-gutter: stable both-edges;]\r\n              ",
      {
        "type": "group",
        "description": "Contact",
        "markerStart": {
          "type": "group",
          "description": "Contact",
          "original": "&Contact \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            42502,
            42527
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=--contactIMG: url(",
          {
            "type": "text",
            "description": "Image URL",
            "marker": {
              "type": "text",
              "description": "Image URL",
              "defaultValue": "",
              "original": "&Image URL \\ text&",
              "indices": [
                42551,
                42568
              ]
            }
          },
          ") no-repeat center center/cover; /* relationship div */\r\n              flex: 0 auto;\r\n              display: flex;\r\n              flex-flow: row wrap;\r\n              align-items: flex-start;\r\n              gap: 10px 1rem;]\r\n                [div=flex: 1 11rem;\r\n                position: relative;]\r\n                  [div=display: block;\r\n                  width: calc(100% - 1.5rem);\r\n                  box-sizing: border-box;                  \r\n                  background: var(--mainbgcolor);\r\n                  border: var(--boxborder);\r\n                  border-radius: var(--mainrad);\r\n                  line-height: 1;\r\n                  color: var(--txtcolor);\r\n                  backdrop-filter: var(--bdf);\r\n                  -webkit-backdrop-filter: var(--bdf);\r\n                  padding: 1rem 15%;]\r\n                    [div=display: block; /* contact image */\r\n                    height: calc(100% - 4px);\r\n                    max-height: 8rem;\r\n                    aspect-ratio: 1;\r\n                    margin: auto;\r\n                    border-radius: 50%;\r\n                    box-sizing: border-box;\r\n                    border: var(--boxborder);\r\n                    position: relative;\r\n                    overflow: hidden;]\r\n                      [div=display: block;\r\n                      width: 100%;\r\n                      aspect-ratio: 1;\r\n                      overflow: hidden;\r\n                      filter: drop-shadow(1px 1px var(--txtcolor));]\r\n                        [div=position: absolute;\r\n                        left: -4px;\r\n                        top: -4px;\r\n                        width: calc(100% + 8px);\r\n                        aspect-ratio: 1;\r\n                        background: var(--boxbg);\r\n                        clip-path: var(--circleclip);\r\n                        z-index: 1;]\r\n                        [/div]\r\n                      [/div]\r\n                      [div=position: absolute;\r\n                      position: absolute;\r\n                      left: 6px;\r\n                      top: 6px;\r\n                      aspect-ratio: 1;\r\n                      width: calc(100% - 12px);\r\n                      border-radius: 50%;\r\n                      z-index: 2;\r\n                      box-sizing: border-box;\r\n                      border: var(--boxborder);\r\n                      background: var(--mainbgcolor) var(--contactIMG);]\r\n                        [comment]small img[/comment]\r\n                      [/div]\r\n                    [/div]\r\n                    [div=display: block; /* contact name */\r\n                    font-family: var(--titlefont);\r\n                    text-align: center;\r\n                    font-size: 1.5rem;\r\n                    color: var(--color2);\r\n                    text-transform: lowercase;\r\n                    margin-top: .75rem;]\r\n                      ",
          {
            "type": "text",
            "description": "Contact Name",
            "marker": {
              "type": "text",
              "description": "Contact Name",
              "defaultValue": "",
              "original": "&Contact Name \\ text&",
              "indices": [
                45426,
                45446
              ]
            }
          },
          "\r\n                    [/div]\r\n                    [div=display: block; /* contact username */\r\n                    font-family: var(--accentfont);\r\n                    text-align: center;\r\n                    font-size: 85%;\r\n                    color: var(--bodycolor);\r\n                    text-transform: lowercase;\r\n                    margin-top: 3px;\r\n                    margin-bottom: .5rem;]\r\n                      [div=display: inline; margin-right: 2px;]@[i][/i][/div]",
          {
            "type": "text",
            "description": "Contact Username",
            "marker": {
              "type": "text",
              "description": "Contact Username",
              "defaultValue": "",
              "original": "&Contact Username \\ text&",
              "indices": [
                45926,
                45950
              ]
            }
          },
          "\r\n                    [/div]\r\n                  [/div]\r\n                  [div=display: flex;\r\n                  flex-flow: column nowrap;\r\n                  width: 3rem;\r\n                  align-items: center;\r\n                  justify-content: space-evenly;\r\n                  position: absolute;\r\n                  top: 1rem;\r\n                  right: 0px;\r\n                  height: calc(100% - 2rem);]\r\n                    [div=flex: 0 3rem;\r\n                    width: 3rem;\r\n                    aspect-ratio: 1;\r\n                    backdrop-filter: var(--bdf);\r\n                    -webkit-backdrop-filter: var(--bdf);\r\n                    background: var(--mainbgcolor);\r\n                    border: var(--boxborder);\r\n                    border-radius: var(--btnrad);\r\n                    box-sizing: border-box;\r\n                    position: relative;\r\n                    text-transform: uppercase;\r\n                    background: var(--mainbgcolor);\r\n                    line-height: 1;\r\n                    font-size: 80%;\r\n                    color: var(--txtcolor);]\r\n                      [div=position: absolute;\r\n                      top: 50%;\r\n                      left: 50%;\r\n                      transform: translate(-50%,-50%);][fa]fal fa-phone[/fa][/div]\r\n                    [/div]\r\n                    [div=flex: 0 3rem;\r\n                    width: 3rem;\r\n                    aspect-ratio: 1;\r\n                    backdrop-filter: var(--bdf);\r\n                    -webkit-backdrop-filter: var(--bdf);\r\n                    background: var(--mainbgcolor);\r\n                    border: var(--boxborder);\r\n                    border-radius: var(--btnrad);\r\n                    box-sizing: border-box;\r\n                    position: relative;\r\n                    text-transform: uppercase;\r\n                    background: var(--mainbgcolor);\r\n                    line-height: 1;\r\n                    font-size: 80%;\r\n                    color: var(--bodycolor);]\r\n                      [div=position: absolute;\r\n                      top: 50%;\r\n                      left: 50%;\r\n                      transform: translate(-50%,-50%);][fa]",
          {
            "type": "select",
            "description": "Favorited? (fal No, fas Yes)",
            "marker": {
              "type": "select",
              "description": "Favorited? (fal No, fas Yes)",
              "options": [
                "fal",
                "fas"
              ],
              "original": "&Favorited? (fal No, fas Yes) \\ select \\ fal \\ fas&",
              "indices": [
                48118,
                48168
              ]
            }
          },
          " fa-heart[/fa][/div]\r\n                    [/div]\r\n                    [div=flex: 0 3rem;\r\n                    width: 3rem;\r\n                    aspect-ratio: 1;\r\n                    backdrop-filter: var(--bdf);\r\n                    -webkit-backdrop-filter: var(--bdf);\r\n                    background: var(--mainbgcolor);\r\n                    border: var(--boxborder);\r\n                    border-radius: var(--btnrad);\r\n                    box-sizing: border-box;\r\n                    position: relative;\r\n                    text-transform: uppercase;\r\n                    background: var(--mainbgcolor);\r\n                    line-height: 1;\r\n                    font-size: 80%;\r\n                    color: var(--txtcolor);]\r\n                      [div=position: absolute;\r\n                      top: 50%;\r\n                      left: 50%;\r\n                      transform: translate(-50%,-50%);][fa]fal fa-comment-alt[/fa][/div]\r\n                    [/div]\r\n                  [/div]\r\n                [/div]\r\n                [div=flex: 4 250px;\r\n                position: relative;]\r\n                  [div=display: block; /* last sent message */\r\n                  position: relative;\r\n                  z-index: 1;\r\n                  box-sizing: border-box;                  \r\n                  background: var(--color3);\r\n                  border: var(--boxborder);\r\n                  border-radius: var(--btnrad);\r\n                  font-size: 85%;\r\n                  font-family: var(--accentfont);\r\n                  padding: var(--itempadding);\r\n                  width: calc(80% - 1.75rem);\r\n                  margin: 0px 1.75rem 0px 20%;\r\n                  color: var(--txtcolor);]\r\n                    ",
          {
            "type": "content",
            "description": "Last Sent Message",
            "marker": {
              "type": "content",
              "description": "Last Sent Message",
              "original": "&Last Sent Message \\ content&",
              "indices": [
                49883,
                49911
              ]
            }
          },
          "     \r\n                  [/div]\r\n                  [div=display: block; /* relationship description */\r\n                  position: relative;\r\n                  top: -1rem;\r\n                  z-index: 0;\r\n                  box-sizing: border-box;                  \r\n                  background: var(--mainbgcolor);\r\n                  border: var(--boxborder);\r\n                  border-radius: var(--mainrad);\r\n                  color: var(--txtcolor);\r\n                  backdrop-filter: var(--bdf);\r\n                  -webkit-backdrop-filter: var(--bdf);\r\n                  padding: var(--titlepadding);\r\n                  padding-right: 1.25rem;\r\n                  padding-top: 1.25rem;\r\n                  line-height: 1.25;\r\n                  font-size: 93%;\r\n                  text-align: justify;\r\n                  font-famiy: var(--txtfont);]\r\n                    ",
          {
            "type": "content",
            "description": "Relationship Description",
            "marker": {
              "type": "content",
              "description": "Relationship Description",
              "original": "&Relationship Description \\ content&",
              "indices": [
                50785,
                50820
              ]
            }
          },
          "\r\n                  [/div]\r\n                [/div]\r\n              [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "",
          "original": "&\\ end&",
          "indices": [
            50893,
            50899
          ]
        }
      },
      "\r\n              [comment]insert relationship copypaste BEFORE this comment tag[/comment]\r\n            [/div]\r\n          [/div]\r\n        [/div]\r\n      [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        51056,
        51060
      ]
    }
  },
  "\r\n    [/div]\r\n    [div=display: flex; /* nav area div */\r\n    flex-flow: row nowrap;\r\n    justify-content: center;\r\n    align-items: flex-end;\r\n    box-sizing: border-box;\r\n    width: clamp(250px,calc(100% - 3rem),1000px);\r\n    padding: 0px 8%;\r\n    gap: .65rem;\r\n    position: absolute;\r\n    bottom: 1.5rem;\r\n    font-size: 80%;\r\n    font-family: var(--accentfont);\r\n    left: 50%;\r\n    transform: translate(-50%);]\r\n    [div=flex: 1 0px;]\r\n      [comment]this is a spacer[/comment]\r\n    [/div]\r\n    [div=flex: 0 auto;\r\n    font-size: 0px;\r\n    transform: rotate(180deg);\r\n    position: relative;\r\n    visibility: hidden;]\r\n        [accordion=100%]\r\n          {slide=[div=background: var(--mainbgcolor); /* subtitle div */\r\n            border: var(--boxborder);\r\n            border-radius: var(--btnrad);\r\n            box-sizing: border-box;\r\n            position: relative;\r\n            text-transform: uppercase;\r\n            background: var(--mainbgcolor);\r\n            padding: var(--itempadding);\r\n            line-height: 1;\r\n            color: var(--txtcolor);\r\n            text-align: center;\r\n            font-size: 85%;\r\n            font-weight: normal;\r\n            font-variant: normal;\r\n            margin-bottom: -.5rem;\r\n            transform: rotate(180deg);\r\n            backdrop-filter: var(--bdf);\r\n            -webkit-backdrop-filter: var(--bdf);\r\n            visibility: visible;]",
  {
    "type": "text",
    "description": "Nav Bar Text",
    "marker": {
      "type": "text",
      "description": "Nav Bar Text",
      "defaultValue": "",
      "original": "&Nav Bar Text \\ text&",
      "indices": [
        52463,
        52483
      ]
    }
  },
  "[/div]|open}\r\n            [div=display: flex; /* nav btn */\r\n            flex-flow: row wrap;\r\n            align-items: center;\r\n            gap: 0px 2px;\r\n            justify-content: space-evenly;\r\n            width: 100%;\r\n            visibility: visible;\r\n            transform: rotate(180deg);\r\n            font-size: initial;]\r\n              [goto=tabONE][div=flex: 0 3rem;\r\n              width: 3rem;\r\n              aspect-ratio: 1;\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--btnrad);\r\n              box-sizing: border-box;\r\n              position: relative;\r\n              text-transform: uppercase;\r\n              background: var(--mainbgcolor);\r\n              line-height: 1;\r\n              font-size: 80%;\r\n              color: var(--txtcolor);]\r\n                [div=position: absolute;\r\n                top: 50%;\r\n                left: 50%;\r\n                transform: translate(-50%,-50%);][fa]fal fa-camera-polaroid[/fa][/div]\r\n              [/div][/goto]\r\n              [goto=tabTWO][div=flex: 0 3rem;\r\n              width: 3rem;\r\n              aspect-ratio: 1;\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--btnrad);\r\n              box-sizing: border-box;\r\n              position: relative;\r\n              text-transform: uppercase;\r\n              background: var(--mainbgcolor);\r\n              line-height: 1;\r\n              font-size: 80%;\r\n              color: var(--txtcolor);]\r\n                [div=position: absolute;\r\n                top: 50%;\r\n                left: 50%;\r\n                transform: translate(-50%,-50%);][fa]fal fa-user[/fa][/div]\r\n              [/div][/goto]\r\n              [goto=tabTHREE][div=flex: 0 3rem;\r\n              width: 3rem;\r\n              aspect-ratio: 1;\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--btnrad);\r\n              box-sizing: border-box;\r\n              position: relative;\r\n              text-transform: uppercase;\r\n              background: var(--mainbgcolor);\r\n              line-height: 1;\r\n              font-size: 80%;\r\n              color: var(--txtcolor);]\r\n                [div=position: absolute;\r\n                top: 50%;\r\n                left: 50%;\r\n                transform: translate(-50%,-50%);][fa]fal fa-paper-plane[/fa][/div]\r\n              [/div][/goto]\r\n              [goto=tabFOUR][div=flex: 0 3rem;\r\n              width: 3rem;\r\n              aspect-ratio: 1;\r\n              backdrop-filter: var(--bdf);\r\n              -webkit-backdrop-filter: var(--bdf);\r\n              background: var(--mainbgcolor);\r\n              border: var(--boxborder);\r\n              border-radius: var(--btnrad);\r\n              box-sizing: border-box;\r\n              position: relative;\r\n              text-transform: uppercase;\r\n              background: var(--mainbgcolor);\r\n              line-height: 1;\r\n              font-size: 80%;\r\n              color: var(--txtcolor);]\r\n                [div=position: absolute;\r\n                top: 50%;\r\n                left: 50%;\r\n                transform: translate(-50%,-50%);][fa]fal fa-envelope[/fa][/div]\r\n              [/div][/goto]\r\n            [/div]\r\n          {/slide}\r\n        [/accordion]\r\n    [/div]\r\n    [/div]\r\n  [/div]\r\n[/nobr]"
]

[]

tangerine.template 1.2

By glucoseguardian

Background and Accent Colors

Hexcode of Leftmost Color

Hexcode of Main Accent and Middle Color

Hexcode of Rightmost Color

Window Background Color (use RGBA for transparency)

Text Colors

Hexcode of Subtitle Text and Border Color

Hexcode of Body Text Color

Main Tab Images

First Tab Main Image URL

Second Tab Main Image URL

Third Tab Main Image and User Icon URL

Fourth Tab Main Image URL

Optional Image Filter (write 'none' if inapplicable)

Tab One

Music Window

Song Title

Song Artist

Song Url

Navigation Window

Username

Tab One Title

Tab Two Title

Tab Three Title

Tab Four Title

Basic Information

Full Name

Pronouns

Age in Text

Age in Digits

Minimum: 16 Maximum: 18

Tab Two

Image Gallery Window

Image

Image URL

Information Window

Name

Details

Detail

Detail Description

Tab Three

Sidebar

Full Name

Username

Sidebar Text (Keep Brief)

Pinned Text Post

Username

Pinned Text Post Content

Text Post

Username

Text Post Content

Tab Four

Decorative Elements

Background Text (Linebreak With BR BBCode)

Quote Box

Misc Box

Box Name

Box Content

Stat Bar Window

Window Name

Stat Bar

Stat Bar Name

Stat Bar Value

Maximum: 100

Text Box Content

Tab Five

Contact

Image URL

Contact Name

Contact Username

Favorited? (fal No, fas Yes)

fal

fas

Last Sent Message

Relationship Description

Nav Bar Text

Output