Upload folder using huggingface_hub

README.md

@@ -38,12 +38,14 @@ with gr.Blocks() as demo:
         {
             "class": "DNA",
             "sequence": "ATGCGT",
-            "chain": "A"
+            "chain": "A",
+            "msa": True
         },
         {
             "class": "protein",
             "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-            "chain": "B"
+            "chain": "B",
+            "msa": True
         },
         {
             "class": "ligand",

app.py

@@ -17,12 +17,14 @@ with gr.Blocks() as demo:
         {
             "class": "DNA",
             "sequence": "ATGCGT",
-            "chain": "A"
+            "chain": "A",
+            "msa": True
         },
         {
             "class": "protein",
             "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-            "chain": "B"
+            "chain": "B",
+            "msa": True
         },
         {
             "class": "ligand",

space.py

@@ -57,12 +57,14 @@ with gr.Blocks() as demo:
         {
             "class": "DNA",
             "sequence": "ATGCGT",
-            "chain": "A"
+            "chain": "A",
+            "msa": True
         },
         {
             "class": "protein",
             "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-            "chain": "B"
+            "chain": "B",
+            "msa": True
         },
         {
             "class": "ligand",

src/README.md

@@ -38,12 +38,14 @@ with gr.Blocks() as demo:
         {
             "class": "DNA",
             "sequence": "ATGCGT",
-            "chain": "A"
+            "chain": "A",
+            "msa": True
         },
         {
             "class": "protein",
             "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-            "chain": "B"
+            "chain": "B",
+            "msa": True
         },
         {
             "class": "ligand",

src/backend/gradio_cofoldinginput/cofoldinginput.py

@@ -91,7 +91,15 @@ class CofoldingInput(FormComponent):
         Returns:
             returns list
         """
-        return None if payload is None else dict(payload)
+        if payload is None:
+            return None
+        # process payload and remove open key from each item in chains
+        for chain in payload["chains"]:
+            if "open" in chain:
+                del chain["open"]
+        payload = dict(payload)
+        return payload
+
 
     def postprocess(self, value: dict | None) -> dict | None:
         """

src/backend/gradio_cofoldinginput/templates/example/index.js

@@ -1,17 +1,17 @@
 const {
-  SvelteComponent: P,
-  add_iframe_resize_listener: W,
-  add_render_callback: j,
+  SvelteComponent: j,
+  add_iframe_resize_listener: P,
+  add_render_callback: W,
   append_hydration: d,
   attr: A,
   binding_callbacks: F,
   children: E,
-  claim_element: g,
+  claim_element: k,
   claim_space: D,
   claim_text: b,
   destroy_each: G,
   detach: u,
-  element: k,
+  element: g,
   empty: z,
   ensure_array_like: V,
   get_svelte_dataset: J,
@@ -33,64 +33,64 @@ function C(a) {
     /*value*/
     a[0].covMods.length + ""
   ), f, c;
-  function _(r, L) {
+  function o(_, y) {
     return (
       /*value*/
-      r[0].chains.length > 1 ? Y : X
+      _[0].chains.length > 1 ? Y : X
     );
   }
-  let y = _(a), o = y(a), I = V(
+  let L = o(a), r = L(a), I = V(
     /*value*/
     a[0].chains
   ), v = [];
-  for (let r = 0; r < I.length; r += 1)
-    v[r] = U(q(a, I, r));
+  for (let _ = 0; _ < I.length; _ += 1)
+    v[_] = U(q(a, I, _));
   return {
     c() {
-      o.c(), e = S(), n = k("ul");
-      for (let r = 0; r < v.length; r += 1)
-        v[r].c();
-      i = S(), l = k("ul"), t = k("li"), f = p(s), c = p(" covalent modifications");
-    },
-    l(r) {
-      o.l(r), e = D(r), n = g(r, "UL", {});
-      var L = E(n);
+      r.c(), e = S(), n = g("ul");
+      for (let _ = 0; _ < v.length; _ += 1)
+        v[_].c();
+      i = S(), l = g("ul"), t = g("li"), f = p(s), c = p(" covalent modifications");
+    },
+    l(_) {
+      r.l(_), e = D(_), n = k(_, "UL", {});
+      var y = E(n);
       for (let B = 0; B < v.length; B += 1)
-        v[B].l(L);
-      L.forEach(u), i = D(r), l = g(r, "UL", {});
+        v[B].l(y);
+      y.forEach(u), i = D(_), l = k(_, "UL", {});
       var h = E(l);
-      t = g(h, "LI", {});
+      t = k(h, "LI", {});
       var N = E(t);
       f = b(N, s), c = b(N, " covalent modifications"), N.forEach(u), h.forEach(u);
     },
-    m(r, L) {
-      o.m(r, L), m(r, e, L), m(r, n, L);
+    m(_, y) {
+      r.m(_, y), m(_, e, y), m(_, n, y);
       for (let h = 0; h < v.length; h += 1)
         v[h] && v[h].m(n, null);
-      m(r, i, L), m(r, l, L), d(l, t), d(t, f), d(t, c);
+      m(_, i, y), m(_, l, y), d(l, t), d(t, f), d(t, c);
     },
-    p(r, L) {
-      if (y === (y = _(r)) && o ? o.p(r, L) : (o.d(1), o = y(r), o && (o.c(), o.m(e.parentNode, e))), L & /*value, undefined*/
+    p(_, y) {
+      if (L === (L = o(_)) && r ? r.p(_, y) : (r.d(1), r = L(_), r && (r.c(), r.m(e.parentNode, e))), y & /*value, undefined*/
       1) {
         I = V(
           /*value*/
-          r[0].chains
+          _[0].chains
         );
         let h;
         for (h = 0; h < I.length; h += 1) {
-          const N = q(r, I, h);
-          v[h] ? v[h].p(N, L) : (v[h] = U(N), v[h].c(), v[h].m(n, null));
+          const N = q(_, I, h);
+          v[h] ? v[h].p(N, y) : (v[h] = U(N), v[h].c(), v[h].m(n, null));
         }
         for (; h < v.length; h += 1)
           v[h].d(1);
         v.length = I.length;
       }
-      L & /*value*/
+      y & /*value*/
       1 && s !== (s = /*value*/
-      r[0].covMods.length + "") && w(f, s);
+      _[0].covMods.length + "") && w(f, s);
     },
-    d(r) {
-      r && (u(e), u(n), u(i), u(l)), o.d(r), G(v, r);
+    d(_) {
+      _ && (u(e), u(n), u(i), u(l)), r.d(_), G(v, _);
     }
   };
 }
@@ -101,12 +101,12 @@ function X(a) {
   ), l, t, s;
   return {
     c() {
-      e = k("b"), n = p("Input composed of "), l = p(i), t = p(" chain "), s = k("br");
+      e = g("b"), n = p("Input composed of "), l = p(i), t = p(" chain "), s = g("br");
     },
     l(f) {
-      e = g(f, "B", {});
+      e = k(f, "B", {});
       var c = E(e);
-      n = b(c, "Input composed of "), l = b(c, i), t = b(c, " chain "), c.forEach(u), s = g(f, "BR", {});
+      n = b(c, "Input composed of "), l = b(c, i), t = b(c, " chain "), c.forEach(u), s = k(f, "BR", {});
     },
     m(f, c) {
       m(f, e, c), d(e, n), d(e, l), d(e, t), m(f, s, c);
@@ -128,18 +128,18 @@ function Y(a) {
   ), l, t, s, f;
   return {
     c() {
-      e = k("b"), n = p("Input composed of "), l = p(i), t = p(" chains"), s = S(), f = k("br");
+      e = g("b"), n = p("Input composed of "), l = p(i), t = p(" chains"), s = S(), f = g("br");
     },
     l(c) {
-      e = g(c, "B", {});
-      var _ = E(e);
-      n = b(_, "Input composed of "), l = b(_, i), t = b(_, " chains"), _.forEach(u), s = D(c), f = g(c, "BR", {});
+      e = k(c, "B", {});
+      var o = E(e);
+      n = b(o, "Input composed of "), l = b(o, i), t = b(o, " chains"), o.forEach(u), s = D(c), f = k(c, "BR", {});
     },
-    m(c, _) {
-      m(c, e, _), d(e, n), d(e, l), d(e, t), m(c, s, _), m(c, f, _);
+    m(c, o) {
+      m(c, e, o), d(e, n), d(e, l), d(e, t), m(c, s, o), m(c, f, o);
     },
-    p(c, _) {
-      _ & /*value*/
+    p(c, o) {
+      o & /*value*/
       1 && i !== (i = /*value*/
       c[0].chains.length + "") && w(l, i);
     },
@@ -158,30 +158,30 @@ function H(a) {
   ), f, c;
   return {
     c() {
-      e = k("li"), n = k("div"), l = p(i), t = S(), f = p(s), c = p(" residues"), this.h();
+      e = g("li"), n = g("div"), l = p(i), t = S(), f = p(s), c = p(" residues"), this.h();
     },
-    l(_) {
-      e = g(_, "LI", {});
-      var y = E(e);
-      n = g(y, "DIV", { class: !0 });
-      var o = E(n);
-      l = b(o, i), t = D(o), f = b(o, s), c = b(o, " residues"), o.forEach(u), y.forEach(u), this.h();
+    l(o) {
+      e = k(o, "LI", {});
+      var L = E(e);
+      n = k(L, "DIV", { class: !0 });
+      var r = E(n);
+      l = b(r, i), t = D(r), f = b(r, s), c = b(r, " residues"), r.forEach(u), L.forEach(u), this.h();
     },
     h() {
-      A(n, "class", "svelte-1r1gryw");
+      A(n, "class", "svelte-166104d");
     },
-    m(_, y) {
-      m(_, e, y), d(e, n), d(n, l), d(n, t), d(n, f), d(n, c);
+    m(o, L) {
+      m(o, e, L), d(e, n), d(n, l), d(n, t), d(n, f), d(n, c);
     },
-    p(_, y) {
-      y & /*value*/
+    p(o, L) {
+      L & /*value*/
       1 && i !== (i = /*val*/
-      _[8].class + "") && w(l, i), y & /*value*/
+      o[8].class + "") && w(l, i), L & /*value*/
       1 && s !== (s = /*val*/
-      _[8].sequence.length + "") && w(f, s);
+      o[8].sequence.length + "") && w(f, s);
     },
-    d(_) {
-      _ && u(e);
+    d(o) {
+      o && u(e);
     }
   };
 }
@@ -216,13 +216,13 @@ function T(a) {
   };
 }
 function Z(a) {
-  let e, n = '<div class="svelte-1r1gryw">Ligand</div>';
+  let e, n = '<div class="svelte-166104d">Ligand</div>';
   return {
     c() {
-      e = k("li"), e.innerHTML = n;
+      e = g("li"), e.innerHTML = n;
     },
     l(i) {
-      e = g(i, "LI", { "data-svelte-h": !0 }), J(e) !== "svelte-z73xb2" && (e.innerHTML = n);
+      e = k(i, "LI", { "data-svelte-h": !0 }), J(e) !== "svelte-z73xb2" && (e.innerHTML = n);
     },
     m(i, l) {
       m(i, e, l);
@@ -240,17 +240,17 @@ function x(a) {
   ), t, s;
   return {
     c() {
-      e = k("li"), n = k("div"), i = p("Ligand SMILES with "), t = p(l), s = p(" atoms"), this.h();
+      e = g("li"), n = g("div"), i = p("Ligand SMILES with "), t = p(l), s = p(" atoms"), this.h();
     },
     l(f) {
-      e = g(f, "LI", {});
+      e = k(f, "LI", {});
       var c = E(e);
-      n = g(c, "DIV", { class: !0 });
-      var _ = E(n);
-      i = b(_, "Ligand SMILES with "), t = b(_, l), s = b(_, " atoms"), _.forEach(u), c.forEach(u), this.h();
+      n = k(c, "DIV", { class: !0 });
+      var o = E(n);
+      i = b(o, "Ligand SMILES with "), t = b(o, l), s = b(o, " atoms"), o.forEach(u), c.forEach(u), this.h();
     },
     h() {
-      A(n, "class", "svelte-1r1gryw");
+      A(n, "class", "svelte-166104d");
     },
     m(f, c) {
       m(f, e, c), d(e, n), d(n, i), d(n, t), d(n, s);
@@ -272,17 +272,17 @@ function $(a) {
   ), t;
   return {
     c() {
-      e = k("li"), n = k("div"), i = p("Ligand "), t = p(l), this.h();
+      e = g("li"), n = g("div"), i = p("Ligand "), t = p(l), this.h();
     },
     l(s) {
-      e = g(s, "LI", {});
+      e = k(s, "LI", {});
       var f = E(e);
-      n = g(f, "DIV", { class: !0 });
+      n = k(f, "DIV", { class: !0 });
       var c = E(n);
       i = b(c, "Ligand "), t = b(c, l), c.forEach(u), f.forEach(u), this.h();
     },
     h() {
-      A(n, "class", "svelte-1r1gryw");
+      A(n, "class", "svelte-166104d");
     },
     m(s, f) {
       m(s, e, f), d(e, n), d(n, i), d(n, t);
@@ -335,15 +335,15 @@ function ee(a) {
   );
   return {
     c() {
-      e = k("div"), i && i.c(), this.h();
+      e = g("div"), i && i.c(), this.h();
     },
     l(l) {
-      e = g(l, "DIV", { class: !0 });
+      e = k(l, "DIV", { class: !0 });
       var t = E(e);
       i && i.l(t), t.forEach(u), this.h();
     },
     h() {
-      A(e, "class", "svelte-1r1gryw"), j(() => (
+      A(e, "class", "flex items-center justify-center w-full svelte-166104d"), W(() => (
         /*div_elementresize_handler*/
         a[5].call(e)
       )), M(
@@ -364,7 +364,7 @@ function ee(a) {
       );
     },
     m(l, t) {
-      m(l, e, t), i && i.m(e, null), n = W(
+      m(l, e, t), i && i.m(e, null), n = P(
         e,
         /*div_elementresize_handler*/
         a[5].bind(e)
@@ -401,25 +401,25 @@ function ee(a) {
 }
 function le(a, e, n) {
   let { value: i } = e, { type: l } = e, { selected: t = !1 } = e, s, f;
-  function c(o, I) {
-    !o || !I || (f.style.setProperty("--local-text-width", `${I < 150 ? I : 200}px`), n(4, f.style.whiteSpace = "unset", f));
+  function c(r, I) {
+    !r || !I || (f.style.setProperty("--local-text-width", `${I < 150 ? I : 200}px`), n(4, f.style.whiteSpace = "unset", f));
   }
   Q(() => {
     c(f, s);
   });
-  function _() {
+  function o() {
     s = this.clientWidth, n(3, s);
   }
-  function y(o) {
-    F[o ? "unshift" : "push"](() => {
-      f = o, n(4, f);
+  function L(r) {
+    F[r ? "unshift" : "push"](() => {
+      f = r, n(4, f);
     });
   }
-  return a.$$set = (o) => {
-    "value" in o && n(0, i = o.value), "type" in o && n(1, l = o.type), "selected" in o && n(2, t = o.selected);
-  }, [i, l, t, s, f, _, y];
+  return a.$$set = (r) => {
+    "value" in r && n(0, i = r.value), "type" in r && n(1, l = r.type), "selected" in r && n(2, t = r.selected);
+  }, [i, l, t, s, f, o, L];
 }
-class te extends P {
+class te extends j {
   constructor(e) {
     super(), K(this, e, le, ee, O, { value: 0, type: 1, selected: 2 });
   }

src/backend/gradio_cofoldinginput/templates/example/style.css

@@ -1 +1 @@
-.gallery.svelte-1r1gryw{padding:var(--size-1) var(--size-2)}div.svelte-1r1gryw{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}
+/*! tailwindcss v4.0.0-alpha.35 | MIT License | https://tailwindcss.com */@layer theme{:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(.971 .013 17.38);--color-red-100:oklch(.936 .032 17.717);--color-red-200:oklch(.885 .062 18.334);--color-red-300:oklch(.808 .114 19.571);--color-red-400:oklch(.704 .191 22.216);--color-red-500:oklch(.637 .237 25.331);--color-red-600:oklch(.577 .245 27.325);--color-red-700:oklch(.505 .213 27.518);--color-red-800:oklch(.444 .177 26.899);--color-red-900:oklch(.396 .141 25.723);--color-red-950:oklch(.258 .092 26.042);--color-orange-50:oklch(.98 .016 73.684);--color-orange-100:oklch(.954 .038 75.164);--color-orange-200:oklch(.901 .076 70.697);--color-orange-300:oklch(.837 .128 66.29);--color-orange-400:oklch(.75 .183 55.934);--color-orange-500:oklch(.705 .213 47.604);--color-orange-600:oklch(.646 .222 41.116);--color-orange-700:oklch(.553 .195 38.402);--color-orange-800:oklch(.47 .157 37.304);--color-orange-900:oklch(.408 .123 38.172);--color-orange-950:oklch(.266 .079 36.259);--color-amber-50:oklch(.987 .022 95.277);--color-amber-100:oklch(.962 .059 95.617);--color-amber-200:oklch(.924 .12 95.746);--color-amber-300:oklch(.879 .169 91.605);--color-amber-400:oklch(.828 .189 84.429);--color-amber-500:oklch(.769 .188 70.08);--color-amber-600:oklch(.666 .179 58.318);--color-amber-700:oklch(.555 .163 48.998);--color-amber-800:oklch(.473 .137 46.201);--color-amber-900:oklch(.414 .112 45.904);--color-amber-950:oklch(.279 .077 45.635);--color-yellow-50:oklch(.987 .026 102.212);--color-yellow-100:oklch(.973 .071 103.193);--color-yellow-200:oklch(.945 .129 101.54);--color-yellow-300:oklch(.905 .182 98.111);--color-yellow-400:oklch(.852 .199 91.936);--color-yellow-500:oklch(.795 .184 86.047);--color-yellow-600:oklch(.681 .162 75.834);--color-yellow-700:oklch(.554 .135 66.442);--color-yellow-800:oklch(.476 .114 61.907);--color-yellow-900:oklch(.421 .095 57.708);--color-yellow-950:oklch(.286 .066 53.813);--color-lime-50:oklch(.986 .031 120.757);--color-lime-100:oklch(.967 .067 122.328);--color-lime-200:oklch(.938 .127 124.321);--color-lime-300:oklch(.897 .196 126.665);--color-lime-400:oklch(.841 .238 128.85);--color-lime-500:oklch(.768 .233 130.85);--color-lime-600:oklch(.648 .2 131.684);--color-lime-700:oklch(.532 .157 131.589);--color-lime-800:oklch(.453 .124 130.933);--color-lime-900:oklch(.405 .101 131.063);--color-lime-950:oklch(.274 .072 132.109);--color-green-50:oklch(.982 .018 155.826);--color-green-100:oklch(.962 .044 156.743);--color-green-200:oklch(.925 .084 155.995);--color-green-300:oklch(.871 .15 154.449);--color-green-400:oklch(.792 .209 151.711);--color-green-500:oklch(.723 .219 149.579);--color-green-600:oklch(.627 .194 149.214);--color-green-700:oklch(.527 .154 150.069);--color-green-800:oklch(.448 .119 151.328);--color-green-900:oklch(.393 .095 152.535);--color-green-950:oklch(.266 .065 152.934);--color-emerald-50:oklch(.979 .021 166.113);--color-emerald-100:oklch(.95 .052 163.051);--color-emerald-200:oklch(.905 .093 164.15);--color-emerald-300:oklch(.845 .143 164.978);--color-emerald-400:oklch(.765 .177 163.223);--color-emerald-500:oklch(.696 .17 162.48);--color-emerald-600:oklch(.596 .145 163.225);--color-emerald-700:oklch(.508 .118 165.612);--color-emerald-800:oklch(.432 .095 166.913);--color-emerald-900:oklch(.378 .077 168.94);--color-emerald-950:oklch(.262 .051 172.552);--color-teal-50:oklch(.984 .014 180.72);--color-teal-100:oklch(.953 .051 180.801);--color-teal-200:oklch(.91 .096 180.426);--color-teal-300:oklch(.855 .138 181.071);--color-teal-400:oklch(.777 .152 181.912);--color-teal-500:oklch(.704 .14 182.503);--color-teal-600:oklch(.6 .118 184.704);--color-teal-700:oklch(.511 .096 186.391);--color-teal-800:oklch(.437 .078 188.216);--color-teal-900:oklch(.386 .063 188.416);--color-teal-950:oklch(.277 .046 192.524);--color-cyan-50:oklch(.984 .019 200.873);--color-cyan-100:oklch(.956 .045 203.388);--color-cyan-200:oklch(.917 .08 205.041);--color-cyan-300:oklch(.865 .127 207.078);--color-cyan-400:oklch(.789 .154 211.53);--color-cyan-500:oklch(.715 .143 215.221);--color-cyan-600:oklch(.609 .126 221.723);--color-cyan-700:oklch(.52 .105 223.128);--color-cyan-800:oklch(.45 .085 224.283);--color-cyan-900:oklch(.398 .07 227.392);--color-cyan-950:oklch(.302 .056 229.695);--color-sky-50:oklch(.977 .013 236.62);--color-sky-100:oklch(.951 .026 236.824);--color-sky-200:oklch(.901 .058 230.902);--color-sky-300:oklch(.828 .111 230.318);--color-sky-400:oklch(.746 .16 232.661);--color-sky-500:oklch(.685 .169 237.323);--color-sky-600:oklch(.588 .158 241.966);--color-sky-700:oklch(.5 .134 242.749);--color-sky-800:oklch(.443 .11 240.79);--color-sky-900:oklch(.391 .09 240.876);--color-sky-950:oklch(.293 .066 243.157);--color-blue-50:oklch(.97 .014 254.604);--color-blue-100:oklch(.932 .032 255.585);--color-blue-200:oklch(.882 .059 254.128);--color-blue-300:oklch(.809 .105 251.813);--color-blue-400:oklch(.707 .165 254.624);--color-blue-500:oklch(.623 .214 259.815);--color-blue-600:oklch(.546 .245 262.881);--color-blue-700:oklch(.488 .243 264.376);--color-blue-800:oklch(.424 .199 265.638);--color-blue-900:oklch(.379 .146 265.522);--color-blue-950:oklch(.282 .091 267.935);--color-indigo-50:oklch(.962 .018 272.314);--color-indigo-100:oklch(.93 .034 272.788);--color-indigo-200:oklch(.87 .065 274.039);--color-indigo-300:oklch(.785 .115 274.713);--color-indigo-400:oklch(.673 .182 276.935);--color-indigo-500:oklch(.585 .233 277.117);--color-indigo-600:oklch(.511 .262 276.966);--color-indigo-700:oklch(.457 .24 277.023);--color-indigo-800:oklch(.398 .195 277.366);--color-indigo-900:oklch(.359 .144 278.697);--color-indigo-950:oklch(.257 .09 281.288);--color-violet-50:oklch(.969 .016 293.756);--color-violet-100:oklch(.943 .029 294.588);--color-violet-200:oklch(.894 .057 293.283);--color-violet-300:oklch(.811 .111 293.571);--color-violet-400:oklch(.702 .183 293.541);--color-violet-500:oklch(.606 .25 292.717);--color-violet-600:oklch(.541 .281 293.009);--color-violet-700:oklch(.491 .27 292.581);--color-violet-800:oklch(.432 .232 292.759);--color-violet-900:oklch(.38 .189 293.745);--color-violet-950:oklch(.283 .141 291.089);--color-purple-50:oklch(.977 .014 308.299);--color-purple-100:oklch(.946 .033 307.174);--color-purple-200:oklch(.902 .063 306.703);--color-purple-300:oklch(.827 .119 306.383);--color-purple-400:oklch(.714 .203 305.504);--color-purple-500:oklch(.627 .265 303.9);--color-purple-600:oklch(.558 .288 302.321);--color-purple-700:oklch(.496 .265 301.924);--color-purple-800:oklch(.438 .218 303.724);--color-purple-900:oklch(.381 .176 304.987);--color-purple-950:oklch(.291 .149 302.717);--color-fuchsia-50:oklch(.977 .017 320.058);--color-fuchsia-100:oklch(.952 .037 318.852);--color-fuchsia-200:oklch(.903 .076 319.62);--color-fuchsia-300:oklch(.833 .145 321.434);--color-fuchsia-400:oklch(.74 .238 322.16);--color-fuchsia-500:oklch(.667 .295 322.15);--color-fuchsia-600:oklch(.591 .293 322.896);--color-fuchsia-700:oklch(.518 .253 323.949);--color-fuchsia-800:oklch(.452 .211 324.591);--color-fuchsia-900:oklch(.401 .17 325.612);--color-fuchsia-950:oklch(.293 .136 325.661);--color-pink-50:oklch(.971 .014 343.198);--color-pink-100:oklch(.948 .028 342.258);--color-pink-200:oklch(.899 .061 343.231);--color-pink-300:oklch(.823 .12 346.018);--color-pink-400:oklch(.718 .202 349.761);--color-pink-500:oklch(.656 .241 354.308);--color-pink-600:oklch(.592 .249 .584);--color-pink-700:oklch(.525 .223 3.958);--color-pink-800:oklch(.459 .187 3.815);--color-pink-900:oklch(.408 .153 2.432);--color-pink-950:oklch(.284 .109 3.907);--color-rose-50:oklch(.969 .015 12.422);--color-rose-100:oklch(.941 .03 12.58);--color-rose-200:oklch(.892 .058 10.001);--color-rose-300:oklch(.81 .117 11.638);--color-rose-400:oklch(.712 .194 13.428);--color-rose-500:oklch(.645 .246 16.439);--color-rose-600:oklch(.586 .253 17.585);--color-rose-700:oklch(.514 .222 16.935);--color-rose-800:oklch(.455 .188 13.697);--color-rose-900:oklch(.41 .159 10.272);--color-rose-950:oklch(.271 .105 12.094);--color-slate-50:oklch(.984 .003 247.858);--color-slate-100:oklch(.968 .007 247.896);--color-slate-200:oklch(.929 .013 255.508);--color-slate-300:oklch(.869 .022 252.894);--color-slate-400:oklch(.704 .04 256.788);--color-slate-500:oklch(.554 .046 257.417);--color-slate-600:oklch(.446 .043 257.281);--color-slate-700:oklch(.372 .044 257.287);--color-slate-800:oklch(.279 .041 260.031);--color-slate-900:oklch(.208 .042 265.755);--color-slate-950:oklch(.129 .042 264.695);--color-gray-50:oklch(.985 .002 247.839);--color-gray-100:oklch(.967 .003 264.542);--color-gray-200:oklch(.928 .006 264.531);--color-gray-300:oklch(.872 .01 258.338);--color-gray-400:oklch(.707 .022 261.325);--color-gray-500:oklch(.551 .027 264.364);--color-gray-600:oklch(.446 .03 256.802);--color-gray-700:oklch(.373 .034 259.733);--color-gray-800:oklch(.278 .033 256.848);--color-gray-900:oklch(.21 .034 264.665);--color-gray-950:oklch(.13 .028 261.692);--color-zinc-50:oklch(.985 0 0);--color-zinc-100:oklch(.967 .001 286.375);--color-zinc-200:oklch(.92 .004 286.32);--color-zinc-300:oklch(.871 .006 286.286);--color-zinc-400:oklch(.705 .015 286.067);--color-zinc-500:oklch(.552 .016 285.938);--color-zinc-600:oklch(.442 .017 285.786);--color-zinc-700:oklch(.37 .013 285.805);--color-zinc-800:oklch(.274 .006 286.033);--color-zinc-900:oklch(.21 .006 285.885);--color-zinc-950:oklch(.141 .005 285.823);--color-neutral-50:oklch(.985 0 0);--color-neutral-100:oklch(.97 0 0);--color-neutral-200:oklch(.922 0 0);--color-neutral-300:oklch(.87 0 0);--color-neutral-400:oklch(.708 0 0);--color-neutral-500:oklch(.556 0 0);--color-neutral-600:oklch(.439 0 0);--color-neutral-700:oklch(.371 0 0);--color-neutral-800:oklch(.269 0 0);--color-neutral-900:oklch(.205 0 0);--color-neutral-950:oklch(.145 0 0);--color-stone-50:oklch(.985 .001 106.423);--color-stone-100:oklch(.97 .001 106.424);--color-stone-200:oklch(.923 .003 48.717);--color-stone-300:oklch(.869 .005 56.366);--color-stone-400:oklch(.709 .01 56.259);--color-stone-500:oklch(.553 .013 58.071);--color-stone-600:oklch(.444 .011 73.639);--color-stone-700:oklch(.374 .01 67.558);--color-stone-800:oklch(.268 .007 34.298);--color-stone-900:oklch(.216 .006 56.043);--color-stone-950:oklch(.147 .004 49.25);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-sm:40rem;--breakpoint-md:48rem;--breakpoint-lg:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:96rem;--container-3xs:16rem;--container-2xs:18rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--container-prose:65ch;--text-xs:.75rem;--text-xs--line-height:1rem;--text-sm:.875rem;--text-sm--line-height:1.25rem;--text-base:1rem;--text-base--line-height:1.5rem;--text-lg:1.125rem;--text-lg--line-height:1.75rem;--text-xl:1.25rem;--text-xl--line-height:1.75rem;--text-2xl:1.5rem;--text-2xl--line-height:2rem;--text-3xl:1.875rem;--text-3xl--line-height:2.25rem;--text-4xl:2.25rem;--text-4xl--line-height:2.5rem;--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-4xl:2rem;--shadow-2xs:0 1px #0000000d;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--inset-shadow-2xs:inset 0 1px #0000000d;--inset-shadow-xs:inset 0 1px 1px #0000000d;--inset-shadow-sm:inset 0 2px 4px #0000000d;--drop-shadow-xs:0 1px 1px #0000000d;--drop-shadow-sm:0 1px 2px #0000001a,0 1px 1px #0000000f;--drop-shadow-md:0 4px 3px #00000012,0 2px 2px #0000000f;--drop-shadow-lg:0 10px 8px #0000000a,0 4px 3px #0000001a;--drop-shadow-xl:0 20px 13px #00000008,0 8px 5px #00000014;--drop-shadow-2xl:0 25px 25px #00000026;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur-xs:4px;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--perspective-dramatic:100px;--perspective-near:300px;--perspective-normal:500px;--perspective-midrange:800px;--perspective-distant:1200px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-font-variation-settings:var(--font-sans--font-variation-settings);--default-mono-font-family:var(--font-mono);--default-mono-font-feature-settings:var(--font-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-mono--font-variation-settings)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button;background:0 0}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button;background:0 0}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}summary{display:list-item}ol,ul,menu{list-style:none}textarea{resize:vertical}::placeholder{opacity:1;color:color-mix(in oklch,currentColor 50%,transparent)}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\!visible{visibility:visible!important}.collapse{visibility:collapse!important}.invisible{visibility:hidden!important}.visible{visibility:visible!important}.sr-only{clip:rect(0,0,0,0)!important;white-space:nowrap!important;border-width:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.static{position:static!important}.end-0{inset-inline-end:calc(var(--spacing)*0)!important}.top-0{top:calc(var(--spacing)*0)!important}.z-10{z-index:10!important}.z-20{z-index:20!important}.container{width:100%!important}@media (width>=40rem){.container{max-width:40rem!important}}@media (width>=48rem){.container{max-width:48rem!important}}@media (width>=64rem){.container{max-width:64rem!important}}@media (width>=80rem){.container{max-width:80rem!important}}@media (width>=96rem){.container{max-width:96rem!important}}.m-1{margin:calc(var(--spacing)*1)!important}.mx-1{margin-inline:calc(var(--spacing)*1)!important}.mx-auto{margin-inline:auto!important}.my-2{margin-block:calc(var(--spacing)*2)!important}.my-8{margin-block:calc(var(--spacing)*8)!important}.mt-0\.5{margin-top:calc(var(--spacing)*.5)!important}.mt-1{margin-top:calc(var(--spacing)*1)!important}.mt-2{margin-top:calc(var(--spacing)*2)!important}.mt-3{margin-top:calc(var(--spacing)*3)!important}.mr-1{margin-right:calc(var(--spacing)*1)!important}.mb-1{margin-bottom:calc(var(--spacing)*1)!important}.mb-2{margin-bottom:calc(var(--spacing)*2)!important}.ml-4{margin-left:calc(var(--spacing)*4)!important}.\!grid{display:grid!important}.block{display:block!important}.contents{display:contents!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.inline{display:inline!important}.inline-block{display:inline-block!important}.inline-flex{display:inline-flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.size-3{width:calc(var(--spacing)*3)!important;height:calc(var(--spacing)*3)!important}.h-3{height:calc(var(--spacing)*3)!important}.h-4{height:calc(var(--spacing)*4)!important}.h-5{height:calc(var(--spacing)*5)!important}.h-8{height:calc(var(--spacing)*8)!important}.h-10{height:calc(var(--spacing)*10)!important}.h-40{height:calc(var(--spacing)*40)!important}.h-84{height:calc(var(--spacing)*84)!important}.h-full{height:100%!important}.w-1\/2{width:50%!important}.w-2\/5{width:40%!important}.w-3{width:calc(var(--spacing)*3)!important}.w-3\/5{width:60%!important}.w-4{width:calc(var(--spacing)*4)!important}.w-8{width:calc(var(--spacing)*8)!important}.w-9{width:calc(var(--spacing)*9)!important}.w-10{width:calc(var(--spacing)*10)!important}.w-44{width:calc(var(--spacing)*44)!important}.w-full{width:100%!important}.max-w-lg{max-width:var(--container-lg)!important}.shrink{flex-shrink:1!important}.shrink-0{flex-shrink:0!important}.grow{flex-grow:1!important}.-rotate-90{rotate:-90deg!important}.rotate-180{rotate:180deg!important}.transform{transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.justify-center{justify-content:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:calc(var(--spacing)*2)!important}.gap-3{gap:calc(var(--spacing)*3)!important}:where(.space-x-1>:not(:last-child)){margin-inline-start:calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse))!important;margin-inline-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))!important}:where(.space-x-2>:not(:last-child)){margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse))!important;margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))!important}:where(.divide-x>:not(:last-child)){border-inline-style:var(--tw-border-style)!important;border-inline-start-width:calc(1px*var(--tw-divide-x-reverse))!important;border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)))!important}:where(.divide-y>:not(:last-child)){border-bottom-style:var(--tw-border-style)!important;border-top-style:var(--tw-border-style)!important;border-top-width:calc(1px*var(--tw-divide-y-reverse))!important;border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))!important}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)!important}.truncate{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important}.overflow-hidden{overflow:hidden!important}.overflow-x-auto{overflow-x:auto!important}.rounded{border-radius:.25rem!important}.rounded-full{border-radius:3.40282e38px!important}.rounded-lg{border-radius:var(--radius-lg)!important}.rounded-s-lg{border-start-start-radius:var(--radius-lg)!important;border-end-start-radius:var(--radius-lg)!important}.rounded-e-lg{border-start-end-radius:var(--radius-lg)!important;border-end-end-radius:var(--radius-lg)!important}.rounded-l-full{border-top-left-radius:3.40282e38px!important;border-bottom-left-radius:3.40282e38px!important}.rounded-t-xl{border-top-left-radius:var(--radius-xl)!important;border-top-right-radius:var(--radius-xl)!important}.rounded-r-full{border-top-right-radius:3.40282e38px!important;border-bottom-right-radius:3.40282e38px!important}.border,.border-1{border-style:var(--tw-border-style)!important;border-width:1px!important}.border-2{border-style:var(--tw-border-style)!important;border-width:2px!important}.border-s-2{border-inline-start-style:var(--tw-border-style)!important;border-inline-start-width:2px!important}.border-t-0{border-top-style:var(--tw-border-style)!important;border-top-width:0!important}.border-b{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:1px!important}.border-b-0{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0!important}.border-blue-700{border-color:var(--color-blue-700)!important}.border-gray-200{border-color:var(--color-gray-200)!important}.border-gray-300{border-color:var(--color-gray-300)!important}.border-red-700{border-color:var(--color-red-700)!important}.border-s-gray-50{border-inline-start-color:var(--color-gray-50)!important}.bg-blue-200{background-color:var(--color-blue-200)!important}.bg-blue-700{background-color:var(--color-blue-700)!important}.bg-gray-50{background-color:var(--color-gray-50)!important}.bg-gray-100{background-color:var(--color-gray-100)!important}.bg-gray-200{background-color:var(--color-gray-200)!important}.bg-green-200{background-color:var(--color-green-200)!important}.bg-orange-200{background-color:var(--color-orange-200)!important}.bg-red-700{background-color:var(--color-red-700)!important}.bg-slate-200{background-color:var(--color-slate-200)!important}.bg-violet-100{background-color:var(--color-violet-100)!important}.bg-white{background-color:var(--color-white)!important}.p-0\.5{padding:calc(var(--spacing)*.5)!important}.p-1{padding:calc(var(--spacing)*1)!important}.p-2{padding:calc(var(--spacing)*2)!important}.p-2\.5{padding:calc(var(--spacing)*2.5)!important}.p-5{padding:calc(var(--spacing)*5)!important}.p-10{padding:calc(var(--spacing)*10)!important}.px-2{padding-inline:calc(var(--spacing)*2)!important}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)!important}.px-4{padding-inline:calc(var(--spacing)*4)!important}.px-6{padding-inline:calc(var(--spacing)*6)!important}.py-2{padding-block:calc(var(--spacing)*2)!important}.py-2\.5{padding-block:calc(var(--spacing)*2.5)!important}.py-3{padding-block:calc(var(--spacing)*3)!important}.py-4{padding-block:calc(var(--spacing)*4)!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.font-mono{font-family:var(--font-mono)!important}.text-base{font-size:var(--text-base)!important;line-height:var(--tw-leading,var(--text-base--line-height))!important}.text-lg{font-size:var(--text-lg)!important;line-height:var(--tw-leading,var(--text-lg--line-height))!important}.text-sm{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.text-xl{font-size:var(--text-xl)!important;line-height:var(--tw-leading,var(--text-xl--line-height))!important}.text-xs{font-size:var(--text-xs)!important;line-height:var(--tw-leading,var(--text-xs--line-height))!important}.leading-none{--tw-leading:1!important;line-height:1!important}.font-bold{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}.font-medium{--tw-font-weight:var(--font-weight-medium)!important;font-weight:var(--font-weight-medium)!important}.font-semibold{--tw-font-weight:var(--font-weight-semibold)!important;font-weight:var(--font-weight-semibold)!important}.whitespace-nowrap{white-space:nowrap!important}.text-blue-800{color:var(--color-blue-800)!important}.text-gray-400{color:var(--color-gray-400)!important}.text-gray-500{color:var(--color-gray-500)!important}.text-gray-600{color:var(--color-gray-600)!important}.text-gray-700{color:var(--color-gray-700)!important}.text-gray-800{color:var(--color-gray-800)!important}.text-gray-900{color:var(--color-gray-900)!important}.text-red-800{color:var(--color-red-800)!important}.text-white{color:var(--color-white)!important}.lowercase{text-transform:lowercase!important}.uppercase{text-transform:uppercase!important}.italic{font-style:italic!important}.ordinal{--tw-ordinal:ordinal!important;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)!important}.overline{text-decoration-line:overline!important}.underline{text-decoration-line:underline!important}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentColor)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.outline{outline-style:var(--tw-outline-style)!important;outline-width:1px!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)!important}.\!invert,.invert{--tw-invert:invert(100%)!important;filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)!important}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,-webkit-backdrop-filter,-webkit-backdrop-filter,backdrop-filter!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}.duration-300{--tw-duration:.3s!important;transition-duration:.3s!important}.ease-in{--tw-ease:var(--ease-in)!important;transition-timing-function:var(--ease-in)!important}.\[a-zA-Z\:_\]{a-zA-Z:!important}.peer-checked\:bg-slate-800:is(:where(.peer):checked~*){background-color:var(--color-slate-800)!important}.peer-focus\:ring-green-300:is(:where(.peer):focus~*){--tw-ring-color:var(--color-green-300)!important}.after\:absolute:after{content:var(--tw-content);position:absolute!important}.after\:top-0\.5:after{content:var(--tw-content);top:calc(var(--spacing)*.5)!important}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px!important}.after\:h-4:after{content:var(--tw-content);height:calc(var(--spacing)*4)!important}.after\:w-4:after{content:var(--tw-content);width:calc(var(--spacing)*4)!important}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px!important}.after\:border:after{content:var(--tw-content);border-style:var(--tw-border-style)!important;border-width:1px!important}.after\:border-gray-300:after{content:var(--tw-content);border-color:var(--color-gray-300)!important}.after\:bg-white:after{content:var(--tw-content);background-color:var(--color-white)!important}.after\:transition-all:after{content:var(--tw-content);transition-property:all!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}.after\:content-\[\'\'\]:after{content:var(--tw-content);--tw-content:""!important;content:var(--tw-content)!important}.peer-checked\:after\:translate-x-full:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-translate-x:100%!important;translate:var(--tw-translate-x)var(--tw-translate-y)!important}.peer-checked\:after\:border-white:is(:where(.peer):checked~*):after{content:var(--tw-content);border-color:var(--color-white)!important}@media (hover:hover){.hover\:bg-blue-800:hover{background-color:var(--color-blue-800)!important}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)!important}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)!important}.hover\:bg-red-800:hover{background-color:var(--color-red-800)!important}.hover\:font-bold:hover{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}.hover\:text-gray-900:hover{color:var(--color-gray-900)!important}.hover\:text-orange-600:hover{color:var(--color-orange-600)!important}}.focus\:border-blue-500:focus{border-color:var(--color-blue-500)!important}.focus\:text-orange-600:focus{color:var(--color-orange-600)!important}.focus\:ring-4:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(4px + var(--tw-ring-offset-width))var(--tw-ring-color,currentColor)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.focus\:ring-blue-300:focus{--tw-ring-color:var(--color-blue-300)!important}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)!important}.focus\:ring-gray-100:focus{--tw-ring-color:var(--color-gray-100)!important}.focus\:ring-red-300:focus{--tw-ring-color:var(--color-red-300)!important}.focus\:outline-none:focus{--tw-outline-style:none!important;outline-style:none!important}.rtl\:text-right:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right!important}@media (prefers-color-scheme:dark){.dark\:border-gray-600{border-color:var(--color-gray-600)!important}.dark\:border-gray-700{border-color:var(--color-gray-700)!important}.dark\:border-s-gray-700{border-inline-start-color:var(--color-gray-700)!important}.dark\:bg-blue-600{background-color:var(--color-blue-600)!important}.dark\:bg-gray-600{background-color:var(--color-gray-600)!important}.dark\:bg-gray-700{background-color:var(--color-gray-700)!important}.dark\:bg-gray-800{background-color:var(--color-gray-800)!important}.dark\:bg-gray-900{background-color:var(--color-gray-900)!important}.dark\:bg-red-600{background-color:var(--color-red-600)!important}.dark\:text-gray-200{color:var(--color-gray-200)!important}.dark\:text-gray-300{color:var(--color-gray-300)!important}.dark\:text-gray-400{color:var(--color-gray-400)!important}.dark\:text-white{color:var(--color-white)!important}.dark\:placeholder-gray-400::placeholder{color:var(--color-gray-400)!important}@media (hover:hover){.dark\:hover\:bg-blue-700:hover{background-color:var(--color-blue-700)!important}.dark\:hover\:bg-gray-600:hover{background-color:var(--color-gray-600)!important}.dark\:hover\:bg-gray-800:hover{background-color:var(--color-gray-800)!important}.dark\:hover\:bg-red-700:hover{background-color:var(--color-red-700)!important}.dark\:hover\:text-white:hover{color:var(--color-white)!important}}.dark\:focus\:border-blue-500:focus{border-color:var(--color-blue-500)!important}.dark\:focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)!important}.dark\:focus\:ring-blue-800:focus{--tw-ring-color:var(--color-blue-800)!important}.dark\:focus\:ring-gray-700:focus{--tw-ring-color:var(--color-gray-700)!important}.dark\:focus\:ring-red-800:focus{--tw-ring-color:var(--color-red-800)!important}}}@supports (-moz-orient:inline){@layer base{*,:before,:after,::backdrop{--tw-rotate-x:rotateX(0);--tw-rotate-y:rotateY(0);--tw-rotate-z:rotateZ(0);--tw-skew-x:skewX(0);--tw-skew-y:skewY(0);--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@property --tw-rotate-x{syntax:"<transform-function>";inherits:false;initial-value:rotateX(0)}@property --tw-rotate-y{syntax:"<transform-function>";inherits:false;initial-value:rotateY(0)}@property --tw-rotate-z{syntax:"<transform-function>";inherits:false;initial-value:rotate(0)}@property --tw-skew-x{syntax:"<transform-function>";inherits:false;initial-value:skew(0deg)}@property --tw-skew-y{syntax:"<transform-function>";inherits:false;initial-value:skewY(0)}@property --tw-space-x-reverse{syntax:"<number>";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"<number>";inherits:false;initial-value:0}@property --tw-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"<number>";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-translate-x{syntax:"<length>|<percentage>";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"<length>|<percentage>";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"<length>";inherits:false;initial-value:0}.gallery.svelte-166104d{padding:var(--size-1) var(--size-2)}div.svelte-166104d{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}

src/demo/app.py

@@ -17,12 +17,14 @@ with gr.Blocks() as demo:
         {
             "class": "DNA",
             "sequence": "ATGCGT",
-            "chain": "A"
+            "chain": "A",
+            "msa": True
         },
         {
             "class": "protein",
             "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-            "chain": "B"
+            "chain": "B",
+            "msa": True
         },
         {
             "class": "ligand",

src/demo/space.py

@@ -57,12 +57,14 @@ with gr.Blocks() as demo:
         {
             "class": "DNA",
             "sequence": "ATGCGT",
-            "chain": "A"
+            "chain": "A",
+            "msa": True
         },
         {
             "class": "protein",
             "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-            "chain": "B"
+            "chain": "B",
+            "msa": True
         },
         {
             "class": "ligand",

src/frontend/Example.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
+  import "./style.css";
+
   export let value: string | null;
   export let type: "gallery" | "table";
   export let selected = false;
@@ -28,6 +30,7 @@
   class:table={type === "table"}
   class:gallery={type === "gallery"}
   class:selected
+  class="flex items-center justify-center w-full"
 >
   <!-- {value ? value : ""} -->
   <!-- {JSON.stringify(value)} -->

src/frontend/Index.svelte

@@ -37,14 +37,12 @@
 
   function syncValue(event) {
     //remove empty values and open attributes
-    let entries = event.detail.map((entry) =>
-      Object.fromEntries(
-        Object.entries(entry).filter(
-          ([key, value]) => key !== "open" && value !== ""
-        )
-      )
-    );
-    value["chains"] = entries;
+    // let entries = event.detail.map((entry) =>
+    //   Object.fromEntries(
+    //     Object.entries(entry).filter(([key, value]))
+    //   )
+    // );
+    value["chains"] = event.detail; //entries;
   }
 
   function syncCovMod(event) {
@@ -64,6 +62,7 @@
   //   old_value = value;
   //   // id += 1;
   // }
+  import "./style.css";
 </script>
 
 <Block

src/frontend/gradio.config.js

@@ -0,0 +1,4 @@
+import tailwindcss from "@tailwindcss/vite";
+export default {
+    plugins: [tailwindcss()]
+};

src/frontend/package-lock.json

@@ -14,7 +14,9 @@
         "@gradio/preview": "^0.13.0",
         "@gradio/statustracker": "0.9.4",
         "@gradio/utils": "0.7.0",
-        "3dmol": "^2.4.0"
+        "@tailwindcss/vite": "^4.0.0-alpha.35",
+        "3dmol": "^2.4.0",
+        "tailwindcss": "^4.0.0-alpha.35"
       },
       "devDependencies": {
         "@tsconfig/svelte": "^5.0.4",
@@ -1371,6 +1373,231 @@
         "vite": "^5.0.0"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-9B/RnTdZpFDcswesfVxcw2wfntpEDBNasZaU+n0zfIF2AW0XVRrsWAMMS/kaEW3+cG/QPdQyqc46GIaog4b0Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "enhanced-resolve": "^5.17.1",
+        "jiti": "^2.4.0",
+        "tailwindcss": "4.0.0-alpha.35"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-I6NvAlB9NPQpd7p898k7vkktrirGK+3F7ID/kuVsrPMHUkr++cnK7tSW2oHmSyFXzwyvR5LbWyCeWK4gaFX2Sw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-darwin-arm64": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-darwin-x64": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-freebsd-x64": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-x64-musl": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.0.0-alpha.35"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-UyJvH6/v6bTaCFCcN8z1fc7T/Q0yduJdIlWwszF1YLCcGigMMxRRlqkfAXFADFVPhXBw4Ydpt2VGqG4d7LD7Ug==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-L5j8/odoCYs0Co4qkodARCozN+tqoXaIRDyyQuBJNFA8/g4hiK+xybFB5LyGf/Zcg7vbFz4Xjt6T1zcD2AFNcw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-I2BxWD/WFaZB8/8G4jgeFVyUDkHsJCR9zUKlev8ZdC4zLrcH1hKn1C3Q5pLu2K25e5kgKUrnWUiQpczYrLyhvA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-MxVWdkPXvriNv5rLN/Q89GZPTii9dCmVDUr2OR4igKHozl00Euhsm5G4SER4Us3wBeWqKEYdZtLbhVh4V9M/0A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-vbQ5DUiwgNG1NMlU2cV6GuniQbHWJ7gKEaZvFaZYlAyAdcRj6dZbZqk6x6kWFRGFIO6zKzfEypQzdIXOYj7+yA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-ay0Pi2B+VkgV46dLb51MrpgG2RL3NozWjFJox+zZ+tB5/qg3vxAhSjZnNfCYnFv5bLiC69na9pmu1nLVwL3P3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-1snPWVYJtTIHUCOJHjV5oewQO2WBlR3PXsbnIYcnN1q0UMy1xK/HPSJ4qNj96l6LjfiG/JG6Om43v6j3R8CK/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-6Ph4UA3C64UKOZGRFc1QvrZxiV2HULMC2afIsMzOE7WTrn7a+Hiepmy3jA7zBnGtz4KPyMazZYKkKI0G7Px7ow==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-qlZYb99KdCXCyA7B9JI3OxFoqUhWqv9DFKGdhj3L0RxPJ4LlKB3lhy2yO5cwh6j1+gOokZr8kVX+oz4C9Y+thw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-H1r7XAbLgo1ShE35N5c4zSlctjwgWnPOuSdKGLYNIdPTRzy/467oSFrkH6j+9jfDwrUP7wKyeTKyhEvonGIhcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-DXkgHms/5nyXM75Rh7ifkY9RnENc0+wDdfV7u0CTW3nkyHeflXFaz9EwJ5epMKLEatx1KYeJ3WQM12rN7Rv/hQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-qhaiCJ/nBc88r3FIXr5xGy5zB4qbvXaHty/0r9msnu42l4+Y3A4eoFNN4iRwiFny8YNsXHKwa4eU2A7rVFkhbg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.0.0-alpha.35",
+        "@tailwindcss/oxide": "4.0.0-alpha.35",
+        "lightningcss": "^1.26.0",
+        "svelte-preprocess": "^6.0.2",
+        "tailwindcss": "4.0.0-alpha.35"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0"
+      }
+    },
     "node_modules/@tsconfig/svelte": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-5.0.4.tgz",
@@ -1947,6 +2174,19 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2586,6 +2826,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -2920,6 +3166,15 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.0.tgz",
+      "integrity": "sha512-H5UpaUI+aHOqZXlYOaFP/8AzKsg+guWu+Pr3Y8i7+Y3zr1aXAvCvTAQ1RxSc6oVD8R8c7brgNtTVP91E7upH/g==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -4323,6 +4578,21 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "license": "MIT"
     },
+    "node_modules/tailwindcss": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-M35lJ7+NTbZ+eS1iLnETO8tTjxKSbh8kJfGmLaDu3S0kDv+rZN6HjAD+fkSS2wKgEphUWWm/Fuhm6JzndI+ffg==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -5860,6 +6130,112 @@
         "debug": "^4.3.4"
       }
     },
+    "@tailwindcss/node": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-9B/RnTdZpFDcswesfVxcw2wfntpEDBNasZaU+n0zfIF2AW0XVRrsWAMMS/kaEW3+cG/QPdQyqc46GIaog4b0Yg==",
+      "requires": {
+        "enhanced-resolve": "^5.17.1",
+        "jiti": "^2.4.0",
+        "tailwindcss": "4.0.0-alpha.35"
+      }
+    },
+    "@tailwindcss/oxide": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-I6NvAlB9NPQpd7p898k7vkktrirGK+3F7ID/kuVsrPMHUkr++cnK7tSW2oHmSyFXzwyvR5LbWyCeWK4gaFX2Sw==",
+      "requires": {
+        "@tailwindcss/oxide-android-arm64": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-darwin-arm64": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-darwin-x64": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-freebsd-x64": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-linux-x64-musl": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.0-alpha.35",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.0.0-alpha.35"
+      }
+    },
+    "@tailwindcss/oxide-android-arm64": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-UyJvH6/v6bTaCFCcN8z1fc7T/Q0yduJdIlWwszF1YLCcGigMMxRRlqkfAXFADFVPhXBw4Ydpt2VGqG4d7LD7Ug==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-L5j8/odoCYs0Co4qkodARCozN+tqoXaIRDyyQuBJNFA8/g4hiK+xybFB5LyGf/Zcg7vbFz4Xjt6T1zcD2AFNcw==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-darwin-x64": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-I2BxWD/WFaZB8/8G4jgeFVyUDkHsJCR9zUKlev8ZdC4zLrcH1hKn1C3Q5pLu2K25e5kgKUrnWUiQpczYrLyhvA==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-MxVWdkPXvriNv5rLN/Q89GZPTii9dCmVDUr2OR4igKHozl00Euhsm5G4SER4Us3wBeWqKEYdZtLbhVh4V9M/0A==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-vbQ5DUiwgNG1NMlU2cV6GuniQbHWJ7gKEaZvFaZYlAyAdcRj6dZbZqk6x6kWFRGFIO6zKzfEypQzdIXOYj7+yA==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-ay0Pi2B+VkgV46dLb51MrpgG2RL3NozWjFJox+zZ+tB5/qg3vxAhSjZnNfCYnFv5bLiC69na9pmu1nLVwL3P3g==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-1snPWVYJtTIHUCOJHjV5oewQO2WBlR3PXsbnIYcnN1q0UMy1xK/HPSJ4qNj96l6LjfiG/JG6Om43v6j3R8CK/Q==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-6Ph4UA3C64UKOZGRFc1QvrZxiV2HULMC2afIsMzOE7WTrn7a+Hiepmy3jA7zBnGtz4KPyMazZYKkKI0G7Px7ow==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-qlZYb99KdCXCyA7B9JI3OxFoqUhWqv9DFKGdhj3L0RxPJ4LlKB3lhy2yO5cwh6j1+gOokZr8kVX+oz4C9Y+thw==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-H1r7XAbLgo1ShE35N5c4zSlctjwgWnPOuSdKGLYNIdPTRzy/467oSFrkH6j+9jfDwrUP7wKyeTKyhEvonGIhcA==",
+      "optional": true
+    },
+    "@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-DXkgHms/5nyXM75Rh7ifkY9RnENc0+wDdfV7u0CTW3nkyHeflXFaz9EwJ5epMKLEatx1KYeJ3WQM12rN7Rv/hQ==",
+      "optional": true
+    },
+    "@tailwindcss/vite": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-qhaiCJ/nBc88r3FIXr5xGy5zB4qbvXaHty/0r9msnu42l4+Y3A4eoFNN4iRwiFny8YNsXHKwa4eU2A7rVFkhbg==",
+      "requires": {
+        "@tailwindcss/node": "4.0.0-alpha.35",
+        "@tailwindcss/oxide": "4.0.0-alpha.35",
+        "lightningcss": "^1.26.0",
+        "svelte-preprocess": "^6.0.2",
+        "tailwindcss": "4.0.0-alpha.35"
+      }
+    },
     "@tsconfig/svelte": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-5.0.4.tgz",
@@ -6258,6 +6634,15 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
+    "enhanced-resolve": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "requires": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      }
+    },
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -6600,6 +6985,11 @@
         "get-intrinsic": "^1.1.3"
       }
     },
+    "graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
     "has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -6820,6 +7210,11 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "jiti": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.0.tgz",
+      "integrity": "sha512-H5UpaUI+aHOqZXlYOaFP/8AzKsg+guWu+Pr3Y8i7+Y3zr1aXAvCvTAQ1RxSc6oVD8R8c7brgNtTVP91E7upH/g=="
+    },
     "js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -7674,6 +8069,16 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "tailwindcss": {
+      "version": "4.0.0-alpha.35",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-alpha.35.tgz",
+      "integrity": "sha512-M35lJ7+NTbZ+eS1iLnETO8tTjxKSbh8kJfGmLaDu3S0kDv+rZN6HjAD+fkSS2wKgEphUWWm/Fuhm6JzndI+ffg=="
+    },
+    "tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
+    },
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",

src/frontend/package.json

@@ -23,7 +23,9 @@
     "@gradio/preview": "^0.13.0",
     "@gradio/statustracker": "0.9.4",
     "@gradio/utils": "0.7.0",
-    "3dmol": "^2.4.0"
+    "@tailwindcss/vite": "^4.0.0-alpha.35",
+    "3dmol": "^2.4.0",
+    "tailwindcss": "^4.0.0-alpha.35"
   },
   "devDependencies": {
     "@tsconfig/svelte": "^5.0.4",

src/frontend/shared/Accordion.svelte

@@ -5,6 +5,8 @@
   import SearchInput from "./SearchInput.svelte";
   import Molecule from "./Molecule.svelte";
 
+  // import "../style.css";
+
   const dispatch = createEventDispatcher();
 
   export let vals = [];
@@ -200,6 +202,7 @@
       .then((data) => {
         dispatch("updateVals", {
           sdf: data,
+          name: event.detail.text,
           index: event.detail.index,
           close: true,
         });
@@ -210,7 +213,7 @@
   }
 </script>
 
-<div id="accordion-collapse" data-accordion="collapse">
+<div data-accordion="collapse">
   {#each vals as item, i}
     <h2 id={`accordion-collapse-heading-${i}`}>
       <button
@@ -218,13 +221,12 @@
         class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
         data-accordion-target={`#accordion-collapse-body-${i}`}
         class:rounded-t-xl={i === 0}
-        class:rounded-b-xl={i == vals.length - 1}
         class:border-b-0={i != vals.length - 1}
         aria-expanded={item.open}
         aria-controls={`accordion-collapse-body-${i}`}
         on:click={() => (item.open = !item.open)}
       >
-        <div>
+        <div class="flex items-center justify-start">
           <span
             class="inline-flex items-center justify-center p-1 px-2 text-xs font-semibold rounded-full {colorCode[
               item.class
@@ -232,11 +234,59 @@
           >
             {item.chain}
           </span>
-          <span>{labels[item.class]}</span>
+          <span class="p-1">{labels[item.class]}</span>
+          {#if ["DNA", "RNA", "protein"].includes(item.class)}
+            {#if item.msa}
+              <span
+                class=" ml-4 inline-flex items-center justify-center p-1 px-2 text-xs font-semibold rounded-full border border-gray-300"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-3 mr-1"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5"
+                  />
+                </svg>
+
+                MSA
+              </span>
+            {:else}
+              <span
+                class="inline-flex items-center justify-center p-1 px-2 text-xs font-semibold rounded-full border border-gray-300"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-3 mr-1"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M5 12h14"
+                  />
+                </svg>
+
+                single sequence
+              </span>
+            {/if}
+          {/if}
+
           <span class="px-2 text-gray-800 font-bold">
             {#if !item.open && item.class === "ligand"}
-              {#if metals.includes(item.name)}
+              {#if item.name !== undefined}
                 {item.name}
+              {:else if item.sdf !== ""}
+                SDF file
               {:else}
                 {item.smiles}
               {/if}
@@ -299,46 +349,215 @@
             <textarea
               id="message"
               rows="4"
-              class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              class="p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border-1 border-grey-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              style="display:block"
               placeholder="MSAVGH..."
               value={item.sequence}
-              on:input={(e) => {
-                //   vals[i].sequence = e.target.value;
-                dispatch("updateVals", { sequence: e.target.value, index: i });
+              on:keypress={(e) => {
+                if (e.key === "Enter") {
+                  if (e.target.value.length != 0) {
+                    dispatch("updateVals", {
+                      sequence: e.target.value,
+                      close: true,
+                      index: i,
+                    });
+                  } else {
+                    alert("Sequence is empty");
+                  }
+                }
               }}
             ></textarea>
+            <div class="flex items-center justify-between mt-1">
+              <div class="flex items-center space-x-2 text-sm">
+                <span>Single sequence</span>
+
+                <label class="relative inline-flex cursor-pointer items-center">
+                  <input
+                    id="switch"
+                    type="checkbox"
+                    class="peer sr-only"
+                    name={"msa" + i}
+                    bind:checked={item.msa}
+                  />
+                  <label for="switch" class="hidden"></label>
+                  <div
+                    class="peer h-5 w-9 rounded-full border bg-slate-200 after:absolute after:left-[2px] after:top-0.5 after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-slate-800 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-green-300"
+                  ></div>
+                </label>
+                <span>Use MSA</span>
+              </div>
+              <div class="text-gray-700">
+                Press Enter or <button
+                  on:click={() => {
+                    if (item.sequence.length != 0) {
+                      dispatch("updateVals", {
+                        sequence: item.sequence,
+                        close: true,
+                        index: i,
+                      });
+                    } else {
+                      alert("Sequence is empty");
+                    }
+                  }}
+                  class="hover:bg-gray-100 hover:text-gray-900 underline p-1 rounded"
+                  >click to add sequence.</button
+                >
+              </div>
+            </div>
           {:else if item.class === "ligand"}
+            <label
+              for={"smiles" + i}
+              class="block text-sm font-bold mb-1 px-2.5 dark:text-white"
+              >SMILES</label
+            >
             <textarea
               rows="1"
-              class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              class=" p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              style="display:block"
               placeholder="SMILES like CCC ..."
               value={item.smiles}
-              on:input={(e) => {
-                //   vals[i].sequence = e.target.value;
-                dispatch("updateVals", { smiles: e.target.value, index: i });
+              name={"smiles" + i}
+              on:keypress={(e) => {
+                if (e.key === "Enter") {
+                  if (e.target.value.length != 0) {
+                    dispatch("updateVals", {
+                      smiles: e.target.value,
+                      close: true,
+                      index: i,
+                    });
+                  } else {
+                    alert("Sequence is empty");
+                  }
+                }
               }}
             ></textarea>
+            <div class="text-gray-700 mt-0.5 px-2.5 text-right text-sm">
+              Press Enter or <button
+                on:click={() => {
+                  if (item.smiles != "") {
+                    dispatch("updateVals", {
+                      smiles: item.smiles,
+                      close: true,
+                      index: i,
+                    });
+                  } else {
+                    alert("SMILES is empty");
+                  }
+                }}
+                class="hover:bg-gray-100 hover:text-gray-900 underline p-1 rounded"
+                >click to add SMILES.</button
+              >
+            </div>
 
             <div class="text-center text-gray-400 w-full my-2">- or -</div>
 
-            <SearchInput
-              database="rcsb-3ligand"
-              index={i}
-              on:triggerFetch={handleMessage}
-            />
+            {#if item.name === "" || item.name == undefined}
+              <SearchInput
+                database="rcsb-3ligand"
+                index={i}
+                on:triggerFetch={handleMessage}
+              />
+            {:else}
+              <div class="max-w-lg mx-auto mb-2 my-2">
+                <div class="flex">
+                  <label
+                    for="search-dropdown"
+                    class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
+                    >Current ligand</label
+                  >
+                  <button
+                    id="dropdown-button"
+                    data-dropdown-toggle="dropdown"
+                    class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600"
+                    type="button"
+                    >CCD
+                  </button>
+
+                  <div class="relative w-full">
+                    <input
+                      type="search"
+                      id="search-dropdown"
+                      class=" p-2.5 w-full h-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
+                      style="display:block"
+                      value={item.name}
+                    />
+                    <button
+                      on:click={() => {
+                        dispatch("updateVals", {
+                          name: "",
+                          sdf: "",
+                          open: true,
+                          index: i,
+                        });
+                      }}
+                      class="absolute top-0 end-0 p-2.5 text-sm font-medium h-full text-white bg-red-700 rounded-e-lg border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor"
+                        class="w-4 h-4"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                        />
+                      </svg>
+
+                      <span class="sr-only">Delete</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            {/if}
 
             <div class="text-center text-gray-400 w-full my-2">- or -</div>
-
+            <label
+              for={"sdf" + i}
+              class="block text-sm font-bold mb-1 px-2.5 dark:text-white"
+              >SDF file</label
+            >
             <textarea
               rows="3"
-              class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              class="p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              style="display:block"
               placeholder="SDF format 3D molecule ..."
               value={item.sdf}
-              on:input={(e) => {
-                //   vals[i].sequence = e.target.value;
-                dispatch("updateVals", { sdf: e.target.value, index: i });
+              name={"sdf" + i}
+              on:keypress={(e) => {
+                if (e.key === "Enter") {
+                  if (e.target.value != "") {
+                    dispatch("updateVals", {
+                      sdf: e.target.value,
+                      close: true,
+                      index: i,
+                    });
+                  } else {
+                    alert("SDF is empty");
+                  }
+                }
               }}
             ></textarea>
+            <div class="text-gray-700 mt-0.5 px-2.5 text-right text-sm">
+              Press Enter or <button
+                on:click={() => {
+                  if (item.sdf != "") {
+                    dispatch("updateVals", {
+                      sdf: item.sdf,
+                      close: true,
+                      index: i,
+                    });
+                  } else {
+                    alert("SDF file is empty");
+                  }
+                }}
+                class="hover:bg-gray-100 hover:text-gray-900 underline p-1 rounded"
+                >click to add SDF file.</button
+              >
+            </div>
 
             <div class="text-center text-gray-400 w-full my-2">- or -</div>
 
@@ -722,984 +941,3 @@
 
    -->
 </div>
-
-<style>
-  /*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
-*/
-
-  /*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box;
-    /* 1 */
-    border-width: 0;
-    /* 2 */
-    border-style: solid;
-    /* 2 */
-    border-color: #e5e7eb;
-    /* 2 */
-  }
-
-  ::before,
-  ::after {
-    --tw-content: "";
-  }
-
-  /*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-  html,
-  :host {
-    line-height: 1.5;
-    /* 1 */
-    -webkit-text-size-adjust: 100%;
-    /* 2 */
-    -moz-tab-size: 4;
-    /* 3 */
-    tab-size: 4;
-    /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    /* 4 */
-    font-feature-settings: normal;
-    /* 5 */
-    font-variation-settings: normal;
-    /* 6 */
-    -webkit-tap-highlight-color: transparent;
-    /* 7 */
-  }
-
-  /*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-  body {
-    margin: 0;
-    /* 1 */
-    line-height: inherit;
-    /* 2 */
-  }
-
-  /*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-  hr {
-    height: 0;
-    /* 1 */
-    color: inherit;
-    /* 2 */
-    border-top-width: 1px;
-    /* 3 */
-  }
-
-  /*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-  abbr:where([title]) {
-    text-decoration: underline dotted;
-  }
-
-  /*
-Remove the default font size and weight for headings.
-*/
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  /*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  /*
-Add the correct font weight in Edge and Safari.
-*/
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
-*/
-
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
-    /* 1 */
-    font-feature-settings: normal;
-    /* 2 */
-    font-variation-settings: normal;
-    /* 3 */
-    font-size: 1em;
-    /* 4 */
-  }
-
-  /*
-Add the correct font size in all browsers.
-*/
-
-  small {
-    font-size: 80%;
-  }
-
-  /*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-  table {
-    text-indent: 0;
-    /* 1 */
-    border-color: inherit;
-    /* 2 */
-    border-collapse: collapse;
-    /* 3 */
-  }
-
-  /*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    /* 1 */
-    font-feature-settings: inherit;
-    /* 1 */
-    font-variation-settings: inherit;
-    /* 1 */
-    font-size: 100%;
-    /* 1 */
-    font-weight: inherit;
-    /* 1 */
-    line-height: inherit;
-    /* 1 */
-    letter-spacing: inherit;
-    /* 1 */
-    color: inherit;
-    /* 1 */
-    margin: 0;
-    /* 2 */
-    padding: 0;
-    /* 3 */
-  }
-
-  /*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-  button,
-  select {
-    text-transform: none;
-  }
-
-  /*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-  button,
-  input:where([type="button"]),
-  input:where([type="reset"]),
-  input:where([type="submit"]) {
-    -webkit-appearance: button;
-    /* 1 */
-    background-color: transparent;
-    /* 2 */
-    background-image: none;
-    /* 2 */
-  }
-
-  /*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-  :-moz-focusring {
-    outline: auto;
-  }
-
-  /*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  /*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-  [type="search"] {
-    -webkit-appearance: textfield;
-    /* 1 */
-    outline-offset: -2px;
-    /* 2 */
-  }
-
-  /*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    /* 1 */
-    font: inherit;
-    /* 2 */
-  }
-
-  /*
-Add the correct display in Chrome and Safari.
-*/
-
-  summary {
-    display: list-item;
-  }
-
-  /*
-Removes the default spacing and border for appropriate elements.
-*/
-
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-
-  legend {
-    padding: 0;
-  }
-
-  ol,
-  ul,
-  menu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  /*
-Reset default styling for dialogs.
-*/
-
-  dialog {
-    padding: 0;
-  }
-
-  /*
-Prevent resizing textareas horizontally by default.
-*/
-
-  textarea {
-    resize: vertical;
-  }
-
-  /*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    /* 1 */
-    color: #9ca3af;
-    /* 2 */
-  }
-
-  /*
-Set the default cursor for buttons.
-*/
-
-  button,
-  [role="button"] {
-    cursor: pointer;
-  }
-
-  /*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-
-  :disabled {
-    cursor: default;
-  }
-
-  /*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    display: block;
-    /* 1 */
-    vertical-align: middle;
-    /* 2 */
-  }
-
-  /*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  /* Make elements with the HTML hidden attribute stay hidden by default */
-
-  [hidden] {
-    display: none;
-  }
-
-  *,
-  ::before,
-  ::after {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-    --tw-contain-size:  ;
-    --tw-contain-layout:  ;
-    --tw-contain-paint:  ;
-    --tw-contain-style:                                                                                                                                                                                        
-;
-  }
-
-  ::backdrop {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-    --tw-contain-size:  ;
-    --tw-contain-layout:  ;
-    --tw-contain-paint:  ;
-    --tw-contain-style:                                                                                                                                                                                        
-;
-  }
-
-  .collapse {
-    visibility: collapse;
-  }
-
-  .relative {
-    position: relative;
-  }
-
-  .my-2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .mb-2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .mt-1 {
-    margin-top: 0.25rem;
-  }
-
-  .block {
-    display: block;
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  .inline-flex {
-    display: inline-flex;
-  }
-
-  .grid {
-    display: grid;
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  .h-10 {
-    height: 2.5rem;
-  }
-
-  .h-3 {
-    height: 0.75rem;
-  }
-
-  .h-4 {
-    height: 1rem;
-  }
-
-  .w-10 {
-    width: 2.5rem;
-  }
-
-  .w-2\/5 {
-    width: 40%;
-  }
-
-  .w-3 {
-    width: 0.75rem;
-  }
-
-  .w-3\/5 {
-    width: 60%;
-  }
-
-  .w-4 {
-    width: 1rem;
-  }
-
-  .w-8 {
-    width: 2rem;
-  }
-
-  .w-full {
-    width: 100%;
-  }
-
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .-rotate-90 {
-    --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .rotate-180 {
-    --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .flex-col {
-    flex-direction: column;
-  }
-
-  .items-center {
-    align-items: center;
-  }
-
-  .justify-center {
-    justify-content: center;
-  }
-
-  .justify-between {
-    justify-content: space-between;
-  }
-
-  .gap-3 {
-    gap: 0.75rem;
-  }
-
-  .space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .divide-x > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-x-reverse: 0;
-    border-right-width: calc(1px * var(--tw-divide-x-reverse));
-    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
-  }
-
-  .overflow-hidden {
-    overflow: hidden;
-  }
-
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-
-  .rounded {
-    border-radius: 0.25rem;
-  }
-
-  .rounded-full {
-    border-radius: 9999px;
-  }
-
-  .rounded-lg {
-    border-radius: 0.5rem;
-  }
-
-  .border {
-    border-width: 1px;
-  }
-
-  .border-b-0 {
-    border-bottom-width: 0px;
-  }
-
-  .border-t-0 {
-    border-top-width: 0px;
-  }
-
-  .border-gray-200 {
-    --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity));
-  }
-
-  .border-gray-300 {
-    --tw-border-opacity: 1;
-    border-color: rgb(209 213 219 / var(--tw-border-opacity));
-  }
-
-  .bg-blue-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-gray-50 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  }
-
-  .bg-green-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-  }
-
-  .bg-orange-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 215 170 / var(--tw-bg-opacity));
-  }
-
-  .bg-violet-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(237 233 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-yellow-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 249 195 / var(--tw-bg-opacity));
-  }
-
-  .p-1 {
-    padding: 0.25rem;
-  }
-
-  .p-10 {
-    padding: 2.5rem;
-  }
-
-  .p-2 {
-    padding: 0.5rem;
-  }
-
-  .p-2\.5 {
-    padding: 0.625rem;
-  }
-
-  .p-5 {
-    padding: 1.25rem;
-  }
-
-  .px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .px-3 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-
-  .text-center {
-    text-align: center;
-  }
-
-  .font-mono {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
-  }
-
-  .text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
-  .text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-
-  .text-xs {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .font-bold {
-    font-weight: 700;
-  }
-
-  .font-medium {
-    font-weight: 500;
-  }
-
-  .font-semibold {
-    font-weight: 600;
-  }
-
-  .text-blue-800 {
-    --tw-text-opacity: 1;
-    color: rgb(30 64 175 / var(--tw-text-opacity));
-  }
-
-  .text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity));
-  }
-
-  .text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128 / var(--tw-text-opacity));
-  }
-
-  .text-gray-600 {
-    --tw-text-opacity: 1;
-    color: rgb(75 85 99 / var(--tw-text-opacity));
-  }
-
-  .text-gray-800 {
-    --tw-text-opacity: 1;
-    color: rgb(31 41 55 / var(--tw-text-opacity));
-  }
-
-  .text-gray-900 {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39 / var(--tw-text-opacity));
-  }
-
-  .text-red-800 {
-    --tw-text-opacity: 1;
-    color: rgb(153 27 27 / var(--tw-text-opacity));
-  }
-
-  .hover\:bg-gray-100:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
-
-  .focus\:border-blue-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-  }
-
-  .focus\:outline-none:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .focus\:ring-4:focus {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .focus\:ring-blue-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-gray-200:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-  }
-
-  .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
-    text-align: right;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .dark\:border-gray-600 {
-      --tw-border-opacity: 1;
-      border-color: rgb(75 85 99 / var(--tw-border-opacity));
-    }
-
-    .dark\:border-gray-700 {
-      --tw-border-opacity: 1;
-      border-color: rgb(55 65 81 / var(--tw-border-opacity));
-    }
-
-    .dark\:bg-gray-600 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-700 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-900 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-    }
-
-    .dark\:text-gray-300 {
-      --tw-text-opacity: 1;
-      color: rgb(209 213 219 / var(--tw-text-opacity));
-    }
-
-    .dark\:text-gray-400 {
-      --tw-text-opacity: 1;
-      color: rgb(156 163 175 / var(--tw-text-opacity));
-    }
-
-    .dark\:text-white {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255 / var(--tw-text-opacity));
-    }
-
-    .dark\:placeholder-gray-400::placeholder {
-      --tw-placeholder-opacity: 1;
-      color: rgb(156 163 175 / var(--tw-placeholder-opacity));
-    }
-
-    .dark\:hover\:bg-gray-800:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-    }
-
-    .dark\:focus\:border-blue-500:focus {
-      --tw-border-opacity: 1;
-      border-color: rgb(59 130 246 / var(--tw-border-opacity));
-    }
-
-    .dark\:focus\:ring-blue-500:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-gray-800:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-    }
-  }
-</style>

src/frontend/shared/Button.svelte

@@ -1,6 +1,8 @@
 <script>
   import { createEventDispatcher } from "svelte";
 
+  // import "../style.css";
+
   const dispatch = createEventDispatcher();
   export let vals = [];
   function addNewChain(type) {
@@ -23,9 +25,9 @@
 </script>
 
 <div>
-  <div class="flex justify-center mt-2">
+  <div class="flex justify-center mt-2 gap-2">
     <button
-      class="flex items-center space-x-2 block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+      class="flex items-center space-x-1 px-2 py-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
       on:click={() => {
         addNewChain("protein");
       }}
@@ -51,7 +53,7 @@
     >
 
     <button
-      class="flex items-center space-x-2 block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+      class="flex items-center space-x-1 px-2 py-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
       on:click={() => {
         addNewChain("DNA");
       }}
@@ -77,7 +79,7 @@
     >
 
     <button
-      class="flex items-center space-x-2 block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+      class="flex items-center space-x-1 px-2 py-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
       on:click={() => {
         addNewChain("ligand");
       }}
@@ -104,7 +106,7 @@
 
     {#if displayCovMod}
       <button
-        class="flex items-center space-x-2 block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+        class="flex items-center space-x-2 block rounded-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
         on:click={() => {
           addCovalentModification();
         }}
@@ -131,1308 +133,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  /*
-    ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
-    */
-
-  /*
-    1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-    2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-    */
-
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box;
-    /* 1 */
-    border-width: 0;
-    /* 2 */
-    border-style: solid;
-    /* 2 */
-    border-color: #e5e7eb;
-    /* 2 */
-  }
-
-  ::before,
-  ::after {
-    --tw-content: "";
-  }
-
-  /*
-    1. Use a consistent sensible line-height in all browsers.
-    2. Prevent adjustments of font size after orientation changes in iOS.
-    3. Use a more readable tab size.
-    4. Use the user's configured `sans` font-family by default.
-    5. Use the user's configured `sans` font-feature-settings by default.
-    6. Use the user's configured `sans` font-variation-settings by default.
-    7. Disable tap highlights on iOS
-    */
-
-  html,
-  :host {
-    line-height: 1.5;
-    /* 1 */
-    -webkit-text-size-adjust: 100%;
-    /* 2 */
-    -moz-tab-size: 4;
-    /* 3 */
-    tab-size: 4;
-    /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    /* 4 */
-    font-feature-settings: normal;
-    /* 5 */
-    font-variation-settings: normal;
-    /* 6 */
-    -webkit-tap-highlight-color: transparent;
-    /* 7 */
-  }
-
-  /*
-    1. Remove the margin in all browsers.
-    2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-    */
-
-  body {
-    margin: 0;
-    /* 1 */
-    line-height: inherit;
-    /* 2 */
-  }
-
-  /*
-    1. Add the correct height in Firefox.
-    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-    3. Ensure horizontal rules are visible by default.
-    */
-
-  hr {
-    height: 0;
-    /* 1 */
-    color: inherit;
-    /* 2 */
-    border-top-width: 1px;
-    /* 3 */
-  }
-
-  /*
-    Add the correct text decoration in Chrome, Edge, and Safari.
-    */
-
-  abbr:where([title]) {
-    text-decoration: underline dotted;
-  }
-
-  /*
-    Remove the default font size and weight for headings.
-    */
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  /*
-    Reset links to optimize for opt-in styling instead of opt-out.
-    */
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  /*
-    Add the correct font weight in Edge and Safari.
-    */
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /*
-    1. Use the user's configured `mono` font-family by default.
-    2. Use the user's configured `mono` font-feature-settings by default.
-    3. Use the user's configured `mono` font-variation-settings by default.
-    4. Correct the odd `em` font sizing in all browsers.
-    */
-
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
-    /* 1 */
-    font-feature-settings: normal;
-    /* 2 */
-    font-variation-settings: normal;
-    /* 3 */
-    font-size: 1em;
-    /* 4 */
-  }
-
-  /*
-    Add the correct font size in all browsers.
-    */
-
-  small {
-    font-size: 80%;
-  }
-
-  /*
-    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-    */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /*
-    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-    3. Remove gaps between table borders by default.
-    */
-
-  table {
-    text-indent: 0;
-    /* 1 */
-    border-color: inherit;
-    /* 2 */
-    border-collapse: collapse;
-    /* 3 */
-  }
-
-  /*
-    1. Change the font styles in all browsers.
-    2. Remove the margin in Firefox and Safari.
-    3. Remove default padding in all browsers.
-    */
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    /* 1 */
-    font-feature-settings: inherit;
-    /* 1 */
-    font-variation-settings: inherit;
-    /* 1 */
-    font-size: 100%;
-    /* 1 */
-    font-weight: inherit;
-    /* 1 */
-    line-height: inherit;
-    /* 1 */
-    color: inherit;
-    /* 1 */
-    margin: 0;
-    /* 2 */
-    padding: 0;
-    /* 3 */
-  }
-
-  /*
-    Remove the inheritance of text transform in Edge and Firefox.
-    */
-
-  button,
-  select {
-    text-transform: none;
-  }
-
-  /*
-    1. Correct the inability to style clickable types in iOS and Safari.
-    2. Remove default button styles.
-    */
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-    /* 1 */
-    background-color: transparent;
-    /* 2 */
-    background-image: none;
-    /* 2 */
-  }
-
-  /*
-    Use the modern Firefox focus style for all focusable elements.
-    */
-
-  :-moz-focusring {
-    outline: auto;
-  }
-
-  /*
-    Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-    */
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  /*
-    Add the correct vertical alignment in Chrome and Firefox.
-    */
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /*
-    Correct the cursor style of increment and decrement buttons in Safari.
-    */
-
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /*
-    1. Correct the odd appearance in Chrome and Safari.
-    2. Correct the outline style in Safari.
-    */
-
-  [type="search"] {
-    -webkit-appearance: textfield;
-    /* 1 */
-    outline-offset: -2px;
-    /* 2 */
-  }
-
-  /*
-    Remove the inner padding in Chrome and Safari on macOS.
-    */
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /*
-    1. Correct the inability to style clickable types in iOS and Safari.
-    2. Change font properties to `inherit` in Safari.
-    */
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    /* 1 */
-    font: inherit;
-    /* 2 */
-  }
-
-  /*
-    Add the correct display in Chrome and Safari.
-    */
-
-  summary {
-    display: list-item;
-  }
-
-  /*
-    Removes the default spacing and border for appropriate elements.
-    */
-
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-
-  legend {
-    padding: 0;
-  }
-
-  ol,
-  ul,
-  menu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  /*
-    Reset default styling for dialogs.
-    */
-
-  dialog {
-    padding: 0;
-  }
-
-  /*
-    Prevent resizing textareas horizontally by default.
-    */
-
-  textarea {
-    resize: vertical;
-  }
-
-  /*
-    1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-    2. Set the default placeholder color to the user's configured gray 400 color.
-    */
-
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    /* 1 */
-    color: #9ca3af;
-    /* 2 */
-  }
-
-  /*
-    Set the default cursor for buttons.
-    */
-
-  button,
-  [role="button"] {
-    cursor: pointer;
-  }
-
-  /*
-    Make sure disabled buttons don't get the pointer cursor.
-    */
-
-  :disabled {
-    cursor: default;
-  }
-
-  /*
-    1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-    2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-       This can trigger a poorly considered lint error in some tools but is included by design.
-    */
-
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    display: block;
-    /* 1 */
-    vertical-align: middle;
-    /* 2 */
-  }
-
-  /*
-    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-    */
-
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  /* Make elements with the HTML hidden attribute stay hidden by default */
-
-  [hidden] {
-    display: none;
-  }
-
-  *,
-  ::before,
-  ::after {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-  }
-
-  ::backdrop {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  .collapse {
-    visibility: collapse;
-  }
-
-  .absolute {
-    position: absolute;
-  }
-
-  .relative {
-    position: relative;
-  }
-
-  .inset-0 {
-    inset: 0px;
-  }
-
-  .end-0 {
-    inset-inline-end: 0px;
-  }
-
-  .top-0 {
-    top: 0px;
-  }
-
-  .z-10 {
-    z-index: 10;
-  }
-
-  .z-20 {
-    z-index: 20;
-  }
-
-  .mx-10 {
-    margin-left: 2.5rem;
-    margin-right: 2.5rem;
-  }
-
-  .mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .my-2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .mb-10 {
-    margin-bottom: 2.5rem;
-  }
-
-  .mb-2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .ms-2 {
-    margin-inline-start: 0.5rem;
-  }
-
-  .ms-2\.5 {
-    margin-inline-start: 0.625rem;
-  }
-
-  .ms-3 {
-    margin-inline-start: 0.75rem;
-  }
-
-  .mt-1 {
-    margin-top: 0.25rem;
-  }
-
-  .mt-6 {
-    margin-top: 1.5rem;
-  }
-
-  .block {
-    display: block;
-  }
-
-  .inline-block {
-    display: inline-block;
-  }
-
-  .inline {
-    display: inline;
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  .inline-flex {
-    display: inline-flex;
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  .h-10 {
-    height: 2.5rem;
-  }
-
-  .h-2 {
-    height: 0.5rem;
-  }
-
-  .h-2\.5 {
-    height: 0.625rem;
-  }
-
-  .h-3 {
-    height: 0.75rem;
-  }
-
-  .h-4 {
-    height: 1rem;
-  }
-
-  .h-6 {
-    height: 1.5rem;
-  }
-
-  .h-full {
-    height: 100%;
-  }
-
-  .min-h-screen {
-    min-height: 100vh;
-  }
-
-  .w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .w-10 {
-    width: 2.5rem;
-  }
-
-  .w-2 {
-    width: 0.5rem;
-  }
-
-  .w-2\.5 {
-    width: 0.625rem;
-  }
-
-  .w-3 {
-    width: 0.75rem;
-  }
-
-  .w-4 {
-    width: 1rem;
-  }
-
-  .w-44 {
-    width: 11rem;
-  }
-
-  .w-6 {
-    width: 1.5rem;
-  }
-
-  .w-full {
-    width: 100%;
-  }
-
-  .max-w-lg {
-    max-width: 32rem;
-  }
-
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .-rotate-90 {
-    --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .rotate-180 {
-    --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .flex-col {
-    flex-direction: column;
-  }
-
-  .items-center {
-    align-items: center;
-  }
-
-  .justify-center {
-    justify-content: center;
-  }
-
-  .justify-between {
-    justify-content: space-between;
-  }
-
-  .gap-3 {
-    gap: 0.75rem;
-  }
-
-  .space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .divide-y > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-y-reverse: 0;
-    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-  }
-
-  .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(243 244 246 / var(--tw-divide-opacity));
-  }
-
-  .overflow-hidden {
-    overflow: hidden;
-  }
-
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-
-  .rounded-full {
-    border-radius: 9999px;
-  }
-
-  .rounded-lg {
-    border-radius: 0.5rem;
-  }
-
-  .rounded-e-lg {
-    border-start-end-radius: 0.5rem;
-    border-end-end-radius: 0.5rem;
-  }
-
-  .rounded-s-lg {
-    border-start-start-radius: 0.5rem;
-    border-end-start-radius: 0.5rem;
-  }
-
-  .rounded-t-xl {
-    border-top-left-radius: 0.75rem;
-    border-top-right-radius: 0.75rem;
-  }
-
-  .border {
-    border-width: 1px;
-  }
-
-  .border-b-0 {
-    border-bottom-width: 0px;
-  }
-
-  .border-s-2 {
-    border-inline-start-width: 2px;
-  }
-
-  .border-t-0 {
-    border-top-width: 0px;
-  }
-
-  .border-blue-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(29 78 216 / var(--tw-border-opacity));
-  }
-
-  .border-gray-200 {
-    --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity));
-  }
-
-  .border-gray-300 {
-    --tw-border-opacity: 1;
-    border-color: rgb(209 213 219 / var(--tw-border-opacity));
-  }
-
-  .border-s-gray-50 {
-    --tw-border-opacity: 1;
-    border-inline-start-color: rgb(249 250 251 / var(--tw-border-opacity));
-  }
-
-  .bg-blue-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-blue-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  }
-
-  .bg-gray-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
-
-  .bg-gray-50 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  }
-
-  .bg-green-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-  }
-
-  .bg-green-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-  }
-
-  .bg-orange-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 215 170 / var(--tw-bg-opacity));
-  }
-
-  .bg-violet-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(237 233 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-white {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  }
-
-  .bg-yellow-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 249 195 / var(--tw-bg-opacity));
-  }
-
-  .bg-\[url\(\/img\/grid\.svg\)\] {
-    background-image: url(/img/grid.svg);
-  }
-
-  .bg-center {
-    background-position: center;
-  }
-
-  .p-0 {
-    padding: 0px;
-  }
-
-  .p-0\.5 {
-    padding: 0.125rem;
-  }
-
-  .p-1 {
-    padding: 0.25rem;
-  }
-
-  .p-2 {
-    padding: 0.5rem;
-  }
-
-  .p-2\.5 {
-    padding: 0.625rem;
-  }
-
-  .p-5 {
-    padding: 1.25rem;
-  }
-
-  .px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
-  .px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .py-2\.5 {
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-  }
-
-  .py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  .pb-2 {
-    padding-bottom: 0.5rem;
-  }
-
-  .pb-8 {
-    padding-bottom: 2rem;
-  }
-
-  .pt-10 {
-    padding-top: 2.5rem;
-  }
-
-  .text-center {
-    text-align: center;
-  }
-
-  .text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .text-xs {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .font-bold {
-    font-weight: 700;
-  }
-
-  .font-medium {
-    font-weight: 500;
-  }
-
-  .font-semibold {
-    font-weight: 600;
-  }
-
-  .text-blue-800 {
-    --tw-text-opacity: 1;
-    color: rgb(30 64 175);
-  }
-
-  .text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175);
-  }
-
-  .text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128);
-  }
-
-  .text-gray-600 {
-    --tw-text-opacity: 1;
-    color: rgb(75 85 99);
-  }
-
-  .text-gray-700 {
-    --tw-text-opacity: 1;
-    color: rgb(55 65 81);
-  }
-
-  .text-gray-900 {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39);
-  }
-
-  .text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255);
-  }
-
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
-      0 1px 2px -1px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
-      0 8px 10px -6px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .ring-gray-900\/5 {
-    --tw-ring-color: rgb(17 24 39 / 0.05);
-  }
-
-  .sequence_container {
-    overflow-wrap: anywhere;
-    counter-reset: sequence;
-  }
-
-  .sequence_container .sequence__chunk {
-    display: inline-block;
-    margin: 0.1rem 0 1rem 1rem;
-    /* width: 10ch; */
-    position: relative;
-    white-space: nowrap;
-  }
-
-  .sequence_container .sequence__chunk:not(:last-child):before,
-  .sequence_container .sequence__chunk--display-last:before {
-    content: counter(sequence);
-    counter-increment: sequence 10;
-    position: absolute;
-    top: -0.8em;
-    right: 0;
-    opacity: 0.5;
-    font-weight: bold;
-  }
-
-  .sequence-container .sequence__chunk::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transform-origin: left;
-    transform: scaleX(0.1);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sequence__chunk span {
-    padding: 0 0.05rem;
-  }
-
-  .hover\:bg-blue-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-  }
-
-  .hover\:bg-gray-100:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
-
-  .hover\:bg-gray-200:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-  }
-
-  .hover\:font-bold:hover {
-    font-weight: 700;
-  }
-
-  .focus\:border-blue-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-  }
-
-  .focus\:outline-none:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .focus\:ring-4:focus {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .focus\:ring-blue-300:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-blue-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-gray-100:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-gray-200:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-  }
-
-  @media (min-width: 640px) {
-    .sm\:mx-auto {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .sm\:rounded-lg {
-      border-radius: 0.5rem;
-    }
-
-    .sm\:px-10 {
-      padding-left: 2.5rem;
-      padding-right: 2.5rem;
-    }
-
-    .sm\:py-12 {
-      padding-top: 3rem;
-      padding-bottom: 3rem;
-    }
-  }
-
-  .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
-    text-align: right;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .dark\:border-gray-600 {
-      --tw-border-opacity: 1;
-      border-color: rgb(75 85 99 / var(--tw-border-opacity));
-    }
-
-    .dark\:border-gray-700 {
-      --tw-border-opacity: 1;
-      border-color: rgb(55 65 81 / var(--tw-border-opacity));
-    }
-
-    .dark\:border-s-gray-700 {
-      --tw-border-opacity: 1;
-      border-inline-start-color: rgb(55 65 81 / var(--tw-border-opacity));
-    }
-
-    .dark\:bg-blue-600 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-600 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-700 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-900 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-    }
-
-    .dark\:text-gray-200 {
-      --tw-text-opacity: 1;
-      color: rgb(229 231 235);
-    }
-
-    .dark\:text-gray-300 {
-      --tw-text-opacity: 1;
-      color: rgb(209 213 219);
-    }
-
-    .dark\:text-gray-400 {
-      --tw-text-opacity: 1;
-      color: rgb(156 163 175);
-    }
-
-    .dark\:text-white {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255);
-    }
-
-    .dark\:placeholder-gray-400::placeholder {
-      --tw-placeholder-opacity: 1;
-      color: rgb(156 163 175 / var(--tw-placeholder-opacity));
-    }
-
-    .dark\:hover\:bg-blue-700:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:bg-gray-600:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:bg-gray-800:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:text-white:hover {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255);
-    }
-
-    .dark\:focus\:border-blue-500:focus {
-      --tw-border-opacity: 1;
-      border-color: rgb(59 130 246 / var(--tw-border-opacity));
-    }
-
-    .dark\:focus\:ring-blue-500:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-blue-800:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-gray-700:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-gray-800:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-    }
-  }
-</style>

