diff --git a/ftd/t/js/01-basic-module.html b/ftd/t/js/01-basic-module.html
index c2f051f5af..9501b33469 100644
--- a/ftd/t/js/01-basic-module.html
+++ b/ftd/t/js/01-basic-module.html
@@ -16,20 +16,20 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><a data-id="3" href="https://fastn.com/" class="__c-3 __rl-9">fastn</a><div data-id="4" class="__c-10 __bgc-11">Hello</div><div data-id="5" class="__bgc-12">Hello</div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><a data-id="3" href="https://fastn.com/" class="__c-3 __rl-10">fastn</a><div data-id="4" class="__c-11 __bgc-12">Hello</div><div data-id="5" class="__bgc-13">Hello</div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__c-3 { color: red !important; }
-	.__rl-9 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
-	body.mobile .__rl-9 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
-	.__c-10 { color: #584b42 !important; }
-	body.dark .__c-10 { color: #a8a29e !important; }
-	.__c-10:visited { color: #584b42 !important; }
-	body.dark  .__c-10:visited { color: #a8a29e !important; }
-	.__bgc-11 { background-color: #f3f3f3; }
-	body.dark .__bgc-11 { background-color: #141414; }
-	.__bgc-12 { background-color: yellow; }
-	body.dark .__bgc-12 { background-color: green; }
+	.__rl-10 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
+	body.mobile .__rl-10 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
+	.__c-11 { color: #584b42 !important; }
+	body.dark .__c-11 { color: #a8a29e !important; }
+	.__c-11:visited { color: #584b42 !important; }
+	body.dark  .__c-11:visited { color: #a8a29e !important; }
+	.__bgc-12 { background-color: #f3f3f3; }
+	body.dark .__bgc-12 { background-color: #141414; }
+	.__bgc-13 { background-color: yellow; }
+	body.dark .__bgc-13 { background-color: green; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/02-property.html b/ftd/t/js/02-property.html
index 15b1ea99b8..a36721c3a9 100644
--- a/ftd/t/js/02-property.html
+++ b/ftd/t/js/02-property.html
@@ -16,14 +16,16 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__w-3">Hello</div><div data-id="4" class="__w-4">Hello 30</div><div data-id="5" class="__w-3">Hello 20</div><div data-id="6" class="__w-1">fill-container</div><div data-id="7" class="__cur-5 __w-6 __bgc-7">Click me</div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__w-3">Hello</div><div data-id="4" class="__w-4">Hello 30</div><div data-id="5" class="__w-5">Hello 20</div><div data-id="6" class="__w-6">fill-container</div><div data-id="7" class="__cur-7 __w-8 __bgc-9">Click me</div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__w-3 { width: 20px; }
 	.__w-4 { width: 30px; }
-	.__cur-5 { cursor: pointer; }
-	.__w-6 { width: 40%; }
-	.__bgc-7 { background-color: yellow; }
+	.__w-5 { width: 20px; }
+	.__w-6 { width: 100%; }
+	.__cur-7 { cursor: pointer; }
+	.__w-8 { width: 40%; }
+	.__bgc-9 { background-color: yellow; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/03-common-properties.html b/ftd/t/js/03-common-properties.html
index 60ce70c3ec..960545d287 100644
--- a/ftd/t/js/03-common-properties.html
+++ b/ftd/t/js/03-common-properties.html
@@ -16,49 +16,49 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __bgc-3"><div data-id="4" class="__p-4">px Padding</div><div data-id="5" class="__w-1 __p-5">percent Padding</div><div data-id="6" class="__w-1 __p-6">rem Padding</div><div data-id="7" class="__w-1 __p-7">vh Padding</div><div data-id="8" class="__w-1 __p-8">vw Padding</div><div data-id="9" class="__w-1 __p-9">vmin Padding</div><div data-id="10" class="__w-1 __p-10">vmax Padding</div><div data-id="11" class="__w-1 __p-11">calc Padding</div><div data-id="12" class="__h-2">Fill-container height</div><div data-id="13" class="__h-12">Hug Content Height</div><div data-id="14" class="__h-13">px Height</div><div data-id="15" class="__w-1 __h-14">percent Height</div><div data-id="16" class="__w-1 __h-15">rem Height</div><div data-id="17" class="__w-1 __h-16">vh Height</div><div data-id="18" class="__w-1 __h-17">vw Height</div><div data-id="19" class="__w-1 __h-18">vmin Height</div><div data-id="20" class="__w-1 __h-19">vmax Height</div><div data-id="21" class="__w-1 __h-20">calc Height</div><div data-id="22">Id Test</div><div data-id="23" class="__m-21 __bw-22 __bs-23">Solid Border</div><div data-id="24" class="__m-24 __bw-22 __bls-25">Double Border</div><div data-id="25" class="__m-24 __bw-22 __brs-26">Dashed Border</div><div data-id="26" class="__m-24 __bw-22 __bts-27">Dotted Border</div><div data-id="27" class="__m-24 __bw-22 __bbs-28">Groove Border</div><div data-id="28" class="__m-24 __bw-22 __bs-29">Ridge Border</div><div data-id="29" class="__m-21 __blw-30 __bs-23">Left Border Width</div><div data-id="30" class="__m-21 __brw-31 __bs-23">Right Border Width</div><div data-id="31" class="__m-21 __btw-32 __bs-23">Top Border Width</div><div data-id="32" class="__m-21 __bbw-33 __bs-23">Bottom Border Width</div><div data-id="33" class="__m-24 __bw-22 __br-34 __bs-35">Border Radius</div><div data-id="34" class="__m-21 __bw-22 __btlr-36 __bs-35">Top Left Border Radius</div><div data-id="35" class="__m-21 __bw-22 __btrr-37 __bs-35">Top Right Border Radius</div><div data-id="36" class="__m-21 __bw-22 __bblr-38 __bs-35">Bottom Left Border Radius</div><div data-id="37" class="__m-21 __bw-22 __bbrr-39 __bs-35">Bottom Right Border Radius</div><div data-id="38" class="__m-21 __bw-22 __bs-35 __bc-40">Border Color</div><div data-id="39" class="__m-21 __bw-22 __bs-35 __blc-41">Border Left Color</div><div data-id="40" class="__m-21 __bw-22 __bs-35 __brc-42">Border Right Color</div><div data-id="41" class="__m-21 __bw-22 __bs-35 __btc-43">Border Top Color</div><div data-id="42" class="__m-21 __bw-22 __bs-35 __bbc-44">Border Bottom Color</div><div data-id="43" class="__cur-45 __c-46">Red Color</div><div data-id="44" class="__rl-47">Role</div><div data-id="45" class="__pl-48 __pr-49 __bw-50 __bs-23">Padding Horizontal</div><div data-id="46" class="__pt-51 __pb-52 __bw-50 __bs-23">Padding Vertical</div><div data-id="47" class="__pl-48 __bw-50 __bs-23">Padding Left</div><div data-id="48" class="__pr-49 __bw-50 __bs-23">Padding Right</div><div data-id="49" class="__pt-51 __bw-50 __bs-23">Padding Top</div><div data-id="50" class="__pb-52 __bw-50 __bs-23">Padding Bottom</div><div data-id="51" class="__ml-53 __mr-54 __bw-50 __bs-23">Margin Horizontal</div><div data-id="52" class="__mt-55 __mb-56 __bw-50 __bs-23">Margin Vertical</div><div data-id="53" class="__ml-53 __bw-50 __bs-23">Margin Left</div><div data-id="54" class="__mr-54 __bw-50 __bs-23">Margin Right</div><div data-id="55" class="__mt-55 __bw-50 __bs-23">Margin Top</div><div data-id="56" class="__mb-56 __bw-50 __bs-23">Margin Bottom</div></div><div data-id="57" class="ft_column __w-1 __h-57"><div data-id="58" class="__w-58 __p-59 __bw-50 __bc-40 __t-60 __l-61 __z-62 __bgc-63">z-index = 3</div><div data-id="59" class="__w-58 __p-59 __bw-50 __bc-40 __b-64 __r-65 __z-66 __bgc-63">z-index = 2</div></div><div data-id="60" class="ft_column __w-67 __h-68 __p-4 __bw-50 __bs-23 __bc-40 __oy-69 __g-70"><div data-id="61">The blue planet below is sticky</div><div data-id="62" class="__w-71 __t-72 __l-61 __pos-73 __c-74 __bgc-63 __ta-75">Blue planet</div><div data-id="63" class="__p-4">Far out in the uncharted backwaters of the unfashionable end of the western
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __bgc-4"><div data-id="4" class="__p-5">px Padding</div><div data-id="5" class="__w-6 __p-7">percent Padding</div><div data-id="6" class="__w-8 __p-9">rem Padding</div><div data-id="7" class="__w-10 __p-11">vh Padding</div><div data-id="8" class="__w-12 __p-13">vw Padding</div><div data-id="9" class="__w-14 __p-15">vmin Padding</div><div data-id="10" class="__w-16 __p-17">vmax Padding</div><div data-id="11" class="__w-18 __p-19">calc Padding</div><div data-id="12" class="__h-20">Fill-container height</div><div data-id="13" class="__h-21">Hug Content Height</div><div data-id="14" class="__h-22">px Height</div><div data-id="15" class="__w-23 __h-24">percent Height</div><div data-id="16" class="__w-25 __h-26">rem Height</div><div data-id="17" class="__w-27 __h-28">vh Height</div><div data-id="18" class="__w-29 __h-30">vw Height</div><div data-id="19" class="__w-31 __h-32">vmin Height</div><div data-id="20" class="__w-33 __h-34">vmax Height</div><div data-id="21" class="__w-35 __h-36">calc Height</div><div data-id="22">Id Test</div><div data-id="23" class="__m-37 __bw-38 __bs-39">Solid Border</div><div data-id="24" class="__m-40 __bw-41 __bls-42">Double Border</div><div data-id="25" class="__m-43 __bw-44 __brs-45">Dashed Border</div><div data-id="26" class="__m-46 __bw-47 __bts-48">Dotted Border</div><div data-id="27" class="__m-49 __bw-50 __bbs-51">Groove Border</div><div data-id="28" class="__m-52 __bw-53 __bs-54">Ridge Border</div><div data-id="29" class="__m-55 __blw-56 __bs-57">Left Border Width</div><div data-id="30" class="__m-58 __brw-59 __bs-60">Right Border Width</div><div data-id="31" class="__m-61 __btw-62 __bs-63">Top Border Width</div><div data-id="32" class="__m-64 __bbw-65 __bs-66">Bottom Border Width</div><div data-id="33" class="__m-67 __bw-68 __br-69 __bs-70">Border Radius</div><div data-id="34" class="__m-71 __bw-72 __btlr-73 __bs-74">Top Left Border Radius</div><div data-id="35" class="__m-75 __bw-76 __btrr-77 __bs-78">Top Right Border Radius</div><div data-id="36" class="__m-79 __bw-80 __bblr-81 __bs-82">Bottom Left Border Radius</div><div data-id="37" class="__m-83 __bw-84 __bbrr-85 __bs-86">Bottom Right Border Radius</div><div data-id="38" class="__m-87 __bw-88 __bs-89 __bc-90">Border Color</div><div data-id="39" class="__m-91 __bw-92 __bs-93 __blc-94">Border Left Color</div><div data-id="40" class="__m-95 __bw-96 __bs-97 __brc-98">Border Right Color</div><div data-id="41" class="__m-99 __bw-100 __bs-101 __btc-102">Border Top Color</div><div data-id="42" class="__m-103 __bw-104 __bs-105 __bbc-106">Border Bottom Color</div><div data-id="43" class="__cur-107 __c-108">Red Color</div><div data-id="44" class="__rl-109">Role</div><div data-id="45" class="__pl-110 __pr-111 __bw-112 __bs-113">Padding Horizontal</div><div data-id="46" class="__pt-114 __pb-115 __bw-116 __bs-117">Padding Vertical</div><div data-id="47" class="__pl-118 __bw-119 __bs-120">Padding Left</div><div data-id="48" class="__pr-121 __bw-122 __bs-123">Padding Right</div><div data-id="49" class="__pt-124 __bw-125 __bs-126">Padding Top</div><div data-id="50" class="__pb-127 __bw-128 __bs-129">Padding Bottom</div><div data-id="51" class="__ml-130 __mr-131 __bw-132 __bs-133">Margin Horizontal</div><div data-id="52" class="__mt-134 __mb-135 __bw-136 __bs-137">Margin Vertical</div><div data-id="53" class="__ml-138 __bw-139 __bs-140">Margin Left</div><div data-id="54" class="__mr-141 __bw-142 __bs-143">Margin Right</div><div data-id="55" class="__mt-144 __bw-145 __bs-146">Margin Top</div><div data-id="56" class="__mb-147 __bw-148 __bs-149">Margin Bottom</div></div><div data-id="57" class="ft_column __w-150 __h-151"><div data-id="58" class="__w-152 __p-153 __bw-154 __bc-155 __t-156 __l-157 __z-158 __bgc-159">z-index = 3</div><div data-id="59" class="__w-160 __p-161 __bw-162 __bc-163 __b-164 __r-165 __z-166 __bgc-167">z-index = 2</div></div><div data-id="60" class="ft_column __w-168 __h-169 __p-170 __bw-171 __bs-172 __bc-173 __oy-174 __g-175"><div data-id="61">The blue planet below is sticky</div><div data-id="62" class="__w-176 __t-177 __l-178 __pos-179 __c-180 __bgc-181 __ta-182">Blue planet</div><div data-id="63" class="__p-183">Far out in the uncharted backwaters of the unfashionable end of the western
 spiral arm of the Galaxy lies a small unregarded blue planet.
 Orbiting this at a distance of roughly ninety-two million miles is an
 utterly insignificant little planet whose ape-descended life
 forms are so amazingly primitive that they still think fastn code written
 by humans is still a pretty neat idea of escalating knowledge throughout the
-universe.</div></div><div data-id="64" class="ft_row __w-1 __mt-76 __mb-77 __bgc-78 __jc-79"><div data-id="65" class="__w-80 __h-81 __bw-50 __bc-40 __o-82">overflow = Visible
+universe.</div></div><div data-id="64" class="ft_row __w-184 __mt-185 __mb-186 __bgc-187 __jc-188"><div data-id="65" class="__w-189 __h-190 __bw-191 __bc-192 __o-193">overflow = Visible
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="66" class="__w-80 __h-81 __bw-50 __bc-40 __o-83">overflow = Scroll
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="66" class="__w-194 __h-195 __bw-196 __bc-197 __o-198">overflow = Scroll
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="67" class="__w-80 __h-81 __bw-50 __bc-40 __o-84">overflow = Auto
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="67" class="__w-199 __h-200 __bw-201 __bc-202 __o-203">overflow = Auto
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="68" class="__w-80 __h-81 __bw-50 __bc-40 __o-85">overflow = Hidden
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="68" class="__w-204 __h-205 __bw-206 __bc-207 __o-208">overflow = Hidden
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div></div><div data-id="69" class="ft_row __w-1 __mt-76 __mb-77 __bgc-86 __jc-79"><div data-id="70" class="__w-80 __h-81 __bw-50 __bc-40 __ox-87">overflow-x = Visible
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div></div><div data-id="69" class="ft_row __w-209 __mt-210 __mb-211 __bgc-212 __jc-213"><div data-id="70" class="__w-214 __h-215 __bw-216 __bc-217 __ox-218">overflow-x = Visible
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="71" class="__w-80 __h-81 __bw-50 __bc-40 __ox-88">overflow-x = Scroll
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="71" class="__w-219 __h-220 __bw-221 __bc-222 __ox-223">overflow-x = Scroll
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="72" class="__w-80 __h-81 __bw-50 __bc-40 __ox-89">overflow-x = Auto
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="72" class="__w-224 __h-225 __bw-226 __bc-227 __ox-228">overflow-x = Auto
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="73" class="__w-80 __h-81 __bw-50 __bc-40 __ox-90">overflow-x = Hidden
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="73" class="__w-229 __h-230 __bw-231 __bc-232 __ox-233">overflow-x = Hidden
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div></div><div data-id="74" class="ft_row __w-1 __mt-76 __mb-77 __bgc-63 __jc-79"><div data-id="75" class="__w-80 __h-81 __bw-50 __bc-40 __oy-91">overflow-y = Visible
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div></div><div data-id="74" class="ft_row __w-234 __mt-235 __mb-236 __bgc-237 __jc-238"><div data-id="75" class="__w-239 __h-240 __bw-241 __bc-242 __oy-243">overflow-y = Visible
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="76" class="__w-80 __h-81 __bw-50 __bc-40 __oy-69">overflow-y = Scroll
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="76" class="__w-244 __h-245 __bw-246 __bc-247 __oy-248">overflow-y = Scroll
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="77" class="__w-80 __h-81 __bw-50 __bc-40 __oy-92">overflow-y = Auto
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="77" class="__w-249 __h-250 __bw-251 __bc-252 __oy-253">overflow-y = Auto
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="78" class="__w-80 __h-81 __bw-50 __bc-40 __oy-93">overflow-y = Hidden
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div><div data-id="78" class="__w-254 __h-255 __bw-256 __bc-257 __oy-258">overflow-y = Hidden
 
 The quick, brown fox jumps over a lazy dog.
-DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div></div><div data-id="79" class="ft_column __w-1 __pt-51 __pb-52 __g-94"><div data-id="80" class="__rl-47">Space Between</div><div data-id="81" class="ft_row __w-1 __bw-50 __bs-23 __jc-95"><div data-id="82" class="__bw-50 __bs-23">One</div><div data-id="83" class="__bw-50 __bs-23">Two</div><div data-id="84" class="__bw-50 __bs-23">Three</div></div><div data-id="85" class="__rl-47">Space Evenly</div><div data-id="86" class="ft_row __w-1 __bw-50 __bs-23 __jc-79"><div data-id="87" class="__bw-50 __bs-23">One</div><div data-id="88" class="__bw-50 __bs-23">Two</div><div data-id="89" class="__bw-50 __bs-23">Three</div></div><div data-id="90" class="__rl-47">Space Around</div><div data-id="91" class="ft_row __w-1 __bw-50 __bs-23 __jc-96"><div data-id="92" class="__bw-50 __bs-23">One</div><div data-id="93" class="__bw-50 __bs-23">Two</div><div data-id="94" class="__bw-50 __bs-23">Three</div></div></div><div data-id="95" class="ft_row __w-97 __p-98 __bw-50 __bs-23 __bc-40 __c-99 __fw-100 __g-94"><div data-id="96">One</div><div data-id="97">Two</div><div data-id="98">Three</div><div data-id="99">Four</div><div data-id="100">Five</div><div data-id="101">Six</div></div><div data-id="102" class="ft_column __w-1 __bgc-101 __op-102"><div data-id="103" class="__p-4 __c-103">Far far away, behind the word mountains, far from the countries
+DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</div></div><div data-id="79" class="ft_column __w-259 __pt-260 __pb-261 __g-262"><div data-id="80" class="__rl-263">Space Between</div><div data-id="81" class="ft_row __w-264 __bw-265 __bs-266 __jc-267"><div data-id="82" class="__bw-268 __bs-269">One</div><div data-id="83" class="__bw-270 __bs-271">Two</div><div data-id="84" class="__bw-272 __bs-273">Three</div></div><div data-id="85" class="__rl-274">Space Evenly</div><div data-id="86" class="ft_row __w-275 __bw-276 __bs-277 __jc-278"><div data-id="87" class="__bw-279 __bs-280">One</div><div data-id="88" class="__bw-281 __bs-282">Two</div><div data-id="89" class="__bw-283 __bs-284">Three</div></div><div data-id="90" class="__rl-285">Space Around</div><div data-id="91" class="ft_row __w-286 __bw-287 __bs-288 __jc-289"><div data-id="92" class="__bw-290 __bs-291">One</div><div data-id="93" class="__bw-292 __bs-293">Two</div><div data-id="94" class="__bw-294 __bs-295">Three</div></div></div><div data-id="95" class="ft_row __w-296 __p-297 __bw-298 __bs-299 __bc-300 __c-301 __fw-302 __g-303"><div data-id="96">One</div><div data-id="97">Two</div><div data-id="98">Three</div><div data-id="99">Four</div><div data-id="100">Five</div><div data-id="101">Six</div></div><div data-id="102" class="ft_column __w-304 __bgc-305 __op-306"><div data-id="103" class="__p-307 __c-308">Far far away, behind the word mountains, far from the countries
 Vokalia and Consonantia, there live the blind texts. Separated they
 in Bookmarksgrove right at the coast of the Semantics, a large language
 ocean. A small river named Duden flows by their place and supplies it
@@ -66,179 +66,557 @@
 roasted parts of sentences fly into your mouth. Even the all-powerful
 Pointing has no control about the blind texts it is an almost unorthographic
 life One day however a small line of blind text by the name of Lorem
-Ipsum decided to leave for the far World of Grammar.</div></div><div data-id="104" class="ft_column __w-1 __p-4 __m-104 __g-94"><div data-id="105" class="__p-4 __bw-22 __bs-35 __bc-40 __cur-45">This text will show pointer cursor on hover</div><div data-id="106" class="__p-4 __bw-22 __bs-35 __bc-40 __cur-105">This text will show progress cursor on hover</div><div data-id="107" class="__p-4 __bw-22 __bs-35 __bc-40 __cur-106">This text will show zoom-in cursor on hover</div><div data-id="108" class="__p-4 __bw-22 __bs-35 __bc-40 __cur-107">This text will show help cursor on hover</div><div data-id="109" class="__p-4 __bw-22 __bs-35 __bc-40 __cur-108">This text will show cross-hair cursor on hover</div></div><div data-id="110" class="ft_column __w-109 __m-110 __g-94"><div data-id="111" class="ft_row __p-98 __bw-111 __bs-23 __bc-40 __res-112 __o-84"><div data-id="112">This row is resizable both directions</div></div><div data-id="113" class="ft_row __p-98 __bw-111 __bs-23 __bc-40 __res-113 __o-84"><div data-id="114">This row is resizable only horizontally</div></div><div data-id="115" class="ft_row __p-98 __bw-111 __bs-23 __bc-40 __res-114 __o-84"><div data-id="116">This row is resizable only vertically</div></div></div><div data-id="117" class="ft_row __w-1 __jc-115 __ali-116 __g-94"><div data-id="118" class="ft_column __bw-50 __bs-23 __bc-40 __mxh-117 __mxw-118"><div data-id="119" class="__p-4">Max Height of this container is 50px.
-If you add more text than it can accommodate, then it will overflow.</div></div><div data-id="120" class="ft_column __bw-50 __bs-23 __bc-40 __mnh-119 __g-94"><div data-id="121" class="__p-4">Min Height of this container is 100px</div><div data-id="122" class="__p-4">If more text are added inside this container, the text might overflow
-if it can't be accommodated.</div></div><div data-id="123" class="ft_column __bw-50 __bs-23 __bc-40 __mxw-118"><div data-id="124" class="__p-4">Max Width of this container is 300px.
-If you add more text than it can accommodate, then it will overflow.</div></div><div data-id="125" class="ft_column __bw-50 __bs-23 __bc-40 __mnw-120"><div data-id="126" class="__p-4">Min Width of this container is 400px</div></div></div><div data-id="127" class="ft_column __g-94"><div data-id="128" class="__w-121 __p-4 __bw-50 __bs-23 __bc-40 __white-space-122">But ere she from the church-door stepped She smiled and told us why:
+Ipsum decided to leave for the far World of Grammar.</div></div><div data-id="104" class="ft_column __w-309 __p-310 __m-311 __g-312"><div data-id="105" class="__p-313 __bw-314 __bs-315 __bc-316 __cur-317">This text will show pointer cursor on hover</div><div data-id="106" class="__p-318 __bw-319 __bs-320 __bc-321 __cur-322">This text will show progress cursor on hover</div><div data-id="107" class="__p-323 __bw-324 __bs-325 __bc-326 __cur-327">This text will show zoom-in cursor on hover</div><div data-id="108" class="__p-328 __bw-329 __bs-330 __bc-331 __cur-332">This text will show help cursor on hover</div><div data-id="109" class="__p-333 __bw-334 __bs-335 __bc-336 __cur-337">This text will show cross-hair cursor on hover</div></div><div data-id="110" class="ft_column __w-338 __m-339 __g-340"><div data-id="111" class="ft_row __p-341 __bw-342 __bs-343 __bc-344 __res-345 __o-346"><div data-id="112">This row is resizable both directions</div></div><div data-id="113" class="ft_row __p-347 __bw-348 __bs-349 __bc-350 __res-351 __o-352"><div data-id="114">This row is resizable only horizontally</div></div><div data-id="115" class="ft_row __p-353 __bw-354 __bs-355 __bc-356 __res-357 __o-358"><div data-id="116">This row is resizable only vertically</div></div></div><div data-id="117" class="ft_row __w-359 __jc-360 __ali-361 __g-362"><div data-id="118" class="ft_column __bw-363 __bs-364 __bc-365 __mxh-366 __mxw-367"><div data-id="119" class="__p-368">Max Height of this container is 50px.
+If you add more text than it can accommodate, then it will overflow.</div></div><div data-id="120" class="ft_column __bw-369 __bs-370 __bc-371 __mnh-372 __g-373"><div data-id="121" class="__p-374">Min Height of this container is 100px</div><div data-id="122" class="__p-375">If more text are added inside this container, the text might overflow
+if it can't be accommodated.</div></div><div data-id="123" class="ft_column __bw-376 __bs-377 __bc-378 __mxw-379"><div data-id="124" class="__p-380">Max Width of this container is 300px.
+If you add more text than it can accommodate, then it will overflow.</div></div><div data-id="125" class="ft_column __bw-381 __bs-382 __bc-383 __mnw-384"><div data-id="126" class="__p-385">Min Width of this container is 400px</div></div></div><div data-id="127" class="ft_column __g-386"><div data-id="128" class="__w-387 __p-388 __bw-389 __bs-390 __bc-391 __white-space-392">But ere she from the church-door stepped She smiled and told us why:
 
 'It was a wicked woman's curse,' Quoth she, 'and what care I?'
-She smiled, and smiled, and passed it off Ere from the door she stept-</div><div data-id="129" class="__w-121 __p-4 __bw-50 __bs-23 __bc-40 __white-space-123">But ere she from the church-door stepped She smiled and told us why:
+She smiled, and smiled, and passed it off Ere from the door she stept-</div><div data-id="129" class="__w-393 __p-394 __bw-395 __bs-396 __bc-397 __white-space-398">But ere she from the church-door stepped She smiled and told us why:
 
 'It was a wicked woman's curse,' Quoth she, 'and what care I?'
-She smiled, and smiled, and passed it off Ere from the door she stept-</div><div data-id="130" class="__w-121 __p-4 __bw-50 __bs-23 __bc-40 __white-space-124">But ere she from the church-door stepped She smiled and told us why:
+She smiled, and smiled, and passed it off Ere from the door she stept-</div><div data-id="130" class="__w-399 __p-400 __bw-401 __bs-402 __bc-403 __white-space-404">But ere she from the church-door stepped She smiled and told us why:
 
 'It was a wicked woman's curse,' Quoth she, 'and what care I?'
-She smiled, and smiled, and passed it off Ere from the door she stept-</div><div data-id="131" class="__w-121 __p-4 __bw-50 __bs-23 __bc-40 __white-space-125">But ere she from the church-door stepped She smiled and told us why:
+She smiled, and smiled, and passed it off Ere from the door she stept-</div><div data-id="131" class="__w-405 __p-406 __bw-407 __bs-408 __bc-409 __white-space-410">But ere she from the church-door stepped She smiled and told us why:
 
 'It was a wicked woman's curse,' Quoth she, 'and what care I?'
-She smiled, and smiled, and passed it off Ere from the door she stept-</div></div><div data-id="132" class="ft_column __w-58"><div data-id="133" class="__as-126 __c-127">Start</div><div data-id="134" class="__as-128 __c-127">Center</div><div data-id="135" class="__as-129 __c-127">End</div></div><div data-id="136" class="a b c d __c-127">This is text with class</div><div data-id="137" class="ft_column __w-130 __p-59 __m-110 __bw-50 __bs-23 __bc-40"><div data-id="138" class="ft_column __w-121 __p-59 __bw-50 __bs-23 __bc-131"><div data-id="139" class="__pos-132 __t-72 __l-133 __c-134">Inside Inner Container</div></div></div><div data-id="140" class="ft_column __w-130 __p-59 __m-110 __bw-50 __bs-23 __bc-40"><div data-id="141" class="ft_column __w-121 __p-59 __bw-50 __bs-23 __bc-135"><div data-id="142" class="__pos-132 __t-72 __l-133 __c-99">Inside Outer Container</div></div></div><div data-id="143" class="ft_row __w-1 __jc-95"><div data-id="144">32</div><div data-id="145">1.123</div><div data-id="146">true</div></div><div data-id="147" class="ft_column __w-1 __bgc-136"><div data-id="148" class="__c-127 __fst-137 __fwt-138">These are stylized values</div><div data-id="149" class="__c-127 __fwt-139">1234</div><div data-id="150" class="__c-127 __td-140 __fst-137">3.142</div><div data-id="151" class="__c-127 __fwt-141">true</div></div><div data-id="152" class="ft_column __w-1 __m-142"><h1 data-id="153" class="__c-99">Hello World</h1></div><div data-id="154" class="ft_column __w-67 __m-142 __bw-50 __bs-23 __bc-40 __c-134 __jc-115 __ali-116"><div data-id="155">One</div><div data-id="156">Two</div><div data-id="157">Three</div></div><div data-id="158" class="ft_column __w-97 __h-81 __m-142 __box-shadow-143"></div></div></body><style id="styles">
+She smiled, and smiled, and passed it off Ere from the door she stept-</div></div><div data-id="132" class="ft_column __w-411"><div data-id="133" class="__as-412 __c-413">Start</div><div data-id="134" class="__as-414 __c-415">Center</div><div data-id="135" class="__as-416 __c-417">End</div></div><div data-id="136" class="a b c d __c-418">This is text with class</div><div data-id="137" class="ft_column __w-419 __p-420 __m-421 __bw-422 __bs-423 __bc-424"><div data-id="138" class="ft_column __w-425 __p-426 __bw-427 __bs-428 __bc-429"><div data-id="139" class="__pos-430 __t-431 __l-432 __c-433">Inside Inner Container</div></div></div><div data-id="140" class="ft_column __w-434 __p-435 __m-436 __bw-437 __bs-438 __bc-439"><div data-id="141" class="ft_column __w-440 __p-441 __bw-442 __bs-443 __bc-444"><div data-id="142" class="__pos-445 __t-446 __l-447 __c-448">Inside Outer Container</div></div></div><div data-id="143" class="ft_row __w-449 __jc-450"><div data-id="144">32</div><div data-id="145">1.123</div><div data-id="146">true</div></div><div data-id="147" class="ft_column __w-451 __bgc-452"><div data-id="148" class="__c-453 __fst-454 __fwt-455">These are stylized values</div><div data-id="149" class="__c-456 __fwt-457">1234</div><div data-id="150" class="__c-458 __td-459 __fst-460">3.142</div><div data-id="151" class="__c-461 __fwt-462">true</div></div><div data-id="152" class="ft_column __w-463 __m-464"><h1 data-id="153" class="__c-465">Hello World</h1></div><div data-id="154" class="ft_column __w-466 __m-467 __bw-468 __bs-469 __bc-470 __c-471 __jc-472 __ali-473"><div data-id="155">One</div><div data-id="156">Two</div><div data-id="157">Three</div></div><div data-id="158" class="ft_column __w-474 __h-475 __m-476 __box-shadow-477"></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__bgc-3 { background-color: yellow; }
-	body.dark .__bgc-3 { background-color: lightgreen; }
-	.__p-4 { padding: 10px; }
-	.__p-5 { padding: 20%; }
-	.__p-6 { padding: 1rem; }
-	.__p-7 { padding: 2vh; }
-	.__p-8 { padding: 3vw; }
-	.__p-9 { padding: 3vmin; }
-	.__p-10 { padding: 3vmax; }
-	.__p-11 { padding: calc(100% - 95%); }
-	.__h-12 { height: fit-content; }
-	.__h-13 { height: 30px; }
-	.__h-14 { height: 20%; }
-	.__h-15 { height: 1rem; }
-	.__h-16 { height: 5vh; }
-	.__h-17 { height: 10vw; }
-	.__h-18 { height: 10vmin; }
-	.__h-19 { height: 10vmax; }
-	.__h-20 { height: calc(100% - 90%); }
-	.__m-21 { margin: 11px; }
-	.__bw-22 { border-width: 4px; }
-	.__bs-23 { border-style: solid; }
-	.__m-24 { margin: 12px; }
-	.__bls-25 { border-left-style: double; }
-	.__brs-26 { border-right-style: dashed; }
-	.__bts-27 { border-top-style: dotted; }
-	.__bbs-28 { border-bottom-style: groove; }
-	.__bs-29 { border-style: ridge; }
-	.__blw-30 { border-left-width: 2px; }
-	.__brw-31 { border-right-width: 4px; }
-	.__btw-32 { border-top-width: 6px; }
-	.__bbw-33 { border-bottom-width: 8px; }
-	.__br-34 { border-radius: 15px; }
-	.__bs-35 { border-style: double; }
-	.__btlr-36 { border-top-left-radius: 15px; }
-	.__btrr-37 { border-top-right-radius: 15px; }
-	.__bblr-38 { border-bottom-left-radius: 15px; }
-	.__bbrr-39 { border-bottom-right-radius: 15px; }
-	.__bc-40 { border-color: red; }
-	body.dark .__bc-40 { border-color: yellow; }
-	.__blc-41 { border-left-color: red; }
-	body.dark .__blc-41 { border-left-color: yellow; }
-	.__brc-42 { border-right-color: red; }
-	body.dark .__brc-42 { border-right-color: yellow; }
-	.__btc-43 { border-top-color: red; }
-	body.dark .__btc-43 { border-top-color: yellow; }
-	.__bbc-44 { border-bottom-color: red; }
-	body.dark .__bbc-44 { border-bottom-color: yellow; }
-	.__cur-45 { cursor: pointer; }
-	.__c-46 { color: orange !important; }
-	body.dark .__c-46 { color: green !important; }
-	.__c-46:visited { color: orange !important; }
-	body.dark  .__c-46:visited { color: green !important; }
-	.__rl-47 {  font-family: cursive; letter-spacing: 5px; font-size: 40px; font-weight: 700; line-height: 65px; }
-	body.mobile .__rl-47 {  font-family: fantasy; letter-spacing: 3px; font-size: 20px; font-weight: 100; line-height: 35px; }
-	.__pl-48 { padding-left: 10px; }
-	.__pr-49 { padding-right: 10px; }
-	.__bw-50 { border-width: 2px; }
-	.__pt-51 { padding-top: 10px; }
-	.__pb-52 { padding-bottom: 10px; }
-	.__ml-53 { margin-left: 10px; }
-	.__mr-54 { margin-right: 10px; }
-	.__mt-55 { margin-top: 10px; }
-	.__mb-56 { margin-bottom: 10px; }
-	.__h-57 { height: 180px; }
-	.__w-58 { width: 200px; }
-	.__p-59 { padding: 20px; }
-	.__t-60 { top: 20px; }
-	.__l-61 { left: 50px; }
-	.__z-62 { z-index: 3; }
-	.__bgc-63 { background-color: deepskyblue; }
-	.__b-64 { bottom: 70px; }
-	.__r-65 { right: 60px; }
-	.__z-66 { z-index: 2; }
-	.__w-67 { width: 300px; }
-	.__h-68 { height: 200px; }
-	.__oy-69 { overflow-y: scroll; }
-	.__g-70 { gap: 50px; }
-	.__w-71 { width: 120px; }
-	.__t-72 { top: 0px; }
-	.__pos-73 { position: sticky; }
-	.__c-74 { color: black !important; }
-	.__ta-75 { text-align: center; }
-	.__mt-76 { margin-top: 50px; }
-	.__mb-77 { margin-bottom: 50px; }
-	.__bgc-78 { background-color: red; }
-	.__jc-79 { justify-content: space-evenly; }
-	.__w-80 { width: 150px; }
-	.__h-81 { height: 100px; }
-	.__o-82 { overflow: visible; }
-	.__o-83 { overflow: scroll; }
-	.__o-84 { overflow: auto; }
-	.__o-85 { overflow: hidden; }
-	.__bgc-86 { background-color: green; }
-	.__ox-87 { overflow-x: visible; }
-	.__ox-88 { overflow-x: scroll; }
-	.__ox-89 { overflow-x: auto; }
-	.__ox-90 { overflow-x: hidden; }
-	.__oy-91 { overflow-y: visible; }
-	.__oy-92 { overflow-y: auto; }
-	.__oy-93 { overflow-y: hidden; }
-	.__g-94 { gap: 10px; }
-	.__jc-95 { justify-content: space-between; }
-	.__jc-96 { justify-content: space-around; }
-	.__w-97 { width: 100px; }
-	.__p-98 { padding: 5px; }
-	.__c-99 { color: blue !important; }
-	.__fw-100 { flex-wrap: wrap; }
-	.__bgc-101 { background-color: #963770; }
-	.__op-102 { opacity: 0.6; }
-	.__c-103 { color: white !important; }
-	.__m-104 { margin: 5px; }
-	.__cur-105 { cursor: progress; }
-	.__cur-106 { cursor: zoom-in; }
-	.__cur-107 { cursor: help; }
-	.__cur-108 { cursor: crosshair; }
-	.__w-109 { width: 50%; }
-	.__m-110 { margin: 10px; }
-	.__bw-111 { border-width: 1px; }
-	.__res-112 { resize: both; }
-	.__res-113 { resize: horizontal; }
-	.__res-114 { resize: vertical; }
-	.__jc-115 { justify-content: center; }
-	.__ali-116 { align-items: center; }
-	.__mxh-117 { max-height: 50px; }
-	.__mxw-118 { max-width: 300px; }
-	.__mnh-119 { min-height: 100px; }
-	.__mnw-120 { min-width: 400px; }
-	.__w-121 { width: 400px; }
-	.__white-space-122 { white-space: normal; }
-	.__white-space-123 { white-space: nowrap; }
-	.__white-space-124 { white-space: pre; }
-	.__white-space-125 { white-space: break-spaces; }
-	.__as-126 { align-self: start; }
-	.__c-127 { color: red !important; }
-	body.dark .__c-127 { color: yellow !important; }
-	.__c-127:visited { color: red !important; }
-	body.dark  .__c-127:visited { color: yellow !important; }
-	.__as-128 { align-self: center; }
-	.__as-129 { align-self: end; }
-	.__w-130 { width: 600px; }
-	.__bc-131 { border-color: green; }
-	.__pos-132 { position: absolute; }
-	.__l-133 { left: 0px; }
-	.__c-134 { color: green !important; }
-	.__bc-135 { border-color: blue; }
-	.__bgc-136 { background-color: blue:; }
-	.__fst-137 { font-style: italic; }
-	.__fwt-138 { font-weight: 400; }
-	.__fwt-139 { font-weight: 700; }
-	.__td-140 { text-decoration: underline; }
-	.__fwt-141 { font-weight: 900; }
-	.__m-142 { margin: 20px; }
-	.__box-shadow-143 { box-shadow: 10px 10px 1px 0px yellow; }
-	body.dark .__box-shadow-143 { box-shadow: 10px 10px 1px 0px red; }
+	.__w-3 { width: 100%; }
+	.__bgc-4 { background-color: yellow; }
+	body.dark .__bgc-4 { background-color: lightgreen; }
+	.__p-5 { padding: 10px; }
+	.__w-6 { width: 100%; }
+	.__p-7 { padding: 20%; }
+	.__w-8 { width: 100%; }
+	.__p-9 { padding: 1rem; }
+	.__w-10 { width: 100%; }
+	.__p-11 { padding: 2vh; }
+	.__w-12 { width: 100%; }
+	.__p-13 { padding: 3vw; }
+	.__w-14 { width: 100%; }
+	.__p-15 { padding: 3vmin; }
+	.__w-16 { width: 100%; }
+	.__p-17 { padding: 3vmax; }
+	.__w-18 { width: 100%; }
+	.__p-19 { padding: calc(100% - 95%); }
+	.__h-20 { height: 100%; }
+	.__h-21 { height: fit-content; }
+	.__h-22 { height: 30px; }
+	.__w-23 { width: 100%; }
+	.__h-24 { height: 20%; }
+	.__w-25 { width: 100%; }
+	.__h-26 { height: 1rem; }
+	.__w-27 { width: 100%; }
+	.__h-28 { height: 5vh; }
+	.__w-29 { width: 100%; }
+	.__h-30 { height: 10vw; }
+	.__w-31 { width: 100%; }
+	.__h-32 { height: 10vmin; }
+	.__w-33 { width: 100%; }
+	.__h-34 { height: 10vmax; }
+	.__w-35 { width: 100%; }
+	.__h-36 { height: calc(100% - 90%); }
+	.__m-37 { margin: 11px; }
+	.__bw-38 { border-width: 4px; }
+	.__bs-39 { border-style: solid; }
+	.__m-40 { margin: 12px; }
+	.__bw-41 { border-width: 4px; }
+	.__bls-42 { border-left-style: double; }
+	.__m-43 { margin: 12px; }
+	.__bw-44 { border-width: 4px; }
+	.__brs-45 { border-right-style: dashed; }
+	.__m-46 { margin: 12px; }
+	.__bw-47 { border-width: 4px; }
+	.__bts-48 { border-top-style: dotted; }
+	.__m-49 { margin: 12px; }
+	.__bw-50 { border-width: 4px; }
+	.__bbs-51 { border-bottom-style: groove; }
+	.__m-52 { margin: 12px; }
+	.__bw-53 { border-width: 4px; }
+	.__bs-54 { border-style: ridge; }
+	.__m-55 { margin: 11px; }
+	.__blw-56 { border-left-width: 2px; }
+	.__bs-57 { border-style: solid; }
+	.__m-58 { margin: 11px; }
+	.__brw-59 { border-right-width: 4px; }
+	.__bs-60 { border-style: solid; }
+	.__m-61 { margin: 11px; }
+	.__btw-62 { border-top-width: 6px; }
+	.__bs-63 { border-style: solid; }
+	.__m-64 { margin: 11px; }
+	.__bbw-65 { border-bottom-width: 8px; }
+	.__bs-66 { border-style: solid; }
+	.__m-67 { margin: 12px; }
+	.__bw-68 { border-width: 4px; }
+	.__br-69 { border-radius: 15px; }
+	.__bs-70 { border-style: double; }
+	.__m-71 { margin: 11px; }
+	.__bw-72 { border-width: 4px; }
+	.__btlr-73 { border-top-left-radius: 15px; }
+	.__bs-74 { border-style: double; }
+	.__m-75 { margin: 11px; }
+	.__bw-76 { border-width: 4px; }
+	.__btrr-77 { border-top-right-radius: 15px; }
+	.__bs-78 { border-style: double; }
+	.__m-79 { margin: 11px; }
+	.__bw-80 { border-width: 4px; }
+	.__bblr-81 { border-bottom-left-radius: 15px; }
+	.__bs-82 { border-style: double; }
+	.__m-83 { margin: 11px; }
+	.__bw-84 { border-width: 4px; }
+	.__bbrr-85 { border-bottom-right-radius: 15px; }
+	.__bs-86 { border-style: double; }
+	.__m-87 { margin: 11px; }
+	.__bw-88 { border-width: 4px; }
+	.__bs-89 { border-style: double; }
+	.__bc-90 { border-color: red; }
+	body.dark .__bc-90 { border-color: yellow; }
+	.__m-91 { margin: 11px; }
+	.__bw-92 { border-width: 4px; }
+	.__bs-93 { border-style: double; }
+	.__blc-94 { border-left-color: red; }
+	body.dark .__blc-94 { border-left-color: yellow; }
+	.__m-95 { margin: 11px; }
+	.__bw-96 { border-width: 4px; }
+	.__bs-97 { border-style: double; }
+	.__brc-98 { border-right-color: red; }
+	body.dark .__brc-98 { border-right-color: yellow; }
+	.__m-99 { margin: 11px; }
+	.__bw-100 { border-width: 4px; }
+	.__bs-101 { border-style: double; }
+	.__btc-102 { border-top-color: red; }
+	body.dark .__btc-102 { border-top-color: yellow; }
+	.__m-103 { margin: 11px; }
+	.__bw-104 { border-width: 4px; }
+	.__bs-105 { border-style: double; }
+	.__bbc-106 { border-bottom-color: red; }
+	body.dark .__bbc-106 { border-bottom-color: yellow; }
+	.__cur-107 { cursor: pointer; }
+	.__c-108 { color: orange !important; }
+	body.dark .__c-108 { color: green !important; }
+	.__c-108:visited { color: orange !important; }
+	body.dark  .__c-108:visited { color: green !important; }
+	.__rl-109 {  font-family: cursive; letter-spacing: 5px; font-size: 40px; font-weight: 700; line-height: 65px; }
+	body.mobile .__rl-109 {  font-family: fantasy; letter-spacing: 3px; font-size: 20px; font-weight: 100; line-height: 35px; }
+	.__pl-110 { padding-left: 10px; }
+	.__pr-111 { padding-right: 10px; }
+	.__bw-112 { border-width: 2px; }
+	.__bs-113 { border-style: solid; }
+	.__pt-114 { padding-top: 10px; }
+	.__pb-115 { padding-bottom: 10px; }
+	.__bw-116 { border-width: 2px; }
+	.__bs-117 { border-style: solid; }
+	.__pl-118 { padding-left: 10px; }
+	.__bw-119 { border-width: 2px; }
+	.__bs-120 { border-style: solid; }
+	.__pr-121 { padding-right: 10px; }
+	.__bw-122 { border-width: 2px; }
+	.__bs-123 { border-style: solid; }
+	.__pt-124 { padding-top: 10px; }
+	.__bw-125 { border-width: 2px; }
+	.__bs-126 { border-style: solid; }
+	.__pb-127 { padding-bottom: 10px; }
+	.__bw-128 { border-width: 2px; }
+	.__bs-129 { border-style: solid; }
+	.__ml-130 { margin-left: 10px; }
+	.__mr-131 { margin-right: 10px; }
+	.__bw-132 { border-width: 2px; }
+	.__bs-133 { border-style: solid; }
+	.__mt-134 { margin-top: 10px; }
+	.__mb-135 { margin-bottom: 10px; }
+	.__bw-136 { border-width: 2px; }
+	.__bs-137 { border-style: solid; }
+	.__ml-138 { margin-left: 10px; }
+	.__bw-139 { border-width: 2px; }
+	.__bs-140 { border-style: solid; }
+	.__mr-141 { margin-right: 10px; }
+	.__bw-142 { border-width: 2px; }
+	.__bs-143 { border-style: solid; }
+	.__mt-144 { margin-top: 10px; }
+	.__bw-145 { border-width: 2px; }
+	.__bs-146 { border-style: solid; }
+	.__mb-147 { margin-bottom: 10px; }
+	.__bw-148 { border-width: 2px; }
+	.__bs-149 { border-style: solid; }
+	.__w-150 { width: 100%; }
+	.__h-151 { height: 180px; }
+	.__w-152 { width: 200px; }
+	.__p-153 { padding: 20px; }
+	.__bw-154 { border-width: 2px; }
+	.__bc-155 { border-color: red; }
+	body.dark .__bc-155 { border-color: blue; }
+	.__t-156 { top: 20px; }
+	.__l-157 { left: 50px; }
+	.__z-158 { z-index: 3; }
+	.__bgc-159 { background-color: deepskyblue; }
+	.__w-160 { width: 200px; }
+	.__p-161 { padding: 20px; }
+	.__bw-162 { border-width: 2px; }
+	.__bc-163 { border-color: red; }
+	body.dark .__bc-163 { border-color: blue; }
+	.__b-164 { bottom: 70px; }
+	.__r-165 { right: 60px; }
+	.__z-166 { z-index: 2; }
+	.__bgc-167 { background-color: deepskyblue; }
+	.__w-168 { width: 300px; }
+	.__h-169 { height: 200px; }
+	.__p-170 { padding: 10px; }
+	.__bw-171 { border-width: 2px; }
+	.__bs-172 { border-style: solid; }
+	.__bc-173 { border-color: red; }
+	body.dark .__bc-173 { border-color: yellow; }
+	.__oy-174 { overflow-y: scroll; }
+	.__g-175 { gap: 50px; }
+	.__w-176 { width: 120px; }
+	.__t-177 { top: 0px; }
+	.__l-178 { left: 50px; }
+	.__pos-179 { position: sticky; }
+	.__c-180 { color: black !important; }
+	.__bgc-181 { background-color: deepskyblue; }
+	.__ta-182 { text-align: center; }
+	.__p-183 { padding: 10px; }
+	.__w-184 { width: 100%; }
+	.__mt-185 { margin-top: 50px; }
+	.__mb-186 { margin-bottom: 50px; }
+	.__bgc-187 { background-color: red; }
+	.__jc-188 { justify-content: space-evenly; }
+	.__w-189 { width: 150px; }
+	.__h-190 { height: 100px; }
+	.__bw-191 { border-width: 2px; }
+	.__bc-192 { border-color: red; }
+	body.dark .__bc-192 { border-color: yellow; }
+	.__o-193 { overflow: visible; }
+	.__w-194 { width: 150px; }
+	.__h-195 { height: 100px; }
+	.__bw-196 { border-width: 2px; }
+	.__bc-197 { border-color: red; }
+	body.dark .__bc-197 { border-color: yellow; }
+	.__o-198 { overflow: scroll; }
+	.__w-199 { width: 150px; }
+	.__h-200 { height: 100px; }
+	.__bw-201 { border-width: 2px; }
+	.__bc-202 { border-color: red; }
+	body.dark .__bc-202 { border-color: yellow; }
+	.__o-203 { overflow: auto; }
+	.__w-204 { width: 150px; }
+	.__h-205 { height: 100px; }
+	.__bw-206 { border-width: 2px; }
+	.__bc-207 { border-color: red; }
+	body.dark .__bc-207 { border-color: yellow; }
+	.__o-208 { overflow: hidden; }
+	.__w-209 { width: 100%; }
+	.__mt-210 { margin-top: 50px; }
+	.__mb-211 { margin-bottom: 50px; }
+	.__bgc-212 { background-color: green; }
+	.__jc-213 { justify-content: space-evenly; }
+	.__w-214 { width: 150px; }
+	.__h-215 { height: 100px; }
+	.__bw-216 { border-width: 2px; }
+	.__bc-217 { border-color: red; }
+	body.dark .__bc-217 { border-color: yellow; }
+	.__ox-218 { overflow-x: visible; }
+	.__w-219 { width: 150px; }
+	.__h-220 { height: 100px; }
+	.__bw-221 { border-width: 2px; }
+	.__bc-222 { border-color: red; }
+	body.dark .__bc-222 { border-color: yellow; }
+	.__ox-223 { overflow-x: scroll; }
+	.__w-224 { width: 150px; }
+	.__h-225 { height: 100px; }
+	.__bw-226 { border-width: 2px; }
+	.__bc-227 { border-color: red; }
+	body.dark .__bc-227 { border-color: yellow; }
+	.__ox-228 { overflow-x: auto; }
+	.__w-229 { width: 150px; }
+	.__h-230 { height: 100px; }
+	.__bw-231 { border-width: 2px; }
+	.__bc-232 { border-color: red; }
+	body.dark .__bc-232 { border-color: yellow; }
+	.__ox-233 { overflow-x: hidden; }
+	.__w-234 { width: 100%; }
+	.__mt-235 { margin-top: 50px; }
+	.__mb-236 { margin-bottom: 50px; }
+	.__bgc-237 { background-color: deepskyblue; }
+	.__jc-238 { justify-content: space-evenly; }
+	.__w-239 { width: 150px; }
+	.__h-240 { height: 100px; }
+	.__bw-241 { border-width: 2px; }
+	.__bc-242 { border-color: red; }
+	body.dark .__bc-242 { border-color: yellow; }
+	.__oy-243 { overflow-y: visible; }
+	.__w-244 { width: 150px; }
+	.__h-245 { height: 100px; }
+	.__bw-246 { border-width: 2px; }
+	.__bc-247 { border-color: red; }
+	body.dark .__bc-247 { border-color: yellow; }
+	.__oy-248 { overflow-y: scroll; }
+	.__w-249 { width: 150px; }
+	.__h-250 { height: 100px; }
+	.__bw-251 { border-width: 2px; }
+	.__bc-252 { border-color: red; }
+	body.dark .__bc-252 { border-color: yellow; }
+	.__oy-253 { overflow-y: auto; }
+	.__w-254 { width: 150px; }
+	.__h-255 { height: 100px; }
+	.__bw-256 { border-width: 2px; }
+	.__bc-257 { border-color: red; }
+	body.dark .__bc-257 { border-color: yellow; }
+	.__oy-258 { overflow-y: hidden; }
+	.__w-259 { width: 100%; }
+	.__pt-260 { padding-top: 10px; }
+	.__pb-261 { padding-bottom: 10px; }
+	.__g-262 { gap: 10px; }
+	.__rl-263 {  font-family: cursive; letter-spacing: 5px; font-size: 40px; font-weight: 700; line-height: 65px; }
+	body.mobile .__rl-263 {  font-family: fantasy; letter-spacing: 3px; font-size: 20px; font-weight: 100; line-height: 35px; }
+	.__w-264 { width: 100%; }
+	.__bw-265 { border-width: 2px; }
+	.__bs-266 { border-style: solid; }
+	.__jc-267 { justify-content: space-between; }
+	.__bw-268 { border-width: 2px; }
+	.__bs-269 { border-style: solid; }
+	.__bw-270 { border-width: 2px; }
+	.__bs-271 { border-style: solid; }
+	.__bw-272 { border-width: 2px; }
+	.__bs-273 { border-style: solid; }
+	.__rl-274 {  font-family: cursive; letter-spacing: 5px; font-size: 40px; font-weight: 700; line-height: 65px; }
+	body.mobile .__rl-274 {  font-family: fantasy; letter-spacing: 3px; font-size: 20px; font-weight: 100; line-height: 35px; }
+	.__w-275 { width: 100%; }
+	.__bw-276 { border-width: 2px; }
+	.__bs-277 { border-style: solid; }
+	.__jc-278 { justify-content: space-evenly; }
+	.__bw-279 { border-width: 2px; }
+	.__bs-280 { border-style: solid; }
+	.__bw-281 { border-width: 2px; }
+	.__bs-282 { border-style: solid; }
+	.__bw-283 { border-width: 2px; }
+	.__bs-284 { border-style: solid; }
+	.__rl-285 {  font-family: cursive; letter-spacing: 5px; font-size: 40px; font-weight: 700; line-height: 65px; }
+	body.mobile .__rl-285 {  font-family: fantasy; letter-spacing: 3px; font-size: 20px; font-weight: 100; line-height: 35px; }
+	.__w-286 { width: 100%; }
+	.__bw-287 { border-width: 2px; }
+	.__bs-288 { border-style: solid; }
+	.__jc-289 { justify-content: space-around; }
+	.__bw-290 { border-width: 2px; }
+	.__bs-291 { border-style: solid; }
+	.__bw-292 { border-width: 2px; }
+	.__bs-293 { border-style: solid; }
+	.__bw-294 { border-width: 2px; }
+	.__bs-295 { border-style: solid; }
+	.__w-296 { width: 100px; }
+	.__p-297 { padding: 5px; }
+	.__bw-298 { border-width: 2px; }
+	.__bs-299 { border-style: solid; }
+	.__bc-300 { border-color: red; }
+	body.dark .__bc-300 { border-color: yellow; }
+	.__c-301 { color: blue !important; }
+	.__fw-302 { flex-wrap: wrap; }
+	.__g-303 { gap: 10px; }
+	.__w-304 { width: 100%; }
+	.__bgc-305 { background-color: #963770; }
+	.__op-306 { opacity: 0.6; }
+	.__p-307 { padding: 10px; }
+	.__c-308 { color: white !important; }
+	.__w-309 { width: 100%; }
+	.__p-310 { padding: 10px; }
+	.__m-311 { margin: 5px; }
+	.__g-312 { gap: 10px; }
+	.__p-313 { padding: 10px; }
+	.__bw-314 { border-width: 4px; }
+	.__bs-315 { border-style: double; }
+	.__bc-316 { border-color: red; }
+	body.dark .__bc-316 { border-color: yellow; }
+	.__cur-317 { cursor: pointer; }
+	.__p-318 { padding: 10px; }
+	.__bw-319 { border-width: 4px; }
+	.__bs-320 { border-style: double; }
+	.__bc-321 { border-color: red; }
+	body.dark .__bc-321 { border-color: yellow; }
+	.__cur-322 { cursor: progress; }
+	.__p-323 { padding: 10px; }
+	.__bw-324 { border-width: 4px; }
+	.__bs-325 { border-style: double; }
+	.__bc-326 { border-color: red; }
+	body.dark .__bc-326 { border-color: yellow; }
+	.__cur-327 { cursor: zoom-in; }
+	.__p-328 { padding: 10px; }
+	.__bw-329 { border-width: 4px; }
+	.__bs-330 { border-style: double; }
+	.__bc-331 { border-color: red; }
+	body.dark .__bc-331 { border-color: yellow; }
+	.__cur-332 { cursor: help; }
+	.__p-333 { padding: 10px; }
+	.__bw-334 { border-width: 4px; }
+	.__bs-335 { border-style: double; }
+	.__bc-336 { border-color: red; }
+	body.dark .__bc-336 { border-color: yellow; }
+	.__cur-337 { cursor: crosshair; }
+	.__w-338 { width: 50%; }
+	.__m-339 { margin: 10px; }
+	.__g-340 { gap: 10px; }
+	.__p-341 { padding: 5px; }
+	.__bw-342 { border-width: 1px; }
+	.__bs-343 { border-style: solid; }
+	.__bc-344 { border-color: red; }
+	body.dark .__bc-344 { border-color: yellow; }
+	.__res-345 { resize: both; }
+	.__o-346 { overflow: auto; }
+	.__p-347 { padding: 5px; }
+	.__bw-348 { border-width: 1px; }
+	.__bs-349 { border-style: solid; }
+	.__bc-350 { border-color: red; }
+	body.dark .__bc-350 { border-color: yellow; }
+	.__res-351 { resize: horizontal; }
+	.__o-352 { overflow: auto; }
+	.__p-353 { padding: 5px; }
+	.__bw-354 { border-width: 1px; }
+	.__bs-355 { border-style: solid; }
+	.__bc-356 { border-color: red; }
+	body.dark .__bc-356 { border-color: yellow; }
+	.__res-357 { resize: vertical; }
+	.__o-358 { overflow: auto; }
+	.__w-359 { width: 100%; }
+	.__jc-360 { justify-content: center; }
+	.__ali-361 { align-items: center; }
+	.__g-362 { gap: 10px; }
+	.__bw-363 { border-width: 2px; }
+	.__bs-364 { border-style: solid; }
+	.__bc-365 { border-color: red; }
+	body.dark .__bc-365 { border-color: yellow; }
+	.__mxh-366 { max-height: 50px; }
+	.__mxw-367 { max-width: 300px; }
+	.__p-368 { padding: 10px; }
+	.__bw-369 { border-width: 2px; }
+	.__bs-370 { border-style: solid; }
+	.__bc-371 { border-color: red; }
+	body.dark .__bc-371 { border-color: yellow; }
+	.__mnh-372 { min-height: 100px; }
+	.__g-373 { gap: 10px; }
+	.__p-374 { padding: 10px; }
+	.__p-375 { padding: 10px; }
+	.__bw-376 { border-width: 2px; }
+	.__bs-377 { border-style: solid; }
+	.__bc-378 { border-color: red; }
+	body.dark .__bc-378 { border-color: yellow; }
+	.__mxw-379 { max-width: 300px; }
+	.__p-380 { padding: 10px; }
+	.__bw-381 { border-width: 2px; }
+	.__bs-382 { border-style: solid; }
+	.__bc-383 { border-color: red; }
+	body.dark .__bc-383 { border-color: yellow; }
+	.__mnw-384 { min-width: 400px; }
+	.__p-385 { padding: 10px; }
+	.__g-386 { gap: 10px; }
+	.__w-387 { width: 400px; }
+	.__p-388 { padding: 10px; }
+	.__bw-389 { border-width: 2px; }
+	.__bs-390 { border-style: solid; }
+	.__bc-391 { border-color: red; }
+	body.dark .__bc-391 { border-color: yellow; }
+	.__white-space-392 { white-space: normal; }
+	.__w-393 { width: 400px; }
+	.__p-394 { padding: 10px; }
+	.__bw-395 { border-width: 2px; }
+	.__bs-396 { border-style: solid; }
+	.__bc-397 { border-color: red; }
+	body.dark .__bc-397 { border-color: yellow; }
+	.__white-space-398 { white-space: nowrap; }
+	.__w-399 { width: 400px; }
+	.__p-400 { padding: 10px; }
+	.__bw-401 { border-width: 2px; }
+	.__bs-402 { border-style: solid; }
+	.__bc-403 { border-color: red; }
+	body.dark .__bc-403 { border-color: yellow; }
+	.__white-space-404 { white-space: pre; }
+	.__w-405 { width: 400px; }
+	.__p-406 { padding: 10px; }
+	.__bw-407 { border-width: 2px; }
+	.__bs-408 { border-style: solid; }
+	.__bc-409 { border-color: red; }
+	body.dark .__bc-409 { border-color: yellow; }
+	.__white-space-410 { white-space: break-spaces; }
+	.__w-411 { width: 200px; }
+	.__as-412 { align-self: start; }
+	.__c-413 { color: red !important; }
+	body.dark .__c-413 { color: yellow !important; }
+	.__c-413:visited { color: red !important; }
+	body.dark  .__c-413:visited { color: yellow !important; }
+	.__as-414 { align-self: center; }
+	.__c-415 { color: red !important; }
+	body.dark .__c-415 { color: yellow !important; }
+	.__c-415:visited { color: red !important; }
+	body.dark  .__c-415:visited { color: yellow !important; }
+	.__as-416 { align-self: end; }
+	.__c-417 { color: red !important; }
+	body.dark .__c-417 { color: yellow !important; }
+	.__c-417:visited { color: red !important; }
+	body.dark  .__c-417:visited { color: yellow !important; }
+	.__c-418 { color: red !important; }
+	.__w-419 { width: 600px; }
+	.__p-420 { padding: 20px; }
+	.__m-421 { margin: 10px; }
+	.__bw-422 { border-width: 2px; }
+	.__bs-423 { border-style: solid; }
+	.__bc-424 { border-color: red; }
+	body.dark .__bc-424 { border-color: yellow; }
+	.__w-425 { width: 400px; }
+	.__p-426 { padding: 20px; }
+	.__bw-427 { border-width: 2px; }
+	.__bs-428 { border-style: solid; }
+	.__bc-429 { border-color: green; }
+	.__pos-430 { position: absolute; }
+	.__t-431 { top: 0px; }
+	.__l-432 { left: 0px; }
+	.__c-433 { color: green !important; }
+	.__w-434 { width: 600px; }
+	.__p-435 { padding: 20px; }
+	.__m-436 { margin: 10px; }
+	.__bw-437 { border-width: 2px; }
+	.__bs-438 { border-style: solid; }
+	.__bc-439 { border-color: red; }
+	body.dark .__bc-439 { border-color: yellow; }
+	.__w-440 { width: 400px; }
+	.__p-441 { padding: 20px; }
+	.__bw-442 { border-width: 2px; }
+	.__bs-443 { border-style: solid; }
+	.__bc-444 { border-color: blue; }
+	.__pos-445 { position: absolute; }
+	.__t-446 { top: 0px; }
+	.__l-447 { left: 0px; }
+	.__c-448 { color: blue !important; }
+	.__w-449 { width: 100%; }
+	.__jc-450 { justify-content: space-between; }
+	.__w-451 { width: 100%; }
+	.__bgc-452 { background-color: blue:; }
+	.__c-453 { color: red !important; }
+	.__fst-454 { font-style: italic; }
+	.__fwt-455 { font-weight: 400; }
+	.__c-456 { color: red !important; }
+	.__fwt-457 { font-weight: 700; }
+	.__c-458 { color: red !important; }
+	.__td-459 { text-decoration: underline; }
+	.__fst-460 { font-style: italic; }
+	.__c-461 { color: red !important; }
+	.__fwt-462 { font-weight: 900; }
+	.__w-463 { width: 100%; }
+	.__m-464 { margin: 20px; }
+	.__c-465 { color: blue !important; }
+	.__w-466 { width: 300px; }
+	.__m-467 { margin: 20px; }
+	.__bw-468 { border-width: 2px; }
+	.__bs-469 { border-style: solid; }
+	.__bc-470 { border-color: red; }
+	body.dark .__bc-470 { border-color: yellow; }
+	.__c-471 { color: green !important; }
+	.__jc-472 { justify-content: center; }
+	.__ali-473 { align-items: center; }
+	.__w-474 { width: 100px; }
+	.__h-475 { height: 100px; }
+	.__m-476 { margin: 20px; }
+	.__box-shadow-477 { box-shadow: 10px 10px 1px 0px yellow; }
+	body.dark .__box-shadow-477 { box-shadow: 10px 10px 1px 0px red; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/04-variable.html b/ftd/t/js/04-variable.html
index 1bacd9226b..7336dc611f 100644
--- a/ftd/t/js/04-variable.html
+++ b/ftd/t/js/04-variable.html
@@ -16,11 +16,13 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3 __m-5">Arpita</div><div data-id="4" class="ft_column __cur-3"><div data-id="5">Foo says Hello</div><div data-id="6">Foo 2</div></div><comment data-id="7"></comment><div data-id="8" class="__cur-3">Click me to add Tom</div><comment data-id="9"></comment><div data-id="10">End</div><comment data-id="11"></comment></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3 __m-5">Arpita</div><div data-id="4" class="ft_column __cur-6"><div data-id="5">Foo says Hello</div><div data-id="6">Foo 2</div></div><comment data-id="7"></comment><div data-id="8" class="__cur-7">Click me to add Tom</div><comment data-id="9"></comment><div data-id="10">End</div><comment data-id="11"></comment></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__cur-3 { cursor: pointer; }
 	.__m-5 { margin: 9px; }
+	.__cur-6 { cursor: pointer; }
+	.__cur-7 { cursor: pointer; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/05-dynamic-dom-list.html b/ftd/t/js/05-dynamic-dom-list.html
index bdbbd4f4ca..9a3fdf7fb3 100644
--- a/ftd/t/js/05-dynamic-dom-list.html
+++ b/ftd/t/js/05-dynamic-dom-list.html
@@ -16,10 +16,11 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3">0</div><div data-id="4" class="__cur-3">Click to change value</div><div data-id="5" class="__cur-3">Click to add one</div><comment data-id="6"></comment></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3">0</div><div data-id="4" class="__cur-3">Click to change value</div><div data-id="5" class="__cur-4">Click to add one</div><comment data-id="6"></comment></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__cur-3 { cursor: pointer; }
+	.__cur-4 { cursor: pointer; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/06-dynamic-dom-list-2.html b/ftd/t/js/06-dynamic-dom-list-2.html
index 9bdd3e8e2c..dc0b07ec2a 100644
--- a/ftd/t/js/06-dynamic-dom-list-2.html
+++ b/ftd/t/js/06-dynamic-dom-list-2.html
@@ -16,10 +16,11 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3">Click to add Tom</div><div data-id="4" class="__cur-3">update $first</div><comment data-id="5"></comment><div data-id="6" class="ft_column"><div data-id="7">hello</div><div data-id="8">0</div></div><div data-id="9" class="ft_column"><div data-id="10">world</div><div data-id="11">1</div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3">Click to add Tom</div><div data-id="4" class="__cur-4">update $first</div><comment data-id="5"></comment><div data-id="6" class="ft_column"><div data-id="7">hello</div><div data-id="8">0</div></div><div data-id="9" class="ft_column"><div data-id="10">world</div><div data-id="11">1</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__cur-3 { cursor: pointer; }
+	.__cur-4 { cursor: pointer; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/08-inherited.html b/ftd/t/js/08-inherited.html
index d69164220d..3d06c2da99 100644
--- a/ftd/t/js/08-inherited.html
+++ b/ftd/t/js/08-inherited.html
@@ -16,7 +16,7 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__c-3 __bgc-4">Hello from foo</div><div data-id="4" class="__c-3 __bgc-4">ftd.text says Hello</div><div data-id="5" class="ft_column __w-1 __h-5"><div data-id="6" class="ft_column __w-1 __h-2 __bgc-6"><div data-id="7" class="__c-7">Hello</div><div data-id="8" class="__c-8 __bgc-9">Hello from foo</div></div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__c-3 __bgc-4">Hello from foo</div><div data-id="4" class="__c-5 __bgc-6">ftd.text says Hello</div><div data-id="5" class="ft_column __w-7 __h-8"><div data-id="6" class="ft_column __w-9 __h-10 __bgc-11"><div data-id="7" class="__c-12">Hello</div><div data-id="8" class="__c-13 __bgc-14">Hello from foo</div></div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__c-3 { color: #141414 !important; }
@@ -25,19 +25,28 @@
 	body.dark  .__c-3:visited { color: #ffffff !important; }
 	.__bgc-4 { background-color: #e7e7e4; }
 	body.dark .__bgc-4 { background-color: #18181b; }
-	.__h-5 { height: 200px; }
-	.__bgc-6 { background-color: #FDFAF1; }
-	body.dark .__bgc-6 { background-color: #111111; }
-	.__c-7 { color: #707070 !important; }
-	body.dark .__c-7 { color: #D9D9D9 !important; }
-	.__c-7:visited { color: #707070 !important; }
-	body.dark  .__c-7:visited { color: #D9D9D9 !important; }
-	.__c-8 { color: #333333 !important; }
-	body.dark .__c-8 { color: #FFFFFF !important; }
-	.__c-8:visited { color: #333333 !important; }
-	body.dark  .__c-8:visited { color: #FFFFFF !important; }
-	.__bgc-9 { background-color: #FFFFFF; }
-	body.dark .__bgc-9 { background-color: #000000; }
+	.__c-5 { color: #141414 !important; }
+	body.dark .__c-5 { color: #ffffff !important; }
+	.__c-5:visited { color: #141414 !important; }
+	body.dark  .__c-5:visited { color: #ffffff !important; }
+	.__bgc-6 { background-color: #e7e7e4; }
+	body.dark .__bgc-6 { background-color: #18181b; }
+	.__w-7 { width: 100%; }
+	.__h-8 { height: 200px; }
+	.__w-9 { width: 100%; }
+	.__h-10 { height: 100%; }
+	.__bgc-11 { background-color: #FDFAF1; }
+	body.dark .__bgc-11 { background-color: #111111; }
+	.__c-12 { color: #707070 !important; }
+	body.dark .__c-12 { color: #D9D9D9 !important; }
+	.__c-12:visited { color: #707070 !important; }
+	body.dark  .__c-12:visited { color: #D9D9D9 !important; }
+	.__c-13 { color: #333333 !important; }
+	body.dark .__c-13 { color: #FFFFFF !important; }
+	.__c-13:visited { color: #333333 !important; }
+	body.dark  .__c-13:visited { color: #FFFFFF !important; }
+	.__bgc-14 { background-color: #FFFFFF; }
+	body.dark .__bgc-14 { background-color: #000000; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/09-text-properties.html b/ftd/t/js/09-text-properties.html
index fbe69450d0..ec94b5e0b2 100644
--- a/ftd/t/js/09-text-properties.html
+++ b/ftd/t/js/09-text-properties.html
@@ -16,51 +16,67 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __bw-3 __bs-4 __bc-5 __c-6 __g-7"><div data-id="4" class="__tt-8">capitalize</div><div data-id="5" class="__tt-9">LOWER</div><div data-id="6" class="__tt-10">upper</div></div><div data-id="7" class="ft_row __w-1 __p-11 __mt-12 __mb-13 __bgc-14"><div data-id="8" class="__c-15 __text-indent-16">This is some indented text.
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __bw-4 __bs-5 __bc-6 __c-7 __g-8"><div data-id="4" class="__tt-9">capitalize</div><div data-id="5" class="__tt-10">LOWER</div><div data-id="6" class="__tt-11">upper</div></div><div data-id="7" class="ft_row __w-12 __p-13 __mt-14 __mb-15 __bgc-16"><div data-id="8" class="__c-17 __text-indent-18">This is some indented text.
 
-It only applies spacing at the beginning of the first line.</div></div><div data-id="9" class="ft_row __c-17 __g-7"><div data-id="10" class="__w-18 __p-19 __bw-20 __br-21 __ta-22">this is **text-align: center** text. a bit longer text so you can see what's going on.</div><div data-id="11" class="__w-18 __p-19 __bw-20 __br-21 __ta-23">this is **text-align: start** text. a bit longer text so you can see what's
-going on.</div><div data-id="12" class="__w-18 __p-19 __bw-20 __br-21 __ta-24">this is **text-align: end** text. a bit longer text so you can see what's going
-on.</div><div data-id="13" class="__w-18 __p-19 __bw-20 __br-21 __ta-25">this is **text-align: justify** text. a bit longer text so you can see what's going on.</div></div><div data-id="14" class="ft_column __w-26 __m-27"><div data-id="15" class="__bw-28 __bs-4 __wlc-29 __d-30 __o-31 __wbo-32">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+It only applies spacing at the beginning of the first line.</div></div><div data-id="9" class="ft_row __c-19 __g-20"><div data-id="10" class="__w-21 __p-22 __bw-23 __br-24 __ta-25">this is **text-align: center** text. a bit longer text so you can see what's going on.</div><div data-id="11" class="__w-26 __p-27 __bw-28 __br-29 __ta-30">this is **text-align: start** text. a bit longer text so you can see what's
+going on.</div><div data-id="12" class="__w-31 __p-32 __bw-33 __br-34 __ta-35">this is **text-align: end** text. a bit longer text so you can see what's going
+on.</div><div data-id="13" class="__w-36 __p-37 __bw-38 __br-39 __ta-40">this is **text-align: justify** text. a bit longer text so you can see what's going on.</div></div><div data-id="14" class="ft_column __w-41 __m-42"><div data-id="15" class="__bw-43 __bs-44 __wlc-45 __d-46 __o-47 __wbo-48">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
 when an unknown printer took a galley of type and scrambled it to make a
 type specimen book. It has survived not only five centuries, but also the
 leap into electronic typesetting, remaining essentially unchanged. It was
 popularised in the 1960s with the release of Letraset sheets containing
 Lorem Ipsum passages, and more recently with desktop publishing software
-like Aldus PageMaker including versions of Lorem Ipsum.</div></div><div data-id="16" class="__d-33">This has block display</div></div></body><style id="styles">
+like Aldus PageMaker including versions of Lorem Ipsum.</div></div><div data-id="16" class="__d-49">This has block display</div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__bw-3 { border-width: 2px; }
-	.__bs-4 { border-style: double; }
-	.__bc-5 { border-color: blue; }
-	.__c-6 { color: red !important; }
-	.__g-7 { gap: 10px; }
-	.__tt-8 { text-transform: capitalize; }
-	.__tt-9 { text-transform: lowercase; }
-	.__tt-10 { text-transform: uppercase; }
-	.__p-11 { padding: 10px; }
-	.__mt-12 { margin-top: 5px; }
-	.__mb-13 { margin-bottom: 5px; }
-	.__bgc-14 { background-color: black; }
-	.__c-15 { color: yellow !important; }
-	.__text-indent-16 { text-indent: 30px; }
-	.__c-17 { color: blue !important; }
-	.__w-18 { width: 30%; }
-	.__p-19 { padding: 5px; }
-	.__bw-20 { border-width: 1px; }
-	.__br-21 { border-radius: 3px; }
-	.__ta-22 { text-align: center; }
-	.__ta-23 { text-align: start; }
-	.__ta-24 { text-align: end; }
-	.__ta-25 { text-align: justify; }
-	.__w-26 { width: 50%; }
-	.__m-27 { margin: 10px; }
-	.__bw-28 { border-width: 5px; }
-	.__wlc-29 { -webkit-line-clamp: 2; }
-	.__d-30 { display: -webkit-box; }
-	.__o-31 { overflow: hidden; }
-	.__wbo-32 { -webkit-box-orient: vertical; }
-	.__d-33 { display: block; }
+	.__w-3 { width: 100%; }
+	.__bw-4 { border-width: 2px; }
+	.__bs-5 { border-style: double; }
+	.__bc-6 { border-color: blue; }
+	.__c-7 { color: red !important; }
+	.__g-8 { gap: 10px; }
+	.__tt-9 { text-transform: capitalize; }
+	.__tt-10 { text-transform: lowercase; }
+	.__tt-11 { text-transform: uppercase; }
+	.__w-12 { width: 100%; }
+	.__p-13 { padding: 10px; }
+	.__mt-14 { margin-top: 5px; }
+	.__mb-15 { margin-bottom: 5px; }
+	.__bgc-16 { background-color: black; }
+	.__c-17 { color: yellow !important; }
+	.__text-indent-18 { text-indent: 30px; }
+	.__c-19 { color: blue !important; }
+	.__g-20 { gap: 10px; }
+	.__w-21 { width: 30%; }
+	.__p-22 { padding: 5px; }
+	.__bw-23 { border-width: 1px; }
+	.__br-24 { border-radius: 3px; }
+	.__ta-25 { text-align: center; }
+	.__w-26 { width: 30%; }
+	.__p-27 { padding: 5px; }
+	.__bw-28 { border-width: 1px; }
+	.__br-29 { border-radius: 3px; }
+	.__ta-30 { text-align: start; }
+	.__w-31 { width: 30%; }
+	.__p-32 { padding: 5px; }
+	.__bw-33 { border-width: 1px; }
+	.__br-34 { border-radius: 3px; }
+	.__ta-35 { text-align: end; }
+	.__w-36 { width: 30%; }
+	.__p-37 { padding: 5px; }
+	.__bw-38 { border-width: 1px; }
+	.__br-39 { border-radius: 3px; }
+	.__ta-40 { text-align: justify; }
+	.__w-41 { width: 50%; }
+	.__m-42 { margin: 10px; }
+	.__bw-43 { border-width: 5px; }
+	.__bs-44 { border-style: double; }
+	.__wlc-45 { -webkit-line-clamp: 2; }
+	.__d-46 { display: -webkit-box; }
+	.__o-47 { overflow: hidden; }
+	.__wbo-48 { -webkit-box-orient: vertical; }
+	.__d-49 { display: block; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/10-color-test.html b/ftd/t/js/10-color-test.html
index 502d62d5ca..27fbd629a1 100644
--- a/ftd/t/js/10-color-test.html
+++ b/ftd/t/js/10-color-test.html
@@ -16,7 +16,7 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __bgc-3"><div data-id="4" class="__cur-4 __p-5 __c-6 __rl-7">Lorem ipsum dolor sit amet. Quo aliquam natus id cumque Quis quo eligendi quia
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __bgc-4"><div data-id="4" class="__cur-5 __p-6 __c-7 __rl-8">Lorem ipsum dolor sit amet. Quo aliquam natus id cumque Quis quo eligendi quia
 qui aliquid dolores. Qui atque delectus quo maxime numquam qui architecto
 delectus. Qui maxime galisum sit magni placeat sed illum sunt. Ut illo excepturi
 aut nulla molestiae et excepturi voluptas aut voluptatem obcaecati id harum quia.
@@ -33,16 +33,17 @@
 consectetur voluptatum et Quis inventore ab dignissimos amet?</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__bgc-3 { background-color: #170d03; }
-	body.dark .__bgc-3 { background-color: #edfce8; }
-	.__cur-4 { cursor: pointer; }
-	.__p-5 { padding: 40px; }
-	.__c-6 { color: orange !important; }
-	body.dark .__c-6 { color: green !important; }
-	.__c-6:visited { color: orange !important; }
-	body.dark  .__c-6:visited { color: green !important; }
-	.__rl-7 {  font-family: cursive; letter-spacing: 5px; font-size: 36px; font-weight: 700; line-height: 40px; }
-	body.mobile .__rl-7 {  font-family: fantasy; letter-spacing: 3px; font-size: 20px; font-weight: 100; line-height: 35px; }
+	.__w-3 { width: 100%; }
+	.__bgc-4 { background-color: #170d03; }
+	body.dark .__bgc-4 { background-color: #edfce8; }
+	.__cur-5 { cursor: pointer; }
+	.__p-6 { padding: 40px; }
+	.__c-7 { color: orange !important; }
+	body.dark .__c-7 { color: green !important; }
+	.__c-7:visited { color: orange !important; }
+	body.dark  .__c-7:visited { color: green !important; }
+	.__rl-8 {  font-family: cursive; letter-spacing: 5px; font-size: 36px; font-weight: 700; line-height: 40px; }
+	body.mobile .__rl-8 {  font-family: fantasy; letter-spacing: 3px; font-size: 20px; font-weight: 100; line-height: 35px; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/12-children.html b/ftd/t/js/12-children.html
index a3195c3f12..19ea316ee7 100644
--- a/ftd/t/js/12-children.html
+++ b/ftd/t/js/12-children.html
@@ -16,10 +16,11 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1"><div data-id="4">My page</div><div data-id="5" class="ft_column __c-3"><div data-id="6">Hello</div><div data-id="7">World</div></div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3"><div data-id="4">My page</div><div data-id="5" class="ft_column __c-4"><div data-id="6">Hello</div><div data-id="7">World</div></div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__c-3 { color: red !important; }
+	.__w-3 { width: 100%; }
+	.__c-4 { color: red !important; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/13-non-style-properties.html b/ftd/t/js/13-non-style-properties.html
index d4b13f12c0..2248e60cb2 100644
--- a/ftd/t/js/13-non-style-properties.html
+++ b/ftd/t/js/13-non-style-properties.html
@@ -16,15 +16,27 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __jc-3 __ali-4"><a data-id="4" href="https://www.fastn.com" class="__m-5">This is a link</a><img data-id="5" src="https://picsum.photos/200/300"></img></div><div data-id="6" class="ft_column __w-1 __jc-3 __ali-4"><a data-id="7" href="https://www.fastn.com" rel="nofollow sponsored">No follow link</a></div><div data-id="8" class="ft_column __w-1 __jc-3 __ali-4"><a data-id="9" href="https://www.fastn.com" target="_blank" class="__m-5">This is a link (will open in new tab)</a></div><div data-id="10" class="ft_column __w-1 __mt-6 __mb-7"><input data-id="11" type="checkbox" checked></input><input data-id="12" type="checkbox" disabled></input></div><div data-id="13" class="ft_column __w-1 __mt-6 __mb-7"><input data-id="14" placeholder="Enter some text"></input><textarea data-id="15" placeholder="Multiline input"></textarea><input data-id="16" type="password"></input><input data-id="17" placeholder="This would be disabled" disabled></input><input data-id="18" value="This is default text"></input><input data-id="19" placeholder="Max input length 10" maxlength="10"></input></div><iframe data-id="20" allowfullscreen loading="lazy" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"></iframe><pre data-id="21" class="language-ftd fastn-theme-dark"><code data-id="22" class="language-ftd fastn-theme-dark">-- ftd.text: Hello World
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __jc-4 __ali-5"><a data-id="4" href="https://www.fastn.com" class="__m-6">This is a link</a><img data-id="5" src="https://picsum.photos/200/300"></img></div><div data-id="6" class="ft_column __w-7 __jc-8 __ali-9"><a data-id="7" href="https://www.fastn.com" rel="nofollow sponsored">No follow link</a></div><div data-id="8" class="ft_column __w-10 __jc-11 __ali-12"><a data-id="9" href="https://www.fastn.com" target="_blank" class="__m-13">This is a link (will open in new tab)</a></div><div data-id="10" class="ft_column __w-14 __mt-15 __mb-16"><input data-id="11" type="checkbox" checked></input><input data-id="12" type="checkbox" disabled></input></div><div data-id="13" class="ft_column __w-17 __mt-18 __mb-19"><input data-id="14" placeholder="Enter some text"></input><textarea data-id="15" placeholder="Multiline input"></textarea><input data-id="16" type="password"></input><input data-id="17" placeholder="This would be disabled" disabled></input><input data-id="18" value="This is default text"></input><input data-id="19" placeholder="Max input length 10" maxlength="10"></input></div><iframe data-id="20" allowfullscreen loading="lazy" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"></iframe><pre data-id="21" class="language-ftd fastn-theme-dark"><code data-id="22" class="language-ftd fastn-theme-dark">-- ftd.text: Hello World
 </code></pre></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__jc-3 { justify-content: center; }
-	.__ali-4 { align-items: center; }
-	.__m-5 { margin: 20px; }
-	.__mt-6 { margin-top: 30px; }
-	.__mb-7 { margin-bottom: 30px; }
+	.__w-3 { width: 100%; }
+	.__jc-4 { justify-content: center; }
+	.__ali-5 { align-items: center; }
+	.__m-6 { margin: 20px; }
+	.__w-7 { width: 100%; }
+	.__jc-8 { justify-content: center; }
+	.__ali-9 { align-items: center; }
+	.__w-10 { width: 100%; }
+	.__jc-11 { justify-content: center; }
+	.__ali-12 { align-items: center; }
+	.__m-13 { margin: 20px; }
+	.__w-14 { width: 100%; }
+	.__mt-15 { margin-top: 30px; }
+	.__mb-16 { margin-bottom: 30px; }
+	.__w-17 { width: 100%; }
+	.__mt-18 { margin-top: 30px; }
+	.__mb-19 { margin-bottom: 30px; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/14-code.html b/ftd/t/js/14-code.html
index 3f1f81db83..85980e9394 100644
--- a/ftd/t/js/14-code.html
+++ b/ftd/t/js/14-code.html
@@ -82,18 +82,21 @@
 universe.
 
 -- end: ftd.column
-</code></pre></div><div data-id="8" class="ft_column"><comment data-id="9"></comment><pre data-id="10" class="language-ftd fastn-theme-light __w-1"><code data-id="11" class="language-ftd fastn-theme-light">-- ftd.text:
+</code></pre></div><div data-id="8" class="ft_column"><comment data-id="9"></comment><pre data-id="10" class="language-ftd fastn-theme-light __w-6"><code data-id="11" class="language-ftd fastn-theme-light">-- ftd.text:
 color: red
 
 Hello World
-</code></pre><comment data-id="12"></comment></div><div data-id="13" class="__cur-6">Dark Mode</div><div data-id="14" class="__cur-6">Light Mode</div><div data-id="15" class="__cur-6">System Mode</div></div></body><style id="styles">
+</code></pre><comment data-id="12"></comment></div><div data-id="13" class="__cur-7">Dark Mode</div><div data-id="14" class="__cur-8">Light Mode</div><div data-id="15" class="__cur-9">System Mode</div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__w-3 { width: fit-content; }
 	.__bgc-4 { background-color: #0d260d; }
 	.__rl-5 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
 	body.mobile .__rl-5 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
-	.__cur-6 { cursor: pointer; }
+	.__w-6 { width: 100%; }
+	.__cur-7 { cursor: pointer; }
+	.__cur-8 { cursor: pointer; }
+	.__cur-9 { cursor: pointer; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/17-clone.html b/ftd/t/js/17-clone.html
index edf3376828..52d5603ae1 100644
--- a/ftd/t/js/17-clone.html
+++ b/ftd/t/js/17-clone.html
@@ -16,12 +16,14 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __p-3 __g-4"><div data-id="4">Ritesh</div><div data-id="5">Ritesh</div><div data-id="6">Ritesh</div><div data-id="7" class="__cur-5">Change name 1</div><div data-id="8" class="__cur-5">Change name 2</div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __p-4 __g-5"><div data-id="4">Ritesh</div><div data-id="5">Ritesh</div><div data-id="6">Ritesh</div><div data-id="7" class="__cur-6">Change name 1</div><div data-id="8" class="__cur-7">Change name 2</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__p-3 { padding: 10px; }
-	.__g-4 { gap: 5px; }
-	.__cur-5 { cursor: pointer; }
+	.__w-3 { width: 100%; }
+	.__p-4 { padding: 10px; }
+	.__g-5 { gap: 5px; }
+	.__cur-6 { cursor: pointer; }
+	.__cur-7 { cursor: pointer; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/18-rive.html b/ftd/t/js/18-rive.html
index e8c41a05f4..b15ea0de47 100644
--- a/ftd/t/js/18-rive.html
+++ b/ftd/t/js/18-rive.html
@@ -16,13 +16,20 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><canvas data-id="3" class="__w-3 __bgc-4"></canvas><canvas data-id="4" class="__w-5"></canvas><div data-id="5">Start Idle</div><canvas data-id="6"></canvas><div data-id="7" class="__cur-6">Idle/ Run</div><div data-id="8" class="__cur-6">Wiper On/Off</div><div data-id="9" class="__cur-6">Rainy On/Off</div><div data-id="10" class="__cur-6">No Wiper On/Off</div><div data-id="11" class="__cur-6">Sunny On/Off</div><div data-id="12" class="__cur-6">Stationary On/Off</div><div data-id="13" class="__cur-6">Bouncing On/Off</div><div data-id="14" class="__cur-6">Broken On/Off</div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><canvas data-id="3" class="__w-3 __bgc-4"></canvas><canvas data-id="4" class="__w-5"></canvas><div data-id="5">Start Idle</div><canvas data-id="6"></canvas><div data-id="7" class="__cur-6">Idle/ Run</div><div data-id="8" class="__cur-7">Wiper On/Off</div><div data-id="9" class="__cur-8">Rainy On/Off</div><div data-id="10" class="__cur-9">No Wiper On/Off</div><div data-id="11" class="__cur-10">Sunny On/Off</div><div data-id="12" class="__cur-11">Stationary On/Off</div><div data-id="13" class="__cur-12">Bouncing On/Off</div><div data-id="14" class="__cur-13">Broken On/Off</div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__w-3 { width: 500px; }
 	.__bgc-4 { background-color: yellow; }
 	.__w-5 { width: 440px; }
 	.__cur-6 { cursor: pointer; }
+	.__cur-7 { cursor: pointer; }
+	.__cur-8 { cursor: pointer; }
+	.__cur-9 { cursor: pointer; }
+	.__cur-10 { cursor: pointer; }
+	.__cur-11 { cursor: pointer; }
+	.__cur-12 { cursor: pointer; }
+	.__cur-13 { cursor: pointer; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/20-background-properties.html b/ftd/t/js/20-background-properties.html
index 832d27206c..ff4b063bbe 100644
--- a/ftd/t/js/20-background-properties.html
+++ b/ftd/t/js/20-background-properties.html
@@ -16,26 +16,33 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __pt-3 __pb-4 __jc-5 __ali-6 __g-7"><div data-id="4" class="ft_column __as-8 __w-9 __h-10 __bgc-11"></div><div data-id="5" class="ft_column __as-8 __w-9 __h-10 __bgr-12 __bgp-13 __bgs-14 __bgi-15"></div><div data-id="6" class="ft_column __as-8 __w-9 __h-10 __bgi-16"></div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __pt-4 __pb-5 __jc-6 __ali-7 __g-8"><div data-id="4" class="ft_column __as-9 __w-10 __h-11 __bgc-12"></div><div data-id="5" class="ft_column __as-13 __w-14 __h-15 __bgr-16 __bgp-17 __bgs-18 __bgi-19"></div><div data-id="6" class="ft_column __as-20 __w-21 __h-22 __bgi-23"></div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__pt-3 { padding-top: 30px; }
-	.__pb-4 { padding-bottom: 30px; }
-	.__jc-5 { justify-content: center; }
-	.__ali-6 { align-items: center; }
-	.__g-7 { gap: 10px; }
-	.__as-8 { align-self: center; }
-	.__w-9 { width: 400px; }
-	.__h-10 { height: 200px; }
-	.__bgc-11 { background-color: red; }
-	body.dark .__bgc-11 { background-color: green; }
-	.__bgr-12 { background-repeat: no-repeat; }
-	.__bgp-13 { background-position: 0px 25px; }
-	.__bgs-14 { background-size: 150px 150px; }
-	.__bgi-15 { background-image: url(https://picsum.photos/id/236/200/300); }
-	body.dark .__bgi-15 { background-image: url(https://picsum.photos/id/237/200/300); }
-	.__bgi-16 { background-image: linear-gradient(225deg, red, 40%, yellow); }
-	body.dark .__bgi-16 { background-image: linear-gradient(225deg, orange, 40%, blue); }
+	.__w-3 { width: 100%; }
+	.__pt-4 { padding-top: 30px; }
+	.__pb-5 { padding-bottom: 30px; }
+	.__jc-6 { justify-content: center; }
+	.__ali-7 { align-items: center; }
+	.__g-8 { gap: 10px; }
+	.__as-9 { align-self: center; }
+	.__w-10 { width: 400px; }
+	.__h-11 { height: 200px; }
+	.__bgc-12 { background-color: red; }
+	body.dark .__bgc-12 { background-color: green; }
+	.__as-13 { align-self: center; }
+	.__w-14 { width: 400px; }
+	.__h-15 { height: 200px; }
+	.__bgr-16 { background-repeat: no-repeat; }
+	.__bgp-17 { background-position: 0px 25px; }
+	.__bgs-18 { background-size: 150px 150px; }
+	.__bgi-19 { background-image: url(https://picsum.photos/id/236/200/300); }
+	body.dark .__bgi-19 { background-image: url(https://picsum.photos/id/237/200/300); }
+	.__as-20 { align-self: center; }
+	.__w-21 { width: 400px; }
+	.__h-22 { height: 200px; }
+	.__bgi-23 { background-image: linear-gradient(225deg, red, 40%, yellow); }
+	body.dark .__bgi-23 { background-image: linear-gradient(225deg, orange, 40%, blue); }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/23-record-list.html b/ftd/t/js/23-record-list.html
index d9cc93ec2b..fe0c1aacb6 100644
--- a/ftd/t/js/23-record-list.html
+++ b/ftd/t/js/23-record-list.html
@@ -16,12 +16,18 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column"><comment data-id="4"></comment><div data-id="5" class="ft_row __g-3"><div data-id="6" class="__c-4">1</div><div data-id="7" class="__c-5">Ritesh</div></div><div data-id="8" class="ft_row __g-3"><div data-id="9" class="__c-4">2</div><div data-id="10" class="__c-5">Ajinosaurus</div></div></div><div data-id="11" class="ft_row __g-3"><div data-id="12" class="__c-4">1</div><div data-id="13" class="__c-5">Ritesh</div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column"><comment data-id="4"></comment><div data-id="5" class="ft_row __g-3"><div data-id="6" class="__c-4">1</div><div data-id="7" class="__c-5">Ritesh</div></div><div data-id="8" class="ft_row __g-6"><div data-id="9" class="__c-7">2</div><div data-id="10" class="__c-8">Ajinosaurus</div></div></div><div data-id="11" class="ft_row __g-9"><div data-id="12" class="__c-10">1</div><div data-id="13" class="__c-11">Ritesh</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__g-3 { gap: 5px; }
 	.__c-4 { color: green !important; }
 	.__c-5 { color: blue !important; }
+	.__g-6 { gap: 5px; }
+	.__c-7 { color: green !important; }
+	.__c-8 { color: blue !important; }
+	.__g-9 { gap: 5px; }
+	.__c-10 { color: green !important; }
+	.__c-11 { color: blue !important; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/24-device.html b/ftd/t/js/24-device.html
index be715a9d0f..199b9fd8ac 100644
--- a/ftd/t/js/24-device.html
+++ b/ftd/t/js/24-device.html
@@ -16,9 +16,10 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1"><comment data-id="4"></comment><div data-id="6">Ritesh</div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3"><comment data-id="4"></comment><div data-id="6">Ritesh</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
+	.__w-3 { width: 100%; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/29-dom-list.html b/ftd/t/js/29-dom-list.html
index 78c0ebed5a..cb683769e2 100644
--- a/ftd/t/js/29-dom-list.html
+++ b/ftd/t/js/29-dom-list.html
@@ -16,10 +16,15 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3">Click to append one</div><div data-id="4" class="__cur-3">Click to insert 3 at start</div><div data-id="5" class="__cur-3">Click to pop</div><div data-id="6" class="__cur-3">Click to delete at start</div><div data-id="7" class="__cur-3">Click to clear all</div><div data-id="8" class="__cur-3">Click to set [10, 11, 12]</div><comment data-id="9"></comment></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3">Click to append one</div><div data-id="4" class="__cur-4">Click to insert 3 at start</div><div data-id="5" class="__cur-5">Click to pop</div><div data-id="6" class="__cur-6">Click to delete at start</div><div data-id="7" class="__cur-7">Click to clear all</div><div data-id="8" class="__cur-8">Click to set [10, 11, 12]</div><comment data-id="9"></comment></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__cur-3 { cursor: pointer; }
+	.__cur-4 { cursor: pointer; }
+	.__cur-5 { cursor: pointer; }
+	.__cur-6 { cursor: pointer; }
+	.__cur-7 { cursor: pointer; }
+	.__cur-8 { cursor: pointer; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/30-web-component.html b/ftd/t/js/30-web-component.html
index 1565b5d718..f4549f7fd7 100644
--- a/ftd/t/js/30-web-component.html
+++ b/ftd/t/js/30-web-component.html
@@ -16,44 +16,61 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __p-3 __g-4"><div data-id="4" class="ft_column __w-1 __p-5 __bgc-6 __jc-7 __ali-8"><div data-id="5" class="__rl-9 __ta-10">Web Component Demo</div><div data-id="6" class="ft_row __mt-11 __mb-12 __jc-7 __ali-8 __g-14"><div data-id="7" class="__rl-15">Task:</div><input data-id="8" placeholder="Your task here..." type="url" class="__w-16 __h-17 __p-18 __bw-19 __rl-20"></input><div data-id="9" class="__cur-21 __pl-22 __pr-23 __pt-24 __pb-25 __br-26 __bgc-27">Create</div></div><comment data-id="10"></comment><div data-id="11" class="ft_row __as-28 __rl-20 __jc-7 __ali-8 __g-29"><div data-id="12">Checkout out our</div><a data-id="13" href="https://fastn.io/blog/web-components/">blog post to learn more</a></div></div><div data-id="14" class="ft_row __w-1 __g-4"><div data-id="15" class="ft_column __w-30"><todo-list-display data-id="16" args="0"></todo-list-display></div><div data-id="17" class="ft_column __w-30 __p-5 __pb-31 __bgc-6 __g-14"><div data-id="18" class="__rl-32">FTD World</div><div data-id="19" class="ft_column __w-1 __p-5 __bgc-33 __mnh-34 __g-14"><comment data-id="20"></comment></div></div></div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __p-4 __g-5"><div data-id="4" class="ft_column __w-6 __p-7 __bgc-8 __jc-9 __ali-10"><div data-id="5" class="__rl-11 __ta-12">Web Component Demo</div><div data-id="6" class="ft_row __mt-13 __mb-14 __jc-16 __ali-17 __g-18"><div data-id="7" class="__rl-19">Task:</div><input data-id="8" placeholder="Your task here..." type="url" class="__w-20 __h-21 __p-22 __bw-23 __rl-24"></input><div data-id="9" class="__cur-25 __pl-26 __pr-27 __pt-28 __pb-29 __br-30 __bgc-31">Create</div></div><comment data-id="10"></comment><div data-id="11" class="ft_row __as-32 __rl-33 __jc-34 __ali-35 __g-36"><div data-id="12">Checkout out our</div><a data-id="13" href="https://fastn.io/blog/web-components/">blog post to learn more</a></div></div><div data-id="14" class="ft_row __w-37 __g-39"><div data-id="15" class="ft_column __w-40"><todo-list-display data-id="16" args="0"></todo-list-display></div><div data-id="17" class="ft_column __w-41 __p-42 __pb-43 __bgc-44 __g-45"><div data-id="18" class="__rl-46">FTD World</div><div data-id="19" class="ft_column __w-47 __p-48 __bgc-49 __mnh-50 __g-51"><comment data-id="20"></comment></div></div></div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__p-3 { padding: 40px; }
-	.__g-4 { gap: 40px; }
-	.__p-5 { padding: 20px; }
-	.__bgc-6 { background-color: #dae6f0; }
-	.__jc-7 { justify-content: center; }
-	.__ali-8 { align-items: center; }
-	.__rl-9 {  font-family: sans-serif; font-size: 22px; font-weight: 400; line-height: 34px; }
-	body.mobile .__rl-9 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; }
-	.__ta-10 { text-align: center; }
-	.__mt-11 { margin-top: 40px; }
-	.__mb-12 { margin-bottom: 40px; }
-	.__g-14 { gap: 10px; }
-	.__rl-15 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; }
-	body.mobile .__rl-15 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; }
-	.__w-16 { width: 213px; }
-	.__h-17 { height: 30px; }
-	.__p-18 { padding: 10px; }
-	.__bw-19 { border-width: 2px; }
-	.__rl-20 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 30px; }
-	body.mobile .__rl-20 {  font-family: sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; }
-	.__cur-21 { cursor: pointer; }
-	.__pl-22 { padding-left: 10px; }
-	.__pr-23 { padding-right: 10px; }
-	.__pt-24 { padding-top: 6px; }
-	.__pb-25 { padding-bottom: 6px; }
-	.__br-26 { border-radius: 5px; }
-	.__bgc-27 { background-color: #B6CDE1; }
-	.__as-28 { align-self: center; }
-	.__g-29 { gap: 5px; }
-	.__w-30 { width: 50%; }
-	.__pb-31 { padding-bottom: 20px; }
-	.__rl-32 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
-	body.mobile .__rl-32 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
-	.__bgc-33 { background-color: white; }
-	.__mnh-34 { min-height: 234px; }
+	.__w-3 { width: 100%; }
+	.__p-4 { padding: 40px; }
+	.__g-5 { gap: 40px; }
+	.__w-6 { width: 100%; }
+	.__p-7 { padding: 20px; }
+	.__bgc-8 { background-color: #dae6f0; }
+	.__jc-9 { justify-content: center; }
+	.__ali-10 { align-items: center; }
+	.__rl-11 {  font-family: sans-serif; font-size: 22px; font-weight: 400; line-height: 34px; }
+	body.mobile .__rl-11 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; }
+	.__ta-12 { text-align: center; }
+	.__mt-13 { margin-top: 40px; }
+	.__mb-14 { margin-bottom: 40px; }
+	.__jc-16 { justify-content: center; }
+	.__ali-17 { align-items: center; }
+	.__g-18 { gap: 10px; }
+	.__rl-19 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; }
+	body.mobile .__rl-19 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; }
+	.__w-20 { width: 213px; }
+	.__h-21 { height: 30px; }
+	.__p-22 { padding: 10px; }
+	.__bw-23 { border-width: 2px; }
+	.__rl-24 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 30px; }
+	body.mobile .__rl-24 {  font-family: sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; }
+	.__cur-25 { cursor: pointer; }
+	.__pl-26 { padding-left: 10px; }
+	.__pr-27 { padding-right: 10px; }
+	.__pt-28 { padding-top: 6px; }
+	.__pb-29 { padding-bottom: 6px; }
+	.__br-30 { border-radius: 5px; }
+	.__bgc-31 { background-color: #B6CDE1; }
+	.__as-32 { align-self: center; }
+	.__rl-33 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 30px; }
+	body.mobile .__rl-33 {  font-family: sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; }
+	.__jc-34 { justify-content: center; }
+	.__ali-35 { align-items: center; }
+	.__g-36 { gap: 5px; }
+	.__w-37 { width: 100%; }
+	.__g-39 { gap: 40px; }
+	.__w-40 { width: 50%; }
+	.__w-41 { width: 50%; }
+	.__p-42 { padding: 20px; }
+	.__pb-43 { padding-bottom: 20px; }
+	.__bgc-44 { background-color: #dae6f0; }
+	.__g-45 { gap: 10px; }
+	.__rl-46 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-46 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-47 { width: 100%; }
+	.__p-48 { padding: 20px; }
+	.__bgc-49 { background-color: white; }
+	.__mnh-50 { min-height: 234px; }
+	.__g-51 { gap: 10px; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/31-advance-list.html b/ftd/t/js/31-advance-list.html
index 709e26b263..77e7fb293f 100644
--- a/ftd/t/js/31-advance-list.html
+++ b/ftd/t/js/31-advance-list.html
@@ -16,7 +16,7 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_row"><div data-id="4">fastn</div><div data-id="5">&nbsp;</div><div data-id="6">language</div></div><div data-id="7" class="ft_column __w-3 __p-4 __mb-5 __br-6 __bgc-7 __rl-8 __g-9"><div data-id="8" class="ft_column __w-1"><div data-id="9">Enter name:</div><input data-id="10" placeholder="Enter your name here..." class="__w-1 __rl-10"></input></div><div data-id="11" class="ft_column __w-1"><div data-id="12">Enter score:</div><input data-id="13" placeholder="Enter your score here..." value="0" class="__w-1 __rl-10"></input></div><comment data-id="14"></comment></div><comment data-id="15"></comment><div data-id="16" class="ft_row __w-3 __p-11 __mb-12 __bgc-13 __jc-14"><div data-id="17" class="ft_row __g-15"><div data-id="18" class="__cur-16">1</div><div data-id="19">Arpita</div></div><div data-id="20">100</div></div><div data-id="21" class="ft_row __w-3 __p-11 __mb-12 __bgc-13 __jc-14"><div data-id="22" class="ft_row __g-15"><div data-id="23" class="__cur-16">2</div><div data-id="24">Arpita</div></div><div data-id="25">90</div></div><div data-id="26" class="ft_row __g-17"><div data-id="27">Total items are:</div><div data-id="28">2</div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_row"><div data-id="4">fastn</div><div data-id="5">&nbsp;</div><div data-id="6">language</div></div><div data-id="7" class="ft_column __w-3 __p-4 __mb-5 __br-6 __bgc-7 __rl-8 __g-9"><div data-id="8" class="ft_column __w-10"><div data-id="9">Enter name:</div><input data-id="10" placeholder="Enter your name here..." class="__w-11 __rl-12"></input></div><div data-id="11" class="ft_column __w-13"><div data-id="12">Enter score:</div><input data-id="13" placeholder="Enter your score here..." value="0" class="__w-14 __rl-15"></input></div><comment data-id="14"></comment></div><comment data-id="15"></comment><div data-id="16" class="ft_row __w-16 __p-17 __mb-18 __bgc-19 __jc-20"><div data-id="17" class="ft_row __g-21"><div data-id="18" class="__cur-22">1</div><div data-id="19">Arpita</div></div><div data-id="20">100</div></div><div data-id="21" class="ft_row __w-23 __p-24 __mb-25 __bgc-26 __jc-27"><div data-id="22" class="ft_row __g-28"><div data-id="23" class="__cur-29">2</div><div data-id="24">Arpita</div></div><div data-id="25">90</div></div><div data-id="26" class="ft_row __g-30"><div data-id="27">Total items are:</div><div data-id="28">2</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__w-3 { width: 500px; }
@@ -27,15 +27,29 @@
 	.__rl-8 {  font-family: sans-serif; font-size: 22px; font-weight: 400; line-height: 34px; }
 	body.mobile .__rl-8 {  font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; }
 	.__g-9 { gap: 10px; }
-	.__rl-10 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
-	body.mobile .__rl-10 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
-	.__p-11 { padding: 10px; }
-	.__mb-12 { margin-bottom: 10px; }
-	.__bgc-13 { background-color: yellow; }
-	.__jc-14 { justify-content: space-between; }
-	.__g-15 { gap: 5px; }
-	.__cur-16 { cursor: pointer; }
-	.__g-17 { gap: 2px; }
+	.__w-10 { width: 100%; }
+	.__w-11 { width: 100%; }
+	.__rl-12 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
+	body.mobile .__rl-12 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
+	.__w-13 { width: 100%; }
+	.__w-14 { width: 100%; }
+	.__rl-15 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
+	body.mobile .__rl-15 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
+	.__w-16 { width: 500px; }
+	.__p-17 { padding: 10px; }
+	.__mb-18 { margin-bottom: 10px; }
+	.__bgc-19 { background-color: yellow; }
+	.__jc-20 { justify-content: space-between; }
+	.__g-21 { gap: 5px; }
+	.__cur-22 { cursor: pointer; }
+	.__w-23 { width: 500px; }
+	.__p-24 { padding: 10px; }
+	.__mb-25 { margin-bottom: 10px; }
+	.__bgc-26 { background-color: yellow; }
+	.__jc-27 { justify-content: space-between; }
+	.__g-28 { gap: 5px; }
+	.__cur-29 { cursor: pointer; }
+	.__g-30 { gap: 2px; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/31-ftd-len.html b/ftd/t/js/31-ftd-len.html
index 49c105916c..a5d628e453 100644
--- a/ftd/t/js/31-ftd-len.html
+++ b/ftd/t/js/31-ftd-len.html
@@ -16,10 +16,13 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column"><comment data-id="4"></comment><comment data-id="5"></comment><div data-id="6" class="__c-3">A</div><comment data-id="7"></comment><div data-id="8" class="__c-3">B</div><comment data-id="9"></comment><div data-id="10" class="__c-3">C</div><comment data-id="11"></comment><div data-id="12" class="__c-3">D</div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column"><comment data-id="4"></comment><comment data-id="5"></comment><div data-id="6" class="__c-3">A</div><comment data-id="7"></comment><div data-id="8" class="__c-4">B</div><comment data-id="9"></comment><div data-id="10" class="__c-5">C</div><comment data-id="11"></comment><div data-id="12" class="__c-6">D</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__c-3 { color: red !important; }
+	.__c-4 { color: red !important; }
+	.__c-5 { color: red !important; }
+	.__c-6 { color: red !important; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/32-ftd-len.html b/ftd/t/js/32-ftd-len.html
index 58301bb07c..54de13812f 100644
--- a/ftd/t/js/32-ftd-len.html
+++ b/ftd/t/js/32-ftd-len.html
@@ -16,7 +16,7 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __p-4 __m-5 __bgc-6 __g-7"><comment data-id="4"></comment><div data-id="5" class="__c-8">January</div><div data-id="6" class="__c-9">February</div><div data-id="7" class="__c-10">March</div><div data-id="8" class="__c-8">April</div><div data-id="9" class="__c-9">May</div><div data-id="10" class="__c-10">June</div><div data-id="11" class="__c-8">July</div><div data-id="12" class="__c-9">August</div><div data-id="13" class="__c-10">September</div><div data-id="14" class="__c-8">October</div></div><div data-id="15" class="ft_column __w-11 __m-5 __g-12"><div data-id="16" class="ft_row __bw-13 __bc-14 __g-12"><div data-id="17" class="__rl-15">Month</div><input data-id="18" placeholder="Enter your month name" class="__w-1 __rl-16"></input><comment data-id="19"></comment></div><div data-id="20" class="__cur-17 __bw-13 __bc-14">Append</div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __p-4 __m-5 __bgc-6 __g-7"><comment data-id="4"></comment><div data-id="5" class="__c-8">January</div><div data-id="6" class="__c-9">February</div><div data-id="7" class="__c-10">March</div><div data-id="8" class="__c-11">April</div><div data-id="9" class="__c-12">May</div><div data-id="10" class="__c-13">June</div><div data-id="11" class="__c-14">July</div><div data-id="12" class="__c-15">August</div><div data-id="13" class="__c-16">September</div><div data-id="14" class="__c-17">October</div></div><div data-id="15" class="ft_column __w-18 __m-19 __g-20"><div data-id="16" class="ft_row __bw-21 __bc-22 __g-23"><div data-id="17" class="__rl-24">Month</div><input data-id="18" placeholder="Enter your month name" class="__w-25 __rl-26"></input><comment data-id="19"></comment></div><div data-id="20" class="__cur-27 __bw-28 __bc-29">Append</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__w-3 { width: 300px; }
@@ -27,15 +27,27 @@
 	.__c-8 { color: orange !important; }
 	.__c-9 { color: white !important; }
 	.__c-10 { color: green !important; }
-	.__w-11 { width: 500px; }
-	.__g-12 { gap: 10px; }
-	.__bw-13 { border-width: 2px; }
-	.__bc-14 { border-color: black; }
-	.__rl-15 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 19px; }
-	body.mobile .__rl-15 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 19px; }
-	.__rl-16 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
-	body.mobile .__rl-16 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
-	.__cur-17 { cursor: pointer; }
+	.__c-11 { color: orange !important; }
+	.__c-12 { color: white !important; }
+	.__c-13 { color: green !important; }
+	.__c-14 { color: orange !important; }
+	.__c-15 { color: white !important; }
+	.__c-16 { color: green !important; }
+	.__c-17 { color: orange !important; }
+	.__w-18 { width: 500px; }
+	.__m-19 { margin: 10px; }
+	.__g-20 { gap: 10px; }
+	.__bw-21 { border-width: 2px; }
+	.__bc-22 { border-color: black; }
+	.__g-23 { gap: 10px; }
+	.__rl-24 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 19px; }
+	body.mobile .__rl-24 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 19px; }
+	.__w-25 { width: 100%; }
+	.__rl-26 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
+	body.mobile .__rl-26 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
+	.__cur-27 { cursor: pointer; }
+	.__bw-28 { border-width: 2px; }
+	.__bc-29 { border-color: black; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/33-list-indexing.html b/ftd/t/js/33-list-indexing.html
index 4c4afde45b..e5302e49cf 100644
--- a/ftd/t/js/33-list-indexing.html
+++ b/ftd/t/js/33-list-indexing.html
@@ -16,12 +16,14 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3">Push something</div><comment data-id="4"></comment><div data-id="5" class="__c-4">Rithik</div><div data-id="6" class="__c-4">Ritesh</div><div data-id="7" class="__c-4">Heulitig</div><comment data-id="8"></comment><div data-id="9" class="__c-5">Heulitig</div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3">Push something</div><comment data-id="4"></comment><div data-id="5" class="__c-4">Rithik</div><div data-id="6" class="__c-5">Ritesh</div><div data-id="7" class="__c-6">Heulitig</div><comment data-id="8"></comment><div data-id="9" class="__c-7">Heulitig</div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__cur-3 { cursor: pointer; }
 	.__c-4 { color: green !important; }
-	.__c-5 { color: red !important; }
+	.__c-5 { color: green !important; }
+	.__c-6 { color: green !important; }
+	.__c-7 { color: red !important; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/36-single-ui.html b/ftd/t/js/36-single-ui.html
index 896ec213a3..5ebbb05cca 100644
--- a/ftd/t/js/36-single-ui.html
+++ b/ftd/t/js/36-single-ui.html
@@ -16,9 +16,10 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3">===================</div><div data-id="4" class="ft_column __w-1"><div data-id="5">Hello World up</div><div data-id="6">Hello World 3</div><div data-id="7">Hello World down</div></div><div data-id="8">===================</div><div data-id="9">Hello World 3</div><div data-id="10">===================</div><comment data-id="11"></comment><div data-id="12">Hello World 3</div><div data-id="13">Hello World 2</div><div data-id="14">===================</div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3">===================</div><div data-id="4" class="ft_column __w-3"><div data-id="5">Hello World up</div><div data-id="6">Hello World 3</div><div data-id="7">Hello World down</div></div><div data-id="8">===================</div><div data-id="9">Hello World 3</div><div data-id="10">===================</div><comment data-id="11"></comment><div data-id="12">Hello World 3</div><div data-id="13">Hello World 2</div><div data-id="14">===================</div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
+	.__w-3 { width: 100%; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/37-expander.html b/ftd/t/js/37-expander.html
index e16e4fa380..1f8e799ccb 100644
--- a/ftd/t/js/37-expander.html
+++ b/ftd/t/js/37-expander.html
@@ -16,20 +16,38 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __h-2 __p-3 __bw-4 __bgc-5 __jc-6 __ali-7 __g-8"><div data-id="4" class="ft_column __w-9 __bw-10"><div data-id="5" class="ft_row __cur-11 __w-1 __p-12 __bw-4 __jc-13"><div data-id="6">What is FTD?</div><comment data-id="7"></comment><div data-id="8">O</div><comment data-id="9"></comment></div><comment data-id="10"></comment></div><div data-id="11" class="ft_column __w-9 __bw-10"><div data-id="12" class="ft_row __cur-11 __w-1 __p-12 __bw-4 __jc-13"><div data-id="13">We are adding text of header using title</div><comment data-id="14"></comment><div data-id="15">O</div><comment data-id="16"></comment></div><comment data-id="17"></comment></div><div data-id="18" class="ft_column __w-9 __bw-10"><div data-id="19" class="ft_row __cur-11 __w-1 __p-12 __bw-4 __jc-13"><div data-id="20">default header</div><comment data-id="21"></comment><div data-id="22">O</div><comment data-id="23"></comment></div><comment data-id="24"></comment></div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __h-4 __p-5 __bw-6 __bgc-7 __jc-8 __ali-9 __g-10"><div data-id="4" class="ft_column __w-11 __bw-12"><div data-id="5" class="ft_row __cur-13 __w-14 __p-15 __bw-16 __jc-17"><div data-id="6">What is FTD?</div><comment data-id="7"></comment><div data-id="8">O</div><comment data-id="9"></comment></div><comment data-id="10"></comment></div><div data-id="11" class="ft_column __w-18 __bw-19"><div data-id="12" class="ft_row __cur-20 __w-21 __p-22 __bw-23 __jc-24"><div data-id="13">We are adding text of header using title</div><comment data-id="14"></comment><div data-id="15">O</div><comment data-id="16"></comment></div><comment data-id="17"></comment></div><div data-id="18" class="ft_column __w-25 __bw-26"><div data-id="19" class="ft_row __cur-27 __w-28 __p-29 __bw-30 __jc-31"><div data-id="20">default header</div><comment data-id="21"></comment><div data-id="22">O</div><comment data-id="23"></comment></div><comment data-id="24"></comment></div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__p-3 { padding: 20px; }
-	.__bw-4 { border-width: 1px; }
-	.__bgc-5 { background-color: #eee; }
-	.__jc-6 { justify-content: start; }
-	.__ali-7 { align-items: center; }
-	.__g-8 { gap: 50px; }
-	.__w-9 { width: 60%; }
-	.__bw-10 { border-width: 4px; }
-	.__cur-11 { cursor: pointer; }
-	.__p-12 { padding: 10px; }
-	.__jc-13 { justify-content: space-between; }
+	.__w-3 { width: 100%; }
+	.__h-4 { height: 100%; }
+	.__p-5 { padding: 20px; }
+	.__bw-6 { border-width: 1px; }
+	.__bgc-7 { background-color: #eee; }
+	.__jc-8 { justify-content: start; }
+	.__ali-9 { align-items: center; }
+	.__g-10 { gap: 50px; }
+	.__w-11 { width: 60%; }
+	.__bw-12 { border-width: 4px; }
+	.__cur-13 { cursor: pointer; }
+	.__w-14 { width: 100%; }
+	.__p-15 { padding: 10px; }
+	.__bw-16 { border-width: 1px; }
+	.__jc-17 { justify-content: space-between; }
+	.__w-18 { width: 60%; }
+	.__bw-19 { border-width: 4px; }
+	.__cur-20 { cursor: pointer; }
+	.__w-21 { width: 100%; }
+	.__p-22 { padding: 10px; }
+	.__bw-23 { border-width: 1px; }
+	.__jc-24 { justify-content: space-between; }
+	.__w-25 { width: 60%; }
+	.__bw-26 { border-width: 4px; }
+	.__cur-27 { cursor: pointer; }
+	.__w-28 { width: 100%; }
+	.__p-29 { padding: 10px; }
+	.__bw-30 { border-width: 1px; }
+	.__jc-31 { justify-content: space-between; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/38-background-image-properties.html b/ftd/t/js/38-background-image-properties.html
index 9792a70eb4..7d02df38d7 100644
--- a/ftd/t/js/38-background-image-properties.html
+++ b/ftd/t/js/38-background-image-properties.html
@@ -16,13 +16,14 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __h-3 __bgr-4 __bgp-5 __bgi-6"></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __h-4 __bgr-5 __bgp-6 __bgi-7"></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__h-3 { height: 500px; }
-	.__bgr-4 { background-repeat: no-repeat; }
-	.__bgp-5 { background-position: center; }
-	.__bgi-6 { background-image: url(https://picsum.photos/200/300); }
+	.__w-3 { width: 100%; }
+	.__h-4 { height: 500px; }
+	.__bgr-5 { background-repeat: no-repeat; }
+	.__bgp-6 { background-position: center; }
+	.__bgi-7 { background-image: url(https://picsum.photos/200/300); }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/40-code-themes.html b/ftd/t/js/40-code-themes.html
index c71869d5db..b1c10816f6 100644
--- a/ftd/t/js/40-code-themes.html
+++ b/ftd/t/js/40-code-themes.html
@@ -16,7 +16,7 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __g-3"><pre data-id="4" data-line="6,8,22-25" class="language-ftd fastn-theme-light __rl-4"><code data-id="5" class="language-ftd fastn-theme-light">-- import: foo
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __g-4"><pre data-id="4" data-line="6,8,22-25" class="language-ftd fastn-theme-light __rl-5"><code data-id="5" class="language-ftd fastn-theme-light">-- import: foo
 
 -- component bar:
 
@@ -45,7 +45,7 @@
 border-color: $red-yellow
 border-style: solid
 border-width.px: 2
-</code></pre><pre data-id="6" data-line="6,8,21-24" class="language-ftd fastn-theme-dark __rl-4"><code data-id="7" class="language-ftd fastn-theme-dark">-- import: foo
+</code></pre><pre data-id="6" data-line="6,8,21-24" class="language-ftd fastn-theme-dark __rl-6"><code data-id="7" class="language-ftd fastn-theme-dark">-- import: foo
 
 -- component bar:
 
@@ -164,9 +164,12 @@
 </code></pre></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__g-3 { gap: 10px; }
-	.__rl-4 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
-	body.mobile .__rl-4 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
+	.__w-3 { width: 100%; }
+	.__g-4 { gap: 10px; }
+	.__rl-5 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
+	body.mobile .__rl-5 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
+	.__rl-6 {  font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; }
+	body.mobile .__rl-6 {  font-family: sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/43-image-object-fit.html b/ftd/t/js/43-image-object-fit.html
index b79f58fd95..79bdc463c8 100644
--- a/ftd/t/js/43-image-object-fit.html
+++ b/ftd/t/js/43-image-object-fit.html
@@ -16,18 +16,29 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __m-3 __g-4"><div data-id="4">Original</div><img data-id="5" src="https://picsum.photos/536/354"></img><div data-id="6">Without fit</div><img data-id="7" src="https://picsum.photos/536/354" class="__w-5 __h-6"></img><div data-id="8">Fit = None</div><img data-id="9" src="https://picsum.photos/536/354" class="__of-7 __w-5 __h-6"></img><div data-id="10">Fit = Cover</div><img data-id="11" src="https://picsum.photos/536/354" class="__of-8 __w-5 __h-6"></img><div data-id="12">Fit = Contain</div><img data-id="13" src="https://picsum.photos/536/354" class="__of-9 __w-5 __h-6"></img><div data-id="14">Fit = Fill</div><img data-id="15" src="https://picsum.photos/536/354" class="__of-10 __w-5 __h-6"></img><div data-id="16">Fit = Scale Down</div><img data-id="17" src="https://picsum.photos/536/354" class="__of-11 __w-5 __h-6"></img></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __m-4 __g-5"><div data-id="4">Original</div><img data-id="5" src="https://picsum.photos/536/354"></img><div data-id="6">Without fit</div><img data-id="7" src="https://picsum.photos/536/354" class="__w-6 __h-7"></img><div data-id="8">Fit = None</div><img data-id="9" src="https://picsum.photos/536/354" class="__of-8 __w-9 __h-10"></img><div data-id="10">Fit = Cover</div><img data-id="11" src="https://picsum.photos/536/354" class="__of-11 __w-12 __h-13"></img><div data-id="12">Fit = Contain</div><img data-id="13" src="https://picsum.photos/536/354" class="__of-14 __w-15 __h-16"></img><div data-id="14">Fit = Fill</div><img data-id="15" src="https://picsum.photos/536/354" class="__of-17 __w-18 __h-19"></img><div data-id="16">Fit = Scale Down</div><img data-id="17" src="https://picsum.photos/536/354" class="__of-20 __w-21 __h-22"></img></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__m-3 { margin: 2rem; }
-	.__g-4 { gap: 2rem; }
-	.__w-5 { width: 200px; }
-	.__h-6 { height: 300px; }
-	.__of-7 { object-fit: none; }
-	.__of-8 { object-fit: cover; }
-	.__of-9 { object-fit: contain; }
-	.__of-10 { object-fit: fill; }
-	.__of-11 { object-fit: scale-down; }
+	.__w-3 { width: 100%; }
+	.__m-4 { margin: 2rem; }
+	.__g-5 { gap: 2rem; }
+	.__w-6 { width: 200px; }
+	.__h-7 { height: 300px; }
+	.__of-8 { object-fit: none; }
+	.__w-9 { width: 200px; }
+	.__h-10 { height: 300px; }
+	.__of-11 { object-fit: cover; }
+	.__w-12 { width: 200px; }
+	.__h-13 { height: 300px; }
+	.__of-14 { object-fit: contain; }
+	.__w-15 { width: 200px; }
+	.__h-16 { height: 300px; }
+	.__of-17 { object-fit: fill; }
+	.__w-18 { width: 200px; }
+	.__h-19 { height: 300px; }
+	.__of-20 { object-fit: scale-down; }
+	.__w-21 { width: 200px; }
+	.__h-22 { height: 300px; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/44-local-storage.html b/ftd/t/js/44-local-storage.html
index d980750d83..61d024beed 100644
--- a/ftd/t/js/44-local-storage.html
+++ b/ftd/t/js/44-local-storage.html
@@ -16,10 +16,11 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3">Save To Local Storage</div><div data-id="4">World</div><div data-id="5" class="__cur-3">Load From Local Storage</div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__cur-3">Save To Local Storage</div><div data-id="4">World</div><div data-id="5" class="__cur-4">Load From Local Storage</div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__cur-3 { cursor: pointer; }
+	.__cur-4 { cursor: pointer; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/44-module.html b/ftd/t/js/44-module.html
index 3fe50fc0b9..f439ee4e71 100644
--- a/ftd/t/js/44-module.html
+++ b/ftd/t/js/44-module.html
@@ -16,13 +16,16 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __p-3 __mb-4 __bw-5"><div data-id="4">FifthTry Hello World!!</div><div data-id="5">Hello World!!</div><div data-id="6">default header again</div></div><div data-id="7" class="ft_column __p-3 __mb-4 __bw-5"><div data-id="8">FifthTry ++++ Hello World from 01-basic-module!!</div><div data-id="9">Hello World from 01-basic-module!!</div><div data-id="10" class="__c-6">default header again</div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __p-3 __mb-4 __bw-5"><div data-id="4">FifthTry Hello World!!</div><div data-id="5">Hello World!!</div><div data-id="6">default header again</div></div><div data-id="7" class="ft_column __p-6 __mb-7 __bw-8"><div data-id="8">FifthTry ++++ Hello World from 01-basic-module!!</div><div data-id="9">Hello World from 01-basic-module!!</div><div data-id="10" class="__c-9">default header again</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__p-3 { padding: 10px; }
 	.__mb-4 { margin-bottom: 5px; }
 	.__bw-5 { border-width: 1px; }
-	.__c-6 { color: orange !important; }
+	.__p-6 { padding: 10px; }
+	.__mb-7 { margin-bottom: 5px; }
+	.__bw-8 { border-width: 1px; }
+	.__c-9 { color: orange !important; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/45-re-module.html b/ftd/t/js/45-re-module.html
index d3dd889a16..d82443bcc8 100644
--- a/ftd/t/js/45-re-module.html
+++ b/ftd/t/js/45-re-module.html
@@ -16,13 +16,16 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __p-3 __mb-4 __bw-5"><div data-id="4">FifthTry Hello World!!</div><div data-id="5">Hello World!!</div><div data-id="6">default header again</div></div><div data-id="7" class="ft_column __p-3 __mb-4 __bw-5"><div data-id="8">FifthTry ++++ Hello World from 01-basic-module!!</div><div data-id="9">Hello World from 01-basic-module!!</div><div data-id="10" class="__c-6">default header again</div></div><div data-id="11">hello world</div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __p-3 __mb-4 __bw-5"><div data-id="4">FifthTry Hello World!!</div><div data-id="5">Hello World!!</div><div data-id="6">default header again</div></div><div data-id="7" class="ft_column __p-6 __mb-7 __bw-8"><div data-id="8">FifthTry ++++ Hello World from 01-basic-module!!</div><div data-id="9">Hello World from 01-basic-module!!</div><div data-id="10" class="__c-9">default header again</div></div><div data-id="11">hello world</div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__p-3 { padding: 10px; }
 	.__mb-4 { margin-bottom: 5px; }
 	.__bw-5 { border-width: 1px; }
-	.__c-6 { color: orange !important; }
+	.__p-6 { padding: 10px; }
+	.__mb-7 { margin-bottom: 5px; }
+	.__bw-8 { border-width: 1px; }
+	.__c-9 { color: orange !important; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/47-ftd-code-syntax.html b/ftd/t/js/47-ftd-code-syntax.html
index 62c347fddb..905977c8cc 100644
--- a/ftd/t/js/47-ftd-code-syntax.html
+++ b/ftd/t/js/47-ftd-code-syntax.html
@@ -16,7 +16,7 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_row __w-1 __pt-3 __pb-4 __jc-5"><pre data-id="4" class="language-ftd fastn-theme-light"><code data-id="5" class="language-ftd fastn-theme-light">/-- ds.code:
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_row __w-3 __pt-4 __pb-5 __jc-6"><pre data-id="4" class="language-ftd fastn-theme-light"><code data-id="5" class="language-ftd fastn-theme-light">/-- ds.code:
 lang: ftd
 
 fooo
@@ -171,9 +171,10 @@
 </code></pre></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__pt-3 { padding-top: 50px; }
-	.__pb-4 { padding-bottom: 50px; }
-	.__jc-5 { justify-content: space-around; }
+	.__w-3 { width: 100%; }
+	.__pt-4 { padding-top: 50px; }
+	.__pb-5 { padding-bottom: 50px; }
+	.__jc-6 { justify-content: space-around; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/49-align-content.html b/ftd/t/js/49-align-content.html
index 26741dca61..03179a016c 100644
--- a/ftd/t/js/49-align-content.html
+++ b/ftd/t/js/49-align-content.html
@@ -16,31 +16,236 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __g-3"><div data-id="4" class="__c-4 __rl-5">TOP LEFT</div><div data-id="5" class="ft_row __w-1 __pt-6 __pb-7 __bw-8 __bc-9 __jc-10"><div data-id="6" class="ft_column __w-11 __h-12 __bgc-13 __jc-14 __ali-15"><div data-id="7" class="__bw-8 __bc-16 __c-17">Column</div></div><div data-id="8" class="ft_row __w-11 __h-12 __bgc-13 __jc-14 __ali-15"><div data-id="9" class="__bw-8 __bc-16 __c-17">Row</div></div></div><div data-id="10" class="__c-4 __rl-5">TOP CENTER</div><div data-id="11" class="ft_row __w-1 __pt-6 __pb-7 __bw-8 __bc-9 __jc-10"><div data-id="12" class="ft_column __w-11 __h-12 __bgc-13 __jc-14 __ali-18"><div data-id="13" class="__bw-8 __bc-16 __c-17">Column</div></div><div data-id="14" class="ft_row __w-11 __h-12 __bgc-13 __jc-19 __ali-15"><div data-id="15" class="__bw-8 __bc-16 __c-17">Row</div></div></div><div data-id="16" class="__c-4 __rl-5">TOP RIGHT</div><div data-id="17" class="ft_row __w-1 __pt-6 __pb-7 __bw-8 __bc-9 __jc-10"><div data-id="18" class="ft_column __w-11 __h-12 __bgc-13 __jc-14 __ali-20"><div data-id="19" class="__bw-8 __bc-16 __c-17">Column</div></div><div data-id="20" class="ft_row __w-11 __h-12 __bgc-13 __jc-21 __ali-15"><div data-id="21" class="__bw-8 __bc-16 __c-17">Row</div></div></div><div data-id="22" class="__c-4 __rl-5">LEFT</div><div data-id="23" class="ft_row __w-1 __pt-6 __pb-7 __bw-8 __bc-9 __jc-10"><div data-id="24" class="ft_column __w-11 __h-12 __bgc-13 __jc-19 __ali-15"><div data-id="25" class="__bw-8 __bc-16 __c-17">Column</div></div><div data-id="26" class="ft_row __w-11 __h-12 __bgc-13 __jc-14 __ali-18"><div data-id="27" class="__bw-8 __bc-16 __c-17">Row</div></div></div><div data-id="28" class="__c-4 __rl-5">CENTER</div><div data-id="29" class="ft_row __w-1 __pt-6 __pb-7 __bw-8 __bc-9 __jc-10"><div data-id="30" class="ft_column __w-11 __h-12 __bgc-13 __jc-19 __ali-18"><div data-id="31" class="__bw-8 __bc-16 __c-17">Column</div></div><div data-id="32" class="ft_row __w-11 __h-12 __bgc-13 __jc-19 __ali-18"><div data-id="33" class="__bw-8 __bc-16 __c-17">Row</div></div></div><div data-id="34" class="__c-4 __rl-5">RIGHT</div><div data-id="35" class="ft_row __w-1 __pt-6 __pb-7 __bw-8 __bc-9 __jc-10"><div data-id="36" class="ft_column __w-11 __h-12 __bgc-13 __jc-19 __ali-20"><div data-id="37" class="__bw-8 __bc-16 __c-17">Column</div></div><div data-id="38" class="ft_row __w-11 __h-12 __bgc-13 __jc-22 __ali-18"><div data-id="39" class="__bw-8 __bc-16 __c-17">Row</div></div></div><div data-id="40" class="__c-4 __rl-5">BOTTOM LEFT</div><div data-id="41" class="ft_row __w-1 __pt-6 __pb-7 __bw-8 __bc-9 __jc-10"><div data-id="42" class="ft_column __w-11 __h-12 __bgc-13 __jc-21 __ali-23"><div data-id="43" class="__bw-8 __bc-16 __c-17">Column</div></div><div data-id="44" class="ft_row __w-11 __h-12 __bgc-13 __jc-14 __ali-20"><div data-id="45" class="__bw-8 __bc-16 __c-17">Row</div></div></div><div data-id="46" class="__c-4 __rl-5">BOTTOM CENTER</div><div data-id="47" class="ft_row __w-1 __pt-6 __pb-7 __bw-8 __bc-9 __jc-10"><div data-id="48" class="ft_column __w-11 __h-12 __bgc-13 __jc-21 __ali-18"><div data-id="49" class="__bw-8 __bc-16 __c-17">Column</div></div><div data-id="50" class="ft_row __w-11 __h-12 __bgc-13 __jc-14 __ali-20"><div data-id="51" class="__bw-8 __bc-16 __c-17">Row</div></div></div><div data-id="52" class="__c-4 __rl-5">BOTTOM RIGHT</div><div data-id="53" class="ft_row __w-1 __pt-6 __pb-7 __bw-8 __bc-9 __jc-10"><div data-id="54" class="ft_column __w-11 __h-12 __bgc-13 __jc-21 __ali-20"><div data-id="55" class="__bw-8 __bc-16 __c-17">Column</div></div><div data-id="56" class="ft_row __w-11 __h-12 __bgc-13 __jc-21 __ali-20"><div data-id="57" class="__bw-8 __bc-16 __c-17">Row</div></div></div></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __g-4"><div data-id="4" class="__c-5 __rl-6">TOP LEFT</div><div data-id="5" class="ft_row __w-7 __pt-8 __pb-9 __bw-10 __bc-11 __jc-12"><div data-id="6" class="ft_column __w-13 __h-14 __bgc-15 __jc-16 __ali-17"><div data-id="7" class="__bw-18 __bc-19 __c-20">Column</div></div><div data-id="8" class="ft_row __w-21 __h-22 __bgc-23 __jc-24 __ali-25"><div data-id="9" class="__bw-26 __bc-27 __c-28">Row</div></div></div><div data-id="10" class="__c-29 __rl-30">TOP CENTER</div><div data-id="11" class="ft_row __w-31 __pt-32 __pb-33 __bw-34 __bc-35 __jc-36"><div data-id="12" class="ft_column __w-37 __h-38 __bgc-39 __jc-40 __ali-41"><div data-id="13" class="__bw-42 __bc-43 __c-44">Column</div></div><div data-id="14" class="ft_row __w-45 __h-46 __bgc-47 __jc-48 __ali-49"><div data-id="15" class="__bw-50 __bc-51 __c-52">Row</div></div></div><div data-id="16" class="__c-53 __rl-54">TOP RIGHT</div><div data-id="17" class="ft_row __w-55 __pt-56 __pb-57 __bw-58 __bc-59 __jc-60"><div data-id="18" class="ft_column __w-61 __h-62 __bgc-63 __jc-64 __ali-65"><div data-id="19" class="__bw-66 __bc-67 __c-68">Column</div></div><div data-id="20" class="ft_row __w-69 __h-70 __bgc-71 __jc-72 __ali-73"><div data-id="21" class="__bw-74 __bc-75 __c-76">Row</div></div></div><div data-id="22" class="__c-77 __rl-78">LEFT</div><div data-id="23" class="ft_row __w-79 __pt-80 __pb-81 __bw-82 __bc-83 __jc-84"><div data-id="24" class="ft_column __w-85 __h-86 __bgc-87 __jc-88 __ali-89"><div data-id="25" class="__bw-90 __bc-91 __c-92">Column</div></div><div data-id="26" class="ft_row __w-93 __h-94 __bgc-95 __jc-96 __ali-97"><div data-id="27" class="__bw-98 __bc-99 __c-100">Row</div></div></div><div data-id="28" class="__c-101 __rl-102">CENTER</div><div data-id="29" class="ft_row __w-103 __pt-104 __pb-105 __bw-106 __bc-107 __jc-108"><div data-id="30" class="ft_column __w-109 __h-110 __bgc-111 __jc-112 __ali-113"><div data-id="31" class="__bw-114 __bc-115 __c-116">Column</div></div><div data-id="32" class="ft_row __w-117 __h-118 __bgc-119 __jc-120 __ali-121"><div data-id="33" class="__bw-122 __bc-123 __c-124">Row</div></div></div><div data-id="34" class="__c-125 __rl-126">RIGHT</div><div data-id="35" class="ft_row __w-127 __pt-128 __pb-129 __bw-130 __bc-131 __jc-132"><div data-id="36" class="ft_column __w-133 __h-134 __bgc-135 __jc-136 __ali-137"><div data-id="37" class="__bw-138 __bc-139 __c-140">Column</div></div><div data-id="38" class="ft_row __w-141 __h-142 __bgc-143 __jc-144 __ali-145"><div data-id="39" class="__bw-146 __bc-147 __c-148">Row</div></div></div><div data-id="40" class="__c-149 __rl-150">BOTTOM LEFT</div><div data-id="41" class="ft_row __w-151 __pt-152 __pb-153 __bw-154 __bc-155 __jc-156"><div data-id="42" class="ft_column __w-157 __h-158 __bgc-159 __jc-160 __ali-161"><div data-id="43" class="__bw-162 __bc-163 __c-164">Column</div></div><div data-id="44" class="ft_row __w-165 __h-166 __bgc-167 __jc-168 __ali-169"><div data-id="45" class="__bw-170 __bc-171 __c-172">Row</div></div></div><div data-id="46" class="__c-173 __rl-174">BOTTOM CENTER</div><div data-id="47" class="ft_row __w-175 __pt-176 __pb-177 __bw-178 __bc-179 __jc-180"><div data-id="48" class="ft_column __w-181 __h-182 __bgc-183 __jc-184 __ali-185"><div data-id="49" class="__bw-186 __bc-187 __c-188">Column</div></div><div data-id="50" class="ft_row __w-189 __h-190 __bgc-191 __jc-192 __ali-193"><div data-id="51" class="__bw-194 __bc-195 __c-196">Row</div></div></div><div data-id="52" class="__c-197 __rl-198">BOTTOM RIGHT</div><div data-id="53" class="ft_row __w-199 __pt-200 __pb-201 __bw-202 __bc-203 __jc-204"><div data-id="54" class="ft_column __w-205 __h-206 __bgc-207 __jc-208 __ali-209"><div data-id="55" class="__bw-210 __bc-211 __c-212">Column</div></div><div data-id="56" class="ft_row __w-213 __h-214 __bgc-215 __jc-216 __ali-217"><div data-id="57" class="__bw-218 __bc-219 __c-220">Row</div></div></div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__g-3 { gap: 10px; }
-	.__c-4 { color: black !important; }
-	.__rl-5 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
-	body.mobile .__rl-5 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
-	.__pt-6 { padding-top: 10px; }
-	.__pb-7 { padding-bottom: 10px; }
-	.__bw-8 { border-width: 2px; }
-	.__bc-9 { border-color: green; }
-	.__jc-10 { justify-content: space-around; }
-	.__w-11 { width: 200px; }
-	.__h-12 { height: 100px; }
-	.__bgc-13 { background-color: yellow; }
-	.__jc-14 { justify-content: start; }
-	.__ali-15 { align-items: start; }
-	.__bc-16 { border-color: red; }
-	.__c-17 { color: red !important; }
-	.__ali-18 { align-items: center; }
-	.__jc-19 { justify-content: center; }
-	.__ali-20 { align-items: end; }
-	.__jc-21 { justify-content: end; }
-	.__jc-22 { justify-content: right; }
-	.__ali-23 { align-items: left; }
+	.__w-3 { width: 100%; }
+	.__g-4 { gap: 10px; }
+	.__c-5 { color: black !important; }
+	.__rl-6 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-6 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-7 { width: 100%; }
+	.__pt-8 { padding-top: 10px; }
+	.__pb-9 { padding-bottom: 10px; }
+	.__bw-10 { border-width: 2px; }
+	.__bc-11 { border-color: green; }
+	.__jc-12 { justify-content: space-around; }
+	.__w-13 { width: 200px; }
+	.__h-14 { height: 100px; }
+	.__bgc-15 { background-color: yellow; }
+	.__jc-16 { justify-content: start; }
+	.__ali-17 { align-items: start; }
+	.__bw-18 { border-width: 2px; }
+	.__bc-19 { border-color: red; }
+	.__c-20 { color: red !important; }
+	.__w-21 { width: 200px; }
+	.__h-22 { height: 100px; }
+	.__bgc-23 { background-color: yellow; }
+	.__jc-24 { justify-content: start; }
+	.__ali-25 { align-items: start; }
+	.__bw-26 { border-width: 2px; }
+	.__bc-27 { border-color: red; }
+	.__c-28 { color: red !important; }
+	.__c-29 { color: black !important; }
+	.__rl-30 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-30 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-31 { width: 100%; }
+	.__pt-32 { padding-top: 10px; }
+	.__pb-33 { padding-bottom: 10px; }
+	.__bw-34 { border-width: 2px; }
+	.__bc-35 { border-color: green; }
+	.__jc-36 { justify-content: space-around; }
+	.__w-37 { width: 200px; }
+	.__h-38 { height: 100px; }
+	.__bgc-39 { background-color: yellow; }
+	.__jc-40 { justify-content: start; }
+	.__ali-41 { align-items: center; }
+	.__bw-42 { border-width: 2px; }
+	.__bc-43 { border-color: red; }
+	.__c-44 { color: red !important; }
+	.__w-45 { width: 200px; }
+	.__h-46 { height: 100px; }
+	.__bgc-47 { background-color: yellow; }
+	.__jc-48 { justify-content: center; }
+	.__ali-49 { align-items: start; }
+	.__bw-50 { border-width: 2px; }
+	.__bc-51 { border-color: red; }
+	.__c-52 { color: red !important; }
+	.__c-53 { color: black !important; }
+	.__rl-54 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-54 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-55 { width: 100%; }
+	.__pt-56 { padding-top: 10px; }
+	.__pb-57 { padding-bottom: 10px; }
+	.__bw-58 { border-width: 2px; }
+	.__bc-59 { border-color: green; }
+	.__jc-60 { justify-content: space-around; }
+	.__w-61 { width: 200px; }
+	.__h-62 { height: 100px; }
+	.__bgc-63 { background-color: yellow; }
+	.__jc-64 { justify-content: start; }
+	.__ali-65 { align-items: end; }
+	.__bw-66 { border-width: 2px; }
+	.__bc-67 { border-color: red; }
+	.__c-68 { color: red !important; }
+	.__w-69 { width: 200px; }
+	.__h-70 { height: 100px; }
+	.__bgc-71 { background-color: yellow; }
+	.__jc-72 { justify-content: end; }
+	.__ali-73 { align-items: start; }
+	.__bw-74 { border-width: 2px; }
+	.__bc-75 { border-color: red; }
+	.__c-76 { color: red !important; }
+	.__c-77 { color: black !important; }
+	.__rl-78 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-78 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-79 { width: 100%; }
+	.__pt-80 { padding-top: 10px; }
+	.__pb-81 { padding-bottom: 10px; }
+	.__bw-82 { border-width: 2px; }
+	.__bc-83 { border-color: green; }
+	.__jc-84 { justify-content: space-around; }
+	.__w-85 { width: 200px; }
+	.__h-86 { height: 100px; }
+	.__bgc-87 { background-color: yellow; }
+	.__jc-88 { justify-content: center; }
+	.__ali-89 { align-items: start; }
+	.__bw-90 { border-width: 2px; }
+	.__bc-91 { border-color: red; }
+	.__c-92 { color: red !important; }
+	.__w-93 { width: 200px; }
+	.__h-94 { height: 100px; }
+	.__bgc-95 { background-color: yellow; }
+	.__jc-96 { justify-content: start; }
+	.__ali-97 { align-items: center; }
+	.__bw-98 { border-width: 2px; }
+	.__bc-99 { border-color: red; }
+	.__c-100 { color: red !important; }
+	.__c-101 { color: black !important; }
+	.__rl-102 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-102 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-103 { width: 100%; }
+	.__pt-104 { padding-top: 10px; }
+	.__pb-105 { padding-bottom: 10px; }
+	.__bw-106 { border-width: 2px; }
+	.__bc-107 { border-color: green; }
+	.__jc-108 { justify-content: space-around; }
+	.__w-109 { width: 200px; }
+	.__h-110 { height: 100px; }
+	.__bgc-111 { background-color: yellow; }
+	.__jc-112 { justify-content: center; }
+	.__ali-113 { align-items: center; }
+	.__bw-114 { border-width: 2px; }
+	.__bc-115 { border-color: red; }
+	.__c-116 { color: red !important; }
+	.__w-117 { width: 200px; }
+	.__h-118 { height: 100px; }
+	.__bgc-119 { background-color: yellow; }
+	.__jc-120 { justify-content: center; }
+	.__ali-121 { align-items: center; }
+	.__bw-122 { border-width: 2px; }
+	.__bc-123 { border-color: red; }
+	.__c-124 { color: red !important; }
+	.__c-125 { color: black !important; }
+	.__rl-126 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-126 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-127 { width: 100%; }
+	.__pt-128 { padding-top: 10px; }
+	.__pb-129 { padding-bottom: 10px; }
+	.__bw-130 { border-width: 2px; }
+	.__bc-131 { border-color: green; }
+	.__jc-132 { justify-content: space-around; }
+	.__w-133 { width: 200px; }
+	.__h-134 { height: 100px; }
+	.__bgc-135 { background-color: yellow; }
+	.__jc-136 { justify-content: center; }
+	.__ali-137 { align-items: end; }
+	.__bw-138 { border-width: 2px; }
+	.__bc-139 { border-color: red; }
+	.__c-140 { color: red !important; }
+	.__w-141 { width: 200px; }
+	.__h-142 { height: 100px; }
+	.__bgc-143 { background-color: yellow; }
+	.__jc-144 { justify-content: right; }
+	.__ali-145 { align-items: center; }
+	.__bw-146 { border-width: 2px; }
+	.__bc-147 { border-color: red; }
+	.__c-148 { color: red !important; }
+	.__c-149 { color: black !important; }
+	.__rl-150 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-150 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-151 { width: 100%; }
+	.__pt-152 { padding-top: 10px; }
+	.__pb-153 { padding-bottom: 10px; }
+	.__bw-154 { border-width: 2px; }
+	.__bc-155 { border-color: green; }
+	.__jc-156 { justify-content: space-around; }
+	.__w-157 { width: 200px; }
+	.__h-158 { height: 100px; }
+	.__bgc-159 { background-color: yellow; }
+	.__jc-160 { justify-content: end; }
+	.__ali-161 { align-items: left; }
+	.__bw-162 { border-width: 2px; }
+	.__bc-163 { border-color: red; }
+	.__c-164 { color: red !important; }
+	.__w-165 { width: 200px; }
+	.__h-166 { height: 100px; }
+	.__bgc-167 { background-color: yellow; }
+	.__jc-168 { justify-content: start; }
+	.__ali-169 { align-items: end; }
+	.__bw-170 { border-width: 2px; }
+	.__bc-171 { border-color: red; }
+	.__c-172 { color: red !important; }
+	.__c-173 { color: black !important; }
+	.__rl-174 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-174 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-175 { width: 100%; }
+	.__pt-176 { padding-top: 10px; }
+	.__pb-177 { padding-bottom: 10px; }
+	.__bw-178 { border-width: 2px; }
+	.__bc-179 { border-color: green; }
+	.__jc-180 { justify-content: space-around; }
+	.__w-181 { width: 200px; }
+	.__h-182 { height: 100px; }
+	.__bgc-183 { background-color: yellow; }
+	.__jc-184 { justify-content: end; }
+	.__ali-185 { align-items: center; }
+	.__bw-186 { border-width: 2px; }
+	.__bc-187 { border-color: red; }
+	.__c-188 { color: red !important; }
+	.__w-189 { width: 200px; }
+	.__h-190 { height: 100px; }
+	.__bgc-191 { background-color: yellow; }
+	.__jc-192 { justify-content: center; }
+	.__ali-193 { align-items: end; }
+	.__bw-194 { border-width: 2px; }
+	.__bc-195 { border-color: red; }
+	.__c-196 { color: red !important; }
+	.__c-197 { color: black !important; }
+	.__rl-198 {  font-family: sans-serif; font-size: 38px; font-weight: 400; line-height: 57px; }
+	body.mobile .__rl-198 {  font-family: sans-serif; font-size: 26px; font-weight: 400; line-height: 40px; }
+	.__w-199 { width: 100%; }
+	.__pt-200 { padding-top: 10px; }
+	.__pb-201 { padding-bottom: 10px; }
+	.__bw-202 { border-width: 2px; }
+	.__bc-203 { border-color: green; }
+	.__jc-204 { justify-content: space-around; }
+	.__w-205 { width: 200px; }
+	.__h-206 { height: 100px; }
+	.__bgc-207 { background-color: yellow; }
+	.__jc-208 { justify-content: end; }
+	.__ali-209 { align-items: end; }
+	.__bw-210 { border-width: 2px; }
+	.__bc-211 { border-color: red; }
+	.__c-212 { color: red !important; }
+	.__w-213 { width: 200px; }
+	.__h-214 { height: 100px; }
+	.__bgc-215 { background-color: yellow; }
+	.__jc-216 { justify-content: end; }
+	.__ali-217 { align-items: end; }
+	.__bw-218 { border-width: 2px; }
+	.__bc-219 { border-color: red; }
+	.__c-220 { color: red !important; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/50-iframe-fullscreen.html b/ftd/t/js/50-iframe-fullscreen.html
index b86eec3d8c..be67a8164b 100644
--- a/ftd/t/js/50-iframe-fullscreen.html
+++ b/ftd/t/js/50-iframe-fullscreen.html
@@ -16,15 +16,16 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-1 __jc-3 __ali-4"><iframe data-id="4" allowfullscreen src="https://youtube.com/embed/GWhxP1TFFvA" class="__w-5 __h-6 __mb-7 __mnh-8"></iframe></div></div></body><style id="styles">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_column __w-3 __jc-4 __ali-5"><iframe data-id="4" allowfullscreen src="https://youtube.com/embed/GWhxP1TFFvA" class="__w-6 __h-7 __mb-8 __mnh-9"></iframe></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
-	.__jc-3 { justify-content: center; }
-	.__ali-4 { align-items: center; }
-	.__w-5 { width: 800px; }
-	.__h-6 { height: 300px; }
-	.__mb-7 { margin-bottom: 24px; }
-	.__mnh-8 { min-height: 400px; }
+	.__w-3 { width: 100%; }
+	.__jc-4 { justify-content: center; }
+	.__ali-5 { align-items: center; }
+	.__w-6 { width: 800px; }
+	.__h-7 { height: 300px; }
+	.__mb-8 { margin-bottom: 24px; }
+	.__mnh-9 { min-height: 400px; }
     </style>
 <script>
     (function() {
diff --git a/ftd/t/js/51-markdown-table.html b/ftd/t/js/51-markdown-table.html
index 3d6da568b7..43f2e8e58d 100644
--- a/ftd/t/js/51-markdown-table.html
+++ b/ftd/t/js/51-markdown-table.html
@@ -16,21 +16,22 @@
     </style>
 </head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__c-3">false</div><div data-id="4" class="ft_column __w-1 __m-4 __g-5"><div data-id="5" class="__c-6">This is a markdown table below:
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="__c-3">false</div><div data-id="4" class="ft_column __w-4 __m-5 __g-6"><div data-id="5" class="__c-7">This is a markdown table below:
 
 | Elements     |  Components  |
 | :----------  |  :---------  |
 | heading      |  `ds.h1`     |
 | image        |  `ds.image`  |
 | code-block   |  `ds.code`   |
-| code-block   |  `ds.code`   |</div><div data-id="6" class="__cur-7">Click</div></div></div></body><style id="styles">
+| code-block   |  `ds.code`   |</div><div data-id="6" class="__cur-8">Click</div></div></div></body><style id="styles">
     .__w-1 { width: 100%; }
 	.__h-2 { height: 100%; }
 	.__c-3 { color: blue !important; }
-	.__m-4 { margin: 40px; }
-	.__g-5 { gap: 10px; }
-	.__c-6 { color: red !important; }
-	.__cur-7 { cursor: pointer; }
+	.__w-4 { width: 100%; }
+	.__m-5 { margin: 40px; }
+	.__g-6 { gap: 10px; }
+	.__c-7 { color: red !important; }
+	.__cur-8 { cursor: pointer; }
     </style>
 <script>
     (function() {
