eat-js-sdk 2.1.8 → 2.2.1

package/dist/interaction-builder.mjs

@@ -5103,7 +5103,19 @@ const INTERACTION_TYPES = {
   MCQ: "multipleChoiceInteraction",
   TYPEIN: "typeInInteraction",
   CATEGORISE: "categoriseInteraction",
-  DROPDOWN: "dropdownInteraction"
+  DROPDOWN: "dropdownInteraction",
+  SELECTABLE_TEXT: "selectableTextInteraction"
+};
+const mapAPIToInteractionType = (apiType) => {
+  const { MCQ, CATEGORISE: CATEGORISE2, TYPEIN, DROPDOWN, SELECTABLE_TEXT } = INTERACTION_TYPES;
+  const typeMap = {
+    [MCQ]: "mcq",
+    [CATEGORISE2]: "categorise",
+    [TYPEIN]: "typein",
+    [DROPDOWN]: "dropdown",
+    [SELECTABLE_TEXT]: "selectableText"
+  };
+  return typeMap[apiType] ?? null;
 };
 const ANSWER_RESULTS = {
   CORRECT: "correct",
@@ -5127,15 +5139,6 @@ const DROPDOWN_INTERACTION = {
   RESIZE_DEBOUNCE_DELAY: 150,
   EMPTY_CHOICE: ""
 };
-const INTERACTION_TYPE_MAP = {
-  [INTERACTION_TYPES.MCQ]: "mcq",
-  [INTERACTION_TYPES.CATEGORISE]: "categorise",
-  [INTERACTION_TYPES.TYPEIN]: "typein",
-  [INTERACTION_TYPES.DROPDOWN]: "dropdown"
-};
-function mapInteractionType(legacyType) {
-  return INTERACTION_TYPE_MAP[legacyType] ?? legacyType;
-}
 const ALIGNMENT = {
   DEFAULT: "default",
   INLINE: "inline"
@@ -5173,10 +5176,9 @@ const loadData = async (sessionId, itemId, mode) => {
   throw new Error("No session ID or item ID provided");
 };
 const loadPreviewData = async (itemId, mode) => {
-  const isFinished = mode !== MODES.INTERACTIVE;
-  const isLocked = mode === MODES.PREVIEW;
-  let includeAnswer = `?include=[html_tags${isFinished && isLocked ? ",correct_answer" : ""}]`;
-  if (mode === MODES.INTERACTIVE) {
+  let includeAnswer = `?include=[html_tags,correct_answer]`;
+  const isInteractive = mode === MODES.INTERACTIVE;
+  if (isInteractive) {
     includeAnswer = "?include=[html_tags,correct_answer,unpublished]&is_contentful_preview=true";
   }
   const { data } = await useGet(`items/${itemId}${includeAnswer}`);
@@ -5184,78 +5186,58 @@ const loadPreviewData = async (itemId, mode) => {
   return {
     ...data,
     mode,
-    isFinished,
-    isLocked,
+    isFinished: !isInteractive,
+    isLocked: !isInteractive,
     scoringMetadata
   };
 };
 const generatePreviewScoringMetadata = (data) => {
-  if (!data.interaction) return null;
   const { interaction } = data;
-  const { type, options } = interaction;
-  if (type === "multipleChoiceInteraction" && options) {
-    const correctAnswerIds = [];
+  const { type } = interaction;
+  if (type === "multipleChoiceInteraction") {
+    const mcqInteraction = interaction;
+    const options = mcqInteraction.options;
+    const mcqCorrectAnswerIds = [];
     Object.values(options).forEach((option) => {
       if (option.correct_choice === true) {
-        correctAnswerIds.push(option.id);
+        mcqCorrectAnswerIds.push(option.id);
       }
     });
     return {
-      hasAnswer: true,
-      correctAnswerIds,
-      answerIds: [],
-      // No student answers in preview
-      interactionType: type
+      correctAnswerIds: mcqCorrectAnswerIds
     };
   }
   if (type === "typeInInteraction") {
-    const correctAnswer = interaction.correct_answer || [];
-    const typeinType = String(interaction.typein_type || "short").toLowerCase();
-    let answer = [];
-    const isInline = typeinType.includes("inline") || typeinType === "Inline Text";
-    if (isInline) {
-      answer = correctAnswer.map((blankAnswers) => {
-        if (Array.isArray(blankAnswers)) {
-          return blankAnswers[0] || "";
-        }
-        return String(blankAnswers || "");
-      });
-    } else {
-      if (Array.isArray(correctAnswer) && correctAnswer.length > 0) {
-        const firstAnswerObj = correctAnswer[0];
-        if (typeof firstAnswerObj === "object" && firstAnswerObj !== null && !Array.isArray(firstAnswerObj)) {
-          if (Array.isArray(firstAnswerObj.sample_answer) && firstAnswerObj.sample_answer.length > 0) {
-            answer = [firstAnswerObj.sample_answer[0]];
-          } else if (Array.isArray(firstAnswerObj.patterns) && firstAnswerObj.patterns.length > 0) {
-            answer = [firstAnswerObj.patterns[0]];
-          } else {
-            answer = [""];
+    const typeInInteraction = interaction;
+    const typeinCorrectAnswer = typeInInteraction.correct_answer || [];
+    const typeinType = typeInInteraction.typein_type.toLowerCase();
+    let typeinAnswer = [];
+    const shortAndInlineAnswer = Array.isArray(typeinCorrectAnswer) && typeinCorrectAnswer.length > 0 && Array.isArray(typeinCorrectAnswer[0]);
+    if (shortAndInlineAnswer) {
+      const isInline = typeinType === "inline text";
+      if (isInline) {
+        for (const blankAnswers of typeinCorrectAnswer) {
+          if (Array.isArray(blankAnswers) && blankAnswers.length > 0) {
+            typeinAnswer.push(blankAnswers[0]);
           }
-        } else if (Array.isArray(firstAnswerObj)) {
-          answer = [firstAnswerObj[0] || ""];
-        } else {
-          answer = [String(firstAnswerObj || "")];
         }
+      } else {
+        typeinAnswer = [typeinCorrectAnswer[0][0]];
       }
+    } else {
+      typeinAnswer = typeinCorrectAnswer[0].sample_answer;
     }
     return {
-      hasAnswer: true,
-      answer,
-      correct_answer: correctAnswer,
-      interactionType: type
+      answer: typeinAnswer,
+      correct_answer: typeinCorrectAnswer
     };
   }
   if (type === "categoriseInteraction") {
-    const correctAnswer = interaction.correct_answer;
-    if (!correctAnswer || !Array.isArray(correctAnswer)) {
-      return {
-        hasAnswer: false,
-        interactionType: type
-      };
-    }
+    const categoriseInteraction = interaction;
+    const categoriseCorrectAnswer = categoriseInteraction.correct_answer;
     const answerList = {};
-    correctAnswer.forEach((entry) => {
-      const matchingCategory = interaction.category_groups?.find(
+    categoriseCorrectAnswer?.forEach((entry) => {
+      const matchingCategory = categoriseInteraction.category_groups.find(
         (cat) => cat.name === entry.category_name || cat.id === entry.id
       );
       if (matchingCategory && entry.correct_answer_list && Array.isArray(entry.correct_answer_list)) {
@@ -5270,30 +5252,33 @@ const generatePreviewScoringMetadata = (data) => {
         answerList[matchingCategory.id] = itemIds;
       }
     });
-    return {
-      hasAnswer: true,
-      answerList,
-      interactionType: type
-    };
+    return { answerList };
   }
-  if (type === "dropdownInteraction" && options) {
+  if (type === "dropdownInteraction") {
+    const dropdownInteraction = interaction;
+    const options = dropdownInteraction.options;
     const answer = [];
     Object.values(options).forEach((option) => {
-      const correctAnswers = option.correct_answers || [];
-      const firstCorrect = correctAnswers[0] || "";
+      const correctAnswers = option.correct_answers;
       answer.push({
         id: option.id,
-        choice: firstCorrect
+        choice: correctAnswers[0]
       });
     });
     return {
-      hasAnswer: true,
       answer,
-      correctAnswer: options,
-      interactionType: type
+      correctAnswer: options
     };
   }
-  return null;
+  if (type === "selectableTextInteraction") {
+    const selectableTextInteraction = interaction;
+    const correctAnswers = selectableTextInteraction.correct_answers || [];
+    const correctAnswerIds = correctAnswers.map((answer) => answer.id);
+    return {
+      correctAnswerIds
+    };
+  }
+  throw new Error(`Unsupported interaction type: ${type}, cannot generate preview metadata.`);
 };
 const loadSessionData = async (sessionId, mode) => {
   const skipUserValidationStr = get(skipUserValidation) ? "&skip_user_validation=true" : "";
@@ -5315,13 +5300,10 @@ const loadSessionData = async (sessionId, mode) => {
   }
   return {
     ...item,
-    sessionId,
     totalCorrectAnswers,
     metadata,
     isFinished: Boolean(isFinished),
-    // Convert 1/0 to true/false
     isLocked: Boolean(isLocked),
-    // Convert 1/0 to true/false
     mode
   };
 };
@@ -5351,13 +5333,13 @@ const useSetupAPI = () => {
     interactionWidth.set(interactionWidthValue);
   }
 };
-var root$m = /* @__PURE__ */ from_html(`<div><div class="animate-skeleton w-full h-6 mb-2 rounded md:mb-4"></div> <div class="animate-skeleton w-full h-6 mb-12 rounded"></div> <div class="animate-skeleton w-full h-52 rounded"></div></div>`);
+var root$n = /* @__PURE__ */ from_html(`<div><div class="animate-skeleton w-full h-6 mb-2 rounded md:mb-4"></div> <div class="animate-skeleton w-full h-6 mb-12 rounded"></div> <div class="animate-skeleton w-full h-52 rounded"></div></div>`);
 function CommonSkeleton($$anchor) {
-  var div = root$m();
+  var div = root$n();
   append($$anchor, div);
 }
 create_custom_element(CommonSkeleton, {}, [], [], true);
-var root$l = /* @__PURE__ */ from_html(`<p class="p-2 border-2 border-red-600 bg-red-200 rounded"> </p>`);
+var root$m = /* @__PURE__ */ from_html(`<p class="p-2 border-2 border-red-600 bg-red-200 rounded"> </p>`);
 function InvalidBanner($$anchor, $$props) {
   push($$props, true);
   let bannerLabel = prop($$props, "bannerLabel", 7, "Invalid.");
@@ -5370,7 +5352,7 @@ function InvalidBanner($$anchor, $$props) {
       flushSync();
     }
   };
-  var p = root$l();
+  var p = root$m();
   var text = child(p, true);
   reset(p);
   template_effect(() => set_text(text, bannerLabel()));
@@ -5672,7 +5654,7 @@ const svgIconRegistry = {
   }
 };
 var root_1$n = /* @__PURE__ */ from_svg(`<path></path>`);
-var root$k = /* @__PURE__ */ from_svg(`<svg xmlns="http://www.w3.org/2000/svg"><!></svg>`);
+var root$l = /* @__PURE__ */ from_svg(`<svg xmlns="http://www.w3.org/2000/svg"><!></svg>`);
 function SvgLoader($$anchor, $$props) {
   push($$props, true);
   let width = prop($$props, "width", 7, void 0), height = prop($$props, "height", 7, void 0), svgName = prop($$props, "svgName", 7), className = prop($$props, "className", 7, void 0), dataTestId = prop($$props, "dataTestId", 7);
@@ -5726,7 +5708,7 @@ function SvgLoader($$anchor, $$props) {
       flushSync();
     }
   };
-  var svg = root$k();
+  var svg = root$l();
   var node = child(svg);
   {
     var consequent = ($$anchor2) => {
@@ -5768,7 +5750,7 @@ create_custom_element(
   [],
   true
 );
-var root$j = /* @__PURE__ */ from_html(`<span><!></span>`);
+var root$k = /* @__PURE__ */ from_html(`<span><!></span>`);
 function ResultIcon($$anchor, $$props) {
   push($$props, true);
   let isCorrect = prop($$props, "isCorrect", 7), iconType = prop($$props, "iconType", 7, "result"), parentProps = prop($$props, "parentProps", 7);
@@ -5798,7 +5780,7 @@ function ResultIcon($$anchor, $$props) {
       flushSync();
     }
   };
-  var span = root$j();
+  var span = root$k();
   var node = child(span);
   SvgLoader(node, {
     get svgName() {
@@ -5817,7 +5799,7 @@ function ResultIcon($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(ResultIcon, { isCorrect: {}, iconType: {}, parentProps: {} }, [], [], true);
-var root_3$c = /* @__PURE__ */ from_html(`<span class="sr-only">Alert. &nbsp;</span>`);
+var root_3$e = /* @__PURE__ */ from_html(`<span class="sr-only">Alert. &nbsp;</span>`);
 var root_1$m = /* @__PURE__ */ from_html(`<div data-testid="feedback-alt"><!> <div><!> <span><!></span></div></div>`);
 function FeedbackAlert($$anchor, $$props) {
   push($$props, true);
@@ -5910,7 +5892,7 @@ function FeedbackAlert($$anchor, $$props) {
       var node_2 = child(div_1);
       {
         var consequent_1 = ($$anchor3) => {
-          var span = root_3$c();
+          var span = root_3$e();
           append($$anchor3, span);
         };
         if_block(node_2, ($$render) => {
@@ -6245,7 +6227,7 @@ const useFocusTrap = () => {
     handleTabKey
   };
 };
-var root$i = /* @__PURE__ */ from_html(`<dialog aria-modal="true" class="bg-transparent max-w-none max-h-none w-screen h-screen"><div role="button" aria-hidden="true"></div> <!></dialog>`);
+var root$j = /* @__PURE__ */ from_html(`<dialog aria-modal="true" class="bg-transparent max-w-none max-h-none w-screen h-screen"><div role="button" aria-hidden="true"></div> <!></dialog>`);
 function CommonModal($$anchor, $$props) {
   push($$props, true);
   let modalData = prop($$props, "modalData", 23, () => ({ modalAriaLabel: "", isModalOpen: false })), modalClass = prop($$props, "modalClass", 7, ""), onupdateModalSettings = prop($$props, "onupdateModalSettings", 7), onclose = prop($$props, "onclose", 7), children = prop($$props, "children", 7), dataTestId = prop($$props, "dataTestId", 7);
@@ -6329,7 +6311,7 @@ function CommonModal($$anchor, $$props) {
       flushSync();
     }
   };
-  var dialog = root$i();
+  var dialog = root$j();
   dialog.__keydown = handleFocusTrap;
   var div = child(dialog);
   div.__click = clickModalBackground;
@@ -6379,7 +6361,7 @@ function fade(node, { delay = 0, duration = 400, easing = linear } = {}) {
   };
 }
 var root_1$l = /* @__PURE__ */ from_html(`<div><div role="tooltip" data-testid="img-viewer-tt"> <span aria-hidden="true"></span></div></div>`);
-var root$h = /* @__PURE__ */ from_html(`<div class="relative inline-block"><!> <!></div>`);
+var root$i = /* @__PURE__ */ from_html(`<div class="relative inline-block"><!> <!></div>`);
 function CommonTooltip($$anchor, $$props) {
   push($$props, true);
   let text = prop($$props, "text", 7), placement = prop($$props, "placement", 7, "bottom"), open = prop($$props, "open", 7, void 0), disabled = prop($$props, "disabled", 7, false), trigger = prop($$props, "trigger", 7, "hover"), tooltipClass = prop($$props, "tooltipClass", 7, ""), showDelay = prop($$props, "showDelay", 7, 80), hideDelay = prop($$props, "hideDelay", 7, 120), children = prop($$props, "children", 7);
@@ -6557,7 +6539,7 @@ function CommonTooltip($$anchor, $$props) {
       flushSync();
     }
   };
-  var div = root$h();
+  var div = root$i();
   div.__focusin = scheduleShow;
   div.__focusout = scheduleHide;
   div.__touchstart = handleTouchStart;
@@ -6624,7 +6606,7 @@ create_custom_element(
   true
 );
 var root_1$k = /* @__PURE__ */ from_html(`<span><!></span>`);
-var root$g = /* @__PURE__ */ from_html(`<button><!></button>`);
+var root$h = /* @__PURE__ */ from_html(`<button><!></button>`);
 function CommonButton($$anchor, $$props) {
   push($$props, true);
   let ariaLabel = prop($$props, "ariaLabel", 7, ""), ariaHaspopup = prop($$props, "ariaHaspopup", 7), className = prop($$props, "className", 7, ""), disabled = prop($$props, "disabled", 7, false), pressed = prop($$props, "pressed", 7, false), transparent = prop($$props, "transparent", 7, false), variant = prop($$props, "variant", 7, "standard"), type = prop($$props, "type", 7, "button"), tabindex = prop($$props, "tabindex", 7, 0), onclick = prop($$props, "onclick", 7), children = prop($$props, "children", 7), dataTestId = prop($$props, "dataTestId", 7);
@@ -6723,7 +6705,7 @@ function CommonButton($$anchor, $$props) {
       flushSync();
     }
   };
-  var button = root$g();
+  var button = root$h();
   let classes;
   button.__click = function(...$$args) {
     onclick()?.apply(this, $$args);
@@ -6940,9 +6922,9 @@ function useImageModalSize() {
     calculateStimulusImageLayout
   };
 }
-var root_3$b = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
+var root_3$d = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
 var root_4$7 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
-var root_5$7 = /* @__PURE__ */ from_html(`<div><span aria-hidden="true"><!></span></div>`);
+var root_5$8 = /* @__PURE__ */ from_html(`<div><span aria-hidden="true"><!></span></div>`);
 var root_8$5 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
 var root_9$3 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
 var root_2$d = /* @__PURE__ */ from_html(`<div class="absolute inset-0 m-0"><div class="w-full h-full px-0 md:px-[82px] lg:px-[128px] pt-14 pb-[72px] relative lg:py-24 flex flex-col items-center justify-center"><div aria-live="polite" aria-atomic="true" class="sr-only"> </div> <div class="w-full h-full flex flex-col md:flex-row md:justify-center items-center justify-between"><div class="md:hidden"></div> <!> <!> <div><div class="flex-shrink-0 flex items-center justify-between py-1 px-2 md:px-4 border-border-minimal border rounded-t-md lg:rounded-t-lg md:gap-4 h-8.5 md:h-fit"><!> <!> <!></div> <div class="rounded-b-md"><img class="mx-auto block rounded-b-md lg:rounded-b-lg object-contain max-w-full max-h-[calc(100vh-168px-34px)] md:max-h-[calc(100vh-128px-54px)] lg:max-h-[calc(100vh-192px-54px)] pointer-events-none"/></div></div> <div class="md:hidden flex justify-center items-center gap-1 flex-shrink-0 h-6 mt-4"><!> <!></div></div></div></div>`);
@@ -7170,7 +7152,7 @@ function MCQImageModal($$anchor, $$props) {
               dataTestId: "img-viewer-prev",
               onclick: navigatePrevious,
               children: ($$anchor4, $$slotProps2) => {
-                var span = root_3$b();
+                var span = root_3$d();
                 var node_2 = child(span);
                 SvgLoader(node_2, {
                   svgName: "smallChevronLeft",
@@ -7226,7 +7208,7 @@ function MCQImageModal($$anchor, $$props) {
                 return get$1(fullAnswerText);
               },
               children: ($$anchor4, $$slotProps2) => {
-                var div_6 = root_5$7();
+                var div_6 = root_5$8();
                 var span_2 = child(div_6);
                 var node_6 = child(span_2);
                 {
@@ -7514,7 +7496,7 @@ function PromptSection($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(PromptSection, { prompt: {} }, [], [], true);
-var root$f = /* @__PURE__ */ from_html(`<div class="interaction-section"><!></div>`);
+var root$g = /* @__PURE__ */ from_html(`<div class="interaction-section"><!></div>`);
 function InteractionSection($$anchor, $$props) {
   push($$props, true);
   let children = prop($$props, "children", 7);
@@ -7527,7 +7509,7 @@ function InteractionSection($$anchor, $$props) {
       flushSync();
     }
   };
-  var div = root$f();
+  var div = root$g();
   var node = child(div);
   snippet(node, () => children() ?? noop);
   reset(div);
@@ -7535,9 +7517,9 @@ function InteractionSection($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(InteractionSection, { children: {} }, [], [], true);
-var root_5$6 = /* @__PURE__ */ from_html(`<div></div>`);
+var root_5$7 = /* @__PURE__ */ from_html(`<div></div>`);
 var root_4$6 = /* @__PURE__ */ from_html(`<div class="px-4 w-full max-w-[1008px] mx-auto flex-shrink-0 text-center font-semibold text-sm md:text-lg leading-[150%] text-white" aria-hidden="true" data-testid="img-viewer-cap-txt"> </div> <!>`, 1);
-var root_7$4 = /* @__PURE__ */ from_html(`<div></div>`);
+var root_7$5 = /* @__PURE__ */ from_html(`<div></div>`);
 var root_2$c = /* @__PURE__ */ from_html(`<div class="absolute inset-0"><div class="w-full h-full flex items-center justify-center pt-14 pb-[72px] lg:py-24"><div aria-live="polite" aria-atomic="true" class="sr-only"> </div> <div class="flex flex-col items-center overflow-y-auto overflow-x-hidden w-full px-0 md:px-6 lg:px-16"><div class="relative bg-white rounded-md md:rounded-lg shadow-sm overflow-hidden flex-shrink-0"><img class="block object-contain w-full h-auto max-w-full mx-auto"/> <!></div> <!></div></div></div>`);
 function PromptStimulusImageModal($$anchor, $$props) {
   push($$props, true);
@@ -7709,7 +7691,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
               var node_3 = sibling(div_5, 2);
               {
                 var consequent = ($$anchor5) => {
-                  var div_6 = root_5$6();
+                  var div_6 = root_5$7();
                   template_effect(() => set_style(div_6, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
                   append($$anchor5, div_6);
                 };
@@ -7728,7 +7710,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
               var node_4 = first_child(fragment_4);
               {
                 var consequent_2 = ($$anchor5) => {
-                  var div_7 = root_7$4();
+                  var div_7 = root_7$5();
                   template_effect(() => set_style(div_7, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
                   append($$anchor5, div_7);
                 };
@@ -8076,35 +8058,64 @@ const singleColumnTemplate = {
   matches: () => true,
   // Fallback
   build: (context) => {
+    const isSelectableText = context.interactionType === INTERACTION_TYPES.SELECTABLE_TEXT;
     const allSections = [
-      { name: "rubric", component: "rubric" },
+      {
+        name: "rubric",
+        component: "rubric",
+        classes: isSelectableText ? ["max-w-[864px]"] : void 0
+      },
       {
         name: "stimulus-inline-text-first",
         component: "stimulus-text",
-        condition: context.stimulusData.hasText && context.stimulusData.stimulusTextAlignment === "inline" && context.stimulusData.stimulusLayoutOrder === "text first"
+        condition: !isSelectableText && context.stimulusData.hasText && context.stimulusData.stimulusTextAlignment === "inline" && context.stimulusData.stimulusLayoutOrder === "text first"
       },
       {
         name: "stimulus-inline-media",
         component: "stimulus-media",
-        condition: context.stimulusData.hasMedia && context.stimulusData.fileAlignment === "inline"
+        condition: !isSelectableText && context.stimulusData.hasMedia && context.stimulusData.fileAlignment === "inline"
       },
       {
         name: "stimulus-inline-text-second",
         component: "stimulus-text",
-        condition: context.stimulusData.hasText && context.stimulusData.stimulusTextAlignment === "inline" && context.stimulusData.stimulusLayoutOrder === "media first"
+        condition: !isSelectableText && context.stimulusData.hasText && context.stimulusData.stimulusTextAlignment === "inline" && context.stimulusData.stimulusLayoutOrder === "media first"
       },
-      { name: "prompt", component: "prompt" },
-      { name: "divider", component: "divider", condition: context.hasDivider },
-      { name: "interaction", component: "slot", slot: "interaction" },
-      { name: "divider-bottom", component: "divider-bottom", condition: context.hasDividerBottom },
-      { name: "feedback", component: "slot", slot: "feedback" }
+      {
+        name: "prompt",
+        component: "prompt",
+        classes: isSelectableText ? ["max-w-[864px]"] : void 0
+      },
+      {
+        name: "divider",
+        component: "divider",
+        condition: context.hasDivider,
+        classes: isSelectableText ? ["max-w-[864px]"] : void 0
+      },
+      {
+        name: "interaction",
+        component: "slot",
+        slot: "interaction"
+      },
+      {
+        name: "divider-bottom",
+        component: "divider-bottom",
+        condition: context.hasDividerBottom,
+        classes: isSelectableText ? ["max-w-[864px]"] : void 0
+      },
+      {
+        name: "feedback",
+        component: "slot",
+        slot: "feedback",
+        classes: isSelectableText ? ["max-w-[864px]"] : void 0
+      }
     ];
     const order = getSingleColumnOrder(context.interactionType);
     const sections = reorderSections(allSections, order);
+    const containerStyles = { "--interactionWidthValue": context.interactionWidthValue };
     return {
       sections,
       containerClasses: ["container-class"],
-      containerStyles: { "--interactionWidthValue": context.interactionWidthValue }
+      containerStyles
     };
   }
 };
@@ -8134,7 +8145,12 @@ const fullWidthStimulusTextTemplate = {
       { name: "prompt", component: "prompt", classes: ["lg:max-w-[50%]"] },
       { name: "divider", component: "divider", condition: context.hasDivider, classes: ["lg:max-w-[50%]"] },
       { name: "interaction", component: "slot", slot: "interaction", classes: ["lg:max-w-[50%]"] },
-      { name: "divider-bottom", component: "divider-bottom", condition: context.hasDividerBottom, classes: ["lg:max-w-[50%]"] },
+      {
+        name: "divider-bottom",
+        component: "divider-bottom",
+        condition: context.hasDividerBottom,
+        classes: ["lg:max-w-[50%]"]
+      },
       { name: "feedback", component: "slot", slot: "feedback", classes: ["lg:max-w-[50%]"] }
     ];
     const order = getSingleColumnOrder(context.interactionType);
@@ -8158,7 +8174,7 @@ const shouldRenderSection = (section) => section.condition !== false;
 const getClassString = (classes = []) => classes.join(" ");
 const getStyleString = (styles = {}) => Object.entries(styles).map(([k, v]) => `${k}:${v}`).join(";");
 var root_4$5 = /* @__PURE__ */ from_html(`<p class="text-lg leading-[22px] text-blue-1000 font-semibold mt-4" data-testid="img-cap-txt"> </p>`);
-var root_5$5 = /* @__PURE__ */ from_html(`<div class="mt-6 w-full"><button class="flex items-center font-semibold leading-[1.5] outline-none group w-fit h-11 text-charcoal" aria-controls="long-description-content" aria-labelledby="image-description-label" type="button"><div class="w-6 h-6 flex items-center justify-center mr-2" data-testid="img-desc-txt"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content" data-testid="img-desc-txt"><!></div></div>`);
+var root_5$6 = /* @__PURE__ */ from_html(`<div class="mt-6 w-full"><button class="flex items-center font-semibold leading-[1.5] outline-none group w-fit h-11 text-charcoal" aria-controls="long-description-content" aria-labelledby="image-description-label" type="button"><div class="w-6 h-6 flex items-center justify-center mr-2" data-testid="img-desc-txt"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content" data-testid="img-desc-txt"><!></div></div>`);
 var root_2$b = /* @__PURE__ */ from_html(`<div class="flex flex-col justify-center items-center text-center"><div class="flex flex-col items-center"><div class="relative inline-block"><img/> <!></div> <!></div></div> <!>`, 1);
 var root_1$j = /* @__PURE__ */ from_html(`<div class="w-full"><!></div>`);
 function CommonMedia($$anchor, $$props) {
@@ -8291,7 +8307,7 @@ function CommonMedia($$anchor, $$props) {
           var node_4 = sibling(div_1, 2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_4 = root_5$5();
+              var div_4 = root_5$6();
               var button = child(div_4);
               button.__click = toggleLongDescription;
               button.__keydown = handleKeyDown;
@@ -8380,11 +8396,11 @@ create_custom_element(
   true
 );
 var root_4$4 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
-var root_5$4 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
-var root_3$a = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-var root_7$3 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
+var root_5$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
+var root_3$c = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_7$4 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
 var root_8$4 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
-var root_6$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_6$3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_1$i = /* @__PURE__ */ from_html(`<div class="stimulus-section flex flex-col w-full"><!> <div><!></div></div>`);
 function StimulusSection($$anchor, $$props) {
   push($$props, true);
@@ -8473,7 +8489,7 @@ function StimulusSection($$anchor, $$props) {
       var node_2 = child(div_1);
       {
         var consequent_3 = ($$anchor3) => {
-          var fragment_2 = root_3$a();
+          var fragment_2 = root_3$c();
           var node_3 = first_child(fragment_2);
           {
             var consequent_1 = ($$anchor4) => {
@@ -8498,7 +8514,7 @@ function StimulusSection($$anchor, $$props) {
           var node_5 = sibling(node_3, 2);
           {
             var consequent_2 = ($$anchor4) => {
-              var div_3 = root_5$4();
+              var div_3 = root_5$5();
               let classes_2;
               var node_6 = child(div_3);
               CommonMedia(node_6, {
@@ -8533,11 +8549,11 @@ function StimulusSection($$anchor, $$props) {
           append($$anchor3, fragment_2);
         };
         var alternate = ($$anchor3) => {
-          var fragment_3 = root_6$2();
+          var fragment_3 = root_6$3();
           var node_7 = first_child(fragment_3);
           {
             var consequent_4 = ($$anchor4) => {
-              var div_4 = root_7$3();
+              var div_4 = root_7$4();
               let classes_3;
               var node_8 = child(div_4);
               CommonMedia(node_8, {
@@ -8622,11 +8638,11 @@ create_custom_element(
   true
 );
 var root_8$3 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
-var root_13 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
-var root_15 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
+var root_13$1 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
+var root_15$1 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
 var root_1$h = /* @__PURE__ */ from_html(`<div><!></div>`);
-var root_16$1 = /* @__PURE__ */ from_html(`<div><!></div>`);
-var root$e = /* @__PURE__ */ from_html(`<div class="prompt-container"><div><div></div> <!></div></div> <!>`, 1);
+var root_16$2 = /* @__PURE__ */ from_html(`<div><!></div>`);
+var root$f = /* @__PURE__ */ from_html(`<div class="prompt-container"><div><div></div> <!></div></div> <!>`, 1);
 function PromptContainer($$anchor, $$props) {
   push($$props, true);
   let rubric = prop($$props, "rubric", 7, ""), prompt = prop($$props, "prompt", 7, ""), interactionType = prop($$props, "interactionType", 7), hasDivider = prop($$props, "hasDivider", 7, true), hasDividerBottom = prop($$props, "hasDividerBottom", 7, false), stimulus = prop($$props, "stimulus", 7, null), optionHasMedia = prop($$props, "optionHasMedia", 7, false), interaction = prop($$props, "interaction", 7), feedback = prop($$props, "feedback", 7);
@@ -8748,7 +8764,7 @@ function PromptContainer($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment = root$e();
+  var fragment = root$f();
   var div = first_child(fragment);
   var div_1 = child(div);
   var div_2 = child(div_1);
@@ -8823,7 +8839,7 @@ function PromptContainer($$anchor, $$props) {
                         var node_6 = first_child(fragment_10);
                         {
                           var consequent_5 = ($$anchor8) => {
-                            var div_5 = root_13();
+                            var div_5 = root_13$1();
                             append($$anchor8, div_5);
                           };
                           var alternate = ($$anchor8) => {
@@ -8831,7 +8847,7 @@ function PromptContainer($$anchor, $$props) {
                             var node_7 = first_child(fragment_11);
                             {
                               var consequent_6 = ($$anchor9) => {
-                                var div_6 = root_15();
+                                var div_6 = root_15$1();
                                 var node_8 = child(div_6);
                                 snippet(node_8, () => feedback() ?? noop);
                                 reset(div_6);
@@ -8924,7 +8940,7 @@ function PromptContainer($$anchor, $$props) {
   var node_9 = sibling(div_2, 2);
   {
     var consequent_7 = ($$anchor2) => {
-      var div_7 = root_16$1();
+      var div_7 = root_16$2();
       var node_10 = child(div_7);
       StimulusSection(node_10, {
         get stimulusData() {
@@ -9011,13 +9027,13 @@ create_custom_element(
 );
 var root_1$g = /* @__PURE__ */ from_html(`<p class="text-charcoal text-sm leading-[19.2px] mb-2"> </p>`);
 var root_2$a = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5"> </span>`);
-var root_3$9 = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5">Missing answer:</span>`);
+var root_3$b = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5">Missing answer:</span>`);
 var root_4$3 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="text-green-900 mr-1"><!></span>`);
-var root_5$3 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
+var root_5$4 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
 var root_9$2 = /* @__PURE__ */ from_html(`<span class="w-3 h-2 flex items-center justify-center"><!></span>`);
 var root_8$2 = /* @__PURE__ */ from_html(`<span><!></span>`);
-var root_10$2 = /* @__PURE__ */ from_html(`<div class="w-full overflow-hidden bg-white rounded-b-lg flex items-center justify-center relative"><img class="mcq-opt-img min-h-[154px] max-h-[184px] w-auto max-w-full object-contain pointer-events-none" data-testid="mcq-opt-img" loading="lazy"/></div>`);
-var root$d = /* @__PURE__ */ from_html(`<!> <div class="relative"><button><span><span class="flex items-center justify-between w-full"><span class="flex items-center"><span> </span> <span class="flex flex-col px-3 text-left"><!> <!> <!></span></span> <span class="flex items-center"><!> <!> <!></span></span></span> <!></button> <!></div>`, 1);
+var root_10$3 = /* @__PURE__ */ from_html(`<div class="w-full overflow-hidden bg-white rounded-b-lg flex items-center justify-center relative"><img class="mcq-opt-img min-h-[154px] max-h-[184px] w-auto max-w-full object-contain pointer-events-none" data-testid="mcq-opt-img" loading="lazy"/></div>`);
+var root$e = /* @__PURE__ */ from_html(`<!> <div class="relative"><button><span><span class="flex items-center justify-between w-full"><span class="flex items-center"><span> </span> <span class="flex flex-col px-3 text-left"><!> <!> <!></span></span> <span class="flex items-center"><!> <!> <!></span></span></span> <!></button> <!></div>`, 1);
 function MCQOption($$anchor, $$props) {
   push($$props, true);
   let option = prop($$props, "option", 7), index2 = prop($$props, "index", 7), config = prop($$props, "config", 7), state2 = prop($$props, "state", 7), optionHasMedia = prop($$props, "optionHasMedia", 7, false), onOptionClick = prop($$props, "onOptionClick", 7), onExpandImage = prop($$props, "onExpandImage", 7);
@@ -9105,7 +9121,7 @@ function MCQOption($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment = root$d();
+  var fragment = root$e();
   var node = first_child(fragment);
   {
     var consequent = ($$anchor2) => {
@@ -9145,7 +9161,7 @@ function MCQOption($$anchor, $$props) {
   var node_2 = sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var span_6 = root_3$9();
+      var span_6 = root_3$b();
       append($$anchor2, span_6);
     };
     if_block(node_2, ($$render) => {
@@ -9182,7 +9198,7 @@ function MCQOption($$anchor, $$props) {
   var node_6 = sibling(node_4, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var span_9 = root_5$3();
+      var span_9 = root_5$4();
       var node_7 = child(span_9);
       {
         var consequent_4 = ($$anchor3) => {
@@ -9249,7 +9265,7 @@ function MCQOption($$anchor, $$props) {
   var node_11 = sibling(span, 2);
   {
     var consequent_8 = ($$anchor2) => {
-      var div_1 = root_10$2();
+      var div_1 = root_10$3();
       var img = child(div_1);
       reset(div_1);
       template_effect(() => {
@@ -9447,8 +9463,8 @@ create_custom_element(
   [],
   true
 );
-var root_3$8 = /* @__PURE__ */ from_html(`<div aria-live="polite" class="mb-6"><!></div>`);
-var root$c = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_3$a = /* @__PURE__ */ from_html(`<div aria-live="polite" class="mb-6"><!></div>`);
+var root$d = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 function MCQComponent($$anchor, $$props) {
   push($$props, true);
   let api = prop($$props, "api", 7), config = prop($$props, "config", 7), isDataSaving = prop($$props, "isDataSaving", 7, false), onstateChange = prop($$props, "onstateChange", 7);
@@ -9562,7 +9578,7 @@ function MCQComponent($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment = root$c();
+  var fragment = root$d();
   var node = first_child(fragment);
   {
     const interaction = ($$anchor2) => {
@@ -9585,7 +9601,7 @@ function MCQComponent($$anchor, $$props) {
       var node_1 = first_child(fragment_2);
       {
         var consequent = ($$anchor3) => {
-          var div = root_3$8();
+          var div = root_3$a();
           var node_2 = child(div);
           MCQFeedback(node_2, {
             get feedbackState() {
@@ -9666,8 +9682,8 @@ function MCQComponent($$anchor, $$props) {
 }
 create_custom_element(MCQComponent, { api: {}, config: {}, isDataSaving: {}, onstateChange: {} }, [], [], true);
 const useSharedState = (loadedData) => {
-  const interactions = loadedData.metadata?.interactions;
-  const lastEvent = interactions && interactions.length > 0 ? interactions[interactions.length - 1] : void 0;
+  const events = loadedData.metadata?.interactions?.events;
+  const lastEvent = events && events.length > 0 ? events[events.length - 1] : void 0;
   const getIsFinished = () => loadedData.isFinished === true;
   const getIsLocked = () => loadedData.isLocked === true;
   const getHasLastEvent = () => !!lastEvent;
@@ -9749,7 +9765,7 @@ const useSharedState = (loadedData) => {
   };
 };
 const isCategoriseEvent = (event2) => {
-  return event2 !== void 0 && "answer_list" in event2;
+  return event2 !== void 0 && event2 !== null && typeof event2 === "object" && "answer_list" in event2;
 };
 const createMCQInteraction = (config, sessionData) => {
   const getCorrectOptions = () => config.correctAnswerIds || Object.values(config.options).filter((opt) => opt.correct_choice).map((opt) => opt.id);
@@ -10046,7 +10062,7 @@ function shouldSaveTextAnswer(currentAnswer, latestAnswer, isDataSaving) {
 }
 var root_1$e = /* @__PURE__ */ from_html(`<label class="inline-txb-lbl absolute left-0 top-0 bottom-0" data-testid="inline-txb-lbl" aria-hidden="true"><span class="absolute inset-0 bg-black opacity-5 rounded-l-lg w-8.5 h-10.5 top-1"></span> <span class="absolute font-semibold text-base leading-[19px] text-charcoal px-3 inline-block pt-[15px]"> </span></label>`);
 var root_2$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 absolute right-4 top-3.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root$b = /* @__PURE__ */ from_html(`<span><!> <input data-testid="input-inline-txb" placeholder="Type your answer here" autocomplete="off"/> <!></span>`);
+var root$c = /* @__PURE__ */ from_html(`<span><!> <input data-testid="input-inline-txb" placeholder="Type your answer here" autocomplete="off"/> <!></span>`);
 function TypeInInlineField($$anchor, $$props) {
   push($$props, true);
   let index2 = prop($$props, "index", 7), value = prop($$props, "value", 15), readonly = prop($$props, "readonly", 7, false), showStatus = prop($$props, "showStatus", 7, false), isCorrect = prop($$props, "isCorrect", 7, null), isMultiple = prop($$props, "isMultiple", 7, false), marginClass = prop($$props, "marginClass", 7, ""), onBlur = prop($$props, "onBlur", 7);
@@ -10145,7 +10161,7 @@ function TypeInInlineField($$anchor, $$props) {
       flushSync();
     }
   };
-  var span = root$b();
+  var span = root$c();
   var node = child(span);
   {
     var consequent = ($$anchor2) => {
@@ -10223,15 +10239,16 @@ create_custom_element(
   true
 );
 var root_1$d = /* @__PURE__ */ from_html(`<p class="p2 text-red-400 mb-3">Student's answer</p>`);
-var root_3$7 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root_2$7 = /* @__PURE__ */ from_html(`<div class="relative"><textarea id="answerText" data-testid="input-long-txa" placeholder="Type your answer here" autocomplete="off" rows="3"></textarea> <!></div>`);
-var root_5$2 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root_4$1 = /* @__PURE__ */ from_html(`<div class="relative"><input data-testid="input-short-txb" autocomplete="off" placeholder="Type your answer here"/> <!></div>`);
-var root$a = /* @__PURE__ */ from_html(`<div class="relative"><!> <!></div>`);
+var root_3$9 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
+var root_2$7 = /* @__PURE__ */ from_html(`<div class="relative"><textarea id="answerText" data-testid="input-long-txa" autocomplete="off" rows="3"></textarea> <!></div>`);
+var root_5$3 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
+var root_4$1 = /* @__PURE__ */ from_html(`<div class="relative"><input data-testid="input-short-txb" autocomplete="off"/> <!></div>`);
+var root$b = /* @__PURE__ */ from_html(`<div class="relative"><!> <!></div>`);
 function TypeInTextField($$anchor, $$props) {
   push($$props, true);
   let value = prop($$props, "value", 15), variant = prop($$props, "variant", 7), readonly = prop($$props, "readonly", 7, false), disabled = prop($$props, "disabled", 7, false), showStatus = prop($$props, "showStatus", 7, false), isCorrect = prop($$props, "isCorrect", 7, null), isSkipped = prop($$props, "isSkipped", 7, false), onBlur = prop($$props, "onBlur", 7);
   let ariaLabel = /* @__PURE__ */ user_derived(() => showStatus() && isCorrect() !== null ? `Submitted response is ${isCorrect() ? "correct" : "incorrect"}` : !value() ? "Answer input: Please type your response" : "Your response is");
+  let typeinPlaceholder = /* @__PURE__ */ user_derived(() => isSkipped() ? "No answer provided" : "Type your answer here");
   const focusHandlers = useTextInputFocus();
   const handleFocus = (e2) => {
     focusHandlers.handleFocus(e2);
@@ -10309,7 +10326,7 @@ function TypeInTextField($$anchor, $$props) {
       flushSync();
     }
   };
-  var div = root$a();
+  var div = root$b();
   var node = child(div);
   {
     var consequent = ($$anchor2) => {
@@ -10317,7 +10334,7 @@ function TypeInTextField($$anchor, $$props) {
       append($$anchor2, p);
     };
     if_block(node, ($$render) => {
-      if (showStatus() && !isSkipped() && isCorrect() === false) $$render(consequent);
+      if (showStatus() && isCorrect() === false || isSkipped()) $$render(consequent);
     });
   }
   var node_1 = sibling(node, 2);
@@ -10332,11 +10349,11 @@ function TypeInTextField($$anchor, $$props) {
       var node_2 = sibling(textarea, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var span = root_3$7();
+          var span = root_3$9();
           var node_3 = child(span);
           {
-            let $0 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()));
-            let $1 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
+            let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
+            let $1 = /* @__PURE__ */ user_derived(() => !isSkipped() && Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
             ResultIcon(node_3, {
               get isCorrect() {
                 return get$1($0);
@@ -10350,7 +10367,7 @@ function TypeInTextField($$anchor, $$props) {
           append($$anchor3, span);
         };
         if_block(node_2, ($$render) => {
-          if (showStatus() && value() && value().trim() && isCorrect() !== null) $$render(consequent_1);
+          if (showStatus() && value() && value().trim() && isCorrect() !== null || isSkipped()) $$render(consequent_1);
         });
       }
       reset(div_1);
@@ -10359,13 +10376,14 @@ function TypeInTextField($$anchor, $$props) {
           set_class(textarea, 1, `input-long-txa typein-textbox h-32 resize-none
           ${$0 ?? ""} 
           ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} 
-          ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
+          ${showStatus() && isCorrect() === false || isSkipped() ? "border-2 border-red-850" : ""}`);
           set_attribute(textarea, "aria-label", get$1(ariaLabel));
           textarea.readOnly = readonly();
           textarea.disabled = disabled();
+          set_attribute(textarea, "placeholder", get$1(typeinPlaceholder));
         },
         [
-          () => showStatus() && value() && value().trim() && isCorrect() !== null ? "pr-10" : ""
+          () => showStatus() && value() && value().trim() && isCorrect() !== null || isSkipped() ? "pr-10" : ""
         ]
       );
       event("focus", textarea, handleFocus);
@@ -10383,11 +10401,11 @@ function TypeInTextField($$anchor, $$props) {
       var node_4 = sibling(input, 2);
       {
         var consequent_3 = ($$anchor3) => {
-          var span_1 = root_5$2();
+          var span_1 = root_5$3();
           var node_5 = child(span_1);
           {
-            let $0 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()));
-            let $1 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
+            let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
+            let $1 = /* @__PURE__ */ user_derived(() => !isSkipped() && Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
             ResultIcon(node_5, {
               get isCorrect() {
                 return get$1($0);
@@ -10401,15 +10419,16 @@ function TypeInTextField($$anchor, $$props) {
           append($$anchor3, span_1);
         };
         if_block(node_4, ($$render) => {
-          if (showStatus() && value() && value().trim() && isCorrect() !== null) $$render(consequent_3);
+          if (showStatus() && value() && value().trim() && isCorrect() !== null || isSkipped()) $$render(consequent_3);
         });
       }
       reset(div_2);
       template_effect(() => {
-        set_class(input, 1, `input-short-txb typein-textbox typein-input ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
+        set_class(input, 1, `input-short-txb typein-textbox typein-input ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && isCorrect() === false || isSkipped() ? "border-2 border-red-850" : ""}`);
         set_attribute(input, "aria-label", get$1(ariaLabel));
         input.readOnly = readonly();
         input.disabled = disabled();
+        set_attribute(input, "placeholder", get$1(typeinPlaceholder));
       });
       event("focus", input, handleFocus);
       event("blur", input, handleBlur);
@@ -10509,9 +10528,9 @@ action.update = n.update;
 action.destroy = n.destroy;
 var root_1$c = /* @__PURE__ */ from_html(`<label data-testid="qn-number-txt" aria-hidden="true"><span></span> <span> </span></label>`);
 var root_2$6 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
-var root_3$6 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
+var root_3$8 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
 var root_4 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 absolute right-4 top-[calc(50%+0.375rem)] -translate-y-1/2 flex items-center justify-center"><!></span>`);
-var root$9 = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
+var root$a = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
 function AnswerDisplay($$anchor, $$props) {
   push($$props, true);
   let answer = prop($$props, "answer", 7), isCorrect = prop($$props, "isCorrect", 7), questionNumber = prop($$props, "questionNumber", 7), type = prop($$props, "type", 7), showQuestionNumber = prop($$props, "showQuestionNumber", 7), showResultIcon = prop($$props, "showResultIcon", 7), comparison = prop($$props, "comparison", 7), interactionType = prop($$props, "interactionType", 7);
@@ -10639,7 +10658,7 @@ function AnswerDisplay($$anchor, $$props) {
       flushSync();
     }
   };
-  var div = root$9();
+  var div = root$a();
   var node = child(div);
   {
     var consequent = ($$anchor2) => {
@@ -10691,7 +10710,7 @@ function AnswerDisplay($$anchor, $$props) {
       append($$anchor2, div_1);
     };
     var alternate = ($$anchor2) => {
-      var textarea = root_3$6();
+      var textarea = root_3$8();
       remove_textarea_child(textarea);
       action$1(textarea, ($$node) => action?.($$node));
       template_effect(() => {
@@ -10753,7 +10772,7 @@ create_custom_element(
   [],
   true
 );
-var root$8 = /* @__PURE__ */ from_html(`<div class="flex flex-col md:flex-row"><div class="flex flex-col md:w-1/2 md:pr-4"><p data-testid="ans-sum-stud-hdr">Student's answers:</p> <!></div> <div><p data-testid="ans-sum-corr-hdr">Correct answers:</p> <!></div></div>`);
+var root$9 = /* @__PURE__ */ from_html(`<div class="flex flex-col md:flex-row"><div class="flex flex-col md:w-1/2 md:pr-4"><p data-testid="ans-sum-stud-hdr">Student's answers:</p> <!></div> <div><p data-testid="ans-sum-corr-hdr">Correct answers:</p> <!></div></div>`);
 function ComparisonRow($$anchor, $$props) {
   push($$props, true);
   let comparison = prop($$props, "comparison", 7), showHeaders = prop($$props, "showHeaders", 7, false), isMultipleAnswers = prop($$props, "isMultipleAnswers", 7, false), isFirstRow = prop($$props, "isFirstRow", 7, false), interactionType = prop($$props, "interactionType", 7);
@@ -10814,7 +10833,7 @@ function ComparisonRow($$anchor, $$props) {
       flushSync();
     }
   };
-  var div = root$8();
+  var div = root$9();
   var div_1 = child(div);
   var p = child(div_1);
   var node = sibling(p, 2);
@@ -10994,7 +11013,7 @@ create_custom_element(
 );
 var root_1$a = /* @__PURE__ */ from_html(`<div aria-hidden="true" class="flex items-center text-charcoal mt-2"><!> <span class="p3">There is more than one possible correct answer for this question.</span></div>`);
 var root_2$5 = /* @__PURE__ */ from_html(`<div class="mt-4"><!></div>`);
-var root$7 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
+var root$8 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
 function TypeInFeedback($$anchor, $$props) {
   push($$props, true);
   let config = prop($$props, "config", 7), feedbackState = prop($$props, "feedbackState", 7), isInteractiveMode2 = prop($$props, "isInteractiveMode", 7), correctAnswersFlat = prop($$props, "correctAnswersFlat", 7), allCorrectAnswers = prop($$props, "allCorrectAnswers", 7), sessionAnswersFlat = prop($$props, "sessionAnswersFlat", 7), answerResults = prop($$props, "answerResults", 7);
@@ -11007,7 +11026,7 @@ function TypeInFeedback($$anchor, $$props) {
     }
     return false;
   })());
-  const showHasMultipleAnswers = /* @__PURE__ */ user_derived(() => feedbackState().showStatusLine && get$1(hasMultipleAnswers) && (config().variant === "short" || config().variant === "long"));
+  const showHasMultipleAnswers = /* @__PURE__ */ user_derived(() => get$1(hasMultipleAnswers) && config().variant !== "inline" && (feedbackState().isSkipped || feedbackState().showStatusLine));
   const showFeedbackAlert = /* @__PURE__ */ user_derived(() => feedbackState().isFeedbackShown && !feedbackState().isSkipped && config().variant === "inline" && !!feedbackState().resultFeedback?.trim());
   const showInlineComparisonTable = /* @__PURE__ */ user_derived(() => feedbackState().showComparisonTable && config().variant === "inline");
   const feedbackIconType = /* @__PURE__ */ user_derived(() => isInteractiveMode2() && config().variant === "inline" ? "info" : "result");
@@ -11077,7 +11096,7 @@ function TypeInFeedback($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment = root$7();
+  var fragment = root$8();
   var node = first_child(fragment);
   {
     var consequent = ($$anchor2) => {
@@ -11174,10 +11193,10 @@ create_custom_element(
   [],
   true
 );
-var root_3$5 = /* @__PURE__ */ from_html(`<p></p>`);
+var root_3$7 = /* @__PURE__ */ from_html(`<p></p>`);
 var root_8$1 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
 var root_2$4 = /* @__PURE__ */ from_html(`<div class="inline-typein-container mt-6 relative"><!> <div class="divider my-6"></div> <!></div>`);
-var root_10$1 = /* @__PURE__ */ from_html(`<div class="mb-4"><!></div>`);
+var root_10$2 = /* @__PURE__ */ from_html(`<div class="mb-4"><!></div>`);
 var root_9$1 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 function TypeInComponent($$anchor, $$props) {
   push($$props, true);
@@ -11381,7 +11400,7 @@ function TypeInComponent($$anchor, $$props) {
           var div = root_2$4();
           var node_1 = child(div);
           each(node_1, 17, () => segments, index, ($$anchor4, segment) => {
-            var p = root_3$5();
+            var p = root_3$7();
             each(p, 21, () => get$1(segment).parts, index, ($$anchor5, part, partIndex) => {
               var fragment_2 = comment();
               var node_2 = first_child(fragment_2);
@@ -11467,7 +11486,7 @@ function TypeInComponent($$anchor, $$props) {
           var node_6 = first_child(fragment_6);
           {
             var consequent_4 = ($$anchor4) => {
-              var div_2 = root_10$1();
+              var div_2 = root_10$2();
               var node_7 = child(div_2);
               {
                 let $02 = /* @__PURE__ */ user_derived(() => get$1(feedbackState).isResultCorrect ? "correct" : "incorrect");
@@ -14078,10 +14097,10 @@ function isInt(value) {
   })(parseFloat(value));
 }
 var root_1$9 = /* @__PURE__ */ from_html(`<span class="text-green-800 preview-icon"><!></span>`);
-var root_3$4 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
-var root_5$1 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
-var root_7$2 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
-var root$6 = /* @__PURE__ */ from_html(`<button data-item-button=""><span><!></span> <div><span></span> <span class="absolute"><!> <!></span></div></button>`);
+var root_3$6 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
+var root_5$2 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
+var root_7$3 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
+var root$7 = /* @__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), 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);
@@ -14373,7 +14392,7 @@ function CategoriseItem($$anchor, $$props) {
       flushSync();
     }
   };
-  var button = root$6();
+  var button = root$7();
   button.__click = selectItem;
   button.__touchstart = handleTouchStart;
   button.__touchmove = handleTouchMove;
@@ -14409,7 +14428,7 @@ function CategoriseItem($$anchor, $$props) {
       var node_3 = first_child(fragment);
       {
         var consequent_1 = ($$anchor3) => {
-          var span_4 = root_3$4();
+          var span_4 = root_3$6();
           var node_4 = child(span_4);
           SvgLoader(node_4, {
             svgName: "errorSolid",
@@ -14424,7 +14443,7 @@ function CategoriseItem($$anchor, $$props) {
           var node_5 = first_child(fragment_1);
           {
             var consequent_2 = ($$anchor4) => {
-              var span_5 = root_5$1();
+              var span_5 = root_5$2();
               var node_6 = child(span_5);
               SvgLoader(node_6, {
                 svgName: "success",
@@ -14471,7 +14490,7 @@ function CategoriseItem($$anchor, $$props) {
   var node_7 = sibling(node_1, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var span_6 = root_7$2();
+      var span_6 = root_7$3();
       var node_8 = child(span_6);
       SvgLoader(node_8, {
         svgName: "gripVertical",
@@ -14541,9 +14560,9 @@ create_custom_element(
   true
 );
 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><!></section>`, 1);
+var root_7$2 = /* @__PURE__ */ from_html(`<div class="w-full text-base text-charcoal font-semibold mt-1 mb-2">Missing answers:</div>`);
+var root_6$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root$6 = /* @__PURE__ */ from_html(`<!>   <section><!></section>`, 1);
 function CategoriseDndContainer($$anchor, $$props) {
   push($$props, true);
   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);
@@ -14834,7 +14853,7 @@ function CategoriseDndContainer($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment = root$5();
+  var fragment = root$6();
   var node = first_child(fragment);
   {
     var consequent = ($$anchor2) => {
@@ -14883,11 +14902,11 @@ function CategoriseDndContainer($$anchor, $$props) {
           var node_5 = first_child(fragment_4);
           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 fragment_5 = root_6$2();
             var node_6 = first_child(fragment_5);
             {
               var consequent_3 = ($$anchor5) => {
-                var div = root_7$1();
+                var div = root_7$2();
                 append($$anchor5, div);
               };
               if_block(node_6, ($$render) => {
@@ -15005,9 +15024,9 @@ create_custom_element(
   true
 );
 var root_2$3 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-testid="icon-chevron-coll"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>`);
-var root_3$3 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-testid="icon-chevron-exp"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>`);
+var root_3$5 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-testid="icon-chevron-exp"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>`);
 var root_1$7 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring flex items-center rounded-[32px] p-1.5 text-charcoal text-sm border border-gray-800 bg-gray-50 min-w-[85px] ml-3 whitespace-nowrap active:raw-focus-ring active:bg-black-55"><span class="mx-0.5"> </span> <span class="w-4 h-4 text-inherit flex items-center justify-center"><!></span></button>`);
-var root$4 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-ctr"><div><!> <!></div> <!></div>`);
+var root$5 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-ctr"><div><!> <!></div> <!></div>`);
 function CategoriseCategory($$anchor, $$props) {
   push($$props, true);
   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);
@@ -15249,7 +15268,7 @@ function CategoriseCategory($$anchor, $$props) {
       flushSync();
     }
   };
-  var div = root$4();
+  var div = root$5();
   div.__keydown = function(...$$args) {
     (onkeydown() || void 0)?.apply(this, $$args);
   };
@@ -15284,7 +15303,7 @@ function CategoriseCategory($$anchor, $$props) {
           append($$anchor3, svg);
         };
         var alternate = ($$anchor3) => {
-          var svg_1 = root_3$3();
+          var svg_1 = root_3$5();
           append($$anchor3, svg_1);
         };
         if_block(node_2, ($$render) => {
@@ -15432,8 +15451,8 @@ create_custom_element(
 var root_1$6 = /* @__PURE__ */ from_html(`<div role="group" tabindex="-1" class="text-base leading-4 text-gray-800 p-5 border border-gray-400 rounded-lg border-dashed
         absolute top-12 right-4 left-4 bottom-4 flex items-center justify-center !bg-white md:top-20">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" data-testid="cat-bin-grp"><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>`);
+var root_3$4 = /* @__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$4 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-bin-grp"><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), 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);
@@ -15693,7 +15712,7 @@ function CategoriseWordBin($$anchor, $$props) {
       flushSync();
     }
   };
-  var div = root$3();
+  var div = root$4();
   div.__keydown = function(...$$args) {
     (onkeydown() || void 0)?.apply(this, $$args);
   };
@@ -15800,7 +15819,7 @@ function CategoriseWordBin($$anchor, $$props) {
   var node_4 = sibling(node_3, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var button_1 = root_3$2();
+      var button_1 = root_3$4();
       button_1.__click = () => handleNavigate("right");
       button_1.__keydown = (e2) => {
         if (e2.key === "Enter" || e2.key === " ") {
@@ -15875,7 +15894,7 @@ create_custom_element(
   ["wordBinElement"],
   true
 );
-var root$2 = /* @__PURE__ */ from_html(`<div><!></div>`);
+var root$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
 function CategoriseCategoryList($$anchor, $$props) {
   push($$props, true);
   let hasStimulus = prop($$props, "hasStimulus", 7, false), children = prop($$props, "children", 7);
@@ -15895,7 +15914,7 @@ function CategoriseCategoryList($$anchor, $$props) {
       flushSync();
     }
   };
-  var div = root$2();
+  var div = root$3();
   var node = child(div);
   snippet(node, children);
   reset(div);
@@ -17636,17 +17655,17 @@ function useDropdownPosition(config) {
 }
 var root_1$3 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-10"></div>`);
 var root_2 = /* @__PURE__ */ from_html(`<div class="bg-black bg-opacity-5 h-full flex flex-none justify-center items-center"><div class="inline-txb-lbl font-semibold text-base leading-[19px] text-charcoal px-3 flex items-center" data-testid="inline-txb-lbl" aria-hidden="true"> </div></div>`);
-var root_3$1 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
-var root_6 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
-var root_7 = /* @__PURE__ */ from_html(`<span class="text-red-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Incorrect</span></span>`);
+var root_3$3 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
+var root_6$1 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
+var root_7$1 = /* @__PURE__ */ from_html(`<span class="text-red-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Incorrect</span></span>`);
 var root_8 = /* @__PURE__ */ from_html(`<span class="flex items-center justify-center text-blue-1000"><span aria-hidden="true"><!></span></span>`);
 var root_9 = /* @__PURE__ */ from_html(`<span class="flex items-center justify-center text-blue-1000"><span aria-hidden="true"><!></span></span>`);
 var root_12 = /* @__PURE__ */ from_html(`<span class="flex items-center text-green-900" aria-hidden="true"><!></span>`);
-var root_14 = /* @__PURE__ */ from_html(`<span class="flex items-center text-red-900" aria-hidden="true"><!></span>`);
-var root_16 = /* @__PURE__ */ from_html(`<span class="flex items-center text-blue-850" aria-hidden="true"><!></span>`);
-var root_11 = /* @__PURE__ */ from_html(`<li role="option" tabindex="-1"><div class="p-0.5 flex justify-between w-full text-base whitespace-normal"><!> <!></div></li>`);
-var root_10 = /* @__PURE__ */ from_html(`<ul class="drp-list dropdown-menu block" data-testid="drp-list" role="listbox" tabindex="-1"></ul>`);
-var root$1 = /* @__PURE__ */ from_html(`<span class="dropdown inline-block relative align-middle"><span class="sr-only"> </span> <!> <div role="combobox" data-testid="drp-cmb" aria-haspopup="listbox" tabindex="0"><!> <div class="px-4 flex flex-1 min-w-0 align-middle truncate items-center justify-between w-full"><span><!></span> <div class="flex items-center"><!> <!></div></div></div> <!></span>`);
+var root_14$1 = /* @__PURE__ */ from_html(`<span class="flex items-center text-red-900" aria-hidden="true"><!></span>`);
+var root_16$1 = /* @__PURE__ */ from_html(`<span class="flex items-center text-blue-850" aria-hidden="true"><!></span>`);
+var root_11$1 = /* @__PURE__ */ from_html(`<li role="option" tabindex="-1"><div class="p-0.5 flex justify-between w-full text-base whitespace-normal"><!> <!></div></li>`);
+var root_10$1 = /* @__PURE__ */ from_html(`<ul class="drp-list dropdown-menu block" data-testid="drp-list" role="listbox" tabindex="-1"></ul>`);
+var root$2 = /* @__PURE__ */ from_html(`<span class="dropdown inline-block relative align-middle"><span class="sr-only"> </span> <!> <div role="combobox" data-testid="drp-cmb" aria-haspopup="listbox" tabindex="0"><!> <div class="px-4 flex flex-1 min-w-0 align-middle truncate items-center justify-between w-full"><span><!></span> <div class="flex items-center"><!> <!></div></div></div> <!></span>`);
 function DropdownContainer($$anchor, $$props) {
   push($$props, true);
   let dropdownId = prop($$props, "dropdownId", 7), dropdownNumber = prop($$props, "dropdownNumber", 7), options = prop($$props, "options", 7), selected = prop($$props, "selected", 7), correctAnswers = prop($$props, "correctAnswers", 23, () => []), isCorrect = prop($$props, "isCorrect", 7, false), isFinished = prop($$props, "isFinished", 7, false), isLocked = prop($$props, "isLocked", 7, false), isDataSaving = prop($$props, "isDataSaving", 7, false), mode = prop($$props, "mode", 7), showFeedback = prop($$props, "showFeedback", 7, false), showNumbering = prop($$props, "showNumbering", 7, true), onselect = prop($$props, "onselect", 7), viewportBuffer = prop($$props, "viewportBuffer", 7, 60);
@@ -18019,7 +18038,7 @@ function DropdownContainer($$anchor, $$props) {
       flushSync();
     }
   };
-  var span = root$1();
+  var span = root$2();
   var span_1 = child(span);
   var text = child(span_1, true);
   reset(span_1);
@@ -18064,7 +18083,7 @@ function DropdownContainer($$anchor, $$props) {
   var node_3 = child(div_5);
   {
     var consequent_2 = ($$anchor2) => {
-      var span_3 = root_3$1();
+      var span_3 = root_3$3();
       var span_4 = child(span_3);
       var node_4 = child(span_4);
       SvgLoader(node_4, { svgName: "successSolid", className: "correct-icon" });
@@ -18082,7 +18101,7 @@ function DropdownContainer($$anchor, $$props) {
           var node_6 = first_child(fragment_1);
           {
             var consequent_3 = ($$anchor4) => {
-              var span_5 = root_6();
+              var span_5 = root_6$1();
               var span_6 = child(span_5);
               var node_7 = child(span_6);
               SvgLoader(node_7, { svgName: "successSolid", className: "correct-icon" });
@@ -18092,7 +18111,7 @@ function DropdownContainer($$anchor, $$props) {
               append($$anchor4, span_5);
             };
             var alternate = ($$anchor4) => {
-              var span_7 = root_7();
+              var span_7 = root_7$1();
               var span_8 = child(span_7);
               var node_8 = child(span_8);
               SvgLoader(node_8, { svgName: "errorSolid", className: "incorrect-icon" });
@@ -18165,13 +18184,13 @@ function DropdownContainer($$anchor, $$props) {
   var node_12 = sibling(div_1, 2);
   {
     var consequent_9 = ($$anchor2) => {
-      var ul = root_10();
+      var ul = root_10$1();
       each(ul, 21, () => get$1(initializedOptions), index, ($$anchor3, option, index2) => {
         const iconType = /* @__PURE__ */ user_derived(() => getOptionIcon(get$1(option)));
         const showCurrentOption = /* @__PURE__ */ user_derived(() => isCurrentOption(index2));
         const showHoverOption = /* @__PURE__ */ user_derived(() => shouldShowHover(index2));
         const optionAriaLabel = /* @__PURE__ */ user_derived(() => getOptionAriaLabel(get$1(option), index2));
-        var li = root_11();
+        var li = root_11$1();
         li.__mousedown = (e2) => e2.preventDefault();
         li.__click = async (e2) => {
           e2.preventDefault();
@@ -18208,7 +18227,7 @@ function DropdownContainer($$anchor, $$props) {
             var node_16 = first_child(fragment_2);
             {
               var consequent_7 = ($$anchor5) => {
-                var span_14 = root_14();
+                var span_14 = root_14$1();
                 var node_17 = child(span_14);
                 SvgLoader(node_17, { svgName: "errorSolid", className: "incorrect-icon" });
                 reset(span_14);
@@ -18219,7 +18238,7 @@ function DropdownContainer($$anchor, $$props) {
                 var node_18 = first_child(fragment_3);
                 {
                   var consequent_8 = ($$anchor6) => {
-                    var span_15 = root_16();
+                    var span_15 = root_16$1();
                     var node_19 = child(span_15);
                     SvgLoader(node_19, { svgName: "successSolid", className: "correct-icon" });
                     reset(span_15);
@@ -18315,9 +18334,9 @@ create_custom_element(
   [],
   true
 );
-var root_5 = /* @__PURE__ */ from_html(`<span class="dropdown-text text-xl font-semibold leading-12 text-blue-1000"><!></span>`);
+var root_5$1 = /* @__PURE__ */ from_html(`<span class="dropdown-text text-xl font-semibold leading-12 text-blue-1000"><!></span>`);
 var root_1$2 = /* @__PURE__ */ from_html(`<p class="mb-4"></p>`);
-var root = /* @__PURE__ */ from_html(`<div class="my-6"></div>`);
+var root$1 = /* @__PURE__ */ from_html(`<div class="my-6"></div>`);
 function DropdownInteractionContent($$anchor, $$props) {
   push($$props, true);
   let config = prop($$props, "config", 7), state2 = prop($$props, "state", 7), isDataSaving = prop($$props, "isDataSaving", 7, false), showFeedback = prop($$props, "showFeedback", 7, false), onselection = prop($$props, "onselection", 7);
@@ -18432,7 +18451,7 @@ function DropdownInteractionContent($$anchor, $$props) {
       flushSync();
     }
   };
-  var div = root();
+  var div = root$1();
   each(div, 21, () => get$1(promptLines), index, ($$anchor2, promptLine) => {
     var p = root_1$2();
     each(p, 21, () => dropdownParser.parseText(get$1(promptLine)), index, ($$anchor3, part) => {
@@ -18492,7 +18511,7 @@ function DropdownInteractionContent($$anchor, $$props) {
           var node_1 = first_child(fragment_2);
           {
             var consequent_1 = ($$anchor5) => {
-              var span = root_5();
+              var span = root_5$1();
               var node_2 = child(span);
               html(node_2, () => get$1(part).text);
               reset(span);
@@ -18619,7 +18638,7 @@ function DropdownFeedback($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(DropdownFeedback, { feedbackState: {}, config: {}, interactionType: {} }, [], [], true);
-var root_3 = /* @__PURE__ */ from_html(`<div aria-live="polite" class="mb-6"><!></div>`);
+var root_3$2 = /* @__PURE__ */ from_html(`<div aria-live="polite" class="mb-6"><!></div>`);
 function DropdownComponent($$anchor, $$props) {
   push($$props, true);
   let api = prop($$props, "api", 7), config = prop($$props, "config", 7), isDataSaving = prop($$props, "isDataSaving", 7, false), onstateChange = prop($$props, "onstateChange", 7);
@@ -18770,7 +18789,7 @@ function DropdownComponent($$anchor, $$props) {
       var node = first_child(fragment_2);
       {
         var consequent = ($$anchor3) => {
-          var div = root_3();
+          var div = root_3$2();
           var node_1 = child(div);
           DropdownFeedback(node_1, {
             get feedbackState() {
@@ -19078,10 +19097,731 @@ const createDropdownConfig = (loadedData) => {
   };
 };
 registerInteraction("dropdown", createDropdownInteraction, DropdownComponent);
+const decodeNbsp = (text) => text.replace(/&amp;nbsp;/g, " ").replace(/&nbsp;/g, " ");
+const splitParagraphs = (rawText) => rawText.split(/<\/p>/i).map((p) => p.replace(/^<p>/i, "").trim()).filter(Boolean);
+const parseSentences = (rawText, correctAnswers = []) => {
+  const paragraphs = splitParagraphs(rawText);
+  const segments = [];
+  let posIndex = 0;
+  let correctIndex = 0;
+  for (let pIdx = 0; pIdx < paragraphs.length; pIdx++) {
+    const para = paragraphs[pIdx];
+    const decoded = para.replace(/&lt;eat-contentful&gt;/g, "<eat-contentful>").replace(/&lt;\/eat-contentful&gt;/g, "</eat-contentful>").replace(/&lt;eat-sentence&gt;/g, "<eat-sentence>");
+    const chunks = decoded.split("<eat-sentence>");
+    for (const chunk of chunks) {
+      const contentfulMatch = chunk.match(/<eat-contentful>(.*?)<\/eat-contentful>/);
+      const text = decodeNbsp((contentfulMatch ? contentfulMatch[1] : chunk).trim());
+      if (text) {
+        const id = contentfulMatch ? correctAnswers[correctIndex]?.id ?? String(posIndex) : String(posIndex);
+        if (contentfulMatch) correctIndex++;
+        segments.push({ id, text });
+        posIndex++;
+      }
+    }
+    if (pIdx < paragraphs.length - 1) {
+      segments.push({ id: `br-${pIdx}`, text: "", isLineBreak: true });
+    }
+  }
+  return segments;
+};
+const parseWords = (rawText, correctAnswers = []) => {
+  const paragraphs = splitParagraphs(rawText);
+  const segments = [];
+  let globalIndex = 1;
+  let correctIndex = 0;
+  const tokenRegex = /<eat-contentful>(.*?)<\/eat-contentful>|([^<>]+)/g;
+  const trailingPunctRe = /([.,!?;:)\]"'»…\u2014\u2013]+)$/;
+  const purePunctRe = /^[^\w\u00C0-\u024F]+$/;
+  for (let pIdx = 0; pIdx < paragraphs.length; pIdx++) {
+    const para = paragraphs[pIdx];
+    const decoded = para.replace(/&lt;eat-contentful&gt;/g, "<eat-contentful>").replace(/&lt;\/eat-contentful&gt;/g, "</eat-contentful>");
+    tokenRegex.lastIndex = 0;
+    let match;
+    while ((match = tokenRegex.exec(decoded)) !== null) {
+      if (match[1] !== void 0) {
+        const raw = decodeNbsp(match[1].trim());
+        if (raw) {
+          const punctMatch = raw.match(trailingPunctRe);
+          const text = punctMatch ? raw.slice(0, -punctMatch[1].length) : raw;
+          const trailingPunctuation = punctMatch ? punctMatch[1] : void 0;
+          const id = correctAnswers[correctIndex]?.id ?? `w-${globalIndex}`;
+          segments.push({ id, text, trailingPunctuation });
+          correctIndex++;
+          globalIndex++;
+        }
+      } else if (match[2] !== void 0) {
+        const words = match[2].split(/\s+/).filter(Boolean);
+        for (const word of words) {
+          if (purePunctRe.test(word)) {
+            const prev = segments[segments.length - 1];
+            if (prev && !prev.isPunctuation && !prev.isLineBreak) {
+              prev.trailingPunctuation = (prev.trailingPunctuation ?? "") + word;
+            } else {
+              segments.push({ id: `punct-${globalIndex}`, text: word, isPunctuation: true });
+            }
+          } else {
+            const punctMatch = word.match(trailingPunctRe);
+            const text = decodeNbsp(punctMatch ? word.slice(0, -punctMatch[1].length) : word);
+            const trailingPunctuation = punctMatch ? punctMatch[1] : void 0;
+            segments.push({ id: `w-${globalIndex}`, text, trailingPunctuation });
+            globalIndex++;
+          }
+        }
+      }
+    }
+    if (pIdx < paragraphs.length - 1) {
+      segments.push({ id: `br-${pIdx}`, text: "", isLineBreak: true });
+    }
+  }
+  return segments;
+};
+const parseSelectableText = (text, selectableType, correctAnswers = []) => {
+  if (selectableType === "Sentence") {
+    return parseSentences(text, correctAnswers);
+  }
+  return parseWords(text, correctAnswers);
+};
+function getSegmentState(segmentId, selectedIds, correctAnswerIds, isPreviewMode2, isValidating) {
+  const isSegmentSelected = selectedIds.includes(segmentId);
+  const isInCorrectAnswers = correctAnswerIds.includes(segmentId);
+  const isCorrect = isPreviewMode2 && isInCorrectAnswers || isValidating && isSegmentSelected && isInCorrectAnswers;
+  const isIncorrect = isValidating && isSegmentSelected && !isInCorrectAnswers;
+  const isMissing = isValidating && !isSegmentSelected && isInCorrectAnswers;
+  return { isSegmentSelected, isCorrect, isIncorrect, isMissing };
+}
+const useSelectableText = (config) => {
+  const segments = parseSelectableText(
+    config.text,
+    config.selectable_type,
+    config.correct_answers ?? []
+  );
+  const isAtMaxSelections = (currentSelections) => {
+    return config.max_selections != null && currentSelections.length >= config.max_selections;
+  };
+  return {
+    segments,
+    isAtMaxSelections
+  };
+};
+function useSelectableTextState(config, selections) {
+  const isPreviewMode2 = config.mode === MODES.PREVIEW;
+  const isInteractiveMode2 = config.mode === MODES.INTERACTIVE;
+  const isSessionMode2 = config.mode === MODES.SESSION;
+  const correctAnswerIds = config.correct_answers?.map((a) => a.id) ?? [];
+  const maxSelections = config.max_selections ?? correctAnswerIds.length;
+  const isValidating = isInteractiveMode2 && maxSelections > 0 && selections.length >= maxSelections;
+  const isAllCorrect = isValidating && selections.length === correctAnswerIds.length && selections.every((id) => correctAnswerIds.includes(id));
+  return {
+    isPreviewMode: isPreviewMode2,
+    isInteractiveMode: isInteractiveMode2,
+    isSessionMode: isSessionMode2,
+    correctAnswerIds,
+    maxSelections,
+    isValidating,
+    isAllCorrect
+  };
+}
+function useSelectableTextFeedback(isValidating, isAllCorrect, config) {
+  const feedbackType = isAllCorrect ? "correct" : "incorrect";
+  const feedbackMessage = isValidating ? isAllCorrect ? config.feedback?.correct ?? "" : config.feedback?.incorrect ?? "" : "";
+  const isFeedbackShown = isValidating && feedbackMessage.length > 0;
+  return { isFeedbackShown, feedbackType, feedbackMessage };
+}
+var root_3$1 = /* @__PURE__ */ from_html(`<br/>`);
+var root_5 = /* @__PURE__ */ from_html(`<span class="segment-punctuation" aria-hidden="true"> </span>`);
+var root_7 = /* @__PURE__ */ from_html(`<span class="segment-trailing-punct" aria-hidden="true"> </span>`);
+var root_6 = /* @__PURE__ */ from_html(`<span class="selectable-segment" aria-hidden="true"> <!></span>`);
+var root_10 = /* @__PURE__ */ from_html(`<br/>`);
+var root_13 = /* @__PURE__ */ from_html(`<span class="segment-punctuation" aria-hidden="true"> </span>`);
+var root_15 = /* @__PURE__ */ from_html(`<span class="selectable-segment-missing-badge" aria-hidden="true" data-testid="select-mis-ans-tt">Missing answer</span>`);
+var root_16 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="selectable-segment-deselect-icon" data-testid="select-close-icon"><!></span>`);
+var root_18 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="selectable-segment-status-icon"><!></span>`);
+var root_19 = /* @__PURE__ */ from_html(`<span class="segment-trailing-punct" aria-hidden="true"> </span>`);
+var root_20 = /* @__PURE__ */ from_html(`<span class="sr-only">Correct answer</span>`);
+var root_21 = /* @__PURE__ */ from_html(`<span class="sr-only">Incorrect answer</span>`);
+var root_22 = /* @__PURE__ */ from_html(`<span class="sr-only">Missing answer</span>`);
+var root_14 = /* @__PURE__ */ from_html(`<span role="button"><!> <span class="selectable-segment-text"> <!></span> <!> <!> <!> <!></span>`);
+var root_11 = /* @__PURE__ */ from_html(`<span></span>`);
+var root = /* @__PURE__ */ from_html(`<div class="selectable-text-passage" data-testid="select-passage-ctr"><!></div>`);
+function SelectableTextInteractionContent($$anchor, $$props) {
+  push($$props, true);
+  let config = prop($$props, "config", 7), interactionState = prop($$props, "state", 7), isDataSaving = prop($$props, "isDataSaving", 7, false), onselection = prop($$props, "onselection", 7);
+  const { segments } = useSelectableText(config());
+  const isWord = config().selectable_type !== "Sentence";
+  const segmentType = isWord ? "word" : "sent";
+  let selectedIds = /* @__PURE__ */ user_derived(() => interactionState().data.selections);
+  let sharedState = /* @__PURE__ */ user_derived(() => useSelectableTextState(config(), get$1(selectedIds)));
+  let segmentStates = /* @__PURE__ */ user_derived(() => segments.map((segment) => ({
+    segment,
+    seg: getSegmentState(segment.id, get$1(selectedIds), get$1(sharedState).correctAnswerIds, get$1(sharedState).isPreviewMode, get$1(sharedState).isValidating)
+  })));
+  const handleSegmentClick = (segmentId) => {
+    if (isDataSaving() || get$1(sharedState).isPreviewMode) return;
+    onselection()?.(new CustomEvent("selection", { detail: { segmentId } }));
+  };
+  const handleSegmentKeydown = (e2, segmentId) => {
+    if (get$1(sharedState).isPreviewMode) return;
+    if (e2.key === " ") {
+      e2.preventDefault();
+      handleSegmentClick(segmentId);
+    } else if (e2.key === "Enter") {
+      handleSegmentClick(segmentId);
+    }
+  };
+  const getSegmentTestId = (seg) => {
+    if (get$1(sharedState).isPreviewMode && seg.isCorrect) return `select-${segmentType}-corr-ans-btn`;
+    if (seg.isCorrect || seg.isIncorrect) return `select-${segmentType}-stud-ans-btn`;
+    if (seg.isMissing) return `select-${segmentType}-mis-ans-btn`;
+    return `select-${segmentType}-btn`;
+  };
+  const getSegmentClasses = (seg) => {
+    return [
+      "selectable-segment",
+      !get$1(sharedState).isPreviewMode && seg.isSegmentSelected && !get$1(sharedState).isValidating ? "selected" : "",
+      get$1(sharedState).isPreviewMode ? "preview" : "",
+      get$1(sharedState).isInteractiveMode ? "interactive" : "",
+      seg.isCorrect ? "correct" : "",
+      seg.isIncorrect ? "incorrect" : "",
+      seg.isMissing ? "missing" : ""
+    ].filter(Boolean).join(" ");
+  };
+  let passageEl = /* @__PURE__ */ state(void 0);
+  let lineRows = /* @__PURE__ */ state(proxy([]));
+  let isMeasured = /* @__PURE__ */ state(!isWord);
+  const sentenceDisplayRows = isWord ? [] : segments.reduce(
+    (acc, segment, idx) => {
+      if (segment.isLineBreak) {
+        acc.push("break");
+      } else {
+        const last = acc[acc.length - 1];
+        if (Array.isArray(last)) last.push(idx);
+        else acc.push([idx]);
+      }
+      return acc;
+    },
+    []
+  );
+  let displayRows = /* @__PURE__ */ user_derived(() => isWord ? get$1(lineRows) : sentenceDisplayRows);
+  const measureLines = async () => {
+    if (!get$1(passageEl)) return;
+    await tick();
+    const segEls = get$1(passageEl).querySelectorAll("[data-seg-idx]");
+    if (segEls.length === 0) {
+      set(lineRows, [], true);
+      set(isMeasured, true);
+      return;
+    }
+    const containerTop = get$1(passageEl).getBoundingClientRect().top;
+    const topMap = /* @__PURE__ */ new Map();
+    for (const el of segEls) {
+      const idx = Number(el.dataset.segIdx);
+      const top = Math.round(el.getBoundingClientRect().top - containerTop);
+      if (!topMap.has(top)) topMap.set(top, []);
+      topMap.get(top).push(idx);
+    }
+    set(lineRows, [...topMap.entries()].sort(([a], [b]) => a - b).map(([, indices]) => indices), true);
+    set(isMeasured, true);
+  };
+  user_effect(() => {
+    if (!isWord) return;
+    const el = get$1(passageEl);
+    if (!el) return;
+    const parent = el.parentElement;
+    if (!parent) return;
+    let lastWidth = Math.round(parent.getBoundingClientRect().width);
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = Math.round(entry.contentRect.width);
+        if (newWidth !== lastWidth) {
+          lastWidth = newWidth;
+          set(isMeasured, false);
+        }
+      }
+    });
+    ro.observe(parent);
+    return () => ro.disconnect();
+  });
+  user_effect(() => {
+    if (!get$1(isMeasured) && get$1(passageEl)) {
+      measureLines();
+    }
+  });
+  var $$exports = {
+    get config() {
+      return config();
+    },
+    set config($$value) {
+      config($$value);
+      flushSync();
+    },
+    get state() {
+      return interactionState();
+    },
+    set state($$value) {
+      interactionState($$value);
+      flushSync();
+    },
+    get isDataSaving() {
+      return isDataSaving();
+    },
+    set isDataSaving($$value = false) {
+      isDataSaving($$value);
+      flushSync();
+    },
+    get onselection() {
+      return onselection();
+    },
+    set onselection($$value) {
+      onselection($$value);
+      flushSync();
+    }
+  };
+  var div = root();
+  var node = child(div);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var fragment = comment();
+      var node_1 = first_child(fragment);
+      each(node_1, 19, () => segments, (segment) => segment.id, ($$anchor3, segment, i) => {
+        var fragment_1 = comment();
+        var node_2 = first_child(fragment_1);
+        {
+          var consequent = ($$anchor4) => {
+            var br = root_3$1();
+            append($$anchor4, br);
+          };
+          var alternate_1 = ($$anchor4) => {
+            var fragment_2 = comment();
+            var node_3 = first_child(fragment_2);
+            {
+              var consequent_1 = ($$anchor5) => {
+                var span = root_5();
+                var text = child(span, true);
+                reset(span);
+                template_effect(() => set_text(text, get$1(segment).text));
+                append($$anchor5, span);
+              };
+              var alternate = ($$anchor5) => {
+                var span_1 = root_6();
+                var text_1 = child(span_1);
+                var node_4 = sibling(text_1);
+                {
+                  var consequent_2 = ($$anchor6) => {
+                    var span_2 = root_7();
+                    var text_2 = child(span_2, true);
+                    reset(span_2);
+                    template_effect(() => set_text(text_2, get$1(segment).trailingPunctuation));
+                    append($$anchor6, span_2);
+                  };
+                  if_block(node_4, ($$render) => {
+                    if (get$1(segment).trailingPunctuation) $$render(consequent_2);
+                  });
+                }
+                reset(span_1);
+                template_effect(() => {
+                  set_attribute(span_1, "data-seg-idx", get$1(i));
+                  set_text(text_1, `${get$1(segment).text ?? ""} `);
+                });
+                append($$anchor5, span_1);
+              };
+              if_block(
+                node_3,
+                ($$render) => {
+                  if (get$1(segment).isPunctuation) $$render(consequent_1);
+                  else $$render(alternate, false);
+                },
+                true
+              );
+            }
+            append($$anchor4, fragment_2);
+          };
+          if_block(node_2, ($$render) => {
+            if (get$1(segment).isLineBreak) $$render(consequent);
+            else $$render(alternate_1, false);
+          });
+        }
+        append($$anchor3, fragment_1);
+      });
+      append($$anchor2, fragment);
+    };
+    var alternate_5 = ($$anchor2) => {
+      var fragment_3 = comment();
+      var node_5 = first_child(fragment_3);
+      each(node_5, 17, () => get$1(displayRows), index, ($$anchor3, row) => {
+        var fragment_4 = comment();
+        var node_6 = first_child(fragment_4);
+        {
+          var consequent_4 = ($$anchor4) => {
+            var br_1 = root_10();
+            append($$anchor4, br_1);
+          };
+          var alternate_4 = ($$anchor4) => {
+            var span_3 = root_11();
+            each(span_3, 21, () => get$1(row), (idx) => segments[idx].id, ($$anchor5, idx) => {
+              const segment = /* @__PURE__ */ user_derived(() => segments[get$1(idx)]);
+              const computed_const = /* @__PURE__ */ user_derived(() => {
+                const { seg } = get$1(segmentStates)[get$1(idx)];
+                return { seg };
+              });
+              var fragment_5 = comment();
+              var node_7 = first_child(fragment_5);
+              {
+                var consequent_5 = ($$anchor6) => {
+                  var span_4 = root_13();
+                  var text_3 = child(span_4, true);
+                  reset(span_4);
+                  template_effect(() => set_text(text_3, get$1(segment).text));
+                  append($$anchor6, span_4);
+                };
+                var alternate_3 = ($$anchor6) => {
+                  var span_5 = root_14();
+                  span_5.__click = () => handleSegmentClick(get$1(segment).id);
+                  span_5.__keydown = (e2) => handleSegmentKeydown(e2, get$1(segment).id);
+                  var node_8 = child(span_5);
+                  {
+                    var consequent_6 = ($$anchor7) => {
+                      var span_6 = root_15();
+                      append($$anchor7, span_6);
+                    };
+                    if_block(node_8, ($$render) => {
+                      if (get$1(computed_const).seg.isMissing) $$render(consequent_6);
+                    });
+                  }
+                  var span_7 = sibling(node_8, 2);
+                  var text_4 = child(span_7);
+                  var node_9 = sibling(text_4);
+                  {
+                    var consequent_7 = ($$anchor7) => {
+                      var span_8 = root_16();
+                      var node_10 = child(span_8);
+                      SvgLoader(node_10, { svgName: "crossIcon", className: "deselect-icon" });
+                      reset(span_8);
+                      append($$anchor7, span_8);
+                    };
+                    var alternate_2 = ($$anchor7) => {
+                      var fragment_6 = comment();
+                      var node_11 = first_child(fragment_6);
+                      {
+                        var consequent_8 = ($$anchor8) => {
+                          var span_9 = root_18();
+                          var node_12 = child(span_9);
+                          {
+                            let $0 = /* @__PURE__ */ user_derived(() => get$1(computed_const).seg.isCorrect ? "successSolid" : "errorSolid");
+                            let $1 = /* @__PURE__ */ user_derived(() => get$1(computed_const).seg.isCorrect ? "correct-icon" : "incorrect-icon");
+                            SvgLoader(node_12, {
+                              get svgName() {
+                                return get$1($0);
+                              },
+                              get className() {
+                                return get$1($1);
+                              }
+                            });
+                          }
+                          reset(span_9);
+                          template_effect(() => set_attribute(span_9, "data-testid", get$1(computed_const).seg.isCorrect ? "icon-correct" : "icon-incorrect"));
+                          append($$anchor8, span_9);
+                        };
+                        if_block(
+                          node_11,
+                          ($$render) => {
+                            if (get$1(computed_const).seg.isCorrect || get$1(computed_const).seg.isIncorrect) $$render(consequent_8);
+                          },
+                          true
+                        );
+                      }
+                      append($$anchor7, fragment_6);
+                    };
+                    if_block(node_9, ($$render) => {
+                      if (get$1(computed_const).seg.isSegmentSelected && !get$1(sharedState).isValidating && !get$1(sharedState).isPreviewMode) $$render(consequent_7);
+                      else $$render(alternate_2, false);
+                    });
+                  }
+                  reset(span_7);
+                  var node_13 = sibling(span_7, 2);
+                  {
+                    var consequent_9 = ($$anchor7) => {
+                      var span_10 = root_19();
+                      var text_5 = child(span_10, true);
+                      reset(span_10);
+                      template_effect(() => set_text(text_5, get$1(segment).trailingPunctuation));
+                      append($$anchor7, span_10);
+                    };
+                    if_block(node_13, ($$render) => {
+                      if (get$1(segment).trailingPunctuation) $$render(consequent_9);
+                    });
+                  }
+                  var node_14 = sibling(node_13, 2);
+                  {
+                    var consequent_10 = ($$anchor7) => {
+                      var span_11 = root_20();
+                      append($$anchor7, span_11);
+                    };
+                    if_block(node_14, ($$render) => {
+                      if (get$1(computed_const).seg.isCorrect) $$render(consequent_10);
+                    });
+                  }
+                  var node_15 = sibling(node_14, 2);
+                  {
+                    var consequent_11 = ($$anchor7) => {
+                      var span_12 = root_21();
+                      append($$anchor7, span_12);
+                    };
+                    if_block(node_15, ($$render) => {
+                      if (get$1(computed_const).seg.isIncorrect) $$render(consequent_11);
+                    });
+                  }
+                  var node_16 = sibling(node_15, 2);
+                  {
+                    var consequent_12 = ($$anchor7) => {
+                      var span_13 = root_22();
+                      append($$anchor7, span_13);
+                    };
+                    if_block(node_16, ($$render) => {
+                      if (get$1(computed_const).seg.isMissing) $$render(consequent_12);
+                    });
+                  }
+                  reset(span_5);
+                  template_effect(
+                    ($0, $1) => {
+                      set_attribute(span_5, "tabindex", get$1(sharedState).isPreviewMode ? -1 : 0);
+                      set_class(span_5, 1, $0);
+                      set_attribute(span_5, "aria-pressed", !get$1(sharedState).isPreviewMode && get$1(computed_const).seg.isSegmentSelected);
+                      set_attribute(span_5, "aria-disabled", isDataSaving() || get$1(sharedState).isPreviewMode);
+                      set_attribute(span_5, "data-segment-id", get$1(segment).id);
+                      set_attribute(span_5, "data-testid", $1);
+                      set_text(text_4, `${get$1(segment).text ?? ""} `);
+                    },
+                    [
+                      () => clsx(getSegmentClasses(get$1(computed_const).seg)),
+                      () => getSegmentTestId(get$1(computed_const).seg)
+                    ]
+                  );
+                  append($$anchor6, span_5);
+                };
+                if_block(node_7, ($$render) => {
+                  if (get$1(segment).isPunctuation) $$render(consequent_5);
+                  else $$render(alternate_3, false);
+                });
+              }
+              append($$anchor5, fragment_5);
+            });
+            reset(span_3);
+            template_effect(() => set_class(span_3, 1, clsx(isWord ? "selectable-line-word" : void 0)));
+            append($$anchor4, span_3);
+          };
+          if_block(node_6, ($$render) => {
+            if (get$1(row) === "break") $$render(consequent_4);
+            else $$render(alternate_4, false);
+          });
+        }
+        append($$anchor3, fragment_4);
+      });
+      append($$anchor2, fragment_3);
+    };
+    if_block(node, ($$render) => {
+      if (!get$1(isMeasured)) $$render(consequent_3);
+      else $$render(alternate_5, false);
+    });
+  }
+  reset(div);
+  bind_this(div, ($$value) => set(passageEl, $$value), () => get$1(passageEl));
+  template_effect(() => set_style(div, !get$1(isMeasured) ? "visibility:hidden;max-width:864px" : !isWord || get$1(selectedIds).length === 0 && !get$1(sharedState).isValidating && !get$1(sharedState).isPreviewMode ? "max-width:864px" : void 0));
+  append($$anchor, div);
+  return pop($$exports);
+}
+delegate(["click", "keydown"]);
+create_custom_element(SelectableTextInteractionContent, { config: {}, state: {}, isDataSaving: {}, onselection: {} }, [], [], true);
+var root_3 = /* @__PURE__ */ from_html(`<div aria-live="polite" class="mb-6 max-w-[544px]"><!></div>`);
+function SelectableTextComponent($$anchor, $$props) {
+  push($$props, true);
+  let api = prop($$props, "api", 7), config = prop($$props, "config", 7), isDataSaving = prop($$props, "isDataSaving", 7, false), onstateChange = prop($$props, "onstateChange", 7);
+  const initialState = api().hasExistingState?.() ? api().restoreState?.() : api().createInitialState?.();
+  if (!initialState?.data) {
+    throw new Error("Failed to initialize SelectableText state");
+  }
+  let interactionState = /* @__PURE__ */ state(proxy(initialState));
+  let sharedState = /* @__PURE__ */ user_derived(() => useSelectableTextState(config(), get$1(interactionState).data.selections));
+  let feedbackState = /* @__PURE__ */ user_derived(() => useSelectableTextFeedback(get$1(sharedState).isValidating, get$1(sharedState).isAllCorrect, config()));
+  const handleSelection = (event2) => {
+    const { segmentId } = event2.detail;
+    if (api().isLocked?.(get$1(interactionState))) return;
+    const currentSelections = get$1(interactionState).data.selections;
+    const isSelected = currentSelections.includes(segmentId);
+    let newSelections;
+    if (isSelected) {
+      newSelections = currentSelections.filter((id) => id !== segmentId);
+    } else {
+      if (get$1(sharedState).maxSelections > 0 && currentSelections.length >= get$1(sharedState).maxSelections) {
+        newSelections = [...currentSelections.slice(0, -1), segmentId];
+      } else {
+        newSelections = [...currentSelections, segmentId];
+      }
+    }
+    set(interactionState, interactionUtils.updateState(get$1(interactionState), { selections: newSelections }), true);
+    api().onStateChange?.(get$1(interactionState));
+    onstateChange()?.(new CustomEvent("stateChange", {
+      detail: {
+        state: get$1(interactionState),
+        serialized: api().serialize?.(get$1(interactionState))
+      }
+    }));
+  };
+  var $$exports = {
+    get api() {
+      return api();
+    },
+    set api($$value) {
+      api($$value);
+      flushSync();
+    },
+    get config() {
+      return config();
+    },
+    set config($$value) {
+      config($$value);
+      flushSync();
+    },
+    get isDataSaving() {
+      return isDataSaving();
+    },
+    set isDataSaving($$value = false) {
+      isDataSaving($$value);
+      flushSync();
+    },
+    get onstateChange() {
+      return onstateChange();
+    },
+    set onstateChange($$value) {
+      onstateChange($$value);
+      flushSync();
+    }
+  };
+  {
+    const interaction = ($$anchor2) => {
+      SelectableTextInteractionContent($$anchor2, {
+        get config() {
+          return config();
+        },
+        get state() {
+          return get$1(interactionState);
+        },
+        get isDataSaving() {
+          return isDataSaving();
+        },
+        onselection: handleSelection
+      });
+    };
+    const feedback = ($$anchor2) => {
+      var fragment_2 = comment();
+      var node = first_child(fragment_2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var div = root_3();
+          var node_1 = child(div);
+          {
+            var consequent = ($$anchor4) => {
+              FeedbackAlert($$anchor4, {
+                get type() {
+                  return get$1(feedbackState).feedbackType;
+                },
+                get message() {
+                  return get$1(feedbackState).feedbackMessage;
+                },
+                isAlert: false
+              });
+            };
+            if_block(node_1, ($$render) => {
+              if (get$1(feedbackState).isFeedbackShown) $$render(consequent);
+            });
+          }
+          reset(div);
+          append($$anchor3, div);
+        };
+        if_block(node, ($$render) => {
+          if (get$1(sharedState).isInteractiveMode) $$render(consequent_1);
+        });
+      }
+      append($$anchor2, fragment_2);
+    };
+    let $0 = /* @__PURE__ */ user_derived(() => config().rubric?.text || "");
+    let $1 = /* @__PURE__ */ user_derived(() => config().prompt || "");
+    PromptContainer($$anchor, {
+      get rubric() {
+        return get$1($0);
+      },
+      get prompt() {
+        return get$1($1);
+      },
+      get interactionType() {
+        return INTERACTION_TYPES.SELECTABLE_TEXT;
+      },
+      hasDivider: true,
+      interaction,
+      feedback,
+      $$slots: { interaction: true, feedback: true }
+    });
+  }
+  return pop($$exports);
+}
+create_custom_element(SelectableTextComponent, { api: {}, config: {}, isDataSaving: {}, onstateChange: {} }, [], [], true);
+const createSelectableTextConfig = (data) => {
+  const { mode, isFinished, isLocked, getItemRubric, getItemStimulus, getItemInteraction } = useSharedState(data);
+  const { prompt, text, selectable_type, is_single_mark, correct_answers, max_selections, feedback } = getItemInteraction();
+  return {
+    prompt,
+    text,
+    selectable_type,
+    is_single_mark,
+    correct_answers,
+    max_selections: correct_answers?.length ?? max_selections,
+    feedback,
+    mode,
+    rubric: getItemRubric(),
+    stimulus: getItemStimulus(),
+    isFinished,
+    isLocked
+  };
+};
+const createSelectableTextInteraction = () => {
+  return {
+    type: "selectableText",
+    component: SelectableTextComponent,
+    state: {
+      data: { selections: [] },
+      attempts: 0,
+      completed: false,
+      lastModified: Date.now()
+    },
+    createInitialState: () => ({
+      data: { selections: [] },
+      attempts: 0,
+      completed: false,
+      lastModified: Date.now()
+    }),
+    validate: () => ({
+      isValid: true,
+      score: 1,
+      maxScore: 1
+    }),
+    serialize: (state2) => ({
+      selections: state2.data.selections,
+      timestamp: Date.now()
+    }),
+    deserialize: (answer) => ({
+      data: { selections: answer.selections },
+      attempts: 0,
+      completed: false,
+      lastModified: answer.timestamp
+    }),
+    isCompleted: () => false,
+    isLocked: () => false
+  };
+};
+registerInteraction("selectableText", createSelectableTextInteraction, SelectableTextComponent);
 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:1rem;font-weight:600;line-height:1.5rem;line-height:130%} .p3{font-size:.875rem;font-weight:400;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-2{right:.5rem} .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-2\\.5{top:.625rem} .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-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-32{height:8rem} .h-4{height:1rem} .h-52{height:13rem} .h-6{height:1.5rem} .h-8{height:2rem} .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{width:2rem} .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-700{--tw-border-opacity:1;border-color:rgb(22,163,74,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-850{--tw-border-opacity:1;border-color:rgb(219,39,119,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-green-400{--tw-bg-opacity:1;background-color:rgb(240,253,244,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-10{padding-right:2.5rem} .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-500{--tw-text-opacity:1;color:rgb(37,99,235,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-700{--tw-text-opacity:1;color:rgb(22,163,74,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-400{--tw-text-opacity:1;color:rgb(157,23,77,var(--tw-text-opacity,1))} .text-red-800{--tw-text-opacity:1;color:rgb(217,12,85,var(--tw-text-opacity,1))} .text-red-850{--tw-text-opacity:1;color:rgb(219,39,119,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))}}'
+  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:1rem;font-weight:600;line-height:1.5rem;line-height:130%} .p3{font-size:.875rem;font-weight:400;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} .selectable-text-passage{line-height:44px;margin-bottom:-.375rem;margin-left:-.375rem;margin-top:-.75rem;overflow-x:auto;padding:.75rem 2rem .375rem .375rem;width:100%} .selectable-line-word{display:block;overflow:visible;white-space:nowrap} .selectable-segment{cursor:pointer;display:inline;font-size:1rem;font-weight:400;line-height:1.5rem;margin-right:.25rem;min-height:2.75rem;outline:2px solid transparent;outline-offset:2px;padding-bottom:.75rem;padding-top:.75rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-text-opacity:1;color:rgb(8,38,99,var(--tw-text-opacity,1))}@media (hover:hover) and (pointer:fine){ .selectable-segment:hover{--tw-text-opacity:1;color:rgb(51,69,223,var(--tw-text-opacity,1));text-decoration-color:#3345df;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:25%}} .selectable-segment:active{--tw-text-opacity:1;color:rgb(51,69,223,var(--tw-text-opacity,1));text-decoration-color:#3345df;text-decoration-line:underline;text-decoration-thickness:3px;text-underline-offset:25%} .segment-trailing-punct{cursor:pointer;text-decoration-line:none} .segment-punctuation, .segment-trailing-punct{-webkit-user-select:none;-moz-user-select:none;user-select:none} .segment-punctuation{cursor:default;display:inline;font-size:1rem;line-height:1.5rem;margin-right:.25rem;--tw-text-opacity:1;color:rgb(8,38,99,var(--tw-text-opacity,1))} .selectable-segment:focus-visible>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1));text-decoration-color:#212529;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:25%} .selectable-segment:not(.selected):not(.correct):not(.incorrect):not(.missing):focus-visible{--tw-text-opacity:1;color:rgb(8,38,99,var(--tw-text-opacity,1));text-decoration-line:none} .selectable-segment.selected>.selectable-segment-text{border-radius:.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(107,114,128,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:5px .5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1));text-decoration-line:none}@media (hover:hover) and (pointer:fine){ .selectable-segment.selected:active, .selectable-segment.selected:hover{text-decoration-line:none} .selectable-segment.selected:active>.selectable-segment-text, .selectable-segment.selected:hover>.selectable-segment-text{--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(239,241,255,var(--tw-bg-opacity,1));--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 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)}} .selectable-segment.selected:active>.selectable-segment-text{--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} .selectable-segment.selected:focus-visible>.selectable-segment-text{--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} .selectable-segment.\\!preview, .selectable-segment.preview{cursor:default;pointer-events:none} .selectable-segment.correct, .selectable-segment.incorrect, .selectable-segment.missing{color:inherit} .selectable-segment.correct:active, .selectable-segment.incorrect:active, .selectable-segment.missing:active{text-decoration-line:none}@media (hover:hover) and (pointer:fine){ .selectable-segment.correct:hover, .selectable-segment.incorrect:hover, .selectable-segment.missing:hover{text-decoration-line:none}} .selectable-segment.\\!correct{color:inherit} .selectable-segment.\\!correct:active{text-decoration-line:none}@media (hover:hover) and (pointer:fine){ .selectable-segment.\\!correct:hover{text-decoration-line:none}} .selectable-segment.missing{position:relative} .selectable-segment.correct:focus-visible>.selectable-segment-text, .selectable-segment.incorrect:focus-visible>.selectable-segment-text, .selectable-segment.missing:focus-visible>.selectable-segment-text{--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;background-color:inherit;outline:2px solid transparent;outline-offset:2px;text-decoration-line:none;transition-duration:50ms} .selectable-segment.\\!correct:focus-visible>.selectable-segment-text{--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;background-color:inherit;outline:2px solid transparent;outline-offset:2px;text-decoration-line:none;transition-duration:50ms} .selectable-segment.\\!correct:active>.selectable-segment-text, .selectable-segment.correct:active>.selectable-segment-text, .selectable-segment.incorrect:active>.selectable-segment-text{--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} .selectable-segment.\\!correct>.selectable-segment-text, .selectable-segment.correct>.selectable-segment-text{background-color:rgb(240,253,244,var(--tw-bg-opacity,1));border-color:rgb(22,163,74,var(--tw-border-opacity,1));border-radius:.5rem;border-width:1px} .selectable-segment.\\!correct>.selectable-segment-text, .selectable-segment.correct>.selectable-segment-text, .selectable-segment.incorrect>.selectable-segment-text{--tw-border-opacity:1;--tw-bg-opacity:1;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.375rem .375rem .375rem .5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1));text-decoration-line:none} .selectable-segment.incorrect>.selectable-segment-text{background-color:rgb(253,243,247,var(--tw-bg-opacity,1));border-color:rgb(190,24,93,var(--tw-border-opacity,1));border-radius:.5rem;border-width:1px} .selectable-segment.missing>.selectable-segment-text{border-radius:.5rem;border-style:dashed;border-width:2px;--tw-border-opacity:1;border-color:rgb(22,163,74,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.375rem .5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1));text-decoration-line:none} .selectable-segment-missing-badge{align-items:center;display:inline-flex;font-size:.875rem;font-weight:600;left:.25rem;line-height:1.25rem;padding:.125rem .375rem;position:absolute;top:-.75rem;white-space:nowrap;z-index:10;--tw-text-opacity:1;border-radius:.25rem;border-width:1px;color:rgb(21,101,52,var(--tw-text-opacity,1));--tw-border-opacity:1;border-color:rgb(187,247,209,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(240,253,244,var(--tw-bg-opacity,1));line-height:130%} .selectable-segment.missing.interactive>.selectable-segment-missing-badge{opacity:0;transition-duration:.15s;transition-property:opacity,visibility;transition-timing-function:cubic-bezier(.4,0,.2,1);visibility:hidden} .selectable-segment.missing.interactive:focus-visible>.selectable-segment-missing-badge, .selectable-segment.missing.interactive:hover>.selectable-segment-missing-badge{opacity:1;visibility:visible}@media (hover:hover) and (pointer:fine){ .selectable-segment.missing:hover>.selectable-segment-text{--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(239,241,255,var(--tw-bg-opacity,1))}} .selectable-segment-status-icon{align-items:center;display:inline-flex;margin-left:.25rem;vertical-align:sub} .selectable-segment.selected .selectable-segment-deselect-icon{display:inline-flex;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .selectable-segment.selected .selectable-segment-deselect-icon .deselect-icon{height:7.63px;width:7.63px} .selectable-segment.\\!correct .selectable-segment-status-icon, .selectable-segment.correct .selectable-segment-status-icon{--tw-text-opacity:1;color:rgb(22,163,74,var(--tw-text-opacity,1))} .selectable-segment.incorrect .selectable-segment-status-icon{--tw-text-opacity:1;color:rgb(219,39,119,var(--tw-text-opacity,1))} .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-2{right:.5rem} .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-2\\.5{top:.625rem} .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-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-32{height:8rem} .h-4{height:1rem} .h-52{height:13rem} .h-6{height:1.5rem} .h-8{height:2rem} .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{width:2rem} .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-\\[544px\\]{max-width:544px} .max-w-\\[864px\\]{max-width:864px} .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-700{--tw-border-opacity:1;border-color:rgb(22,163,74,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-850{--tw-border-opacity:1;border-color:rgb(219,39,119,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-green-400{--tw-bg-opacity:1;background-color:rgb(240,253,244,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-10{padding-right:2.5rem} .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-500{--tw-text-opacity:1;color:rgb(37,99,235,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-700{--tw-text-opacity:1;color:rgb(22,163,74,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-400{--tw-text-opacity:1;color:rgb(157,23,77,var(--tw-text-opacity,1))} .text-red-800{--tw-text-opacity:1;color:rgb(217,12,85,var(--tw-text-opacity,1))} .text-red-850{--tw-text-opacity:1;color:rgb(219,39,119,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);
@@ -19115,18 +19855,17 @@ function InteractionBuilder($$anchor, $$props) {
       try {
         set(data, await loadData(sessionId(), itemId(), get$1(mode)), true);
         if (!isMounted) return;
-        const rawType = get$1(data).interaction.type;
-        const interactionType = mapInteractionType(rawType);
+        const apiType = get$1(data).interaction.type;
+        const interactionType = mapAPIToInteractionType(apiType);
         if (!interactionType) {
-          throw new Error(`Unable to determine interaction type. Raw type: ${rawType}`);
+          throw new Error(`Unable to determine interaction type. API type: ${apiType}`);
         }
-        const pluginType = mapInteractionType(interactionType);
-        set(config, createConfigFromLoadedData(get$1(data), pluginType), true);
+        set(config, createConfigFromLoadedData(get$1(data), interactionType), true);
         if (!get$1(config)) {
           throw new Error(`Failed to create config for type: ${interactionType}`);
         }
-        set(interactionAPI, createInteraction(pluginType, get$1(config), get$1(data)), true);
-        set(InteractionComponent, getComponent(pluginType) ?? null, true);
+        set(interactionAPI, createInteraction(interactionType, get$1(config), get$1(data)), true);
+        set(InteractionComponent, getComponent(interactionType) ?? null, true);
         if (!get$1(InteractionComponent)) {
           throw new Error(`No component registered for type: ${interactionType}`);
         }
@@ -19142,8 +19881,8 @@ function InteractionBuilder($$anchor, $$props) {
       isMounted = false;
     };
   });
-  const createConfigFromLoadedData = (data2, pluginType) => {
-    switch (pluginType) {
+  const createConfigFromLoadedData = (data2, interactionType) => {
+    switch (interactionType) {
       case "mcq":
         return createMCQConfig(data2);
       case "typein":
@@ -19152,6 +19891,8 @@ function InteractionBuilder($$anchor, $$props) {
         return createCategoriseConfig(data2);
       case "dropdown":
         return createDropdownConfig(data2);
+      case "selectableText":
+        return createSelectableTextConfig(data2);
       default:
         return null;
     }