src/frontend/shared/SearchInput.svelte

@@ -1,12 +1,14 @@
 <script>
   import { createEventDispatcher } from "svelte";
 
+  // import "../style.css";
+
   const dispatch = createEventDispatcher();
 
   export let database = "rcsb-bioass";
   export let index = 0;
   let databases = {
-    "rcsb-3ligand": "RCSB 3-Letter Codes",
+    "rcsb-3ligand": "CCD",
     pubchem: "Pubchem",
     "rcsb-bioass": "RCSB BioAssembly",
   };
@@ -86,7 +88,8 @@
       <input
         type="search"
         id="search-dropdown"
-        class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
+        class=" p-2.5 w-full h-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
+        style="display:block"
         placeholder={placeholder[currentSel]}
         on:input={(e) => (searchInput = e.target.value)}
       />
@@ -115,1308 +118,3 @@
     </div>
   </div>
 </form>
-
-<style>
-  /*
-    ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
-    */
-
-  /*
-    1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-    2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-    */
-
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box;
-    /* 1 */
-    border-width: 0;
-    /* 2 */
-    border-style: solid;
-    /* 2 */
-    border-color: #e5e7eb;
-    /* 2 */
-  }
-
-  ::before,
-  ::after {
-    --tw-content: "";
-  }
-
-  /*
-    1. Use a consistent sensible line-height in all browsers.
-    2. Prevent adjustments of font size after orientation changes in iOS.
-    3. Use a more readable tab size.
-    4. Use the user's configured `sans` font-family by default.
-    5. Use the user's configured `sans` font-feature-settings by default.
-    6. Use the user's configured `sans` font-variation-settings by default.
-    7. Disable tap highlights on iOS
-    */
-
-  html,
-  :host {
-    line-height: 1.5;
-    /* 1 */
-    -webkit-text-size-adjust: 100%;
-    /* 2 */
-    -moz-tab-size: 4;
-    /* 3 */
-    tab-size: 4;
-    /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    /* 4 */
-    font-feature-settings: normal;
-    /* 5 */
-    font-variation-settings: normal;
-    /* 6 */
-    -webkit-tap-highlight-color: transparent;
-    /* 7 */
-  }
-
-  /*
-    1. Remove the margin in all browsers.
-    2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-    */
-
-  body {
-    margin: 0;
-    /* 1 */
-    line-height: inherit;
-    /* 2 */
-  }
-
-  /*
-    1. Add the correct height in Firefox.
-    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-    3. Ensure horizontal rules are visible by default.
-    */
-
-  hr {
-    height: 0;
-    /* 1 */
-    color: inherit;
-    /* 2 */
-    border-top-width: 1px;
-    /* 3 */
-  }
-
-  /*
-    Add the correct text decoration in Chrome, Edge, and Safari.
-    */
-
-  abbr:where([title]) {
-    text-decoration: underline dotted;
-  }
-
-  /*
-    Remove the default font size and weight for headings.
-    */
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  /*
-    Reset links to optimize for opt-in styling instead of opt-out.
-    */
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  /*
-    Add the correct font weight in Edge and Safari.
-    */
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /*
-    1. Use the user's configured `mono` font-family by default.
-    2. Use the user's configured `mono` font-feature-settings by default.
-    3. Use the user's configured `mono` font-variation-settings by default.
-    4. Correct the odd `em` font sizing in all browsers.
-    */
-
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
-    /* 1 */
-    font-feature-settings: normal;
-    /* 2 */
-    font-variation-settings: normal;
-    /* 3 */
-    font-size: 1em;
-    /* 4 */
-  }
-
-  /*
-    Add the correct font size in all browsers.
-    */
-
-  small {
-    font-size: 80%;
-  }
-
-  /*
-    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-    */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /*
-    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-    3. Remove gaps between table borders by default.
-    */
-
-  table {
-    text-indent: 0;
-    /* 1 */
-    border-color: inherit;
-    /* 2 */
-    border-collapse: collapse;
-    /* 3 */
-  }
-
-  /*
-    1. Change the font styles in all browsers.
-    2. Remove the margin in Firefox and Safari.
-    3. Remove default padding in all browsers.
-    */
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    /* 1 */
-    font-feature-settings: inherit;
-    /* 1 */
-    font-variation-settings: inherit;
-    /* 1 */
-    font-size: 100%;
-    /* 1 */
-    font-weight: inherit;
-    /* 1 */
-    line-height: inherit;
-    /* 1 */
-    color: inherit;
-    /* 1 */
-    margin: 0;
-    /* 2 */
-    padding: 0;
-    /* 3 */
-  }
-
-  /*
-    Remove the inheritance of text transform in Edge and Firefox.
-    */
-
-  button,
-  select {
-    text-transform: none;
-  }
-
-  /*
-    1. Correct the inability to style clickable types in iOS and Safari.
-    2. Remove default button styles.
-    */
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-    /* 1 */
-    background-color: transparent;
-    /* 2 */
-    background-image: none;
-    /* 2 */
-  }
-
-  /*
-    Use the modern Firefox focus style for all focusable elements.
-    */
-
-  :-moz-focusring {
-    outline: auto;
-  }
-
-  /*
-    Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-    */
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  /*
-    Add the correct vertical alignment in Chrome and Firefox.
-    */
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /*
-    Correct the cursor style of increment and decrement buttons in Safari.
-    */
-
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /*
-    1. Correct the odd appearance in Chrome and Safari.
-    2. Correct the outline style in Safari.
-    */
-
-  [type="search"] {
-    -webkit-appearance: textfield;
-    /* 1 */
-    outline-offset: -2px;
-    /* 2 */
-  }
-
-  /*
-    Remove the inner padding in Chrome and Safari on macOS.
-    */
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /*
-    1. Correct the inability to style clickable types in iOS and Safari.
-    2. Change font properties to `inherit` in Safari.
-    */
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    /* 1 */
-    font: inherit;
-    /* 2 */
-  }
-
-  /*
-    Add the correct display in Chrome and Safari.
-    */
-
-  summary {
-    display: list-item;
-  }
-
-  /*
-    Removes the default spacing and border for appropriate elements.
-    */
-
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-
-  legend {
-    padding: 0;
-  }
-
-  ol,
-  ul,
-  menu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  /*
-    Reset default styling for dialogs.
-    */
-
-  dialog {
-    padding: 0;
-  }
-
-  /*
-    Prevent resizing textareas horizontally by default.
-    */
-
-  textarea {
-    resize: vertical;
-  }
-
-  /*
-    1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-    2. Set the default placeholder color to the user's configured gray 400 color.
-    */
-
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    /* 1 */
-    color: #9ca3af;
-    /* 2 */
-  }
-
-  /*
-    Set the default cursor for buttons.
-    */
-
-  button,
-  [role="button"] {
-    cursor: pointer;
-  }
-
-  /*
-    Make sure disabled buttons don't get the pointer cursor.
-    */
-
-  :disabled {
-    cursor: default;
-  }
-
-  /*
-    1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-    2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-       This can trigger a poorly considered lint error in some tools but is included by design.
-    */
-
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    display: block;
-    /* 1 */
-    vertical-align: middle;
-    /* 2 */
-  }
-
-  /*
-    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-    */
-
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  /* Make elements with the HTML hidden attribute stay hidden by default */
-
-  [hidden] {
-    display: none;
-  }
-
-  *,
-  ::before,
-  ::after {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-  }
-
-  ::backdrop {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  .collapse {
-    visibility: collapse;
-  }
-
-  .absolute {
-    position: absolute;
-  }
-
-  .relative {
-    position: relative;
-  }
-
-  .inset-0 {
-    inset: 0px;
-  }
-
-  .end-0 {
-    inset-inline-end: 0px;
-  }
-
-  .top-0 {
-    top: 0px;
-  }
-
-  .z-10 {
-    z-index: 10;
-  }
-
-  .z-20 {
-    z-index: 20;
-  }
-
-  .mx-10 {
-    margin-left: 2.5rem;
-    margin-right: 2.5rem;
-  }
-
-  .mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .my-2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .mb-10 {
-    margin-bottom: 2.5rem;
-  }
-
-  .mb-2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .ms-2 {
-    margin-inline-start: 0.5rem;
-  }
-
-  .ms-2\.5 {
-    margin-inline-start: 0.625rem;
-  }
-
-  .ms-3 {
-    margin-inline-start: 0.75rem;
-  }
-
-  .mt-1 {
-    margin-top: 0.25rem;
-  }
-
-  .mt-6 {
-    margin-top: 1.5rem;
-  }
-
-  .block {
-    display: block;
-  }
-
-  .inline-block {
-    display: inline-block;
-  }
-
-  .inline {
-    display: inline;
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  .inline-flex {
-    display: inline-flex;
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  .h-10 {
-    height: 2.5rem;
-  }
-
-  .h-2 {
-    height: 0.5rem;
-  }
-
-  .h-2\.5 {
-    height: 0.625rem;
-  }
-
-  .h-3 {
-    height: 0.75rem;
-  }
-
-  .h-4 {
-    height: 1rem;
-  }
-
-  .h-6 {
-    height: 1.5rem;
-  }
-
-  .h-full {
-    height: 100%;
-  }
-
-  .min-h-screen {
-    min-height: 100vh;
-  }
-
-  .w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .w-10 {
-    width: 2.5rem;
-  }
-
-  .w-2 {
-    width: 0.5rem;
-  }
-
-  .w-2\.5 {
-    width: 0.625rem;
-  }
-
-  .w-3 {
-    width: 0.75rem;
-  }
-
-  .w-4 {
-    width: 1rem;
-  }
-
-  .w-44 {
-    width: 11rem;
-  }
-
-  .w-6 {
-    width: 1.5rem;
-  }
-
-  .w-full {
-    width: 100%;
-  }
-
-  .max-w-lg {
-    max-width: 32rem;
-  }
-
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .-rotate-90 {
-    --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .rotate-180 {
-    --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .flex-col {
-    flex-direction: column;
-  }
-
-  .items-center {
-    align-items: center;
-  }
-
-  .justify-center {
-    justify-content: center;
-  }
-
-  .justify-between {
-    justify-content: space-between;
-  }
-
-  .gap-3 {
-    gap: 0.75rem;
-  }
-
-  .space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .divide-y > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-y-reverse: 0;
-    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-  }
-
-  .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(243 244 246 / var(--tw-divide-opacity));
-  }
-
-  .overflow-hidden {
-    overflow: hidden;
-  }
-
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-
-  .rounded-full {
-    border-radius: 9999px;
-  }
-
-  .rounded-lg {
-    border-radius: 0.5rem;
-  }
-
-  .rounded-e-lg {
-    border-start-end-radius: 0.5rem;
-    border-end-end-radius: 0.5rem;
-  }
-
-  .rounded-s-lg {
-    border-start-start-radius: 0.5rem;
-    border-end-start-radius: 0.5rem;
-  }
-
-  .rounded-t-xl {
-    border-top-left-radius: 0.75rem;
-    border-top-right-radius: 0.75rem;
-  }
-
-  .border {
-    border-width: 1px;
-  }
-
-  .border-b-0 {
-    border-bottom-width: 0px;
-  }
-
-  .border-s-2 {
-    border-inline-start-width: 2px;
-  }
-
-  .border-t-0 {
-    border-top-width: 0px;
-  }
-
-  .border-blue-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(29 78 216 / var(--tw-border-opacity));
-  }
-
-  .border-gray-200 {
-    --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity));
-  }
-
-  .border-gray-300 {
-    --tw-border-opacity: 1;
-    border-color: rgb(209 213 219 / var(--tw-border-opacity));
-  }
-
-  .border-s-gray-50 {
-    --tw-border-opacity: 1;
-    border-inline-start-color: rgb(249 250 251 / var(--tw-border-opacity));
-  }
-
-  .bg-blue-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-blue-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  }
-
-  .bg-gray-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
-
-  .bg-gray-50 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  }
-
-  .bg-green-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-  }
-
-  .bg-green-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-  }
-
-  .bg-orange-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 215 170 / var(--tw-bg-opacity));
-  }
-
-  .bg-violet-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(237 233 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-white {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  }
-
-  .bg-yellow-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 249 195 / var(--tw-bg-opacity));
-  }
-
-  .bg-\[url\(\/img\/grid\.svg\)\] {
-    background-image: url(/img/grid.svg);
-  }
-
-  .bg-center {
-    background-position: center;
-  }
-
-  .p-0 {
-    padding: 0px;
-  }
-
-  .p-0\.5 {
-    padding: 0.125rem;
-  }
-
-  .p-1 {
-    padding: 0.25rem;
-  }
-
-  .p-2 {
-    padding: 0.5rem;
-  }
-
-  .p-2\.5 {
-    padding: 0.625rem;
-  }
-
-  .p-5 {
-    padding: 1.25rem;
-  }
-
-  .px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
-  .px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .py-2\.5 {
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-  }
-
-  .py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  .pb-2 {
-    padding-bottom: 0.5rem;
-  }
-
-  .pb-8 {
-    padding-bottom: 2rem;
-  }
-
-  .pt-10 {
-    padding-top: 2.5rem;
-  }
-
-  .text-center {
-    text-align: center;
-  }
-
-  .text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .text-xs {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .font-bold {
-    font-weight: 700;
-  }
-
-  .font-medium {
-    font-weight: 500;
-  }
-
-  .font-semibold {
-    font-weight: 600;
-  }
-
-  .text-blue-800 {
-    --tw-text-opacity: 1;
-    color: rgb(30 64 175);
-  }
-
-  .text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175);
-  }
-
-  .text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128);
-  }
-
-  .text-gray-600 {
-    --tw-text-opacity: 1;
-    color: rgb(75 85 99);
-  }
-
-  .text-gray-700 {
-    --tw-text-opacity: 1;
-    color: rgb(55 65 81);
-  }
-
-  .text-gray-900 {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39);
-  }
-
-  .text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255);
-  }
-
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
-      0 1px 2px -1px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
-      0 8px 10px -6px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .ring-gray-900\/5 {
-    --tw-ring-color: rgb(17 24 39 / 0.05);
-  }
-
-  .sequence_container {
-    overflow-wrap: anywhere;
-    counter-reset: sequence;
-  }
-
-  .sequence_container .sequence__chunk {
-    display: inline-block;
-    margin: 0.1rem 0 1rem 1rem;
-    /* width: 10ch; */
-    position: relative;
-    white-space: nowrap;
-  }
-
-  .sequence_container .sequence__chunk:not(:last-child):before,
-  .sequence_container .sequence__chunk--display-last:before {
-    content: counter(sequence);
-    counter-increment: sequence 10;
-    position: absolute;
-    top: -0.8em;
-    right: 0;
-    opacity: 0.5;
-    font-weight: bold;
-  }
-
-  .sequence-container .sequence__chunk::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transform-origin: left;
-    transform: scaleX(0.1);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sequence__chunk span {
-    padding: 0 0.05rem;
-  }
-
-  .hover\:bg-blue-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-  }
-
-  .hover\:bg-gray-100:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
-
-  .hover\:bg-gray-200:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-  }
-
-  .hover\:font-bold:hover {
-    font-weight: 700;
-  }
-
-  .focus\:border-blue-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-  }
-
-  .focus\:outline-none:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .focus\:ring-4:focus {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .focus\:ring-blue-300:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-blue-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-gray-100:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-gray-200:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-  }
-
-  @media (min-width: 640px) {
-    .sm\:mx-auto {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .sm\:rounded-lg {
-      border-radius: 0.5rem;
-    }
-
-    .sm\:px-10 {
-      padding-left: 2.5rem;
-      padding-right: 2.5rem;
-    }
-
-    .sm\:py-12 {
-      padding-top: 3rem;
-      padding-bottom: 3rem;
-    }
-  }
-
-  .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
-    text-align: right;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .dark\:border-gray-600 {
-      --tw-border-opacity: 1;
-      border-color: rgb(75 85 99 / var(--tw-border-opacity));
-    }
-
-    .dark\:border-gray-700 {
-      --tw-border-opacity: 1;
-      border-color: rgb(55 65 81 / var(--tw-border-opacity));
-    }
-
-    .dark\:border-s-gray-700 {
-      --tw-border-opacity: 1;
-      border-inline-start-color: rgb(55 65 81 / var(--tw-border-opacity));
-    }
-
-    .dark\:bg-blue-600 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-600 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-700 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-900 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-    }
-
-    .dark\:text-gray-200 {
-      --tw-text-opacity: 1;
-      color: rgb(229 231 235);
-    }
-
-    .dark\:text-gray-300 {
-      --tw-text-opacity: 1;
-      color: rgb(209 213 219);
-    }
-
-    .dark\:text-gray-400 {
-      --tw-text-opacity: 1;
-      color: rgb(156 163 175);
-    }
-
-    .dark\:text-white {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255);
-    }
-
-    .dark\:placeholder-gray-400::placeholder {
-      --tw-placeholder-opacity: 1;
-      color: rgb(156 163 175 / var(--tw-placeholder-opacity));
-    }
-
-    .dark\:hover\:bg-blue-700:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:bg-gray-600:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:bg-gray-800:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:text-white:hover {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255);
-    }
-
-    .dark\:focus\:border-blue-500:focus {
-      --tw-border-opacity: 1;
-      border-color: rgb(59 130 246 / var(--tw-border-opacity));
-    }
-
-    .dark\:focus\:ring-blue-500:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-blue-800:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-gray-700:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-gray-800:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-    }
-  }
-</style>

