@elmethis/qwik 0.0.7 → 0.0.8

package/lib/index.qwik.mjs

@@ -1,19 +1,9 @@
 import { jsx, jsxs, Fragment } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot, useSignal, useTask$, $, useComputed$, useVisibleTask$, useContextProvider, createContextId, useContext } from "@builder.io/qwik";
+import { component$, useStylesScoped$, Slot, useStyles$, useSignal, useTask$, $, useComputed$, useVisibleTask$, useContextProvider, createContextId, useContext } from "@builder.io/qwik";
 import { mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiMessageImageOutline, mdiFile, mdiDownload, mdiLinkVariant, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
 import { renderToString } from "katex";
 import { kebabCase } from "lodash-es";
-const caption$1 = "_caption_f7ep7_27";
-const divider = "_divider_f7ep7_49";
-const code$1 = "_code_f7ep7_1";
-const styles$m = {
-  "code-block": "_code-block_f7ep7_1",
-  "language-icon": "_language-icon_f7ep7_22",
-  caption: caption$1,
-  "copy-icon": "_copy-icon_f7ep7_33",
-  divider,
-  code: code$1
-};
+const styles$n = '.code-block {\n  display: grid;\n  grid-template-rows: 2.75rem 1px 1fr;\n  grid-template-columns: 2rem 1fr 2.5rem;\n  grid-template-areas: "language-icon caption copy-icon" "divider divider divider" "code code code";\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  padding: 0.25rem;\n  border-radius: 0.25rem;\n  background-color: rgba(255, 255, 255, 0.4);\n  box-shadow: 0 0 0.125rem rgba(62, 67, 75, 0.3);\n}\n[data-theme=dark] .code-block {\n  background-color: rgba(44, 48, 55, 0.9);\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.4);\n}\n\n.language-icon {\n  grid-area: language-icon;\n  padding-inline-start: 0.75rem;\n}\n\n.caption {\n  grid-area: caption;\n  padding: 1rem;\n  font-family: monospace;\n}\n\n.copy-icon {\n  grid-area: copy-icon;\n  padding: 0.25rem;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 0.125rem;\n  transition: background-color 100ms;\n  cursor: pointer;\n}\n.copy-icon:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .copy-icon:hover {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.divider {\n  grid-area: divider;\n  width: calc(100% - 1rem);\n  border: none;\n  border-bottom: solid 1px rgba(128, 128, 128, 0.5);\n}\n\n.code {\n  grid-area: code;\n  box-sizing: border-box;\n  padding: 0 1rem;\n}';
 const Rust = component$(({ size = 24, ...props }) => {
   return /* @__PURE__ */ jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -65,11 +55,9 @@ const Typescript = component$(({ size = 24, ...props }) => {
     ]
   });
 });
