@khanacademy/perseus 87.0.0 → 87.1.0

package/dist/components/drag-and-drop/answer-tile/answer-tile.d.ts

@@ -0,0 +1,88 @@
+import * as React from "react";
+import type { MoveTarget } from "../dnd-action-menu";
+/** What a scored tile shows. Each value names a CSS class in the module. */
+export type TileScoring = "correct" | "incorrect" | "unused";
+export interface AnswerTileProps {
+    /** The tile that moves, named as the widget's placements name it. */
+    tileId: string;
+    /**
+     * The blank this tile sits in. Omit for a tile in the choice bank.
+     * The tile reports both ids to dnd-kit, so a drop knows what moved
+     * and where it came from.
+     */
+    fromBlankId?: string;
+    /**
+     * Perseus markdown for the tile face: text, TeX, or an image.
+     * Use "" for an empty tile.
+     */
+    content: string;
+    /**
+     * Labels the tile's menu button for screen readers, as translated
+     * plain text.
+     */
+    label: string;
+    /**
+     * The result the tile shows once the question is scored. A placed tile
+     * is "correct" or "incorrect"; a tile the learner left in the choice
+     * bank is "unused", which dims it. Omit it before scoring.
+     *
+     * A scored tile has no menu and cannot be dragged, whichever result
+     * it shows.
+     */
+    scoring?: TileScoring;
+    /**
+     * Blanks the tile can move to, which populate the menu.
+     * An empty array is valid: a placed tile in a one-blank exercise
+     * can only be cleared, due to no other legitimate moveTargets.
+     */
+    moveTargets: ReadonlyArray<MoveTarget>;
+    /** Called with the target blank's id when a move action is selected. */
+    onMove: (targetId: string) => void;
+    /**
+     * Label of the blank/column the tile currently sits in, which is used
+     * as part of the aria-label for the "Clear" button in the Action Menu.
+     */
+    clearFromLabel?: string;
+    /** Callback for removing the tile from its blank. */
+    onClear?: () => void;
+    /** Remaining uses for a multi-use tile, spoken by the menu opener. */
+    remainingUses?: number;
+    /**
+     * This ref points to the menu's opener button. The parent uses it to
+     * move focus after a tile moves.
+     */
+    menuRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Set true for a tile whose menu stays hidden until hover or focus.
+     * Fill in the Blank uses this for a tile in an inline blank, to keep
+     * the line of text short at rest.
+     */
+    hidesMenuAtRest?: boolean;
+    /**
+     * Set true for a placed tile that stretches to fill its blank, with
+     * the content at the start. The menu stays visible. The Sorter uses
+     * this for placed tiles.
+     */
+    fillsBlank?: boolean;
+    /** Called when the tile's content renders (TeX ready, image update). */
+    onContentRender?: () => void;
+    /**
+     * Set true for a tile placed in a sub/superscript blank. The tile
+     * rests as a small value chip until hover or focus.
+     */
+    compact?: boolean;
+    /**
+     * Display height in pixels for an image tile's image. The schema
+     * types this as a plain number; the editor offers 24-96 in steps
+     * of 12.
+     */
+    imageHeight?: number;
+}
+/**
+ * AnswerTile is the card that a learner moves into a blank. It is part of
+ * the Drag-and-Drop widget family. The tile shows authored markdown
+ * content: text, TeX, or an image. It puts the DndActionMenu at its
+ * leading edge. The parent widget sets `scoring` once the question is
+ * scored.
+ */
+export declare function AnswerTile(props: AnswerTileProps): React.ReactElement;

package/dist/components/drag-and-drop/answer-tile/index.d.ts

@@ -0,0 +1,2 @@
+export { AnswerTile } from "./answer-tile";
+export type { AnswerTileProps } from "./answer-tile";

package/dist/components/drag-and-drop/blank/blank-component.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+/** How a blank renders: full size, or smaller for exponents/indices. */
+export type BlankDisplayType = "normal" | "superscript" | "subscript";
+export interface BlankComponentProps {
+    /**
+     * Unique identifier of this blank. It doubles as the dnd-kit droppable
+     * id and as the target id the widget receives when a tile moves here,
+     * so it must be unique within the surrounding PerseusDndProvider.
+     * The blank widget passes its renderer-assigned `widgetId`; widgets
+     * that use this component directly supply their own ids.
+     */
+    blankId: string;
+    displayType: BlankDisplayType;
+    /** The placed answer tile, when one sits in this blank. */
+    children?: React.ReactNode;
+    /**
+     * Minimum width of the empty slot. The FITB spec sizes an empty blank
+     * to the widest answer tile so the slot's size does not reveal the
+     * answer; the widget computes that width and passes it here. Defaults
+     * to the design's 65px minimum. A placed tile still grows the blank
+     * beyond this.
+     */
+    minWidth?: number;
+    /**
+     * Keeps the empty-slot width when a tile is placed, so the line
+     * does not reflow. Without it a filled blank hugs its tile.
+     */
+    keepsWidthWhenFilled?: boolean;
+    /** Extra class for the slot element, for widget-level layout. */
+    className?: string;
+    testId?: string;
+}
+/**
+ * Blank is the drop slot an answer tile can be placed into. It is part of
+ * the Drag-and-Drop widget family. It renders the slot's chrome (dashed
+ * border while empty) and registers itself as a dnd-kit drop target.
+ *
+ * Fill in the Blank reaches it through the `blank` widget, which owns the
+ * Perseus widget plumbing; other widgets can render it directly.
+ */
+export declare function BlankComponent(props: BlankComponentProps): React.ReactElement;

