@toheeb/base 2.0.0 → 3.0.0-alpha.0

package/{base.css → src/index.css}

@@ -34,10 +34,10 @@
 
 
 /* 1 */
-:root {
+html {
 
   /* 1a */
-  font-family: system-ui, sans-serif;
+  font-family:  system-ui, sans-serif;
   font-size: 1rem;
   
   /* 1b */
@@ -84,7 +84,6 @@
 }
 
 
-
 /****************************************************
  * Font Size
  * __________________________________________________ 
@@ -97,7 +96,7 @@
  *
 *****************************************************/
 
-hgroup > p:has(~ :is(h1, h2, h3, h4, h5, h6))
+hgroup > p:has(~ :where(h1, h2, h3, h4, h5, h6))
 {
   font-size: calc(pow(var(--font-scale), -1) * 1em);
 }
@@ -111,7 +110,7 @@ html
   font-size: calc(pow(var(--font-scale), 0) * 1em);
 }
 
-hgroup > :is(h1, h2, h3, h4, h5, h6) ~ p
+hgroup > :where(h1, h2, h3, h4, h5, h6) ~ p
 {
   font-size: calc(pow(var(--font-scale), 1) * 1em);
 }
@@ -218,7 +217,7 @@ h6
   line-height: calc(1 + ((var(--line-height) - 1) / pow(var(--font-scale), 2)));
 }
 
-hgroup > :is(h1, h2, h3, h4, h5, h6) ~ p
+hgroup > :where(h1, h2, h3, h4, h5, h6) ~ p
 {
   line-height: calc(1 + ((var(--line-height) - 1) / pow(var(--font-scale), 1)));
 }
@@ -231,7 +230,7 @@ html
   line-height: calc(1 + ((var(--line-height) - 1) / pow(var(--font-scale), 0)));
 }
 
-hgroup > p:has(~ :is(h1, h2, h3, h4, h5, h6))
+hgroup > p:has(~ :where(h1, h2, h3, h4, h5, h6))
 {
   line-height: calc(1 + ((var(--line-height) - 1) / pow(var(--font-scale), -1)));
 }
@@ -239,59 +238,65 @@ hgroup > p:has(~ :is(h1, h2, h3, h4, h5, h6))
 
 /* 3a */
 
-video,
-audio, 
-iframe, 
-object,
-svg:not([height='16']), 
-img:not([height='16']),
-
+/* [data-display="block"], */
 p,
 pre
 {
   margin-block: var(--line-lead);
 }
+/* 
+p:where(:has(> span:first-child > :is(audio, canvas, embed, iframe, img, object, svg, video, picture):only-child)) {
+  margin-block-start: calc(2 * var(--line-lead));
+}
+
+p:where(:has(> span:last-child > :is(audio, canvas, embed, iframe, img, object, svg, video, picture):only-child)) {
+  margin-block-end: calc(2 * var(--line-lead));
+} */
+
 
 
 /* 3b */
 
