@superbuilders/incept-renderer 0.1.8 → 0.1.12

package/dist/parser-B8n3iHSM.d.ts

@@ -0,0 +1,29 @@
+import { A as AssessmentItem, a as AssessmentStimulus } from './schema-DKduufCs.js';
+
+interface NormalizedNode {
+    tagName: string;
+    attrs: Record<string, unknown>;
+    children: Array<NormalizedNode | string>;
+}
+declare function parseAssessmentItemXml(xml: string): AssessmentItem;
+/**
+ * Parses a QTI 3.0 Assessment Stimulus XML document.
+ *
+ * Assessment Stimuli are standalone reading materials (articles, passages, etc.)
+ * that can be referenced by one or more assessment items.
+ *
+ * @param xml - The raw XML string of the stimulus
+ * @returns A validated AssessmentStimulus object
+ * @throws If the XML is invalid or missing required elements
+ *
+ * @example
+ * ```typescript
+ * const stimulus = parseAssessmentStimulusXml(xmlString)
+ * // stimulus.identifier - unique ID
+ * // stimulus.title - human-readable title
+ * // stimulus.bodyHtml - the HTML content to render
+ * ```
+ */
+declare function parseAssessmentStimulusXml(xml: string): AssessmentStimulus;
+
+export { type NormalizedNode as N, parseAssessmentStimulusXml as a, parseAssessmentItemXml as p };

package/dist/qti-stimulus-renderer-CSuLfoff.d.ts

