.overline {
        -webkit-text-decoration-line: overline;
                text-decoration-line: overline;
}

.blur {
        --tw-blur: blur(8px);
        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);
}

.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);
}

.keyboard-button {
        display: inline-flex;
        height: 2.5rem;
        max-width: 4em;
        flex-grow: 1;
        flex-basis: 1rem;
        justify-content: center;
        align-items: center;
        border-radius: 0.375rem;
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.keyboard-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.keyboard-button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.special-button {
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.special-button:hover {
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.special-button:active {
        --tw-border-opacity: 1;
        border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.virtual-keyboard {
        display: flex;
        max-width: 42rem;
        justify-content: center;
        row-gap: 0.25rem;
        column-gap: 0.75rem;
}

@media (min-width: 640px) {

        .virtual-keyboard {
                row-gap: 0.5rem;
        }
}

.virtual-keyboard {
        flex-wrap: wrap;
}

@media (min-width: 640px) {

        .virtual-keyboard {
                flex-wrap: nowrap;
        }
}

.virtual-keyboard .row {
        display: flex;
        flex-basis: 100%;
        justify-content: center;
        column-gap: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .row {
                column-gap: 0.5rem;
        }
}

.virtual-keyboard .keyboard-region {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        -moz-column-gap: 0.25rem;
             grid-column-gap: 0.25rem;
             column-gap: 0.25rem;
        grid-row-gap: 0.25rem;
        row-gap: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .keyboard-region {
                column-gap: 0.5rem;
                row-gap: 0.5rem;
        }
}

.virtual-keyboard .keyboard-region .key {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .keyboard-region .key {
                padding-left: 1rem;
                padding-right: 1rem;
        }
}

.virtual-keyboard .sub-keyboard {
        display: flex;
        max-width: 42rem;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .sub-keyboard {
                row-gap: 0.5rem;
        }
}

.virtual-keyboard .sub-keyboard {
        height: 100%;
}

.virtual-keyboard button {
        background-color: var(--kb-key-bg, #fff);
        display: inline-flex;
        height: 2.5rem;
        max-width: 4em;
        flex-grow: 1;
        flex-basis: 1rem;
        justify-content: center;
        align-items: center;
        border-radius: 0.375rem;
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    }

.virtual-keyboard button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard .break {
        height: 0px;
        flex-basis: 100%;
}

.virtual-keyboard .key {
        font-weight: 700;
}

.virtual-keyboard .key.math {
        font-weight: 400;
}

.virtual-keyboard .key-space,
    .virtual-keyboard .key-backspace,
    .virtual-keyboard .key-left,
    .virtual-keyboard .key-right,
    .virtual-keyboard .key-shift,
    .virtual-keyboard .key-enter {
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard .key-space:hover,
    .virtual-keyboard .key-backspace:hover,
    .virtual-keyboard .key-left:hover,
    .virtual-keyboard .key-right:hover,
    .virtual-keyboard .key-shift:hover,
    .virtual-keyboard .key-enter:hover {
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard .key-space:active,
    .virtual-keyboard .key-backspace:active,
    .virtual-keyboard .key-left:active,
    .virtual-keyboard .key-right:active,
    .virtual-keyboard .key-shift:active,
    .virtual-keyboard .key-enter:active {
        --tw-border-opacity: 1;
        border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.virtual-keyboard .key-shift,
    .virtual-keyboard .key-backspace {
        max-width: none;
        flex-grow: 1;
}

.virtual-keyboard .key-space {
        max-width: none;
        flex-grow: 1;
}

.virtual-keyboard .svg-inline--fa {
        display: inline-block;
        height: 1em;
    }

.virtual-keyboard.numeric .key-backspace {
        max-width: 4em;
}
.virtual-keyboard.alpha,
.virtual-keyboard.greek {
        flex-wrap: wrap;
}
.virtual-keyboard.symbol .keyboard-region {
        grid-template-columns: repeat(5, minmax(0, 1fr));
}

.virtual-keyboard-tab-list {
        display: flex;
        flex-wrap: nowrap;
}

.virtual-keyboard-tab-list button {
        margin-bottom: 0.75rem;
        border-bottom-width: 2px;
        padding: 0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        padding-bottom: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard-tab-list button {
                padding: 0.5rem;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
        }
}

.virtual-keyboard-tab-list button {
        /* Non-selected tabs: slate-200 underline so only the selected tab's
           blue indicator stands out. Without an explicit color this falls
           back to currentColor (black), drawing a harsh line under every tab. */
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    }

.virtual-keyboard-tab-list button[aria-selected="true"] {
        --tw-border-opacity: 1;
        border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
/*
Tailwind base is purposely not included because we want all styles to be prefixed. We manually copy in whatever is needed from tailwind preflight.
@tailwind base;
*/
.overline {
        -webkit-text-decoration-line: overline;
                text-decoration-line: overline;
}
.blur {
        --tw-blur: blur(8px);
        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);
}
.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);
}

/*
 * Some styles from tailwind preflight need to be included here
 */
:where(#virtual-keyboard-tray, .virtual-keyboard) button {
        -webkit-appearance: button;
        border-width: 0;
        border-style: solid;
        background: transparent;
        cursor: pointer;
    }

#virtual-keyboard-tray {
    /*
     * Some styles from tailwind preflight need to be included here
     */
    box-sizing: border-box;
    --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-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: var(--kb-ring-offset, #fff);
    --tw-ring-color: rgb(59 130 246 / 0.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-border-opacity: 1;

    /* Theme tokens — light-mode defaults */
    --kb-tray-bg: white;
    --kb-tray-border-top: black;
    --kb-ring-offset: #fff;
    --kb-key-bg: #fff;

    --keyboard-tray-height: 280px;

    border-top: 1px solid var(--kb-tray-border-top);

    position: fixed;

    bottom: 0px;

    width: 100%;

    overflow: visible;

    padding-left: 0.5rem;

    padding-right: 0.5rem;

    padding-bottom: 0.5rem;

    --tw-translate-y: 100%;

    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));

    transition-property: transform;

    transition-duration: 300ms;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    min-height: var(--keyboard-tray-height);
    max-height: calc(100vh - 1.5rem);
    z-index: 10000;
    background-color: var(--kb-tray-bg);
}

#virtual-keyboard-tray .close-keyboard-button {
        position: absolute;
        top: 0px;
        right: 0px;
        margin: 0.5rem;
        border-radius: 0.25rem;
}

#virtual-keyboard-tray .close-keyboard-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .close-keyboard-button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .close-keyboard-button {
        display: flex;
        height: 1.5rem;
        width: 1.5rem;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        line-height: 2rem;
}

/*
     * Right-edge footprint of this button (w-12 + me-4 = 4rem) is mirrored
     * by `--keyboard-tab-reserve-width` in
     * `packages/doenetml/src/EditorViewer/editor-viewer.css` so the editor
     * footer can shift its rightmost element inward to clear it. Keep the
     * two values in sync.
     */

#virtual-keyboard-tray .open-keyboard-button {
        position: absolute;
        top: -1.5rem;
        right: 0px;
        -webkit-margin-end: 1rem;
                margin-inline-end: 1rem;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        border-bottom-width: 1px;
        --tw-border-opacity: 1;
        border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

#virtual-keyboard-tray .open-keyboard-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .open-keyboard-button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .open-keyboard-button {
        display: flex;
        height: 1.5rem;
        width: 3rem;
        align-items: center;
        justify-content: center;
        border-width: 1px;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .virtual-keyboard-tab-list {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
}

@media (min-width: 640px) {
        #virtual-keyboard-tray .virtual-keyboard-tab-list {
                margin-left: 5rem;
                margin-right: 5rem;
        }
}

#virtual-keyboard-tray .virtual-keyboard {
        margin-left: auto;
        margin-right: auto;
}

/* Dark-mode overrides — applied when data-theme="dark" is written to #virtual-keyboard-tray */
#virtual-keyboard-tray[data-theme="dark"] {
    --kb-tray-bg: #1e1e1e;
    --kb-tray-border-top: #555;
    --kb-ring-offset: #1e1e1e;
    --kb-key-bg: #2d2d2d;

    color: white;
}
/*
     * Browsers have a UA stylesheet rule `button { color: ButtonText }` which
     * is an explicit UA-level declaration and beats an *inherited* `color:
     * white` from a parent. We must set color explicitly on button elements
     * so the author rule overrides UA. This also makes MathJax SVG paths
     * (which use fill:currentColor) render white rather than the UA button
     * color.
     */