src/frontend/shared/Sequence.svelte

@@ -5,6 +5,9 @@
 
   let chunked_seq = seq.match(/.{1,10}/g);
 
+  if (chunked_seq == null) {
+    chunked_seq = [];
+  }
   // store residue index of each residue per chunk
   let chunk_ids = chunked_seq.map((chunk, i) => {
     return chunk.split("").map((_, j) => {
@@ -31,1080 +34,6 @@
 </div>
 
 <style>
-  /*
-      ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
-      */
-
-  /*
-      1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-      2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-      */
-
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box;
-    /* 1 */
-    border-width: 0;
-    /* 2 */
-    border-style: solid;
-    /* 2 */
-    border-color: #e5e7eb;
-    /* 2 */
-  }
-
-  ::before,
-  ::after {
-    --tw-content: "";
-  }
-
-  /*
-      1. Use a consistent sensible line-height in all browsers.
-      2. Prevent adjustments of font size after orientation changes in iOS.
-      3. Use a more readable tab size.
-      4. Use the user's configured `sans` font-family by default.
-      5. Use the user's configured `sans` font-feature-settings by default.
-      6. Use the user's configured `sans` font-variation-settings by default.
-      7. Disable tap highlights on iOS
-      */
-
-  html,
-  :host {
-    line-height: 1.5;
-    /* 1 */
-    -webkit-text-size-adjust: 100%;
-    /* 2 */
-    -moz-tab-size: 4;
-    /* 3 */
-    tab-size: 4;
-    /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    /* 4 */
-    font-feature-settings: normal;
-    /* 5 */
-    font-variation-settings: normal;
-    /* 6 */
-    -webkit-tap-highlight-color: transparent;
-    /* 7 */
-  }
-
-  /*
-      1. Remove the margin in all browsers.
-      2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-      */
-
-  body {
-    margin: 0;
-    /* 1 */
-    line-height: inherit;
-    /* 2 */
-  }
-
-  /*
-      1. Add the correct height in Firefox.
-      2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-      3. Ensure horizontal rules are visible by default.
-      */
-
-  hr {
-    height: 0;
-    /* 1 */
-    color: inherit;
-    /* 2 */
-    border-top-width: 1px;
-    /* 3 */
-  }
-
-  /*
-      Add the correct text decoration in Chrome, Edge, and Safari.
-      */
-
-  abbr:where([title]) {
-    text-decoration: underline dotted;
-  }
-
-  /*
-      Remove the default font size and weight for headings.
-      */
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  /*
-      Reset links to optimize for opt-in styling instead of opt-out.
-      */
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  /*
-      Add the correct font weight in Edge and Safari.
-      */
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /*
-      1. Use the user's configured `mono` font-family by default.
-      2. Use the user's configured `mono` font-feature-settings by default.
-      3. Use the user's configured `mono` font-variation-settings by default.
-      4. Correct the odd `em` font sizing in all browsers.
-      */
-
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
-    /* 1 */
-    font-feature-settings: normal;
-    /* 2 */
-    font-variation-settings: normal;
-    /* 3 */
-    font-size: 1em;
-    /* 4 */
-  }
-
-  /*
-      Add the correct font size in all browsers.
-      */
-
-  small {
-    font-size: 80%;
-  }
-
-  /*
-      Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-      */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /*
-      1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-      2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-      3. Remove gaps between table borders by default.
-      */
-
-  table {
-    text-indent: 0;
-    /* 1 */
-    border-color: inherit;
-    /* 2 */
-    border-collapse: collapse;
-    /* 3 */
-  }
-
-  /*
-      1. Change the font styles in all browsers.
-      2. Remove the margin in Firefox and Safari.
-      3. Remove default padding in all browsers.
-      */
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    /* 1 */
-    font-feature-settings: inherit;
-    /* 1 */
-    font-variation-settings: inherit;
-    /* 1 */
-    font-size: 100%;
-    /* 1 */
-    font-weight: inherit;
-    /* 1 */
-    line-height: inherit;
-    /* 1 */
-    color: inherit;
-    /* 1 */
-    margin: 0;
-    /* 2 */
-    padding: 0;
-    /* 3 */
-  }
-
-  /*
-      Remove the inheritance of text transform in Edge and Firefox.
-      */
-
-  button,
-  select {
-    text-transform: none;
-  }
-
-  /*
-      1. Correct the inability to style clickable types in iOS and Safari.
-      2. Remove default button styles.
-      */
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-    /* 1 */
-    background-color: transparent;
-    /* 2 */
-    background-image: none;
-    /* 2 */
-  }
-
-  /*
-      Use the modern Firefox focus style for all focusable elements.
-      */
-
-  :-moz-focusring {
-    outline: auto;
-  }
-
-  /*
-      Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-      */
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  /*
-      Add the correct vertical alignment in Chrome and Firefox.
-      */
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /*
-      Correct the cursor style of increment and decrement buttons in Safari.
-      */
-
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /*
-      1. Correct the odd appearance in Chrome and Safari.
-      2. Correct the outline style in Safari.
-      */
-
-  [type="search"] {
-    -webkit-appearance: textfield;
-    /* 1 */
-    outline-offset: -2px;
-    /* 2 */
-  }
-
-  /*
-      Remove the inner padding in Chrome and Safari on macOS.
-      */
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /*
-      1. Correct the inability to style clickable types in iOS and Safari.
-      2. Change font properties to `inherit` in Safari.
-      */
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    /* 1 */
-    font: inherit;
-    /* 2 */
-  }
-
-  /*
-      Add the correct display in Chrome and Safari.
-      */
-
-  summary {
-    display: list-item;
-  }
-
-  /*
-      Removes the default spacing and border for appropriate elements.
-      */
-
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-
-  legend {
-    padding: 0;
-  }
-
-  ol,
-  ul,
-  menu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  /*
-      Reset default styling for dialogs.
-      */
-
-  dialog {
-    padding: 0;
-  }
-
-  /*
-      Prevent resizing textareas horizontally by default.
-      */
-
-  textarea {
-    resize: vertical;
-  }
-
-  /*
-      1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-      2. Set the default placeholder color to the user's configured gray 400 color.
-      */
-
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    /* 1 */
-    color: #9ca3af;
-    /* 2 */
-  }
-
-  /*
-      Set the default cursor for buttons.
-      */
-
-  button,
-  [role="button"] {
-    cursor: pointer;
-  }
-
-  /*
-      Make sure disabled buttons don't get the pointer cursor.
-      */
-
-  :disabled {
-    cursor: default;
-  }
-
-  /*
-      1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-      2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-         This can trigger a poorly considered lint error in some tools but is included by design.
-      */
-
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    display: block;
-    /* 1 */
-    vertical-align: middle;
-    /* 2 */
-  }
-
-  /*
-      Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-      */
-
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  /* Make elements with the HTML hidden attribute stay hidden by default */
-
-  [hidden] {
-    display: none;
-  }
-
-  *,
-  ::before,
-  ::after {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-  }
-
-  ::backdrop {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  .collapse {
-    visibility: collapse;
-  }
-
-  .absolute {
-    position: absolute;
-  }
-
-  .relative {
-    position: relative;
-  }
-
-  .inset-0 {
-    inset: 0px;
-  }
-
-  .end-0 {
-    inset-inline-end: 0px;
-  }
-
-  .top-0 {
-    top: 0px;
-  }
-
-  .z-10 {
-    z-index: 10;
-  }
-
-  .z-20 {
-    z-index: 20;
-  }
-
-  .mx-10 {
-    margin-left: 2.5rem;
-    margin-right: 2.5rem;
-  }
-
-  .mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .my-2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .mb-10 {
-    margin-bottom: 2.5rem;
-  }
-
-  .mb-2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .ms-2 {
-    margin-inline-start: 0.5rem;
-  }
-
-  .ms-2\.5 {
-    margin-inline-start: 0.625rem;
-  }
-
-  .ms-3 {
-    margin-inline-start: 0.75rem;
-  }
-
-  .mt-1 {
-    margin-top: 0.25rem;
-  }
-
-  .mt-6 {
-    margin-top: 1.5rem;
-  }
-
-  .block {
-    display: block;
-  }
-
-  .inline-block {
-    display: inline-block;
-  }
-
-  .inline {
-    display: inline;
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  .inline-flex {
-    display: inline-flex;
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  .h-10 {
-    height: 2.5rem;
-  }
-
-  .h-2 {
-    height: 0.5rem;
-  }
-
-  .h-2\.5 {
-    height: 0.625rem;
-  }
-
-  .h-3 {
-    height: 0.75rem;
-  }
-
-  .h-4 {
-    height: 1rem;
-  }
-
-  .h-6 {
-    height: 1.5rem;
-  }
-
-  .h-full {
-    height: 100%;
-  }
-
-  .min-h-screen {
-    min-height: 100vh;
-  }
-
-  .w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .w-10 {
-    width: 2.5rem;
-  }
-
-  .w-2 {
-    width: 0.5rem;
-  }
-
-  .w-2\.5 {
-    width: 0.625rem;
-  }
-
-  .w-3 {
-    width: 0.75rem;
-  }
-
-  .w-4 {
-    width: 1rem;
-  }
-
-  .w-44 {
-    width: 11rem;
-  }
-
-  .w-6 {
-    width: 1.5rem;
-  }
-
-  .w-full {
-    width: 100%;
-  }
-
-  .max-w-lg {
-    max-width: 32rem;
-  }
-
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .-rotate-90 {
-    --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .rotate-180 {
-    --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .flex-col {
-    flex-direction: column;
-  }
-
-  .items-center {
-    align-items: center;
-  }
-
-  .justify-center {
-    justify-content: center;
-  }
-
-  .justify-between {
-    justify-content: space-between;
-  }
-
-  .gap-3 {
-    gap: 0.75rem;
-  }
-
-  .space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .divide-y > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-y-reverse: 0;
-    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-  }
-
-  .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(243 244 246 / var(--tw-divide-opacity));
-  }
-
-  .overflow-hidden {
-    overflow: hidden;
-  }
-
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-
-  .rounded-full {
-    border-radius: 9999px;
-  }
-
-  .rounded-lg {
-    border-radius: 0.5rem;
-  }
-
-  .rounded-e-lg {
-    border-start-end-radius: 0.5rem;
-    border-end-end-radius: 0.5rem;
-  }
-
-  .rounded-s-lg {
-    border-start-start-radius: 0.5rem;
-    border-end-start-radius: 0.5rem;
-  }
-
-  .rounded-t-xl {
-    border-top-left-radius: 0.75rem;
-    border-top-right-radius: 0.75rem;
-  }
-
-  .border {
-    border-width: 1px;
-  }
-
-  .border-b-0 {
-    border-bottom-width: 0px;
-  }
-
-  .border-s-2 {
-    border-inline-start-width: 2px;
-  }
-
-  .border-t-0 {
-    border-top-width: 0px;
-  }
-
-  .border-blue-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(29 78 216 / var(--tw-border-opacity));
-  }
-
-  .border-gray-200 {
-    --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity));
-  }
-
-  .border-gray-300 {
-    --tw-border-opacity: 1;
-    border-color: rgb(209 213 219 / var(--tw-border-opacity));
-  }
-
-  .border-s-gray-50 {
-    --tw-border-opacity: 1;
-    border-inline-start-color: rgb(249 250 251 / var(--tw-border-opacity));
-  }
-
-  .bg-blue-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-blue-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  }
-
-  .bg-gray-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
-
-  .bg-gray-50 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  }
-
-  .bg-green-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-  }
-
-  .bg-green-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-  }
-
-  .bg-orange-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 215 170 / var(--tw-bg-opacity));
-  }
-
-  .bg-violet-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(237 233 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-white {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  }
-
-  .bg-yellow-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 249 195 / var(--tw-bg-opacity));
-  }
-
-  .bg-\[url\(\/img\/grid\.svg\)\] {
-    background-image: url(/img/grid.svg);
-  }
-
-  .bg-center {
-    background-position: center;
-  }
-
-  .p-0 {
-    padding: 0px;
-  }
-
-  .p-0\.5 {
-    padding: 0.125rem;
-  }
-
-  .p-1 {
-    padding: 0.25rem;
-  }
-
-  .p-2 {
-    padding: 0.5rem;
-  }
-
-  .p-2\.5 {
-    padding: 0.625rem;
-  }
-
-  .p-5 {
-    padding: 1.25rem;
-  }
-
-  .px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
-  .px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .py-2\.5 {
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-  }
-
-  .py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  .pb-2 {
-    padding-bottom: 0.5rem;
-  }
-
-  .pb-8 {
-    padding-bottom: 2rem;
-  }
-
-  .pt-10 {
-    padding-top: 2.5rem;
-  }
-
-  .text-center {
-    text-align: center;
-  }
-
-  .text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .text-xs {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .font-bold {
-    font-weight: 700;
-  }
-
-  .font-medium {
-    font-weight: 500;
-  }
-
-  .font-semibold {
-    font-weight: 600;
-  }
-
-  .text-blue-800 {
-    --tw-text-opacity: 1;
-    color: rgb(30 64 175);
-  }
-
-  .text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175);
-  }
-
-  .text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128);
-  }
-
-  .text-gray-600 {
-    --tw-text-opacity: 1;
-    color: rgb(75 85 99);
-  }
-
-  .text-gray-700 {
-    --tw-text-opacity: 1;
-    color: rgb(55 65 81);
-  }
-
-  .text-gray-900 {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39);
-  }
-
-  .text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255);
-  }
-
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
-      0 1px 2px -1px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
-      0 8px 10px -6px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .ring-gray-900\/5 {
-    --tw-ring-color: rgb(17 24 39 / 0.05);
-  }
-
   .sequence_container {
     overflow-wrap: anywhere;
     counter-reset: sequence;
@@ -1143,194 +72,4 @@
   .sequence__chunk span {
     padding: 0 0.05rem;
   }
-
-  .hover\:bg-blue-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-  }
-
-  .hover\:bg-gray-100:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
-
-  .hover\:bg-gray-200:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-  }
-
-  .hover\:font-bold:hover {
-    font-weight: 700;
-  }
-
-  .focus\:border-blue-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-  }
-
-  .focus\:outline-none:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .focus\:ring-4:focus {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .focus\:ring-blue-300:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-blue-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-gray-100:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-gray-200:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-  }
-
-  @media (min-width: 640px) {
-    .sm\:mx-auto {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .sm\:rounded-lg {
-      border-radius: 0.5rem;
-    }
-
-    .sm\:px-10 {
-      padding-left: 2.5rem;
-      padding-right: 2.5rem;
-    }
-
-    .sm\:py-12 {
-      padding-top: 3rem;
-      padding-bottom: 3rem;
-    }
-  }
-
-  .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
-    text-align: right;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .dark\:border-gray-600 {
-      --tw-border-opacity: 1;
-      border-color: rgb(75 85 99 / var(--tw-border-opacity));
-    }
-
-    .dark\:border-gray-700 {
-      --tw-border-opacity: 1;
-      border-color: rgb(55 65 81 / var(--tw-border-opacity));
-    }
-
-    .dark\:border-s-gray-700 {
-      --tw-border-opacity: 1;
-      border-inline-start-color: rgb(55 65 81 / var(--tw-border-opacity));
-    }
-
-    .dark\:bg-blue-600 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-600 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-700 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-900 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-    }
-
-    .dark\:text-gray-200 {
-      --tw-text-opacity: 1;
-      color: rgb(229 231 235);
-    }
-
-    .dark\:text-gray-300 {
-      --tw-text-opacity: 1;
-      color: rgb(209 213 219);
-    }
-
-    .dark\:text-gray-400 {
-      --tw-text-opacity: 1;
-      color: rgb(156 163 175);
-    }
-
-    .dark\:text-white {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255);
-    }
-
-    .dark\:placeholder-gray-400::placeholder {
-      --tw-placeholder-opacity: 1;
-      color: rgb(156 163 175 / var(--tw-placeholder-opacity));
-    }
-
-    .dark\:hover\:bg-blue-700:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:bg-gray-600:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:bg-gray-800:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:text-white:hover {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255);
-    }
-
-    .dark\:focus\:border-blue-500:focus {
-      --tw-border-opacity: 1;
-      border-color: rgb(59 130 246 / var(--tw-border-opacity));
-    }
-
-    .dark\:focus\:ring-blue-500:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-blue-800:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-gray-700:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-gray-800:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-    }
-  }
 </style>

