eat-js-sdk 0.0.35 → 0.0.38

package/dist/eat-prompt-builder.mjs

@@ -698,7 +698,7 @@
     }
     component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
   }
-  function init(component, options, instance12, create_fragment23, not_equal, props, append_styles2 = null, dirty = [-1]) {
+  function init(component, options, instance12, create_fragment24, not_equal, props, append_styles2 = null, dirty = [-1]) {
     const parent_component = current_component;
     set_current_component(component);
     const $$ = component.$$ = {
@@ -737,7 +737,7 @@
     $$.update();
     ready = true;
     run_all($$.before_update);
-    $$.fragment = create_fragment23 ? create_fragment23($$.ctx) : false;
+    $$.fragment = create_fragment24 ? create_fragment24($$.ctx) : false;
     if (options.target) {
       if (options.hydrate) {
         start_hydrating();
@@ -5329,7 +5329,9 @@
     rawCategoryItems: [],
     hasAddItemAnimation: false,
     openCategoryContainer: [],
-    currentWordBinIndex: 0
+    currentWordBinIndex: 0,
+    currentTabContainer: "",
+    lastSelectedTabContainer: ""
   });
 
   // src/lib/assets/img/product/GripVertical.svelte
@@ -5387,6 +5389,7 @@
     let span2;
     let gripvertical;
     let div_class_value;
+    let button_aria_label_value;
     let button_class_value;
     let current;
     let mounted;
@@ -5407,25 +5410,34 @@
         span2 = element("span");
         create_component(gripvertical.$$.fragment);
         attr(span0, "class", span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
-        (ctx[6] ? "text-white" : ""));
+        (ctx[8] ? "text-white" : ""));
         attr(span1, "class", span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
-        ctx[5] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""));
+        ctx[7] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""));
         attr(span2, "class", "absolute");
         attr(div, "class", div_class_value = "group text-blue-1000 h-11 w-11 min-w-[44px] flex items-center justify-center btn-vertical-icon " + (!/*currentSelectedItemId*/
-        ctx[5] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""));
+        ctx[7] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""));
         attr(
           button,
           "id",
           /*wordButtonId*/
           ctx[2]
         );