-:is(p, pre):has(> span:first-child):has(> span:first-child > :is(audio, video, iframe, object, svg:not([height='16']), img:not([height="16"])):only-child)
-{
-  margin-block-start: calc(2 * var(--line-lead));
+/* Add a small margin by default. To target those within a text. It also adds to p's margin if at start or end. */
+span:where(:has(> [data-display="block"]:only-child)) {
+  margin-block: var(--line-lead);
 }
 
-:is(p, pre):has(> span:last-child):has(> span:last-child > :is(audio, video, iframe, object, svg:not([height='16']), img:not([height="16"])):only-child)
-{
-  margin-block-end: calc(2 * var(--line-lead));
+span:where(:first-child:has(> [data-display="block"]:only-child)) {
+  margin-block-start: calc(2 * var(--line-lead));
+}
 
-  /* 4c */
-  padding-block-end: 0;
+/* remove the lh pad if the last of paragraph. To be added via paragraph. padding makes this result inclusive of the p
+s margin */
+span:where(:last-child:has(> [data-display="block"]:only-child)) {
+  margin-block-end: calc(var(--line-lead) - var(--lh-pad));
 }
 
 
+
 /* 3d */
 
-:is(section, article):has(> hgroup > h6) {
+:where(section, article):has(> hgroup > h6) {
   padding-block-start: calc(2 * var(--line-lead));
 }
 
-:is(section, article):has(> hgroup > h5) {
+:where(section, article):has(> hgroup > h5) {
   padding-block-start: calc(3 * var(--line-lead));
 }
 
-:is(section, article):has(> hgroup > h4) {
+:where(section, article):has(> hgroup > h4) {
   padding-block-start: calc(4 * var(--line-lead));
 }  
 
-:is(section, article):has(> hgroup > h3) {
+:where(section, article):has(> hgroup > h3) {
   padding-block-start: calc(5 * var(--line-lead));
 }
 
-:is(section, article):has(> hgroup > h2) {
+:where(section, article):has(> hgroup > h2) {
   padding-block-start: calc(6 * var(--line-lead));
 }
 
-:is(section, article):has(> hgroup > h1) {
+:where(section, article):has(> hgroup > h1) {
   padding-block-start: calc(7 * var(--line-lead));
 } 
 
@@ -327,7 +332,9 @@ pre
 
 
 /* 1 */
-*:has(~ main), main, main ~ *
+*:has(~ main), 
+main ~ *,
+main
 {
   width: 100%;
   max-width: calc(1.5 * var(--line-length));
@@ -336,7 +343,7 @@ pre
 }
 
 /* 2 */
-section:has(> hgroup) > *:not(:is(section:has(> hgroup), hgroup))
+section:has(> hgroup) > *:not(:where(section:has(> hgroup), hgroup))
 {
   width: 100%;
   max-width: calc((6 * var(--line-lead)) + var(--line-length));
@@ -363,11 +370,11 @@ address,
 details,
 fieldset, 
 blockquote, 
-a:has(:is(p, pre)),
-del:has(:is(p, pre)),
-ins:has(:is(p, pre)),
-map:has(:is(p, pre)),
-object:has(:is(p, pre, h1, h2, h3, h4, h5, h6, summary, legend, dt, th)) > div:only-child
+a:has(:where(p, pre)),
+del:has(:where(p, pre)),
+ins:has(:where(p, pre)),
+map:has(:where(p, pre)),
+object:has(:where(p, pre, h1, h2, h3, h4, h5, h6, summary, legend, dt, th)) > div:only-child
 {
   width: 100%;
   max-width: var(--line-length);
@@ -388,7 +395,9 @@ hr
 td, 
 th,
 caption,
-*:has(~ main), main, main ~ *
+*:has(~ main), 
+main ~ *,
+main
 {
   padding-inline: calc(3ch * var(--border-width) / var(--border-width));
 }
@@ -478,10 +487,11 @@ h1, h2, h3, h4, h5, h6,
 summary, legend, dt, th
 {
   font-weight: 700;
+  text-wrap: balance;
 }
 
 /* 3 */
-hgroup p:has(~ :is(h1, h2, h3, h4, h5, h6)) {
+hgroup p:has(~ :where(h1, h2, h3, h4, h5, h6)) {
   width: auto;
   display: inline-block;
   margin: 0 calc(3ch * var(--border-width) / var(--border-width)) 0 0;
@@ -495,7 +505,7 @@ main
   counter-reset: h1;
 }
 
-main > section:has(h1)
+:where(main > section):has(h1)
 {
   counter-reset: h2;
 }
@@ -509,12 +519,12 @@ main > section:has(h1)
 }
 
 
-main > section > :is(section, article):has(> hgroup > h2)
+main > section > :where(section, article):has(> hgroup > h2)
 {
   counter-reset: h3;
 }
 
-:where(main > section > :is(section, article):has(> hgroup > h2))::before
+:where(main > section > :where(section, article):has(> hgroup > h2))::before
 {
   content: var(--content, counter(h2, decimal-leading-zero) "." / "");
 
@@ -528,12 +538,12 @@ main > section > :is(section, article):has(> hgroup > h2)
 } 
 
 
-main > section > :is(section, article) > :is(section, article):has(> hgroup > h3)
+main > section > :where(section, article) > :where(section, article):has(> hgroup > h3)
 {
   counter-reset: h4;
 }
 
-:where(main > section > :is(section, article) > :is(section, article):has(> hgroup > h3))::before
+:where(main > section > :where(section, article) > :where(section, article):has(> hgroup > h3))::before
 {
   content: var(--content, counter(h3, decimal-leading-zero) "." / "");
 
@@ -549,12 +559,12 @@ main > section > :is(section, article) > :is(section, article):has(> hgroup > h3
 } 
 
 
-main > section > :is(section, article) > :is(section, article) > :is(section, article):has(> hgroup > h4)
+main > section > :where(section, article) > :where(section, article) > :where(section, article):has(> hgroup > h4)
 {
   counter-reset: h5;
 }
 
-:where(main > section > :is(section, article) > :is(section, article) > :is(section, article):has(> hgroup > h4))::before
+:where(main > section > :where(section, article) > :where(section, article) > :where(section, article):has(> hgroup > h4))::before
 {
   content: var(--content, counter(h4, decimal-leading-zero) "." / "");
 
@@ -571,12 +581,12 @@ main > section > :is(section, article) > :is(section, article) > :is(section, ar
 } 
 
 
-main > section > :is(section, article) > :is(section, article) > :is(section, article) > :is(section, article):has(> hgroup > h5)
+main > section > :where(section, article) > :where(section, article) > :where(section, article) > :where(section, article):has(> hgroup > h5)
 {
   counter-reset: h6;
 }
 
-:where(main > section > :is(section, article) > :is(section, article) > :is(section, article) > :is(section, article):has(> hgroup > h5))::before
+:where(main > section > :where(section, article) > :where(section, article) > :where(section, article) > :where(section, article):has(> hgroup > h5))::before
 {
   content: var(--content, counter(h5, decimal-leading-zero) "." / "");
 
@@ -593,12 +603,12 @@ main > section > :is(section, article) > :is(section, article) > :is(section, ar
 } 
 
 
-main > section > :is(section, article) > :is(section, article) > :is(section, article) > :is(section, article) > :is(section, article):has(> hgroup > h6)
+main > section > :where(section, article) > :where(section, article) > :where(section, article) > :where(section, article) > :where(section, article):has(> hgroup > h6)
 {
   counter-reset: h7;
 }
 
-:where(main > section > :is(section, article) > :is(section, article) > :is(section, article) > :is(section, article) > :is(section, article):has(> hgroup > h6))::before
+:where(main > section > :where(section, article) > :where(section, article) > :where(section, article) > :where(section, article) > :where(section, article):has(> hgroup > h6))::before
 {
   content: var(--content, counter(h6, decimal-leading-zero) "." / "");
 
@@ -616,7 +626,7 @@ main > section > :is(section, article) > :is(section, article) > :is(section, ar
 } 
 
 
-:is(section, article)::before 
+:where(section, article)::before 
 {
   font-family: monospace;
   font-size: .7em;
@@ -627,6 +637,11 @@ main > section > :is(section, article) > :is(section, article) > :is(section, ar
   z-index: 1;
 }
 
+* {
+  scroll-margin-top: 1lh;
+}
+
+
 /* 4a */
 article::before {
   font-weight: bold;
@@ -647,7 +662,7 @@ summary
   cursor: pointer;
 
   /* 6b */
-  list-style-position: outside;
+  /* list-style-position: outside; */
 }
 
 /* 7 */
@@ -663,9 +678,7 @@ hr
 
   height: 0;
 
-  border: none;
-  border-block-end: 1px solid;
-  border-color: color-mix(in srgb, currentColor 50%, transparent 100%);
+  border-block-end: calc(var(--border-width) * 2px);
 
   margin-block: calc(2 * var(--line-lead));
 }
@@ -673,8 +686,10 @@ hr
 
 /* 9 */
 
-*:has(~ main), main, main ~ *,
-:is(section, article):has(> hgroup) > *
+:where(section, article):has(> hgroup) > *,
+*:has(~ main), 
+main ~ *,
+main
 {
 
   /* 9a */
@@ -689,14 +704,15 @@ hr
 }
 
 /* 9d */
-:is(section, article):has(> hgroup)
+:where(section, article):has(> hgroup)
 {
   padding-block: 0;
 }
 
 /* 9c */
-:is(*:has(~ main), main, main ~ *):first-child,
-:is(*:has(~ hgroup), hgroup, hgroup ~ *):first-child
+main:not(:has(~ *)),
+*:not(main):has(~ main):not(* + *),
+:where(*:has(~ hgroup), hgroup, hgroup ~ *):first-child
 {
   border-block-start: none;
 }
@@ -717,10 +733,10 @@ hr
   figure, 
   address,
   blockquote, 
-  a:has(:is(p, pre))[href],
-  del:has(:is(p, pre)),
-  ins:has(:is(p, pre)),
-  map:has(:is(p, pre)),
+  a:has(:where(p, pre))[href],
+  del:has(:where(p, pre)),
+  ins:has(:where(p, pre)),
+  map:has(:where(p, pre)),
 )::before
 {
   content: var(--content, "");
@@ -737,7 +753,7 @@ hr
   margin-top: -1em;
   
   /* 10b */
-  transform: translate(-1.4em, 1em);
+  transform: translate(-2em, .5em);
 
   /* 10c */
   position: sticky;
@@ -747,11 +763,15 @@ hr
 }
 
 /* 10d */
-:is(*:has(~ main), main, main ~ *)::before
+:where(*:has(~ main), main, main ~ *)::before
 {
   top: 1em;
 }
 
+:where(*:first-child:has(~ main))::before {
+  top: 0;
+}
+
 
 /* 10e */
 
@@ -781,16 +801,16 @@ article::before
 }
 
 
-map:has(:is(p, pre))::before
+map:has(:where(p, pre))::before
 {
   mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-photo%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M15%208h.01%22%20%2F%3E%3Cpath%20d%3D%22M3%206a3%203%200%200%201%203%20-3h12a3%203%200%200%201%203%203v12a3%203%200%200%201%20-3%203h-12a3%203%200%200%201%20-3%20-3v-12z%22%20%2F%3E%3Cpath%20d%3D%22M3%2016l5%20-5c.928%20-.893%202.072%20-.893%203%200l5%205%22%20%2F%3E%3Cpath%20d%3D%22M14%2014l1%20-1c.928%20-.893%202.072%20-.893%203%200l3%203%22%20%2F%3E%3C%2Fsvg%3E");
 }
 
-del:has(:is(p, pre))::before {
+del:has(:where(p, pre))::before {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItZmlsZS1taW51cyI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE0IDN2NGExIDEgMCAwIDAgMSAxaDQiIC8+PHBhdGggZD0iTTE3IDIxaC0xMGEyIDIgMCAwIDEgLTIgLTJ2LTE0YTIgMiAwIDAgMSAyIC0yaDdsNSA1djExYTIgMiAwIDAgMSAtMiAyeiIgLz48cGF0aCBkPSJNOSAxNGw2IDAiIC8+PC9zdmc+");
 }
 
-ins:has(:is(p, pre))::before 
+ins:has(:where(p, pre))::before 
 {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItZmlsZS1wbHVzIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTQgM3Y0YTEgMSAwIDAgMCAxIDFoNCIgLz48cGF0aCBkPSJNMTcgMjFoLTEwYTIgMiAwIDAgMSAtMiAtMnYtMTRhMiAyIDAgMCAxIDIgLTJoN2w1IDV2MTFhMiAyIDAgMCAxIC0yIDJ6IiAvPjxwYXRoIGQ9Ik0xMiAxMWwwIDYiIC8+PHBhdGggZD0iTTkgMTRsNiAwIiAvPjwvc3ZnPg==");
 }
@@ -814,7 +834,7 @@ blockquote::before {
   mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-quotes%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%2012c-1.333%20-1.854%20-1.333%20-4.146%200%20-6%22%20%2F%3E%3Cpath%20d%3D%22M8%2012c-1.333%20-1.854%20-1.333%20-4.146%200%20-6%22%20%2F%3E%3Cpath%20d%3D%22M16%2018c1.333%20-1.854%201.333%20-4.146%200%20-6%22%20%2F%3E%3Cpath%20d%3D%22M20%2018c1.333%20-1.854%201.333%20-4.146%200%20-6%22%20%2F%3E%3C%2Fsvg%3E");
 }
 
-a:has(:is(p, pre))[href]::before
+a:has(:where(p, pre))[href]::before
 {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItbGluayI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTVsNiAtNiIgLz48cGF0aCBkPSJNMTEgNmwuNDYzIC0uNTM2YTUgNSAwIDAgMSA3LjA3MSA3LjA3MmwtLjUzNCAuNDY0IiAvPjxwYXRoIGQ9Ik0xMyAxOGwtLjM5NyAuNTM0YTUuMDY4IDUuMDY4IDAgMCAxIC03LjEyNyAwYTQuOTcyIDQuOTcyIDAgMCAxIDAgLTcuMDcxbC41MjQgLS40NjMiIC8+PC9zdmc+");
 }
@@ -877,20 +897,16 @@ form::before {
 ******************************************/
 
 /* 1 */
-ul,
-ol,
-dl,
-menu,
 figure, 
 dialog,
 address,
 details,
 fieldset, 
 blockquote, 
-a:has(:is(p, pre)),
-del:has(:is(p, pre)),
-ins:has(:is(p, pre)),
-map:has(:is(p, pre))
+a:has(:where(p, pre)),
+del:has(:where(p, pre)),
+ins:has(:where(p, pre)),
+map:has(:where(p, pre))
 {
   border: 
     calc(1px * var(--border-width))
@@ -911,6 +927,12 @@ map:has(:is(p, pre))
   text-decoration: none;
 }
 
+details {
+  border: 0;
+  padding-inline: 0;
+  margin-block: var(--line-lead);
+}
+
 dialog {
   margin: auto;
 }
@@ -922,43 +944,35 @@ dialog::backdrop {
 
 
 /* 1d */
-:is(
-  ul,
-  ol,
-  dl,
-  menu,
+:where(
   table,
   figure, 
   address,
   details,
   fieldset,
   blockquote, 
-  a:has(:is(p, pre)),
-  del:has(:is(p, pre)),
-  ins:has(:is(p, pre)),
-  map:has(:is(p, pre)),
+  a:has(:where(p, pre)),
+  del:has(:where(p, pre)),
+  ins:has(:where(p, pre)),
+  map:has(:where(p, pre)),
 ) + 
-:is(
-  ul,
-  ol,
-  dl,
-  menu,
+:where(
   table,
   figure, 
   address,
   details,
   blockquote, 
-  a:has(:is(p, pre)),
-  del:has(:is(p, pre)),
-  ins:has(:is(p, pre)),
-  map:has(:is(p, pre)),
+  a:has(:where(p, pre)),
+  del:has(:where(p, pre)),
+  ins:has(:where(p, pre)),
+  map:has(:where(p, pre)),
 ) 
 {
   margin-block-start: calc(3 * var(--line-lead));
 }
 
 /* 1f */
-:is(p, pre) + fieldset:has(> legend)
+:where(p, pre) + fieldset:has(> legend)
 {
   margin-block-start: calc(1 * var(--line-lead));
 }
@@ -970,14 +984,14 @@ dl
 }
 
 /* 2 */
-:is(
+:where(
   figure, 
   address,
   blockquote, 
-  a:has(:is(p, pre)),
-  del:has(:is(p, pre)),
-  ins:has(:is(p, pre)),
-  map:has(:is(p, pre)),
+  a:has(:where(p, pre)),
+  del:has(:where(p, pre)),
+  ins:has(:where(p, pre)),
+  map:has(:where(p, pre)),
 )::before
 {
   transform: translate(-3.2em, 1em);
@@ -987,19 +1001,19 @@ dl
 
 /* 3a */
 
-figcaption:first-child
+figcaption:where(:first-child)
 {
-  border-block-end: 1px solid var(--border-color);
+  border-block-end: calc(1px * var(--border-width)) solid var(--border-color);
 }
 
-figcaption:last-child
+figcaption:where(:last-child)
 {
-  border-block-start: 1px solid var(--border-color);
+  border-block-start: calc(1px * var(--border-width)) solid var(--border-color);
 }
 
 
 /* 3b */
-legend,
+/* legend,
 details[open] > summary
 {
   border-block-end: 
@@ -1007,7 +1021,7 @@ details[open] > summary
     solid
     var(--border-color)
   ;
-} 
+}  */
 
 
 /* 3c */
@@ -1043,7 +1057,7 @@ table
 caption
 {
   display: block;
-  border: 1px solid var(--border-color);
+  border: calc(var(--border-width) * 2px) var(--border-color);
   text-align: start;
   position: sticky;
   left: 0;
@@ -1081,7 +1095,23 @@ ul,
 dl,
 menu 
 {
-  padding-inline-start: calc(3ch * var(--border-width) / var(--border-width));
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: -1em;
+
+    width: 1ch;
+    height: .5px;
+
+    background-color: var(--border-color);
+  }
+
+  & & {
+    padding-inline: calc(3ch * var(--border-width) / var(--border-width));
+  }
 }
 
 
@@ -1109,6 +1139,7 @@ dl > div
 /* 4c */
 ::marker
 {
+  content: var(--content);
   font-size: .75em;
 }
 
@@ -1167,31 +1198,33 @@ dl > div
 ******************************************/
 
 /* 1 */
-:is(svg, img)[height="16"] {
-  height: 1em;
+svg, img {
+  vertical-align: middle;
+}
+
+svg, math, canvas, img, video, audio, iframe, embed, object
+{
+  max-width: 100%;
+}
+
+span:has(> :where([data-display="block"]):only-child)
+{
+  max-width: calc(100% + var(--line-lead)*2);
+  width: clamp(100%, var(--border-width) * 100vw, 100vw);
+  translate: calc(var(--line-lead) * -1);
+  display: block;
 }
 
 /* 2 */
-video,
-audio, 
-iframe, 
-object,
-svg:not([height='16']), 
-img:not([height='16'])
+[data-display="block"]
 {
   display: block;
   max-width: 100%;
+  height: auto;
 }
 
 
 /* 3 */
-kbd,
-code,
-samp,
-output
-{
-  font-family: monospace;
-}
 
 
 /* 4 */
@@ -1210,19 +1243,23 @@ strong
   font-weight: 700;
 }
 
+strong::after {
+  content: var(--content, ":");
+}
+
 mark
 {
   background-color: color-mix(in srgb, currentColor 5%, transparent 100%);
   padding: 0 .4em .3em;
 }
 
-ins:not(:has(p, pre)),
-del:not(:has(p, pre))
+ins:where(:not(:has(p, pre))),
+del:where(:not(:has(p, pre)))
 {
   text-decoration-thickness: calc(.0625em * var(--border-width));
 }
 
-ins:not(:has(p, pre))
+ins:where(:not(:has(p, pre)))
 {
   text-underline-position: from-font;
 }
@@ -1257,12 +1294,13 @@ sup
   top: -1.5ex;
 }
 
-
-small
-{
-  font-size: .875em;
+small::before {
+  content: var(--content, "(");
 }
 
+small::after {
+  content: var(--content, ")");
+}
 
 /* 6 */
 
@@ -1271,7 +1309,6 @@ b,
 u,
 s,
 em,
-cite,
 a:not(:has(p, pre)) 
 {
   /* font-weight: 400; */
@@ -1287,8 +1324,8 @@ a:not(:has(p, pre))
   s,
   em,
   kbd,
-  cite,
   samp,
+  cite,
   output,
   map:not(:has(p, pre)),
   a:not(:has(p, pre))[href],
@@ -1301,7 +1338,7 @@ a:not(:has(p, pre))
   mask-size: cover;
   mask-repeat: no-repeat;
   background-color: currentColor;
-  vertical-align: text-top;
+  vertical-align: top;
 }
 
 kbd::after,
@@ -1351,41 +1388,38 @@ output::after
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfOF8yMCkiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDhWNmEyIDIgMCAwIDAtMi0ySDVhMiAyIDAgMCAwLTIgMnYxMmEyIDIgMCAwIDAgMiAyaDdhMiAyIDAgMCAwIDItMnYtMm00LTcgMyAzaC02bTMgMyAzLTMiLz48L2c+PC9zdmc+");
 }
 
-cite::after
-{
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdGFnIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBzdHJva2U9Im5vbmUiLz48cGF0aCBkPSJNNi41IDcuNWExIDEgMCAxIDAgMiAwIDEgMSAwIDEgMC0yIDAiLz48cGF0aCBkPSJNMyA2djUuMTcyYTIgMiAwIDAgMCAuNTg2IDEuNDE0bDcuNzEgNy43MWEyLjQxIDIuNDEgMCAwIDAgMy40MDggMGw1LjU5Mi01LjU5MmEyLjQxIDIuNDEgMCAwIDAgMC0zLjQwOGwtNy43MS03LjcxQTIgMiAwIDAgMCAxMS4xNzIgM0g2YTMgMyAwIDAgMC0zIDMiLz48L3N2Zz4=");
-  margin-inline-start: .2em;
+cite::after {
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItZmlsZSI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE0IDN2NGExIDEgMCAwIDAgMSAxaDQiIC8+PHBhdGggZD0iTTE3IDIxaC0xMGEyIDIgMCAwIDEgLTIgLTJ2LTE0YTIgMiAwIDAgMSAyIC0yaDdsNSA1djExYTIgMiAwIDAgMSAtMiAyIiAvPjwvc3ZnPg==");
 }
 
-map:not(:has(p, pre))::after
+map:where(:not(:has(p, pre)))::after
 {
   mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-photo%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M15%208h.01%22%20%2F%3E%3Cpath%20d%3D%22M3%206a3%203%200%200%201%203%20-3h12a3%203%200%200%201%203%203v12a3%203%200%200%201%20-3%203h-12a3%203%200%200%201%20-3%20-3v-12z%22%20%2F%3E%3Cpath%20d%3D%22M3%2016l5%20-5c.928%20-.893%202.072%20-.893%203%200l5%205%22%20%2F%3E%3Cpath%20d%3D%22M14%2014l1%20-1c.928%20-.893%202.072%20-.893%203%200l3%203%22%20%2F%3E%3C%2Fsvg%3E");
 }
 
-a:not(:has(p, pre))[href]::after
+:where(a:not(:has(p, pre)))[href]::after
 {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItZXh0ZXJuYWwtbGluayI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyIDZoLTZhMiAyIDAgMCAwIC0yIDJ2MTBhMiAyIDAgMCAwIDIgMmgxMGEyIDIgMCAwIDAgMiAtMnYtNiIgLz48cGF0aCBkPSJNMTEgMTNsOSAtOSIgLz48cGF0aCBkPSJNMTUgNGg1djUiIC8+PC9zdmc+");
 }
 
-a:not(:has(p, pre))[href]:hover {
+:where(a:not(:has(p, pre)))[href]:hover {
   cursor: pointer;
   text-decoration: underline 1px currentColor;
 }
 
 
 /* 7 */
-
+[role="button"],
 button,
 select,
 textarea,
-input[type]
+:where(input[type])
 {
   font: inherit;
 
   /* 7a */
-  height: 1lh;
-  border: 1px solid currentColor;
-  padding: 0 .5em var(--lh-pad);
+  border: calc(1px * var(--border-width)) solid var(--border-color);
+  padding: 0 calc(.5em * var(--border-width)) var(--lh-pad);
 
   /* 7d */
   background-color: transparent;
@@ -1395,21 +1429,87 @@ input[type]
   
   /* 7f */
   cursor: pointer;
+
+  &[disabled] {
+    opacity: .5;
+  }
 }
 
+select {
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  padding-right: 1.5em;
+}
 
-/* 7b */
+select::after {
+  content: "";
+  display: block;
+  background-color: var(--background-color);
+  border-left: 1px solid var(--border-color);
+  width: 1em;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 
-textarea,
-input[type=range],
-input[type=radio],
-input[type=checkbox]
-{
-  height: auto;
+select::picker-icon {
+  position: absolute;
+  right: .4em;
+  z-index: 10;
+  padding-top: var(--lh-pad);
+  transform-origin: 50% 60%;
 }
 
+[role="button"] {
+  --content: none;
+} 
+
+:where(
+  input[type="text"][list],
+  input[type="search"][list],
+  input[type="tel"][list],
+  input[type="url"][list],
+  input[type="email"][list],
+) {
+  padding-right: 1em;
+
+  background-image: linear-gradient(
+    to right, 
+    transparent calc(100% - 1rem), 
+    var(--border-color) calc(100% - 1rem), 
+    var(--border-color) calc(100% - 1rem + 1px), 
+    transparent calc(100% - 1rem + 1px)
+  );
+
+
+  &::-webkit-calendar-picker-indicator {
+    display: none !important;
+    appearance: none;
+  }
+
+  span:has(> &:only-child):focus-within::after {
+    content: "";
+    width: .5em;
+    height: .5em;
+    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M20.118 3h-16.225a2.914 2.914 0 0 0 -2.503 4.371l8.116 13.549a2.917 2.917 0 0 0 4.987 .005l8.11 -13.539a2.914 2.914 0 0 0 -2.486 -4.386z' /></svg>");
+    mask-repeat: no-repeat;
+    background-color: currentColor;
+    position: absolute;
+    top: calc(50% - (.5em / 1.6));
+    right: .3em;
+  }
+}
+
+
+
+
+/* 7b */
+
+
 span:has(> 
-  :is(
+  :where(
     textarea,
     input[type=radio], 
     input[type=range], 
@@ -1422,15 +1522,6 @@ span:has(>
 
 
 /* 7c */
-button, 
-input[type=image],
-input[type=reset],
-input[type=submit],
-input[type=button]
-{
-  line-height: .5lh;
-  height: 2lh;
-}
 
 
 /* 8 */
@@ -1453,21 +1544,21 @@ select:open::picker-icon {
 
 
 /* 9a */
-span:has(> input:only-child),
-span:has(> select:only-child)
+span:where(:has(> input:only-child)),
+span:where(:has(> select:only-child))
 {
   display: inline-flex;
   position: relative;
 }
 
 /* 9b */
-span > input[type=url]:only-child,
-span > input[type=tel]:only-child,
-span > input[type=text]:only-child,
-span > input[type=email]:only-child,
-span > input[type=number]:only-child,
-span > input[type=search]:only-child,
-span > input[type=password]:only-child
+span > :where(input[type=url]:only-child),
+span > :where(input[type=tel]:only-child),
+span > :where(input[type=text]:only-child),
+span > :where(input[type=email]:only-child),
+span > :where(input[type=number]:only-child),
+span > :where(input[type=search]:only-child),
+span > :where(input[type=password]:only-child)
 {
   padding-inline-start: 1.4em;
 }
@@ -1477,7 +1568,7 @@ span > input[type=password]:only-child
 
 :where(
   span:has(
-    > :is(
+    > :where(
       input[type=tel], 
       input[type=url], 
       input[type=text],
@@ -1487,7 +1578,7 @@ span > input[type=password]:only-child
       input[type=password],
     ):only-child
   )
-)::after
+)::before
 {
   content: var(--content, "");
   position: absolute;
@@ -1497,45 +1588,45 @@ span > input[type=password]:only-child
   margin-block: auto;
 
   display: block;
-  width: .75em;
-  height: .75em;
+  font-size: .75em;
+  width: 1em;
+  height: 1em;
   mask-size: cover;
   mask-repeat: no-repeat;
-  background-color: #000;
-  color: currentColor;
+  background-color: currentColor;
 }
 
-span:has(input[type=search]:only-child)::after 
+span:where(:has(input[type=search]:only-child))::before 
 {
   mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-search%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M10%2010m-7%200a7%207%200%201%200%2014%200a7%207%200%201%200%20-14%200%22%20%2F%3E%3Cpath%20d%3D%22M21%2021l-6%20-6%22%20%2F%3E%3C%2Fsvg%3E");
 }
 
-span:has(input[type=text]:only-child)::after 
+span:where(:has(input[type=text]:only-child))::before 
 {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdGV4dC1pbmNyZWFzZSI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgc3Ryb2tlPSJub25lIi8+PHBhdGggZD0iTTQgMTlWOC41YTMuNSAzLjUgMCAxIDEgNyAwVjE5bS03LTZoN203LTR2Nm0zLTNoLTYiLz48L3N2Zz4=");
 }
 
-span:has(input[type=tel]:only-child)::after 
+span:where(:has(input[type=tel]:only-child))::before 
 {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItcGhvbmUiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIHN0cm9rZT0ibm9uZSIvPjxwYXRoIGQ9Ik01IDRoNGwyIDUtMi41IDEuNWExMSAxMSAwIDAgMCA1IDVMMTUgMTNsNSAydjRhMiAyIDAgMCAxLTIgMkExNiAxNiAwIDAgMSAzIDZhMiAyIDAgMCAxIDItMiIvPjwvc3ZnPg==");
 }
 
-span:has(input[type=email]:only-child)::after 
+span:where(:has(input[type=email]:only-child))::before 
 {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItYXQiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIHN0cm9rZT0ibm9uZSIvPjxwYXRoIGQ9Ik04IDEyYTQgNCAwIDEgMCA4IDAgNCA0IDAgMSAwLTggMCIvPjxwYXRoIGQ9Ik0xNiAxMnYxLjVhMi41IDIuNSAwIDAgMCA1IDBWMTJhOSA5IDAgMSAwLTUuNSA4LjI4Ii8+PC9zdmc+");
 }
 
-span:has(input[type=number]:only-child)::after 
+span:where(:has(input[type=number]:only-child))::before 
 {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItbnVtYmVyLTEyMyI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgc3Ryb2tlPSJub25lIi8+PHBhdGggZD0ibTMgMTAgMi0ydjhtNC04aDNhMSAxIDAgMCAxIDEgMXYyYTEgMSAwIDAgMS0xIDFoLTJhMSAxIDAgMCAwLTEgMXYyYTEgMSAwIDAgMCAxIDFoM200LThoMi41QTEuNSAxLjUgMCAwIDEgMjEgOS41djFhMS41IDEuNSAwIDAgMS0xLjUgMS41SDE4aDEuNWExLjUgMS41IDAgMCAxIDEuNSAxLjV2MWExLjUgMS41IDAgMCAxLTEuNSAxLjVIMTciLz48L3N2Zz4=");
 }
 
-span:has(input[type=password]:only-child)::after 
+span:where(:has(input[type=password]:only-child))::before 
 {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItcGFzc3dvcmQiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIHN0cm9rZT0ibm9uZSIvPjxwYXRoIGQ9Ik0xMiAxMHY0bS0yLTEgNC0ybS00IDAgNCAybS05LTN2NG0tMi0xIDQtMm0tNCAwIDQgMm0xMi0zdjRtLTItMSA0LTJtLTQgMCA0IDIiLz48L3N2Zz4=");
 }
 
-span:has(input[type=url]:only-child)::after 
+span:where(:has(input[type=url]:only-child))::before 
 {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItd29ybGQtd3d3Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBzdHJva2U9Im5vbmUiLz48cGF0aCBkPSJNMTkuNSA3QTkgOSAwIDAgMCAxMiAzYTguOTkgOC45OSAwIDAgMC03LjQ4NCA0Ii8+PHBhdGggZD0iTTExLjUgM2ExNyAxNyAwIDAgMC0xLjgyNiA0TTEyLjUgM2ExNyAxNyAwIDAgMSAxLjgyOCA0TTE5LjUgMTdhOSA5IDAgMCAxLTcuNSA0IDguOTkgOC45OSAwIDAgMS03LjQ4NC00Ii8+PHBhdGggZD0iTTExLjUgMjFhMTcgMTcgMCAwIDEtMS44MjYtNG0yLjgyNiA0YTE3IDE3IDAgMCAwIDEuODI4LTRNMiAxMGwxIDQgMS41LTRMNiAxNGwxLTRtMTAgMCAxIDQgMS41LTQgMS41IDQgMS00TTkuNSAxMGwxIDQgMS41LTQgMS41IDQgMS00Ii8+PC9zdmc+");
 }