.container {
    width: 100%;
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}
.fixed {
    position: fixed;
}
.inline {
    display: inline;
}
.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);
}
.transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

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

/*
 * The keys are mathematical notation, so they stay left-to-right even when the
 * tray around them is right-to-left. Every row is a flex row and every region a
 * grid, both of which reverse under `rtl`, so an Arabic reader would otherwise
 * get a mirrored QWERTY and a numeric pad running 3-2-1. The cursor keys are
 * the sharpest case: `.key-left` sends MathQuill a `Left` keystroke whatever
 * the CSS says, so a reversed row would leave the `←` key sitting on the right
 * and moving the caret the other way.
 *
 * Stated here rather than as a `dir` attribute because `Keyboard` returns a
 * different element per style; one rule covers all of them. The tab strip is
 * included: its labels are `123`, `f(x)`, `ABC`, `αβγ` and `$%∞`, none of which
 * is prose.
 */
.virtual-keyboard,
.virtual-keyboard-tab-list {
    direction: ltr;
}

.virtual-keyboard {
    /*
     * How wide the keyboard may spread. A variable because the sub-keyboard
     * has to agree with it, and because the touch-device block below raises
     * it — two literals that must match are two literals that can drift.
     */
    --keyboard-max-width: 42rem;
    display: flex;
    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 {
    max-width: var(--keyboard-max-width);
}

.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;
    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%;
        max-width: var(--keyboard-max-width);
}

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

/*
 * Touch devices — see the note beside the matching block in
 * `keyboard-tray.css`. A key was 39x40 on a phone and a layout tab 30x25;
 * both are below the 44px a fingertip needs (issue #449).
 *
 * Height is raised outright, since it costs only tray height. Width is left
 * to the flex layout, which already gives each key an equal share of the row:
 * a phone cannot fit twelve 44px-wide keys across, and forcing it would push
 * the row into an overflow or a wrap that helps no one. What helps the other
 * end — a tablet, where the row had room to spare and the keys stayed small
 * in the middle of it — is room for the row to grow, so the even share each
 * key gets is a larger one, and a ceiling raised to match.
 *
 * Both halves are needed. `--keyboard-max-width` alone would hand the extra
 * room to shift, backspace and space, the only keys with no ceiling of their
 * own; the per-key `max-width` alone has nothing extra to hand out. Note that
 * the ceiling is in `em`, and a key is a `button`, which this package's
 * partial copy of Tailwind's preflight leaves at the UA font size of
 * 13.33px — so `4em` is 53px and `4.5em` is 60px, not 64 and 72.
 *
 * Last in the file because every rule here raises one above it and each pair
 * has equal specificity, so source order is all that separates them — a media
 * query adds none. Shift, backspace and space are the exception: their
 * `max-width: none` is set on `.virtual-keyboard .key-*`, two classes, which
 * already outranks the one-class-one-type `button` selector here, so they
 * stay unbounded without being named again. Backspace on the numeric layout
 * is the exception to that exception — a rule above puts its ceiling back at
 * `4em`, and outranks this block for the same reason — so it is the one key
 * that has to be raised by name.
 */
@media (pointer: coarse) {
    .virtual-keyboard {
        --keyboard-max-width: 48rem;
    }

        .virtual-keyboard button {
            min-height: 2.75rem;
            max-width: 4.5em;
        }
    .virtual-keyboard.numeric .key-backspace {
        max-width: 4.5em;
    }
    .virtual-keyboard-tab-list button {
        min-height: 2.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}
/*
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;
*/
.container {
        width: 100%;
}
@media (min-width: 640px) {
        .container {
                max-width: 640px;
        }
}
@media (min-width: 768px) {
        .container {
                max-width: 768px;
        }
}
@media (min-width: 1024px) {
        .container {
                max-width: 1024px;
        }
}
@media (min-width: 1280px) {
        .container {
                max-width: 1280px;
        }
}
@media (min-width: 1536px) {
        .container {
                max-width: 1536px;
        }
}
.fixed {
        position: fixed;
}
.inline {
        display: inline;
}
.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);
}
.transition {
        transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}