package/dist/components/drag-and-drop/blank/index.d.ts

@@ -0,0 +1,2 @@
+export { BlankComponent } from "./blank-component";
+export type { BlankComponentProps } from "./blank-component";

package/dist/components/drag-and-drop/choice-bank.d.ts

@@ -1,10 +1,17 @@
 import * as React from "react";
+/**
+ * The bank's droppable id: a tile dropped here returns to the bank.
+ * Every widget mounts its own PerseusDndProvider, which scopes drag ids,
+ * so one shared value stays unique for two widgets on one page.
+ */
+export declare const CHOICE_BANK_DROP_ID = "choice-bank";
 interface ChoiceBankProps {
     /**
-     * The answer tiles to lay out. Each renders as its own `<li>`. Pass an
-     * empty array for an empty bank (e.g. once every tile has been placed).
+     * The answer tiles to lay out. Each child renders as its own `<li>`,
+     * so pass the tiles as siblings and not inside a fragment. Pass
+     * nothing for an empty bank (e.g. once every tile has been placed).
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** Visible label; also names the tile list for assistive tech. */
     label: string;
 }

package/dist/components/drag-and-drop/dnd-action-menu/dnd-action-menu.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export type MoveTarget = {
+    /** id of the intended blank target */
+    id: string;
+    /** The blank/column's label, e.g. "Blank 1" or an authored column name. */
+    label: string;
+};
+export interface DndActionMenuProps {
+    /** The tile's value — labels the button via aria-label. */
+    tileLabel: string;
+    /**
+     * Remaining uses for a multi-use tile. When provided, it is spoken as
+     * part of the opener's description ("5 remaining. Actions menu").
+     */
+    remainingUses?: number;
+    /**
+     * Available Blanks/columns this tile can move to.
+     */
+    moveTargets: ReadonlyArray<MoveTarget>;
+    /** Called with the target blank's id when a move action is selected. */
+    onMove: (targetId: string) => void;
+    /**
+     * The blank's visible label, e.g. "Blank 1", spoken as "Clear from
+     * Blank 1". Pass it with onClear for a tile that sits in a blank;
+     * omit both for a tile in the choice bank.
+     */
+    clearFromLabel?: string;
+    /** Called when the Clear action is selected. */
+    onClear?: () => void;
+}
+/**
+ * DndActionMenu is the menu that appears on each Answer Tile in our upcoming
+ * Drag-and-Drop widget family. It lists every blank the tile can move to and,
+ * when the tile is placed in a blank, a Clear action.
+ *
+ * This is currently purely presentational, and does not include the dnd-kit wiring
+ * or move announcements, which will be tackled in future tickets.
+ */
+export declare const DndActionMenu: React.ForwardRefExoticComponent<DndActionMenuProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/drag-and-drop/dnd-action-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { DndActionMenu } from "./dnd-action-menu";
+export type { DndActionMenuProps, MoveTarget } from "./dnd-action-menu";

package/dist/components/drag-and-drop/dnd-action-menu/merged-ref-opener.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+/**
+ * Props for the custom Action Menu opener
+ */
+type MergedRefOpenerProps = {
+    /** The parent-facing ref, forwarded by DndActionMenu for focus return. */
+    openerRef: React.ForwardedRef<HTMLButtonElement>;
+    disabled: boolean;
+    "aria-label": string;
+    "aria-describedby": string;
+    className: string;
+    children: React.ReactNode;
+};
+/**
+ * Two things need a ref to the opener button: ActionMenu (to restore focus
+ * when the menu closes) and our parent (to move focus after a tile moves).
+ * ActionMenu overwrites any ref we set directly, so this wrapper catches
+ * ActionMenu's ref and writes the button into both.
+ */
+export declare const MergedRefOpener: React.ForwardRefExoticComponent<MergedRefOpenerProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/drag-and-drop/drag-ids.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The payload a dragged tile carries. dnd-kit returns it at drag end as
+ * `operation.source.data`, so widgets read the move directly instead of
+ * decoding the drag id.
+ */
+export type TileDragData = {
+    /** The tile that moves. */
+    tileId: string;
+    /** The blank the tile starts in. Absent for a tile in the bank. */
+    fromBlankId?: string;
+};
+/**
+ * Builds the drag id for a tile. dnd-kit needs one unique id per
+ * draggable, and one tile can show in the bank and in a blank at the
+ * same time, so the id includes the location.
+ */
+export declare function tileDragId(data: TileDragData): string;
+/**
+ * Reads the payload from a dnd-kit drag. dnd-kit types its data field
+ * as an open record, so this is where the shape is checked. Returns
+ * null for a drag that another component started.
+ */
+export declare function readTileDragData(data: Record<string, any> | undefined): TileDragData | null;