@@ -0,0 +1,178 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { e as DisplayBlock, k as DisplayItem, a as AssessmentStimulus } from './schema-DKduufCs.js';
+
+/** Theme options for the QTI renderer */
+type QTITheme = "duolingo" | "neobrutalist" | (string & {});
+/** Feedback result for a single response */
+interface ResponseFeedback {
+    isCorrect: boolean;
+    messageHtml?: string;
+}
+/** Correctness info for selected choices */
+interface ChoiceCorrectness {
+    id: string;
+    isCorrect: boolean;
+}
+/**
+ * Props for the QTIRenderer component.
+ *
+ * This is a **controlled, display-only component**. It renders the question
+ * and captures user input, but does NOT include submit buttons or flow logic.
+ * The consuming app is responsible for:
+ * - Providing responses state
+ * - Handling submission
+ * - Providing feedback after validation
+ * - Rendering buttons (Check, Try Again, Continue, etc.)
+ */
+interface QTIRendererProps {
+    /**
+     * The display-safe item to render.
+     * Use `buildDisplayModel()` to create this from a parsed AssessmentItem.
+     */
+    item: DisplayItem;
+    /**
+     * Current user responses, keyed by response identifier.
+     * This is a controlled component - you must manage this state.
+     * @example { "RESPONSE": "A" } or { "RESPONSE": ["A", "C"] }
+     */
+    responses: Record<string, string | string[]>;
+    /**
+     * Callback fired when user selects/changes an answer.
+     * Update your responses state in this callback.
+     */
+    onResponseChange: (responseId: string, value: string | string[]) => void;
+    /**
+     * Theme to apply. Defaults to "duolingo".
+     * Available themes: "duolingo", "neobrutalist", or any custom theme
+     * defined via `[data-qti-theme="your-theme"]` CSS.
+     */
+    theme?: QTITheme;
+    /**
+     * Whether to show feedback states (correct/incorrect styling).
+     * Set to true after validation to display results.
+     */
+    showFeedback?: boolean;
+    /**
+     * Whether to disable all interactions.
+     * Typically set to true when showFeedback is true.
+     */
+    disabled?: boolean;
+    /**
+     * Per-choice correctness for highlighting selected answers.
+     * Keyed by response identifier.
+     */
+    choiceCorrectness?: Record<string, ChoiceCorrectness[]>;
+    /**
+     * Per-response feedback messages to display.
+     * Keyed by response identifier.
+     */
+    responseFeedback?: Record<string, ResponseFeedback>;
+    /**
+     * Overall feedback to display at the end of the question.
+     */
+    overallFeedback?: ResponseFeedback;
+    /**
+     * Additional CSS class for the container.
+     */
+    className?: string;
+}
+interface ContentBlockRendererProps {
+    /** The content block to render */
+    block: DisplayBlock;
+    /** Current user responses */
+    responses?: Record<string, string | string[]>;
+    /** Callback when user selects an answer */
+    onAnswerSelect?: (responseIdentifier: string, value: string | string[]) => void;
+    /** Whether to show feedback */
+    showFeedback?: boolean;
+    /** Whether to disable interactions */
+    disabled?: boolean;
+    /** Selected-only correctness mapping for this render pass */
+    selectedChoicesByResponse?: Record<string, Array<{
+        id: string;
+        isCorrect: boolean;
+    }>>;
+    /** Optional per-response feedback messages from server */
+    perResponseFeedback?: Record<string, {
+        isCorrect: boolean;
+        messageHtml?: string;
+    }>;
+}
+/**
+ * Renders a single content block (stimulus or interaction)
+ */
+declare function ContentBlockRenderer({ block, responses, onAnswerSelect, showFeedback, disabled, selectedChoicesByResponse, perResponseFeedback }: ContentBlockRendererProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * A controlled, display-only component for rendering QTI assessment items.
+ *
+ * **This component does NOT include buttons or submission logic.**
+ * The consuming app is responsible for:
+ * - Managing `responses` state
+ * - Rendering Check/Submit/Try Again buttons
+ * - Calling validation APIs
+ * - Providing feedback data after validation
+ *
+ * @example
+ * ```tsx
+ * const [responses, setResponses] = useState({})
+ * const [feedback, setFeedback] = useState(null)
+ *
+ * <QTIRenderer
+ *   item={displayItem}
+ *   responses={responses}
+ *   onResponseChange={(id, value) => setResponses(prev => ({ ...prev, [id]: value }))}
+ *   theme="neobrutalist"
+ *   showFeedback={!!feedback}
+ *   responseFeedback={feedback?.perResponse}
+ *   overallFeedback={feedback?.overall}
+ *   disabled={!!feedback}
+ * />
+ *
+ * <button onClick={handleCheck}>Check Answer</button>
+ * ```
+ */
+declare function QTIRenderer({ item, responses, onResponseChange, theme, showFeedback, disabled, choiceCorrectness, responseFeedback, overallFeedback, className }: QTIRendererProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the QTIStimulusRenderer component.
+ *
+ * This is a simple, display-only component for rendering QTI Assessment Stimuli
+ * (reading materials, passages, articles).
+ * It does not handle interactions.
+ */
+type QTIStimulusRendererProps = {
+    /**
+     * The parsed stimulus to render.
+     * Use `parseAssessmentStimulusXml()` to create this from raw XML.
+     */
+    stimulus: AssessmentStimulus;
+    /**
+     * Additional CSS class for the container.
+     */
+    className?: string;
+};
+/**
+ * Renders a QTI 3.0 Assessment Stimulus (reading material).
+ *
+ * Assessment Stimuli are standalone content (articles, passages, etc.)
+ * that provide context for assessment items. This component renders
+ * the stimulus body HTML with proper support for:
+ *
+ * - Standard HTML elements (headings, lists, paragraphs, tables)
+ * - Images with responsive sizing
+ * - MathML mathematical expressions
+ * - Figures and figcaptions
+ * - Links and text formatting
+ * - Collapsible details/summary sections
+ *
+ * @example
+ * ```tsx
+ * import { parseAssessmentStimulusXml, QTIStimulusRenderer } from "@superbuilders/incept-renderer"
+ *
+ * const stimulus = parseAssessmentStimulusXml(xmlString)
+ * <QTIStimulusRenderer stimulus={stimulus} className="my-8" />
+ * ```
+ */
+declare function QTIStimulusRenderer({ stimulus, className }: QTIStimulusRendererProps): react_jsx_runtime.JSX.Element;
+
+export { type ChoiceCorrectness as C, type QTIRendererProps as Q, type ResponseFeedback as R, type ContentBlockRendererProps as a, type QTIStimulusRendererProps as b, type QTITheme as c, ContentBlockRenderer as d, QTIRenderer as e, QTIStimulusRenderer as f };

package/dist/{schema-DZoGAQdF.d.ts → schema-DKduufCs.d.ts}

@@ -1,138 +1,105 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as DisplayBlock, g as DisplayItem } from './types-B7YRTQKt.js';
 import { z } from 'zod';
 
-/** Theme options for the QTI renderer */
-type QTITheme = "duolingo" | "neobrutalist" | (string & {});
-/** Feedback result for a single response */
-interface ResponseFeedback {
-    isCorrect: boolean;
-    messageHtml?: string;
-}
-/** Correctness info for selected choices */
-interface ChoiceCorrectness {
+type DisplayChoice = {
     id: string;
-    isCorrect: boolean;
-}
-/**
- * Props for the QTIRenderer component.
- *
- * This is a **controlled, display-only component**. It renders the question
- * and captures user input, but does NOT include submit buttons or flow logic.
- * The consuming app is responsible for:
- * - Providing responses state
- * - Handling submission
- * - Providing feedback after validation
- * - Rendering buttons (Check, Try Again, Continue, etc.)
- */
-interface QTIRendererProps {
-    /**
-     * The display-safe item to render.
-     * Use `buildDisplayModel()` to create this from a parsed AssessmentItem.
-     */
-    item: DisplayItem;
-    /**
-     * Current user responses, keyed by response identifier.
-     * This is a controlled component - you must manage this state.
-     * @example { "RESPONSE": "A" } or { "RESPONSE": ["A", "C"] }
-     */
-    responses: Record<string, string | string[]>;
-    /**
-     * Callback fired when user selects/changes an answer.
-     * Update your responses state in this callback.
-     */
-    onResponseChange: (responseId: string, value: string | string[]) => void;
-    /**
-     * Theme to apply. Defaults to "duolingo".
-     * Available themes: "duolingo", "neobrutalist", or any custom theme
-     * defined via `[data-qti-theme="your-theme"]` CSS.
-     */
-    theme?: QTITheme;
-    /**
-     * Whether to show feedback states (correct/incorrect styling).
-     * Set to true after validation to display results.
-     */
-    showFeedback?: boolean;
-    /**
-     * Whether to disable all interactions.
-     * Typically set to true when showFeedback is true.
-     */
-    disabled?: boolean;
-    /**
-     * Per-choice correctness for highlighting selected answers.
-     * Keyed by response identifier.
-     */
-    choiceCorrectness?: Record<string, ChoiceCorrectness[]>;
-    /**
-     * Per-response feedback messages to display.
-     * Keyed by response identifier.
-     */
-    responseFeedback?: Record<string, ResponseFeedback>;
-    /**
-     * Overall feedback to display at the end of the question.
-     */
-    overallFeedback?: ResponseFeedback;
-    /**
-     * Additional CSS class for the container.
-     */
-    className?: string;
-}
-interface ContentBlockRendererProps {
-    /** The content block to render */
-    block: DisplayBlock;
-    /** Current user responses */
-    responses?: Record<string, string | string[]>;
-    /** Callback when user selects an answer */
-    onAnswerSelect?: (responseIdentifier: string, value: string | string[]) => void;
-    /** Whether to show feedback */
-    showFeedback?: boolean;
-    /** Whether to disable interactions */
-    disabled?: boolean;
-    /** Selected-only correctness mapping for this render pass */
-    selectedChoicesByResponse?: Record<string, Array<{
+    contentHtml: string;
+    inlineFeedbackHtml?: string;
+};
+type DisplayChoiceInteraction = {
+    type: "choice";
+    responseId: string;
+    cardinality: "single" | "multiple";
+    promptHtml: string;
+    choices: DisplayChoice[];
+    minChoices: number;
+    maxChoices: number;
+};
+type DisplayTextInteraction = {
+    type: "text";
+    responseId: string;
+    expectedLength?: number;
+    placeholder?: string;
+    patternMask?: string;
+};
+type DisplayTextEmbed = {
+    responseId: string;
+    expectedLength?: number;
+    placeholder?: string;
+    patternMask?: string;
+};
+type DisplayOrderInteraction = {
+    type: "order";
+    responseId: string;
+    promptHtml: string;
+    choices: DisplayChoice[];
+    orientation: "vertical" | "horizontal";
+};
+type DisplayGapText = {
+    id: string;
+    contentHtml: string;
+    matchMax: number;
+};
+type DisplayGap = {
+    id: string;
+};
+type DisplayGapMatchInteraction = {
+    type: "gapMatch";
+    responseId: string;
+    gapTexts: DisplayGapText[];
+    gaps: DisplayGap[];
+    contentHtml: string;
+};
+type DisplayAssociableChoice = {
+    id: string;
+    contentHtml: string;
+    matchMax: number;
+};
+type DisplayMatchInteraction = {
+    type: "match";
+    responseId: string;
+    promptHtml: string;
+    maxAssociations: number;
+    sourceChoices: DisplayAssociableChoice[];
+    targetChoices: DisplayAssociableChoice[];
+};
+type DisplayInteraction = DisplayChoiceInteraction | DisplayTextInteraction | DisplayOrderInteraction | DisplayGapMatchInteraction | DisplayMatchInteraction;
+type DisplayInlineEmbed = {
+    responseId: string;
+    shuffle: boolean;
+    choices: Array<Pick<DisplayChoice, "id" | "contentHtml">>;
+};
+type DisplayBlock = {
+    type: "stimulus";
+    html: string;
+} | {
+    type: "richStimulus";
+    html: string;
+    inlineEmbeds: Record<string, DisplayInlineEmbed>;
+    textEmbeds: Record<string, DisplayTextEmbed>;
+} | {
+    type: "interaction";
+    interaction: DisplayInteraction;
+};
+type DisplayItem = {
+    title: string;
+    contentBlocks: DisplayBlock[];
+};
+type FormShape = Record<string, "single" | "multiple" | "ordered" | "directedPair">;
+type ValidateResult = {
+    overallCorrect: boolean;
+    perResponse: Record<string, {
+        isCorrect: boolean;
+        messageHtml?: string;
+    }>;
+    selectedChoicesByResponse: Record<string, Array<{
         id: string;
         isCorrect: boolean;
     }>>;
-    /** Optional per-response feedback messages from server */
-    perResponseFeedback?: Record<string, {
+    overallFeedback?: {
         isCorrect: boolean;
         messageHtml?: string;
-    }>;
-}
-/**
- * Renders a single content block (stimulus or interaction)
- */
-declare function ContentBlockRenderer({ block, responses, onAnswerSelect, showFeedback, disabled, selectedChoicesByResponse, perResponseFeedback }: ContentBlockRendererProps): react_jsx_runtime.JSX.Element | null;
-/**
- * A controlled, display-only component for rendering QTI assessment items.
- *
- * **This component does NOT include buttons or submission logic.**
- * The consuming app is responsible for:
- * - Managing `responses` state
- * - Rendering Check/Submit/Try Again buttons
- * - Calling validation APIs
- * - Providing feedback data after validation
- *
- * @example
- * ```tsx
- * const [responses, setResponses] = useState({})
- * const [feedback, setFeedback] = useState(null)
- *
- * <QTIRenderer
- *   item={displayItem}
- *   responses={responses}
- *   onResponseChange={(id, value) => setResponses(prev => ({ ...prev, [id]: value }))}
- *   theme="neobrutalist"
- *   showFeedback={!!feedback}
- *   responseFeedback={feedback?.perResponse}
- *   overallFeedback={feedback?.overall}
- *   disabled={!!feedback}
- * />
- *
- * <button onClick={handleCheck}>Check Answer</button>
- * ```
- */
-declare function QTIRenderer({ item, responses, onResponseChange, theme, showFeedback, disabled, choiceCorrectness, responseFeedback, overallFeedback, className }: QTIRendererProps): react_jsx_runtime.JSX.Element;
+    };
+};
 
 declare const ChoiceInteractionSchema: z.ZodObject<{
     responseIdentifier: z.ZodString;
@@ -573,5 +540,16 @@ declare const AssessmentItemSchema: z.ZodObject<{
     }, z.core.$strip>;
 }, z.core.$strip>;
 type AssessmentItem = z.infer<typeof AssessmentItemSchema>;
+/**
+ * Represents a QTI 3.0 Assessment Stimulus.
+ * Stimuli are standalone reading materials that can be referenced by assessment items.
+ */
+declare const AssessmentStimulusSchema: z.ZodObject<{
+    identifier: z.ZodString;
+    title: z.ZodDefault<z.ZodString>;
+    xmlLang: z.ZodDefault<z.ZodString>;
+    bodyHtml: z.ZodString;
+}, z.core.$strip>;
+type AssessmentStimulus = z.infer<typeof AssessmentStimulusSchema>;
 
-export { type AnyCondition as A, type ChoiceCorrectness as C, type FeedbackBlock as F, type GapMatchInteraction as G, type InlineChoiceInteraction as I, type MatchInteraction as M, type OrderInteraction as O, type QTIRendererProps as Q, type ResponseFeedback as R, type TextEntryInteraction as T, type ContentBlockRendererProps as a, type QTITheme as b, type AnyInteraction as c, type AssessmentItem as d, type ChoiceInteraction as e, type ResponseDeclaration as f, type ResponseProcessing as g, ContentBlockRenderer as h, QTIRenderer as i, AssessmentItemSchema as j };
+export { type AssessmentItem as A, type ChoiceInteraction as C, type DisplayAssociableChoice as D, type FeedbackBlock as F, type GapMatchInteraction as G, type InlineChoiceInteraction as I, type MatchInteraction as M, type OrderInteraction as O, type ResponseDeclaration as R, type TextEntryInteraction as T, type ValidateResult as V, type AssessmentStimulus as a, type AnyCondition as b, type AnyInteraction as c, type ResponseProcessing as d, type DisplayBlock as e, type DisplayChoice as f, type DisplayChoiceInteraction as g, type DisplayGap as h, type DisplayGapText as i, type DisplayInlineEmbed as j, type DisplayItem as k, type DisplayTextEmbed as l, type FormShape as m, AssessmentItemSchema as n, AssessmentStimulusSchema as o };

package/dist/styles/duolingo.css

@@ -0,0 +1,221 @@
+/* src/styles/duolingo.css */
+:root {
+  --duolingo-polar: oklch(0.9761 0 0);
+  --duolingo-swan: oklch(0.9219 0 0);
+  --duolingo-hare: oklch(0.754 0 0);
+  --duolingo-wolf: oklch(0.5693 0 0);
+  --duolingo-eel: oklch(0.4128 0 0);
+  --duolingo-squid: oklch(0.9221 0.0087 17.31);
+  --duolingo-walking-fish: oklch(0.9303 0.0355 15.66);
+  --duolingo-flamingo: oklch(0.8365 0.0903 19.14);
+  --duolingo-pig: oklch(0.7979 0.0965 19.42);
+  --duolingo-crab: oklch(0.7314 0.1652 21.99);
+  --duolingo-cardinal: oklch(0.6708 0.2165 25.19);
+  --duolingo-fire-ant: oklch(0.6059 0.2241 27.19);
+  --duolingo-canary: oklch(0.9693 0.0455 93.5);
+  --duolingo-duck: oklch(0.9168 0.1416 99.05);
+  --duolingo-bee: oklch(0.8575 0.1752 88.49);
+  --duolingo-lion: oklch(0.8142 0.1704 76.91);
+  --duolingo-fox: oklch(0.7669 0.1748 63.06);
+  --duolingo-cheetah: oklch(0.8801 0.098 73.41);
+  --duolingo-monkey: oklch(0.7625 0.1199 66.64);
+  --duolingo-camel: oklch(0.767 0.1586 80.31);
+  --duolingo-guinea-pig: oklch(0.6532 0.147779 63.9665);
+  --duolingo-grizzly: oklch(0.572 0.0946 48.48);
+  --duolingo-sea-sponge: oklch(0.9546 0.1012 131.98);
+  --duolingo-turtle: oklch(0.8717 0.1754 133.4);
+  --duolingo-owl: oklch(0.7478 0.2289 137.63);
+  --duolingo-tree-frog: oklch(0.6516 0.1894 134.73);
+  --duolingo-iguana: oklch(0.9536 0.0284 228.04);
+  --duolingo-anchovy: oklch(0.9066 0.02 212.55);
+  --duolingo-beluga: oklch(0.9277 0.0584 213.8);
+  --duolingo-moon-jelly: oklch(0.8875 0.1069 196.87);
+  --duolingo-blue-jay: oklch(0.8429 0.0982 229.43);
+  --duolingo-macaw: oklch(0.7181 0.1513 237.07);
+  --duolingo-whale: oklch(0.6476 0.1358 236.91);
+  --duolingo-humpback: oklch(0.5493 0.1544 256.44);
+  --duolingo-narwhal: oklch(0.4514 0.1434 256.99);
+  --duolingo-starfish: oklch(0.8359 0.1184 342.63);
+  --duolingo-beetle: oklch(0.7345 0.1876 310.63);
+  --duolingo-betta: oklch(0.604 0.1505 299.92);
+  --duolingo-butterfly: oklch(0.4981 0.1306 300.05);
+  --color-polar: var(--duolingo-polar);
+  --color-swan: var(--duolingo-swan);
+  --color-hare: var(--duolingo-hare);
+  --color-wolf: var(--duolingo-wolf);
+  --color-eel: var(--duolingo-eel);
+  --color-squid: var(--duolingo-squid);
+  --color-walking-fish: var(--duolingo-walking-fish);
+  --color-flamingo: var(--duolingo-flamingo);
+  --color-pig: var(--duolingo-pig);
+  --color-crab: var(--duolingo-crab);
+  --color-cardinal: var(--duolingo-cardinal);
+  --color-fire-ant: var(--duolingo-fire-ant);
+  --color-canary: var(--duolingo-canary);
+  --color-duck: var(--duolingo-duck);
+  --color-bee: var(--duolingo-bee);
+  --color-lion: var(--duolingo-lion);
+  --color-fox: var(--duolingo-fox);
+  --color-cheetah: var(--duolingo-cheetah);
+  --color-monkey: var(--duolingo-monkey);
+  --color-camel: var(--duolingo-camel);
+  --color-guinea-pig: var(--duolingo-guinea-pig);
+  --color-grizzly: var(--duolingo-grizzly);
+  --color-sea-sponge: var(--duolingo-sea-sponge);
+  --color-turtle: var(--duolingo-turtle);
+  --color-owl: var(--duolingo-owl);
+  --color-tree-frog: var(--duolingo-tree-frog);
+  --color-iguana: var(--duolingo-iguana);
+  --color-anchovy: var(--duolingo-anchovy);
+  --color-beluga: var(--duolingo-beluga);
+  --color-moon-jelly: var(--duolingo-moon-jelly);
+  --color-blue-jay: var(--duolingo-blue-jay);
+  --color-macaw: var(--duolingo-macaw);
+  --color-whale: var(--duolingo-whale);
+  --color-humpback: var(--duolingo-humpback);
+  --color-narwhal: var(--duolingo-narwhal);
+  --color-starfish: var(--duolingo-starfish);
+  --color-beetle: var(--duolingo-beetle);
+  --color-betta: var(--duolingo-betta);
+  --color-butterfly: var(--duolingo-butterfly);
+  --background: var(--duolingo-polar);
+  --foreground: var(--duolingo-eel);
+  --muted: var(--duolingo-swan);
+  --muted-foreground: var(--duolingo-wolf);
+  --border: var(--duolingo-swan);
+  --input: var(--duolingo-hare);
+  --accent: var(--duolingo-swan);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-accent: var(--accent);
+  --radius: 1rem;
+  --radius-xs: 0.5rem;
+  --radius-sm: 0.75rem;
+  --radius-md: 0.875rem;
+  --radius-lg: 1rem;
+}
+.dark {
+  --background: oklch(0.2301 0.0215 228.5177);
+  --foreground: var(--duolingo-polar);
+  --muted: oklch(0.3847 0.0246 234.6115);
+  --muted-foreground: oklch(0.494 0.0263 225.3177);
+  --border: oklch(0.3847 0.0246 234.6115);
+  --input: oklch(0.494 0.0263 225.3177);
+  --accent: oklch(0.2949 0.0237 228.4373);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-accent: var(--accent);
+}
+.qti-html-content {
+  color: inherit !important;
+}
+.qti-html-content *,
+.qti-html-content p,
+.qti-html-content div,
+.qti-html-content span,
+.qti-html-content li {
+  color: inherit !important;
+}
+.qti-html-content .qti-feedback-preamble p,
+.qti-html-content .qti-step p,
+.qti-html-content .qti-step-title {
+  color: inherit !important;
+}
+.qti-html-content .qti-step-index {
+  color: white !important;
+}
+.qti-html-content .qti-step {
+  background: transparent !important;
+  border-color: var(--border) !important;
+}
+.qti-html-content strong,
+.qti-html-content b {
+  font-weight: 700;
+}
+.qti-html-content em,
+.qti-html-content i {
+  font-style: italic;
+}
+.qti-html-content p {
+  margin-bottom: 0.5rem;
+}
+.qti-html-content ul {
+  margin-left: 1.5rem;
+  margin-bottom: 0.5rem;
+  list-style-type: disc;
+}
+.qti-html-content ol {
+  margin-left: 1.5rem;
+  margin-bottom: 0.5rem;
+  list-style-type: decimal;
+}
+.qti-html-content li {
+  margin-bottom: 0.25rem;
+}
+.qti-html-content math,
+.qti-html-content math *,
+.qti-html-content math mi,
+.qti-html-content math mo,
+.qti-html-content math mn,
+.qti-html-content math mtext {
+  color: inherit !important;
+}
+[data-slot=choice-indicator].rounded-xs,
+[data-slot=choice-indicator] {
+  border-radius: 12px !important;
+  min-width: 2rem !important;
+  min-height: 2rem !important;
+  width: 2rem !important;
+  height: 2rem !important;
+}
+[data-slot=choice-indicator][data-state=checked]:not([data-filled=true]) {
+  background: var(--background) !important;
+  border-color: var(--duolingo-macaw) !important;
+  color: var(--duolingo-macaw) !important;
+}
+[data-slot=choice-indicator][data-filled=true][data-state=checked] {
+  background: var(--duolingo-macaw) !important;
+  border-color: var(--duolingo-macaw) !important;
+  box-shadow: inset 0 0 0 3px var(--background) !important;
+}
+[data-slot=choice-indicator][data-palette=owl][data-state=checked]:not([data-filled=true]) {
+  background: var(--background) !important;
+  border-color: var(--duolingo-tree-frog) !important;
+  color: var(--duolingo-owl) !important;
+}
+[data-slot=choice-indicator][data-palette=owl][data-filled=true][data-state=checked] {
+  background: var(--duolingo-owl) !important;
+  border-color: var(--duolingo-tree-frog) !important;
+  box-shadow: inset 0 0 0 3px var(--background) !important;
+}
+[data-slot=choice-indicator][data-palette=cardinal][data-state=checked]:not([data-filled=true]) {
+  background: var(--background) !important;
+  border-color: var(--duolingo-fire-ant) !important;
+  color: var(--duolingo-cardinal) !important;
+}
+[data-slot=choice-indicator][data-palette=cardinal][data-filled=true][data-state=checked] {
+  background: var(--duolingo-cardinal) !important;
+  border-color: var(--duolingo-fire-ant) !important;
+  box-shadow: inset 0 0 0 3px var(--background) !important;
+}
+[data-slot=field-label]:has(> [data-slot=field]):has([data-state=checked]) {
+  background: oklch(0.9536 0.0284 228.04 / 0.3) !important;
+  border-color: var(--duolingo-macaw) !important;
+}
+[data-slot=field-label][data-palette=owl]:has(> [data-slot=field]):has([data-state=checked]) {
+  background: oklch(0.9546 0.1012 131.98 / 0.3) !important;
+  border-color: var(--duolingo-owl) !important;
+}
+[data-slot=field-label][data-palette=cardinal]:has(> [data-slot=field]):has([data-state=checked]) {
+  background: oklch(0.9221 0.0087 17.31 / 0.3) !important;
+  border-color: var(--duolingo-cardinal) !important;
+}
+/*# sourceMappingURL=duolingo.css.map */