eat-js-sdk 2.0.55 → 2.0.57

package/dist/interaction-builder.mjs

@@ -13898,32 +13898,52 @@ var root_7$2 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden">
 var root$6 = /* @__PURE__ */ from_html(`<button data-item-button=""><span><!></span> <div><span></span> <span class="absolute"><!> <!></span></div></button>`);
 function CategoriseItem($$anchor, $$props) {
   push($$props, true);
-  let itemId = prop($$props, "itemId", 7), itemText = prop($$props, "itemText", 7), containerId = prop($$props, "containerId", 7), mode = prop($$props, "mode", 7), isSelected = prop($$props, "isSelected", 7, false), isLocked = prop($$props, "isLocked", 7, false), resultType = prop($$props, "resultType", 7, ""), hasAnyItemSelected = prop($$props, "hasAnyItemSelected", 7, false), isCurrentMobileItem = prop($$props, "isCurrentMobileItem", 7, true), isClonedItem = prop($$props, "isClonedItem", 7, false), isConsideredItem = prop($$props, "isConsideredItem", 7, false), currentTabContainer = prop($$props, "currentTabContainer", 7, null), additionalClasses = prop($$props, "additionalClasses", 7, ""), onclick = prop($$props, "onclick", 7), onkeydown = prop($$props, "onkeydown", 7);
+  let itemId = prop($$props, "itemId", 7), itemText = prop($$props, "itemText", 7), containerId = prop($$props, "containerId", 7), mode = prop($$props, "mode", 7), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isCollapsed = prop($$props, "isCollapsed", 7, false), resultType = prop($$props, "resultType", 7, ""), isCurrentMobileItem = prop($$props, "isCurrentMobileItem", 7, true), isClonedItem = prop($$props, "isClonedItem", 7, false), isConsideredItem = prop($$props, "isConsideredItem", 7, false), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), onclick = prop($$props, "onclick", 7), onfocus = prop($$props, "onfocus", 7), onblur = prop($$props, "onblur", 7), onkeydown = prop($$props, "onkeydown", 7);
   const ariaWord = useRemoveRichTextHtmlTags(itemText());
   const isWordBin = containerId() === CATEGORISE.CONTAINER_WORD_BIN_ID;
   let touchStartX = /* @__PURE__ */ state(0);
   let touchStartY = /* @__PURE__ */ state(0);
   let isDragging2 = /* @__PURE__ */ state(false);
