@elmethis/qwik 0.0.13 → 0.0.14

package/lib/index.qwik.mjs

@@ -1,9 +1,19 @@
 import { jsx, jsxs, Fragment } from "@builder.io/qwik/jsx-runtime";
-import { component$, useStylesScoped$, Slot, useStyles$, useSignal, useTask$, $, useComputed$, useVisibleTask$, useContextProvider, createContextId, useContext } from "@builder.io/qwik";
+import { component$, Slot, useSignal, useTask$, $, useComputed$, useVisibleTask$, useContextProvider, createContextId, useContext } from "@builder.io/qwik";
 import { mdiCodeTags, mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiMessageImageOutline, mdiFile, mdiDownload, mdiLinkVariant, mdiHome, mdiApplicationOutline, mdiFolderOpen, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
 import { renderToString } from "katex";
 import { kebabCase } from "lodash-es";
-const styles$q = '.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  font-size: 1rem;\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  overflow-x: auto;\n  scrollbar-width: thin;\n}';
+const caption$1 = "_caption_1j0ec_27";
+const divider = "_divider_1j0ec_50";
+const code$2 = "_code_1j0ec_1";
+const styles$r = {
+  "code-block": "_code-block_1j0ec_1",
+  "language-icon": "_language-icon_1j0ec_22",
+  caption: caption$1,
+  "copy-icon": "_copy-icon_1j0ec_34",
+  divider,
+  code: code$2
+};
 const Rust = component$(({ size = 24, ...props }) => {
   return /* @__PURE__ */ jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -55,9 +65,11 @@ const Typescript = component$(({ size = 24, ...props }) => {
     ]
   });
 });
-const styles$p = ".path {\n  fill: #293138;\n}\n[data-theme=dark] .path {\n  fill: #d2dbe3;\n}";
+const path = "_path_1ccs2_1";
+const styles$q = {
+  path
+};
 const Bash = component$(({ size = 24, ...props }) => {
-  useStylesScoped$(styles$p);
   return /* @__PURE__ */ jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 128 128",
@@ -70,7 +82,7 @@ const Bash = component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsx("path", {
-        class: "path",
+        class: styles$q.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", {
@@ -510,11 +522,13 @@ const C = component$(({ size = 24, ...props }) => {
     ]
   });
 });
-const styles$o = ".icon {\n  fill: var(--color, #555b67);\n  transition: fill 200ms;\n}\n[data-theme=dark] .icon {\n  fill: var(--dark-color, #b0b5be);\n}";
+const icon$2 = "_icon_1gvln_1";
+const styles$p = {
+  icon: icon$2
+};
 const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
-  useStylesScoped$(styles$o);
   return /* @__PURE__ */ jsx("svg", {
-    class: "icon",
+    class: styles$p.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -619,30 +633,42 @@ const ElmLanguageIcon = component$(({ size = 24, language }) => {
     size
   });
 });
-const styles$n = '.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$m = ".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 text$3 = "_text_1gswr_1";
+const code$1 = "_code_1gswr_12";
+const kbd = "_kbd_1gswr_21";
+const link$1 = "_link_1gswr_47";
+const styles$o = {
+  text: text$3,
+  code: code$1,
+  kbd,
+  link: link$1
+};
+const text$2 = "_text_zryur_1";
+const textStyles = {
+  text: text$2
+};
+const icon$1 = "_icon_19g82_1";
+const styles$n = {
+  icon: icon$1
+};
 const ElmInlineIcon = component$(({ src, alt }) => {
-  useStylesScoped$(styles$m);
   return /* @__PURE__ */ jsx("span", {
-    class: "icon",
+    class: styles$n.icon,
     children: /* @__PURE__ */ jsx("img", {
       src,
       alt,
-      class: "icon"
+      class: styles$n.icon
     })
   });
 });
 const ElmInlineText = component$((props) => {
-  useStylesScoped$(styles$n);
-  useStylesScoped$(textStyles);
-  const { bold = false, italic = false, underline = false, strikethrough = false, code = false, size = "1em" } = props;
+  const { bold = false, italic = false, underline = false, strikethrough = false, code: code2 = 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: "kbd",
+      class: styles$o.kbd,
       children: vnode
     });
   }
@@ -666,15 +692,15 @@ const ElmInlineText = component$((props) => {
       children: vnode
     });
   }