src/frontend/shared/SequenceInput.svelte

@@ -9,6 +9,8 @@
   import Accordion from "./Accordion.svelte";
   import { createEventDispatcher, onMount, afterUpdate } from "svelte";
 
+  // import "../style.css";
+
   export let value = { chains: [], covMods: [] };
 
   const dispatch = createEventDispatcher();
@@ -119,29 +121,31 @@
   let covMods = [];
 
   function update(event) {
-    // vals[event.detail.index].open = event.detail.open;
+    // console.log(vals[event.detail.index]);
     if (event.detail.sequence !== undefined) {
       vals[event.detail.index].sequence = event.detail.sequence;
     }
     if (event.detail.name !== undefined) {
       vals[event.detail.index].name = event.detail.name;
-      vals[event.detail.index].open = event.detail.open;
-      vals[event.detail.index].sdf = "";
-      vals[event.detail.index].smiles = "";
+    } else {
+      vals[event.detail.index].name = "";
     }
     if (event.detail.smiles !== undefined) {
       vals[event.detail.index].smiles = event.detail.smiles;
-      vals[event.detail.index].sdf = "";
-      vals[event.detail.index].name = "";
+    } else {
+      vals[event.detail.index].smiles = "";
     }
     if (event.detail.sdf !== undefined) {
-      if (event.detail.close == true) {
-        vals[event.detail.index].open = false;
-      }
       vals[event.detail.index].sdf = event.detail.sdf;
-      vals[event.detail.index].name = "";
-      vals[event.detail.index].smiles = "";
+    } else {
+      vals[event.detail.index].sdf = "";
     }
+    if (event.detail.close == true) {
+      vals[event.detail.index].open = false;
+    } else {
+      vals[event.detail.index].open = true;
+    }
+
     dispatch("updateVals", vals);
   }
 