/*
 * 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;

    /*
     * The tab that peeks above a closed tray. Its height and the distance it
     * is raised by are the same measurement — it sits exactly its own height
     * above the tray's top edge — so they are one value, not two that have to
     * be kept equal.
     */
    --keyboard-tab-height: 1.5rem;
    --keyboard-tab-width: 3rem;

    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);
    /* A column, so `.keyboard-container` is bound by the height set below. */
    display: flex;
    flex-direction: column;
    /*
     * The tray may never be so tall that it carries its own tab off the top of
     * the screen: the tab hangs exactly `--keyboard-tab-height` above the
     * tray's top edge, so that much has to stay clear. Both bounds are held to
     * it — the floor as well as the ceiling, because a `min-height` outranks a
     * `max-height` and would otherwise reinstate the overshoot on a viewport
     * shorter than the floor. Written against the variable rather than
     * repeating its value: widening the tab for a fingertip is exactly the
     * change that a literal here would have missed.
     */
    --keyboard-tray-max-height: calc(100vh - var(--keyboard-tab-height));
    min-height: min(
        var(--keyboard-tray-height),
        var(--keyboard-tray-max-height)
    );
    max-height: var(--keyboard-tray-max-height);
    z-index: 10000;
    background-color: var(--kb-tray-bg);
}

/*
     * The layout tabs and the keyboard under them, and the only part of the
     * tray that scrolls. A viewport too short for the keyboard — a phone held
     * sideways, or any short window — used to cut the bottom rows off, which
     * on the numeric layout is the number pad; taller keys for a fingertip
     * would have cut off more. `min-height: 0` is what lets it shrink: a flex
     * item's automatic minimum is its own content, which would otherwise push
     * the overflow straight back out to the tray.
     *
     * The layout tabs scroll with the keys rather than staying pinned, so a
     * tray reopened at the position it was left at would be missing them.
     * `keyboard-tray.tsx` scrolls this back to the top as the tray opens.
     *
     * A finger can pan it even though the tray cancels the default action of
     * `pointerdown` across its whole subtree (see `keyboard-tray.tsx`): what
     * suppresses a pan is `touch-action` or a cancelled `touchstart` /
     * `touchmove`, and the tray does neither. Confirmed in Chromium with a
     * real coarse pointer, and asserted in
     * `cypress/e2e/accessibility/virtualKeyboardTouchTargets.cy.js`; iOS
     * Safari has not been tried. `overscroll-behavior` keeps a pan that runs
     * off the end of it from scrolling the document behind the tray.
     */

#virtual-keyboard-tray .keyboard-container {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

/*
     * Outside `.keyboard-container`'s scroll for positioning purposes even
     * though it is inside it in the markup: its containing block is the tray,
     * so it neither scrolls away nor is clipped, and stays in the corner
     * where it can be reached. That holds only while nothing between the two
     * is positioned — give `.keyboard-container` a `position` and the button
     * starts scrolling away with the keys.
     */

#virtual-keyboard-tray .close-keyboard-button {
        position: absolute;
        top: 0px;
        inset-inline-end: 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;
}

/*
     * Inline-end footprint of this button (`--keyboard-tab-width` + me-4) is
     * mirrored by `--keyboard-tab-reserve-width` in
     * `packages/doenetml/src/EditorViewer/editor-viewer.css` so the editor
     * footer can shift its last element inward to clear it. Keep the two
     * values in sync — including the touch-device widening below — and keep
     * both on the *same* axis. `end-0` here pairs with `margin-inline-end`
     * there; making one logical and leaving the other physical would send the
     * tab and the space reserved for it to opposite edges under `rtl`, which
     * is worse than either alone.
     */

#virtual-keyboard-tray .open-keyboard-button {
        position: absolute;
        inset-inline-end: 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;
        align-items: center;
        justify-content: center;
        border-width: 1px;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        top: calc(-1 * var(--keyboard-tab-height));
        width: var(--keyboard-tab-width);
        height: var(--keyboard-tab-height);
}

#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;
}

/*
 * Touch devices: everything here is tapped with a fingertip rather than
 * pointed at, so every control needs a target a fingertip can land on. 44px is
 * the minimum in Apple's HIG and in WCAG 2.5.5. The tray shipped with a 48x24
 * tab to open it, a 24x24 button to close it, and layout tabs measuring 30x25
 * on a phone — issue #449.
 *
 * Keyed on the reader's primary pointer being coarse rather than on how wide
 * the viewport is: a narrow window on a desktop is still driven by a mouse,
 * and a tablet held in two hands is not, however much room it has. This is the
 * same test the viewer uses to decide whether to suppress the device's own
 * on-screen keyboard, so the two stay consistent about what a touch device is.
 */
@media (pointer: coarse) {
    #virtual-keyboard-tray {
        --keyboard-tab-height: 2.75rem;
        --keyboard-tab-width: 4rem;
    }

        #virtual-keyboard-tray .open-keyboard-button {
            /* The icon is drawn at 1em, so it grows with the tab. */
            font-size: 1.25rem;
            line-height: 1.75rem;
        }

        #virtual-keyboard-tray .close-keyboard-button {
                margin: 0.25rem;
                height: 2.75rem;
                width: 2.75rem;
        }
}

/* 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=10db3625f14d0866.css.map*/