Upload folder using huggingface_hub

Dockerfile

@@ -0,0 +1,16 @@
+
+FROM python:3.9
+
+WORKDIR /code
+
+COPY --link --chown=1000 . .
+
+RUN mkdir -p /tmp/cache/
+RUN chmod a+rwx -R /tmp/cache/
+ENV TRANSFORMERS_CACHE=/tmp/cache/
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+ENV PYTHONUNBUFFERED=1 	GRADIO_ALLOW_FLAGGING=never 	GRADIO_NUM_PORTS=1 	GRADIO_SERVER_NAME=0.0.0.0     GRADIO_SERVER_PORT=7860 	SYSTEM=spaces
+
+CMD ["python", "space.py"]

README.md

@@ -1,10 +1,17 @@
+
 ---
-title: Gradio Cofoldinginput
-emoji: ⚡
+tags: [gradio-custom-component,gradio-template-Textbox]
+title: gradio_cofoldinginput V0.0.2
 colorFrom: yellow
-colorTo: purple
+colorTo: pink
 sdk: docker
 pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Name: gradio_cofoldinginput
+
+Description: Component to enter protein and DNA sequences + small molecules for cofolding
+
+Install with: pip install gradio_cofoldinginput

app.py

@@ -0,0 +1,30 @@
+
+import gradio as gr
+from gradio_cofoldinginput import CofoldingInput
+
+import json
+
+
+def predict(input):
+    input = json.dumps(input)
+    return input
+
+with gr.Blocks() as demo:
+    inp=CofoldingInput(label="Input")
+
+    # preinput =  {"chains": [
+    #     {
+    #         "class": "DNA",
+    #         "sequence": "ATGCGT",
+    #         "chain": "A"
+    #     }
+    # ], "covMods":[]
+    # }
+    # inp2=CofoldingInput(preinput, label="Input prefilled")
+    btn = gr.Button("Submit")
+    out = gr.HTML()
+
+    btn.click(predict, inputs=[inp], outputs=[out])
+
+if __name__ == "__main__":
+    demo.launch()

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

heme.json

@@ -0,0 +1 @@
+{"m":[{"a":[{"x":-2.161,"y":-0.125,"z":0.49},{"x":1.458,"y":-3.419,"z":0.306},{"x":4.701,"y":0.169,"z":-0.069},{"x":1.075,"y":3.46,"z":0.018},{"x":-1.436,"y":-1.305,"z":0.38},{"x":-2.015,"y":-2.587,"z":0.32},{"x":-1.009,"y":-3.5,"z":0.27},{"x":0.216,"y":-2.803,"z":0.298},{"x":-1.175,"y":-4.996,"z":0.197},{"x":-3.49,"y":-2.893,"z":0.314},{"x":-3.998,"y":-2.926,"z":-1.129},{"x":-5.473,"y":-3.232,"z":-1.136},{"x":-6.059,"y":-3.405,"z":-0.094,"l":"O"},{"x":-6.137,"y":-3.311,"z":-2.3,"l":"O"},{"x":2.664,"y":-2.707,"z":0.308},{"x":3.937,"y":-3.328,"z":0.418},{"x":4.874,"y":-2.341,"z":0.314},{"x":4.117,"y":-1.079,"z":0.139},{"x":4.203,"y":-4.798,"z":0.613},{"x":6.339,"y":-2.497,"z":0.365},{"x":6.935,"y":-3.419,"z":-0.385},{"x":3.964,"y":1.345,"z":-0.174},{"x":4.531,"y":2.601,"z":-0.445},{"x":3.51,"y":3.536,"z":-0.437},{"x":2.304,"y":2.846,"z":-0.139},{"x":5.991,"y":2.88,"z":-0.697},{"x":3.649,"y":4.981,"z":-0.692},{"x":4.201,"y":5.407,"z":-1.823},{"x":-0.102,"y":2.753,"z":0.298},{"x":-1.382,"y":3.388,"z":0.641},{"x":-2.283,"y":2.389,"z":0.774},{"x":-1.561,"y":1.137,"z":0.511},{"x":-1.639,"y":4.863,"z":0.811},{"x":-3.741,"y":2.532,"z":1.123},{"x":-4.573,"y":2.563,"z":-0.16},{"x":-6.032,"y":2.706,"z":0.189},{"x":-6.372,"y":2.776,"z":1.347,"l":"O"},{"x":-6.954,"y":2.755,"z":-0.785,"l":"O"},{"x":-0.068,"y":-1.456,"z":0.321,"l":"N"},{"x":2.82,"y":-1.386,"z":0.207,"l":"N"},{"x":2.604,"y":1.506,"z":-0.033,"l":"N"},{"x":-0.276,"y":1.431,"z":0.298,"l":"N"},{"x":1.01,"y":0.157,"z":-0.06,"l":"Fe"},{"x":1.498,"y":-4.508,"z":0.309,"l":"H"},{"x":5.786,"y":0.229,"z":-0.153,"l":"H"},{"x":1.018,"y":4.543,"z":-0.083,"l":"H"},{"x":-1.22,"y":-5.306,"z":-0.847,"l":"H"},{"x":-0.328,"y":-5.48,"z":0.683,"l":"H"},{"x":-2.097,"y":-5.285,"z":0.702,"l":"H"},{"x":-3.662,"y":-3.862,"z":0.782,"l":"H"},{"x":-4.024,"y":-2.121,"z":0.869,"l":"H"},{"x":-3.825,"y":-1.956,"z":-1.597,"l":"H"},{"x":-3.464,"y":-3.697,"z":-1.684,"l":"H"},{"x":3.256,"y":-5.336,"z":0.66,"l":"H"},{"x":4.794,"y":-5.175,"z":-0.222,"l":"H"},{"x":4.752,"y":-4.948,"z":1.543,"l":"H"},{"x":6.927,"y":-1.863,"z":1.011,"l":"H"},{"x":7.994,"y":-3.6,"z":-0.277,"l":"H"},{"x":6.36,"y":-3.987,"z":-1.102,"l":"H"},{"x":6.554,"y":1.949,"z":-0.639,"l":"H"},{"x":6.11,"y":3.316,"z":-1.689,"l":"H"},{"x":6.362,"y":3.578,"z":0.053,"l":"H"},{"x":3.303,"y":5.694,"z":0.042,"l":"H"},{"x":4.614,"y":4.696,"z":-2.523,"l":"H"},{"x":4.235,"y":6.464,"z":-2.043,"l":"H"},{"x":-0.715,"y":5.415,"z":0.639,"l":"H"},{"x":-2.394,"y":5.185,"z":0.094,"l":"H"},{"x":-1.994,"y":5.055,"z":1.824,"l":"H"},{"x":-4.052,"y":1.687,"z":1.738,"l":"H"},{"x":-3.893,"y":3.459,"z":1.677,"l":"H"},{"x":-4.262,"y":3.408,"z":-0.775,"l":"H"},{"x":-4.421,"y":1.636,"z":-0.714,"l":"H"},{"x":-7.082,"y":-3.51,"z":-2.254,"l":"H"},{"x":-7.877,"y":2.847,"z":-0.512,"l":"H"},{"x":-3.246,"y":-0.188,"z":0.567,"l":"H"}],"b":[{"b":0,"e":4},{"b":0,"e":31,"o":2},{"b":0,"e":74},{"b":1,"e":7},{"b":1,"e":14,"o":2},{"b":1,"e":43},{"b":2,"e":17},{"b":2,"e":21,"o":2},{"b":2,"e":44},{"b":3,"e":24,"o":2},{"b":3,"e":28},{"b":3,"e":45},{"b":4,"e":5,"o":2},{"b":4,"e":38},{"b":5,"e":6},{"b":5,"e":9},{"b":6,"e":7,"o":2},{"b":6,"e":8},{"b":7,"e":38},{"b":8,"e":46},{"b":8,"e":47},{"b":8,"e":48},{"b":9,"e":10},{"b":9,"e":49},{"b":9,"e":50},{"b":10,"e":11},{"b":10,"e":51},{"b":10,"e":52},{"b":11,"e":12,"o":2},{"b":11,"e":13},{"b":13,"e":72},{"b":14,"e":15},{"b":14,"e":39},{"b":15,"e":16,"o":2},{"b":15,"e":18},{"b":16,"e":17},{"b":16,"e":19},{"b":17,"e":39,"o":2},{"b":18,"e":53},{"b":18,"e":54},{"b":18,"e":55},{"b":19,"e":20,"o":2},{"b":19,"e":56},{"b":20,"e":57},{"b":20,"e":58},{"b":21,"e":22},{"b":21,"e":40},{"b":22,"e":23,"o":2},{"b":22,"e":25},{"b":23,"e":24},{"b":23,"e":26},{"b":24,"e":40},{"b":25,"e":59},{"b":25,"e":60},{"b":25,"e":61},{"b":26,"e":27,"o":2},{"b":26,"e":62},{"b":27,"e":63},{"b":27,"e":64},{"b":28,"e":29},{"b":28,"e":41,"o":2},{"b":29,"e":30,"o":2},{"b":29,"e":32},{"b":30,"e":31},{"b":30,"e":33},{"b":31,"e":41},{"b":32,"e":65},{"b":32,"e":66},{"b":32,"e":67},{"b":33,"e":34},{"b":33,"e":68},{"b":33,"e":69},{"b":34,"e":35},{"b":34,"e":70},{"b":34,"e":71},{"b":35,"e":36,"o":2},{"b":35,"e":37},{"b":37,"e":73},{"b":38,"e":42},{"b":39,"e":42},{"b":40,"e":42},{"b":41,"e":42}]}]}

heme.sdf

@@ -0,0 +1,163 @@
+
+ OpenBabel03282415433D
+
+ 75 82  0  0  0  0  0  0  0  0999 V2000
+   -2.1610   -0.1250    0.4900 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.4580   -3.4190    0.3060 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.7010    0.1690   -0.0690 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.0750    3.4600    0.0180 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.4360   -1.3050    0.3800 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.0150   -2.5870    0.3200 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.0090   -3.5000    0.2700 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2160   -2.8030    0.2980 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.1750   -4.9960    0.1970 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.4900   -2.8930    0.3140 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.9980   -2.9260   -1.1290 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -5.4730   -3.2320   -1.1360 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.0590   -3.4050   -0.0940 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.1370   -3.3110   -2.3000 O   0  0  0  0  0  0  0  0  0  0  0  0
+    2.6640   -2.7070    0.3080 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.9370   -3.3280    0.4180 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.8740   -2.3410    0.3140 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.1170   -1.0790    0.1390 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.2030   -4.7980    0.6130 C   0  0  0  0  0  0  0  0  0  0  0  0
+    6.3390   -2.4970    0.3650 C   0  0  0  0  0  0  0  0  0  0  0  0
+    6.9350   -3.4190   -0.3850 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.9640    1.3450   -0.1740 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.5310    2.6010   -0.4450 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.5100    3.5360   -0.4370 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.3040    2.8460   -0.1390 C   0  0  0  0  0  0  0  0  0  0  0  0
+    5.9910    2.8800   -0.6970 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.6490    4.9810   -0.6920 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.2010    5.4070   -1.8230 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1020    2.7530    0.2980 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.3820    3.3880    0.6410 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.2830    2.3890    0.7740 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.5610    1.1370    0.5110 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.6390    4.8630    0.8110 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.7410    2.5320    1.1230 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.5730    2.5630   -0.1600 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.0320    2.7060    0.1890 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.3720    2.7760    1.3470 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.9540    2.7550   -0.7850 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0680   -1.4560    0.3210 N   0  0  0  0  0  0  0  0  0  0  0  0
+    2.8200   -1.3860    0.2070 N   0  0  0  0  0  4  0  0  0  0  0  0
+    2.6040    1.5060   -0.0330 N   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.2760    1.4310    0.2980 N   0  0  0  0  0  4  0  0  0  0  0  0
+    1.0100    0.1570   -0.0600 Fe  0  0  1  0  0  0  0  0  0  0  0  0
+    1.4980   -4.5080    0.3090 H   0  0  0  0  0  0  0  0  0  0  0  0
+    5.7860    0.2290   -0.1530 H   0  0  0  0  0  0  0  0  0  0  0  0
+    1.0180    4.5430   -0.0830 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.2200   -5.3060   -0.8470 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.3280   -5.4800    0.6830 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.0970   -5.2850    0.7020 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.6620   -3.8620    0.7820 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.0240   -2.1210    0.8690 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.8250   -1.9560   -1.5970 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.4640   -3.6970   -1.6840 H   0  0  0  0  0  0  0  0  0  0  0  0
+    3.2560   -5.3360    0.6600 H   0  0  0  0  0  0  0  0  0  0  0  0
+    4.7940   -5.1750   -0.2220 H   0  0  0  0  0  0  0  0  0  0  0  0
+    4.7520   -4.9480    1.5430 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.9270   -1.8630    1.0110 H   0  0  0  0  0  0  0  0  0  0  0  0
+    7.9940   -3.6000   -0.2770 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.3600   -3.9870   -1.1020 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.5540    1.9490   -0.6390 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.1100    3.3160   -1.6890 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.3620    3.5780    0.0530 H   0  0  0  0  0  0  0  0  0  0  0  0
+    3.3030    5.6940    0.0420 H   0  0  0  0  0  0  0  0  0  0  0  0
+    4.6140    4.6960   -2.5230 H   0  0  0  0  0  0  0  0  0  0  0  0
+    4.2350    6.4640   -2.0430 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.7150    5.4150    0.6390 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.3940    5.1850    0.0940 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.9940    5.0550    1.8240 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.0520    1.6870    1.7380 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.8930    3.4590    1.6770 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.2620    3.4080   -0.7750 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.4210    1.6360   -0.7140 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -7.0820   -3.5100   -2.2540 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -7.8770    2.8470   -0.5120 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.2460   -0.1880    0.5670 H   0  0  0  0  0  0  0  0  0  0  0  0
+  1  5  1  0  0  0  0
+  1 32  2  0  0  0  0
+  1 75  1  0  0  0  0
+  2  8  1  0  0  0  0
+  2 15  2  0  0  0  0
+  2 44  1  0  0  0  0
+  3 18  1  0  0  0  0
+  3 22  2  0  0  0  0
+  3 45  1  0  0  0  0
+  4 25  2  0  0  0  0
+  4 29  1  0  0  0  0
+  4 46  1  0  0  0  0
+  5  6  2  0  0  0  0
+  5 39  1  0  0  0  0
+  6  7  1  0  0  0  0
+  6 10  1  0  0  0  0
+  7  8  2  0  0  0  0
+  7  9  1  0  0  0  0
+  8 39  1  0  0  0  0
+  9 47  1  0  0  0  0
+  9 48  1  0  0  0  0
+  9 49  1  0  0  0  0
+ 10 11  1  0  0  0  0
+ 10 50  1  0  0  0  0
+ 10 51  1  0  0  0  0
+ 11 12  1  0  0  0  0
+ 11 52  1  0  0  0  0
+ 11 53  1  0  0  0  0
+ 12 13  2  0  0  0  0
+ 12 14  1  0  0  0  0
+ 14 73  1  0  0  0  0
+ 15 16  1  0  0  0  0
+ 15 40  1  0  0  0  0
+ 16 17  2  0  0  0  0
+ 16 19  1  0  0  0  0
+ 17 18  1  0  0  0  0
+ 17 20  1  0  0  0  0
+ 18 40  2  0  0  0  0
+ 19 54  1  0  0  0  0
+ 19 55  1  0  0  0  0
+ 19 56  1  0  0  0  0
+ 20 21  2  0  0  0  0
+ 20 57  1  0  0  0  0
+ 21 58  1  0  0  0  0
+ 21 59  1  0  0  0  0
+ 22 23  1  0  0  0  0
+ 22 41  1  0  0  0  0
+ 23 24  2  0  0  0  0
+ 23 26  1  0  0  0  0
+ 24 25  1  0  0  0  0
+ 24 27  1  0  0  0  0
+ 25 41  1  0  0  0  0
+ 26 60  1  0  0  0  0
+ 26 61  1  0  0  0  0
+ 26 62  1  0  0  0  0
+ 27 28  2  0  0  0  0
+ 27 63  1  0  0  0  0
+ 28 64  1  0  0  0  0
+ 28 65  1  0  0  0  0
+ 29 30  1  0  0  0  0
+ 29 42  2  0  0  0  0
+ 30 31  2  0  0  0  0
+ 30 33  1  0  0  0  0
+ 31 32  1  0  0  0  0
+ 31 34  1  0  0  0  0
+ 32 42  1  0  0  0  0
+ 33 66  1  0  0  0  0
+ 33 67  1  0  0  0  0
+ 33 68  1  0  0  0  0
+ 34 35  1  0  0  0  0
+ 34 69  1  0  0  0  0
+ 34 70  1  0  0  0  0
+ 35 36  1  0  0  0  0
+ 35 71  1  0  0  0  0
+ 35 72  1  0  0  0  0
+ 36 37  2  0  0  0  0
+ 36 38  1  0  0  0  0
+ 38 74  1  0  0  0  0
+ 40 43  1  0  0  0  0
+ 41 43  1  0  0  0  0
+ 42 43  1  0  0  0  0
+ 43 39  1  6  0  0  0
+M  END
+$$$$

requirements.txt

@@ -0,0 +1 @@
+gradio_cofoldinginput-0.0.2-py3-none-any.whl

space.py