@@ -184,6 +188,7 @@
       sequence: "",
       open: true,
       chain: nextChainLetter,
+      msa: true,
     });
     vals = vals;
     // console.log(vals);
@@ -396,1313 +401,3 @@
   on:addNewChain={insertChain}
   on:addCovalentModification={addCovMod}
 />
-
-<style>
-  /*
-    ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
-    */
-
-  /*
-    1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-    2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-    */
-
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box;
-    /* 1 */
-    border-width: 0;
-    /* 2 */
-    border-style: solid;
-    /* 2 */
-    border-color: #e5e7eb;
-    /* 2 */
-  }
-
-  ::before,
-  ::after {
-    --tw-content: "";
-  }
-
-  /*
-    1. Use a consistent sensible line-height in all browsers.
-    2. Prevent adjustments of font size after orientation changes in iOS.
-    3. Use a more readable tab size.
-    4. Use the user's configured `sans` font-family by default.
-    5. Use the user's configured `sans` font-feature-settings by default.
-    6. Use the user's configured `sans` font-variation-settings by default.
-    7. Disable tap highlights on iOS
-    */
-
-  html,
-  :host {
-    line-height: 1.5;
-    /* 1 */
-    -webkit-text-size-adjust: 100%;
-    /* 2 */
-    -moz-tab-size: 4;
-    /* 3 */
-    tab-size: 4;
-    /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    /* 4 */
-    font-feature-settings: normal;
-    /* 5 */
-    font-variation-settings: normal;
-    /* 6 */
-    -webkit-tap-highlight-color: transparent;
-    /* 7 */
-  }
-
-  /*
-    1. Remove the margin in all browsers.
-    2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-    */
-
-  body {
-    margin: 0;
-    /* 1 */
-    line-height: inherit;
-    /* 2 */
-  }
-
-  /*
-    1. Add the correct height in Firefox.
-    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-    3. Ensure horizontal rules are visible by default.
-    */
-
-  hr {
-    height: 0;
-    /* 1 */
-    color: inherit;
-    /* 2 */
-    border-top-width: 1px;
-    /* 3 */
-  }
-
-  /*
-    Add the correct text decoration in Chrome, Edge, and Safari.
-    */
-
-  abbr:where([title]) {
-    text-decoration: underline dotted;
-  }
-
-  /*
-    Remove the default font size and weight for headings.
-    */
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  /*
-    Reset links to optimize for opt-in styling instead of opt-out.
-    */
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  /*
-    Add the correct font weight in Edge and Safari.
-    */
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /*
-    1. Use the user's configured `mono` font-family by default.
-    2. Use the user's configured `mono` font-feature-settings by default.
-    3. Use the user's configured `mono` font-variation-settings by default.
-    4. Correct the odd `em` font sizing in all browsers.
-    */
-
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
-    /* 1 */
-    font-feature-settings: normal;
-    /* 2 */
-    font-variation-settings: normal;
-    /* 3 */
-    font-size: 1em;
-    /* 4 */
-  }
-
-  /*
-    Add the correct font size in all browsers.
-    */
-
-  small {
-    font-size: 80%;
-  }
-
-  /*
-    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-    */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /*
-    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-    3. Remove gaps between table borders by default.
-    */
-
-  table {
-    text-indent: 0;
-    /* 1 */
-    border-color: inherit;
-    /* 2 */
-    border-collapse: collapse;
-    /* 3 */
-  }
-
-  /*
-    1. Change the font styles in all browsers.
-    2. Remove the margin in Firefox and Safari.
-    3. Remove default padding in all browsers.
-    */
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    /* 1 */
-    font-feature-settings: inherit;
-    /* 1 */
-    font-variation-settings: inherit;
-    /* 1 */
-    font-size: 100%;
-    /* 1 */
-    font-weight: inherit;
-    /* 1 */
-    line-height: inherit;
-    /* 1 */
-    color: inherit;
-    /* 1 */
-    margin: 0;
-    /* 2 */
-    padding: 0;
-    /* 3 */
-  }
-
-  /*
-    Remove the inheritance of text transform in Edge and Firefox.
-    */
-
-  button,
-  select {
-    text-transform: none;
-  }
-
-  /*
-    1. Correct the inability to style clickable types in iOS and Safari.
-    2. Remove default button styles.
-    */
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-    /* 1 */
-    background-color: transparent;
-    /* 2 */
-    background-image: none;
-    /* 2 */
-  }
-
-  /*
-    Use the modern Firefox focus style for all focusable elements.
-    */
-
-  :-moz-focusring {
-    outline: auto;
-  }
-
-  /*
-    Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-    */
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  /*
-    Add the correct vertical alignment in Chrome and Firefox.
-    */
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /*
-    Correct the cursor style of increment and decrement buttons in Safari.
-    */
-
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /*
-    1. Correct the odd appearance in Chrome and Safari.
-    2. Correct the outline style in Safari.
-    */
-
-  [type="search"] {
-    -webkit-appearance: textfield;
-    /* 1 */
-    outline-offset: -2px;
-    /* 2 */
-  }
-
-  /*
-    Remove the inner padding in Chrome and Safari on macOS.
-    */
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /*
-    1. Correct the inability to style clickable types in iOS and Safari.
-    2. Change font properties to `inherit` in Safari.
-    */
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    /* 1 */
-    font: inherit;
-    /* 2 */
-  }
-
-  /*
-    Add the correct display in Chrome and Safari.
-    */
-
-  summary {
-    display: list-item;
-  }
-
-  /*
-    Removes the default spacing and border for appropriate elements.
-    */
-
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-
-  legend {
-    padding: 0;
-  }
-
-  ol,
-  ul,
-  menu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  /*
-    Reset default styling for dialogs.
-    */
-
-  dialog {
-    padding: 0;
-  }
-
-  /*
-    Prevent resizing textareas horizontally by default.
-    */
-
-  textarea {
-    resize: vertical;
-  }
-
-  /*
-    1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-    2. Set the default placeholder color to the user's configured gray 400 color.
-    */
-
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    /* 1 */
-    color: #9ca3af;
-    /* 2 */
-  }
-
-  /*
-    Set the default cursor for buttons.
-    */
-
-  button,
-  [role="button"] {
-    cursor: pointer;
-  }
-
-  /*
-    Make sure disabled buttons don't get the pointer cursor.
-    */
-
-  :disabled {
-    cursor: default;
-  }
-
-  /*
-    1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-    2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-       This can trigger a poorly considered lint error in some tools but is included by design.
-    */
-
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    display: block;
-    /* 1 */
-    vertical-align: middle;
-    /* 2 */
-  }
-
-  /*
-    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-    */
-
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  /* Make elements with the HTML hidden attribute stay hidden by default */
-
-  [hidden] {
-    display: none;
-  }
-
-  *,
-  ::before,
-  ::after {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-  }
-
-  ::backdrop {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  .collapse {
-    visibility: collapse;
-  }
-
-  .absolute {
-    position: absolute;
-  }
-
-  .relative {
-    position: relative;
-  }
-
-  .inset-0 {
-    inset: 0px;
-  }
-
-  .end-0 {
-    inset-inline-end: 0px;
-  }
-
-  .top-0 {
-    top: 0px;
-  }
-
-  .z-10 {
-    z-index: 10;
-  }
-
-  .z-20 {
-    z-index: 20;
-  }
-
-  .mx-10 {
-    margin-left: 2.5rem;
-    margin-right: 2.5rem;
-  }
-
-  .mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .my-2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .my-8 {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-  }
-
-  .mb-10 {
-    margin-bottom: 2.5rem;
-  }
-
-  .mb-2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .ms-2 {
-    margin-inline-start: 0.5rem;
-  }
-
-  .ms-2\.5 {
-    margin-inline-start: 0.625rem;
-  }
-
-  .ms-3 {
-    margin-inline-start: 0.75rem;
-  }
-
-  .mt-1 {
-    margin-top: 0.25rem;
-  }
-
-  .mt-6 {
-    margin-top: 1.5rem;
-  }
-
-  .block {
-    display: block;
-  }
-
-  .inline-block {
-    display: inline-block;
-  }
-
-  .inline {
-    display: inline;
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  .inline-flex {
-    display: inline-flex;
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  .h-10 {
-    height: 2.5rem;
-  }
-
-  .h-2 {
-    height: 0.5rem;
-  }
-
-  .h-2\.5 {
-    height: 0.625rem;
-  }
-
-  .h-3 {
-    height: 0.75rem;
-  }
-
-  .h-4 {
-    height: 1rem;
-  }
-
-  .h-6 {
-    height: 1.5rem;
-  }
-
-  .h-full {
-    height: 100%;
-  }
-
-  .min-h-screen {
-    min-height: 100vh;
-  }
-
-  .w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .w-10 {
-    width: 2.5rem;
-  }
-
-  .w-2 {
-    width: 0.5rem;
-  }
-
-  .w-2\.5 {
-    width: 0.625rem;
-  }
-
-  .w-3 {
-    width: 0.75rem;
-  }
-
-  .w-4 {
-    width: 1rem;
-  }
-
-  .w-44 {
-    width: 11rem;
-  }
-
-  .w-6 {
-    width: 1.5rem;
-  }
-
-  .w-full {
-    width: 100%;
-  }
-
-  .max-w-lg {
-    max-width: 32rem;
-  }
-
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .-rotate-90 {
-    --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .rotate-180 {
-    --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .flex-col {
-    flex-direction: column;
-  }
-
-  .items-center {
-    align-items: center;
-  }
-
-  .justify-center {
-    justify-content: center;
-  }
-
-  .justify-between {
-    justify-content: space-between;
-  }
-
-  .gap-3 {
-    gap: 0.75rem;
-  }
-
-  .space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .divide-y > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-y-reverse: 0;
-    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-  }
-
-  .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(243 244 246 / var(--tw-divide-opacity));
-  }
-
-  .overflow-hidden {
-    overflow: hidden;
-  }
-
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-
-  .rounded-full {
-    border-radius: 9999px;
-  }
-
-  .rounded-lg {
-    border-radius: 0.5rem;
-  }
-
-  .rounded-e-lg {
-    border-start-end-radius: 0.5rem;
-    border-end-end-radius: 0.5rem;
-  }
-
-  .rounded-s-lg {
-    border-start-start-radius: 0.5rem;
-    border-end-start-radius: 0.5rem;
-  }
-
-  .rounded-t-xl {
-    border-top-left-radius: 0.75rem;
-    border-top-right-radius: 0.75rem;
-  }
-
-  .border {
-    border-width: 1px;
-  }
-
-  .border-b-0 {
-    border-bottom-width: 0px;
-  }
-
-  .border-s-2 {
-    border-inline-start-width: 2px;
-  }
-
-  .border-t-0 {
-    border-top-width: 0px;
-  }
-
-  .border-blue-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(29 78 216 / var(--tw-border-opacity));
-  }
-
-  .border-gray-200 {
-    --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity));
-  }
-
-  .border-gray-300 {
-    --tw-border-opacity: 1;
-    border-color: rgb(209 213 219 / var(--tw-border-opacity));
-  }
-
-  .border-s-gray-50 {
-    --tw-border-opacity: 1;
-    border-inline-start-color: rgb(249 250 251 / var(--tw-border-opacity));
-  }
-
-  .bg-blue-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-blue-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  }
-
-  .bg-gray-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
-
-  .bg-gray-50 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  }
-
-  .bg-green-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-  }
-
-  .bg-green-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-  }
-
-  .bg-orange-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 215 170 / var(--tw-bg-opacity));
-  }
-
-  .bg-violet-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(237 233 254 / var(--tw-bg-opacity));
-  }
-
-  .bg-white {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  }
-
-  .bg-yellow-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 249 195 / var(--tw-bg-opacity));
-  }
-
-  .bg-\[url\(\/img\/grid\.svg\)\] {
-    background-image: url(/img/grid.svg);
-  }
-
-  .bg-center {
-    background-position: center;
-  }
-
-  .p-0 {
-    padding: 0px;
-  }
-
-  .p-0\.5 {
-    padding: 0.125rem;
-  }
-
-  .p-1 {
-    padding: 0.25rem;
-  }
-
-  .p-2 {
-    padding: 0.5rem;
-  }
-
-  .p-2\.5 {
-    padding: 0.625rem;
-  }
-
-  .p-5 {
-    padding: 1.25rem;
-  }
-
-  .px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
-  .px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .py-2\.5 {
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-  }
-
-  .py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  .pb-2 {
-    padding-bottom: 0.5rem;
-  }
-
-  .pb-8 {
-    padding-bottom: 2rem;
-  }
-
-  .pt-10 {
-    padding-top: 2.5rem;
-  }
-
-  .text-center {
-    text-align: center;
-  }
-
-  .text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .text-xs {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .font-bold {
-    font-weight: 700;
-  }
-
-  .font-medium {
-    font-weight: 500;
-  }
-
-  .font-semibold {
-    font-weight: 600;
-  }
-
-  .text-blue-800 {
-    --tw-text-opacity: 1;
-    color: rgb(30 64 175);
-  }
-
-  .text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175);
-  }
-
-  .text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128);
-  }
-
-  .text-gray-600 {
-    --tw-text-opacity: 1;
-    color: rgb(75 85 99);
-  }
-
-  .text-gray-700 {
-    --tw-text-opacity: 1;
-    color: rgb(55 65 81);
-  }
-
-  .text-gray-900 {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39);
-  }
-
-  .text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255);
-  }
-
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
-      0 1px 2px -1px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
-      0 8px 10px -6px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .ring-gray-900\/5 {
-    --tw-ring-color: rgb(17 24 39 / 0.05);
-  }
-
-  .sequence_container {
-    overflow-wrap: anywhere;
-    counter-reset: sequence;
-  }
-
-  .sequence_container .sequence__chunk {
-    display: inline-block;
-    margin: 0.1rem 0 1rem 1rem;
-    /* width: 10ch; */
-    position: relative;
-    white-space: nowrap;
-  }
-
-  .sequence_container .sequence__chunk:not(:last-child):before,
-  .sequence_container .sequence__chunk--display-last:before {
-    content: counter(sequence);
-    counter-increment: sequence 10;
-    position: absolute;
-    top: -0.8em;
-    right: 0;
-    opacity: 0.5;
-    font-weight: bold;
-  }
-
-  .sequence-container .sequence__chunk::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transform-origin: left;
-    transform: scaleX(0.1);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sequence__chunk span {
-    padding: 0 0.05rem;
-  }
-
-  .hover\:bg-blue-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-  }
-
-  .hover\:bg-gray-100:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
-
-  .hover\:bg-gray-200:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-  }
-
-  .hover\:font-bold:hover {
-    font-weight: 700;
-  }
-
-  .focus\:border-blue-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-  }
-
-  .focus\:outline-none:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .focus\:ring-4:focus {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .focus\:ring-blue-300:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-blue-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-gray-100:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
-  }
-
-  .focus\:ring-gray-200:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-  }
-
-  @media (min-width: 640px) {
-    .sm\:mx-auto {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .sm\:rounded-lg {
-      border-radius: 0.5rem;
-    }
-
-    .sm\:px-10 {
-      padding-left: 2.5rem;
-      padding-right: 2.5rem;
-    }
-
-    .sm\:py-12 {
-      padding-top: 3rem;
-      padding-bottom: 3rem;
-    }
-  }
-
-  .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
-    text-align: right;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .dark\:border-gray-600 {
-      --tw-border-opacity: 1;
-      border-color: rgb(75 85 99 / var(--tw-border-opacity));
-    }
-
-    .dark\:border-gray-700 {
-      --tw-border-opacity: 1;
-      border-color: rgb(55 65 81 / var(--tw-border-opacity));
-    }
-
-    .dark\:border-s-gray-700 {
-      --tw-border-opacity: 1;
-      border-inline-start-color: rgb(55 65 81 / var(--tw-border-opacity));
-    }
-
-    .dark\:bg-blue-600 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-600 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-700 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-    }
-
-    .dark\:bg-gray-900 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-    }
-
-    .dark\:text-gray-200 {
-      --tw-text-opacity: 1;
-      color: rgb(229 231 235);
-    }
-
-    .dark\:text-gray-300 {
-      --tw-text-opacity: 1;
-      color: rgb(209 213 219);
-    }
-
-    .dark\:text-gray-400 {
-      --tw-text-opacity: 1;
-      color: rgb(156 163 175);
-    }
-
-    .dark\:text-white {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255);
-    }
-
-    .dark\:placeholder-gray-400::placeholder {
-      --tw-placeholder-opacity: 1;
-      color: rgb(156 163 175 / var(--tw-placeholder-opacity));
-    }
-
-    .dark\:hover\:bg-blue-700:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:bg-gray-600:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:bg-gray-800:hover {
-      --tw-bg-opacity: 1;
-      background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-    }
-
-    .dark\:hover\:text-white:hover {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255);
-    }
-
-    .dark\:focus\:border-blue-500:focus {
-      --tw-border-opacity: 1;
-      border-color: rgb(59 130 246 / var(--tw-border-opacity));
-    }
-
-    .dark\:focus\:ring-blue-500:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-blue-800:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-gray-700:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-    }
-
-    .dark\:focus\:ring-gray-800:focus {
-      --tw-ring-opacity: 1;
-      --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-    }
-  }
-</style>