package/dist/components/drag-and-drop/perseus-dnd-provider.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { DragEndEvent } from "@dnd-kit/react";
+type Props = {
+    children: React.ReactNode;
+    /**
+     * Called when a drag gesture finishes. Read the dropped tile and its
+     * target from `event.operation.source` / `event.operation.target`.
+     * Temporary surface: the provider will grow an `onMove`/`onClear`
+     * translation layer so widgets never touch raw dnd-kit events.
+     */
+    onDragEnd?: (event: DragEndEvent) => void;
+};
+/**
+ * PerseusDndProvider is the drag-and-drop context that the Drag-and-Drop
+ * widget family renders around its draggables and droppables. Each widget
+ * instance mounts its own provider, so drag state never leaks between two
+ * widgets on one page.
+ *
+ * Dragging is a pointer-device interaction (mouse and touch): keyboard and
+ * screen-reader users move tiles through each tile's DndActionMenu, which
+ * is the single-pointer, non-dragging alternative WCAG 2.5.7 requires.
+ * Two dnd-kit defaults are therefore overridden:
+ *
+ * - Sensors: only the PointerSensor. dnd-kit's KeyboardSensor would add a
+ *   second, competing keyboard path.
+ * - Plugins: dnd-kit's Accessibility plugin is removed. It would make
+ *   every tile a focusable `role="button"` (an invalid nested control
+ *   around the menu's real button) and speak keyboard-drag instructions
+ *   for a mode that is off. Move announcements are instead the widget's
+ *   job, through the Wonder Blocks Announcer, for the drag path and the
+ *   menu path alike — one owner per event.
+ */
+export declare const PerseusDndProvider: (props: Props) => React.JSX.Element;
+export {};

package/dist/components/drag-and-drop/temp-strings.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Temporary, untranslated strings for the Drag-and-Drop components.
+ *
+ * The copy is still in flux during development, so these live here
+ * instead of PerseusStrings to avoid churning the frontend's translation
+ * surface with every tweak. Each entry mirrors the shape it will have in
+ * PerseusStrings.
+ *
+ * TODO(LEMS-4368): once the copy is finalized, move these entries into
+ * PerseusStrings (strings.ts) and swap consumers to usePerseusI18n.
+ */
+export declare const tempDndStrings: {
+    moveTo: string;
+    clear: string;
+    moveToTarget: ({ target }: {
+        target: string;
+    }) => string;
+    clearTarget: ({ target }: {
+        target: string;
+    }) => string;
+    actionsMenu: string;
+    menuRemaining: ({ num }: {
+        num: number;
+    }) => string;
+    choices: string;
+    blankLabel: ({ num }: {
+        num: number;
+    }) => string;
+    movedToTarget: ({ tile, target }: {
+        tile: string;
+        target: string;
+    }) => string;
+    returnedToChoices: ({ tile }: {
+        tile: string;
+    }) => string;
+};

package/dist/components/drag-and-drop/tile-placements.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Pure placement transitions for the Drag-and-Drop widget family.
+ * The parent widget owns the state. The drag path and the menu path
+ * call the same functions.
+ *
+ * These functions apply the FITB/Sorter model: one tile per blank,
+ * swap-to-bank displacement. Stacking models (Categorizer) are out of
+ * scope.
+ */
+/**
+ * Maps blankId to the tileId of the placed tile. A missing key means
+ * the blank is empty. With multi-use tiles, one tileId can appear
+ * under more than one blank.
+ */
+export type TilePlacements = Readonly<Record<string, string>>;
+export type TileUsage = "single" | "multi";
+/**
+ * Places a tile into a blank. The occupant of the target blank returns
+ * to the bank. Set `fromBlankId` when the tile moves out of a blank.
+ */
+export declare function placeTile(placements: TilePlacements, move: {
+    tileId: string;
+    fromBlankId?: string;
+}, targetBlankId: string, tileUsage: TileUsage): TilePlacements;
+/** Empties a blank. Its tile returns to the bank. */
+export declare function clearBlank(placements: TilePlacements, blankId: string): TilePlacements;
+/**
+ * Returns how many more times the tile can be placed. Returns null for
+ * a multi-use tile with no cap.
+ */
+export declare function remainingUses(placements: TilePlacements, tileId: string, tileUsage: TileUsage, maxUsesPerTile?: number): number | null;
+/** Returns true when the choice bank shows this tile. */
+export declare function isTileInBank(placements: TilePlacements, tileId: string, tileUsage: TileUsage, maxUsesPerTile?: number): boolean;

package/dist/components/drag-and-drop/use-tile-move-actions.d.ts