@@ -0,0 +1,151 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'CofoldingInput': {'description': 'Creates a textarea for user to enter string input or display string output.\n', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': '{"chains": [], "covMods": []}', 'description': 'list of items.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': 'additional component description.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'autofocus': {'type': 'bool', 'default': 'False', 'description': 'If True, will focus on the textbox when the page loads. Use this carefully, as it can cause usability issues for sighted and non-sighted users.'}, 'autoscroll': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {'value': {'type': 'dict | None', 'description': 'Expects a {str} returned from function and sets textarea value to it.'}}, 'preprocess': {}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CofoldingInput changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the CofoldingInput.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the CofoldingInput. Uses event data gradio.SelectData to carry `value` referring to the label of the CofoldingInput, and `selected` to refer to state of the CofoldingInput. See EventData documentation on how to use this event data'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the CofoldingInput is focused.'}, 'focus': {'type': None, 'default': None, 'description': 'This listener is triggered when the CofoldingInput is focused.'}, 'blur': {'type': None, 'default': None, 'description': 'This listener is triggered when the CofoldingInput is unfocused/blurred.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CofoldingInput': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_cofoldinginput`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.2%20-%20orange">  
+</div>
+
+Component to enter protein and DNA sequences + small molecules for cofolding
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_cofoldinginput
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_cofoldinginput import CofoldingInput
+
+import json
+
+
+def predict(input):
+    input = json.dumps(input)
+    return input
+
+with gr.Blocks() as demo:
+    inp=CofoldingInput(label="Input")
+
+    # preinput =  {"chains": [
+    #     {
+    #         "class": "DNA",
+    #         "sequence": "ATGCGT",
+    #         "chain": "A"
+    #     }
+    # ], "covMods":[]
+    # }
+    # inp2=CofoldingInput(preinput, label="Input prefilled")
+    btn = gr.Button("Submit")
+    out = gr.HTML()
+
+    btn.click(predict, inputs=[inp], outputs=[out])
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `CofoldingInput`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["CofoldingInput"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["CofoldingInput"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+def predict(
+    value: Unknown
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "CofoldingInput-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          CofoldingInput: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,9 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+node_modules

src/README.md

@@ -0,0 +1,290 @@
+
+# `gradio_cofoldinginput`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.2%20-%20orange">  
+
+Component to enter protein and DNA sequences + small molecules for cofolding
+
+## Installation
+
+```bash
+pip install gradio_cofoldinginput
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_cofoldinginput import CofoldingInput
+
+import json
+
+
+def predict(input):
+    input = json.dumps(input)
+    return input
+
+with gr.Blocks() as demo:
+    inp=CofoldingInput(label="Input")
+
+    # preinput =  {"chains": [
+    #     {
+    #         "class": "DNA",
+    #         "sequence": "ATGCGT",
+    #         "chain": "A"
+    #     }
+    # ], "covMods":[]
+    # }
+    # inp2=CofoldingInput(preinput, label="Input prefilled")
+    btn = gr.Button("Submit")
+    out = gr.HTML()
+
+    btn.click(predict, inputs=[inp], outputs=[out])
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `CofoldingInput`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict | None
+```
+
+</td>
+<td align="left"><code>{"chains": [], "covMods": []}</code></td>
+<td align="left">list of items.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>info</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">additional component description.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>autofocus</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, will focus on the textbox when the page loads. Use this carefully, as it can cause usability issues for sighted and non-sighted users.</td>
+</tr>
+
+<tr>
+<td align="left"><code>autoscroll</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the CofoldingInput changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `input` | This listener is triggered when the user changes the value of the CofoldingInput. |
+| `select` | Event listener for when the user selects or deselects the CofoldingInput. Uses event data gradio.SelectData to carry `value` referring to the label of the CofoldingInput, and `selected` to refer to state of the CofoldingInput. See EventData documentation on how to use this event data |
+| `submit` | This listener is triggered when the user presses the Enter key while the CofoldingInput is focused. |
+| `focus` | This listener is triggered when the CofoldingInput is focused. |
+| `blur` | This listener is triggered when the CofoldingInput is unfocused/blurred. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+ def predict(
+     value: Unknown
+ ) -> dict | None:
+     return value
+ ```
+ 

src/backend/gradio_cofoldinginput/__init__.py

@@ -0,0 +1,4 @@
+
+from .cofoldinginput import CofoldingInput
+
+__all__ = ['CofoldingInput']

src/backend/gradio_cofoldinginput/cofoldinginput.py

@@ -0,0 +1,118 @@
+"""gr.Textbox() component."""
+
+from __future__ import annotations
+
+from typing import Any, Callable, Literal
+
+from gradio_client.documentation import document
+
+from gradio.components.base import FormComponent
+from gradio.events import Events
+
+
+
+class CofoldingInput(FormComponent):
+    """
+    Creates a textarea for user to enter string input or display string output.
+
+    Demos: hello_world, diff_texts, sentence_builder
+    Guides: creating-a-chatbot, real-time-speech-recognition
+    """
+
+    EVENTS = [
+        Events.change,
+        Events.input,
+        Events.select,
+        Events.submit,
+        Events.focus,
+        Events.blur,
+    ]
+
+    def __init__(
+        self,
+        value: dict | None = {"chains": [], "covMods": []},
+        *,
+        label: str | None = None,
+        info: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        elem_id: str | None = None,
+        autofocus: bool = False,
+        autoscroll: bool = True,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+    ):
+        """
+        Parameters:
+            value: list of items.
+            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            info: additional component description.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            show_label: if True, will display label.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            interactive: if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            autofocus: If True, will focus on the textbox when the page loads. Use this carefully, as it can cause usability issues for sighted and non-sighted users.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            type: The type of textbox. One of: 'text', 'password', 'email', Default is 'text'.
+        """
+        
+        self.autofocus = autofocus
+        self.autoscroll = autoscroll
+        super().__init__(
+            label=label,
+            info=info,
+            every=every,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            value=value,
+        )
+
+    def preprocess(self, payload):
+        """
+        Parameters:
+            payload: the text entered in the textarea.
+        Returns:
+            returns list
+        """
+        return None if payload is None else dict(payload)
+
+    def postprocess(self, value: dict | None) -> dict | None:
+        """
+        Parameters:
+            value: Expects a {str} returned from function and sets textarea value to it.
+        Returns:
+            The value to display in the textarea.
+        """
+        return None if value is None else dict(value)
+    
+    def api_info(self) -> dict[str, Any]:
+        """
+        A JSON-schema representation of the value that the `preprocess` expects and the `postprocess` returns.
+        """
+        return {
+            "type": {},
+            "description": "Any valid json",
+        }
+ 
+    def example_payload(self) -> Any:
+        return []
+
+    def example_value(self) -> Any:
+        return []

src/backend/gradio_cofoldinginput/cofoldinginput.pyi

@@ -0,0 +1,370 @@
+"""gr.Textbox() component."""
+
+from __future__ import annotations
+
+from typing import Any, Callable, Literal
+
+from gradio_client.documentation import document
+
+from gradio.components.base import FormComponent
+from gradio.events import Events
+
+
+class CofoldingInput(FormComponent):
+    """
+    Creates a textarea for user to enter string input or display string output.
+
+    Demos: hello_world, diff_texts, sentence_builder
+    Guides: creating-a-chatbot, real-time-speech-recognition
+    """
+
+    EVENTS = [
+        Events.change,
+        Events.input,
+        Events.select,
+        Events.submit,
+        Events.focus,
+        Events.blur,
+    ]
+
+    def __init__(
+        self,
+        value: dict | None = {"chains": [], "covMods": []},
+        *,
+        label: str | None = None,
+        info: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        elem_id: str | None = None,
+        autofocus: bool = False,
+        autoscroll: bool = True,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+    ):
+        """
+        Parameters:
+            value: list of items.
+            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            info: additional component description.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            show_label: if True, will display label.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            interactive: if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            autofocus: If True, will focus on the textbox when the page loads. Use this carefully, as it can cause usability issues for sighted and non-sighted users.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            type: The type of textbox. One of: 'text', 'password', 'email', Default is 'text'.
+        """
+        
+        self.autofocus = autofocus
+        self.autoscroll = autoscroll
+        super().__init__(
+            label=label,
+            info=info,
+            every=every,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            value=value,
+        )
+
+    def preprocess(self, payload):
+        """
+        Parameters:
+            payload: the text entered in the textarea.
+        Returns:
+            returns list
+        """
+        return None if payload is None else dict(payload)
+
+    def postprocess(self, value: dict | None) -> dict | None:
+        """
+        Parameters:
+            value: Expects a {str} returned from function and sets textarea value to it.
+        Returns:
+            The value to display in the textarea.
+        """
+        return None if value is None else dict(value)
+    
+    def api_info(self) -> dict[str, Any]:
+        """
+        A JSON-schema representation of the value that the `preprocess` expects and the `postprocess` returns.
+        """
+        return {
+            "type": {},
+            "description": "Any valid json",
+        }
+ 
+    def example_payload(self) -> Any:
+        return []
+
+    def example_value(self) -> Any:
+        return []
+
+    
+    def change(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def input(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def select(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def submit(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def focus(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def blur(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...

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

@@ -0,0 +1 @@
+.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx,.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:before,.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:before,.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:after{--tw-content:""}button.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{text-transform:none}button.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{-webkit-appearance:button;background-color:transparent;background-image:none}.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:-moz-focusring{outline:auto}.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:-moz-ui-invalid{box-shadow:none}.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx::-webkit-inner-spin-button,.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx::-webkit-outer-spin-button{height:auto}.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx::-webkit-search-decoration{-webkit-appearance:none}.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}button.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{cursor:pointer}.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:disabled{cursor:default}svg.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{display:block;vertical-align:middle}.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx,.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:before,.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx: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 / .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: }.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx::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 / .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: }.block.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{display:block}.flex.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{display:flex}.h-4.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{height:1rem}.w-4.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{width:1rem}.items-center.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{align-items:center}.justify-center.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{justify-content:center}.space-x-2.svelte-8wrmgx>.svelte-8wrmgx:not([hidden])~.svelte-8wrmgx:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.px-4.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{padding-left:1rem;padding-right:1rem}.py-2.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx{padding-top:.5rem;padding-bottom:.5rem}.hover\:bg-gray-100.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}@media (prefers-color-scheme: dark){.dark\:hover\:bg-gray-600.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.dark\:hover\:text-white.svelte-8wrmgx.svelte-8wrmgx.svelte-8wrmgx:hover{--tw-text-opacity:1;color:#fff}}.svelte-8wrmgx,.svelte-8wrmgx:before,.svelte-8wrmgx:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.svelte-8wrmgx:before,.svelte-8wrmgx:after{--tw-content:""}button.svelte-8wrmgx,input.svelte-8wrmgx{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button.svelte-8wrmgx{text-transform:none}button.svelte-8wrmgx,[type=button].svelte-8wrmgx,[type=submit].svelte-8wrmgx{-webkit-appearance:button;background-color:transparent;background-image:none}.svelte-8wrmgx:-moz-focusring{outline:auto}.svelte-8wrmgx:-moz-ui-invalid{box-shadow:none}.svelte-8wrmgx::-webkit-inner-spin-button,.svelte-8wrmgx::-webkit-outer-spin-button{height:auto}[type=search].svelte-8wrmgx{-webkit-appearance:textfield;outline-offset:-2px}.svelte-8wrmgx::-webkit-search-decoration{-webkit-appearance:none}.svelte-8wrmgx::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}ul.svelte-8wrmgx{list-style:none;margin:0;padding:0}input.svelte-8wrmgx::placeholder{opacity:1;color:#9ca3af}button.svelte-8wrmgx{cursor:pointer}.svelte-8wrmgx:disabled{cursor:default}svg.svelte-8wrmgx{display:block;vertical-align:middle}.svelte-8wrmgx,.svelte-8wrmgx:before,.svelte-8wrmgx: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 / .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: }.svelte-8wrmgx::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 / .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.svelte-8wrmgx{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute.svelte-8wrmgx{position:absolute}.relative.svelte-8wrmgx{position:relative}.end-0.svelte-8wrmgx{inset-inline-end:0px}.top-0.svelte-8wrmgx{top:0}.z-10.svelte-8wrmgx{z-index:10}.z-20.svelte-8wrmgx{z-index:20}.mx-auto.svelte-8wrmgx{margin-left:auto;margin-right:auto}.my-2.svelte-8wrmgx{margin-top:.5rem;margin-bottom:.5rem}.mb-2.svelte-8wrmgx{margin-bottom:.5rem}.block.svelte-8wrmgx{display:block}.flex.svelte-8wrmgx{display:flex}.inline-flex.svelte-8wrmgx{display:inline-flex}.hidden.svelte-8wrmgx{display:none}.h-4.svelte-8wrmgx{height:1rem}.h-full.svelte-8wrmgx{height:100%}.w-4.svelte-8wrmgx{width:1rem}.w-44.svelte-8wrmgx{width:11rem}.w-full.svelte-8wrmgx{width:100%}.max-w-lg.svelte-8wrmgx{max-width:32rem}.flex-shrink-0.svelte-8wrmgx{flex-shrink:0}.items-center.svelte-8wrmgx{align-items:center}.rounded-lg.svelte-8wrmgx{border-radius:.5rem}.rounded-e-lg.svelte-8wrmgx{border-start-end-radius:.5rem;border-end-end-radius:.5rem}.rounded-s-lg.svelte-8wrmgx{border-start-start-radius:.5rem;border-end-start-radius:.5rem}.border.svelte-8wrmgx{border-width:1px}.border-s-2.svelte-8wrmgx{border-inline-start-width:2px}.border-blue-700.svelte-8wrmgx{--tw-border-opacity:1;border-color:rgb(29 78 216 / var(--tw-border-opacity))}.border-gray-300.svelte-8wrmgx{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.border-s-gray-50.svelte-8wrmgx{--tw-border-opacity:1;border-inline-start-color:rgb(249 250 251 / var(--tw-border-opacity))}.bg-blue-700.svelte-8wrmgx{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.bg-gray-100.svelte-8wrmgx{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-gray-50.svelte-8wrmgx{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-white.svelte-8wrmgx{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-2\.5.svelte-8wrmgx{padding:.625rem}.px-4.svelte-8wrmgx{padding-left:1rem;padding-right:1rem}.py-2.svelte-8wrmgx{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5.svelte-8wrmgx{padding-top:.625rem;padding-bottom:.625rem}.text-center.svelte-8wrmgx{text-align:center}.text-sm.svelte-8wrmgx{font-size:.875rem;line-height:1.25rem}.font-medium.svelte-8wrmgx{font-weight:500}.text-gray-700.svelte-8wrmgx{--tw-text-opacity:1;color:#374151}.text-gray-900.svelte-8wrmgx{--tw-text-opacity:1;color:#111827}.text-white.svelte-8wrmgx{--tw-text-opacity:1;color:#fff}.shadow.svelte-8wrmgx{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(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)}.hover\:bg-blue-800.svelte-8wrmgx:hover{--tw-bg-opacity:1;background-color:rgb(30 64 175 / var(--tw-bg-opacity))}.hover\:bg-gray-100.svelte-8wrmgx:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-gray-200.svelte-8wrmgx:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.focus\:border-blue-500.svelte-8wrmgx:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.focus\:outline-none.svelte-8wrmgx:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-4.svelte-8wrmgx: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.svelte-8wrmgx:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(147 197 253 / var(--tw-ring-opacity))}.focus\:ring-blue-500.svelte-8wrmgx:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}.focus\:ring-gray-100.svelte-8wrmgx:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(243 244 246 / var(--tw-ring-opacity))}@media (prefers-color-scheme: dark){.dark\:border-gray-600.svelte-8wrmgx{--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.dark\:border-s-gray-700.svelte-8wrmgx{--tw-border-opacity:1;border-inline-start-color:rgb(55 65 81 / var(--tw-border-opacity))}.dark\:bg-blue-600.svelte-8wrmgx{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.dark\:bg-gray-700.svelte-8wrmgx{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.dark\:text-gray-200.svelte-8wrmgx{--tw-text-opacity:1;color:#e5e7eb}.dark\:text-white.svelte-8wrmgx{--tw-text-opacity:1;color:#fff}.dark\:placeholder-gray-400.svelte-8wrmgx::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175 / var(--tw-placeholder-opacity))}.dark\:hover\:bg-blue-700.svelte-8wrmgx:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.dark\:hover\:bg-gray-600.svelte-8wrmgx:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.dark\:hover\:text-white.svelte-8wrmgx:hover{--tw-text-opacity:1;color:#fff}.dark\:focus\:border-blue-500.svelte-8wrmgx:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.dark\:focus\:ring-blue-800.svelte-8wrmgx:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(30 64 175 / var(--tw-ring-opacity))}.dark\:focus\:ring-gray-700.svelte-8wrmgx:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81 / var(--tw-ring-opacity))}}.svelte-hhspdt.svelte-hhspdt,.svelte-hhspdt.svelte-hhspdt:before,.svelte-hhspdt.svelte-hhspdt:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.svelte-hhspdt.svelte-hhspdt:before,.svelte-hhspdt.svelte-hhspdt:after{--tw-content:""}.svelte-hhspdt.svelte-hhspdt:-moz-focusring{outline:auto}.svelte-hhspdt.svelte-hhspdt:-moz-ui-invalid{box-shadow:none}.svelte-hhspdt.svelte-hhspdt::-webkit-inner-spin-button,.svelte-hhspdt.svelte-hhspdt::-webkit-outer-spin-button{height:auto}.svelte-hhspdt.svelte-hhspdt::-webkit-search-decoration{-webkit-appearance:none}.svelte-hhspdt.svelte-hhspdt::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.svelte-hhspdt.svelte-hhspdt:disabled{cursor:default}.svelte-hhspdt.svelte-hhspdt,.svelte-hhspdt.svelte-hhspdt:before,.svelte-hhspdt.svelte-hhspdt: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 / .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: }.svelte-hhspdt.svelte-hhspdt::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 / .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: }.inline-block.svelte-hhspdt.svelte-hhspdt{display:inline-block}.inline.svelte-hhspdt.svelte-hhspdt{display:inline}.w-full.svelte-hhspdt.svelte-hhspdt{width:100%}.cursor-pointer.svelte-hhspdt.svelte-hhspdt{cursor:pointer}.p-0\.5.svelte-hhspdt.svelte-hhspdt{padding:.125rem}.text-center.svelte-hhspdt.svelte-hhspdt{text-align:center}.text-xs.svelte-hhspdt.svelte-hhspdt{font-size:.75rem;line-height:1rem}.sequence_container.svelte-hhspdt.svelte-hhspdt{overflow-wrap:anywhere;counter-reset:sequence}.sequence_container.svelte-hhspdt .sequence__chunk.svelte-hhspdt{display:inline-block;margin:.1rem 0 1rem 1rem;position:relative;white-space:nowrap}.sequence_container.svelte-hhspdt .sequence__chunk.svelte-hhspdt:not(:last-child):before{content:counter(sequence);counter-increment:sequence 10;position:absolute;top:-.8em;right:0;opacity:.5;font-weight:700}.sequence__chunk.svelte-hhspdt span.svelte-hhspdt{padding:0 .05rem}.hover\:font-bold.svelte-hhspdt.svelte-hhspdt:hover{font-weight:700}.active.svelte-1jhdl43{background:#fff;border-radius:9999px;color:#ea580c}.mol-canvas.svelte-1jhdl43{width:200px;height:200px;margin:0 auto}.mol-wrapper.svelte-1jhdl43{width:100%;display:flex;justify-content:center}.svelte-1jhdl43,.svelte-1jhdl43:before,.svelte-1jhdl43:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.svelte-1jhdl43:before,.svelte-1jhdl43:after{--tw-content:""}table.svelte-1jhdl43{text-indent:0;border-color:inherit;border-collapse:collapse}button.svelte-1jhdl43{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button.svelte-1jhdl43{text-transform:none}button.svelte-1jhdl43{-webkit-appearance:button;background-color:transparent;background-image:none}.svelte-1jhdl43:-moz-focusring{outline:auto}.svelte-1jhdl43:-moz-ui-invalid{box-shadow:none}.svelte-1jhdl43::-webkit-inner-spin-button,.svelte-1jhdl43::-webkit-outer-spin-button{height:auto}.svelte-1jhdl43::-webkit-search-decoration{-webkit-appearance:none}.svelte-1jhdl43::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}button.svelte-1jhdl43{cursor:pointer}.svelte-1jhdl43:disabled{cursor:default}svg.svelte-1jhdl43{display:block;vertical-align:middle}.svelte-1jhdl43,.svelte-1jhdl43:before,.svelte-1jhdl43: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 / .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: }.svelte-1jhdl43::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 / .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: }.relative.svelte-1jhdl43{position:relative}.mx-1.svelte-1jhdl43{margin-left:.25rem;margin-right:.25rem}.mb-2.svelte-1jhdl43{margin-bottom:.5rem}.mt-3.svelte-1jhdl43{margin-top:.75rem}.flex.svelte-1jhdl43{display:flex}.h-4.svelte-1jhdl43{height:1rem}.w-1\/2.svelte-1jhdl43{width:50%}.w-4.svelte-1jhdl43{width:1rem}.w-full.svelte-1jhdl43{width:100%}.flex-col.svelte-1jhdl43{flex-direction:column}.items-center.svelte-1jhdl43{align-items:center}.justify-center.svelte-1jhdl43{justify-content:center}.overflow-x-auto.svelte-1jhdl43{overflow-x:auto}.whitespace-nowrap.svelte-1jhdl43{white-space:nowrap}.rounded-full.svelte-1jhdl43{border-radius:9999px}.rounded-l-full.svelte-1jhdl43{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.rounded-r-full.svelte-1jhdl43{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border-2.svelte-1jhdl43{border-width:2px}.border-b.svelte-1jhdl43{border-bottom-width:1px}.border-gray-200.svelte-1jhdl43{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-gray-200.svelte-1jhdl43{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-gray-50.svelte-1jhdl43{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-white.svelte-1jhdl43{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-4.svelte-1jhdl43{padding-left:1rem;padding-right:1rem}.px-6.svelte-1jhdl43{padding-left:1.5rem;padding-right:1.5rem}.py-2.svelte-1jhdl43{padding-top:.5rem;padding-bottom:.5rem}.py-3.svelte-1jhdl43{padding-top:.75rem;padding-bottom:.75rem}.py-4.svelte-1jhdl43{padding-top:1rem;padding-bottom:1rem}.text-left.svelte-1jhdl43{text-align:left}.text-center.svelte-1jhdl43{text-align:center}.text-right.svelte-1jhdl43{text-align:right}.font-mono.svelte-1jhdl43{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-lg.svelte-1jhdl43{font-size:1.125rem;line-height:1.75rem}.text-sm.svelte-1jhdl43{font-size:.875rem;line-height:1.25rem}.text-xs.svelte-1jhdl43{font-size:.75rem;line-height:1rem}.font-medium.svelte-1jhdl43{font-weight:500}.uppercase.svelte-1jhdl43{text-transform:uppercase}.leading-none.svelte-1jhdl43{line-height:1}.text-gray-500.svelte-1jhdl43{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-700.svelte-1jhdl43{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-gray-900.svelte-1jhdl43{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.transition-colors.svelte-1jhdl43{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300.svelte-1jhdl43{transition-duration:.3s}.ease-in.svelte-1jhdl43{transition-timing-function:cubic-bezier(.4,0,1,1)}.hover\:text-orange-600.svelte-1jhdl43:hover{--tw-text-opacity:1;color:rgb(234 88 12 / var(--tw-text-opacity))}.focus\:text-orange-600.svelte-1jhdl43:focus{--tw-text-opacity:1;color:rgb(234 88 12 / var(--tw-text-opacity))}.focus\:outline-none.svelte-1jhdl43:focus{outline:2px solid transparent;outline-offset:2px}.rtl\:text-right.svelte-1jhdl43:where([dir=rtl],[dir=rtl] *){text-align:right}@media (prefers-color-scheme: dark){.dark\:border-gray-700.svelte-1jhdl43{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.dark\:bg-gray-700.svelte-1jhdl43{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.dark\:bg-gray-800.svelte-1jhdl43{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.dark\:text-gray-400.svelte-1jhdl43{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.dark\:text-white.svelte-1jhdl43{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}}.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:before,.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:before,.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:after{--tw-content:""}h2.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,h4.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-size:inherit;font-weight:inherit}button.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,input.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,select.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,textarea.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,select.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{text-transform:none}button.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,input.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:where([type=button]),input.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:where([type=reset]),input.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:-moz-focusring{outline:auto}.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:-moz-ui-invalid{box-shadow:none}.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t::-webkit-inner-spin-button,.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t::-webkit-outer-spin-button{height:auto}.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t::-webkit-search-decoration{-webkit-appearance:none}.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h2.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,h4.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,p.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{margin:0}textarea.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{resize:vertical}input.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t::placeholder,textarea.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t::placeholder{opacity:1;color:#9ca3af}button.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{cursor:pointer}.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:disabled{cursor:default}svg.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{display:block;vertical-align:middle}.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t,.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:before,.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t: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 / .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: }.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t::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 / .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.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{visibility:collapse}.relative.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{position:relative}.my-2.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{margin-top:.5rem;margin-bottom:.5rem}.mb-2.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{margin-bottom:.5rem}.mt-1.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{margin-top:.25rem}.block.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{display:block}.flex.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{display:flex}.inline-flex.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{display:inline-flex}.grid.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{display:grid}.hidden.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{display:none}.h-10.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{height:2.5rem}.h-3.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{height:.75rem}.h-4.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{height:1rem}.w-10.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{width:2.5rem}.w-2\/5.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{width:40%}.w-3.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{width:.75rem}.w-3\/5.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{width:60%}.w-4.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{width:1rem}.w-8.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{width:2rem}.w-full.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{width:100%}.shrink-0.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{flex-shrink:0}.-rotate-90.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{cursor:pointer}.grid-cols-3.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{flex-direction:column}.items-center.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{align-items:center}.justify-center.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{justify-content:center}.justify-between.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{justify-content:space-between}.gap-3.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{gap:.75rem}.space-x-2.svelte-fryf3t>.svelte-fryf3t:not([hidden])~.svelte-fryf3t:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.divide-x.svelte-fryf3t>.svelte-fryf3t:not([hidden])~.svelte-fryf3t: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.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{overflow:hidden}.whitespace-nowrap.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{white-space:nowrap}.rounded.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{border-radius:.25rem}.rounded-full.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{border-radius:9999px}.rounded-lg.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{border-radius:.5rem}.border.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{border-width:1px}.border-b-0.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{border-bottom-width:0px}.border-t-0.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{border-top-width:0px}.border-gray-200.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.border-gray-300.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.bg-blue-200.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-bg-opacity:1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.bg-gray-50.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-green-100.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-bg-opacity:1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-orange-200.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-bg-opacity:1;background-color:rgb(254 215 170 / var(--tw-bg-opacity))}.bg-violet-100.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-bg-opacity:1;background-color:rgb(237 233 254 / var(--tw-bg-opacity))}.bg-yellow-100.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-bg-opacity:1;background-color:rgb(254 249 195 / var(--tw-bg-opacity))}.p-1.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{padding:.25rem}.p-10.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{padding:2.5rem}.p-2.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{padding:.5rem}.p-2\.5.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{padding:.625rem}.p-5.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{padding:1.25rem}.px-2.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{padding-left:.5rem;padding-right:.5rem}.px-3.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{padding-left:.75rem;padding-right:.75rem}.text-center.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{text-align:center}.font-mono.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-base.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-size:1rem;line-height:1.5rem}.text-sm.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-size:.875rem;line-height:1.25rem}.text-xl.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-size:1.25rem;line-height:1.75rem}.text-xs.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-size:.75rem;line-height:1rem}.font-bold.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-weight:700}.font-medium.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-weight:500}.font-semibold.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{font-weight:600}.text-blue-800.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(30 64 175 / var(--tw-text-opacity))}.text-gray-400.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-500.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-800.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-gray-900.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-800.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity))}.hover\:bg-gray-100.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.focus\:border-blue-500.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.focus\:outline-none.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-4.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t: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.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}.focus\:ring-gray-200.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235 / var(--tw-ring-opacity))}.rtl\:text-right.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:where([dir=rtl],[dir=rtl] *){text-align:right}@media (prefers-color-scheme: dark){.dark\:border-gray-600.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.dark\:border-gray-700.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.dark\:bg-gray-600.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.dark\:bg-gray-700.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.dark\:bg-gray-900.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.dark\:text-gray-300.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity))}.dark\:text-gray-400.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.dark\:text-white.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:placeholder-gray-400.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175 / var(--tw-placeholder-opacity))}.dark\:hover\:bg-gray-800.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.dark\:focus\:border-blue-500.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.dark\:focus\:ring-blue-500.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}.dark\:focus\:ring-gray-800.svelte-fryf3t.svelte-fryf3t.svelte-fryf3t:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(31 41 55 / var(--tw-ring-opacity))}}.svelte-13zuw1o,.svelte-13zuw1o:before,.svelte-13zuw1o:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.svelte-13zuw1o:before,.svelte-13zuw1o:after{--tw-content:""}:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}.svelte-13zuw1o:-moz-focusring{outline:auto}.svelte-13zuw1o:-moz-ui-invalid{box-shadow:none}.svelte-13zuw1o::-webkit-inner-spin-button,.svelte-13zuw1o::-webkit-outer-spin-button{height:auto}.svelte-13zuw1o::-webkit-search-decoration{-webkit-appearance:none}.svelte-13zuw1o::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.svelte-13zuw1o:disabled{cursor:default}.svelte-13zuw1o,.svelte-13zuw1o:before,.svelte-13zuw1o: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 / .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: }.svelte-13zuw1o::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 / .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: }.my-2.svelte-13zuw1o{margin-top:.5rem;margin-bottom:.5rem}.my-8.svelte-13zuw1o{margin-top:2rem;margin-bottom:2rem}.w-full.svelte-13zuw1o{width:100%}.text-center.svelte-13zuw1o{text-align:center}.text-gray-400.svelte-13zuw1o{--tw-text-opacity:1;color:#9ca3af}.text-gray-600.svelte-13zuw1o{--tw-text-opacity:1;color:#4b5563}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1yserjw.svelte-1yserjw{top:0;right:0;left:0}.wrap.default.svelte-1yserjw.svelte-1yserjw{top:0;right:0;bottom:0;left:0}.hide.svelte-1yserjw.svelte-1yserjw{opacity:0;pointer-events:none}.generating.svelte-1yserjw.svelte-1yserjw{animation:svelte-1yserjw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yserjw.svelte-1yserjw{background:none}@keyframes svelte-1yserjw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yserjw.svelte-1yserjw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yserjw.svelte-1yserjw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yserjw.svelte-1yserjw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yserjw.svelte-1yserjw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yserjw.svelte-1yserjw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yserjw .progress-text.svelte-1yserjw{background:var(--block-background-fill)}.border.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.gallery.svelte-84cxb8{padding:var(--size-1) var(--size-2)}div.svelte-84cxb8{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}label.svelte-18tqgac.svelte-18tqgac{display:block;width:100%}input.svelte-18tqgac.svelte-18tqgac,textarea.svelte-18tqgac.svelte-18tqgac{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.svelte-18tqgac.svelte-18tqgac:not(.container),label.svelte-18tqgac:not(.container)>input.svelte-18tqgac,label.svelte-18tqgac:not(.container)>textarea.svelte-18tqgac{height:100%}.container.svelte-18tqgac>input.svelte-18tqgac,.container.svelte-18tqgac>textarea.svelte-18tqgac{border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-radius)}input.svelte-18tqgac.svelte-18tqgac:disabled,textarea.svelte-18tqgac.svelte-18tqgac:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1}input.svelte-18tqgac.svelte-18tqgac:focus,textarea.svelte-18tqgac.svelte-18tqgac:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}input.svelte-18tqgac.svelte-18tqgac::placeholder,textarea.svelte-18tqgac.svelte-18tqgac::placeholder{color:var(--input-placeholder-color)}button.svelte-18tqgac.svelte-18tqgac{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)}

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

@@ -0,0 +1,115 @@
+const {
+  SvelteComponent: y,
+  add_iframe_resize_listener: b,
+  add_render_callback: v,
+  append: m,
+  attr: h,
+  binding_callbacks: p,
+  detach: w,
+  element: z,
+  init: k,
+  insert: E,
+  noop: c,
+  safe_not_equal: S,
+  set_data: q,
+  text: C,
+  toggle_class: r
+} = window.__gradio__svelte__internal, { onMount: M } = window.__gradio__svelte__internal;
+function P(t) {
+  let e, n = (
+    /*value*/
+    (t[0] ? (
+      /*value*/
+      t[0]
+    ) : "") + ""
+  ), _, d;
+  return {
+    c() {
+      e = z("div"), _ = C(n), h(e, "class", "svelte-84cxb8"), v(() => (
+        /*div_elementresize_handler*/
+        t[5].call(e)
+      )), r(
+        e,
+        "table",
+        /*type*/
+        t[1] === "table"
+      ), r(
+        e,
+        "gallery",
+        /*type*/
+        t[1] === "gallery"
+      ), r(
+        e,
+        "selected",
+        /*selected*/
+        t[2]
+      );
+    },
+    m(l, s) {
+      E(l, e, s), m(e, _), d = b(
+        e,
+        /*div_elementresize_handler*/
+        t[5].bind(e)
+      ), t[6](e);
+    },
+    p(l, [s]) {
+      s & /*value*/
+      1 && n !== (n = /*value*/
+      (l[0] ? (
+        /*value*/
+        l[0]
+      ) : "") + "") && q(_, n), s & /*type*/
+      2 && r(
+        e,
+        "table",
+        /*type*/
+        l[1] === "table"
+      ), s & /*type*/
+      2 && r(
+        e,
+        "gallery",
+        /*type*/
+        l[1] === "gallery"
+      ), s & /*selected*/
+      4 && r(
+        e,
+        "selected",
+        /*selected*/
+        l[2]
+      );
+    },
+    i: c,
+    o: c,
+    d(l) {
+      l && w(e), d(), t[6](null);
+    }
+  };
+}
+function W(t, e, n) {
+  let { value: _ } = e, { type: d } = e, { selected: l = !1 } = e, s, a;
+  function f(i, u) {
+    !i || !u || (a.style.setProperty("--local-text-width", `${u < 150 ? u : 200}px`), n(4, a.style.whiteSpace = "unset", a));
+  }
+  M(() => {
+    f(a, s);
+  });
+  function o() {
+    s = this.clientWidth, n(3, s);
+  }
+  function g(i) {
+    p[i ? "unshift" : "push"](() => {
+      a = i, n(4, a);
+    });
+  }
+  return t.$$set = (i) => {
+    "value" in i && n(0, _ = i.value), "type" in i && n(1, d = i.type), "selected" in i && n(2, l = i.selected);
+  }, [_, d, l, s, a, o, g];
+}
+class j extends y {
+  constructor(e) {
+    super(), k(this, e, W, P, S, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  j as default
+};

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

@@ -0,0 +1 @@
+.gallery.svelte-84cxb8{padding:var(--size-1) var(--size-2)}div.svelte-84cxb8{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}

src/demo/app.py

@@ -0,0 +1,30 @@
+
+import gradio as gr
+from gradio_cofoldinginput import CofoldingInput
+
+import json
+
+
+def predict(input):
+    input = json.dumps(input)
+    return input
+
+with gr.Blocks() as demo:
+    inp=CofoldingInput(label="Input")
+
+    # preinput =  {"chains": [
+    #     {
+    #         "class": "DNA",
+    #         "sequence": "ATGCGT",
+    #         "chain": "A"
+    #     }
+    # ], "covMods":[]
+    # }
+    # inp2=CofoldingInput(preinput, label="Input prefilled")
+    btn = gr.Button("Submit")
+    out = gr.HTML()
+
+    btn.click(predict, inputs=[inp], outputs=[out])
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/heme.json

@@ -0,0 +1 @@
+{"m":[{"a":[{"x":-2.161,"y":-0.125,"z":0.49},{"x":1.458,"y":-3.419,"z":0.306},{"x":4.701,"y":0.169,"z":-0.069},{"x":1.075,"y":3.46,"z":0.018},{"x":-1.436,"y":-1.305,"z":0.38},{"x":-2.015,"y":-2.587,"z":0.32},{"x":-1.009,"y":-3.5,"z":0.27},{"x":0.216,"y":-2.803,"z":0.298},{"x":-1.175,"y":-4.996,"z":0.197},{"x":-3.49,"y":-2.893,"z":0.314},{"x":-3.998,"y":-2.926,"z":-1.129},{"x":-5.473,"y":-3.232,"z":-1.136},{"x":-6.059,"y":-3.405,"z":-0.094,"l":"O"},{"x":-6.137,"y":-3.311,"z":-2.3,"l":"O"},{"x":2.664,"y":-2.707,"z":0.308},{"x":3.937,"y":-3.328,"z":0.418},{"x":4.874,"y":-2.341,"z":0.314},{"x":4.117,"y":-1.079,"z":0.139},{"x":4.203,"y":-4.798,"z":0.613},{"x":6.339,"y":-2.497,"z":0.365},{"x":6.935,"y":-3.419,"z":-0.385},{"x":3.964,"y":1.345,"z":-0.174},{"x":4.531,"y":2.601,"z":-0.445},{"x":3.51,"y":3.536,"z":-0.437},{"x":2.304,"y":2.846,"z":-0.139},{"x":5.991,"y":2.88,"z":-0.697},{"x":3.649,"y":4.981,"z":-0.692},{"x":4.201,"y":5.407,"z":-1.823},{"x":-0.102,"y":2.753,"z":0.298},{"x":-1.382,"y":3.388,"z":0.641},{"x":-2.283,"y":2.389,"z":0.774},{"x":-1.561,"y":1.137,"z":0.511},{"x":-1.639,"y":4.863,"z":0.811},{"x":-3.741,"y":2.532,"z":1.123},{"x":-4.573,"y":2.563,"z":-0.16},{"x":-6.032,"y":2.706,"z":0.189},{"x":-6.372,"y":2.776,"z":1.347,"l":"O"},{"x":-6.954,"y":2.755,"z":-0.785,"l":"O"},{"x":-0.068,"y":-1.456,"z":0.321,"l":"N"},{"x":2.82,"y":-1.386,"z":0.207,"l":"N"},{"x":2.604,"y":1.506,"z":-0.033,"l":"N"},{"x":-0.276,"y":1.431,"z":0.298,"l":"N"},{"x":1.01,"y":0.157,"z":-0.06,"l":"Fe"},{"x":1.498,"y":-4.508,"z":0.309,"l":"H"},{"x":5.786,"y":0.229,"z":-0.153,"l":"H"},{"x":1.018,"y":4.543,"z":-0.083,"l":"H"},{"x":-1.22,"y":-5.306,"z":-0.847,"l":"H"},{"x":-0.328,"y":-5.48,"z":0.683,"l":"H"},{"x":-2.097,"y":-5.285,"z":0.702,"l":"H"},{"x":-3.662,"y":-3.862,"z":0.782,"l":"H"},{"x":-4.024,"y":-2.121,"z":0.869,"l":"H"},{"x":-3.825,"y":-1.956,"z":-1.597,"l":"H"},{"x":-3.464,"y":-3.697,"z":-1.684,"l":"H"},{"x":3.256,"y":-5.336,"z":0.66,"l":"H"},{"x":4.794,"y":-5.175,"z":-0.222,"l":"H"},{"x":4.752,"y":-4.948,"z":1.543,"l":"H"},{"x":6.927,"y":-1.863,"z":1.011,"l":"H"},{"x":7.994,"y":-3.6,"z":-0.277,"l":"H"},{"x":6.36,"y":-3.987,"z":-1.102,"l":"H"},{"x":6.554,"y":1.949,"z":-0.639,"l":"H"},{"x":6.11,"y":3.316,"z":-1.689,"l":"H"},{"x":6.362,"y":3.578,"z":0.053,"l":"H"},{"x":3.303,"y":5.694,"z":0.042,"l":"H"},{"x":4.614,"y":4.696,"z":-2.523,"l":"H"},{"x":4.235,"y":6.464,"z":-2.043,"l":"H"},{"x":-0.715,"y":5.415,"z":0.639,"l":"H"},{"x":-2.394,"y":5.185,"z":0.094,"l":"H"},{"x":-1.994,"y":5.055,"z":1.824,"l":"H"},{"x":-4.052,"y":1.687,"z":1.738,"l":"H"},{"x":-3.893,"y":3.459,"z":1.677,"l":"H"},{"x":-4.262,"y":3.408,"z":-0.775,"l":"H"},{"x":-4.421,"y":1.636,"z":-0.714,"l":"H"},{"x":-7.082,"y":-3.51,"z":-2.254,"l":"H"},{"x":-7.877,"y":2.847,"z":-0.512,"l":"H"},{"x":-3.246,"y":-0.188,"z":0.567,"l":"H"}],"b":[{"b":0,"e":4},{"b":0,"e":31,"o":2},{"b":0,"e":74},{"b":1,"e":7},{"b":1,"e":14,"o":2},{"b":1,"e":43},{"b":2,"e":17},{"b":2,"e":21,"o":2},{"b":2,"e":44},{"b":3,"e":24,"o":2},{"b":3,"e":28},{"b":3,"e":45},{"b":4,"e":5,"o":2},{"b":4,"e":38},{"b":5,"e":6},{"b":5,"e":9},{"b":6,"e":7,"o":2},{"b":6,"e":8},{"b":7,"e":38},{"b":8,"e":46},{"b":8,"e":47},{"b":8,"e":48},{"b":9,"e":10},{"b":9,"e":49},{"b":9,"e":50},{"b":10,"e":11},{"b":10,"e":51},{"b":10,"e":52},{"b":11,"e":12,"o":2},{"b":11,"e":13},{"b":13,"e":72},{"b":14,"e":15},{"b":14,"e":39},{"b":15,"e":16,"o":2},{"b":15,"e":18},{"b":16,"e":17},{"b":16,"e":19},{"b":17,"e":39,"o":2},{"b":18,"e":53},{"b":18,"e":54},{"b":18,"e":55},{"b":19,"e":20,"o":2},{"b":19,"e":56},{"b":20,"e":57},{"b":20,"e":58},{"b":21,"e":22},{"b":21,"e":40},{"b":22,"e":23,"o":2},{"b":22,"e":25},{"b":23,"e":24},{"b":23,"e":26},{"b":24,"e":40},{"b":25,"e":59},{"b":25,"e":60},{"b":25,"e":61},{"b":26,"e":27,"o":2},{"b":26,"e":62},{"b":27,"e":63},{"b":27,"e":64},{"b":28,"e":29},{"b":28,"e":41,"o":2},{"b":29,"e":30,"o":2},{"b":29,"e":32},{"b":30,"e":31},{"b":30,"e":33},{"b":31,"e":41},{"b":32,"e":65},{"b":32,"e":66},{"b":32,"e":67},{"b":33,"e":34},{"b":33,"e":68},{"b":33,"e":69},{"b":34,"e":35},{"b":34,"e":70},{"b":34,"e":71},{"b":35,"e":36,"o":2},{"b":35,"e":37},{"b":37,"e":73},{"b":38,"e":42},{"b":39,"e":42},{"b":40,"e":42},{"b":41,"e":42}]}]}

src/demo/heme.sdf

@@ -0,0 +1,163 @@
+
+ OpenBabel03282415433D
+
+ 75 82  0  0  0  0  0  0  0  0999 V2000
+   -2.1610   -0.1250    0.4900 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.4580   -3.4190    0.3060 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.7010    0.1690   -0.0690 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.0750    3.4600    0.0180 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.4360   -1.3050    0.3800 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.0150   -2.5870    0.3200 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.0090   -3.5000    0.2700 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2160   -2.8030    0.2980 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.1750   -4.9960    0.1970 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.4900   -2.8930    0.3140 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.9980   -2.9260   -1.1290 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -5.4730   -3.2320   -1.1360 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.0590   -3.4050   -0.0940 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.1370   -3.3110   -2.3000 O   0  0  0  0  0  0  0  0  0  0  0  0
+    2.6640   -2.7070    0.3080 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.9370   -3.3280    0.4180 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.8740   -2.3410    0.3140 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.1170   -1.0790    0.1390 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.2030   -4.7980    0.6130 C   0  0  0  0  0  0  0  0  0  0  0  0
+    6.3390   -2.4970    0.3650 C   0  0  0  0  0  0  0  0  0  0  0  0
+    6.9350   -3.4190   -0.3850 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.9640    1.3450   -0.1740 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.5310    2.6010   -0.4450 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.5100    3.5360   -0.4370 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.3040    2.8460   -0.1390 C   0  0  0  0  0  0  0  0  0  0  0  0
+    5.9910    2.8800   -0.6970 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.6490    4.9810   -0.6920 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.2010    5.4070   -1.8230 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1020    2.7530    0.2980 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.3820    3.3880    0.6410 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.2830    2.3890    0.7740 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.5610    1.1370    0.5110 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.6390    4.8630    0.8110 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.7410    2.5320    1.1230 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.5730    2.5630   -0.1600 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.0320    2.7060    0.1890 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.3720    2.7760    1.3470 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -6.9540    2.7550   -0.7850 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0680   -1.4560    0.3210 N   0  0  0  0  0  0  0  0  0  0  0  0
+    2.8200   -1.3860    0.2070 N   0  0  0  0  0  4  0  0  0  0  0  0
+    2.6040    1.5060   -0.0330 N   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.2760    1.4310    0.2980 N   0  0  0  0  0  4  0  0  0  0  0  0
+    1.0100    0.1570   -0.0600 Fe  0  0  1  0  0  0  0  0  0  0  0  0
+    1.4980   -4.5080    0.3090 H   0  0  0  0  0  0  0  0  0  0  0  0
+    5.7860    0.2290   -0.1530 H   0  0  0  0  0  0  0  0  0  0  0  0
+    1.0180    4.5430   -0.0830 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.2200   -5.3060   -0.8470 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.3280   -5.4800    0.6830 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.0970   -5.2850    0.7020 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.6620   -3.8620    0.7820 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.0240   -2.1210    0.8690 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.8250   -1.9560   -1.5970 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.4640   -3.6970   -1.6840 H   0  0  0  0  0  0  0  0  0  0  0  0
+    3.2560   -5.3360    0.6600 H   0  0  0  0  0  0  0  0  0  0  0  0
+    4.7940   -5.1750   -0.2220 H   0  0  0  0  0  0  0  0  0  0  0  0
+    4.7520   -4.9480    1.5430 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.9270   -1.8630    1.0110 H   0  0  0  0  0  0  0  0  0  0  0  0
+    7.9940   -3.6000   -0.2770 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.3600   -3.9870   -1.1020 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.5540    1.9490   -0.6390 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.1100    3.3160   -1.6890 H   0  0  0  0  0  0  0  0  0  0  0  0
+    6.3620    3.5780    0.0530 H   0  0  0  0  0  0  0  0  0  0  0  0
+    3.3030    5.6940    0.0420 H   0  0  0  0  0  0  0  0  0  0  0  0
+    4.6140    4.6960   -2.5230 H   0  0  0  0  0  0  0  0  0  0  0  0
+    4.2350    6.4640   -2.0430 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.7150    5.4150    0.6390 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.3940    5.1850    0.0940 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -1.9940    5.0550    1.8240 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.0520    1.6870    1.7380 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.8930    3.4590    1.6770 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.2620    3.4080   -0.7750 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -4.4210    1.6360   -0.7140 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -7.0820   -3.5100   -2.2540 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -7.8770    2.8470   -0.5120 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.2460   -0.1880    0.5670 H   0  0  0  0  0  0  0  0  0  0  0  0
+  1  5  1  0  0  0  0
+  1 32  2  0  0  0  0
+  1 75  1  0  0  0  0
+  2  8  1  0  0  0  0
+  2 15  2  0  0  0  0
+  2 44  1  0  0  0  0
+  3 18  1  0  0  0  0
+  3 22  2  0  0  0  0
+  3 45  1  0  0  0  0
+  4 25  2  0  0  0  0
+  4 29  1  0  0  0  0
+  4 46  1  0  0  0  0
+  5  6  2  0  0  0  0
+  5 39  1  0  0  0  0
+  6  7  1  0  0  0  0
+  6 10  1  0  0  0  0
+  7  8  2  0  0  0  0
+  7  9  1  0  0  0  0
+  8 39  1  0  0  0  0
+  9 47  1  0  0  0  0
+  9 48  1  0  0  0  0
+  9 49  1  0  0  0  0
+ 10 11  1  0  0  0  0
+ 10 50  1  0  0  0  0
+ 10 51  1  0  0  0  0
+ 11 12  1  0  0  0  0
+ 11 52  1  0  0  0  0
+ 11 53  1  0  0  0  0
+ 12 13  2  0  0  0  0
+ 12 14  1  0  0  0  0
+ 14 73  1  0  0  0  0
+ 15 16  1  0  0  0  0
+ 15 40  1  0  0  0  0
+ 16 17  2  0  0  0  0
+ 16 19  1  0  0  0  0
+ 17 18  1  0  0  0  0
+ 17 20  1  0  0  0  0
+ 18 40  2  0  0  0  0
+ 19 54  1  0  0  0  0
+ 19 55  1  0  0  0  0
+ 19 56  1  0  0  0  0
+ 20 21  2  0  0  0  0
+ 20 57  1  0  0  0  0
+ 21 58  1  0  0  0  0
+ 21 59  1  0  0  0  0
+ 22 23  1  0  0  0  0
+ 22 41  1  0  0  0  0
+ 23 24  2  0  0  0  0
+ 23 26  1  0  0  0  0
+ 24 25  1  0  0  0  0
+ 24 27  1  0  0  0  0
+ 25 41  1  0  0  0  0
+ 26 60  1  0  0  0  0
+ 26 61  1  0  0  0  0
+ 26 62  1  0  0  0  0
+ 27 28  2  0  0  0  0
+ 27 63  1  0  0  0  0
+ 28 64  1  0  0  0  0
+ 28 65  1  0  0  0  0
+ 29 30  1  0  0  0  0
+ 29 42  2  0  0  0  0
+ 30 31  2  0  0  0  0
+ 30 33  1  0  0  0  0
+ 31 32  1  0  0  0  0
+ 31 34  1  0  0  0  0
+ 32 42  1  0  0  0  0
+ 33 66  1  0  0  0  0
+ 33 67  1  0  0  0  0
+ 33 68  1  0  0  0  0
+ 34 35  1  0  0  0  0
+ 34 69  1  0  0  0  0
+ 34 70  1  0  0  0  0
+ 35 36  1  0  0  0  0
+ 35 71  1  0  0  0  0
+ 35 72  1  0  0  0  0
+ 36 37  2  0  0  0  0
+ 36 38  1  0  0  0  0
+ 38 74  1  0  0  0  0
+ 40 43  1  0  0  0  0
+ 41 43  1  0  0  0  0
+ 42 43  1  0  0  0  0
+ 43 39  1  6  0  0  0
+M  END
+$$$$

src/demo/space.py

@@ -0,0 +1,151 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'CofoldingInput': {'description': 'Creates a textarea for user to enter string input or display string output.\n', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': '{"chains": [], "covMods": []}', 'description': 'list of items.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': 'additional component description.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'autofocus': {'type': 'bool', 'default': 'False', 'description': 'If True, will focus on the textbox when the page loads. Use this carefully, as it can cause usability issues for sighted and non-sighted users.'}, 'autoscroll': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {'value': {'type': 'dict | None', 'description': 'Expects a {str} returned from function and sets textarea value to it.'}}, 'preprocess': {}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CofoldingInput changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the CofoldingInput.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the CofoldingInput. Uses event data gradio.SelectData to carry `value` referring to the label of the CofoldingInput, and `selected` to refer to state of the CofoldingInput. See EventData documentation on how to use this event data'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the CofoldingInput is focused.'}, 'focus': {'type': None, 'default': None, 'description': 'This listener is triggered when the CofoldingInput is focused.'}, 'blur': {'type': None, 'default': None, 'description': 'This listener is triggered when the CofoldingInput is unfocused/blurred.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CofoldingInput': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_cofoldinginput`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.2%20-%20orange">  
+</div>
+
+Component to enter protein and DNA sequences + small molecules for cofolding
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_cofoldinginput
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_cofoldinginput import CofoldingInput
+
+import json
+
+
+def predict(input):
+    input = json.dumps(input)
+    return input
+
+with gr.Blocks() as demo:
+    inp=CofoldingInput(label="Input")
+
+    # preinput =  {"chains": [
+    #     {
+    #         "class": "DNA",
+    #         "sequence": "ATGCGT",
+    #         "chain": "A"
+    #     }
+    # ], "covMods":[]
+    # }
+    # inp2=CofoldingInput(preinput, label="Input prefilled")
+    btn = gr.Button("Submit")
+    out = gr.HTML()
+
+    btn.click(predict, inputs=[inp], outputs=[out])
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `CofoldingInput`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["CofoldingInput"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["CofoldingInput"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+def predict(
+    value: Unknown
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "CofoldingInput-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          CofoldingInput: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	export let value: string | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+
+	let size: number;
+	let el: HTMLDivElement;
+
+	function set_styles(element: HTMLElement, el_width: number): void {
+		if (!element || !el_width) return;
+		el.style.setProperty(
+			"--local-text-width",
+			`${el_width < 150 ? el_width : 200}px`
+		);
+		el.style.whiteSpace = "unset";
+	}
+
+	onMount(() => {
+		set_styles(el, size);
+	});
+</script>
+
+<div
+	bind:clientWidth={size}
+	bind:this={el}
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value ? value : ""}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+
+	div {
+		overflow: hidden;
+		min-width: var(--local-text-width);
+
+		white-space: nowrap;
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,81 @@
+<svelte:options accessors={true} />
+
+<script context="module" lang="ts">
+  export { default as BaseTextbox } from "./shared/Textbox.svelte";
+  export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { Gradio, SelectData } from "@gradio/utils";
+  import { BlockTitle } from "@gradio/atoms";
+
+  import SequenceInput from "./shared/SequenceInput.svelte";
+  import { Block } from "@gradio/atoms";
+  import { StatusTracker } from "@gradio/statustracker";
+  import type { LoadingStatus } from "@gradio/statustracker";
+
+  export let gradio: Gradio<{
+    change: string;
+    submit: never;
+    blur: never;
+    select: SelectData;
+    input: never;
+    focus: never;
+  }>;
+  export let label = "CofoldingInput";
+  export let info: string | undefined = undefined;
+  export let elem_id = "";
+  export let elem_classes: string[] = [];
+  export let visible = true;
+  export let value = { chains: [], covMods: [] };
+  export let show_label: boolean;
+  export let container = true;
+  export let scale: number | null = null;
+  export let min_width: number | undefined = undefined;
+  export let loading_status: LoadingStatus | undefined = undefined;
+
+  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;
+  }
+
+  function syncCovMod(event) {
+    value["covMods"] = event.detail;
+  }
+
+  onMount(() => {});
+</script>
+
+<Block
+  {visible}
+  {elem_id}
+  {elem_classes}
+  {scale}
+  {min_width}
+  allow_overflow={false}
+  padding={container}
+>
+  {#if loading_status}
+    <StatusTracker
+      autoscroll={gradio.autoscroll}
+      i18n={gradio.i18n}
+      {...loading_status}
+    />
+  {/if}
+
+  <BlockTitle {show_label} {info}>{label}</BlockTitle>
+
+  <SequenceInput
+    bind:value
+    on:updateVals={syncValue}
+    on:updateCovMod={syncCovMod}
+  />
+</Block>

src/frontend/package-lock.json

@@ -0,0 +1,1697 @@
+{
+  "name": "gradio_cofoldinginput",
+  "version": "0.4.12",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gradio_cofoldinginput",
+      "version": "0.4.12",
+      "license": "ISC",
+      "dependencies": {
+        "@gradio/atoms": "0.5.3",
+        "@gradio/icons": "0.3.3",
+        "@gradio/statustracker": "0.4.8",
+        "@gradio/utils": "0.3.0",
+        "3dmol": "^2.1.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
+      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
+      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/icu-skeleton-parser": "1.3.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
+      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
+      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@gradio/atoms": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@gradio/atoms/-/atoms-0.5.3.tgz",
+      "integrity": "sha512-1HZgmhbAPzCYt6muyttrJi/P5zXTnD3kVMgneXuDd2j9qB21kSqzshmpnPcvDO3lO0vro55HuxgH22PJ1XHWqg==",
+      "dependencies": {
+        "@gradio/icons": "^0.3.3",
+        "@gradio/utils": "^0.3.0"
+      }
+    },
+    "node_modules/@gradio/column": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@gradio/column/-/column-0.1.0.tgz",
+      "integrity": "sha512-P24nqqVnMXBaDA1f/zSN5HZRho4PxP8Dq+7VltPHlmxIEiZYik2AJ4J0LeuIha34FDO0guu/16evdrpvGIUAfw=="
+    },
+    "node_modules/@gradio/icons": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@gradio/icons/-/icons-0.3.3.tgz",
+      "integrity": "sha512-UFTHpjzFJVwaRzZsdslWxnKUPGgtVeErmUGzrG9di4Vn0oHn1FgHt1Yr2SVu4lO3JI/r2u3H49tb6iax4U9HjA=="
+    },
+    "node_modules/@gradio/statustracker": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/@gradio/statustracker/-/statustracker-0.4.8.tgz",
+      "integrity": "sha512-B/SN7T9BbcdzPrWYfKVxwy3e4u85MS+DAZSeuXgPbAL5n5QravCtvNW7zwkUWb0OlBloaglN3Y7K3M8l1hR5qg==",
+      "dependencies": {
+        "@gradio/atoms": "^0.5.3",
+        "@gradio/column": "^0.1.0",
+        "@gradio/icons": "^0.3.3",
+        "@gradio/utils": "^0.3.0"
+      }
+    },
+    "node_modules/@gradio/theme": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@gradio/theme/-/theme-0.2.0.tgz",
+      "integrity": "sha512-33c68Nk7oRXLn08OxPfjcPm7S4tXGOUV1I1bVgzdM2YV5o1QBOS1GEnXPZPu/CEYPePLMB6bsDwffrLEyLGWVQ=="
+    },
+    "node_modules/@gradio/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@gradio/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-VxP0h7UoWazkdSB875ChvTXWamBwMguuRc+8OyQFZjdj14lcqLEQuj54es3FDBpXOp5GMLFh48Q5FLLjYxMgSg==",
+      "dependencies": {
+        "@gradio/theme": "^0.2.0",
+        "svelte-i18n": "^3.6.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "peer": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "peer": true
+    },
+    "node_modules/3dmol": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/3dmol/-/3dmol-2.1.0.tgz",
+      "integrity": "sha512-w1pfTR8+pDtOpxbGDrBWCbOXiTBqLhHO/OQ5xK3nD4trM0OTPCl8opaTl2iyCfwFRUbqmd2I4Qtjw7x9Boe+OA==",
+      "dependencies": {
+        "iobuffer": "^5.3.1",
+        "netcdfjs": "^3.0.0",
+        "pako": "^2.1.0",
+        "upng-js": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=16.16.0",
+        "npm": ">=8.11"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
+      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/cli-color": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/cli-color/-/cli-color-2.0.4.tgz",
+      "integrity": "sha512-zlnpg0jNcibNrO7GG9IeHH7maWFeCz+Ja1wx/7tZNU5ASSSSZ+/qZciM0/LHCYxSdqv5h2sdbQ/PXYdOuetXvA==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.64",
+        "es6-iterator": "^2.0.3",
+        "memoizee": "^0.4.15",
+        "timers-ext": "^0.1.7"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/code-red": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
+        "estree-walker": "^3.0.3",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/d": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
+      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+      "dependencies": {
+        "es5-ext": "^0.10.64",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/es5-ext": {
+      "version": "0.10.64",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
+      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "esniff": "^2.0.1",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
+      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+      "dependencies": {
+        "d": "^1.0.2",
+        "ext": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/es6-weak-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.46",
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
+      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.19.12",
+        "@esbuild/android-arm": "0.19.12",
+        "@esbuild/android-arm64": "0.19.12",
+        "@esbuild/android-x64": "0.19.12",
+        "@esbuild/darwin-arm64": "0.19.12",
+        "@esbuild/darwin-x64": "0.19.12",
+        "@esbuild/freebsd-arm64": "0.19.12",
+        "@esbuild/freebsd-x64": "0.19.12",
+        "@esbuild/linux-arm": "0.19.12",
+        "@esbuild/linux-arm64": "0.19.12",
+        "@esbuild/linux-ia32": "0.19.12",
+        "@esbuild/linux-loong64": "0.19.12",
+        "@esbuild/linux-mips64el": "0.19.12",
+        "@esbuild/linux-ppc64": "0.19.12",
+        "@esbuild/linux-riscv64": "0.19.12",
+        "@esbuild/linux-s390x": "0.19.12",
+        "@esbuild/linux-x64": "0.19.12",
+        "@esbuild/netbsd-x64": "0.19.12",
+        "@esbuild/openbsd-x64": "0.19.12",
+        "@esbuild/sunos-x64": "0.19.12",
+        "@esbuild/win32-arm64": "0.19.12",
+        "@esbuild/win32-ia32": "0.19.12",
+        "@esbuild/win32-x64": "0.19.12"
+      }
+    },
+    "node_modules/esniff": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
+      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.62",
+        "event-emitter": "^0.3.5",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
+    "node_modules/globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
+    "node_modules/intl-messageformat": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/iobuffer": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.3.2.tgz",
+      "integrity": "sha512-kO3CjNfLZ9t+tHxAMd+Xk4v3D/31E91rMs1dHrm7ikEQrlZ8mLDbQ4z3tZfDM48zOkReas2jx8MWSAmN9+c8Fw=="
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "peer": true
+    },
+    "node_modules/lru-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
+      "integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
+      "dependencies": {
+        "es5-ext": "~0.10.2"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.8",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
+      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "peer": true
+    },
+    "node_modules/memoizee": {
+      "version": "0.4.15",
+      "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
+      "integrity": "sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.53",
+        "es6-weak-map": "^2.0.3",
+        "event-emitter": "^0.3.5",
+        "is-promise": "^2.2.2",
+        "lru-queue": "^0.1.0",
+        "next-tick": "^1.1.0",
+        "timers-ext": "^0.1.7"
+      }
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/netcdfjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/netcdfjs/-/netcdfjs-3.0.0.tgz",
+      "integrity": "sha512-LOvT8KkC308qtpUkcBPiCMBtii7ZQCN6LxcVheWgyUeZ6DQWcpSRFV9dcVXLj/2eHZ/bre9tV5HTH4Sf93vrFw==",
+      "dependencies": {
+        "iobuffer": "^5.3.2"
+      }
+    },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/svelte": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.12.tgz",
+      "integrity": "sha512-d8+wsh5TfPwqVzbm4/HCXC783/KPHV60NvwitJnyTA5lWn1elhXMNWhXGCJ7PwPa8qFUnyJNIyuIRt2mT0WMug==",
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/svelte-i18n": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/svelte-i18n/-/svelte-i18n-3.7.4.tgz",
+      "integrity": "sha512-yGRCNo+eBT4cPuU7IVsYTYjxB7I2V8qgUZPlHnNctJj5IgbJgV78flsRzpjZ/8iUYZrS49oCt7uxlU3AZv/N5Q==",
+      "dependencies": {
+        "cli-color": "^2.0.3",
+        "deepmerge": "^4.2.2",
+        "esbuild": "^0.19.2",
+        "estree-walker": "^2",
+        "intl-messageformat": "^9.13.0",
+        "sade": "^1.8.1",
+        "tiny-glob": "^0.2.9"
+      },
+      "bin": {
+        "svelte-i18n": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "peerDependencies": {
+        "svelte": "^3 || ^4"
+      }
+    },
+    "node_modules/svelte-i18n/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/timers-ext": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.7.tgz",
+      "integrity": "sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==",
+      "dependencies": {
+        "es5-ext": "~0.10.46",
+        "next-tick": "1"
+      }
+    },
+    "node_modules/tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dependencies": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "node_modules/type": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+    },
+    "node_modules/upng-js": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/upng-js/-/upng-js-2.1.0.tgz",
+      "integrity": "sha512-d3xzZzpMP64YkjP5pr8gNyvBt7dLk/uGI67EctzDuVp4lCZyVMo0aJO6l/VDlgbInJYDY6cnClLoBp29eKWI6g==",
+      "dependencies": {
+        "pako": "^1.0.5"
+      }
+    },
+    "node_modules/upng-js/node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    }
+  },
+  "dependencies": {
+    "@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "@esbuild/aix-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "optional": true
+    },
+    "@esbuild/android-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "optional": true
+    },
+    "@esbuild/android-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "optional": true
+    },
+    "@esbuild/android-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "optional": true
+    },
+    "@esbuild/darwin-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "optional": true
+    },
+    "@esbuild/darwin-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "optional": true
+    },
+    "@esbuild/freebsd-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "optional": true
+    },
+    "@esbuild/freebsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "optional": true
+    },
+    "@esbuild/linux-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "optional": true
+    },
+    "@esbuild/linux-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "optional": true
+    },
+    "@esbuild/linux-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "optional": true
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "optional": true
+    },
+    "@esbuild/linux-mips64el": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "optional": true
+    },
+    "@esbuild/linux-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "optional": true
+    },
+    "@esbuild/linux-riscv64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "optional": true
+    },
+    "@esbuild/linux-s390x": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "optional": true
+    },
+    "@esbuild/linux-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
+      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "optional": true
+    },
+    "@esbuild/netbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "optional": true
+    },
+    "@esbuild/openbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "optional": true
+    },
+    "@esbuild/sunos-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "optional": true
+    },
+    "@esbuild/win32-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "optional": true
+    },
+    "@esbuild/win32-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "optional": true
+    },
+    "@esbuild/win32-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "optional": true
+    },
+    "@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "requires": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@formatjs/fast-memoize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@formatjs/icu-messageformat-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
+      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/icu-skeleton-parser": "1.3.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@formatjs/icu-skeleton-parser": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
+      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@formatjs/intl-localematcher": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
+      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@gradio/atoms": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@gradio/atoms/-/atoms-0.5.3.tgz",
+      "integrity": "sha512-1HZgmhbAPzCYt6muyttrJi/P5zXTnD3kVMgneXuDd2j9qB21kSqzshmpnPcvDO3lO0vro55HuxgH22PJ1XHWqg==",
+      "requires": {
+        "@gradio/icons": "^0.3.3",
+        "@gradio/utils": "^0.3.0"
+      }
+    },
+    "@gradio/column": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@gradio/column/-/column-0.1.0.tgz",
+      "integrity": "sha512-P24nqqVnMXBaDA1f/zSN5HZRho4PxP8Dq+7VltPHlmxIEiZYik2AJ4J0LeuIha34FDO0guu/16evdrpvGIUAfw=="
+    },
+    "@gradio/icons": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@gradio/icons/-/icons-0.3.3.tgz",
+      "integrity": "sha512-UFTHpjzFJVwaRzZsdslWxnKUPGgtVeErmUGzrG9di4Vn0oHn1FgHt1Yr2SVu4lO3JI/r2u3H49tb6iax4U9HjA=="
+    },
+    "@gradio/statustracker": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/@gradio/statustracker/-/statustracker-0.4.8.tgz",
+      "integrity": "sha512-B/SN7T9BbcdzPrWYfKVxwy3e4u85MS+DAZSeuXgPbAL5n5QravCtvNW7zwkUWb0OlBloaglN3Y7K3M8l1hR5qg==",
+      "requires": {
+        "@gradio/atoms": "^0.5.3",
+        "@gradio/column": "^0.1.0",
+        "@gradio/icons": "^0.3.3",
+        "@gradio/utils": "^0.3.0"
+      }
+    },
+    "@gradio/theme": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@gradio/theme/-/theme-0.2.0.tgz",
+      "integrity": "sha512-33c68Nk7oRXLn08OxPfjcPm7S4tXGOUV1I1bVgzdM2YV5o1QBOS1GEnXPZPu/CEYPePLMB6bsDwffrLEyLGWVQ=="
+    },
+    "@gradio/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@gradio/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-VxP0h7UoWazkdSB875ChvTXWamBwMguuRc+8OyQFZjdj14lcqLEQuj54es3FDBpXOp5GMLFh48Q5FLLjYxMgSg==",
+      "requires": {
+        "@gradio/theme": "^0.2.0",
+        "svelte-i18n": "^3.6.0"
+      }
+    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "peer": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "peer": true
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "peer": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "peer": true
+    },
+    "3dmol": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/3dmol/-/3dmol-2.1.0.tgz",
+      "integrity": "sha512-w1pfTR8+pDtOpxbGDrBWCbOXiTBqLhHO/OQ5xK3nD4trM0OTPCl8opaTl2iyCfwFRUbqmd2I4Qtjw7x9Boe+OA==",
+      "requires": {
+        "iobuffer": "^5.3.1",
+        "netcdfjs": "^3.0.0",
+        "pako": "^2.1.0",
+        "upng-js": "^2.1.0"
+      }
+    },
+    "acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "peer": true
+    },
+    "aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "peer": true,
+      "requires": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "axobject-query": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
+      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
+      "peer": true,
+      "requires": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "cli-color": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/cli-color/-/cli-color-2.0.4.tgz",
+      "integrity": "sha512-zlnpg0jNcibNrO7GG9IeHH7maWFeCz+Ja1wx/7tZNU5ASSSSZ+/qZciM0/LHCYxSdqv5h2sdbQ/PXYdOuetXvA==",
+      "requires": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.64",
+        "es6-iterator": "^2.0.3",
+        "memoizee": "^0.4.15",
+        "timers-ext": "^0.1.7"
+      }
+    },
+    "code-red": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
+        "estree-walker": "^3.0.3",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "peer": true,
+      "requires": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      }
+    },
+    "d": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
+      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+      "requires": {
+        "es5-ext": "^0.10.64",
+        "type": "^2.7.2"
+      }
+    },
+    "deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+    },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "peer": true
+    },
+    "es5-ext": {
+      "version": "0.10.64",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
+      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+      "requires": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "esniff": "^2.0.1",
+        "next-tick": "^1.1.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
+      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+      "requires": {
+        "d": "^1.0.2",
+        "ext": "^1.7.0"
+      }
+    },
+    "es6-weak-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.46",
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "esbuild": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
+      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "requires": {
+        "@esbuild/aix-ppc64": "0.19.12",
+        "@esbuild/android-arm": "0.19.12",
+        "@esbuild/android-arm64": "0.19.12",
+        "@esbuild/android-x64": "0.19.12",
+        "@esbuild/darwin-arm64": "0.19.12",
+        "@esbuild/darwin-x64": "0.19.12",
+        "@esbuild/freebsd-arm64": "0.19.12",
+        "@esbuild/freebsd-x64": "0.19.12",
+        "@esbuild/linux-arm": "0.19.12",
+        "@esbuild/linux-arm64": "0.19.12",
+        "@esbuild/linux-ia32": "0.19.12",
+        "@esbuild/linux-loong64": "0.19.12",
+        "@esbuild/linux-mips64el": "0.19.12",
+        "@esbuild/linux-ppc64": "0.19.12",
+        "@esbuild/linux-riscv64": "0.19.12",
+        "@esbuild/linux-s390x": "0.19.12",
+        "@esbuild/linux-x64": "0.19.12",
+        "@esbuild/netbsd-x64": "0.19.12",
+        "@esbuild/openbsd-x64": "0.19.12",
+        "@esbuild/sunos-x64": "0.19.12",
+        "@esbuild/win32-arm64": "0.19.12",
+        "@esbuild/win32-ia32": "0.19.12",
+        "@esbuild/win32-x64": "0.19.12"
+      }
+    },
+    "esniff": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
+      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+      "requires": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.62",
+        "event-emitter": "^0.3.5",
+        "type": "^2.7.2"
+      }
+    },
+    "estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "peer": true,
+      "requires": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "requires": {
+        "type": "^2.7.2"
+      }
+    },
+    "globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+    },
+    "globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
+    "intl-messageformat": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "iobuffer": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.3.2.tgz",
+      "integrity": "sha512-kO3CjNfLZ9t+tHxAMd+Xk4v3D/31E91rMs1dHrm7ikEQrlZ8mLDbQ4z3tZfDM48zOkReas2jx8MWSAmN9+c8Fw=="
+    },
+    "is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "peer": true,
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
+    "locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "peer": true
+    },
+    "lru-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
+      "integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
+      "requires": {
+        "es5-ext": "~0.10.2"
+      }
+    },
+    "magic-string": {
+      "version": "0.30.8",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
+      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
+    "mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "peer": true
+    },
+    "memoizee": {
+      "version": "0.4.15",
+      "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
+      "integrity": "sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==",
+      "requires": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.53",
+        "es6-weak-map": "^2.0.3",
+        "event-emitter": "^0.3.5",
+        "is-promise": "^2.2.2",
+        "lru-queue": "^0.1.0",
+        "next-tick": "^1.1.0",
+        "timers-ext": "^0.1.7"
+      }
+    },
+    "mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="
+    },
+    "netcdfjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/netcdfjs/-/netcdfjs-3.0.0.tgz",
+      "integrity": "sha512-LOvT8KkC308qtpUkcBPiCMBtii7ZQCN6LxcVheWgyUeZ6DQWcpSRFV9dcVXLj/2eHZ/bre9tV5HTH4Sf93vrFw==",
+      "requires": {
+        "iobuffer": "^5.3.2"
+      }
+    },
+    "next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
+    "pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
+    "periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "peer": true,
+      "requires": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "requires": {
+        "mri": "^1.1.0"
+      }
+    },
+    "source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "peer": true
+    },
+    "svelte": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.12.tgz",
+      "integrity": "sha512-d8+wsh5TfPwqVzbm4/HCXC783/KPHV60NvwitJnyTA5lWn1elhXMNWhXGCJ7PwPa8qFUnyJNIyuIRt2mT0WMug==",
+      "peer": true,
+      "requires": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "svelte-i18n": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/svelte-i18n/-/svelte-i18n-3.7.4.tgz",
+      "integrity": "sha512-yGRCNo+eBT4cPuU7IVsYTYjxB7I2V8qgUZPlHnNctJj5IgbJgV78flsRzpjZ/8iUYZrS49oCt7uxlU3AZv/N5Q==",
+      "requires": {
+        "cli-color": "^2.0.3",
+        "deepmerge": "^4.2.2",
+        "esbuild": "^0.19.2",
+        "estree-walker": "^2",
+        "intl-messageformat": "^9.13.0",
+        "sade": "^1.8.1",
+        "tiny-glob": "^0.2.9"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+        }
+      }
+    },
+    "timers-ext": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.7.tgz",
+      "integrity": "sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==",
+      "requires": {
+        "es5-ext": "~0.10.46",
+        "next-tick": "1"
+      }
+    },
+    "tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "requires": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
+    "tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "type": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+    },
+    "upng-js": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/upng-js/-/upng-js-2.1.0.tgz",
+      "integrity": "sha512-d3xzZzpMP64YkjP5pr8gNyvBt7dLk/uGI67EctzDuVp4lCZyVMo0aJO6l/VDlgbInJYDY6cnClLoBp29eKWI6g==",
+      "requires": {
+        "pako": "^1.0.5"
+      },
+      "dependencies": {
+        "pako": {
+          "version": "1.0.11",
+          "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+          "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+        }
+      }
+    }
+  }
+}

src/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "gradio_cofoldinginput",
+  "version": "0.4.12",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "main": "Index.svelte",
+  "exports": {
+    ".": "./Index.svelte",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.5.3",
+    "@gradio/icons": "0.3.3",
+    "@gradio/statustracker": "0.4.8",
+    "@gradio/utils": "0.3.0",
+    "3dmol": "^2.1.0"
+  }
+}

src/frontend/shared/Accordion.svelte

@@ -0,0 +1,1694 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  import Sequence from "./Sequence.svelte";
+  import SearchInput from "./SearchInput.svelte";
+  import Molecule from "./Molecule.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  export let vals = [];
+
+  export let covMods = [];
+
+  let showCovModVals = [];
+  $: {
+    if (covMods) {
+      // iterate over each val
+      showCovModVals = vals.map((val) => {
+        // check if val is in covMods and return index in CovMods or null
+        return covMods.findIndex((covMod) => covMod.ligand === val.chain);
+        // if index is not -1 return true else false
+
+        // return covMods.some((covMod) => covMod.ligand === val.chain);
+      });
+
+      // dispatch("updateCovMod", covMods);
+    }
+  }
+
+  let labels = {
+    DNA: "NA sequence",
+    RNA: "NA sequence",
+    protein: "Protein sequence",
+    ligand: "Small molecule",
+  };
+
+  let colorCode = {
+    DNA: "bg-green-200 text-blue-800",
+    RNA: "bg-green-200 text-blue-800",
+    protein: "bg-blue-200 text-blue-800",
+    ligand: "bg-orange-200 text-blue-800",
+  };
+
+  let metals = [
+    "ZN",
+    "MG",
+    "CA",
+    "FE",
+    "NA",
+    "K",
+    "CL",
+    "CU",
+    "MN",
+    "CO",
+    "NI",
+  ];
+
+  let proteinChains = [];
+
+  $: proteinChains = vals
+    .filter((val) => val.class === "protein")
+    .map((val) => val.chain);
+
+  let ligandChains = [];
+
+  $: ligandChains = vals
+    .filter((val) => val.class === "ligand")
+    .map((val) => val.chain);
+
+  let residue_atoms = {
+    A: ["C", "CA", "CB", "N", "O"],
+    R: ["C", "CA", "CB", "CG", "CD", "CZ", "N", "NE", "O", "NH1", "NH2"],
+    D: ["C", "CA", "CB", "CG", "N", "O", "OD1", "OD2"],
+    N: ["C", "CA", "CB", "CG", "N", "ND2", "O", "OD1"],
+    C: ["C", "CA", "CB", "N", "O", "SG"],
+    E: ["C", "CA", "CB", "CG", "CD", "N", "O", "OE1", "OE2"],
+    N: ["C", "CA", "CB", "CG", "CD", "N", "NE2", "O", "OE1"],
+    G: ["C", "CA", "N", "O"],
+    H: ["C", "CA", "CB", "CG", "CD2", "CE1", "N", "ND1", "NE2", "O"],
+    I: ["C", "CA", "CB", "CG1", "CG2", "CD1", "N", "O"],
+    L: ["C", "CA", "CB", "CG", "CD1", "CD2", "N", "O"],
+    K: ["C", "CA", "CB", "CG", "CD", "CE", "N", "NZ", "O"],
+    M: ["C", "CA", "CB", "CG", "CE", "N", "O", "SD"],
+    F: ["C", "CA", "CB", "CG", "CD1", "CD2", "CE1", "CE2", "CZ", "N", "O"],
+    P: ["C", "CA", "CB", "CG", "CD", "N", "O"],
+    S: ["C", "CA", "CB", "N", "O", "OG"],
+    T: ["C", "CA", "CB", "CG2", "N", "O", "OG1"],
+    W: [
+      "C",
+      "CA",
+      "CB",
+      "CG",
+      "CD1",
+      "CD2",
+      "CE2",
+      "CE3",
+      "CZ2",
+      "CZ3",
+      "CH2",
+      "N",
+      "NE1",
+      "O",
+    ],
+    Y: [
+      "C",
+      "CA",
+      "CB",
+      "CG",
+      "CD1",
+      "CD2",
+      "CE1",
+      "CE2",
+      "CZ",
+      "N",
+      "O",
+      "OH",
+    ],
+    V: ["C", "CA", "CB", "CG1", "CG2", "N", "O"],
+  };
+
+  let resmap = {
+    H: "HIS",
+    A: "ALA",
+    R: "ARG",
+    N: "ASN",
+    D: "ASP",
+    C: "CYS",
+    E: "GLU",
+    Q: "GLN",
+    G: "GLY",
+    H: "HIS",
+    I: "ILE",
+    L: "LEU",
+    K: "LYS",
+    M: "MET",
+    F: "PHE",
+    P: "PRO",
+    S: "SER",
+    T: "THR",
+    W: "TRP",
+    Y: "TYR",
+    V: "VAL",
+  };
+
+  function getResAtoms(covMod) {
+    // get sequence of matching protein chain
+    let seq = vals.find((val) => val.chain === covMod.protein).sequence;
+
+    //do something if sequence is too short
+    if (seq.length < covMod.residue) {
+      alert("Residue number is too high");
+      return [];
+    }
+    // get residue
+    let residue = seq[covMod.residue - 1];
+    // get atoms
+    return residue_atoms[residue];
+  }
+
+  function getResname(covMod) {
+    // get sequence of matching protein chain
+    let seq = vals.find((val) => val.chain === covMod.protein).sequence;
+    // get residue
+    let residue = seq[covMod.residue - 1];
+    // get atoms
+    return resmap[residue];
+  }
+
+  function updateMol(event) {
+    let index = event.detail.index;
+    covMods[index].mol = event.detail.mol;
+    covMods[index].attachmentIndex = event.detail.attachmentIndex;
+    covMods[index].deleteIndexes = event.detail.deleteIndexes;
+
+    dispatch("updateCovMod", covMods);
+  }
+
+  function handleMessage(event) {
+    // fetch sdf content from https://files.rcsb.org/ligands/download/{name}_ideal.sdf
+    // alert(event.detail.text);
+
+    fetch(
+      `https://files.rcsb.org/ligands/download/${event.detail.text}_ideal.sdf`
+    )
+      .then((response) => {
+        if (!response.ok) {
+          // Check if the status code is 200
+          throw new Error("Network response was not ok");
+        }
+        return response.text();
+      })
+      .then((data) => {
+        dispatch("updateVals", {
+          sdf: data,
+          index: event.detail.index,
+          close: true,
+        });
+      })
+      .catch((error) => {
+        alert("Error fetching sdf file");
+      });
+  }
+</script>
+
+<div id="accordion-collapse" data-accordion="collapse">
+  {#each vals as item, i}
+    <h2 id={`accordion-collapse-heading-${i}`}>
+      <button
+        type="button"
+        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>
+          <span
+            class="inline-flex items-center justify-center p-1 px-2 text-xs font-semibold rounded-full {colorCode[
+              item.class
+            ]}"
+          >
+            {item.chain}
+          </span>
+          <span>{labels[item.class]}</span>
+          <span class="px-2 text-gray-800 font-bold">
+            {#if !item.open && item.class === "ligand"}
+              {#if metals.includes(item.name)}
+                {item.name}
+              {:else}
+                {item.smiles}
+              {/if}
+            {/if}
+          </span>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <svg
+            data-slot="icon"
+            fill="none"
+            stroke-width="3"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            class="w-4 h-4 text-red-800"
+            on:click={(e) => {
+              dispatch("removeVal", i);
+            }}
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6 18 18 6M6 6l12 12"
+            ></path>
+          </svg>
+
+          <svg
+            data-accordion-icon
+            class="w-3 h-3 shrink-0"
+            class:rotate-180={item.open}
+            class:-rotate-90={!item.open}
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 10 6"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 5 5 1 1 5"
+            />
+          </svg>
+        </div>
+      </button>
+    </h2>
+
+    {#if item.open}
+      <div
+        id={`accordion-collapse-body-${i}`}
+        aria-labelledby={`accordion-collapse-heading-${i}`}
+      >
+        <div
+          class="p-5 border border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+        >
+          {#if ["DNA", "RNA", "protein"].includes(item.class)}
+            <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"
+              placeholder="MSAVGH..."
+              value={item.sequence}
+              on:input={(e) => {
+                //   vals[i].sequence = e.target.value;
+                dispatch("updateVals", { sequence: e.target.value, index: i });
+              }}
+            ></textarea>
+          {:else if item.class === "ligand"}
+            <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"
+              placeholder="SMILES like CCC ..."
+              value={item.smiles}
+              on:input={(e) => {
+                //   vals[i].sequence = e.target.value;
+                dispatch("updateVals", { smiles: e.target.value, index: i });
+              }}
+            ></textarea>
+
+            <div class="text-center text-gray-400 w-full my-2">- or -</div>
+
+            <SearchInput
+              database="rcsb-3ligand"
+              index={i}
+              on:triggerFetch={handleMessage}
+            />
+
+            <div class="text-center text-gray-400 w-full my-2">- or -</div>
+
+            <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"
+              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 });
+              }}
+            ></textarea>
+
+            <div class="text-center text-gray-400 w-full my-2">- or -</div>
+
+            <div class="text-center text-gray-600 font-bold mb-2">
+              Metal ion
+            </div>
+
+            <div class="flex justify-center space-x-2">
+              {#each metals as metal}
+                <button
+                  class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden rounded-full dark:bg-gray-600"
+                  class:bg-blue-200={item.name === metal}
+                  class:bg-violet-100={item.name !== metal}
+                  on:click={() =>
+                    dispatch("updateVals", { name: metal, index: i })}
+                >
+                  <span class="font-medium text-gray-600 dark:text-gray-300"
+                    >{metal}</span
+                  >
+                </button>
+              {/each}
+            </div>
+          {/if}
+
+          <!-- <div class="text-center text-gray-400 w-full my-2">- or -</div>
+
+          <label
+            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white hidden"
+            for="file_input">Upload file</label
+          >
+          <input
+            class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+            aria-describedby="file_input_help"
+            id="file_input"
+            type="file"
+          />
+          <p
+            class="mt-1 text-sm text-gray-500 dark:text-gray-300"
+            id="file_input_help"
+          >
+            .fasta files
+          </p> -->
+        </div>
+      </div>
+    {/if}
+    {#if !item.open}
+      {#if ["DNA", "RNA", "protein"].includes(item.class)}
+        <div
+          id={`accordion-collapse-body-${i}`}
+          aria-labelledby={`accordion-collapse-heading-${i}`}
+        >
+          <div
+            class="p-5 border border-t-0 border-gray-200 dark:border-gray-700"
+            class:border-b-0={i != vals.length - 1}
+          >
+            {#if item.sequence !== ""}
+              <Sequence seq={item.sequence} />
+            {/if}
+          </div>
+        </div>
+      {:else if item.class === "ligand"}
+        {#if item.sdf !== ""}
+          <div
+            class="p-5 border border-t-0 border-gray-200 dark:border-gray-700"
+            class:border-b-0={i != vals.length - 1}
+          >
+            <div class="relative">
+              <Molecule
+                molvalue={item.sdf}
+                showCovMod={showCovModVals[i]}
+                on:updateMol={updateMol}
+              />
+            </div>
+          </div>
+          <!-- {:else if metals.includes(item.name)}
+          {item.name}
+        {:else}
+          {item.smiles} -->
+        {/if}
+      {/if}
+    {/if}
+  {/each}
+
+  <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
+    {#if covMods.length > 0}
+      <h4 class="text-center font-bold text-xl">Covalent Modification</h4>
+      {#each covMods as covMod, i}
+        <div class="flex p-10">
+          <div class="flex divide-x rounded border p-1">
+            <div class="w-3/5 flex-col px-2">
+              <div class="flex justify-center">
+                <span class="text-base font-medium text-gray-900">Protein</span>
+              </div>
+              <div class="grid grid-cols-4 font-bold">
+                <span>Chain</span>
+                <span>Residue</span>
+                <span>Atom</span>
+                <span>Chirality</span>
+              </div>
+              <div class="grid grid-cols-4">
+                <select
+                  name=""
+                  id=""
+                  bind:value={covMods[i].protein}
+                  on:change={() => dispatch("updateCovMod", covMods)}
+                >
+                  {#each proteinChains as chain}
+                    <option value={chain}>{chain}</option>
+                  {/each}
+                </select>
+                <input
+                  type="text"
+                  placeholder="residue "
+                  class="px-3"
+                  value={covMod.residue}
+                  on:input={(e) => {
+                    covMods[i].residue = e.target.value;
+                    dispatch("updateCovMod", covMods);
+                  }}
+                />
+
+                <select
+                  name=""
+                  id=""
+                  bind:value={covMods[i].atom}
+                  on:change={() => dispatch("updateCovMod", covMods)}
+                >
+                  {#if covMod.residue != ""}
+                    {#each getResAtoms(covMod) as atom}}
+                      <option value={atom}>{getResname(covMod)}:{atom}</option>
+                    {/each}
+                  {:else}
+                    <option disabled></option>
+                  {/if}
+                </select>
+
+                <select
+                  name=""
+                  id=""
+                  bind:value={covMods[i].protein_symmetry}
+                  on:change={() => dispatch("updateCovMod", covMods)}
+                >
+                  <option value="">no chirality defined</option>
+                  <option value="CW">CW</option>
+                  <option value="CCW">CCW</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="w-2/5 px-2">
+              <div class="flex-col p-1">
+                <div class="flex justify-center">
+                  <span
+                    class="w-full whitespace-nowrap text-center text-base font-medium text-gray-900"
+                    >Small molecule</span
+                  >
+                </div>
+                <div class="grid grid-cols-3 font-bold">
+                  <span>Chain</span>
+                  <span title="click on atom in structure">Atom index </span>
+
+                  <span>Chirality</span>
+                </div>
+                <div class="grid grid-cols-3">
+                  <select
+                    name=""
+                    id=""
+                    title="click on atom in structure"
+                    bind:value={covMods[i].ligand}
+                    on:change={() => dispatch("updateCovMod", covMods)}
+                  >
+                    {#each ligandChains as chain}
+                      <option value={chain} selected={chain === covMod.ligand}
+                        >{chain}</option
+                      >
+                    {/each}
+                  </select>
+                  <div>
+                    {#if covMod.attachmentIndex}
+                      <p class="font-mono">index {covMod.attachmentIndex}</p>
+                    {:else}
+                      <p class="font-mono">click on atom</p>
+                    {/if}
+                  </div>
+
+                  <select
+                    name=""
+                    id=""
+                    bind:value={covMods[i].ligand_symmetry}
+                    on:change={() => dispatch("updateCovMod", covMods)}
+                  >
+                    <option value="">no chirality defined</option>
+                    <option value="CW">CW</option>
+                    <option value="CCW">CCW</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center p-2">
+            <svg
+              data-slot="icon"
+              fill="none"
+              stroke-width="2"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+              class="w-8 h-8 text-red-800 cursor-pointer"
+              on:click={(e) => {
+                dispatch("removeCovMod", i);
+              }}
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6 18 18 6M6 6l12 12"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+  <!-- 
+  <h2 id="accordion-collapse-heading-2">
+    <button
+      type="button"
+      class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 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-2"
+      aria-expanded="false"
+      aria-controls="accordion-collapse-body-2"
+    >
+      <div>
+        <span
+          class="inline-flex items-center justify-center p-1 px-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full"
+        >
+          A
+        </span>
+        <span>NA sequence</span>
+      </div>
+      <svg
+        data-accordion-icon
+        class="w-3 h-3 -rotate-90 shrink-0"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 10 6"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5 5 1 1 5"
+        />
+      </svg>
+    </button>
+    <div class="px-2">
+      <Sequence />
+    </div>
+  </h2>
+
+  <div
+    id="accordion-collapse-body-2"
+    class="hidden"
+    aria-labelledby="accordion-collapse-heading-2"
+  >
+    <div
+      class="p-5 border border-b-0 border-gray-200 dark:border-gray-700"
+    ></div>
+  </div>
+  <h2 id="accordion-collapse-heading-3">
+    <button
+      type="button"
+      class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 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-3"
+      aria-expanded="false"
+      aria-controls="accordion-collapse-body-3"
+    >
+      <div>
+        <span
+          class="inline-flex items-center justify-center p-1 px-2 text-xs font-semibold text-blue-800 bg-orange-200 rounded-full"
+        >
+          C
+        </span>
+        <span>Small molecule</span>
+      </div>
+      <svg
+        data-accordion-icon
+        class="w-3 h-3 rotate-180 shrink-0"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 10 6"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5 5 1 1 5"
+        />
+      </svg>
+    </button>
+  </h2>
+  <div
+    id="accordion-collapse-body-3"
+    aria-labelledby="accordion-collapse-heading-3"
+  >
+    <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+        for="file_input">Upload file</label
+      >
+      <input
+        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+        aria-describedby="file_input_help"
+        id="file_input"
+        type="file"
+      />
+      <p
+        class="mt-1 text-sm text-gray-500 dark:text-gray-300"
+        id="file_input_help"
+      >
+        SVG, PNG, JPG or GIF (MAX. 800x400px).
+      </p>
+      <div class="text-center text-gray-400 w-full my-2">- or -</div>
+
+      <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"
+        placeholder="SMILES like CCC ..."
+      ></textarea>
+
+      <div class="text-center text-gray-400 w-full my-2">- or -</div>
+
+      <SearchInput database="rcsb-3ligand" />
+
+      <div class="text-center text-gray-400 w-full my-2">- or -</div>
+
+      <div class="text-center text-gray-600 font-bold mb-2">Metal ion</div>
+      <div class="flex justify-center space-x-2">
+        <div
+          class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-violet-100 rounded-full dark:bg-gray-600"
+        >
+          <span class="font-medium text-gray-600 dark:text-gray-300">ZN</span>
+        </div>
+
+        <div
+          class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-green-100 rounded-full dark:bg-gray-600"
+        >
+          <span class="font-medium text-gray-600 dark:text-gray-300">MG</span>
+        </div>
+
+        <div
+          class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-green-100 rounded-full dark:bg-gray-600"
+        >
+          <span class="font-medium text-gray-600 dark:text-gray-300">CA</span>
+        </div>
+
+        <div
+          class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-violet-100 rounded-full dark:bg-gray-600"
+        >
+          <span class="font-medium text-gray-600 dark:text-gray-300">FE</span>
+        </div>
+
+        <div
+          class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-yellow-100 rounded-full dark:bg-gray-600"
+        >
+          <span class="font-medium text-gray-600 dark:text-gray-300">NA</span>
+        </div>
+      </div>
+    </div>
+  </div> 
+
+   -->
+</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

@@ -0,0 +1,1438 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  export let vals = [];
+  function addNewChain(type) {
+    dispatch("addNewChain", {
+      type: type,
+    });
+  }
+  function addCovalentModification() {
+    dispatch("addCovalentModification");
+  }
+
+  let displayCovMod = false;
+  // check if vals contains at least one protein and one ligand with sdf set
+  $: {
+    displayCovMod =
+      vals.filter((val) => val.class === "protein" && val.sequence.length > 0)
+        .length > 0 &&
+      vals.filter((val) => val.class === "ligand" && val.sdf != "").length > 0;
+  }
+</script>
+
+<div>
+  <div class="flex justify-center mt-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"
+      on:click={() => {
+        addNewChain("protein");
+      }}
+    >
+      <svg
+        data-slot="icon"
+        fill="none"
+        stroke-width="1.5"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        class="w-4 h-4"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+        ></path>
+      </svg>
+
+      <span> Protein</span></button
+    >
+
+    <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"
+      on:click={() => {
+        addNewChain("DNA");
+      }}
+    >
+      <svg
+        data-slot="icon"
+        fill="none"
+        stroke-width="1.5"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        class="w-4 h-4"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+        ></path>
+      </svg>
+
+      <span> Nucleic acid</span></button
+    >
+
+    <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"
+      on:click={() => {
+        addNewChain("ligand");
+      }}
+    >
+      <svg
+        data-slot="icon"
+        fill="none"
+        stroke-width="1.5"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        class="w-4 h-4"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+        ></path>
+      </svg>
+
+      <span> Small molecule</span></button
+    >
+
+    {#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"
+        on:click={() => {
+          addCovalentModification();
+        }}
+      >
+        <svg
+          data-slot="icon"
+          fill="none"
+          stroke-width="1.5"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          class="w-4 h-4"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+          ></path>
+        </svg>
+
+        <span> Covalent modifcation</span></button
+      >
+    {/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/Molecule.svelte

@@ -0,0 +1,1029 @@
+<script>
+  import { createEventDispatcher, afterUpdate } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  import Dmol from "3dmol";
+
+  // export let whichCovMod = 0;
+
+  let viewer = null;
+
+  let attachmentIndex = null;
+  let deleteIndexes = [];
+
+  let mode = "attach";
+
+  function updateReps(viewer) {
+    viewer.setStyle({ stick: {} });
+    if (showCovMod > -1) {
+      if (attachmentIndex !== null) {
+        viewer.addStyle(
+          { index: attachmentIndex },
+          { sphere: { color: "blue", scale: 0.5 } }
+        );
+      }
+
+      viewer.addStyle(
+        { index: deleteIndexes },
+        { sphere: { color: "red", scale: 0.5 } }
+      );
+
+      dispatch("updateMol", {
+        attachmentIndex: attachmentIndex,
+        deleteIndexes: deleteIndexes,
+        index: showCovMod,
+        mol: viewer.exportJSON(),
+      });
+    }
+  }
+  function initializeMoleculeViewer(molecule, container) {
+    let viewer = Dmol.createViewer(container, {});
+    viewer.addModel(molecule, "sdf");
+    updateReps(viewer);
+    viewer.setBackgroundColor("white");
+    viewer.zoomTo();
+
+    viewer
+      .getModel(0)
+      .setClickable({}, true, function (atom, viewer, event, container) {
+        if (showCovMod > -1) {
+          if (mode === "attach") {
+            attachmentIndex = atom.serial;
+          } else {
+            if (deleteIndexes.includes(atom.serial)) {
+              deleteIndexes = deleteIndexes.filter(
+                (index) => index !== atom.serial
+              );
+            } else {
+              deleteIndexes.push(atom.serial);
+            }
+            deleteIndexes = deleteIndexes;
+            updateReps(viewer);
+          }
+        }
+      });
+    viewer.render();
+
+    return viewer;
+  }
+  export let molvalue = "";
+  export let showCovMod = -1;
+  let molcontainer = null;
+  afterUpdate(() => {
+    viewer = initializeMoleculeViewer(molvalue, molcontainer);
+  });
+</script>
+
+<div class="mol-wrapper">
+  <div class="relative">
+    <div class="mol-canvas" bind:this={molcontainer}></div>
+  </div>
+  <div class="flex flex-col justify-center">
+    {#if showCovMod > -1}
+      <div class="w-full text-center text-lg mb-2">Covalent Modification</div>
+      <div class="flex items-center space-x-2 justify-center mb-2 text-xs">
+        <svg
+          data-slot="icon"
+          fill="none"
+          stroke-width="1.5"
+          class="w-4 h-4"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672Zm-7.518-.267A8.25 8.25 0 1 1 20.25 10.5M8.288 14.212A5.25 5.25 0 1 1 17.25 10.5"
+          ></path>
+        </svg> <span class="px-2">click on atoms in viewer to select them</span>
+      </div>
+      <div
+        class="flex rounded-full border-2 border-gray-200 bg-gray-200 text-sm leading-none text-gray-500"
+      >
+        <button
+          class="w-1/2 flex items-center rounded-l-full px-4 py-2 transition-colors duration-300 ease-in hover:text-orange-600 focus:text-orange-600 focus:outline-none"
+          id="attach"
+          class:active={mode === "attach"}
+          on:click={() => (mode = "attach")}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="mx-1 h-4 w-4"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"
+            />
+          </svg>
+
+          <span>Attachment atom</span>
+        </button>
+        <button
+          class="w-1/2 flex items-center rounded-r-full px-4 py-2 transition-colors duration-300 ease-in hover:text-orange-600 focus:text-orange-600 focus:outline-none"
+          id="delete"
+          class:active={mode === "delete"}
+          on:click={() => (mode = "delete")}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="mx-1 h-4 w-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>Atoms to delete</span>
+        </button>
+      </div>
+
+      <div class="relative overflow-x-auto mt-3">
+        <table
+          class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
+        >
+          <thead
+            class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
+          >
+            <tr>
+              <th scope="col" class="px-6 py-3"> </th>
+              <th scope="col" class="px-6 py-3"> index </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+              <th
+                scope="row"
+                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white text-right"
+              >
+                Attachment atom
+              </th>
+              <td class="px-6 py-4 font-mono">
+                {#if attachmentIndex !== null}
+                  {attachmentIndex}
+                {:else}
+                  not selected
+                {/if}
+              </td>
+            </tr>
+
+            <tr class="bg-white dark:bg-gray-800">
+              <th
+                scope="row"
+                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white text-right"
+              >
+                Deleted atoms
+              </th>
+              <td class="px-6 py-4 font-mono">
+                {#if deleteIndexes.length > 0}
+                  {deleteIndexes.join(", ")}
+                {:else}
+                  no atoms are deleted
+                {/if}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .active {
+    background: white;
+    border-radius: 9999px;
+    color: rgb(234, 88, 12);
+  }
+  .mol-canvas {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+  }
+  .mol-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  /*
+! 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:                                         
+;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .mx-1 {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
+  .mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .mt-3 {
+    margin-top: 0.75rem;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .table {
+    display: table;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .h-4 {
+    height: 1rem;
+  }
+
+  .w-1\/2 {
+    width: 50%;
+  }
+
+  .w-4 {
+    width: 1rem;
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .rounded-full {
+    border-radius: 9999px;
+  }
+
+  .rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .border-2 {
+    border-width: 2px;
+  }
+
+  .border-b {
+    border-bottom-width: 1px;
+  }
+
+  .border-gray-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  }
+
+  .bg-gray-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  }
+
+  .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  }
+
+  .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+
+  .px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .font-mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+  }
+
+  .text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .font-medium {
+    font-weight: 500;
+  }
+
+  .uppercase {
+    text-transform: uppercase;
+  }
+
+  .leading-none {
+    line-height: 1;
+  }
+
+  .text-blue-400 {
+    --tw-text-opacity: 1;
+    color: rgb(96 165 250 / var(--tw-text-opacity));
+  }
+
+  .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity));
+  }
+
+  .text-gray-700 {
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity));
+  }
+
+  .text-gray-900 {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+  }
+
+  .transition-colors {
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .duration-300 {
+    transition-duration: 300ms;
+  }
+
+  .ease-in {
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+  }
+
+  .hover\:text-orange-600:hover {
+    --tw-text-opacity: 1;
+    color: rgb(234 88 12 / var(--tw-text-opacity));
+  }
+
+  .focus\:text-orange-600:focus {
+    --tw-text-opacity: 1;
+    color: rgb(234 88 12 / var(--tw-text-opacity));
+  }
+
+  .focus\:outline-none:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
+    text-align: right;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .dark\:border-gray-700 {
+      --tw-border-opacity: 1;
+      border-color: rgb(55 65 81 / var(--tw-border-opacity));
+    }
+
+    .dark\:bg-gray-700 {
+      --tw-bg-opacity: 1;
+      background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+    }
+
+    .dark\:bg-gray-800 {
+      --tw-bg-opacity: 1;
+      background-color: rgb(31 41 55 / var(--tw-bg-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));
+    }
+  }
+</style>

src/frontend/shared/SearchInput.svelte

@@ -0,0 +1,1422 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  export let database = "rcsb-bioass";
+  export let index = 0;
+  let databases = {
+    "rcsb-3ligand": "RCSB 3-Letter Codes",
+    pubchem: "Pubchem",
+    "rcsb-bioass": "RCSB BioAssembly",
+  };
+
+  let placeholder = {
+    "rcsb-3ligand": "e.g HEM, ZN, K, GOL ...",
+    pubchem: "molecule name",
+    "rcsb-bioass": "4 Letter PDB Code",
+  };
+
+  let currentSel = database;
+  let searchInput = "";
+
+  function triggerFetch() {
+    dispatch("triggerFetch", {
+      text: searchInput,
+      database: currentSel,
+      index: index,
+    });
+  }
+</script>
+
+<form 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"
+      >Search</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"
+      >{databases[currentSel]}
+      <!-- <svg
+        class="w-2.5 h-2.5 ms-2.5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 10 6"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m1 1 4 4 4-4"
+        />
+      </svg> -->
+    </button>
+    <div
+      id="dropdown"
+      class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
+    >
+      <ul
+        class="py-2 text-sm text-gray-700 dark:text-gray-200"
+        aria-labelledby="dropdown-button"
+      >
+        <li>
+          <button
+            type="button"
+            class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+            >Pubchem</button
+          >
+        </li>
+        <li>
+          <button
+            type="button"
+            class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+            >RCSB 3 Letter code</button
+          >
+        </li>
+      </ul>
+    </div>
+    <div class="relative w-full">
+      <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"
+        placeholder={placeholder[currentSel]}
+        on:input={(e) => (searchInput = e.target.value)}
+      />
+      <button
+        type="submit"
+        class="absolute top-0 end-0 p-2.5 text-sm font-medium h-full text-white bg-blue-700 rounded-e-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        on:click|preventDefault={triggerFetch}
+      >
+        <svg
+          class="w-4 h-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 20 20"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+          />
+        </svg>
+        <span class="sr-only">Search</span>
+      </button>
+    </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

@@ -0,0 +1,1336 @@
+<script>
+  export let seq = "";
+
+  // convert sequence into chunked array of 10
+
+  let chunked_seq = seq.match(/.{1,10}/g);
+
+  // store residue index of each residue per chunk
+  let chunk_ids = chunked_seq.map((chunk, i) => {
+    return chunk.split("").map((_, j) => {
+      return i * 10 + j + 1;
+    });
+  });
+</script>
+
+<div class="sequence_container text-xs">
+  {#each chunked_seq as chunk, i}
+    <div class="sequence__chunk">
+      {#each chunk as letter, j}
+        <span
+          class="p-0.1 text-center w-full inline hover:font-bold cursor-pointer item-selectable ds-selectable"
+          style="font-family: monospace;"
+        >
+          <div class="inline-block p-0.5" title="residue {chunk_ids[i][j]}">
+            {letter}
+          </div>
+        </span>
+      {/each}
+    </div>
+  {/each}
+</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/SequenceInput.svelte

@@ -0,0 +1,1699 @@
+<svelte:options accessors={true} />
+
+<script>
+  import { tick } from "svelte";
+
+  import Btn from "./Button.svelte";
+  import SearchInput from "./SearchInput.svelte";
+
+  import Accordion from "./Accordion.svelte";
+  import { createEventDispatcher, onMount, afterUpdate } from "svelte";
+
+  export let value = { chains: [], covMods: [] };
+
+  const dispatch = createEventDispatcher();
+
+  let metals = [
+    "ZN",
+    "MG",
+    "CA",
+    "FE",
+    "NA",
+    "K",
+    "CL",
+    "CU",
+    "MN",
+    "CO",
+    "NI",
+  ];
+
+  async function getSDF(id) {
+    let sdf = await fetch(
+      `https://files.rcsb.org/ligands/download/${id}_ideal.sdf`
+    )
+      .then((response) => {
+        if (!response.ok) {
+          // Check if the status code is 200
+          throw new Error("Network response was not ok");
+        }
+        return response.text();
+      })
+      .catch((error) => {
+        alert("Error fetching sdf file");
+      });
+    // console.log(sdf);
+    return sdf;
+  }
+
+  function nextChainTemp(currentChain) {
+    if (currentChain == "") {
+      return "A";
+    }
+    let nextChain = "";
+    if (currentChain == "Z") {
+      nextChain = "AA";
+    } else if (currentChain.length > 1 && currentChain.slice(-1) === "Z") {
+      nextChain = String.fromCharCode(currentChain.charCodeAt(0) + 1) + "A";
+    } else {
+      nextChain =
+        currentChain.slice(0, -1) +
+        String.fromCharCode(currentChain.slice(-1).charCodeAt(0) + 1);
+    }
+    return nextChain;
+  }
+  async function handleMessage(event) {
+    let pdbId = event.detail.text;
+    //convert to lowercase
+    pdbId = pdbId.toLowerCase();
+    let bioAssemblyInfo = await importBioAssembly(pdbId);
+    // console.log(bioAssemblyInfo);
+    // convert assembly info to vals
+    let tempVals = [];
+    let nextChain = "";
+
+    let promise = await Promise.all(
+      bioAssemblyInfo.map(async (entity) => {
+        if (["DNA", "RNA", "protein"].includes(entity.class)) {
+          for (let i = 0; i < entity.count; i++) {
+            nextChain = nextChainTemp(nextChain);
+            tempVals.push({
+              class: entity.class,
+              name: "",
+              smiles: "",
+              sdf: "",
+              sequence: entity.entityInfo,
+              open: false,
+              chain: nextChain,
+            });
+            await tick();
+          }
+        } else if (entity.class === "ligand") {
+          let name = "";
+          let sdf = "";
+          if (metals.includes(entity.entityInfo)) {
+            name = entity.entityInfo;
+          } else {
+            sdf = await getSDF(entity.entityInfo);
+          }
+          for (let i = 0; i < entity.count; i++) {
+            nextChain = nextChainTemp(nextChain);
+            tempVals.push({
+              class: entity.class,
+              name: name,
+              smiles: "",
+              sdf: sdf,
+              sequence: "",
+              open: false,
+              chain: nextChain,
+            });
+          }
+          await tick();
+        }
+      })
+    );
+    vals = tempVals;
+    dispatch("updateVals", vals);
+  }
+
+  let vals = [];
+  let covMods = [];
+
+  function update(event) {
+    // vals[event.detail.index].open = event.detail.open;
+    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 = "";
+    }
+    if (event.detail.smiles !== undefined) {
+      vals[event.detail.index].smiles = event.detail.smiles;
+      vals[event.detail.index].sdf = "";
+      vals[event.detail.index].name = "";
+    }
+    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 = "";
+    }
+    dispatch("updateVals", vals);
+  }
+
+  function getNextChainLetter() {
+    let highestChainLetter = "A";
+    for (let val of vals) {
+      if (val.chain > highestChainLetter) {
+        highestChainLetter = val.chain;
+      }
+    }
+
+    // Increment the highest chain letter to get the next chain letter
+    let nextChainLetter = "";
+    if (highestChainLetter < "Z") {
+      nextChainLetter = String.fromCharCode(
+        highestChainLetter.charCodeAt(0) + 1
+      );
+    } else {
+      let lastChar = highestChainLetter.slice(-1);
+      if (lastChar < "Z") {
+        nextChainLetter =
+          highestChainLetter.slice(0, -1) +
+          String.fromCharCode(lastChar.charCodeAt(0) + 1);
+      } else {
+        nextChainLetter = highestChainLetter + "A";
+      }
+    }
+
+    return nextChainLetter;
+  }
+
+  function insertChain(event) {
+    // what chain to add next
+    let nextChainLetter = getNextChainLetter();
+    vals.push({
+      class: event.detail.type,
+      name: "",
+      smiles: "",
+      sdf: "",
+      sequence: "",
+      open: true,
+      chain: nextChainLetter,
+    });
+    vals = vals;
+    // console.log(vals);
+  }
+
+  function remove(event) {
+    vals.splice(event.detail, 1);
+    vals = vals;
+  }
+
+  async function fetchMolecules(pdbId) {
+    const url = `https://www.ebi.ac.uk/pdbe/api/pdb/entry/molecules/${pdbId}`;
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(
+          `Error fetching molecules for PDB ID ${pdbId}: ${response.statusText}`
+        );
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error("Error fetching molecules:", error);
+    }
+  }
+
+  async function fetchXmlText(url) {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Error fetching XML: ${response.statusText}`);
+      }
+      const textData = await response.text();
+      return textData;
+    } catch (error) {
+      console.error("Error fetching XML:", error);
+    }
+  }
+
+  // Function to parse a single assembly element
+  function parseAssembly(assemblyElement) {
+    const assembly = {
+      id: assemblyElement.getAttribute("id"),
+      composition: assemblyElement.getAttribute("composition"),
+      molecularWeight: assemblyElement.getAttribute("molecular_weight"),
+      name: assemblyElement.getAttribute("name"),
+    };
+    const entities = [];
+    assemblyElement.querySelectorAll("entity").forEach((entityElement) => {
+      entities.push({
+        chainIds: entityElement.getAttribute("chain_ids"),
+        class: entityElement.getAttribute("class"),
+        count: entityElement.getAttribute("count"),
+        entityId: Number(entityElement.getAttribute("entity_id")), // Added entityId
+      });
+    });
+    assembly.entities = entities;
+    return assembly;
+  }
+
+  function extractEntityInfo(entity, moleculeData) {
+    if (
+      entity.class === "DNA" ||
+      entity.class === "RNA" ||
+      entity.class === "protein"
+    ) {
+      // find the entry in moleculedata that matches the entity ID
+      const matchingEntity = moleculeData.find(
+        (molecule) => molecule.entity_id === entity["entityId"]
+      );
+      if (matchingEntity) {
+        return matchingEntity.sequence;
+      }
+    } else {
+      const matchingEntity = moleculeData.find(
+        (molecule) => molecule.entity_id === entity["entityId"]
+      );
+      if (matchingEntity) {
+        // return the sequence of the matching entity
+        return matchingEntity.chem_comp_ids[0];
+      }
+    }
+  }
+
+  function importBioAssembly(pdbId) {
+    const moleculeData = fetchMolecules(pdbId)
+      .then((data) => {
+        return data;
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+
+    // Example usage
+    const xmlUrl = `https://www.ebi.ac.uk/pdbe/static/entry/${pdbId}-assembly.xml`;
+    const assemblies = fetchXmlText(xmlUrl).then((data) => {
+      // Parse the entire assembly list
+      const assemblyList = [];
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(data, "text/xml");
+      const assemblyElements = doc.querySelectorAll("assembly");
+      assemblyElements.forEach((assemblyElement) => {
+        assemblyList.push(parseAssembly(assemblyElement));
+      });
+
+      return assemblyList;
+    });
+
+    // wait for both fetches to complete
+    let result = Promise.all([moleculeData, assemblies]).then(
+      ([moleculeData, assemblies]) => {
+        let bioAssemblyInfo = [];
+
+        let assembly = assemblies[0];
+        assembly.entities.forEach((entity) => {
+          const entityInfo = extractEntityInfo(entity, moleculeData[pdbId]);
+          bioAssemblyInfo.push({
+            class: entity.class,
+            entityInfo: entityInfo,
+            count: entity.count,
+          });
+        });
+
+        return bioAssemblyInfo;
+      }
+    );
+    return result;
+  }
+  let display = false;
+
+  function addCovMod(event) {
+    let firstProteinChain = vals.find((val) => val.class === "protein").chain;
+
+    if (firstProteinChain === undefined) {
+      alert("Please add a protein chain first");
+      return;
+    }
+    let firstLigandChain = vals.find((val) => val.class === "ligand").chain;
+
+    if (firstLigandChain === undefined) {
+      alert("Please add a ligand chain first");
+      return;
+    }
+    let covMod = {
+      protein: firstProteinChain,
+      residue: "1",
+      atom: "N",
+      protein_symmetry: "CW",
+      ligand: firstLigandChain,
+      attachmentIndex: 1,
+      deleteIndexes: [],
+      ligand_symmetry: "CW",
+    };
+    covMods.push(covMod);
+    covMods = covMods;
+    vals = vals;
+    dispatch("updateCovMod", covMods);
+  }
+
+  function removeCovMod(event) {
+    covMods.splice(event.detail, 1);
+    covMods = covMods;
+  }
+  function syncCovMod(event) {
+    covMods = event.detail;
+    dispatch("updateCovMod", covMods);
+  }
+
+  onMount(async () => {
+    vals = value["chains"];
+    covMods = value["covMods"];
+    // vals = value["chains"];
+  });
+</script>
+
+{#if vals != undefined}
+  {#if vals.length > 0}
+    <Accordion
+      {vals}
+      {covMods}
+      on:updateVals={update}
+      on:removeVal={remove}
+      on:removeCovMod={removeCovMod}
+      on:updateCovMod={syncCovMod}
+    />
+  {:else}
+    <div class="my-8 text-center text-gray-600">Empty input</div>
+
+    <div class="text-center text-gray-400">
+      You can import a protein from the PDB
+    </div>
+    <SearchInput database="rcsb-bioass" on:triggerFetch={handleMessage} />
+
+    <div class="text-center text-gray-400 w-full my-2">
+      - or create the input from scratch -
+    </div>
+  {/if}
+{/if}
+<Btn
+  {vals}
+  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

@@ -0,0 +1,341 @@
+<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";
+
+	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;
+
+	$: value, el && lines !== max_lines && resize({ target: el });
+
+	$: if (value === null) value = "";
+
+	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;
+	});
+
+	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();
+
+	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 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");
+		}
+	}
+
+	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;
+		}
+	}
+
+	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);
+
+		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;
+		}
+
+		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);
+
+		if (!_value.trim()) return;
+		resize({ target: _el });
+
+		return {
+			destroy: () => _el.removeEventListener("input", resize)
+		};
+	}
+</script>
+
+<!-- svelte-ignore a11y-autofocus -->
+<label class:container>
+	<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}
+</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/shared/style.css

@@ -0,0 +1,1302 @@
+/*
+    ! 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));
+      }
+    }

src/heme.sdf

@@ -0,0 +1,163 @@
+
+ OpenBabel03292410433D
+
+ 75 82  0  0  0  0  0  0  0  0999 V2000
+   -0.1081   -0.0063    0.0245 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.0729   -0.1709    0.0153 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2350    0.0085   -0.0035 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.0537    0.1730    0.0009 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0718   -0.0653    0.0190 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1008   -0.1294    0.0160 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0504   -0.1750    0.0135 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.0108   -0.1401    0.0149 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0588   -0.2498    0.0099 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1745   -0.1447    0.0157 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1999   -0.1463   -0.0565 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.2737   -0.1616   -0.0568 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.3029   -0.1702   -0.0047 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.3068   -0.1656   -0.1150 O   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1332   -0.1353    0.0154 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1968   -0.1664    0.0209 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2437   -0.1171    0.0157 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2059   -0.0539    0.0070 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2102   -0.2399    0.0307 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.3170   -0.1248    0.0182 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.3468   -0.1709   -0.0192 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1982    0.0673   -0.0087 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2265    0.1300   -0.0222 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1755    0.1768   -0.0219 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1152    0.1423   -0.0070 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2995    0.1440   -0.0348 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1825    0.2490   -0.0346 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2100    0.2703   -0.0911 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0051    0.1376    0.0149 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0691    0.1694    0.0321 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1142    0.1194    0.0387 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0780    0.0568    0.0255 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0819    0.2432    0.0406 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1870    0.1266    0.0561 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.2287    0.1282   -0.0080 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.3016    0.1353    0.0095 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.3186    0.1388    0.0673 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.3477    0.1377   -0.0393 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0034   -0.0728    0.0161 N   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1410   -0.0693    0.0103 N   0  0  0  0  0  4  0  0  0  0  0  0
+    0.1302    0.0753   -0.0016 N   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0138    0.0716    0.0149 N   0  0  0  0  0  4  0  0  0  0  0  0
+    0.0505    0.0078   -0.0030 Fe  0  0  1  0  0  0  0  0  0  0  0  0
+    0.0749   -0.2254    0.0155 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2893    0.0115   -0.0076 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.0509    0.2272   -0.0042 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0610   -0.2653   -0.0423 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0164   -0.2740    0.0341 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1048   -0.2642    0.0351 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1831   -0.1931    0.0391 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.2012   -0.1061    0.0435 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1913   -0.0978   -0.0799 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1732   -0.1849   -0.0842 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1628   -0.2668    0.0330 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2397   -0.2587   -0.0111 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2376   -0.2474    0.0771 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.3463   -0.0931    0.0505 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.3997   -0.1800   -0.0139 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.3180   -0.1993   -0.0551 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.3277    0.0975   -0.0319 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.3055    0.1658   -0.0844 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.3181    0.1789    0.0027 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1651    0.2847    0.0021 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2307    0.2348   -0.1262 H   0  0  0  0  0  0  0  0  0  0  0  0
+    0.2118    0.3232   -0.1022 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0357    0.2707    0.0319 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1197    0.2592    0.0047 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0997    0.2527    0.0912 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.2026    0.0844    0.0869 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1946    0.1729    0.0839 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.2131    0.1704   -0.0387 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.2211    0.0818   -0.0357 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.3541   -0.1755   -0.1127 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.3938    0.1424   -0.0256 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1623   -0.0094    0.0283 H   0  0  0  0  0  0  0  0  0  0  0  0
+  1  5  1  0  0  0  0
+  1 32  2  0  0  0  0
+  1 75  1  0  0  0  0
+  2  8  1  0  0  0  0
+  2 15  2  0  0  0  0
+  2 44  1  0  0  0  0
+  3 18  1  0  0  0  0
+  3 22  2  0  0  0  0
+  3 45  1  0  0  0  0
+  4 25  2  0  0  0  0
+  4 29  1  0  0  0  0
+  4 46  1  0  0  0  0
+  5  6  2  0  0  0  0
+  5 39  1  0  0  0  0
+  6  7  1  0  0  0  0
+  6 10  1  0  0  0  0
+  7  8  2  0  0  0  0
+  7  9  1  0  0  0  0
+  8 39  1  0  0  0  0
+  9 47  1  0  0  0  0
+  9 48  1  0  0  0  0
+  9 49  1  0  0  0  0
+ 10 11  1  0  0  0  0
+ 10 50  1  0  0  0  0
+ 10 51  1  0  0  0  0
+ 11 12  1  0  0  0  0
+ 11 52  1  0  0  0  0
+ 11 53  1  0  0  0  0
+ 12 13  2  0  0  0  0
+ 12 14  1  0  0  0  0
+ 14 73  1  0  0  0  0
+ 15 16  1  0  0  0  0
+ 15 40  1  0  0  0  0
+ 16 17  2  0  0  0  0
+ 16 19  1  0  0  0  0
+ 17 18  1  0  0  0  0
+ 17 20  1  0  0  0  0
+ 18 40  2  0  0  0  0
+ 19 54  1  0  0  0  0
+ 19 55  1  0  0  0  0
+ 19 56  1  0  0  0  0
+ 20 21  2  0  0  0  0
+ 20 57  1  0  0  0  0
+ 21 58  1  0  0  0  0
+ 21 59  1  0  0  0  0
+ 22 23  1  0  0  0  0
+ 22 41  1  0  0  0  0
+ 23 24  2  0  0  0  0
+ 23 26  1  0  0  0  0
+ 24 25  1  0  0  0  0
+ 24 27  1  0  0  0  0
+ 25 41  1  0  0  0  0
+ 26 60  1  0  0  0  0
+ 26 61  1  0  0  0  0
+ 26 62  1  0  0  0  0
+ 27 28  2  0  0  0  0
+ 27 63  1  0  0  0  0
+ 28 64  1  0  0  0  0
+ 28 65  1  0  0  0  0
+ 29 30  1  0  0  0  0
+ 29 42  2  0  0  0  0
+ 30 31  2  0  0  0  0
+ 30 33  1  0  0  0  0
+ 31 32  1  0  0  0  0
+ 31 34  1  0  0  0  0
+ 32 42  1  0  0  0  0
+ 33 66  1  0  0  0  0
+ 33 67  1  0  0  0  0
+ 33 68  1  0  0  0  0
+ 34 35  1  0  0  0  0
+ 34 69  1  0  0  0  0
+ 34 70  1  0  0  0  0
+ 35 36  1  0  0  0  0
+ 35 71  1  0  0  0  0
+ 35 72  1  0  0  0  0
+ 36 37  2  0  0  0  0
+ 36 38  1  0  0  0  0
+ 38 74  1  0  0  0  0
+ 40 43  1  0  0  0  0
+ 41 43  1  0  0  0  0
+ 42 43  1  0  0  0  0
+ 43 39  1  6  0  0  0
+M  END
+$$$$

src/pyproject.toml

@@ -0,0 +1,42 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_cofoldinginput"
+version = "0.0.2"
+description = "Component to enter protein and DNA sequences + small molecules for cofolding"
+readme = "README.md"
+license = "MIT"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = ["gradio-custom-component", "gradio-template-Textbox"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<5.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'License :: OSI Approved :: Apache Software License',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_cofoldinginput/templates", "*.pyi", "backend/gradio_cofoldinginput/templates", "backend/gradio_cofoldinginput/templates", "backend/gradio_cofoldinginput/templates", "backend/gradio_cofoldinginput/templates", "backend/gradio_cofoldinginput/templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_cofoldinginput"]