-  if (code) {
+  if (code2) {
     vnode = /* @__PURE__ */ jsx("code", {
-      class: "code",
+      class: styles$o.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxs("ruby", {
-      class: "text",
+      class: styles$o.text,
       children: [
         /* @__PURE__ */ jsx("span", {
           children: vnode
@@ -687,8 +713,8 @@ const ElmInlineText = component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsx("span", {
     class: [
-      "text",
-      "text"
+      styles$o.text,
+      textStyles.text
     ],
     style: {
       "--color": props.color,
@@ -699,7 +725,7 @@ const ElmInlineText = component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxs("a", {
-      class: "link",
+      class: styles$o.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -716,17 +742,14 @@ const ElmInlineText = component$((props) => {
   }
   return wrappedVnode;
 });
-const styles$l = '.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$l);
-  useStylesScoped$(`
-    .code {
-      font-size: 1rem;
-      line-height: 1.5rem;
-    }`);
+const code = "_code_1sw1e_1";
+const styles$m = {
+  code
+};
+const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
   const rawHtml = useSignal("");
   useTask$(async ({ track }) => {
-    const currentCode = track(() => code);
+    const currentCode = track(() => code2);
     const currentLang = track(() => language);
     const { getHighlighterSingleton } = await import("./shikiInstance-igs7t2fe.js");
     const highlighter = await getHighlighterSingleton();
@@ -747,12 +770,11 @@ const ElmShikiHighlighter = component$(({ code, language = "txt" }) => {
     }
   });
   return /* @__PURE__ */ jsx("pre", {
-    class: "code",
+    class: styles$m.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
-const ElmCodeBlock = component$(({ code, language = "txt", caption, margin }) => {
-  useStylesScoped$(styles$q);
+const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: caption2, margin }) => {
   const timerId = useSignal(null);
   const copyToClipboard = $(async () => {
     if (timerId.value !== null) {
@@ -760,35 +782,35 @@ const ElmCodeBlock = component$(({ code, language = "txt", caption, margin }) =>
       timerId.value = null;
     }
     try {
-      await navigator.clipboard.writeText(code);
+      await navigator.clipboard.writeText(code2);
       timerId.value = window.setTimeout(() => timerId.value = null, 1500);
     } catch (err) {
       console.error("Failed to copy: ", err);
     }
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: "code-block",
+    class: styles$r["code-block"],
     style: {
       margin
     },
     children: [
       /* @__PURE__ */ jsx("span", {
-        class: "language-icon",
+        class: styles$r["language-icon"],
         children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsx("span", {
-        class: "caption",
+        class: styles$r.caption,
         children: /* @__PURE__ */ jsxs(ElmInlineText, {
           children: [
-            caption || language,
+            caption2 || language,
             /* @__PURE__ */ jsx(Slot, {})
           ]
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: "copy-icon",
+        class: styles$r["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -797,12 +819,12 @@ const ElmCodeBlock = component$(({ code, language = "txt", caption, margin }) =>
         })
       }),
       /* @__PURE__ */ jsx("hr", {
-        class: "divider"
+        class: styles$r.divider
       }),
       /* @__PURE__ */ jsx("div", {
-        class: "code",
+        class: styles$r.code,
         children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
-          code,
+          code: code2,
           language
         })
       })
@@ -810,32 +832,34 @@ const ElmCodeBlock = component$(({ code, language = "txt", caption, margin }) =>
   });
 });
 const ElmKatex = component$(({ expression, block = false }) => {
-  useStylesScoped$(textStyles);
   const html = useComputed$(() => renderToString(expression, {
     displayMode: block,
     output: "mathml"
   }));
   return /* @__PURE__ */ jsx("div", {
-    class: "text",
-    dangerouslySetInnerHTML: html.value
+    class: textStyles.text,
+    dangerouslySetInnerHTML: html.value ?? ""
   });
 });
-const styles$k = ".parallax-watcher {\n  display: none;\n  z-index: -1;\n  position: fixed;\n}\n\n.parallax {\n  position: fixed;\n  height: 2000vh;\n  width: 100%;\n  top: 0;\n  left: 0;\n  z-index: -1;\n  background-repeat: repeat;\n  background-size: auto;\n  opacity: 0.2;\n}\n[data-theme=dark] .parallax {\n  opacity: 0.1;\n}";
+const parallax = "_parallax_1kb0k_1";
+const styles$l = {
+  "parallax-watcher": "_parallax-watcher_1kb0k_1",
+  parallax
+};
 const ElmParallax = component$(({ images }) => {
-  useStylesScoped$(styles$k);
   const y = useSignal(0);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: "parallax-watcher",
+        class: styles$l["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
-      images.map((image, index) => /* @__PURE__ */ jsx("div", {
-        class: "parallax",
+      images.map((image2, index) => /* @__PURE__ */ jsx("div", {
+        class: styles$l.parallax,
         style: {
-          backgroundImage: `url(${image})`,
+          backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
           transformOrigin: "bottom"
         }
@@ -843,38 +867,61 @@ const ElmParallax = component$(({ images }) => {
     ]
   });
 });
-const styles$j = ".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$j);
+const toggle = "_toggle_1nxqa_1";
+const summary = "_summary_1nxqa_14";
+const content$2 = "_content_1nxqa_60";
+const footer = "_footer_1nxqa_80";
+const styles$k = {
+  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 isOpen = useSignal(false);
-  const toggle = $(() => {
+  const toggle2 = $(() => {
     isOpen.value = !isOpen.value;
   });
   return /* @__PURE__ */ jsxs("div", {
     class: [
-      "toggle",
+      styles$k.toggle,
       {
-        "toggle-open": isOpen.value,
-        "toggle-closed": !isOpen.value
+        [styles$k["toggle-open"]]: isOpen.value,
+        [styles$k["toggle-closed"]]: !isOpen.value
       }
     ],
     children: [
       /* @__PURE__ */ jsxs("div", {
         class: [
-          "summary",
+          styles$k.summary,
           {
-            "summary-open": isOpen.value,
-            "summary-closed": !isOpen.value
+            [styles$k["summary-open"]]: isOpen.value,
+            [styles$k["summary-closed"]]: !isOpen.value
           }
         ],
-        onClick$: toggle,
+        onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
             class: [
-              "chevron-icon",
+              styles$k["chevron-icon"],
               {
-                "chevron-icon-open": isOpen.value,
-                "chevron-icon-closed": !isOpen.value
+                [styles$k["chevron-icon-open"]]: isOpen.value,
+                [styles$k["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -882,17 +929,17 @@ const ElmToggle = component$(({ summary }) => {
             })
           }),
           /* @__PURE__ */ jsx("span", {
-            class: "summary-text",
-            children: summary ? summary : /* @__PURE__ */ jsx(Slot, {
+            class: styles$k["summary-text"],
+            children: summary2 ? summary2 : /* @__PURE__ */ jsx(Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsx("span", {
             class: [
-              "plus-icon",
+              styles$k["plus-icon"],
               {
-                "plus-icon-open": isOpen.value,
-                "plus-icon-closed": !isOpen.value
+                [styles$k["plus-icon-open"]]: isOpen.value,
+                [styles$k["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -905,30 +952,30 @@ const ElmToggle = component$(({ summary }) => {
       }),
       /* @__PURE__ */ jsx("div", {
         class: [
-          "content",
+          styles$k.content,
           {
-            "content-open": isOpen.value,
-            "content-closed": !isOpen.value
+            [styles$k["content-open"]]: isOpen.value,
+            [styles$k["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: "footer",
-        onClick$: toggle,
+        class: styles$k.footer,
+        onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
-            class: "footer-chevron-icon",
+            class: styles$k["footer-chevron-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: "footer-line"
+            class: styles$k["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: "footer-cross-icon",
+            class: styles$k["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
@@ -938,17 +985,17 @@ const ElmToggle = component$(({ summary }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsx("span", {
-            class: "footer-cross-icon",
+            class: styles$k["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: "footer-line"
+            class: styles$k["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: "footer-chevron-icon",
+            class: styles$k["footer-chevron-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
@@ -959,44 +1006,50 @@ const ElmToggle = component$(({ summary }) => {
     ]
   });
 });
-const styles$i = ".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$h = "@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 styles$j = {
+  "block-fallback": "_block-fallback_rt986_1"
+};
+const wrapper$1 = "_wrapper_1yktj_12";
+const dot = "_dot_1yktj_22";
+const styles$i = {
+  wrapper: wrapper$1,
+  dot
+};
 const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
-  useStylesScoped$(styles$h);
   return /* @__PURE__ */ jsxs("div", {
-    class: "wrapper",
+    class: styles$i.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: "dot",
+        class: styles$i.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: "dot",
+        class: styles$i.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: "dot",
+        class: styles$i.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$g = "@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 styles$h = {
+  "rectangle-wave": "_rectangle-wave_hej9g_17"
+};
 const ElmRectangleWave = component$(() => {
-  useStylesScoped$(styles$g);
   return /* @__PURE__ */ jsx("div", {
     "aria-hidden": "true",
-    class: "rectangle-wave"
+    class: styles$h["rectangle-wave"]
   });
 });
 const ElmBlockFallback = component$(({ height = "16rem" }) => {
-  useStylesScoped$(styles$i);
   return /* @__PURE__ */ jsxs("div", {
-    class: "block-fallback",
+    class: styles$j["block-fallback"],
     style: {
       "--height": height
     },
@@ -1006,9 +1059,17 @@ const ElmBlockFallback = component$(({ height = "16rem" }) => {
     ]
   });
 });
-const styles$f = ".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$f);
+const image$1 = "_image_zq5gl_11";
+const fallback = "_fallback_zq5gl_31";
+const styles$g = {
+  "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 isLoading = useSignal(true);
   const isShowModal = useSignal(false);
   const handleImageLoad = $(() => {
@@ -1020,11 +1081,9 @@ const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModa
     }
   });
   const ImageComponent = /* @__PURE__ */ jsx("img", {
-    class: [
-      "image"
-    ],
+    class: styles$g.image,
     src,
-    alt: alt ?? caption ?? "Image",
+    alt: alt ?? caption2 ?? "Image",
     width,
     height,
     onLoad$: handleImageLoad,
@@ -1034,7 +1093,7 @@ const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModa
     }
   });
   const Modal = /* @__PURE__ */ jsx("div", {
-    class: "modal-container",
+    class: styles$g["modal-container"],
     style: {
       pointerEvents: isShowModal.value ? "auto" : "none",
       "--opacity": isShowModal.value ? 1 : 0
@@ -1043,10 +1102,10 @@ const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModa
     children: ImageComponent
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: "block-image",
+    class: styles$g["block-image"],
     children: [
       /* @__PURE__ */ jsxs("div", {
-        class: "image-container",
+        class: styles$g["image-container"],
         style: {
           "--opacity": isLoading.value ? 1 : 0
         },
@@ -1054,13 +1113,13 @@ const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModa
         children: [
           ImageComponent,
           /* @__PURE__ */ jsx("div", {
-            class: "fallback",
+            class: styles$g.fallback,
             children: /* @__PURE__ */ jsx(ElmRectangleWave, {})
           })
         ]
       }),
-      caption && /* @__PURE__ */ jsxs("figcaption", {
-        class: "caption-box",
+      caption2 && /* @__PURE__ */ jsxs("figcaption", {
+        class: styles$g["caption-box"],
         style: {
           "--opacity": isLoading.value ? 0 : 1
         },
@@ -1077,7 +1136,7 @@ const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModa
           }),
           /* @__PURE__ */ jsx(ElmInlineText, {
             size: "1rem",
-            children: caption
+            children: caption2
           })
         ]
       }),
@@ -1085,32 +1144,36 @@ const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModa
     ]
   });
 });
-const styles$e = ".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}";
+const file = "_file_14a0w_1";
+const styles$f = {
+  file,
+  "file-size": "_file-size_14a0w_16",
+  "download-icon": "_download-icon_14a0w_21"
+};
 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$e);
   const downloadFile = $(async () => {
-    let link;
+    let link2;
     try {
       const response = await fetch(src);
       if (!response.ok) throw new Error("Failed to download file");
       const blob = await response.blob();
-      link = document.createElement("a");
-      link.href = URL.createObjectURL(blob);
-      link.download = name ?? getLastPathSegmentWithoutQueryOrHash(src) ?? "file";
-      link.click();
+      link2 = document.createElement("a");
+      link2.href = URL.createObjectURL(blob);
+      link2.download = name ?? getLastPathSegmentWithoutQueryOrHash(src) ?? "file";
+      link2.click();
     } catch (error) {
       console.error("ERROR:", error);
     } finally {
-      if (link) URL.revokeObjectURL(link.href);
+      if (link2) URL.revokeObjectURL(link2.href);
     }
   });
   return /* @__PURE__ */ jsxs("div", {
-    class: "file",
+    class: styles$f.file,
     children: [
       /* @__PURE__ */ jsx("div", {
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -1124,13 +1187,13 @@ const ElmFile = component$(({ name, src, filesize }) => {
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: "file-size",
+        class: styles$f["file-size"],
         children: /* @__PURE__ */ jsx(ElmInlineText, {
           children: filesize
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: "download-icon",
+        class: styles$f["download-icon"],
         onClick$: downloadFile,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           d: mdiDownload,
@@ -1140,41 +1203,55 @@ const ElmFile = component$(({ name, src, filesize }) => {
     ]
   });
 });
-const styles$d = ".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$d);
+const bookmark = "_bookmark_rgq1s_1";
+const container$1 = "_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$e = {
+  bookmark,
+  container: container$1,
+  image,
+  content: content$1,
+  title,
+  description,
+  link
+};
+const ElmBookmark = component$(({ url, image: image2, title: title2, description: description2, favicon }) => {
   return /* @__PURE__ */ jsx("div", {
-    class: "bookmark",
+    class: styles$e.bookmark,
     children: /* @__PURE__ */ jsxs("a", {
-      class: "container",
+      class: styles$e.container,
       href: url,
       target: "_blank",
       rel: "noopener noreferrer",
       children: [
         /* @__PURE__ */ jsx("img", {
-          class: "image",
-          src: image,
+          class: styles$e.image,
+          src: image2,
           alt: "OGP Image"
         }),
         /* @__PURE__ */ jsxs("div", {
-          class: "content",
+          class: styles$e.content,
           children: [
             /* @__PURE__ */ jsx("div", {
-              class: "title",
+              class: styles$e.title,
               children: /* @__PURE__ */ jsx(ElmInlineText, {
                 bold: true,
-                children: title
+                children: title2
               })
             }),
             /* @__PURE__ */ jsx("div", {
-              class: "description",
+              class: styles$e.description,
               children: /* @__PURE__ */ jsx(ElmInlineText, {
                 size: "0.75rem",
-                children: description
+                children: description2
               })
             }),
             /* @__PURE__ */ jsxs("div", {
-              class: "link",
+              class: styles$e.link,
               children: [
                 favicon ? /* @__PURE__ */ jsx(ElmInlineIcon, {
                   src: favicon
@@ -1194,19 +1271,24 @@ const ElmBookmark = component$(({ url, image, title, description, favicon }) =>
     })
   });
 });
-const styles$c = ".container {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0;\n  user-select: none;\n}\n\n.link-container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0;\n  box-sizing: border-box;\n  padding: 0.25rem;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  transition: background-color 100ms, opacity 100ms, transform 100ms;\n}\n.link-container:hover {\n  background-color: rgba(134, 142, 156, 0.2);\n  transform: translateX(-1px) translateY(-1px);\n}\n.link-container:active {\n  opacity: 0.5;\n  transform: translateX(1px) translateY(1px);\n}\n\n.text {\n  opacity: var(--opacity);\n  transition: opacity 200ms;\n  transition-delay: var(--delay);\n  padding: 0 0.25rem;\n}";
+const container = "_container_xsa12_1";
+const text$1 = "_text_xsa12_30";
+const styles$d = {
+  container,
+  "link-container": "_link-container_xsa12_10",
+  text: text$1
+};
 const ElmBreadcrumb = component$(({ links }) => {
-  useStylesScoped$(styles$c);
   return /* @__PURE__ */ jsx("nav", {
-    class: "container",
-    children: links.map((link, index) => /* @__PURE__ */ jsxs(Fragment, {
+    class: styles$d.container,
+    children: links.map((link2, index) => /* @__PURE__ */ jsxs(Fragment, {
       children: [
         /* @__PURE__ */ jsxs("span", {
-          class: "link-container",
-          onClick$: link.onClick$,
+          class: styles$d["link-container"],
+          onClick$: link2.onClick$,
           children: [
             /* @__PURE__ */ jsx("span", {
-              class: "icon",
+              class: styles$d.icon,
               style: {
                 "--delay": `${index * 100}ms`
               },
@@ -1216,18 +1298,18 @@ const ElmBreadcrumb = component$(({ links }) => {
               })
             }),
             /* @__PURE__ */ jsx("span", {
-              class: "text",
+              class: styles$d.text,
               style: {
                 "--delay": `${index * 100 + 50}ms`
               },
               children: /* @__PURE__ */ jsx(ElmInlineText, {
-                children: link.text
+                children: link2.text
               })
             })
           ]
         }),
         links.length !== index + 1 && /* @__PURE__ */ jsx("span", {
-          class: "text",
+          class: styles$d.text,
           style: {
             "--delay": `${index * 100 + 100}ms`
           },
@@ -1241,9 +1323,16 @@ const ElmBreadcrumb = component$(({ links }) => {
     }))
   });
 });
-const styles$b = '.wrapper {\n  --const-margin: 1rem;\n  z-index: 50;\n  -webkit-tap-highlight-color: transparent;\n  display: block;\n  position: fixed;\n  bottom: 0;\n  margin: var(--const-margin) 0.5rem;\n  width: var(--size);\n  height: var(--size);\n  left: var(--left, auto);\n  right: var(---right, auto);\n  opacity: 1;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition: transform 700ms, opacity 400ms;\n  transform-origin: 50% 50%;\n  transform: translateY(250%) rotate(180deg);\n}\n.wrapper--visible {\n  transition: transform 700ms, opacity 200ms;\n  transform: translateY(0%) rotate(0deg);\n}\n.wrapper:hover {\n  opacity: 0.8;\n}\n.wrapper:active {\n  opacity: 0.4;\n}\n@keyframes move {\n  0% {\n    opacity: 0;\n    transform: translateY(600%);\n  }\n  25% {\n    opacity: 1;\n    transform: translateY(220%);\n  }\n  42% {\n    opacity: 1;\n    transform: translateY(200%);\n  }\n  67% {\n    opacity: 1;\n    transform: translateY(0%);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-50%) scale(0.5);\n  }\n}\n.wrapper .partial {\n  position: absolute;\n  width: var(--size);\n  height: 20px;\n  opacity: 0;\n  transform: scale3d(0.5, 0.5, 0.5);\n  animation: move 3000ms ease-out infinite;\n}\n.wrapper .partial:nth-of-type(1) {\n  animation: move 3000ms ease-out 1000ms infinite;\n}\n.wrapper .partial:nth-of-type(2) {\n  animation: move 3000ms ease-out 2000ms infinite;\n}\n.wrapper .partial:before, .wrapper .partial:after {\n  content: "";\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 50%;\n  background-color: #494f59;\n}\n[data-theme=dark] .wrapper .partial:before, [data-theme=dark] .wrapper .partial:after {\n  background-color: #bec2ca;\n}\n.wrapper .partial:before {\n  left: 0;\n  transform: skew(0deg, -30deg);\n}\n.wrapper .partial:after {\n  right: 0;\n  transform: skew(0deg, 30deg);\n}\n.wrapper .text {\n  transition: opacity 200ms ease 400ms;\n  width: 100%;\n  text-align: center;\n  font-family: sans-serif;\n  position: absolute;\n  z-index: 50;\n  bottom: calc(0px - var(--const-margin));\n  font-size: 12px;\n  white-space: nowrap;\n  user-select: none;\n  color: var(--color, #606875);\n}\n.wrapper .text::selection {\n  color: #cccfd5;\n  background-color: var(--color, #3e434b);\n}\n[data-theme=dark] .wrapper .text {\n  color: var(--color, #b0b5be);\n}\n[data-theme=dark] .wrapper .text::selection {\n  color: #3e434b;\n  background-color: var(--color, #cccfd5);\n}';
+const wrapper = "_wrapper_nud26_1";
+const partial = "_partial_nud26_52";
+const text = "_text_nud26_85";
+const styles$c = {
+  wrapper,
+  "wrapper--visible": "_wrapper--visible_nud26_20",
+  partial,
+  text
+};
 const ElmPageTop = component$(({ position = "right" }) => {
-  useStylesScoped$(styles$b);
   const isVisible = useSignal(false);
   useVisibleTask$(({ cleanup }) => {
     const checkScroll = () => {
@@ -1262,7 +1351,12 @@ const ElmPageTop = component$(({ position = "right" }) => {
     });
   });
   return /* @__PURE__ */ jsxs("nav", {
-    class: `wrapper ${isVisible.value ? "wrapper--visible" : ""}`,
+    class: [
+      styles$c.wrapper,
+      {
+        [styles$c["wrapper--visible"]]: isVisible.value
+      }
+    ],
     style: {
       "--size": `${64}px`,
       left: position === "left" ? "0" : "auto",
@@ -1272,36 +1366,41 @@ const ElmPageTop = component$(({ position = "right" }) => {
     children: [
       /* @__PURE__ */ jsx("div", {
         "aria-hidden": "true",
-        class: "partial"
+        class: styles$c.partial
       }),
       /* @__PURE__ */ jsx("div", {
         "aria-hidden": "true",
-        class: "partial"
+        class: styles$c.partial
       }),
       /* @__PURE__ */ jsx("div", {
         "aria-hidden": "true",
-        class: "partial"
+        class: styles$c.partial
       }),
       /* @__PURE__ */ jsx("span", {
-        class: "text",
+        class: styles$c.text,
         children: "Back to Top"
       })
     ]
   });
 });
-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 blockquote = "_blockquote_b5jd8_1";
+const body = "_body_b5jd8_18";
+const icon = "_icon_b5jd8_23";
+const styles$b = {
+  blockquote,
+  body,
+  icon
+};
 const ElmBlockQuote = component$(({ cite }) => {
-  useStylesScoped$(styles$a);
-  useStylesScoped$(textStyles);
   return /* @__PURE__ */ jsxs("blockquote", {
     class: [
-      "blockquote",
-      "text"
+      styles$b.blockquote,
+      textStyles.text
     ],
     cite,
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: "icon",
+        class: styles$b.icon,
         style: {
           "--inset": "0.25rem auto auto 0.5rem"
         },
@@ -1310,11 +1409,11 @@ const ElmBlockQuote = component$(({ cite }) => {
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: "body",
+        class: styles$b.body,
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsx("div", {
-        class: "icon",
+        class: styles$b.icon,
         style: {
           "--inset": "auto 0.25rem 0.25rem auto"
         },
@@ -1325,7 +1424,14 @@ const ElmBlockQuote = component$(({ cite }) => {
     ]
   });
 });
-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 callout = "_callout_1d8l2_1";
+const header = "_header_1d8l2_25";
+const content = "_content_1d8l2_31";
+const styles$a = {
+  callout,
+  header,
+  content
+};
 const COLOR_MAP = Object.freeze({
   note: {
     code: "#6987b8",
@@ -1349,15 +1455,14 @@ const COLOR_MAP = Object.freeze({
   }
 });
 const ElmCallout = component$(({ type = "note" }) => {
-  useStylesScoped$(styles$9);
   return /* @__PURE__ */ jsxs("aside", {
-    class: "callout",
+    class: styles$a.callout,
     style: {
       "--callout-color": COLOR_MAP[type].code
     },
     children: [
       /* @__PURE__ */ jsxs("div", {
-        class: "header",
+        class: styles$a.header,
         children: [
           /* @__PURE__ */ jsx(ElmMdiIcon, {
             d: COLOR_MAP[type].icon,
@@ -1370,25 +1475,29 @@ const ElmCallout = component$(({ type = "note" }) => {
         ]
       }),
       /* @__PURE__ */ jsx("div", {
-        class: "content",
+        class: styles$a.content,
         children: /* @__PURE__ */ jsx(Slot, {})
       })
     ]
   });
 });
-const styles$8 = ".hr {\n  margin: 0;\n  width: 100%;\n  border: none;\n  border-bottom: dashed 1px #868e9c;\n}";
+const hr = "_hr_1g58p_1";
+const styles$9 = {
+  hr
+};
 const ElmDivider = component$(({ margin }) => {
-  useStylesScoped$(styles$8);
   return /* @__PURE__ */ jsx("hr", {
-    class: "hr",
+    class: styles$9.hr,
     style: {
       marginBlock: margin
     }
   });
 });
-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 fragment = "_fragment_1kofp_1";
+const styles$8 = {
+  fragment
+};
 const ElmFragmentIdentifier = component$(({ id }) => {
-  useStylesScoped$(styles$7);
   const handleHashClick = $((id2) => {
     const url = new URL(window.location.href);
     url.hash = id2;
@@ -1401,12 +1510,28 @@ const ElmFragmentIdentifier = component$(({ id }) => {
     }
   });
   return /* @__PURE__ */ jsx("span", {
-    class: "fragment",
+    class: styles$8.fragment,
     onClick$: () => handleHashClick(id),
     children: "#"
   });
 });
-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::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.h2__underline {\n  overflow: hidden;\n  position: absolute;\n  content: "";\n  bottom: -6px;\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  transform-origin: left;\n}\n[data-theme=dark] .h2__underline {\n  background-color: rgba(255, 255, 255, 0.5);\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 h1 = "_h1_16jof_10";
+const h2 = "_h2_16jof_40";
+const h2__underline = "_h2__underline_16jof_68";
+const h3 = "_h3_16jof_85";
+const h4 = "_h4_16jof_102";
+const h5 = "_h5_16jof_106";
+const h6 = "_h6_16jof_110";
+const styles$7 = {
+  "heading-common": "_heading-common_16jof_1",
+  h1,
+  h2,
+  h2__underline,
+  h3,
+  h4,
+  h5,
+  h6
+};
 const SIZE_MAP = Object.freeze({
   1: 1.5,
   2: 1.4,
@@ -1415,22 +1540,20 @@ const SIZE_MAP = Object.freeze({
   5: 1.15,
   6: 1.1
 });
-const ElmHeading = component$(({ level, text, id }) => {
-  useStylesScoped$(styles$6);
-  useStylesScoped$(textStyles);
+const ElmHeading = component$(({ level, text: text2, id }) => {
   const Tag = `h${level}`;
   return /* @__PURE__ */ jsxs(Tag, {
     class: [
-      "heading-common",
-      "text",
-      `h${level}`
+      styles$7["heading-common"],
+      textStyles.text,
+      styles$7[`h${level}`]
     ],
     style: {
       "--font-size": `${SIZE_MAP[level]}em`
     },
     children: [
       /* @__PURE__ */ jsx("span", {
-        children: text
+        children: text2
       }),
       /* @__PURE__ */ jsx(Slot, {}),
       id && /* @__PURE__ */ jsx("span", {
@@ -1442,37 +1565,42 @@ const ElmHeading = component$(({ level, text, id }) => {
         })
       }),
       level === 2 && /* @__PURE__ */ jsx("span", {
-        class: "h2__underline",
+        class: styles$7["h2__underline"],
         "aria-hidden": "true"
       })
     ]
   });
 });
-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 styles$6 = {
+  "elmethis-list-common": "_elmethis-list-common_14epx_1",
+  "elmethis-bulleted-list": "_elmethis-bulleted-list_14epx_9",
+  "elmethis-numbered-list": "_elmethis-numbered-list_14epx_24"
+};
 const ElmList = component$(({ listStyle = "unordered" }) => {
-  useStyles$(listStyles);
-  useStylesScoped$(textStyles);
   if (listStyle === "ordered") {
     return /* @__PURE__ */ jsx("ol", {
       class: [
-        "text",
-        "elmethis-list-common",
-        "elmethis-numbered-list"
+        textStyles.text,
+        styles$6["elmethis-list-common"],
+        styles$6["elmethis-numbered-list"]
       ],
       children: /* @__PURE__ */ jsx(Slot, {})
     });
   } else {
     return /* @__PURE__ */ jsx("ul", {
       class: [
-        "text",
-        "elmethis-list-common",
-        "elmethis-bulleted-list"
+        textStyles.text,
+        styles$6["elmethis-list-common"],
+        styles$6["elmethis-bulleted-list"]
       ],
       children: /* @__PURE__ */ jsx(Slot, {})
     });
   }
 });
-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 paragraph = "_paragraph_jz10s_1";
+const styles$5 = {
+  paragraph
+};
 const useInView = (props) => {
   const ref = useSignal();
   const isVisible = useSignal(false);
@@ -1493,14 +1621,12 @@ const useInView = (props) => {
   };
 };
 const ElmParagraph = component$(({ color, backgroundColor }) => {
-  useStylesScoped$(styles$5);
-  useStylesScoped$(textStyles);
   const { ref, isVisible } = useInView();
   return /* @__PURE__ */ jsx("p", {
     ref,
     class: [
-      "paragraph",
-      "text"
+      styles$5.paragraph,
+      textStyles.text
     ],
     style: {
       "--color": color,
@@ -1510,32 +1636,38 @@ const ElmParagraph = component$(({ color, backgroundColor }) => {
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
-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 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 HasRowHeaderContext = createContextId("HasRowHeaderContext");
 const ElmTable = component$((props) => {
-  useStylesScoped$(styles$4);
-  useStylesScoped$(textStyles);
-  const { margin, caption, hasRowHeader = false } = props;
+  const { margin, caption: caption2, hasRowHeader = false } = props;
   const hasRowHeaderComputed = useComputed$(() => hasRowHeader);
   useContextProvider(HasRowHeaderContext, hasRowHeaderComputed);
   return /* @__PURE__ */ jsxs("table", {
     class: [
-      "table",
-      "text"
+      styles$4.table,
+      textStyles.text
     ],
     style: {
       "--margin-block": margin
     },
     children: [
-      caption && /* @__PURE__ */ jsx("caption", {
+      caption2 && /* @__PURE__ */ jsx("caption", {
         children: /* @__PURE__ */ jsxs("span", {
-          class: "caption",
+          class: styles$4.caption,
           children: [
             /* @__PURE__ */ jsx("span", {
-              class: "spacing"
+              class: styles$4.spacing
             }),
             /* @__PURE__ */ jsxs("span", {
-              class: "caption-inner",
+              class: styles$4["caption-inner"],
               children: [
                 /* @__PURE__ */ jsx("svg", {
                   viewBox: "0 0 24 24",
@@ -1547,12 +1679,12 @@ const ElmTable = component$((props) => {
                   })
                 }),
                 /* @__PURE__ */ jsx(ElmInlineText, {
-                  text: caption
+                  text: caption2
                 })
               ]
             }),
             /* @__PURE__ */ jsx("span", {
-              class: "spacing"
+              class: styles$4.spacing
             })
           ]
         })
@@ -1561,13 +1693,15 @@ const ElmTable = component$((props) => {
     ]
   });
 });
-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 thead = "_thead_1brzu_1";
+const styles$3 = {
+  thead
+};
 const HasHeaderContext = createContextId("HasHeaderContext");
 const ElmTableHeader = component$(() => {
-  useStylesScoped$(styles$3);
   useContextProvider(HasHeaderContext, true);
   return /* @__PURE__ */ jsx("thead", {
-    class: "thead",
+    class: styles$3.thead,
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
@@ -1577,41 +1711,55 @@ const ElmTableBody = component$(() => {
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
-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 tr = "_tr_2ogbz_1";
+const styles$2 = {
+  tr,
+  "has-row-header": "_has-row-header_2ogbz_20"
+};
 const ElmTableRow = component$(() => {
-  useStylesScoped$(styles$2);
   const hasRowHeader = useContext(HasRowHeaderContext);
   return /* @__PURE__ */ jsx("tr", {
     class: [
-      "tr",
-      hasRowHeader.value && "has-row-header"
+      styles$2.tr,
+      hasRowHeader.value && styles$2["has-row-header"]
     ],
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
-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 common = "_common_1puhv_1";
+const td = "_td_1puhv_24";
+const th = "_th_1puhv_31";
+const styles$1 = {
+  common,
+  td,
+  th
+};
 const ElmTableCell = component$((props) => {
-  useStylesScoped$(styles$1);
-  const { hasHeader = false, text } = props;
+  const { hasHeader = false, text: text2 } = props;
   const hasHeaderInjected = useContext(HasHeaderContext, false);
   const isHeader = hasHeader || hasHeaderInjected;
   return /* @__PURE__ */ jsx(Fragment, {
     children: isHeader ? /* @__PURE__ */ jsx("th", {
       class: [
-        "common",
-        "th"
+        styles$1.common,
+        styles$1.th
       ],
-      children: text ? text : /* @__PURE__ */ jsx(Slot, {})
+      children: text2 ? text2 : /* @__PURE__ */ jsx(Slot, {})
     }) : /* @__PURE__ */ jsx("td", {
       class: [
-        "common",
-        "td"
+        styles$1.common,
+        styles$1.td
       ],
-      children: text ? text : /* @__PURE__ */ jsx(Slot, {})
+      children: text2 ? text2 : /* @__PURE__ */ jsx(Slot, {})
     })
   });
 });
-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 column = "_column_1l2bp_7";
+const styles = {
+  "jarkup-body": "_jarkup-body_1l2bp_1",
+  "column-list": "_column-list_1l2bp_7",
+  column
+};
 const convertInlineComponentsToPlainText = (inlineComponents) => {
   return inlineComponents.map((component) => {
     if (component.type === "Text") {
@@ -1622,7 +1770,6 @@ const convertInlineComponentsToPlainText = (inlineComponents) => {
   }).join("");
 };
 const ElmJarkup = component$((props) => {
-  useStylesScoped$(styles);
   const render = (jsonComponents) => {
     return jsonComponents.map((component, index) => {
       const key = component.id || index;
@@ -1749,12 +1896,12 @@ const ElmJarkup = component$((props) => {
           }, key);
         case "ColumnList":
           return /* @__PURE__ */ jsx("div", {
-            class: "column-list",
+            class: styles["column-list"],
             children: render(component.slots.default)
           }, key);
         case "Column":
           return /* @__PURE__ */ jsx("div", {
-            class: "column",
+            class: styles.column,
             style: {
               "--width-ratio": component.props?.widthRatio || 1,
               width: component.props?.widthRatio ? `${component.props.widthRatio * 100}%` : void 0
@@ -1776,7 +1923,7 @@ const ElmJarkup = component$((props) => {
     });
   };
   return /* @__PURE__ */ jsx("div", {
-    class: "jarkup-body",
+    class: styles["jarkup-body"],
     children: render(props.jsonComponents)
   });
 });