-const path = "_path_1ccs2_1";
-const styles$l = {
-  path
-};
+const styles$m = ".path {\n  fill: #293138;\n}\n[data-theme=dark] .path {\n  fill: #d2dbe3;\n}";
 const Bash = component$(({ size = 24, ...props }) => {
+  useStylesScoped$(styles$m);
   return /* @__PURE__ */ jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 128 128",
@@ -82,7 +70,7 @@ const Bash = component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsx("path", {
-        class: styles$l.path,
+        class: "path",
         d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
       }),
       /* @__PURE__ */ jsx("path", {
@@ -607,42 +595,30 @@ const ElmLanguageIcon = component$(({ size = 24, language }) => {
     size
   });
 });
-const text$1 = "_text_1gswr_1";
-const code = "_code_1gswr_12";
-const kbd = "_kbd_1gswr_21";
-const link$1 = "_link_1gswr_47";
-const styles$k = {
-  text: text$1,
-  code,
-  kbd,
-  link: link$1
-};
-const text = "_text_zryur_1";
-const textStyles = {
-  text
-};
-const icon$2 = "_icon_19g82_1";
-const styles$j = {
-  icon: icon$2
-};
+const styles$l = '.text {\n  padding: 0;\n  margin: 0;\n  white-space: pre-line;\n  font-size: var(--font-size, 1em);\n  line-height: var(--font-size, 1em);\n  background-color: var(--background-color);\n  transition: color 200ms;\n  text-decoration-color: var(--color);\n}\n\n.code {\n  margin-inline: 0.25rem;\n  padding: 2px 0.5em;\n  font-size: calc(1em - 2px);\n  border-radius: 0.125rem;\n  background-color: rgba(0, 0, 0, 0.075);\n  font-family: "Source Code Pro" monospace;\n}\n\n.kbd {\n  padding: 0.125rem 0.25rem;\n  position: relative;\n  border-radius: 0.125rem;\n  background-color: #e6e6e6;\n}\n[data-theme=dark] .kbd {\n  background-color: #404040;\n}\n.kbd::before {\n  z-index: -1;\n  position: absolute;\n  content: "";\n  bottom: -0.25em;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  background-color: #ccc;\n  border-radius: 0 0 0.125rem 0.125rem;\n  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .kbd::before {\n  background-color: #595959;\n  box-shadow: 0 0 0.125em rgba(255, 255, 255, 0.5);\n}\n\n.link {\n  all: unset;\n  box-sizing: border-box;\n  padding: 0 0.25rem;\n  font-size: var(--font-size);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  color: #6987b8;\n  border-radius: 0.125rem;\n  transition: background-color 200ms, color 200ms, opacity 200ms;\n}\n.link:hover {\n  background-color: rgba(105, 135, 184, 0.2);\n}\n.link:active {\n  opacity: 0.5;\n}\n.link:visited {\n  color: #9771bd;\n  border-bottom: dashed 1px #9771bd;\n}\n.link:visited:hover {\n  background-color: rgba(151, 113, 189, 0.2);\n}\n\n.ogp {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: hidden;\n  border-radius: 0.25rem;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.3);\n  background-color: rgba(255, 255, 255, 0.8);\n}\n[data-theme=dark] .ogp {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.ogp-text {\n  box-sizing: border-box;\n  padding: 0.5rem;\n}\n\n.ogp-title {\n  box-sizing: border-box;\n  font-weight: bold;\n  padding-block-end: 0.25rem;\n}\n\n.ogp-description {\n  opacity: 0.7;\n  padding: 0.25rem;\n}';
+const textStyles = ".text {\n  color: var(--color, #606875);\n}\n.text::selection {\n  color: #cccfd5;\n  background-color: var(--color, #3e434b);\n}\n[data-theme=dark] .text {\n  color: var(--color, #b0b5be);\n}\n[data-theme=dark] .text::selection {\n  color: #3e434b;\n  background-color: var(--color, #cccfd5);\n}";
+const styles$k = ".icon {\n  margin: 0;\n  padding: 0;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1em;\n}\n.icon::selection {\n  filter: brightness(1000%);\n  background-color: var(--color, rgba(0, 0, 0, 0.25));\n}\n[data-theme=dark] .icon {\n  color: var(--color, rgba(255, 255, 255, 0.7));\n}\n[data-theme=dark] .icon::selection {\n  color: rgba(0, 0, 0, 0.7);\n  background-color: var(--color, rgba(255, 255, 255, 0.25));\n}";
 const ElmInlineIcon = component$(({ src, alt }) => {
+  useStylesScoped$(styles$k);
   return /* @__PURE__ */ jsx("div", {
-    class: styles$j.icon,
+    class: "icon",
     children: /* @__PURE__ */ jsx("img", {
       src,
       alt,
-      class: styles$j.icon
+      class: "icon"
     })
   });
 });
 const ElmInlineText = component$((props) => {
-  const { bold = false, italic = false, underline = false, strikethrough = false, code: code2 = false, size = "1em" } = props;
+  useStylesScoped$(styles$l);
+  useStylesScoped$(textStyles);
+  const { bold = false, italic = false, underline = false, strikethrough = false, code = false, size = "1em" } = props;
   let vnode = props.text ? /* @__PURE__ */ jsx("span", {
     children: props.text
   }) : /* @__PURE__ */ jsx(Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsx("kbd", {
-      class: styles$k.kbd,
+      class: "kbd",
       children: vnode
     });
   }
@@ -666,15 +642,15 @@ const ElmInlineText = component$((props) => {
       children: vnode
     });
   }
-  if (code2) {
+  if (code) {
     vnode = /* @__PURE__ */ jsx("code", {
-      class: styles$k.code,
+      class: "code",
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxs("ruby", {
-      class: styles$k.text,
+      class: "text",
       children: [
         /* @__PURE__ */ jsx("span", {
           children: vnode
@@ -687,8 +663,8 @@ const ElmInlineText = component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsx("span", {
     class: [
-      styles$k.text,
-      textStyles.text
+      "text",
+      "text"
     ],
     style: {
       "--color": props.color,
@@ -699,7 +675,7 @@ const ElmInlineText = component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxs("a", {
-      class: styles$k.link,
+      class: "link",
       href: props.href,
       style: {
         "--font-size": size
@@ -716,10 +692,12 @@ const ElmInlineText = component$((props) => {
   }
   return wrappedVnode;
 });
-const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
+const styles$j = '.shiki,\n.shiki span {\n  font-family: "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace !important;\n}\n.shiki *::selection,\n.shiki span *::selection {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .shiki *::selection,\n[data-theme=dark] .shiki span *::selection {\n  background-color: rgba(255, 255, 255, 0.15);\n}\n[data-theme=dark] .shiki,\n[data-theme=dark] .shiki span {\n  color: var(--shiki-dark) !important;\n  background-color: var(--shiki-dark-bg) !important;\n}';
+const ElmShikiHighlighter = component$(({ code, language = "txt" }) => {
+  useStyles$(styles$j);
   const rawHtml = useSignal("");
   useTask$(async ({ track }) => {
-    const currentCode = track(() => code2);
+    const currentCode = track(() => code);
     const currentLang = track(() => language);
     const { getHighlighterSingleton } = await import("./shikiInstance-igs7t2fe.js");
     const highlighter = await getHighlighterSingleton();
@@ -743,13 +721,11 @@ const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
-const icon$1 = "_icon_1gvln_1";
-const styles$i = {
-  icon: icon$1
-};
+const styles$i = ".icon {\n  fill: var(--color, #555b67);\n  transition: fill 200ms;\n}\n[data-theme=dark] .icon {\n  fill: var(--dark-color, #b0b5be);\n}";
 const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
+  useStylesScoped$(styles$i);
   return /* @__PURE__ */ jsx("svg", {
-    class: styles$i.icon,
+    class: "icon",
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -766,7 +742,8 @@ const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }
     })
   });
 });
-const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: caption2, margin }) => {
+const ElmCodeBlock = component$(({ code, language = "txt", caption, margin }) => {
+  useStylesScoped$(styles$n);
   const timerId = useSignal(null);
   const copyToClipboard = $(async () => {
     if (timerId.value !== null) {
@@ -774,35 +751,35 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
       timerId.value = null;
     }
     try {
-      await navigator.clipboard.writeText(code2);
+      await navigator.clipboard.writeText(code);
       timerId.value = window.setTimeout(() => timerId.value = null, 1500);
     } catch (err) {
       console.error("Failed to copy: ", err);
     }
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: styles$m["code-block"],
+    class: "code-block",
     style: {
       margin
     },
     children: [
       /* @__PURE__ */ jsx("span", {
-        class: styles$m["language-icon"],
+        class: "language-icon",
         children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsx("span", {
-        class: styles$m["caption"],
+        class: "caption",
         children: /* @__PURE__ */ jsxs(ElmInlineText, {
           children: [
-            caption2 || language,
+            caption || language,
             /* @__PURE__ */ jsx(Slot, {})
           ]
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$m["copy-icon"],
+        class: "copy-icon",
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -811,12 +788,12 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("hr", {
-        class: styles$m["divider"]
+        class: "divider"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$m["code"],
+        class: "code",
         children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
-          code: code2,
+          code,
           language
         })
       })
@@ -824,70 +801,48 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
   });
 });
 const ElmKatex = component$(({ expression, block = false }) => {
+  useStylesScoped$(textStyles);
   const html = useComputed$(() => renderToString(expression, {
     displayMode: block,
     output: "mathml"
   }));
   return /* @__PURE__ */ jsx("div", {
-    class: textStyles.text,
+    class: "text",
     dangerouslySetInnerHTML: html.value
   });
 });
-const toggle = "_toggle_1nxqa_1";
-const summary = "_summary_1nxqa_14";
-const content$2 = "_content_1nxqa_60";
-const footer = "_footer_1nxqa_80";
-const styles$h = {
-  toggle,
-  "toggle-closed": "_toggle-closed_1nxqa_7",
-  "toggle-open": "_toggle-open_1nxqa_10",
-  summary,
-  "summary-open": "_summary-open_1nxqa_29",
-  "summary-closed": "_summary-closed_1nxqa_33",
-  "chevron-icon": "_chevron-icon_1nxqa_37",
-  "chevron-icon-open": "_chevron-icon-open_1nxqa_40",
-  "chevron-icon-closed": "_chevron-icon-closed_1nxqa_43",
-  "plus-icon": "_plus-icon_1nxqa_47",
-  "plus-icon-open": "_plus-icon-open_1nxqa_53",
-  "plus-icon-closed": "_plus-icon-closed_1nxqa_56",
-  content: content$2,
-  "content-open": "_content-open_1nxqa_73",
-  "content-closed": "_content-closed_1nxqa_76",
-  footer,
-  "footer-line": "_footer-line_1nxqa_99",
-  "footer-cross-icon": "_footer-cross-icon_1nxqa_106",
-  "footer-chevron-icon": "_footer-chevron-icon_1nxqa_109"
-};
-const ElmToggle = component$(({ summary: summary2 }) => {
+const styles$h = ".toggle {\n  margin: 0;\n  display: grid;\n  transition: grid 200ms;\n  overflow: hidden;\n}\n.toggle.toggle-closed {\n  grid-template-rows: 3.5rem 0fr 0rem;\n}\n.toggle.toggle-open {\n  grid-template-rows: 3.5rem 1fr 3rem;\n}\n\n.summary {\n  box-sizing: border-box;\n  padding-inline: 1rem;\n  display: grid;\n  grid-template-columns: min-content 1fr min-content;\n  gap: 1rem;\n  align-items: center;\n  cursor: pointer;\n  border: 1px solid rgba(0, 0, 0, 0.125);\n  background-color: rgba(62, 67, 75, 0.05);\n}\n[data-theme=dark] .summary {\n  border: 1px solid rgba(255, 255, 255, 0.125);\n  background-color: rgba(190, 194, 202, 0.1);\n}\n.summary.summary-open {\n  border-radius: 0.25rem 0.25rem 0 0;\n  border-bottom-color: transparent;\n}\n.summary.summary-closed {\n  border-radius: 0.25rem;\n}\n\n.chevron-icon {\n  transition: transform 200ms;\n}\n.chevron-icon.chevron-icon-open {\n  transform: rotate(90deg);\n}\n.chevron-icon.chevron-icon-closed {\n  transform: rotate(0deg);\n}\n\n.plus-icon {\n  height: 1rem;\n  width: 1rem;\n  transform-origin: center;\n  transition: transform 200ms;\n}\n.plus-icon.plus-icon-open {\n  transform: rotate(135deg);\n}\n.plus-icon.plus-icon-closed {\n  transform: rotate(0deg);\n}\n\n.content {\n  box-sizing: border-box;\n  padding: 1rem;\n  overflow: hidden;\n  transition: opacity 200ms;\n  border: 1px solid rgba(0, 0, 0, 0.125);\n  border-radius: 0 0 0.25rem 0.25rem;\n  background-color: rgba(62, 67, 75, 0.0125);\n}\n[data-theme=dark] .content {\n  border-color: rgba(255, 255, 255, 0.125);\n  background-color: rgba(190, 194, 202, 0.025);\n}\n.content.content-open {\n  opacity: 1;\n}\n.content.content-closed {\n  opacity: 0;\n}\n\n.footer {\n  box-sizing: border-box;\n  margin: 0.25rem 0rem;\n  padding: 0.5rem;\n  color: #c56565;\n  font-family: monospace;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  user-select: none;\n  cursor: pointer;\n  border-radius: 0.25rem;\n  transition: opacity 200ms, background-color 200ms;\n}\n.footer:hover {\n  opacity: 0.5;\n  background-color: rgba(96, 104, 117, 0.1);\n}\n.footer.footer-line {\n  box-sizing: border-box;\n  margin: 0 0.25rem;\n  flex-grow: 1;\n  border: none;\n  border-bottom: solid 1px rgba(128, 128, 128, 0.3);\n}\n.footer.footer-cross-icon {\n  transform: rotate(45deg);\n}\n.footer.footer-chevron-icon {\n  transform: rotate(-90deg);\n}";
+const ElmToggle = component$(({ summary }) => {
+  useStylesScoped$(styles$h);
   const isOpen = useSignal(false);
-  const toggle2 = $(() => {
+  const toggle = $(() => {
     isOpen.value = !isOpen.value;
   });
   return /* @__PURE__ */ jsxs("div", {
     class: [
-      styles$h["toggle"],
+      "toggle",
       {
-        [styles$h["toggle-open"]]: isOpen.value,
-        [styles$h["toggle-closed"]]: !isOpen.value
+        "toggle-open": isOpen.value,
+        "toggle-closed": !isOpen.value
       }
     ],
     children: [
       /* @__PURE__ */ jsxs("div", {
         class: [
-          styles$h["summary"],
+          "summary",
           {
-            [styles$h["summary-open"]]: isOpen.value,
-            [styles$h["summary-closed"]]: !isOpen.value
+            "summary-open": isOpen.value,
+            "summary-closed": !isOpen.value
           }
         ],
-        onClick$: toggle2,
+        onClick$: toggle,
         children: [
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$h["chevron-icon"],
+              "chevron-icon",
               {
-                [styles$h["chevron-icon-open"]]: isOpen.value,
-                [styles$h["chevron-icon-closed"]]: !isOpen.value
+                "chevron-icon-open": isOpen.value,
+                "chevron-icon-closed": !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -895,17 +850,17 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             })
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$h["summary-text"],
-            children: summary2 ? summary2 : /* @__PURE__ */ jsx(Slot, {
+            class: "summary-text",
+            children: summary ? summary : /* @__PURE__ */ jsx(Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$h["plus-icon"],
+              "plus-icon",
               {
-                [styles$h["plus-icon-open"]]: isOpen.value,
-                [styles$h["plus-icon-closed"]]: !isOpen.value
+                "plus-icon-open": isOpen.value,
+                "plus-icon-closed": !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -918,30 +873,30 @@ const ElmToggle = component$(({ summary: summary2 }) => {
       }),
       /* @__PURE__ */ jsx("div", {
         class: [
-          styles$h["content"],
+          "content",
           {
-            [styles$h["content-open"]]: isOpen.value,
-            [styles$h["content-closed"]]: !isOpen.value
+            "content-open": isOpen.value,
+            "content-closed": !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: styles$h.footer,
-        onClick$: toggle2,
+        class: "footer",
+        onClick$: toggle,
         children: [
           /* @__PURE__ */ jsx("span", {
-            class: styles$h["footer-chevron-icon"],
+            class: "footer-chevron-icon",
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$h["footer-line"]
+            class: "footer-line"
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$h["footer-cross-icon"],
+            class: "footer-cross-icon",
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
@@ -951,17 +906,17 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$h["footer-cross-icon"],
+            class: "footer-cross-icon",
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$h["footer-line"]
+            class: "footer-line"
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$h["footer-chevron-icon"],
+            class: "footer-chevron-icon",
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
@@ -972,50 +927,44 @@ const ElmToggle = component$(({ summary: summary2 }) => {
     ]
   });
 });
-const styles$g = {
-  "block-fallback": "_block-fallback_rt986_1"
-};
-const wrapper = "_wrapper_1yktj_12";
-const dot = "_dot_1yktj_22";
-const styles$f = {
-  wrapper,
-  dot
-};
+const styles$g = ".block-fallback {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: var(--height);\n}";
+const styles$f = "@keyframes bounce {\n  0% {\n    transform: translateY(0%) scaleY(0.3) scaleX(1.5);\n  }\n  10% {\n    transform: scaleY(0.8) scaleX(1.2);\n  }\n  100% {\n    transform: translateY(-400%) scaleY(1.1);\n  }\n}\n.wrapper {\n  width: var(--size);\n  height: var(--size);\n  user-select: none;\n  position: relative;\n  display: flex;\n  justify-content: space-around;\n  align-items: flex-end;\n}\n\n.dot {\n  width: 20%;\n  height: 20%;\n  border-radius: 50%;\n  animation-name: bounce;\n  animation-duration: 0.4s;\n  animation-iteration-count: infinite;\n  animation-direction: alternate;\n  animation-timing-function: ease-out;\n  transition: background-color 400ms;\n  background-color: var(--color, #606875);\n}\n[data-theme=dark] .dot {\n  background-color: #b0b5be;\n}\n.dot:nth-last-of-type(1) {\n  animation-delay: -100ms;\n}\n.dot:nth-last-of-type(2) {\n  animation-delay: 0ms;\n}\n.dot:nth-last-of-type(3) {\n  animation-delay: 100ms;\n}";
 const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
+  useStylesScoped$(styles$f);
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$f.wrapper,
+    class: "wrapper",
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$f.dot,
+        class: "dot",
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$f.dot,
+        class: "dot",
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$f.dot,
+        class: "dot",
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$e = {
-  "rectangle-wave": "_rectangle-wave_hej9g_17"
-};
+const styles$e = "@keyframes elm-rectangle-wave {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  30% {\n    opacity: 0;\n  }\n  40% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 0;\n  }\n}\n.rectangle-wave {\n  box-sizing: border-box;\n  position: absolute;\n  overflow: hidden;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  animation-name: elm-rectangle-wave;\n  animation-duration: 1200ms;\n  animation-iteration-count: infinite;\n  animation-fill-mode: both;\n  border-style: solid;\n  border-width: 1px;\n  border-color: rgba(0, 0, 0, 0.7);\n}\n[data-theme=dark] .rectangle-wave {\n  border-color: rgba(255, 255, 255, 0.7);\n}";
 const ElmRectangleWave = component$(() => {
+  useStylesScoped$(styles$e);
   return /* @__PURE__ */ jsx("div", {
     "aria-hidden": "true",
-    class: styles$e["rectangle-wave"]
+    class: "rectangle-wave"
   });
 });
 const ElmBlockFallback = component$(({ height = "16rem" }) => {
+  useStylesScoped$(styles$g);
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$g["block-fallback"],
+    class: "block-fallback",
     style: {
       "--height": height
     },
@@ -1025,17 +974,9 @@ const ElmBlockFallback = component$(({ height = "16rem" }) => {
     ]
   });
 });
-const image$1 = "_image_zq5gl_11";
-const fallback = "_fallback_zq5gl_31";
-const styles$d = {
-  "block-image": "_block-image_zq5gl_1",
-  "image-container": "_image-container_zq5gl_11",
-  image: image$1,
-  fallback,
-  "caption-box": "_caption-box_zq5gl_41",
-  "modal-container": "_modal-container_zq5gl_53"
-};
-const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height, enableModal = true }) => {
+const styles$d = ".block-image {\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.image-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.image {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: 0.25rem;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);\n  transition: opacity 400ms;\n  opacity: var(--opacity, 1);\n  user-select: none;\n  cursor: var(--cursor);\n}\n\n.fallback {\n  width: 100%;\n  height: 100%;\n  inset: 0 0 auto auto;\n  position: absolute;\n  transition: opacity 400ms;\n  opacity: var(--opacity, 1);\n  pointer-events: none;\n}\n\n.caption-box {\n  box-sizing: border-box;\n  padding: 0rem 1rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  opacity: 0.75;\n  opacity: var(--opacity, 1);\n  transition: opacity 400ms;\n}\n\n.modal-container {\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  inset: 0 0 auto auto;\n  z-index: 100;\n  background-color: rgba(35, 38, 42, 0.8);\n  cursor: zoom-out;\n  opacity: var(--opacity, 1);\n  transition: opacity 200ms;\n}";
+const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModal = true }) => {
+  useStylesScoped$(styles$d);
   const isLoading = useSignal(true);
   const isShowModal = useSignal(false);
   const handleImageLoad = $(() => {
@@ -1048,10 +989,10 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
   });
   const ImageComponent = /* @__PURE__ */ jsx("img", {
     class: [
-      styles$d.image
+      "image"
     ],
     src,
-    alt: alt ?? caption2 ?? "Image",
+    alt: alt ?? caption ?? "Image",
     width,
     height,
     onLoad$: handleImageLoad,
@@ -1061,7 +1002,7 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     }
   });
   const Modal = /* @__PURE__ */ jsx("div", {
-    class: styles$d["modal-container"],
+    class: "modal-container",
     style: {
       pointerEvents: isShowModal.value ? "auto" : "none",
       "--opacity": isShowModal.value ? 1 : 0
@@ -1070,10 +1011,10 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     children: ImageComponent
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: styles$d["block-image"],
+    class: "block-image",
     children: [
       /* @__PURE__ */ jsxs("div", {
-        class: styles$d["image-container"],
+        class: "image-container",
         style: {
           "--opacity": isLoading.value ? 1 : 0
         },
@@ -1081,13 +1022,13 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
         children: [
           ImageComponent,
           /* @__PURE__ */ jsx("div", {
-            class: styles$d["fallback"],
+            class: "fallback",
             children: /* @__PURE__ */ jsx(ElmRectangleWave, {})
           })
         ]
       }),
-      caption2 && /* @__PURE__ */ jsxs("figcaption", {
-        class: styles$d["caption-box"],
+      caption && /* @__PURE__ */ jsxs("figcaption", {
+        class: "caption-box",
         style: {
           "--opacity": isLoading.value ? 0 : 1
         },
@@ -1104,7 +1045,7 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
           }),
           /* @__PURE__ */ jsx(ElmInlineText, {
             size: "1rem",
-            children: caption2
+            children: caption
           })
         ]
       }),
@@ -1112,36 +1053,32 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     ]
   });
 });
-const file = "_file_14a0w_1";
-const styles$c = {
-  file,
-  "file-size": "_file-size_14a0w_16",
-  "download-icon": "_download-icon_14a0w_21"
-};
+const styles$c = ".file {\n  margin: 0;\n  padding: 1rem;\n  display: grid;\n  grid-template-columns: 1.5rem 1fr 1fr 1.5rem;\n  gap: 1rem;\n  align-items: center;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);\n  border-radius: 0.25rem;\n  background-color: rgba(255, 255, 255, 0.2);\n}\n[data-theme=dark] .file {\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.file-size {\n  text-align: right;\n  opacity: 0.5;\n}\n\n.download-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 1.5rem;\n  width: 1.5rem;\n  padding: 0.125rem;\n  border-radius: 0.125rem;\n  cursor: pointer;\n  transition: color 200ms, background-color 200ms;\n}\n.download-icon:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .download-icon:hover {\n  background-color: rgba(255, 255, 255, 0.1);\n}";
 function getLastPathSegmentWithoutQueryOrHash(urlString) {
   const cleanedUrl = urlString.split(/[?#]/)[0];
   const pathSegments = cleanedUrl.split("/").filter(Boolean);
   return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : null;
 }
 const ElmFile = component$(({ name, src, filesize }) => {
+  useStylesScoped$(styles$c);
   const downloadFile = $(async () => {
-    let link2;
+    let link;
     try {
       const response = await fetch(src);
       if (!response.ok) throw new Error("Failed to download file");
       const blob = await response.blob();
-      link2 = document.createElement("a");
-      link2.href = URL.createObjectURL(blob);
-      link2.download = name ?? getLastPathSegmentWithoutQueryOrHash(src) ?? "file";
-      link2.click();
+      link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = name ?? getLastPathSegmentWithoutQueryOrHash(src) ?? "file";
+      link.click();
     } catch (error) {
       console.error("ERROR:", error);
     } finally {
-      if (link2) URL.revokeObjectURL(link2.href);
+      if (link) URL.revokeObjectURL(link.href);
     }
   });
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$c.file,
+    class: "file",
     children: [
       /* @__PURE__ */ jsx("div", {
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -1155,13 +1092,13 @@ const ElmFile = component$(({ name, src, filesize }) => {
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$c["file-size"],
+        class: "file-size",
         children: /* @__PURE__ */ jsx(ElmInlineText, {
           children: filesize
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$c["download-icon"],
+        class: "download-icon",
         onClick$: downloadFile,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           d: mdiDownload,
@@ -1171,55 +1108,41 @@ const ElmFile = component$(({ name, src, filesize }) => {
     ]
   });
 });
-const bookmark = "_bookmark_rgq1s_1";
-const container = "_container_rgq1s_19";
-const image = "_image_rgq1s_32";
-const content$1 = "_content_rgq1s_53";
-const title = "_title_rgq1s_73";
-const description = "_description_rgq1s_76";
-const link = "_link_rgq1s_80";
-const styles$b = {
-  bookmark,
-  container,
-  image,
-  content: content$1,
-  title,
-  description,
-  link
-};
-const ElmBookmark = component$(({ url, image: image2, title: title2, description: description2, favicon }) => {
+const styles$b = ".bookmark {\n  all: unset;\n  display: block;\n  container-type: inline-size;\n  border-radius: 0.25rem;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition: background-color 200ms, transform 200ms;\n}\n.bookmark:hover {\n  background-color: rgba(105, 135, 184, 0.1);\n  transform: translateX(-0.125rem) translateY(-0.125rem);\n}\n.bookmark:active {\n  background-color: rgba(89, 181, 124, 0.1);\n  transform: translateX(0) translateY(0);\n}\n\n.container {\n  all: unset;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n}\n@container (max-width: 700px) {\n  .container {\n    flex-direction: column;\n  }\n}\n\n.image {\n  overflow: hidden;\n  height: 100%;\n  opacity: 0.9;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  object-fit: cover;\n  object-position: center;\n  aspect-ratio: 2/1;\n  width: min-content;\n  max-width: 35%;\n}\n@container (max-width: 700px) {\n  .image {\n    min-width: unset;\n    max-width: unset;\n    width: 100%;\n  }\n}\n\n.content {\n  flex: 1;\n  width: 75%;\n  box-sizing: border-box;\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  justify-content: space-between;\n  transition: background-color 200ms;\n  background-color: rgba(255, 255, 255, 0.4);\n}\n@container (max-width: 700px) {\n  .content {\n    width: 100%;\n  }\n}\n[data-theme=dark] .content {\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.content .title {\n  box-sizing: border-box;\n}\n.content .description {\n  box-sizing: border-box;\n  opacity: 0.7;\n}\n.content .link {\n  line-height: 0.75rem;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 0.25rem;\n  opacity: 0.7;\n}";
+const ElmBookmark = component$(({ url, image, title, description, favicon }) => {
+  useStylesScoped$(styles$b);
   return /* @__PURE__ */ jsx("div", {
-    class: styles$b.bookmark,
+    class: "bookmark",
     children: /* @__PURE__ */ jsxs("a", {
-      class: styles$b.container,
+      class: "container",
       href: url,
       target: "_blank",
       rel: "noopener noreferrer",
       children: [
         /* @__PURE__ */ jsx("img", {
-          class: styles$b.image,
-          src: image2,
+          class: "image",
+          src: image,
           alt: "OGP Image"
         }),
         /* @__PURE__ */ jsxs("div", {
-          class: styles$b.content,
+          class: "content",
           children: [
             /* @__PURE__ */ jsx("div", {
-              class: styles$b.title,
+              class: "title",
               children: /* @__PURE__ */ jsx(ElmInlineText, {
                 bold: true,
-                children: title2
+                children: title
               })
             }),
             /* @__PURE__ */ jsx("div", {
-              class: styles$b.description,
+              class: "description",
               children: /* @__PURE__ */ jsx(ElmInlineText, {
                 size: "0.75rem",
-                children: description2
+                children: description
               })
             }),
             /* @__PURE__ */ jsxs("div", {
-              class: styles$b.link,
+              class: "link",
               children: [
                 favicon ? /* @__PURE__ */ jsx(ElmInlineIcon, {
                   src: favicon
@@ -1239,24 +1162,19 @@ const ElmBookmark = component$(({ url, image: image2, title: title2, description
     })
   });
 });
-const blockquote = "_blockquote_b5jd8_1";
-const body = "_body_b5jd8_18";
-const icon = "_icon_b5jd8_23";
-const styles$a = {
-  blockquote,
-  body,
-  icon
-};
+const styles$a = '.blockquote {\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  background-color: rgba(134, 142, 156, 0.1);\n  position: relative;\n}\n.blockquote::after {\n  position: absolute;\n  content: "";\n  top: 0;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  background-color: #868e9c;\n}\n\n.body {\n  box-sizing: border-box;\n  padding: 2rem 1.5rem;\n}\n\n.icon {\n  position: absolute;\n  content: "";\n  inset: var(--inset);\n  opacity: 0.5;\n}';
 const ElmBlockQuote = component$(({ cite }) => {
+  useStylesScoped$(styles$a);
+  useStylesScoped$(textStyles);
   return /* @__PURE__ */ jsxs("blockquote", {
     class: [
-      styles$a.blockquote,
-      textStyles.text
+      "blockquote",
+      "text"
     ],
     cite,
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$a.icon,
+        class: "icon",
         style: {
           "--inset": "0.25rem auto auto 0.5rem"
         },
@@ -1265,13 +1183,11 @@ const ElmBlockQuote = component$(({ cite }) => {
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: [
-          styles$a.body
-        ],
+        class: "body",
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$a.icon,
+        class: "icon",
         style: {
           "--inset": "auto 0.25rem 0.25rem auto"
         },
@@ -1282,14 +1198,7 @@ const ElmBlockQuote = component$(({ cite }) => {
     ]
   });
 });
-const callout = "_callout_1d8l2_1";
-const header = "_header_1d8l2_25";
-const content = "_content_1d8l2_31";
-const styles$9 = {
-  callout,
-  header,
-  content
-};
+const styles$9 = '.callout {\n  position: relative;\n  padding: 1rem;\n}\n.callout::after {\n  position: absolute;\n  content: "";\n  inset: 0 auto auto 0;\n  height: 100%;\n  width: 0.25rem;\n  background-color: var(--callout-color);\n}\n.callout::before {\n  position: absolute;\n  content: "";\n  inset: 0 0 auto auto;\n  height: 100%;\n  width: 100%;\n  background-color: var(--callout-color);\n  opacity: 0.15;\n  z-index: -1;\n  pointer-events: none;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.content {\n  padding-block-start: 1rem;\n  padding-block-end: 0.25rem;\n}';
 const COLOR_MAP = Object.freeze({
   note: {
     code: "#6987b8",
@@ -1313,14 +1222,15 @@ const COLOR_MAP = Object.freeze({
   }
 });
 const ElmCallout = component$(({ type = "note" }) => {
+  useStylesScoped$(styles$9);
   return /* @__PURE__ */ jsxs("aside", {
-    class: styles$9.callout,
+    class: "callout",
     style: {
       "--callout-color": COLOR_MAP[type].code
     },
     children: [
       /* @__PURE__ */ jsxs("div", {
-        class: styles$9.header,
+        class: "header",
         children: [
           /* @__PURE__ */ jsx(ElmMdiIcon, {
             d: COLOR_MAP[type].icon,
@@ -1333,29 +1243,25 @@ const ElmCallout = component$(({ type = "note" }) => {
         ]
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$9.content,
+        class: "content",
         children: /* @__PURE__ */ jsx(Slot, {})
       })
     ]
   });
 });
-const hr = "_hr_1g58p_1";
-const styles$8 = {
-  hr
-};
+const styles$8 = ".hr {\n  margin: 0;\n  width: 100%;\n  border: none;\n  border-bottom: dashed 1px #868e9c;\n}";
 const ElmDivider = component$(({ margin }) => {
+  useStylesScoped$(styles$8);
   return /* @__PURE__ */ jsx("hr", {
-    class: styles$8.hr,
+    class: "hr",
     style: {
       marginBlock: margin
     }
   });
 });
-const fragment = "_fragment_1kofp_1";
-const styles$7 = {
-  fragment
-};
+const styles$7 = ".fragment {\n  font-size: 1rem;\n  width: 1rem;\n  height: 1rem;\n  padding: 0.125rem;\n  margin-inline-start: 0.5rem;\n  border-radius: 0.125rem;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: #b69545;\n  cursor: pointer;\n  user-select: none;\n  opacity: 1;\n  transition: background-color 200ms, opacity 100ms, transform 100ms;\n}\n.fragment:hover {\n  background-color: rgba(134, 142, 156, 0.2);\n}\n.fragment:active {\n  opacity: 0.5;\n  transform: translateX(1px) translateY(1px);\n}";
 const ElmFragmentIdentifier = component$(({ id }) => {
+  useStylesScoped$(styles$7);
   const handleHashClick = $((id2) => {
     const url = new URL(window.location.href);
     url.hash = id2;
@@ -1368,26 +1274,12 @@ const ElmFragmentIdentifier = component$(({ id }) => {
     }
   });
   return /* @__PURE__ */ jsx("span", {
-    class: styles$7.fragment,
+    class: "fragment",
     onClick$: () => handleHashClick(id),
     children: "#"
   });
 });
-const h1 = "_h1_1mgdk_10";
-const h2 = "_h2_1mgdk_40";
-const h3 = "_h3_1mgdk_75";
-const h4 = "_h4_1mgdk_92";
-const h5 = "_h5_1mgdk_96";
-const h6 = "_h6_1mgdk_100";
-const styles$6 = {
-  "heading-common": "_heading-common_1mgdk_1",
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-};
+const styles$6 = '.heading-common {\n  margin: 0;\n  position: relative;\n  font-size: var(--font-size);\n  line-height: var(--font-size);\n  opacity: var(--opacity);\n  transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n  position: absolute;\n  content: "";\n  bottom: -4px;\n  left: 0;\n  width: 100%;\n  height: 0.25px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: transform 800ms;\n  transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n  position: absolute;\n  content: "";\n  bottom: -6px;\n  left: 45%;\n  width: 10%;\n  height: 2px;\n  background-color: rgba(0, 0, 0, 0.6);\n  transition: transform 800ms;\n  transform: scaleY(var(--scale));\n  transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n  background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2 {\n  border-bottom: solid 1px rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h2 {\n  border-color: rgba(255, 255, 255, 0.5);\n}\n.h2::after {\n  position: absolute;\n  content: "";\n  right: 2px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::after {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n.h2::before {\n  position: absolute;\n  content: "";\n  right: 10px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::before {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n\n.h3 {\n  box-sizing: border-box;\n  padding-left: 0.75rem;\n}\n.h3::after {\n  position: absolute;\n  content: "";\n  width: 3px;\n  height: 12px;\n  top: calc(50% - 8px);\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h3::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h4 {\n  position: relative;\n}\n\n.h5 {\n  position: relative;\n}\n\n.h6 {\n  position: relative;\n}';
 const SIZE_MAP = Object.freeze({
   1: 1.5,
   2: 1.4,
@@ -1396,19 +1288,21 @@ const SIZE_MAP = Object.freeze({
   5: 1.15,
   6: 1.1
 });
-const ElmHeading = component$(({ level, text: text2, id }) => {
+const ElmHeading = component$(({ level, text, id }) => {
+  useStylesScoped$(styles$6);
+  useStylesScoped$(textStyles);
   const Tag = `h${level}`;
   return /* @__PURE__ */ jsxs(Tag, {
     class: [
-      styles$6["heading-common"],
-      textStyles.text,
-      styles$6[`h${level}`]
+      "heading-common",
+      "text",
+      `h${level}`
     ],
     style: {
       "--font-size": `${SIZE_MAP[level]}em`
     },
     children: [
-      text2,
+      text,
       /* @__PURE__ */ jsx(Slot, {}),
       id && /* @__PURE__ */ jsx("span", {
         style: {
@@ -1421,11 +1315,14 @@ const ElmHeading = component$(({ level, text: text2, id }) => {
     ]
   });
 });
+const listStyles = '.elmethis-list-common {\n  margin-block: 1rem;\n  opacity: var(--opacity);\n  transition: opacity 800ms;\n  box-sizing: border-box;\n  padding-left: 1.25rem;\n}\n\n.elmethis-bulleted-list li {\n  box-sizing: border-box;\n  padding-left: 0.5rem;\n  margin-block: 0.75rem;\n}\n.elmethis-bulleted-list li::marker {\n  content: url("data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMTYgMTYnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICA+CiAgICA8cGF0aAogICAgICBmaWxsPScjNDQ5NzYzJwogICAgICBvcGFjaXR5PScwLjgnCiAgICAgIGQ9J00zIDMuNzMyYTEuNSAxLjUgMCAwIDEgMi4zMDUtMS4yNjVsNi43MDYgNC4yNjdhMS41IDEuNSAwIDAgMSAwIDIuNTMxbC02LjcwNiA0LjI2OEExLjUgMS41IDAgMCAxIDMgMTIuMjY3VjMuNzMyWicKICAgIC8+CiAgPC9zdmc+");\n}\n.elmethis-bulleted-list li ul li::marker {\n  content: url("data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjQgMjQnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9J3RyYW5zcGFyZW50JwogID4KICAgIDxwYXRoCiAgICAgIHN0cm9rZUxpbmVjYXA9J3JvdW5kJwogICAgICBzdHJva2VMaW5lam9pbj0ncm91bmQnCiAgICAgIGQ9J001LjI1IDUuNjUzYzAtLjg1Ni45MTctMS4zOTggMS42NjctLjk4NmwxMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMSAwIDEuOTcybC0xMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMS0xLjY2Ny0uOTg2VjUuNjUzWicKICAgIC8+CiAgPC9zdmc+");\n}\n.elmethis-bulleted-list li ul li ul li::marker {\n  content: url("data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjAgMjAnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9JyM0NDk3NjMnCiAgPgogICAgPHBhdGgKICAgICAgZmlsbFJ1bGU9J2V2ZW5vZGQnCiAgICAgIGQ9J004LjIyIDUuMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMGw0LjI1IDQuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2LTEuMDZMMTEuOTQgMTAgOC4yMiA2LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaJwogICAgICBjbGlwUnVsZT0nZXZlbm9kZCcKICAgIC8+CiAgPC9zdmc+");\n}\n\n.elmethis-numbered-list li {\n  box-sizing: border-box;\n  padding-left: 0.25rem;\n  margin-block: 0.75rem;\n  margin-left: 0.25rem;\n  list-style-type: decimal;\n}\n.elmethis-numbered-list li::marker {\n  font-weight: bold;\n  color: #9771bd;\n}\n.elmethis-numbered-list li ol li {\n  list-style-type: lower-alpha;\n}\n.elmethis-numbered-list li ol li ol li {\n  list-style-type: lower-roman;\n}\n.elmethis-numbered-list li ol li ol li ol li {\n  list-style-type: lower-greek;\n}';
 const ElmList = component$(({ listStyle = "unordered" }) => {
+  useStyles$(listStyles);
+  useStylesScoped$(textStyles);
   if (listStyle === "ordered") {
     return /* @__PURE__ */ jsx("ol", {
       class: [
-        textStyles.text,
+        "text",
         "elmethis-list-common",
         "elmethis-numbered-list"
       ],
@@ -1434,7 +1331,7 @@ const ElmList = component$(({ listStyle = "unordered" }) => {
   } else {
     return /* @__PURE__ */ jsx("ul", {
       class: [
-        textStyles.text,
+        "text",
         "elmethis-list-common",
         "elmethis-bulleted-list"
       ],
@@ -1442,10 +1339,7 @@ const ElmList = component$(({ listStyle = "unordered" }) => {
     });
   }
 });
-const paragraph = "_paragraph_jz10s_1";
-const styles$5 = {
-  paragraph
-};
+const styles$5 = ".paragraph {\n  opacity: var(--opacity, 0);\n  opacity: var(--opacity);\n  transition: opacity 800ms;\n  color: var(--color, #606875);\n  background-color: var(--background-color, inherit);\n}\n.paragraph::selection {\n  color: rgba(255, 255, 255, 0.7);\n  background-color: rgba(0, 0, 0, 0.7);\n}\n[data-theme=dark] .paragraph {\n  color: rgba(255, 255, 255, 0.7);\n}\n[data-theme=dark] .paragraph::selection {\n  color: rgba(0, 0, 0, 0.7);\n  background-color: rgba(255, 255, 255, 0.7);\n}";
 const useInView = (props) => {
   const ref = useSignal();
   const isVisible = useSignal(false);
@@ -1466,12 +1360,14 @@ const useInView = (props) => {
   };
 };
 const ElmParagraph = component$(({ color, backgroundColor }) => {
+  useStylesScoped$(styles$5);
+  useStylesScoped$(textStyles);
   const { ref, isVisible } = useInView();
   return /* @__PURE__ */ jsx("p", {
     ref,
     class: [
-      styles$5.paragraph,
-      textStyles.text
+      "paragraph",
+      "text"
     ],
     style: {
       "--color": color,
@@ -1481,38 +1377,32 @@ const ElmParagraph = component$(({ color, backgroundColor }) => {
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
-const table = "_table_x2nyq_1";
-const caption = "_caption_x2nyq_8";
-const spacing = "_spacing_x2nyq_25";
-const styles$4 = {
-  table,
-  caption,
-  "caption-inner": "_caption-inner_x2nyq_18",
-  spacing
-};
+const styles$4 = ".table {\n  margin-block: var(--margin-block);\n  border-collapse: collapse;\n  border-spacing: 0;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);\n}\n\n.caption {\n  position: relative;\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  margin-block-end: 1rem;\n}\n\n.caption-inner {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.spacing {\n  flex-grow: 1;\n  height: 1px;\n  background-color: rgba(128, 128, 128, 0.2);\n}";
 const HasRowHeaderContext = createContextId("HasRowHeaderContext");
 const ElmTable = component$((props) => {
-  const { margin, caption: caption2, hasRowHeader = false } = props;
+  useStylesScoped$(styles$4);
+  useStylesScoped$(textStyles);
+  const { margin, caption, hasRowHeader = false } = props;
   const hasRowHeaderComputed = useComputed$(() => hasRowHeader);
   useContextProvider(HasRowHeaderContext, hasRowHeaderComputed);
   return /* @__PURE__ */ jsxs("table", {
     class: [
-      styles$4.table,
-      textStyles.text
+      "table",
+      "text"
     ],
     style: {
       "--margin-block": margin
     },
     children: [
-      caption2 && /* @__PURE__ */ jsx("caption", {
+      caption && /* @__PURE__ */ jsx("caption", {
         children: /* @__PURE__ */ jsxs("span", {
-          class: styles$4["caption"],
+          class: "caption",
           children: [
             /* @__PURE__ */ jsx("span", {
-              class: styles$4.spacing
+              class: "spacing"
             }),
             /* @__PURE__ */ jsxs("span", {
-              class: styles$4["caption-inner"],
+              class: "caption-inner",
               children: [
                 /* @__PURE__ */ jsx("svg", {
                   viewBox: "0 0 24 24",
@@ -1524,12 +1414,12 @@ const ElmTable = component$((props) => {
                   })
                 }),
                 /* @__PURE__ */ jsx(ElmInlineText, {
-                  text: caption2
+                  text: caption
                 })
               ]
             }),
             /* @__PURE__ */ jsx("span", {
-              class: styles$4.spacing
+              class: "spacing"
             })
           ]
         })
@@ -1538,15 +1428,13 @@ const ElmTable = component$((props) => {
     ]
   });
 });
-const thead = "_thead_1brzu_1";
-const styles$3 = {
-  thead
-};
+const styles$3 = ".thead {\n  text-align: left;\n  transition: background-color 400ms, color 400ms;\n  border-bottom: 2px solid rgba(128, 128, 128, 0.5);\n}";
 const HasHeaderContext = createContextId("HasHeaderContext");
 const ElmTableHeader = component$(() => {
+  useStylesScoped$(styles$3);
   useContextProvider(HasHeaderContext, true);
   return /* @__PURE__ */ jsx("thead", {
-    class: styles$3.thead,
+    class: "thead",
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
@@ -1556,55 +1444,41 @@ const ElmTableBody = component$(() => {
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
-const tr = "_tr_2ogbz_1";
-const styles$2 = {
-  tr,
-  "has-row-header": "_has-row-header_2ogbz_20"
-};
+const styles$2 = ".tr {\n  transition: background-color 200ms;\n}\n.tr:nth-child(odd) {\n  background-color: transparent;\n}\n.tr:nth-child(even) {\n  background-color: rgba(0, 0, 0, 0.015);\n}\n[data-theme=dark] .tr:nth-child(even) {\n  background-color: rgba(255, 255, 255, 0.015);\n}\n.tr:hover {\n  background-color: rgba(105, 135, 184, 0.15);\n}\n[data-theme=dark] .tr:hover {\n  background-color: rgba(105, 135, 184, 0.15);\n}\n\n.has-row-header td:first-child,\n.has-row-header tr:first-child {\n  background-color: rgba(128, 128, 128, 0.15);\n}";
 const ElmTableRow = component$(() => {
+  useStylesScoped$(styles$2);
   const hasRowHeader = useContext(HasRowHeaderContext);
   return /* @__PURE__ */ jsx("tr", {
     class: [
-      styles$2.tr,
-      hasRowHeader.value && styles$2["has-row-header"]
+      "tr",
+      hasRowHeader.value && "has-row-header"
     ],
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
-const common = "_common_1puhv_1";
-const td = "_td_1puhv_24";
-const th = "_th_1puhv_31";
-const styles$1 = {
-  common,
-  td,
-  th
-};
+const styles$1 = ".common {\n  padding: 0.75rem 1rem;\n  color: rgba(0, 0, 0, 0.7);\n  border-right: 1px dotted rgba(0, 0, 0, 0.15);\n}\n.common::selection {\n  color: rgba(255, 255, 255, 0.7);\n  background-color: rgba(0, 0, 0, 0.7);\n}\n[data-theme=dark] .common {\n  color: rgba(255, 255, 255, 0.7);\n}\n[data-theme=dark] .common::selection {\n  color: rgba(0, 0, 0, 0.7);\n  background-color: rgba(255, 255, 255, 0.7);\n}\n[data-theme=dark] .common {\n  border-right: 1px dotted rgba(255, 255, 255, 0.15);\n}\n.common:last-child {\n  border-right: none;\n}\n\n.td {\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\n}\n[data-theme=dark] .td {\n  border-top-color: rgba(255, 255, 255, 0.15);\n}\n\n.th {\n  background-color: rgba(128, 128, 128, 0.15);\n}";
 const ElmTableCell = component$((props) => {
-  const { hasHeader = false, text: text2 } = props;
+  useStylesScoped$(styles$1);
+  const { hasHeader = false, text } = props;
   const hasHeaderInjected = useContext(HasHeaderContext, false);
   const isHeader = hasHeader || hasHeaderInjected;
   return /* @__PURE__ */ jsx(Fragment, {
     children: isHeader ? /* @__PURE__ */ jsx("th", {
       class: [
-        styles$1.common,
-        styles$1.th
+        "common",
+        "th"
       ],
-      children: text2 ? text2 : /* @__PURE__ */ jsx(Slot, {})
+      children: text ? text : /* @__PURE__ */ jsx(Slot, {})
     }) : /* @__PURE__ */ jsx("td", {
       class: [
-        styles$1.common,
-        styles$1.td
+        "common",
+        "td"
       ],
-      children: text2 ? text2 : /* @__PURE__ */ jsx(Slot, {})
+      children: text ? text : /* @__PURE__ */ jsx(Slot, {})
     })
   });
 });
-const column = "_column_1l2bp_7";
-const styles = {
-  "jarkup-body": "_jarkup-body_1l2bp_1",
-  "column-list": "_column-list_1l2bp_7",
-  column
-};
+const styles = ".jarkup-body {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.column-list {\n  box-sizing: content-box;\n  padding-block: 0.25rem;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  gap: 0.25rem;\n  justify-content: space-around;\n  overflow: auto;\n}\n\n.column {\n  box-sizing: border-box;\n  padding: 0.125rem;\n  flex: var(--width-ratio, 1);\n}\n.column > * + * {\n  margin-block-start: 2em;\n}";
 const convertInlineComponentsToPlainText = (inlineComponents) => {
   return inlineComponents.map((component) => {
     if (component.type === "Text") {
@@ -1615,6 +1489,7 @@ const convertInlineComponentsToPlainText = (inlineComponents) => {
   }).join("");
 };
 const ElmJarkup = component$((props) => {
+  useStylesScoped$(styles);
   const render = (jsonComponents) => {
     return jsonComponents.map((component, index) => {
       const key = component.id || index;
@@ -1741,12 +1616,12 @@ const ElmJarkup = component$((props) => {
           }, key);
         case "ColumnList":
           return /* @__PURE__ */ jsx("div", {
-            class: styles["column-list"],
+            class: "column-list",
             children: render(component.slots.default)
           }, key);
         case "Column":
           return /* @__PURE__ */ jsx("div", {
-            class: styles.column,
+            class: "column",
             style: {
               "--width-ratio": component.props?.widthRatio || 1,
               width: component.props?.widthRatio ? `${component.props.widthRatio * 100}%` : void 0
@@ -1768,7 +1643,7 @@ const ElmJarkup = component$((props) => {
     });
   };
   return /* @__PURE__ */ jsx("div", {
-    class: styles["jarkup-body"],
+    class: "jarkup-body",
     children: render(props.jsonComponents)
   });
 });