@@ -0,0 +1,28 @@
+import type { TileDragData } from "./drag-ids";
+import type { TilePlacements, TileUsage } from "./tile-placements";
+import type { DragEndEvent } from "@dnd-kit/react";
+/**
+ * Move, clear, and drag-end handling shared by the widgets that place
+ * tiles into blanks. Each action updates the controlled placements and
+ * announces the result.
+ *
+ * handleMove and handleClear are for the tiles' menus, and also move
+ * focus back to a menu afterwards: pass `firstBankMenuRef` to the
+ * bank's first menu button and `placedMenuRef(blankId)` to each placed
+ * tile's menu button. handleDragEnd is for the PerseusDndProvider, and
+ * leaves focus alone: a drag is a pointer interaction.
+ */
+export declare function useTileMoveActions(options: {
+    placements: TilePlacements;
+    onPlacementsChange: (next: TilePlacements) => void;
+    tileUsage: TileUsage;
+    getTileLabel: (tileId: string) => string;
+    getBlankLabel: (blankId: string) => string;
+    blankIds: ReadonlyArray<string>;
+}): {
+    handleMove: (move: TileDragData, targetBlankId: string) => void;
+    handleClear: (blankId: string) => void;
+    handleDragEnd: (event: DragEndEvent) => void;
+    firstBankMenuRef: (button: HTMLButtonElement | null) => void;
+    placedMenuRef: (blankId: string) => (button: HTMLButtonElement | null) => void;
+};

package/dist/es/index.css