src/frontend/shared/Textbox.svelte

@@ -1,341 +1,271 @@
 <script lang="ts">
-	import {
-		beforeUpdate,
-		afterUpdate,
-		createEventDispatcher,
-		tick
-	} from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
-	import { Copy, Check } from "@gradio/icons";
-	import { fade } from "svelte/transition";
-	import type { SelectData } from "@gradio/utils";
+  import {
+    beforeUpdate,
+    afterUpdate,
+    createEventDispatcher,
+    tick,
+  } from "svelte";
+  import { BlockTitle } from "@gradio/atoms";
+  import { Copy, Check } from "@gradio/icons";
+  import { fade } from "svelte/transition";
+  import type { SelectData } from "@gradio/utils";
 
-	export let value = "";
-	export let value_is_output = false;
-	export let lines = 1;
-	export let placeholder = "Type here...";
-	export let label: string;
-	export let info: string | undefined = undefined;
-	export let disabled = false;
-	export let show_label = true;
-	export let container = true;
-	export let max_lines: number;
-	export let type: "text" | "password" | "email" = "text";
-	export let show_copy_button = false;
-	export let rtl = false;
-	export let autofocus = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-	export let autoscroll = true;
+  export let value = "";
+  export let value_is_output = false;
+  export let lines = 1;
+  export let placeholder = "Type here...";
+  export let label: string;
+  export let info: string | undefined = undefined;
+  export let disabled = false;
+  export let show_label = true;
+  export let container = true;
+  export let max_lines: number;
+  export let type: "text" | "password" | "email" = "text";
+  export let show_copy_button = false;
+  export let rtl = false;
+  export let autofocus = false;
+  export let text_align: "left" | "right" | undefined = undefined;
+  export let autoscroll = true;
 