#virtual-keyboard-tray[data-theme="dark"] button {
        color: white;
    }
/* Close (×) button */
#virtual-keyboard-tray[data-theme="dark"] .close-keyboard-button:hover {
        background-color: #3a3a3a;
    }
#virtual-keyboard-tray[data-theme="dark"] .close-keyboard-button:active {
        background-color: #4a4a4a;
    }
/* Open-keyboard tab that peeks above the tray */
#virtual-keyboard-tray[data-theme="dark"] .open-keyboard-button {
        background-color: #2d2d2d;
        border-color: #555;
        border-bottom-color: transparent;
    }
#virtual-keyboard-tray[data-theme="dark"] .open-keyboard-button:hover {
        background-color: #3a3a3a;
    }
#virtual-keyboard-tray[data-theme="dark"] .open-keyboard-button:active {
        background-color: #4a4a4a;
    }
/*
     * Key faces — target via .virtual-keyboard button because @apply in
     * keyboard.css inlines styles without adding the class to the HTML element.
     * These override the light-mode .virtual-keyboard button:hover / :active
     * rules (light grey slate-100/slate-300) that become invisible with white text.
     */
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard button {
        background-color: #2d2d2d;
        border-color: #4a4a4a;
    }
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard button:hover {
        background-color: #3a3a3a;
    }
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard button:active {
        background-color: #4a4a4a;
    }
/*
     * Special keys (backspace, shift, space, arrows, enter).
     * These use @apply special-button in keyboard.css which compiles to
     * .virtual-keyboard .key-space, .virtual-keyboard .key-backspace etc.
     * — the HTML elements have .key-space/.key-backspace class, not .special-button.
     * Specificity must beat .virtual-keyboard .key-* at (0, 2, 0).
     */
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-space,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-backspace,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-left,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-right,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-shift,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-enter {
        background-color: #383838;
        border-color: #383838;
    }
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-space:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-backspace:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-left:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-right:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-shift:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-enter:hover {
        background-color: #454545;
        border-color: #454545;
    }
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-space:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-backspace:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-left:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-right:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-shift:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-enter:active {
        background-color: #555555;
        border-color: #555555;
        color: white;
    }
/*
     * Selected tab indicator.
     * blue-400 (#60a5fa) on #1e1e1e ≈ 6.9:1 — WCAG AA ✓
     * blue-300 (#93c5fd) on #1e1e1e ≈ 8.6:1 — WCAG AA ✓
     */
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard-tab-list button[aria-selected="true"] {
        border-color: #60a5fa;
        color: #93c5fd;
    }
/* Non-selected tab borders: use a dim separator instead of transparent
       so the tab strip has a subtle anchor line in dark mode. */
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard-tab-list button:not([aria-selected="true"]) {
        border-color: #444;
    }

#virtual-keyboard-tray.open {
        --tw-translate-y: 0px;
        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));
}


/*# sourceMappingURL=38925aa7d3bf05d6.css.map*/