@@ -16,7 +16,7 @@
         --wb-font-heading-size-small
     );--perseus-multiple-choice-indicator-size:3.2rem;--perseus-multiple-choice-indicator-correct-size:calc(var(--perseus-multiple-choice-indicator-font-size)*1.5 + var(--perseus-multiple-choice-indicator-size));--perseus-multiple-choice-content-margin:calc(var(--perseus-multiple-choice-spacing) + var(--perseus-multiple-choice-indicator-size));--perseus-multiple-choice-fade-direction:90deg;--perseus-multiple-choice-fade-color:var(
         --perseus-widget-background-color,var(--wb-semanticColor-core-background-base-default)
-    );box-sizing:border-box;min-width:auto;padding-inline-end:var(--perseus-multiple-choice-spacing);position:relative;transform:translateZ(0)}.perseus_ejJezW-c{list-style:none;margin:0;min-width:fit-content;padding:0;scrollbar-width:thin;width:100%}.perseus_ejJezW-c:dir(rtl){--perseus-multiple-choice-fade-direction:270deg}.perseus_ejJezW-c:before{background:linear-gradient(var(--perseus-multiple-choice-fade-direction),var(--perseus-multiple-choice-fade-color) calc(var(--mobile-font-scale, 1)*(var(--perseus-multiple-choice-content-margin) + (var(--perseus-multiple-choice-spacing)/2))),transparent calc(var(--mobile-font-scale, 1)*(var(--perseus-multiple-choice-content-margin) + var(--perseus-multiple-choice-spacing))) calc(100% - var(--mobile-font-scale, 1)*var(--perseus-multiple-choice-spacing)*1.5),var(--perseus-multiple-choice-fade-color) calc(100% - var(--mobile-font-scale, 1)*var(--perseus-multiple-choice-spacing)));content:"";display:block;height:100%;position:fixed;width:100%}.perseus_zAWs4E3G{--perseus-content-line-height:var(--wb-font-heading-lineHeight-medium);display:flex;flex-direction:column;gap:var(--wb-sizing-size_120);margin-inline-start:var(--perseus-multiple-choice-content-margin);position:relative;z-index:-1}@supports (margin-block-start:1lh){.perseus_zAWs4E3G{--perseus-content-line-height:1lh}}.perseus_zAWs4E3G:not(:has(.paragraph:first-child>.paragraph :is(img,mjx-mfrac,mjx-msqrt,mjx-mroot,mjx-munder,mjx-mover,mjx-munderover))){margin-block-start:calc((var(--perseus-multiple-choice-indicator-size) - var(--perseus-content-line-height))*.4)}@media (prefers-reduced-motion:no-preference){.perseus_zAWs4E3G{transition:all .125s}}.perseus_WyGpYl3q{color:var(--wb-semanticColor-core-foreground-neutral-strong);display:block;font-family:inherit;font-style:normal;font-weight:var(--wb-font-weight-bold);margin-block-end:var(--wb-sizing-size_160)}.perseus_6vMrWVz0,.perseus_WyGpYl3q{font-size:var(--wb-font-body-size-medium);line-height:var(--wb-font-body-lineHeight-medium)}.perseus_6vMrWVz0{font-weight:var(--wb-font-weight-medium)}.perseus_6vMrWVz0.perseus_Zv66BVdg{color:var(--wb-semanticColor-core-foreground-neutral-default)}.perseus_6vMrWVz0 .perseus-renderer{display:flex;flex-direction:column;gap:var(--wb-sizing-size_120)}.perseus_6vMrWVz0 .perseus-renderer .paragraph{margin:0}.perseus_6vMrWVz0 .perseus-renderer>.paragraph:not(:has(*)){display:none}.perseus_hJzSXKwq{--perseus-multiple-choice-content-margin:calc(var(--perseus-multiple-choice-spacing) + var(--perseus-multiple-choice-indicator-correct-size))}.perseus_LCi2Yw7w{background:var(--wb-semanticColor-core-background-base-subtle);border:var(--wb-border-width-thin) dashed var(--wb-semanticColor-core-border-neutral-default);border-radius:var(--wb-border-radius-radius_040);gap:var(--wb-sizing-size_240);height:48px;padding:var(--wb-sizing-size_0);width:65px}.perseus_LCi2Yw7w.perseus_8JKzE83C{height:28px;width:26px}.perseus_5CDFHduT{border-bottom:none;color:var(--wb-semanticColor-core-foreground-instructive-default)}:active>.perseus_5CDFHduT,:focus>.perseus_5CDFHduT,:hover>.perseus_5CDFHduT{border-bottom:var(--wb-border-width-medium) solid var(--wb-semanticColor-core-border-instructive-default)}.perseus_ydfsz2Xj{color:var(--wb-semanticColor-core-foreground-neutral-strong);font-size:var(--wb-font-body-size-medium);font-weight:var(--wb-font-weight-medium);line-height:var(--wb-font-body-lineHeight-medium)}.perseus_3AGWQQ8Z{height:auto;line-height:inherit;margin-left:-.2rem;margin-right:.2rem;padding-left:.2rem}.perseus_HDIlPzEz{border-left:var(--wb-border-width-none) solid var(--wb-semanticColor-core-border-neutral-subtle);display:inline-grid;position:relative}.perseus_NkFQFgcZ{grid-template-columns:0fr;grid-template-rows:0fr;margin-bottom:0;margin-top:0;min-width:0;padding-bottom:0;visibility:hidden}.perseus_XhV-9haB{border-left-width:5px;grid-template-columns:1fr;grid-template-rows:1fr;margin-bottom:1.4rem;margin-left:-2.3rem;margin-top:1.4rem;min-width:100%;padding-bottom:1rem;padding-left:2.3rem;visibility:visible}.perseus_WEJESS6h{overflow:hidden}.perseus_SX0g-1Bs{font-size:var(--wb-font-heading-size-medium);line-height:inherit;margin-right:-.6rem;text-align:left;white-space:normal}@media (prefers-reduced-motion:no-preference){.perseus_sbBrAODD{transition:all .25s step-end,grid-template-rows .25s,margin-top .25s,margin-bottom .25s,padding-bottom .25s}.perseus_Wp72j6qk{transition:grid-template-rows .5s,margin-top .5s,margin-bottom .5s,padding-bottom .5s}}.MafsView .protractor-rotation-handle{cursor:grab;pointer-events:all;transition:transform .15s ease-out}.MafsView .protractor-rotation-handle:hover{transform:scale(1.2)}.MafsView .protractor-rotation-handle-arrow-arc{fill:none;stroke:var(--mafs-blue);stroke-width:8;stroke-linecap:square}.MafsView .protractor-rotation-handle-arrowhead{fill:var(--mafs-blue);stroke:none}.MafsView{--mafs-bg:#000;--mafs-fg:#fff;--mafs-origin-color:var(--mafs-fg);--mafs-line-color:#555;--mafs-line-stroke-dash-style:4,3;--mafs-axis-stroke-width:1px;--grid-line-subdivision-color:#222;--mafs-red:#f11d0e;--mafs-orange:#f14e0e;--mafs-yellow:#ffe44a;--mafs-green:#15e272;--mafs-blue:#58a6ff;--mafs-indigo:#7c58ff;--mafs-violet:#ae58ff;--mafs-pink:#ee00ab;background:var(--mafs-bg);display:block;font-family:inherit;font-variant-numeric:tabular-nums;outline:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.MafsView text{fill:var(--mafs-fg);cursor:default}.MafsView path{stroke:var(--mafs-fg)}.MafsView:focus-visible{border-radius:5px;outline:3px solid #58a6ff}@supports not selector(:focus-visible){.MafsView:focus{border-radius:5px;outline:3px solid #58a6ff}}.mafs-shadow{stroke-width:3px;stroke:var(--mafs-bg);stroke-opacity:.75;stroke-linejoin:round;paint-order:stroke}.mafs-movable-point{cursor:grab;touch-action:none}.mafs-movable-point-dragging{cursor:grabbing}.mafs-movable-point:focus{outline:0}.mafs-movable-point *{fill:none;stroke:none}.mafs-movable-point-hitbox{fill:transparent}.mafs-movable-point-focus{stroke:var(--movable-point-color);stroke-width:2;stroke-opacity:0;fill:none;transition:stroke-opacity .2s ease}.mafs-movable-point-ring{fill:var(--movable-point-color);fill-opacity:.25;stroke:none;transition:r .2s ease}.mafs-movable-point-point{fill:var(--movable-point-color);transition:r .2s ease}.mafs-movable-point:focus-visible .mafs-movable-point-point,.mafs-movable-point:hover .mafs-movable-point-point{r:calc(var(--movable-point-ring-size) - 2px)}.mafs-movable-point:focus-visible .mafs-movable-point-ring,.mafs-movable-point:hover .mafs-movable-point-ring{r:calc(var(--movable-point-ring-size) + 3px)}.mafs-movable-point.mafs-movable-point-dragging .mafs-movable-point-ring{r:var(--movable-point-ring-size)}.mafs-movable-point:focus-visible .mafs-movable-point-focus{stroke-opacity:1}.MafsView{--mafs-bg:transparent;--mafs-fg:var(--wb-semanticColor-core-foreground-neutral-strong);--mafs-line-color:var(--wb-semanticColor-core-border-neutral-subtle);--mafs-axis-stroke-width:2px;--mafs-blue:var(--wb-semanticColor-core-foreground-instructive-default);--mafs-red:var(--wb-semanticColor-core-foreground-critical-default);--mafs-green:var(--wb-semanticColor-core-foreground-success-default);--mafs-violet:var(--wb-semanticColor-mastery-primary);--mafs-yellow:var(--wb-semanticColor-core-foreground-warning-default);--static-gray:var(--wb-semanticColor-core-foreground-disabled-strong);--movable-point-color:var(--mafs-blue);--movable-point-center-radius:6px;--movable-point-ring-radius:calc(2px + var(--movable-point-center-radius));--movable-point-halo-radius:calc(3px + var(--movable-point-ring-radius));--movable-point-hover-expansion:2px;--movable-point-focus-ring-offset:2px;--movable-line-stroke-weight:2px;--movable-line-stroke-weight-active:4px;--movable-asymptote-stroke-weight:2px;--movable-asymptote-stroke-weight-active:4px;--movable-asymptote-dash-length:6;--movable-asymptote-dash-gap:8;--movable-asymptote-dash-length-active:8;--movable-asymptote-dash-gap-active:12;overflow:visible!important;overscroll-behavior-y:contain;touch-action:pan-y}.MafsView .movable-circle,.MafsView .movable-line,.MafsView .movable-point__focusable-handle,.MafsView .movable-polygon{touch-action:none}.MafsView>svg{display:block;overflow:visible}.MafsView .movable-line--hover,.MafsView .movable-line:focus-visible,.MafsView .movable-line:hover,.movable-dragging{--movable-line-stroke-weight:var(--movable-line-stroke-weight-active);--movable-asymptote-stroke-weight:var(
+    );box-sizing:border-box;min-width:auto;padding-inline-end:var(--perseus-multiple-choice-spacing);position:relative;transform:translateZ(0)}.perseus_ejJezW-c{list-style:none;margin:0;min-width:fit-content;padding:0;scrollbar-width:thin;width:100%}.perseus_ejJezW-c:dir(rtl){--perseus-multiple-choice-fade-direction:270deg}.perseus_ejJezW-c:before{background:linear-gradient(var(--perseus-multiple-choice-fade-direction),var(--perseus-multiple-choice-fade-color) calc(var(--mobile-font-scale, 1)*(var(--perseus-multiple-choice-content-margin) + (var(--perseus-multiple-choice-spacing)/2))),transparent calc(var(--mobile-font-scale, 1)*(var(--perseus-multiple-choice-content-margin) + var(--perseus-multiple-choice-spacing))) calc(100% - var(--mobile-font-scale, 1)*var(--perseus-multiple-choice-spacing)*1.5),var(--perseus-multiple-choice-fade-color) calc(100% - var(--mobile-font-scale, 1)*var(--perseus-multiple-choice-spacing)));content:"";display:block;height:100%;position:fixed;width:100%}.perseus_zAWs4E3G{--perseus-content-line-height:var(--wb-font-heading-lineHeight-medium);display:flex;flex-direction:column;gap:var(--wb-sizing-size_120);margin-inline-start:var(--perseus-multiple-choice-content-margin);position:relative;z-index:-1}@supports (margin-block-start:1lh){.perseus_zAWs4E3G{--perseus-content-line-height:1lh}}.perseus_zAWs4E3G:not(:has(.paragraph:first-child>.paragraph :is(img,mjx-mfrac,mjx-msqrt,mjx-mroot,mjx-munder,mjx-mover,mjx-munderover))){margin-block-start:calc((var(--perseus-multiple-choice-indicator-size) - var(--perseus-content-line-height))*.4)}@media (prefers-reduced-motion:no-preference){.perseus_zAWs4E3G{transition:all .125s}}.perseus_WyGpYl3q{color:var(--wb-semanticColor-core-foreground-neutral-strong);display:block;font-family:inherit;font-style:normal;font-weight:var(--wb-font-weight-bold);margin-block-end:var(--wb-sizing-size_160)}.perseus_6vMrWVz0,.perseus_WyGpYl3q{font-size:var(--wb-font-body-size-medium);line-height:var(--wb-font-body-lineHeight-medium)}.perseus_6vMrWVz0{font-weight:var(--wb-font-weight-medium)}.perseus_6vMrWVz0.perseus_Zv66BVdg{color:var(--wb-semanticColor-core-foreground-neutral-default)}.perseus_6vMrWVz0 .perseus-renderer{display:flex;flex-direction:column;gap:var(--wb-sizing-size_120)}.perseus_6vMrWVz0 .perseus-renderer .paragraph{margin:0}.perseus_6vMrWVz0 .perseus-renderer>.paragraph:not(:has(*)){display:none}.perseus_hJzSXKwq{--perseus-multiple-choice-content-margin:calc(var(--perseus-multiple-choice-spacing) + var(--perseus-multiple-choice-indicator-correct-size))}.perseus_w5JEPtr3{align-items:center;background:var(--wb-semanticColor-core-background-base-subtle);border:var(--wb-border-width-thin) dashed var(--wb-semanticColor-core-border-neutral-default);border-radius:var(--wb-border-radius-radius_040);box-sizing:border-box;display:inline-flex;justify-content:center;margin-inline:var(--wb-sizing-size_040);min-height:48px;min-width:var(--blank-min-inline-size,65px);padding:var(--wb-sizing-size_0);transition:min-width .15s ease-out;vertical-align:middle}@media (prefers-reduced-motion:reduce){.perseus_w5JEPtr3{transition:none}}.perseus_w5JEPtr3.perseus_YYUlZ0FC{margin-inline:0;min-height:28px;min-width:26px}.perseus_w5JEPtr3.perseus_zuqfZw15{vertical-align:.5em}.perseus_w5JEPtr3.perseus_WBbw9tQT{vertical-align:-.7em}.perseus_w5JEPtr3.perseus_YYUlZ0FC.perseus_1Uom-GrS:focus-within,.perseus_w5JEPtr3.perseus_YYUlZ0FC.perseus_1Uom-GrS:hover{vertical-align:middle}.perseus_w5JEPtr3.perseus_1Uom-GrS{background:transparent;border:none;min-height:0;min-width:0}.perseus_w5JEPtr3.perseus_1Uom-GrS.perseus_djiO5HzC{min-width:var(--blank-min-inline-size,65px)}.perseus_w5JEPtr3.perseus_ZiDXp0R-{background:var(--wb-semanticColor-core-background-instructive-subtle);border-color:transparent;border-radius:var(--wb-border-radius-radius_080);outline:var(--wb-border-width-medium) dashed var(--wb-semanticColor-core-border-instructive-default);outline-offset:calc(var(--wb-border-width-medium)*-1)}@container fitb-answer-zone (width < 504px){.perseus_w5JEPtr3:not(.perseus_YYUlZ0FC){display:flex;inline-size:100cqi;justify-content:flex-start;margin-inline:0}}.perseus_5CDFHduT{border-bottom:none;color:var(--wb-semanticColor-core-foreground-instructive-default)}:active>.perseus_5CDFHduT,:focus>.perseus_5CDFHduT,:hover>.perseus_5CDFHduT{border-bottom:var(--wb-border-width-medium) solid var(--wb-semanticColor-core-border-instructive-default)}.perseus_ydfsz2Xj{color:var(--wb-semanticColor-core-foreground-neutral-strong);font-size:var(--wb-font-body-size-medium);font-weight:var(--wb-font-weight-medium);line-height:var(--wb-font-body-lineHeight-medium)}.perseus_3AGWQQ8Z{height:auto;line-height:inherit;margin-left:-.2rem;margin-right:.2rem;padding-left:.2rem}.perseus_HDIlPzEz{border-left:var(--wb-border-width-none) solid var(--wb-semanticColor-core-border-neutral-subtle);display:inline-grid;position:relative}.perseus_NkFQFgcZ{grid-template-columns:0fr;grid-template-rows:0fr;margin-bottom:0;margin-top:0;min-width:0;padding-bottom:0;visibility:hidden}.perseus_XhV-9haB{border-left-width:5px;grid-template-columns:1fr;grid-template-rows:1fr;margin-bottom:1.4rem;margin-left:-2.3rem;margin-top:1.4rem;min-width:100%;padding-bottom:1rem;padding-left:2.3rem;visibility:visible}.perseus_WEJESS6h{overflow:hidden}.perseus_SX0g-1Bs{font-size:var(--wb-font-heading-size-medium);line-height:inherit;margin-right:-.6rem;text-align:left;white-space:normal}@media (prefers-reduced-motion:no-preference){.perseus_sbBrAODD{transition:all .25s step-end,grid-template-rows .25s,margin-top .25s,margin-bottom .25s,padding-bottom .25s}.perseus_Wp72j6qk{transition:grid-template-rows .5s,margin-top .5s,margin-bottom .5s,padding-bottom .5s}}.MafsView .protractor-rotation-handle{cursor:grab;pointer-events:all;transition:transform .15s ease-out}.MafsView .protractor-rotation-handle:hover{transform:scale(1.2)}.MafsView .protractor-rotation-handle-arrow-arc{fill:none;stroke:var(--mafs-blue);stroke-width:8;stroke-linecap:square}.MafsView .protractor-rotation-handle-arrowhead{fill:var(--mafs-blue);stroke:none}.MafsView{--mafs-bg:#000;--mafs-fg:#fff;--mafs-origin-color:var(--mafs-fg);--mafs-line-color:#555;--mafs-line-stroke-dash-style:4,3;--mafs-axis-stroke-width:1px;--grid-line-subdivision-color:#222;--mafs-red:#f11d0e;--mafs-orange:#f14e0e;--mafs-yellow:#ffe44a;--mafs-green:#15e272;--mafs-blue:#58a6ff;--mafs-indigo:#7c58ff;--mafs-violet:#ae58ff;--mafs-pink:#ee00ab;background:var(--mafs-bg);display:block;font-family:inherit;font-variant-numeric:tabular-nums;outline:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.MafsView text{fill:var(--mafs-fg);cursor:default}.MafsView path{stroke:var(--mafs-fg)}.MafsView:focus-visible{border-radius:5px;outline:3px solid #58a6ff}@supports not selector(:focus-visible){.MafsView:focus{border-radius:5px;outline:3px solid #58a6ff}}.mafs-shadow{stroke-width:3px;stroke:var(--mafs-bg);stroke-opacity:.75;stroke-linejoin:round;paint-order:stroke}.mafs-movable-point{cursor:grab;touch-action:none}.mafs-movable-point-dragging{cursor:grabbing}.mafs-movable-point:focus{outline:0}.mafs-movable-point *{fill:none;stroke:none}.mafs-movable-point-hitbox{fill:transparent}.mafs-movable-point-focus{stroke:var(--movable-point-color);stroke-width:2;stroke-opacity:0;fill:none;transition:stroke-opacity .2s ease}.mafs-movable-point-ring{fill:var(--movable-point-color);fill-opacity:.25;stroke:none;transition:r .2s ease}.mafs-movable-point-point{fill:var(--movable-point-color);transition:r .2s ease}.mafs-movable-point:focus-visible .mafs-movable-point-point,.mafs-movable-point:hover .mafs-movable-point-point{r:calc(var(--movable-point-ring-size) - 2px)}.mafs-movable-point:focus-visible .mafs-movable-point-ring,.mafs-movable-point:hover .mafs-movable-point-ring{r:calc(var(--movable-point-ring-size) + 3px)}.mafs-movable-point.mafs-movable-point-dragging .mafs-movable-point-ring{r:var(--movable-point-ring-size)}.mafs-movable-point:focus-visible .mafs-movable-point-focus{stroke-opacity:1}.MafsView{--mafs-bg:transparent;--mafs-fg:var(--wb-semanticColor-core-foreground-neutral-strong);--mafs-line-color:var(--wb-semanticColor-core-border-neutral-subtle);--mafs-axis-stroke-width:2px;--mafs-blue:var(--wb-semanticColor-core-foreground-instructive-default);--mafs-red:var(--wb-semanticColor-core-foreground-critical-default);--mafs-green:var(--wb-semanticColor-core-foreground-success-default);--mafs-violet:var(--wb-semanticColor-mastery-primary);--mafs-yellow:var(--wb-semanticColor-core-foreground-warning-default);--static-gray:var(--wb-semanticColor-core-foreground-disabled-strong);--movable-point-color:var(--mafs-blue);--movable-point-center-radius:6px;--movable-point-ring-radius:calc(2px + var(--movable-point-center-radius));--movable-point-halo-radius:calc(3px + var(--movable-point-ring-radius));--movable-point-hover-expansion:2px;--movable-point-focus-ring-offset:2px;--movable-line-stroke-weight:2px;--movable-line-stroke-weight-active:4px;--movable-asymptote-stroke-weight:2px;--movable-asymptote-stroke-weight-active:4px;--movable-asymptote-dash-length:6;--movable-asymptote-dash-gap:8;--movable-asymptote-dash-length-active:8;--movable-asymptote-dash-gap-active:12;overflow:visible!important;overscroll-behavior-y:contain;touch-action:pan-y}.MafsView .movable-circle,.MafsView .movable-line,.MafsView .movable-point__focusable-handle,.MafsView .movable-polygon{touch-action:none}.MafsView>svg{display:block;overflow:visible}.MafsView .movable-line--hover,.MafsView .movable-line:focus-visible,.MafsView .movable-line:hover,.movable-dragging{--movable-line-stroke-weight:var(--movable-line-stroke-weight-active);--movable-asymptote-stroke-weight:var(
         --movable-asymptote-stroke-weight-active
     );--movable-asymptote-dash-length:var(
         --movable-asymptote-dash-length-active