-	let el: HTMLTextAreaElement | HTMLInputElement;
-	let copied = false;
-	let timer: NodeJS.Timeout;
-	let can_scroll: boolean;
-	let previous_scroll_top = 0;
-	let user_has_scrolled_up = false;
+  let el: HTMLTextAreaElement | HTMLInputElement;
+  let copied = false;
+  let timer: NodeJS.Timeout;
+  let can_scroll: boolean;
+  let previous_scroll_top = 0;
+  let user_has_scrolled_up = false;
 
-	$: value, el && lines !== max_lines && resize({ target: el });
+  $: value, el && lines !== max_lines && resize({ target: el });
 
-	$: if (value === null) value = "";
+  $: if (value === null) value = "";
 
-	const dispatch = createEventDispatcher<{
-		change: string;
-		submit: undefined;
-		blur: undefined;
-		select: SelectData;
-		input: undefined;
-		focus: undefined;
-	}>();
+  const dispatch = createEventDispatcher<{
+    change: string;
+    submit: undefined;
+    blur: undefined;
+    select: SelectData;
+    input: undefined;
+    focus: undefined;
+  }>();
 
-	beforeUpdate(() => {
-		can_scroll = el && el.offsetHeight + el.scrollTop > el.scrollHeight - 100;
-	});
+  beforeUpdate(() => {
+    can_scroll = el && el.offsetHeight + el.scrollTop > el.scrollHeight - 100;
+  });
 