+        attr(
+          button,
+          "tabindex",
+          /*tabIndex*/
+          ctx[4]
+        );
+        attr(button, "aria-label", button_aria_label_value = `${/*isWordItemSelected*/
+        ctx[8] ? "Selected option" : "Option"}: ${/*word*/
+        ctx[0]}`);
         attr(button, "class", button_class_value = "focus-ring flex items-center justify-between min-h-[54px] p-1 border border-gray-800 rounded-lg " + /*otherClass*/
         ctx[1] + " " + /*isClonedItem*/
         (ctx[3] ? "opacity-50 raw-focus-ring bg-violet-100" : "") + " " + /*considerCloneItemId*/
-        (ctx[4] === /*wordButtonId*/
+        (ctx[6] === /*wordButtonId*/
         ctx[2] ? "hidden" : "") + " " + /*isWordItemSelected*/
-        (ctx[6] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
-        ctx[5] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default"));
+        (ctx[8] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
+        ctx[7] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default"));
       },
       m(target, anchor) {
         insert(target, button, anchor);
@@ -5437,18 +5449,19 @@
         append(div, t2);
         append(div, span2);
         mount_component(gripvertical, span2, null);
+        ctx[13](button);
         current = true;
         if (!mounted) {
           dispose = [
             listen(button, "click", stop_propagation(function() {
               if (is_function(
                 /*selectItem*/
-                ctx[7](
+                ctx[9](
                   /*wordButtonId*/
                   ctx[2]
                 )
               ))
-                ctx[7](
+                ctx[9](
                   /*wordButtonId*/
                   ctx[2]
                 ).apply(this, arguments);
@@ -5456,16 +5469,22 @@
             listen(button, "touchend", stop_propagation(function() {
               if (is_function(
                 /*selectItem*/
-                ctx[7](
+                ctx[9](
                   /*wordButtonId*/
                   ctx[2]
                 )
               ))
-                ctx[7](
+                ctx[9](
                   /*wordButtonId*/
                   ctx[2]
                 ).apply(this, arguments);
-            }))
+            })),
+            listen(
+              button,
+              "keydown",
+              /*removeContainerTabSelected*/
+              ctx[10]
+            )
           ];
           mounted = true;
         }
@@ -5480,18 +5499,18 @@
             ctx[0]
           );
         if (!current || dirty & /*isWordItemSelected*/
-        64 && span0_class_value !== (span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
-        (ctx[6] ? "text-white" : ""))) {
+        256 && span0_class_value !== (span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
+        (ctx[8] ? "text-white" : ""))) {
           attr(span0, "class", span0_class_value);
         }
         if (!current || dirty & /*currentSelectedItemId*/
-        32 && span1_class_value !== (span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
-        ctx[5] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""))) {
+        128 && span1_class_value !== (span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
+        ctx[7] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""))) {
           attr(span1, "class", span1_class_value);
         }
         if (!current || dirty & /*currentSelectedItemId*/
-        32 && div_class_value !== (div_class_value = "group text-blue-1000 h-11 w-11 min-w-[44px] flex items-center justify-center btn-vertical-icon " + (!/*currentSelectedItemId*/
-        ctx[5] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""))) {
+        128 && div_class_value !== (div_class_value = "group text-blue-1000 h-11 w-11 min-w-[44px] flex items-center justify-center btn-vertical-icon " + (!/*currentSelectedItemId*/
+        ctx[7] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""))) {
           attr(div, "class", div_class_value);
         }
         if (!current || dirty & /*wordButtonId*/
@@ -5503,14 +5522,29 @@
             ctx[2]
           );
         }
+        if (!current || dirty & /*tabIndex*/
+        16) {
+          attr(
+            button,
+            "tabindex",
+            /*tabIndex*/
+            ctx[4]
+          );
+        }
+        if (!current || dirty & /*isWordItemSelected, word*/
+        257 && button_aria_label_value !== (button_aria_label_value = `${/*isWordItemSelected*/
+        ctx[8] ? "Selected option" : "Option"}: ${/*word*/
+        ctx[0]}`)) {
+          attr(button, "aria-label", button_aria_label_value);
+        }
         if (!current || dirty & /*otherClass, isClonedItem, considerCloneItemId, wordButtonId, isWordItemSelected, currentSelectedItemId*/
-        126 && button_class_value !== (button_class_value = "focus-ring flex items-center justify-between min-h-[54px] p-1 border border-gray-800 rounded-lg " + /*otherClass*/
+        462 && button_class_value !== (button_class_value = "focus-ring flex items-center justify-between min-h-[54px] p-1 border border-gray-800 rounded-lg " + /*otherClass*/
         ctx[1] + " " + /*isClonedItem*/
         (ctx[3] ? "opacity-50 raw-focus-ring bg-violet-100" : "") + " " + /*considerCloneItemId*/
-        (ctx[4] === /*wordButtonId*/
+        (ctx[6] === /*wordButtonId*/
         ctx[2] ? "hidden" : "") + " " + /*isWordItemSelected*/
-        (ctx[6] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
-        ctx[5] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default"))) {
+        (ctx[8] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
+        ctx[7] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default"))) {
           attr(button, "class", button_class_value);
         }
       },
@@ -5529,6 +5563,7 @@
           detach(button);
         }
         destroy_component(gripvertical);
+        ctx[13](null);
         mounted = false;
         run_all(dispose);
       }
@@ -5540,15 +5575,18 @@
     let { wordButtonId = "" } = $$props;
     let { isClonedItem = false } = $$props;
     let { containerId = "" } = $$props;
+    let { tabIndex = -1 } = $$props;
+    let { wordFocus = false } = $$props;
     let considerCloneItemId = "";
     let currentSelectedItemId = "";
     let isWordItemSelected = false;
     let isSelecItemFunctionCalled = false;
+    let wordButton;
     categoriseSettings.subscribe((value) => {
       const { considerCloneItemId: storeConsiderCloneItemId, selectedItemId: storeSelectedItemId } = value;
-      $$invalidate(4, considerCloneItemId = storeConsiderCloneItemId);
-      $$invalidate(5, currentSelectedItemId = storeSelectedItemId);
-      $$invalidate(6, isWordItemSelected = currentSelectedItemId === wordButtonId);
+      $$invalidate(6, considerCloneItemId = storeConsiderCloneItemId);
+      $$invalidate(7, currentSelectedItemId = storeSelectedItemId);
+      $$invalidate(8, isWordItemSelected = currentSelectedItemId === wordButtonId);
     });
     const selectItem = (itemId) => {
       if (isSelecItemFunctionCalled) {
@@ -5576,6 +5614,29 @@
         200
       );
     };
+    const removeContainerTabSelected = ({ key }) => {
+      if (key === "Escape") {
+        if (currentSelectedItemId) {
+          selectItem(wordButtonId);
+          return;
+        }
+        const { currentTabContainer } = get_store_value(categoriseSettings);
+        categoriseSettings.set({
+          ...get_store_value(categoriseSettings),
+          lastSelectedTabContainer: currentTabContainer,
+          currentTabContainer: ""
+        });
+      }
+      if (key === "Enter") {
+        selectItem(wordButtonId);
+      }
+    };
+    function button_binding($$value) {
+      binding_callbacks[$$value ? "unshift" : "push"](() => {
+        wordButton = $$value;
+        $$invalidate(5, wordButton);
+      });
+    }
     $$self.$$set = ($$props2) => {
       if ("word" in $$props2)
         $$invalidate(0, word = $$props2.word);
@@ -5586,18 +5647,41 @@
       if ("isClonedItem" in $$props2)
         $$invalidate(3, isClonedItem = $$props2.isClonedItem);
       if ("containerId" in $$props2)
-        $$invalidate(8, containerId = $$props2.containerId);
+        $$invalidate(11, containerId = $$props2.containerId);
+      if ("tabIndex" in $$props2)
+        $$invalidate(4, tabIndex = $$props2.tabIndex);
+      if ("wordFocus" in $$props2)
+        $$invalidate(12, wordFocus = $$props2.wordFocus);
+    };
+    $$self.$$.update = () => {
+      if ($$self.$$.dirty & /*wordFocus, wordButton*/
+      4128) {
+        $:
+          if (wordFocus) {
+            setTimeout(
+              () => {
+                wordButton.focus();
+              },
+              150
+            );
+          }
+      }
     };
     return [
       word,
       otherClass,
       wordButtonId,
       isClonedItem,
+      tabIndex,
+      wordButton,
       considerCloneItemId,
       currentSelectedItemId,
       isWordItemSelected,
       selectItem,
-      containerId
+      removeContainerTabSelected,
+      containerId,
+      wordFocus,
+      button_binding
     ];
   }
   var PromptCategoriseWordButton = class extends SvelteComponent {
@@ -5608,7 +5692,9 @@
         otherClass: 1,
         wordButtonId: 2,
         isClonedItem: 3,
-        containerId: 8
+        containerId: 11,
+        tabIndex: 4,
+        wordFocus: 12
       });
     }
     get word() {
@@ -5640,16 +5726,36 @@
       flush();
     }
     get containerId() {
-      return this.$$.ctx[8];
+      return this.$$.ctx[11];
     }
     set containerId(containerId) {
       this.$$set({ containerId });
       flush();
     }
+    get tabIndex() {
+      return this.$$.ctx[4];
+    }
+    set tabIndex(tabIndex) {
+      this.$$set({ tabIndex });
+      flush();
+    }
+    get wordFocus() {
+      return this.$$.ctx[12];
+    }
+    set wordFocus(wordFocus) {
+      this.$$set({ wordFocus });
+      flush();
+    }
   };
-  customElements.define("prompt-categorise-word-button", create_custom_element(PromptCategoriseWordButton, { "word": {}, "otherClass": {}, "wordButtonId": {}, "isClonedItem": { "type": "Boolean" }, "containerId": {} }, [], [], true));
+  customElements.define("prompt-categorise-word-button", create_custom_element(PromptCategoriseWordButton, { "word": {}, "otherClass": {}, "wordButtonId": {}, "isClonedItem": { "type": "Boolean" }, "containerId": {}, "tabIndex": {}, "wordFocus": { "type": "Boolean" } }, [], [], true));
   var PromptCategoriseWordButton_default = PromptCategoriseWordButton;
 
+  // src/lib/stores/modal.ts
+  var modalSettings = writable({
+    isModalOpen: false,
+    modalAriaLabel: ""
+  });
+
   // src/lib/composables/useCategorise.ts
   var useNavigateItem = (currentIndex, currentAnswer, direction, addWordBin = false) => {
     const wordBinData = currentAnswer.filter(
@@ -5682,17 +5788,25 @@
   // src/lib/components/prompt/categorise/PromptCategoriseDndContainer.svelte
   function get_each_context2(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[27] = list[i];
+    child_ctx[30] = list[i];
     return child_ctx;
   }
   function create_if_block_15(ctx) {
     let button;
+    let button_class_value;
     let mounted;
     let dispose;
     return {
       c() {
         button = element("button");
-        attr(button, "class", "absolute inset-0 bg-transparent rounded-lg");
+        attr(
+          button,
+          "aria-label",
+          /*ariaLabel*/
+          ctx[7]
+        );
+        attr(button, "class", button_class_value = "focus-ring absolute inset-0 bg-transparent rounded-lg focus-visible:border " + /*isContainerWordBin*/
+        (ctx[16] ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"));
       },
       m(target, anchor) {
         insert(target, button, anchor);
@@ -5701,12 +5815,22 @@
             button,
             "click",
             /*addAnswerItem*/
-            ctx[16]
+            ctx[19]
           );
           mounted = true;
         }
       },
-      p: noop,
+      p(ctx2, dirty) {
+        if (dirty[0] & /*ariaLabel*/
+        128) {
+          attr(
+            button,
+            "aria-label",
+            /*ariaLabel*/
+            ctx2[7]
+          );
+        }
+      },
       d(detaching) {
         if (detaching) {
           detach(button);
@@ -5724,8 +5848,8 @@
       c() {
         div = element("div");
         div.textContent = "Word Bin is empty";
-        attr(div, "role", "listbox");
-        attr(div, "tabindex", "0");
+        attr(div, "role", "group");
+        attr(div, "tabindex", "-1");
         attr(div, "class", "text-base leading-4 text-gray-800 p-5 border border-gray-400 rounded-lg border-dashed absolute top-12 right-4 left-4 bottom-4 flex items-center justify-center !bg-white md:top-20");
       },
       m(target, anchor) {
@@ -5736,13 +5860,13 @@
               div,
               "click",
               /*addAnswerItem*/
-              ctx[16]
+              ctx[19]
             ),
             listen(
               div,
               "keypress",
               /*addAnswerItem*/
-              ctx[16]
+              ctx[19]
             )
           ];
           mounted = true;
@@ -5765,30 +5889,43 @@
     promptcategorisewordbutton = new PromptCategoriseWordButton_default({
       props: {
         otherClass: "mr-2 mb-2 last:mr-0 " + /*item*/
-        (ctx[27].id === /*considerItemId*/
-        ctx[7] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
+        (ctx[30].id === /*considerItemId*/
+        ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
         ctx[5] ? "hidden md:flex" : "") + "\n        " + /*items*/
         (ctx[0][
           /*currentWordBinIndex*/
-          ctx[10]
+          ctx[11]
         ]?.id !== /*item*/
-        ctx[27].id && /*isContainerWordBin*/
-        ctx[13] ? "hidden md:flex" : ""),
+        ctx[30].id && /*isContainerWordBin*/
+        ctx[16] ? "hidden md:flex" : ""),
         word: (
           /*item*/
-          ctx[27].text
+          ctx[30].text
         ),
         wordButtonId: (
           /*item*/
-          ctx[27].id
+          ctx[30].id
         ),
         isClonedItem: (
           /*item*/
-          ctx[27].isClonedItem
+          ctx[30].isClonedItem
         ),
         containerId: (
           /*containerId*/
           ctx[3]
+        ),
+        tabIndex: (
+          /*currentTabContainer*/
+          ctx[13] !== /*containerId*/
+          ctx[3] || /*isModalOpen*/
+          ctx[14] ? -1 : 0
+        ),
+        wordFocus: (
+          /*currentTabContainer*/
+          ctx[13] === /*containerId*/
+          ctx[3] && /*item*/
+          ctx[30].id === /*items*/
+          ctx[0][0].id
         )
       }
     });
@@ -5808,34 +5945,47 @@
       p(new_ctx, dirty) {
         ctx = new_ctx;
         const promptcategorisewordbutton_changes = {};
-        if (dirty & /*items, considerItemId, showButton, currentWordBinIndex*/
-        1185)
+        if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex*/
+        2337)
           promptcategorisewordbutton_changes.otherClass = "mr-2 mb-2 last:mr-0 " + /*item*/
-          (ctx[27].id === /*considerItemId*/
-          ctx[7] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
+          (ctx[30].id === /*considerItemId*/
+          ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
           ctx[5] ? "hidden md:flex" : "") + "\n        " + /*items*/
           (ctx[0][
             /*currentWordBinIndex*/
-            ctx[10]
+            ctx[11]
           ]?.id !== /*item*/
-          ctx[27].id && /*isContainerWordBin*/
-          ctx[13] ? "hidden md:flex" : "");
-        if (dirty & /*items*/
+          ctx[30].id && /*isContainerWordBin*/
+          ctx[16] ? "hidden md:flex" : "");
+        if (dirty[0] & /*items*/
         1)
           promptcategorisewordbutton_changes.word = /*item*/
-          ctx[27].text;
-        if (dirty & /*items*/
+          ctx[30].text;
+        if (dirty[0] & /*items*/
         1)
           promptcategorisewordbutton_changes.wordButtonId = /*item*/
-          ctx[27].id;
-        if (dirty & /*items*/
+          ctx[30].id;
+        if (dirty[0] & /*items*/
         1)
           promptcategorisewordbutton_changes.isClonedItem = /*item*/
-          ctx[27].isClonedItem;
-        if (dirty & /*containerId*/
+          ctx[30].isClonedItem;
+        if (dirty[0] & /*containerId*/
         8)
           promptcategorisewordbutton_changes.containerId = /*containerId*/
           ctx[3];
+        if (dirty[0] & /*currentTabContainer, containerId, isModalOpen*/
+        24584)
+          promptcategorisewordbutton_changes.tabIndex = /*currentTabContainer*/
+          ctx[13] !== /*containerId*/
+          ctx[3] || /*isModalOpen*/
+          ctx[14] ? -1 : 0;
+        if (dirty[0] & /*currentTabContainer, containerId, items*/
+        8201)
+          promptcategorisewordbutton_changes.wordFocus = /*currentTabContainer*/
+          ctx[13] === /*containerId*/
+          ctx[3] && /*item*/
+          ctx[30].id === /*items*/
+          ctx[0][0].id;
         promptcategorisewordbutton.$set(promptcategorisewordbutton_changes);
       },
       i(local) {
@@ -5859,25 +6009,25 @@
   function create_fragment9(ctx) {
     let t0;
     let t1;
-    let div;
+    let section;
     let each_blocks = [];
     let each_1_lookup = /* @__PURE__ */ new Map();
-    let div_class_value;
-    let div_style_value;
+    let section_class_value;
+    let section_style_value;
     let dndzone_action;
     let current;
     let mounted;
     let dispose;
     let if_block0 = (
       /*dragDisabled*/
-      ctx[8] && /*sourceSelectedContainerId*/
-      ctx[9] !== /*containerId*/
+      ctx[9] && /*sourceSelectedContainerId*/
+      ctx[10] !== /*containerId*/
       ctx[3] && create_if_block_15(ctx)
     );
     let if_block1 = (
       /*totalRemainingWordBinItem*/
-      ctx[11] <= 0 && /*isContainerWordBin*/
-      ctx[13] && create_if_block5(ctx)
+      ctx[12] <= 0 && /*isContainerWordBin*/
+      ctx[16] && create_if_block5(ctx)
     );
     let each_value = ensure_array_like(Object.values(
       /*items*/
@@ -5885,7 +6035,7 @@
     ));
     const get_key = (ctx2) => (
       /*item*/
-      ctx2[27].id
+      ctx2[30].id
     );
     for (let i = 0; i < each_value.length; i += 1) {
       let child_ctx = get_each_context2(ctx, each_value, i);
@@ -5900,22 +6050,23 @@
         if (if_block1)
           if_block1.c();
         t1 = space();
-        div = element("div");
+        section = element("section");
         for (let i = 0; i < each_blocks.length; i += 1) {
           each_blocks[i].c();
         }
-        attr(div, "class", div_class_value = "flex flex-wrap " + /*containerClass*/
-        ctx[1]);
-        attr(div, "aria-dropeffect", "move");
-        attr(div, "role", "region");
+        attr(section, "role", "group");
+        attr(section, "class", section_class_value = "flex flex-wrap " + /*containerClass*/
+        ctx[1] + " " + /*items*/
+        (ctx[0].length ? "" : "invisible"));
+        attr(section, "aria-dropeffect", "move");
         attr(
-          div,
+          section,
           "id",
           /*containerId*/
           ctx[3]
         );
-        attr(div, "style", div_style_value = !/*isContainerWordBin*/
-        ctx[13] ? `padding-top: ${/*paddingTop*/
+        attr(section, "style", section_style_value = !/*isContainerWordBin*/
+        ctx[16] ? `padding-top: ${/*paddingTop*/
         ctx[6]}px;` : "");
       },
       m(target, anchor) {
@@ -5925,16 +6076,16 @@
         if (if_block1)
           if_block1.m(target, anchor);
         insert(target, t1, anchor);
-        insert(target, div, anchor);
+        insert(target, section, anchor);
         for (let i = 0; i < each_blocks.length; i += 1) {
           if (each_blocks[i]) {
-            each_blocks[i].m(div, null);
+            each_blocks[i].m(section, null);
           }
         }
         current = true;
         if (!mounted) {
           dispose = [
-            action_destroyer(dndzone_action = dndzone$2.call(null, div, {
+            action_destroyer(dndzone_action = dndzone$2.call(null, section, {
               items: (
                 /*items*/
                 ctx[0]
@@ -5949,35 +6100,38 @@
               ),
               dropTargetClasses: (
                 /*dropTargetClasses*/
-                ctx[12]
+                ctx[15]
               ),
               morphDisabled: true,
               dragDisabled: (
                 /*dragDisabled*/
-                ctx[8]
-              )
+                ctx[9]
+              ),
+              autoAriaDisabled: true,
+              zoneItemTabIndex: -1,
+              zoneTabIndex: -1
             })),
             listen(
-              div,
+              section,
               "consider",
               /*handleDndConsider*/
-              ctx[14]
+              ctx[17]
             ),
             listen(
-              div,
+              section,
               "finalize",
               /*handleDndFinalize*/
-              ctx[15]
+              ctx[18]
             )
           ];
           mounted = true;
         }
       },
-      p(ctx2, [dirty]) {
+      p(ctx2, dirty) {
         if (
           /*dragDisabled*/
-          ctx2[8] && /*sourceSelectedContainerId*/
-          ctx2[9] !== /*containerId*/
+          ctx2[9] && /*sourceSelectedContainerId*/
+          ctx2[10] !== /*containerId*/
           ctx2[3]
         ) {
           if (if_block0) {
@@ -5993,8 +6147,8 @@
         }
         if (
           /*totalRemainingWordBinItem*/
-          ctx2[11] <= 0 && /*isContainerWordBin*/
-          ctx2[13]
+          ctx2[12] <= 0 && /*isContainerWordBin*/
+          ctx2[16]
         ) {
           if (if_block1) {
             if_block1.p(ctx2, dirty);
@@ -6007,38 +6161,39 @@
           if_block1.d(1);
           if_block1 = null;
         }
-        if (dirty & /*Object, items, considerItemId, showButton, currentWordBinIndex, isContainerWordBin, containerId*/
-        9385) {
+        if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex, isContainerWordBin, containerId, currentTabContainer, isModalOpen*/
+        92457) {
           each_value = ensure_array_like(Object.values(
             /*items*/
             ctx2[0]
           ));
           group_outros();
-          each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block2, null, get_each_context2);
+          each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, section, outro_and_destroy_block, create_each_block2, null, get_each_context2);
           check_outros();
         }
-        if (!current || dirty & /*containerClass*/
-        2 && div_class_value !== (div_class_value = "flex flex-wrap " + /*containerClass*/
-        ctx2[1])) {
-          attr(div, "class", div_class_value);
+        if (!current || dirty[0] & /*containerClass, items*/
+        3 && section_class_value !== (section_class_value = "flex flex-wrap " + /*containerClass*/
+        ctx2[1] + " " + /*items*/
+        (ctx2[0].length ? "" : "invisible"))) {
+          attr(section, "class", section_class_value);
         }
-        if (!current || dirty & /*containerId*/
+        if (!current || dirty[0] & /*containerId*/
         8) {
           attr(
-            div,
+            section,
             "id",
             /*containerId*/
             ctx2[3]
           );
         }
-        if (!current || dirty & /*paddingTop*/
-        64 && div_style_value !== (div_style_value = !/*isContainerWordBin*/
-        ctx2[13] ? `padding-top: ${/*paddingTop*/
+        if (!current || dirty[0] & /*paddingTop*/
+        64 && section_style_value !== (section_style_value = !/*isContainerWordBin*/
+        ctx2[16] ? `padding-top: ${/*paddingTop*/
         ctx2[6]}px;` : "")) {
-          attr(div, "style", div_style_value);
+          attr(section, "style", section_style_value);
         }
-        if (dndzone_action && is_function(dndzone_action.update) && dirty & /*items, flipDurationMs, type, dragDisabled*/
-        277)
+        if (dndzone_action && is_function(dndzone_action.update) && dirty[0] & /*items, flipDurationMs, type, dragDisabled*/
+        533)
           dndzone_action.update.call(null, {
             items: (
               /*items*/
@@ -6054,13 +6209,16 @@
             ),
             dropTargetClasses: (
               /*dropTargetClasses*/
-              ctx2[12]
+              ctx2[15]
             ),
             morphDisabled: true,
             dragDisabled: (
               /*dragDisabled*/
-              ctx2[8]
-            )
+              ctx2[9]
+            ),
+            autoAriaDisabled: true,
+            zoneItemTabIndex: -1,
+            zoneTabIndex: -1
           });
       },
       i(local) {
@@ -6081,7 +6239,7 @@
         if (detaching) {
           detach(t0);
           detach(t1);
-          detach(div);
+          detach(section);
         }
         if (if_block0)
           if_block0.d(detaching);
@@ -6103,6 +6261,7 @@
     let { type = "categoriseType" } = $$props;
     let { showButton = true } = $$props;
     let { paddingTop = 73 } = $$props;
+    let { ariaLabel = "" } = $$props;
     let considerItemId = "";
     let selectedItemId = "";
     let dragDisabled = false;
@@ -6111,20 +6270,27 @@
     let cloneId;
     let currentWordBinIndex = 0;
     let totalRemainingWordBinItem = 0;
+    let currentTabContainer = "";
+    let isModalOpen = false;
     const dispatch = createEventDispatcher();
     const dropTargetClasses = ["!outline-none"];
     const isContainerWordBin = containerId === CONTAINER_WORD_BIN_ID;
     const { rawCategoryItems } = get_store_value(categoriseSettings);
+    modalSettings.subscribe((value) => {
+      const { isModalOpen: storeIsModalOpen } = value;
+      $$invalidate(14, isModalOpen = storeIsModalOpen);
+    });
     categoriseSettings.subscribe((value) => {
-      const { considerItemId: storeconsiderItemId, selectedItemId: storeSelectedItemId, currentAnswer: storeCurrentAnswer, sourceSelectedContainerId: storeSourceSelectedContainerId, currentWordBinIndex: storeCurrentWordBinIndex } = value;
-      $$invalidate(7, considerItemId = storeconsiderItemId);
-      $$invalidate(8, dragDisabled = !!storeSelectedItemId);
+      const { considerItemId: storeconsiderItemId, selectedItemId: storeSelectedItemId, currentAnswer: storeCurrentAnswer, sourceSelectedContainerId: storeSourceSelectedContainerId, currentWordBinIndex: storeCurrentWordBinIndex, currentTabContainer: storeCurrentTabContainer } = value;
+      $$invalidate(8, considerItemId = storeconsiderItemId);
+      $$invalidate(9, dragDisabled = !!storeSelectedItemId);
       currentAnswer = storeCurrentAnswer;
       selectedItemId = storeSelectedItemId;
-      $$invalidate(9, sourceSelectedContainerId = storeSourceSelectedContainerId);
-      $$invalidate(10, currentWordBinIndex = storeCurrentWordBinIndex);
+      $$invalidate(10, sourceSelectedContainerId = storeSourceSelectedContainerId);
+      $$invalidate(11, currentWordBinIndex = storeCurrentWordBinIndex);
+      $$invalidate(13, currentTabContainer = storeCurrentTabContainer);
       const storeWordBinItem = currentAnswer.filter((answer) => answer.categoryId === CONTAINER_WORD_BIN_ID);
-      $$invalidate(11, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
+      $$invalidate(12, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
       if (storeCurrentAnswer) {
         const currentAnswerList = currentAnswer.filter((answer) => answer.categoryId === containerId);
         if (currentAnswerList.length) {
@@ -6267,7 +6433,9 @@
         ...get_store_value(categoriseSettings),
         selectedItemId: "",
         selectedContainerId: "",
-        sourceSelectedContainerId: ""
+        sourceSelectedContainerId: "",
+        lastSelectedTabContainer: "",
+        currentTabContainer: ""
       });
     };
     const addAnswerItemStore = (itemId, targetContainerId) => {
@@ -6327,6 +6495,8 @@
         $$invalidate(5, showButton = $$props2.showButton);
       if ("paddingTop" in $$props2)
         $$invalidate(6, paddingTop = $$props2.paddingTop);
+      if ("ariaLabel" in $$props2)
+        $$invalidate(7, ariaLabel = $$props2.ariaLabel);
     };
     return [
       items,
@@ -6336,11 +6506,14 @@
       type,
       showButton,
       paddingTop,
+      ariaLabel,
       considerItemId,
       dragDisabled,
       sourceSelectedContainerId,
       currentWordBinIndex,
       totalRemainingWordBinItem,
+      currentTabContainer,
+      isModalOpen,
       dropTargetClasses,
       isContainerWordBin,
       handleDndConsider,
@@ -6351,15 +6524,25 @@
   var PromptCategoriseDndContainer = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance6, create_fragment9, safe_not_equal, {
-        items: 0,
-        containerClass: 1,
-        flipDurationMs: 2,
-        containerId: 3,
-        type: 4,
-        showButton: 5,
-        paddingTop: 6
-      });
+      init(
+        this,
+        options,
+        instance6,
+        create_fragment9,
+        safe_not_equal,
+        {
+          items: 0,
+          containerClass: 1,
+          flipDurationMs: 2,
+          containerId: 3,
+          type: 4,
+          showButton: 5,
+          paddingTop: 6,
+          ariaLabel: 7
+        },
+        null,
+        [-1, -1]
+      );
     }
     get items() {
       return this.$$.ctx[0];
@@ -6410,34 +6593,36 @@
       this.$$set({ paddingTop });
       flush();
     }
+    get ariaLabel() {
+      return this.$$.ctx[7];
+    }
+    set ariaLabel(ariaLabel) {
+      this.$$set({ ariaLabel });
+      flush();
+    }
   };
-  customElements.define("prompt-categorise-dnd-container", create_custom_element(PromptCategoriseDndContainer, { "items": {}, "containerClass": {}, "flipDurationMs": {}, "containerId": {}, "type": {}, "showButton": { "type": "Boolean" }, "paddingTop": {} }, [], [], true));
+  customElements.define("prompt-categorise-dnd-container", create_custom_element(PromptCategoriseDndContainer, { "items": {}, "containerClass": {}, "flipDurationMs": {}, "containerId": {}, "type": {}, "showButton": { "type": "Boolean" }, "paddingTop": {}, "ariaLabel": {} }, [], [], true));
   var PromptCategoriseDndContainer_default = PromptCategoriseDndContainer;
 
-  // src/lib/stores/modal.ts
-  var modalSettings = writable({
-    isModalOpen: false,
-    modalAriaLabel: ""
-  });
-
   // src/lib/components/common/CommonModal.svelte
   function create_fragment10(ctx) {
     let div2;
     let div0;
     let t2;
     let div1;
+    let div2_aria_hidden_value;
     let current;
     let mounted;
     let dispose;
     const default_slot_template = (
       /*#slots*/
-      ctx[3].default
+      ctx[4].default
     );
     const default_slot = create_slot(
       default_slot_template,
       ctx,
       /*$$scope*/
-      ctx[2],
+      ctx[3],
       null
     );
     return {
@@ -6449,6 +6634,7 @@
         if (default_slot)
           default_slot.c();
         attr(div0, "role", "button");
+        attr(div0, "aria-label", "Close modal");
         attr(div0, "tabindex", "-1");
         attr(div0, "class", "blanket-overlay h-full");
         attr(div1, "class", "z-10");
@@ -6462,6 +6648,8 @@
           /*modalAriaLabel*/
           ctx[0]
         );
+        attr(div2, "aria-hidden", div2_aria_hidden_value = !/*isModalOpen*/
+        ctx[1]);
       },
       m(target, anchor) {
         insert(target, div2, anchor);
@@ -6478,7 +6666,7 @@
               div0,
               "click",
               /*clickModalBackground*/
-              ctx[1]
+              ctx[2]
             ),
             listen(div0, "keypress", keypress_handler)
           ];
@@ -6488,20 +6676,20 @@
       p(ctx2, [dirty]) {
         if (default_slot) {
           if (default_slot.p && (!current || dirty & /*$$scope*/
-          4)) {
+          8)) {
             update_slot_base(
               default_slot,
               default_slot_template,
               ctx2,
               /*$$scope*/
-              ctx2[2],
+              ctx2[3],
               !current ? get_all_dirty_from_scope(
                 /*$$scope*/
-                ctx2[2]
+                ctx2[3]
               ) : get_slot_changes(
                 default_slot_template,
                 /*$$scope*/
-                ctx2[2],
+                ctx2[3],
                 dirty,
                 null
               ),
@@ -6518,6 +6706,11 @@
             ctx2[0]
           );
         }
+        if (!current || dirty & /*isModalOpen*/
+        2 && div2_aria_hidden_value !== (div2_aria_hidden_value = !/*isModalOpen*/
+        ctx2[1])) {
+          attr(div2, "aria-hidden", div2_aria_hidden_value);
+        }
       },
       i(local) {
         if (current)
@@ -6546,9 +6739,11 @@
   function instance7($$self, $$props, $$invalidate) {
     let { $$slots: slots = {}, $$scope } = $$props;
     let modalAriaLabel = "";
+    let isModalOpen = false;
     modalSettings.subscribe((value) => {
-      const { modalAriaLabel: storeModalAriaLabel } = value;
+      const { modalAriaLabel: storeModalAriaLabel, isModalOpen: storeIsmodalOpen } = value;
       $$invalidate(0, modalAriaLabel = storeModalAriaLabel);
+      $$invalidate(1, isModalOpen = storeIsmodalOpen);
     });
     const clickModalBackground = () => {
       modalSettings.set({
@@ -6559,9 +6754,9 @@
     };
     $$self.$$set = ($$props2) => {
       if ("$$scope" in $$props2)
-        $$invalidate(2, $$scope = $$props2.$$scope);
+        $$invalidate(3, $$scope = $$props2.$$scope);
     };
-    return [modalAriaLabel, clickModalBackground, $$scope, slots];
+    return [modalAriaLabel, isModalOpen, clickModalBackground, $$scope, slots];
   }
   var CommonModal = class extends SvelteComponent {
     constructor(options) {
@@ -7068,6 +7263,47 @@
   create_custom_element(SmallChevronRight, {}, [], [], true);
   var SmallChevronRight_default = SmallChevronRight;
 
+  // src/lib/assets/img/messaging/ArrowDownCircle.svelte
+  function create_fragment19(ctx) {
+    let svg;
+    let path;
+    return {
+      c() {
+        svg = svg_element("svg");
+        path = svg_element("path");
+        attr(path, "fill-rule", "evenodd");
+        attr(path, "clip-rule", "evenodd");
+        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM10 5C9.44772 5 9 5.44772 9 6V11.585L6.70711 9.29289C6.34662 8.93241 5.77939 8.90468 5.3871 9.2097L5.29289 9.29289C4.90237 9.68342 4.90237 10.3166 5.29289 10.7071L9.29289 14.7071C9.32136 14.7356 9.35153 14.7623 9.38325 14.7872C9.39016 14.7927 9.3974 14.7982 9.40469 14.8037C9.42887 14.8215 9.45372 14.8383 9.47934 14.8539C9.49139 14.8614 9.50361 14.8685 9.51594 14.8753C9.53571 14.8862 9.55611 14.8966 9.5769 14.9063C9.5939 14.9143 9.6112 14.9218 9.62866 14.9288C9.64842 14.9367 9.6682 14.9439 9.68826 14.9505C9.70315 14.9553 9.71854 14.9599 9.73401 14.9642C9.75556 14.9702 9.77725 14.9754 9.79921 14.9798C9.81662 14.9833 9.83405 14.9864 9.85153 14.989L9.88338 14.9933L9.91075 14.996C9.934 14.9981 9.95732 14.9994 9.98065 14.9998L10 15C10.0065 15 10.0129 14.9999 10.0193 14.9998C10.0427 14.9994 10.066 14.9981 10.0893 14.996C10.1097 14.9943 10.1294 14.9919 10.149 14.989C10.1659 14.9864 10.1834 14.9833 10.2007 14.9798C10.2227 14.9754 10.2444 14.9702 10.2658 14.9643C10.2815 14.9599 10.2969 14.9553 10.3121 14.9503C10.3318 14.9439 10.3516 14.9367 10.3711 14.9289C10.3888 14.9218 10.4061 14.9143 10.4232 14.9063C10.4439 14.8966 10.4643 14.8862 10.4843 14.8751C10.4964 14.8685 10.5086 14.8614 10.5207 14.854C10.5463 14.8383 10.5711 14.8215 10.5952 14.8037L10.6129 14.7903C10.6485 14.7623 10.6786 14.7356 10.7071 14.7071L14.7071 10.7071C15.0976 10.3166 15.0976 9.68342 14.7071 9.29289C14.3166 8.90237 13.6834 8.90237 13.2929 9.29289L11 11.585V6C11 5.48716 10.614 5.06449 10.1166 5.00673L10 5Z");
+        attr(path, "fill", "currentColor");
+        attr(svg, "width", "20");
+        attr(svg, "height", "20");
+        attr(svg, "viewBox", "0 0 20 20");
+        attr(svg, "fill", "none");
+        attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+      },
+      m(target, anchor) {
+        insert(target, svg, anchor);
+        append(svg, path);
+      },
+      p: noop,
+      i: noop,
+      o: noop,
+      d(detaching) {
+        if (detaching) {
+          detach(svg);
+        }
+      }
+    };
+  }
+  var ArrowDownCircle = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, null, create_fragment19, safe_not_equal, {});
+    }
+  };
+  create_custom_element(ArrowDownCircle, {}, [], [], true);
+  var ArrowDownCircle_default = ArrowDownCircle;
+
   // node_modules/svelte-viewport-info/dist/svelte-viewport-info.esm.js
   var MediaMatcher = window.matchMedia || // @ts-ignore
   window["webkitMatchmedia"] || window["mozMatchmedia"] || window["oMatchmedia"];
@@ -7233,9 +7469,9 @@
   // src/lib/components/prompt/categorise/PromptCategorise.svelte
   function get_each_context3(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[37] = list[i];
-    child_ctx[38] = list;
-    child_ctx[39] = i;
+    child_ctx[45] = list[i];
+    child_ctx[46] = list;
+    child_ctx[47] = i;
     return child_ctx;
   }
   function create_if_block_23(ctx) {
@@ -7245,7 +7481,7 @@
     promptcategorisemodal.$on(
       "resetCategory",
       /*saveCategory*/
-      ctx[25]
+      ctx[27]
     );
     return {
       c() {
@@ -7291,6 +7527,12 @@
         span2.innerHTML = `Reset <span class="hidden md:inline-block">words</span>`;
         attr(span0, "class", "h-6 w-6 flex items-center justify-center");
         attr(span2, "class", "text-base leading-4 font-bold ml-1 group-hover:underline");
+        attr(
+          button,
+          "tabindex",
+          /*categoryTabIndex*/
+          ctx[12]
+        );
         attr(button, "aria-label", "Reset words");
         attr(button, "class", "group focus-ring flex items-center rounded-lg border-2 border-soft-blue text-blue-1000 px-3 py-2 absolute right-0 -top-2.5 hover:bg-blue-100");
       },
@@ -7306,12 +7548,22 @@
             button,
             "click",
             /*openResetModal*/
-            ctx[20]
+            ctx[22]
           );
           mounted = true;
         }
       },
-      p: noop,
+      p(ctx2, dirty) {
+        if (!current || dirty[0] & /*categoryTabIndex*/
+        4096) {
+          attr(
+            button,
+            "tabindex",
+            /*categoryTabIndex*/
+            ctx2[12]
+          );
+        }
+      },
       i(local) {
         if (current)
           return;
@@ -7390,21 +7642,23 @@
     let div1;
     let div0;
     let span0;
-    let t1;
-    let button;
+    let t3;
     let span1;
-    let t2_value = (
+    let t5;
+    let button;
+    let span2;
+    let t6_value = (
       /*getTotalWords*/
-      ctx[21](
+      ctx[23](
         /*category*/
-        ctx[37].id,
+        ctx[45].id,
         /*currentAnswer*/
         ctx[6]
       ) + ""
     );
-    let t2;
-    let t3;
-    let span2;
+    let t6;
+    let t7;
+    let span3;
     let show_if;
     let current_block_type_index;
     let if_block;
@@ -7412,10 +7666,14 @@
     let div0_id_value;
     let div0_class_value;
     let div0_resize_listener;
-    let t4;
+    let t8;
     let promptcategorisedndcontainer;
-    let t5;
+    let t9;
     let div1_class_value;
+    let category = (
+      /*category*/
+      ctx[45]
+    );
     let current;
     let mounted;
     let dispose;
@@ -7427,9 +7685,9 @@
         show_if = null;
       if (show_if == null)
         show_if = !!/*checkifCategoryContainerOpen*/
-        ctx2[22](
+        ctx2[24](
           /*category*/
-          ctx2[37].id,
+          ctx2[45].id,
           /*openCategoryContainer*/
           ctx2[10]
         );
@@ -7440,175 +7698,208 @@
     current_block_type_index = select_block_type(ctx, [-1, -1]);
     if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     function div0_elementresize_handler() {
-      ctx[27].call(
+      ctx[32].call(
         div0,
         /*category*/
-        ctx[37]
+        ctx[45]
       );
     }
     promptcategorisedndcontainer = new PromptCategoriseDndContainer_default({
       props: {
         containerClass: "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-        (ctx[17](
+        (ctx[19](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*considerContainerId*/
           ctx[1],
           /*isDraggingOver*/
           ctx[2]
         ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-        (ctx[22](
+        (ctx[24](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*openCategoryContainer*/
           ctx[10]
         ) ? "h-full p-3 min-h-[86px] md:min-h-0" : ""),
         paddingTop: (
           /*checkifCategoryContainerOpen*/
-          ctx[22](
+          ctx[24](
             /*category*/
-            ctx[37].id,
+            ctx[45].id,
             /*openCategoryContainer*/
             ctx[10]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[12][
+            ctx[14][
               /*category*/
-              ctx[37].id
+              ctx[45].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[12][
+            ctx[14][
               /*category*/
-              ctx[37].id
+              ctx[45].id
             ]
           )
         ),
         containerId: (
           /*category*/
-          ctx[37].id
+          ctx[45].id
         ),
         showButton: (
           /*checkifCategoryContainerOpen*/
-          ctx[22](
+          ctx[24](
             /*category*/
-            ctx[37].id,
+            ctx[45].id,
             /*openCategoryContainer*/
             ctx[10]
           )
-        )
+        ),
+        ariaLabel: `Category ${/*index*/
+        ctx[47] + 1}: ${/*category*/
+        ctx[45].name}`
       }
     });
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[25]
+      ctx[27]
+    );
+    function keydown_handler(...args) {
+      return (
+        /*keydown_handler*/
+        ctx[33](
+          /*category*/
+          ctx[45],
+          ...args
+        )
+      );
+    }
+    const assign_div1 = () => (
+      /*div1_binding*/
+      ctx[34](div1, category)
+    );
+    const unassign_div1 = () => (
+      /*div1_binding*/
+      ctx[34](null, category)
     );
     return {
       c() {
         div1 = element("div");
         div0 = element("div");
         span0 = element("span");
-        span0.textContent = `${/*category*/
-        ctx[37].name}`;
-        t1 = space();
-        button = element("button");
-        span1 = element("span");
-        t2 = text(t2_value);
+        span0.textContent = `Category ${/*index*/
+        ctx[47] + 1}:\xA0`;
         t3 = space();
+        span1 = element("span");
+        span1.textContent = `${/*category*/
+        ctx[45].name}`;
+        t5 = space();
+        button = element("button");
         span2 = element("span");
+        t6 = text(t6_value);
+        t7 = space();
+        span3 = element("span");
         if_block.c();
-        t4 = space();
+        t8 = space();
         create_component(promptcategorisedndcontainer.$$.fragment);
-        t5 = space();
-        attr(span0, "class", "text-base leading-5 !text-gray-900 md:item-heading");
-        attr(span1, "class", "mx-0.5");
-        attr(span2, "class", "w-4 h-4 text-inherit flex items-center justify-center");
+        t9 = space();
+        attr(span0, "class", "sr-only");
+        attr(span1, "class", "text-base leading-5 !text-gray-900 md:item-heading");
+        attr(span2, "class", "mx-0.5");
+        attr(span3, "class", "w-4 h-4 text-inherit flex items-center justify-center");
         attr(button, "aria-label", button_aria_label_value = /*getTotalWords*/
-        ctx[21](
+        ctx[23](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*currentAnswer*/
           ctx[6]
         ));
         attr(button, "class", "focus-ring flex items-center rounded-[32px] p-1.5 text-charcoal text-sm border border-gray-800 bg-gray-50 min-w-[85px] ml-3 whitespace-nowrap active:raw-focus-ring active:bg-black-55 md:hidden");
         attr(div0, "id", div0_id_value = `category-title${/*index*/
-        ctx[39]}`);
+        ctx[47]}`);
         attr(div0, "class", div0_class_value = "absolute flex items-center justify-between border-b border-gray-800 w-full rounded-t-lg p-3 md:p-4 md:justify-center " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*dropContainerId*/
           ctx[3]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[22](
+        ctx[24](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*openCategoryContainer*/
           ctx[10]
         ) && /*checkContainerDragOver*/
-        ctx[17](
+        ctx[19](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*considerContainerId*/
           ctx[1],
           /*isDraggingOver*/
           ctx[2]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[22](
+        (ctx[24](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*openCategoryContainer*/
           ctx[10]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[22](
+        ctx[24](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*openCategoryContainer*/
           ctx[10]
         ) && /*checkSelectedSourceContainer*/
-        ctx[19](
+        ctx[21](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*sourceSelectedContainerId*/
           ctx[5],
           /*currentSelectedItemId*/
           ctx[4]
         ) ? "group-hover/itemContainer:bg-violet-100 md:group-hover/itemContainer:bg-white" : ""));
         add_render_callback(() => div0_elementresize_handler.call(div0));
-        attr(div1, "class", div1_class_value = "group/itemContainer flex flex-col border border-gray-800 rounded-lg basis-0 grow relative md:min-h-[140px] md:items-center lg:mr-6 lg:last:mr-0 lg:min-h-[224px] " + /*checkContainerDragOver*/
-        (ctx[17](
+        attr(
+          div1,
+          "tabindex",
+          /*categoryTabIndex*/
+          ctx[12]
+        );
+        attr(div1, "role", "group");
+        attr(div1, "class", div1_class_value = "focus-ring group/itemContainer flex flex-col border border-gray-800 rounded-lg basis-0 grow relative md:min-h-[140px] md:items-center lg:mr-6 lg:last:mr-0 lg:min-h-[224px] " + /*checkContainerDragOver*/
+        (ctx[19](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*considerContainerId*/
           ctx[1],
           /*isDraggingOver*/
           ctx[2]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*dropContainerId*/
           ctx[3]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*dropContainerId*/
           ctx[3]
         ) && /*hasAddItemAnimation*/
         ctx[8] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[19](
+        (ctx[21](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*sourceSelectedContainerId*/
           ctx[5],
           /*currentSelectedItemId*/
           ctx[4]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[22](
+        (ctx[24](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*openCategoryContainer*/
           ctx[10]
         ) ? "min-h-[140px]" : ""));
@@ -7617,50 +7908,62 @@
         insert(target, div1, anchor);
         append(div1, div0);
         append(div0, span0);
-        append(div0, t1);
+        append(div0, t3);
+        append(div0, span1);
+        append(div0, t5);
         append(div0, button);
-        append(button, span1);
-        append(span1, t2);
-        append(button, t3);
         append(button, span2);
-        if_blocks[current_block_type_index].m(span2, null);
+        append(span2, t6);
+        append(button, t7);
+        append(button, span3);
+        if_blocks[current_block_type_index].m(span3, null);
         div0_resize_listener = add_iframe_resize_listener(div0, div0_elementresize_handler.bind(div0));
-        append(div1, t4);
+        append(div1, t8);
         mount_component(promptcategorisedndcontainer, div1, null);
-        append(div1, t5);
+        append(div1, t9);
+        assign_div1();
         current = true;
         if (!mounted) {
-          dispose = listen(button, "click", function() {
-            if (is_function(
-              /*addCategoryContainer*/
-              ctx[23](
-                /*category*/
-                ctx[37].id,
-                /*openCategoryContainer*/
-                ctx[10]
-              )
-            ))
-              ctx[23](
-                /*category*/
-                ctx[37].id,
-                /*openCategoryContainer*/
-                ctx[10]
-              ).apply(this, arguments);
-          });
+          dispose = [
+            listen(button, "click", function() {
+              if (is_function(
+                /*addCategoryContainer*/
+                ctx[25](
+                  /*category*/
+                  ctx[45].id,
+                  /*openCategoryContainer*/
+                  ctx[10]
+                )
+              ))
+                ctx[25](
+                  /*category*/
+                  ctx[45].id,
+                  /*openCategoryContainer*/
+                  ctx[10]
+                ).apply(this, arguments);
+            }),
+            listen(div1, "keydown", keydown_handler),
+            listen(
+              div1,
+              "focus",
+              /*resetTabCategory*/
+              ctx[29]
+            )
+          ];
           mounted = true;
         }
       },
       p(new_ctx, dirty) {
         ctx = new_ctx;
         if ((!current || dirty[0] & /*currentAnswer*/
-        64) && t2_value !== (t2_value = /*getTotalWords*/
-        ctx[21](
+        64) && t6_value !== (t6_value = /*getTotalWords*/
+        ctx[23](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*currentAnswer*/
           ctx[6]
         ) + ""))
-          set_data(t2, t2_value);
+          set_data(t6, t6_value);
         let previous_block_index = current_block_type_index;
         current_block_type_index = select_block_type(ctx, dirty);
         if (current_block_type_index !== previous_block_index) {
@@ -7676,13 +7979,13 @@
           } else {
           }
           transition_in(if_block, 1);
-          if_block.m(span2, null);
+          if_block.m(span3, null);
         }
         if (!current || dirty[0] & /*currentAnswer*/
         64 && button_aria_label_value !== (button_aria_label_value = /*getTotalWords*/
-        ctx[21](
+        ctx[23](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*currentAnswer*/
           ctx[6]
         ))) {
@@ -7690,41 +7993,41 @@
         }
         if (!current || dirty[0] & /*dropContainerId, openCategoryContainer, considerContainerId, isDraggingOver, sourceSelectedContainerId, currentSelectedItemId*/
         1086 && div0_class_value !== (div0_class_value = "absolute flex items-center justify-between border-b border-gray-800 w-full rounded-t-lg p-3 md:p-4 md:justify-center " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*dropContainerId*/
           ctx[3]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[22](
+        ctx[24](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*openCategoryContainer*/
           ctx[10]
         ) && /*checkContainerDragOver*/
-        ctx[17](
+        ctx[19](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*considerContainerId*/
           ctx[1],
           /*isDraggingOver*/
           ctx[2]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[22](
+        (ctx[24](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*openCategoryContainer*/
           ctx[10]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[22](
+        ctx[24](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*openCategoryContainer*/
           ctx[10]
         ) && /*checkSelectedSourceContainer*/
-        ctx[19](
+        ctx[21](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*sourceSelectedContainerId*/
           ctx[5],
           /*currentSelectedItemId*/
@@ -7736,90 +8039,106 @@
         if (dirty[0] & /*considerContainerId, isDraggingOver, openCategoryContainer*/
         1030)
           promptcategorisedndcontainer_changes.containerClass = "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-          (ctx[17](
+          (ctx[19](
             /*category*/
-            ctx[37].id,
+            ctx[45].id,
             /*considerContainerId*/
             ctx[1],
             /*isDraggingOver*/
             ctx[2]
           ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-          (ctx[22](
+          (ctx[24](
             /*category*/
-            ctx[37].id,
+            ctx[45].id,
             /*openCategoryContainer*/
             ctx[10]
           ) ? "h-full p-3 min-h-[86px] md:min-h-0" : "");
         if (dirty[0] & /*openCategoryContainer, categoryTitleHeight*/
-        5120)
+        17408)
           promptcategorisedndcontainer_changes.paddingTop = /*checkifCategoryContainerOpen*/
-          ctx[22](
+          ctx[24](
             /*category*/
-            ctx[37].id,
+            ctx[45].id,
             /*openCategoryContainer*/
             ctx[10]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[12][
+            ctx[14][
               /*category*/
-              ctx[37].id
+              ctx[45].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[12][
+            ctx[14][
               /*category*/
-              ctx[37].id
+              ctx[45].id
             ]
           );
         if (dirty[0] & /*openCategoryContainer*/
         1024)
           promptcategorisedndcontainer_changes.showButton = /*checkifCategoryContainerOpen*/
-          ctx[22](
+          ctx[24](
             /*category*/
-            ctx[37].id,
+            ctx[45].id,
             /*openCategoryContainer*/
             ctx[10]
           );
         promptcategorisedndcontainer.$set(promptcategorisedndcontainer_changes);
+        if (!current || dirty[0] & /*categoryTabIndex*/
+        4096) {
+          attr(
+            div1,
+            "tabindex",
+            /*categoryTabIndex*/
+            ctx[12]
+          );
+        }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer*/
-        1342 && div1_class_value !== (div1_class_value = "group/itemContainer flex flex-col border border-gray-800 rounded-lg basis-0 grow relative md:min-h-[140px] md:items-center lg:mr-6 lg:last:mr-0 lg:min-h-[224px] " + /*checkContainerDragOver*/
-        (ctx[17](
+        1342 && div1_class_value !== (div1_class_value = "focus-ring group/itemContainer flex flex-col border border-gray-800 rounded-lg basis-0 grow relative md:min-h-[140px] md:items-center lg:mr-6 lg:last:mr-0 lg:min-h-[224px] " + /*checkContainerDragOver*/
+        (ctx[19](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*considerContainerId*/
           ctx[1],
           /*isDraggingOver*/
           ctx[2]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*dropContainerId*/
           ctx[3]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*dropContainerId*/
           ctx[3]
         ) && /*hasAddItemAnimation*/
         ctx[8] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[19](
+        (ctx[21](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*sourceSelectedContainerId*/
           ctx[5],
           /*currentSelectedItemId*/
           ctx[4]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[22](
+        (ctx[24](
           /*category*/
-          ctx[37].id,
+          ctx[45].id,
           /*openCategoryContainer*/
           ctx[10]
         ) ? "min-h-[140px]" : ""))) {
           attr(div1, "class", div1_class_value);
         }
+        if (category !== /*category*/
+        ctx[45]) {
+          unassign_div1();
+          category = /*category*/
+          ctx[45];
+          assign_div1();
+        }
       },
       i(local) {
         if (current)
@@ -7840,47 +8159,55 @@
         if_blocks[current_block_type_index].d();
         div0_resize_listener();
         destroy_component(promptcategorisedndcontainer);
+        unassign_div1();
         mounted = false;
-        dispose();
+        run_all(dispose);
       }
     };
   }
   function create_default_slot4(ctx) {
-    let t0;
-    let div0;
-    let p;
+    let button0;
+    let span0;
+    let t1;
+    let span1;
+    let arrowdowncircle;
     let t2;
     let t3;
+    let div0;
+    let p;
+    let t5;
+    let t6;
     let div1;
-    let t4;
+    let t7;
     let div4;
     let div2;
-    let span0;
-    let t6;
-    let span1;
-    let t7;
-    let t8;
+    let span2;
     let t9;
+    let span3;
     let t10;
     let t11;
-    let div3;
-    let button0;
-    let span2;
-    let smallchevronleft;
-    let button0_class_value;
-    let button0_disabled_value;
     let t12;
-    let promptcategorisedndcontainer;
     let t13;
+    let t14;
+    let div3;
     let button1;
-    let span3;
-    let smallchevronright;
+    let span4;
+    let smallchevronleft;
     let button1_class_value;
     let button1_disabled_value;
+    let t15;
+    let promptcategorisedndcontainer;
+    let t16;
+    let button2;
+    let span5;
+    let smallchevronright;
+    let button2_class_value;
+    let button2_disabled_value;
     let div4_class_value;
     let current;
     let mounted;
     let dispose;
+    arrowdowncircle = new ArrowDownCircle_default({});
     let if_block0 = (
       /*isModalOpen*/
       ctx[9] && create_if_block_23(ctx)
@@ -7892,7 +8219,7 @@
     );
     let each_value = ensure_array_like(Object.values(
       /*categoryGroups*/
-      ctx[16]
+      ctx[18]
     ));
     let each_blocks = [];
     for (let i = 0; i < each_value.length; i += 1) {
@@ -7905,114 +8232,139 @@
     promptcategorisedndcontainer = new PromptCategoriseDndContainer_default({
       props: {
         containerClass: "bg-transparent p-4 pt-[55px] grow md:grow-0 md:pt-20.5 justify-center md:justify-normal\n        " + /*isWordBInTotalZero*/
-        (ctx[24](
+        (ctx[26](
           /*totalRemainingWordBinItem*/
           ctx[7]
         ) && !/*currentSelectedItemId*/
         ctx[4] ? "absolute inset-0" : ""),
         items: (
           /*categoryItems*/
-          ctx[15]
+          ctx[17]
         ),
-        containerId: CONTAINER_WORD_BIN_ID
+        containerId: CONTAINER_WORD_BIN_ID,
+        ariaLabel: "Word bin"
       }
     });
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[25]
+      ctx[27]
     );
     smallchevronright = new SmallChevronRight_default({});
     return {
       c() {
+        button0 = element("button");
+        span0 = element("span");
+        span0.textContent = "Skip to Word Bin";
+        t1 = space();
+        span1 = element("span");
+        create_component(arrowdowncircle.$$.fragment);
+        t2 = space();
         if (if_block0)
           if_block0.c();
-        t0 = space();
+        t3 = space();
         div0 = element("div");
         p = element("p");
         p.textContent = "Categories";
-        t2 = space();
+        t5 = space();
         if (if_block1)
           if_block1.c();
-        t3 = space();
+        t6 = space();
         div1 = element("div");
         for (let i = 0; i < each_blocks.length; i += 1) {
           each_blocks[i].c();
         }
-        t4 = space();
+        t7 = space();
         div4 = element("div");
         div2 = element("div");
-        span0 = element("span");
-        span0.textContent = "Word Bin";
-        t6 = space();
-        span1 = element("span");
-        t7 = text(
+        span2 = element("span");
+        span2.textContent = "Word Bin";
+        t9 = space();
+        span3 = element("span");
+        t10 = text(
           /*totalRemainingWordBinItem*/
           ctx[7]
         );
-        t8 = text(" out of ");
-        t9 = text(
+        t11 = text(" out of ");
+        t12 = text(
           /*totalCategoryItems*/
           ctx[0]
         );
-        t10 = text(" left");
-        t11 = space();
+        t13 = text(" left");
+        t14 = space();
         div3 = element("div");
-        button0 = element("button");
-        span2 = element("span");
+        button1 = element("button");
+        span4 = element("span");
         create_component(smallchevronleft.$$.fragment);
-        t12 = space();
+        t15 = space();
         create_component(promptcategorisedndcontainer.$$.fragment);
-        t13 = space();
-        button1 = element("button");
-        span3 = element("span");
+        t16 = space();
+        button2 = element("button");
+        span5 = element("span");
         create_component(smallchevronright.$$.fragment);
+        attr(span0, "class", "test-base font-semibold underline mr-1");
+        attr(span1, "class", "text-inherit h-6 w-6 flex items-center justify-center");
+        attr(button0, "aria-label", "Skip to word bin");
+        attr(button0, "class", "flex items-center text-charcoal border-l-6 border-charcoal bg-yellow-1000 py-1.5 pr-3 pl-4 focus-visible:border-charcoal left-[-9999px] z-0 focus-within:left-0 focus-within:right-0 focus-within:top-0 absolute focus-within:z-30 focus-visible:outline-none");
         attr(p, "class", "text-base leading-5 !text-gray-900 font-semibold md:item-heading");
         attr(div0, "class", "mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14");
+        attr(
+          div0,
+          "aria-hidden",
+          /*isModalOpen*/
+          ctx[9]
+        );
         attr(div1, "class", "mb-5 grid gap-2 grid-cols-1 md:grid-cols-2 md:gap-6 lg:flex lg:gap-0");
-        attr(span0, "class", "text-base leading-5 !text-gray-900 font-semibold md:mb-2 md:item-heading");
-        attr(span1, "class", "text-base leading-5 !text-gray-900 md:item-heading");
+        attr(span2, "class", "text-base leading-5 !text-gray-900 font-semibold md:mb-2 md:item-heading");
+        attr(span3, "class", "text-base leading-5 !text-gray-900 md:item-heading");
         attr(div2, "class", "p-4 pb-3 text-center w-full absolute flex flex-row items-center justify-between md:justify-center md:flex-col md:pb-0");
-        attr(span2, "class", "w-6 h-6 text-inherit flex items-center justify-center");
-        attr(button0, "aria-label", "Left");
-        attr(button0, "class", button0_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
-        (ctx[24](
+        attr(span4, "class", "w-6 h-6 text-inherit flex items-center justify-center");
+        attr(button1, "aria-label", "Left");
+        attr(button1, "class", button1_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
+        (ctx[26](
           /*totalRemainingWordBinItem*/
           ctx[7]
         ) ? "hidden" : ""));
-        button0.disabled = button0_disabled_value = /*currentWordBinIndex*/
+        button1.disabled = button1_disabled_value = /*currentWordBinIndex*/
         ctx[11] === 0;
-        attr(span3, "class", "w-6 h-6 text-inherit flex items-center justify-center ml-[3px]");
-        attr(button1, "aria-label", "Right");
-        attr(button1, "class", button1_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
-        (ctx[24](
+        attr(span5, "class", "w-6 h-6 text-inherit flex items-center justify-center ml-[3px]");
+        attr(button2, "aria-label", "Right");
+        attr(button2, "class", button2_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
+        (ctx[26](
           /*totalRemainingWordBinItem*/
           ctx[7]
         ) ? "hidden" : ""));
-        button1.disabled = button1_disabled_value = /*currentWordBinIndex*/
+        button2.disabled = button2_disabled_value = /*currentWordBinIndex*/
         ctx[11] === /*totalRemainingWordBinItem*/
         ctx[7] - 1;
         attr(div3, "class", "flex items-center justify-between px-4 min-h-[133px] md:min-h-0 md:block md:px-0 md:justify-normal");
-        attr(div4, "class", div4_class_value = "shadow-[0_-12px_14px_-16px_#00000033] rounded-lg relative min-h-[133px] md:min-h-[164px] md:border md:shadow-[0_0_#0000] md:border-gray-400 " + /*checkContainerDragOver*/
-        (ctx[17](
+        attr(
+          div4,
+          "tabindex",
+          /*categoryTabIndex*/
+          ctx[12]
+        );
+        attr(div4, "role", "group");
+        attr(div4, "class", div4_class_value = "focus-ring shadow-[0_-12px_14px_-16px_#00000033] rounded-lg relative min-h-[133px] md:min-h-[164px] md:border md:shadow-[0_0_#0000] md:border-gray-400 " + /*checkContainerDragOver*/
+        (ctx[19](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
           ctx[1],
           /*isDraggingOver*/
           ctx[2]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[3]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[3]
         ) && /*hasAddItemAnimation*/
         ctx[8] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[19](
+        (ctx[21](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
           ctx[5],
@@ -8021,46 +8373,59 @@
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""));
       },
       m(target, anchor) {
+        insert(target, button0, anchor);
+        append(button0, span0);
+        append(button0, t1);
+        append(button0, span1);
+        mount_component(arrowdowncircle, span1, null);
+        insert(target, t2, anchor);
         if (if_block0)
           if_block0.m(target, anchor);
-        insert(target, t0, anchor);
+        insert(target, t3, anchor);
         insert(target, div0, anchor);
         append(div0, p);
-        append(div0, t2);
+        append(div0, t5);
         if (if_block1)
           if_block1.m(div0, null);
-        insert(target, t3, anchor);
+        insert(target, t6, anchor);
         insert(target, div1, anchor);
         for (let i = 0; i < each_blocks.length; i += 1) {
           if (each_blocks[i]) {
             each_blocks[i].m(div1, null);
           }
         }
-        insert(target, t4, anchor);
+        insert(target, t7, anchor);
         insert(target, div4, anchor);
         append(div4, div2);
-        append(div2, span0);
-        append(div2, t6);
-        append(div2, span1);
-        append(span1, t7);
-        append(span1, t8);
-        append(span1, t9);
-        append(span1, t10);
-        append(div4, t11);
+        append(div2, span2);
+        append(div2, t9);
+        append(div2, span3);
+        append(span3, t10);
+        append(span3, t11);
+        append(span3, t12);
+        append(span3, t13);
+        append(div4, t14);
         append(div4, div3);
-        append(div3, button0);
-        append(button0, span2);
-        mount_component(smallchevronleft, span2, null);
-        append(div3, t12);
-        mount_component(promptcategorisedndcontainer, div3, null);
-        append(div3, t13);
         append(div3, button1);
-        append(button1, span3);
-        mount_component(smallchevronright, span3, null);
+        append(button1, span4);
+        mount_component(smallchevronleft, span4, null);
+        append(div3, t15);
+        mount_component(promptcategorisedndcontainer, div3, null);
+        append(div3, t16);
+        append(div3, button2);
+        append(button2, span5);
+        mount_component(smallchevronright, span5, null);
+        ctx[36](div4);
         current = true;
         if (!mounted) {
           dispose = [
-            listen(button0, "click", function() {
+            listen(
+              button0,
+              "keypress",
+              /*goToWordBin*/
+              ctx[30]
+            ),
+            listen(button1, "click", function() {
               if (is_function(useNavigateItem(
                 /*currentWordBinIndex*/
                 ctx[11],
@@ -8076,7 +8441,7 @@
                   "left"
                 ).apply(this, arguments);
             }),
-            listen(button1, "click", function() {
+            listen(button2, "click", function() {
               if (is_function(useNavigateItem(
                 /*currentWordBinIndex*/
                 ctx[11],
@@ -8091,7 +8456,19 @@
                   ctx[6],
                   "right"
                 ).apply(this, arguments);
-            })
+            }),
+            listen(
+              div4,
+              "keydown",
+              /*keydown_handler_1*/
+              ctx[35]
+            ),
+            listen(
+              div4,
+              "focus",
+              /*resetTabCategory*/
+              ctx[29]
+            )
           ];
           mounted = true;
         }
@@ -8112,7 +8489,7 @@
             if_block0 = create_if_block_23(ctx);
             if_block0.c();
             transition_in(if_block0, 1);
-            if_block0.m(t0.parentNode, t0);
+            if_block0.m(t3.parentNode, t3);
           }
         } else if (if_block0) {
           group_outros();
@@ -8145,11 +8522,20 @@
           });
           check_outros();
         }
-        if (dirty[0] & /*checkContainerDragOver, categoryGroups, considerContainerId, isDraggingOver, checkContainerDroppedItem, dropContainerId, hasAddItemAnimation, checkSelectedSourceContainer, sourceSelectedContainerId, currentSelectedItemId, checkifCategoryContainerOpen, openCategoryContainer, categoryTitleHeight, saveCategory, getTotalWords, currentAnswer, addCategoryContainer*/
-        49223038) {
+        if (!current || dirty[0] & /*isModalOpen*/
+        512) {
+          attr(
+            div0,
+            "aria-hidden",
+            /*isModalOpen*/
+            ctx[9]
+          );
+        }
+        if (dirty[0] & /*categoryTabIndex, checkContainerDragOver, categoryGroups, considerContainerId, isDraggingOver, checkContainerDroppedItem, dropContainerId, hasAddItemAnimation, checkSelectedSourceContainer, sourceSelectedContainerId, currentSelectedItemId, checkifCategoryContainerOpen, openCategoryContainer, tabCategory, getContainerTabSelected, resetTabCategory, categoryTitleHeight, saveCategory, getTotalWords, currentAnswer, addCategoryContainer*/
+        1002206590) {
           each_value = ensure_array_like(Object.values(
             /*categoryGroups*/
-            ctx[16]
+            ctx[18]
           ));
           let i;
           for (i = 0; i < each_value.length; i += 1) {
@@ -8173,75 +8559,84 @@
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
         128)
           set_data(
-            t7,
+            t10,
             /*totalRemainingWordBinItem*/
             ctx[7]
           );
         if (!current || dirty[0] & /*totalCategoryItems*/
         1)
           set_data(
-            t9,
+            t12,
             /*totalCategoryItems*/
             ctx[0]
           );
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        128 && button0_class_value !== (button0_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
-        (ctx[24](
+        128 && button1_class_value !== (button1_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
+        (ctx[26](
           /*totalRemainingWordBinItem*/
           ctx[7]
         ) ? "hidden" : ""))) {
-          attr(button0, "class", button0_class_value);
+          attr(button1, "class", button1_class_value);
         }
         if (!current || dirty[0] & /*currentWordBinIndex*/
-        2048 && button0_disabled_value !== (button0_disabled_value = /*currentWordBinIndex*/
+        2048 && button1_disabled_value !== (button1_disabled_value = /*currentWordBinIndex*/
         ctx[11] === 0)) {
-          button0.disabled = button0_disabled_value;
+          button1.disabled = button1_disabled_value;
         }
         const promptcategorisedndcontainer_changes = {};
         if (dirty[0] & /*totalRemainingWordBinItem, currentSelectedItemId*/
         144)
           promptcategorisedndcontainer_changes.containerClass = "bg-transparent p-4 pt-[55px] grow md:grow-0 md:pt-20.5 justify-center md:justify-normal\n        " + /*isWordBInTotalZero*/
-          (ctx[24](
+          (ctx[26](
             /*totalRemainingWordBinItem*/
             ctx[7]
           ) && !/*currentSelectedItemId*/
           ctx[4] ? "absolute inset-0" : "");
         promptcategorisedndcontainer.$set(promptcategorisedndcontainer_changes);
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        128 && button1_class_value !== (button1_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
-        (ctx[24](
+        128 && button2_class_value !== (button2_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
+        (ctx[26](
           /*totalRemainingWordBinItem*/
           ctx[7]
         ) ? "hidden" : ""))) {
-          attr(button1, "class", button1_class_value);
+          attr(button2, "class", button2_class_value);
         }
         if (!current || dirty[0] & /*currentWordBinIndex, totalRemainingWordBinItem*/
-        2176 && button1_disabled_value !== (button1_disabled_value = /*currentWordBinIndex*/
+        2176 && button2_disabled_value !== (button2_disabled_value = /*currentWordBinIndex*/
         ctx[11] === /*totalRemainingWordBinItem*/
         ctx[7] - 1)) {
-          button1.disabled = button1_disabled_value;
+          button2.disabled = button2_disabled_value;
+        }
+        if (!current || dirty[0] & /*categoryTabIndex*/
+        4096) {
+          attr(
+            div4,
+            "tabindex",
+            /*categoryTabIndex*/
+            ctx[12]
+          );
         }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId*/
-        318 && div4_class_value !== (div4_class_value = "shadow-[0_-12px_14px_-16px_#00000033] rounded-lg relative min-h-[133px] md:min-h-[164px] md:border md:shadow-[0_0_#0000] md:border-gray-400 " + /*checkContainerDragOver*/
-        (ctx[17](
+        318 && div4_class_value !== (div4_class_value = "focus-ring shadow-[0_-12px_14px_-16px_#00000033] rounded-lg relative min-h-[133px] md:min-h-[164px] md:border md:shadow-[0_0_#0000] md:border-gray-400 " + /*checkContainerDragOver*/
+        (ctx[19](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
           ctx[1],
           /*isDraggingOver*/
           ctx[2]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[3]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[18](
+        (ctx[20](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[3]
         ) && /*hasAddItemAnimation*/
         ctx[8] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[19](
+        (ctx[21](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
           ctx[5],
@@ -8254,6 +8649,7 @@
       i(local) {
         if (current)
           return;
+        transition_in(arrowdowncircle.$$.fragment, local);
         transition_in(if_block0);
         transition_in(if_block1);
         for (let i = 0; i < each_value.length; i += 1) {
@@ -8265,6 +8661,7 @@
         current = true;
       },
       o(local) {
+        transition_out(arrowdowncircle.$$.fragment, local);
         transition_out(if_block0);
         transition_out(if_block1);
         each_blocks = each_blocks.filter(Boolean);
@@ -8278,13 +8675,16 @@
       },
       d(detaching) {
         if (detaching) {
-          detach(t0);
-          detach(div0);
+          detach(button0);
+          detach(t2);
           detach(t3);
+          detach(div0);
+          detach(t6);
           detach(div1);
-          detach(t4);
+          detach(t7);
           detach(div4);
         }
+        destroy_component(arrowdowncircle);
         if (if_block0)
           if_block0.d(detaching);
         if (if_block1)
@@ -8293,23 +8693,24 @@
         destroy_component(smallchevronleft);
         destroy_component(promptcategorisedndcontainer);
         destroy_component(smallchevronright);
+        ctx[36](null);
         mounted = false;
         run_all(dispose);
       }
     };
   }
-  function create_fragment19(ctx) {
+  function create_fragment20(ctx) {
     let promptbody;
     let current;
     promptbody = new PromptBody_default({
       props: {
         rubric: (
           /*rubric*/
-          ctx[13].text
+          ctx[15].text
         ),
         prompt: (
           /*prompt*/
-          ctx[14]
+          ctx[16]
         ),
         $$slots: { default: [create_default_slot4] },
         $$scope: { ctx }
@@ -8325,9 +8726,9 @@
       },
       p(ctx2, dirty) {
         const promptbody_changes = {};
-        if (dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, totalRemainingWordBinItem, currentWordBinIndex, currentAnswer, totalCategoryItems, openCategoryContainer, categoryTitleHeight, isModalOpen*/
-        8191 | dirty[1] & /*$$scope*/
-        512) {
+        if (dirty[0] & /*categoryTabIndex, considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, tabCategory, totalRemainingWordBinItem, currentWordBinIndex, currentAnswer, totalCategoryItems, openCategoryContainer, categoryTitleHeight, isModalOpen*/
+        32767 | dirty[1] & /*$$scope*/
+        131072) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
@@ -8353,7 +8754,6 @@
     let totalCategoryItems = 0;
     let considerContainerId = "";
     let isDraggingOver = false;
-    let sourceContainerId = "";
     let dropContainerId = "";
     let sourceCloneContainerId = "";
     let currentSelectedItemId = "";
@@ -8364,10 +8764,13 @@
     let isModalOpen = false;
     let openCategoryContainer = [];
     let currentWordBinIndex = [];
+    let categoryTabIndex = 0;
     const { rubric, interaction, metadata } = sessionData;
     const { prompt, category_groups: interactionCategoryGroups, category_items: interactionCategoryItems } = interaction;
     const categoryItems = useFilterUniqueObject(interactionCategoryItems);
     const categoryGroups = useFilterUniqueObject(interactionCategoryGroups);
+    const tabCategory = [{ CONTAINER_WORD_BIN_ID: false }];
+    categoryGroups.map((group) => $$invalidate(13, tabCategory[group.id] = false, tabCategory));
     totalCategoryItems = totalRemainingWordBinItem = Object.keys(categoryItems).length;
     let wordBinItems = categoryItems.map((item) => item.id);
     let initialCategoryAnswer = [
@@ -8378,7 +8781,7 @@
     ];
     let categoryTitleHeight = [];
     categoryGroups.map((category) => {
-      $$invalidate(12, categoryTitleHeight[category.id] = "", categoryTitleHeight);
+      $$invalidate(14, categoryTitleHeight[category.id] = "", categoryTitleHeight);
     });
     if (metadata) {
       const { events } = metadata.interactions;
@@ -8405,12 +8808,12 @@
     modalSettings.subscribe((value) => {
       const { isModalOpen: storeIsModalOpen } = value;
       $$invalidate(9, isModalOpen = storeIsModalOpen);
+      $$invalidate(12, categoryTabIndex = storeIsModalOpen ? -1 : 0);
     });
     categoriseSettings.subscribe((value) => {
-      const { considerContainerId: storeConsiderContainerId, isDraggingOver: storeIsDraggingOver, sourceContainerId: storeSourceContainerId, dropContainerId: storeDropContainerId, sourceCloneContainerId: storeSourceCloneContainerId, selectedItemId: storeSelectedItemId, sourceSelectedContainerId: storeSourceSelectedContainerId, currentAnswer: storeCurrentAnswer, hasAddItemAnimation: storeHasAddItemAnimation, openCategoryContainer: storeOpenCategoryContainer, currentWordBinIndex: storeCurrentWordBinIndex } = value;
+      const { considerContainerId: storeConsiderContainerId, isDraggingOver: storeIsDraggingOver, dropContainerId: storeDropContainerId, sourceCloneContainerId: storeSourceCloneContainerId, selectedItemId: storeSelectedItemId, sourceSelectedContainerId: storeSourceSelectedContainerId, currentAnswer: storeCurrentAnswer, hasAddItemAnimation: storeHasAddItemAnimation, openCategoryContainer: storeOpenCategoryContainer, currentWordBinIndex: storeCurrentWordBinIndex, lastSelectedTabContainer } = value;
       $$invalidate(1, considerContainerId = storeConsiderContainerId);
       $$invalidate(2, isDraggingOver = storeIsDraggingOver);
-      sourceContainerId = storeSourceContainerId;
       $$invalidate(3, dropContainerId = storeDropContainerId);
       sourceCloneContainerId = storeSourceCloneContainerId;
       $$invalidate(4, currentSelectedItemId = storeSelectedItemId);
@@ -8419,8 +8822,21 @@
       $$invalidate(8, hasAddItemAnimation = storeHasAddItemAnimation);
       $$invalidate(10, openCategoryContainer = storeOpenCategoryContainer);
       $$invalidate(11, currentWordBinIndex = storeCurrentWordBinIndex);
+      $$invalidate(12, categoryTabIndex = storeSelectedItemId.length ? -1 : 0);
       const storeWordBinItem = currentAnswer.filter((answer) => answer.categoryId === CONTAINER_WORD_BIN_ID);
       $$invalidate(7, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
+      if (lastSelectedTabContainer) {
+        setTimeout(
+          () => {
+            tabCategory[lastSelectedTabContainer].focus();
+            categoriseSettings.set({
+              ...get_store_value(categoriseSettings),
+              lastSelectedTabContainer: ""
+            });
+          },
+          150
+        );
+      }
     });
     const checkContainerDragOver = (containerId, storeContainerId, isContainerDragOver) => {
       return containerId === storeContainerId && isContainerDragOver && sourceCloneContainerId !== containerId;
@@ -8461,13 +8877,52 @@
     const saveCategory = ({ detail }) => {
       dispatch("saveCategory", detail);
     };
+    const getContainerTabSelected = (key, containerId) => {
+      if (key === "Enter" && !currentSelectedItemId) {
+        categoriseSettings.set({
+          ...get_store_value(categoriseSettings),
+          currentTabContainer: containerId
+        });
+      }
+      if (key === "Escape" && currentSelectedItemId) {
+        categoriseSettings.set({
+          ...get_store_value(categoriseSettings),
+          selectedItemId: "",
+          sourceSelectedContainerId: ""
+        });
+      }
+    };
+    const resetTabCategory = () => {
+      categoriseSettings.set({
+        ...get_store_value(categoriseSettings),
+        currentTabContainer: "",
+        lastSelectedTabContainer: ""
+      });
+    };
+    const goToWordBin = () => {
+      tabCategory[CONTAINER_WORD_BIN_ID].focus();
+    };
     function div0_elementresize_handler(category) {
       categoryTitleHeight[category.id] = this.clientHeight;
-      $$invalidate(12, categoryTitleHeight);
+      $$invalidate(14, categoryTitleHeight);
+    }
+    const keydown_handler = (category, { key }) => getContainerTabSelected(key, category.id);
+    function div1_binding($$value, category) {
+      binding_callbacks[$$value ? "unshift" : "push"](() => {
+        tabCategory[category.id] = $$value;
+        $$invalidate(13, tabCategory);
+      });
+    }
+    const keydown_handler_1 = ({ key }) => getContainerTabSelected(key, CONTAINER_WORD_BIN_ID);
+    function div4_binding($$value) {
+      binding_callbacks[$$value ? "unshift" : "push"](() => {
+        tabCategory[CONTAINER_WORD_BIN_ID] = $$value;
+        $$invalidate(13, tabCategory);
+      });
     }
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(26, sessionData = $$props2.sessionData);
+        $$invalidate(31, sessionData = $$props2.sessionData);
     };
     return [
       totalCategoryItems,
@@ -8482,6 +8937,8 @@
       isModalOpen,
       openCategoryContainer,
       currentWordBinIndex,
+      categoryTabIndex,
+      tabCategory,
       categoryTitleHeight,
       rubric,
       prompt,
@@ -8496,17 +8953,24 @@
       addCategoryContainer,
       isWordBInTotalZero,
       saveCategory,
+      getContainerTabSelected,
+      resetTabCategory,
+      goToWordBin,
       sessionData,
-      div0_elementresize_handler
+      div0_elementresize_handler,
+      keydown_handler,
+      div1_binding,
+      keydown_handler_1,
+      div4_binding
     ];
   }
   var PromptCategorise = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance9, create_fragment19, safe_not_equal, { sessionData: 26 }, null, [-1, -1]);
+      init(this, options, instance9, create_fragment20, safe_not_equal, { sessionData: 31 }, null, [-1, -1]);
     }
     get sessionData() {
-      return this.$$.ctx[26];
+      return this.$$.ctx[31];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -8517,7 +8981,7 @@
   var PromptCategorise_default = PromptCategorise;
 
   // src/lib/components/prompt/skeleton/PromptSkeleton.svelte
-  function create_fragment20(ctx) {
+  function create_fragment21(ctx) {
     let div3;
     return {
       c() {
@@ -8540,14 +9004,14 @@
   var PromptSkeleton = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment20, safe_not_equal, {});
+      init(this, options, null, create_fragment21, safe_not_equal, {});
     }
   };
   customElements.define("prompt-skeleton", create_custom_element(PromptSkeleton, {}, [], [], true));
   var PromptSkeleton_default = PromptSkeleton;
 
   // src/lib/components/common/InvalidBanner.svelte
-  function create_fragment21(ctx) {
+  function create_fragment22(ctx) {
     let p;
     let t2;
     return {
@@ -8592,7 +9056,7 @@
   var InvalidBanner = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance10, create_fragment21, safe_not_equal, { bannerLabel: 0 });
+      init(this, options, instance10, create_fragment22, safe_not_equal, { bannerLabel: 0 });
     }
     get bannerLabel() {
       return this.$$.ctx[0];
@@ -8607,7 +9071,7 @@
 
   // src/lib/components/prompt/PromptBuilder.svelte
   function add_css(target) {
-    append_styles(target, "svelte-11ftzzu", '*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Mulish, sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*{font-family:Mulish, sans-serif}input::-moz-selection,textarea::-moz-selection{background-color:hsla(0, 0%, 85%, 0.4)}input::selection,textarea::selection{background-color:hsla(0, 0%, 85%, 0.4)}*,:after,:before{--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:rgba(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: }::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:rgba(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: }.p2{font-size:0.875rem;font-weight:600;line-height:1.25rem;line-height:1.5}.blanket-overlay{--tw-bg-opacity:1;background-color:rgb(33 37 41/var(--tw-bg-opacity));inset:0;opacity:0.3;position:absolute}.item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.focus-ring:focus-visible{--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);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.hover-focus-ring:hover,.raw-focus-ring{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.divider{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(218 224 224/var(--tw-border-opacity))}@keyframes svelte-11ftzzu-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-11ftzzu-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.btn-mcq-option:focus-visible{--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);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.btn-mcq-option{--tw-text-opacity:1;--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 250/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));display:flex;font-size:1rem;justify-content:space-between;line-height:1.5rem;margin-bottom:1rem;min-height:48px;padding:0.5rem 0.75rem 0.5rem 0.5rem;width:100%}.btn-mcq-option:active{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity));border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.btn-mcq-option:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}}.btn-mcq-option>span>.choice{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:1rem;border-width:1px;color:rgb(93 99 107/var(--tw-text-opacity));display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:0.05em;line-height:1rem;margin-right:1rem;padding:0.5rem;width:2rem}.btn-mcq-option.selected{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.btn-mcq-option.selected,.btn-mcq-option.selected>span>.choice{border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}.btn-mcq-option.selected>span>.choice{--tw-border-opacity:1}.btn-mcq-option.selected.correct{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity));border-color:rgb(0 102 5/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity));border-color:rgb(217 12 85/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.correct>span>.choice,.btn-mcq-option.selected.incorrect>span>.choice{--tw-border-opacity:1;border-color:rgb(113 115 119/var(--tw-border-opacity));border-width:1px}.typein-textbox:focus-visible{--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);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.typein-textbox{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(93 99 107/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));font-size:1rem;line-height:1.5rem;padding:0.75rem 1rem;width:100%}.typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox:focus{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px;outline:2px solid transparent;outline-offset:2px}}.typein-textbox:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) !important}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));transition-duration:50ms}}#dnd-action-dragged-el{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;--tw-bg-opacity:1!important;background-color:rgb(205 208 254/var(--tw-bg-opacity)) !important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));cursor:grabbing !important;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}#dnd-action-dragged-el .btn-vertical-icon{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));cursor:grabbing !important}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-y-0{bottom:0;top:0}.-top-2{top:-0.5rem}.-top-2\\.5{top:-0.625rem}.bottom-4{bottom:1rem}.left-4{left:1rem}.right-0{right:0}.right-4{right:1rem}.top-12{top:3rem}.z-10{z-index:10}.z-50{z-index:50}.m-auto{margin:auto}.mx-0{margin-left:0;margin-right:0}.mx-0\\.5{margin-left:0.125rem;margin-right:0.125rem}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:0.25rem}.ml-3{margin-left:0.75rem}.ml-\\[3px\\]{margin-left:3px}.mr-2{margin-right:0.5rem}.mr-4{margin-right:1rem}.mt-0{margin-top:0}.mt-0\\.5{margin-top:0.125rem}.mt-2{margin-top:0.5rem}.mt-7{margin-top:1.75rem}.mt-7\\.5{margin-top:1.875}.mt-9{margin-top:2.25rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-4{height:1rem}.h-52{height:13rem}.h-6{height:1.5rem}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.min-h-\\[133px\\]{min-height:133px}.min-h-\\[140px\\]{min-height:140px}.min-h-\\[54px\\]{min-height:54px}.min-h-\\[86px\\]{min-height:86px}.w-11{width:2.75rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\\[44px\\]{min-width:44px}.min-w-\\[85px\\]{min-width:85px}.max-w-\\[400px\\]{max-width:400px}.grow{flex-grow:1}.basis-0{flex-basis:0px}.\\!cursor-default{cursor:default !important}.\\!cursor-pointer{cursor:pointer !important}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0.5rem * var(--tw-space-y-reverse));margin-top:calc(0.5rem * (1 - var(--tw-space-y-reverse)))}.space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse:1}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:0.25rem}.rounded-\\[32px\\]{border-radius:32px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-b-lg{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-\\[6px\\]{border-left-width:6px}.border-dashed{border-style:dashed}.\\!border-blue-1000{--tw-border-opacity:1!important;border-color:rgb(8 38 99/var(--tw-border-opacity)) !important}.border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(93 99 107/var(--tw-border-opacity))}.border-green-800{--tw-border-opacity:1;border-color:rgb(0 102 5/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-red-800{--tw-border-opacity:1;border-color:rgb(217 12 85/var(--tw-border-opacity))}.border-soft-blue{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.\\!bg-violet-100{--tw-bg-opacity:1!important;background-color:rgb(235 235 255/var(--tw-bg-opacity)) !important}.\\!bg-violet-150{--tw-bg-opacity:1!important;background-color:rgb(205 208 254/var(--tw-bg-opacity)) !important}.\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity)) !important}.bg-blue-1000{--tw-bg-opacity:1;background-color:rgb(8 38 99/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(247 250 250/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(244 244 244/var(--tw-bg-opacity))}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity))}.bg-soft-blue{--tw-bg-opacity:1;background-color:rgb(84 101 251/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.bg-violet-150{--tw-bg-opacity:1;background-color:rgb(205 208 254/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-0{padding:0}.p-0\\.5{padding:0.125rem}.p-1{padding:0.25rem}.p-1\\.5{padding:0.375rem}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:0.5rem;padding-top:0.5rem}.pb-3{padding-bottom:0.75rem}.pl-3{padding-left:0.75rem}.pt-\\[55px\\]{padding-top:55px}.text-left{text-align:left}.text-center{text-align:center}.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}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.\\!text-gray-900{--tw-text-opacity:1!important;color:rgb(57 62 69/var(--tw-text-opacity)) !important}.text-blue-1000{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity))}.text-charcoal{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(93 99 107/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(0 102 5/var(--tw-text-opacity))}.text-inherit{color:inherit}.text-red-800{--tw-text-opacity:1;color:rgb(217 12 85/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-50{opacity:0.5}.shadow-\\[0_-12px_14px_-16px_\\#00000033\\]{--tw-shadow:0 -12px 14px -16px #00000033;--tw-shadow-colored:0 -12px 14px -16px var(--tw-shadow-color)}.shadow-\\[0_-12px_14px_-16px_\\#00000033\\],.shadow-md{box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)}.shadow-md{--tw-shadow:0px 2px 8px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 8px var(--tw-shadow-color)}.\\!outline-none{outline:2px solid transparent !important;outline-offset:2px !important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:0.15s;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.duration-300{transition-duration:0.3s}.active\\:raw-focus-ring:active{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}@media(min-width: 732px){.md\\:item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}}@media(hover: hover) and (pointer: fine){.td\\:hover-focus-ring:hover{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}}.last\\:mr-0:last-child{margin-right:0}.hover\\:bg-black-50:hover{background-color:rgba(0, 0, 0, 0.0509803922)}.hover\\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.hover\\:bg-yellow-1000:hover{--tw-bg-opacity:1;background-color:rgb(251 217 27/var(--tw-bg-opacity))}.hover\\:text-charcoal:hover{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.focus\\:outline-transparent:focus{outline-color:transparent}.active\\:bg-black-55:active,.active\\:bg-black-60:active{background-color:rgba(0, 0, 0, 0.1019607843)}.active\\:bg-yellow-1100:active{--tw-bg-opacity:1;background-color:rgb(238 206 26/var(--tw-bg-opacity))}.active\\:text-charcoal:active{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.disabled\\:text-gray-40:disabled{--tw-text-opacity:1;color:rgb(142 147 153/var(--tw-text-opacity))}.disabled\\:hover\\:bg-white:hover:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group\\/itemContainer:hover .group-hover\\/itemContainer\\:bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.group:hover .group-hover\\:underline{text-decoration-line:underline}.group:active .group-active\\:border-2{border-width:2px}.group:active .group-active\\:border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.group:active .group-active\\:p-\\[7px\\]{padding:7px}@media(min-width: 732px){.md\\:inset-0{inset:0}.md\\:top-20{top:5rem}.md\\:mb-2{margin-bottom:0.5rem}.md\\:mb-4{margin-bottom:1rem}.md\\:mb-8{margin-bottom:2rem}.md\\:mt-14{margin-top:3.5rem}.md\\:block{display:block}.md\\:inline-block{display:inline-block}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:min-h-0{min-height:0}.md\\:min-h-\\[140px\\]{min-height:140px}.md\\:min-h-\\[164px\\]{min-height:164px}.md\\:w-fit{width:-moz-fit-content;width:fit-content}.md\\:grow-0{flex-grow:0}.md\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\\:flex-row{flex-direction:row}.md\\:flex-col{flex-direction:column}.md\\:items-center{align-items:center}.md\\:justify-normal{justify-content:normal}.md\\:justify-center{justify-content:center}.md\\:justify-between{justify-content:space-between}.md\\:gap-6{gap:1.5rem}.md\\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px * var(--tw-space-y-reverse));margin-top:calc(0px * (1 - var(--tw-space-y-reverse)))}.md\\:rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.md\\:border{border-width:1px}.md\\:border-gray-400{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.md\\:\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity)) !important}.md\\:p-4{padding:1rem}.md\\:px-0{padding-left:0;padding-right:0}.md\\:pb-0{padding-bottom:0}.md\\:pt-20{padding-top:5rem}.md\\:pt-20\\.5{padding-top:5.125rem}.md\\:text-center{text-align:center}.md\\:shadow-\\[0_0_\\#0000\\]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)}.group\\/itemContainer:hover .md\\:group-hover\\/itemContainer\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}}@media(min-width: 1196px){.lg\\:mr-6{margin-right:1.5rem}.lg\\:flex{display:flex}.lg\\:min-h-\\[224px\\]{min-height:224px}.lg\\:gap-0{gap:0}.lg\\:last\\:mr-0:last-child{margin-right:0}}@media(hover: hover) and (pointer: fine){.td\\:hover\\:cursor-grab:hover{cursor:grab}.td\\:hover\\:bg-black-50:hover{background-color:rgba(0, 0, 0, 0.0509803922)}.td\\:hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.td\\:hover\\:text-soft-blue:hover{--tw-text-opacity:1;color:rgb(84 101 251/var(--tw-text-opacity))}.group:hover .td\\:group-hover\\:bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.group:hover .td\\:group-hover\\:opacity-5{opacity:0.05}}');
+    append_styles(target, "svelte-19319yb", '*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Mulish, sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*{font-family:Mulish, sans-serif}input::-moz-selection,textarea::-moz-selection{background-color:hsla(0, 0%, 85%, 0.4)}input::selection,textarea::selection{background-color:hsla(0, 0%, 85%, 0.4)}*,:after,:before{--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:rgba(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: }::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:rgba(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: }.p2{font-size:0.875rem;font-weight:600;line-height:1.25rem;line-height:1.5}.blanket-overlay{--tw-bg-opacity:1;background-color:rgb(33 37 41/var(--tw-bg-opacity));inset:0;opacity:0.3;position:absolute}.item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.focus-ring:focus-visible{--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);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.hover-focus-ring:hover,.raw-focus-ring{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.divider{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(218 224 224/var(--tw-border-opacity))}@keyframes svelte-19319yb-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-19319yb-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.btn-mcq-option:focus-visible{--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);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.btn-mcq-option{--tw-text-opacity:1;--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 250/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));display:flex;font-size:1rem;justify-content:space-between;line-height:1.5rem;margin-bottom:1rem;min-height:48px;padding:0.5rem 0.75rem 0.5rem 0.5rem;width:100%}.btn-mcq-option:active{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity));border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.btn-mcq-option:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}}.btn-mcq-option>span>.choice{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:1rem;border-width:1px;color:rgb(93 99 107/var(--tw-text-opacity));display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:0.05em;line-height:1rem;margin-right:1rem;padding:0.5rem;width:2rem}.btn-mcq-option.selected{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.btn-mcq-option.selected,.btn-mcq-option.selected>span>.choice{border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}.btn-mcq-option.selected>span>.choice{--tw-border-opacity:1}.btn-mcq-option.selected.correct{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity));border-color:rgb(0 102 5/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity));border-color:rgb(217 12 85/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.correct>span>.choice,.btn-mcq-option.selected.incorrect>span>.choice{--tw-border-opacity:1;border-color:rgb(113 115 119/var(--tw-border-opacity));border-width:1px}.typein-textbox:focus-visible{--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);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.typein-textbox{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(93 99 107/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));font-size:1rem;line-height:1.5rem;padding:0.75rem 1rem;width:100%}.typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox:focus{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px;outline:2px solid transparent;outline-offset:2px}}.typein-textbox:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) !important}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));transition-duration:50ms}}#dnd-action-dragged-el{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;--tw-bg-opacity:1!important;background-color:rgb(205 208 254/var(--tw-bg-opacity)) !important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));cursor:grabbing !important;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}#dnd-action-dragged-el .btn-vertical-icon{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));cursor:grabbing !important}.sr-only{clip:rect(0, 0, 0, 0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-y-0{bottom:0;top:0}.-top-2{top:-0.5rem}.-top-2\\.5{top:-0.625rem}.bottom-4{bottom:1rem}.left-4{left:1rem}.left-\\[-9999px\\]{left:-9999px}.right-0{right:0}.right-4{right:1rem}.top-12{top:3rem}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.m-auto{margin:auto}.mx-0{margin-left:0;margin-right:0}.mx-0\\.5{margin-left:0.125rem;margin-right:0.125rem}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:0.25rem}.ml-3{margin-left:0.75rem}.ml-\\[3px\\]{margin-left:3px}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mr-4{margin-right:1rem}.mt-0{margin-top:0}.mt-0\\.5{margin-top:0.125rem}.mt-2{margin-top:0.5rem}.mt-7{margin-top:1.75rem}.mt-7\\.5{margin-top:1.875}.mt-9{margin-top:2.25rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-4{height:1rem}.h-52{height:13rem}.h-6{height:1.5rem}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.min-h-\\[133px\\]{min-height:133px}.min-h-\\[140px\\]{min-height:140px}.min-h-\\[54px\\]{min-height:54px}.min-h-\\[86px\\]{min-height:86px}.w-11{width:2.75rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\\[44px\\]{min-width:44px}.min-w-\\[85px\\]{min-width:85px}.max-w-\\[400px\\]{max-width:400px}.grow{flex-grow:1}.basis-0{flex-basis:0px}.\\!cursor-default{cursor:default !important}.\\!cursor-pointer{cursor:pointer !important}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0.5rem * var(--tw-space-y-reverse));margin-top:calc(0.5rem * (1 - var(--tw-space-y-reverse)))}.space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse:1}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:0.25rem}.rounded-\\[32px\\]{border-radius:32px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-b-lg{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-6,.border-l-\\[6px\\]{border-left-width:6px}.border-dashed{border-style:dashed}.\\!border-blue-1000{--tw-border-opacity:1!important;border-color:rgb(8 38 99/var(--tw-border-opacity)) !important}.border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.border-charcoal{--tw-border-opacity:1;border-color:rgb(33 37 41/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(93 99 107/var(--tw-border-opacity))}.border-green-800{--tw-border-opacity:1;border-color:rgb(0 102 5/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-red-800{--tw-border-opacity:1;border-color:rgb(217 12 85/var(--tw-border-opacity))}.border-soft-blue{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.\\!bg-violet-100{--tw-bg-opacity:1!important;background-color:rgb(235 235 255/var(--tw-bg-opacity)) !important}.\\!bg-violet-150{--tw-bg-opacity:1!important;background-color:rgb(205 208 254/var(--tw-bg-opacity)) !important}.\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity)) !important}.bg-blue-1000{--tw-bg-opacity:1;background-color:rgb(8 38 99/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(247 250 250/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(244 244 244/var(--tw-bg-opacity))}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity))}.bg-soft-blue{--tw-bg-opacity:1;background-color:rgb(84 101 251/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.bg-violet-150{--tw-bg-opacity:1;background-color:rgb(205 208 254/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-1000{--tw-bg-opacity:1;background-color:rgb(251 217 27/var(--tw-bg-opacity))}.p-0{padding:0}.p-0\\.5{padding:0.125rem}.p-1{padding:0.25rem}.p-1\\.5{padding:0.375rem}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:0.25rem;padding-top:0.25rem}.py-1\\.5{padding-bottom:0.375rem;padding-top:0.375rem}.py-2{padding-bottom:0.5rem;padding-top:0.5rem}.pb-3{padding-bottom:0.75rem}.pl-3{padding-left:0.75rem}.pl-4{padding-left:1rem}.pr-3{padding-right:0.75rem}.pt-\\[55px\\]{padding-top:55px}.text-left{text-align:left}.text-center{text-align:center}.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}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.\\!text-gray-900{--tw-text-opacity:1!important;color:rgb(57 62 69/var(--tw-text-opacity)) !important}.text-blue-1000{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity))}.text-charcoal{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(93 99 107/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(0 102 5/var(--tw-text-opacity))}.text-inherit{color:inherit}.text-red-800{--tw-text-opacity:1;color:rgb(217 12 85/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.opacity-50{opacity:0.5}.shadow-\\[0_-12px_14px_-16px_\\#00000033\\]{--tw-shadow:0 -12px 14px -16px #00000033;--tw-shadow-colored:0 -12px 14px -16px var(--tw-shadow-color)}.shadow-\\[0_-12px_14px_-16px_\\#00000033\\],.shadow-md{box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)}.shadow-md{--tw-shadow:0px 2px 8px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 8px var(--tw-shadow-color)}.\\!outline-none{outline:2px solid transparent !important;outline-offset:2px !important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:0.15s;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.duration-300{transition-duration:0.3s}.active\\:raw-focus-ring:active{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}@media(min-width: 732px){.md\\:item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}}@media(hover: hover) and (pointer: fine){.td\\:hover-focus-ring:hover{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}}.last\\:mr-0:last-child{margin-right:0}.focus-within\\:left-0:focus-within{left:0}.focus-within\\:right-0:focus-within{right:0}.focus-within\\:top-0:focus-within{top:0}.focus-within\\:z-30:focus-within{z-index:30}.hover\\:bg-black-50:hover{background-color:rgba(0, 0, 0, 0.0509803922)}.hover\\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.hover\\:bg-yellow-1000:hover{--tw-bg-opacity:1;background-color:rgb(251 217 27/var(--tw-bg-opacity))}.hover\\:text-charcoal:hover{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.focus\\:outline-transparent:focus{outline-color:transparent}.focus-visible\\:border:focus-visible{border-width:1px}.focus-visible\\:border-charcoal:focus-visible{--tw-border-opacity:1;border-color:rgb(33 37 41/var(--tw-border-opacity))}.focus-visible\\:border-gray-400:focus-visible{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.focus-visible\\:border-gray-800:focus-visible{--tw-border-opacity:1;border-color:rgb(93 99 107/var(--tw-border-opacity))}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.active\\:bg-black-55:active,.active\\:bg-black-60:active{background-color:rgba(0, 0, 0, 0.1019607843)}.active\\:bg-yellow-1100:active{--tw-bg-opacity:1;background-color:rgb(238 206 26/var(--tw-bg-opacity))}.active\\:text-charcoal:active{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.disabled\\:text-gray-40:disabled{--tw-text-opacity:1;color:rgb(142 147 153/var(--tw-text-opacity))}.disabled\\:hover\\:bg-white:hover:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group\\/itemContainer:hover .group-hover\\/itemContainer\\:bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.group:hover .group-hover\\:underline{text-decoration-line:underline}.group:active .group-active\\:border-2{border-width:2px}.group:active .group-active\\:border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.group:active .group-active\\:p-\\[7px\\]{padding:7px}@media(min-width: 732px){.md\\:inset-0{inset:0}.md\\:top-20{top:5rem}.md\\:mb-2{margin-bottom:0.5rem}.md\\:mb-4{margin-bottom:1rem}.md\\:mb-8{margin-bottom:2rem}.md\\:mt-14{margin-top:3.5rem}.md\\:block{display:block}.md\\:inline-block{display:inline-block}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:min-h-0{min-height:0}.md\\:min-h-\\[140px\\]{min-height:140px}.md\\:min-h-\\[164px\\]{min-height:164px}.md\\:w-fit{width:-moz-fit-content;width:fit-content}.md\\:grow-0{flex-grow:0}.md\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\\:flex-row{flex-direction:row}.md\\:flex-col{flex-direction:column}.md\\:items-center{align-items:center}.md\\:justify-normal{justify-content:normal}.md\\:justify-center{justify-content:center}.md\\:justify-between{justify-content:space-between}.md\\:gap-6{gap:1.5rem}.md\\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px * var(--tw-space-y-reverse));margin-top:calc(0px * (1 - var(--tw-space-y-reverse)))}.md\\:rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.md\\:border{border-width:1px}.md\\:border-gray-400{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.md\\:\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity)) !important}.md\\:p-4{padding:1rem}.md\\:px-0{padding-left:0;padding-right:0}.md\\:pb-0{padding-bottom:0}.md\\:pt-20{padding-top:5rem}.md\\:pt-20\\.5{padding-top:5.125rem}.md\\:text-center{text-align:center}.md\\:shadow-\\[0_0_\\#0000\\]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)}.group\\/itemContainer:hover .md\\:group-hover\\/itemContainer\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}}@media(min-width: 1196px){.lg\\:mr-6{margin-right:1.5rem}.lg\\:flex{display:flex}.lg\\:min-h-\\[224px\\]{min-height:224px}.lg\\:gap-0{gap:0}.lg\\:last\\:mr-0:last-child{margin-right:0}}@media(hover: hover) and (pointer: fine){.td\\:hover\\:cursor-grab:hover{cursor:grab}.td\\:hover\\:bg-black-50:hover{background-color:rgba(0, 0, 0, 0.0509803922)}.td\\:hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.td\\:hover\\:text-soft-blue:hover{--tw-text-opacity:1;color:rgb(84 101 251/var(--tw-text-opacity))}.group:hover .td\\:group-hover\\:bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.group:hover .td\\:group-hover\\:opacity-5{opacity:0.05}}');
   }
   function create_else_block_12(ctx) {
     let invalidbanner;
@@ -8969,7 +9433,7 @@
       }
     };
   }
-  function create_fragment22(ctx) {
+  function create_fragment23(ctx) {
     let current_block_type_index;
     let if_block;
     let if_block_anchor;
@@ -9234,7 +9698,7 @@
   var PromptBuilder = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance11, create_fragment22, safe_not_equal, {}, add_css);
+      init(this, options, instance11, create_fragment23, safe_not_equal, {}, add_css);
     }
   };
   customElements.define("prompt-builder", create_custom_element(PromptBuilder, {}, [], [], true));