eat-js-sdk 2.4.1 → 2.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/interaction-builder.mjs +225 -288
- package/package.json +1 -1
|
@@ -6982,12 +6982,12 @@ function useImageModalSize() {
|
|
|
6982
6982
|
};
|
|
6983
6983
|
}
|
|
6984
6984
|
var root_4$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
|
|
6985
|
-
var root_5$
|
|
6986
|
-
var root_7$
|
|
6985
|
+
var root_5$9 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
|
|
6986
|
+
var root_7$7 = /* @__PURE__ */ from_html(`<span class="sr-only"><!></span>`);
|
|
6987
6987
|
var root_6$5 = /* @__PURE__ */ from_html(`<div><!> <span aria-hidden="true"><!></span></div>`);
|
|
6988
6988
|
var root_10$3 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
|
|
6989
6989
|
var root_11$2 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
|
|
6990
|
-
var root_2$
|
|
6990
|
+
var root_2$c = /* @__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>`);
|
|
6991
6991
|
function MCQImageModal($$anchor, $$props) {
|
|
6992
6992
|
push($$props, true);
|
|
6993
6993
|
let isOpen = prop($$props, "isOpen", 7, false), options = prop($$props, "options", 23, () => []), currentIndex = prop($$props, "currentIndex", 7, 0), modalAriaLabel = prop($$props, "modalAriaLabel", 7, ""), onnavigate = prop($$props, "onnavigate", 7), onclose = prop($$props, "onclose", 7);
|
|
@@ -7193,7 +7193,7 @@ function MCQImageModal($$anchor, $$props) {
|
|
|
7193
7193
|
modalClass: "bg-charcoal/80 backdrop-blur-md pointer-events-none",
|
|
7194
7194
|
dataTestId: "mcq-img-viewer-mdl",
|
|
7195
7195
|
children: ($$anchor3, $$slotProps) => {
|
|
7196
|
-
var div = root_2$
|
|
7196
|
+
var div = root_2$c();
|
|
7197
7197
|
var div_1 = child(div);
|
|
7198
7198
|
var div_2 = child(div_1);
|
|
7199
7199
|
var node_1 = child(div_2);
|
|
@@ -7256,7 +7256,7 @@ function MCQImageModal($$anchor, $$props) {
|
|
|
7256
7256
|
dataTestId: "img-viewer-next",
|
|
7257
7257
|
onclick: navigateNext,
|
|
7258
7258
|
children: ($$anchor4, $$slotProps2) => {
|
|
7259
|
-
var span_1 = root_5$
|
|
7259
|
+
var span_1 = root_5$9();
|
|
7260
7260
|
var node_6 = child(span_1);
|
|
7261
7261
|
SvgLoader(node_6, {
|
|
7262
7262
|
svgName: "smallChevronRight",
|
|
@@ -7288,7 +7288,7 @@ function MCQImageModal($$anchor, $$props) {
|
|
|
7288
7288
|
var node_8 = child(div_6);
|
|
7289
7289
|
{
|
|
7290
7290
|
var consequent_1 = ($$anchor5) => {
|
|
7291
|
-
var span_2 = root_7$
|
|
7291
|
+
var span_2 = root_7$7();
|
|
7292
7292
|
var node_9 = child(span_2);
|
|
7293
7293
|
{
|
|
7294
7294
|
let $02 = /* @__PURE__ */ user_derived(() => get$1(currentOption)?.answer);
|
|
@@ -7615,10 +7615,10 @@ function InteractionSection($$anchor, $$props) {
|
|
|
7615
7615
|
return pop($$exports);
|
|
7616
7616
|
}
|
|
7617
7617
|
create_custom_element(InteractionSection, { children: {} }, [], [], true);
|
|
7618
|
-
var root_5$
|
|
7618
|
+
var root_5$8 = /* @__PURE__ */ from_html(`<div></div>`);
|
|
7619
7619
|
var root_4$7 = /* @__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);
|
|
7620
|
-
var root_7$
|
|
7621
|
-
var root_2$
|
|
7620
|
+
var root_7$6 = /* @__PURE__ */ from_html(`<div></div>`);
|
|
7621
|
+
var root_2$b = /* @__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>`);
|
|
7622
7622
|
function PromptStimulusImageModal($$anchor, $$props) {
|
|
7623
7623
|
push($$props, true);
|
|
7624
7624
|
let isOpen = prop($$props, "isOpen", 7, false), imageUrl = prop($$props, "imageUrl", 7, ""), altText = prop($$props, "altText", 7, ""), caption = prop($$props, "caption", 7, ""), onclose = prop($$props, "onclose", 7);
|
|
@@ -7752,7 +7752,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
|
|
|
7752
7752
|
dataTestId: "img-viewer-mdl",
|
|
7753
7753
|
onupdateModalSettings: updateModalSettings,
|
|
7754
7754
|
children: ($$anchor3, $$slotProps) => {
|
|
7755
|
-
var div = root_2$
|
|
7755
|
+
var div = root_2$b();
|
|
7756
7756
|
var div_1 = child(div);
|
|
7757
7757
|
var div_2 = child(div_1);
|
|
7758
7758
|
var text2 = child(div_2, true);
|
|
@@ -7789,7 +7789,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
|
|
|
7789
7789
|
var node_3 = sibling(div_5, 2);
|
|
7790
7790
|
{
|
|
7791
7791
|
var consequent = ($$anchor5) => {
|
|
7792
|
-
var div_6 = root_5$
|
|
7792
|
+
var div_6 = root_5$8();
|
|
7793
7793
|
template_effect(() => set_style(div_6, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
|
|
7794
7794
|
append($$anchor5, div_6);
|
|
7795
7795
|
};
|
|
@@ -7808,7 +7808,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
|
|
|
7808
7808
|
var node_4 = first_child(fragment_4);
|
|
7809
7809
|
{
|
|
7810
7810
|
var consequent_2 = ($$anchor5) => {
|
|
7811
|
-
var div_7 = root_7$
|
|
7811
|
+
var div_7 = root_7$6();
|
|
7812
7812
|
template_effect(() => set_style(div_7, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
|
|
7813
7813
|
append($$anchor5, div_7);
|
|
7814
7814
|
};
|
|
@@ -8272,8 +8272,8 @@ const shouldRenderSection = (section) => section.condition !== false;
|
|
|
8272
8272
|
const getClassString = (classes = []) => classes.join(" ");
|
|
8273
8273
|
const getStyleString = (styles = {}) => Object.entries(styles).map(([k, v]) => `${k}:${v}`).join(";");
|
|
8274
8274
|
var root_4$6 = /* @__PURE__ */ from_html(`<p class="text-lg leading-[22px] text-blue-1000 font-semibold mt-4" data-testid="img-cap-txt"> </p>`);
|
|
8275
|
-
var root_5$
|
|
8276
|
-
var root_2$
|
|
8275
|
+
var root_5$7 = /* @__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>`);
|
|
8276
|
+
var root_2$a = /* @__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);
|
|
8277
8277
|
var root_1$j = /* @__PURE__ */ from_html(`<div class="w-full"><!></div>`);
|
|
8278
8278
|
function CommonMedia($$anchor, $$props) {
|
|
8279
8279
|
push($$props, true);
|
|
@@ -8365,7 +8365,7 @@ function CommonMedia($$anchor, $$props) {
|
|
|
8365
8365
|
var node_1 = child(div);
|
|
8366
8366
|
{
|
|
8367
8367
|
var consequent_2 = ($$anchor3) => {
|
|
8368
|
-
var fragment_1 = root_2$
|
|
8368
|
+
var fragment_1 = root_2$a();
|
|
8369
8369
|
var div_1 = first_child(fragment_1);
|
|
8370
8370
|
var div_2 = child(div_1);
|
|
8371
8371
|
var div_3 = child(div_2);
|
|
@@ -8405,7 +8405,7 @@ function CommonMedia($$anchor, $$props) {
|
|
|
8405
8405
|
var node_4 = sibling(div_1, 2);
|
|
8406
8406
|
{
|
|
8407
8407
|
var consequent_1 = ($$anchor4) => {
|
|
8408
|
-
var div_4 = root_5$
|
|
8408
|
+
var div_4 = root_5$7();
|
|
8409
8409
|
var button = child(div_4);
|
|
8410
8410
|
button.__click = toggleLongDescription;
|
|
8411
8411
|
button.__keydown = handleKeyDown;
|
|
@@ -8494,10 +8494,10 @@ create_custom_element(
|
|
|
8494
8494
|
true
|
|
8495
8495
|
);
|
|
8496
8496
|
var root_4$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
|
|
8497
|
-
var root_5$
|
|
8497
|
+
var root_5$6 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
|
|
8498
8498
|
var root_3$b = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
8499
|
-
var root_7$
|
|
8500
|
-
var root_8$
|
|
8499
|
+
var root_7$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
|
|
8500
|
+
var root_8$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
|
|
8501
8501
|
var root_6$4 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
8502
8502
|
var root_1$i = /* @__PURE__ */ from_html(`<div class="stimulus-section flex flex-col w-full"><!> <div><!></div></div>`);
|
|
8503
8503
|
function StimulusSection($$anchor, $$props) {
|
|
@@ -8612,7 +8612,7 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8612
8612
|
var node_5 = sibling(node_3, 2);
|
|
8613
8613
|
{
|
|
8614
8614
|
var consequent_2 = ($$anchor4) => {
|
|
8615
|
-
var div_3 = root_5$
|
|
8615
|
+
var div_3 = root_5$6();
|
|
8616
8616
|
let classes_2;
|
|
8617
8617
|
var node_6 = child(div_3);
|
|
8618
8618
|
CommonMedia(node_6, {
|
|
@@ -8651,7 +8651,7 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8651
8651
|
var node_7 = first_child(fragment_3);
|
|
8652
8652
|
{
|
|
8653
8653
|
var consequent_4 = ($$anchor4) => {
|
|
8654
|
-
var div_4 = root_7$
|
|
8654
|
+
var div_4 = root_7$5();
|
|
8655
8655
|
let classes_3;
|
|
8656
8656
|
var node_8 = child(div_4);
|
|
8657
8657
|
CommonMedia(node_8, {
|
|
@@ -8686,7 +8686,7 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8686
8686
|
var node_9 = sibling(node_7, 2);
|
|
8687
8687
|
{
|
|
8688
8688
|
var consequent_5 = ($$anchor4) => {
|
|
8689
|
-
var div_5 = root_8$
|
|
8689
|
+
var div_5 = root_8$5();
|
|
8690
8690
|
var node_10 = child(div_5);
|
|
8691
8691
|
CommonStringToHtml(node_10, {
|
|
8692
8692
|
get htmlString() {
|
|
@@ -8735,7 +8735,7 @@ create_custom_element(
|
|
|
8735
8735
|
[],
|
|
8736
8736
|
true
|
|
8737
8737
|
);
|
|
8738
|
-
var root_8$
|
|
8738
|
+
var root_8$4 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
|
|
8739
8739
|
var root_13$3 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
|
|
8740
8740
|
var root_15$1 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
|
|
8741
8741
|
var root_1$h = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
@@ -8914,7 +8914,7 @@ function PromptContainer($$anchor, $$props) {
|
|
|
8914
8914
|
var node_3 = first_child(fragment_6);
|
|
8915
8915
|
{
|
|
8916
8916
|
var consequent_3 = ($$anchor6) => {
|
|
8917
|
-
var div_4 = root_8$
|
|
8917
|
+
var div_4 = root_8$4();
|
|
8918
8918
|
append($$anchor6, div_4);
|
|
8919
8919
|
};
|
|
8920
8920
|
var alternate_2 = ($$anchor6) => {
|
|
@@ -9124,13 +9124,13 @@ create_custom_element(
|
|
|
9124
9124
|
true
|
|
9125
9125
|
);
|
|
9126
9126
|
var root_1$g = /* @__PURE__ */ from_html(`<div class="sr-only" tabindex="-1"><!></div>`);
|
|
9127
|
-
var root_2$
|
|
9127
|
+
var root_2$9 = /* @__PURE__ */ from_html(`<span> </span>`);
|
|
9128
9128
|
var root_3$a = /* @__PURE__ */ from_html(`<span>Missing answer</span>`);
|
|
9129
9129
|
var root_4$4 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
|
|
9130
|
-
var root_5$
|
|
9130
|
+
var root_5$5 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
|
|
9131
9131
|
var root_6$3 = /* @__PURE__ */ from_html(`<p>Missing answer</p>`);
|
|
9132
|
-
var root_7$
|
|
9133
|
-
var root_8$
|
|
9132
|
+
var root_7$4 = /* @__PURE__ */ from_html(`<p class="text-red-400 text-sm font-semibold leading-[1.3] pr-2.5 hidden md:block"> </p>`);
|
|
9133
|
+
var root_8$3 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
|
|
9134
9134
|
var root_12$3 = /* @__PURE__ */ from_html(`<span class="w-3 h-2 flex items-center justify-center"><!></span>`);
|
|
9135
9135
|
var root_11$1 = /* @__PURE__ */ from_html(`<span><!></span>`);
|
|
9136
9136
|
var root_13$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>`);
|
|
@@ -9273,7 +9273,7 @@ function MCQOption($$anchor, $$props) {
|
|
|
9273
9273
|
var node_2 = child(span_4);
|
|
9274
9274
|
{
|
|
9275
9275
|
var consequent_1 = ($$anchor2) => {
|
|
9276
|
-
var span_5 = root_2$
|
|
9276
|
+
var span_5 = root_2$9();
|
|
9277
9277
|
var text_1 = child(span_5, true);
|
|
9278
9278
|
reset(span_5);
|
|
9279
9279
|
template_effect(() => {
|
|
@@ -9322,7 +9322,7 @@ function MCQOption($$anchor, $$props) {
|
|
|
9322
9322
|
var node_6 = sibling(node_5, 2);
|
|
9323
9323
|
{
|
|
9324
9324
|
var consequent_4 = ($$anchor2) => {
|
|
9325
|
-
var span_8 = root_5$
|
|
9325
|
+
var span_8 = root_5$5();
|
|
9326
9326
|
var text_3 = child(span_8, true);
|
|
9327
9327
|
reset(span_8);
|
|
9328
9328
|
template_effect(() => set_text(text_3, get$1(labelSuffix)));
|
|
@@ -9350,7 +9350,7 @@ function MCQOption($$anchor, $$props) {
|
|
|
9350
9350
|
var node_8 = sibling(node_7, 2);
|
|
9351
9351
|
{
|
|
9352
9352
|
var consequent_6 = ($$anchor2) => {
|
|
9353
|
-
var p_1 = root_7$
|
|
9353
|
+
var p_1 = root_7$4();
|
|
9354
9354
|
var text_4 = child(p_1, true);
|
|
9355
9355
|
reset(p_1);
|
|
9356
9356
|
template_effect(() => set_text(text_4, get$1(isInteractiveMode2) ? "Your answer" : get$1(isPreviewMode2) ? "" : "Student's answer"));
|
|
@@ -9363,7 +9363,7 @@ function MCQOption($$anchor, $$props) {
|
|
|
9363
9363
|
var node_9 = sibling(node_8, 2);
|
|
9364
9364
|
{
|
|
9365
9365
|
var consequent_8 = ($$anchor2) => {
|
|
9366
|
-
var span_10 = root_8$
|
|
9366
|
+
var span_10 = root_8$3();
|
|
9367
9367
|
var node_10 = child(span_10);
|
|
9368
9368
|
{
|
|
9369
9369
|
var consequent_7 = ($$anchor3) => {
|
|
@@ -9509,7 +9509,7 @@ create_custom_element(
|
|
|
9509
9509
|
[],
|
|
9510
9510
|
true
|
|
9511
9511
|
);
|
|
9512
|
-
var root_2$
|
|
9512
|
+
var root_2$8 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
|
|
9513
9513
|
var root_1$f = /* @__PURE__ */ from_html(`<div><!> <div></div></div>`);
|
|
9514
9514
|
var root_4$3 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-center p-4"><div class="text-gray-500">Loading...</div></div>`);
|
|
9515
9515
|
function MCQInteractionContent($$anchor, $$props) {
|
|
@@ -9569,7 +9569,7 @@ function MCQInteractionContent($$anchor, $$props) {
|
|
|
9569
9569
|
var node_1 = child(div);
|
|
9570
9570
|
{
|
|
9571
9571
|
var consequent = ($$anchor3) => {
|
|
9572
|
-
var div_1 = root_2$
|
|
9572
|
+
var div_1 = root_2$8();
|
|
9573
9573
|
append($$anchor3, div_1);
|
|
9574
9574
|
};
|
|
9575
9575
|
if_block(node_1, ($$render) => {
|
|
@@ -10227,7 +10227,7 @@ function shouldSaveTextAnswer(currentAnswer, latestAnswer, isDataSaving) {
|
|
|
10227
10227
|
return !isDataSaving && hasChanged;
|
|
10228
10228
|
}
|
|
10229
10229
|
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>`);
|
|
10230
|
-
var root_2$
|
|
10230
|
+
var root_2$7 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 absolute right-4 top-3.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
|
|
10231
10231
|
var root$c = /* @__PURE__ */ from_html(`<span><!> <input data-testid="input-inline-txb" placeholder="Type your answer here" autocomplete="off"/> <!></span>`);
|
|
10232
10232
|
function TypeInInlineField($$anchor, $$props) {
|
|
10233
10233
|
push($$props, true);
|
|
@@ -10353,7 +10353,7 @@ function TypeInInlineField($$anchor, $$props) {
|
|
|
10353
10353
|
var node_1 = sibling(input, 2);
|
|
10354
10354
|
{
|
|
10355
10355
|
var consequent_1 = ($$anchor2) => {
|
|
10356
|
-
var span_2 = root_2$
|
|
10356
|
+
var span_2 = root_2$7();
|
|
10357
10357
|
var node_2 = child(span_2);
|
|
10358
10358
|
{
|
|
10359
10359
|
let $0 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()));
|
|
@@ -10406,8 +10406,8 @@ create_custom_element(
|
|
|
10406
10406
|
);
|
|
10407
10407
|
var root_1$d = /* @__PURE__ */ from_html(`<p class="p2 text-red-400 mb-3">Student's answer</p>`);
|
|
10408
10408
|
var root_3$8 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
|
|
10409
|
-
var root_2$
|
|
10410
|
-
var root_5$
|
|
10409
|
+
var root_2$6 = /* @__PURE__ */ from_html(`<div class="relative"><textarea autocomplete="off" rows="3"></textarea> <!></div>`);
|
|
10410
|
+
var root_5$4 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
|
|
10411
10411
|
var root_4$2 = /* @__PURE__ */ from_html(`<div class="relative"><input autocomplete="off"/> <!></div>`);
|
|
10412
10412
|
var root$b = /* @__PURE__ */ from_html(`<div class="relative"><!> <!></div>`);
|
|
10413
10413
|
function TypeInTextField($$anchor, $$props) {
|
|
@@ -10551,7 +10551,7 @@ function TypeInTextField($$anchor, $$props) {
|
|
|
10551
10551
|
var node_1 = sibling(node, 2);
|
|
10552
10552
|
{
|
|
10553
10553
|
var consequent_2 = ($$anchor2) => {
|
|
10554
|
-
var div_1 = root_2$
|
|
10554
|
+
var div_1 = root_2$6();
|
|
10555
10555
|
var textarea = child(div_1);
|
|
10556
10556
|
remove_textarea_child(textarea);
|
|
10557
10557
|
textarea.__mousedown = handleMouseDown;
|
|
@@ -10611,7 +10611,7 @@ function TypeInTextField($$anchor, $$props) {
|
|
|
10611
10611
|
var node_4 = sibling(input, 2);
|
|
10612
10612
|
{
|
|
10613
10613
|
var consequent_3 = ($$anchor3) => {
|
|
10614
|
-
var span_1 = root_5$
|
|
10614
|
+
var span_1 = root_5$4();
|
|
10615
10615
|
var node_5 = child(span_1);
|
|
10616
10616
|
{
|
|
10617
10617
|
let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
|
|
@@ -10745,9 +10745,9 @@ const action = (node) => {
|
|
|
10745
10745
|
action.update = n.update;
|
|
10746
10746
|
action.destroy = n.destroy;
|
|
10747
10747
|
var root_1$c = /* @__PURE__ */ from_html(`<label data-testid="qn-number-txt" aria-hidden="true"><span></span> <span> </span></label>`);
|
|
10748
|
-
var root_2$
|
|
10748
|
+
var root_2$5 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
|
|
10749
10749
|
var root_4$1 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true" data-testid="ans-sum-corr-txb"><!></div>`);
|
|
10750
|
-
var root_5$
|
|
10750
|
+
var root_5$3 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
|
|
10751
10751
|
var root_6$2 = /* @__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>`);
|
|
10752
10752
|
var root$a = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
|
|
10753
10753
|
function AnswerDisplay($$anchor, $$props) {
|
|
@@ -10903,7 +10903,7 @@ function AnswerDisplay($$anchor, $$props) {
|
|
|
10903
10903
|
var node_1 = sibling(node, 2);
|
|
10904
10904
|
{
|
|
10905
10905
|
var consequent_1 = ($$anchor2) => {
|
|
10906
|
-
var div_1 = root_2$
|
|
10906
|
+
var div_1 = root_2$5();
|
|
10907
10907
|
var node_2 = child(div_1);
|
|
10908
10908
|
CommonStringToHtml(node_2, {
|
|
10909
10909
|
get htmlString() {
|
|
@@ -10951,7 +10951,7 @@ function AnswerDisplay($$anchor, $$props) {
|
|
|
10951
10951
|
append($$anchor3, div_2);
|
|
10952
10952
|
};
|
|
10953
10953
|
var alternate = ($$anchor3) => {
|
|
10954
|
-
var textarea = root_5$
|
|
10954
|
+
var textarea = root_5$3();
|
|
10955
10955
|
remove_textarea_child(textarea);
|
|
10956
10956
|
action$1(textarea, ($$node) => action?.($$node));
|
|
10957
10957
|
template_effect(() => {
|
|
@@ -11264,7 +11264,7 @@ create_custom_element(
|
|
|
11264
11264
|
true
|
|
11265
11265
|
);
|
|
11266
11266
|
var root_1$a = /* @__PURE__ */ from_html(`<div aria-hidden="true" class="flex items-center text-charcoal mt-2" data-testid="info-alt-ans-txt"><!> <span class="p3">There is more than one possible correct answer for this question.</span></div>`);
|
|
11267
|
-
var root_2$
|
|
11267
|
+
var root_2$4 = /* @__PURE__ */ from_html(`<div class="mt-4"><!></div>`);
|
|
11268
11268
|
var root$8 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
|
|
11269
11269
|
function TypeInFeedback($$anchor, $$props) {
|
|
11270
11270
|
push($$props, true);
|
|
@@ -11375,7 +11375,7 @@ function TypeInFeedback($$anchor, $$props) {
|
|
|
11375
11375
|
var node_2 = sibling(node, 2);
|
|
11376
11376
|
{
|
|
11377
11377
|
var consequent_1 = ($$anchor2) => {
|
|
11378
|
-
var div_1 = root_2$
|
|
11378
|
+
var div_1 = root_2$4();
|
|
11379
11379
|
var node_3 = child(div_1);
|
|
11380
11380
|
{
|
|
11381
11381
|
let $0 = /* @__PURE__ */ user_derived(() => feedbackState().isResultCorrect ? "correct" : feedbackState().isSkipped ? "skipped" : "incorrect");
|
|
@@ -11451,12 +11451,12 @@ create_custom_element(
|
|
|
11451
11451
|
true
|
|
11452
11452
|
);
|
|
11453
11453
|
var root_3$7 = /* @__PURE__ */ from_html(`<p></p>`);
|
|
11454
|
-
var root_8$
|
|
11455
|
-
var root_2$
|
|
11454
|
+
var root_8$2 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
|
|
11455
|
+
var root_2$3 = /* @__PURE__ */ from_html(`<div class="inline-typein-container mt-6 relative"><!> <div class="divider my-6"></div> <!></div>`);
|
|
11456
11456
|
var root_10$2 = /* @__PURE__ */ from_html(`<div class="mb-4"><!></div>`);
|
|
11457
11457
|
var root_13$1 = /* @__PURE__ */ from_html(`<div role="textbox" tabindex="0" aria-readonly="true" aria-labelledby="missing-answer-label" class="typein-textbox typein-textbox-missing border-2 border-green-700 py-[9px] px-4"><!></div>`);
|
|
11458
11458
|
var root_12$2 = /* @__PURE__ */ from_html(`<div class="mt-6"><p id="missing-answer-label" class="p2 text-green-750 mb-3">Missing answer</p> <!></div>`);
|
|
11459
|
-
var root_9$
|
|
11459
|
+
var root_9$2 = /* @__PURE__ */ from_html(`<!> <!> <span class="sr-only" aria-live="polite" aria-atomic="true"> </span> <!>`, 1);
|
|
11460
11460
|
function TypeInComponent($$anchor, $$props) {
|
|
11461
11461
|
push($$props, true);
|
|
11462
11462
|
let api = prop($$props, "api", 7), config = prop($$props, "config", 7), isDataSaving = prop($$props, "isDataSaving", 7, false), onstateChange = prop($$props, "onstateChange", 7);
|
|
@@ -11691,7 +11691,7 @@ function TypeInComponent($$anchor, $$props) {
|
|
|
11691
11691
|
var node = first_child(fragment_1);
|
|
11692
11692
|
{
|
|
11693
11693
|
var consequent_3 = ($$anchor3) => {
|
|
11694
|
-
var div = root_2$
|
|
11694
|
+
var div = root_2$3();
|
|
11695
11695
|
var node_1 = child(div);
|
|
11696
11696
|
each(node_1, 17, () => segments, index, ($$anchor4, segment) => {
|
|
11697
11697
|
var p_1 = root_3$7();
|
|
@@ -11765,7 +11765,7 @@ function TypeInComponent($$anchor, $$props) {
|
|
|
11765
11765
|
var node_5 = sibling(node_1, 4);
|
|
11766
11766
|
{
|
|
11767
11767
|
var consequent_2 = ($$anchor4) => {
|
|
11768
|
-
var div_1 = root_8$
|
|
11768
|
+
var div_1 = root_8$2();
|
|
11769
11769
|
append($$anchor4, div_1);
|
|
11770
11770
|
};
|
|
11771
11771
|
if_block(node_5, ($$render) => {
|
|
@@ -11777,7 +11777,7 @@ function TypeInComponent($$anchor, $$props) {
|
|
|
11777
11777
|
append($$anchor3, div);
|
|
11778
11778
|
};
|
|
11779
11779
|
var alternate_2 = ($$anchor3) => {
|
|
11780
|
-
var fragment_6 = root_9$
|
|
11780
|
+
var fragment_6 = root_9$2();
|
|
11781
11781
|
var node_6 = first_child(fragment_6);
|
|
11782
11782
|
{
|
|
11783
11783
|
var consequent_4 = ($$anchor4) => {
|
|
@@ -14465,15 +14465,15 @@ function isInt(value) {
|
|
|
14465
14465
|
return (x | 0) === x;
|
|
14466
14466
|
})(parseFloat(value));
|
|
14467
14467
|
}
|
|
14468
|
-
var root_1$9 = /* @__PURE__ */ from_html(`<span class="
|
|
14469
|
-
var
|
|
14470
|
-
var
|
|
14471
|
-
var
|
|
14472
|
-
var
|
|
14473
|
-
var root$7 = /* @__PURE__ */ from_html(`<button data-item-button=""><span class="sr-only"> </span> <span><!></span> <!> <div aria-hidden="true"><span></span> <span class="absolute"><!> <!></span></div></button>`);
|
|
14468
|
+
var root_1$9 = /* @__PURE__ */ from_html(`<span class="text-green-800 preview-icon"><!></span>`);
|
|
14469
|
+
var root_3$6 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
|
|
14470
|
+
var root_5$2 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
|
|
14471
|
+
var root_7$3 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
|
|
14472
|
+
var root$7 = /* @__PURE__ */ from_html(`<button data-item-button=""><span><!></span> <div><span></span> <span class="absolute"><!> <!></span></div></button>`);
|
|
14474
14473
|
function CategoriseItem($$anchor, $$props) {
|
|
14475
14474
|
push($$props, true);
|
|
14476
14475
|
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);
|
|
14476
|
+
const ariaWord = useRemoveRichTextHtmlTags(itemText());
|
|
14477
14477
|
const isWordBin = containerId() === CATEGORISE.CONTAINER_WORD_BIN_ID;
|
|
14478
14478
|
let touchStartX = /* @__PURE__ */ state(0);
|
|
14479
14479
|
let touchStartY = /* @__PURE__ */ state(0);
|
|
@@ -14483,23 +14483,17 @@ function CategoriseItem($$anchor, $$props) {
|
|
|
14483
14483
|
const isSelected = /* @__PURE__ */ user_derived(() => selectedItemId() === get$1(cleanItemId));
|
|
14484
14484
|
const hasAnyItemSelected = /* @__PURE__ */ user_derived(() => !!selectedItemId());
|
|
14485
14485
|
const canInteract = /* @__PURE__ */ user_derived(() => !isLocked() && (!resultType() || mode() === MODES.INTERACTIVE));
|
|
14486
|
-
const
|
|
14486
|
+
const ariaLabel = /* @__PURE__ */ user_derived(() => () => {
|
|
14487
14487
|
if (resultType() === ANSWER_RESULTS.INCORRECT && isWordBin && !get$1(isSelected)) {
|
|
14488
|
-
return
|
|
14488
|
+
return `Skipped answer: ${ariaWord}`;
|
|
14489
14489
|
}
|
|
14490
14490
|
if ((resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) && !get$1(isSelected)) {
|
|
14491
|
-
return
|
|
14491
|
+
return `Student's answer: ${ariaWord} (${resultType()})`;
|
|
14492
14492
|
}
|
|
14493
14493
|
if (resultType() === ANSWER_RESULTS.MISSED) {
|
|
14494
|
-
return
|
|
14494
|
+
return `Missing answer: ${ariaWord}`;
|
|
14495
14495
|
}
|
|
14496
|
-
return `${get$1(isSelected) ? "Selected option" : "Option"}
|
|
14497
|
-
});
|
|
14498
|
-
const ariaSuffix = /* @__PURE__ */ user_derived(() => () => {
|
|
14499
|
-
if ((resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) && !get$1(isSelected)) {
|
|
14500
|
-
return `(${resultType()})`;
|
|
14501
|
-
}
|
|
14502
|
-
return "";
|
|
14496
|
+
return `${get$1(isSelected) ? "Selected option" : "Option"}: ${ariaWord}`;
|
|
14503
14497
|
});
|
|
14504
14498
|
const handleFocus = (event2) => {
|
|
14505
14499
|
set(lastFocusTime, Date.now(), true);
|
|
@@ -14774,75 +14768,59 @@ function CategoriseItem($$anchor, $$props) {
|
|
|
14774
14768
|
button.__touchend = handleTouchEnd;
|
|
14775
14769
|
button.__keydown = handleKeyDown;
|
|
14776
14770
|
var span = child(button);
|
|
14777
|
-
var
|
|
14778
|
-
reset(span);
|
|
14779
|
-
var span_1 = sibling(span, 2);
|
|
14780
|
-
var node = child(span_1);
|
|
14771
|
+
var node = child(span);
|
|
14781
14772
|
CommonStringToHtml(node, {
|
|
14782
14773
|
get htmlString() {
|
|
14783
14774
|
return itemText();
|
|
14784
14775
|
},
|
|
14785
14776
|
otherClass: "inline-block w-full"
|
|
14786
14777
|
});
|
|
14787
|
-
reset(
|
|
14788
|
-
var
|
|
14778
|
+
reset(span);
|
|
14779
|
+
var div = sibling(span, 2);
|
|
14780
|
+
var span_1 = child(div);
|
|
14781
|
+
var span_2 = sibling(span_1, 2);
|
|
14782
|
+
var node_1 = child(span_2);
|
|
14789
14783
|
{
|
|
14790
14784
|
var consequent = ($$anchor2) => {
|
|
14791
|
-
var
|
|
14792
|
-
var
|
|
14793
|
-
|
|
14794
|
-
template_effect(($0) => set_text(text_1, $0), [() => get$1(ariaSuffix)()]);
|
|
14795
|
-
append($$anchor2, span_2);
|
|
14796
|
-
};
|
|
14797
|
-
if_block(node_1, ($$render) => {
|
|
14798
|
-
if (get$1(ariaSuffix)()) $$render(consequent);
|
|
14799
|
-
});
|
|
14800
|
-
}
|
|
14801
|
-
var div = sibling(node_1, 2);
|
|
14802
|
-
var span_3 = child(div);
|
|
14803
|
-
var span_4 = sibling(span_3, 2);
|
|
14804
|
-
var node_2 = child(span_4);
|
|
14805
|
-
{
|
|
14806
|
-
var consequent_1 = ($$anchor2) => {
|
|
14807
|
-
var span_5 = root_2$5();
|
|
14808
|
-
var node_3 = child(span_5);
|
|
14809
|
-
SvgLoader(node_3, {
|
|
14785
|
+
var span_3 = root_1$9();
|
|
14786
|
+
var node_2 = child(span_3);
|
|
14787
|
+
SvgLoader(node_2, {
|
|
14810
14788
|
svgName: "successSolid",
|
|
14811
14789
|
className: "correct-icon",
|
|
14812
14790
|
dataTestId: "icon-correct"
|
|
14813
14791
|
});
|
|
14814
|
-
reset(
|
|
14815
|
-
append($$anchor2,
|
|
14792
|
+
reset(span_3);
|
|
14793
|
+
append($$anchor2, span_3);
|
|
14816
14794
|
};
|
|
14817
14795
|
var alternate_2 = ($$anchor2) => {
|
|
14818
14796
|
var fragment = comment();
|
|
14819
|
-
var
|
|
14797
|
+
var node_3 = first_child(fragment);
|
|
14820
14798
|
{
|
|
14821
|
-
var
|
|
14822
|
-
var
|
|
14823
|
-
var
|
|
14824
|
-
SvgLoader(
|
|
14799
|
+
var consequent_1 = ($$anchor3) => {
|
|
14800
|
+
var span_4 = root_3$6();
|
|
14801
|
+
var node_4 = child(span_4);
|
|
14802
|
+
SvgLoader(node_4, {
|
|
14825
14803
|
svgName: "errorSolid",
|
|
14826
14804
|
className: "incorrect-icon",
|
|
14827
14805
|
dataTestId: "icon-incorrect"
|
|
14828
14806
|
});
|
|
14829
|
-
reset(
|
|
14830
|
-
append($$anchor3,
|
|
14807
|
+
reset(span_4);
|
|
14808
|
+
append($$anchor3, span_4);
|
|
14831
14809
|
};
|
|
14832
14810
|
var alternate_1 = ($$anchor3) => {
|
|
14833
14811
|
var fragment_1 = comment();
|
|
14834
|
-
var
|
|
14812
|
+
var node_5 = first_child(fragment_1);
|
|
14835
14813
|
{
|
|
14836
|
-
var
|
|
14837
|
-
var
|
|
14838
|
-
var
|
|
14839
|
-
SvgLoader(
|
|
14814
|
+
var consequent_2 = ($$anchor4) => {
|
|
14815
|
+
var span_5 = root_5$2();
|
|
14816
|
+
var node_6 = child(span_5);
|
|
14817
|
+
SvgLoader(node_6, {
|
|
14840
14818
|
svgName: "success",
|
|
14841
14819
|
className: "missing-correct-icon",
|
|
14842
14820
|
dataTestId: "icon-miss-corr"
|
|
14843
14821
|
});
|
|
14844
|
-
reset(
|
|
14845
|
-
append($$anchor4,
|
|
14822
|
+
reset(span_5);
|
|
14823
|
+
append($$anchor4, span_5);
|
|
14846
14824
|
};
|
|
14847
14825
|
var alternate = ($$anchor4) => {
|
|
14848
14826
|
SvgLoader($$anchor4, {
|
|
@@ -14852,9 +14830,9 @@ function CategoriseItem($$anchor, $$props) {
|
|
|
14852
14830
|
});
|
|
14853
14831
|
};
|
|
14854
14832
|
if_block(
|
|
14855
|
-
|
|
14833
|
+
node_5,
|
|
14856
14834
|
($$render) => {
|
|
14857
|
-
if (resultType() === ANSWER_RESULTS.MISSED) $$render(
|
|
14835
|
+
if (resultType() === ANSWER_RESULTS.MISSED) $$render(consequent_2);
|
|
14858
14836
|
else $$render(alternate, false);
|
|
14859
14837
|
},
|
|
14860
14838
|
true
|
|
@@ -14863,9 +14841,9 @@ function CategoriseItem($$anchor, $$props) {
|
|
|
14863
14841
|
append($$anchor3, fragment_1);
|
|
14864
14842
|
};
|
|
14865
14843
|
if_block(
|
|
14866
|
-
|
|
14844
|
+
node_3,
|
|
14867
14845
|
($$render) => {
|
|
14868
|
-
if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) $$render(
|
|
14846
|
+
if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) $$render(consequent_1);
|
|
14869
14847
|
else $$render(alternate_1, false);
|
|
14870
14848
|
},
|
|
14871
14849
|
true
|
|
@@ -14873,48 +14851,48 @@ function CategoriseItem($$anchor, $$props) {
|
|
|
14873
14851
|
}
|
|
14874
14852
|
append($$anchor2, fragment);
|
|
14875
14853
|
};
|
|
14876
|
-
if_block(
|
|
14877
|
-
if (resultType() === ANSWER_RESULTS.CORRECT && !get$1(isSelected)) $$render(
|
|
14854
|
+
if_block(node_1, ($$render) => {
|
|
14855
|
+
if (resultType() === ANSWER_RESULTS.CORRECT && !get$1(isSelected)) $$render(consequent);
|
|
14878
14856
|
else $$render(alternate_2, false);
|
|
14879
14857
|
});
|
|
14880
14858
|
}
|
|
14881
|
-
var
|
|
14859
|
+
var node_7 = sibling(node_1, 2);
|
|
14882
14860
|
{
|
|
14883
|
-
var
|
|
14884
|
-
var
|
|
14885
|
-
var
|
|
14886
|
-
SvgLoader(
|
|
14861
|
+
var consequent_3 = ($$anchor2) => {
|
|
14862
|
+
var span_6 = root_7$3();
|
|
14863
|
+
var node_8 = child(span_6);
|
|
14864
|
+
SvgLoader(node_8, {
|
|
14887
14865
|
svgName: "gripVertical",
|
|
14888
14866
|
className: "grip-icon",
|
|
14889
14867
|
dataTestId: "icon-grip"
|
|
14890
14868
|
});
|
|
14891
|
-
reset(
|
|
14892
|
-
append($$anchor2,
|
|
14869
|
+
reset(span_6);
|
|
14870
|
+
append($$anchor2, span_6);
|
|
14893
14871
|
};
|
|
14894
|
-
if_block(
|
|
14895
|
-
if (resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) $$render(
|
|
14872
|
+
if_block(node_7, ($$render) => {
|
|
14873
|
+
if (resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) $$render(consequent_3);
|
|
14896
14874
|
});
|
|
14897
14875
|
}
|
|
14898
|
-
reset(
|
|
14876
|
+
reset(span_2);
|
|
14899
14877
|
reset(div);
|
|
14900
14878
|
reset(button);
|
|
14901
14879
|
template_effect(
|
|
14902
14880
|
($0, $1, $2, $3, $4, $5, $6) => {
|
|
14903
14881
|
set_attribute(button, "id", itemId());
|
|
14904
|
-
|
|
14905
|
-
|
|
14906
|
-
set_attribute(button, "
|
|
14882
|
+
set_attribute(button, "aria-label", $0);
|
|
14883
|
+
set_class(button, 1, $1);
|
|
14884
|
+
set_attribute(button, "data-testid", $2);
|
|
14885
|
+
set_attribute(button, "tabindex", $3);
|
|
14907
14886
|
button.disabled = isLocked() && !resultType();
|
|
14908
|
-
|
|
14909
|
-
set_class(span_1, 1, $4);
|
|
14887
|
+
set_class(span, 1, $4);
|
|
14910
14888
|
set_class(div, 1, $5);
|
|
14911
|
-
set_class(
|
|
14889
|
+
set_class(span_1, 1, $6);
|
|
14912
14890
|
},
|
|
14913
14891
|
[
|
|
14892
|
+
() => get$1(ariaLabel)(),
|
|
14914
14893
|
() => clsx(get$1(buttonClasses)()),
|
|
14915
14894
|
() => get$1(getItemTestId)(),
|
|
14916
14895
|
() => get$1(itemTabIndex)(),
|
|
14917
|
-
() => get$1(ariaPrefix)(),
|
|
14918
14896
|
() => clsx(get$1(textClasses)()),
|
|
14919
14897
|
() => clsx(get$1(iconContainerClasses)()),
|
|
14920
14898
|
() => clsx(get$1(iconBgClasses)())
|
|
@@ -14950,15 +14928,13 @@ create_custom_element(
|
|
|
14950
14928
|
[],
|
|
14951
14929
|
true
|
|
14952
14930
|
);
|
|
14953
|
-
var
|
|
14954
|
-
var
|
|
14955
|
-
var
|
|
14956
|
-
var root_9$2 = /* @__PURE__ */ from_html(`<div class="w-full text-base text-charcoal font-semibold mt-1 mb-2">Missing answers:</div>`);
|
|
14957
|
-
var root_8$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
14931
|
+
var root_1$8 = /* @__PURE__ */ from_html(`<button tabindex="0"></button>`);
|
|
14932
|
+
var root_7$2 = /* @__PURE__ */ from_html(`<div class="w-full text-base text-charcoal font-semibold mt-1 mb-2">Missing answers:</div>`);
|
|
14933
|
+
var root_6$1 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
14958
14934
|
var root$6 = /* @__PURE__ */ from_html(`<!> <section><!></section>`, 1);
|
|
14959
14935
|
function CategoriseDndContainer($$anchor, $$props) {
|
|
14960
14936
|
push($$props, true);
|
|
14961
|
-
let containerId = prop($$props, "containerId", 7), containerLabel = prop($$props, "containerLabel", 7, ""),
|
|
14937
|
+
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);
|
|
14962
14938
|
let considerItemId = /* @__PURE__ */ state(void 0);
|
|
14963
14939
|
let isHoveringDrag = /* @__PURE__ */ state(false);
|
|
14964
14940
|
let dragCounter = /* @__PURE__ */ state(0);
|
|
@@ -15105,20 +15081,6 @@ function CategoriseDndContainer($$anchor, $$props) {
|
|
|
15105
15081
|
containerLabel($$value);
|
|
15106
15082
|
flushSync();
|
|
15107
15083
|
},
|
|
15108
|
-
get containerLabelHtml() {
|
|
15109
|
-
return containerLabelHtml();
|
|
15110
|
-
},
|
|
15111
|
-
set containerLabelHtml($$value = "") {
|
|
15112
|
-
containerLabelHtml($$value);
|
|
15113
|
-
flushSync();
|
|
15114
|
-
},
|
|
15115
|
-
get containerIndex() {
|
|
15116
|
-
return containerIndex();
|
|
15117
|
-
},
|
|
15118
|
-
set containerIndex($$value = 0) {
|
|
15119
|
-
containerIndex($$value);
|
|
15120
|
-
flushSync();
|
|
15121
|
-
},
|
|
15122
15084
|
get containerClass() {
|
|
15123
15085
|
return containerClass();
|
|
15124
15086
|
},
|
|
@@ -15263,44 +15225,17 @@ function CategoriseDndContainer($$anchor, $$props) {
|
|
|
15263
15225
|
var fragment = root$6();
|
|
15264
15226
|
var node = first_child(fragment);
|
|
15265
15227
|
{
|
|
15266
|
-
var
|
|
15228
|
+
var consequent = ($$anchor2) => {
|
|
15267
15229
|
var button = root_1$8();
|
|
15268
15230
|
button.__click = handleContainerClick;
|
|
15269
|
-
|
|
15270
|
-
|
|
15271
|
-
|
|
15272
|
-
|
|
15273
|
-
var span = first_child(fragment_1);
|
|
15274
|
-
var text2 = child(span);
|
|
15275
|
-
reset(span);
|
|
15276
|
-
var node_2 = sibling(span, 2);
|
|
15277
|
-
CommonStringToHtml(node_2, {
|
|
15278
|
-
get htmlString() {
|
|
15279
|
-
return containerLabelHtml();
|
|
15280
|
-
},
|
|
15281
|
-
otherClass: "sr-only"
|
|
15282
|
-
});
|
|
15283
|
-
template_effect(() => set_text(text2, `Category ${containerIndex() ?? ""}:`));
|
|
15284
|
-
append($$anchor3, fragment_1);
|
|
15285
|
-
};
|
|
15286
|
-
var alternate = ($$anchor3) => {
|
|
15287
|
-
var span_1 = root_3$6();
|
|
15288
|
-
var text_1 = child(span_1, true);
|
|
15289
|
-
reset(span_1);
|
|
15290
|
-
template_effect(() => set_text(text_1, containerLabel()));
|
|
15291
|
-
append($$anchor3, span_1);
|
|
15292
|
-
};
|
|
15293
|
-
if_block(node_1, ($$render) => {
|
|
15294
|
-
if (containerLabelHtml()) $$render(consequent);
|
|
15295
|
-
else $$render(alternate, false);
|
|
15296
|
-
});
|
|
15297
|
-
}
|
|
15298
|
-
reset(button);
|
|
15299
|
-
template_effect(() => set_class(button, 1, `focus-ring absolute inset-0 bg-transparent rounded-lg z-10 pointer-events-auto focus-visible:border ${containerId() === "container-word-bin" ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"}`));
|
|
15231
|
+
template_effect(() => {
|
|
15232
|
+
set_class(button, 1, `focus-ring absolute inset-0 bg-transparent rounded-lg z-10 pointer-events-auto focus-visible:border ${containerId() === "container-word-bin" ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"}`);
|
|
15233
|
+
set_attribute(button, "aria-label", containerLabel());
|
|
15234
|
+
});
|
|
15300
15235
|
append($$anchor2, button);
|
|
15301
15236
|
};
|
|
15302
15237
|
if_block(node, ($$render) => {
|
|
15303
|
-
if (!isLocked() && selectedItemId() && !get$1(isSourceContainer)()) $$render(
|
|
15238
|
+
if (!isLocked() && selectedItemId() && !get$1(isSourceContainer)()) $$render(consequent);
|
|
15304
15239
|
});
|
|
15305
15240
|
}
|
|
15306
15241
|
var section = sibling(node, 2);
|
|
@@ -15308,50 +15243,50 @@ function CategoriseDndContainer($$anchor, $$props) {
|
|
|
15308
15243
|
section.__touchstart = handleSectionTouchStart;
|
|
15309
15244
|
section.__touchmove = handleSectionTouchMove;
|
|
15310
15245
|
set_attribute(section, "tabindex", -1);
|
|
15311
|
-
var
|
|
15246
|
+
var node_1 = child(section);
|
|
15312
15247
|
{
|
|
15313
|
-
var
|
|
15314
|
-
var
|
|
15315
|
-
var
|
|
15248
|
+
var consequent_2 = ($$anchor2) => {
|
|
15249
|
+
var fragment_1 = comment();
|
|
15250
|
+
var node_2 = first_child(fragment_1);
|
|
15316
15251
|
{
|
|
15317
|
-
var
|
|
15318
|
-
var
|
|
15319
|
-
var
|
|
15320
|
-
snippet(
|
|
15252
|
+
var consequent_1 = ($$anchor3) => {
|
|
15253
|
+
var fragment_2 = comment();
|
|
15254
|
+
var node_3 = first_child(fragment_2);
|
|
15255
|
+
snippet(node_3, children, () => ({ empty: () => {
|
|
15321
15256
|
} }));
|
|
15322
|
-
append($$anchor3,
|
|
15257
|
+
append($$anchor3, fragment_2);
|
|
15323
15258
|
};
|
|
15324
|
-
if_block(
|
|
15325
|
-
if (children()) $$render(
|
|
15259
|
+
if_block(node_2, ($$render) => {
|
|
15260
|
+
if (children()) $$render(consequent_1);
|
|
15326
15261
|
});
|
|
15327
15262
|
}
|
|
15328
|
-
append($$anchor2,
|
|
15263
|
+
append($$anchor2, fragment_1);
|
|
15329
15264
|
};
|
|
15330
|
-
var
|
|
15331
|
-
var
|
|
15332
|
-
var
|
|
15265
|
+
var alternate = ($$anchor2) => {
|
|
15266
|
+
var fragment_3 = comment();
|
|
15267
|
+
var node_4 = first_child(fragment_3);
|
|
15333
15268
|
{
|
|
15334
|
-
var
|
|
15335
|
-
var
|
|
15336
|
-
var
|
|
15337
|
-
each(
|
|
15269
|
+
var consequent_4 = ($$anchor3) => {
|
|
15270
|
+
var fragment_4 = comment();
|
|
15271
|
+
var node_5 = first_child(fragment_4);
|
|
15272
|
+
each(node_5, 19, () => get$1(localItems), (item) => `${item.id}-${get$1(dragCounter)}`, ($$anchor4, item, index2) => {
|
|
15338
15273
|
const itemResultType = /* @__PURE__ */ user_derived(() => getItemResultType(get$1(item).isClonedItem && get$1(item).cloneId ? get$1(item).cloneId : get$1(item).id));
|
|
15339
|
-
var
|
|
15340
|
-
var
|
|
15274
|
+
var fragment_5 = root_6$1();
|
|
15275
|
+
var node_6 = first_child(fragment_5);
|
|
15341
15276
|
{
|
|
15342
|
-
var
|
|
15343
|
-
var div =
|
|
15277
|
+
var consequent_3 = ($$anchor5) => {
|
|
15278
|
+
var div = root_7$2();
|
|
15344
15279
|
append($$anchor5, div);
|
|
15345
15280
|
};
|
|
15346
|
-
if_block(
|
|
15347
|
-
if (get$1(itemResultType) === ANSWER_RESULTS.MISSED && get$1(index2) === get$1(localItems).findIndex((i) => getItemResultType(i.id) === ANSWER_RESULTS.MISSED)) $$render(
|
|
15281
|
+
if_block(node_6, ($$render) => {
|
|
15282
|
+
if (get$1(itemResultType) === ANSWER_RESULTS.MISSED && get$1(index2) === get$1(localItems).findIndex((i) => getItemResultType(i.id) === ANSWER_RESULTS.MISSED)) $$render(consequent_3);
|
|
15348
15283
|
});
|
|
15349
15284
|
}
|
|
15350
|
-
var
|
|
15285
|
+
var node_7 = sibling(node_6, 2);
|
|
15351
15286
|
{
|
|
15352
15287
|
let $0 = /* @__PURE__ */ user_derived(() => get$1(item).itemText || "");
|
|
15353
15288
|
let $1 = /* @__PURE__ */ user_derived(() => get$1(considerItemId) === get$1(item).id);
|
|
15354
|
-
CategoriseItem(
|
|
15289
|
+
CategoriseItem(node_7, {
|
|
15355
15290
|
get itemId() {
|
|
15356
15291
|
return get$1(item).id;
|
|
15357
15292
|
},
|
|
@@ -15394,23 +15329,23 @@ function CategoriseDndContainer($$anchor, $$props) {
|
|
|
15394
15329
|
onkeydown: (e2) => onitemkeydown()?.(e2, get$1(item).id, get$1(index2))
|
|
15395
15330
|
});
|
|
15396
15331
|
}
|
|
15397
|
-
append($$anchor4,
|
|
15332
|
+
append($$anchor4, fragment_5);
|
|
15398
15333
|
});
|
|
15399
|
-
append($$anchor3,
|
|
15334
|
+
append($$anchor3, fragment_4);
|
|
15400
15335
|
};
|
|
15401
15336
|
if_block(
|
|
15402
|
-
|
|
15337
|
+
node_4,
|
|
15403
15338
|
($$render) => {
|
|
15404
|
-
if (showButton()) $$render(
|
|
15339
|
+
if (showButton()) $$render(consequent_4);
|
|
15405
15340
|
},
|
|
15406
15341
|
true
|
|
15407
15342
|
);
|
|
15408
15343
|
}
|
|
15409
|
-
append($$anchor2,
|
|
15344
|
+
append($$anchor2, fragment_3);
|
|
15410
15345
|
};
|
|
15411
|
-
if_block(
|
|
15412
|
-
if (get$1(isEmpty)) $$render(
|
|
15413
|
-
else $$render(
|
|
15346
|
+
if_block(node_1, ($$render) => {
|
|
15347
|
+
if (get$1(isEmpty)) $$render(consequent_2);
|
|
15348
|
+
else $$render(alternate, false);
|
|
15414
15349
|
});
|
|
15415
15350
|
}
|
|
15416
15351
|
reset(section);
|
|
@@ -15432,8 +15367,6 @@ create_custom_element(
|
|
|
15432
15367
|
{
|
|
15433
15368
|
containerId: {},
|
|
15434
15369
|
containerLabel: {},
|
|
15435
|
-
containerLabelHtml: {},
|
|
15436
|
-
containerIndex: {},
|
|
15437
15370
|
containerClass: {},
|
|
15438
15371
|
showButton: {},
|
|
15439
15372
|
items: {},
|
|
@@ -15459,10 +15392,10 @@ create_custom_element(
|
|
|
15459
15392
|
[],
|
|
15460
15393
|
true
|
|
15461
15394
|
);
|
|
15462
|
-
var root_2$
|
|
15395
|
+
var root_2$2 = /* @__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>`);
|
|
15463
15396
|
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>`);
|
|
15464
15397
|
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>`);
|
|
15465
|
-
var root$5 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-ctr"><div
|
|
15398
|
+
var root$5 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-ctr"><div><!> <!></div> <!></div>`);
|
|
15466
15399
|
function CategoriseCategory($$anchor, $$props) {
|
|
15467
15400
|
push($$props, true);
|
|
15468
15401
|
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);
|
|
@@ -15493,6 +15426,7 @@ function CategoriseCategory($$anchor, $$props) {
|
|
|
15493
15426
|
${get$1(effectiveIsCollapsed) && isDraggingOver() && get$1(isNotSourceContainer) ? "!bg-violet-100 md:!bg-white" : ""}
|
|
15494
15427
|
${get$1(effectiveIsCollapsed) && isMobile() ? "rounded-b-lg md:rounded-b-none" : ""}`);
|
|
15495
15428
|
const adjustedTabindex = /* @__PURE__ */ user_derived(tabindex);
|
|
15429
|
+
const shouldShowAriaLabel = /* @__PURE__ */ user_derived(() => !get$1(hasSelectedItem) || !get$1(isNotSourceContainer));
|
|
15496
15430
|
const handleToggle = () => {
|
|
15497
15431
|
if (isMobile() && ontogglecollapse()) {
|
|
15498
15432
|
ontogglecollapse()(categoryId());
|
|
@@ -15709,20 +15643,15 @@ function CategoriseCategory($$anchor, $$props) {
|
|
|
15709
15643
|
};
|
|
15710
15644
|
div.__click = handleContainerClick;
|
|
15711
15645
|
var div_1 = child(div);
|
|
15712
|
-
var
|
|
15713
|
-
var text2 = child(span);
|
|
15714
|
-
reset(span);
|
|
15715
|
-
var node = sibling(span, 2);
|
|
15646
|
+
var node = child(div_1);
|
|
15716
15647
|
CommonStringToHtml(node, {
|
|
15717
15648
|
get htmlString() {
|
|
15718
15649
|
return categoryTitle();
|
|
15719
15650
|
},
|
|
15720
|
-
otherClass: "text-base leading-5 !text-gray-900 md:item-heading"
|
|
15651
|
+
otherClass: "text-base leading-5 !text-gray-900 md:item-heading",
|
|
15652
|
+
ariaHidden: true
|
|
15721
15653
|
});
|
|
15722
|
-
var
|
|
15723
|
-
var text_1 = child(span_1);
|
|
15724
|
-
reset(span_1);
|
|
15725
|
-
var node_1 = sibling(span_1, 2);
|
|
15654
|
+
var node_1 = sibling(node, 2);
|
|
15726
15655
|
{
|
|
15727
15656
|
var consequent_1 = ($$anchor2) => {
|
|
15728
15657
|
var button = root_1$7();
|
|
@@ -15732,14 +15661,14 @@ function CategoriseCategory($$anchor, $$props) {
|
|
|
15732
15661
|
e2.stopPropagation();
|
|
15733
15662
|
}
|
|
15734
15663
|
};
|
|
15735
|
-
var
|
|
15736
|
-
var
|
|
15737
|
-
reset(
|
|
15738
|
-
var
|
|
15739
|
-
var node_2 = child(
|
|
15664
|
+
var span = child(button);
|
|
15665
|
+
var text2 = child(span, true);
|
|
15666
|
+
reset(span);
|
|
15667
|
+
var span_1 = sibling(span, 2);
|
|
15668
|
+
var node_2 = child(span_1);
|
|
15740
15669
|
{
|
|
15741
15670
|
var consequent = ($$anchor3) => {
|
|
15742
|
-
var svg = root_2$
|
|
15671
|
+
var svg = root_2$2();
|
|
15743
15672
|
append($$anchor3, svg);
|
|
15744
15673
|
};
|
|
15745
15674
|
var alternate = ($$anchor3) => {
|
|
@@ -15751,12 +15680,12 @@ function CategoriseCategory($$anchor, $$props) {
|
|
|
15751
15680
|
else $$render(alternate, false);
|
|
15752
15681
|
});
|
|
15753
15682
|
}
|
|
15754
|
-
reset(
|
|
15683
|
+
reset(span_1);
|
|
15755
15684
|
reset(button);
|
|
15756
15685
|
template_effect(() => {
|
|
15757
15686
|
set_attribute(button, "aria-label", get$1(getTotalWords));
|
|
15758
15687
|
set_attribute(button, "tabindex", selectedItemId() ? -1 : 0);
|
|
15759
|
-
set_text(
|
|
15688
|
+
set_text(text2, get$1(getTotalWords));
|
|
15760
15689
|
});
|
|
15761
15690
|
append($$anchor2, button);
|
|
15762
15691
|
};
|
|
@@ -15781,12 +15710,6 @@ function CategoriseCategory($$anchor, $$props) {
|
|
|
15781
15710
|
get containerLabel() {
|
|
15782
15711
|
return get$1($0);
|
|
15783
15712
|
},
|
|
15784
|
-
get containerLabelHtml() {
|
|
15785
|
-
return categoryTitle();
|
|
15786
|
-
},
|
|
15787
|
-
get containerIndex() {
|
|
15788
|
-
return categoryIndex();
|
|
15789
|
-
},
|
|
15790
15713
|
get containerClass() {
|
|
15791
15714
|
return get$1(containerClasses);
|
|
15792
15715
|
},
|
|
@@ -15850,10 +15773,9 @@ function CategoriseCategory($$anchor, $$props) {
|
|
|
15850
15773
|
bind_this(div, ($$value) => set(categoryElement, $$value), () => get$1(categoryElement));
|
|
15851
15774
|
template_effect(() => {
|
|
15852
15775
|
set_attribute(div, "tabindex", get$1(adjustedTabindex));
|
|
15776
|
+
set_attribute(div, "aria-label", get$1(shouldShowAriaLabel) ? `Category ${categoryIndex()}: ${get$1(cleanCategoryTitle)}. ${get$1(getTotalWords)} added.` : void 0);
|
|
15853
15777
|
set_class(div, 1, `cat-ctr ${get$1(outerClasses) ?? ""}`);
|
|
15854
15778
|
set_class(div_1, 1, clsx(get$1(titleClasses)));
|
|
15855
|
-
set_text(text2, `Category ${categoryIndex() ?? ""}:`);
|
|
15856
|
-
set_text(text_1, `. ${get$1(getTotalWords) ?? ""} added.`);
|
|
15857
15779
|
});
|
|
15858
15780
|
bind_element_size(div_1, "clientHeight", ($$value) => set(categoryTitleHeight, $$value));
|
|
15859
15781
|
append($$anchor, div);
|
|
@@ -15897,7 +15819,7 @@ create_custom_element(
|
|
|
15897
15819
|
);
|
|
15898
15820
|
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
|
|
15899
15821
|
absolute top-12 right-4 left-4 bottom-4 flex items-center justify-center !bg-white md:top-20">Word Bin is empty</div>`);
|
|
15900
|
-
var root_2$
|
|
15822
|
+
var root_2$1 = /* @__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>`);
|
|
15901
15823
|
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>`);
|
|
15902
15824
|
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 </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>`);
|
|
15903
15825
|
function CategoriseWordBin($$anchor, $$props) {
|
|
@@ -16184,7 +16106,7 @@ function CategoriseWordBin($$anchor, $$props) {
|
|
|
16184
16106
|
var node_1 = sibling(node, 2);
|
|
16185
16107
|
{
|
|
16186
16108
|
var consequent_1 = ($$anchor2) => {
|
|
16187
|
-
var button = root_2$
|
|
16109
|
+
var button = root_2$1();
|
|
16188
16110
|
button.__click = () => handleNavigate("left");
|
|
16189
16111
|
button.__keydown = (e2) => {
|
|
16190
16112
|
if (e2.key === "Enter" || e2.key === " ") {
|
|
@@ -16461,11 +16383,11 @@ function CategoriseModal($$anchor, $$props) {
|
|
|
16461
16383
|
}
|
|
16462
16384
|
delegate(["click"]);
|
|
16463
16385
|
create_custom_element(CategoriseModal, { isOpen: {}, onclose: {}, onreset: {} }, [], [], true);
|
|
16464
|
-
var
|
|
16386
|
+
var root_4 = /* @__PURE__ */ from_html(`<button aria-label="Reset words" class="group focus-ring flex items-center rounded-lg border-2 border-soft-blue
|
|
16465
16387
|
text-blue-1000 px-3 py-2 absolute right-0 -top-2.5 hover:bg-blue-100" data-testid="cat-reset-btn"><span class="h-6 w-6 flex items-center justify-center"><!></span> <span class="text-base leading-4 font-bold ml-1 group-hover:underline">Reset <span class="hidden md:inline-block">words</span></span></button>`);
|
|
16466
16388
|
var root_1$4 = /* @__PURE__ */ from_html(
|
|
16467
16389
|
`<button type="button" aria-label="Skip to Word Bin" class="flex items-center text-charcoal border-l-6 border-charcoal bg-yellow-1000 py-1.5 pr-3 pl-4 focus-visible:border-charcoal
|
|
16468
|
-
left-[-9999px] z-0 focus-within:left-0 focus-within:right-0 focus-within:top-0 absolute focus-within:z-30 focus-visible:outline-none"><span class="test-base font-semibold underline mr-1">Skip to Word Bin</span> <span class="text-inherit h-6 w-6 flex items-center justify-center"><!></span></button> <div class="w-full relative"><div class="sr-only" role="status" aria-live="polite" aria-atomic="true" tabindex="-1"
|
|
16390
|
+
left-[-9999px] z-0 focus-within:left-0 focus-within:right-0 focus-within:top-0 absolute focus-within:z-30 focus-visible:outline-none"><span class="test-base font-semibold underline mr-1">Skip to Word Bin</span> <span class="text-inherit h-6 w-6 flex items-center justify-center"><!></span></button> <div class="w-full relative"><div class="sr-only" role="status" aria-live="polite" aria-atomic="true" tabindex="-1"><!></div> <div class="mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14"><p class="text-base leading-5 !text-gray-900 font-semibold md:item-heading">Categories</p> <!></div> <!> <!> <!></div>`,
|
|
16469
16391
|
1
|
|
16470
16392
|
);
|
|
16471
16393
|
function CategoriseComponent($$anchor, $$props) {
|
|
@@ -16484,6 +16406,7 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
16484
16406
|
let dragHoverContainerId = /* @__PURE__ */ state(null);
|
|
16485
16407
|
let dragSourceContainerId = /* @__PURE__ */ state(null);
|
|
16486
16408
|
let announcement = /* @__PURE__ */ state("");
|
|
16409
|
+
let announcementIsHtml = /* @__PURE__ */ state(false);
|
|
16487
16410
|
let srDivRef = /* @__PURE__ */ state(void 0);
|
|
16488
16411
|
let skipToWordBinRef = /* @__PURE__ */ state(void 0);
|
|
16489
16412
|
let wordBinRef = /* @__PURE__ */ state(void 0);
|
|
@@ -16543,17 +16466,17 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
16543
16466
|
onstateChange()(new CustomEvent("statechange", { detail: { state: get$1(interactionState), serialized } }));
|
|
16544
16467
|
}
|
|
16545
16468
|
};
|
|
16546
|
-
const announceToScreenReader = async (message,
|
|
16469
|
+
const announceToScreenReader = async (message, isHtml = false) => {
|
|
16547
16470
|
set(announcement, "");
|
|
16471
|
+
set(announcementIsHtml, false);
|
|
16548
16472
|
await tick();
|
|
16549
16473
|
set(announcement, message, true);
|
|
16474
|
+
set(announcementIsHtml, isHtml, true);
|
|
16550
16475
|
await tick();
|
|
16551
|
-
if (hasMath && get$1(srDivRef)) {
|
|
16552
|
-
await typesetMathJax(get$1(srDivRef));
|
|
16553
|
-
}
|
|
16554
16476
|
setTimeout(
|
|
16555
16477
|
() => {
|
|
16556
16478
|
set(announcement, "");
|
|
16479
|
+
set(announcementIsHtml, false);
|
|
16557
16480
|
},
|
|
16558
16481
|
ANNOUNCEMENT_TIMEOUT_MS
|
|
16559
16482
|
);
|
|
@@ -16638,12 +16561,11 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
16638
16561
|
const targetCategoryIndex = config().category_groups.findIndex((c) => c.id === targetContainerId);
|
|
16639
16562
|
const targetCategory = targetCategoryIndex >= 0 ? config().category_groups[targetCategoryIndex] : void 0;
|
|
16640
16563
|
if (item) {
|
|
16641
|
-
const
|
|
16642
|
-
const
|
|
16564
|
+
const cleanItemName = useRemoveRichTextHtmlTags(item.name);
|
|
16565
|
+
const cleanCategoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
|
|
16643
16566
|
const itemCount = targetContainerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? get$1(interactionState).data.wordBinItems.length : api().getCategoryItems(get$1(interactionState), targetContainerId).length;
|
|
16644
|
-
const message = createItemPlacementAnnouncement(
|
|
16645
|
-
|
|
16646
|
-
await announceToScreenReader(containsMath ? processMathJax(message) : message, containsMath);
|
|
16567
|
+
const message = createItemPlacementAnnouncement(cleanItemName, cleanCategoryName, targetCategoryIndex, itemCount, targetContainerId);
|
|
16568
|
+
await announceToScreenReader(message);
|
|
16647
16569
|
}
|
|
16648
16570
|
await playDropAnimation(targetContainerId);
|
|
16649
16571
|
};
|
|
@@ -16694,12 +16616,11 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
16694
16616
|
const targetCategoryIndex = containerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? -1 : config().category_groups.findIndex((c) => c.id === containerId);
|
|
16695
16617
|
const targetCategory = targetCategoryIndex >= 0 ? config().category_groups[targetCategoryIndex] : null;
|
|
16696
16618
|
if (item) {
|
|
16697
|
-
const
|
|
16698
|
-
const
|
|
16619
|
+
const cleanItemName = useRemoveRichTextHtmlTags(item.name);
|
|
16620
|
+
const cleanCategoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
|
|
16699
16621
|
const itemCount = containerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? get$1(interactionState).data.wordBinItems.length : api().getCategoryItems(get$1(interactionState), containerId).length;
|
|
16700
|
-
const message = createItemPlacementAnnouncement(
|
|
16701
|
-
|
|
16702
|
-
await announceToScreenReader(containsMath ? processMathJax(message) : message, containsMath);
|
|
16622
|
+
const message = createItemPlacementAnnouncement(cleanItemName, cleanCategoryName, targetCategoryIndex, itemCount, containerId);
|
|
16623
|
+
await announceToScreenReader(message);
|
|
16703
16624
|
}
|
|
16704
16625
|
await playDropAnimation(containerId);
|
|
16705
16626
|
await tick();
|
|
@@ -16955,18 +16876,35 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
16955
16876
|
bind_this(button, ($$value) => set(skipToWordBinRef, $$value), () => get$1(skipToWordBinRef));
|
|
16956
16877
|
var div = sibling(button, 2);
|
|
16957
16878
|
var div_1 = child(div);
|
|
16958
|
-
var
|
|
16879
|
+
var node_1 = child(div_1);
|
|
16880
|
+
{
|
|
16881
|
+
var consequent = ($$anchor3) => {
|
|
16882
|
+
var fragment_2 = comment();
|
|
16883
|
+
var node_2 = first_child(fragment_2);
|
|
16884
|
+
html(node_2, () => get$1(announcement));
|
|
16885
|
+
append($$anchor3, fragment_2);
|
|
16886
|
+
};
|
|
16887
|
+
var alternate = ($$anchor3) => {
|
|
16888
|
+
var text$1 = text();
|
|
16889
|
+
template_effect(() => set_text(text$1, get$1(announcement)));
|
|
16890
|
+
append($$anchor3, text$1);
|
|
16891
|
+
};
|
|
16892
|
+
if_block(node_1, ($$render) => {
|
|
16893
|
+
if (get$1(announcementIsHtml)) $$render(consequent);
|
|
16894
|
+
else $$render(alternate, false);
|
|
16895
|
+
});
|
|
16896
|
+
}
|
|
16959
16897
|
reset(div_1);
|
|
16960
16898
|
bind_this(div_1, ($$value) => set(srDivRef, $$value), () => get$1(srDivRef));
|
|
16961
16899
|
var div_2 = sibling(div_1, 2);
|
|
16962
|
-
var
|
|
16900
|
+
var node_3 = sibling(child(div_2), 2);
|
|
16963
16901
|
{
|
|
16964
|
-
var
|
|
16965
|
-
var button_1 =
|
|
16902
|
+
var consequent_1 = ($$anchor3) => {
|
|
16903
|
+
var button_1 = root_4();
|
|
16966
16904
|
button_1.__click = handleOpenResetModal;
|
|
16967
16905
|
var span_1 = child(button_1);
|
|
16968
|
-
var
|
|
16969
|
-
SvgLoader(
|
|
16906
|
+
var node_4 = child(span_1);
|
|
16907
|
+
SvgLoader(node_4, {
|
|
16970
16908
|
svgName: "switch",
|
|
16971
16909
|
className: "switch-icon",
|
|
16972
16910
|
dataTestId: "icon-switch"
|
|
@@ -16977,22 +16915,22 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
16977
16915
|
template_effect(() => set_attribute(button_1, "tabindex", get$1(categoryTabIndex)));
|
|
16978
16916
|
append($$anchor3, button_1);
|
|
16979
16917
|
};
|
|
16980
|
-
if_block(
|
|
16981
|
-
if (!get$1(isCompleted) && !get$1(isLocked) && get$1(totalPlacedItems) > 0) $$render(
|
|
16918
|
+
if_block(node_3, ($$render) => {
|
|
16919
|
+
if (!get$1(isCompleted) && !get$1(isLocked) && get$1(totalPlacedItems) > 0) $$render(consequent_1);
|
|
16982
16920
|
});
|
|
16983
16921
|
}
|
|
16984
16922
|
reset(div_2);
|
|
16985
|
-
var
|
|
16923
|
+
var node_5 = sibling(div_2, 2);
|
|
16986
16924
|
{
|
|
16987
16925
|
let $02 = /* @__PURE__ */ user_derived(() => !!config().stimulus);
|
|
16988
|
-
CategoriseCategoryList(
|
|
16926
|
+
CategoriseCategoryList(node_5, {
|
|
16989
16927
|
get hasStimulus() {
|
|
16990
16928
|
return get$1($02);
|
|
16991
16929
|
},
|
|
16992
16930
|
children: ($$anchor3, $$slotProps) => {
|
|
16993
|
-
var
|
|
16994
|
-
var
|
|
16995
|
-
each(
|
|
16931
|
+
var fragment_4 = comment();
|
|
16932
|
+
var node_6 = first_child(fragment_4);
|
|
16933
|
+
each(node_6, 19, () => config().category_groups, (category) => category.id, ($$anchor4, category, categoryIndex) => {
|
|
16996
16934
|
const categoryItems = /* @__PURE__ */ user_derived(() => getCategoryItemsData(get$1(category).id));
|
|
16997
16935
|
const isCollapsed = /* @__PURE__ */ user_derived(() => !api().isCategoryOpen(get$1(interactionState), get$1(category).id));
|
|
16998
16936
|
{
|
|
@@ -17077,12 +17015,12 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
17077
17015
|
);
|
|
17078
17016
|
}
|
|
17079
17017
|
});
|
|
17080
|
-
append($$anchor3,
|
|
17018
|
+
append($$anchor3, fragment_4);
|
|
17081
17019
|
},
|
|
17082
17020
|
$$slots: { default: true }
|
|
17083
17021
|
});
|
|
17084
17022
|
}
|
|
17085
|
-
var
|
|
17023
|
+
var node_7 = sibling(node_5, 2);
|
|
17086
17024
|
{
|
|
17087
17025
|
let $02 = /* @__PURE__ */ user_derived(() => get$1(selectedItemId) || void 0);
|
|
17088
17026
|
let $12 = /* @__PURE__ */ user_derived(() => get$1(dragHoverContainerId) === CONTAINER_WORD_BIN_ID2);
|
|
@@ -17090,7 +17028,7 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
17090
17028
|
let $3 = /* @__PURE__ */ user_derived(() => get$1(dragSourceContainerId) || void 0);
|
|
17091
17029
|
let $4 = /* @__PURE__ */ user_derived(() => get$1(activeContainerForKeyboard) || void 0);
|
|
17092
17030
|
bind_this(
|
|
17093
|
-
CategoriseWordBin(
|
|
17031
|
+
CategoriseWordBin(node_7, {
|
|
17094
17032
|
get containerId() {
|
|
17095
17033
|
return CONTAINER_WORD_BIN_ID2;
|
|
17096
17034
|
},
|
|
@@ -17151,8 +17089,8 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
17151
17089
|
() => get$1(wordBinRef)
|
|
17152
17090
|
);
|
|
17153
17091
|
}
|
|
17154
|
-
var
|
|
17155
|
-
CategoriseModal(
|
|
17092
|
+
var node_8 = sibling(node_7, 2);
|
|
17093
|
+
CategoriseModal(node_8, {
|
|
17156
17094
|
get isOpen() {
|
|
17157
17095
|
return get$1(isModalOpen);
|
|
17158
17096
|
},
|
|
@@ -17162,7 +17100,6 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
17162
17100
|
reset(div);
|
|
17163
17101
|
template_effect(() => {
|
|
17164
17102
|
set_attribute(button, "tabindex", get$1(selectedItemId) ? -1 : 0);
|
|
17165
|
-
set_text(text2, get$1(announcement));
|
|
17166
17103
|
set_attribute(div_2, "aria-hidden", get$1(isModalOpen));
|
|
17167
17104
|
});
|
|
17168
17105
|
append($$anchor2, fragment_1);
|
|
@@ -21161,7 +21098,7 @@ registerInteraction("selectableText", createSelectableTextInteraction, Selectabl
|
|
|
21161
21098
|
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&display=swap" rel="stylesheet" class="svelte-1dpid58"/>`, 1);
|
|
21162
21099
|
const $$css = {
|
|
21163
21100
|
hash: "svelte-1dpid58",
|
|
21164
|
-
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(107,114,128,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,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(107,114,128,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,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{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:not(.inactive), .btn-mcq-option.finished:hover>span>span>span>.custom-checkbox:not(.inactive){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(255,255,255,var(--tw-bg-opacity,1))} .btn-mcq-option>span>span>span>.custom-checkbox.inactive{border-width:1px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(229,231,235,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(22,163,74,var(--tw-border-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(22,163,74,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(249,250,251,var(--tw-bg-opacity,1));border-color:rgb(219,39,119,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-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);--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);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))} .typein-textbox-locked{cursor:default} .typein-textbox-locked:focus{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));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)} .typein-textbox-locked:focus-visible{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(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);outline-color:#212529;outline-width:2px;--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1))}@media (hover:hover) and (pointer:fine){ .typein-textbox.typein-textbox-hover-neutral:hover{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .typein-textbox.typein-textbox-hover-correct:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(22,163,74,var(--tw-border-opacity,1))} .typein-textbox.typein-textbox-hover-incorrect:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(219,39,119,var(--tw-border-opacity,1))}} .typein-textbox-locked.typein-textbox-hover-correct:focus-visible, .typein-textbox-locked.typein-textbox-hover-incorrect:focus-visible, .typein-textbox-locked.typein-textbox-hover-neutral:focus-visible{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .typein-textbox-missing{cursor:default}@media (hover:hover) and (pointer:fine){ .typein-textbox-missing:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(22,163,74,var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px}} .typein-textbox-missing:focus{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));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)} .typein-textbox-missing:focus-visible{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(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);outline-color:#212529;outline-width:2px;--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} .category-content>.missing-answer-label{display:block} .category-content>.missing-answer-label~.missing-answer-label{display:none} .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:48px;max-width:864px;overflow-wrap:break-word;width:100%} .selectable-segment, .selectable-text-passage:focus{outline:2px solid transparent;outline-offset:2px} .selectable-segment{cursor:pointer;display:inline;font-size:1rem;font-weight:400;height:2.75rem;line-height:1.5rem;margin-right:.25rem;-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))} .selectable-segment:not(.sent){align-items:center;display:inline-flex;white-space:nowrap} .selectable-segment.sent{padding-bottom:.625rem;padding-top:.625rem} .selectable-segment:not(.correct):not(.incorrect):not(.missing):not(.selected):focus-visible>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1));text-decoration-color:#212529;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:25%} .selectable-segment:not(.correct):not(.incorrect):not(.missing):not(.selected):focus-visible:active>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1));text-decoration-color:#212529;text-decoration-line:underline;text-decoration-thickness:3px;text-underline-offset:25%} .selectable-segment:active>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1));text-decoration-color:#212529;text-decoration-line:underline;text-decoration-thickness:3px;text-underline-offset:25%}@media (hover:hover) and (pointer:fine){ .selectable-segment:hover:not(:active):not(.correct):not(.incorrect):not(.missing):not(.selected):not(:focus-visible)>.selectable-segment-text{--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%}} .segment-leading-punct, .segment-punctuation{cursor:default;display:inline;font-size:1rem;line-height:1.5rem;-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))} .segment-word-group{display:inline-block;vertical-align:baseline;white-space:nowrap} .segment-trailing-punct{cursor:default;display:inline;font-size:1rem;line-height:1.5rem;margin-left:-.25rem;margin-right:.25rem;-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))} .segment-leading-punct:has(+.selectable-segment.correct), .segment-leading-punct:has(+.selectable-segment.incorrect), .segment-leading-punct:has(+.selectable-segment.missing), .segment-leading-punct:has(+.selectable-segment.selected){margin-right:.125rem} .segment-leading-punct:has(+.selectable-segment.\\!correct){margin-right:.125rem} .selectable-segment.\\!correct+.segment-trailing-punct, .selectable-segment.correct+.segment-trailing-punct, .selectable-segment.incorrect+.segment-trailing-punct, .selectable-segment.missing+.segment-trailing-punct, .selectable-segment.selected+.segment-trailing-punct{margin-left:-.125rem} .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.sent.\\!correct>.selectable-segment-text, .selectable-segment.sent.correct>.selectable-segment-text, .selectable-segment.sent.incorrect>.selectable-segment-text, .selectable-segment.sent.missing>.selectable-segment-text, .selectable-segment.sent.selected>.selectable-segment-text{display:inline;padding-bottom:.375rem;padding-top:.375rem} .selectable-segment.sent .selectable-segment-deselect-icon, .selectable-segment.sent .selectable-segment-status-icon{margin-top:-.25rem;vertical-align:middle} .selectable-segment-last-word{white-space:nowrap} .selectable-segment.selected>.selectable-segment-text{align-items:center;border-radius:.5rem;border-width:1px;display:inline-flex;--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:.25rem .25rem .25rem .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{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(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.locked, .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;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;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{align-items:center;display:inline-flex;--tw-border-opacity:1;--tw-bg-opacity:1;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.25rem .375rem .25rem .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{align-items:center;border-radius:.5rem;display:inline-flex;--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.25rem .5rem;--tw-text-opacity:1;background-image:var(--missing-border-svg);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:0;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.\\!session>.selectable-segment-missing-badge, .selectable-segment.missing.interactive>.selectable-segment-missing-badge, .selectable-segment.missing.session>.selectable-segment-missing-badge{opacity:0;transition-duration:.15s;transition-property:opacity,visibility;transition-timing-function:cubic-bezier(.4,0,.2,1);visibility:hidden}@media (hover:hover) and (pointer:fine){ .selectable-segment.missing.interactive:active>.selectable-segment-missing-badge, .selectable-segment.missing.interactive:hover>.selectable-segment-missing-badge, .selectable-segment.missing.session:active>.selectable-segment-missing-badge, .selectable-segment.missing.session:hover>.selectable-segment-missing-badge{opacity:1;visibility:visible} .selectable-segment.missing.\\!session:active>.selectable-segment-missing-badge, .selectable-segment.missing.\\!session:hover>.selectable-segment-missing-badge{opacity:1!important;visibility:visible!important}} .selectable-segment.missing.interactive:focus-visible>.selectable-segment-missing-badge, .selectable-segment.missing.session.tooltip-pinned>.selectable-segment-missing-badge, .selectable-segment.missing.session:focus-visible>.selectable-segment-missing-badge{opacity:1;visibility:visible} .selectable-segment.missing.\\!session.tooltip-pinned>.selectable-segment-missing-badge, .selectable-segment.missing.\\!session:focus-visible>.selectable-segment-missing-badge{opacity:1;visibility:visible}@media (hover:hover) and (pointer:fine){ .selectable-segment.missing:hover:not(:active)>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(239,241,255,var(--tw-bg-opacity,1))}} .selectable-segment.missing: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}@media (hover:hover) and (pointer:fine){ .selectable-segment.missing:active>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(239,241,255,var(--tw-bg-opacity,1))} .selectable-segment.missing:active>.selectable-segment-text, .selectable-segment.missing:hover:not(:active)>.selectable-segment-text{background-image:var(--missing-border-svg-active);background-repeat:no-repeat;background-size:100% 100%}} .selectable-segment.selected .selectable-segment-deselect-icon{align-items:center;display:inline-flex;justify-content:center;width:1.25rem;--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))} .selectable-segment-status-icon{align-items:center;display:inline-flex;justify-content:center;margin-left:.25rem;width:1.25rem} .selectable-segment-text sup{font-size:.75em;line-height:0;position:relative;top:-.5em} .selectable-segment-text sub{font-size:.75em;line-height:0;position:relative;top:.3em} .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-2\\.5{padding-right:.625rem} .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\\.3\\]{line-height:1.3} .leading-\\[1\\.5\\]{line-height:1.5} .leading-\\[150\\%\\]{line-height:150%} .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-750{--tw-text-opacity:1;color:rgb(22,101,52,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;--missing-border-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%2316a34aff' stroke-dasharray='6,4' stroke-width='4' rx='8' ry='8'/%3E%3C/svg%3E");--missing-border-svg-active:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%233345df' stroke-dasharray='6,4' stroke-width='4' rx='8' ry='8'/%3E%3C/svg%3E")} .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))}}`
|
|
21101
|
+
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(107,114,128,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,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(107,114,128,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,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{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:not(.inactive), .btn-mcq-option.finished:hover>span>span>span>.custom-checkbox:not(.inactive){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(255,255,255,var(--tw-bg-opacity,1))} .btn-mcq-option>span>span>span>.custom-checkbox.inactive{border-width:1px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(229,231,235,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(22,163,74,var(--tw-border-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(22,163,74,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(249,250,251,var(--tw-bg-opacity,1));border-color:rgb(219,39,119,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-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);--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);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))} .typein-textbox-locked{cursor:default} .typein-textbox-locked:focus{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));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)} .typein-textbox-locked:focus-visible{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(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);outline-color:#212529;outline-width:2px;--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1))}@media (hover:hover) and (pointer:fine){ .typein-textbox.typein-textbox-hover-neutral:hover{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .typein-textbox.typein-textbox-hover-correct:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(22,163,74,var(--tw-border-opacity,1))} .typein-textbox.typein-textbox-hover-incorrect:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(219,39,119,var(--tw-border-opacity,1))}} .typein-textbox-locked.typein-textbox-hover-correct:focus-visible, .typein-textbox-locked.typein-textbox-hover-incorrect:focus-visible, .typein-textbox-locked.typein-textbox-hover-neutral:focus-visible{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .typein-textbox-missing{cursor:default}@media (hover:hover) and (pointer:fine){ .typein-textbox-missing:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(22,163,74,var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px}} .typein-textbox-missing:focus{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));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)} .typein-textbox-missing:focus-visible{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(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);outline-color:#212529;outline-width:2px;--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} .category-content>.missing-answer-label{display:block} .category-content>.missing-answer-label~.missing-answer-label{display:none} .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:48px;max-width:864px;overflow-wrap:break-word;width:100%} .selectable-segment, .selectable-text-passage:focus{outline:2px solid transparent;outline-offset:2px} .selectable-segment{cursor:pointer;display:inline;font-size:1rem;font-weight:400;height:2.75rem;line-height:1.5rem;margin-right:.25rem;-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))} .selectable-segment:not(.sent){align-items:center;display:inline-flex;white-space:nowrap} .selectable-segment.sent{padding-bottom:.625rem;padding-top:.625rem} .selectable-segment:not(.correct):not(.incorrect):not(.missing):not(.selected):focus-visible>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1));text-decoration-color:#212529;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:25%} .selectable-segment:not(.correct):not(.incorrect):not(.missing):not(.selected):focus-visible:active>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1));text-decoration-color:#212529;text-decoration-line:underline;text-decoration-thickness:3px;text-underline-offset:25%} .selectable-segment:active>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1));text-decoration-color:#212529;text-decoration-line:underline;text-decoration-thickness:3px;text-underline-offset:25%}@media (hover:hover) and (pointer:fine){ .selectable-segment:hover:not(:active):not(.correct):not(.incorrect):not(.missing):not(.selected):not(:focus-visible)>.selectable-segment-text{--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%}} .segment-leading-punct, .segment-punctuation{cursor:default;display:inline;font-size:1rem;line-height:1.5rem;-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))} .segment-word-group{display:inline-block;vertical-align:baseline;white-space:nowrap} .segment-trailing-punct{cursor:default;display:inline;font-size:1rem;line-height:1.5rem;margin-left:-.25rem;margin-right:.25rem;-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))} .segment-leading-punct:has(+.selectable-segment.correct), .segment-leading-punct:has(+.selectable-segment.incorrect), .segment-leading-punct:has(+.selectable-segment.missing), .segment-leading-punct:has(+.selectable-segment.selected){margin-right:.125rem} .segment-leading-punct:has(+.selectable-segment.\\!correct){margin-right:.125rem} .selectable-segment.\\!correct+.segment-trailing-punct, .selectable-segment.correct+.segment-trailing-punct, .selectable-segment.incorrect+.segment-trailing-punct, .selectable-segment.missing+.segment-trailing-punct, .selectable-segment.selected+.segment-trailing-punct{margin-left:-.125rem} .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.sent.\\!correct>.selectable-segment-text, .selectable-segment.sent.correct>.selectable-segment-text, .selectable-segment.sent.incorrect>.selectable-segment-text, .selectable-segment.sent.missing>.selectable-segment-text, .selectable-segment.sent.selected>.selectable-segment-text{display:inline;padding-bottom:.375rem;padding-top:.375rem} .selectable-segment.sent .selectable-segment-deselect-icon, .selectable-segment.sent .selectable-segment-status-icon{margin-top:-.25rem;vertical-align:middle} .selectable-segment-last-word{white-space:nowrap} .selectable-segment.selected>.selectable-segment-text{align-items:center;border-radius:.5rem;border-width:1px;display:inline-flex;--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:.25rem .25rem .25rem .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{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(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.locked, .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;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;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{align-items:center;display:inline-flex;--tw-border-opacity:1;--tw-bg-opacity:1;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.25rem .375rem .25rem .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{align-items:center;border-radius:.5rem;display:inline-flex;--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.25rem .5rem;--tw-text-opacity:1;background-image:var(--missing-border-svg);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:0;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.\\!session>.selectable-segment-missing-badge, .selectable-segment.missing.interactive>.selectable-segment-missing-badge, .selectable-segment.missing.session>.selectable-segment-missing-badge{opacity:0;transition-duration:.15s;transition-property:opacity,visibility;transition-timing-function:cubic-bezier(.4,0,.2,1);visibility:hidden}@media (hover:hover) and (pointer:fine){ .selectable-segment.missing.interactive:active>.selectable-segment-missing-badge, .selectable-segment.missing.interactive:hover>.selectable-segment-missing-badge, .selectable-segment.missing.session:active>.selectable-segment-missing-badge, .selectable-segment.missing.session:hover>.selectable-segment-missing-badge{opacity:1;visibility:visible} .selectable-segment.missing.\\!session:active>.selectable-segment-missing-badge, .selectable-segment.missing.\\!session:hover>.selectable-segment-missing-badge{opacity:1!important;visibility:visible!important}} .selectable-segment.missing.interactive:focus-visible>.selectable-segment-missing-badge, .selectable-segment.missing.session.tooltip-pinned>.selectable-segment-missing-badge, .selectable-segment.missing.session:focus-visible>.selectable-segment-missing-badge{opacity:1;visibility:visible} .selectable-segment.missing.\\!session.tooltip-pinned>.selectable-segment-missing-badge, .selectable-segment.missing.\\!session:focus-visible>.selectable-segment-missing-badge{opacity:1;visibility:visible}@media (hover:hover) and (pointer:fine){ .selectable-segment.missing:hover:not(:active)>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(239,241,255,var(--tw-bg-opacity,1))}} .selectable-segment.missing: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}@media (hover:hover) and (pointer:fine){ .selectable-segment.missing:active>.selectable-segment-text{--tw-bg-opacity:1;background-color:rgb(239,241,255,var(--tw-bg-opacity,1))} .selectable-segment.missing:active>.selectable-segment-text, .selectable-segment.missing:hover:not(:active)>.selectable-segment-text{background-image:var(--missing-border-svg-active);background-repeat:no-repeat;background-size:100% 100%}} .selectable-segment.selected .selectable-segment-deselect-icon{align-items:center;display:inline-flex;justify-content:center;width:1.25rem;--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))} .selectable-segment-status-icon{align-items:center;display:inline-flex;justify-content:center;margin-left:.25rem;width:1.25rem} .selectable-segment-text sup{font-size:.75em;line-height:0;position:relative;top:-.5em} .selectable-segment-text sub{font-size:.75em;line-height:0;position:relative;top:.3em} .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-2\\.5{padding-right:.625rem} .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\\.3\\]{line-height:1.3} .leading-\\[1\\.5\\]{line-height:1.5} .leading-\\[150\\%\\]{line-height:150%} .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-750{--tw-text-opacity:1;color:rgb(22,101,52,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;--missing-border-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%2316a34aff' stroke-dasharray='6,4' stroke-width='4' rx='8' ry='8'/%3E%3C/svg%3E");--missing-border-svg-active:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%233345df' stroke-dasharray='6,4' stroke-width='4' rx='8' ry='8'/%3E%3C/svg%3E")} mjx-container[jax=CHTML]:not([display=true]){align-items:baseline;display:inline-flex} .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))}}`
|
|
21165
21102
|
};
|
|
21166
21103
|
function InteractionBuilder($$anchor, $$props) {
|
|
21167
21104
|
push($$props, true);
|