-	const scroll = (): void => {
-		if (can_scroll && autoscroll && !user_has_scrolled_up) {
-			el.scrollTo(0, el.scrollHeight);
-		}
-	};
+  const scroll = (): void => {
+    if (can_scroll && autoscroll && !user_has_scrolled_up) {
+      el.scrollTo(0, el.scrollHeight);
+    }
+  };
 
-	function handle_change(): void {
-		dispatch("change", value);
-		if (!value_is_output) {
-			dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		if (autofocus) {
-			el.focus();
-		}
-		if (can_scroll && autoscroll) {
-			scroll();
-		}
-		value_is_output = false;
-	});
-	$: value, handle_change();
+  function handle_change(): void {
+    dispatch("change", value);
+    if (!value_is_output) {
+      dispatch("input");
+    }
+  }
+  afterUpdate(() => {
+    if (autofocus) {
+      el.focus();
+    }
+    if (can_scroll && autoscroll) {
+      scroll();
+    }
+    value_is_output = false;
+  });
+  $: value, handle_change();
 
-	async function handle_copy(): Promise<void> {
-		if ("clipboard" in navigator) {
-			await navigator.clipboard.writeText(value);
-			copy_feedback();
-		}
-	}
+  async function handle_copy(): Promise<void> {
+    if ("clipboard" in navigator) {
+      await navigator.clipboard.writeText(value);
+      copy_feedback();
+    }
+  }
 
-	function copy_feedback(): void {
-		copied = true;
-		if (timer) clearTimeout(timer);
-		timer = setTimeout(() => {
-			copied = false;
-		}, 1000);
-	}
+  function copy_feedback(): void {
+    copied = true;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      copied = false;
+    }, 1000);
+  }
 
-	function handle_select(event: Event): void {
-		const target: HTMLTextAreaElement | HTMLInputElement = event.target as
-			| HTMLTextAreaElement
-			| HTMLInputElement;
-		const text = target.value;
-		const index: [number, number] = [
-			target.selectionStart as number,
-			target.selectionEnd as number
-		];
-		dispatch("select", { value: text.substring(...index), index: index });
-	}
+  function handle_select(event: Event): void {
+    const target: HTMLTextAreaElement | HTMLInputElement = event.target as
+      | HTMLTextAreaElement
+      | HTMLInputElement;
+    const text = target.value;
+    const index: [number, number] = [
+      target.selectionStart as number,
+      target.selectionEnd as number,
+    ];
+    dispatch("select", { value: text.substring(...index), index: index });
+  }
 
-	async function handle_keypress(e: KeyboardEvent): Promise<void> {
-		await tick();
-		if (e.key === "Enter" && e.shiftKey && lines > 1) {
-			e.preventDefault();
-			dispatch("submit");
-		} else if (
-			e.key === "Enter" &&
-			!e.shiftKey &&
-			lines === 1 &&
-			max_lines >= 1
-		) {
-			e.preventDefault();
-			dispatch("submit");
-		}
-	}
+  async function handle_keypress(e: KeyboardEvent): Promise<void> {
+    await tick();
+    if (e.key === "Enter" && e.shiftKey && lines > 1) {
+      e.preventDefault();
+      dispatch("submit");
+    } else if (
+      e.key === "Enter" &&
+      !e.shiftKey &&
+      lines === 1 &&
+      max_lines >= 1
+    ) {
+      e.preventDefault();
+      dispatch("submit");
+    }
+  }
 
-	function handle_scroll(event: Event): void {
-		const target = event.target as HTMLElement;
-		const current_scroll_top = target.scrollTop;
-		if (current_scroll_top < previous_scroll_top) {
-			user_has_scrolled_up = true;
-		}
-		previous_scroll_top = current_scroll_top;
+  function handle_scroll(event: Event): void {
+    const target = event.target as HTMLElement;
+    const current_scroll_top = target.scrollTop;
+    if (current_scroll_top < previous_scroll_top) {
+      user_has_scrolled_up = true;
+    }
+    previous_scroll_top = current_scroll_top;
 
-		const max_scroll_top = target.scrollHeight - target.clientHeight;
-		const user_has_scrolled_to_bottom = current_scroll_top >= max_scroll_top;
-		if (user_has_scrolled_to_bottom) {
-			user_has_scrolled_up = false;
-		}
-	}
+    const max_scroll_top = target.scrollHeight - target.clientHeight;
+    const user_has_scrolled_to_bottom = current_scroll_top >= max_scroll_top;
+    if (user_has_scrolled_to_bottom) {
+      user_has_scrolled_up = false;
+    }
+  }
 
-	async function resize(
-		event: Event | { target: HTMLTextAreaElement | HTMLInputElement }
-	): Promise<void> {
-		await tick();
-		if (lines === max_lines) return;
+  async function resize(
+    event: Event | { target: HTMLTextAreaElement | HTMLInputElement }
+  ): Promise<void> {
+    await tick();
+    if (lines === max_lines) return;
 
-		let max =
-			max_lines === undefined
-				? false
-				: max_lines === undefined // default
-				? 21 * 11
-				: 21 * (max_lines + 1);
-		let min = 21 * (lines + 1);
+    let max =
+      max_lines === undefined
+        ? false
+        : max_lines === undefined // default
+          ? 21 * 11
+          : 21 * (max_lines + 1);
+    let min = 21 * (lines + 1);
 
-		const target = event.target as HTMLTextAreaElement;
-		target.style.height = "1px";
+    const target = event.target as HTMLTextAreaElement;
+    target.style.height = "1px";
 
-		let scroll_height;
-		if (max && target.scrollHeight > max) {
-			scroll_height = max;
-		} else if (target.scrollHeight < min) {
-			scroll_height = min;
-		} else {
-			scroll_height = target.scrollHeight;
-		}
+    let scroll_height;
+    if (max && target.scrollHeight > max) {
+      scroll_height = max;
+    } else if (target.scrollHeight < min) {
+      scroll_height = min;
+    } else {
+      scroll_height = target.scrollHeight;
+    }
 
-		target.style.height = `${scroll_height}px`;
-	}
+    target.style.height = `${scroll_height}px`;
+  }
 
-	function text_area_resize(
-		_el: HTMLTextAreaElement,
-		_value: string
-	): any | undefined {
-		if (lines === max_lines) return;
-		_el.style.overflowY = "scroll";
-		_el.addEventListener("input", resize);
+  function text_area_resize(
+    _el: HTMLTextAreaElement,
+    _value: string
+  ): any | undefined {
+    if (lines === max_lines) return;
+    _el.style.overflowY = "scroll";
+    _el.addEventListener("input", resize);
 
-		if (!_value.trim()) return;
-		resize({ target: _el });
+    if (!_value.trim()) return;
+    resize({ target: _el });
 
-		return {
-			destroy: () => _el.removeEventListener("input", resize)
-		};
-	}
+    return {
+      destroy: () => _el.removeEventListener("input", resize),
+    };
+  }
 </script>
 
 <!-- svelte-ignore a11y-autofocus -->
 <label class:container>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+  <BlockTitle {show_label} {info}>{label}</BlockTitle>
 
-	{#if lines === 1 && max_lines === 1}
-		{#if type === "text"}
-			<input
-				data-testid="textbox"
-				type="text"
-				class="scroll-hide"
-				dir={rtl ? "rtl" : "ltr"}
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				style={text_align ? "text-align: " + text_align : ""}
-			/>
-		{:else if type === "password"}
-			<input
-				data-testid="password"
-				type="password"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete=""
-			/>
-		{:else if type === "email"}
-			<input
-				data-testid="textbox"
-				type="email"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete="email"
-			/>
-		{/if}
-	{:else}
-		{#if show_label && show_copy_button}
-			{#if copied}
-				<button
-					in:fade={{ duration: 300 }}
-					aria-label="Copied"
-					aria-roledescription="Text copied"><Check /></button
-				>
-			{:else}
-				<button
-					on:click={handle_copy}
-					aria-label="Copy"
-					aria-roledescription="Copy text"><Copy /></button
-				>
-			{/if}
-		{/if}
-		<textarea
-			data-testid="textbox"
-			use:text_area_resize={value}
-			class="scroll-hide"
-			dir={rtl ? "rtl" : "ltr"}
-			bind:value
-			bind:this={el}
-			{placeholder}
-			rows={lines}
-			{disabled}
-			{autofocus}
-			on:keypress={handle_keypress}
-			on:blur
-			on:select={handle_select}
-			on:focus
-			on:scroll={handle_scroll}
-			style={text_align ? "text-align: " + text_align : ""}
-		/>
-	{/if}
+  {#if lines === 1 && max_lines === 1}
+    {#if type === "text"}
+      <input
+        data-testid="textbox"
+        type="text"
+        class="scroll-hide"
+        dir={rtl ? "rtl" : "ltr"}
+        bind:value
+        bind:this={el}
+        {placeholder}
+        {disabled}
+        {autofocus}
+        on:keypress={handle_keypress}
+        on:blur
+        on:select={handle_select}
+        on:focus
+        style={text_align ? "text-align: " + text_align : ""}
+      />
+    {:else if type === "password"}
+      <input
+        data-testid="password"
+        type="password"
+        class="scroll-hide"
+        bind:value
+        bind:this={el}
+        {placeholder}
+        {disabled}
+        {autofocus}
+        on:keypress={handle_keypress}
+        on:blur
+        on:select={handle_select}
+        on:focus
+        autocomplete=""
+      />
+    {:else if type === "email"}
+      <input
+        data-testid="textbox"
+        type="email"
+        class="scroll-hide"
+        bind:value
+        bind:this={el}
+        {placeholder}
+        {disabled}
+        {autofocus}
+        on:keypress={handle_keypress}
+        on:blur
+        on:select={handle_select}
+        on:focus
+        autocomplete="email"
+      />
+    {/if}
+  {:else}
+    {#if show_label && show_copy_button}
+      {#if copied}
+        <button
+          in:fade={{ duration: 300 }}
+          aria-label="Copied"
+          aria-roledescription="Text copied"><Check /></button
+        >
+      {:else}
+        <button
+          on:click={handle_copy}
+          aria-label="Copy"
+          aria-roledescription="Copy text"><Copy /></button
+        >
+      {/if}
+    {/if}
+    <textarea
+      data-testid="textbox"
+      use:text_area_resize={value}
+      class="scroll-hide"
+      dir={rtl ? "rtl" : "ltr"}
+      bind:value
+      bind:this={el}
+      {placeholder}
+      rows={lines}
+      {disabled}
+      {autofocus}
+      on:keypress={handle_keypress}
+      on:blur
+      on:select={handle_select}
+      on:focus
+      on:scroll={handle_scroll}
+      style={text_align ? "text-align: " + text_align : ""}
+    />
+  {/if}
 </label>
-
-<style>
-	label {
-		display: block;
-		width: 100%;
-	}
-
-	input,
-	textarea {
-		display: block;
-		position: relative;
-		outline: none !important;
-		box-shadow: var(--input-shadow);
-		background: var(--input-background-fill);
-		padding: var(--input-padding);
-		width: 100%;
-		color: var(--body-text-color);
-		font-weight: var(--input-text-weight);
-		font-size: var(--input-text-size);
-		line-height: var(--line-sm);
-		border: none;
-	}
-	label:not(.container),
-	label:not(.container) > input,
-	label:not(.container) > textarea {
-		height: 100%;
-	}
-	.container > input,
-	.container > textarea {
-		border: var(--input-border-width) solid var(--input-border-color);
-		border-radius: var(--input-radius);
-	}
-	input:disabled,
-	textarea:disabled {
-		-webkit-text-fill-color: var(--body-text-color);
-		-webkit-opacity: 1;
-		opacity: 1;
-	}
-
-	input:focus,
-	textarea:focus {
-		box-shadow: var(--input-shadow-focus);
-		border-color: var(--input-border-color-focus);
-	}
-
-	input::placeholder,
-	textarea::placeholder {
-		color: var(--input-placeholder-color);
-	}
-	button {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--color-border-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-		overflow: hidden;
-		color: var(--block-label-color);
-		font: var(--font-sans);
-		font-size: var(--button-small-text-size);
-	}
-</style>

src/frontend/style.css

@@ -0,0 +1,4 @@
+@config "./tailwind.config.js";
+
+
+@import "tailwindcss";

src/frontend/tailwind.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  important: true,
+}

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_cofoldinginput"
-version = "0.0.7"
+version = "0.0.8"
 description = "Component to enter protein and DNA sequences + small molecules for cofolding"
 readme = "README.md"
 license = "MIT"