PageSourceSearch

https://gt-america.com/

html gt-america.com collected 2026-10-03 21:51:42 UTC 979,404 bytes, 20,381 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6    <title>
7      GT America Intl typeface exclusively at Grilli Type — Download Free Trial
8      Fonts
9    </title>
10    
10<script src="/index.49cd543c.js" defer=""></script>
10
11    <!-- 
12      <link
13      rel="preload"
14      as="font"
15      type="font/woff2"
16      href="./fonts/GT-Pressura-Loader.woff2"
17    /> 
18   <link
19      rel="preload"
20      as="font"
21      type="font/ttf"
22      href="./fonts/GT-Pressura-Mono-VF.ttf"
23    />
24    <link
25      rel="preload"
26      as="font"
27      type="font/woff2"
28      href="./fonts/GT-Pressura-Mono-VF.woff2"
29    />
30    <link
31      rel="preload"
32      as="font"
33      type="font/ttf"
34      href="./fonts/GT-Pressura-VF-Mini.ttf"
35    />
36    <link
37      rel="preload"
38      as="font"
39      type="font/woff2"
40      href="./fonts/GT-Pressura-VF-Mini.woff2"
41    />
42    <link
43      rel="preload"
44      as="fetch"
45      type="application/json"
46      crossorigin="anonymous"
47      href="./animations/loader.json"
48    /> 
49    
49<script>
50      document.documentElement.className +=
51        "ontouchstart" in document.documentElement ? " touch" : " no-touch";
52    </script>
52
53  -->
54
55    <link rel="stylesheet" href="/index.a4c263fa.css">
56
57    <!-- Favicon -->
58    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.92595565.png">
59    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.32128860.png">
60    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.1c6cfe22.png">
61    <link rel="mask-icon" href="/safari-pinned-tab.d85ebaa8.svg" color="#FF3500">
62    <meta name="msapplication-TileColor" content="#FF3500">
63    <meta name="theme-color" content="#FF3500">
64
65    <!-- FB OG Tags -->
66    <meta property="og:url" content="https://www.gt-america.com">
67    <meta property="og:type" content="article">
68    <meta property="og:title" content="GT America Intl Typeface">
69    <meta property="og:description" content="GT America Intl connects two centuries of typographic genres, combining 19th century American Gothic and 20th century European Grotesk styles. Now supporting five new writing systems.">
70    <meta property="og:image" content="https://www.gt-america.com/images/gt-america-sharing.png">
71    <meta property="og:image:width" content="1200">
72    <meta property="og:image:height" content="630">
73
74    <!-- Twitter & Slack Tags -->
75    <meta name="twitter:card" content="summary_large_image">
76    <meta name="twitter:site" content="@grillitype">
77    <meta name="twitter:creator" content="@grillitype">
78    <meta name="twitter:title" content="GT America Intl Typeface">
79    <meta name="twitter:description" content="GT America Intl connects two centuries of typographic genres, combining 19th century American Gothic and 20th century European Grotesk styles. Now supporting five new writing systems.">
80    <meta name="twitter:image" content="https://www.gt-america.com/images/gt-america-sharing.png">
81
82    <!-- Google tag (gtag.js) -->
vendor: 71 bytes, lines 82-83
82
83    <script async="" src="https://www.googletagmanager.com/gtag/js?id=
83G-1CH2EWV079
vendor: 16 bytes, lines 83-84
83"></script>
84    
84<script>
vendor: 134 bytes, lines 84-89
84window.dataLayer = window.dataLayer || [];
85function gtag() {
86    dataLayer.push(arguments);
87}
88gtag("js", new Date());
89gtag("config", "
89G-1CH2EWV079
vendor: 5 bytes, lines 89-90
89");
90
91</script>
91
92
93    <!--
94     *******************************************************************************
95
96         .oOOOOOOOo         OOO OOO OOO OOO  OOOOOOOOOOOOO
97        OOO"   `"OOO        """ OOO OOO """       OOO
98       oOO"          OO oOO OOO OOO OOO OOO       OOO "OO|   |OO:OOOoOOOOo.  .oOOOOOo
99       OOO   OOOOOOO OOOP"" OOO OOO OOO OOO       OOO  7OO.  OOO OOO^  "OOOp|OO""""OOO
100       oOOo      OOO OOO    OOO OOO OOO OOO       OOO   1OO OOO  OOO    OOOp|OOOOOOOOO
101        oOOOy,,yOOOO OOO    OOO OOO OOO OOO       OOO    OOOOO   OOO:,,yOOO "OOO,,,ooy
102         ""OOOOO`'OO OOO    OOO OOO OOO OOO       OOO     OOO    OOO"OOOO"    "OOOOO^
103                                                       yyOOO`    OOO
104                                                       "OOP      OOO
105
106       *******************************************************************************
107
108       GT America by Noël Leu and many collaborators
109       For Minisite design, development, animations, copywriting credits, see Information section
110       Please don’t rip our typefaces they take a lot of work kbaithx
111
112       *******************************************************************************
113-->
114  </head>
115  <body class="bg-white text-blue antialiased selection:bg-red selection:text-white">
116    <header data-component="mobile-scrolly-header" class="fixed w-full p-3 md:p-4 md:left-0 md:right-4 h-50px text-md md:text-base z-10">
117  <div class="flex justify-between" data-component="nav-colour-switcher">
118    <h1 class="text-[color:var(--color)]">GT America Intl</h1>
119    <div class="">
120      <a href="https://www.grillitype.com/free-trial-fonts" class="md:hidden mr-5 text-[color:var(--color)] hover:text-[color:var(--color-hover)]"><span class="mr-2">↑</span>Trials</a>
121      <a href="https://www.grillitype.com/typeface/gt-america-intl-collection" class="md:hidden mr-5 text-[color:var(--color)] hover:text-[color:var(--color-hover)]"><span class="mr-2">↗</span>Buy</a>
122      <button data-component="tt-toggle" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)]">
123        <span class="md:hidden"><span class="mr-2">↓</span>Test</span>
124        <span class="hidden md:flex nav-item-typetester"><span class="hidden md:flex mr-2">↓</span>Type Tester</span>
125      </button>
126    </div>
127  </div>
128</header>
129
130<nav data-component="" class="hidden md:block section-nav text-md md:text-base">
131  <span data-component="sticky-nav-item" data-nav-section-target="concept" data-index="0" class="sticky-nav-item absolute top-0 block w-1 pointer-events-none whitespace-nowrap z-10" style="--height: 3000px; --inner-top: 800px">
132  <button data-component="nav-colour-switcher" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] pl-4 sticky pointer-events-auto">
133    <span class="inline-block"></span>Concept
134  </button>
135</span>
136
137  <span data-component="sticky-nav-item" data-nav-section-target="languages" data-index="1" class="sticky-nav-item absolute top-0 block w-1 pointer-events-none whitespace-nowrap z-10" style="--height: 3000px; --inner-top: 800px">
138  <button data-component="nav-colour-switcher" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] pl-4 sticky pointer-events-auto">
139    <span class="inline-block"></span>Languages
140  </button>
141</span>
142
143  <span data-component="sticky-nav-item" data-nav-section-target="design" data-index="2" class="sticky-nav-item absolute top-0 block w-1 pointer-events-none whitespace-nowrap z-10" style="--height: 3000px; --inner-top: 800px">
144  <button data-component="nav-colour-switcher" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] pl-4 sticky pointer-events-auto">
145    <span class="inline-block"></span>Design
146  </button>
147</span>
148
149  <span data-component="sticky-nav-item" data-nav-section-target="information" data-index="3" class="sticky-nav-item absolute top-0 block w-1 pointer-events-none whitespace-nowrap z-10" style="--height: 3000px; --inner-top: 800px">
150  <button data-component="nav-colour-switcher" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] pl-4 sticky pointer-events-auto">
151    <span class="inline-block"></span>Information
152  </button>
153</span>
154
155  <div class="hidden md:flex fixed bottom-4 left-4 flex-row mt-5 nav-reveal-left" data-component="nav-colour-switcher">
156    <a href="https://www.grillitype.com/free-trial-fonts" class="mr-4 text-[color:var(--color)] hover:text-[color:var(--color-hover)] z-10"><span class="mr-2">↑</span>Trials</a>
157    <a href="https://www.grillitype.com/typeface/gt-america-intl-collection" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] z-10"><span class="mr-2">↗</span>Buy</a>
158  </div>
159</nav>
160
161
162    <!--LOADING SCREEN-->
163    <div id="loader-section" class="fixed top-0 flex w-full h-full overflow-hidden bg-transparent text-blue">
164  <div class="flex h-screen w-screen justify-center">
165    <!-- <lottie-player
166      data-component="lottie-player"
167      class="w-[70vw]"
168      data-src="loader.json"
169    ></lottie-player> -->
170    <div class="absolute text-md md:text-base font-loader tracking-normal bottom-3 md:top-4">
171      Loading data. Please wait. Thank you.
172    </div>
173  </div>
174</div>
175
176
177    <!--TYPETESTER-->
178    <div class="bg-white fixed max-w-full tt z-10 top-0 left-0 h-full overflow-y-scroll text-blue">
179  <nav class="sticky md:p-4 z-50 top-0 left-0 right-0 text-md md:text-base">
180  <div class="flex justify-between">
181    <div>
182      <h3 class="hidden md:flex md:pl-[12px]">Type Tester</h3>
183    </div>
184    <div class="">
185      <button data-component="tt-close">
186        <span class="mr-2">↓</span>Close
187      </button>
188    </div>
189  </div>
190</nav>
191
192  <!-- Typetester Overlay Container -->
193
194  <div class="flex flex-col text-blue z-50">
195    <!-- Typetester Sample -->
196<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
197  <!-- Partial Width Content Area With Section Nav -->
198  <!-- Section Nav Area -->
199<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="latin">
200  <!-- Select Script-->
201  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
202    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
203      
204        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en" selected="selected">
205          Latin
206        </option>
207      
208        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
209          Cyrillic
210        </option>
211      
212        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
213          Greek
214        </option>
215      
216        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
217          Vietnamese
218        </option>
219      
220        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
221          Arabic
222        </option>
223      
224        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
225          Devanagari
226        </option>
227      
228        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
229          Hebrew
230        </option>
231      
232        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
233          Korean
234        </option>
235      
236        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
237          Thai
238        </option>
239      </select>
240  </div>
241
242  <!-- Latin: Proportional / Mono Option -->
243  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
244    <div class="text-blue hover:text-red pt-1 w-[120px]">
245  <!-- I'm sure theres a better way of applying this attribute conditionally -->
246  
247    <input type="radio" checked="" id="sample-1_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
248  <label class="nav-radio-label hover:cursor-pointer" for="sample-1_prop-mono_proportional">Proportional</label>
249</div>
250
251    <div class="text-blue hover:text-red pt-1 w-[120px]">
252  <!-- I'm sure theres a better way of applying this attribute conditionally -->
253  
254    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
255    <input type="radio" id="sample-1_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
256  <label class="nav-radio-label hover:cursor-pointer" for="sample-1_prop-mono_mono">Monospaced</label>
257</div>
258
259  </fieldset>
260
261  <!-- Latin: Upright / Italic Option -->
262  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
263    <div class="text-blue hover:text-red pt-1 w-[120px]">
264  <!-- I'm sure theres a better way of applying this attribute conditionally -->
265  
266    <input type="radio" checked="" id="sample-1_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
267  <label class="nav-radio-label hover:cursor-pointer" for="sample-1_upright-ital_upright">Upright</label>
268</div>
269
270    <div class="text-blue hover:text-red pt-1 w-[120px]">
271  <!-- I'm sure theres a better way of applying this attribute conditionally -->
272  
273    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
274    <input type="radio" id="sample-1_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
275  <label class="nav-radio-label hover:cursor-pointer" for="sample-1_upright-ital_italic">Italic</label>
276</div>
277
278  </fieldset>
279
280  <!-- Latin: Default / Alternatives Option -->
281  <!-- Currently Disabled, Too Many Options Syndrome -->
282  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
283    <include src="source/html-includes/radio-button.html">
284      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
285      "default", "label": "Default", "checked": true, "namePrefix": "sample-1" }
286    </include>
287    <include src="source/html-includes/radio-button.html">
288      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
289      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
290      "sample-1" }
291    </include>
292  </fieldset> -->
293
294  <!-- Thai: Looped / Loopless Option -->
295  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
296    <div class="text-blue hover:text-red pt-1 w-[120px]">
297  <!-- I'm sure theres a better way of applying this attribute conditionally -->
298  
299    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
300    <input type="radio" id="sample-1_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
301  <label class="nav-radio-label hover:cursor-pointer" for="sample-1_looped_looped">Looped</label>
302</div>
303
304    <div class="text-blue hover:text-red pt-1 w-[120px]">
305  <!-- I'm sure theres a better way of applying this attribute conditionally -->
306  
307    <input type="radio" checked="" id="sample-1_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
308  <label class="nav-radio-label hover:cursor-pointer" for="sample-1_looped_loopless">Loopless</label>
309</div>
310
311  </fieldset>
312
313  <!-- Latin Dropdown: Variable + all 84 styles -->
314  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
315    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
316      <option value="variable" selected="selected">Variable</option>
317      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
318        Compressed Ultra Light
319      </option>
320      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
321        Compressed Thin
322      </option>
323      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
324        Compressed Light
325      </option>
326      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
327        Compressed Regular
328      </option>
329      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
330        Compressed Medium
331      </option>
332      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
333        Compressed Bold
334      </option>
335      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
336        Compressed Black
337      </option>
338      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
339        Condensed Ultra Light
340      </option>
341      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
342        Condensed Thin
343      </option>
344      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
345        Condensed Light
346      </option>
347      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
348        Condensed Regular
349      </option>
350      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
351        Condensed Medium
352      </option>
353      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
354        Condensed Bold
355      </option>
356      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
357        Condensed Black
358      </option>
359      <option value="standard ultra light" data-wght="100" data-wdth="100">
360        Standard Ultra Light
361      </option>
362      <option value="standard thin" data-wght="200" data-wdth="100">
363        Standard Thin
364      </option>
365      <option value="standard light" data-wght="300" data-wdth="100">
366        Standard Light
367      </option>
368      <option value="standard regular" data-wght="400" data-wdth="100">
369        Standard Regular
370      </option>
371      <option value="standard medium" data-wght="500" data-wdth="100">
372        Standard Medium
373      </option>
374      <option value="standard bold" data-wght="700" data-wdth="100">
375        Standard Bold
376      </option>
377      <option value="standard black" data-wght="900" data-wdth="100">
378        Standard Black
379      </option>
380      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
381        Extended Ultra Light
382      </option>
383      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
384        Extended Thin
385      </option>
386      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
387        Extended Light
388      </option>
389      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
390        Extended Regular
391      </option>
392      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
393        Extended Medium
394      </option>
395      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
396        Extended Bold
397      </option>
398      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
399        Extended Black
400      </option>
401      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
402        Expanded Ultra Light
403      </option>
404      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
405        Expanded Thin
406      </option>
407      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
408        Expanded Light
409      </option>
410      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
411        Expanded Regular
412      </option>
413      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
414        Expanded Medium
415      </option>
416      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
417        Expanded Bold
418      </option>
419      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
420        Expanded Black
421      </option>
422    </select>
423  </div>
424
425  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
426  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
427    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
428      <option value="variable" selected="selected">Variable</option>
429      <option value="looped ultra light" data-wght="100">Ultra Light</option>
430      <option value="looped thin" data-wght="200">Thin</option>
431      <option value="looped light" data-wght="300">Light</option>
432      <option value="looped regular" data-wght="400">Regular</option>
433      <option value="looped medium" data-wght="500">Medium</option>
434      <option value="looped bold" data-wght="700">Bold</option>
435      <option value="looped black" data-wght="900">Black</option>
436    </select>
437  </div>
438
439  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
440  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
441    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
442      <option value="variable" selected="selected">Variable</option>
443      <option value="ultra light" data-wght="100">Ultra Light</option>
444      <option value="thin" data-wght="200">Thin</option>
445      <option value="light" data-wght="300">Light</option>
446      <option value="regular" data-wght="400">Regular</option>
447      <option value="medium" data-wght="500">Medium</option>
448      <option value="bold" data-wght="700">Bold</option>
449      <option value="black" data-wght="900">Black</option>
450    </select>
451  </div>
452
453  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
454    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
455      <option value="variable" selected="selected">Variable</option>
456      <option value="ultra light" data-wght="100">Ultra Light</option>
457      <option value="thin" data-wght="200">Thin</option>
458      <option value="light" data-wght="300">Light</option>
459      <option value="regular" data-wght="400">Regular</option>
460      <option value="medium" data-wght="500">Medium</option>
461      <option value="bold" data-wght="700">Bold</option>
462      <option value="black" data-wght="900">Black</option>
463    </select>
464  </div>
465
466  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
467    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
468      <option value="variable" selected="selected">Variable</option>
469      <option value="ultra light" data-wght="100">Ultra Light</option>
470      <option value="thin" data-wght="200">Thin</option>
471      <option value="light" data-wght="300">Light</option>
472      <option value="regular" data-wght="400">Regular</option>
473      <option value="medium" data-wght="500">Medium</option>
474      <option value="bold" data-wght="700">Bold</option>
475      <option value="black" data-wght="900">Black</option>
476    </select>
477  </div>
478
479  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
480    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
481      <option value="variable" selected="selected">Variable</option>
482      <option value="ultra light" data-wght="100">Ultra Light</option>
483      <option value="thin" data-wght="200">Thin</option>
484      <option value="light" data-wght="300">Light</option>
485      <option value="regular" data-wght="400">Regular</option>
486      <option value="medium" data-wght="500">Medium</option>
487      <option value="bold" data-wght="700">Bold</option>
488      <option value="black" data-wght="900">Black</option>
489    </select>
490  </div>
491
492  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
493  <!-- Thai Slider: Weight (100–900) -->
494  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
495  <div data-component="tt__control-area">
496    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
497      <div class="flex flex-row justify-between">
498        <div class="">Width</div>
499        <div data-component="tt__wdth-value"></div>
500      </div>
501      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="50" class="typetester-slider w-full" id="typetesterWdthRange">
502    </div>
503    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
504      <div class="flex flex-row justify-between">
505        <div class="">Weight</div>
506        <div data-component="tt__wght-value"></div>
507      </div>
508      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange">
509    </div>
510  </div>
511</form>
512
513  <!-- Main Content Area -->
514  <div class="md:ml-[48px] flex w-full justify-center align-middle">
515    <div data-component="tt__sample-text" class="w-full self-center tt-sample tt-sample-size-l text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="en" data-size="l"></div>
516  </div>
517</section>
518
519
520    <!-- Typetester Sample -->
521<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
522  <!-- Partial Width Content Area With Section Nav -->
523  <!-- Section Nav Area -->
524<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="latin">
525  <!-- Select Script-->
526  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
527    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
528      
529        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en" selected="selected">
530          Latin
531        </option>
532      
533        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
534          Cyrillic
535        </option>
536      
537        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
538          Greek
539        </option>
540      
541        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
542          Vietnamese
543        </option>
544      
545        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
546          Arabic
547        </option>
548      
549        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
550          Devanagari
551        </option>
552      
553        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
554          Hebrew
555        </option>
556      
557        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
558          Korean
559        </option>
560      
561        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
562          Thai
563        </option>
564      </select>
565  </div>
566
567  <!-- Latin: Proportional / Mono Option -->
568  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
569    <div class="text-blue hover:text-red pt-1 w-[120px]">
570  <!-- I'm sure theres a better way of applying this attribute conditionally -->
571  
572    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
573    <input type="radio" id="sample-2_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
574  <label class="nav-radio-label hover:cursor-pointer" for="sample-2_prop-mono_proportional">Proportional</label>
575</div>
576
577    <div class="text-blue hover:text-red pt-1 w-[120px]">
578  <!-- I'm sure theres a better way of applying this attribute conditionally -->
579  
580    <input type="radio" checked="" id="sample-2_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
581  <label class="nav-radio-label hover:cursor-pointer" for="sample-2_prop-mono_mono">Monospaced</label>
582</div>
583
584  </fieldset>
585
586  <!-- Latin: Upright / Italic Option -->
587  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
588    <div class="text-blue hover:text-red pt-1 w-[120px]">
589  <!-- I'm sure theres a better way of applying this attribute conditionally -->
590  
591    <input type="radio" checked="" id="sample-2_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
592  <label class="nav-radio-label hover:cursor-pointer" for="sample-2_upright-ital_upright">Upright</label>
593</div>
594
595    <div class="text-blue hover:text-red pt-1 w-[120px]">
596  <!-- I'm sure theres a better way of applying this attribute conditionally -->
597  
598    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
599    <input type="radio" id="sample-2_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
600  <label class="nav-radio-label hover:cursor-pointer" for="sample-2_upright-ital_italic">Italic</label>
601</div>
602
603  </fieldset>
604
605  <!-- Latin: Default / Alternatives Option -->
606  <!-- Currently Disabled, Too Many Options Syndrome -->
607  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
608    <include src="source/html-includes/radio-button.html">
609      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
610      "default", "label": "Default", "checked": true, "namePrefix": "sample-2" }
611    </include>
612    <include src="source/html-includes/radio-button.html">
613      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
614      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
615      "sample-2" }
616    </include>
617  </fieldset> -->
618
619  <!-- Thai: Looped / Loopless Option -->
620  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
621    <div class="text-blue hover:text-red pt-1 w-[120px]">
622  <!-- I'm sure theres a better way of applying this attribute conditionally -->
623  
624    <input type="radio" checked="" id="sample-2_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
625  <label class="nav-radio-label hover:cursor-pointer" for="sample-2_looped_looped">Looped</label>
626</div>
627
628    <div class="text-blue hover:text-red pt-1 w-[120px]">
629  <!-- I'm sure theres a better way of applying this attribute conditionally -->
630  
631    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
632    <input type="radio" id="sample-2_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
633  <label class="nav-radio-label hover:cursor-pointer" for="sample-2_looped_loopless">Loopless</label>
634</div>
635
636  </fieldset>
637
638  <!-- Latin Dropdown: Variable + all 84 styles -->
639  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
640    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
641      <option value="variable" selected="selected">Variable</option>
642      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
643        Compressed Ultra Light
644      </option>
645      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
646        Compressed Thin
647      </option>
648      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
649        Compressed Light
650      </option>
651      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
652        Compressed Regular
653      </option>
654      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
655        Compressed Medium
656      </option>
657      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
658        Compressed Bold
659      </option>
660      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
661        Compressed Black
662      </option>
663      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
664        Condensed Ultra Light
665      </option>
666      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
667        Condensed Thin
668      </option>
669      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
670        Condensed Light
671      </option>
672      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
673        Condensed Regular
674      </option>
675      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
676        Condensed Medium
677      </option>
678      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
679        Condensed Bold
680      </option>
681      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
682        Condensed Black
683      </option>
684      <option value="standard ultra light" data-wght="100" data-wdth="100">
685        Standard Ultra Light
686      </option>
687      <option value="standard thin" data-wght="200" data-wdth="100">
688        Standard Thin
689      </option>
690      <option value="standard light" data-wght="300" data-wdth="100">
691        Standard Light
692      </option>
693      <option value="standard regular" data-wght="400" data-wdth="100">
694        Standard Regular
695      </option>
696      <option value="standard medium" data-wght="500" data-wdth="100">
697        Standard Medium
698      </option>
699      <option value="standard bold" data-wght="700" data-wdth="100">
700        Standard Bold
701      </option>
702      <option value="standard black" data-wght="900" data-wdth="100">
703        Standard Black
704      </option>
705      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
706        Extended Ultra Light
707      </option>
708      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
709        Extended Thin
710      </option>
711      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
712        Extended Light
713      </option>
714      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
715        Extended Regular
716      </option>
717      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
718        Extended Medium
719      </option>
720      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
721        Extended Bold
722      </option>
723      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
724        Extended Black
725      </option>
726      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
727        Expanded Ultra Light
728      </option>
729      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
730        Expanded Thin
731      </option>
732      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
733        Expanded Light
734      </option>
735      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
736        Expanded Regular
737      </option>
738      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
739        Expanded Medium
740      </option>
741      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
742        Expanded Bold
743      </option>
744      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
745        Expanded Black
746      </option>
747    </select>
748  </div>
749
750  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
751  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
752    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
753      <option value="variable" selected="selected">Variable</option>
754      <option value="looped ultra light" data-wght="100">Ultra Light</option>
755      <option value="looped thin" data-wght="200">Thin</option>
756      <option value="looped light" data-wght="300">Light</option>
757      <option value="looped regular" data-wght="400">Regular</option>
758      <option value="looped medium" data-wght="500">Medium</option>
759      <option value="looped bold" data-wght="700">Bold</option>
760      <option value="looped black" data-wght="900">Black</option>
761    </select>
762  </div>
763
764  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
765  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
766    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
767      <option value="variable" selected="selected">Variable</option>
768      <option value="ultra light" data-wght="100">Ultra Light</option>
769      <option value="thin" data-wght="200">Thin</option>
770      <option value="light" data-wght="300">Light</option>
771      <option value="regular" data-wght="400">Regular</option>
772      <option value="medium" data-wght="500">Medium</option>
773      <option value="bold" data-wght="700">Bold</option>
774      <option value="black" data-wght="900">Black</option>
775    </select>
776  </div>
777
778  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
779    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
780      <option value="variable" selected="selected">Variable</option>
781      <option value="ultra light" data-wght="100">Ultra Light</option>
782      <option value="thin" data-wght="200">Thin</option>
783      <option value="light" data-wght="300">Light</option>
784      <option value="regular" data-wght="400">Regular</option>
785      <option value="medium" data-wght="500">Medium</option>
786      <option value="bold" data-wght="700">Bold</option>
787      <option value="black" data-wght="900">Black</option>
788    </select>
789  </div>
790
791  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
792    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
793      <option value="variable" selected="selected">Variable</option>
794      <option value="ultra light" data-wght="100">Ultra Light</option>
795      <option value="thin" data-wght="200">Thin</option>
796      <option value="light" data-wght="300">Light</option>
797      <option value="regular" data-wght="400">Regular</option>
798      <option value="medium" data-wght="500">Medium</option>
799      <option value="bold" data-wght="700">Bold</option>
800      <option value="black" data-wght="900">Black</option>
801    </select>
802  </div>
803
804  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
805    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
806      <option value="variable" selected="selected">Variable</option>
807      <option value="ultra light" data-wght="100">Ultra Light</option>
808      <option value="thin" data-wght="200">Thin</option>
809      <option value="light" data-wght="300">Light</option>
810      <option value="regular" data-wght="400">Regular</option>
811      <option value="medium" data-wght="500">Medium</option>
812      <option value="bold" data-wght="700">Bold</option>
813      <option value="black" data-wght="900">Black</option>
814    </select>
815  </div>
816
817  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
818  <!-- Thai Slider: Weight (100–900) -->
819  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
820  <div data-component="tt__control-area">
821    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
822      <div class="flex flex-row justify-between">
823        <div class="">Width</div>
824        <div data-component="tt__wdth-value"></div>
825      </div>
826      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
827    </div>
828    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
829      <div class="flex flex-row justify-between">
830        <div class="">Weight</div>
831        <div data-component="tt__wght-value"></div>
832      </div>
833      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="700" class="typetester-slider w-full" id="typetesterWghtRange">
834    </div>
835  </div>
836</form>
837
838  <!-- Main Content Area -->
839  <div class="md:ml-[48px] flex w-full justify-center align-middle">
840    <div data-component="tt__sample-text" class="w-full self-center tt-sample tt-sample-size-m text-red font-std-black outline-none transition-all" contenteditable="true" spellcheck="false" lang="en" data-size="m">
841      Test
842    </div>
843  </div>
844</section>
845
846
847    <!-- Typetester Sample -->
848<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
849  <!-- Partial Width Content Area With Section Nav -->
850  <!-- Section Nav Area -->
851<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="latin">
852  <!-- Select Script-->
853  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
854    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
855      
856        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en" selected="selected">
857          Latin
858        </option>
859      
860        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
861          Cyrillic
862        </option>
863      
864        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
865          Greek
866        </option>
867      
868        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
869          Vietnamese
870        </option>
871      
872        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
873          Arabic
874        </option>
875      
876        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
877          Devanagari
878        </option>
879      
880        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
881          Hebrew
882        </option>
883      
884        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
885          Korean
886        </option>
887      
888        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
889          Thai
890        </option>
891      </select>
892  </div>
893
894  <!-- Latin: Proportional / Mono Option -->
895  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
896    <div class="text-blue hover:text-red pt-1 w-[120px]">
897  <!-- I'm sure theres a better way of applying this attribute conditionally -->
898  
899    <input type="radio" checked="" id="sample-3_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
900  <label class="nav-radio-label hover:cursor-pointer" for="sample-3_prop-mono_proportional">Proportional</label>
901</div>
902
903    <div class="text-blue hover:text-red pt-1 w-[120px]">
904  <!-- I'm sure theres a better way of applying this attribute conditionally -->
905  
906    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
907    <input type="radio" id="sample-3_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
908  <label class="nav-radio-label hover:cursor-pointer" for="sample-3_prop-mono_mono">Monospaced</label>
909</div>
910
911  </fieldset>
912
913  <!-- Latin: Upright / Italic Option -->
914  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
915    <div class="text-blue hover:text-red pt-1 w-[120px]">
916  <!-- I'm sure theres a better way of applying this attribute conditionally -->
917  
918    <input type="radio" checked="" id="sample-3_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
919  <label class="nav-radio-label hover:cursor-pointer" for="sample-3_upright-ital_upright">Upright</label>
920</div>
921
922    <div class="text-blue hover:text-red pt-1 w-[120px]">
923  <!-- I'm sure theres a better way of applying this attribute conditionally -->
924  
925    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
926    <input type="radio" id="sample-3_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
927  <label class="nav-radio-label hover:cursor-pointer" for="sample-3_upright-ital_italic">Italic</label>
928</div>
929
930  </fieldset>
931
932  <!-- Latin: Default / Alternatives Option -->
933  <!-- Currently Disabled, Too Many Options Syndrome -->
934  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
935    <include src="source/html-includes/radio-button.html">
936      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
937      "default", "label": "Default", "checked": true, "namePrefix": "sample-3" }
938    </include>
939    <include src="source/html-includes/radio-button.html">
940      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
941      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
942      "sample-3" }
943    </include>
944  </fieldset> -->
945
946  <!-- Thai: Looped / Loopless Option -->
947  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
948    <div class="text-blue hover:text-red pt-1 w-[120px]">
949  <!-- I'm sure theres a better way of applying this attribute conditionally -->
950  
951    <input type="radio" checked="" id="sample-3_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
952  <label class="nav-radio-label hover:cursor-pointer" for="sample-3_looped_looped">Looped</label>
953</div>
954
955    <div class="text-blue hover:text-red pt-1 w-[120px]">
956  <!-- I'm sure theres a better way of applying this attribute conditionally -->
957  
958    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
959    <input type="radio" id="sample-3_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
960  <label class="nav-radio-label hover:cursor-pointer" for="sample-3_looped_loopless">Loopless</label>
961</div>
962
963  </fieldset>
964
965  <!-- Latin Dropdown: Variable + all 84 styles -->
966  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
967    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
968      <option value="variable" selected="selected">Variable</option>
969      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
970        Compressed Ultra Light
971      </option>
972      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
973        Compressed Thin
974      </option>
975      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
976        Compressed Light
977      </option>
978      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
979        Compressed Regular
980      </option>
981      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
982        Compressed Medium
983      </option>
984      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
985        Compressed Bold
986      </option>
987      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
988        Compressed Black
989      </option>
990      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
991        Condensed Ultra Light
992      </option>
993      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
994        Condensed Thin
995      </option>
996      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
997        Condensed Light
998      </option>
999      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
1000        Condensed Regular
1001      </option>
1002      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
1003        Condensed Medium
1004      </option>
1005      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
1006        Condensed Bold
1007      </option>
1008      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
1009        Condensed Black
1010      </option>
1011      <option value="standard ultra light" data-wght="100" data-wdth="100">
1012        Standard Ultra Light
1013      </option>
1014      <option value="standard thin" data-wght="200" data-wdth="100">
1015        Standard Thin
1016      </option>
1017      <option value="standard light" data-wght="300" data-wdth="100">
1018        Standard Light
1019      </option>
1020      <option value="standard regular" data-wght="400" data-wdth="100">
1021        Standard Regular
1022      </option>
1023      <option value="standard medium" data-wght="500" data-wdth="100">
1024        Standard Medium
1025      </option>
1026      <option value="standard bold" data-wght="700" data-wdth="100">
1027        Standard Bold
1028      </option>
1029      <option value="standard black" data-wght="900" data-wdth="100">
1030        Standard Black
1031      </option>
1032      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
1033        Extended Ultra Light
1034      </option>
1035      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
1036        Extended Thin
1037      </option>
1038      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
1039        Extended Light
1040      </option>
1041      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
1042        Extended Regular
1043      </option>
1044      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
1045        Extended Medium
1046      </option>
1047      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
1048        Extended Bold
1049      </option>
1050      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
1051        Extended Black
1052      </option>
1053      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
1054        Expanded Ultra Light
1055      </option>
1056      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
1057        Expanded Thin
1058      </option>
1059      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
1060        Expanded Light
1061      </option>
1062      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
1063        Expanded Regular
1064      </option>
1065      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
1066        Expanded Medium
1067      </option>
1068      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
1069        Expanded Bold
1070      </option>
1071      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
1072        Expanded Black
1073      </option>
1074    </select>
1075  </div>
1076
1077  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
1078  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
1079    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1080      <option value="variable" selected="selected">Variable</option>
1081      <option value="looped ultra light" data-wght="100">Ultra Light</option>
1082      <option value="looped thin" data-wght="200">Thin</option>
1083      <option value="looped light" data-wght="300">Light</option>
1084      <option value="looped regular" data-wght="400">Regular</option>
1085      <option value="looped medium" data-wght="500">Medium</option>
1086      <option value="looped bold" data-wght="700">Bold</option>
1087      <option value="looped black" data-wght="900">Black</option>
1088    </select>
1089  </div>
1090
1091  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
1092  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
1093    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1094      <option value="variable" selected="selected">Variable</option>
1095      <option value="ultra light" data-wght="100">Ultra Light</option>
1096      <option value="thin" data-wght="200">Thin</option>
1097      <option value="light" data-wght="300">Light</option>
1098      <option value="regular" data-wght="400">Regular</option>
1099      <option value="medium" data-wght="500">Medium</option>
1100      <option value="bold" data-wght="700">Bold</option>
1101      <option value="black" data-wght="900">Black</option>
1102    </select>
1103  </div>
1104
1105  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
1106    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1107      <option value="variable" selected="selected">Variable</option>
1108      <option value="ultra light" data-wght="100">Ultra Light</option>
1109      <option value="thin" data-wght="200">Thin</option>
1110      <option value="light" data-wght="300">Light</option>
1111      <option value="regular" data-wght="400">Regular</option>
1112      <option value="medium" data-wght="500">Medium</option>
1113      <option value="bold" data-wght="700">Bold</option>
1114      <option value="black" data-wght="900">Black</option>
1115    </select>
1116  </div>
1117
1118  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
1119    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1120      <option value="variable" selected="selected">Variable</option>
1121      <option value="ultra light" data-wght="100">Ultra Light</option>
1122      <option value="thin" data-wght="200">Thin</option>
1123      <option value="light" data-wght="300">Light</option>
1124      <option value="regular" data-wght="400">Regular</option>
1125      <option value="medium" data-wght="500">Medium</option>
1126      <option value="bold" data-wght="700">Bold</option>
1127      <option value="black" data-wght="900">Black</option>
1128    </select>
1129  </div>
1130
1131  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
1132    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1133      <option value="variable" selected="selected">Variable</option>
1134      <option value="ultra light" data-wght="100">Ultra Light</option>
1135      <option value="thin" data-wght="200">Thin</option>
1136      <option value="light" data-wght="300">Light</option>
1137      <option value="regular" data-wght="400">Regular</option>
1138      <option value="medium" data-wght="500">Medium</option>
1139      <option value="bold" data-wght="700">Bold</option>
1140      <option value="black" data-wght="900">Black</option>
1141    </select>
1142  </div>
1143
1144  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
1145  <!-- Thai Slider: Weight (100–900) -->
1146  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
1147  <div data-component="tt__control-area">
1148    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
1149      <div class="flex flex-row justify-between">
1150        <div class="">Width</div>
1151        <div data-component="tt__wdth-value"></div>
1152      </div>
1153      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
1154    </div>
1155    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
1156      <div class="flex flex-row justify-between">
1157        <div class="">Weight</div>
1158        <div data-component="tt__wght-value"></div>
1159      </div>
1160      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange">
1161    </div>
1162  </div>
1163</form>
1164
1165  <!-- Main Content Area -->
1166  <div class="md:ml-[48px] flex w-full justify-center align-middle">
1167    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="en" data-size="s"></div>
1168  </div>
1169</section>
1170
1171
1172    <!-- Typetester Sample -->
1173<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
1174  <!-- Partial Width Content Area With Section Nav -->
1175  <!-- Section Nav Area -->
1176<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="cyrillic">
1177  <!-- Select Script-->
1178  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
1179    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
1180      
1181        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
1182          Latin
1183        </option>
1184      
1185        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk" selected="selected">
1186          Cyrillic
1187        </option>
1188      
1189        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
1190          Greek
1191        </option>
1192      
1193        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
1194          Vietnamese
1195        </option>
1196      
1197        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
1198          Arabic
1199        </option>
1200      
1201        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
1202          Devanagari
1203        </option>
1204      
1205        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
1206          Hebrew
1207        </option>
1208      
1209        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
1210          Korean
1211        </option>
1212      
1213        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
1214          Thai
1215        </option>
1216      </select>
1217  </div>
1218
1219  <!-- Latin: Proportional / Mono Option -->
1220  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
1221    <div class="text-blue hover:text-red pt-1 w-[120px]">
1222  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1223  
1224    <input type="radio" checked="" id="sample-4_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
1225  <label class="nav-radio-label hover:cursor-pointer" for="sample-4_prop-mono_proportional">Proportional</label>
1226</div>
1227
1228    <div class="text-blue hover:text-red pt-1 w-[120px]">
1229  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1230  
1231    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
1232    <input type="radio" id="sample-4_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
1233  <label class="nav-radio-label hover:cursor-pointer" for="sample-4_prop-mono_mono">Monospaced</label>
1234</div>
1235
1236  </fieldset>
1237
1238  <!-- Latin: Upright / Italic Option -->
1239  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
1240    <div class="text-blue hover:text-red pt-1 w-[120px]">
1241  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1242  
1243    <input type="radio" checked="" id="sample-4_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
1244  <label class="nav-radio-label hover:cursor-pointer" for="sample-4_upright-ital_upright">Upright</label>
1245</div>
1246
1247    <div class="text-blue hover:text-red pt-1 w-[120px]">
1248  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1249  
1250    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
1251    <input type="radio" id="sample-4_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
1252  <label class="nav-radio-label hover:cursor-pointer" for="sample-4_upright-ital_italic">Italic</label>
1253</div>
1254
1255  </fieldset>
1256
1257  <!-- Latin: Default / Alternatives Option -->
1258  <!-- Currently Disabled, Too Many Options Syndrome -->
1259  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
1260    <include src="source/html-includes/radio-button.html">
1261      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
1262      "default", "label": "Default", "checked": true, "namePrefix": "sample-4" }
1263    </include>
1264    <include src="source/html-includes/radio-button.html">
1265      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
1266      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
1267      "sample-4" }
1268    </include>
1269  </fieldset> -->
1270
1271  <!-- Thai: Looped / Loopless Option -->
1272  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
1273    <div class="text-blue hover:text-red pt-1 w-[120px]">
1274  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1275  
1276    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
1277    <input type="radio" id="sample-4_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
1278  <label class="nav-radio-label hover:cursor-pointer" for="sample-4_looped_looped">Looped</label>
1279</div>
1280
1281    <div class="text-blue hover:text-red pt-1 w-[120px]">
1282  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1283  
1284    <input type="radio" checked="" id="sample-4_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
1285  <label class="nav-radio-label hover:cursor-pointer" for="sample-4_looped_loopless">Loopless</label>
1286</div>
1287
1288  </fieldset>
1289
1290  <!-- Latin Dropdown: Variable + all 84 styles -->
1291  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
1292    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
1293      <option value="variable" selected="selected">Variable</option>
1294      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
1295        Compressed Ultra Light
1296      </option>
1297      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
1298        Compressed Thin
1299      </option>
1300      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
1301        Compressed Light
1302      </option>
1303      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
1304        Compressed Regular
1305      </option>
1306      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
1307        Compressed Medium
1308      </option>
1309      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
1310        Compressed Bold
1311      </option>
1312      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
1313        Compressed Black
1314      </option>
1315      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
1316        Condensed Ultra Light
1317      </option>
1318      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
1319        Condensed Thin
1320      </option>
1321      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
1322        Condensed Light
1323      </option>
1324      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
1325        Condensed Regular
1326      </option>
1327      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
1328        Condensed Medium
1329      </option>
1330      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
1331        Condensed Bold
1332      </option>
1333      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
1334        Condensed Black
1335      </option>
1336      <option value="standard ultra light" data-wght="100" data-wdth="100">
1337        Standard Ultra Light
1338      </option>
1339      <option value="standard thin" data-wght="200" data-wdth="100">
1340        Standard Thin
1341      </option>
1342      <option value="standard light" data-wght="300" data-wdth="100">
1343        Standard Light
1344      </option>
1345      <option value="standard regular" data-wght="400" data-wdth="100">
1346        Standard Regular
1347      </option>
1348      <option value="standard medium" data-wght="500" data-wdth="100">
1349        Standard Medium
1350      </option>
1351      <option value="standard bold" data-wght="700" data-wdth="100">
1352        Standard Bold
1353      </option>
1354      <option value="standard black" data-wght="900" data-wdth="100">
1355        Standard Black
1356      </option>
1357      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
1358        Extended Ultra Light
1359      </option>
1360      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
1361        Extended Thin
1362      </option>
1363      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
1364        Extended Light
1365      </option>
1366      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
1367        Extended Regular
1368      </option>
1369      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
1370        Extended Medium
1371      </option>
1372      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
1373        Extended Bold
1374      </option>
1375      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
1376        Extended Black
1377      </option>
1378      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
1379        Expanded Ultra Light
1380      </option>
1381      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
1382        Expanded Thin
1383      </option>
1384      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
1385        Expanded Light
1386      </option>
1387      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
1388        Expanded Regular
1389      </option>
1390      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
1391        Expanded Medium
1392      </option>
1393      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
1394        Expanded Bold
1395      </option>
1396      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
1397        Expanded Black
1398      </option>
1399    </select>
1400  </div>
1401
1402  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
1403  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
1404    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1405      <option value="variable" selected="selected">Variable</option>
1406      <option value="looped ultra light" data-wght="100">Ultra Light</option>
1407      <option value="looped thin" data-wght="200">Thin</option>
1408      <option value="looped light" data-wght="300">Light</option>
1409      <option value="looped regular" data-wght="400">Regular</option>
1410      <option value="looped medium" data-wght="500">Medium</option>
1411      <option value="looped bold" data-wght="700">Bold</option>
1412      <option value="looped black" data-wght="900">Black</option>
1413    </select>
1414  </div>
1415
1416  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
1417  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
1418    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1419      <option value="variable" selected="selected">Variable</option>
1420      <option value="ultra light" data-wght="100">Ultra Light</option>
1421      <option value="thin" data-wght="200">Thin</option>
1422      <option value="light" data-wght="300">Light</option>
1423      <option value="regular" data-wght="400">Regular</option>
1424      <option value="medium" data-wght="500">Medium</option>
1425      <option value="bold" data-wght="700">Bold</option>
1426      <option value="black" data-wght="900">Black</option>
1427    </select>
1428  </div>
1429
1430  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
1431    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1432      <option value="variable" selected="selected">Variable</option>
1433      <option value="ultra light" data-wght="100">Ultra Light</option>
1434      <option value="thin" data-wght="200">Thin</option>
1435      <option value="light" data-wght="300">Light</option>
1436      <option value="regular" data-wght="400">Regular</option>
1437      <option value="medium" data-wght="500">Medium</option>
1438      <option value="bold" data-wght="700">Bold</option>
1439      <option value="black" data-wght="900">Black</option>
1440    </select>
1441  </div>
1442
1443  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
1444    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1445      <option value="variable" selected="selected">Variable</option>
1446      <option value="ultra light" data-wght="100">Ultra Light</option>
1447      <option value="thin" data-wght="200">Thin</option>
1448      <option value="light" data-wght="300">Light</option>
1449      <option value="regular" data-wght="400">Regular</option>
1450      <option value="medium" data-wght="500">Medium</option>
1451      <option value="bold" data-wght="700">Bold</option>
1452      <option value="black" data-wght="900">Black</option>
1453    </select>
1454  </div>
1455
1456  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
1457    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1458      <option value="variable" selected="selected">Variable</option>
1459      <option value="ultra light" data-wght="100">Ultra Light</option>
1460      <option value="thin" data-wght="200">Thin</option>
1461      <option value="light" data-wght="300">Light</option>
1462      <option value="regular" data-wght="400">Regular</option>
1463      <option value="medium" data-wght="500">Medium</option>
1464      <option value="bold" data-wght="700">Bold</option>
1465      <option value="black" data-wght="900">Black</option>
1466    </select>
1467  </div>
1468
1469  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
1470  <!-- Thai Slider: Weight (100–900) -->
1471  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
1472  <div data-component="tt__control-area">
1473    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
1474      <div class="flex flex-row justify-between">
1475        <div class="">Width</div>
1476        <div data-component="tt__wdth-value"></div>
1477      </div>
1478      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
1479    </div>
1480    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
1481      <div class="flex flex-row justify-between">
1482        <div class="">Weight</div>
1483        <div data-component="tt__wght-value"></div>
1484      </div>
1485      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange">
1486    </div>
1487  </div>
1488</form>
1489
1490  <!-- Main Content Area -->
1491  <div class="md:ml-[48px] flex w-full justify-center align-middle">
1492    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="uk" data-size="l"></div>
1493  </div>
1494</section>
1495
1496
1497    <!-- Typetester Sample -->
1498<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
1499  <!-- Partial Width Content Area With Section Nav -->
1500  <!-- Section Nav Area -->
1501<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="cyrillic">
1502  <!-- Select Script-->
1503  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
1504    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
1505      
1506        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
1507          Latin
1508        </option>
1509      
1510        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk" selected="selected">
1511          Cyrillic
1512        </option>
1513      
1514        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
1515          Greek
1516        </option>
1517      
1518        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
1519          Vietnamese
1520        </option>
1521      
1522        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
1523          Arabic
1524        </option>
1525      
1526        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
1527          Devanagari
1528        </option>
1529      
1530        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
1531          Hebrew
1532        </option>
1533      
1534        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
1535          Korean
1536        </option>
1537      
1538        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
1539          Thai
1540        </option>
1541      </select>
1542  </div>
1543
1544  <!-- Latin: Proportional / Mono Option -->
1545  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
1546    <div class="text-blue hover:text-red pt-1 w-[120px]">
1547  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1548  
1549    <input type="radio" checked="" id="sample-5_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
1550  <label class="nav-radio-label hover:cursor-pointer" for="sample-5_prop-mono_proportional">Proportional</label>
1551</div>
1552
1553    <div class="text-blue hover:text-red pt-1 w-[120px]">
1554  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1555  
1556    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
1557    <input type="radio" id="sample-5_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
1558  <label class="nav-radio-label hover:cursor-pointer" for="sample-5_prop-mono_mono">Monospaced</label>
1559</div>
1560
1561  </fieldset>
1562
1563  <!-- Latin: Upright / Italic Option -->
1564  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
1565    <div class="text-blue hover:text-red pt-1 w-[120px]">
1566  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1567  
1568    <input type="radio" checked="" id="sample-5_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
1569  <label class="nav-radio-label hover:cursor-pointer" for="sample-5_upright-ital_upright">Upright</label>
1570</div>
1571
1572    <div class="text-blue hover:text-red pt-1 w-[120px]">
1573  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1574  
1575    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
1576    <input type="radio" id="sample-5_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
1577  <label class="nav-radio-label hover:cursor-pointer" for="sample-5_upright-ital_italic">Italic</label>
1578</div>
1579
1580  </fieldset>
1581
1582  <!-- Latin: Default / Alternatives Option -->
1583  <!-- Currently Disabled, Too Many Options Syndrome -->
1584  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
1585    <include src="source/html-includes/radio-button.html">
1586      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
1587      "default", "label": "Default", "checked": true, "namePrefix": "sample-5" }
1588    </include>
1589    <include src="source/html-includes/radio-button.html">
1590      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
1591      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
1592      "sample-5" }
1593    </include>
1594  </fieldset> -->
1595
1596  <!-- Thai: Looped / Loopless Option -->
1597  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
1598    <div class="text-blue hover:text-red pt-1 w-[120px]">
1599  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1600  
1601    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
1602    <input type="radio" id="sample-5_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
1603  <label class="nav-radio-label hover:cursor-pointer" for="sample-5_looped_looped">Looped</label>
1604</div>
1605
1606    <div class="text-blue hover:text-red pt-1 w-[120px]">
1607  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1608  
1609    <input type="radio" checked="" id="sample-5_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
1610  <label class="nav-radio-label hover:cursor-pointer" for="sample-5_looped_loopless">Loopless</label>
1611</div>
1612
1613  </fieldset>
1614
1615  <!-- Latin Dropdown: Variable + all 84 styles -->
1616  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
1617    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
1618      <option value="variable" selected="selected">Variable</option>
1619      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
1620        Compressed Ultra Light
1621      </option>
1622      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
1623        Compressed Thin
1624      </option>
1625      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
1626        Compressed Light
1627      </option>
1628      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
1629        Compressed Regular
1630      </option>
1631      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
1632        Compressed Medium
1633      </option>
1634      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
1635        Compressed Bold
1636      </option>
1637      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
1638        Compressed Black
1639      </option>
1640      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
1641        Condensed Ultra Light
1642      </option>
1643      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
1644        Condensed Thin
1645      </option>
1646      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
1647        Condensed Light
1648      </option>
1649      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
1650        Condensed Regular
1651      </option>
1652      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
1653        Condensed Medium
1654      </option>
1655      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
1656        Condensed Bold
1657      </option>
1658      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
1659        Condensed Black
1660      </option>
1661      <option value="standard ultra light" data-wght="100" data-wdth="100">
1662        Standard Ultra Light
1663      </option>
1664      <option value="standard thin" data-wght="200" data-wdth="100">
1665        Standard Thin
1666      </option>
1667      <option value="standard light" data-wght="300" data-wdth="100">
1668        Standard Light
1669      </option>
1670      <option value="standard regular" data-wght="400" data-wdth="100">
1671        Standard Regular
1672      </option>
1673      <option value="standard medium" data-wght="500" data-wdth="100">
1674        Standard Medium
1675      </option>
1676      <option value="standard bold" data-wght="700" data-wdth="100">
1677        Standard Bold
1678      </option>
1679      <option value="standard black" data-wght="900" data-wdth="100">
1680        Standard Black
1681      </option>
1682      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
1683        Extended Ultra Light
1684      </option>
1685      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
1686        Extended Thin
1687      </option>
1688      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
1689        Extended Light
1690      </option>
1691      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
1692        Extended Regular
1693      </option>
1694      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
1695        Extended Medium
1696      </option>
1697      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
1698        Extended Bold
1699      </option>
1700      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
1701        Extended Black
1702      </option>
1703      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
1704        Expanded Ultra Light
1705      </option>
1706      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
1707        Expanded Thin
1708      </option>
1709      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
1710        Expanded Light
1711      </option>
1712      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
1713        Expanded Regular
1714      </option>
1715      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
1716        Expanded Medium
1717      </option>
1718      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
1719        Expanded Bold
1720      </option>
1721      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
1722        Expanded Black
1723      </option>
1724    </select>
1725  </div>
1726
1727  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
1728  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
1729    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1730      <option value="variable" selected="selected">Variable</option>
1731      <option value="looped ultra light" data-wght="100">Ultra Light</option>
1732      <option value="looped thin" data-wght="200">Thin</option>
1733      <option value="looped light" data-wght="300">Light</option>
1734      <option value="looped regular" data-wght="400">Regular</option>
1735      <option value="looped medium" data-wght="500">Medium</option>
1736      <option value="looped bold" data-wght="700">Bold</option>
1737      <option value="looped black" data-wght="900">Black</option>
1738    </select>
1739  </div>
1740
1741  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
1742  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
1743    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1744      <option value="variable" selected="selected">Variable</option>
1745      <option value="ultra light" data-wght="100">Ultra Light</option>
1746      <option value="thin" data-wght="200">Thin</option>
1747      <option value="light" data-wght="300">Light</option>
1748      <option value="regular" data-wght="400">Regular</option>
1749      <option value="medium" data-wght="500">Medium</option>
1750      <option value="bold" data-wght="700">Bold</option>
1751      <option value="black" data-wght="900">Black</option>
1752    </select>
1753  </div>
1754
1755  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
1756    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1757      <option value="variable" selected="selected">Variable</option>
1758      <option value="ultra light" data-wght="100">Ultra Light</option>
1759      <option value="thin" data-wght="200">Thin</option>
1760      <option value="light" data-wght="300">Light</option>
1761      <option value="regular" data-wght="400">Regular</option>
1762      <option value="medium" data-wght="500">Medium</option>
1763      <option value="bold" data-wght="700">Bold</option>
1764      <option value="black" data-wght="900">Black</option>
1765    </select>
1766  </div>
1767
1768  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
1769    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1770      <option value="variable" selected="selected">Variable</option>
1771      <option value="ultra light" data-wght="100">Ultra Light</option>
1772      <option value="thin" data-wght="200">Thin</option>
1773      <option value="light" data-wght="300">Light</option>
1774      <option value="regular" data-wght="400">Regular</option>
1775      <option value="medium" data-wght="500">Medium</option>
1776      <option value="bold" data-wght="700">Bold</option>
1777      <option value="black" data-wght="900">Black</option>
1778    </select>
1779  </div>
1780
1781  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
1782    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
1783      <option value="variable" selected="selected">Variable</option>
1784      <option value="ultra light" data-wght="100">Ultra Light</option>
1785      <option value="thin" data-wght="200">Thin</option>
1786      <option value="light" data-wght="300">Light</option>
1787      <option value="regular" data-wght="400">Regular</option>
1788      <option value="medium" data-wght="500">Medium</option>
1789      <option value="bold" data-wght="700">Bold</option>
1790      <option value="black" data-wght="900">Black</option>
1791    </select>
1792  </div>
1793
1794  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
1795  <!-- Thai Slider: Weight (100–900) -->
1796  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
1797  <div data-component="tt__control-area">
1798    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
1799      <div class="flex flex-row justify-between">
1800        <div class="">Width</div>
1801        <div data-component="tt__wdth-value"></div>
1802      </div>
1803      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="150" class="typetester-slider w-full" id="typetesterWdthRange">
1804    </div>
1805    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
1806      <div class="flex flex-row justify-between">
1807        <div class="">Weight</div>
1808        <div data-component="tt__wght-value"></div>
1809      </div>
1810      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="500" class="typetester-slider w-full" id="typetesterWghtRange">
1811    </div>
1812  </div>
1813</form>
1814
1815  <!-- Main Content Area -->
1816  <div class="md:ml-[48px] flex w-full justify-center align-middle">
1817    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="uk" data-size="m"></div>
1818  </div>
1819</section>
1820
1821
1822    <!-- Typetester Sample -->
1823<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
1824  <!-- Partial Width Content Area With Section Nav -->
1825  <!-- Section Nav Area -->
1826<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="cyrillic">
1827  <!-- Select Script-->
1828  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
1829    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
1830      
1831        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
1832          Latin
1833        </option>
1834      
1835        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk" selected="selected">
1836          Cyrillic
1837        </option>
1838      
1839        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
1840          Greek
1841        </option>
1842      
1843        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
1844          Vietnamese
1845        </option>
1846      
1847        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
1848          Arabic
1849        </option>
1850      
1851        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
1852          Devanagari
1853        </option>
1854      
1855        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
1856          Hebrew
1857        </option>
1858      
1859        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
1860          Korean
1861        </option>
1862      
1863        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
1864          Thai
1865        </option>
1866      </select>
1867  </div>
1868
1869  <!-- Latin: Proportional / Mono Option -->
1870  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
1871    <div class="text-blue hover:text-red pt-1 w-[120px]">
1872  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1873  
1874    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
1875    <input type="radio" id="sample-6_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
1876  <label class="nav-radio-label hover:cursor-pointer" for="sample-6_prop-mono_proportional">Proportional</label>
1877</div>
1878
1879    <div class="text-blue hover:text-red pt-1 w-[120px]">
1880  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1881  
1882    <input type="radio" checked="" id="sample-6_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
1883  <label class="nav-radio-label hover:cursor-pointer" for="sample-6_prop-mono_mono">Monospaced</label>
1884</div>
1885
1886  </fieldset>
1887
1888  <!-- Latin: Upright / Italic Option -->
1889  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
1890    <div class="text-blue hover:text-red pt-1 w-[120px]">
1891  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1892  
1893    <input type="radio" checked="" id="sample-6_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
1894  <label class="nav-radio-label hover:cursor-pointer" for="sample-6_upright-ital_upright">Upright</label>
1895</div>
1896
1897    <div class="text-blue hover:text-red pt-1 w-[120px]">
1898  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1899  
1900    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
1901    <input type="radio" id="sample-6_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
1902  <label class="nav-radio-label hover:cursor-pointer" for="sample-6_upright-ital_italic">Italic</label>
1903</div>
1904
1905  </fieldset>
1906
1907  <!-- Latin: Default / Alternatives Option -->
1908  <!-- Currently Disabled, Too Many Options Syndrome -->
1909  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
1910    <include src="source/html-includes/radio-button.html">
1911      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
1912      "default", "label": "Default", "checked": true, "namePrefix": "sample-6" }
1913    </include>
1914    <include src="source/html-includes/radio-button.html">
1915      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
1916      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
1917      "sample-6" }
1918    </include>
1919  </fieldset> -->
1920
1921  <!-- Thai: Looped / Loopless Option -->
1922  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
1923    <div class="text-blue hover:text-red pt-1 w-[120px]">
1924  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1925  
1926    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
1927    <input type="radio" id="sample-6_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
1928  <label class="nav-radio-label hover:cursor-pointer" for="sample-6_looped_looped">Looped</label>
1929</div>
1930
1931    <div class="text-blue hover:text-red pt-1 w-[120px]">
1932  <!-- I'm sure theres a better way of applying this attribute conditionally -->
1933  
1934    <input type="radio" checked="" id="sample-6_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
1935  <label class="nav-radio-label hover:cursor-pointer" for="sample-6_looped_loopless">Loopless</label>
1936</div>
1937
1938  </fieldset>
1939
1940  <!-- Latin Dropdown: Variable + all 84 styles -->
1941  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
1942    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
1943      <option value="variable" selected="selected">Variable</option>
1944      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
1945        Compressed Ultra Light
1946      </option>
1947      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
1948        Compressed Thin
1949      </option>
1950      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
1951        Compressed Light
1952      </option>
1953      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
1954        Compressed Regular
1955      </option>
1956      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
1957        Compressed Medium
1958      </option>
1959      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
1960        Compressed Bold
1961      </option>
1962      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
1963        Compressed Black
1964      </option>
1965      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
1966        Condensed Ultra Light
1967      </option>
1968      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
1969        Condensed Thin
1970      </option>
1971      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
1972        Condensed Light
1973      </option>
1974      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
1975        Condensed Regular
1976      </option>
1977      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
1978        Condensed Medium
1979      </option>
1980      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
1981        Condensed Bold
1982      </option>
1983      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
1984        Condensed Black
1985      </option>
1986      <option value="standard ultra light" data-wght="100" data-wdth="100">
1987        Standard Ultra Light
1988      </option>
1989      <option value="standard thin" data-wght="200" data-wdth="100">
1990        Standard Thin
1991      </option>
1992      <option value="standard light" data-wght="300" data-wdth="100">
1993        Standard Light
1994      </option>
1995      <option value="standard regular" data-wght="400" data-wdth="100">
1996        Standard Regular
1997      </option>
1998      <option value="standard medium" data-wght="500" data-wdth="100">
1999        Standard Medium
2000      </option>
2001      <option value="standard bold" data-wght="700" data-wdth="100">
2002        Standard Bold
2003      </option>
2004      <option value="standard black" data-wght="900" data-wdth="100">
2005        Standard Black
2006      </option>
2007      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
2008        Extended Ultra Light
2009      </option>
2010      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
2011        Extended Thin
2012      </option>
2013      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
2014        Extended Light
2015      </option>
2016      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
2017        Extended Regular
2018      </option>
2019      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
2020        Extended Medium
2021      </option>
2022      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
2023        Extended Bold
2024      </option>
2025      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
2026        Extended Black
2027      </option>
2028      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
2029        Expanded Ultra Light
2030      </option>
2031      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
2032        Expanded Thin
2033      </option>
2034      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
2035        Expanded Light
2036      </option>
2037      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
2038        Expanded Regular
2039      </option>
2040      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
2041        Expanded Medium
2042      </option>
2043      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
2044        Expanded Bold
2045      </option>
2046      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
2047        Expanded Black
2048      </option>
2049    </select>
2050  </div>
2051
2052  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
2053  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
2054    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2055      <option value="variable" selected="selected">Variable</option>
2056      <option value="looped ultra light" data-wght="100">Ultra Light</option>
2057      <option value="looped thin" data-wght="200">Thin</option>
2058      <option value="looped light" data-wght="300">Light</option>
2059      <option value="looped regular" data-wght="400">Regular</option>
2060      <option value="looped medium" data-wght="500">Medium</option>
2061      <option value="looped bold" data-wght="700">Bold</option>
2062      <option value="looped black" data-wght="900">Black</option>
2063    </select>
2064  </div>
2065
2066  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
2067  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
2068    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2069      <option value="variable" selected="selected">Variable</option>
2070      <option value="ultra light" data-wght="100">Ultra Light</option>
2071      <option value="thin" data-wght="200">Thin</option>
2072      <option value="light" data-wght="300">Light</option>
2073      <option value="regular" data-wght="400">Regular</option>
2074      <option value="medium" data-wght="500">Medium</option>
2075      <option value="bold" data-wght="700">Bold</option>
2076      <option value="black" data-wght="900">Black</option>
2077    </select>
2078  </div>
2079
2080  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
2081    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2082      <option value="variable" selected="selected">Variable</option>
2083      <option value="ultra light" data-wght="100">Ultra Light</option>
2084      <option value="thin" data-wght="200">Thin</option>
2085      <option value="light" data-wght="300">Light</option>
2086      <option value="regular" data-wght="400">Regular</option>
2087      <option value="medium" data-wght="500">Medium</option>
2088      <option value="bold" data-wght="700">Bold</option>
2089      <option value="black" data-wght="900">Black</option>
2090    </select>
2091  </div>
2092
2093  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
2094    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2095      <option value="variable" selected="selected">Variable</option>
2096      <option value="ultra light" data-wght="100">Ultra Light</option>
2097      <option value="thin" data-wght="200">Thin</option>
2098      <option value="light" data-wght="300">Light</option>
2099      <option value="regular" data-wght="400">Regular</option>
2100      <option value="medium" data-wght="500">Medium</option>
2101      <option value="bold" data-wght="700">Bold</option>
2102      <option value="black" data-wght="900">Black</option>
2103    </select>
2104  </div>
2105
2106  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
2107    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2108      <option value="variable" selected="selected">Variable</option>
2109      <option value="ultra light" data-wght="100">Ultra Light</option>
2110      <option value="thin" data-wght="200">Thin</option>
2111      <option value="light" data-wght="300">Light</option>
2112      <option value="regular" data-wght="400">Regular</option>
2113      <option value="medium" data-wght="500">Medium</option>
2114      <option value="bold" data-wght="700">Bold</option>
2115      <option value="black" data-wght="900">Black</option>
2116    </select>
2117  </div>
2118
2119  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
2120  <!-- Thai Slider: Weight (100–900) -->
2121  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
2122  <div data-component="tt__control-area">
2123    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
2124      <div class="flex flex-row justify-between">
2125        <div class="">Width</div>
2126        <div data-component="tt__wdth-value"></div>
2127      </div>
2128      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
2129    </div>
2130    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
2131      <div class="flex flex-row justify-between">
2132        <div class="">Weight</div>
2133        <div data-component="tt__wght-value"></div>
2134      </div>
2135      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange">
2136    </div>
2137  </div>
2138</form>
2139
2140  <!-- Main Content Area -->
2141  <div class="md:ml-[48px] flex w-full justify-center align-middle">
2142    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="uk" data-size="s"></div>
2143  </div>
2144</section>
2145
2146
2147    <!-- Typetester Sample -->
2148<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
2149  <!-- Partial Width Content Area With Section Nav -->
2150  <!-- Section Nav Area -->
2151<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="greek">
2152  <!-- Select Script-->
2153  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
2154    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
2155      
2156        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
2157          Latin
2158        </option>
2159      
2160        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
2161          Cyrillic
2162        </option>
2163      
2164        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el" selected="selected">
2165          Greek
2166        </option>
2167      
2168        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
2169          Vietnamese
2170        </option>
2171      
2172        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
2173          Arabic
2174        </option>
2175      
2176        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
2177          Devanagari
2178        </option>
2179      
2180        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
2181          Hebrew
2182        </option>
2183      
2184        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
2185          Korean
2186        </option>
2187      
2188        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
2189          Thai
2190        </option>
2191      </select>
2192  </div>
2193
2194  <!-- Latin: Proportional / Mono Option -->
2195  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
2196    <div class="text-blue hover:text-red pt-1 w-[120px]">
2197  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2198  
2199    <input type="radio" checked="" id="sample-7_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
2200  <label class="nav-radio-label hover:cursor-pointer" for="sample-7_prop-mono_proportional">Proportional</label>
2201</div>
2202
2203    <div class="text-blue hover:text-red pt-1 w-[120px]">
2204  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2205  
2206    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
2207    <input type="radio" id="sample-7_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
2208  <label class="nav-radio-label hover:cursor-pointer" for="sample-7_prop-mono_mono">Monospaced</label>
2209</div>
2210
2211  </fieldset>
2212
2213  <!-- Latin: Upright / Italic Option -->
2214  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
2215    <div class="text-blue hover:text-red pt-1 w-[120px]">
2216  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2217  
2218    <input type="radio" checked="" id="sample-7_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
2219  <label class="nav-radio-label hover:cursor-pointer" for="sample-7_upright-ital_upright">Upright</label>
2220</div>
2221
2222    <div class="text-blue hover:text-red pt-1 w-[120px]">
2223  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2224  
2225    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
2226    <input type="radio" id="sample-7_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
2227  <label class="nav-radio-label hover:cursor-pointer" for="sample-7_upright-ital_italic">Italic</label>
2228</div>
2229
2230  </fieldset>
2231
2232  <!-- Latin: Default / Alternatives Option -->
2233  <!-- Currently Disabled, Too Many Options Syndrome -->
2234  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
2235    <include src="source/html-includes/radio-button.html">
2236      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
2237      "default", "label": "Default", "checked": true, "namePrefix": "sample-7" }
2238    </include>
2239    <include src="source/html-includes/radio-button.html">
2240      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
2241      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
2242      "sample-7" }
2243    </include>
2244  </fieldset> -->
2245
2246  <!-- Thai: Looped / Loopless Option -->
2247  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
2248    <div class="text-blue hover:text-red pt-1 w-[120px]">
2249  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2250  
2251    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
2252    <input type="radio" id="sample-7_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
2253  <label class="nav-radio-label hover:cursor-pointer" for="sample-7_looped_looped">Looped</label>
2254</div>
2255
2256    <div class="text-blue hover:text-red pt-1 w-[120px]">
2257  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2258  
2259    <input type="radio" checked="" id="sample-7_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
2260  <label class="nav-radio-label hover:cursor-pointer" for="sample-7_looped_loopless">Loopless</label>
2261</div>
2262
2263  </fieldset>
2264
2265  <!-- Latin Dropdown: Variable + all 84 styles -->
2266  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
2267    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
2268      <option value="variable" selected="selected">Variable</option>
2269      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
2270        Compressed Ultra Light
2271      </option>
2272      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
2273        Compressed Thin
2274      </option>
2275      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
2276        Compressed Light
2277      </option>
2278      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
2279        Compressed Regular
2280      </option>
2281      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
2282        Compressed Medium
2283      </option>
2284      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
2285        Compressed Bold
2286      </option>
2287      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
2288        Compressed Black
2289      </option>
2290      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
2291        Condensed Ultra Light
2292      </option>
2293      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
2294        Condensed Thin
2295      </option>
2296      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
2297        Condensed Light
2298      </option>
2299      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
2300        Condensed Regular
2301      </option>
2302      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
2303        Condensed Medium
2304      </option>
2305      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
2306        Condensed Bold
2307      </option>
2308      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
2309        Condensed Black
2310      </option>
2311      <option value="standard ultra light" data-wght="100" data-wdth="100">
2312        Standard Ultra Light
2313      </option>
2314      <option value="standard thin" data-wght="200" data-wdth="100">
2315        Standard Thin
2316      </option>
2317      <option value="standard light" data-wght="300" data-wdth="100">
2318        Standard Light
2319      </option>
2320      <option value="standard regular" data-wght="400" data-wdth="100">
2321        Standard Regular
2322      </option>
2323      <option value="standard medium" data-wght="500" data-wdth="100">
2324        Standard Medium
2325      </option>
2326      <option value="standard bold" data-wght="700" data-wdth="100">
2327        Standard Bold
2328      </option>
2329      <option value="standard black" data-wght="900" data-wdth="100">
2330        Standard Black
2331      </option>
2332      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
2333        Extended Ultra Light
2334      </option>
2335      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
2336        Extended Thin
2337      </option>
2338      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
2339        Extended Light
2340      </option>
2341      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
2342        Extended Regular
2343      </option>
2344      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
2345        Extended Medium
2346      </option>
2347      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
2348        Extended Bold
2349      </option>
2350      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
2351        Extended Black
2352      </option>
2353      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
2354        Expanded Ultra Light
2355      </option>
2356      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
2357        Expanded Thin
2358      </option>
2359      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
2360        Expanded Light
2361      </option>
2362      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
2363        Expanded Regular
2364      </option>
2365      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
2366        Expanded Medium
2367      </option>
2368      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
2369        Expanded Bold
2370      </option>
2371      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
2372        Expanded Black
2373      </option>
2374    </select>
2375  </div>
2376
2377  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
2378  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
2379    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2380      <option value="variable" selected="selected">Variable</option>
2381      <option value="looped ultra light" data-wght="100">Ultra Light</option>
2382      <option value="looped thin" data-wght="200">Thin</option>
2383      <option value="looped light" data-wght="300">Light</option>
2384      <option value="looped regular" data-wght="400">Regular</option>
2385      <option value="looped medium" data-wght="500">Medium</option>
2386      <option value="looped bold" data-wght="700">Bold</option>
2387      <option value="looped black" data-wght="900">Black</option>
2388    </select>
2389  </div>
2390
2391  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
2392  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
2393    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2394      <option value="variable" selected="selected">Variable</option>
2395      <option value="ultra light" data-wght="100">Ultra Light</option>
2396      <option value="thin" data-wght="200">Thin</option>
2397      <option value="light" data-wght="300">Light</option>
2398      <option value="regular" data-wght="400">Regular</option>
2399      <option value="medium" data-wght="500">Medium</option>
2400      <option value="bold" data-wght="700">Bold</option>
2401      <option value="black" data-wght="900">Black</option>
2402    </select>
2403  </div>
2404
2405  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
2406    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2407      <option value="variable" selected="selected">Variable</option>
2408      <option value="ultra light" data-wght="100">Ultra Light</option>
2409      <option value="thin" data-wght="200">Thin</option>
2410      <option value="light" data-wght="300">Light</option>
2411      <option value="regular" data-wght="400">Regular</option>
2412      <option value="medium" data-wght="500">Medium</option>
2413      <option value="bold" data-wght="700">Bold</option>
2414      <option value="black" data-wght="900">Black</option>
2415    </select>
2416  </div>
2417
2418  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
2419    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2420      <option value="variable" selected="selected">Variable</option>
2421      <option value="ultra light" data-wght="100">Ultra Light</option>
2422      <option value="thin" data-wght="200">Thin</option>
2423      <option value="light" data-wght="300">Light</option>
2424      <option value="regular" data-wght="400">Regular</option>
2425      <option value="medium" data-wght="500">Medium</option>
2426      <option value="bold" data-wght="700">Bold</option>
2427      <option value="black" data-wght="900">Black</option>
2428    </select>
2429  </div>
2430
2431  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
2432    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2433      <option value="variable" selected="selected">Variable</option>
2434      <option value="ultra light" data-wght="100">Ultra Light</option>
2435      <option value="thin" data-wght="200">Thin</option>
2436      <option value="light" data-wght="300">Light</option>
2437      <option value="regular" data-wght="400">Regular</option>
2438      <option value="medium" data-wght="500">Medium</option>
2439      <option value="bold" data-wght="700">Bold</option>
2440      <option value="black" data-wght="900">Black</option>
2441    </select>
2442  </div>
2443
2444  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
2445  <!-- Thai Slider: Weight (100–900) -->
2446  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
2447  <div data-component="tt__control-area">
2448    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
2449      <div class="flex flex-row justify-between">
2450        <div class="">Width</div>
2451        <div data-component="tt__wdth-value"></div>
2452      </div>
2453      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="50" class="typetester-slider w-full" id="typetesterWdthRange">
2454    </div>
2455    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
2456      <div class="flex flex-row justify-between">
2457        <div class="">Weight</div>
2458        <div data-component="tt__wght-value"></div>
2459      </div>
2460      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="200" class="typetester-slider w-full" id="typetesterWghtRange">
2461    </div>
2462  </div>
2463</form>
2464
2465  <!-- Main Content Area -->
2466  <div class="md:ml-[48px] flex w-full justify-center align-middle">
2467    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="el" data-size="l"></div>
2468  </div>
2469</section>
2470
2471
2472    <!-- Typetester Sample -->
2473<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
2474  <!-- Partial Width Content Area With Section Nav -->
2475  <!-- Section Nav Area -->
2476<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="greek">
2477  <!-- Select Script-->
2478  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
2479    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
2480      
2481        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
2482          Latin
2483        </option>
2484      
2485        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
2486          Cyrillic
2487        </option>
2488      
2489        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el" selected="selected">
2490          Greek
2491        </option>
2492      
2493        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
2494          Vietnamese
2495        </option>
2496      
2497        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
2498          Arabic
2499        </option>
2500      
2501        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
2502          Devanagari
2503        </option>
2504      
2505        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
2506          Hebrew
2507        </option>
2508      
2509        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
2510          Korean
2511        </option>
2512      
2513        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
2514          Thai
2515        </option>
2516      </select>
2517  </div>
2518
2519  <!-- Latin: Proportional / Mono Option -->
2520  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
2521    <div class="text-blue hover:text-red pt-1 w-[120px]">
2522  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2523  
2524    <input type="radio" checked="" id="sample-8_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
2525  <label class="nav-radio-label hover:cursor-pointer" for="sample-8_prop-mono_proportional">Proportional</label>
2526</div>
2527
2528    <div class="text-blue hover:text-red pt-1 w-[120px]">
2529  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2530  
2531    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
2532    <input type="radio" id="sample-8_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
2533  <label class="nav-radio-label hover:cursor-pointer" for="sample-8_prop-mono_mono">Monospaced</label>
2534</div>
2535
2536  </fieldset>
2537
2538  <!-- Latin: Upright / Italic Option -->
2539  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
2540    <div class="text-blue hover:text-red pt-1 w-[120px]">
2541  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2542  
2543    <input type="radio" checked="" id="sample-8_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
2544  <label class="nav-radio-label hover:cursor-pointer" for="sample-8_upright-ital_upright">Upright</label>
2545</div>
2546
2547    <div class="text-blue hover:text-red pt-1 w-[120px]">
2548  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2549  
2550    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
2551    <input type="radio" id="sample-8_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
2552  <label class="nav-radio-label hover:cursor-pointer" for="sample-8_upright-ital_italic">Italic</label>
2553</div>
2554
2555  </fieldset>
2556
2557  <!-- Latin: Default / Alternatives Option -->
2558  <!-- Currently Disabled, Too Many Options Syndrome -->
2559  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
2560    <include src="source/html-includes/radio-button.html">
2561      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
2562      "default", "label": "Default", "checked": true, "namePrefix": "sample-8" }
2563    </include>
2564    <include src="source/html-includes/radio-button.html">
2565      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
2566      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
2567      "sample-8" }
2568    </include>
2569  </fieldset> -->
2570
2571  <!-- Thai: Looped / Loopless Option -->
2572  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
2573    <div class="text-blue hover:text-red pt-1 w-[120px]">
2574  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2575  
2576    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
2577    <input type="radio" id="sample-8_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
2578  <label class="nav-radio-label hover:cursor-pointer" for="sample-8_looped_looped">Looped</label>
2579</div>
2580
2581    <div class="text-blue hover:text-red pt-1 w-[120px]">
2582  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2583  
2584    <input type="radio" checked="" id="sample-8_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
2585  <label class="nav-radio-label hover:cursor-pointer" for="sample-8_looped_loopless">Loopless</label>
2586</div>
2587
2588  </fieldset>
2589
2590  <!-- Latin Dropdown: Variable + all 84 styles -->
2591  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
2592    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
2593      <option value="variable" selected="selected">Variable</option>
2594      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
2595        Compressed Ultra Light
2596      </option>
2597      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
2598        Compressed Thin
2599      </option>
2600      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
2601        Compressed Light
2602      </option>
2603      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
2604        Compressed Regular
2605      </option>
2606      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
2607        Compressed Medium
2608      </option>
2609      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
2610        Compressed Bold
2611      </option>
2612      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
2613        Compressed Black
2614      </option>
2615      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
2616        Condensed Ultra Light
2617      </option>
2618      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
2619        Condensed Thin
2620      </option>
2621      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
2622        Condensed Light
2623      </option>
2624      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
2625        Condensed Regular
2626      </option>
2627      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
2628        Condensed Medium
2629      </option>
2630      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
2631        Condensed Bold
2632      </option>
2633      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
2634        Condensed Black
2635      </option>
2636      <option value="standard ultra light" data-wght="100" data-wdth="100">
2637        Standard Ultra Light
2638      </option>
2639      <option value="standard thin" data-wght="200" data-wdth="100">
2640        Standard Thin
2641      </option>
2642      <option value="standard light" data-wght="300" data-wdth="100">
2643        Standard Light
2644      </option>
2645      <option value="standard regular" data-wght="400" data-wdth="100">
2646        Standard Regular
2647      </option>
2648      <option value="standard medium" data-wght="500" data-wdth="100">
2649        Standard Medium
2650      </option>
2651      <option value="standard bold" data-wght="700" data-wdth="100">
2652        Standard Bold
2653      </option>
2654      <option value="standard black" data-wght="900" data-wdth="100">
2655        Standard Black
2656      </option>
2657      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
2658        Extended Ultra Light
2659      </option>
2660      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
2661        Extended Thin
2662      </option>
2663      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
2664        Extended Light
2665      </option>
2666      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
2667        Extended Regular
2668      </option>
2669      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
2670        Extended Medium
2671      </option>
2672      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
2673        Extended Bold
2674      </option>
2675      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
2676        Extended Black
2677      </option>
2678      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
2679        Expanded Ultra Light
2680      </option>
2681      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
2682        Expanded Thin
2683      </option>
2684      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
2685        Expanded Light
2686      </option>
2687      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
2688        Expanded Regular
2689      </option>
2690      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
2691        Expanded Medium
2692      </option>
2693      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
2694        Expanded Bold
2695      </option>
2696      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
2697        Expanded Black
2698      </option>
2699    </select>
2700  </div>
2701
2702  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
2703  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
2704    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2705      <option value="variable" selected="selected">Variable</option>
2706      <option value="looped ultra light" data-wght="100">Ultra Light</option>
2707      <option value="looped thin" data-wght="200">Thin</option>
2708      <option value="looped light" data-wght="300">Light</option>
2709      <option value="looped regular" data-wght="400">Regular</option>
2710      <option value="looped medium" data-wght="500">Medium</option>
2711      <option value="looped bold" data-wght="700">Bold</option>
2712      <option value="looped black" data-wght="900">Black</option>
2713    </select>
2714  </div>
2715
2716  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
2717  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
2718    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2719      <option value="variable" selected="selected">Variable</option>
2720      <option value="ultra light" data-wght="100">Ultra Light</option>
2721      <option value="thin" data-wght="200">Thin</option>
2722      <option value="light" data-wght="300">Light</option>
2723      <option value="regular" data-wght="400">Regular</option>
2724      <option value="medium" data-wght="500">Medium</option>
2725      <option value="bold" data-wght="700">Bold</option>
2726      <option value="black" data-wght="900">Black</option>
2727    </select>
2728  </div>
2729
2730  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
2731    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2732      <option value="variable" selected="selected">Variable</option>
2733      <option value="ultra light" data-wght="100">Ultra Light</option>
2734      <option value="thin" data-wght="200">Thin</option>
2735      <option value="light" data-wght="300">Light</option>
2736      <option value="regular" data-wght="400">Regular</option>
2737      <option value="medium" data-wght="500">Medium</option>
2738      <option value="bold" data-wght="700">Bold</option>
2739      <option value="black" data-wght="900">Black</option>
2740    </select>
2741  </div>
2742
2743  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
2744    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2745      <option value="variable" selected="selected">Variable</option>
2746      <option value="ultra light" data-wght="100">Ultra Light</option>
2747      <option value="thin" data-wght="200">Thin</option>
2748      <option value="light" data-wght="300">Light</option>
2749      <option value="regular" data-wght="400">Regular</option>
2750      <option value="medium" data-wght="500">Medium</option>
2751      <option value="bold" data-wght="700">Bold</option>
2752      <option value="black" data-wght="900">Black</option>
2753    </select>
2754  </div>
2755
2756  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
2757    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
2758      <option value="variable" selected="selected">Variable</option>
2759      <option value="ultra light" data-wght="100">Ultra Light</option>
2760      <option value="thin" data-wght="200">Thin</option>
2761      <option value="light" data-wght="300">Light</option>
2762      <option value="regular" data-wght="400">Regular</option>
2763      <option value="medium" data-wght="500">Medium</option>
2764      <option value="bold" data-wght="700">Bold</option>
2765      <option value="black" data-wght="900">Black</option>
2766    </select>
2767  </div>
2768
2769  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
2770  <!-- Thai Slider: Weight (100–900) -->
2771  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
2772  <div data-component="tt__control-area">
2773    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
2774      <div class="flex flex-row justify-between">
2775        <div class="">Width</div>
2776        <div data-component="tt__wdth-value"></div>
2777      </div>
2778      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
2779    </div>
2780    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
2781      <div class="flex flex-row justify-between">
2782        <div class="">Weight</div>
2783        <div data-component="tt__wght-value"></div>
2784      </div>
2785      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="700" class="typetester-slider w-full" id="typetesterWghtRange">
2786    </div>
2787  </div>
2788</form>
2789
2790  <!-- Main Content Area -->
2791  <div class="md:ml-[48px] flex w-full justify-center align-middle">
2792    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="el" data-size="m"></div>
2793  </div>
2794</section>
2795
2796
2797    <!-- Typetester Sample -->
2798<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
2799  <!-- Partial Width Content Area With Section Nav -->
2800  <!-- Section Nav Area -->
2801<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="greek">
2802  <!-- Select Script-->
2803  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
2804    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
2805      
2806        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
2807          Latin
2808        </option>
2809      
2810        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
2811          Cyrillic
2812        </option>
2813      
2814        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el" selected="selected">
2815          Greek
2816        </option>
2817      
2818        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
2819          Vietnamese
2820        </option>
2821      
2822        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
2823          Arabic
2824        </option>
2825      
2826        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
2827          Devanagari
2828        </option>
2829      
2830        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
2831          Hebrew
2832        </option>
2833      
2834        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
2835          Korean
2836        </option>
2837      
2838        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
2839          Thai
2840        </option>
2841      </select>
2842  </div>
2843
2844  <!-- Latin: Proportional / Mono Option -->
2845  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
2846    <div class="text-blue hover:text-red pt-1 w-[120px]">
2847  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2848  
2849    <input type="radio" checked="" id="sample-9_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
2850  <label class="nav-radio-label hover:cursor-pointer" for="sample-9_prop-mono_proportional">Proportional</label>
2851</div>
2852
2853    <div class="text-blue hover:text-red pt-1 w-[120px]">
2854  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2855  
2856    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
2857    <input type="radio" id="sample-9_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
2858  <label class="nav-radio-label hover:cursor-pointer" for="sample-9_prop-mono_mono">Monospaced</label>
2859</div>
2860
2861  </fieldset>
2862
2863  <!-- Latin: Upright / Italic Option -->
2864  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
2865    <div class="text-blue hover:text-red pt-1 w-[120px]">
2866  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2867  
2868    <input type="radio" checked="" id="sample-9_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
2869  <label class="nav-radio-label hover:cursor-pointer" for="sample-9_upright-ital_upright">Upright</label>
2870</div>
2871
2872    <div class="text-blue hover:text-red pt-1 w-[120px]">
2873  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2874  
2875    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
2876    <input type="radio" id="sample-9_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
2877  <label class="nav-radio-label hover:cursor-pointer" for="sample-9_upright-ital_italic">Italic</label>
2878</div>
2879
2880  </fieldset>
2881
2882  <!-- Latin: Default / Alternatives Option -->
2883  <!-- Currently Disabled, Too Many Options Syndrome -->
2884  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
2885    <include src="source/html-includes/radio-button.html">
2886      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
2887      "default", "label": "Default", "checked": true, "namePrefix": "sample-9" }
2888    </include>
2889    <include src="source/html-includes/radio-button.html">
2890      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
2891      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
2892      "sample-9" }
2893    </include>
2894  </fieldset> -->
2895
2896  <!-- Thai: Looped / Loopless Option -->
2897  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
2898    <div class="text-blue hover:text-red pt-1 w-[120px]">
2899  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2900  
2901    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
2902    <input type="radio" id="sample-9_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
2903  <label class="nav-radio-label hover:cursor-pointer" for="sample-9_looped_looped">Looped</label>
2904</div>
2905
2906    <div class="text-blue hover:text-red pt-1 w-[120px]">
2907  <!-- I'm sure theres a better way of applying this attribute conditionally -->
2908  
2909    <input type="radio" checked="" id="sample-9_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
2910  <label class="nav-radio-label hover:cursor-pointer" for="sample-9_looped_loopless">Loopless</label>
2911</div>
2912
2913  </fieldset>
2914
2915  <!-- Latin Dropdown: Variable + all 84 styles -->
2916  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
2917    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
2918      <option value="variable" selected="selected">Variable</option>
2919      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
2920        Compressed Ultra Light
2921      </option>
2922      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
2923        Compressed Thin
2924      </option>
2925      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
2926        Compressed Light
2927      </option>
2928      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
2929        Compressed Regular
2930      </option>
2931      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
2932        Compressed Medium
2933      </option>
2934      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
2935        Compressed Bold
2936      </option>
2937      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
2938        Compressed Black
2939      </option>
2940      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
2941        Condensed Ultra Light
2942      </option>
2943      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
2944        Condensed Thin
2945      </option>
2946      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
2947        Condensed Light
2948      </option>
2949      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
2950        Condensed Regular
2951      </option>
2952      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
2953        Condensed Medium
2954      </option>
2955      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
2956        Condensed Bold
2957      </option>
2958      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
2959        Condensed Black
2960      </option>
2961      <option value="standard ultra light" data-wght="100" data-wdth="100">
2962        Standard Ultra Light
2963      </option>
2964      <option value="standard thin" data-wght="200" data-wdth="100">
2965        Standard Thin
2966      </option>
2967      <option value="standard light" data-wght="300" data-wdth="100">
2968        Standard Light
2969      </option>
2970      <option value="standard regular" data-wght="400" data-wdth="100">
2971        Standard Regular
2972      </option>
2973      <option value="standard medium" data-wght="500" data-wdth="100">
2974        Standard Medium
2975      </option>
2976      <option value="standard bold" data-wght="700" data-wdth="100">
2977        Standard Bold
2978      </option>
2979      <option value="standard black" data-wght="900" data-wdth="100">
2980        Standard Black
2981      </option>
2982      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
2983        Extended Ultra Light
2984      </option>
2985      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
2986        Extended Thin
2987      </option>
2988      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
2989        Extended Light
2990      </option>
2991      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
2992        Extended Regular
2993      </option>
2994      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
2995        Extended Medium
2996      </option>
2997      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
2998        Extended Bold
2999      </option>
3000      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
3001        Extended Black
3002      </option>
3003      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
3004        Expanded Ultra Light
3005      </option>
3006      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
3007        Expanded Thin
3008      </option>
3009      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
3010        Expanded Light
3011      </option>
3012      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
3013        Expanded Regular
3014      </option>
3015      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
3016        Expanded Medium
3017      </option>
3018      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
3019        Expanded Bold
3020      </option>
3021      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
3022        Expanded Black
3023      </option>
3024    </select>
3025  </div>
3026
3027  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
3028  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
3029    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3030      <option value="variable" selected="selected">Variable</option>
3031      <option value="looped ultra light" data-wght="100">Ultra Light</option>
3032      <option value="looped thin" data-wght="200">Thin</option>
3033      <option value="looped light" data-wght="300">Light</option>
3034      <option value="looped regular" data-wght="400">Regular</option>
3035      <option value="looped medium" data-wght="500">Medium</option>
3036      <option value="looped bold" data-wght="700">Bold</option>
3037      <option value="looped black" data-wght="900">Black</option>
3038    </select>
3039  </div>
3040
3041  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
3042  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
3043    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3044      <option value="variable" selected="selected">Variable</option>
3045      <option value="ultra light" data-wght="100">Ultra Light</option>
3046      <option value="thin" data-wght="200">Thin</option>
3047      <option value="light" data-wght="300">Light</option>
3048      <option value="regular" data-wght="400">Regular</option>
3049      <option value="medium" data-wght="500">Medium</option>
3050      <option value="bold" data-wght="700">Bold</option>
3051      <option value="black" data-wght="900">Black</option>
3052    </select>
3053  </div>
3054
3055  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
3056    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3057      <option value="variable" selected="selected">Variable</option>
3058      <option value="ultra light" data-wght="100">Ultra Light</option>
3059      <option value="thin" data-wght="200">Thin</option>
3060      <option value="light" data-wght="300">Light</option>
3061      <option value="regular" data-wght="400">Regular</option>
3062      <option value="medium" data-wght="500">Medium</option>
3063      <option value="bold" data-wght="700">Bold</option>
3064      <option value="black" data-wght="900">Black</option>
3065    </select>
3066  </div>
3067
3068  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
3069    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3070      <option value="variable" selected="selected">Variable</option>
3071      <option value="ultra light" data-wght="100">Ultra Light</option>
3072      <option value="thin" data-wght="200">Thin</option>
3073      <option value="light" data-wght="300">Light</option>
3074      <option value="regular" data-wght="400">Regular</option>
3075      <option value="medium" data-wght="500">Medium</option>
3076      <option value="bold" data-wght="700">Bold</option>
3077      <option value="black" data-wght="900">Black</option>
3078    </select>
3079  </div>
3080
3081  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
3082    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3083      <option value="variable" selected="selected">Variable</option>
3084      <option value="ultra light" data-wght="100">Ultra Light</option>
3085      <option value="thin" data-wght="200">Thin</option>
3086      <option value="light" data-wght="300">Light</option>
3087      <option value="regular" data-wght="400">Regular</option>
3088      <option value="medium" data-wght="500">Medium</option>
3089      <option value="bold" data-wght="700">Bold</option>
3090      <option value="black" data-wght="900">Black</option>
3091    </select>
3092  </div>
3093
3094  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
3095  <!-- Thai Slider: Weight (100–900) -->
3096  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
3097  <div data-component="tt__control-area">
3098    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
3099      <div class="flex flex-row justify-between">
3100        <div class="">Width</div>
3101        <div data-component="tt__wdth-value"></div>
3102      </div>
3103      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
3104    </div>
3105    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
3106      <div class="flex flex-row justify-between">
3107        <div class="">Weight</div>
3108        <div data-component="tt__wght-value"></div>
3109      </div>
3110      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange">
3111    </div>
3112  </div>
3113</form>
3114
3115  <!-- Main Content Area -->
3116  <div class="md:ml-[48px] flex w-full justify-center align-middle">
3117    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="el" data-size="s"></div>
3118  </div>
3119</section>
3120
3121
3122    <!-- Typetester Sample -->
3123<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
3124  <!-- Partial Width Content Area With Section Nav -->
3125  <!-- Section Nav Area -->
3126<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="vietnamese">
3127  <!-- Select Script-->
3128  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
3129    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
3130      
3131        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
3132          Latin
3133        </option>
3134      
3135        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
3136          Cyrillic
3137        </option>
3138      
3139        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
3140          Greek
3141        </option>
3142      
3143        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi" selected="selected">
3144          Vietnamese
3145        </option>
3146      
3147        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
3148          Arabic
3149        </option>
3150      
3151        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
3152          Devanagari
3153        </option>
3154      
3155        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
3156          Hebrew
3157        </option>
3158      
3159        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
3160          Korean
3161        </option>
3162      
3163        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
3164          Thai
3165        </option>
3166      </select>
3167  </div>
3168
3169  <!-- Latin: Proportional / Mono Option -->
3170  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
3171    <div class="text-blue hover:text-red pt-1 w-[120px]">
3172  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3173  
3174    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
3175    <input type="radio" id="sample-10_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
3176  <label class="nav-radio-label hover:cursor-pointer" for="sample-10_prop-mono_proportional">Proportional</label>
3177</div>
3178
3179    <div class="text-blue hover:text-red pt-1 w-[120px]">
3180  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3181  
3182    <input type="radio" checked="" id="sample-10_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
3183  <label class="nav-radio-label hover:cursor-pointer" for="sample-10_prop-mono_mono">Monospaced</label>
3184</div>
3185
3186  </fieldset>
3187
3188  <!-- Latin: Upright / Italic Option -->
3189  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
3190    <div class="text-blue hover:text-red pt-1 w-[120px]">
3191  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3192  
3193    <input type="radio" checked="" id="sample-10_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
3194  <label class="nav-radio-label hover:cursor-pointer" for="sample-10_upright-ital_upright">Upright</label>
3195</div>
3196
3197    <div class="text-blue hover:text-red pt-1 w-[120px]">
3198  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3199  
3200    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
3201    <input type="radio" id="sample-10_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
3202  <label class="nav-radio-label hover:cursor-pointer" for="sample-10_upright-ital_italic">Italic</label>
3203</div>
3204
3205  </fieldset>
3206
3207  <!-- Latin: Default / Alternatives Option -->
3208  <!-- Currently Disabled, Too Many Options Syndrome -->
3209  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
3210    <include src="source/html-includes/radio-button.html">
3211      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
3212      "default", "label": "Default", "checked": true, "namePrefix": "sample-10" }
3213    </include>
3214    <include src="source/html-includes/radio-button.html">
3215      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
3216      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
3217      "sample-10" }
3218    </include>
3219  </fieldset> -->
3220
3221  <!-- Thai: Looped / Loopless Option -->
3222  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
3223    <div class="text-blue hover:text-red pt-1 w-[120px]">
3224  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3225  
3226    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
3227    <input type="radio" id="sample-10_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
3228  <label class="nav-radio-label hover:cursor-pointer" for="sample-10_looped_looped">Looped</label>
3229</div>
3230
3231    <div class="text-blue hover:text-red pt-1 w-[120px]">
3232  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3233  
3234    <input type="radio" checked="" id="sample-10_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
3235  <label class="nav-radio-label hover:cursor-pointer" for="sample-10_looped_loopless">Loopless</label>
3236</div>
3237
3238  </fieldset>
3239
3240  <!-- Latin Dropdown: Variable + all 84 styles -->
3241  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
3242    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
3243      <option value="variable" selected="selected">Variable</option>
3244      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
3245        Compressed Ultra Light
3246      </option>
3247      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
3248        Compressed Thin
3249      </option>
3250      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
3251        Compressed Light
3252      </option>
3253      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
3254        Compressed Regular
3255      </option>
3256      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
3257        Compressed Medium
3258      </option>
3259      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
3260        Compressed Bold
3261      </option>
3262      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
3263        Compressed Black
3264      </option>
3265      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
3266        Condensed Ultra Light
3267      </option>
3268      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
3269        Condensed Thin
3270      </option>
3271      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
3272        Condensed Light
3273      </option>
3274      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
3275        Condensed Regular
3276      </option>
3277      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
3278        Condensed Medium
3279      </option>
3280      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
3281        Condensed Bold
3282      </option>
3283      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
3284        Condensed Black
3285      </option>
3286      <option value="standard ultra light" data-wght="100" data-wdth="100">
3287        Standard Ultra Light
3288      </option>
3289      <option value="standard thin" data-wght="200" data-wdth="100">
3290        Standard Thin
3291      </option>
3292      <option value="standard light" data-wght="300" data-wdth="100">
3293        Standard Light
3294      </option>
3295      <option value="standard regular" data-wght="400" data-wdth="100">
3296        Standard Regular
3297      </option>
3298      <option value="standard medium" data-wght="500" data-wdth="100">
3299        Standard Medium
3300      </option>
3301      <option value="standard bold" data-wght="700" data-wdth="100">
3302        Standard Bold
3303      </option>
3304      <option value="standard black" data-wght="900" data-wdth="100">
3305        Standard Black
3306      </option>
3307      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
3308        Extended Ultra Light
3309      </option>
3310      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
3311        Extended Thin
3312      </option>
3313      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
3314        Extended Light
3315      </option>
3316      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
3317        Extended Regular
3318      </option>
3319      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
3320        Extended Medium
3321      </option>
3322      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
3323        Extended Bold
3324      </option>
3325      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
3326        Extended Black
3327      </option>
3328      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
3329        Expanded Ultra Light
3330      </option>
3331      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
3332        Expanded Thin
3333      </option>
3334      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
3335        Expanded Light
3336      </option>
3337      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
3338        Expanded Regular
3339      </option>
3340      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
3341        Expanded Medium
3342      </option>
3343      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
3344        Expanded Bold
3345      </option>
3346      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
3347        Expanded Black
3348      </option>
3349    </select>
3350  </div>
3351
3352  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
3353  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
3354    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3355      <option value="variable" selected="selected">Variable</option>
3356      <option value="looped ultra light" data-wght="100">Ultra Light</option>
3357      <option value="looped thin" data-wght="200">Thin</option>
3358      <option value="looped light" data-wght="300">Light</option>
3359      <option value="looped regular" data-wght="400">Regular</option>
3360      <option value="looped medium" data-wght="500">Medium</option>
3361      <option value="looped bold" data-wght="700">Bold</option>
3362      <option value="looped black" data-wght="900">Black</option>
3363    </select>
3364  </div>
3365
3366  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
3367  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
3368    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3369      <option value="variable" selected="selected">Variable</option>
3370      <option value="ultra light" data-wght="100">Ultra Light</option>
3371      <option value="thin" data-wght="200">Thin</option>
3372      <option value="light" data-wght="300">Light</option>
3373      <option value="regular" data-wght="400">Regular</option>
3374      <option value="medium" data-wght="500">Medium</option>
3375      <option value="bold" data-wght="700">Bold</option>
3376      <option value="black" data-wght="900">Black</option>
3377    </select>
3378  </div>
3379
3380  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
3381    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3382      <option value="variable" selected="selected">Variable</option>
3383      <option value="ultra light" data-wght="100">Ultra Light</option>
3384      <option value="thin" data-wght="200">Thin</option>
3385      <option value="light" data-wght="300">Light</option>
3386      <option value="regular" data-wght="400">Regular</option>
3387      <option value="medium" data-wght="500">Medium</option>
3388      <option value="bold" data-wght="700">Bold</option>
3389      <option value="black" data-wght="900">Black</option>
3390    </select>
3391  </div>
3392
3393  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
3394    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3395      <option value="variable" selected="selected">Variable</option>
3396      <option value="ultra light" data-wght="100">Ultra Light</option>
3397      <option value="thin" data-wght="200">Thin</option>
3398      <option value="light" data-wght="300">Light</option>
3399      <option value="regular" data-wght="400">Regular</option>
3400      <option value="medium" data-wght="500">Medium</option>
3401      <option value="bold" data-wght="700">Bold</option>
3402      <option value="black" data-wght="900">Black</option>
3403    </select>
3404  </div>
3405
3406  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
3407    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3408      <option value="variable" selected="selected">Variable</option>
3409      <option value="ultra light" data-wght="100">Ultra Light</option>
3410      <option value="thin" data-wght="200">Thin</option>
3411      <option value="light" data-wght="300">Light</option>
3412      <option value="regular" data-wght="400">Regular</option>
3413      <option value="medium" data-wght="500">Medium</option>
3414      <option value="bold" data-wght="700">Bold</option>
3415      <option value="black" data-wght="900">Black</option>
3416    </select>
3417  </div>
3418
3419  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
3420  <!-- Thai Slider: Weight (100–900) -->
3421  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
3422  <div data-component="tt__control-area">
3423    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
3424      <div class="flex flex-row justify-between">
3425        <div class="">Width</div>
3426        <div data-component="tt__wdth-value"></div>
3427      </div>
3428      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
3429    </div>
3430    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
3431      <div class="flex flex-row justify-between">
3432        <div class="">Weight</div>
3433        <div data-component="tt__wght-value"></div>
3434      </div>
3435      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange">
3436    </div>
3437  </div>
3438</form>
3439
3440  <!-- Main Content Area -->
3441  <div class="md:ml-[48px] flex w-full justify-center align-middle">
3442    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="vi" data-size="l"></div>
3443  </div>
3444</section>
3445
3446
3447    <!-- Typetester Sample -->
3448<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
3449  <!-- Partial Width Content Area With Section Nav -->
3450  <!-- Section Nav Area -->
3451<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="vietnamese">
3452  <!-- Select Script-->
3453  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
3454    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
3455      
3456        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
3457          Latin
3458        </option>
3459      
3460        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
3461          Cyrillic
3462        </option>
3463      
3464        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
3465          Greek
3466        </option>
3467      
3468        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi" selected="selected">
3469          Vietnamese
3470        </option>
3471      
3472        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
3473          Arabic
3474        </option>
3475      
3476        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
3477          Devanagari
3478        </option>
3479      
3480        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
3481          Hebrew
3482        </option>
3483      
3484        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
3485          Korean
3486        </option>
3487      
3488        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
3489          Thai
3490        </option>
3491      </select>
3492  </div>
3493
3494  <!-- Latin: Proportional / Mono Option -->
3495  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
3496    <div class="text-blue hover:text-red pt-1 w-[120px]">
3497  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3498  
3499    <input type="radio" checked="" id="sample-11_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
3500  <label class="nav-radio-label hover:cursor-pointer" for="sample-11_prop-mono_proportional">Proportional</label>
3501</div>
3502
3503    <div class="text-blue hover:text-red pt-1 w-[120px]">
3504  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3505  
3506    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
3507    <input type="radio" id="sample-11_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
3508  <label class="nav-radio-label hover:cursor-pointer" for="sample-11_prop-mono_mono">Monospaced</label>
3509</div>
3510
3511  </fieldset>
3512
3513  <!-- Latin: Upright / Italic Option -->
3514  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
3515    <div class="text-blue hover:text-red pt-1 w-[120px]">
3516  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3517  
3518    <input type="radio" checked="" id="sample-11_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
3519  <label class="nav-radio-label hover:cursor-pointer" for="sample-11_upright-ital_upright">Upright</label>
3520</div>
3521
3522    <div class="text-blue hover:text-red pt-1 w-[120px]">
3523  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3524  
3525    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
3526    <input type="radio" id="sample-11_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
3527  <label class="nav-radio-label hover:cursor-pointer" for="sample-11_upright-ital_italic">Italic</label>
3528</div>
3529
3530  </fieldset>
3531
3532  <!-- Latin: Default / Alternatives Option -->
3533  <!-- Currently Disabled, Too Many Options Syndrome -->
3534  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
3535    <include src="source/html-includes/radio-button.html">
3536      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
3537      "default", "label": "Default", "checked": true, "namePrefix": "sample-11" }
3538    </include>
3539    <include src="source/html-includes/radio-button.html">
3540      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
3541      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
3542      "sample-11" }
3543    </include>
3544  </fieldset> -->
3545
3546  <!-- Thai: Looped / Loopless Option -->
3547  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
3548    <div class="text-blue hover:text-red pt-1 w-[120px]">
3549  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3550  
3551    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
3552    <input type="radio" id="sample-11_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
3553  <label class="nav-radio-label hover:cursor-pointer" for="sample-11_looped_looped">Looped</label>
3554</div>
3555
3556    <div class="text-blue hover:text-red pt-1 w-[120px]">
3557  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3558  
3559    <input type="radio" checked="" id="sample-11_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
3560  <label class="nav-radio-label hover:cursor-pointer" for="sample-11_looped_loopless">Loopless</label>
3561</div>
3562
3563  </fieldset>
3564
3565  <!-- Latin Dropdown: Variable + all 84 styles -->
3566  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
3567    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
3568      <option value="variable" selected="selected">Variable</option>
3569      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
3570        Compressed Ultra Light
3571      </option>
3572      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
3573        Compressed Thin
3574      </option>
3575      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
3576        Compressed Light
3577      </option>
3578      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
3579        Compressed Regular
3580      </option>
3581      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
3582        Compressed Medium
3583      </option>
3584      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
3585        Compressed Bold
3586      </option>
3587      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
3588        Compressed Black
3589      </option>
3590      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
3591        Condensed Ultra Light
3592      </option>
3593      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
3594        Condensed Thin
3595      </option>
3596      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
3597        Condensed Light
3598      </option>
3599      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
3600        Condensed Regular
3601      </option>
3602      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
3603        Condensed Medium
3604      </option>
3605      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
3606        Condensed Bold
3607      </option>
3608      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
3609        Condensed Black
3610      </option>
3611      <option value="standard ultra light" data-wght="100" data-wdth="100">
3612        Standard Ultra Light
3613      </option>
3614      <option value="standard thin" data-wght="200" data-wdth="100">
3615        Standard Thin
3616      </option>
3617      <option value="standard light" data-wght="300" data-wdth="100">
3618        Standard Light
3619      </option>
3620      <option value="standard regular" data-wght="400" data-wdth="100">
3621        Standard Regular
3622      </option>
3623      <option value="standard medium" data-wght="500" data-wdth="100">
3624        Standard Medium
3625      </option>
3626      <option value="standard bold" data-wght="700" data-wdth="100">
3627        Standard Bold
3628      </option>
3629      <option value="standard black" data-wght="900" data-wdth="100">
3630        Standard Black
3631      </option>
3632      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
3633        Extended Ultra Light
3634      </option>
3635      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
3636        Extended Thin
3637      </option>
3638      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
3639        Extended Light
3640      </option>
3641      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
3642        Extended Regular
3643      </option>
3644      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
3645        Extended Medium
3646      </option>
3647      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
3648        Extended Bold
3649      </option>
3650      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
3651        Extended Black
3652      </option>
3653      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
3654        Expanded Ultra Light
3655      </option>
3656      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
3657        Expanded Thin
3658      </option>
3659      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
3660        Expanded Light
3661      </option>
3662      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
3663        Expanded Regular
3664      </option>
3665      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
3666        Expanded Medium
3667      </option>
3668      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
3669        Expanded Bold
3670      </option>
3671      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
3672        Expanded Black
3673      </option>
3674    </select>
3675  </div>
3676
3677  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
3678  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
3679    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3680      <option value="variable" selected="selected">Variable</option>
3681      <option value="looped ultra light" data-wght="100">Ultra Light</option>
3682      <option value="looped thin" data-wght="200">Thin</option>
3683      <option value="looped light" data-wght="300">Light</option>
3684      <option value="looped regular" data-wght="400">Regular</option>
3685      <option value="looped medium" data-wght="500">Medium</option>
3686      <option value="looped bold" data-wght="700">Bold</option>
3687      <option value="looped black" data-wght="900">Black</option>
3688    </select>
3689  </div>
3690
3691  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
3692  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
3693    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3694      <option value="variable" selected="selected">Variable</option>
3695      <option value="ultra light" data-wght="100">Ultra Light</option>
3696      <option value="thin" data-wght="200">Thin</option>
3697      <option value="light" data-wght="300">Light</option>
3698      <option value="regular" data-wght="400">Regular</option>
3699      <option value="medium" data-wght="500">Medium</option>
3700      <option value="bold" data-wght="700">Bold</option>
3701      <option value="black" data-wght="900">Black</option>
3702    </select>
3703  </div>
3704
3705  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
3706    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3707      <option value="variable" selected="selected">Variable</option>
3708      <option value="ultra light" data-wght="100">Ultra Light</option>
3709      <option value="thin" data-wght="200">Thin</option>
3710      <option value="light" data-wght="300">Light</option>
3711      <option value="regular" data-wght="400">Regular</option>
3712      <option value="medium" data-wght="500">Medium</option>
3713      <option value="bold" data-wght="700">Bold</option>
3714      <option value="black" data-wght="900">Black</option>
3715    </select>
3716  </div>
3717
3718  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
3719    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3720      <option value="variable" selected="selected">Variable</option>
3721      <option value="ultra light" data-wght="100">Ultra Light</option>
3722      <option value="thin" data-wght="200">Thin</option>
3723      <option value="light" data-wght="300">Light</option>
3724      <option value="regular" data-wght="400">Regular</option>
3725      <option value="medium" data-wght="500">Medium</option>
3726      <option value="bold" data-wght="700">Bold</option>
3727      <option value="black" data-wght="900">Black</option>
3728    </select>
3729  </div>
3730
3731  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
3732    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
3733      <option value="variable" selected="selected">Variable</option>
3734      <option value="ultra light" data-wght="100">Ultra Light</option>
3735      <option value="thin" data-wght="200">Thin</option>
3736      <option value="light" data-wght="300">Light</option>
3737      <option value="regular" data-wght="400">Regular</option>
3738      <option value="medium" data-wght="500">Medium</option>
3739      <option value="bold" data-wght="700">Bold</option>
3740      <option value="black" data-wght="900">Black</option>
3741    </select>
3742  </div>
3743
3744  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
3745  <!-- Thai Slider: Weight (100–900) -->
3746  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
3747  <div data-component="tt__control-area">
3748    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
3749      <div class="flex flex-row justify-between">
3750        <div class="">Width</div>
3751        <div data-component="tt__wdth-value"></div>
3752      </div>
3753      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
3754    </div>
3755    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
3756      <div class="flex flex-row justify-between">
3757        <div class="">Weight</div>
3758        <div data-component="tt__wght-value"></div>
3759      </div>
3760      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="300" class="typetester-slider w-full" id="typetesterWghtRange">
3761    </div>
3762  </div>
3763</form>
3764
3765  <!-- Main Content Area -->
3766  <div class="md:ml-[48px] flex w-full justify-center align-middle">
3767    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="vi" data-size="m"></div>
3768  </div>
3769</section>
3770
3771
3772    <!-- Typetester Sample -->
3773<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
3774  <!-- Partial Width Content Area With Section Nav -->
3775  <!-- Section Nav Area -->
3776<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="vietnamese">
3777  <!-- Select Script-->
3778  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
3779    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
3780      
3781        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
3782          Latin
3783        </option>
3784      
3785        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
3786          Cyrillic
3787        </option>
3788      
3789        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
3790          Greek
3791        </option>
3792      
3793        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi" selected="selected">
3794          Vietnamese
3795        </option>
3796      
3797        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
3798          Arabic
3799        </option>
3800      
3801        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
3802          Devanagari
3803        </option>
3804      
3805        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
3806          Hebrew
3807        </option>
3808      
3809        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
3810          Korean
3811        </option>
3812      
3813        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
3814          Thai
3815        </option>
3816      </select>
3817  </div>
3818
3819  <!-- Latin: Proportional / Mono Option -->
3820  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
3821    <div class="text-blue hover:text-red pt-1 w-[120px]">
3822  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3823  
3824    <input type="radio" checked="" id="sample-12_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
3825  <label class="nav-radio-label hover:cursor-pointer" for="sample-12_prop-mono_proportional">Proportional</label>
3826</div>
3827
3828    <div class="text-blue hover:text-red pt-1 w-[120px]">
3829  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3830  
3831    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
3832    <input type="radio" id="sample-12_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
3833  <label class="nav-radio-label hover:cursor-pointer" for="sample-12_prop-mono_mono">Monospaced</label>
3834</div>
3835
3836  </fieldset>
3837
3838  <!-- Latin: Upright / Italic Option -->
3839  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
3840    <div class="text-blue hover:text-red pt-1 w-[120px]">
3841  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3842  
3843    <input type="radio" checked="" id="sample-12_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
3844  <label class="nav-radio-label hover:cursor-pointer" for="sample-12_upright-ital_upright">Upright</label>
3845</div>
3846
3847    <div class="text-blue hover:text-red pt-1 w-[120px]">
3848  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3849  
3850    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
3851    <input type="radio" id="sample-12_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
3852  <label class="nav-radio-label hover:cursor-pointer" for="sample-12_upright-ital_italic">Italic</label>
3853</div>
3854
3855  </fieldset>
3856
3857  <!-- Latin: Default / Alternatives Option -->
3858  <!-- Currently Disabled, Too Many Options Syndrome -->
3859  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
3860    <include src="source/html-includes/radio-button.html">
3861      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
3862      "default", "label": "Default", "checked": true, "namePrefix": "sample-12" }
3863    </include>
3864    <include src="source/html-includes/radio-button.html">
3865      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
3866      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
3867      "sample-12" }
3868    </include>
3869  </fieldset> -->
3870
3871  <!-- Thai: Looped / Loopless Option -->
3872  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
3873    <div class="text-blue hover:text-red pt-1 w-[120px]">
3874  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3875  
3876    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
3877    <input type="radio" id="sample-12_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
3878  <label class="nav-radio-label hover:cursor-pointer" for="sample-12_looped_looped">Looped</label>
3879</div>
3880
3881    <div class="text-blue hover:text-red pt-1 w-[120px]">
3882  <!-- I'm sure theres a better way of applying this attribute conditionally -->
3883  
3884    <input type="radio" checked="" id="sample-12_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
3885  <label class="nav-radio-label hover:cursor-pointer" for="sample-12_looped_loopless">Loopless</label>
3886</div>
3887
3888  </fieldset>
3889
3890  <!-- Latin Dropdown: Variable + all 84 styles -->
3891  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
3892    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
3893      <option value="variable" selected="selected">Variable</option>
3894      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
3895        Compressed Ultra Light
3896      </option>
3897      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
3898        Compressed Thin
3899      </option>
3900      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
3901        Compressed Light
3902      </option>
3903      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
3904        Compressed Regular
3905      </option>
3906      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
3907        Compressed Medium
3908      </option>
3909      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
3910        Compressed Bold
3911      </option>
3912      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
3913        Compressed Black
3914      </option>
3915      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
3916        Condensed Ultra Light
3917      </option>
3918      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
3919        Condensed Thin
3920      </option>
3921      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
3922        Condensed Light
3923      </option>
3924      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
3925        Condensed Regular
3926      </option>
3927      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
3928        Condensed Medium
3929      </option>
3930      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
3931        Condensed Bold
3932      </option>
3933      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
3934        Condensed Black
3935      </option>
3936      <option value="standard ultra light" data-wght="100" data-wdth="100">
3937        Standard Ultra Light
3938      </option>
3939      <option value="standard thin" data-wght="200" data-wdth="100">
3940        Standard Thin
3941      </option>
3942      <option value="standard light" data-wght="300" data-wdth="100">
3943        Standard Light
3944      </option>
3945      <option value="standard regular" data-wght="400" data-wdth="100">
3946        Standard Regular
3947      </option>
3948      <option value="standard medium" data-wght="500" data-wdth="100">
3949        Standard Medium
3950      </option>
3951      <option value="standard bold" data-wght="700" data-wdth="100">
3952        Standard Bold
3953      </option>
3954      <option value="standard black" data-wght="900" data-wdth="100">
3955        Standard Black
3956      </option>
3957      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
3958        Extended Ultra Light
3959      </option>
3960      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
3961        Extended Thin
3962      </option>
3963      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
3964        Extended Light
3965      </option>
3966      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
3967        Extended Regular
3968      </option>
3969      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
3970        Extended Medium
3971      </option>
3972      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
3973        Extended Bold
3974      </option>
3975      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
3976        Extended Black
3977      </option>
3978      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
3979        Expanded Ultra Light
3980      </option>
3981      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
3982        Expanded Thin
3983      </option>
3984      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
3985        Expanded Light
3986      </option>
3987      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
3988        Expanded Regular
3989      </option>
3990      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
3991        Expanded Medium
3992      </option>
3993      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
3994        Expanded Bold
3995      </option>
3996      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
3997        Expanded Black
3998      </option>
3999    </select>
4000  </div>
4001
4002  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
4003  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
4004    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4005      <option value="variable" selected="selected">Variable</option>
4006      <option value="looped ultra light" data-wght="100">Ultra Light</option>
4007      <option value="looped thin" data-wght="200">Thin</option>
4008      <option value="looped light" data-wght="300">Light</option>
4009      <option value="looped regular" data-wght="400">Regular</option>
4010      <option value="looped medium" data-wght="500">Medium</option>
4011      <option value="looped bold" data-wght="700">Bold</option>
4012      <option value="looped black" data-wght="900">Black</option>
4013    </select>
4014  </div>
4015
4016  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
4017  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
4018    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4019      <option value="variable" selected="selected">Variable</option>
4020      <option value="ultra light" data-wght="100">Ultra Light</option>
4021      <option value="thin" data-wght="200">Thin</option>
4022      <option value="light" data-wght="300">Light</option>
4023      <option value="regular" data-wght="400">Regular</option>
4024      <option value="medium" data-wght="500">Medium</option>
4025      <option value="bold" data-wght="700">Bold</option>
4026      <option value="black" data-wght="900">Black</option>
4027    </select>
4028  </div>
4029
4030  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
4031    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4032      <option value="variable" selected="selected">Variable</option>
4033      <option value="ultra light" data-wght="100">Ultra Light</option>
4034      <option value="thin" data-wght="200">Thin</option>
4035      <option value="light" data-wght="300">Light</option>
4036      <option value="regular" data-wght="400">Regular</option>
4037      <option value="medium" data-wght="500">Medium</option>
4038      <option value="bold" data-wght="700">Bold</option>
4039      <option value="black" data-wght="900">Black</option>
4040    </select>
4041  </div>
4042
4043  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
4044    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4045      <option value="variable" selected="selected">Variable</option>
4046      <option value="ultra light" data-wght="100">Ultra Light</option>
4047      <option value="thin" data-wght="200">Thin</option>
4048      <option value="light" data-wght="300">Light</option>
4049      <option value="regular" data-wght="400">Regular</option>
4050      <option value="medium" data-wght="500">Medium</option>
4051      <option value="bold" data-wght="700">Bold</option>
4052      <option value="black" data-wght="900">Black</option>
4053    </select>
4054  </div>
4055
4056  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
4057    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4058      <option value="variable" selected="selected">Variable</option>
4059      <option value="ultra light" data-wght="100">Ultra Light</option>
4060      <option value="thin" data-wght="200">Thin</option>
4061      <option value="light" data-wght="300">Light</option>
4062      <option value="regular" data-wght="400">Regular</option>
4063      <option value="medium" data-wght="500">Medium</option>
4064      <option value="bold" data-wght="700">Bold</option>
4065      <option value="black" data-wght="900">Black</option>
4066    </select>
4067  </div>
4068
4069  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
4070  <!-- Thai Slider: Weight (100–900) -->
4071  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
4072  <div data-component="tt__control-area">
4073    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
4074      <div class="flex flex-row justify-between">
4075        <div class="">Width</div>
4076        <div data-component="tt__wdth-value"></div>
4077      </div>
4078      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
4079    </div>
4080    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
4081      <div class="flex flex-row justify-between">
4082        <div class="">Weight</div>
4083        <div data-component="tt__wght-value"></div>
4084      </div>
4085      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange">
4086    </div>
4087  </div>
4088</form>
4089
4090  <!-- Main Content Area -->
4091  <div class="md:ml-[48px] flex w-full justify-center align-middle">
4092    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="vi" data-size="s"></div>
4093  </div>
4094</section>
4095
4096
4097    <!-- Typetester Sample -->
4098<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
4099  <!-- Partial Width Content Area With Section Nav -->
4100  <!-- Section Nav Area -->
4101<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="arabic">
4102  <!-- Select Script-->
4103  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
4104    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
4105      
4106        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
4107          Latin
4108        </option>
4109      
4110        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
4111          Cyrillic
4112        </option>
4113      
4114        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
4115          Greek
4116        </option>
4117      
4118        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
4119          Vietnamese
4120        </option>
4121      
4122        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar" selected="selected">
4123          Arabic
4124        </option>
4125      
4126        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
4127          Devanagari
4128        </option>
4129      
4130        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
4131          Hebrew
4132        </option>
4133      
4134        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
4135          Korean
4136        </option>
4137      
4138        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
4139          Thai
4140        </option>
4141      </select>
4142  </div>
4143
4144  <!-- Latin: Proportional / Mono Option -->
4145  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
4146    <div class="text-blue hover:text-red pt-1 w-[120px]">
4147  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4148  
4149    <input type="radio" checked="" id="sample-13_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
4150  <label class="nav-radio-label hover:cursor-pointer" for="sample-13_prop-mono_proportional">Proportional</label>
4151</div>
4152
4153    <div class="text-blue hover:text-red pt-1 w-[120px]">
4154  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4155  
4156    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
4157    <input type="radio" id="sample-13_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
4158  <label class="nav-radio-label hover:cursor-pointer" for="sample-13_prop-mono_mono">Monospaced</label>
4159</div>
4160
4161  </fieldset>
4162
4163  <!-- Latin: Upright / Italic Option -->
4164  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
4165    <div class="text-blue hover:text-red pt-1 w-[120px]">
4166  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4167  
4168    <input type="radio" checked="" id="sample-13_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
4169  <label class="nav-radio-label hover:cursor-pointer" for="sample-13_upright-ital_upright">Upright</label>
4170</div>
4171
4172    <div class="text-blue hover:text-red pt-1 w-[120px]">
4173  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4174  
4175    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
4176    <input type="radio" id="sample-13_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
4177  <label class="nav-radio-label hover:cursor-pointer" for="sample-13_upright-ital_italic">Italic</label>
4178</div>
4179
4180  </fieldset>
4181
4182  <!-- Latin: Default / Alternatives Option -->
4183  <!-- Currently Disabled, Too Many Options Syndrome -->
4184  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
4185    <include src="source/html-includes/radio-button.html">
4186      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
4187      "default", "label": "Default", "checked": true, "namePrefix": "sample-13" }
4188    </include>
4189    <include src="source/html-includes/radio-button.html">
4190      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
4191      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
4192      "sample-13" }
4193    </include>
4194  </fieldset> -->
4195
4196  <!-- Thai: Looped / Loopless Option -->
4197  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
4198    <div class="text-blue hover:text-red pt-1 w-[120px]">
4199  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4200  
4201    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
4202    <input type="radio" id="sample-13_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
4203  <label class="nav-radio-label hover:cursor-pointer" for="sample-13_looped_looped">Looped</label>
4204</div>
4205
4206    <div class="text-blue hover:text-red pt-1 w-[120px]">
4207  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4208  
4209    <input type="radio" checked="" id="sample-13_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
4210  <label class="nav-radio-label hover:cursor-pointer" for="sample-13_looped_loopless">Loopless</label>
4211</div>
4212
4213  </fieldset>
4214
4215  <!-- Latin Dropdown: Variable + all 84 styles -->
4216  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
4217    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
4218      <option value="variable" selected="selected">Variable</option>
4219      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
4220        Compressed Ultra Light
4221      </option>
4222      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
4223        Compressed Thin
4224      </option>
4225      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
4226        Compressed Light
4227      </option>
4228      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
4229        Compressed Regular
4230      </option>
4231      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
4232        Compressed Medium
4233      </option>
4234      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
4235        Compressed Bold
4236      </option>
4237      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
4238        Compressed Black
4239      </option>
4240      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
4241        Condensed Ultra Light
4242      </option>
4243      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
4244        Condensed Thin
4245      </option>
4246      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
4247        Condensed Light
4248      </option>
4249      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
4250        Condensed Regular
4251      </option>
4252      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
4253        Condensed Medium
4254      </option>
4255      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
4256        Condensed Bold
4257      </option>
4258      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
4259        Condensed Black
4260      </option>
4261      <option value="standard ultra light" data-wght="100" data-wdth="100">
4262        Standard Ultra Light
4263      </option>
4264      <option value="standard thin" data-wght="200" data-wdth="100">
4265        Standard Thin
4266      </option>
4267      <option value="standard light" data-wght="300" data-wdth="100">
4268        Standard Light
4269      </option>
4270      <option value="standard regular" data-wght="400" data-wdth="100">
4271        Standard Regular
4272      </option>
4273      <option value="standard medium" data-wght="500" data-wdth="100">
4274        Standard Medium
4275      </option>
4276      <option value="standard bold" data-wght="700" data-wdth="100">
4277        Standard Bold
4278      </option>
4279      <option value="standard black" data-wght="900" data-wdth="100">
4280        Standard Black
4281      </option>
4282      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
4283        Extended Ultra Light
4284      </option>
4285      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
4286        Extended Thin
4287      </option>
4288      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
4289        Extended Light
4290      </option>
4291      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
4292        Extended Regular
4293      </option>
4294      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
4295        Extended Medium
4296      </option>
4297      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
4298        Extended Bold
4299      </option>
4300      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
4301        Extended Black
4302      </option>
4303      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
4304        Expanded Ultra Light
4305      </option>
4306      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
4307        Expanded Thin
4308      </option>
4309      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
4310        Expanded Light
4311      </option>
4312      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
4313        Expanded Regular
4314      </option>
4315      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
4316        Expanded Medium
4317      </option>
4318      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
4319        Expanded Bold
4320      </option>
4321      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
4322        Expanded Black
4323      </option>
4324    </select>
4325  </div>
4326
4327  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
4328  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
4329    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4330      <option value="variable" selected="selected">Variable</option>
4331      <option value="looped ultra light" data-wght="100">Ultra Light</option>
4332      <option value="looped thin" data-wght="200">Thin</option>
4333      <option value="looped light" data-wght="300">Light</option>
4334      <option value="looped regular" data-wght="400">Regular</option>
4335      <option value="looped medium" data-wght="500">Medium</option>
4336      <option value="looped bold" data-wght="700">Bold</option>
4337      <option value="looped black" data-wght="900">Black</option>
4338    </select>
4339  </div>
4340
4341  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
4342  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
4343    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4344      <option value="variable" selected="selected">Variable</option>
4345      <option value="ultra light" data-wght="100">Ultra Light</option>
4346      <option value="thin" data-wght="200">Thin</option>
4347      <option value="light" data-wght="300">Light</option>
4348      <option value="regular" data-wght="400">Regular</option>
4349      <option value="medium" data-wght="500">Medium</option>
4350      <option value="bold" data-wght="700">Bold</option>
4351      <option value="black" data-wght="900">Black</option>
4352    </select>
4353  </div>
4354
4355  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
4356    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4357      <option value="variable" selected="selected">Variable</option>
4358      <option value="ultra light" data-wght="100">Ultra Light</option>
4359      <option value="thin" data-wght="200">Thin</option>
4360      <option value="light" data-wght="300">Light</option>
4361      <option value="regular" data-wght="400">Regular</option>
4362      <option value="medium" data-wght="500">Medium</option>
4363      <option value="bold" data-wght="700">Bold</option>
4364      <option value="black" data-wght="900">Black</option>
4365    </select>
4366  </div>
4367
4368  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
4369    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4370      <option value="variable" selected="selected">Variable</option>
4371      <option value="ultra light" data-wght="100">Ultra Light</option>
4372      <option value="thin" data-wght="200">Thin</option>
4373      <option value="light" data-wght="300">Light</option>
4374      <option value="regular" data-wght="400">Regular</option>
4375      <option value="medium" data-wght="500">Medium</option>
4376      <option value="bold" data-wght="700">Bold</option>
4377      <option value="black" data-wght="900">Black</option>
4378    </select>
4379  </div>
4380
4381  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
4382    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4383      <option value="variable" selected="selected">Variable</option>
4384      <option value="ultra light" data-wght="100">Ultra Light</option>
4385      <option value="thin" data-wght="200">Thin</option>
4386      <option value="light" data-wght="300">Light</option>
4387      <option value="regular" data-wght="400">Regular</option>
4388      <option value="medium" data-wght="500">Medium</option>
4389      <option value="bold" data-wght="700">Bold</option>
4390      <option value="black" data-wght="900">Black</option>
4391    </select>
4392  </div>
4393
4394  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
4395  <!-- Thai Slider: Weight (100–900) -->
4396  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
4397  <div data-component="tt__control-area">
4398    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
4399      <div class="flex flex-row justify-between">
4400        <div class="">Width</div>
4401        <div data-component="tt__wdth-value"></div>
4402      </div>
4403      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
4404    </div>
4405    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
4406      <div class="flex flex-row justify-between">
4407        <div class="">Weight</div>
4408        <div data-component="tt__wght-value"></div>
4409      </div>
4410      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="700" class="typetester-slider w-full" id="typetesterWghtRange">
4411    </div>
4412  </div>
4413</form>
4414
4415  <!-- Main Content Area -->
4416  <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip">
4417    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ar" data-size="l" dir="rtl"></div>
4418  </div>
4419</section>
4420
4421
4422    <!-- Typetester Sample -->
4423<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
4424  <!-- Partial Width Content Area With Section Nav -->
4425  <!-- Section Nav Area -->
4426<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="arabic">
4427  <!-- Select Script-->
4428  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
4429    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
4430      
4431        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
4432          Latin
4433        </option>
4434      
4435        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
4436          Cyrillic
4437        </option>
4438      
4439        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
4440          Greek
4441        </option>
4442      
4443        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
4444          Vietnamese
4445        </option>
4446      
4447        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar" selected="selected">
4448          Arabic
4449        </option>
4450      
4451        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
4452          Devanagari
4453        </option>
4454      
4455        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
4456          Hebrew
4457        </option>
4458      
4459        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
4460          Korean
4461        </option>
4462      
4463        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
4464          Thai
4465        </option>
4466      </select>
4467  </div>
4468
4469  <!-- Latin: Proportional / Mono Option -->
4470  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
4471    <div class="text-blue hover:text-red pt-1 w-[120px]">
4472  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4473  
4474    <input type="radio" checked="" id="sample-14_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
4475  <label class="nav-radio-label hover:cursor-pointer" for="sample-14_prop-mono_proportional">Proportional</label>
4476</div>
4477
4478    <div class="text-blue hover:text-red pt-1 w-[120px]">
4479  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4480  
4481    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
4482    <input type="radio" id="sample-14_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
4483  <label class="nav-radio-label hover:cursor-pointer" for="sample-14_prop-mono_mono">Monospaced</label>
4484</div>
4485
4486  </fieldset>
4487
4488  <!-- Latin: Upright / Italic Option -->
4489  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
4490    <div class="text-blue hover:text-red pt-1 w-[120px]">
4491  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4492  
4493    <input type="radio" checked="" id="sample-14_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
4494  <label class="nav-radio-label hover:cursor-pointer" for="sample-14_upright-ital_upright">Upright</label>
4495</div>
4496
4497    <div class="text-blue hover:text-red pt-1 w-[120px]">
4498  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4499  
4500    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
4501    <input type="radio" id="sample-14_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
4502  <label class="nav-radio-label hover:cursor-pointer" for="sample-14_upright-ital_italic">Italic</label>
4503</div>
4504
4505  </fieldset>
4506
4507  <!-- Latin: Default / Alternatives Option -->
4508  <!-- Currently Disabled, Too Many Options Syndrome -->
4509  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
4510    <include src="source/html-includes/radio-button.html">
4511      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
4512      "default", "label": "Default", "checked": true, "namePrefix": "sample-14" }
4513    </include>
4514    <include src="source/html-includes/radio-button.html">
4515      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
4516      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
4517      "sample-14" }
4518    </include>
4519  </fieldset> -->
4520
4521  <!-- Thai: Looped / Loopless Option -->
4522  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
4523    <div class="text-blue hover:text-red pt-1 w-[120px]">
4524  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4525  
4526    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
4527    <input type="radio" id="sample-14_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
4528  <label class="nav-radio-label hover:cursor-pointer" for="sample-14_looped_looped">Looped</label>
4529</div>
4530
4531    <div class="text-blue hover:text-red pt-1 w-[120px]">
4532  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4533  
4534    <input type="radio" checked="" id="sample-14_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
4535  <label class="nav-radio-label hover:cursor-pointer" for="sample-14_looped_loopless">Loopless</label>
4536</div>
4537
4538  </fieldset>
4539
4540  <!-- Latin Dropdown: Variable + all 84 styles -->
4541  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
4542    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
4543      <option value="variable" selected="selected">Variable</option>
4544      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
4545        Compressed Ultra Light
4546      </option>
4547      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
4548        Compressed Thin
4549      </option>
4550      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
4551        Compressed Light
4552      </option>
4553      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
4554        Compressed Regular
4555      </option>
4556      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
4557        Compressed Medium
4558      </option>
4559      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
4560        Compressed Bold
4561      </option>
4562      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
4563        Compressed Black
4564      </option>
4565      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
4566        Condensed Ultra Light
4567      </option>
4568      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
4569        Condensed Thin
4570      </option>
4571      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
4572        Condensed Light
4573      </option>
4574      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
4575        Condensed Regular
4576      </option>
4577      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
4578        Condensed Medium
4579      </option>
4580      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
4581        Condensed Bold
4582      </option>
4583      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
4584        Condensed Black
4585      </option>
4586      <option value="standard ultra light" data-wght="100" data-wdth="100">
4587        Standard Ultra Light
4588      </option>
4589      <option value="standard thin" data-wght="200" data-wdth="100">
4590        Standard Thin
4591      </option>
4592      <option value="standard light" data-wght="300" data-wdth="100">
4593        Standard Light
4594      </option>
4595      <option value="standard regular" data-wght="400" data-wdth="100">
4596        Standard Regular
4597      </option>
4598      <option value="standard medium" data-wght="500" data-wdth="100">
4599        Standard Medium
4600      </option>
4601      <option value="standard bold" data-wght="700" data-wdth="100">
4602        Standard Bold
4603      </option>
4604      <option value="standard black" data-wght="900" data-wdth="100">
4605        Standard Black
4606      </option>
4607      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
4608        Extended Ultra Light
4609      </option>
4610      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
4611        Extended Thin
4612      </option>
4613      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
4614        Extended Light
4615      </option>
4616      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
4617        Extended Regular
4618      </option>
4619      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
4620        Extended Medium
4621      </option>
4622      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
4623        Extended Bold
4624      </option>
4625      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
4626        Extended Black
4627      </option>
4628      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
4629        Expanded Ultra Light
4630      </option>
4631      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
4632        Expanded Thin
4633      </option>
4634      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
4635        Expanded Light
4636      </option>
4637      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
4638        Expanded Regular
4639      </option>
4640      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
4641        Expanded Medium
4642      </option>
4643      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
4644        Expanded Bold
4645      </option>
4646      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
4647        Expanded Black
4648      </option>
4649    </select>
4650  </div>
4651
4652  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
4653  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
4654    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4655      <option value="variable" selected="selected">Variable</option>
4656      <option value="looped ultra light" data-wght="100">Ultra Light</option>
4657      <option value="looped thin" data-wght="200">Thin</option>
4658      <option value="looped light" data-wght="300">Light</option>
4659      <option value="looped regular" data-wght="400">Regular</option>
4660      <option value="looped medium" data-wght="500">Medium</option>
4661      <option value="looped bold" data-wght="700">Bold</option>
4662      <option value="looped black" data-wght="900">Black</option>
4663    </select>
4664  </div>
4665
4666  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
4667  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
4668    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4669      <option value="variable" selected="selected">Variable</option>
4670      <option value="ultra light" data-wght="100">Ultra Light</option>
4671      <option value="thin" data-wght="200">Thin</option>
4672      <option value="light" data-wght="300">Light</option>
4673      <option value="regular" data-wght="400">Regular</option>
4674      <option value="medium" data-wght="500">Medium</option>
4675      <option value="bold" data-wght="700">Bold</option>
4676      <option value="black" data-wght="900">Black</option>
4677    </select>
4678  </div>
4679
4680  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
4681    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4682      <option value="variable" selected="selected">Variable</option>
4683      <option value="ultra light" data-wght="100">Ultra Light</option>
4684      <option value="thin" data-wght="200">Thin</option>
4685      <option value="light" data-wght="300">Light</option>
4686      <option value="regular" data-wght="400">Regular</option>
4687      <option value="medium" data-wght="500">Medium</option>
4688      <option value="bold" data-wght="700">Bold</option>
4689      <option value="black" data-wght="900">Black</option>
4690    </select>
4691  </div>
4692
4693  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
4694    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4695      <option value="variable" selected="selected">Variable</option>
4696      <option value="ultra light" data-wght="100">Ultra Light</option>
4697      <option value="thin" data-wght="200">Thin</option>
4698      <option value="light" data-wght="300">Light</option>
4699      <option value="regular" data-wght="400">Regular</option>
4700      <option value="medium" data-wght="500">Medium</option>
4701      <option value="bold" data-wght="700">Bold</option>
4702      <option value="black" data-wght="900">Black</option>
4703    </select>
4704  </div>
4705
4706  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
4707    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4708      <option value="variable" selected="selected">Variable</option>
4709      <option value="ultra light" data-wght="100">Ultra Light</option>
4710      <option value="thin" data-wght="200">Thin</option>
4711      <option value="light" data-wght="300">Light</option>
4712      <option value="regular" data-wght="400">Regular</option>
4713      <option value="medium" data-wght="500">Medium</option>
4714      <option value="bold" data-wght="700">Bold</option>
4715      <option value="black" data-wght="900">Black</option>
4716    </select>
4717  </div>
4718
4719  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
4720  <!-- Thai Slider: Weight (100–900) -->
4721  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
4722  <div data-component="tt__control-area">
4723    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
4724      <div class="flex flex-row justify-between">
4725        <div class="">Width</div>
4726        <div data-component="tt__wdth-value"></div>
4727      </div>
4728      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
4729    </div>
4730    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
4731      <div class="flex flex-row justify-between">
4732        <div class="">Weight</div>
4733        <div data-component="tt__wght-value"></div>
4734      </div>
4735      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange">
4736    </div>
4737  </div>
4738</form>
4739
4740  <!-- Main Content Area -->
4741  <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip">
4742    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ar" data-size="m" dir="rtl"></div>
4743  </div>
4744</section>
4745
4746
4747    <!-- Typetester Sample -->
4748<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
4749  <!-- Partial Width Content Area With Section Nav -->
4750  <!-- Section Nav Area -->
4751<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="arabic">
4752  <!-- Select Script-->
4753  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
4754    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
4755      
4756        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
4757          Latin
4758        </option>
4759      
4760        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
4761          Cyrillic
4762        </option>
4763      
4764        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
4765          Greek
4766        </option>
4767      
4768        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
4769          Vietnamese
4770        </option>
4771      
4772        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar" selected="selected">
4773          Arabic
4774        </option>
4775      
4776        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
4777          Devanagari
4778        </option>
4779      
4780        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
4781          Hebrew
4782        </option>
4783      
4784        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
4785          Korean
4786        </option>
4787      
4788        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
4789          Thai
4790        </option>
4791      </select>
4792  </div>
4793
4794  <!-- Latin: Proportional / Mono Option -->
4795  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
4796    <div class="text-blue hover:text-red pt-1 w-[120px]">
4797  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4798  
4799    <input type="radio" checked="" id="sample-15_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
4800  <label class="nav-radio-label hover:cursor-pointer" for="sample-15_prop-mono_proportional">Proportional</label>
4801</div>
4802
4803    <div class="text-blue hover:text-red pt-1 w-[120px]">
4804  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4805  
4806    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
4807    <input type="radio" id="sample-15_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
4808  <label class="nav-radio-label hover:cursor-pointer" for="sample-15_prop-mono_mono">Monospaced</label>
4809</div>
4810
4811  </fieldset>
4812
4813  <!-- Latin: Upright / Italic Option -->
4814  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
4815    <div class="text-blue hover:text-red pt-1 w-[120px]">
4816  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4817  
4818    <input type="radio" checked="" id="sample-15_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
4819  <label class="nav-radio-label hover:cursor-pointer" for="sample-15_upright-ital_upright">Upright</label>
4820</div>
4821
4822    <div class="text-blue hover:text-red pt-1 w-[120px]">
4823  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4824  
4825    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
4826    <input type="radio" id="sample-15_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
4827  <label class="nav-radio-label hover:cursor-pointer" for="sample-15_upright-ital_italic">Italic</label>
4828</div>
4829
4830  </fieldset>
4831
4832  <!-- Latin: Default / Alternatives Option -->
4833  <!-- Currently Disabled, Too Many Options Syndrome -->
4834  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
4835    <include src="source/html-includes/radio-button.html">
4836      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
4837      "default", "label": "Default", "checked": true, "namePrefix": "sample-15" }
4838    </include>
4839    <include src="source/html-includes/radio-button.html">
4840      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
4841      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
4842      "sample-15" }
4843    </include>
4844  </fieldset> -->
4845
4846  <!-- Thai: Looped / Loopless Option -->
4847  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
4848    <div class="text-blue hover:text-red pt-1 w-[120px]">
4849  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4850  
4851    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
4852    <input type="radio" id="sample-15_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
4853  <label class="nav-radio-label hover:cursor-pointer" for="sample-15_looped_looped">Looped</label>
4854</div>
4855
4856    <div class="text-blue hover:text-red pt-1 w-[120px]">
4857  <!-- I'm sure theres a better way of applying this attribute conditionally -->
4858  
4859    <input type="radio" checked="" id="sample-15_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
4860  <label class="nav-radio-label hover:cursor-pointer" for="sample-15_looped_loopless">Loopless</label>
4861</div>
4862
4863  </fieldset>
4864
4865  <!-- Latin Dropdown: Variable + all 84 styles -->
4866  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
4867    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
4868      <option value="variable" selected="selected">Variable</option>
4869      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
4870        Compressed Ultra Light
4871      </option>
4872      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
4873        Compressed Thin
4874      </option>
4875      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
4876        Compressed Light
4877      </option>
4878      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
4879        Compressed Regular
4880      </option>
4881      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
4882        Compressed Medium
4883      </option>
4884      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
4885        Compressed Bold
4886      </option>
4887      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
4888        Compressed Black
4889      </option>
4890      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
4891        Condensed Ultra Light
4892      </option>
4893      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
4894        Condensed Thin
4895      </option>
4896      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
4897        Condensed Light
4898      </option>
4899      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
4900        Condensed Regular
4901      </option>
4902      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
4903        Condensed Medium
4904      </option>
4905      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
4906        Condensed Bold
4907      </option>
4908      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
4909        Condensed Black
4910      </option>
4911      <option value="standard ultra light" data-wght="100" data-wdth="100">
4912        Standard Ultra Light
4913      </option>
4914      <option value="standard thin" data-wght="200" data-wdth="100">
4915        Standard Thin
4916      </option>
4917      <option value="standard light" data-wght="300" data-wdth="100">
4918        Standard Light
4919      </option>
4920      <option value="standard regular" data-wght="400" data-wdth="100">
4921        Standard Regular
4922      </option>
4923      <option value="standard medium" data-wght="500" data-wdth="100">
4924        Standard Medium
4925      </option>
4926      <option value="standard bold" data-wght="700" data-wdth="100">
4927        Standard Bold
4928      </option>
4929      <option value="standard black" data-wght="900" data-wdth="100">
4930        Standard Black
4931      </option>
4932      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
4933        Extended Ultra Light
4934      </option>
4935      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
4936        Extended Thin
4937      </option>
4938      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
4939        Extended Light
4940      </option>
4941      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
4942        Extended Regular
4943      </option>
4944      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
4945        Extended Medium
4946      </option>
4947      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
4948        Extended Bold
4949      </option>
4950      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
4951        Extended Black
4952      </option>
4953      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
4954        Expanded Ultra Light
4955      </option>
4956      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
4957        Expanded Thin
4958      </option>
4959      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
4960        Expanded Light
4961      </option>
4962      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
4963        Expanded Regular
4964      </option>
4965      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
4966        Expanded Medium
4967      </option>
4968      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
4969        Expanded Bold
4970      </option>
4971      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
4972        Expanded Black
4973      </option>
4974    </select>
4975  </div>
4976
4977  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
4978  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
4979    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4980      <option value="variable" selected="selected">Variable</option>
4981      <option value="looped ultra light" data-wght="100">Ultra Light</option>
4982      <option value="looped thin" data-wght="200">Thin</option>
4983      <option value="looped light" data-wght="300">Light</option>
4984      <option value="looped regular" data-wght="400">Regular</option>
4985      <option value="looped medium" data-wght="500">Medium</option>
4986      <option value="looped bold" data-wght="700">Bold</option>
4987      <option value="looped black" data-wght="900">Black</option>
4988    </select>
4989  </div>
4990
4991  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
4992  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
4993    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
4994      <option value="variable" selected="selected">Variable</option>
4995      <option value="ultra light" data-wght="100">Ultra Light</option>
4996      <option value="thin" data-wght="200">Thin</option>
4997      <option value="light" data-wght="300">Light</option>
4998      <option value="regular" data-wght="400">Regular</option>
4999      <option value="medium" data-wght="500">Medium</option>
5000      <option value="bold" data-wght="700">Bold</option>
5001      <option value="black" data-wght="900">Black</option>
5002    </select>
5003  </div>
5004
5005  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
5006    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5007      <option value="variable" selected="selected">Variable</option>
5008      <option value="ultra light" data-wght="100">Ultra Light</option>
5009      <option value="thin" data-wght="200">Thin</option>
5010      <option value="light" data-wght="300">Light</option>
5011      <option value="regular" data-wght="400">Regular</option>
5012      <option value="medium" data-wght="500">Medium</option>
5013      <option value="bold" data-wght="700">Bold</option>
5014      <option value="black" data-wght="900">Black</option>
5015    </select>
5016  </div>
5017
5018  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
5019    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5020      <option value="variable" selected="selected">Variable</option>
5021      <option value="ultra light" data-wght="100">Ultra Light</option>
5022      <option value="thin" data-wght="200">Thin</option>
5023      <option value="light" data-wght="300">Light</option>
5024      <option value="regular" data-wght="400">Regular</option>
5025      <option value="medium" data-wght="500">Medium</option>
5026      <option value="bold" data-wght="700">Bold</option>
5027      <option value="black" data-wght="900">Black</option>
5028    </select>
5029  </div>
5030
5031  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
5032    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5033      <option value="variable" selected="selected">Variable</option>
5034      <option value="ultra light" data-wght="100">Ultra Light</option>
5035      <option value="thin" data-wght="200">Thin</option>
5036      <option value="light" data-wght="300">Light</option>
5037      <option value="regular" data-wght="400">Regular</option>
5038      <option value="medium" data-wght="500">Medium</option>
5039      <option value="bold" data-wght="700">Bold</option>
5040      <option value="black" data-wght="900">Black</option>
5041    </select>
5042  </div>
5043
5044  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
5045  <!-- Thai Slider: Weight (100–900) -->
5046  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
5047  <div data-component="tt__control-area">
5048    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
5049      <div class="flex flex-row justify-between">
5050        <div class="">Width</div>
5051        <div data-component="tt__wdth-value"></div>
5052      </div>
5053      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
5054    </div>
5055    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
5056      <div class="flex flex-row justify-between">
5057        <div class="">Weight</div>
5058        <div data-component="tt__wght-value"></div>
5059      </div>
5060      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange">
5061    </div>
5062  </div>
5063</form>
5064
5065  <!-- Main Content Area -->
5066  <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip">
5067    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ar" data-size="s" dir="rtl"></div>
5068  </div>
5069</section>
5070
5071
5072    <!-- Typetester Sample -->
5073<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
5074  <!-- Partial Width Content Area With Section Nav -->
5075  <!-- Section Nav Area -->
5076<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="devanagari">
5077  <!-- Select Script-->
5078  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
5079    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
5080      
5081        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
5082          Latin
5083        </option>
5084      
5085        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
5086          Cyrillic
5087        </option>
5088      
5089        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
5090          Greek
5091        </option>
5092      
5093        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
5094          Vietnamese
5095        </option>
5096      
5097        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
5098          Arabic
5099        </option>
5100      
5101        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi" selected="selected">
5102          Devaganari
5103        </option>
5104      
5105        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
5106          Hebrew
5107        </option>
5108      
5109        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
5110          Korean
5111        </option>
5112      
5113        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
5114          Thai
5115        </option>
5116      </select>
5117  </div>
5118
5119  <!-- Latin: Proportional / Mono Option -->
5120  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
5121    <div class="text-blue hover:text-red pt-1 w-[120px]">
5122  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5123  
5124    <input type="radio" checked="" id="sample-16_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
5125  <label class="nav-radio-label hover:cursor-pointer" for="sample-16_prop-mono_proportional">Proportional</label>
5126</div>
5127
5128    <div class="text-blue hover:text-red pt-1 w-[120px]">
5129  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5130  
5131    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
5132    <input type="radio" id="sample-16_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
5133  <label class="nav-radio-label hover:cursor-pointer" for="sample-16_prop-mono_mono">Monospaced</label>
5134</div>
5135
5136  </fieldset>
5137
5138  <!-- Latin: Upright / Italic Option -->
5139  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
5140    <div class="text-blue hover:text-red pt-1 w-[120px]">
5141  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5142  
5143    <input type="radio" checked="" id="sample-16_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
5144  <label class="nav-radio-label hover:cursor-pointer" for="sample-16_upright-ital_upright">Upright</label>
5145</div>
5146
5147    <div class="text-blue hover:text-red pt-1 w-[120px]">
5148  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5149  
5150    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
5151    <input type="radio" id="sample-16_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
5152  <label class="nav-radio-label hover:cursor-pointer" for="sample-16_upright-ital_italic">Italic</label>
5153</div>
5154
5155  </fieldset>
5156
5157  <!-- Latin: Default / Alternatives Option -->
5158  <!-- Currently Disabled, Too Many Options Syndrome -->
5159  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
5160    <include src="source/html-includes/radio-button.html">
5161      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
5162      "default", "label": "Default", "checked": true, "namePrefix": "sample-16" }
5163    </include>
5164    <include src="source/html-includes/radio-button.html">
5165      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
5166      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
5167      "sample-16" }
5168    </include>
5169  </fieldset> -->
5170
5171  <!-- Thai: Looped / Loopless Option -->
5172  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
5173    <div class="text-blue hover:text-red pt-1 w-[120px]">
5174  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5175  
5176    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
5177    <input type="radio" id="sample-16_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
5178  <label class="nav-radio-label hover:cursor-pointer" for="sample-16_looped_looped">Looped</label>
5179</div>
5180
5181    <div class="text-blue hover:text-red pt-1 w-[120px]">
5182  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5183  
5184    <input type="radio" checked="" id="sample-16_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
5185  <label class="nav-radio-label hover:cursor-pointer" for="sample-16_looped_loopless">Loopless</label>
5186</div>
5187
5188  </fieldset>
5189
5190  <!-- Latin Dropdown: Variable + all 84 styles -->
5191  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
5192    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
5193      <option value="variable" selected="selected">Variable</option>
5194      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
5195        Compressed Ultra Light
5196      </option>
5197      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
5198        Compressed Thin
5199      </option>
5200      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
5201        Compressed Light
5202      </option>
5203      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
5204        Compressed Regular
5205      </option>
5206      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
5207        Compressed Medium
5208      </option>
5209      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
5210        Compressed Bold
5211      </option>
5212      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
5213        Compressed Black
5214      </option>
5215      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
5216        Condensed Ultra Light
5217      </option>
5218      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
5219        Condensed Thin
5220      </option>
5221      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
5222        Condensed Light
5223      </option>
5224      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
5225        Condensed Regular
5226      </option>
5227      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
5228        Condensed Medium
5229      </option>
5230      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
5231        Condensed Bold
5232      </option>
5233      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
5234        Condensed Black
5235      </option>
5236      <option value="standard ultra light" data-wght="100" data-wdth="100">
5237        Standard Ultra Light
5238      </option>
5239      <option value="standard thin" data-wght="200" data-wdth="100">
5240        Standard Thin
5241      </option>
5242      <option value="standard light" data-wght="300" data-wdth="100">
5243        Standard Light
5244      </option>
5245      <option value="standard regular" data-wght="400" data-wdth="100">
5246        Standard Regular
5247      </option>
5248      <option value="standard medium" data-wght="500" data-wdth="100">
5249        Standard Medium
5250      </option>
5251      <option value="standard bold" data-wght="700" data-wdth="100">
5252        Standard Bold
5253      </option>
5254      <option value="standard black" data-wght="900" data-wdth="100">
5255        Standard Black
5256      </option>
5257      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
5258        Extended Ultra Light
5259      </option>
5260      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
5261        Extended Thin
5262      </option>
5263      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
5264        Extended Light
5265      </option>
5266      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
5267        Extended Regular
5268      </option>
5269      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
5270        Extended Medium
5271      </option>
5272      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
5273        Extended Bold
5274      </option>
5275      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
5276        Extended Black
5277      </option>
5278      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
5279        Expanded Ultra Light
5280      </option>
5281      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
5282        Expanded Thin
5283      </option>
5284      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
5285        Expanded Light
5286      </option>
5287      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
5288        Expanded Regular
5289      </option>
5290      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
5291        Expanded Medium
5292      </option>
5293      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
5294        Expanded Bold
5295      </option>
5296      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
5297        Expanded Black
5298      </option>
5299    </select>
5300  </div>
5301
5302  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
5303  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
5304    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5305      <option value="variable" selected="selected">Variable</option>
5306      <option value="looped ultra light" data-wght="100">Ultra Light</option>
5307      <option value="looped thin" data-wght="200">Thin</option>
5308      <option value="looped light" data-wght="300">Light</option>
5309      <option value="looped regular" data-wght="400">Regular</option>
5310      <option value="looped medium" data-wght="500">Medium</option>
5311      <option value="looped bold" data-wght="700">Bold</option>
5312      <option value="looped black" data-wght="900">Black</option>
5313    </select>
5314  </div>
5315
5316  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
5317  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
5318    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5319      <option value="variable" selected="selected">Variable</option>
5320      <option value="ultra light" data-wght="100">Ultra Light</option>
5321      <option value="thin" data-wght="200">Thin</option>
5322      <option value="light" data-wght="300">Light</option>
5323      <option value="regular" data-wght="400">Regular</option>
5324      <option value="medium" data-wght="500">Medium</option>
5325      <option value="bold" data-wght="700">Bold</option>
5326      <option value="black" data-wght="900">Black</option>
5327    </select>
5328  </div>
5329
5330  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
5331    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5332      <option value="variable" selected="selected">Variable</option>
5333      <option value="ultra light" data-wght="100">Ultra Light</option>
5334      <option value="thin" data-wght="200">Thin</option>
5335      <option value="light" data-wght="300">Light</option>
5336      <option value="regular" data-wght="400">Regular</option>
5337      <option value="medium" data-wght="500">Medium</option>
5338      <option value="bold" data-wght="700">Bold</option>
5339      <option value="black" data-wght="900">Black</option>
5340    </select>
5341  </div>
5342
5343  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
5344    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5345      <option value="variable" selected="selected">Variable</option>
5346      <option value="ultra light" data-wght="100">Ultra Light</option>
5347      <option value="thin" data-wght="200">Thin</option>
5348      <option value="light" data-wght="300">Light</option>
5349      <option value="regular" data-wght="400">Regular</option>
5350      <option value="medium" data-wght="500">Medium</option>
5351      <option value="bold" data-wght="700">Bold</option>
5352      <option value="black" data-wght="900">Black</option>
5353    </select>
5354  </div>
5355
5356  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
5357    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5358      <option value="variable" selected="selected">Variable</option>
5359      <option value="ultra light" data-wght="100">Ultra Light</option>
5360      <option value="thin" data-wght="200">Thin</option>
5361      <option value="light" data-wght="300">Light</option>
5362      <option value="regular" data-wght="400">Regular</option>
5363      <option value="medium" data-wght="500">Medium</option>
5364      <option value="bold" data-wght="700">Bold</option>
5365      <option value="black" data-wght="900">Black</option>
5366    </select>
5367  </div>
5368
5369  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
5370  <!-- Thai Slider: Weight (100–900) -->
5371  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
5372  <div data-component="tt__control-area">
5373    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
5374      <div class="flex flex-row justify-between">
5375        <div class="">Width</div>
5376        <div data-component="tt__wdth-value"></div>
5377      </div>
5378      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
5379    </div>
5380    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
5381      <div class="flex flex-row justify-between">
5382        <div class="">Weight</div>
5383        <div data-component="tt__wght-value"></div>
5384      </div>
5385      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="500" class="typetester-slider w-full" id="typetesterWghtRange">
5386    </div>
5387  </div>
5388</form>
5389
5390  <!-- Main Content Area -->
5391  <div class="md:ml-[48px] flex w-full justify-center align-middle">
5392    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="hi" data-size="l"></div>
5393  </div>
5394</section>
5395
5396
5397    <!-- Typetester Sample -->
5398<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
5399  <!-- Partial Width Content Area With Section Nav -->
5400  <!-- Section Nav Area -->
5401<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="devanagari">
5402  <!-- Select Script-->
5403  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
5404    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
5405      
5406        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
5407          Latin
5408        </option>
5409      
5410        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
5411          Cyrillic
5412        </option>
5413      
5414        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
5415          Greek
5416        </option>
5417      
5418        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
5419          Vietnamese
5420        </option>
5421      
5422        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
5423          Arabic
5424        </option>
5425      
5426        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi" selected="selected">
5427          Devaganari
5428        </option>
5429      
5430        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
5431          Hebrew
5432        </option>
5433      
5434        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
5435          Korean
5436        </option>
5437      
5438        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
5439          Thai
5440        </option>
5441      </select>
5442  </div>
5443
5444  <!-- Latin: Proportional / Mono Option -->
5445  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
5446    <div class="text-blue hover:text-red pt-1 w-[120px]">
5447  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5448  
5449    <input type="radio" checked="" id="sample-17_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
5450  <label class="nav-radio-label hover:cursor-pointer" for="sample-17_prop-mono_proportional">Proportional</label>
5451</div>
5452
5453    <div class="text-blue hover:text-red pt-1 w-[120px]">
5454  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5455  
5456    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
5457    <input type="radio" id="sample-17_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
5458  <label class="nav-radio-label hover:cursor-pointer" for="sample-17_prop-mono_mono">Monospaced</label>
5459</div>
5460
5461  </fieldset>
5462
5463  <!-- Latin: Upright / Italic Option -->
5464  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
5465    <div class="text-blue hover:text-red pt-1 w-[120px]">
5466  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5467  
5468    <input type="radio" checked="" id="sample-17_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
5469  <label class="nav-radio-label hover:cursor-pointer" for="sample-17_upright-ital_upright">Upright</label>
5470</div>
5471
5472    <div class="text-blue hover:text-red pt-1 w-[120px]">
5473  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5474  
5475    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
5476    <input type="radio" id="sample-17_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
5477  <label class="nav-radio-label hover:cursor-pointer" for="sample-17_upright-ital_italic">Italic</label>
5478</div>
5479
5480  </fieldset>
5481
5482  <!-- Latin: Default / Alternatives Option -->
5483  <!-- Currently Disabled, Too Many Options Syndrome -->
5484  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
5485    <include src="source/html-includes/radio-button.html">
5486      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
5487      "default", "label": "Default", "checked": true, "namePrefix": "sample-17" }
5488    </include>
5489    <include src="source/html-includes/radio-button.html">
5490      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
5491      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
5492      "sample-17" }
5493    </include>
5494  </fieldset> -->
5495
5496  <!-- Thai: Looped / Loopless Option -->
5497  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
5498    <div class="text-blue hover:text-red pt-1 w-[120px]">
5499  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5500  
5501    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
5502    <input type="radio" id="sample-17_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
5503  <label class="nav-radio-label hover:cursor-pointer" for="sample-17_looped_looped">Looped</label>
5504</div>
5505
5506    <div class="text-blue hover:text-red pt-1 w-[120px]">
5507  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5508  
5509    <input type="radio" checked="" id="sample-17_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
5510  <label class="nav-radio-label hover:cursor-pointer" for="sample-17_looped_loopless">Loopless</label>
5511</div>
5512
5513  </fieldset>
5514
5515  <!-- Latin Dropdown: Variable + all 84 styles -->
5516  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
5517    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
5518      <option value="variable" selected="selected">Variable</option>
5519      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
5520        Compressed Ultra Light
5521      </option>
5522      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
5523        Compressed Thin
5524      </option>
5525      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
5526        Compressed Light
5527      </option>
5528      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
5529        Compressed Regular
5530      </option>
5531      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
5532        Compressed Medium
5533      </option>
5534      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
5535        Compressed Bold
5536      </option>
5537      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
5538        Compressed Black
5539      </option>
5540      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
5541        Condensed Ultra Light
5542      </option>
5543      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
5544        Condensed Thin
5545      </option>
5546      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
5547        Condensed Light
5548      </option>
5549      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
5550        Condensed Regular
5551      </option>
5552      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
5553        Condensed Medium
5554      </option>
5555      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
5556        Condensed Bold
5557      </option>
5558      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
5559        Condensed Black
5560      </option>
5561      <option value="standard ultra light" data-wght="100" data-wdth="100">
5562        Standard Ultra Light
5563      </option>
5564      <option value="standard thin" data-wght="200" data-wdth="100">
5565        Standard Thin
5566      </option>
5567      <option value="standard light" data-wght="300" data-wdth="100">
5568        Standard Light
5569      </option>
5570      <option value="standard regular" data-wght="400" data-wdth="100">
5571        Standard Regular
5572      </option>
5573      <option value="standard medium" data-wght="500" data-wdth="100">
5574        Standard Medium
5575      </option>
5576      <option value="standard bold" data-wght="700" data-wdth="100">
5577        Standard Bold
5578      </option>
5579      <option value="standard black" data-wght="900" data-wdth="100">
5580        Standard Black
5581      </option>
5582      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
5583        Extended Ultra Light
5584      </option>
5585      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
5586        Extended Thin
5587      </option>
5588      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
5589        Extended Light
5590      </option>
5591      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
5592        Extended Regular
5593      </option>
5594      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
5595        Extended Medium
5596      </option>
5597      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
5598        Extended Bold
5599      </option>
5600      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
5601        Extended Black
5602      </option>
5603      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
5604        Expanded Ultra Light
5605      </option>
5606      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
5607        Expanded Thin
5608      </option>
5609      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
5610        Expanded Light
5611      </option>
5612      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
5613        Expanded Regular
5614      </option>
5615      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
5616        Expanded Medium
5617      </option>
5618      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
5619        Expanded Bold
5620      </option>
5621      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
5622        Expanded Black
5623      </option>
5624    </select>
5625  </div>
5626
5627  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
5628  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
5629    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5630      <option value="variable" selected="selected">Variable</option>
5631      <option value="looped ultra light" data-wght="100">Ultra Light</option>
5632      <option value="looped thin" data-wght="200">Thin</option>
5633      <option value="looped light" data-wght="300">Light</option>
5634      <option value="looped regular" data-wght="400">Regular</option>
5635      <option value="looped medium" data-wght="500">Medium</option>
5636      <option value="looped bold" data-wght="700">Bold</option>
5637      <option value="looped black" data-wght="900">Black</option>
5638    </select>
5639  </div>
5640
5641  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
5642  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
5643    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5644      <option value="variable" selected="selected">Variable</option>
5645      <option value="ultra light" data-wght="100">Ultra Light</option>
5646      <option value="thin" data-wght="200">Thin</option>
5647      <option value="light" data-wght="300">Light</option>
5648      <option value="regular" data-wght="400">Regular</option>
5649      <option value="medium" data-wght="500">Medium</option>
5650      <option value="bold" data-wght="700">Bold</option>
5651      <option value="black" data-wght="900">Black</option>
5652    </select>
5653  </div>
5654
5655  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
5656    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5657      <option value="variable" selected="selected">Variable</option>
5658      <option value="ultra light" data-wght="100">Ultra Light</option>
5659      <option value="thin" data-wght="200">Thin</option>
5660      <option value="light" data-wght="300">Light</option>
5661      <option value="regular" data-wght="400">Regular</option>
5662      <option value="medium" data-wght="500">Medium</option>
5663      <option value="bold" data-wght="700">Bold</option>
5664      <option value="black" data-wght="900">Black</option>
5665    </select>
5666  </div>
5667
5668  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
5669    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5670      <option value="variable" selected="selected">Variable</option>
5671      <option value="ultra light" data-wght="100">Ultra Light</option>
5672      <option value="thin" data-wght="200">Thin</option>
5673      <option value="light" data-wght="300">Light</option>
5674      <option value="regular" data-wght="400">Regular</option>
5675      <option value="medium" data-wght="500">Medium</option>
5676      <option value="bold" data-wght="700">Bold</option>
5677      <option value="black" data-wght="900">Black</option>
5678    </select>
5679  </div>
5680
5681  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
5682    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5683      <option value="variable" selected="selected">Variable</option>
5684      <option value="ultra light" data-wght="100">Ultra Light</option>
5685      <option value="thin" data-wght="200">Thin</option>
5686      <option value="light" data-wght="300">Light</option>
5687      <option value="regular" data-wght="400">Regular</option>
5688      <option value="medium" data-wght="500">Medium</option>
5689      <option value="bold" data-wght="700">Bold</option>
5690      <option value="black" data-wght="900">Black</option>
5691    </select>
5692  </div>
5693
5694  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
5695  <!-- Thai Slider: Weight (100–900) -->
5696  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
5697  <div data-component="tt__control-area">
5698    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
5699      <div class="flex flex-row justify-between">
5700        <div class="">Width</div>
5701        <div data-component="tt__wdth-value"></div>
5702      </div>
5703      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
5704    </div>
5705    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
5706      <div class="flex flex-row justify-between">
5707        <div class="">Weight</div>
5708        <div data-component="tt__wght-value"></div>
5709      </div>
5710      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange">
5711    </div>
5712  </div>
5713</form>
5714
5715  <!-- Main Content Area -->
5716  <div class="md:ml-[48px] flex w-full justify-center align-middle">
5717    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="hi" data-size="m"></div>
5718  </div>
5719</section>
5720
5721
5722    <!-- Typetester Sample -->
5723<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
5724  <!-- Partial Width Content Area With Section Nav -->
5725  <!-- Section Nav Area -->
5726<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="devanagari">
5727  <!-- Select Script-->
5728  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
5729    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
5730      
5731        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
5732          Latin
5733        </option>
5734      
5735        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
5736          Cyrillic
5737        </option>
5738      
5739        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
5740          Greek
5741        </option>
5742      
5743        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
5744          Vietnamese
5745        </option>
5746      
5747        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
5748          Arabic
5749        </option>
5750      
5751        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi" selected="selected">
5752          Devaganari
5753        </option>
5754      
5755        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
5756          Hebrew
5757        </option>
5758      
5759        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
5760          Korean
5761        </option>
5762      
5763        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
5764          Thai
5765        </option>
5766      </select>
5767  </div>
5768
5769  <!-- Latin: Proportional / Mono Option -->
5770  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
5771    <div class="text-blue hover:text-red pt-1 w-[120px]">
5772  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5773  
5774    <input type="radio" checked="" id="sample-18_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
5775  <label class="nav-radio-label hover:cursor-pointer" for="sample-18_prop-mono_proportional">Proportional</label>
5776</div>
5777
5778    <div class="text-blue hover:text-red pt-1 w-[120px]">
5779  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5780  
5781    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
5782    <input type="radio" id="sample-18_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
5783  <label class="nav-radio-label hover:cursor-pointer" for="sample-18_prop-mono_mono">Monospaced</label>
5784</div>
5785
5786  </fieldset>
5787
5788  <!-- Latin: Upright / Italic Option -->
5789  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
5790    <div class="text-blue hover:text-red pt-1 w-[120px]">
5791  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5792  
5793    <input type="radio" checked="" id="sample-18_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
5794  <label class="nav-radio-label hover:cursor-pointer" for="sample-18_upright-ital_upright">Upright</label>
5795</div>
5796
5797    <div class="text-blue hover:text-red pt-1 w-[120px]">
5798  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5799  
5800    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
5801    <input type="radio" id="sample-18_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
5802  <label class="nav-radio-label hover:cursor-pointer" for="sample-18_upright-ital_italic">Italic</label>
5803</div>
5804
5805  </fieldset>
5806
5807  <!-- Latin: Default / Alternatives Option -->
5808  <!-- Currently Disabled, Too Many Options Syndrome -->
5809  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
5810    <include src="source/html-includes/radio-button.html">
5811      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
5812      "default", "label": "Default", "checked": true, "namePrefix": "sample-18" }
5813    </include>
5814    <include src="source/html-includes/radio-button.html">
5815      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
5816      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
5817      "sample-18" }
5818    </include>
5819  </fieldset> -->
5820
5821  <!-- Thai: Looped / Loopless Option -->
5822  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
5823    <div class="text-blue hover:text-red pt-1 w-[120px]">
5824  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5825  
5826    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
5827    <input type="radio" id="sample-18_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
5828  <label class="nav-radio-label hover:cursor-pointer" for="sample-18_looped_looped">Looped</label>
5829</div>
5830
5831    <div class="text-blue hover:text-red pt-1 w-[120px]">
5832  <!-- I'm sure theres a better way of applying this attribute conditionally -->
5833  
5834    <input type="radio" checked="" id="sample-18_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
5835  <label class="nav-radio-label hover:cursor-pointer" for="sample-18_looped_loopless">Loopless</label>
5836</div>
5837
5838  </fieldset>
5839
5840  <!-- Latin Dropdown: Variable + all 84 styles -->
5841  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
5842    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
5843      <option value="variable" selected="selected">Variable</option>
5844      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
5845        Compressed Ultra Light
5846      </option>
5847      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
5848        Compressed Thin
5849      </option>
5850      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
5851        Compressed Light
5852      </option>
5853      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
5854        Compressed Regular
5855      </option>
5856      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
5857        Compressed Medium
5858      </option>
5859      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
5860        Compressed Bold
5861      </option>
5862      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
5863        Compressed Black
5864      </option>
5865      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
5866        Condensed Ultra Light
5867      </option>
5868      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
5869        Condensed Thin
5870      </option>
5871      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
5872        Condensed Light
5873      </option>
5874      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
5875        Condensed Regular
5876      </option>
5877      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
5878        Condensed Medium
5879      </option>
5880      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
5881        Condensed Bold
5882      </option>
5883      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
5884        Condensed Black
5885      </option>
5886      <option value="standard ultra light" data-wght="100" data-wdth="100">
5887        Standard Ultra Light
5888      </option>
5889      <option value="standard thin" data-wght="200" data-wdth="100">
5890        Standard Thin
5891      </option>
5892      <option value="standard light" data-wght="300" data-wdth="100">
5893        Standard Light
5894      </option>
5895      <option value="standard regular" data-wght="400" data-wdth="100">
5896        Standard Regular
5897      </option>
5898      <option value="standard medium" data-wght="500" data-wdth="100">
5899        Standard Medium
5900      </option>
5901      <option value="standard bold" data-wght="700" data-wdth="100">
5902        Standard Bold
5903      </option>
5904      <option value="standard black" data-wght="900" data-wdth="100">
5905        Standard Black
5906      </option>
5907      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
5908        Extended Ultra Light
5909      </option>
5910      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
5911        Extended Thin
5912      </option>
5913      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
5914        Extended Light
5915      </option>
5916      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
5917        Extended Regular
5918      </option>
5919      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
5920        Extended Medium
5921      </option>
5922      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
5923        Extended Bold
5924      </option>
5925      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
5926        Extended Black
5927      </option>
5928      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
5929        Expanded Ultra Light
5930      </option>
5931      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
5932        Expanded Thin
5933      </option>
5934      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
5935        Expanded Light
5936      </option>
5937      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
5938        Expanded Regular
5939      </option>
5940      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
5941        Expanded Medium
5942      </option>
5943      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
5944        Expanded Bold
5945      </option>
5946      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
5947        Expanded Black
5948      </option>
5949    </select>
5950  </div>
5951
5952  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
5953  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
5954    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5955      <option value="variable" selected="selected">Variable</option>
5956      <option value="looped ultra light" data-wght="100">Ultra Light</option>
5957      <option value="looped thin" data-wght="200">Thin</option>
5958      <option value="looped light" data-wght="300">Light</option>
5959      <option value="looped regular" data-wght="400">Regular</option>
5960      <option value="looped medium" data-wght="500">Medium</option>
5961      <option value="looped bold" data-wght="700">Bold</option>
5962      <option value="looped black" data-wght="900">Black</option>
5963    </select>
5964  </div>
5965
5966  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
5967  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
5968    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5969      <option value="variable" selected="selected">Variable</option>
5970      <option value="ultra light" data-wght="100">Ultra Light</option>
5971      <option value="thin" data-wght="200">Thin</option>
5972      <option value="light" data-wght="300">Light</option>
5973      <option value="regular" data-wght="400">Regular</option>
5974      <option value="medium" data-wght="500">Medium</option>
5975      <option value="bold" data-wght="700">Bold</option>
5976      <option value="black" data-wght="900">Black</option>
5977    </select>
5978  </div>
5979
5980  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
5981    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5982      <option value="variable" selected="selected">Variable</option>
5983      <option value="ultra light" data-wght="100">Ultra Light</option>
5984      <option value="thin" data-wght="200">Thin</option>
5985      <option value="light" data-wght="300">Light</option>
5986      <option value="regular" data-wght="400">Regular</option>
5987      <option value="medium" data-wght="500">Medium</option>
5988      <option value="bold" data-wght="700">Bold</option>
5989      <option value="black" data-wght="900">Black</option>
5990    </select>
5991  </div>
5992
5993  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
5994    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
5995      <option value="variable" selected="selected">Variable</option>
5996      <option value="ultra light" data-wght="100">Ultra Light</option>
5997      <option value="thin" data-wght="200">Thin</option>
5998      <option value="light" data-wght="300">Light</option>
5999      <option value="regular" data-wght="400">Regular</option>
6000      <option value="medium" data-wght="500">Medium</option>
6001      <option value="bold" data-wght="700">Bold</option>
6002      <option value="black" data-wght="900">Black</option>
6003    </select>
6004  </div>
6005
6006  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
6007    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6008      <option value="variable" selected="selected">Variable</option>
6009      <option value="ultra light" data-wght="100">Ultra Light</option>
6010      <option value="thin" data-wght="200">Thin</option>
6011      <option value="light" data-wght="300">Light</option>
6012      <option value="regular" data-wght="400">Regular</option>
6013      <option value="medium" data-wght="500">Medium</option>
6014      <option value="bold" data-wght="700">Bold</option>
6015      <option value="black" data-wght="900">Black</option>
6016    </select>
6017  </div>
6018
6019  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
6020  <!-- Thai Slider: Weight (100–900) -->
6021  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
6022  <div data-component="tt__control-area">
6023    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
6024      <div class="flex flex-row justify-between">
6025        <div class="">Width</div>
6026        <div data-component="tt__wdth-value"></div>
6027      </div>
6028      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
6029    </div>
6030    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
6031      <div class="flex flex-row justify-between">
6032        <div class="">Weight</div>
6033        <div data-component="tt__wght-value"></div>
6034      </div>
6035      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange">
6036    </div>
6037  </div>
6038</form>
6039
6040  <!-- Main Content Area -->
6041  <div class="md:ml-[48px] flex w-full justify-center align-middle">
6042    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="hi" data-size="s"></div>
6043  </div>
6044</section>
6045
6046
6047    <!-- Typetester Sample -->
6048<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
6049  <!-- Partial Width Content Area With Section Nav -->
6050  <!-- Section Nav Area -->
6051<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="hebrew">
6052  <!-- Select Script-->
6053  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
6054    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
6055      
6056        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
6057          Latin
6058        </option>
6059      
6060        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
6061          Cyrillic
6062        </option>
6063      
6064        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
6065          Greek
6066        </option>
6067      
6068        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
6069          Vietnamese
6070        </option>
6071      
6072        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
6073          Arabic
6074        </option>
6075      
6076        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
6077          Devanagari
6078        </option>
6079      
6080        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he" selected="selected">
6081          Hebrew
6082        </option>
6083      
6084        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
6085          Korean
6086        </option>
6087      
6088        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
6089          Thai
6090        </option>
6091      </select>
6092  </div>
6093
6094  <!-- Latin: Proportional / Mono Option -->
6095  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
6096    <div class="text-blue hover:text-red pt-1 w-[120px]">
6097  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6098  
6099    <input type="radio" checked="" id="sample-19_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
6100  <label class="nav-radio-label hover:cursor-pointer" for="sample-19_prop-mono_proportional">Proportional</label>
6101</div>
6102
6103    <div class="text-blue hover:text-red pt-1 w-[120px]">
6104  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6105  
6106    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
6107    <input type="radio" id="sample-19_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
6108  <label class="nav-radio-label hover:cursor-pointer" for="sample-19_prop-mono_mono">Monospaced</label>
6109</div>
6110
6111  </fieldset>
6112
6113  <!-- Latin: Upright / Italic Option -->
6114  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
6115    <div class="text-blue hover:text-red pt-1 w-[120px]">
6116  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6117  
6118    <input type="radio" checked="" id="sample-19_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
6119  <label class="nav-radio-label hover:cursor-pointer" for="sample-19_upright-ital_upright">Upright</label>
6120</div>
6121
6122    <div class="text-blue hover:text-red pt-1 w-[120px]">
6123  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6124  
6125    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
6126    <input type="radio" id="sample-19_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
6127  <label class="nav-radio-label hover:cursor-pointer" for="sample-19_upright-ital_italic">Italic</label>
6128</div>
6129
6130  </fieldset>
6131
6132  <!-- Latin: Default / Alternatives Option -->
6133  <!-- Currently Disabled, Too Many Options Syndrome -->
6134  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
6135    <include src="source/html-includes/radio-button.html">
6136      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
6137      "default", "label": "Default", "checked": true, "namePrefix": "sample-19" }
6138    </include>
6139    <include src="source/html-includes/radio-button.html">
6140      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
6141      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
6142      "sample-19" }
6143    </include>
6144  </fieldset> -->
6145
6146  <!-- Thai: Looped / Loopless Option -->
6147  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
6148    <div class="text-blue hover:text-red pt-1 w-[120px]">
6149  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6150  
6151    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
6152    <input type="radio" id="sample-19_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
6153  <label class="nav-radio-label hover:cursor-pointer" for="sample-19_looped_looped">Looped</label>
6154</div>
6155
6156    <div class="text-blue hover:text-red pt-1 w-[120px]">
6157  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6158  
6159    <input type="radio" checked="" id="sample-19_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
6160  <label class="nav-radio-label hover:cursor-pointer" for="sample-19_looped_loopless">Loopless</label>
6161</div>
6162
6163  </fieldset>
6164
6165  <!-- Latin Dropdown: Variable + all 84 styles -->
6166  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
6167    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
6168      <option value="variable" selected="selected">Variable</option>
6169      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
6170        Compressed Ultra Light
6171      </option>
6172      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
6173        Compressed Thin
6174      </option>
6175      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
6176        Compressed Light
6177      </option>
6178      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
6179        Compressed Regular
6180      </option>
6181      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
6182        Compressed Medium
6183      </option>
6184      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
6185        Compressed Bold
6186      </option>
6187      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
6188        Compressed Black
6189      </option>
6190      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
6191        Condensed Ultra Light
6192      </option>
6193      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
6194        Condensed Thin
6195      </option>
6196      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
6197        Condensed Light
6198      </option>
6199      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
6200        Condensed Regular
6201      </option>
6202      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
6203        Condensed Medium
6204      </option>
6205      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
6206        Condensed Bold
6207      </option>
6208      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
6209        Condensed Black
6210      </option>
6211      <option value="standard ultra light" data-wght="100" data-wdth="100">
6212        Standard Ultra Light
6213      </option>
6214      <option value="standard thin" data-wght="200" data-wdth="100">
6215        Standard Thin
6216      </option>
6217      <option value="standard light" data-wght="300" data-wdth="100">
6218        Standard Light
6219      </option>
6220      <option value="standard regular" data-wght="400" data-wdth="100">
6221        Standard Regular
6222      </option>
6223      <option value="standard medium" data-wght="500" data-wdth="100">
6224        Standard Medium
6225      </option>
6226      <option value="standard bold" data-wght="700" data-wdth="100">
6227        Standard Bold
6228      </option>
6229      <option value="standard black" data-wght="900" data-wdth="100">
6230        Standard Black
6231      </option>
6232      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
6233        Extended Ultra Light
6234      </option>
6235      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
6236        Extended Thin
6237      </option>
6238      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
6239        Extended Light
6240      </option>
6241      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
6242        Extended Regular
6243      </option>
6244      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
6245        Extended Medium
6246      </option>
6247      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
6248        Extended Bold
6249      </option>
6250      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
6251        Extended Black
6252      </option>
6253      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
6254        Expanded Ultra Light
6255      </option>
6256      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
6257        Expanded Thin
6258      </option>
6259      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
6260        Expanded Light
6261      </option>
6262      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
6263        Expanded Regular
6264      </option>
6265      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
6266        Expanded Medium
6267      </option>
6268      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
6269        Expanded Bold
6270      </option>
6271      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
6272        Expanded Black
6273      </option>
6274    </select>
6275  </div>
6276
6277  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
6278  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
6279    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6280      <option value="variable" selected="selected">Variable</option>
6281      <option value="looped ultra light" data-wght="100">Ultra Light</option>
6282      <option value="looped thin" data-wght="200">Thin</option>
6283      <option value="looped light" data-wght="300">Light</option>
6284      <option value="looped regular" data-wght="400">Regular</option>
6285      <option value="looped medium" data-wght="500">Medium</option>
6286      <option value="looped bold" data-wght="700">Bold</option>
6287      <option value="looped black" data-wght="900">Black</option>
6288    </select>
6289  </div>
6290
6291  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
6292  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
6293    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6294      <option value="variable" selected="selected">Variable</option>
6295      <option value="ultra light" data-wght="100">Ultra Light</option>
6296      <option value="thin" data-wght="200">Thin</option>
6297      <option value="light" data-wght="300">Light</option>
6298      <option value="regular" data-wght="400">Regular</option>
6299      <option value="medium" data-wght="500">Medium</option>
6300      <option value="bold" data-wght="700">Bold</option>
6301      <option value="black" data-wght="900">Black</option>
6302    </select>
6303  </div>
6304
6305  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
6306    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6307      <option value="variable" selected="selected">Variable</option>
6308      <option value="ultra light" data-wght="100">Ultra Light</option>
6309      <option value="thin" data-wght="200">Thin</option>
6310      <option value="light" data-wght="300">Light</option>
6311      <option value="regular" data-wght="400">Regular</option>
6312      <option value="medium" data-wght="500">Medium</option>
6313      <option value="bold" data-wght="700">Bold</option>
6314      <option value="black" data-wght="900">Black</option>
6315    </select>
6316  </div>
6317
6318  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
6319    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6320      <option value="variable" selected="selected">Variable</option>
6321      <option value="ultra light" data-wght="100">Ultra Light</option>
6322      <option value="thin" data-wght="200">Thin</option>
6323      <option value="light" data-wght="300">Light</option>
6324      <option value="regular" data-wght="400">Regular</option>
6325      <option value="medium" data-wght="500">Medium</option>
6326      <option value="bold" data-wght="700">Bold</option>
6327      <option value="black" data-wght="900">Black</option>
6328    </select>
6329  </div>
6330
6331  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
6332    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6333      <option value="variable" selected="selected">Variable</option>
6334      <option value="ultra light" data-wght="100">Ultra Light</option>
6335      <option value="thin" data-wght="200">Thin</option>
6336      <option value="light" data-wght="300">Light</option>
6337      <option value="regular" data-wght="400">Regular</option>
6338      <option value="medium" data-wght="500">Medium</option>
6339      <option value="bold" data-wght="700">Bold</option>
6340      <option value="black" data-wght="900">Black</option>
6341    </select>
6342  </div>
6343
6344  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
6345  <!-- Thai Slider: Weight (100–900) -->
6346  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
6347  <div data-component="tt__control-area">
6348    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
6349      <div class="flex flex-row justify-between">
6350        <div class="">Width</div>
6351        <div data-component="tt__wdth-value"></div>
6352      </div>
6353      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
6354    </div>
6355    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
6356      <div class="flex flex-row justify-between">
6357        <div class="">Weight</div>
6358        <div data-component="tt__wght-value"></div>
6359      </div>
6360      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange">
6361    </div>
6362  </div>
6363</form>
6364
6365  <!-- Main Content Area -->
6366  <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip">
6367    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="he" data-size="l" dir="rtl"></div>
6368  </div>
6369</section>
6370
6371
6372    <!-- Typetester Sample -->
6373<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
6374  <!-- Partial Width Content Area With Section Nav -->
6375  <!-- Section Nav Area -->
6376<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="hebrew">
6377  <!-- Select Script-->
6378  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
6379    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
6380      
6381        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
6382          Latin
6383        </option>
6384      
6385        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
6386          Cyrillic
6387        </option>
6388      
6389        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
6390          Greek
6391        </option>
6392      
6393        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
6394          Vietnamese
6395        </option>
6396      
6397        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
6398          Arabic
6399        </option>
6400      
6401        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
6402          Devanagari
6403        </option>
6404      
6405        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he" selected="selected">
6406          Hebrew
6407        </option>
6408      
6409        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
6410          Korean
6411        </option>
6412      
6413        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
6414          Thai
6415        </option>
6416      </select>
6417  </div>
6418
6419  <!-- Latin: Proportional / Mono Option -->
6420  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
6421    <div class="text-blue hover:text-red pt-1 w-[120px]">
6422  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6423  
6424    <input type="radio" checked="" id="sample-20_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
6425  <label class="nav-radio-label hover:cursor-pointer" for="sample-20_prop-mono_proportional">Proportional</label>
6426</div>
6427
6428    <div class="text-blue hover:text-red pt-1 w-[120px]">
6429  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6430  
6431    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
6432    <input type="radio" id="sample-20_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
6433  <label class="nav-radio-label hover:cursor-pointer" for="sample-20_prop-mono_mono">Monospaced</label>
6434</div>
6435
6436  </fieldset>
6437
6438  <!-- Latin: Upright / Italic Option -->
6439  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
6440    <div class="text-blue hover:text-red pt-1 w-[120px]">
6441  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6442  
6443    <input type="radio" checked="" id="sample-20_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
6444  <label class="nav-radio-label hover:cursor-pointer" for="sample-20_upright-ital_upright">Upright</label>
6445</div>
6446
6447    <div class="text-blue hover:text-red pt-1 w-[120px]">
6448  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6449  
6450    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
6451    <input type="radio" id="sample-20_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
6452  <label class="nav-radio-label hover:cursor-pointer" for="sample-20_upright-ital_italic">Italic</label>
6453</div>
6454
6455  </fieldset>
6456
6457  <!-- Latin: Default / Alternatives Option -->
6458  <!-- Currently Disabled, Too Many Options Syndrome -->
6459  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
6460    <include src="source/html-includes/radio-button.html">
6461      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
6462      "default", "label": "Default", "checked": true, "namePrefix": "sample-20" }
6463    </include>
6464    <include src="source/html-includes/radio-button.html">
6465      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
6466      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
6467      "sample-20" }
6468    </include>
6469  </fieldset> -->
6470
6471  <!-- Thai: Looped / Loopless Option -->
6472  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
6473    <div class="text-blue hover:text-red pt-1 w-[120px]">
6474  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6475  
6476    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
6477    <input type="radio" id="sample-20_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
6478  <label class="nav-radio-label hover:cursor-pointer" for="sample-20_looped_looped">Looped</label>
6479</div>
6480
6481    <div class="text-blue hover:text-red pt-1 w-[120px]">
6482  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6483  
6484    <input type="radio" checked="" id="sample-20_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
6485  <label class="nav-radio-label hover:cursor-pointer" for="sample-20_looped_loopless">Loopless</label>
6486</div>
6487
6488  </fieldset>
6489
6490  <!-- Latin Dropdown: Variable + all 84 styles -->
6491  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
6492    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
6493      <option value="variable" selected="selected">Variable</option>
6494      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
6495        Compressed Ultra Light
6496      </option>
6497      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
6498        Compressed Thin
6499      </option>
6500      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
6501        Compressed Light
6502      </option>
6503      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
6504        Compressed Regular
6505      </option>
6506      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
6507        Compressed Medium
6508      </option>
6509      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
6510        Compressed Bold
6511      </option>
6512      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
6513        Compressed Black
6514      </option>
6515      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
6516        Condensed Ultra Light
6517      </option>
6518      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
6519        Condensed Thin
6520      </option>
6521      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
6522        Condensed Light
6523      </option>
6524      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
6525        Condensed Regular
6526      </option>
6527      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
6528        Condensed Medium
6529      </option>
6530      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
6531        Condensed Bold
6532      </option>
6533      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
6534        Condensed Black
6535      </option>
6536      <option value="standard ultra light" data-wght="100" data-wdth="100">
6537        Standard Ultra Light
6538      </option>
6539      <option value="standard thin" data-wght="200" data-wdth="100">
6540        Standard Thin
6541      </option>
6542      <option value="standard light" data-wght="300" data-wdth="100">
6543        Standard Light
6544      </option>
6545      <option value="standard regular" data-wght="400" data-wdth="100">
6546        Standard Regular
6547      </option>
6548      <option value="standard medium" data-wght="500" data-wdth="100">
6549        Standard Medium
6550      </option>
6551      <option value="standard bold" data-wght="700" data-wdth="100">
6552        Standard Bold
6553      </option>
6554      <option value="standard black" data-wght="900" data-wdth="100">
6555        Standard Black
6556      </option>
6557      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
6558        Extended Ultra Light
6559      </option>
6560      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
6561        Extended Thin
6562      </option>
6563      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
6564        Extended Light
6565      </option>
6566      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
6567        Extended Regular
6568      </option>
6569      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
6570        Extended Medium
6571      </option>
6572      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
6573        Extended Bold
6574      </option>
6575      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
6576        Extended Black
6577      </option>
6578      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
6579        Expanded Ultra Light
6580      </option>
6581      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
6582        Expanded Thin
6583      </option>
6584      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
6585        Expanded Light
6586      </option>
6587      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
6588        Expanded Regular
6589      </option>
6590      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
6591        Expanded Medium
6592      </option>
6593      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
6594        Expanded Bold
6595      </option>
6596      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
6597        Expanded Black
6598      </option>
6599    </select>
6600  </div>
6601
6602  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
6603  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
6604    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6605      <option value="variable" selected="selected">Variable</option>
6606      <option value="looped ultra light" data-wght="100">Ultra Light</option>
6607      <option value="looped thin" data-wght="200">Thin</option>
6608      <option value="looped light" data-wght="300">Light</option>
6609      <option value="looped regular" data-wght="400">Regular</option>
6610      <option value="looped medium" data-wght="500">Medium</option>
6611      <option value="looped bold" data-wght="700">Bold</option>
6612      <option value="looped black" data-wght="900">Black</option>
6613    </select>
6614  </div>
6615
6616  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
6617  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
6618    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6619      <option value="variable" selected="selected">Variable</option>
6620      <option value="ultra light" data-wght="100">Ultra Light</option>
6621      <option value="thin" data-wght="200">Thin</option>
6622      <option value="light" data-wght="300">Light</option>
6623      <option value="regular" data-wght="400">Regular</option>
6624      <option value="medium" data-wght="500">Medium</option>
6625      <option value="bold" data-wght="700">Bold</option>
6626      <option value="black" data-wght="900">Black</option>
6627    </select>
6628  </div>
6629
6630  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
6631    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6632      <option value="variable" selected="selected">Variable</option>
6633      <option value="ultra light" data-wght="100">Ultra Light</option>
6634      <option value="thin" data-wght="200">Thin</option>
6635      <option value="light" data-wght="300">Light</option>
6636      <option value="regular" data-wght="400">Regular</option>
6637      <option value="medium" data-wght="500">Medium</option>
6638      <option value="bold" data-wght="700">Bold</option>
6639      <option value="black" data-wght="900">Black</option>
6640    </select>
6641  </div>
6642
6643  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
6644    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6645      <option value="variable" selected="selected">Variable</option>
6646      <option value="ultra light" data-wght="100">Ultra Light</option>
6647      <option value="thin" data-wght="200">Thin</option>
6648      <option value="light" data-wght="300">Light</option>
6649      <option value="regular" data-wght="400">Regular</option>
6650      <option value="medium" data-wght="500">Medium</option>
6651      <option value="bold" data-wght="700">Bold</option>
6652      <option value="black" data-wght="900">Black</option>
6653    </select>
6654  </div>
6655
6656  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
6657    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6658      <option value="variable" selected="selected">Variable</option>
6659      <option value="ultra light" data-wght="100">Ultra Light</option>
6660      <option value="thin" data-wght="200">Thin</option>
6661      <option value="light" data-wght="300">Light</option>
6662      <option value="regular" data-wght="400">Regular</option>
6663      <option value="medium" data-wght="500">Medium</option>
6664      <option value="bold" data-wght="700">Bold</option>
6665      <option value="black" data-wght="900">Black</option>
6666    </select>
6667  </div>
6668
6669  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
6670  <!-- Thai Slider: Weight (100–900) -->
6671  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
6672  <div data-component="tt__control-area">
6673    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
6674      <div class="flex flex-row justify-between">
6675        <div class="">Width</div>
6676        <div data-component="tt__wdth-value"></div>
6677      </div>
6678      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
6679    </div>
6680    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
6681      <div class="flex flex-row justify-between">
6682        <div class="">Weight</div>
6683        <div data-component="tt__wght-value"></div>
6684      </div>
6685      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="500" class="typetester-slider w-full" id="typetesterWghtRange">
6686    </div>
6687  </div>
6688</form>
6689
6690  <!-- Main Content Area -->
6691  <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip">
6692    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="he" data-size="m" dir="rtl"></div>
6693  </div>
6694</section>
6695
6696
6697    <!-- Typetester Sample -->
6698<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
6699  <!-- Partial Width Content Area With Section Nav -->
6700  <!-- Section Nav Area -->
6701<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="hebrew">
6702  <!-- Select Script-->
6703  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
6704    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
6705      
6706        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
6707          Latin
6708        </option>
6709      
6710        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
6711          Cyrillic
6712        </option>
6713      
6714        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
6715          Greek
6716        </option>
6717      
6718        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
6719          Vietnamese
6720        </option>
6721      
6722        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
6723          Arabic
6724        </option>
6725      
6726        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
6727          Devanagari
6728        </option>
6729      
6730        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he" selected="selected">
6731          Hebrew
6732        </option>
6733      
6734        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
6735          Korean
6736        </option>
6737      
6738        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
6739          Thai
6740        </option>
6741      </select>
6742  </div>
6743
6744  <!-- Latin: Proportional / Mono Option -->
6745  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
6746    <div class="text-blue hover:text-red pt-1 w-[120px]">
6747  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6748  
6749    <input type="radio" checked="" id="sample-21_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
6750  <label class="nav-radio-label hover:cursor-pointer" for="sample-21_prop-mono_proportional">Proportional</label>
6751</div>
6752
6753    <div class="text-blue hover:text-red pt-1 w-[120px]">
6754  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6755  
6756    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
6757    <input type="radio" id="sample-21_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
6758  <label class="nav-radio-label hover:cursor-pointer" for="sample-21_prop-mono_mono">Monospaced</label>
6759</div>
6760
6761  </fieldset>
6762
6763  <!-- Latin: Upright / Italic Option -->
6764  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
6765    <div class="text-blue hover:text-red pt-1 w-[120px]">
6766  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6767  
6768    <input type="radio" checked="" id="sample-21_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
6769  <label class="nav-radio-label hover:cursor-pointer" for="sample-21_upright-ital_upright">Upright</label>
6770</div>
6771
6772    <div class="text-blue hover:text-red pt-1 w-[120px]">
6773  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6774  
6775    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
6776    <input type="radio" id="sample-21_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
6777  <label class="nav-radio-label hover:cursor-pointer" for="sample-21_upright-ital_italic">Italic</label>
6778</div>
6779
6780  </fieldset>
6781
6782  <!-- Latin: Default / Alternatives Option -->
6783  <!-- Currently Disabled, Too Many Options Syndrome -->
6784  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
6785    <include src="source/html-includes/radio-button.html">
6786      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
6787      "default", "label": "Default", "checked": true, "namePrefix": "sample-21" }
6788    </include>
6789    <include src="source/html-includes/radio-button.html">
6790      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
6791      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
6792      "sample-21" }
6793    </include>
6794  </fieldset> -->
6795
6796  <!-- Thai: Looped / Loopless Option -->
6797  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
6798    <div class="text-blue hover:text-red pt-1 w-[120px]">
6799  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6800  
6801    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
6802    <input type="radio" id="sample-21_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
6803  <label class="nav-radio-label hover:cursor-pointer" for="sample-21_looped_looped">Looped</label>
6804</div>
6805
6806    <div class="text-blue hover:text-red pt-1 w-[120px]">
6807  <!-- I'm sure theres a better way of applying this attribute conditionally -->
6808  
6809    <input type="radio" checked="" id="sample-21_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
6810  <label class="nav-radio-label hover:cursor-pointer" for="sample-21_looped_loopless">Loopless</label>
6811</div>
6812
6813  </fieldset>
6814
6815  <!-- Latin Dropdown: Variable + all 84 styles -->
6816  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
6817    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
6818      <option value="variable" selected="selected">Variable</option>
6819      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
6820        Compressed Ultra Light
6821      </option>
6822      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
6823        Compressed Thin
6824      </option>
6825      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
6826        Compressed Light
6827      </option>
6828      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
6829        Compressed Regular
6830      </option>
6831      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
6832        Compressed Medium
6833      </option>
6834      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
6835        Compressed Bold
6836      </option>
6837      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
6838        Compressed Black
6839      </option>
6840      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
6841        Condensed Ultra Light
6842      </option>
6843      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
6844        Condensed Thin
6845      </option>
6846      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
6847        Condensed Light
6848      </option>
6849      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
6850        Condensed Regular
6851      </option>
6852      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
6853        Condensed Medium
6854      </option>
6855      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
6856        Condensed Bold
6857      </option>
6858      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
6859        Condensed Black
6860      </option>
6861      <option value="standard ultra light" data-wght="100" data-wdth="100">
6862        Standard Ultra Light
6863      </option>
6864      <option value="standard thin" data-wght="200" data-wdth="100">
6865        Standard Thin
6866      </option>
6867      <option value="standard light" data-wght="300" data-wdth="100">
6868        Standard Light
6869      </option>
6870      <option value="standard regular" data-wght="400" data-wdth="100">
6871        Standard Regular
6872      </option>
6873      <option value="standard medium" data-wght="500" data-wdth="100">
6874        Standard Medium
6875      </option>
6876      <option value="standard bold" data-wght="700" data-wdth="100">
6877        Standard Bold
6878      </option>
6879      <option value="standard black" data-wght="900" data-wdth="100">
6880        Standard Black
6881      </option>
6882      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
6883        Extended Ultra Light
6884      </option>
6885      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
6886        Extended Thin
6887      </option>
6888      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
6889        Extended Light
6890      </option>
6891      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
6892        Extended Regular
6893      </option>
6894      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
6895        Extended Medium
6896      </option>
6897      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
6898        Extended Bold
6899      </option>
6900      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
6901        Extended Black
6902      </option>
6903      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
6904        Expanded Ultra Light
6905      </option>
6906      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
6907        Expanded Thin
6908      </option>
6909      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
6910        Expanded Light
6911      </option>
6912      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
6913        Expanded Regular
6914      </option>
6915      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
6916        Expanded Medium
6917      </option>
6918      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
6919        Expanded Bold
6920      </option>
6921      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
6922        Expanded Black
6923      </option>
6924    </select>
6925  </div>
6926
6927  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
6928  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
6929    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6930      <option value="variable" selected="selected">Variable</option>
6931      <option value="looped ultra light" data-wght="100">Ultra Light</option>
6932      <option value="looped thin" data-wght="200">Thin</option>
6933      <option value="looped light" data-wght="300">Light</option>
6934      <option value="looped regular" data-wght="400">Regular</option>
6935      <option value="looped medium" data-wght="500">Medium</option>
6936      <option value="looped bold" data-wght="700">Bold</option>
6937      <option value="looped black" data-wght="900">Black</option>
6938    </select>
6939  </div>
6940
6941  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
6942  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
6943    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6944      <option value="variable" selected="selected">Variable</option>
6945      <option value="ultra light" data-wght="100">Ultra Light</option>
6946      <option value="thin" data-wght="200">Thin</option>
6947      <option value="light" data-wght="300">Light</option>
6948      <option value="regular" data-wght="400">Regular</option>
6949      <option value="medium" data-wght="500">Medium</option>
6950      <option value="bold" data-wght="700">Bold</option>
6951      <option value="black" data-wght="900">Black</option>
6952    </select>
6953  </div>
6954
6955  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
6956    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6957      <option value="variable" selected="selected">Variable</option>
6958      <option value="ultra light" data-wght="100">Ultra Light</option>
6959      <option value="thin" data-wght="200">Thin</option>
6960      <option value="light" data-wght="300">Light</option>
6961      <option value="regular" data-wght="400">Regular</option>
6962      <option value="medium" data-wght="500">Medium</option>
6963      <option value="bold" data-wght="700">Bold</option>
6964      <option value="black" data-wght="900">Black</option>
6965    </select>
6966  </div>
6967
6968  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
6969    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6970      <option value="variable" selected="selected">Variable</option>
6971      <option value="ultra light" data-wght="100">Ultra Light</option>
6972      <option value="thin" data-wght="200">Thin</option>
6973      <option value="light" data-wght="300">Light</option>
6974      <option value="regular" data-wght="400">Regular</option>
6975      <option value="medium" data-wght="500">Medium</option>
6976      <option value="bold" data-wght="700">Bold</option>
6977      <option value="black" data-wght="900">Black</option>
6978    </select>
6979  </div>
6980
6981  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
6982    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
6983      <option value="variable" selected="selected">Variable</option>
6984      <option value="ultra light" data-wght="100">Ultra Light</option>
6985      <option value="thin" data-wght="200">Thin</option>
6986      <option value="light" data-wght="300">Light</option>
6987      <option value="regular" data-wght="400">Regular</option>
6988      <option value="medium" data-wght="500">Medium</option>
6989      <option value="bold" data-wght="700">Bold</option>
6990      <option value="black" data-wght="900">Black</option>
6991    </select>
6992  </div>
6993
6994  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
6995  <!-- Thai Slider: Weight (100–900) -->
6996  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
6997  <div data-component="tt__control-area">
6998    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
6999      <div class="flex flex-row justify-between">
7000        <div class="">Width</div>
7001        <div data-component="tt__wdth-value"></div>
7002      </div>
7003      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
7004    </div>
7005    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
7006      <div class="flex flex-row justify-between">
7007        <div class="">Weight</div>
7008        <div data-component="tt__wght-value"></div>
7009      </div>
7010      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange">
7011    </div>
7012  </div>
7013</form>
7014
7015  <!-- Main Content Area -->
7016  <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip">
7017    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="he" data-size="s" dir="rtl"></div>
7018  </div>
7019</section>
7020
7021
7022    <!-- Typetester Sample -->
7023<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
7024  <!-- Partial Width Content Area With Section Nav -->
7025  <!-- Section Nav Area -->
7026<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="korean">
7027  <!-- Select Script-->
7028  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
7029    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
7030      
7031        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
7032          Latin
7033        </option>
7034      
7035        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
7036          Cyrillic
7037        </option>
7038      
7039        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
7040          Greek
7041        </option>
7042      
7043        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
7044          Vietnamese
7045        </option>
7046      
7047        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
7048          Arabic
7049        </option>
7050      
7051        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
7052          Devanagari
7053        </option>
7054      
7055        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
7056          Hebrew
7057        </option>
7058      
7059        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko" selected="selected">
7060          Korean
7061        </option>
7062      
7063        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
7064          Thai
7065        </option>
7066      </select>
7067  </div>
7068
7069  <!-- Latin: Proportional / Mono Option -->
7070  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
7071    <div class="text-blue hover:text-red pt-1 w-[120px]">
7072  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7073  
7074    <input type="radio" checked="" id="sample-22_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
7075  <label class="nav-radio-label hover:cursor-pointer" for="sample-22_prop-mono_proportional">Proportional</label>
7076</div>
7077
7078    <div class="text-blue hover:text-red pt-1 w-[120px]">
7079  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7080  
7081    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
7082    <input type="radio" id="sample-22_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
7083  <label class="nav-radio-label hover:cursor-pointer" for="sample-22_prop-mono_mono">Monospaced</label>
7084</div>
7085
7086  </fieldset>
7087
7088  <!-- Latin: Upright / Italic Option -->
7089  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
7090    <div class="text-blue hover:text-red pt-1 w-[120px]">
7091  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7092  
7093    <input type="radio" checked="" id="sample-22_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
7094  <label class="nav-radio-label hover:cursor-pointer" for="sample-22_upright-ital_upright">Upright</label>
7095</div>
7096
7097    <div class="text-blue hover:text-red pt-1 w-[120px]">
7098  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7099  
7100    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
7101    <input type="radio" id="sample-22_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
7102  <label class="nav-radio-label hover:cursor-pointer" for="sample-22_upright-ital_italic">Italic</label>
7103</div>
7104
7105  </fieldset>
7106
7107  <!-- Latin: Default / Alternatives Option -->
7108  <!-- Currently Disabled, Too Many Options Syndrome -->
7109  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
7110    <include src="source/html-includes/radio-button.html">
7111      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
7112      "default", "label": "Default", "checked": true, "namePrefix": "sample-22" }
7113    </include>
7114    <include src="source/html-includes/radio-button.html">
7115      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
7116      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
7117      "sample-22" }
7118    </include>
7119  </fieldset> -->
7120
7121  <!-- Thai: Looped / Loopless Option -->
7122  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
7123    <div class="text-blue hover:text-red pt-1 w-[120px]">
7124  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7125  
7126    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
7127    <input type="radio" id="sample-22_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
7128  <label class="nav-radio-label hover:cursor-pointer" for="sample-22_looped_looped">Looped</label>
7129</div>
7130
7131    <div class="text-blue hover:text-red pt-1 w-[120px]">
7132  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7133  
7134    <input type="radio" checked="" id="sample-22_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
7135  <label class="nav-radio-label hover:cursor-pointer" for="sample-22_looped_loopless">Loopless</label>
7136</div>
7137
7138  </fieldset>
7139
7140  <!-- Latin Dropdown: Variable + all 84 styles -->
7141  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
7142    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
7143      <option value="variable" selected="selected">Variable</option>
7144      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
7145        Compressed Ultra Light
7146      </option>
7147      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
7148        Compressed Thin
7149      </option>
7150      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
7151        Compressed Light
7152      </option>
7153      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
7154        Compressed Regular
7155      </option>
7156      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
7157        Compressed Medium
7158      </option>
7159      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
7160        Compressed Bold
7161      </option>
7162      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
7163        Compressed Black
7164      </option>
7165      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
7166        Condensed Ultra Light
7167      </option>
7168      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
7169        Condensed Thin
7170      </option>
7171      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
7172        Condensed Light
7173      </option>
7174      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
7175        Condensed Regular
7176      </option>
7177      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
7178        Condensed Medium
7179      </option>
7180      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
7181        Condensed Bold
7182      </option>
7183      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
7184        Condensed Black
7185      </option>
7186      <option value="standard ultra light" data-wght="100" data-wdth="100">
7187        Standard Ultra Light
7188      </option>
7189      <option value="standard thin" data-wght="200" data-wdth="100">
7190        Standard Thin
7191      </option>
7192      <option value="standard light" data-wght="300" data-wdth="100">
7193        Standard Light
7194      </option>
7195      <option value="standard regular" data-wght="400" data-wdth="100">
7196        Standard Regular
7197      </option>
7198      <option value="standard medium" data-wght="500" data-wdth="100">
7199        Standard Medium
7200      </option>
7201      <option value="standard bold" data-wght="700" data-wdth="100">
7202        Standard Bold
7203      </option>
7204      <option value="standard black" data-wght="900" data-wdth="100">
7205        Standard Black
7206      </option>
7207      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
7208        Extended Ultra Light
7209      </option>
7210      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
7211        Extended Thin
7212      </option>
7213      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
7214        Extended Light
7215      </option>
7216      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
7217        Extended Regular
7218      </option>
7219      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
7220        Extended Medium
7221      </option>
7222      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
7223        Extended Bold
7224      </option>
7225      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
7226        Extended Black
7227      </option>
7228      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
7229        Expanded Ultra Light
7230      </option>
7231      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
7232        Expanded Thin
7233      </option>
7234      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
7235        Expanded Light
7236      </option>
7237      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
7238        Expanded Regular
7239      </option>
7240      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
7241        Expanded Medium
7242      </option>
7243      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
7244        Expanded Bold
7245      </option>
7246      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
7247        Expanded Black
7248      </option>
7249    </select>
7250  </div>
7251
7252  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
7253  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
7254    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7255      <option value="variable" selected="selected">Variable</option>
7256      <option value="looped ultra light" data-wght="100">Ultra Light</option>
7257      <option value="looped thin" data-wght="200">Thin</option>
7258      <option value="looped light" data-wght="300">Light</option>
7259      <option value="looped regular" data-wght="400">Regular</option>
7260      <option value="looped medium" data-wght="500">Medium</option>
7261      <option value="looped bold" data-wght="700">Bold</option>
7262      <option value="looped black" data-wght="900">Black</option>
7263    </select>
7264  </div>
7265
7266  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
7267  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
7268    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7269      <option value="variable" selected="selected">Variable</option>
7270      <option value="ultra light" data-wght="100">Ultra Light</option>
7271      <option value="thin" data-wght="200">Thin</option>
7272      <option value="light" data-wght="300">Light</option>
7273      <option value="regular" data-wght="400">Regular</option>
7274      <option value="medium" data-wght="500">Medium</option>
7275      <option value="bold" data-wght="700">Bold</option>
7276      <option value="black" data-wght="900">Black</option>
7277    </select>
7278  </div>
7279
7280  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
7281    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7282      <option value="variable" selected="selected">Variable</option>
7283      <option value="ultra light" data-wght="100">Ultra Light</option>
7284      <option value="thin" data-wght="200">Thin</option>
7285      <option value="light" data-wght="300">Light</option>
7286      <option value="regular" data-wght="400">Regular</option>
7287      <option value="medium" data-wght="500">Medium</option>
7288      <option value="bold" data-wght="700">Bold</option>
7289      <option value="black" data-wght="900">Black</option>
7290    </select>
7291  </div>
7292
7293  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
7294    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7295      <option value="variable" selected="selected">Variable</option>
7296      <option value="ultra light" data-wght="100">Ultra Light</option>
7297      <option value="thin" data-wght="200">Thin</option>
7298      <option value="light" data-wght="300">Light</option>
7299      <option value="regular" data-wght="400">Regular</option>
7300      <option value="medium" data-wght="500">Medium</option>
7301      <option value="bold" data-wght="700">Bold</option>
7302      <option value="black" data-wght="900">Black</option>
7303    </select>
7304  </div>
7305
7306  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
7307    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7308      <option value="variable" selected="selected">Variable</option>
7309      <option value="ultra light" data-wght="100">Ultra Light</option>
7310      <option value="thin" data-wght="200">Thin</option>
7311      <option value="light" data-wght="300">Light</option>
7312      <option value="regular" data-wght="400">Regular</option>
7313      <option value="medium" data-wght="500">Medium</option>
7314      <option value="bold" data-wght="700">Bold</option>
7315      <option value="black" data-wght="900">Black</option>
7316    </select>
7317  </div>
7318
7319  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
7320  <!-- Thai Slider: Weight (100–900) -->
7321  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
7322  <div data-component="tt__control-area">
7323    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
7324      <div class="flex flex-row justify-between">
7325        <div class="">Width</div>
7326        <div data-component="tt__wdth-value"></div>
7327      </div>
7328      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
7329    </div>
7330    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
7331      <div class="flex flex-row justify-between">
7332        <div class="">Weight</div>
7333        <div data-component="tt__wght-value"></div>
7334      </div>
7335      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange">
7336    </div>
7337  </div>
7338</form>
7339
7340  <!-- Main Content Area -->
7341  <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip">
7342    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ko" data-size="l"></div>
7343  </div>
7344</section>
7345
7346
7347    <!-- Typetester Sample -->
7348<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
7349  <!-- Partial Width Content Area With Section Nav -->
7350  <!-- Section Nav Area -->
7351<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="korean">
7352  <!-- Select Script-->
7353  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
7354    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
7355      
7356        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
7357          Latin
7358        </option>
7359      
7360        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
7361          Cyrillic
7362        </option>
7363      
7364        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
7365          Greek
7366        </option>
7367      
7368        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
7369          Vietnamese
7370        </option>
7371      
7372        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
7373          Arabic
7374        </option>
7375      
7376        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
7377          Devanagari
7378        </option>
7379      
7380        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
7381          Hebrew
7382        </option>
7383      
7384        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko" selected="selected">
7385          Korean
7386        </option>
7387      
7388        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
7389          Thai
7390        </option>
7391      </select>
7392  </div>
7393
7394  <!-- Latin: Proportional / Mono Option -->
7395  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
7396    <div class="text-blue hover:text-red pt-1 w-[120px]">
7397  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7398  
7399    <input type="radio" checked="" id="sample-23_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
7400  <label class="nav-radio-label hover:cursor-pointer" for="sample-23_prop-mono_proportional">Proportional</label>
7401</div>
7402
7403    <div class="text-blue hover:text-red pt-1 w-[120px]">
7404  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7405  
7406    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
7407    <input type="radio" id="sample-23_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
7408  <label class="nav-radio-label hover:cursor-pointer" for="sample-23_prop-mono_mono">Monospaced</label>
7409</div>
7410
7411  </fieldset>
7412
7413  <!-- Latin: Upright / Italic Option -->
7414  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
7415    <div class="text-blue hover:text-red pt-1 w-[120px]">
7416  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7417  
7418    <input type="radio" checked="" id="sample-23_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
7419  <label class="nav-radio-label hover:cursor-pointer" for="sample-23_upright-ital_upright">Upright</label>
7420</div>
7421
7422    <div class="text-blue hover:text-red pt-1 w-[120px]">
7423  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7424  
7425    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
7426    <input type="radio" id="sample-23_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
7427  <label class="nav-radio-label hover:cursor-pointer" for="sample-23_upright-ital_italic">Italic</label>
7428</div>
7429
7430  </fieldset>
7431
7432  <!-- Latin: Default / Alternatives Option -->
7433  <!-- Currently Disabled, Too Many Options Syndrome -->
7434  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
7435    <include src="source/html-includes/radio-button.html">
7436      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
7437      "default", "label": "Default", "checked": true, "namePrefix": "sample-23" }
7438    </include>
7439    <include src="source/html-includes/radio-button.html">
7440      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
7441      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
7442      "sample-23" }
7443    </include>
7444  </fieldset> -->
7445
7446  <!-- Thai: Looped / Loopless Option -->
7447  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
7448    <div class="text-blue hover:text-red pt-1 w-[120px]">
7449  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7450  
7451    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
7452    <input type="radio" id="sample-23_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
7453  <label class="nav-radio-label hover:cursor-pointer" for="sample-23_looped_looped">Looped</label>
7454</div>
7455
7456    <div class="text-blue hover:text-red pt-1 w-[120px]">
7457  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7458  
7459    <input type="radio" checked="" id="sample-23_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
7460  <label class="nav-radio-label hover:cursor-pointer" for="sample-23_looped_loopless">Loopless</label>
7461</div>
7462
7463  </fieldset>
7464
7465  <!-- Latin Dropdown: Variable + all 84 styles -->
7466  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
7467    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
7468      <option value="variable" selected="selected">Variable</option>
7469      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
7470        Compressed Ultra Light
7471      </option>
7472      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
7473        Compressed Thin
7474      </option>
7475      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
7476        Compressed Light
7477      </option>
7478      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
7479        Compressed Regular
7480      </option>
7481      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
7482        Compressed Medium
7483      </option>
7484      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
7485        Compressed Bold
7486      </option>
7487      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
7488        Compressed Black
7489      </option>
7490      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
7491        Condensed Ultra Light
7492      </option>
7493      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
7494        Condensed Thin
7495      </option>
7496      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
7497        Condensed Light
7498      </option>
7499      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
7500        Condensed Regular
7501      </option>
7502      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
7503        Condensed Medium
7504      </option>
7505      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
7506        Condensed Bold
7507      </option>
7508      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
7509        Condensed Black
7510      </option>
7511      <option value="standard ultra light" data-wght="100" data-wdth="100">
7512        Standard Ultra Light
7513      </option>
7514      <option value="standard thin" data-wght="200" data-wdth="100">
7515        Standard Thin
7516      </option>
7517      <option value="standard light" data-wght="300" data-wdth="100">
7518        Standard Light
7519      </option>
7520      <option value="standard regular" data-wght="400" data-wdth="100">
7521        Standard Regular
7522      </option>
7523      <option value="standard medium" data-wght="500" data-wdth="100">
7524        Standard Medium
7525      </option>
7526      <option value="standard bold" data-wght="700" data-wdth="100">
7527        Standard Bold
7528      </option>
7529      <option value="standard black" data-wght="900" data-wdth="100">
7530        Standard Black
7531      </option>
7532      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
7533        Extended Ultra Light
7534      </option>
7535      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
7536        Extended Thin
7537      </option>
7538      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
7539        Extended Light
7540      </option>
7541      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
7542        Extended Regular
7543      </option>
7544      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
7545        Extended Medium
7546      </option>
7547      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
7548        Extended Bold
7549      </option>
7550      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
7551        Extended Black
7552      </option>
7553      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
7554        Expanded Ultra Light
7555      </option>
7556      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
7557        Expanded Thin
7558      </option>
7559      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
7560        Expanded Light
7561      </option>
7562      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
7563        Expanded Regular
7564      </option>
7565      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
7566        Expanded Medium
7567      </option>
7568      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
7569        Expanded Bold
7570      </option>
7571      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
7572        Expanded Black
7573      </option>
7574    </select>
7575  </div>
7576
7577  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
7578  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
7579    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7580      <option value="variable" selected="selected">Variable</option>
7581      <option value="looped ultra light" data-wght="100">Ultra Light</option>
7582      <option value="looped thin" data-wght="200">Thin</option>
7583      <option value="looped light" data-wght="300">Light</option>
7584      <option value="looped regular" data-wght="400">Regular</option>
7585      <option value="looped medium" data-wght="500">Medium</option>
7586      <option value="looped bold" data-wght="700">Bold</option>
7587      <option value="looped black" data-wght="900">Black</option>
7588    </select>
7589  </div>
7590
7591  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
7592  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
7593    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7594      <option value="variable" selected="selected">Variable</option>
7595      <option value="ultra light" data-wght="100">Ultra Light</option>
7596      <option value="thin" data-wght="200">Thin</option>
7597      <option value="light" data-wght="300">Light</option>
7598      <option value="regular" data-wght="400">Regular</option>
7599      <option value="medium" data-wght="500">Medium</option>
7600      <option value="bold" data-wght="700">Bold</option>
7601      <option value="black" data-wght="900">Black</option>
7602    </select>
7603  </div>
7604
7605  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
7606    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7607      <option value="variable" selected="selected">Variable</option>
7608      <option value="ultra light" data-wght="100">Ultra Light</option>
7609      <option value="thin" data-wght="200">Thin</option>
7610      <option value="light" data-wght="300">Light</option>
7611      <option value="regular" data-wght="400">Regular</option>
7612      <option value="medium" data-wght="500">Medium</option>
7613      <option value="bold" data-wght="700">Bold</option>
7614      <option value="black" data-wght="900">Black</option>
7615    </select>
7616  </div>
7617
7618  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
7619    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7620      <option value="variable" selected="selected">Variable</option>
7621      <option value="ultra light" data-wght="100">Ultra Light</option>
7622      <option value="thin" data-wght="200">Thin</option>
7623      <option value="light" data-wght="300">Light</option>
7624      <option value="regular" data-wght="400">Regular</option>
7625      <option value="medium" data-wght="500">Medium</option>
7626      <option value="bold" data-wght="700">Bold</option>
7627      <option value="black" data-wght="900">Black</option>
7628    </select>
7629  </div>
7630
7631  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
7632    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7633      <option value="variable" selected="selected">Variable</option>
7634      <option value="ultra light" data-wght="100">Ultra Light</option>
7635      <option value="thin" data-wght="200">Thin</option>
7636      <option value="light" data-wght="300">Light</option>
7637      <option value="regular" data-wght="400">Regular</option>
7638      <option value="medium" data-wght="500">Medium</option>
7639      <option value="bold" data-wght="700">Bold</option>
7640      <option value="black" data-wght="900">Black</option>
7641    </select>
7642  </div>
7643
7644  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
7645  <!-- Thai Slider: Weight (100–900) -->
7646  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
7647  <div data-component="tt__control-area">
7648    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
7649      <div class="flex flex-row justify-between">
7650        <div class="">Width</div>
7651        <div data-component="tt__wdth-value"></div>
7652      </div>
7653      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
7654    </div>
7655    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
7656      <div class="flex flex-row justify-between">
7657        <div class="">Weight</div>
7658        <div data-component="tt__wght-value"></div>
7659      </div>
7660      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="700" class="typetester-slider w-full" id="typetesterWghtRange">
7661    </div>
7662  </div>
7663</form>
7664
7665  <!-- Main Content Area -->
7666  <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip">
7667    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ko" data-size="m"></div>
7668  </div>
7669</section>
7670
7671
7672    <!-- Typetester Sample -->
7673<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
7674  <!-- Partial Width Content Area With Section Nav -->
7675  <!-- Section Nav Area -->
7676<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="korean">
7677  <!-- Select Script-->
7678  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
7679    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
7680      
7681        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
7682          Latin
7683        </option>
7684      
7685        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
7686          Cyrillic
7687        </option>
7688      
7689        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
7690          Greek
7691        </option>
7692      
7693        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
7694          Vietnamese
7695        </option>
7696      
7697        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
7698          Arabic
7699        </option>
7700      
7701        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
7702          Devanagari
7703        </option>
7704      
7705        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
7706          Hebrew
7707        </option>
7708      
7709        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko" selected="selected">
7710          Korean
7711        </option>
7712      
7713        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th">
7714          Thai
7715        </option>
7716      </select>
7717  </div>
7718
7719  <!-- Latin: Proportional / Mono Option -->
7720  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
7721    <div class="text-blue hover:text-red pt-1 w-[120px]">
7722  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7723  
7724    <input type="radio" checked="" id="sample-24_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
7725  <label class="nav-radio-label hover:cursor-pointer" for="sample-24_prop-mono_proportional">Proportional</label>
7726</div>
7727
7728    <div class="text-blue hover:text-red pt-1 w-[120px]">
7729  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7730  
7731    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
7732    <input type="radio" id="sample-24_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
7733  <label class="nav-radio-label hover:cursor-pointer" for="sample-24_prop-mono_mono">Monospaced</label>
7734</div>
7735
7736  </fieldset>
7737
7738  <!-- Latin: Upright / Italic Option -->
7739  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
7740    <div class="text-blue hover:text-red pt-1 w-[120px]">
7741  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7742  
7743    <input type="radio" checked="" id="sample-24_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
7744  <label class="nav-radio-label hover:cursor-pointer" for="sample-24_upright-ital_upright">Upright</label>
7745</div>
7746
7747    <div class="text-blue hover:text-red pt-1 w-[120px]">
7748  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7749  
7750    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
7751    <input type="radio" id="sample-24_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
7752  <label class="nav-radio-label hover:cursor-pointer" for="sample-24_upright-ital_italic">Italic</label>
7753</div>
7754
7755  </fieldset>
7756
7757  <!-- Latin: Default / Alternatives Option -->
7758  <!-- Currently Disabled, Too Many Options Syndrome -->
7759  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
7760    <include src="source/html-includes/radio-button.html">
7761      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
7762      "default", "label": "Default", "checked": true, "namePrefix": "sample-24" }
7763    </include>
7764    <include src="source/html-includes/radio-button.html">
7765      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
7766      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
7767      "sample-24" }
7768    </include>
7769  </fieldset> -->
7770
7771  <!-- Thai: Looped / Loopless Option -->
7772  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
7773    <div class="text-blue hover:text-red pt-1 w-[120px]">
7774  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7775  
7776    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
7777    <input type="radio" id="sample-24_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
7778  <label class="nav-radio-label hover:cursor-pointer" for="sample-24_looped_looped">Looped</label>
7779</div>
7780
7781    <div class="text-blue hover:text-red pt-1 w-[120px]">
7782  <!-- I'm sure theres a better way of applying this attribute conditionally -->
7783  
7784    <input type="radio" checked="" id="sample-24_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
7785  <label class="nav-radio-label hover:cursor-pointer" for="sample-24_looped_loopless">Loopless</label>
7786</div>
7787
7788  </fieldset>
7789
7790  <!-- Latin Dropdown: Variable + all 84 styles -->
7791  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
7792    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
7793      <option value="variable" selected="selected">Variable</option>
7794      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
7795        Compressed Ultra Light
7796      </option>
7797      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
7798        Compressed Thin
7799      </option>
7800      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
7801        Compressed Light
7802      </option>
7803      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
7804        Compressed Regular
7805      </option>
7806      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
7807        Compressed Medium
7808      </option>
7809      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
7810        Compressed Bold
7811      </option>
7812      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
7813        Compressed Black
7814      </option>
7815      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
7816        Condensed Ultra Light
7817      </option>
7818      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
7819        Condensed Thin
7820      </option>
7821      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
7822        Condensed Light
7823      </option>
7824      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
7825        Condensed Regular
7826      </option>
7827      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
7828        Condensed Medium
7829      </option>
7830      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
7831        Condensed Bold
7832      </option>
7833      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
7834        Condensed Black
7835      </option>
7836      <option value="standard ultra light" data-wght="100" data-wdth="100">
7837        Standard Ultra Light
7838      </option>
7839      <option value="standard thin" data-wght="200" data-wdth="100">
7840        Standard Thin
7841      </option>
7842      <option value="standard light" data-wght="300" data-wdth="100">
7843        Standard Light
7844      </option>
7845      <option value="standard regular" data-wght="400" data-wdth="100">
7846        Standard Regular
7847      </option>
7848      <option value="standard medium" data-wght="500" data-wdth="100">
7849        Standard Medium
7850      </option>
7851      <option value="standard bold" data-wght="700" data-wdth="100">
7852        Standard Bold
7853      </option>
7854      <option value="standard black" data-wght="900" data-wdth="100">
7855        Standard Black
7856      </option>
7857      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
7858        Extended Ultra Light
7859      </option>
7860      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
7861        Extended Thin
7862      </option>
7863      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
7864        Extended Light
7865      </option>
7866      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
7867        Extended Regular
7868      </option>
7869      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
7870        Extended Medium
7871      </option>
7872      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
7873        Extended Bold
7874      </option>
7875      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
7876        Extended Black
7877      </option>
7878      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
7879        Expanded Ultra Light
7880      </option>
7881      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
7882        Expanded Thin
7883      </option>
7884      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
7885        Expanded Light
7886      </option>
7887      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
7888        Expanded Regular
7889      </option>
7890      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
7891        Expanded Medium
7892      </option>
7893      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
7894        Expanded Bold
7895      </option>
7896      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
7897        Expanded Black
7898      </option>
7899    </select>
7900  </div>
7901
7902  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
7903  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
7904    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7905      <option value="variable" selected="selected">Variable</option>
7906      <option value="looped ultra light" data-wght="100">Ultra Light</option>
7907      <option value="looped thin" data-wght="200">Thin</option>
7908      <option value="looped light" data-wght="300">Light</option>
7909      <option value="looped regular" data-wght="400">Regular</option>
7910      <option value="looped medium" data-wght="500">Medium</option>
7911      <option value="looped bold" data-wght="700">Bold</option>
7912      <option value="looped black" data-wght="900">Black</option>
7913    </select>
7914  </div>
7915
7916  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
7917  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
7918    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7919      <option value="variable" selected="selected">Variable</option>
7920      <option value="ultra light" data-wght="100">Ultra Light</option>
7921      <option value="thin" data-wght="200">Thin</option>
7922      <option value="light" data-wght="300">Light</option>
7923      <option value="regular" data-wght="400">Regular</option>
7924      <option value="medium" data-wght="500">Medium</option>
7925      <option value="bold" data-wght="700">Bold</option>
7926      <option value="black" data-wght="900">Black</option>
7927    </select>
7928  </div>
7929
7930  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
7931    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7932      <option value="variable" selected="selected">Variable</option>
7933      <option value="ultra light" data-wght="100">Ultra Light</option>
7934      <option value="thin" data-wght="200">Thin</option>
7935      <option value="light" data-wght="300">Light</option>
7936      <option value="regular" data-wght="400">Regular</option>
7937      <option value="medium" data-wght="500">Medium</option>
7938      <option value="bold" data-wght="700">Bold</option>
7939      <option value="black" data-wght="900">Black</option>
7940    </select>
7941  </div>
7942
7943  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
7944    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7945      <option value="variable" selected="selected">Variable</option>
7946      <option value="ultra light" data-wght="100">Ultra Light</option>
7947      <option value="thin" data-wght="200">Thin</option>
7948      <option value="light" data-wght="300">Light</option>
7949      <option value="regular" data-wght="400">Regular</option>
7950      <option value="medium" data-wght="500">Medium</option>
7951      <option value="bold" data-wght="700">Bold</option>
7952      <option value="black" data-wght="900">Black</option>
7953    </select>
7954  </div>
7955
7956  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
7957    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
7958      <option value="variable" selected="selected">Variable</option>
7959      <option value="ultra light" data-wght="100">Ultra Light</option>
7960      <option value="thin" data-wght="200">Thin</option>
7961      <option value="light" data-wght="300">Light</option>
7962      <option value="regular" data-wght="400">Regular</option>
7963      <option value="medium" data-wght="500">Medium</option>
7964      <option value="bold" data-wght="700">Bold</option>
7965      <option value="black" data-wght="900">Black</option>
7966    </select>
7967  </div>
7968
7969  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
7970  <!-- Thai Slider: Weight (100–900) -->
7971  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
7972  <div data-component="tt__control-area">
7973    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
7974      <div class="flex flex-row justify-between">
7975        <div class="">Width</div>
7976        <div data-component="tt__wdth-value"></div>
7977      </div>
7978      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
7979    </div>
7980    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
7981      <div class="flex flex-row justify-between">
7982        <div class="">Weight</div>
7983        <div data-component="tt__wght-value"></div>
7984      </div>
7985      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange">
7986    </div>
7987  </div>
7988</form>
7989
7990  <!-- Main Content Area -->
7991  <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip">
7992    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ko" data-size="s"></div>
7993  </div>
7994</section>
7995
7996
7997    <!-- Typetester Sample -->
7998<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
7999  <!-- Partial Width Content Area With Section Nav -->
8000  <!-- Section Nav Area -->
8001<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="thai">
8002  <!-- Select Script-->
8003  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
8004    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
8005      
8006        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
8007          Latin
8008        </option>
8009      
8010        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
8011          Cyrillic
8012        </option>
8013      
8014        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
8015          Greek
8016        </option>
8017      
8018        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
8019          Vietnamese
8020        </option>
8021      
8022        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
8023          Arabic
8024        </option>
8025      
8026        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
8027          Devanagari
8028        </option>
8029      
8030        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
8031          Hebrew
8032        </option>
8033      
8034        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
8035          Korean
8036        </option>
8037      
8038        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th" selected="selected">
8039          Thai
8040        </option>
8041      </select>
8042  </div>
8043
8044  <!-- Latin: Proportional / Mono Option -->
8045  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
8046    <div class="text-blue hover:text-red pt-1 w-[120px]">
8047  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8048  
8049    <input type="radio" checked="" id="sample-25_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
8050  <label class="nav-radio-label hover:cursor-pointer" for="sample-25_prop-mono_proportional">Proportional</label>
8051</div>
8052
8053    <div class="text-blue hover:text-red pt-1 w-[120px]">
8054  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8055  
8056    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
8057    <input type="radio" id="sample-25_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
8058  <label class="nav-radio-label hover:cursor-pointer" for="sample-25_prop-mono_mono">Monospaced</label>
8059</div>
8060
8061  </fieldset>
8062
8063  <!-- Latin: Upright / Italic Option -->
8064  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
8065    <div class="text-blue hover:text-red pt-1 w-[120px]">
8066  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8067  
8068    <input type="radio" checked="" id="sample-25_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
8069  <label class="nav-radio-label hover:cursor-pointer" for="sample-25_upright-ital_upright">Upright</label>
8070</div>
8071
8072    <div class="text-blue hover:text-red pt-1 w-[120px]">
8073  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8074  
8075    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
8076    <input type="radio" id="sample-25_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
8077  <label class="nav-radio-label hover:cursor-pointer" for="sample-25_upright-ital_italic">Italic</label>
8078</div>
8079
8080  </fieldset>
8081
8082  <!-- Latin: Default / Alternatives Option -->
8083  <!-- Currently Disabled, Too Many Options Syndrome -->
8084  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
8085    <include src="source/html-includes/radio-button.html">
8086      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
8087      "default", "label": "Default", "checked": true, "namePrefix": "sample-25" }
8088    </include>
8089    <include src="source/html-includes/radio-button.html">
8090      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
8091      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
8092      "sample-25" }
8093    </include>
8094  </fieldset> -->
8095
8096  <!-- Thai: Looped / Loopless Option -->
8097  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
8098    <div class="text-blue hover:text-red pt-1 w-[120px]">
8099  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8100  
8101    <input type="radio" checked="" id="sample-25_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
8102  <label class="nav-radio-label hover:cursor-pointer" for="sample-25_looped_looped">Looped</label>
8103</div>
8104
8105    <div class="text-blue hover:text-red pt-1 w-[120px]">
8106  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8107  
8108    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
8109    <input type="radio" id="sample-25_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
8110  <label class="nav-radio-label hover:cursor-pointer" for="sample-25_looped_loopless">Loopless</label>
8111</div>
8112
8113  </fieldset>
8114
8115  <!-- Latin Dropdown: Variable + all 84 styles -->
8116  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
8117    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
8118      <option value="variable" selected="selected">Variable</option>
8119      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
8120        Compressed Ultra Light
8121      </option>
8122      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
8123        Compressed Thin
8124      </option>
8125      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
8126        Compressed Light
8127      </option>
8128      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
8129        Compressed Regular
8130      </option>
8131      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
8132        Compressed Medium
8133      </option>
8134      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
8135        Compressed Bold
8136      </option>
8137      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
8138        Compressed Black
8139      </option>
8140      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
8141        Condensed Ultra Light
8142      </option>
8143      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
8144        Condensed Thin
8145      </option>
8146      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
8147        Condensed Light
8148      </option>
8149      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
8150        Condensed Regular
8151      </option>
8152      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
8153        Condensed Medium
8154      </option>
8155      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
8156        Condensed Bold
8157      </option>
8158      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
8159        Condensed Black
8160      </option>
8161      <option value="standard ultra light" data-wght="100" data-wdth="100">
8162        Standard Ultra Light
8163      </option>
8164      <option value="standard thin" data-wght="200" data-wdth="100">
8165        Standard Thin
8166      </option>
8167      <option value="standard light" data-wght="300" data-wdth="100">
8168        Standard Light
8169      </option>
8170      <option value="standard regular" data-wght="400" data-wdth="100">
8171        Standard Regular
8172      </option>
8173      <option value="standard medium" data-wght="500" data-wdth="100">
8174        Standard Medium
8175      </option>
8176      <option value="standard bold" data-wght="700" data-wdth="100">
8177        Standard Bold
8178      </option>
8179      <option value="standard black" data-wght="900" data-wdth="100">
8180        Standard Black
8181      </option>
8182      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
8183        Extended Ultra Light
8184      </option>
8185      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
8186        Extended Thin
8187      </option>
8188      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
8189        Extended Light
8190      </option>
8191      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
8192        Extended Regular
8193      </option>
8194      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
8195        Extended Medium
8196      </option>
8197      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
8198        Extended Bold
8199      </option>
8200      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
8201        Extended Black
8202      </option>
8203      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
8204        Expanded Ultra Light
8205      </option>
8206      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
8207        Expanded Thin
8208      </option>
8209      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
8210        Expanded Light
8211      </option>
8212      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
8213        Expanded Regular
8214      </option>
8215      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
8216        Expanded Medium
8217      </option>
8218      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
8219        Expanded Bold
8220      </option>
8221      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
8222        Expanded Black
8223      </option>
8224    </select>
8225  </div>
8226
8227  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
8228  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
8229    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8230      <option value="variable" selected="selected">Variable</option>
8231      <option value="looped ultra light" data-wght="100">Ultra Light</option>
8232      <option value="looped thin" data-wght="200">Thin</option>
8233      <option value="looped light" data-wght="300">Light</option>
8234      <option value="looped regular" data-wght="400">Regular</option>
8235      <option value="looped medium" data-wght="500">Medium</option>
8236      <option value="looped bold" data-wght="700">Bold</option>
8237      <option value="looped black" data-wght="900">Black</option>
8238    </select>
8239  </div>
8240
8241  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
8242  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
8243    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8244      <option value="variable" selected="selected">Variable</option>
8245      <option value="ultra light" data-wght="100">Ultra Light</option>
8246      <option value="thin" data-wght="200">Thin</option>
8247      <option value="light" data-wght="300">Light</option>
8248      <option value="regular" data-wght="400">Regular</option>
8249      <option value="medium" data-wght="500">Medium</option>
8250      <option value="bold" data-wght="700">Bold</option>
8251      <option value="black" data-wght="900">Black</option>
8252    </select>
8253  </div>
8254
8255  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
8256    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8257      <option value="variable" selected="selected">Variable</option>
8258      <option value="ultra light" data-wght="100">Ultra Light</option>
8259      <option value="thin" data-wght="200">Thin</option>
8260      <option value="light" data-wght="300">Light</option>
8261      <option value="regular" data-wght="400">Regular</option>
8262      <option value="medium" data-wght="500">Medium</option>
8263      <option value="bold" data-wght="700">Bold</option>
8264      <option value="black" data-wght="900">Black</option>
8265    </select>
8266  </div>
8267
8268  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
8269    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8270      <option value="variable" selected="selected">Variable</option>
8271      <option value="ultra light" data-wght="100">Ultra Light</option>
8272      <option value="thin" data-wght="200">Thin</option>
8273      <option value="light" data-wght="300">Light</option>
8274      <option value="regular" data-wght="400">Regular</option>
8275      <option value="medium" data-wght="500">Medium</option>
8276      <option value="bold" data-wght="700">Bold</option>
8277      <option value="black" data-wght="900">Black</option>
8278    </select>
8279  </div>
8280
8281  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
8282    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8283      <option value="variable" selected="selected">Variable</option>
8284      <option value="ultra light" data-wght="100">Ultra Light</option>
8285      <option value="thin" data-wght="200">Thin</option>
8286      <option value="light" data-wght="300">Light</option>
8287      <option value="regular" data-wght="400">Regular</option>
8288      <option value="medium" data-wght="500">Medium</option>
8289      <option value="bold" data-wght="700">Bold</option>
8290      <option value="black" data-wght="900">Black</option>
8291    </select>
8292  </div>
8293
8294  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
8295  <!-- Thai Slider: Weight (100–900) -->
8296  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
8297  <div data-component="tt__control-area">
8298    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
8299      <div class="flex flex-row justify-between">
8300        <div class="">Width</div>
8301        <div data-component="tt__wdth-value"></div>
8302      </div>
8303      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
8304    </div>
8305    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
8306      <div class="flex flex-row justify-between">
8307        <div class="">Weight</div>
8308        <div data-component="tt__wght-value"></div>
8309      </div>
8310      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange">
8311    </div>
8312  </div>
8313</form>
8314
8315  <!-- Main Content Area -->
8316  <div class="md:ml-[48px] flex w-full justify-center align-middle">
8317    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="th" data-size="l"></div>
8318  </div>
8319</section>
8320
8321
8322    <!-- Typetester Sample -->
8323<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
8324  <!-- Partial Width Content Area With Section Nav -->
8325  <!-- Section Nav Area -->
8326<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="thai">
8327  <!-- Select Script-->
8328  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
8329    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
8330      
8331        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
8332          Latin
8333        </option>
8334      
8335        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
8336          Cyrillic
8337        </option>
8338      
8339        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
8340          Greek
8341        </option>
8342      
8343        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
8344          Vietnamese
8345        </option>
8346      
8347        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
8348          Arabic
8349        </option>
8350      
8351        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
8352          Devanagari
8353        </option>
8354      
8355        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
8356          Hebrew
8357        </option>
8358      
8359        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
8360          Korean
8361        </option>
8362      
8363        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th" selected="selected">
8364          Thai
8365        </option>
8366      </select>
8367  </div>
8368
8369  <!-- Latin: Proportional / Mono Option -->
8370  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
8371    <div class="text-blue hover:text-red pt-1 w-[120px]">
8372  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8373  
8374    <input type="radio" checked="" id="sample-26_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
8375  <label class="nav-radio-label hover:cursor-pointer" for="sample-26_prop-mono_proportional">Proportional</label>
8376</div>
8377
8378    <div class="text-blue hover:text-red pt-1 w-[120px]">
8379  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8380  
8381    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
8382    <input type="radio" id="sample-26_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
8383  <label class="nav-radio-label hover:cursor-pointer" for="sample-26_prop-mono_mono">Monospaced</label>
8384</div>
8385
8386  </fieldset>
8387
8388  <!-- Latin: Upright / Italic Option -->
8389  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
8390    <div class="text-blue hover:text-red pt-1 w-[120px]">
8391  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8392  
8393    <input type="radio" checked="" id="sample-26_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
8394  <label class="nav-radio-label hover:cursor-pointer" for="sample-26_upright-ital_upright">Upright</label>
8395</div>
8396
8397    <div class="text-blue hover:text-red pt-1 w-[120px]">
8398  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8399  
8400    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
8401    <input type="radio" id="sample-26_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
8402  <label class="nav-radio-label hover:cursor-pointer" for="sample-26_upright-ital_italic">Italic</label>
8403</div>
8404
8405  </fieldset>
8406
8407  <!-- Latin: Default / Alternatives Option -->
8408  <!-- Currently Disabled, Too Many Options Syndrome -->
8409  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
8410    <include src="source/html-includes/radio-button.html">
8411      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
8412      "default", "label": "Default", "checked": true, "namePrefix": "sample-26" }
8413    </include>
8414    <include src="source/html-includes/radio-button.html">
8415      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
8416      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
8417      "sample-26" }
8418    </include>
8419  </fieldset> -->
8420
8421  <!-- Thai: Looped / Loopless Option -->
8422  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
8423    <div class="text-blue hover:text-red pt-1 w-[120px]">
8424  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8425  
8426    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
8427    <input type="radio" id="sample-26_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
8428  <label class="nav-radio-label hover:cursor-pointer" for="sample-26_looped_looped">Looped</label>
8429</div>
8430
8431    <div class="text-blue hover:text-red pt-1 w-[120px]">
8432  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8433  
8434    <input type="radio" checked="" id="sample-26_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
8435  <label class="nav-radio-label hover:cursor-pointer" for="sample-26_looped_loopless">Loopless</label>
8436</div>
8437
8438  </fieldset>
8439
8440  <!-- Latin Dropdown: Variable + all 84 styles -->
8441  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
8442    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
8443      <option value="variable" selected="selected">Variable</option>
8444      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
8445        Compressed Ultra Light
8446      </option>
8447      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
8448        Compressed Thin
8449      </option>
8450      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
8451        Compressed Light
8452      </option>
8453      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
8454        Compressed Regular
8455      </option>
8456      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
8457        Compressed Medium
8458      </option>
8459      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
8460        Compressed Bold
8461      </option>
8462      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
8463        Compressed Black
8464      </option>
8465      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
8466        Condensed Ultra Light
8467      </option>
8468      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
8469        Condensed Thin
8470      </option>
8471      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
8472        Condensed Light
8473      </option>
8474      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
8475        Condensed Regular
8476      </option>
8477      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
8478        Condensed Medium
8479      </option>
8480      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
8481        Condensed Bold
8482      </option>
8483      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
8484        Condensed Black
8485      </option>
8486      <option value="standard ultra light" data-wght="100" data-wdth="100">
8487        Standard Ultra Light
8488      </option>
8489      <option value="standard thin" data-wght="200" data-wdth="100">
8490        Standard Thin
8491      </option>
8492      <option value="standard light" data-wght="300" data-wdth="100">
8493        Standard Light
8494      </option>
8495      <option value="standard regular" data-wght="400" data-wdth="100">
8496        Standard Regular
8497      </option>
8498      <option value="standard medium" data-wght="500" data-wdth="100">
8499        Standard Medium
8500      </option>
8501      <option value="standard bold" data-wght="700" data-wdth="100">
8502        Standard Bold
8503      </option>
8504      <option value="standard black" data-wght="900" data-wdth="100">
8505        Standard Black
8506      </option>
8507      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
8508        Extended Ultra Light
8509      </option>
8510      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
8511        Extended Thin
8512      </option>
8513      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
8514        Extended Light
8515      </option>
8516      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
8517        Extended Regular
8518      </option>
8519      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
8520        Extended Medium
8521      </option>
8522      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
8523        Extended Bold
8524      </option>
8525      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
8526        Extended Black
8527      </option>
8528      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
8529        Expanded Ultra Light
8530      </option>
8531      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
8532        Expanded Thin
8533      </option>
8534      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
8535        Expanded Light
8536      </option>
8537      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
8538        Expanded Regular
8539      </option>
8540      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
8541        Expanded Medium
8542      </option>
8543      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
8544        Expanded Bold
8545      </option>
8546      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
8547        Expanded Black
8548      </option>
8549    </select>
8550  </div>
8551
8552  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
8553  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
8554    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8555      <option value="variable" selected="selected">Variable</option>
8556      <option value="looped ultra light" data-wght="100">Ultra Light</option>
8557      <option value="looped thin" data-wght="200">Thin</option>
8558      <option value="looped light" data-wght="300">Light</option>
8559      <option value="looped regular" data-wght="400">Regular</option>
8560      <option value="looped medium" data-wght="500">Medium</option>
8561      <option value="looped bold" data-wght="700">Bold</option>
8562      <option value="looped black" data-wght="900">Black</option>
8563    </select>
8564  </div>
8565
8566  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
8567  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
8568    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8569      <option value="variable" selected="selected">Variable</option>
8570      <option value="ultra light" data-wght="100">Ultra Light</option>
8571      <option value="thin" data-wght="200">Thin</option>
8572      <option value="light" data-wght="300">Light</option>
8573      <option value="regular" data-wght="400">Regular</option>
8574      <option value="medium" data-wght="500">Medium</option>
8575      <option value="bold" data-wght="700">Bold</option>
8576      <option value="black" data-wght="900">Black</option>
8577    </select>
8578  </div>
8579
8580  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
8581    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8582      <option value="variable" selected="selected">Variable</option>
8583      <option value="ultra light" data-wght="100">Ultra Light</option>
8584      <option value="thin" data-wght="200">Thin</option>
8585      <option value="light" data-wght="300">Light</option>
8586      <option value="regular" data-wght="400">Regular</option>
8587      <option value="medium" data-wght="500">Medium</option>
8588      <option value="bold" data-wght="700">Bold</option>
8589      <option value="black" data-wght="900">Black</option>
8590    </select>
8591  </div>
8592
8593  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
8594    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8595      <option value="variable" selected="selected">Variable</option>
8596      <option value="ultra light" data-wght="100">Ultra Light</option>
8597      <option value="thin" data-wght="200">Thin</option>
8598      <option value="light" data-wght="300">Light</option>
8599      <option value="regular" data-wght="400">Regular</option>
8600      <option value="medium" data-wght="500">Medium</option>
8601      <option value="bold" data-wght="700">Bold</option>
8602      <option value="black" data-wght="900">Black</option>
8603    </select>
8604  </div>
8605
8606  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
8607    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8608      <option value="variable" selected="selected">Variable</option>
8609      <option value="ultra light" data-wght="100">Ultra Light</option>
8610      <option value="thin" data-wght="200">Thin</option>
8611      <option value="light" data-wght="300">Light</option>
8612      <option value="regular" data-wght="400">Regular</option>
8613      <option value="medium" data-wght="500">Medium</option>
8614      <option value="bold" data-wght="700">Bold</option>
8615      <option value="black" data-wght="900">Black</option>
8616    </select>
8617  </div>
8618
8619  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
8620  <!-- Thai Slider: Weight (100–900) -->
8621  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
8622  <div data-component="tt__control-area">
8623    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
8624      <div class="flex flex-row justify-between">
8625        <div class="">Width</div>
8626        <div data-component="tt__wdth-value"></div>
8627      </div>
8628      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
8629    </div>
8630    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
8631      <div class="flex flex-row justify-between">
8632        <div class="">Weight</div>
8633        <div data-component="tt__wght-value"></div>
8634      </div>
8635      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange">
8636    </div>
8637  </div>
8638</form>
8639
8640  <!-- Main Content Area -->
8641  <div class="md:ml-[48px] flex w-full justify-center align-middle">
8642    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="th" data-size="l"></div>
8643  </div>
8644</section>
8645
8646
8647    <!-- Typetester Sample -->
8648<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
8649  <!-- Partial Width Content Area With Section Nav -->
8650  <!-- Section Nav Area -->
8651<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="thai">
8652  <!-- Select Script-->
8653  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
8654    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
8655      
8656        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
8657          Latin
8658        </option>
8659      
8660        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
8661          Cyrillic
8662        </option>
8663      
8664        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
8665          Greek
8666        </option>
8667      
8668        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
8669          Vietnamese
8670        </option>
8671      
8672        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
8673          Arabic
8674        </option>
8675      
8676        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
8677          Devanagari
8678        </option>
8679      
8680        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
8681          Hebrew
8682        </option>
8683      
8684        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
8685          Korean
8686        </option>
8687      
8688        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th" selected="selected">
8689          Thai
8690        </option>
8691      </select>
8692  </div>
8693
8694  <!-- Latin: Proportional / Mono Option -->
8695  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
8696    <div class="text-blue hover:text-red pt-1 w-[120px]">
8697  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8698  
8699    <input type="radio" checked="" id="sample-27_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
8700  <label class="nav-radio-label hover:cursor-pointer" for="sample-27_prop-mono_proportional">Proportional</label>
8701</div>
8702
8703    <div class="text-blue hover:text-red pt-1 w-[120px]">
8704  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8705  
8706    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
8707    <input type="radio" id="sample-27_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
8708  <label class="nav-radio-label hover:cursor-pointer" for="sample-27_prop-mono_mono">Monospaced</label>
8709</div>
8710
8711  </fieldset>
8712
8713  <!-- Latin: Upright / Italic Option -->
8714  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
8715    <div class="text-blue hover:text-red pt-1 w-[120px]">
8716  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8717  
8718    <input type="radio" checked="" id="sample-27_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
8719  <label class="nav-radio-label hover:cursor-pointer" for="sample-27_upright-ital_upright">Upright</label>
8720</div>
8721
8722    <div class="text-blue hover:text-red pt-1 w-[120px]">
8723  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8724  
8725    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
8726    <input type="radio" id="sample-27_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
8727  <label class="nav-radio-label hover:cursor-pointer" for="sample-27_upright-ital_italic">Italic</label>
8728</div>
8729
8730  </fieldset>
8731
8732  <!-- Latin: Default / Alternatives Option -->
8733  <!-- Currently Disabled, Too Many Options Syndrome -->
8734  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
8735    <include src="source/html-includes/radio-button.html">
8736      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
8737      "default", "label": "Default", "checked": true, "namePrefix": "sample-27" }
8738    </include>
8739    <include src="source/html-includes/radio-button.html">
8740      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
8741      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
8742      "sample-27" }
8743    </include>
8744  </fieldset> -->
8745
8746  <!-- Thai: Looped / Loopless Option -->
8747  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
8748    <div class="text-blue hover:text-red pt-1 w-[120px]">
8749  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8750  
8751    <input type="radio" checked="" id="sample-27_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
8752  <label class="nav-radio-label hover:cursor-pointer" for="sample-27_looped_looped">Looped</label>
8753</div>
8754
8755    <div class="text-blue hover:text-red pt-1 w-[120px]">
8756  <!-- I'm sure theres a better way of applying this attribute conditionally -->
8757  
8758    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
8759    <input type="radio" id="sample-27_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
8760  <label class="nav-radio-label hover:cursor-pointer" for="sample-27_looped_loopless">Loopless</label>
8761</div>
8762
8763  </fieldset>
8764
8765  <!-- Latin Dropdown: Variable + all 84 styles -->
8766  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
8767    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
8768      <option value="variable" selected="selected">Variable</option>
8769      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
8770        Compressed Ultra Light
8771      </option>
8772      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
8773        Compressed Thin
8774      </option>
8775      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
8776        Compressed Light
8777      </option>
8778      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
8779        Compressed Regular
8780      </option>
8781      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
8782        Compressed Medium
8783      </option>
8784      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
8785        Compressed Bold
8786      </option>
8787      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
8788        Compressed Black
8789      </option>
8790      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
8791        Condensed Ultra Light
8792      </option>
8793      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
8794        Condensed Thin
8795      </option>
8796      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
8797        Condensed Light
8798      </option>
8799      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
8800        Condensed Regular
8801      </option>
8802      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
8803        Condensed Medium
8804      </option>
8805      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
8806        Condensed Bold
8807      </option>
8808      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
8809        Condensed Black
8810      </option>
8811      <option value="standard ultra light" data-wght="100" data-wdth="100">
8812        Standard Ultra Light
8813      </option>
8814      <option value="standard thin" data-wght="200" data-wdth="100">
8815        Standard Thin
8816      </option>
8817      <option value="standard light" data-wght="300" data-wdth="100">
8818        Standard Light
8819      </option>
8820      <option value="standard regular" data-wght="400" data-wdth="100">
8821        Standard Regular
8822      </option>
8823      <option value="standard medium" data-wght="500" data-wdth="100">
8824        Standard Medium
8825      </option>
8826      <option value="standard bold" data-wght="700" data-wdth="100">
8827        Standard Bold
8828      </option>
8829      <option value="standard black" data-wght="900" data-wdth="100">
8830        Standard Black
8831      </option>
8832      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
8833        Extended Ultra Light
8834      </option>
8835      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
8836        Extended Thin
8837      </option>
8838      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
8839        Extended Light
8840      </option>
8841      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
8842        Extended Regular
8843      </option>
8844      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
8845        Extended Medium
8846      </option>
8847      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
8848        Extended Bold
8849      </option>
8850      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
8851        Extended Black
8852      </option>
8853      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
8854        Expanded Ultra Light
8855      </option>
8856      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
8857        Expanded Thin
8858      </option>
8859      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
8860        Expanded Light
8861      </option>
8862      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
8863        Expanded Regular
8864      </option>
8865      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
8866        Expanded Medium
8867      </option>
8868      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
8869        Expanded Bold
8870      </option>
8871      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
8872        Expanded Black
8873      </option>
8874    </select>
8875  </div>
8876
8877  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
8878  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
8879    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8880      <option value="variable" selected="selected">Variable</option>
8881      <option value="looped ultra light" data-wght="100">Ultra Light</option>
8882      <option value="looped thin" data-wght="200">Thin</option>
8883      <option value="looped light" data-wght="300">Light</option>
8884      <option value="looped regular" data-wght="400">Regular</option>
8885      <option value="looped medium" data-wght="500">Medium</option>
8886      <option value="looped bold" data-wght="700">Bold</option>
8887      <option value="looped black" data-wght="900">Black</option>
8888    </select>
8889  </div>
8890
8891  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
8892  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
8893    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8894      <option value="variable" selected="selected">Variable</option>
8895      <option value="ultra light" data-wght="100">Ultra Light</option>
8896      <option value="thin" data-wght="200">Thin</option>
8897      <option value="light" data-wght="300">Light</option>
8898      <option value="regular" data-wght="400">Regular</option>
8899      <option value="medium" data-wght="500">Medium</option>
8900      <option value="bold" data-wght="700">Bold</option>
8901      <option value="black" data-wght="900">Black</option>
8902    </select>
8903  </div>
8904
8905  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
8906    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8907      <option value="variable" selected="selected">Variable</option>
8908      <option value="ultra light" data-wght="100">Ultra Light</option>
8909      <option value="thin" data-wght="200">Thin</option>
8910      <option value="light" data-wght="300">Light</option>
8911      <option value="regular" data-wght="400">Regular</option>
8912      <option value="medium" data-wght="500">Medium</option>
8913      <option value="bold" data-wght="700">Bold</option>
8914      <option value="black" data-wght="900">Black</option>
8915    </select>
8916  </div>
8917
8918  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
8919    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8920      <option value="variable" selected="selected">Variable</option>
8921      <option value="ultra light" data-wght="100">Ultra Light</option>
8922      <option value="thin" data-wght="200">Thin</option>
8923      <option value="light" data-wght="300">Light</option>
8924      <option value="regular" data-wght="400">Regular</option>
8925      <option value="medium" data-wght="500">Medium</option>
8926      <option value="bold" data-wght="700">Bold</option>
8927      <option value="black" data-wght="900">Black</option>
8928    </select>
8929  </div>
8930
8931  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
8932    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
8933      <option value="variable" selected="selected">Variable</option>
8934      <option value="ultra light" data-wght="100">Ultra Light</option>
8935      <option value="thin" data-wght="200">Thin</option>
8936      <option value="light" data-wght="300">Light</option>
8937      <option value="regular" data-wght="400">Regular</option>
8938      <option value="medium" data-wght="500">Medium</option>
8939      <option value="bold" data-wght="700">Bold</option>
8940      <option value="black" data-wght="900">Black</option>
8941    </select>
8942  </div>
8943
8944  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
8945  <!-- Thai Slider: Weight (100–900) -->
8946  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
8947  <div data-component="tt__control-area">
8948    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
8949      <div class="flex flex-row justify-between">
8950        <div class="">Width</div>
8951        <div data-component="tt__wdth-value"></div>
8952      </div>
8953      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
8954    </div>
8955    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
8956      <div class="flex flex-row justify-between">
8957        <div class="">Weight</div>
8958        <div data-component="tt__wght-value"></div>
8959      </div>
8960      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="200" class="typetester-slider w-full" id="typetesterWghtRange">
8961    </div>
8962  </div>
8963</form>
8964
8965  <!-- Main Content Area -->
8966  <div class="md:ml-[48px] flex w-full justify-center align-middle">
8967    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="th" data-size="m"></div>
8968  </div>
8969</section>
8970
8971
8972    <!-- Typetester Sample -->
8973<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample">
8974  <!-- Partial Width Content Area With Section Nav -->
8975  <!-- Section Nav Area -->
8976<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="thai">
8977  <!-- Select Script-->
8978  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container">
8979    <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script">
8980      
8981        <option value="latin" data-script="latin" data-direction="ltr" data-lang="en">
8982          Latin
8983        </option>
8984      
8985        <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk">
8986          Cyrillic
8987        </option>
8988      
8989        <option value="greek" data-script="greek" data-direction="ltr" data-lang="el">
8990          Greek
8991        </option>
8992      
8993        <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi">
8994          Vietnamese
8995        </option>
8996      
8997        <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar">
8998          Arabic
8999        </option>
9000      
9001        <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi">
9002          Devanagari
9003        </option>
9004      
9005        <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he">
9006          Hebrew
9007        </option>
9008      
9009        <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko">
9010          Korean
9011        </option>
9012      
9013        <option value="thai" data-script="thai" data-direction="ltr" data-lang="th" selected="selected">
9014          Thai
9015        </option>
9016      </select>
9017  </div>
9018
9019  <!-- Latin: Proportional / Mono Option -->
9020  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced">
9021    <div class="text-blue hover:text-red pt-1 w-[120px]">
9022  <!-- I'm sure theres a better way of applying this attribute conditionally -->
9023  
9024    <input type="radio" checked="" id="sample-28_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
9025  <label class="nav-radio-label hover:cursor-pointer" for="sample-28_prop-mono_proportional">Proportional</label>
9026</div>
9027
9028    <div class="text-blue hover:text-red pt-1 w-[120px]">
9029  <!-- I'm sure theres a better way of applying this attribute conditionally -->
9030  
9031    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
9032    <input type="radio" id="sample-28_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
9033  <label class="nav-radio-label hover:cursor-pointer" for="sample-28_prop-mono_mono">Monospaced</label>
9034</div>
9035
9036  </fieldset>
9037
9038  <!-- Latin: Upright / Italic Option -->
9039  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
9040    <div class="text-blue hover:text-red pt-1 w-[120px]">
9041  <!-- I'm sure theres a better way of applying this attribute conditionally -->
9042  
9043    <input type="radio" checked="" id="sample-28_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
9044  <label class="nav-radio-label hover:cursor-pointer" for="sample-28_upright-ital_upright">Upright</label>
9045</div>
9046
9047    <div class="text-blue hover:text-red pt-1 w-[120px]">
9048  <!-- I'm sure theres a better way of applying this attribute conditionally -->
9049  
9050    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
9051    <input type="radio" id="sample-28_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
9052  <label class="nav-radio-label hover:cursor-pointer" for="sample-28_upright-ital_italic">Italic</label>
9053</div>
9054
9055  </fieldset>
9056
9057  <!-- Latin: Default / Alternatives Option -->
9058  <!-- Currently Disabled, Too Many Options Syndrome -->
9059  <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin">
9060    <include src="source/html-includes/radio-button.html">
9061      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
9062      "default", "label": "Default", "checked": true, "namePrefix": "sample-28" }
9063    </include>
9064    <include src="source/html-includes/radio-button.html">
9065      { "color": "blue", "hoverColor": "red", "name": "alternatives", "value":
9066      "alternatives", "label": "Alternatives", "checked": false, "namePrefix":
9067      "sample-28" }
9068    </include>
9069  </fieldset> -->
9070
9071  <!-- Thai: Looped / Loopless Option -->
9072  <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai">
9073    <div class="text-blue hover:text-red pt-1 w-[120px]">
9074  <!-- I'm sure theres a better way of applying this attribute conditionally -->
9075  
9076    <input type="radio" checked="" id="sample-28_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer">
9077  <label class="nav-radio-label hover:cursor-pointer" for="sample-28_looped_looped">Looped</label>
9078</div>
9079
9080    <div class="text-blue hover:text-red pt-1 w-[120px]">
9081  <!-- I'm sure theres a better way of applying this attribute conditionally -->
9082  
9083    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
9084    <input type="radio" id="sample-28_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer">
9085  <label class="nav-radio-label hover:cursor-pointer" for="sample-28_looped_loopless">Loopless</label>
9086</div>
9087
9088  </fieldset>
9089
9090  <!-- Latin Dropdown: Variable + all 84 styles -->
9091  <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese">
9092    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select">
9093      <option value="variable" selected="selected">Variable</option>
9094      <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true">
9095        Compressed Ultra Light
9096      </option>
9097      <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true">
9098        Compressed Thin
9099      </option>
9100      <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true">
9101        Compressed Light
9102      </option>
9103      <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true">
9104        Compressed Regular
9105      </option>
9106      <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true">
9107        Compressed Medium
9108      </option>
9109      <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true">
9110        Compressed Bold
9111      </option>
9112      <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true">
9113        Compressed Black
9114      </option>
9115      <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true">
9116        Condensed Ultra Light
9117      </option>
9118      <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true">
9119        Condensed Thin
9120      </option>
9121      <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true">
9122        Condensed Light
9123      </option>
9124      <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true">
9125        Condensed Regular
9126      </option>
9127      <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true">
9128        Condensed Medium
9129      </option>
9130      <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true">
9131        Condensed Bold
9132      </option>
9133      <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true">
9134        Condensed Black
9135      </option>
9136      <option value="standard ultra light" data-wght="100" data-wdth="100">
9137        Standard Ultra Light
9138      </option>
9139      <option value="standard thin" data-wght="200" data-wdth="100">
9140        Standard Thin
9141      </option>
9142      <option value="standard light" data-wght="300" data-wdth="100">
9143        Standard Light
9144      </option>
9145      <option value="standard regular" data-wght="400" data-wdth="100">
9146        Standard Regular
9147      </option>
9148      <option value="standard medium" data-wght="500" data-wdth="100">
9149        Standard Medium
9150      </option>
9151      <option value="standard bold" data-wght="700" data-wdth="100">
9152        Standard Bold
9153      </option>
9154      <option value="standard black" data-wght="900" data-wdth="100">
9155        Standard Black
9156      </option>
9157      <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true">
9158        Extended Ultra Light
9159      </option>
9160      <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true">
9161        Extended Thin
9162      </option>
9163      <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true">
9164        Extended Light
9165      </option>
9166      <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true">
9167        Extended Regular
9168      </option>
9169      <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true">
9170        Extended Medium
9171      </option>
9172      <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true">
9173        Extended Bold
9174      </option>
9175      <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true">
9176        Extended Black
9177      </option>
9178      <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true">
9179        Expanded Ultra Light
9180      </option>
9181      <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true">
9182        Expanded Thin
9183      </option>
9184      <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true">
9185        Expanded Light
9186      </option>
9187      <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true">
9188        Expanded Regular
9189      </option>
9190      <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true">
9191        Expanded Medium
9192      </option>
9193      <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true">
9194        Expanded Bold
9195      </option>
9196      <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true">
9197        Expanded Black
9198      </option>
9199    </select>
9200  </div>
9201
9202  <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) -->
9203  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai">
9204    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
9205      <option value="variable" selected="selected">Variable</option>
9206      <option value="looped ultra light" data-wght="100">Ultra Light</option>
9207      <option value="looped thin" data-wght="200">Thin</option>
9208      <option value="looped light" data-wght="300">Light</option>
9209      <option value="looped regular" data-wght="400">Regular</option>
9210      <option value="looped medium" data-wght="500">Medium</option>
9211      <option value="looped bold" data-wght="700">Bold</option>
9212      <option value="looped black" data-wght="900">Black</option>
9213    </select>
9214  </div>
9215
9216  <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles -->
9217  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic">
9218    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
9219      <option value="variable" selected="selected">Variable</option>
9220      <option value="ultra light" data-wght="100">Ultra Light</option>
9221      <option value="thin" data-wght="200">Thin</option>
9222      <option value="light" data-wght="300">Light</option>
9223      <option value="regular" data-wght="400">Regular</option>
9224      <option value="medium" data-wght="500">Medium</option>
9225      <option value="bold" data-wght="700">Bold</option>
9226      <option value="black" data-wght="900">Black</option>
9227    </select>
9228  </div>
9229
9230  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari">
9231    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
9232      <option value="variable" selected="selected">Variable</option>
9233      <option value="ultra light" data-wght="100">Ultra Light</option>
9234      <option value="thin" data-wght="200">Thin</option>
9235      <option value="light" data-wght="300">Light</option>
9236      <option value="regular" data-wght="400">Regular</option>
9237      <option value="medium" data-wght="500">Medium</option>
9238      <option value="bold" data-wght="700">Bold</option>
9239      <option value="black" data-wght="900">Black</option>
9240    </select>
9241  </div>
9242
9243  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew">
9244    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
9245      <option value="variable" selected="selected">Variable</option>
9246      <option value="ultra light" data-wght="100">Ultra Light</option>
9247      <option value="thin" data-wght="200">Thin</option>
9248      <option value="light" data-wght="300">Light</option>
9249      <option value="regular" data-wght="400">Regular</option>
9250      <option value="medium" data-wght="500">Medium</option>
9251      <option value="bold" data-wght="700">Bold</option>
9252      <option value="black" data-wght="900">Black</option>
9253    </select>
9254  </div>
9255
9256  <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean">
9257    <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer">
9258      <option value="variable" selected="selected">Variable</option>
9259      <option value="ultra light" data-wght="100">Ultra Light</option>
9260      <option value="thin" data-wght="200">Thin</option>
9261      <option value="light" data-wght="300">Light</option>
9262      <option value="regular" data-wght="400">Regular</option>
9263      <option value="medium" data-wght="500">Medium</option>
9264      <option value="bold" data-wght="700">Bold</option>
9265      <option value="black" data-wght="900">Black</option>
9266    </select>
9267  </div>
9268
9269  <!-- Latin Slider: Width (50–200), Weight (100–900) -->
9270  <!-- Thai Slider: Weight (100–900) -->
9271  <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100–900) -->
9272  <div data-component="tt__control-area">
9273    <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese">
9274      <div class="flex flex-row justify-between">
9275        <div class="">Width</div>
9276        <div data-component="tt__wdth-value"></div>
9277      </div>
9278      <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange">
9279    </div>
9280    <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean">
9281      <div class="flex flex-row justify-between">
9282        <div class="">Weight</div>
9283        <div data-component="tt__wght-value"></div>
9284      </div>
9285      <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange">
9286    </div>
9287  </div>
9288</form>
9289
9290  <!-- Main Content Area -->
9291  <div class="md:ml-[48px] flex w-full justify-center align-middle">
9292    <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="th" data-size="s"></div>
9293  </div>
9294</section>
9295
9296  </div>
9297</div>
9298
9299
9300    <!--INTRO SECTION-->
9301    <section data-nav-section="concept" data-nav-colour-switcher-colour="blue" data-nav-colour-switcher-colour-hover="red" class="bg-white text-blue">
9302  <div class="flex overflow-hidden">
9303    <!-- Full Width Content Area -->
9304    <!-- data-end-scroll-offset="0.5" -->
9305    <div data-component="section-scene" data-autoplay-until="0.752" data-start-scroll-offset="0.5" data-src="/models/candy/candy-v015/candy-v015.gltf" data-src-mobile="/models/candy/candy-mobile-v005/candy-mobile-v005.gltf" class="flex self-center w-full h-[100vh] md:h-[90vh]"></div>
9306  </div>
9307
9308  <!-- Class deleted from below div md:-mt-[4vh] -->
9309  <div class="md:ml-[132px] px-4 mb-9 flex">
9310    <!-- Partial Width Content Area -->
9311    <div class="md:ml-[170px] md:mr-4 grid-setup">
9312      <h2 class="col-span-full text-2xl md:text-3xl pb-5 md:pb-4">
9313        GT America Intl
9314      </h2>
9315      <p class="col-span-4 md:col-span-10 text-md md:text-xl">
9316        GT America connects two centuries of typographic genres, combining 19th
9317        century American Gothic and 20th century European Grotesk styles. The
9318        result is one cohesive typeface family unified under the best design
9319        features from both traditions. Originally released in 2016, this update
9320        implements the typographic system in variable font format as well as
9321        five new scripts. Exclusively available at Grilli Type.
9322      </p>
9323    </div>
9324  </div>
9325
9326  <!-- Family Overview Section -->
9327<div class="md:ml-[132px] md:px-4 mb-5 md:mb-11 flex flex-col md:flex-row">
9328  <div class="flex flex-row">
9329    <!-- Partial Width Content Area With Section Nav -->
9330    <!-- Section Nav Area -->
9331    <div class="hidden md:block ml-4 md:w-[120px] text-xs sticky self-start" data-component="sticky-subnav">
9332      <div class="flex flex-col justify-center md:h-full">
9333        <h3 class="text-lg">Style Overview</h3>
9334        <div class="flex flex-col items-start pt-5">6 Widths</div>
9335        <div class="flex flex-col items-start pt-2">7 Weights</div>
9336        <div class="flex flex-col items-start pt-2">84 Styles</div>
9337        <div class="flex flex-col items-start pt-2">Upright + Italic</div>
9338      </div>
9339    </div>
9340  </div>
9341  <!-- Main Content Area -->
9342  <div class="md:ml-[42px] md:mr-4 w-full text-xs">
9343    <!-- MOBILE VIEWPORTS: FAMILY OVERVIEW TABLE -->
9344    <div class="md:hidden col-span-4">
9345      <!-- <include src="source/html-includes/mobile-tilt-notice.html"></include> -->
9346      <table class="family-overview-table-mobile mb-8" data-component="family-overview-table" data-has-row-header="false">
9347        <tbody>
9348          <tr class="font-std-regular border-b">
9349            <th class="w-[50px] text-left">Comp.</th>
9350            <th class="h-[50px] text-left">Cond.</th>
9351            <th class="text-left">Stan.</th>
9352            <th class="text-left">Exte.</th>
9353            <th class="text-left">Expa.</th>
9354            <th class="text-left">Mono</th>
9355          </tr>
9356
9357          <tr class="ov-ultralight">
9358            <td>A<span class="">a</span></td>
9359            <td>B<span class="">b</span></td>
9360            <td>C<span class="">c</span></td>
9361            <td>D<span class="">d</span></td>
9362            <td>E<span class="">e</span></td>
9363            <td>F<span class="">f</span></td>
9364          </tr>
9365          <tr class="ov-thin">
9366            <td>G<span class="">g</span></td>
9367            <td>H<span class="">h</span></td>
9368            <td>I<span class="">i</span></td>
9369            <td>J<span class="">j</span></td>
9370            <td>K<span class="">k</span></td>
9371            <td>L<span class="">l</span></td>
9372          </tr>
9373          <tr class="ov-light">
9374            <td>M<span class="">m</span></td>
9375            <td>N<span class="">n</span></td>
9376            <td>O<span class="">o</span></td>
9377            <td>P<span class="">p</span></td>
9378            <td>Q<span class="">q</span></td>
9379            <td>R<span class="">r</span></td>
9380          </tr>
9381          <tr class="ov-regular">
9382            <td>S<span class="">s</span></td>
9383            <td>T<span class="">t</span></td>
9384            <td>U<span class="">u</span></td>
9385            <td>V<span class="">v</span></td>
9386            <td>W<span class="">w</span></td>
9387            <td>X<span class="">x</span></td>
9388          </tr>
9389          <tr class="ov-medium">
9390            <td>Y<span class="">y</span></td>
9391            <td>Z<span class="">z</span></td>
9392            <td>A<span class="">a</span></td>
9393            <td>B<span class="">b</span></td>
9394            <td>C<span class="">c</span></td>
9395            <td>D<span class="">d</span></td>
9396          </tr>
9397          <tr class="ov-bold">
9398            <td>E<span class="">e</span></td>
9399            <td>F<span class="">f</span></td>
9400            <td>G<span class="">g</span></td>
9401            <td>H<span class="">h</span></td>
9402            <td>I<span class="">i</span></td>
9403            <td>J<span class="">j</span></td>
9404          </tr>
9405          <tr class="ov-black">
9406            <td>K<span class="">k</span></td>
9407            <td>L<span class="">l</span></td>
9408            <td>M<span class="">m</span></td>
9409            <td>N<span class="">n</span></td>
9410            <td>O<span class="">o</span></td>
9411            <td>P<span class="">p</span></td>
9412          </tr>
9413        </tbody>
9414      </table>
9415    </div>
9416
9417    <!-- MD+ VIEWPORTS: FAMILY OVERVIEW TABLE -->
9418    <div class="hidden md:block col-span-12">
9419      <table class="family-overview-table-desktop" data-component="family-overview-table">
9420        <tbody>
9421          <tr class="font-std-regular">
9422            <th class="w-[30px] border-l-0 border-t-0"></th>
9423            <th class="h-[30px]">Compressed</th>
9424            <th class="">Condensed</th>
9425            <th class="">Standard</th>
9426            <th class="">Extended</th>
9427            <th class="">Expanded</th>
9428            <th class="">Mono</th>
9429          </tr>
9430
9431          <tr class="ov-ultralight">
9432            <th><div class="font-std-regular">Ultra Light</div></th>
9433            <td class="" style="transition: font-variation-settings .1s ease-in-out">
9434              A<span class="hidden md:inline">a</span>
9435            </td>
9436            <td class="" style="transition: font-variation-settings .1s ease-in-out">
9437              B<span class="hidden md:inline">b</span>
9438            </td>
9439            <td class="" style="transition: font-variation-settings .1s ease-in-out">
9440              C<span class="hidden md:inline">c</span>
9441            </td>
9442            <td class="" style="transition: font-variation-settings .1s ease-in-out">
9443              D<span class="hidden md:inline">d</span>
9444            </td>
9445            <td class="" style="transition: font-variation-settings .1s ease-in-out">
9446              E<span class="hidden md:inline">e</span>
9447            </td>
9448            <td class="" style="transition: font-variation-settings .1s ease-in-out">
9449              F<span class="hidden md:inline">f</span>
9450            </td>
9451          </tr>
9452          <tr class="ov-thin">
9453            <th><div class="font-std-regular">Thin</div></th>
9454            <td style="transition: font-variation-settings .1s ease-in-out">
9455              G<span class="hidden md:inline">g</span>
9456            </td>
9457            <td style="transition: font-variation-settings .1s ease-in-out">
9458              H<span class="hidden md:inline">h</span>
9459            </td>
9460            <td style="transition: font-variation-settings .1s ease-in-out">
9461              I<span class="hidden md:inline">i</span>
9462            </td>
9463            <td style="transition: font-variation-settings .1s ease-in-out">
9464              J<span class="hidden md:inline">j</span>
9465            </td>
9466            <td style="transition: font-variation-settings .1s ease-in-out">
9467              K<span class="hidden md:inline">k</span>
9468            </td>
9469            <td style="transition: font-variation-settings .1s ease-in-out">
9470              L<span class="hidden md:inline">l</span>
9471            </td>
9472          </tr>
9473          <tr class="ov-light">
9474            <th><div class="font-std-regular">Light</div></th>
9475            <td style="transition: font-variation-settings .1s ease-in-out">
9476              M<span class="hidden md:inline">m</span>
9477            </td>
9478            <td style="transition: font-variation-settings .1s ease-in-out">
9479              N<span class="hidden md:inline">n</span>
9480            </td>
9481            <td style="transition: font-variation-settings .1s ease-in-out">
9482              O<span class="hidden md:inline">o</span>
9483            </td>
9484            <td style="transition: font-variation-settings .1s ease-in-out">
9485              P<span class="hidden md:inline">p</span>
9486            </td>
9487            <td style="transition: font-variation-settings .1s ease-in-out">
9488              Q<span class="hidden md:inline">
9488q</span>
9489            </td>
9490            <td style="transition: font-variation-settings .1s ease-in-out">
9491              R<span class="hidden md:inline">r</span>
9492            </td>
9493          </tr>
9494          <tr class="ov-regular">
9495            <th><div class="font-std-regular">Regular</div></th>
9496            <td style="transition: font-variation-settings .1s ease-in-out">
9497              S<span class="hidden md:inline">s</span>
9498            </td>
9499            <td style="transition: font-variation-settings .1s ease-in-out">
9500              T<span class="hidden md:inline">t</span>
9501            </td>
9502            <td style="transition: font-variation-settings .1s ease-in-out">
9503              U<span class="hidden md:inline">u</span>
9504            </td>
9505            <td style="transition: font-variation-settings .1s ease-in-out">
9506              V<span class="hidden md:inline">v</span>
9507            </td>
9508            <td style="transition: font-variation-settings .1s ease-in-out">
9509              W<span class="hidden md:inline">w</span>
9510            </td>
9511            <td style="transition: font-variation-settings .1s ease-in-out">
9512              X<span class="hidden md:inline">x</span>
9513            </td>
9514          </tr>
9515          <tr class="ov-medium">
9516            <th><div class="font-std-regular">Medium</div></th>
9517            <td style="transition: font-variation-settings .1s ease-in-out">
9518              Y<span class="hidden md:inline">y</span>
9519            </td>
9520            <td style="transition: font-variation-settings .1s ease-in-out">
9521              Z<span class="hidden md:inline">z</span>
9522            </td>
9523            <td style="transition: font-variation-settings .1s ease-in-out">
9524              A<span class="hidden md:inline">a</span>
9525            </td>
9526            <td style="transition: font-variation-settings .1s ease-in-out">
9527              B<span class="hidden md:inline">b</span>
9528            </td>
9529            <td style="transition: font-variation-settings .1s ease-in-out">
9530              C<span class="hidden md:inline">c</span>
9531            </td>
9532            <td style="transition: font-variation-settings .1s ease-in-out">
9533              D<span class="hidden md:inline">d</span>
9534            </td>
9535          </tr>
9536          <tr class="ov-bold">
9537            <th><div class="font-std-regular">Bold</div></th>
9538            <td style="transition: font-variation-settings .1s ease-in-out">
9539              E<span class="hidden md:inline">e</span>
9540            </td>
9541            <td style="transition: font-variation-settings .1s ease-in-out">
9542              F<span class="hidden md:inline">f</span>
9543            </td>
9544            <td style="transition: font-variation-settings .1s ease-in-out">
9545              G<span class="hidden md:inline">g</span>
9546            </td>
9547            <td style="transition: font-variation-settings .1s ease-in-out">
9548              H<span class="hidden md:inline">h</span>
9549            </td>
9550            <td style="transition: font-variation-settings .1s ease-in-out">
9551              I<span class="hidden md:inline">i</span>
9552            </td>
9553            <td style="transition: font-variation-settings .1s ease-in-out">
9554              J<span class="hidden md:inline">j</span>
9555            </td>
9556          </tr>
9557          <tr class="ov-black">
9558            <th><div class="font-std-regular">Black</div></th>
9559            <td style="transition: font-variation-settings .1s ease-in-out">
9560              K<span class="hidden md:inline">k</span>
9561            </td>
9562            <td style="transition: font-variation-settings .1s ease-in-out">
9563              L<span class="hidden md:inline">l</span>
9564            </td>
9565            <td style="transition: font-variation-settings .1s ease-in-out">
9566              M<span class="hidden md:inline">m</span>
9567            </td>
9568            <td style="transition: font-variation-settings .1s ease-in-out">
9569              N<span class="hidden md:inline">n</span>
9570            </td>
9571            <td style="transition: font-variation-settings .1s ease-in-out">
9572              O<span class="hidden md:inline">o</span>
9573            </td>
9574            <td style="transition: font-variation-settings .1s ease-in-out">
9575              P<span class="hidden md:inline">p</span>
9576            </td>
9577          </tr>
9578        </tbody>
9579      </table>
9580    </div>
9581  </div>
9582</div>
9583
9584
9585  <!-- Design Space Section -->
9586<div class="md:ml-[132px] md:px-4 my-8 flex flex-col md:flex-row">
9587  <!-- Partial Width Content Area With Section Nav -->
9588  <!-- Section Nav Area -->
9589  <div data-component="sticky-subnav" class="block px-4 md:px-0 md:ml-4 w-full md:w-[120px] md:h-1/2 text-xs md:sticky">
9590    <div class="flex flex-col justify-center md:h-full border-b pb-4 md:border-0 md:pb-0">
9591      <h3 class="text-lg">Variable Fonts</h3>
9592      <div class="hidden md:flex flex-col items-start pt-5">Proportional</div>
9593      <div class="hidden md:flex flex-col items-start pt-2">Width Axis</div>
9594      <div class="hidden md:flex flex-col items-start pt-2">Weight Axis</div>
9595      <div class="hidden md:flex flex-col items-start pt-2">
9596        Upright + Italic
9597      </div>
9598      <div class="hidden md:flex flex-col items-start pt-5">Mono</div>
9599      <div class="hidden md:flex flex-col items-start pt-2">Weight Axis</div>
9600      <div class="hidden md:flex flex-col items-start pt-2">
9601        Upright + Italic
9602      </div>
9603    </div>
9604  </div>
9605  <!-- Main Content Area -->
9606  <div class="px-4 md:px-0 md:ml-[48px] md:mr-4 w-full text-xs overflow-hidden cursor-nesw-resize" data-component="axes-overview-group">
9607    <!-- Proportional VF Sample-->
9608    <div class="w-full pt-5 md:pt-0" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
9609      <div class="w-full vf-caption">
9610        <span class="pr-6 hidden md:inline-block">GT America Proportional</span>
9611        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6">○ 0°</span><span class="pr-6">○
9612          <span data-component="axes-overview__font-size-text"></span>
9613          px</span>
9614      </div>
9615      <div data-component="axes-overview__sample" class="text-[23.5vw] leading-none text-red h-[20vw] flex flex-col">
9616        America
9617      </div>
9618    </div>
9619    <!-- Mono VF Sample -->
9620    <div class="w-full pt-5 md:pt-0" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;">
9621      <div class="w-full vf-caption">
9622        <span class="pr-6 hidden md:inline-block">GT America Mono</span>
9623        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6">○ 0°</span><span class="pr-6">○
9624          <span data-component="axes-overview__font-size-text"></span>
9625          px</span>
9626      </div>
9627      <div data-component="axes-overview__sample" class="text-[23.5vw] mono-fonts leading-none text-red h-[20vw] flex flex-col md:-mb-[0.152em]">
9628        America
9629      </div>
9630    </div>
9631  </div>
9632</div>
9633
9634
9635  <!-- Family Overview Section -->
9636  <div class="md:ml-[132px] md:px-4 md:pt-8 my-8 flex flex-col md:flex-row">
9637    <!-- Partial Width Content Area With Section Nav -->
9638    <!-- Section Nav Area -->
9639    <div data-component="sticky-subnav" class="block ml-4 w-full md:w-[120px] md:h-1/2 text-xs md:sticky">
9640      <div class="flex flex-col justify-center md:h-full">
9641        <h3 class="text-lg"></h3>
9642      </div>
9643    </div>
9644    <!-- Main Content Area -->
9645    <div class="md:ml-[48px] md:mr-4 w-full grid-setup" lang="en">
9646      <!-- Removed from above:  md:w-3/4 text-justify hyphens-auto md:text-lg px-4 md:px-0 
9647           Removed from below: md:columns-2 gap-6-->
9648      <div class="col-span-4 md:col-span-10 px-4 md:px-0 text-md md:text-xl">
9649        The prototypical American Gothic is an early version of the sans serif
9650        model. It resembles a serif design without serifs—and less stroke
9651        contrast. This results in a dynamic flow and an expressive personality
9652        that is most visible in the double-story g. GT America combines this
9653        background with the rigor and precision of the European Grotesk model,
9654        built from the ground up as a sturdy workhorse.
9655      </div>
9656    </div>
9657  </div>
9658
9659  <!-- NEED TO ADJUST THIS LAYOUT FOR MOBILE STILL. BEFORE CODING OTHERS LIKE THIS! -->
9660
9661<div class="md:ml-[132px] px-4 py-8 mt-8 md:mt-10 relative">
9662  <!-- Printmarks Beginning -->
9663  <!-- Top Left -->
9664  <img class="absolute top-0 left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png">
9665  <!-- Top Middle -->
9666  <img class="absolute top-0 left-[50%] right-[50%] scale-50" src="/trim-bm-blue.77fd5ce2.png">
9667  <!-- Top Right -->
9668  <img class="absolute top-0 right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png">
9669  <!-- Bottom Left-->
9670  <img class="absolute bottom-0 left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png">
9671  <!-- Bottom Middle -->
9672  <img class="absolute bottom-0 left-[50%] right-[50%] scale-50" src="/cross-blue.9784e107.png">
9673  <!-- Bottom Right -->
9674  <img class="absolute bottom-0 right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png">
9675  <!-- Printmarks Ending-->
9676  <!-- one "row" on desktop -->
9677  <div class="grid-setup">
9678    <!-- Single Vertical Lottie Animation -->
9679    <div class="col-span-4 flex items-center justify-center">
9680      <lottie-player data-component="lottie-player" class="md:scale-[1.2] md:-translate-x-[10%] pb-8 md:pb-0" data-src="character-cowboy-001.json"></lottie-player>
9681    </div>
9682    <!-- Type Stack -->
9683    <div class="col-span-4 md:col-span-8 flex flex-col items-stretch overflow-hidden cursor-ew-resize" data-component="axes-overview-group">
9684      <!-- Type Stack Item It’s good -->
9685      <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 900; --wght-text: &quot;900&quot;; --wdth: 150; --wdth-text: &quot;150&quot;">
9686        <div class="vf-caption flex">
9687          <span class="pr-6">○
9688            <span class="hidden md:inline-block">GT America&nbsp;</span>Latin</span>
9689          <div>
9690            <span class="pr-6">●
9691              <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">○
9692              <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9693              <span data-component="axes-overview__font-size-text"></span>
9694              px</span>
9695          </div>
9696        </div>
9697        <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[16vw]">
9698          It’s Good Like That
9699        </div>
9700      </div>
9701      <!-- Type Stack Item Perfectly Juicy-->
9702      <div class="w-full text-blue" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 700; --wght-text: &quot;700&quot;; --wdth: 125; --wdth-text: &quot;125&quot;">
9703        <div class="vf-caption flex">
9704          <span class="pr-6">○
9705            <span class="hidden md:inline-block">GT America&nbsp;</span>Cyrillic</span>
9706          <div>
9707            <span class="pr-6">●
9708              <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">○
9709              <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9710              <span data-component="axes-overview__font-size-text"></span>
9711              px</span>
9712          </div>
9713        </div>
9714        <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[10vw]" lang="uk">
9715          Дуже Соковитий
9716        </div>
9717      </div>
9718      <!-- Type Stack Item Nearly a little too sweet-->
9719      <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 500; --wght-text: &quot;500&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
9720        <div class="vf-caption flex">
9721          <span class="pr-6">○
9722            <span class="hidden md:inline-block">GT America&nbsp;</span>Latin</span>
9723          <div>
9724            <span class="pr-6">●
9725              <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">○
9726              <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9727              <span data-component="axes-overview__font-size-text"></span>
9728              px</span>
9729          </div>
9730        </div>
9731        <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[6vw] italic-fonts">
9732          Little Too Sweet For My Taste But What Do I Know
9733        </div>
9734      </div>
9735      <!-- Type Stack Item Very Extremely Tasty-->
9736      <div class="w-full text-blue" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
9737        <div class="vf-caption flex">
9738          <span class="pr-6">○
9739            <span class="hidden md:inline-block">GT America&nbsp;</span>Greek</span>
9740          <div>
9741            <span class="pr-6">●
9742              <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">○
9743              <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9744              <span data-component="axes-overview__font-size-text"></span>
9745              px</span>
9746          </div>
9747        </div>
9748        <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[3.75vw]" lang="el">
9749          Τα Κουλουράκια Είναι Παραδοσιακό Ελληνικό Αρτοσκεύασμα
9750        </div>
9751      </div>
9752      <!-- Type Stack Item Somewhat Piquant-->
9753      <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 300; --wght-text: &quot;300&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
9754        <div class="vf-caption flex">
9755          <span class="pr-6">○
9756            <span class="hidden md:inline-block">GT America&nbsp;</span>Latin</span>
9757          <div>
9758            <span class="pr-6">●
9759              <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">○
9760              <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9761              <span data-component="axes-overview__font-size-text"></span>
9762              px</span>
9763          </div>
9764        </div>
9765        <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[2.25vw] italic-fonts">
9766          Newest Instant Social Media Sensation Dish Incurrs Record Fine In
9767          Lawsuit From Recorded Inventor
9768        </div>
9769      </div>
9770      <!-- Type Stack Item Quite Palatable-->
9771      <div class="w-full text-blue" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 200; --wght-text: &quot;200&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
9772        <div class="vf-caption flex">
9773          <span class="pr-6">○
9774            <span class="hidden md:inline-block">GT America&nbsp;</span>Vietnamese</span>
9775          <div>
9776            <span class="pr-6">●
9777              <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">○
9778              <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9779              <span data-component="axes-overview__font-size-text"></span>
9780              px</span>
9781          </div>
9782        </div>
9783        <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[1.5vw]">
9784          Bánh Da Lợn Là Một Loại Bánh Dùng Để Tráng Miệng Của Việt Nam, Đặc
9785          Biệt Là Ở Nam Bộ. Bánh Được Làm Từ Bột Năng, Đường Trắng, Dừa Nạo, Va
9786          Ni Hay Lá Dứa Và Một Số Gia Vị Khác.
9787        </div>
9788      </div>
9789
9790      <!-- Type Stack Item 9 out of 10 -->
9791      <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 100; --wght-text: &quot;100&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
9792        <div class="vf-caption flex">
9793          <span class="pr-6">○
9794            <span class="hidden md:inline-block">GT America&nbsp;</span>Latin</span>
9795          <div>
9796            <span class="pr-6">●
9797              <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">○
9798              <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9799              <span data-component="axes-overview__font-size-text"></span>
9800              px</span>
9801          </div>
9802        </div>
9803        <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[1vw]">
9804          This Dessert Gathers A Rating Of Seven Out Of Nine Possible Points
9805          From The Illustrious Jury Consisting Of Hundreds Of Previous Prize
9806          Winners And Their Collaborators Who Might Have Also Won Other Contests
9807          At Other Times
9808        </div>
9809      </div>
9810    </div>
9811  </div>
9812</div>
9813
9814
9815<div class="flex md:ml-[132px] px-4 py-8 mb-8 md:mb-10 relative">
9816  <!-- Printmarks Beginning -->
9817  <!-- Bottom Left -->
9818  <img class="absolute bottom-0 md:bottom-[-20px] left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png">
9819  <!-- Bottom Middle -->
9820  <img class="absolute bottom-0 md:bottom-[-20px] left-[50%] right-[50%] scale-50 rotate-[180deg]" src="/cross-blue.9784e107.png">
9821  <!-- Bottom Right -->
9822  <img class="absolute bottom-0 md:bottom-[-20px] right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png">
9823
9824  <!-- Left Middle -->
9825  <img class="hidden md:inline absolute top-[37%] bottom-[63%] left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png">
9826
9827  <!-- Right Middle -->
9828  <img class="hidden md:inline absolute top-[33%] bottom-[67%] right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png">
9829
9830  <!-- Printmarks Ending-->
9831
9832  <!-- one "row" on desktop -->
9833  <div class="grid-setup">
9834    <!-- 1 of 3 column with images or lotties -->
9835    <div class="flex col-span-4 md:col-span-4 flex-col items-center justify-between pr-4">
9836      <div class="pb-8 hidden md:flex flex-col">
9837        <div class="vf-caption pb-5">GT America Greek</div>
9838        <img class="pb-8" src="/1-clarks_sandwich.e1a637c2.gif">
9839      </div>
9840      <div class="flex flex-col">
9841        <div class="vf-caption">GT America Thai</div>
9842        <lottie-player data-component="lottie-player" class="z-0" data-src="product-gum.json"></lottie-player>
9843      </div>
9844      <!-- <img src="images/temp/gallery/1-pal.gif" /> -->
9845    </div>
9846
9847    <!-- 1 of 3 column with images or lotties -->
9848    <div class="col-span-4 flex flex-col items-center justify-between px-4">
9849      <div class="pb-8">
9850        <div class="vf-caption">GT America Cyrillic</div>
9851        <lottie-player data-component="lottie-player" class="pb-4 md:pb-8" data-src="product-caviar.json"></lottie-player>
9852      </div>
9853      <!-- Single Vertical Lottie Animation -->
9854      <div class="col-span-5 hidden md:flex flex-col items-start justify-center">
9855        <div class="vf-caption pb-5">GT America Devanagari</div>
9856        <lottie-player data-component="lottie-player" class="" data-src="product-squigglys.json"></lottie-player>
9857      </div>
9858    </div>
9859
9860    <!-- 1 of 3 column with images or lotties -->
9861    <div class="col-span-4 flex flex-col items-start justify-between pl-4">
9862      <div class="md:pb-8">
9863        <div class="vf-caption pb-5">GT America Japanese</div>
9864        <img class="pb-8" src="/1-pork_skins.e3f1fd17.gif">
9865      </div>
9866      <div class="">
9867        <div class="vf-caption pb-5">GT America Korean</div>
9868        <img src="/1-pilot.6dce939b.gif">
9869      </div>
9870    </div>
9871  </div>
9872</div>
9873
9874
9875<!-- American Candy VF Interaction -->
9876<div class="md:ml-[132px] px-4 mb-10 md:mb-9 relative">
9877  <!-- Printmarks Beginning -->
9878  <!-- Bottom Left -->
9879  <img class="absolute bottom-[-55px] md:bottom-[-20px] left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png">
9880  <!-- Bottom Middle -->
9881  <img class="absolute bottom-[-55px] md:bottom-[-20px] left-[50%] right-[50%] scale-50 rotate-[180deg]" src="/cross-blue.9784e107.png">
9882  <!-- Bottom Right -->
9883  <img class="absolute bottom-[-55px] md:bottom-[-20px] right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png">
9884  <!-- Printmarks Ending-->
9885
9886  <!-- Proportional VF Sample-->
9887  <div class="w-full" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 900; --wght-text: &quot;900&quot;; --wdth: 150; --wdth-text: &quot;150&quot;">
9888    <div class="w-full vf-caption md:mt-10">
9889      <span class="pr-6 hidden md:inline-block">Latin</span>
9890      <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">○ <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6">○ 0°</span><span class="pr-6">○
9891        <span data-component="axes-overview__font-size-text"></span>
9892        px</span>
9893    </div>
9894
9895    <div data-component="axes-overview__sample" class="text-[23.5vw] leading-[0.74] text-red h-[40vw] -tracking-[0.04em] flex flex-col w-full mt-[0.1em] md:-mt-[0.15em] relative overflow-hidden hover:cursor-ew-resize">
9896      <span class="block">american</span>
9897      <span class="block absolute right-0 text-blue mt-[0.78em] md:mt-[0.74em] pr-[0.04em]">candy</span>
9898    </div>
9899  </div>
9900</div>
9901
9902
9903<div class="md:ml-[132px] px-4 mb-10 relative">
9904  <!-- Printmarks Beginning -->
9905  <!-- Bottom Left -->
9906  <!-- <img
9907    class="absolute bottom-[-50px] md:bottom-[0] left-0 scale-50 rotate-[270deg]"
9908    src="images/marks/trim-bm-blue.png"
9909  /> -->
9910  <!-- Bottom Middle -->
9911  <!-- <img
9912    class="absolute bottom-[-50px] md:bottom-[0] left-[50%] right-[50%] scale-50 rotate-[180deg]"
9913    src="images/marks/cross-blue.png"
9914  /> -->
9915  <!-- Bottom Right -->
9916  <!-- <img
9917    class="absolute bottom-[-50px] md:bottom-[0] right-0 scale-50 rotate-[90deg]"
9918    src="images/marks/trim-bm-blue.png"
9919  /> -->
9920
9921  <!-- Right Middle -->
9922  <img class="hidden md:inline absolute top-[50%] bottom-[50%] right-0 scale-50" src="/color.ae66f817.png">
9923
9924  <!-- Printmarks Ending-->
9925
9926  <!-- one "row" on desktop -->
9927  <div class="grid-setup">
9928    <!-- Type Stack -->
9929    <div class="col-span-4 md:col-span-8 flex flex-col items-stretch overflow-hidden cursor-ns-resize" data-component="axes-overview-group">
9930      <!-- Type Stack Item Arabic-->
9931      <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
9932        <div class="vf-caption">
9933          <span class="pr-6">○ Arabic</span><span class="pr-6">○
9934            <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">●
9935            <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9936            <span data-component="axes-overview__font-size-text"></span>
9937            px</span>
9938        </div>
9939        <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item pt-4 pb-7 md:pb-8" dir="rtl">
9940          المعمول بالطريقة اللبنانية
9941        </div>
9942      </div>
9943      <!-- Type Stack Item Deva-->
9944      <div class="w-full text-blue" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
9945        <div class="vf-caption">
9946          <span class="pr-6">○ Devanagari</span><span class="pr-6">○
9947            <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">●
9948            <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9949            <span data-component="axes-overview__font-size-text"></span>
9950            px</span>
9951        </div>
9952        <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item pb-6 md:pb-7">
9953          गुलाब जामुन एक प्रकार
9954        </div>
9955      </div>
9956      <!-- Type Stack Item Hebrew-->
9957      <div class="w-full text-red md:pb-5" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
9958        <div class="vf-caption">
9959          <span class="pr-6">○ Hebrew</span><span class="pr-6">○
9960            <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">●
9961            <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9962            <span data-component="axes-overview__font-size-text"></span>
9963            px</span>
9964        </div>
9965        <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item" dir="rtl">
9966          קראנץ הוא עוגה עשויה
9967        </div>
9968      </div>
9969      <!-- Type Stack Item Korean-->
9970      <div class="w-full text-blue pb-5 md:pb-7" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
9971        <div class="vf-caption">
9972          <span class="pr-6">○ Korean</span><span class="pr-6">○
9973            <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">●
9974            <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9975            <span data-component="axes-overview__font-size-text"></span>
9976            px</span>
9977        </div>
9978        <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item pt-4 pb-3">
9979          추억의 달고나 막대사탕은
9980        </div>
9981      </div>
9982      <!-- Type Stack Item Thai-->
9983      <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
9984        <div class="vf-caption">
9985          <span class="pr-6">○ Thai Looped</span><span class="pr-6">○
9986            <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">●
9987            <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">○ 0°</span><span class="pr-6 hidden md:inline-block">○
9988            <span data-component="axes-overview__font-size-text"></span>
9989            px</span>
9990        </div>
9991        <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item thai-looped-fonts">
9992          ขนมครก เป็นขนมไทย
9993        </div>
9994      </div>
9995    </div>
9996    <!-- Single Vertical Lottie Animation -->
9997    <div class="col-span-4 flex items-center justify-center">
9998      <lottie-player data-component="lottie-player" data-src="character-hotdog-001.json"></lottie-player>
9999    </div>
10000  </div>
10001</div>
10002
10003
10004<div class="flex md:ml-[132px] px-4 mt-10 mb-7 relative">
10005  <!-- Printmarks Beginning -->
10006  <!-- Top Left -->
10007  <img class="absolute top-[-80px] left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png">
10008  <!-- Top Center Left -->
10009  <img class="hidden md:inline absolute top-[-80px] left-[16%] right-[84%] scale-50" src="/trim-bm-blue.77fd5ce2.png">
10010  <!-- Top Center Middle -->
10011  <img class="absolute top-[-80px] left-[48%] right-[52%] md:left-[48%] md:right-[52%] scale-50" src="/trim-bm-blue.77fd5ce2.png">
10012  <!-- Top Center Right -->
10013  <img class="hidden md:inline absolute top-[-80px] left-[81%] right-[19%] scale-50" src="/trim-bm-blue.77fd5ce2.png">
10014  <!-- Top Right -->
10015  <img class="absolute top-[-80px] right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png">
10016  <!-- Bottom Left-->
10017  <img class="absolute bottom-[-20px] md:bottom-0 left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png">
10018  <!-- Bottom Middle -->
10019  <img class="absolute bottom-[-20px] md:bottom-0 left-[50%] right-[50%] scale-50" src="/cross-blue.9784e107.png">
10020  <!-- Bottom Right -->
10021  <img class="absolute bottom-[-20px] md:bottom-0 right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png">
10022  <!-- Printmarks Ending-->
10023
10024  <!-- one "row" on desktop -->
10025  <div class="grid-setup">
10026    <!-- 1 of 2 rows with images or lotties -->
10027    <div class="col-span-4 md:col-span-12 flex flex-row px-4 grid-setup">
10028      <div class="flex flex-col col-span-4 md:col-span-2 pb-8">
10029        <div class="vf-caption pb-5">GT America Thai</div>
10030        <img class="" src="/2-steel_balls.91e61533.gif">
10031      </div>
10032      <div class="hidden md:flex flex-col col-span-2 md:col-span-4 pb-8">
10033        <div class="vf-caption pb-5">GT America Latin</div>
10034        <lottie-player data-component="lottie-player" class="" data-src="character-fireworks-cracker.json"></lottie-player>
10035      </div>
10036      <div class="flex flex-col col-span-4 md:col-span-4 pb-8">
10037        <div class="vf-caption pb-5">GT America Latin</div>
10038        <img class="" src="/2-masters_of_helvetia.ed5b5d2c.gif">
10039      </div>
10040      <div class="hidden md:flex flex-col col-span-2 md:col-span-2 pb-8">
10041        <div class="vf-caption pb-5">GT America Hebrew</div>
10042        <img class="" src="/2-spraymix.cfd9ae23.gif">
10043      </div>
10044
10045      <!-- 2 of 2 rows with images or lotties -->
10046      <div class="col-span-4 md:col-span-12 flex flex-row px-4 grid-setup">
10047        <div class="flex flex-col col-span-4 md:col-span-2 pb-6">
10048          <div class="vf-caption pb-5">GT America Korean</div>
10049          <img class="" src="/2-musketeers.4c7151b8.gif">
10050        </div>
10051        <div class="hidden md:flex flex-col col-span-2 md:col-span-4 pb-6">
10052          <div class="vf-caption pb-5">GT America Latin</div>
10053          <lottie-player data-component="lottie-player" class="md:-translate-y-[15%]" data-src="product-popcorn.json"></lottie-player>
10054        </div>
10055        <div class="flex flex-col col-span-4 md:col-span-2 pb-6">
10056          <div class="vf-caption pb-5">GT America Latin</div>
10057          <lottie-player data-component="lottie-player" class="" data-src="product-lightningspray.json"></lottie-player>
10058        </div>
10059        <div class="hidden md:flex flex-col col-span-4 md:col-span-4 pb-6">
10060          <div class="vf-caption pb-5">GT America Latin</div>
10061          <img class="" src="/1-product-fruitpunch.d5d3225b.png">
10062        </div>
10063      </div>
10064    </div>
10065  </div>
10066</div>
10067
10068
10069</section>
10070
10071
10072    <!--LANGUAGES SECTION-->
10073    <section data-nav-section="languages" data-nav-colour-switcher-colour="white" data-nav-colour-switcher-colour-hover="red" class="bg-blue text-white pt-9 md:pb-10">
10074  <section class="flex">
10075  <!-- Full Width Content Area -->
10076  <div data-component="section-scene" data-autoplay-until="1" data-src="/models/airline/airline-v006/airline-v006.gltf" data-src-mobile="/models/airline/airline-mobile-v002/airline-mobile-v002.gltf" class="flex justify-center align-center w-full h-[100vh]"></div>
10077</section>
10078<section class="md:ml-[132px] px-4 mb-9 flex">
10079  <!-- Partial Width Content Area -->
10080  <div class="md:ml-[170px] md:mr-4 grid-setup">
10081    <h2 class="col-span-full text-2xl md:text-3xl pb-5 md:pb-4">
10082      Going Global
10083    </h2>
10084    <p class="col-span-4 md:col-span-10 text-md md:text-xl">
10085      We collaborated with our partners from around the world to expand the
10086      typeface to five new scripts—Arabic عربي, Devanagari देवनागरी, Hebrew
10087      עברית, Korean 한글, and Thai
10088      <span class="thai-looped-fonts">ภาษาไทย</span>—to enable GT America’s role
10089      as a global typeface. These collaborators brought their design expertise
10090      and fluency while applying GT America’s personality to Grilli Type’s most
10091      comprehensive script extension yet.
10092    </p>
10093  </div>
10094</section>
10095
10096  <!-- Scripts Style Overview List of Styles across Scripts -->
10097<section class="md:ml-[132px] md:px-4 mb-9 flex flex-col">
10098  <div class="flex flex-col md:flex-row">
10099    <!-- Partial Width Content Area With Section Nav -->
10100    <!-- Section Nav Area -->
10101    <div class="block ml-4 md:w-[120px] md:h-1/2 text-xs">
10102      <div class="flex flex-col justify-center md:h-full">
10103        <h3 class="text-lg pb-6 md:pb-0">Available Scripts</h3>
10104      </div>
10105    </div>
10106    <!-- Main Content Area -->
10107    <div class="md:ml-[48px] md:mr-4 w-full text-xs">
10108      <div class="w-full grid-setup">
10109        <div class="col-span-4 md:col-span-4 text-md px-4 md:px-0 pb-6">
10110          <h4 class="pb-3">The Original Four</h4>
10111          GT America’s original 84 styles are available in Latin, Cyrillic,
10112          Greek, and Vietnamese. This includes five widths and a monospaced
10113          version.
10114        </div>
10115      </div>
10116    </div>
10117  </div>
10118
10119  <div class="flex flex-row mb-10">
10120    <!-- Partial Width Content Area With Section Nav -->
10121    <!-- Section Nav Area -->
10122    <div class="hidden md:block ml-4 md:w-[120px] text-xs sticky self-start" data-component="sticky-subnav">
10123      <div class="flex flex-col justify-center md:h-full">
10124        <ul>
10125          <li class="pt-2">6 Widths</li>
10126          <li class="pt-2">7 Weights</li>
10127          <li class="pt-2">Proportional</li>
10128          <li class="pt-2">Monospaced</li>
10129          <li class="pt-2">Variable Fonts</li>
10130        </ul>
10131      </div>
10132    </div>
10133    <!-- Main Content Area -->
10134    <div class="mx-4 md:ml-[48px] md:mr-4 w-full text-xs cursor-wait">
10135      <!-- One row of scripts  -->
10136      <div data-component="avail-scripts-animation-group" data-mode="wdthwght" class="grid-setup">
10137        <div class="col-span-4 md:col-span-6">
10138          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10139            <h4 class="vf-caption">Latin</h4>
10140            <div class="md:hidden vf-caption">6 Widths • 7 Weights</div>
10141          </div>
10142          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center font-std-regular text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 leading-[0.8em] overflow-x-hidden">
10143            Latin
10144          </div>
10145        </div>
10146
10147        <div class="col-span-4 md:col-span-6">
10148          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10149            <h4 class="vf-caption">Cyrillic</h4>
10150            <div class="md:hidden vf-caption">6 Widths • 7 Weights</div>
10151          </div>
10152          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]">
10153            Кирилиця
10154          </div>
10155        </div>
10156
10157        <div class="col-span-4 md:col-span-6">
10158          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10159            <h4 class="vf-caption">Greek</h4>
10160            <div class="md:hidden vf-caption">6 Widths • 7 Weights</div>
10161          </div>
10162          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]">
10163            Ελληνικά
10164          </div>
10165        </div>
10166
10167        <div class="col-span-4 md:col-span-6">
10168          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10169            <h4 class="vf-caption">Vietnamese</h4>
10170            <div class="md:hidden vf-caption">6 Widths • 7 Weights</div>
10171          </div>
10172          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]">
10173            Chữ Việt
10174          </div>
10175        </div>
10176      </div>
10177    </div>
10178  </div>
10179
10180  <div class="flex flex-row mb-10">
10181    <!-- Partial Width Content Area With Section Nav -->
10182
10183    <!-- Section Nav Area -->
10184    <div class="hidden md:block ml-4 md:w-[120px] text-xs sticky self-start" data-component="sticky-subnav">
10185      <div class="flex flex-col justify-center md:h-full">
10186        <ul>
10187          <li class="pt-2">1 Width</li>
10188          <li class="pt-2">7 Weights</li>
10189          <li class="pt-2">Includes Latin+</li>
10190          <li class="pt-2">Proportional only</li>
10191          <li class="pt-2">Variable Fonts</li>
10192        </ul>
10193      </div>
10194    </div>
10195
10196    <!-- Main Content Area -->
10197    <div class="mx-4 md:ml-[48px] md:mr-4 w-full text-xs cursor-wait">
10198      <div class="w-full grid-setup"></div>
10199
10200      <!-- One row of scripts  -->
10201      <div data-component="avail-scripts-animation-group" data-mode="wght" class="grid-setup">
10202        <div class="col-span-4 md:col-span-12 grid-setup">
10203          <div class="col-span-4 md:col-span-4 text-md pb-6">
10204            <h4 class="pb-3">Intl Expansion</h4>
10205            These scripts are designed as counterparts to the Latin’s standard
10206            width’s seven weights. Each script is available separately and
10207            always includes the Latin character set.
10208          </div>
10209        </div>
10210
10211        <div class="col-span-4 md:col-span-6">
10212          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10213            <h4 class="vf-caption">Arabic</h4>
10214            <div class="md:hidden vf-caption">7 Weights</div>
10215          </div>
10216          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-3 md:pb-9 overflow-x-hidden leading-[0.8em]">
10217            عربي
10218          </div>
10219        </div>
10220
10221        <div class="col-span-4 md:col-span-6">
10222          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10223            <h4 class="vf-caption">Devanagari</h4>
10224            <div class="md:hidden vf-caption">7 Weights</div>
10225          </div>
10226          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]">
10227            देवनागरी
10228          </div>
10229        </div>
10230
10231        <div class="col-span-4 md:col-span-6">
10232          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10233            <h4 class="vf-caption">Hebrew</h4>
10234            <div class="md:hidden vf-caption">7 Weights</div>
10235          </div>
10236          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-5 md:pb-9 overflow-x-hidden leading-[0.8em]">
10237            עברית
10238          </div>
10239        </div>
10240
10241        <div class="col-span-4 md:col-span-6">
10242          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10243            <h4 class="vf-caption">Korean</h4>
10244            <div class="md:hidden vf-caption">7 Weights</div>
10245          </div>
10246          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]">
10247            한글
10248          </div>
10249        </div>
10250
10251        <div class="col-span-4 md:col-span-12">
10252          <div class="flex flex-row justify-between border-t pt-2 mb-4">
10253            <div class="w-full grid-setup">
10254              <div class="col-span-4 md:col-span-6 flex justify-between">
10255                <h4 class="vf-caption inline md:block">
10256                  Thai Looped<span class="inline md:hidden"> / Loopless</span>
10257                </h4>
10258                <div class="inline md:hidden vf-caption">7 Weights</div>
10259              </div>
10260              <div class="hidden md:flex md:col-span-6">
10261                <h4 class="vf-caption">Thai Loopless</h4>
10262              </div>
10263            </div>
10264          </div>
10265          <div class="w-full flex flex-col md:flex-row">
10266            <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center w-full md:w-1/2 text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-5 md:pt-6 md:pb-9 leading-[0.8em] thai-looped-fonts">
10267              ภาษาไทย<!-- จีที อเมริกา ไทย ลูป -->
10268            </div>
10269            <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center w-full md:w-1/2 text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 leading-[0.8em] overflow-x-hidden thai-loopless-fonts">
10270              ภาษาไทย<!-- จีที อเมริกา ไทย ลูปเลส -->
10271            </div>
10272          </div>
10273        </div>
10274      </div>
10275    </div>
10276  </div>
10277
10278  <div class="flex flex-row mb-0 md:mb-10">
10279    <!-- Partial Width Content Area With Section Nav -->
10280
10281    <!-- Section Nav Area -->
10282    <div class="hidden md:block ml-4 md:w-[120px] text-xs sticky self-start" data-component="sticky-subnav">
10283      <div class="flex flex-col justify-center md:h-full">
10284        <ul>
10285          <li class="pt-2">1 Width</li>
10286          <li class="pt-2">Includes Latin+</li>
10287          <li class="pt-2">Proportional only</li>
10288          <li class="pt-2">Variable Fonts</li>
10289        </ul>
10290      </div>
10291    </div>
10292
10293    <!-- Main Content Area -->
10294    <div class="mx-4 md:ml-[48px] md:mr-4 w-full text-xs cursor-wait">
10295      <!-- One row of scripts  -->
10296      <div data-component="avail-scripts-animation-group" data-mode="wght" class="grid-setup">
10297        <div class="col-span-4 md:col-span-12 grid-setup">
10298          <div class="col-span-4 md:col-span-4 text-md pb-6">
10299            <h4 class="pb-3">Matching Japanese & Chinese</h4>
10300            In partnership with our local partners we offer solutions for
10301            Chinese and Japanese support on request. Taipei-based foundry Arphic
10302            Technologies provides both Simplified and Traditional Chinese
10303            designs matched to four weights of GT America. Together with
10304            Tokyo-based Type Project we offer six weights of GT America matched
10305            with their Japanese design.
10306          </div>
10307        </div>
10308
10309        <div class="col-span-4 md:col-span-6">
10310          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10311            <h4 class="vf-caption">Simplified Chinese</h4>
10312            <div class="vf-caption hidden md:flex">AR UDJingXi HeiE1</div>
10313            <div class="md:hidden vf-caption">4 Weights</div>
10314          </div>
10315          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em] simpchinese-fonts">
10316            简体中文
10317          </div>
10318        </div>
10319
10320        <div class="col-span-4 md:col-span-6">
10321          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10322            <h4 class="vf-caption">Traditional Chinese</h4>
10323            <div class="vf-caption hidden md:flex">AR UDJingXi HeiE1</div>
10324            <div class="md:hidden vf-caption">4 Weights</div>
10325          </div>
10326          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em] tradchinese-fonts">
10327            繁體中文
10328          </div>
10329        </div>
10330
10331        <div class="col-span-4 md:col-span-6">
10332          <div class="flex flex-row justify-between border-t pt-2 mb-3">
10333            <h4 class="vf-caption">Japanese</h4>
10334            <div class="vf-caption hidden md:flex">Type Project AXIS Font</div>
10335            <div class="md:hidden vf-caption">6 Weights</div>
10336          </div>
10337          <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em] japanese-fonts">
10338            日本語
10339          </div>
10340        </div>
10341      </div>
10342    </div>
10343  </div>
10344</section>
10345
10346  <section class="ml-[132px] px-4 hidden md:flex" data-component="show-hide-section">
10347  <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav">
10348    <form class="flex flex-col justify-center h-full" data-component="show-hide-section__radios">
10349  <legend class="text-lg">View Scripts</legend>
10350
10351  <div class="flex flex-col items-start pt-5">
10352    <div class="text-white hover:text-red pt-1 w-[120px]">
10353  <!-- I'm sure theres a better way of applying this attribute conditionally -->
10354  
10355    <input type="radio" checked="" id="languages_set-script_latin" name="set-script" value="latin" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white checked:hover:border-white checked:hover:bg-red hover:cursor-pointer">
10356  <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_latin">Latin</label>
10357</div>
10358
10359
10360    <div class="text-white hover:text-red pt-1 w-[120px]">
10361  <!-- I'm sure theres a better way of applying this attribute conditionally -->
10362  
10363    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
10364    <input type="radio" id="languages_set-script_cyrillic" name="set-script" value="cyrillic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer">
10365  <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_cyrillic">Cyrillic</label>
10366</div>
10367
10368
10369    <div class="text-white hover:text-red pt-1 w-[120px]">
10370  <!-- I'm sure theres a better way of applying this attribute conditionally -->
10371  
10372    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
10373    <input type="radio" id="languages_set-script_greek" name="set-script" value="greek" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer">
10374  <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_greek">Greek</label>
10375</div>
10376
10377
10378    <div class="text-white hover:text-red pt-1 w-[120px]">
10379  <!-- I'm sure theres a better way of applying this attribute conditionally -->
10380  
10381    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
10382    <input type="radio" id="languages_set-script_vietnamese" name="set-script" value="vietnamese" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer">
10383  <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_vietnamese">Vietnamese</label>
10384</div>
10385
10386  </div>
10387
10388  <div class="flex flex-col items-start pt-5">
10389    <div class="text-white hover:text-red pt-1 w-[120px]">
10390  <!-- I'm sure theres a better way of applying this attribute conditionally -->
10391  
10392    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
10393    <input type="radio" id="languages_set-script_arabic" name="set-script" value="arabic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer">
10394  <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_arabic">Arabic</label>
10395</div>
10396
10397
10398    <div class="text-white hover:text-red pt-1 w-[120px]">
10399  <!-- I'm sure theres a better way of applying this attribute conditionally -->
10400  
10401    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
10402    <input type="radio" id="languages_set-script_devanagari" name="set-script" value="devanagari" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer">
10403  <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_devanagari">Devanagari</label>
10404</div>
10405
10406
10407    <div class="text-white hover:text-red pt-1 w-[120px]">
10408  <!-- I'm sure theres a better way of applying this attribute conditionally -->
10409  
10410    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
10411    <input type="radio" id="languages_set-script_hebrew" name="set-script" value="hebrew" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer">
10412  <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_hebrew">Hebrew</label>
10413</div>
10414
10415
10416    <div class="text-white hover:text-red pt-1 w-[120px]">
10417  <!-- I'm sure theres a better way of applying this attribute conditionally -->
10418  
10419    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
10420    <input type="radio" id="languages_set-script_korean" name="set-script" value="korean" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer">
10421  <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_korean">Korean</label>
10422</div>
10423
10424
10425    <div class="text-white hover:text-red pt-1 w-[120px]">
10426  <!-- I'm sure theres a better way of applying this attribute conditionally -->
10427  
10428    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
10429    <input type="radio" id="languages_set-script_thai" name="set-script" value="thai" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer">
10430  <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_thai">Thai</label>
10431</div>
10432
10433  </div>
10434  <!-- 
10435  <div class="flex flex-col items-start pt-5">
10436    <include src="source/html-includes/radio-button.html">
10437      { "color": "white", "hoverColor": "red", "name": "set-script", "value":
10438      "chinese-simplified", "label": "Simp. Chinese", "checked": false,
10439      "namePrefix": "languages" }
10440    </include>
10441
10442    <include src="source/html-includes/radio-button.html">
10443      { "color": "white", "hoverColor": "red", "name": "set-script", "value":
10444      "chinese-traditional", "label": "Trad. Chinese", "checked": false,
10445      "namePrefix": "languages" }
10446    </include>
10447
10448    <include src="source/html-includes/radio-button.html">
10449      { "color": "white", "hoverColor": "red", "name": "set-script", "value":
10450      "japanese", "label": "Japanese", "checked": false, "namePrefix":
10451      "languages" }
10452    </include>
10453  </div> -->
10454</form>
10455
10456  </div>
10457  <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="latin">
10458  <div data-component="axes-overview-group">
10459    <!-- L size sample -->
10460    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: &quot;900&quot;; --wdth: 125; --wdth-text: &quot;125&quot;">
10461      <div class="w-full vf-caption">
10462        <span class="pr-6">○ Latin</span>
10463        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10464        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10465        <span class="pr-6">○ 0°</span>
10466        <span class="pr-6">○
10467          <span data-component="axes-overview__font-size-text"></span> px</span>
10468      </div>
10469      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l">
10470        Tasty Popcorn
10471      </div>
10472    </div>
10473
10474    <!-- M size sample -->
10475    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
10476      <div class="w-full vf-caption">
10477        <span class="pr-6">○ Latin</span>
10478        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10479        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10480        <span class="pr-6">○ 0°</span>
10481        <span class="pr-6">○
10482          <span data-component="axes-overview__font-size-text"></span> px</span>
10483      </div>
10484      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m">
10485        No Additional Preservatives<br>Brown Sugar Only Facility
10486      </div>
10487    </div>
10488
10489    <!-- S size sample -->
10490    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
10491      <div class="w-full vf-caption">
10492        <span class="pr-6">○ Latin</span>
10493        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10494        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10495        <span class="pr-6">○ 0°</span>
10496        <span class="pr-6">○
10497          <span data-component="axes-overview__font-size-text"></span> px</span>
10498      </div>
10499
10500      <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesn’t seem to work correctly for multi-column text -->
10501      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="en">
10502        An apple pie is a fruit pie in which the principal filling is apples.
10503        Apple pie is often served with whipped cream, ice cream, custard or
10504        cheddar cheese. It is generally double-crusted, with pastry both above
10505        and below the filling; the upper crust may be solid or latticed (woven
10506        of crosswise strips). The bottom crust may be baked separately to
10507        prevent it from getting soggy. Deep-dish apple pie often has a top crust
10508        only. Tarte Tatin is baked with the crust on top, but served with it on
10509        the bottom. Noted first in the 14th century, apple pie recipes are a
10510        standard part of cuisines in many countries where apples grow. Apple
10511        pies are an unofficial symbol of the United States and one of its
10512        signature comfort foods. Apple pie can be made with many different sorts
10513        of apples. The more popular cooking apples include Braeburn, Gala,
10514        Cortland, Bramley, Empire, Northern Spy, Granny Smith, and McIntosh. The
10515        fruit for the pie can be fresh, canned, or reconstituted from dried
10516        apples. Dried or preserved apples were originally substituted only at
10517        times when fresh fruit was unavailable. The basic ingredients of the
10518        filling are sugar, butter, a thickener like cornstarch and an acidic
10519        ingredient like lemon juice. Spices may be added according to taste,
10520        most commonly cinnamon, and sometimes nutmeg. Lemon juice is used to
10521        prevent oxidation of the apples when macerating the filling. Many older
10522        recipes call for honey in place of the then-expensive sugar.
10523      </div>
10524    </div>
10525  </div>
10526</div>
10527
10528  <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="cyrillic">
10529  <div data-component="axes-overview-group">
10530    <!-- L size sample -->
10531    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: &quot;900&quot;; --wdth: 125; --wdth-text: &quot;125&quot;">
10532      <div class="w-full vf-caption">
10533        <span class="pr-6">○ Cyrillic</span>
10534        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10535        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10536        <span class="pr-6">○ 0°</span>
10537        <span class="pr-6">○
10538          <span data-component="axes-overview__font-size-text"></span> px</span>
10539      </div>
10540      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l">
10541        ІНГРЕДІЄНТАМИ
10542      </div>
10543    </div>
10544
10545    <!-- M size sample -->
10546    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
10547      <div class="w-full vf-caption">
10548        <span class="pr-6">○ Cyrillic</span>
10549        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10550        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10551        <span class="pr-6">○ 0°</span>
10552        <span class="pr-6">○
10553          <span data-component="axes-overview__font-size-text"></span> px</span>
10554      </div>
10555      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m">
10556        Торт Павлова це повітряний<br><span class="italic-fonts">З ніжною хрусткою скоринкою і м'якою</span>
10557      </div>
10558    </div>
10559
10560    <!-- S size sample -->
10561    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
10562      <div class="w-full vf-caption">
10563        <span class="pr-6">○ Cyrillic</span>
10564        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10565        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10566        <span class="pr-6">○ 0°</span>
10567        <span class="pr-6">○
10568          <span data-component="axes-overview__font-size-text"></span> px</span>
10569      </div>
10570
10571      <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesn’t seem to work correctly for multi-column text -->
10572      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="uk">
10573        Ки́ївська троя́нда різновид солодкої хрусткої випічки, засмаженої
10574        у фритюрі й начиненої фруктовим наповнювачем. Типологічно належить
10575        до печива, але цей виріб можна розглядати і як тістечко. Крім цих
10576        продуктів обов'язковими інгредієнтами у невеликих кількостях виступають
10577        вершкове масло, цукор і алкоголь. Останній додають для надання готовому
10578        виробові хрусткості. В класичному рецепті передбачено використання рому,
10579        але його можна замінити коньяком, бренді, горілкою чи іншим міцним
10580        напоєм. Сформовані київські троянди смажать у фритюрі, склад якого
10581        рецептурою не регламентований. Для смаження придатні смалець, олія, їхня
10582        суміш чи будь-який інший кулінарний жир. Готові вироби посипають
10583        цукровою пудрою, а середину кожної квітки наповнюють фруктовою начинкою.
10584        Оскільки тістечка виходять доволі жирними й солодкими, для гармонізації
10585        смаку віддають перевагу начинкам з кислуватим присмаком. Так, в Україні
10586        для цього традиційно використовують ягоди з вишневого варення, в Польщі
10587        до популярних наповнювачів належать консервовані вишні, шипшиновий
10588        мармелад, сливовий джем.
10589      </div>
10590    </div>
10591  </div>
10592</div>
10593
10594  <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="greek">
10595  <div data-component="axes-overview-group">
10596    <!-- L size sample -->
10597    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: &quot;900&quot;; --wdth: 125; --wdth-text: &quot;125&quot;">
10598      <div class="w-full vf-caption">
10599        <span class="pr-6">○ Greek</span>
10600        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10601        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10602        <span class="pr-6">○ 0°</span>
10603        <span class="pr-6">○
10604          <span data-component="axes-overview__font-size-text"></span> px</span>
10605      </div>
10606      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l">
10607        Μπουγάτσα Θεσσαλονίκης
10608      </div>
10609    </div>
10610
10611    <!-- M size sample -->
10612    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
10613      <div class="w-full vf-caption">
10614        <span class="pr-6">○ Greek</span>
10615        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10616        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10617        <span class="pr-6">○ 0°</span>
10618        <span class="pr-6">○
10619          <span data-component="axes-overview__font-size-text"></span> px</span>
10620      </div>
10621      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m">
10622        Οι δίπλες μπορεί να έχουν διάφορα σχήματα<br><span class="italic-fonts">Μαντολάτο είναι λαστιχωτό</span>
10623      </div>
10624    </div>
10625
10626    <!-- S size sample -->
10627    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
10628      <div class="w-full vf-caption">
10629        <span class="pr-6">○ Greek</span>
10630        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10631        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10632        <span class="pr-6">○ 0°</span>
10633        <span class="pr-6">○
10634          <span data-component="axes-overview__font-size-text"></span> px</span>
10635      </div>
10636
10637      <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesn’t seem to work correctly for multi-column text -->
10638      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="el">
10639        Για την παραγωγή της αμυγδαλόπιτας, τα ξηρά συστατικά της αμυγδαλόπιτας
10640        διπλώνονται αργά σε κρεμώδες βούτυρο και ζάχαρη. Στη συνέχεια χτυπώνται
10641        τα αυγά. Η αμυγδαλόπιτα ψήνεται σε δίσκο στην κουζίνα, στον οποίο
10642        ρίχνεται απλό σιρόπι μετά τη παρασκευή της και αφήνεται να κρυώσει πριν
10643        κοπεί σε μεμονωμένα τετράγωνα κομμάτια. Η δομή της μπουγάτσας είναι
10644        φύλλο - γέμιση - φύλλο. Ως γέμιση συνήθως χρησιμοποιείται κρέμα (στην
10645        νότια Ελλάδα ονομάζεται μπουγάτσα μόνο αν περιέχει αυτή την γέμιση)
10646        ή τυρί, αν και συναντάται και σε άλλες Î
10646³ÎµÏÏƒÎµÎ¹Ï‚, όπως με κιμά, σπανάκι ή
10647        με κρέμα κακάο. Ο τρόπος κατασκευής και δομής αυτού του αρτοσκευάσματος
10648        την διαφοροποιεί από την κλασική πίτα και την καθιστά μοναδικό προϊόν με
10649        ξεχωριστά στοιχεία και γεύση σε σχέση με την πίτα, τα οποία έχουν
10650        αναγνωριστεί από έμπειρους σεφ και την επιστήμη του μάρκετινγκ, η
10651        τελευταία έχει διαφοροποιήσει τα προϊόντα πίτας και μπουγάτσας
10652        στα Σούπερ Μάρκετ. Στη Βόρεια Ελλάδα παραγγέλνεται συνήθως απλά σαν «μια
10653        με τυρί» ή «μια με κρέμα», μια και αποτελεί δημοφιλή πρόχειρη τροφή, και
10654        σερβίρεται κομμένη σε κομμάτια μεγέθους μπουκιάς (και, η γλυκιά,
10655        πασπαλισμένη με ζάχαρη άχνη ή/και κανέλλα).
10656      </div>
10657    </div>
10658  </div>
10659</div>
10660
10661  <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="vietnamese">
10662  <div data-component="axes-overview-group">
10663    <!-- L size sample -->
10664    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: &quot;900&quot;; --wdth: 125; --wdth-text: &quot;125&quot;">
10665      <div class="w-full vf-caption">
10666        <span class="pr-6">○ Vietnamese</span>
10667        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10668        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10669        <span class="pr-6">○ 0°</span>
10670        <span class="pr-6">○
10671          <span data-component="axes-overview__font-size-text"></span> px</span>
10672      </div>
10673      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l">
10674        Bánh được hấp trong những
10675      </div>
10676    </div>
10677
10678    <!-- M size sample -->
10679    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
10680      <div class="w-full vf-caption">
10681        <span class="pr-6">○ Vietnamese</span>
10682        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10683        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10684        <span class="pr-6">○ 0°</span>
10685        <span class="pr-6">○
10686          <span data-component="axes-overview__font-size-text"></span> px</span>
10687      </div>
10688      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m">
10689        Muốn làm kẹo ngon, khâu chọn nguyên liệu rất quan trọng<br><span class="italic-fonts">Thóc nếp dùng để nấu mạch nha phải</span>
10690      </div>
10691    </div>
10692
10693    <!-- S size sample -->
10694    <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;; --wdth: 50; --wdth-text: &quot;50&quot;">
10695      <div class="w-full vf-caption">
10696        <span class="pr-6">○ Vietnamese</span>
10697        <span class="pr-6">● <span data-component="axes-overview__wdth-text"></span> Wdth</span>
10698        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10699        <span class="pr-6">○ 0°</span>
10700        <span class="pr-6">○
10701          <span data-component="axes-overview__font-size-text"></span> px</span>
10702      </div>
10703
10704      <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesn’t seem to work correctly for multi-column text -->
10705      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="vi">
10706        Rượu nếp có nhiều loại, tùy thuộc vào loại gạo nếp và phương pháp sản
10707        xuất. Các loại rượu nếp phổ biến tại Việt Nam bao gồm: Rượu nếp cái hoa
10708        vàng, Rượu nếp cẩm, Rượu nếp than. Rượu nếp được làm theo quy trình khá
10709        công phu và chau chuốt: Gạo nếp sau khi được nấu chín, làm nguội thì
10710        được rắc bột bánh men và đem đi ủ. Trong quá trình ủ nấm mốc phát triển
10711        trên cơm gạo nếp và tự tạo ra một hệ enzim đường hóa, cũng chính quá
10712        trình này đã tạo cho khối gạo ủ lên men có hương thơm rất đặc trưng, hấp
10713        dẫn. Đặc biệt khâu cuối của quá trình là chưng cất rượu Nếp không sử
10714        dụng tháp cao cất cồn mà dùng thiết bị chưng cất rượu để thu rượu khoảng
10715        40-50 độ rượu. Loại bánh này khác biệt hẳn so với các loại trên ở điểm
10716        bánh không còn tơi xốp với nhiều bóng khí. Bánh này khá dai, có khi chai
10717        cứng trong một lớp vỏ nhẵn mịn. Khác biệt lớn nhất so với bánh truyền
10718        thống là phần bột bánh dạng lỏng được làm từ bột mì, bột nổi và trứng
10719        gà.
10720      </div>
10721    </div>
10722  </div>
10723</div>
10724
10725  <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="arabic">
10726  <div data-component="axes-overview-group">
10727    <!-- L size sample -->
10728    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-set-size="false" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" style="--wght: 900; --wght-text: &quot;900&quot;">
10729      <div class="w-full vf-caption">
10730        <span class="pr-6">○ Arabic</span>
10731        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10732        <span class="pr-6">○ 0°</span>
10733        <span class="pr-6">○
10734          <span data-component="axes-overview__font-size-text"></span> px</span>
10735      </div>
10736      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l" dir="rtl" lang="ar">
10737        الأعشاب والتوابل
10738      </div>
10739    </div>
10740
10741    <!-- M size sample -->
10742    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;">
10743      <div class="w-full vf-caption">
10744        <span class="pr-6">○ Arabic</span>
10745        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10746        <span class="pr-6">○ 0°</span>
10747        <span class="pr-6">○
10748          <span data-component="axes-overview__font-size-text"></span> px</span>
10749      </div>
10750      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" dir="rtl" lang="ar">
10751        ليالي لبنان، وتُسمّى أيضاً قشطلية. هي حلو من المطبخ
10752        <br>اشتهر المطبخ المصري بمذاقه المصري الخاص مع
10753      </div>
10754    </div>
10755
10756    <!-- S size sample -->
10757    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;">
10758      <div class="w-full vf-caption">
10759        <span class="pr-6">○ Arabic</span>
10760        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10761        <span class="pr-6">○ 0°</span>
10762        <span class="pr-6">○
10763          <span data-component="axes-overview__font-size-text"></span> px</span>
10764      </div>
10765
10766      <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesn’t seem to work correctly for multi-column text -->
10767      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" dir="rtl" lang="ar">
10768        شجرة المحلب وهي ذات أنواع: إما أن تكون مع الأرز (في مصر مع الأرز اسمه
10769        أرز باللبن) أو مع القشطة أو السميد أو البسكويت، وإما أن تكون عبارة عن
10770        حليب مطبوخ مع النشا حتى يتكثف المزيج ويصبح له قوام أغلظ ثم تصب في أطباق
10771        وتزين بالمكسرات أو القرفة. ويمكن أيضاً طبخها بحليب قليل الدسم. وتختلف
10772        تسمية المهلبية في الدول العربية حسب اللهجة العامية لكل بلد، وإن كانت
10773        تتشابه مع اسمها الأصلي، فبينما تسمى في مصر مهلبية، تسمى في سوريا محلاية،
10774        بينما تسمى في ليبيا محلبيه وفي الجزائر محلبي. الأعشاب والتوابل : النعناع
10775        والزعتر على نطاق واسع، واستخدامها اليوم شبه عالمي تقريبا؛ التوابل تستخدم
10776        بكمية أقل بكثير من المطبخ الهندي، لكن الكمية والنوع تتفاوت من منطقة إلى
10777        أخرى. بعض الأعشاب والتوابل تشمل السمسم والزعفران، والكركم، الثوم،
10778        الكمون، القرفة، والسماق. بالعاميه المصرية الغدا وهي أهم وجبة، وتكون في
10779        توقيت من الثالثة حتي الخامسة ظهراً، ويعتمد المطبخ المصري على المواسم،
10780        فلكل موسم أكل خاص به نتيجة توافر مكوناته بالأسواق في هذا الموسم على
10781        الرغم لأن هناك مكونات من موسم قد تكون متواجدة طول العام إلا أن معظم
10782        المصريين لا يحبذون طبخها إلا في موسمها.
10783      </div>
10784    </div>
10785  </div>
10786</div>
10787
10788  <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="devanagari">
10789  <div data-component="axes-overview-group">
10790    <!-- L size sample -->
10791    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: &quot;900&quot;">
10792      <div class="w-full vf-caption">
10793        <span class="pr-6">○ Devanagari</span>
10794        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10795        <span class="pr-6">○
10796          <span data-component="axes-overview__font-size-text"></span> px</span>
10797      </div>
10798      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l" lang="hi">
10799        चिक्की एक स्नैक अर्थात अल्पाहार की श्रेणी में
10800      </div>
10801    </div>
10802
10803    <!-- M size sample -->
10804    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 700; --wght-text: &quot;700&quot;">
10805      <div class="w-full vf-caption">
10806        <span class="pr-6">○ Devanagari / Loopless</span>
10807        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10808        <span class="pr-6">○
10809          <span data-component="axes-overview__font-size-text"></span> px</span>
10810      </div>
10811      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" lang="hi">
10812        <span class="">खीर एक प्रकार का मिष्टान्न है जिसे चावल को दूध में </span><span class="">गुलाब जामुन एक प्रकार का पकवान</span>
10813      </div>
10814    </div>
10815
10816    <!-- S size sample -->
10817    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 400; --wght-text: &quot;400&quot;">
10818      <div class="w-full vf-caption">
10819        <span class="pr-6">○ Devanagari</span>
10820        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10821        <span class="pr-6">○
10822          <span data-component="axes-overview__font-size-text"></span> px</span>
10823      </div>
10824
10825      <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesn’t seem to work correctly for multi-column text -->
10826      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="hi">
10827        वरक़ बनाने के लिए चांदी को पीट पीट कर एक चादर में ढाला जाता है और इसकी
10828        मोटाई मात्र कुछ माइक्रोमीटर ही रह जाती है। इसे सहेजने के लिए इसे कागज की
10829        परतों के बीच रखा जाता है और इसे उपयोग से पहले इन कागजों मे से निकाला
10830        जाता है। यह बहुत ही नाज़ुक होता है और छूने पर छोटे छोटे टुकड़ों में टूट
10831        जाता है।. एक लीटर छाछ में लगभग २०० ग्राम बाजरे का आटा मिलाकर आग पर
10832        चढावें और धीरे धीरे लकड़ी के चाटू से हिलाते रहें. जब यह गाढी हो जाए और
10833        उफनने लगे तब नीचे उतार कर स्वाद के अनुसार नमक मिलावें. यदि गाढी
10834        ज्य्य्यादा हो जाए तो इसमें ठंडा छाछ और मिलावें. यह राबडी प्राय शर्दी के
10835        मौसम में खाई जाती है। साम को गरम गरम खाई जाती है और सुबह इसमे ठंडी में
10836        दही मिलाकर बाजरे की रोटी के साथ खाया जाता है।. चांदी का वरक़ या
10837        सिर्फ वरक़ चांदी अथवा शयोजकमांसर्क से बना एक पतरा है और भारत और पड़ोसी
10838        देशों जैसे कि पाकिस्तान, नेपाल, बांग्लादेश आदि में इसका उपयोग मिठाईयों
10839        और व्यंजनों को सजाने के लिए किया जाता है। चांदी को खाया जा सकता है
10840        हालांकि, यह पूर्णतया स्वादविहीन होती है। चांदी तत्व का एक बड़ी मात्रा
10841        में सेवन अर्जीरिया का कारण बन सकता है, लेकिन वर्क में इसकी बहुत ही कम
10842        मात्रा होने के कारण इसे शरीर के लिए हानिकारक नहीं माना जाता।.
10843      </div>
10844    </div>
10845  </div>
10846</div>
10847
10848  <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="hebrew">
10849  <div data-component="axes-overview-group">
10850    <!-- L size sample -->
10851    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: &quot;900&quot;">
10852      <div class="w-full vf-caption">
10853        <span class="pr-6">○ Hebrew</span>
10854        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10855        <span class="pr-6">○ 0°</span>
10856        <span class="pr-6">○
10857          <span data-component="axes-overview__font-size-text"></span> px</span>
10858      </div>
10859      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l" dir="rtl" lang="he">
10860        ישנם מספר סיפורים אודות מקור
10861      </div>
10862    </div>
10863
10864    <!-- M size sample -->
10865    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;">
10866      <div class="w-full vf-caption">
10867        <span class="pr-6">○ Hebrew</span>
10868        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10869        <span class="pr-6">○ 0°</span>
10870        <span class="pr-6">○
10871          <span data-component="axes-overview__font-size-text"></span> px</span>
10872      </div>
10873      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" dir="rtl" lang="he">
10874        ישנם מספר סיפורים אודות מקור צורתו של
10875        <br>אוזן המן הוא מאפה, העשוי לרוב מבצק מתוק וממולא בפרג
10876      </div>
10877    </div>
10878
10879    <!-- S size sample -->
10880    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: &quot;500&quot;">
10881      <div class="w-full vf-caption">
10882        <span class="pr-6">○ Hebrew</span>
10883        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10884        <span class="pr-6">○ 0°</span>
10885        <span class="pr-6">○
10886          <span data-component="axes-overview__font-size-text"></span> px</span>
10887      </div>
10888
10889      <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesn’t seem to work correctly for multi-column text -->
10890      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" dir="rtl" lang="he">
10891        לכעך צורת טורוס והוא מבושל בסירופ על מנת שיקבל ציפוי קשה וכהה. ללחם
10892        גרסאות שונות ומלבד הגרסה הבסיסית, קיימות גם גרסאות עם תוספת בצל, שום,
10893        שומשום, פרג מלח או ביצה וכעך שבסיסו מקמח שיפון, חיטה מלאה או מחמצת.הביגל
10894        מוזכר לא מעט בתרבות המזרח אירופאית וקיימת מחלוקת רב שפתית על ההיסטוריה
10895        שלו. על פי הבלשן ליאו רוסטוב האזכור הראשון למילה ביגל הוא בעיר קרקוב
10896        במאה ה-16 כאשר הוא ניתן במתנה לנשים לאחר הלידה. בניגוד לרוסטוב, יש
10897        הטוענים שהכעך הומצא בגרמניה כנגזרת מהמילה בויגל שפירושה טבעת או צמיד.
10898        במהלך סוף המאה ה-19 ותחילת המאה ה-20 היגרו יהודים רבים אל צפון אמריקה
10899        והביאו את הכעך יחד איתם, וכך הפך הלחם לנדבך חשוב במטבח האמריקאי והקנדי.
10900        בשנת 1960, המציא דן תומפסון את המכונה הראשונה להכנת בייגל. ישנם מספר
10901        סיפורים אודות מקור צורתו של הבייגלה. לפי אגדה אחת, אופה שהורשע בגנבה
10902        קיבל אתההזדמנות לבטל את גזר הדין אם יוכל ליצור לחם שדרכו ניתן לראות את
10903        השמש שלוש פעמים; האופה לפי סיפור אחר, הצור מסמלת את מיקום הידיים של נזיר
10904      </div>
10905    </div>
10906  </div>
10907</div>
10908
10909  <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="korean">
10910  <div data-component="axes-overview-group">
10911    <!-- L size sample -->
10912    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: &quot;900&quot;">
10913      <div class="w-full vf-caption">
10914        <span class="pr-6">○ Korean</span>
10915        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10916        <span class="pr-6">○
10917          <span data-component="axes-overview__font-size-text"></span> px</span>
10918      </div>
10919      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l" lang="ko">
10920        달고나 또는 뽑기는 설탕에 베이킹소다를
10921      </div>
10922    </div>
10923
10924    <!-- M size sample -->
10925    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 700; --wght-text: &quot;700&quot;">
10926      <div class="w-full vf-caption">
10927        <span class="pr-6">○ Korean</span>
10928        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10929        <span class="pr-6">○
10930          <span data-component="axes-overview__font-size-text"></span> px</span>
10931      </div>
10932      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" lang="ko">
10933        <span class="">붕어빵은 길거리 노점상에서 파는 붕어 모양의 간식 풀빵이다.</span><span class="">현대 한국에서 즐겨먹는 고추장 떡볶이는 한국</span>
10934      </div>
10935    </div>
10936
10937    <!-- S size sample -->
10938    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 400; --wght-text: &quot;400&quot;">
10939      <div class="w-full vf-caption">
10940        <span class="pr-6">○ Korean</span>
10941        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10942        <span class="pr-6">○
10943          <span data-component="axes-overview__font-size-text"></span> px</span>
10944      </div>
10945
10946      <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesn’t seem to work correctly for multi-column text -->
10947      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="ko">
10948        현대의 고추장 떡볶이는 1953년에 마복림(1921~2011)이 광희문 밖 개천을
10949        복개한 서울 신당동 공터에서 길거리식당 음식으로 팔던 것에서부터
10950        시작되었다. 처음에는 연탄불 위에 고추장과 춘장을 섞은 양념으로 만들었다.
10951        이후 1970년대 MBC 표준FM의 "임국희의 여성살롱"이란 프로그램에서 신당동
10952        떡볶이골목이 소개되면서 전국적으로 퍼져 나가게 되었다. 초코파이는
10953        초콜릿과 마시멜로가 가득한 쿠키와 닮은 매우 유명한 한국 과자입니다.
10954        한국의 대부분의 전통 제빵점에서는 수제 초코파이를 판매하지만 상업용
10955        다양한 종류도 식료품 점에서 구입할 수 있습니다. 이름과는 달리 붕어가
10956        들어 있지 않은데, 단팥이 들어 있는 밀가루의 모양이 붕어를 닮았기 때문에
10957        그런 이름이 붙었다. 근래에는 많은 사람들이 좋아하는 단팥
10958        이외에 피자, 고구마, 슈크림 등 여러 가지 종류를 넣기도 한다. 처음엔
10959        한국의 추억의 설탕 과자인 달고나와 맛과 모양이 비슷해서 달고나 커피라는
10960        이름이 붙은 것이었지만 이후에는 점차 진짜 달고나를 넣은 커피도 나오기
10961        시작하면서 하나의 한국식 커피 메뉴로 자리잡았다.
10962        달고나 또는 뽑기는 설탕에 베이킹소다를 넣고 막대로 저어서
10963        만드는 한국의 사탕이다. 지역에 따라 여러 가지 이름으로 불린다. 상점에서
10964        파는 일반 과자보다 값이 싸고 맛이 달았기 때문에 1950년대 중후반에
10965        대한민국 어린이들이 즐겨 먹었던 간식이다. 지금도 그 유명세와 인기는
10966        여전하며 특히 21세기 초반에 들어서는 한동안 복고풍 유행에 힘입어
10967        서울 인사동 같은 도심지 거리에서도 종종 가판대를 볼 수 있고 옛 추억을
10968        그리는 어른들이 사먹기도 한다.
10969      </div>
10970    </div>
10971  </div>
10972</div>
10973
10974  <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="thai">
10975  <div data-component="axes-overview-group">
10976    <!-- L size sample -->
10977    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: &quot;900&quot;">
10978      <div class="w-full vf-caption">
10979        <span class="pr-6">○ Thai Looped</span>
10980        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10981        <span class="pr-6">○
10982          <span data-component="axes-overview__font-size-text"></span> px</span>
10983      </div>
10984      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l thai-looped-fonts" lang="th">
10985        ทองเอก คือขนมไทยที่มีส่วนผสมของแป้งสาลี น้ำตาล ไข่แดง
10986      </div>
10987    </div>
10988
10989    <!-- M size sample -->
10990    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 700; --wght-text: &quot;700&quot;">
10991      <div class="w-full vf-caption">
10992        <span class="pr-6">○ Thai Looped / Loopless</span>
10993        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
10994        <span class="pr-6">○
10995          <span data-component="axes-overview__font-size-text"></span> px</span>
10996      </div>
10997      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" lang="th">
10998        <span class="thai-looped-fonts">ขนมบ้าบิ่นน่าจะถือกำเนิดในยุครัตนโกสินทร์</span><span class="thai-loopless-fonts">เนื้อขนมมีลักษณะเป็นแป้งสีเหลืองเข้ม นุ่ม ฟู มีกลิ่นตาลหอมหวาน</span>
10999      </div>
11000    </div>
11001
11002    <!-- S size sample -->
11003    <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 400; --wght-text: &quot;400&quot;">
11004      <div class="w-full vf-caption">
11005        <span class="pr-6">○ Thai Looped</span>
11006        <span class="pr-6">● <span data-component="axes-overview__wght-text"></span> Wght</span>
11007        <span class="pr-6">○
11008          <span data-component="axes-overview__font-size-text"></span> px</span>
11009      </div>
11010
11011      <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesn’t seem to work correctly for multi-column text -->
11012      <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px] thai-looped-fonts" lang="th">
11013        ส่วนผสมทั่วไปของลอดช่องคือกะทิ แป้งปั้นเป็นรูปแท่งใส่สีเขียว
11014        โดยปกติมาจากใบเตย น้ำแข็งปั่นและน้ำตาลมะพร้าว ส่วนผสมเพิ่มอื่น ๆ
11015        ได้แก่ ถั่วแดง ข้าวเหนียว เฉาก๊วย ในซุนดา
11016        ลอดช่องสิงคโปร์เป็นขนมทำจากแป้งหรือสาคูปั้นเป็นแท่ง
11017        กินกับกะทิและน้ำเชื่อมจากน้ำตาลของต้นหมาก ไม่ใส่น้ำแข็ง
11018        ในภาษาชวา เจ็นดล หมายถึงส่วนที่เป็นแป้งสีเขียวเท่านั้น
11019        ถ้านำ เจ็นดล มารวมกับน้ำตาลมะพร้าวและกะทิ
11020        จะเรียก ดาเว็ต ดาเว็ตที่นิยมมากที่สุดคือ เอ็ซดาเว็ต ในชวากลาง ด้วยอิทธิพลจากสิงคโปร์และอาหารตะวันตก
11021        ทำให้มีลอดช่องรูปแบบแปลก ๆ เช่น กินกับไอศกรีมวานิลลาหรือทุเรียน
11022        ส่วนผสมของขนมส่วนใหญ่จะเป็นกะทิ และน้ำตาล แป้ง 3–4 ชนิด
11023        แล้วแต่สูตรและความชอบเนื้อขนมในแต่ละแบบ
11024        ซึ่งแป้งแต่ละอย่างก็จะมีคุณสมบัติทำให้ขนมมีเนื้อต่างกัน โดย
11025      </div>
11026    </div>
11027  </div>
11028</div>
11029
11030</section>
11031
11032  <!-- Reomve vh from this main div once enough content is in there -->
11033<div class="md:ml-[132px] px-4 mt-10 relative">
11034  <!-- Printmarks Beginning -->
11035  <!-- Top Left -->
11036  <img class="absolute top-[-60px] md:top-[-40px] left-0 scale-50 rotate-[270deg]" src="/trim-bm-white.dba23ed9.png">
11037  <!-- Top Middle -->
11038  <img class="absolute top-[-60px] md:top-[-40px] left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/trim-bm-white.dba23ed9.png">
11039  <!-- Top Right -->
11040  <img class="absolute top-[-60px] md:top-[-40px] right-0 scale-50 rotate-[90deg]" src="/trim-bm-white.dba23ed9.png">
11041  <!-- Printmarks Ending-->
11042
11043  <!-- one "row" on desktop -->
11044  <div class="grid-setup md:pb-10 overflow-x-hidden relative">
11045    <!-- Printmarks Beginning -->
11046    <!-- Bottom Left-->
11047    <img class="absolute bottom-0 md:bottom-[20px] left-0 scale-50 rotate-[270deg] ml-[-12px] md:ml-0" src="/trim-bm-white.dba23ed9.png">
11048    <!-- Bottom Middle -->
11049    <img class="absolute bottom-0 md:bottom-[20px] left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/cross-white.3b2d01de.png">
11050    <!-- Bottom Right -->
11051    <img class="absolute bottom-0 md:bottom-[20px] right-0 scale-50 rotate-[90deg] mr-[-12px] md:mr-0" src="/trim-bm-white.dba23ed9.png">
11052    <!-- Printmarks Ending-->
11053
11054    <!-- Left Column  -->
11055    <div class="col-span-4 md:col-span-7 flex flex-col">
11056      <!-- Type Stack Item-->
11057      <div class="w-full mb-8 cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11058        <div data-component="axes-overview__sample" class="text-white overflow-hidden md:overflow-visible">
11059          <span class="">swiss
11060            <img src="/swiss-american-airlines-logo.bc6a3507.svg" class="inline h-[0.8em] -mt-[0.2em] -ml-[0.2em]"></span>
11061          <span class="block leading-none -mt-[0.5em]">american</span>
11062        </div>
11063      </div>
11064
11065      <div class="flex w-full">
11066        <img src="/3-airline-tickets-1.de5f954a.gif" class="w-full md:w-[70%] mb-8 md:mb-0">
11067      </div>
11068    </div>
11069
11070    <!-- SECNOD COLUMN -->
11071    <div class="col-span-4 md:col-span-5 flex flex-col">
11072      <div class="hidden md:flex pb-8">
11073        <img src="/thai-bird.52032a1d.gif" class="w-full">
11074      </div>
11075      <div class="grid-setup flex-row pb-8" data-component="axes-overview-group">
11076        <!-- Type Stack -->
11077        <!--  -->
11078        <!-- Type Stack Item-->
11079        <div class="hidden md:flex col-span-4 md:col-span-5 cursor-ns-resize">
11080          <div class="w-full" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11081            <div class="caps mono-fonts text-xs">
11082              <span class="pr-6">○ Korean</span><span class="pr-6">●
11083                <span data-component="axes-overview__wght-text"></span>
11084                Wght</span>
11085            </div>
11086            <div data-component="axes-overview__sample" class="vertical-korean-text w-full">
11087              한강
11088            </div>
11089          </div>
11090        </div>
11091        <div class="col-span-4 md:col-span-7 overflow-hidden">
11092          <lottie-player data-component="lottie-player" class="md:flex md:scale-[1.22]" data-src="product-playingcard.json"></lottie-player>
11093        </div>
11094      </div>
11095      <div class="pb-8 md:pb-10 cursor-ns-resize" data-component="axes-overview-group">
11096        <!-- Type Stack -->
11097        <!-- Type Stack Item-->
11098        <div class="w-full" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11099          <div class="caps mono-fonts text-xs">
11100            <span class="pr-6">○ Arabic</span><span class="pr-6">●
11101              <span data-component="axes-overview__wght-text"></span>
11102              Wght</span>
11103          </div>
11104          <div data-component="axes-overview__sample" class="w-full leading-[1.3] pb-5 overflow-hidden" lang="ar" dir="rtl">
11105            يرجع إنشاء محطة التاسع<br>
11106            إلى أواسط مصر عشر عام
11107          </div>
11108        </div>
11109        <!-- Type Stack Item-->
11110        <div class="w-full overflow-hidden" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11111          <div class="caps mono-fonts text-xs">
11112            <span class="pr-6">○ Devanagari</span><span class="pr-6">●
11113              <span data-component="axes-overview__wght-text"></span>
11114              Wght</span>
11115          </div>
11116          <div data-component="axes-overview__sample" class="w-full leading-[1.3] pt-2 pb-5" lang="hi">
11117            छत्रपति शिवाजी महाराज अंतर्राष्ट्रीय<br>
11118            विमानक्षेत्र सांता क्रूज़, मुंबई में स्थित<br>
11119            है। इसका ICAO कोड है VABB और<br>
11120          </div>
11121        </div>
11122        <!-- Type Stack Item-->
11123        <div class="w-full hidden md:block" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11124          <div class="caps mono-fonts text-xs">
11125            <span class="pr-6">○ Hebrew</span><span class="pr-6">●
11126              <span data-component="axes-overview__wght-text"></span>
11127              Wght</span>
11128          </div>
11129          <div data-component="axes-overview__sample" class="w-full overflow-hidden pt-4" lang="he" dir="rtl">
11130            הקו האדום הוא קו רכבת קלה המרכזי והראשון שיצא לפועל כחלק<br>מהדנקל
11131            - הרכבת הקלה בגוש דן. הוא עובר בין הערים בת ים, תל אביב-יפו
11132          </div>
11133        </div>
11134      </div>
11135    </div>
11136  </div>
11137
11138  <!-- one "row" on desktop -->
11139  <div class="grid-setup pb-8 md:pb-10 relative">
11140    <!-- Printmarks Beginning -->
11141    <!-- Bottom Left-->
11142    <img class="hidden md:inline absolute bottom-0 md:bottom-[30px] left-0 scale-50 rotate-[270deg] ml-[-12px]" src="/trim-bm-white.dba23ed9.png">
11143    <!-- Bottom Middle -->
11144    <img class="hidden md:inline absolute bottom-0 md:bottom-[30px] left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/cross-white.3b2d01de.png">
11145    <!-- Bottom Right -->
11146    <img class="hidden md:inline absolute bottom-0 md:bottom-[30px] right-0 scale-50 rotate-[90deg] mr-[-12px]" src="/trim-bm-white.dba23ed9.png">
11147    <!-- Printmarks Ending-->
11148
11149    <!-- 1st Column Single Vertical Lottie Animation -->
11150    <div class="col-span-4 md:col-span-4 overflow-hidden md:overflow-visible flex items-center justify-center pb-6 md:pb-0">
11151      <lottie-player data-component="lottie-player" class="scale-[1.35] md:scale-[1.2] translate-x-[17.5%] md:translate-x-[10%] -translate-y-[17.5%] md:translate-y-0 pt-[17.5%] md:pt-0" data-src="character-tadagirl.json"></lottie-player>
11152    </div>
11153
11154    <!-- 2nd Column Type Stack -->
11155    <div class="col-span-4 md:col-span-4 grid-setup relative" data-component="axes-overview-group">
11156      <!-- Printmarks Beginning -->
11157      <!-- Bottom Left-->
11158      <img class="md:hidden absolute bottom-[-20px] left-0 scale-50 rotate-[270deg] ml-[-12px]" src="/trim-bm-white.dba23ed9.png">
11159      <!-- Bottom Middle -->
11160      <img class="md:hidden absolute bottom-[-20px] left-[50%] right-[50%] scale-50 ml-[-24px]" src="/cross-white.3b2d01de.png">
11161      <!-- Bottom Right -->
11162      <img class="md:hidden absolute bottom-[-20px] right-0 scale-50 rotate-[90deg] mr-[-12px]" src="/trim-bm-white.dba23ed9.png">
11163      <!-- Printmarks Ending-->
11164
11165      <!-- Type Stack -->
11166      <div class="col-span-4 md:col-span-12 cursor-ns-resize pb-8 md:pb-0">
11167        <!-- Type Stack Item (Headline auto-size, body manual sizing)-->
11168        <div class="w-full" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11169          <div class="caps mono-fonts text-xs">
11170            <span class="pr-6">○ Mono Cyrillic</span><span class="pr-6">●
11171              <span data-component="axes-overview__wght-text"></span>
11172              Wght</span>
11173          </div>
11174          <div data-component="axes-overview__sample" class="w-full md:w-3/4 mono-fonts caps text-2xl">
11175            Блгарск
11176          </div>
11177        </div>
11178        <div class="w-full" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11179          <div data-component="axes-overview__sample" class="w-full md:w-3/4 text-md mono-fonts hyphens-auto" lang="uk">
11180            Міжнародний аеропорт Бори́спіль (IATA: KBP, ICAO: UKBB) основний і
11181            найбільший пасажирський міжнародний аеропорт України та її столиці,
11182            який обслуговує Київ
11183          </div>
11184        </div>
11185        <!-- Type Stack Item (Headline auto-size, body manual sizing)-->
11186        <div class="w-full pt-6" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11187          <div class="caps mono-fonts text-xs">
11188            <span class="pr-6">○ Mono Latin</span><span class="pr-6">●
11189              <span data-component="axes-overview__wght-text"></span>
11190              Wght</span>
11191          </div>
11192          <div data-component="axes-overview__sample" class="w-full md:w-3/4 mono-fonts caps text-2xl">
11193            Latin
11194          </div>
11195        </div>
11196        <div class="w-full" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11197          <div data-component="axes-overview__sample" class="w-full md:w-3/4 text-md mono-fonts hyphens-auto" lang="vi">
11198            Sân bay quốc tế Tân Sơn Nhất (IATA: SGN, ICAO: VVTS) là sân bay quốc
11199            tế lớn nhất Việt Nam. Sân bay quốc tế Tân Sơn Nhất với diện tích
11200            850ha là sân bay lớn
11201          </div>
11202        </div>
11203        <!-- Type Stack Item (Headline auto-size, body manual sizing)-->
11204        <div class="w-full pt-6" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11205          <div class="caps mono-fonts text-xs">
11206            <span class="pr-6">○ Mono Greek</span><span class="pr-6">●
11207              <span data-component="axes-overview__wght-text"></span>
11208              Wght</span>
11209          </div>
11210          <div data-component="axes-overview__sample" class="w-full md:w-3/4 mono-fonts caps text-2xl">
11211            ελληνικ
11212          </div>
11213        </div>
11214        <div class="w-full" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11215          <div data-component="axes-overview__sample" class="w-full md:w-3/4 text-md mono-fonts hyphens-auto" lang="el">
11216            Ο Διεθνής Αερολιμένας Αθηνών Ελευθέριος Βενιζέλος (IATA: ATH, ICAO:
11217            LGAV, ΥΠΑ: ΔΑΑ) εξυπηρετεί την Αθήνα και γενικά την Αττική. Ξεκίνησε
11218            τη λειτουργία του στις
11219          </div>
11220        </div>
11221      </div>
11222    </div>
11223
11224    <!-- 3rd Column Images -->
11225    <div class="col-span-4 md:col-span-4 hidden md:flex flex-col">
11226      <div class="w-full pb-8 flex justify-center">
11227        <img src="/gallery-3-american-swissair-badge.f154dfe7.svg" class="w-full md:w-3/4">
11228      </div>
11229      <div class="flex md:pb-8">
11230        <img src="/gallery-3-SA-passenger-ticket-and-baggage.3a9da055.gif" class="w-full">
11231      </div>
11232    </div>
11233  </div>
11234
11235  <!-- One "row" of items on Desktop -->
11236  <div class="grid-setup flex-row pb-8 relative">
11237    <!-- Printmarks Beginning -->
11238    <!-- Bottom Left-->
11239    <img class="absolute bottom-0 md:bottom-0 left-0 scale-50 rotate-[270deg] ml-[-12px]" src="/trim-bm-white.dba23ed9.png">
11240    <!-- Bottom Middle -->
11241    <img class="absolute bottom-0 md:bottom-0 left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/cross-white.3b2d01de.png">
11242    <!-- Bottom Right -->
11243    <img class="absolute bottom-0 md:bottom-0 right-0 scale-50 rotate-[90deg] mr-[-12px]" src="/trim-bm-white.dba23ed9.png">
11244    <!-- Printmarks Ending-->
11245
11246    <!-- CJK Setting -->
11247    <div class="col-span-4 md:col-span-5 hidden md:flex flex-col" data-component="axes-overview-group">
11248      <div class="flex md:grid-setup">
11249        <!-- Japanese -->
11250        <div class="w-2/5 md:w-auto md:col-span-4 cursor-ns-resize">
11251          <!-- Type Stack Item-->
11252          <div class="w-full" data-component="axes-overview" data-set-size="true" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;">
11253            <div class="caps mono-fonts text-xs">
11254              <span class="pr-6">○ Japanese Matching<br>&nbsp;&nbsp;AXIS Font by Type
11255                Project</span><br><span class="pr-6">●
11256                <span data-component="axes-overview__wght-text"></span>
11257                Wght</span>
11258            </div>
11259            <div data-component="axes-overview__sample" class="w-full flex flex-col text-center japanese-fonts">
11260              <div class="text-[9vw] leading-[10vw] japanese-fonts">あ</div>
11261              <div class="text-[4.5vw] leading-[5vw] japanese-fonts">カナ</div>
11262              <div class="text-[2.25vw] leading-[2.75vw] japanese-fonts">
11263                漢字書体
11264              </div>
11265            </div>
11266          </div>
11267        </div>
11268        <!-- Korean -->
11269        <div class="hidden md:flex md:col-span-4 cursor-ns-resize">
11270          <!-- Type Stack Item-->
11271          <div class="w-full" data-component="axes-overview" data-set-size="true" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;">
11272            <div class="caps mono-fonts text-xs">
11273              <span class="pr-6">○ GT America Korean</span><br><br><span class="pr-6">●
11274                <span data-component="axes-overview__wght-text"></span>
11275                Wght</span>
11276            </div>
11277            <div data-component="axes-overview__sample" class="w-full flex flex-col text-center">
11278              <div class="text-[9vw] leading-[10vw]">가</div>
11279              <div class="text-[4.5vw] leading-[5vw]">대한</div>
11280              <div class="text-[2.25vw] leading-[2.75vw]">사람으로</div>
11281            </div>
11282          </div>
11283        </div>
11284        <!-- Simplified Chinese -->
11285        <div class="w-2/5 md:w-auto md:col-span-4 cursor-ns-resize">
11286          <!-- Type Stack Item-->
11287          <div class="w-full" data-component="axes-overview" data-set-size="true" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;">
11288            <div class="caps mono-fonts text-xs">
11289              <span class="pr-6">○ Traditional Chinese Matching<br>&nbsp;&nbsp;AR UDJingXi
11290                HeiE1</span><br><span class="pr-6">●
11291                <span data-component="axes-overview__wght-text"></span>
11292                Wght</span>
11293            </div>
11294            <div data-component="axes-overview__sample" class="w-full flex flex-col text-center">
11295              <div class="text-[9vw] leading-[10vw] tradchinese-fonts">中</div>
11296              <div class="text-[4.5vw] leading-[5vw] simpchinese-fonts">
11297                简体
11298              </div>
11299              <div class="text-[2.25vw] leading-[2.75vw] tradchinese-fonts">
11300                繁體字型
11301              </div>
11302            </div>
11303          </div>
11304        </div>
11305      </div>
11306      <div class="flex flex-col pt-8">
11307        <!-- Type Stack Item Thai Loopless -->
11308        <div class="w-full overflow-hidden" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11309          <div class="caps mono-fonts text-xs">
11310            <span class="pr-6">○ Thai Loopless</span><span class="pr-6">●
11311              <span data-component="axes-overview__wght-text"></span>
11312              Wght</span>
11313          </div>
11314          <div data-component="axes-overview__sample" class="w-full pt-2 pb-5 thai-loopless-fonts leading-[1.1] -mt-[1.2em]" lang="th">
11315            สุวรรณภูมิ
11316          </div>
11317        </div>
11318        <!-- Type Stack Item Hebrew -->
11319        <div class="w-full overflow-hidden pt-8 md:mb-11" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: &quot;400&quot;; --wdth: 100; --wdth-text: &quot;100&quot;">
11320          <div class="caps mono-fonts text-xs">
11321            <span class="pr-6">○ Hebrew</span><span class="pr-6">●
11322              <span data-component="axes-overview__wght-text"></span>
11323              Wght</span>
11324          </div>
11325          <div data-component="axes-overview__sample" class="w-full pt-2 pb-5 leading-[0.8]" dir="rtl" lang="he">
11326            שינוי באחוזים<br>
11327            בסך הנוסעים
11328          </div>
11329        </div>
11330      </div>
11331    </div>
11332
11333    <div class="col-span-4 md:col-span-7">
11334      <div class="flex w-full md:justify-end">
11335        <img src="/3-airline-assorted-items-1.9d95b41b.gif" class="w-full md:w-[80%] mb-6 md:mb-0">
11336        <!-- <img
11337          src="images/galleries/3-airsickness-1.png"
11338          class="flex w-[23vw] md:w-[20vw] mt-[9.5vw] -mr-[13vw]"
11339        />
11340        <img
11341          src="images/galleries/3-airsickness-2.png"
11342          class="flex w-[23vw] md:w-[20vw] absolute -mt-[4.75vw] -mr-[13vw]"
11343        />
11344        <img
11345          src="images/galleries/3-airsickness-3.png"
11346          class="flex w-[23vw] md:w-[20vw] absolute -mt-[9vw] -mr-[0vw]"
11347        /> -->
11348        <!-- <img
11349          src="images/galleries/3-airsickness-3.png"
11350          class="flex w-[23vw] md:w-[20vw] absolute right-0"
11351        />
11352        <img
11353          src="images/galleries/3-airsickness-2.png"
11354          class="flex w-[23vw] md:w-[20vw] absolute right-[13vw] top-[4.75vw]"
11355        />
11356        <img
11357          src="images/galleries/3-airsickness-1.png"
11358          class="flex w-[23vw] md:w-[20vw] absolute right-[26vw] top-[9.5vw]"
11359        /> -->
11360      </div>
11361    </div>
11362  </div>
11363
11364  <!-- One "row" of items on Desktop -->
11365  <div class="flex flex-col md:flex-row pb-8 relative">
11366    <!-- Printmarks Beginning -->
11367    <!-- Bottom Left-->
11368    <img class="absolute bottom-0 md:bottom-0 left-0 scale-50 rotate-[270deg] ml-[-12px]" src="/trim-bm-white.dba23ed9.png">
11369    <!-- Bottom Middle -->
11370    <img class="absolute bottom-0 md:bottom-0 left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/cross-white.3b2d01de.png">
11371    <!-- Bottom Right -->
11372    <img class="absolute bottom-0 md:bottom-0 right-0 scale-50 rotate-[90deg] mr-[-12px]" src="/trim-bm-white.dba23ed9.png">
11373    <!-- Printmarks Ending-->
11374
11375    <div class="md:hidden md:pr-5">
11376      <div class="vf-caption pb-5">GT America Thai</div>
11377      <img class="pb-6" src="/3-airline-thai-earplugs.237035bf.png">
11378    </div>
11379    <div class="md:pr-5">
11380      <div class="vf-caption pb-5">GT America Latin</div>
11381      <img class="pb-6" src="/3-airline-baggage-tag.6a8b6e20.png">
11382    </div>
11383    <div class="hidden md:inline-block md:pr-5">
11384      <div class="vf-caption pb-5">GT America Arabic</div>
11385      <img class="pb-6" src="/3-airline-idaho-tag.966158ba.png">
11386    </div>
11387    <div>
11388      <div class="vf-caption pb-5">GT America Greek</div>
11389      <img class="pb-6" src="/3-airline-nyc-tag.dac28f05.png">
11390    </div>
11391  </div>
11392</div>
11393
11394
11395<!-- <include
11396  src="source/html-includes/languages/languages-gallery-products-1.html"
11397></include>
11398
11399<include
11400  src="source/html-includes/languages/languages-gallery-american-candy.html"
11401></include>
11402
11403<include src="source/html-includes/languages/languages-gallery-scripts.html"></include>
11404
11405<include
11406  src="source/html-includes/languages/languages-gallery-products-2.html"
11407></include> -->
11408
11409</section>
11410
11411
11412    <!--DESIGN SECTION-->
11413    <section data-nav-section="design" data-nav-colour-switcher-colour="blue" data-nav-colour-switcher-colour-hover="red" class="bg-white text-red">
11414  <section class="flex">
11415    <!-- Full Width Content Area -->
11416    <div data-component="section-scene" data-autoplay-until="0.825" data-start-scroll-offset="0.55" data-end-scroll-offset="-0.7" data-src="/models/fireworks/fireworks-v006/fireworks-v006.gltf" data-src-mobile="/models/fireworks/fireworks-mobile-v006/fireworks-mobile-v006.gltf" class="flex self-center w-full h-[100vh] md:h-[90vh]"></div>
11417  </section>
11418
11419  <section class="md:ml-[132px] px-4 mb-9 flex">
11420    <!-- Partial Width Content Area -->
11421    <div class="md:ml-[170px] md:mr-4 grid-setup">
11422      <h2 class="col-span-full text-2xl md:text-3xl pb-5 md:pb-4">
11423        Design Union
11424      </h2>
11425      <p class="col-span-4 md:col-span-10 text-md md:text-xl">
11426        GT America Intl synthesizes the Gothic model’s strong character with the
11427        functional purity that Grotesks have to offer. Noël Leu developed the
11428        typeface over a ten year span, using a Swiss Style-lens to refine the
11429        design details. We and our partners then expanded the supported writing
11430        systems in the eight years since its original release.
11431      </p>
11432    </div>
11433  </section>
11434
11435  <section class="md:ml-[132px] md:px-4 mb-11 flex flex-col md:flex-row">
11436    <!-- Section Nav Area -->
11437<div class="hidden md:block ml-4 w-full md:w-[120px] md:h-1/2 text-xs md:sticky" data-component="sticky-subnav">
11438  <div class="flex flex-col justify-center h-full">
11439    <h3 class="text-lg">Design Features</h3>
11440    <div class="flex flex-col items-start pt-7">
11441      <button data-component="subnav-jump-to" data-subnav-jump-to-target="widthandweight" class="hover:text-blue nav-section-indicator-active pt-2">
11442        <span></span> Width & Weight
11443      </button>
11444      <button data-component="subnav-jump-to" data-subnav-jump-to-target="strokeflow" class="hover:text-blue pt-2">
11445        <span></span> Stroke Flow
11446      </button>
11447      <button data-component="subnav-jump-to" data-subnav-jump-to-target="adjustments" class="hover:text-blue pt-2">
11448        <span></span> Adjustments
11449      </button>
11450      <button data-component="subnav-jump-to" data-subnav-jump-to-target="details" class="hover:text-blue pt-2">
11451        <span></span> Details
11452      </button>
11453    </div>
11454  </div>
11455</div>
11456
11457    <!-- Main Content Area -->
11458    <div class="md:ml-[48px] md:mr-4 w-full text-s overflow-hidden">
11459      <div class="pb-9 px-4 md:px-0" data-subnav-jump-to="widthandweight">
11460  <!-- <div class="w-full border-b pb-2">Width & Weight</div> -->
11461  <div class="grid-setup border-t pt-2">
11462    <div class="col-span-3 md:col-span-4">
11463      <!-- <div class="text-blue">Weight Development</div> -->
11464      <div class="w-full flex flex-grow justify-center">
11465        <lottie-player data-component="lottie-player" class="" data-src="weight-latin-s-006.json"></lottie-player>
11466      </div>
11467    </div>
11468
11469    <div class="col-span-1 md:col-span-2">
11470      <div class="w-full flex md:h-full flex-grow justify-center align-top md:align-middle">
11471        <lottie-player data-component="lottie-player" class="scale-[2] pt-4 md:pt-0" data-src="character-sombrero-roundelbows.json"></lottie-player>
11472      </div>
11473    </div>
11474
11475    <div class="col-span-4 md:col-span-6">
11476      <!-- Container for 6 divs that are each 1/3 of available space -->
11477      <div class="grid-setup">
11478        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11479          <div class="text-blue vf-caption">Greek</div>
11480          <div class="w-full flex flex-grow justify-center">
11481            <lottie-player data-component="lottie-player" class="" data-src="weight-greek-sigma-001.json"></lottie-player>
11482          </div>
11483        </div>
11484
11485        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11486          <div class="text-blue vf-caption">Thai</div>
11487          <div class="w-full flex flex-grow justify-center">
11488            <lottie-player data-component="lottie-player" class="" data-src="weight-thai-thothong-005.json"></lottie-player>
11489          </div>
11490        </div>
11491
11492        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11493          <div class="text-blue vf-caption">&nbsp;</div>
11494          <div class="w-full flex flex-grow justify-center">
11495            <lottie-player data-component="lottie-player" class="" data-src="character-milkshake.json"></lottie-player>
11496          </div>
11497        </div>
11498
11499        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11500          <div class="text-blue vf-caption">Arabic</div>
11501          <div class="w-full flex flex-grow justify-center">
11502            <lottie-player data-component="lottie-player" class="" data-src="weight-arabic-ain-004.json"></lottie-player>
11503          </div>
11504        </div>
11505
11506        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11507          <div class="text-blue vf-caption">Devanagari</div>
11508          <div class="w-full flex flex-grow justify-center">
11509            <lottie-player data-component="lottie-player" class="" data-src="weight-devanagari-dddha-002.json"></lottie-player>
11510          </div>
11511        </div>
11512
11513        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11514          <div class="text-blue vf-caption">Cyrillic</div>
11515          <div class="w-full flex flex-grow justify-center">
11516            <lottie-player data-component="lottie-player" class="" data-src="weight-cyr-backwardsye-001.json"></lottie-player>
11517          </div>
11518        </div>
11519      </div>
11520    </div>
11521  </div>
11522  <div class="grid-setup">
11523    <div class="col-span-4 md:col-span-4 text-blue text-s mt-4 pt-6">
11524      <p class="md:w-3/4">
11525        </p><h4 class="pb-4">Weight Development</h4>
11526        The stroke adjusts dynamically in both weight and width to optimize
11527        legibility and expression: the bolder the weight the steeper the
11528        terminals’ angle. This helps to keep the apertures open and the stroke
11529        flow intact. The narrow width’s angular terminals infuse a lot of
11530        character as well.
11531      <p></p>
11532    </div>
11533
11534    <div class="md:col-start-5 col-span-2 md:col-span-4 mt-4 pt-2">
11535      <div class="w-full flex flex-grow justify-center align-middle">
11536        <lottie-player data-component="lottie-player" class="" data-src="weight-latin-uppercase-s-001.json"></lottie-player>
11537      </div>
11538    </div>
11539
11540    <div class="col-span-2 md:col-span-4 mt-4 pt-2">
11541      <div class="w-full flex flex-grow justify-center align-middle">
11542        <lottie-player data-component="lottie-player" class="" data-src="weight-latin-uppercase-s-nohandles-001.json"></lottie-player>
11543      </div>
11544    </div>
11545  </div>
11546</div>
11547
11548
11549      <div class="pb-9" data-subnav-jump-to="strokeflow">
11550  <div class="grid-setup px-4 md:px-0 border-t pt-2">
11551    <div class="col-span-4 md:col-span-6">
11552      <!-- <div class="text-blue">Stroke Flow</div> -->
11553      <div class="w-full flex flex-grow justify-center align-middle">
11554        <lottie-player data-component="lottie-player" class="" data-src="character-magician-mirrored.json"></lottie-player>
11555      </div>
11556    </div>
11557
11558    <div class="col-span-4 md:col-span-6">
11559      <!-- Container for two rows, with two columns at top and 3 columns and 2 rows at bottom -->
11560      <div class="grid-setup">
11561        <div class="col-span-4 md:col-span-6 pt-2 pb-6">
11562          <div class="text-blue vf-caption">Latin</div>
11563          <div class="w-full flex flex-grow justify-center">
11564            <lottie-player data-component="lottie-player" class="" data-src="flow-latin-g-001.json"></lottie-player>
11565          </div>
11566        </div>
11567        <div class="col-span-4 md:col-span-6 pb-6">
11568          <div class="text-blue">
11569            <h4 class="pb-4">Stroke Flow</h4>
11570            <p>
11571              The American Gothic model closely follows the logic of the
11572              calligraphic pen stroke. This is particularly visible in the
11573              double-story g that uses bold sweeping curves for both the ear on
11574              top and the curved descender portion of the letter. This same
11575              calligraphic gesture is also visible in the other scripts.
11576            </p>
11577          </div>
11578        </div>
11579      </div>
11580      <div class="grid-setup pt-2">
11581        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11582          <div class="text-blue vf-caption">Cyrillic</div>
11583          <div class="w-full flex flex-grow justify-center">
11584            <lottie-player data-component="lottie-player" class="" data-src="flow-cyr-be-002.json"></lottie-player>
11585          </div>
11586        </div>
11587
11588        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11589          <div class="text-blue vf-caption">Hebrew</div>
11590          <div class="w-full flex flex-grow justify-center">
11591            <lottie-player data-component="lottie-player" class="" data-src="flow-hebrew-tsadi-001.json"></lottie-player>
11592          </div>
11593        </div>
11594
11595        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11596          <div class="text-blue vf-caption">Devanagari</div>
11597          <div class="w-full flex flex-grow justify-center">
11598            <lottie-player data-component="lottie-player" class="" data-src="flow-devanagari-one-001.json"></lottie-player>
11599          </div>
11600        </div>
11601
11602        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11603          <div class="text-blue vf-caption">Thai</div>
11604          <div class="w-full flex flex-grow justify-center">
11605            <lottie-player data-component="lottie-player" class="" data-src="flow-thai-sosola-001.json"></lottie-player>
11606          </div>
11607        </div>
11608
11609        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11610          <div class="text-blue vf-caption">Korean</div>
11611          <div class="w-full flex flex-grow justify-center">
11612            <lottie-player data-component="lottie-player" class="" data-src="flow-korean-jieut-001.json"></lottie-player>
11613          </div>
11614        </div>
11615
11616        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11617          <div class="text-blue vf-caption">Arabic</div>
11618          <div class="w-full flex flex-grow justify-center">
11619            <lottie-player data-component="lottie-player" class="" data-src="flow-arabic-dal-001.json"></lottie-player>
11620          </div>
11621        </div>
11622      </div>
11623    </div>
11624  </div>
11625
11626  <div class="grid-setup px-4 md:px-0">
11627    <!-- Left Half of Layout -->
11628    <div class="col-span-4 md:col-span-6 border-t pt-2">
11629      <div class="grid-setup">
11630        <div class="col-span-4 md:col-span-6">
11631          <div class="text-blue vf-caption pt-2">Latin</div>
11632          <div class="w-full flex flex-grow justify-center">
11633            <lottie-player data-component="lottie-player" class="" data-src="flow-latin-two-001.json"></lottie-player>
11634          </div>
11635        </div>
11636        <div class="col-span-4 md:col-span-6">
11637          <div class="col-span-2 md:col-span-6">
11638            <div class="text-blue pb-4">Inward Curving</div>
11639            <div class="text-blue pb-6">
11640              Characters across different scripts sport an inward curled
11641              movement in reference to calligraphic pen strokes.
11642            </div>
11643          </div>
11644          <div class="col-span-2 md:col-span-6 grid-system mb-6 md:mb-0">
11645            <div class="col-span-4 md:col-span-12">
11646              <div class="text-blue vf-caption mb-5">Devanagari</div>
11647              <lottie-player data-component="lottie-player" class="" data-src="flow-devanagari-tha-001.json"></lottie-player>
11648            </div>
11649          </div>
11650        </div>
11651      </div>
11652    </div>
11653    <!-- Right Half of Layout -->
11654    <div class="col-span-4 md:col-span-6 border-t pt-2">
11655      <div class="flex grid-setup">
11656        <div class="col-span-4 md:col-span-6">
11657          <div class="text-blue vf-caption pt-2">Latin</div>
11658          <div class="w-full flex flex-grow justify-center">
11659            <lottie-player data-component="lottie-player" class="" data-src="flow-latin-eight-002.json"></lottie-player>
11660          </div>
11661        </div>
11662        <div class="col-span-4 md:col-span-6">
11663          <div class="col-span-1 md:col-6">
11664            <div class="text-blue pb-4">Interrupted Connection</div>
11665            <div class="text-blue pb-6">
11666              GT Americas numerals have an interrupted connection,
11667              characteristic of the Gothic model. This further accentuates its
11668              design construction derived from calligraphic pen strokes. This is
11669              also visible in Arabic and Devanagari.
11670            </div>
11671          </div>
11672          <div class="flex col-span-1 md:col-span-6 grid-system">
11673            <div class="col-span-2 md:col-span-3">
11674              <div class="text-blue vf-caption">Arabic</div>
11675              <lottie-player data-component="lottie-player" class="" data-src="flow-arabic-waw-002.json"></lottie-player>
11676            </div>
11677            <div class="col-span-2 md:col-span-3">
11678              <div class="text-blue vf-caption">Devanagari</div>
11679              <lottie-player data-component="lottie-player" class="" data-src="flow-devanagari-four-001.json"></lottie-player>
11680            </div>
11681          </div>
11682        </div>
11683      </div>
11684    </div>
11685  </div>
11686</div>
11687
11688
11689      <div class="pb-9 px-4 md:px-0" data-subnav-jump-to="adjustments">
11690  <!-- <div class="w-full border-b pb-2">Width & Weight</div> -->
11691  <div class="grid-setup border-t pb-6">
11692    <div class="col-span-4 md:col-span-4 pt-2">
11693      <!-- <div class="text-blue">Visual Adjustments</div> -->
11694      <div class="w-full flex flex-grow justify-center pt-4">
11695        <lottie-player data-component="lottie-player" class="" data-src="c
11695ontrast-latin-m-002.json"></lottie-player>
11696      </div>
11697    </div>
11698
11699    <div class="col-span-4 md:col-span-2 pt-2">
11700      <div class="w-full flex md:h-full flex-grow align-top md:align-middle flex-col">
11701        <h4 class="pt-2 pb-4 text-blue">Inktraps</h4>
11702        <p class="text-blue">
11703          Inktraps are subtle in the lighter weights and become more accentuated
11704          the bolder the weight. This offsets dark spots and improves color and
11705          texture for body copy text.
11706        </p>
11707        <lottie-player data-component="lottie-player" class="" data-src="character-burrito.json"></lottie-player>
11708      </div>
11709    </div>
11710
11711    <div class="col-span-4 md:col-span-6 pt-2">
11712      <!-- Container for 6 divs that are each 1/3 of available space -->
11713      <div class="grid-setup">
11714        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11715          <div class="text-blue vf-caption">Thai</div>
11716          <div class="w-full flex flex-grow justify-center overflow-hidden">
11717            <lottie-player data-component="lottie-player" class="hover:scale-[250%] hover:-translate-y-[3%] hover:-translate-x-[15%] cursor-zoom-in transition-transform" data-src="contrast-thai-w-001.json"></lottie-player>
11718          </div>
11719        </div>
11720
11721        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11722          <div class="text-blue vf-caption">Cyrillic</div>
11723          <div class="w-full flex flex-grow justify-center overflow-hidden">
11724            <lottie-player data-component="lottie-player" class="hover:scale-[250%] hover:translate-y-[45%] cursor-zoom-in transition-transform" data-src="contrast-cyr-de-001.json"></lottie-player>
11725          </div>
11726        </div>
11727
11728        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11729          <div class="text-blue vf-caption">Korean</div>
11730          <div class="w-full flex flex-grow justify-center overflow-hidden">
11731            <lottie-player data-component="lottie-player" class="hover:scale-[250%] hover:translate-y-[15%] cursor-zoom-in transition-transform" data-src="contrast-korean-t-001.json"></lottie-player>
11732          </div>
11733        </div>
11734
11735        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11736          <div class="text-blue vf-caption">Arabic</div>
11737          <div class="w-full flex flex-grow justify-center overflow-hidden">
11738            <lottie-player data-component="lottie-player" class="hover:scale-[180%] hover:-translate-y-[8%] hover:-translate-x-[5%] cursor-zoom-in transition-transform" data-src="contrast-arabic-ain-001.json"></lottie-player>
11739          </div>
11740        </div>
11741
11742        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11743          <div class="text-blue vf-caption">Greek</div>
11744          <div class="w-full flex flex-grow justify-center overflow-hidden">
11745            <lottie-player data-component="lottie-player" class="hover:scale-[280%] hover:translate-y-[4%] hover:-translate-x-[0%] cursor-zoom-in transition-transform" data-src="contrast-greek-lambda-001.json"></lottie-player>
11746          </div>
11747        </div>
11748
11749        <div class="col-span-2 md:col-span-4 pt-2 pb-6">
11750          <div class="text-blue vf-caption">Hebrew</div>
11751          <div class="w-full flex flex-grow justify-center overflow-hidden">
11752            <lottie-player data-component="lottie-player" class="hover:scale-[250%] hover:translate-y-[0%] hover:translate-x-[0%] cursor-zoom-in transition-transform" data-src="contrast-hebrew-aleph-001.json"></lottie-player>
11753          </div>
11754        </div>
11755      </div>
11756    </div>
11757  </div>
11758
11759  <div class="grid-setup border-t">
11760    <div class="col-span-4 md:col-span-5 text-blue text-s pt-2 flex flex-col md:flex-row">
11761      <lottie-player data-component="lottie-player" class="hidden md:flex md:w-1/2 self-start" data-src="character-cucumber-002.json"></lottie-player>
11762      <div class="w-full md:w-1/2 flex flex-col pt-2">
11763        <h4 class="pb-4">Stroke Contrast</h4>
11764        <p>
11765          GT America is designed with a focus on reading comfort at body copy
11766          sizes. It opts for a comparatively high stroke contrast in bolder
11767          weights to keep counters open and legible.
11768        </p>
11769      </div>
11770    </div>
11771
11772    <div class="col-span-4 md:col-span-7 md:col-start-6 md:-ml-[6vw] mt-4 pt-2">
11773      <!-- <div class="text-blue vf-caption">Latin</div> -->
11774      <div class="w-full flex flex-grow justify-center align-middle">
11775        <lottie-player data-component="lottie-player" class="" data-src="c
11775ontrast-latin-aa.json"></lottie-player>
11776      </div>
11777    </div>
11778  </div>
11779
11780  <div class="flex w-full mt-6 mb-4 grid-setup">
11781    <!-- Specialty Font: Contrast Axis VF Sample-->
11782    <div class="col-span-4 md:col-span-12" data-component="axes-overview">
11783      <div class="w-full vf-caption text-blue pt-2 mb-6 md:mb-7">
11784        <!-- <span class="pr-6 hidden md:inline-block">GT America Intl</span> -->
11785      </div>
11786      <div data-component="axes-overview__sample" class="leading-none text-red flex flex-col specialty-font-contrast anim-design-feature-font-contrast">
11787        <span class="hidden md:block">Rбה꽝๔ξझھ</span>
11788        <span class="md:hidden"><span class="px-4">Rбה꽝</span><br><span class="px-4">๔ξझھ</span></span>
11789      </div>
11790    </div>
11791
11792    <!-- <img src="images/temp/contrast-all.svg" class="w-full" /> -->
11793  </div>
11794</div>
11795
11796
11797      <div class="pb-9 px-4 md:px-0" data-subnav-jump-to="details">
11798  <!-- One row of content -->
11799  <div class="grid-setup mb-6 border-t">
11800    <div class="col-span-4 md:col-span-4 pt-6">
11801      <!-- <div class="text-blue vf-caption">Latin</div> -->
11802      <div class="w-full flex flex-grow justify-center align-middle">
11803        <lottie-player data-component="lottie-player" class="" data-src="features-latin-b-001.json"></lottie-player>
11804      </div>
11805    </div>
11806
11807    <div class="col-span-4 md:col-span-3 pt-2">
11808      <p class="pb-4 text-blue">Design Features</p>
11809      <p class="text-blue">
11810        Thinned stems and angled spurs are applied and follow the calligraphic
11811        stroke movement. They add personality and unique details while also
11812        improving legibility by enlarging the outer counters. Uppercase
11813        characters are condensed, taking up less width for a more economic
11814        function focused on text usage.
11815      </p>
11816    </div>
11817
11818    <div class="col-span-4 md:col-span-5 pt-2">
11819      <div class="w-full flex flex-grow justify-center align-middle">
11820        <lottie-player data-component="lottie-player" class="md:-mt-[15%]" data-src="character-bee-001.json"></lottie-player>
11821      </div>
11822    </div>
11823  </div>
11824
11825  <!-- One row of content -->
11826  <div class="hidden md:grid-setup pb-6">
11827    <!-- Left half of layout on Desktop-->
11828    <div class="col-span-4 md:col-span-6 border-t pt-2 grid-setup">
11829      <div class="col-span-4 md:col-span-6">
11830        <p class="pb-4 text-blue">Economic Typesetting</p>
11831        <p class="text-blue">
11832          Lowercase m and w are kept at a narrow width to allow for economical
11833          typesetting by fitting more characters on each line.
11834        </p>
11835        <div class="specialty-font-mow anim-design-feature-font-mow text-[5.5vw] leading-[0.4] mt-8">
11836          wow
11837        </div>
11838        <div class="specialty-font-mow anim-design-feature-font-mow text-[5.5vw] leading-0">
11839          mom
11840        </div>
11841      </div>
11842      <div class="col-span-4 md:col-span-6 flex flex-col pt-2">
11843        <!-- <div class="text-blue vf-caption">Latin</div> -->
11844        <lottie-player data-component="lottie-player" class="w-full pb-6" data-src="features-latin-mn-001.json"></lottie-player>
11845      </div>
11846    </div>
11847
11848    <!-- Right half of layout on Desktop-->
11849    <div class="col-span-4 md:col-span-6 border-t pt-2 grid-setup">
11850      <div class="col-span-4 md:col-span-6">
11851        <p class="pb-4 text-blue">Alternate g</p>
11852        <p class="text-blue">
11853          All styles contain an alternate g for a more Swiss Style look.<span class="hidden md:inline"><br></span>
11854        </p>
11855        <div class="text-[5.5vw] leading-[0.4] mt-8">gothic</div>
11856        <div class="ot-ss01 text-[5.5vw] leading-0">grotesk</div>
11857      </div>
11858      <div class="col-span-4 md:col-span-6 flex flex-col pt-2">
11859        <!-- <div class="text-blue vf-caption">Latin</div> -->
11860        <lottie-player data-component="lottie-player" class="w-full" data-src="features-latin-gg.json"></lottie-player>
11861      </div>
11862    </div>
11863  </div>
11864
11865  <!-- One row of content -->
11866  <div class="grid-setup mb-6 pt-2">
11867    <div class="col-span-4 md:col-span-4 pt-2 border-t group hover-circular-dots cursor-pointer">
11868      <p class="pb-6 vf-caption text-blue flex flex-row cursor-pointer">
11869        Latin: Circular Dots
11870        <span class="h-[1em] relative overflow-hidden flex w-[4ch] cursor-pointer"><span class="absolute -translate-y-5 group-hover:translate-y-0">&nbsp;On</span><span class="absolute translate-y-0 group-hover:-translate-y-5">&nbsp;Off</span></span>
11871      </p>
11872      <div class="pb-6 md:pb-0 text-[22vw] md:text-[5.5vw] leading-[0.8]">
11873        Hijinx!
11874      </div>
11875    </div>
11876
11877    <div class="col-span-4 md:col-span-4 pt-2 border-t group hover-circular-dots cursor-pointer">
11878      <p class="pb-6 vf-caption text-blue flex flex-row cursor-pointer">
11879        Cyrillic: Bulgarian Variants
11880        <span class="h-[1em] relative overflow-hidden flex w-[4ch] cursor-pointer"><span class="absolute translate-y-[1000px] group-hover:translate-y-0">&nbsp;On</span><span class="absolute translate-y-0 group-hover:translate-y-[1000px]">&nbsp;Off</span></span>
11881      </p>
11882      <div class="pb-6 md:pb-0 text-[22vw] md:text-[5.5vw] leading-[0.8]">
11883        <span class="h-[1em] relative overflow-hidden flex w-full cursor-pointer"><span class="absolute translate-y-0 group-hover:translate-y-10" lang="uk">Болгарія</span><span class="absolute translate-y-10 group-hover:translate-y-0" lang="bg">България</span></span>
11884      </div>
11885    </div>
11886
11887    <div class="col-span-4 md:col-span-4 pt-2 border-t group hover-circular-dots cursor-pointer">
11888      <p class="pb-6 vf-caption text-blue flex flex-row cursor-pointer">
11889        Arabic: Circular Dots
11890        <span class="h-[1em] relative overflow-hidden flex w-[4ch] cursor-pointer"><span class="absolute -translate-y-5 group-hover:translate-y-0">&nbsp;On</span><span class="absolute translate-y-0 group-hover:-translate-y-5">&nbsp;Off</span></span>
11891      </p>
11892      <div class="pb-6 md:pb-0 text-[22vw] md:text-[5.5vw] leading-[0.8] cursor-pointer" lang="ar">
11893        تكون عبارة
11894      </div>
11895    </div>
11896  </div>
11897</div>
11898
11899    </div>
11900  </section>
11901</section>
11902
11903
11904    <!--INFORMATION SECTION-->
11905    <section data-nav-section="information" data-nav-colour-switcher-colour="white" data-nav-colour-switcher-colour-hover="black" class="bg-red text-white">
11906  <section class="flex overflow-hidden">
11907    <!-- Full Width Content Area -->
11908    <div data-component="section-scene" data-autoplay-until="0" data-start-scroll-offset="0.2" data-src="/models/products/products-v001/products-v001.gltf" data-src-mobile="/models/products/products-mobile-v002/products-mobile-v002.gltf" class="flex self-center w-full h-[100vh] md:h-[90vh]"></div>
11909  </section>
11910
11911  <section class="md:ml-[132px] px-4 mb-9 md:-mt-[4vh] flex">
11912    <!-- Partial Width Content Area -->
11913    <div class="md:ml-[170px] md:mr-4 grid-setup">
11914      <h2 class="col-span-full text-2xl md:text-3xl pb-5 md:pb-4">
11915        Universal Typographic Tool
11916      </h2>
11917      <p class="col-span-4 md:col-span-10 text-md md:text-xl">
11918        As original and sound as GT America Intl is in its concept and
11919        structure, most of all it’s a useful tool. Consider this your Swiss Army
11920        Knife of typographic systems, with a passport to everywhere.
11921      </p>
11922    </div>
11923  </section>
11924
11925  <!-- Charset Section -->
11926  <section class="hidden md:flex md:ml-[132px] px-4 mb-9 pt-8" data-component="show-hide-section">
11927    <!-- Partial Width Content Area With Section Nav -->
11928    <!-- Section Nav Area -->
11929    <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav">
11930      <form class="flex flex-col justify-center h-full" data-component="show-hide-section__radios">
11931        <legend class="text-lg">Character Sets</legend>
11932
11933        <div class="flex flex-col items-start pt-5">
11934          <div class="text-white hover:text-black pt-1 w-[120px]">
11935  <!-- I'm sure theres a better way of applying this attribute conditionally -->
11936  
11937    <input type="radio" checked="" id="info_set-script_latin" name="set-script" value="latin" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white checked:hover:border-white checked:hover:bg-black hover:cursor-pointer">
11938  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_latin">Latin</label>
11939</div>
11940
11941
11942          <div class="text-white hover:text-black pt-1 w-[120px]">
11943  <!-- I'm sure theres a better way of applying this attribute conditionally -->
11944  
11945    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
11946    <input type="radio" id="info_set-script_cyrillic" name="set-script" value="cyrillic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer">
11947  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_cyrillic">Cyrillic</label>
11948</div>
11949
11950
11951          <div class="text-white hover:text-black pt-1 w-[120px]">
11952  <!-- I'm sure theres a better way of applying this attribute conditionally -->
11953  
11954    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
11955    <input type="radio" id="info_set-script_greek" name="set-script" value="greek" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer">
11956  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_greek">Greek</label>
11957</div>
11958
11959
11960          <div class="text-white hover:text-black pt-1 w-[120px]">
11961  <!-- I'm sure theres a better way of applying this attribute conditionally -->
11962  
11963    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
11964    <input type="radio" id="info_set-script_vietnamese" name="set-script" value="vietnamese" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer">
11965  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_vietnamese">Vietnamese</label>
11966</div>
11967
11968        </div>
11969
11970        <div class="flex flex-col items-start pt-5">
11971          <div class="text-white hover:text-black pt-1 w-[120px]">
11972  <!-- I'm sure theres a better way of applying this attribute conditionally -->
11973  
11974    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
11975    <input type="radio" id="info_set-script_arabic" name="set-script" value="arabic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer">
11976  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_arabic">Arabic</label>
11977</div>
11978
11979
11980          <div class="text-white hover:text-black pt-1 w-[120px]">
11981  <!-- I'm sure theres a better way of applying this attribute conditionally -->
11982  
11983    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
11984    <input type="radio" id="info_set-script_devanagari" name="set-script" value="devanagari" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer">
11985  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_devanagari">Devanagari</label>
11986</div>
11987
11988
11989          <div class="text-white hover:text-black pt-1 w-[120px]">
11990  <!-- I'm sure theres a better way of applying this attribute conditionally -->
11991  
11992    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
11993    <input type="radio" id="info_set-script_hebrew" name="set-script" value="hebrew" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer">
11994  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_hebrew">Hebrew</label>
11995</div>
11996
11997
11998          <div class="text-white hover:text-black pt-1 w-[120px]">
11999  <!-- I'm sure theres a better way of applying this attribute conditionally -->
12000  
12001    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
12002    <input type="radio" id="info_set-script_korean" name="set-script" value="korean" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer">
12003  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_korean">Korean</label>
12004</div>
12005
12006
12007          <div class="text-white hover:text-black pt-1 w-[120px]">
12008  <!-- I'm sure theres a better way of applying this attribute conditionally -->
12009  
12010    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
12011    <input type="radio" id="info_set-script_thai-loopless" name="set-script" value="thai-loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer">
12012  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_thai-loopless">Thai Loopless</label>
12013</div>
12014
12015
12016          <div class="text-white hover:text-black pt-1 w-[120px]">
12017  <!-- I'm sure theres a better way of applying this attribute conditionally -->
12018  
12019    <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying -->
12020    <input type="radio" id="info_set-script_thai-looped" name="set-script" value="thai-looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer">
12021  <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_thai-looped">Thai Looped</label>
12022</div>
12023
12024        </div>
12025
12026        <!-- <div class="flex flex-col items-start pt-5">
12027          <include src="source/html-includes/radio-button.html">
12028            { "color": "white", "hoverColor": "blue", "name": "set-script",
12029            "value": "chinese-simplified", "label": "Simp. Chinese", "checked":
12030            false, "namePrefix": "info" }
12031          </include>
12032
12033          <include src="source/html-includes/radio-button.html">
12034            { "color": "white", "hoverColor": "blue", "name": "set-script",
12035            "value": "chinese-traditional", "label": "Trad. Chinese", "checked":
12036            false, "namePrefix": "info" }
12037          </include>
12038
12039          <include src="source/html-includes/radio-button.html">
12040            { "color": "white", "hoverColor": "blue", "name": "set-script",
12041            "value": "japanese", "label": "Japanese", "checked": false,
12042            "namePrefix": "info" }
12043          </include>
12044        </div> -->
12045      </form>
12046    </div>
12047
12048    <!-- Main Content Area -->
12049    <!-- Charset Loupe and Charset -->
12050    <div class="ml-[48px] mr-4 w-full text-xs grid-setup mb-10" data-component="char-set">
12051  <div class="col-span-7 sticky top-7 h-min">
12052    <div class="flex flex-row justify-between">
12053      <div class="flex flex-row">
12054        <div class="pr-5" data-component="char-set__script"></div>
12055        <div class="pr-5" data-component="char-set__subset"></div>
12056        <div class="pr-5" data-component="char-set__unicode"></div>
12057      </div>
12058      <div class="flex flex-row">
12059        <div class="pr-5">Standard</div>
12060        <div class="pr-5">Regular</div>
12061        <div>30vw</div>
12062      </div>
12063    </div>
12064    <div class="bg-white text-red flex min-h-[70vh] mt-4 text-5xl leading-none text-center justify-center items-center">
12065      <span class="z-10" data-component="char-set__loupe"></span>
12066      <!-- <hr
12067        class="absolute w-[calc(100%-1px)] charset-vmetric-caps text-blue top-[25.2%] z-0"
12068      />
12069      <hr
12070        class="absolute w-[calc(100%-1px)] charset-vmetric-xheight text-blue top-[40.5%] z-0"
12071      />
12072      <hr
12073        class="absolute w-[calc(100%-1px)] charset-vmetric-baseline text-blue top-[76.82%] z-0"
12074      />
12075      <hr
12076        class="absolute w-[calc(100%-1px)] charset-vmetric-descender text-blue top-[91.1%] z-0"
12077      /> -->
12078    </div>
12079    <div class="pt-4" data-component="show-hide-section__section" data-show-hide-section-name="korean">
12080      We are only showing a subset of characters here. Please refer to
12081      <a href="/images/GT-America-Intl-Manual.pdf">the PDF specimen</a> to review
12082      the full Korean character set available for GT America Korean.
12083    </div>
12084    <div class="pt-4" data-component="show-hide-section__section" data-show-hide-section-name="japanese">
12085      Note about Japanese subsetting when Japanse is shown.
12086      <a href="#">Link to full Korean charset</a> in PDF format.
12087    </div>
12088    <div class="pt-4" data-component="show-hide-section__section" data-show-hide-section-name="chinese-simplified">
12089      Note about Simplified Chinese subsetting when Simplified Chinese is shown.
12090      <a href="#">Link to full Korean charset</a> in PDF format.
12091    </div>
12092    <div class="pt-4" data-component="show-hide-section__section" data-show-hide-section-name="chinese-traditional">
12093      Note about Traditional Chinese subsetting when Traditional Chinese is
12094      shown. <a href="#">Link to full Korean charset</a> in PDF format.
12095    </div>
12096  </div>
12097
12098  <!-- Start of one single Charset Section -->
12099<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="latin">
12100  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Latin" data-char-set-subset="Basic Alphabet">
12101    <div class="flex flex-row justify-between">
12102      <div class="">Basic Alphabet</div>
12103      <div data-component="char-set__subset-size" class=""></div>
12104    </div>
12105    <div>
12106      <div class="character-set-section mt-4">
12107        <div class="character-set-container text-rg">
12108          <div data-component="char-set__char" class="charset-single-char">
12109            A
12110          </div>
12111          <div data-component="char-set__char" class="charset-single-char">
12112            B
12113          </div>
12114          <div data-component="char-set__char" class="charset-single-char">
12115            C
12116          </div>
12117          <div data-component="char-set__char" class="charset-single-char">
12118            D
12119          </div>
12120          <div data-component="char-set__char" class="charset-single-char">
12121            E
12122          </div>
12123          <div data-component="char-set__char" class="charset-single-char">
12124            F
12125          </div>
12126          <div data-component="char-set__char" class="charset-single-char">
12127            G
12128          </div>
12129          <div data-component="char-set__char" class="charset-single-char">
12130            H
12131          </div>
12132          <div data-component="char-set__char" class="charset-single-char">
12133            I
12134          </div>
12135          <div data-component="char-set__char" class="charset-single-char">
12136            J
12137          </div>
12138          <div data-component="char-set__char" class="charset-single-char">
12139            K
12140          </div>
12141          <div data-component="char-set__char" class="charset-single-char">
12142            L
12143          </div>
12144          <div data-component="char-set__char" class="charset-single-char">
12145            M
12146          </div>
12147          <div data-component="char-set__char" class="charset-single-char">
12148            N
12149          </div>
12150          <div data-component="char-set__char" class="charset-single-char">
12151            N
12152          </div>
12153          <div data-component="char-set__char" class="charset-single-char">
12154            O
12155          </div>
12156          <div data-component="char-set__char" class="charset-single-char">
12157            P
12158          </div>
12159          <div data-component="char-set__char" class="charset-single-char">
12160            Q
12161          </div>
12162          <div data-component="char-set__char" class="charset-single-char">
12163            R
12164          </div>
12165          <div data-component="char-set__char" class="charset-single-char">
12166            S
12167          </div>
12168          <div data-component="char-set__char" class="charset-single-char">
12169            T
12170          </div>
12171          <div data-component="char-set__char" class="charset-single-char">
12172            U
12173          </div>
12174          <div data-component="char-set__char" class="charset-single-char">
12175            V
12176          </div>
12177          <div data-component="char-set__char" class="charset-single-char">
12178            W
12179          </div>
12180          <div data-component="char-set__char" class="charset-single-char">
12181            X
12182          </div>
12183          <div data-component="char-set__char" class="charset-single-char">
12184            Y
12185          </div>
12186          <div data-component="char-set__char" class="charset-single-char">
12187            Z
12188          </div>
12189          <div data-component="char-set__char" class="charset-single-char">
12190            a
12191          </div>
12192          <div data-component="char-set__char" class="charset-single-char">
12193            b
12194          </div>
12195          <div data-component="char-set__char" class="charset-single-char">
12196            c
12197          </div>
12198          <div data-component="char-set__char" class="charset-single-char">
12199            d
12200          </div>
12201          <div data-component="char-set__char" class="charset-single-char">
12202            e
12203          </div>
12204          <div data-component="char-set__char" class="charset-single-char">
12205            f
12206          </div>
12207          <div data-component="char-set__char" class="charset-single-char">
12208            g
12209          </div>
12210          <div data-component="char-set__char" class="charset-single-char">
12211            h
12212          </div>
12213          <div data-component="char-set__char" class="charset-single-char">
12214            i
12215          </div>
12216          <div data-component="char-set__char" class="charset-single-char">
12217            j
12218          </div>
12219          <div data-component="char-set__char" class="charset-single-char">
12220            k
12221          </div>
12222          <div data-component="char-set__char" class="charset-single-char">
12223            l
12224          </div>
12225          <div data-component="char-set__char" class="charset-single-char">
12226            m
12227          </div>
12228          <div data-component="char-set__char" class="charset-single-char">
12229            n
12230          </div>
12231          <div data-component="char-set__char" class="charset-single-char">
12232            o
12233          </div>
12234          <div data-component="char-set__char" class="charset-single-char">
12235            p
12236          </div>
12237          <div data-component="char-set__char" class="charset-single-char">
12238            q
12239          </div>
12240          <div data-component="char-set__char" class="charset-single-char">
12241            r
12242          </div>
12243          <div data-component="char-set__char" class="charset-single-char">
12244            s
12245          </div>
12246          <div data-component="char-set__char" class="charset-single-char">
12247            t
12248          </div>
12249          <div data-component="char-set__char" class="charset-single-char">
12250            u
12251          </div>
12252          <div data-component="char-set__char" class="charset-single-char">
12253            v
12254          </div>
12255          <div data-component="char-set__char" class="charset-single-char">
12256            w
12257          </div>
12258          <div data-component="char-set__char" class="charset-single-char">
12259            x
12260          </div>
12261          <div data-component="char-set__char" class="charset-single-char">
12262            y
12263          </div>
12264          <div data-component="char-set__char" class="charset-single-char">
12265            z
12266          </div>
12267        </div>
12268      </div>
12269    </div>
12270  </div>
12271  <!-- End of Charset Section -->
12272  <!-- Start of one single Charset Section -->
12273  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Latin" data-char-set-subset="Diacritics">
12274    <div class="flex flex-row justify-between">
12275      <div class="">Diacritics</div>
12276      <div data-component="char-set__subset-size" class=""></div>
12277    </div>
12278    <div>
12279      <div class="character-set-section mt-4">
12280        <div class="character-set-container text-rg">
12281          <div data-component="char-set__char" class="charset-single-char">
12282            Á
12283          </div>
12284          <div data-component="char-set__char" class="charset-single-char">
12285            Ă
12286          </div>
12287          <div data-component="char-set__char" class="charset-single-char">
12288            Â
12289          </div>
12290          <div data-component="char-set__char" class="charset-single-char">
12291            Ä
12292          </div>
12293          <div data-component="char-set__char" class="charset-single-char">
12294            Æ
12295          </div>
12296          <div data-component="char-set__char" class="charset-single-char">
12297            Ǽ
12298          </div>
12299          <div data-component="char-set__char" class="charset-single-char">
12300            À
12301          </div>
12302          <div data-component="char-set__char" class="charset-single-char">
12303            Ā
12304          </div>
12305          <div data-component="char-set__char" class="charset-single-char">
12306            Ą
12307          </div>
12308          <div data-component="char-set__char" class="charset-single-char">
12309            Å
12310          </div>
12311          <div data-component="char-set__char" class="charset-single-char">
12312            Ã
12313          </div>
12314          <div data-component="char-set__char" class="charset-single-char">
12315            Ć
12316          </div>
12317          <div data-component="char-set__char" class="charset-single-char">
12318            Č
12319          </div>
12320          <div data-component="char-set__char" class="charset-single-char">
12321            Ç
12322          </div>
12323          <div data-component="char-set__char" class="charset-single-char">
12324            Ĉ
12325          </div>
12326          <div data-component="char-set__char" class="charset-single-char">
12327            Ċ
12328          </div>
12329          <div data-component="char-set__char" class="charset-single-char">
12330            Ď
12331          </div>
12332          <div data-component="char-set__char" class="charset-single-char">
12333            Đ
12334          </div>
12335          <div data-component="char-set__char" class="charset-single-char">
12336            É
12337          </div>
12338          <div data-component="char-set__char" class="charset-single-char">
12339            Ĕ
12340          </div>
12341          <div data-component="char-set__char" class="charset-single-char">
12342            Ě
12343          </div>
12344          <div data-component="char-set__char" class="charset-single-char">
12345            Ê
12346          </div>
12347          <div data-component="char-set__char" class="charset-single-char">
12348            Ë
12349          </div>
12350          <div data-component="char-set__char" class="charset-single-char">
12351            Ė
12352          </div>
12353          <div data-component="char-set__char" class="charset-single-char">
12354            È
12355          </div>
12356          <div data-component="char-set__char" class="charset-single-char">
12357            Ē
12358          </div>
12359          <div data-component="char-set__char" class="charset-single-char">
12360            Ę
12361          </div>
12362          <div data-component="char-set__char" class="charset-single-char">
12363            Ð
12364          </div>
12365          <div data-component="char-set__char" class="charset-single-char">
12366            Ğ
12367          </div>
12368          <div data-component="char-set__char" class="charset-single-char">
12369            Ĝ
12370          </div>
12371          <div data-component="char-set__char" class="charset-single-char">
12372            Ģ
12373          </div>
12374          <div data-component="char-set__char" class="charset-single-char">
12375            Ä 
12376          </div>
12377          <div data-component="char-set__char" class="charset-single-char">
12378            Ħ
12379          </div>
12380          <div data-component="char-set__char" class="charset-single-char">
12381            Ĥ
12382          </div>
12383          <div data-component="char-set__char" class="charset-single-char">
12384            Í
12385          </div>
12386          <div data-component="char-set__char" class="charset-single-char">
12387            Ĭ
12388          </div>
12389          <div data-component="char-set__char" class="charset-single-char">
12390            Î
12391          </div>
12392          <div data-component="char-set__char" class="charset-single-char">
12393            Ï
12394          </div>
12395          <div data-component="char-set__char" class="charset-single-char">
12396            İ
12397          </div>
12398          <div data-component="char-set__char" class="charset-single-char">
12399            Ì
12400          </div>
12401          <div data-component="char-set__char" class="charset-single-char">
12402            IJ
12403          </div>
12404          <div data-component="char-set__char" class="charset-single-char">
12405            Ī
12406          </div>
12407          <div data-component="char-set__char" class="charset-single-char">
12408            Ä®
12409          </div>
12410          <div data-component="char-set__char" class="charset-single-char">
12411            Ĩ
12412          </div>
12413          <div data-component="char-set__char" class="charset-single-char">
12414            J
12415          </div>
12416          <div data-component="char-set__char" class="charset-single-char">
12417            Ä´
12418          </div>
12419          <div data-component="char-set__char" class="charset-single-char">
12420            Ķ
12421          </div>
12422          <div data-component="char-set__char" class="charset-single-char">
12423            Ĺ
12424          </div>
12425          <div data-component="char-set__char" class="charset-single-char">
12426            Ľ
12427          </div>
12428          <div data-component="char-set__char" class="charset-single-char">
12429            Ä»
12430          </div>
12431          <div data-component="char-set__char" class="charset-single-char">
12432            Ä¿
12433          </div>
12434          <div data-component="char-set__char" class="charset-single-char">
12435            Ł
12436          </div>
12437          <div data-component="char-set__char" class="charset-single-char">
12438            Ń
12439          </div>
12440          <div data-component="char-set__char" class="charset-single-char">
12441            Ň
12442          </div>
12443          <div data-component="char-set__char" class="charset-single-char">
12444            Ņ
12445          </div>
12446          <div data-component="char-set__char" class="charset-single-char">
12447            Ñ
12448          </div>
12449          <div data-component="char-set__char" class="charset-single-char">
12450            Ŋ
12451          </div>
12452          <div data-component="char-set__char" class="charset-single-char">
12453            Ó
12454          </div>
12455          <div data-component="char-set__char" class="charset-single-char">
12456    
12456        Ŏ
12457          </div>
12458          <div data-component="char-set__char" class="charset-single-char">
12459            Ô
12460          </div>
12461          <div data-component="char-set__char" class="charset-single-char">
12462            Ö
12463          </div>
12464          <div data-component="char-set__char" class="charset-single-char">
12465            Ö
12466          </div>
12467          <div data-component="char-set__char" class="charset-single-char">
12468            Œ
12469          </div>
12470          <div data-component="char-set__char" class="charset-single-char">
12471            Ò
12472          </div>
12473          <div data-component="char-set__char" class="charset-single-char">
12474            Ő
12475          </div>
12476          <div data-component="char-set__char" class="charset-single-char">
12477            Ō
12478          </div>
12479          <div data-component="char-set__char" class="charset-single-char">
12480            Ø
12481          </div>
12482          <div data-component="char-set__char" class="charset-single-char">
12483            Ǿ
12484          </div>
12485          <div data-component="char-set__char" class="charset-single-char">
12486            Õ
12487          </div>
12488          <div data-component="char-set__char" class="charset-single-char">
12489            Ŕ
12490          </div>
12491          <div data-component="char-set__char" class="charset-single-char">
12492            Ř
12493          </div>
12494          <div data-component="char-set__char" class="charset-single-char">
12495            Ŗ
12496          </div>
12497          <div data-component="char-set__char" class="charset-single-char">
12498            Ś
12499          </div>
12500          <div data-component="char-set__char" class="charset-single-char">
12501            Å 
12502          </div>
12503          <div data-component="char-set__char" class="charset-single-char">
12504            Ş
12505          </div>
12506          <div data-component="char-set__char" class="charset-single-char">
12507            Ŝ
12508          </div>
12509          <div data-component="char-set__char" class="charset-single-char">
12510            Ș
12511          </div>
12512          <div data-component="char-set__char" class="charset-single-char">
12513            Ŧ
12514          </div>
12515          <div data-component="char-set__char" class="charset-single-char">
12516            Ť
12517          </div>
12518          <div data-component="char-set__char" class="charset-single-char">
12519            Ţ
12520          </div>
12521          <div data-component="char-set__char" class="charset-single-char">
12522            Ț
12523          </div>
12524          <div data-component="char-set__char" class="charset-single-char">
12525            Þ
12526          </div>
12527          <div data-component="char-set__char" class="charset-single-char">
12528            Ú
12529          </div>
12530          <div data-component="char-set__char" class="charset-single-char">
12531            Ŭ
12532          </div>
12533          <div data-component="char-set__char" class="charset-single-char">
12534            Û
12535          </div>
12536          <div data-component="char-set__char" class="charset-single-char">
12537            Ü
12538          </div>
12539          <div data-component="char-set__char" class="charset-single-char">
12540            Ù
12541          </div>
12542          <div data-component="char-set__char" class="charset-single-char">
12543            Ű
12544          </div>
12545          <div data-component="char-set__char" class="charset-single-char">
12546            Ū
12547          </div>
12548          <div data-component="char-set__char" class="charset-single-char">
12549            Ų
12550          </div>
12551          <div data-component="char-set__char" class="charset-single-char">
12552            Å®
12553          </div>
12554          <div data-component="char-set__char" class="charset-single-char">
12555            Ũ
12556          </div>
12557          <div data-component="char-set__char" class="charset-single-char">
12558            Ẃ
12559          </div>
12560          <div data-component="char-set__char" class="charset-single-char">
12561            Å´
12562          </div>
12563          <div data-component="char-set__char" class="charset-single-char">
12564            Ẅ
12565          </div>
12566          <div data-component="char-set__char" class="charset-single-char">
12567            Ẁ
12568          </div>
12569          <div data-component="char-set__char" class="charset-single-char">
12570            Ý
12571          </div>
12572          <div data-component="char-set__char" class="charset-single-char">
12573            Ŷ
12574          </div>
12575          <div data-component="char-set__char" class="charset-single-char">
12576            Ÿ
12577          </div>
12578          <div data-component="char-set__char" class="charset-single-char">
12579            Ỳ
12580          </div>
12581          <div data-component="char-set__char" class="charset-single-char">
12582            Ź
12583          </div>
12584          <div data-component="char-set__char" class="charset-single-char">
12585            Ž
12586          </div>
12587          <div data-component="char-set__char" class="charset-single-char">
12588            Å»
12589          </div>
12590          <div data-component="char-set__char" class="charset-single-char">
12591            ẞ
12592          </div>
12593          <div data-component="char-set__char" class="charset-single-char">
12594            á
12595          </div>
12596          <div data-component="char-set__char" class="charset-single-char">
12597            ă
12598          </div>
12599          <div data-component="char-set__char" class="charset-single-char">
12600            â
12601          </div>
12602          <div data-component="char-set__char" class="charset-single-char">
12603            ä
12604          </div>
12605          <div data-component="char-set__char" class="charset-single-char">
12606            æ
12607          </div>
12608          <div data-component="char-set__char" class="charset-single-char">
12609            ǽ
12610          </div>
12611          <div data-component="char-set__char" class="charset-single-char">
12612            à
12613          </div>
12614          <div data-component="char-set__char" class="charset-single-char">
12615            ā
12616          </div>
12617          <div data-component="char-set__char" class="charset-single-char">
12618            ą
12619          </div>
12620          <div data-component="char-set__char" class="charset-single-char">
12621            å
12622          </div>
12623          <div data-component="char-set__char" class="charset-single-char">
12624            ã
12625          </div>
12626          <div data-component="char-set__char" class="charset-single-char">
12627            ć
12628          </div>
12629          <div data-component="char-set__char" class="charset-single-char">
12630            č
12631          </div>
12632          <div data-component="char-set__char" class="charset-single-char">
12633            ç
12634          </div>
12635          <div data-component="char-set__char" class="charset-single-char">
12636            ĉ
12637          </div>
12638          <div data-component="char-set__char" class="charset-single-char">
12639            ċ
12640          </div>
12641          <div data-component="char-set__char" class="charset-single-char">
12642            ď
12643          </div>
12644          <div data-component="char-set__char" class="charset-single-char">
12645            đ
12646          </div>
12647          <div data-component="char-set__char" class="charset-single-char">
12648            é
12649          </div>
12650          <div data-component="char-set__char" class="charset-single-char">
12651            ĕ
12652          </div>
12653          <div data-component="char-set__char" class="charset-single-char">
12654            ě
12655          </div>
12656          <div data-component="char-set__char" class="charset-single-char">
12657            ê
12658          </div>
12659          <div data-component="char-set__char" class="charset-single-char">
12660            ë
12661          </div>
12662          <div data-component="char-set__char" class="charset-single-char">
12663            ė
12664          </div>
12665          <div data-component="char-set__char" class="charset-single-char">
12666            è
12667          </div>
12668          <div data-component="char-set__char" class="charset-single-char">
12669            ē
12670          </div>
12671          <div data-component="char-set__char" class="charset-single-char">
12672            ę
12673          </div>
12674          <div data-component="char-set__char" class="charset-single-char">
12675            ð
12676          </div>
12677          <div data-component="char-set__char" class="charset-single-char">
12678            ğ
12679          </div>
12680          <div data-component="char-set__char" class="charset-single-char">
12681            ĝ
12682          </div>
12683          <div data-component="char-set__char" class="charset-single-char">
12684            ģ
12685          </div>
12686          <div data-component="char-set__char" class="charset-single-char">
12687            Ä¡
12688          </div>
12689          <div data-component="char-set__char" class="charset-single-char">
12690            ħ
12691          </div>
12692          <div data-component="char-set__char" class="charset-single-char">
12693            ĥ
12694          </div>
12695          <div data-component="char-set__char" class="charset-single-char">
12696            í
12697          </div>
12698          <div data-component="char-set__char" class="charset-single-char">
12699            Ä­
12700          </div>
12701          <div data-component="char-set__char" class="charset-single-char">
12702            î
12703          </div>
12704          <div data-component="char-set__char" class="charset-single-char">
12705            ï
12706          </div>
12707          <div data-component="char-set__char" class="charset-single-char">
12708            i̇
12709          </div>
12710          <div data-component="char-set__char" class="charset-single-char">
12711            ì
12712          </div>
12713          <div data-component="char-set__char" class="charset-single-char">
12714            ij
12715          </div>
12716          <div data-component="char-set__char" class="charset-single-char">
12717            Ä«
12718          </div>
12719          <div data-component="char-set__char" class="charset-single-char">
12720            į
12721          </div>
12722          <div data-component="char-set__char" class="charset-single-char">
12723            Ä©
12724          </div>
12725          <div data-component="char-set__char" class="charset-single-char">
12726            j
12727          </div>
12728          <div data-component="char-set__char" class="charset-single-char">
12729            ĵ
12730          </div>
12731          <div data-component="char-set__char" class="charset-single-char">
12732            Ä·
12733          </div>
12734          <div data-component="char-set__char" class="charset-single-char">
12735            ĺ
12736          </div>
12737          <div data-component="char-set__char" class="charset-single-char">
12738            ľ
12739          </div>
12740          <div data-component="char-set__char" class="charset-single-char">
12741            ļ
12742          </div>
12743          <div data-component="char-set__char" class="charset-single-char">
12744            ŀ
12745          </div>
12746          <div data-component="char-set__char" class="charset-single-char">
12747            ł
12748          </div>
12749          <div data-component="char-set__char" class="charset-single-char">
12750            ń
12751          </div>
12752          <div data-component="char-set__char" class="charset-single-char">
12753            ň
12754          </div>
12755          <div data-component="char-set__char" class="charset-single-char">
12756            ņ
12757          </div>
12758          <div data-component="char-set__char" class="charset-single-char">
12759            ñ
12760          </div>
12761          <div data-component="char-set__char" class="charset-single-char">
12762            ŋ
12763          </div>
12764          <div data-component="char-set__char" class="charset-single-char">
12765            ó
12766          </div>
12767          <div data-component="char-set__char" class="charset-single-char">
12768            ŏ
12769          </div>
12770          <div data-component="char-set__char" class="charset-single-char">
12771            ô
12772          </div>
12773          <div data-component="char-set__char" class="charset-single-char">
12774            ö
12775          </div>
12776          <div data-component="char-set__char" class="charset-single-char">
12777            ö
12778          </div>
12779          <div data-component="char-set__char" class="charset-single-char">
12780            œ
12781          </div>
12782          <div data-component="char-set__char" class="charset-single-char">
12783            ò
12784          </div>
12785          <div data-component="char-set__char" class="charset-single-char">
12786            ő
12787          </div>
12788          <div data-component="char-set__char" class="charset-single-char">
12789            ō
12790          </div>
12791          <div data-component="char-set__char" class="charset-single-char">
12792            ø
12793          </div>
12794          <div data-component="char-set__char" class="charset-single-char">
12795            Ç¿
12796          </div>
12797          <div data-component="char-set__char" class="charset-single-char">
12798            õ
12799          </div>
12800          <div data-component="char-set__char" class="charset-single-char">
12801            ŕ
12802          </div>
12803          <div data-component="char-set__char" class="charset-single-char">
12804            ř
12805          </div>
12806          <div data-component="char-set__char" class="charset-single-char">
12807            ŗ
12808          </div>
12809          <div data-component="char-set__char" class="charset-single-char">
12810            ś
12811          </div>
12812          <div data-component="char-set__char" class="charset-single-char">
12813            Å¡
12814          </div>
12815          <div data-component="char-set__char" class="charset-single-char">
12816            ş
12817          </div>
12818          <div data-component="char-set__char" class="charset-single-char">
12819            ŝ
12820          </div>
12821          <div data-component="char-set__char" class="charset-single-char">
12822            ș
12823          </div>
12824          <div data-component="char-set__char" class="charset-single-char">
12825            ŧ
12826          </div>
12827          <div data-component="char-set__char" class="charset-single-char">
12828            ť
12829          </div>
12830          <div data-component="char-set__char" class="charset-single-char">
12831            ţ
12832          </div>
12833          <div data-component="char-set__char" class="charset-single-char">
12834            ț
12835          </div>
12836          <div data-component="char-set__char" class="charset-single-char">
12837            þ
12838          </div>
12839          <div data-component="char-set__char" class="charset-single-char">
12840            ú
12841          </div>
12842          <div data-component="char-set__char" class="charset-single-char">
12843            Å­
12844          </div>
12845          <div data-component="char-set__char" class="charset-single-char">
12846            û
12847          </div>
12848          <div data-component="char-set__char" class="charset-single-char">
12849            ü
12850          </div>
12851          <div data-component="char-set__char" class="charset-single-char">
12852            ù
12853          </div>
12854          <div data-component="char-set__char" class="charset-single-char">
12855            ű
12856          </div>
12857          <div data-component="char-set__char" class="charset-single-char">
12858            Å«
12859          </div>
12860          <div data-component="char-set__char" class="charset-single-char">
12861            ų
12862          </div>
12863          <div data-component="char-set__char" class="charset-single-char">
12864            ů
12865          </div>
12866          <div data-component="char-set__char" class="charset-single-char">
12867            Å©
12868          </div>
12869          <div data-component="char-set__char" class="charset-single-char">
12870            ẃ
12871          </div>
12872          <div data-component="char-set__char" class="charset-single-char">
12873            ŵ
12874          </div>
12875          <div data-component="char-set__char" class="charset-single-char">
12876            ẅ
12877          </div>
12878          <div data-component="char-set__char" class="charset-single-char">
12879            ẁ
12880          </div>
12881          <div data-component="char-set__char" class="charset-single-char">
12882            ý
12883          </div>
12884          <div data-component="char-set__char" class="charset-single-char">
12885            Å·
12886          </div>
12887          <div data-component="char-set__char" class="charset-single-char">
12888            ÿ
12889          </div>
12890          <div data-component="char-set__char" class="charset-single-char">
12891            ỳ
12892          </div>
12893          <div data-component="char-set__char" class="charset-single-char">
12894            ź
12895          </div>
12896          <div data-component="char-set__char" class="charset-single-char">
12897            ž
12898          </div>
12899          <div data-component="char-set__char" class="charset-single-char">
12900            ż
12901          </div>
12902          <div data-component="char-set__char" class="charset-single-char">
12903            ß
12904          </div>
12905        </div>
12906      </div>
12907    </div>
12908  </div>
12909  <!-- End of Charset Section -->
12910  <!-- Start of one single Charset Section -->
12911  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Latin" data-char-set-subset="Numbers, Punct
12911uations, and Symbols">
12912    <div class="flex flex-row justify-between">
12913      <div class="">Numbers, Punctuations, and Symbols</div>
12914      <div data-component="char-set__subset-size" class=""></div>
12915    </div>
12916    <div>
12917      <div class="character-set-section mt-4">
12918        <div class="character-set-container text-rg">
12919          <div data-component="char-set__char" class="charset-single-char">
12920            0
12921          </div>
12922          <div data-component="char-set__char" class="charset-single-char">
12923            1
12924          </div>
12925          <div data-component="char-set__char" class="charset-single-char">
12926            2
12927          </div>
12928          <div data-component="char-set__char" class="charset-single-char">
12929            3
12930          </div>
12931          <div data-component="char-set__char" class="charset-single-char">
12932            4
12933          </div>
12934          <div data-component="char-set__char" class="charset-single-char">
12935            5
12936          </div>
12937          <div data-component="char-set__char" class="charset-single-char">
12938            6
12939          </div>
12940          <div data-component="char-set__char" class="charset-single-char">
12941            7
12942          </div>
12943          <div data-component="char-set__char" class="charset-single-char">
12944            8
12945          </div>
12946          <div data-component="char-set__char" class="charset-single-char">
12947            9
12948          </div>
12949
12950          <div data-component="char-set__char" class="charset-single-char ot-lnum-slash">
12951            0
12952          </div>
12953
12954          <!-- Tabular Numerals -->
12955          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12956            0
12957          </div>
12958          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12959            1
12960          </div>
12961          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12962            2
12963          </div>
12964          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12965            3
12966          </div>
12967          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12968            4
12969          </div>
12970          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12971            5
12972          </div>
12973          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12974            6
12975          </div>
12976          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12977            7
12978          </div>
12979          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12980            8
12981          </div>
12982          <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum">
12983            9
12984          </div>
12985
12986          <div data-component="char-set__char" class="charset-single-char ot-tf-lnum-slash">
12987            0
12988          </div>
12989
12990          <!-- Oldstyle Numerals -->
12991          <div data-component="char-set__char" class="charset-single-char ot-onum">
12992            0
12993          </div>
12994          <div data-component="char-set__char" class="charset-single-char ot-onum">
12995            1
12996          </div>
12997          <div data-component="char-set__char" class="charset-single-char ot-onum">
12998            2
12999          </div>
13000          <div data-component="char-set__char" class="charset-single-char ot-onum">
13001            3
13002          </div>
13003          <div data-component="char-set__char" class="charset-single-char ot-onum">
13004            4
13005          </div>
13006          <div data-component="char-set__char" class="charset-single-char ot-onum">
13007            5
13008          </div>
13009          <div data-component="char-set__char" class="charset-single-char ot-onum">
13010            6
13011          </div>
13012          <div data-component="char-set__char" class="charset-single-char ot-onum">
13013            7
13014          </div>
13015          <div data-component="char-set__char" class="charset-single-char ot-onum">
13016            8
13017          </div>
13018          <div data-component="char-set__char" class="charset-single-char ot-onum">
13019            9
13020          </div>
13021
13022          <div data-component="char-set__char" class="charset-single-char ot-onum-slash">
13023            0
13024          </div>
13025
13026          <!-- Circular Numerals -->
13027          <div data-component="char-set__char" class="charset-single-char">
13028            ●
13029          </div>
13030          <div data-component="char-set__char" class="charset-single-char">
13031            ○
13032          </div>
13033          <div data-component="char-set__char" class="charset-single-char">
13034            ❶
13035          </div>
13036          <div data-component="char-set__char" class="charset-single-char">
13037            ❷
13038          </div>
13039          <div data-component="char-set__char" class="charset-single-char">
13040            ❸
13041          </div>
13042          <div data-component="char-set__char" class="charset-single-char">
13043            ❹
13044          </div>
13045          <div data-component="char-set__char" class="charset-single-char">
13046            ❺
13047          </div>
13048          <div data-component="char-set__char" class="charset-single-char">
13049            ❻
13050          </div>
13051          <div data-component="char-set__char" class="charset-single-char">
13052            ❼
13053          </div>
13054          <div data-component="char-set__char" class="charset-single-char">
13055            ❽
13056          </div>
13057          <div data-component="char-set__char" class="charset-single-char">
13058            ❾
13059          </div>
13060          <div data-component="char-set__char" class="charset-single-char">
13061            ①
13062          </div>
13063          <div data-component="char-set__char" class="charset-single-char">
13064            ②
13065          </div>
13066          <div data-component="char-set__char" class="charset-single-char">
13067            ③
13068          </div>
13069          <div data-component="char-set__char" class="charset-single-char">
13070            ④
13071          </div>
13072          <div data-component="char-set__char" class="charset-single-char">
13073            ⑤
13074          </div>
13075          <div data-component="char-set__char" class="charset-single-char">
13076            ⑥
13077          </div>
13078          <div data-component="char-set__char" class="charset-single-char">
13079            ⑦
13080          </div>
13081          <div data-component="char-set__char" class="charset-single-char">
13082            ⑧
13083          </div>
13084          <div data-component="char-set__char" class="charset-single-char">
13085            ⑨
13086          </div>
13087
13088          <div data-component="char-set__char" class="charset-single-char">
13089            (
13090          </div>
13091          <div data-component="char-set__char" class="charset-single-char">
13092            [
13093          </div>
13094          <div data-component="char-set__char" class="charset-single-char">
13095            {
13096          </div>
13097          <div data-component="char-set__char" class="charset-single-char">
13098            ,
13099          </div>
13100          <div data-component="char-set__char" class="charset-single-char">
13101            ;
13102          </div>
13103          <div data-component="char-set__char" class="charset-single-char">
13104            :
13105          </div>
13106          <div data-component="char-set__char" class="charset-single-char">
13107            .
13108          </div>
13109          <div data-component="char-set__char" class="charset-single-char">
13110            …
13111          </div>
13112          <div data-component="char-set__char" class="charset-single-char">
13113            -
13114          </div>
13115          <div data-component="char-set__char" class="charset-single-char">
13116            ‘
13117          </div>
13118          <div data-component="char-set__char" class="charset-single-char">
13119            ’
13120          </div>
13121          <div data-component="char-set__char" class="charset-single-char">
13122            “
13123          </div>
13124          <div data-component="char-set__char" class="charset-single-char">
13125            ”
13126          </div>
13127          <div data-component="char-set__char" class="charset-single-char">
13128            ‚
13129          </div>
13130          <div data-component="char-set__char" class="charset-single-char">
13131            „
13132          </div>
13133          <div data-component="char-set__char" class="charset-single-char">
13134            ‹
13135          </div>
13136          <div data-component="char-set__char" class="charset-single-char">
13137            ›
13138          </div>
13139          <div data-component="char-set__char" class="charset-single-char">
13140            ·
13141          </div>
13142          <div data-component="char-set__char" class="charset-single-char">
13143            –
13144          </div>
13145          <div data-component="char-set__char" class="charset-single-char">
13146            —
13147          </div>
13148          <div data-component="char-set__char" class="charset-single-char">
13149            •
13150          </div>
13151          <div data-component="char-set__char" class="charset-single-char">
13152            «
13153          </div>
13154          <div data-component="char-set__char" class="charset-single-char">
13155            »
13156          </div>
13157          <div data-component="char-set__char" class="charset-single-char">
13158            )
13159          </div>
13160          <div data-component="char-set__char" class="charset-single-char">
13161            ]
13162          </div>
13163          <div data-component="char-set__char" class="charset-single-char">
13164            }
13165          </div>
13166          <div data-component="char-set__char" class="charset-single-char">
13167            !
13168          </div>
13169          <div data-component="char-set__char" class="charset-single-char">
13170            ¡
13171          </div>
13172          <div data-component="char-set__char" class="charset-single-char">
13173            ?
13174          </div>
13175          <div data-component="char-set__char" class="charset-single-char">
13176            ¿
13177          </div>
13178          <div data-component="char-set__char" class="charset-single-char">
13179            /
13180          </div>
13181          <div data-component="char-set__char" class="charset-single-char">
13182            '
13183          </div>
13184          <div data-component="char-set__char" class="charset-single-char">
13185            "
13186          </div>
13187          <div data-component="char-set__char" class="charset-single-char">
13188            ʼ
13189          </div>
13190          <div data-component="char-set__char" class="charset-single-char">
13191            &
13192          </div>
13193          <div data-component="char-set__char" class="charset-single-char">
13194            @
13195          </div>
13196          <div data-component="char-set__char" class="charset-single-char">
13197            ©
13198          </div>
13199          <div data-component="char-set__char" class="charset-single-char">
13200            ℗
13201          </div>
13202          <div data-component="char-set__char" class="charset-single-char">
13203            ®
13204          </div>
13205          <div data-component="char-set__char" class="charset-single-char">
13206            ™
13207          </div>
13208          <div data-component="char-set__char" class="charset-single-char">
13209            ¶
13210          </div>
13211          <div data-component="char-set__char" class="charset-single-char">
13212            §
13213          </div>
13214          <div data-component="char-set__char" class="charset-single-char">
13215            †
13216          </div>
13217          <div data-component="char-set__char" class="charset-single-char">
13218            ‡
13219          </div>
13220          <div data-component="char-set__char" class="charset-single-char">
13221            *
13222          </div>
13223          <div data-component="char-set__char" class="charset-single-char">
13224            #
13225          </div>
13226          <div data-component="char-set__char" class="charset-single-char">
13227            №
13228          </div>
13229          <div data-component="char-set__char" class="charset-single-char">
13230            ∅
13231          </div>
13232          <div data-component="char-set__char" class="charset-single-char">
13233            +
13234          </div>
13235          <div data-component="char-set__char" class="charset-single-char">
13236            −
13237          </div>
13238          <div data-component="char-set__char" class="charset-single-char">
13239            ±
13240          </div>
13241          <div data-component="char-set__char" class="charset-single-char">
13242            ×
13243          </div>
13244          <div data-component="char-set__char" class="charset-single-char">
13245            ÷
13246          </div>
13247          <div data-component="char-set__char" class="charset-single-char">
13248            =
13249          </div>
13250          <div data-component="char-set__char" class="charset-single-char">
13251            °
13252          </div>
13253          <div data-component="char-set__char" class="charset-single-char">
13254            ≈
13255          </div>
13256          <div data-component="char-set__char" class="charset-single-char">
13257            ≠
13258          </div>
13259          <div data-component="char-set__char" class="charset-single-char">
13260            ≥
13261          </div>
13262          <div data-component="char-set__char" class="charset-single-char">
13263            ≤
13264          </div>
13265          <div data-component="char-set__char" class="charset-single-char">
13266            $
13267          </div>
13268          <div data-component="char-set__char" class="charset-single-char">
13269            ¢
13270          </div>
13271          <div data-component="char-set__char" class="charset-single-char">
13272            £
13273          </div>
13274          <div data-component="char-set__char" class="charset-single-char">
13275            ¤
13276          </div>
13277          <div data-component="char-set__char" class="charset-single-char">
13278            ¥
13279          </div>
13280          <div data-component="char-set__char" class="charset-single-char">
13281            €
13282          </div>
13283          <div data-component="char-set__char" class="charset-single-char">
13284            ₺
13285          </div>
13286          <div data-component="char-set__char" class="charset-single-char">
13287            ₿
13288          </div>
13289          <div data-component="char-set__char" class="charset-single-char">
13290            ₩
13291          </div>
13292          <div data-component="char-set__char" class="charset-single-char">
13293            ₮
13294          </div>
13295          <div data-component="char-set__char" class="charset-single-char">
13296            ₴
13297          </div>
13298          <div data-component="char-set__char" class="charset-single-char">
13299            ₸
13300          </div>
13301          <div data-component="char-set__char" class="charset-single-char">
13302            ₹
13303          </div>
13304          <div data-component="char-set__char" class="charset-single-char">
13305            ₽
13306          </div>
13307          <div data-component="char-set__char" class="charset-single-char">
13308            ↑
13309          </div>
13310          <div data-component="char-set__char" class="charset-single-char">
13311            ↗
13312          </div>
13313          <div data-component="char-set__char" class="charset-single-char">
13314            →
13315          </div>
13316          <div data-component="char-set__char" class="charset-single-char">
13317            ↘
13318          </div>
13319          <div data-component="char-set__char" class="charset-single-char">
13320            ↓
13321          </div>
13322          <div data-component="char-set__char" class="charset-single-char">
13323            ↙
13324          </div>
13325          <div data-component="char-set__char" class="charset-single-char">
13326            ←
13327          </div>
13328          <div data-component="char-set__char" class="charset-single-char">
13329            ↖
13330          </div>
13331          <div data-component="char-set__char" class="charset-single-char">
13332            ↔
13333          </div>
13334          <div data-component="char-set__char" class="charset-single-char">
13335            ↕
13336          </div>
13337          <div data-component="char-set__char" class="charset-single-char">
13338            ↩
13339          </div>
13340          <div data-component="char-set__char" class="charset-single-char">
13341            ↪
13342          </div>
13343          <div data-component="char-set__char" class="charset-single-char">
13344            ↰
13345          </div>
13346          <div data-component="char-set__char" class="charset-single-char">
13347            ↱
13348          </div>
13349          <div data-component="char-set__char" class="charset-single-char">
13350            ↲
13351          </div>
13352          <div data-component="char-set__char" class="charset-single-char">
13353            ↳
13354          </div>
13355          <div data-component="char-set__char" class="charset-single-char">
13356            ↴
13357          </div>
13358          <div data-component="char-set__char" class="charset-single-char">
13359            ⬐
13360          </div>
13361          <div data-component="char-set__char" class="charset-single-char">
13362            ⇅
13363          </div>
13364          <div data-component="char-set__char" class="charset-single-char">
13365            ↻
13366          </div>
13367        </div>
13368      </div>
13369    </div>
13370  </div>
13371  <!-- End of Charset Section -->
13372  <!-- Start of one single Charset Section -->
13373  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Latin" data-char-set-subset="Alternate Characters">
13374    <div class="flex flex-row justify-between">
13375      <div class="">Alternate Characters</div>
13376      <div data-component="char-set__subset-size" class=""></div>
13377    </div>
13378    <div>
13379      <div class="character-set-section mt-4">
13380        <div class="character-set-container text-rg">
13381          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13382            g
13383          </div>
13384          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13385            1
13386          </div>
13387
13388          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13389            ↑
13390          </div>
13391          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13392            ↗
13393          </div>
13394          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13395            →
13396          </div>
13397          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13398            ↘
13399          </div>
13400          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13401            ↓
13402          </div>
13403          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13404            ↙
13405          </div>
13406          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13407            ←
13408          </div>
13409          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13410            ↖
13411          </div>
13412
13413          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13414            .
13415          </div>
13416
13417          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13418            ,
13419          </div>
13420
13421          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13422            !
13423          </div>
13424
13425          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13426            ?
13427          </div>
13428
13429          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13430            i
13431          </div>
13432
13433          <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow">
13434            j
13435          </div>
13436        </div>
13437      </div>
13438    </div>
13439  </div>
13440</div>
13441
13442  <!-- Start of one single Charset Section -->
13443<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="cyrillic">
13444  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Uppercase">
13445    <div class="flex flex-row justify-between">
13446      <div class="">Uppercase</div>
13447      <div data-component="char-set__subset-size" class=""></div>
13448    </div>
13449    <div>
13450      <div class="character-set-section mt-4">
13451        <div class="character-set-container text-rg">
13452          <div data-component="char-set__char" class="charset-single-char">
13453            А
13454          </div>
13455          <div data-component="char-set__char" class="charset-single-char">
13456            Б
13457          </div>
13458          <div data-component="char-set__char" class="charset-single-char">
13459            В
13460          </div>
13461          <div data-component="char-set__char" class="charset-single-char">
13462            Г
13463          </div>
13464          <div data-component="char-set__char" class="charset-single-char">
13465            Ѓ
13466          </div>
13467          <div data-component="char-set__char" class="charset-single-char">
13468            Ґ
13469          </div>
13470          <div data-component="char-set__char" class="charset-single-char">
13471            Д
13472          </div>
13473          <div data-component="char-set__char" class="charset-single-char">
13474            Е
13475          </div>
13476          <div data-component="char-set__char" class="charset-single-char">
13477            Ѐ
13478          </div>
13479          <div data-component="char-set__char" class="charset-single-char">
13480            Ё
13481          </div>
13482          <div data-component="char-set__char" class="charset-single-char">
13483            Ж
13484          </div>
13485          <div data-component="char-set__char" class="charset-single-char">
13486            З
13487          </div>
13488          <div data-component="char-set__char" class="charset-single-char">
13489            И
13490          </div>
13491          <div data-component="char-set__char" class="charset-single-char">
13492            Й
13493          </div>
13494          <div data-component="char-set__char" class="charset-single-char">
13495            Ѝ
13496          </div>
13497          <div data-component="char-set__char" class="charset-single-char">
13498            К
13499          </div>
13500          <div data-component="char-set__char" class="charset-single-char">
13501            Ќ
13502          </div>
13503          <div data-component="char-set__char" class="charset-single-char">
13504            Л
13505          </div>
13506          <div data-component="char-set__char" class="charset-single-char">
13507            М
13508          </div>
13509          <div data-component="char-set__char" class="charset-single-char">
13510            Н
13511          </div>
13512          <div data-component="char-set__char" class="charset-single-char">
13513            О
13514          </div>
13515          <div data-component="char-set__char" class="charset-single-char">
13516            П
13517          </div>
13518          <div data-component="char-set__char" class="charset-single-char">
13519            Р
13520          </div>
13521          <div data-component="char-set__char" class="charset-single-char">
13522            С
13523          </div>
13524          <div data-component="char-set__char" class="charset-single-char">
13525            Т
13526          </div>
13527          <div data-component="char-set__char" class="charset-single-char">
13528            У
13529          </div>
13530          <div data-component="char-set__char" class="charset-single-char">
13531            Ў
13532          </div>
13533          <div data-component="char-set__char" class="charset-single-char">
13534            Ф
13535          </div>
13536          <div data-component="char-set__char" class="charset-single-char">
13537            Х
13538          </div>
13539          <div data-component="char-set__char" class="charset-single-char">
13540            Ч
13541          </div>
13542          <div data-component="char-set__char" class="charset-single-char">
13543            Ц
13544          </div>
13545          <div data-component="char-set__char" class="charset-single-char">
13546            Ш
13547          </div>
13548          <div data-component="char-set__char" class="charset-single-char">
13549            Щ
13550          </div>
13551          <div data-component="char-set__char" class="charset-single-char">
13552            Џ
13553          </div>
13554          <div data-component="char-set__char" class="charset-single-char">
13555            Ь
13556          </div>
13557          <div data-component="char-set__char" class="charset-single-char">
13558            Ъ
13559          </div>
13560          <div data-component="char-set__char" class="charset-single-char">
13561            Ы
13562          </div>
13563          <div data-component="char-set__char" class="charset-single-char">
13564            Љ
13565          </div>
13566          <div data-component="char-set__char" class="charset-single-char">
13567            Њ
13568          </div>
13569          <div data-component="char-set__char" class="charset-single-char">
13570            Ѕ
13571          </div>
13572          <div data-component="char-set__char" class="charset-single-char">
13573            Є
13574          </div>
13575          <div data-component="char-set__char" class="charset-single-char">
13576            Э
13577          </div>
13578          <div data-component="char-set__char" class="charset-single-char">
13579            І
13580          </div>
13581          <div data-component="char-set__char" class="charset-single-char">
13582            Ї
13583          </div>
13584          <div data-component="char-set__char" class="charset-single-char">
13585            Ј
13586          </div>
13587          <div data-component="char-set__char" class="charset-single-char">
13588            Ћ
13589          </div>
13590          <div data-component="char-set__char" class="charset-single-char">
13591            Ю
13592          </div>
13593          <div data-component="char-set__char" class="charset-single-char">
13594            Я
13595          </div>
13596          <div data-component="char-set__char" class="charset-single-char">
13597            Ђ
13598          </div>
13599          <div data-component="char-set__char" class="charset-single-char">
13600            Ѣ
13601          </div>
13602          <div data-component="char-set__char" class="charset-single-char">
13603            Ѳ
13604          </div>
13605          <div data-component="char-set__char" class="charset-single-char">
13606            Ñ´
13607          </div>
13608          <div data-component="char-set__char" class="charset-single-char">
13609            Ғ
13610          </div>
13611          <div data-component="char-set__char" class="charset-single-char">
13612            Җ
13613          </div>
13614          <div data-component="char-set__char" class="charset-single-char">
13615            Ҙ
13616          </div>
13617          <div data-component="char-set__char" class="charset-single-char">
13618            Қ
13619          </div>
13620          <div data-component="char-set__char" class="charset-single-char">
13621            Ò 
13622          </div>
13623          <div data-component="char-set__char" class="charset-single-char">
13624            Ò¢
13625          </div>
13626          <div data-component="char-set__char" class="charset-single-char">
13627            Òª
13628          </div>
13629          <div data-component="char-set__char" class="charset-single-char">
13630            Ò®
13631          </div>
13632          <div data-component="char-set__char" class="charset-single-char">
13633            Ò°
13634          </div>
13635          <div data-component="char-set__char" class="charset-single-char">
13636            Ò²
13637          </div>
13638          <div data-component="char-set__char" class="charset-single-char">
13639            Ò¶
13640          </div>
13641          <div data-component="char-set__char" class="charset-single-char">
13642            Òº
13643          </div>
13644          <div data-component="char-set__char" class="charset-single-char">
13645            Ӏ
13646          </div>
13647          <div data-component="char-set__char" class="charset-single-char">
13648            Ӂ
13649          </div>
13650          <div data-component="char-set__char" class="charset-single-char">
13651            Ӑ
13652          </div>
13653          <div data-component="char-set__char" class="charset-single-char">
13654            Ӕ
13655          </div>
13656          <div data-component="char-set__char" class="charset-single-char">
13657            Ӗ
13658          </div>
13659          <div data-component="char-set__char" class="charset-single-char">
13660            Ә
13661          </div>
13662          <div data-component="char-set__char" class="charset-single-char">
13663            Ó¢
13664          </div>
13665          <div data-component="char-set__char" class="charset-single-char">
13666            Ó¦
13667          </div>
13668          <div data-component="char-set__char" class="charset-single-char">
13669            Ó¨
13670          </div>
13671          <div data-component="char-set__char" class="charset-single-char">
13672            Ó®
13673          </div>
13674          <div data-component="char-set__char" class="charset-single-char">
13675            Ó²
13676          </div>
13677        </div>
13678      </div>
13679    </div>
13680  </div>
13681  <!-- End of Charset Section -->
13682  <!-- Start of one single Charset Section -->
13683  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Lowercase">
13684    <div class="flex flex-row justify-between">
13685      <div class="">Lowercase</div>
13686      <div data-component="char-set__subset-size" class=""></div>
13687    </div>
13688    <div>
13689      <div class="character-set-section mt-4">
13690        <div class="character-set-container text-rg">
13691          <div data-component="char-set__char" class="charset-single-char">
13692            а
13693          </div>
13694          <div data-component="char-set__char" class="charset-single-char">
13695            б
13696          </div>
13697          <div data-component="char-set__char" class="charset-single-char">
13698            в
13699          </div>
13700          <div data-component="char-set__char" class="charset-single-char">
13701            г
13702          </div>
13703          <div data-component="char-set__char" class="charset-single-char">
13704            ѓ
13705          </div>
13706          <div data-comp
13706onent="char-set__char" class="charset-single-char">
13707            ґ
13708          </div>
13709          <div data-component="char-set__char" class="charset-single-char">
13710            д
13711          </div>
13712          <div data-component="char-set__char" class="charset-single-char">
13713            е
13714          </div>
13715          <div data-component="char-set__char" class="charset-single-char">
13716            ѐ
13717          </div>
13718          <div data-component="char-set__char" class="charset-single-char">
13719            ё
13720          </div>
13721          <div data-component="char-set__char" class="charset-single-char">
13722            ж
13723          </div>
13724          <div data-component="char-set__char" class="charset-single-char">
13725            з
13726          </div>
13727          <div data-component="char-set__char" class="charset-single-char">
13728            и
13729          </div>
13730          <div data-component="char-set__char" class="charset-single-char">
13731            й
13732          </div>
13733          <div data-component="char-set__char" class="charset-single-char">
13734            ѝ
13735          </div>
13736          <div data-component="char-set__char" class="charset-single-char">
13737            к
13738          </div>
13739          <div data-component="char-set__char" class="charset-single-char">
13740            ќ
13741          </div>
13742          <div data-component="char-set__char" class="charset-single-char">
13743            л
13744          </div>
13745          <div data-component="char-set__char" class="charset-single-char">
13746            м
13747          </div>
13748          <div data-component="char-set__char" class="charset-single-char">
13749            н
13750          </div>
13751          <div data-component="char-set__char" class="charset-single-char">
13752            о
13753          </div>
13754          <div data-component="char-set__char" class="charset-single-char">
13755            п
13756          </div>
13757          <div data-component="char-set__char" class="charset-single-char">
13758            р
13759          </div>
13760          <div data-component="char-set__char" class="charset-single-char">
13761            с
13762          </div>
13763          <div data-component="char-set__char" class="charset-single-char">
13764            т
13765          </div>
13766          <div data-component="char-set__char" class="charset-single-char">
13767            у
13768          </div>
13769          <div data-component="char-set__char" class="charset-single-char">
13770            ў
13771          </div>
13772          <div data-component="char-set__char" class="charset-single-char">
13773            ф
13774          </div>
13775          <div data-component="char-set__char" class="charset-single-char">
13776            х
13777          </div>
13778          <div data-component="char-set__char" class="charset-single-char">
13779            ч
13780          </div>
13781          <div data-component="char-set__char" class="charset-single-char">
13782            ц
13783          </div>
13784          <div data-component="char-set__char" class="charset-single-char">
13785            ш
13786          </div>
13787          <div data-component="char-set__char" class="charset-single-char">
13788            щ
13789          </div>
13790          <div data-component="char-set__char" class="charset-single-char">
13791            џ
13792          </div>
13793          <div data-component="char-set__char" class="charset-single-char">
13794            ь
13795          </div>
13796          <div data-component="char-set__char" class="charset-single-char">
13797            ъ
13798          </div>
13799          <div data-component="char-set__char" class="charset-single-char">
13800            ы
13801          </div>
13802          <div data-component="char-set__char" class="charset-single-char">
13803            љ
13804          </div>
13805          <div data-component="char-set__char" class="charset-single-char">
13806            њ
13807          </div>
13808          <div data-component="char-set__char" class="charset-single-char">
13809            ѕ
13810          </div>
13811          <div data-component="char-set__char" class="charset-single-char">
13812            є
13813          </div>
13814          <div data-component="char-set__char" class="charset-single-char">
13815            э
13816          </div>
13817          <div data-component="char-set__char" class="charset-single-char">
13818            і
13819          </div>
13820          <div data-component="char-set__char" class="charset-single-char">
13821            ї
13822          </div>
13823          <div data-component="char-set__char" class="charset-single-char">
13824            ј
13825          </div>
13826          <div data-component="char-set__char" class="charset-single-char">
13827            ћ
13828          </div>
13829          <div data-component="char-set__char" class="charset-single-char">
13830            ю
13831          </div>
13832          <div data-component="char-set__char" class="charset-single-char">
13833            я
13834          </div>
13835          <div data-component="char-set__char" class="charset-single-char">
13836            ђ
13837          </div>
13838          <div data-component="char-set__char" class="charset-single-char">
13839            ѣ
13840          </div>
13841          <div data-component="char-set__char" class="charset-single-char">
13842            ѳ
13843          </div>
13844          <div data-component="char-set__char" class="charset-single-char">
13845            ѵ
13846          </div>
13847          <div data-component="char-set__char" class="charset-single-char">
13848            ғ
13849          </div>
13850          <div data-component="char-set__char" class="charset-single-char">
13851            җ
13852          </div>
13853          <div data-component="char-set__char" class="charset-single-char">
13854            ҙ
13855          </div>
13856          <div data-component="char-set__char" class="charset-single-char">
13857            қ
13858          </div>
13859          <div data-component="char-set__char" class="charset-single-char">
13860            Ò¡
13861          </div>
13862          <div data-component="char-set__char" class="charset-single-char">
13863            Ò£
13864          </div>
13865          <div data-component="char-set__char" class="charset-single-char">
13866            Ò«
13867          </div>
13868          <div data-component="char-set__char" class="charset-single-char">
13869            Ò¯
13870          </div>
13871          <div data-component="char-set__char" class="charset-single-char">
13872            Ò±
13873          </div>
13874          <div data-component="char-set__char" class="charset-single-char">
13875            Ò³
13876          </div>
13877          <div data-component="char-set__char" class="charset-single-char">
13878            Ò·
13879          </div>
13880          <div data-component="char-set__char" class="charset-single-char">
13881            Ò»
13882          </div>
13883          <div data-component="char-set__char" class="charset-single-char">
13884            ӏ
13885          </div>
13886          <div data-component="char-set__char" class="charset-single-char">
13887            ӂ
13888          </div>
13889          <div data-component="char-set__char" class="charset-single-char">
13890            ӑ
13891          </div>
13892          <div data-component="char-set__char" class="charset-single-char">
13893            ӕ
13894          </div>
13895          <div data-component="char-set__char" class="charset-single-char">
13896            ӗ
13897          </div>
13898          <div data-component="char-set__char" class="charset-single-char">
13899            ә
13900          </div>
13901          <div data-component="char-set__char" class="charset-single-char">
13902            Ó£
13903          </div>
13904          <div data-component="char-set__char" class="charset-single-char">
13905            Ó§
13906          </div>
13907          <div data-component="char-set__char" class="charset-single-char">
13908            Ó©
13909          </div>
13910          <div data-component="char-set__char" class="charset-single-char">
13911            Ó¯
13912          </div>
13913          <div data-component="char-set__char" class="charset-single-char">
13914            Ó³
13915          </div>
13916        </div>
13917      </div>
13918    </div>
13919  </div>
13920  <!-- End of Charset Section -->
13921  <!-- Start of one single Charset Section -->
13922  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Bulgarian Alternates">
13923    <div class="flex flex-row justify-between">
13924      <div class="">Bulgarian Alternates</div>
13925      <div data-component="char-set__subset-size" class=""></div>
13926    </div>
13927    <div>
13928      <div class="character-set-section mt-4">
13929        <div class="character-set-container text-rg">
13930          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13931            Д
13932          </div>
13933          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13934            Л
13935          </div>
13936
13937          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13938            в
13939          </div>
13940          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13941            г
13942          </div>
13943          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13944            д
13945          </div>
13946          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13947            ж
13948          </div>
13949          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13950            и
13951          </div>
13952          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13953            л
13954          </div>
13955          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13956            ш
13957          </div>
13958          <div data-component="char-set__char" class="charset-single-char" lang="bg">
13959            ю
13960          </div>
13961        </div>
13962      </div>
13963    </div>
13964  </div>
13965  <!-- End of Charset Section -->
13966  <!-- Start of one single Charset Section -->
13967  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Serbian / Macedonian Alternate">
13968    <div class="flex flex-row justify-between">
13969      <div class="">Serbian / Macedonian Alternate</div>
13970      <div data-component="char-set__subset-size" class=""></div>
13971    </div>
13972    <div>
13973      <div class="character-set-section mt-4">
13974        <div class="character-set-container text-rg">
13975          <div data-component="char-set__char" class="charset-single-char" lang="sr">
13976            б
13977          </div>
13978        </div>
13979      </div>
13980    </div>
13981  </div>
13982
13983  <!-- End of Charset Section -->
13984  <!-- Start of one single Charset Section -->
13985  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Ukrainian Alternate">
13986    <div class="flex flex-row justify-between">
13987      <div class="">Ukrainian Alternate</div>
13988      <div data-component="char-set__subset-size" class=""></div>
13989    </div>
13990    <div>
13991      <div class="character-set-section mt-4">
13992        <div class="character-set-container text-rg">
13993          <div data-component="char-set__char" class="charset-single-char" lang="uk">
13994            Ї
13995          </div>
13996        </div>
13997      </div>
13998    </div>
13999  </div>
14000  <!-- End of Charset Section -->
14001</div>
14002
14003  <!-- Start of one single Charset Section -->
14004<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="greek">
14005  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Greek" data-char-set-subset="Uppercase">
14006    <div class="flex flex-row justify-between">
14007      <div class="">Uppercase</div>
14008      <div data-component="char-set__subset-size" class=""></div>
14009    </div>
14010    <div>
14011      <div class="character-set-section mt-4">
14012        <div class="character-set-container text-rg">
14013          <div data-component="char-set__char" class="charset-single-char">
14014            Α
14015          </div>
14016          <div data-component="char-set__char" class="charset-single-char">
14017            Β
14018          </div>
14019          <div data-component="char-set__char" class="charset-single-char">
14020            Γ
14021          </div>
14022          <div data-component="char-set__char" class="charset-single-char">
14023            Δ
14024          </div>
14025          <div data-component="char-set__char" class="charset-single-char">
14026            Ε
14027          </div>
14028          <div data-component="char-set__char" class="charset-single-char">
14029            Ζ
14030          </div>
14031          <div data-component="char-set__char" class="charset-single-char">
14032            Η
14033          </div>
14034          <div data-component="char-set__char" class="charset-single-char">
14035            Θ
14036          </div>
14037          <div data-component="char-set__char" class="charset-single-char">
14038            Ι
14039          </div>
14040          <div data-component="char-set__char" class="charset-single-char">
14041            Κ
14042          </div>
14043          <div data-component="char-set__char" class="charset-single-char">
14044            Λ
14045          </div>
14046          <div data-component="char-set__char" class="charset-single-char">
14047            Μ
14048          </div>
14049          <div data-component="char-set__char" class="charset-single-char">
14050            Ν
14051          </div>
14052          <div data-component="char-set__char" class="charset-single-char">
14053            Ξ
14054          </div>
14055          <div data-component="char-set__char" class="charset-single-char">
14056            Ο
14057          </div>
14058          <div data-component="char-set__char" class="charset-single-char">
14059            Π
14060          </div>
14061          <div data-component="char-set__char" class="charset-single-char">
14062            Ρ
14063          </div>
14064          <div data-component="char-set__char" class="charset-single-char">
14065            Σ
14066          </div>
14067          <div data-component="char-set__char" class="charset-single-char">
14068            Τ
14069          </div>
14070          <div data-component="char-set__char" class="charset-single-char">
14071            Υ
14072          </div>
14073          <div data-component="char-set__char" class="charset-single-char">
14074            Φ
14075          </div>
14076          <div data-component="char-set__char" class="charset-single-char">
14077            Χ
14078          </div>
14079          <div data-component="char-set__char" class="charset-single-char">
14080            Ψ
14081          </div>
14082          <div data-component="char-set__char" class="charset-single-char">
14083            Ω
14084          </div>
14085        </div>
14086      </div>
14087    </div>
14088  </div>
14089  <!-- End of Charset Section -->
14090  <!-- Start of one single Charset Section -->
14091  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Greek" data-char-set-subset="Lowercase">
14092    <div class="flex flex-row justify-between">
14093      <div class="">Lowercase</div>
14094      <div data-component="char-set__subset-size" class=""></div>
14095    </div>
14096    <div>
14097      <div class="character-set-section mt-4">
14098        <div class="character-set-container text-rg">
14099          <div data-component="char-set__char" class="charset-single-char">
14100            α
14101          </div>
14102          <div data-component="char-set__char" class="charset-single-char">
14103            β
14104          </div>
14105          <div data-component="char-set__char" class="charset-single-char">
14106            γ
14107          </div>
14108          <div data-component="char-set__char" class="charset-single-char">
14109            δ
14110          </div>
14111          <div data-component="char-set__char" class="charset-single-char">
14112            ε
14113          </div>
14114          <div data-component="char-set__char" class="charset-single-char">
14115            ζ
14116          </div>
14117          <div data-component="char-set__char" class="charset-single-char">
14118            η
14119          </div>
14120          <div data-component="char-set__char" class="charset-single-char">
14121            θ
14122          </div>
14123          <div data-component="char-set__char" class="charset-single-char">
14124            ι
14125          </div>
14126          <div data-component="char-set__char" class="charset-single-char">
14127            κ
14128          </div>
14129          <div data-component="char-set__char" class="charset-single-char">
14130            λ
14131          </div>
14132          <div data-component="char-set__char" class="charset-single-char">
14133            μ
14134          </div>
14135          <div data-component="char-set__char" class="charset-single-char">
14136            ν
14137          </div>
14138          <div data-component="char-set__char" class="charset-single-char">
14139            ξ
14140          </div>
14141          <div data-component="char-set__char" class="charset-single-char">
14142            ο
14143          </div>
14144          <div data-component="char-set__char" class="charset-single-char">
14145            π
14146          </div>
14147          <div data-component="char-set__char" class="charset-single-char">
14148            ρ
14149          </div>
14150          <div data-component="char-set__char" class="charset-single-char">
14151            ς
14152          </div>
14153          <div data-component="char-set__char" class="charset-single-char">
14154            σ
14155          </div>
14156          <div data-component="char-set__char" class="charset-single-char">
14157            τ
14158          </div>
14159          <div data-component="char-set__char" class="charset-single-char">
14160            υ
14161          </div>
14162          <div data-component="char-set__char" class="charset-single-char">
14163            φ
14164          </div>
14165          <div data-component="char-set__char" class="charset-single-char">
14166            χ
14167          </div>
14168          <div data-component="char-set__char" class="charset-single-char">
14169            ψ
14170          </div>
14171          <div data-component="char-set__char" class="charset-single-char">
14172            ω
14173          </div>
14174        </div>
14175      </div>
14176    </div>
14177  </div>
14178  <!-- End of Charset Section -->
14179  <!-- Start of one single Charset Section -->
14180  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Greek" data-char-set-subset="Diacritics">
14181    <div class="flex flex-row justify-between">
14182      <div class="">Diacritics</div>
14183      <div data-component="char-set__subset-size" class=""></div>
14184    </div>
14185    <div>
14186      <div class="character-set-section mt-4">
14187        <div class="character-set-container text-rg">
14188          <div data-component="char-set__char" class="charset-single-char">
14189            Ά
14190          </div>
14191          <div data-component="char-set__char" class="charset-single-char">
14192            Έ
14193          </div>
14194          <div data-component="char-set__char" class="charset-single-char">
14195            Ή
14196          </div>
14197          <div data-component="char-set__char" class="charset-single-char">
14198            Ί
14199          </div>
14200          <div data-component="char-set__char" class="charset-single-char">
14201            Ό
14202          </div>
14203          <div data-component="char-set__char" class="charset-single-char">
14204            Ύ
14205          </div>
14206          <div data-component="char-set__char" class="charset-single-char">
14207            Ώ
14208          </div>
14209          <div data-component="char-set__char" class="charset-single-char">
14210            Ϊ
14211          </div>
14212          <div data-component="char-set__char" class="charset-single-char">
14213            Ϋ
14214          </div>
14215          <div data-component="char-set__char" class="charset-single-char">
14216            ί
14217          </div>
14218          <div data-component="char-set__char" class="charset-single-char">
14219            ϊ
14220          </div>
14221          <div data-component="char-set__char" class="charset-single-char">
14222            ΐ
14223          </div>
14224          <div data-component="char-set__char" class="charset-single-char">
14225            ύ
14226          </div>
14227          <div data-component="char-set__char" class="charset-single-char">
14228            ϋ
14229          </div>
14230          <div data-component="char-set__char" class="charset-single-char">
14231            ΰ
14232          </div>
14233          <div data-component="char-set__char" class="charset-single-char">
14234            ό
14235          </div>
14236          <div data-component="char-set__char" class="charset-single-char">
14237            ώ
14238          </div>
14239          <div data-component="char-set__char" class="charset-single-char">
14240            ά
14241          </div>
14242          <div data-component="char-set__char" class="charset-single-char">
14243            έ
14244          </div>
14245          <div data-component="char-set__char" class="charset-single-char">
14246            ή
14247          </div>
14248        </div>
14249      </div>
14250    </div>
14251  </div>
14252  <!-- End of Charset Section -->
14253</div>
14254
14255  <!-- Start of one single Charset Section -->
14256<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="vietnamese">
14257  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Vietnamese" data-char-set-subset="Uppercase">
14258    <div class="flex flex-row justify-between">
14259      <div class="">Uppercase</div>
14260      <div data-component="char-set__subset-size" class=""></div>
14261    </div>
14262    <div>
14263      <div class="character-set-section mt-4">
14264        <div class="character-set-container text-rg">
14265          <div data-component="char-set__char" class="charset-single-char">
14266            Á
14267          </div>
14268          <div data-component="char-set__char" class="charset-single-char">
14269            Ă
14270          </div>
14271          <div data-component="char-set__char" class="charset-single-char">
14272            Â
14273          </div>
14274          <div data-component="char-set__char" class="charset-single-char">
14275            À
14276          </div>
14277          <div data-component="char-set__char" class="charset-single-char">
14278            Ã
14279          </div>
14280          <div data-component="char-set__char" class="charset-single-char">
14281            Ắ
14282          </div>
14283          <div data-component="char-set__char" class="charset-single-char">
14284            Ặ
14285          </div>
14286          <div data-component="char-set__char" class="charset-single-char">
14287            Ằ
14288          </div>
14289          <div data-component="char-set__char" class="charset-single-char">
14290            Ẳ
14291          </div>
14292          <div data-component="char-set__char" class="charset-single-char">
14293            Ẵ
14294          </div>
14295          <div data-component="char-set__char" class="charset-single-char">
14296            Ấ
14297          </div>
14298          <div data-component="char-set__char" class="charset-single-char">
14299            Ậ
14300          </div>
14301          <div data-component="char-set__char" class="charset-single-char">
14302            Ầ
14303          </div>
14304          <div data-component="char-set__char" class="charset-single-char">
14305            Ẩ
14306          </div>
14307          <div data-component="char-set__char" class="charset-single-char">
14308            Ẫ
14309          </div>
14310          <div data-component="char-set__char" class="charset-single-char">
14311            Ạ
14312          </div>
14313          <div data-component="char-set__char" class="charset-single-char">
14314            Ả
14315          </div>
14316          <div data-component="char-set__char" class="charset-single-char">
14317            Đ
14318          </div>
14319          <div data-component="char-set__char" class="charset-single-char">
14320            É
14321          </div>
14322          <div data-component="char-set__char" class="charset-single-char">
14323            Ê
14324          </div>
14325          <div data-component="char-set__char" class="charset-single-char">
14326            È
14327          </div>
14328          <div data-component="char-set__char" class="charset-single-char">
14329            Ế
14330          </div>
14331          <div data-component="char-set__char" class="charset-single-char">
14332            Ệ
14333          </div>
14334          <div data-component="char-set__char" class="charset-single-char">
14335            Ề
14336          </div>
14337
14338          <div data-component="char-set__char" class="charset-single-char">
14339            Ể
14340          </div>
14341          <div data-component="char-set__char" class="charset-single-char">
14342            Ễ
14343          </div>
14344          <div data-component="char-set__char" class="charset-single-char">
14345            Ẹ
14346          </div>
14347          <div data-component="char-set__char" class="charset-single-char">
14348            Ẻ
14349          </div>
14350          <div data-component="char-set__char" class="charset-single-char">
14351            Ẽ
14352          </div>
14353          <div data-component="char-set__char" class="charset-single-char">
14354            Í
14355          </div>
14356          <div data-component="char-set__char" class="charset-single-char">
14357            Ì
14358          </div>
14359          <div data-component="char-set__char" class="charset-single-char">
14360            Ĩ
14361          </div>
14362          <div data-component="char-set__char" class="charset-single-char">
14363            Ị
14364          </div>
14365          <div data-component="char-set__char" class="charset-single-char">
14366            Ỉ
14367          </div>
14368          <div data-component="char-set__char" class="charset-single-char">
14369            Ó
14370          </div>
14371          <div data-component="char-set__char" class="charset-single-char">
14372            Ô
14373          </div>
14374          <div data-component="char-set__char" class="charset-single-char">
14375            Ò
14376          </div>
14377          <div data-component="char-set__char" class="charset-single-char">
14378            Õ
14379          </div>
14380          <div data-component="char-set__char" class="charset-single-char">
14381            Ố
14382          </div>
14383          <div data-component="char-set__char" class="charset-single-char">
14384            Ộ
14385          </div>
14386          <div data-component="char-set__char" class="charset-single-char">
14387            Ồ
14388          </div>
14389          <div data-component="char-set__char" class="charset-single-char">
14390            Ổ
14391          </div>
14392          <div data-component="char-set__char" class="charset-single-char">
14393            Ỗ
14394          </div>
14395          <div data-component="char-set__char" class="charset-single-char">
14396            Ọ
14397          </div>
14398          <div data-component="char-set__char" class="charset-single-char">
14399            Ỏ
14400          </div>
14401          <div data-component="char-set__char" class="charset-single-char">
14402            Æ 
14403          </div>
14404          <div data-component="char-set__char" class="charset-single-char">
14405            Ớ
14406          </div>
14407          <div data-component="char-set__char" class="charset-single-char">
14408            Ợ
14409          </div>
14410          <div data-component="char-set__char" class="charset-single-char">
14411            Ờ
14412          </div>
14413          <div data-component="char-set__char" class="charset-single-char">
14414            Ở
14415          </div>
14416          <div data-component="char-set__char" class="charset-single-char">
14417            á» 
14418          </div>
14419          <div data-component="char-set__char" class="charset-single-char">
14420            Ú
14421          </div>
14422          <div data-component="char-set__char" class="charset-single-char">
14423            Ù
14424          </div>
14425          <div data-component="char-set__char" class="charset-single-char">
14426            Ũ
14427          </div>
14428          <div data-component="char-set__char" class="charset-single-char">
14429            Ụ
14430          </div>
14431          <div data-component="char-set__char" class="charset-single-char">
14432            Ủ
14433          </div>
14434          <div data-component="char-set__char" class="charset-single-char">
14435            Ư
14436          </div>
14437          <div data-component="char-set__char" class="charset-single-char">
14438            Ứ
14439          </div>
14440          <div data-component="char-set__char" class="charset-single-char">
14441            á»°
14442          </div>
14443          <div data-component="char-set__char" class="charset-single-char">
14444            Ừ
14445          </div>
14446          <div data-component="char-set__char" class="charset-single-char">
14447            Ử
14448          </div>
14449          <div data-component="char-set__char" class="charset-single-char">
14450            á»®
14451          </div>
14452          <div data-component="char-set__char" class="charset-single-char">
14453            Ý
14454          </div>
14455          <div data-component="char-set__char" class="charset-single-char">
14456            Ỳ
14457          </div>
14458          <div data-component="char-set__char" class="charset-single-char">
14459            á»´
14460          </div>
14461          <div data-component="char-set__char" class="charset-single-char">
14462            á»¶
14463          </div>
14464          <div data-component="char-set__char" class="charset-single-char">
14465            Ỹ
14466          </div>
14467        </div>
14468      </div>
14469    </div>
14470  </div>
14471  <!-- End of Charset Section -->
14472  <!-- Start of one single Charset Section -->
14473  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Vietnamese" data-char-set-subset="Lowercase">
14474    <div class="flex flex-row justify-between">
14475      <div class="">Lowercase</div>
14476      <div data-component="char-set__subset-size" class=""></div>
14477    </div>
14478    <div>
14479      <div class="character-set-section mt-4">
14480        <div class="character-set-container text-rg">
14481          <div data-component="char-set__char" class="charset-single-char">
14482            á
14483          </div>
14484          <div data-component="char-set__char" class="charset-single-char">
14485            ă
14486          </div>
14487          <div data-component="char-set__char" class="charset-single-char">
14488            â
14489          </div>
14490          <div data-component="char-set__char" class="charset-single-char">
14491            à
14492          </div>
14493          <div data-component="char-set__char" class="charset-single-char">
14494            ã
14495          </div>
14496          <div data-component="char-set__char" class="charset-single-char">
14497            ắ
14498          </div>
14499          <div data-component="char-set__char" class="charset-single-char">
14500            ặ
14501          </div>
14502          <div data-component="char-set__char" class="charset-single-char">
14503            ằ
14504          </div>
14505          <div data-component="char-set__char" class="charset-single-char">
14506            ẳ
14507          </div>
14508          <div data-component="char-set__char" class="charset-single-char">
14509            ẵ
14510          </div>
14511          <div data-component="char-set__char" class="charset-single-char">
14512            ấ
14513          </div>
14514          <div data-component="char-set__char" class="charset-single-char">
14515            ậ
14516          </div>
14517          <div data-component="char-set__char" class="charset-single-char">
14518            ầ
14519          </div>
14520          <div data-component="char-set__char" class="charset-single-char">
14521            ẩ
14522          </div>
14523          <div data-component="char-set__char" class="charset-single-char">
14524            ẫ
14525          </div>
14526          <div data-component="char-set__char" class="charset-single-char">
14527            ạ
14528          </div>
14529          <div data-component="char-set__char" class="charset-single-char">
14530            ả
14531          </div>
14532          <div data-component="char-set__char" class="charset-single-char">
14533            đ
14534          </div>
14535          <div data-component="char-set__char" class="charset-single-char">
14536            é
14537          </div>
14538          <div data-component="char-set__char" class="charset-single-char">
14539            ê
14540          </div>
14541          <div data-component="char-set__char" class="charset-single-char">
14542            è
14543          </div>
14544          <div data-component="char-set__char" class="charset-single-char">
14545            ế
14546          </div>
14547          <div data-component="char-set__char" class="charset-single-char">
14548            ệ
14549          </div>
14550          <div data-component="char-set__char" class="charset-single-char">
14551            ề
14552          </div>
14553          <div data-component="char-set__char" class="charset-single-char">
14554            ể
14555          </div>
14556          <div data-component="char-set__char" class="charset-single-char">
14557            ễ
14558          </div>
14559          <div data-component="char-set__char" class="charset-single-char">
14560            ẹ
14561          </div>
14562          <div data-component="char-set__char" class="charset-single-char">
14563            ẻ
14564          </div>
14565          <div data-component="char-set__char" class="charset-single-char">
14566            ẽ
14567          </div>
14568          <div data-component="char-set__char" class="charset-single-char">
14569            í
14570          </div>
14571          <div data-component="char-set__char" class="charset-single-char">
14572            ì
14573          </div>
14574          <div data-component="char-set__char" class="charset-single-char">
14575            Ä©
14576          </div>
14577          <div data-component="char-set__char" class="charset-single-char">
14578            ị
14579          </div>
14580          <div data-component="char-set__char" class="charset-single-char">
14581            ỉ
14582          </div>
14583          <div data-component="char-set__char" class="charset-single-char">
14584            ó
14585          </div>
14586          <div data-component="char-set__char" class="charset-single-char">
14587            ô
14588          </div>
14589          <div data-component="char-set__char" class="charset-single-char">
14590            ò
14591          </div>
14592          <div data-component="char-set__char" class="charset-single-char">
14593            õ
14594          </div>
14595          <div data-component="char-set__char" class="charset-single-char">
14596            ố
14597          </div>
14598          <div data-component="char-set__char" class="charset-single-char">
14599            ộ
14600          </div>
14601          <div data-component="char-set__char" class="charset-single-char">
14602            ồ
14603          </div>
14604          <div data-component="char-set__char" class="charset-single-char">
14605            ổ
14606          </div>
14607          <div data-component="char-set__char" class="charset-single-char">
14608            ỗ
14609          </div>
14610          <div data-component="char-set__char" class="charset-single-char">
14611            ọ
14612          </div>
14613          <div data-component="char-set__char" class="charset-single-char">
14614            ỏ
14615          </div>
14616          <div data-component="char-set__char" class="charset-single-char">
14617            Æ¡
14618          </div>
14619          <div data-component="char-set__char" class="charset-single-char">
14620            ớ
14621          </div>
14622          <div data-component="char-set__char" class="charset-single-char">
14623            ợ
14624          </div>
14625          <div data-component="char-set__char" class="charset-single-char">
14626            ờ
14627          </div>
14628          <div data-component="char-set__char" class="charset-single-char">
14629            ở
14630          </div>
14631          <div data-component="char-set__char" class="charset-single-char">
14632            ỡ
14633          </div>
14634          <div data-component="char-set__char" class="charset-single-char">
14635            ú
14636          </div>
14637          <div data-component="char-set__char" class="charset-single-char">
14638            ù
14639          </div>
14640          <div data-component="char-set__char" class="charset-single-char">
14641            Å©
14642          </div>
14643
14644          <div data-component="char-set__char" class="charset-single-char">
14645            ụ
14646          </div>
14647          <div data-component="char-set__char" class="charset-single-char">
14648            á»§
14649          </div>
14650          <div data-component="char-set__char" class="charset-single-char">
14651            ư
14652          </div>
14653          <div data-component="char-set__char" class="charset-single-char">
14654            ứ
14655          </div>
14656          <div data-component="char-set__char" class="charset-single-char">
14657            á»±
14658          </div>
14659          <div data-component="char-set__char" class="charset-single-char">
14660            ừ
14661          </div>
14662          <div data-component="char-set__char" class="charset-single-char">
14663            á»­
14664          </div>
14665          <div data-component="char-set__char" class="charset-single-char">
14666            ữ
14667          </div>
14668          <div data-component="char-set__char" class="charset-single-char">
14669            ý
14670          </div>
14671          <div data-component="char-set__char" class="charset-single-char">
14672            ỳ
14673          </div>
14674          <div data-component="char-set__char" class="charset-single-char">
14675            ỵ
14676          </div>
14677          <div data-component="char-set__char" class="charset-single-char">
14678            á»·
14679          </div>
14680          <div data-component="char-set__char" class="charset-single-char">
14681            ỹ
14682          </div>
14683        </div>
14684      </div>
14685    </div>
14686  </div>
14687  <!-- End of Charset Section -->
14688</div>
14689
14690  <!-- Start of one single Charset Section -->
14691<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="arabic">
14692  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Arabic">
14693    <div class="flex flex-row justify-between">
14694      <div data-component="char-set__subset-size" class=""></div>
14695      <div class="">Arabic</div>
14696    </div>
14697    <div>
14698      <div class="character-set-section mt-4">
14699        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
14700          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14701            ا
14702          </div>
14703          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14704            ـا
14705          </div>
14706          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14707            أ
14708          </div>
14709          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14710            ـأ
14711          </div>
14712          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14713            إ
14714          </div>
14715          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14716            ـإ
14717          </div>
14718          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14719            آ
14720          </div>
14721          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14722            ـآ
14723          </div>
14724          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14725            Ù±
14726          </div>
14727          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14728            ـٱ
14729          </div>
14730          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14731            ب
14732          </div>
14733          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14734            بـ
14735          </div>
14736          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14737            ـبـ
14738          </div>
14739          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14740            ـب
14741          </div>
14742          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14743            ت
14744          </div>
14745          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14746            تـ
14747          </div>
14748          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14749            ـتـ
14750          </div>
14751          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14752            ـت
14753          </div>
14754          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14755            Ø«
14756          </div>
14757          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14758            ثـ
14759          </div>
14760          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14761            ـثـ
14762          </div>
14763          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14764            ـث
14765          </div>
14766          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14767            جـ
14768          </div>
14769          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14770            ـجـ
14771          </div>
14772          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14773            ـج
14774          </div>
14775          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14776            ج
14777          </div>
14778          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14779            حـ
14780          </div>
14781          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14782            ـحـ
14783          </div>
14784          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14785            ـح
14786          </div>
14787          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14788            Ø­
14789          </div>
14790          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14791            خـ
14792          </div>
14793          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14794            ـخـ
14795          </div>
14796          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14797            ـخ
14798          </div>
14799          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14800            Ø®
14801          </div>
14802          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14803            د
14804          </div>
14805          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14806            ـد
14807          </div>
14808          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14809            ذ
14810          </div>
14811          <div data-component="char-set__char" class="charset-single-char" lan
14811g="ar">
14812            ـذ
14813          </div>
14814          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14815            ر
14816          </div>
14817          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14818            ـر
14819          </div>
14820          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14821            ز
14822          </div>
14823          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14824            ـز
14825          </div>
14826          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14827            س
14828          </div>
14829          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14830            سـ
14831          </div>
14832          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14833            ـسـ
14834          </div>
14835          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14836            ـس
14837          </div>
14838          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14839            Ø´
14840          </div>
14841          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14842            شـ
14843          </div>
14844          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14845            ـشـ
14846          </div>
14847          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14848            ـش
14849          </div>
14850          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14851            ص
14852          </div>
14853          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14854            صـ
14855          </div>
14856          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14857            ـصـ
14858          </div>
14859          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14860            ـص
14861          </div>
14862          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14863            ض
14864          </div>
14865          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14866            ضـ
14867          </div>
14868          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14869            ـضـ
14870          </div>
14871          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14872            ـض
14873          </div>
14874          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14875            Ø·
14876          </div>
14877          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14878            طـ
14879          </div>
14880          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14881            ـطـ
14882          </div>
14883          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14884            ـط
14885          </div>
14886          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14887            ظ
14888          </div>
14889          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14890            ظـ
14891          </div>
14892          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14893            ـظـ
14894          </div>
14895          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14896            ـظ
14897          </div>
14898          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14899            عـ
14900          </div>
14901          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14902            ـعـ
14903          </div>
14904          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14905            ـع
14906          </div>
14907          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14908            ع
14909          </div>
14910          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14911            غـ
14912          </div>
14913          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14914            ـغـ
14915          </div>
14916          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14917            ـغ
14918          </div>
14919          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14920            غ
14921          </div>
14922          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14923            ف
14924          </div>
14925          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14926            فـ
14927          </div>
14928          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14929            ـفـ
14930          </div>
14931          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14932            ـفـ
14933          </div>
14934          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14935            ـف
14936          </div>
14937          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14938            ڤـ
14939          </div>
14940          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14941            ـڤـ
14942          </div>
14943          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14944            ـڤ
14945          </div>
14946          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14947            Ú¤
14948          </div>
14949          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14950            ق
14951          </div>
14952          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14953            قـ
14954          </div>
14955          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14956            ـقـ
14957          </div>
14958          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14959            ـق
14960          </div>
14961          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14962            ك
14963          </div>
14964          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14965            كـ
14966          </div>
14967          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14968            ـكـ
14969          </div>
14970          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14971            ـك
14972          </div>
14973          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14974            ل
14975          </div>
14976          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14977            لـ
14978          </div>
14979          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14980            ـلـ
14981          </div>
14982          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14983            ـل
14984          </div>
14985          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14986            مـ
14987          </div>
14988          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14989            ـمـ
14990          </div>
14991          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14992            ـم
14993          </div>
14994          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14995            م
14996          </div>
14997          <div data-component="char-set__char" class="charset-single-char" lang="ar">
14998            نـ
14999          </div>
15000          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15001            ـنــ
15002          </div>
15003          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15004            ـن
15005          </div>
15006          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15007            ن
15008          </div>
15009          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15010            ه
15011          </div>
15012          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15013            ـهـ
15014          </div>
15015          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15016            ـه
15017          </div>
15018          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15019            ہ
15020          </div>
15021          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15022            Ø©
15023          </div>
15024          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15025            ـة
15026          </div>
15027          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15028            و
15029          </div>
15030          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15031            ـو
15032          </div>
15033          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15034            ؤ
15035          </div>
15036          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15037            ـؤ
15038          </div>
15039          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15040            ي
15041          </div>
15042          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15043            يـ
15044          </div>
15045          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15046            ـيـ
15047          </div>
15048          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15049            ـي
15050          </div>
15051          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15052            ى
15053          </div>
15054          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15055            ـى
15056          </div>
15057          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15058            ئ
15059          </div>
15060          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15061            ئـ
15062          </div>
15063          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15064            ـئـ
15065          </div>
15066          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15067            ـئ
15068          </div>
15069          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15070            Ø¡
15071          </div>
15072          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15073            لا
15074          </div>
15075          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15076            لأ
15077          </div>
15078          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15079            لإ
15080          </div>
15081          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15082            لآ
15083          </div>
15084          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15085            ـلا
15086          </div>
15087          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15088            ـلأ
15089          </div>
15090          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15091            ـلإ
15092          </div>
15093          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15094            ـلآ
15095          </div>
15096        </div>
15097      </div>
15098    </div>
15099  </div>
15100  <!-- End of Charset Section -->
15101  <!-- Start of one single Charset Section -->
15102  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Farsi Extension">
15103    <div class="flex flex-row justify-between">
15104      <div data-component="char-set__subset-size" class=""></div>
15105      <div class="">Farsi Extension</div>
15106    </div>
15107    <div>
15108      <div class="character-set-section mt-4">
15109        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
15110          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15111            Ù¾
15112          </div>
15113          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15114            پـ
15115          </div>
15116          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15117            ـپـ
15118          </div>
15119          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15120            ـپ
15121          </div>
15122          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15123            چـ
15124          </div>
15125          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15126            ـچـ
15127          </div>
15128          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15129            ـچ
15130          </div>
15131          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15132            چ
15133          </div>
15134          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15135            ژـژ
15136          </div>
15137          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15138            کـ
15139          </div>
15140          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15141            ـکـ
15142          </div>
15143          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15144            ـک
15145          </div>
15146          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15147            Ú©
15148          </div>
15149          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15150            گـ
15151          </div>
15152          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15153            ـگـ
15154          </div>
15155          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15156            ـگ
15157          </div>
15158          <div data-component="char-set__char" class="charset-single-char" lang="fa">
15159            Ú¯
15160          </div>
15161        </div>
15162      </div>
15163    </div>
15164  </div>
15165  <!-- End of Charset Section -->
15166  <!-- Start of one single Charset Section -->
15167  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Kurdish Extension">
15168    <div class="flex flex-row justify-between">
15169      <div data-component="char-set__subset-size" class=""></div>
15170      <div class="">Kurdish Extension</div>
15171    </div>
15172    <div>
15173      <div class="character-set-section mt-4">
15174        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
15175          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15176            ـے
15177          </div>
15178          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15179            ـۓ
15180          </div>
15181          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15182            ڕـڕڵـ
15183          </div>
15184          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15185            ـڵـ
15186          </div>
15187          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15188            ـڵ
15189          </div>
15190          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15191            Úµ
15192          </div>
15193          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15194            ۆـۆ
15195          </div>
15196          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15197            ێـ
15198          </div>
15199          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15200            ـێـ
15201          </div>
15202          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15203            ـێ
15204          </div>
15205          <div data-component="char-set__char" class="charset-single-char" lang="ku">
15206            ێ
15207          </div>
15208        </div>
15209      </div>
15210    </div>
15211  </div>
15212  <!-- End of Charset Section -->
15213
15214  <!-- Start of one single Charset Section -->
15215  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Urdu Extension">
15216    <div class="flex flex-row justify-between">
15217      <div data-component="char-set__subset-size" class=""></div>
15218      <div class="">Urdu Extension</div>
15219    </div>
15220    <div>
15221      <div class="character-set-section mt-4">
15222        <div class="character-set-contain
15222er text-rg" dir="rtl" style="unicode-bidi: bidi-override">
15223          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15224            ٹـ
15225          </div>
15226          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15227            ـٹـ
15228          </div>
15229          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15230            ـٹ
15231          </div>
15232          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15233            ڈـڈ
15234          </div>
15235          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15236            ڑ
15237          </div>
15238          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15239            ـڑ
15240          </div>
15241          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15242            Úº
15243          </div>
15244          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15245            ـں
15246          </div>
15247          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15248            Ú¾
15249          </div>
15250          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15251            ــھـ
15252          </div>
15253          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15254            ـھ
15255          </div>
15256          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15257            ہـ
15258          </div>
15259          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15260            ـہـ
15261          </div>
15262          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15263            ـہ
15264          </div>
15265          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15266            ۃ
15267          </div>
15268          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15269            ـۃ
15270          </div>
15271          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15272            ے
15273          </div>
15274          <div data-component="char-set__char" class="charset-single-char" lang="ur">
15275            ۓ
15276          </div>
15277        </div>
15278      </div>
15279    </div>
15280  </div>
15281  <!-- End of Charset Section -->
15282
15283  <!-- Start of one single Charset Section -->
15284  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Figures">
15285    <div class="flex flex-row justify-between">
15286      <div data-component="char-set__subset-size" class=""></div>
15287      <div class="">Figures</div>
15288    </div>
15289    <div>
15290      <div class="character-set-section mt-4">
15291        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
15292          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15293            Ù 
15294          </div>
15295          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15296            Ù¡
15297          </div>
15298          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15299            Ù¢
15300          </div>
15301          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15302            Ù£
15303          </div>
15304          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15305            Ù¤
15306          </div>
15307          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15308            Û´
15309          </div>
15310          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15311            Ù¥
15312          </div>
15313          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15314            Ûµ
15315          </div>
15316          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15317            Ù¦
15318          </div>
15319          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15320            Û¶
15321          </div>
15322          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15323            Ù§
15324          </div>
15325          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15326            Ù¨
15327          </div>
15328          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15329            Ù©
15330          </div>
15331        </div>
15332      </div>
15333    </div>
15334  </div>
15335  <!-- End of Charset Section -->
15336  <!-- Start of one single Charset Section -->
15337  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Required Ligatures">
15338    <div class="flex flex-row justify-between">
15339      <div data-component="char-set__subset-size" class=""></div>
15340      <div class="">Required Ligatures</div>
15341    </div>
15342    <div>
15343      <div class="character-set-section mt-4">
15344        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
15345          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15346            لا
15347          </div>
15348          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15349            ـلا
15350          </div>
15351          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15352            لآ
15353          </div>
15354          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15355            ـلآ
15356          </div>
15357          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15358            لأ
15359          </div>
15360          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15361            ـلأ
15362          </div>
15363          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15364            لإ
15365          </div>
15366          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15367            ـلإ
15368          </div>
15369          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15370            لا
15371          </div>
15372          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15373            ـلا
15374          </div>
15375          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15376            لآ
15377          </div>
15378          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15379            ـلآ
15380          </div>
15381          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15382            ـبر
15383          </div>
15384          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15385            ـپر
15386          </div>
15387          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15388            ـتر
15389          </div>
15390          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15391            ـثر
15392          </div>
15393          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15394            ـٹر
15395          </div>
15396          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15397            ـير
15398          </div>
15399          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15400            ـئر
15401          </div>
15402          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15403            ـبز
15404          </div>
15405          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15406            ـپز
15407          </div>
15408          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15409            ـتز
15410          </div>
15411          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15412            ـثز
15413          </div>
15414          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15415            ـٹز
15416          </div>
15417          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15418            ـيز
15419          </div>
15420          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15421            ـئز
15422          </div>
15423          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15424            ـبن
15425          </div>
15426          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15427            ـپن
15428          </div>
15429          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15430            ـتن
15431          </div>
15432          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15433            ـثن
15434          </div>
15435          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15436            ـٹن
15437          </div>
15438          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15439            ـين
15440          </div>
15441          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15442            ـئن
15443          </div>
15444          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15445            بي
15446          </div>
15447          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15448            بى
15449          </div>
15450          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15451            بئ
15452          </div>
15453          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15454            ـبي
15455          </div>
15456          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15457            ـبى
15458          </div>
15459          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15460            ـبئ
15461          </div>
15462          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15463            پي
15464          </div>
15465          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15466            پى
15467          </div>
15468          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15469            پئ
15470          </div>
15471          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15472            ـپي
15473          </div>
15474          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15475            ـپى
15476          </div>
15477          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15478            ـپئ
15479          </div>
15480          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15481            تى
15482          </div>
15483          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15484            تئ
15485          </div>
15486          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15487            ـتي
15488          </div>
15489          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15490            ـتى
15491          </div>
15492          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15493            ـتئ
15494          </div>
15495          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15496            تي
15497          </div>
15498          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15499            ثى
15500          </div>
15501          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15502            ثئ
15503          </div>
15504          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15505            ـثي
15506          </div>
15507          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15508            ـثى
15509          </div>
15510          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15511            ـثئ
15512          </div>
15513          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15514            ٹي
15515          </div>
15516          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15517            ٹى
15518          </div>
15519          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15520            ٹئ
15521          </div>
15522          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15523            ـٹي
15524          </div>
15525          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15526            ـٹى
15527          </div>
15528          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15529            ـٹئ
15530          </div>
15531          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15532            سي
15533          </div>
15534
15535          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15536            سى
15537          </div>
15538          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15539            سئ
15540          </div>
15541          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15542            ـسي
15543          </div>
15544          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15545            ـسى
15546          </div>
15547          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15548            ـسئ
15549          </div>
15550          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15551            شي
15552          </div>
15553          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15554            شى
15555          </div>
15556          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15557            شئ
15558          </div>
15559          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15560            ـشي
15561          </div>
15562          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15563            ـشى
15564          </div>
15565          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15566            ـشئ
15567          </div>
15568          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15569            صي
15570          </div>
15571          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15572            صى
15573          </div>
15574          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15575            صئ
15576          </div>
15577          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15578            ـصي
15579          </div>
15580          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15581            ـصى
15582          </div>
15583          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15584            ـصئ
15585          </div>
15586          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15587            ضي
15588          </div>
15589          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15590            ضى
15591          </div>
15592          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15593            ضئ
15594          </div>
15595          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15596            ـضي
15597          </div>
15598          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15599            ـضى
15600          </div>
15601          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15602            ـضئ
15603          </div>
15604          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15605            كي
15606          </div>
15607          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15608            كى
15609          </div>
15610          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15611            كئ
15612          </div>
15613          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15614            گي
15615          </div>
15616          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15617            گى
15618          </div>
15619          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15620            گئ
15621          </div>
15622          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15623            في
15624          </div>
15625          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15626            فى
15627          </div>
15628          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15628
15629            فئ
15630          </div>
15631          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15632            قيقى
15633          </div>
15634          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15635            قئ
15636          </div>
15637          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15638            ڤي
15639          </div>
15640          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15641            ڤى
15642          </div>
15643          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15644            ڤئ
15645          </div>
15646          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15647            ليلى
15648          </div>
15649          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15650            لئ
15651          </div>
15652          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15653            الله
15654          </div>
15655        </div>
15656      </div>
15657    </div>
15658  </div>
15659  <!-- End of Charset Section -->
15660  <!-- Start of one single Charset Section -->
15661  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Discretionary Ligatures">
15662    <div class="flex flex-row justify-between">
15663      <div data-component="char-set__subset-size" class=""></div>
15664      <div class="">Discretionary Ligatures</div>
15665    </div>
15666    <div>
15667      <div class="character-set-section mt-4">
15668        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
15669          <div data-component="char-set__char" class="charset-single-char ot-dlig">
15670            لم
15671          </div>
15672        </div>
15673      </div>
15674    </div>
15675  </div>
15676  <!-- End of Charset Section -->
15677
15678  <!-- Start of one single Charset Section -->
15679  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Vocalization Marks">
15680    <div class="flex flex-row justify-between">
15681      <div data-component="char-set__subset-size" class=""></div>
15682      <div class="">Vocalization Marks</div>
15683    </div>
15684    <div>
15685      <div class="character-set-section mt-4">
15686        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
15687          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15688            َ
15689          </div>
15690          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15691            ً
15692          </div>
15693          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15694            ٍ
15695          </div>
15696          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15697            ُ
15698          </div>
15699          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15700            ٌ
15701          </div>
15702          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15703            ْ
15704          </div>
15705          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15706            ّ
15707          </div>
15708          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15709            َّ
15710          </div>
15711          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15712            ُّ
15713          </div>
15714          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15715            ٌّ
15716          </div>
15717        </div>
15718      </div>
15719    </div>
15720  </div>
15721  <!-- End of Charset Section -->
15722
15723  <!-- Start of one single Charset Section -->
15724  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Punctuation">
15725    <div class="flex flex-row justify-between">
15726      <div data-component="char-set__subset-size" class=""></div>
15727      <div class="">Punctuation</div>
15728    </div>
15729    <div>
15730      <div class="character-set-section mt-4">
15731        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
15732          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15733            ۔
15734          </div>
15735          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15736            ،
15737          </div>
15738          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15739            ؛
15740          </div>
15741          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15742            ؟
15743          </div>
15744          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15745            Ù­
15746          </div>
15747          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15748            ï´¿
15749          </div>
15750          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15751            ï´¾
15752          </div>
15753          <div data-component="char-set__char" class="charset-single-char" lang="ar">
15754            ï·¼
15755          </div>
15756        </div>
15757      </div>
15758    </div>
15759  </div>
15760  <!-- End of Charset Section -->
15761</div>
15762
15763  <!-- Start of one single Charset Section -->
15764<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="devanagari">
15765  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Independent Vowels">
15766    <div class="flex flex-row justify-between">
15767      <div class="">Independent Vowels</div>
15768      <div data-component="char-set__subset-size" class=""></div>
15769    </div>
15770    <div>
15771      <div class="character-set-section mt-4">
15772        <div class="character-set-container text-rg">
15773          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15774            अ
15775          </div>
15776          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15777            आ
15778          </div>
15779          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15780            इ
15781          </div>
15782          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15783            ई
15784          </div>
15785          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15786            उ
15787          </div>
15788          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15789            ऊ
15790          </div>
15791          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15792            ऋ
15793          </div>
15794          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15795            ऌ
15796          </div>
15797          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15798            ए
15799          </div>
15800          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15801            ऐ
15802          </div>
15803          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15804            ओ
15805          </div>
15806          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15807            औ
15808          </div>
15809          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15810            ॲ
15811          </div>
15812          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15813            ऍ
15814          </div>
15815          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15816            ऑ
15817          </div>
15818          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15819            ऄ
15820          </div>
15821          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15822            ऎ
15823          </div>
15824          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15825            ऒ
15826          </div>
15827          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15828            ॶ
15829          </div>
15830          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15831            ॷ
15832          </div>
15833          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15834            ॳ
15835          </div>
15836          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15837            ॴ
15838          </div>
15839          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15840            ॵ
15841          </div>
15842          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15843            ॡ
15844          </div>
15845          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15846            ॡ
15847          </div>
15848        </div>
15849      </div>
15850    </div>
15851  </div>
15852  <!-- End of Charset Section -->
15853  <!-- Start of one single Charset Section -->
15854  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Consonants">
15855    <div class="flex flex-row justify-between">
15856      <div class="">Consonants</div>
15857      <div data-component="char-set__subset-size" class=""></div>
15858    </div>
15859    <div>
15860      <div class="character-set-section mt-4">
15861        <div class="character-set-container text-rg">
15862          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15863            क
15864          </div>
15865          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15866            ख
15867          </div>
15868          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15869            ग
15870          </div>
15871          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15872            घ
15873          </div>
15874          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15875            ङ
15876          </div>
15877          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15878            च
15879          </div>
15880          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15881            छ
15882          </div>
15883          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15884            ज
15885          </div>
15886          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15887            झ
15888          </div>
15889          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15890            ञ
15891          </div>
15892          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15893            ट
15894          </div>
15895          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15896            ठ
15897          </div>
15898          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15899            ड
15900          </div>
15901          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15902            ढ
15903          </div>
15904          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15905            ण
15906          </div>
15907          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15908            त
15909          </div>
15910          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15911            थ
15912          </div>
15913          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15914            द
15915          </div>
15916          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15917            ध
15918          </div>
15919          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15920            न
15921          </div>
15922          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15923            प
15924          </div>
15925          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15926            फ
15927          </div>
15928          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15929            ब
15930          </div>
15931          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15932            भ
15933          </div>
15934          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15935            म
15936          </div>
15937          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15938            य
15939          </div>
15940          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15941            र
15942          </div>
15943          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15944            लव
15945          </div>
15946          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15947            श
15948          </div>
15949          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15950            ष
15951          </div>
15952          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15953            स
15954          </div>
15955          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15956            ह
15957          </div>
15958          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15959            ळ
15960          </div>
15961          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15962            ॻ
15963          </div>
15964          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15965            ॼ
15966          </div>
15967          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15968            ॾ
15969          </div>
15970          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15971            ॿ
15972          </div>
15973          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15974            ॹ
15975          </div>
15976          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15977            ॺ
15978          </div>
15979          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15980            ॸ
15981          </div>
15982          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15983            क़
15984          </div>
15985          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15986            ख़
15987          </div>
15988          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15989            ग़
15990          </div>
15991          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15992            ज़
15993          </div>
15994          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15995            ड़
15996          </div>
15997          <div data-component="char-set__char" class="charset-single-char" lang="hi">
15998            ढ़
15999          </div>
16000          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16001            ऩ
16002          </div>
16003          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16004            फ़
16005          </div>
16006          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16007            य़
16008          </div>
16009          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16010            ऱ
16011          </div>
16012          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16013            ऴ
16014          </div>
16015          <div data-component="char-set__char" class="charset-single-char" lang="mr">
16016            ल
16017          </div>
16018          <div data-component="char-set__char" class="charset-single-char" lang="mr">
16019            श
16020          </div>
16021        </div>
16022      </div>
16023    </div>
16024  </div>
16025  <!-- End of Charset Section -->
16026  <!-- Start of one single Charset Section -->
16027  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Numerals">
16028    <div class="flex flex-row justify-between">
16029      <div class="">Numbers, Symbols, Punctuation</div>
16030      <div data-component="char-set__subset-size" class=""></div>
16031    </div>
16032    <div>
16033      <div class="character-set-section mt-4">
16034        <div class="character-set-container text-rg">
16035          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16036            ०
16037          </div>
16038          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16039            १
16040          </div>
16041          <div data-component="char-set__char" class="charset-si
16041ngle-char" lang="hi">
16042            २
16043          </div>
16044          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16045            ३
16046          </div>
16047          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16048            ४
16049          </div>
16050          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16051            ५
16052          </div>
16053          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16054            ६
16055          </div>
16056          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16057            ७
16058          </div>
16059          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16060            ८
16061          </div>
16062          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16063            ९
16064          </div>
16065          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16066            ॐ
16067          </div>
16068          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16069            ऽ
16070          </div>
16071          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16072            ।
16073          </div>
16074          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16075            ॥
16076          </div>
16077        </div>
16078      </div>
16079    </div>
16080  </div>
16081  <!-- End of Charset Section -->
16082  <!-- Start of one single Charset Section -->
16083  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Dependent Vowel Signs">
16084    <div class="flex flex-row justify-between">
16085      <div class="">Dependent Vowel Signs</div>
16086      <div data-component="char-set__subset-size" class=""></div>
16087    </div>
16088    <div>
16089      <div class="character-set-section mt-4">
16090        <div class="character-set-container text-rg">
16091          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16092            ◌ा
16093          </div>
16094          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16095            ि◌
16096          </div>
16097          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16098            ◌ी
16099          </div>
16100          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16101            ◌ु
16102          </div>
16103          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16104            ◌ू
16105          </div>
16106          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16107            ◌ृ
16108          </div>
16109          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16110            ◌ॢ
16111          </div>
16112          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16113            ◌े
16114          </div>
16115          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16116            ◌ै
16117          </div>
16118          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16119            ◌ो
16120          </div>
16121          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16122            ◌ौ
16123          </div>
16124          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16125            ◌ॅ
16126          </div>
16127          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16128            ◌ॉ
16129          </div>
16130          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16131            ◌ॄ
16132          </div>
16133          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16134            ◌ॣ
16135          </div>
16136          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16137            ◌ॆ
16138          </div>
16139          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16140            ◌ॊ
16141          </div>
16142          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16143            ◌ॖ
16144          </div>
16145          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16146            ◌ॗ
16147          </div>
16148          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16149            ◌ऺ
16150          </div>
16151          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16152            ◌ऻ
16153          </div>
16154          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16155            ◌ॏ
16156          </div>
16157          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16158            ॎ
16159          </div>
16160        </div>
16161      </div>
16162    </div>
16163  </div>
16164  <!-- End of Charset Section -->
16165  <!-- Start of one single Charset Section -->
16166  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Modifiers">
16167    <div class="flex flex-row justify-between">
16168      <div class="">Modifiers</div>
16169      <div data-component="char-set__subset-size" class=""></div>
16170    </div>
16171    <div>
16172      <div class="character-set-section mt-4">
16173        <div class="character-set-container text-rg">
16174          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16175            ◌ं
16176          </div>
16177          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16178            ◌ः
16179          </div>
16180          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16181            ◌ँ
16182          </div>
16183          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16184            ◌्
16185          </div>
16186          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16187            ◌़
16188          </div>
16189          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16190            ◌्र
16191          </div>
16192          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16193            र्‍◌
16194          </div>
16195        </div>
16196      </div>
16197    </div>
16198  </div>
16199  <!-- End of Charset Section -->
16200
16201  <!-- Start of one single Charset Section -->
16202  <!-- <
16203    Hiding Rakar for now as we can’t show them all I think
16204    div
16205    class="pb-7"
16206    data-component="char-set__set-container"
16207    data-char-set-script="Devanagari"
16208    data-char-set-subset="Rakar Forms"
16209  >
16210    <div class="flex flex-row justify-between">
16211      <div class="">Rakar Forms</div>
16212      <div data-component="char-set__subset-size" class=""></div>
16213    </div>
16214    <div>
16215      <div class="character-set-section mt-4">
16216        <div class="character-set-container text-rg">
16217          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16218            क्र
16219          </div>
16220          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16221            ख्र
16222          </div>
16223          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16224            ग्र
16225          </div>
16226          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16227            घ्र
16228          </div>
16229          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16230            ङ्र
16231          </div>
16232          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16233            च्र
16234          </div>
16235          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16236            छ्र
16237          </div>
16238          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16239            ज्र
16240          </div>
16241          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16242            झ्र
16243          </div>
16244          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16245            ञ्र
16246          </div>
16247          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16248            ट्र
16249          </div>
16250          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16251            ठ्र
16252          </div>
16253          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16254            ड्र
16255          </div>
16256          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16257            ढ्र
16258          </div>
16259          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16260            ण्र
16261          </div>
16262          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16263            त्र
16264          </div>
16265          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16266            थ्र
16267          </div>
16268          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16269            द्र
16270          </div>
16271          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16272            ध्र
16273          </div>
16274          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16275            न्र
16276          </div>
16277          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16278            प्र
16279          </div>
16280          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16281            फ्र
16282          </div>
16283          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16284            ब्र
16285          </div>
16286          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16287            भ्र
16288          </div>
16289          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16290            म्र
16291          </div>
16292          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16293            य्र
16294          </div>
16295          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16296            ल्र
16297          </div>
16298          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16299            व्र
16300          </div>
16301          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16302            श्र
16303          </div>
16304          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16305            ष्र
16306          </div>
16307          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16308            स्र
16309          </div>
16310          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16311            ह्र
16312          </div>
16313          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16314            ळ्र
16315          </div>
16316          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16317            क़्र
16318          </div>
16319          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16320            ख़्र
16321          </div>
16322          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16323            ग़्र
16324          </div>
16325          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16326            ज़्र
16327          </div>
16328          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16329            फ़्र
16330          </div>
16331        </div>
16332      </div>
16333    </div>
16334  </div>
16335</div> -->
16336  <!-- End of Charset Section -->
16337  <!-- Start of one single Charset Section -->
16338  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Conjuncts">
16339    <div class="flex flex-row justify-between">
16340      <div class="">Conjuncts</div>
16341      <div data-component="char-set__subset-size" class=""></div>
16342    </div>
16343    <div>
16344      <div class="character-set-section mt-4">
16345        <div class="character-set-container text-rg">
16346          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16347            क्क
16348          </div>
16349          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16350            क्ख
16351          </div>
16352          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16353            क्च
16354          </div>
16355          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16356            क्ज
16357          </div>
16358          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16359            क्ट
16360          </div>
16361          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16362            क्ण
16363          </div>
16364          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16365            क्त
16366          </div>
16367          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16368            क्थ
16369          </div>
16370          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16371            क्द
16372          </div>
16373          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16374            क्न
16375          </div>
16376          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16377            क्प
16378          </div>
16379          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16380            क्फ
16381          </div>
16382          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16383            क्म
16384          </div>
16385          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16386            क्य
16387          </div>
16388          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16389            क्ल
16390          </div>
16391          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16392            क्
16393          </div>
16394          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16395            क्श
16396          </div>
16397          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16398            क्ष
16399          </div>
16400          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16401            क्स
16402          </div>
16403          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16404            ख्ख
16405          </div>
16406          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16407            ख्त
16408          </div>
16409          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16410            ख्न
16411          </div>
16412          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16413            ख्म
16414          </div>
16415          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16416            ख्य
16417          </div>
16418          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16419            ख्व
16420          </div>
16421          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16422            ख्श
16423          </div>
16424          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16425            ग्ग
16426          </div>
16427          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16428            ग्घ
16429          </div>
16430          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16431            ग्ज
16432          </div>
16433          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16434            ग्ण
16435          </div>
16436          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16437            ग्द
16438          </div>
16439          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16440            ग्ध
16441          </div>
16442          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16443            ग्न
16444          </div>
16445          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16446            ग्ब
16447          </div>
16448          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16449            ग्भ
16450          </div>
16451          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16452            ग्म
16453          </div>
16454          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16455            ग्य
16456          </div>
16457          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16458            ग्ल
16459          </div>
16460          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16461            ग्व
16462          </div>
16463          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16464            ग्स
16465          </div>
16466          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16467            घ्न
16468          </div>
16469          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16470            घ्म
16471          </div>
16472          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16473            घ्य
16474          </div>
16475          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16476            च्च
16477          </div>
16478          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16479            च्छ
16480          </div>
16481          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16482            च्न
16483          </div>
16484          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16485            च्म
16486          </div>
16487          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16488            च्य
16489          </div>
16490          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16491            छ्य
16492          </div>
16493          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16494            छ्व
16495          </div>
16496          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16497            ज्क
16498          </div>
16499          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16500            ज्ज
16501          </div>
16502          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16503            ज्झ
16504          </div>
16505          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16506            ज्ञ
16507          </div>
16508          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16509            ज्ट
16510          </div>
16511          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16512            ज्ड
16513          </div>
16514          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16515            ज्त
16516          </div>
16517          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16518            ज्द
16519          </div>
16520          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16521            ज्न
16522          </div>
16523          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16524            ज्ब
16525          </div>
16526          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16527            ज्म
16528          </div>
16529          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16530            ज्य
16531          </div>
16532          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16533            ज्व
16534          </div>
16535          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16536            झ्न
16537          </div>
16538          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16539            झ्म
16540          </div>
16541          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16542            झ्य
16543          </div>
16544          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16545            ञ्च
16546          </div>
16547          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16548            ञ्छ
16549          </div>
16550          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16551            ञ्ज
16552          </div>
16553          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16554            ञ्श
16555          </div>
16556          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16557            ट्ट
16558          </div>
16559          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16560            ट्ठ
16561          </div>
16562          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16563            ट्य
16564          </div>
16565          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16566            ट्व
16567          </div>
16568          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16569            ठ्ठ
16570          </div>
16571          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16572            ठ्य
16573          </div>
16574          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16575            ठ्व
16576          </div>
16577          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16578            ड्ड
16579          </div>
16580          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16581            ड्ढ
16582          </div>
16583          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16584            ड्य
16585          </div>
16586          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16587            ड्व
16588          </div>
16589          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16590            ढ्ढ
16591          </div>
16592          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16593            ढ्य
16594          </div>
16595          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16596            ढ्व
16597          </div>
16598          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16599            ण्ट
16600          </div>
16601          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16602            ण्ठ
16603          </div>
16604          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16605            ण्ड
16606          </div>
16607          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16608            ण्ढ
16609          </div>
16610          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16611            ण्ण
16612          </div>
16613          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16614            ण्म
16615          </div>
16616          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16617            ण्य
16618          </div>
16619          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16620            ण्व
16621          </div>
16622          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16623            त्क
16624          </div>
16625          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16626            त्ख
16627          </div>
16628          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16629            त्त
16630          </div>
16631          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16632            त्थ
16633          </div>
16634          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16635            त्न
16636          </div>
16637          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16638            त्प
16639          </div>
16640          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16641            त्फ
16642          </div>
16643          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16644            त्म
16645          </div>
16646          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16647            त्य
16648          </div>
16649          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16650            त्ल
16651          </div>
16652          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16653            त्व
16654          </div>
16655          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16656            त्स
16657          </div>
16658          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16659            थ्न
16660          </div>
16661          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16662            थ्य
16663          </div>
16664          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16665            थ्व
16666          </div>
16667          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16668            द्ग
16669          </div>
16670          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16671            द्घ
16672          </div>
16673          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16674            द्द
16675          </div>
16676          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16677            द्ध
16678          </div>
16679          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16680            द्न
16681          </div>
16682          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16683            द्ब
16684          </div>
16685          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16686            द्भ
16687          </div>
16688          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16689            द्म
16690          </div>
16691          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16692            द्य
16693          </div>
16694          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16695            द्व
16696          </div>
16697          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16698            ध्न
16699          </div>
16700          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16701            ध्म
16702          </div>
16703          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16704            ध्य
16705          </div>
16706          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16707            ध्व
16708          </div>
16709          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16710            न्क
16711          </div>
16712          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16713            न्च
16714          </div>
16715          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16716            न्छ
16717          </div>
16718          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16719            न्ट
16720          </div>
16721          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16722            न्ड
16723          </div>
16724          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16725            न्त
16726          </div>
16727          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16728            न्थ
16729          </div>
16730          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16731            न्द
16732          </div>
16733          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16734            न्ध
16735          </div>
16736          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16737            न्न
16738          </div>
16739          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16740            न्प
16741          </div>
16742          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16743            न्फ
16744          </div>
16745          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16746            न्भ
16747          </div>
16748          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16749            न्म
16750          </div>
16751          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16752            न्य
16753          </div>
16754          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16755            न्व
16756          </div>
16757          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16758            न्स
16759          </div>
16760          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16761            न्ह
16762          </div>
16763          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16764            प्ट
16765          </div>
16766          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16767            प्ठ
16768          </div>
16769          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16770            प्त
16771          </div>
16772          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16773            प्न
16774          </div>
16775          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16776            प्प
16777          </div>
16778          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16779            प्फ
16780          </div>
16781          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16782            प्म
16783          </div>
16784          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16785            प्य
16786          </div>
16787          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16788            प्ल
16789          </div>
16790          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16791            प्व
16792          </div>
16793          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16794            प्स
16795          </div>
16796          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16797            फ्ज
16798          </div>
16799          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16800            फ्ट
16801          </div>
16802          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16803            फ्त
16804          </div>
16805          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16806            फ्न
16807          </div>
16808          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16809            फ्फ
16810          </div>
16811          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16812            फ्य
16813          </div>
16814          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16815            फ्ल
16816          </div>
16817          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16818            फ्श
16819          </div>
16820          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16821            ब्ज
16822          </div>
16823          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16824            ब्ज़
16825          </div>
16826          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16827            ब्झ
16828          </div>
16829          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16830            ब्त
16831          </div>
16832          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16833            ब्द
16834          </div>
16835          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16836            ब्ध
16837          </div>
16838          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16839            ब्न
16840          </div>
16841          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16842            ब्ब
16843          </div>
16844          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16845            ब्भ
16846          </div>
16847          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16848            ब्य
16849          </div>
16850          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16851            ब्ल
16852          </div>
16853          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16854            ब्व
16855          </div>
16856          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16857            ब्श
16858          </div>
16859          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16860            ब्स
16861          </div>
16862          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16863            भ्न
16864          </div>
16865          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16866            भ्य
16867          </div>
16868          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16869            भ्ल
16870          </div>
16871          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16872            भ्व
16873          </div>
16874          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16875            म्त
16876          </div>
16877          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16878            म्द
16879          </div>
16880          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16881            म्न
16882          </div>
16883          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16884            म्प
16885          </div>
16886          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16887            म्ब
16888          </div>
16889          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16890            म्भ
16891          </div>
16892          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16893            म्म
16894          </div>
16895          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16896            म्य
16897          </div>
16898          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16899            म्ल
16900          </div>
16901          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16902            म्व
16903          </div>
16904          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16905            म्श
16906          </div>
16907          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16908            म्स
16909          </div>
16910          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16911            म्ह
16912          </div>
16913          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16914            य्न
16915          </div>
16916          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16917            य्य
16918          </div>
16919          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16920            ऱ्य
16921          </div>
16922          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16923            ऱ्ह
16924          </div>
16925          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16926            ल्क
16927          </div>
16928          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16929            ल्ख
16930          </div>
16931          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16932            ल्ग
16933          </div>
16934          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16935            ल्ज
16936          </div>
16937          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16938            ल्ट
16939          </div>
16940          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16941            ल्ठ
16942          </div>
16943          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16944            ल्ड
16945          </div>
16946          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16947            ल्ढ
16948          </div>
16949          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16950            ल्त
16951          </div>
16952          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16953            ल्थ
16954          </div>
16955          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16956            ल्द
16957          </div>
16958          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16959            ल्प
16960          </div>
16961          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16962            ल्फ
16963          </div>
16964          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16965            ल्ब
16966          </div>
16967          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16968            ल्भ
16969          </div>
16970          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16971      
16971      ल्म
16972          </div>
16973          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16974            ल्य
16975          </div>
16976          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16977            ल्ल
16978          </div>
16979          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16980            ल्व
16981          </div>
16982          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16983            ल्स
16984          </div>
16985          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16986            ल्ह
16987          </div>
16988          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16989            व्न
16990          </div>
16991          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16992            व्य
16993          </div>
16994          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16995            व्ल
16996          </div>
16997          <div data-component="char-set__char" class="charset-single-char" lang="hi">
16998            व्व
16999          </div>
17000          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17001            व्ह
17002          </div>
17003          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17004            श्क
17005          </div>
17006          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17007            श्च
17008          </div>
17009          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17010            श्छ
17011          </div>
17012          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17013            श्त
17014          </div>
17015          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17016            श्न
17017          </div>
17018          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17019            श्म
17020          </div>
17021          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17022            श्य
17023          </div>
17024          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17025            श्ल
17026          </div>
17027          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17028            श्व
17029          </div>
17030          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17031            श्श
17032          </div>
17033          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17034            ष्क
17035          </div>
17036          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17037            ष्ट
17038          </div>
17039          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17040            ष्ठ
17041          </div>
17042          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17043            ष्ण
17044          </div>
17045          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17046            ष्प
17047          </div>
17048          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17049            ष्फ
17050          </div>
17051          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17052            ष्म
17053          </div>
17054          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17055            ष्य
17056          </div>
17057          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17058            ष्व
17059          </div>
17060          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17061            ष्ष
17062          </div>
17063          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17064            स्क
17065          </div>
17066          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17067            स्ख
17068          </div>
17069          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17070            स्ज
17071          </div>
17072          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17073            स्ट
17074          </div>
17075          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17076            स्त
17077          </div>
17078          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17079            स्थ
17080          </div>
17081          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17082            स्द
17083          </div>
17084          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17085            स्न
17086          </div>
17087          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17088            स्प
17089          </div>
17090          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17091            स्फ
17092          </div>
17093          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17094            स्ब
17095          </div>
17096          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17097            स्म
17098          </div>
17099          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17100            स्य
17101          </div>
17102          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17103            स्ल
17104          </div>
17105          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17106            स्व
17107          </div>
17108          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17109            स्स
17110          </div>
17111          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17112            ह्ण
17113          </div>
17114          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17115            ह्न
17116          </div>
17117          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17118            ह्म
17119          </div>
17120          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17121            ह्य
17122          </div>
17123          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17124            ह्ल
17125          </div>
17126          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17127            ह्व
17128          </div>
17129          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17130            ळ्य
17131          </div>
17132          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17133            क्त्य
17134          </div>
17135          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17136            क्त्र
17137          </div>
17138          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17139            क्त्व
17140          </div>
17141          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17142            क्प्र
17143          </div>
17144          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17145            क्व्य
17146          </div>
17147          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17148            क्ष्म
17149          </div>
17150          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17151            क्ष्य
17152          </div>
17153          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17154            क्ष्व
17155          </div>
17156          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17157            क्स्ट
17158          </div>
17159          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17160            क्स्ड
17161          </div>
17162          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17163            क्स्त
17164          </div>
17165          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17166            ग्ध्य
17167          </div>
17168          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17169            ग्ध्व
17170          </div>
17171          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17172            ग्न्य
17173          </div>
17174          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17175            ग्भ्य
17176          </div>
17177          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17178            ग्र्य
17179          </div>
17180          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17181            च्छ्व
17182          </div>
17183          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17184            छ्र्य
17185          </div>
17186          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17187            ज्ज्ञ
17188          </div>
17189          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17190            ज्ज्य
17191          </div>
17192          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17193            ज्ज्व
17194          </div>
17195          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17196            ज्ञ्य
17197          </div>
17198          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17199            त्क्य
17200          </div>
17201          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17202            त्क्र
17203          </div>
17204          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17205            त्क्व
17206          </div>
17207          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17208            त्क्ष
17209          </div>
17210          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17211            त्ख्र
17212          </div>
17213          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17214            त्त्य
17215          </div>
17216          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17217            त्त्व
17218          </div>
17219          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17220            त्न्य
17221          </div>
17222          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17223            त्प्र
17224          </div>
17225          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17226            त्प्ल
17227          </div>
17228          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17229            त्म्य
17230          </div>
17231          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17232            त्र्य
17233          </div>
17234          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17235            त्स्न
17236          </div>
17237          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17238            त्स्य
17239          </div>
17240          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17241            त्स्व
17242          </div>
17243          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17244            द्ग्र
17245          </div>
17246          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17247            द्द्य
17248          </div>
17249          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17250            द्ध्य
17251          </div>
17252          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17253            द्ब्र
17254          </div>
17255          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17256            ध्न्य
17257          </div>
17258          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17259            न्क्स
17260          </div>
17261          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17262            न्त्य
17263          </div>
17264          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17265            न्त्र
17266          </div>
17267          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17268            न्त्स
17269          </div>
17270          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17271            न्थ्य
17272          </div>
17273          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17274            न्थ्व
17275          </div>
17276          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17277            न्द्र
17278          </div>
17279          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17280            न्द्व
17281          </div>
17282          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17283            न्ध्य
17284          </div>
17285          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17286            न्ध्र
17287          </div>
17288          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17289            न्ध्व
17290          </div>
17291          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17292            न्न्य
17293          </div>
17294          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17295            न्प्र
17296          </div>
17297          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17298            न्फ्र
17299          </div>
17300          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17301            न्भ्य
17302          </div>
17303          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17304            न्भ्व
17305          </div>
17306          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17307            न्म्य
17308          </div>
17309          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17310            न्स्ट
17311          </div>
17312          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17313            न्स्य
17314          </div>
17315          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17316            प्त्य
17317          </div>
17318          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17319            ब्ज्य
17320          </div>
17321          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17322            ब्ध्व
17323          </div>
17324          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17325            ब्भ्र
17326          </div>
17327          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17328            ब्ल्य
17329          </div>
17330          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17331            भ्र्य
17332          </div>
17333          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17334            म्प्ल
17335          </div>
17336          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17337            म्प्र
17338          </div>
17339          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17340            म्ब्य
17341          </div>
17342          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17343            म्ब्र
17344          </div>
17345          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17346            म्भ्य
17347          </div>
17348          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17349            म्भ्र
17350          </div>
17351          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17352            म्भ्व
17353          </div>
17354          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17355            ल्क्य
17356          </div>
17357          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17358            ल्थ्य
17359          </div>
17360          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17361            ल्द्र
17362          </div>
17363          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17364            ल्ल्य
17365          </div>
17366          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17367            ल्व्ड
17368          </div>
17369          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17370            ष्क्र
17371          </div>
17372          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17373            ष्ट्य
17374          </div>
17375          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17376            ष्ट्र
17377          </div>
17378          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17379            ष्ट्व
17380          </div>
17381          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17382            ष्ठ्य
17383          </div>
17384          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17385            ष्ठ्र
17386          </div>
17387          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17388            ष्ण्य
17389          </div>
17390          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17391            ष्प्र
17392          </div>
17393          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17394            ष्म्य
17395          </div>
17396          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17397            स्क्र
17398          </div>
17399          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17400            स्क्व
17401          </div>
17402          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17403            स्त्य
17404          </div>
17405          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17406            स्त्र
17407          </div>
17408          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17409            स्त्व
17410          </div>
17411          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17412            स्थ्य
17413          </div>
17414          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17415            स्प्र
17416          </div>
17417          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17418            स्म्य
17419          </div>
17420          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17421            स्प
17422          </div>
17423          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17424            क्ष्म्य
17425          </div>
17426          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17427            क्स्प्र
17428          </div>
17429          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17430            क्स्प्ल
17431          </div>
17432          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17433            न्स्म्य
17434          </div>
17435          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17436            क़्क़
17437          </div>
17438          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17439            ल्ज़
17440          </div>
17441          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17442            श्क़
17443          </div>
17444          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17445            क़्त
17446          </div>
17447          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17448            क़्फ
17449          </div>
17450          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17451            क़्फ़
17452          </div>
17453          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17454            क़्ब
17455          </div>
17456          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17457            क़्म
17458          </div>
17459          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17460            ख़्त
17461          </div>
17462          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17463            ख़्म
17464          </div>
17465          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17466            ख़्व
17467          </div>
17468          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17469            ख़्य
17470          </div>
17471          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17472            ख़्श
17473          </div>
17474          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17475            ख़्स
17476          </div>
17477          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17478            ज़्ज़
17479          </div>
17480          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17481            ज़्य
17482          </div>
17483          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17484            फ़्ज़
17485          </div>
17486          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17487            फ़्त
17488          </div>
17489          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17490            फ़्फ़
17491          </div>
17492          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17493            फ़्स
17494          </div>
17495
17496          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17497            क्ल
17498          </div>
17499          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17500            क्श
17501          </div>
17502          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17503            क्स्प्ल
17504          </div>
17505          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17506            ख्श
17507          </div>
17508          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17509            ग्ल
17510          </div>
17511          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17512            ञ्श
17513          </div>
17514          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17515            त्प्ल
17516          </div>
17517          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17518            त्ल
17519          </div>
17520          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17521            प्ल
17522          </div>
17523          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17524            फ्ल
17525          </div>
17526          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17527            फ्श
17528          </div>
17529          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17530            ब्ल
17531          </div>
17532          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17533            ब्श
17534          </div>
17535          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17536            भ्ल
17537          </div>
17538          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17539            म्प्ल
17540          </div>
17541          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17542            म्ल
17543          </div>
17544          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17545            म्श
17546          </div>
17547          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17548            ल्ल
17549          </div>
17550          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17551            व्ल
17552          </div>
17553          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17554            श्क
17555          </div>
17556          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17557            श्च
17558          </div>
17559          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17560            श्छ
17561          </div>
17562          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17563            श्ट
17564          </div>
17565          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17566            श्त
17567          </div>
17568          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17569            श्न
17570          </div>
17571          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17572            श्म
17573          </div>
17574          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17575            श्य
17576          </div>
17577          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17578            श्ल
17579          </div>
17580          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17581            श्व
17582          </div>
17583          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17584            श्श
17585          </div>
17586          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17587            स्ल
17588          </div>
17589          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17590            स्प
17591          </div>
17592          <div data-component="char-set__char" class="charset-single-char" lang="mr">
17593            ह्ल
17594          </div>
17595        </div>
17596      </div>
17597    </div>
17598  </div>
17599  <!-- End of Charset Section -->
17600  <!-- Start of one single Charset Section -->
17601  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Ligatures">
17602    <div class="flex flex-row justify-between">
17603      <div class="">Ligatures</div>
17604      <div data-component="char-set__subset-size" class=""></div>
17605    </div>
17606    <div>
17607      <div class="character-set-section mt-4">
17608        <div class="character-set-container text-rg">
17609          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17610            ईं
17611          </div>
17612          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17613            ईँ
17614          </div>
17615          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17616            दृ
17617          </div>
17618          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17619            रु
17620          </div>
17621          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17622            रू
17623          </div>
17624          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17625            शृ
17626          </div>
17627          <div data-component="char-set__char" class="charset-single-char" lang="hi">
17628            ह
17629          </div>
17630        </div>
17631      </div>
17632    </div>
17633  </div>
17634  <!-- End of Charset Section -->
17635</div>
17636
17637  <!-- Start of one single Charset Section -->
17638<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="hebrew">
17639  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Hebrew" data-char-set-subset="Basic Alphabet">
17640    <div class="flex flex-row justify-between">
17641      <div data-component="char-set__subset-size" class=""></div>
17642      <div class="">Basic Alphabet</div>
17643    </div>
17644    <div>
17645      <div class="character-set-section mt-4">
17646        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
17647          <div data-component="char-set__char" class="charset-single-char">
17648            א
17649          </div>
17650          <div data-component="char-set__char" class="charset-single-char">
17651            ב
17652          </div>
17653          <div data-component="char-set__char" class="charset-single-char">
17654            ג
17655          </div>
17656          <div data-component="char-set__char" class="charset-single-char">
17657            ד
17658          </div>
17659          <div data-component="char-set__char" class="charset-single-char">
17660            ה
17661          </div>
17662          <div data-component="char-set__char" class="charset-single-char">
17663            ו
17664          </div>
17665          <div data-component="char-set__char" class="charset-single-char">
17666            ז
17667          </div>
17668          <div data-component="char-set__char" class="charset-single-char">
17669            ח
17670          </div>
17671          <div data-component="char-set__char" class="charset-single-char">
17672            ט
17673          </div>
17674          <div data-component="char-set__char" class="charset-single-char">
17675            י
17676          </div>
17677          <div data-component="char-set__char" class="charset-single-char">
17678            כ
17679          </div>
17680          <div data-component="char-set__char" class="charset-single-char">
17681            ך
17682          </div>
17683          <div data-component="char-set__char" class="charset-single-char">
17684            ל
17685          </div>
17686          <div data-component="char-set__char" class="charset-single-char">
17687            מ
17688          </div>
17689          <div data-component="char-set__char" class="charset-single-char">
17690            ם
17691          </div>
17692          <div data-component="char-set__char" class="charset-single-char">
17693            × 
17694          </div>
17695          <div data-component="char-set__char" class="charset-single-char">
17696            ן
17697          </div>
17698          <div data-component="char-set__char" class="charset-single-char">
17699            ס
17700          </div>
17701          <div data-component="char-set__char" class="charset-single-char">
17702            ×¢
17703          </div>
17704          <div data-component="char-set__char" class="charset-single-char">
17705            פ
17706          </div>
17707          <div data-component="char-set__char" class="charset-single-char">
17708            ×£
17709          </div>
17710          <div data-component="char-set__char" class="charset-single-char">
17711            צ
17712          </div>
17713          <div data-component="char-set__char" class="charset-single-char">
17714            ×¥
17715          </div>
17716          <div data-component="char-set__char" class="charset-single-char">
17717            ×§
17718          </div>
17719          <div data-component="char-set__char" class="charset-single-char">
17720            ר
17721          </div>
17722          <div data-component="char-set__char" class="charset-single-char">
17723            ש
17724          </div>
17725          <div data-component="char-set__char" class="charset-single-char">
17726            ת
17727          </div>
17728        </div>
17729      </div>
17730    </div>
17731  </div>
17732  <!-- End of Charset Section -->
17733  <!-- Start of one single Charset Section -->
17734  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Hebrew" data-char-set-subset="Nikud">
17735    <div class="flex flex-row justify-between">
17736      <div data-component="char-set__subset-size" class=""></div>
17737      <div class="">Nikud</div>
17738    </div>
17739    <div>
17740      <div class="character-set-section mt-4">
17741        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
17742          <div data-component="char-set__char" class="charset-single-char">
17743            אַ
17744          </div>
17745          <div data-component="char-set__char" class="charset-single-char">
17746            אָ
17747          </div>
17748          <div data-component="char-set__char" class="charset-single-char">
17749            אּ
17750          </div>
17751          <div data-component="char-set__char" class="charset-single-char">
17752            בּ
17753          </div>
17754          <div data-component="char-set__char" class="charset-single-char">
17755            גּ
17756          </div>
17757          <div data-component="char-set__char" class="charset-single-char">
17758            דּ
17759          </div>
17760          <div data-component="char-set__char" class="charset-single-char">
17761            הּ
17762          </div>
17763          <div data-component="char-set__char" class="charset-single-char">
17764            וֹ
17765          </div>
17766          <div data-component="char-set__char" class="charset-single-char">
17767            וּ
17768          </div>
17769          <div data-component="char-set__char" class="charset-single-char">
17770            זּ
17771          </div>
17772          <div data-component="char-set__char" class="charset-single-char">
17773            טּ
17774          </div>
17775          <div data-component="char-set__char" class="charset-single-char">
17776            יּ
17777          </div>
17778          <div data-component="char-set__char" class="charset-single-char">
17779            ךּ
17780          </div>
17781          <div data-component="char-set__char" class="charset-single-char">
17782            כּ
17783          </div>
17784          <div data-component="char-set__char" class="charset-single-char">
17785            לּ
17786          </div>
17787          <div data-component="char-set__char" class="charset-single-char">
17788            מּ
17789          </div>
17790          <div data-component="char-set__char" class="charset-single-char">
17791            × Ö¼
17792          </div>
17793          <div data-component="char-set__char" class="charset-single-char">
17794            סּ
17795          </div>
17796          <div data-component="char-set__char" class="charset-single-char">
17797            שּׁ
17798          </div>
17799          <div data-component="char-set__char" class="charset-single-char">
17800            שּׂ
17801          </div>
17802          <div data-component="char-set__char" class="charset-single-char">
17803            תּ
17804          </div>
17805          <div data-component="char-set__char" class="charset-single-char">
17806            פּ
17807          </div>
17808          <div data-component="char-set__char" class="charset-single-char">
17809            ×£Ö¼
17810          </div>
17811          <div data-component="char-set__char" class="charset-single-char">
17812            צּ
17813          </div>
17814          <div data-component="char-set__char" class="charset-single-char">
17815            ×§Ö¼
17816          </div>
17817          <div data-component="char-set__char" class="charset-single-char">
17818            רּ
17819          </div>
17820          <div data-component="char-set__char" class="charset-single-char">
17821            שּ
17822          </div>
17823          <div data-component="char-set__char" class="charset-single-char">
17824            שׁ
17825          </div>
17826          <div data-component="char-set__char" class="charset-single-char">
17827            שׂ
17828          </div>
17829          <div data-component="char-set__char" class="charset-single-char">
17830            בֿ
17831          </div>
17832          <div data-component="char-set__char" class="charset-single-char">
17833            כֿ
17834          </div>
17835          <div data-component="char-set__char" class="charset-single-char">
17836            פֿ
17837          </div>
17838        </div>
17839      </div>
17840    </div>
17841  </div>
17842  <!-- End of Charset Section -->
17843  <!-- Start of one single Charset Section -->
17844  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Hebrew" data-char-set-subset="Alternative Forms">
17845    <div class="flex flex-row justify-between">
17846      <div data-component="char-set__subset-size" class=""></div>
17847      <div class="">Alternative Forms</div>
17848    </div>
17849    <div>
17850      <div class="character-set-section mt-4">
17851        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
17852          <div data-component="char-set__char" class="charset-single-char">
17853            ײ
17854          </div>
17855          <div data-component="char-set__char" class="charset-single-char">
17856            ×±
17857          </div>
17858          <div data-component="char-set__char" class="charset-single-char">
17859            ×°
17860          </div>
17861        </div>
17862      </div>
17863    </div>
17864  </div>
17865  <!-- End of Charset Section -->
17866  <!-- Start of one single Charset Section -->
17867  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Hebrew" data-char-set-subset="Punctuation">
17868    <div class="flex flex-row justify-between">
17869      <div data-component="char-set__subset-size" class=""></div>
17870      <div class="">Punctuation</div>
17871    </div>
17872    <div>
17873      <div class="character-set-section mt-4">
17874        <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override">
17875          <div data-component="char-set__char" class="charset-single-char">
17876            Ö¾
17877          </div>
17878          <div data-component="char-set__char" class="charset-single-char">
17879            ׳
17880          </div>
17881          <div data-component="char-set__char" class="charset-single-char">
17882            ×´
17883          </div>
17884        </div>
17885      </div>
17886    </div>
17887  </div>
17888  <!-- End of Charset Section -->
17889</div>
17890
17891  <!-- Start of one single Charset Section -->
17892<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="korean">
17893  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Korean" data-char-set-subset="Jamo">
17894    <div class="flex flex-row justify-between">
17895      <div class="">Jamo</div>
17896      <div data-component="char-set__subset-size" class=""></div>
17897    </div>
17898    <div>
17899      <div class="character-set-section mt-4">
17900        <div class="character-set-container text-rg">
17901          <div data-component="char-set__char" class="charset-single-char">
17902            ᄀ
17903          </div>
17904          <div data-component="char-set__char" class="charset-single-char">
17905            ᄂ
17906          </div>
17907          <div data-component="char-set__char" class="charset-single-char">
17908            ᄃ
17909          </div>
17910          <div data-component="char-set__char" class="charset-single-char">
17911            ᄅ
17912          </div>
17913          <div data-component="char-set__char" class="charset-single-char">
17914            ᄆ
17915          </div>
17916          <div data-component="char-set__char" class="charset-single-char">
17917            ᄇ
17918          </div>
17919          <div data-component="char-set__char" class="charset-single-char">
17920            ᄉ
17921          </div>
17922          <div data-component="char-set__char" class="charset-single-char">
17923            ᄋ
17924          </div>
17925          <div data-component="char-set__char" class="charset-single-char">
17926            ᄌ
17927          </div>
17928          <div data-component="char-set__char" class="charset-single-char">
17929            ᄎ
17930          </div>
17931          <div data-component="char-set__char" class="charset-single-char">
17932            ᄏ
17933          </div>
17934          <div data-component="char-set__char" class="charset-single-char">
17935            ᄐ
17936          </div>
17937          <div data-component="char-set__char" class="charset-single-char">
17938            ᄑ
17939          </div>
17940          <div data-component="char-set__char" class="charset-single-char">
17941            ᄒ
17942          </div>
17943          <div data-component="char-set__char" class="charset-single-char">
17944            ᅡ
17945          </div>
17946          <div data-component="char-set__char" class="charset-single-char">
17947            ᅣ
17948          </div>
17949          <div data-component="char-set__char" class="charset-single-char">
17950            ᅥ
17951          </div>
17952          <div data-component="char-set__char" class="charset-single-char">
17953            ᅧ
17954          </div>
17955          <div data-component="char-set__char" class="charset-single-char">
17956            ᅩ
17957          </div>
17958          <div data-component="char-set__char" class="charset-single-char">
17959            ᅭ
17960          </div>
17961          <div data-component="char-set__char" class="charset-single-char">
17962            ᅮ
17963          </div>
17964          <div data-component="char-set__char" class="charset-single-char">
17965            ᅲ
17966          </div>
17967          <div data-component="char-set__char" class="charset-single-char">
17968            ᅳ
17969          </div>
17970          <div data-component="char-set__char" class="charset-single-char">
17971            ᅵ
17972          </div>
17973          <div data-component="char-set__char" class="charset-single-char">
17974            ᄁ
17975          </div>
17976          <div data-component="char-set__char" class="charset-single-char">
17977            ᆪ
17978          </div>
17979          <div data-component="char-set__char" class="charset-single-char">
17980            ᆬ
17981          </div>
17982          <div data-component="char-set__char" class="charset-single-char">
17983            ᆭ
17984          </div>
17985          <div data-component="char-set__char" class="charset-single-char">
17986            ᄄ
17987          </div>
17988          <div data-component="char-set__char" class="charset-single-char">
17989            ᆰ
17990          </div>
17991          <div data-component="char-set__char" class="charset-single-char">
17992            ᆱ
17993          </div>
17994          <div data-component="char-set__char" class="charset-single-char">
17995            ᆲ
17996          </div>
17997          <div data-component="char-set__char" class="charset-single-char">
17998            ᆳ
17999          </div>
18000          <div data-component="char-set__char" class="charset-single-char">
18001            ᆴ
18002          </div>
18003          <div data-component="char-set__char" class="charset-single-char">
18004            ᆵ
18005          </div>
18006          <div data-component="char-set__char" class="charset-single-char">
18007            ᄚ
18008          </div>
18009          <div data-component="char-set__char" class="charset-single-char">
18010            ᄈ
18011          </div>
18012          <div data-component="char-set__char" class="charset-single-char">
18013            ᄡ
18014          </div>
18015          <div data-component="char-set__char" class="charset-single-char">
18016            ᄊ
18017          </div>
18018          <div data-component="char-set__char" class="charset-single-char">
18019            ᄍ
18020          </div>
18021          <div data-component="char-set__char" class="charset-single-char">
18022            ᅢ
18023          </div>
18024          <div data-component="char-set__char" class="charset-single-char">
18025            ᅤ
18026          </div>
18027          <div data-component="char-set__char" class="charset-single-char">
18028            ᅦ
18029          </div>
18030          <div data-component="char-set__char" class="charset-single-char">
18031            ᅨ
18032          </div>
18033          <div data-component="char-set__char" class="charset-single-char">
18034            ᅪ
18035          </div>
18036          <div data-component="char-set__char" class="charset-single-char">
18037            ᅫ
18038          </div>
18039          <div data-component="char-set__char" class="charset-single-char">
18040            ᅬ
18041          </div>
18042          <div data-component="char-set__char" class="charset-single-char">
18043            ᅯ
18044          </div>
18045          <div data-component="char-set__char" class="charset-single-char">
18046            ᅰ
18047          </div>
18048          <div data-component="char-set__char" class="charset-single-char">
18049            ᅱ
18050          </div>
18051          <div data-component="char-set__char" class="charset-single-char">
18052            ᅴ
18053          </div>
18054        </div>
18055      </div>
18056    </div>
18057  </div>
18058  <!-- End of Charset Section -->
18059  <!-- Start of one single Charset Section -->
18060  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Korean" data-char-set-subset="Syllabic Blocks">
18061    <div class="flex flex-row justify-between">
18062      <div class="">Syllabic Blocks</div>
18063      <!-- <div data-component="char-set__subset-size" class=""></div> -->
18064      <div class="">Showing 380 of 2663</div>
18065    </div>
18066    <div>
18067      <div class="character-set-section mt-4">
18068        <div class="character-set-container text-rg">
18069          <div data-component="char-set__char" class="charset-single-char">
18070            가
18071          </div>
18072          <div data-component="char-set__char" class="charset-single-char">
18073            각
18074          </div>
18075          <div data-component="char-set__char" class="charset-single-char">
18076            간
18077          </div>
18078          <div data-component="char-set__char" class="charset-single-char">
18079            갇
18080          </div>
18081          <div data-component="char-set__char" class="charset-single-char">
18082            갈
18083          </div>
18084          <div data-component="char-set__char" class="charset-single-char">
18085            갉
18086          </div>
18087          <div data-component="char-set__char" class="charset-single-char">
18088            갊
18089          </div>
18090          <div data-component="char-set__char" class="charset-single-char">
18091            갋
18092          </div>
18093          <div data-component="char-set__char" class="charset-single-char">
18094            감
18095          </div>
18096          <div data-component="char-set__char" class="charset-single-char">
18097            갑
18098          </div>
18099          <div data-component="char-set__char" class="charset-single-char">
18100            값
18101          </div>
18102          <div data-component="char-set__char" class="charset-single-char">
18103            갓
18104          </div>
18105          <div data-component="char-set__char" class="charset-single-char">
18106            갔
18107          </div>
18108          <div data-component="char-set__char" class="charset-single-char">
18109            강
18110          </div>
18111          <div data-component="char-set__char" class="charset-single-char">
18112            갖
18113          </div>
18114          <div data-component="char-set__char" class="charset-single-char">
18115            갗
18116          </div>
18117          <div data-component="char-set__char" class="charset-single-char">
18118            같
18119          </div>
18120          <div data-component="char-set__char" class="charset-single-char">
18121            갚
18122          </div>
18123          <div data-component="char-set__char" class="charset-single-char">
18124            갛
18125          </div>
18126          <div data-component="char-set__char" class="charset-single-char">
18127            개
18128          </div>
18129          <div data-component="char-set__char" class="charset-single-char">
18130            객
18131          </div>
18132          <div data-component="char-set__char" class="charset-single-char">
18133            ê° 
18134          </div>
18135          <div data-component="char-set__char" class="charset-single-char">
18136            ê°£
18137          </div>
18138          <div data-component="char-set__char" class="charset-single-char">
18139            ê°¤
18140          </div>
18141          <div data-component="char-set__char" class="charset-single-char">
18142            ê°¬
18143          </div>
18144          <div data-component="char-set__char" class="charset-single-char">
18145            ê°­
18146          </div>
18147          <div data-component="char-set__char" class="charset-single-char">
18148            ê°¯
18149          </div>
18150          <div data-component="char-set__char" class="charset-single-char">
18151            ê°°
18152          </div>
18153          <div data-component="char-set__char" class="charset-single-char">
18154            ê°±
18155          </div>
18156          <div data-component="char-set__char" class="charset-single-char">
18157            ê°¸
18158          </div>
18159          <div data-component="char-set__char" class="charset-single-char">
18160            ê°¹
18161          </div>
18162          <div data-component="char-set__char" class="charset-single-char">
18163            ê°¼
18164          </div>
18165          <div data-component="char-set__char" class="charset-single-char">
18166            걀
18167          </div>
18168          <div data-component="char-set__char" class="charset-single-char">
18169            걋
18170          </div>
18171          <div data-component="char-set__char" class="charset-single-char">
18172            걍
18173          </div>
18174          <div data-component="char-set__char" class="charset-single-char">
18175            걔
18176          </div>
18177          <div data-component="char-set__char" class="charset-single-char">
18178            걘
18179          </div>
18180          <div data-component="char-set__char" class="charset-single-char">
18181            걜
18182          </div>
18183          <div data-component="char-set__char" class="charset-single-char">
18184            ê±¥
18185          </div>
18186          <div data-component="char-set__char" class="charset-single-char">
18187            ê±°
18188          </div>
18189          <div data-component="char-set__char" class="charset-single-char">
18190            ê±±
18191          </div>
18192          <div data-component="char-set__char" class="charset-single-char">
18193            ê±´
18194          </div>
18195          <div data-component="char-set__char" class="charset-single-char">
18196            ê±·
18197          </div>
18198          <div data-component="char-set__char" class="charset-single-char">
18199            걸
18200          </div>
18201          <div data-component="char-set__char" class="charset-single-char">
18202            걺
18203          </div>
18204          <div data-component="char-set__char" class="charset-single-char">
18205            검
18206          </div>
18207          <div data-component="char-set__char" class="charset-single-char">
18208            겁
18209          </div>
18210          <div data-component="char-set__char" class="charset-single-char">
18211            겂
18212          </div>
18213          <div data-component="char-set__char" class="charset-single-char">
18214            것
18215          </div>
18216          <div data-component="char-set__char" class="charset-single-char">
18217            겄
18218          </div>
18219          <div data-component="char-set__char" class="charset-single-char">
18220            겅
18221          </div>
18222          <div data-component="char-set__char" class="charset-single-char">
18223            겆
18224          </div>
18225          <
18225div data-component="char-set__char" class="charset-single-char">
18226            겉
18227          </div>
18228          <div data-component="char-set__char" class="charset-single-char">
18229            겊
18230          </div>
18231
18232          <div data-component="char-set__char" class="charset-single-char">
18233            겋
18234          </div>
18235          <div data-component="char-set__char" class="charset-single-char">
18236            게
18237          </div>
18238          <div data-component="char-set__char" class="charset-single-char">
18239            겍
18240          </div>
18241          <div data-component="char-set__char" class="charset-single-char">
18242            겐
18243          </div>
18244          <div data-component="char-set__char" class="charset-single-char">
18245            겔
18246          </div>
18247          <div data-component="char-set__char" class="charset-single-char">
18248            겜
18249          </div>
18250          <div data-component="char-set__char" class="charset-single-char">
18251            겝
18252          </div>
18253          <div data-component="char-set__char" class="charset-single-char">
18254            겟
18255          </div>
18256          <div data-component="char-set__char" class="charset-single-char">
18257            ê² 
18258          </div>
18259          <div data-component="char-set__char" class="charset-single-char">
18260            겡
18261          </div>
18262          <div data-component="char-set__char" class="charset-single-char">
18263            겨
18264          </div>
18265          <div data-component="char-set__char" class="charset-single-char">
18266            격
18267          </div>
18268          <div data-component="char-set__char" class="charset-single-char">
18269            겪
18270          </div>
18271          <div data-component="char-set__char" class="charset-single-char">
18272            견
18273          </div>
18274          <div data-component="char-set__char" class="charset-single-char">
18275            겯
18276          </div>
18277          <div data-component="char-set__char" class="charset-single-char">
18278            ê²°
18279          </div>
18280          <div data-component="char-set__char" class="charset-single-char">
18281            ê²·
18282          </div>
18283          <div data-component="char-set__char" class="charset-single-char">
18284            겸
18285          </div>
18286          <div data-component="char-set__char" class="charset-single-char">
18287            ê²¹
18288          </div>
18289          <div data-component="char-set__char" class="charset-single-char">
18290            ê²»
18291          </div>
18292          <div data-component="char-set__char" class="charset-single-char">
18293            ê²¼
18294          </div>
18295          <div data-component="char-set__char" class="charset-single-char">
18296            ê²½
18297          </div>
18298          <div data-component="char-set__char" class="charset-single-char">
18299            겿
18300          </div>
18301          <div data-component="char-set__char" class="charset-single-char">
18302            겿
18303          </div>
18304          <div data-component="char-set__char" class="charset-single-char">
18305            곁
18306          </div>
18307          <div data-component="char-set__char" class="charset-single-char">
18308            계
18309          </div>
18310          <div data-component="char-set__char" class="charset-single-char">
18311            곈
18312          </div>
18313          <div data-component="char-set__char" class="charset-single-char">
18314            곌
18315          </div>
18316          <div data-component="char-set__char" class="charset-single-char">
18317            곕
18318          </div>
18319          <div data-component="char-set__char" class="charset-single-char">
18320            곗
18321          </div>
18322          <div data-component="char-set__char" class="charset-single-char">
18323            곘
18324          </div>
18325          <div data-component="char-set__char" class="charset-single-char">
18326            ê³ 
18327          </div>
18328          <div data-component="char-set__char" class="charset-single-char">
18329            곡
18330          </div>
18331          <div data-component="char-set__char" class="charset-single-char">
18332            곤
18333          </div>
18334          <div data-component="char-set__char" class="charset-single-char">
18335            ê³§
18336          </div>
18337          <div data-component="char-set__char" class="charset-single-char">
18338            골
18339          </div>
18340          <div data-component="char-set__char" class="charset-single-char">
18341            곪
18342          </div>
18343          <div data-component="char-set__char" class="charset-single-char">
18344            곬
18345          </div>
18346          <div data-component="char-set__char" class="charset-single-char">
18347            곯
18348          </div>
18349          <div data-component="char-set__char" class="charset-single-char">
18350            ê³°
18351          </div>
18352          <div data-component="char-set__char" class="charset-single-char">
18353            ê³±
18354          </div>
18355          <div data-component="char-set__char" class="charset-single-char">
18356            ê³³
18357          </div>
18358          <div data-component="char-set__char" class="charset-single-char">
18359            ê³µ
18360          </div>
18361          <div data-component="char-set__char" class="charset-single-char">
18362            ê³¶
18363          </div>
18364          <div data-component="char-set__char" class="charset-single-char">
18365            ê³¹
18366          </div>
18367          <div data-component="char-set__char" class="charset-single-char">
18368            ê³¼
18369          </div>
18370          <div data-component="char-set__char" class="charset-single-char">
18371            ê³½
18372          </div>
18373          <div data-component="char-set__char" class="charset-single-char">
18374            관
18375          </div>
18376          <div data-component="char-set__char" class="charset-single-char">
18377            괄
18378          </div>
18379          <div data-component="char-set__char" class="charset-single-char">
18380            괆
18381          </div>
18382          <div data-component="char-set__char" class="charset-single-char">
18383            괌
18384          </div>
18385          <div data-component="char-set__char" class="charset-single-char">
18386            괍
18387          </div>
18388          <div data-component="char-set__char" class="charset-single-char">
18389            괏
18390          </div>
18391          <div data-component="char-set__char" class="charset-single-char">
18392            괐
18393          </div>
18394          <div data-component="char-set__char" class="charset-single-char">
18395            광
18396          </div>
18397          <div data-component="char-set__char" class="charset-single-char">
18398            괒
18399          </div>
18400          <div data-component="char-set__char" class="charset-single-char">
18401            괘
18402          </div>
18403          <div data-component="char-set__char" class="charset-single-char">
18404            괜
18405          </div>
18406          <div data-component="char-set__char" class="charset-single-char">
18407            ê´ 
18408          </div>
18409          <div data-component="char-set__char" class="charset-single-char">
18410            ê´¢
18411          </div>
18412          <div data-component="char-set__char" class="charset-single-char">
18413            ê´©
18414          </div>
18415          <div data-component="char-set__char" class="charset-single-char">
18416            ê´¬
18417          </div>
18418          <div data-component="char-set__char" class="charset-single-char">
18419            ê´­
18420          </div>
18421          <div data-component="char-set__char" class="charset-single-char">
18422            ê´´
18423          </div>
18424          <div data-component="char-set__char" class="charset-single-char">
18425            ê´µ
18426          </div>
18427          <div data-component="char-set__char" class="charset-single-char">
18428            ê´¸
18429          </div>
18430          <div data-component="char-set__char" class="charset-single-char">
18431            ê´¼
18432          </div>
18433          <div data-component="char-set__char" class="charset-single-char">
18434            굄
18435          </div>
18436          <div data-component="char-set__char" class="charset-single-char">
18437            굅
18438          </div>
18439          <div data-component="char-set__char" class="charset-single-char">
18440            굇
18441          </div>
18442          <div data-component="char-set__char" class="charset-single-char">
18443            굉
18444          </div>
18445          <div data-component="char-set__char" class="charset-single-char">
18446            교
18447          </div>
18448          <div data-component="char-set__char" class="charset-single-char">
18449            굔
18450          </div>
18451          <div data-component="char-set__char" class="charset-single-char">
18452            굘
18453          </div>
18454          <div data-component="char-set__char" class="charset-single-char">
18455            êµ 
18456          </div>
18457          <div data-component="char-set__char" class="charset-single-char">
18458            굡
18459          </div>
18460          <div data-component="char-set__char" class="charset-single-char">
18461            êµ£
18462          </div>
18463          <div data-component="char-set__char" class="charset-single-char">
18464            êµ¥
18465          </div>
18466          <div data-component="char-set__char" class="charset-single-char">
18467            구
18468          </div>
18469          <div data-component="char-set__char" class="charset-single-char">
18470            êµ­
18471          </div>
18472          <div data-component="char-set__char" class="charset-single-char">
18473            êµ°
18474          </div>
18475          <div data-component="char-set__char" class="charset-single-char">
18476            êµ³
18477          </div>
18478          <div data-component="char-set__char" class="charset-single-char">
18479            êµ´
18480          </div>
18481          <div data-component="char-set__char" class="charset-single-char">
18482            êµµ
18483          </div>
18484          <div data-component="char-set__char" class="charset-single-char">
18485            êµ¶
18486          </div>
18487          <div data-component="char-set__char" class="charset-single-char">
18488            가
18489          </div>
18490          <div data-component="char-set__char" class="charset-single-char">
18491            각
18492          </div>
18493          <div data-component="char-set__char" class="charset-single-char">
18494            간
18495          </div>
18496          <div data-component="char-set__char" class="charset-single-char">
18497            갇
18498          </div>
18499          <div data-component="char-set__char" class="charset-single-char">
18500            갈
18501          </div>
18502          <div data-component="char-set__char" class="charset-single-char">
18503            갉
18504          </div>
18505          <div data-component="char-set__char" class="charset-single-char">
18506            갊
18507          </div>
18508          <div data-component="char-set__char" class="charset-single-char">
18509            갋
18510          </div>
18511          <div data-component="char-set__char" class="charset-single-char">
18512            감
18513          </div>
18514          <div data-component="char-set__char" class="charset-single-char">
18515            갑
18516          </div>
18517          <div data-component="char-set__char" class="charset-single-char">
18518            값
18519          </div>
18520          <div data-component="char-set__char" class="charset-single-char">
18521            갓
18522          </div>
18523          <div data-component="char-set__char" class="charset-single-char">
18524            갔
18525          </div>
18526          <div data-component="char-set__char" class="charset-single-char">
18527            강
18528          </div>
18529          <div data-component="char-set__char" class="charset-single-char">
18530            갖
18531          </div>
18532          <div data-component="char-set__char" class="charset-single-char">
18533            갗
18534          </div>
18535          <div data-component="char-set__char" class="charset-single-char">
18536            같
18537          </div>
18538          <div data-component="char-set__char" class="charset-single-char">
18539            갚
18540          </div>
18541          <div data-component="char-set__char" class="charset-single-char">
18542            갛
18543          </div>
18544          <div data-component="char-set__char" class="charset-single-char">
18545            개
18546          </div>
18547          <div data-component="char-set__char" class="charset-single-char">
18548            객
18549          </div>
18550          <div data-component="char-set__char" class="charset-single-char">
18551            ê° 
18552          </div>
18553          <div data-component="char-set__char" class="charset-single-char">
18554            ê°£
18555          </div>
18556          <div data-component="char-set__char" class="charset-single-char">
18557            ê°¤
18558          </div>
18559          <div data-component="char-set__char" class="charset-single-char">
18560            ê°¬
18561          </div>
18562          <div data-component="char-set__char" class="charset-single-char">
18563            ê°­
18564          </div>
18565          <div data-component="char-set__char" class="charset-single-char">
18566            ê°¯
18567          </div>
18568          <div data-component="char-set__char" class="charset-single-char">
18569            ê°°
18570          </div>
18571          <div data-component="char-set__char" class="charset-single-char">
18572            ê°±
18573          </div>
18574          <div data-component="char-set__char" class="charset-single-char">
18575            ê°¸
18576          </div>
18577          <div data-component="char-set__char" class="charset-single-char">
18578            ê°¹
18579          </div>
18580          <div data-component="char-set__char" class="charset-single-char">
18581            ê°¼
18582          </div>
18583          <div data-component="char-set__char" class="charset-single-char">
18584            걀
18585          </div>
18586          <div data-component="char-set__char" class="charset-single-char">
18587            êµ»
18588          </div>
18589          <div data-component="char-set__char" class="charset-single-char">
18590            êµ¼
18591          </div>
18592          <div data-component="char-set__char" class="charset-single-char">
18593            êµ½
18594          </div>
18595          <div data-component="char-set__char" class="charset-single-char">
18596            굿
18597          </div>
18598          <div data-component="char-set__char" class="charset-single-char">
18599            궁
18600          </div>
18601          <div data-component="char-set__char" class="charset-single-char">
18602            궂
18603          </div>
18604          <div data-component="char-set__char" class="charset-single-char">
18605            궃
18606          </div>
18607          <div data-component="char-set__char" class="charset-single-char">
18608            궈
18609          </div>
18610          <div data-component="char-set__char" class="charset-single-char">
18611            궉
18612          </div>
18613          <div data-component="char-set__char" class="charset-single-char">
18614            권
18615          </div>
18616          <div data-component="char-set__char" class="charset-single-char">
18617            궐
18618          </div>
18619          <div data-component="char-set__char" class="charset-single-char">
18620            궜
18621          </div>
18622          <div data-component="char-set__char" class="charset-single-char">
18623            궝
18624          </div>
18625          <div data-component="char-set__char" class="charset-single-char">
18626            궤
18627          </div>
18628          <div data-component="char-set__char" class="charset-single-char">
18629            ê¶·
18630          </div>
18631          <div data-component="char-set__char" class="charset-single-char">
18632            궸
18633          </div>
18634          <div data-component="char-set__char" class="charset-single-char">
18635            귀
18636          </div>
18637          <div data-component="char-set__char" class="charset-single-char">
18638            귁
18639          </div>
18640          <div data-component="char-set__char" class="charset-single-char">
18641            귄
18642          </div>
18643          <div data-component="char-set__char" class="charset-single-char">
18644            귈
18645          </div>
18646          <div data-component="char-set__char" class="charset-single-char">
18647            귐
18648          </div>
18649          <div data-component="char-set__char" class="charset-single-char">
18650            귑
18651          </div>
18652          <div data-component="char-set__char" class="charset-single-char">
18653            귓
18654          </div>
18655          <div data-component="char-set__char" class="charset-single-char">
18656            귕
18657          </div>
18658          <div data-component="char-set__char" class="charset-single-char">
18659            규
18660          </div>
18661          <div data-component="char-set__char" class="charset-single-char">
18662            ê· 
18663          </div>
18664          <div data-component="char-set__char" class="charset-single-char">
18665            ê·¤
18666          </div>
18667          <div data-component="char-set__char" class="charset-single-char">
18668            ê·¬
18669          </div>
18670          <div data-component="char-set__char" class="charset-single-char">
18671            ê·­
18672          </div>
18673          <div data-component="char-set__char" class="charset-single-char">
18674            ê·¸
18675          </div>
18676          <div data-component="char-set__cha
18676r" class="charset-single-char">
18677            ê·¹
18678          </div>
18679          <div data-component="char-set__char" class="charset-single-char">
18680            ê·¼
18681          </div>
18682          <div data-component="char-set__char" class="charset-single-char">
18683            ê·¿
18684          </div>
18685          <div data-component="char-set__char" class="charset-single-char">
18686            글
18687          </div>
18688          <div data-component="char-set__char" class="charset-single-char">
18689            긁
18690          </div>
18691          <div data-component="char-set__char" class="charset-single-char">
18692            긂
18693          </div>
18694          <div data-component="char-set__char" class="charset-single-char">
18695            긇
18696          </div>
18697          <div data-component="char-set__char" class="charset-single-char">
18698            금
18699          </div>
18700          <div data-component="char-set__char" class="charset-single-char">
18701            급
18702          </div>
18703          <div data-component="char-set__char" class="charset-single-char">
18704            긋
18705          </div>
18706          <div data-component="char-set__char" class="charset-single-char">
18707            긍
18708          </div>
18709          <div data-component="char-set__char" class="charset-single-char">
18710            긏
18711          </div>
18712          <div data-component="char-set__char" class="charset-single-char">
18713            긑
18714          </div>
18715          <div data-component="char-set__char" class="charset-single-char">
18716            긓
18717          </div>
18718          <div data-component="char-set__char" class="charset-single-char">
18719            긔
18720          </div>
18721          <div data-component="char-set__char" class="charset-single-char">
18722            긘
18723          </div>
18724          <div data-component="char-set__char" class="charset-single-char">
18725            긩
18726          </div>
18727          <div data-component="char-set__char" class="charset-single-char">
18728            기
18729          </div>
18730          <div data-component="char-set__char" class="charset-single-char">
18731            긱
18732          </div>
18733          <div data-component="char-set__char" class="charset-single-char">
18734            긴
18735          </div>
18736          <div data-component="char-set__char" class="charset-single-char">
18737            긷
18738          </div>
18739          <div data-component="char-set__char" class="charset-single-char">
18740            길
18741          </div>
18742          <div data-component="char-set__char" class="charset-single-char">
18743            긺
18744          </div>
18745          <div data-component="char-set__char" class="charset-single-char">
18746            김
18747          </div>
18748          <div data-component="char-set__char" class="charset-single-char">
18749            깁
18750          </div>
18751          <div data-component="char-set__char" class="charset-single-char">
18752            깃
18753          </div>
18754          <div data-component="char-set__char" class="charset-single-char">
18755            깄
18756          </div>
18757          <div data-component="char-set__char" class="charset-single-char">
18758            깅
18759          </div>
18760          <div data-component="char-set__char" class="charset-single-char">
18761            깆
18762          </div>
18763          <div data-component="char-set__char" class="charset-single-char">
18764            깊
18765          </div>
18766          <div data-component="char-set__char" class="charset-single-char">
18767            까
18768          </div>
18769          <div data-component="char-set__char" class="charset-single-char">
18770            깍
18771          </div>
18772          <div data-component="char-set__char" class="charset-single-char">
18773            깎
18774          </div>
18775          <div data-component="char-set__char" class="charset-single-char">
18776            깐
18777          </div>
18778          <div data-component="char-set__char" class="charset-single-char">
18779            깔
18780          </div>
18781          <div data-component="char-set__char" class="charset-single-char">
18782            깖
18783          </div>
18784          <div data-component="char-set__char" class="charset-single-char">
18785            깜
18786          </div>
18787          <div data-component="char-set__char" class="charset-single-char">
18788            깝
18789          </div>
18790          <div data-component="char-set__char" class="charset-single-char">
18791            깟
18792          </div>
18793          <div data-component="char-set__char" class="charset-single-char">
18794            걋
18795          </div>
18796          <div data-component="char-set__char" class="charset-single-char">
18797            걍
18798          </div>
18799          <div data-component="char-set__char" class="charset-single-char">
18800            걔
18801          </div>
18802          <div data-component="char-set__char" class="charset-single-char">
18803            걘
18804          </div>
18805          <div data-component="char-set__char" class="charset-single-char">
18806            걜
18807          </div>
18808          <div data-component="char-set__char" class="charset-single-char">
18809            ê±¥
18810          </div>
18811          <div data-component="char-set__char" class="charset-single-char">
18812            ê±°
18813          </div>
18814          <div data-component="char-set__char" class="charset-single-char">
18815            ê±±
18816          </div>
18817          <div data-component="char-set__char" class="charset-single-char">
18818            ê±´
18819          </div>
18820          <div data-component="char-set__char" class="charset-single-char">
18821            ê±·
18822          </div>
18823          <div data-component="char-set__char" class="charset-single-char">
18824            걸
18825          </div>
18826          <div data-component="char-set__char" class="charset-single-char">
18827            걺
18828          </div>
18829          <div data-component="char-set__char" class="charset-single-char">
18830            검
18831          </div>
18832          <div data-component="char-set__char" class="charset-single-char">
18833            겁
18834          </div>
18835          <div data-component="char-set__char" class="charset-single-char">
18836            겂
18837          </div>
18838          <div data-component="char-set__char" class="charset-single-char">
18839            것
18840          </div>
18841          <div data-component="char-set__char" class="charset-single-char">
18842            겄
18843          </div>
18844          <div data-component="char-set__char" class="charset-single-char">
18845            겅
18846          </div>
18847          <div data-component="char-set__char" class="charset-single-char">
18848            겆
18849          </div>
18850          <div data-component="char-set__char" class="charset-single-char">
18851            겉
18852          </div>
18853          <div data-component="char-set__char" class="charset-single-char">
18854            ê¹ 
18855          </div>
18856          <div data-component="char-set__char" class="charset-single-char">
18857            깡
18858          </div>
18859          <div data-component="char-set__char" class="charset-single-char">
18860            ê¹¥
18861          </div>
18862          <div data-component="char-set__char" class="charset-single-char">
18863            깨
18864          </div>
18865          <div data-component="char-set__char" class="charset-single-char">
18866            깩
18867          </div>
18868          <div data-component="char-set__char" class="charset-single-char">
18869            깬
18870          </div>
18871          <div data-component="char-set__char" class="charset-single-char">
18872            깯
18873          </div>
18874          <div data-component="char-set__char" class="charset-single-char">
18875            ê¹°
18876          </div>
18877          <div data-component="char-set__char" class="charset-single-char">
18878            깸
18879          </div>
18880          <div data-component="char-set__char" class="charset-single-char">
18881            ê¹¹
18882          </div>
18883          <div data-component="char-set__char" class="charset-single-char">
18884            ê¹»
18885          </div>
18886          <div data-component="char-set__char" class="charset-single-char">
18887            ê¹¼
18888          </div>
18889          <div data-component="char-set__char" class="charset-single-char">
18890            ê¹½
18891          </div>
18892          <div data-component="char-set__char" class="charset-single-char">
18893            꺄
18894          </div>
18895          <div data-component="char-set__char" class="charset-single-char">
18896            꺅
18897          </div>
18898          <div data-component="char-set__char" class="charset-single-char">
18899            꺆
18900          </div>
18901          <div data-component="char-set__char" class="charset-single-char">
18902            꺌
18903          </div>
18904          <div data-component="char-set__char" class="charset-single-char">
18905            꺍
18906          </div>
18907          <div data-component="char-set__char" class="charset-single-char">
18908            꺠
18909          </div>
18910          <div data-component="char-set__char" class="charset-single-char">
18911            꺤
18912          </div>
18913          <div data-component="char-set__char" class="charset-single-char">
18914            꺼
18915          </div>
18916          <div data-component="char-set__char" class="charset-single-char">
18917            꺽
18918          </div>
18919          <div data-component="char-set__char" class="charset-single-char">
18920            꺾
18921          </div>
18922          <div data-component="char-set__char" class="charset-single-char">
18923            껀
18924          </div>
18925          <div data-component="char-set__char" class="charset-single-char">
18926            껄
18927          </div>
18928          <div data-component="char-set__char" class="charset-single-char">
18929            껌
18930          </div>
18931          <div data-component="char-set__char" class="charset-single-char">
18932            껍
18933          </div>
18934          <div data-component="char-set__char" class="charset-single-char">
18935            껏
18936          </div>
18937          <div data-component="char-set__char" class="charset-single-char">
18938            껐
18939          </div>
18940          <div data-component="char-set__char" class="charset-single-char">
18941            껑
18942          </div>
18943          <div data-component="char-set__char" class="charset-single-char">
18944            껓
18945          </div>
18946          <div data-component="char-set__char" class="charset-single-char">
18947            껕
18948          </div>
18949          <div data-component="char-set__char" class="charset-single-char">
18950            께
18951          </div>
18952          <div data-component="char-set__char" class="charset-single-char">
18953            껙
18954          </div>
18955          <div data-component="char-set__char" class="charset-single-char">
18956            껜
18957          </div>
18958          <div data-component="char-set__char" class="charset-single-char">
18959            껨
18960          </div>
18961          <div data-component="char-set__char" class="charset-single-char">
18962            껫
18963          </div>
18964          <div data-component="char-set__char" class="charset-single-char">
18965            ê»­
18966          </div>
18967          <div data-component="char-set__char" class="charset-single-char">
18968            ê»´
18969          </div>
18970          <div data-component="char-set__char" class="charset-single-char">
18971            껸
18972          </div>
18973          <div data-component="char-set__char" class="charset-single-char">
18974            껼
18975          </div>
18976          <div data-component="char-set__char" class="charset-single-char">
18977            꼇
18978          </div>
18979          <div data-component="char-set__char" class="charset-single-char">
18980            꼈
18981          </div>
18982          <div data-component="char-set__char" class="charset-single-char">
18983            꼉
18984          </div>
18985          <div data-component="char-set__char" class="charset-single-char">
18986            꼍
18987          </div>
18988          <div data-component="char-set__char" class="charset-single-char">
18989            꼐
18990          </div>
18991          <div data-component="char-set__char" class="charset-single-char">
18992            꼬
18993          </div>
18994          <div data-component="char-set__char" class="charset-single-char">
18995            ê¼­
18996          </div>
18997          <div data-component="char-set__char" class="charset-single-char">
18998            ê¼°
18999          </div>
19000          <div data-component="char-set__char" class="charset-single-char">
19001            ê¼²
19002          </div>
19003          <div data-component="char-set__char" class="charset-single-char">
19004            ê¼³
19005          </div>
19006          <div data-component="char-set__char" class="charset-single-char">
19007            ê¼´
19008          </div>
19009          <div data-component="char-set__char" class="charset-single-char">
19010            ê¼¼
19011          </div>
19012          <div data-component="char-set__char" class="charset-single-char">
19013            ê¼½
19014          </div>
19015          <div data-component="char-set__char" class="charset-single-char">
19016            꼿
19017          </div>
19018          <div data-component="char-set__char" class="charset-single-char">
19019            꽁
19020          </div>
19021          <div data-component="char-set__char" class="charset-single-char">
19022            꽂
19023          </div>
19024          <div data-component="char-set__char" class="charset-single-char">
19025            꽃
19026          </div>
19027          <div data-component="char-set__char" class="charset-single-char">
19028            꽅
19029          </div>
19030          <div data-component="char-set__char" class="charset-single-char">
19031            꽈
19032          </div>
19033          <div data-component="char-set__char" class="charset-single-char">
19034            꽉
19035          </div>
19036          <div data-component="char-set__char" class="charset-single-char">
19037            꽌
19038          </div>
19039          <div data-component="char-set__char" class="charset-single-char">
19040            꽐
19041          </div>
19042          <div data-component="char-set__char" class="charset-single-char">
19043            꽜
19044          </div>
19045          <div data-component="char-set__char" class="charset-single-char">
19046            꽝
19047          </div>
19048          <div data-component="char-set__char" class="charset-single-char">
19049            꽤
19050          </div>
19051          <div data-component="char-set__char" class="charset-single-char">
19052            ê½¥
19053          </div>
19054          <div data-component="char-set__char" class="charset-single-char">
19055            꽨
19056          </div>
19057          <div data-component="char-set__char" class="charset-single-char">
19058            꽸
19059          </div>
19060          <div data-component="char-set__char" class="charset-single-char">
19061            겊
19062          </div>
19063          <div data-component="char-set__char" class="charset-single-char">
19064            겋
19065          </div>
19066          <div data-component="char-set__char" class="charset-single-char">
19067            게
19068          </div>
19069          <div data-component="char-set__char" class="charset-single-char">
19070            겍
19071          </div>
19072          <div data-component="char-set__char" class="charset-single-char">
19073            겐
19074          </div>
19075          <div data-component="char-set__char" class="charset-single-char">
19076            겔
19077          </div>
19078          <div data-component="char-set__char" class="charset-single-char">
19079            겜
19080          </div>
19081          <div data-component="char-set__char" class="charset-single-char">
19082            겝
19083          </div>
19084          <div data-component="char-set__char" class="charset-single-char">
19085            겟
19086          </div>
19087          <div data-component="char-set__char" class="charset-single-char">
19088            ê² 
19089          </div>
19090          <div data-component="char-set__char" class="charset-single-char">
19091            겡
19092          </div>
19093          <div data-component="char-set__char" class="charset-single-char">
19094            겨
19095          </div>
19096          <div data-component="char-set__char" class="charset-single-char">
19097            격
19098          </div>
19099          <div data-component="char-set__char" class="charset-single-char">
19100            겪
19101          </div>
19102          <div data-component="char-set__char" class="charset-single-char">
19103            견
19104          </div>
19105          <div data-component="char-set__char" class="charset-single-char">
19106            겯
19107          </div>
19108          <div data-component="char-set__char" class="charset-single-char">
19109            ê²°
19110          </div>
19111          <div data-component="char-set__char" class="charset-single-char">
19112            ê²·
19113          </div>
19114          <div data-component="char-set__char" class="charset-single-char">
19115            겸
19116          </div>
19117          <div data-component="char-set__char" class="charset-single-char">
19118            ê²¹
19119          </div>
19120          <div data-component="char-set__char" class="charset-single-char">
19121            ê²»
19122          </div>
19123          <div data-component="char-set__char" class="charset-single-char">
19124            ê²¼
19125          </div>
19126          <div data-component="char-set__char" class="charset-single-char">
19127  
19127          ê²½
19128          </div>
19129          <div data-component="char-set__char" class="charset-single-char">
19130            겿
19131          </div>
19132          <div data-component="char-set__char" class="charset-single-char">
19133            곁
19134          </div>
19135          <div data-component="char-set__char" class="charset-single-char">
19136            계
19137          </div>
19138          <div data-component="char-set__char" class="charset-single-char">
19139            곈
19140          </div>
19141          <div data-component="char-set__char" class="charset-single-char">
19142            곌
19143          </div>
19144          <div data-component="char-set__char" class="charset-single-char">
19145            ê½¹
19146          </div>
19147          <div data-component="char-set__char" class="charset-single-char">
19148            꾀
19149          </div>
19150          <div data-component="char-set__char" class="charset-single-char">
19151            꾄
19152          </div>
19153          <div data-component="char-set__char" class="charset-single-char">
19154            꾈
19155          </div>
19156          <div data-component="char-set__char" class="charset-single-char">
19157            꾐
19158          </div>
19159          <div data-component="char-set__char" class="charset-single-char">
19160            꾑
19161          </div>
19162          <div data-component="char-set__char" class="charset-single-char">
19163            꾕
19164          </div>
19165          <div data-component="char-set__char" class="charset-single-char">
19166            꾜
19167          </div>
19168          <div data-component="char-set__char" class="charset-single-char">
19169            꾸
19170          </div>
19171          <div data-component="char-set__char" class="charset-single-char">
19172            ê¾¹
19173          </div>
19174          <div data-component="char-set__char" class="charset-single-char">
19175            ê¾¼
19176          </div>
19177          <div data-component="char-set__char" class="charset-single-char">
19178            꿀
19179          </div>
19180          <div data-component="char-set__char" class="charset-single-char">
19181            꿇
19182          </div>
19183          <div data-component="char-set__char" class="charset-single-char">
19184            꿈
19185          </div>
19186          <div data-component="char-set__char" class="charset-single-char">
19187            꿉
19188          </div>
19189          <div data-component="char-set__char" class="charset-single-char">
19190            꿋
19191          </div>
19192          <div data-component="char-set__char" class="charset-single-char">
19193            꿍
19194          </div>
19195          <div data-component="char-set__char" class="charset-single-char">
19196            꿎
19197          </div>
19198          <div data-component="char-set__char" class="charset-single-char">
19199            꿏
19200          </div>
19201          <div data-component="char-set__char" class="charset-single-char">
19202            꿔
19203          </div>
19204          <div data-component="char-set__char" class="charset-single-char">
19205            꿘
19206          </div>
19207          <div data-component="char-set__char" class="charset-single-char">
19208            꿜
19209          </div>
19210        </div>
19211      </div>
19212    </div>
19213  </div>
19214  <!-- End of Charset Section -->
19215</div>
19216
19217  <!-- Start of one single Charset Section -->
19218<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="thai-loopless">
19219  <div class="pb-7 thai-loopless-fonts" data-component="char-set__set-container" data-char-set-script="Thai Loopless" data-char-set-subset="Characters">
19220    <div class="flex flex-row justify-between">
19221      <div class="">Characters</div>
19222      <div data-component="char-set__subset-size" class=""></div>
19223    </div>
19224    <div>
19225      <div class="character-set-section mt-4">
19226        <div class="character-set-container text-rg thai-loopless-fonts">
19227          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19228            ก
19229          </div>
19230          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19231            ข
19232          </div>
19233          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19234            ฃ
19235          </div>
19236          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19237            ค
19238          </div>
19239          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19240            ฅ
19241          </div>
19242          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19243            ฆ
19244          </div>
19245          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19246            ง
19247          </div>
19248          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19249            จ
19250          </div>
19251          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19252            ฉ
19253          </div>
19254          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19255            ช
19256          </div>
19257          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19258            ซ
19259          </div>
19260          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19261            ฌ
19262          </div>
19263          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19264            ญ
19265          </div>
19266          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19267            ฎ
19268          </div>
19269          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19270            ฏ
19271          </div>
19272          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19273            ฐ
19274          </div>
19275          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19276            ฑ
19277          </div>
19278          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19279            ฒ
19280          </div>
19281          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19282            ณ
19283          </div>
19284          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19285            ด
19286          </div>
19287          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19288            ต
19289          </div>
19290          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19291            ถ
19292          </div>
19293          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19294            ท
19295          </div>
19296          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19297            ธ
19298          </div>
19299          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19300            น
19301          </div>
19302          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19303            บ
19304          </div>
19305          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19306            ป
19307          </div>
19308          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19309            ผ
19310          </div>
19311          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19312            ฝ
19313          </div>
19314          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19315            พ
19316          </div>
19317          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19318            ฟ
19319          </div>
19320          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19321            ภ
19322          </div>
19323          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19324            ม
19325          </div>
19326          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19327            ย
19328          </div>
19329          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19330            ร
19331          </div>
19332          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19333            ฤ
19334          </div>
19335          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19336            ล
19337          </div>
19338          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19339            ฦ
19340          </div>
19341          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19342            ว
19343          </div>
19344          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19345            ศ
19346          </div>
19347          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19348            ษ
19349          </div>
19350          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19351            ส
19352          </div>
19353          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19354            ห
19355          </div>
19356          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19357            ฬ
19358          </div>
19359          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19360            อ
19361          </div>
19362          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19363            ฮ
19364          </div>
19365          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19366            ๐
19367          </div>
19368          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19369            ๑
19370          </div>
19371          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19372            ๒
19373          </div>
19374          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19375            ๓
19376          </div>
19377          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19378            ๔
19379          </div>
19380          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19381            ๕
19382          </div>
19383          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19384            ๖
19385          </div>
19386          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19387            ๗
19388          </div>
19389          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19390            ๘
19391          </div>
19392          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19393            ๙
19394          </div>
19395        </div>
19396      </div>
19397    </div>
19398  </div>
19399  <!-- End of Charset Section -->
19400  <!-- Start of one single Charset Section -->
19401  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Thai" data-char-set-subset="Vowel and Tonemarks">
19402    <div class="flex flex-row justify-between">
19403      <div class="">Vowel and Tonemarks</div>
19404      <div data-component="char-set__subset-size" class=""></div>
19405    </div>
19406    <div>
19407      <div class="character-set-section mt-4">
19408        <div class="character-set-container text-rg thai-loopless-fonts">
19409          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19410            อะ
19411          </div>
19412          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19413            อา
19414          </div>
19415          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19416            ฤๅ
19417          </div>
19418          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19419            อิ
19420          </div>
19421          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19422            อี
19423          </div>
19424          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19425            อึ
19426          </div>
19427          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19428            อื
19429          </div>
19430          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19431            ปิ
19432          </div>
19433          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19434            ปี
19435          </div>
19436          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19437            ปึ
19438          </div>
19439          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19440            ปื
19441          </div>
19442          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19443            อุ
19444          </div>
19445          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19446            อู
19447          </div>
19448          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19449            อฺ
19450          </div>
19451          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19452            ฎุ
19453          </div>
19454          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19455            ฎู
19456          </div>
19457          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19458            ฎฺ
19459          </div>
19460          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19461            โอ
19462          </div>
19463          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19464            ไอ
19465          </div>
19466          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19467            ใอ
19468          </div>
19469          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19470            เอ
19471          </div>
19472          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19473            แอ
19474          </div>
19475          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19476            อำ
19477          </div>
19478          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19479            อ่
19480          </div>
19481          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19482            อ้
19483          </div>
19484          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19485            อ๊
19486          </div>
19487          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19488            อ๋
19489          </div>
19490          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19491            อ็
19492          </div>
19493          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19494            อ์
19495          </div>
19496          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19497            อ๎
19498          </div>
19499          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19500            ป่
19501          </div>
19502          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19503            ป้
19504          </div>
19505          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19506            ป๊
19507          </div>
19508          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19509            ป๋
19510          </div>
19511          <div data-component="char-set__char" class="charset-single-char" lang="thll">
19512            ป็
19513          </div>
19514          <div data-component="char-set__char" class="charset-single-char">
19515            ป์
19516          </div>
19517        </div>
19518      </div>
19519    </div>
19520  </div>
19521  <!-- End of Charset Section -->
19522</div>
19523
19524  <!-- Start of one single Charset Section -->
19525<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="thai-looped">
19526  <div class="pb-7 thai-looped-fonts" data-component="char-set__set-container" data-char-set-script="Thai Looped" data-char-set-subset="Characters">
19527    <div class="flex flex-row justify-between">
19528      <div class="">Characters</div>
19529      <div data-component="char-set__subset-size" class=""></div>
19530    </div>
19531    <div>
19532      <div class="character-set-section mt-4">
19533        <div class="character-set-container text-rg thai-looped-fonts">
19534          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19535            ก
19536          </div>
19537          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19538            ข
19539         
19539 </div>
19540          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19541            ฃ
19542          </div>
19543          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19544            ค
19545          </div>
19546          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19547            ฅ
19548          </div>
19549          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19550            ฆ
19551          </div>
19552          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19553            ง
19554          </div>
19555          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19556            จ
19557          </div>
19558          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19559            ฉ
19560          </div>
19561          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19562            ช
19563          </div>
19564          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19565            ซ
19566          </div>
19567          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19568            ฌ
19569          </div>
19570          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19571            ญ
19572          </div>
19573          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19574            ฎ
19575          </div>
19576          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19577            ฏ
19578          </div>
19579          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19580            ฐ
19581          </div>
19582          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19583            ฑ
19584          </div>
19585          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19586            ฒ
19587          </div>
19588          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19589            ณ
19590          </div>
19591          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19592            ด
19593          </div>
19594          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19595            ต
19596          </div>
19597          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19598            ถ
19599          </div>
19600          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19601            ท
19602          </div>
19603          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19604            ธ
19605          </div>
19606          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19607            น
19608          </div>
19609          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19610            บ
19611          </div>
19612          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19613            ป
19614          </div>
19615          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19616            ผ
19617          </div>
19618          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19619            ฝ
19620          </div>
19621          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19622            พ
19623          </div>
19624          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19625            ฟ
19626          </div>
19627          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19628            ภ
19629          </div>
19630          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19631            ม
19632          </div>
19633          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19634            ย
19635          </div>
19636          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19637            ร
19638          </div>
19639          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19640            ฤ
19641          </div>
19642          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19643            ล
19644          </div>
19645          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19646            ฦ
19647          </div>
19648          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19649            ว
19650          </div>
19651          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19652            ศ
19653          </div>
19654          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19655            ษ
19656          </div>
19657          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19658            ส
19659          </div>
19660          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19661            ห
19662          </div>
19663          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19664            ฬ
19665          </div>
19666          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19667            อ
19668          </div>
19669          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19670            ฮ
19671          </div>
19672          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19673            ๐
19674          </div>
19675          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19676            ๑
19677          </div>
19678          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19679            ๒
19680          </div>
19681          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19682            ๓
19683          </div>
19684          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19685            ๔
19686          </div>
19687          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19688            ๕
19689          </div>
19690          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19691            ๖
19692          </div>
19693          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19694            ๗
19695          </div>
19696          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19697            ๘
19698          </div>
19699          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19700            ๙
19701          </div>
19702        </div>
19703      </div>
19704    </div>
19705  </div>
19706  <!-- End of Charset Section -->
19707  <!-- Start of one single Charset Section -->
19708  <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Thai" data-char-set-subset="Vowel and Tonemarks">
19709    <div class="flex flex-row justify-between">
19710      <div class="">Vowel and Tonemarks</div>
19711      <div data-component="char-set__subset-size" class=""></div>
19712    </div>
19713    <div>
19714      <div class="character-set-section mt-4">
19715        <div class="character-set-container text-rg thai-looped-fonts">
19716          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19717            อะ
19718          </div>
19719          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19720            อา
19721          </div>
19722          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19723            ฤๅ
19724          </div>
19725          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19726            อิ
19727          </div>
19728          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19729            อี
19730          </div>
19731          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19732            อึ
19733          </div>
19734          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19735            อื
19736          </div>
19737          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19738            ปิ
19739          </div>
19740          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19741            ปี
19742          </div>
19743          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19744            ปึ
19745          </div>
19746          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19747            ปื
19748          </div>
19749          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19750            อุ
19751          </div>
19752          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19753            อู
19754          </div>
19755          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19756            อฺ
19757          </div>
19758          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19759            ฎุ
19760          </div>
19761          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19762            ฎู
19763          </div>
19764          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19765            ฎฺ
19766          </div>
19767          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19768            โอ
19769          </div>
19770          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19771            ไอ
19772          </div>
19773          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19774            ใอ
19775          </div>
19776          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19777            เอ
19778          </div>
19779          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19780            แอ
19781          </div>
19782          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19783            อำ
19784          </div>
19785          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19786            อ่
19787          </div>
19788          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19789            อ้
19790          </div>
19791          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19792            อ๊
19793          </div>
19794          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19795            อ๋
19796          </div>
19797          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19798            อ็
19799          </div>
19800          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19801            อ์
19802          </div>
19803          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19804            อ๎
19805          </div>
19806          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19807            ป่
19808          </div>
19809          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19810            ป้
19811          </div>
19812          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19813            ป๊
19814          </div>
19815          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19816            ป๋
19817          </div>
19818          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19819            ป็
19820          </div>
19821          <div data-component="char-set__char" class="charset-single-char" lang="thlp">
19822            ป์
19823          </div>
19824        </div>
19825      </div>
19826    </div>
19827  </div>
19828  <!-- End of Charset Section -->
19829</div>
19830
19831</div>
19832
19833  </section>
19834
19835  <!-- Detailed Information  -->
19836<section class="md:ml-[132px] px-4 flex mb-8 md:mb-12">
19837  <!-- Partial Width Content Area With Section Nav -->
19838  <!-- Section Nav Area -->
19839  <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav">
19840    <div class="flex flex-col justify-center h-full">
19841      <h3 class="text-lg">Detailed Information</h3>
19842      <div class="flex flex-col items-start pt-5">
19843        GT American Intl supports 183 languages across its 10 scripts.
19844      </div>
19845      <div class="flex flex-col items-start pt-5">
19846        All script extensions include support for Latin-alphabet languages.
19847      </div>
19848    </div>
19849  </div>
19850  <!-- Main Content Area -->
19851  <div class="md:ml-[35px] md:mr-4 w-full grid-setup">
19852    <!-- Latin Extended -->
19853    <div class="col-span-4 md:col-span-12 border-y py-5 grid-setup">
19854      <div class="col-span-4 md:col-span-3 pb-3">
19855        <div class="text-s mb-4">Latin</div>
19856        <div class="text-xs pr-4">
19857          Typeface design by Noël Leu, with Seb McLauchlan.
19858        </div>
19859      </div>
19860      <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3">
19861        <div class="grid-setup mb-4">
19862          <div class="col-span-4 md:col-span-4">Variable Axes</div>
19863          <div class="col-span-4 md:col-span-8">Width<br>Weight</div>
19864        </div>
19865        <div class="grid-setup mb-4">
19866          <div class="col-span-4 md:col-span-4">Proportional</div>
19867          <div class="col-span-4 md:col-span-8">
19868            5 Widths<br>7 Weights<br>Upright and Italic
19869          </div>
19870        </div>
19871        <div class="grid-setup">
19872          <div class="col-span-4 md:col-span-4">Monospace</div>
19873          <div class="col-span-4 md:col-span-8">
19874            7 Weights<br>Upright and Italic
19875          </div>
19876        </div>
19877      </div>
19878      <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">
19879        Afaan, Afar, Afrikaans, Albanian, Alsatian, Amis, Anuta, Aragonese,
19880        Aranese, Aromanian, Arrernte, Asturian, Atayal, Aymara, Azerbaijani,
19881        Basque, Belarusian, Bemba, Bikol, Bislama, Bosnian, Breton, Cape Verdean
19882        Creole, Catalan, Cebuano, Chamorro, Chavacano, Chichewa, Chickasaw,
19883        Cimbrian, Cofán, Cornish, Corsican, Creek, Croatian, Czech, Danish,
19884        Dawan, Dholuo, Drehu, Dutch, English, Estonian, Faroese, Fijian,
19885        Filipino, Finnish, French, Frisian, Friulian, Galician, Ganda, Genoese,
19886        German, Gikuyu, Gooniyandi, Greenlandic (Kalaallisut), Guadeloupean
19887        Creole, Gwich’in, Haitian Creole, Hawaiian, Hiligaynon, Hopi, Hungarian,
19888        Icelandic, Ido, Igbo, Ilocano, Indonesian , Irish, Istro-Romanian,
19889        Italian, Jamaican, Javanese, Jèrriais, Kaingang, Kala Lagaw Ya,
19890        Kapampangan, Kaqchikel, Kashubian, Kikongo, Kinyarwanda, Kiribati,
19891        Kirundi, Kurdish, Ladin, Latin, Latvian, Lithuanian, Lombard, Low Saxon,
19892        Luxembourgish, Maasai, Makhuwa, Malay, Maltese, Manx, Māori, Marquesan,
19893        Megleno-Romanian, Meriam Mir, Mirandese, Mohawk, Moldovan, Montagnais,
19894        Montenegrin, Murrinh-Patha, Nagamese Creole, Nahuatl, Ndebele,
19895        Neapolitan, Niuean, Noongar, Norwegian, Occitan, Old Icelandic, Old
19896        Norse, Oshiwambo, Palauan, Papiamento, Piedmontese, Polish, Portuguese,
19897        Q’eqchi’, Quechua, Rarotongan, Romanian, Romansh, Rotokas, Inari Sami,
19898        Lule Sami, Northern Sami, Southern Sami, Samoan, Sango, Saramaccan,
19899        Sardinian, Scottish Gaelic, Seri, Seychellois Creole, Shawnee, Shona,
19900        Sicilian, Silesian, Slovak, Slovenian, Somali, Upper and Lower Sorbian,
19901        Northern and Southern Sotho, Spanish, Sranan, Sundanese, Swahili, Swazi,
19902        Swedish, Tagalog, Tahitian, Tetum, Tok Pisin, Tokelauan, Tongan,
19903        Tshiluba, Tsonga, Tswana, Tumbuka, Turkish, Tuvaluan, Tzotzil, Venetian,
19904        Vepsian, Võro, Wallisian, Walloon, Waray-Waray, Warlpiri, Wayuu, Welsh,
19905        Wik-Mungkan, Wolof, Xavante, Xhosa, Yapese, Yindjibarndi, Zapotec,
19906        Zarma, Zazaki, Zulu, Zuni
19907      </div>
19908    </div>
19909
19910    <!-- Cyrillic -->
19911    <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup">
19912      <div class="col-span-4 md:col-span-3 pb-3">
19913        <div class="text-s mb-4">Cyrillic</div>
19914        <div class="text-xs pr-4">
19915          Расширения кириллицы, греческого и вьетнамского алфавита,
19916          разработанные Grilli Type при консультации Марии Дореули. Cyrillic
19917          designed by Grilli Type with consulting by Maria Doreuli.
19918        </div>
19919      </div>
19920
19921      <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3">
19922        <div class="grid-setup mb-4">
19923          <div class="col-span-4 md:col-span-4">Variable Axes</div>
19924          <div class="col-span-4 md:col-span-8">Width<br>Weight</div>
19925        </div>
19926        <div class="grid-setup mb-4">
19927          <div class="col-span-4 md:col-span-4">Proportional</div>
19928          <div class="col-span-4 md:col-span-8">
19929            5 Widths<br>7 Weights<br>Upright and Italic
19930          </div>
19931        </div>
19932        <div class="grid-setup">
19933          <div class="col-span-4 md:col-span-4">Monospace</div>
19934          <div class="col-span-4 md:col-span-8">
19935            7 Weights<br>Upright and Italic
19936          </div>
19937        </div>
19938      </div>
19939      <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">
19940        Abaza, Adyghe, Aghul, Avar, Bashkir, Balkar, Belarusian, Bosnian,
19941        Bulgarian, Buryat, Chechen, Chuvash, Crimean Tatar, Dargin, Dungan,
19942        Erzya, Ingush, Kabardian, Kalmyk, Karachay, Karakalpak, Kazakh,
19943        Khinalugh, Komi, Kumyk, Kyrgyz, Lak, Lezgian, Macedonian, Moldovan,
19944        Mongolian, Moksha, Nanai, Nogai, Ossetian, Russian, Rusyn, Rutul,
19945        Serbian, Tabasaran, Tajik, Tat, Tatar, Turkmen, Tuvan, Uyghur,
19946        Ukrainian, Uzbek
19947      </div>
19948    </div>
19949
19950    <!-- Greek -->
19951    <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup">
19952      <div class="col-span-4 md:col-span-3 pb-3">
19953        <div class="text-s mb-4">Greek</div>
19954        <div class="text-xs pr-4">
19955          Τα Ελληνικά σχεδιάστηκαν από την Grilli Type με συμβουλευτική από τον
19956          Βασίλη Γεωργίου. Greek designed by Grilli Type, consulting by Vassilis
19957          Georgiou.
19958        </div>
19959      </div>
19960
19961      <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3">
19962        <div class="grid-setup mb-4">
19963          <div class="col-span-4 md:col-span-4">Variable Axes</div>
19964          <div class="col-span-4 md:col-span-8">Width<br>Weight</div>
19965        </div>
19966        <div class="grid-setup mb-4">
19967          <div class="col-span-4 md:col-span-4">Proportional</div>
19968          <div class="col-span-4 md:col-span-8">
19969            5 Widths<br>7 Weights<br>Upright and Italic
19970          </div>
19971        </div>
19972        <div class="grid-setup">
19973          <div class="col-span-4 md:col-span-4">Monospace</div>
19974          <div class="col-span-4 md:col-span-8">
19975            7 Weights<br>Upright and Italic
19976          </div>
19977        </div>
19978      </div>
19979      <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">Greek</div>
19980    </div>
19981
19982    <!-- Vietnamese -->
19983    <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup">
19984      <div class="col-span-4 md:col-span-3 pb-3">
19985        <div class="text-s mb-4">Vietnamese</div>
19986        <div class="text-xs pr-4">
19987          Chữ Việt thiết kế bởi Grilli Type với sự tham khảo qua Donny Trương.
19988          Vietnamese designed by Grilli Type with consulting by Donny Trương.
19989        </div>
19990      </div>
19991
19992      <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3">
19993        <div class="grid-setup mb-4">
19994          <div class="col-span-4 md:col-span-4">Variable Axes</div>
19995          <div class="col-span-4 md:col-span-8">Width<br>Weight</div>
19996        </div>
19997        <div class="grid-setup mb-4">
19998          <div class="col-span-4 md:col-span-4">Proportional</div>
19999          <div class="col-span-4 md:col-span-8">
20000            5 Widths<br>7 Weights<br>Upright and Italic
20001          </div>
20002        </div>
20003        <div class="grid-setup">
20004          <div class="col-span-4 md:col-span-4">Monospace</div>
20005          <div class="col-span-4 md:col-span-8">
20006            7 Weights<br>Upright and Italic
20007          </div>
20008        </div>
20009      </div>
20010      <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">
20011        Vietnamese
20012      </div>
20013    </div>
20014
20015    <!-- Arabic -->
20016    <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup">
20017      <div class="col-span-4 md:col-span-3 pb-3">
20018        <div class="text-s mb-4">Arabic</div>
20019        <div class="text-xs pr-4">
20020          <div dir="rtl" class="w-full" lang="ar">
20021            اللغة العربية من تصميم وائل مرقص وخاجاج أبليان.
20022          </div>
20023          <div class="w-full" dir="ltr">
20024            Arabic designed by Waël Morcos and Khajag Apelian.
20025          </div>
20026        </div>
20027      </div>
20028      <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3">
20029        <div class="grid-setup mb-4">
20030          <div class="col-span-4 md:col-span-4">Variable Axes</div>
20031          <div class="col-span-4 md:col-span-8">Weight</div>
20032        </div>
20033        <div class="grid-setup">
20034          <div class="col-span-4 md:col-span-4">Proportional</div>
20035          <div class="col-span-4 md:col-span-8">7 Weights</div>
20036        </div>
20037      </div>
20038
20039      <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">
20040        Arabic, Kurdish, Persian, Urdu
20041      </div>
20042    </div>
20043
20044    <!-- Devanagari -->
20045    <div class="col-span-4 md:col-span-12 border-b pt-5 pb-6 grid-setup">
20046      <div class="col-span-4 md:col-span-3 pb-3">
20047        <div class="text-s mb-4">Devanagari</div>
20048        <div class="text-xs pr-4 pb-3">
20049          देवनागरी डिज़ाइन हितेश मालविया द्वारा, नवंबर और ग्रिली टाइप के
20050          क्रिएटिव निर्देशन के साथ की गयी है। फॉन्ट इंजीनियरिंग और मास्टरिंग
20051          यूनिवर्सल थर्स्ट द्वारा किया गया है। Devanagari designed by Hitesh
20052          Malaviya, with creative direction from November & Grilli Type. Font
20053          Engineering and mastering by Universal Thirst.
20054        </div>
20055      </div>
20056      <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3">
20057        <div class="grid-setup mb-4">
20058          <div class="col-span-4 md:col-span-4">Variable Axes</div>
20059          <div class="col-span-4 md:col-span-8">Weight</div>
20060        </div>
20061        <div class="grid-setup">
20062          <div class="col-span-4 md:col-span-4">Proportional</div>
20063          <div class="col-span-4 md:col-span-8">7 Weights</div>
20064        </div>
20065      </div>
20066      <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">
20067        Apabhramsha, Angika, Awadhi, Bajjika, Bhili, Bhojpuri, Basic Sanskrit,
20068        Boro, Braj, Chhattisgarhi, Dogri, Garhwali, Haryanvi, Hindi, Kashmiri,
20069        Khandeshi, Konkani, Kumaoni, Magahi, Maithili, Marathi, Marwari,
20070        Mundari, Nagpuri, Newari, Nepali, Pāli, Pahari, Prakrit, Rajasthani,
20071        Santali, Saraiki, Sherpa, Sindhi, Surjapuri
20072      </div>
20073    </div>
20074
20075    <!-- Hebrew -->
20076    <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup">
20077      <div class="col-span-4 md:col-span-3 pb-3">
20078        <div class="text-s mb-4">Hebrew</div>
20079        <div class="text-xs pr-4">
20080          <div class="w-full" dir="rtl" lang="he">
20081            עברית בעיצוב ינק יונטף ודניאל גרומר, פונטף מטבעת אותיות
20082          </div>
20083          <div dir="ltr" class="w-full">
20084            Hebrew designed by Yanek Iontef and Daniel Grumer from Fontef Type
20085            Foundry.
20086          </div>
20087        </div>
20088      </div>
20089      <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3">
20090        <div class="grid-setup mb-4">
20091          <div class="col-span-4 md:col-span-4">Variable Axes</div>
20092          <div class="col-span-4 md:col-span-8">Weight</div>
20093        </div>
20094        <div class="grid-setup">
20095          <div class="col-span-4 md:col-span-4">Proportional</div>
20096          <div class="col-span-4 md:col-span-8">7 Weights</div>
20097        </div>
20098      </div>
20099      <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">
20100        Hebrew, Yiddish
20101      </div>
20102    </div>
20103
20104    <!-- Korean -->
20105    <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup">
20106      <div class="col-span-4 md:col-span-3 pb-3">
20107        <div class="text-s mb-4">Korean / Hangeul</div>
20108        <div class="text-xs pr-4">
20109          한글 디자인 by 함민주. Korean designed by Minjoo Ham.
20110        </div>
20111      </div>
20112
20113      <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3">
20114        <div class="grid-setup mb-4">
20115          <div class="col-span-4 md:col-span-4">Variable Axes</div>
20116          <div class="col-span-4 md:col-span-8">Weight</div>
20117        </div>
20118        <div class="grid-setup">
20119          <div class="col-span-4 md:col-span-4">Proportional</div>
20120          <div class="col-span-4 md:col-span-8">7 Weights</div>
20121        </div>
20122      </div>
20123      <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">Korean</div>
20124    </div>
20125
20126    <!-- Thai -->
20127    <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup">
20128      <div class="col-span-4 md:col-span-3 pb-3">
20129        <div class="text-s mb-4">Thai</div>
20130        <div class="text-xs pr-4">
20131          อักษรไทยแบบไม่มีหัว ออกแบบโดย สมิชฌน์ สมันเลาะ และอักษรไทยแบบมีหัว
20132          ออกแบบโดย คนัช อุยยามาฐิติ จาก คัดสรร ดีมาก. Thai designed by Knaz
20133          Uiyamathiti and Smich Smanloh from Cadson Demak.
20134        </div>
20135      </div>
20136      <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3">
20137        <div class="grid-setup mb-4">
20138          <div class="col-span-4 md:col-span-4">Variable Axes</div>
20139          <div class="col-span-4 md:col-span-8">Weight</div>
20140        </div>
20141        <div class="grid-setup mb-4">
20142          <div class="col-span-4 md:col-span-4">Looped</div>
20143          <div class="col-span-4 md:col-span-8">7 Weights</div>
20144        </div>
20145        <div class="grid-setup">
20146          <div class="col-span-4 md:col-span-4">Loopless</div>
20147          <div class="col-span-4 md:col-span-8">7 Weights</div>
20148        </div>
20149      </div>
20150      <div class="col-span-4 md:col-span-6 text-xs pt-7 pb-3">Thai</div>
20151    </div>
20152  </div>
20153</section>
20154
20155  <!-- Detailed Information -->
20156<section class="md:ml-[132px] px-4 flex mb-8 md:mb-11">
20157  <!-- Partial Width Content Area With Section Nav -->
20158  <!-- Section Nav Area -->
20159  <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav">
20160    <div class="flex flex-col justify-center h-full">
20161      <h3 class="text-lg">Colophon</h3>
20162    </div>
20163  </div>
20164  <!-- Main Content Area -->
20165  <div class="md:ml-[35px] md:mr-4 w-full grid-setup">
20166    <!-- Left Column on Desktop -->
20167    <div class="col-span-4 md:col-span-4 text-xs">
20168      <div class="w-full">
20169        <div class="pb-5">Website</div>
20170        <p class="leading-[1.3]">
20171          Creative direction and artwork by Grilli Type. Website layout designed
20172          by
20173          <a href="https://jacobheftmann.com" class="underline" target="_blank">Jacob Heftmann</a>. 3d scenes modeled and animated by
20174          <a href="https://jonasbaun.com/" class="underline" target="_blank">Jonas Baun</a>
20175          with textures by Grilli Type. Illustrations drawn by Grilli Type and
20176          animated by
20177          <a href="https://www.instagram.com/joshschaub.ch" class="underline" target="_blank">Josh Schaub</a>. Development by Grilli Type with heavy support by
20178          <a href="https://www.isjackwild.com" class="underline" target="_blank">Jack Wild</a>. Many thanks to
20179          <a href="https://www.arphic.com.tw/en/" class="underline" target="_blank">Arphic</a>
20180          and
20181          <a href="https://typeproject.com" class="underline" target="_blank">Type Project</a>
20182          for partnering with us on matching GT America to the Chinese and
20183          Japanese writing systems.
20184        </p>
20185      </div>
20186    </div>
20187
20188    <!-- Middle Column on Desktop -->
20189    <div class="col-span-4 md:col-span-4 text-xs">
20190      <div class="w-full">
20191        <div class="pb-5">Licensing</div>
20192        <p class="leading-[1.3]">
20193          Questions about licensing? Check out
20194          <a href="https://www.grillitype.com/information" class="underline" target="_blank">our FAQ</a>
20195          for more information about our fonts, licensing, and shop. Please
20196          email us for any other questions; for example, to find out about the
20197          world’s cutest dog.
20198        </p>
20199      </div>
20200    </div>
20201
20202    <!-- Right Column on Desktop -->
20203    <div class="col-span-4 md:col-span-4 text-xs">
20204      <div class="w-full">
20205        <div class="pb-5">More Scripts</div>
20206        <p class="leading-[1.3]">
20207          Are you looking for GT America in even more writing systems? As this
20208          website shows in ample detail, we love to add support for writing
20209          systems from around the globe. You can
20210          <a href="/cdn-cgi/l/email-protection#5a373b33361a3d28333636332e232a3f74393537" class="underline" target="_blank">email us</a>
20211          to inquire about opportunities to cover all languages your project
20212          might require support for.
20213        </p>
20214      </div>
20215    </div>
20216  </div>
20217</section>
20218
20219  <!-- Detailed Information -->
20220<section class="md:ml-[132px] px-4 flex mb-8 md:mb-12">
20221  <!-- Partial Width Content Area With Section Nav -->
20222  <!-- Section Nav Area -->
20223  <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav">
20224    <div class="flex flex-col justify-center h-full">
20225      <h3 class="text-lg">More from Grilli Type</h3>
20226    </div>
20227  </div>
20228  <!-- Main Content Area -->
20229  <div class="md:ml-[35px] md:mr-4 md:w-2/3">
20230    <ul class="md:columns-2 text-xl md:text-2xl">
20231      <li>
20232        <a href="https://www.gt-pressura.com" class="hover:text-black leading-[1.6]"><img src="/flag-1.46b5e2e0.png" class="inline pr-3 pb-2 h-[1.25em]">
20233          GT Pressura</a>
20234      </li>
20235      <li>
20236        <a href="https://www.gt-planar.com" class="hover:text-black leading-[1.6]"><img src="/flag-2.4ea780a1.png" class="inline pr-3 pb-2 h-[1.25em]">
20237          GT Planar</a>
20238      </li>
20239      <li>
20240        <a href="https://www.gt-ultra.com" class="hover:text-black leading-[1.6]"><img src="/flag-3.1dda6584.png" class="inline pr-3 pb-2 h-[1.25em]">
20241          GT Ultra</a>
20242      </li>
20243      <li>
20244        <a href="https://www.gt-maru.com" class="hover:text-black leading-[1.6]"><img src="/flag-4.2c8899c6.png" class="inline pr-3 pb-2 h-[1.25em]">
20245          GT Maru</a>
20246      </li>
20247      <li>
20248        <a href="https://www.gt-flexa.com" class="hover:text-black leading-[1.6]"><img src="/flag-5.3edc558f.png" class="inline pr-3 pb-2 h-[1.25em]">
20249          GT Flexa</a>
20250      </li>
20251      <li>
20252        <a href="https://www.gt-alpina.com" class="hover:text-black leading-[1.6]"><img src="/flag-6.fbb301f8.png" class="inline pr-3 pb-2 h-[1.25em]">
20253          GT Alpina</a>
20254      </li>
20255      <li>
20256        <a href="https://www.gt-zirkon.com" class="hover:text-black leading-[1.6]"><img src="/flag-7.99eb68d4.png" class="inline pr-3 pb-2 h-[1.25em]">
20257          GT Zirkon</a>
20258      </li>
20259      <li>
20260        <a href="https://www.gt-super.com" class="hover:text-black leading-[1.6]"><img src="/flag-8.2e3e3628.png" class="inline pr-3 pb-2 h-[1.25em]">
20261          GT Super</a>
20262      </li>
20263      <li>
20264        <a href="https://www.gt-walsheim.com" class="hover:text-black leading-[1.6]"><img src="/flag-9.c7e2bbcc.png" class="inline pr-3 pb-2 h-[1.25em]">
20265          GT Walsheim</a>
20266      </li>
20267      <li>
20268        <a href="https://www.gt-eesti.com" class="hover:text-black leading-[1.6]"><img src="/flag-10.de8db4f0.png" class="inline pr-3 pb-2 h-[1.25em]">
20269          GT Eesti</a>
20270      </li>
20271      <li>
20272        <a href="https://www.gt-cinetype.com" class="hover:text-black leading-[1.6]"><img src="/flag-11.32e12044.png" class="inline pr-3 pb-2 h-[1.25em]">
20273          GT Cinetype</a>
20274      </li>
20275      <li>
20276        <a href="https://www.gt-haptik.com" class="hover:text-black leading-[1.6]"><img src="/flag-12.79e28d2e.png" class="inline pr-3 pb-2 h-[1.25em]">
20277          GT Haptik</a>
20278      </li>
20279      <li>
20280        <a href="https://www.grillitype.com/typeface/gt-sectra" class="hover:text-black leading-[1.6]"><img src="/flag-13.b27f199c.png" class="inline pr-3 pb-2 h-[1.25em]">
20281          GT Sectra</a>
20282      </li>
20283    </ul>
20284  </div>
20285</section>
20286
20287<!-- 
20288    
20289    Other minisite links copied over from Pressura site
20290    
20291    <div class="col-span-12 flex flex-row flex-wrap text-xl font-ext-regular text-center mb-8">
20292    <a
20293      href="https://www.gt-planar.com"
20294      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20295      >GT Planar</a
20296    >
20297    <a
20298      href="https://www.gt-ultra.com"
20299      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20300      >GT Ultra</a
20301    >
20302    <a
20303      href="https://www.gt-maru.com"
20304      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20305      >GT Maru</a
20306    >
20307    <a
20308      href="https://www.gt-flexa.com"
20309      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20310      >GT Flexa</a
20311    >
20312    <a
20313      href="https://www.gt-alpina.com"
20314      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20315      >GT Alpina</a
20316    >
20317    <a
20318      href="https://www.gt-zirkon.com"
20319      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20320      >GT Zirkon</a
20321    >
20322    <a
20323      href="https://www.gt-super.com"
20324      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20325      >GT Super</a
20326    >
20327    <a
20328      href="https://www.gt-walsheim.com"
20329      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20330      >GT Walsheim</a
20331    >
20332    <a
20333      href="https://www.gt-america.com"
20334      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20335      >GT America</a
20336    >
20337    <a
20338      href="https://www.gt-eesti.com"
20339      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20340      >GT Eesti</a
20341    >
20342    <a
20343      href="https://www.gt-cinetype.com"
20344      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20345      >GT Cinetype</a
20346    >
20347    <a
20348      href="https://www.gt-haptik.com"
20349      class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]"
20350      >GT Haptik</a
20351    >
20352  </div> -->
20353
20354  <!-- Final Links Section-->
20355<section class="md:ml-[132px] px-4 mb-9 flex flex-col">
20356  <a href="https://www.grillitype.com/typeface/gt-america-intl-collection" class="w-full lg:w-5/6 bg-white text-red border-2 border-white md:text-2xl p-4 md:p-9 rounded-full flex justify-between hover:bg-red hover:text-white hover:border-2">
20357    <span>Buy GT America Intl Licensing</span>
20358    <span>↗</span>
20359  </a>
20360  <div class="w-full lg:w-5/6 pt-5 md:pt-7 flex flex-col md:flex-row md:justify-between">
20361    <a href="https://www.grillitype.com/free-trial-fonts" class="flex-grow bg-red text-white border-2 border-white md:text-xl p-4 md:p-9 rounded-full flex justify-between hover:bg-white hover:text-red hover:border-2 md:mr-5">
20362      <span>Download Free Trial Fonts</span>
20363      <span>↓</span>
20364    </a>
20365    <a href="/images/GT-America-Intl-Manual.pdf" class="flex-grow bg-red text-white border-2 border-white md:text-xl p-4 md:p-9 rounded-full flex justify-between hover:bg-white hover:text-red hover:border-2 md:ml-5 mt-5 md:mt-0">
20366      <span>Download PDF Specimen</span>
20367      <span>↓</span>
20368    </a>
20369  </div>
20370</section>
20371
20372<section class="flex self-center pointer-events-none z-50">
20373  <!-- Full Width Content Area -->
20374  <div data-component="section-scene" data-autoplay-until="0" data-start-scroll-offset="0.33" data-end-scroll-offset="0.33" data-src="/models/footer/footer-v006/footer-v006.gltf" data-src-mobile="/models/footer/footer-mobile-v002/footer-mobile-v002.gltf" class="flex self-center justify-center h-[200vh] md:h-[200vh] w-full -mt-[108vh] md:-mt-[108vh] overflow-visible"></div>
20375</section>
20376
20377</section>
vendor: 112 bytes, lines 20377-20379
20377
20378
20379  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
20379<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"041031cfa4c948a49d9d2d4106a471bf","r":1,"spa":2}' crossorigin="anonymous"></script>
20379
20380</body>
20381</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.