+  let lastFocusTime = /* @__PURE__ */ state(0);
+  const cleanItemId = /* @__PURE__ */ user_derived(() => itemId().split("@eat-dash@")[0]);
+  const isSelected = /* @__PURE__ */ user_derived(() => selectedItemId() === get$1(cleanItemId));
+  const hasAnyItemSelected = /* @__PURE__ */ user_derived(() => !!selectedItemId());
+  const canInteract = /* @__PURE__ */ user_derived(() => !isLocked() && (!resultType() || mode() === MODES.INTERACTIVE));
   const ariaLabel = /* @__PURE__ */ user_derived(() => () => {
-    if (resultType() === ANSWER_RESULTS.INCORRECT && isWordBin && !isSelected()) {
+    if (resultType() === ANSWER_RESULTS.INCORRECT && isWordBin && !get$1(isSelected)) {
       return `Skipped answer: ${ariaWord}`;
     }
-    if ((resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) && !isSelected()) {
+    if ((resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) && !get$1(isSelected)) {
       return `Student's answer: ${ariaWord} (${resultType()})`;
     }
     if (resultType() === ANSWER_RESULTS.MISSED) {
       return `Missing answer: ${ariaWord}`;
     }
-    return `${isSelected() ? "Selected option" : "Option"}: ${ariaWord}`;
+    return `${get$1(isSelected) ? "Selected option" : "Option"}: ${ariaWord}`;
   });
+  const handleFocus = (event2) => {
+    set(lastFocusTime, Date.now(), true);
+    if (onfocus()) {
+      onfocus()(event2);
+    }
+  };
+  const handleBlur = (event2) => {
+    if (onblur()) {
+      onblur()(event2);
+    }
+  };
   const selectItem = (event2) => {
     event2.stopPropagation();
+    const now2 = Date.now();
+    const timeSinceFocus = now2 - get$1(lastFocusTime);
+    if (timeSinceFocus < 100) {
+      console.log("Ignoring NVDA auto-activation?");
+      return;
+    }
     if (isLocked()) return;
     if (resultType() && mode() !== MODES.INTERACTIVE) return;
-    if (hasAnyItemSelected() && !isSelected()) return;
-    if (onclick()) {
-      onclick()();
-    }
+    if (get$1(hasAnyItemSelected) && !get$1(isSelected)) return;
+    if (onclick()) onclick()();
   };
   const handleTouchStart = (event2) => {
     set(isDragging2, false);
@@ -13931,9 +13951,11 @@ function CategoriseItem($$anchor, $$props) {
       set(touchStartX, event2.touches[0].clientX, true);
       set(touchStartY, event2.touches[0].clientY, true);
     }
+    if (get$1(hasAnyItemSelected)) {
+      event2.stopPropagation();
+    }
   };
   const handleTouchMove = (event2) => {
-    event2.preventDefault();
     if (event2.touches.length > 0) {
       const deltaX = Math.abs(event2.touches[0].clientX - get$1(touchStartX));
       const deltaY = Math.abs(event2.touches[0].clientY - get$1(touchStartY));
@@ -13941,9 +13963,13 @@ function CategoriseItem($$anchor, $$props) {
         set(isDragging2, true);
       }
     }
+    if (get$1(hasAnyItemSelected)) {
+      event2.stopPropagation();
+    }
   };
   const handleTouchEnd = (event2) => {
     if (!get$1(isDragging2)) {
+      event2.preventDefault();
       selectItem(event2);
     }
     set(isDragging2, false);
@@ -13955,18 +13981,18 @@ function CategoriseItem($$anchor, $$props) {
       if (onkeydown()) {
         onkeydown()(event2);
       }
+    } else if (event2.key === "Tab") {
+      if (onkeydown()) {
+        onkeydown()(event2);
+      }
     }
   };
   const itemTabIndex = /* @__PURE__ */ user_derived(() => () => {
-    if (hasAnyItemSelected()) {
-      return -1;
-    }
-    if (isWordBin && isCurrentMobileItem()) {
-      return 0;
-    }
-    if (currentTabContainer() === containerId()) {
-      return 0;
-    }
+    if (get$1(isSelected)) return 0;
+    if (isCollapsed()) return -1;
+    if (get$1(hasAnyItemSelected)) return -1;
+    if (activeContainerForKeyboard() === containerId()) return 0;
+    if (isWordBin && isCurrentMobileItem()) return 0;
     return -1;
   });
   const buttonClasses = /* @__PURE__ */ user_derived(() => () => {
@@ -13979,7 +14005,10 @@ function CategoriseItem($$anchor, $$props) {
       "p-1",
       "border",
       "border-gray-800",
-      "rounded-lg"
+      "rounded-lg",
+      "mr-2",
+      "mb-2",
+      "last:mr-0"
     ];
     if (isClonedItem()) {
       classes.push("opacity-50", "raw-focus-ring", "bg-violet-100");
@@ -13987,65 +14016,46 @@ function CategoriseItem($$anchor, $$props) {
     if (isConsideredItem()) {
       classes.push("hidden");
     }
-    classes.push("mr-2", "mb-2", "last:mr-0");
     if (isWordBin && !isCurrentMobileItem()) {
       classes.push("hidden", "md:flex");
     }
-    if (isSelected()) {
+    if (get$1(isSelected)) {
       classes.push("bg-blue-1000", "!border-blue-1000", "raw-focus-ring", "!cursor-pointer");
     } else {
       classes.push("bg-gray-100");
     }
-    if (resultType() === ANSWER_RESULTS.CORRECT && !isSelected()) {
+    if (resultType() === ANSWER_RESULTS.CORRECT && !get$1(isSelected)) {
       classes.push("border-green-800", "bg-green-300");
-    } else if (resultType() === ANSWER_RESULTS.INCORRECT && !isSelected()) {
+    }
+    if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) {
       classes.push("border-red-800", "bg-red-300");
-    } else if (resultType() === ANSWER_RESULTS.MISSED) {
+    }
+    if (resultType() === ANSWER_RESULTS.MISSED) {
       classes.push("border-green-800");
     }
-    const isInteractive = !isSelected() && !isLocked() && (!resultType() || mode() === MODES.INTERACTIVE) && !hasAnyItemSelected();
-    if (isInteractive) {
+    if (!get$1(isSelected) && get$1(canInteract) && !get$1(hasAnyItemSelected)) {
       classes.push("td:hover-focus-ring", "td:hover:bg-violet-100", "!cursor-pointer");
-    } else {
+    } else if (!get$1(isSelected)) {
       classes.push("!cursor-default");
     }
-    if (additionalClasses()) {
-      classes.push(additionalClasses());
-    }
     return classes.join(" ");
   });
   const textClasses = /* @__PURE__ */ user_derived(() => () => {
-    const classes = ["text-charcoal", "text-base", "pl-3", "mr-4"];
-    if (isSelected()) {
-      classes.push("text-white");
-    }
-    return classes.join(" ");
+    return `text-charcoal text-base pl-3 mr-4 ${get$1(isSelected) ? "text-white" : ""}`;
   });
   const iconContainerClasses = /* @__PURE__ */ user_derived(() => () => {
-    const classes = [
-      "group",
-      "text-blue-1000",
-      "h-11",
-      "w-11",
-      "min-w-[44px]",
-      "flex",
-      "items-center",
-      "justify-center",
-      "btn-vertical-icon"
-    ];
-    const shouldShowGrabCursor = !hasAnyItemSelected() && !isLocked() && !isSelected() && (!resultType() || mode() === MODES.INTERACTIVE);
-    if (shouldShowGrabCursor) {
-      classes.push("td:hover:cursor-grab", "td:hover:text-soft-blue");
+    const base = "group text-blue-1000 h-11 w-11 min-w-[44px] flex items-center justify-center btn-vertical-icon";
+    if (!get$1(hasAnyItemSelected) && get$1(canInteract) && !get$1(isSelected)) {
+      return `${base} td:hover:cursor-grab td:hover:text-soft-blue`;
     }
-    return classes.join(" ");
+    return base;
   });
   const iconBgClasses = /* @__PURE__ */ user_derived(() => () => {
-    const classes = ["w-full", "h-full", "relative", "rounded-lg"];
-    const shouldShowHover = !hasAnyItemSelected() && !isLocked() && !isSelected() && (!resultType() || mode() === MODES.INTERACTIVE);
-    if (shouldShowHover) {
-      classes.push("td:group-hover:bg-black", "td:group-hover:opacity-5");
+    const base = "w-full h-full relative rounded-lg";
+    if (!get$1(hasAnyItemSelected) && get$1(canInteract) && !get$1(isSelected)) {
+      return `${base} td:group-hover:bg-black td:group-hover:opacity-5`;
     }
-    return classes.join(" ");
+    return base;
   });
   var $$exports = {
     get itemId() {
@@ -14076,11 +14086,11 @@ function CategoriseItem($$anchor, $$props) {
       mode($$value);
       flushSync();
     },
-    get isSelected() {
-      return isSelected();
+    get selectedItemId() {
+      return selectedItemId();
     },
-    set isSelected($$value = false) {
-      isSelected($$value);
+    set selectedItemId($$value = void 0) {
+      selectedItemId($$value);
       flushSync();
     },
     get isLocked() {
@@ -14090,6 +14100,13 @@ function CategoriseItem($$anchor, $$props) {
       isLocked($$value);
       flushSync();
     },
+    get isCollapsed() {
+      return isCollapsed();
+    },
+    set isCollapsed($$value = false) {
+      isCollapsed($$value);
+      flushSync();
+    },
     get resultType() {
       return resultType();
     },
@@ -14097,13 +14114,6 @@ function CategoriseItem($$anchor, $$props) {
       resultType($$value);
       flushSync();
     },
-    get hasAnyItemSelected() {
-      return hasAnyItemSelected();
-    },
-    set hasAnyItemSelected($$value = false) {
-      hasAnyItemSelected($$value);
-      flushSync();
-    },
     get isCurrentMobileItem() {
       return isCurrentMobileItem();
     },
@@ -14125,18 +14135,11 @@ function CategoriseItem($$anchor, $$props) {
       isConsideredItem($$value);
       flushSync();
     },
-    get currentTabContainer() {
-      return currentTabContainer();
+    get activeContainerForKeyboard() {
+      return activeContainerForKeyboard();
     },
-    set currentTabContainer($$value = null) {
-      currentTabContainer($$value);
-      flushSync();
-    },
-    get additionalClasses() {
-      return additionalClasses();
-    },
-    set additionalClasses($$value = "") {
-      additionalClasses($$value);
+    set activeContainerForKeyboard($$value = void 0) {
+      activeContainerForKeyboard($$value);
       flushSync();
     },
     get onclick() {
@@ -14146,6 +14149,20 @@ function CategoriseItem($$anchor, $$props) {
       onclick($$value);
       flushSync();
     },
+    get onfocus() {
+      return onfocus();
+    },
+    set onfocus($$value) {
+      onfocus($$value);
+      flushSync();
+    },
+    get onblur() {
+      return onblur();
+    },
+    set onblur($$value) {
+      onblur($$value);
+      flushSync();
+    },
     get onkeydown() {
       return onkeydown();
     },
@@ -14220,7 +14237,7 @@ function CategoriseItem($$anchor, $$props) {
         if_block(
           node_3,
           ($$render) => {
-            if (resultType() === ANSWER_RESULTS.INCORRECT && !isSelected()) $$render(consequent_1);
+            if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) $$render(consequent_1);
             else $$render(alternate_1, false);
           },
           true
@@ -14229,7 +14246,7 @@ function CategoriseItem($$anchor, $$props) {
       append($$anchor2, fragment);
     };
     if_block(node_1, ($$render) => {
-      if (resultType() === ANSWER_RESULTS.CORRECT && !isSelected()) $$render(consequent);
+      if (resultType() === ANSWER_RESULTS.CORRECT && !get$1(isSelected)) $$render(consequent);
       else $$render(alternate_2, false);
     });
   }
@@ -14269,6 +14286,8 @@ function CategoriseItem($$anchor, $$props) {
       () => clsx(get$1(iconBgClasses)())
     ]
   );
+  event("focus", button, handleFocus);
+  event("blur", button, handleBlur);
   append($$anchor, button);
   return pop($$exports);
 }
@@ -14280,42 +14299,51 @@ create_custom_element(
     itemText: {},
     containerId: {},
     mode: {},
-    isSelected: {},
+    selectedItemId: {},
     isLocked: {},
+    isCollapsed: {},
     resultType: {},
-    hasAnyItemSelected: {},
     isCurrentMobileItem: {},
     isClonedItem: {},
     isConsideredItem: {},
-    currentTabContainer: {},
-    additionalClasses: {},
+    activeContainerForKeyboard: {},
     onclick: {},
+    onfocus: {},
+    onblur: {},
     onkeydown: {}
   },
   [],
   [],
   true
 );
-var root_1$8 = /* @__PURE__ */ from_html(`<button class="focus-ring absolute inset-0 bg-transparent rounded-lg z-10 pointer-events-auto"></button>`);
+var root_1$8 = /* @__PURE__ */ from_html(`<button tabindex="0"></button>`);
 var root_7$1 = /* @__PURE__ */ from_html(`<div class="w-full text-base text-charcoal font-semibold mt-1 mb-2">Missing answers:</div>`);
 var root_6$1 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-var root$5 = /* @__PURE__ */ from_html(`<!>  <section role="group" aria-dropeffect="move"><!></section>`, 1);
+var root$5 = /* @__PURE__ */ from_html(`<!>   <section><!></section>`, 1);
 function CategoriseDndContainer($$anchor, $$props) {
   push($$props, true);
-  let containerId = prop($$props, "containerId", 7), containerClass = prop($$props, "containerClass", 7, ""), showButton = prop($$props, "showButton", 7, true), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), currentTabContainer = prop($$props, "currentTabContainer", 7, null), isMobile = prop($$props, "isMobile", 7, false), mode = prop($$props, "mode", 7), paddingTop = prop($$props, "paddingTop", 7, 0), dndType = prop($$props, "dndType", 7, "categorise"), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7), children = prop($$props, "children", 7);
+  let containerId = prop($$props, "containerId", 7), containerLabel = prop($$props, "containerLabel", 7, ""), containerClass = prop($$props, "containerClass", 7, ""), showButton = prop($$props, "showButton", 7, true), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isMobile = prop($$props, "isMobile", 7, false), mode = prop($$props, "mode", 7), paddingTop = prop($$props, "paddingTop", 7, 0), dndType = prop($$props, "dndType", 7, "categorise"), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), isCollapsed = prop($$props, "isCollapsed", 7, false), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), onitemfocus = prop($$props, "onitemfocus", 7), onitemblur = prop($$props, "onitemblur", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7), children = prop($$props, "children", 7);
   let considerItemId = /* @__PURE__ */ state(void 0);
   let isHoveringDrag = /* @__PURE__ */ state(false);
-  const dndItems = /* @__PURE__ */ user_derived(() => items().map((item) => {
-    if (item.id === get$1(considerItemId)) {
-      return {
-        id: "clonedId",
-        itemText: item.itemText,
-        isClonedItem: true,
-        cloneId: item.id
-      };
-    }
-    return { ...item };
-  }));
+  let dragCounter = /* @__PURE__ */ state(0);
+  let localItems = /* @__PURE__ */ state(proxy([]));
+  user_effect(() => {
+    set(
+      localItems,
+      items().map((item) => {
+        if (item.id === get$1(considerItemId)) {
+          return {
+            id: "clonedId",
+            itemText: item.itemText,
+            isClonedItem: true,
+            cloneId: item.id
+          };
+        }
+        return { ...item };
+      }),
+      true
+    );
+  });
   const handleConsider = (e2) => {
     const { info } = e2.detail;
     if (info.trigger === "draggedEntered") {
@@ -14332,6 +14360,9 @@ function CategoriseDndContainer($$anchor, $$props) {
       return;
     }
     if (info.trigger === "dragStarted") {
+      if (selectedItemId()) {
+        return;
+      }
       const draggedItemId = info.id;
       set(considerItemId, draggedItemId, true);
       set(isHoveringDrag, false);
@@ -14349,6 +14380,7 @@ function CategoriseDndContainer($$anchor, $$props) {
   const handleFinalize = (e2) => {
     set(considerItemId, void 0);
     set(isHoveringDrag, false);
+    set(dragCounter, get$1(dragCounter) + 1);
     if (onitemdrop()) {
       onitemdrop()(e2);
     }
@@ -14381,17 +14413,15 @@ function CategoriseDndContainer($$anchor, $$props) {
     if (containerId() === "container-word-bin" && isMobile()) {
       return 0;
     }
-    if (currentTabContainer() === containerId()) {
-      return 0;
-    }
     return -1;
   });
+  const dragDisabled = /* @__PURE__ */ user_derived(() => isLocked() || !!selectedItemId());
   const dndConfig = /* @__PURE__ */ user_derived(() => ({
-    items: get$1(dndItems),
+    items: get$1(localItems),
     flipDurationMs: 5,
     type: dndType(),
     morphDisabled: true,
-    dragDisabled: isLocked() || !!selectedItemId(),
+    dragDisabled: get$1(dragDisabled),
     dropFromOthersDisabled: isLocked(),
     dropTargetClasses: ["!outline-none"],
     zoneItemTabIndex: get$1(getZoneItemTabIndex)(),
@@ -14399,12 +14429,13 @@ function CategoriseDndContainer($$anchor, $$props) {
     autoAriaDisabled: true,
     keyboardDisabled: true
   }));
-  const isEmpty = /* @__PURE__ */ user_derived(() => get$1(dndItems).length === 0);
+  const isEmpty = /* @__PURE__ */ user_derived(() => get$1(localItems).length === 0);
   const isSourceContainer = /* @__PURE__ */ user_derived(() => () => {
     if (!selectedItemId()) return false;
-    return get$1(dndItems).some((item) => {
+    const selected = selectedItemId();
+    return get$1(localItems).some((item) => {
       const cleanItemId = item.id.split("@eat-dash@")[0];
-      const cleanSelectedId = selectedItemId().split("@eat-dash@")[0];
+      const cleanSelectedId = selected.split("@eat-dash@")[0];
       return cleanItemId === cleanSelectedId;
     });
   });
@@ -14413,6 +14444,16 @@ function CategoriseDndContainer($$anchor, $$props) {
       oncontainerclick()(containerId());
     }
   };
+  const handleSectionTouchStart = (e2) => {
+    if (selectedItemId()) {
+      e2.stopPropagation();
+    }
+  };
+  const handleSectionTouchMove = (e2) => {
+    if (selectedItemId()) {
+      e2.stopPropagation();
+    }
+  };
   var $$exports = {
     get containerId() {
       return containerId();
@@ -14421,6 +14462,13 @@ function CategoriseDndContainer($$anchor, $$props) {
       containerId($$value);
       flushSync();
     },
+    get containerLabel() {
+      return containerLabel();
+    },
+    set containerLabel($$value = "") {
+      containerLabel($$value);
+      flushSync();
+    },
     get containerClass() {
       return containerClass();
     },
@@ -14456,13 +14504,6 @@ function CategoriseDndContainer($$anchor, $$props) {
       isLocked($$value);
       flushSync();
     },
-    get currentTabContainer() {
-      return currentTabContainer();
-    },
-    set currentTabContainer($$value = null) {
-      currentTabContainer($$value);
-      flushSync();
-    },
     get isMobile() {
       return isMobile();
     },
@@ -14491,6 +14532,20 @@ function CategoriseDndContainer($$anchor, $$props) {
       dndType($$value);
       flushSync();
     },
+    get activeContainerForKeyboard() {
+      return activeContainerForKeyboard();
+    },
+    set activeContainerForKeyboard($$value = void 0) {
+      activeContainerForKeyboard($$value);
+      flushSync();
+    },
+    get isCollapsed() {
+      return isCollapsed();
+    },
+    set isCollapsed($$value = false) {
+      isCollapsed($$value);
+      flushSync();
+    },
     get onitemdrop() {
       return onitemdrop();
     },
@@ -14512,6 +14567,20 @@ function CategoriseDndContainer($$anchor, $$props) {
       oncontainerclick($$value);
       flushSync();
     },
+    get onitemfocus() {
+      return onitemfocus();
+    },
+    set onitemfocus($$value) {
+      onitemfocus($$value);
+      flushSync();
+    },
+    get onitemblur() {
+      return onitemblur();
+    },
+    set onitemblur($$value) {
+      onitemblur($$value);
+      flushSync();
+    },
     get onitemkeydown() {
       return onitemkeydown();
     },
@@ -14547,15 +14616,20 @@ function CategoriseDndContainer($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var button = root_1$8();
       button.__click = handleContainerClick;
-      template_effect(() => set_attribute(button, "aria-label", `Place item in container ${containerId()}`));
+      template_effect(() => {
+        set_class(button, 1, `focus-ring absolute inset-0 bg-transparent rounded-lg z-10 pointer-events-auto focus-visible:border ${containerId() === "container-word-bin" ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"}`);
+        set_attribute(button, "aria-label", containerLabel());
+      });
       append($$anchor2, button);
     };
     if_block(node, ($$render) => {
-      if (!isLocked() && selectedItemId() && !get$1(isSourceContainer)() && currentTabContainer() !== containerId()) $$render(consequent);
+      if (!isLocked() && selectedItemId() && !get$1(isSourceContainer)()) $$render(consequent);
     });
   }
   var section = sibling(node, 2);
   section.__click = handleSectionClick;
+  section.__touchstart = handleSectionTouchStart;
+  section.__touchmove = handleSectionTouchMove;
   set_attribute(section, "tabindex", -1);
   var node_1 = child(section);
   {
@@ -14583,8 +14657,7 @@ function CategoriseDndContainer($$anchor, $$props) {
         var consequent_4 = ($$anchor3) => {
           var fragment_4 = comment();
           var node_5 = first_child(fragment_4);
-          each(node_5, 19, () => get$1(dndItems), (item) => `${item.id}-${selectedItemId() === item.id.split("@eat-dash@")[0] ? "selected" : "unselected"}-${selectedItemId() ? "hasSelection" : "noSelection"}-${get$1(considerItemId) === item.id ? "considering" : "notConsidering"}-${currentTabContainer()}-${isLocked()}`, ($$anchor4, item, index2) => {
-            const cleanItemId = /* @__PURE__ */ user_derived(() => get$1(item).id.split("@eat-dash@")[0]);
+          each(node_5, 19, () => get$1(localItems), (item) => `${item.id}-${get$1(dragCounter)}`, ($$anchor4, item, index2) => {
             const itemResultType = /* @__PURE__ */ user_derived(() => getItemResultType(get$1(item).isClonedItem && get$1(item).cloneId ? get$1(item).cloneId : get$1(item).id));
             var fragment_5 = root_6$1();
             var node_6 = first_child(fragment_5);
@@ -14594,15 +14667,13 @@ function CategoriseDndContainer($$anchor, $$props) {
                 append($$anchor5, div);
               };
               if_block(node_6, ($$render) => {
-                if (get$1(itemResultType) === ANSWER_RESULTS.MISSED && get$1(index2) === get$1(dndItems).findIndex((i) => getItemResultType(i.id) === ANSWER_RESULTS.MISSED)) $$render(consequent_3);
+                if (get$1(itemResultType) === ANSWER_RESULTS.MISSED && get$1(index2) === get$1(localItems).findIndex((i) => getItemResultType(i.id) === ANSWER_RESULTS.MISSED)) $$render(consequent_3);
               });
             }
             var node_7 = sibling(node_6, 2);
             {
               let $0 = /* @__PURE__ */ user_derived(() => get$1(item).itemText || "");
-              let $1 = /* @__PURE__ */ user_derived(() => selectedItemId() === get$1(cleanItemId));
-              let $2 = /* @__PURE__ */ user_derived(() => get$1(considerItemId) === get$1(item).id);
-              let $3 = /* @__PURE__ */ user_derived(() => !!selectedItemId());
+              let $1 = /* @__PURE__ */ user_derived(() => get$1(considerItemId) === get$1(item).id);
               CategoriseItem(node_7, {
                 get itemId() {
                   return get$1(item).id;
@@ -14613,17 +14684,14 @@ function CategoriseDndContainer($$anchor, $$props) {
                 get containerId() {
                   return containerId();
                 },
-                get isSelected() {
-                  return get$1($1);
+                get selectedItemId() {
+                  return selectedItemId();
                 },
                 get isClonedItem() {
                   return get$1(item).isClonedItem;
                 },
                 get isConsideredItem() {
-                  return get$1($2);
-                },
-                get currentTabContainer() {
-                  return currentTabContainer();
+                  return get$1($1);
                 },
                 get isLocked() {
                   return isLocked();
@@ -14637,10 +14705,15 @@ function CategoriseDndContainer($$anchor, $$props) {
                 get resultType() {
                   return get$1(itemResultType);
                 },
-                get hasAnyItemSelected() {
-                  return get$1($3);
+                get activeContainerForKeyboard() {
+                  return activeContainerForKeyboard();
+                },
+                get isCollapsed() {
+                  return isCollapsed();
                 },
                 onclick: () => handleItemClick(get$1(item).id),
+                onfocus: (e2) => onitemfocus()?.(get$1(item).id, e2),
+                onblur: (e2) => onitemblur()?.(get$1(item).id, e2),
                 onkeydown: (e2) => onitemkeydown()?.(e2, get$1(item).id, get$1(index2))
               });
             }
@@ -14666,6 +14739,7 @@ function CategoriseDndContainer($$anchor, $$props) {
   reset(section);
   action$1(section, ($$node, $$action_arg) => dndzone?.($$node, $$action_arg), () => get$1(dndConfig));
   template_effect(() => {
+    set_attribute(section, "aria-hidden", activeContainerForKeyboard() !== containerId() ? "true" : void 0);
     set_attribute(section, "id", containerId());
     set_class(section, 1, `flex flex-wrap ${containerClass() ?? ""}`);
     set_style(section, paddingTop() > 0 ? `padding-top: ${paddingTop()}px;` : "");
@@ -14675,24 +14749,28 @@ function CategoriseDndContainer($$anchor, $$props) {
   append($$anchor, fragment);
   return pop($$exports);
 }
-delegate(["click"]);
+delegate(["click", "touchstart", "touchmove"]);
 create_custom_element(
   CategoriseDndContainer,
   {
     containerId: {},
+    containerLabel: {},
     containerClass: {},
     showButton: {},
     items: {},
     selectedItemId: {},
     isLocked: {},
-    currentTabContainer: {},
     isMobile: {},
     mode: {},
     paddingTop: {},
     dndType: {},
+    activeContainerForKeyboard: {},
+    isCollapsed: {},
     onitemdrop: {},
     onitemselect: {},
     oncontainerclick: {},
+    onitemfocus: {},
+    onitemblur: {},
     onitemkeydown: {},
     ondraghover: {},
     ondragstart: {},
@@ -14708,26 +14786,14 @@ var root_1$7 = /* @__PURE__ */ from_html(`<button type="button" class="focus-rin
 var root$4 = /* @__PURE__ */ from_html(`<div role="group"><div><!> <!></div> <!></div>`);
 function CategoriseCategory($$anchor, $$props) {
   push($$props, true);
-  let categoryId = prop($$props, "categoryId", 7), categoryTitle = prop($$props, "categoryTitle", 7), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), currentTabContainer = prop($$props, "currentTabContainer", 7, null), isCollapsed = prop($$props, "isCollapsed", 7, false), isDraggingOver = prop($$props, "isDraggingOver", 7, false), dropContainerId = prop($$props, "dropContainerId", 7, void 0), hasAddItemAnimation = prop($$props, "hasAddItemAnimation", 7, false), dragSourceContainerId = prop($$props, "dragSourceContainerId", 7, void 0), mode = prop($$props, "mode", 7), isMobile = prop($$props, "isMobile", 7, false), hasStimulus = prop($$props, "hasStimulus", 7, false), dndType = prop($$props, "dndType", 7, "categorise"), tabindex = prop($$props, "tabindex", 7, 0), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), ontogglecollapse = prop($$props, "ontogglecollapse", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), onkeydown = prop($$props, "onkeydown", 7), onfocus = prop($$props, "onfocus", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7);
-  const effectiveIsCollapsed = /* @__PURE__ */ user_derived(isCollapsed);
-  const handleToggle = () => {
-    if (isMobile() && ontogglecollapse()) {
-      ontogglecollapse()(categoryId());
-    }
-  };
-  const handleContainerClick = (e2) => {
-    if (get$1(effectiveIsCollapsed) && isMobile() && selectedItemId() && get$1(isNotSourceContainer) && oncontainerclick()) {
-      const target = e2.target;
-      if (!target.closest('button[aria-label*="word"]')) {
-        oncontainerclick()(categoryId());
-      }
-    }
-  };
-  const itemCount = /* @__PURE__ */ user_derived(() => items().length);
-  const getTotalWords = /* @__PURE__ */ user_derived(() => `${get$1(itemCount)} ${get$1(itemCount) === 1 ? "word" : "words"}`);
+  let categoryId = prop($$props, "categoryId", 7), categoryTitle = prop($$props, "categoryTitle", 7), categoryIndex = prop($$props, "categoryIndex", 7, 1), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isCollapsed = prop($$props, "isCollapsed", 7, false), isDraggingOver = prop($$props, "isDraggingOver", 7, false), dropContainerId = prop($$props, "dropContainerId", 7, void 0), hasAddItemAnimation = prop($$props, "hasAddItemAnimation", 7, false), dragSourceContainerId = prop($$props, "dragSourceContainerId", 7, void 0), mode = prop($$props, "mode", 7), isMobile = prop($$props, "isMobile", 7, false), hasStimulus = prop($$props, "hasStimulus", 7, false), dndType = prop($$props, "dndType", 7, "categorise"), tabindex = prop($$props, "tabindex", 7, 0), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), ontogglecollapse = prop($$props, "ontogglecollapse", 7), onitemfocus = prop($$props, "onitemfocus", 7), onitemblur = prop($$props, "onitemblur", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), onkeydown = prop($$props, "onkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7);
   let categoryTitleHeight = /* @__PURE__ */ state(0);
   let titleElement = /* @__PURE__ */ state(void 0);
   let categoryElement = /* @__PURE__ */ state(void 0);
+  const effectiveIsCollapsed = /* @__PURE__ */ user_derived(isCollapsed);
+  const itemCount = /* @__PURE__ */ user_derived(() => items().length);
+  const getTotalWords = /* @__PURE__ */ user_derived(() => `${get$1(itemCount)} ${get$1(itemCount) === 1 ? "word" : "words"}`);
+  const cleanCategoryTitle = /* @__PURE__ */ user_derived(() => useRemoveRichTextHtmlTags(categoryTitle()));
   const isDropTarget = /* @__PURE__ */ user_derived(() => dropContainerId() === categoryId());
   const isNotSourceContainer = /* @__PURE__ */ user_derived(() => dragSourceContainerId() !== categoryId());
   const hasSelectedItem = /* @__PURE__ */ user_derived(() => !!selectedItemId());
@@ -14747,12 +14813,21 @@ function CategoriseCategory($$anchor, $$props) {
     ${get$1(isDropTarget) && get$1(isNotSourceContainer) ? "bg-transparent" : "bg-white"}
     ${get$1(effectiveIsCollapsed) && isDraggingOver() && get$1(isNotSourceContainer) ? "!bg-violet-100 md:!bg-white" : ""}
     ${get$1(effectiveIsCollapsed) && isMobile() ? "rounded-b-lg md:rounded-b-none" : ""}`);
-  const adjustedTabindex = /* @__PURE__ */ user_derived(() => () => {
-    if (get$1(hasSelectedItem)) {
-      return -1;
+  const adjustedTabindex = /* @__PURE__ */ user_derived(tabindex);
+  const shouldShowAriaLabel = /* @__PURE__ */ user_derived(() => !get$1(hasSelectedItem) || !get$1(isNotSourceContainer));
+  const handleToggle = () => {
+    if (isMobile() && ontogglecollapse()) {
+      ontogglecollapse()(categoryId());
     }
-    return tabindex();
-  });
+  };
+  const handleContainerClick = (e2) => {
+    if (get$1(effectiveIsCollapsed) && isMobile() && selectedItemId() && get$1(isNotSourceContainer) && oncontainerclick()) {
+      const target = e2.target;
+      if (!target.closest('button[aria-label*="word"]')) {
+        oncontainerclick()(categoryId());
+      }
+    }
+  };
   var $$exports = {
     get categoryElement() {
       return get$1(categoryElement);
@@ -14774,6 +14849,13 @@ function CategoriseCategory($$anchor, $$props) {
       categoryTitle($$value);
       flushSync();
     },
+    get categoryIndex() {
+      return categoryIndex();
+    },
+    set categoryIndex($$value = 1) {
+      categoryIndex($$value);
+      flushSync();
+    },
     get items() {
       return items();
     },
@@ -14795,13 +14877,6 @@ function CategoriseCategory($$anchor, $$props) {
       isLocked($$value);
       flushSync();
     },
-    get currentTabContainer() {
-      return currentTabContainer();
-    },
-    set currentTabContainer($$value = null) {
-      currentTabContainer($$value);
-      flushSync();
-    },
     get isCollapsed() {
       return isCollapsed();
     },
@@ -14872,6 +14947,13 @@ function CategoriseCategory($$anchor, $$props) {
       tabindex($$value);
       flushSync();
     },
+    get activeContainerForKeyboard() {
+      return activeContainerForKeyboard();
+    },
+    set activeContainerForKeyboard($$value = void 0) {
+      activeContainerForKeyboard($$value);
+      flushSync();
+    },
     get onitemdrop() {
       return onitemdrop();
     },
@@ -14900,6 +14982,20 @@ function CategoriseCategory($$anchor, $$props) {
       ontogglecollapse($$value);
       flushSync();
     },
+    get onitemfocus() {
+      return onitemfocus();
+    },
+    set onitemfocus($$value) {
+      onitemfocus($$value);
+      flushSync();
+    },
+    get onitemblur() {
+      return onitemblur();
+    },
+    set onitemblur($$value) {
+      onitemblur($$value);
+      flushSync();
+    },
     get onitemkeydown() {
       return onitemkeydown();
     },
@@ -14914,13 +15010,6 @@ function CategoriseCategory($$anchor, $$props) {
       onkeydown($$value);
       flushSync();
     },
-    get onfocus() {
-      return onfocus();
-    },
-    set onfocus($$value) {
-      onfocus($$value);
-      flushSync();
-    },
     get ondraghover() {
       return ondraghover();
     },
@@ -14938,7 +15027,7 @@ function CategoriseCategory($$anchor, $$props) {
   };
   var div = root$4();
   div.__keydown = function(...$$args) {
-    onkeydown()?.apply(this, $$args);
+    (onkeydown() || void 0)?.apply(this, $$args);
   };
   div.__click = handleContainerClick;
   var div_1 = child(div);
@@ -14947,7 +15036,8 @@ function CategoriseCategory($$anchor, $$props) {
     get htmlString() {
       return categoryTitle();
     },
-    otherClass: "text-base leading-5 !text-gray-900 md:item-heading"
+    otherClass: "text-base leading-5 !text-gray-900 md:item-heading",
+    ariaHidden: true
   });
   var node_1 = sibling(node, 2);
   {
@@ -14982,6 +15072,7 @@ function CategoriseCategory($$anchor, $$props) {
       reset(button);
       template_effect(() => {
         set_attribute(button, "aria-label", get$1(getTotalWords));
+        set_attribute(button, "tabindex", selectedItemId() ? -1 : 0);
         set_text(text, get$1(getTotalWords));
       });
       append($$anchor2, button);
@@ -14997,16 +15088,24 @@ function CategoriseCategory($$anchor, $$props) {
     {
       const children = ($$anchor3) => {
       };
-      let $0 = /* @__PURE__ */ user_derived(() => !get$1(effectiveIsCollapsed) || !isMobile());
+      let $0 = /* @__PURE__ */ user_derived(() => `Category ${categoryIndex()}: ${get$1(cleanCategoryTitle)}`);
+      let $1 = /* @__PURE__ */ user_derived(() => !get$1(effectiveIsCollapsed) || !isMobile());
+      let $2 = /* @__PURE__ */ user_derived(() => get$1(effectiveIsCollapsed) && isMobile());
       CategoriseDndContainer($$anchor2, {
         get containerId() {
           return categoryId();
         },
+        get containerLabel() {
+          return get$1($0);
+        },
         get containerClass() {
           return get$1(containerClasses);
         },
         get showButton() {
-          return get$1($0);
+          return get$1($1);
+        },
+        get isCollapsed() {
+          return get$1($2);
         },
         get items() {
           return items();
@@ -15017,9 +15116,6 @@ function CategoriseCategory($$anchor, $$props) {
         get isLocked() {
           return isLocked();
         },
-        get currentTabContainer() {
-          return currentTabContainer();
-        },
         get mode() {
           return mode();
         },
@@ -15029,6 +15125,9 @@ function CategoriseCategory($$anchor, $$props) {
         get paddingTop() {
           return get$1(paddingTopValue);
         },
+        get activeContainerForKeyboard() {
+          return activeContainerForKeyboard();
+        },
         get onitemdrop() {
           return onitemdrop();
         },
@@ -15038,6 +15137,12 @@ function CategoriseCategory($$anchor, $$props) {
         get oncontainerclick() {
           return oncontainerclick();
         },
+        get onitemfocus() {
+          return onitemfocus();
+        },
+        get onitemblur() {
+          return onitemblur();
+        },
         get onitemkeydown() {
           return onitemkeydown();
         },
@@ -15054,16 +15159,11 @@ function CategoriseCategory($$anchor, $$props) {
   });
   reset(div);
   bind_this(div, ($$value) => set(categoryElement, $$value), () => get$1(categoryElement));
-  template_effect(
-    ($0) => {
-      set_attribute(div, "tabindex", $0);
-      set_class(div, 1, clsx(get$1(outerClasses)));
-      set_class(div_1, 1, clsx(get$1(titleClasses)));
-    },
-    [() => get$1(adjustedTabindex)()]
-  );
-  event("focus", div, function(...$$args) {
-    onfocus()?.apply(this, $$args);
+  template_effect(() => {
+    set_attribute(div, "tabindex", get$1(adjustedTabindex));
+    set_attribute(div, "aria-label", get$1(shouldShowAriaLabel) ? `Category ${categoryIndex()}: ${get$1(cleanCategoryTitle)}. ${get$1(getTotalWords)} added.` : void 0);
+    set_class(div, 1, clsx(get$1(outerClasses)));
+    set_class(div_1, 1, clsx(get$1(titleClasses)));
   });
   bind_element_size(div_1, "clientHeight", ($$value) => set(categoryTitleHeight, $$value));
   append($$anchor, div);
@@ -15075,10 +15175,10 @@ create_custom_element(
   {
     categoryId: {},
     categoryTitle: {},
+    categoryIndex: {},
     items: {},
     selectedItemId: {},
     isLocked: {},
-    currentTabContainer: {},
     isCollapsed: {},
     isDraggingOver: {},
     dropContainerId: {},
@@ -15089,13 +15189,15 @@ create_custom_element(
     hasStimulus: {},
     dndType: {},
     tabindex: {},
+    activeContainerForKeyboard: {},
     onitemdrop: {},
     onitemselect: {},
     oncontainerclick: {},
     ontogglecollapse: {},
+    onitemfocus: {},
+    onitemblur: {},
     onitemkeydown: {},
     onkeydown: {},
-    onfocus: {},
     ondraghover: {},
     ondragstart: {}
   },
@@ -15107,16 +15209,11 @@ var root_1$6 = /* @__PURE__ */ from_html(`<div role="group" tabindex="-1" class=
         absolute top-12 right-4 left-4 bottom-4 flex items-center justify-center !bg-white md:top-20">Word Bin is empty</div>`);
 var root_2$2 = /* @__PURE__ */ from_html(`<button type="button" class="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" aria-label="Left"><span class="w-6 h-6 text-inherit flex items-center justify-center"><!></span></button>`);
 var root_3$2 = /* @__PURE__ */ from_html(`<button type="button" class="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" aria-label="Right"><span class="w-6 h-6 text-inherit flex items-center justify-center ml-[3px]"><!></span></button>`);
-var root$3 = /* @__PURE__ */ from_html(`<div role="group"><div><span class="text-base leading-5 !text-gray-900 font-semibold md:mb-2 md:item-heading">Word Bin&nbsp;</span> <span class="text-base leading-5 !text-gray-900 md:item-heading"> </span></div> <div class="flex items-center justify-between px-4 min-h-[133px] md:min-h-0 md:block md:px-0 md:justify-normal"><!> <!> <!> <!></div></div>`);
+var root$3 = /* @__PURE__ */ from_html(`<div role="group"><div><span class="text-base leading-5 !text-gray-900 font-semibold md:mb-2 md:item-heading" aria-hidden="true">Word Bin&nbsp;</span> <span class="text-base leading-5 !text-gray-900 md:item-heading" aria-hidden="true"> </span></div> <div class="flex items-center justify-between px-4 min-h-[133px] md:min-h-0 md:block md:px-0 md:justify-normal"><!> <!> <!> <!></div></div>`);
 function CategoriseWordBin($$anchor, $$props) {
   push($$props, true);
-  let containerId = prop($$props, "containerId", 7), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), currentTabContainer = prop($$props, "currentTabContainer", 7, null), isDraggingOver = prop($$props, "isDraggingOver", 7, false), dropContainerId = prop($$props, "dropContainerId", 7, void 0), hasAddItemAnimation = prop($$props, "hasAddItemAnimation", 7, false), dragSourceContainerId = prop($$props, "dragSourceContainerId", 7, void 0), mode = prop($$props, "mode", 7), isMobile = prop($$props, "isMobile", 7, false), currentMobileIndex = prop($$props, "currentMobileIndex", 7, 0), totalItems = prop($$props, "totalItems", 7, 0), dndType = prop($$props, "dndType", 7, "categorise"), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), onnavigateitem = prop($$props, "onnavigateitem", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7), onkeydown = prop($$props, "onkeydown", 7), onfocus = prop($$props, "onfocus", 7);
+  let containerId = prop($$props, "containerId", 7), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isDraggingOver = prop($$props, "isDraggingOver", 7, false), dropContainerId = prop($$props, "dropContainerId", 7, void 0), hasAddItemAnimation = prop($$props, "hasAddItemAnimation", 7, false), dragSourceContainerId = prop($$props, "dragSourceContainerId", 7, void 0), mode = prop($$props, "mode", 7), isMobile = prop($$props, "isMobile", 7, false), currentMobileIndex = prop($$props, "currentMobileIndex", 7, 0), totalItems = prop($$props, "totalItems", 7, 0), tabindex = prop($$props, "tabindex", 7, 0), dndType = prop($$props, "dndType", 7, "categorise"), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), onnavigateitem = prop($$props, "onnavigateitem", 7), onitemfocus = prop($$props, "onitemfocus", 7), onitemblur = prop($$props, "onitemblur", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7), onkeydown = prop($$props, "onkeydown", 7), onfocus = prop($$props, "onfocus", 7, void 0);
   let wordBinElement = /* @__PURE__ */ state(void 0);
-  const handleNavigate = (direction) => {
-    if (onnavigateitem()) {
-      onnavigateitem()(direction);
-    }
-  };
   const displayItems = /* @__PURE__ */ user_derived(() => isMobile() && items().length > 0 ? [items()[currentMobileIndex()]].filter(Boolean) : items());
   const itemsRemaining = /* @__PURE__ */ user_derived(() => items().length);
   const showNavigation = /* @__PURE__ */ user_derived(() => isMobile() && items().length > 0);
@@ -15124,39 +15221,64 @@ function CategoriseWordBin($$anchor, $$props) {
   const isNotSourceContainer = /* @__PURE__ */ user_derived(() => dragSourceContainerId() !== containerId());
   const hasSelectedItem = /* @__PURE__ */ user_derived(() => !!selectedItemId());
   const isValidDropTarget = /* @__PURE__ */ user_derived(() => get$1(hasSelectedItem) && get$1(isNotSourceContainer));
-  const containerClasses = /* @__PURE__ */ user_derived(() => `!outline-none bg-transparent p-4 pt-[55px] grow md:grow-0 md:pt-20.5 justify-center md:justify-normal
-    ${isDraggingOver() && get$1(isNotSourceContainer) ? "!bg-violet-100" : ""}`);
   const isPreviewMode2 = /* @__PURE__ */ user_derived(isLocked);
-  const outerClasses = /* @__PURE__ */ user_derived(() => `${get$1(isPreviewMode2) ? "select-none" : ""} 
-    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
-    ${get$1(isPreviewMode2) ? "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-soft-blue focus-visible:ring-offset-4 focus-visible:duration-50" : "focus-ring"}
-    ${isDraggingOver() && get$1(isNotSourceContainer) ? "raw-focus-ring bg-violet-100" : ""}
-    ${get$1(isDropTarget) && get$1(isNotSourceContainer) ? "bg-violet-150" : ""}
-    ${get$1(isDropTarget) && hasAddItemAnimation() && get$1(isNotSourceContainer) ? "transition bg-white duration-300" : ""}
-    ${get$1(isValidDropTarget) ? "td:hover:bg-violet-100 td:hover-focus-ring cursor-pointer" : ""}
-    ${get$1(hasSelectedItem) && !get$1(isNotSourceContainer) ? "cursor-default" : ""}`);
-  const titleClasses = /* @__PURE__ */ user_derived(() => `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
-    ${get$1(isDropTarget) && !hasAddItemAnimation() && get$1(isNotSourceContainer) ? "bg-violet-150" : ""}
-    ${get$1(isDropTarget) && hasAddItemAnimation() && get$1(isNotSourceContainer) ? "transition duration-300 bg-white" : ""}
-    ${isDraggingOver() && get$1(isNotSourceContainer) ? "bg-violet-100" : ""}
-    ${get$1(isValidDropTarget) ? "td:hover:bg-violet-100" : ""}`);
+  const handleNavigate = (direction) => {
+    if (onnavigateitem()) {
+      onnavigateitem()(direction);
+    }
+  };
+  const containerClasses = /* @__PURE__ */ user_derived(() => [
+    "!outline-none",
+    "bg-transparent",
+    "p-4",
+    "pt-[55px]",
+    "grow",
+    "md:grow-0",
+    "md:pt-20.5",
+    "justify-center",
+    "md:justify-normal",
+    isDraggingOver() && get$1(isNotSourceContainer) ? "!bg-violet-100" : ""
+  ].filter(Boolean).join(" "));
+  const outerClasses = /* @__PURE__ */ user_derived(() => [
+    get$1(isPreviewMode2) ? "select-none" : "",
+    "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",
+    get$1(isPreviewMode2) ? "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-soft-blue focus-visible:ring-offset-4 focus-visible:duration-50" : "focus-ring",
+    isDraggingOver() && get$1(isNotSourceContainer) ? "raw-focus-ring bg-violet-100" : "",
+    get$1(isDropTarget) && get$1(isNotSourceContainer) ? "bg-violet-150" : "",
+    get$1(isDropTarget) && hasAddItemAnimation() && get$1(isNotSourceContainer) ? "transition bg-white duration-300" : "",
+    get$1(isValidDropTarget) ? "td:hover:bg-violet-100 td:hover-focus-ring cursor-pointer" : "",
+    get$1(hasSelectedItem) && !get$1(isNotSourceContainer) ? "cursor-default" : ""
+  ].filter(Boolean).join(" "));
+  const titleClasses = /* @__PURE__ */ user_derived(() => [
+    "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",
+    get$1(isDropTarget) && !hasAddItemAnimation() && get$1(isNotSourceContainer) ? "bg-violet-150" : "",
+    get$1(isDropTarget) && hasAddItemAnimation() && get$1(isNotSourceContainer) ? "transition duration-300 bg-white" : "",
+    isDraggingOver() && get$1(isNotSourceContainer) ? "bg-violet-100" : "",
+    get$1(isValidDropTarget) ? "td:hover:bg-violet-100" : ""
+  ].filter(Boolean).join(" "));
   const handleEmptyClick = () => {
     if (selectedItemId() && oncontainerclick()) {
       oncontainerclick()(containerId());
     }
   };
-  const handleContainerKeyDown = (event2) => {
-    if (isMobile() && event2.key === "Enter" && items().length > 0 && get$1(wordBinElement) && !selectedItemId()) {
-      event2.preventDefault();
-      const itemButton = get$1(wordBinElement).querySelector("[data-item-button]");
-      if (itemButton) {
-        itemButton.focus();
-      }
-    }
-    if (onkeydown()) {
-      onkeydown()(event2);
-    }
-  };
   var $$exports = {
     get wordBinElement() {
       return get$1(wordBinElement);
@@ -15192,13 +15314,6 @@ function CategoriseWordBin($$anchor, $$props) {
       isLocked($$value);
       flushSync();
     },
-    get currentTabContainer() {
-      return currentTabContainer();
-    },
-    set currentTabContainer($$value = null) {
-      currentTabContainer($$value);
-      flushSync();
-    },
     get isDraggingOver() {
       return isDraggingOver();
     },
@@ -15255,6 +15370,13 @@ function CategoriseWordBin($$anchor, $$props) {
       totalItems($$value);
       flushSync();
     },
+    get tabindex() {
+      return tabindex();
+    },
+    set tabindex($$value = 0) {
+      tabindex($$value);
+      flushSync();
+    },
     get dndType() {
       return dndType();
     },
@@ -15262,6 +15384,13 @@ function CategoriseWordBin($$anchor, $$props) {
       dndType($$value);
       flushSync();
     },
+    get activeContainerForKeyboard() {
+      return activeContainerForKeyboard();
+    },
+    set activeContainerForKeyboard($$value = void 0) {
+      activeContainerForKeyboard($$value);
+      flushSync();
+    },
     get onitemdrop() {
       return onitemdrop();
     },
@@ -15290,6 +15419,20 @@ function CategoriseWordBin($$anchor, $$props) {
       onnavigateitem($$value);
       flushSync();
     },
+    get onitemfocus() {
+      return onitemfocus();
+    },
+    set onitemfocus($$value) {
+      onitemfocus($$value);
+      flushSync();
+    },
+    get onitemblur() {
+      return onitemblur();
+    },
+    set onitemblur($$value) {
+      onitemblur($$value);
+      flushSync();
+    },
     get onitemkeydown() {
       return onitemkeydown();
     },
@@ -15321,13 +15464,15 @@ function CategoriseWordBin($$anchor, $$props) {
     get onfocus() {
       return onfocus();
     },
-    set onfocus($$value) {
+    set onfocus($$value = void 0) {
       onfocus($$value);
       flushSync();
     }
   };
   var div = root$3();
-  div.__keydown = handleContainerKeyDown;
+  div.__keydown = function(...$$args) {
+    (onkeydown() || void 0)?.apply(this, $$args);
+  };
   var div_1 = child(div);
   var span = sibling(child(div_1), 2);
   var text = child(span);
@@ -15373,6 +15518,7 @@ function CategoriseWordBin($$anchor, $$props) {
     get containerId() {
       return containerId();
     },
+    containerLabel: "Word Bin",
     get containerClass() {
       return get$1(containerClasses);
     },
@@ -15385,9 +15531,6 @@ function CategoriseWordBin($$anchor, $$props) {
     get isLocked() {
       return isLocked();
     },
-    get currentTabContainer() {
-      return currentTabContainer();
-    },
     get isMobile() {
       return isMobile();
     },
@@ -15397,6 +15540,9 @@ function CategoriseWordBin($$anchor, $$props) {
     get dndType() {
       return dndType();
     },
+    get activeContainerForKeyboard() {
+      return activeContainerForKeyboard();
+    },
     get onitemdrop() {
       return onitemdrop();
     },
@@ -15406,6 +15552,12 @@ function CategoriseWordBin($$anchor, $$props) {
     get oncontainerclick() {
       return oncontainerclick();
     },
+    get onitemfocus() {
+      return onitemfocus();
+    },
+    get onitemblur() {
+      return onitemblur();
+    },
     get onitemkeydown() {
       return onitemkeydown();
     },
@@ -15442,13 +15594,14 @@ function CategoriseWordBin($$anchor, $$props) {
   reset(div);
   bind_this(div, ($$value) => set(wordBinElement, $$value), () => get$1(wordBinElement));
   template_effect(() => {
-    set_attribute(div, "tabindex", get$1(hasSelectedItem) ? -1 : 0);
+    set_attribute(div, "tabindex", tabindex());
+    set_attribute(div, "aria-label", !get$1(hasSelectedItem) || !get$1(isNotSourceContainer) ? `Word Bin. ${get$1(itemsRemaining)} out of ${totalItems()} left.` : void 0);
     set_class(div, 1, clsx(get$1(outerClasses)));
     set_class(div_1, 1, clsx(get$1(titleClasses)));
     set_text(text, `${get$1(itemsRemaining) ?? ""} out of ${totalItems() ?? ""} left`);
   });
   event("focus", div, function(...$$args) {
-    onfocus()?.apply(this, $$args);
+    (onfocus() || void 0)?.apply(this, $$args);
   });
   append($$anchor, div);
   return pop($$exports);
@@ -15461,7 +15614,6 @@ create_custom_element(
     items: {},
     selectedItemId: {},
     isLocked: {},
-    currentTabContainer: {},
     isDraggingOver: {},
     dropContainerId: {},
     hasAddItemAnimation: {},
@@ -15470,11 +15622,15 @@ create_custom_element(
     isMobile: {},
     currentMobileIndex: {},
     totalItems: {},
+    tabindex: {},
     dndType: {},
+    activeContainerForKeyboard: {},
     onitemdrop: {},
     onitemselect: {},
     oncontainerclick: {},
     onnavigateitem: {},
+    onitemfocus: {},
+    onitemblur: {},
     onitemkeydown: {},
     ondraghover: {},
     ondragstart: {},
@@ -15519,13 +15675,11 @@ function CategoriseModal($$anchor, $$props) {
   push($$props, true);
   let isOpen = prop($$props, "isOpen", 7, false), onclose = prop($$props, "onclose", 7), onreset = prop($$props, "onreset", 7);
   let categoryModalRef = /* @__PURE__ */ state(void 0);
-  let ariaHidden = /* @__PURE__ */ state(false);
   user_effect(() => {
     if (isOpen() && get$1(categoryModalRef)) {
       setTimeout(
         () => {
           get$1(categoryModalRef)?.focus();
-          set(ariaHidden, true);
         },
         0
       );
@@ -15590,7 +15744,6 @@ function CategoriseModal($$anchor, $$props) {
       button_2.__click = handleReset;
       reset(div_3);
       reset(div_1);
-      template_effect(() => set_attribute(div, "aria-hidden", get$1(ariaHidden)));
       append($$anchor2, fragment_1);
     },
     $$slots: { default: true }
@@ -15603,12 +15756,14 @@ var root_2$1 = /* @__PURE__ */ from_html(`<button aria-label="Reset words" class
               text-blue-1000 px-3 py-2 absolute right-0 -top-2.5 hover:bg-blue-100"><span class="h-6 w-6 flex items-center justify-center"><!></span> <span class="text-base leading-4 font-bold ml-1 group-hover:underline">Reset <span class="hidden md:inline-block">words</span></span></button>`);
 var root_1$4 = /* @__PURE__ */ from_html(
   `<button type="button" aria-label="Skip to Word Bin" 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"><span class="test-base font-semibold underline mr-1">Skip to Word Bin</span> <span class="text-inherit h-6 w-6 flex items-center justify-center"><!></span></button> <div class="w-full relative"><div class="sr-only" role="status" aria-live="polite" aria-atomic="true" tabindex="-1"> </div> <div class="mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14"><p class="text-base leading-5 !text-gray-900 font-semibold md:item-heading">Categories</p> <!></div> <!> <!> <!></div>`,
+        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"><span class="test-base font-semibold underline mr-1">Skip to Word Bin</span> <span class="text-inherit h-6 w-6 flex items-center justify-center"><!></span></button> <div class="w-full relative"><div class="sr-only" role="status" aria-live="polite" aria-atomic="true" tabindex="-1"> </div> <div class="mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14"><p class="text-base leading-5 !text-gray-900 font-semibold md:item-heading">Categories</p> <!></div> <span tabindex="-1" class="sr-only"></span> <!> <!> <!></div>`,
   1
 );
 function CategoriseComponent($$anchor, $$props) {
   push($$props, true);
   const CONTAINER_WORD_BIN_ID2 = CATEGORISE.CONTAINER_WORD_BIN_ID;
+  const ANIMATION_DELAY_MS = 300;
+  const ANNOUNCEMENT_TIMEOUT_MS = 1e3;
   let api = prop($$props, "api", 7), config = prop($$props, "config", 7), onstateChange = prop($$props, "onstateChange", 7);
   const initialState = api().createInitialState?.();
   if (!initialState?.data) throw new Error("Failed to initialize Categorise state");
@@ -15616,10 +15771,11 @@ function CategoriseComponent($$anchor, $$props) {
   let isMobile = /* @__PURE__ */ state(false);
   let currentMobileIndex = /* @__PURE__ */ state(0);
   let isModalOpen = /* @__PURE__ */ state(false);
-  let currentTabContainer = /* @__PURE__ */ state(null);
+  let activeContainerForKeyboard = /* @__PURE__ */ state(null);
   let dragHoverContainerId = /* @__PURE__ */ state(null);
   let dragSourceContainerId = /* @__PURE__ */ state(null);
   let announcement = /* @__PURE__ */ state("");
+  let srOnlyFocusTrapRef = /* @__PURE__ */ state(void 0);
   let srDivRef = /* @__PURE__ */ state(void 0);
   let skipToWordBinRef = /* @__PURE__ */ state(void 0);
   let wordBinRef = /* @__PURE__ */ state(void 0);
@@ -15628,18 +15784,19 @@ function CategoriseComponent($$anchor, $$props) {
   const categoryTabIndex = /* @__PURE__ */ user_derived(() => get$1(selectedItemId) || get$1(isModalOpen) ? -1 : 0);
   const isCompleted = /* @__PURE__ */ user_derived(() => api().isCompleted?.(get$1(interactionState)) ?? false);
   const isLocked = /* @__PURE__ */ user_derived(() => api().isLocked?.(get$1(interactionState)) ?? false);
+  const dropContainerId = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.dropContainerId);
+  const hasAddItemAnimation = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.hasAddItemAnimation);
   const totalRemainingItems = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.wordBinItems.filter((id) => {
     const status = id.split(CATEGORISE.DASH)[1];
     return status !== "missed";
   }).length);
   const totalPlacedItems = /* @__PURE__ */ user_derived(() => config().totalCategoryItems - get$1(totalRemainingItems));
   const feedbackState = /* @__PURE__ */ user_derived(() => useCategoriseFeedback(get$1(interactionState), config(), api()));
-  const dropContainerId = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.dropContainerId);
-  const hasAddItemAnimation = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.hasAddItemAnimation);
   const wordBinItems = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.wordBinItems.map((id) => ({
     id,
     itemText: config().category_items.find((item) => item.id.split(CATEGORISE.DASH)[0] === id.split(CATEGORISE.DASH)[0])?.name || id
   })));
+  const wordBinLength = /* @__PURE__ */ user_derived(() => get$1(wordBinItems).length);
   const getCategoryItemsData = (categoryId) => {
     const itemIds = api().getCategoryItems(get$1(interactionState), categoryId);
     return itemIds.map((id) => ({
@@ -15656,6 +15813,28 @@ function CategoriseComponent($$anchor, $$props) {
     }
     return void 0;
   };
+  const findSourceContainer = (cleanItemId) => {
+    if (get$1(interactionState).data.wordBinItems.some((id) => id.split(CATEGORISE.DASH)[0] === cleanItemId)) {
+      return CONTAINER_WORD_BIN_ID2;
+    }
+    for (const [categoryId, items] of get$1(interactionState).data.placements.entries()) {
+      if (items.some((id) => id.split(CATEGORISE.DASH)[0] === cleanItemId)) {
+        return categoryId;
+      }
+    }
+    return null;
+  };
+  const checkScreenSize = () => {
+    if (typeof window !== "undefined") {
+      set(isMobile, window.innerWidth < BREAKPOINTS.MD);
+    }
+  };
+  const dispatchStateChange = () => {
+    if (onstateChange()) {
+      const serialized = api().serialize(get$1(interactionState));
+      onstateChange()(new CustomEvent("statechange", { detail: { state: get$1(interactionState), serialized } }));
+    }
+  };
   const announceToScreenReader = async (message) => {
     set(announcement, "");
     await tick();
@@ -15665,25 +15844,54 @@ function CategoriseComponent($$anchor, $$props) {
       () => {
         set(announcement, "");
       },
-      1e3
+      ANNOUNCEMENT_TIMEOUT_MS
     );
   };
-  const checkScreenSize = () => {
-    if (typeof window !== "undefined") {
-      set(isMobile, window.innerWidth < BREAKPOINTS.MD);
+  const createItemPlacementAnnouncement = (itemName, categoryName, categoryIndex, itemCount, containerId) => {
+    const wordLabel = itemCount === 1 ? "word" : "words";
+    if (categoryName) {
+      return `Option ${itemName} added in Category ${categoryIndex + 1}: ${categoryName}. ${itemCount} ${wordLabel} added`;
     }
+    if (containerId === CATEGORISE.CONTAINER_WORD_BIN_ID) {
+      return `Option ${itemName} returned to Word Bin. ${itemCount} ${wordLabel} remaining`;
+    }
+    return `Option ${itemName} added. ${itemCount} ${wordLabel} in category`;
+  };
+  const playDropAnimation = async (containerId) => {
+    await tick();
+    await new Promise((resolve) => setTimeout(resolve, ANIMATION_DELAY_MS));
+    set(
+      interactionState,
+      {
+        ...get$1(interactionState),
+        data: {
+          ...get$1(interactionState).data,
+          dropContainerId: containerId
+        }
+      },
+      true
+    );
+    await new Promise((resolve) => setTimeout(resolve, ANIMATION_DELAY_MS));
+    set(
+      interactionState,
+      {
+        ...get$1(interactionState),
+        data: { ...get$1(interactionState).data, hasAddItemAnimation: true }
+      },
+      true
+    );
+    setTimeout(
+      () => {
+        set(interactionState, api().clearDropAnimation(get$1(interactionState)), true);
+      },
+      ANIMATION_DELAY_MS
+    );
   };
   onMount(() => {
     checkScreenSize();
     window.addEventListener("resize", checkScreenSize);
     return () => window.removeEventListener("resize", checkScreenSize);
   });
-  const dispatchStateChange = () => {
-    if (onstateChange()) {
-      const serialized = api().serialize(get$1(interactionState));
-      onstateChange()(new CustomEvent("statechange", { detail: { state: get$1(interactionState), serialized } }));
-    }
-  };
   const handleItemDrop = async (e2) => {
     const { info } = e2.detail;
     set(dragHoverContainerId, null);
@@ -15699,24 +15907,13 @@ function CategoriseComponent($$anchor, $$props) {
     }
     const droppedItemId = info.id;
     const cleanItemId = droppedItemId.split(CATEGORISE.DASH)[0];
-    let sourceContainerId = null;
-    if (get$1(interactionState).data.wordBinItems.some((id) => id.split(CATEGORISE.DASH)[0] === cleanItemId)) {
-      sourceContainerId = CATEGORISE.CONTAINER_WORD_BIN_ID;
-    } else {
-      for (const [categoryId, items] of get$1(interactionState).data.placements.entries()) {
-        if (items.some((id) => id.split(CATEGORISE.DASH)[0] === cleanItemId)) {
-          sourceContainerId = categoryId;
-          break;
-        }
-      }
-    }
+    const sourceContainerId = findSourceContainer(cleanItemId);
     if (sourceContainerId === targetContainerId) {
       set(dragSourceContainerId, null);
       return;
     }
     set(dragSourceContainerId, sourceContainerId, true);
     set(interactionState, api().moveItem(get$1(interactionState), cleanItemId, targetContainerId), true);
-    set(currentTabContainer, null);
     set(
       interactionState,
       {
@@ -15727,43 +15924,16 @@ function CategoriseComponent($$anchor, $$props) {
     );
     dispatchStateChange();
     const item = config().category_items.find((i) => i.id === cleanItemId);
-    const targetCategory = config().category_groups.find((c) => c.id === targetContainerId);
-    if (item && targetCategory) {
+    const targetCategoryIndex = config().category_groups.findIndex((c) => c.id === targetContainerId);
+    const targetCategory = targetCategoryIndex >= 0 ? config().category_groups[targetCategoryIndex] : void 0;
+    if (item) {
       const cleanItemName = useRemoveRichTextHtmlTags(item.name);
-      const cleanCategoryName = useRemoveRichTextHtmlTags(targetCategory.name);
-      const categoryItems = api().getCategoryItems(get$1(interactionState), targetContainerId);
-      const itemCount = categoryItems.length;
-      const wordLabel = itemCount === 1 ? "word" : "words";
-      await announceToScreenReader(`Option ${cleanItemName} added in ${cleanCategoryName}. ${itemCount} ${wordLabel} added`);
+      const cleanCategoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
+      const itemCount = targetContainerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? get$1(interactionState).data.wordBinItems.length : api().getCategoryItems(get$1(interactionState), targetContainerId).length;
+      const message = createItemPlacementAnnouncement(cleanItemName, cleanCategoryName, targetCategoryIndex, itemCount, targetContainerId);
+      await announceToScreenReader(message);
     }
-    await tick();
-    await new Promise((resolve) => setTimeout(resolve, 300));
-    set(
-      interactionState,
-      {
-        ...get$1(interactionState),
-        data: {
-          ...get$1(interactionState).data,
-          dropContainerId: targetContainerId
-        }
-      },
-      true
-    );
-    await new Promise((resolve) => setTimeout(resolve, 300));
-    set(
-      interactionState,
-      {
-        ...get$1(interactionState),
-        data: { ...get$1(interactionState).data, hasAddItemAnimation: true }
-      },
-      true
-    );
-    setTimeout(
-      () => {
-        set(interactionState, api().clearDropAnimation(get$1(interactionState)), true);
-      },
-      300
-    );
+    await playDropAnimation(targetContainerId);
   };
   const handleDragHover = (containerId, isHovering) => {
     if (isHovering) {
@@ -15777,58 +15947,27 @@ function CategoriseComponent($$anchor, $$props) {
   const handleDragStart = (containerId) => {
     set(dragSourceContainerId, containerId, true);
   };
-  user_effect(() => {
-    if (get$1(selectedItemId)) {
-      const cleanItemId = get$1(selectedItemId).split(CATEGORISE.DASH)[0];
-      if (get$1(interactionState).data.wordBinItems.some((id) => id.split(CATEGORISE.DASH)[0] === cleanItemId)) {
-        set(dragSourceContainerId, CATEGORISE.CONTAINER_WORD_BIN_ID, true);
-      } else {
-        for (const [categoryId, items] of get$1(interactionState).data.placements.entries()) {
-          if (items.some((id) => id.split(CATEGORISE.DASH)[0] === cleanItemId)) {
-            set(dragSourceContainerId, categoryId, true);
-            break;
-          }
-        }
-      }
-    }
-  });
-  user_effect(() => {
-    const wordBinLength = get$1(wordBinItems).length;
-    if (get$1(currentMobileIndex) >= wordBinLength && wordBinLength > 0) {
-      set(currentMobileIndex, wordBinLength - 1);
-    }
-    if (wordBinLength === 0) {
-      set(currentMobileIndex, 0);
-    }
-  });
   const handleItemSelect = (itemId) => {
     if (get$1(isLocked)) return;
     const cleanItemId = itemId.split(CATEGORISE.DASH)[0];
     if (!get$1(selectedItemId)) {
+      set(activeContainerForKeyboard, null);
       set(interactionState, api().selectItem(get$1(interactionState), cleanItemId, null), true);
     } else if (get$1(selectedItemId) === cleanItemId) {
       set(interactionState, api().selectItem(get$1(interactionState), null, null), true);
     }
   };
   const handleContainerSelect = async (containerId) => {
-    if (get$1(isLocked) || !get$1(selectedItemId)) return;
-    let sourceContainerId = null;
-    const cleanSelectedId = get$1(selectedItemId).split(CATEGORISE.DASH)[0];
-    if (get$1(interactionState).data.wordBinItems.some((id) => id.split(CATEGORISE.DASH)[0] === cleanSelectedId)) {
-      sourceContainerId = CATEGORISE.CONTAINER_WORD_BIN_ID;
-    } else {
-      for (const [categoryId, items] of get$1(interactionState).data.placements.entries()) {
-        if (items.some((id) => id.split(CATEGORISE.DASH)[0] === cleanSelectedId)) {
-          sourceContainerId = categoryId;
-          break;
-        }
-      }
+    if (get$1(isLocked) || !get$1(selectedItemId)) {
+      return;
     }
+    const capturedSelectedItemId = get$1(selectedItemId);
+    const cleanSelectedId = capturedSelectedItemId.split(CATEGORISE.DASH)[0];
+    const sourceContainerId = findSourceContainer(cleanSelectedId);
     if (sourceContainerId === containerId) {
       return;
     }
-    set(interactionState, api().moveItem(get$1(interactionState), get$1(selectedItemId), containerId), true);
-    set(currentTabContainer, null);
+    set(interactionState, api().moveItem(get$1(interactionState), capturedSelectedItemId, containerId), true);
     set(
       interactionState,
       {
@@ -15838,44 +15977,22 @@ function CategoriseComponent($$anchor, $$props) {
       true
     );
     dispatchStateChange();
-    const item = config().category_items.find((i) => i.id === get$1(selectedItemId));
-    const targetCategory = containerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? null : config().category_groups.find((c) => c.id === containerId);
-    if (item && targetCategory) {
+    const cleanSelectedItemId = capturedSelectedItemId.split(CATEGORISE.DASH)[0];
+    const item = config().category_items.find((i) => i.id === cleanSelectedItemId);
+    const targetCategoryIndex = containerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? -1 : config().category_groups.findIndex((c) => c.id === containerId);
+    const targetCategory = targetCategoryIndex >= 0 ? config().category_groups[targetCategoryIndex] : null;
+    if (item) {
       const cleanItemName = useRemoveRichTextHtmlTags(item.name);
-      const cleanCategoryName = useRemoveRichTextHtmlTags(targetCategory.name);
-      const categoryItems = api().getCategoryItems(get$1(interactionState), containerId);
-      const itemCount = categoryItems.length;
-      const wordLabel = itemCount === 1 ? "word" : "words";
-      await announceToScreenReader(`Option ${cleanItemName} added in ${cleanCategoryName}. ${itemCount} ${wordLabel} added`);
+      const cleanCategoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
+      const itemCount = containerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? get$1(interactionState).data.wordBinItems.length : api().getCategoryItems(get$1(interactionState), containerId).length;
+      const message = createItemPlacementAnnouncement(cleanItemName, cleanCategoryName, targetCategoryIndex, itemCount, containerId);
+      await announceToScreenReader(message);
     }
+    await playDropAnimation(containerId);
     await tick();
-    await new Promise((resolve) => setTimeout(resolve, 300));
-    set(
-      interactionState,
-      {
-        ...get$1(interactionState),
-        data: {
-          ...get$1(interactionState).data,
-          dropContainerId: containerId
-        }
-      },
-      true
-    );
-    await new Promise((resolve) => setTimeout(resolve, 300));
-    set(
-      interactionState,
-      {
-        ...get$1(interactionState),
-        data: { ...get$1(interactionState).data, hasAddItemAnimation: true }
-      },
-      true
-    );
-    setTimeout(
-      () => {
-        set(interactionState, api().clearDropAnimation(get$1(interactionState)), true);
-      },
-      300
-    );
+    if (get$1(srOnlyFocusTrapRef)) {
+      get$1(srOnlyFocusTrapRef).focus();
+    }
   };
   const handleNavigateItem = (direction) => {
     const result = useNavigateItem(
@@ -15905,16 +16022,21 @@ function CategoriseComponent($$anchor, $$props) {
       }
     }
   };
-  const handleContainerFocus = (event2, containerId) => {
-    const relatedTarget = event2.relatedTarget;
-    if (relatedTarget && relatedTarget.hasAttribute("data-item-button")) {
-      set(currentTabContainer, null);
-    }
+  const getItemIndex = (itemId, containerId) => {
+    const items = containerId === CONTAINER_WORD_BIN_ID2 ? get$1(wordBinItems) : getCategoryItemsData(containerId);
+    return items.findIndex((item) => item.id === itemId);
   };
   const handleCategoryKeydown = async (event2, categoryId) => {
     if (event2.key === "Enter") {
       event2.preventDefault();
       if (get$1(selectedItemId)) {
+        const categoryItems2 = api().getCategoryItems(get$1(interactionState), categoryId);
+        const cleanSelectedId = get$1(selectedItemId).split(CATEGORISE.DASH)[0];
+        const isSelectedInThisCategory = categoryItems2.some((id) => id.split(CATEGORISE.DASH)[0] === cleanSelectedId);
+        if (isSelectedInThisCategory) {
+          set(interactionState, api().selectItem(get$1(interactionState), null, null), true);
+          return;
+        }
         await handleContainerSelect(categoryId);
         return;
       }
@@ -15926,74 +16048,109 @@ function CategoriseComponent($$anchor, $$props) {
       if (categoryItems.length === 0) {
         return;
       }
-      set(currentTabContainer, categoryId, true);
-      await tick();
-      await tick();
-      setTimeout(
-        () => {
-          const categoryRef = get$1(categoryRefs)[categoryId];
-          if (categoryRef?.categoryElement) {
-            const firstButton = categoryRef.categoryElement.querySelector("button[data-item-button]:not([disabled])");
-            if (firstButton) {
-              firstButton.focus();
-            }
-          }
-        },
-        150
-      );
+      set(activeContainerForKeyboard, categoryId, true);
+      const categoryRef = get$1(categoryRefs)[categoryId];
+      if (categoryRef?.categoryElement) {
+        const firstItemButton = categoryRef.categoryElement.querySelector("[data-item-button]");
+        if (firstItemButton) {
+          firstItemButton.focus();
+        }
+      }
+    } else if (event2.key === "Escape") {
+      event2.preventDefault();
+      if (get$1(selectedItemId)) {
+        set(interactionState, api().selectItem(get$1(interactionState), null, null), true);
+      }
+    }
+  };
+  const handleItemFocus = (itemId, containerId, event2) => {
+    if (!get$1(selectedItemId) && get$1(activeContainerForKeyboard) !== containerId) {
+      set(activeContainerForKeyboard, containerId, true);
+    }
+  };
+  const handleItemBlur = (itemId, containerId, event2) => {
+    const relatedTarget = event2.relatedTarget;
+    if (relatedTarget) {
+      const relatedContainerId = relatedTarget.closest('[id^="container-"]')?.id;
+      if (relatedContainerId !== containerId && get$1(activeContainerForKeyboard) === containerId) {
+        set(activeContainerForKeyboard, null);
+      }
     }
   };
   const handleWordBinKeydown = async (event2) => {
     if (event2.key === "Enter") {
       event2.preventDefault();
       if (get$1(selectedItemId)) {
+        const cleanSelectedId = get$1(selectedItemId).split(CATEGORISE.DASH)[0];
+        const isSelectedInWordBin = get$1(interactionState).data.wordBinItems.some((id) => id.split(CATEGORISE.DASH)[0] === cleanSelectedId);
+        if (isSelectedInWordBin) {
+          set(interactionState, api().selectItem(get$1(interactionState), null, null), true);
+          return;
+        }
         await handleContainerSelect(CATEGORISE.CONTAINER_WORD_BIN_ID);
         return;
       }
       if (get$1(wordBinItems).length === 0) {
         return;
       }
-      set(currentTabContainer, CATEGORISE.CONTAINER_WORD_BIN_ID, true);
-      await tick();
-      await tick();
-      setTimeout(
-        () => {
-          if (get$1(wordBinRef)?.wordBinElement) {
-            const firstButton = get$1(wordBinRef).wordBinElement.querySelector("button[data-item-button]:not([disabled])");
-            if (firstButton) {
-              firstButton.focus();
-            }
-          }
-        },
-        150
-      );
+      set(activeContainerForKeyboard, CATEGORISE.CONTAINER_WORD_BIN_ID, true);
+      if (get$1(wordBinRef)?.wordBinElement) {
+        const firstItemButton = get$1(wordBinRef).wordBinElement.querySelector("[data-item-button]");
+        if (firstItemButton) {
+          firstItemButton.focus();
+        }
+      }
+    } else if (event2.key === "Escape") {
+      event2.preventDefault();
+      if (get$1(selectedItemId)) {
+        set(interactionState, api().selectItem(get$1(interactionState), null, null), true);
+      }
     }
   };
-  const handleItemKeydown = (event2, itemId, itemIndex, containerId, totalItems) => {
+  const handleItemKeydown = (event2, itemId, containerId) => {
     if (event2.key === "Enter") {
       event2.preventDefault();
       event2.stopPropagation();
       handleItemSelect(itemId);
+      set(activeContainerForKeyboard, containerId, true);
+      const itemElement = document.getElementById(itemId);
+      if (itemElement) {
+        itemElement.focus();
+      }
     } else if (event2.key === "Escape") {
       if (get$1(selectedItemId)) {
         set(interactionState, api().selectItem(get$1(interactionState), null, null), true);
       }
-      set(currentTabContainer, null);
-      setTimeout(
-        () => {
-          if (containerId === CONTAINER_WORD_BIN_ID2) {
-            if (get$1(wordBinRef)?.wordBinElement) {
-              get$1(wordBinRef).wordBinElement.focus();
-            }
-          } else {
-            const categoryRef = get$1(categoryRefs)[containerId];
-            if (categoryRef?.categoryElement) {
+      const itemElement = document.getElementById(itemId);
+      if (itemElement) {
+        itemElement.focus();
+      }
+    } else if (event2.key === "Tab") {
+      const currentIndex = getItemIndex(itemId, containerId);
+      const containerItems = containerId === CONTAINER_WORD_BIN_ID2 ? get$1(wordBinItems) : getCategoryItemsData(containerId);
+      if (event2.shiftKey && currentIndex === 0) {
+        set(activeContainerForKeyboard, null);
+      } else if (!event2.shiftKey && currentIndex === containerItems.length - 1) {
+        set(activeContainerForKeyboard, null);
+      }
+    }
+    if (event2.key === "Tab" && !event2.shiftKey) {
+      if (containerId === CONTAINER_WORD_BIN_ID2 && get$1(selectedItemId)) {
+        const firstCategory = config().category_groups[0];
+        if (firstCategory) {
+          event2.preventDefault();
+          event2.stopPropagation();
+          const categoryRef = get$1(categoryRefs)[firstCategory.id];
+          if (categoryRef?.categoryElement) {
+            const overlayButton = categoryRef.categoryElement.querySelector("button.absolute.inset-0");
+            if (overlayButton) {
+              overlayButton.focus();
+            } else {
               categoryRef.categoryElement.focus();
             }
           }
-        },
-        50
-      );
+        }
+      }
     }
   };
   const handleOpenResetModal = () => {
@@ -16008,6 +16165,40 @@ function CategoriseComponent($$anchor, $$props) {
     set(currentMobileIndex, 0);
     set(isModalOpen, false);
   };
+  user_effect(() => {
+    if (get$1(selectedItemId)) {
+      const cleanItemId = get$1(selectedItemId).split(CATEGORISE.DASH)[0];
+      if (get$1(interactionState).data.wordBinItems.some((id) => id.split(CATEGORISE.DASH)[0] === cleanItemId)) {
+        set(dragSourceContainerId, CATEGORISE.CONTAINER_WORD_BIN_ID, true);
+      } else {
+        for (const [categoryId, items] of get$1(interactionState).data.placements.entries()) {
+          if (items.some((id) => id.split(CATEGORISE.DASH)[0] === cleanItemId)) {
+            set(dragSourceContainerId, categoryId, true);
+            break;
+          }
+        }
+      }
+    }
+  });
+  user_effect(() => {
+    const length = get$1(wordBinLength);
+    untrack(() => {
+      if (get$1(currentMobileIndex) >= length && length > 0) {
+        set(currentMobileIndex, length - 1);
+      }
+      if (length === 0) {
+        set(currentMobileIndex, 0);
+      }
+    });
+  });
+  user_effect(() => {
+    if (get$1(selectedItemId) && !get$1(activeContainerForKeyboard)) {
+      const selectedButton = document.getElementById(get$1(selectedItemId));
+      if (selectedButton) {
+        selectedButton.focus();
+      }
+    }
+  });
   var $$exports = {
     get api() {
       return api();
@@ -16036,6 +16227,12 @@ function CategoriseComponent($$anchor, $$props) {
       var fragment_1 = root_1$4();
       var button = first_child(fragment_1);
       button.__keydown = skipToWordBin;
+      button.__click = async () => {
+        await tick();
+        if (get$1(wordBinRef)?.wordBinElement) {
+          get$1(wordBinRef).wordBinElement.focus();
+        }
+      };
       var span = sibling(child(button), 2);
       var node = child(span);
       SvgLoader(node, {
@@ -16070,7 +16267,9 @@ function CategoriseComponent($$anchor, $$props) {
         });
       }
       reset(div_2);
-      var node_3 = sibling(div_2, 2);
+      var span_2 = sibling(div_2, 2);
+      bind_this(span_2, ($$value) => set(srOnlyFocusTrapRef, $$value), () => get$1(srOnlyFocusTrapRef));
+      var node_3 = sibling(span_2, 2);
       {
         let $02 = /* @__PURE__ */ user_derived(() => !!config().stimulus);
         CategoriseCategoryList(node_3, {
@@ -16080,16 +16279,18 @@ function CategoriseComponent($$anchor, $$props) {
           children: ($$anchor3, $$slotProps) => {
             var fragment_2 = comment();
             var node_4 = first_child(fragment_2);
-            each(node_4, 17, () => config().category_groups, (category) => category.id, ($$anchor4, category) => {
+            each(node_4, 19, () => config().category_groups, (category) => category.id, ($$anchor4, category, categoryIndex) => {
               const categoryItems = /* @__PURE__ */ user_derived(() => getCategoryItemsData(get$1(category).id));
               const isCollapsed = /* @__PURE__ */ user_derived(() => !api().isCategoryOpen(get$1(interactionState), get$1(category).id));
               {
-                let $03 = /* @__PURE__ */ user_derived(() => get$1(selectedItemId) || void 0);
-                let $12 = /* @__PURE__ */ user_derived(() => get$1(dragHoverContainerId) === get$1(category).id);
-                let $22 = /* @__PURE__ */ user_derived(() => get$1(dropContainerId) || void 0);
-                let $3 = /* @__PURE__ */ user_derived(() => get$1(dragSourceContainerId) || void 0);
-                let $4 = /* @__PURE__ */ user_derived(() => get$1(categoryItems)[0] ? getItemResultType(get$1(categoryItems)[0].id) : void 0);
-                let $5 = /* @__PURE__ */ user_derived(() => !!config().stimulus);
+                let $03 = /* @__PURE__ */ user_derived(() => get$1(categoryIndex) + 1);
+                let $12 = /* @__PURE__ */ user_derived(() => get$1(selectedItemId) || void 0);
+                let $22 = /* @__PURE__ */ user_derived(() => get$1(dragHoverContainerId) === get$1(category).id);
+                let $3 = /* @__PURE__ */ user_derived(() => get$1(dropContainerId) || void 0);
+                let $4 = /* @__PURE__ */ user_derived(() => get$1(dragSourceContainerId) || void 0);
+                let $5 = /* @__PURE__ */ user_derived(() => get$1(categoryItems)[0] ? getItemResultType(get$1(categoryItems)[0].id) : void 0);
+                let $6 = /* @__PURE__ */ user_derived(() => !!config().stimulus);
+                let $7 = /* @__PURE__ */ user_derived(() => get$1(activeContainerForKeyboard) || void 0);
                 bind_this(
                   CategoriseCategory($$anchor4, {
                     get categoryId() {
@@ -16098,11 +16299,14 @@ function CategoriseComponent($$anchor, $$props) {
                     get categoryTitle() {
                       return get$1(category).name;
                     },
+                    get categoryIndex() {
+                      return get$1($03);
+                    },
                     get items() {
                       return get$1(categoryItems);
                     },
                     get selectedItemId() {
-                      return get$1($03);
+                      return get$1($12);
                     },
                     get isLocked() {
                       return get$1(isLocked);
@@ -16110,32 +16314,29 @@ function CategoriseComponent($$anchor, $$props) {
                     get isCollapsed() {
                       return get$1(isCollapsed);
                     },
-                    get currentTabContainer() {
-                      return get$1(currentTabContainer);
-                    },
                     get isDraggingOver() {
-                      return get$1($12);
+                      return get$1($22);
                     },
                     get dropContainerId() {
-                      return get$1($22);
+                      return get$1($3);
                     },
                     get hasAddItemAnimation() {
                       return get$1(hasAddItemAnimation);
                     },
                     get dragSourceContainerId() {
-                      return get$1($3);
+                      return get$1($4);
                     },
                     get mode() {
                       return config().mode;
                     },
                     get resultType() {
-                      return get$1($4);
+                      return get$1($5);
                     },
                     get isMobile() {
                       return get$1(isMobile);
                     },
                     get hasStimulus() {
-                      return get$1($5);
+                      return get$1($6);
                     },
                     get dndType() {
                       return config().categoryDndType;
@@ -16143,13 +16344,17 @@ function CategoriseComponent($$anchor, $$props) {
                     get tabindex() {
                       return get$1(categoryTabIndex);
                     },
+                    get activeContainerForKeyboard() {
+                      return get$1($7);
+                    },
                     onitemdrop: handleItemDrop,
                     onitemselect: handleItemSelect,
                     oncontainerclick: () => handleContainerSelect(get$1(category).id),
                     ontogglecollapse: handleToggleCollapse,
                     onkeydown: (e2) => handleCategoryKeydown(e2, get$1(category).id),
-                    onfocus: (e2) => handleContainerFocus(e2, get$1(category).id),
-                    onitemkeydown: (e2, itemId, itemIndex) => handleItemKeydown(e2, itemId, itemIndex, get$1(category).id, get$1(categoryItems).length),
+                    onitemfocus: (itemId, event2) => handleItemFocus(itemId, get$1(category).id),
+                    onitemblur: (itemId, event2) => handleItemBlur(itemId, get$1(category).id, event2),
+                    onitemkeydown: (e2, itemId) => handleItemKeydown(e2, itemId, get$1(category).id),
                     ondraghover: handleDragHover,
                     ondragstart: handleDragStart
                   }),
@@ -16170,6 +16375,7 @@ function CategoriseComponent($$anchor, $$props) {
         let $12 = /* @__PURE__ */ user_derived(() => get$1(dragHoverContainerId) === CONTAINER_WORD_BIN_ID2);
         let $22 = /* @__PURE__ */ user_derived(() => get$1(dropContainerId) || void 0);
         let $3 = /* @__PURE__ */ user_derived(() => get$1(dragSourceContainerId) || void 0);
+        let $4 = /* @__PURE__ */ user_derived(() => get$1(activeContainerForKeyboard) || void 0);
         bind_this(
           CategoriseWordBin(node_5, {
             get containerId() {
@@ -16184,9 +16390,6 @@ function CategoriseComponent($$anchor, $$props) {
             get isLocked() {
               return get$1(isLocked);
             },
-            get currentTabContainer() {
-              return get$1(currentTabContainer);
-            },
             get isDraggingOver() {
               return get$1($12);
             },
@@ -16211,18 +16414,25 @@ function CategoriseComponent($$anchor, $$props) {
             get totalItems() {
               return config().category_items.length;
             },
+            get tabindex() {
+              return get$1(categoryTabIndex);
+            },
             get dndType() {
               return config().categoryDndType;
             },
+            get activeContainerForKeyboard() {
+              return get$1($4);
+            },
             onitemdrop: handleItemDrop,
             onitemselect: handleItemSelect,
             oncontainerclick: () => handleContainerSelect(CONTAINER_WORD_BIN_ID2),
             onnavigateitem: handleNavigateItem,
-            onitemkeydown: (e2, itemId, itemIndex) => handleItemKeydown(e2, itemId, itemIndex, CONTAINER_WORD_BIN_ID2, get$1(wordBinItems).length),
+            onitemfocus: (itemId, event2) => handleItemFocus(itemId, CONTAINER_WORD_BIN_ID2),
+            onitemblur: (itemId, event2) => handleItemBlur(itemId, CONTAINER_WORD_BIN_ID2, event2),
+            onitemkeydown: (e2, itemId) => handleItemKeydown(e2, itemId, CONTAINER_WORD_BIN_ID2),
             ondraghover: handleDragHover,
             ondragstart: handleDragStart,
-            onkeydown: handleWordBinKeydown,
-            onfocus: (e2) => handleContainerFocus(e2)
+            onkeydown: handleWordBinKeydown
           }),
           ($$value) => set(wordBinRef, $$value, true),
           () => get$1(wordBinRef)
@@ -18629,7 +18839,7 @@ registerInteraction("dropdown", createDropdownInteraction, DropdownComponent);
 var root_1 = /* @__PURE__ */ from_html(`<link rel="preconnect" href="https://fonts.googleapis.com" class="svelte-1dpid58"/> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" class="svelte-1dpid58"/> <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&amp;display=swap" rel="stylesheet" class="svelte-1dpid58"/>`, 1);
 const $$css = {
   hash: "svelte-1dpid58",
-  code: ' *, :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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:} ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color: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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:} *, :after, :before{border:0 solid #e5e7eb;box-sizing:border-box} :after, :before{--tw-content:""} :host, html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Mulish,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent} 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-feature-settings:normal;font-size:1em;font-variation-settings:normal} small{font-size:80%} sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-.25em} sup{top:-.5em} table{border-collapse:collapse;border-color:inherit;text-indent:0} button, input, optgroup, select, textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0} button, select{text-transform:none} button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]){-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]:where(:not([hidden=until-found])){display:none} *{font-family:Mulish,sans-serif} input::-moz-selection, textarea::-moz-selection{background-color:hsla(0,0%,85%,.4)} input::selection, textarea::selection{background-color:hsla(0,0%,85%,.4)} .container{width:100%}@media (min-width:732px){ .container{max-width:732px}}@media (min-width:1196px){ .container{max-width:1196px}} .p2{font-size:.875rem;font-weight:600;line-height:1.25rem;line-height:1.5} .blanket-overlay{inset:0;position:absolute} .item-heading{font-size:1.25rem;letter-spacing:-.025em;line-height:1.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .focus-ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px} .focus-ring:focus, .raw-focus-ring{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .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,1));--tw-ring-offset-width:2px} .focus-ring-by-dropdown{outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:rgb(59,64,240,var(--tw-border-opacity,1));border-width:2px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);box-shadow:0 0 0 2px #fff,0 0 0 4px #212529,0 0 0 6px #fde047} .divider, .focus-ring-by-dropdown{--tw-border-opacity:1} .divider{border-bottom-width:1px;border-color:rgb(218,224,224,var(--tw-border-opacity,1))}@keyframes svelte-1dpid58-pulse{50%{opacity:.5}} .animate-skeleton{animation:svelte-1dpid58-pulse 2s cubic-bezier(.4,0,.6,1) infinite;--tw-bg-opacity:1;background-color:rgb(226,232,240,var(--tw-bg-opacity,1))} .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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .btn-mcq-option{font-size:1rem;line-height:1.5rem;line-height:19.2px;margin-bottom:1rem;min-height:52px;width:100%;--tw-text-opacity:1;border-radius:.5rem;border-width:1px;box-sizing:border-box;color:rgb(33,37,41,var(--tw-text-opacity,1));--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))} .btn-mcq-option:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))}} .btn-mcq-text{align-items:center;display:flex;padding:.375rem .75rem;width:100%}@supports (overflow-wrap:anywhere){ .btn-mcq-text{overflow-wrap:anywhere}}@supports not (overflow-wrap:anywhere){ .btn-mcq-text{word-break:break-word}} .btn-mcq-option>span>span>span>.choice{align-items:center;border-radius:1rem;border-width:1px;display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:.05em;line-height:1rem;width:2rem;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1));padding:.5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .btn-mcq-option.selected{border-width:2px;--tw-border-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1));border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .btn-mcq-option.selected, .btn-mcq-option.selected:active{--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(255,255,255,var(--tw-text-opacity,1))} .btn-mcq-option.selected:active{background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.selected:hover{--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}} .btn-mcq-option.finished{cursor:default} .btn-mcq-option.finished:active, .btn-mcq-option.finished:hover{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))} .btn-mcq-option.selected>span>span>.choice{--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))} .btn-mcq-option>span>span>span>.custom-checkbox{align-items:center;border-radius:.25rem;border-width:1px;display:flex;height:1.75rem;justify-content:center;pointer-events:none;width:1.75rem;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option:hover>span>span>span>.custom-checkbox{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .btn-mcq-option:active>span>span>span>.custom-checkbox.preview-only, .btn-mcq-option:hover>span>span>span>.custom-checkbox.preview-only{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))}} .btn-mcq-option:active>span>span>span>.custom-checkbox{border-width:2px;--tw-border-opacity:1;border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .btn-mcq-option.selected>span>span>span>.custom-checkbox{border-width:0;pointer-events:none;--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.selected:hover>span>span>span>.custom-checkbox{border-width:0;--tw-bg-opacity:1;background-color:rgb(76,91,226,var(--tw-bg-opacity,1))}} .btn-mcq-option.selected:active>span>span>span>.custom-checkbox{border-width:0;--tw-bg-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1))} .btn-mcq-option.finished:active>span>span>span>.custom-checkbox, .btn-mcq-option.finished:hover>span>span>span>.custom-checkbox{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .btn-mcq-option.missing.\\!correct, .btn-mcq-option.missing.correct{border-width:1px;--tw-border-opacity:1;border-color:rgb(21,128,61,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.\\!correct.interactive:active, .btn-mcq-option.\\!correct.interactive:hover, .btn-mcq-option.correct.interactive:active, .btn-mcq-option.correct.interactive:hover, .btn-mcq-option.incorrect.interactive:active, .btn-mcq-option.incorrect.interactive:hover, .btn-mcq-option.missing.interactive:active, .btn-mcq-option.missing.interactive:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))}} .btn-mcq-option.selected.\\!correct, .btn-mcq-option.selected.correct{background-color:rgb(240,253,244,var(--tw-bg-opacity,1));border-color:rgb(21,128,61,var(--tw-border-opacity,1));border-width:1px} .btn-mcq-option.selected.\\!correct, .btn-mcq-option.selected.correct, .btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .btn-mcq-option.selected.incorrect{background-color:rgb(253,242,248,var(--tw-bg-opacity,1));border-color:rgb(190,24,93,var(--tw-border-opacity,1));border-width:1px} .btn-mcq-option.selected.\\!correct>span>span>span>.choice, .btn-mcq-option.selected.correct>span>span>span>.choice, .btn-mcq-option.selected.incorrect>span>span>span>.choice{border-width:1px;--tw-border-opacity:1;border-color:rgb(113,115,119,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .btn-pressed{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-base: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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .btn-base{align-items:center;display:inline-flex;justify-content:center}@media (hover:hover) and (pointer:fine){ .btn-base:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1))}} .btn-base:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-touch-container{align-items:center;display:flex;height:2.75rem;justify-content:center;width:2.75rem} .btn-touch-container:focus{outline:2px solid transparent;outline-offset:2px} .btn-icon-sm{align-items:center;background-color:hsla(0,0%,100%,.8);border-radius:.25rem;display:flex;height:1.5rem;justify-content:center;width:1.5rem}@media (hover:hover) and (pointer:fine){ .btn-touch-container:hover>.btn-icon-sm{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1))}} .btn-touch-container:active>.btn-icon-sm{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-touch-container:focus-visible>.btn-icon-sm{--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .typein-textbox:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px;transition-duration:50ms} .typein-textbox{border-radius:.5rem;border-width:1px;width:100%;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding:.75rem 1rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(55,65,81,var(--tw-placeholder-opacity,1))} .typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(55,65,81,var(--tw-placeholder-opacity,1))} .typein-textbox:focus{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}} .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 transparent)!important}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{transition-duration:50ms}} .typein-textbox:focus{outline-color:#212529;outline-width:2px}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{outline-color:#212529;outline-width:2px}} .typein-textbox:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1))} .inline-typein-container>p{font-size:1.25rem;font-weight:600;line-height:3rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} #dnd-action-dragged-el{outline:2px solid transparent;outline-offset:2px;--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;cursor:grabbing!important;transition-duration:50ms;--tw-border-opacity:1!important;border-color:rgb(93,99,107,var(--tw-border-opacity,1))!important;--tw-bg-opacity:1!important;background-color:rgb(205,208,254,var(--tw-bg-opacity,1))!important} #dnd-action-dragged-el .btn-vertical-icon{cursor:grabbing!important;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} #dnd-action-dragged-el .preview-icon{display:none!important} #dnd-action-dragged-el .preview-vertical{display:block!important} .image-description, .text-stimulus{padding-bottom:1rem;padding-top:1rem} .text-stimulus p{font-size:1.25rem;line-height:1.75rem;padding-bottom:.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .image-description p{font-size:.875rem;line-height:1.25rem;padding-bottom:.5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-stimulus ol, .text-stimulus ul{font-size:1rem;line-height:1.5rem;list-style-position:inside;padding-bottom:.5rem;padding-left:.5rem} .text-stimulus ol ::marker, .text-stimulus ul ::marker{color:#282c87} .text-stimulus ol::marker, .text-stimulus ul::marker{color:#282c87} .image-description ol, .image-description ul{font-size:.875rem;line-height:1.25rem;list-style-position:inside;padding-bottom:.5rem;padding-left:.5rem} .image-description ol ::marker, .image-description ul ::marker{color:#212529} .image-description ol::marker, .image-description ul::marker{color:#212529} .image-description ul, .text-stimulus ul{list-style-type:disc} .image-description ol, .text-stimulus ol{list-style-type:decimal} .image-description ul li>p, .text-stimulus ul li>p{margin-left:-.5rem} .text-stimulus ol>li>p, .text-stimulus ul>li>p{display:inline;font-size:1rem;line-height:1.5rem;padding-bottom:0;padding-top:0} .image-description ol>li>p, .image-description ul>li>p{display:inline;font-size:.875rem;line-height:1.25rem;padding-bottom:0;padding-top:0} .image-description div.table-container:focus, .text-stimulus div.table-container:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px;transition-duration:50ms} .image-description div.table-container, .text-stimulus div.table-container{border-radius:.5rem;overflow:auto;padding-left:.125rem;padding-right:.125rem} .image-description table, .text-stimulus table{margin-bottom:1rem;margin-top:.5rem;width:100%;--tw-border-spacing-x:0.75rem;--tw-border-spacing-y:0.75rem;border-radius:.5rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);overflow-x:auto;--tw-shadow:0 0 0 1px #9ca3af;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .image-description table tr, .text-stimulus table tr{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1))} .image-description table tr:last-child, .text-stimulus table tr:last-child{border-color:transparent} .image-description table td, .image-description table th, .text-stimulus table td, .text-stimulus table th{border-left-width:1px;min-width:140px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1))} .image-description table td:first-child, .image-description table th:first-child, .text-stimulus table td:first-child, .text-stimulus table th:first-child{border-style:none} .text-stimulus table td>p, .text-stimulus table th>p{font-size:1rem;line-height:1.5rem;padding:.75rem;text-align:left;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .image-description table td>p, .image-description table th>p{font-size:.875rem;line-height:1.25rem;padding:.75rem;text-align:left;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-stimulus table th>p{font-weight:400} .image-description table th p, .prompt p, .text-stimulus table th p{font-weight:600} .prompt p b, .prompt p b i, .prompt p b i u, .prompt p b u, .prompt p b u i, .prompt p i b, .prompt p i b u, .prompt p i u b, .prompt p u b, .prompt p u b i, .prompt p u i b, .text-stimulus table th p b, .text-stimulus table th p b i, .text-stimulus table th p b i u, .text-stimulus table th p b u, .text-stimulus table th p b u i, .text-stimulus table th p i b, .text-stimulus table th p i b u, .text-stimulus table th p i u b, .text-stimulus table th p u b, .text-stimulus table th p u b i, .text-stimulus table th p u i b{font-weight:900} .dropdown-text:not(:last-child), .dropdown:not(:last-child){margin-right:1rem} .dropdown-container{align-items:center;border-radius:.5rem;border-width:1px;display:flex;height:2.75rem;overflow:hidden;white-space:nowrap;width:15rem;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .dropdown-container:focus{outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)} .dropdown-container:active, .dropdown-container:focus{border-width:2px;box-shadow:0 0 0 2px #fff,0 0 0 4px #212529,0 0 0 6px #fde047;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .dropdown-container:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));outline-color:#212529;outline-width:2px}} .dropdown-menu{border-radius:.5rem;border-width:1px;margin-top:.5rem;max-height:400px;overflow-y:auto;position:absolute;z-index:10;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))}@supports (overflow-wrap:anywhere){ .dropdown-menu{overflow-wrap:anywhere}}@supports not (overflow-wrap:anywhere){ .dropdown-menu{word-break:break-word}} .dropdown-menu{max-width:min(500px,100vw - 2rem);min-width:240px;width:-moz-max-content;width:max-content} .dropdown-item{cursor:pointer;font-size:1rem;line-height:1.5rem;outline:2px solid transparent;outline-offset:2px;padding:.5rem 1rem} .dropdown-itemtext{border-bottom-width:1px;border-color:transparent} .dropdown-itemtext.hover-option{--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(46,47,212,var(--tw-text-opacity,1))} .dropdown-itemtext.current-option{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1));--tw-text-opacity:1;border-bottom-width:1px;color:rgb(0,0,0,var(--tw-text-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1))} .dropdown-itemtext:active{border-bottom-width:2px} .image-description-accordion{border-bottom-width:1px;border-color:transparent;font-weight:600;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .group:focus .image-description-accordion{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1));--tw-text-opacity:1;border-bottom-width:1px;color:rgb(0,0,0,var(--tw-text-opacity,1));outline:2px solid transparent;outline-offset:2px} .group:focus .image-description-accordion, .group:hover .image-description-accordion{--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1))} .group:active .image-description-accordion{border-bottom-width:2px} .sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap} .pointer-events-none{pointer-events:none} .pointer-events-auto{pointer-events:auto} .visible{visibility:visible} .invisible{visibility:hidden} .collapse{visibility:collapse} .static{position:static} .fixed{position:fixed} .absolute{position:absolute} .relative{position:relative} .inset-0{inset:0} .inset-y-0{bottom:0;top:0} .-top-2\\.5{top:-.625rem} .bottom-0{bottom:0} .bottom-1\\.5{bottom:.375rem} .bottom-4{bottom:1rem} .bottom-5{bottom:1.25rem} .bottom-\\[7px\\]{bottom:7px} .bottom-full{bottom:100%} .left-0{left:0} .left-1\\/2{left:50%} .left-4{left:1rem} .left-6{left:1.5rem} .left-\\[-9999px\\]{left:-9999px} .left-full{left:100%} .right-0{right:0} .right-1{right:.25rem} .right-1\\.5{right:.375rem} .right-4{right:1rem} .right-6{right:1.5rem} .right-full{right:100%} .top-0{top:0} .top-1{top:.25rem} .top-1\\.5{top:.375rem} .top-1\\/2{top:50%} .top-12{top:3rem} .top-3\\.5{top:.875rem} .top-\\[13px\\]{top:13px} .top-\\[calc\\(50\\%\\+0\\.375rem\\)\\]{top:calc(50% + .375rem)} .top-full{top:100%} .z-0{z-index:0} .z-10{z-index:10} .z-50{z-index:50} .m-0{margin:0} .m-auto{margin:auto} .mx-0\\.5{margin-left:.125rem;margin-right:.125rem} .mx-auto{margin-left:auto;margin-right:auto} .my-1\\.5{margin-bottom:.375rem;margin-top:.375rem} .my-2{margin-bottom:.5rem;margin-top:.5rem} .my-6{margin-bottom:1.5rem;margin-top:1.5rem} .-mb-1{margin-bottom:-.25rem} .-ml-1{margin-left:-.25rem} .-mr-1{margin-right:-.25rem} .-mr-2\\.5{margin-right:-.625rem} .-mt-0\\.5{margin-top:-.125rem} .-mt-1{margin-top:-.25rem} .mb-0\\.5{margin-bottom:.125rem} .mb-10{margin-bottom:2.5rem} .mb-12{margin-bottom:3rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem} .mb-\\[9\\.5px\\]{margin-bottom:9.5px} .ml-1{margin-left:.25rem} .ml-2{margin-left:.5rem} .ml-2\\.5{margin-left:.625rem} .ml-3{margin-left:.75rem} .ml-8\\.5{margin-left:2.125rem} .ml-\\[3px\\]{margin-left:3px} .ml-\\[9\\.5px\\]{margin-left:9.5px} .mr-1{margin-right:.25rem} .mr-2{margin-right:.5rem} .mr-4{margin-right:1rem} .mr-\\[9\\.5px\\]{margin-right:9.5px} .mt-0\\.5{margin-top:.125rem} .mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem} .mt-7\\.5{margin-top:1.875} .mt-9{margin-top:2.25rem} .mt-\\[9\\.5px\\]{margin-top:9.5px} .line-clamp-1{-webkit-line-clamp:1} .line-clamp-1, .line-clamp-3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical} .line-clamp-3{-webkit-line-clamp:3} .block{display:block} .inline-block{display:inline-block} .inline{display:inline} .flex{display:flex} .table{display:table} .grid{display:grid} .contents{display:contents} .hidden{display:none} .h-10\\.5{height:2.625rem} .h-11{height:2.75rem} .h-2{height:.5rem} .h-4{height:1rem} .h-52{height:13rem} .h-6{height:1.5rem} .h-8\\.5{height:2.125rem} .h-\\[13\\.33px\\]{height:13.33px} .h-\\[8\\.77px\\]{height:8.77px} .h-auto{height:auto} .h-fit{height:-moz-fit-content;height:fit-content} .h-full{height:100%} .h-screen{height:100vh} .max-h-\\[184px\\]{max-height:184px} .max-h-\\[470px\\]{max-height:470px} .max-h-\\[660px\\]{max-height:660px} .max-h-\\[calc\\(100vh-168px\\)\\]{max-height:calc(100vh - 168px)} .max-h-\\[calc\\(100vh-168px-34px\\)\\]{max-height:calc(100vh - 202px)} .max-h-none{max-height:none} .min-h-\\[133px\\]{min-height:133px} .min-h-\\[140px\\]{min-height:140px} .min-h-\\[154px\\]{min-height:154px} .min-h-\\[210px\\]{min-height:210px} .min-h-\\[44px\\]{min-height:44px} .min-h-\\[54px\\]{min-height:54px} .min-h-\\[86px\\]{min-height:86px} .w-11{width:2.75rem} .w-2{width:.5rem} .w-2\\/4{width:50%} .w-3{width:.75rem} .w-4{width:1rem} .w-6{width:1.5rem} .w-60{width:15rem} .w-8\\.5{width:2.125rem} .w-\\[13\\.33px\\]{width:13.33px} .w-\\[8\\.77px\\]{width:8.77px} .w-auto{width:auto} .w-fit{width:-moz-fit-content;width:fit-content} .w-full{width:100%} .w-screen{width:100vw} .min-w-0{min-width:0} .min-w-\\[288px\\]{min-width:288px} .min-w-\\[44px\\]{min-width:44px} .min-w-\\[85px\\]{min-width:85px} .max-w-\\[1008px\\]{max-width:1008px} .max-w-\\[300px\\]{max-width:300px} .max-w-\\[304px\\]{max-width:304px} .max-w-\\[400px\\]{max-width:400px} .max-w-full{max-width:100%} .max-w-none{max-width:none} .flex-1{flex:1 1 0%} .flex-none{flex:none} .flex-shrink-0{flex-shrink:0} .grow{flex-grow:1} .basis-0{flex-basis:0px} .-translate-x-1\\/2{--tw-translate-x:-50%} .-translate-x-1\\/2, .-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .-translate-y-1\\/2{--tw-translate-y:-50%} .rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .\\!cursor-default{cursor:default!important} .\\!cursor-pointer{cursor:pointer!important} .cursor-default{cursor:default} .cursor-pointer{cursor:pointer} .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none} .resize-none{resize:none} .resize{resize:both} .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-start{justify-content:flex-start} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .gap-1{gap:.25rem} .gap-2{gap:.5rem} .space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))} .space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse:1} .overflow-hidden{overflow:hidden} .overflow-y-auto{overflow-y:auto} .overflow-x-hidden{overflow-x:hidden} .overflow-y-visible{overflow-y:visible} .truncate{overflow:hidden;white-space:nowrap} .text-ellipsis, .truncate{text-overflow:ellipsis} .whitespace-normal{white-space:normal} .whitespace-nowrap{white-space:nowrap} .break-words{overflow-wrap:break-word} .break-all{word-break:break-all} .rounded{border-radius:.25rem} .rounded-\\[32px\\]{border-radius:32px} .rounded-lg{border-radius:.5rem} .rounded-md{border-radius:.375rem} .rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem} .rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem} .rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem} .rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem} .rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem} .border{border-width:1px} .border-2{border-width:2px} .border-b{border-bottom-width:1px} .border-l-4{border-left-width:4px} .border-l-6{border-left-width:6px} .border-dashed{border-style:dashed} .\\!border-blue-1000{--tw-border-opacity:1!important;border-color:rgb(40,44,135,var(--tw-border-opacity,1))!important} .border-blue-1000{--tw-border-opacity:1;border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .border-blue-950{--tw-border-opacity:1;border-color:rgb(29,78,216,var(--tw-border-opacity,1))} .border-border-minimal{--tw-border-opacity:1;border-color:rgb(229,231,235,var(--tw-border-opacity,1))} .border-charcoal{--tw-border-opacity:1;border-color:rgb(33,37,41,var(--tw-border-opacity,1))} .border-gray-400{--tw-border-opacity:1;border-color:rgb(196,201,204,var(--tw-border-opacity,1))} .border-gray-800{--tw-border-opacity:1;border-color:rgb(93,99,107,var(--tw-border-opacity,1))} .border-gray-850{--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .border-green-800{--tw-border-opacity:1;border-color:rgb(0,102,5,var(--tw-border-opacity,1))} .border-green-900{--tw-border-opacity:1;border-color:rgb(21,128,61,var(--tw-border-opacity,1))} .border-red-600{--tw-border-opacity:1;border-color:rgb(220,38,38,var(--tw-border-opacity,1))} .border-red-800{--tw-border-opacity:1;border-color:rgb(217,12,85,var(--tw-border-opacity,1))} .border-red-900{--tw-border-opacity:1;border-color:rgb(190,24,93,var(--tw-border-opacity,1))} .border-soft-blue{--tw-border-opacity:1;border-color:rgb(84,101,251,var(--tw-border-opacity,1))} .border-white{--tw-border-opacity:1;border-color:rgb(255,255,255,var(--tw-border-opacity,1))} .\\!bg-violet-100{--tw-bg-opacity:1!important;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))!important} .\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))!important} .bg-black{--tw-bg-opacity:1;background-color:rgb(0,0,0,var(--tw-bg-opacity,1))} .bg-blue-1000{--tw-bg-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1))} .bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239,246,255,var(--tw-bg-opacity,1))} .bg-charcoal\\/30{background-color:rgba(33,37,41,.3)} .bg-charcoal\\/80{background-color:rgba(33,37,41,.8)} .bg-gray-100{--tw-bg-opacity:1;background-color:rgb(247,250,250,var(--tw-bg-opacity,1))} .bg-gray-50{--tw-bg-opacity:1;background-color:rgb(244,244,244,var(--tw-bg-opacity,1))} .bg-gray-900{--tw-bg-opacity:1;background-color:rgb(57,62,69,var(--tw-bg-opacity,1))} .bg-green-300{--tw-bg-opacity:1;background-color:rgb(241,254,241,var(--tw-bg-opacity,1))} .bg-red-200{--tw-bg-opacity:1;background-color:rgb(254,202,202,var(--tw-bg-opacity,1))} .bg-red-300{--tw-bg-opacity:1;background-color:rgb(253,243,247,var(--tw-bg-opacity,1))} .bg-red-50{--tw-bg-opacity:1;background-color:rgb(253,242,248,var(--tw-bg-opacity,1))} .bg-soft-blue{--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))} .bg-transparent{background-color:transparent} .bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))} .bg-violet-150{--tw-bg-opacity:1;background-color:rgb(205,208,254,var(--tw-bg-opacity,1))} .bg-white{--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .bg-white\\/80{background-color:hsla(0,0%,100%,.8)} .bg-yellow-1000{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1))} .bg-opacity-5{--tw-bg-opacity:0.05} .object-contain{-o-object-fit:contain;object-fit:contain} .p-0\\.5{padding:.125rem} .p-1{padding:.25rem} .p-1\\.5{padding:.375rem} .p-2{padding:.5rem} .p-3{padding:.75rem} .p-4{padding:1rem} .p-5{padding:1.25rem} .p-6{padding:1.5rem} .px-0{padding-left:0;padding-right:0} .px-2{padding-left:.5rem;padding-right:.5rem} .px-3{padding-left:.75rem;padding-right:.75rem} .px-4{padding-left:1rem;padding-right:1rem} .py-1{padding-bottom:.25rem;padding-top:.25rem} .py-1\\.5{padding-bottom:.375rem;padding-top:.375rem} .py-2{padding-bottom:.5rem;padding-top:.5rem} .py-\\[9px\\]{padding-bottom:9px;padding-top:9px} .\\!pr-11{padding-right:2.75rem!important} .pb-0{padding-bottom:0} .pb-10{padding-bottom:2.5rem} .pb-2{padding-bottom:.5rem} .pb-3{padding-bottom:.75rem} .pb-\\[72px\\]{padding-bottom:72px} .pl-13\\.2{padding-left:3.125rem} .pl-24{padding-left:6rem} .pl-3{padding-left:.75rem} .pl-4{padding-left:1rem} .pr-3{padding-right:.75rem} .pr-4{padding-right:1rem} .pt-0{padding-top:0} .pt-0\\.5{padding-top:.125rem} .pt-14{padding-top:3.5rem} .pt-4{padding-top:1rem} .pt-6{padding-top:1.5rem} .pt-\\[15px\\]{padding-top:15px} .pt-\\[55px\\]{padding-top:55px} .text-left{text-align:left} .text-center{text-align:center} .align-middle{vertical-align:middle} .text-base{font-size:1rem;line-height:1.5rem} .text-lg{font-size:1.125rem;line-height:1.75rem} .text-sm{font-size:.875rem;line-height:1.25rem} .text-xl{font-size:1.25rem;line-height:1.75rem} .font-bold{font-weight:700} .font-normal{font-weight:400} .font-semibold{font-weight:600} .leading-12{line-height:3rem} .leading-4{line-height:1rem} .leading-5{line-height:1.25rem} .leading-6{line-height:1.5rem} .leading-\\[1\\.5\\]{line-height:1.5} .leading-\\[150\\%\\]{line-height:150%} .leading-\\[19\\.2px\\]{line-height:19.2px} .leading-\\[19px\\]{line-height:19px} .leading-\\[22px\\]{line-height:22px} .\\!text-gray-900{--tw-text-opacity:1!important;color:rgb(57,62,69,var(--tw-text-opacity,1))!important} .text-blue-1000{--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .text-blue-850{--tw-text-opacity:1;color:rgb(46,47,212,var(--tw-text-opacity,1))} .text-charcoal{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-gray-500{--tw-text-opacity:1;color:rgb(107,114,128,var(--tw-text-opacity,1))} .text-gray-800{--tw-text-opacity:1;color:rgb(93,99,107,var(--tw-text-opacity,1))} .text-gray-860{--tw-text-opacity:1;color:rgb(55,65,81,var(--tw-text-opacity,1))} .text-green-800{--tw-text-opacity:1;color:rgb(0,102,5,var(--tw-text-opacity,1))} .text-green-900{--tw-text-opacity:1;color:rgb(21,128,61,var(--tw-text-opacity,1))} .text-inherit{color:inherit} .text-primary-emphasis{--tw-text-opacity:1;color:rgb(8,38,99,var(--tw-text-opacity,1))} .text-red-800{--tw-text-opacity:1;color:rgb(217,12,85,var(--tw-text-opacity,1))} .text-red-900{--tw-text-opacity:1;color:rgb(190,24,93,var(--tw-text-opacity,1))} .text-white{--tw-text-opacity:1;color:rgb(255,255,255,var(--tw-text-opacity,1))} .underline{text-decoration-line:underline} .opacity-0{opacity:0} .opacity-5{opacity:.05} .opacity-50{opacity:.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 transparent),var(--tw-ring-shadow,0 0 transparent),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} .outline-none{outline:2px solid transparent;outline-offset:2px} .blur{--tw-blur:blur(8px)} .blur, .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)} .backdrop-blur-md{--tw-backdrop-blur:blur(12px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)} .transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)} .duration-300{transition-duration:.3s} :host, html{-webkit-tap-highlight-color:inherit!important} .active\\:raw-focus-ring-by: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(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529} .active\\:raw-focus-ring-by:active, .active\\:raw-focus-ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .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,1));--tw-ring-offset-width:2px}@media (min-width:732px){ .md\\:item-heading{font-size:1.25rem;letter-spacing:-.025em;line-height:1.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))}}@media (hover:hover) and (pointer:fine){ .td\\:hover-focus-ring:hover{outline:2px solid transparent;outline-offset:2px;--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width: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,.051)} .hover\\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(222,222,255,var(--tw-bg-opacity,1))} .hover\\:bg-yellow-1000:hover{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1))} .hover\\:text-charcoal:hover{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .hover\\:underline:hover{text-decoration-line:underline} .hover\\:decoration-2:hover{text-decoration-thickness:2px} .hover\\:underline-offset-\\[25\\%\\]:hover{text-underline-offset:25%} .focus-visible\\:border-charcoal:focus-visible{--tw-border-opacity:1;border-color:rgb(33,37,41,var(--tw-border-opacity,1))} .focus-visible\\:bg-yellow-900:focus-visible{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1))} .focus-visible\\:text-charcoal:focus-visible{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .focus-visible\\:underline:focus-visible{text-decoration-line:underline} .focus-visible\\:decoration-2:focus-visible{text-decoration-thickness:2px} .focus-visible\\:underline-offset-\\[25\\%\\]:focus-visible{text-underline-offset:25%} .focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px} .focus-visible\\:ring-4: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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)} .focus-visible\\:ring-soft-blue:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1))} .focus-visible\\:ring-offset-4:focus-visible{--tw-ring-offset-width:4px} .focus-visible\\:duration-50:focus-visible{transition-duration:50ms} .active\\:bg-black-55:active, .active\\:bg-black-60:active{background-color:rgba(0,0,0,.102)} .active\\:bg-yellow-1100:active{--tw-bg-opacity:1;background-color:rgb(238,206,26,var(--tw-bg-opacity,1))} .active\\:text-charcoal:active{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .disabled\\:text-gray-40:disabled{--tw-text-opacity:1;color:rgb(142,147,153,var(--tw-text-opacity,1))} .disabled\\:hover\\:bg-white:hover:disabled{--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .group:hover .group-hover\\:underline{text-decoration-line:underline} .group.active .group-\\[\\.active\\]\\:border-b-2{border-bottom-width:2px}@media (min-width:732px){ .md\\:inset-0{inset:0} .md\\:top-20{top:5rem} .md\\:mb-2{margin-bottom:.5rem} .md\\:mb-4{margin-bottom:1rem} .md\\:mb-8{margin-bottom:2rem} .md\\:ml-0{margin-left:0} .md\\:mt-0{margin-top:0} .md\\:mt-14{margin-top:3.5rem} .md\\:block{display:block} .md\\:inline-block{display:inline-block} .md\\:flex{display:flex} .md\\:grid{display:grid} .md\\:hidden{display:none} .md\\:h-11{height:2.75rem} .md\\:h-5{height:1.25rem} .md\\:h-\\[13\\.5px\\]{height:13.5px} .md\\:h-fit{height:-moz-fit-content;height:fit-content} .md\\:max-h-\\[calc\\(100vh-128px\\)\\]{max-height:calc(100vh - 128px)} .md\\:max-h-\\[calc\\(100vh-128px-54px\\)\\]{max-height:calc(100vh - 182px)} .md\\:min-h-0{min-height:0} .md\\:min-h-\\[140px\\]{min-height:140px} .md\\:min-h-\\[164px\\]{min-height:164px} .md\\:w-1\\/2{width:50%} .md\\:w-11{width:2.75rem} .md\\:w-5{width:1.25rem} .md\\:w-\\[13\\.5px\\]{width:13.5px} .md\\:w-fit{width:-moz-fit-content;width:fit-content} .md\\:max-w-\\[calc\\(100vw-164px\\)\\]{max-width:calc(100vw - 164px)} .md\\:flex-none{flex:none} .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-start{align-items:flex-start} .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-4{gap:1rem} .md\\:gap-6{gap:1.5rem} .md\\:gap-x-4{-moz-column-gap:1rem;column-gap:1rem} .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-lg{border-radius:.5rem} .md\\:rounded-md{border-radius:.375rem} .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,1))} .md\\:\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))!important} .md\\:p-4{padding:1rem} .md\\:px-0{padding-left:0;padding-right:0} .md\\:px-4{padding-left:1rem;padding-right:1rem} .md\\:px-6{padding-left:1.5rem;padding-right:1.5rem} .md\\:px-\\[82px\\]{padding-left:82px;padding-right:82px} .md\\:pb-0{padding-bottom:0} .md\\:pl-13\\.2{padding-left:3.125rem} .md\\:pl-4{padding-left:1rem} .md\\:pr-4{padding-right:1rem} .md\\:pt-20\\.5{padding-top:5.125rem} .md\\:text-center{text-align:center} .md\\:text-lg{font-size:1.125rem;line-height:1.75rem} .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 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .md\\:\\[grid-template-columns\\:repeat\\(2\\,minmax\\(auto\\,304px\\)\\)\\]{grid-template-columns:repeat(2,minmax(auto,304px))}}@media (min-width:1196px){ .lg\\:left-16{left:4rem} .lg\\:right-16{right:4rem} .lg\\:flex{display:flex} .lg\\:hidden{display:none} .lg\\:max-h-\\[calc\\(100vh-192px\\)\\]{max-height:calc(100vh - 192px)} .lg\\:max-h-\\[calc\\(100vh-192px-54px\\)\\]{max-height:calc(100vh - 246px)} .lg\\:min-h-\\[224px\\]{min-height:224px} .lg\\:w-full{width:100%} .lg\\:max-w-\\[50\\%\\]{max-width:50%} .lg\\:max-w-\\[calc\\(100vw-248px\\)\\]{max-width:calc(100vw - 248px)} .lg\\:grow{flex-grow:1} .lg\\:basis-1\\/2{flex-basis:50%} .lg\\:justify-start{justify-content:flex-start} .lg\\:rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem} .lg\\:rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem} .lg\\:px-16{padding-left:4rem;padding-right:4rem} .lg\\:px-\\[128px\\]{padding-left:128px;padding-right:128px} .lg\\:py-24{padding-bottom:6rem;padding-top:6rem} .lg\\:pt-6{padding-top:1.5rem}}@media (hover:hover) and (pointer:fine){ .td\\:border-2{border-width:2px} .td\\:border-blue-900{--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .td\\:hover\\:cursor-grab:hover{cursor:grab} .td\\:hover\\:bg-black-50:hover{background-color:rgba(0,0,0,.051)} .td\\:hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))} .td\\:hover\\:text-soft-blue:hover{--tw-text-opacity:1;color:rgb(84,101,251,var(--tw-text-opacity,1))} .group:hover .td\\:group-hover\\:bg-black{--tw-bg-opacity:1;background-color:rgb(0,0,0,var(--tw-bg-opacity,1))} .group:hover .td\\:group-hover\\:opacity-5{opacity:.05}}@media (pointer:coarse){ .coarse\\:active\\:bg-yellow-900:active{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1))}}'
+  code: ' *, :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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:} ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color: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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:} *, :after, :before{border:0 solid #e5e7eb;box-sizing:border-box} :after, :before{--tw-content:""} :host, html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Mulish,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent} 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-feature-settings:normal;font-size:1em;font-variation-settings:normal} small{font-size:80%} sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-.25em} sup{top:-.5em} table{border-collapse:collapse;border-color:inherit;text-indent:0} button, input, optgroup, select, textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0} button, select{text-transform:none} button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]){-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]:where(:not([hidden=until-found])){display:none} *{font-family:Mulish,sans-serif} input::-moz-selection, textarea::-moz-selection{background-color:hsla(0,0%,85%,.4)} input::selection, textarea::selection{background-color:hsla(0,0%,85%,.4)} .container{width:100%}@media (min-width:732px){ .container{max-width:732px}}@media (min-width:1196px){ .container{max-width:1196px}} .p2{font-size:.875rem;font-weight:600;line-height:1.25rem;line-height:1.5} .blanket-overlay{inset:0;position:absolute} .item-heading{font-size:1.25rem;letter-spacing:-.025em;line-height:1.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .focus-ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px} .focus-ring:focus, .raw-focus-ring{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .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,1));--tw-ring-offset-width:2px} .focus-ring-by-dropdown{outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:rgb(59,64,240,var(--tw-border-opacity,1));border-width:2px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);box-shadow:0 0 0 2px #fff,0 0 0 4px #212529,0 0 0 6px #fde047} .divider, .focus-ring-by-dropdown{--tw-border-opacity:1} .divider{border-bottom-width:1px;border-color:rgb(218,224,224,var(--tw-border-opacity,1))}@keyframes svelte-1dpid58-pulse{50%{opacity:.5}} .animate-skeleton{animation:svelte-1dpid58-pulse 2s cubic-bezier(.4,0,.6,1) infinite;--tw-bg-opacity:1;background-color:rgb(226,232,240,var(--tw-bg-opacity,1))} .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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .btn-mcq-option{font-size:1rem;line-height:1.5rem;line-height:19.2px;margin-bottom:1rem;min-height:52px;width:100%;--tw-text-opacity:1;border-radius:.5rem;border-width:1px;box-sizing:border-box;color:rgb(33,37,41,var(--tw-text-opacity,1));--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))} .btn-mcq-option:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))}} .btn-mcq-text{align-items:center;display:flex;padding:.375rem .75rem;width:100%}@supports (overflow-wrap:anywhere){ .btn-mcq-text{overflow-wrap:anywhere}}@supports not (overflow-wrap:anywhere){ .btn-mcq-text{word-break:break-word}} .btn-mcq-option>span>span>span>.choice{align-items:center;border-radius:1rem;border-width:1px;display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:.05em;line-height:1rem;width:2rem;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1));padding:.5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .btn-mcq-option.selected{border-width:2px;--tw-border-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1));border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .btn-mcq-option.selected, .btn-mcq-option.selected:active{--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(255,255,255,var(--tw-text-opacity,1))} .btn-mcq-option.selected:active{background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.selected:hover{--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}} .btn-mcq-option.finished{cursor:default} .btn-mcq-option.finished:active, .btn-mcq-option.finished:hover{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))} .btn-mcq-option.selected>span>span>.choice{--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))} .btn-mcq-option>span>span>span>.custom-checkbox{align-items:center;border-radius:.25rem;border-width:1px;display:flex;height:1.75rem;justify-content:center;pointer-events:none;width:1.75rem;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option:hover>span>span>span>.custom-checkbox{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .btn-mcq-option:active>span>span>span>.custom-checkbox.preview-only, .btn-mcq-option:hover>span>span>span>.custom-checkbox.preview-only{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))}} .btn-mcq-option:active>span>span>span>.custom-checkbox{border-width:2px;--tw-border-opacity:1;border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .btn-mcq-option.selected>span>span>span>.custom-checkbox{border-width:0;pointer-events:none;--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.selected:hover>span>span>span>.custom-checkbox{border-width:0;--tw-bg-opacity:1;background-color:rgb(76,91,226,var(--tw-bg-opacity,1))}} .btn-mcq-option.selected:active>span>span>span>.custom-checkbox{border-width:0;--tw-bg-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1))} .btn-mcq-option.finished:active>span>span>span>.custom-checkbox, .btn-mcq-option.finished:hover>span>span>span>.custom-checkbox{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .btn-mcq-option.missing.\\!correct, .btn-mcq-option.missing.correct{border-width:1px;--tw-border-opacity:1;border-color:rgb(21,128,61,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.\\!correct.interactive:active, .btn-mcq-option.\\!correct.interactive:hover, .btn-mcq-option.correct.interactive:active, .btn-mcq-option.correct.interactive:hover, .btn-mcq-option.incorrect.interactive:active, .btn-mcq-option.incorrect.interactive:hover, .btn-mcq-option.missing.interactive:active, .btn-mcq-option.missing.interactive:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))}} .btn-mcq-option.selected.\\!correct, .btn-mcq-option.selected.correct{background-color:rgb(240,253,244,var(--tw-bg-opacity,1));border-color:rgb(21,128,61,var(--tw-border-opacity,1));border-width:1px} .btn-mcq-option.selected.\\!correct, .btn-mcq-option.selected.correct, .btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .btn-mcq-option.selected.incorrect{background-color:rgb(253,242,248,var(--tw-bg-opacity,1));border-color:rgb(190,24,93,var(--tw-border-opacity,1));border-width:1px} .btn-mcq-option.selected.\\!correct>span>span>span>.choice, .btn-mcq-option.selected.correct>span>span>span>.choice, .btn-mcq-option.selected.incorrect>span>span>span>.choice{border-width:1px;--tw-border-opacity:1;border-color:rgb(113,115,119,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .btn-pressed{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-base: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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .btn-base{align-items:center;display:inline-flex;justify-content:center}@media (hover:hover) and (pointer:fine){ .btn-base:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1))}} .btn-base:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-touch-container{align-items:center;display:flex;height:2.75rem;justify-content:center;width:2.75rem} .btn-touch-container:focus{outline:2px solid transparent;outline-offset:2px} .btn-icon-sm{align-items:center;background-color:hsla(0,0%,100%,.8);border-radius:.25rem;display:flex;height:1.5rem;justify-content:center;width:1.5rem}@media (hover:hover) and (pointer:fine){ .btn-touch-container:hover>.btn-icon-sm{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1))}} .btn-touch-container:active>.btn-icon-sm{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-touch-container:focus-visible>.btn-icon-sm{--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .typein-textbox:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px;transition-duration:50ms} .typein-textbox{border-radius:.5rem;border-width:1px;width:100%;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding:.75rem 1rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(55,65,81,var(--tw-placeholder-opacity,1))} .typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(55,65,81,var(--tw-placeholder-opacity,1))} .typein-textbox:focus{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}} .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 transparent)!important}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{transition-duration:50ms}} .typein-textbox:focus{outline-color:#212529;outline-width:2px}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{outline-color:#212529;outline-width:2px}} .typein-textbox:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1))} .inline-typein-container>p{font-size:1.25rem;font-weight:600;line-height:3rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} #dnd-action-dragged-el{outline:2px solid transparent;outline-offset:2px;--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;cursor:grabbing!important;transition-duration:50ms;--tw-border-opacity:1!important;border-color:rgb(93,99,107,var(--tw-border-opacity,1))!important;--tw-bg-opacity:1!important;background-color:rgb(205,208,254,var(--tw-bg-opacity,1))!important} #dnd-action-dragged-el .btn-vertical-icon{cursor:grabbing!important;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} #dnd-action-dragged-el .preview-icon{display:none!important} #dnd-action-dragged-el .preview-vertical{display:block!important} .image-description, .text-stimulus{padding-bottom:1rem;padding-top:1rem} .text-stimulus p{font-size:1.25rem;line-height:1.75rem;padding-bottom:.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .image-description p{font-size:.875rem;line-height:1.25rem;padding-bottom:.5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-stimulus ol, .text-stimulus ul{font-size:1rem;line-height:1.5rem;list-style-position:inside;padding-bottom:.5rem;padding-left:.5rem} .text-stimulus ol ::marker, .text-stimulus ul ::marker{color:#282c87} .text-stimulus ol::marker, .text-stimulus ul::marker{color:#282c87} .image-description ol, .image-description ul{font-size:.875rem;line-height:1.25rem;list-style-position:inside;padding-bottom:.5rem;padding-left:.5rem} .image-description ol ::marker, .image-description ul ::marker{color:#212529} .image-description ol::marker, .image-description ul::marker{color:#212529} .image-description ul, .text-stimulus ul{list-style-type:disc} .image-description ol, .text-stimulus ol{list-style-type:decimal} .image-description ul li>p, .text-stimulus ul li>p{margin-left:-.5rem} .text-stimulus ol>li>p, .text-stimulus ul>li>p{display:inline;font-size:1rem;line-height:1.5rem;padding-bottom:0;padding-top:0} .image-description ol>li>p, .image-description ul>li>p{display:inline;font-size:.875rem;line-height:1.25rem;padding-bottom:0;padding-top:0} .image-description div.table-container:focus, .text-stimulus div.table-container:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px;transition-duration:50ms} .image-description div.table-container, .text-stimulus div.table-container{border-radius:.5rem;overflow:auto;padding-left:.125rem;padding-right:.125rem} .image-description table, .text-stimulus table{margin-bottom:1rem;margin-top:.5rem;width:100%;--tw-border-spacing-x:0.75rem;--tw-border-spacing-y:0.75rem;border-radius:.5rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);overflow-x:auto;--tw-shadow:0 0 0 1px #9ca3af;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .image-description table tr, .text-stimulus table tr{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1))} .image-description table tr:last-child, .text-stimulus table tr:last-child{border-color:transparent} .image-description table td, .image-description table th, .text-stimulus table td, .text-stimulus table th{border-left-width:1px;min-width:140px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1))} .image-description table td:first-child, .image-description table th:first-child, .text-stimulus table td:first-child, .text-stimulus table th:first-child{border-style:none} .text-stimulus table td>p, .text-stimulus table th>p{font-size:1rem;line-height:1.5rem;padding:.75rem;text-align:left;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .image-description table td>p, .image-description table th>p{font-size:.875rem;line-height:1.25rem;padding:.75rem;text-align:left;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-stimulus table th>p{font-weight:400} .image-description table th p, .prompt p, .text-stimulus table th p{font-weight:600} .prompt p b, .prompt p b i, .prompt p b i u, .prompt p b u, .prompt p b u i, .prompt p i b, .prompt p i b u, .prompt p i u b, .prompt p u b, .prompt p u b i, .prompt p u i b, .text-stimulus table th p b, .text-stimulus table th p b i, .text-stimulus table th p b i u, .text-stimulus table th p b u, .text-stimulus table th p b u i, .text-stimulus table th p i b, .text-stimulus table th p i b u, .text-stimulus table th p i u b, .text-stimulus table th p u b, .text-stimulus table th p u b i, .text-stimulus table th p u i b{font-weight:900} .dropdown-text:not(:last-child), .dropdown:not(:last-child){margin-right:1rem} .dropdown-container{align-items:center;border-radius:.5rem;border-width:1px;display:flex;height:2.75rem;overflow:hidden;white-space:nowrap;width:15rem;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .dropdown-container:focus{outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)} .dropdown-container:active, .dropdown-container:focus{border-width:2px;box-shadow:0 0 0 2px #fff,0 0 0 4px #212529,0 0 0 6px #fde047;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .dropdown-container:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));outline-color:#212529;outline-width:2px}} .dropdown-menu{border-radius:.5rem;border-width:1px;margin-top:.5rem;max-height:400px;overflow-y:auto;position:absolute;z-index:10;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))}@supports (overflow-wrap:anywhere){ .dropdown-menu{overflow-wrap:anywhere}}@supports not (overflow-wrap:anywhere){ .dropdown-menu{word-break:break-word}} .dropdown-menu{max-width:min(500px,100vw - 2rem);min-width:240px;width:-moz-max-content;width:max-content} .dropdown-item{cursor:pointer;font-size:1rem;line-height:1.5rem;outline:2px solid transparent;outline-offset:2px;padding:.5rem 1rem} .dropdown-itemtext{border-bottom-width:1px;border-color:transparent} .dropdown-itemtext.hover-option{--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(46,47,212,var(--tw-text-opacity,1))} .dropdown-itemtext.current-option{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1));--tw-text-opacity:1;border-bottom-width:1px;color:rgb(0,0,0,var(--tw-text-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1))} .dropdown-itemtext:active{border-bottom-width:2px} .image-description-accordion{border-bottom-width:1px;border-color:transparent;font-weight:600;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .group:focus .image-description-accordion{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1));--tw-text-opacity:1;border-bottom-width:1px;color:rgb(0,0,0,var(--tw-text-opacity,1));outline:2px solid transparent;outline-offset:2px} .group:focus .image-description-accordion, .group:hover .image-description-accordion{--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1))} .group:active .image-description-accordion{border-bottom-width:2px} .sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap} .pointer-events-none{pointer-events:none} .pointer-events-auto{pointer-events:auto} .visible{visibility:visible} .invisible{visibility:hidden} .collapse{visibility:collapse} .static{position:static} .fixed{position:fixed} .absolute{position:absolute} .relative{position:relative} .inset-0{inset:0} .inset-y-0{bottom:0;top:0} .-top-2\\.5{top:-.625rem} .bottom-0{bottom:0} .bottom-1\\.5{bottom:.375rem} .bottom-4{bottom:1rem} .bottom-5{bottom:1.25rem} .bottom-\\[7px\\]{bottom:7px} .bottom-full{bottom:100%} .left-0{left:0} .left-1\\/2{left:50%} .left-4{left:1rem} .left-6{left:1.5rem} .left-\\[-9999px\\]{left:-9999px} .left-full{left:100%} .right-0{right:0} .right-1{right:.25rem} .right-1\\.5{right:.375rem} .right-4{right:1rem} .right-6{right:1.5rem} .right-full{right:100%} .top-0{top:0} .top-1{top:.25rem} .top-1\\.5{top:.375rem} .top-1\\/2{top:50%} .top-12{top:3rem} .top-3\\.5{top:.875rem} .top-\\[13px\\]{top:13px} .top-\\[calc\\(50\\%\\+0\\.375rem\\)\\]{top:calc(50% + .375rem)} .top-full{top:100%} .z-0{z-index:0} .z-10{z-index:10} .z-50{z-index:50} .m-0{margin:0} .m-auto{margin:auto} .mx-0\\.5{margin-left:.125rem;margin-right:.125rem} .mx-auto{margin-left:auto;margin-right:auto} .my-1\\.5{margin-bottom:.375rem;margin-top:.375rem} .my-2{margin-bottom:.5rem;margin-top:.5rem} .my-6{margin-bottom:1.5rem;margin-top:1.5rem} .-mb-1{margin-bottom:-.25rem} .-ml-1{margin-left:-.25rem} .-mr-1{margin-right:-.25rem} .-mr-2\\.5{margin-right:-.625rem} .-mt-0\\.5{margin-top:-.125rem} .-mt-1{margin-top:-.25rem} .mb-0\\.5{margin-bottom:.125rem} .mb-10{margin-bottom:2.5rem} .mb-12{margin-bottom:3rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem} .mb-\\[9\\.5px\\]{margin-bottom:9.5px} .ml-1{margin-left:.25rem} .ml-2{margin-left:.5rem} .ml-2\\.5{margin-left:.625rem} .ml-3{margin-left:.75rem} .ml-8\\.5{margin-left:2.125rem} .ml-\\[3px\\]{margin-left:3px} .ml-\\[9\\.5px\\]{margin-left:9.5px} .mr-1{margin-right:.25rem} .mr-2{margin-right:.5rem} .mr-4{margin-right:1rem} .mr-\\[9\\.5px\\]{margin-right:9.5px} .mt-0\\.5{margin-top:.125rem} .mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem} .mt-7\\.5{margin-top:1.875} .mt-9{margin-top:2.25rem} .mt-\\[9\\.5px\\]{margin-top:9.5px} .line-clamp-1{-webkit-line-clamp:1} .line-clamp-1, .line-clamp-3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical} .line-clamp-3{-webkit-line-clamp:3} .block{display:block} .inline-block{display:inline-block} .inline{display:inline} .flex{display:flex} .table{display:table} .grid{display:grid} .contents{display:contents} .hidden{display:none} .h-10\\.5{height:2.625rem} .h-11{height:2.75rem} .h-2{height:.5rem} .h-4{height:1rem} .h-52{height:13rem} .h-6{height:1.5rem} .h-8\\.5{height:2.125rem} .h-\\[13\\.33px\\]{height:13.33px} .h-\\[8\\.77px\\]{height:8.77px} .h-auto{height:auto} .h-fit{height:-moz-fit-content;height:fit-content} .h-full{height:100%} .h-screen{height:100vh} .max-h-\\[184px\\]{max-height:184px} .max-h-\\[470px\\]{max-height:470px} .max-h-\\[660px\\]{max-height:660px} .max-h-\\[calc\\(100vh-168px\\)\\]{max-height:calc(100vh - 168px)} .max-h-\\[calc\\(100vh-168px-34px\\)\\]{max-height:calc(100vh - 202px)} .max-h-none{max-height:none} .min-h-\\[133px\\]{min-height:133px} .min-h-\\[140px\\]{min-height:140px} .min-h-\\[154px\\]{min-height:154px} .min-h-\\[210px\\]{min-height:210px} .min-h-\\[44px\\]{min-height:44px} .min-h-\\[54px\\]{min-height:54px} .min-h-\\[86px\\]{min-height:86px} .w-11{width:2.75rem} .w-2{width:.5rem} .w-2\\/4{width:50%} .w-3{width:.75rem} .w-4{width:1rem} .w-6{width:1.5rem} .w-60{width:15rem} .w-8\\.5{width:2.125rem} .w-\\[13\\.33px\\]{width:13.33px} .w-\\[8\\.77px\\]{width:8.77px} .w-auto{width:auto} .w-fit{width:-moz-fit-content;width:fit-content} .w-full{width:100%} .w-screen{width:100vw} .min-w-0{min-width:0} .min-w-\\[288px\\]{min-width:288px} .min-w-\\[44px\\]{min-width:44px} .min-w-\\[85px\\]{min-width:85px} .max-w-\\[1008px\\]{max-width:1008px} .max-w-\\[300px\\]{max-width:300px} .max-w-\\[304px\\]{max-width:304px} .max-w-\\[400px\\]{max-width:400px} .max-w-full{max-width:100%} .max-w-none{max-width:none} .flex-1{flex:1 1 0%} .flex-none{flex:none} .flex-shrink-0{flex-shrink:0} .grow{flex-grow:1} .basis-0{flex-basis:0px} .-translate-x-1\\/2{--tw-translate-x:-50%} .-translate-x-1\\/2, .-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .-translate-y-1\\/2{--tw-translate-y:-50%} .rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .\\!cursor-default{cursor:default!important} .\\!cursor-pointer{cursor:pointer!important} .cursor-default{cursor:default} .cursor-pointer{cursor:pointer} .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none} .resize-none{resize:none} .resize{resize:both} .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-start{justify-content:flex-start} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .gap-1{gap:.25rem} .gap-2{gap:.5rem} .space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))} .space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse:1} .overflow-hidden{overflow:hidden} .overflow-y-auto{overflow-y:auto} .overflow-x-hidden{overflow-x:hidden} .overflow-y-visible{overflow-y:visible} .truncate{overflow:hidden;white-space:nowrap} .text-ellipsis, .truncate{text-overflow:ellipsis} .whitespace-normal{white-space:normal} .whitespace-nowrap{white-space:nowrap} .break-words{overflow-wrap:break-word} .break-all{word-break:break-all} .rounded{border-radius:.25rem} .rounded-\\[32px\\]{border-radius:32px} .rounded-lg{border-radius:.5rem} .rounded-md{border-radius:.375rem} .rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem} .rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem} .rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem} .rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem} .rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem} .border{border-width:1px} .border-2{border-width:2px} .border-b{border-bottom-width:1px} .border-l-4{border-left-width:4px} .border-l-6{border-left-width:6px} .border-dashed{border-style:dashed} .\\!border-blue-1000{--tw-border-opacity:1!important;border-color:rgb(40,44,135,var(--tw-border-opacity,1))!important} .border-blue-1000{--tw-border-opacity:1;border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .border-blue-950{--tw-border-opacity:1;border-color:rgb(29,78,216,var(--tw-border-opacity,1))} .border-border-minimal{--tw-border-opacity:1;border-color:rgb(229,231,235,var(--tw-border-opacity,1))} .border-charcoal{--tw-border-opacity:1;border-color:rgb(33,37,41,var(--tw-border-opacity,1))} .border-gray-400{--tw-border-opacity:1;border-color:rgb(196,201,204,var(--tw-border-opacity,1))} .border-gray-800{--tw-border-opacity:1;border-color:rgb(93,99,107,var(--tw-border-opacity,1))} .border-gray-850{--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .border-green-800{--tw-border-opacity:1;border-color:rgb(0,102,5,var(--tw-border-opacity,1))} .border-green-900{--tw-border-opacity:1;border-color:rgb(21,128,61,var(--tw-border-opacity,1))} .border-red-600{--tw-border-opacity:1;border-color:rgb(220,38,38,var(--tw-border-opacity,1))} .border-red-800{--tw-border-opacity:1;border-color:rgb(217,12,85,var(--tw-border-opacity,1))} .border-red-900{--tw-border-opacity:1;border-color:rgb(190,24,93,var(--tw-border-opacity,1))} .border-soft-blue{--tw-border-opacity:1;border-color:rgb(84,101,251,var(--tw-border-opacity,1))} .border-white{--tw-border-opacity:1;border-color:rgb(255,255,255,var(--tw-border-opacity,1))} .\\!bg-violet-100{--tw-bg-opacity:1!important;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))!important} .\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))!important} .bg-black{--tw-bg-opacity:1;background-color:rgb(0,0,0,var(--tw-bg-opacity,1))} .bg-blue-1000{--tw-bg-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1))} .bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239,246,255,var(--tw-bg-opacity,1))} .bg-charcoal\\/30{background-color:rgba(33,37,41,.3)} .bg-charcoal\\/80{background-color:rgba(33,37,41,.8)} .bg-gray-100{--tw-bg-opacity:1;background-color:rgb(247,250,250,var(--tw-bg-opacity,1))} .bg-gray-50{--tw-bg-opacity:1;background-color:rgb(244,244,244,var(--tw-bg-opacity,1))} .bg-gray-900{--tw-bg-opacity:1;background-color:rgb(57,62,69,var(--tw-bg-opacity,1))} .bg-green-300{--tw-bg-opacity:1;background-color:rgb(241,254,241,var(--tw-bg-opacity,1))} .bg-red-200{--tw-bg-opacity:1;background-color:rgb(254,202,202,var(--tw-bg-opacity,1))} .bg-red-300{--tw-bg-opacity:1;background-color:rgb(253,243,247,var(--tw-bg-opacity,1))} .bg-red-50{--tw-bg-opacity:1;background-color:rgb(253,242,248,var(--tw-bg-opacity,1))} .bg-soft-blue{--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))} .bg-transparent{background-color:transparent} .bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))} .bg-violet-150{--tw-bg-opacity:1;background-color:rgb(205,208,254,var(--tw-bg-opacity,1))} .bg-white{--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .bg-white\\/80{background-color:hsla(0,0%,100%,.8)} .bg-yellow-1000{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1))} .bg-opacity-5{--tw-bg-opacity:0.05} .object-contain{-o-object-fit:contain;object-fit:contain} .p-0\\.5{padding:.125rem} .p-1{padding:.25rem} .p-1\\.5{padding:.375rem} .p-2{padding:.5rem} .p-3{padding:.75rem} .p-4{padding:1rem} .p-5{padding:1.25rem} .p-6{padding:1.5rem} .px-0{padding-left:0;padding-right:0} .px-2{padding-left:.5rem;padding-right:.5rem} .px-3{padding-left:.75rem;padding-right:.75rem} .px-4{padding-left:1rem;padding-right:1rem} .py-1{padding-bottom:.25rem;padding-top:.25rem} .py-1\\.5{padding-bottom:.375rem;padding-top:.375rem} .py-2{padding-bottom:.5rem;padding-top:.5rem} .py-\\[9px\\]{padding-bottom:9px;padding-top:9px} .\\!pr-11{padding-right:2.75rem!important} .pb-0{padding-bottom:0} .pb-10{padding-bottom:2.5rem} .pb-2{padding-bottom:.5rem} .pb-3{padding-bottom:.75rem} .pb-\\[72px\\]{padding-bottom:72px} .pl-13\\.2{padding-left:3.125rem} .pl-24{padding-left:6rem} .pl-3{padding-left:.75rem} .pl-4{padding-left:1rem} .pr-3{padding-right:.75rem} .pr-4{padding-right:1rem} .pt-0{padding-top:0} .pt-0\\.5{padding-top:.125rem} .pt-14{padding-top:3.5rem} .pt-4{padding-top:1rem} .pt-6{padding-top:1.5rem} .pt-\\[15px\\]{padding-top:15px} .pt-\\[55px\\]{padding-top:55px} .text-left{text-align:left} .text-center{text-align:center} .align-middle{vertical-align:middle} .text-base{font-size:1rem;line-height:1.5rem} .text-lg{font-size:1.125rem;line-height:1.75rem} .text-sm{font-size:.875rem;line-height:1.25rem} .text-xl{font-size:1.25rem;line-height:1.75rem} .font-bold{font-weight:700} .font-normal{font-weight:400} .font-semibold{font-weight:600} .leading-12{line-height:3rem} .leading-4{line-height:1rem} .leading-5{line-height:1.25rem} .leading-6{line-height:1.5rem} .leading-\\[1\\.5\\]{line-height:1.5} .leading-\\[150\\%\\]{line-height:150%} .leading-\\[19\\.2px\\]{line-height:19.2px} .leading-\\[19px\\]{line-height:19px} .leading-\\[22px\\]{line-height:22px} .\\!text-gray-900{--tw-text-opacity:1!important;color:rgb(57,62,69,var(--tw-text-opacity,1))!important} .text-blue-1000{--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .text-blue-850{--tw-text-opacity:1;color:rgb(46,47,212,var(--tw-text-opacity,1))} .text-charcoal{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-gray-500{--tw-text-opacity:1;color:rgb(107,114,128,var(--tw-text-opacity,1))} .text-gray-800{--tw-text-opacity:1;color:rgb(93,99,107,var(--tw-text-opacity,1))} .text-gray-860{--tw-text-opacity:1;color:rgb(55,65,81,var(--tw-text-opacity,1))} .text-green-800{--tw-text-opacity:1;color:rgb(0,102,5,var(--tw-text-opacity,1))} .text-green-900{--tw-text-opacity:1;color:rgb(21,128,61,var(--tw-text-opacity,1))} .text-inherit{color:inherit} .text-primary-emphasis{--tw-text-opacity:1;color:rgb(8,38,99,var(--tw-text-opacity,1))} .text-red-800{--tw-text-opacity:1;color:rgb(217,12,85,var(--tw-text-opacity,1))} .text-red-900{--tw-text-opacity:1;color:rgb(190,24,93,var(--tw-text-opacity,1))} .text-white{--tw-text-opacity:1;color:rgb(255,255,255,var(--tw-text-opacity,1))} .underline{text-decoration-line:underline} .opacity-0{opacity:0} .opacity-5{opacity:.05} .opacity-50{opacity:.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 transparent),var(--tw-ring-shadow,0 0 transparent),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} .outline-none{outline:2px solid transparent;outline-offset:2px} .blur{--tw-blur:blur(8px)} .blur, .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)} .backdrop-blur-md{--tw-backdrop-blur:blur(12px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)} .transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)} .duration-300{transition-duration:.3s} :host, html{-webkit-tap-highlight-color:inherit!important} .active\\:raw-focus-ring-by: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(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529} .active\\:raw-focus-ring-by:active, .active\\:raw-focus-ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .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,1));--tw-ring-offset-width:2px}@media (min-width:732px){ .md\\:item-heading{font-size:1.25rem;letter-spacing:-.025em;line-height:1.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))}}@media (hover:hover) and (pointer:fine){ .td\\:hover-focus-ring:hover{outline:2px solid transparent;outline-offset:2px;--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width: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,.051)} .hover\\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(222,222,255,var(--tw-bg-opacity,1))} .hover\\:bg-yellow-1000:hover{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1))} .hover\\:text-charcoal:hover{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .hover\\:underline:hover{text-decoration-line:underline} .hover\\:decoration-2:hover{text-decoration-thickness:2px} .hover\\:underline-offset-\\[25\\%\\]:hover{text-underline-offset:25%} .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,1))} .focus-visible\\:border-gray-400:focus-visible{--tw-border-opacity:1;border-color:rgb(196,201,204,var(--tw-border-opacity,1))} .focus-visible\\:border-gray-800:focus-visible{--tw-border-opacity:1;border-color:rgb(93,99,107,var(--tw-border-opacity,1))} .focus-visible\\:bg-yellow-900:focus-visible{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1))} .focus-visible\\:text-charcoal:focus-visible{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .focus-visible\\:underline:focus-visible{text-decoration-line:underline} .focus-visible\\:decoration-2:focus-visible{text-decoration-thickness:2px} .focus-visible\\:underline-offset-\\[25\\%\\]:focus-visible{text-underline-offset:25%} .focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px} .focus-visible\\:ring-4: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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)} .focus-visible\\:ring-soft-blue:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1))} .focus-visible\\:ring-offset-4:focus-visible{--tw-ring-offset-width:4px} .focus-visible\\:duration-50:focus-visible{transition-duration:50ms} .active\\:bg-black-55:active, .active\\:bg-black-60:active{background-color:rgba(0,0,0,.102)} .active\\:bg-yellow-1100:active{--tw-bg-opacity:1;background-color:rgb(238,206,26,var(--tw-bg-opacity,1))} .active\\:text-charcoal:active{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .disabled\\:text-gray-40:disabled{--tw-text-opacity:1;color:rgb(142,147,153,var(--tw-text-opacity,1))} .disabled\\:hover\\:bg-white:hover:disabled{--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .group:hover .group-hover\\:underline{text-decoration-line:underline} .group.active .group-\\[\\.active\\]\\:border-b-2{border-bottom-width:2px}@media (min-width:732px){ .md\\:inset-0{inset:0} .md\\:top-20{top:5rem} .md\\:mb-2{margin-bottom:.5rem} .md\\:mb-4{margin-bottom:1rem} .md\\:mb-8{margin-bottom:2rem} .md\\:ml-0{margin-left:0} .md\\:mt-0{margin-top:0} .md\\:mt-14{margin-top:3.5rem} .md\\:block{display:block} .md\\:inline-block{display:inline-block} .md\\:flex{display:flex} .md\\:grid{display:grid} .md\\:hidden{display:none} .md\\:h-11{height:2.75rem} .md\\:h-5{height:1.25rem} .md\\:h-\\[13\\.5px\\]{height:13.5px} .md\\:h-fit{height:-moz-fit-content;height:fit-content} .md\\:max-h-\\[calc\\(100vh-128px\\)\\]{max-height:calc(100vh - 128px)} .md\\:max-h-\\[calc\\(100vh-128px-54px\\)\\]{max-height:calc(100vh - 182px)} .md\\:min-h-0{min-height:0} .md\\:min-h-\\[140px\\]{min-height:140px} .md\\:min-h-\\[164px\\]{min-height:164px} .md\\:w-1\\/2{width:50%} .md\\:w-11{width:2.75rem} .md\\:w-5{width:1.25rem} .md\\:w-\\[13\\.5px\\]{width:13.5px} .md\\:w-fit{width:-moz-fit-content;width:fit-content} .md\\:max-w-\\[calc\\(100vw-164px\\)\\]{max-width:calc(100vw - 164px)} .md\\:flex-none{flex:none} .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-start{align-items:flex-start} .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-4{gap:1rem} .md\\:gap-6{gap:1.5rem} .md\\:gap-x-4{-moz-column-gap:1rem;column-gap:1rem} .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-lg{border-radius:.5rem} .md\\:rounded-md{border-radius:.375rem} .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,1))} .md\\:\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))!important} .md\\:p-4{padding:1rem} .md\\:px-0{padding-left:0;padding-right:0} .md\\:px-4{padding-left:1rem;padding-right:1rem} .md\\:px-6{padding-left:1.5rem;padding-right:1.5rem} .md\\:px-\\[82px\\]{padding-left:82px;padding-right:82px} .md\\:pb-0{padding-bottom:0} .md\\:pl-13\\.2{padding-left:3.125rem} .md\\:pl-4{padding-left:1rem} .md\\:pr-4{padding-right:1rem} .md\\:pt-20\\.5{padding-top:5.125rem} .md\\:text-center{text-align:center} .md\\:text-lg{font-size:1.125rem;line-height:1.75rem} .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 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .md\\:\\[grid-template-columns\\:repeat\\(2\\,minmax\\(auto\\,304px\\)\\)\\]{grid-template-columns:repeat(2,minmax(auto,304px))}}@media (min-width:1196px){ .lg\\:left-16{left:4rem} .lg\\:right-16{right:4rem} .lg\\:flex{display:flex} .lg\\:hidden{display:none} .lg\\:max-h-\\[calc\\(100vh-192px\\)\\]{max-height:calc(100vh - 192px)} .lg\\:max-h-\\[calc\\(100vh-192px-54px\\)\\]{max-height:calc(100vh - 246px)} .lg\\:min-h-\\[224px\\]{min-height:224px} .lg\\:w-full{width:100%} .lg\\:max-w-\\[50\\%\\]{max-width:50%} .lg\\:max-w-\\[calc\\(100vw-248px\\)\\]{max-width:calc(100vw - 248px)} .lg\\:grow{flex-grow:1} .lg\\:basis-1\\/2{flex-basis:50%} .lg\\:justify-start{justify-content:flex-start} .lg\\:rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem} .lg\\:rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem} .lg\\:px-16{padding-left:4rem;padding-right:4rem} .lg\\:px-\\[128px\\]{padding-left:128px;padding-right:128px} .lg\\:py-24{padding-bottom:6rem;padding-top:6rem} .lg\\:pt-6{padding-top:1.5rem}}@media (hover:hover) and (pointer:fine){ .td\\:border-2{border-width:2px} .td\\:border-blue-900{--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .td\\:hover\\:cursor-grab:hover{cursor:grab} .td\\:hover\\:bg-black-50:hover{background-color:rgba(0,0,0,.051)} .td\\:hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))} .td\\:hover\\:text-soft-blue:hover{--tw-text-opacity:1;color:rgb(84,101,251,var(--tw-text-opacity,1))} .group:hover .td\\:group-hover\\:bg-black{--tw-bg-opacity:1;background-color:rgb(0,0,0,var(--tw-bg-opacity,1))} .group:hover .td\\:group-hover\\:opacity-5{opacity:.05}}@media (pointer:coarse){ .coarse\\:active\\:bg-yellow-900:active{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1))}}'
 };
 function InteractionBuilder($$anchor, $$props) {
   push($$props, true);